@swisspost/internet-header 1.7.1 → 1.7.3-beta.0

package/dist/esm-es5/post-main-navigation.entry.js

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(t,i,e,n){function o(t){return t instanceof e?t:new e((function(i){i(t)}))}return new(e||(e=Promise))((function(e,a){function r(t){try{s(n.next(t))}catch(t){a(t)}}function l(t){try{s(n["throw"](t))}catch(t){a(t)}}function s(t){t.done?e(t.value):o(t.value).then(r,l)}s((n=n.apply(t,i||[])).next())}))};var __generator=this&&this.__generator||function(t,i){var e={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},n,o,a,r;return r={next:l(0),throw:l(1),return:l(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function l(t){return function(i){return s([t,i])}}function s(l){if(n)throw new TypeError("Generator is already executing.");while(r&&(r=0,l[0]&&(e=0)),e)try{if(n=1,o&&(a=l[0]&2?o["return"]:l[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,l[1])).done)return a;if(o=0,a)l=[l[0]&2,a.value];switch(l[0]){case 0:case 1:a=l;break;case 4:e.label++;return{value:l[1],done:false};case 5:e.label++;o=l[1];l=[0];continue;case 7:l=e.ops.pop();e.trys.pop();continue;default:if(!(a=e.trys,a=a.length>0&&a[a.length-1])&&(l[0]===6||l[0]===2)){e=0;continue}if(l[0]===3&&(!a||l[1]>a[0]&&l[1]<a[3])){e.label=l[1];break}if(l[0]===6&&e.label<a[1]){e.label=a[1];a=l;break}if(a&&e.label<a[2]){e.label=a[2];e.ops.push(l);break}if(a[2])e.ops.pop();e.trys.pop();continue}l=i.call(t,e)}catch(t){l=[6,t];o=0}finally{n=a=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:true}}};import{h,r as registerInstance,c as createEvent,H as Host,g as getElement}from"./index-35186c69.js";import{t as throttle}from"./index-d2256e06.js";import{c as clearAllBodyScrollLocks,d as disableBodyScroll,e as enableBodyScroll}from"./bodyScrollLock.esm-afcc00e3.js";import{s as state}from"./store-b78e2d3b.js";import{u as userPrefersReducedMotion}from"./ui.service-2fbc9c45.js";import{S as SvgSprite}from"./svg-sprite.component-f319da57.js";import{S as SvgIcon}from"./svg-icon.component-7bac7397.js";var LevelOneAction=function(t){var i,e,n;var o=t.level.url?"a":"button";return h(o,{class:{"main-link":true,active:!!t.level.isActiveOverride,focus:t.isOpen},href:t.level.url,title:((i=t.level.title)===null||i===void 0?void 0:i.trim())&&((e=t.level.title)===null||e===void 0?void 0:e.trim())!==((n=t.level.text)===null||n===void 0?void 0:n.trim())?t.level.title:undefined,tabindex:t.level.url?undefined:0,"aria-haspopup":!t.level.noFlyout+"","aria-expanded":t.level.noFlyout?null:t.isOpen+"",onTouchEnd:function(i){return t.onTouchEnd(i)},onKeyDown:function(i){return t.onKeyDown(i)},onClick:function(i){return t.onClick(i)}},h("span",null,t.level.text),h("svg",{"aria-hidden":"true"},h("use",{href:"#pi-pointy-arrow-right"})))};var postMainNavigationCss='.flyout-nav,.flyout-column h3{font-size:0.9375rem}@media (min-width: 600px){.flyout-nav,.flyout-column h3{font-size:1rem}}@media (min-width: 1024px){.flyout-nav,.flyout-column h3{font-size:1.0625rem}}.flyout-title{font-size:1.0625rem}@media (min-width: 600px){.flyout-title{font-size:1.25rem}}@media (min-width: 1024px){.flyout-title{font-size:1.5rem}}@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}}.main-container,.flyout-linklist,.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}.main-link,.flyout-close-button,.flyout-link,.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}.main-link:hover,.flyout-close-button:hover,.flyout-link:hover,.nav-link:hover,.main-link:focus,.flyout-close-button:focus,.flyout-link:focus,.nav-link:focus{color:black}.main-link>svg,.flyout-close-button>svg,.flyout-link>svg,.nav-link>svg{width:1.4em;height:1.4em;-ms-flex-negative:0;flex-shrink:0}.main-link>span,.flyout-close-button>span,.flyout-link>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{--host-window-height:var(--window-height, 100vh);--calculated-header-height:calc(var(--header-height) + 1px);display:block;min-width:0;height:var(--header-height)}:host(.no-animation) *{-webkit-animation:none !important;animation:none !important;-webkit-transition:none !important;transition:none !important}@media (min-width: 1024px){.main-navigation,.main-container,.main-container li,.main-link{height:100%}}.main-navigation{font-size:1.125rem}@media (min-width: 1024px){.main-navigation{font-size:1rem;margin:0 0.75rem}}@media (min-width: 1280px){.main-navigation{font-size:1.125rem}}@media (min-width: 1441px){.main-navigation{font-size:1.25rem}}@media (max-width: 1023.98px){.main-navigation{position:absolute;top:var(--calculated-header-height);left:0;background:white;height:calc(var(--host-window-height) - var(--calculated-header-height));width:100%;margin:0;overflow:hidden scroll;-webkit-overflow-scrolling:touch;-ms-scroll-chaining:none;overscroll-behavior:contain;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;z-index:-1;visibility:hidden;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:visibility 0.35s, -webkit-transform 0.35s;transition:visibility 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, visibility 0.35s;transition:transform 0.35s, visibility 0.35s, -webkit-transform 0.35s}}@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce){.main-navigation{-webkit-transition:none;transition:none}}@media (max-width: 1023.98px){.main-navigation.open{-webkit-transform:translateY(0);transform:translateY(0);visibility:visible}}.main-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}@media (max-width: 1023.98px){.main-container{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start;padding-top:2.5rem;padding-bottom:2.5rem}.main-container>li+li{border-top:1px solid hsl(0, 0%, 90%)}}@media (min-width: 1024px){.main-container{padding-right:0;padding-left:0}}.main-container>li{-ms-flex:0 1 auto;flex:0 1 auto;min-width:0}.main-link{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-right:0.75rem;padding-left:0.75rem;text-align:left;cursor:pointer;width:100%}@media (min-width: 1024px){.main-link svg{display:none}}@media (max-width: 1023.98px){.main-link{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;font-weight:300;padding:0.625rem 0;width:100%;text-align:left}.main-link svg{width:1.5rem;height:1.5rem}}.main-link span{overflow:hidden;text-overflow:ellipsis}.main-link,.flyout-link{position:relative;color:black}.main-link::after,.flyout-link::after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:4px;background-color:transparent;opacity:0;-webkit-transform:scaleX(0.8);transform:scaleX(0.8);-webkit-transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)}@media (prefers-reduced-motion: reduce){.main-link::after,.flyout-link::after{-webkit-transition:none;transition:none}}.main-link:hover::after,.main-link.focus::after,.flyout-link:hover::after,.flyout-link.focus::after{background-color:hsl(0, 0%, 80%);opacity:1;-webkit-transform:scale(1);transform:scale(1)}.main-link.active,.flyout-link.active{font-weight:700}.main-link.active::after,.flyout-link.active::after{background-color:#fc0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.flyout{left:0;width:100%;background:white;padding-bottom:3rem;overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;visibility:hidden}@media (min-width: 1024px){.flyout{position:absolute;top:100%;max-height:calc(100vh - var(--header-height) - var(--meta-header-height) - 1px);z-index:-1;-webkit-box-shadow:0 0 1px 0 rgba(0, 0, 0, 0.4);box-shadow:0 0 1px 0 rgba(0, 0, 0, 0.4);-webkit-transform:translateY(-100%);transform:translateY(-100%)}.flyout.open{-webkit-box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.4);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.4);-webkit-transform:translateY(0);transform:translateY(0)}}@media (max-width: 1023.98px){.flyout{position:fixed;top:0;height:100%;z-index:1;-webkit-transform:translateX(100%);transform:translateX(100%)}.flyout.open{-webkit-transform:translateX(0);transform:translateX(0)}}.flyout.open{visibility:visible}.flyout.animate{-webkit-transition:visibility 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s;transition:visibility 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s;transition:transform 0.35s, visibility 0.35s, box-shadow 0.35s;transition:transform 0.35s, visibility 0.35s, box-shadow 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s}@media (prefers-reduced-motion: reduce){.flyout.animate{-webkit-transition:none;transition:none}}.flyout-nav{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;min-height:3.5rem;-webkit-box-sizing:content-box;box-sizing:content-box}.flyout-row{display:-ms-flexbox;display:flex;gap:1.5rem}@media (max-width: 1023.98px){.flyout-row{display:grid;grid-template-columns:1fr 1fr}}@media (max-width: 599.98px){.flyout-row{grid-template-columns:1fr}}.flyout-column{-ms-flex:1;flex:1;max-width:25%}@media (max-width: 1023.98px){.flyout-column{max-width:none}}.flyout-column h3{margin-top:0}.flyout-back-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:1rem;font-weight:400;cursor:pointer}@media (max-width: 599.98px){.flyout-back-button{padding-right:16px;padding-left:16px}}@media (min-width: 600px) and (max-width: 1023.98px){.flyout-back-button{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.flyout-back-button{padding-right:40px;padding-left:40px}}.flyout-back-button svg{width:1.5rem;height:1.5rem}@media (min-width: 1024px){.flyout-back-button{display:none}}.flyout-close-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-left:auto;padding:0 1.5rem;cursor:pointer}.flyout-close-button svg{width:1.5rem;height:1.5rem}@media (max-width: 1023.98px){.flyout-close-button{display:none}}.flyout-linklist li{border-top:1px solid hsl(0, 0%, 90%)}.flyout-linklist:first-child>li{border-top-color:transparent}.flyout-link{display:block;padding:0.75rem 0}.flyout-title{margin:2.5rem 0 1.5rem 0}@media (min-width: 1024px){.flyout-title{display:none}}';var PostMainNavigation=function(){function t(t){registerInstance(this,t);this.dropdownToggled=createEvent(this,"dropdownToggled",7);this.flyoutToggled=createEvent(this,"flyoutToggled",7);this.resizeTimer=null;this.mouseLeaveTimer=null;this.mouseEnterTimer=null;this.activeFlyout=undefined;this.mobileMenuOpen=undefined}t.prototype.connectedCallback=function(){var t=this;this.throttledResize=throttle(300,(function(){return t.handleResize()}));window.addEventListener("resize",this.throttledResize,{passive:true});this.setWindowHeight()};t.prototype.disconnectedCallback=function(){window.removeEventListener("resize",this.throttledResize);clearAllBodyScrollLocks();if(this.mouseEnterTimer!==null)window.clearTimeout(this.mouseEnterTimer);if(this.mouseLeaveTimer!==null)window.clearTimeout(this.mouseLeaveTimer)};t.prototype.handleResize=function(){var t=this;this.host.classList.add("no-animation");if(this.resizeTimer!==null)window.clearTimeout(this.resizeTimer);this.resizeTimer=window.setTimeout((function(){t.host.classList.remove("no-animation")}),300);this.setWindowHeight()};t.prototype.setWindowHeight=function(){var t=this;if(!this.host){return}this.host.style.setProperty("--window-height","".concat(window.innerHeight,"px"));window.setTimeout((function(){t.host.style.setProperty("--window-height","".concat(window.innerHeight,"px"))}),100)};t.prototype.openFlyout=function(t){var i;var e=(i=this.host.shadowRoot)===null||i===void 0?void 0:i.getElementById(t);if(e&&this.activeFlyout!==""){this.addFlyoutAnimation(e)}this.activeFlyout=t;this.flyoutToggled.emit(t);this.setWindowHeight();if(this.mouseLeaveTimer!==null){window.clearTimeout(this.mouseLeaveTimer);this.mouseLeaveTimer=null}};t.prototype.closeFlyout=function(t){var i;if(t===undefined)return;var e=(i=this.host.shadowRoot)===null||i===void 0?void 0:i.getElementById(t);if(e){this.addFlyoutAnimation(e)}this.activeFlyout=null;this.flyoutToggled.emit()};t.prototype.addFlyoutAnimation=function(t){var i=this;if(!userPrefersReducedMotion()){t.classList.add("animate");t.addEventListener("transitionend",(function(){return i.removeFlyoutAnimation(t)}),{once:true})}};t.prototype.removeFlyoutAnimation=function(t){t.classList.remove("animate")};t.prototype.isActiveFlyout=function(t){return t===this.activeFlyout};t.prototype.handleMouseEnter=function(t){var i=this;if(this.mouseEnterTimer!==null){window.clearTimeout(this.mouseEnterTimer);this.mouseEnterTimer=null}if(this.mouseLeaveTimer&&this.activeFlyout===t.id){window.clearTimeout(this.mouseLeaveTimer);this.mouseLeaveTimer=null}if(window.innerWidth>=1024&&t.flyout.length>0&&this.activeFlyout!==t.id){this.mouseEnterTimer=window.setTimeout((function(){i.mouseEnterTimer=null;if(t.id!==undefined)i.openFlyout(t.id)}),200)}};t.prototype.handleMouseLeave=function(t){var i=this;if(this.mouseEnterTimer!==null){window.clearTimeout(this.mouseEnterTimer)}if(this.activeFlyout&&this.activeFlyout!==t.id){return}if(window.innerWidth>=1024&&t.flyout.length>0){this.mouseLeaveTimer=window.setTimeout((function(){i.closeFlyout(t.id)}),300)}};t.prototype.handleTouchEnd=function(t,i){if(!this.isActiveFlyout(i.id)&&!i.noFlyout){if(t.cancelable)t.preventDefault();if(i.id)this.openFlyout(i.id)}};t.prototype.handleKeyPress=function(t,i){if(t.key==="Enter"&&!this.isActiveFlyout(i.id)&&!i.noFlyout){t.preventDefault();if(i.id)this.openFlyout(i.id)}};t.prototype.handleClick=function(t,i){if(!this.isActiveFlyout(i.id)&&!i.noFlyout){t.preventDefault();if(i.id)this.openFlyout(i.id)}};t.prototype.setBodyScroll=function(){if(this.mobileMenuOpen){disableBodyScroll(this.flyoutElement)}else{enableBodyScroll(this.flyoutElement)}};t.prototype.toggleDropdown=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(i){this.mobileMenuOpen=t===undefined?!this.mobileMenuOpen:t;this.dropdownToggled.emit({open:this.mobileMenuOpen,element:this.host});if(t===false){this.closeFlyout()}this.setBodyScroll();this.setWindowHeight();return[2,this.mobileMenuOpen]}))}))};t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){var t,i;return __generator(this,(function(e){i=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelector(".main-link");if(i){i.focus()}return[2]}))}))};t.prototype.setActiveFlyout=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(i){this.activeFlyout=t;this.flyoutToggled.emit(this.activeFlyout);return[2]}))}))};t.prototype.render=function(){var t=this;var i;if(((i=state.localizedConfig)===null||i===void 0?void 0:i.header)===undefined)return;var e=state.localizedConfig.header;return h(Host,null,h(SvgSprite,null),h("nav",{id:"post-internet-header-main-navigation",class:{"main-navigation":true,open:this.mobileMenuOpen},role:"menu",ref:function(i){return t.flyoutElement=i}},h("h1",{class:"visually-hidden"},e.translations.navMainAriaLabel),h("ul",{class:"main-container container"},e.navMain.map((function(i){return h("li",{key:i.text,onMouseLeave:function(){return t.handleMouseLeave(i)},onMouseEnter:function(){return t.handleMouseEnter(i)}},h(LevelOneAction,{level:i,isOpen:t.isActiveFlyout(i.id),onTouchEnd:function(e){return t.handleTouchEnd(e,i)},onKeyDown:function(e){return t.handleKeyPress(e,i)},onClick:function(e){return t.handleClick(e,i)}}),!i.noFlyout?h("div",{id:i.id,class:{flyout:true,open:t.isActiveFlyout(i.id)}},h("div",{class:"wide-container"},h("div",{class:"flyout-nav"},h("button",{class:"nav-link flyout-back-button",onClick:function(){return t.closeFlyout(i.id)}},h(SvgIcon,{name:"pi-pointy-arrow-right",classNames:"mirrored"}),h("span",null,e.translations.backButtonText)),h("button",{class:"flyout-close-button",onClick:function(){return t.closeFlyout(i.id)}},h("span",{class:"visually-hidden"},i.text,", ",e.translations.mobileNavToggleClose),h(SvgIcon,{name:"pi-close"}))),h("h2",{class:"flyout-title container"},h("a",{href:i.url,class:"nav-link"},i.text)),h("div",{class:"flyout-row container"},i.flyout.map((function(t,e){return h("div",{key:t.title,class:"flyout-column"},t.title?h("h3",{id:"".concat(i.id,"-column-").concat(e)},t.title):null,h("ul",{class:"flyout-linklist","aria-labelledby":t.title?"".concat(i.id,"-column-").concat(e):undefined},t.linkList.map((function(t){return h("li",{key:t.url},h("a",{class:{"flyout-link":true,active:!!(t===null||t===void 0?void 0:t.isActiveOverride)},href:t.url,target:t.target},t.title))}))))}))))):null)}))),h("slot",null)))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();PostMainNavigation.style=postMainNavigationCss;export{PostMainNavigation as post_main_navigation};
+var __awaiter=this&&this.__awaiter||function(t,i,e,n){function o(t){return t instanceof e?t:new e((function(i){i(t)}))}return new(e||(e=Promise))((function(e,a){function r(t){try{l(n.next(t))}catch(t){a(t)}}function s(t){try{l(n["throw"](t))}catch(t){a(t)}}function l(t){t.done?e(t.value):o(t.value).then(r,s)}l((n=n.apply(t,i||[])).next())}))};var __generator=this&&this.__generator||function(t,i){var e={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},n,o,a,r;return r={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function s(t){return function(i){return l([t,i])}}function l(s){if(n)throw new TypeError("Generator is already executing.");while(r&&(r=0,s[0]&&(e=0)),e)try{if(n=1,o&&(a=s[0]&2?o["return"]:s[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,s[1])).done)return a;if(o=0,a)s=[s[0]&2,a.value];switch(s[0]){case 0:case 1:a=s;break;case 4:e.label++;return{value:s[1],done:false};case 5:e.label++;o=s[1];s=[0];continue;case 7:s=e.ops.pop();e.trys.pop();continue;default:if(!(a=e.trys,a=a.length>0&&a[a.length-1])&&(s[0]===6||s[0]===2)){e=0;continue}if(s[0]===3&&(!a||s[1]>a[0]&&s[1]<a[3])){e.label=s[1];break}if(s[0]===6&&e.label<a[1]){e.label=a[1];a=s;break}if(a&&e.label<a[2]){e.label=a[2];e.ops.push(s);break}if(a[2])e.ops.pop();e.trys.pop();continue}s=i.call(t,e)}catch(t){s=[6,t];o=0}finally{n=a=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{h,r as registerInstance,c as createEvent,H as Host,g as getElement}from"./index-2aa4bc9f.js";import{t as throttle}from"./index-d2256e06.js";import{s as state}from"./store-d5165a8f.js";import{u as userPrefersReducedMotion}from"./ui.service-2fbc9c45.js";import{t as translate}from"./language.service-c0f81273.js";import{S as SvgSprite}from"./svg-sprite.component-1f13a769.js";import{S as SvgIcon}from"./svg-icon.component-02f233c7.js";var LevelOneAction=function(t){var i,e,n;var o=t.level.url?"a":"button";return h(o,{class:{"main-link":true,active:!!t.level.isActiveOverride,focus:t.isOpen},href:t.level.url,title:((i=t.level.title)===null||i===void 0?void 0:i.trim())&&((e=t.level.title)===null||e===void 0?void 0:e.trim())!==((n=t.level.text)===null||n===void 0?void 0:n.trim())?t.level.title:undefined,tabindex:t.level.url?undefined:0,"aria-haspopup":!t.level.noFlyout+"","aria-expanded":t.level.noFlyout?null:t.isOpen+"",onTouchEnd:function(i){return t.onTouchEnd(i)},onKeyDown:function(i){return t.onKeyDown(i)},onClick:function(i){return t.onClick(i)}},h("span",null,t.level.text),t.level.isActiveOverride?h("span",{class:"visually-hidden"},translate("Active navigation element")):null,h("svg",{"aria-hidden":"true"},h("use",{href:"#pi-pointy-arrow-right"})))};var postMainNavigationCss='.flyout-nav,.flyout-column h3{font-size:0.9375rem}@media (min-width: 600px){.flyout-nav,.flyout-column h3{font-size:1rem}}@media (min-width: 1024px){.flyout-nav,.flyout-column h3{font-size:1.0625rem}}.flyout-title{font-size:1.0625rem}@media (min-width: 600px){.flyout-title{font-size:1.25rem}}@media (min-width: 1024px){.flyout-title{font-size:1.5rem}}@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")}.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,.main-link,.flyout-close-button,.flyout-link{outline:none;outline-offset:2px;text-decoration:none;color:rgba(0, 0, 0, 0.8);-webkit-transition:color 200ms;transition:color 200ms;background-color:transparent;-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:is(:focus-visible,:focus-within,.pretend-focus),.main-link:is(:focus-visible,:focus-within,.pretend-focus),.flyout-close-button:is(:focus-visible,:focus-within,.pretend-focus),.flyout-link:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color)}.nav-link:hover,.main-link:hover,.flyout-close-button:hover,.flyout-link:hover,.nav-link:focus,.main-link:focus,.flyout-close-button:focus,.flyout-link:focus{color:black}.nav-link:focus-visible,.main-link:focus-visible,.flyout-close-button:focus-visible,.flyout-link:focus-visible{z-index:1;position:relative}.nav-link>svg,.main-link>svg,.flyout-close-button>svg,.flyout-link>svg{width:1.4em;height:1.4em;-ms-flex-negative:0;flex-shrink:0}.nav-link>span,.main-link>span,.flyout-close-button>span,.flyout-link>span{-ms-flex-negative:1;flex-shrink:1}.no-list,.main-container,.flyout-linklist{list-style:none;padding-left:0;margin-top:0;margin-bottom:0}*,:host,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{font-family:"Frutiger Neue For Post", system-ui, sans-serif}button{font:inherit;padding:0}a,button{border-radius:3px;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:3px;position:relative;z-index:1}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{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.bold{font-weight:700}.light{font-weight:300}.d-flex{display:-ms-flexbox;display:flex}.d-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.align-items-center{-ms-flex-align:center;align-items:center}@media (min-width: 1441px){.wide-container{margin:0 auto;max-width:1440px}}@media (max-width: 599.98px){.container{padding-right:16px;padding-left:16px}}@media (min-width: 600px) and (max-width: 1023.98px){.container{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.container{padding-right:40px;padding-left:40px}}@media (max-width: -0.02px){.hidden-xs{display:none}}@media (max-width: 399.98px){.hidden-sm{display:none}}@media (max-width: 599.98px){.hidden-rg{display:none}}@media (max-width: 779.98px){.hidden-md{display:none}}@media (max-width: 1023.98px){.hidden-lg{display:none}}@media (max-width: 1279.98px){.hidden-xl{display:none}}@media (max-width: 1440.98px){.hidden-xxl{display:none}}:host{--host-window-height:var(--window-height, 100vh);--calculated-header-height:calc(var(--header-height) + 1px);display:block;min-width:0;height:var(--header-height)}:host(.no-animation) *{-webkit-animation:none !important;animation:none !important;-webkit-transition:none !important;transition:none !important}@media (min-width: 1024px){.main-navigation,.main-container,.main-container li,.main-link{height:100%}}.main-navigation{font-size:1.125rem}@media (min-width: 1024px){.main-navigation{font-size:1rem;margin:0 0.75rem}}@media (min-width: 1280px){.main-navigation{font-size:1.125rem}}@media (min-width: 1441px){.main-navigation{font-size:1.25rem}}@media (max-width: 1023.98px){.main-navigation{position:absolute;top:var(--calculated-header-height);left:0;background:white;height:calc(var(--host-window-height) - var(--calculated-header-height));width:100%;margin:0;overflow:hidden scroll;-webkit-overflow-scrolling:touch;-ms-scroll-chaining:none;overscroll-behavior:contain;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;z-index:-1;visibility:hidden;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:visibility 0.35s, -webkit-transform 0.35s;transition:visibility 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, visibility 0.35s;transition:transform 0.35s, visibility 0.35s, -webkit-transform 0.35s}}@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce){.main-navigation{-webkit-transition:none;transition:none}}@media (max-width: 1023.98px){.main-navigation.open{-webkit-transform:translateY(0);transform:translateY(0);visibility:visible}}.main-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}@media (max-width: 1023.98px){.main-container{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start;padding-top:2.5rem;padding-bottom:2.5rem}.main-container>li+li{border-top:1px solid hsl(0, 0%, 90%)}}@media (min-width: 1024px){.main-container{padding-right:0;padding-left:0}}.main-container>li{-ms-flex:0 1 auto;flex:0 1 auto;min-width:0}.main-link{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-right:0.75rem;padding-left:0.75rem;text-align:left;cursor:pointer;width:100%}@media (min-width: 1024px){.main-link svg{display:none}}@media (max-width: 1023.98px){.main-link{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;font-weight:300;padding:0.625rem 0;width:100%;text-align:left}.main-link svg{width:1.5rem;height:1.5rem}}.main-link span{overflow:hidden;text-overflow:ellipsis}.main-link,.flyout-link{position:relative;color:black}.main-link::after,.flyout-link::after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:4px;background-color:transparent;opacity:0;-webkit-transform:scaleX(0.8);transform:scaleX(0.8);-webkit-transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)}@media (prefers-reduced-motion: reduce){.main-link::after,.flyout-link::after{-webkit-transition:none;transition:none}}.main-link:hover::after,.main-link.focus::after,.flyout-link:hover::after,.flyout-link.focus::after{background-color:hsl(0, 0%, 80%);opacity:1;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)}.main-link.active,.flyout-link.active{font-weight:700}.main-link.active::after,.flyout-link.active::after{background-color:#fc0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.flyout{left:0;width:100%;background:white;padding-bottom:3rem;overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;visibility:hidden}@media (min-width: 1024px){.flyout{position:absolute;top:100%;max-height:calc(100vh - var(--header-height) - var(--meta-header-height) - 1px);z-index:-1;-webkit-box-shadow:0 0 1px 0 rgba(0, 0, 0, 0.4);box-shadow:0 0 1px 0 rgba(0, 0, 0, 0.4);-webkit-transform:translateY(-100%);transform:translateY(-100%)}.flyout.open{-webkit-box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.4);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.4);-webkit-transform:translateY(0);transform:translateY(0)}}@media (max-width: 1023.98px){.flyout{position:fixed;top:0;height:100%;z-index:1;-webkit-transform:translateX(100%);transform:translateX(100%)}.flyout.open{-webkit-transform:translateX(0);transform:translateX(0)}}.flyout.open{visibility:visible}.flyout.animate{-webkit-transition:visibility 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s;transition:visibility 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s;transition:transform 0.35s, visibility 0.35s, box-shadow 0.35s;transition:transform 0.35s, visibility 0.35s, box-shadow 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s}@media (prefers-reduced-motion: reduce){.flyout.animate{-webkit-transition:none;transition:none}}.flyout-nav{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;min-height:3.5rem;-webkit-box-sizing:content-box;box-sizing:content-box}.flyout-row{display:-ms-flexbox;display:flex;gap:1.5rem}@media (max-width: 1023.98px){.flyout-row{display:grid;grid-template-columns:1fr 1fr}}@media (max-width: 599.98px){.flyout-row{grid-template-columns:1fr}}.flyout-column{-ms-flex:1;flex:1;max-width:25%}@media (max-width: 1023.98px){.flyout-column{max-width:none}}.flyout-column h3{margin-top:0}.flyout-back-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:1rem;font-weight:400;cursor:pointer}@media (max-width: 599.98px){.flyout-back-button{padding-right:16px;padding-left:16px}}@media (min-width: 600px) and (max-width: 1023.98px){.flyout-back-button{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.flyout-back-button{padding-right:40px;padding-left:40px}}.flyout-back-button svg{width:1.5rem;height:1.5rem}@media (min-width: 1024px){.flyout-back-button{display:none}}.flyout-close-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-left:auto;padding:0 1.5rem;cursor:pointer}.flyout-close-button svg{width:1.5rem;height:1.5rem}@media (max-width: 1023.98px){.flyout-close-button{display:none}}.flyout-linklist li{border-top:1px solid hsl(0, 0%, 90%)}.flyout-linklist:first-child>li{border-top-color:transparent}.flyout-link{display:block;padding:0.75rem 0}.flyout-title{margin:2.5rem 0 1.5rem 0}@media (min-width: 1024px){.flyout-title{display:none}}';var PostMainNavigation=function(){function t(t){registerInstance(this,t);this.dropdownToggled=createEvent(this,"dropdownToggled",7);this.flyoutToggled=createEvent(this,"flyoutToggled",7);this.resizeTimer=null;this.mouseLeaveTimer=null;this.mouseEnterTimer=null;this.activeFlyout=undefined;this.mobileMenuOpen=undefined}t.prototype.connectedCallback=function(){var t=this;this.throttledResize=throttle(300,(function(){return t.handleResize()}));window.addEventListener("resize",this.throttledResize,{passive:true});this.setWindowHeight()};t.prototype.disconnectedCallback=function(){window.removeEventListener("resize",this.throttledResize);if(this.mouseEnterTimer!==null)window.clearTimeout(this.mouseEnterTimer);if(this.mouseLeaveTimer!==null)window.clearTimeout(this.mouseLeaveTimer)};t.prototype.handleResize=function(){var t=this;this.host.classList.add("no-animation");if(this.resizeTimer!==null)window.clearTimeout(this.resizeTimer);this.resizeTimer=window.setTimeout((function(){t.host.classList.remove("no-animation")}),300);this.setWindowHeight()};t.prototype.setWindowHeight=function(){var t=this;if(!this.host){return}this.host.style.setProperty("--window-height","".concat(window.innerHeight,"px"));window.setTimeout((function(){t.host.style.setProperty("--window-height","".concat(window.innerHeight,"px"))}),100)};t.prototype.openFlyout=function(t){var i;var e=(i=this.host.shadowRoot)===null||i===void 0?void 0:i.getElementById(t);if(e&&this.activeFlyout!==""){this.addFlyoutAnimation(e,"expand")}this.activeFlyout=t;this.flyoutToggled.emit(t);this.setWindowHeight();if(this.mouseLeaveTimer!==null){window.clearTimeout(this.mouseLeaveTimer);this.mouseLeaveTimer=null}};t.prototype.closeFlyout=function(t,i){if(i===void 0){i=true}var e;if(t===undefined)return;var n=(e=this.host.shadowRoot)===null||e===void 0?void 0:e.getElementById(t);if(n){this.addFlyoutAnimation(n,"collapse",i)}this.activeFlyout=null;this.flyoutToggled.emit()};t.prototype.addFlyoutAnimation=function(t,i,e){if(e===void 0){e=true}if(!userPrefersReducedMotion()){t.classList.add("animate");t.addEventListener("transitionend",(function(){var n,o,a;if(e){if(i==="expand"){(n=t.querySelector("button.flyout-back-button"))===null||n===void 0?void 0:n.focus()}else if(i==="collapse"){(a=(o=t.parentElement)===null||o===void 0?void 0:o.querySelector("a.main-link"))===null||a===void 0?void 0:a.focus()}}t.classList.remove("animate")}),{once:true})}};t.prototype.isActiveFlyout=function(t){return t===this.activeFlyout};t.prototype.handleMouseEnter=function(t){var i=this;if(this.mouseEnterTimer!==null){window.clearTimeout(this.mouseEnterTimer);this.mouseEnterTimer=null}if(this.mouseLeaveTimer&&this.activeFlyout===t.id){window.clearTimeout(this.mouseLeaveTimer);this.mouseLeaveTimer=null}if(window.innerWidth>=1024&&t.flyout.length>0&&this.activeFlyout!==t.id){this.mouseEnterTimer=window.setTimeout((function(){i.mouseEnterTimer=null;if(t.id!==undefined)i.openFlyout(t.id)}),200)}};t.prototype.handleMouseLeave=function(t){var i=this;if(this.mouseEnterTimer!==null){window.clearTimeout(this.mouseEnterTimer)}if(this.activeFlyout&&this.activeFlyout!==t.id){return}if(window.innerWidth>=1024&&t.flyout.length>0){this.mouseLeaveTimer=window.setTimeout((function(){i.closeFlyout(t.id,false)}),300)}};t.prototype.handleTouchEnd=function(t,i){if(!this.isActiveFlyout(i.id)&&!i.noFlyout){if(t.cancelable)t.preventDefault();if(i.id)this.openFlyout(i.id)}};t.prototype.handleKeyPress=function(t,i){if(t.key==="Enter"&&!this.isActiveFlyout(i.id)&&!i.noFlyout){t.preventDefault();if(i.id)this.openFlyout(i.id)}};t.prototype.handleClick=function(t,i){if(!this.isActiveFlyout(i.id)&&!i.noFlyout){t.preventDefault();if(i.id)this.openFlyout(i.id)}};t.prototype.toggleDropdown=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(i){this.mobileMenuOpen=t===undefined?!this.mobileMenuOpen:t;this.dropdownToggled.emit({open:this.mobileMenuOpen,element:this.host});if(t===false){this.closeFlyout()}this.setWindowHeight();return[2,this.mobileMenuOpen]}))}))};t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){var t,i;return __generator(this,(function(e){i=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelector(".main-link");if(i){i.focus()}return[2]}))}))};t.prototype.setActiveFlyout=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(i){this.activeFlyout=t;this.flyoutToggled.emit(this.activeFlyout);return[2]}))}))};t.prototype.render=function(){var t=this;var i;if(((i=state.localizedConfig)===null||i===void 0?void 0:i.header)===undefined)return;var e=state.localizedConfig.header;return h(Host,null,h(SvgSprite,null),h("nav",{"aria-label":e.translations.navMainAriaLabel,id:"post-internet-header-main-navigation",class:{"main-navigation":true,open:this.mobileMenuOpen},role:"menu"},h("ul",{class:"main-container container"},e.navMain.map((function(i){return h("li",{key:i.text,onMouseLeave:function(){return t.handleMouseLeave(i)},onMouseEnter:function(){return t.handleMouseEnter(i)}},h(LevelOneAction,{level:i,isOpen:t.isActiveFlyout(i.id),onTouchEnd:function(e){return t.handleTouchEnd(e,i)},onKeyDown:function(e){return t.handleKeyPress(e,i)},onClick:function(e){return t.handleClick(e,i)}}),!i.noFlyout?n.bind(t)(i):null)}))),h("slot",null)));function n(t){var i=this;return h("div",{id:t.id,class:{flyout:true,open:this.isActiveFlyout(t.id)}},h("div",{class:"wide-container"},h("div",{class:"flyout-nav"},h("button",{class:"nav-link flyout-back-button",onClick:function(){return i.closeFlyout(t.id)}},h(SvgIcon,{name:"pi-pointy-arrow-right",classNames:"mirrored"}),h("span",null,e.translations.backButtonText)),h("button",{class:"flyout-close-button",onClick:function(){return i.closeFlyout(t.id)}},h("span",{class:"visually-hidden"},t.text,", ",e.translations.mobileNavToggleClose),h(SvgIcon,{name:"pi-close"}))),h("h2",{class:"flyout-title container"},h("a",{href:t.url,class:"nav-link"},t.text)),h("div",{class:"flyout-row container"},t.flyout.map((function(i,e){return h("div",{key:i.title,class:"flyout-column"},i.title?h("h3",{id:"".concat(t.id,"-column-").concat(e)},i.title):null,h("ul",{class:"flyout-linklist","aria-labelledby":i.title?"".concat(t.id,"-column-").concat(e):undefined},i.linkList.map((function(t){return h("li",{key:t.url},h("a",{class:{"flyout-link":true,active:!!(t===null||t===void 0?void 0:t.isActiveOverride)},href:t.url,target:t.target},t.title,(t===null||t===void 0?void 0:t.isActiveOverride)?h("span",{class:"visually-hidden"},", ",translate("Active navigation element")):null))}))))})))))}};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();PostMainNavigation.style=postMainNavigationCss;export{PostMainNavigation as post_main_navigation};
 //# sourceMappingURL=post-main-navigation.entry.js.map

package/dist/esm-es5/post-main-navigation.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["LevelOneAction","props","TagName","level","url","h","class","active","isActiveOverride","focus","isOpen","href","title","_a","trim","_b","_c","text","undefined","tabindex","noFlyout","onTouchEnd","e","onKeyDown","onClick","postMainNavigationCss","PostMainNavigation","this","resizeTimer","mouseLeaveTimer","mouseEnterTimer","class_1","prototype","connectedCallback","_this","throttledResize","throttle","handleResize","window","addEventListener","passive","setWindowHeight","disconnectedCallback","removeEventListener","clearAllBodyScrollLocks","clearTimeout","host","classList","add","setTimeout","remove","style","setProperty","concat","innerHeight","openFlyout","id","flyout","shadowRoot","getElementById","activeFlyout","addFlyoutAnimation","flyoutToggled","emit","closeFlyout","userPrefersReducedMotion","removeFlyoutAnimation","once","isActiveFlyout","handleMouseEnter","innerWidth","length","handleMouseLeave","handleTouchEnd","event","cancelable","preventDefault","handleKeyPress","key","handleClick","setBodyScroll","mobileMenuOpen","disableBodyScroll","flyoutElement","enableBodyScroll","toggleDropdown","force","dropdownToggled","open","element","setFocus","firstLink","querySelector","setActiveFlyout","render","state","localizedConfig","header","headerConfig","Host","SvgSprite","role","ref","el","translations","navMainAriaLabel","navMain","map","levelOne","onMouseLeave","onMouseEnter","SvgIcon","name","classNames","backButtonText","mobileNavToggleClose","i","linkList","link","target"],"sources":["src/components/post-main-navigation/components/level-one-action.component.tsx","src/components/post-main-navigation/post-main-navigation.scss?tag=post-main-navigation&encapsulation=shadow","src/components/post-main-navigation/post-main-navigation.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { NavMainEntity } from '../../../models/header.model';\n\nexport const LevelOneAction = (props: {\n  level: NavMainEntity;\n  isOpen: boolean;\n  onTouchEnd: (e: any) => void;\n  onKeyDown: (e: any) => void;\n  onClick: (e: any) => void;\n}) => {\n  const TagName = props.level.url ? 'a' : 'button';\n\n  return (\n    <TagName\n      class={{\n        'main-link': true,\n        'active': !!props.level.isActiveOverride,\n        'focus': props.isOpen,\n      }}\n      href={props.level.url}\n      title={\n        props.level.title?.trim() && props.level.title?.trim() !== props.level.text?.trim()\n          ? props.level.title\n          : undefined\n      }\n      tabindex={props.level.url ? undefined : 0}\n      aria-haspopup={!props.level.noFlyout + ''}\n      aria-expanded={props.level.noFlyout ? null : props.isOpen + ''}\n      onTouchEnd={e => props.onTouchEnd(e)}\n      onKeyDown={e => props.onKeyDown(e)}\n      onClick={e => props.onClick(e)}\n    >\n      <span>{props.level.text}</span>\n      <svg aria-hidden=\"true\">\n        <use href=\"#pi-pointy-arrow-right\" />\n      </svg>\n    </TagName>\n  );\n};\n","@use '@swisspost/design-system-styles/variables/color';\n@use '@swisspost/design-system-styles/placeholders/text';\n@use '@swisspost/design-system-styles/functions';\n@use '../../utils/utils.scss';\n@use '../../utils/mixins.scss';\n\n:host {\n  --host-window-height: var(--window-height, 100vh);\n  --calculated-header-height: calc(var(--header-height) + 1px);\n\n  display: block;\n  min-width: 0;\n  height: var(--header-height);\n}\n\n:host(.no-animation) {\n  * {\n    animation: none !important;\n    transition: none !important;\n  }\n}\n\n.main-navigation,\n.main-container,\n.main-container li,\n.main-link {\n  @include mixins.min(lg) {\n    height: 100%;\n  }\n}\n\n.main-navigation {\n  font-size: functions.px-to-rem(18px);\n\n  @include mixins.min(lg) {\n    font-size: functions.px-to-rem(16px);\n    margin: 0 0.75rem;\n  }\n\n  @include mixins.min(xl) {\n    font-size: functions.px-to-rem(18px);\n  }\n\n  @include mixins.min(xxl) {\n    font-size: functions.px-to-rem(20px);\n  }\n\n  @include mixins.max(lg) {\n    position: absolute;\n    top: var(--calculated-header-height);\n    left: 0;\n    background: white;\n    height: calc(var(--host-window-height) - var(--calculated-header-height));\n    width: 100%;\n    margin: 0;\n    overflow: hidden scroll;\n    -webkit-overflow-scrolling: touch;\n    overscroll-behavior: contain;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    z-index: -1;\n    visibility: hidden;\n    transform: translateY(-100%);\n    transition: transform 0.35s, visibility 0.35s;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n\n    &.open {\n      transform: translateY(0);\n      visibility: visible;\n    }\n  }\n}\n\n.main-container {\n  @extend %no-list;\n\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  @include mixins.max(lg) {\n    flex-direction: column;\n    align-items: stretch;\n    justify-content: flex-start;\n    padding-top: 2.5rem;\n    padding-bottom: 2.5rem;\n\n    > li + li {\n      border-top: 1px solid color.$gray-10;\n    }\n  }\n\n  @include mixins.min(lg) {\n    padding-right: 0;\n    padding-left: 0;\n  }\n\n  > li {\n    flex: 0 1 auto;\n    min-width: 0;\n  }\n}\n\n.main-link {\n  @extend %nav-link;\n\n  display: flex;\n  align-items: center;\n  padding-right: 0.75rem;\n  padding-left: 0.75rem;\n  text-align: left;\n  cursor: pointer;\n  width: 100%;\n\n  @include mixins.min(lg) {\n    svg {\n      display: none;\n    }\n  }\n\n  @include mixins.max(lg) {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    font-weight: 300;\n    padding: 0.625rem 0;\n    width: 100%;\n    text-align: left;\n\n    svg {\n      width: 1.5rem;\n      height: 1.5rem;\n    }\n  }\n\n  span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n}\n\n.main-link,\n.flyout-link {\n  position: relative;\n  color: black;\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background-color: transparent;\n    opacity: 0;\n    transform: scaleX(0.8);\n    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &:hover,\n  &.focus {\n    &::after {\n      background-color: color.$gray-20;\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  &.active {\n    font-weight: 700;\n\n    &::after {\n      background-color: color.$yellow;\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n}\n\n.flyout {\n  left: 0;\n  width: 100%;\n  background: white;\n  padding-bottom: 3rem;\n  overflow: auto;\n  overscroll-behavior: contain;\n  visibility: hidden;\n\n  @include mixins.min(lg) {\n    position: absolute;\n    top: 100%;\n    max-height: calc(100vh - var(--header-height) - var(--meta-header-height) - 1px);\n    z-index: -1;\n    box-shadow: 0 0 1px 0 rgb(0 0 0 / 40%);\n    transform: translateY(-100%);\n\n    &.open {\n      box-shadow: 0 0 8px 0 rgb(0 0 0 / 40%);\n      transform: translateY(0);\n    }\n  }\n\n  @include mixins.max(lg) {\n    position: fixed;\n    top: 0;\n    height: 100%;\n    z-index: 1;\n    transform: translateX(100%);\n\n    &.open {\n      transform: translateX(0);\n    }\n  }\n\n  &.open {\n    visibility: visible;\n  }\n\n  &.animate {\n    transition: transform 0.35s, visibility 0.35s, box-shadow 0.35s;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n}\n\n.flyout-nav {\n  @extend %font-curve-small;\n\n  display: flex;\n  justify-content: space-between;\n  min-height: 3.5rem;\n\n  // Change box-sizing to content-box to add 1px border width to flyout-nav hight.\n  // This ensures flyout-nav has same hight as main-navigation-container.\n  box-sizing: content-box;\n}\n\n.flyout-row {\n  display: flex;\n  gap: 1.5rem;\n\n  @include mixins.max(lg) {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @include mixins.max(rg) {\n    grid-template-columns: 1fr;\n  }\n}\n\n.flyout-column {\n  flex: 1;\n  max-width: 25%;\n\n  @include mixins.max(lg) {\n    max-width: none;\n  }\n\n  h3 {\n    @extend %font-curve-small;\n    margin-top: 0;\n  }\n}\n\n.flyout-back-button {\n  @include mixins.container-padding();\n\n  display: flex;\n  align-items: center;\n  font-size: functions.px-to-rem(16px);\n  font-weight: 400;\n  cursor: pointer;\n\n  svg {\n    width: 1.5rem;\n    height: 1.5rem;\n  }\n\n  @include mixins.min(lg) {\n    display: none;\n  }\n}\n\n.flyout-close-button {\n  @extend %nav-link;\n\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n  padding: 0 1.5rem;\n  cursor: pointer;\n\n  svg {\n    width: 1.5rem;\n    height: 1.5rem;\n  }\n\n  @include mixins.max(lg) {\n    display: none;\n  }\n}\n\n.flyout-linklist {\n  @extend %no-list;\n\n  li {\n    border-top: 1px solid color.$gray-10;\n  }\n\n  &:first-child > li {\n    border-top-color: transparent;\n  }\n}\n\n.flyout-link {\n  @extend %nav-link;\n\n  display: block;\n  padding: 0.75rem 0;\n}\n\n.flyout-title {\n  @extend %font-curve-bigger-regular;\n\n  margin: 2.5rem 0 1.5rem 0;\n\n  @include mixins.min(lg) {\n    display: none;\n  }\n}\n","import { Component, Host, h, State, Method, Event, Element, EventEmitter } from '@stencil/core';\nimport { throttle } from 'throttle-debounce';\nimport { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';\nimport { state } from '../../data/store';\nimport {\n  DropdownElement,\n  DropdownEvent,\n  HasDropdown,\n  IsFocusable,\n  NavMainEntity,\n} from '../../models/header.model';\nimport { userPrefersReducedMotion } from '../../services/ui.service';\nimport { SvgSprite } from '../../utils/svg-sprite.component';\nimport { SvgIcon } from '../../utils/svg-icon.component';\nimport { LevelOneAction } from './components/level-one-action.component';\n\n@Component({\n  tag: 'post-main-navigation',\n  styleUrl: 'post-main-navigation.scss',\n  shadow: true,\n})\nexport class PostMainNavigation implements HasDropdown, IsFocusable {\n  @State() activeFlyout: string | null;\n  @State() mobileMenuOpen: boolean;\n  @Event() dropdownToggled: EventEmitter<DropdownEvent>;\n  @Event() flyoutToggled: EventEmitter<string | null>;\n  @Element() host: DropdownElement;\n  private throttledResize: throttle<() => void>;\n  private resizeTimer: number | null = null;\n  private mouseLeaveTimer: number | null = null;\n  private mouseEnterTimer: number | null = null;\n  private flyoutElement: HTMLElement | undefined;\n\n  connectedCallback() {\n    this.throttledResize = throttle(300, () => this.handleResize());\n    window.addEventListener('resize', this.throttledResize, { passive: true });\n    this.setWindowHeight();\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.throttledResize);\n    clearAllBodyScrollLocks();\n    if (this.mouseEnterTimer !== null) window.clearTimeout(this.mouseEnterTimer);\n    if (this.mouseLeaveTimer !== null) window.clearTimeout(this.mouseLeaveTimer);\n  }\n\n  handleResize() {\n    // Suspend all animations and transitions on window resize\n    this.host.classList.add('no-animation');\n    if (this.resizeTimer !== null) window.clearTimeout(this.resizeTimer);\n    this.resizeTimer = window.setTimeout(() => {\n      this.host.classList.remove('no-animation');\n    }, 300);\n\n    this.setWindowHeight();\n  }\n\n  // Update window height var\n  setWindowHeight() {\n    if (!this.host) {\n      return;\n    }\n    this.host.style.setProperty('--window-height', `${window.innerHeight}px`);\n\n    // Safari might or might not show a blank bar at the bottom where the browser\n    // controls should be. This timeout waits for this bar to appear before resetting the available height\n    window.setTimeout(() => {\n      this.host.style.setProperty('--window-height', `${window.innerHeight}px`);\n    }, 100);\n  }\n\n  openFlyout(id: string) {\n    const flyout = this.host.shadowRoot?.getElementById(id);\n\n    if (flyout && this.activeFlyout !== '') {\n      // Add flyout animation if there's no flyout open\n      this.addFlyoutAnimation(flyout);\n    }\n\n    this.activeFlyout = id;\n    this.flyoutToggled.emit(id);\n    this.setWindowHeight();\n\n    if (this.mouseLeaveTimer !== null) {\n      window.clearTimeout(this.mouseLeaveTimer);\n      this.mouseLeaveTimer = null;\n    }\n  }\n\n  closeFlyout(id?: string) {\n    if (id === undefined) return;\n    const flyout = this.host.shadowRoot?.getElementById(id);\n\n    if (flyout) {\n      // Add flyout animation for close action\n      this.addFlyoutAnimation(flyout);\n    }\n\n    this.activeFlyout = null;\n    this.flyoutToggled.emit();\n  }\n\n  addFlyoutAnimation(flyout: HTMLElement) {\n    // Check if user prefers to see animations or not\n    if (!userPrefersReducedMotion()) {\n      flyout.classList.add('animate');\n\n      // Remove flyout animation after transition ended\n      flyout.addEventListener('transitionend', () => this.removeFlyoutAnimation(flyout), {\n        once: true,\n      });\n    }\n  }\n\n  removeFlyoutAnimation(flyout: HTMLElement) {\n    flyout.classList.remove('animate');\n  }\n\n  isActiveFlyout(id?: string) {\n    return id === this.activeFlyout;\n  }\n\n  handleMouseEnter(level: NavMainEntity) {\n    // Cancel opening the flyout if there already is one scheduled to open\n    if (this.mouseEnterTimer !== null) {\n      window.clearTimeout(this.mouseEnterTimer);\n      this.mouseEnterTimer = null;\n    }\n\n    // Cancel closing if we enter again\n    if (this.mouseLeaveTimer && this.activeFlyout === level.id) {\n      window.clearTimeout(this.mouseLeaveTimer);\n      this.mouseLeaveTimer = null;\n    }\n\n    if (window.innerWidth >= 1024 && level.flyout.length > 0 && this.activeFlyout !== level.id) {\n      // Delay opening the flyout for a moment to give users a chance to move the mouse over the navigation without triggering the flyout\n      this.mouseEnterTimer = window.setTimeout(() => {\n        this.mouseEnterTimer = null;\n        if (level.id !== undefined) this.openFlyout(level.id);\n      }, 200);\n    }\n  }\n\n  handleMouseLeave(level: NavMainEntity) {\n    // Cancel opening the flyout if a mouseleave event happens before the flyout opened\n    if (this.mouseEnterTimer !== null) {\n      window.clearTimeout(this.mouseEnterTimer);\n    }\n\n    // Don't close an open flyout if the mouseleave is from another mainnav entry\n    if (this.activeFlyout && this.activeFlyout !== level.id) {\n      return;\n    }\n\n    if (window.innerWidth >= 1024 && level.flyout.length > 0) {\n      // Allow the pointer to shortly leave the flyout without closing it. This\n      // allows for user mistakes and makes the experience less nervous\n      this.mouseLeaveTimer = window.setTimeout(() => {\n        this.closeFlyout(level.id);\n      }, 300);\n    }\n  }\n\n  handleTouchEnd(event: TouchEvent, level: NavMainEntity) {\n    if (!this.isActiveFlyout(level.id) && !level.noFlyout) {\n      // It's the first touchstart and has a flyout, prevent link activation and open the flyout\n      if (event.cancelable) event.preventDefault();\n      if (level.id) this.openFlyout(level.id);\n    }\n  }\n\n  handleKeyPress(event: KeyboardEvent, level: NavMainEntity) {\n    if (event.key === 'Enter' && !this.isActiveFlyout(level.id) && !level.noFlyout) {\n      // It's the first enter keypress and has a flyout, prevent link activation and open the flyout\n      event.preventDefault();\n      if (level.id) this.openFlyout(level.id);\n    }\n  }\n\n  handleClick(event: MouseEvent, level: NavMainEntity) {\n    if (!this.isActiveFlyout(level.id) && !level.noFlyout) {\n      // It's the first click, always open the flyout, never the link\n      // This is relevant for desktop with active screenreader which\n      // translates an enter keypress to a click\n      event.preventDefault();\n      if (level.id) this.openFlyout(level.id);\n    }\n  }\n\n  /**\n   * Disable or re-enable body scrolling, depending on whether mobile menu is open or closed\n   */\n  setBodyScroll() {\n    if (this.mobileMenuOpen) {\n      disableBodyScroll(this.flyoutElement);\n    } else {\n      enableBodyScroll(this.flyoutElement);\n    }\n  }\n\n  /**\n   * Toggle the main navigation (only visible on mobile)\n   * @param force Force a state\n   * @returns Boolean indicating new state\n   */\n  @Method()\n  async toggleDropdown(force?: boolean) {\n    this.mobileMenuOpen = force === undefined ? !this.mobileMenuOpen : force;\n    this.dropdownToggled.emit({ open: this.mobileMenuOpen, element: this.host });\n\n    if (force === false) {\n      this.closeFlyout();\n    }\n\n    this.setBodyScroll();\n    this.setWindowHeight();\n\n    return this.mobileMenuOpen;\n  }\n\n  /**\n   * Focus the main navigation toggle button\n   */\n  @Method()\n  async setFocus() {\n    const firstLink = this.host.shadowRoot?.querySelector<HTMLElement>('.main-link');\n    if (firstLink) {\n      firstLink.focus();\n    }\n  }\n\n  /**\n   * Open a specific flyout\n   * @param id Flyout ID\n   */\n  @Method()\n  async setActiveFlyout(id: string | null) {\n    this.activeFlyout = id;\n    this.flyoutToggled.emit(this.activeFlyout);\n  }\n\n  render() {\n    if (state.localizedConfig?.header === undefined) return;\n    const headerConfig = state.localizedConfig.header;\n\n    return (\n      <Host>\n        <SvgSprite />\n        <nav\n          id=\"post-internet-header-main-navigation\"\n          class={{ 'main-navigation': true, 'open': this.mobileMenuOpen }}\n          role=\"menu\"\n          ref={el => (this.flyoutElement = el)}\n        >\n          <h1 class=\"visually-hidden\">{headerConfig.translations.navMainAriaLabel}</h1>\n          <ul class=\"main-container container\">\n            {headerConfig.navMain.map(levelOne => (\n              <li\n                key={levelOne.text}\n                onMouseLeave={() => this.handleMouseLeave(levelOne)}\n                onMouseEnter={() => this.handleMouseEnter(levelOne)}\n              >\n                <LevelOneAction\n                  level={levelOne}\n                  isOpen={this.isActiveFlyout(levelOne.id)}\n                  onTouchEnd={e => this.handleTouchEnd(e, levelOne)}\n                  onKeyDown={e => this.handleKeyPress(e, levelOne)}\n                  onClick={e => this.handleClick(e, levelOne)}\n                />\n                {!levelOne.noFlyout ? (\n                  <div\n                    id={levelOne.id}\n                    class={{ flyout: true, open: this.isActiveFlyout(levelOne.id) }}\n                  >\n                    <div class=\"wide-container\">\n                      <div class=\"flyout-nav\">\n                        <button\n                          class=\"nav-link flyout-back-button\"\n                          onClick={() => this.closeFlyout(levelOne.id)}\n                        >\n                          <SvgIcon name=\"pi-pointy-arrow-right\" classNames=\"mirrored\" />\n                          <span>{headerConfig.translations.backButtonText}</span>\n                        </button>\n                        <button\n                          class=\"flyout-close-button\"\n                          onClick={() => this.closeFlyout(levelOne.id)}\n                        >\n                          <span class=\"visually-hidden\">\n                            {levelOne.text}, {headerConfig.translations.mobileNavToggleClose}\n                          </span>\n                          <SvgIcon name=\"pi-close\" />\n                        </button>\n                      </div>\n                      <h2 class=\"flyout-title container\">\n                        <a href={levelOne.url} class=\"nav-link\">\n                          {levelOne.text}\n                        </a>\n                      </h2>\n                      <div class=\"flyout-row container\">\n                        {levelOne.flyout.map((flyout, i) => (\n                          <div key={flyout.title} class=\"flyout-column\">\n                            {flyout.title ? <h3 id={`${levelOne.id}-column-${i}`}>{flyout.title}</h3> : null}\n                            <ul\n                              class=\"flyout-linklist\"\n                              aria-labelledby={flyout.title ? `${levelOne.id}-column-${i}` : undefined}\n                            >\n                              {flyout.linkList.map(link => (\n                                <li key={link.url}>\n                                  <a\n                                    class={{\n                                      'flyout-link': true,\n                                      'active': !!link?.isActiveOverride,\n                                    }}\n                                    href={link.url}\n                                    target={link.target}\n                                  >\n                                    {link.title}\n                                  </a>\n                                </li>\n                              ))}\n                            </ul>\n                          </div>\n                        ))}\n                      </div>\n                    </div>\n                  </div>\n                ) : null}\n              </li>\n            ))}\n          </ul>\n          <slot></slot>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["LevelOneAction","props","TagName","level","url","h","class","active","isActiveOverride","focus","isOpen","href","title","_a","trim","_b","_c","text","undefined","tabindex","noFlyout","onTouchEnd","e","onKeyDown","onClick","translate","postMainNavigationCss","PostMainNavigation","this","resizeTimer","mouseLeaveTimer","mouseEnterTimer","class_1","prototype","connectedCallback","_this","throttledResize","throttle","handleResize","window","addEventListener","passive","setWindowHeight","disconnectedCallback","removeEventListener","clearTimeout","host","classList","add","setTimeout","remove","style","setProperty","concat","innerHeight","openFlyout","id","flyout","shadowRoot","getElementById","activeFlyout","addFlyoutAnimation","flyoutToggled","emit","closeFlyout","manageFocus","direction","userPrefersReducedMotion","querySelector","parentElement","once","isActiveFlyout","handleMouseEnter","innerWidth","length","handleMouseLeave","handleTouchEnd","event","cancelable","preventDefault","handleKeyPress","key","handleClick","toggleDropdown","force","mobileMenuOpen","dropdownToggled","open","element","setFocus","firstLink","setActiveFlyout","render","state","localizedConfig","header","headerConfig","Host","SvgSprite","translations","navMainAriaLabel","role","navMain","map","levelOne","onMouseLeave","onMouseEnter","renderLevelOneFlyout","bind","SvgIcon","name","classNames","backButtonText","mobileNavToggleClose","i","linkList","link","target"],"sources":["src/components/post-main-navigation/components/level-one-action.component.tsx","src/components/post-main-navigation/post-main-navigation.scss?tag=post-main-navigation&encapsulation=shadow","src/components/post-main-navigation/post-main-navigation.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { NavMainEntity } from '../../../models/header.model';\nimport { translate } from '../../../services/language.service';\n\nexport const LevelOneAction = (props: {\n  level: NavMainEntity;\n  isOpen: boolean;\n  onTouchEnd: (e: any) => void;\n  onKeyDown: (e: any) => void;\n  onClick: (e: any) => void;\n}) => {\n  const TagName = props.level.url ? 'a' : 'button';\n\n  return (\n    <TagName\n      class={{\n        'main-link': true,\n        'active': !!props.level.isActiveOverride,\n        'focus': props.isOpen,\n      }}\n      href={props.level.url}\n      title={\n        props.level.title?.trim() && props.level.title?.trim() !== props.level.text?.trim()\n          ? props.level.title\n          : undefined\n      }\n      tabindex={props.level.url ? undefined : 0}\n      aria-haspopup={!props.level.noFlyout + ''}\n      aria-expanded={props.level.noFlyout ? null : props.isOpen + ''}\n      onTouchEnd={e => props.onTouchEnd(e)}\n      onKeyDown={e => props.onKeyDown(e)}\n      onClick={e => props.onClick(e)}\n    >\n      <span>{props.level.text}</span>\n      {props.level.isActiveOverride ? (\n        <span class=\"visually-hidden\">{translate('Active navigation element')}</span>\n      ) : null}\n      <svg aria-hidden=\"true\">\n        <use href=\"#pi-pointy-arrow-right\" />\n      </svg>\n    </TagName>\n  );\n};\n","@use '@swisspost/design-system-styles/variables/color';\n@use '@swisspost/design-system-styles/placeholders/text';\n@use '@swisspost/design-system-styles/functions';\n@use '../../utils/utils.scss';\n@use '../../utils/mixins.scss';\n\n:host {\n  --host-window-height: var(--window-height, 100vh);\n  --calculated-header-height: calc(var(--header-height) + 1px);\n\n  display: block;\n  min-width: 0;\n  height: var(--header-height);\n}\n\n:host(.no-animation) {\n  * {\n    animation: none !important;\n    transition: none !important;\n  }\n}\n\n.main-navigation,\n.main-container,\n.main-container li,\n.main-link {\n  @include mixins.min(lg) {\n    height: 100%;\n  }\n}\n\n.main-navigation {\n  font-size: functions.px-to-rem(18px);\n\n  @include mixins.min(lg) {\n    font-size: functions.px-to-rem(16px);\n    margin: 0 0.75rem;\n  }\n\n  @include mixins.min(xl) {\n    font-size: functions.px-to-rem(18px);\n  }\n\n  @include mixins.min(xxl) {\n    font-size: functions.px-to-rem(20px);\n  }\n\n  @include mixins.max(lg) {\n    position: absolute;\n    top: var(--calculated-header-height);\n    left: 0;\n    background: white;\n    height: calc(var(--host-window-height) - var(--calculated-header-height));\n    width: 100%;\n    margin: 0;\n    overflow: hidden scroll;\n    -webkit-overflow-scrolling: touch;\n    overscroll-behavior: contain;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    z-index: -1;\n    visibility: hidden;\n    transform: translateY(-100%);\n    transition: transform 0.35s, visibility 0.35s;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n\n    &.open {\n      transform: translateY(0);\n      visibility: visible;\n    }\n  }\n}\n\n.main-container {\n  @extend %no-list;\n\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  @include mixins.max(lg) {\n    flex-direction: column;\n    align-items: stretch;\n    justify-content: flex-start;\n    padding-top: 2.5rem;\n    padding-bottom: 2.5rem;\n\n    > li + li {\n      border-top: 1px solid color.$gray-10;\n    }\n  }\n\n  @include mixins.min(lg) {\n    padding-right: 0;\n    padding-left: 0;\n  }\n\n  > li {\n    flex: 0 1 auto;\n    min-width: 0;\n  }\n}\n\n.main-link {\n  @extend %nav-link;\n\n  display: flex;\n  align-items: center;\n  padding-right: 0.75rem;\n  padding-left: 0.75rem;\n  text-align: left;\n  cursor: pointer;\n  width: 100%;\n\n  @include mixins.min(lg) {\n    svg {\n      display: none;\n    }\n  }\n\n  @include mixins.max(lg) {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    font-weight: 300;\n    padding: 0.625rem 0;\n    width: 100%;\n    text-align: left;\n\n    svg {\n      width: 1.5rem;\n      height: 1.5rem;\n    }\n  }\n\n  span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n}\n\n.main-link,\n.flyout-link {\n  position: relative;\n  color: black;\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background-color: transparent;\n    opacity: 0;\n    transform: scaleX(0.8);\n    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &:hover,\n  &.focus {\n    &::after {\n      background-color: color.$gray-20;\n      opacity: 1;\n      transform: scale(1);\n      transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n  }\n\n  &.active {\n    font-weight: 700;\n\n    &::after {\n      background-color: color.$yellow;\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n}\n\n.flyout {\n  left: 0;\n  width: 100%;\n  background: white;\n  padding-bottom: 3rem;\n  overflow: auto;\n  overscroll-behavior: contain;\n  visibility: hidden;\n\n  @include mixins.min(lg) {\n    position: absolute;\n    top: 100%;\n    max-height: calc(100vh - var(--header-height) - var(--meta-header-height) - 1px);\n    z-index: -1;\n    box-shadow: 0 0 1px 0 rgb(0 0 0 / 40%);\n    transform: translateY(-100%);\n\n    &.open {\n      box-shadow: 0 0 8px 0 rgb(0 0 0 / 40%);\n      transform: translateY(0);\n    }\n  }\n\n  @include mixins.max(lg) {\n    position: fixed;\n    top: 0;\n    height: 100%;\n    z-index: 1;\n    transform: translateX(100%);\n\n    &.open {\n      transform: translateX(0);\n    }\n  }\n\n  &.open {\n    visibility: visible;\n  }\n\n  &.animate {\n    transition: transform 0.35s, visibility 0.35s, box-shadow 0.35s;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n}\n\n.flyout-nav {\n  @extend %font-curve-small;\n\n  display: flex;\n  justify-content: space-between;\n  min-height: 3.5rem;\n\n  // Change box-sizing to content-box to add 1px border width to flyout-nav hight.\n  // This ensures flyout-nav has same hight as main-navigation-container.\n  box-sizing: content-box;\n}\n\n.flyout-row {\n  display: flex;\n  gap: 1.5rem;\n\n  @include mixins.max(lg) {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @include mixins.max(rg) {\n    grid-template-columns: 1fr;\n  }\n}\n\n.flyout-column {\n  flex: 1;\n  max-width: 25%;\n\n  @include mixins.max(lg) {\n    max-width: none;\n  }\n\n  h3 {\n    @extend %font-curve-small;\n    margin-top: 0;\n  }\n}\n\n.flyout-back-button {\n  @include mixins.container-padding();\n\n  display: flex;\n  align-items: center;\n  font-size: functions.px-to-rem(16px);\n  font-weight: 400;\n  cursor: pointer;\n\n  svg {\n    width: 1.5rem;\n    height: 1.5rem;\n  }\n\n  @include mixins.min(lg) {\n    display: none;\n  }\n}\n\n.flyout-close-button {\n  @extend %nav-link;\n\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n  padding: 0 1.5rem;\n  cursor: pointer;\n\n  svg {\n    width: 1.5rem;\n    height: 1.5rem;\n  }\n\n  @include mixins.max(lg) {\n    display: none;\n  }\n}\n\n.flyout-linklist {\n  @extend %no-list;\n\n  li {\n    border-top: 1px solid color.$gray-10;\n  }\n\n  &:first-child > li {\n    border-top-color: transparent;\n  }\n}\n\n.flyout-link {\n  @extend %nav-link;\n\n  display: block;\n  padding: 0.75rem 0;\n}\n\n.flyout-title {\n  @extend %font-curve-bigger-regular;\n\n  margin: 2.5rem 0 1.5rem 0;\n\n  @include mixins.min(lg) {\n    display: none;\n  }\n}\n","import { Component, Host, h, State, Method, Event, Element, EventEmitter } from '@stencil/core';\nimport { throttle } from 'throttle-debounce';\nimport { state } from '../../data/store';\nimport {\n  DropdownElement,\n  DropdownEvent,\n  HasDropdown,\n  IsFocusable,\n  NavMainEntity,\n} from '../../models/header.model';\nimport { userPrefersReducedMotion } from '../../services/ui.service';\nimport { translate } from '../../services/language.service';\nimport { SvgSprite } from '../../utils/svg-sprite.component';\nimport { SvgIcon } from '../../utils/svg-icon.component';\nimport { LevelOneAction } from './components/level-one-action.component';\n\n@Component({\n  tag: 'post-main-navigation',\n  styleUrl: 'post-main-navigation.scss',\n  shadow: true,\n})\nexport class PostMainNavigation implements HasDropdown, IsFocusable {\n  @State() activeFlyout: string | null;\n  @State() mobileMenuOpen: boolean;\n  @Event() dropdownToggled: EventEmitter<DropdownEvent>;\n  @Event() flyoutToggled: EventEmitter<string | null>;\n  @Element() host: DropdownElement;\n  private throttledResize: throttle<() => void>;\n  private resizeTimer: number | null = null;\n  private mouseLeaveTimer: number | null = null;\n  private mouseEnterTimer: number | null = null;\n\n  connectedCallback() {\n    this.throttledResize = throttle(300, () => this.handleResize());\n    window.addEventListener('resize', this.throttledResize, { passive: true });\n    this.setWindowHeight();\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.throttledResize);\n    if (this.mouseEnterTimer !== null) window.clearTimeout(this.mouseEnterTimer);\n    if (this.mouseLeaveTimer !== null) window.clearTimeout(this.mouseLeaveTimer);\n  }\n\n  handleResize() {\n    // Suspend all animations and transitions on window resize\n    this.host.classList.add('no-animation');\n    if (this.resizeTimer !== null) window.clearTimeout(this.resizeTimer);\n    this.resizeTimer = window.setTimeout(() => {\n      this.host.classList.remove('no-animation');\n    }, 300);\n\n    this.setWindowHeight();\n  }\n\n  // Update window height var\n  setWindowHeight() {\n    if (!this.host) {\n      return;\n    }\n    this.host.style.setProperty('--window-height', `${window.innerHeight}px`);\n\n    // Safari might or might not show a blank bar at the bottom where the browser\n    // controls should be. This timeout waits for this bar to appear before resetting the available height\n    window.setTimeout(() => {\n      this.host.style.setProperty('--window-height', `${window.innerHeight}px`);\n    }, 100);\n  }\n\n  openFlyout(id: string) {\n    const flyout = this.host.shadowRoot?.getElementById(id);\n\n    if (flyout && this.activeFlyout !== '') {\n      // Add flyout animation if there's no flyout open\n      this.addFlyoutAnimation(flyout, 'expand');\n    }\n\n    this.activeFlyout = id;\n    this.flyoutToggled.emit(id);\n    this.setWindowHeight();\n\n    if (this.mouseLeaveTimer !== null) {\n      window.clearTimeout(this.mouseLeaveTimer);\n      this.mouseLeaveTimer = null;\n    }\n  }\n\n  closeFlyout(id?: string, manageFocus = true) {\n    if (id === undefined) return;\n    const flyout = this.host.shadowRoot?.getElementById(id);\n\n    if (flyout) {\n      // Add flyout animation for close action\n      this.addFlyoutAnimation(flyout, 'collapse', manageFocus);\n    }\n\n    this.activeFlyout = null;\n    this.flyoutToggled.emit();\n  }\n\n  addFlyoutAnimation(flyout: HTMLElement, direction?: 'expand' | 'collapse', manageFocus = true) {\n    // Check if user prefers to see animations or not\n    if (!userPrefersReducedMotion()) {\n      flyout.classList.add('animate');\n\n      // Remove flyout animation after transition ended\n      flyout.addEventListener(\n        'transitionend',\n        () => {\n          if (manageFocus) {\n            if (direction === 'expand') {\n              flyout.querySelector<HTMLElement>('button.flyout-back-button')?.focus();\n            } else if (direction === 'collapse') {\n              flyout.parentElement?.querySelector<HTMLElement>('a.main-link')?.focus();\n            }\n          }\n\n          flyout.classList.remove('animate');\n        },\n        {\n          once: true,\n        },\n      );\n    }\n  }\n\n  isActiveFlyout(id?: string) {\n    return id === this.activeFlyout;\n  }\n\n  handleMouseEnter(level: NavMainEntity) {\n    // Cancel opening the flyout if there already is one scheduled to open\n    if (this.mouseEnterTimer !== null) {\n      window.clearTimeout(this.mouseEnterTimer);\n      this.mouseEnterTimer = null;\n    }\n\n    // Cancel closing if we enter again\n    if (this.mouseLeaveTimer && this.activeFlyout === level.id) {\n      window.clearTimeout(this.mouseLeaveTimer);\n      this.mouseLeaveTimer = null;\n    }\n\n    if (window.innerWidth >= 1024 && level.flyout.length > 0 && this.activeFlyout !== level.id) {\n      // Delay opening the flyout for a moment to give users a chance to move the mouse over the navigation without triggering the flyout\n      this.mouseEnterTimer = window.setTimeout(() => {\n        this.mouseEnterTimer = null;\n        if (level.id !== undefined) this.openFlyout(level.id);\n      }, 200);\n    }\n  }\n\n  handleMouseLeave(level: NavMainEntity) {\n    // Cancel opening the flyout if a mouseleave event happens before the flyout opened\n    if (this.mouseEnterTimer !== null) {\n      window.clearTimeout(this.mouseEnterTimer);\n    }\n\n    // Don't close an open flyout if the mouseleave is from another mainnav entry\n    if (this.activeFlyout && this.activeFlyout !== level.id) {\n      return;\n    }\n\n    if (window.innerWidth >= 1024 && level.flyout.length > 0) {\n      // Allow the pointer to shortly leave the flyout without closing it. This\n      // allows for user mistakes and makes the experience less nervous\n      this.mouseLeaveTimer = window.setTimeout(() => {\n        this.closeFlyout(level.id, false);\n      }, 300);\n    }\n  }\n\n  handleTouchEnd(event: TouchEvent, level: NavMainEntity) {\n    if (!this.isActiveFlyout(level.id) && !level.noFlyout) {\n      // It's the first touchstart and has a flyout, prevent link activation and open the flyout\n      if (event.cancelable) event.preventDefault();\n      if (level.id) this.openFlyout(level.id);\n    }\n  }\n\n  handleKeyPress(event: KeyboardEvent, level: NavMainEntity) {\n    if (event.key === 'Enter' && !this.isActiveFlyout(level.id) && !level.noFlyout) {\n      // It's the first enter keypress and has a flyout, prevent link activation and open the flyout\n      event.preventDefault();\n      if (level.id) this.openFlyout(level.id);\n    }\n  }\n\n  handleClick(event: MouseEvent, level: NavMainEntity) {\n    if (!this.isActiveFlyout(level.id) && !level.noFlyout) {\n      // It's the first click, always open the flyout, never the link\n      // This is relevant for desktop with active screenreader which\n      // translates an enter keypress to a click\n      event.preventDefault();\n      if (level.id) this.openFlyout(level.id);\n    }\n  }\n\n  /**\n   * Toggle the main navigation (only visible on mobile)\n   * @param force Force a state\n   * @returns Boolean indicating new state\n   */\n  @Method()\n  async toggleDropdown(force?: boolean) {\n    this.mobileMenuOpen = force === undefined ? !this.mobileMenuOpen : force;\n    this.dropdownToggled.emit({ open: this.mobileMenuOpen, element: this.host });\n\n    if (force === false) {\n      this.closeFlyout();\n    }\n\n    this.setWindowHeight();\n\n    return this.mobileMenuOpen;\n  }\n\n  /**\n   * Focus the main navigation toggle button\n   */\n  @Method()\n  async setFocus() {\n    const firstLink = this.host.shadowRoot?.querySelector<HTMLElement>('.main-link');\n    if (firstLink) {\n      firstLink.focus();\n    }\n  }\n\n  /**\n   * Open a specific flyout\n   * @param id Flyout ID\n   */\n  @Method()\n  async setActiveFlyout(id: string | null) {\n    this.activeFlyout = id;\n    this.flyoutToggled.emit(this.activeFlyout);\n  }\n\n  render() {\n    if (state.localizedConfig?.header === undefined) return;\n    const headerConfig = state.localizedConfig.header;\n\n    return (\n      <Host>\n        <SvgSprite />\n        <nav\n          aria-label={headerConfig.translations.navMainAriaLabel}\n          id=\"post-internet-header-main-navigation\"\n          class={{ 'main-navigation': true, 'open': this.mobileMenuOpen }}\n          role=\"menu\"\n        >\n          <ul class=\"main-container container\">\n            {headerConfig.navMain.map(levelOne => (\n              <li\n                key={levelOne.text}\n                onMouseLeave={() => this.handleMouseLeave(levelOne)}\n                onMouseEnter={() => this.handleMouseEnter(levelOne)}\n              >\n                <LevelOneAction\n                  level={levelOne}\n                  isOpen={this.isActiveFlyout(levelOne.id)}\n                  onTouchEnd={e => this.handleTouchEnd(e, levelOne)}\n                  onKeyDown={e => this.handleKeyPress(e, levelOne)}\n                  onClick={e => this.handleClick(e, levelOne)}\n                />\n                {!levelOne.noFlyout ? renderLevelOneFlyout.bind(this)(levelOne) : null}\n              </li>\n            ))}\n          </ul>\n          <slot></slot>\n        </nav>\n      </Host>\n    );\n\n    function renderLevelOneFlyout(levelOne: NavMainEntity) {\n      return (\n        <div id={levelOne.id} class={{ flyout: true, open: this.isActiveFlyout(levelOne.id) }}>\n          <div class=\"wide-container\">\n            <div class=\"flyout-nav\">\n              <button\n                class=\"nav-link flyout-back-button\"\n                onClick={() => this.closeFlyout(levelOne.id)}\n              >\n                <SvgIcon name=\"pi-pointy-arrow-right\" classNames=\"mirrored\" />\n                <span>{headerConfig.translations.backButtonText}</span>\n              </button>\n              <button class=\"flyout-close-button\" onClick={() => this.closeFlyout(levelOne.id)}>\n                <span class=\"visually-hidden\">\n                  {levelOne.text}, {headerConfig.translations.mobileNavToggleClose}\n                </span>\n                <SvgIcon name=\"pi-close\" />\n              </button>\n            </div>\n            <h2 class=\"flyout-title container\">\n              <a href={levelOne.url} class=\"nav-link\">\n                {levelOne.text}\n              </a>\n            </h2>\n            <div class=\"flyout-row container\">\n              {levelOne.flyout.map((flyout, i) => (\n                <div key={flyout.title} class=\"flyout-column\">\n                  {flyout.title ? <h3 id={`${levelOne.id}-column-${i}`}>{flyout.title}</h3> : null}\n                  <ul\n                    class=\"flyout-linklist\"\n                    aria-labelledby={flyout.title ? `${levelOne.id}-column-${i}` : undefined}\n                  >\n                    {flyout.linkList.map(link => (\n                      <li key={link.url}>\n                        <a\n                          class={{\n                            'flyout-link': true,\n                            'active': !!link?.isActiveOverride,\n                          }}\n                          href={link.url}\n                          target={link.target}\n                        >\n                          {link.title}\n                          {link?.isActiveOverride ? (\n                            <span class=\"visually-hidden\">\n                              , {translate('Active navigation element')}\n                            </span>\n                          ) : null}\n                        </a>\n                      </li>\n                    ))}\n                  </ul>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      );\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/esm-es5/post-meta-navigation.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,h,H as Host}from"./index-35186c69.js";import{s as state}from"./store-b78e2d3b.js";var postMetaNavigationCss='@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}}.meta-list,.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}.meta-link,.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}.meta-link:hover,.nav-link:hover,.meta-link:focus,.nav-link:focus{color:black}.meta-link>svg,.nav-link>svg{width:1.4em;height:1.4em;-ms-flex-negative:0;flex-shrink:0}.meta-link>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{display:block;background:#faf9f8;font-size:0.875rem}.meta-container{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;min-height:3rem}@media (min-width: 1441px){.meta-container:not(.full-width){margin:0 auto;max-width:1440px}}.meta-container.vertical{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;padding-top:2.5rem;padding-bottom:2.5rem}@media (max-width: 599.98px){.meta-container.vertical{padding-right:16px;padding-left:16px}}@media (min-width: 600px) and (max-width: 1023.98px){.meta-container.vertical{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.meta-container.vertical{padding-right:40px;padding-left:40px}}@media (min-width: 1024px){.meta-container.vertical{display:none}}.meta-container.horizontal ::slotted(*){--separator-display:block;--separator-height:2.125rem}.horizontal .meta-navigation{padding-right:1rem}.meta-list{display:-ms-flexbox;display:flex}.vertical .meta-list{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.meta-link{font-size:0.875rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 0.5rem;min-height:2.125rem;border-radius:3px}.meta-link.active{background:#fc0;color:black}.vertical .meta-link{color:black;padding:0}.vertical .meta-link.active{padding:0 0.5rem;margin-left:-0.5rem}';var PostMetaNavigation=function(){function t(t){registerInstance(this,t);this.orientation=undefined;this.fullWidth=false}t.prototype.render=function(){var t;if(((t=state.localizedConfig)===null||t===void 0?void 0:t.header.navMeta)===undefined)return;var e=state.localizedConfig.header.navMeta;return h(Host,null,h("div",{class:"meta-container ".concat(this.orientation).concat(this.fullWidth?" full-width":"")},h("nav",{class:"meta-navigation"},h("ul",{class:"meta-list"},e===null||e===void 0?void 0:e.filter((function(t){return!t.isHomeLink})).map((function(t){return h("li",{key:t.url},h("a",{class:{active:t.isActive,"meta-link":true},target:t.target,href:t.url},h("span",{"aria-hidden":"true"},t.text)))})))),h("slot",null)))};return t}();PostMetaNavigation.style=postMetaNavigationCss;export{PostMetaNavigation as post_meta_navigation};
+import{r as registerInstance,h,H as Host}from"./index-2aa4bc9f.js";import{s as state}from"./store-d5165a8f.js";var postMetaNavigationCss='@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")}.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,.meta-link{outline:none;outline-offset:2px;text-decoration:none;color:rgba(0, 0, 0, 0.8);-webkit-transition:color 200ms;transition:color 200ms;background-color:transparent;-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:is(:focus-visible,:focus-within,.pretend-focus),.meta-link:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color)}.nav-link:hover,.meta-link:hover,.nav-link:focus,.meta-link:focus{color:black}.nav-link:focus-visible,.meta-link:focus-visible{z-index:1;position:relative}.nav-link>svg,.meta-link>svg{width:1.4em;height:1.4em;-ms-flex-negative:0;flex-shrink:0}.nav-link>span,.meta-link>span{-ms-flex-negative:1;flex-shrink:1}.no-list,.meta-list{list-style:none;padding-left:0;margin-top:0;margin-bottom:0}*,:host,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{font-family:"Frutiger Neue For Post", system-ui, sans-serif}button{font:inherit;padding:0}a,button{border-radius:3px;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:3px;position:relative;z-index:1}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{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.bold{font-weight:700}.light{font-weight:300}.d-flex{display:-ms-flexbox;display:flex}.d-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.align-items-center{-ms-flex-align:center;align-items:center}@media (min-width: 1441px){.wide-container{margin:0 auto;max-width:1440px}}@media (max-width: 599.98px){.container{padding-right:16px;padding-left:16px}}@media (min-width: 600px) and (max-width: 1023.98px){.container{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.container{padding-right:40px;padding-left:40px}}@media (max-width: -0.02px){.hidden-xs{display:none}}@media (max-width: 399.98px){.hidden-sm{display:none}}@media (max-width: 599.98px){.hidden-rg{display:none}}@media (max-width: 779.98px){.hidden-md{display:none}}@media (max-width: 1023.98px){.hidden-lg{display:none}}@media (max-width: 1279.98px){.hidden-xl{display:none}}@media (max-width: 1440.98px){.hidden-xxl{display:none}}:host{display:block;background:#faf9f8;font-size:0.875rem}.meta-container{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;min-height:3rem}@media (min-width: 1441px){.meta-container:not(.full-width){margin:0 auto;max-width:1440px}}.meta-container.vertical{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;padding-top:2.5rem;padding-bottom:2.5rem}@media (max-width: 599.98px){.meta-container.vertical{padding-right:16px;padding-left:16px}}@media (min-width: 600px) and (max-width: 1023.98px){.meta-container.vertical{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.meta-container.vertical{padding-right:40px;padding-left:40px}}@media (min-width: 1024px){.meta-container.vertical{display:none}}.meta-container.horizontal ::slotted(*){--separator-display:block;--separator-height:2.125rem}.horizontal .meta-navigation{padding-right:1rem}.meta-list{display:-ms-flexbox;display:flex}.vertical .meta-list{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.meta-link{font-size:0.875rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 0.5rem;min-height:2.125rem;border-radius:3px}.meta-link.active{background:#fc0;color:black}.vertical .meta-link{color:black;padding:0}.vertical .meta-link.active{padding:0 0.5rem;margin-left:-0.5rem}';var PostMetaNavigation=function(){function t(t){registerInstance(this,t);this.orientation=undefined;this.fullWidth=false}t.prototype.render=function(){var t,i;if(((t=state.localizedConfig)===null||t===void 0?void 0:t.header.navMeta)===undefined)return;var e=state.localizedConfig.header;return h(Host,null,h("div",{class:"meta-container ".concat(this.orientation).concat(this.fullWidth?" full-width":"")},h("nav",{"aria-label":e.translations.navMetaAriaLabel,class:"meta-navigation"},h("ul",{class:"meta-list"},(i=e.navMeta)===null||i===void 0?void 0:i.filter((function(t){return!t.isHomeLink})).map((function(t){return h("li",{key:t.url},h("a",{class:{active:t.isActive,"meta-link":true},target:t.target,href:t.url},h("span",{"aria-hidden":"true"},t.text)))})))),h("slot",null)))};return t}();PostMetaNavigation.style=postMetaNavigationCss;export{PostMetaNavigation as post_meta_navigation};
 //# sourceMappingURL=post-meta-navigation.entry.js.map

package/dist/esm-es5/post-meta-navigation.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["postMetaNavigationCss","PostMetaNavigation","prototype","render","_a","state","localizedConfig","header","navMeta","undefined","h","Host","class","concat","this","orientation","fullWidth","filter","meta","isHomeLink","map","key","url","active","isActive","target","href","text"],"sources":["src/components/post-meta-navigation/post-meta-navigation.scss?tag=post-meta-navigation&encapsulation=shadow","src/components/post-meta-navigation/post-meta-navigation.tsx"],"sourcesContent":["@use \"@swisspost/design-system-styles/variables/color\";\n@use \"@swisspost/design-system-styles/functions\";\n@use \"../../utils/utils.scss\";\n@use \"../../utils/mixins.scss\";\n\n:host {\n  display: block;\n  background: color.$gray-background-light;\n  font-size: functions.px-to-rem(14px);\n}\n\n.meta-container {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  min-height: functions.px-to-rem(48px);\n\n  @media (min-width: 1441px) {\n    &:not(.full-width) {\n      margin: 0 auto;\n      max-width: 1440px;\n    }\n  }\n\n  &.vertical {\n    @include mixins.container-padding();\n\n    flex-direction: column;\n    align-items: flex-start;\n    padding-top: 2.5rem;\n    padding-bottom: 2.5rem;\n\n    @include mixins.min(lg) {\n      display: none;\n    }\n  }\n\n  &.horizontal {\n    ::slotted(*) {\n      --separator-display: block;\n      --separator-height: #{functions.px-to-rem(34px)};\n    }\n  }\n}\n\n.meta-navigation {\n  .horizontal & {\n    padding-right: 1rem;\n  }\n}\n\n.meta-list {\n  @extend %no-list;\n  display: flex;\n\n  .vertical & {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n}\n\n.meta-link {\n  @extend %nav-link;\n\n  font-size: functions.px-to-rem(14px);\n  display: flex;\n  align-items: center;\n  padding: 0 0.5rem;\n  min-height: functions.px-to-rem(34px);\n  border-radius: 3px;\n\n  &.active {\n    background: color.$yellow;\n    color: black;\n  }\n\n  .vertical & {\n    color: black;\n    padding: 0;\n\n    &.active {\n      padding: 0 0.5rem;\n      margin-left: -0.5rem;\n    }\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { state } from '../../data/store';\n\n@Component({\n  tag: 'post-meta-navigation',\n  styleUrl: 'post-meta-navigation.scss',\n  shadow: true,\n})\nexport class PostMetaNavigation {\n  @Prop() orientation: 'horizontal' | 'vertical';\n  @Prop() fullWidth?: boolean = false;\n\n  render() {\n    if (state.localizedConfig?.header.navMeta === undefined) return;\n    const { navMeta } = state.localizedConfig.header;\n\n    return (\n      <Host>\n        <div class={`meta-container ${this.orientation}${this.fullWidth ? ' full-width' : ''}`}>\n          <nav class=\"meta-navigation\">\n            <ul class=\"meta-list\">\n              {navMeta\n                ?.filter(meta => !meta.isHomeLink)\n                .map(meta => (\n                  <li key={meta.url}>\n                    <a\n                      class={{ 'active': meta.isActive, 'meta-link': true }}\n                      target={meta.target}\n                      href={meta.url}\n                    >\n                      <span aria-hidden=\"true\">{meta.text}</span>\n                    </a>\n                  </li>\n                ))}\n            </ul>\n          </nav>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+GAAA,IAAMA,sBAAwB,84I,ICQjBC,mBAAkB,W,iFAEC,K,CAE9BA,EAAAC,UAAAC,OAAA,W,MACE,KAAIC,EAAAC,MAAMC,mBAAe,MAAAF,SAAA,SAAAA,EAAEG,OAAOC,WAAYC,UAAW,OACjD,IAAAD,EAAYH,MAAMC,gBAAgBC,OAAMC,QAEhD,OACEE,EAACC,KAAI,KACHD,EAAA,OAAKE,MAAO,kBAAAC,OAAkBC,KAAKC,aAAWF,OAAGC,KAAKE,UAAY,cAAgB,KAChFN,EAAA,OAAKE,MAAM,mBACTF,EAAA,MAAIE,MAAM,aACPJ,IAAO,MAAPA,SAAO,SAAPA,EACGS,QAAO,SAAAC,GAAQ,OAACA,EAAKC,UAAN,IAChBC,KAAI,SAAAF,GAAI,OACPR,EAAA,MAAIW,IAAKH,EAAKI,KACZZ,EAAA,KACEE,MAAO,CAAEW,OAAUL,EAAKM,SAAU,YAAa,MAC/CC,OAAQP,EAAKO,OACbC,KAAMR,EAAKI,KAEXZ,EAAA,sBAAkB,QAAQQ,EAAKS,OAP5B,MAafjB,EAAA,c,WA5BqB,G"}
+{"version":3,"names":["postMetaNavigationCss","PostMetaNavigation","prototype","render","_a","state","localizedConfig","header","navMeta","undefined","headerConfig","h","Host","class","concat","this","orientation","fullWidth","translations","navMetaAriaLabel","_b","filter","meta","isHomeLink","map","key","url","active","isActive","target","href","text"],"sources":["src/components/post-meta-navigation/post-meta-navigation.scss?tag=post-meta-navigation&encapsulation=shadow","src/components/post-meta-navigation/post-meta-navigation.tsx"],"sourcesContent":["@use \"@swisspost/design-system-styles/variables/color\";\n@use \"@swisspost/design-system-styles/functions\";\n@use \"../../utils/utils.scss\";\n@use \"../../utils/mixins.scss\";\n\n:host {\n  display: block;\n  background: color.$gray-background-light;\n  font-size: functions.px-to-rem(14px);\n}\n\n.meta-container {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  min-height: functions.px-to-rem(48px);\n\n  @media (min-width: 1441px) {\n    &:not(.full-width) {\n      margin: 0 auto;\n      max-width: 1440px;\n    }\n  }\n\n  &.vertical {\n    @include mixins.container-padding();\n\n    flex-direction: column;\n    align-items: flex-start;\n    padding-top: 2.5rem;\n    padding-bottom: 2.5rem;\n\n    @include mixins.min(lg) {\n      display: none;\n    }\n  }\n\n  &.horizontal {\n    ::slotted(*) {\n      --separator-display: block;\n      --separator-height: #{functions.px-to-rem(34px)};\n    }\n  }\n}\n\n.meta-navigation {\n  .horizontal & {\n    padding-right: 1rem;\n  }\n}\n\n.meta-list {\n  @extend %no-list;\n  display: flex;\n\n  .vertical & {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n}\n\n.meta-link {\n  @extend %nav-link;\n\n  font-size: functions.px-to-rem(14px);\n  display: flex;\n  align-items: center;\n  padding: 0 0.5rem;\n  min-height: functions.px-to-rem(34px);\n  border-radius: 3px;\n\n  &.active {\n    background: color.$yellow;\n    color: black;\n  }\n\n  .vertical & {\n    color: black;\n    padding: 0;\n\n    &.active {\n      padding: 0 0.5rem;\n      margin-left: -0.5rem;\n    }\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { state } from '../../data/store';\n\n@Component({\n  tag: 'post-meta-navigation',\n  styleUrl: 'post-meta-navigation.scss',\n  shadow: true,\n})\nexport class PostMetaNavigation {\n  @Prop() orientation: 'horizontal' | 'vertical';\n  @Prop() fullWidth?: boolean = false;\n\n  render() {\n    if (state.localizedConfig?.header.navMeta === undefined) return;\n    const headerConfig = state.localizedConfig.header;\n\n    return (\n      <Host>\n        <div class={`meta-container ${this.orientation}${this.fullWidth ? ' full-width' : ''}`}>\n          <nav aria-label={headerConfig.translations.navMetaAriaLabel} class=\"meta-navigation\">\n            <ul class=\"meta-list\">\n              {headerConfig.navMeta\n                ?.filter(meta => !meta.isHomeLink)\n                .map(meta => (\n                  <li key={meta.url}>\n                    <a\n                      class={{ 'active': meta.isActive, 'meta-link': true }}\n                      target={meta.target}\n                      href={meta.url}\n                    >\n                      <span aria-hidden=\"true\">{meta.text}</span>\n                    </a>\n                  </li>\n                ))}\n            </ul>\n          </nav>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+GAAA,IAAMA,sBAAwB,64J,ICQjBC,mBAAkB,W,iFAEC,K,CAE9BA,EAAAC,UAAAC,OAAA,W,QACE,KAAIC,EAAAC,MAAMC,mBAAe,MAAAF,SAAA,SAAAA,EAAEG,OAAOC,WAAYC,UAAW,OACzD,IAAMC,EAAeL,MAAMC,gBAAgBC,OAE3C,OACEI,EAACC,KAAI,KACHD,EAAA,OAAKE,MAAO,kBAAAC,OAAkBC,KAAKC,aAAWF,OAAGC,KAAKE,UAAY,cAAgB,KAChFN,EAAA,oBAAiBD,EAAaQ,aAAaC,iBAAkBN,MAAM,mBACjEF,EAAA,MAAIE,MAAM,cACPO,EAAAV,EAAaF,WAAO,MAAAY,SAAA,SAAAA,EACjBC,QAAO,SAAAC,GAAQ,OAACA,EAAKC,UAAN,IAChBC,KAAI,SAAAF,GAAI,OACPX,EAAA,MAAIc,IAAKH,EAAKI,KACZf,EAAA,KACEE,MAAO,CAAEc,OAAUL,EAAKM,SAAU,YAAa,MAC/CC,OAAQP,EAAKO,OACbC,KAAMR,EAAKI,KAEXf,EAAA,sBAAkB,QAAQW,EAAKS,OAP5B,MAafpB,EAAA,c,WA5BqB,G"}