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

package/hydrate/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@swisspost/design-system-components/hydrate",
+  "description": "PostComponents component hydration app.",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./index.js",
+      "import": "./index.mjs"
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "10.0.0-next.39",
+  "version": "10.0.0-next.41",
   "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -20,19 +20,47 @@
   "files": [
     "dist/",
     "loader/",
-    "loaders/"
+    "hydrate/"
   ],
+  "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/post-components/post-components.esm.js",
+  "exports": {
+    "./package.json": "./package.json",
+    "./post-components.css": "./dist/post-components/post-components.css",
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/post-components/post-components.esm.js",
+      "require": "./dist/cjs/post-components.cjs.js"
+    },
+    "./dist/*": {
+      "default": "./dist/*"
+    },
+    "./components/*": {
+      "default": "./dist/components/*"
+    },
+    "./loader": {
+      "types": "./loader/index.d.ts",
+      "import": "./loader/index.js",
+      "require": "./loader/index.cjs.js"
+    },
+    "./hydrate": {
+      "types": "./hydrate/index.d.ts",
+      "import": "./hydrate/index.mjs",
+      "require": "./hydrate/index.js",
+      "default": "./hydrate/index.js"
+    }
+  },
   "dependencies": {
-    "@floating-ui/dom": "1.7.0",
-    "@oddbird/popover-polyfill": "0.5.2",
-    "@swisspost/design-system-icons": "10.0.0-next.39",
-    "@swisspost/design-system-styles": "10.0.0-next.39",
+    "@floating-ui/dom": "1.7.2",
+    "@oddbird/popover-polyfill": "0.6.0",
+    "@swisspost/design-system-icons": "10.0.0-next.41",
+    "@swisspost/design-system-styles": "10.0.0-next.41",
+    "@swisspost/design-system-eslint": "1.0.1-next.0",
     "ally.js": "1.4.1",
     "long-press-event": "2.5.0",
     "nanoid": "5.1.5"
@@ -41,11 +69,11 @@
     "@eslint/compat": "1.2.5",
     "@eslint/js": "9.18.0",
     "@percy/cli": "1.30.6",
-    "@percy/cypress": "3.1.2",
-    "@stencil-community/eslint-plugin": "0.9.0",
-    "@stencil/angular-output-target": "0.8.4",
-    "@stencil/core": "4.19.2",
-    "@stencil/react-output-target": "0.5.3",
+    "@percy/cypress": "3.1.6",
+    "@stencil-community/eslint-plugin": "0.10.0",
+    "@stencil/angular-output-target": "0.10.2",
+    "@stencil/core": "4.35.0",
+    "@stencil/react-output-target": "=0.8.2",
     "@stencil/sass": "3.0.12",
     "@types/jest": "29.5.14",
     "@types/mock-fs": "4.13.4",
@@ -57,7 +85,8 @@
     "cypress-axe": "1.6.0",
     "cypress-storybook": "1.0.0",
     "eslint": "9.18.0",
-    "eslint-plugin-react": "7.37.4",
+    "eslint-plugin-cypress": "4.2.0",
+    "eslint-plugin-react": "7.37.5",
     "globals": "16.0.0",
     "mock-fs": "5.5.0",
     "rimraf": "6.0.1",
@@ -67,8 +96,7 @@
     "ts-jest": "29.2.5",
     "ts-node": "10.9.2",
     "typescript": "5.8.3",
-    "typescript-eslint": "8.20.0",
-    "eslint-plugin-cypress": "4.2.0"
+    "typescript-eslint": "8.20.0"
   },
   "keywords": [
     "components",
@@ -84,7 +112,7 @@
     "prebuild": "pnpm clean && pnpm prebuild:script",
     "build": "stencil build --docs-readme",
     "postbuild": "pnpm copy:styles:components-react & pnpm copy:styles:components-angular",
-    "clean": "rimraf dist hydrate loader loaders www src/styles/generated ../components-react/src/components/stencil-generated/ ../components-angular/projects/components/src/lib/stencil-generated/",
+    "clean": "rimraf dist hydrate loader loaders www src/styles/generated ../components-react/src/stencil-generated/ ../components-angular/projects/components/src/lib/stencil-generated/",
     "unit": "stencil test --spec",
     "unit:watch": "stencil test --spec --watchAll --silent",
     "unit:updatesnapshot": "stencil test --spec --updateSnapshot",
@@ -94,8 +122,8 @@
     "lint": "eslint",
     "lint:fix": "eslint --fix",
     "generate": "stencil generate",
-    "prebuild:script": "ts-node prebuild.ts",
-    "copy:styles:components-react": "copyfiles -f www/build/post-components.css ../components-react/src/components/stencil-generated/",
+    "prebuild:script": "node --loader ts-node/esm prebuild.ts",
+    "copy:styles:components-react": "copyfiles -f www/build/post-components.css ../components-react/src/stencil-generated/",
     "copy:styles:components-angular": "copyfiles -f www/build/post-components.css ../components-angular/projects/components/src/lib/stencil-generated/"
   }
 }

package/dist/cjs/app-globals-3a1e7e63.js

@@ -1,5 +0,0 @@
-'use strict';
-
-const globalScripts = () => {};
-
-exports.globalScripts = globalScripts;

package/dist/cjs/breakpoints-cdf1b747.js

@@ -1,59 +0,0 @@
-'use strict';
-
-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();
-
-exports.IS_BROWSER = IS_BROWSER;
-exports.breakpoint = breakpoint;

package/dist/cjs/event-guard-efabc84f.js

@@ -1,47 +0,0 @@
-'use strict';
-
-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;
-}
-
-exports.eventGuard = eventGuard;

package/dist/cjs/heading-levels-608d432e.js

@@ -1,5 +0,0 @@
-'use strict';
-
-const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
-
-exports.HEADING_LEVELS = HEADING_LEVELS;

package/dist/cjs/post-accordion-c433c493.js

@@ -1,105 +0,0 @@
-'use strict';
-
-const index = require('./index-b60129c4.js');
-const _package = require('./package-29dc73af.js');
-const headingLevels = require('./heading-levels-608d432e.js');
-const index$1 = require('./index-2b2b85e5.js');
-require('./breakpoints-cdf1b747.js');
-const eventGuard = require('./event-guard-efabc84f.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)}::slotted(post-accordion-item:not(:only-of-type):first-of-type){--post-accordion-button-border-top:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}";
-const PostAccordionStyle0 = postAccordionCss;
-
-const PostAccordion = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.expandedItems = new Set();
-        this.headingLevel = undefined;
-        this.multiple = false;
-    }
-    validateHeadingLevel() {
-        index$1.checkRequiredAndOneOf(this, 'headingLevel', headingLevels.HEADING_LEVELS);
-        this.accordionItems.forEach(item => {
-            item.setAttribute('heading-level', String(this.headingLevel));
-        });
-    }
-    componentWillLoad() {
-        this.registerAccordionItems();
-    }
-    componentDidLoad() {
-        this.validateHeadingLevel();
-    }
-    collapseToggleHandler(event) {
-        eventGuard.eventGuard(this.host, event, { targetLocalName: 'post-accordion-item', delegatorSelector: 'post-accordion' }, () => {
-            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 (index.h(index.Host, { key: '7057a6926f2279f7fc86d7f8539dd3ca884a3d70', "data-version": _package.version }, index.h("div", { key: 'a6d337471d1d16c09d7e6af950d39c58fc6f2880', class: "accordion" }, index.h("slot", { key: '9687babb4b539f6e54468555b4057a2b378e1e10', onSlotchange: () => this.registerAccordionItems() }))));
-    }
-    get host() { return index.getElement(this); }
-    static get watchers() { return {
-        "headingLevel": ["validateHeadingLevel"]
-    }; }
-};
-PostAccordion.style = PostAccordionStyle0;
-
-exports.PostAccordion = PostAccordion;

package/dist/cjs/post-accordion-item-8d5a301d.js

@@ -1,64 +0,0 @@
-'use strict';
-
-const index = require('./index-b60129c4.js');
-const _package = require('./package-29dc73af.js');
-const headingLevels = require('./heading-levels-608d432e.js');
-const index$1 = require('./index-2b2b85e5.js');
-require('./breakpoints-cdf1b747.js');
-const eventGuard = require('./event-guard-efabc84f.js');
-const index_browser = require('./index.browser-4af21c17.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 = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.id = undefined;
-        this.slottedLogo = undefined;
-        this.collapsed = false;
-        this.headingLevel = undefined;
-    }
-    validateHeadingLevel() {
-        index$1.checkEmptyOrOneOf(this, 'headingLevel', headingLevels.HEADING_LEVELS);
-    }
-    componentWillLoad() {
-        this.id = this.host.id || `p${index_browser.nanoid(6)}`;
-    }
-    componentDidLoad() {
-        this.validateHeadingLevel();
-    }
-    // Capture to make sure the "collapsed" property is updated before the event is consumed
-    onCollapseToggle(event) {
-        eventGuard.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 (index.h(index.Host, { key: '4de770633e0c9b9bb92b92a66be9a1481bf0fb3e', id: this.id, "data-version": _package.version }, index.h("div", { key: '4c2b91b25637cbe284442626d02d0ce6496589a4', part: "accordion-item", class: "accordion-item" }, index.h("post-collapsible-trigger", { key: '777f8b222b017b765f265296ad2829a027a99c22', for: `${this.id}--collapse` }, index.h(HeadingTag, { key: 'a646d911ea83c004fbc5490cb1e9dafdf490d09f', class: "accordion-header", id: `${this.id}--header` }, index.h("button", { key: '0c30a665426b98fff997874c365ffc6b97ecc01c', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, index.h("span", { key: '64edd8541af949f87ad929173c4a5210f892b0b6', class: {
-                'logo-container': true,
-                'has-image': !!this.slottedLogo,
-            } }, index.h("slot", { key: 'a3dfd1796d7c3b854980078673a017d58acb97ea', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), index.h("slot", { key: 'd008c9aebfd8431afa4eae1af8646dd7de97916b', name: "header" }), index.h("post-icon", { key: 'ee5150a9cd7693e57f639cf09d9c4f24aae57308', name: "2051" })))), index.h("post-collapsible", { key: '12d2ef55e0e7615619a0a246268e8af3d3d8e712', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, index.h("div", { key: 'd2cf362418c50ad56f8dee8e43baabbd976682f9', class: "accordion-body", part: "body" }, index.h("slot", { key: '6792db26a9eab60e113d62e23faf003a6b43685b' }))))));
-    }
-    get host() { return index.getElement(this); }
-    static get watchers() { return {
-        "headingLevel": ["validateHeadingLevel"]
-    }; }
-};
-PostAccordionItem.style = PostAccordionItemStyle0;
-
-exports.PostAccordionItem = PostAccordionItem;

package/dist/cjs/post-accordion-item.cjs.entry.js

@@ -1,16 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const postAccordionItem = require('./post-accordion-item-8d5a301d.js');
-require('./index-b60129c4.js');
-require('./package-29dc73af.js');
-require('./heading-levels-608d432e.js');
-require('./index-2b2b85e5.js');
-require('./breakpoints-cdf1b747.js');
-require('./event-guard-efabc84f.js');
-require('./index.browser-4af21c17.js');
-
-
-
-exports.post_accordion_item = postAccordionItem.PostAccordionItem;

package/dist/cjs/post-accordion.cjs.entry.js

@@ -1,15 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const postAccordion = require('./post-accordion-c433c493.js');
-require('./index-b60129c4.js');
-require('./package-29dc73af.js');
-require('./heading-levels-608d432e.js');
-require('./index-2b2b85e5.js');
-require('./breakpoints-cdf1b747.js');
-require('./event-guard-efabc84f.js');
-
-
-
-exports.post_accordion = postAccordion.PostAccordion;

package/dist/cjs/post-avatar-421043df.js

@@ -1,162 +0,0 @@
-'use strict';
-
-const index = require('./index-b60129c4.js');
-const _package = require('./package-29dc73af.js');
-const index$1 = require('./index-2b2b85e5.js');
-require('./breakpoints-cdf1b747.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 = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        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() {
-        index$1.checkRequiredAndType(this, 'firstname', 'string');
-    }
-    validateLastname() {
-        index$1.checkEmptyOrType(this, 'lastname', 'string');
-    }
-    validateUserid() {
-        index$1.checkEmptyOrType(this, 'userid', 'string');
-    }
-    validateEmail() {
-        if (this.email)
-            index$1.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(index.h("span", null, " "));
-            acc.push(n.charAt(0));
-            acc.push(index.h("span", null, n.slice(1)));
-            // eslint-disable-next-line @stencil-community/render-returns-host
-            return acc;
-        }, []);
-        return (index.h(index.Host, { "data-version": _package.version }, index.h("slot", { onSlotchange: this.onSlotDefaultChange.bind(this) }, this.avatarType === 'image' && index.h("img", { src: this.imageUrl, alt: this.imageAlt }), this.avatarType === 'initials' && index.h("div", { class: "initials" }, initials))));
-    }
-    get host() { return index.getElement(this); }
-    static get watchers() { return {
-        "firstname": ["validateFirstname"],
-        "lastname": ["validateLastname"],
-        "userid": ["validateUserid"],
-        "email": ["validateEmail"]
-    }; }
-};
-PostAvatar.INTERNAL_USERID_IMAGE_SRC = 'https://web.post.ch/UserProfileImage/{userid}.png';
-PostAvatar.style = PostAvatarStyle0;
-
-exports.PostAvatar = PostAvatar;