@swisspost/design-system-components 10.0.0-next.39 → 10.0.0-next.41

package/loaders/post-menu2.js

@@ -1,202 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { P as PLACEMENT_TYPES, d as defineCustomElement$1 } from './post-popovercontainer2.js';
-import { v as version } from './package.js';
-import { g as getFocusableChildren } from './get-focusable-children.js';
-import { d as checkEmptyOrOneOf } from './index2.js';
-import './breakpoints.js';
-import { e as eventGuard } from './event-guard.js';
-import { g as getRoot } from './get-root.js';
-
-const postMenuCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}:host{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}";
-const PostMenuStyle0 = postMenuCss;
-
-const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.toggleMenu = createEvent(this, "toggleMenu", 7);
-        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.handlePostToggle = (event) => {
-            eventGuard(this.host, event, { targetLocalName: 'post-popovercontainer', delegatorSelector: 'post-menu' }, () => {
-                this.isVisible = event.detail;
-                this.toggleMenu.emit(this.isVisible);
-                requestAnimationFrame(() => {
-                    if (this.isVisible) {
-                        this.lastFocusedElement = this.root?.activeElement;
-                        const menuItems = this.getSlottedItems();
-                        if (menuItems.length > 0) {
-                            menuItems[0].focus();
-                        }
-                    }
-                    else if (this.lastFocusedElement) {
-                        this.lastFocusedElement.focus();
-                    }
-                });
-            });
-        };
-        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;
-    }
-    validatePlacement() {
-        checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
-    }
-    connectedCallback() {
-        this.root = getRoot(this.host);
-        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);
-        this.popoverRef?.removeEventListener('postToggle', this.handlePostToggle);
-    }
-    componentDidLoad() {
-        this.validatePlacement();
-        if (this.popoverRef) {
-            this.popoverRef.addEventListener('postToggle', this.handlePostToggle);
-        }
-    }
-    /**
-     * Toggles the menu visibility based on its current state.
-     */
-    async toggle(target) {
-        if (this.popoverRef) {
-            await this.popoverRef.toggle(target);
-        }
-        else {
-            console.error('toggle: popoverRef is null or undefined');
-        }
-    }
-    /**
-     * 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);
-        }
-        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();
-        }
-        else {
-            console.error('hide: popoverRef is null or undefined');
-        }
-    }
-    controlKeyDownHandler(e) {
-        const menuItems = this.getSlottedItems();
-        if (!menuItems.length) {
-            return;
-        }
-        let currentIndex = menuItems.findIndex(el => {
-            // Check if the item is currently focused within its rendered scope (document or shadow root)
-            return el === getRoot(el).activeElement;
-        });
-        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:
-                e.preventDefault();
-                currentIndex = menuItems.length - 1;
-                break;
-            case this.KEYCODES.SPACE:
-                this.toggle(this.host);
-                return;
-            case this.KEYCODES.TAB:
-                this.toggle(this.host);
-                break;
-        }
-        if (menuItems[currentIndex]) {
-            menuItems[currentIndex].focus();
-        }
-    }
-    getSlottedItems() {
-        const slot = this.host.shadowRoot.querySelector('slot');
-        const slottedElements = slot ? slot.assignedElements() : [];
-        return (slottedElements
-            // If the element is a slot, get the assigned elements
-            .flatMap(el => (el instanceof HTMLSlotElement ? el.assignedElements() : el))
-            // For each menu item, get any focusable children (e.g., buttons, links)
-            .flatMap(el => Array.from(getFocusableChildren(el))));
-    }
-    render() {
-        return (h(Host, { key: '6d23cab02632b003891301577900c484825f4021', "data-version": version, role: "menu" }, h("post-popovercontainer", { key: '4a0e4ed73449f62ffc1e4bd1c1d3fd73718072bc', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'cabe298c9aeeb6a8d12aaa638a82ac8a2eb2d320', class: "popover-container", part: "popover-container" }, h("slot", { key: 'fe27a3ceda1720b64a77735ef7fe280a4a3d59d9' })))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "placement": ["validatePlacement"]
-    }; }
-    static get style() { return PostMenuStyle0; }
-}, [1, "post-menu", {
-        "placement": [1],
-        "isVisible": [32],
-        "toggle": [64],
-        "show": [64],
-        "hide": [64]
-    }, undefined, {
-        "placement": ["validatePlacement"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-menu", "post-popovercontainer"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-menu":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostMenu);
-            }
-            break;
-        case "post-popovercontainer":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { PostMenu as P, defineCustomElement as d };

package/loaders/post-popover.d.ts

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

package/loaders/post-popover.js

@@ -1,181 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { P as PLACEMENT_TYPES, d as defineCustomElement$2 } from './post-popovercontainer2.js';
-import { v as version } from './package.js';
-import { I as IS_BROWSER } from './breakpoints.js';
-import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './index2.js';
-
-function getAttributeObserver(attribute, handler) {
-    /**
-     * Handle attribute changes and childList changes from the observer
-     * @param {MutationRecord[]} mutationList
-     */
-    function 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 IS_BROWSER ? new MutationObserver(observerHandler) : null;
-}
-
-const postPopoverCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}.btn-close{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;border-radius:var(--post-device-border-radius-round);color:#000;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{background-color:ButtonFace !important}.btn-close:hover{background-color:Highlight !important}}.btn-close{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.btn-close::before{mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:\"\";display:block;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24)}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:#000}.btn-close:disabled{color:#999}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{color:CanvasText;forced-color-adjust:none}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:Highlight}}.btn-close-white{color:#e6e6e6}.btn-close-white:focus,.btn-close-white:not(:disabled):hover,.btn-close-white.pretend-hover{color:#fff}.btn-close-white:disabled{color:#999}*{box-sizing:border-box}:host{display:block}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:min(var(--post-popover-max-width, 280px),100vw)}.popover-content{padding:.5em;flex-grow:1}.btn-close{color:var(--post-scheme-color-surface-default-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:hover{color:HighlightText !important}}";
-const PostPopoverStyle0 = postPopoverCss;
-
-/**
- * @slot default - Slot for placing content inside the popover.
- */
-let popoverInstances = 0;
-const popoverTargetAttribute = 'data-popover-target';
-const globalToggleHandler = (e) => {
-    let currentElement = e.target;
-    // Traverse up the DOM tree to find if any parent has the popover target attribute
-    while (currentElement && !currentElement.getAttribute(popoverTargetAttribute)) {
-        if (currentElement === document.body || !currentElement.parentElement)
-            break;
-        currentElement = currentElement.parentElement;
-    }
-    const popoverTarget = currentElement?.getAttribute(popoverTargetAttribute);
-    if (!popoverTarget || ('key' in e && e.key !== 'Enter'))
-        return;
-    const popover = document.getElementById(popoverTarget);
-    popover?.toggle(currentElement);
-};
-const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends HTMLElement {
-    validatePlacement() {
-        checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
-    }
-    validateCloseButtonCaption() {
-        checkRequiredAndType(this, 'closeButtonCaption', 'string');
-    }
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        // Initialize a mutation observer for patching accessibility features
-        this.triggerObserver = IS_BROWSER
-            ? getAttributeObserver(popoverTargetAttribute, this.patchAccessibilityFeatures)
-            : null;
-        this.placement = 'top';
-        this.closeButtonCaption = undefined;
-        this.arrow = true;
-        this.localBeforeToggleHandler = this.beforeToggleHandler.bind(this);
-    }
-    connectedCallback() {
-        // Set up accessibility patcher and event listeners for the first component
-        if (popoverInstances === 0) {
-            window.addEventListener('pointerup', globalToggleHandler);
-            window.addEventListener('keydown', globalToggleHandler);
-            this.triggerObserver?.observe(document.body, {
-                subtree: true,
-                childList: true,
-                attributeFilter: [popoverTargetAttribute],
-            });
-        }
-        popoverInstances++;
-        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
-    }
-    componentDidLoad() {
-        this.validatePlacement();
-        this.validateCloseButtonCaption();
-        this.popoverRef.addEventListener('beforetoggle', this.localBeforeToggleHandler);
-    }
-    disconnectedCallback() {
-        popoverInstances--;
-        // Remove listeners and observer after the last popover has been destructed
-        if (popoverInstances === 0) {
-            window.removeEventListener('click', globalToggleHandler);
-            window.removeEventListener('keydown', globalToggleHandler);
-            this.triggerObserver?.disconnect();
-        }
-        this.popoverRef.removeEventListener('beforetoggle', this.localBeforeToggleHandler);
-        this.triggers.forEach(trigger => trigger.removeAttribute('aria-expanded'));
-    }
-    /**
-     * Programmatically display the popover
-     * @param target An element with [data-popover-target="id"] where the popover should be shown
-     */
-    async show(target) {
-        this.popoverRef.show(target);
-        console.log(this.popoverRef);
-        target.setAttribute('aria-expanded', 'true');
-    }
-    /**
-     * Programmatically hide this popover
-     */
-    async hide() {
-        this.popoverRef.hide();
-        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
-    }
-    /**
-     * Toggle popover display
-     * @param target An element with [data-popover-target="id"] where the popover should be anchored to
-     * @param force Pass true to always show or false to always hide
-     */
-    async toggle(target, force) {
-        const newState = await this.popoverRef.toggle(target, force);
-        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
-        target.setAttribute('aria-expanded', `${newState}`);
-    }
-    get triggers() {
-        return document.querySelectorAll(`[${popoverTargetAttribute}="${this.host.id}"]`);
-    }
-    beforeToggleHandler() {
-        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
-    }
-    patchAccessibilityFeatures(trigger) {
-        const force = trigger.hasAttribute(popoverTargetAttribute);
-        trigger.setAttribute('aria-expanded', force ? 'false' : null);
-    }
-    render() {
-        return (h(Host, { key: '3dc7041d2208523956f62fedcf1dfbdee5302006', "data-version": version }, h("post-popovercontainer", { key: 'c4a93a401ab5f6605dec49e509c5188bf05004be', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '9c4d4c36c811ac443e98716c3b013de97eaa624d', class: "popover-container" }, h("div", { key: 'e256d82cb50ddfd7af6368c707afd0b1e5c8e7aa', class: "popover-content" }, h("slot", { key: '7da07c358162b0e5bfd13561d5ac1e94d028a917' })), h("button", { key: 'c1fef4bf8383e92d34367966ae980983c77e15e4', class: "btn-close", onClick: () => this.hide() }, h("span", { key: '066b77e1883d64b937319a20e0e6e35fa0168d48', class: "visually-hidden" }, this.closeButtonCaption))))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "placement": ["validatePlacement"],
-        "closeButtonCaption": ["validateCloseButtonCaption"]
-    }; }
-    static get style() { return PostPopoverStyle0; }
-}, [1, "post-popover", {
-        "placement": [1],
-        "closeButtonCaption": [1, "close-button-caption"],
-        "arrow": [4],
-        "show": [64],
-        "hide": [64],
-        "toggle": [64]
-    }, undefined, {
-        "placement": ["validatePlacement"],
-        "closeButtonCaption": ["validateCloseButtonCaption"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-popover", "post-popovercontainer"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-popover":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostPopover$1);
-            }
-            break;
-        case "post-popovercontainer":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PostPopover = PostPopover$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostPopover, defineCustomElement };

package/loaders/post-popovercontainer.d.ts

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

package/loaders/post-popovercontainer.js

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