@swisspost/design-system-components 10.0.0-next.43 → 10.0.0-next.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{package-BFQrBDHY.js → package-BBZl2psA.js} +1 -1
- package/dist/cjs/post-accordion_2.cjs.entry.js +1 -1
- package/dist/cjs/post-avatar.cjs.entry.js +1 -1
- package/dist/cjs/post-back-to-top.cjs.entry.js +1 -1
- package/dist/cjs/post-banner.cjs.entry.js +1 -1
- package/dist/cjs/post-breadcrumb-item_2.cjs.entry.js +1 -1
- package/dist/cjs/post-breadcrumbs.cjs.entry.js +1 -1
- package/dist/cjs/post-card-control.cjs.entry.js +1 -1
- package/dist/cjs/post-closebutton_15.cjs.entry.js +20 -7
- package/dist/cjs/post-collapsible_2.cjs.entry.js +1 -1
- package/dist/cjs/post-components.cjs.js +1 -1
- package/dist/cjs/post-footer.cjs.entry.js +1 -1
- package/dist/cjs/post-linkarea.cjs.entry.js +1 -1
- package/dist/cjs/post-popover.cjs.entry.js +1 -1
- package/dist/cjs/post-rating.cjs.entry.js +1 -1
- package/dist/cjs/post-tab-header.cjs.entry.js +1 -1
- package/dist/cjs/post-tab-panel.cjs.entry.js +1 -1
- package/dist/cjs/post-tabs.cjs.entry.js +1 -1
- package/dist/cjs/post-tooltip-trigger.cjs.entry.js +1 -1
- package/dist/cjs/post-tooltip.cjs.entry.js +2 -2
- package/dist/collection/components/post-header/post-header.css +1 -1
- package/dist/collection/components/post-header/post-header.js +18 -4
- package/dist/collection/components/post-mainnavigation/post-mainnavigation.css +1 -1
- package/dist/collection/components/post-tooltip/post-tooltip.js +1 -1
- package/dist/components/{p-1ViVKUF6.js → p-BFBjELGG.js} +2 -2
- package/dist/components/{p-Dy3Riej-.js → p-BW0P1SOg.js} +4 -4
- package/dist/components/{p-B9s3i4RA.js → p-BYcEkyqQ.js} +2 -2
- package/dist/components/{p-Co3L0HjR.js → p-CNbSwutu.js} +1 -1
- package/dist/components/{p-DWxTKWHJ.js → p-CZkyqiwP.js} +1 -1
- package/dist/components/{p-D2SIHwlN.js → p-CmYZ8bPr.js} +1 -1
- package/dist/components/{p-C79jtIcS.js → p-Cy5YxvE1.js} +1 -1
- package/dist/components/p-Di1H2wNs.js +3 -0
- package/dist/components/{p-DdEQb55p.js → p-DoHEmJm4.js} +1 -1
- package/dist/components/{p-C99jx7Ii.js → p-DwcM8snc.js} +1 -1
- package/dist/components/{p-CqArUD7l.js → p-LeNTjBsp.js} +1 -1
- package/dist/components/post-accordion-item.js +1 -1
- package/dist/components/post-accordion.js +1 -1
- package/dist/components/post-avatar.js +1 -1
- package/dist/components/post-back-to-top.js +2 -2
- package/dist/components/post-banner.js +2 -2
- package/dist/components/post-breadcrumb-item.js +1 -1
- package/dist/components/post-breadcrumbs.js +7 -7
- package/dist/components/post-card-control.js +2 -2
- package/dist/components/post-closebutton.js +2 -2
- package/dist/components/post-collapsible-trigger.js +1 -1
- package/dist/components/post-collapsible.js +1 -1
- package/dist/components/post-footer.js +6 -6
- package/dist/components/post-header.js +20 -6
- package/dist/components/post-icon.js +1 -1
- package/dist/components/post-language-option.js +1 -1
- package/dist/components/post-language-switch.js +5 -5
- package/dist/components/post-linkarea.js +1 -1
- package/dist/components/post-list-item.js +1 -1
- package/dist/components/post-list.js +1 -1
- package/dist/components/post-logo.js +1 -1
- package/dist/components/post-mainnavigation.js +3 -3
- package/dist/components/post-megadropdown-trigger.js +1 -1
- package/dist/components/post-megadropdown.js +1 -1
- package/dist/components/post-menu-item.js +1 -1
- package/dist/components/post-menu-trigger.js +1 -1
- package/dist/components/post-menu.js +1 -1
- package/dist/components/post-popover.js +2 -2
- package/dist/components/post-popovercontainer.js +1 -1
- package/dist/components/post-rating.js +2 -2
- package/dist/components/post-tab-header.js +1 -1
- package/dist/components/post-tab-panel.js +1 -1
- package/dist/components/post-tabs.js +1 -1
- package/dist/components/post-togglebutton.js +1 -1
- package/dist/components/post-tooltip-trigger.js +1 -1
- package/dist/components/post-tooltip.js +3 -3
- package/dist/docs.json +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/package-Di1H2wNs.js +3 -0
- package/dist/esm/post-accordion_2.entry.js +1 -1
- package/dist/esm/post-avatar.entry.js +1 -1
- package/dist/esm/post-back-to-top.entry.js +1 -1
- package/dist/esm/post-banner.entry.js +1 -1
- package/dist/esm/post-breadcrumb-item_2.entry.js +1 -1
- package/dist/esm/post-breadcrumbs.entry.js +1 -1
- package/dist/esm/post-card-control.entry.js +1 -1
- package/dist/esm/post-closebutton_15.entry.js +20 -7
- package/dist/esm/post-collapsible_2.entry.js +1 -1
- package/dist/esm/post-components.js +1 -1
- package/dist/esm/post-footer.entry.js +1 -1
- package/dist/esm/post-linkarea.entry.js +1 -1
- package/dist/esm/post-popover.entry.js +1 -1
- package/dist/esm/post-rating.entry.js +1 -1
- package/dist/esm/post-tab-header.entry.js +1 -1
- package/dist/esm/post-tab-panel.entry.js +1 -1
- package/dist/esm/post-tabs.entry.js +1 -1
- package/dist/esm/post-tooltip-trigger.entry.js +1 -1
- package/dist/esm/post-tooltip.entry.js +2 -2
- package/dist/post-components/{p-4410eecd.entry.js → p-09c1822c.entry.js} +1 -1
- package/dist/post-components/{p-f1e0c995.entry.js → p-0c25c428.entry.js} +1 -1
- package/dist/post-components/{p-b20922d5.entry.js → p-17bcb457.entry.js} +1 -1
- package/dist/post-components/{p-41dd61d4.entry.js → p-2342da52.entry.js} +1 -1
- package/dist/post-components/{p-635e2004.entry.js → p-401bdce7.entry.js} +1 -1
- package/dist/post-components/{p-70d20143.entry.js → p-4bf808d9.entry.js} +1 -1
- package/dist/post-components/{p-e4c72272.entry.js → p-5a1ba589.entry.js} +1 -1
- package/dist/post-components/{p-69048834.entry.js → p-5e8ee2b1.entry.js} +1 -1
- package/dist/post-components/p-778ca412.entry.js +1 -0
- package/dist/post-components/{p-5e84d796.entry.js → p-87c5fc42.entry.js} +1 -1
- package/dist/post-components/{p-bb139af8.entry.js → p-928788fc.entry.js} +1 -1
- package/dist/post-components/{p-0fb50e3d.entry.js → p-9c3d4d93.entry.js} +1 -1
- package/dist/post-components/p-Di1H2wNs.js +1 -0
- package/dist/post-components/{p-830d243f.entry.js → p-a9f01db1.entry.js} +1 -1
- package/dist/post-components/{p-7b6a56ba.entry.js → p-dabec4b3.entry.js} +1 -1
- package/dist/post-components/{p-3645ac4e.entry.js → p-f4beab0e.entry.js} +1 -1
- package/dist/post-components/{p-2f03d479.entry.js → p-f63af959.entry.js} +1 -1
- package/dist/post-components/{p-9f0408e9.entry.js → p-f841f6f8.entry.js} +1 -1
- package/dist/post-components/{p-0d3ab7f7.entry.js → p-f9892cd5.entry.js} +1 -1
- package/dist/post-components/post-components.esm.js +1 -1
- package/dist/types/components/post-header/post-header.d.ts +3 -0
- package/hydrate/index.js +22 -8
- package/hydrate/index.mjs +22 -8
- package/package.json +3 -3
- package/dist/components/p-CiFN4Rz9.js +0 -3
- package/dist/esm/package-CiFN4Rz9.js +0 -3
- package/dist/post-components/p-CiFN4Rz9.js +0 -1
- package/dist/post-components/p-f6ce2870.entry.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,h as i,H as a,a as s}from"./p-C8a0ddDa.js";import{v as e}from"./p-
|
|
1
|
+
import{r as t,h as i,H as a,a as s}from"./p-C8a0ddDa.js";import{v as e}from"./p-Di1H2wNs.js";import{c as r,a as o,b as n}from"./p-BWC0gtGU.js";import"./p-_0G7tavk.js";const h=/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;var l;!function(t){t.Slotted="slotted",t.Image="image",t.Initials="initials",t[t.Null=null]="Null"}(l||(l={}));const d=class{constructor(i){t(this,i),this.avatarType=null,this.imageUrl="",this.imageAlt="",this.initials=""}validateFirstname(){r(this,"firstname","string")}validateLastname(){o(this,"lastname","string")}validateUserid(){o(this,"userid","string")}validateEmail(){this.email&&n(this,"email",h)}async getAvatar(){if(null!==this.slottedImage)this.avatarType=l.Slotted;else{let t=!1;!t&&this.userid&&(t=await this.getImageByProp(this.userid,this.fetchImageByUserId.bind(this))),!t&&this.email&&(t=await this.getImageByProp(this.email,this.fetchImageByEmail.bind(this))),t||this.getAvatarByInitials()}}async getImageByProp(t,i){if(!t)return!1;const a=await this.getStorageItem(t)??{ok:!1,url:""};if(!a.ok)try{const t=await i();a.ok=t.ok,a.url=t.url,this.imageUrl=a.url,this.imageAlt=`${this.firstname} ${this.lastname} avatar`,this.avatarType=l.Image,this.setStorageItem(this.userid,JSON.stringify(a))}catch(i){this.removeStorageItem(t),console.info(`Loading avatar by type "${l.Image}" failed.`)}return a.ok}async fetchImageByUserId(){return await fetch(d.INTERNAL_USERID_IMAGE_SRC.replace("{userid}",encodeURIComponent(this.userid)))}async fetchImageByEmail(){const t=await this.cryptify(this.email),i="https://www.gravatar.com/avatar/{email}?s=80&d=404&r=g".replace("{email}",t);return await fetch(i)}getAvatarByInitials(){this.initials=this.getInitials(),this.avatarType=l.Initials}getNames(){return[this.firstname,this.lastname].filter((t=>t))}getInitials(){return this.getNames().map((t=>t.charAt(0))).join("").trim()}async getStorageItem(t){const i=await this.cryptify(t),a=window?.sessionStorage?.getItem(i);return a?JSON.parse(a):null}async setStorageItem(t,i){const a=await this.cryptify(t);window?.sessionStorage?.setItem(a,i)}async removeStorageItem(t){const i=await this.cryptify(t);window?.sessionStorage?.removeItem(i)}async cryptify(t){return await crypto.subtle.digest("SHA-256",(new TextEncoder).encode(t)).then((t=>Array.from(new Uint8Array(t)).map((t=>t.toString(16).padStart(2,"0"))).join("")))}onSlotDefaultChange(){this.slottedImage=this.host.querySelector("img"),this.getAvatar()}componentWillRender(){this.slottedImage=this.host.querySelector("img"),this.getAvatar()}componentDidLoad(){this.validateFirstname(),this.validateLastname(),this.validateUserid(),this.validateEmail()}render(){const t=this.getNames().reduce(((t,a,s)=>(s>0&&t.push(i("span",null," ")),t.push(a.charAt(0)),t.push(i("span",null,a.slice(1))),t)),[]);return i(a,{"data-version":e},i("slot",{onSlotchange:this.onSlotDefaultChange.bind(this)},"image"===this.avatarType&&i("img",{src:this.imageUrl,alt:this.imageAlt}),"initials"===this.avatarType&&i("div",{class:"initials"},t)))}get host(){return s(this)}static get watchers(){return{firstname:["validateFirstname"],lastname:["validateLastname"],userid:["validateUserid"],email:["validateEmail"]}}};d.INTERNAL_USERID_IMAGE_SRC="https://web.post.ch/UserProfileImage/{userid}.png",d.style='@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}:host{--post-avatar-bg:var(--post-scheme-color-interactive-primary-enabled-bg2);--post-avatar-fg:var(--post-scheme-color-interactive-primary-enabled-fg3);display:inline-flex;position:relative;width:var(--post-device-sizing-interactive-icon-size3);height:var(--post-device-sizing-interactive-icon-size3);background-color:var(--post-scheme-color-interactive-primary-enabled-stroke3);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke3);border-radius:var(--post-device-border-radius-round);font-size:var(--post-device-font-size-8);vertical-align:top;line-height:1}:host::after{display:block;content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}*,*::before,*::after{box-sizing:border-box}slot,img,::slotted(img){display:block;width:100%;height:100%}img,::slotted(img){border-radius:var(--post-device-border-radius-round)}::slotted(:not(img)){display:none !important}.initials{display:flex;justify-content:center;align-items:center;position:relative;z-index:2;width:100%;height:100%;background-color:var(--post-avatar-bg);border-radius:var(--post-device-border-radius-round);color:var(--post-avatar-fg);text-transform:uppercase}.initials span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}';export{d as post_avatar}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,g as a,b as l}from"./p-C8a0ddDa.js";export{s as setNonce}from"./p-C8a0ddDa.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((async e=>(await a(),l([["p-
|
|
1
|
+
import{p as e,g as a,b as l}from"./p-C8a0ddDa.js";export{s as setNonce}from"./p-C8a0ddDa.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((async e=>(await a(),l([["p-5a1ba589",[[1,"post-breadcrumbs",{homeUrl:[1,"home-url"],homeText:[1,"home-text"],breadcrumbItems:[32],isConcatenated:[32],lastWindowWidth:[32]},null,{homeUrl:["validateHomeUrl"],homeText:["validateHomeText"]}]]],["p-17bcb457",[[1,"post-footer",{label:[1],device:[32],gridSlotDisplayed:[32]},null,{label:["validateLabel"]}]]],["p-a9f01db1",[[1,"post-back-to-top",{label:[513],belowFold:[32]},null,{label:["validateLabel"],belowFold:["watchBelowFold"]}]]],["p-f4beab0e",[[1,"post-banner",{dismissible:[4],dismissLabel:[1,"dismiss-label"],icon:[1],type:[1],bannerId:[32],classes:[32],hasActions:[32],hasHeading:[32],onDismissButtonClick:[32],dismiss:[64]},null,{dismissible:["checkDismissible"],icon:["validateIcon"],type:["validateType"]}]]],["p-401bdce7",[[65,"post-card-control",{label:[513],description:[1],type:[1],name:[1],value:[1],checked:[1028],disabled:[1028],validity:[1028],icon:[1],focused:[32],reset:[64],groupReset:[64]},null,{label:["validateControlLabel"],description:["validateControlDescription"],type:["validateControlType"],name:["validateControlName"],value:["validateControlValue"],icon:["validateControlIcon"],checked:["updateControlChecked"],disabled:["updateControlDisabled"]}]]],["p-2342da52",[[1,"post-popover",{placement:[1],closeButtonCaption:[1,"close-button-caption"],arrow:[4],show:[64],hide:[64],toggle:[64]},null,{placement:["validatePlacement"],closeButtonCaption:["validateCloseButtonCaption"]}]]],["p-87c5fc42",[[1,"post-rating",{label:[1],stars:[2],currentRating:[1026,"current-rating"],readonly:[4],hoveredIndex:[32]},null,{label:["validateLabel"],stars:["validateStars"],currentRating:["validateCurrentRating"]}]]],["p-f841f6f8",[[1,"post-tooltip",{placement:[1],arrow:[4],animation:[1],open:[1540],show:[64],hide:[64],toggle:[64]},null,{placement:["validatePlacement"]}]]],["p-f9892cd5",[[1,"post-avatar",{firstname:[513],lastname:[1],userid:[1],email:[1],slottedImage:[32],avatarType:[32],imageUrl:[32],imageAlt:[32],initials:[32]},null,{firstname:["validateFirstname"],lastname:["validateLastname"],userid:["validateUserid"],email:["validateEmail"]}]]],["p-09c1822c",[[1,"post-linkarea"]]],["p-0c25c428",[[1,"post-tab-header",{panel:[513],tabId:[32]},null,{panel:["validateFor"]}]]],["p-5e8ee2b1",[[1,"post-tab-panel",{name:[513],panelId:[32]},null,{name:["validateName"]}]]],["p-dabec4b3",[[1,"post-tabs",{activePanel:[1,"active-panel"],fullWidth:[516,"full-width"],show:[64]}]]],["p-f63af959",[[1,"post-tooltip-trigger",{for:[513],delay:[2]},null,{for:["validateControlFor"]}]]],["p-4bf808d9",[[1,"post-collapsible",{collapsed:[1028],toggle:[64]},null,{collapsed:["collapsedChange"]}],[1,"post-collapsible-trigger",{for:[513],update:[64]},null,{for:["validateAriaAttributes"]}]]],["p-778ca412",[[1,"post-language-switch",{caption:[1],description:[1],variant:[1],activeLang:[32]},[[0,"postChange","handlePostChange"],[0,"postLanguageOptionInitiallyActive","handleInitiallyActive"]],{caption:["validateCaption"],description:["validateDescription"],variant:["validateVariant"]}],[1,"post-closebutton"],[4,"post-mainnavigation",{canScrollLeft:[32],canScrollRight:[32]},[[9,"mouseup","stopScrolling"],[9,"mouseleave","stopScrolling"]]],[1,"post-header",{device:[32],hasNavigation:[32],mobileMenuExtended:[32],megadropdownOpen:[32],toggleMobileMenu:[64]},null,{device:["lockBody"],mobileMenuExtended:["lockBody"]}],[4,"post-language-option",{code:[1],active:[1540],variant:[1],name:[1],url:[1],select:[64]},null,{code:["validateCode"],variant:["validateVariant"],name:["validateName"],url:["validateUrl"]}],[4,"post-list",{titleHidden:[4,"title-hidden"],horizontal:[516],titleId:[32]}],[1,"post-list-item"],[1,"post-logo",{url:[1]},null,{url:["validateUrl"]}],[4,"post-megadropdown",{device:[32],isVisible:[32],animationClass:[32],toggle:[64],show:[64],hide:[64],focusFirst:[64]}],[4,"post-megadropdown-trigger",{for:[1],ariaExpanded:[32]},null,{for:["validateControlFor"]}],[1,"post-togglebutton",{toggled:[1028]}],[1,"post-menu",{placement:[1],isVisible:[32],toggle:[64],show:[64],hide:[64]},null,{placement:["validatePlacement"]}],[4,"post-menu-trigger",{for:[513],ariaExpanded:[32]},null,{for:["validateControlFor"]}],[4,"post-popovercontainer",{placement:[1],edgeGap:[2,"edge-gap"],animation:[1],arrow:[4],manualClose:[4,"manual-close"],safeSpace:[513,"safe-space"],show:[64],hide:[64],toggle:[64]},null,{placement:["validatePlacement"],edgeGap:["validateEdgeGap"],safeSpace:["validateSafeSpace"]}],[1,"post-icon",{animation:[1],base:[1],flipH:[4,"flip-h"],flipV:[4,"flip-v"],name:[513],rotate:[2],scale:[2]},null,{animation:["validateAnimation"],base:["validateBase"],name:["validateName"],rotate:["validateRotate"],scale:["validateScale"]}]]],["p-9c3d4d93",[[1,"post-accordion-item",{collapsed:[1028],headingLevel:[2,"heading-level"],id:[32],slottedLogo:[32],toggle:[64]},[[2,"postToggle","onCollapseToggle"]],{headingLevel:["validateHeadingLevel"]}],[1,"post-accordion",{headingLevel:[2,"heading-level"],multiple:[4],toggle:[64],expandAll:[64],collapseAll:[64]},[[0,"postToggle","collapseToggleHandler"]],{headingLevel:["validateHeadingLevel"]}]]],["p-928788fc",[[1,"post-breadcrumb-item",{url:[1],fullUrl:[32]},null,{url:["validateUrl"]}],[4,"post-menu-item"]]]],e))));
|
|
@@ -17,9 +17,11 @@ export declare class PostHeader {
|
|
|
17
17
|
private readonly throttledResize;
|
|
18
18
|
private scrollParentResizeObserver;
|
|
19
19
|
private localHeaderResizeObserver;
|
|
20
|
+
private get hasMobileMenu();
|
|
20
21
|
get scrollParent(): HTMLElement;
|
|
21
22
|
host: HTMLPostHeaderElement;
|
|
22
23
|
device: Device;
|
|
24
|
+
hasNavigation: boolean;
|
|
23
25
|
mobileMenuExtended: boolean;
|
|
24
26
|
megadropdownOpen: boolean;
|
|
25
27
|
lockBody(newValue: boolean | string, _oldValue: boolean | string, propName: string): void;
|
|
@@ -30,6 +32,7 @@ export declare class PostHeader {
|
|
|
30
32
|
componentDidRender(): void;
|
|
31
33
|
componentDidLoad(): void;
|
|
32
34
|
disconnectedCallback(): void;
|
|
35
|
+
private checkNavigationExistence;
|
|
33
36
|
private closeMobileMenu;
|
|
34
37
|
/**
|
|
35
38
|
* Toggles the mobile navigation.
|
package/hydrate/index.js
CHANGED
|
@@ -3229,7 +3229,7 @@ var registerHost = (elm, cmpMeta) => {
|
|
|
3229
3229
|
};
|
|
3230
3230
|
var styles = /* @__PURE__ */ new Map();
|
|
3231
3231
|
|
|
3232
|
-
const version$1 = "10.0.0-next.
|
|
3232
|
+
const version$1 = "10.0.0-next.45";
|
|
3233
3233
|
|
|
3234
3234
|
const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
|
|
3235
3235
|
|
|
@@ -5153,7 +5153,7 @@ class PostFooter {
|
|
|
5153
5153
|
}; }
|
|
5154
5154
|
}
|
|
5155
5155
|
|
|
5156
|
-
const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative;--post-
|
|
5156
|
+
const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative;--post-logo-height:calc(var(--post-global-header-expanded-height) - var(--post-header-scroll-top, 0px));--post-global-header-top:calc( var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height) );--post-local-header-top:calc( var(--post-global-header-reduced-height) + var(--post-local-header-reduced-height) - var(--post-local-header-expanded-height) );--post-global-controls-top:clamp( 1000 * var(--post-global-header-top), calc(-1 * min(var(--post-header-scroll-top, 0px) / 4, var(--post-global-header-reduced-height))), 0px )}@media screen and (min-width: 1024px){:host:has(.global-sub>*:not(.logo):focus-within),:host:has(.local-sub:focus-within){--post-global-header-top:0;--post-local-header-top:var(--post-global-header-expanded-height);--post-logo-height:var(--post-global-header-expanded-height);--post-global-controls-top:0}}:host(:not(:has([slot=title]))) .local-header{padding-block-start:0}:host(:not(:has([slot=title]))) .local-sub{display:none}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;position:sticky;padding-inline:4px;height:var(--post-global-header-expanded-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:4;inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:8px;inset-block-start:var(--post-global-header-top);transition:inset-block-start .2s ease-in-out}}.global-sub{display:flex;align-items:center;gap:24px}@media screen and (min-width: 1024px){.global-sub:not(:has(.logo)){position:relative;transition:inset-block-start .2s ease-in-out;inset-block-start:var(--post-global-controls-top)}.global-sub:not(:last-child):not(:first-child){flex-grow:1}}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--post-global-header-expanded-height);width:var(--post-global-header-expanded-height);min-height:var(--post-global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{transition:height .2 ease-in-out;height:var(--post-logo-height)}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-inline-start:0;gap:1rem;flex-shrink:0 !important}.local-header{display:flex;position:sticky;inset-block-start:var(--post-local-header-top);flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--post-local-header-expanded-min-height);background:#fff;transition:box-shadow .2s ease-in-out}.local-header::after{content:\"\";position:absolute;width:100%;height:1px;background-color:#e1e0dc;inset-block-end:-1px;z-index:1}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.local-header::after{background-color:Highlight}}@media screen and (min-width: 1024px){.local-header{z-index:3;padding-block-start:18px;box-shadow:var(--post-device-elevation-300);transition:box-shadow .2s ease-in-out,inset-block-start .2s ease-in-out}}@media screen and (max-width: 1023.98px){.local-header{z-index:3;padding-block:8px;flex-wrap:wrap;gap:12px}.local-header.local-header-mobile-extended::after{inset-block-end:0}.local-header:not(.local-header-mobile-extended){box-shadow:var(--post-device-elevation-300)}}.local-header.no-navigation{padding-block:0}.local-header.no-navigation .navigation{display:none}.local-sub{margin-inline-end:16px}@media screen and (max-width: 1023.98px){.local-sub{margin-inline-end:4px}}::slotted(.list-inline){margin:0 !important;z-index:3 !important;position:relative !important}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{inset-block-start:var(--post-global-header-reduced-height)}.navigation::before{display:block;content:\"\";position:absolute;inset:0;z-index:2;background:#fff}}@media screen and (max-width: 1023.98px){.navigation{position:sticky;z-index:2;inset-inline:0;inset-block-start:var(--post-header-height)}.mobile-menu{background-color:#fafafa}::slotted(post-mainnavigation),.navigation-footer{padding-block:16px 24px;padding-inline:40px}::slotted(post-mainnavigation),.navigation-footer,.navigation-target-group{display:none;flex-direction:column}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer,.navigation.extended .navigation-target-group{display:flex}::slotted(post-mainnavigation){padding-block:24px}.navigation.extended>div{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height))}.navigation.extended.megadropdown-open>div{overflow-y:hidden}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}.navigation-footer{background-color:#f0efed;gap:24px}.navigation-footer ::slotted(post-language-switch){margin-top:16px}}@media screen and (max-width: 1023.98px)and (max-width: 599.98px){.navigation-footer{gap:16px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}";
|
|
5157
5157
|
|
|
5158
5158
|
var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
5159
5159
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -5176,6 +5176,9 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
|
|
|
5176
5176
|
* @slot target-group - Holds the list of buttons to choose the target group.
|
|
5177
5177
|
*/
|
|
5178
5178
|
class PostHeader {
|
|
5179
|
+
get hasMobileMenu() {
|
|
5180
|
+
return this.device !== 'desktop' && this.hasNavigation;
|
|
5181
|
+
}
|
|
5179
5182
|
get scrollParent() {
|
|
5180
5183
|
const frozenScrollParent = document.querySelector('[data-post-scroll-locked]');
|
|
5181
5184
|
if (frozenScrollParent)
|
|
@@ -5206,6 +5209,7 @@ class PostHeader {
|
|
|
5206
5209
|
registerInstance(this, hostRef);
|
|
5207
5210
|
this.throttledResize = throttle(50, () => this.updateLocalHeaderHeight());
|
|
5208
5211
|
this.device = breakpoint.get('device');
|
|
5212
|
+
this.hasNavigation = false;
|
|
5209
5213
|
this.mobileMenuExtended = false;
|
|
5210
5214
|
this.megadropdownOpen = false;
|
|
5211
5215
|
this.breakpointChange = (e) => {
|
|
@@ -5241,6 +5245,7 @@ class PostHeader {
|
|
|
5241
5245
|
document.addEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
|
|
5242
5246
|
this.host.addEventListener('click', this.handleLinkClick);
|
|
5243
5247
|
window.addEventListener('postBreakpoint:device', this.breakpointChange);
|
|
5248
|
+
this.checkNavigationExistence();
|
|
5244
5249
|
this.switchLanguageSwitchMode();
|
|
5245
5250
|
this.handleScrollParentResize();
|
|
5246
5251
|
this.lockBody(false, this.mobileMenuExtended, 'mobileMenuExtended');
|
|
@@ -5275,6 +5280,9 @@ class PostHeader {
|
|
|
5275
5280
|
}
|
|
5276
5281
|
this.mobileMenuExtended = false;
|
|
5277
5282
|
}
|
|
5283
|
+
checkNavigationExistence() {
|
|
5284
|
+
this.hasNavigation = this.host.querySelectorAll('post-mainnavigation').length > 0;
|
|
5285
|
+
}
|
|
5278
5286
|
async closeMobileMenu() {
|
|
5279
5287
|
this.mobileMenuAnimation.finish();
|
|
5280
5288
|
const menuButton = this.getMenuButton();
|
|
@@ -5357,7 +5365,7 @@ class PostHeader {
|
|
|
5357
5365
|
updateLocalHeaderHeight() {
|
|
5358
5366
|
const localHeaderElement = this.host.shadowRoot.querySelector('.local-header');
|
|
5359
5367
|
if (localHeaderElement) {
|
|
5360
|
-
document.documentElement.style.setProperty('--post-local-header-height', `${localHeaderElement.clientHeight}px`);
|
|
5368
|
+
document.documentElement.style.setProperty('--post-local-header-expanded-height', `${localHeaderElement.clientHeight}px`);
|
|
5361
5369
|
}
|
|
5362
5370
|
}
|
|
5363
5371
|
updateScrollParentHeight() {
|
|
@@ -5394,7 +5402,7 @@ class PostHeader {
|
|
|
5394
5402
|
}
|
|
5395
5403
|
}
|
|
5396
5404
|
switchLanguageSwitchMode() {
|
|
5397
|
-
const variant = this.
|
|
5405
|
+
const variant = this.hasMobileMenu ? 'list' : 'menu';
|
|
5398
5406
|
Array.from(this.host.querySelectorAll('post-language-switch')).forEach(languageSwitch => {
|
|
5399
5407
|
languageSwitch?.setAttribute('variant', variant);
|
|
5400
5408
|
});
|
|
@@ -5408,10 +5416,15 @@ class PostHeader {
|
|
|
5408
5416
|
if (this.megadropdownOpen) {
|
|
5409
5417
|
navigationClasses.push('megadropdown-open');
|
|
5410
5418
|
}
|
|
5411
|
-
return (hAsync("div", { class: navigationClasses.join(' '), style: { '--post-header-navigation-current-inset': `${mobileMenuScrollTop}px` } }, hAsync("div", { class: "mobile-menu", ref: el => (this.mobileMenu = el) }, hAsync("div", { class: "navigation-target-group" }, (this.device === 'mobile' || this.device === 'tablet') && (hAsync("slot", { name: "target-group" }))), hAsync("slot", { name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (hAsync("div", { class: "navigation-footer" }, hAsync("slot", { name: "meta-navigation" }), hAsync("slot", { name: "post-language-switch" }))))));
|
|
5419
|
+
return (hAsync("div", { class: navigationClasses.join(' '), style: { '--post-header-navigation-current-inset': `${mobileMenuScrollTop}px` } }, hAsync("div", { class: "mobile-menu", ref: el => (this.mobileMenu = el) }, hAsync("div", { class: "navigation-target-group" }, (this.device === 'mobile' || this.device === 'tablet') && (hAsync("slot", { name: "target-group" }))), hAsync("slot", { name: "post-mainnavigation", onSlotchange: () => this.checkNavigationExistence() }), (this.device === 'mobile' || this.device === 'tablet') && (hAsync("div", { class: "navigation-footer" }, hAsync("slot", { name: "meta-navigation" }), hAsync("slot", { name: "post-language-switch" }))))));
|
|
5412
5420
|
}
|
|
5413
5421
|
render() {
|
|
5414
|
-
|
|
5422
|
+
const localHeaderClasses = ['local-header'];
|
|
5423
|
+
if (this.mobileMenuExtended)
|
|
5424
|
+
localHeaderClasses.push('local-header-mobile-extended');
|
|
5425
|
+
if (!this.hasNavigation)
|
|
5426
|
+
localHeaderClasses.push('no-navigation');
|
|
5427
|
+
return (hAsync(Host, { key: 'ec2be7f6699d0b6be65c7ec05ccfaf11fe38551f', "data-version": version$1, "data-color-scheme": "light" }, hAsync("div", { key: 'defa2d956e848f0270e1c36404bb0e32e6112ab2', class: "global-header" }, hAsync("div", { key: 'b1db492439d45566140d8698310d68707d44f178', class: "global-sub" }, hAsync("div", { key: 'a238bbbe5999e4ff858b9f7223eb3a82ae517dc3', class: "logo" }, hAsync("slot", { key: '7b6a922842eaf01fdddad88079c5c4e27d9caf9d', name: "post-logo" }))), hAsync("div", { key: '70b7e4f0a0e7dcd8458238f85d5cadfad5c8030d', class: "global-sub" }, this.device === 'desktop' && hAsync("slot", { key: '9abe132d957d37848205cd5b045ed9d8e9040da4', name: "target-group" })), hAsync("div", { key: '6666cb7b19cd3654020291cff4b3f7821f190416', class: "global-sub" }, !this.hasMobileMenu && (hAsync("slot", { key: '446f14ba4b014b35b60dbf643ab1baace4cd1cd7', name: "meta-navigation" })), hAsync("slot", { key: '6cdb4006e56ccdeb076cbe486a437ca56e4b259a', name: "global-controls" }), !this.hasMobileMenu && hAsync("slot", { key: '6be456ce09dee5653c36e2320fa89345139232a4', name: "post-language-switch" }), this.hasNavigation && (hAsync("div", { key: '28f87889a93aae2e78978cbd02e18dca58a486ef', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, hAsync("slot", { key: '157b154a30cdaf4c17434c2a6c7a796ad945780c', name: "post-togglebutton" }))))), hAsync("div", { key: 'ddf249e9b055659325cc9717f03ccd9345556e15', class: localHeaderClasses.join(' ') }, hAsync("slot", { key: '858312b4c4ef74c76588f9cd0b49acfda39f6daf', name: "title" }), hAsync("div", { key: '73db57db8df18d9106cb124cf95b0c2551ceda23', class: "local-sub" }, hAsync("slot", { key: 'e36a9e8572878fe11ae326503b0cbcc4d03ddd3e', name: "local-controls" }), hAsync("slot", { key: '354e22a83276f8fa8c79127c8cdcfbf0f12dbf91' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
|
|
5415
5428
|
}
|
|
5416
5429
|
get host() { return getElement(this); }
|
|
5417
5430
|
static get watchers() { return {
|
|
@@ -5424,6 +5437,7 @@ class PostHeader {
|
|
|
5424
5437
|
"$tagName$": "post-header",
|
|
5425
5438
|
"$members$": {
|
|
5426
5439
|
"device": [32],
|
|
5440
|
+
"hasNavigation": [32],
|
|
5427
5441
|
"mobileMenuExtended": [32],
|
|
5428
5442
|
"megadropdownOpen": [32],
|
|
5429
5443
|
"toggleMobileMenu": [64]
|
|
@@ -5921,7 +5935,7 @@ class PostLogo {
|
|
|
5921
5935
|
}; }
|
|
5922
5936
|
}
|
|
5923
5937
|
|
|
5924
|
-
const postMainnavigationCss = "post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button{background-color:ButtonFace !important}post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:Highlight !important}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item post-megadropdown-trigger button{flex:0 0 fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-mainnavigation post-list-item>a:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:4px;outline-offset:-2px !important}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{content:\"\";mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:24px;width:24px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation>button,post-mainnavigation post-megadropdown-trigger button{border:1px solid ButtonBorder !important}post-mainnavigation>button:hover::after,post-mainnavigation>button[aria-expanded=true]::after,post-mainnavigation post-megadropdown-trigger button:hover::after,post-mainnavigation post-megadropdown-trigger button[aria-expanded=true]::after{color:HighlightText}}@media screen and (min-width: 1024px){post-mainnavigation{display:block;position:relative;height:var(--post-main-navigation-height);background:#fff;user-select:none}post-mainnavigation nav{flex:1 1 auto;overflow:hidden;scroll-behavior:smooth}post-mainnavigation .scroll-control{cursor:pointer;position:absolute;inset-block:0;z-index:5;padding:16px;background:#fff;box-shadow:var(--post-device-elevation-500);line-height:1}post-mainnavigation .scroll-control.scroll-left{inset-inline-start:0}post-mainnavigation .scroll-control.scroll-right{inset-inline-end:0}post-mainnavigation .scroll-control.d-none{display:none}post-mainnavigation .scroll-control post-icon{font-size:1rem}post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{position:sticky;padding-inline:12px;height:var(--post-main-navigation-height);gap:4px;font-size:16px;z-index:4}}@media screen and (min-width: 1024px)and (max-width: 1023.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{z-index:5}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-active,post-mainnavigation post-list-item>button .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-active{font-weight:700;text-align:center;opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{position:absolute;opacity:1;text-align:center;width:100%;inset-inline-start:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff;font-weight:700}post-mainnavigation post-list-item>a.selected .nav-el-active,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item>button.selected .nav-el-active,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-active{opacity:1}post-mainnavigation post-list-item>a.selected .nav-el-inactive,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item>button.selected .nav-el-inactive,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-inactive{opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}}@media screen and (min-width: 1024px)and (max-width: 599.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:14px}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:12px;transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{width:calc(100% - 28px)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button.selected::after,post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button.selected::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}}@media screen and (min-width: 1024px){post-mainnavigation post-megadropdown button:not(.btn-icon-close),post-mainnavigation post-megadropdown a{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-megadropdown button:not(.btn-icon-close)::before,post-mainnavigation post-megadropdown a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-megadropdown button:not(.btn-icon-close).selected,post-mainnavigation post-megadropdown button:not(.btn-icon-close)[aria-expanded=true],post-mainnavigation post-megadropdown a.selected,post-mainnavigation post-megadropdown a[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover,post-mainnavigation post-megadropdown a:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover::before,post-mainnavigation post-megadropdown a:hover::before{background-color:#504f4b}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .scroll-control{display:none}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-list-item>a::before,post-mainnavigation post-list-item>button::before,post-mainnavigation post-list-item post-megadropdown-trigger button::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-list-item>a:hover::before,post-mainnavigation post-list-item>button:hover::before,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{background-color:#504f4b}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{display:none}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{transform:rotate(-90deg)}}";
|
|
5938
|
+
const postMainnavigationCss = "post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button{background-color:ButtonFace !important}post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:Highlight !important}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item post-megadropdown-trigger button{flex:0 0 fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-mainnavigation post-list-item>a:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:4px;outline-offset:-2px !important}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{content:\"\";mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:24px;width:24px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation>button,post-mainnavigation post-megadropdown-trigger button{border:1px solid ButtonBorder !important}post-mainnavigation>button:hover::after,post-mainnavigation>button[aria-expanded=true]::after,post-mainnavigation post-megadropdown-trigger button:hover::after,post-mainnavigation post-megadropdown-trigger button[aria-expanded=true]::after{color:HighlightText}}@media screen and (min-width: 1024px){post-mainnavigation{display:block;position:relative;height:var(--post-main-navigation-height, 0);background:#fff;user-select:none}post-mainnavigation nav{flex:1 1 auto;overflow:hidden;scroll-behavior:smooth}post-mainnavigation .scroll-control{cursor:pointer;position:absolute;inset-block:0;z-index:5;padding:16px;background:#fff;box-shadow:var(--post-device-elevation-500);line-height:1}post-mainnavigation .scroll-control.scroll-left{inset-inline-start:0}post-mainnavigation .scroll-control.scroll-right{inset-inline-end:0}post-mainnavigation .scroll-control.d-none{display:none}post-mainnavigation .scroll-control post-icon{font-size:1rem}post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{position:sticky;padding-inline:12px;height:var(--post-main-navigation-height, 0);gap:4px;font-size:16px;z-index:4}}@media screen and (min-width: 1024px)and (max-width: 1023.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{z-index:5}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-active,post-mainnavigation post-list-item>button .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-active{font-weight:700;text-align:center;opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{position:absolute;opacity:1;text-align:center;width:100%;inset-inline-start:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff;font-weight:700}post-mainnavigation post-list-item>a.selected .nav-el-active,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item>button.selected .nav-el-active,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-active{opacity:1}post-mainnavigation post-list-item>a.selected .nav-el-inactive,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item>button.selected .nav-el-inactive,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-inactive{opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}}@media screen and (min-width: 1024px)and (max-width: 599.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:14px}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:12px;transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{width:calc(100% - 28px)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button.selected::after,post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button.selected::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}}@media screen and (min-width: 1024px){post-mainnavigation post-megadropdown button:not(.btn-icon-close),post-mainnavigation post-megadropdown a{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-megadropdown button:not(.btn-icon-close)::before,post-mainnavigation post-megadropdown a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-megadropdown button:not(.btn-icon-close).selected,post-mainnavigation post-megadropdown button:not(.btn-icon-close)[aria-expanded=true],post-mainnavigation post-megadropdown a.selected,post-mainnavigation post-megadropdown a[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover,post-mainnavigation post-megadropdown a:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover::before,post-mainnavigation post-megadropdown a:hover::before{background-color:#504f4b}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .scroll-control{display:none}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-list-item>a::before,post-mainnavigation post-list-item>button::before,post-mainnavigation post-list-item post-megadropdown-trigger button::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-list-item>a:hover::before,post-mainnavigation post-list-item>button:hover::before,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{background-color:#504f4b}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{display:none}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{transform:rotate(-90deg)}}";
|
|
5925
5939
|
|
|
5926
5940
|
const SCROLL_REPEAT_INTERVAL = 100; // Interval for repeated scrolling when holding down scroll button
|
|
5927
5941
|
const NAVBAR_DISABLE_DURATION = 400; // Duration to temporarily disable navbar interactions during scrolling
|
|
@@ -10298,7 +10312,7 @@ class PostTooltip {
|
|
|
10298
10312
|
}
|
|
10299
10313
|
render() {
|
|
10300
10314
|
const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
|
|
10301
|
-
return (hAsync(Host, { key: '
|
|
10315
|
+
return (hAsync(Host, { key: 'c5f293812e33520ea5a2c9224e93fe5e5e41cbe0', "data-version": version$1 }, hAsync("post-popovercontainer", { key: '7ec57e1a2315d95e7cb696cf6d2d1a1d8ae77257', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, hAsync("slot", { key: '79c91307707c56345acb136a45acdae859d54c2b' }))));
|
|
10302
10316
|
}
|
|
10303
10317
|
get host() { return getElement(this); }
|
|
10304
10318
|
static get watchers() { return {
|
package/hydrate/index.mjs
CHANGED
|
@@ -3227,7 +3227,7 @@ var registerHost = (elm, cmpMeta) => {
|
|
|
3227
3227
|
};
|
|
3228
3228
|
var styles = /* @__PURE__ */ new Map();
|
|
3229
3229
|
|
|
3230
|
-
const version$1 = "10.0.0-next.
|
|
3230
|
+
const version$1 = "10.0.0-next.45";
|
|
3231
3231
|
|
|
3232
3232
|
const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
|
|
3233
3233
|
|
|
@@ -5151,7 +5151,7 @@ class PostFooter {
|
|
|
5151
5151
|
}; }
|
|
5152
5152
|
}
|
|
5153
5153
|
|
|
5154
|
-
const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative;--post-
|
|
5154
|
+
const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative;--post-logo-height:calc(var(--post-global-header-expanded-height) - var(--post-header-scroll-top, 0px));--post-global-header-top:calc( var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height) );--post-local-header-top:calc( var(--post-global-header-reduced-height) + var(--post-local-header-reduced-height) - var(--post-local-header-expanded-height) );--post-global-controls-top:clamp( 1000 * var(--post-global-header-top), calc(-1 * min(var(--post-header-scroll-top, 0px) / 4, var(--post-global-header-reduced-height))), 0px )}@media screen and (min-width: 1024px){:host:has(.global-sub>*:not(.logo):focus-within),:host:has(.local-sub:focus-within){--post-global-header-top:0;--post-local-header-top:var(--post-global-header-expanded-height);--post-logo-height:var(--post-global-header-expanded-height);--post-global-controls-top:0}}:host(:not(:has([slot=title]))) .local-header{padding-block-start:0}:host(:not(:has([slot=title]))) .local-sub{display:none}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;position:sticky;padding-inline:4px;height:var(--post-global-header-expanded-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:4;inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:8px;inset-block-start:var(--post-global-header-top);transition:inset-block-start .2s ease-in-out}}.global-sub{display:flex;align-items:center;gap:24px}@media screen and (min-width: 1024px){.global-sub:not(:has(.logo)){position:relative;transition:inset-block-start .2s ease-in-out;inset-block-start:var(--post-global-controls-top)}.global-sub:not(:last-child):not(:first-child){flex-grow:1}}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--post-global-header-expanded-height);width:var(--post-global-header-expanded-height);min-height:var(--post-global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{transition:height .2 ease-in-out;height:var(--post-logo-height)}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-inline-start:0;gap:1rem;flex-shrink:0 !important}.local-header{display:flex;position:sticky;inset-block-start:var(--post-local-header-top);flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--post-local-header-expanded-min-height);background:#fff;transition:box-shadow .2s ease-in-out}.local-header::after{content:\"\";position:absolute;width:100%;height:1px;background-color:#e1e0dc;inset-block-end:-1px;z-index:1}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.local-header::after{background-color:Highlight}}@media screen and (min-width: 1024px){.local-header{z-index:3;padding-block-start:18px;box-shadow:var(--post-device-elevation-300);transition:box-shadow .2s ease-in-out,inset-block-start .2s ease-in-out}}@media screen and (max-width: 1023.98px){.local-header{z-index:3;padding-block:8px;flex-wrap:wrap;gap:12px}.local-header.local-header-mobile-extended::after{inset-block-end:0}.local-header:not(.local-header-mobile-extended){box-shadow:var(--post-device-elevation-300)}}.local-header.no-navigation{padding-block:0}.local-header.no-navigation .navigation{display:none}.local-sub{margin-inline-end:16px}@media screen and (max-width: 1023.98px){.local-sub{margin-inline-end:4px}}::slotted(.list-inline){margin:0 !important;z-index:3 !important;position:relative !important}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{inset-block-start:var(--post-global-header-reduced-height)}.navigation::before{display:block;content:\"\";position:absolute;inset:0;z-index:2;background:#fff}}@media screen and (max-width: 1023.98px){.navigation{position:sticky;z-index:2;inset-inline:0;inset-block-start:var(--post-header-height)}.mobile-menu{background-color:#fafafa}::slotted(post-mainnavigation),.navigation-footer{padding-block:16px 24px;padding-inline:40px}::slotted(post-mainnavigation),.navigation-footer,.navigation-target-group{display:none;flex-direction:column}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer,.navigation.extended .navigation-target-group{display:flex}::slotted(post-mainnavigation){padding-block:24px}.navigation.extended>div{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height))}.navigation.extended.megadropdown-open>div{overflow-y:hidden}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}.navigation-footer{background-color:#f0efed;gap:24px}.navigation-footer ::slotted(post-language-switch){margin-top:16px}}@media screen and (max-width: 1023.98px)and (max-width: 599.98px){.navigation-footer{gap:16px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}";
|
|
5155
5155
|
|
|
5156
5156
|
var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
5157
5157
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -5174,6 +5174,9 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
|
|
|
5174
5174
|
* @slot target-group - Holds the list of buttons to choose the target group.
|
|
5175
5175
|
*/
|
|
5176
5176
|
class PostHeader {
|
|
5177
|
+
get hasMobileMenu() {
|
|
5178
|
+
return this.device !== 'desktop' && this.hasNavigation;
|
|
5179
|
+
}
|
|
5177
5180
|
get scrollParent() {
|
|
5178
5181
|
const frozenScrollParent = document.querySelector('[data-post-scroll-locked]');
|
|
5179
5182
|
if (frozenScrollParent)
|
|
@@ -5204,6 +5207,7 @@ class PostHeader {
|
|
|
5204
5207
|
registerInstance(this, hostRef);
|
|
5205
5208
|
this.throttledResize = throttle(50, () => this.updateLocalHeaderHeight());
|
|
5206
5209
|
this.device = breakpoint.get('device');
|
|
5210
|
+
this.hasNavigation = false;
|
|
5207
5211
|
this.mobileMenuExtended = false;
|
|
5208
5212
|
this.megadropdownOpen = false;
|
|
5209
5213
|
this.breakpointChange = (e) => {
|
|
@@ -5239,6 +5243,7 @@ class PostHeader {
|
|
|
5239
5243
|
document.addEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
|
|
5240
5244
|
this.host.addEventListener('click', this.handleLinkClick);
|
|
5241
5245
|
window.addEventListener('postBreakpoint:device', this.breakpointChange);
|
|
5246
|
+
this.checkNavigationExistence();
|
|
5242
5247
|
this.switchLanguageSwitchMode();
|
|
5243
5248
|
this.handleScrollParentResize();
|
|
5244
5249
|
this.lockBody(false, this.mobileMenuExtended, 'mobileMenuExtended');
|
|
@@ -5273,6 +5278,9 @@ class PostHeader {
|
|
|
5273
5278
|
}
|
|
5274
5279
|
this.mobileMenuExtended = false;
|
|
5275
5280
|
}
|
|
5281
|
+
checkNavigationExistence() {
|
|
5282
|
+
this.hasNavigation = this.host.querySelectorAll('post-mainnavigation').length > 0;
|
|
5283
|
+
}
|
|
5276
5284
|
async closeMobileMenu() {
|
|
5277
5285
|
this.mobileMenuAnimation.finish();
|
|
5278
5286
|
const menuButton = this.getMenuButton();
|
|
@@ -5355,7 +5363,7 @@ class PostHeader {
|
|
|
5355
5363
|
updateLocalHeaderHeight() {
|
|
5356
5364
|
const localHeaderElement = this.host.shadowRoot.querySelector('.local-header');
|
|
5357
5365
|
if (localHeaderElement) {
|
|
5358
|
-
document.documentElement.style.setProperty('--post-local-header-height', `${localHeaderElement.clientHeight}px`);
|
|
5366
|
+
document.documentElement.style.setProperty('--post-local-header-expanded-height', `${localHeaderElement.clientHeight}px`);
|
|
5359
5367
|
}
|
|
5360
5368
|
}
|
|
5361
5369
|
updateScrollParentHeight() {
|
|
@@ -5392,7 +5400,7 @@ class PostHeader {
|
|
|
5392
5400
|
}
|
|
5393
5401
|
}
|
|
5394
5402
|
switchLanguageSwitchMode() {
|
|
5395
|
-
const variant = this.
|
|
5403
|
+
const variant = this.hasMobileMenu ? 'list' : 'menu';
|
|
5396
5404
|
Array.from(this.host.querySelectorAll('post-language-switch')).forEach(languageSwitch => {
|
|
5397
5405
|
languageSwitch?.setAttribute('variant', variant);
|
|
5398
5406
|
});
|
|
@@ -5406,10 +5414,15 @@ class PostHeader {
|
|
|
5406
5414
|
if (this.megadropdownOpen) {
|
|
5407
5415
|
navigationClasses.push('megadropdown-open');
|
|
5408
5416
|
}
|
|
5409
|
-
return (hAsync("div", { class: navigationClasses.join(' '), style: { '--post-header-navigation-current-inset': `${mobileMenuScrollTop}px` } }, hAsync("div", { class: "mobile-menu", ref: el => (this.mobileMenu = el) }, hAsync("div", { class: "navigation-target-group" }, (this.device === 'mobile' || this.device === 'tablet') && (hAsync("slot", { name: "target-group" }))), hAsync("slot", { name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (hAsync("div", { class: "navigation-footer" }, hAsync("slot", { name: "meta-navigation" }), hAsync("slot", { name: "post-language-switch" }))))));
|
|
5417
|
+
return (hAsync("div", { class: navigationClasses.join(' '), style: { '--post-header-navigation-current-inset': `${mobileMenuScrollTop}px` } }, hAsync("div", { class: "mobile-menu", ref: el => (this.mobileMenu = el) }, hAsync("div", { class: "navigation-target-group" }, (this.device === 'mobile' || this.device === 'tablet') && (hAsync("slot", { name: "target-group" }))), hAsync("slot", { name: "post-mainnavigation", onSlotchange: () => this.checkNavigationExistence() }), (this.device === 'mobile' || this.device === 'tablet') && (hAsync("div", { class: "navigation-footer" }, hAsync("slot", { name: "meta-navigation" }), hAsync("slot", { name: "post-language-switch" }))))));
|
|
5410
5418
|
}
|
|
5411
5419
|
render() {
|
|
5412
|
-
|
|
5420
|
+
const localHeaderClasses = ['local-header'];
|
|
5421
|
+
if (this.mobileMenuExtended)
|
|
5422
|
+
localHeaderClasses.push('local-header-mobile-extended');
|
|
5423
|
+
if (!this.hasNavigation)
|
|
5424
|
+
localHeaderClasses.push('no-navigation');
|
|
5425
|
+
return (hAsync(Host, { key: 'ec2be7f6699d0b6be65c7ec05ccfaf11fe38551f', "data-version": version$1, "data-color-scheme": "light" }, hAsync("div", { key: 'defa2d956e848f0270e1c36404bb0e32e6112ab2', class: "global-header" }, hAsync("div", { key: 'b1db492439d45566140d8698310d68707d44f178', class: "global-sub" }, hAsync("div", { key: 'a238bbbe5999e4ff858b9f7223eb3a82ae517dc3', class: "logo" }, hAsync("slot", { key: '7b6a922842eaf01fdddad88079c5c4e27d9caf9d', name: "post-logo" }))), hAsync("div", { key: '70b7e4f0a0e7dcd8458238f85d5cadfad5c8030d', class: "global-sub" }, this.device === 'desktop' && hAsync("slot", { key: '9abe132d957d37848205cd5b045ed9d8e9040da4', name: "target-group" })), hAsync("div", { key: '6666cb7b19cd3654020291cff4b3f7821f190416', class: "global-sub" }, !this.hasMobileMenu && (hAsync("slot", { key: '446f14ba4b014b35b60dbf643ab1baace4cd1cd7', name: "meta-navigation" })), hAsync("slot", { key: '6cdb4006e56ccdeb076cbe486a437ca56e4b259a', name: "global-controls" }), !this.hasMobileMenu && hAsync("slot", { key: '6be456ce09dee5653c36e2320fa89345139232a4', name: "post-language-switch" }), this.hasNavigation && (hAsync("div", { key: '28f87889a93aae2e78978cbd02e18dca58a486ef', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, hAsync("slot", { key: '157b154a30cdaf4c17434c2a6c7a796ad945780c', name: "post-togglebutton" }))))), hAsync("div", { key: 'ddf249e9b055659325cc9717f03ccd9345556e15', class: localHeaderClasses.join(' ') }, hAsync("slot", { key: '858312b4c4ef74c76588f9cd0b49acfda39f6daf', name: "title" }), hAsync("div", { key: '73db57db8df18d9106cb124cf95b0c2551ceda23', class: "local-sub" }, hAsync("slot", { key: 'e36a9e8572878fe11ae326503b0cbcc4d03ddd3e', name: "local-controls" }), hAsync("slot", { key: '354e22a83276f8fa8c79127c8cdcfbf0f12dbf91' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
|
|
5413
5426
|
}
|
|
5414
5427
|
get host() { return getElement(this); }
|
|
5415
5428
|
static get watchers() { return {
|
|
@@ -5422,6 +5435,7 @@ class PostHeader {
|
|
|
5422
5435
|
"$tagName$": "post-header",
|
|
5423
5436
|
"$members$": {
|
|
5424
5437
|
"device": [32],
|
|
5438
|
+
"hasNavigation": [32],
|
|
5425
5439
|
"mobileMenuExtended": [32],
|
|
5426
5440
|
"megadropdownOpen": [32],
|
|
5427
5441
|
"toggleMobileMenu": [64]
|
|
@@ -5919,7 +5933,7 @@ class PostLogo {
|
|
|
5919
5933
|
}; }
|
|
5920
5934
|
}
|
|
5921
5935
|
|
|
5922
|
-
const postMainnavigationCss = "post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button{background-color:ButtonFace !important}post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:Highlight !important}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item post-megadropdown-trigger button{flex:0 0 fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-mainnavigation post-list-item>a:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:4px;outline-offset:-2px !important}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{content:\"\";mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:24px;width:24px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation>button,post-mainnavigation post-megadropdown-trigger button{border:1px solid ButtonBorder !important}post-mainnavigation>button:hover::after,post-mainnavigation>button[aria-expanded=true]::after,post-mainnavigation post-megadropdown-trigger button:hover::after,post-mainnavigation post-megadropdown-trigger button[aria-expanded=true]::after{color:HighlightText}}@media screen and (min-width: 1024px){post-mainnavigation{display:block;position:relative;height:var(--post-main-navigation-height);background:#fff;user-select:none}post-mainnavigation nav{flex:1 1 auto;overflow:hidden;scroll-behavior:smooth}post-mainnavigation .scroll-control{cursor:pointer;position:absolute;inset-block:0;z-index:5;padding:16px;background:#fff;box-shadow:var(--post-device-elevation-500);line-height:1}post-mainnavigation .scroll-control.scroll-left{inset-inline-start:0}post-mainnavigation .scroll-control.scroll-right{inset-inline-end:0}post-mainnavigation .scroll-control.d-none{display:none}post-mainnavigation .scroll-control post-icon{font-size:1rem}post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{position:sticky;padding-inline:12px;height:var(--post-main-navigation-height);gap:4px;font-size:16px;z-index:4}}@media screen and (min-width: 1024px)and (max-width: 1023.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{z-index:5}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-active,post-mainnavigation post-list-item>button .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-active{font-weight:700;text-align:center;opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{position:absolute;opacity:1;text-align:center;width:100%;inset-inline-start:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff;font-weight:700}post-mainnavigation post-list-item>a.selected .nav-el-active,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item>button.selected .nav-el-active,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-active{opacity:1}post-mainnavigation post-list-item>a.selected .nav-el-inactive,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item>button.selected .nav-el-inactive,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-inactive{opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}}@media screen and (min-width: 1024px)and (max-width: 599.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:14px}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:12px;transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{width:calc(100% - 28px)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button.selected::after,post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button.selected::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}}@media screen and (min-width: 1024px){post-mainnavigation post-megadropdown button:not(.btn-icon-close),post-mainnavigation post-megadropdown a{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-megadropdown button:not(.btn-icon-close)::before,post-mainnavigation post-megadropdown a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-megadropdown button:not(.btn-icon-close).selected,post-mainnavigation post-megadropdown button:not(.btn-icon-close)[aria-expanded=true],post-mainnavigation post-megadropdown a.selected,post-mainnavigation post-megadropdown a[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover,post-mainnavigation post-megadropdown a:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover::before,post-mainnavigation post-megadropdown a:hover::before{background-color:#504f4b}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .scroll-control{display:none}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-list-item>a::before,post-mainnavigation post-list-item>button::before,post-mainnavigation post-list-item post-megadropdown-trigger button::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-list-item>a:hover::before,post-mainnavigation post-list-item>button:hover::before,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{background-color:#504f4b}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{display:none}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{transform:rotate(-90deg)}}";
|
|
5936
|
+
const postMainnavigationCss = "post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button{background-color:ButtonFace !important}post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:Highlight !important}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item post-megadropdown-trigger button{flex:0 0 fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-mainnavigation post-list-item>a:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:4px;outline-offset:-2px !important}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{content:\"\";mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:24px;width:24px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation>button,post-mainnavigation post-megadropdown-trigger button{border:1px solid ButtonBorder !important}post-mainnavigation>button:hover::after,post-mainnavigation>button[aria-expanded=true]::after,post-mainnavigation post-megadropdown-trigger button:hover::after,post-mainnavigation post-megadropdown-trigger button[aria-expanded=true]::after{color:HighlightText}}@media screen and (min-width: 1024px){post-mainnavigation{display:block;position:relative;height:var(--post-main-navigation-height, 0);background:#fff;user-select:none}post-mainnavigation nav{flex:1 1 auto;overflow:hidden;scroll-behavior:smooth}post-mainnavigation .scroll-control{cursor:pointer;position:absolute;inset-block:0;z-index:5;padding:16px;background:#fff;box-shadow:var(--post-device-elevation-500);line-height:1}post-mainnavigation .scroll-control.scroll-left{inset-inline-start:0}post-mainnavigation .scroll-control.scroll-right{inset-inline-end:0}post-mainnavigation .scroll-control.d-none{display:none}post-mainnavigation .scroll-control post-icon{font-size:1rem}post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{position:sticky;padding-inline:12px;height:var(--post-main-navigation-height, 0);gap:4px;font-size:16px;z-index:4}}@media screen and (min-width: 1024px)and (max-width: 1023.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{z-index:5}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-active,post-mainnavigation post-list-item>button .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-active{font-weight:700;text-align:center;opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{position:absolute;opacity:1;text-align:center;width:100%;inset-inline-start:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff;font-weight:700}post-mainnavigation post-list-item>a.selected .nav-el-active,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item>button.selected .nav-el-active,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-active{opacity:1}post-mainnavigation post-list-item>a.selected .nav-el-inactive,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item>button.selected .nav-el-inactive,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-inactive{opacity:0}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}}@media screen and (min-width: 1024px)and (max-width: 599.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:14px}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:12px;transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{width:calc(100% - 28px)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button.selected::after,post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button.selected::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}}@media screen and (min-width: 1024px){post-mainnavigation post-megadropdown button:not(.btn-icon-close),post-mainnavigation post-megadropdown a{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-megadropdown button:not(.btn-icon-close)::before,post-mainnavigation post-megadropdown a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-megadropdown button:not(.btn-icon-close).selected,post-mainnavigation post-megadropdown button:not(.btn-icon-close)[aria-expanded=true],post-mainnavigation post-megadropdown a.selected,post-mainnavigation post-megadropdown a[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover,post-mainnavigation post-megadropdown a:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover::before,post-mainnavigation post-megadropdown a:hover::before{background-color:#504f4b}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .scroll-control{display:none}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-list-item>a::before,post-mainnavigation post-list-item>button::before,post-mainnavigation post-list-item post-megadropdown-trigger button::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-list-item>a:hover::before,post-mainnavigation post-list-item>button:hover::before,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{background-color:#504f4b}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{display:none}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{transform:rotate(-90deg)}}";
|
|
5923
5937
|
|
|
5924
5938
|
const SCROLL_REPEAT_INTERVAL = 100; // Interval for repeated scrolling when holding down scroll button
|
|
5925
5939
|
const NAVBAR_DISABLE_DURATION = 400; // Duration to temporarily disable navbar interactions during scrolling
|
|
@@ -10296,7 +10310,7 @@ class PostTooltip {
|
|
|
10296
10310
|
}
|
|
10297
10311
|
render() {
|
|
10298
10312
|
const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
|
|
10299
|
-
return (hAsync(Host, { key: '
|
|
10313
|
+
return (hAsync(Host, { key: 'c5f293812e33520ea5a2c9224e93fe5e5e41cbe0', "data-version": version$1 }, hAsync("post-popovercontainer", { key: '7ec57e1a2315d95e7cb696cf6d2d1a1d8ae77257', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, hAsync("slot", { key: '79c91307707c56345acb136a45acdae859d54c2b' }))));
|
|
10300
10314
|
}
|
|
10301
10315
|
get host() { return getElement(this); }
|
|
10302
10316
|
static get watchers() { return {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@swisspost/design-system-components",
|
|
3
|
-
"version": "10.0.0-next.
|
|
3
|
+
"version": "10.0.0-next.45",
|
|
4
4
|
"description": "A collection of web components built with Stencil JS for the Swiss Post Design System.",
|
|
5
5
|
"author": "Swiss Post <design-system@post.ch>",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -58,8 +58,8 @@
|
|
|
58
58
|
"dependencies": {
|
|
59
59
|
"@floating-ui/dom": "1.7.3",
|
|
60
60
|
"@oddbird/popover-polyfill": "0.6.0",
|
|
61
|
-
"@swisspost/design-system-icons": "10.0.0-next.
|
|
62
|
-
"@swisspost/design-system-styles": "10.0.0-next.
|
|
61
|
+
"@swisspost/design-system-icons": "10.0.0-next.45",
|
|
62
|
+
"@swisspost/design-system-styles": "10.0.0-next.45",
|
|
63
63
|
"ally.js": "1.4.1",
|
|
64
64
|
"long-press-event": "2.5.0",
|
|
65
65
|
"nanoid": "5.1.5"
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
const t="10.0.0-next.43";export{t as v}
|