@swisspost/design-system-components 9.0.0-next.22 → 9.0.0-next.24
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/breakpoints-c6247c71.js +54 -0
- package/dist/cjs/{index-5acef487.js → index-d6bf2c66.js} +1 -5
- package/dist/cjs/index.cjs.js +22 -21
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/{package-9e5d66fe.js → package-be30a2ae.js} +1 -1
- package/dist/cjs/{post-accordion-4c8cf3b8.js → post-accordion-980e3707.js} +2 -2
- package/dist/cjs/{post-accordion-item-36111a96.js → post-accordion-item-34526ddd.js} +2 -2
- package/dist/cjs/post-accordion-item.cjs.entry.js +3 -3
- package/dist/cjs/post-accordion.cjs.entry.js +3 -3
- package/dist/cjs/{post-avatar-9a6a7525.js → post-avatar-ed964ac4.js} +2 -2
- package/dist/cjs/post-avatar.cjs.entry.js +3 -3
- package/dist/cjs/{post-back-to-top-f886c6cf.js → post-back-to-top-12ee9182.js} +2 -2
- package/dist/cjs/post-back-to-top.cjs.entry.js +3 -3
- package/dist/cjs/{post-banner-9a9e1cce.js → post-banner-13755850.js} +2 -2
- package/dist/cjs/post-banner.cjs.entry.js +3 -3
- package/dist/cjs/{post-breadcrumb-7c692ae9.js → post-breadcrumb-d6d9f5a4.js} +2 -2
- package/dist/cjs/post-breadcrumb-item_2.cjs.entry.js +3 -3
- package/dist/cjs/post-breadcrumb.cjs.entry.js +3 -3
- package/dist/cjs/{post-card-control-f0a4378d.js → post-card-control-4a6fbf19.js} +2 -2
- package/dist/cjs/post-card-control.cjs.entry.js +3 -3
- package/dist/cjs/post-closebutton_15.cjs.entry.js +4 -3
- package/dist/cjs/{post-collapsible-trigger-aec05c5d.js → post-collapsible-trigger-5bdd97f1.js} +2 -2
- package/dist/cjs/post-collapsible_2.cjs.entry.js +3 -3
- package/dist/cjs/post-components.cjs.js +2 -2
- package/dist/cjs/{post-footer-3f1dc457.js → post-footer-f2217a34.js} +4 -54
- package/dist/cjs/post-footer.cjs.entry.js +4 -3
- package/dist/cjs/{post-linkarea-1ed9fad9.js → post-linkarea-ced4f6ad.js} +2 -2
- package/dist/cjs/post-linkarea.cjs.entry.js +3 -3
- package/dist/cjs/{post-menu-item-3e5cb472.js → post-menu-item-4ef32029.js} +2 -2
- package/dist/cjs/{post-popover-bc5529dc.js → post-popover-1a5b1f4c.js} +2 -2
- package/dist/cjs/post-popover.cjs.entry.js +3 -3
- package/dist/cjs/{post-rating-af2d2b71.js → post-rating-9a9ce431.js} +2 -2
- package/dist/cjs/post-rating.cjs.entry.js +3 -3
- package/dist/cjs/{post-tab-header-7f2ae48c.js → post-tab-header-43c52a57.js} +2 -2
- package/dist/cjs/post-tab-header.cjs.entry.js +3 -3
- package/dist/cjs/{post-tab-panel-6011421e.js → post-tab-panel-16064007.js} +2 -2
- package/dist/cjs/post-tab-panel.cjs.entry.js +3 -3
- package/dist/cjs/{post-tabs-542781af.js → post-tabs-e4739459.js} +2 -2
- package/dist/cjs/post-tabs.cjs.entry.js +3 -3
- package/dist/cjs/{post-tag-d307f6c5.js → post-tag-e1ed422b.js} +2 -2
- package/dist/cjs/post-tag.cjs.entry.js +3 -3
- package/dist/cjs/{post-togglebutton-da429049.js → post-togglebutton-38ec151e.js} +140 -85
- package/dist/cjs/{post-tooltip-dd3831df.js → post-tooltip-463eaaf6.js} +2 -2
- package/dist/cjs/post-tooltip.cjs.entry.js +3 -3
- package/dist/collection/components/post-header/post-header.css +1 -1
- package/dist/collection/components/post-header/post-header.js +50 -33
- package/dist/collection/components/post-language-option/post-language-option.css +1 -1
- package/dist/collection/components/post-language-option/post-language-option.js +23 -1
- package/dist/collection/components/post-language-switch/post-language-switch.css +1 -1
- package/dist/collection/components/post-language-switch/post-language-switch.js +61 -33
- package/dist/collection/components/post-mainnavigation/post-mainnavigation.css +1 -1
- package/dist/collection/components/post-mainnavigation/post-mainnavigation.js +16 -4
- package/dist/collection/components/post-megadropdown/post-megadropdown.css +1 -1
- package/dist/collection/components/post-megadropdown/post-megadropdown.js +15 -10
- package/dist/components/breakpoints.js +52 -0
- package/dist/components/package.js +1 -1
- package/dist/components/post-footer2.js +1 -51
- package/dist/components/post-header2.js +184 -34
- package/dist/components/post-language-option2.js +10 -2
- package/dist/components/post-language-switch2.js +48 -35
- package/dist/components/post-mainnavigation2.js +17 -5
- package/dist/components/post-megadropdown2.js +15 -10
- package/dist/docs.json +28 -3
- package/dist/esm/breakpoints-bbe0c54e.js +52 -0
- package/dist/esm/{index-40846676.js → index-3419e46d.js} +1 -5
- package/dist/esm/index.js +22 -21
- package/dist/esm/loader.js +3 -3
- package/dist/esm/package-7deeece6.js +3 -0
- package/dist/esm/{post-accordion-53dcc1c9.js → post-accordion-7f239aa6.js} +2 -2
- package/dist/esm/{post-accordion-item-fb1a11ab.js → post-accordion-item-bac98792.js} +2 -2
- package/dist/esm/post-accordion-item.entry.js +3 -3
- package/dist/esm/post-accordion.entry.js +3 -3
- package/dist/esm/{post-avatar-8427e294.js → post-avatar-f74f6de0.js} +2 -2
- package/dist/esm/post-avatar.entry.js +3 -3
- package/dist/esm/{post-back-to-top-d56ea86e.js → post-back-to-top-6fdad155.js} +2 -2
- package/dist/esm/post-back-to-top.entry.js +3 -3
- package/dist/esm/{post-banner-df65a6d6.js → post-banner-8448d770.js} +2 -2
- package/dist/esm/post-banner.entry.js +3 -3
- package/dist/esm/{post-breadcrumb-e40f49b1.js → post-breadcrumb-d35e27a0.js} +2 -2
- package/dist/esm/post-breadcrumb-item_2.entry.js +3 -3
- package/dist/esm/post-breadcrumb.entry.js +3 -3
- package/dist/esm/{post-card-control-3f59d947.js → post-card-control-9233ca52.js} +2 -2
- package/dist/esm/post-card-control.entry.js +3 -3
- package/dist/esm/post-closebutton_15.entry.js +4 -3
- package/dist/esm/{post-collapsible-trigger-215a882d.js → post-collapsible-trigger-f98e1f9a.js} +2 -2
- package/dist/esm/post-collapsible_2.entry.js +3 -3
- package/dist/esm/post-components.js +3 -3
- package/dist/esm/{post-footer-df686ae9.js → post-footer-f4be2a31.js} +3 -53
- package/dist/esm/post-footer.entry.js +4 -3
- package/dist/esm/{post-linkarea-4693db66.js → post-linkarea-c9d8d2be.js} +2 -2
- package/dist/esm/post-linkarea.entry.js +3 -3
- package/dist/esm/{post-menu-item-de38e803.js → post-menu-item-1ea9397a.js} +2 -2
- package/dist/esm/{post-popover-9295cb93.js → post-popover-aa961cc7.js} +2 -2
- package/dist/esm/post-popover.entry.js +3 -3
- package/dist/esm/{post-rating-d3bc1867.js → post-rating-17ecd4f4.js} +2 -2
- package/dist/esm/post-rating.entry.js +3 -3
- package/dist/esm/{post-tab-header-9f53d387.js → post-tab-header-6f9449f1.js} +2 -2
- package/dist/esm/post-tab-header.entry.js +3 -3
- package/dist/esm/{post-tab-panel-418d3afb.js → post-tab-panel-fcecd935.js} +2 -2
- package/dist/esm/post-tab-panel.entry.js +3 -3
- package/dist/esm/{post-tabs-82aa3550.js → post-tabs-008c118d.js} +2 -2
- package/dist/esm/post-tabs.entry.js +3 -3
- package/dist/esm/{post-tag-5480a808.js → post-tag-1e709fe5.js} +2 -2
- package/dist/esm/post-tag.entry.js +3 -3
- package/dist/esm/{post-togglebutton-2f4c8c69.js → post-togglebutton-a932d770.js} +140 -85
- package/dist/esm/{post-tooltip-3bfddb7d.js → post-tooltip-ad5b722d.js} +2 -2
- package/dist/esm/post-tooltip.entry.js +3 -3
- package/dist/post-components/index.esm.js +1 -1
- package/dist/post-components/p-0e6ce700.entry.js +1 -0
- package/dist/post-components/{p-006ba886.entry.js → p-12d7344a.entry.js} +1 -1
- package/dist/post-components/{p-42973b90.js → p-1382d4c9.js} +1 -1
- package/dist/post-components/p-20e07b4f.entry.js +1 -0
- package/dist/post-components/{p-0b838792.js → p-23c2b420.js} +1 -1
- package/dist/post-components/p-3b7f8717.entry.js +1 -0
- package/dist/post-components/{p-9e71ce43.js → p-43b10fa7.js} +1 -1
- package/dist/post-components/p-453aa3c8.js +1 -0
- package/dist/post-components/{p-4288d499.js → p-53dd7a51.js} +1 -1
- package/dist/post-components/p-5aeb3656.js +1 -0
- package/dist/post-components/{p-ff95dcd3.js → p-5c758f41.js} +2 -2
- package/dist/post-components/{p-afae9c2f.js → p-5e4d5df5.js} +1 -1
- package/dist/post-components/p-6239b8f8.entry.js +1 -0
- package/dist/post-components/{p-c28ee459.js → p-637b619c.js} +1 -1
- package/dist/post-components/p-64ba9026.entry.js +1 -0
- package/dist/post-components/{p-6bd6eb89.js → p-6545ed83.js} +1 -1
- package/dist/post-components/p-6a79800f.entry.js +1 -0
- package/dist/post-components/p-6eaba4b6.entry.js +1 -0
- package/dist/post-components/p-73acda40.entry.js +1 -0
- package/dist/post-components/p-7796d5c5.entry.js +1 -0
- package/dist/post-components/{p-f639c5c2.entry.js → p-78d9d13e.entry.js} +1 -1
- package/dist/post-components/{p-cbb36d4d.js → p-7daa1a9c.js} +1 -1
- package/dist/post-components/p-87c82919.entry.js +1 -0
- package/dist/post-components/p-8f80c6f8.entry.js +1 -0
- package/dist/post-components/p-9184781c.entry.js +1 -0
- package/dist/post-components/{p-ecaf1cb0.js → p-923793ff.js} +1 -1
- package/dist/post-components/p-96e3823e.entry.js +1 -0
- package/dist/post-components/p-9b4b416c.entry.js +1 -0
- package/dist/post-components/{p-b7d3e076.js → p-a0345520.js} +1 -1
- package/dist/post-components/p-a5682a18.entry.js +1 -0
- package/dist/post-components/p-ac46ccd1.entry.js +1 -0
- package/dist/post-components/p-bd957c85.js +1 -0
- package/dist/post-components/{p-88132343.js → p-c1307879.js} +1 -1
- package/dist/post-components/p-c8bfefed.js +1 -0
- package/dist/post-components/{p-2309c7c1.js → p-cfe29403.js} +1 -1
- package/dist/post-components/p-d6757696.entry.js +1 -0
- package/dist/post-components/{p-d5f0d08e.js → p-e47d9a2b.js} +1 -1
- package/dist/post-components/{p-7946b01d.js → p-edcc075c.js} +1 -1
- package/dist/post-components/{p-7bf6457c.js → p-f0719685.js} +1 -1
- package/dist/post-components/{p-f0861b8d.js → p-f4c60bbb.js} +1 -1
- package/dist/post-components/p-fbe84d70.js +1 -0
- package/dist/post-components/post-components.esm.js +1 -1
- package/dist/types/components/post-header/post-header.d.ts +7 -5
- package/dist/types/components/post-language-option/post-language-option.d.ts +4 -0
- package/dist/types/components/post-language-switch/post-language-switch.d.ts +11 -3
- package/dist/types/components/post-mainnavigation/post-mainnavigation.d.ts +1 -0
- package/dist/types/components/post-megadropdown/post-megadropdown.d.ts +5 -3
- package/dist/types/components.d.ts +8 -0
- package/loaders/breakpoints.js +52 -0
- package/loaders/index.js +2 -1
- package/loaders/package.js +1 -1
- package/loaders/post-footer.js +1 -51
- package/loaders/post-header.js +184 -34
- package/loaders/post-language-option.js +10 -2
- package/loaders/post-language-switch.js +48 -35
- package/loaders/post-mainnavigation.js +17 -5
- package/loaders/post-megadropdown.js +15 -10
- package/package.json +3 -3
- package/dist/components/index3.js +0 -135
- package/dist/esm/package-ee29a6d2.js +0 -3
- package/dist/post-components/p-0812e30a.entry.js +0 -1
- package/dist/post-components/p-0fdb3f15.entry.js +0 -1
- package/dist/post-components/p-21a17ca1.entry.js +0 -1
- package/dist/post-components/p-22dc4f9f.js +0 -1
- package/dist/post-components/p-3c5f33fd.entry.js +0 -1
- package/dist/post-components/p-4dfc81f4.entry.js +0 -1
- package/dist/post-components/p-5c3e0a79.entry.js +0 -1
- package/dist/post-components/p-635dd49e.entry.js +0 -1
- package/dist/post-components/p-65631fa5.entry.js +0 -1
- package/dist/post-components/p-688a5091.entry.js +0 -1
- package/dist/post-components/p-6ca7be80.js +0 -1
- package/dist/post-components/p-6ff734ee.entry.js +0 -1
- package/dist/post-components/p-741467ac.js +0 -1
- package/dist/post-components/p-b58c37db.entry.js +0 -1
- package/dist/post-components/p-cc9e78dc.entry.js +0 -1
- package/dist/post-components/p-d19a975a.entry.js +0 -1
- package/dist/post-components/p-de40a67a.entry.js +0 -1
- package/dist/post-components/p-e8cea97f.entry.js +0 -1
- package/dist/post-components/p-eae51100.entry.js +0 -1
- package/dist/post-components/p-ebce9cd7.js +0 -1
- package/dist/post-components/p-fc676fad.entry.js +0 -1
- package/loaders/index3.js +0 -135
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as a}from"./p-
|
|
1
|
+
import{p as e,b as a}from"./p-5c758f41.js";export{s as setNonce}from"./p-5c758f41.js";import{g as l}from"./p-e1255160.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((async e=>(await l(),a([["p-6239b8f8",[[1,"post-breadcrumb",{homeUrl:[1,"home-url"],homeText:[1,"home-text"],breadcrumbItems:[32],isConcatenated:[32],lastWindowWidth:[32]},null,{homeUrl:["validateUrl"]}]]],["p-64ba9026",[[1,"post-footer",{label:[1],isMobile:[32]}]]],["p-ac46ccd1",[[1,"post-back-to-top",{label:[1],belowFold:[32]},null,{belowFold:["watchBelowFold"],label:["validateLabel"]}]]],["p-d6757696",[[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:["validateDismissible"],dismissLabel:["validateDismissLabel"],icon:["validateIcon"],type:["validateType"]}]]],["p-7796d5c5",[[65,"post-card-control",{label:[1],description:[1],type:[1],name:[1],value:[1],checked:[1028],disabled:[1028],validity:[1025],icon:[1],focused:[32],reset:[64],groupReset:[64]},null,{label:["validateControlLabel"],type:["validateControlType"],checked:["updateControlChecked"],disabled:["updateControlDisabled"]}]]],["p-a5682a18",[[1,"post-popover",{placement:[1],closeButtonCaption:[1,"close-button-caption"],arrow:[4],show:[64],hide:[64],toggle:[64]}]]],["p-8f80c6f8",[[1,"post-rating",{label:[1],stars:[2],currentRating:[1026,"current-rating"],readonly:[4],hoveredIndex:[32]}]]],["p-9184781c",[[1,"post-tag",{variant:[1],size:[1],icon:[1],classes:[32]},null,{variant:["variantChanged"],size:["sizeChanged"]}]]],["p-6eaba4b6",[[1,"post-tooltip",{placement:[1],arrow:[4],delayed:[4],show:[64],hide:[64],toggle:[64]},null,{delayed:["validateDelayed"]}]]],["p-73acda40",[[1,"post-accordion",{headingLevel:[2,"heading-level"],multiple:[4],toggle:[64],expandAll:[64],collapseAll:[64]},[[0,"postToggle","collapseToggleHandler"]],{headingLevel:["validateHeadingLevel"]}]]],["p-87c82919",[[1,"post-avatar",{firstname:[1],lastname:[1],userid:[1],email:[1],slottedImage:[32],avatarType:[32],imageUrl:[32],imageAlt:[32],initials:[32]},null,{firstname:["validateFirstname"]}]]],["p-96e3823e",[[4,"post-linkarea"]]],["p-9b4b416c",[[1,"post-tab-header",{panel:[1],tabId:[32]},null,{panel:["validateFor"]}]]],["p-6a79800f",[[1,"post-tab-panel",{name:[1],panelId:[32]}]]],["p-3b7f8717",[[1,"post-tabs",{activePanel:[1,"active-panel"],show:[64]}]]],["p-78d9d13e",[[1,"post-collapsible",{collapsed:[1028],toggle:[64]},null,{collapsed:["collapsedChange"]}],[0,"post-collapsible-trigger",{for:[1],update:[64]},null,{for:["setAriaAttributes"]}]]],["p-12d7344a",[[1,"post-language-switch",{caption:[1],description:[1],variant:[1],activeLang:[32]},[[0,"postChange","handlePostChange"],[0,"postLanguageOptionInitiallyActive","handleInitiallyActive"]],{caption:["validateCaption"],description:["validateDescription"],variant:["validateVariant"]}],[4,"post-closebutton"],[4,"post-mainnavigation",{canScrollLeft:[32],canScrollRight:[32],translationAmount:[32]},[[9,"mouseup","stopScrolling"]],{translationAmount:["onTranslateAmountChanges"]}],[1,"post-header",{device:[32],mobileMenuExtended:[32],megadropdownOpen:[32],toggleMobileMenu:[64]},null,{mobileMenuExtended:["frozeBody"]}],[4,"post-language-option",{code:[1],active:[1540],variant:[1],name:[1],url:[1],select:[64]},null,{code:["validateCode"],active:["validateActiveProp"],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]},null,{toggled:["validateToggled"]}],[1,"post-menu",{placement:[1],isVisible:[32],toggle:[64],show:[64],hide:[64]}],[4,"post-menu-trigger",{for:[1],ariaExpanded:[32]},null,{for:["validateControlFor"]}],[4,"post-popovercontainer",{manualClose:[4,"manual-close"],placement:[1],edgeGap:[2,"edge-gap"],arrow:[4],safeSpace:[513,"safe-space"],show:[64],hide:[64],toggle:[64]}],[1,"post-icon",{animation:[1],base:[1],flipH:[4,"flip-h"],flipV:[4,"flip-v"],name:[1],rotate:[2],scale:[2]},null,{animation:["validateAnimation"],base:["validateBase"],flipH:["validateFlipH"],flipV:["validateFlipV"],name:["validateName"],rotate:["validateRotate"],scale:["validateScale"]}]]],["p-20e07b4f",[[1,"post-accordion-item",{collapsed:[1028],headingLevel:[2,"heading-level"],id:[32],slottedLogo:[32],toggle:[64]},[[2,"postToggle","onCollapseToggle"]],{headingLevel:["validateHeadingLevel"]}]]],["p-0e6ce700",[[1,"post-breadcrumb-item",{url:[1],fullUrl:[32]},null,{url:["validateUrl"]}],[4,"post-menu-item"]]]],e))));
|
|
@@ -12,17 +12,19 @@ export type DEVICE_SIZE = 'mobile' | 'tablet' | 'desktop' | null;
|
|
|
12
12
|
export declare class PostHeader {
|
|
13
13
|
private firstFocusableEl;
|
|
14
14
|
private lastFocusableEl;
|
|
15
|
-
private
|
|
15
|
+
private scrollListenerElement;
|
|
16
|
+
private overflowElement;
|
|
16
17
|
private mobileMenu;
|
|
17
18
|
private mobileMenuAnimation;
|
|
18
|
-
private throttledScroll;
|
|
19
|
-
private throttledResize;
|
|
19
|
+
private readonly throttledScroll;
|
|
20
|
+
private readonly throttledResize;
|
|
20
21
|
componentWillRender(): void;
|
|
21
22
|
componentDidLoad(): void;
|
|
22
23
|
disconnectedCallback(): void;
|
|
23
24
|
host: HTMLPostHeaderElement;
|
|
24
25
|
device: DEVICE_SIZE;
|
|
25
26
|
mobileMenuExtended: boolean;
|
|
27
|
+
megadropdownOpen: boolean;
|
|
26
28
|
frozeBody(isMobileMenuExtended: boolean): void;
|
|
27
29
|
/**
|
|
28
30
|
* An event emitted when the device has changed
|
|
@@ -34,10 +36,10 @@ export declare class PostHeader {
|
|
|
34
36
|
toggleMobileMenu(): Promise<void>;
|
|
35
37
|
private getFocusableElements;
|
|
36
38
|
private keyboardHandler;
|
|
37
|
-
private handleScrollEvent;
|
|
38
39
|
private getScrollParent;
|
|
39
|
-
private
|
|
40
|
+
private handleScrollEvent;
|
|
40
41
|
private updateLocalHeaderHeight;
|
|
42
|
+
private handleLinkClick;
|
|
41
43
|
private handleResize;
|
|
42
44
|
private switchLanguageSwitchMode;
|
|
43
45
|
private renderNavigation;
|
|
@@ -35,6 +35,10 @@ export declare class PostLanguageOption {
|
|
|
35
35
|
* An event emitted when the language option is clicked. The payload is the ISO 639 code of the language.
|
|
36
36
|
*/
|
|
37
37
|
postChange: EventEmitter<string>;
|
|
38
|
+
/**
|
|
39
|
+
* An event emitted when the language option is initially active. The payload is the ISO 639 code of the language.
|
|
40
|
+
*/
|
|
41
|
+
postLanguageOptionInitiallyActive: EventEmitter<string>;
|
|
38
42
|
/**
|
|
39
43
|
* Selects the language option programmatically.
|
|
40
44
|
*/
|
|
@@ -20,10 +20,18 @@ export declare class PostLanguageSwitch {
|
|
|
20
20
|
* The active language of the language switch
|
|
21
21
|
*/
|
|
22
22
|
activeLang: string;
|
|
23
|
-
connectedCallback(): void;
|
|
24
|
-
private updateChildrenVariant;
|
|
25
|
-
componentWillUpdate(): void;
|
|
26
23
|
componentDidLoad(): void;
|
|
24
|
+
handlePostChange(event: CustomEvent<string>): void;
|
|
25
|
+
/**
|
|
26
|
+
* Handles cases where the language switch is being rendered before options are available
|
|
27
|
+
* @param event Initially emitted by <post-langauge-option>
|
|
28
|
+
*/
|
|
29
|
+
handleInitiallyActive(event: CustomEvent<string>): void;
|
|
30
|
+
private get languageOptions();
|
|
31
|
+
private get activeLanguageOption();
|
|
32
|
+
private handleSlotChange;
|
|
33
|
+
private updateActiveLanguage;
|
|
34
|
+
private updateChildrenVariant;
|
|
27
35
|
private menuId;
|
|
28
36
|
private renderList;
|
|
29
37
|
private renderDropdown;
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { EventEmitter } from '../../stencil-public-runtime';
|
|
2
|
-
import { DEVICE_SIZE } from '../post-header/post-header';
|
|
3
2
|
export declare class PostMegadropdown {
|
|
4
|
-
private header;
|
|
5
3
|
private firstFocusableEl;
|
|
6
4
|
private lastFocusableEl;
|
|
7
|
-
device:
|
|
5
|
+
device: string;
|
|
8
6
|
host: HTMLPostMegadropdownElement;
|
|
9
7
|
/** Tracks the currently active dropdown instance. */
|
|
10
8
|
private static activeDropdown;
|
|
9
|
+
private breakpointChange;
|
|
11
10
|
/**
|
|
12
11
|
* Holds the current visibility state of the dropdown.
|
|
13
12
|
* This state is internally managed to track whether the dropdown is open (`true`) or closed (`false`),
|
|
@@ -40,6 +39,9 @@ export declare class PostMegadropdown {
|
|
|
40
39
|
* Hides the dropdown with an animation.
|
|
41
40
|
*/
|
|
42
41
|
hide(focusParent?: boolean): Promise<void>;
|
|
42
|
+
/**
|
|
43
|
+
* Sets focus to the first focusable element within the component.
|
|
44
|
+
*/
|
|
43
45
|
focusFirst(): Promise<void>;
|
|
44
46
|
connectedCallback(): void;
|
|
45
47
|
/**
|
|
@@ -294,6 +294,9 @@ export namespace Components {
|
|
|
294
294
|
interface PostMainnavigation {
|
|
295
295
|
}
|
|
296
296
|
interface PostMegadropdown {
|
|
297
|
+
/**
|
|
298
|
+
* Sets focus to the first focusable element within the component.
|
|
299
|
+
*/
|
|
297
300
|
"focusFirst": () => Promise<void>;
|
|
298
301
|
/**
|
|
299
302
|
* Hides the dropdown with an animation.
|
|
@@ -676,6 +679,7 @@ declare global {
|
|
|
676
679
|
};
|
|
677
680
|
interface HTMLPostLanguageOptionElementEventMap {
|
|
678
681
|
"postChange": string;
|
|
682
|
+
"postLanguageOptionInitiallyActive": string;
|
|
679
683
|
}
|
|
680
684
|
interface HTMLPostLanguageOptionElement extends Components.PostLanguageOption, HTMLStencilElement {
|
|
681
685
|
addEventListener<K extends keyof HTMLPostLanguageOptionElementEventMap>(type: K, listener: (this: HTMLPostLanguageOptionElement, ev: PostLanguageOptionCustomEvent<HTMLPostLanguageOptionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
@@ -1118,6 +1122,10 @@ declare namespace LocalJSX {
|
|
|
1118
1122
|
* An event emitted when the language option is clicked. The payload is the ISO 639 code of the language.
|
|
1119
1123
|
*/
|
|
1120
1124
|
"onPostChange"?: (event: PostLanguageOptionCustomEvent<string>) => void;
|
|
1125
|
+
/**
|
|
1126
|
+
* An event emitted when the language option is initially active. The payload is the ISO 639 code of the language.
|
|
1127
|
+
*/
|
|
1128
|
+
"onPostLanguageOptionInitiallyActive"?: (event: PostLanguageOptionCustomEvent<string>) => void;
|
|
1121
1129
|
/**
|
|
1122
1130
|
* The URL used for the href attribute of the internal anchor. This field is optional; if not provided, a button will be used internally instead of an anchor.
|
|
1123
1131
|
*/
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
class Breakpoint {
|
|
2
|
+
breakpointMap;
|
|
3
|
+
current = {
|
|
4
|
+
key: '',
|
|
5
|
+
name: '',
|
|
6
|
+
};
|
|
7
|
+
constructor() {
|
|
8
|
+
if (!this.breakpointMap) {
|
|
9
|
+
const keys = this.getStyles('--post-breakpoint-keys');
|
|
10
|
+
const names = this.getStyles('--post-breakpoint-names');
|
|
11
|
+
const widths = this.getStyles('--post-breakpoint-widths');
|
|
12
|
+
this.breakpointMap = widths
|
|
13
|
+
.map((width, i) => ({
|
|
14
|
+
minWidth: Number(width),
|
|
15
|
+
key: keys[i],
|
|
16
|
+
name: names[i],
|
|
17
|
+
}))
|
|
18
|
+
.reverse();
|
|
19
|
+
window.addEventListener('resize', () => this.updateHandler(), { passive: true });
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
getStyles(propertyName) {
|
|
23
|
+
const styles = getComputedStyle(document.documentElement);
|
|
24
|
+
return (styles
|
|
25
|
+
.getPropertyValue(propertyName)
|
|
26
|
+
?.split(',')
|
|
27
|
+
.map(w => w.trim()) ?? []);
|
|
28
|
+
}
|
|
29
|
+
updateHandler(emitEvents = true) {
|
|
30
|
+
const calculated = this.breakpointMap.find(({ minWidth }) => innerWidth >= minWidth);
|
|
31
|
+
if (this.current.key !== calculated.key) {
|
|
32
|
+
this.current.key = calculated.key;
|
|
33
|
+
if (emitEvents)
|
|
34
|
+
this.dispatchEvent('key');
|
|
35
|
+
}
|
|
36
|
+
if (this.current.name !== calculated.name) {
|
|
37
|
+
this.current.name = calculated.name;
|
|
38
|
+
if (emitEvents)
|
|
39
|
+
this.dispatchEvent('name');
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
dispatchEvent(type) {
|
|
43
|
+
window.dispatchEvent(new CustomEvent(`postBreakpoint:${type}`, { detail: this.current[type] }));
|
|
44
|
+
}
|
|
45
|
+
get(type) {
|
|
46
|
+
this.updateHandler(false);
|
|
47
|
+
return this.current[type];
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
const breakpoint = new Breakpoint();
|
|
51
|
+
|
|
52
|
+
export { breakpoint as b };
|
package/loaders/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
|
|
2
2
|
export { PostAvatar, defineCustomElement as defineCustomElementPostAvatar } from './post-avatar.js';
|
|
3
3
|
import './post-popovercontainer2.js';
|
|
4
|
-
|
|
4
|
+
import './breakpoints.js';
|
|
5
5
|
export { PostPopover, defineCustomElement as defineCustomElementPostPopover } from './post-popover.js';
|
|
6
6
|
export { PostTooltip, defineCustomElement as defineCustomElementPostTooltip } from './post-tooltip.js';
|
|
7
7
|
export { PostAccordion, defineCustomElement as defineCustomElementPostAccordion } from './post-accordion.js';
|
|
@@ -14,6 +14,7 @@ export { PostCardControl, defineCustomElement as defineCustomElementPostCardCont
|
|
|
14
14
|
export { PostClosebutton, defineCustomElement as defineCustomElementPostClosebutton } from './post-closebutton.js';
|
|
15
15
|
export { PostCollapsible, defineCustomElement as defineCustomElementPostCollapsible } from './post-collapsible.js';
|
|
16
16
|
export { PostCollapsibleTrigger, defineCustomElement as defineCustomElementPostCollapsibleTrigger } from './post-collapsible-trigger.js';
|
|
17
|
+
export { PostFooter, defineCustomElement as defineCustomElementPostFooter } from './post-footer.js';
|
|
17
18
|
export { PostHeader, defineCustomElement as defineCustomElementPostHeader } from './post-header.js';
|
|
18
19
|
export { PostIcon, defineCustomElement as defineCustomElementPostIcon } from './post-icon.js';
|
|
19
20
|
export { PostLanguageOption, defineCustomElement as defineCustomElementPostLanguageOption } from './post-language-option.js';
|
package/loaders/package.js
CHANGED
package/loaders/post-footer.js
CHANGED
|
@@ -1,61 +1,11 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { v as version } from './package.js';
|
|
3
|
+
import { b as breakpoint } from './breakpoints.js';
|
|
3
4
|
import { d as defineCustomElement$5 } from './post-accordion-item2.js';
|
|
4
5
|
import { d as defineCustomElement$4 } from './post-collapsible2.js';
|
|
5
6
|
import { d as defineCustomElement$3 } from './post-collapsible-trigger2.js';
|
|
6
7
|
import { d as defineCustomElement$2 } from './post-icon2.js';
|
|
7
8
|
|
|
8
|
-
class Breakpoint {
|
|
9
|
-
breakpointMap;
|
|
10
|
-
current = {
|
|
11
|
-
key: '',
|
|
12
|
-
name: '',
|
|
13
|
-
};
|
|
14
|
-
constructor() {
|
|
15
|
-
if (!this.breakpointMap) {
|
|
16
|
-
const keys = this.getStyles('--post-breakpoint-keys');
|
|
17
|
-
const names = this.getStyles('--post-breakpoint-names');
|
|
18
|
-
const widths = this.getStyles('--post-breakpoint-widths');
|
|
19
|
-
this.breakpointMap = widths
|
|
20
|
-
.map((width, i) => ({
|
|
21
|
-
minWidth: Number(width),
|
|
22
|
-
key: keys[i],
|
|
23
|
-
name: names[i],
|
|
24
|
-
}))
|
|
25
|
-
.reverse();
|
|
26
|
-
window.addEventListener('resize', () => this.updateHandler(), { passive: true });
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
getStyles(propertyName) {
|
|
30
|
-
const styles = getComputedStyle(document.documentElement);
|
|
31
|
-
return (styles
|
|
32
|
-
.getPropertyValue(propertyName)
|
|
33
|
-
?.split(',')
|
|
34
|
-
.map(w => w.trim()) ?? []);
|
|
35
|
-
}
|
|
36
|
-
updateHandler(emitEvents = true) {
|
|
37
|
-
const calculated = this.breakpointMap.find(({ minWidth }) => innerWidth >= minWidth);
|
|
38
|
-
if (this.current.key !== calculated.key) {
|
|
39
|
-
this.current.key = calculated.key;
|
|
40
|
-
if (emitEvents)
|
|
41
|
-
this.dispatchEvent('key');
|
|
42
|
-
}
|
|
43
|
-
if (this.current.name !== calculated.name) {
|
|
44
|
-
this.current.name = calculated.name;
|
|
45
|
-
if (emitEvents)
|
|
46
|
-
this.dispatchEvent('name');
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
dispatchEvent(type) {
|
|
50
|
-
window.dispatchEvent(new CustomEvent(`postBreakpoint:${type}`, { detail: this.current[type] }));
|
|
51
|
-
}
|
|
52
|
-
get(type) {
|
|
53
|
-
this.updateHandler(false);
|
|
54
|
-
return this.current[type];
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
const breakpoint = new Breakpoint();
|
|
58
|
-
|
|
59
9
|
const postFooterCss = ":host{display:block}footer{background-color:#fc0;--post-footer-container-padding-block:32px;--post-footer-container-padding-inline:16px;--post-footer-container-max-width:1200px;--post-footer-grid-template:auto / auto;--post-footer-grid-row-gap:0;--post-footer-grid-column-gap:0;--post-footer-grid-margin-block-end:24px;--post-footer-grid-padding-block-end:0;--post-footer-column-flex-direction:column;--post-footer-column-align-items:start;--post-footer-column-gap:0;--post-footer-post-list-flex-direction:column;--post-footer-post-list-gap:8px;--post-footer-post-list-align-items:start;--post-footer-socialmedia-margin-block-end:var(--post-footer-grid-margin-block-end);--post-footer-app-margin-block-end:var(--post-footer-grid-margin-block-end);--post-footer-businesssectors-margin-block-end:var(--post-footer-grid-margin-block-end);--post-footer-meta-margin-block-end:16px;--post-footer-meta-font-size:inherit;--post-footer-copyright-font-size:var(--post-footer-meta-font-size)}@media screen and (min-width: 600px){footer{--post-footer-container-padding-block:40px;--post-footer-grid-template:repeat(2, auto) / repeat(2, auto);--post-footer-grid-row-gap:32px;--post-footer-grid-column-gap:16px;--post-footer-grid-margin-block-end:32px;--post-footer-grid-padding-block-end:32px;--post-footer-post-list-flex-direction:row;--post-footer-post-list-gap:16px;--post-footer-post-list-align-items:center;--post-footer-meta-margin-block-end:8px}}@media screen and (min-width: 780px){footer{--post-footer-container-padding-inline:40px}}@media screen and (min-width: 1024px){footer{--post-footer-container-padding-block:56px;--post-footer-grid-template:auto / repeat(4, auto);--post-footer-grid-row-gap:0;--post-footer-grid-column-gap:24px;--post-footer-grid-margin-block-end:40px;--post-footer-column-flex-direction:row;--post-footer-column-align-items:center;--post-footer-column-gap:32px;--post-footer-post-list-gap:24px;--post-footer-businesssectors-margin-block-end:24px;--post-footer-meta-font-size:16px}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.footer-container{box-sizing:content-box;margin:0 auto;padding:var(--post-footer-container-padding-block) var(--post-footer-container-padding-inline);max-width:var(--post-footer-container-max-width)}.footer-grid{display:grid;grid-template:var(--post-footer-grid-template);row-gap:var(--post-footer-grid-row-gap);column-gap:var(--post-footer-grid-column-gap);margin-block-end:var(--post-footer-grid-margin-block-end);padding-block-end:var(--post-footer-grid-padding-block-end)}.footer-grid ::part(button),.footer-grid ::part(body){padding-inline:0}.footer-column{display:flex;flex-direction:var(--post-footer-column-flex-direction);flex-wrap:wrap;justify-content:space-between;align-items:var(--post-footer-column-align-items);column-gap:var(--post-footer-column-gap)}.footer-socialmedia ::slotted(post-list),.footer-app ::slotted(post-list),.footer-businesssectors ::slotted(post-list),.footer-meta ::slotted(post-list){display:flex !important;flex-direction:var(--post-footer-post-list-flex-direction) !important;gap:var(--post-footer-post-list-gap) !important;align-items:var(--post-footer-post-list-align-items) !important}.footer-socialmedia{margin-block-end:var(--post-footer-socialmedia-margin-block-end)}.footer-app{margin-block-end:var(--post-footer-app-margin-block-end)}.footer-businesssectors{margin-block-end:var(--post-footer-businesssectors-margin-block-end)}.footer-meta{margin-block-end:var(--post-footer-meta-margin-block-end);font-size:var(--post-footer-meta-font-size)}.footer-copyright{display:flex;flex-wrap:wrap;column-gap:.5rem;font-size:var(--post-footer-copyright-font-size)}";
|
|
60
10
|
const PostFooterStyle0 = postFooterCss;
|
|
61
11
|
|
package/loaders/post-header.js
CHANGED
|
@@ -1,10 +1,143 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
|
-
import { t as throttle } from './index3.js';
|
|
3
2
|
import { v as version } from './package.js';
|
|
4
3
|
import { s as slideUp, a as slideDown } from './slide.js';
|
|
5
4
|
import { g as getFocusableChildren } from './get-focusable-children.js';
|
|
6
5
|
|
|
7
|
-
|
|
6
|
+
/* eslint-disable no-undefined,no-param-reassign,no-shadow */
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Throttle execution of a function. Especially useful for rate limiting
|
|
10
|
+
* execution of handlers on events like resize and scroll.
|
|
11
|
+
*
|
|
12
|
+
* @param {number} delay - A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher)
|
|
13
|
+
* are most useful.
|
|
14
|
+
* @param {Function} callback - A function to be executed after delay milliseconds. The `this` context and all arguments are passed through,
|
|
15
|
+
* as-is, to `callback` when the throttled-function is executed.
|
|
16
|
+
* @param {object} [options] - An object to configure options.
|
|
17
|
+
* @param {boolean} [options.noTrailing] - Optional, defaults to false. If noTrailing is true, callback will only execute every `delay` milliseconds
|
|
18
|
+
* while the throttled-function is being called. If noTrailing is false or unspecified, callback will be executed
|
|
19
|
+
* one final time after the last throttled-function call. (After the throttled-function has not been called for
|
|
20
|
+
* `delay` milliseconds, the internal counter is reset).
|
|
21
|
+
* @param {boolean} [options.noLeading] - Optional, defaults to false. If noLeading is false, the first throttled-function call will execute callback
|
|
22
|
+
* immediately. If noLeading is true, the first the callback execution will be skipped. It should be noted that
|
|
23
|
+
* callback will never executed if both noLeading = true and noTrailing = true.
|
|
24
|
+
* @param {boolean} [options.debounceMode] - If `debounceMode` is true (at begin), schedule `clear` to execute after `delay` ms. If `debounceMode` is
|
|
25
|
+
* false (at end), schedule `callback` to execute after `delay` ms.
|
|
26
|
+
*
|
|
27
|
+
* @returns {Function} A new, throttled, function.
|
|
28
|
+
*/
|
|
29
|
+
function throttle (delay, callback, options) {
|
|
30
|
+
var _ref = options || {},
|
|
31
|
+
_ref$noTrailing = _ref.noTrailing,
|
|
32
|
+
noTrailing = _ref$noTrailing === void 0 ? false : _ref$noTrailing,
|
|
33
|
+
_ref$noLeading = _ref.noLeading,
|
|
34
|
+
noLeading = _ref$noLeading === void 0 ? false : _ref$noLeading,
|
|
35
|
+
_ref$debounceMode = _ref.debounceMode,
|
|
36
|
+
debounceMode = _ref$debounceMode === void 0 ? undefined : _ref$debounceMode;
|
|
37
|
+
/*
|
|
38
|
+
* After wrapper has stopped being called, this timeout ensures that
|
|
39
|
+
* `callback` is executed at the proper times in `throttle` and `end`
|
|
40
|
+
* debounce modes.
|
|
41
|
+
*/
|
|
42
|
+
var timeoutID;
|
|
43
|
+
var cancelled = false;
|
|
44
|
+
|
|
45
|
+
// Keep track of the last time `callback` was executed.
|
|
46
|
+
var lastExec = 0;
|
|
47
|
+
|
|
48
|
+
// Function to clear existing timeout
|
|
49
|
+
function clearExistingTimeout() {
|
|
50
|
+
if (timeoutID) {
|
|
51
|
+
clearTimeout(timeoutID);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// Function to cancel next exec
|
|
56
|
+
function cancel(options) {
|
|
57
|
+
var _ref2 = options || {},
|
|
58
|
+
_ref2$upcomingOnly = _ref2.upcomingOnly,
|
|
59
|
+
upcomingOnly = _ref2$upcomingOnly === void 0 ? false : _ref2$upcomingOnly;
|
|
60
|
+
clearExistingTimeout();
|
|
61
|
+
cancelled = !upcomingOnly;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/*
|
|
65
|
+
* The `wrapper` function encapsulates all of the throttling / debouncing
|
|
66
|
+
* functionality and when executed will limit the rate at which `callback`
|
|
67
|
+
* is executed.
|
|
68
|
+
*/
|
|
69
|
+
function wrapper() {
|
|
70
|
+
for (var _len = arguments.length, arguments_ = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
71
|
+
arguments_[_key] = arguments[_key];
|
|
72
|
+
}
|
|
73
|
+
var self = this;
|
|
74
|
+
var elapsed = Date.now() - lastExec;
|
|
75
|
+
if (cancelled) {
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// Execute `callback` and update the `lastExec` timestamp.
|
|
80
|
+
function exec() {
|
|
81
|
+
lastExec = Date.now();
|
|
82
|
+
callback.apply(self, arguments_);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/*
|
|
86
|
+
* If `debounceMode` is true (at begin) this is used to clear the flag
|
|
87
|
+
* to allow future `callback` executions.
|
|
88
|
+
*/
|
|
89
|
+
function clear() {
|
|
90
|
+
timeoutID = undefined;
|
|
91
|
+
}
|
|
92
|
+
if (!noLeading && debounceMode && !timeoutID) {
|
|
93
|
+
/*
|
|
94
|
+
* Since `wrapper` is being called for the first time and
|
|
95
|
+
* `debounceMode` is true (at begin), execute `callback`
|
|
96
|
+
* and noLeading != true.
|
|
97
|
+
*/
|
|
98
|
+
exec();
|
|
99
|
+
}
|
|
100
|
+
clearExistingTimeout();
|
|
101
|
+
if (debounceMode === undefined && elapsed > delay) {
|
|
102
|
+
if (noLeading) {
|
|
103
|
+
/*
|
|
104
|
+
* In throttle mode with noLeading, if `delay` time has
|
|
105
|
+
* been exceeded, update `lastExec` and schedule `callback`
|
|
106
|
+
* to execute after `delay` ms.
|
|
107
|
+
*/
|
|
108
|
+
lastExec = Date.now();
|
|
109
|
+
if (!noTrailing) {
|
|
110
|
+
timeoutID = setTimeout(debounceMode ? clear : exec, delay);
|
|
111
|
+
}
|
|
112
|
+
} else {
|
|
113
|
+
/*
|
|
114
|
+
* In throttle mode without noLeading, if `delay` time has been exceeded, execute
|
|
115
|
+
* `callback`.
|
|
116
|
+
*/
|
|
117
|
+
exec();
|
|
118
|
+
}
|
|
119
|
+
} else if (noTrailing !== true) {
|
|
120
|
+
/*
|
|
121
|
+
* In trailing throttle mode, since `delay` time has not been
|
|
122
|
+
* exceeded, schedule `callback` to execute `delay` ms after most
|
|
123
|
+
* recent execution.
|
|
124
|
+
*
|
|
125
|
+
* If `debounceMode` is true (at begin), schedule `clear` to execute
|
|
126
|
+
* after `delay` ms.
|
|
127
|
+
*
|
|
128
|
+
* If `debounceMode` is false (at end), schedule `callback` to
|
|
129
|
+
* execute after `delay` ms.
|
|
130
|
+
*/
|
|
131
|
+
timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
wrapper.cancel = cancel;
|
|
135
|
+
|
|
136
|
+
// Return the wrapper function.
|
|
137
|
+
return wrapper;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative}: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(--global-header-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:3;inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:12px;inset-block-start:calc((var(--global-header-height) - var(--global-header-reduced-height))*-1)}}.global-sub{display:flex;align-items:center;gap:24px}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--global-header-height);width:var(--global-header-height);min-height:var(--global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{height:calc(var(--global-header-height) - var(--header-scroll-top))}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-left:0;gap:1rem;flex-shrink:0 !important}.local-header{display:flex;position:sticky;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--local-header-min-height);background:#fff;transition:box-shadow .2s ease-in-out}.local-header::after{content:\"\";position:absolute;width:100%;height:1px;background-color:#e1e0dc;bottom:-1px;z-index:1}@media screen and (min-width: 1024px){.local-header{z-index:3;inset-block-start:calc(-1*(var(--local-header-height) - var(--main-navigation-height)) + var(--global-header-reduced-height));padding-block-start:18px;box-shadow:var(--post-device-elevation-300)}}@media screen and (max-width: 1023.98px){.local-header{z-index:2;inset-block-start:var(--global-header-height);padding-block:12px;flex-wrap:wrap;gap:16px}.local-header.local-header-mobile-extended::after{bottom:0}.local-header:not(.local-header-mobile-extended){box-shadow:var(--post-device-elevation-300)}}.local-sub{margin-inline-end:16px}::slotted(.list-inline){margin:0 !important;z-index:3 !important;position:relative !important}::slotted(h1){margin:0 !important;flex-shrink:10;z-index:3}@media screen and (min-width: 600px){::slotted(h1){margin-inline-start:12px !important}}@media screen and (max-width: 599.98px){::slotted(h1){margin-inline-start:8px !important}}@media screen and (min-width: 1024px){::slotted(h1){font-size:28px !important;line-height:34px !important}}@media screen and (max-width: 1023.98px){::slotted(h1){font-size:20px !important;max-width:calc(100vw - 8px - 16px)}}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{inset-block-start:var(--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:fixed;z-index:1;inset-inline:0;background:#fff;inset-block-end:calc(100dvh - var(--header-height))}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:16px 24px;padding-inline:32px}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}.navigation.extended{height:calc(100dvh - var(--header-height));display:flex;flex-direction:column}.navigation.extended.scroll-y{overflow-y:auto}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}::slotted(post-mainnavigation){background-color:#fafafa;gap:32px}.navigation-footer{background-color:#f0efed;gap:24px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}";
|
|
8
141
|
const PostHeaderStyle0 = postHeaderCss;
|
|
9
142
|
|
|
10
143
|
const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends HTMLElement {
|
|
@@ -15,17 +148,23 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
|
|
|
15
148
|
this.postUpdateDevice = createEvent(this, "postUpdateDevice", 7);
|
|
16
149
|
this.device = null;
|
|
17
150
|
this.mobileMenuExtended = false;
|
|
151
|
+
this.megadropdownOpen = false;
|
|
18
152
|
}
|
|
19
153
|
firstFocusableEl;
|
|
20
154
|
lastFocusableEl;
|
|
21
|
-
|
|
155
|
+
scrollListenerElement = null;
|
|
156
|
+
overflowElement = null;
|
|
22
157
|
mobileMenu;
|
|
23
158
|
mobileMenuAnimation;
|
|
24
159
|
throttledScroll = () => this.handleScrollEvent();
|
|
25
160
|
throttledResize = throttle(50, () => this.handleResize());
|
|
26
161
|
componentWillRender() {
|
|
27
|
-
this.
|
|
28
|
-
this.
|
|
162
|
+
this.scrollListenerElement = this.getScrollParent();
|
|
163
|
+
this.overflowElement =
|
|
164
|
+
this.scrollListenerElement === document
|
|
165
|
+
? document.documentElement
|
|
166
|
+
: this.scrollListenerElement;
|
|
167
|
+
this.scrollListenerElement.addEventListener('scroll', this.throttledScroll, { passive: true });
|
|
29
168
|
window.addEventListener('resize', this.throttledResize, { passive: true });
|
|
30
169
|
this.handleResize();
|
|
31
170
|
this.handleScrollEvent();
|
|
@@ -33,18 +172,24 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
|
|
|
33
172
|
}
|
|
34
173
|
componentDidLoad() {
|
|
35
174
|
this.updateLocalHeaderHeight();
|
|
175
|
+
// Check if the mega dropdown is expanded
|
|
176
|
+
document.addEventListener('postToggleMegadropdown', (event) => {
|
|
177
|
+
this.megadropdownOpen = event.detail.isVisible;
|
|
178
|
+
});
|
|
179
|
+
this.host.addEventListener('click', this.handleLinkClick.bind(this));
|
|
36
180
|
}
|
|
37
181
|
// Clean up possible side effects when post-header is disconnected
|
|
38
182
|
disconnectedCallback() {
|
|
39
183
|
this.mobileMenuExtended = false;
|
|
40
|
-
this.
|
|
184
|
+
this.overflowElement.style.overflow = '';
|
|
41
185
|
this.host.removeEventListener('keydown', e => {
|
|
42
186
|
this.keyboardHandler(e);
|
|
43
187
|
});
|
|
188
|
+
this.host.removeEventListener('click', this.handleLinkClick.bind(this));
|
|
44
189
|
}
|
|
45
190
|
get host() { return this; }
|
|
46
191
|
frozeBody(isMobileMenuExtended) {
|
|
47
|
-
this.
|
|
192
|
+
this.overflowElement.style.overflow = isMobileMenuExtended ? 'hidden' : '';
|
|
48
193
|
if (isMobileMenuExtended) {
|
|
49
194
|
this.host.addEventListener('keydown', e => {
|
|
50
195
|
this.keyboardHandler(e);
|
|
@@ -109,42 +254,43 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
|
|
|
109
254
|
}
|
|
110
255
|
}
|
|
111
256
|
}
|
|
257
|
+
getScrollParent() {
|
|
258
|
+
let parent = this.host.parentElement;
|
|
259
|
+
if (parent.tagName === 'BODY') {
|
|
260
|
+
parent = document;
|
|
261
|
+
}
|
|
262
|
+
return parent;
|
|
263
|
+
}
|
|
112
264
|
handleScrollEvent() {
|
|
113
265
|
// Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
|
|
114
|
-
const st = Math.max(0, this.
|
|
115
|
-
? this.
|
|
116
|
-
: this.
|
|
266
|
+
const st = Math.max(0, this.scrollListenerElement instanceof Document
|
|
267
|
+
? this.scrollListenerElement.documentElement.scrollTop
|
|
268
|
+
: this.scrollListenerElement.scrollTop);
|
|
117
269
|
this.host.style.setProperty('--header-scroll-top', `${st}px`);
|
|
118
270
|
}
|
|
119
|
-
getScrollParent(node) {
|
|
120
|
-
let currentParent = node.parentElement;
|
|
121
|
-
while (currentParent) {
|
|
122
|
-
if (currentParent.nodeName === 'BODY') {
|
|
123
|
-
return document;
|
|
124
|
-
}
|
|
125
|
-
if (this.isScrollable(currentParent)) {
|
|
126
|
-
return currentParent;
|
|
127
|
-
}
|
|
128
|
-
currentParent = currentParent.parentElement;
|
|
129
|
-
}
|
|
130
|
-
return document;
|
|
131
|
-
}
|
|
132
|
-
isScrollable(node) {
|
|
133
|
-
if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
|
|
134
|
-
return false;
|
|
135
|
-
}
|
|
136
|
-
const style = getComputedStyle(node);
|
|
137
|
-
return ['overflow', 'overflow-x', 'overflow-y'].some(propertyName => {
|
|
138
|
-
const value = style.getPropertyValue(propertyName);
|
|
139
|
-
return value === 'auto' || value === 'scroll';
|
|
140
|
-
});
|
|
141
|
-
}
|
|
142
271
|
updateLocalHeaderHeight() {
|
|
143
272
|
requestAnimationFrame(() => {
|
|
144
273
|
const mhh = this.host.shadowRoot.querySelector('.local-header')?.clientHeight || 0;
|
|
145
274
|
this.host.style.setProperty('--local-header-height', `${mhh}px`);
|
|
146
275
|
});
|
|
147
276
|
}
|
|
277
|
+
handleLinkClick(event) {
|
|
278
|
+
const target = event.target;
|
|
279
|
+
const isLinkInMainNav = target.closest('post-mainnavigation a');
|
|
280
|
+
const isLinkInMegadropdown = target.closest('post-megadropdown a');
|
|
281
|
+
if (!isLinkInMainNav && !isLinkInMegadropdown) {
|
|
282
|
+
return;
|
|
283
|
+
}
|
|
284
|
+
if (this.mobileMenuExtended && (isLinkInMainNav || isLinkInMegadropdown)) {
|
|
285
|
+
this.toggleMobileMenu();
|
|
286
|
+
}
|
|
287
|
+
if (this.device === 'desktop' && isLinkInMegadropdown) {
|
|
288
|
+
const megadropdownLink = target.closest('post-megadropdown a');
|
|
289
|
+
if (megadropdownLink) {
|
|
290
|
+
target.closest('post-megadropdown').hide(true);
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
}
|
|
148
294
|
handleResize() {
|
|
149
295
|
const previousDevice = this.device;
|
|
150
296
|
let newDevice;
|
|
@@ -184,10 +330,13 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
|
|
|
184
330
|
if (this.mobileMenuExtended) {
|
|
185
331
|
navigationClasses.push('extended');
|
|
186
332
|
}
|
|
333
|
+
if (!this.megadropdownOpen) {
|
|
334
|
+
navigationClasses.push('scroll-y');
|
|
335
|
+
}
|
|
187
336
|
return (h("div", { ref: el => (this.mobileMenu = el), class: navigationClasses.join(' ') }, h("slot", { name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("div", { class: "navigation-footer" }, h("slot", { name: "meta-navigation" }), h("slot", { name: "post-language-switch" })))));
|
|
188
337
|
}
|
|
189
338
|
render() {
|
|
190
|
-
return (h(Host, { key: '
|
|
339
|
+
return (h(Host, { key: 'd92b8f3fbf93f1defc6eff9d7283c7452962f1d9', version: version }, h("div", { key: '2d4d19e4aab0bb294c95b4ed672aaac0d0ad23e9', class: "global-header" }, h("div", { key: '069ae5f4ad46baa0245dd97966738a1d4be8d954', class: "global-sub" }, h("div", { key: 'f48c56b8dab12bc8e9a19628d4bc9f7a99ebfd8a', class: "logo" }, h("slot", { key: '663d5f7aa39ec7ff68dd90f24472740ab49d6838', name: "post-logo" }))), h("div", { key: '6a0c11629c5d58d63b49cf99f87fa5858d05c5b0', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: 'ecc46275f314af761ab96fc209133e5f011d25e1', name: "meta-navigation" }), h("slot", { key: '92d41365424c09e07750be9f561d08d062d25c37', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: '6c4d7640261933e939a0cde1cf73d26024e4fcfc', name: "post-language-switch" }), h("div", { key: '39e2ee687469c80f36559d3e50210203e20e2854', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: 'f8e746e4dfef7f2427a78ac40b81f4cfd9422d95', name: "post-togglebutton" })))), h("div", { key: '90ca0666714d3e87600bd0ba160dcec289d9ed98', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '08eb843b431faceac96aaada6714bd86c26f41f5', name: "title" }), h("div", { key: '04542458a9e4aa804daf74d17471a3849e62071e', class: "local-sub" }, h("slot", { key: 'c8c2bc0a9d8433776241c1121a04feb13c34b30c', name: "local-controls" }), h("slot", { key: 'c0b60ab9499dbb9bf08a7e104bac218accd16861' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
|
|
191
340
|
}
|
|
192
341
|
static get watchers() { return {
|
|
193
342
|
"mobileMenuExtended": ["frozeBody"]
|
|
@@ -196,6 +345,7 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
|
|
|
196
345
|
}, [1, "post-header", {
|
|
197
346
|
"device": [32],
|
|
198
347
|
"mobileMenuExtended": [32],
|
|
348
|
+
"megadropdownOpen": [32],
|
|
199
349
|
"toggleMobileMenu": [64]
|
|
200
350
|
}, undefined, {
|
|
201
351
|
"mobileMenuExtended": ["frozeBody"]
|