@swisspost/design-system-components 10.0.0-next.46 → 10.0.0-next.48

package/dist/components/react/p-SbIC4aZX.js

@@ -0,0 +1,11 @@
+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 };

package/dist/components/{p-Cd5RHPSU.js → react/p-Tg0GNTZM.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-7hVD-I9l.js';
+import { v as version } from './p-0Ltezq5O.js';
 import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
 import './p-CJ80BZ06.js';
-import { E as EventFrom } from './p-8U5GFtQP.js';
+import { E as EventFrom } from './p-kraHE1r3.js';
 import { g as getRoot } from './p-CBFgkSgY.js';
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {

package/dist/{esm/event-from-8U5GFtQP.js → components/react/p-kraHE1r3.js}

@@ -7,7 +7,7 @@
  * @returns true if the event should be processed, false otherwise
  */
 function shouldProcessEvent(event, tag, host, ignoreNestedComponents) {
-    if (!(event instanceof CustomEvent && event.target instanceof HTMLElement))
+    if (!(event instanceof Event && event.target instanceof HTMLElement))
         return false;
     const eventTarget = event.target;
     if (eventTarget.localName !== tag)
@@ -38,7 +38,7 @@ function EventFrom(tag, option = { ignoreNestedComponents: true }) {
             };
         }
         else {
-            // Creates a hidden storage property for the original method using a 
+            // 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

package/dist/components/{p-DQE6fqIb.js → react/p-q8Fvf8A0.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { v as version } from './p-7hVD-I9l.js';
+import { v as version } from './p-0Ltezq5O.js';
 import { I as IS_BROWSER } from './p-CJ80BZ06.js';
 import { e as checkEmptyOrType } from './p-CV7fm1rW.js';
 

package/dist/components/react/p-r4txK0AC.js

@@ -0,0 +1,3 @@
+const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
+
+export { HEADING_LEVELS as H };

package/dist/components/react/post-accordion-item.d.ts

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

package/dist/components/react/post-accordion-item.js

@@ -0,0 +1,6 @@
+import { P as PostAccordionItem$1, d as defineCustomElement$1 } from './p-CiYSngKM.js';
+
+const PostAccordionItem = PostAccordionItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostAccordionItem, defineCustomElement };

package/dist/components/react/post-accordion.d.ts

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

package/dist/components/react/post-accordion.js

@@ -0,0 +1,6 @@
+import { P as PostAccordion$1, d as defineCustomElement$1 } from './p-Dq9F2i7n.js';
+
+const PostAccordion = PostAccordion$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostAccordion, defineCustomElement };

package/dist/components/react/post-avatar.d.ts

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

package/dist/components/react/post-avatar.js

@@ -0,0 +1,226 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-0Ltezq5O.js';
+import { c as checkRequiredAndType, e as checkEmptyOrType, f as checkEmptyOrPattern } from './p-CV7fm1rW.js';
+import './p-CJ80BZ06.js';
+
+// https://docs.gravatar.com/api/avatars/images/
+const GRAVATAR_DEFAULT = '404';
+const GRAVATAR_RATING = 'g';
+const GRAVATAR_SIZE = 80;
+const GRAVATAR_BASE_URL = `https://www.gravatar.com/avatar/{email}?s=${GRAVATAR_SIZE}&d=${GRAVATAR_DEFAULT}&r=${GRAVATAR_RATING}`;
+
+const postAvatarCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}:host{--post-avatar-bg:var(--post-scheme-color-interactive-primary-enabled-bg2);--post-avatar-fg:var(--post-scheme-color-interactive-primary-enabled-fg3);display:inline-flex;position:relative;width:var(--post-device-sizing-interactive-icon-size3);height:var(--post-device-sizing-interactive-icon-size3);background-color:var(--post-scheme-color-interactive-primary-enabled-stroke3);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke3);border-radius:var(--post-device-border-radius-round);font-size:var(--post-device-font-size-8);vertical-align:top;line-height:1}:host::after{display:block;content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit}*,*::before,*::after{box-sizing:border-box}slot,img,::slotted(img){display:block;width:100%;height:100%}img,::slotted(img){border-radius:var(--post-device-border-radius-round)}::slotted(:not(img)){display:none !important}.initials{display:flex;justify-content:center;align-items:center;position:relative;z-index:2;width:100%;height:100%;background-color:var(--post-avatar-bg);border-radius:var(--post-device-border-radius-round);color:var(--post-avatar-fg);text-transform:uppercase}.initials span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+
+const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+var AvatarType;
+(function (AvatarType) {
+    AvatarType["Slotted"] = "slotted";
+    AvatarType["Image"] = "image";
+    AvatarType["Initials"] = "initials";
+    AvatarType[AvatarType["Null"] = null] = "Null";
+})(AvatarType || (AvatarType = {}));
+const PostAvatar$1 = /*@__PURE__*/ proxyCustomElement(class PostAvatar extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.avatarType = null;
+        this.imageUrl = '';
+        this.imageAlt = '';
+        this.initials = '';
+        // To handle email or userid updates and reset the storage item
+        this.storageKey = '';
+    }
+    validateFirstname() {
+        checkRequiredAndType(this, 'firstname', 'string');
+    }
+    validateLastname() {
+        checkEmptyOrType(this, 'lastname', 'string');
+    }
+    updateUserid() {
+        this.validateUserId();
+        this.getAvatarImage();
+    }
+    updateEmail() {
+        this.validateEmail();
+        this.getAvatarImage();
+    }
+    validateUserId() {
+        checkEmptyOrType(this, 'userid', 'string');
+    }
+    validateEmail() {
+        if (this.email)
+            checkEmptyOrPattern(this, 'email', emailPattern);
+    }
+    async getAvatarImage() {
+        let imageLoaded = false;
+        this.slottedImage = this.host.querySelector('img');
+        const imageUrl = this.slottedImage?.getAttribute('src');
+        if (!imageUrl) {
+            if (this.userid) {
+                imageLoaded = await this.getImageByProp(this.userid, this.fetchImageByUserId.bind(this));
+            }
+            if (!imageLoaded && this.email?.match(emailPattern)) {
+                imageLoaded = await this.getImageByProp(this.email, this.fetchImageByEmail.bind(this));
+            }
+            if (!imageLoaded) {
+                this.getAvatarInitials();
+            }
+        }
+        else {
+            const slottedImageLoaded = await this.getImageByProp(imageUrl, this.fetchSlottedImage.bind(this));
+            if (!slottedImageLoaded) {
+                this.slottedImage.style.display = 'none';
+                this.getAvatarInitials();
+            }
+            else {
+                this.slottedImage.style.display = 'block';
+            }
+        }
+    }
+    async getImageByProp(prop, fetchImage) {
+        if (!prop)
+            return false;
+        let imageResponse;
+        try {
+            imageResponse = await fetchImage(prop);
+        }
+        catch (error) {
+            console.info('Loading avatar image failed.', error);
+            return false;
+        }
+        if (!imageResponse?.ok) {
+            return false;
+        }
+        else {
+            this.imageUrl = imageResponse.url;
+            this.imageAlt = `${this.firstname} ${this.lastname} avatar`;
+            this.avatarType = AvatarType.Image;
+            return true;
+        }
+    }
+    async fetchImageByUserId() {
+        return await fetch(PostAvatar.INTERNAL_USERID_IMAGE_SRC.replace('{userid}', encodeURIComponent(this.userid)));
+    }
+    async fetchImageByEmail() {
+        const email = await this.cryptify(this.email);
+        const imageUrl = GRAVATAR_BASE_URL.replace('{email}', email);
+        return await fetch(imageUrl);
+    }
+    async fetchSlottedImage(imageUrl) {
+        return await fetch(imageUrl, { method: 'HEAD' });
+    }
+    getAvatarInitials() {
+        this.initials = this.getInitials();
+        this.avatarType = AvatarType.Initials;
+    }
+    getNames() {
+        return [this.firstname, this.lastname].filter(n => n);
+    }
+    getInitials() {
+        return this.getNames()
+            .map(n => n.charAt(0))
+            .join('')
+            .trim();
+    }
+    async cryptify(key) {
+        return await crypto.subtle.digest('SHA-256', new TextEncoder().encode(key)).then(buffer => {
+            return Array.from(new Uint8Array(buffer))
+                .map(bytes => bytes.toString(16).padStart(2, '0'))
+                .join('');
+        });
+    }
+    slotChanged() {
+        const slot = this.host.shadowRoot.querySelector('slot');
+        const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];
+        assignedNodes.forEach(node => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                if (el.tagName === 'IMG') {
+                    this.observeImageSrcChanges(el);
+                }
+            }
+        });
+        this.getAvatarImage();
+    }
+    // Observe the Slotted image src attribute and update the image
+    observeImageSrcChanges(img) {
+        if (this.slottedImageObserver) {
+            this.slottedImageObserver.disconnect();
+        }
+        this.slottedImageObserver = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
+                    this.getAvatarImage();
+                }
+            });
+        });
+        this.slottedImageObserver.observe(img, { attributes: true, attributeFilter: ['src'] });
+    }
+    connectedCallback() {
+        //This provides a fallback by showing the initials while the image is still loading or delayed.
+        this.getAvatarInitials();
+        this.getAvatarImage();
+    }
+    componentDidLoad() {
+        this.validateFirstname();
+        this.validateLastname();
+        this.validateUserId();
+        this.validateEmail();
+    }
+    render() {
+        const initials = this.getNames().reduce((acc, n, i) => {
+            if (i > 0)
+                acc.push(h("span", null, " "));
+            acc.push(n.charAt(0));
+            acc.push(h("span", null, n.slice(1)));
+            // eslint-disable-next-line @stencil-community/render-returns-host
+            return acc;
+        }, []);
+        return (h(Host, { "data-version": version }, h("span", { class: this.avatarType === 'slotted' ? '' : 'd-none' }, h("slot", { onSlotchange: this.slotChanged.bind(this) })), this.avatarType === 'image' && h("img", { src: this.imageUrl, alt: this.imageAlt }), this.avatarType === 'initials' && h("div", { class: "initials" }, initials)));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "firstname": ["validateFirstname"],
+        "lastname": ["validateLastname"],
+        "userid": ["updateUserid"],
+        "email": ["updateEmail"]
+    }; }
+    static get style() { return postAvatarCss; }
+}, [1, "post-avatar", {
+        "firstname": [513],
+        "lastname": [1],
+        "userid": [1],
+        "email": [1],
+        "slottedImage": [32],
+        "avatarType": [32],
+        "imageUrl": [32],
+        "imageAlt": [32],
+        "initials": [32],
+        "storageKey": [32]
+    }, undefined, {
+        "firstname": ["validateFirstname"],
+        "lastname": ["validateLastname"],
+        "userid": ["updateUserid"],
+        "email": ["updateEmail"]
+    }]);
+PostAvatar$1.INTERNAL_USERID_IMAGE_SRC = 'https://web.post.ch/UserProfileImage/{userid}.png';
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-avatar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-avatar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostAvatar$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const PostAvatar = PostAvatar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostAvatar, defineCustomElement };

package/dist/components/react/post-back-to-top.d.ts

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

package/dist/components/react/post-back-to-top.js

@@ -0,0 +1,145 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-0Ltezq5O.js';
+import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
+import './p-CJ80BZ06.js';
+import { d as defineCustomElement$2 } from './p-Da5wbVP8.js';
+
+// Define common animation options
+const easing = 'ease';
+const defaultDuration = 500;
+const fill = 'forwards';
+function createSlideFadeAnimation(el, keyframes, duration = defaultDuration) {
+    return el.animate(keyframes, {
+        duration: duration,
+        easing,
+        fill,
+    });
+}
+function slideUpAndFadeOut(el, translateY = '-100%', duration = defaultDuration) {
+    const keyframes = [
+        { transform: 'translateY(0)', opacity: '1' },
+        { transform: `translateY(${translateY})`, opacity: '0' },
+    ];
+    return createSlideFadeAnimation(el, keyframes, duration);
+}
+function slideDownAndFadeIn(el, translateY = '-100%', duration = defaultDuration) {
+    const keyframes = [
+        { transform: `translateY(${translateY})`, opacity: '0' },
+        { transform: 'translateY(0)', opacity: '1' },
+    ];
+    return createSlideFadeAnimation(el, keyframes, duration);
+}
+
+const postBackToTopCss = ":host{opacity:0;--post-floating-button-position-top:var(--post-device-position-4);--post-back-to-top-position-top:calc( var(--post-header-height) + var(--post-floating-button-position-top) );--post-back-to-top-elevation:var(--post-device-elevation-300);position:fixed;inset-block-start:var(--post-back-to-top-position-top);inset-inline-end:var(--post-device-position-1)}:host .back-to-top{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;box-shadow:var(--post-back-to-top-elevation);cursor:pointer;border-radius:var(--post-device-border-radius-round);width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);display:flex;align-items:center;justify-content:center}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top{background-color:ButtonFace !important}:host .back-to-top:hover{background-color:Highlight !important}}:host .back-to-top{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:host .back-to-top:hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:hover{color:HighlightText !important}}:host .back-to-top post-icon{height:var(--post-device-sizing-interactive-button-icon-3);width:var(--post-device-sizing-interactive-button-icon-3)}:host .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+
+const PostBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.belowFold = false;
+        this.handleScroll = () => {
+            this.belowFold = this.isBelowFold();
+        };
+    }
+    isBelowFold() {
+        return window.scrollY > window.innerHeight;
+    }
+    validateLabel() {
+        checkRequiredAndType(this, 'label', 'string');
+    }
+    /*Watch for changes in belowFold to show/hide the back to top button*/
+    watchBelowFold(newValue) {
+        if (newValue) {
+            slideDownAndFadeIn(this.host, this.translateY);
+        }
+        else {
+            slideUpAndFadeOut(this.host, this.translateY);
+        }
+    }
+    scrollToTop() {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth',
+        });
+    }
+    getSecondPixelValue(parts) {
+        for (const part of parts) {
+            const pixelValues = part.match(/\b\d+px\b/g);
+            if (pixelValues && pixelValues.length > 1) {
+                return pixelValues[1];
+            }
+        }
+    }
+    animateButton() {
+        // Get the back-to-top button top postiion
+        const positionTop = window.getComputedStyle(this.host).getPropertyValue('top');
+        const buttonElement = this.host.shadowRoot.querySelector('button');
+        // Extract the elevation height from the back-to-top button elevation token
+        const elevation = getComputedStyle(buttonElement).getPropertyValue('--post-back-to-top-elevation');
+        const elevationParts = elevation.split(',');
+        const elevationHeight = this.getSecondPixelValue(elevationParts);
+        // The translateY is calculated as => -100% (btt button height) - topPosition - elevationHeight
+        this.translateY =
+            String((-1 * 100) / 100 -
+                parseFloat(positionTop.replace('px', '')) -
+                parseFloat(elevationHeight.replace('px', ''))) + 'px';
+        if (this.belowFold) {
+            slideDownAndFadeIn(this.host, this.translateY);
+        }
+        if (!this.belowFold) {
+            this.host.style.transform = `translateY(${this.translateY})`;
+        }
+    }
+    // Set the initial state
+    componentWillLoad() {
+        this.belowFold = this.isBelowFold();
+    }
+    componentDidLoad() {
+        window.addEventListener('scroll', this.handleScroll, false);
+        this.animateButton();
+        this.validateLabel();
+    }
+    disconnectedCallback() {
+        window.removeEventListener('scroll', this.handleScroll);
+    }
+    render() {
+        return (h(Host, { key: '820244e9c039304895d78887000ed986707bf3b1', "data-version": version }, h("button", { key: 'c1d38883fbf31c50b2b00e08e6b22cbc6be37adb', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '3cc57c355a12bf500f368e906d147be10f9014e7', "aria-hidden": "true", name: "3026" }), h("span", { key: '134e5c579e2d99d64c25ce21ab538e51520a6dd6', class: "visually-hidden" }, this.label))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "label": ["validateLabel"],
+        "belowFold": ["watchBelowFold"]
+    }; }
+    static get style() { return postBackToTopCss; }
+}, [1, "post-back-to-top", {
+        "label": [513],
+        "belowFold": [32]
+    }, undefined, {
+        "label": ["validateLabel"],
+        "belowFold": ["watchBelowFold"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-back-to-top", "post-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-back-to-top":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostBackToTop$1);
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const PostBackToTop = PostBackToTop$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostBackToTop, defineCustomElement };

package/dist/components/react/post-banner.d.ts

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