@swisspost/internet-header 1.5.0 → 1.5.1

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.
Files changed (25) hide show
  1. package/dist/cjs/post-main-navigation.cjs.entry.js +1 -1
  2. package/dist/cjs/post-main-navigation.cjs.entry.js.map +1 -1
  3. package/dist/cjs/swisspost-internet-header.cjs.entry.js +1 -1
  4. package/dist/collection/components/post-main-navigation/post-main-navigation.css +1 -1
  5. package/dist/components/post-main-navigation2.js +1 -1
  6. package/dist/components/post-main-navigation2.js.map +1 -1
  7. package/dist/components/swisspost-internet-header.js +1 -1
  8. package/dist/esm/post-main-navigation.entry.js +1 -1
  9. package/dist/esm/post-main-navigation.entry.js.map +1 -1
  10. package/dist/esm/swisspost-internet-header.entry.js +1 -1
  11. package/dist/esm-es5/post-main-navigation.entry.js +1 -1
  12. package/dist/esm-es5/post-main-navigation.entry.js.map +1 -1
  13. package/dist/esm-es5/swisspost-internet-header.entry.js +1 -1
  14. package/dist/swisspost-internet-header/p-17a47667.system.js +1 -1
  15. package/dist/swisspost-internet-header/{p-b228fe49.system.entry.js → p-3df823de.system.entry.js} +2 -2
  16. package/dist/swisspost-internet-header/{p-b228fe49.system.entry.js.map → p-3df823de.system.entry.js.map} +0 -0
  17. package/dist/swisspost-internet-header/{p-7ea26ee9.entry.js → p-7709ed5c.entry.js} +2 -2
  18. package/dist/swisspost-internet-header/{p-7ea26ee9.entry.js.map → p-7709ed5c.entry.js.map} +0 -0
  19. package/dist/swisspost-internet-header/{p-95b81c4d.entry.js → p-d33734b5.entry.js} +2 -2
  20. package/dist/swisspost-internet-header/{p-95b81c4d.entry.js.map → p-d33734b5.entry.js.map} +1 -1
  21. package/dist/swisspost-internet-header/{p-d6539597.system.entry.js → p-db87f3e3.system.entry.js} +2 -2
  22. package/dist/swisspost-internet-header/{p-d6539597.system.entry.js.map → p-db87f3e3.system.entry.js.map} +1 -1
  23. package/dist/swisspost-internet-header/swisspost-internet-header.esm.js +1 -1
  24. package/package.json +1 -1
  25. package/readme.md +1 -1
package/dist/cjs/post-main-navigation.cjs.entry.js CHANGED
@@ -25,7 +25,7 @@ const LevelOneAction = (props) => {
25
25
  index.h("use", { href: "#pi-pointy-arrow-right" }))));
26
26
  };
27
27
 
28
- const postMainNavigationCss = ".flyout-nav,.flyout-column h3{font-size:0.9375rem;line-height:1.4}@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;line-height:1.4}@media (min-width: 600px){.flyout-title{font-size:1.25rem}}@media (min-width: 1024px){.flyout-title{font-size:1.5rem;line-height:1.1}}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:700;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2\") format(\"woff2\"), url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:400;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2\") format(\"woff2\"), url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:300;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2\") format(\"woff2\"), url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff\") format(\"woff\")}*,:host,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{font-family:\"Frutiger Neue For Post\", system-ui, sans-serif}button{font:inherit;padding:0}img,svg{max-width:100%;max-height:100%}@media (forced-colors: active){svg{color:white}}.main-container,.flyout-linklist,.no-list{list-style:none;padding-left:0;margin-top:0;margin-bottom:0}.btn-blank{background-color:transparent;border:none;border-radius:0;padding:0}.main-link,.flyout-close-button,.flyout-link,.nav-link{text-decoration:none;color:rgba(0, 0, 0, 0.8);-webkit-transition:color 200ms;transition:color 200ms;background-color:transparent;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.5rem}.main-link:hover,.flyout-close-button:hover,.flyout-link:hover,.nav-link:hover,.main-link:focus,.flyout-close-button:focus,.flyout-link:focus,.nav-link:focus{color:black}.main-link>svg,.flyout-close-button>svg,.flyout-link>svg,.nav-link>svg{width:1.4em;height:1.4em;-ms-flex-negative:0;flex-shrink:0}.main-link>span,.flyout-close-button>span,.flyout-link>span,.nav-link>span{-ms-flex-negative:1;flex-shrink:1}.box>*:first-child{margin-top:0}.box>*:last-child{margin-bottom:0}.mirrored{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.bold{font-weight:700}.light{font-weight:300}.d-flex{display:-ms-flexbox;display:flex}.d-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.align-items-center{-ms-flex-align:center;align-items:center}@media (min-width: 1441px){.wide-container{margin:0 auto;max-width:1440px}}@media (max-width: 599.98px){.container{padding-right:16px;padding-left:16px}}@media (min-width: 600px) and (max-width: 1023.98px){.container{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.container{padding-right:40px;padding-left:40px}}.visually-hidden{position:absolute;width:1px;height:1px;border:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}@media (max-width: -0.02px){.hidden-xs{display:none}}@media (max-width: 399.98px){.hidden-sm{display:none}}@media (max-width: 599.98px){.hidden-rg{display:none}}@media (max-width: 779.98px){.hidden-md{display:none}}@media (max-width: 1023.98px){.hidden-lg{display:none}}@media (max-width: 1279.98px){.hidden-xl{display:none}}@media (max-width: 1440.98px){.hidden-xxl{display:none}}:host{--host-window-height:var(--window-height, 100vh);--calculated-header-height:calc(var(--header-height) + 1px);display:block;min-width:0;height:var(--header-height)}:host(.no-animation) *{-webkit-animation:none !important;animation:none !important;-webkit-transition:none !important;transition:none !important}@media (min-width: 1024px){.main-navigation,.main-container,.main-container li,.main-link{height:100%}}.main-navigation{font-size:1.125rem}@media (min-width: 1024px){.main-navigation{font-size:1rem}}@media (min-width: 1280px){.main-navigation{margin:0 0.75rem;font-size:1.125rem}}@media (min-width: 1441px){.main-navigation{font-size:1.25rem}}@media (max-width: 1023.98px){.main-navigation{position:absolute;top:var(--calculated-header-height);left:0;background:white;height:calc(var(--host-window-height) - var(--calculated-header-height));width:100%;margin:0;overflow:hidden scroll;-webkit-overflow-scrolling:touch;-ms-scroll-chaining:none;overscroll-behavior:contain;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;z-index:-1;visibility:hidden;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:visibility 0.35s, -webkit-transform 0.35s;transition:visibility 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, visibility 0.35s;transition:transform 0.35s, visibility 0.35s, -webkit-transform 0.35s}}@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce){.main-navigation{-webkit-transition:none;transition:none}}@media (max-width: 1023.98px){.main-navigation.open{-webkit-transform:translateY(0);transform:translateY(0);visibility:visible}}.main-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}@media (max-width: 1023.98px){.main-container{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start;padding-top:2.5rem;padding-bottom:2.5rem}.main-container>li+li{border-top:1px solid #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:0.75rem;padding-left:0.75rem;text-align:left;cursor:pointer;width:100%}@media (min-width: 1024px){.main-link svg{display:none}}@media (max-width: 1023.98px){.main-link{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;font-weight:300;padding:0.625rem 0;width:100%;text-align:left}.main-link svg{width:1.5rem;height:1.5rem}}.main-link span{overflow:hidden;text-overflow:ellipsis}.main-link,.flyout-link{position:relative;color:black}.main-link::after,.flyout-link::after{content:\"\";position:absolute;bottom:-1px;left:0;width:100%;height:4px;background-color:transparent;opacity:0;-webkit-transform:scaleX(0.8);transform:scaleX(0.8);-webkit-transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)}@media (prefers-reduced-motion: reduce){.main-link::after,.flyout-link::after{-webkit-transition:none;transition:none}}.main-link:hover::after,.main-link.focus::after,.flyout-link:hover::after,.flyout-link.focus::after{background-color:#cccccc;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.main-link.active,.flyout-link.active{font-weight:700}.main-link.active::after,.flyout-link.active::after{background-color:#fc0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.flyout{left:0;width:100%;background:white;padding-bottom:3rem;overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;visibility:hidden}@media (min-width: 1024px){.flyout{position:absolute;top:100%;max-height:calc(100vh - var(--header-height) - var(--meta-header-height) - 1px);z-index:-1;-webkit-box-shadow:0 0 1px 0 rgba(0, 0, 0, 0.4);box-shadow:0 0 1px 0 rgba(0, 0, 0, 0.4);-webkit-transform:translateY(-100%);transform:translateY(-100%)}.flyout.open{-webkit-box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.4);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.4);-webkit-transform:translateY(0);transform:translateY(0)}}@media (max-width: 1023.98px){.flyout{position:fixed;top:0;height:100%;z-index:1;-webkit-transform:translateX(100%);transform:translateX(100%)}.flyout.open{-webkit-transform:translateX(0);transform:translateX(0)}}.flyout.open{visibility:visible}.flyout.animate{-webkit-transition:visibility 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s;transition:visibility 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s;transition:transform 0.35s, visibility 0.35s, box-shadow 0.35s;transition:transform 0.35s, visibility 0.35s, box-shadow 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s}@media (prefers-reduced-motion: reduce){.flyout.animate{-webkit-transition:none;transition:none}}.flyout-nav{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;min-height:3.5rem;-webkit-box-sizing:content-box;box-sizing:content-box}.flyout-row{display:-ms-flexbox;display:flex;gap:1.5rem}@media (max-width: 1023.98px){.flyout-row{display:grid;grid-template-columns:1fr 1fr}}@media (max-width: 599.98px){.flyout-row{grid-template-columns:1fr}}.flyout-column{-ms-flex:1;flex:1;max-width:25%}@media (max-width: 1023.98px){.flyout-column{max-width:none}}.flyout-column h3{margin-top:0}.flyout-back-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:1rem;font-weight:400;cursor:pointer}@media (max-width: 599.98px){.flyout-back-button{padding-right:16px;padding-left:16px}}@media (min-width: 600px) and (max-width: 1023.98px){.flyout-back-button{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.flyout-back-button{padding-right:40px;padding-left:40px}}.flyout-back-button svg{width:1.5rem;height:1.5rem}@media (min-width: 1024px){.flyout-back-button{display:none}}.flyout-close-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-left:auto;padding:0 1.5rem;cursor:pointer}.flyout-close-button svg{width:1.5rem;height:1.5rem}@media (max-width: 1023.98px){.flyout-close-button{display:none}}.flyout-linklist li{border-top:1px solid #e6e6e6}.flyout-linklist:first-child>li{border-top-color:transparent}.flyout-link{display:block;padding:0.75rem 0}.flyout-title{margin:2.5rem 0 1.5rem 0}@media (min-width: 1024px){.flyout-title{display:none}}";
28
+ const postMainNavigationCss = ".flyout-nav,.flyout-column h3{font-size:0.9375rem;line-height:1.4}@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;line-height:1.4}@media (min-width: 600px){.flyout-title{font-size:1.25rem}}@media (min-width: 1024px){.flyout-title{font-size:1.5rem;line-height:1.1}}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:700;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2\") format(\"woff2\"), url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:400;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2\") format(\"woff2\"), url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:300;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2\") format(\"woff2\"), url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff\") format(\"woff\")}*,:host,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{font-family:\"Frutiger Neue For Post\", system-ui, sans-serif}button{font:inherit;padding:0}img,svg{max-width:100%;max-height:100%}@media (forced-colors: active){svg{color:white}}.main-container,.flyout-linklist,.no-list{list-style:none;padding-left:0;margin-top:0;margin-bottom:0}.btn-blank{background-color:transparent;border:none;border-radius:0;padding:0}.main-link,.flyout-close-button,.flyout-link,.nav-link{text-decoration:none;color:rgba(0, 0, 0, 0.8);-webkit-transition:color 200ms;transition:color 200ms;background-color:transparent;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.5rem}.main-link:hover,.flyout-close-button:hover,.flyout-link:hover,.nav-link:hover,.main-link:focus,.flyout-close-button:focus,.flyout-link:focus,.nav-link:focus{color:black}.main-link>svg,.flyout-close-button>svg,.flyout-link>svg,.nav-link>svg{width:1.4em;height:1.4em;-ms-flex-negative:0;flex-shrink:0}.main-link>span,.flyout-close-button>span,.flyout-link>span,.nav-link>span{-ms-flex-negative:1;flex-shrink:1}.box>*:first-child{margin-top:0}.box>*:last-child{margin-bottom:0}.mirrored{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.bold{font-weight:700}.light{font-weight:300}.d-flex{display:-ms-flexbox;display:flex}.d-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.align-items-center{-ms-flex-align:center;align-items:center}@media (min-width: 1441px){.wide-container{margin:0 auto;max-width:1440px}}@media (max-width: 599.98px){.container{padding-right:16px;padding-left:16px}}@media (min-width: 600px) and (max-width: 1023.98px){.container{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.container{padding-right:40px;padding-left:40px}}.visually-hidden{position:absolute;width:1px;height:1px;border:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}@media (max-width: -0.02px){.hidden-xs{display:none}}@media (max-width: 399.98px){.hidden-sm{display:none}}@media (max-width: 599.98px){.hidden-rg{display:none}}@media (max-width: 779.98px){.hidden-md{display:none}}@media (max-width: 1023.98px){.hidden-lg{display:none}}@media (max-width: 1279.98px){.hidden-xl{display:none}}@media (max-width: 1440.98px){.hidden-xxl{display:none}}:host{--host-window-height:var(--window-height, 100vh);--calculated-header-height:calc(var(--header-height) + 1px);display:block;min-width:0;height:var(--header-height)}:host(.no-animation) *{-webkit-animation:none !important;animation:none !important;-webkit-transition:none !important;transition:none !important}@media (min-width: 1024px){.main-navigation,.main-container,.main-container li,.main-link{height:100%}}.main-navigation{font-size:1.125rem}@media (min-width: 1024px){.main-navigation{font-size:1rem;margin:0 0.75rem}}@media (min-width: 1280px){.main-navigation{font-size:1.125rem}}@media (min-width: 1441px){.main-navigation{font-size:1.25rem}}@media (max-width: 1023.98px){.main-navigation{position:absolute;top:var(--calculated-header-height);left:0;background:white;height:calc(var(--host-window-height) - var(--calculated-header-height));width:100%;margin:0;overflow:hidden scroll;-webkit-overflow-scrolling:touch;-ms-scroll-chaining:none;overscroll-behavior:contain;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;z-index:-1;visibility:hidden;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:visibility 0.35s, -webkit-transform 0.35s;transition:visibility 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, visibility 0.35s;transition:transform 0.35s, visibility 0.35s, -webkit-transform 0.35s}}@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce){.main-navigation{-webkit-transition:none;transition:none}}@media (max-width: 1023.98px){.main-navigation.open{-webkit-transform:translateY(0);transform:translateY(0);visibility:visible}}.main-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}@media (max-width: 1023.98px){.main-container{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start;padding-top:2.5rem;padding-bottom:2.5rem}.main-container>li+li{border-top:1px solid #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:0.75rem;padding-left:0.75rem;text-align:left;cursor:pointer;width:100%}@media (min-width: 1024px){.main-link svg{display:none}}@media (max-width: 1023.98px){.main-link{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;font-weight:300;padding:0.625rem 0;width:100%;text-align:left}.main-link svg{width:1.5rem;height:1.5rem}}.main-link span{overflow:hidden;text-overflow:ellipsis}.main-link,.flyout-link{position:relative;color:black}.main-link::after,.flyout-link::after{content:\"\";position:absolute;bottom:-1px;left:0;width:100%;height:4px;background-color:transparent;opacity:0;-webkit-transform:scaleX(0.8);transform:scaleX(0.8);-webkit-transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)}@media (prefers-reduced-motion: reduce){.main-link::after,.flyout-link::after{-webkit-transition:none;transition:none}}.main-link:hover::after,.main-link.focus::after,.flyout-link:hover::after,.flyout-link.focus::after{background-color:#cccccc;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.main-link.active,.flyout-link.active{font-weight:700}.main-link.active::after,.flyout-link.active::after{background-color:#fc0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.flyout{left:0;width:100%;background:white;padding-bottom:3rem;overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;visibility:hidden}@media (min-width: 1024px){.flyout{position:absolute;top:100%;max-height:calc(100vh - var(--header-height) - var(--meta-header-height) - 1px);z-index:-1;-webkit-box-shadow:0 0 1px 0 rgba(0, 0, 0, 0.4);box-shadow:0 0 1px 0 rgba(0, 0, 0, 0.4);-webkit-transform:translateY(-100%);transform:translateY(-100%)}.flyout.open{-webkit-box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.4);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.4);-webkit-transform:translateY(0);transform:translateY(0)}}@media (max-width: 1023.98px){.flyout{position:fixed;top:0;height:100%;z-index:1;-webkit-transform:translateX(100%);transform:translateX(100%)}.flyout.open{-webkit-transform:translateX(0);transform:translateX(0)}}.flyout.open{visibility:visible}.flyout.animate{-webkit-transition:visibility 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s;transition:visibility 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s;transition:transform 0.35s, visibility 0.35s, box-shadow 0.35s;transition:transform 0.35s, visibility 0.35s, box-shadow 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s}@media (prefers-reduced-motion: reduce){.flyout.animate{-webkit-transition:none;transition:none}}.flyout-nav{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;min-height:3.5rem;-webkit-box-sizing:content-box;box-sizing:content-box}.flyout-row{display:-ms-flexbox;display:flex;gap:1.5rem}@media (max-width: 1023.98px){.flyout-row{display:grid;grid-template-columns:1fr 1fr}}@media (max-width: 599.98px){.flyout-row{grid-template-columns:1fr}}.flyout-column{-ms-flex:1;flex:1;max-width:25%}@media (max-width: 1023.98px){.flyout-column{max-width:none}}.flyout-column h3{margin-top:0}.flyout-back-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:1rem;font-weight:400;cursor:pointer}@media (max-width: 599.98px){.flyout-back-button{padding-right:16px;padding-left:16px}}@media (min-width: 600px) and (max-width: 1023.98px){.flyout-back-button{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.flyout-back-button{padding-right:40px;padding-left:40px}}.flyout-back-button svg{width:1.5rem;height:1.5rem}@media (min-width: 1024px){.flyout-back-button{display:none}}.flyout-close-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-left:auto;padding:0 1.5rem;cursor:pointer}.flyout-close-button svg{width:1.5rem;height:1.5rem}@media (max-width: 1023.98px){.flyout-close-button{display:none}}.flyout-linklist li{border-top:1px solid #e6e6e6}.flyout-linklist:first-child>li{border-top-color:transparent}.flyout-link{display:block;padding:0.75rem 0}.flyout-title{margin:2.5rem 0 1.5rem 0}@media (min-width: 1024px){.flyout-title{display:none}}";
29
29
 
30
30
  const PostMainNavigation = class {
31
31
  constructor(hostRef) {
package/dist/cjs/post-main-navigation.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"post-main-navigation.entry.cjs.js","mappings":"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","names":["h","throttle","clearAllBodyScrollLocks","userPrefersReducedMotion","disableBodyScroll","enableBodyScroll","state","Host","SvgSprite","SvgIcon"],"sources":["./src/components/post-main-navigation/components/level-one-action.component.tsx","./src/components/post-main-navigation/post-main-navigation.scss?tag=post-main-navigation&encapsulation=shadow","./src/components/post-main-navigation/post-main-navigation.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { NavMainEntity } from '../../../models/header.model';\n\nexport const LevelOneAction = (props: {\n level: NavMainEntity;\n isOpen: boolean;\n onTouchEnd: (e: any) => void;\n onKeyDown: (e: any) => void;\n onClick: (e: any) => void;\n}) => {\n const TagName = props.level.url ? 'a' : 'button';\n\n return (\n <TagName\n class={{\n 'main-link': true,\n 'active': !!props.level.isActiveOverride,\n 'focus': props.isOpen,\n }}\n href={props.level.url}\n title={\n props.level.title?.trim() && props.level.title?.trim() !== props.level.text?.trim()\n ? props.level.title\n : undefined\n }\n tabindex={props.level.url ? undefined : 0}\n aria-haspopup={!props.level.noFlyout + ''}\n aria-expanded={props.level.noFlyout ? null : props.isOpen + ''}\n onTouchEnd={e => props.onTouchEnd(e)}\n onKeyDown={e => props.onKeyDown(e)}\n onClick={e => props.onClick(e)}\n >\n <span>{props.level.text}</span>\n <svg aria-hidden=\"true\">\n <use href=\"#pi-pointy-arrow-right\" />\n </svg>\n </TagName>\n );\n};\n","@use '@swisspost/design-system-styles/variables/color';\n@use '@swisspost/design-system-styles/placeholders/text';\n@use '@swisspost/design-system-styles/functions';\n@use '../../utils/utils.scss';\n@use '../../utils/mixins.scss';\n\n:host {\n --host-window-height: var(--window-height, 100vh);\n --calculated-header-height: calc(var(--header-height) + 1px);\n\n display: block;\n min-width: 0;\n height: var(--header-height);\n}\n\n:host(.no-animation) {\n * {\n animation: none !important;\n transition: none !important;\n }\n}\n\n.main-navigation,\n.main-container,\n.main-container li,\n.main-link {\n @include mixins.min(lg) {\n height: 100%;\n }\n}\n\n.main-navigation {\n font-size: functions.px-to-rem(18px);\n\n @include mixins.min(lg) {\n font-size: functions.px-to-rem(16px);\n }\n\n @include mixins.min(xl) {\n margin: 0 0.75rem;\n font-size: functions.px-to-rem(18px);\n }\n\n @include mixins.min(xxl) {\n font-size: functions.px-to-rem(20px);\n }\n\n @include mixins.max(lg) {\n position: absolute;\n top: var(--calculated-header-height);\n left: 0;\n background: white;\n height: calc(var(--host-window-height) - var(--calculated-header-height));\n width: 100%;\n margin: 0;\n overflow: hidden scroll;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior: contain;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n z-index: -1;\n visibility: hidden;\n transform: translateY(-100%);\n transition: transform 0.35s, visibility 0.35s;\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n\n &.open {\n transform: translateY(0);\n visibility: visible;\n }\n }\n}\n\n.main-container {\n @extend %no-list;\n\n display: flex;\n align-items: center;\n justify-content: flex-start;\n\n @include mixins.max(lg) {\n flex-direction: column;\n align-items: stretch;\n justify-content: flex-start;\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n\n > li + li {\n border-top: 1px solid color.$gray-10;\n }\n }\n\n @include mixins.min(lg) {\n padding-right: 0;\n padding-left: 0;\n }\n\n > li {\n flex: 0 1 auto;\n min-width: 0;\n }\n}\n\n.main-link {\n @extend %nav-link;\n\n display: flex;\n align-items: center;\n padding-right: 0.75rem;\n padding-left: 0.75rem;\n text-align: left;\n cursor: pointer;\n width: 100%;\n\n @include mixins.min(lg) {\n svg {\n display: none;\n }\n }\n\n @include mixins.max(lg) {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-weight: 300;\n padding: 0.625rem 0;\n width: 100%;\n text-align: left;\n\n svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n }\n\n span {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n}\n\n.main-link,\n.flyout-link {\n position: relative;\n color: black;\n\n &::after {\n content: '';\n position: absolute;\n bottom: -1px;\n left: 0;\n width: 100%;\n height: 4px;\n background-color: transparent;\n opacity: 0;\n transform: scaleX(0.8);\n transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &:hover,\n &.focus {\n &::after {\n background-color: color.$gray-20;\n opacity: 1;\n transform: scale(1);\n }\n }\n\n &.active {\n font-weight: 700;\n\n &::after {\n background-color: color.$yellow;\n opacity: 1;\n transform: scale(1);\n }\n }\n}\n\n.flyout {\n left: 0;\n width: 100%;\n background: white;\n padding-bottom: 3rem;\n overflow: auto;\n overscroll-behavior: contain;\n visibility: hidden;\n\n @include mixins.min(lg) {\n position: absolute;\n top: 100%;\n max-height: calc(100vh - var(--header-height) - var(--meta-header-height) - 1px);\n z-index: -1;\n box-shadow: 0 0 1px 0 rgb(0 0 0 / 40%);\n transform: translateY(-100%);\n\n &.open {\n box-shadow: 0 0 8px 0 rgb(0 0 0 / 40%);\n transform: translateY(0);\n }\n }\n\n @include mixins.max(lg) {\n position: fixed;\n top: 0;\n height: 100%;\n z-index: 1;\n transform: translateX(100%);\n\n &.open {\n transform: translateX(0);\n }\n }\n\n &.open {\n visibility: visible;\n }\n\n &.animate {\n transition: transform 0.35s, visibility 0.35s, box-shadow 0.35s;\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n}\n\n.flyout-nav {\n @extend %font-curve-small;\n\n display: flex;\n justify-content: space-between;\n min-height: 3.5rem;\n\n // Change box-sizing to content-box to add 1px border width to flyout-nav hight.\n // This ensures flyout-nav has same hight as main-navigation-container.\n box-sizing: content-box;\n}\n\n.flyout-row {\n display: flex;\n gap: 1.5rem;\n\n @include mixins.max(lg) {\n display: grid;\n grid-template-columns: 1fr 1fr;\n }\n\n @include mixins.max(rg) {\n grid-template-columns: 1fr;\n }\n}\n\n.flyout-column {\n flex: 1;\n max-width: 25%;\n\n @include mixins.max(lg) {\n max-width: none;\n }\n\n h3 {\n @extend %font-curve-small;\n margin-top: 0;\n }\n}\n\n.flyout-back-button {\n @include mixins.container-padding();\n\n display: flex;\n align-items: center;\n font-size: functions.px-to-rem(16px);\n font-weight: 400;\n cursor: pointer;\n\n svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n @include mixins.min(lg) {\n display: none;\n }\n}\n\n.flyout-close-button {\n @extend %nav-link;\n\n display: flex;\n align-items: center;\n margin-left: auto;\n padding: 0 1.5rem;\n cursor: pointer;\n\n svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n @include mixins.max(lg) {\n display: none;\n }\n}\n\n.flyout-linklist {\n @extend %no-list;\n\n li {\n border-top: 1px solid color.$gray-10;\n }\n\n &:first-child > li {\n border-top-color: transparent;\n }\n}\n\n.flyout-link {\n @extend %nav-link;\n\n display: block;\n padding: 0.75rem 0;\n}\n\n.flyout-title {\n @extend %font-curve-bigger-regular;\n\n margin: 2.5rem 0 1.5rem 0;\n\n @include mixins.min(lg) {\n display: none;\n }\n}\n","import { Component, Host, h, State, Method, Event, Element, EventEmitter } from '@stencil/core';\nimport { throttle } from 'throttle-debounce';\nimport { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';\nimport { state } from '../../data/store';\nimport {\n DropdownElement,\n DropdownEvent,\n HasDropdown,\n IsFocusable,\n NavMainEntity,\n} from '../../models/header.model';\nimport { userPrefersReducedMotion } from '../../services/ui.service';\nimport { SvgSprite } from '../../utils/svg-sprite.component';\nimport { SvgIcon } from '../../utils/svg-icon.component';\nimport { LevelOneAction } from './components/level-one-action.component';\n\n@Component({\n tag: 'post-main-navigation',\n styleUrl: 'post-main-navigation.scss',\n shadow: true,\n})\nexport class PostMainNavigation implements HasDropdown, IsFocusable {\n @State() activeFlyout: string | null;\n @State() mobileMenuOpen: boolean;\n @Event() dropdownToggled: EventEmitter<DropdownEvent>;\n @Event() flyoutToggled: EventEmitter<string | null>;\n @Element() host: DropdownElement;\n private throttledResize: throttle<() => void>;\n private resizeTimer: number | null = null;\n private mouseLeaveTimer: number | null = null;\n private mouseEnterTimer: number | null = null;\n private flyoutElement: HTMLElement | undefined;\n\n connectedCallback() {\n this.throttledResize = throttle(300, () => this.handleResize());\n window.addEventListener('resize', this.throttledResize, { passive: true });\n this.setWindowHeight();\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.throttledResize);\n clearAllBodyScrollLocks();\n if (this.mouseEnterTimer !== null) window.clearTimeout(this.mouseEnterTimer);\n if (this.mouseLeaveTimer !== null) window.clearTimeout(this.mouseLeaveTimer);\n }\n\n handleResize() {\n // Suspend all animations and transitions on window resize\n this.host.classList.add('no-animation');\n if (this.resizeTimer !== null) window.clearTimeout(this.resizeTimer);\n this.resizeTimer = window.setTimeout(() => {\n this.host.classList.remove('no-animation');\n }, 300);\n\n this.setWindowHeight();\n }\n\n // Update window height var\n setWindowHeight() {\n if (!this.host) {\n return;\n }\n this.host.style.setProperty('--window-height', `${window.innerHeight}px`);\n\n // Safari might or might not show a blank bar at the bottom where the browser\n // controls should be. This timeout waits for this bar to appear before resetting the available height\n window.setTimeout(() => {\n this.host.style.setProperty('--window-height', `${window.innerHeight}px`);\n }, 100);\n }\n\n openFlyout(id: string) {\n const flyout = this.host.shadowRoot?.getElementById(id);\n\n if (flyout && this.activeFlyout !== '') {\n // Add flyout animation if there's no flyout open\n this.addFlyoutAnimation(flyout);\n }\n\n this.activeFlyout = id;\n this.flyoutToggled.emit(id);\n this.setWindowHeight();\n\n if (this.mouseLeaveTimer !== null) {\n window.clearTimeout(this.mouseLeaveTimer);\n this.mouseLeaveTimer = null;\n }\n }\n\n closeFlyout(id?: string) {\n if (id === undefined) return;\n const flyout = this.host.shadowRoot?.getElementById(id);\n\n if (flyout) {\n // Add flyout animation for close action\n this.addFlyoutAnimation(flyout);\n }\n\n this.activeFlyout = null;\n this.flyoutToggled.emit();\n }\n\n addFlyoutAnimation(flyout: HTMLElement) {\n // Check if user prefers to see animations or not\n if (!userPrefersReducedMotion()) {\n flyout.classList.add('animate');\n\n // Remove flyout animation after transition ended\n flyout.addEventListener('transitionend', () => this.removeFlyoutAnimation(flyout), {\n once: true,\n });\n }\n }\n\n removeFlyoutAnimation(flyout: HTMLElement) {\n flyout.classList.remove('animate');\n }\n\n isActiveFlyout(id?: string) {\n return id === this.activeFlyout;\n }\n\n handleMouseEnter(level: NavMainEntity) {\n // Cancel opening the flyout if there already is one scheduled to open\n if (this.mouseEnterTimer !== null) {\n window.clearTimeout(this.mouseEnterTimer);\n this.mouseEnterTimer = null;\n }\n\n // Cancel closing if we enter again\n if (this.mouseLeaveTimer && this.activeFlyout === level.id) {\n window.clearTimeout(this.mouseLeaveTimer);\n this.mouseLeaveTimer = null;\n }\n\n if (window.innerWidth >= 1024 && level.flyout.length > 0 && this.activeFlyout !== level.id) {\n // Delay opening the flyout for a moment to give users a chance to move the mouse over the navigation without triggering the flyout\n this.mouseEnterTimer = window.setTimeout(() => {\n this.mouseEnterTimer = null;\n if (level.id !== undefined) this.openFlyout(level.id);\n }, 200);\n }\n }\n\n handleMouseLeave(level: NavMainEntity) {\n // Cancel opening the flyout if a mouseleave event happens before the flyout opened\n if (this.mouseEnterTimer !== null) {\n window.clearTimeout(this.mouseEnterTimer);\n }\n\n // Don't close an open flyout if the mouseleave is from another mainnav entry\n if (this.activeFlyout && this.activeFlyout !== level.id) {\n return;\n }\n\n if (window.innerWidth >= 1024 && level.flyout.length > 0) {\n // Allow the pointer to shortly leave the flyout without closing it. This\n // allows for user mistakes and makes the experience less nervous\n this.mouseLeaveTimer = window.setTimeout(() => {\n this.closeFlyout(level.id);\n }, 300);\n }\n }\n\n handleTouchEnd(event: TouchEvent, level: NavMainEntity) {\n if (!this.isActiveFlyout(level.id) && !level.noFlyout) {\n // It's the first touchstart and has a flyout, prevent link activation and open the flyout\n if (event.cancelable) event.preventDefault();\n if (level.id) this.openFlyout(level.id);\n }\n }\n\n handleKeyPress(event: KeyboardEvent, level: NavMainEntity) {\n if (event.key === 'Enter' && !this.isActiveFlyout(level.id) && !level.noFlyout) {\n // It's the first enter keypress and has a flyout, prevent link activation and open the flyout\n event.preventDefault();\n if (level.id) this.openFlyout(level.id);\n }\n }\n\n handleClick(event: MouseEvent, level: NavMainEntity) {\n if (!this.isActiveFlyout(level.id) && !level.noFlyout) {\n // It's the first click, always open the flyout, never the link\n // This is relevant for desktop with active screenreader which\n // translates an enter keypress to a click\n event.preventDefault();\n if (level.id) this.openFlyout(level.id);\n }\n }\n\n /**\n * Disable or re-enable body scrolling, depending on whether mobile menu is open or closed\n */\n setBodyScroll() {\n if (this.mobileMenuOpen) {\n disableBodyScroll(this.flyoutElement);\n } else {\n enableBodyScroll(this.flyoutElement);\n }\n }\n\n /**\n * Toggle the main navigation (only visible on mobile)\n * @param force Force a state\n * @returns Boolean indicating new state\n */\n @Method()\n async toggleDropdown(force?: boolean) {\n this.mobileMenuOpen = force === undefined ? !this.mobileMenuOpen : force;\n this.dropdownToggled.emit({ open: this.mobileMenuOpen, element: this.host });\n\n if (force === false) {\n this.closeFlyout();\n }\n\n this.setBodyScroll();\n this.setWindowHeight();\n\n return this.mobileMenuOpen;\n }\n\n /**\n * Focus the main navigation toggle button\n */\n @Method()\n async setFocus() {\n const firstLink = this.host.shadowRoot?.querySelector<HTMLElement>('.main-link');\n if (firstLink) {\n firstLink.focus();\n }\n }\n\n /**\n * Open a specific flyout\n * @param id Flyout ID\n */\n @Method()\n async setActiveFlyout(id: string | null) {\n this.activeFlyout = id;\n this.flyoutToggled.emit(this.activeFlyout);\n }\n\n render() {\n if (state.localizedConfig?.header === undefined) return;\n const headerConfig = state.localizedConfig.header;\n\n return (\n <Host>\n <SvgSprite />\n <nav\n id=\"post-internet-header-main-navigation\"\n class={{ 'main-navigation': true, 'open': this.mobileMenuOpen }}\n ref={el => (this.flyoutElement = el)}\n >\n <h2 class=\"visually-hidden\">{headerConfig.translations.navMainAriaLabel}</h2>\n <ul class=\"main-container container\">\n {headerConfig.navMain.map(levelOne => (\n <li\n key={levelOne.text}\n onMouseLeave={() => this.handleMouseLeave(levelOne)}\n onMouseEnter={() => this.handleMouseEnter(levelOne)}\n >\n <LevelOneAction\n level={levelOne}\n isOpen={this.isActiveFlyout(levelOne.id)}\n onTouchEnd={e => this.handleTouchEnd(e, levelOne)}\n onKeyDown={e => this.handleKeyPress(e, levelOne)}\n onClick={e => this.handleClick(e, levelOne)}\n />\n {!levelOne.noFlyout ? (\n <div\n id={levelOne.id}\n class={{ flyout: true, open: this.isActiveFlyout(levelOne.id) }}\n >\n <div class=\"wide-container\">\n <div class=\"flyout-nav\">\n <button\n class=\"nav-link flyout-back-button\"\n onClick={() => this.closeFlyout(levelOne.id)}\n >\n <SvgIcon name=\"pi-pointy-arrow-right\" classNames=\"mirrored\" />\n <span>{headerConfig.translations.backButtonText}</span>\n </button>\n <button\n class=\"flyout-close-button\"\n onClick={() => this.closeFlyout(levelOne.id)}\n >\n <span class=\"visually-hidden\">\n {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 => (\n <div key={flyout.title} class=\"flyout-column\">\n {flyout.title ? <h3>{flyout.title}</h3> : null}\n <ul class=\"flyout-linklist\">\n {flyout.linkList.map(link => (\n <li key={link.url}>\n <a\n class={{\n 'flyout-link': true,\n 'active': !!link?.isActiveOverride,\n }}\n href={link.url}\n target={link.target}\n >\n {link.title}\n </a>\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n </div>\n </div>\n ) : null}\n </li>\n ))}\n </ul>\n <slot></slot>\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"post-main-navigation.entry.cjs.js","mappings":"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","names":["h","throttle","clearAllBodyScrollLocks","userPrefersReducedMotion","disableBodyScroll","enableBodyScroll","state","Host","SvgSprite","SvgIcon"],"sources":["./src/components/post-main-navigation/components/level-one-action.component.tsx","./src/components/post-main-navigation/post-main-navigation.scss?tag=post-main-navigation&encapsulation=shadow","./src/components/post-main-navigation/post-main-navigation.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { NavMainEntity } from '../../../models/header.model';\n\nexport const LevelOneAction = (props: {\n level: NavMainEntity;\n isOpen: boolean;\n onTouchEnd: (e: any) => void;\n onKeyDown: (e: any) => void;\n onClick: (e: any) => void;\n}) => {\n const TagName = props.level.url ? 'a' : 'button';\n\n return (\n <TagName\n class={{\n 'main-link': true,\n 'active': !!props.level.isActiveOverride,\n 'focus': props.isOpen,\n }}\n href={props.level.url}\n title={\n props.level.title?.trim() && props.level.title?.trim() !== props.level.text?.trim()\n ? props.level.title\n : undefined\n }\n tabindex={props.level.url ? undefined : 0}\n aria-haspopup={!props.level.noFlyout + ''}\n aria-expanded={props.level.noFlyout ? null : props.isOpen + ''}\n onTouchEnd={e => props.onTouchEnd(e)}\n onKeyDown={e => props.onKeyDown(e)}\n onClick={e => props.onClick(e)}\n >\n <span>{props.level.text}</span>\n <svg aria-hidden=\"true\">\n <use href=\"#pi-pointy-arrow-right\" />\n </svg>\n </TagName>\n );\n};\n","@use '@swisspost/design-system-styles/variables/color';\n@use '@swisspost/design-system-styles/placeholders/text';\n@use '@swisspost/design-system-styles/functions';\n@use '../../utils/utils.scss';\n@use '../../utils/mixins.scss';\n\n:host {\n --host-window-height: var(--window-height, 100vh);\n --calculated-header-height: calc(var(--header-height) + 1px);\n\n display: block;\n min-width: 0;\n height: var(--header-height);\n}\n\n:host(.no-animation) {\n * {\n animation: none !important;\n transition: none !important;\n }\n}\n\n.main-navigation,\n.main-container,\n.main-container li,\n.main-link {\n @include mixins.min(lg) {\n height: 100%;\n }\n}\n\n.main-navigation {\n font-size: functions.px-to-rem(18px);\n\n @include mixins.min(lg) {\n font-size: functions.px-to-rem(16px);\n margin: 0 0.75rem;\n }\n\n @include mixins.min(xl) {\n font-size: functions.px-to-rem(18px);\n }\n\n @include mixins.min(xxl) {\n font-size: functions.px-to-rem(20px);\n }\n\n @include mixins.max(lg) {\n position: absolute;\n top: var(--calculated-header-height);\n left: 0;\n background: white;\n height: calc(var(--host-window-height) - var(--calculated-header-height));\n width: 100%;\n margin: 0;\n overflow: hidden scroll;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior: contain;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n z-index: -1;\n visibility: hidden;\n transform: translateY(-100%);\n transition: transform 0.35s, visibility 0.35s;\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n\n &.open {\n transform: translateY(0);\n visibility: visible;\n }\n }\n}\n\n.main-container {\n @extend %no-list;\n\n display: flex;\n align-items: center;\n justify-content: flex-start;\n\n @include mixins.max(lg) {\n flex-direction: column;\n align-items: stretch;\n justify-content: flex-start;\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n\n > li + li {\n border-top: 1px solid color.$gray-10;\n }\n }\n\n @include mixins.min(lg) {\n padding-right: 0;\n padding-left: 0;\n }\n\n > li {\n flex: 0 1 auto;\n min-width: 0;\n }\n}\n\n.main-link {\n @extend %nav-link;\n\n display: flex;\n align-items: center;\n padding-right: 0.75rem;\n padding-left: 0.75rem;\n text-align: left;\n cursor: pointer;\n width: 100%;\n\n @include mixins.min(lg) {\n svg {\n display: none;\n }\n }\n\n @include mixins.max(lg) {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-weight: 300;\n padding: 0.625rem 0;\n width: 100%;\n text-align: left;\n\n svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n }\n\n span {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n}\n\n.main-link,\n.flyout-link {\n position: relative;\n color: black;\n\n &::after {\n content: '';\n position: absolute;\n bottom: -1px;\n left: 0;\n width: 100%;\n height: 4px;\n background-color: transparent;\n opacity: 0;\n transform: scaleX(0.8);\n transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &:hover,\n &.focus {\n &::after {\n background-color: color.$gray-20;\n opacity: 1;\n transform: scale(1);\n }\n }\n\n &.active {\n font-weight: 700;\n\n &::after {\n background-color: color.$yellow;\n opacity: 1;\n transform: scale(1);\n }\n }\n}\n\n.flyout {\n left: 0;\n width: 100%;\n background: white;\n padding-bottom: 3rem;\n overflow: auto;\n overscroll-behavior: contain;\n visibility: hidden;\n\n @include mixins.min(lg) {\n position: absolute;\n top: 100%;\n max-height: calc(100vh - var(--header-height) - var(--meta-header-height) - 1px);\n z-index: -1;\n box-shadow: 0 0 1px 0 rgb(0 0 0 / 40%);\n transform: translateY(-100%);\n\n &.open {\n box-shadow: 0 0 8px 0 rgb(0 0 0 / 40%);\n transform: translateY(0);\n }\n }\n\n @include mixins.max(lg) {\n position: fixed;\n top: 0;\n height: 100%;\n z-index: 1;\n transform: translateX(100%);\n\n &.open {\n transform: translateX(0);\n }\n }\n\n &.open {\n visibility: visible;\n }\n\n &.animate {\n transition: transform 0.35s, visibility 0.35s, box-shadow 0.35s;\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n}\n\n.flyout-nav {\n @extend %font-curve-small;\n\n display: flex;\n justify-content: space-between;\n min-height: 3.5rem;\n\n // Change box-sizing to content-box to add 1px border width to flyout-nav hight.\n // This ensures flyout-nav has same hight as main-navigation-container.\n box-sizing: content-box;\n}\n\n.flyout-row {\n display: flex;\n gap: 1.5rem;\n\n @include mixins.max(lg) {\n display: grid;\n grid-template-columns: 1fr 1fr;\n }\n\n @include mixins.max(rg) {\n grid-template-columns: 1fr;\n }\n}\n\n.flyout-column {\n flex: 1;\n max-width: 25%;\n\n @include mixins.max(lg) {\n max-width: none;\n }\n\n h3 {\n @extend %font-curve-small;\n margin-top: 0;\n }\n}\n\n.flyout-back-button {\n @include mixins.container-padding();\n\n display: flex;\n align-items: center;\n font-size: functions.px-to-rem(16px);\n font-weight: 400;\n cursor: pointer;\n\n svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n @include mixins.min(lg) {\n display: none;\n }\n}\n\n.flyout-close-button {\n @extend %nav-link;\n\n display: flex;\n align-items: center;\n margin-left: auto;\n padding: 0 1.5rem;\n cursor: pointer;\n\n svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n @include mixins.max(lg) {\n display: none;\n }\n}\n\n.flyout-linklist {\n @extend %no-list;\n\n li {\n border-top: 1px solid color.$gray-10;\n }\n\n &:first-child > li {\n border-top-color: transparent;\n }\n}\n\n.flyout-link {\n @extend %nav-link;\n\n display: block;\n padding: 0.75rem 0;\n}\n\n.flyout-title {\n @extend %font-curve-bigger-regular;\n\n margin: 2.5rem 0 1.5rem 0;\n\n @include mixins.min(lg) {\n display: none;\n }\n}\n","import { Component, Host, h, State, Method, Event, Element, EventEmitter } from '@stencil/core';\nimport { throttle } from 'throttle-debounce';\nimport { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';\nimport { state } from '../../data/store';\nimport {\n DropdownElement,\n DropdownEvent,\n HasDropdown,\n IsFocusable,\n NavMainEntity,\n} from '../../models/header.model';\nimport { userPrefersReducedMotion } from '../../services/ui.service';\nimport { SvgSprite } from '../../utils/svg-sprite.component';\nimport { SvgIcon } from '../../utils/svg-icon.component';\nimport { LevelOneAction } from './components/level-one-action.component';\n\n@Component({\n tag: 'post-main-navigation',\n styleUrl: 'post-main-navigation.scss',\n shadow: true,\n})\nexport class PostMainNavigation implements HasDropdown, IsFocusable {\n @State() activeFlyout: string | null;\n @State() mobileMenuOpen: boolean;\n @Event() dropdownToggled: EventEmitter<DropdownEvent>;\n @Event() flyoutToggled: EventEmitter<string | null>;\n @Element() host: DropdownElement;\n private throttledResize: throttle<() => void>;\n private resizeTimer: number | null = null;\n private mouseLeaveTimer: number | null = null;\n private mouseEnterTimer: number | null = null;\n private flyoutElement: HTMLElement | undefined;\n\n connectedCallback() {\n this.throttledResize = throttle(300, () => this.handleResize());\n window.addEventListener('resize', this.throttledResize, { passive: true });\n this.setWindowHeight();\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.throttledResize);\n clearAllBodyScrollLocks();\n if (this.mouseEnterTimer !== null) window.clearTimeout(this.mouseEnterTimer);\n if (this.mouseLeaveTimer !== null) window.clearTimeout(this.mouseLeaveTimer);\n }\n\n handleResize() {\n // Suspend all animations and transitions on window resize\n this.host.classList.add('no-animation');\n if (this.resizeTimer !== null) window.clearTimeout(this.resizeTimer);\n this.resizeTimer = window.setTimeout(() => {\n this.host.classList.remove('no-animation');\n }, 300);\n\n this.setWindowHeight();\n }\n\n // Update window height var\n setWindowHeight() {\n if (!this.host) {\n return;\n }\n this.host.style.setProperty('--window-height', `${window.innerHeight}px`);\n\n // Safari might or might not show a blank bar at the bottom where the browser\n // controls should be. This timeout waits for this bar to appear before resetting the available height\n window.setTimeout(() => {\n this.host.style.setProperty('--window-height', `${window.innerHeight}px`);\n }, 100);\n }\n\n openFlyout(id: string) {\n const flyout = this.host.shadowRoot?.getElementById(id);\n\n if (flyout && this.activeFlyout !== '') {\n // Add flyout animation if there's no flyout open\n this.addFlyoutAnimation(flyout);\n }\n\n this.activeFlyout = id;\n this.flyoutToggled.emit(id);\n this.setWindowHeight();\n\n if (this.mouseLeaveTimer !== null) {\n window.clearTimeout(this.mouseLeaveTimer);\n this.mouseLeaveTimer = null;\n }\n }\n\n closeFlyout(id?: string) {\n if (id === undefined) return;\n const flyout = this.host.shadowRoot?.getElementById(id);\n\n if (flyout) {\n // Add flyout animation for close action\n this.addFlyoutAnimation(flyout);\n }\n\n this.activeFlyout = null;\n this.flyoutToggled.emit();\n }\n\n addFlyoutAnimation(flyout: HTMLElement) {\n // Check if user prefers to see animations or not\n if (!userPrefersReducedMotion()) {\n flyout.classList.add('animate');\n\n // Remove flyout animation after transition ended\n flyout.addEventListener('transitionend', () => this.removeFlyoutAnimation(flyout), {\n once: true,\n });\n }\n }\n\n removeFlyoutAnimation(flyout: HTMLElement) {\n flyout.classList.remove('animate');\n }\n\n isActiveFlyout(id?: string) {\n return id === this.activeFlyout;\n }\n\n handleMouseEnter(level: NavMainEntity) {\n // Cancel opening the flyout if there already is one scheduled to open\n if (this.mouseEnterTimer !== null) {\n window.clearTimeout(this.mouseEnterTimer);\n this.mouseEnterTimer = null;\n }\n\n // Cancel closing if we enter again\n if (this.mouseLeaveTimer && this.activeFlyout === level.id) {\n window.clearTimeout(this.mouseLeaveTimer);\n this.mouseLeaveTimer = null;\n }\n\n if (window.innerWidth >= 1024 && level.flyout.length > 0 && this.activeFlyout !== level.id) {\n // Delay opening the flyout for a moment to give users a chance to move the mouse over the navigation without triggering the flyout\n this.mouseEnterTimer = window.setTimeout(() => {\n this.mouseEnterTimer = null;\n if (level.id !== undefined) this.openFlyout(level.id);\n }, 200);\n }\n }\n\n handleMouseLeave(level: NavMainEntity) {\n // Cancel opening the flyout if a mouseleave event happens before the flyout opened\n if (this.mouseEnterTimer !== null) {\n window.clearTimeout(this.mouseEnterTimer);\n }\n\n // Don't close an open flyout if the mouseleave is from another mainnav entry\n if (this.activeFlyout && this.activeFlyout !== level.id) {\n return;\n }\n\n if (window.innerWidth >= 1024 && level.flyout.length > 0) {\n // Allow the pointer to shortly leave the flyout without closing it. This\n // allows for user mistakes and makes the experience less nervous\n this.mouseLeaveTimer = window.setTimeout(() => {\n this.closeFlyout(level.id);\n }, 300);\n }\n }\n\n handleTouchEnd(event: TouchEvent, level: NavMainEntity) {\n if (!this.isActiveFlyout(level.id) && !level.noFlyout) {\n // It's the first touchstart and has a flyout, prevent link activation and open the flyout\n if (event.cancelable) event.preventDefault();\n if (level.id) this.openFlyout(level.id);\n }\n }\n\n handleKeyPress(event: KeyboardEvent, level: NavMainEntity) {\n if (event.key === 'Enter' && !this.isActiveFlyout(level.id) && !level.noFlyout) {\n // It's the first enter keypress and has a flyout, prevent link activation and open the flyout\n event.preventDefault();\n if (level.id) this.openFlyout(level.id);\n }\n }\n\n handleClick(event: MouseEvent, level: NavMainEntity) {\n if (!this.isActiveFlyout(level.id) && !level.noFlyout) {\n // It's the first click, always open the flyout, never the link\n // This is relevant for desktop with active screenreader which\n // translates an enter keypress to a click\n event.preventDefault();\n if (level.id) this.openFlyout(level.id);\n }\n }\n\n /**\n * Disable or re-enable body scrolling, depending on whether mobile menu is open or closed\n */\n setBodyScroll() {\n if (this.mobileMenuOpen) {\n disableBodyScroll(this.flyoutElement);\n } else {\n enableBodyScroll(this.flyoutElement);\n }\n }\n\n /**\n * Toggle the main navigation (only visible on mobile)\n * @param force Force a state\n * @returns Boolean indicating new state\n */\n @Method()\n async toggleDropdown(force?: boolean) {\n this.mobileMenuOpen = force === undefined ? !this.mobileMenuOpen : force;\n this.dropdownToggled.emit({ open: this.mobileMenuOpen, element: this.host });\n\n if (force === false) {\n this.closeFlyout();\n }\n\n this.setBodyScroll();\n this.setWindowHeight();\n\n return this.mobileMenuOpen;\n }\n\n /**\n * Focus the main navigation toggle button\n */\n @Method()\n async setFocus() {\n const firstLink = this.host.shadowRoot?.querySelector<HTMLElement>('.main-link');\n if (firstLink) {\n firstLink.focus();\n }\n }\n\n /**\n * Open a specific flyout\n * @param id Flyout ID\n */\n @Method()\n async setActiveFlyout(id: string | null) {\n this.activeFlyout = id;\n this.flyoutToggled.emit(this.activeFlyout);\n }\n\n render() {\n if (state.localizedConfig?.header === undefined) return;\n const headerConfig = state.localizedConfig.header;\n\n return (\n <Host>\n <SvgSprite />\n <nav\n id=\"post-internet-header-main-navigation\"\n class={{ 'main-navigation': true, 'open': this.mobileMenuOpen }}\n ref={el => (this.flyoutElement = el)}\n >\n <h2 class=\"visually-hidden\">{headerConfig.translations.navMainAriaLabel}</h2>\n <ul class=\"main-container container\">\n {headerConfig.navMain.map(levelOne => (\n <li\n key={levelOne.text}\n onMouseLeave={() => this.handleMouseLeave(levelOne)}\n onMouseEnter={() => this.handleMouseEnter(levelOne)}\n >\n <LevelOneAction\n level={levelOne}\n isOpen={this.isActiveFlyout(levelOne.id)}\n onTouchEnd={e => this.handleTouchEnd(e, levelOne)}\n onKeyDown={e => this.handleKeyPress(e, levelOne)}\n onClick={e => this.handleClick(e, levelOne)}\n />\n {!levelOne.noFlyout ? (\n <div\n id={levelOne.id}\n class={{ flyout: true, open: this.isActiveFlyout(levelOne.id) }}\n >\n <div class=\"wide-container\">\n <div class=\"flyout-nav\">\n <button\n class=\"nav-link flyout-back-button\"\n onClick={() => this.closeFlyout(levelOne.id)}\n >\n <SvgIcon name=\"pi-pointy-arrow-right\" classNames=\"mirrored\" />\n <span>{headerConfig.translations.backButtonText}</span>\n </button>\n <button\n class=\"flyout-close-button\"\n onClick={() => this.closeFlyout(levelOne.id)}\n >\n <span class=\"visually-hidden\">\n {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 => (\n <div key={flyout.title} class=\"flyout-column\">\n {flyout.title ? <h3>{flyout.title}</h3> : null}\n <ul class=\"flyout-linklist\">\n {flyout.linkList.map(link => (\n <li key={link.url}>\n <a\n class={{\n 'flyout-link': true,\n 'active': !!link?.isActiveOverride,\n }}\n href={link.url}\n target={link.target}\n >\n {link.title}\n </a>\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n </div>\n </div>\n ) : null}\n </li>\n ))}\n </ul>\n <slot></slot>\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/cjs/swisspost-internet-header.cjs.entry.js CHANGED
@@ -337,7 +337,7 @@ const setMainNavigationIds = (navMainEntities) => {
337
337
  };
338
338
 
339
339
  const name = "@swisspost/internet-header";
340
- const version = "1.5.0";
340
+ const version = "1.5.1";
341
341
  const description = "Swiss Post Internet Header";
342
342
  const license = "Apache-2.0";
343
343
  const main = "loader/index.cjs.js";
package/dist/collection/components/post-main-navigation/post-main-navigation.css CHANGED
@@ -285,11 +285,11 @@ svg {
285
285
  @media (min-width: 1024px) {
286
286
  .main-navigation {
287
287
  font-size: 1rem;
288
+ margin: 0 0.75rem;
288
289
  }
289
290
  }
290
291
  @media (min-width: 1280px) {
291
292
  .main-navigation {
292
- margin: 0 0.75rem;
293
293
  font-size: 1.125rem;
294
294
  }
295
295
  }
package/dist/components/post-main-navigation2.js CHANGED
@@ -21,7 +21,7 @@ const LevelOneAction = (props) => {
21
21
  h("use", { href: "#pi-pointy-arrow-right" }))));
22
22
  };
23
23
 
24
- const postMainNavigationCss = ".flyout-nav,.flyout-column h3{font-size:0.9375rem;line-height:1.4}@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;line-height:1.4}@media (min-width: 600px){.flyout-title{font-size:1.25rem}}@media (min-width: 1024px){.flyout-title{font-size:1.5rem;line-height:1.1}}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:700;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2\") format(\"woff2\"), url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:400;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2\") format(\"woff2\"), url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:300;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2\") format(\"woff2\"), url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff\") format(\"woff\")}*,:host,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{font-family:\"Frutiger Neue For Post\", system-ui, sans-serif}button{font:inherit;padding:0}img,svg{max-width:100%;max-height:100%}@media (forced-colors: active){svg{color:white}}.main-container,.flyout-linklist,.no-list{list-style:none;padding-left:0;margin-top:0;margin-bottom:0}.btn-blank{background-color:transparent;border:none;border-radius:0;padding:0}.main-link,.flyout-close-button,.flyout-link,.nav-link{text-decoration:none;color:rgba(0, 0, 0, 0.8);-webkit-transition:color 200ms;transition:color 200ms;background-color:transparent;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.5rem}.main-link:hover,.flyout-close-button:hover,.flyout-link:hover,.nav-link:hover,.main-link:focus,.flyout-close-button:focus,.flyout-link:focus,.nav-link:focus{color:black}.main-link>svg,.flyout-close-button>svg,.flyout-link>svg,.nav-link>svg{width:1.4em;height:1.4em;-ms-flex-negative:0;flex-shrink:0}.main-link>span,.flyout-close-button>span,.flyout-link>span,.nav-link>span{-ms-flex-negative:1;flex-shrink:1}.box>*:first-child{margin-top:0}.box>*:last-child{margin-bottom:0}.mirrored{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.bold{font-weight:700}.light{font-weight:300}.d-flex{display:-ms-flexbox;display:flex}.d-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.align-items-center{-ms-flex-align:center;align-items:center}@media (min-width: 1441px){.wide-container{margin:0 auto;max-width:1440px}}@media (max-width: 599.98px){.container{padding-right:16px;padding-left:16px}}@media (min-width: 600px) and (max-width: 1023.98px){.container{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.container{padding-right:40px;padding-left:40px}}.visually-hidden{position:absolute;width:1px;height:1px;border:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}@media (max-width: -0.02px){.hidden-xs{display:none}}@media (max-width: 399.98px){.hidden-sm{display:none}}@media (max-width: 599.98px){.hidden-rg{display:none}}@media (max-width: 779.98px){.hidden-md{display:none}}@media (max-width: 1023.98px){.hidden-lg{display:none}}@media (max-width: 1279.98px){.hidden-xl{display:none}}@media (max-width: 1440.98px){.hidden-xxl{display:none}}:host{--host-window-height:var(--window-height, 100vh);--calculated-header-height:calc(var(--header-height) + 1px);display:block;min-width:0;height:var(--header-height)}:host(.no-animation) *{-webkit-animation:none !important;animation:none !important;-webkit-transition:none !important;transition:none !important}@media (min-width: 1024px){.main-navigation,.main-container,.main-container li,.main-link{height:100%}}.main-navigation{font-size:1.125rem}@media (min-width: 1024px){.main-navigation{font-size:1rem}}@media (min-width: 1280px){.main-navigation{margin:0 0.75rem;font-size:1.125rem}}@media (min-width: 1441px){.main-navigation{font-size:1.25rem}}@media (max-width: 1023.98px){.main-navigation{position:absolute;top:var(--calculated-header-height);left:0;background:white;height:calc(var(--host-window-height) - var(--calculated-header-height));width:100%;margin:0;overflow:hidden scroll;-webkit-overflow-scrolling:touch;-ms-scroll-chaining:none;overscroll-behavior:contain;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;z-index:-1;visibility:hidden;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:visibility 0.35s, -webkit-transform 0.35s;transition:visibility 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, visibility 0.35s;transition:transform 0.35s, visibility 0.35s, -webkit-transform 0.35s}}@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce){.main-navigation{-webkit-transition:none;transition:none}}@media (max-width: 1023.98px){.main-navigation.open{-webkit-transform:translateY(0);transform:translateY(0);visibility:visible}}.main-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}@media (max-width: 1023.98px){.main-container{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start;padding-top:2.5rem;padding-bottom:2.5rem}.main-container>li+li{border-top:1px solid #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:0.75rem;padding-left:0.75rem;text-align:left;cursor:pointer;width:100%}@media (min-width: 1024px){.main-link svg{display:none}}@media (max-width: 1023.98px){.main-link{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;font-weight:300;padding:0.625rem 0;width:100%;text-align:left}.main-link svg{width:1.5rem;height:1.5rem}}.main-link span{overflow:hidden;text-overflow:ellipsis}.main-link,.flyout-link{position:relative;color:black}.main-link::after,.flyout-link::after{content:\"\";position:absolute;bottom:-1px;left:0;width:100%;height:4px;background-color:transparent;opacity:0;-webkit-transform:scaleX(0.8);transform:scaleX(0.8);-webkit-transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)}@media (prefers-reduced-motion: reduce){.main-link::after,.flyout-link::after{-webkit-transition:none;transition:none}}.main-link:hover::after,.main-link.focus::after,.flyout-link:hover::after,.flyout-link.focus::after{background-color:#cccccc;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.main-link.active,.flyout-link.active{font-weight:700}.main-link.active::after,.flyout-link.active::after{background-color:#fc0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.flyout{left:0;width:100%;background:white;padding-bottom:3rem;overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;visibility:hidden}@media (min-width: 1024px){.flyout{position:absolute;top:100%;max-height:calc(100vh - var(--header-height) - var(--meta-header-height) - 1px);z-index:-1;-webkit-box-shadow:0 0 1px 0 rgba(0, 0, 0, 0.4);box-shadow:0 0 1px 0 rgba(0, 0, 0, 0.4);-webkit-transform:translateY(-100%);transform:translateY(-100%)}.flyout.open{-webkit-box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.4);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.4);-webkit-transform:translateY(0);transform:translateY(0)}}@media (max-width: 1023.98px){.flyout{position:fixed;top:0;height:100%;z-index:1;-webkit-transform:translateX(100%);transform:translateX(100%)}.flyout.open{-webkit-transform:translateX(0);transform:translateX(0)}}.flyout.open{visibility:visible}.flyout.animate{-webkit-transition:visibility 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s;transition:visibility 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s;transition:transform 0.35s, visibility 0.35s, box-shadow 0.35s;transition:transform 0.35s, visibility 0.35s, box-shadow 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s}@media (prefers-reduced-motion: reduce){.flyout.animate{-webkit-transition:none;transition:none}}.flyout-nav{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;min-height:3.5rem;-webkit-box-sizing:content-box;box-sizing:content-box}.flyout-row{display:-ms-flexbox;display:flex;gap:1.5rem}@media (max-width: 1023.98px){.flyout-row{display:grid;grid-template-columns:1fr 1fr}}@media (max-width: 599.98px){.flyout-row{grid-template-columns:1fr}}.flyout-column{-ms-flex:1;flex:1;max-width:25%}@media (max-width: 1023.98px){.flyout-column{max-width:none}}.flyout-column h3{margin-top:0}.flyout-back-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:1rem;font-weight:400;cursor:pointer}@media (max-width: 599.98px){.flyout-back-button{padding-right:16px;padding-left:16px}}@media (min-width: 600px) and (max-width: 1023.98px){.flyout-back-button{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.flyout-back-button{padding-right:40px;padding-left:40px}}.flyout-back-button svg{width:1.5rem;height:1.5rem}@media (min-width: 1024px){.flyout-back-button{display:none}}.flyout-close-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-left:auto;padding:0 1.5rem;cursor:pointer}.flyout-close-button svg{width:1.5rem;height:1.5rem}@media (max-width: 1023.98px){.flyout-close-button{display:none}}.flyout-linklist li{border-top:1px solid #e6e6e6}.flyout-linklist:first-child>li{border-top-color:transparent}.flyout-link{display:block;padding:0.75rem 0}.flyout-title{margin:2.5rem 0 1.5rem 0}@media (min-width: 1024px){.flyout-title{display:none}}";
24
+ const postMainNavigationCss = ".flyout-nav,.flyout-column h3{font-size:0.9375rem;line-height:1.4}@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;line-height:1.4}@media (min-width: 600px){.flyout-title{font-size:1.25rem}}@media (min-width: 1024px){.flyout-title{font-size:1.5rem;line-height:1.1}}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:700;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2\") format(\"woff2\"), url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:400;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2\") format(\"woff2\"), url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:300;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2\") format(\"woff2\"), url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff\") format(\"woff\")}*,:host,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{font-family:\"Frutiger Neue For Post\", system-ui, sans-serif}button{font:inherit;padding:0}img,svg{max-width:100%;max-height:100%}@media (forced-colors: active){svg{color:white}}.main-container,.flyout-linklist,.no-list{list-style:none;padding-left:0;margin-top:0;margin-bottom:0}.btn-blank{background-color:transparent;border:none;border-radius:0;padding:0}.main-link,.flyout-close-button,.flyout-link,.nav-link{text-decoration:none;color:rgba(0, 0, 0, 0.8);-webkit-transition:color 200ms;transition:color 200ms;background-color:transparent;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.5rem}.main-link:hover,.flyout-close-button:hover,.flyout-link:hover,.nav-link:hover,.main-link:focus,.flyout-close-button:focus,.flyout-link:focus,.nav-link:focus{color:black}.main-link>svg,.flyout-close-button>svg,.flyout-link>svg,.nav-link>svg{width:1.4em;height:1.4em;-ms-flex-negative:0;flex-shrink:0}.main-link>span,.flyout-close-button>span,.flyout-link>span,.nav-link>span{-ms-flex-negative:1;flex-shrink:1}.box>*:first-child{margin-top:0}.box>*:last-child{margin-bottom:0}.mirrored{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.bold{font-weight:700}.light{font-weight:300}.d-flex{display:-ms-flexbox;display:flex}.d-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.align-items-center{-ms-flex-align:center;align-items:center}@media (min-width: 1441px){.wide-container{margin:0 auto;max-width:1440px}}@media (max-width: 599.98px){.container{padding-right:16px;padding-left:16px}}@media (min-width: 600px) and (max-width: 1023.98px){.container{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.container{padding-right:40px;padding-left:40px}}.visually-hidden{position:absolute;width:1px;height:1px;border:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}@media (max-width: -0.02px){.hidden-xs{display:none}}@media (max-width: 399.98px){.hidden-sm{display:none}}@media (max-width: 599.98px){.hidden-rg{display:none}}@media (max-width: 779.98px){.hidden-md{display:none}}@media (max-width: 1023.98px){.hidden-lg{display:none}}@media (max-width: 1279.98px){.hidden-xl{display:none}}@media (max-width: 1440.98px){.hidden-xxl{display:none}}:host{--host-window-height:var(--window-height, 100vh);--calculated-header-height:calc(var(--header-height) + 1px);display:block;min-width:0;height:var(--header-height)}:host(.no-animation) *{-webkit-animation:none !important;animation:none !important;-webkit-transition:none !important;transition:none !important}@media (min-width: 1024px){.main-navigation,.main-container,.main-container li,.main-link{height:100%}}.main-navigation{font-size:1.125rem}@media (min-width: 1024px){.main-navigation{font-size:1rem;margin:0 0.75rem}}@media (min-width: 1280px){.main-navigation{font-size:1.125rem}}@media (min-width: 1441px){.main-navigation{font-size:1.25rem}}@media (max-width: 1023.98px){.main-navigation{position:absolute;top:var(--calculated-header-height);left:0;background:white;height:calc(var(--host-window-height) - var(--calculated-header-height));width:100%;margin:0;overflow:hidden scroll;-webkit-overflow-scrolling:touch;-ms-scroll-chaining:none;overscroll-behavior:contain;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;z-index:-1;visibility:hidden;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:visibility 0.35s, -webkit-transform 0.35s;transition:visibility 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, visibility 0.35s;transition:transform 0.35s, visibility 0.35s, -webkit-transform 0.35s}}@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce){.main-navigation{-webkit-transition:none;transition:none}}@media (max-width: 1023.98px){.main-navigation.open{-webkit-transform:translateY(0);transform:translateY(0);visibility:visible}}.main-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}@media (max-width: 1023.98px){.main-container{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start;padding-top:2.5rem;padding-bottom:2.5rem}.main-container>li+li{border-top:1px solid #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:0.75rem;padding-left:0.75rem;text-align:left;cursor:pointer;width:100%}@media (min-width: 1024px){.main-link svg{display:none}}@media (max-width: 1023.98px){.main-link{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;font-weight:300;padding:0.625rem 0;width:100%;text-align:left}.main-link svg{width:1.5rem;height:1.5rem}}.main-link span{overflow:hidden;text-overflow:ellipsis}.main-link,.flyout-link{position:relative;color:black}.main-link::after,.flyout-link::after{content:\"\";position:absolute;bottom:-1px;left:0;width:100%;height:4px;background-color:transparent;opacity:0;-webkit-transform:scaleX(0.8);transform:scaleX(0.8);-webkit-transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)}@media (prefers-reduced-motion: reduce){.main-link::after,.flyout-link::after{-webkit-transition:none;transition:none}}.main-link:hover::after,.main-link.focus::after,.flyout-link:hover::after,.flyout-link.focus::after{background-color:#cccccc;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.main-link.active,.flyout-link.active{font-weight:700}.main-link.active::after,.flyout-link.active::after{background-color:#fc0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.flyout{left:0;width:100%;background:white;padding-bottom:3rem;overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;visibility:hidden}@media (min-width: 1024px){.flyout{position:absolute;top:100%;max-height:calc(100vh - var(--header-height) - var(--meta-header-height) - 1px);z-index:-1;-webkit-box-shadow:0 0 1px 0 rgba(0, 0, 0, 0.4);box-shadow:0 0 1px 0 rgba(0, 0, 0, 0.4);-webkit-transform:translateY(-100%);transform:translateY(-100%)}.flyout.open{-webkit-box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.4);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.4);-webkit-transform:translateY(0);transform:translateY(0)}}@media (max-width: 1023.98px){.flyout{position:fixed;top:0;height:100%;z-index:1;-webkit-transform:translateX(100%);transform:translateX(100%)}.flyout.open{-webkit-transform:translateX(0);transform:translateX(0)}}.flyout.open{visibility:visible}.flyout.animate{-webkit-transition:visibility 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s;transition:visibility 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s;transition:transform 0.35s, visibility 0.35s, box-shadow 0.35s;transition:transform 0.35s, visibility 0.35s, box-shadow 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s}@media (prefers-reduced-motion: reduce){.flyout.animate{-webkit-transition:none;transition:none}}.flyout-nav{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;min-height:3.5rem;-webkit-box-sizing:content-box;box-sizing:content-box}.flyout-row{display:-ms-flexbox;display:flex;gap:1.5rem}@media (max-width: 1023.98px){.flyout-row{display:grid;grid-template-columns:1fr 1fr}}@media (max-width: 599.98px){.flyout-row{grid-template-columns:1fr}}.flyout-column{-ms-flex:1;flex:1;max-width:25%}@media (max-width: 1023.98px){.flyout-column{max-width:none}}.flyout-column h3{margin-top:0}.flyout-back-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:1rem;font-weight:400;cursor:pointer}@media (max-width: 599.98px){.flyout-back-button{padding-right:16px;padding-left:16px}}@media (min-width: 600px) and (max-width: 1023.98px){.flyout-back-button{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.flyout-back-button{padding-right:40px;padding-left:40px}}.flyout-back-button svg{width:1.5rem;height:1.5rem}@media (min-width: 1024px){.flyout-back-button{display:none}}.flyout-close-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-left:auto;padding:0 1.5rem;cursor:pointer}.flyout-close-button svg{width:1.5rem;height:1.5rem}@media (max-width: 1023.98px){.flyout-close-button{display:none}}.flyout-linklist li{border-top:1px solid #e6e6e6}.flyout-linklist:first-child>li{border-top-color:transparent}.flyout-link{display:block;padding:0.75rem 0}.flyout-title{margin:2.5rem 0 1.5rem 0}@media (min-width: 1024px){.flyout-title{display:none}}";
25
25
 
26
26
  const PostMainNavigation = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
27
27
  constructor() {
package/dist/components/post-main-navigation2.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"post-main-navigation2.js","mappings":"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","names":[],"sources":["./src/components/post-main-navigation/components/level-one-action.component.tsx","./src/components/post-main-navigation/post-main-navigation.scss?tag=post-main-navigation&encapsulation=shadow","./src/components/post-main-navigation/post-main-navigation.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { NavMainEntity } from '../../../models/header.model';\n\nexport const LevelOneAction = (props: {\n level: NavMainEntity;\n isOpen: boolean;\n onTouchEnd: (e: any) => void;\n onKeyDown: (e: any) => void;\n onClick: (e: any) => void;\n}) => {\n const TagName = props.level.url ? 'a' : 'button';\n\n return (\n <TagName\n class={{\n 'main-link': true,\n 'active': !!props.level.isActiveOverride,\n 'focus': props.isOpen,\n }}\n href={props.level.url}\n title={\n props.level.title?.trim() && props.level.title?.trim() !== props.level.text?.trim()\n ? props.level.title\n : undefined\n }\n tabindex={props.level.url ? undefined : 0}\n aria-haspopup={!props.level.noFlyout + ''}\n aria-expanded={props.level.noFlyout ? null : props.isOpen + ''}\n onTouchEnd={e => props.onTouchEnd(e)}\n onKeyDown={e => props.onKeyDown(e)}\n onClick={e => props.onClick(e)}\n >\n <span>{props.level.text}</span>\n <svg aria-hidden=\"true\">\n <use href=\"#pi-pointy-arrow-right\" />\n </svg>\n </TagName>\n );\n};\n","@use '@swisspost/design-system-styles/variables/color';\n@use '@swisspost/design-system-styles/placeholders/text';\n@use '@swisspost/design-system-styles/functions';\n@use '../../utils/utils.scss';\n@use '../../utils/mixins.scss';\n\n:host {\n --host-window-height: var(--window-height, 100vh);\n --calculated-header-height: calc(var(--header-height) + 1px);\n\n display: block;\n min-width: 0;\n height: var(--header-height);\n}\n\n:host(.no-animation) {\n * {\n animation: none !important;\n transition: none !important;\n }\n}\n\n.main-navigation,\n.main-container,\n.main-container li,\n.main-link {\n @include mixins.min(lg) {\n height: 100%;\n }\n}\n\n.main-navigation {\n font-size: functions.px-to-rem(18px);\n\n @include mixins.min(lg) {\n font-size: functions.px-to-rem(16px);\n }\n\n @include mixins.min(xl) {\n margin: 0 0.75rem;\n font-size: functions.px-to-rem(18px);\n }\n\n @include mixins.min(xxl) {\n font-size: functions.px-to-rem(20px);\n }\n\n @include mixins.max(lg) {\n position: absolute;\n top: var(--calculated-header-height);\n left: 0;\n background: white;\n height: calc(var(--host-window-height) - var(--calculated-header-height));\n width: 100%;\n margin: 0;\n overflow: hidden scroll;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior: contain;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n z-index: -1;\n visibility: hidden;\n transform: translateY(-100%);\n transition: transform 0.35s, visibility 0.35s;\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n\n &.open {\n transform: translateY(0);\n visibility: visible;\n }\n }\n}\n\n.main-container {\n @extend %no-list;\n\n display: flex;\n align-items: center;\n justify-content: flex-start;\n\n @include mixins.max(lg) {\n flex-direction: column;\n align-items: stretch;\n justify-content: flex-start;\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n\n > li + li {\n border-top: 1px solid color.$gray-10;\n }\n }\n\n @include mixins.min(lg) {\n padding-right: 0;\n padding-left: 0;\n }\n\n > li {\n flex: 0 1 auto;\n min-width: 0;\n }\n}\n\n.main-link {\n @extend %nav-link;\n\n display: flex;\n align-items: center;\n padding-right: 0.75rem;\n padding-left: 0.75rem;\n text-align: left;\n cursor: pointer;\n width: 100%;\n\n @include mixins.min(lg) {\n svg {\n display: none;\n }\n }\n\n @include mixins.max(lg) {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-weight: 300;\n padding: 0.625rem 0;\n width: 100%;\n text-align: left;\n\n svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n }\n\n span {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n}\n\n.main-link,\n.flyout-link {\n position: relative;\n color: black;\n\n &::after {\n content: '';\n position: absolute;\n bottom: -1px;\n left: 0;\n width: 100%;\n height: 4px;\n background-color: transparent;\n opacity: 0;\n transform: scaleX(0.8);\n transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &:hover,\n &.focus {\n &::after {\n background-color: color.$gray-20;\n opacity: 1;\n transform: scale(1);\n }\n }\n\n &.active {\n font-weight: 700;\n\n &::after {\n background-color: color.$yellow;\n opacity: 1;\n transform: scale(1);\n }\n }\n}\n\n.flyout {\n left: 0;\n width: 100%;\n background: white;\n padding-bottom: 3rem;\n overflow: auto;\n overscroll-behavior: contain;\n visibility: hidden;\n\n @include mixins.min(lg) {\n position: absolute;\n top: 100%;\n max-height: calc(100vh - var(--header-height) - var(--meta-header-height) - 1px);\n z-index: -1;\n box-shadow: 0 0 1px 0 rgb(0 0 0 / 40%);\n transform: translateY(-100%);\n\n &.open {\n box-shadow: 0 0 8px 0 rgb(0 0 0 / 40%);\n transform: translateY(0);\n }\n }\n\n @include mixins.max(lg) {\n position: fixed;\n top: 0;\n height: 100%;\n z-index: 1;\n transform: translateX(100%);\n\n &.open {\n transform: translateX(0);\n }\n }\n\n &.open {\n visibility: visible;\n }\n\n &.animate {\n transition: transform 0.35s, visibility 0.35s, box-shadow 0.35s;\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n}\n\n.flyout-nav {\n @extend %font-curve-small;\n\n display: flex;\n justify-content: space-between;\n min-height: 3.5rem;\n\n // Change box-sizing to content-box to add 1px border width to flyout-nav hight.\n // This ensures flyout-nav has same hight as main-navigation-container.\n box-sizing: content-box;\n}\n\n.flyout-row {\n display: flex;\n gap: 1.5rem;\n\n @include mixins.max(lg) {\n display: grid;\n grid-template-columns: 1fr 1fr;\n }\n\n @include mixins.max(rg) {\n grid-template-columns: 1fr;\n }\n}\n\n.flyout-column {\n flex: 1;\n max-width: 25%;\n\n @include mixins.max(lg) {\n max-width: none;\n }\n\n h3 {\n @extend %font-curve-small;\n margin-top: 0;\n }\n}\n\n.flyout-back-button {\n @include mixins.container-padding();\n\n display: flex;\n align-items: center;\n font-size: functions.px-to-rem(16px);\n font-weight: 400;\n cursor: pointer;\n\n svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n @include mixins.min(lg) {\n display: none;\n }\n}\n\n.flyout-close-button {\n @extend %nav-link;\n\n display: flex;\n align-items: center;\n margin-left: auto;\n padding: 0 1.5rem;\n cursor: pointer;\n\n svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n @include mixins.max(lg) {\n display: none;\n }\n}\n\n.flyout-linklist {\n @extend %no-list;\n\n li {\n border-top: 1px solid color.$gray-10;\n }\n\n &:first-child > li {\n border-top-color: transparent;\n }\n}\n\n.flyout-link {\n @extend %nav-link;\n\n display: block;\n padding: 0.75rem 0;\n}\n\n.flyout-title {\n @extend %font-curve-bigger-regular;\n\n margin: 2.5rem 0 1.5rem 0;\n\n @include mixins.min(lg) {\n display: none;\n }\n}\n","import { Component, Host, h, State, Method, Event, Element, EventEmitter } from '@stencil/core';\nimport { throttle } from 'throttle-debounce';\nimport { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';\nimport { state } from '../../data/store';\nimport {\n DropdownElement,\n DropdownEvent,\n HasDropdown,\n IsFocusable,\n NavMainEntity,\n} from '../../models/header.model';\nimport { userPrefersReducedMotion } from '../../services/ui.service';\nimport { SvgSprite } from '../../utils/svg-sprite.component';\nimport { SvgIcon } from '../../utils/svg-icon.component';\nimport { LevelOneAction } from './components/level-one-action.component';\n\n@Component({\n tag: 'post-main-navigation',\n styleUrl: 'post-main-navigation.scss',\n shadow: true,\n})\nexport class PostMainNavigation implements HasDropdown, IsFocusable {\n @State() activeFlyout: string | null;\n @State() mobileMenuOpen: boolean;\n @Event() dropdownToggled: EventEmitter<DropdownEvent>;\n @Event() flyoutToggled: EventEmitter<string | null>;\n @Element() host: DropdownElement;\n private throttledResize: throttle<() => void>;\n private resizeTimer: number | null = null;\n private mouseLeaveTimer: number | null = null;\n private mouseEnterTimer: number | null = null;\n private flyoutElement: HTMLElement | undefined;\n\n connectedCallback() {\n this.throttledResize = throttle(300, () => this.handleResize());\n window.addEventListener('resize', this.throttledResize, { passive: true });\n this.setWindowHeight();\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.throttledResize);\n clearAllBodyScrollLocks();\n if (this.mouseEnterTimer !== null) window.clearTimeout(this.mouseEnterTimer);\n if (this.mouseLeaveTimer !== null) window.clearTimeout(this.mouseLeaveTimer);\n }\n\n handleResize() {\n // Suspend all animations and transitions on window resize\n this.host.classList.add('no-animation');\n if (this.resizeTimer !== null) window.clearTimeout(this.resizeTimer);\n this.resizeTimer = window.setTimeout(() => {\n this.host.classList.remove('no-animation');\n }, 300);\n\n this.setWindowHeight();\n }\n\n // Update window height var\n setWindowHeight() {\n if (!this.host) {\n return;\n }\n this.host.style.setProperty('--window-height', `${window.innerHeight}px`);\n\n // Safari might or might not show a blank bar at the bottom where the browser\n // controls should be. This timeout waits for this bar to appear before resetting the available height\n window.setTimeout(() => {\n this.host.style.setProperty('--window-height', `${window.innerHeight}px`);\n }, 100);\n }\n\n openFlyout(id: string) {\n const flyout = this.host.shadowRoot?.getElementById(id);\n\n if (flyout && this.activeFlyout !== '') {\n // Add flyout animation if there's no flyout open\n this.addFlyoutAnimation(flyout);\n }\n\n this.activeFlyout = id;\n this.flyoutToggled.emit(id);\n this.setWindowHeight();\n\n if (this.mouseLeaveTimer !== null) {\n window.clearTimeout(this.mouseLeaveTimer);\n this.mouseLeaveTimer = null;\n }\n }\n\n closeFlyout(id?: string) {\n if (id === undefined) return;\n const flyout = this.host.shadowRoot?.getElementById(id);\n\n if (flyout) {\n // Add flyout animation for close action\n this.addFlyoutAnimation(flyout);\n }\n\n this.activeFlyout = null;\n this.flyoutToggled.emit();\n }\n\n addFlyoutAnimation(flyout: HTMLElement) {\n // Check if user prefers to see animations or not\n if (!userPrefersReducedMotion()) {\n flyout.classList.add('animate');\n\n // Remove flyout animation after transition ended\n flyout.addEventListener('transitionend', () => this.removeFlyoutAnimation(flyout), {\n once: true,\n });\n }\n }\n\n removeFlyoutAnimation(flyout: HTMLElement) {\n flyout.classList.remove('animate');\n }\n\n isActiveFlyout(id?: string) {\n return id === this.activeFlyout;\n }\n\n handleMouseEnter(level: NavMainEntity) {\n // Cancel opening the flyout if there already is one scheduled to open\n if (this.mouseEnterTimer !== null) {\n window.clearTimeout(this.mouseEnterTimer);\n this.mouseEnterTimer = null;\n }\n\n // Cancel closing if we enter again\n if (this.mouseLeaveTimer && this.activeFlyout === level.id) {\n window.clearTimeout(this.mouseLeaveTimer);\n this.mouseLeaveTimer = null;\n }\n\n if (window.innerWidth >= 1024 && level.flyout.length > 0 && this.activeFlyout !== level.id) {\n // Delay opening the flyout for a moment to give users a chance to move the mouse over the navigation without triggering the flyout\n this.mouseEnterTimer = window.setTimeout(() => {\n this.mouseEnterTimer = null;\n if (level.id !== undefined) this.openFlyout(level.id);\n }, 200);\n }\n }\n\n handleMouseLeave(level: NavMainEntity) {\n // Cancel opening the flyout if a mouseleave event happens before the flyout opened\n if (this.mouseEnterTimer !== null) {\n window.clearTimeout(this.mouseEnterTimer);\n }\n\n // Don't close an open flyout if the mouseleave is from another mainnav entry\n if (this.activeFlyout && this.activeFlyout !== level.id) {\n return;\n }\n\n if (window.innerWidth >= 1024 && level.flyout.length > 0) {\n // Allow the pointer to shortly leave the flyout without closing it. This\n // allows for user mistakes and makes the experience less nervous\n this.mouseLeaveTimer = window.setTimeout(() => {\n this.closeFlyout(level.id);\n }, 300);\n }\n }\n\n handleTouchEnd(event: TouchEvent, level: NavMainEntity) {\n if (!this.isActiveFlyout(level.id) && !level.noFlyout) {\n // It's the first touchstart and has a flyout, prevent link activation and open the flyout\n if (event.cancelable) event.preventDefault();\n if (level.id) this.openFlyout(level.id);\n }\n }\n\n handleKeyPress(event: KeyboardEvent, level: NavMainEntity) {\n if (event.key === 'Enter' && !this.isActiveFlyout(level.id) && !level.noFlyout) {\n // It's the first enter keypress and has a flyout, prevent link activation and open the flyout\n event.preventDefault();\n if (level.id) this.openFlyout(level.id);\n }\n }\n\n handleClick(event: MouseEvent, level: NavMainEntity) {\n if (!this.isActiveFlyout(level.id) && !level.noFlyout) {\n // It's the first click, always open the flyout, never the link\n // This is relevant for desktop with active screenreader which\n // translates an enter keypress to a click\n event.preventDefault();\n if (level.id) this.openFlyout(level.id);\n }\n }\n\n /**\n * Disable or re-enable body scrolling, depending on whether mobile menu is open or closed\n */\n setBodyScroll() {\n if (this.mobileMenuOpen) {\n disableBodyScroll(this.flyoutElement);\n } else {\n enableBodyScroll(this.flyoutElement);\n }\n }\n\n /**\n * Toggle the main navigation (only visible on mobile)\n * @param force Force a state\n * @returns Boolean indicating new state\n */\n @Method()\n async toggleDropdown(force?: boolean) {\n this.mobileMenuOpen = force === undefined ? !this.mobileMenuOpen : force;\n this.dropdownToggled.emit({ open: this.mobileMenuOpen, element: this.host });\n\n if (force === false) {\n this.closeFlyout();\n }\n\n this.setBodyScroll();\n this.setWindowHeight();\n\n return this.mobileMenuOpen;\n }\n\n /**\n * Focus the main navigation toggle button\n */\n @Method()\n async setFocus() {\n const firstLink = this.host.shadowRoot?.querySelector<HTMLElement>('.main-link');\n if (firstLink) {\n firstLink.focus();\n }\n }\n\n /**\n * Open a specific flyout\n * @param id Flyout ID\n */\n @Method()\n async setActiveFlyout(id: string | null) {\n this.activeFlyout = id;\n this.flyoutToggled.emit(this.activeFlyout);\n }\n\n render() {\n if (state.localizedConfig?.header === undefined) return;\n const headerConfig = state.localizedConfig.header;\n\n return (\n <Host>\n <SvgSprite />\n <nav\n id=\"post-internet-header-main-navigation\"\n class={{ 'main-navigation': true, 'open': this.mobileMenuOpen }}\n ref={el => (this.flyoutElement = el)}\n >\n <h2 class=\"visually-hidden\">{headerConfig.translations.navMainAriaLabel}</h2>\n <ul class=\"main-container container\">\n {headerConfig.navMain.map(levelOne => (\n <li\n key={levelOne.text}\n onMouseLeave={() => this.handleMouseLeave(levelOne)}\n onMouseEnter={() => this.handleMouseEnter(levelOne)}\n >\n <LevelOneAction\n level={levelOne}\n isOpen={this.isActiveFlyout(levelOne.id)}\n onTouchEnd={e => this.handleTouchEnd(e, levelOne)}\n onKeyDown={e => this.handleKeyPress(e, levelOne)}\n onClick={e => this.handleClick(e, levelOne)}\n />\n {!levelOne.noFlyout ? (\n <div\n id={levelOne.id}\n class={{ flyout: true, open: this.isActiveFlyout(levelOne.id) }}\n >\n <div class=\"wide-container\">\n <div class=\"flyout-nav\">\n <button\n class=\"nav-link flyout-back-button\"\n onClick={() => this.closeFlyout(levelOne.id)}\n >\n <SvgIcon name=\"pi-pointy-arrow-right\" classNames=\"mirrored\" />\n <span>{headerConfig.translations.backButtonText}</span>\n </button>\n <button\n class=\"flyout-close-button\"\n onClick={() => this.closeFlyout(levelOne.id)}\n >\n <span class=\"visually-hidden\">\n {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 => (\n <div key={flyout.title} class=\"flyout-column\">\n {flyout.title ? <h3>{flyout.title}</h3> : null}\n <ul class=\"flyout-linklist\">\n {flyout.linkList.map(link => (\n <li key={link.url}>\n <a\n class={{\n 'flyout-link': true,\n 'active': !!link?.isActiveOverride,\n }}\n href={link.url}\n target={link.target}\n >\n {link.title}\n </a>\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n </div>\n </div>\n ) : null}\n </li>\n ))}\n </ul>\n <slot></slot>\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"post-main-navigation2.js","mappings":"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","names":[],"sources":["./src/components/post-main-navigation/components/level-one-action.component.tsx","./src/components/post-main-navigation/post-main-navigation.scss?tag=post-main-navigation&encapsulation=shadow","./src/components/post-main-navigation/post-main-navigation.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { NavMainEntity } from '../../../models/header.model';\n\nexport const LevelOneAction = (props: {\n level: NavMainEntity;\n isOpen: boolean;\n onTouchEnd: (e: any) => void;\n onKeyDown: (e: any) => void;\n onClick: (e: any) => void;\n}) => {\n const TagName = props.level.url ? 'a' : 'button';\n\n return (\n <TagName\n class={{\n 'main-link': true,\n 'active': !!props.level.isActiveOverride,\n 'focus': props.isOpen,\n }}\n href={props.level.url}\n title={\n props.level.title?.trim() && props.level.title?.trim() !== props.level.text?.trim()\n ? props.level.title\n : undefined\n }\n tabindex={props.level.url ? undefined : 0}\n aria-haspopup={!props.level.noFlyout + ''}\n aria-expanded={props.level.noFlyout ? null : props.isOpen + ''}\n onTouchEnd={e => props.onTouchEnd(e)}\n onKeyDown={e => props.onKeyDown(e)}\n onClick={e => props.onClick(e)}\n >\n <span>{props.level.text}</span>\n <svg aria-hidden=\"true\">\n <use href=\"#pi-pointy-arrow-right\" />\n </svg>\n </TagName>\n );\n};\n","@use '@swisspost/design-system-styles/variables/color';\n@use '@swisspost/design-system-styles/placeholders/text';\n@use '@swisspost/design-system-styles/functions';\n@use '../../utils/utils.scss';\n@use '../../utils/mixins.scss';\n\n:host {\n --host-window-height: var(--window-height, 100vh);\n --calculated-header-height: calc(var(--header-height) + 1px);\n\n display: block;\n min-width: 0;\n height: var(--header-height);\n}\n\n:host(.no-animation) {\n * {\n animation: none !important;\n transition: none !important;\n }\n}\n\n.main-navigation,\n.main-container,\n.main-container li,\n.main-link {\n @include mixins.min(lg) {\n height: 100%;\n }\n}\n\n.main-navigation {\n font-size: functions.px-to-rem(18px);\n\n @include mixins.min(lg) {\n font-size: functions.px-to-rem(16px);\n margin: 0 0.75rem;\n }\n\n @include mixins.min(xl) {\n font-size: functions.px-to-rem(18px);\n }\n\n @include mixins.min(xxl) {\n font-size: functions.px-to-rem(20px);\n }\n\n @include mixins.max(lg) {\n position: absolute;\n top: var(--calculated-header-height);\n left: 0;\n background: white;\n height: calc(var(--host-window-height) - var(--calculated-header-height));\n width: 100%;\n margin: 0;\n overflow: hidden scroll;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior: contain;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n z-index: -1;\n visibility: hidden;\n transform: translateY(-100%);\n transition: transform 0.35s, visibility 0.35s;\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n\n &.open {\n transform: translateY(0);\n visibility: visible;\n }\n }\n}\n\n.main-container {\n @extend %no-list;\n\n display: flex;\n align-items: center;\n justify-content: flex-start;\n\n @include mixins.max(lg) {\n flex-direction: column;\n align-items: stretch;\n justify-content: flex-start;\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n\n > li + li {\n border-top: 1px solid color.$gray-10;\n }\n }\n\n @include mixins.min(lg) {\n padding-right: 0;\n padding-left: 0;\n }\n\n > li {\n flex: 0 1 auto;\n min-width: 0;\n }\n}\n\n.main-link {\n @extend %nav-link;\n\n display: flex;\n align-items: center;\n padding-right: 0.75rem;\n padding-left: 0.75rem;\n text-align: left;\n cursor: pointer;\n width: 100%;\n\n @include mixins.min(lg) {\n svg {\n display: none;\n }\n }\n\n @include mixins.max(lg) {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-weight: 300;\n padding: 0.625rem 0;\n width: 100%;\n text-align: left;\n\n svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n }\n\n span {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n}\n\n.main-link,\n.flyout-link {\n position: relative;\n color: black;\n\n &::after {\n content: '';\n position: absolute;\n bottom: -1px;\n left: 0;\n width: 100%;\n height: 4px;\n background-color: transparent;\n opacity: 0;\n transform: scaleX(0.8);\n transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &:hover,\n &.focus {\n &::after {\n background-color: color.$gray-20;\n opacity: 1;\n transform: scale(1);\n }\n }\n\n &.active {\n font-weight: 700;\n\n &::after {\n background-color: color.$yellow;\n opacity: 1;\n transform: scale(1);\n }\n }\n}\n\n.flyout {\n left: 0;\n width: 100%;\n background: white;\n padding-bottom: 3rem;\n overflow: auto;\n overscroll-behavior: contain;\n visibility: hidden;\n\n @include mixins.min(lg) {\n position: absolute;\n top: 100%;\n max-height: calc(100vh - var(--header-height) - var(--meta-header-height) - 1px);\n z-index: -1;\n box-shadow: 0 0 1px 0 rgb(0 0 0 / 40%);\n transform: translateY(-100%);\n\n &.open {\n box-shadow: 0 0 8px 0 rgb(0 0 0 / 40%);\n transform: translateY(0);\n }\n }\n\n @include mixins.max(lg) {\n position: fixed;\n top: 0;\n height: 100%;\n z-index: 1;\n transform: translateX(100%);\n\n &.open {\n transform: translateX(0);\n }\n }\n\n &.open {\n visibility: visible;\n }\n\n &.animate {\n transition: transform 0.35s, visibility 0.35s, box-shadow 0.35s;\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n}\n\n.flyout-nav {\n @extend %font-curve-small;\n\n display: flex;\n justify-content: space-between;\n min-height: 3.5rem;\n\n // Change box-sizing to content-box to add 1px border width to flyout-nav hight.\n // This ensures flyout-nav has same hight as main-navigation-container.\n box-sizing: content-box;\n}\n\n.flyout-row {\n display: flex;\n gap: 1.5rem;\n\n @include mixins.max(lg) {\n display: grid;\n grid-template-columns: 1fr 1fr;\n }\n\n @include mixins.max(rg) {\n grid-template-columns: 1fr;\n }\n}\n\n.flyout-column {\n flex: 1;\n max-width: 25%;\n\n @include mixins.max(lg) {\n max-width: none;\n }\n\n h3 {\n @extend %font-curve-small;\n margin-top: 0;\n }\n}\n\n.flyout-back-button {\n @include mixins.container-padding();\n\n display: flex;\n align-items: center;\n font-size: functions.px-to-rem(16px);\n font-weight: 400;\n cursor: pointer;\n\n svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n @include mixins.min(lg) {\n display: none;\n }\n}\n\n.flyout-close-button {\n @extend %nav-link;\n\n display: flex;\n align-items: center;\n margin-left: auto;\n padding: 0 1.5rem;\n cursor: pointer;\n\n svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n @include mixins.max(lg) {\n display: none;\n }\n}\n\n.flyout-linklist {\n @extend %no-list;\n\n li {\n border-top: 1px solid color.$gray-10;\n }\n\n &:first-child > li {\n border-top-color: transparent;\n }\n}\n\n.flyout-link {\n @extend %nav-link;\n\n display: block;\n padding: 0.75rem 0;\n}\n\n.flyout-title {\n @extend %font-curve-bigger-regular;\n\n margin: 2.5rem 0 1.5rem 0;\n\n @include mixins.min(lg) {\n display: none;\n }\n}\n","import { Component, Host, h, State, Method, Event, Element, EventEmitter } from '@stencil/core';\nimport { throttle } from 'throttle-debounce';\nimport { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';\nimport { state } from '../../data/store';\nimport {\n DropdownElement,\n DropdownEvent,\n HasDropdown,\n IsFocusable,\n NavMainEntity,\n} from '../../models/header.model';\nimport { userPrefersReducedMotion } from '../../services/ui.service';\nimport { SvgSprite } from '../../utils/svg-sprite.component';\nimport { SvgIcon } from '../../utils/svg-icon.component';\nimport { LevelOneAction } from './components/level-one-action.component';\n\n@Component({\n tag: 'post-main-navigation',\n styleUrl: 'post-main-navigation.scss',\n shadow: true,\n})\nexport class PostMainNavigation implements HasDropdown, IsFocusable {\n @State() activeFlyout: string | null;\n @State() mobileMenuOpen: boolean;\n @Event() dropdownToggled: EventEmitter<DropdownEvent>;\n @Event() flyoutToggled: EventEmitter<string | null>;\n @Element() host: DropdownElement;\n private throttledResize: throttle<() => void>;\n private resizeTimer: number | null = null;\n private mouseLeaveTimer: number | null = null;\n private mouseEnterTimer: number | null = null;\n private flyoutElement: HTMLElement | undefined;\n\n connectedCallback() {\n this.throttledResize = throttle(300, () => this.handleResize());\n window.addEventListener('resize', this.throttledResize, { passive: true });\n this.setWindowHeight();\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.throttledResize);\n clearAllBodyScrollLocks();\n if (this.mouseEnterTimer !== null) window.clearTimeout(this.mouseEnterTimer);\n if (this.mouseLeaveTimer !== null) window.clearTimeout(this.mouseLeaveTimer);\n }\n\n handleResize() {\n // Suspend all animations and transitions on window resize\n this.host.classList.add('no-animation');\n if (this.resizeTimer !== null) window.clearTimeout(this.resizeTimer);\n this.resizeTimer = window.setTimeout(() => {\n this.host.classList.remove('no-animation');\n }, 300);\n\n this.setWindowHeight();\n }\n\n // Update window height var\n setWindowHeight() {\n if (!this.host) {\n return;\n }\n this.host.style.setProperty('--window-height', `${window.innerHeight}px`);\n\n // Safari might or might not show a blank bar at the bottom where the browser\n // controls should be. This timeout waits for this bar to appear before resetting the available height\n window.setTimeout(() => {\n this.host.style.setProperty('--window-height', `${window.innerHeight}px`);\n }, 100);\n }\n\n openFlyout(id: string) {\n const flyout = this.host.shadowRoot?.getElementById(id);\n\n if (flyout && this.activeFlyout !== '') {\n // Add flyout animation if there's no flyout open\n this.addFlyoutAnimation(flyout);\n }\n\n this.activeFlyout = id;\n this.flyoutToggled.emit(id);\n this.setWindowHeight();\n\n if (this.mouseLeaveTimer !== null) {\n window.clearTimeout(this.mouseLeaveTimer);\n this.mouseLeaveTimer = null;\n }\n }\n\n closeFlyout(id?: string) {\n if (id === undefined) return;\n const flyout = this.host.shadowRoot?.getElementById(id);\n\n if (flyout) {\n // Add flyout animation for close action\n this.addFlyoutAnimation(flyout);\n }\n\n this.activeFlyout = null;\n this.flyoutToggled.emit();\n }\n\n addFlyoutAnimation(flyout: HTMLElement) {\n // Check if user prefers to see animations or not\n if (!userPrefersReducedMotion()) {\n flyout.classList.add('animate');\n\n // Remove flyout animation after transition ended\n flyout.addEventListener('transitionend', () => this.removeFlyoutAnimation(flyout), {\n once: true,\n });\n }\n }\n\n removeFlyoutAnimation(flyout: HTMLElement) {\n flyout.classList.remove('animate');\n }\n\n isActiveFlyout(id?: string) {\n return id === this.activeFlyout;\n }\n\n handleMouseEnter(level: NavMainEntity) {\n // Cancel opening the flyout if there already is one scheduled to open\n if (this.mouseEnterTimer !== null) {\n window.clearTimeout(this.mouseEnterTimer);\n this.mouseEnterTimer = null;\n }\n\n // Cancel closing if we enter again\n if (this.mouseLeaveTimer && this.activeFlyout === level.id) {\n window.clearTimeout(this.mouseLeaveTimer);\n this.mouseLeaveTimer = null;\n }\n\n if (window.innerWidth >= 1024 && level.flyout.length > 0 && this.activeFlyout !== level.id) {\n // Delay opening the flyout for a moment to give users a chance to move the mouse over the navigation without triggering the flyout\n this.mouseEnterTimer = window.setTimeout(() => {\n this.mouseEnterTimer = null;\n if (level.id !== undefined) this.openFlyout(level.id);\n }, 200);\n }\n }\n\n handleMouseLeave(level: NavMainEntity) {\n // Cancel opening the flyout if a mouseleave event happens before the flyout opened\n if (this.mouseEnterTimer !== null) {\n window.clearTimeout(this.mouseEnterTimer);\n }\n\n // Don't close an open flyout if the mouseleave is from another mainnav entry\n if (this.activeFlyout && this.activeFlyout !== level.id) {\n return;\n }\n\n if (window.innerWidth >= 1024 && level.flyout.length > 0) {\n // Allow the pointer to shortly leave the flyout without closing it. This\n // allows for user mistakes and makes the experience less nervous\n this.mouseLeaveTimer = window.setTimeout(() => {\n this.closeFlyout(level.id);\n }, 300);\n }\n }\n\n handleTouchEnd(event: TouchEvent, level: NavMainEntity) {\n if (!this.isActiveFlyout(level.id) && !level.noFlyout) {\n // It's the first touchstart and has a flyout, prevent link activation and open the flyout\n if (event.cancelable) event.preventDefault();\n if (level.id) this.openFlyout(level.id);\n }\n }\n\n handleKeyPress(event: KeyboardEvent, level: NavMainEntity) {\n if (event.key === 'Enter' && !this.isActiveFlyout(level.id) && !level.noFlyout) {\n // It's the first enter keypress and has a flyout, prevent link activation and open the flyout\n event.preventDefault();\n if (level.id) this.openFlyout(level.id);\n }\n }\n\n handleClick(event: MouseEvent, level: NavMainEntity) {\n if (!this.isActiveFlyout(level.id) && !level.noFlyout) {\n // It's the first click, always open the flyout, never the link\n // This is relevant for desktop with active screenreader which\n // translates an enter keypress to a click\n event.preventDefault();\n if (level.id) this.openFlyout(level.id);\n }\n }\n\n /**\n * Disable or re-enable body scrolling, depending on whether mobile menu is open or closed\n */\n setBodyScroll() {\n if (this.mobileMenuOpen) {\n disableBodyScroll(this.flyoutElement);\n } else {\n enableBodyScroll(this.flyoutElement);\n }\n }\n\n /**\n * Toggle the main navigation (only visible on mobile)\n * @param force Force a state\n * @returns Boolean indicating new state\n */\n @Method()\n async toggleDropdown(force?: boolean) {\n this.mobileMenuOpen = force === undefined ? !this.mobileMenuOpen : force;\n this.dropdownToggled.emit({ open: this.mobileMenuOpen, element: this.host });\n\n if (force === false) {\n this.closeFlyout();\n }\n\n this.setBodyScroll();\n this.setWindowHeight();\n\n return this.mobileMenuOpen;\n }\n\n /**\n * Focus the main navigation toggle button\n */\n @Method()\n async setFocus() {\n const firstLink = this.host.shadowRoot?.querySelector<HTMLElement>('.main-link');\n if (firstLink) {\n firstLink.focus();\n }\n }\n\n /**\n * Open a specific flyout\n * @param id Flyout ID\n */\n @Method()\n async setActiveFlyout(id: string | null) {\n this.activeFlyout = id;\n this.flyoutToggled.emit(this.activeFlyout);\n }\n\n render() {\n if (state.localizedConfig?.header === undefined) return;\n const headerConfig = state.localizedConfig.header;\n\n return (\n <Host>\n <SvgSprite />\n <nav\n id=\"post-internet-header-main-navigation\"\n class={{ 'main-navigation': true, 'open': this.mobileMenuOpen }}\n ref={el => (this.flyoutElement = el)}\n >\n <h2 class=\"visually-hidden\">{headerConfig.translations.navMainAriaLabel}</h2>\n <ul class=\"main-container container\">\n {headerConfig.navMain.map(levelOne => (\n <li\n key={levelOne.text}\n onMouseLeave={() => this.handleMouseLeave(levelOne)}\n onMouseEnter={() => this.handleMouseEnter(levelOne)}\n >\n <LevelOneAction\n level={levelOne}\n isOpen={this.isActiveFlyout(levelOne.id)}\n onTouchEnd={e => this.handleTouchEnd(e, levelOne)}\n onKeyDown={e => this.handleKeyPress(e, levelOne)}\n onClick={e => this.handleClick(e, levelOne)}\n />\n {!levelOne.noFlyout ? (\n <div\n id={levelOne.id}\n class={{ flyout: true, open: this.isActiveFlyout(levelOne.id) }}\n >\n <div class=\"wide-container\">\n <div class=\"flyout-nav\">\n <button\n class=\"nav-link flyout-back-button\"\n onClick={() => this.closeFlyout(levelOne.id)}\n >\n <SvgIcon name=\"pi-pointy-arrow-right\" classNames=\"mirrored\" />\n <span>{headerConfig.translations.backButtonText}</span>\n </button>\n <button\n class=\"flyout-close-button\"\n onClick={() => this.closeFlyout(levelOne.id)}\n >\n <span class=\"visually-hidden\">\n {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 => (\n <div key={flyout.title} class=\"flyout-column\">\n {flyout.title ? <h3>{flyout.title}</h3> : null}\n <ul class=\"flyout-linklist\">\n {flyout.linkList.map(link => (\n <li key={link.url}>\n <a\n class={{\n 'flyout-link': true,\n 'active': !!link?.isActiveOverride,\n }}\n href={link.url}\n target={link.target}\n >\n {link.title}\n </a>\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n </div>\n </div>\n ) : null}\n </li>\n ))}\n </ul>\n <slot></slot>\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/components/swisspost-internet-header.js CHANGED
@@ -339,7 +339,7 @@ const setMainNavigationIds = (navMainEntities) => {
339
339
  };
340
340
 
341
341
  const name = "@swisspost/internet-header";
342
- const version = "1.5.0";
342
+ const version = "1.5.1";
343
343
  const description = "Swiss Post Internet Header";
344
344
  const license = "Apache-2.0";
345
345
  const main = "loader/index.cjs.js";
package/dist/esm/post-main-navigation.entry.js CHANGED
@@ -21,7 +21,7 @@ const LevelOneAction = (props) => {
21
21
  h("use", { href: "#pi-pointy-arrow-right" }))));
22
22
  };
23
23
 
24
- const postMainNavigationCss = ".flyout-nav,.flyout-column h3{font-size:0.9375rem;line-height:1.4}@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;line-height:1.4}@media (min-width: 600px){.flyout-title{font-size:1.25rem}}@media (min-width: 1024px){.flyout-title{font-size:1.5rem;line-height:1.1}}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:700;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2\") format(\"woff2\"), url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:400;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2\") format(\"woff2\"), url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:300;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2\") format(\"woff2\"), url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff\") format(\"woff\")}*,:host,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{font-family:\"Frutiger Neue For Post\", system-ui, sans-serif}button{font:inherit;padding:0}img,svg{max-width:100%;max-height:100%}@media (forced-colors: active){svg{color:white}}.main-container,.flyout-linklist,.no-list{list-style:none;padding-left:0;margin-top:0;margin-bottom:0}.btn-blank{background-color:transparent;border:none;border-radius:0;padding:0}.main-link,.flyout-close-button,.flyout-link,.nav-link{text-decoration:none;color:rgba(0, 0, 0, 0.8);-webkit-transition:color 200ms;transition:color 200ms;background-color:transparent;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.5rem}.main-link:hover,.flyout-close-button:hover,.flyout-link:hover,.nav-link:hover,.main-link:focus,.flyout-close-button:focus,.flyout-link:focus,.nav-link:focus{color:black}.main-link>svg,.flyout-close-button>svg,.flyout-link>svg,.nav-link>svg{width:1.4em;height:1.4em;-ms-flex-negative:0;flex-shrink:0}.main-link>span,.flyout-close-button>span,.flyout-link>span,.nav-link>span{-ms-flex-negative:1;flex-shrink:1}.box>*:first-child{margin-top:0}.box>*:last-child{margin-bottom:0}.mirrored{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.bold{font-weight:700}.light{font-weight:300}.d-flex{display:-ms-flexbox;display:flex}.d-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.align-items-center{-ms-flex-align:center;align-items:center}@media (min-width: 1441px){.wide-container{margin:0 auto;max-width:1440px}}@media (max-width: 599.98px){.container{padding-right:16px;padding-left:16px}}@media (min-width: 600px) and (max-width: 1023.98px){.container{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.container{padding-right:40px;padding-left:40px}}.visually-hidden{position:absolute;width:1px;height:1px;border:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}@media (max-width: -0.02px){.hidden-xs{display:none}}@media (max-width: 399.98px){.hidden-sm{display:none}}@media (max-width: 599.98px){.hidden-rg{display:none}}@media (max-width: 779.98px){.hidden-md{display:none}}@media (max-width: 1023.98px){.hidden-lg{display:none}}@media (max-width: 1279.98px){.hidden-xl{display:none}}@media (max-width: 1440.98px){.hidden-xxl{display:none}}:host{--host-window-height:var(--window-height, 100vh);--calculated-header-height:calc(var(--header-height) + 1px);display:block;min-width:0;height:var(--header-height)}:host(.no-animation) *{-webkit-animation:none !important;animation:none !important;-webkit-transition:none !important;transition:none !important}@media (min-width: 1024px){.main-navigation,.main-container,.main-container li,.main-link{height:100%}}.main-navigation{font-size:1.125rem}@media (min-width: 1024px){.main-navigation{font-size:1rem}}@media (min-width: 1280px){.main-navigation{margin:0 0.75rem;font-size:1.125rem}}@media (min-width: 1441px){.main-navigation{font-size:1.25rem}}@media (max-width: 1023.98px){.main-navigation{position:absolute;top:var(--calculated-header-height);left:0;background:white;height:calc(var(--host-window-height) - var(--calculated-header-height));width:100%;margin:0;overflow:hidden scroll;-webkit-overflow-scrolling:touch;-ms-scroll-chaining:none;overscroll-behavior:contain;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;z-index:-1;visibility:hidden;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:visibility 0.35s, -webkit-transform 0.35s;transition:visibility 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, visibility 0.35s;transition:transform 0.35s, visibility 0.35s, -webkit-transform 0.35s}}@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce){.main-navigation{-webkit-transition:none;transition:none}}@media (max-width: 1023.98px){.main-navigation.open{-webkit-transform:translateY(0);transform:translateY(0);visibility:visible}}.main-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}@media (max-width: 1023.98px){.main-container{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start;padding-top:2.5rem;padding-bottom:2.5rem}.main-container>li+li{border-top:1px solid #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:0.75rem;padding-left:0.75rem;text-align:left;cursor:pointer;width:100%}@media (min-width: 1024px){.main-link svg{display:none}}@media (max-width: 1023.98px){.main-link{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;font-weight:300;padding:0.625rem 0;width:100%;text-align:left}.main-link svg{width:1.5rem;height:1.5rem}}.main-link span{overflow:hidden;text-overflow:ellipsis}.main-link,.flyout-link{position:relative;color:black}.main-link::after,.flyout-link::after{content:\"\";position:absolute;bottom:-1px;left:0;width:100%;height:4px;background-color:transparent;opacity:0;-webkit-transform:scaleX(0.8);transform:scaleX(0.8);-webkit-transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)}@media (prefers-reduced-motion: reduce){.main-link::after,.flyout-link::after{-webkit-transition:none;transition:none}}.main-link:hover::after,.main-link.focus::after,.flyout-link:hover::after,.flyout-link.focus::after{background-color:#cccccc;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.main-link.active,.flyout-link.active{font-weight:700}.main-link.active::after,.flyout-link.active::after{background-color:#fc0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.flyout{left:0;width:100%;background:white;padding-bottom:3rem;overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;visibility:hidden}@media (min-width: 1024px){.flyout{position:absolute;top:100%;max-height:calc(100vh - var(--header-height) - var(--meta-header-height) - 1px);z-index:-1;-webkit-box-shadow:0 0 1px 0 rgba(0, 0, 0, 0.4);box-shadow:0 0 1px 0 rgba(0, 0, 0, 0.4);-webkit-transform:translateY(-100%);transform:translateY(-100%)}.flyout.open{-webkit-box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.4);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.4);-webkit-transform:translateY(0);transform:translateY(0)}}@media (max-width: 1023.98px){.flyout{position:fixed;top:0;height:100%;z-index:1;-webkit-transform:translateX(100%);transform:translateX(100%)}.flyout.open{-webkit-transform:translateX(0);transform:translateX(0)}}.flyout.open{visibility:visible}.flyout.animate{-webkit-transition:visibility 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s;transition:visibility 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s;transition:transform 0.35s, visibility 0.35s, box-shadow 0.35s;transition:transform 0.35s, visibility 0.35s, box-shadow 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s}@media (prefers-reduced-motion: reduce){.flyout.animate{-webkit-transition:none;transition:none}}.flyout-nav{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;min-height:3.5rem;-webkit-box-sizing:content-box;box-sizing:content-box}.flyout-row{display:-ms-flexbox;display:flex;gap:1.5rem}@media (max-width: 1023.98px){.flyout-row{display:grid;grid-template-columns:1fr 1fr}}@media (max-width: 599.98px){.flyout-row{grid-template-columns:1fr}}.flyout-column{-ms-flex:1;flex:1;max-width:25%}@media (max-width: 1023.98px){.flyout-column{max-width:none}}.flyout-column h3{margin-top:0}.flyout-back-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:1rem;font-weight:400;cursor:pointer}@media (max-width: 599.98px){.flyout-back-button{padding-right:16px;padding-left:16px}}@media (min-width: 600px) and (max-width: 1023.98px){.flyout-back-button{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.flyout-back-button{padding-right:40px;padding-left:40px}}.flyout-back-button svg{width:1.5rem;height:1.5rem}@media (min-width: 1024px){.flyout-back-button{display:none}}.flyout-close-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-left:auto;padding:0 1.5rem;cursor:pointer}.flyout-close-button svg{width:1.5rem;height:1.5rem}@media (max-width: 1023.98px){.flyout-close-button{display:none}}.flyout-linklist li{border-top:1px solid #e6e6e6}.flyout-linklist:first-child>li{border-top-color:transparent}.flyout-link{display:block;padding:0.75rem 0}.flyout-title{margin:2.5rem 0 1.5rem 0}@media (min-width: 1024px){.flyout-title{display:none}}";
24
+ const postMainNavigationCss = ".flyout-nav,.flyout-column h3{font-size:0.9375rem;line-height:1.4}@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;line-height:1.4}@media (min-width: 600px){.flyout-title{font-size:1.25rem}}@media (min-width: 1024px){.flyout-title{font-size:1.5rem;line-height:1.1}}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:700;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2\") format(\"woff2\"), url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:400;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2\") format(\"woff2\"), url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff\") format(\"woff\")}@font-face{font-display:swap;font-family:\"Frutiger Neue For Post\";font-weight:300;src:url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2\") format(\"woff2\"), url(\"https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff\") format(\"woff\")}*,:host,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{font-family:\"Frutiger Neue For Post\", system-ui, sans-serif}button{font:inherit;padding:0}img,svg{max-width:100%;max-height:100%}@media (forced-colors: active){svg{color:white}}.main-container,.flyout-linklist,.no-list{list-style:none;padding-left:0;margin-top:0;margin-bottom:0}.btn-blank{background-color:transparent;border:none;border-radius:0;padding:0}.main-link,.flyout-close-button,.flyout-link,.nav-link{text-decoration:none;color:rgba(0, 0, 0, 0.8);-webkit-transition:color 200ms;transition:color 200ms;background-color:transparent;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.5rem}.main-link:hover,.flyout-close-button:hover,.flyout-link:hover,.nav-link:hover,.main-link:focus,.flyout-close-button:focus,.flyout-link:focus,.nav-link:focus{color:black}.main-link>svg,.flyout-close-button>svg,.flyout-link>svg,.nav-link>svg{width:1.4em;height:1.4em;-ms-flex-negative:0;flex-shrink:0}.main-link>span,.flyout-close-button>span,.flyout-link>span,.nav-link>span{-ms-flex-negative:1;flex-shrink:1}.box>*:first-child{margin-top:0}.box>*:last-child{margin-bottom:0}.mirrored{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.bold{font-weight:700}.light{font-weight:300}.d-flex{display:-ms-flexbox;display:flex}.d-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.align-items-center{-ms-flex-align:center;align-items:center}@media (min-width: 1441px){.wide-container{margin:0 auto;max-width:1440px}}@media (max-width: 599.98px){.container{padding-right:16px;padding-left:16px}}@media (min-width: 600px) and (max-width: 1023.98px){.container{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.container{padding-right:40px;padding-left:40px}}.visually-hidden{position:absolute;width:1px;height:1px;border:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}@media (max-width: -0.02px){.hidden-xs{display:none}}@media (max-width: 399.98px){.hidden-sm{display:none}}@media (max-width: 599.98px){.hidden-rg{display:none}}@media (max-width: 779.98px){.hidden-md{display:none}}@media (max-width: 1023.98px){.hidden-lg{display:none}}@media (max-width: 1279.98px){.hidden-xl{display:none}}@media (max-width: 1440.98px){.hidden-xxl{display:none}}:host{--host-window-height:var(--window-height, 100vh);--calculated-header-height:calc(var(--header-height) + 1px);display:block;min-width:0;height:var(--header-height)}:host(.no-animation) *{-webkit-animation:none !important;animation:none !important;-webkit-transition:none !important;transition:none !important}@media (min-width: 1024px){.main-navigation,.main-container,.main-container li,.main-link{height:100%}}.main-navigation{font-size:1.125rem}@media (min-width: 1024px){.main-navigation{font-size:1rem;margin:0 0.75rem}}@media (min-width: 1280px){.main-navigation{font-size:1.125rem}}@media (min-width: 1441px){.main-navigation{font-size:1.25rem}}@media (max-width: 1023.98px){.main-navigation{position:absolute;top:var(--calculated-header-height);left:0;background:white;height:calc(var(--host-window-height) - var(--calculated-header-height));width:100%;margin:0;overflow:hidden scroll;-webkit-overflow-scrolling:touch;-ms-scroll-chaining:none;overscroll-behavior:contain;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;z-index:-1;visibility:hidden;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:visibility 0.35s, -webkit-transform 0.35s;transition:visibility 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, visibility 0.35s;transition:transform 0.35s, visibility 0.35s, -webkit-transform 0.35s}}@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce){.main-navigation{-webkit-transition:none;transition:none}}@media (max-width: 1023.98px){.main-navigation.open{-webkit-transform:translateY(0);transform:translateY(0);visibility:visible}}.main-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}@media (max-width: 1023.98px){.main-container{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start;padding-top:2.5rem;padding-bottom:2.5rem}.main-container>li+li{border-top:1px solid #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:0.75rem;padding-left:0.75rem;text-align:left;cursor:pointer;width:100%}@media (min-width: 1024px){.main-link svg{display:none}}@media (max-width: 1023.98px){.main-link{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;font-weight:300;padding:0.625rem 0;width:100%;text-align:left}.main-link svg{width:1.5rem;height:1.5rem}}.main-link span{overflow:hidden;text-overflow:ellipsis}.main-link,.flyout-link{position:relative;color:black}.main-link::after,.flyout-link::after{content:\"\";position:absolute;bottom:-1px;left:0;width:100%;height:4px;background-color:transparent;opacity:0;-webkit-transform:scaleX(0.8);transform:scaleX(0.8);-webkit-transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)}@media (prefers-reduced-motion: reduce){.main-link::after,.flyout-link::after{-webkit-transition:none;transition:none}}.main-link:hover::after,.main-link.focus::after,.flyout-link:hover::after,.flyout-link.focus::after{background-color:#cccccc;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.main-link.active,.flyout-link.active{font-weight:700}.main-link.active::after,.flyout-link.active::after{background-color:#fc0;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.flyout{left:0;width:100%;background:white;padding-bottom:3rem;overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;visibility:hidden}@media (min-width: 1024px){.flyout{position:absolute;top:100%;max-height:calc(100vh - var(--header-height) - var(--meta-header-height) - 1px);z-index:-1;-webkit-box-shadow:0 0 1px 0 rgba(0, 0, 0, 0.4);box-shadow:0 0 1px 0 rgba(0, 0, 0, 0.4);-webkit-transform:translateY(-100%);transform:translateY(-100%)}.flyout.open{-webkit-box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.4);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.4);-webkit-transform:translateY(0);transform:translateY(0)}}@media (max-width: 1023.98px){.flyout{position:fixed;top:0;height:100%;z-index:1;-webkit-transform:translateX(100%);transform:translateX(100%)}.flyout.open{-webkit-transform:translateX(0);transform:translateX(0)}}.flyout.open{visibility:visible}.flyout.animate{-webkit-transition:visibility 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s;transition:visibility 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s;transition:transform 0.35s, visibility 0.35s, box-shadow 0.35s;transition:transform 0.35s, visibility 0.35s, box-shadow 0.35s, -webkit-transform 0.35s, -webkit-box-shadow 0.35s}@media (prefers-reduced-motion: reduce){.flyout.animate{-webkit-transition:none;transition:none}}.flyout-nav{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;min-height:3.5rem;-webkit-box-sizing:content-box;box-sizing:content-box}.flyout-row{display:-ms-flexbox;display:flex;gap:1.5rem}@media (max-width: 1023.98px){.flyout-row{display:grid;grid-template-columns:1fr 1fr}}@media (max-width: 599.98px){.flyout-row{grid-template-columns:1fr}}.flyout-column{-ms-flex:1;flex:1;max-width:25%}@media (max-width: 1023.98px){.flyout-column{max-width:none}}.flyout-column h3{margin-top:0}.flyout-back-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:1rem;font-weight:400;cursor:pointer}@media (max-width: 599.98px){.flyout-back-button{padding-right:16px;padding-left:16px}}@media (min-width: 600px) and (max-width: 1023.98px){.flyout-back-button{padding-right:32px;padding-left:32px}}@media (min-width: 1024px){.flyout-back-button{padding-right:40px;padding-left:40px}}.flyout-back-button svg{width:1.5rem;height:1.5rem}@media (min-width: 1024px){.flyout-back-button{display:none}}.flyout-close-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-left:auto;padding:0 1.5rem;cursor:pointer}.flyout-close-button svg{width:1.5rem;height:1.5rem}@media (max-width: 1023.98px){.flyout-close-button{display:none}}.flyout-linklist li{border-top:1px solid #e6e6e6}.flyout-linklist:first-child>li{border-top-color:transparent}.flyout-link{display:block;padding:0.75rem 0}.flyout-title{margin:2.5rem 0 1.5rem 0}@media (min-width: 1024px){.flyout-title{display:none}}";
25
25
 
26
26
  const PostMainNavigation = class {
27
27
  constructor(hostRef) {