@swisspost/internet-header 1.12.1 → 1.13.1

package/dist/cjs/post-language-switch-422af4d0.js

@@ -0,0 +1,106 @@
+'use strict';
+
+const index = require('./index-4bd0adf1.js');
+const svgSprite_component = require('./svg-sprite.component-68369645.js');
+const svgIcon_component = require('./svg-icon.component-5965f301.js');
+const store = require('./store-77668e50.js');
+const ui_service = require('./ui.service-488151be.js');
+const language_service = require('./language.service-dbe2a435.js');
+
+const PostLanguageSwitchList = (props) => {
+  var _a;
+  if (((_a = store.state.localizedConfig) === null || _a === void 0 ? void 0 : _a.header) === undefined)
+    return;
+  const config = store.state.localizedConfig.header;
+  return (index.h("nav", { class: "language-switch-dropdown", ref: e => props.dropdownRef(e), "aria-label": config.translations.navLangAriaLabel },
+    index.h("ul", { "aria-label": language_service.translate('Change language') }, props.navLang
+      .filter(lang => !lang.isCurrent)
+      .map(lang => {
+      const TagName = lang.url ? 'a' : 'button';
+      return (index.h("li", { key: lang.lang },
+        index.h(TagName, { onClick: () => props.switchLanguage(lang), href: lang.url, lang: lang.lang, title: lang.title },
+          index.h("span", { class: "visually-hidden" }, lang.title),
+          index.h("span", { "aria-hidden": "true" }, lang.text))));
+    }))));
+};
+
+const postLanguageSwitchCss = "@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:700;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:700;font-style:italic;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:400;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:400;font-style:italic;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:300;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:300;font-style:italic;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff\") format(\"woff\")}.visually-hidden{position:absolute;width:1px;height:1px;border:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}.btn-blank{background-color:rgba(0,0,0,0);border:none;border-radius:0;padding:0}.nav-link,.language-switch-dropdown a,.language-switch-dropdown button{outline:none;outline-offset:2px;text-decoration:none;color:rgba(0,0,0,.8);-webkit-transition:color 200ms;transition:color 200ms;background-color:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;border:0;margin:0;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:.5rem}.nav-link:is(:focus-visible,:focus-within,.pretend-focus),.language-switch-dropdown a:is(:focus-visible,:focus-within,.pretend-focus),.language-switch-dropdown button:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color)}.nav-link:hover,.language-switch-dropdown a:hover,.language-switch-dropdown button:hover,.nav-link:focus,.language-switch-dropdown a:focus,.language-switch-dropdown button:focus{color:#000}.nav-link:is(:focus-visible,:focus-within,.pretend-focus),.language-switch-dropdown a:is(:focus-visible,:focus-within,.pretend-focus),.language-switch-dropdown button:is(:focus-visible,:focus-within,.pretend-focus){z-index:1;position:relative}.nav-link>svg,.language-switch-dropdown a>svg,.language-switch-dropdown button>svg{width:1.4em;height:1.4em;-ms-flex-negative:0;flex-shrink:0}.nav-link>span,.language-switch-dropdown a>span,.language-switch-dropdown button>span{-ms-flex-negative:1;flex-shrink:1}.no-list,.language-switch-dropdown ul{list-style:none;padding-left:0;margin-top:0;margin-bottom:0}*,:host,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{font-family:\"Frutiger Neue For Post\",system-ui,sans-serif}button{font:inherit;padding:0}a,button{border-radius:4px;outline:none;outline-offset:2px}a:is(:focus-visible,:focus-within,.pretend-focus),button:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color);border-radius:4px}img,svg{max-width:100%;max-height:100%}@media (forced-colors: active){svg{color:#fff}}.box>*:first-child{margin-top:0}.box>*:last-child{margin-bottom:0}.mirrored{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.bold{font-weight:700}.light{font-weight:300}.d-flex{display:-ms-flexbox;display:flex}.d-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.align-items-center{-ms-flex-align:center;align-items:center}@media (min-width: 1441px){.wide-container{margin:0 auto;max-width:1440px}}@media (max-width: 599.98px){.container{padding-right:16px;padding-left:16px}}@media (min-width: 600px)and (max-width: 1023.98px){.container{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.container{padding-right:40px;padding-left:40px}}@media (max-width: -0.02px){.hidden-xs{display:none}}@media (max-width: 399.98px){.hidden-sm{display:none}}@media (max-width: 599.98px){.hidden-rg{display:none}}@media (max-width: 779.98px){.hidden-md{display:none}}@media (max-width: 1023.98px){.hidden-lg{display:none}}@media (max-width: 1279.98px){.hidden-xl{display:none}}@media (max-width: 1440.98px){.hidden-xxl{display:none}}:host{--separator-display:none;--separator-height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch}:host::before{position:relative;content:\"\";display:var(--separator-display);height:var(--separator-height);border-left:1px solid #e6e6e6}.lang-btn{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:100%;padding:0 1rem;border:none;-webkit-box-shadow:none;box-shadow:none;background:none;text-transform:uppercase;cursor:pointer;color:rgba(0,0,0,.8)}.lang-btn:hover,.lang-btn:focus{color:#000;position:relative;z-index:1}.lang-btn svg{width:1.5em;height:1.5em;-webkit-transition:-webkit-transform 250ms;transition:-webkit-transform 250ms;transition:transform 250ms;transition:transform 250ms, -webkit-transform 250ms}.lang-btn svg.rotated{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.language-switch{position:relative;-ms-flex-item-align:stretch;align-self:stretch;height:100%}.language-switch.list{margin-top:1.5rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.current-language{text-transform:uppercase;border-right:1px solid #ccc;padding:.5rem 1rem .5rem 0}.dropdown .language-switch-dropdown{position:absolute;top:100%;width:100%;background:#fff;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2),0 2px 6px 2px rgba(0,0,0,.1);box-shadow:0 1px 2px rgba(0,0,0,.2),0 2px 6px 2px rgba(0,0,0,.1);z-index:1;-webkit-transform:scale(0.1);transform:scale(0.1);-webkit-transform-origin:center top;transform-origin:center top;-webkit-transition:-webkit-transform .1s;transition:-webkit-transform .1s;transition:transform .1s;transition:transform .1s, -webkit-transform .1s;margin-top:var(--language-dropdown-margin-top)}@media (prefers-reduced-motion: reduce){.dropdown .language-switch-dropdown{-webkit-transition:none;transition:none}}.dropdown .language-switch-dropdown.open{-webkit-transform:scale(1);transform:scale(1)}.list .language-switch-dropdown ul{display:-ms-flexbox;display:flex}.list .language-switch-dropdown ul>li+li{border-left:1px solid #ccc}.language-switch-dropdown a,.language-switch-dropdown button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:3rem;padding:0 .25rem;text-transform:uppercase;cursor:pointer;-webkit-transition:background-color 200ms,color 200ms;transition:background-color 200ms,color 200ms}.language-switch-dropdown a:hover,.language-switch-dropdown a:focus,.language-switch-dropdown button:hover,.language-switch-dropdown button:focus{background:#f4f3f1}.language-switch-dropdown a span,.language-switch-dropdown button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.list .language-switch-dropdown a,.list .language-switch-dropdown button{color:#000;height:auto;padding:.5rem 1rem}";
+
+const PostLanguageSwitch = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.dropdownToggled = index.createEvent(this, "dropdownToggled", 7);
+    this.languageChanged = index.createEvent(this, "languageChanged", 7);
+    this.mode = undefined;
+    this.langSwitchOpen = false;
+  }
+  componentWillUpdate() {
+    // Check if language switch got set to close and if mode is dropdown
+    if (this.languageSwitchDropdown && !this.langSwitchOpen && this.mode == 'dropdown') {
+      this.languageSwitchDropdown.classList.remove('open');
+      // Check if element has transition applied and whether user prefers to see animations or not
+      if (ui_service.elementHasTransition(this.languageSwitchDropdown, 'transform') &&
+        !ui_service.userPrefersReducedMotion()) {
+        // Wait for CSS transition 'transform' to end before continuing
+        return new Promise(resolve => {
+          var _a;
+          (_a = this.languageSwitchDropdown) === null || _a === void 0 ? void 0 : _a.addEventListener('transitionend', event => {
+            if (event.propertyName === 'transform') {
+              resolve(true);
+            }
+          });
+        });
+      }
+    }
+  }
+  componentDidUpdate() {
+    // Language switch got set to open
+    if (this.languageSwitchDropdown && this.langSwitchOpen) {
+      // Force browser to redraw/refresh DOM before adding 'open' class
+      this.languageSwitchDropdown.getBoundingClientRect();
+      this.languageSwitchDropdown.classList.add('open');
+    }
+  }
+  /**
+   * Open or close the language switch programatically
+   * @param force Boolean to force a state
+   * @returns Boolean indicating new state
+   */
+  async toggleDropdown(force) {
+    this.langSwitchOpen = force !== null && force !== void 0 ? force : !this.langSwitchOpen;
+    this.dropdownToggled.emit({ open: this.langSwitchOpen, element: this.host });
+    return this.langSwitchOpen;
+  }
+  /**
+   * Emit a language change to the parent component
+   *
+   * @param newLang Config of the new language
+   */
+  switchLanguage(newLang) {
+    this.languageChanged.emit(newLang.lang);
+    this.toggleDropdown(false);
+  }
+  getMergedLanguageConfig(config, overrides) {
+    if (overrides === undefined) {
+      return config;
+    }
+    return config.map(langConfig => Object.assign({}, langConfig, overrides.find(l => l.lang === langConfig.lang)));
+  }
+  setDropdownRef(element) {
+    this.languageSwitchDropdown = element;
+  }
+  render() {
+    var _a;
+    if (((_a = store.state.localizedConfig) === null || _a === void 0 ? void 0 : _a.header) === undefined)
+      return;
+    const config = store.state.localizedConfig.header;
+    const mergedConfig = this.getMergedLanguageConfig(config.navLang, store.state.languageSwitchOverrides);
+    return (index.h(index.Host, null, index.h("div", { class: `language-switch ${this.mode}` }, index.h(svgSprite_component.SvgSprite, null), this.mode === 'dropdown' ? (index.h("button", { class: "lang-btn", "aria-expanded": `${this.langSwitchOpen}`, "aria-haspopup": "listbox", onClick: () => this.toggleDropdown() }, index.h("span", { class: "visually-hidden" }, config.translations.navLangAriaLabel, ", ", language_service.translate('Current language is English')), index.h("span", { "aria-hidden": "true" }, store.state.currentLanguage), index.h(svgIcon_component.SvgIcon, { name: "pi-arrow-down", classNames: this.langSwitchOpen ? 'rotated' : '' }))) : (index.h("span", { class: "bold current-language" }, index.h("span", { class: "visually-hidden" }, language_service.translate('Current language is English')), index.h("span", null, store.state.currentLanguage))), this.langSwitchOpen || this.mode === 'list' ? (index.h(PostLanguageSwitchList, { navLang: mergedConfig, switchLanguage: e => this.switchLanguage(e), dropdownRef: e => e !== undefined && this.setDropdownRef(e) })) : null)));
+  }
+  get host() { return index.getElement(this); }
+};
+PostLanguageSwitch.style = postLanguageSwitchCss;
+
+exports.PostLanguageSwitch = PostLanguageSwitch;
+
+//# sourceMappingURL=post-language-switch-422af4d0.js.map

package/dist/cjs/post-language-switch-422af4d0.js.map

@@ -0,0 +1 @@
+{"file":"post-language-switch-422af4d0.js","mappings":"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","names":["state","h","translate","elementHasTransition","userPrefersReducedMotion","Host","SvgSprite","SvgIcon"],"sources":["src/components/post-language-switch/components/post-language-switch-list.tsx","src/components/post-language-switch/post-language-switch.scss?tag=post-language-switch&encapsulation=shadow","src/components/post-language-switch/post-language-switch.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { NavLangEntity } from '../../../models/header.model';\nimport { translate } from '../../../services/language.service';\nimport { state } from '../../../data/store';\n\nexport const PostLanguageSwitchList = (props: {\n  navLang: NavLangEntity[];\n  switchLanguage: (lang: NavLangEntity) => void;\n  dropdownRef: (element: HTMLElement | undefined) => void;\n}) => {\n  if (state.localizedConfig?.header === undefined) return;\n  const config = state.localizedConfig.header;\n\n  return (\n    <nav\n      class=\"language-switch-dropdown\"\n      ref={e => props.dropdownRef(e)}\n      aria-label={config.translations.navLangAriaLabel}\n    >\n      <ul aria-label={translate('Change language')}>\n        {props.navLang\n          .filter(lang => !lang.isCurrent)\n          .map(lang => {\n            const TagName = lang.url ? 'a' : 'button';\n            return (\n              <li key={lang.lang}>\n                <TagName\n                  onClick={() => props.switchLanguage(lang)}\n                  href={lang.url}\n                  lang={lang.lang}\n                  title={lang.title}\n                >\n                  <span class=\"visually-hidden\">{lang.title}</span>\n                  <span aria-hidden=\"true\">{lang.text}</span>\n                </TagName>\n              </li>\n            );\n          })}\n      </ul>\n    </nav>\n  );\n};\n","@use '@swisspost/design-system-styles/variables/color';\n@use '@swisspost/design-system-styles/functions';\n@use '../../utils/utils.scss';\n\n:host {\n  --separator-display: none;\n  --separator-height: 100%;\n\n  display: flex;\n  align-items: center;\n  align-self: stretch;\n\n  &::before {\n    position: relative;\n    content: '';\n    display: var(--separator-display);\n    height: var(--separator-height);\n    border-left: 1px solid color.$gray-10;\n  }\n}\n\n.lang-btn {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 0 1rem;\n  border: none;\n  box-shadow: none;\n  background: none;\n  text-transform: uppercase;\n  cursor: pointer;\n  color: rgba(color.$black, 0.8);\n\n  &:hover,\n  &:focus {\n    color: black;\n    position: relative;\n    z-index: 1;\n  }\n\n  svg {\n    width: 1.5em;\n    height: 1.5em;\n    transition: transform 250ms;\n\n    &.rotated {\n      transform: rotate(180deg);\n    }\n  }\n}\n\n.language-switch {\n  position: relative;\n  align-self: stretch;\n  height: 100%;\n\n  &.list {\n    margin-top: 1.5rem;\n    display: flex;\n    align-items: center;\n  }\n}\n\n.current-language {\n  text-transform: uppercase;\n  border-right: 1px solid color.$gray-20;\n  padding: 0.5rem 1rem 0.5rem 0;\n}\n\n.language-switch-dropdown {\n  .dropdown & {\n    position: absolute;\n    top: 100%;\n    width: 100%;\n    background: white;\n    box-shadow: 0 1px 2px rgb(0 0 0 / 20%), 0 2px 6px 2px rgb(0 0 0 / 10%);\n    z-index: 1;\n    transform: scale(0.1);\n    transform-origin: center top;\n    transition: transform 0.1s;\n    margin-top: var(--language-dropdown-margin-top);\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n\n    &.open {\n      transform: scale(1);\n    }\n  }\n\n  ul {\n    @extend %no-list;\n\n    .list & {\n      display: flex;\n\n      > li + li {\n        border-left: 1px solid color.$gray-20;\n      }\n    }\n  }\n\n  a,\n  button {\n    @extend %nav-link;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: functions.px-to-rem(48px);\n    padding: 0 0.25rem;\n    text-transform: uppercase;\n    cursor: pointer;\n    transition: background-color 200ms, color 200ms;\n\n    &:hover,\n    &:focus {\n      background: color.$gray-background;\n    }\n\n    span {\n      // Worst case scenario\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    }\n\n    .list & {\n      color: black;\n      height: auto;\n      padding: 0.5rem 1rem;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { SvgSprite } from '../../utils/svg-sprite.component';\nimport { SvgIcon } from '../../utils/svg-icon.component';\nimport { state } from '../../data/store';\nimport {\n  DropdownElement,\n  DropdownEvent,\n  HasDropdown,\n  NavLangEntity,\n} from '../../models/header.model';\nimport { elementHasTransition, userPrefersReducedMotion } from '../../services/ui.service';\nimport { translate } from '../../services/language.service';\nimport { PostLanguageSwitchList } from './components/post-language-switch-list';\nimport { IAvailableLanguage } from '../../models/language.model';\n\n@Component({\n  tag: 'post-language-switch',\n  styleUrl: 'post-language-switch.scss',\n  shadow: true,\n})\nexport class PostLanguageSwitch implements HasDropdown {\n  @Prop() mode: 'dropdown' | 'list';\n  @State() langSwitchOpen = false;\n  @Element() host: DropdownElement;\n  @Event() dropdownToggled: EventEmitter<DropdownEvent>;\n  @Event({ bubbles: true }) languageChanged: EventEmitter<string>;\n  private languageSwitchDropdown: HTMLElement | undefined;\n\n  componentWillUpdate() {\n    // Check if language switch got set to close and if mode is dropdown\n    if (this.languageSwitchDropdown && !this.langSwitchOpen && this.mode == 'dropdown') {\n      this.languageSwitchDropdown.classList.remove('open');\n\n      // Check if element has transition applied and whether user prefers to see animations or not\n      if (\n        elementHasTransition(this.languageSwitchDropdown, 'transform') &&\n        !userPrefersReducedMotion()\n      ) {\n        // Wait for CSS transition 'transform' to end before continuing\n        return new Promise<boolean>(resolve => {\n          this.languageSwitchDropdown?.addEventListener('transitionend', event => {\n            if (event.propertyName === 'transform') {\n              resolve(true);\n            }\n          });\n        });\n      }\n    }\n  }\n\n  componentDidUpdate() {\n    // Language switch got set to open\n    if (this.languageSwitchDropdown && this.langSwitchOpen) {\n      // Force browser to redraw/refresh DOM before adding 'open' class\n      this.languageSwitchDropdown.getBoundingClientRect();\n      this.languageSwitchDropdown.classList.add('open');\n    }\n  }\n\n  /**\n   * Open or close the language switch programatically\n   * @param force Boolean to force a state\n   * @returns Boolean indicating new state\n   */\n  @Method()\n  async toggleDropdown(force?: boolean) {\n    this.langSwitchOpen = force ?? !this.langSwitchOpen;\n    this.dropdownToggled.emit({ open: this.langSwitchOpen, element: this.host });\n    return this.langSwitchOpen;\n  }\n\n  /**\n   * Emit a language change to the parent component\n   *\n   * @param newLang Config of the new language\n   */\n  switchLanguage(newLang: NavLangEntity) {\n    this.languageChanged.emit(newLang.lang);\n    this.toggleDropdown(false);\n  }\n\n  private getMergedLanguageConfig(config: NavLangEntity[], overrides?: IAvailableLanguage[]) {\n    if (overrides === undefined) {\n      return config;\n    }\n\n    return config.map(langConfig =>\n      Object.assign(\n        {},\n        langConfig,\n        overrides.find(l => l.lang === langConfig.lang),\n      ),\n    );\n  }\n\n  private setDropdownRef(element: HTMLElement | undefined) {\n    this.languageSwitchDropdown = element;\n  }\n\n  render() {\n    if (state.localizedConfig?.header === undefined) return;\n    const config = state.localizedConfig.header;\n    const mergedConfig = this.getMergedLanguageConfig(\n      config.navLang,\n      state.languageSwitchOverrides,\n    );\n\n    return (\n      <Host>\n        <div class={`language-switch ${this.mode}`}>\n          <SvgSprite />\n          {this.mode === 'dropdown' ? (\n            <button\n              class=\"lang-btn\"\n              aria-expanded={`${this.langSwitchOpen}`}\n              aria-haspopup=\"listbox\"\n              onClick={() => this.toggleDropdown()}\n            >\n              <span class=\"visually-hidden\">\n                {config.translations.navLangAriaLabel}, {translate('Current language is English')}\n              </span>\n              <span aria-hidden=\"true\">{state.currentLanguage}</span>\n              <SvgIcon name=\"pi-arrow-down\" classNames={this.langSwitchOpen ? 'rotated' : ''} />\n            </button>\n          ) : (\n            <span class=\"bold current-language\">\n              <span class=\"visually-hidden\">{translate('Current language is English')}</span>\n              <span>{state.currentLanguage}</span>\n            </span>\n          )}\n          {this.langSwitchOpen || this.mode === 'list' ? (\n            <PostLanguageSwitchList\n              navLang={mergedConfig}\n              switchLanguage={e => this.switchLanguage(e)}\n              dropdownRef={e => e !== undefined && this.setDropdownRef(e)}\n            />\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/post-language-switch.cjs.entry.js

@@ -2,107 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4bd0adf1.js');
-const svgSprite_component = require('./svg-sprite.component-4b5677ef.js');
-const svgIcon_component = require('./svg-icon.component-5965f301.js');
-const store = require('./store-77668e50.js');
-const ui_service = require('./ui.service-488151be.js');
-const language_service = require('./language.service-dbe2a435.js');
+const postLanguageSwitch = require('./post-language-switch-422af4d0.js');
+require('./index-4bd0adf1.js');
+require('./svg-sprite.component-68369645.js');
+require('./svg-icon.component-5965f301.js');
+require('./store-77668e50.js');
+require('./ui.service-488151be.js');
+require('./language.service-dbe2a435.js');
 
-const PostLanguageSwitchList = (props) => {
-  var _a;
-  if (((_a = store.state.localizedConfig) === null || _a === void 0 ? void 0 : _a.header) === undefined)
-    return;
-  const config = store.state.localizedConfig.header;
-  return (index.h("nav", { class: "language-switch-dropdown", ref: e => props.dropdownRef(e), "aria-label": config.translations.navLangAriaLabel },
-    index.h("ul", { "aria-label": language_service.translate('Change language') }, props.navLang
-      .filter(lang => !lang.isCurrent)
-      .map(lang => {
-      const TagName = lang.url ? 'a' : 'button';
-      return (index.h("li", { key: lang.lang },
-        index.h(TagName, { onClick: () => props.switchLanguage(lang), href: lang.url, lang: lang.lang, title: lang.title },
-          index.h("span", { class: "visually-hidden" }, lang.title),
-          index.h("span", { "aria-hidden": "true" }, lang.text))));
-    }))));
-};
 
-const postLanguageSwitchCss = "@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:700;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:700;font-style:italic;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:400;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:400;font-style:italic;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:300;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:300;font-style:italic;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff\") format(\"woff\")}.visually-hidden{position:absolute;width:1px;height:1px;border:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}.btn-blank{background-color:rgba(0,0,0,0);border:none;border-radius:0;padding:0}.nav-link,.language-switch-dropdown a,.language-switch-dropdown button{outline:none;outline-offset:2px;text-decoration:none;color:rgba(0,0,0,.8);-webkit-transition:color 200ms;transition:color 200ms;background-color:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;border:0;margin:0;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:.5rem}.nav-link:is(:focus-visible,:focus-within,.pretend-focus),.language-switch-dropdown a:is(:focus-visible,:focus-within,.pretend-focus),.language-switch-dropdown button:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color)}.nav-link:hover,.language-switch-dropdown a:hover,.language-switch-dropdown button:hover,.nav-link:focus,.language-switch-dropdown a:focus,.language-switch-dropdown button:focus{color:#000}.nav-link:is(:focus-visible,:focus-within,.pretend-focus),.language-switch-dropdown a:is(:focus-visible,:focus-within,.pretend-focus),.language-switch-dropdown button:is(:focus-visible,:focus-within,.pretend-focus){z-index:1;position:relative}.nav-link>svg,.language-switch-dropdown a>svg,.language-switch-dropdown button>svg{width:1.4em;height:1.4em;-ms-flex-negative:0;flex-shrink:0}.nav-link>span,.language-switch-dropdown a>span,.language-switch-dropdown button>span{-ms-flex-negative:1;flex-shrink:1}.no-list,.language-switch-dropdown ul{list-style:none;padding-left:0;margin-top:0;margin-bottom:0}*,:host,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{font-family:\"Frutiger Neue For Post\",system-ui,sans-serif}button{font:inherit;padding:0}a,button{border-radius:4px;outline:none;outline-offset:2px}a:is(:focus-visible,:focus-within,.pretend-focus),button:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color);border-radius:4px}img,svg{max-width:100%;max-height:100%}@media (forced-colors: active){svg{color:#fff}}.box>*:first-child{margin-top:0}.box>*:last-child{margin-bottom:0}.mirrored{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.bold{font-weight:700}.light{font-weight:300}.d-flex{display:-ms-flexbox;display:flex}.d-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.align-items-center{-ms-flex-align:center;align-items:center}@media (min-width: 1441px){.wide-container{margin:0 auto;max-width:1440px}}@media (max-width: 599.98px){.container{padding-right:16px;padding-left:16px}}@media (min-width: 600px)and (max-width: 1023.98px){.container{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.container{padding-right:40px;padding-left:40px}}@media (max-width: -0.02px){.hidden-xs{display:none}}@media (max-width: 399.98px){.hidden-sm{display:none}}@media (max-width: 599.98px){.hidden-rg{display:none}}@media (max-width: 779.98px){.hidden-md{display:none}}@media (max-width: 1023.98px){.hidden-lg{display:none}}@media (max-width: 1279.98px){.hidden-xl{display:none}}@media (max-width: 1440.98px){.hidden-xxl{display:none}}:host{--separator-display:none;--separator-height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch}:host::before{position:relative;content:\"\";display:var(--separator-display);height:var(--separator-height);border-left:1px solid #e6e6e6}.lang-btn{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:100%;padding:0 1rem;border:none;-webkit-box-shadow:none;box-shadow:none;background:none;text-transform:uppercase;cursor:pointer;color:rgba(0,0,0,.8)}.lang-btn:hover,.lang-btn:focus{color:#000;position:relative;z-index:1}.lang-btn svg{width:1.5em;height:1.5em;-webkit-transition:-webkit-transform 250ms;transition:-webkit-transform 250ms;transition:transform 250ms;transition:transform 250ms, -webkit-transform 250ms}.lang-btn svg.rotated{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.language-switch{position:relative;-ms-flex-item-align:stretch;align-self:stretch;height:100%}.language-switch.list{margin-top:1.5rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.current-language{text-transform:uppercase;border-right:1px solid #ccc;padding:.5rem 1rem .5rem 0}.dropdown .language-switch-dropdown{position:absolute;top:100%;width:100%;background:#fff;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2),0 2px 6px 2px rgba(0,0,0,.1);box-shadow:0 1px 2px rgba(0,0,0,.2),0 2px 6px 2px rgba(0,0,0,.1);z-index:1;-webkit-transform:scale(0.1);transform:scale(0.1);-webkit-transform-origin:center top;transform-origin:center top;-webkit-transition:-webkit-transform .1s;transition:-webkit-transform .1s;transition:transform .1s;transition:transform .1s, -webkit-transform .1s;margin-top:var(--language-dropdown-margin-top)}@media (prefers-reduced-motion: reduce){.dropdown .language-switch-dropdown{-webkit-transition:none;transition:none}}.dropdown .language-switch-dropdown.open{-webkit-transform:scale(1);transform:scale(1)}.list .language-switch-dropdown ul{display:-ms-flexbox;display:flex}.list .language-switch-dropdown ul>li+li{border-left:1px solid #ccc}.language-switch-dropdown a,.language-switch-dropdown button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:3rem;padding:0 .25rem;text-transform:uppercase;cursor:pointer;-webkit-transition:background-color 200ms,color 200ms;transition:background-color 200ms,color 200ms}.language-switch-dropdown a:hover,.language-switch-dropdown a:focus,.language-switch-dropdown button:hover,.language-switch-dropdown button:focus{background:#f4f3f1}.language-switch-dropdown a span,.language-switch-dropdown button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.list .language-switch-dropdown a,.list .language-switch-dropdown button{color:#000;height:auto;padding:.5rem 1rem}";
 
-const PostLanguageSwitch = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.dropdownToggled = index.createEvent(this, "dropdownToggled", 7);
-    this.languageChanged = index.createEvent(this, "languageChanged", 7);
-    this.mode = undefined;
-    this.langSwitchOpen = false;
-  }
-  componentWillUpdate() {
-    // Check if language switch got set to close and if mode is dropdown
-    if (this.languageSwitchDropdown && !this.langSwitchOpen && this.mode == 'dropdown') {
-      this.languageSwitchDropdown.classList.remove('open');
-      // Check if element has transition applied and whether user prefers to see animations or not
-      if (ui_service.elementHasTransition(this.languageSwitchDropdown, 'transform') &&
-        !ui_service.userPrefersReducedMotion()) {
-        // Wait for CSS transition 'transform' to end before continuing
-        return new Promise(resolve => {
-          var _a;
-          (_a = this.languageSwitchDropdown) === null || _a === void 0 ? void 0 : _a.addEventListener('transitionend', event => {
-            if (event.propertyName === 'transform') {
-              resolve(true);
-            }
-          });
-        });
-      }
-    }
-  }
-  componentDidUpdate() {
-    // Language switch got set to open
-    if (this.languageSwitchDropdown && this.langSwitchOpen) {
-      // Force browser to redraw/refresh DOM before adding 'open' class
-      this.languageSwitchDropdown.getBoundingClientRect();
-      this.languageSwitchDropdown.classList.add('open');
-    }
-  }
-  /**
-   * Open or close the language switch programatically
-   * @param force Boolean to force a state
-   * @returns Boolean indicating new state
-   */
-  async toggleDropdown(force) {
-    this.langSwitchOpen = force !== null && force !== void 0 ? force : !this.langSwitchOpen;
-    this.dropdownToggled.emit({ open: this.langSwitchOpen, element: this.host });
-    return this.langSwitchOpen;
-  }
-  /**
-   * Emit a language change to the parent component
-   *
-   * @param newLang Config of the new language
-   */
-  switchLanguage(newLang) {
-    this.languageChanged.emit(newLang.lang);
-    this.toggleDropdown(false);
-  }
-  getMergedLanguageConfig(config, overrides) {
-    if (overrides === undefined) {
-      return config;
-    }
-    return config.map(langConfig => Object.assign({}, langConfig, overrides.find(l => l.lang === langConfig.lang)));
-  }
-  setDropdownRef(element) {
-    this.languageSwitchDropdown = element;
-  }
-  render() {
-    var _a;
-    if (((_a = store.state.localizedConfig) === null || _a === void 0 ? void 0 : _a.header) === undefined)
-      return;
-    const config = store.state.localizedConfig.header;
-    const mergedConfig = this.getMergedLanguageConfig(config.navLang, store.state.languageSwitchOverrides);
-    return (index.h(index.Host, null, index.h("div", { class: `language-switch ${this.mode}` }, index.h(svgSprite_component.SvgSprite, null), this.mode === 'dropdown' ? (index.h("button", { class: "lang-btn", "aria-expanded": `${this.langSwitchOpen}`, "aria-haspopup": "listbox", onClick: () => this.toggleDropdown() }, index.h("span", { class: "visually-hidden" }, config.translations.navLangAriaLabel, ", ", language_service.translate('Current language is English')), index.h("span", { "aria-hidden": "true" }, store.state.currentLanguage), index.h(svgIcon_component.SvgIcon, { name: "pi-arrow-down", classNames: this.langSwitchOpen ? 'rotated' : '' }))) : (index.h("span", { class: "bold current-language" }, index.h("span", { class: "visually-hidden" }, language_service.translate('Current language is English')), index.h("span", null, store.state.currentLanguage))), this.langSwitchOpen || this.mode === 'list' ? (index.h(PostLanguageSwitchList, { navLang: mergedConfig, switchLanguage: e => this.switchLanguage(e), dropdownRef: e => e !== undefined && this.setDropdownRef(e) })) : null)));
-  }
-  get host() { return index.getElement(this); }
-};
-PostLanguageSwitch.style = postLanguageSwitchCss;
-
-exports.post_language_switch = PostLanguageSwitch;
+exports.post_language_switch = postLanguageSwitch.PostLanguageSwitch;
 
 //# sourceMappingURL=post-language-switch.cjs.entry.js.map

package/dist/cjs/post-language-switch.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"post-language-switch.entry.cjs.js","mappings":"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","names":["state","h","translate","elementHasTransition","userPrefersReducedMotion","Host","SvgSprite","SvgIcon"],"sources":["src/components/post-language-switch/components/post-language-switch-list.tsx","src/components/post-language-switch/post-language-switch.scss?tag=post-language-switch&encapsulation=shadow","src/components/post-language-switch/post-language-switch.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { NavLangEntity } from '../../../models/header.model';\nimport { translate } from '../../../services/language.service';\nimport { state } from '../../../data/store';\n\nexport const PostLanguageSwitchList = (props: {\n  navLang: NavLangEntity[];\n  switchLanguage: (lang: NavLangEntity) => void;\n  dropdownRef: (element: HTMLElement | undefined) => void;\n}) => {\n  if (state.localizedConfig?.header === undefined) return;\n  const config = state.localizedConfig.header;\n\n  return (\n    <nav\n      class=\"language-switch-dropdown\"\n      ref={e => props.dropdownRef(e)}\n      aria-label={config.translations.navLangAriaLabel}\n    >\n      <ul aria-label={translate('Change language')}>\n        {props.navLang\n          .filter(lang => !lang.isCurrent)\n          .map(lang => {\n            const TagName = lang.url ? 'a' : 'button';\n            return (\n              <li key={lang.lang}>\n                <TagName\n                  onClick={() => props.switchLanguage(lang)}\n                  href={lang.url}\n                  lang={lang.lang}\n                  title={lang.title}\n                >\n                  <span class=\"visually-hidden\">{lang.title}</span>\n                  <span aria-hidden=\"true\">{lang.text}</span>\n                </TagName>\n              </li>\n            );\n          })}\n      </ul>\n    </nav>\n  );\n};\n","@use '@swisspost/design-system-styles/variables/color';\n@use '@swisspost/design-system-styles/functions';\n@use '../../utils/utils.scss';\n\n:host {\n  --separator-display: none;\n  --separator-height: 100%;\n\n  display: flex;\n  align-items: center;\n  align-self: stretch;\n\n  &::before {\n    position: relative;\n    content: '';\n    display: var(--separator-display);\n    height: var(--separator-height);\n    border-left: 1px solid color.$gray-10;\n  }\n}\n\n.lang-btn {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 0 1rem;\n  border: none;\n  box-shadow: none;\n  background: none;\n  text-transform: uppercase;\n  cursor: pointer;\n  color: rgba(color.$black, 0.8);\n\n  &:hover,\n  &:focus {\n    color: black;\n    position: relative;\n    z-index: 1;\n  }\n\n  svg {\n    width: 1.5em;\n    height: 1.5em;\n    transition: transform 250ms;\n\n    &.rotated {\n      transform: rotate(180deg);\n    }\n  }\n}\n\n.language-switch {\n  position: relative;\n  align-self: stretch;\n  height: 100%;\n\n  &.list {\n    margin-top: 1.5rem;\n    display: flex;\n    align-items: center;\n  }\n}\n\n.current-language {\n  text-transform: uppercase;\n  border-right: 1px solid color.$gray-20;\n  padding: 0.5rem 1rem 0.5rem 0;\n}\n\n.language-switch-dropdown {\n  .dropdown & {\n    position: absolute;\n    top: 100%;\n    width: 100%;\n    background: white;\n    box-shadow: 0 1px 2px rgb(0 0 0 / 20%), 0 2px 6px 2px rgb(0 0 0 / 10%);\n    z-index: 1;\n    transform: scale(0.1);\n    transform-origin: center top;\n    transition: transform 0.1s;\n    margin-top: var(--language-dropdown-margin-top);\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n\n    &.open {\n      transform: scale(1);\n    }\n  }\n\n  ul {\n    @extend %no-list;\n\n    .list & {\n      display: flex;\n\n      > li + li {\n        border-left: 1px solid color.$gray-20;\n      }\n    }\n  }\n\n  a,\n  button {\n    @extend %nav-link;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: functions.px-to-rem(48px);\n    padding: 0 0.25rem;\n    text-transform: uppercase;\n    cursor: pointer;\n    transition: background-color 200ms, color 200ms;\n\n    &:hover,\n    &:focus {\n      background: color.$gray-background;\n    }\n\n    span {\n      // Worst case scenario\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    }\n\n    .list & {\n      color: black;\n      height: auto;\n      padding: 0.5rem 1rem;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { SvgSprite } from '../../utils/svg-sprite.component';\nimport { SvgIcon } from '../../utils/svg-icon.component';\nimport { state } from '../../data/store';\nimport {\n  DropdownElement,\n  DropdownEvent,\n  HasDropdown,\n  NavLangEntity,\n} from '../../models/header.model';\nimport { elementHasTransition, userPrefersReducedMotion } from '../../services/ui.service';\nimport { translate } from '../../services/language.service';\nimport { PostLanguageSwitchList } from './components/post-language-switch-list';\nimport { IAvailableLanguage } from '../../models/language.model';\n\n@Component({\n  tag: 'post-language-switch',\n  styleUrl: 'post-language-switch.scss',\n  shadow: true,\n})\nexport class PostLanguageSwitch implements HasDropdown {\n  @Prop() mode: 'dropdown' | 'list';\n  @State() langSwitchOpen = false;\n  @Element() host: DropdownElement;\n  @Event() dropdownToggled: EventEmitter<DropdownEvent>;\n  @Event({ bubbles: true }) languageChanged: EventEmitter<string>;\n  private languageSwitchDropdown: HTMLElement | undefined;\n\n  componentWillUpdate() {\n    // Check if language switch got set to close and if mode is dropdown\n    if (this.languageSwitchDropdown && !this.langSwitchOpen && this.mode == 'dropdown') {\n      this.languageSwitchDropdown.classList.remove('open');\n\n      // Check if element has transition applied and whether user prefers to see animations or not\n      if (\n        elementHasTransition(this.languageSwitchDropdown, 'transform') &&\n        !userPrefersReducedMotion()\n      ) {\n        // Wait for CSS transition 'transform' to end before continuing\n        return new Promise<boolean>(resolve => {\n          this.languageSwitchDropdown?.addEventListener('transitionend', event => {\n            if (event.propertyName === 'transform') {\n              resolve(true);\n            }\n          });\n        });\n      }\n    }\n  }\n\n  componentDidUpdate() {\n    // Language switch got set to open\n    if (this.languageSwitchDropdown && this.langSwitchOpen) {\n      // Force browser to redraw/refresh DOM before adding 'open' class\n      this.languageSwitchDropdown.getBoundingClientRect();\n      this.languageSwitchDropdown.classList.add('open');\n    }\n  }\n\n  /**\n   * Open or close the language switch programatically\n   * @param force Boolean to force a state\n   * @returns Boolean indicating new state\n   */\n  @Method()\n  async toggleDropdown(force?: boolean) {\n    this.langSwitchOpen = force ?? !this.langSwitchOpen;\n    this.dropdownToggled.emit({ open: this.langSwitchOpen, element: this.host });\n    return this.langSwitchOpen;\n  }\n\n  /**\n   * Emit a language change to the parent component\n   *\n   * @param newLang Config of the new language\n   */\n  switchLanguage(newLang: NavLangEntity) {\n    this.languageChanged.emit(newLang.lang);\n    this.toggleDropdown(false);\n  }\n\n  private getMergedLanguageConfig(config: NavLangEntity[], overrides?: IAvailableLanguage[]) {\n    if (overrides === undefined) {\n      return config;\n    }\n\n    return config.map(langConfig =>\n      Object.assign(\n        {},\n        langConfig,\n        overrides.find(l => l.lang === langConfig.lang),\n      ),\n    );\n  }\n\n  private setDropdownRef(element: HTMLElement | undefined) {\n    this.languageSwitchDropdown = element;\n  }\n\n  render() {\n    if (state.localizedConfig?.header === undefined) return;\n    const config = state.localizedConfig.header;\n    const mergedConfig = this.getMergedLanguageConfig(\n      config.navLang,\n      state.languageSwitchOverrides,\n    );\n\n    return (\n      <Host>\n        <div class={`language-switch ${this.mode}`}>\n          <SvgSprite />\n          {this.mode === 'dropdown' ? (\n            <button\n              class=\"lang-btn\"\n              aria-expanded={`${this.langSwitchOpen}`}\n              aria-haspopup=\"listbox\"\n              onClick={() => this.toggleDropdown()}\n            >\n              <span class=\"visually-hidden\">\n                {config.translations.navLangAriaLabel}, {translate('Current language is English')}\n              </span>\n              <span aria-hidden=\"true\">{state.currentLanguage}</span>\n              <SvgIcon name=\"pi-arrow-down\" classNames={this.langSwitchOpen ? 'rotated' : ''} />\n            </button>\n          ) : (\n            <span class=\"bold current-language\">\n              <span class=\"visually-hidden\">{translate('Current language is English')}</span>\n              <span>{state.currentLanguage}</span>\n            </span>\n          )}\n          {this.langSwitchOpen || this.mode === 'list' ? (\n            <PostLanguageSwitchList\n              navLang={mergedConfig}\n              switchLanguage={e => this.switchLanguage(e)}\n              dropdownRef={e => e !== undefined && this.setDropdownRef(e)}\n            />\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"post-language-switch.entry.cjs.js","mappings":";;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/post-logo-5867ad55.js

@@ -0,0 +1,25 @@
+'use strict';
+
+const index = require('./index-4bd0adf1.js');
+const store = require('./store-77668e50.js');
+
+const postLogoCss = "@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:700;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:700;font-style:italic;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:400;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:400;font-style:italic;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:300;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:300;font-style:italic;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff\") format(\"woff\")}.visually-hidden{position:absolute;width:1px;height:1px;border:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}.btn-blank{background-color:rgba(0,0,0,0);border:none;border-radius:0;padding:0}.nav-link{outline:none;outline-offset:2px;text-decoration:none;color:rgba(0,0,0,.8);-webkit-transition:color 200ms;transition:color 200ms;background-color:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;border:0;margin:0;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:.5rem}.nav-link:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color)}.nav-link:hover,.nav-link:focus{color:#000}.nav-link:is(:focus-visible,:focus-within,.pretend-focus){z-index:1;position:relative}.nav-link>svg{width:1.4em;height:1.4em;-ms-flex-negative:0;flex-shrink:0}.nav-link>span{-ms-flex-negative:1;flex-shrink:1}.no-list{list-style:none;padding-left:0;margin-top:0;margin-bottom:0}*,:host,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{font-family:\"Frutiger Neue For Post\",system-ui,sans-serif}button{font:inherit;padding:0}a,button{border-radius:4px;outline:none;outline-offset:2px}a:is(:focus-visible,:focus-within,.pretend-focus),button:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color);border-radius:4px}img,svg{max-width:100%;max-height:100%}@media (forced-colors: active){svg{color:#fff}}.box>*:first-child{margin-top:0}.box>*:last-child{margin-bottom:0}.mirrored{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.bold{font-weight:700}.light{font-weight:300}.d-flex{display:-ms-flexbox;display:flex}.d-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.align-items-center{-ms-flex-align:center;align-items:center}@media (min-width: 1441px){.wide-container{margin:0 auto;max-width:1440px}}@media (max-width: 599.98px){.container{padding-right:16px;padding-left:16px}}@media (min-width: 600px)and (max-width: 1023.98px){.container{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.container{padding-right:40px;padding-left:40px}}@media (max-width: -0.02px){.hidden-xs{display:none}}@media (max-width: 399.98px){.hidden-sm{display:none}}@media (max-width: 599.98px){.hidden-rg{display:none}}@media (max-width: 779.98px){.hidden-md{display:none}}@media (max-width: 1023.98px){.hidden-lg{display:none}}@media (max-width: 1279.98px){.hidden-xl{display:none}}@media (max-width: 1440.98px){.hidden-xxl{display:none}}:host{display:block;aspect-ratio:1/1}.logo{display:block;-ms-flex-align:center;align-items:center;background:#fc0}.logo svg{display:block;width:100%;height:100%}";
+
+const PostLogo = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    var _a;
+    if (((_a = store.state.localizedConfig) === null || _a === void 0 ? void 0 : _a.header.logo) === undefined)
+      return;
+    const config = store.state.localizedConfig.header.logo;
+    return (index.h(index.Host, null, index.h("a", { href: config.logoLink, class: "logo" }, index.h("span", { class: "visually-hidden" }, config.logoLinkTitle), index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, index.h("g", { id: "Logo" }, index.h("rect", { fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), index.h("polygon", { fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), index.h("path", { d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
+  }
+  get host() { return index.getElement(this); }
+};
+PostLogo.style = postLogoCss;
+
+exports.PostLogo = PostLogo;
+
+//# sourceMappingURL=post-logo-5867ad55.js.map

package/dist/cjs/post-logo-5867ad55.js.map

@@ -0,0 +1 @@
+{"file":"post-logo-5867ad55.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,o8IAAo8I;;MCQ38I,QAAQ;;;;EAGnB,MAAM;;IACJ,IAAI,CAAA,MAAAA,WAAK,CAAC,eAAe,0CAAE,MAAM,CAAC,IAAI,MAAK,SAAS;MAAE,OAAO;IAC7D,MAAM,MAAM,GAAGA,WAAK,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC;IAEjD,QACEC,QAACC,UAAI,QACHD,eAAG,IAAI,EAAE,MAAM,CAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,IACpCA,kBAAM,KAAK,EAAC,iBAAiB,IAAE,MAAM,CAAC,aAAa,CAAQ,EAC3DA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,iBAAa,MAAM,IAC5EA,eAAG,EAAE,EAAC,MAAM,IACVA,kBAAM,IAAI,EAAC,SAAS,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,EAC1DA,qBACE,IAAI,EAAC,SAAS,EACd,MAAM,EAAC,qLAAqL,GAC5L,EACFA,kBAAM,CAAC,EAAC,4PAA4P,GAAG,CACrQ,CACA,CACJ,CACC,EACP;GACH;;;;;;;","names":["state","h","Host"],"sources":["src/components/post-logo/post-logo.scss?tag=post-logo&encapsulation=shadow","src/components/post-logo/post-logo.tsx"],"sourcesContent":["@use '@swisspost/design-system-styles/variables/color';\n@use '../../utils/utils.scss';\n@use '../../utils/mixins.scss';\n\n:host {\n  display: block;\n  aspect-ratio: 1/1;\n}\n\n.logo {\n  display: block;\n  align-items: center;\n  background: color.$yellow;\n\n  svg {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n}\n","import { Component, Host, h, Element } from '@stencil/core';\nimport { state } from '../../data/store';\n\n@Component({\n  tag: 'post-logo',\n  styleUrl: 'post-logo.scss',\n  shadow: true,\n})\nexport class PostLogo {\n  @Element() host: HTMLPostLogoElement;\n\n  render() {\n    if (state.localizedConfig?.header.logo === undefined) return;\n    const config = state.localizedConfig.header.logo;\n\n    return (\n      <Host>\n        <a href={config.logoLink} class=\"logo\">\n          <span class=\"visually-hidden\">{config.logoLinkTitle}</span>\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 72 72\" aria-hidden=\"true\">\n            <g id=\"Logo\">\n              <rect fill=\"#ffcc00\" x=\"0\" y=\"0\" width=\"72\" height=\"72\" />\n              <polygon\n                fill=\"#ff0000\"\n                points=\"34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3\"\n              />\n              <path d=\"M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z\" />\n            </g>\n          </svg>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/post-logo.cjs.entry.js

@@ -2,26 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4bd0adf1.js');
-const store = require('./store-77668e50.js');
+const postLogo = require('./post-logo-5867ad55.js');
+require('./index-4bd0adf1.js');
+require('./store-77668e50.js');
 
-const postLogoCss = "@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:700;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:700;font-style:italic;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:400;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:400;font-style:italic;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:300;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:300;font-style:italic;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff2\") format(\"woff2\"),url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff\") format(\"woff\")}.visually-hidden{position:absolute;width:1px;height:1px;border:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}.btn-blank{background-color:rgba(0,0,0,0);border:none;border-radius:0;padding:0}.nav-link{outline:none;outline-offset:2px;text-decoration:none;color:rgba(0,0,0,.8);-webkit-transition:color 200ms;transition:color 200ms;background-color:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;border:0;margin:0;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:.5rem}.nav-link:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color)}.nav-link:hover,.nav-link:focus{color:#000}.nav-link:is(:focus-visible,:focus-within,.pretend-focus){z-index:1;position:relative}.nav-link>svg{width:1.4em;height:1.4em;-ms-flex-negative:0;flex-shrink:0}.nav-link>span{-ms-flex-negative:1;flex-shrink:1}.no-list{list-style:none;padding-left:0;margin-top:0;margin-bottom:0}*,:host,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{font-family:\"Frutiger Neue For Post\",system-ui,sans-serif}button{font:inherit;padding:0}a,button{border-radius:4px;outline:none;outline-offset:2px}a:is(:focus-visible,:focus-within,.pretend-focus),button:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color);border-radius:4px}img,svg{max-width:100%;max-height:100%}@media (forced-colors: active){svg{color:#fff}}.box>*:first-child{margin-top:0}.box>*:last-child{margin-bottom:0}.mirrored{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.bold{font-weight:700}.light{font-weight:300}.d-flex{display:-ms-flexbox;display:flex}.d-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.align-items-center{-ms-flex-align:center;align-items:center}@media (min-width: 1441px){.wide-container{margin:0 auto;max-width:1440px}}@media (max-width: 599.98px){.container{padding-right:16px;padding-left:16px}}@media (min-width: 600px)and (max-width: 1023.98px){.container{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.container{padding-right:40px;padding-left:40px}}@media (max-width: -0.02px){.hidden-xs{display:none}}@media (max-width: 399.98px){.hidden-sm{display:none}}@media (max-width: 599.98px){.hidden-rg{display:none}}@media (max-width: 779.98px){.hidden-md{display:none}}@media (max-width: 1023.98px){.hidden-lg{display:none}}@media (max-width: 1279.98px){.hidden-xl{display:none}}@media (max-width: 1440.98px){.hidden-xxl{display:none}}:host{display:block;aspect-ratio:1/1}.logo{display:block;-ms-flex-align:center;align-items:center;background:#fc0}.logo svg{display:block;width:100%;height:100%}";
 
-const PostLogo = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    var _a;
-    if (((_a = store.state.localizedConfig) === null || _a === void 0 ? void 0 : _a.header.logo) === undefined)
-      return;
-    const config = store.state.localizedConfig.header.logo;
-    return (index.h(index.Host, null, index.h("a", { href: config.logoLink, class: "logo" }, index.h("span", { class: "visually-hidden" }, config.logoLinkTitle), index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, index.h("g", { id: "Logo" }, index.h("rect", { fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), index.h("polygon", { fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), index.h("path", { d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
-  }
-  get host() { return index.getElement(this); }
-};
-PostLogo.style = postLogoCss;
 
-exports.post_logo = PostLogo;
+exports.post_logo = postLogo.PostLogo;
 
 //# sourceMappingURL=post-logo.cjs.entry.js.map

package/dist/cjs/post-logo.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"post-logo.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,o8IAAo8I;;MCQ38I,QAAQ;;;;EAGnB,MAAM;;IACJ,IAAI,CAAA,MAAAA,WAAK,CAAC,eAAe,0CAAE,MAAM,CAAC,IAAI,MAAK,SAAS;MAAE,OAAO;IAC7D,MAAM,MAAM,GAAGA,WAAK,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC;IAEjD,QACEC,QAACC,UAAI,QACHD,eAAG,IAAI,EAAE,MAAM,CAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,IACpCA,kBAAM,KAAK,EAAC,iBAAiB,IAAE,MAAM,CAAC,aAAa,CAAQ,EAC3DA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,iBAAa,MAAM,IAC5EA,eAAG,EAAE,EAAC,MAAM,IACVA,kBAAM,IAAI,EAAC,SAAS,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,EAC1DA,qBACE,IAAI,EAAC,SAAS,EACd,MAAM,EAAC,qLAAqL,GAC5L,EACFA,kBAAM,CAAC,EAAC,4PAA4P,GAAG,CACrQ,CACA,CACJ,CACC,EACP;GACH;;;;;;;","names":["state","h","Host"],"sources":["src/components/post-logo/post-logo.scss?tag=post-logo&encapsulation=shadow","src/components/post-logo/post-logo.tsx"],"sourcesContent":["@use '@swisspost/design-system-styles/variables/color';\n@use '../../utils/utils.scss';\n@use '../../utils/mixins.scss';\n\n:host {\n  display: block;\n  aspect-ratio: 1/1;\n}\n\n.logo {\n  display: block;\n  align-items: center;\n  background: color.$yellow;\n\n  svg {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n}\n","import { Component, Host, h, Element } from '@stencil/core';\nimport { state } from '../../data/store';\n\n@Component({\n  tag: 'post-logo',\n  styleUrl: 'post-logo.scss',\n  shadow: true,\n})\nexport class PostLogo {\n  @Element() host: HTMLPostLogoElement;\n\n  render() {\n    if (state.localizedConfig?.header.logo === undefined) return;\n    const config = state.localizedConfig.header.logo;\n\n    return (\n      <Host>\n        <a href={config.logoLink} class=\"logo\">\n          <span class=\"visually-hidden\">{config.logoLinkTitle}</span>\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 72 72\" aria-hidden=\"true\">\n            <g id=\"Logo\">\n              <rect fill=\"#ffcc00\" x=\"0\" y=\"0\" width=\"72\" height=\"72\" />\n              <polygon\n                fill=\"#ff0000\"\n                points=\"34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3\"\n              />\n              <path d=\"M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z\" />\n            </g>\n          </svg>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"post-logo.entry.cjs.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}