@swisspost/internet-header 1.10.0 → 1.11.0

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

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { state } from '../../data/store';
 import { SvgSprite } from '../../utils/svg-sprite.component';
 import { SvgIcon } from '../../utils/svg-icon.component';

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

@@ -1 +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;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAQzD,MAAM,OAAO,kBAAkB;EAG7B,KAAK,CAAC,gBAAgB;;IACpB,IACE,CAAA,MAAA,MAAA,KAAK,CAAC,eAAe,0CAAE,MAAM,0CAAE,mBAAmB;MAClD,CAAC,CAAA,MAAA,MAAA,KAAK,CAAC,eAAe,0CAAE,MAAM,0CAAE,kBAAkB,CAAA;MAElD,OAAO;IACT,MAAM,EAAE,wBAAwB,EAAE,GAAG,MAAM,MAAM,CAAC,4BAA4B,CAAC,CAAC;IAChF,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,IACE,CAAC,CAAA,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,0CAAE,MAAM,0CAAE,kBAAkB,CAAA;MACnD,CAAC,CAAA,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,0CAAE,MAAM,0CAAE,mBAAmB,CAAA,EACpD;MACA,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,8BACxB,CAAA,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,0CAAE,MAAM,0CAAE,mBAAmB,EAAC,CAAC,CAAC,CACrD,SACE,EAAE,EAAC,uBAAuB,EAC1B,KAAK,EAAC,cAAc,EACpB,IAAI,EAAE,MAAA,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,kBAAkB,0CAAE,WAAW;QAElE,YAAM,KAAK,EAAC,iBAAiB,IAC1B,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,YAAY,CAAC,eAAe,CACrD;QACP,EAAC,OAAO,IAAC,IAAI,EAAC,UAAU,GAAG,CACzB,CACL,CAAC,CAAC,CAAC,CACF,WAAK,EAAE,EAAC,uBAAuB,GAAO,CACvC,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Method, Element } from '@stencil/core';\nimport { state } from '../../data/store';\nimport { IsFocusable } from '../../models/header.model';\nimport { SvgSprite } from '../../utils/svg-sprite.component';\nimport { SvgIcon } from '../../utils/svg-icon.component';\n\n@Component({\n  tag: 'post-klp-login-widget',\n  styleUrl: 'post-klp-login-widget.scss',\n  scoped: false,\n  shadow: true,\n})\nexport class PostKlpLoginWidget implements IsFocusable {\n  @Element() host: HTMLElement;\n\n  async componentDidLoad() {\n    if (\n      state.localizedConfig?.header?.showJobsLoginWidget ||\n      !state.localizedConfig?.header?.loginWidgetOptions\n    )\n      return;\n    const { initializeKLPLoginWidget } = await import('./klp-widget.controller.js');\n    initializeKLPLoginWidget('post-klp-login-widget', {\n      ...state.localizedConfig.header.loginWidgetOptions,\n      environment: state.environment,\n    });\n  }\n\n  /**\n   * Sets the focus on the login button\n   */\n  @Method()\n  async setFocus() {\n    const loginButton = this.host.shadowRoot?.querySelectorAll<HTMLElement>(\n      '.klp-widget-anonymous__wrapper a, .klp-widget-authenticated-session a',\n    );\n    if (loginButton && loginButton.length) {\n      loginButton[0].focus();\n    }\n  }\n\n  render() {\n    if (\n      !state?.localizedConfig?.header?.loginWidgetOptions &&\n      !state?.localizedConfig?.header?.showJobsLoginWidget\n    ) {\n      console.warn(\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.`,\n      );\n      return null;\n    }\n    return (\n      <Host>\n        <SvgSprite />\n        <div class=\"widget-wrapper\" data-hj-suppress>\n          {state?.localizedConfig?.header?.showJobsLoginWidget ? (\n            <a\n              id=\"post-klp-login-widget\"\n              class=\"login-button\"\n              href={state.localizedConfig.header.loginWidgetOptions?.appLoginUrl}\n            >\n              <span class=\"visually-hidden\">\n                {state.localizedConfig.header.translations.loginWidgetText}\n              </span>\n              <SvgIcon name=\"pi-login\" />\n            </a>\n          ) : (\n            <div id=\"post-klp-login-widget\"></div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"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,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAQzD,MAAM,OAAO,kBAAkB;EAG7B,KAAK,CAAC,gBAAgB;;IACpB,IACE,CAAA,MAAA,MAAA,KAAK,CAAC,eAAe,0CAAE,MAAM,0CAAE,mBAAmB;MAClD,CAAC,CAAA,MAAA,MAAA,KAAK,CAAC,eAAe,0CAAE,MAAM,0CAAE,kBAAkB,CAAA;MAElD,OAAO;IACT,MAAM,EAAE,wBAAwB,EAAE,GAAG,MAAM,MAAM,CAAC,4BAA4B,CAAC,CAAC;IAChF,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,IACE,CAAC,CAAA,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,0CAAE,MAAM,0CAAE,kBAAkB,CAAA;MACnD,CAAC,CAAA,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,0CAAE,MAAM,0CAAE,mBAAmB,CAAA,EACpD;MACA,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,8BACxB,CAAA,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,0CAAE,MAAM,0CAAE,mBAAmB,EAAC,CAAC,CAAC,CACrD,SACE,EAAE,EAAC,uBAAuB,EAC1B,KAAK,EAAC,cAAc,EACpB,IAAI,EAAE,MAAA,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,kBAAkB,0CAAE,WAAW;QAElE,YAAM,KAAK,EAAC,iBAAiB,IAC1B,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,YAAY,CAAC,eAAe,CACrD;QACP,EAAC,OAAO,IAAC,IAAI,EAAC,UAAU,GAAG,CACzB,CACL,CAAC,CAAC,CAAC,CACF,WAAK,EAAE,EAAC,uBAAuB,GAAO,CACvC,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Method } from '@stencil/core';\nimport { state } from '../../data/store';\nimport { IsFocusable } from '../../models/header.model';\nimport { SvgSprite } from '../../utils/svg-sprite.component';\nimport { SvgIcon } from '../../utils/svg-icon.component';\n\n@Component({\n  tag: 'post-klp-login-widget',\n  styleUrl: 'post-klp-login-widget.scss',\n  scoped: false,\n  shadow: true,\n})\nexport class PostKlpLoginWidget implements IsFocusable {\n  @Element() host: HTMLPostKlpLoginWidgetElement;\n\n  async componentDidLoad() {\n    if (\n      state.localizedConfig?.header?.showJobsLoginWidget ||\n      !state.localizedConfig?.header?.loginWidgetOptions\n    )\n      return;\n    const { initializeKLPLoginWidget } = await import('./klp-widget.controller.js');\n    initializeKLPLoginWidget('post-klp-login-widget', {\n      ...state.localizedConfig.header.loginWidgetOptions,\n      environment: state.environment,\n    });\n  }\n\n  /**\n   * Sets the focus on the login button\n   */\n  @Method()\n  async setFocus() {\n    const loginButton = this.host.shadowRoot?.querySelectorAll<HTMLElement>(\n      '.klp-widget-anonymous__wrapper a, .klp-widget-authenticated-session a',\n    );\n    if (loginButton && loginButton.length) {\n      loginButton[0].focus();\n    }\n  }\n\n  render() {\n    if (\n      !state?.localizedConfig?.header?.loginWidgetOptions &&\n      !state?.localizedConfig?.header?.showJobsLoginWidget\n    ) {\n      console.warn(\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.`,\n      );\n      return null;\n    }\n    return (\n      <Host>\n        <SvgSprite />\n        <div class=\"widget-wrapper\" data-hj-suppress>\n          {state?.localizedConfig?.header?.showJobsLoginWidget ? (\n            <a\n              id=\"post-klp-login-widget\"\n              class=\"login-button\"\n              href={state.localizedConfig.header.loginWidgetOptions?.appLoginUrl}\n            >\n              <span class=\"visually-hidden\">\n                {state.localizedConfig.header.translations.loginWidgetText}\n              </span>\n              <SvgIcon name=\"pi-login\" />\n            </a>\n          ) : (\n            <div id=\"post-klp-login-widget\"></div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,370 +1 @@
-/**
- * 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: 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: transparent;
-  border: none;
-  border-radius: 0;
-  padding: 0;
-}
-
-.nav-link, .language-switch-dropdown a,
-.language-switch-dropdown button {
-  outline: none;
-  outline-offset: 2px;
-  /* Compatibility with button-group */
-  text-decoration: none;
-  color: rgba(0, 0, 0, 0.8);
-  transition: color 200ms;
-  background-color: transparent;
-  box-shadow: none;
-  border: 0;
-  margin: 0;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 0.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: black;
-}
-.nav-link:focus-visible, .language-switch-dropdown a:focus-visible,
-.language-switch-dropdown button:focus-visible {
-  z-index: 1;
-  position: relative;
-}
-.nav-link > svg, .language-switch-dropdown a > svg,
-.language-switch-dropdown button > svg {
-  width: 1.4em;
-  height: 1.4em;
-  flex-shrink: 0;
-}
-.nav-link > span, .language-switch-dropdown a > span,
-.language-switch-dropdown button > span {
-  flex-shrink: 1;
-}
-
-.no-list, .language-switch-dropdown ul {
-  list-style: none;
-  padding-left: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-*,
-:host,
-*::before,
-*::after {
-  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;
-  /* Compatibility with button-group */
-}
-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: white;
-  }
-}
-
-.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;
-  }
-}
-
-@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 {
-  position: relative;
-  content: "";
-  display: var(--separator-display);
-  height: var(--separator-height);
-  border-left: 1px solid hsl(0, 0%, 90%);
-}
-
-.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;
-  position: relative;
-  z-index: 1;
-}
-.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 hsl(0, 0%, 80%);
-  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 hsl(0, 0%, 80%);
-}
-.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;
-}
+@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);transition:color 200ms;background-color:rgba(0,0,0,0);box-shadow:none;border:0;margin:0;cursor:pointer;display:flex;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;flex-shrink:0}.nav-link>span,.language-switch-dropdown a>span,.language-switch-dropdown button>span{flex-shrink:1}.no-list,.language-switch-dropdown ul{list-style:none;padding-left:0;margin-top:0;margin-bottom:0}*,:host,*::before,*::after{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{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}}@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{position:relative;content:"";display:var(--separator-display);height:var(--separator-height);border-left:1px solid #e6e6e6}.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,.8)}.lang-btn:hover,.lang-btn:focus{color:#000;position:relative;z-index:1}.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 #ccc;padding:.5rem 1rem .5rem 0}.dropdown .language-switch-dropdown{position:absolute;top:100%;width:100%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2),0 2px 6px 2px rgba(0,0,0,.1);z-index:1;transform:scale(0.1);transform-origin:center top;transition:transform .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 #ccc}.language-switch-dropdown a,.language-switch-dropdown button{display:flex;align-items:center;justify-content:center;width:100%;height:3rem;padding: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:#000;height:auto;padding:.5rem 1rem}

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

@@ -1,8 +1,8 @@
-import { Host, h, } from '@stencil/core';
+import { h, Host, } 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 { elementHasTransition, userPrefersReducedMotion } from '../../services/ui.service';
 import { translate } from '../../services/language.service';
 import { PostLanguageSwitchList } from './components/post-language-switch-list';
 export class PostLanguageSwitch {

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

@@ -1 +1 @@
-{"version":3,"file":"post-language-switch.js","sourceRoot":"","sources":["../../../../src/components/post-language-switch/post-language-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["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\">\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.js","sourceRoot":"","sources":["../../../../src/components/post-language-switch/post-language-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}