@swisspost/design-system-components 10.0.0-next.55 → 10.0.0-next.57

package/dist/collection/utils/event-from.js

@@ -58,7 +58,7 @@ export function EventFrom(tag, option) {
             // Create hidden storage for original method
             Object.defineProperty(target, privateKey, {
                 writable: true,
-                configurable: true
+                configurable: true,
             });
             // Replace property with getter/setter
             Object.defineProperty(target, propertyKey, {
@@ -82,7 +82,7 @@ export function EventFrom(tag, option) {
                     }
                 },
                 configurable: true,
-                enumerable: true
+                enumerable: true,
             });
         }
     };

package/dist/collection/utils/get-focusable-children.js

@@ -27,32 +27,40 @@ export function getFocusableChildren(element) {
     const focusableChildren = element.querySelectorAll(`${focusableSelector}:not(${focusDisablingSelector})`);
     return Array.from(focusableChildren).filter(isVisible);
 }
-// Searches deeper accross shadowDom
-export function getDeepFocusableChildren(element) {
-    const results = [];
-    function traverse(node) {
+// Searches deeper across shadow DOM
+export function getDeepFocusableChildren(el, filter, visited = new Set()) {
+    if (visited.has(el))
+        return [];
+    visited.add(el);
+    let nodes = [];
+    // SLOT
+    if (el instanceof HTMLSlotElement) {
+        const assigned = el.assignedElements({ flatten: true });
+        nodes = assigned.length ? assigned : Array.from(el.children);
+    }
+    // SHADOW ROOT
+    else if (el instanceof HTMLElement && el.shadowRoot) {
+        nodes = Array.from(el.shadowRoot.children);
+    }
+    // NORMAL ELEMENT
+    else if (el instanceof Element) {
+        nodes = Array.from(el.children);
+    }
+    if (filter) {
+        nodes = nodes.filter(filter);
+    }
+    const focusableElements = [];
+    for (const node of nodes) {
         if (isElementFocusable(node)) {
-            results.push(node);
-        }
-        if (node instanceof HTMLElement && node.shadowRoot) {
-            traverse(node.shadowRoot);
-        }
-        for (const child of Array.from(node.children)) {
-            traverse(child);
-        }
-        if (node instanceof HTMLElement) {
-            for (const slot of Array.from(node.querySelectorAll('slot'))) {
-                for (const el of slot.assignedElements({ flatten: true })) {
-                    traverse(el);
-                }
-            }
+            focusableElements.push(node);
+            continue;
         }
+        focusableElements.push(...getDeepFocusableChildren(node, filter, visited));
     }
-    traverse(element);
-    return results;
+    return focusableElements;
 }
 function isVisible(el) {
-    const style = window.getComputedStyle(el.parentElement);
+    const style = window.getComputedStyle(el);
     return style.display !== 'none' && style.visibility !== 'hidden';
 }
 function isElementFocusable(node) {

package/dist/collection/utils/is-motion-reduced.js

@@ -1,4 +1,4 @@
 import { IS_BROWSER } from "./environment";
 export function isMotionReduced() {
-    return IS_BROWSER ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;
+    return IS_BROWSER ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : true;
 }

package/dist/collection/utils/tests/environment/hydrate-app-helper.js

@@ -0,0 +1,16 @@
+export async function getAppEnv() {
+    global.IS_HYDRATEAPP_SERVERTEST = true;
+    // keep this, to have runtime-only import (otherwise the build fails)
+    const HYDRATE_ID = '@swisspost/design-system-components/hydrate';
+    const hydrateApp = await import(HYDRATE_ID);
+    const results = await hydrateApp.renderToString('<post-env-test></post-env-test>');
+    const IS_BROWSER = /data-browser="(true|false)"/.exec(results.html)?.[1] === 'true';
+    const IS_SERVER = /data-server="(true|false)"/.exec(results.html)?.[1] === 'true';
+    return {
+        IS_BROWSER,
+        IS_SERVER,
+    };
+}
+export function afterTestCleanup() {
+    delete global.IS_HYDRATEAPP_SERVERTEST;
+}

package/dist/collection/utils/tests/environment/post-env-test.js

@@ -0,0 +1,9 @@
+import { h } from "@stencil/core";
+import { IS_BROWSER, IS_SERVER } from "../../environment";
+export class PostEnvTest {
+    render() {
+        return h("div", { key: 'db3a159881c2c955d8e64b8fcc3a0a220cd20d66', "data-browser": String(IS_BROWSER), "data-server": String(IS_SERVER) });
+    }
+    static get is() { return "post-env-test"; }
+    static get encapsulation() { return "shadow"; }
+}

package/dist/component-names.json

@@ -14,11 +14,9 @@
     "post-footer",
     "post-header",
     "post-icon",
-    "post-language-option",
-    "post-language-switch",
+    "post-language-menu",
+    "post-language-menu-item",
     "post-linkarea",
-    "post-list",
-    "post-list-item",
     "post-logo",
     "post-mainnavigation",
     "post-megadropdown",
@@ -26,13 +24,14 @@
     "post-menu",
     "post-menu-item",
     "post-menu-trigger",
+    "post-pagination",
     "post-popover",
     "post-popover-trigger",
     "post-popovercontainer",
     "post-rating",
     "post-stepper",
     "post-stepper-item",
-    "post-tab-header",
+    "post-tab-item",
     "post-tab-panel",
     "post-tabs",
     "post-togglebutton",

package/dist/components/breakpoints.js

@@ -1,178 +1 @@
-const IS_SERVER = typeof window === 'undefined';
-const IS_BROWSER = !IS_SERVER;
-
-/* 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 = {},
-    _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;
-}
-
-class Breakpoint {
-    constructor() {
-        this.breakpoints = [
-            { key: 'xl', device: 'desktop', minWidth: 1280 },
-            { key: 'lg', device: 'desktop', minWidth: 1024 },
-            { key: 'md', device: 'tablet', minWidth: 780 },
-            { key: 'sm', device: 'tablet', minWidth: 600 },
-            { key: 'xs', device: 'mobile', minWidth: 0 },
-        ];
-        this.updateCurrentBreakpoint = throttle(50, (options = { emitEvents: true }) => {
-            const previousBreakpoint = this.currentBreakpoint;
-            const newBreakpoint = this.breakpoints.find(breakpoint => {
-                return breakpoint.minWidth <= innerWidth;
-            });
-            if (!newBreakpoint)
-                return;
-            this.currentBreakpoint = newBreakpoint;
-            if (!options.emitEvents)
-                return;
-            Object.keys(this.currentBreakpoint)
-                .filter(key => !previousBreakpoint || this.currentBreakpoint[key] !== previousBreakpoint[key])
-                .forEach((key) => this.dispatchEvent(key));
-        });
-        if (IS_SERVER)
-            return;
-        this.updateCurrentBreakpoint({ emitEvents: false });
-        window.addEventListener('resize', () => this.updateCurrentBreakpoint(), { passive: true });
-    }
-    dispatchEvent(property) {
-        if (IS_SERVER)
-            return;
-        window.dispatchEvent(new CustomEvent(`postBreakpoint:${property}`, { detail: this.currentBreakpoint[property] }));
-    }
-    get(property) {
-        this.updateCurrentBreakpoint({ emitEvents: false });
-        return this.currentBreakpoint[property];
-    }
-}
-const breakpoint = new Breakpoint();
-
-export { IS_BROWSER as I, breakpoint as b, throttle as t };
+import{a as t}from"./environment.js";const o=[void 0,null,"",NaN];function e(t){return o.some((o=>o===t))}function n(t){return(o,n,...i)=>{const s=o.host.localName,c=o[n],r=`The prop \`${String(n)}\` of the \`${s}\` component is not defined.`;if(e(c))throw new Error(r);t(o,n,...i)}}function i(t,o,e){const n=t.host.localName,i=t[o],s=`The prop \`${String(o)}\` of the \`${n}\` component must be one of the following values: ${e.join(", ")}.`;e.includes(i)||console.error(s)}function s(t,o,e){const n=t.host.localName,i=t[o],s=`The prop \`${String(o)}\` of the \`${n}\` component must follow the format \`${e}\`.`;"string"==typeof i&&e.test(i)||console.error(s)}function c(t,o,e){const n=t.host.localName,i=t[o],s="array"===e,c=Array.isArray(i),r=`The prop \`${String(o)}\` of the \`${n}\` component must be of type \`${e}\`.`;s||c?c!==s&&console.error(r):typeof i!==e&&console.error(r)}function r(t,o){const e=t.host.localName,n=t[o],i=`The prop \`${String(o)}\` of the \`${e}\` component is invalid.`;if("string"==typeof n||n instanceof URL)try{new URL(n,"https://www.post.ch")}catch{console.error(i)}else console.error(i)}function a(t){return(o,n,...i)=>{e(o[n])||t(o,n,...i)}}const h=a(i),f=a(s),d=a(c),p=a(r),u=n(i),m=n(s),v=n(c),l=n(r);function w(t,o){var e,n={},i=n.noTrailing,s=void 0!==i&&i,c=n.noLeading,r=void 0!==c&&c,a=n.debounceMode,h=void 0===a?void 0:a,f=!1,d=0;function p(){e&&clearTimeout(e)}function u(){for(var n=arguments.length,i=new Array(n),c=0;c<n;c++)i[c]=arguments[c];var a=this,u=Date.now()-d;function m(){d=Date.now(),o.apply(a,i)}function v(){e=void 0}f||(r||!h||e||m(),p(),void 0===h&&u>t?r?(d=Date.now(),s||(e=setTimeout(h?v:m,t))):m():!0!==s&&(e=setTimeout(h?v:m,void 0===h?t-u:t)))}return u.cancel=function(t){var o=(t||{}).upcomingOnly,e=void 0!==o&&o;p(),f=!e},u}const $=new class{constructor(){this.breakpoints=[{key:"xl",device:"desktop",minWidth:1280},{key:"lg",device:"desktop",minWidth:1024},{key:"md",device:"tablet",minWidth:780},{key:"sm",device:"tablet",minWidth:600},{key:"xs",device:"mobile",minWidth:0}],this.updateCurrentBreakpoint=w(50,((t={emitEvents:!0})=>{const o=this.currentBreakpoint,e=this.breakpoints.find((t=>t.minWidth<=innerWidth));e&&(this.currentBreakpoint=e,t.emitEvents&&Object.keys(this.currentBreakpoint).filter((t=>!o||this.currentBreakpoint[t]!==o[t])).forEach((t=>this.dispatchEvent(t))))})),t||(this.updateCurrentBreakpoint({emitEvents:!1}),window.addEventListener("resize",(()=>this.updateCurrentBreakpoint()),{passive:!0}))}dispatchEvent(o){t||window.dispatchEvent(new CustomEvent(`postBreakpoint:${o}`,{detail:this.currentBreakpoint[o]}))}get(t){return this.updateCurrentBreakpoint({emitEvents:!1}),this.currentBreakpoint[t]}};export{p as a,u as b,v as c,h as d,d as e,l as f,$ as g,m as h,f as i,w as t}

package/dist/components/debounce.js

@@ -0,0 +1 @@
+function e(e,t=200){let o;return(...r)=>{o&&clearTimeout(o),o=setTimeout(e,t,...r)}}export{e as d}

package/dist/components/environment.js

@@ -0,0 +1 @@
+const o="undefined"!=typeof global,n="undefined"!=typeof window,d=n&&"MockNavigator"===window.navigator.userAgent,e=n&&"http://mockdoc.stenciljs.com"===window.location.origin,t=o&&d&&global.IS_HYDRATEAPP_SERVERTEST,a=n&&!(o&&d&&e||t),i=!a;export{a as I,i as a}

package/dist/components/event-from.js

@@ -1,119 +1 @@
-/**
- * Validates if an event should be processed based on target and nesting criteria
- * @param event - The event to validate
- * @param tag - The expected local name of the event target
- * @param host - The host element for nested component checking
- * @param ignoreNestedComponents - Whether to ignore events from nested components
- * @returns true if the event should be processed, false otherwise
- */
-function shouldProcessEvent(event, tag, host, ignoreNestedComponents, allowDescendants = false) {
-    if (!(event instanceof Event && event.target instanceof HTMLElement))
-        return false;
-    const eventTarget = event.target;
-    if (allowDescendants) {
-        // Accept event if target or any ancestor matches tag
-        if (!eventTarget.closest(tag))
-            return false;
-    }
-    else {
-        // Only accept event if target exactly matches tag
-        if (eventTarget.localName !== tag)
-            return false;
-    }
-    if (ignoreNestedComponents) {
-        // Find the closest parent with the same tag as the host
-        const closestParentWithSameTag = findClosestParentWithTag(eventTarget, host.localName);
-        if (closestParentWithSameTag !== host)
-            return false;
-    }
-    return true;
-}
-/**
- * Decorator that guards event handlers to only execute when the event meets certain criteria.
- * @param tag - The local name of the element that should be the target of the event
- * @param option - Configuration options for the event guard
- * @param option.ignoreNestedComponents - Whether to ignore events from nested components
- */
-function EventFrom(tag, option) {
-    // Set default values here
-    const opts = {
-        ignoreNestedComponents: true,
-        allowDescendants: false,
-        ...option,
-    };
-    return function (target, propertyKey, descriptor) {
-        if (descriptor) {
-            const originalMethod = descriptor.value;
-            descriptor.value = function (event) {
-                if (!shouldProcessEvent(event, tag, this.host, opts.ignoreNestedComponents, opts.allowDescendants)) {
-                    return;
-                }
-                return originalMethod.call(this, event);
-            };
-        }
-        else {
-            // Creates a hidden storage property for the original method using a
-            // modified key format (__[property]_original) to avoid naming conflicts
-            const privateKey = `__${propertyKey}_original`;
-            // Create hidden storage for original method
-            Object.defineProperty(target, privateKey, {
-                writable: true,
-                configurable: true
-            });
-            // Replace property with getter/setter
-            Object.defineProperty(target, propertyKey, {
-                // Getter returns original method
-                get() {
-                    return this[privateKey];
-                },
-                // Setter wraps original method with extra code
-                set(originalFunction) {
-                    if (typeof originalFunction === 'function') {
-                        // Store original and add new behavior
-                        this[privateKey] = (event) => {
-                            if (!shouldProcessEvent(event, tag, this.host, opts.ignoreNestedComponents)) {
-                                return;
-                            }
-                            return originalFunction.call(this, event);
-                        };
-                    }
-                    else {
-                        this[privateKey] = originalFunction;
-                    }
-                },
-                configurable: true,
-                enumerable: true
-            });
-        }
-    };
-}
-/**
- * Traverses up the DOM (including crossing shadow DOM boundaries) to find the closest ancestor
- * that matches the specified tag name.
- * @param element - The starting element
- * @param tagName - The tag name to match (e.g., 'post-accordion')
- * @returns The closest matching ancestor or null if none found
- */
-function findClosestParentWithTag(element, tagName) {
-    let current = element;
-    while (current) {
-        if (current.localName === tagName) {
-            return current;
-        }
-        // Check regular parent first
-        if (current.parentElement) {
-            current = current.parentElement;
-        }
-        // If no parentElement, check if we're in a shadow root
-        else if (current.parentNode instanceof ShadowRoot) {
-            current = current.parentNode.host;
-        }
-        // No more parents to check
-        else {
-            current = null;
-        }
-    }
-    return null;
-}
-
-export { EventFrom as E };
+function n(n,t,e,i,r=!1){if(!(n instanceof Event&&n.target instanceof HTMLElement))return!1;const o=n.target;if(r){if(!o.closest(t))return!1}else if(o.localName!==t)return!1;return!i||function(n,t){let e=n;for(;e;){if(e.localName===t)return e;e=e.parentElement?e.parentElement:e.parentNode instanceof ShadowRoot?e.parentNode.host:null}return null}(o,e.localName)===e}function t(t,e){const i={ignoreNestedComponents:!0,allowDescendants:!1,...e};return function(e,r,o){if(o){const e=o.value;o.value=function(r){if(n(r,t,this.host,i.ignoreNestedComponents,i.allowDescendants))return e.call(this,r)}}else{const o=`__${r}_original`;Object.defineProperty(e,o,{writable:!0,configurable:!0}),Object.defineProperty(e,r,{get(){return this[o]},set(e){this[o]="function"==typeof e?r=>{if(n(r,t,this.host,i.ignoreNestedComponents))return e.call(this,r)}:e},configurable:!0,enumerable:!0})}}}export{t as E}

package/dist/components/fade-slide.js

@@ -0,0 +1 @@
+import{r as t}from"./utils.js";const n={duration:500,easing:"ease",fill:"none",translate:-100};function a(a,r,i){if(!a)return;const s=i,{translate:o}=s,e=[{opacity:"0",transform:`translateY(${o}px)`},{opacity:"1",transform:"translateY(0px)"}];return function(a,r,i){const{duration:s,easing:o,fill:e}={...n,...i};return a.animate(r,{duration:s,easing:t(o),fill:e})}(a,"in"===r?e:[...e].reverse(),i)}export{a as f}

package/dist/components/fade.js

@@ -1,11 +1 @@
-const fadeDuration = 200;
-const fadedOutKeyframe = { opacity: '0' };
-const fadedInKeyframe = { opacity: '1' };
-function fadeIn(el) {
-    return el.animate([fadedOutKeyframe, fadedInKeyframe], { duration: fadeDuration });
-}
-function fadeOut(el) {
-    return el.animate([fadedInKeyframe, fadedOutKeyframe], { duration: fadeDuration });
-}
-
-export { fadeIn as a, fadeOut as f };
+import{r as i}from"./utils.js";const n={duration:200,easing:"linear",fill:"forwards"};function r(r,t,o={}){if(!r)return;const a=[{opacity:"0"},{opacity:"1"}];return function(r,t,o={}){const{duration:a,easing:s,fill:f}={...n,...o};return r.animate(t,{duration:a,easing:i(s),fill:f})}(r,"in"===t?a:[...a].reverse(),o)}export{r as f}