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

package/dist/components/post-accordion2.js

@@ -1,138 +1 @@
-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 { b as checkRequiredAndOneOf } from './index2.js';
-import './breakpoints.js';
-import { E as EventFrom } from './event-from.js';
-
-const postAccordionCss = ":host{display:block}::slotted(post-accordion-item){display:block}::slotted(post-accordion-item:not(:only-of-type:first-of-type)){margin-block-start:calc(var(--post-device-border-width-default)*-1)}";
-
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.expandedItems = new Set();
-        /**
-         * If `true`, multiple `post-accordion-item` can be open at the same time.
-         */
-        this.multiple = false;
-    }
-    validateHeadingLevel() {
-        checkRequiredAndOneOf(this, 'headingLevel', HEADING_LEVELS);
-        this.accordionItems.forEach(item => {
-            item.setAttribute('heading-level', String(this.headingLevel));
-        });
-    }
-    componentWillLoad() {
-        this.registerAccordionItems();
-    }
-    componentDidLoad() {
-        this.validateHeadingLevel();
-    }
-    collapseToggleHandler(event) {
-        const toggledAccordionItem = event.target;
-        const isClosing = this.expandedItems.has(toggledAccordionItem);
-        if (isClosing) {
-            this.expandedItems.delete(toggledAccordionItem);
-        }
-        else {
-            this.expandedItems.add(toggledAccordionItem);
-        }
-        if (this.multiple || isClosing)
-            return;
-        // Close other open accordion items to ensure only one is open at a time
-        Array.from(this.expandedItems.values())
-            .filter(item => item !== toggledAccordionItem)
-            .forEach(item => {
-            item.toggle(false);
-        });
-    }
-    /**
-     * Toggles the `post-accordion-item` with the given id.
-     */
-    async toggle(id) {
-        const itemToToggle = this.accordionItems.find(item => item.id === id);
-        if (!itemToToggle)
-            throw new Error(`No post-accordion-item found with id #${id}.`);
-        await itemToToggle.toggle();
-    }
-    /**
-     * Expands all `post-accordion-item`.
-     *
-     * If `multiple="true"` is not set and all items are closed, it will open the first one.
-     * Otherwise, it will keep the opened one.
-     */
-    async expandAll() {
-        if (this.multiple) {
-            await Promise.all(this.accordionItems.map(item => item.toggle(true)));
-        }
-        else if (!this.expandedItems.size) {
-            await this.accordionItems[0].toggle(true);
-        }
-    }
-    /**
-     * Collapses all `post-accordion-item`.
-     */
-    async collapseAll() {
-        await Promise.all(this.accordionItems.map(item => item.toggle(false)));
-    }
-    registerAccordionItems() {
-        this.accordionItems = Array.from(this.host.querySelectorAll('post-accordion-item'));
-        this.accordionItems
-            .filter(item => {
-            return !item.collapsed || this.expandedItems.has(item);
-        })
-            .forEach((item, index) => {
-            if (!this.multiple && index !== 0) {
-                item.setAttribute('collapsed', '');
-                return;
-            }
-            this.expandedItems.add(item);
-        });
-    }
-    render() {
-        return (h(Host, { key: '470d8a7646796044df8f9cf1ebfc113e5c8db960', "data-version": version }, h("div", { key: '360ad1fe885dbb3c61a5c026ea253e7fba81ef9e', class: "accordion" }, h("slot", { key: '9e14d7906cba560a848986787159f56c961c78db', onSlotchange: () => this.registerAccordionItems() }))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "headingLevel": ["validateHeadingLevel"]
-    }; }
-    static get style() { return postAccordionCss; }
-}, [1, "post-accordion", {
-        "headingLevel": [514, "heading-level"],
-        "multiple": [4],
-        "toggle": [64],
-        "expandAll": [64],
-        "collapseAll": [64]
-    }, [[0, "postToggle", "collapseToggleHandler"]], {
-        "headingLevel": ["validateHeadingLevel"]
-    }]);
-__decorate([
-    EventFrom('post-accordion-item')
-], PostAccordion.prototype, "collapseToggleHandler", null);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-accordion"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-accordion":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostAccordion);
-            }
-            break;
-    } });
-}
-
-export { PostAccordion as P, defineCustomElement as d };
+import{proxyCustomElement as e,HTMLElement as t,h as o,Host as s,transformTag as i}from"@stencil/core/internal/client";import{v as a}from"./package.js";import{H as l}from"./heading-levels.js";import{b as r}from"./breakpoints.js";import{E as c}from"./event-from.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.expandedItems=new Set,this.multiple=!1}validateHeadingLevel(){r(this,"headingLevel",l),this.accordionItems.forEach((e=>{e.setAttribute("heading-level",String(this.headingLevel))}))}componentWillLoad(){this.registerAccordionItems()}componentDidLoad(){this.validateHeadingLevel()}collapseToggleHandler(e){const t=e.target,o=this.expandedItems.has(t);o?this.expandedItems.delete(t):this.expandedItems.add(t),this.multiple||o||Array.from(this.expandedItems.values()).filter((e=>e!==t)).forEach((e=>{e.toggle(!1)}))}async toggle(e){const t=this.accordionItems.find((t=>t.id===e));if(!t)throw new Error(`No post-accordion-item found with id #${e}.`);await t.toggle()}async expandAll(){this.multiple?await Promise.all(this.accordionItems.map((e=>e.toggle(!0)))):this.expandedItems.size||await this.accordionItems[0].toggle(!0)}async collapseAll(){await Promise.all(this.accordionItems.map((e=>e.toggle(!1))))}registerAccordionItems(){this.accordionItems=Array.from(this.host.querySelectorAll("post-accordion-item")),this.accordionItems.filter((e=>!e.collapsed||this.expandedItems.has(e))).forEach(((e,t)=>{this.multiple||0===t?this.expandedItems.add(e):e.setAttribute("collapsed","")}))}render(){return o(s,{key:"470d8a7646796044df8f9cf1ebfc113e5c8db960","data-version":a},o("div",{key:"360ad1fe885dbb3c61a5c026ea253e7fba81ef9e",class:"accordion"},o("slot",{key:"9e14d7906cba560a848986787159f56c961c78db",onSlotchange:()=>this.registerAccordionItems()})))}get host(){return this}static get watchers(){return{headingLevel:[{validateHeadingLevel:0}]}}static get style(){return":host{display:block;border-block-start:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}"}},[257,"post-accordion",{headingLevel:[514,"heading-level"],multiple:[4],toggle:[64],expandAll:[64],collapseAll:[64]},[[0,"postToggle","collapseToggleHandler"]],{headingLevel:[{validateHeadingLevel:0}]}]);function d(){"undefined"!=typeof customElements&&["post-accordion"].forEach((e=>{"post-accordion"===e&&(customElements.get(i(e))||customElements.define(i(e),n))}))}!function(e,t,o,s){var i,a=arguments.length,l=a<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,s);else for(var r=e.length-1;r>=0;r--)(i=e[r])&&(l=(a<3?i(l):a>3?i(t,o,l):i(t,o))||l);a>3&&l&&Object.defineProperty(t,o,l)}([c("post-accordion-item")],n.prototype,"collapseToggleHandler",null);export{n as P,d}

package/dist/components/post-avatar.js

@@ -1,217 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { c as checkRequiredAndType, e as checkEmptyOrType, g as checkEmptyOrPattern } from './index2.js';
-import './breakpoints.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;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;font-weight:400}.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 HTMLElement {
-    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;
-    } });
-}
-
-const PostAvatar = PostAvatar$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostAvatar, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as e,h as i,Host as a,transformTag as s}from"@stencil/core/internal/client";import{v as r}from"./package.js";import{c as n,e as o,i as d}from"./breakpoints.js";const c=/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;var h;!function(t){t.Slotted="slotted",t.Image="image",t.Initials="initials",t[t.Null=null]="Null"}(h||(h={}));const l=t(class t extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.avatarType=null,this.imageUrl="",this.imageAlt="",this.initials="",this.storageKey=""}validateFirstname(){n(this,"firstname","string")}validateLastname(){o(this,"lastname","string")}updateUserid(){this.validateUserId(),this.getAvatarImage()}updateEmail(){this.validateEmail(),this.getAvatarImage()}validateDescription(){o(this,"description","string")}validateUserId(){o(this,"userid","string")}validateEmail(){this.email&&d(this,"email",c)}async getAvatarImage(){let t=!1;this.slottedImage=this.host.querySelector("img");const e=this.slottedImage?.getAttribute("src");e?await this.getImageByProp(e,this.fetchSlottedImage.bind(this))?this.slottedImage.style.display="block":(this.slottedImage.style.display="none",this.avatarType=h.Initials):(this.userid&&(t=await this.getImageByProp(this.userid,this.fetchImageByUserId.bind(this))),!t&&this.email?.match(c)&&(t=await this.getImageByProp(this.email,this.fetchImageByEmail.bind(this))),t||(this.avatarType=h.Initials))}async getImageByProp(t,e){if(!t)return!1;let i;try{i=await e(t)}catch(t){return console.info("Loading avatar image failed.",t),!1}return!!i?.ok&&(this.imageUrl=i.url,this.imageAlt=`${this.firstname} ${this.lastname} avatar`,this.avatarType=h.Image,!0)}async fetchImageByUserId(){return await fetch(t.INTERNAL_USERID_IMAGE_SRC.replace("{userid}",encodeURIComponent(this.userid)))}async fetchImageByEmail(){const t=await async function(t){return await crypto.subtle.digest("SHA-256",(new TextEncoder).encode(t)).then((t=>Array.from(new Uint8Array(t)).map((t=>t.toString(16).padStart(2,"0"))).join("")))}(this.email),e="https://www.gravatar.com/avatar/{email}?s=80&d=404&r=g".replace("{email}",t);return await fetch(e)}async fetchSlottedImage(t){return await fetch(t,{method:"HEAD"})}slotChanged(){const t=this.host.shadowRoot.querySelector("slot");(t?.assignedNodes({flatten:!0})||[]).forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&"IMG"===t.tagName&&this.observeImageSrcChanges(t)})),this.getAvatarImage()}observeImageSrcChanges(t){this.slottedImageObserver&&this.slottedImageObserver.disconnect(),this.slottedImageObserver=new MutationObserver((t=>{t.forEach((t=>{"attributes"===t.type&&"src"===t.attributeName&&this.getAvatarImage()}))})),this.slottedImageObserver.observe(t,{attributes:!0,attributeFilter:["src"]})}connectedCallback(){this.avatarType=h.Initials,this.getAvatarImage()}componentDidLoad(){this.validateFirstname(),this.validateLastname(),this.validateDescription(),this.validateUserId(),this.validateEmail()}render(){const t=[this.firstname,this.lastname].filter((t=>t)).map((t=>t.trim())),e=t.map((t=>t.charAt(0))).join("").trim(),s=t.join(" ");return i(a,{key:"620b361e23a70143903abd7bf10bcd804f959042","data-version":r},i("span",{key:"cc3752d89187f0c08dedf2952676de1aaaa59a8a",class:"slotted"===this.avatarType?"":"d-none"},i("slot",{key:"dbba7fc0522b177f6ad467f0e22dad9065582ce7",onSlotchange:this.slotChanged.bind(this)})),"image"===this.avatarType&&i("img",{key:"375eeeab749e09bc21d215aa80cf45309a15620e",src:this.imageUrl,alt:this.imageAlt}),"initials"===this.avatarType&&i("span",{key:"620d25537ef0f606933e9c7deb915a87fbc4b95c",class:"initials"},e,i("span",{key:"03dc6aacddc2af35c114fc6815550e0ec461937d"},this.description??s)))}get host(){return this}static get watchers(){return{firstname:[{validateFirstname:0}],lastname:[{validateLastname:0}],userid:[{updateUserid:0}],email:[{updateEmail:0}],description:[{validateDescription:0}]}}static get style(){return':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;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;font-weight:400}.initials span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}'}},[257,"post-avatar",{firstname:[513],lastname:[1],userid:[1],email:[1],description:[1],slottedImage:[32],avatarType:[32],imageUrl:[32],imageAlt:[32],initials:[32],storageKey:[32]},void 0,{firstname:[{validateFirstname:0}],lastname:[{validateLastname:0}],userid:[{updateUserid:0}],email:[{updateEmail:0}],description:[{validateDescription:0}]}]);l.INTERNAL_USERID_IMAGE_SRC="https://web.post.ch/UserProfileImage/{userid}.png";const p=l,m=function(){"undefined"!=typeof customElements&&["post-avatar"].forEach((t=>{"post-avatar"===t&&(customElements.get(s(t))||customElements.define(s(t),l))}))};export{p as PostAvatar,m as defineCustomElement}

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

@@ -1,144 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { c as checkRequiredAndType } from './index2.js';
-import './breakpoints.js';
-import { d as defineCustomElement$2 } from './post-icon2.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 HTMLElement {
-    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: '2913ad9930bccf5f1e72ea611ed3c57a0e4e1ca8', "aria-hidden": "true", name: "arrowup" }), h("span", { key: '44b3f9bf5a16c883282a73bf5cfae77619079c0d', 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;
-    } });
-}
-
-const PostBackToTop = PostBackToTop$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostBackToTop, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as o,h as e,Host as i,transformTag as s}from"@stencil/core/internal/client";import{f as a}from"./fade-slide.js";import{v as c}from"./package.js";import{c as r}from"./breakpoints.js";import{d as n}from"./post-icon2.js";const l=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.belowFold=!1,this.handleScroll=()=>{this.belowFold=this.isBelowFold()}}isBelowFold(){return window.scrollY>window.innerHeight}validateTextBackToTop(){r(this,"textBackToTop","string")}watchBelowFold(t){a(this.host,t?"in":"out",{translate:this.translateY,fill:"forwards"})}scrollToTop(){window.scrollTo({top:0,behavior:"smooth"})}getSecondPixelValue(t){for(const o of t){const t=o.match(/\b\d+px\b/g);if(t&&t.length>1)return t[1]}}animateButton(){const t=window.getComputedStyle(this.host).getPropertyValue("top"),o=this.host.shadowRoot.querySelector("button"),e=getComputedStyle(o).getPropertyValue("--post-back-to-top-elevation").split(","),i=this.getSecondPixelValue(e);this.translateY=-1-parseFloat(t.replace("px",""))-parseFloat(i.replace("px","")),this.belowFold&&a(this.host,"in",{translate:this.translateY,fill:"forwards"}),this.belowFold||(this.host.style.transform=`translateY(${this.translateY})`)}componentWillLoad(){this.belowFold=this.isBelowFold()}componentDidLoad(){window.addEventListener("scroll",this.handleScroll,!1),this.animateButton(),this.validateTextBackToTop()}disconnectedCallback(){window.removeEventListener("scroll",this.handleScroll)}render(){return e(i,{key:"a6a5afe41d76c9b2b703f4a78e63849a1437680f","data-version":c},e("button",{key:"ad10b46cf4d07d1efffae6feef7431ba8a11c59e",class:"back-to-top","aria-hidden":this.belowFold?"false":"true",tabindex:this.belowFold?"0":"-1",onClick:this.scrollToTop},e("post-icon",{key:"e95c5710939aa968df42f3acec2d56b2eaaa238e","aria-hidden":"true",name:"arrowup"}),e("span",{key:"f854524e0b76f71ef1edfed5a13d57985ac98ea5",class:"visually-hidden"},this.textBackToTop)))}get host(){return this}static get watchers(){return{textBackToTop:[{validateTextBackToTop:0}],belowFold:[{watchBelowFold:0}]}}static get style(){return":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}"}},[1,"post-back-to-top",{textBackToTop:[513,"text-back-to-top"],belowFold:[32]},void 0,{textBackToTop:[{validateTextBackToTop:0}],belowFold:[{watchBelowFold:0}]}]),p=l,d=function(){"undefined"!=typeof customElements&&["post-back-to-top","post-icon"].forEach((t=>{switch(t){case"post-back-to-top":customElements.get(s(t))||customElements.define(s(t),l);break;case"post-icon":customElements.get(s(t))||n()}}))};export{p as PostBackToTop,d as defineCustomElement}