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

package/dist/{components/react/p-CJ80BZ06.js → cjs/breakpoints-Df03Ct7n.js}

@@ -1,5 +1,94 @@
-const IS_SERVER = typeof window === 'undefined';
-const IS_BROWSER = !IS_SERVER;
+'use strict';
+
+var environment = require('./environment-BQE9Unf_.js');
+
+const EMPTY_VALUES = [undefined, null, '', NaN];
+
+function isValueEmpty(value) {
+    return EMPTY_VALUES.some(v => v === value);
+}
+
+function requiredAnd(check) {
+    return (component, prop, ...extraArgs) => {
+        const componentName = component.host.localName;
+        const value = component[prop];
+        const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component is not defined.`;
+        if (isValueEmpty(value)) {
+            throw new Error(message);
+        }
+        else {
+            check(component, prop, ...extraArgs);
+        }
+    };
+}
+
+function checkOneOf(component, prop, possibleValues) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be one of the following values: ${possibleValues.join(', ')}.`;
+    if (!possibleValues.includes(value)) {
+        console.error(message);
+    }
+}
+
+function checkPattern(component, prop, pattern) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component must follow the format \`${pattern}\`.`;
+    if (typeof value !== 'string' || !pattern.test(value)) {
+        console.error(message);
+    }
+}
+
+function checkType(component, prop, type) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const typeIsArray = type === 'array';
+    const valueIsArray = Array.isArray(value);
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be of type \`${type}\`.`;
+    if (typeIsArray || valueIsArray) {
+        if (valueIsArray !== typeIsArray) {
+            console.error(message);
+        }
+    }
+    else if (typeof value !== type) {
+        console.error(message);
+    }
+}
+
+function checkUrl(component, prop) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component is invalid.`;
+    if (typeof value !== 'string' && !(value instanceof URL)) {
+        console.error(message);
+        return;
+    }
+    try {
+        new URL(value, 'https://www.post.ch');
+    }
+    catch {
+        console.error(message);
+    }
+}
+
+function emptyOr(check) {
+    return (component, prop, ...extraArgs) => {
+        const value = component[prop];
+        if (!isValueEmpty(value)) {
+            check(component, prop, ...extraArgs);
+        }
+    };
+}
+
+const checkEmptyOrOneOf = emptyOr(checkOneOf);
+const checkEmptyOrPattern = emptyOr(checkPattern);
+const checkEmptyOrType = emptyOr(checkType);
+const checkEmptyOrUrl = emptyOr(checkUrl);
+const checkRequiredAndOneOf = requiredAnd(checkOneOf);
+const checkRequiredAndPattern = requiredAnd(checkPattern);
+const checkRequiredAndType = requiredAnd(checkType);
+const checkRequiredAndUrl = requiredAnd(checkUrl);
 
 /* eslint-disable no-undefined,no-param-reassign,no-shadow */
 
@@ -158,13 +247,13 @@ class Breakpoint {
                 .filter(key => !previousBreakpoint || this.currentBreakpoint[key] !== previousBreakpoint[key])
                 .forEach((key) => this.dispatchEvent(key));
         });
-        if (IS_SERVER)
+        if (environment.IS_SERVER)
             return;
         this.updateCurrentBreakpoint({ emitEvents: false });
         window.addEventListener('resize', () => this.updateCurrentBreakpoint(), { passive: true });
     }
     dispatchEvent(property) {
-        if (IS_SERVER)
+        if (environment.IS_SERVER)
             return;
         window.dispatchEvent(new CustomEvent(`postBreakpoint:${property}`, { detail: this.currentBreakpoint[property] }));
     }
@@ -175,4 +264,13 @@ class Breakpoint {
 }
 const breakpoint = new Breakpoint();
 
-export { IS_BROWSER as I, breakpoint as b, throttle as t };
+exports.breakpoint = breakpoint;
+exports.checkEmptyOrOneOf = checkEmptyOrOneOf;
+exports.checkEmptyOrPattern = checkEmptyOrPattern;
+exports.checkEmptyOrType = checkEmptyOrType;
+exports.checkEmptyOrUrl = checkEmptyOrUrl;
+exports.checkRequiredAndOneOf = checkRequiredAndOneOf;
+exports.checkRequiredAndPattern = checkRequiredAndPattern;
+exports.checkRequiredAndType = checkRequiredAndType;
+exports.checkRequiredAndUrl = checkRequiredAndUrl;
+exports.throttle = throttle;

package/dist/cjs/debounce-BsIBi_-2.js

@@ -0,0 +1,13 @@
+'use strict';
+
+function debounce(callback, timeout = 200) {
+    let id;
+    return (...args) => {
+        if (id) {
+            clearTimeout(id);
+        }
+        id = setTimeout(callback, timeout, ...args);
+    };
+}
+
+exports.debounce = debounce;

package/dist/cjs/environment-BQE9Unf_.js

@@ -0,0 +1,52 @@
+'use strict';
+
+/**
+ * Environment detection helper
+ *
+ * Goal: Distinguish between real browser execution and Stencil's server-side
+ * hydration context. During SSR/hydration Stencil provides a mocked `window`
+ * (Domino / JSDOM–like) so naive checks (e.g. `typeof window !== 'undefined'`)
+ * incorrectly classify the environment as a browser.
+ *
+ * Detection strategy:
+ * - Stencils hydrate context uses a hardcoded user agent string ('MockNavigator')
+ *   and origin ('http://mockdoc.stenciljs.com') for its mocked `window` object.
+ *   We can use this to identify the hydrate context.
+ * - Stencils unit test context also uses the same hardcoded user agent string,
+ *   but a differnet value for the origin.
+ *   That's why comparing the origin is aboslutely mandatory.
+ * - Since we test the hydrate app in the test context, the origin is getting
+ *   overwritten by the test setup, leading to a false positive in the
+ *   `isHydrateApp` detection.
+ *   To circumvent this, we use a global flag (`isHydrateAppTestEnv`),
+ *   that we set/reset during the server test, so we can correctly identify
+ *   the hydrate app in the test context.
+ *   As a drawback, we can't properly test if the hydrate app is detected as
+ *   expected, in a real world scenario (elsewhere than in our tests).
+ */
+const MOCKED_USERAGENT = 'MockNavigator';
+const MOCKED_ORIGIN = 'http://mockdoc.stenciljs.com';
+const isNodeEnv = typeof global !== 'undefined';
+const hasWindow = typeof window !== 'undefined';
+const isMockedUserAgent = hasWindow && window.navigator.userAgent === MOCKED_USERAGENT;
+const isMockedOrigin = hasWindow && window.location.origin === MOCKED_ORIGIN;
+/**
+ * This is the natural hydrate app environment
+ * Is `true` if the hydrate app runs on server
+ */
+const isHydrateAppEnv = isNodeEnv && isMockedUserAgent && isMockedOrigin;
+/**
+ * This is the test app server test env
+ * Is `true` if the server unit test runs (`false` if the browser unit test runs)
+ */
+const isTestAppServerTestEnv = isNodeEnv && isMockedUserAgent && global.IS_HYDRATEAPP_SERVERTEST;
+/**
+ * This is the final hydrate app flag
+ * if it`s `true`, IS_BROWSER equals `false` and IS_SERVER equals `true
+ */
+const isHydrateApp = isHydrateAppEnv || isTestAppServerTestEnv;
+const IS_BROWSER = hasWindow && !isHydrateApp;
+const IS_SERVER = !IS_BROWSER;
+
+exports.IS_BROWSER = IS_BROWSER;
+exports.IS_SERVER = IS_SERVER;

package/dist/cjs/{event-from-CLvtSUKf.js → event-from-CwMw19f8.js}

@@ -60,7 +60,7 @@ 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, {
@@ -84,7 +84,7 @@ function EventFrom(tag, option) {
                     }
                 },
                 configurable: true,
-                enumerable: true
+                enumerable: true,
             });
         }
     };

package/dist/cjs/fade-CPQhl1fP.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var utils = require('./utils-s05L2ulk.js');
+
+const defaultOptions = {
+    duration: 200,
+    easing: 'linear',
+    fill: 'forwards',
+};
+function animateFade(el, keyframes, options = {}) {
+    const { duration, easing, fill } = { ...defaultOptions, ...options };
+    return el.animate(keyframes, {
+        duration,
+        easing: utils.resolveEasing(easing),
+        fill,
+    });
+}
+function fade(el, direction, options = {}) {
+    if (!el)
+        return;
+    const baseKeyframes = [{ opacity: '0' }, { opacity: '1' }];
+    const keyframes = direction === 'in' ? baseKeyframes : [...baseKeyframes].reverse();
+    return animateFade(el, keyframes, options);
+}
+
+exports.fade = fade;

package/dist/cjs/fade-slide-dPhQa-I1.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var utils = require('./utils-s05L2ulk.js');
+
+/**
+ * Used by
+ * 1. PostHeader (burger menu)
+ * 2. PostMegadropdown
+ * 3. BackToTopButton
+ */
+const defaultOptions = {
+    duration: 500,
+    easing: 'ease',
+    fill: 'none',
+    translate: -100,
+};
+function animateFadeSlide(el, keyframes, options) {
+    const { duration, easing, fill } = { ...defaultOptions, ...options };
+    return el.animate(keyframes, {
+        duration,
+        easing: utils.resolveEasing(easing),
+        fill,
+    });
+}
+function fadeSlide(el, direction, options) {
+    if (!el)
+        return;
+    const mergedOptions = options;
+    const { translate } = mergedOptions;
+    const baseKeyframes = [
+        { opacity: '0', transform: `translateY(${translate}px)` },
+        { opacity: '1', transform: 'translateY(0px)' },
+    ];
+    const keyframes = direction === 'in' ? baseKeyframes : [...baseKeyframes].reverse();
+    return animateFadeSlide(el, keyframes, options);
+}
+
+exports.fadeSlide = fadeSlide;

package/dist/cjs/{get-focusable-children-Bx63XUQg.js → get-focusable-children-ChETM1wK.js}

@@ -29,32 +29,40 @@ function getFocusableChildren(element) {
     const focusableChildren = element.querySelectorAll(`${focusableSelector}:not(${focusDisablingSelector})`);
     return Array.from(focusableChildren).filter(isVisible);
 }
-// Searches deeper accross shadowDom
-function getDeepFocusableChildren(element) {
-    const results = [];
-    function traverse(node) {
+// Searches deeper across shadow DOM
+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/cjs/{get-root-CyMf3Vsd.js → get-root-CUAv4k4C.js}

@@ -1,13 +1,13 @@
 'use strict';
 
-var breakpoints = require('./breakpoints-CEkeixld.js');
+var environment = require('./environment-BQE9Unf_.js');
 
 /**
  * getRootNode() can only be used after the element has been attached to the document!
  * So use it for example in the componentDidLoad lifecycle hook.
  */
 function getRoot(element) {
-    const root = breakpoints.IS_BROWSER ? element.getRootNode() : element;
+    const root = environment.IS_BROWSER ? element.getRootNode() : element;
     if (root instanceof Document || root instanceof ShadowRoot) {
         return root;
     }