@swisspost/internet-header 1.5.0-beta.0

package/dist/esm/polyfills/index.js

@@ -0,0 +1,34 @@
+export function applyPolyfills() {
+  var promises = [];
+  if (typeof window !== 'undefined') {
+    var win = window;
+
+    if (!win.customElements ||
+      (win.Element && (!win.Element.prototype.closest || !win.Element.prototype.matches || !win.Element.prototype.remove || !win.Element.prototype.getRootNode))) {
+      promises.push(import(/* webpackChunkName: "polyfills-dom" */ './dom.js'));
+    }
+
+    var checkIfURLIsSupported = function() {
+      try {
+        var u = new URL('b', 'http://a');
+        u.pathname = 'c%20d';
+        return (u.href === 'http://a/c%20d') && u.searchParams;
+      } catch (e) {
+        return false;
+      }
+    };
+
+    if (
+      'function' !== typeof Object.assign || !Object.entries ||
+      !Array.prototype.find || !Array.prototype.includes ||
+      !String.prototype.startsWith || !String.prototype.endsWith ||
+      (win.NodeList && !win.NodeList.prototype.forEach) ||
+      !win.fetch ||
+      !checkIfURLIsSupported() ||
+      typeof WeakMap == 'undefined'
+    ) {
+      promises.push(import(/* webpackChunkName: "polyfills-core-js" */ './core-js.js'));
+    }
+  }
+  return Promise.all(promises);
+}

package/dist/esm/polyfills/system.js

@@ -0,0 +1,6 @@
+/**
+ * SystemJS 4.0.2
+ * MANUAL PATCH: remove script.crossOrigin = "anonymous"
+ * MANUAL PATCH: add conditionally apply, n.System=n.System||new u
+ */
+!function(){var e="undefined"!=typeof self,n=e?self:global;var t;if("undefined"!=typeof document){var e=document.querySelector("base[href]");e&&(t=e.href)}if(!t&&"undefined"!=typeof location){var e=(t=location.href.split("#")[0].split("?")[0]).lastIndexOf("/");-1!==e&&(t=t.slice(0,e+1))}var r=/\\/g,o="undefined"!=typeof Symbol,i=o&&Symbol.toStringTag,c=o?Symbol():"@";function u(){this[c]={}}var s=u.prototype;var l;s.import=function(e,n){var t=this;return Promise.resolve(t.resolve(e,n)).then(function(e){var n=function e(n,t,r){var o=n[c][t];if(o)return o;var u=[],s=Object.create(null);i&&Object.defineProperty(s,i,{value:"Module"});var l=Promise.resolve().then(function(){return n.instantiate(t,r)}).then(function(e){if(!e)throw Error("Module "+t+" did not instantiate");var r=e[1](function(e,n){o.h=!0;var t=!1;if("object"!=typeof e)e in s&&s[e]===n||(s[e]=n,t=!0);else for(var n in e){var r=e[n];n in s&&s[n]===r||(s[n]=r,t=!0)}if(t)for(var e=0;e<u.length;e++)u[e](s);return n},2===e[1].length?{import:function(e){return n.import(e,t)},meta:n.createContext(t)}:void 0);return o.e=r.execute||function(){},[e[0],r.setters||[]]});var f=l.then(function(r){return Promise.all(r[0].map(function(o,i){var c=r[1][i];return Promise.resolve(n.resolve(o,t)).then(function(r){var o=e(n,r,t);return Promise.resolve(o.I).then(function(){return c&&(o.i.push(c),!o.h&&o.I||c(o.n)),o})})})).then(function(e){o.d=e})});return f.catch(function(e){o.e=null,o.er=e}),o=n[c][t]={id:t,i:u,n:s,I:l,L:f,h:!1,d:void 0,e:void 0,er:void 0,E:void 0,C:void 0}}(t,e);return n.C||function(e,n){return n.C=function e(n,t,r){if(!r[t.id])return r[t.id]=!0,Promise.resolve(t.L).then(function(){return Promise.all(t.d.map(function(t){return e(n,t,r)}))})}(e,n,{}).then(function(){return function e(n,t,r){if(r[t.id])return;if(r[t.id]=!0,!t.e){if(t.er)throw t.er;return t.E?t.E:void 0}var o;return t.d.forEach(function(t){{var i=e(n,t,r);i&&(o=o||[]).push(i)}}),o?Promise.all(o).then(i):i();function i(){try{var e=t.e.call(f);if(e)return e=e.then(function(){t.C=t.n,t.E=null}),t.E=t.E||e;t.C=t.n}catch(e){throw t.er=e,e}finally{t.L=t.I=void 0,t.e=null}}}(e,n,{})}).then(function(){return n.n})}(t,n)})},s.createContext=function(e){return{url:e}},s.register=function(e,n){l=[e,n]},s.getRegister=function(){var e=l;return l=void 0,e};var f=Object.freeze(Object.create(null));n.System=n.System||new u;var d=s.register;s.register=function(e,n){d.call(this,e,n)},s.instantiate=function(e,n){var t=this;return".json"===e.substr(-5)?fetch(e).then(function(e){return e.text()}).then(function(e){return[[],function(n){return{execute:function(){n("default",JSON.parse(e))}}}]}):new Promise(function(r,o){var i;function c(n){n.filename===e&&(i=n.error)}window.addEventListener("error",c);var u=document.createElement("script");u.charset="utf-8",u.async=!0,u.addEventListener("error",function(){window.removeEventListener("error",c),o(Error("Error loading "+e+(n?" from "+n:"")))}),u.addEventListener("load",function(){window.removeEventListener("error",c),document.head.removeChild(u),i?o(i):r(t.getRegister())}),u.src=e,document.head.appendChild(u)})},e&&"function"==typeof importScripts&&(s.instantiate=function(e){var n=this;return new Promise(function(t,r){try{importScripts(e)}catch(e){r(e)}t(n.getRegister())})}),s.resolve=function(e,n){var o=function(e,n){if(-1!==e.indexOf("\\")&&(e=e.replace(r,"/")),"/"===e[0]&&"/"===e[1])return n.slice(0,n.indexOf(":")+1)+e;if("."===e[0]&&("/"===e[1]||"."===e[1]&&("/"===e[2]||2===e.length&&(e+="/"))||1===e.length&&(e+="/"))||"/"===e[0]){var t=n.slice(0,n.indexOf(":")+1);var r;if(r="/"===n[t.length+1]?"file:"!==t?(r=n.slice(t.length+2)).slice(r.indexOf("/")+1):n.slice(8):n.slice(t.length+("/"===n[t.length])),"/"===e[0])return n.slice(0,n.length-r.length-1)+e;var o=r.slice(0,r.lastIndexOf("/")+1)+e,i=[];var c=-1;for(var e=0;e<o.length;e++)-1!==c?"/"===o[e]&&(i.push(o.slice(c,e+1)),c=-1):"."===o[e]?"."!==o[e+1]||"/"!==o[e+2]&&e+2!==o.length?"/"===o[e+1]||e+1===o.length?e+=1:c=e:(i.pop(),e+=2):c=e;return-1!==c&&i.push(o.slice(c)),n.slice(0,n.length-r.length)+i.join("")}}(e,n||t);if(!o){if(-1!==e.indexOf(":"))return Promise.resolve(e);throw Error('Cannot resolve "'+e+(n?'" from '+n:'"'))}return Promise.resolve(o)}}();

package/dist/esm/post-klp-login-widget.entry.js

@@ -0,0 +1,42 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-066666f4.js';
+import { s as state } from './store-d495dc07.js';
+import { S as SvgSprite } from './svg-sprite.component-ec0ac38c.js';
+
+const postKlpLoginWidgetCss = ".btn-default,.btn-secondary{border:2px solid rgba(var(--post-contrast-color-rgb), 0.2)}.btn-default:focus,.btn-secondary:focus,.btn-default:not(:disabled):hover,.btn-secondary:not(:disabled):hover,.pretend-hover.btn-default,.pretend-hover.btn-secondary{border-color:var(--post-contrast-color);color:var(--post-contrast-color)}:is(.bg-dark,.bg-primary,.bg-black,.bg-success,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-petrol-bright,.bg-coral,.bg-coral-bright,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .btn-default,:is(.bg-dark,.bg-primary,.bg-black,.bg-success,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-petrol-bright,.bg-coral,.bg-coral-bright,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .btn-secondary{border-color:var(--post-contrast-color)}:is(.bg-dark,.bg-primary,.bg-black,.bg-success,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-petrol-bright,.bg-coral,.bg-coral-bright,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .btn-default:focus,:is(.bg-dark,.bg-primary,.bg-black,.bg-success,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-petrol-bright,.bg-coral,.bg-coral-bright,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .btn-secondary:focus,:is(.bg-dark,.bg-primary,.bg-black,.bg-success,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-petrol-bright,.bg-coral,.bg-coral-bright,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .btn-default:not(:disabled):hover,:is(.bg-dark,.bg-primary,.bg-black,.bg-success,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-petrol-bright,.bg-coral,.bg-coral-bright,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .btn-secondary:not(:disabled):hover,:is(.bg-dark,.bg-primary,.bg-black,.bg-success,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-petrol-bright,.bg-coral,.bg-coral-bright,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .pretend-hover.btn-default,:is(.bg-dark,.bg-primary,.bg-black,.bg-success,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-petrol-bright,.bg-coral,.bg-coral-bright,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .pretend-hover.btn-secondary{border-color:rgba(var(--post-contrast-color-rgb), 0.4)}.btn-default:disabled,.btn-secondary:disabled{border-color:rgba(var(--post-contrast-color-rgb), 0.4);color:rgba(var(--post-contrast-color-rgb), 0.6)}.btn{min-height:3rem;padding:0 2rem;font-size:1rem;gap:1rem;outline:none;outline-offset:2px;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;max-width:100%;overflow:hidden;-webkit-transition:opacity 250ms, border-color 250ms, background-color 250ms, color 250ms;transition:opacity 250ms, border-color 250ms, background-color 250ms, color 250ms;border-width:2px;border-style:solid;border-radius:3px;background-color:transparent;-webkit-box-shadow:none;box-shadow:none;color:var(--post-contrast-color);font-family:inherit;font-weight:400;line-height:inherit;text-decoration:none !important;white-space:nowrap}.btn>.pi{width:1.25rem;height:1.25rem}.btn:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color)}.btn-primary{border-color:transparent;background-color:rgba(var(--post-contrast-color-rgb), 0.8);color:var(--post-contrast-color-inverted)}.btn-primary:focus,.btn-primary:not(:disabled):hover,.btn-primary.pretend-hover{background-color:var(--post-contrast-color);color:var(--post-contrast-color-inverted)}:is(.bg-dark,.bg-primary,.bg-black,.bg-success,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-petrol-bright,.bg-coral,.bg-coral-bright,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .btn-primary{background-color:var(--post-contrast-color)}:is(.bg-dark,.bg-primary,.bg-black,.bg-success,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-petrol-bright,.bg-coral,.bg-coral-bright,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .btn-primary:focus,:is(.bg-dark,.bg-primary,.bg-black,.bg-success,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-petrol-bright,.bg-coral,.bg-coral-bright,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .btn-primary:not(:disabled):hover,:is(.bg-dark,.bg-primary,.bg-black,.bg-success,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-petrol-bright,.bg-coral,.bg-coral-bright,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .btn-primary.pretend-hover{background-color:rgba(var(--post-contrast-color-rgb), 0.8)}:is(.bg-dark,.bg-primary,.bg-black,.bg-success,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-petrol-bright,.bg-coral,.bg-coral-bright,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .btn-primary .pi{-webkit-filter:invert(0);filter:invert(0)}@media (forced-colors: active), (-ms-high-contrast: active), (-ms-high-contrast: white-on-black){.btn-primary{border-color:var(--post-contrast-color);background-color:ButtonFace}.btn-primary:not(:disabled,.disabled):hover,.btn-primary:not(:disabled,.disabled):focus-visible{border-color:highlight}.btn-primary .pi{-webkit-filter:invert(1) !important;filter:invert(1) !important}}.btn-primary:disabled{background-color:rgba(var(--post-contrast-color-rgb), 0.4)}.btn-primary .pi{-webkit-filter:invert(1);filter:invert(1);forced-color-adjust:none}:is(.bg-dark,.bg-primary,.bg-black,.bg-success,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-petrol-bright,.bg-coral,.bg-coral-bright,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .btn-default .pi,:is(.bg-dark,.bg-primary,.bg-black,.bg-success,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-petrol-bright,.bg-coral,.bg-coral-bright,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .btn-secondary .pi{-webkit-filter:invert(1);filter:invert(1)}.btn-link,.btn-tertiary{border:0;padding-right:0.375rem;padding-left:0.375rem}.btn-link:focus,.btn-link:not(:disabled):hover,.btn-link.pretend-hover,.btn-tertiary:focus,.btn-tertiary:not(:disabled):hover,.btn-tertiary.pretend-hover{color:rgba(var(--post-contrast-color-rgb), 0.8)}.btn-link:disabled,.btn-tertiary:disabled{color:rgba(var(--post-contrast-color-rgb), 0.6)}@media (forced-colors: active), (-ms-high-contrast: active), (-ms-high-contrast: white-on-black){.btn-link,.btn-tertiary{color:linktext;text-decoration:underline !important}}.btn-icon{min-width:3rem;padding-right:0.75rem;padding-left:0.75rem}.btn-icon.btn-sm{min-width:2rem;padding-right:0.375rem;padding-left:0.375rem}.btn-icon.btn-rg{min-width:2.5rem;padding-right:0.5625rem;padding-left:0.5625rem}.btn-icon.btn-lg{min-width:3.5rem;padding-right:0.875rem;padding-left:0.875rem}.btn-animated:not(.btn-link,.btn-tertiary)::after{content:\"\";position:absolute;right:1.25rem;width:0.625em;height:0.625em;-webkit-transform:rotateZ(315deg) translate(-2px, -2px);transform:rotateZ(315deg) translate(-2px, -2px);-webkit-transform-origin:center center;transform-origin:center center;-webkit-transition:opacity 250ms, -webkit-transform 250ms;transition:opacity 250ms, -webkit-transform 250ms;transition:opacity 250ms, transform 250ms;transition:opacity 250ms, transform 250ms, -webkit-transform 250ms;border-right:2px solid currentColor;border-bottom:2px solid currentColor;opacity:0}.btn-animated:not(.btn-link,.btn-tertiary).btn-sm::after{right:0.5rem}.btn-animated:not(.btn-link,.btn-tertiary).btn-rg::after{right:0.875rem}.btn-animated:not(.btn-link,.btn-tertiary).btn-lg::after{right:1.5rem}.btn-animated:not(.btn-link,.btn-tertiary)>span{-webkit-transition:-webkit-transform 250ms;transition:-webkit-transform 250ms;transition:transform 250ms;transition:transform 250ms, -webkit-transform 250ms}@media (prefers-reduced-motion: no-preference){.btn-animated:not(.btn-link,.btn-tertiary):focus>span,.btn-animated:not(.btn-link,.btn-tertiary):not(:disabled):hover>span,.btn-animated:not(.btn-link,.btn-tertiary).pretend-hover>span{-webkit-transform:translateX(-0.75rem);transform:translateX(-0.75rem)}.btn-animated:not(.btn-link,.btn-tertiary):focus.btn-sm>span,.btn-animated:not(.btn-link,.btn-tertiary):not(:disabled):hover.btn-sm>span,.btn-animated:not(.btn-link,.btn-tertiary).pretend-hover.btn-sm>span{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}.btn-animated:not(.btn-link,.btn-tertiary):focus.btn-rg>span,.btn-animated:not(.btn-link,.btn-tertiary):not(:disabled):hover.btn-rg>span,.btn-animated:not(.btn-link,.btn-tertiary).pretend-hover.btn-rg>span{-webkit-transform:translateX(-0.625rem);transform:translateX(-0.625rem)}.btn-animated:not(.btn-link,.btn-tertiary):focus.btn-lg>span,.btn-animated:not(.btn-link,.btn-tertiary):not(:disabled):hover.btn-lg>span,.btn-animated:not(.btn-link,.btn-tertiary).pretend-hover.btn-lg>span{-webkit-transform:translateX(-1rem);transform:translateX(-1rem)}.btn-animated:not(.btn-link,.btn-tertiary):focus::after,.btn-animated:not(.btn-link,.btn-tertiary):not(:disabled):hover::after,.btn-animated:not(.btn-link,.btn-tertiary).pretend-hover::after{-webkit-transform:rotateZ(315deg) translate(0, 0);transform:rotateZ(315deg) translate(0, 0);opacity:1}.btn-animated:not(.btn-link,.btn-tertiary)>span{-webkit-transform:translateX(0);transform:translateX(0)}}.btn-sm{min-height:2rem;padding:0 1rem;font-size:0.8125rem;gap:0.5rem}.btn-sm>.pi{width:1rem;height:1rem}.btn-rg{min-height:2.5rem;padding:0 1.5rem;font-size:1rem;gap:0.75rem}.btn-rg>.pi{width:1.125rem;height:1.125rem}.btn-lg{min-height:3.5rem;padding:0 2.5rem;font-size:1.0625rem;gap:1.25rem}.btn-lg>.pi{width:1.5rem;height:1.5rem}.btn-nightblue{border-color:transparent;background-color:#004976;color:#fff}.btn-nightblue:focus,.btn-nightblue:not(:disabled):hover,.btn-nightblue.pretend-hover{background-color:#002943}.btn-nightblue-bright{border-color:transparent;background-color:#0076a8;color:#fff}.btn-nightblue-bright:focus,.btn-nightblue-bright:not(:disabled):hover,.btn-nightblue-bright.pretend-hover{background-color:#005275}.btn-petrol{border-color:transparent;background-color:#006d68;color:#fff}.btn-petrol:focus,.btn-petrol:not(:disabled):hover,.btn-petrol.pretend-hover{background-color:#003a37}.btn-petrol-bright{border-color:transparent;background-color:#00968f;color:#fff}.btn-petrol-bright:focus,.btn-petrol-bright:not(:disabled):hover,.btn-petrol-bright.pretend-hover{background-color:#00635e}.btn-coral{border-color:transparent;background-color:#9e2a2f;color:#fff}.btn-coral:focus,.btn-coral:not(:disabled):hover,.btn-coral.pretend-hover{background-color:#761f23}.btn-coral-bright{border-color:transparent;background-color:#e03c31;color:#fff}.btn-coral-bright:focus,.btn-coral-bright:not(:disabled):hover,.btn-coral-bright.pretend-hover{background-color:#c1271d}.btn-olive{border-color:transparent;background-color:#716135;color:#fff}.btn-olive:focus,.btn-olive:not(:disabled):hover,.btn-olive.pretend-hover{background-color:#4e4325}.btn-olive-bright{border-color:transparent;background-color:#aa9d2e}.btn-olive-bright:focus,.btn-olive-bright:not(:disabled):hover,.btn-olive-bright.pretend-hover{background-color:#827823}.btn-purple{border-color:transparent;background-color:#80276c;color:#fff}.btn-purple:focus,.btn-purple:not(:disabled):hover,.btn-purple.pretend-hover{background-color:#591b4b}.btn-purple-bright{border-color:transparent;background-color:#c5299b;color:#fff}.btn-purple-bright:focus,.btn-purple-bright:not(:disabled):hover,.btn-purple-bright.pretend-hover{background-color:#9b207a}.btn-aubergine{border-color:transparent;background-color:#523178;color:#fff}.btn-aubergine:focus,.btn-aubergine:not(:disabled):hover,.btn-aubergine.pretend-hover{background-color:#392254}.btn-aubergine-bright{border-color:transparent;background-color:#7566a0;color:#fff}.btn-aubergine-bright:focus,.btn-aubergine-bright:not(:disabled):hover,.btn-aubergine-bright.pretend-hover{background-color:#5e5182}.btn-success{border-color:transparent;background-color:#2c911c;color:#fff}.btn-success:focus,.btn-success:not(:disabled):hover,.btn-success.pretend-hover{background-color:#1f6614}.btn-info{border-color:transparent;background-color:#fc0}.btn-info:focus,.btn-info:not(:disabled):hover,.btn-info.pretend-hover{background-color:#cca300}.btn-warning{border-color:transparent;background-color:#f49e00}.btn-warning:focus,.btn-warning:not(:disabled):hover,.btn-warning.pretend-hover{background-color:#c17d00}.btn-danger{border-color:transparent;background-color:#a51728;color:#fff}.btn-danger:focus,.btn-danger:not(:disabled):hover,.btn-danger.pretend-hover{background-color:#78111d}@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}}.klp-widget-anonymous__text,.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}}/*!\n * ------------------------------------------------------------------------------------------------\n * Copyright 2014 by Swiss Post, Information Technology Services\n * ------------------------------------------------------------------------------------------------\n * $Id$\n * ------------------------------------------------------------------------------------------------\n */.klp-widget-support{background-color:#f49e00 !important}.klp-widget-authenticated-session-link{display:block;padding:12px 10px;text-decoration:none;outline:none}@media (min-width: 600px) and (max-width: 1279px){.klp-widget-authenticated-session-link{padding:12px 12px}}@media (min-width: 1280px){.klp-widget-authenticated-session-link{padding:16px 16px}}.klp-widget-authenticated-menu li{position:relative;display:-ms-inline-flexbox;display:inline-flex;width:296px;height:40px;margin:0;padding:0;list-style-type:none;background-color:white;border-top:none}.notification-link:active{background-color:#ffcc00 !important}.notification-link:hover,.notification-link:focus{background-color:#f4f3f1}.klp-widget-authenticated-menu li:hover>a{color:black}.klp-widget-authenticated-session-name{position:relative;display:table-cell;width:117px;height:55px;overflow:hidden;color:black;font-weight:normal;font-size:15px;font-style:normal;font-stretch:normal;line-height:1;letter-spacing:normal;white-space:nowrap;text-indent:1em;text-overflow:ellipsis;vertical-align:middle}.klp-widget-authenticated-menu a{color:rgba(0, 0, 0, 0.6);font-weight:normal;font-size:17px;font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal}.klp-widget-authenticated-menu ul{padding-bottom:8px;padding-left:0;background-color:white;-webkit-box-shadow:0 0 3px 0 rgba(0, 0, 0, 0.4);box-shadow:0 0 3px 0 rgba(0, 0, 0, 0.4)}.klp-widget-authenticated-menu li:nth-child(2){margin:9px 0 0 0}.klp-widget-authenticated-menu li.name-and-surname:active{background-color:white}.klp-widget-authenticated-menu li.name-and-surname:hover{background-color:white}.klp-widget-anonymous{height:100%;overflow:hidden;color:rgba(0, 0, 0, 0.6)}.klp-widget-anonymous__wrapper{height:100%}.klp-widget-anonymous a{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%;padding:0 16px;color:rgba(0, 0, 0, 0.6);font-weight:300;font-size:1rem;text-decoration:none;background-color:white;outline-offset:-2px}.klp-widget-anonymous a:hover{color:black}.notification-number-detail{position:relative;width:25px;height:20px;margin-left:23px;padding:2px 6px;color:white;font-size:13px;text-align:center;background-color:#a51728;border-radius:10px}li.name-and-surname{display:-ms-flexbox;display:flex;min-width:296px;height:78px;padding-top:0;vertical-align:middle;border-bottom:1px solid rgba(0, 0, 0, 0.2)}.initials-circle{position:relative;display:table;width:40px;height:40px;margin:19px 16px;overflow:hidden;color:white;background-color:#004976;border-radius:40px}.initials-container{display:table-cell;font-weight:300;font-size:17px;line-height:1.65;letter-spacing:normal;text-align:center;vertical-align:middle}.initials-mobile{display:none;visibility:hidden}.notification-link{display:-ms-flexbox;display:flex;-ms-flex:0 0 100%;flex:0 0 100%;text-decoration:none}.klp-widget-notification-link-text{overflow:hidden;font-weight:normal;font-size:17px;white-space:nowrap;text-overflow:ellipsis}li.name-and-surname span.name{position:relative;display:block;width:12em;overflow:hidden;color:black;font-weight:bold;font-size:17px;line-height:24px}li.name-and-surname span.nameCentered{position:relative;display:block;-ms-flex-item-align:center;align-self:center;width:12em;padding:0;overflow:hidden;color:black;font-weight:bold;font-size:17px;line-height:24px}li.name-and-surname span.info{position:relative;display:block;width:12em;overflow:hidden;color:black;font-weight:normal;font-size:15px;line-height:22px}li.name-and-surname span.infoHidden{position:relative;display:none;width:12em;overflow:hidden;color:black;font-weight:normal;font-size:15px;line-height:22px}.nameAndInfoWrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:224px;height:78px;padding:16px 0;line-height:46px}.widget_icon_profile{display:inline-block;width:24px;height:24px;margin:8px 12px;color:black;font-weight:normal;font-style:normal;font-variant:normal;text-transform:none;text-decoration:inherit;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0iYSIgZD0iTTI0IDQwLjQ0NGE1LjM0IDUuMzQgMCAwIDAgNS4zMzMtNS4zMzNBNS4zNCA1LjM0IDAgMCAwIDI0IDI5Ljc3OGE1LjM0IDUuMzQgMCAwIDAtNS4zMzMgNS4zMzNBNS4zNCA1LjM0IDAgMCAwIDI0IDQwLjQ0NHpNMjQgMjhhNy4xMTggNy4xMTggMCAwIDEgNy4xMTEgNy4xMTFBNy4xMTggNy4xMTggMCAwIDEgMjQgNDIuMjIyYy0zLjkyIDAtNy4xMTEtMy4xOS03LjExMS03LjExQzE2Ljg4OSAzMS4xOSAyMC4wNzkgMjggMjQgMjh6bTgtMi42NjdIMTZjLTQuNDEyIDAtOC0zLjU4OS04LThWNGgxLjc3OHYxMy4zMzNBNi4yMyA2LjIzIDAgMCAwIDE2IDIzLjU1NmgxNmE2LjIzIDYuMjMgMCAwIDAgNi4yMjItNi4yMjNWNEg0MHYxMy4zMzNjMCA0LjQxMS0zLjU4OSA4LTggOHpNMTUuMTExIDRoMS43Nzh2MTIuNDQ0SDE1LjExVjR6bTE2IDBoMS43Nzh2MTIuNDQ0SDMxLjExVjR6Ii8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNzgxLTQ3OUg2NTl2MTY4MkgtNzgxeiIvPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIvPgogICAgICAgIDwvbWFzaz4KICAgICAgICA8ZyBmaWxsPSIjNjY2IiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGggZD0iTTAgMGg0OHY0OEgweiIvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==\");background-repeat:no-repeat;background-size:contain;-webkit-transform:rotate(180deg);transform:rotate(180deg);content:\" \"}.widget_icon_settings{display:inline-block;width:24px;height:24px;margin:8px 12px;color:black;font-weight:normal;font-style:normal;font-variant:normal;text-transform:none;text-decoration:inherit;background-image:url(\"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath opacity='1' fill='%23000000' d='M26.4 20h4.267v-6.667h-4.267c-0.4-0.267-0.667-0.533-0.8-0.933-0.267-0.4-0.133-0.8-0.133-1.2l3.067-3.067-4.667-4.667-3.067 3.067c-0.4 0.133-0.8 0-1.2-0.133s-0.667-0.4-0.933-0.8v-4.267h-6.667v4.267c-0.267 0.4-0.533 0.667-0.933 0.8-0.267 0.133-0.667 0.267-1.2 0.133l-3.067-3.067-4.667 4.667 3.067 3.067c0.133 0.4 0 0.8-0.133 1.2s-0.4 0.667-0.8 0.933h-4.267v6.667h4.267c0.4 0.267 0.667 0.533 0.8 0.933s0.133 0.8 0.133 1.2l-3.067 3.067 4.667 4.667 3.067-3.067c0.4-0.133 0.8 0 1.2 0.133s0.667 0.4 0.933 0.8v4.267h6.667v-4.267c0.267-0.4 0.533-0.667 0.933-0.8s0.8-0.133 1.2-0.133l3.067 3.067 4.667-4.667-3.067-3.067c-0.133-0.4 0-0.8 0.133-1.2s0.4-0.667 0.8-0.933zM24.267 22.667v0.133l2.4 2.4-2.8 2.8-2.4-2.4h-0.133c-0.8-0.267-1.6-0.133-2.267 0.133s-1.2 0.8-1.6 1.467l-0.133 0.133v3.333h-4v-3.333l-0.133-0.133c-0.4-0.667-0.933-1.2-1.6-1.467v0c-0.667-0.4-1.467-0.4-2.267-0.133h-0.133l-2.4 2.4-2.8-2.8 2.4-2.4v-0.133c0.267-0.8 0.267-1.6-0.133-2.267-0.267-0.667-0.8-1.2-1.467-1.6l-0.133-0.133h-3.333v-4h3.333l0.133-0.133c0.667-0.4 1.2-0.933 1.467-1.6 0.4-0.667 0.4-1.467 0.133-2.267v-0.133l-2.4-2.4 2.8-2.8 2.4 2.4h0.133c0.8 0.267 1.6 0.267 2.267-0.133 0.667-0.267 1.2-0.8 1.6-1.467l0.133-0.133v-3.333h4v3.333l0.133 0.133c0.4 0.667 0.933 1.2 1.6 1.467 0.667 0.4 1.467 0.4 2.267 0.133h0.133l2.4-2.4 2.8 2.8-2.4 2.4v0.133c-0.267 0.8-0.267 1.6 0.133 2.267 0.267 0.667 0.8 1.2 1.467 1.6l0.133 0.133h3.333v4h-3.333l-0.133 0.133c-0.667 0.4-1.2 0.933-1.467 1.6-0.4 0.667-0.4 1.467-0.133 2.267z'%3E%3C/path%3E %3Cpath opacity='1' fill='%23000000' d='M15.333 10.667c-3.333 0-6 2.667-6 6s2.667 6 6 6c3.333 0 6-2.667 6-6s-2.667-6-6-6zM15.333 21.333c-2.533 0-4.667-2.133-4.667-4.667s2.133-4.667 4.667-4.667c2.533 0 4.667 2.133 4.667 4.667s-2.133 4.667-4.667 4.667z'%3E%3C/path%3E%3C/svg%3E\");background-repeat:no-repeat;background-size:contain;content:\" \"}.widget_icon_changecompany{display:inline-block;width:24px;height:24px;margin:8px 12px;color:black;font-weight:normal;font-style:normal;font-variant:normal;text-transform:none;text-decoration:inherit;background-image:url(\"data:image/svg+xml;base64,IDxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MDAuMDAwMDAwcHQiIGhlaWdodD0iODYzLjAwMDAwMHB0IiB2aWV3Qm94PSIwIDAgNzAwLjAwMDAwMCA4NjMuMDAwMDAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4KPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsODYzLjAwMDAwMCkgc2NhbGUoMC4xMDAwMDAsLTAuMTAwMDAwKSIgZmlsbD0iIzY2NiIgc3Ryb2tlPSJub25lIj4KPHBhdGggZD0iTTY3ODIgODMzOCBjLTE4IC0xOCAtMzk0MCAtMjUgLTQwNTUgLTggLTk4IDE2IC0xMDkgOSAtOTUgLTU2IDkgLTM5CjcgLTE2MiAtNCAtMjQ0IC0yIC0yMCAyIC0yNiAyMSAtMjggMTMgLTIgMzUgMiA0OCA5IDE4IDEwIDM0IDEwIDYyIDMgMjIgLTYKNDggLTcgNjEgLTIgMTIgNCA4NDMgNyAxODQ3IDYgbDE4MjUgLTMgMTkgLTI0IGMxNiAtMTkgMTkgLTQwIDE5IC0xMTYgMCAtNTIKLTUgLTEwNiAtMTAgLTEyMSAtOCAtMTkgLTggLTMwIDAgLTM4IDE1IC0xNSAxNCAtNTk5OCAtMSAtNjAxMyAtNyAtNyAtOSAtMjMKLTUgLTM3IGw2IC0yNSAxMjAgNiBjOTIgNSAxMjcgMyAxNDYgLTcgMzUgLTE5IDYwIC0zIDU1IDM2IC04IDYyIC04IDY0MDQgMAo2NDk5IDEyIDEzNSAxMiAxNDYgMiAxNTUgLTE3IDE2IC00OSAyMCAtNjEgOHoiPjwvcGF0aD4KPHBhdGggZD0iTTUwNCA3MjY1IGMtNCAtMTAgLTIgLTMyIDQgLTQ5IDE3IC00NiAxNyAtNjU3NyAxIC02NTkzIC05IC05IC05Ci0xOSAtMSAtNDAgMTAgLTI1IDkgLTE3NyAtMSAtMzA2IC01IC01NiA2IC02MCAxMjEgLTQ3IDcyIDkgMTA5IDkgMTQwIDEgMjYKLTggNTUgLTggODEgLTIgMjUgNSA1OCA1IDg2IC0xIDMyIC03IDY3IC02IDExMyAyIDg0IDE0IDEyNzggMTMgMTQzMCAtMiAxMTcKLTExIDEzNyAtNSAxMjUgNDEgLTQgMTQgLTYgNTggLTYgOTYgMCAzOSAwIDEwNCAtMSAxNDUgMCA0MSAtMSAzMDYgLTEgNTg4IGwwCjUxNCAyMyAxOCBjMjEgMTcgNTQgMTggNTI3IDIwIGw1MDUgMSAyNSAtMjUgMjUgLTI1IDAgLTY1MCBjLTEgLTM5OCAtNSAtNjUzCi0xMSAtNjU2IC0xNCAtOSAtMTEgLTUxIDYgLTY1IDExIC05IDMzIC0xMCA5MiAtMiA2NSA4IDE3NjkgOCAxOTUyIC0xIDQxIC0yCjQ1IDAgNTMgMjggNSAxOCA0IDQwIC0zIDU3IC0xNSAzNyAtMTYgMTk1IC0xIDIxMCA4IDggOCAxNiAtMSAzMiAtOSAxNiAtMTIKNzM1IC0xMiAzMTc2IDAgMTczNSAyIDMyNDAgNCAzMzQ0IDQgMTc5IDMgMTkwIC0xNSAxOTYgLTEwIDQgLTMwIDMgLTQ0IC0yCi0zMSAtMTAgLTUxMjAgLTQgLTUxNzIgNiAtMzEgNyAtMzkgNSAtNDQgLTl6IG00OTQzIC0zMjggYzE3IC0xNyAxOCAtMTU5IDIwCi0zMTgxIDMgLTMwOTUgMiAtMzE2NSAtMTYgLTMxODggLTE4IC0yMiAtMjYgLTIzIC0xNTYgLTI2IC04NyAtMiAtMTQxIDAgLTE0OQo3IC05IDggLTIyIDggLTQzIDAgLTIwIC03IC0yMDEgLTkgLTU0MSAtNyAtNDg1IDMgLTUxMSA0IC01MzEgMjIgLTIxIDE5IC0yMQoyMSAtMjEgNjczIDAgNDM1IDMgNjYxIDEwIDY3NCA2IDExIDcgMjYgMiAzNCAtNyAxNCAtMTEwIDE2IC04NzcgMTYgbC04NzAgMAotNiAtMjQgYy00IC0xNCAtMyAtMzEgMiAtMzggMTEgLTE4IDExIC0xMzAgMCAtMTQ4IC01IC04IC0zIC0yNCA0IC00MCA5IC0yMAoxMiAtMTU5IDExIC01NzggLTEgLTUxNiAtMiAtNTUzIC0xOSAtNTcwIC0xNyAtMTcgLTYwIC0xOCAtNjg1IC0yMSAtNjc4IC0zCi03MzMgLTEgLTc0NiAzNCAtMyA4IC02IDE0MzcgLTYgMzE3NiAtMSAyOTE3IDEgMzE2MiAxNiAzMTc5IDkgMTAgMzQgMjAgNTgKMjIgMjIgMiAxMDUwIDMgMjI4MyAzIDIxMzkgLTEgMjI0MyAtMiAyMjYwIC0xOXoiPjwvcGF0aD4KPHBhdGggZD0iTTIwNzUgNjIwOSBjLTUgLTcgLTg1IC0xMCAtMjUxIC04IGwtMjQ1IDMgMCAtNjg3IC0xIC02ODcgNjg2IC0xCjY4NyAwIDAgNjkzIDAgNjkzIC0yMSAzIGMtMTIgMiAtMjYgLTEgLTMzIC02IC0xNiAtMTMgLTc4NSAtMTQgLTc5MyAtMSAtNyAxMgotMjEgMTEgLTI5IC0yeiBtNTQ2IC0zMzYgYzExIC0xMyAxNCAtODIgMTQgLTM1MyAwIC0zMTkgLTEgLTMzOSAtMTkgLTM1OSAtMTkKLTIxIC0yNSAtMjEgLTM1NCAtMjAgLTMxNSAxIC0zMzUgMiAtMzUzIDIwIC0xOCAxOCAtMTkgMzggLTE5IDM1NiAwIDI5OSAyCjMzOCAxNyAzNTUgMTUgMTcgMzkgMTggMzU4IDE4IDMwNiAwIDM0NCAtMiAzNTYgLTE3eiI+PC9wYXRoPgo8cGF0aCBkPSJNMzM0MSA2MjExIGMtMTEgLTcgLTEyIC0xOSAtNiAtNTIgOSAtNDYgMTMgLTExOTggNSAtMTI4MiBsLTUgLTQ4CjY4OSAwIGMzNzkgMSA2OTMgNCA2OTYgOCA0IDUgNCA0NCAtMSA4NyAtNiA2NyAtNCAxMTQ0IDQgMTI0NSBsMiAzMyAtNTcwIDIKYy0zMTMgMiAtNTc3IDMgLTU4NSA0IC04IDEgLTUxIDEgLTk1IDAgLTQ0IC0xIC04OSAxIC0xMDAgNSAtMTEgNCAtMjYgMyAtMzQKLTJ6IG0xMDI2IC0zMjYgYzQwIC05IDQ1IC01NiA0MSAtMzkyIC0zIC0yODQgLTUgLTMxNCAtMjEgLTMzMCAtMTYgLTE2IC00NwotMTggLTM1MSAtMjEgLTMxNyAtMyAtMzM0IC0yIC0zNTcgMTcgbC0yNCAxOSAwIDMzNSBjMCAzMTIgMSAzMzYgMTkgMzU1IDEwCjEyIDMyIDIyIDUwIDI0IDUyIDUgNjE5IC0xIDY0MyAtN3oiPjwvcGF0aD4KPHBhdGggZD0iTTI4ODMgNDA4OSBjLTcgLTcgLTIxNSAtOSAtNjYyIC03IC02MjMgMyAtNjUxIDIgLTY1NyAtMTUgLTMgLTEwIC0xCi0zMSA2IC00NiA4IC0yMCAxMCAtMjA2IDggLTY3MiBsLTMgLTY0NCA2ODggMiA2ODggMiAwIDY4OCBjMCA2NTMgLTEgNjg4IC0xOAo2OTQgLTI2IDExIC0zOCAxMCAtNTAgLTJ6IG0tMjYzIC0zNDYgYzIxIC0yOCAyMiAtMzIgMTggLTM1NiBsLTMgLTMyOSAtMjQKLTE5IGMtMjIgLTE4IC00MyAtMTkgLTM1MiAtMTkgLTMxMiAwIC0zMzAgMSAtMzQ4IDE5IC0xOSAxOSAtMjAgMzcgLTIxIDM1NSAwCjMyNCAwIDMzNiAyMCAzNTYgMTkgMTkgMzIgMjAgMzU0IDIwIGwzMzUgMCAyMSAtMjd6Ij48L3BhdGg+CjxwYXRoIGQ9Ik00Njc1IDQwODkgYy0xNiAtNSAtMzI1IC04IC02ODUgLTggbC02NTUgMiA0IC0zNCBjMTAgLTkyIDExIC0xMjQ3CjEgLTEyODcgLTE0IC01NyAtMiAtNzQgNDMgLTYxIDE5IDYgMzAyIDkgNjg3IDggbDY1NSAtMSAtMyAzNCBjLTEgMTggLTUgMzAxCi04IDYyOCAtNSA0NjQgLTMgNjA3IDcgNjQ4IDE1IDY1IDMgODUgLTQ2IDcxeiBtLTI5MCAtMzM5IGMxNiAtMTggMTkgLTQyIDIxCi0xNzcgMiAtMTE4IC0xIC0xNjMgLTExIC0xODMgLTExIC0yMSAtMTEgLTMwIC0yIC0zOSA4IC05IDExIC01NCAxMCAtMTU0IC0zCi0xMzEgLTUgLTE0MyAtMjQgLTE1OSAtMTkgLTE2IC01MiAtMTggLTM0OSAtMTggLTM5OSAwIC0zNzAgLTExIC0zNzEgMTM1IDAKNTUgLTEgMTM0IC0yIDE3NSAtMSA0MSAtMSAxNDggLTEgMjM4IDEgMTQxIDMgMTY1IDE5IDE4MiAxNyAxOSAzMSAyMCAzNTUgMjAKMzI2IDAgMzM3IC0xIDM1NSAtMjB6Ij48L3BhdGg+CjwvZz4KPC9zdmc+\");background-repeat:no-repeat;background-size:contain;content:\" \"}.widget_icon_logout{display:inline-block;width:24px;height:24px;margin:8px 12px;color:black;font-weight:normal;font-style:normal;font-variant:normal;text-transform:none;text-decoration:inherit;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0iYSIgZD0iTTAgMGgyOHYySDJ2NDRoMjZ2MkgwVjB6bTMzLjU4NiAxNGgyLjgyOGwxMSAxMS0xMSAxMWgtMi44MjhsMTAtMTBIMTh2LTJoMjUuNTg2bC0xMC0xMHoiLz4KICAgIDwvZGVmcz4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZmlsbD0ibm9uZSIgZD0iTS00MTAtMzIwaDE0NDB2MTY4MkgtNDEweiIvPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIvPgogICAgICAgIDwvbWFzaz4KICAgICAgICA8ZyBmaWxsPSIjNjY2IiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGggZD0iTTAgMGg0OHY0OEgweiIvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==\");background-repeat:no-repeat;background-size:contain;content:\" \"}.widget_icon_notification{display:inline-block;width:24px;height:24px;margin:8px 12px;color:black;font-weight:normal;font-size:1em;font-style:normal;font-variant:normal;text-transform:none;text-decoration:inherit;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0iYSIgZD0iTTIgNDBoNDRWOEgydjMyem0yMy40NDYtMTEuOTYzYy0uNzYyLjc5Ny0yLjEzLjc5OC0yLjg5Mi0uMDAyTDUuMzM3IDEwaDM3LjMyN0wyNS40NDYgMjguMDM3ek0xNS45MzUgMjRMNCAzNi41MDRWMTEuNDk2TDE1LjkzNSAyNHptMS4zODQgMS40NDhsMy43ODcgMy45NjdBMy45NjYgMy45NjYgMCAwIDAgMjQgMzAuNjU2YTMuOTcgMy45NyAwIDAgMCAyLjg5My0xLjIzOGwzLjc4OC0zLjk3TDQyLjY2MiAzOEg1LjMzOGwxMS45ODEtMTIuNTUyek0zMi4wNjQgMjRMNDQgMTEuNDk1djI1LjAwOUwzMi4wNjQgMjR6Ii8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTE0OS0zMThIMjkxdjE2ODJoLTE0NDB6Ii8+CiAgICAgICAgPG1hc2sgaWQ9ImIiIGZpbGw9IiNmZmYiPgogICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIi8+CiAgICAgICAgPC9tYXNrPgogICAgICAgIDxnIGZpbGw9IiM2NjYiIG1hc2s9InVybCgjYikiPgogICAgICAgICAgICA8cGF0aCBkPSJNMCAwaDQ4djQ4SDB6Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K\");background-repeat:no-repeat;background-size:contain;content:\" \"}#post-klp-login-widget.bubble:before{position:absolute;top:calc(100% + 2px);right:50%;z-index:9999;width:0;height:0;margin-right:-7px;border-color:transparent transparent white transparent;border-style:solid;border-width:0 7px 7px 7px;content:\"\"}#post-klp-login-widget.bubble:after{position:absolute;top:100%;right:50%;z-index:9998;width:0;height:0;margin-right:-8px;border-color:transparent transparent rgba(0, 0, 0, 0.07) transparent;border-style:solid;border-width:0 8px 8px 8px;content:\"\"}.klp-widget-anonymous .klp-widget-anonymous__text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;border:0;clip:rect(0 0 0 0)}@media (min-width: 600px) and (max-width: 1023px){.klp-widget-anonymous .klp-widget-anonymous__text{position:static;width:auto;height:auto;margin:0;padding-right:10px;overflow:visible;clip:auto}}@media (min-width: 1024px) and (max-width: 1279px){.klp-widget-anonymous .klp-widget-anonymous__text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;border:0;clip:rect(0 0 0 0)}}@media (min-width: 1280px){.klp-widget-anonymous .klp-widget-anonymous__text{position:static;width:auto;height:auto;margin:0;padding-right:8px;overflow:visible;font-size:17px;clip:auto}}.klp-widget-anonymous a{padding:0 1rem}@media (min-width: 600px) and (max-width: 1023px){.klp-widget-anonymous a{padding:0 16px}}@media (min-width: 1024px){.klp-widget-anonymous a{padding:0 20px}}.initials-mobile{display:block;width:32px;height:32px;color:white;font-weight:normal;font-size:13px;line-height:32px;letter-spacing:1px;text-align:center;background-color:#004976;border-radius:32px;visibility:visible}@media (min-width: 1024px){.initials-mobile{width:40px;height:40px;font-size:15px;line-height:40px;border-radius:40px}}.notification-number{position:absolute;top:6px;right:5px;display:block;width:15px;height:15px;color:white;font-size:12px;line-height:20px;text-align:center;background-color:#a51728;background-clip:padding-box;border:2px solid white;border-radius:10px}@media (min-width: 600px) and (max-width: 1023px){.notification-number{right:8px}}@media (min-width: 1024px) and (max-width: 1279px){.notification-number{right:8px;width:17px;height:17px}}@media (min-width: 1280px){.notification-number{top:10px;right:12px;width:17px;height:17px}}.klp-widget-authenticated-session-name{display:none}.linkContainer{-ms-flex-item-align:center;align-self:center;height:16px;margin:10px 0}.klp-widget-authenticated-menu{position:fixed;top:64px;z-index:3;width:296px}@media (max-width: 399px){.klp-widget-authenticated-menu{right:0;left:0;margin:0 auto}}@media (min-width: 400px) and (max-width: 1023px){.klp-widget-authenticated-menu{position:absolute;top:64px;right:8px}}@media (min-width: 1024px) and (max-width: 1279px){.klp-widget-authenticated-menu{position:absolute;top:72px;right:8px}}@media (min-width: 1280px){.klp-widget-authenticated-menu{position:absolute;top:80px;right:8px}}.klp-widget-authenticated-menu>ul{margin:0}.klp-widget-authenticated{min-width:52px;max-height:55px;background-color:white}@media (min-width: 1024px) and (max-width: 1279px){.klp-widget-authenticated{max-height:64px}}@media (min-width: 1280px){.klp-widget-authenticated{max-height:72px}}.item-centered{-ms-flex-align:center;align-items:center;-ms-flex-item-align:center;align-self:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.item-left{-ms-flex-align:start;align-items:flex-start;-ms-flex-item-align:start;align-self:flex-start}.item-right{-ms-flex-align:end;align-items:flex-end;-ms-flex-item-align:end;align-self:flex-end}.changeAccountModal{display:table}.modal{position:fixed;top:0;left:0;z-index:9999;display:none;width:100vw;height:100vh;padding-top:100px;overflow:auto;background-color:black;background-color:rgba(0, 0, 0, 0.4);}.modal-content{-ms-flex-align:center;align-items:center;width:80%;min-height:20em;margin:auto;background-color:white;border:1px solid #888}@media (min-width: 1024px){.modal-content{max-width:584px;margin:1.75rem auto}}.close{position:absolute;top:0;right:15px;color:#000;font-weight:lighter;font-size:40px}.close:hover,.close:focus{text-decoration:none;cursor:pointer}.btn-modal-container{position:absolute;bottom:1em;width:100%}.pi{display:inline-block;width:1.5rem;height:1.5rem;vertical-align:middle;background-repeat:no-repeat;background-position:center center;background-size:contain;border:none}.pi-2086{width:4.5rem;height:4.5rem;margin-bottom:2em;background-image:url(\"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M17.333 25.333v-16h-4.667v2.667h2v13.333h-2v2.667h6.667v-2.667z'%3E%3C/path%3E %3Cpath fill='%23000' d='M14.667 4h2.667v2.667h-2.667v-2.667z'%3E%3C/path%3E%3C/svg%3E\");border-color:#000}.modal-text-container{-ms-flex-line-pack:center;align-content:center;width:100%;min-height:17em;background:#ffcc00}.modal-button-container{-ms-flex-line-pack:center;align-content:center;width:100%;height:6em;margin-right:0;margin-left:0;background:white}.text-align-center{text-align:center}.modal-text{color:black;font-weight:bold}:host{display:block}.widget-wrapper{position:relative}.widget-wrapper,#post-klp-login-widget,.klp-widget-anonymous,.klp-widget-anonymous__wrapper,.klp-widget-anonymous__wrapper a{height:100%}.klp-widget-anonymous__wrapper a{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:#333333;text-decoration:none;padding:0 1rem;-webkit-transition:color 200ms;transition:color 200ms}.klp-widget-anonymous__wrapper a:hover,.klp-widget-anonymous__wrapper a:focus{color:black}@media (min-width: 1024px){.klp-widget-anonymous__wrapper a{padding:0 1.125rem}}.klp-widget-anonymous__wrapper a span{margin-right:0.5rem}.klp-widget-anonymous__wrapper a svg{width:1.5rem;height:1.5rem}@media (min-width: 600px) and (max-width: 1023.98px){.klp-widget-anonymous__text{position:static;width:auto;height:auto;margin:auto;overflow:visible;clip:auto;visibility:visible}}@media (min-width: 1280px){.klp-widget-anonymous__text{position:static;width:auto;height:auto;margin:auto;overflow:visible;clip:auto;visibility:visible}}#post-klp-login-widget .nameAndInfoWrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;width:224px;height:78px;padding:16px 0px;line-height:46px;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.modal-content{position:relative}.modal-text-container{padding-top:3rem}#post-klp-login-widget .modal-button-container{height:auto;padding:2rem}#post-klp-login-widget .modal-button-container>.item-centered{-ms-flex-pack:center;justify-content:center}";
+
+const PostKlpLoginWidget = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  async componentDidLoad() {
+    var _a;
+    const { initializeKLPLoginWidget } = await import('./klp-widget.controller-be1eeb16.js');
+    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" }))));
+  }
+  get host() { return getElement(this); }
+};
+PostKlpLoginWidget.style = postKlpLoginWidgetCss;
+
+export { PostKlpLoginWidget as post_klp_login_widget };
+
+//# sourceMappingURL=post-klp-login-widget.entry.js.map

package/dist/esm/post-klp-login-widget.entry.js.map

@@ -0,0 +1 @@
+{"file":"post-klp-login-widget.entry.js","mappings":";;;;AAAA,MAAM,qBAAqB,GAAG,0nqCAA0nqC;;MCW3oqC,kBAAkB;;;;EAG7B,MAAM,gBAAgB;;IACpB,MAAM,EAAE,wBAAwB,EAAE,GAAG,MAAM,OAAO,qCAAyB,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;GACJ;;;;EAMD,MAAM,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;GACF;EAED,MAAM;;IACJ,IAAI,EAAC,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,QACE,EAAC,IAAI,QACH,EAAC,SAAS,OAAG,EACb,WAAK,KAAK,EAAC,gBAAgB,8BACzB,WAAK,EAAE,EAAC,uBAAuB,GAAO,CAClC,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/post-klp-login-widget/post-klp-login-widget.scss?tag=post-klp-login-widget&encapsulation=shadow","./src/components/post-klp-login-widget/post-klp-login-widget.tsx"],"sourcesContent":["@use '@swisspost/design-system-styles/variables/color';\r\n@use '@swisspost/design-system-styles/components/button';\r\n@use '../../utils/utils.scss';\r\n@use '../../utils/mixins.scss';\r\n\r\n@use './widget-styles.scss';\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.widget-wrapper {\r\n  position: relative;\r\n}\r\n\r\n.widget-wrapper,\r\n#post-klp-login-widget,\r\n.klp-widget-anonymous,\r\n.klp-widget-anonymous__wrapper,\r\n.klp-widget-anonymous__wrapper a {\r\n  height: 100%;\r\n}\r\n\r\n.klp-widget-anonymous__wrapper a {\r\n  display: flex;\r\n  align-items: center;\r\n  color: color.$gray-80;\r\n  text-decoration: none;\r\n  padding: 0 1rem;\r\n  transition: color 200ms;\r\n\r\n  &:hover,\r\n  &:focus {\r\n    color: black;\r\n  }\r\n\r\n  @include mixins.min(lg) {\r\n    padding: 0 1.125rem;\r\n  }\r\n\r\n  span {\r\n    margin-right: 0.5rem;\r\n  }\r\n\r\n  svg {\r\n    width: 1.5rem;\r\n    height: 1.5rem;\r\n  }\r\n}\r\n\r\n.klp-widget-anonymous__text {\r\n  @extend %visually-hidden;\r\n\r\n  @include mixins.between(rg, lg) {\r\n    @include mixins.reset-visually-hidden();\r\n  }\r\n\r\n  @include mixins.min(xl) {\r\n    @include mixins.reset-visually-hidden();\r\n  }\r\n}\r\n\r\n#post-klp-login-widget .nameAndInfoWrapper {\r\n  position: relative;\r\n  display: flex;\r\n\r\n  align-items: flex-start;\r\n  width: 224px;\r\n  height: 78px;\r\n  padding: 16px 0px;\r\n  line-height: 46px;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n}\r\n\r\n.modal-content {\r\n  position: relative;\r\n}\r\n\r\n.modal-text-container {\r\n  padding-top: 3rem;\r\n}\r\n\r\n#post-klp-login-widget .modal-button-container {\r\n  height: auto;\r\n  padding: 2rem;\r\n\r\n  & > .item-centered {\r\n    justify-content: center;\r\n  }\r\n}\r\n","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"],"version":3}

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

@@ -0,0 +1,99 @@
+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';
+
+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); }
+};
+PostLanguageSwitch.style = postLanguageSwitchCss;
+
+export { PostLanguageSwitch as post_language_switch };
+
+//# sourceMappingURL=post-language-switch.entry.js.map

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

@@ -0,0 +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}

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

@@ -0,0 +1,63 @@
+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';
+
+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); }
+};
+PostLogo.style = postLogoCss;
+
+export { PostLogo as post_logo };
+
+//# sourceMappingURL=post-logo.entry.js.map

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

@@ -0,0 +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}