@swisspost/internet-header 1.5.0-beta.2 → 1.5.0

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

@@ -1,97 +1,97 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-066666f4.js';
-import { S as SvgSprite } from './svg-sprite.component-ec0ac38c.js';
-import { S as SvgIcon } from './svg-icon.component-1b1b27a2.js';
-import { s as state } from './store-d495dc07.js';
-import { e as elementHasTransition, u as userPrefersReducedMotion } from './ui.service-1d9b0f51.js';
-import { t as translate } from './language.service-e49858e0.js';
+import { S as SvgSprite } from './svg-sprite.component-cf60303f.js';
+import { S as SvgIcon } from './svg-icon.component-e09b4bf9.js';
+import { s as state } from './store-837c3490.js';
+import { e as elementHasTransition, u as userPrefersReducedMotion } from './ui.service-2fbc9c45.js';
+import { t as translate } from './language.service-023d2711.js';
 
-const PostLanguageSwitchList = (props) => (h("nav", { class: "language-switch-dropdown", ref: e => props.dropdownRef(e) },
-  h("h3", { class: "visually-hidden" }, translate('Change language')),
-  h("ul", null, props.navLang
-    .filter(lang => !lang.isCurrent)
-    .map(lang => {
-    const TagName = lang.url === null ? 'button' : 'a';
-    return (h("li", { key: lang.lang },
-      h(TagName, { onClick: () => props.switchLanguage(lang), href: lang.url, lang: lang.lang, title: lang.title },
-        h("span", { class: "visually-hidden" }, lang.title),
-        h("span", { "aria-hidden": "true" }, lang.text))));
+const PostLanguageSwitchList = (props) => (h("nav", { class: "language-switch-dropdown", ref: e => props.dropdownRef(e) },
+  h("h3", { class: "visually-hidden" }, translate('Change language')),
+  h("ul", null, props.navLang
+    .filter(lang => !lang.isCurrent)
+    .map(lang => {
+    const TagName = lang.url === null ? 'button' : 'a';
+    return (h("li", { key: lang.lang },
+      h(TagName, { onClick: () => props.switchLanguage(lang), href: lang.url, lang: lang.lang, title: lang.title },
+        h("span", { class: "visually-hidden" }, lang.title),
+        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: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: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\")}*,: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}img,svg{max-width:100%;max-height:100%}@media (forced-colors: active){svg{color:white}}.language-switch-dropdown ul,.no-list{list-style:none;padding-left:0;margin-top:0;margin-bottom:0}.btn-blank{background-color:transparent;border:none;border-radius:0;padding:0}.language-switch-dropdown a,.language-switch-dropdown button,.nav-link{text-decoration:none;color:rgba(0, 0, 0, 0.8);-webkit-transition:color 200ms;transition:color 200ms;background-color:transparent;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.5rem}.language-switch-dropdown a:hover,.language-switch-dropdown button:hover,.nav-link:hover,.language-switch-dropdown a:focus,.language-switch-dropdown button:focus,.nav-link:focus{color:black}.language-switch-dropdown a>svg,.language-switch-dropdown button>svg,.nav-link>svg{width:1.4em;height:1.4em;-ms-flex-negative:0;flex-shrink:0}.language-switch-dropdown a>span,.language-switch-dropdown button>span,.nav-link>span{-ms-flex-negative:1;flex-shrink:1}.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}}.visually-hidden{position:absolute;width:1px;height:1px;border:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}@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{display:var(--separator-display);height:var(--separator-height);border-left:1px solid #e6e6e6;content:\"\"}.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, 0.8)}.lang-btn:hover,.lang-btn:focus{color:black}.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 #cccccc;padding:0.5rem 1rem 0.5rem 0}.dropdown .language-switch-dropdown{position:absolute;top:100%;width:100%;background:white;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 6px 2px rgba(0, 0, 0, 0.1);box-shadow:0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 6px 2px rgba(0, 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 0.1s;transition:-webkit-transform 0.1s;transition:transform 0.1s;transition:transform 0.1s, -webkit-transform 0.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 #cccccc}.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 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:black;height:auto;padding:0.5rem 1rem}";
 
-const PostLanguageSwitch = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.dropdownToggled = createEvent(this, "dropdownToggled", 7);
-    this.languageChanged = 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 (elementHasTransition(this.languageSwitchDropdown, 'transform') &&
-        !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 = state.localizedConfig) === null || _a === void 0 ? void 0 : _a.header) === undefined)
-      return;
-    const config = state.localizedConfig.header;
-    const mergedConfig = this.getMergedLanguageConfig(config.navLang, state.languageSwitchOverrides);
-    return (h(Host, null, h("div", { class: `language-switch ${this.mode}` }, h(SvgSprite, null), this.mode === 'dropdown' ? (h("button", { class: "lang-btn", "aria-expanded": `${this.langSwitchOpen}`, "aria-haspopup": "listbox", onClick: () => this.toggleDropdown() }, h("span", { class: "visually-hidden" }, config.translations.navLangAriaLabel), h("span", { "aria-hidden": "true" }, state.currentLanguage), h(SvgIcon, { name: "pi-arrow-down", classNames: this.langSwitchOpen ? 'rotated' : '' }))) : (h("span", { class: "bold current-language" }, h("span", { class: "visually-hidden" }, translate('Current language is English')), h("span", null, state.currentLanguage))), this.langSwitchOpen || this.mode === 'list' ? (h(PostLanguageSwitchList, { navLang: mergedConfig, switchLanguage: e => this.switchLanguage(e), dropdownRef: e => e !== undefined && this.setDropdownRef(e) })) : null)));
-  }
-  get host() { return getElement(this); }
-};
+const PostLanguageSwitch = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.dropdownToggled = createEvent(this, "dropdownToggled", 7);
+    this.languageChanged = 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 (elementHasTransition(this.languageSwitchDropdown, 'transform') &&
+        !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 = state.localizedConfig) === null || _a === void 0 ? void 0 : _a.header) === undefined)
+      return;
+    const config = state.localizedConfig.header;
+    const mergedConfig = this.getMergedLanguageConfig(config.navLang, state.languageSwitchOverrides);
+    return (h(Host, null, h("div", { class: `language-switch ${this.mode}` }, h(SvgSprite, null), this.mode === 'dropdown' ? (h("button", { class: "lang-btn", "aria-expanded": `${this.langSwitchOpen}`, "aria-haspopup": "listbox", onClick: () => this.toggleDropdown() }, h("span", { class: "visually-hidden" }, config.translations.navLangAriaLabel), h("span", { "aria-hidden": "true" }, state.currentLanguage), h(SvgIcon, { name: "pi-arrow-down", classNames: this.langSwitchOpen ? 'rotated' : '' }))) : (h("span", { class: "bold current-language" }, h("span", { class: "visually-hidden" }, translate('Current language is English')), h("span", null, state.currentLanguage))), this.langSwitchOpen || this.mode === 'list' ? (h(PostLanguageSwitchList, { navLang: mergedConfig, switchLanguage: e => this.switchLanguage(e), dropdownRef: e => e !== undefined && this.setDropdownRef(e) })) : null)));
+  }
+  get host() { return getElement(this); }
+};
 PostLanguageSwitch.style = postLanguageSwitchCss;
 
 export { PostLanguageSwitch as post_language_switch };

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

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

@@ -1,61 +1,61 @@
 import { h, r as registerInstance, H as Host, g as getElement } from './index-066666f4.js';
 import { t as throttle } from './index-a75df186.js';
-import { s as state } from './store-d495dc07.js';
+import { s as state } from './store-837c3490.js';
 
-const LogoSprite = () => (h("svg", { "aria-hidden": "true", style: { display: 'none' } },
-  h("symbol", { id: "favicon", viewBox: "0 0 48 48" },
-    h("g", { "clip-path": "url(#a)" },
-      h("path", { fill: "#FC0", d: "M47.2 0H0v47.2h47.2V0Z" }),
-      h("path", { fill: "#fff", "fill-rule": "evenodd", d: "m18.68 35.91 1.48-7.02H6.42l-1.47 7.02h13.73Z", "clip-rule": "evenodd" }),
-      h("path", { fill: "#000", "fill-rule": "evenodd", d: "M16.96 16.56c-.47-.07-.94-.1-1.42-.1H11.6L8.5 31.1h3.1l.95-4.47h1.8c.74.02 1.48-.07 2.18-.27a5.8 5.8 0 0 0 4-4.59c.49-2.73-.87-4.76-3.57-5.2Zm.47 5.06a2.63 2.63 0 0 1-2.06 2.22c-.33.06-.66.1-1 .1h-1.25l1-4.78h1.36c.31-.01.62.03.92.11.77.26 1.24 1.03 1.03 2.35", "clip-rule": "evenodd" }),
-      h("path", { fill: "red", "fill-rule": "evenodd", d: "m34.5 16.43 1.86-8.84H24.63l-2.45 11.58h2.9l1.87-8.84h5.93L31 19.17h8.8l-1.17 5.53h-8.75l-1.75 8.28H21.5l-.57 2.78h9.54l1.75-8.3h8.72l2.34-11.03H34.5Z", "clip-rule": "evenodd" })),
-    h("defs", null,
-      h("clipPath", { id: "a" },
-        h("path", { fill: "#fff", d: "M0 0h47.2v47.2H0z" }))))));
-const FaviconSvg = (props) => (h("svg", { viewBox: "0 0 48 48", class: props.className, "aria-hidden": "true" },
+const LogoSprite = () => (h("svg", { "aria-hidden": "true", style: { display: 'none' } },
+  h("symbol", { id: "favicon", viewBox: "0 0 48 48" },
+    h("g", { "clip-path": "url(#a)" },
+      h("path", { fill: "#FC0", d: "M47.2 0H0v47.2h47.2V0Z" }),
+      h("path", { fill: "#fff", "fill-rule": "evenodd", d: "m18.68 35.91 1.48-7.02H6.42l-1.47 7.02h13.73Z", "clip-rule": "evenodd" }),
+      h("path", { fill: "#000", "fill-rule": "evenodd", d: "M16.96 16.56c-.47-.07-.94-.1-1.42-.1H11.6L8.5 31.1h3.1l.95-4.47h1.8c.74.02 1.48-.07 2.18-.27a5.8 5.8 0 0 0 4-4.59c.49-2.73-.87-4.76-3.57-5.2Zm.47 5.06a2.63 2.63 0 0 1-2.06 2.22c-.33.06-.66.1-1 .1h-1.25l1-4.78h1.36c.31-.01.62.03.92.11.77.26 1.24 1.03 1.03 2.35", "clip-rule": "evenodd" }),
+      h("path", { fill: "red", "fill-rule": "evenodd", d: "m34.5 16.43 1.86-8.84H24.63l-2.45 11.58h2.9l1.87-8.84h5.93L31 19.17h8.8l-1.17 5.53h-8.75l-1.75 8.28H21.5l-.57 2.78h9.54l1.75-8.3h8.72l2.34-11.03H34.5Z", "clip-rule": "evenodd" })),
+    h("defs", null,
+      h("clipPath", { id: "a" },
+        h("path", { fill: "#fff", d: "M0 0h47.2v47.2H0z" }))))));
+const FaviconSvg = (props) => (h("svg", { viewBox: "0 0 48 48", class: props.className, "aria-hidden": "true" },
   h("use", { href: "#favicon" })));
 
 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: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: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\")}*,: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}img,svg{max-width:100%;max-height:100%}@media (forced-colors: active){svg{color:white}}.no-list{list-style:none;padding-left:0;margin-top:0;margin-bottom:0}.btn-blank{background-color:transparent;border:none;border-radius:0;padding:0}.nav-link{text-decoration:none;color:rgba(0, 0, 0, 0.8);-webkit-transition:color 200ms;transition:color 200ms;background-color:transparent;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.5rem}.nav-link:hover,.nav-link:focus{color:black}.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}.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}}.visually-hidden{position:absolute;width:1px;height:1px;border:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}@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}.logo{display:block;-ms-flex-align:center;align-items:center;background:#fc0}svg,.logo-svg{display:block;height:var(--header-height)}.square-logo{display:block}@media (min-width: 400px){.square-logo{display:none}}.full-logo{display:none}@media (min-width: 400px){.full-logo{display:block}}";
 
-const PostLogo = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.showFaviconLogo = undefined;
-    // Register window resize event listener and a resize observer on the mainnav controls (they change size while controls are being loaded) to display an accurately sized logo
-    this.throttledResize = throttle(300, () => this.handleResize());
-    window.addEventListener('resize', this.throttledResize, { passive: true });
-    this.resizeObserver = new ResizeObserver(this.handleResize.bind(this));
-    // Initially call the resize handler
-    this.handleResize();
-  }
-  componentDidLoad() {
-    var _a;
-    const mainNavControls = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.main-navigation-controls');
-    if (mainNavControls) {
-      this.resizeObserver.observe(mainNavControls);
-    }
-  }
-  disconnectedCallback() {
-    window.removeEventListener('resize', this.throttledResize);
-    this.resizeObserver.disconnect();
-  }
-  handleResize() {
-    var _a, _b;
-    const mainNavControls = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.main-navigation-controls');
-    const menuButton = (_b = this.host.parentElement) === null || _b === void 0 ? void 0 : _b.querySelector('.menu-button');
-    if (mainNavControls && menuButton)
-      this.showFaviconLogo =
-        window.innerWidth - (150 + mainNavControls.clientWidth + menuButton.clientWidth) <= 0;
-  }
-  render() {
-    var _a;
-    if (((_a = state.localizedConfig) === null || _a === void 0 ? void 0 : _a.header.logo) === undefined)
-      return;
-    const config = state.localizedConfig.header.logo;
-    return (h(Host, null, h(LogoSprite, null), h("a", { href: config.logoLink, class: "logo" }, h("span", { class: "visually-hidden" }, config.logoLinkTitle), h(FaviconSvg, { className: "square-logo" }), h("img", { class: "logo-svg full-logo", src: config.logoSvg, alt: config.logoText }))));
-  }
-  get host() { return getElement(this); }
-};
+const PostLogo = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.showFaviconLogo = undefined;
+    // Register window resize event listener and a resize observer on the mainnav controls (they change size while controls are being loaded) to display an accurately sized logo
+    this.throttledResize = throttle(300, () => this.handleResize());
+    window.addEventListener('resize', this.throttledResize, { passive: true });
+    this.resizeObserver = new ResizeObserver(this.handleResize.bind(this));
+    // Initially call the resize handler
+    this.handleResize();
+  }
+  componentDidLoad() {
+    var _a;
+    const mainNavControls = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.main-navigation-controls');
+    if (mainNavControls) {
+      this.resizeObserver.observe(mainNavControls);
+    }
+  }
+  disconnectedCallback() {
+    window.removeEventListener('resize', this.throttledResize);
+    this.resizeObserver.disconnect();
+  }
+  handleResize() {
+    var _a, _b;
+    const mainNavControls = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.main-navigation-controls');
+    const menuButton = (_b = this.host.parentElement) === null || _b === void 0 ? void 0 : _b.querySelector('.menu-button');
+    if (mainNavControls && menuButton)
+      this.showFaviconLogo =
+        window.innerWidth - (150 + mainNavControls.clientWidth + menuButton.clientWidth) <= 0;
+  }
+  render() {
+    var _a;
+    if (((_a = state.localizedConfig) === null || _a === void 0 ? void 0 : _a.header.logo) === undefined)
+      return;
+    const config = state.localizedConfig.header.logo;
+    return (h(Host, null, h(LogoSprite, null), h("a", { href: config.logoLink, class: "logo" }, h("span", { class: "visually-hidden" }, config.logoLinkTitle), h(FaviconSvg, { className: "square-logo" }), h("img", { class: "logo-svg full-logo", src: config.logoSvg, alt: config.logoText }))));
+  }
+  get host() { return getElement(this); }
+};
 PostLogo.style = postLogoCss;
 
 export { PostLogo as post_logo };

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

@@ -1 +1 @@
-{"file":"post-logo.entry.js","mappings":"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","names":[],"sources":["./src/components/post-logo/logo-sprite.component.tsx","./src/components/post-logo/post-logo.scss?tag=post-logo&encapsulation=shadow","./src/components/post-logo/post-logo.tsx"],"sourcesContent":["import { h } from '@stencil/core';\r\n\r\nexport const LogoSprite = () => (\r\n  <svg aria-hidden=\"true\" style={{ display: 'none' }}>\r\n    <symbol id=\"favicon\" viewBox=\"0 0 48 48\">\r\n      <g clip-path=\"url(#a)\">\r\n        <path fill=\"#FC0\" d=\"M47.2 0H0v47.2h47.2V0Z\" />\r\n        <path\r\n          fill=\"#fff\"\r\n          fill-rule=\"evenodd\"\r\n          d=\"m18.68 35.91 1.48-7.02H6.42l-1.47 7.02h13.73Z\"\r\n          clip-rule=\"evenodd\"\r\n        />\r\n        <path\r\n          fill=\"#000\"\r\n          fill-rule=\"evenodd\"\r\n          d=\"M16.96 16.56c-.47-.07-.94-.1-1.42-.1H11.6L8.5 31.1h3.1l.95-4.47h1.8c.74.02 1.48-.07 2.18-.27a5.8 5.8 0 0 0 4-4.59c.49-2.73-.87-4.76-3.57-5.2Zm.47 5.06a2.63 2.63 0 0 1-2.06 2.22c-.33.06-.66.1-1 .1h-1.25l1-4.78h1.36c.31-.01.62.03.92.11.77.26 1.24 1.03 1.03 2.35\"\r\n          clip-rule=\"evenodd\"\r\n        />\r\n        <path\r\n          fill=\"red\"\r\n          fill-rule=\"evenodd\"\r\n          d=\"m34.5 16.43 1.86-8.84H24.63l-2.45 11.58h2.9l1.87-8.84h5.93L31 19.17h8.8l-1.17 5.53h-8.75l-1.75 8.28H21.5l-.57 2.78h9.54l1.75-8.3h8.72l2.34-11.03H34.5Z\"\r\n          clip-rule=\"evenodd\"\r\n        />\r\n      </g>\r\n      <defs>\r\n        <clipPath id=\"a\">\r\n          <path fill=\"#fff\" d=\"M0 0h47.2v47.2H0z\" />\r\n        </clipPath>\r\n      </defs>\r\n    </symbol>\r\n  </svg>\r\n);\r\n\r\nexport const FaviconSvg = (props: { className?: string }) => (\r\n  <svg viewBox=\"0 0 48 48\" class={props.className} aria-hidden=\"true\">\r\n    <use href=\"#favicon\" />\r\n  </svg>\r\n);\r\n","@use \"@swisspost/design-system-styles/variables/color\";\r\n@use \"../../utils/utils.scss\";\r\n@use \"../../utils/mixins.scss\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.logo {\r\n  display: block;\r\n  align-items: center;\r\n  background: color.$yellow;\r\n\r\n}\r\n\r\nsvg,\r\n.logo-svg {\r\n  display: block;\r\n  height: var(--header-height);\r\n}\r\n\r\n.square-logo {\r\n  display: block;\r\n\r\n  @include mixins.min(sm) {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.full-logo {\r\n  display: none;\r\n\r\n  @include mixins.min(sm) {\r\n    display: block;\r\n  }\r\n}\r\n","import { Component, Host, h, State, Element } from '@stencil/core';\r\nimport { throttle } from 'throttle-debounce';\r\nimport { state } from '../../data/store';\r\nimport { LogoSprite, FaviconSvg } from './logo-sprite.component';\r\n\r\n@Component({\r\n  tag: 'post-logo',\r\n  styleUrl: 'post-logo.scss',\r\n  shadow: true,\r\n})\r\nexport class PostLogo {\r\n  @State() showFaviconLogo: boolean;\r\n  @Element() host: HTMLPostLogoElement;\r\n  private throttledResize: throttle<() => void>;\r\n  private resizeObserver: ResizeObserver;\r\n\r\n  constructor() {\r\n    // Register window resize event listener and a resize observer on the mainnav controls (they change size while controls are being loaded) to display an accurately sized logo\r\n    this.throttledResize = throttle(300, () => this.handleResize());\r\n    window.addEventListener('resize', this.throttledResize, { passive: true });\r\n    this.resizeObserver = new ResizeObserver(this.handleResize.bind(this));\r\n\r\n    // Initially call the resize handler\r\n    this.handleResize();\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const mainNavControls = this.host.parentElement?.querySelector('.main-navigation-controls');\r\n    if (mainNavControls) {\r\n      this.resizeObserver.observe(mainNavControls);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.removeEventListener('resize', this.throttledResize);\r\n    this.resizeObserver.disconnect();\r\n  }\r\n\r\n  handleResize() {\r\n    const mainNavControls = this.host.parentElement?.querySelector('.main-navigation-controls');\r\n    const menuButton = this.host.parentElement?.querySelector('.menu-button');\r\n    if (mainNavControls && menuButton)\r\n      this.showFaviconLogo =\r\n        window.innerWidth - (150 + mainNavControls.clientWidth + menuButton.clientWidth) <= 0;\r\n  }\r\n\r\n  render() {\r\n    if (state.localizedConfig?.header.logo === undefined) return;\r\n    const config = state.localizedConfig.header.logo;\r\n\r\n    return (\r\n      <Host>\r\n        <LogoSprite />\r\n        <a href={config.logoLink} class=\"logo\">\r\n          <span class=\"visually-hidden\">{config.logoLinkTitle}</span>\r\n          <FaviconSvg className=\"square-logo\" />\r\n          <img class=\"logo-svg full-logo\" src={config.logoSvg} alt={config.logoText} />\r\n        </a>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"post-logo.entry.js","mappings":"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","names":[],"sources":["./src/components/post-logo/logo-sprite.component.tsx","./src/components/post-logo/post-logo.scss?tag=post-logo&encapsulation=shadow","./src/components/post-logo/post-logo.tsx"],"sourcesContent":["import { h } from '@stencil/core';\n\nexport const LogoSprite = () => (\n  <svg aria-hidden=\"true\" style={{ display: 'none' }}>\n    <symbol id=\"favicon\" viewBox=\"0 0 48 48\">\n      <g clip-path=\"url(#a)\">\n        <path fill=\"#FC0\" d=\"M47.2 0H0v47.2h47.2V0Z\" />\n        <path\n          fill=\"#fff\"\n          fill-rule=\"evenodd\"\n          d=\"m18.68 35.91 1.48-7.02H6.42l-1.47 7.02h13.73Z\"\n          clip-rule=\"evenodd\"\n        />\n        <path\n          fill=\"#000\"\n          fill-rule=\"evenodd\"\n          d=\"M16.96 16.56c-.47-.07-.94-.1-1.42-.1H11.6L8.5 31.1h3.1l.95-4.47h1.8c.74.02 1.48-.07 2.18-.27a5.8 5.8 0 0 0 4-4.59c.49-2.73-.87-4.76-3.57-5.2Zm.47 5.06a2.63 2.63 0 0 1-2.06 2.22c-.33.06-.66.1-1 .1h-1.25l1-4.78h1.36c.31-.01.62.03.92.11.77.26 1.24 1.03 1.03 2.35\"\n          clip-rule=\"evenodd\"\n        />\n        <path\n          fill=\"red\"\n          fill-rule=\"evenodd\"\n          d=\"m34.5 16.43 1.86-8.84H24.63l-2.45 11.58h2.9l1.87-8.84h5.93L31 19.17h8.8l-1.17 5.53h-8.75l-1.75 8.28H21.5l-.57 2.78h9.54l1.75-8.3h8.72l2.34-11.03H34.5Z\"\n          clip-rule=\"evenodd\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"a\">\n          <path fill=\"#fff\" d=\"M0 0h47.2v47.2H0z\" />\n        </clipPath>\n      </defs>\n    </symbol>\n  </svg>\n);\n\nexport const FaviconSvg = (props: { className?: string }) => (\n  <svg viewBox=\"0 0 48 48\" class={props.className} aria-hidden=\"true\">\n    <use href=\"#favicon\" />\n  </svg>\n);\n","@use \"@swisspost/design-system-styles/variables/color\";\n@use \"../../utils/utils.scss\";\n@use \"../../utils/mixins.scss\";\n\n:host {\n  display: block;\n}\n\n.logo {\n  display: block;\n  align-items: center;\n  background: color.$yellow;\n\n}\n\nsvg,\n.logo-svg {\n  display: block;\n  height: var(--header-height);\n}\n\n.square-logo {\n  display: block;\n\n  @include mixins.min(sm) {\n    display: none;\n  }\n}\n\n.full-logo {\n  display: none;\n\n  @include mixins.min(sm) {\n    display: block;\n  }\n}\n","import { Component, Host, h, State, Element } from '@stencil/core';\nimport { throttle } from 'throttle-debounce';\nimport { state } from '../../data/store';\nimport { LogoSprite, FaviconSvg } from './logo-sprite.component';\n\n@Component({\n  tag: 'post-logo',\n  styleUrl: 'post-logo.scss',\n  shadow: true,\n})\nexport class PostLogo {\n  @State() showFaviconLogo: boolean;\n  @Element() host: HTMLPostLogoElement;\n  private throttledResize: throttle<() => void>;\n  private resizeObserver: ResizeObserver;\n\n  constructor() {\n    // Register window resize event listener and a resize observer on the mainnav controls (they change size while controls are being loaded) to display an accurately sized logo\n    this.throttledResize = throttle(300, () => this.handleResize());\n    window.addEventListener('resize', this.throttledResize, { passive: true });\n    this.resizeObserver = new ResizeObserver(this.handleResize.bind(this));\n\n    // Initially call the resize handler\n    this.handleResize();\n  }\n\n  componentDidLoad() {\n    const mainNavControls = this.host.parentElement?.querySelector('.main-navigation-controls');\n    if (mainNavControls) {\n      this.resizeObserver.observe(mainNavControls);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.throttledResize);\n    this.resizeObserver.disconnect();\n  }\n\n  handleResize() {\n    const mainNavControls = this.host.parentElement?.querySelector('.main-navigation-controls');\n    const menuButton = this.host.parentElement?.querySelector('.menu-button');\n    if (mainNavControls && menuButton)\n      this.showFaviconLogo =\n        window.innerWidth - (150 + mainNavControls.clientWidth + menuButton.clientWidth) <= 0;\n  }\n\n  render() {\n    if (state.localizedConfig?.header.logo === undefined) return;\n    const config = state.localizedConfig.header.logo;\n\n    return (\n      <Host>\n        <LogoSprite />\n        <a href={config.logoLink} class=\"logo\">\n          <span class=\"visually-hidden\">{config.logoLinkTitle}</span>\n          <FaviconSvg className=\"square-logo\" />\n          <img class=\"logo-svg full-logo\" src={config.logoSvg} alt={config.logoText} />\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}