@swisspost/design-system-components 10.0.0-next.47 → 10.0.0-next.49

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

@@ -0,0 +1,218 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-DO48NanC.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;
+async function 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('');
+    });
+}
+const GRAVATAR_BASE_URL = `https://www.gravatar.com/avatar/{email}?s=${GRAVATAR_SIZE}&d=${GRAVATAR_DEFAULT}&r=${GRAVATAR_RATING}`;
+
+const postAvatarCss = ":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();
+    }
+    validateDescription() {
+        checkEmptyOrType(this, 'description', 'string');
+    }
+    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.avatarType = AvatarType.Initials;
+            }
+        }
+        else {
+            const slottedImageLoaded = await this.getImageByProp(imageUrl, this.fetchSlottedImage.bind(this));
+            if (!slottedImageLoaded) {
+                this.slottedImage.style.display = 'none';
+                this.avatarType = AvatarType.Initials;
+            }
+            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 cryptify(this.email);
+        const imageUrl = GRAVATAR_BASE_URL.replace('{email}', email);
+        return await fetch(imageUrl);
+    }
+    async fetchSlottedImage(imageUrl) {
+        return await fetch(imageUrl, { method: 'HEAD' });
+    }
+    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.avatarType = AvatarType.Initials;
+        this.getAvatarImage();
+    }
+    componentDidLoad() {
+        this.validateFirstname();
+        this.validateLastname();
+        this.validateDescription();
+        this.validateUserId();
+        this.validateEmail();
+    }
+    render() {
+        const names = [this.firstname, this.lastname].filter(n => n).map(n => n.trim());
+        const initials = names
+            .map(n => n.charAt(0))
+            .join('')
+            .trim();
+        const fullname = names.join(' ');
+        return (h(Host, { key: '9e596623d1949c62b1f110e311b839d244b249ef', "data-version": version }, h("span", { key: '6722e4096cb0d2f8b5d171f0d84fef98f74e1cd7', class: this.avatarType === 'slotted' ? '' : 'd-none' }, h("slot", { key: '95e8809133eb0de4382e9dc521eda877a6be5a8b', onSlotchange: this.slotChanged.bind(this) })), this.avatarType === 'image' && h("img", { key: 'cb2ed3eab02f28369911997a94617efaeaa5c00a', src: this.imageUrl, alt: this.imageAlt }), this.avatarType === 'initials' && (h("span", { key: '5565b06795c4651537b20e9abd33492d7cb8a9d1', class: "initials" }, initials, h("span", { key: '58ac3ee3a664a13ff82fc201e04e1896e409fbf1' }, this.description ?? fullname)))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "firstname": ["validateFirstname"],
+        "lastname": ["validateLastname"],
+        "userid": ["updateUserid"],
+        "email": ["updateEmail"],
+        "description": ["validateDescription"]
+    }; }
+    static get style() { return postAvatarCss; }
+}, [1, "post-avatar", {
+        "firstname": [513],
+        "lastname": [1],
+        "userid": [1],
+        "email": [1],
+        "description": [1],
+        "slottedImage": [32],
+        "avatarType": [32],
+        "imageUrl": [32],
+        "imageAlt": [32],
+        "initials": [32],
+        "storageKey": [32]
+    }, undefined, {
+        "firstname": ["validateFirstname"],
+        "lastname": ["validateLastname"],
+        "userid": ["updateUserid"],
+        "email": ["updateEmail"],
+        "description": ["validateDescription"]
+    }]);
+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-DO48NanC.js';
+import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
+import './p-CJ80BZ06.js';
+import { d as defineCustomElement$2 } from './p-Amg0f2Yo.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: '51abef7d1f650da1476689c46d853f49669da856', "data-version": version }, h("button", { key: '9de175f7962448fa3d658e4a24b01a857925a5b7', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '281a177c37cbf98d72a0d6359483750762026b23', "aria-hidden": "true", name: "3026" }), h("span", { key: '9c019806112c905bb6ba2e8ac4da85bcbd334566', 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;