@swisspost/design-system-components 9.0.0-next.4 → 9.0.0-next.6

package/dist/collection/components/post-header/post-header.js

@@ -0,0 +1,103 @@
+import { h, Host } from "@stencil/core";
+import { throttle } from "throttle-debounce";
+import { version } from "../../../../package";
+export class PostHeader {
+    constructor() {
+        this.scrollParent = null;
+        this.throttledScroll = () => this.handleScrollEvent();
+        this.throttledResize = throttle(50, () => this.handleResize());
+        this.device = null;
+        this.mobileMenuExtended = false;
+    }
+    componentWillRender() {
+        this.scrollParent = this.getScrollParent(this.host);
+        this.scrollParent.addEventListener('scroll', this.throttledScroll, { passive: true });
+        window.addEventListener('resize', this.throttledResize, { passive: true });
+        this.handleResize();
+        this.handleScrollEvent();
+    }
+    handlePostMainNavigationClosed() {
+        this.mobileMenuExtended = false;
+    }
+    handleScrollEvent() {
+        // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
+        const st = Math.max(0, this.scrollParent instanceof Document
+            ? this.scrollParent.documentElement.scrollTop
+            : this.scrollParent.scrollTop);
+        this.host.style.setProperty('--header-scroll-top', `${st}px`);
+    }
+    getScrollParent(node) {
+        let currentParent = node.parentElement;
+        while (currentParent) {
+            if (currentParent.nodeName === 'BODY') {
+                return document;
+            }
+            if (this.isScrollable(currentParent)) {
+                return currentParent;
+            }
+            currentParent = currentParent.parentElement;
+        }
+        return document;
+    }
+    isScrollable(node) {
+        if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
+            return false;
+        }
+        const style = getComputedStyle(node);
+        return ['overflow', 'overflow-x', 'overflow-y'].some(propertyName => {
+            const value = style.getPropertyValue(propertyName);
+            return value === 'auto' || value === 'scroll';
+        });
+    }
+    handleResize() {
+        const width = window === null || window === void 0 ? void 0 : window.innerWidth;
+        if (width >= 1024) {
+            this.device = 'desktop';
+            this.mobileMenuExtended = false; // Close any open mobile menu
+        }
+        else if (width >= 600) {
+            this.device = 'tablet';
+        }
+        else {
+            this.device = 'mobile';
+        }
+    }
+    handleMobileMenuToggle() {
+        this.mobileMenuExtended = !this.mobileMenuExtended;
+    }
+    render() {
+        const mainNavClasses = ['main-navigation'];
+        if (this.mobileMenuExtended) {
+            mainNavClasses.push('extended');
+        }
+        return (h(Host, { key: '5a05f890e66ec97d54fd17ca26436392a4e78e9b', version: version }, h("div", { key: '8f9b79cb289d0c613f6d000cf969ce5bf0b3d62a', class: "global-header" }, h("div", { key: '0a482fc3153e29917ed2df1fcbf39492a18918ef', class: "global-sub" }, h("div", { key: '3d25cc42a1fac21906cb2c487d90de84a9f1d029', class: "logo" }, h("slot", { key: '5a14eb7b8f9927083a56e37d53bc4aed3311b6c8', name: "post-logo" })), this.device === 'desktop' && h("slot", { key: '21bc41d4a09536a33ee3d7a98424a00d3969718f', name: "audience-navigation" })), h("div", { key: '6c8fdc5acc99c165bda366e872ceb32d6918b515', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '88f681de4d63517d73decd436b7084fca410f021', name: "meta-navigation" }), h("slot", { key: 'b6e5c1143fb89e2940f464bac95277bc2741a5c8', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: '2edb30a148ffaae9f864e9babc03228c63a46314', name: "post-language-switch" }), h("div", { key: 'cc0633f19bd9b948fb2456fdc44431984e3a10eb', onClick: () => this.handleMobileMenuToggle(), class: "mobile-toggle" }, h("slot", { key: '26fa9aa29cab7e4048c387ee6c49216dc911f209', name: "post-togglebutton" })))), h("div", { key: '772afbe63ac2f0ae0527e25c6feac75b02365689', class: "title-header d-flex space-between align-center" }, h("slot", { key: '32bf212b1e16df0a2fd7cec6b21a7649458e7660', name: "title" }), h("div", { key: '13bf9f2443fa9c48c6f25a0159896995e170b4dc', class: "global-sub" }, h("slot", { key: 'a20c9414619c9508600c25ef31d5c14f6178f520', name: "local-controls" }), h("slot", { key: 'a87beb7500f4e07396bf4a91ee299a4bebd751bd' }))), h("div", { key: '008c9d1a0acf59a9b54facec5e6aec2f483f8ed7', class: mainNavClasses.join(' ') }, (this.device === 'mobile' || this.device === 'tablet') && (h("slot", { key: 'e8013ae7c0fe3883a4be405409fd3b35e236cf8c', name: "audience-navigation" })), h("slot", { key: '90412d08f0a835714de0a6c635f82aae90abeac2', name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("slot", { key: '31fb4b34ddabda5f87f65a6c841b64f4a9802d50', name: "meta-navigation" })), (this.device === 'mobile' || this.device === 'tablet') && (h("slot", { key: 'cfd212a052d0b736d049084f492c614131ae7a32', name: "post-language-switch" })))));
+    }
+    static get is() { return "post-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./post-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-header.css"]
+        };
+    }
+    static get states() {
+        return {
+            "device": {},
+            "mobileMenuExtended": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "postMainNavigationClosed",
+                "method": "handlePostMainNavigationClosed",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/post-list/post-list.js

@@ -20,12 +20,12 @@ export class PostList {
         this.checkTitle();
     }
     checkTitle() {
-        if (!this.titleEl.innerText) {
+        if (!this.titleEl.textContent.trim()) {
             throw new Error('Please provide a title to the list component. Title is mandatory for accessibility purposes.');
         }
     }
     render() {
-        return (h(Host, { key: '4931dd182e1a0a25704abacf996d7ce3489cb663', "data-version": version }, h("div", { key: '84347e7b815ace536af32f8aabea7b730190bee5', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '8778de71facc6b3376af67fcf8493a68bd6001cf' })), h("div", { key: 'f81e8f7fd38d894e31494af05f93c53b8595324d', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '04df5a2a6e49b9296353e6ea078e2643c8c39a76', name: "post-list-item" }))));
+        return (h(Host, { key: '6c8341a8a31aff079726fb3414cd83017d297ed2', "data-version": version }, h("div", { key: '90a24e049565179ae20becefac3a4edf43b9c975', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '81489d927ad208988da2282b129eec660e2f0bd0' })), h("div", { key: '3aa8ec588c4063d396e32a20097714495421609b', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '0ae0aeb3e0330582d9025a36d37319ec71b0e7b1', name: "post-list-item" }))));
     }
     static get is() { return "post-list"; }
     static get originalStyleUrls() {

package/dist/collection/components/post-list-item/post-list-item.js

@@ -7,7 +7,7 @@ export class PostListItem {
         this.host.setAttribute('slot', 'post-list-item');
     }
     render() {
-        return (h(Host, { key: 'ef252634192c180f5af6bda222853e82508c83f8', role: "listitem" }, h("slot", { key: 'c0752b971c7527660fcfa1fe5a8301a9676f5651' })));
+        return (h(Host, { key: '8336f46e5c7d9b6b921582498e1d7e62086b3d4b', role: "listitem" }, h("slot", { key: '36ca0d6632ca775793f1db91d747894e0037dca2' })));
     }
     static get is() { return "post-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-logo/post-logo.js

@@ -23,7 +23,7 @@ export class PostLogo {
     render() {
         const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
         const LogoTag = logoLink ? 'a' : 'span';
-        return (h(Host, { key: 'b574181a7c53cd9c9902e6ba186cd5a0de94cb3e', "data-version": version }, h(LogoTag, Object.assign({ key: 'a27bf9db453b9b991c4db8d003eca10a28935b73', class: "logo" }, (logoLink ? { href: logoLink } : {})), h("span", { key: '1e464aff7a75b29bd72eb15aed9ac122a3b53765', class: "description" }, h("slot", { key: 'd32bbf03ff0d5343fd05f2c1c31e6b1d1d767926', onSlotchange: () => this.checkDescription() })), h("svg", { key: '3fa62f2304816bc4a7f974a2011e664f39a9a943', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '47dbbc031af1c8f56f0c7c9046ecf1bb2aacbeff', id: "Logo" }, h("rect", { key: '8da0d35310d062d0e1f23bc9eb19fef4fd5f7a96', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '7d96cc5f82e35308826e77e5daa94494ef8947e6', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), h("path", { key: '85b88d253f50500662ea6e7689a5cfa8461bd7c1', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
+        return (h(Host, { key: '9f23dca4f568ecbcf3d90387b2a9cb4fa1e85a98', "data-version": version, slot: "post-logo" }, h(LogoTag, Object.assign({ key: '1b303363d3a4a829d4ab4b38bc40cbd3107b55e9', class: "logo" }, (logoLink ? { href: logoLink } : {})), h("span", { key: 'de29d53c4bb663053092b905d32f6597bd9a00d5', class: "description" }, h("slot", { key: 'bdfc96e3d9cb9384a61fa8af91c12a4b119f2f3b', onSlotchange: () => this.checkDescription() })), h("svg", { key: 'f2d1e0803c7f2f3a7c425dd5ebd57346c8d967e6', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '554a2d4edb796b01969555eccb3f0f34e74f0121', id: "Logo" }, h("rect", { key: '7596d8684037b02d015e48539bddda3f44dfcadf', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: 'f79c5e941f7d87de1484a934565cf363b49914d5', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), h("path", { key: '7c5babc1703e4f74c08b78916a86c553f8cc6edf', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
     }
     static get is() { return "post-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-mainnavigation/post-mainnavigation.css

@@ -0,0 +1 @@
+*,::before,::after{box-sizing:border-box}@media screen and (min-width: 1024px){slot[name=back-button],[slot=back-button]{display:none}}@media screen and (min-width: 1024px){h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}}post-mainnavigation{height:100%}:host{height:100%;display:block}.main-navigation{margin-block:0;list-style:none;display:flex;padding-left:0;gap:1rem}@media screen and (max-width: 1023.99px){.main-navigation{flex-direction:column}}.main-navigation>post-list{display:flex;align-items:stretch;gap:1rem;height:100%}@media screen and (max-width: 1023.99px){.main-navigation>post-list{flex-direction:column}}.main-navigation a,.main-navigation post-megadropdown-toggle{height:100%;display:flex;align-items:center}

package/dist/collection/components/post-mainnavigation/post-mainnavigation.js

@@ -0,0 +1,61 @@
+import { Host, h } from "@stencil/core";
+export class PostMainnavigation {
+    handleMegadropdownToggled(event) {
+        // Find next element sibling
+        let megalodon;
+        let target = event.target;
+        while (target !== null) {
+            if (target.tagName === 'POST-MEGADROPDOWN') {
+                megalodon = target;
+                break;
+            }
+            target = target.nextElementSibling;
+        }
+        if (megalodon)
+            megalodon.toggle(event.target);
+    }
+    handleBackButtonClick() {
+        this.postToggle.emit();
+    }
+    render() {
+        return (h(Host, { key: '1c1d1d1c2781f39acc0fd02d3f93f922d801d98f', slot: "post-mainnavigation" }, h("div", { key: '1bc1129c65fc03ec72609438bbf28afe5bc5974b', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '6b1bcc25306f1f959a25b18a6319eb696b0cbc2c', name: "back-button" })), h("nav", { key: '0002b55cb82fbf88a69a886c5ec1ba24168c9979', class: "main-navigation" }, h("slot", { key: '15e4558c1202f8f83e09dad76441d6bf7e3e16ea' }))));
+    }
+    static get is() { return "post-mainnavigation"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./post-mainnavigation.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-mainnavigation.css"]
+        };
+    }
+    static get events() {
+        return [{
+                "method": "postToggle",
+                "name": "postToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Gets emitted when a user closes the main navigation on mobile"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "postToggle",
+                "method": "handleMegadropdownToggled",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/post-megadropdown/post-megadropdown.css

@@ -0,0 +1 @@
+*,::before,::after{box-sizing:border-box}post-popovercontainer{background-color:#fafafa;width:100%;border-bottom:1px solid #000}@media screen and (max-width: 1023.99px){post-popovercontainer{position:absolute;top:var(--header-height) !important;bottom:0;left:0;width:100%;height:auto}}.megadropdown{display:flex;gap:1rem;padding:1.5rem;border-radius:0 0 3px 3px}@media screen and (max-width: 1023.99px){.megadropdown{flex-direction:column}}.megadropdown post-list{display:flex;flex-direction:column;gap:.5rem}.megadropdown post-list-item{border-bottom:1px solid gray}.megadropdown post-list-item>a{padding-block:.25rem;display:block;text-decoration:none}.back-button{display:none}@media screen and (max-width: 1023.99px){.back-button{display:block}}post-closebutton{margin-left:auto}@media screen and (max-width: 1023.99px){post-closebutton{display:none}}h3{font-size:20px}

package/dist/collection/components/post-megadropdown/post-megadropdown.js

@@ -0,0 +1,137 @@
+import { Host, h } from "@stencil/core";
+export class PostMegadropdown {
+    /**
+     * Show megadropdown
+     * @param element HTMLElement
+     * @returns boolean
+     */
+    async show(element) {
+        return this.popoverRef.show(element);
+    }
+    /**
+     * Hide megadropdown
+     * @returns boolean
+     */
+    async hide() {
+        return this.popoverRef.hide();
+    }
+    /**
+     * Toggle megadropdown
+     * @param element HTMLElement
+     * @param force boolean
+     * @returns boolean
+     */
+    async toggle(element, force) {
+        return this.popoverRef.toggle(element, force !== null && force !== void 0 ? force : undefined);
+    }
+    handleBackButtonClick() {
+        this.hide();
+    }
+    render() {
+        return (h(Host, { key: '6b30399852561a911c04a79c7c785bb5cf8e68ff', slot: "post-mainnavigation" }, h("post-popovercontainer", { key: 'caa196c59c0177948a73c43033f7399344068d77', placement: "bottom", "edge-gap": "0", ref: el => (this.popoverRef = el) }, h("div", { key: '7c88bd1ca7fac00b9ab0cb1d73252c6990484fb2', class: "megadropdown" }, h("div", { key: '25073177e9c9a05fca93b3b0abbed18f6b2a075b', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '06a153e974f60476f2796e03afea3ad86c7560ca', name: "back-button" })), h("slot", { key: 'ea95044efbd609894dd96b3aa8662756e14711af' })))));
+    }
+    static get is() { return "post-megadropdown"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./post-megadropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-megadropdown.css"]
+        };
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "(element: HTMLElement) => Promise<void>",
+                    "parameters": [{
+                            "name": "element",
+                            "type": "HTMLElement",
+                            "docs": "HTMLElement"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Show megadropdown",
+                    "tags": [{
+                            "name": "param",
+                            "text": "element HTMLElement"
+                        }, {
+                            "name": "returns",
+                            "text": "boolean"
+                        }]
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Hide megadropdown",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "boolean"
+                        }]
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "(element: HTMLElement, force?: boolean) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "element",
+                            "type": "HTMLElement",
+                            "docs": "HTMLElement"
+                        }, {
+                            "name": "force",
+                            "type": "boolean",
+                            "docs": "boolean"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Toggle megadropdown",
+                    "tags": [{
+                            "name": "param",
+                            "text": "element HTMLElement"
+                        }, {
+                            "name": "param",
+                            "text": "force boolean"
+                        }, {
+                            "name": "returns",
+                            "text": "boolean"
+                        }]
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.css

@@ -0,0 +1 @@
+:host{display:inline-block}

package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.js

@@ -0,0 +1,48 @@
+import { Host, h } from "@stencil/core";
+export class PostMegadropdownTrigger {
+    constructor() {
+        this.toggled = false;
+    }
+    handleClick() {
+        this.toggled = !this.toggled;
+        this.postToggle.emit();
+    }
+    render() {
+        return (h(Host, { key: 'af6dbf6cb97c5f98242e2d3fc31f193d00444b26', slot: "post-megadropdown-trigger" }, h("button", { key: '8160075f3dcb5afdd88a375698a61edfdbe8b7a1', "aria-expanded": this.toggled, onClick: () => this.handleClick() }, h("slot", { key: 'f5be082b15802582540d9a3320d4bf19ca3d98c3' }))));
+    }
+    static get is() { return "post-megadropdown-trigger"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./post-megadropdown-trigger.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-megadropdown-trigger.css"]
+        };
+    }
+    static get states() {
+        return {
+            "toggled": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "postToggle",
+                "name": "postToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits after each toggle"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/post-menu/post-menu.css

@@ -0,0 +1,3 @@
+/*!
+ * Copyright 2021 by Swiss Post, Information Technology
+ */:host{display:block}post-popovercontainer{padding:var(--post-menu-padding);background-color:var(--post-menu-bg, #ffffff);border-color:var(--post-menu-bg, #ffffff)}