@six-group/ui-library 0.0.0-insider.27d0bb9 → 0.0.0-insider.2835e5c

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 (28) hide show
  1. package/dist/cjs/six-language-switcher.cjs.entry.js +6 -2
  2. package/dist/cjs/six-language-switcher.cjs.entry.js.map +1 -1
  3. package/dist/cjs/six-tab.cjs.entry.js +1 -1
  4. package/dist/cjs/six-tab.cjs.entry.js.map +1 -1
  5. package/dist/collection/components/six-language-switcher/six-language-switcher.css +4 -0
  6. package/dist/collection/components/six-language-switcher/six-language-switcher.js +5 -1
  7. package/dist/collection/components/six-language-switcher/six-language-switcher.js.map +1 -1
  8. package/dist/collection/components/six-language-switcher/test/six-language-switcher.spec.js +12 -12
  9. package/dist/collection/components/six-language-switcher/test/six-language-switcher.spec.js.map +1 -1
  10. package/dist/collection/components/six-tab/six-tab.js +1 -1
  11. package/dist/collection/components/six-tab/six-tab.js.map +1 -1
  12. package/dist/components/six-language-switcher.js +6 -2
  13. package/dist/components/six-language-switcher.js.map +1 -1
  14. package/dist/components/six-tab.js +1 -1
  15. package/dist/components/six-tab.js.map +1 -1
  16. package/dist/components.json +3 -3
  17. package/dist/esm/six-language-switcher.entry.js +6 -2
  18. package/dist/esm/six-language-switcher.entry.js.map +1 -1
  19. package/dist/esm/six-tab.entry.js +1 -1
  20. package/dist/esm/six-tab.entry.js.map +1 -1
  21. package/dist/ui-library/p-1d4cb6e9.entry.js +2 -0
  22. package/dist/ui-library/p-1d4cb6e9.entry.js.map +1 -0
  23. package/dist/ui-library/{p-f8572492.entry.js → p-288da3ba.entry.js} +2 -2
  24. package/dist/ui-library/{p-f8572492.entry.js.map → p-288da3ba.entry.js.map} +1 -1
  25. package/dist/ui-library/ui-library.esm.js +1 -1
  26. package/package.json +2 -2
  27. package/dist/ui-library/p-be0c0ec9.entry.js +0 -2
  28. package/dist/ui-library/p-be0c0ec9.entry.js.map +0 -1
package/dist/cjs/six-language-switcher.cjs.entry.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-b288f7d9.js');
6
6
 
7
- const sixLanguageSwitcherCss = ".language-switcher__container{display:flex}.language-switcher__separator{padding:0 0.25rem}.language-switcher__label{cursor:pointer}.language-switcher__label:hover{color:var(--six-color-web-rock-600)}.language-switcher__label--selected{color:var(--six-color-black);text-decoration:underline}";
7
+ const sixLanguageSwitcherCss = ".language-switcher__container{display:flex}.language-switcher__separator{padding:0 0.25rem}.language-switcher__label{cursor:pointer}.language-switcher__label:hover{color:var(--six-color-web-rock-600)}.language-switcher__label:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}.language-switcher__label--selected{color:var(--six-color-black);text-decoration:underline}";
8
8
  const SixLanguageSwitcherStyle0 = sixLanguageSwitcherCss;
9
9
 
10
10
  const DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];
@@ -49,7 +49,11 @@ const SixLanguageSwitcher = class {
49
49
  render() {
50
50
  return (index.h("div", { key: 'fa72eaaf2cb5c0f327a0924e12779863f348b59c', part: "container", class: "language-switcher__container" }, this.languages.map((lang, index$1) => {
51
51
  const language = typeof lang === 'string' ? lang : lang.key;
52
- return (index.h("div", { onClick: this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value) }, index.h("span", { part: "label", class: {
52
+ return (index.h("div", { onClick: this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value), onKeyDown: (e) => {
53
+ if (e.key === 'Enter' || e.key === ' ') {
54
+ this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)();
55
+ }
56
+ } }, index.h("span", { part: "label", tabindex: "0", class: {
53
57
  'language-switcher__label': true,
54
58
  'language-switcher__label--selected': this.selected === language,
55
59
  } }, language), index$1 < this.languages.length - 1 && (index.h("span", { part: "separator", class: "language-switcher__separator" }, "|"))));
package/dist/cjs/six-language-switcher.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"six-language-switcher.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,sBAAsB,GAAG,qSAAqS,CAAC;AACrU,kCAAe,sBAAsB;;ACYrC,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;MAchC,mBAAmB;;;;QAqCtB,4BAAuB,GAAG,CAAC,WAAmB,EAAE,aAAsB,KAAK;YACjF,IAAI,aAAa,KAAK,SAAS,EAAE;gBAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;aACpC;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;aAClC;YACD,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;SAC7B,CAAC;;yBAvCyD,iBAAiB;;IAG5E,sBAAsB,CAAC,QAAkB;QACvC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;SACzD;QAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;IAMD,iBAAiB;QACf,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE;YAC/B,IAAI,CAAC,sBAAsB,EAAE,CAAC;SAC/B;KACF;IAEO,sBAAsB;QAC5B,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QAC3C,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE;YACxC,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACpC;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC;YACrC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC7C;KACF;IAWD,MAAM;QACJ,QACEA,kEAAK,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,IACvD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAEC,OAAK;YAC9B,MAAM,QAAQ,GAAG,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;YAC5D,QACED,iBAAK,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAChGA,kBACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;oBACL,0BAA0B,EAAE,IAAI;oBAChC,oCAAoC,EAAE,IAAI,CAAC,QAAQ,KAAK,QAAQ;iBACjE,IAEA,QAAQ,CACJ,EACNC,OAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,KAChCD,kBAAM,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,QAEpD,CACR,CACG,EACN;SACH,CAAC,CACE,EACN;KACH;;;;;;;;;","names":["h","index"],"sources":["src/components/six-language-switcher/six-language-switcher.scss?tag=six-language-switcher&encapsulation=shadow","src/components/six-language-switcher/six-language-switcher.tsx"],"sourcesContent":[".language-switcher {\n &__container {\n display: flex;\n }\n\n &__separator {\n padding: 0 0.25rem;\n }\n\n &__label {\n cursor: pointer;\n\n &:hover {\n color: var(--six-color-web-rock-600);\n }\n\n &--selected {\n color: var(--six-color-black);\n text-decoration: underline;\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 2.1.0\n * @status experimental\n **/\n\nexport interface SixLanguageSwitcherInput {\n key: string;\n value: string;\n}\nexport type SixLanguageSwitcherChangePayload = string;\n\nconst DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];\n\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n@Component({\n tag: 'six-language-switcher',\n styleUrl: 'six-language-switcher.scss',\n shadow: true,\n})\nexport class SixLanguageSwitcher {\n /** The language which should be shown as selected */\n @Prop({ mutable: true, reflect: true }) selected?: string;\n\n /** The languages which should be selectable options. */\n @Prop() languages: string[] | SixLanguageSwitcherInput[] = DEFAULT_LANGUAGES;\n\n @Watch('languages')\n handleChangesLanguages(newValue: string[]) {\n if (!Array.isArray(newValue)) {\n throw new Error('languages is expected to be an array');\n }\n\n this.updateSelectedLanguage();\n }\n /**\n * Emitted when the language switchers value changes\n */\n @Event({ eventName: 'six-language-switcher-change' }) sixChange!: EventEmitter<SixLanguageSwitcherChangePayload>;\n\n componentWillLoad() {\n if (this.selected === undefined) {\n this.updateSelectedLanguage();\n }\n }\n\n private updateSelectedLanguage() {\n const selectedLanguage = this.languages[0];\n if (typeof selectedLanguage === 'string') {\n this.selected = selectedLanguage;\n this.sixChange.emit(this.selected);\n } else {\n this.selected = selectedLanguage.key;\n this.sixChange.emit(selectedLanguage.value);\n }\n }\n\n private handleLanguageSwitching = (newLanguage: string, languageValue?: string) => () => {\n if (languageValue !== undefined) {\n this.sixChange.emit(languageValue);\n } else {\n this.sixChange.emit(newLanguage);\n }\n this.selected = newLanguage;\n };\n\n render() {\n return (\n <div part=\"container\" class=\"language-switcher__container\">\n {this.languages.map((lang, index) => {\n const language = typeof lang === 'string' ? lang : lang.key;\n return (\n <div onClick={this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)}>\n <span\n part=\"label\"\n class={{\n 'language-switcher__label': true,\n 'language-switcher__label--selected': this.selected === language,\n }}\n >\n {language}\n </span>\n {index < this.languages.length - 1 && (\n <span part=\"separator\" class=\"language-switcher__separator\">\n |\n </span>\n )}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"six-language-switcher.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,sBAAsB,GAAG,uZAAuZ,CAAC;AACvb,kCAAe,sBAAsB;;ACYrC,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;MAchC,mBAAmB;;;;QAqCtB,4BAAuB,GAAG,CAAC,WAAmB,EAAE,aAAsB,KAAK;YACjF,IAAI,aAAa,KAAK,SAAS,EAAE;gBAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;aACpC;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;aAClC;YACD,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;SAC7B,CAAC;;yBAvCyD,iBAAiB;;IAG5E,sBAAsB,CAAC,QAAkB;QACvC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;SACzD;QAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;IAMD,iBAAiB;QACf,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE;YAC/B,IAAI,CAAC,sBAAsB,EAAE,CAAC;SAC/B;KACF;IAEO,sBAAsB;QAC5B,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QAC3C,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE;YACxC,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACpC;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC;YACrC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC7C;KACF;IAWD,MAAM;QACJ,QACEA,kEAAK,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,IACvD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAEC,OAAK;YAC9B,MAAM,QAAQ,GAAG,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;YAC5D,QACED,iBACE,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,EAC7F,SAAS,EAAE,CAAC,CAAC;oBACX,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;wBACtC,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;qBACxF;iBACF,IAEDA,kBACE,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;oBACL,0BAA0B,EAAE,IAAI;oBAChC,oCAAoC,EAAE,IAAI,CAAC,QAAQ,KAAK,QAAQ;iBACjE,IAEA,QAAQ,CACJ,EAENC,OAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,KAChCD,kBAAM,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,QAEpD,CACR,CACG,EACN;SACH,CAAC,CACE,EACN;KACH;;;;;;;;;","names":["h","index"],"sources":["src/components/six-language-switcher/six-language-switcher.scss?tag=six-language-switcher&encapsulation=shadow","src/components/six-language-switcher/six-language-switcher.tsx"],"sourcesContent":[".language-switcher {\n &__container {\n display: flex;\n }\n\n &__separator {\n padding: 0 0.25rem;\n }\n\n &__label {\n cursor: pointer;\n\n &:hover {\n color: var(--six-color-web-rock-600);\n }\n\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: var(--six-focus-ring-offset);\n }\n\n &--selected {\n color: var(--six-color-black);\n text-decoration: underline;\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 2.1.0\n * @status experimental\n **/\n\nexport interface SixLanguageSwitcherInput {\n key: string;\n value: string;\n}\nexport type SixLanguageSwitcherChangePayload = string;\n\nconst DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];\n\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n@Component({\n tag: 'six-language-switcher',\n styleUrl: 'six-language-switcher.scss',\n shadow: true,\n})\nexport class SixLanguageSwitcher {\n /** The language which should be shown as selected */\n @Prop({ mutable: true, reflect: true }) selected?: string;\n\n /** The languages which should be selectable options. */\n @Prop() languages: string[] | SixLanguageSwitcherInput[] = DEFAULT_LANGUAGES;\n\n @Watch('languages')\n handleChangesLanguages(newValue: string[]) {\n if (!Array.isArray(newValue)) {\n throw new Error('languages is expected to be an array');\n }\n\n this.updateSelectedLanguage();\n }\n /**\n * Emitted when the language switchers value changes\n */\n @Event({ eventName: 'six-language-switcher-change' }) sixChange!: EventEmitter<SixLanguageSwitcherChangePayload>;\n\n componentWillLoad() {\n if (this.selected === undefined) {\n this.updateSelectedLanguage();\n }\n }\n\n private updateSelectedLanguage() {\n const selectedLanguage = this.languages[0];\n if (typeof selectedLanguage === 'string') {\n this.selected = selectedLanguage;\n this.sixChange.emit(this.selected);\n } else {\n this.selected = selectedLanguage.key;\n this.sixChange.emit(selectedLanguage.value);\n }\n }\n\n private handleLanguageSwitching = (newLanguage: string, languageValue?: string) => () => {\n if (languageValue !== undefined) {\n this.sixChange.emit(languageValue);\n } else {\n this.sixChange.emit(newLanguage);\n }\n this.selected = newLanguage;\n };\n\n render() {\n return (\n <div part=\"container\" class=\"language-switcher__container\">\n {this.languages.map((lang, index) => {\n const language = typeof lang === 'string' ? lang : lang.key;\n return (\n <div\n onClick={this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)();\n }\n }}\n >\n <span\n part=\"label\"\n tabindex=\"0\"\n class={{\n 'language-switcher__label': true,\n 'language-switcher__label--selected': this.selected === language,\n }}\n >\n {language}\n </span>\n\n {index < this.languages.length - 1 && (\n <span part=\"separator\" class=\"language-switcher__separator\">\n |\n </span>\n )}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"],"version":3}
package/dist/cjs/six-tab.cjs.entry.js CHANGED
@@ -51,7 +51,7 @@ const SixTab = class {
51
51
  'tab--active': this.active,
52
52
  'tab--closable': this.closable,
53
53
  'tab--disabled': this.disabled,
54
- }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, index.h("slot", { key: 'a09a1df3cb8a119d736a200b618e114399fe57c3' }), this.closable && (index.h("six-icon-button", { name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), index.h("div", { key: '31c108fd748bf326b1dd40a92d2b35eaef7f8c29', class: {
54
+ }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, index.h("slot", { key: 'a09a1df3cb8a119d736a200b618e114399fe57c3' }), this.closable && (index.h("six-icon-button", { name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), index.h("div", { key: 'aa6e7b351ed81d8cba4983512b87b50a8a541a68', part: this.active ? 'active-tab-indicator' : '', class: {
55
55
  tab__indicator: true,
56
56
  'tab__indicator--active': this.active,
57
57
  // Placements
package/dist/cjs/six-tab.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"six-tab.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,orDAAorD,CAAC;AACvsD,qBAAe,SAAS;;ACExB,IAAI,EAAE,GAAG,CAAC,CAAC;MAmBE,MAAM;;;;QACT,gBAAW,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC;qBAMH,EAAE;sBAGD,KAAK;wBAGpB,KAAK;wBAGY,KAAK;;IAKzC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1D;;IAID,MAAM,QAAQ,CAAC,OAAsB;;QACnC,MAAA,IAAI,CAAC,GAAG,0CAAE,KAAK,CAAC,OAAO,CAAC,CAAC;KAC1B;;IAID,MAAM,WAAW;;QACf,MAAA,IAAI,CAAC,GAAG,0CAAE,IAAI,EAAE,CAAC;KAClB;IAEO,gBAAgB;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;IAED,MAAM;;QACJ,MAAM,QAAQ,GAAkC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QACnF,MAAM,SAAS,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,SAAS,mCAAI,KAAK,CAAC;QAC/C;;QAEEA,QAACC,UAAI,qDAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,IACxCD,kEACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI;;gBAGT,UAAU,EAAE,SAAS,KAAK,KAAK;gBAC/B,aAAa,EAAE,SAAS,KAAK,QAAQ;gBACrC,WAAW,EAAE,SAAS,KAAK,MAAM;gBACjC,YAAY,EAAE,SAAS,KAAK,OAAO;;gBAGnC,aAAa,EAAE,IAAI,CAAC,MAAM;gBAC1B,eAAe,EAAE,IAAI,CAAC,QAAQ;gBAC9B,eAAe,EAAE,IAAI,CAAC,QAAQ;aAC/B,EACD,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,IAEpDA,oEAAQ,EACP,IAAI,CAAC,QAAQ,KACZA,6BACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,mBAAmB,EAC/B,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,QAAQ,EAAE,CAAC,CAAC,iBACA,MAAM,GAClB,CACH,CACG,EACNA,kEACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,MAAM;;gBAGrC,qBAAqB,EAAE,SAAS,KAAK,KAAK;gBAC1C,wBAAwB,EAAE,SAAS,KAAK,QAAQ;gBAChD,sBAAsB,EAAE,SAAS,KAAK,MAAM;gBAC5C,uBAAuB,EAAE,SAAS,KAAK,OAAO;aAC/C,GACI,CACF,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: flex;\n}\n\n.tab {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-font-size-small);\n font-weight: var(--six-font-weight-semibold);\n color: var(--six-tab-color);\n padding: var(--six-spacing-medium) var(--six-spacing-large);\n white-space: nowrap;\n user-select: none;\n cursor: pointer;\n width: 100%;\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset));\n }\n\n &.tab--active:not(.tab--disabled) {\n color: var(--six-tab-color-active);\n font-weight: var(--six-font-weight-bold);\n }\n\n &.tab--closable {\n padding-right: var(--six-spacing-small);\n }\n\n &.tab--disabled {\n color: var(--six-tab-color-disabled);\n cursor: not-allowed;\n }\n\n &:hover:not(.tab--disabled) {\n color: var(--six-tab-color-hover);\n }\n}\n\n.tab__close-button {\n font-size: var(--six-font-size-large);\n margin-left: var(--six-spacing-xx-small);\n\n &::part(base) {\n padding: var(--six-spacing-xxx-small);\n }\n}\n\n// TAB INDICATOR\n.tab__indicator {\n position: absolute;\n &.tab__indicator--active {\n background-color: var(--six-tab-border-color-active);\n }\n}\n\n// TOP\n.tab--top {\n margin-bottom: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--top {\n width: 100%;\n bottom: 0;\n height: var(--six-tab-border-width);\n}\n\n// BOTTOM\n.tab--bottom {\n margin-top: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--bottom {\n width: 100%;\n top: 0;\n height: var(--six-tab-border-width);\n}\n\n// LEFT\n.tab--left {\n margin-right: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--left {\n height: 100%;\n right: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n\n// RIGHT\n.tab--right {\n margin-left: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--right {\n height: 100%;\n left: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n tag: 'six-tab',\n styleUrl: 'six-tab.scss',\n shadow: true,\n})\nexport class SixTab {\n private componentId = `tab-${++id}`;\n private tab?: HTMLElement;\n\n @Element() host!: HTMLSixTabElement;\n\n /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n @Prop({ reflect: true }) panel = '';\n\n /** Set to true to draw the tab in an active state. */\n @Prop({ reflect: true }) active = false;\n\n /** When true, the tab will be rendered with a close icon. */\n @Prop() closable = false;\n\n /** Set to true to draw the tab in a disabled state. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Emitted when the tab is closable and the close button is activated. */\n @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.handleCloseClick = this.handleCloseClick.bind(this);\n }\n\n /** Sets focus to the tab. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.tab?.focus(options);\n }\n\n /** Removes focus from the tab. */\n @Method()\n async removeFocus() {\n this.tab?.blur();\n }\n\n private handleCloseClick() {\n this.sixClose.emit();\n }\n\n render() {\n const tabGroup: HTMLSixTabGroupElement | null = this.host.closest('six-tab-group');\n const placement = tabGroup?.placement ?? 'top';\n return (\n // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n <Host id={this.host.id || this.componentId}>\n <div\n part=\"base\"\n ref={(el) => (this.tab = el)}\n class={{\n tab: true,\n\n // Placements\n 'tab--top': placement === 'top',\n 'tab--bottom': placement === 'bottom',\n 'tab--left': placement === 'left',\n 'tab--right': placement === 'right',\n\n // States\n 'tab--active': this.active,\n 'tab--closable': this.closable,\n 'tab--disabled': this.disabled,\n }}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.disabled || !this.active ? '-1' : '0'}\n >\n <slot />\n {this.closable && (\n <six-icon-button\n name=\"close\"\n size=\"xSmall\"\n exportparts=\"base:close-button\"\n class=\"tab__close-button\"\n onClick={this.handleCloseClick}\n tabIndex={-1}\n aria-hidden=\"true\"\n />\n )}\n </div>\n <div\n class={{\n tab__indicator: true,\n 'tab__indicator--active': this.active,\n\n // Placements\n 'tab__indicator--top': placement === 'top',\n 'tab__indicator--bottom': placement === 'bottom',\n 'tab__indicator--left': placement === 'left',\n 'tab__indicator--right': placement === 'right',\n }}\n ></div>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"six-tab.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,orDAAorD,CAAC;AACvsD,qBAAe,SAAS;;ACExB,IAAI,EAAE,GAAG,CAAC,CAAC;MAmBE,MAAM;;;;QACT,gBAAW,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC;qBAMH,EAAE;sBAGD,KAAK;wBAGpB,KAAK;wBAGY,KAAK;;IAKzC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1D;;IAID,MAAM,QAAQ,CAAC,OAAsB;;QACnC,MAAA,IAAI,CAAC,GAAG,0CAAE,KAAK,CAAC,OAAO,CAAC,CAAC;KAC1B;;IAID,MAAM,WAAW;;QACf,MAAA,IAAI,CAAC,GAAG,0CAAE,IAAI,EAAE,CAAC;KAClB;IAEO,gBAAgB;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;IAED,MAAM;;QACJ,MAAM,QAAQ,GAAkC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QACnF,MAAM,SAAS,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,SAAS,mCAAI,KAAK,CAAC;QAC/C;;QAEEA,QAACC,UAAI,qDAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,IACxCD,kEACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI;;gBAGT,UAAU,EAAE,SAAS,KAAK,KAAK;gBAC/B,aAAa,EAAE,SAAS,KAAK,QAAQ;gBACrC,WAAW,EAAE,SAAS,KAAK,MAAM;gBACjC,YAAY,EAAE,SAAS,KAAK,OAAO;;gBAGnC,aAAa,EAAE,IAAI,CAAC,MAAM;gBAC1B,eAAe,EAAE,IAAI,CAAC,QAAQ;gBAC9B,eAAe,EAAE,IAAI,CAAC,QAAQ;aAC/B,EACD,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,IAEpDA,oEAAQ,EACP,IAAI,CAAC,QAAQ,KACZA,6BACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,mBAAmB,EAC/B,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,QAAQ,EAAE,CAAC,CAAC,iBACA,MAAM,GAClB,CACH,CACG,EACNA,kEACE,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,sBAAsB,GAAG,EAAE,EAC/C,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,MAAM;;gBAGrC,qBAAqB,EAAE,SAAS,KAAK,KAAK;gBAC1C,wBAAwB,EAAE,SAAS,KAAK,QAAQ;gBAChD,sBAAsB,EAAE,SAAS,KAAK,MAAM;gBAC5C,uBAAuB,EAAE,SAAS,KAAK,OAAO;aAC/C,GACI,CACF,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: flex;\n}\n\n.tab {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-font-size-small);\n font-weight: var(--six-font-weight-semibold);\n color: var(--six-tab-color);\n padding: var(--six-spacing-medium) var(--six-spacing-large);\n white-space: nowrap;\n user-select: none;\n cursor: pointer;\n width: 100%;\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset));\n }\n\n &.tab--active:not(.tab--disabled) {\n color: var(--six-tab-color-active);\n font-weight: var(--six-font-weight-bold);\n }\n\n &.tab--closable {\n padding-right: var(--six-spacing-small);\n }\n\n &.tab--disabled {\n color: var(--six-tab-color-disabled);\n cursor: not-allowed;\n }\n\n &:hover:not(.tab--disabled) {\n color: var(--six-tab-color-hover);\n }\n}\n\n.tab__close-button {\n font-size: var(--six-font-size-large);\n margin-left: var(--six-spacing-xx-small);\n\n &::part(base) {\n padding: var(--six-spacing-xxx-small);\n }\n}\n\n// TAB INDICATOR\n.tab__indicator {\n position: absolute;\n &.tab__indicator--active {\n background-color: var(--six-tab-border-color-active);\n }\n}\n\n// TOP\n.tab--top {\n margin-bottom: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--top {\n width: 100%;\n bottom: 0;\n height: var(--six-tab-border-width);\n}\n\n// BOTTOM\n.tab--bottom {\n margin-top: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--bottom {\n width: 100%;\n top: 0;\n height: var(--six-tab-border-width);\n}\n\n// LEFT\n.tab--left {\n margin-right: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--left {\n height: 100%;\n right: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n\n// RIGHT\n.tab--right {\n margin-left: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--right {\n height: 100%;\n left: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n tag: 'six-tab',\n styleUrl: 'six-tab.scss',\n shadow: true,\n})\nexport class SixTab {\n private componentId = `tab-${++id}`;\n private tab?: HTMLElement;\n\n @Element() host!: HTMLSixTabElement;\n\n /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n @Prop({ reflect: true }) panel = '';\n\n /** Set to true to draw the tab in an active state. */\n @Prop({ reflect: true }) active = false;\n\n /** When true, the tab will be rendered with a close icon. */\n @Prop() closable = false;\n\n /** Set to true to draw the tab in a disabled state. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Emitted when the tab is closable and the close button is activated. */\n @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.handleCloseClick = this.handleCloseClick.bind(this);\n }\n\n /** Sets focus to the tab. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.tab?.focus(options);\n }\n\n /** Removes focus from the tab. */\n @Method()\n async removeFocus() {\n this.tab?.blur();\n }\n\n private handleCloseClick() {\n this.sixClose.emit();\n }\n\n render() {\n const tabGroup: HTMLSixTabGroupElement | null = this.host.closest('six-tab-group');\n const placement = tabGroup?.placement ?? 'top';\n return (\n // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n <Host id={this.host.id || this.componentId}>\n <div\n part=\"base\"\n ref={(el) => (this.tab = el)}\n class={{\n tab: true,\n\n // Placements\n 'tab--top': placement === 'top',\n 'tab--bottom': placement === 'bottom',\n 'tab--left': placement === 'left',\n 'tab--right': placement === 'right',\n\n // States\n 'tab--active': this.active,\n 'tab--closable': this.closable,\n 'tab--disabled': this.disabled,\n }}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.disabled || !this.active ? '-1' : '0'}\n >\n <slot />\n {this.closable && (\n <six-icon-button\n name=\"close\"\n size=\"xSmall\"\n exportparts=\"base:close-button\"\n class=\"tab__close-button\"\n onClick={this.handleCloseClick}\n tabIndex={-1}\n aria-hidden=\"true\"\n />\n )}\n </div>\n <div\n part={this.active ? 'active-tab-indicator' : ''}\n class={{\n tab__indicator: true,\n 'tab__indicator--active': this.active,\n\n // Placements\n 'tab__indicator--top': placement === 'top',\n 'tab__indicator--bottom': placement === 'bottom',\n 'tab__indicator--left': placement === 'left',\n 'tab__indicator--right': placement === 'right',\n }}\n ></div>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/collection/components/six-language-switcher/six-language-switcher.css CHANGED
@@ -10,6 +10,10 @@
10
10
  .language-switcher__label:hover {
11
11
  color: var(--six-color-web-rock-600);
12
12
  }
13
+ .language-switcher__label:focus-visible {
14
+ outline: var(--six-focus-ring);
15
+ outline-offset: var(--six-focus-ring-offset);
16
+ }
13
17
  .language-switcher__label--selected {
14
18
  color: var(--six-color-black);
15
19
  text-decoration: underline;
package/dist/collection/components/six-language-switcher/six-language-switcher.js CHANGED
@@ -46,7 +46,11 @@ export class SixLanguageSwitcher {
46
46
  render() {
47
47
  return (h("div", { key: 'fa72eaaf2cb5c0f327a0924e12779863f348b59c', part: "container", class: "language-switcher__container" }, this.languages.map((lang, index) => {
48
48
  const language = typeof lang === 'string' ? lang : lang.key;
49
- return (h("div", { onClick: this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value) }, h("span", { part: "label", class: {
49
+ return (h("div", { onClick: this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value), onKeyDown: (e) => {
50
+ if (e.key === 'Enter' || e.key === ' ') {
51
+ this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)();
52
+ }
53
+ } }, h("span", { part: "label", tabindex: "0", class: {
50
54
  'language-switcher__label': true,
51
55
  'language-switcher__label--selected': this.selected === language,
52
56
  } }, language), index < this.languages.length - 1 && (h("span", { part: "separator", class: "language-switcher__separator" }, "|"))));
package/dist/collection/components/six-language-switcher/six-language-switcher.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"six-language-switcher.js","sourceRoot":"","sources":["../../../src/components/six-language-switcher/six-language-switcher.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAa/E,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AAE7C;;;;;;GAMG;AAMH,MAAM,OAAO,mBAAmB;;QAqCtB,4BAAuB,GAAG,CAAC,WAAmB,EAAE,aAAsB,EAAE,EAAE,CAAC,GAAG,EAAE;YACtF,IAAI,aAAa,KAAK,SAAS,EAAE,CAAC;gBAChC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACrC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACnC,CAAC;YACD,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;QAC9B,CAAC,CAAC;;yBAvCyD,iBAAiB;;IAG5E,sBAAsB,CAAC,QAAkB;QACvC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7B,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;QAC1D,CAAC;QAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAChC,CAAC;IAMD,iBAAiB;QACf,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;YAChC,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAEO,sBAAsB;QAC5B,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QAC3C,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE,CAAC;YACzC,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACrC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC;YACrC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAWD,MAAM;QACJ,OAAO,CACL,4DAAK,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,IACvD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAClC,MAAM,QAAQ,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;YAC5D,OAAO,CACL,WAAK,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;gBAChG,YACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;wBACL,0BAA0B,EAAE,IAAI;wBAChC,oCAAoC,EAAE,IAAI,CAAC,QAAQ,KAAK,QAAQ;qBACjE,IAEA,QAAQ,CACJ;gBACN,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CACpC,YAAM,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,QAEpD,CACR,CACG,CACP,CAAC;QACJ,CAAC,CAAC,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 2.1.0\n * @status experimental\n **/\n\nexport interface SixLanguageSwitcherInput {\n key: string;\n value: string;\n}\nexport type SixLanguageSwitcherChangePayload = string;\n\nconst DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];\n\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n@Component({\n tag: 'six-language-switcher',\n styleUrl: 'six-language-switcher.scss',\n shadow: true,\n})\nexport class SixLanguageSwitcher {\n /** The language which should be shown as selected */\n @Prop({ mutable: true, reflect: true }) selected?: string;\n\n /** The languages which should be selectable options. */\n @Prop() languages: string[] | SixLanguageSwitcherInput[] = DEFAULT_LANGUAGES;\n\n @Watch('languages')\n handleChangesLanguages(newValue: string[]) {\n if (!Array.isArray(newValue)) {\n throw new Error('languages is expected to be an array');\n }\n\n this.updateSelectedLanguage();\n }\n /**\n * Emitted when the language switchers value changes\n */\n @Event({ eventName: 'six-language-switcher-change' }) sixChange!: EventEmitter<SixLanguageSwitcherChangePayload>;\n\n componentWillLoad() {\n if (this.selected === undefined) {\n this.updateSelectedLanguage();\n }\n }\n\n private updateSelectedLanguage() {\n const selectedLanguage = this.languages[0];\n if (typeof selectedLanguage === 'string') {\n this.selected = selectedLanguage;\n this.sixChange.emit(this.selected);\n } else {\n this.selected = selectedLanguage.key;\n this.sixChange.emit(selectedLanguage.value);\n }\n }\n\n private handleLanguageSwitching = (newLanguage: string, languageValue?: string) => () => {\n if (languageValue !== undefined) {\n this.sixChange.emit(languageValue);\n } else {\n this.sixChange.emit(newLanguage);\n }\n this.selected = newLanguage;\n };\n\n render() {\n return (\n <div part=\"container\" class=\"language-switcher__container\">\n {this.languages.map((lang, index) => {\n const language = typeof lang === 'string' ? lang : lang.key;\n return (\n <div onClick={this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)}>\n <span\n part=\"label\"\n class={{\n 'language-switcher__label': true,\n 'language-switcher__label--selected': this.selected === language,\n }}\n >\n {language}\n </span>\n {index < this.languages.length - 1 && (\n <span part=\"separator\" class=\"language-switcher__separator\">\n |\n </span>\n )}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"six-language-switcher.js","sourceRoot":"","sources":["../../../src/components/six-language-switcher/six-language-switcher.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAa/E,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AAE7C;;;;;;GAMG;AAMH,MAAM,OAAO,mBAAmB;;QAqCtB,4BAAuB,GAAG,CAAC,WAAmB,EAAE,aAAsB,EAAE,EAAE,CAAC,GAAG,EAAE;YACtF,IAAI,aAAa,KAAK,SAAS,EAAE,CAAC;gBAChC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACrC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACnC,CAAC;YACD,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;QAC9B,CAAC,CAAC;;yBAvCyD,iBAAiB;;IAG5E,sBAAsB,CAAC,QAAkB;QACvC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7B,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;QAC1D,CAAC;QAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAChC,CAAC;IAMD,iBAAiB;QACf,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;YAChC,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAEO,sBAAsB;QAC5B,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QAC3C,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE,CAAC;YACzC,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACrC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC;YACrC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAWD,MAAM;QACJ,OAAO,CACL,4DAAK,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,IACvD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAClC,MAAM,QAAQ,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;YAC5D,OAAO,CACL,WACE,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAC7F,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;oBACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;wBACvC,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;oBACzF,CAAC;gBACH,CAAC;gBAED,YACE,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;wBACL,0BAA0B,EAAE,IAAI;wBAChC,oCAAoC,EAAE,IAAI,CAAC,QAAQ,KAAK,QAAQ;qBACjE,IAEA,QAAQ,CACJ;gBAEN,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CACpC,YAAM,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,QAEpD,CACR,CACG,CACP,CAAC;QACJ,CAAC,CAAC,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 2.1.0\n * @status experimental\n **/\n\nexport interface SixLanguageSwitcherInput {\n key: string;\n value: string;\n}\nexport type SixLanguageSwitcherChangePayload = string;\n\nconst DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];\n\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n@Component({\n tag: 'six-language-switcher',\n styleUrl: 'six-language-switcher.scss',\n shadow: true,\n})\nexport class SixLanguageSwitcher {\n /** The language which should be shown as selected */\n @Prop({ mutable: true, reflect: true }) selected?: string;\n\n /** The languages which should be selectable options. */\n @Prop() languages: string[] | SixLanguageSwitcherInput[] = DEFAULT_LANGUAGES;\n\n @Watch('languages')\n handleChangesLanguages(newValue: string[]) {\n if (!Array.isArray(newValue)) {\n throw new Error('languages is expected to be an array');\n }\n\n this.updateSelectedLanguage();\n }\n /**\n * Emitted when the language switchers value changes\n */\n @Event({ eventName: 'six-language-switcher-change' }) sixChange!: EventEmitter<SixLanguageSwitcherChangePayload>;\n\n componentWillLoad() {\n if (this.selected === undefined) {\n this.updateSelectedLanguage();\n }\n }\n\n private updateSelectedLanguage() {\n const selectedLanguage = this.languages[0];\n if (typeof selectedLanguage === 'string') {\n this.selected = selectedLanguage;\n this.sixChange.emit(this.selected);\n } else {\n this.selected = selectedLanguage.key;\n this.sixChange.emit(selectedLanguage.value);\n }\n }\n\n private handleLanguageSwitching = (newLanguage: string, languageValue?: string) => () => {\n if (languageValue !== undefined) {\n this.sixChange.emit(languageValue);\n } else {\n this.sixChange.emit(newLanguage);\n }\n this.selected = newLanguage;\n };\n\n render() {\n return (\n <div part=\"container\" class=\"language-switcher__container\">\n {this.languages.map((lang, index) => {\n const language = typeof lang === 'string' ? lang : lang.key;\n return (\n <div\n onClick={this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)();\n }\n }}\n >\n <span\n part=\"label\"\n tabindex=\"0\"\n class={{\n 'language-switcher__label': true,\n 'language-switcher__label--selected': this.selected === language,\n }}\n >\n {language}\n </span>\n\n {index < this.languages.length - 1 && (\n <span part=\"separator\" class=\"language-switcher__separator\">\n |\n </span>\n )}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"]}
package/dist/collection/components/six-language-switcher/test/six-language-switcher.spec.js CHANGED
@@ -17,7 +17,7 @@ describe('SIX Language Switcher', () => {
17
17
  <mock:shadow-root>
18
18
  <div class="language-switcher__container" part="container">
19
19
  <div>
20
- <span class="language-switcher__label language-switcher__label--selected" part="label">
20
+ <span class="language-switcher__label language-switcher__label--selected" part="label" tabindex="0">
21
21
  EN
22
22
  </span>
23
23
  <span class="language-switcher__separator" part="separator">
@@ -25,7 +25,7 @@ describe('SIX Language Switcher', () => {
25
25
  </span>
26
26
  </div>
27
27
  <div>
28
- <span class="language-switcher__label" part="label">
28
+ <span class="language-switcher__label" part="label" tabindex="0">
29
29
  DE
30
30
  </span>
31
31
  <span class="language-switcher__separator" part="separator">
@@ -33,7 +33,7 @@ describe('SIX Language Switcher', () => {
33
33
  </span>
34
34
  </div>
35
35
  <div>
36
- <span class="language-switcher__label" part="label">
36
+ <span class="language-switcher__label" part="label" tabindex="0">
37
37
  ES
38
38
  </span>
39
39
  </div>
@@ -62,7 +62,7 @@ describe('SIX Language Switcher', () => {
62
62
  <mock:shadow-root>
63
63
  <div class="language-switcher__container" part="container">
64
64
  <div>
65
- <span class="language-switcher__label language-switcher__label--selected" part="label">
65
+ <span class="language-switcher__label language-switcher__label--selected" part="label" tabindex="0">
66
66
  IT
67
67
  </span>
68
68
  <span class="language-switcher__separator" part="separator">
@@ -70,7 +70,7 @@ describe('SIX Language Switcher', () => {
70
70
  </span>
71
71
  </div>
72
72
  <div>
73
- <span class="language-switcher__label" part="label">
73
+ <span class="language-switcher__label" part="label" tabindex="0">
74
74
  AR
75
75
  </span>
76
76
  <span class="language-switcher__separator" part="separator">
@@ -78,7 +78,7 @@ describe('SIX Language Switcher', () => {
78
78
  </span>
79
79
  </div>
80
80
  <div>
81
- <span class="language-switcher__label" part="label">
81
+ <span class="language-switcher__label" part="label" tabindex="0">
82
82
  BG
83
83
  </span>
84
84
  </div>
@@ -103,7 +103,7 @@ describe('SIX Language Switcher', () => {
103
103
  <mock:shadow-root>
104
104
  <div class="language-switcher__container" part="container">
105
105
  <div>
106
- <span class="language-switcher__label" part="label">
106
+ <span class="language-switcher__label" part="label" tabindex="0">
107
107
  EN
108
108
  </span>
109
109
  <span class="language-switcher__separator" part="separator">
@@ -111,7 +111,7 @@ describe('SIX Language Switcher', () => {
111
111
  </span>
112
112
  </div>
113
113
  <div>
114
- <span class="language-switcher__label language-switcher__label--selected" part="label">
114
+ <span class="language-switcher__label language-switcher__label--selected" part="label" tabindex="0">
115
115
  DE
116
116
  </span>
117
117
  <span class="language-switcher__separator" part="separator">
@@ -119,7 +119,7 @@ describe('SIX Language Switcher', () => {
119
119
  </span>
120
120
  </div>
121
121
  <div>
122
- <span class="language-switcher__label" part="label">
122
+ <span class="language-switcher__label" part="label" tabindex="0">
123
123
  ES
124
124
  </span>
125
125
  </div>
@@ -148,7 +148,7 @@ describe('SIX Language Switcher', () => {
148
148
  <mock:shadow-root>
149
149
  <div class="language-switcher__container" part="container">
150
150
  <div>
151
- <span class="language-switcher__label" part="label">
151
+ <span class="language-switcher__label" part="label" tabindex="0">
152
152
  EN
153
153
  </span>
154
154
  <span class="language-switcher__separator" part="separator">
@@ -156,7 +156,7 @@ describe('SIX Language Switcher', () => {
156
156
  </span>
157
157
  </div>
158
158
  <div>
159
- <span class="language-switcher__label language-switcher__label--selected" part="label">
159
+ <span class="language-switcher__label language-switcher__label--selected" part="label" tabindex="0">
160
160
  DE
161
161
  </span>
162
162
  <span class="language-switcher__separator" part="separator">
@@ -164,7 +164,7 @@ describe('SIX Language Switcher', () => {
164
164
  </span>
165
165
  </div>
166
166
  <div>
167
- <span class="language-switcher__label" part="label">
167
+ <span class="language-switcher__label" part="label" tabindex="0">
168
168
  ES
169
169
  </span>
170
170
  </div>
package/dist/collection/components/six-language-switcher/test/six-language-switcher.spec.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"six-language-switcher.spec.js","sourceRoot":"","sources":["../../../../src/components/six-language-switcher/test/six-language-switcher.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;;QAC5D,QAAQ;QACR,MAAM,MAAM,GAAG;YACb,UAAU,EAAE,CAAC,mBAAmB,CAAC;YACjC,IAAI,EAAE,iDAAiD;SACxD,CAAC;QAEF,OAAO;QACP,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC,MAAM,CAAC,CAAC;QAEvC,OAAO;QACP,MAAM,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,0CAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAC3C,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4B7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;;QACpD,QAAQ;QACR,MAAM,MAAM,GAAG;YACb,UAAU,EAAE,CAAC,mBAAmB,CAAC;YACjC,IAAI,EAAE,iDAAiD;SACxD,CAAC;QAEF,OAAO;QACP,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC,MAAM,CAAC,CAAC;QACvC,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,KAAI,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAC3C,CAAC;QACD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,OAAO;QACP,MAAM,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,0CAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAC3C,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4B7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;;QACrD,QAAQ;QACR,MAAM,MAAM,GAAG;YACb,UAAU,EAAE,CAAC,mBAAmB,CAAC;YACjC,IAAI,EAAE,+DAA+D;SACtE,CAAC;QAEF,OAAO;QACP,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC,MAAM,CAAC,CAAC;QAEvC,OAAO;QACP,MAAM,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,0CAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAC3C,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4B7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yDAAyD,EAAE,KAAK,IAAI,EAAE;;QACvE,QAAQ;QACR,MAAM,MAAM,GAAG;YACb,UAAU,EAAE,CAAC,mBAAmB,CAAC;YACjC,IAAI,EAAE,iDAAiD;SACxD,CAAC;QAEF,OAAO;QACP,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC,MAAM,CAAC,CAAC;QACvC,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE,CAAC;YACtB,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QAC5B,CAAC;QACD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,OAAO;QACP,MAAM,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,0CAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAC3C,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4B7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4EAA4E,EAAE,KAAK,IAAI,EAAE;;QAC1F,QAAQ;QACR,MAAM,MAAM,GAAG;YACb,UAAU,EAAE,CAAC,mBAAmB,CAAC;YACjC,IAAI,EAAE,iDAAiD;SACxD,CAAC;QACF,OAAO;QACP,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC,MAAM,CAAC,CAAC;QACvC,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE,CAAC;YACtB,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAC3C,CAAC;QACD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE,CAAC;YACtB,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QAC5B,CAAC;QAED,OAAO;QACP,MAAM,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,0CAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixLanguageSwitcher } from '../six-language-switcher';\n\ndescribe('SIX Language Switcher', () => {\n it('should properly render with default settings', async () => {\n // given\n const config = {\n components: [SixLanguageSwitcher],\n html: `<six-language-switcher></six-language-switcher>`,\n };\n\n // when\n const page = await newSpecPage(config);\n\n // then\n expect(page?.root?.selected).toEqual('EN');\n expect(page.root).toEqualHtml(`\n <six-language-switcher selected=\"EN\">\n <mock:shadow-root>\n <div class=\"language-switcher__container\" part=\"container\">\n <div>\n <span class=\"language-switcher__label language-switcher__label--selected\" part=\"label\">\n EN\n </span>\n <span class=\"language-switcher__separator\" part=\"separator\">\n |\n </span>\n </div>\n <div>\n <span class=\"language-switcher__label\" part=\"label\">\n DE\n </span>\n <span class=\"language-switcher__separator\" part=\"separator\">\n |\n </span>\n </div>\n <div>\n <span class=\"language-switcher__label\" part=\"label\">\n ES\n </span>\n </div>\n </div>\n </mock:shadow-root>\n </six-language-switcher>\n `);\n });\n\n it('should allow to set custom languages', async () => {\n // given\n const config = {\n components: [SixLanguageSwitcher],\n html: `<six-language-switcher></six-language-switcher>`,\n };\n\n // when\n const page = await newSpecPage(config);\n if (page?.root != null) {\n page.root.languages = ['IT', 'AR', 'BG'];\n }\n await page.waitForChanges();\n\n // then\n expect(page?.root?.selected).toEqual('IT');\n expect(page.root).toEqualHtml(`\n <six-language-switcher selected=\"IT\">\n <mock:shadow-root>\n <div class=\"language-switcher__container\" part=\"container\">\n <div>\n <span class=\"language-switcher__label language-switcher__label--selected\" part=\"label\">\n IT\n </span>\n <span class=\"language-switcher__separator\" part=\"separator\">\n |\n </span>\n </div>\n <div>\n <span class=\"language-switcher__label\" part=\"label\">\n AR\n </span>\n <span class=\"language-switcher__separator\" part=\"separator\">\n |\n </span>\n </div>\n <div>\n <span class=\"language-switcher__label\" part=\"label\">\n BG\n </span>\n </div>\n </div>\n </mock:shadow-root>\n </six-language-switcher>\n `);\n });\n\n it('should properly set selected language', async () => {\n // given\n const config = {\n components: [SixLanguageSwitcher],\n html: `<six-language-switcher selected=\"DE\"></six-language-switcher>`,\n };\n\n // when\n const page = await newSpecPage(config);\n\n // then\n expect(page?.root?.selected).toEqual('DE');\n expect(page.root).toEqualHtml(`\n <six-language-switcher selected=\"DE\">\n <mock:shadow-root>\n <div class=\"language-switcher__container\" part=\"container\">\n <div>\n <span class=\"language-switcher__label\" part=\"label\">\n EN\n </span>\n <span class=\"language-switcher__separator\" part=\"separator\">\n |\n </span>\n </div>\n <div>\n <span class=\"language-switcher__label language-switcher__label--selected\" part=\"label\">\n DE\n </span>\n <span class=\"language-switcher__separator\" part=\"separator\">\n |\n </span>\n </div>\n <div>\n <span class=\"language-switcher__label\" part=\"label\">\n ES\n </span>\n </div>\n </div>\n </mock:shadow-root>\n </six-language-switcher>\n `);\n });\n\n it('should properly set language after having been rendered', async () => {\n // given\n const config = {\n components: [SixLanguageSwitcher],\n html: `<six-language-switcher></six-language-switcher>`,\n };\n\n // when\n const page = await newSpecPage(config);\n if (page.root != null) {\n page.root.selected = 'DE';\n }\n await page.waitForChanges();\n\n // then\n expect(page?.root?.selected).toEqual('DE');\n expect(page.root).toEqualHtml(`\n <six-language-switcher selected=\"DE\">\n <mock:shadow-root>\n <div class=\"language-switcher__container\" part=\"container\">\n <div>\n <span class=\"language-switcher__label\" part=\"label\">\n EN\n </span>\n <span class=\"language-switcher__separator\" part=\"separator\">\n |\n </span>\n </div>\n <div>\n <span class=\"language-switcher__label language-switcher__label--selected\" part=\"label\">\n DE\n </span>\n <span class=\"language-switcher__separator\" part=\"separator\">\n |\n </span>\n </div>\n <div>\n <span class=\"language-switcher__label\" part=\"label\">\n ES\n </span>\n </div>\n </div>\n </mock:shadow-root>\n </six-language-switcher>\n `);\n });\n\n it('should properly update selected language after languages have been changed', async () => {\n // given\n const config = {\n components: [SixLanguageSwitcher],\n html: `<six-language-switcher></six-language-switcher>`,\n };\n // when\n const page = await newSpecPage(config);\n if (page.root != null) {\n page.root.languages = ['IT', 'AR', 'BG'];\n }\n await page.waitForChanges();\n if (page.root != null) {\n page.root.selected = 'BG';\n }\n\n // then\n expect(page?.root?.selected).toEqual('BG');\n });\n});\n"]}
1
+ {"version":3,"file":"six-language-switcher.spec.js","sourceRoot":"","sources":["../../../../src/components/six-language-switcher/test/six-language-switcher.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixLanguageSwitcher } from '../six-language-switcher';\n\ndescribe('SIX Language Switcher', () => {\n it('should properly render with default settings', async () => {\n // given\n const config = {\n components: [SixLanguageSwitcher],\n html: `<six-language-switcher></six-language-switcher>`,\n };\n\n // when\n const page = await newSpecPage(config);\n\n // then\n expect(page?.root?.selected).toEqual('EN');\n expect(page.root).toEqualHtml(`\n <six-language-switcher selected=\"EN\">\n <mock:shadow-root>\n <div class=\"language-switcher__container\" part=\"container\">\n <div>\n <span class=\"language-switcher__label language-switcher__label--selected\" part=\"label\" tabindex=\"0\">\n EN\n </span>\n <span class=\"language-switcher__separator\" part=\"separator\">\n |\n </span>\n </div>\n <div>\n <span class=\"language-switcher__label\" part=\"label\" tabindex=\"0\">\n DE\n </span>\n <span class=\"language-switcher__separator\" part=\"separator\">\n |\n </span>\n </div>\n <div>\n <span class=\"language-switcher__label\" part=\"label\" tabindex=\"0\">\n ES\n </span>\n </div>\n </div>\n </mock:shadow-root>\n </six-language-switcher>\n `);\n });\n\n it('should allow to set custom languages', async () => {\n // given\n const config = {\n components: [SixLanguageSwitcher],\n html: `<six-language-switcher></six-language-switcher>`,\n };\n\n // when\n const page = await newSpecPage(config);\n if (page?.root != null) {\n page.root.languages = ['IT', 'AR', 'BG'];\n }\n await page.waitForChanges();\n\n // then\n expect(page?.root?.selected).toEqual('IT');\n expect(page.root).toEqualHtml(`\n <six-language-switcher selected=\"IT\">\n <mock:shadow-root>\n <div class=\"language-switcher__container\" part=\"container\">\n <div>\n <span class=\"language-switcher__label language-switcher__label--selected\" part=\"label\" tabindex=\"0\">\n IT\n </span>\n <span class=\"language-switcher__separator\" part=\"separator\">\n |\n </span>\n </div>\n <div>\n <span class=\"language-switcher__label\" part=\"label\" tabindex=\"0\">\n AR\n </span>\n <span class=\"language-switcher__separator\" part=\"separator\">\n |\n </span>\n </div>\n <div>\n <span class=\"language-switcher__label\" part=\"label\" tabindex=\"0\">\n BG\n </span>\n </div>\n </div>\n </mock:shadow-root>\n </six-language-switcher>\n `);\n });\n\n it('should properly set selected language', async () => {\n // given\n const config = {\n components: [SixLanguageSwitcher],\n html: `<six-language-switcher selected=\"DE\"></six-language-switcher>`,\n };\n\n // when\n const page = await newSpecPage(config);\n\n // then\n expect(page?.root?.selected).toEqual('DE');\n expect(page.root).toEqualHtml(`\n <six-language-switcher selected=\"DE\">\n <mock:shadow-root>\n <div class=\"language-switcher__container\" part=\"container\">\n <div>\n <span class=\"language-switcher__label\" part=\"label\" tabindex=\"0\">\n EN\n </span>\n <span class=\"language-switcher__separator\" part=\"separator\">\n |\n </span>\n </div>\n <div>\n <span class=\"language-switcher__label language-switcher__label--selected\" part=\"label\" tabindex=\"0\">\n DE\n </span>\n <span class=\"language-switcher__separator\" part=\"separator\">\n |\n </span>\n </div>\n <div>\n <span class=\"language-switcher__label\" part=\"label\" tabindex=\"0\">\n ES\n </span>\n </div>\n </div>\n </mock:shadow-root>\n </six-language-switcher>\n `);\n });\n\n it('should properly set language after having been rendered', async () => {\n // given\n const config = {\n components: [SixLanguageSwitcher],\n html: `<six-language-switcher></six-language-switcher>`,\n };\n\n // when\n const page = await newSpecPage(config);\n if (page.root != null) {\n page.root.selected = 'DE';\n }\n await page.waitForChanges();\n\n // then\n expect(page?.root?.selected).toEqual('DE');\n expect(page.root).toEqualHtml(`\n <six-language-switcher selected=\"DE\">\n <mock:shadow-root>\n <div class=\"language-switcher__container\" part=\"container\">\n <div>\n <span class=\"language-switcher__label\" part=\"label\" tabindex=\"0\">\n EN\n </span>\n <span class=\"language-switcher__separator\" part=\"separator\">\n |\n </span>\n </div>\n <div>\n <span class=\"language-switcher__label language-switcher__label--selected\" part=\"label\" tabindex=\"0\">\n DE\n </span>\n <span class=\"language-switcher__separator\" part=\"separator\">\n |\n </span>\n </div>\n <div>\n <span class=\"language-switcher__label\" part=\"label\" tabindex=\"0\">\n ES\n </span>\n </div>\n </div>\n </mock:shadow-root>\n </six-language-switcher>\n `);\n });\n\n it('should properly update selected language after languages have been changed', async () => {\n // given\n const config = {\n components: [SixLanguageSwitcher],\n html: `<six-language-switcher></six-language-switcher>`,\n };\n // when\n const page = await newSpecPage(config);\n if (page.root != null) {\n page.root.languages = ['IT', 'AR', 'BG'];\n }\n await page.waitForChanges();\n if (page.root != null) {\n page.root.selected = 'BG';\n }\n\n // then\n expect(page?.root?.selected).toEqual('BG');\n });\n});\n"]}
package/dist/collection/components/six-tab/six-tab.js CHANGED
@@ -52,7 +52,7 @@ export class SixTab {
52
52
  'tab--active': this.active,
53
53
  'tab--closable': this.closable,
54
54
  'tab--disabled': this.disabled,
55
- }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, h("slot", { key: 'a09a1df3cb8a119d736a200b618e114399fe57c3' }), this.closable && (h("six-icon-button", { name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { key: '31c108fd748bf326b1dd40a92d2b35eaef7f8c29', class: {
55
+ }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, h("slot", { key: 'a09a1df3cb8a119d736a200b618e114399fe57c3' }), this.closable && (h("six-icon-button", { name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { key: 'aa6e7b351ed81d8cba4983512b87b50a8a541a68', part: this.active ? 'active-tab-indicator' : '', class: {
56
56
  tab__indicator: true,
57
57
  'tab__indicator--active': this.active,
58
58
  // Placements
package/dist/collection/components/six-tab/six-tab.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"six-tab.js","sourceRoot":"","sources":["../../../src/components/six-tab/six-tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n tag: 'six-tab',\n styleUrl: 'six-tab.scss',\n shadow: true,\n})\nexport class SixTab {\n private componentId = `tab-${++id}`;\n private tab?: HTMLElement;\n\n @Element() host!: HTMLSixTabElement;\n\n /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n @Prop({ reflect: true }) panel = '';\n\n /** Set to true to draw the tab in an active state. */\n @Prop({ reflect: true }) active = false;\n\n /** When true, the tab will be rendered with a close icon. */\n @Prop() closable = false;\n\n /** Set to true to draw the tab in a disabled state. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Emitted when the tab is closable and the close button is activated. */\n @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.handleCloseClick = this.handleCloseClick.bind(this);\n }\n\n /** Sets focus to the tab. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.tab?.focus(options);\n }\n\n /** Removes focus from the tab. */\n @Method()\n async removeFocus() {\n this.tab?.blur();\n }\n\n private handleCloseClick() {\n this.sixClose.emit();\n }\n\n render() {\n const tabGroup: HTMLSixTabGroupElement | null = this.host.closest('six-tab-group');\n const placement = tabGroup?.placement ?? 'top';\n return (\n // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n <Host id={this.host.id || this.componentId}>\n <div\n part=\"base\"\n ref={(el) => (this.tab = el)}\n class={{\n tab: true,\n\n // Placements\n 'tab--top': placement === 'top',\n 'tab--bottom': placement === 'bottom',\n 'tab--left': placement === 'left',\n 'tab--right': placement === 'right',\n\n // States\n 'tab--active': this.active,\n 'tab--closable': this.closable,\n 'tab--disabled': this.disabled,\n }}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.disabled || !this.active ? '-1' : '0'}\n >\n <slot />\n {this.closable && (\n <six-icon-button\n name=\"close\"\n size=\"xSmall\"\n exportparts=\"base:close-button\"\n class=\"tab__close-button\"\n onClick={this.handleCloseClick}\n tabIndex={-1}\n aria-hidden=\"true\"\n />\n )}\n </div>\n <div\n class={{\n tab__indicator: true,\n 'tab__indicator--active': this.active,\n\n // Placements\n 'tab__indicator--top': placement === 'top',\n 'tab__indicator--bottom': placement === 'bottom',\n 'tab__indicator--left': placement === 'left',\n 'tab__indicator--right': placement === 'right',\n }}\n ></div>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"six-tab.js","sourceRoot":"","sources":["../../../src/components/six-tab/six-tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n tag: 'six-tab',\n styleUrl: 'six-tab.scss',\n shadow: true,\n})\nexport class SixTab {\n private componentId = `tab-${++id}`;\n private tab?: HTMLElement;\n\n @Element() host!: HTMLSixTabElement;\n\n /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n @Prop({ reflect: true }) panel = '';\n\n /** Set to true to draw the tab in an active state. */\n @Prop({ reflect: true }) active = false;\n\n /** When true, the tab will be rendered with a close icon. */\n @Prop() closable = false;\n\n /** Set to true to draw the tab in a disabled state. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Emitted when the tab is closable and the close button is activated. */\n @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.handleCloseClick = this.handleCloseClick.bind(this);\n }\n\n /** Sets focus to the tab. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.tab?.focus(options);\n }\n\n /** Removes focus from the tab. */\n @Method()\n async removeFocus() {\n this.tab?.blur();\n }\n\n private handleCloseClick() {\n this.sixClose.emit();\n }\n\n render() {\n const tabGroup: HTMLSixTabGroupElement | null = this.host.closest('six-tab-group');\n const placement = tabGroup?.placement ?? 'top';\n return (\n // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n <Host id={this.host.id || this.componentId}>\n <div\n part=\"base\"\n ref={(el) => (this.tab = el)}\n class={{\n tab: true,\n\n // Placements\n 'tab--top': placement === 'top',\n 'tab--bottom': placement === 'bottom',\n 'tab--left': placement === 'left',\n 'tab--right': placement === 'right',\n\n // States\n 'tab--active': this.active,\n 'tab--closable': this.closable,\n 'tab--disabled': this.disabled,\n }}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.disabled || !this.active ? '-1' : '0'}\n >\n <slot />\n {this.closable && (\n <six-icon-button\n name=\"close\"\n size=\"xSmall\"\n exportparts=\"base:close-button\"\n class=\"tab__close-button\"\n onClick={this.handleCloseClick}\n tabIndex={-1}\n aria-hidden=\"true\"\n />\n )}\n </div>\n <div\n part={this.active ? 'active-tab-indicator' : ''}\n class={{\n tab__indicator: true,\n 'tab__indicator--active': this.active,\n\n // Placements\n 'tab__indicator--top': placement === 'top',\n 'tab__indicator--bottom': placement === 'bottom',\n 'tab__indicator--left': placement === 'left',\n 'tab__indicator--right': placement === 'right',\n }}\n ></div>\n </Host>\n );\n }\n}\n"]}
package/dist/components/six-language-switcher.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
2
 
3
- const sixLanguageSwitcherCss = ".language-switcher__container{display:flex}.language-switcher__separator{padding:0 0.25rem}.language-switcher__label{cursor:pointer}.language-switcher__label:hover{color:var(--six-color-web-rock-600)}.language-switcher__label--selected{color:var(--six-color-black);text-decoration:underline}";
3
+ const sixLanguageSwitcherCss = ".language-switcher__container{display:flex}.language-switcher__separator{padding:0 0.25rem}.language-switcher__label{cursor:pointer}.language-switcher__label:hover{color:var(--six-color-web-rock-600)}.language-switcher__label:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}.language-switcher__label--selected{color:var(--six-color-black);text-decoration:underline}";
4
4
  const SixLanguageSwitcherStyle0 = sixLanguageSwitcherCss;
5
5
 
6
6
  const DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];
@@ -47,7 +47,11 @@ const SixLanguageSwitcher$1 = /*@__PURE__*/ proxyCustomElement(class SixLanguage
47
47
  render() {
48
48
  return (h("div", { key: 'fa72eaaf2cb5c0f327a0924e12779863f348b59c', part: "container", class: "language-switcher__container" }, this.languages.map((lang, index) => {
49
49
  const language = typeof lang === 'string' ? lang : lang.key;
50
- return (h("div", { onClick: this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value) }, h("span", { part: "label", class: {
50
+ return (h("div", { onClick: this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value), onKeyDown: (e) => {
51
+ if (e.key === 'Enter' || e.key === ' ') {
52
+ this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)();
53
+ }
54
+ } }, h("span", { part: "label", tabindex: "0", class: {
51
55
  'language-switcher__label': true,
52
56
  'language-switcher__label--selected': this.selected === language,
53
57
  } }, language), index < this.languages.length - 1 && (h("span", { part: "separator", class: "language-switcher__separator" }, "|"))));
package/dist/components/six-language-switcher.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"six-language-switcher.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,qSAAqS,CAAC;AACrU,kCAAe,sBAAsB;;ACYrC,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;MAchCA,qBAAmB;;;;;;QAqCtB,4BAAuB,GAAG,CAAC,WAAmB,EAAE,aAAsB,KAAK;YACjF,IAAI,aAAa,KAAK,SAAS,EAAE;gBAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;aACpC;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;aAClC;YACD,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;SAC7B,CAAC;;yBAvCyD,iBAAiB;;IAG5E,sBAAsB,CAAC,QAAkB;QACvC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;SACzD;QAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;IAMD,iBAAiB;QACf,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE;YAC/B,IAAI,CAAC,sBAAsB,EAAE,CAAC;SAC/B;KACF;IAEO,sBAAsB;QAC5B,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QAC3C,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE;YACxC,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACpC;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC;YACrC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC7C;KACF;IAWD,MAAM;QACJ,QACE,4DAAK,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,IACvD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK;YAC9B,MAAM,QAAQ,GAAG,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;YAC5D,QACE,WAAK,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAChG,YACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;oBACL,0BAA0B,EAAE,IAAI;oBAChC,oCAAoC,EAAE,IAAI,CAAC,QAAQ,KAAK,QAAQ;iBACjE,IAEA,QAAQ,CACJ,EACN,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,KAChC,YAAM,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,QAEpD,CACR,CACG,EACN;SACH,CAAC,CACE,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixLanguageSwitcher"],"sources":["src/components/six-language-switcher/six-language-switcher.scss?tag=six-language-switcher&encapsulation=shadow","src/components/six-language-switcher/six-language-switcher.tsx"],"sourcesContent":[".language-switcher {\n &__container {\n display: flex;\n }\n\n &__separator {\n padding: 0 0.25rem;\n }\n\n &__label {\n cursor: pointer;\n\n &:hover {\n color: var(--six-color-web-rock-600);\n }\n\n &--selected {\n color: var(--six-color-black);\n text-decoration: underline;\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 2.1.0\n * @status experimental\n **/\n\nexport interface SixLanguageSwitcherInput {\n key: string;\n value: string;\n}\nexport type SixLanguageSwitcherChangePayload = string;\n\nconst DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];\n\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n@Component({\n tag: 'six-language-switcher',\n styleUrl: 'six-language-switcher.scss',\n shadow: true,\n})\nexport class SixLanguageSwitcher {\n /** The language which should be shown as selected */\n @Prop({ mutable: true, reflect: true }) selected?: string;\n\n /** The languages which should be selectable options. */\n @Prop() languages: string[] | SixLanguageSwitcherInput[] = DEFAULT_LANGUAGES;\n\n @Watch('languages')\n handleChangesLanguages(newValue: string[]) {\n if (!Array.isArray(newValue)) {\n throw new Error('languages is expected to be an array');\n }\n\n this.updateSelectedLanguage();\n }\n /**\n * Emitted when the language switchers value changes\n */\n @Event({ eventName: 'six-language-switcher-change' }) sixChange!: EventEmitter<SixLanguageSwitcherChangePayload>;\n\n componentWillLoad() {\n if (this.selected === undefined) {\n this.updateSelectedLanguage();\n }\n }\n\n private updateSelectedLanguage() {\n const selectedLanguage = this.languages[0];\n if (typeof selectedLanguage === 'string') {\n this.selected = selectedLanguage;\n this.sixChange.emit(this.selected);\n } else {\n this.selected = selectedLanguage.key;\n this.sixChange.emit(selectedLanguage.value);\n }\n }\n\n private handleLanguageSwitching = (newLanguage: string, languageValue?: string) => () => {\n if (languageValue !== undefined) {\n this.sixChange.emit(languageValue);\n } else {\n this.sixChange.emit(newLanguage);\n }\n this.selected = newLanguage;\n };\n\n render() {\n return (\n <div part=\"container\" class=\"language-switcher__container\">\n {this.languages.map((lang, index) => {\n const language = typeof lang === 'string' ? lang : lang.key;\n return (\n <div onClick={this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)}>\n <span\n part=\"label\"\n class={{\n 'language-switcher__label': true,\n 'language-switcher__label--selected': this.selected === language,\n }}\n >\n {language}\n </span>\n {index < this.languages.length - 1 && (\n <span part=\"separator\" class=\"language-switcher__separator\">\n |\n </span>\n )}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"six-language-switcher.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,uZAAuZ,CAAC;AACvb,kCAAe,sBAAsB;;ACYrC,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;MAchCA,qBAAmB;;;;;;QAqCtB,4BAAuB,GAAG,CAAC,WAAmB,EAAE,aAAsB,KAAK;YACjF,IAAI,aAAa,KAAK,SAAS,EAAE;gBAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;aACpC;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;aAClC;YACD,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;SAC7B,CAAC;;yBAvCyD,iBAAiB;;IAG5E,sBAAsB,CAAC,QAAkB;QACvC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;SACzD;QAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;IAMD,iBAAiB;QACf,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE;YAC/B,IAAI,CAAC,sBAAsB,EAAE,CAAC;SAC/B;KACF;IAEO,sBAAsB;QAC5B,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QAC3C,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE;YACxC,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACpC;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC;YACrC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC7C;KACF;IAWD,MAAM;QACJ,QACE,4DAAK,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,IACvD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK;YAC9B,MAAM,QAAQ,GAAG,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;YAC5D,QACE,WACE,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,EAC7F,SAAS,EAAE,CAAC,CAAC;oBACX,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;wBACtC,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;qBACxF;iBACF,IAED,YACE,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;oBACL,0BAA0B,EAAE,IAAI;oBAChC,oCAAoC,EAAE,IAAI,CAAC,QAAQ,KAAK,QAAQ;iBACjE,IAEA,QAAQ,CACJ,EAEN,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,KAChC,YAAM,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,QAEpD,CACR,CACG,EACN;SACH,CAAC,CACE,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixLanguageSwitcher"],"sources":["src/components/six-language-switcher/six-language-switcher.scss?tag=six-language-switcher&encapsulation=shadow","src/components/six-language-switcher/six-language-switcher.tsx"],"sourcesContent":[".language-switcher {\n &__container {\n display: flex;\n }\n\n &__separator {\n padding: 0 0.25rem;\n }\n\n &__label {\n cursor: pointer;\n\n &:hover {\n color: var(--six-color-web-rock-600);\n }\n\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: var(--six-focus-ring-offset);\n }\n\n &--selected {\n color: var(--six-color-black);\n text-decoration: underline;\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 2.1.0\n * @status experimental\n **/\n\nexport interface SixLanguageSwitcherInput {\n key: string;\n value: string;\n}\nexport type SixLanguageSwitcherChangePayload = string;\n\nconst DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];\n\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n@Component({\n tag: 'six-language-switcher',\n styleUrl: 'six-language-switcher.scss',\n shadow: true,\n})\nexport class SixLanguageSwitcher {\n /** The language which should be shown as selected */\n @Prop({ mutable: true, reflect: true }) selected?: string;\n\n /** The languages which should be selectable options. */\n @Prop() languages: string[] | SixLanguageSwitcherInput[] = DEFAULT_LANGUAGES;\n\n @Watch('languages')\n handleChangesLanguages(newValue: string[]) {\n if (!Array.isArray(newValue)) {\n throw new Error('languages is expected to be an array');\n }\n\n this.updateSelectedLanguage();\n }\n /**\n * Emitted when the language switchers value changes\n */\n @Event({ eventName: 'six-language-switcher-change' }) sixChange!: EventEmitter<SixLanguageSwitcherChangePayload>;\n\n componentWillLoad() {\n if (this.selected === undefined) {\n this.updateSelectedLanguage();\n }\n }\n\n private updateSelectedLanguage() {\n const selectedLanguage = this.languages[0];\n if (typeof selectedLanguage === 'string') {\n this.selected = selectedLanguage;\n this.sixChange.emit(this.selected);\n } else {\n this.selected = selectedLanguage.key;\n this.sixChange.emit(selectedLanguage.value);\n }\n }\n\n private handleLanguageSwitching = (newLanguage: string, languageValue?: string) => () => {\n if (languageValue !== undefined) {\n this.sixChange.emit(languageValue);\n } else {\n this.sixChange.emit(newLanguage);\n }\n this.selected = newLanguage;\n };\n\n render() {\n return (\n <div part=\"container\" class=\"language-switcher__container\">\n {this.languages.map((lang, index) => {\n const language = typeof lang === 'string' ? lang : lang.key;\n return (\n <div\n onClick={this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)();\n }\n }}\n >\n <span\n part=\"label\"\n tabindex=\"0\"\n class={{\n 'language-switcher__label': true,\n 'language-switcher__label--selected': this.selected === language,\n }}\n >\n {language}\n </span>\n\n {index < this.languages.length - 1 && (\n <span part=\"separator\" class=\"language-switcher__separator\">\n |\n </span>\n )}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"],"version":3}
package/dist/components/six-tab.js CHANGED
@@ -51,7 +51,7 @@ const SixTab$1 = /*@__PURE__*/ proxyCustomElement(class SixTab extends HTMLEleme
51
51
  'tab--active': this.active,
52
52
  'tab--closable': this.closable,
53
53
  'tab--disabled': this.disabled,
54
- }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, h("slot", { key: 'a09a1df3cb8a119d736a200b618e114399fe57c3' }), this.closable && (h("six-icon-button", { name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { key: '31c108fd748bf326b1dd40a92d2b35eaef7f8c29', class: {
54
+ }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, h("slot", { key: 'a09a1df3cb8a119d736a200b618e114399fe57c3' }), this.closable && (h("six-icon-button", { name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { key: 'aa6e7b351ed81d8cba4983512b87b50a8a541a68', part: this.active ? 'active-tab-indicator' : '', class: {
55
55
  tab__indicator: true,
56
56
  'tab__indicator--active': this.active,
57
57
  // Placements
package/dist/components/six-tab.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"six-tab.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,orDAAorD,CAAC;AACvsD,qBAAe,SAAS;;ACExB,IAAI,EAAE,GAAG,CAAC,CAAC;MAmBEA,QAAM;;;;;;QACT,gBAAW,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC;qBAMH,EAAE;sBAGD,KAAK;wBAGpB,KAAK;wBAGY,KAAK;;IAKzC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1D;;IAID,MAAM,QAAQ,CAAC,OAAsB;;QACnC,MAAA,IAAI,CAAC,GAAG,0CAAE,KAAK,CAAC,OAAO,CAAC,CAAC;KAC1B;;IAID,MAAM,WAAW;;QACf,MAAA,IAAI,CAAC,GAAG,0CAAE,IAAI,EAAE,CAAC;KAClB;IAEO,gBAAgB;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;IAED,MAAM;;QACJ,MAAM,QAAQ,GAAkC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QACnF,MAAM,SAAS,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,SAAS,mCAAI,KAAK,CAAC;QAC/C;;QAEE,EAAC,IAAI,qDAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,IACxC,4DACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI;;gBAGT,UAAU,EAAE,SAAS,KAAK,KAAK;gBAC/B,aAAa,EAAE,SAAS,KAAK,QAAQ;gBACrC,WAAW,EAAE,SAAS,KAAK,MAAM;gBACjC,YAAY,EAAE,SAAS,KAAK,OAAO;;gBAGnC,aAAa,EAAE,IAAI,CAAC,MAAM;gBAC1B,eAAe,EAAE,IAAI,CAAC,QAAQ;gBAC9B,eAAe,EAAE,IAAI,CAAC,QAAQ;aAC/B,EACD,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,IAEpD,8DAAQ,EACP,IAAI,CAAC,QAAQ,KACZ,uBACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,mBAAmB,EAC/B,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,QAAQ,EAAE,CAAC,CAAC,iBACA,MAAM,GAClB,CACH,CACG,EACN,4DACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,MAAM;;gBAGrC,qBAAqB,EAAE,SAAS,KAAK,KAAK;gBAC1C,wBAAwB,EAAE,SAAS,KAAK,QAAQ;gBAChD,sBAAsB,EAAE,SAAS,KAAK,MAAM;gBAC5C,uBAAuB,EAAE,SAAS,KAAK,OAAO;aAC/C,GACI,CACF,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixTab"],"sources":["src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: flex;\n}\n\n.tab {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-font-size-small);\n font-weight: var(--six-font-weight-semibold);\n color: var(--six-tab-color);\n padding: var(--six-spacing-medium) var(--six-spacing-large);\n white-space: nowrap;\n user-select: none;\n cursor: pointer;\n width: 100%;\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset));\n }\n\n &.tab--active:not(.tab--disabled) {\n color: var(--six-tab-color-active);\n font-weight: var(--six-font-weight-bold);\n }\n\n &.tab--closable {\n padding-right: var(--six-spacing-small);\n }\n\n &.tab--disabled {\n color: var(--six-tab-color-disabled);\n cursor: not-allowed;\n }\n\n &:hover:not(.tab--disabled) {\n color: var(--six-tab-color-hover);\n }\n}\n\n.tab__close-button {\n font-size: var(--six-font-size-large);\n margin-left: var(--six-spacing-xx-small);\n\n &::part(base) {\n padding: var(--six-spacing-xxx-small);\n }\n}\n\n// TAB INDICATOR\n.tab__indicator {\n position: absolute;\n &.tab__indicator--active {\n background-color: var(--six-tab-border-color-active);\n }\n}\n\n// TOP\n.tab--top {\n margin-bottom: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--top {\n width: 100%;\n bottom: 0;\n height: var(--six-tab-border-width);\n}\n\n// BOTTOM\n.tab--bottom {\n margin-top: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--bottom {\n width: 100%;\n top: 0;\n height: var(--six-tab-border-width);\n}\n\n// LEFT\n.tab--left {\n margin-right: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--left {\n height: 100%;\n right: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n\n// RIGHT\n.tab--right {\n margin-left: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--right {\n height: 100%;\n left: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n tag: 'six-tab',\n styleUrl: 'six-tab.scss',\n shadow: true,\n})\nexport class SixTab {\n private componentId = `tab-${++id}`;\n private tab?: HTMLElement;\n\n @Element() host!: HTMLSixTabElement;\n\n /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n @Prop({ reflect: true }) panel = '';\n\n /** Set to true to draw the tab in an active state. */\n @Prop({ reflect: true }) active = false;\n\n /** When true, the tab will be rendered with a close icon. */\n @Prop() closable = false;\n\n /** Set to true to draw the tab in a disabled state. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Emitted when the tab is closable and the close button is activated. */\n @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.handleCloseClick = this.handleCloseClick.bind(this);\n }\n\n /** Sets focus to the tab. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.tab?.focus(options);\n }\n\n /** Removes focus from the tab. */\n @Method()\n async removeFocus() {\n this.tab?.blur();\n }\n\n private handleCloseClick() {\n this.sixClose.emit();\n }\n\n render() {\n const tabGroup: HTMLSixTabGroupElement | null = this.host.closest('six-tab-group');\n const placement = tabGroup?.placement ?? 'top';\n return (\n // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n <Host id={this.host.id || this.componentId}>\n <div\n part=\"base\"\n ref={(el) => (this.tab = el)}\n class={{\n tab: true,\n\n // Placements\n 'tab--top': placement === 'top',\n 'tab--bottom': placement === 'bottom',\n 'tab--left': placement === 'left',\n 'tab--right': placement === 'right',\n\n // States\n 'tab--active': this.active,\n 'tab--closable': this.closable,\n 'tab--disabled': this.disabled,\n }}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.disabled || !this.active ? '-1' : '0'}\n >\n <slot />\n {this.closable && (\n <six-icon-button\n name=\"close\"\n size=\"xSmall\"\n exportparts=\"base:close-button\"\n class=\"tab__close-button\"\n onClick={this.handleCloseClick}\n tabIndex={-1}\n aria-hidden=\"true\"\n />\n )}\n </div>\n <div\n class={{\n tab__indicator: true,\n 'tab__indicator--active': this.active,\n\n // Placements\n 'tab__indicator--top': placement === 'top',\n 'tab__indicator--bottom': placement === 'bottom',\n 'tab__indicator--left': placement === 'left',\n 'tab__indicator--right': placement === 'right',\n }}\n ></div>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"six-tab.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,orDAAorD,CAAC;AACvsD,qBAAe,SAAS;;ACExB,IAAI,EAAE,GAAG,CAAC,CAAC;MAmBEA,QAAM;;;;;;QACT,gBAAW,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC;qBAMH,EAAE;sBAGD,KAAK;wBAGpB,KAAK;wBAGY,KAAK;;IAKzC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1D;;IAID,MAAM,QAAQ,CAAC,OAAsB;;QACnC,MAAA,IAAI,CAAC,GAAG,0CAAE,KAAK,CAAC,OAAO,CAAC,CAAC;KAC1B;;IAID,MAAM,WAAW;;QACf,MAAA,IAAI,CAAC,GAAG,0CAAE,IAAI,EAAE,CAAC;KAClB;IAEO,gBAAgB;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;IAED,MAAM;;QACJ,MAAM,QAAQ,GAAkC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QACnF,MAAM,SAAS,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,SAAS,mCAAI,KAAK,CAAC;QAC/C;;QAEE,EAAC,IAAI,qDAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,IACxC,4DACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI;;gBAGT,UAAU,EAAE,SAAS,KAAK,KAAK;gBAC/B,aAAa,EAAE,SAAS,KAAK,QAAQ;gBACrC,WAAW,EAAE,SAAS,KAAK,MAAM;gBACjC,YAAY,EAAE,SAAS,KAAK,OAAO;;gBAGnC,aAAa,EAAE,IAAI,CAAC,MAAM;gBAC1B,eAAe,EAAE,IAAI,CAAC,QAAQ;gBAC9B,eAAe,EAAE,IAAI,CAAC,QAAQ;aAC/B,EACD,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,IAEpD,8DAAQ,EACP,IAAI,CAAC,QAAQ,KACZ,uBACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,mBAAmB,EAC/B,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,QAAQ,EAAE,CAAC,CAAC,iBACA,MAAM,GAClB,CACH,CACG,EACN,4DACE,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,sBAAsB,GAAG,EAAE,EAC/C,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,MAAM;;gBAGrC,qBAAqB,EAAE,SAAS,KAAK,KAAK;gBAC1C,wBAAwB,EAAE,SAAS,KAAK,QAAQ;gBAChD,sBAAsB,EAAE,SAAS,KAAK,MAAM;gBAC5C,uBAAuB,EAAE,SAAS,KAAK,OAAO;aAC/C,GACI,CACF,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixTab"],"sources":["src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: flex;\n}\n\n.tab {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-font-size-small);\n font-weight: var(--six-font-weight-semibold);\n color: var(--six-tab-color);\n padding: var(--six-spacing-medium) var(--six-spacing-large);\n white-space: nowrap;\n user-select: none;\n cursor: pointer;\n width: 100%;\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset));\n }\n\n &.tab--active:not(.tab--disabled) {\n color: var(--six-tab-color-active);\n font-weight: var(--six-font-weight-bold);\n }\n\n &.tab--closable {\n padding-right: var(--six-spacing-small);\n }\n\n &.tab--disabled {\n color: var(--six-tab-color-disabled);\n cursor: not-allowed;\n }\n\n &:hover:not(.tab--disabled) {\n color: var(--six-tab-color-hover);\n }\n}\n\n.tab__close-button {\n font-size: var(--six-font-size-large);\n margin-left: var(--six-spacing-xx-small);\n\n &::part(base) {\n padding: var(--six-spacing-xxx-small);\n }\n}\n\n// TAB INDICATOR\n.tab__indicator {\n position: absolute;\n &.tab__indicator--active {\n background-color: var(--six-tab-border-color-active);\n }\n}\n\n// TOP\n.tab--top {\n margin-bottom: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--top {\n width: 100%;\n bottom: 0;\n height: var(--six-tab-border-width);\n}\n\n// BOTTOM\n.tab--bottom {\n margin-top: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--bottom {\n width: 100%;\n top: 0;\n height: var(--six-tab-border-width);\n}\n\n// LEFT\n.tab--left {\n margin-right: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--left {\n height: 100%;\n right: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n\n// RIGHT\n.tab--right {\n margin-left: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--right {\n height: 100%;\n left: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n tag: 'six-tab',\n styleUrl: 'six-tab.scss',\n shadow: true,\n})\nexport class SixTab {\n private componentId = `tab-${++id}`;\n private tab?: HTMLElement;\n\n @Element() host!: HTMLSixTabElement;\n\n /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n @Prop({ reflect: true }) panel = '';\n\n /** Set to true to draw the tab in an active state. */\n @Prop({ reflect: true }) active = false;\n\n /** When true, the tab will be rendered with a close icon. */\n @Prop() closable = false;\n\n /** Set to true to draw the tab in a disabled state. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Emitted when the tab is closable and the close button is activated. */\n @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.handleCloseClick = this.handleCloseClick.bind(this);\n }\n\n /** Sets focus to the tab. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.tab?.focus(options);\n }\n\n /** Removes focus from the tab. */\n @Method()\n async removeFocus() {\n this.tab?.blur();\n }\n\n private handleCloseClick() {\n this.sixClose.emit();\n }\n\n render() {\n const tabGroup: HTMLSixTabGroupElement | null = this.host.closest('six-tab-group');\n const placement = tabGroup?.placement ?? 'top';\n return (\n // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n <Host id={this.host.id || this.componentId}>\n <div\n part=\"base\"\n ref={(el) => (this.tab = el)}\n class={{\n tab: true,\n\n // Placements\n 'tab--top': placement === 'top',\n 'tab--bottom': placement === 'bottom',\n 'tab--left': placement === 'left',\n 'tab--right': placement === 'right',\n\n // States\n 'tab--active': this.active,\n 'tab--closable': this.closable,\n 'tab--disabled': this.disabled,\n }}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.disabled || !this.active ? '-1' : '0'}\n >\n <slot />\n {this.closable && (\n <six-icon-button\n name=\"close\"\n size=\"xSmall\"\n exportparts=\"base:close-button\"\n class=\"tab__close-button\"\n onClick={this.handleCloseClick}\n tabIndex={-1}\n aria-hidden=\"true\"\n />\n )}\n </div>\n <div\n part={this.active ? 'active-tab-indicator' : ''}\n class={{\n tab__indicator: true,\n 'tab__indicator--active': this.active,\n\n // Placements\n 'tab__indicator--top': placement === 'top',\n 'tab__indicator--bottom': placement === 'bottom',\n 'tab__indicator--left': placement === 'left',\n 'tab__indicator--right': placement === 'right',\n }}\n ></div>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/components.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2024-03-27T08:14:29",
2
+ "timestamp": "2024-04-26T08:50:41",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.12.6",
@@ -4704,8 +4704,8 @@
4704
4704
  "filePath": "src/components/six-error/six-error.tsx",
4705
4705
  "encapsulation": "shadow",
4706
4706
  "tag": "six-error",
4707
- "readme": "# six-error\n\n\n",
4708
- "docs": "",
4707
+ "readme": "# six-error\n\n<!-- EXAMPLES -->\n",
4708
+ "docs": "<!-- EXAMPLES -->",
4709
4709
  "docsTags": [
4710
4710
  {
4711
4711
  "name": "since",
package/dist/esm/six-language-switcher.entry.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, c as createEvent, h } from './index-52a755dc.js';
2
2
 
3
- const sixLanguageSwitcherCss = ".language-switcher__container{display:flex}.language-switcher__separator{padding:0 0.25rem}.language-switcher__label{cursor:pointer}.language-switcher__label:hover{color:var(--six-color-web-rock-600)}.language-switcher__label--selected{color:var(--six-color-black);text-decoration:underline}";
3
+ const sixLanguageSwitcherCss = ".language-switcher__container{display:flex}.language-switcher__separator{padding:0 0.25rem}.language-switcher__label{cursor:pointer}.language-switcher__label:hover{color:var(--six-color-web-rock-600)}.language-switcher__label:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}.language-switcher__label--selected{color:var(--six-color-black);text-decoration:underline}";
4
4
  const SixLanguageSwitcherStyle0 = sixLanguageSwitcherCss;
5
5
 
6
6
  const DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];
@@ -45,7 +45,11 @@ const SixLanguageSwitcher = class {
45
45
  render() {
46
46
  return (h("div", { key: 'fa72eaaf2cb5c0f327a0924e12779863f348b59c', part: "container", class: "language-switcher__container" }, this.languages.map((lang, index) => {
47
47
  const language = typeof lang === 'string' ? lang : lang.key;
48
- return (h("div", { onClick: this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value) }, h("span", { part: "label", class: {
48
+ return (h("div", { onClick: this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value), onKeyDown: (e) => {
49
+ if (e.key === 'Enter' || e.key === ' ') {
50
+ this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)();
51
+ }
52
+ } }, h("span", { part: "label", tabindex: "0", class: {
49
53
  'language-switcher__label': true,
50
54
  'language-switcher__label--selected': this.selected === language,
51
55
  } }, language), index < this.languages.length - 1 && (h("span", { part: "separator", class: "language-switcher__separator" }, "|"))));
package/dist/esm/six-language-switcher.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"six-language-switcher.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,qSAAqS,CAAC;AACrU,kCAAe,sBAAsB;;ACYrC,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;MAchC,mBAAmB;;;;QAqCtB,4BAAuB,GAAG,CAAC,WAAmB,EAAE,aAAsB,KAAK;YACjF,IAAI,aAAa,KAAK,SAAS,EAAE;gBAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;aACpC;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;aAClC;YACD,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;SAC7B,CAAC;;yBAvCyD,iBAAiB;;IAG5E,sBAAsB,CAAC,QAAkB;QACvC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;SACzD;QAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;IAMD,iBAAiB;QACf,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE;YAC/B,IAAI,CAAC,sBAAsB,EAAE,CAAC;SAC/B;KACF;IAEO,sBAAsB;QAC5B,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QAC3C,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE;YACxC,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACpC;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC;YACrC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC7C;KACF;IAWD,MAAM;QACJ,QACE,4DAAK,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,IACvD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK;YAC9B,MAAM,QAAQ,GAAG,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;YAC5D,QACE,WAAK,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAChG,YACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;oBACL,0BAA0B,EAAE,IAAI;oBAChC,oCAAoC,EAAE,IAAI,CAAC,QAAQ,KAAK,QAAQ;iBACjE,IAEA,QAAQ,CACJ,EACN,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,KAChC,YAAM,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,QAEpD,CACR,CACG,EACN;SACH,CAAC,CACE,EACN;KACH;;;;;;;;;","names":[],"sources":["src/components/six-language-switcher/six-language-switcher.scss?tag=six-language-switcher&encapsulation=shadow","src/components/six-language-switcher/six-language-switcher.tsx"],"sourcesContent":[".language-switcher {\n &__container {\n display: flex;\n }\n\n &__separator {\n padding: 0 0.25rem;\n }\n\n &__label {\n cursor: pointer;\n\n &:hover {\n color: var(--six-color-web-rock-600);\n }\n\n &--selected {\n color: var(--six-color-black);\n text-decoration: underline;\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 2.1.0\n * @status experimental\n **/\n\nexport interface SixLanguageSwitcherInput {\n key: string;\n value: string;\n}\nexport type SixLanguageSwitcherChangePayload = string;\n\nconst DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];\n\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n@Component({\n tag: 'six-language-switcher',\n styleUrl: 'six-language-switcher.scss',\n shadow: true,\n})\nexport class SixLanguageSwitcher {\n /** The language which should be shown as selected */\n @Prop({ mutable: true, reflect: true }) selected?: string;\n\n /** The languages which should be selectable options. */\n @Prop() languages: string[] | SixLanguageSwitcherInput[] = DEFAULT_LANGUAGES;\n\n @Watch('languages')\n handleChangesLanguages(newValue: string[]) {\n if (!Array.isArray(newValue)) {\n throw new Error('languages is expected to be an array');\n }\n\n this.updateSelectedLanguage();\n }\n /**\n * Emitted when the language switchers value changes\n */\n @Event({ eventName: 'six-language-switcher-change' }) sixChange!: EventEmitter<SixLanguageSwitcherChangePayload>;\n\n componentWillLoad() {\n if (this.selected === undefined) {\n this.updateSelectedLanguage();\n }\n }\n\n private updateSelectedLanguage() {\n const selectedLanguage = this.languages[0];\n if (typeof selectedLanguage === 'string') {\n this.selected = selectedLanguage;\n this.sixChange.emit(this.selected);\n } else {\n this.selected = selectedLanguage.key;\n this.sixChange.emit(selectedLanguage.value);\n }\n }\n\n private handleLanguageSwitching = (newLanguage: string, languageValue?: string) => () => {\n if (languageValue !== undefined) {\n this.sixChange.emit(languageValue);\n } else {\n this.sixChange.emit(newLanguage);\n }\n this.selected = newLanguage;\n };\n\n render() {\n return (\n <div part=\"container\" class=\"language-switcher__container\">\n {this.languages.map((lang, index) => {\n const language = typeof lang === 'string' ? lang : lang.key;\n return (\n <div onClick={this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)}>\n <span\n part=\"label\"\n class={{\n 'language-switcher__label': true,\n 'language-switcher__label--selected': this.selected === language,\n }}\n >\n {language}\n </span>\n {index < this.languages.length - 1 && (\n <span part=\"separator\" class=\"language-switcher__separator\">\n |\n </span>\n )}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"six-language-switcher.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,uZAAuZ,CAAC;AACvb,kCAAe,sBAAsB;;ACYrC,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;MAchC,mBAAmB;;;;QAqCtB,4BAAuB,GAAG,CAAC,WAAmB,EAAE,aAAsB,KAAK;YACjF,IAAI,aAAa,KAAK,SAAS,EAAE;gBAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;aACpC;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;aAClC;YACD,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;SAC7B,CAAC;;yBAvCyD,iBAAiB;;IAG5E,sBAAsB,CAAC,QAAkB;QACvC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;SACzD;QAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;IAMD,iBAAiB;QACf,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE;YAC/B,IAAI,CAAC,sBAAsB,EAAE,CAAC;SAC/B;KACF;IAEO,sBAAsB;QAC5B,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QAC3C,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE;YACxC,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACpC;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC;YACrC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC7C;KACF;IAWD,MAAM;QACJ,QACE,4DAAK,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,IACvD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK;YAC9B,MAAM,QAAQ,GAAG,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;YAC5D,QACE,WACE,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,EAC7F,SAAS,EAAE,CAAC,CAAC;oBACX,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;wBACtC,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;qBACxF;iBACF,IAED,YACE,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;oBACL,0BAA0B,EAAE,IAAI;oBAChC,oCAAoC,EAAE,IAAI,CAAC,QAAQ,KAAK,QAAQ;iBACjE,IAEA,QAAQ,CACJ,EAEN,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,KAChC,YAAM,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,QAEpD,CACR,CACG,EACN;SACH,CAAC,CACE,EACN;KACH;;;;;;;;;","names":[],"sources":["src/components/six-language-switcher/six-language-switcher.scss?tag=six-language-switcher&encapsulation=shadow","src/components/six-language-switcher/six-language-switcher.tsx"],"sourcesContent":[".language-switcher {\n &__container {\n display: flex;\n }\n\n &__separator {\n padding: 0 0.25rem;\n }\n\n &__label {\n cursor: pointer;\n\n &:hover {\n color: var(--six-color-web-rock-600);\n }\n\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: var(--six-focus-ring-offset);\n }\n\n &--selected {\n color: var(--six-color-black);\n text-decoration: underline;\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 2.1.0\n * @status experimental\n **/\n\nexport interface SixLanguageSwitcherInput {\n key: string;\n value: string;\n}\nexport type SixLanguageSwitcherChangePayload = string;\n\nconst DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];\n\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n@Component({\n tag: 'six-language-switcher',\n styleUrl: 'six-language-switcher.scss',\n shadow: true,\n})\nexport class SixLanguageSwitcher {\n /** The language which should be shown as selected */\n @Prop({ mutable: true, reflect: true }) selected?: string;\n\n /** The languages which should be selectable options. */\n @Prop() languages: string[] | SixLanguageSwitcherInput[] = DEFAULT_LANGUAGES;\n\n @Watch('languages')\n handleChangesLanguages(newValue: string[]) {\n if (!Array.isArray(newValue)) {\n throw new Error('languages is expected to be an array');\n }\n\n this.updateSelectedLanguage();\n }\n /**\n * Emitted when the language switchers value changes\n */\n @Event({ eventName: 'six-language-switcher-change' }) sixChange!: EventEmitter<SixLanguageSwitcherChangePayload>;\n\n componentWillLoad() {\n if (this.selected === undefined) {\n this.updateSelectedLanguage();\n }\n }\n\n private updateSelectedLanguage() {\n const selectedLanguage = this.languages[0];\n if (typeof selectedLanguage === 'string') {\n this.selected = selectedLanguage;\n this.sixChange.emit(this.selected);\n } else {\n this.selected = selectedLanguage.key;\n this.sixChange.emit(selectedLanguage.value);\n }\n }\n\n private handleLanguageSwitching = (newLanguage: string, languageValue?: string) => () => {\n if (languageValue !== undefined) {\n this.sixChange.emit(languageValue);\n } else {\n this.sixChange.emit(newLanguage);\n }\n this.selected = newLanguage;\n };\n\n render() {\n return (\n <div part=\"container\" class=\"language-switcher__container\">\n {this.languages.map((lang, index) => {\n const language = typeof lang === 'string' ? lang : lang.key;\n return (\n <div\n onClick={this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)();\n }\n }}\n >\n <span\n part=\"label\"\n tabindex=\"0\"\n class={{\n 'language-switcher__label': true,\n 'language-switcher__label--selected': this.selected === language,\n }}\n >\n {language}\n </span>\n\n {index < this.languages.length - 1 && (\n <span part=\"separator\" class=\"language-switcher__separator\">\n |\n </span>\n )}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"],"version":3}
package/dist/esm/six-tab.entry.js CHANGED
@@ -47,7 +47,7 @@ const SixTab = class {
47
47
  'tab--active': this.active,
48
48
  'tab--closable': this.closable,
49
49
  'tab--disabled': this.disabled,
50
- }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, h("slot", { key: 'a09a1df3cb8a119d736a200b618e114399fe57c3' }), this.closable && (h("six-icon-button", { name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { key: '31c108fd748bf326b1dd40a92d2b35eaef7f8c29', class: {
50
+ }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, h("slot", { key: 'a09a1df3cb8a119d736a200b618e114399fe57c3' }), this.closable && (h("six-icon-button", { name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { key: 'aa6e7b351ed81d8cba4983512b87b50a8a541a68', part: this.active ? 'active-tab-indicator' : '', class: {
51
51
  tab__indicator: true,
52
52
  'tab__indicator--active': this.active,
53
53
  // Placements
package/dist/esm/six-tab.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"six-tab.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,orDAAorD,CAAC;AACvsD,qBAAe,SAAS;;ACExB,IAAI,EAAE,GAAG,CAAC,CAAC;MAmBE,MAAM;;;;QACT,gBAAW,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC;qBAMH,EAAE;sBAGD,KAAK;wBAGpB,KAAK;wBAGY,KAAK;;IAKzC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1D;;IAID,MAAM,QAAQ,CAAC,OAAsB;;QACnC,MAAA,IAAI,CAAC,GAAG,0CAAE,KAAK,CAAC,OAAO,CAAC,CAAC;KAC1B;;IAID,MAAM,WAAW;;QACf,MAAA,IAAI,CAAC,GAAG,0CAAE,IAAI,EAAE,CAAC;KAClB;IAEO,gBAAgB;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;IAED,MAAM;;QACJ,MAAM,QAAQ,GAAkC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QACnF,MAAM,SAAS,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,SAAS,mCAAI,KAAK,CAAC;QAC/C;;QAEE,EAAC,IAAI,qDAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,IACxC,4DACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI;;gBAGT,UAAU,EAAE,SAAS,KAAK,KAAK;gBAC/B,aAAa,EAAE,SAAS,KAAK,QAAQ;gBACrC,WAAW,EAAE,SAAS,KAAK,MAAM;gBACjC,YAAY,EAAE,SAAS,KAAK,OAAO;;gBAGnC,aAAa,EAAE,IAAI,CAAC,MAAM;gBAC1B,eAAe,EAAE,IAAI,CAAC,QAAQ;gBAC9B,eAAe,EAAE,IAAI,CAAC,QAAQ;aAC/B,EACD,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,IAEpD,8DAAQ,EACP,IAAI,CAAC,QAAQ,KACZ,uBACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,mBAAmB,EAC/B,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,QAAQ,EAAE,CAAC,CAAC,iBACA,MAAM,GAClB,CACH,CACG,EACN,4DACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,MAAM;;gBAGrC,qBAAqB,EAAE,SAAS,KAAK,KAAK;gBAC1C,wBAAwB,EAAE,SAAS,KAAK,QAAQ;gBAChD,sBAAsB,EAAE,SAAS,KAAK,MAAM;gBAC5C,uBAAuB,EAAE,SAAS,KAAK,OAAO;aAC/C,GACI,CACF,EACP;KACH;;;;;;;","names":[],"sources":["src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: flex;\n}\n\n.tab {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-font-size-small);\n font-weight: var(--six-font-weight-semibold);\n color: var(--six-tab-color);\n padding: var(--six-spacing-medium) var(--six-spacing-large);\n white-space: nowrap;\n user-select: none;\n cursor: pointer;\n width: 100%;\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset));\n }\n\n &.tab--active:not(.tab--disabled) {\n color: var(--six-tab-color-active);\n font-weight: var(--six-font-weight-bold);\n }\n\n &.tab--closable {\n padding-right: var(--six-spacing-small);\n }\n\n &.tab--disabled {\n color: var(--six-tab-color-disabled);\n cursor: not-allowed;\n }\n\n &:hover:not(.tab--disabled) {\n color: var(--six-tab-color-hover);\n }\n}\n\n.tab__close-button {\n font-size: var(--six-font-size-large);\n margin-left: var(--six-spacing-xx-small);\n\n &::part(base) {\n padding: var(--six-spacing-xxx-small);\n }\n}\n\n// TAB INDICATOR\n.tab__indicator {\n position: absolute;\n &.tab__indicator--active {\n background-color: var(--six-tab-border-color-active);\n }\n}\n\n// TOP\n.tab--top {\n margin-bottom: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--top {\n width: 100%;\n bottom: 0;\n height: var(--six-tab-border-width);\n}\n\n// BOTTOM\n.tab--bottom {\n margin-top: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--bottom {\n width: 100%;\n top: 0;\n height: var(--six-tab-border-width);\n}\n\n// LEFT\n.tab--left {\n margin-right: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--left {\n height: 100%;\n right: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n\n// RIGHT\n.tab--right {\n margin-left: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--right {\n height: 100%;\n left: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n tag: 'six-tab',\n styleUrl: 'six-tab.scss',\n shadow: true,\n})\nexport class SixTab {\n private componentId = `tab-${++id}`;\n private tab?: HTMLElement;\n\n @Element() host!: HTMLSixTabElement;\n\n /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n @Prop({ reflect: true }) panel = '';\n\n /** Set to true to draw the tab in an active state. */\n @Prop({ reflect: true }) active = false;\n\n /** When true, the tab will be rendered with a close icon. */\n @Prop() closable = false;\n\n /** Set to true to draw the tab in a disabled state. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Emitted when the tab is closable and the close button is activated. */\n @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.handleCloseClick = this.handleCloseClick.bind(this);\n }\n\n /** Sets focus to the tab. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.tab?.focus(options);\n }\n\n /** Removes focus from the tab. */\n @Method()\n async removeFocus() {\n this.tab?.blur();\n }\n\n private handleCloseClick() {\n this.sixClose.emit();\n }\n\n render() {\n const tabGroup: HTMLSixTabGroupElement | null = this.host.closest('six-tab-group');\n const placement = tabGroup?.placement ?? 'top';\n return (\n // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n <Host id={this.host.id || this.componentId}>\n <div\n part=\"base\"\n ref={(el) => (this.tab = el)}\n class={{\n tab: true,\n\n // Placements\n 'tab--top': placement === 'top',\n 'tab--bottom': placement === 'bottom',\n 'tab--left': placement === 'left',\n 'tab--right': placement === 'right',\n\n // States\n 'tab--active': this.active,\n 'tab--closable': this.closable,\n 'tab--disabled': this.disabled,\n }}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.disabled || !this.active ? '-1' : '0'}\n >\n <slot />\n {this.closable && (\n <six-icon-button\n name=\"close\"\n size=\"xSmall\"\n exportparts=\"base:close-button\"\n class=\"tab__close-button\"\n onClick={this.handleCloseClick}\n tabIndex={-1}\n aria-hidden=\"true\"\n />\n )}\n </div>\n <div\n class={{\n tab__indicator: true,\n 'tab__indicator--active': this.active,\n\n // Placements\n 'tab__indicator--top': placement === 'top',\n 'tab__indicator--bottom': placement === 'bottom',\n 'tab__indicator--left': placement === 'left',\n 'tab__indicator--right': placement === 'right',\n }}\n ></div>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"six-tab.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,orDAAorD,CAAC;AACvsD,qBAAe,SAAS;;ACExB,IAAI,EAAE,GAAG,CAAC,CAAC;MAmBE,MAAM;;;;QACT,gBAAW,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC;qBAMH,EAAE;sBAGD,KAAK;wBAGpB,KAAK;wBAGY,KAAK;;IAKzC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1D;;IAID,MAAM,QAAQ,CAAC,OAAsB;;QACnC,MAAA,IAAI,CAAC,GAAG,0CAAE,KAAK,CAAC,OAAO,CAAC,CAAC;KAC1B;;IAID,MAAM,WAAW;;QACf,MAAA,IAAI,CAAC,GAAG,0CAAE,IAAI,EAAE,CAAC;KAClB;IAEO,gBAAgB;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;IAED,MAAM;;QACJ,MAAM,QAAQ,GAAkC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QACnF,MAAM,SAAS,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,SAAS,mCAAI,KAAK,CAAC;QAC/C;;QAEE,EAAC,IAAI,qDAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,IACxC,4DACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI;;gBAGT,UAAU,EAAE,SAAS,KAAK,KAAK;gBAC/B,aAAa,EAAE,SAAS,KAAK,QAAQ;gBACrC,WAAW,EAAE,SAAS,KAAK,MAAM;gBACjC,YAAY,EAAE,SAAS,KAAK,OAAO;;gBAGnC,aAAa,EAAE,IAAI,CAAC,MAAM;gBAC1B,eAAe,EAAE,IAAI,CAAC,QAAQ;gBAC9B,eAAe,EAAE,IAAI,CAAC,QAAQ;aAC/B,EACD,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,IAEpD,8DAAQ,EACP,IAAI,CAAC,QAAQ,KACZ,uBACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,mBAAmB,EAC/B,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,QAAQ,EAAE,CAAC,CAAC,iBACA,MAAM,GAClB,CACH,CACG,EACN,4DACE,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,sBAAsB,GAAG,EAAE,EAC/C,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,MAAM;;gBAGrC,qBAAqB,EAAE,SAAS,KAAK,KAAK;gBAC1C,wBAAwB,EAAE,SAAS,KAAK,QAAQ;gBAChD,sBAAsB,EAAE,SAAS,KAAK,MAAM;gBAC5C,uBAAuB,EAAE,SAAS,KAAK,OAAO;aAC/C,GACI,CACF,EACP;KACH;;;;;;;","names":[],"sources":["src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: flex;\n}\n\n.tab {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-font-size-small);\n font-weight: var(--six-font-weight-semibold);\n color: var(--six-tab-color);\n padding: var(--six-spacing-medium) var(--six-spacing-large);\n white-space: nowrap;\n user-select: none;\n cursor: pointer;\n width: 100%;\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset));\n }\n\n &.tab--active:not(.tab--disabled) {\n color: var(--six-tab-color-active);\n font-weight: var(--six-font-weight-bold);\n }\n\n &.tab--closable {\n padding-right: var(--six-spacing-small);\n }\n\n &.tab--disabled {\n color: var(--six-tab-color-disabled);\n cursor: not-allowed;\n }\n\n &:hover:not(.tab--disabled) {\n color: var(--six-tab-color-hover);\n }\n}\n\n.tab__close-button {\n font-size: var(--six-font-size-large);\n margin-left: var(--six-spacing-xx-small);\n\n &::part(base) {\n padding: var(--six-spacing-xxx-small);\n }\n}\n\n// TAB INDICATOR\n.tab__indicator {\n position: absolute;\n &.tab__indicator--active {\n background-color: var(--six-tab-border-color-active);\n }\n}\n\n// TOP\n.tab--top {\n margin-bottom: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--top {\n width: 100%;\n bottom: 0;\n height: var(--six-tab-border-width);\n}\n\n// BOTTOM\n.tab--bottom {\n margin-top: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--bottom {\n width: 100%;\n top: 0;\n height: var(--six-tab-border-width);\n}\n\n// LEFT\n.tab--left {\n margin-right: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--left {\n height: 100%;\n right: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n\n// RIGHT\n.tab--right {\n margin-left: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--right {\n height: 100%;\n left: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n tag: 'six-tab',\n styleUrl: 'six-tab.scss',\n shadow: true,\n})\nexport class SixTab {\n private componentId = `tab-${++id}`;\n private tab?: HTMLElement;\n\n @Element() host!: HTMLSixTabElement;\n\n /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n @Prop({ reflect: true }) panel = '';\n\n /** Set to true to draw the tab in an active state. */\n @Prop({ reflect: true }) active = false;\n\n /** When true, the tab will be rendered with a close icon. */\n @Prop() closable = false;\n\n /** Set to true to draw the tab in a disabled state. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Emitted when the tab is closable and the close button is activated. */\n @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.handleCloseClick = this.handleCloseClick.bind(this);\n }\n\n /** Sets focus to the tab. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.tab?.focus(options);\n }\n\n /** Removes focus from the tab. */\n @Method()\n async removeFocus() {\n this.tab?.blur();\n }\n\n private handleCloseClick() {\n this.sixClose.emit();\n }\n\n render() {\n const tabGroup: HTMLSixTabGroupElement | null = this.host.closest('six-tab-group');\n const placement = tabGroup?.placement ?? 'top';\n return (\n // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n <Host id={this.host.id || this.componentId}>\n <div\n part=\"base\"\n ref={(el) => (this.tab = el)}\n class={{\n tab: true,\n\n // Placements\n 'tab--top': placement === 'top',\n 'tab--bottom': placement === 'bottom',\n 'tab--left': placement === 'left',\n 'tab--right': placement === 'right',\n\n // States\n 'tab--active': this.active,\n 'tab--closable': this.closable,\n 'tab--disabled': this.disabled,\n }}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.disabled || !this.active ? '-1' : '0'}\n >\n <slot />\n {this.closable && (\n <six-icon-button\n name=\"close\"\n size=\"xSmall\"\n exportparts=\"base:close-button\"\n class=\"tab__close-button\"\n onClick={this.handleCloseClick}\n tabIndex={-1}\n aria-hidden=\"true\"\n />\n )}\n </div>\n <div\n part={this.active ? 'active-tab-indicator' : ''}\n class={{\n tab__indicator: true,\n 'tab__indicator--active': this.active,\n\n // Placements\n 'tab__indicator--top': placement === 'top',\n 'tab__indicator--bottom': placement === 'bottom',\n 'tab__indicator--left': placement === 'left',\n 'tab__indicator--right': placement === 'right',\n }}\n ></div>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/ui-library/p-1d4cb6e9.entry.js ADDED
@@ -0,0 +1,2 @@
1
+ import{r as e,c as s,h as a}from"./p-f93d8a4e.js";const t=".language-switcher__container{display:flex}.language-switcher__separator{padding:0 0.25rem}.language-switcher__label{cursor:pointer}.language-switcher__label:hover{color:var(--six-color-web-rock-600)}.language-switcher__label:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}.language-switcher__label--selected{color:var(--six-color-black);text-decoration:underline}";const i=t;const r=["EN","DE","ES"];const n=class{constructor(a){e(this,a);this.sixChange=s(this,"six-language-switcher-change",7);this.handleLanguageSwitching=(e,s)=>()=>{if(s!==undefined){this.sixChange.emit(s)}else{this.sixChange.emit(e)}this.selected=e};this.selected=undefined;this.languages=r}handleChangesLanguages(e){if(!Array.isArray(e)){throw new Error("languages is expected to be an array")}this.updateSelectedLanguage()}componentWillLoad(){if(this.selected===undefined){this.updateSelectedLanguage()}}updateSelectedLanguage(){const e=this.languages[0];if(typeof e==="string"){this.selected=e;this.sixChange.emit(this.selected)}else{this.selected=e.key;this.sixChange.emit(e.value)}}render(){return a("div",{key:"fa72eaaf2cb5c0f327a0924e12779863f348b59c",part:"container",class:"language-switcher__container"},this.languages.map(((e,s)=>{const t=typeof e==="string"?e:e.key;return a("div",{onClick:this.handleLanguageSwitching(t,typeof e==="string"?e:e.value),onKeyDown:s=>{if(s.key==="Enter"||s.key===" "){this.handleLanguageSwitching(t,typeof e==="string"?e:e.value)()}}},a("span",{part:"label",tabindex:"0",class:{"language-switcher__label":true,"language-switcher__label--selected":this.selected===t}},t),s<this.languages.length-1&&a("span",{part:"separator",class:"language-switcher__separator"},"|"))})))}static get watchers(){return{languages:["handleChangesLanguages"]}}};n.style=i;export{n as six_language_switcher};
2
+ //# sourceMappingURL=p-1d4cb6e9.entry.js.map
package/dist/ui-library/p-1d4cb6e9.entry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"names":["sixLanguageSwitcherCss","SixLanguageSwitcherStyle0","DEFAULT_LANGUAGES","SixLanguageSwitcher","this","handleLanguageSwitching","newLanguage","languageValue","undefined","sixChange","emit","selected","handleChangesLanguages","newValue","Array","isArray","Error","updateSelectedLanguage","componentWillLoad","selectedLanguage","languages","key","value","render","h","part","class","map","lang","index","language","onClick","onKeyDown","e","tabindex","length"],"sources":["src/components/six-language-switcher/six-language-switcher.scss?tag=six-language-switcher&encapsulation=shadow","src/components/six-language-switcher/six-language-switcher.tsx"],"sourcesContent":[".language-switcher {\n &__container {\n display: flex;\n }\n\n &__separator {\n padding: 0 0.25rem;\n }\n\n &__label {\n cursor: pointer;\n\n &:hover {\n color: var(--six-color-web-rock-600);\n }\n\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: var(--six-focus-ring-offset);\n }\n\n &--selected {\n color: var(--six-color-black);\n text-decoration: underline;\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 2.1.0\n * @status experimental\n **/\n\nexport interface SixLanguageSwitcherInput {\n key: string;\n value: string;\n}\nexport type SixLanguageSwitcherChangePayload = string;\n\nconst DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];\n\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n@Component({\n tag: 'six-language-switcher',\n styleUrl: 'six-language-switcher.scss',\n shadow: true,\n})\nexport class SixLanguageSwitcher {\n /** The language which should be shown as selected */\n @Prop({ mutable: true, reflect: true }) selected?: string;\n\n /** The languages which should be selectable options. */\n @Prop() languages: string[] | SixLanguageSwitcherInput[] = DEFAULT_LANGUAGES;\n\n @Watch('languages')\n handleChangesLanguages(newValue: string[]) {\n if (!Array.isArray(newValue)) {\n throw new Error('languages is expected to be an array');\n }\n\n this.updateSelectedLanguage();\n }\n /**\n * Emitted when the language switchers value changes\n */\n @Event({ eventName: 'six-language-switcher-change' }) sixChange!: EventEmitter<SixLanguageSwitcherChangePayload>;\n\n componentWillLoad() {\n if (this.selected === undefined) {\n this.updateSelectedLanguage();\n }\n }\n\n private updateSelectedLanguage() {\n const selectedLanguage = this.languages[0];\n if (typeof selectedLanguage === 'string') {\n this.selected = selectedLanguage;\n this.sixChange.emit(this.selected);\n } else {\n this.selected = selectedLanguage.key;\n this.sixChange.emit(selectedLanguage.value);\n }\n }\n\n private handleLanguageSwitching = (newLanguage: string, languageValue?: string) => () => {\n if (languageValue !== undefined) {\n this.sixChange.emit(languageValue);\n } else {\n this.sixChange.emit(newLanguage);\n }\n this.selected = newLanguage;\n };\n\n render() {\n return (\n <div part=\"container\" class=\"language-switcher__container\">\n {this.languages.map((lang, index) => {\n const language = typeof lang === 'string' ? lang : lang.key;\n return (\n <div\n onClick={this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)();\n }\n }}\n >\n <span\n part=\"label\"\n tabindex=\"0\"\n class={{\n 'language-switcher__label': true,\n 'language-switcher__label--selected': this.selected === language,\n }}\n >\n {language}\n </span>\n\n {index < this.languages.length - 1 && (\n <span part=\"separator\" class=\"language-switcher__separator\">\n |\n </span>\n )}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAyB,wZAC/B,MAAAC,EAAeD,ECYf,MAAME,EAAoB,CAAC,KAAM,KAAM,M,MAc1BC,EAAmB,M,iFAqCtBC,KAAAC,wBAA0B,CAACC,EAAqBC,IAA2B,KACjF,GAAIA,IAAkBC,UAAW,CAC/BJ,KAAKK,UAAUC,KAAKH,E,KACf,CACLH,KAAKK,UAAUC,KAAKJ,E,CAEtBF,KAAKO,SAAWL,CAAW,E,uCAtC8BJ,C,CAG3D,sBAAAU,CAAuBC,GACrB,IAAKC,MAAMC,QAAQF,GAAW,CAC5B,MAAM,IAAIG,MAAM,uC,CAGlBZ,KAAKa,wB,CAOP,iBAAAC,GACE,GAAId,KAAKO,WAAaH,UAAW,CAC/BJ,KAAKa,wB,EAID,sBAAAA,GACN,MAAME,EAAmBf,KAAKgB,UAAU,GACxC,UAAWD,IAAqB,SAAU,CACxCf,KAAKO,SAAWQ,EAChBf,KAAKK,UAAUC,KAAKN,KAAKO,S,KACpB,CACLP,KAAKO,SAAWQ,EAAiBE,IACjCjB,KAAKK,UAAUC,KAAKS,EAAiBG,M,EAazC,MAAAC,GACE,OACEC,EAAA,OAAAH,IAAA,2CAAKI,KAAK,YAAYC,MAAM,gCACzBtB,KAAKgB,UAAUO,KAAI,CAACC,EAAMC,KACzB,MAAMC,SAAkBF,IAAS,SAAWA,EAAOA,EAAKP,IACxD,OACEG,EAAA,OACEO,QAAS3B,KAAKC,wBAAwByB,SAAiBF,IAAS,SAAWA,EAAOA,EAAKN,OACvFU,UAAYC,IACV,GAAIA,EAAEZ,MAAQ,SAAWY,EAAEZ,MAAQ,IAAK,CACtCjB,KAAKC,wBAAwByB,SAAiBF,IAAS,SAAWA,EAAOA,EAAKN,MAA9ElB,E,IAIJoB,EAAA,QACEC,KAAK,QACLS,SAAS,IACTR,MAAO,CACL,2BAA4B,KAC5B,qCAAsCtB,KAAKO,WAAamB,IAGzDA,GAGFD,EAAQzB,KAAKgB,UAAUe,OAAS,GAC/BX,EAAA,QAAMC,KAAK,YAAYC,MAAM,gCAA8B,KAIzD,I"}
package/dist/ui-library/{p-f8572492.entry.js → p-288da3ba.entry.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{r as t,c as a,h as i,H as s,g as o}from"./p-f93d8a4e.js";const e=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:flex}.tab{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-semibold);color:var(--six-tab-color);padding:var(--six-spacing-medium) var(--six-spacing-large);white-space:nowrap;user-select:none;cursor:pointer;width:100%}.tab:focus{outline:none}.tab:focus-visible{outline:var(--six-focus-ring);outline-offset:calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset))}.tab.tab--active:not(.tab--disabled){color:var(--six-tab-color-active);font-weight:var(--six-font-weight-bold)}.tab.tab--closable{padding-right:var(--six-spacing-small)}.tab.tab--disabled{color:var(--six-tab-color-disabled);cursor:not-allowed}.tab:hover:not(.tab--disabled){color:var(--six-tab-color-hover)}.tab__close-button{font-size:var(--six-font-size-large);margin-left:var(--six-spacing-xx-small)}.tab__close-button::part(base){padding:var(--six-spacing-xxx-small)}.tab__indicator{position:absolute}.tab__indicator.tab__indicator--active{background-color:var(--six-tab-border-color-active)}.tab--top{margin-bottom:var(--six-spacing-xxx-small)}.tab__indicator--top{width:100%;bottom:0;height:var(--six-tab-border-width)}.tab--bottom{margin-top:var(--six-spacing-xxx-small)}.tab__indicator--bottom{width:100%;top:0;height:var(--six-tab-border-width)}.tab--left{margin-right:var(--six-spacing-xxx-small)}.tab__indicator--left{height:100%;right:0;top:0;width:var(--six-tab-border-width)}.tab--right{margin-left:var(--six-spacing-xxx-small)}.tab__indicator--right{height:100%;left:0;top:0;width:var(--six-tab-border-width)}";const r=e;let b=0;const l=class{constructor(i){t(this,i);this.sixClose=a(this,"six-tab-close",7);this.componentId=`tab-${++b}`;this.panel="";this.active=false;this.closable=false;this.disabled=false}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this)}async setFocus(t){var a;(a=this.tab)===null||a===void 0?void 0:a.focus(t)}async removeFocus(){var t;(t=this.tab)===null||t===void 0?void 0:t.blur()}handleCloseClick(){this.sixClose.emit()}render(){var t;const a=this.host.closest("six-tab-group");const o=(t=a===null||a===void 0?void 0:a.placement)!==null&&t!==void 0?t:"top";return i(s,{key:"c5b8229e0f721259a30d70e4756ae4504c915d0f",id:this.host.id||this.componentId},i("div",{key:"2f3b8d1d278020352802f885a859232370cbbcb3",part:"base",ref:t=>this.tab=t,class:{tab:true,"tab--top":o==="top","tab--bottom":o==="bottom","tab--left":o==="left","tab--right":o==="right","tab--active":this.active,"tab--closable":this.closable,"tab--disabled":this.disabled},role:"tab","aria-disabled":this.disabled?"true":"false","aria-selected":this.active?"true":"false",tabindex:this.disabled||!this.active?"-1":"0"},i("slot",{key:"a09a1df3cb8a119d736a200b618e114399fe57c3"}),this.closable&&i("six-icon-button",{name:"close",size:"xSmall",exportparts:"base:close-button",class:"tab__close-button",onClick:this.handleCloseClick,tabIndex:-1,"aria-hidden":"true"})),i("div",{key:"31c108fd748bf326b1dd40a92d2b35eaef7f8c29",class:{tab__indicator:true,"tab__indicator--active":this.active,"tab__indicator--top":o==="top","tab__indicator--bottom":o==="bottom","tab__indicator--left":o==="left","tab__indicator--right":o==="right"}}))}get host(){return o(this)}};l.style=r;export{l as six_tab};
2
- //# sourceMappingURL=p-f8572492.entry.js.map
1
+ import{r as t,c as a,h as i,H as s,g as o}from"./p-f93d8a4e.js";const e=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:flex}.tab{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-semibold);color:var(--six-tab-color);padding:var(--six-spacing-medium) var(--six-spacing-large);white-space:nowrap;user-select:none;cursor:pointer;width:100%}.tab:focus{outline:none}.tab:focus-visible{outline:var(--six-focus-ring);outline-offset:calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset))}.tab.tab--active:not(.tab--disabled){color:var(--six-tab-color-active);font-weight:var(--six-font-weight-bold)}.tab.tab--closable{padding-right:var(--six-spacing-small)}.tab.tab--disabled{color:var(--six-tab-color-disabled);cursor:not-allowed}.tab:hover:not(.tab--disabled){color:var(--six-tab-color-hover)}.tab__close-button{font-size:var(--six-font-size-large);margin-left:var(--six-spacing-xx-small)}.tab__close-button::part(base){padding:var(--six-spacing-xxx-small)}.tab__indicator{position:absolute}.tab__indicator.tab__indicator--active{background-color:var(--six-tab-border-color-active)}.tab--top{margin-bottom:var(--six-spacing-xxx-small)}.tab__indicator--top{width:100%;bottom:0;height:var(--six-tab-border-width)}.tab--bottom{margin-top:var(--six-spacing-xxx-small)}.tab__indicator--bottom{width:100%;top:0;height:var(--six-tab-border-width)}.tab--left{margin-right:var(--six-spacing-xxx-small)}.tab__indicator--left{height:100%;right:0;top:0;width:var(--six-tab-border-width)}.tab--right{margin-left:var(--six-spacing-xxx-small)}.tab__indicator--right{height:100%;left:0;top:0;width:var(--six-tab-border-width)}";const r=e;let b=0;const l=class{constructor(i){t(this,i);this.sixClose=a(this,"six-tab-close",7);this.componentId=`tab-${++b}`;this.panel="";this.active=false;this.closable=false;this.disabled=false}connectedCallback(){this.handleCloseClick=this.handleCloseClick.bind(this)}async setFocus(t){var a;(a=this.tab)===null||a===void 0?void 0:a.focus(t)}async removeFocus(){var t;(t=this.tab)===null||t===void 0?void 0:t.blur()}handleCloseClick(){this.sixClose.emit()}render(){var t;const a=this.host.closest("six-tab-group");const o=(t=a===null||a===void 0?void 0:a.placement)!==null&&t!==void 0?t:"top";return i(s,{key:"c5b8229e0f721259a30d70e4756ae4504c915d0f",id:this.host.id||this.componentId},i("div",{key:"2f3b8d1d278020352802f885a859232370cbbcb3",part:"base",ref:t=>this.tab=t,class:{tab:true,"tab--top":o==="top","tab--bottom":o==="bottom","tab--left":o==="left","tab--right":o==="right","tab--active":this.active,"tab--closable":this.closable,"tab--disabled":this.disabled},role:"tab","aria-disabled":this.disabled?"true":"false","aria-selected":this.active?"true":"false",tabindex:this.disabled||!this.active?"-1":"0"},i("slot",{key:"a09a1df3cb8a119d736a200b618e114399fe57c3"}),this.closable&&i("six-icon-button",{name:"close",size:"xSmall",exportparts:"base:close-button",class:"tab__close-button",onClick:this.handleCloseClick,tabIndex:-1,"aria-hidden":"true"})),i("div",{key:"aa6e7b351ed81d8cba4983512b87b50a8a541a68",part:this.active?"active-tab-indicator":"",class:{tab__indicator:true,"tab__indicator--active":this.active,"tab__indicator--top":o==="top","tab__indicator--bottom":o==="bottom","tab__indicator--left":o==="left","tab__indicator--right":o==="right"}}))}get host(){return o(this)}};l.style=r;export{l as six_tab};
2
+ //# sourceMappingURL=p-288da3ba.entry.js.map
package/dist/ui-library/{p-f8572492.entry.js.map → p-288da3ba.entry.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"names":["sixTabCss","SixTabStyle0","id","SixTab","this","componentId","connectedCallback","handleCloseClick","bind","setFocus","options","_a","tab","focus","removeFocus","blur","sixClose","emit","render","tabGroup","host","closest","placement","h","Host","key","part","ref","el","class","active","closable","disabled","role","tabindex","name","size","exportparts","onClick","tabIndex","tab__indicator"],"sources":["src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: flex;\n}\n\n.tab {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-font-size-small);\n font-weight: var(--six-font-weight-semibold);\n color: var(--six-tab-color);\n padding: var(--six-spacing-medium) var(--six-spacing-large);\n white-space: nowrap;\n user-select: none;\n cursor: pointer;\n width: 100%;\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset));\n }\n\n &.tab--active:not(.tab--disabled) {\n color: var(--six-tab-color-active);\n font-weight: var(--six-font-weight-bold);\n }\n\n &.tab--closable {\n padding-right: var(--six-spacing-small);\n }\n\n &.tab--disabled {\n color: var(--six-tab-color-disabled);\n cursor: not-allowed;\n }\n\n &:hover:not(.tab--disabled) {\n color: var(--six-tab-color-hover);\n }\n}\n\n.tab__close-button {\n font-size: var(--six-font-size-large);\n margin-left: var(--six-spacing-xx-small);\n\n &::part(base) {\n padding: var(--six-spacing-xxx-small);\n }\n}\n\n// TAB INDICATOR\n.tab__indicator {\n position: absolute;\n &.tab__indicator--active {\n background-color: var(--six-tab-border-color-active);\n }\n}\n\n// TOP\n.tab--top {\n margin-bottom: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--top {\n width: 100%;\n bottom: 0;\n height: var(--six-tab-border-width);\n}\n\n// BOTTOM\n.tab--bottom {\n margin-top: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--bottom {\n width: 100%;\n top: 0;\n height: var(--six-tab-border-width);\n}\n\n// LEFT\n.tab--left {\n margin-right: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--left {\n height: 100%;\n right: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n\n// RIGHT\n.tab--right {\n margin-left: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--right {\n height: 100%;\n left: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n tag: 'six-tab',\n styleUrl: 'six-tab.scss',\n shadow: true,\n})\nexport class SixTab {\n private componentId = `tab-${++id}`;\n private tab?: HTMLElement;\n\n @Element() host!: HTMLSixTabElement;\n\n /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n @Prop({ reflect: true }) panel = '';\n\n /** Set to true to draw the tab in an active state. */\n @Prop({ reflect: true }) active = false;\n\n /** When true, the tab will be rendered with a close icon. */\n @Prop() closable = false;\n\n /** Set to true to draw the tab in a disabled state. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Emitted when the tab is closable and the close button is activated. */\n @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.handleCloseClick = this.handleCloseClick.bind(this);\n }\n\n /** Sets focus to the tab. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.tab?.focus(options);\n }\n\n /** Removes focus from the tab. */\n @Method()\n async removeFocus() {\n this.tab?.blur();\n }\n\n private handleCloseClick() {\n this.sixClose.emit();\n }\n\n render() {\n const tabGroup: HTMLSixTabGroupElement | null = this.host.closest('six-tab-group');\n const placement = tabGroup?.placement ?? 'top';\n return (\n // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n <Host id={this.host.id || this.componentId}>\n <div\n part=\"base\"\n ref={(el) => (this.tab = el)}\n class={{\n tab: true,\n\n // Placements\n 'tab--top': placement === 'top',\n 'tab--bottom': placement === 'bottom',\n 'tab--left': placement === 'left',\n 'tab--right': placement === 'right',\n\n // States\n 'tab--active': this.active,\n 'tab--closable': this.closable,\n 'tab--disabled': this.disabled,\n }}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.disabled || !this.active ? '-1' : '0'}\n >\n <slot />\n {this.closable && (\n <six-icon-button\n name=\"close\"\n size=\"xSmall\"\n exportparts=\"base:close-button\"\n class=\"tab__close-button\"\n onClick={this.handleCloseClick}\n tabIndex={-1}\n aria-hidden=\"true\"\n />\n )}\n </div>\n <div\n class={{\n tab__indicator: true,\n 'tab__indicator--active': this.active,\n\n // Placements\n 'tab__indicator--top': placement === 'top',\n 'tab__indicator--bottom': placement === 'bottom',\n 'tab__indicator--left': placement === 'left',\n 'tab__indicator--right': placement === 'right',\n }}\n ></div>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,qrDAClB,MAAAC,EAAeD,ECEf,IAAIE,EAAK,E,MAmBIC,EAAM,M,iEACTC,KAAAC,YAAc,SAASH,I,WAME,G,YAGC,M,cAGf,M,cAGiB,K,CAKpC,iBAAAI,GACEF,KAAKG,iBAAmBH,KAAKG,iBAAiBC,KAAKJ,K,CAKrD,cAAMK,CAASC,G,OACbC,EAAAP,KAAKQ,OAAG,MAAAD,SAAA,SAAAA,EAAEE,MAAMH,E,CAKlB,iBAAMI,G,OACJH,EAAAP,KAAKQ,OAAG,MAAAD,SAAA,SAAAA,EAAEI,M,CAGJ,gBAAAR,GACNH,KAAKY,SAASC,M,CAGhB,MAAAC,G,MACE,MAAMC,EAA0Cf,KAAKgB,KAAKC,QAAQ,iBAClE,MAAMC,GAAYX,EAAAQ,IAAQ,MAARA,SAAQ,SAARA,EAAUG,aAAS,MAAAX,SAAA,EAAAA,EAAI,MACzC,OAEEY,EAACC,EAAI,CAAAC,IAAA,2CAACvB,GAAIE,KAAKgB,KAAKlB,IAAME,KAAKC,aAC7BkB,EAAA,OAAAE,IAAA,2CACEC,KAAK,OACLC,IAAMC,GAAQxB,KAAKQ,IAAMgB,EACzBC,MAAO,CACLjB,IAAK,KAGL,WAAYU,IAAc,MAC1B,cAAeA,IAAc,SAC7B,YAAaA,IAAc,OAC3B,aAAcA,IAAc,QAG5B,cAAelB,KAAK0B,OACpB,gBAAiB1B,KAAK2B,SACtB,gBAAiB3B,KAAK4B,UAExBC,KAAK,MAAK,gBACK7B,KAAK4B,SAAW,OAAS,QAAO,gBAChC5B,KAAK0B,OAAS,OAAS,QACtCI,SAAU9B,KAAK4B,WAAa5B,KAAK0B,OAAS,KAAO,KAEjDP,EAAA,QAAAE,IAAA,6CACCrB,KAAK2B,UACJR,EAAA,mBACEY,KAAK,QACLC,KAAK,SACLC,YAAY,oBACZR,MAAM,oBACNS,QAASlC,KAAKG,iBACdgC,UAAW,EAAC,cACA,UAIlBhB,EAAA,OAAAE,IAAA,2CACEI,MAAO,CACLW,eAAgB,KAChB,yBAA0BpC,KAAK0B,OAG/B,sBAAuBR,IAAc,MACrC,yBAA0BA,IAAc,SACxC,uBAAwBA,IAAc,OACtC,wBAAyBA,IAAc,W"}
1
+ {"version":3,"names":["sixTabCss","SixTabStyle0","id","SixTab","this","componentId","connectedCallback","handleCloseClick","bind","setFocus","options","_a","tab","focus","removeFocus","blur","sixClose","emit","render","tabGroup","host","closest","placement","h","Host","key","part","ref","el","class","active","closable","disabled","role","tabindex","name","size","exportparts","onClick","tabIndex","tab__indicator"],"sources":["src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: flex;\n}\n\n.tab {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-font-size-small);\n font-weight: var(--six-font-weight-semibold);\n color: var(--six-tab-color);\n padding: var(--six-spacing-medium) var(--six-spacing-large);\n white-space: nowrap;\n user-select: none;\n cursor: pointer;\n width: 100%;\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset));\n }\n\n &.tab--active:not(.tab--disabled) {\n color: var(--six-tab-color-active);\n font-weight: var(--six-font-weight-bold);\n }\n\n &.tab--closable {\n padding-right: var(--six-spacing-small);\n }\n\n &.tab--disabled {\n color: var(--six-tab-color-disabled);\n cursor: not-allowed;\n }\n\n &:hover:not(.tab--disabled) {\n color: var(--six-tab-color-hover);\n }\n}\n\n.tab__close-button {\n font-size: var(--six-font-size-large);\n margin-left: var(--six-spacing-xx-small);\n\n &::part(base) {\n padding: var(--six-spacing-xxx-small);\n }\n}\n\n// TAB INDICATOR\n.tab__indicator {\n position: absolute;\n &.tab__indicator--active {\n background-color: var(--six-tab-border-color-active);\n }\n}\n\n// TOP\n.tab--top {\n margin-bottom: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--top {\n width: 100%;\n bottom: 0;\n height: var(--six-tab-border-width);\n}\n\n// BOTTOM\n.tab--bottom {\n margin-top: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--bottom {\n width: 100%;\n top: 0;\n height: var(--six-tab-border-width);\n}\n\n// LEFT\n.tab--left {\n margin-right: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--left {\n height: 100%;\n right: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n\n// RIGHT\n.tab--right {\n margin-left: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--right {\n height: 100%;\n left: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n tag: 'six-tab',\n styleUrl: 'six-tab.scss',\n shadow: true,\n})\nexport class SixTab {\n private componentId = `tab-${++id}`;\n private tab?: HTMLElement;\n\n @Element() host!: HTMLSixTabElement;\n\n /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n @Prop({ reflect: true }) panel = '';\n\n /** Set to true to draw the tab in an active state. */\n @Prop({ reflect: true }) active = false;\n\n /** When true, the tab will be rendered with a close icon. */\n @Prop() closable = false;\n\n /** Set to true to draw the tab in a disabled state. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Emitted when the tab is closable and the close button is activated. */\n @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.handleCloseClick = this.handleCloseClick.bind(this);\n }\n\n /** Sets focus to the tab. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.tab?.focus(options);\n }\n\n /** Removes focus from the tab. */\n @Method()\n async removeFocus() {\n this.tab?.blur();\n }\n\n private handleCloseClick() {\n this.sixClose.emit();\n }\n\n render() {\n const tabGroup: HTMLSixTabGroupElement | null = this.host.closest('six-tab-group');\n const placement = tabGroup?.placement ?? 'top';\n return (\n // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n <Host id={this.host.id || this.componentId}>\n <div\n part=\"base\"\n ref={(el) => (this.tab = el)}\n class={{\n tab: true,\n\n // Placements\n 'tab--top': placement === 'top',\n 'tab--bottom': placement === 'bottom',\n 'tab--left': placement === 'left',\n 'tab--right': placement === 'right',\n\n // States\n 'tab--active': this.active,\n 'tab--closable': this.closable,\n 'tab--disabled': this.disabled,\n }}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.disabled || !this.active ? '-1' : '0'}\n >\n <slot />\n {this.closable && (\n <six-icon-button\n name=\"close\"\n size=\"xSmall\"\n exportparts=\"base:close-button\"\n class=\"tab__close-button\"\n onClick={this.handleCloseClick}\n tabIndex={-1}\n aria-hidden=\"true\"\n />\n )}\n </div>\n <div\n part={this.active ? 'active-tab-indicator' : ''}\n class={{\n tab__indicator: true,\n 'tab__indicator--active': this.active,\n\n // Placements\n 'tab__indicator--top': placement === 'top',\n 'tab__indicator--bottom': placement === 'bottom',\n 'tab__indicator--left': placement === 'left',\n 'tab__indicator--right': placement === 'right',\n }}\n ></div>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,qrDAClB,MAAAC,EAAeD,ECEf,IAAIE,EAAK,E,MAmBIC,EAAM,M,iEACTC,KAAAC,YAAc,SAASH,I,WAME,G,YAGC,M,cAGf,M,cAGiB,K,CAKpC,iBAAAI,GACEF,KAAKG,iBAAmBH,KAAKG,iBAAiBC,KAAKJ,K,CAKrD,cAAMK,CAASC,G,OACbC,EAAAP,KAAKQ,OAAG,MAAAD,SAAA,SAAAA,EAAEE,MAAMH,E,CAKlB,iBAAMI,G,OACJH,EAAAP,KAAKQ,OAAG,MAAAD,SAAA,SAAAA,EAAEI,M,CAGJ,gBAAAR,GACNH,KAAKY,SAASC,M,CAGhB,MAAAC,G,MACE,MAAMC,EAA0Cf,KAAKgB,KAAKC,QAAQ,iBAClE,MAAMC,GAAYX,EAAAQ,IAAQ,MAARA,SAAQ,SAARA,EAAUG,aAAS,MAAAX,SAAA,EAAAA,EAAI,MACzC,OAEEY,EAACC,EAAI,CAAAC,IAAA,2CAACvB,GAAIE,KAAKgB,KAAKlB,IAAME,KAAKC,aAC7BkB,EAAA,OAAAE,IAAA,2CACEC,KAAK,OACLC,IAAMC,GAAQxB,KAAKQ,IAAMgB,EACzBC,MAAO,CACLjB,IAAK,KAGL,WAAYU,IAAc,MAC1B,cAAeA,IAAc,SAC7B,YAAaA,IAAc,OAC3B,aAAcA,IAAc,QAG5B,cAAelB,KAAK0B,OACpB,gBAAiB1B,KAAK2B,SACtB,gBAAiB3B,KAAK4B,UAExBC,KAAK,MAAK,gBACK7B,KAAK4B,SAAW,OAAS,QAAO,gBAChC5B,KAAK0B,OAAS,OAAS,QACtCI,SAAU9B,KAAK4B,WAAa5B,KAAK0B,OAAS,KAAO,KAEjDP,EAAA,QAAAE,IAAA,6CACCrB,KAAK2B,UACJR,EAAA,mBACEY,KAAK,QACLC,KAAK,SACLC,YAAY,oBACZR,MAAM,oBACNS,QAASlC,KAAKG,iBACdgC,UAAW,EAAC,cACA,UAIlBhB,EAAA,OAAAE,IAAA,2CACEC,KAAMtB,KAAK0B,OAAS,uBAAyB,GAC7CD,MAAO,CACLW,eAAgB,KAChB,yBAA0BpC,KAAK0B,OAG/B,sBAAuBR,IAAc,MACrC,yBAA0BA,IAAc,SACxC,uBAAwBA,IAAc,OACtC,wBAAyBA,IAAc,W"}
package/dist/ui-library/ui-library.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,b as a}from"./p-f93d8a4e.js";export{s as setNonce}from"./p-f93d8a4e.js";import{g as l}from"./p-e1255160.js";const t=()=>{const a=import.meta.url;const l={};if(a!==""){l.resourcesUrl=new URL(".",a).href}return e(l)};t().then((async e=>{await l();return a(JSON.parse('[["p-4af73ea9",[[1,"six-select",{"multiple":[4],"selectAllButton":[4,"select-all-button"],"selectAllText":[1,"select-all-text"],"maxTagsVisible":[2,"max-tags-visible"],"disabled":[4],"name":[1],"placeholder":[1],"filterPlaceholder":[1,"filter-placeholder"],"filterDebounce":[2,"filter-debounce"],"size":[1],"hoist":[4],"value":[1025],"pill":[4],"helpText":[1,"help-text"],"required":[4],"clearable":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"line":[4],"filter":[4],"asyncFilter":[4,"async-filter"],"autocomplete":[4],"inputDebounce":[2,"input-debounce"],"options":[16],"virtualScroll":[4,"virtual-scroll"],"hasFocus":[32],"hasHelpTextSlot":[32],"hasLabelSlot":[32],"hasErrorTextSlot":[32],"isOpen":[32],"displayedValues":[32],"selectionContainerItems":[32],"setFocus":[64]},null,{"disabled":["handleDisabledChange"],"helpText":["handleLabelChange"],"errorText":["handleLabelChange"],"label":["handleLabelChange"],"multiple":["handleMultipleChange"],"value":["handleValueChange"]}]]],["p-f1bb5648",[[1,"six-header",{"shiftContent":[4,"shift-content"],"hideHamburgerMenu":[4,"hide-hamburger-menu"],"openHamburgerMenu":[4,"open-hamburger-menu"],"openSearch":[4,"open-search"],"clickableLogo":[4,"clickable-logo"],"selectedApp":[32],"selectedSection":[32],"setSearchOpenState":[64],"getIsSearchOpen":[64]},null,{"openSearch":["handleOpenSearchChange"]}]]],["p-756f4acf",[[1,"six-datepicker",{"type":[1],"locale":[1],"open":[1540],"inline":[516],"readonly":[4],"disabled":[4],"allowedDates":[16],"min":[16],"max":[16],"closeOnSelect":[4,"close-on-select"],"placement":[1],"size":[1],"required":[4],"defaultDate":[1,"default-date"],"placeholder":[1],"value":[1040],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"containingElement":[16],"dateFormat":[1,"date-format"],"debounce":[2],"name":[513],"clearable":[4],"iconPosition":[1,"icon-position"],"hoist":[4],"pointerDate":[32],"selectionMode":[32],"isDropDownContentUp":[32],"setFocus":[64],"select":[64]},[[9,"resize","resizeHandler"],[9,"scroll","scrollHandler"]],{"debounce":["debounceChanged"],"value":["valueChanged"]}]]],["p-6c96b62e",[[1,"six-search-field",{"placeholder":[1],"debounce":[514],"disabled":[516],"value":[513],"clearable":[4]},null,{"value":["handleValueChange"]}]]],["p-d717a2f2",[[1,"six-tag",{"type":[513],"size":[513],"pill":[516],"clearable":[516]}]]],["p-3e9324c8",[[1,"six-tile",{"label":[1],"iconName":[1,"icon-name"],"closeable":[4],"elevated":[4],"disableTooltip":[4,"disable-tooltip"],"disabled":[516],"size":[513],"visible":[32],"hasIconSlot":[32],"hasLabelSlot":[32],"hide":[64],"show":[64]}]]],["p-e43e5e45",[[1,"six-alert",{"open":[1540],"closable":[516],"type":[513],"duration":[2],"isVisible":[32],"show":[64],"hide":[64],"toast":[64]},null,{"open":["handleOpenChange"],"duration":["handleDurationChange"]}]]],["p-d55db23a",[[1,"six-dialog",{"open":[1540],"label":[1],"noHeader":[4,"no-header"],"hasFooter":[32],"isVisible":[32],"show":[64],"hide":[64]},null,{"open":["handleOpenChange"]}]]],["p-c948cf70",[[1,"six-drawer",{"open":[1540],"label":[1],"placement":[1],"contained":[4],"noHeader":[4,"no-header"],"hasFooter":[32],"isVisible":[32],"show":[64],"hide":[64]},null,{"open":["handleOpenChange"]}]]],["p-19ca3bd1",[[2,"six-file-upload",{"compact":[4],"label":[1],"disabled":[4],"accept":[1],"multiple":[4],"maxFileSize":[2,"max-file-size"],"uploading":[516],"isOver":[32]},[[1,"dragenter","dragenterHandler"],[1,"dragover","dragoverHandler"],[1,"dragleave","dragleaveHandler"],[1,"drop","dropHandler"]]]]],["p-e3766acb",[[1,"six-root",{"padded":[4],"stage":[1],"version":[1]}]]],["p-ab8f9503",[[1,"six-sidebar-item-group",{"name":[1],"icon":[1],"value":[513],"open":[516],"summaryIcon":[1,"summary-icon"],"href":[513],"hasItems":[32],"summaryIconHasContent":[32]}]]],["p-f8572492",[[1,"six-tab",{"panel":[513],"active":[516],"closable":[4],"disabled":[516],"setFocus":[64],"removeFocus":[64]}]]],["p-803915da",[[1,"six-tab-group",{"placement":[1],"noScrollControls":[4,"no-scroll-controls"],"hasLeftControl":[32],"hasRightControl":[32],"show":[64]},null,{"noScrollControls":["handleNoScrollControlsChange"]}]]],["p-29b75db4",[[1,"six-avatar",{"image":[1],"alt":[1],"initials":[1],"shape":[1],"hasError":[32]}]]],["p-52c04973",[[1,"six-error-page",{"errorCode":[2,"error-code"],"language":[1],"customTitle":[1,"custom-title"],"customDescription":[16],"customIcon":[1,"custom-icon"]}]]],["p-3827f9e0",[[1,"six-file-list-item",{"identifier":[513],"name":[513],"date":[513],"size":[514],"nodownload":[516],"nodelete":[516]}]]],["p-8f307b55",[[1,"six-group-label",{"size":[513],"label":[1],"helpText":[1,"help-text"],"disabled":[516],"required":[4],"hasHelpTextSlot":[32],"hasLabelSlot":[32]},null,{"helpText":["handleLabelChange"],"label":["handleLabelChange"]}]]],["p-7a722a13",[[1,"six-range",{"name":[1],"value":[1026],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"min":[2],"max":[2],"step":[2],"tooltip":[1],"tooltipFormatter":[16],"hasFocus":[32],"hasHelpTextSlot":[32],"hasErrorTextSlot":[32],"hasLabelSlot":[32],"hasTooltip":[32],"setFocus":[64],"removeFocus":[64]},null,{"label":["handleLabelChange"],"errorText":["handleLabelChange"],"helpText":["handleLabelChange"],"value":["handleValueChange"],"min":["handleValueChange"],"max":["handleValueChange"]}]]],["p-8644f970",[[1,"six-switch",{"name":[1],"value":[1],"disabled":[4],"required":[4],"checked":[1540],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"hasFocus":[32],"hasErrorTextSlot":[32],"setFocus":[64],"removeFocus":[64]},null,{"checked":["handleCheckedChange"],"errorText":["handleLabelChange"],"label":["handleLabelChange"]}]]],["p-19a1d34c",[[1,"six-textarea",{"size":[513],"name":[513],"value":[1537],"helpText":[1,"help-text"],"placeholder":[1],"rows":[2],"resize":[1],"disabled":[516],"readonly":[516],"minlength":[514],"maxlength":[514],"required":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"autocapitalize":[1],"autocorrect":[1],"autocomplete":[1],"autofocus":[4],"spellcheck":[4],"inputmode":[1],"hasFocus":[32],"hasHelpTextSlot":[32],"hasLabelSlot":[32],"hasErrorTextSlot":[32],"setFocus":[64],"removeFocus":[64],"select":[64],"setSelectionRange":[64],"setRangeText":[64]},null,{"helpText":["handleLabelChange"],"errorText":["handleLabelChange"],"label":["handleLabelChange"],"rows":["handleRowsChange"],"value":["handleValueChange"]}]]],["p-7fc0bf6b",[[1,"six-badge",{"type":[1],"pill":[4],"pulse":[4]}]]],["p-ba7424b3",[[1,"six-card"]]],["p-1f1224ae",[[1,"six-file-list"]]],["p-a2b8aca7",[[1,"six-footer"]]],["p-be0c0ec9",[[1,"six-language-switcher",{"selected":[1537],"languages":[16]},null,{"languages":["handleChangesLanguages"]}]]],["p-3eed2287",[[1,"six-layout-grid",{"columns":[1026]},null,{"columns":["handleColumnsChange"]}]]],["p-0a094514",[[1,"six-main-container",{"padded":[4]}]]],["p-9426a37b",[[1,"six-menu-divider"]]],["p-93ab2efc",[[1,"six-menu-label"]]],["p-8938e9bd",[[1,"six-progress-bar",{"percentage":[2],"indeterminate":[4]}]]],["p-80476b0f",[[1,"six-progress-ring",{"size":[2],"strokeWidth":[2,"stroke-width"],"percentage":[2]},null,{"percentage":["handlePercentageChange"]}]]],["p-38a9a590",[[1,"six-radio",{"name":[1],"value":[513],"disabled":[4],"checked":[1540],"invalid":[516],"hasFocus":[32],"setFocus":[64],"removeFocus":[64]},null,{"checked":["handleCheckedChange"],"name":["handleNameChange"]}]]],["p-acc487ec",[[1,"six-sidebar",{"position":[1],"open":[1540],"width":[1],"toggled":[4],"isVisible":[32],"toggle":[64],"show":[64],"hide":[64],"selectItemByIndex":[64],"selectItemByName":[64]},null,{"open":["handleOpenChange"]}]]],["p-45960b56",[[1,"six-sidebar-item",{"value":[513],"selected":[516],"disabled":[516],"href":[513]}]]],["p-d7739200",[[1,"six-tab-panel",{"name":[1],"active":[516]}]]],["p-8dff4dcb",[[1,"six-error"]]],["p-a2a6aaea",[[1,"six-icon",{"size":[513],"filled":[4]}]]],["p-7562d5f5",[[1,"six-timepicker",{"format":[1],"separator":[1],"value":[1025],"open":[1540],"inline":[516],"readonly":[4],"disabled":[4],"placement":[1],"size":[1],"required":[4],"placeholder":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"label":[1],"invalid":[516],"name":[513],"clearable":[4],"iconPosition":[1,"icon-position"],"hoist":[4],"timeout":[2],"interval":[2],"defaultTime":[1,"default-time"],"debounce":[2],"isPopupContentUp":[32],"isDropDownContentUp":[32],"popupValue":[32],"setFocus":[64]},[[9,"resize","resizeHandler"],[9,"scroll","scrollHandler"]],{"value":["valueChanged"]}]]],["p-338205f4",[[1,"six-button",{"type":[513],"size":[513],"caret":[4],"disabled":[516],"loading":[516],"pill":[516],"circle":[516],"submit":[516],"reset":[516],"name":[1],"value":[1],"href":[1],"target":[1],"download":[1],"hasFocus":[32],"hasLabel":[32],"hasPrefix":[32],"hasSuffix":[32],"setFocus":[64],"removeFocus":[64]}]]],["p-21002de1",[[1,"six-details",{"open":[1540],"summary":[1],"summaryIcon":[1,"summary-icon"],"summaryIconSize":[513,"summary-icon-size"],"disabled":[4],"inline":[4],"selectableEmpty":[4,"selectable-empty"],"hasContent":[4,"has-content"],"animateSummaryIcon":[32],"show":[64],"hide":[64]},null,{"open":["handleOpenChange"]}]]],["p-03900e17",[[1,"six-stage-indicator",{"stage":[1]}]]],["p-7a9dcb16",[[1,"six-picto",{"size":[1]}]]],["p-724d0458",[[1,"six-item-picker",{"value":[1544],"type":[1],"min":[1544],"max":[1544],"roundtrip":[516],"step":[514],"items":[16],"padded":[4],"paddingLength":[2,"padding-length"],"paddingChar":[1,"padding-char"],"paddingDirection":[1,"padding-direction"],"timeout":[2],"interval":[2],"debounce":[2],"_items":[32],"_itemIndexes":[32]},null,{"value":["handleValueChange"],"debounce":["debounceChanged"],"items":["handleSetChange"]}]]],["p-49e5d8bb",[[1,"six-tooltip",{"content":[1],"placement":[1],"disabled":[4],"distance":[2],"open":[1540],"skidding":[2],"trigger":[1],"show":[64],"hide":[64]},null,{"open":["handleOpenChange"]}]]],["p-5f810571",[[1,"six-spinner",{"six":[4]}]]],["p-50dbe99f",[[1,"six-input",{"type":[513],"size":[513],"name":[513],"value":[1537],"pill":[516],"helpText":[1,"help-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"minlength":[514],"maxlength":[514],"min":[514],"max":[514],"step":[514],"pattern":[513],"dropdownSearch":[4,"dropdown-search"],"required":[4],"autocapitalize":[1],"autocorrect":[1],"autocomplete":[1],"autofocus":[4],"spellcheck":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"clearable":[4],"togglePassword":[4,"toggle-password"],"inputmode":[1],"line":[4],"hasFocus":[32],"hasHelpTextSlot":[32],"hasLabelSlot":[32],"hasErrorSlot":[32],"isPasswordVisible":[32],"setFocus":[64],"removeFocus":[64],"select":[64],"setSelectionRange":[64],"setRangeText":[64]},null,{"helpText":["handleLabelChange"],"errorText":["handleLabelChange"],"label":["handleLabelChange"],"value":["handleValueChange"]}]]],["p-7c2255b5",[[1,"six-menu-item",{"checkType":[1,"check-type"],"checked":[516],"value":[513],"disabled":[516],"hasFocus":[32],"active":[32],"setFocus":[64],"removeFocus":[64],"getTextLabel":[64]}],[1,"six-checkbox",{"name":[1],"value":[1],"disabled":[4],"required":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"checked":[1540],"indeterminate":[1540],"hasFocus":[32],"hasLabelSlot":[32],"hasErrorSlot":[32],"setFocus":[64],"removeFocus":[64]},null,{"checked":["handleCheckedChange"],"indeterminate":["handleCheckedChange"],"errorText":["handleLabelChange"],"label":["handleLabelChange"]}]]],["p-e798314b",[[1,"six-dropdown",{"open":[1540],"placement":[1],"closeOnSelect":[4,"close-on-select"],"distance":[2],"skidding":[2],"hoist":[4],"containingElement":[16],"filter":[4],"asyncFilter":[4,"async-filter"],"filterPlaceholder":[1,"filter-placeholder"],"autofocusFilter":[4,"autofocus-filter"],"filterDebounce":[1026,"filter-debounce"],"disableHideOnEnterAndSpace":[4,"disable-hide-on-enter-and-space"],"options":[1040],"virtualScroll":[4,"virtual-scroll"],"matchTriggerWidth":[4,"match-trigger-width"],"renderedOptions":[32],"show":[64],"hide":[64],"reposition":[64]},null,{"open":["handleOpenChange"],"distance":["handlePopoverOptionsChange"],"hoist":["handlePopoverOptionsChange"],"placement":["handlePopoverOptionsChange"],"skidding":["handlePopoverOptionsChange"],"options":["handleOptionsChange"],"virtualScroll":["handleOptionsChange"]}],[1,"six-menu",{"removeBoxShadow":[4,"remove-box-shadow"],"items":[16],"itemsShown":[2,"items-shown"],"virtualScroll":[4,"virtual-scroll"],"itemSize":[2,"item-size"],"scrollingDebounce":[2,"scrolling-debounce"],"disableKeyboardHandling":[4,"disable-keyboard-handling"],"scrollingIndex":[32],"sixMenuItemHeight":[32],"typeToSelect":[64]}]]],["p-01853739",[[1,"six-icon-button",{"name":[513],"size":[513],"label":[513],"disabled":[516],"html":[513]}]]]]'),e)}));
1
+ import{p as e,b as a}from"./p-f93d8a4e.js";export{s as setNonce}from"./p-f93d8a4e.js";import{g as l}from"./p-e1255160.js";const t=()=>{const a=import.meta.url;const l={};if(a!==""){l.resourcesUrl=new URL(".",a).href}return e(l)};t().then((async e=>{await l();return a(JSON.parse('[["p-4af73ea9",[[1,"six-select",{"multiple":[4],"selectAllButton":[4,"select-all-button"],"selectAllText":[1,"select-all-text"],"maxTagsVisible":[2,"max-tags-visible"],"disabled":[4],"name":[1],"placeholder":[1],"filterPlaceholder":[1,"filter-placeholder"],"filterDebounce":[2,"filter-debounce"],"size":[1],"hoist":[4],"value":[1025],"pill":[4],"helpText":[1,"help-text"],"required":[4],"clearable":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"line":[4],"filter":[4],"asyncFilter":[4,"async-filter"],"autocomplete":[4],"inputDebounce":[2,"input-debounce"],"options":[16],"virtualScroll":[4,"virtual-scroll"],"hasFocus":[32],"hasHelpTextSlot":[32],"hasLabelSlot":[32],"hasErrorTextSlot":[32],"isOpen":[32],"displayedValues":[32],"selectionContainerItems":[32],"setFocus":[64]},null,{"disabled":["handleDisabledChange"],"helpText":["handleLabelChange"],"errorText":["handleLabelChange"],"label":["handleLabelChange"],"multiple":["handleMultipleChange"],"value":["handleValueChange"]}]]],["p-f1bb5648",[[1,"six-header",{"shiftContent":[4,"shift-content"],"hideHamburgerMenu":[4,"hide-hamburger-menu"],"openHamburgerMenu":[4,"open-hamburger-menu"],"openSearch":[4,"open-search"],"clickableLogo":[4,"clickable-logo"],"selectedApp":[32],"selectedSection":[32],"setSearchOpenState":[64],"getIsSearchOpen":[64]},null,{"openSearch":["handleOpenSearchChange"]}]]],["p-756f4acf",[[1,"six-datepicker",{"type":[1],"locale":[1],"open":[1540],"inline":[516],"readonly":[4],"disabled":[4],"allowedDates":[16],"min":[16],"max":[16],"closeOnSelect":[4,"close-on-select"],"placement":[1],"size":[1],"required":[4],"defaultDate":[1,"default-date"],"placeholder":[1],"value":[1040],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"containingElement":[16],"dateFormat":[1,"date-format"],"debounce":[2],"name":[513],"clearable":[4],"iconPosition":[1,"icon-position"],"hoist":[4],"pointerDate":[32],"selectionMode":[32],"isDropDownContentUp":[32],"setFocus":[64],"select":[64]},[[9,"resize","resizeHandler"],[9,"scroll","scrollHandler"]],{"debounce":["debounceChanged"],"value":["valueChanged"]}]]],["p-6c96b62e",[[1,"six-search-field",{"placeholder":[1],"debounce":[514],"disabled":[516],"value":[513],"clearable":[4]},null,{"value":["handleValueChange"]}]]],["p-d717a2f2",[[1,"six-tag",{"type":[513],"size":[513],"pill":[516],"clearable":[516]}]]],["p-3e9324c8",[[1,"six-tile",{"label":[1],"iconName":[1,"icon-name"],"closeable":[4],"elevated":[4],"disableTooltip":[4,"disable-tooltip"],"disabled":[516],"size":[513],"visible":[32],"hasIconSlot":[32],"hasLabelSlot":[32],"hide":[64],"show":[64]}]]],["p-e43e5e45",[[1,"six-alert",{"open":[1540],"closable":[516],"type":[513],"duration":[2],"isVisible":[32],"show":[64],"hide":[64],"toast":[64]},null,{"open":["handleOpenChange"],"duration":["handleDurationChange"]}]]],["p-d55db23a",[[1,"six-dialog",{"open":[1540],"label":[1],"noHeader":[4,"no-header"],"hasFooter":[32],"isVisible":[32],"show":[64],"hide":[64]},null,{"open":["handleOpenChange"]}]]],["p-c948cf70",[[1,"six-drawer",{"open":[1540],"label":[1],"placement":[1],"contained":[4],"noHeader":[4,"no-header"],"hasFooter":[32],"isVisible":[32],"show":[64],"hide":[64]},null,{"open":["handleOpenChange"]}]]],["p-19ca3bd1",[[2,"six-file-upload",{"compact":[4],"label":[1],"disabled":[4],"accept":[1],"multiple":[4],"maxFileSize":[2,"max-file-size"],"uploading":[516],"isOver":[32]},[[1,"dragenter","dragenterHandler"],[1,"dragover","dragoverHandler"],[1,"dragleave","dragleaveHandler"],[1,"drop","dropHandler"]]]]],["p-e3766acb",[[1,"six-root",{"padded":[4],"stage":[1],"version":[1]}]]],["p-ab8f9503",[[1,"six-sidebar-item-group",{"name":[1],"icon":[1],"value":[513],"open":[516],"summaryIcon":[1,"summary-icon"],"href":[513],"hasItems":[32],"summaryIconHasContent":[32]}]]],["p-288da3ba",[[1,"six-tab",{"panel":[513],"active":[516],"closable":[4],"disabled":[516],"setFocus":[64],"removeFocus":[64]}]]],["p-803915da",[[1,"six-tab-group",{"placement":[1],"noScrollControls":[4,"no-scroll-controls"],"hasLeftControl":[32],"hasRightControl":[32],"show":[64]},null,{"noScrollControls":["handleNoScrollControlsChange"]}]]],["p-29b75db4",[[1,"six-avatar",{"image":[1],"alt":[1],"initials":[1],"shape":[1],"hasError":[32]}]]],["p-52c04973",[[1,"six-error-page",{"errorCode":[2,"error-code"],"language":[1],"customTitle":[1,"custom-title"],"customDescription":[16],"customIcon":[1,"custom-icon"]}]]],["p-3827f9e0",[[1,"six-file-list-item",{"identifier":[513],"name":[513],"date":[513],"size":[514],"nodownload":[516],"nodelete":[516]}]]],["p-8f307b55",[[1,"six-group-label",{"size":[513],"label":[1],"helpText":[1,"help-text"],"disabled":[516],"required":[4],"hasHelpTextSlot":[32],"hasLabelSlot":[32]},null,{"helpText":["handleLabelChange"],"label":["handleLabelChange"]}]]],["p-7a722a13",[[1,"six-range",{"name":[1],"value":[1026],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"min":[2],"max":[2],"step":[2],"tooltip":[1],"tooltipFormatter":[16],"hasFocus":[32],"hasHelpTextSlot":[32],"hasErrorTextSlot":[32],"hasLabelSlot":[32],"hasTooltip":[32],"setFocus":[64],"removeFocus":[64]},null,{"label":["handleLabelChange"],"errorText":["handleLabelChange"],"helpText":["handleLabelChange"],"value":["handleValueChange"],"min":["handleValueChange"],"max":["handleValueChange"]}]]],["p-8644f970",[[1,"six-switch",{"name":[1],"value":[1],"disabled":[4],"required":[4],"checked":[1540],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"hasFocus":[32],"hasErrorTextSlot":[32],"setFocus":[64],"removeFocus":[64]},null,{"checked":["handleCheckedChange"],"errorText":["handleLabelChange"],"label":["handleLabelChange"]}]]],["p-19a1d34c",[[1,"six-textarea",{"size":[513],"name":[513],"value":[1537],"helpText":[1,"help-text"],"placeholder":[1],"rows":[2],"resize":[1],"disabled":[516],"readonly":[516],"minlength":[514],"maxlength":[514],"required":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"autocapitalize":[1],"autocorrect":[1],"autocomplete":[1],"autofocus":[4],"spellcheck":[4],"inputmode":[1],"hasFocus":[32],"hasHelpTextSlot":[32],"hasLabelSlot":[32],"hasErrorTextSlot":[32],"setFocus":[64],"removeFocus":[64],"select":[64],"setSelectionRange":[64],"setRangeText":[64]},null,{"helpText":["handleLabelChange"],"errorText":["handleLabelChange"],"label":["handleLabelChange"],"rows":["handleRowsChange"],"value":["handleValueChange"]}]]],["p-7fc0bf6b",[[1,"six-badge",{"type":[1],"pill":[4],"pulse":[4]}]]],["p-ba7424b3",[[1,"six-card"]]],["p-1f1224ae",[[1,"six-file-list"]]],["p-a2b8aca7",[[1,"six-footer"]]],["p-1d4cb6e9",[[1,"six-language-switcher",{"selected":[1537],"languages":[16]},null,{"languages":["handleChangesLanguages"]}]]],["p-3eed2287",[[1,"six-layout-grid",{"columns":[1026]},null,{"columns":["handleColumnsChange"]}]]],["p-0a094514",[[1,"six-main-container",{"padded":[4]}]]],["p-9426a37b",[[1,"six-menu-divider"]]],["p-93ab2efc",[[1,"six-menu-label"]]],["p-8938e9bd",[[1,"six-progress-bar",{"percentage":[2],"indeterminate":[4]}]]],["p-80476b0f",[[1,"six-progress-ring",{"size":[2],"strokeWidth":[2,"stroke-width"],"percentage":[2]},null,{"percentage":["handlePercentageChange"]}]]],["p-38a9a590",[[1,"six-radio",{"name":[1],"value":[513],"disabled":[4],"checked":[1540],"invalid":[516],"hasFocus":[32],"setFocus":[64],"removeFocus":[64]},null,{"checked":["handleCheckedChange"],"name":["handleNameChange"]}]]],["p-acc487ec",[[1,"six-sidebar",{"position":[1],"open":[1540],"width":[1],"toggled":[4],"isVisible":[32],"toggle":[64],"show":[64],"hide":[64],"selectItemByIndex":[64],"selectItemByName":[64]},null,{"open":["handleOpenChange"]}]]],["p-45960b56",[[1,"six-sidebar-item",{"value":[513],"selected":[516],"disabled":[516],"href":[513]}]]],["p-d7739200",[[1,"six-tab-panel",{"name":[1],"active":[516]}]]],["p-8dff4dcb",[[1,"six-error"]]],["p-a2a6aaea",[[1,"six-icon",{"size":[513],"filled":[4]}]]],["p-7562d5f5",[[1,"six-timepicker",{"format":[1],"separator":[1],"value":[1025],"open":[1540],"inline":[516],"readonly":[4],"disabled":[4],"placement":[1],"size":[1],"required":[4],"placeholder":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"label":[1],"invalid":[516],"name":[513],"clearable":[4],"iconPosition":[1,"icon-position"],"hoist":[4],"timeout":[2],"interval":[2],"defaultTime":[1,"default-time"],"debounce":[2],"isPopupContentUp":[32],"isDropDownContentUp":[32],"popupValue":[32],"setFocus":[64]},[[9,"resize","resizeHandler"],[9,"scroll","scrollHandler"]],{"value":["valueChanged"]}]]],["p-338205f4",[[1,"six-button",{"type":[513],"size":[513],"caret":[4],"disabled":[516],"loading":[516],"pill":[516],"circle":[516],"submit":[516],"reset":[516],"name":[1],"value":[1],"href":[1],"target":[1],"download":[1],"hasFocus":[32],"hasLabel":[32],"hasPrefix":[32],"hasSuffix":[32],"setFocus":[64],"removeFocus":[64]}]]],["p-21002de1",[[1,"six-details",{"open":[1540],"summary":[1],"summaryIcon":[1,"summary-icon"],"summaryIconSize":[513,"summary-icon-size"],"disabled":[4],"inline":[4],"selectableEmpty":[4,"selectable-empty"],"hasContent":[4,"has-content"],"animateSummaryIcon":[32],"show":[64],"hide":[64]},null,{"open":["handleOpenChange"]}]]],["p-03900e17",[[1,"six-stage-indicator",{"stage":[1]}]]],["p-7a9dcb16",[[1,"six-picto",{"size":[1]}]]],["p-724d0458",[[1,"six-item-picker",{"value":[1544],"type":[1],"min":[1544],"max":[1544],"roundtrip":[516],"step":[514],"items":[16],"padded":[4],"paddingLength":[2,"padding-length"],"paddingChar":[1,"padding-char"],"paddingDirection":[1,"padding-direction"],"timeout":[2],"interval":[2],"debounce":[2],"_items":[32],"_itemIndexes":[32]},null,{"value":["handleValueChange"],"debounce":["debounceChanged"],"items":["handleSetChange"]}]]],["p-49e5d8bb",[[1,"six-tooltip",{"content":[1],"placement":[1],"disabled":[4],"distance":[2],"open":[1540],"skidding":[2],"trigger":[1],"show":[64],"hide":[64]},null,{"open":["handleOpenChange"]}]]],["p-5f810571",[[1,"six-spinner",{"six":[4]}]]],["p-50dbe99f",[[1,"six-input",{"type":[513],"size":[513],"name":[513],"value":[1537],"pill":[516],"helpText":[1,"help-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"minlength":[514],"maxlength":[514],"min":[514],"max":[514],"step":[514],"pattern":[513],"dropdownSearch":[4,"dropdown-search"],"required":[4],"autocapitalize":[1],"autocorrect":[1],"autocomplete":[1],"autofocus":[4],"spellcheck":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"clearable":[4],"togglePassword":[4,"toggle-password"],"inputmode":[1],"line":[4],"hasFocus":[32],"hasHelpTextSlot":[32],"hasLabelSlot":[32],"hasErrorSlot":[32],"isPasswordVisible":[32],"setFocus":[64],"removeFocus":[64],"select":[64],"setSelectionRange":[64],"setRangeText":[64]},null,{"helpText":["handleLabelChange"],"errorText":["handleLabelChange"],"label":["handleLabelChange"],"value":["handleValueChange"]}]]],["p-7c2255b5",[[1,"six-menu-item",{"checkType":[1,"check-type"],"checked":[516],"value":[513],"disabled":[516],"hasFocus":[32],"active":[32],"setFocus":[64],"removeFocus":[64],"getTextLabel":[64]}],[1,"six-checkbox",{"name":[1],"value":[1],"disabled":[4],"required":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"checked":[1540],"indeterminate":[1540],"hasFocus":[32],"hasLabelSlot":[32],"hasErrorSlot":[32],"setFocus":[64],"removeFocus":[64]},null,{"checked":["handleCheckedChange"],"indeterminate":["handleCheckedChange"],"errorText":["handleLabelChange"],"label":["handleLabelChange"]}]]],["p-e798314b",[[1,"six-dropdown",{"open":[1540],"placement":[1],"closeOnSelect":[4,"close-on-select"],"distance":[2],"skidding":[2],"hoist":[4],"containingElement":[16],"filter":[4],"asyncFilter":[4,"async-filter"],"filterPlaceholder":[1,"filter-placeholder"],"autofocusFilter":[4,"autofocus-filter"],"filterDebounce":[1026,"filter-debounce"],"disableHideOnEnterAndSpace":[4,"disable-hide-on-enter-and-space"],"options":[1040],"virtualScroll":[4,"virtual-scroll"],"matchTriggerWidth":[4,"match-trigger-width"],"renderedOptions":[32],"show":[64],"hide":[64],"reposition":[64]},null,{"open":["handleOpenChange"],"distance":["handlePopoverOptionsChange"],"hoist":["handlePopoverOptionsChange"],"placement":["handlePopoverOptionsChange"],"skidding":["handlePopoverOptionsChange"],"options":["handleOptionsChange"],"virtualScroll":["handleOptionsChange"]}],[1,"six-menu",{"removeBoxShadow":[4,"remove-box-shadow"],"items":[16],"itemsShown":[2,"items-shown"],"virtualScroll":[4,"virtual-scroll"],"itemSize":[2,"item-size"],"scrollingDebounce":[2,"scrolling-debounce"],"disableKeyboardHandling":[4,"disable-keyboard-handling"],"scrollingIndex":[32],"sixMenuItemHeight":[32],"typeToSelect":[64]}]]],["p-01853739",[[1,"six-icon-button",{"name":[513],"size":[513],"label":[513],"disabled":[516],"html":[513]}]]]]'),e)}));
2
2
  //# sourceMappingURL=ui-library.esm.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@six-group/ui-library",
3
- "version": "0.0.0-insider.27d0bb9",
3
+ "version": "0.0.0-insider.2835e5c",
4
4
  "description": "Web components in alignment with the SIX corporate styleguide",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/index.cjs.js",
@@ -63,6 +63,6 @@
63
63
  ]
64
64
  },
65
65
  "engines": {
66
- "node": ">=16.0.0"
66
+ "node": ">=16"
67
67
  }
68
68
  }
package/dist/ui-library/p-be0c0ec9.entry.js DELETED
@@ -1,2 +0,0 @@
1
- import{r as e,c as a,h as s}from"./p-f93d8a4e.js";const t=".language-switcher__container{display:flex}.language-switcher__separator{padding:0 0.25rem}.language-switcher__label{cursor:pointer}.language-switcher__label:hover{color:var(--six-color-web-rock-600)}.language-switcher__label--selected{color:var(--six-color-black);text-decoration:underline}";const r=t;const i=["EN","DE","ES"];const n=class{constructor(s){e(this,s);this.sixChange=a(this,"six-language-switcher-change",7);this.handleLanguageSwitching=(e,a)=>()=>{if(a!==undefined){this.sixChange.emit(a)}else{this.sixChange.emit(e)}this.selected=e};this.selected=undefined;this.languages=i}handleChangesLanguages(e){if(!Array.isArray(e)){throw new Error("languages is expected to be an array")}this.updateSelectedLanguage()}componentWillLoad(){if(this.selected===undefined){this.updateSelectedLanguage()}}updateSelectedLanguage(){const e=this.languages[0];if(typeof e==="string"){this.selected=e;this.sixChange.emit(this.selected)}else{this.selected=e.key;this.sixChange.emit(e.value)}}render(){return s("div",{key:"fa72eaaf2cb5c0f327a0924e12779863f348b59c",part:"container",class:"language-switcher__container"},this.languages.map(((e,a)=>{const t=typeof e==="string"?e:e.key;return s("div",{onClick:this.handleLanguageSwitching(t,typeof e==="string"?e:e.value)},s("span",{part:"label",class:{"language-switcher__label":true,"language-switcher__label--selected":this.selected===t}},t),a<this.languages.length-1&&s("span",{part:"separator",class:"language-switcher__separator"},"|"))})))}static get watchers(){return{languages:["handleChangesLanguages"]}}};n.style=r;export{n as six_language_switcher};
2
- //# sourceMappingURL=p-be0c0ec9.entry.js.map
package/dist/ui-library/p-be0c0ec9.entry.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"names":["sixLanguageSwitcherCss","SixLanguageSwitcherStyle0","DEFAULT_LANGUAGES","SixLanguageSwitcher","this","handleLanguageSwitching","newLanguage","languageValue","undefined","sixChange","emit","selected","handleChangesLanguages","newValue","Array","isArray","Error","updateSelectedLanguage","componentWillLoad","selectedLanguage","languages","key","value","render","h","part","class","map","lang","index","language","onClick","length"],"sources":["src/components/six-language-switcher/six-language-switcher.scss?tag=six-language-switcher&encapsulation=shadow","src/components/six-language-switcher/six-language-switcher.tsx"],"sourcesContent":[".language-switcher {\n &__container {\n display: flex;\n }\n\n &__separator {\n padding: 0 0.25rem;\n }\n\n &__label {\n cursor: pointer;\n\n &:hover {\n color: var(--six-color-web-rock-600);\n }\n\n &--selected {\n color: var(--six-color-black);\n text-decoration: underline;\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 2.1.0\n * @status experimental\n **/\n\nexport interface SixLanguageSwitcherInput {\n key: string;\n value: string;\n}\nexport type SixLanguageSwitcherChangePayload = string;\n\nconst DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];\n\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n@Component({\n tag: 'six-language-switcher',\n styleUrl: 'six-language-switcher.scss',\n shadow: true,\n})\nexport class SixLanguageSwitcher {\n /** The language which should be shown as selected */\n @Prop({ mutable: true, reflect: true }) selected?: string;\n\n /** The languages which should be selectable options. */\n @Prop() languages: string[] | SixLanguageSwitcherInput[] = DEFAULT_LANGUAGES;\n\n @Watch('languages')\n handleChangesLanguages(newValue: string[]) {\n if (!Array.isArray(newValue)) {\n throw new Error('languages is expected to be an array');\n }\n\n this.updateSelectedLanguage();\n }\n /**\n * Emitted when the language switchers value changes\n */\n @Event({ eventName: 'six-language-switcher-change' }) sixChange!: EventEmitter<SixLanguageSwitcherChangePayload>;\n\n componentWillLoad() {\n if (this.selected === undefined) {\n this.updateSelectedLanguage();\n }\n }\n\n private updateSelectedLanguage() {\n const selectedLanguage = this.languages[0];\n if (typeof selectedLanguage === 'string') {\n this.selected = selectedLanguage;\n this.sixChange.emit(this.selected);\n } else {\n this.selected = selectedLanguage.key;\n this.sixChange.emit(selectedLanguage.value);\n }\n }\n\n private handleLanguageSwitching = (newLanguage: string, languageValue?: string) => () => {\n if (languageValue !== undefined) {\n this.sixChange.emit(languageValue);\n } else {\n this.sixChange.emit(newLanguage);\n }\n this.selected = newLanguage;\n };\n\n render() {\n return (\n <div part=\"container\" class=\"language-switcher__container\">\n {this.languages.map((lang, index) => {\n const language = typeof lang === 'string' ? lang : lang.key;\n return (\n <div onClick={this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)}>\n <span\n part=\"label\"\n class={{\n 'language-switcher__label': true,\n 'language-switcher__label--selected': this.selected === language,\n }}\n >\n {language}\n </span>\n {index < this.languages.length - 1 && (\n <span part=\"separator\" class=\"language-switcher__separator\">\n |\n </span>\n )}\n </div>\n );\n })}\n </div>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAyB,sSAC/B,MAAAC,EAAeD,ECYf,MAAME,EAAoB,CAAC,KAAM,KAAM,M,MAc1BC,EAAmB,M,iFAqCtBC,KAAAC,wBAA0B,CAACC,EAAqBC,IAA2B,KACjF,GAAIA,IAAkBC,UAAW,CAC/BJ,KAAKK,UAAUC,KAAKH,E,KACf,CACLH,KAAKK,UAAUC,KAAKJ,E,CAEtBF,KAAKO,SAAWL,CAAW,E,uCAtC8BJ,C,CAG3D,sBAAAU,CAAuBC,GACrB,IAAKC,MAAMC,QAAQF,GAAW,CAC5B,MAAM,IAAIG,MAAM,uC,CAGlBZ,KAAKa,wB,CAOP,iBAAAC,GACE,GAAId,KAAKO,WAAaH,UAAW,CAC/BJ,KAAKa,wB,EAID,sBAAAA,GACN,MAAME,EAAmBf,KAAKgB,UAAU,GACxC,UAAWD,IAAqB,SAAU,CACxCf,KAAKO,SAAWQ,EAChBf,KAAKK,UAAUC,KAAKN,KAAKO,S,KACpB,CACLP,KAAKO,SAAWQ,EAAiBE,IACjCjB,KAAKK,UAAUC,KAAKS,EAAiBG,M,EAazC,MAAAC,GACE,OACEC,EAAA,OAAAH,IAAA,2CAAKI,KAAK,YAAYC,MAAM,gCACzBtB,KAAKgB,UAAUO,KAAI,CAACC,EAAMC,KACzB,MAAMC,SAAkBF,IAAS,SAAWA,EAAOA,EAAKP,IACxD,OACEG,EAAA,OAAKO,QAAS3B,KAAKC,wBAAwByB,SAAiBF,IAAS,SAAWA,EAAOA,EAAKN,QAC1FE,EAAA,QACEC,KAAK,QACLC,MAAO,CACL,2BAA4B,KAC5B,qCAAsCtB,KAAKO,WAAamB,IAGzDA,GAEFD,EAAQzB,KAAKgB,UAAUY,OAAS,GAC/BR,EAAA,QAAMC,KAAK,YAAYC,MAAM,gCAA8B,KAIzD,I"}