@swisspost/internet-header 1.5.0-beta.0

package/dist/collection/components/post-klp-login-widget/post-klp-login-widget.js

@@ -0,0 +1,67 @@
+import { Host, h } from '@stencil/core';
+import { state } from '../../data/store';
+import { SvgSprite } from '../../utils/svg-sprite.component';
+export class PostKlpLoginWidget {
+  async componentDidLoad() {
+    var _a;
+    const { initializeKLPLoginWidget } = await import('./klp-widget.controller');
+    if (((_a = state.localizedConfig) === null || _a === void 0 ? void 0 : _a.header.loginWidgetOptions) === undefined)
+      return;
+    initializeKLPLoginWidget('post-klp-login-widget', Object.assign(Object.assign({}, state.localizedConfig.header.loginWidgetOptions), { environment: state.environment }));
+  }
+  /**
+   * Sets the focus on the login button
+   */
+  async setFocus() {
+    var _a;
+    const loginButton = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.klp-widget-anonymous__wrapper a, .klp-widget-authenticated-session a');
+    if (loginButton && loginButton.length) {
+      loginButton[0].focus();
+    }
+  }
+  render() {
+    var _a, _b;
+    if (!((_b = (_a = state === null || state === void 0 ? void 0 : state.localizedConfig) === null || _a === void 0 ? void 0 : _a.header) === null || _b === void 0 ? void 0 : _b.loginWidgetOptions)) {
+      console.warn(`Internet Header: the login widget is not configured in your portal config. Use <swisspost-internet-header project="${state.projectId}" login="false"></swisspost-internet-header> to turn off the login widget or configure it via the portal config.`);
+      return null;
+    }
+    return (h(Host, null, h(SvgSprite, null), h("div", { class: "widget-wrapper", "data-hj-suppress": true }, h("div", { id: "post-klp-login-widget" }))));
+  }
+  static get is() { return "post-klp-login-widget"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["post-klp-login-widget.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["post-klp-login-widget.css"]
+    };
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets the focus on the login button",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=post-klp-login-widget.js.map

package/dist/collection/components/post-klp-login-widget/post-klp-login-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-klp-login-widget.js","sourceRoot":"","sources":["../../../../src/components/post-klp-login-widget/post-klp-login-widget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAQ7D,MAAM,OAAO,kBAAkB;EAG7B,KAAK,CAAC,gBAAgB;;IACpB,MAAM,EAAE,wBAAwB,EAAE,GAAG,MAAM,MAAM,CAAC,yBAAyB,CAAC,CAAC;IAC7E,IAAI,CAAA,MAAA,KAAK,CAAC,eAAe,0CAAE,MAAM,CAAC,kBAAkB,MAAK,SAAS;MAAE,OAAO;IAC3E,wBAAwB,CAAC,uBAAuB,kCAC3C,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,kBAAkB,KAClD,WAAW,EAAE,KAAK,CAAC,WAAW,IAC9B,CAAC;EACL,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,QAAQ;;IACZ,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CACxD,uEAAuE,CACxE,CAAC;IACF,IAAI,WAAW,IAAI,WAAW,CAAC,MAAM,EAAE;MACrC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;KACxB;EACH,CAAC;EAED,MAAM;;IACJ,IAAI,CAAC,CAAA,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,0CAAE,MAAM,0CAAE,kBAAkB,CAAA,EAAE;MACvD,OAAO,CAAC,IAAI,CACV,sHAAsH,KAAK,CAAC,SAAS,kHAAkH,CACxP,CAAC;MACF,OAAO,IAAI,CAAC;KACb;IACD,OAAO,CACL,EAAC,IAAI;MACH,EAAC,SAAS,OAAG;MACb,WAAK,KAAK,EAAC,gBAAgB;QACzB,WAAK,EAAE,EAAC,uBAAuB,GAAO,CAClC,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Method, Element } from '@stencil/core';\r\nimport { state } from '../../data/store';\r\nimport { IsFocusable } from '../../models/header.model';\r\nimport { SvgSprite } from '../../utils/svg-sprite.component';\r\n\r\n@Component({\r\n  tag: 'post-klp-login-widget',\r\n  styleUrl: 'post-klp-login-widget.scss',\r\n  scoped: false,\r\n  shadow: true,\r\n})\r\nexport class PostKlpLoginWidget implements IsFocusable {\r\n  @Element() host: HTMLElement;\r\n\r\n  async componentDidLoad() {\r\n    const { initializeKLPLoginWidget } = await import('./klp-widget.controller');\r\n    if (state.localizedConfig?.header.loginWidgetOptions === undefined) return;\r\n    initializeKLPLoginWidget('post-klp-login-widget', {\r\n      ...state.localizedConfig.header.loginWidgetOptions,\r\n      environment: state.environment,\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Sets the focus on the login button\r\n   */\r\n  @Method()\r\n  async setFocus() {\r\n    const loginButton = this.host.shadowRoot?.querySelectorAll<HTMLElement>(\r\n      '.klp-widget-anonymous__wrapper a, .klp-widget-authenticated-session a',\r\n    );\r\n    if (loginButton && loginButton.length) {\r\n      loginButton[0].focus();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    if (!state?.localizedConfig?.header?.loginWidgetOptions) {\r\n      console.warn(\r\n        `Internet Header: the login widget is not configured in your portal config. Use <swisspost-internet-header project=\"${state.projectId}\" login=\"false\"></swisspost-internet-header> to turn off the login widget or configure it via the portal config.`,\r\n      );\r\n      return null;\r\n    }\r\n    return (\r\n      <Host>\r\n        <SvgSprite />\r\n        <div class=\"widget-wrapper\" data-hj-suppress>\r\n          <div id=\"post-klp-login-widget\"></div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/post-language-switch/components/post-language-switch-list.js

@@ -0,0 +1,9 @@
+import { h } from '@stencil/core';
+import { translate } from '../../../services/language.service';
+export 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))));
+}))));
+//# sourceMappingURL=post-language-switch-list.js.map

package/dist/collection/components/post-language-switch/components/post-language-switch-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-language-switch-list.js","sourceRoot":"","sources":["../../../../../src/components/post-language-switch/components/post-language-switch-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAE/D,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAItC,EAAE,EAAE,CAAC,CACJ,WAAK,KAAK,EAAC,0BAA0B,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;EAClE,UAAI,KAAK,EAAC,iBAAiB,IAAE,SAAS,CAAC,iBAAiB,CAAC,CAAM;EAC/D,cACG,KAAK,CAAC,OAAO;KACX,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;KAC/B,GAAG,CAAC,IAAI,CAAC,EAAE;IACV,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC;IACnD,OAAO,CACL,UAAI,GAAG,EAAE,IAAI,CAAC,IAAI;MAChB,EAAC,OAAO,IACN,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EACzC,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK;QAEjB,YAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAQ;QACjD,2BAAkB,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CACnC,CACP,CACN,CAAC;EACJ,CAAC,CAAC,CACD,CACD,CACP,CAAC","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"]}

package/dist/collection/components/post-language-switch/post-language-switch.css

@@ -0,0 +1,321 @@
+/**
+ * Colors used by the post style guide
+ */
+/**
+ * Maps. Allow maps to have custom colors from the project
+ * by always merging into a default empty map
+ */
+@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 {
+  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);
+  transition: color 200ms;
+  background-color: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  border: 0;
+  margin: 0;
+  display: flex;
+  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;
+  flex-shrink: 0;
+}
+.language-switch-dropdown a > span,
+.language-switch-dropdown button > span, .nav-link > span {
+  flex-shrink: 1;
+}
+
+.box > *:first-child {
+  margin-top: 0;
+}
+.box > *:last-child {
+  margin-bottom: 0;
+}
+
+.mirrored {
+  transform: scaleX(-1);
+}
+
+.rotate-270 {
+  transform: rotate(270deg);
+}
+
+.bold {
+  font-weight: 700;
+}
+
+.light {
+  font-weight: 300;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.d-inline-flex {
+  display: inline-flex;
+}
+
+.align-items-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: flex;
+  align-items: center;
+  align-self: stretch;
+}
+:host::before {
+  display: var(--separator-display);
+  height: var(--separator-height);
+  border-left: 1px solid #e6e6e6;
+  content: "";
+}
+
+.lang-btn {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 1rem;
+  border: 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;
+  transition: transform 250ms;
+}
+.lang-btn svg.rotated {
+  transform: rotate(180deg);
+}
+
+.language-switch {
+  position: relative;
+  align-self: stretch;
+  height: 100%;
+}
+.language-switch.list {
+  margin-top: 1.5rem;
+  display: flex;
+  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;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 6px 2px rgba(0, 0, 0, 0.1);
+  z-index: 1;
+  transform: scale(0.1);
+  transform-origin: center top;
+  transition: transform 0.1s;
+  margin-top: var(--language-dropdown-margin-top);
+}
+@media (prefers-reduced-motion: reduce) {
+  .dropdown .language-switch-dropdown {
+    transition: none;
+  }
+}
+.dropdown .language-switch-dropdown.open {
+  transform: scale(1);
+}
+.list .language-switch-dropdown ul {
+  display: flex;
+}
+.list .language-switch-dropdown ul > li + li {
+  border-left: 1px solid #cccccc;
+}
+.language-switch-dropdown a,
+.language-switch-dropdown button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 3rem;
+  padding: 0 0.25rem;
+  text-transform: uppercase;
+  cursor: pointer;
+  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;
+}

package/dist/collection/components/post-language-switch/post-language-switch.js

@@ -0,0 +1,186 @@
+import { Host, h, } from '@stencil/core';
+import { SvgSprite } from '../../utils/svg-sprite.component';
+import { SvgIcon } from '../../utils/svg-icon.component';
+import { state } from '../../data/store';
+import { userPrefersReducedMotion, elementHasTransition } from '../../services/ui.service';
+import { translate } from '../../services/language.service';
+import { PostLanguageSwitchList } from './components/post-language-switch-list';
+export class PostLanguageSwitch {
+  constructor() {
+    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)));
+  }
+  static get is() { return "post-language-switch"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["post-language-switch.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["post-language-switch.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'dropdown' | 'list'",
+          "resolved": "\"dropdown\" | \"list\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "mode",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "langSwitchOpen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dropdownToggled",
+        "name": "dropdownToggled",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "DropdownEvent",
+          "resolved": "{ open: boolean; element: DropdownElement; }",
+          "references": {
+            "DropdownEvent": {
+              "location": "import",
+              "path": "../../models/header.model"
+            }
+          }
+        }
+      }, {
+        "method": "languageChanged",
+        "name": "languageChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "toggleDropdown": {
+        "complexType": {
+          "signature": "(force?: boolean) => Promise<boolean>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "force Boolean to force a state"
+                }],
+              "text": "Boolean to force a state"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Open or close the language switch programatically",
+          "tags": [{
+              "name": "param",
+              "text": "force Boolean to force a state"
+            }, {
+              "name": "returns",
+              "text": "Boolean indicating new state"
+            }]
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=post-language-switch.js.map

package/dist/collection/components/post-language-switch/post-language-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-language-switch.js","sourceRoot":"","sources":["../../../../src/components/post-language-switch/post-language-switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EACL,IAAI,EACJ,CAAC,EACD,MAAM,EAEN,KAAK,EACL,IAAI,EACJ,OAAO,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAOzC,OAAO,EAAE,wBAAwB,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAQhF,MAAM,OAAO,kBAAkB;;;0BAEH,KAAK;;EAM/B,mBAAmB;IACjB,oEAAoE;IACpE,IAAI,IAAI,CAAC,sBAAsB,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,IAAI,IAAI,UAAU,EAAE;MAClF,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;MAErD,4FAA4F;MAC5F,IACE,oBAAoB,CAAC,IAAI,CAAC,sBAAsB,EAAE,WAAW,CAAC;QAC9D,CAAC,wBAAwB,EAAE,EAC3B;QACA,+DAA+D;QAC/D,OAAO,IAAI,OAAO,CAAU,OAAO,CAAC,EAAE;;UACpC,MAAA,IAAI,CAAC,sBAAsB,0CAAE,gBAAgB,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE;YACrE,IAAI,KAAK,CAAC,YAAY,KAAK,WAAW,EAAE;cACtC,OAAO,CAAC,IAAI,CAAC,CAAC;aACf;UACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;OACJ;KACF;EACH,CAAC;EAED,kBAAkB;IAChB,kCAAkC;IAClC,IAAI,IAAI,CAAC,sBAAsB,IAAI,IAAI,CAAC,cAAc,EAAE;MACtD,iEAAiE;MACjE,IAAI,CAAC,sBAAsB,CAAC,qBAAqB,EAAE,CAAC;MACpD,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;KACnD;EACH,CAAC;EAED;;;;KAIG;EAEH,KAAK,CAAC,cAAc,CAAC,KAAe;IAClC,IAAI,CAAC,cAAc,GAAG,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,IAAI,CAAC,cAAc,CAAC;IACpD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAC7E,OAAO,IAAI,CAAC,cAAc,CAAC;EAC7B,CAAC;EAED;;;;KAIG;EACH,cAAc,CAAC,OAAsB;IACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACxC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;EAC7B,CAAC;EAEO,uBAAuB,CAAC,MAAuB,EAAE,SAAgC;IACvF,IAAI,SAAS,KAAK,SAAS,EAAE;MAC3B,OAAO,MAAM,CAAC;KACf;IAED,OAAO,MAAM,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAC7B,MAAM,CAAC,MAAM,CACX,EAAE,EACF,UAAU,EACV,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,IAAI,CAAC,CAChD,CACF,CAAC;EACJ,CAAC;EAEO,cAAc,CAAC,OAAgC;IACrD,IAAI,CAAC,sBAAsB,GAAG,OAAO,CAAC;EACxC,CAAC;EAED,MAAM;;IACJ,IAAI,CAAA,MAAA,KAAK,CAAC,eAAe,0CAAE,MAAM,MAAK,SAAS;MAAE,OAAO;IACxD,MAAM,MAAM,GAAG,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC;IAC5C,MAAM,YAAY,GAAG,IAAI,CAAC,uBAAuB,CAC/C,MAAM,CAAC,OAAO,EACd,KAAK,CAAC,uBAAuB,CAC9B,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,IAAI,EAAE;QACxC,EAAC,SAAS,OAAG;QACZ,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,CAC1B,cACE,KAAK,EAAC,UAAU,mBACD,GAAG,IAAI,CAAC,cAAc,EAAE,mBACzB,SAAS,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;UAEpC,YAAM,KAAK,EAAC,iBAAiB,IAAE,MAAM,CAAC,YAAY,CAAC,gBAAgB,CAAQ;UAC3E,2BAAkB,MAAM,IAAE,KAAK,CAAC,eAAe,CAAQ;UACvD,EAAC,OAAO,IAAC,IAAI,EAAC,eAAe,EAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,GAAI,CAC3E,CACV,CAAC,CAAC,CAAC,CACF,YAAM,KAAK,EAAC,uBAAuB;UACjC,YAAM,KAAK,EAAC,iBAAiB,IAAE,SAAS,CAAC,6BAA6B,CAAC,CAAQ;UAC/E,gBAAO,KAAK,CAAC,eAAe,CAAQ,CAC/B,CACR;QACA,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAC7C,EAAC,sBAAsB,IACrB,OAAO,EAAE,YAAY,EACrB,cAAc,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAC3C,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,SAAS,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,GAC3D,CACH,CAAC,CAAC,CAAC,IAAI,CACJ,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/post-logo/logo-sprite.component.js

@@ -0,0 +1,4 @@
+import { h } from '@stencil/core';
+export 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" }))))));
+export const FaviconSvg = (props) => (h("svg", { viewBox: "0 0 48 48", class: props.className, "aria-hidden": "true" }, h("use", { href: "#favicon" })));
+//# sourceMappingURL=logo-sprite.component.js.map

package/dist/collection/components/post-logo/logo-sprite.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo-sprite.component.js","sourceRoot":"","sources":["../../../../src/components/post-logo/logo-sprite.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CAC9B,0BAAiB,MAAM,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;EAChD,cAAQ,EAAE,EAAC,SAAS,EAAC,OAAO,EAAC,WAAW;IACtC,sBAAa,SAAS;MACpB,YAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,wBAAwB,GAAG;MAC/C,YACE,IAAI,EAAC,MAAM,eACD,SAAS,EACnB,CAAC,EAAC,+CAA+C,eACvC,SAAS,GACnB;MACF,YACE,IAAI,EAAC,MAAM,eACD,SAAS,EACnB,CAAC,EAAC,qQAAqQ,eAC7P,SAAS,GACnB;MACF,YACE,IAAI,EAAC,KAAK,eACA,SAAS,EACnB,CAAC,EAAC,wJAAwJ,eAChJ,SAAS,GACnB,CACA;IACJ;MACE,gBAAU,EAAE,EAAC,GAAG;QACd,YAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,mBAAmB,GAAG,CACjC,CACN,CACA,CACL,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAA6B,EAAE,EAAE,CAAC,CAC3D,WAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,KAAK,CAAC,SAAS,iBAAc,MAAM;EACjE,WAAK,IAAI,EAAC,UAAU,GAAG,CACnB,CACP,CAAC","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"]}