@swisspost/design-system-components 9.0.0-next.9 → 10.0.0-next.37

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

@@ -0,0 +1,230 @@
+import { h, Host } from "@stencil/core";
+import { checkType, IS_BROWSER } from "../../utils/index";
+import { version } from "../../../../package";
+import isFocusable from "ally.js/is/focusable";
+const TRIGGER_EVENTS = ['pointerenter', 'pointerleave', 'focusin', 'focusout', 'long-press'];
+if (IS_BROWSER) {
+    (async () => {
+        await import('long-press-event');
+    })();
+}
+/**
+ * @slot default - Content to trigger the tooltip. Can contain any focusable element or will be made focusable automatically.
+ */
+export class PostTooltipTrigger {
+    constructor() {
+        /**
+         * Reference to the element inside the host that will act as the trigger.
+         */
+        this.trigger = null;
+        /**
+         * Timeout ID for the delay.
+         */
+        this.delayTimeout = null;
+        this.for = undefined;
+        this.delay = 0;
+        this.boundTriggerHandler = this.handleTriggerEvent.bind(this);
+        this.boundTooltipHandler = this.handleTooltipEvent.bind(this);
+    }
+    validateControlFor() {
+        checkType(this, 'for', 'string');
+    }
+    get tooltip() {
+        if (!IS_BROWSER)
+            return null;
+        const ref = document.getElementById(this.for);
+        return ref?.localName === 'post-tooltip'
+            ? ref
+            : null;
+    }
+    componentDidLoad() {
+        this.setupTrigger();
+        this.attachListeners();
+        this.attachTooltipListeners();
+    }
+    disconnectedCallback() {
+        this.removeListeners();
+        this.removeTooltipListeners();
+        this.cleanupTrigger();
+        if (this.delayTimeout) {
+            clearTimeout(this.delayTimeout);
+            this.delayTimeout = null;
+        }
+    }
+    handleSlotChange() {
+        this.cleanupTrigger();
+        this.setupTrigger();
+    }
+    cleanupTrigger() {
+        if (this.trigger) {
+            const describedBy = this.trigger.getAttribute('aria-describedby') || '';
+            if (describedBy.includes(this.for)) {
+                const newDescribedBy = describedBy
+                    .split(' ')
+                    .filter(id => id !== this.for)
+                    .join(' ');
+                if (newDescribedBy) {
+                    this.trigger.setAttribute('aria-describedby', newDescribedBy);
+                }
+                else {
+                    this.trigger.removeAttribute('aria-describedby');
+                }
+            }
+            this.trigger = null;
+        }
+    }
+    setupTrigger() {
+        this.trigger = this.host.querySelector('*');
+        if (this.trigger) {
+            if (!isFocusable(this.trigger)) {
+                this.trigger.setAttribute('tabindex', '0');
+            }
+            const describedBy = this.trigger.getAttribute('aria-describedby') || '';
+            if (!describedBy.includes(this.for)) {
+                this.trigger.setAttribute('aria-describedby', `${describedBy} ${this.for}`.trim());
+            }
+        }
+        else {
+            console.warn('No content found in the post-tooltip-trigger slot. Please insert a focusable element or content that can receive focus.');
+        }
+    }
+    attachListeners() {
+        TRIGGER_EVENTS.forEach(event => {
+            this.host.addEventListener(event, this.boundTriggerHandler);
+        });
+    }
+    removeListeners() {
+        TRIGGER_EVENTS.forEach(event => {
+            this.host.removeEventListener(event, this.boundTriggerHandler);
+        });
+    }
+    attachTooltipListeners() {
+        if (this.tooltip) {
+            this.tooltip.addEventListener('pointerenter', this.boundTooltipHandler);
+            this.tooltip.addEventListener('pointerleave', this.boundTooltipHandler);
+        }
+    }
+    removeTooltipListeners() {
+        if (this.tooltip) {
+            this.tooltip.removeEventListener('pointerenter', this.boundTooltipHandler);
+            this.tooltip.removeEventListener('pointerleave', this.boundTooltipHandler);
+        }
+    }
+    handleTriggerEvent(event) {
+        switch (event.type) {
+            case 'pointerenter':
+            case 'focusin':
+            case 'long-press':
+                this.handleEnter();
+                break;
+            case 'pointerleave':
+            case 'focusout':
+                this.handleLeave(event);
+                break;
+        }
+    }
+    handleTooltipEvent(event) {
+        switch (event.type) {
+            case 'pointerenter':
+                this.handleEnter();
+                break;
+            case 'pointerleave':
+                this.handleLeave(event);
+                break;
+        }
+    }
+    handleEnter() {
+        if (this.delayTimeout) {
+            clearTimeout(this.delayTimeout);
+            this.delayTimeout = null;
+        }
+        this.interestHandler();
+    }
+    handleLeave(event) {
+        const newTarget = event.relatedTarget;
+        if ((this.tooltip && newTarget && this.tooltip.contains(newTarget)) ||
+            (newTarget === this.trigger)) {
+            return;
+        }
+        this.interestLostHandler();
+    }
+    interestHandler() {
+        if (this.delay > 0) {
+            this.delayTimeout = window.setTimeout(() => {
+                this.tooltip?.show(this.trigger);
+                this.delayTimeout = null;
+            }, this.delay);
+        }
+        else {
+            this.tooltip?.show(this.trigger);
+        }
+    }
+    interestLostHandler() {
+        if (this.delayTimeout) {
+            clearTimeout(this.delayTimeout);
+            this.delayTimeout = null;
+        }
+        this.tooltip?.hide();
+    }
+    render() {
+        return (h(Host, { key: '4e4b53e85570d6dbba4ee7833a1d3de00e53dbc6', "data-version": version }, h("slot", { key: 'f8f5ea2e2ce848d654e233617455bbbbdc6ba5b1', onSlotchange: () => this.handleSlotChange() })));
+    }
+    static get is() { return "post-tooltip-trigger"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-tooltip-trigger.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-tooltip-trigger.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "for": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of the tooltip element that this trigger is linked to."
+                },
+                "attribute": "for",
+                "reflect": true
+            },
+            "delay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delay (in milliseconds) before the tooltip is shown."
+                },
+                "attribute": "delay",
+                "reflect": false,
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "for",
+                "methodName": "validateControlFor"
+            }];
+    }
+}

package/dist/collection/index.js

@@ -4,7 +4,7 @@ export { PostAccordionItem } from './components/post-accordion-item/post-accordi
 export { PostAvatar } from './components/post-avatar/post-avatar';
 export { PostBackToTop } from './components/post-back-to-top/post-back-to-top';
 export { PostBanner } from './components/post-banner/post-banner';
-export { PostBreadcrumb } from './components/post-breadcrumb/post-breadcrumb';
+export { PostBreadcrumbs } from './components/post-breadcrumbs/post-breadcrumbs';
 export { PostBreadcrumbItem } from './components/post-breadcrumb-item/post-breadcrumb-item';
 export { PostCardControl } from './components/post-card-control/post-card-control';
 export { PostClosebutton } from './components/post-closebutton/post-closebutton';
@@ -15,6 +15,7 @@ export { PostHeader } from './components/post-header/post-header';
 export { PostIcon } from './components/post-icon/post-icon';
 export { PostLanguageOption } from './components/post-language-option/post-language-option';
 export { PostLanguageSwitch } from './components/post-language-switch/post-language-switch';
+export { PostLinkarea } from './components/post-linkarea/post-linkarea';
 export { PostList } from './components/post-list/post-list';
 export { PostListItem } from './components/post-list-item/post-list-item';
 export { PostLogo } from './components/post-logo/post-logo';
@@ -33,3 +34,4 @@ export { PostTabPanel } from './components/post-tab-panel/post-tab-panel';
 export { PostTag } from './components/post-tag/post-tag';
 export { PostTogglebutton } from './components/post-togglebutton/post-togglebutton';
 export { PostTooltip } from './components/post-tooltip/post-tooltip';
+export { PostTooltipTrigger } from './components/post-tooltip-trigger/post-tooltip-trigger';

package/dist/collection/utils/attribute-observer.js

@@ -1,9 +1,10 @@
-export const getAttributeObserver = (attribute, handler) => {
+import { IS_BROWSER } from "./environment";
+export function getAttributeObserver(attribute, handler) {
     /**
      * Handle attribute changes and childList changes from the observer
      * @param {MutationRecord[]} mutationList
      */
-    const observerHandler = (mutationList) => {
+    function observerHandler(mutationList) {
         mutationList.forEach(mutation => {
             if (mutation.type === 'attributes' && mutation.attributeName === attribute) {
                 handler(mutation.target);
@@ -17,7 +18,7 @@ export const getAttributeObserver = (attribute, handler) => {
                 });
             }
         });
-    };
+    }
     // Initialize a mutation observer for patching accessibility features
-    return new MutationObserver(observerHandler);
-};
+    return IS_BROWSER ? new MutationObserver(observerHandler) : null;
+}

package/dist/collection/utils/breakpoints.js

@@ -1,27 +1,31 @@
+import { IS_BROWSER } from "./environment";
 export class Breakpoint {
     constructor() {
         this.current = {
             key: '',
             name: '',
         };
-        if (!this.breakpointMap) {
-            const styles = getComputedStyle(document.documentElement);
-            const keys = styles.getPropertyValue('--post-breakpoint-keys').split(', ');
-            const names = styles.getPropertyValue('--post-breakpoint-names').split(', ');
-            this.breakpointMap = styles
-                .getPropertyValue('--post-breakpoint-widths')
-                .split(', ')
-                .map((width, i) => {
-                return {
-                    minWidth: Number(width),
-                    key: keys[i],
-                    name: names[i],
-                };
-            })
+        if (IS_BROWSER && !this.breakpointMap) {
+            const keys = this.getStyles('--post-breakpoint-keys');
+            const names = this.getStyles('--post-breakpoint-names');
+            const widths = this.getStyles('--post-breakpoint-widths');
+            this.breakpointMap = widths
+                .map((width, i) => ({
+                minWidth: Number(width),
+                key: keys[i],
+                name: names[i],
+            }))
                 .reverse();
             window.addEventListener('resize', () => this.updateHandler(), { passive: true });
         }
     }
+    getStyles(propertyName) {
+        const styles = getComputedStyle(document.documentElement);
+        return (styles
+            .getPropertyValue(propertyName)
+            ?.split(',')
+            .map(w => w.trim()) ?? []);
+    }
     updateHandler(emitEvents = true) {
         const calculated = this.breakpointMap.find(({ minWidth }) => innerWidth >= minWidth);
         if (this.current.key !== calculated.key) {
@@ -36,7 +40,9 @@ export class Breakpoint {
         }
     }
     dispatchEvent(type) {
-        window.dispatchEvent(new CustomEvent(`postBreakpoint:${type}`, { detail: this.current[type] }));
+        if (IS_BROWSER) {
+            window.dispatchEvent(new CustomEvent(`postBreakpoint:${type}`, { detail: this.current[type] }));
+        }
     }
     get(type) {
         this.updateHandler(false);

package/dist/collection/utils/component-on-ready.js

@@ -2,7 +2,7 @@
  * Invoke the `componentOnReady` method if it is available, simulate it otherwise
  * @see https://stenciljs.com/docs/api#componentonready
  */
-export const componentOnReady = (el) => {
+export function componentOnReady(el) {
     if (typeof el.componentOnReady === 'function') {
         return el.componentOnReady();
     }
@@ -11,10 +11,10 @@ export const componentOnReady = (el) => {
             resolve(el);
         }));
     }
-};
-const customOnReady = (callback) => {
+}
+function customOnReady(callback) {
     if (typeof requestAnimationFrame === 'function') {
         return requestAnimationFrame(callback);
     }
     return setTimeout(callback);
-};
+}

package/dist/collection/utils/debounce.js

@@ -1,8 +1,9 @@
 export function debounce(callback, timeout = 200) {
     let id;
     return (...args) => {
-        if (id)
+        if (id) {
             clearTimeout(id);
+        }
         id = setTimeout(callback, timeout, ...args);
     };
 }

package/dist/collection/utils/environment.js

@@ -0,0 +1,2 @@
+export const IS_SERVER = typeof window === 'undefined';
+export const IS_BROWSER = !IS_SERVER;

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

@@ -0,0 +1,43 @@
+export function eventGuard(host, event, options, callback) {
+    const target = event.target;
+    if (!target)
+        return;
+    if (target.localName === options.targetLocalName) {
+        if (!options.delegatorSelector || shadowClosest(target, options.delegatorSelector) === host) {
+            callback();
+        }
+    }
+}
+/**
+ * Traverses up the DOM (including crossing shadow DOM boundaries) starting from the given element
+ * to find and return the closest ancestor that matches the specified CSS selector.
+ * If no matching element is found, returns null.
+ *
+ * @param element - The starting element from which the search begins.
+ * @param selector - The CSS selector used to test each ancestor element.
+ * @returns The closest matching ancestor element or null if none is found.
+ */
+function shadowClosest(element, selector) {
+    let currentElement = element;
+    while (currentElement) {
+        if (currentElement.matches(selector)) {
+            return currentElement;
+        }
+        const parent = currentElement.parentElement;
+        if (parent) {
+            currentElement = parent;
+        }
+        else {
+            const parentNode = currentElement.parentNode;
+            // When no parentElement exists, check if the current element is inside a shadow DOM.
+            // If so, move up to the shadow host to continue the search outside the shadow boundary.
+            if (parentNode instanceof ShadowRoot) {
+                currentElement = parentNode.host;
+            }
+            else {
+                currentElement = null;
+            }
+        }
+    }
+    return null;
+}

package/dist/collection/utils/{is-focusable.js → get-focusable-children.js}

@@ -20,7 +20,14 @@ const focusDisablingSelector = `:where(${[
     '[popover]:not(:popover-open) *',
     'details:not([open]) > *:not(details > summary:first-of-type)',
     'details:not([open]) > *:not(details > summary:first-of-type) *',
+    '[tabindex^="-"]',
+    '[hidden]:not([hidden="false"])',
 ].join(',')})`;
-export const isFocusable = (element) => {
-    return (element === null || element === void 0 ? void 0 : element.matches(focusableSelector)) && !(element === null || element === void 0 ? void 0 : element.matches(focusDisablingSelector));
-};
+export function getFocusableChildren(element) {
+    const focusableChildren = element.querySelectorAll(`${focusableSelector}:not(${focusDisablingSelector})`);
+    const visibleFocusableChildren = Array.from(focusableChildren).filter(child => {
+        const style = window.getComputedStyle(child.parentElement);
+        return style.display !== 'none' && style.visibility !== 'hidden';
+    });
+    return visibleFocusableChildren;
+}

package/dist/collection/utils/get-root.js

@@ -1,5 +1,10 @@
+import { IS_BROWSER } from "./environment";
+/**
+ * getRootNode() can only be used after the element has been attached to the document!
+ * So use it for example in the componentDidLoad lifecycle hook.
+ */
 export function getRoot(element) {
-    const root = element.getRootNode();
+    const root = IS_BROWSER ? element.getRootNode() : element;
     if (root instanceof Document || root instanceof ShadowRoot) {
         return root;
     }

package/dist/collection/utils/index.js

@@ -1,7 +1,12 @@
+export * from './get-focusable-children';
+export * from './attribute-observer';
 export * from './component-on-ready';
 export * from './property-checkers';
+export * from './breakpoints';
 export * from './debounce';
+export * from './event-guard';
 export * from './get-root';
 export * from './is-motion-reduced';
 export * from './sass-export';
 export * from './timeout';
+export * from './environment';

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

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

package/dist/collection/utils/property-checkers/check-non-empty.js

@@ -1,6 +1,10 @@
 import { EMPTY_VALUES } from "./constants";
-export function checkNonEmpty(value, error) {
+export function checkNonEmpty(component, prop, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component is required.`;
+    const message = customMessage || defaultMessage;
     if (EMPTY_VALUES.some(v => v === value)) {
-        throw new Error(error);
+        throw new Error(message);
     }
 }

package/dist/collection/utils/property-checkers/check-one-of.js

@@ -1,4 +1,9 @@
-export function checkOneOf(value, possibleValues, error) {
-    if (!possibleValues.includes(value))
-        throw new Error(error);
+export function checkOneOf(component, prop, possibleValues, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be one of the following values: ${possibleValues.join(', ')}.`;
+    const message = customMessage || defaultMessage;
+    if (!possibleValues.includes(value)) {
+        throw new Error(message);
+    }
 }

package/dist/collection/utils/property-checkers/check-pattern.js

@@ -1,4 +1,9 @@
-export function checkPattern(value, pattern, errorMessage) {
-    if (typeof value !== 'string' || !pattern.test(value))
-        throw new Error(errorMessage);
+export function checkPattern(component, prop, pattern, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be follow the format \`${pattern}\`.`;
+    const message = customMessage || defaultMessage;
+    if (typeof value !== 'string' || !pattern.test(value)) {
+        throw new Error(message);
+    }
 }

package/dist/collection/utils/property-checkers/check-type.js

@@ -1,12 +1,17 @@
-export function checkType(value, type, error) {
+export function checkType(component, prop, type, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
     const typeIsArray = type === 'array';
     const valueIsArray = Array.isArray(value);
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be of type \`
+    ${type}\`.`;
+    const message = customMessage || defaultMessage;
     if (typeIsArray || valueIsArray) {
-        if (valueIsArray !== typeIsArray)
-            throw new Error(error);
+        if (valueIsArray !== typeIsArray) {
+            throw new Error(message);
+        }
     }
-    else {
-        if (typeof value !== type)
-            throw new Error(error);
+    else if (typeof value !== type) {
+        throw new Error(message);
     }
 }

package/dist/collection/utils/property-checkers/check-url.js

@@ -1,10 +1,15 @@
-export function checkUrl(value, error) {
-    if (typeof value !== 'string' && !(value instanceof URL))
-        throw new Error(error);
+export function checkUrl(component, prop, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component is invalid.`;
+    const message = customMessage || defaultMessage;
+    if (typeof value !== 'string' && !(value instanceof URL)) {
+        throw new Error(message);
+    }
     try {
-        new URL(value);
+        new URL(value, 'https://www.post.ch');
     }
-    catch (e) {
-        throw new Error(error);
+    catch {
+        throw new Error(message);
     }
 }

package/dist/collection/utils/property-checkers/empty-or.js

@@ -1,8 +1,11 @@
 import { EMPTY_VALUES } from "./constants";
 export function emptyOr(check) {
     return (...args) => {
-        const value = args[0];
-        if (!EMPTY_VALUES.some(v => v === value))
+        const component = args[0];
+        const prop = args[1];
+        const value = component[prop];
+        if (!EMPTY_VALUES.some(v => v === value)) {
             check(...args);
+        }
     };
 }

package/dist/collection/utils/sass-export.js

@@ -2,11 +2,14 @@ export function parse(scss) {
     return Object.entries(scss).reduce((object, [path, value]) => {
         let output = object;
         path.split('_').forEach((key, i, values) => {
-            const pathKey = key;
-            const normalized = /^\[.*\]$/.test(value) ? JSON.parse(value) : value;
-            const pathValue = i >= values.length - 1 ? normalized : output[pathKey] || {};
-            output[pathKey] = pathValue;
-            output = output[pathKey];
+            const normalized = /^\[.*\]$/.test(value)
+                ? JSON.parse(value)
+                : value;
+            const pathValue = i >= values.length - 1 ? normalized : output[key] || {};
+            output[key] = pathValue;
+            if (i < values.length) {
+                output = output[key];
+            }
         });
         return object;
     }, {});

package/dist/components/breakpoints.js

@@ -0,0 +1,56 @@
+const IS_SERVER = typeof window === 'undefined';
+const IS_BROWSER = !IS_SERVER;
+
+class Breakpoint {
+    constructor() {
+        this.current = {
+            key: '',
+            name: '',
+        };
+        if (IS_BROWSER && !this.breakpointMap) {
+            const keys = this.getStyles('--post-breakpoint-keys');
+            const names = this.getStyles('--post-breakpoint-names');
+            const widths = this.getStyles('--post-breakpoint-widths');
+            this.breakpointMap = widths
+                .map((width, i) => ({
+                minWidth: Number(width),
+                key: keys[i],
+                name: names[i],
+            }))
+                .reverse();
+            window.addEventListener('resize', () => this.updateHandler(), { passive: true });
+        }
+    }
+    getStyles(propertyName) {
+        const styles = getComputedStyle(document.documentElement);
+        return (styles
+            .getPropertyValue(propertyName)
+            ?.split(',')
+            .map(w => w.trim()) ?? []);
+    }
+    updateHandler(emitEvents = true) {
+        const calculated = this.breakpointMap.find(({ minWidth }) => innerWidth >= minWidth);
+        if (this.current.key !== calculated.key) {
+            this.current.key = calculated.key;
+            if (emitEvents)
+                this.dispatchEvent('key');
+        }
+        if (this.current.name !== calculated.name) {
+            this.current.name = calculated.name;
+            if (emitEvents)
+                this.dispatchEvent('name');
+        }
+    }
+    dispatchEvent(type) {
+        if (IS_BROWSER) {
+            window.dispatchEvent(new CustomEvent(`postBreakpoint:${type}`, { detail: this.current[type] }));
+        }
+    }
+    get(type) {
+        this.updateHandler(false);
+        return this.current[type];
+    }
+}
+const breakpoint = new Breakpoint();
+
+export { IS_BROWSER as I, breakpoint as b };