@swisspost/design-system-components 9.0.0-next.8 → 9.0.0

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

@@ -1,278 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { version } from "../../../../package";
-import { isFocusable } from "../../utils/is-focusable";
-export class PostMenu {
-    constructor() {
-        this.lastFocusedElement = null;
-        this.KEYCODES = {
-            SPACE: ' ',
-            ENTER: 'Enter',
-            UP: 'ArrowUp',
-            DOWN: 'ArrowDown',
-            TAB: 'Tab',
-            HOME: 'Home',
-            END: 'End',
-            ESCAPE: 'Escape'
-        };
-        this.handleKeyDown = (e) => {
-            e.stopPropagation();
-            if (e.key === this.KEYCODES.ESCAPE) {
-                this.toggle(this.host);
-                return;
-            }
-            if (Object.values(this.KEYCODES).includes(e.key)) {
-                this.controlKeyDownHandler(e);
-            }
-        };
-        this.handleClick = (e) => {
-            const target = e.target;
-            if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
-                this.toggle(this.host);
-            }
-        };
-        this.placement = 'bottom';
-        this.isVisible = false;
-    }
-    connectedCallback() {
-        this.host.addEventListener('keydown', this.handleKeyDown);
-        this.host.addEventListener('click', this.handleClick);
-    }
-    disconnectedCallback() {
-        this.host.removeEventListener('keydown', this.handleKeyDown);
-        this.host.removeEventListener('click', this.handleClick);
-    }
-    componentDidLoad() {
-        this.popoverRef.addEventListener('postToggle', (event) => {
-            this.isVisible = event.detail;
-            this.toggleMenu.emit(this.isVisible);
-        });
-    }
-    /**
-     * Toggles the menu visibility based on its current state.
-     */
-    async toggle(target) {
-        this.isVisible ? await this.hide() : await this.show(target);
-    }
-    /**
-     * Displays the popover menu, focusing the first menu item.
-     *
-     * @param target - The HTML element relative to which the popover menu should be displayed.
-     */
-    async show(target) {
-        if (this.popoverRef) {
-            await this.popoverRef.show(target);
-            this.lastFocusedElement = document.activeElement;
-            const menuItems = this.getSlottedItems();
-            if (menuItems.length > 0) {
-                menuItems[0].focus();
-            }
-        }
-        else {
-            console.error('show: popoverRef is null or undefined');
-        }
-    }
-    /**
-     * Hides the popover menu and restores focus to the previously focused element.
-     */
-    async hide() {
-        if (this.popoverRef) {
-            await this.popoverRef.hide();
-            if (this.lastFocusedElement) {
-                this.lastFocusedElement.focus();
-            }
-        }
-        else {
-            console.error('hide: popoverRef is null or undefined');
-        }
-    }
-    controlKeyDownHandler(e) {
-        const menuItems = this.getSlottedItems();
-        if (!menuItems.length) {
-            return;
-        }
-        const currentFocusedElement = document.activeElement;
-        let currentIndex = menuItems.findIndex(el => el === currentFocusedElement);
-        switch (e.key) {
-            case this.KEYCODES.UP:
-                e.preventDefault();
-                currentIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
-                break;
-            case this.KEYCODES.DOWN:
-                e.preventDefault();
-                currentIndex = (currentIndex + 1) % menuItems.length;
-                break;
-            case this.KEYCODES.HOME:
-                currentIndex = 0;
-                break;
-            case this.KEYCODES.END:
-                currentIndex = menuItems.length - 1;
-                break;
-            case this.KEYCODES.SPACE:
-            case this.KEYCODES.ENTER:
-                this.toggle(this.host);
-                return;
-            case this.KEYCODES.TAB:
-                this.toggle(this.host);
-                break;
-            default:
-                break;
-        }
-        if (menuItems[currentIndex]) {
-            menuItems[currentIndex].focus();
-        }
-    }
-    getSlottedItems() {
-        const slot = this.host.shadowRoot.querySelector('slot');
-        const slottedElements = slot ? slot.assignedElements() : [];
-        const menuItems = slottedElements
-            .filter(el => el.tagName === 'POST-MENU-ITEM')
-            .map(el => {
-            const slot = el.shadowRoot.querySelector('slot');
-            const assignedElements = slot ? slot.assignedElements() : [];
-            return assignedElements.filter(isFocusable);
-        })
-            .flat();
-        return menuItems;
-    }
-    render() {
-        return (h(Host, { key: 'c3fa319c92cc36b562590df18b6585b1bc18f133', "data-version": version }, h("post-popovercontainer", { key: '7d297b7598fecb01f46c3f1b999b6017ee878d06', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '3ae32950348ae8910094cddd34afef060ca517f1', class: "popover-container" }, h("slot", { key: '7faa98f2f4c50ef1ac424387a6c3890dcf09adce' })))));
-    }
-    static get is() { return "post-menu"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["post-menu.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["post-menu.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "placement": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "Placement",
-                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-                    "references": {
-                        "Placement": {
-                            "location": "import",
-                            "path": "@floating-ui/dom",
-                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.6.8/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\nTooltips are automatically flipped to the opposite side if there is not enough available space and are shifted\ntowards the viewport if they would overlap edge boundaries."
-                },
-                "attribute": "placement",
-                "reflect": false,
-                "defaultValue": "'bottom'"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isVisible": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "toggleMenu",
-                "name": "toggleMenu",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emits when the menu is shown or hidden.\nThe event payload is a boolean: `true` when the menu was opened, `false` when it was closed."
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "toggle": {
-                "complexType": {
-                    "signature": "(target: HTMLElement) => Promise<void>",
-                    "parameters": [{
-                            "name": "target",
-                            "type": "HTMLElement",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Toggles the menu visibility based on its current state.",
-                    "tags": []
-                }
-            },
-            "show": {
-                "complexType": {
-                    "signature": "(target: HTMLElement) => Promise<void>",
-                    "parameters": [{
-                            "name": "target",
-                            "type": "HTMLElement",
-                            "docs": "- The HTML element relative to which the popover menu should be displayed."
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Displays the popover menu, focusing the first menu item.",
-                    "tags": [{
-                            "name": "param",
-                            "text": "target - The HTML element relative to which the popover menu should be displayed."
-                        }]
-                }
-            },
-            "hide": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Hides the popover menu and restores focus to the previously focused element.",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "host"; }
-}

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

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

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

@@ -1,20 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { version } from "../../../../package";
-export class PostMenuItem {
-    render() {
-        return (h(Host, { key: '8e20fdee0faff826319440bed6ec7be0c56e6d06', role: "menuitem", "data-version": version }, h("slot", { key: '69e2be9dec334ade8e84ccb268c7d4955dd2fefb' })));
-    }
-    static get is() { return "post-menu-item"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["post-menu-item.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["post-menu-item.css"]
-        };
-    }
-    static get elementRef() { return "host"; }
-}

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

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

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

@@ -1,104 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { version } from "../../../../package";
-import { checkType, getRoot } from "../../utils/index";
-export class PostMenuTrigger {
-    constructor() {
-        /**
-         * Reference to the slotted button within the trigger, if present.
-         * Used to manage click and key events for menu control.
-         */
-        this.slottedButton = null;
-        this.handleKeyDown = (e) => {
-            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-                e.preventDefault();
-                this.handleToggle();
-            }
-        };
-        this.for = undefined;
-        this.ariaExpanded = 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(forValue = this.for) {
-        checkType(forValue, 'string', 'The "for" property is required and should be a string.');
-    }
-    get menu() {
-        const ref = this.root.getElementById(this.for);
-        return ref && ref.localName === 'post-menu' ? ref : null;
-    }
-    handleToggle() {
-        const menu = this.menu;
-        if (menu && this.slottedButton) {
-            this.ariaExpanded = !this.ariaExpanded;
-            this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
-            menu.toggle(this.host);
-        }
-        else {
-            console.warn(`No post-menu found with ID: ${this.for}`);
-        }
-    }
-    componentDidLoad() {
-        this.root = getRoot(this.host);
-        this.validateControlFor();
-        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-menu-trigger');
-        }
-    }
-    render() {
-        return (h(Host, { key: 'd6b5619d0b4035887eaffdcc3c153eb0a5fe4ceb', "data-version": version, "tab-index": "-1" }, h("slot", { key: '5d87c80dae6188470b10207993822d92adc714b1' })));
-    }
-    static get is() { return "post-menu-trigger"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["post-menu-trigger.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["post-menu-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 menu element that this trigger is linked to. Used to open and close the specified menu."
-                },
-                "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-togglebutton/post-togglebutton.css

@@ -1 +0,0 @@
-:host{cursor:pointer}

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

@@ -1,56 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { version } from "../../../../package";
-/**
- * @slot toggled - Slot for content displayed when the button is in the "on" state.
- * @slot untoggled - Slot for content displayed when the button is in the "off" state.
- */
-export class PostTogglebutton {
-    constructor() {
-        this.handleClick = () => {
-            this.toggled = !this.toggled;
-        };
-        this.handleKeydown = (event) => {
-            if (event.key === 'Enter') {
-                this.toggled = !this.toggled;
-            }
-        };
-        this.toggled = false;
-    }
-    render() {
-        return (h(Host, { key: '82fc4126d97650255d1d5fd041208b3d11cf0ded', slot: "post-togglebutton", tabindex: "0", "data-version": version, role: "button", "aria-pressed": this.toggled.toString(), onClick: this.handleClick, onKeyDown: this.handleKeydown }, h("span", { key: '0364e8b63cc2c7955282f62533683c3627aa6626', hidden: this.toggled }, h("slot", { key: '11ccb62855497ddf395276e7f7e88a8409fa36e4', name: "untoggled" })), h("span", { key: '463f4571ceecc51063a4d4495d22063b6b75d0df', hidden: !this.toggled }, h("slot", { key: '7d41e35a64deefd22087524bc57530603aae18fa', name: "toggled" }))));
-    }
-    static get is() { return "post-togglebutton"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["post-togglebutton.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["post-togglebutton.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "toggled": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the button is in the \"on\" state, otherwise it is in the \"off\" state."
-                },
-                "attribute": "toggled",
-                "reflect": true,
-                "defaultValue": "false"
-            }
-        };
-    }
-}

package/dist/collection/utils/is-focusable.js

@@ -1,26 +0,0 @@
-const focusableSelector = `:where(${[
-    'button',
-    'input:not([type="hidden"])',
-    '[tabindex]',
-    'select',
-    'textarea',
-    '[contenteditable]',
-    'a[href]',
-    'iframe',
-    'audio[controls]',
-    'video[controls]',
-    'area[href]',
-    'details > summary:first-of-type',
-].join(',')})`;
-const focusDisablingSelector = `:where(${[
-    '[inert]',
-    '[inert] *',
-    ':disabled',
-    'dialog:not([open]) *',
-    '[popover]:not(:popover-open) *',
-    'details:not([open]) > *:not(details > summary:first-of-type)',
-    'details:not([open]) > *:not(details > summary:first-of-type) *',
-].join(',')})`;
-export const isFocusable = (element) => {
-    return (element === null || element === void 0 ? void 0 : element.matches(focusableSelector)) && !(element === null || element === void 0 ? void 0 : element.matches(focusDisablingSelector));
-};

package/dist/components/attribute-observer.js

@@ -1,25 +0,0 @@
-const getAttributeObserver = (attribute, handler) => {
-    /**
-     * Handle attribute changes and childList changes from the observer
-     * @param {MutationRecord[]} mutationList
-     */
-    const observerHandler = (mutationList) => {
-        mutationList.forEach(mutation => {
-            if (mutation.type === 'attributes' && mutation.attributeName === attribute) {
-                handler(mutation.target);
-            }
-            if (mutation.type === 'childList') {
-                mutation.addedNodes.forEach(node => {
-                    if (node.nodeType === Node.ELEMENT_NODE &&
-                        node.hasAttribute(attribute)) {
-                        handler(node);
-                    }
-                });
-            }
-        });
-    };
-    // Initialize a mutation observer for patching accessibility features
-    return new MutationObserver(observerHandler);
-};
-
-export { getAttributeObserver as g };

package/dist/components/get-root.js

@@ -1,9 +0,0 @@
-function getRoot(element) {
-    const root = element.getRootNode();
-    if (root instanceof Document || root instanceof ShadowRoot) {
-        return root;
-    }
-    throw new Error('Attempting to access root node before the element is attached to the document or shadow tree.');
-}
-
-export { getRoot as g };

package/dist/components/post-avatar.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface PostAvatar extends Components.PostAvatar, HTMLElement {}
-export const PostAvatar: {
-    prototype: PostAvatar;
-    new (): PostAvatar;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/post-avatar.js

@@ -1,6 +0,0 @@
-import { P as PostAvatar$1, d as defineCustomElement$1 } from './post-avatar2.js';
-
-const PostAvatar = PostAvatar$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostAvatar, defineCustomElement };