@swisspost/internet-header 1.9.1 → 1.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{language.service-9334ca5d.js → language.service-0864d021.js} +7 -2
- package/dist/cjs/language.service-0864d021.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/post-klp-login-widget.cjs.entry.js +1 -1
- package/dist/cjs/post-klp-login-widget.cjs.entry.js.map +1 -1
- package/dist/cjs/post-language-switch.cjs.entry.js +2 -2
- package/dist/cjs/post-language-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/post-logo.cjs.entry.js +1 -1
- package/dist/cjs/post-logo.cjs.entry.js.map +1 -1
- package/dist/cjs/post-main-navigation.cjs.entry.js +2 -2
- package/dist/cjs/post-main-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/post-meta-navigation.cjs.entry.js +1 -1
- package/dist/cjs/post-meta-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/post-search.cjs.entry.js +25 -2
- package/dist/cjs/post-search.cjs.entry.js.map +1 -1
- package/dist/cjs/post-skiplinks.cjs.entry.js +2 -2
- package/dist/cjs/post-skiplinks.cjs.entry.js.map +1 -1
- package/dist/cjs/swisspost-internet-breadcrumbs.cjs.entry.js +1329 -8
- package/dist/cjs/swisspost-internet-breadcrumbs.cjs.entry.js.map +1 -1
- package/dist/cjs/swisspost-internet-footer.cjs.entry.js +2 -2
- package/dist/cjs/swisspost-internet-footer.cjs.entry.js.map +1 -1
- package/dist/cjs/swisspost-internet-header.cjs.entry.js +67 -37
- package/dist/cjs/swisspost-internet-header.cjs.entry.js.map +1 -1
- package/dist/cjs/swisspost-internet-header.cjs.js +1 -1
- package/dist/collection/assets/i18n/translations.js +5 -0
- package/dist/collection/assets/i18n/translations.js.map +1 -1
- package/dist/collection/components/post-internet-breadcrumbs/post-internet-breadcrumbs.css +2 -2480
- package/dist/collection/components/post-internet-breadcrumbs/post-internet-breadcrumbs.js +77 -7
- package/dist/collection/components/post-internet-breadcrumbs/post-internet-breadcrumbs.js.map +1 -1
- package/dist/collection/components/post-internet-footer/post-internet-footer.css +1 -2300
- package/dist/collection/components/post-internet-header/logo-animation/logo-animation.js +6 -3
- package/dist/collection/components/post-internet-header/logo-animation/logo-animation.js.map +1 -1
- package/dist/collection/components/post-internet-header/post-internet-header.css +1 -403
- package/dist/collection/components/post-internet-header/post-internet-header.js +33 -26
- package/dist/collection/components/post-internet-header/post-internet-header.js.map +1 -1
- package/dist/collection/components/post-klp-login-widget/post-klp-login-widget.css +2 -1447
- package/dist/collection/components/post-klp-login-widget/post-klp-login-widget.js +1 -1
- package/dist/collection/components/post-klp-login-widget/post-klp-login-widget.js.map +1 -1
- package/dist/collection/components/post-language-switch/post-language-switch.css +1 -370
- package/dist/collection/components/post-language-switch/post-language-switch.js +2 -2
- package/dist/collection/components/post-language-switch/post-language-switch.js.map +1 -1
- package/dist/collection/components/post-logo/post-logo.css +1 -265
- package/dist/collection/components/post-main-navigation/post-main-navigation.css +1 -637
- package/dist/collection/components/post-main-navigation/post-main-navigation.js +1 -1
- package/dist/collection/components/post-main-navigation/post-main-navigation.js.map +1 -1
- package/dist/collection/components/post-meta-navigation/post-meta-navigation.css +1 -345
- package/dist/collection/components/post-search/post-search.css +4 -2927
- package/dist/collection/components/post-search/post-search.js +28 -5
- package/dist/collection/components/post-search/post-search.js.map +1 -1
- package/dist/collection/components/post-skiplinks/post-skiplinks.css +1 -21
- package/dist/collection/components/post-skiplinks/post-skiplinks.js +1 -1
- package/dist/collection/components/post-skiplinks/post-skiplinks.js.map +1 -1
- package/dist/collection/services/language.service.js +1 -1
- package/dist/collection/services/language.service.js.map +1 -1
- package/dist/collection/utils/scrollparent.js +21 -0
- package/dist/collection/utils/scrollparent.js.map +1 -0
- package/dist/components/language.service.js +6 -1
- package/dist/components/language.service.js.map +1 -1
- package/dist/components/post-klp-login-widget2.js +1 -1
- package/dist/components/post-klp-login-widget2.js.map +1 -1
- package/dist/components/post-language-switch2.js +1 -1
- package/dist/components/post-language-switch2.js.map +1 -1
- package/dist/components/post-logo2.js +1 -1
- package/dist/components/post-logo2.js.map +1 -1
- package/dist/components/post-main-navigation2.js +1 -1
- package/dist/components/post-main-navigation2.js.map +1 -1
- package/dist/components/post-meta-navigation2.js +1 -1
- package/dist/components/post-meta-navigation2.js.map +1 -1
- package/dist/components/post-search2.js +25 -2
- package/dist/components/post-search2.js.map +1 -1
- package/dist/components/post-skiplinks2.js +1 -1
- package/dist/components/post-skiplinks2.js.map +1 -1
- package/dist/components/swisspost-internet-breadcrumbs.js +1331 -8
- package/dist/components/swisspost-internet-breadcrumbs.js.map +1 -1
- package/dist/components/swisspost-internet-footer.js +1 -1
- package/dist/components/swisspost-internet-footer.js.map +1 -1
- package/dist/components/swisspost-internet-header.js +68 -38
- package/dist/components/swisspost-internet-header.js.map +1 -1
- package/dist/docs.json +51 -4
- package/dist/esm/{language.service-bd0f3b6f.js → language.service-109c485e.js} +7 -2
- package/dist/esm/language.service-109c485e.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/post-klp-login-widget.entry.js +1 -1
- package/dist/esm/post-klp-login-widget.entry.js.map +1 -1
- package/dist/esm/post-language-switch.entry.js +2 -2
- package/dist/esm/post-language-switch.entry.js.map +1 -1
- package/dist/esm/post-logo.entry.js +1 -1
- package/dist/esm/post-logo.entry.js.map +1 -1
- package/dist/esm/post-main-navigation.entry.js +2 -2
- package/dist/esm/post-main-navigation.entry.js.map +1 -1
- package/dist/esm/post-meta-navigation.entry.js +1 -1
- package/dist/esm/post-meta-navigation.entry.js.map +1 -1
- package/dist/esm/post-search.entry.js +25 -2
- package/dist/esm/post-search.entry.js.map +1 -1
- package/dist/esm/post-skiplinks.entry.js +2 -2
- package/dist/esm/post-skiplinks.entry.js.map +1 -1
- package/dist/esm/swisspost-internet-breadcrumbs.entry.js +1329 -8
- package/dist/esm/swisspost-internet-breadcrumbs.entry.js.map +1 -1
- package/dist/esm/swisspost-internet-footer.entry.js +2 -2
- package/dist/esm/swisspost-internet-footer.entry.js.map +1 -1
- package/dist/esm/swisspost-internet-header.entry.js +67 -37
- package/dist/esm/swisspost-internet-header.entry.js.map +1 -1
- package/dist/esm/swisspost-internet-header.js +1 -1
- package/dist/esm-es5/language.service-109c485e.js +2 -0
- package/dist/esm-es5/language.service-109c485e.js.map +1 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/loader.js.map +1 -1
- package/dist/esm-es5/post-klp-login-widget.entry.js +1 -1
- package/dist/esm-es5/post-klp-login-widget.entry.js.map +1 -1
- package/dist/esm-es5/post-language-switch.entry.js +1 -1
- package/dist/esm-es5/post-language-switch.entry.js.map +1 -1
- package/dist/esm-es5/post-logo.entry.js +1 -1
- package/dist/esm-es5/post-logo.entry.js.map +1 -1
- package/dist/esm-es5/post-main-navigation.entry.js +1 -1
- package/dist/esm-es5/post-main-navigation.entry.js.map +1 -1
- package/dist/esm-es5/post-meta-navigation.entry.js +1 -1
- package/dist/esm-es5/post-meta-navigation.entry.js.map +1 -1
- package/dist/esm-es5/post-search.entry.js +1 -1
- package/dist/esm-es5/post-search.entry.js.map +1 -1
- package/dist/esm-es5/post-skiplinks.entry.js +1 -1
- package/dist/esm-es5/post-skiplinks.entry.js.map +1 -1
- package/dist/esm-es5/swisspost-internet-breadcrumbs.entry.js +2 -2
- package/dist/esm-es5/swisspost-internet-breadcrumbs.entry.js.map +1 -1
- package/dist/esm-es5/swisspost-internet-footer.entry.js +1 -1
- package/dist/esm-es5/swisspost-internet-footer.entry.js.map +1 -1
- package/dist/esm-es5/swisspost-internet-header.entry.js +1 -1
- package/dist/esm-es5/swisspost-internet-header.entry.js.map +1 -1
- package/dist/esm-es5/swisspost-internet-header.js +1 -1
- package/dist/esm-es5/swisspost-internet-header.js.map +1 -1
- package/dist/swisspost-internet-header/p-0216631b.system.entry.js +2 -0
- package/dist/swisspost-internet-header/{p-e2df6e93.system.entry.js.map → p-0216631b.system.entry.js.map} +1 -1
- package/dist/swisspost-internet-header/p-0352b702.system.entry.js +7 -0
- package/dist/swisspost-internet-header/p-0352b702.system.entry.js.map +1 -0
- package/dist/swisspost-internet-header/p-0e4299a3.entry.js +2 -0
- package/dist/swisspost-internet-header/{p-6bb07a80.entry.js.map → p-0e4299a3.entry.js.map} +1 -1
- package/dist/swisspost-internet-header/p-10bfe973.system.entry.js +2 -0
- package/dist/swisspost-internet-header/p-10bfe973.system.entry.js.map +1 -0
- package/dist/swisspost-internet-header/p-142627fa.entry.js +2 -0
- package/dist/swisspost-internet-header/{p-9ab24fb3.entry.js.map → p-142627fa.entry.js.map} +1 -1
- package/dist/swisspost-internet-header/p-194475b8.system.js +2 -0
- package/dist/swisspost-internet-header/p-194475b8.system.js.map +1 -0
- package/dist/swisspost-internet-header/p-1a526dc3.system.entry.js +2 -0
- package/dist/swisspost-internet-header/p-1a526dc3.system.entry.js.map +1 -0
- package/dist/swisspost-internet-header/p-28bcc0a1.entry.js +2 -0
- package/dist/swisspost-internet-header/p-28bcc0a1.entry.js.map +1 -0
- package/dist/swisspost-internet-header/p-312fcf55.system.entry.js +2 -0
- package/dist/swisspost-internet-header/{p-fed8d74d.system.entry.js.map → p-312fcf55.system.entry.js.map} +1 -1
- package/dist/swisspost-internet-header/p-334412b2.entry.js +2 -0
- package/dist/swisspost-internet-header/p-334412b2.entry.js.map +1 -0
- package/dist/swisspost-internet-header/p-334616bc.system.entry.js +2 -0
- package/dist/swisspost-internet-header/{p-0bfadd54.system.entry.js.map → p-334616bc.system.entry.js.map} +1 -1
- package/dist/swisspost-internet-header/p-37872478.entry.js +7 -0
- package/dist/swisspost-internet-header/p-37872478.entry.js.map +1 -0
- package/dist/swisspost-internet-header/p-4da084d9.entry.js +2 -0
- package/dist/swisspost-internet-header/{p-273fd39b.entry.js.map → p-4da084d9.entry.js.map} +1 -1
- package/dist/swisspost-internet-header/p-5d893017.system.js +1 -1
- package/dist/swisspost-internet-header/p-5d893017.system.js.map +1 -1
- package/dist/swisspost-internet-header/p-77426673.entry.js +2 -0
- package/dist/swisspost-internet-header/{p-0dd2de97.entry.js.map → p-77426673.entry.js.map} +1 -1
- package/dist/swisspost-internet-header/p-7ddfd160.entry.js +2 -0
- package/dist/swisspost-internet-header/p-7ddfd160.entry.js.map +1 -0
- package/dist/swisspost-internet-header/p-8120031d.system.entry.js +2 -0
- package/dist/swisspost-internet-header/{p-3c8504b4.system.entry.js.map → p-8120031d.system.entry.js.map} +1 -1
- package/dist/swisspost-internet-header/p-935c70e1.js +2 -0
- package/dist/swisspost-internet-header/p-935c70e1.js.map +1 -0
- package/dist/swisspost-internet-header/p-95a1384f.system.entry.js +2 -0
- package/dist/swisspost-internet-header/p-95a1384f.system.entry.js.map +1 -0
- package/dist/swisspost-internet-header/p-b5937320.entry.js +2 -0
- package/dist/swisspost-internet-header/p-b5937320.entry.js.map +1 -0
- package/dist/swisspost-internet-header/p-c291d766.system.entry.js +2 -0
- package/dist/swisspost-internet-header/{p-131078ce.system.entry.js.map → p-c291d766.system.entry.js.map} +1 -1
- package/dist/swisspost-internet-header/p-cfc4dbfd.entry.js +2 -0
- package/dist/swisspost-internet-header/{p-51c15273.entry.js.map → p-cfc4dbfd.entry.js.map} +1 -1
- package/dist/swisspost-internet-header/p-d4106bf6.system.entry.js +2 -0
- package/dist/swisspost-internet-header/{p-a366648c.system.entry.js.map → p-d4106bf6.system.entry.js.map} +1 -1
- package/dist/swisspost-internet-header/swisspost-internet-header.css +2 -4
- package/dist/swisspost-internet-header/swisspost-internet-header.esm.js +1 -1
- package/dist/swisspost-internet-header/swisspost-internet-header.esm.js.map +1 -1
- package/dist/types/assets/i18n/translations.d.ts +5 -0
- package/dist/types/components/post-internet-breadcrumbs/post-internet-breadcrumbs.d.ts +13 -4
- package/dist/types/components/post-internet-header/post-internet-header.d.ts +4 -3
- package/dist/types/components/post-klp-login-widget/post-klp-login-widget.d.ts +1 -1
- package/dist/types/components/post-search/post-search.d.ts +6 -0
- package/dist/types/components/post-skiplinks/post-skiplinks.d.ts +1 -1
- package/dist/types/components.d.ts +19 -6
- package/dist/types/services/language.service.d.ts +7 -5
- package/dist/types/utils/scrollparent.d.ts +1 -0
- package/package.json +13 -12
- package/dist/cjs/language.service-9334ca5d.js.map +0 -1
- package/dist/esm/language.service-bd0f3b6f.js.map +0 -1
- package/dist/esm-es5/language.service-bd0f3b6f.js +0 -2
- package/dist/esm-es5/language.service-bd0f3b6f.js.map +0 -1
- package/dist/swisspost-internet-header/p-06d32a28.entry.js +0 -7
- package/dist/swisspost-internet-header/p-06d32a28.entry.js.map +0 -1
- package/dist/swisspost-internet-header/p-0bfadd54.system.entry.js +0 -2
- package/dist/swisspost-internet-header/p-0dd2de97.entry.js +0 -2
- package/dist/swisspost-internet-header/p-1078e964.system.entry.js +0 -2
- package/dist/swisspost-internet-header/p-1078e964.system.entry.js.map +0 -1
- package/dist/swisspost-internet-header/p-131078ce.system.entry.js +0 -2
- package/dist/swisspost-internet-header/p-262611f7.entry.js +0 -2
- package/dist/swisspost-internet-header/p-262611f7.entry.js.map +0 -1
- package/dist/swisspost-internet-header/p-273fd39b.entry.js +0 -2
- package/dist/swisspost-internet-header/p-3c8504b4.system.entry.js +0 -2
- package/dist/swisspost-internet-header/p-4099b274.system.js +0 -2
- package/dist/swisspost-internet-header/p-4099b274.system.js.map +0 -1
- package/dist/swisspost-internet-header/p-51c15273.entry.js +0 -2
- package/dist/swisspost-internet-header/p-5baac371.system.entry.js +0 -2
- package/dist/swisspost-internet-header/p-5baac371.system.entry.js.map +0 -1
- package/dist/swisspost-internet-header/p-64e1182b.entry.js +0 -2
- package/dist/swisspost-internet-header/p-64e1182b.entry.js.map +0 -1
- package/dist/swisspost-internet-header/p-6bb07a80.entry.js +0 -2
- package/dist/swisspost-internet-header/p-6f69aff4.system.entry.js +0 -2
- package/dist/swisspost-internet-header/p-6f69aff4.system.entry.js.map +0 -1
- package/dist/swisspost-internet-header/p-7bed0797.js +0 -2
- package/dist/swisspost-internet-header/p-7bed0797.js.map +0 -1
- package/dist/swisspost-internet-header/p-97c90e22.system.entry.js +0 -7
- package/dist/swisspost-internet-header/p-97c90e22.system.entry.js.map +0 -1
- package/dist/swisspost-internet-header/p-9ab24fb3.entry.js +0 -2
- package/dist/swisspost-internet-header/p-9ec1f474.entry.js +0 -2
- package/dist/swisspost-internet-header/p-9ec1f474.entry.js.map +0 -1
- package/dist/swisspost-internet-header/p-a366648c.system.entry.js +0 -2
- package/dist/swisspost-internet-header/p-e2df6e93.system.entry.js +0 -2
- package/dist/swisspost-internet-header/p-f531c1ea.entry.js +0 -2
- package/dist/swisspost-internet-header/p-f531c1ea.entry.js.map +0 -1
- package/dist/swisspost-internet-header/p-fed8d74d.system.entry.js +0 -2
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{s as e}from"./p-459c3983.js";const n={"Active navigation element":{de:"Aktives Navigationselement",fr:"Élément de navigation actif",it:"Elemento di navigazione attivo"},"Close overlay":{de:"Overlay Schliessen",fr:"Fermer la superposition",it:"Chiudi sovrapposizione"},"Current language is English":{de:"Die aktuelle Sprache ist Deutsch",fr:"La langue actuelle est le français",it:"La lingua corrente è l'italiano"},"Change language":{de:"Sprache wechseln",fr:"Changer de langue",it:"Cambia lingua"},"Go to main content":{de:"Zum Hauptinhalt springen",fr:"Aller au contenu principal",it:"Vai al contenuto principale"},"Go to search":{de:"Zur Suche springen",fr:"Aller à la recherche",it:"Vai alla ricerca"},"Go to login":{de:"Zum Login springen",fr:"Aller au login",it:"Vai al login"},"Open menu":{de:"Menü öffnen",fr:"Ouvrir le menu",it:"Apri il menu"},"Navigate on post.ch":{de:"Navigieren auf post.ch",fr:"Naviguer sur post.ch",it:"Navigate su post.ch"},"Skip Links":{de:"Sprung Links",fr:"Sauter les liens",it:"Salta i link"},"Intermediary links":{de:"Intermediäre Links",fr:"Liens intermédiaires",it:"Collegamenti intermedi"},"Cookie Settings":{de:"Cookie-Einstellungen",fr:"Configurations des cookies",it:"Impostazioni dei cookie"},"Delete search term":{de:"Suchbegriff löschen",fr:"Supprimer le terme de recherche",it:"Elimina termine di ricerca"}};const i=(n,i,t,o)=>{if(n.length===0){return"de"}if(n.length===1){return n[0]}const l=new URL(window.location.href);let s=[i,l.searchParams.get("lang"),l.pathname.split("/").find((e=>n.includes(e))),t!==undefined?window.localStorage.getItem(t):null,r("language"),r("lang"),o!==undefined?r(o):null,document.documentElement.lang,a(n),e.currentLanguage].filter((e=>!!e));const u=s.find((e=>n.includes(e)))||n[0];if(!u||u.length!==2){throw new Error(`Current language could not be determined from settings or the language provided (${u}) is not supported by the Header API.`)}return u};const t=(n,i,t)=>{if(t!==undefined){window.localStorage.setItem(t,n)}if(i!==undefined){o(i,n)}e.currentLanguage=n};const r=e=>{var n;return((n=document.cookie.match("(^|;)\\s*"+e+"\\s*=\\s*([^;]+)"))===null||n===void 0?void 0:n.pop())||""};const o=(e,n)=>{document.cookie=`${encodeURIComponent(e)}=${encodeURIComponent(n)}`};const a=e=>{if(navigator.language){const n=l(navigator.language);if(e.indexOf(n)!==-1){return n}}if(navigator.languages){for(const n of navigator.languages){const i=l(n);if(e.indexOf(i)!==-1){return i}}}return null};const l=e=>e.substring(0,2).toLowerCase();const s=(i,t,r=n)=>{var o,a,l;return(l=(o=r[i])===null||o===void 0?void 0:o[(a=t!==null&&t!==void 0?t:e.currentLanguage)!==null&&a!==void 0?a:""])!==null&&l!==void 0?l:i};export{i as g,t as p,s as t};
|
|
2
|
+
//# sourceMappingURL=p-935c70e1.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["translations","de","fr","it","getUserLang","supportedLanguages","implementorPreferredLanguage","localStorageKey","cookieKey","length","url","URL","window","location","href","languagesSet","searchParams","get","pathname","split","find","segment","includes","undefined","localStorage","getItem","getCookie","document","documentElement","lang","getPreferredLanguageFromBrowser","state","currentLanguage","filter","language","Error","persistLanguageChoice","setItem","setCookie","name","_a","cookie","match","pop","key","value","encodeURIComponent","navigator","extractLanguage","indexOf","languages","l","substring","toLowerCase","translate","translationObject","_b","_c"],"sources":["./src/assets/i18n/translations.ts","./src/services/language.service.ts"],"sourcesContent":["export const translations = {\n 'Active navigation element': {\n de: 'Aktives Navigationselement',\n fr: 'Élément de navigation actif',\n it: 'Elemento di navigazione attivo',\n },\n 'Close overlay': {\n de: 'Overlay Schliessen',\n fr: 'Fermer la superposition',\n it: 'Chiudi sovrapposizione',\n },\n 'Current language is English': {\n de: 'Die aktuelle Sprache ist Deutsch',\n fr: 'La langue actuelle est le français',\n it: \"La lingua corrente è l'italiano\",\n },\n 'Change language': {\n de: 'Sprache wechseln',\n fr: 'Changer de langue',\n it: 'Cambia lingua',\n },\n 'Go to main content': {\n de: 'Zum Hauptinhalt springen',\n fr: 'Aller au contenu principal',\n it: 'Vai al contenuto principale',\n },\n 'Go to search': {\n de: 'Zur Suche springen',\n fr: 'Aller à la recherche',\n it: 'Vai alla ricerca',\n },\n 'Go to login': {\n de: 'Zum Login springen',\n fr: 'Aller au login',\n it: 'Vai al login',\n },\n 'Open menu': {\n de: 'Menü öffnen',\n fr: 'Ouvrir le menu',\n it: 'Apri il menu',\n },\n 'Navigate on post.ch': {\n de: 'Navigieren auf post.ch',\n fr: 'Naviguer sur post.ch',\n it: 'Navigate su post.ch',\n },\n 'Skip Links': {\n de: 'Sprung Links',\n fr: 'Sauter les liens',\n it: 'Salta i link',\n },\n 'Intermediary links': {\n de: 'Intermediäre Links',\n fr: 'Liens intermédiaires',\n it: 'Collegamenti intermedi',\n },\n 'Cookie Settings': {\n de: 'Cookie-Einstellungen',\n fr: 'Configurations des cookies',\n it: 'Impostazioni dei cookie',\n },\n 'Delete search term': {\n de: 'Suchbegriff löschen',\n fr: 'Supprimer le terme de recherche',\n it: 'Elimina termine di ricerca',\n },\n};\n","import { translations } from '../assets/i18n/translations';\nimport { state } from '../data/store';\n\nexport const getUserLang = (\n supportedLanguages: string[],\n implementorPreferredLanguage?: string,\n localStorageKey?: string,\n cookieKey?: string,\n) => {\n // If there are no supported languages, well...\n if (supportedLanguages.length === 0) {\n return 'de';\n }\n\n // If there is only one language in the config, use this\n if (supportedLanguages.length === 1) {\n return supportedLanguages[0];\n }\n\n const url = new URL(window.location.href);\n\n /**\n * Build array of possible language definitions in order of importance.\n * At the end is a filter function that will weed out any undefined or null entries.\n */\n let languagesSet: Array<string> = [\n // Check if implementor overrides lang config\n implementorPreferredLanguage,\n\n // Check query string param\n url.searchParams.get('lang'),\n\n // Check url pathname\n url.pathname.split('/').find(segment => supportedLanguages.includes(segment)),\n\n // Check local storage with the key provided\n localStorageKey !== undefined ? window.localStorage.getItem(localStorageKey) : null,\n\n // Check cookies\n getCookie('language'),\n getCookie('lang'),\n cookieKey !== undefined ? getCookie(cookieKey) : null,\n\n // Check document language\n document.documentElement.lang,\n\n // Check browser preferred language\n getPreferredLanguageFromBrowser(supportedLanguages),\n\n // Check the state\n state.currentLanguage,\n ].filter((lang): lang is string => !!lang);\n\n // Check the set of languages to see if it matches\n // any of the supported languages. Return the first\n // supported language if there is none set\n const lang =\n languagesSet.find(language => supportedLanguages.includes(language)) || supportedLanguages[0];\n\n if (!lang || lang.length !== 2) {\n throw new Error(\n `Current language could not be determined from settings or the language provided (${lang}) is not supported by the Header API.`,\n );\n }\n\n return lang;\n};\n\n/**\n * Persist chosen language to local storage\n * @param lang Currently chose language, two char string\n */\nexport const persistLanguageChoice = (\n lang: string,\n cookieKey?: string,\n localStorageKey?: string,\n) => {\n if (localStorageKey !== undefined) {\n window.localStorage.setItem(localStorageKey, lang);\n }\n\n if (cookieKey !== undefined) {\n setCookie(cookieKey, lang);\n }\n\n state.currentLanguage = lang;\n};\n\n/**\n * Read a cookie by name\n * https://stackoverflow.com/questions/5639346/what-is-the-shortest-function-for-reading-a-cookie-by-name-in-javascript?rq=1\n * @param name Cookie name\n * @returns Cookie value or an empty string\n */\nexport const getCookie = (name: string) => {\n return document.cookie.match('(^|;)\\\\s*' + name + '\\\\s*=\\\\s*([^;]+)')?.pop() || '';\n};\n\n/**\n * Write a new cookie\n * https://developer.mozilla.org/en-US/docs/Web/API/document/cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support\n * @param key\n * @param value\n */\nexport const setCookie = (key: string, value: string) => {\n document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;\n};\n\nconst getPreferredLanguageFromBrowser = (supportedLanguages: string[]): string | null => {\n // IE & Chrome\n if (navigator.language) {\n const lang = extractLanguage(navigator.language);\n if (supportedLanguages.indexOf(lang) !== -1) {\n return lang;\n }\n }\n\n // Chrome supports a list of preferred languages: if the preferred is not supported, we go down the list.\n if (navigator.languages) {\n for (const l of navigator.languages) {\n const lang = extractLanguage(l);\n if (supportedLanguages.indexOf(lang) !== -1) {\n return lang;\n }\n }\n }\n\n return null;\n};\n\nconst extractLanguage = (language: string): string => language.substring(0, 2).toLowerCase();\n\n/**\n * Simple translate function for general header UI strings\n *\n * @param key Translation key\n * @param lang Force a language\n * @param translationObject Optionally provide translations\n * @returns Translated string or the key\n */\nexport const translate = (key: string, lang?: string, translationObject = translations) =>\n translationObject[key]?.[lang ?? state.currentLanguage ?? ''] ?? key;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
System.register(["./p-1d455921.system.js","./p-1ec4e0ee.system.js","./p-194475b8.system.js","./p-55bfdf22.system.js"],(function(n){"use strict";var t,i,e,o,s,l,r;return{setters:[function(n){t=n.r;i=n.h;e=n.H;o=n.g},function(n){s=n.s},function(n){l=n.t},function(n){r=n.S}],execute:function(){var a=":host{display:block}.skiplinks a{position:absolute;top:.5rem;left:.5rem;clip:rect(0 0 0 0);width:1px;overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:.25rem;background:#fff}.skiplinks a:focus-visible{position:absolute;clip:unset;width:auto}";var u=n("post_skiplinks",function(){function n(n){t(this,n)}n.prototype.getMainId=function(){var n;return(n=document.querySelector("main[id]"))===null||n===void 0?void 0:n.getAttribute("id")};n.prototype.setFocus=function(n){var t=this.host.closest(".post-internet-header");if(!t){return}var i=t.querySelector(n);if(i){i.setFocus()}};n.prototype.focusMain=function(){this.setFocus("post-main-navigation")};n.prototype.focusSearch=function(){this.setFocus("post-search")};n.prototype.focusLogin=function(){this.setFocus("post-klp-login-widget")};n.prototype.render=function(){var n=this;var t;var o=(t=s.localizedConfig)===null||t===void 0?void 0:t.header;var a=this.getMainId();if(o===undefined){return}return i(e,null,i("div",{class:"skiplinks"},i("ul",{class:"no-list","aria-label":l("Skip Links")},i("li",null,i("a",{class:"nav-link",href:o.logo.logoLink},i("span",null,o.logo.logoLinkTitle),i(r,{name:"pi-pointy-arrow-right"}))),i("li",null,i("a",{class:"nav-link",href:"#post-internet-header-main-navigation",onClick:function(){return n.focusMain()}},i("span",null,o.translations.navMainAriaLabel),i(r,{name:"pi-pointy-arrow-right"}))),a?i("li",null,i("a",{class:"nav-link",href:"#".concat(a)},i("span",null,l("Go to main content")),i(r,{name:"pi-pointy-arrow-right"}))):null,s.search?i("li",null,i("a",{class:"nav-link",href:"#post-internet-header-search-button",onClick:function(){return n.focusSearch()}},i("span",null,l("Go to search")),i(r,{name:"pi-pointy-arrow-right"}))):null,s.login?i("li",null,i("a",{class:"nav-link",href:"#post-klp-login-widget",onClick:function(){return n.focusLogin()}},i("span",null,l("Go to login")),i(r,{name:"pi-pointy-arrow-right"}))):null)))};Object.defineProperty(n.prototype,"host",{get:function(){return o(this)},enumerable:false,configurable:true});return n}());u.style=a}}}));
|
|
2
|
+
//# sourceMappingURL=p-95a1384f.system.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["postSkiplinksCss","PostSkiplinks","exports","class_1","prototype","getMainId","_a","document","querySelector","getAttribute","setFocus","tagname","rootHost","this","host","closest","focusable","focusMain","focusSearch","focusLogin","render","_this","config","state","localizedConfig","header","mainId","undefined","h","Host","class","translate","href","logo","logoLink","logoLinkTitle","SvgIcon","name","onClick","translations","navMainAriaLabel","concat","search","login"],"sources":["src/components/post-skiplinks/post-skiplinks.scss?tag=post-skiplinks","src/components/post-skiplinks/post-skiplinks.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.skiplinks {\n a {\n position: absolute;\n top: 0.5rem;\n left: 0.5rem;\n clip: rect(0 0 0 0);\n width: 1px;\n overflow: hidden;\n display: flex;\n align-items: center;\n padding: 0.25rem;\n background: white;\n\n &:focus-visible {\n position: absolute;\n clip: unset;\n width: auto;\n }\n }\n}\n","import { Component, Element, h, Host } from '@stencil/core';\nimport { state } from '../../data/store';\nimport { FocusableElement } from '../../models/header.model';\nimport { translate } from '../../services/language.service';\nimport { SvgIcon } from '../../utils/svg-icon.component';\n\n@Component({\n tag: 'post-skiplinks',\n styleUrl: 'post-skiplinks.scss',\n shadow: false,\n})\nexport class PostSkiplinks {\n @Element() host: HTMLPostSkiplinksElement;\n\n private getMainId() {\n return document.querySelector('main[id]')?.getAttribute('id');\n }\n\n private setFocus(tagname: string) {\n const rootHost = this.host.closest('.post-internet-header');\n if (!rootHost) {\n return;\n }\n\n const focusable = rootHost.querySelector<FocusableElement>(tagname);\n if (focusable) {\n focusable.setFocus();\n }\n }\n\n private focusMain() {\n this.setFocus('post-main-navigation');\n }\n\n private focusSearch() {\n this.setFocus('post-search');\n }\n\n private focusLogin() {\n this.setFocus('post-klp-login-widget');\n }\n\n render() {\n const config = state.localizedConfig?.header;\n const mainId = this.getMainId();\n\n if (config === undefined) {\n return;\n }\n\n return (\n <Host>\n <div class=\"skiplinks\">\n <ul class=\"no-list\" aria-label={translate('Skip Links')}>\n <li>\n <a class=\"nav-link\" href={config.logo.logoLink}>\n <span>{config.logo.logoLinkTitle}</span>\n <SvgIcon name=\"pi-pointy-arrow-right\" />\n </a>\n </li>\n <li>\n <a\n class=\"nav-link\"\n href=\"#post-internet-header-main-navigation\"\n onClick={() => this.focusMain()}\n >\n <span>{config.translations.navMainAriaLabel}</span>\n <SvgIcon name=\"pi-pointy-arrow-right\" />\n </a>\n </li>\n {mainId ? (\n <li>\n <a class=\"nav-link\" href={`#${mainId}`}>\n <span>{translate('Go to main content')}</span>\n <SvgIcon name=\"pi-pointy-arrow-right\" />\n </a>\n </li>\n ) : null}\n {state.search ? (\n <li>\n <a\n class=\"nav-link\"\n href=\"#post-internet-header-search-button\"\n onClick={() => this.focusSearch()}\n >\n <span>{translate('Go to search')}</span>\n <SvgIcon name=\"pi-pointy-arrow-right\" />\n </a>\n </li>\n ) : null}\n {state.login ? (\n <li>\n <a class=\"nav-link\" href=\"#post-klp-login-widget\" onClick={() => this.focusLogin()}>\n <span>{translate('Go to login')}</span>\n <SvgIcon name=\"pi-pointy-arrow-right\" />\n </a>\n </li>\n ) : null}\n </ul>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"oSAAA,IAAMA,EAAmB,oS,ICWZC,EAAaC,EAAA,4B,wBAGhBC,EAAAC,UAAAC,UAAA,W,MACN,OAAOC,EAAAC,SAASC,cAAc,eAAW,MAAAF,SAAA,SAAAA,EAAEG,aAAa,K,EAGlDN,EAAAC,UAAAM,SAAA,SAASC,GACf,IAAMC,EAAWC,KAAKC,KAAKC,QAAQ,yBACnC,IAAKH,EAAU,CACb,M,CAGF,IAAMI,EAAYJ,EAASJ,cAAgCG,GAC3D,GAAIK,EAAW,CACbA,EAAUN,U,GAINP,EAAAC,UAAAa,UAAA,WACNJ,KAAKH,SAAS,uB,EAGRP,EAAAC,UAAAc,YAAA,WACNL,KAAKH,SAAS,c,EAGRP,EAAAC,UAAAe,WAAA,WACNN,KAAKH,SAAS,wB,EAGhBP,EAAAC,UAAAgB,OAAA,eAAAC,EAAAR,K,MACE,IAAMS,GAAShB,EAAAiB,EAAMC,mBAAe,MAAAlB,SAAA,SAAAA,EAAEmB,OACtC,IAAMC,EAASb,KAAKR,YAEpB,GAAIiB,IAAWK,UAAW,CACxB,M,CAGF,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAM,aACTF,EAAA,MAAIE,MAAM,UAAS,aAAaC,EAAU,eACxCH,EAAA,UACEA,EAAA,KAAGE,MAAM,WAAWE,KAAMV,EAAOW,KAAKC,UACpCN,EAAA,YAAON,EAAOW,KAAKE,eACnBP,EAACQ,EAAO,CAACC,KAAK,4BAGlBT,EAAA,UACEA,EAAA,KACEE,MAAM,WACNE,KAAK,wCACLM,QAAS,WAAM,OAAAjB,EAAKJ,WAAL,GAEfW,EAAA,YAAON,EAAOiB,aAAaC,kBAC3BZ,EAACQ,EAAO,CAACC,KAAK,4BAGjBX,EACCE,EAAA,UACEA,EAAA,KAAGE,MAAM,WAAWE,KAAM,IAAAS,OAAIf,IAC5BE,EAAA,YAAOG,EAAU,uBACjBH,EAACQ,EAAO,CAACC,KAAK,4BAGhB,KACHd,EAAMmB,OACLd,EAAA,UACEA,EAAA,KACEE,MAAM,WACNE,KAAK,sCACLM,QAAS,WAAM,OAAAjB,EAAKH,aAAL,GAEfU,EAAA,YAAOG,EAAU,iBACjBH,EAACQ,EAAO,CAACC,KAAK,4BAGhB,KACHd,EAAMoB,MACLf,EAAA,UACEA,EAAA,KAAGE,MAAM,WAAWE,KAAK,yBAAyBM,QAAS,WAAM,OAAAjB,EAAKF,YAAL,GAC/DS,EAAA,YAAOG,EAAU,gBACjBH,EAACQ,EAAO,CAACC,KAAK,4BAGhB,O,yHAtFU,I"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as i,h as n,H as s,g as t}from"./p-8e0a4d18.js";import{s as l}from"./p-459c3983.js";import{t as o}from"./p-935c70e1.js";import{S as a}from"./p-11d05acc.js";const e=":host{display:block}.skiplinks a{position:absolute;top:.5rem;left:.5rem;clip:rect(0 0 0 0);width:1px;overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:.25rem;background:#fff}.skiplinks a:focus-visible{position:absolute;clip:unset;width:auto}";const r=class{constructor(n){i(this,n)}getMainId(){var i;return(i=document.querySelector("main[id]"))===null||i===void 0?void 0:i.getAttribute("id")}setFocus(i){const n=this.host.closest(".post-internet-header");if(!n){return}const s=n.querySelector(i);if(s){s.setFocus()}}focusMain(){this.setFocus("post-main-navigation")}focusSearch(){this.setFocus("post-search")}focusLogin(){this.setFocus("post-klp-login-widget")}render(){var i;const t=(i=l.localizedConfig)===null||i===void 0?void 0:i.header;const e=this.getMainId();if(t===undefined){return}return n(s,null,n("div",{class:"skiplinks"},n("ul",{class:"no-list","aria-label":o("Skip Links")},n("li",null,n("a",{class:"nav-link",href:t.logo.logoLink},n("span",null,t.logo.logoLinkTitle),n(a,{name:"pi-pointy-arrow-right"}))),n("li",null,n("a",{class:"nav-link",href:"#post-internet-header-main-navigation",onClick:()=>this.focusMain()},n("span",null,t.translations.navMainAriaLabel),n(a,{name:"pi-pointy-arrow-right"}))),e?n("li",null,n("a",{class:"nav-link",href:`#${e}`},n("span",null,o("Go to main content")),n(a,{name:"pi-pointy-arrow-right"}))):null,l.search?n("li",null,n("a",{class:"nav-link",href:"#post-internet-header-search-button",onClick:()=>this.focusSearch()},n("span",null,o("Go to search")),n(a,{name:"pi-pointy-arrow-right"}))):null,l.login?n("li",null,n("a",{class:"nav-link",href:"#post-klp-login-widget",onClick:()=>this.focusLogin()},n("span",null,o("Go to login")),n(a,{name:"pi-pointy-arrow-right"}))):null)))}get host(){return t(this)}};r.style=e;export{r as post_skiplinks};
|
|
2
|
+
//# sourceMappingURL=p-b5937320.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["postSkiplinksCss","PostSkiplinks","getMainId","_a","document","querySelector","getAttribute","setFocus","tagname","rootHost","this","host","closest","focusable","focusMain","focusSearch","focusLogin","render","config","state","localizedConfig","header","mainId","undefined","h","Host","class","translate","href","logo","logoLink","logoLinkTitle","SvgIcon","name","onClick","translations","navMainAriaLabel","search","login"],"sources":["./src/components/post-skiplinks/post-skiplinks.scss?tag=post-skiplinks","./src/components/post-skiplinks/post-skiplinks.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.skiplinks {\n a {\n position: absolute;\n top: 0.5rem;\n left: 0.5rem;\n clip: rect(0 0 0 0);\n width: 1px;\n overflow: hidden;\n display: flex;\n align-items: center;\n padding: 0.25rem;\n background: white;\n\n &:focus-visible {\n position: absolute;\n clip: unset;\n width: auto;\n }\n }\n}\n","import { Component, Element, h, Host } from '@stencil/core';\nimport { state } from '../../data/store';\nimport { FocusableElement } from '../../models/header.model';\nimport { translate } from '../../services/language.service';\nimport { SvgIcon } from '../../utils/svg-icon.component';\n\n@Component({\n tag: 'post-skiplinks',\n styleUrl: 'post-skiplinks.scss',\n shadow: false,\n})\nexport class PostSkiplinks {\n @Element() host: HTMLPostSkiplinksElement;\n\n private getMainId() {\n return document.querySelector('main[id]')?.getAttribute('id');\n }\n\n private setFocus(tagname: string) {\n const rootHost = this.host.closest('.post-internet-header');\n if (!rootHost) {\n return;\n }\n\n const focusable = rootHost.querySelector<FocusableElement>(tagname);\n if (focusable) {\n focusable.setFocus();\n }\n }\n\n private focusMain() {\n this.setFocus('post-main-navigation');\n }\n\n private focusSearch() {\n this.setFocus('post-search');\n }\n\n private focusLogin() {\n this.setFocus('post-klp-login-widget');\n }\n\n render() {\n const config = state.localizedConfig?.header;\n const mainId = this.getMainId();\n\n if (config === undefined) {\n return;\n }\n\n return (\n <Host>\n <div class=\"skiplinks\">\n <ul class=\"no-list\" aria-label={translate('Skip Links')}>\n <li>\n <a class=\"nav-link\" href={config.logo.logoLink}>\n <span>{config.logo.logoLinkTitle}</span>\n <SvgIcon name=\"pi-pointy-arrow-right\" />\n </a>\n </li>\n <li>\n <a\n class=\"nav-link\"\n href=\"#post-internet-header-main-navigation\"\n onClick={() => this.focusMain()}\n >\n <span>{config.translations.navMainAriaLabel}</span>\n <SvgIcon name=\"pi-pointy-arrow-right\" />\n </a>\n </li>\n {mainId ? (\n <li>\n <a class=\"nav-link\" href={`#${mainId}`}>\n <span>{translate('Go to main content')}</span>\n <SvgIcon name=\"pi-pointy-arrow-right\" />\n </a>\n </li>\n ) : null}\n {state.search ? (\n <li>\n <a\n class=\"nav-link\"\n href=\"#post-internet-header-search-button\"\n onClick={() => this.focusSearch()}\n >\n <span>{translate('Go to search')}</span>\n <SvgIcon name=\"pi-pointy-arrow-right\" />\n </a>\n </li>\n ) : null}\n {state.login ? (\n <li>\n <a class=\"nav-link\" href=\"#post-klp-login-widget\" onClick={() => this.focusLogin()}>\n <span>{translate('Go to login')}</span>\n <SvgIcon name=\"pi-pointy-arrow-right\" />\n </a>\n </li>\n ) : null}\n </ul>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"qKAAA,MAAMA,EAAmB,oS,MCWZC,EAAa,M,yBAGhBC,Y,MACN,OAAOC,EAAAC,SAASC,cAAc,eAAW,MAAAF,SAAA,SAAAA,EAAEG,aAAa,K,CAGlDC,SAASC,GACf,MAAMC,EAAWC,KAAKC,KAAKC,QAAQ,yBACnC,IAAKH,EAAU,CACb,M,CAGF,MAAMI,EAAYJ,EAASJ,cAAgCG,GAC3D,GAAIK,EAAW,CACbA,EAAUN,U,EAINO,YACNJ,KAAKH,SAAS,uB,CAGRQ,cACNL,KAAKH,SAAS,c,CAGRS,aACNN,KAAKH,SAAS,wB,CAGhBU,S,MACE,MAAMC,GAASf,EAAAgB,EAAMC,mBAAe,MAAAjB,SAAA,SAAAA,EAAEkB,OACtC,MAAMC,EAASZ,KAAKR,YAEpB,GAAIgB,IAAWK,UAAW,CACxB,M,CAGF,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAM,aACTF,EAAA,MAAIE,MAAM,UAAS,aAAaC,EAAU,eACxCH,EAAA,UACEA,EAAA,KAAGE,MAAM,WAAWE,KAAMV,EAAOW,KAAKC,UACpCN,EAAA,YAAON,EAAOW,KAAKE,eACnBP,EAACQ,EAAO,CAACC,KAAK,4BAGlBT,EAAA,UACEA,EAAA,KACEE,MAAM,WACNE,KAAK,wCACLM,QAAS,IAAMxB,KAAKI,aAEpBU,EAAA,YAAON,EAAOiB,aAAaC,kBAC3BZ,EAACQ,EAAO,CAACC,KAAK,4BAGjBX,EACCE,EAAA,UACEA,EAAA,KAAGE,MAAM,WAAWE,KAAM,IAAIN,KAC5BE,EAAA,YAAOG,EAAU,uBACjBH,EAACQ,EAAO,CAACC,KAAK,4BAGhB,KACHd,EAAMkB,OACLb,EAAA,UACEA,EAAA,KACEE,MAAM,WACNE,KAAK,sCACLM,QAAS,IAAMxB,KAAKK,eAEpBS,EAAA,YAAOG,EAAU,iBACjBH,EAACQ,EAAO,CAACC,KAAK,4BAGhB,KACHd,EAAMmB,MACLd,EAAA,UACEA,EAAA,KAAGE,MAAM,WAAWE,KAAK,yBAAyBM,QAAS,IAAMxB,KAAKM,cACpEQ,EAAA,YAAOG,EAAU,gBACjBH,EAACQ,EAAO,CAACC,KAAK,4BAGhB,O"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var __awaiter=this&&this.__awaiter||function(t,e,n,o){function i(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,r){function a(t){try{l(o.next(t))}catch(t){r(t)}}function s(t){try{l(o["throw"](t))}catch(t){r(t)}}function l(t){t.done?n(t.value):i(t.value).then(a,s)}l((o=o.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},o,i,r,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(e){return l([t,e])}}function l(s){if(o)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(n=0)),n)try{if(o=1,i&&(r=s[0]&2?i["return"]:s[0]?i["throw"]||((r=i["return"])&&r.call(i),0):i.next)&&!(r=r.call(i,s[1])).done)return r;if(i=0,r)s=[s[0]&2,r.value];switch(s[0]){case 0:case 1:r=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;i=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(r=n.trys,r=r.length>0&&r[r.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!r||s[1]>r[0]&&s[1]<r[3])){n.label=s[1];break}if(s[0]===6&&n.label<r[1]){n.label=r[1];r=s;break}if(r&&n.label<r[2]){n.label=r[2];n.ops.push(s);break}if(r[2])n.ops.pop();n.trys.pop();continue}s=e.call(t,n)}catch(t){s=[6,t];i=0}finally{o=r=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};System.register(["./p-1d455921.system.js","./p-fb82b748.system.js","./p-55bfdf22.system.js","./p-1ec4e0ee.system.js","./p-88aac12c.system.js","./p-194475b8.system.js"],(function(t){"use strict";var e,n,o,i,r,a,s,l,f,d,u;return{setters:[function(t){e=t.h;n=t.r;o=t.c;i=t.H;r=t.g},function(t){a=t.S},function(t){s=t.S},function(t){l=t.s},function(t){f=t.e;d=t.u},function(t){u=t.t}],execute:function(){var g=function(t){var n;if(((n=l.localizedConfig)===null||n===void 0?void 0:n.header)===undefined)return;var o=l.localizedConfig.header;return e("nav",{class:"language-switch-dropdown",ref:function(e){return t.dropdownRef(e)},"aria-label":o.translations.navLangAriaLabel},e("ul",{"aria-label":u("Change language")},t.navLang.filter((function(t){return!t.isCurrent})).map((function(n){var o=n.url?"a":"button";return e("li",{key:n.lang},e(o,{onClick:function(){return t.switchLanguage(n)},href:n.url,lang:n.lang,title:n.title},e("span",{class:"visually-hidden"},n.title),e("span",{"aria-hidden":"true"},n.text)))}))))};var p='@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:700;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:700;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:400;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:400;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:300;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:300;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff") format("woff")}.visually-hidden{position:absolute;width:1px;height:1px;border:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}.btn-blank{background-color:rgba(0,0,0,0);border:none;border-radius:0;padding:0}.nav-link,.language-switch-dropdown a,.language-switch-dropdown button{outline:none;outline-offset:2px;text-decoration:none;color:rgba(0,0,0,.8);-webkit-transition:color 200ms;transition:color 200ms;background-color:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;border:0;margin:0;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:.5rem}.nav-link:is(:focus-visible,:focus-within,.pretend-focus),.language-switch-dropdown a:is(:focus-visible,:focus-within,.pretend-focus),.language-switch-dropdown button:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color)}.nav-link:hover,.language-switch-dropdown a:hover,.language-switch-dropdown button:hover,.nav-link:focus,.language-switch-dropdown a:focus,.language-switch-dropdown button:focus{color:#000}.nav-link:is(:focus-visible,:focus-within,.pretend-focus),.language-switch-dropdown a:is(:focus-visible,:focus-within,.pretend-focus),.language-switch-dropdown button:is(:focus-visible,:focus-within,.pretend-focus){z-index:1;position:relative}.nav-link>svg,.language-switch-dropdown a>svg,.language-switch-dropdown button>svg{width:1.4em;height:1.4em;-ms-flex-negative:0;flex-shrink:0}.nav-link>span,.language-switch-dropdown a>span,.language-switch-dropdown button>span{-ms-flex-negative:1;flex-shrink:1}.no-list,.language-switch-dropdown ul{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:4px;outline:none;outline-offset:2px}a:is(:focus-visible,:focus-within,.pretend-focus),button:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color);border-radius:4px}img,svg{max-width:100%;max-height:100%}@media (forced-colors: active){svg{color:#fff}}.box>*:first-child{margin-top:0}.box>*:last-child{margin-bottom:0}.mirrored{-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{--separator-display:none;--separator-height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch}:host::before{position:relative;content:"";display:var(--separator-display);height:var(--separator-height);border-left:1px solid #e6e6e6}.lang-btn{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:100%;padding:0 1rem;border:none;-webkit-box-shadow:none;box-shadow:none;background:none;text-transform:uppercase;cursor:pointer;color:rgba(0,0,0,.8)}.lang-btn:hover,.lang-btn:focus{color:#000;position:relative;z-index:1}.lang-btn svg{width:1.5em;height:1.5em;-webkit-transition:-webkit-transform 250ms;transition:-webkit-transform 250ms;transition:transform 250ms;transition:transform 250ms, -webkit-transform 250ms}.lang-btn svg.rotated{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.language-switch{position:relative;-ms-flex-item-align:stretch;align-self:stretch;height:100%}.language-switch.list{margin-top:1.5rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.current-language{text-transform:uppercase;border-right:1px solid #ccc;padding:.5rem 1rem .5rem 0}.dropdown .language-switch-dropdown{position:absolute;top:100%;width:100%;background:#fff;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2),0 2px 6px 2px rgba(0,0,0,.1);box-shadow:0 1px 2px rgba(0,0,0,.2),0 2px 6px 2px rgba(0,0,0,.1);z-index:1;-webkit-transform:scale(0.1);transform:scale(0.1);-webkit-transform-origin:center top;transform-origin:center top;-webkit-transition:-webkit-transform .1s;transition:-webkit-transform .1s;transition:transform .1s;transition:transform .1s, -webkit-transform .1s;margin-top:var(--language-dropdown-margin-top)}@media (prefers-reduced-motion: reduce){.dropdown .language-switch-dropdown{-webkit-transition:none;transition:none}}.dropdown .language-switch-dropdown.open{-webkit-transform:scale(1);transform:scale(1)}.list .language-switch-dropdown ul{display:-ms-flexbox;display:flex}.list .language-switch-dropdown ul>li+li{border-left:1px solid #ccc}.language-switch-dropdown a,.language-switch-dropdown button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:3rem;padding:0 .25rem;text-transform:uppercase;cursor:pointer;-webkit-transition:background-color 200ms,color 200ms;transition:background-color 200ms,color 200ms}.language-switch-dropdown a:hover,.language-switch-dropdown a:focus,.language-switch-dropdown button:hover,.language-switch-dropdown button:focus{background:#f4f3f1}.language-switch-dropdown a span,.language-switch-dropdown button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.list .language-switch-dropdown a,.list .language-switch-dropdown button{color:#000;height:auto;padding:.5rem 1rem}';var c=t("post_language_switch",function(){function t(t){n(this,t);this.dropdownToggled=o(this,"dropdownToggled",7);this.languageChanged=o(this,"languageChanged",7);this.mode=undefined;this.langSwitchOpen=false}t.prototype.componentWillUpdate=function(){var t=this;if(this.languageSwitchDropdown&&!this.langSwitchOpen&&this.mode=="dropdown"){this.languageSwitchDropdown.classList.remove("open");if(f(this.languageSwitchDropdown,"transform")&&!d()){return new Promise((function(e){var n;(n=t.languageSwitchDropdown)===null||n===void 0?void 0:n.addEventListener("transitionend",(function(t){if(t.propertyName==="transform"){e(true)}}))}))}}};t.prototype.componentDidUpdate=function(){if(this.languageSwitchDropdown&&this.langSwitchOpen){this.languageSwitchDropdown.getBoundingClientRect();this.languageSwitchDropdown.classList.add("open")}};t.prototype.toggleDropdown=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.langSwitchOpen=t!==null&&t!==void 0?t:!this.langSwitchOpen;this.dropdownToggled.emit({open:this.langSwitchOpen,element:this.host});return[2,this.langSwitchOpen]}))}))};t.prototype.switchLanguage=function(t){this.languageChanged.emit(t.lang);this.toggleDropdown(false)};t.prototype.getMergedLanguageConfig=function(t,e){if(e===undefined){return t}return t.map((function(t){return Object.assign({},t,e.find((function(e){return e.lang===t.lang})))}))};t.prototype.setDropdownRef=function(t){this.languageSwitchDropdown=t};t.prototype.render=function(){var t=this;var n;if(((n=l.localizedConfig)===null||n===void 0?void 0:n.header)===undefined)return;var o=l.localizedConfig.header;var r=this.getMergedLanguageConfig(o.navLang,l.languageSwitchOverrides);return e(i,null,e("div",{class:"language-switch ".concat(this.mode)},e(a,null),this.mode==="dropdown"?e("button",{class:"lang-btn","aria-expanded":"".concat(this.langSwitchOpen),"aria-haspopup":"listbox",onClick:function(){return t.toggleDropdown()}},e("span",{class:"visually-hidden"},o.translations.navLangAriaLabel,", ",u("Current language is English")),e("span",{"aria-hidden":"true"},l.currentLanguage),e(s,{name:"pi-arrow-down",classNames:this.langSwitchOpen?"rotated":""})):e("span",{class:"bold current-language"},e("span",{class:"visually-hidden"},u("Current language is English")),e("span",null,l.currentLanguage)),this.langSwitchOpen||this.mode==="list"?e(g,{navLang:r,switchLanguage:function(e){return t.switchLanguage(e)},dropdownRef:function(e){return e!==undefined&&t.setDropdownRef(e)}}):null))};Object.defineProperty(t.prototype,"host",{get:function(){return r(this)},enumerable:false,configurable:true});return t}());c.style=p}}}));
|
|
2
|
+
//# sourceMappingURL=p-c291d766.system.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["PostLanguageSwitchList","props","_a","state","localizedConfig","header","undefined","config","h","class","ref","e","dropdownRef","translations","navLangAriaLabel","translate","navLang","filter","lang","isCurrent","map","TagName","url","key","onClick","switchLanguage","href","title","text","postLanguageSwitchCss","PostLanguageSwitch","exports","class_1","prototype","componentWillUpdate","_this","this","languageSwitchDropdown","langSwitchOpen","mode","classList","remove","elementHasTransition","userPrefersReducedMotion","Promise","resolve","addEventListener","event","propertyName","componentDidUpdate","getBoundingClientRect","add","toggleDropdown","force","dropdownToggled","emit","open","element","host","newLang","languageChanged","getMergedLanguageConfig","overrides","langConfig","Object","assign","find","l","setDropdownRef","render","mergedConfig","languageSwitchOverrides","Host","concat","SvgSprite","currentLanguage","SvgIcon","name","classNames"],"sources":["src/components/post-language-switch/components/post-language-switch-list.tsx","src/components/post-language-switch/post-language-switch.scss?tag=post-language-switch&encapsulation=shadow","src/components/post-language-switch/post-language-switch.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { NavLangEntity } from '../../../models/header.model';\nimport { translate } from '../../../services/language.service';\nimport { state } from '../../../data/store';\n\nexport const PostLanguageSwitchList = (props: {\n navLang: NavLangEntity[];\n switchLanguage: (lang: NavLangEntity) => void;\n dropdownRef: (element: HTMLElement | undefined) => void;\n}) => {\n if (state.localizedConfig?.header === undefined) return;\n const config = state.localizedConfig.header;\n\n return (\n <nav\n class=\"language-switch-dropdown\"\n ref={e => props.dropdownRef(e)}\n aria-label={config.translations.navLangAriaLabel}\n >\n <ul aria-label={translate('Change language')}>\n {props.navLang\n .filter(lang => !lang.isCurrent)\n .map(lang => {\n const TagName = lang.url ? 'a' : 'button';\n return (\n <li key={lang.lang}>\n <TagName\n onClick={() => props.switchLanguage(lang)}\n href={lang.url}\n lang={lang.lang}\n title={lang.title}\n >\n <span class=\"visually-hidden\">{lang.title}</span>\n <span aria-hidden=\"true\">{lang.text}</span>\n </TagName>\n </li>\n );\n })}\n </ul>\n </nav>\n );\n};\n","@use '@swisspost/design-system-styles/variables/color';\n@use '@swisspost/design-system-styles/functions';\n@use '../../utils/utils.scss';\n\n:host {\n --separator-display: none;\n --separator-height: 100%;\n\n display: flex;\n align-items: center;\n align-self: stretch;\n\n &::before {\n position: relative;\n content: '';\n display: var(--separator-display);\n height: var(--separator-height);\n border-left: 1px solid color.$gray-10;\n }\n}\n\n.lang-btn {\n display: flex;\n align-items: center;\n height: 100%;\n padding: 0 1rem;\n border: none;\n box-shadow: none;\n background: none;\n text-transform: uppercase;\n cursor: pointer;\n color: rgba(color.$black, 0.8);\n\n &:hover,\n &:focus {\n color: black;\n position: relative;\n z-index: 1;\n }\n\n svg {\n width: 1.5em;\n height: 1.5em;\n transition: transform 250ms;\n\n &.rotated {\n transform: rotate(180deg);\n }\n }\n}\n\n.language-switch {\n position: relative;\n align-self: stretch;\n height: 100%;\n\n &.list {\n margin-top: 1.5rem;\n display: flex;\n align-items: center;\n }\n}\n\n.current-language {\n text-transform: uppercase;\n border-right: 1px solid color.$gray-20;\n padding: 0.5rem 1rem 0.5rem 0;\n}\n\n.language-switch-dropdown {\n .dropdown & {\n position: absolute;\n top: 100%;\n width: 100%;\n background: white;\n box-shadow: 0 1px 2px rgb(0 0 0 / 20%), 0 2px 6px 2px rgb(0 0 0 / 10%);\n z-index: 1;\n transform: scale(0.1);\n transform-origin: center top;\n transition: transform 0.1s;\n margin-top: var(--language-dropdown-margin-top);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n\n &.open {\n transform: scale(1);\n }\n }\n\n ul {\n @extend %no-list;\n\n .list & {\n display: flex;\n\n > li + li {\n border-left: 1px solid color.$gray-20;\n }\n }\n }\n\n a,\n button {\n @extend %nav-link;\n\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: functions.px-to-rem(48px);\n padding: 0 0.25rem;\n text-transform: uppercase;\n cursor: pointer;\n transition: background-color 200ms, color 200ms;\n\n &:hover,\n &:focus {\n background: color.$gray-background;\n }\n\n span {\n // Worst case scenario\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .list & {\n color: black;\n height: auto;\n padding: 0.5rem 1rem;\n }\n }\n}\n","import {\n Component,\n Event,\n Host,\n h,\n Method,\n EventEmitter,\n State,\n Prop,\n Element,\n} from '@stencil/core';\nimport { SvgSprite } from '../../utils/svg-sprite.component';\nimport { SvgIcon } from '../../utils/svg-icon.component';\nimport { state } from '../../data/store';\nimport {\n DropdownElement,\n DropdownEvent,\n HasDropdown,\n NavLangEntity,\n} from '../../models/header.model';\nimport { userPrefersReducedMotion, elementHasTransition } from '../../services/ui.service';\nimport { translate } from '../../services/language.service';\nimport { PostLanguageSwitchList } from './components/post-language-switch-list';\nimport { IAvailableLanguage } from '../../models/language.model';\n\n@Component({\n tag: 'post-language-switch',\n styleUrl: 'post-language-switch.scss',\n shadow: true,\n})\nexport class PostLanguageSwitch implements HasDropdown {\n @Prop() mode: 'dropdown' | 'list';\n @State() langSwitchOpen = false;\n @Element() host: DropdownElement;\n @Event() dropdownToggled: EventEmitter<DropdownEvent>;\n @Event({ bubbles: true }) languageChanged: EventEmitter<string>;\n private languageSwitchDropdown: HTMLElement | undefined;\n\n componentWillUpdate() {\n // Check if language switch got set to close and if mode is dropdown\n if (this.languageSwitchDropdown && !this.langSwitchOpen && this.mode == 'dropdown') {\n this.languageSwitchDropdown.classList.remove('open');\n\n // Check if element has transition applied and whether user prefers to see animations or not\n if (\n elementHasTransition(this.languageSwitchDropdown, 'transform') &&\n !userPrefersReducedMotion()\n ) {\n // Wait for CSS transition 'transform' to end before continuing\n return new Promise<boolean>(resolve => {\n this.languageSwitchDropdown?.addEventListener('transitionend', event => {\n if (event.propertyName === 'transform') {\n resolve(true);\n }\n });\n });\n }\n }\n }\n\n componentDidUpdate() {\n // Language switch got set to open\n if (this.languageSwitchDropdown && this.langSwitchOpen) {\n // Force browser to redraw/refresh DOM before adding 'open' class\n this.languageSwitchDropdown.getBoundingClientRect();\n this.languageSwitchDropdown.classList.add('open');\n }\n }\n\n /**\n * Open or close the language switch programatically\n * @param force Boolean to force a state\n * @returns Boolean indicating new state\n */\n @Method()\n async toggleDropdown(force?: boolean) {\n this.langSwitchOpen = force ?? !this.langSwitchOpen;\n this.dropdownToggled.emit({ open: this.langSwitchOpen, element: this.host });\n return this.langSwitchOpen;\n }\n\n /**\n * Emit a language change to the parent component\n *\n * @param newLang Config of the new language\n */\n switchLanguage(newLang: NavLangEntity) {\n this.languageChanged.emit(newLang.lang);\n this.toggleDropdown(false);\n }\n\n private getMergedLanguageConfig(config: NavLangEntity[], overrides?: IAvailableLanguage[]) {\n if (overrides === undefined) {\n return config;\n }\n\n return config.map(langConfig =>\n Object.assign(\n {},\n langConfig,\n overrides.find(l => l.lang === langConfig.lang),\n ),\n );\n }\n\n private setDropdownRef(element: HTMLElement | undefined) {\n this.languageSwitchDropdown = element;\n }\n\n render() {\n if (state.localizedConfig?.header === undefined) return;\n const config = state.localizedConfig.header;\n const mergedConfig = this.getMergedLanguageConfig(\n config.navLang,\n state.languageSwitchOverrides,\n );\n\n return (\n <Host>\n <div class={`language-switch ${this.mode}`}>\n <SvgSprite />\n {this.mode === 'dropdown' ? (\n <button\n class=\"lang-btn\"\n aria-expanded={`${this.langSwitchOpen}`}\n aria-haspopup=\"listbox\"\n onClick={() => this.toggleDropdown()}\n >\n <span class=\"visually-hidden\">\n {config.translations.navLangAriaLabel}, {translate('Current language is English')}\n </span>\n <span aria-hidden=\"true\">{state.currentLanguage}</span>\n <SvgIcon name=\"pi-arrow-down\" classNames={this.langSwitchOpen ? 'rotated' : ''} />\n </button>\n ) : (\n <span class=\"bold current-language\">\n <span class=\"visually-hidden\">{translate('Current language is English')}</span>\n <span>{state.currentLanguage}</span>\n </span>\n )}\n {this.langSwitchOpen || this.mode === 'list' ? (\n <PostLanguageSwitchList\n navLang={mergedConfig}\n switchLanguage={e => this.switchLanguage(e)}\n dropdownRef={e => e !== undefined && this.setDropdownRef(e)}\n />\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["PostLanguageSwitchList","props","_a","state","localizedConfig","header","undefined","config","h","class","ref","e","dropdownRef","translations","navLangAriaLabel","translate","navLang","filter","lang","isCurrent","map","TagName","url","key","onClick","switchLanguage","href","title","text","postLanguageSwitchCss","PostLanguageSwitch","exports","class_1","prototype","componentWillUpdate","_this","this","languageSwitchDropdown","langSwitchOpen","mode","classList","remove","elementHasTransition","userPrefersReducedMotion","Promise","resolve","addEventListener","event","propertyName","componentDidUpdate","getBoundingClientRect","add","toggleDropdown","force","dropdownToggled","emit","open","element","host","newLang","languageChanged","getMergedLanguageConfig","overrides","langConfig","Object","assign","find","l","setDropdownRef","render","mergedConfig","languageSwitchOverrides","Host","concat","SvgSprite","currentLanguage","SvgIcon","name","classNames"],"sources":["src/components/post-language-switch/components/post-language-switch-list.tsx","src/components/post-language-switch/post-language-switch.scss?tag=post-language-switch&encapsulation=shadow","src/components/post-language-switch/post-language-switch.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { NavLangEntity } from '../../../models/header.model';\nimport { translate } from '../../../services/language.service';\nimport { state } from '../../../data/store';\n\nexport const PostLanguageSwitchList = (props: {\n navLang: NavLangEntity[];\n switchLanguage: (lang: NavLangEntity) => void;\n dropdownRef: (element: HTMLElement | undefined) => void;\n}) => {\n if (state.localizedConfig?.header === undefined) return;\n const config = state.localizedConfig.header;\n\n return (\n <nav\n class=\"language-switch-dropdown\"\n ref={e => props.dropdownRef(e)}\n aria-label={config.translations.navLangAriaLabel}\n >\n <ul aria-label={translate('Change language')}>\n {props.navLang\n .filter(lang => !lang.isCurrent)\n .map(lang => {\n const TagName = lang.url ? 'a' : 'button';\n return (\n <li key={lang.lang}>\n <TagName\n onClick={() => props.switchLanguage(lang)}\n href={lang.url}\n lang={lang.lang}\n title={lang.title}\n >\n <span class=\"visually-hidden\">{lang.title}</span>\n <span aria-hidden=\"true\">{lang.text}</span>\n </TagName>\n </li>\n );\n })}\n </ul>\n </nav>\n );\n};\n","@use '@swisspost/design-system-styles/variables/color';\n@use '@swisspost/design-system-styles/functions';\n@use '../../utils/utils.scss';\n\n:host {\n --separator-display: none;\n --separator-height: 100%;\n\n display: flex;\n align-items: center;\n align-self: stretch;\n\n &::before {\n position: relative;\n content: '';\n display: var(--separator-display);\n height: var(--separator-height);\n border-left: 1px solid color.$gray-10;\n }\n}\n\n.lang-btn {\n display: flex;\n align-items: center;\n height: 100%;\n padding: 0 1rem;\n border: none;\n box-shadow: none;\n background: none;\n text-transform: uppercase;\n cursor: pointer;\n color: rgba(color.$black, 0.8);\n\n &:hover,\n &:focus {\n color: black;\n position: relative;\n z-index: 1;\n }\n\n svg {\n width: 1.5em;\n height: 1.5em;\n transition: transform 250ms;\n\n &.rotated {\n transform: rotate(180deg);\n }\n }\n}\n\n.language-switch {\n position: relative;\n align-self: stretch;\n height: 100%;\n\n &.list {\n margin-top: 1.5rem;\n display: flex;\n align-items: center;\n }\n}\n\n.current-language {\n text-transform: uppercase;\n border-right: 1px solid color.$gray-20;\n padding: 0.5rem 1rem 0.5rem 0;\n}\n\n.language-switch-dropdown {\n .dropdown & {\n position: absolute;\n top: 100%;\n width: 100%;\n background: white;\n box-shadow: 0 1px 2px rgb(0 0 0 / 20%), 0 2px 6px 2px rgb(0 0 0 / 10%);\n z-index: 1;\n transform: scale(0.1);\n transform-origin: center top;\n transition: transform 0.1s;\n margin-top: var(--language-dropdown-margin-top);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n\n &.open {\n transform: scale(1);\n }\n }\n\n ul {\n @extend %no-list;\n\n .list & {\n display: flex;\n\n > li + li {\n border-left: 1px solid color.$gray-20;\n }\n }\n }\n\n a,\n button {\n @extend %nav-link;\n\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: functions.px-to-rem(48px);\n padding: 0 0.25rem;\n text-transform: uppercase;\n cursor: pointer;\n transition: background-color 200ms, color 200ms;\n\n &:hover,\n &:focus {\n background: color.$gray-background;\n }\n\n span {\n // Worst case scenario\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .list & {\n color: black;\n height: auto;\n padding: 0.5rem 1rem;\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport { SvgSprite } from '../../utils/svg-sprite.component';\nimport { SvgIcon } from '../../utils/svg-icon.component';\nimport { state } from '../../data/store';\nimport {\n DropdownElement,\n DropdownEvent,\n HasDropdown,\n NavLangEntity,\n} from '../../models/header.model';\nimport { elementHasTransition, userPrefersReducedMotion } from '../../services/ui.service';\nimport { translate } from '../../services/language.service';\nimport { PostLanguageSwitchList } from './components/post-language-switch-list';\nimport { IAvailableLanguage } from '../../models/language.model';\n\n@Component({\n tag: 'post-language-switch',\n styleUrl: 'post-language-switch.scss',\n shadow: true,\n})\nexport class PostLanguageSwitch implements HasDropdown {\n @Prop() mode: 'dropdown' | 'list';\n @State() langSwitchOpen = false;\n @Element() host: DropdownElement;\n @Event() dropdownToggled: EventEmitter<DropdownEvent>;\n @Event({ bubbles: true }) languageChanged: EventEmitter<string>;\n private languageSwitchDropdown: HTMLElement | undefined;\n\n componentWillUpdate() {\n // Check if language switch got set to close and if mode is dropdown\n if (this.languageSwitchDropdown && !this.langSwitchOpen && this.mode == 'dropdown') {\n this.languageSwitchDropdown.classList.remove('open');\n\n // Check if element has transition applied and whether user prefers to see animations or not\n if (\n elementHasTransition(this.languageSwitchDropdown, 'transform') &&\n !userPrefersReducedMotion()\n ) {\n // Wait for CSS transition 'transform' to end before continuing\n return new Promise<boolean>(resolve => {\n this.languageSwitchDropdown?.addEventListener('transitionend', event => {\n if (event.propertyName === 'transform') {\n resolve(true);\n }\n });\n });\n }\n }\n }\n\n componentDidUpdate() {\n // Language switch got set to open\n if (this.languageSwitchDropdown && this.langSwitchOpen) {\n // Force browser to redraw/refresh DOM before adding 'open' class\n this.languageSwitchDropdown.getBoundingClientRect();\n this.languageSwitchDropdown.classList.add('open');\n }\n }\n\n /**\n * Open or close the language switch programatically\n * @param force Boolean to force a state\n * @returns Boolean indicating new state\n */\n @Method()\n async toggleDropdown(force?: boolean) {\n this.langSwitchOpen = force ?? !this.langSwitchOpen;\n this.dropdownToggled.emit({ open: this.langSwitchOpen, element: this.host });\n return this.langSwitchOpen;\n }\n\n /**\n * Emit a language change to the parent component\n *\n * @param newLang Config of the new language\n */\n switchLanguage(newLang: NavLangEntity) {\n this.languageChanged.emit(newLang.lang);\n this.toggleDropdown(false);\n }\n\n private getMergedLanguageConfig(config: NavLangEntity[], overrides?: IAvailableLanguage[]) {\n if (overrides === undefined) {\n return config;\n }\n\n return config.map(langConfig =>\n Object.assign(\n {},\n langConfig,\n overrides.find(l => l.lang === langConfig.lang),\n ),\n );\n }\n\n private setDropdownRef(element: HTMLElement | undefined) {\n this.languageSwitchDropdown = element;\n }\n\n render() {\n if (state.localizedConfig?.header === undefined) return;\n const config = state.localizedConfig.header;\n const mergedConfig = this.getMergedLanguageConfig(\n config.navLang,\n state.languageSwitchOverrides,\n );\n\n return (\n <Host>\n <div class={`language-switch ${this.mode}`}>\n <SvgSprite />\n {this.mode === 'dropdown' ? (\n <button\n class=\"lang-btn\"\n aria-expanded={`${this.langSwitchOpen}`}\n aria-haspopup=\"listbox\"\n onClick={() => this.toggleDropdown()}\n >\n <span class=\"visually-hidden\">\n {config.translations.navLangAriaLabel}, {translate('Current language is English')}\n </span>\n <span aria-hidden=\"true\">{state.currentLanguage}</span>\n <SvgIcon name=\"pi-arrow-down\" classNames={this.langSwitchOpen ? 'rotated' : ''} />\n </button>\n ) : (\n <span class=\"bold current-language\">\n <span class=\"visually-hidden\">{translate('Current language is English')}</span>\n <span>{state.currentLanguage}</span>\n </span>\n )}\n {this.langSwitchOpen || this.mode === 'list' ? (\n <PostLanguageSwitchList\n navLang={mergedConfig}\n switchLanguage={e => this.switchLanguage(e)}\n dropdownRef={e => e !== undefined && this.setDropdownRef(e)}\n />\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,h as e,H as i}from"./p-8e0a4d18.js";import{s as o}from"./p-459c3983.js";const n='@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:700;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:700;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:400;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:400;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:300;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:300;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff") format("woff")}.visually-hidden{position:absolute;width:1px;height:1px;border:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}.btn-blank{background-color:rgba(0,0,0,0);border:none;border-radius:0;padding:0}.nav-link,.meta-link{outline:none;outline-offset:2px;text-decoration:none;color:rgba(0,0,0,.8);-webkit-transition:color 200ms;transition:color 200ms;background-color:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;border:0;margin:0;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:.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:#000}.nav-link:is(:focus-visible,:focus-within,.pretend-focus),.meta-link:is(:focus-visible,:focus-within,.pretend-focus){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:4px;outline:none;outline-offset:2px}a:is(:focus-visible,:focus-within,.pretend-focus),button:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color);border-radius:4px}img,svg{max-width:100%;max-height:100%}@media (forced-colors: active){svg{color:#fff}}.box>*:first-child{margin-top:0}.box>*:last-child{margin-bottom:0}.mirrored{-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;font-size:.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;background:#faf9f8}@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}.meta-container.horizontal::before{display:block;content:"";position:absolute;top:0px;height:var(--meta-header-height);background-color:#faf9f8;left:50%;width:50%}.horizontal .meta-navigation{position:relative;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:.875rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 .5rem;min-height:2.125rem;border-radius:3px}.meta-link.active{background:#fc0;color:#000}.vertical .meta-link{color:#000;padding:0}.vertical .meta-link.active{padding:0 .5rem;margin-left:-0.5rem}';const r=class{constructor(e){t(this,e);this.orientation=undefined;this.fullWidth=false}render(){var t,n;if(((t=o.localizedConfig)===null||t===void 0?void 0:t.header.navMeta)===undefined)return;const r=o.localizedConfig.header;return e(i,null,e("div",{class:`meta-container ${this.orientation}${this.fullWidth?" full-width":""}`},e("nav",{"aria-label":r.translations.navMetaAriaLabel,class:"meta-navigation"},e("ul",{class:"meta-list"},(n=r.navMeta)===null||n===void 0?void 0:n.filter((t=>!t.isHomeLink)).map((t=>e("li",{key:t.url},e("a",{class:{active:t.isActive,"meta-link":true},target:t.target,href:t.url},e("span",{"aria-hidden":"true"},t.text))))))),e("slot",null)))}};r.style=n;export{r as post_meta_navigation};
|
|
2
|
+
//# sourceMappingURL=p-cfc4dbfd.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["postMetaNavigationCss","PostMetaNavigation","render","_a","state","localizedConfig","header","navMeta","undefined","headerConfig","h","Host","class","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 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 background: color.$gray-background-light;\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 &::before {\n display: block;\n content: '';\n position: absolute;\n top: 0px;\n height: var(--meta-header-height);\n background-color: color.$gray-background-light;\n left: 50%;\n width: 50%;\n }\n }\n}\n\n.meta-navigation {\n .horizontal & {\n position: relative;\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":"sFAAA,MAAMA,EAAwB,
|
|
1
|
+
{"version":3,"names":["postMetaNavigationCss","PostMetaNavigation","render","_a","state","localizedConfig","header","navMeta","undefined","headerConfig","h","Host","class","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 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 background: color.$gray-background-light;\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 &::before {\n display: block;\n content: '';\n position: absolute;\n top: 0px;\n height: var(--meta-header-height);\n background-color: color.$gray-background-light;\n left: 50%;\n width: 50%;\n }\n }\n}\n\n.meta-navigation {\n .horizontal & {\n position: relative;\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":"sFAAA,MAAMA,EAAwB,0/L,MCQjBC,EAAkB,M,mEAEC,K,CAE9BC,S,QACE,KAAIC,EAAAC,EAAMC,mBAAe,MAAAF,SAAA,SAAAA,EAAEG,OAAOC,WAAYC,UAAW,OACzD,MAAMC,EAAeL,EAAMC,gBAAgBC,OAE3C,OACEI,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAO,kBAAkBC,KAAKC,cAAcD,KAAKE,UAAY,cAAgB,MAChFL,EAAA,oBAAiBD,EAAaO,aAAaC,iBAAkBL,MAAM,mBACjEF,EAAA,MAAIE,MAAM,cACPM,EAAAT,EAAaF,WAAO,MAAAW,SAAA,SAAAA,EACjBC,QAAOC,IAASA,EAAKC,aACtBC,KAAIF,GACHV,EAAA,MAAIa,IAAKH,EAAKI,KACZd,EAAA,KACEE,MAAO,CAAEa,OAAUL,EAAKM,SAAU,YAAa,MAC/CC,OAAQP,EAAKO,OACbC,KAAMR,EAAKI,KAEXd,EAAA,sBAAkB,QAAQU,EAAKS,YAM3CnB,EAAA,c"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
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,r){function s(t){try{l(n.next(t))}catch(t){r(t)}}function a(t){try{l(n["throw"](t))}catch(t){r(t)}}function l(t){t.done?e(t.value):o(t.value).then(s,a)}l((n=n.apply(t,i||[])).next())}))};var __generator=this&&this.__generator||function(t,i){var e={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},n,o,r,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(t){return function(i){return l([t,i])}}function l(a){if(n)throw new TypeError("Generator is already executing.");while(s&&(s=0,a[0]&&(e=0)),e)try{if(n=1,o&&(r=a[0]&2?o["return"]:a[0]?o["throw"]||((r=o["return"])&&r.call(o),0):o.next)&&!(r=r.call(o,a[1])).done)return r;if(o=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=a;break;case 4:e.label++;return{value:a[1],done:false};case 5:e.label++;o=a[1];a=[0];continue;case 7:a=e.ops.pop();e.trys.pop();continue;default:if(!(r=e.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){e=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){e.label=a[1];break}if(a[0]===6&&e.label<r[1]){e.label=r[1];r=a;break}if(r&&e.label<r[2]){e.label=r[2];e.ops.push(a);break}if(r[2])e.ops.pop();e.trys.pop();continue}a=i.call(t,e)}catch(t){a=[6,t];o=0}finally{n=r=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-1d455921.system.js","./p-9b4d5e90.system.js","./p-1ec4e0ee.system.js","./p-88aac12c.system.js","./p-194475b8.system.js","./p-fb82b748.system.js","./p-55bfdf22.system.js"],(function(t){"use strict";var i,e,n,o,r,s,a,l,u,f,d;return{setters:[function(t){i=t.h;e=t.r;n=t.c;o=t.H;r=t.g},function(t){s=t.t},function(t){a=t.s},function(t){l=t.u},function(t){u=t.t},function(t){f=t.S},function(t){d=t.S}],execute:function(){var c=function(t){var e,n,o;var r=t.level.url?"a":"button";return i(r,{class:{"main-link":true,active:!!t.level.isActiveOverride,focus:t.isOpen},href:t.level.url,title:((e=t.level.title)===null||e===void 0?void 0:e.trim())&&((n=t.level.title)===null||n===void 0?void 0:n.trim())!==((o=t.level.text)===null||o===void 0?void 0:o.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)}},i("span",null,t.level.text),t.level.isActiveOverride?i("span",{class:"visually-hidden"},u("Active navigation element")):null,i("svg",{"aria-hidden":"true"},i("use",{href:"#pi-pointy-arrow-right"})))};var m='.flyout-nav,.flyout-column h3{font-size:.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:700;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:400;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:400;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:300;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:300;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff") format("woff")}.visually-hidden{position:absolute;width:1px;height:1px;border:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}.btn-blank{background-color:rgba(0,0,0,0);border:none;border-radius:0;padding:0}.nav-link,.main-link,.flyout-close-button,.flyout-link{outline:none;outline-offset:2px;text-decoration:none;color:rgba(0,0,0,.8);-webkit-transition:color 200ms;transition:color 200ms;background-color:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;border:0;margin:0;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:.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:#000}.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){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:4px;outline:none;outline-offset:2px}a:is(:focus-visible,:focus-within,.pretend-focus),button:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color);border-radius:4px}img,svg{max-width:100%;max-height:100%}@media (forced-colors: active){svg{color:#fff}}.box>*:first-child{margin-top:0}.box>*:last-child{margin-bottom:0}.mirrored{-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 .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:#fff;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 .35s,-webkit-transform .35s;transition:visibility .35s,-webkit-transform .35s;transition:transform .35s,visibility .35s;transition:transform .35s,visibility .35s,-webkit-transform .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 #e6e6e6}}@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:.75rem;padding-left:.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:.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:#000}.main-link::after,.flyout-link::after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:4px;background-color:rgba(0,0,0,0);opacity:0;-webkit-transform:scaleX(0.8);transform:scaleX(0.8);-webkit-transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform .25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform .25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1),transform .25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1),transform .25s cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform .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:#ccc;opacity:1;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform .25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform .25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1),transform .25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1),transform .25s cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform .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:#fff;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,.4);box-shadow:0 0 1px 0 rgba(0,0,0,.4);-webkit-transform:translateY(-100%);transform:translateY(-100%)}.flyout.open{-webkit-box-shadow:0 0 8px 0 rgba(0,0,0,.4);box-shadow:0 0 8px 0 rgba(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 .35s,-webkit-transform .35s,-webkit-box-shadow .35s;transition:visibility .35s,-webkit-transform .35s,-webkit-box-shadow .35s;transition:transform .35s,visibility .35s,box-shadow .35s;transition:transform .35s,visibility .35s,box-shadow .35s,-webkit-transform .35s,-webkit-box-shadow .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 #e6e6e6}.flyout-linklist:first-child>li{border-top-color:rgba(0,0,0,0)}.flyout-link{display:block;padding:.75rem 0}.flyout-title{margin:2.5rem 0 1.5rem 0}@media (min-width: 1024px){.flyout-title{display:none}}';var h=t("post_main_navigation",function(){function t(t){e(this,t);this.dropdownToggled=n(this,"dropdownToggled",7);this.flyoutToggled=n(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=s(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(!l()){t.classList.add("animate");t.addEventListener("transitionend",(function(){var n,o,r;if(e){if(i==="expand"){(n=t.querySelector("button.flyout-back-button"))===null||n===void 0?void 0:n.focus()}else if(i==="collapse"){(r=(o=t.parentElement)===null||o===void 0?void 0:o.querySelector("a.main-link"))===null||r===void 0?void 0:r.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 e;if(((e=a.localizedConfig)===null||e===void 0?void 0:e.header)===undefined)return;var n=a.localizedConfig.header;return i(o,null,i(f,null),i("nav",{"aria-label":n.translations.navMainAriaLabel,id:"post-internet-header-main-navigation",class:{"main-navigation":true,open:this.mobileMenuOpen},role:"menu"},i("ul",{class:"main-container container"},n.navMain.map((function(e){return i("li",{key:e.text,onMouseLeave:function(){return t.handleMouseLeave(e)},onMouseEnter:function(){return t.handleMouseEnter(e)}},i(c,{level:e,isOpen:t.isActiveFlyout(e.id),onTouchEnd:function(i){return t.handleTouchEnd(i,e)},onKeyDown:function(i){return t.handleKeyPress(i,e)},onClick:function(i){return t.handleClick(i,e)}}),!e.noFlyout?r.bind(t)(e):null)}))),i("slot",null)));function r(t){var e=this;return i("div",{id:t.id,class:{flyout:true,open:this.isActiveFlyout(t.id)}},i("div",{class:"wide-container"},i("div",{class:"flyout-nav"},i("button",{class:"nav-link flyout-back-button",onClick:function(){return e.closeFlyout(t.id)}},i(d,{name:"pi-pointy-arrow-right",classNames:"mirrored"}),i("span",null,n.translations.backButtonText)),i("button",{class:"flyout-close-button",onClick:function(){return e.closeFlyout(t.id)}},i("span",{class:"visually-hidden"},t.text,", ",n.translations.mobileNavToggleClose),i(d,{name:"pi-close"}))),i("h2",{class:"flyout-title container"},i("a",{href:t.url,class:"nav-link"},t.text)),i("div",{class:"flyout-row container"},t.flyout.map((function(e,n){return i("div",{key:e.title,class:"flyout-column"},e.title?i("h3",{id:"".concat(t.id,"-column-").concat(n)},e.title):null,i("ul",{class:"flyout-linklist","aria-labelledby":e.title?"".concat(t.id,"-column-").concat(n):undefined},e.linkList.map((function(t){return i("li",{key:t.url},i("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)?i("span",{class:"visually-hidden"},", ",u("Active navigation element")):null))}))))})))))}};Object.defineProperty(t.prototype,"host",{get:function(){return r(this)},enumerable:false,configurable:true});return t}());h.style=m}}}));
|
|
2
|
+
//# sourceMappingURL=p-d4106bf6.system.entry.js.map
|
|
@@ -1 +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","translate","postMainNavigationCss","PostMainNavigation","exports","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":"o4DAIO,IAAMA,EAAiB,SAACC,G,UAO7B,IAAMC,EAAUD,EAAME,MAAMC,IAAM,IAAM,SAExC,OACEC,EAACH,EAAO,CACNI,MAAO,CACL,YAAa,KACbC,SAAYN,EAAME,MAAMK,iBACxBC,MAASR,EAAMS,QAEjBC,KAAMV,EAAME,MAAMC,IAClBQ,QACEC,EAAAZ,EAAME,MAAMS,SAAK,MAAAC,SAAA,SAAAA,EAAEC,WAAUC,EAAAd,EAAME,MAAMS,SAAK,MAAAG,SAAA,SAAAA,EAAED,YAAWE,EAAAf,EAAME,MAAMc,QAAI,MAAAD,SAAA,SAAAA,EAAEF,QACzEb,EAAME,MAAMS,MACZM,UAENC,SAAUlB,EAAME,MAAMC,IAAMc,UAAY,EAAC,iBACzBjB,EAAME,MAAMiB,SAAW,GAAE,gBAC1BnB,EAAME,MAAMiB,SAAW,KAAOnB,EAAMS,OAAS,GAC5DW,WAAY,SAAAC,GAAK,OAAArB,EAAMoB,WAAWC,EAAjB,EACjBC,UAAW,SAAAD,GAAK,OAAArB,EAAMsB,UAAUD,EAAhB,EAChBE,QAAS,SAAAF,GAAK,OAAArB,EAAMuB,QAAQF,EAAd,GAEdjB,EAAA,YAAOJ,EAAME,MAAMc,MAClBhB,EAAME,MAAMK,iBACXH,EAAA,QAAMC,MAAM,mBAAmBmB,EAAU,8BACvC,KACJpB,EAAA,qBAAiB,QACfA,EAAA,OAAKM,KAAK,4BAIlB,EC1CA,IAAMe,EAAwB,q6Y,ICqBjBC,EAAkBC,EAAA,kC,sHAOrBC,KAAAC,YAA6B,KAC7BD,KAAAE,gBAAiC,KACjCF,KAAAG,gBAAiC,K,0DAEzCC,EAAAC,UAAAC,kBAAA,eAAAC,EAAAP,KACEA,KAAKQ,gBAAkBC,EAAS,KAAK,WAAM,OAAAF,EAAKG,cAAL,IAC3CC,OAAOC,iBAAiB,SAAUZ,KAAKQ,gBAAiB,CAAEK,QAAS,OACnEb,KAAKc,iB,EAGPV,EAAAC,UAAAU,qBAAA,WACEJ,OAAOK,oBAAoB,SAAUhB,KAAKQ,iBAC1C,GAAIR,KAAKG,kBAAoB,KAAMQ,OAAOM,aAAajB,KAAKG,iBAC5D,GAAIH,KAAKE,kBAAoB,KAAMS,OAAOM,aAAajB,KAAKE,gB,EAG9DE,EAAAC,UAAAK,aAAA,eAAAH,EAAAP,KAEEA,KAAKkB,KAAKC,UAAUC,IAAI,gBACxB,GAAIpB,KAAKC,cAAgB,KAAMU,OAAOM,aAAajB,KAAKC,aACxDD,KAAKC,YAAcU,OAAOU,YAAW,WACnCd,EAAKW,KAAKC,UAAUG,OAAO,e,GAC1B,KAEHtB,KAAKc,iB,EAIPV,EAAAC,UAAAS,gBAAA,eAAAP,EAAAP,KACE,IAAKA,KAAKkB,KAAM,CACd,M,CAEFlB,KAAKkB,KAAKK,MAAMC,YAAY,kBAAmB,GAAAC,OAAGd,OAAOe,YAAW,OAIpEf,OAAOU,YAAW,WAChBd,EAAKW,KAAKK,MAAMC,YAAY,kBAAmB,GAAAC,OAAGd,OAAOe,YAAW,M,GACnE,I,EAGLtB,EAAAC,UAAAsB,WAAA,SAAWC,G,MACT,IAAMC,GAAS7C,EAAAgB,KAAKkB,KAAKY,cAAU,MAAA9C,SAAA,SAAAA,EAAE+C,eAAeH,GAEpD,GAAIC,GAAU7B,KAAKgC,eAAiB,GAAI,CAEtChC,KAAKiC,mBAAmBJ,EAAQ,S,CAGlC7B,KAAKgC,aAAeJ,EACpB5B,KAAKkC,cAAcC,KAAKP,GACxB5B,KAAKc,kBAEL,GAAId,KAAKE,kBAAoB,KAAM,CACjCS,OAAOM,aAAajB,KAAKE,iBACzBF,KAAKE,gBAAkB,I,GAI3BE,EAAAC,UAAA+B,YAAA,SAAYR,EAAaS,GAAA,GAAAA,SAAA,GAAAA,EAAA,IAAkB,C,MACzC,GAAIT,IAAOvC,UAAW,OACtB,IAAMwC,GAAS7C,EAAAgB,KAAKkB,KAAKY,cAAU,MAAA9C,SAAA,SAAAA,EAAE+C,eAAeH,GAEpD,GAAIC,EAAQ,CAEV7B,KAAKiC,mBAAmBJ,EAAQ,WAAYQ,E,CAG9CrC,KAAKgC,aAAe,KACpBhC,KAAKkC,cAAcC,M,EAGrB/B,EAAAC,UAAA4B,mBAAA,SAAmBJ,EAAqBS,EAAmCD,GAAA,GAAAA,SAAA,GAAAA,EAAA,IAAkB,CAE3F,IAAKE,IAA4B,CAC/BV,EAAOV,UAAUC,IAAI,WAGrBS,EAAOjB,iBACL,iBACA,W,UACE,GAAIyB,EAAa,CACf,GAAIC,IAAc,SAAU,EAC1BtD,EAAA6C,EAAOW,cAA2B,gCAA4B,MAAAxD,SAAA,SAAAA,EAAEJ,O,MAC3D,GAAI0D,IAAc,WAAY,EACnCnD,GAAAD,EAAA2C,EAAOY,iBAAa,MAAAvD,SAAA,SAAAA,EAAEsD,cAA2B,kBAAc,MAAArD,SAAA,SAAAA,EAAEP,O,EAIrEiD,EAAOV,UAAUG,OAAO,U,GAE1B,CACEoB,KAAM,M,GAMdtC,EAAAC,UAAAsC,eAAA,SAAef,GACb,OAAOA,IAAO5B,KAAKgC,Y,EAGrB5B,EAAAC,UAAAuC,iBAAA,SAAiBtE,GAAjB,IAAAiC,EAAAP,KAEE,GAAIA,KAAKG,kBAAoB,KAAM,CACjCQ,OAAOM,aAAajB,KAAKG,iBACzBH,KAAKG,gBAAkB,I,CAIzB,GAAIH,KAAKE,iBAAmBF,KAAKgC,eAAiB1D,EAAMsD,GAAI,CAC1DjB,OAAOM,aAAajB,KAAKE,iBACzBF,KAAKE,gBAAkB,I,CAGzB,GAAIS,OAAOkC,YAAc,MAAQvE,EAAMuD,OAAOiB,OAAS,GAAK9C,KAAKgC,eAAiB1D,EAAMsD,GAAI,CAE1F5B,KAAKG,gBAAkBQ,OAAOU,YAAW,WACvCd,EAAKJ,gBAAkB,KACvB,GAAI7B,EAAMsD,KAAOvC,UAAWkB,EAAKoB,WAAWrD,EAAMsD,G,GACjD,I,GAIPxB,EAAAC,UAAA0C,iBAAA,SAAiBzE,GAAjB,IAAAiC,EAAAP,KAEE,GAAIA,KAAKG,kBAAoB,KAAM,CACjCQ,OAAOM,aAAajB,KAAKG,gB,CAI3B,GAAIH,KAAKgC,cAAgBhC,KAAKgC,eAAiB1D,EAAMsD,GAAI,CACvD,M,CAGF,GAAIjB,OAAOkC,YAAc,MAAQvE,EAAMuD,OAAOiB,OAAS,EAAG,CAGxD9C,KAAKE,gBAAkBS,OAAOU,YAAW,WACvCd,EAAK6B,YAAY9D,EAAMsD,GAAI,M,GAC1B,I,GAIPxB,EAAAC,UAAA2C,eAAA,SAAeC,EAAmB3E,GAChC,IAAK0B,KAAK2C,eAAerE,EAAMsD,MAAQtD,EAAMiB,SAAU,CAErD,GAAI0D,EAAMC,WAAYD,EAAME,iBAC5B,GAAI7E,EAAMsD,GAAI5B,KAAK2B,WAAWrD,EAAMsD,G,GAIxCxB,EAAAC,UAAA+C,eAAA,SAAeH,EAAsB3E,GACnC,GAAI2E,EAAMI,MAAQ,UAAYrD,KAAK2C,eAAerE,EAAMsD,MAAQtD,EAAMiB,SAAU,CAE9E0D,EAAME,iBACN,GAAI7E,EAAMsD,GAAI5B,KAAK2B,WAAWrD,EAAMsD,G,GAIxCxB,EAAAC,UAAAiD,YAAA,SAAYL,EAAmB3E,GAC7B,IAAK0B,KAAK2C,eAAerE,EAAMsD,MAAQtD,EAAMiB,SAAU,CAIrD0D,EAAME,iBACN,GAAI7E,EAAMsD,GAAI5B,KAAK2B,WAAWrD,EAAMsD,G,GAUlCxB,EAAAC,UAAAkD,eAAN,SAAqBC,G,qFACnBxD,KAAKyD,eAAiBD,IAAUnE,WAAaW,KAAKyD,eAAiBD,EACnExD,KAAK0D,gBAAgBvB,KAAK,CAAEwB,KAAM3D,KAAKyD,eAAgBG,QAAS5D,KAAKkB,OAErE,GAAIsC,IAAU,MAAO,CACnBxD,KAAKoC,a,CAGPpC,KAAKc,kBAEL,SAAOd,KAAKyD,e,QAORrD,EAAAC,UAAAwD,SAAN,W,6FACQC,GAAY9E,EAAAgB,KAAKkB,KAAKY,cAAU,MAAA9C,SAAA,SAAAA,EAAEwD,cAA2B,cACnE,GAAIsB,EAAW,CACbA,EAAUlF,O,kBASRwB,EAAAC,UAAA0D,gBAAN,SAAsBnC,G,qFACpB5B,KAAKgC,aAAeJ,EACpB5B,KAAKkC,cAAcC,KAAKnC,KAAKgC,c,iBAG/B5B,EAAAC,UAAA2D,OAAA,eAAAzD,EAAAP,K,MACE,KAAIhB,EAAAiF,EAAMC,mBAAe,MAAAlF,SAAA,SAAAA,EAAEmF,UAAW9E,UAAW,OACjD,IAAM+E,EAAeH,EAAMC,gBAAgBC,OAE3C,OACE3F,EAAC6F,EAAI,KACH7F,EAAC8F,EAAS,MACV9F,EAAA,oBACc4F,EAAaG,aAAaC,iBACtC5C,GAAG,uCACHnD,MAAO,CAAE,kBAAmB,KAAMkF,KAAQ3D,KAAKyD,gBAC/CgB,KAAK,QAELjG,EAAA,MAAIC,MAAM,4BACP2F,EAAaM,QAAQC,KAAI,SAAAC,GAAQ,OAChCpG,EAAA,MACE6E,IAAKuB,EAASxF,KACdyF,aAAc,WAAM,OAAAtE,EAAKwC,iBAAiB6B,EAAtB,EACpBE,aAAc,WAAM,OAAAvE,EAAKqC,iBAAiBgC,EAAtB,GAEpBpG,EAACL,EAAc,CACbG,MAAOsG,EACP/F,OAAQ0B,EAAKoC,eAAeiC,EAAShD,IACrCpC,WAAY,SAAAC,GAAK,OAAAc,EAAKyC,eAAevD,EAAGmF,EAAvB,EACjBlF,UAAW,SAAAD,GAAK,OAAAc,EAAK6C,eAAe3D,EAAGmF,EAAvB,EAChBjF,QAAS,SAAAF,GAAK,OAAAc,EAAK+C,YAAY7D,EAAGmF,EAApB,KAEdA,EAASrF,SAAWwF,EAAqBC,KAAKzE,EAA1BwE,CAAgCH,GAAY,KAbpC,KAiBpCpG,EAAA,eAKN,SAASuG,EAAqBH,GAA9B,IAAArE,EAAAP,KACE,OACExB,EAAA,OAAKoD,GAAIgD,EAAShD,GAAInD,MAAO,CAAEoD,OAAQ,KAAM8B,KAAM3D,KAAK2C,eAAeiC,EAAShD,MAC9EpD,EAAA,OAAKC,MAAM,kBACTD,EAAA,OAAKC,MAAM,cACTD,EAAA,UACEC,MAAM,8BACNkB,QAAS,WAAM,OAAAY,EAAK6B,YAAYwC,EAAShD,GAA1B,GAEfpD,EAACyG,EAAO,CAACC,KAAK,wBAAwBC,WAAW,aACjD3G,EAAA,YAAO4F,EAAaG,aAAaa,iBAEnC5G,EAAA,UAAQC,MAAM,sBAAsBkB,QAAS,WAAM,OAAAY,EAAK6B,YAAYwC,EAAShD,GAA1B,GACjDpD,EAAA,QAAMC,MAAM,mBACTmG,EAASxF,KAAI,KAAIgF,EAAaG,aAAac,sBAE9C7G,EAACyG,EAAO,CAACC,KAAK,eAGlB1G,EAAA,MAAIC,MAAM,0BACRD,EAAA,KAAGM,KAAM8F,EAASrG,IAAKE,MAAM,YAC1BmG,EAASxF,OAGdZ,EAAA,OAAKC,MAAM,wBACRmG,EAAS/C,OAAO8C,KAAI,SAAC9C,EAAQyD,GAAC,OAC7B9G,EAAA,OAAK6E,IAAKxB,EAAO9C,MAAON,MAAM,iBAC3BoD,EAAO9C,MAAQP,EAAA,MAAIoD,GAAI,GAAAH,OAAGmD,EAAShD,GAAE,YAAAH,OAAW6D,IAAMzD,EAAO9C,OAAc,KAC5EP,EAAA,MACEC,MAAM,kBAAiB,kBACNoD,EAAO9C,MAAQ,GAAA0C,OAAGmD,EAAShD,GAAE,YAAAH,OAAW6D,GAAMjG,WAE9DwC,EAAO0D,SAASZ,KAAI,SAAAa,GAAI,OACvBhH,EAAA,MAAI6E,IAAKmC,EAAKjH,KACZC,EAAA,KACEC,MAAO,CACL,cAAe,KACfC,UAAY8G,IAAI,MAAJA,SAAI,SAAJA,EAAM7G,mBAEpBG,KAAM0G,EAAKjH,IACXkH,OAAQD,EAAKC,QAEZD,EAAKzG,OACLyG,IAAI,MAAJA,SAAI,SAAJA,EAAM7G,kBACLH,EAAA,QAAMC,MAAM,mBAAiB,KACxBmB,EAAU,8BAEb,MAfe,KAPA,M,0HAtRd,I"}
|
|
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","translate","postMainNavigationCss","PostMainNavigation","exports","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, Element, Event, EventEmitter, h, Host, Method, State } 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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"}
|