@swisspost/design-system-components 10.0.0-next.39 → 10.0.0-next.41

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

@@ -1,43 +0,0 @@
-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/components/breakpoints.js

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

package/dist/components/event-guard.js

@@ -1,45 +0,0 @@
-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;
-}
-
-export { eventGuard as e };

package/dist/components/index2.js

@@ -1,88 +0,0 @@
-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 checkRequiredAndType = requiredAnd(checkType);
-const checkRequiredAndUrl = requiredAnd(checkUrl);
-
-export { checkEmptyOrOneOf as a, checkRequiredAndType as b, checkRequiredAndOneOf as c, checkEmptyOrType as d, checkEmptyOrPattern as e, checkRequiredAndUrl as f, checkEmptyOrUrl as g };

package/dist/components/package.js

@@ -1,3 +0,0 @@
-const version = "10.0.0-next.39";
-
-export { version as v };

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

@@ -1,103 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { H as HEADING_LEVELS } from './heading-levels.js';
-import { a as checkEmptyOrOneOf } from './index2.js';
-import './breakpoints.js';
-import { e as eventGuard } from './event-guard.js';
-import { n as nanoid } from './index.browser.js';
-import { d as defineCustomElement$3 } from './post-collapsible2.js';
-import { d as defineCustomElement$2 } from './post-collapsible-trigger2.js';
-import { d as defineCustomElement$1 } from './post-icon2.js';
-
-const postAccordionItemCss = ".accordion-item::after{display:block;content:\"\";margin-block-start:calc(var(--post-device-border-width-default)*-1);border-block-end:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}.accordion-item:has(.accordion-button:hover)::after{border-color:var(--post-scheme-color-interactive-primary-hover-stroke)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-item:has(.accordion-button:hover)::after{border-color:Highlight}}.accordion-header{color:var(--post-scheme-color-interactive-primary-enabled-fg1);font-size:var(--post-device-font-size-5);margin:0;line-height:var(--post-device-line-height-heading);font-weight:var(--post-device-font-weight-black)}.accordion-button{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;display:flex;position:relative;width:100%;align-items:center;text-align:start;gap:var(--post-device-spacing-gap-7);padding:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default)) calc(var(--post-device-spacing-padding-5) + var(--post-device-border-width-default));cursor:pointer}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button{background-color:ButtonFace !important}.accordion-button:hover{background-color:Highlight !important}}.accordion-button::before{display:block;position:absolute;content:\"\";inset:0;inset-block-end:auto;border-block-start:var(--post-accordion-button-border-top)}.accordion-button{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}.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.accordion-button slot::slotted(span[slot=header]){flex-grow:1}.accordion-button post-icon{flex:none;width:var(--post-core-dimension-24);aspect-ratio:1;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.accordion-button.collapsed{padding-block-start:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default));padding-block-end:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default))}.accordion-button.collapsed post-icon{transform:rotate(-180deg)}.accordion-button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.accordion-button>::slotted(.text-truncate){display:block}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover,.accordion-button:focus-visible{color:Highlight}}.accordion-body{padding-block-start:var(--post-device-spacing-padding-15);padding-block-end:calc(var(--post-device-spacing-padding-block-25) + var(--post-device-border-width-default));padding-inline:var(--post-device-spacing-padding-5)}.logo-container{display:none;width:var(--post-device-sizing-logo-1);aspect-ratio:1}.logo-container.has-image{display:block}.logo-container slot::slotted(img){display:block;width:100%;height:100%;object-fit:cover}.accordion-button>::slotted(:first-child),.accordion-body>::slotted(:first-child){margin-block-start:0 !important}.accordion-button>::slotted(:last-child),.accordion-body>::slotted(:last-child){margin-block-end:0 !important}";
-const PostAccordionItemStyle0 = postAccordionItemCss;
-
-const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionItem extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.id = undefined;
-        this.slottedLogo = undefined;
-        this.collapsed = false;
-        this.headingLevel = undefined;
-    }
-    validateHeadingLevel() {
-        checkEmptyOrOneOf(this, 'headingLevel', HEADING_LEVELS);
-    }
-    componentWillLoad() {
-        this.id = this.host.id || `p${nanoid(6)}`;
-    }
-    componentDidLoad() {
-        this.validateHeadingLevel();
-    }
-    // Capture to make sure the "collapsed" property is updated before the event is consumed
-    onCollapseToggle(event) {
-        eventGuard(this.host, event, { targetLocalName: 'post-collapsible', delegatorSelector: 'post-accordion-item' }, () => {
-            this.collapsed = !event.detail;
-        });
-    }
-    /**
-     * Triggers the collapse programmatically.
-     */
-    async toggle(force) {
-        return this.collapsible.toggle(force);
-    }
-    onSlotLogoChange() {
-        this.slottedLogo = this.host.querySelector('img[slot="logo"]');
-    }
-    componentWillRender() {
-        this.slottedLogo = this.host.querySelector('img[slot="logo"]');
-    }
-    render() {
-        const headingLevel = this.host.closest('post-accordion')?.getAttribute('heading-level');
-        const HeadingTag = `h${headingLevel ?? this.headingLevel ?? 2}`;
-        return (h(Host, { key: '4de770633e0c9b9bb92b92a66be9a1481bf0fb3e', id: this.id, "data-version": version }, h("div", { key: '4c2b91b25637cbe284442626d02d0ce6496589a4', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: '777f8b222b017b765f265296ad2829a027a99c22', for: `${this.id}--collapse` }, h(HeadingTag, { key: 'a646d911ea83c004fbc5490cb1e9dafdf490d09f', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: '0c30a665426b98fff997874c365ffc6b97ecc01c', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: '64edd8541af949f87ad929173c4a5210f892b0b6', class: {
-                'logo-container': true,
-                'has-image': !!this.slottedLogo,
-            } }, h("slot", { key: 'a3dfd1796d7c3b854980078673a017d58acb97ea', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: 'd008c9aebfd8431afa4eae1af8646dd7de97916b', name: "header" }), h("post-icon", { key: 'ee5150a9cd7693e57f639cf09d9c4f24aae57308', name: "2051" })))), h("post-collapsible", { key: '12d2ef55e0e7615619a0a246268e8af3d3d8e712', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: 'd2cf362418c50ad56f8dee8e43baabbd976682f9', class: "accordion-body", part: "body" }, h("slot", { key: '6792db26a9eab60e113d62e23faf003a6b43685b' }))))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "headingLevel": ["validateHeadingLevel"]
-    }; }
-    static get style() { return PostAccordionItemStyle0; }
-}, [1, "post-accordion-item", {
-        "collapsed": [1028],
-        "headingLevel": [2, "heading-level"],
-        "id": [32],
-        "slottedLogo": [32],
-        "toggle": [64]
-    }, [[2, "postToggle", "onCollapseToggle"]], {
-        "headingLevel": ["validateHeadingLevel"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-accordion-item", "post-collapsible", "post-collapsible-trigger", "post-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-accordion-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostAccordionItem);
-            }
-            break;
-        case "post-collapsible":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "post-collapsible-trigger":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "post-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { PostAccordionItem as P, defineCustomElement as d };

package/dist/components/post-avatar2.js

@@ -1,190 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { b as checkRequiredAndType, d as checkEmptyOrType, e as checkEmptyOrPattern } from './index2.js';
-import './breakpoints.js';
-
-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{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.initials span:not(caption){position:absolute !important}";
-const PostAvatarStyle0 = postAvatarCss;
-
-// 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 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 = /*@__PURE__*/ proxyCustomElement(class PostAvatar extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.firstname = undefined;
-        this.lastname = undefined;
-        this.userid = undefined;
-        this.email = undefined;
-        this.slottedImage = undefined;
-        this.avatarType = null;
-        this.imageUrl = '';
-        this.imageAlt = '';
-        this.initials = '';
-    }
-    validateFirstname() {
-        checkRequiredAndType(this, 'firstname', 'string');
-    }
-    validateLastname() {
-        checkEmptyOrType(this, 'lastname', 'string');
-    }
-    validateUserid() {
-        checkEmptyOrType(this, 'userid', 'string');
-    }
-    validateEmail() {
-        if (this.email)
-            checkEmptyOrPattern(this, 'email', emailPattern);
-    }
-    async getAvatar() {
-        if (this.slottedImage !== null) {
-            this.avatarType = AvatarType.Slotted;
-        }
-        else {
-            let imageLoaded = false;
-            if (!imageLoaded && this.userid)
-                imageLoaded = await this.getImageByProp(this.userid, this.fetchImageByUserId.bind(this));
-            if (!imageLoaded && this.email)
-                imageLoaded = await this.getImageByProp(this.email, this.fetchImageByEmail.bind(this));
-            if (!imageLoaded)
-                this.getAvatarByInitials();
-        }
-    }
-    async getImageByProp(prop, fetchImage) {
-        if (!prop)
-            return false;
-        const imageResponse = (await this.getStorageItem(prop)) ?? { ok: false, url: '' };
-        if (!imageResponse.ok) {
-            try {
-                const r = await fetchImage();
-                imageResponse.ok = r.ok;
-                imageResponse.url = r.url;
-                this.imageUrl = imageResponse.url;
-                this.imageAlt = `${this.firstname} ${this.lastname} avatar`;
-                this.avatarType = AvatarType.Image;
-                this.setStorageItem(this.userid, JSON.stringify(imageResponse));
-            }
-            catch (error) {
-                this.removeStorageItem(prop);
-                console.info(`Loading avatar by type "${AvatarType.Image}" failed.`);
-            }
-        }
-        return imageResponse.ok;
-    }
-    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);
-    }
-    getAvatarByInitials() {
-        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 getStorageItem(keyToken) {
-        const key = await this.cryptify(keyToken);
-        const value = window?.sessionStorage?.getItem(key);
-        return value ? JSON.parse(value) : null;
-    }
-    async setStorageItem(keyToken, value) {
-        const key = await this.cryptify(keyToken);
-        window?.sessionStorage?.setItem(key, value);
-    }
-    async removeStorageItem(keyToken) {
-        const key = await this.cryptify(keyToken);
-        window?.sessionStorage?.removeItem(key);
-    }
-    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('');
-        });
-    }
-    onSlotDefaultChange() {
-        this.slottedImage = this.host.querySelector('img');
-        this.getAvatar();
-    }
-    componentWillRender() {
-        this.slottedImage = this.host.querySelector('img');
-        this.getAvatar();
-    }
-    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("slot", { onSlotchange: this.onSlotDefaultChange.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": ["validateUserid"],
-        "email": ["validateEmail"]
-    }; }
-    static get style() { return PostAvatarStyle0; }
-}, [1, "post-avatar", {
-        "firstname": [513],
-        "lastname": [1],
-        "userid": [1],
-        "email": [1],
-        "slottedImage": [32],
-        "avatarType": [32],
-        "imageUrl": [32],
-        "imageAlt": [32],
-        "initials": [32]
-    }, undefined, {
-        "firstname": ["validateFirstname"],
-        "lastname": ["validateLastname"],
-        "userid": ["validateUserid"],
-        "email": ["validateEmail"]
-    }]);
-PostAvatar.INTERNAL_USERID_IMAGE_SRC = 'https://web.post.ch/UserProfileImage/{userid}.png';
-function defineCustomElement() {
-    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);
-            }
-            break;
-    } });
-}
-
-export { PostAvatar as P, defineCustomElement as d };

package/dist/components/post-back-to-top2.js

@@ -1,118 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { s as slideDown, a as slideUp } from './slide.js';
-import { v as version } from './package.js';
-import { b as checkRequiredAndType } from './index2.js';
-import './breakpoints.js';
-import { d as defineCustomElement$1 } from './post-icon2.js';
-
-const postBackToTopCss = ":host{--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 PostBackToTopStyle0 = postBackToTopCss;
-
-const PostBackToTop = /*@__PURE__*/ proxyCustomElement(class PostBackToTop extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.handleScroll = () => {
-            this.belowFold = this.isBelowFold();
-        };
-        this.label = undefined;
-        this.belowFold = false;
-    }
-    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) {
-            slideDown(this.host, this.translateY);
-        }
-        else {
-            slideUp(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) {
-            slideDown(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: '7edc6db9d849cf9ce0308a2ac5b2c2f9bc4e47a9', "data-version": version }, h("button", { key: '610e81756ce3dd927f55d48beb8cd829b66fc247', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: 'bb1f3cc462de7680361f4cfd04abb1816aebd488', "aria-hidden": "true", name: "3026" }), h("span", { key: '4fbd84d78c425140adea5833450cef60af967f5a', class: "visually-hidden" }, this.label))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "label": ["validateLabel"],
-        "belowFold": ["watchBelowFold"]
-    }; }
-    static get style() { return PostBackToTopStyle0; }
-}, [1, "post-back-to-top", {
-        "label": [513],
-        "belowFold": [32]
-    }, undefined, {
-        "label": ["validateLabel"],
-        "belowFold": ["watchBelowFold"]
-    }]);
-function defineCustomElement() {
-    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);
-            }
-            break;
-        case "post-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { PostBackToTop as P, defineCustomElement as d };