@swisspost/design-system-components 9.0.0-next.2 → 9.0.0-next.21

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

@@ -0,0 +1 @@
+@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}@keyframes slide-down{from{transform:translateY(-100%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{transform:translateY(0%)}100%{transform:translateY(-100%)}}*,::before,::after{box-sizing:border-box}.megadropdown-container{box-shadow:0 8px 6px rgba(0,0,0,.16);position:absolute;background-color:#fafafa;border:none;z-index:1;border-top:1px solid #e1e0dc;width:100%;top:100%;left:0;border-radius:0}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown-container{border-block-end:1px solid CanvasText}}.megadropdown-container.slide-in{animation:slide-down 350ms forwards}.megadropdown-container.slide-out{animation:slide-up 350ms forwards}@media screen and (max-width: 1023.98px){.megadropdown-container{z-index:4;top:0 !important;left:0;width:100%;position:fixed;height:calc(100dvh - var(--header-height));max-height:calc(100dvh - var(--header-height));border-top:unset;overflow:auto}.megadropdown-container.slide-in{animation:slide-in 350ms forwards}.megadropdown-container.slide-out{animation:slide-out 350ms forwards}}.megadropdown{padding:31px 40px 40px;background-color:#fafafa}@media screen and (max-width: 1023.98px){.megadropdown{display:flex;flex-direction:column;width:inherit;padding:16px 32px 24px}}@media screen and (max-width: 599.98px){.megadropdown{padding-inline:16px}}.megadropdown .megadropdown-content{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(15vw, 100%), 1fr));grid-auto-rows:1fr auto;grid-auto-flow:dense}@media screen and (max-width: 1023.98px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.98px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-top:0;margin-bottom:8px;font-weight:900}.megadropdown h2 a{text-decoration:none;display:none;font-weight:inherit;border-bottom:0;border-top:0}@media screen and (max-width: 1023.98px){.megadropdown h2{display:block;font-size:1.25rem}}@media screen and (max-width: 599.98px){.megadropdown h2{font-size:1.125rem}}.megadropdown post-list{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0px}.megadropdown post-list>[role=list]{flex-direction:unset;display:unset}.megadropdown post-list>*{width:100%}.megadropdown post-list .list-title{display:flex;flex-direction:column-reverse;height:100%}.megadropdown post-list .list-title h3{font-size:20px;display:block;font-weight:900}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:16px 12px 14px 8px}.megadropdown post-list .list-title h3:not(:has(a)){position:relative}.megadropdown post-list .list-title h3:not(:has(a))::before{content:"";background-color:#050400;bottom:0;width:100%;height:2px;position:absolute;left:0}.megadropdown post-list .list-title h3 a{border-radius:0;text-decoration:none;font-size:inherit;display:flex;align-items:center;justify-content:space-between;min-height:53px;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative;height:unset;font-weight:900}.megadropdown post-list .list-title h3 a::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}.megadropdown post-list .list-title h3 a.selected,.megadropdown post-list .list-title h3 a[aria-expanded=true]{background-color:#050400;color:#fff}.megadropdown post-list .list-title h3 a:hover{background-color:#504f4b;color:#fff}.megadropdown post-list .list-title h3 a:hover::before{background-color:#504f4b}.megadropdown post-list .list-title h3 a::before{height:2px}@media screen and (max-width: 1023.98px){.megadropdown post-list .list-title h3{font-size:1rem}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:14px 12px 12px 8px}}@media screen and (max-width: 599.98px){.megadropdown post-list .list-title h3{font-size:.875rem}}.megadropdown post-list-item>a{padding-block:13px 12px;padding-inline-start:8px;display:flex;text-decoration:none;width:100%;min-width:100%;height:auto;min-height:48px}.megadropdown post-list-item>a:hover{border-block-width:0}@media screen and (min-width: 1024px){.megadropdown post-list-item>a{font-size:1.25rem}}@media screen and (max-width: 1023.98px){.megadropdown post-list-item>a{padding-block:12px 11px}}@media screen and (max-width: 599.98px){.megadropdown post-list-item>a{font-size:.875rem}}.megadropdown .back-button{display:none;margin-bottom:2rem}.megadropdown .back-button .btn{width:auto}@media screen and (max-width: 1023.98px){.megadropdown .back-button{order:-1;display:block}}.megadropdown .close-button{position:absolute;top:1rem;right:1rem}@media screen and (max-width: 1023.98px){.megadropdown .close-button{display:none}}

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

@@ -0,0 +1,268 @@
+import { getFocusableChildren } from "../../utils/get-focusable-children";
+import { h, Host } from "@stencil/core";
+export class PostMegadropdown {
+    constructor() {
+        this.device = undefined;
+        this.isVisible = false;
+        this.animationClass = null;
+    }
+    header;
+    firstFocusableEl;
+    lastFocusableEl;
+    host;
+    /** Tracks the currently active dropdown instance. */
+    static activeDropdown = null;
+    /**
+     * Emits when the dropdown is shown or hidden.
+     * The event payload is an object.
+     * `isVisible` is true when the dropdown gets opened and false when it gets closed
+     * `focusParent` determines whether after the closing of the mega dropdown, the focus should go back to the trigger parent or naturally go to the next focusable element in the page
+     **/
+    postToggleMegadropdown;
+    disconnectedCallback() {
+        this.removeListeners();
+        if (PostMegadropdown.activeDropdown === this) {
+            PostMegadropdown.activeDropdown = null;
+        }
+    }
+    componentWillRender() {
+        this.getFocusableElements();
+    }
+    /**
+     * Toggles the dropdown visibility based on its current state.
+     */
+    async toggle() {
+        if (this.isVisible) {
+            this.hide();
+        }
+        else {
+            await this.show();
+        }
+    }
+    /**
+     * Displays the dropdown.
+     */
+    async show() {
+        if (PostMegadropdown.activeDropdown && PostMegadropdown.activeDropdown !== this) {
+            // Close the previously active dropdown without animation
+            PostMegadropdown.activeDropdown.forceClose();
+        }
+        else {
+            this.animationClass = 'slide-in';
+        }
+        this.isVisible = true;
+        PostMegadropdown.activeDropdown = this;
+        this.postToggleMegadropdown.emit({ isVisible: this.isVisible });
+        if (this.firstFocusableEl &&
+            window.getComputedStyle(this.firstFocusableEl).display !== 'none') {
+            this.firstFocusableEl.focus();
+        }
+        this.addListeners();
+    }
+    /**
+     * Hides the dropdown with an animation.
+     */
+    async hide(focusParent = true) {
+        this.postToggleMegadropdown.emit({ isVisible: false, focusParent: focusParent });
+        this.animationClass = 'slide-out';
+    }
+    async focusFirst() {
+        this.firstFocusableEl?.focus();
+    }
+    connectedCallback() {
+        this.header = this.host.closest('post-header');
+        if (this.header) {
+            this.header.addEventListener('postUpdateDevice', (event) => {
+                this.device = event.detail;
+            });
+        }
+    }
+    /**
+     * Forces the dropdown to close without animation.
+     */
+    forceClose() {
+        this.isVisible = false;
+        this.animationClass = null;
+        this.postToggleMegadropdown.emit({ isVisible: this.isVisible, focusParent: false });
+        this.removeListeners();
+    }
+    handleAnimationEnd() {
+        if (this.animationClass === 'slide-out') {
+            this.isVisible = false;
+            this.animationClass = null;
+            PostMegadropdown.activeDropdown = null;
+            this.removeListeners();
+        }
+    }
+    handleClickOutside = (event) => {
+        const target = event.target;
+        if (this.host.contains(target)) {
+            return;
+        }
+        if (target instanceof HTMLElement) {
+            const trigger = target.closest('post-megadropdown-trigger');
+            if (trigger) {
+                const targetDropdownId = trigger.getAttribute('for');
+                if (targetDropdownId !== this.host.id) {
+                    return;
+                }
+            }
+        }
+        this.hide(false);
+    };
+    addListeners() {
+        this.host.addEventListener('keydown', e => this.keyboardHandler(e));
+        document.addEventListener('keyup', e => this.handleTabOutside(e));
+        document.addEventListener('mousedown', this.handleClickOutside);
+    }
+    removeListeners() {
+        this.host.removeEventListener('keydown', e => this.keyboardHandler(e));
+        document.removeEventListener('keyup', e => this.handleTabOutside(e));
+        document.removeEventListener('mousedown', this.handleClickOutside);
+    }
+    getFocusableElements() {
+        const focusableEls = Array.from(this.host.querySelectorAll('post-list-item, h3, .back-button'));
+        const focusableChildren = focusableEls.flatMap(el => Array.from(getFocusableChildren(el)));
+        this.firstFocusableEl = focusableChildren[0];
+        this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
+    }
+    // Loop through the focusable children
+    keyboardHandler(e) {
+        if (e.key === 'Tab' && this.device !== 'desktop') {
+            if (e.shiftKey && document.activeElement === this.firstFocusableEl) {
+                // If back tab (TAB + Shift) and first element is focused, focus goes to the last element of the megadropdown
+                e.preventDefault();
+                this.lastFocusableEl.focus();
+            }
+            else if (!e.shiftKey && document.activeElement === this.lastFocusableEl) {
+                // If TAB and last element is focused, focus goes back to the first element of the megadropdown
+                e.preventDefault();
+                this.firstFocusableEl.focus();
+            }
+        }
+    }
+    handleTabOutside(e) {
+        if (e.key === 'Tab' && this.device === 'desktop') {
+            if (!this.host.contains(e.target)) {
+                this.hide(false);
+            }
+        }
+    }
+    render() {
+        const containerStyle = this.isVisible ? {} : { display: 'none' };
+        return (h(Host, { key: '1475e9ff941f5333d5cfe4f00157f8b2fc826b5e' }, h("div", { key: 'f3da1ec8abc7d00be7020821be69ea3af16f3ad2', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: 'f02279d454c7413080ce52711fe0cb923950d066', class: "megadropdown" }, h("slot", { key: '87da859d1a8408c3a49ea1ab050ea5f27de45ec2', name: "megadropdown-title" }), h("div", { key: 'c389959cf97c2ea69dd7b3f6945071e0c1793458', class: "megadropdown-content" }, h("slot", { key: '1a1241624a5b5421de0e4a3a54ddba3eb1e0834f' })), h("div", { key: 'f8fad723719e1505730f679dfff6428f3a5f1340', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: '6ca62ac352810b6d3642ee69433de4aac4089117', name: "back-button" })), h("div", { key: '16200fc7dee7d5535399e0450e39a816f04dffd6', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: 'e9478713c07f69011f397af3e3ffa6a3b8b7fb6a', name: "close-button" }))))));
+    }
+    static get is() { return "post-megadropdown"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-megadropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-megadropdown.css"]
+        };
+    }
+    static get states() {
+        return {
+            "device": {},
+            "isVisible": {},
+            "animationClass": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "postToggleMegadropdown",
+                "name": "postToggleMegadropdown",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when the dropdown is shown or hidden.\nThe event payload is an object.\n`isVisible` is true when the dropdown gets opened and false when it gets closed\n`focusParent` determines whether after the closing of the mega dropdown, the focus should go back to the trigger parent or naturally go to the next focusable element in the page"
+                },
+                "complexType": {
+                    "original": "{ isVisible: boolean; focusParent?: boolean }",
+                    "resolved": "{ isVisible: boolean; focusParent?: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles the dropdown visibility based on its current state.",
+                    "tags": []
+                }
+            },
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Displays the dropdown.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "(focusParent?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "focusParent",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Hides the dropdown with an animation.",
+                    "tags": []
+                }
+            },
+            "focusFirst": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1 @@
+post-megadropdown-trigger{width:100%;position:relative;z-index:3}

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

@@ -0,0 +1,127 @@
+import { h, Host } from "@stencil/core";
+import { version } from "../../../../package";
+import { checkType } from "../../utils/index";
+export class PostMegadropdownTrigger {
+    constructor() {
+        this.for = undefined;
+        this.ariaExpanded = false;
+    }
+    host;
+    /**
+     * Reference to the slotted button within the trigger, if present.
+     * Used to manage click and key events for mega dropdown control.
+     */
+    slottedButton = null;
+    /**
+     * Tracks whether this trigger's dropdown was expanded before a state change.
+     * Used to determine if this trigger should handle focus when its dropdown closes.
+     */
+    wasExpanded = false;
+    /**
+     * Watch for changes to the `for` property to validate its type and ensure it is a string.
+     * @param forValue - The new value of the `for` property.
+     */
+    validateControlFor() {
+        checkType(this, 'for', 'string');
+    }
+    get megadropdown() {
+        const ref = document.getElementById(this.for);
+        return ref && ref.localName === 'post-megadropdown'
+            ? ref
+            : null;
+    }
+    handleToggle() {
+        if (this.megadropdown) {
+            this.megadropdown.toggle();
+        }
+        else {
+            console.warn(`No post-megadropdown found with ID: ${this.for}`);
+        }
+    }
+    handleKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.handleToggle();
+            if (this.megadropdown && !this.ariaExpanded) {
+                setTimeout(() => this.megadropdown.focusFirst(), 100);
+            }
+        }
+    };
+    componentDidLoad() {
+        this.validateControlFor();
+        // Check if the mega dropdown attached to the trigger is expanded or not
+        document.addEventListener('postToggleMegadropdown', (event) => {
+            if (event.target.id === this.for) {
+                this.ariaExpanded = event.detail.isVisible;
+                // Focus on the trigger parent of the dropdown after it's closed if close button had been clicked
+                if (this.wasExpanded && !this.ariaExpanded && event.detail.focusParent) {
+                    setTimeout(() => {
+                        this.slottedButton?.focus();
+                    }, 100);
+                }
+                this.wasExpanded = this.ariaExpanded;
+                if (this.slottedButton) {
+                    this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
+                }
+            }
+        });
+        this.slottedButton = this.host.querySelector('button');
+        if (this.slottedButton) {
+            this.slottedButton.setAttribute('aria-haspopup', 'menu');
+            this.slottedButton.addEventListener('click', () => {
+                this.handleToggle();
+            });
+            this.slottedButton.addEventListener('keydown', this.handleKeyDown);
+        }
+        else {
+            console.warn('No button found within post-megadropdown-trigger');
+        }
+    }
+    render() {
+        return (h(Host, { key: '99849b6b851d061c1365eb5d507cba0e7e6e3ae6', "data-version": version, "tab-index": "-1" }, h("button", { key: 'ddd553c4b893538155263e5bd82c763be68eb3f3' }, h("slot", { key: 'eb006c5b13c69a8e089702f1b46f88bc3d74b045' }))));
+    }
+    static get is() { return "post-megadropdown-trigger"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-megadropdown-trigger.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-megadropdown-trigger.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "for": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of the mega dropdown element that this trigger is linked to. Used to open and close the specified mega dropdown."
+                },
+                "attribute": "for",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "ariaExpanded": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "for",
+                "methodName": "validateControlFor"
+            }];
+    }
+}

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)}.popover-container{display:flex;flex-direction:column}