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

package/dist/components/post-footer2.js

@@ -1,90 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { b as checkRequiredAndType } from './index2.js';
-import { b as breakpoint } from './breakpoints.js';
-import { d as defineCustomElement$4 } from './post-accordion-item2.js';
-import { d as defineCustomElement$3 } from './post-collapsible2.js';
-import { d as defineCustomElement$2 } from './post-collapsible-trigger2.js';
-import { d as defineCustomElement$1 } from './post-icon2.js';
-
-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)}";
-const PostFooterStyle0 = postFooterCss;
-
-const PostFooter = /*@__PURE__*/ proxyCustomElement(class PostFooter extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.breakpointChange = (e) => {
-            this.isMobile = e.detail === 'mobile';
-        };
-        this.label = undefined;
-        this.isMobile = breakpoint.get('name') === 'mobile';
-    }
-    validateLabel() {
-        checkRequiredAndType(this, 'label', 'string');
-    }
-    componentWillLoad() {
-        this.validateLabel();
-    }
-    connectedCallback() {
-        window.addEventListener('postBreakpoint:name', this.breakpointChange);
-    }
-    disconnectedCallback() {
-        window.removeEventListener('postBreakpoint:name', this.breakpointChange);
-    }
-    renderAccordion() {
-        return (h("div", { class: "footer-grid" }, h("post-accorddion", { "heading-level": "3", multiple: true }, h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-1-title" })), h("slot", { name: "grid-1" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-2-title" })), h("slot", { name: "grid-2" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-3-title" })), h("slot", { name: "grid-3" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-4-title" })), h("slot", { name: "grid-4" })))));
-    }
-    renderGrid() {
-        return (h("div", { class: "footer-grid" }, h("div", null, h("slot", { name: "grid-1" })), h("div", null, h("slot", { name: "grid-2" })), h("div", null, h("slot", { name: "grid-3" })), h("div", null, h("slot", { name: "grid-4" }))));
-    }
-    render() {
-        return (h(Host, { key: 'bc281bf0152baa3afd8c84cffabfa30ce1e45078', "data-version": version }, h("footer", { key: '601562fd03a55f5f6c70e562fcdbd71d33806472' }, h("h2", { key: 'e2af67c5474ea7daa0f3a2d4c6e77e474cb826be', class: "visually-hidden" }, this.label), h("div", { key: '516aaf268492edc20f360ffa6e65a6cfd523212a', class: "footer-container" }, this.isMobile ? this.renderAccordion() : this.renderGrid(), h("div", { key: '9d375ab468bc83f8618e8182f9b378eed3f2f871', class: "footer-column" }, h("div", { key: '64bf6a7bbe203e585a21744323bd9e64cee2ef4f', class: "footer-socialmedia" }, h("slot", { key: 'f8c4ab3652fdbfd48db9906ea9b0a45cd9b9f034', name: "socialmedia" })), h("div", { key: '891558211351676a8917657f69c7d51d0e8d147c', class: "footer-app" }, h("slot", { key: 'e94a1a3ab56e7aa61026efa6c011fc507906147d', name: "app" }))), h("div", { key: 'dd1d69c520d0f56882c04294695dd300ed5b77a9', class: "footer-businesssectors" }, h("slot", { key: 'f2b5e4a217263815aac8ea44b30ea05081cfce53', name: "businesssectors" })), h("div", { key: '53d5f33b34c3e4a2b3563f576a16206a63a77673', class: "footer-meta" }, h("slot", { key: 'd18780dd7543d4e50f833550fcd3976d98186e86', name: "meta" })), h("div", { key: '4e057e39bf528a931de27f70d86ee938599274d8', class: "footer-copyright" }, h("slot", { key: '0dd9926c1d7ca418260f973de6eda41726ab54c0', name: "copyright" }))))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "label": ["validateLabel"]
-    }; }
-    static get style() { return PostFooterStyle0; }
-}, [1, "post-footer", {
-        "label": [1],
-        "isMobile": [32]
-    }, undefined, {
-        "label": ["validateLabel"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-footer", "post-accordion-item", "post-collapsible", "post-collapsible-trigger", "post-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-footer":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostFooter);
-            }
-            break;
-        case "post-accordion-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "post-collapsible":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "post-collapsible-trigger":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "post-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { PostFooter as P, defineCustomElement as d };

package/dist/components/post-header2.js

@@ -1,397 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { b as breakpoint } from './breakpoints.js';
-import { a as slideUp, s as slideDown } from './slide.js';
-import { g as getFocusableChildren } from './get-focusable-children.js';
-import { e as eventGuard } from './event-guard.js';
-
-/* eslint-disable no-undefined,no-param-reassign,no-shadow */
-
-/**
- * Throttle execution of a function. Especially useful for rate limiting
- * execution of handlers on events like resize and scroll.
- *
- * @param {number} delay -                  A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher)
- *                                            are most useful.
- * @param {Function} callback -               A function to be executed after delay milliseconds. The `this` context and all arguments are passed through,
- *                                            as-is, to `callback` when the throttled-function is executed.
- * @param {object} [options] -              An object to configure options.
- * @param {boolean} [options.noTrailing] -   Optional, defaults to false. If noTrailing is true, callback will only execute every `delay` milliseconds
- *                                            while the throttled-function is being called. If noTrailing is false or unspecified, callback will be executed
- *                                            one final time after the last throttled-function call. (After the throttled-function has not been called for
- *                                            `delay` milliseconds, the internal counter is reset).
- * @param {boolean} [options.noLeading] -   Optional, defaults to false. If noLeading is false, the first throttled-function call will execute callback
- *                                            immediately. If noLeading is true, the first the callback execution will be skipped. It should be noted that
- *                                            callback will never executed if both noLeading = true and noTrailing = true.
- * @param {boolean} [options.debounceMode] - If `debounceMode` is true (at begin), schedule `clear` to execute after `delay` ms. If `debounceMode` is
- *                                            false (at end), schedule `callback` to execute after `delay` ms.
- *
- * @returns {Function} A new, throttled, function.
- */
-function throttle (delay, callback, options) {
-  var _ref = options || {},
-    _ref$noTrailing = _ref.noTrailing,
-    noTrailing = _ref$noTrailing === void 0 ? false : _ref$noTrailing,
-    _ref$noLeading = _ref.noLeading,
-    noLeading = _ref$noLeading === void 0 ? false : _ref$noLeading,
-    _ref$debounceMode = _ref.debounceMode,
-    debounceMode = _ref$debounceMode === void 0 ? undefined : _ref$debounceMode;
-  /*
-   * After wrapper has stopped being called, this timeout ensures that
-   * `callback` is executed at the proper times in `throttle` and `end`
-   * debounce modes.
-   */
-  var timeoutID;
-  var cancelled = false;
-
-  // Keep track of the last time `callback` was executed.
-  var lastExec = 0;
-
-  // Function to clear existing timeout
-  function clearExistingTimeout() {
-    if (timeoutID) {
-      clearTimeout(timeoutID);
-    }
-  }
-
-  // Function to cancel next exec
-  function cancel(options) {
-    var _ref2 = options || {},
-      _ref2$upcomingOnly = _ref2.upcomingOnly,
-      upcomingOnly = _ref2$upcomingOnly === void 0 ? false : _ref2$upcomingOnly;
-    clearExistingTimeout();
-    cancelled = !upcomingOnly;
-  }
-
-  /*
-   * The `wrapper` function encapsulates all of the throttling / debouncing
-   * functionality and when executed will limit the rate at which `callback`
-   * is executed.
-   */
-  function wrapper() {
-    for (var _len = arguments.length, arguments_ = new Array(_len), _key = 0; _key < _len; _key++) {
-      arguments_[_key] = arguments[_key];
-    }
-    var self = this;
-    var elapsed = Date.now() - lastExec;
-    if (cancelled) {
-      return;
-    }
-
-    // Execute `callback` and update the `lastExec` timestamp.
-    function exec() {
-      lastExec = Date.now();
-      callback.apply(self, arguments_);
-    }
-
-    /*
-     * If `debounceMode` is true (at begin) this is used to clear the flag
-     * to allow future `callback` executions.
-     */
-    function clear() {
-      timeoutID = undefined;
-    }
-    if (!noLeading && debounceMode && !timeoutID) {
-      /*
-       * Since `wrapper` is being called for the first time and
-       * `debounceMode` is true (at begin), execute `callback`
-       * and noLeading != true.
-       */
-      exec();
-    }
-    clearExistingTimeout();
-    if (debounceMode === undefined && elapsed > delay) {
-      if (noLeading) {
-        /*
-         * In throttle mode with noLeading, if `delay` time has
-         * been exceeded, update `lastExec` and schedule `callback`
-         * to execute after `delay` ms.
-         */
-        lastExec = Date.now();
-        if (!noTrailing) {
-          timeoutID = setTimeout(debounceMode ? clear : exec, delay);
-        }
-      } else {
-        /*
-         * In throttle mode without noLeading, if `delay` time has been exceeded, execute
-         * `callback`.
-         */
-        exec();
-      }
-    } else if (noTrailing !== true) {
-      /*
-       * In trailing throttle mode, since `delay` time has not been
-       * exceeded, schedule `callback` to execute `delay` ms after most
-       * recent execution.
-       *
-       * If `debounceMode` is true (at begin), schedule `clear` to execute
-       * after `delay` ms.
-       *
-       * If `debounceMode` is false (at end), schedule `callback` to
-       * execute after `delay` ms.
-       */
-      timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
-    }
-  }
-  wrapper.cancel = cancel;
-
-  // Return the wrapper function.
-  return wrapper;
-}
-
-const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative;--post-global-header-top:calc( (var(--post-global-header-height) - var(--post-global-header-reduced-height)) * -1 );--post-local-header-top:calc( -1 * (var(--post-local-header-height) - var(--post-main-navigation-height)) + var(--post-global-header-reduced-height) );--post-logo-height:calc(var(--post-global-header-height) - var(--post-header-scroll-top, 0px));--post-global-controls-top:calc(min((var(--post-header-scroll-top) / 4), 20px) * -1)}:host:has(.global-sub>*:not(.logo):focus-within),:host:has(.local-sub:focus-within){--post-global-header-top:0;--post-local-header-top:var(--post-global-header-height);--post-logo-height:var(--post-global-header-height);--post-global-controls-top:0}@media screen and (max-width: 1023.98px){:host{position:fixed;inset:0;bottom:auto}}: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(--post-global-header-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:4;inset-block-start:0;position:relative}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:12px;inset-block-start:var(--post-global-header-top);transition:inset-block-start .2s ease-in-out}}.global-sub{display:flex;align-items:center;gap:24px}@media screen and (min-width: 1024px){.global-sub:not(:has(.logo)){position:relative;transition:inset-block-start .2s ease-in-out;inset-block-start:var(--post-global-controls-top)}}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--post-global-header-height);width:var(--post-global-header-height);min-height:var(--post-global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{transition:height .2 ease-in-out;height:var(--post-logo-height)}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-inline-start: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(--post-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;inset-block-end:-1px;z-index:1}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.local-header::after{background-color:Highlight}}@media screen and (min-width: 1024px){.local-header{z-index:3;inset-block-start:var(--post-local-header-top);padding-block-start:18px;box-shadow:var(--post-device-elevation-300);transition:box-shadow .2s ease-in-out,inset-block-start .2s ease-in-out}}@media screen and (max-width: 1023.98px){.local-header{z-index:3;position:relative;padding-block:8px;flex-wrap:wrap;gap:12px}.local-header.local-header-mobile-extended::after{inset-block-end:0}.local-header:not(.local-header-mobile-extended){box-shadow:var(--post-device-elevation-300)}}.local-sub{margin-inline-end:8px}@media screen and (max-width: 1023.98px){.local-sub{margin-inline-end:4px}}::slotted(.list-inline){margin:0 !important;z-index:3 !important;position:relative !important}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{inset-block-start:var(--post-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:sticky;z-index:2;inset-inline:0;inset-block-start:var(--post-header-height)}.mobile-menu{background-color:#fafafa}::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>div{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height))}.navigation.extended.megadropdown-open>div{overflow-y:hidden}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}::slotted(post-mainnavigation){gap:32px}.navigation-footer{background-color:#f0efed;gap:24px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}";
-const PostHeaderStyle0 = postHeaderCss;
-
-const PostHeader = /*@__PURE__*/ proxyCustomElement(class PostHeader extends HTMLElement {
-    get scrollParent() {
-        const frozenScrollParent = document.querySelector('[data-post-scroll-locked]');
-        if (frozenScrollParent)
-            return frozenScrollParent;
-        let element = this.host.parentElement;
-        while (element) {
-            const overflow = getComputedStyle(element).overflowY;
-            if (['auto', 'scroll'].includes(overflow)) {
-                return element;
-            }
-            element = element.parentElement;
-        }
-        return document.body;
-    }
-    lockBody(newValue, _oldValue, propName) {
-        const scrollParent = this.scrollParent;
-        const mobileMenuExtended = propName === 'mobileMenuExtended' ? newValue : this.mobileMenuExtended;
-        if (this.device !== 'desktop' && mobileMenuExtended) {
-            scrollParent.setAttribute('data-post-scroll-locked', '');
-            this.host.addEventListener('keydown', this.keyboardHandler);
-        }
-        else {
-            scrollParent.removeAttribute('data-post-scroll-locked');
-            this.host.removeEventListener('keydown', this.keyboardHandler);
-        }
-    }
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.throttledResize = throttle(50, () => this.updateLocalHeaderHeight());
-        this.breakpointChange = (e) => {
-            this.device = e.detail;
-            this.switchLanguageSwitchMode();
-            if (this.device === 'desktop' && this.mobileMenuExtended) {
-                this.closeMobileMenu();
-            }
-        };
-        this.megadropdownStateHandler = (event) => {
-            eventGuard(this.host, event, {
-                targetLocalName: 'post-megadropdown',
-                delegatorSelector: 'post-header',
-            }, () => {
-                this.megadropdownOpen = event.detail.isVisible;
-            });
-        };
-        this.device = breakpoint.get('name');
-        this.mobileMenuExtended = false;
-        this.megadropdownOpen = false;
-        this.handleScrollEvent = this.handleScrollEvent.bind(this);
-        this.updateScrollParentHeight = this.updateScrollParentHeight.bind(this);
-        this.updateLocalHeaderHeight = this.updateLocalHeaderHeight.bind(this);
-        this.keyboardHandler = this.keyboardHandler.bind(this);
-        this.handleLinkClick = this.handleLinkClick.bind(this);
-    }
-    connectedCallback() {
-        window.addEventListener('resize', this.throttledResize, { passive: true });
-        window.addEventListener('scroll', this.handleScrollEvent, {
-            passive: true,
-        });
-        this.scrollParent.addEventListener('scroll', this.handleScrollEvent, {
-            passive: true,
-        });
-        document.addEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
-        this.host.addEventListener('click', this.handleLinkClick);
-        window.addEventListener('postBreakpoint:name', this.breakpointChange);
-        this.switchLanguageSwitchMode();
-        this.updateLocalHeaderHeight();
-        this.handleScrollParentResize();
-        this.lockBody(false, this.mobileMenuExtended, 'mobileMenuExtended');
-    }
-    componentWillRender() {
-        this.handleScrollEvent();
-    }
-    componentDidRender() {
-        this.getFocusableElements();
-        this.handleLocalHeaderResize();
-    }
-    // Clean up possible side effects when post-header is disconnected
-    disconnectedCallback() {
-        const scrollParent = this.scrollParent;
-        window.removeEventListener('postBreakpoint:name', this.breakpointChange);
-        window.removeEventListener('resize', this.throttledResize);
-        window.removeEventListener('scroll', this.handleScrollEvent);
-        scrollParent.removeEventListener('scroll', this.handleScrollEvent);
-        document.removeEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
-        this.host.removeEventListener('keydown', this.keyboardHandler);
-        this.host.removeEventListener('click', this.handleLinkClick);
-        if (this.scrollParentResizeObserver) {
-            this.scrollParentResizeObserver.disconnect();
-            this.scrollParentResizeObserver = null;
-        }
-        if (this.localHeaderResizeObserver) {
-            this.localHeaderResizeObserver.disconnect();
-            this.localHeaderResizeObserver = null;
-        }
-        this.mobileMenuExtended = false;
-    }
-    async closeMobileMenu() {
-        this.mobileMenuAnimation.finish();
-        const menuButton = this.getMenuButton();
-        if (menuButton) {
-            menuButton.toggled = false;
-        }
-        this.mobileMenuExtended = false;
-    }
-    /**
-     * Toggles the mobile navigation.
-     */
-    async toggleMobileMenu(force) {
-        if (this.device === 'desktop')
-            return;
-        this.mobileMenuAnimation = this.mobileMenuExtended
-            ? slideUp(this.mobileMenu)
-            : slideDown(this.mobileMenu);
-        // Update the state of the toggle button
-        const menuButton = this.host.querySelector('post-togglebutton');
-        menuButton.toggled = force ?? !this.mobileMenuExtended;
-        // Toggle menu visibility before it slides down and after it slides back up
-        if (this.mobileMenuExtended)
-            await this.mobileMenuAnimation.finished;
-        this.mobileMenuExtended = force ?? !this.mobileMenuExtended;
-        if (this.mobileMenuExtended === false) {
-            Array.from(this.host.querySelectorAll('post-megadropdown')).forEach(dropdown => {
-                dropdown.hide(false, true);
-            });
-        }
-    }
-    // Get all the focusable elements in the post-header mobile menu
-    getFocusableElements() {
-        // Get elements in the correct order (different as the DOM order)
-        const focusableEls = [
-            ...Array.from(this.host.querySelectorAll('.list-inline:not([slot="meta-navigation"]) > li')),
-            ...Array.from(this.host.querySelectorAll('nav > post-list > div > post-list-item, post-mainnavigation > .back-button, post-megadropdown-trigger')),
-            ...Array.from(this.host.querySelectorAll('.list-inline[slot="meta-navigation"] > li, post-language-option')),
-        ];
-        // Add the main toggle menu button to the list of focusable children
-        const focusableChildren = [
-            this.host.querySelector('post-togglebutton'),
-            ...focusableEls.flatMap(el => Array.from(getFocusableChildren(el))),
-        ];
-        this.firstFocusableEl = focusableChildren[0];
-        this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
-    }
-    getMenuButton() {
-        return this.host.querySelector('post-togglebutton');
-    }
-    keyboardHandler(e) {
-        if (e.key === 'Tab' && this.mobileMenuExtended) {
-            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();
-            }
-        }
-    }
-    handleScrollEvent() {
-        const scrollTop = this.scrollParent === document.body ? window.scrollY : this.scrollParent.scrollTop;
-        document.documentElement.style.setProperty('--post-header-scroll-top', `${scrollTop}px`);
-    }
-    updateLocalHeaderHeight() {
-        const localHeaderHeight = this.host.shadowRoot.querySelector('.local-header')?.clientHeight || 0;
-        document.documentElement.style.setProperty('--post-local-header-height', `${localHeaderHeight}px`);
-    }
-    updateScrollParentHeight() {
-        this.host.style.setProperty('--post-header-scroll-parent-height', `${this.scrollParent.clientHeight}px`);
-    }
-    handleLinkClick(event) {
-        const target = event.target;
-        const isLinkInMainNav = target.closest('post-mainnavigation a');
-        const isLinkInMegadropdown = target.closest('post-megadropdown a');
-        if (!isLinkInMainNav && !isLinkInMegadropdown) {
-            return;
-        }
-        if (this.mobileMenuExtended && (isLinkInMainNav || isLinkInMegadropdown)) {
-            this.toggleMobileMenu(false);
-        }
-        if (this.device === 'desktop' && isLinkInMegadropdown) {
-            const megadropdownLink = target.closest('post-megadropdown a');
-            if (megadropdownLink) {
-                target.closest('post-megadropdown').hide(true);
-            }
-        }
-    }
-    handleScrollParentResize() {
-        if (this.scrollParent) {
-            this.scrollParentResizeObserver = new ResizeObserver(this.updateScrollParentHeight);
-            this.scrollParentResizeObserver.observe(this.scrollParent);
-        }
-    }
-    handleLocalHeaderResize() {
-        const localHeader = this.host.shadowRoot.querySelector('.local-header');
-        if (localHeader && !this.localHeaderResizeObserver) {
-            this.localHeaderResizeObserver = new ResizeObserver(this.updateLocalHeaderHeight);
-            this.localHeaderResizeObserver.observe(localHeader);
-        }
-    }
-    switchLanguageSwitchMode() {
-        const variant = this.device === 'desktop' ? 'menu' : 'list';
-        Array.from(this.host.querySelectorAll('post-language-switch')).forEach(languageSwitch => {
-            languageSwitch?.setAttribute('variant', variant);
-        });
-    }
-    renderNavigation() {
-        const navigationClasses = ['navigation'];
-        const mobileMenuScrollTop = this.mobileMenu?.scrollTop ?? 0;
-        if (this.mobileMenuExtended) {
-            navigationClasses.push('extended');
-        }
-        if (this.megadropdownOpen) {
-            navigationClasses.push('megadropdown-open');
-        }
-        return (h("div", { class: navigationClasses.join(' '), style: { '--post-header-navigation-current-inset': `${mobileMenuScrollTop}px` } }, h("div", { class: "mobile-menu", ref: el => (this.mobileMenu = el) }, 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" }))))));
-    }
-    render() {
-        return (h(Host, { key: 'f48a0da1abf27c8e9ebaf069f56b12b9705ae8ba', "data-version": version }, h("div", { key: 'f427fe866ae03d01882f983953e316db8ce61b3f', class: "global-header" }, h("div", { key: '1681be355fa453dfe8c7f4e73d74dd52a7dc847c', class: "global-sub" }, h("div", { key: '985ee91b791c24947564ac8af001d7a1b3ef04cc', class: "logo" }, h("slot", { key: 'e961d5ad800836001ba735ab482e05fe722867ee', name: "post-logo" }))), h("div", { key: '353c38aa0dffa907d1dd55c889454ae373ab656b', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '6c1d0b4b518bd35021cf45eceb764975a1f51248', name: "meta-navigation" }), h("slot", { key: 'b814a775d1f12ec1e49e720733e90718ee0d64d3', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'dda35455f620e178e141aca1ea103e62fe8e7fee', name: "post-language-switch" }), h("div", { key: '3c5dfdc7168af7f659b6b9ef62ba01451b257282', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '5b90487f039ac8fe5d8fe7c20ca2851e2c2abc45', name: "post-togglebutton" })))), h("div", { key: '7efcbd5e59afafd9fc3fbbe55961bc694c3eeb88', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '128925f3547041b2f6890ad9dde7e0c598dbcc22', name: "title" }), h("div", { key: 'eaa2bb08500efd23e1593dee585fe7d743986d5d', class: "local-sub" }, h("slot", { key: 'ddf6eed8f5303976464899c31c7cb8aa378acd37', name: "local-controls" }), h("slot", { key: 'f64f7ba2b47c267c3a52b356a48bd990b4da42d7' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "device": ["lockBody"],
-        "mobileMenuExtended": ["lockBody"]
-    }; }
-    static get style() { return PostHeaderStyle0; }
-}, [1, "post-header", {
-        "device": [32],
-        "mobileMenuExtended": [32],
-        "megadropdownOpen": [32],
-        "toggleMobileMenu": [64]
-    }, undefined, {
-        "device": ["lockBody"],
-        "mobileMenuExtended": ["lockBody"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-header"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-header":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostHeader);
-            }
-            break;
-    } });
-}
-
-export { PostHeader as P, defineCustomElement as d };

package/dist/components/post-icon2.js

@@ -1,156 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { I as IS_BROWSER } from './breakpoints.js';
-import { a as checkEmptyOrOneOf, d as checkEmptyOrType, b as checkRequiredAndType } from './index2.js';
-import { v as version } from './package.js';
-
-const postIconCss = ":host{display:inline-block;width:1em;height:1em;vertical-align:-0.15em}span{display:block;width:100%;height:100%;fill:currentColor;forced-color-adjust:preserve-parent-color;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}";
-const PostIconStyle0 = postIconCss;
-
-const CDN_URL = `https://unpkg.com/@swisspost/design-system-icons@${version}/public/post-icons/`;
-const ANIMATION_NAMES = [
-    'cylon',
-    'cylon-vertical',
-    'spin',
-    'spin-reverse',
-    'fade',
-    'throb',
-];
-const ANIMATION_KEYS = [...ANIMATION_NAMES];
-const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.animation = undefined;
-        this.base = undefined;
-        this.flipH = false;
-        this.flipV = false;
-        this.name = undefined;
-        this.rotate = undefined;
-        this.scale = undefined;
-    }
-    validateAnimation() {
-        checkEmptyOrOneOf(this, 'animation', ANIMATION_KEYS);
-    }
-    validateBase() {
-        checkEmptyOrType(this, 'base', 'string');
-    }
-    validateName() {
-        checkRequiredAndType(this, 'name', 'string');
-    }
-    validateRotate() {
-        checkEmptyOrType(this, 'rotate', 'number');
-    }
-    validateScale() {
-        checkEmptyOrType(this, 'scale', 'number');
-    }
-    // Construct the icon url from different possible sources
-    getUrl() {
-        let url;
-        const file = `${this.name}.svg`;
-        // the first definition object which defines a domain, will be used to set the domain of the file url
-        // the first definition object which defines a slug, will be used to set the slug of the file url
-        const urlDefinitions = [this.getUrlDefinition(this.base, 'both')];
-        if (IS_BROWSER) {
-            urlDefinitions.push(this.getUrlDefinition(document.head
-                .querySelector('meta[name="design-system-settings"][data-post-icon-base]')
-                ?.getAttribute('data-post-icon-base'), 'relative'));
-            urlDefinitions.push(this.getUrlDefinition(document.querySelector('base[href]')?.getAttribute('href'), 'both'));
-        }
-        // in case no definition defines a domain, a relative url is used to load the icon
-        const origin = urlDefinitions.find(d => d.definesDomain)?.url?.origin;
-        // in case no definition defines a slug either, the cdn url is used as a fallback
-        const slug = urlDefinitions.find(d => d.definesSlug)?.url?.pathname;
-        if (origin && slug) {
-            url = `${origin}${slug}${file}`;
-        }
-        else if (!origin && slug) {
-            url = `${slug}${file}`;
-        }
-        else {
-            url = `${CDN_URL}${file}`;
-        }
-        return url;
-    }
-    getUrlDefinition(url, allow) {
-        return {
-            url: this.getUrlObject(url),
-            definesDomain: allow !== 'relative' ? this.definesDomain(url) : false,
-            definesSlug: allow !== 'absolute' ? this.definesSlug(url) : false,
-        };
-    }
-    getUrlObject(url) {
-        if (url) {
-            url = url?.endsWith('/') ? url : `${url}/`;
-            return new URL(url, 'https://url.base');
-        }
-        else {
-            return null;
-        }
-    }
-    definesDomain(url) {
-        return url ? /^https?:\/\//.test(url) : false;
-    }
-    definesSlug(url) {
-        return Boolean(/^\/.+/.test(this.getUrlObject(url)?.pathname));
-    }
-    getStyles() {
-        const url = this.getUrl();
-        return Object.entries({
-            '-webkit-mask-image': `url(${url})`,
-            'mask-image': `url('${url}')`,
-            'transform': (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
-                (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
-        })
-            .filter(([_key, value]) => value !== null)
-            .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
-    }
-    componentDidLoad() {
-        this.validateBase();
-        this.validateName();
-        this.validateScale();
-        this.validateRotate();
-        this.validateAnimation();
-    }
-    render() {
-        return (h(Host, { key: 'bc29680e4693c5a18416de667c826c1d57075e15', "data-version": version }, h("span", { key: 'b49082668fa3a97bba5a2ffe791c51e9c56deb4e', style: this.getStyles() })));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "animation": ["validateAnimation"],
-        "base": ["validateBase"],
-        "name": ["validateName"],
-        "rotate": ["validateRotate"],
-        "scale": ["validateScale"]
-    }; }
-    static get style() { return PostIconStyle0; }
-}, [1, "post-icon", {
-        "animation": [1],
-        "base": [1],
-        "flipH": [4, "flip-h"],
-        "flipV": [4, "flip-v"],
-        "name": [513],
-        "rotate": [2],
-        "scale": [2]
-    }, undefined, {
-        "animation": ["validateAnimation"],
-        "base": ["validateBase"],
-        "name": ["validateName"],
-        "rotate": ["validateRotate"],
-        "scale": ["validateScale"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-icon":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostIcon);
-            }
-            break;
-    } });
-}
-
-export { PostIcon as P, defineCustomElement as d };