@swisspost/design-system-components 7.4.10 → 7.4.12

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTooltip = require('./post-tooltip-abc576e9.js');
+const postTooltip = require('./post-tooltip-a458e42f.js');
 require('./index-1cc8e4e1.js');
-require('./package-e3ef1673.js');
+require('./package-8dfe7043.js');
 require('./attribute-observer-10f08c04.js');
 require('./index-f32e5185.js');
 require('./constants-238701d3.js');

package/dist/collection/components/post-icon/post-icon.js

@@ -16,8 +16,6 @@ const ANIMATION_KEYS = [...ANIMATION_NAMES];
  */
 export class PostIcon {
     constructor() {
-        this.svgStyles = undefined;
-        this.svgOutput = undefined;
         this.animation = null;
         this.base = null;
         this.flipH = false;
@@ -49,6 +47,64 @@ export class PostIcon {
     validateScale(newValue = this.scale) {
         checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
     }
+    // Construct the icon url from different possible sources
+    getUrl() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        // the first definition object which defines a domain, will be used to set the domain of the file url
+        // the first definition object which defines a slug, will be used to set the slug of the file url
+        const urlDefinitions = [
+            getUrlDefinition(this.base, 'both'),
+            getUrlDefinition((_a = document.head
+                .querySelector('meta[name="design-system-settings"][data-post-icon-base]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-post-icon-base'), 'relative'),
+            getUrlDefinition((_b = document.querySelector('base[href]')) === null || _b === void 0 ? void 0 : _b.getAttribute('href'), 'both'),
+        ];
+        // in case no other definition defines a domain, the current origin is used as a fallback
+        const origin = (_e = (_d = (_c = urlDefinitions.find(d => d.definesDomain)) === null || _c === void 0 ? void 0 : _c.url) === null || _d === void 0 ? void 0 : _d.origin) !== null && _e !== void 0 ? _e : window.location.origin;
+        // in case no other definition defines a slug, the cdn url is used as a fallback
+        const slug = (_g = (_f = urlDefinitions.find(d => d.definesSlug)) === null || _f === void 0 ? void 0 : _f.url) === null || _g === void 0 ? void 0 : _g.pathname;
+        const file = `${this.name}.svg`;
+        let url;
+        if (slug) {
+            url = new URL(`${origin}${slug}/${file}`).toString();
+        }
+        else {
+            url = new URL(`${CDN_URL}/${file}`).toString();
+        }
+        return url;
+        function getUrlDefinition(url, allow) {
+            return {
+                url: getUrlObject(url),
+                definesDomain: allow !== 'relative' ? definesDomain(url) : false,
+                definesSlug: allow !== 'absolute' ? definesSlug(url) : false,
+            };
+            function getUrlObject(url) {
+                if (url) {
+                    return definesDomain(url) ? new URL(url) : new URL(url, window.location.origin);
+                }
+                else {
+                    return null;
+                }
+            }
+            function definesDomain(url) {
+                return url ? /^https?:\/\//.test(url) : false;
+            }
+            function definesSlug(url) {
+                const urlObject = getUrlObject(url);
+                return Boolean(/^\/.+/.test(urlObject === null || urlObject === void 0 ? void 0 : urlObject.pathname));
+            }
+        }
+    }
+    getStyles() {
+        const url = this.getUrl();
+        return Object.entries({
+            '-webkit-mask-image': `url(${url})`,
+            'mask-image': `url('${url}')`,
+            'transform': (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
+                (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
+        })
+            .filter(([_key, value]) => value !== null)
+            .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
+    }
     componentDidLoad() {
         this.validateBase();
         this.validateName();
@@ -58,45 +114,8 @@ export class PostIcon {
         this.validateRotate();
         this.validateAnimation();
     }
-    componentWillRender() {
-        this.setPath();
-    }
-    setPath() {
-        var _a, _b, _c, _d, _e;
-        // Construct icon path from different possible sources
-        const metaBase = (_b = (_a = document.head
-            .querySelector('meta[name="design-system-settings"][data-post-icon-base]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-post-icon-base')) !== null && _b !== void 0 ? _b : null;
-        const baseHref = (_c = document.getElementsByTagName('base')[0]) === null || _c === void 0 ? void 0 : _c.href;
-        let calculatedBase;
-        // If this.base or metaBase are relative, prefix them with the baseHref if it exists
-        const absolutePathReg = /^(?:[a-z+]+:)?\/\//i;
-        if (baseHref) {
-            if (this.base && !absolutePathReg.test(this.base)) {
-                calculatedBase = baseHref + this.base;
-            }
-            else if (metaBase && !absolutePathReg.test(metaBase)) {
-                calculatedBase = baseHref + metaBase;
-            }
-        }
-        else {
-            calculatedBase = (_d = this.base) !== null && _d !== void 0 ? _d : metaBase;
-        }
-        const fileBase = `${(_e = calculatedBase !== null && calculatedBase !== void 0 ? calculatedBase : baseHref) !== null && _e !== void 0 ? _e : CDN_URL}/`.replace(/\/\/$/, '/');
-        const fileName = `${this.name}.svg`;
-        const filePath = `${fileBase}${fileName}`;
-        this.path = new URL(filePath, window.location.origin).toString();
-    }
     render() {
-        // create inline styles for some properties
-        const svgStyles = Object.entries({
-            '-webkit-mask-image': `url('${this.path}')`,
-            'mask-image': `url('${this.path}')`,
-            'transform': (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
-                (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
-        })
-            .filter(([_key, value]) => value !== null)
-            .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
-        return (h(Host, { key: 'bad9e5bf0bf6250cd6597a2e6e67cf1f334d0e2d', "data-version": version }, h("span", { key: '1b07a201ac1bc45cbea6ce6ad3285917cf76e46e', style: svgStyles })));
+        return (h(Host, { key: 'a38838bcd99af618f660ec4ffef4e869cdab3995', "data-version": version }, h("span", { key: '24ae06bdb0aa65ddca7ac88fac9bb6bb5a12550a', style: this.getStyles() })));
     }
     static get is() { return "post-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -244,12 +263,6 @@ export class PostIcon {
             }
         };
     }
-    static get states() {
-        return {
-            "svgStyles": {},
-            "svgOutput": {}
-        };
-    }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{

package/dist/components/package.js

@@ -1,3 +1,3 @@
-const version = "7.4.10";
+const version = "7.4.12";
 
 export { version as v };

package/dist/components/post-icon2.js

@@ -22,8 +22,6 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLEle
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.svgStyles = undefined;
-        this.svgOutput = undefined;
         this.animation = null;
         this.base = null;
         this.flipH = false;
@@ -55,6 +53,64 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLEle
     validateScale(newValue = this.scale) {
         checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
     }
+    // Construct the icon url from different possible sources
+    getUrl() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        // the first definition object which defines a domain, will be used to set the domain of the file url
+        // the first definition object which defines a slug, will be used to set the slug of the file url
+        const urlDefinitions = [
+            getUrlDefinition(this.base, 'both'),
+            getUrlDefinition((_a = document.head
+                .querySelector('meta[name="design-system-settings"][data-post-icon-base]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-post-icon-base'), 'relative'),
+            getUrlDefinition((_b = document.querySelector('base[href]')) === null || _b === void 0 ? void 0 : _b.getAttribute('href'), 'both'),
+        ];
+        // in case no other definition defines a domain, the current origin is used as a fallback
+        const origin = (_e = (_d = (_c = urlDefinitions.find(d => d.definesDomain)) === null || _c === void 0 ? void 0 : _c.url) === null || _d === void 0 ? void 0 : _d.origin) !== null && _e !== void 0 ? _e : window.location.origin;
+        // in case no other definition defines a slug, the cdn url is used as a fallback
+        const slug = (_g = (_f = urlDefinitions.find(d => d.definesSlug)) === null || _f === void 0 ? void 0 : _f.url) === null || _g === void 0 ? void 0 : _g.pathname;
+        const file = `${this.name}.svg`;
+        let url;
+        if (slug) {
+            url = new URL(`${origin}${slug}/${file}`).toString();
+        }
+        else {
+            url = new URL(`${CDN_URL}/${file}`).toString();
+        }
+        return url;
+        function getUrlDefinition(url, allow) {
+            return {
+                url: getUrlObject(url),
+                definesDomain: allow !== 'relative' ? definesDomain(url) : false,
+                definesSlug: allow !== 'absolute' ? definesSlug(url) : false,
+            };
+            function getUrlObject(url) {
+                if (url) {
+                    return definesDomain(url) ? new URL(url) : new URL(url, window.location.origin);
+                }
+                else {
+                    return null;
+                }
+            }
+            function definesDomain(url) {
+                return url ? /^https?:\/\//.test(url) : false;
+            }
+            function definesSlug(url) {
+                const urlObject = getUrlObject(url);
+                return Boolean(/^\/.+/.test(urlObject === null || urlObject === void 0 ? void 0 : urlObject.pathname));
+            }
+        }
+    }
+    getStyles() {
+        const url = this.getUrl();
+        return Object.entries({
+            '-webkit-mask-image': `url(${url})`,
+            'mask-image': `url('${url}')`,
+            'transform': (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
+                (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
+        })
+            .filter(([_key, value]) => value !== null)
+            .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
+    }
     componentDidLoad() {
         this.validateBase();
         this.validateName();
@@ -64,45 +120,8 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLEle
         this.validateRotate();
         this.validateAnimation();
     }
-    componentWillRender() {
-        this.setPath();
-    }
-    setPath() {
-        var _a, _b, _c, _d, _e;
-        // Construct icon path from different possible sources
-        const metaBase = (_b = (_a = document.head
-            .querySelector('meta[name="design-system-settings"][data-post-icon-base]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-post-icon-base')) !== null && _b !== void 0 ? _b : null;
-        const baseHref = (_c = document.getElementsByTagName('base')[0]) === null || _c === void 0 ? void 0 : _c.href;
-        let calculatedBase;
-        // If this.base or metaBase are relative, prefix them with the baseHref if it exists
-        const absolutePathReg = /^(?:[a-z+]+:)?\/\//i;
-        if (baseHref) {
-            if (this.base && !absolutePathReg.test(this.base)) {
-                calculatedBase = baseHref + this.base;
-            }
-            else if (metaBase && !absolutePathReg.test(metaBase)) {
-                calculatedBase = baseHref + metaBase;
-            }
-        }
-        else {
-            calculatedBase = (_d = this.base) !== null && _d !== void 0 ? _d : metaBase;
-        }
-        const fileBase = `${(_e = calculatedBase !== null && calculatedBase !== void 0 ? calculatedBase : baseHref) !== null && _e !== void 0 ? _e : CDN_URL}/`.replace(/\/\/$/, '/');
-        const fileName = `${this.name}.svg`;
-        const filePath = `${fileBase}${fileName}`;
-        this.path = new URL(filePath, window.location.origin).toString();
-    }
     render() {
-        // create inline styles for some properties
-        const svgStyles = Object.entries({
-            '-webkit-mask-image': `url('${this.path}')`,
-            'mask-image': `url('${this.path}')`,
-            'transform': (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
-                (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
-        })
-            .filter(([_key, value]) => value !== null)
-            .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
-        return (h(Host, { key: 'bad9e5bf0bf6250cd6597a2e6e67cf1f334d0e2d', "data-version": version }, h("span", { key: '1b07a201ac1bc45cbea6ce6ad3285917cf76e46e', style: svgStyles })));
+        return (h(Host, { key: 'a38838bcd99af618f660ec4ffef4e869cdab3995', "data-version": version }, h("span", { key: '24ae06bdb0aa65ddca7ac88fac9bb6bb5a12550a', style: this.getStyles() })));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -122,9 +141,7 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLEle
         "flipV": [4, "flip-v"],
         "name": [1],
         "rotate": [2],
-        "scale": [2],
-        "svgStyles": [32],
-        "svgOutput": [32]
+        "scale": [2]
     }, undefined, {
         "animation": ["validateAnimation"],
         "base": ["validateBase"],

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-02-03T13:52:11",
+  "timestamp": "2025-03-10T17:25:37",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.19.1",

package/dist/esm/index.js

@@ -1,20 +1,20 @@
-export { P as PostAccordion } from './post-accordion-f34d67cf.js';
-export { P as PostAccordionItem } from './post-accordion-item-28850d05.js';
-export { P as PostAlert } from './post-alert-29814559.js';
-export { P as PostCardControl } from './post-card-control-b22b8114.js';
-export { P as PostCollapsible } from './post-collapsible-56f08239.js';
-export { P as PostCollapsibleTrigger } from './post-collapsible-trigger-b7d0ece3.js';
-export { P as PostIcon } from './post-icon-5d7a3ba9.js';
-export { P as PostPopover } from './post-popover-dcffb2b0.js';
-export { P as PostPopovercontainer } from './post-popovercontainer-f2230bfc.js';
-export { P as PostRating } from './post-rating-9323ef6a.js';
-export { P as PostTabs } from './post-tabs-a77d768a.js';
-export { P as PostTabHeader } from './post-tab-header-4527a6a0.js';
-export { P as PostTabPanel } from './post-tab-panel-2c3785fc.js';
-export { P as PostTooltip } from './post-tooltip-3df5878c.js';
-export { P as PostTag } from './post-tag-2314a9cd.js';
+export { P as PostAccordion } from './post-accordion-b4bd4dc9.js';
+export { P as PostAccordionItem } from './post-accordion-item-e1d53239.js';
+export { P as PostAlert } from './post-alert-cfbbd72b.js';
+export { P as PostCardControl } from './post-card-control-4224d76b.js';
+export { P as PostCollapsible } from './post-collapsible-771dac51.js';
+export { P as PostCollapsibleTrigger } from './post-collapsible-trigger-094d2677.js';
+export { P as PostIcon } from './post-icon-529e58e0.js';
+export { P as PostPopover } from './post-popover-eaa7deae.js';
+export { P as PostPopovercontainer } from './post-popovercontainer-0c521ac0.js';
+export { P as PostRating } from './post-rating-58cc49d0.js';
+export { P as PostTabs } from './post-tabs-3b36224d.js';
+export { P as PostTabHeader } from './post-tab-header-40aedd75.js';
+export { P as PostTabPanel } from './post-tab-panel-26774634.js';
+export { P as PostTooltip } from './post-tooltip-2a4eda0d.js';
+export { P as PostTag } from './post-tag-b9aacc9c.js';
 import './index-9ace3232.js';
-import './package-79261567.js';
+import './package-b6631855.js';
 import './heading-levels-5b7b4349.js';
 import './check-one-of-6b3ef8eb.js';
 import './index-29d17d6d.js';

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["post-accordion-item",[[1,"post-accordion-item",{"collapsed":[1028],"headingLevel":[2,"heading-level"],"id":[32],"toggle":[64]},[[2,"postToggle","onCollapseToggle"]],{"headingLevel":["validateHeadingLevel"]}]]],["post-alert",[[1,"post-alert",{"dismissible":[4],"dismissLabel":[1,"dismiss-label"],"fixed":[4],"icon":[1],"type":[1],"alertId":[32],"classes":[32],"hasActions":[32],"hasHeading":[32],"onDismissButtonClick":[32],"dismiss":[64]},null,{"dismissible":["validateDismissible"],"dismissLabel":["validateDismissLabel"],"fixed":["validateFixed"],"icon":["validateIcon"],"type":["validateType"]}]]],["post-card-control",[[65,"post-card-control",{"label":[1],"description":[1],"type":[1],"name":[1],"value":[1],"checked":[1028],"disabled":[1028],"validity":[1025],"icon":[1],"focused":[32],"reset":[64],"groupReset":[64]},null,{"label":["validateControlLabel"],"type":["validateControlType"],"checked":["updateControlChecked"],"disabled":["updateControlDisbled"]}]]],["post-popovercontainer",[[4,"post-popovercontainer",{"placement":[1],"arrow":[4],"show":[64],"hide":[64],"toggle":[64]}]]],["post-popover",[[1,"post-popover",{"placement":[1],"closeButtonCaption":[1,"close-button-caption"],"arrow":[4],"show":[64],"hide":[64],"toggle":[64]}]]],["post-rating",[[1,"post-rating",{"label":[1],"stars":[2],"currentRating":[1026,"current-rating"],"readonly":[4],"hoveredIndex":[32]}]]],["post-tag",[[1,"post-tag",{"variant":[1],"size":[1],"icon":[1],"classes":[32]},null,{"variant":["variantChanged"],"size":["sizeChanged"]}]]],["post-tooltip",[[1,"post-tooltip",{"placement":[1],"arrow":[4],"delayed":[4],"show":[64],"hide":[64],"toggle":[64]},null,{"delayed":["validateDelayed"]}]]],["post-accordion",[[1,"post-accordion",{"headingLevel":[2,"heading-level"],"multiple":[4],"toggle":[64],"expandAll":[64],"collapseAll":[64]},[[0,"postToggle","collapseToggleHandler"]],{"headingLevel":["validateHeadingLevel"]}]]],["post-collapsible-trigger",[[0,"post-collapsible-trigger",{"for":[1],"update":[64]},[[4,"postToggle","setAriaExpanded"]],{"for":["setAriaAttributes"]}]]],["post-tab-header",[[1,"post-tab-header",{"panel":[1],"tabId":[32]},null,{"panel":["validateFor"]}]]],["post-tab-panel",[[1,"post-tab-panel",{"name":[1],"panelId":[32]}]]],["post-tabs",[[1,"post-tabs",{"activePanel":[1,"active-panel"],"show":[64]}]]],["post-collapsible",[[1,"post-collapsible",{"collapsed":[1028],"toggle":[64]},null,{"collapsed":["collapsedChange"]}]]],["post-icon",[[1,"post-icon",{"animation":[1],"base":[1],"flipH":[4,"flip-h"],"flipV":[4,"flip-v"],"name":[1],"rotate":[2],"scale":[2],"svgStyles":[32],"svgOutput":[32]},null,{"animation":["validateAnimation"],"base":["validateBase"],"flipH":["validateFlipH"],"flipV":["validateFlipV"],"name":["validateName"],"rotate":["validateRotate"],"scale":["validateScale"]}]]]], options);
+  return bootstrapLazy([["post-accordion-item",[[1,"post-accordion-item",{"collapsed":[1028],"headingLevel":[2,"heading-level"],"id":[32],"toggle":[64]},[[2,"postToggle","onCollapseToggle"]],{"headingLevel":["validateHeadingLevel"]}]]],["post-alert",[[1,"post-alert",{"dismissible":[4],"dismissLabel":[1,"dismiss-label"],"fixed":[4],"icon":[1],"type":[1],"alertId":[32],"classes":[32],"hasActions":[32],"hasHeading":[32],"onDismissButtonClick":[32],"dismiss":[64]},null,{"dismissible":["validateDismissible"],"dismissLabel":["validateDismissLabel"],"fixed":["validateFixed"],"icon":["validateIcon"],"type":["validateType"]}]]],["post-card-control",[[65,"post-card-control",{"label":[1],"description":[1],"type":[1],"name":[1],"value":[1],"checked":[1028],"disabled":[1028],"validity":[1025],"icon":[1],"focused":[32],"reset":[64],"groupReset":[64]},null,{"label":["validateControlLabel"],"type":["validateControlType"],"checked":["updateControlChecked"],"disabled":["updateControlDisbled"]}]]],["post-popovercontainer",[[4,"post-popovercontainer",{"placement":[1],"arrow":[4],"show":[64],"hide":[64],"toggle":[64]}]]],["post-popover",[[1,"post-popover",{"placement":[1],"closeButtonCaption":[1,"close-button-caption"],"arrow":[4],"show":[64],"hide":[64],"toggle":[64]}]]],["post-rating",[[1,"post-rating",{"label":[1],"stars":[2],"currentRating":[1026,"current-rating"],"readonly":[4],"hoveredIndex":[32]}]]],["post-tag",[[1,"post-tag",{"variant":[1],"size":[1],"icon":[1],"classes":[32]},null,{"variant":["variantChanged"],"size":["sizeChanged"]}]]],["post-tooltip",[[1,"post-tooltip",{"placement":[1],"arrow":[4],"delayed":[4],"show":[64],"hide":[64],"toggle":[64]},null,{"delayed":["validateDelayed"]}]]],["post-accordion",[[1,"post-accordion",{"headingLevel":[2,"heading-level"],"multiple":[4],"toggle":[64],"expandAll":[64],"collapseAll":[64]},[[0,"postToggle","collapseToggleHandler"]],{"headingLevel":["validateHeadingLevel"]}]]],["post-collapsible-trigger",[[0,"post-collapsible-trigger",{"for":[1],"update":[64]},[[4,"postToggle","setAriaExpanded"]],{"for":["setAriaAttributes"]}]]],["post-tab-header",[[1,"post-tab-header",{"panel":[1],"tabId":[32]},null,{"panel":["validateFor"]}]]],["post-tab-panel",[[1,"post-tab-panel",{"name":[1],"panelId":[32]}]]],["post-tabs",[[1,"post-tabs",{"activePanel":[1,"active-panel"],"show":[64]}]]],["post-collapsible",[[1,"post-collapsible",{"collapsed":[1028],"toggle":[64]},null,{"collapsed":["collapsedChange"]}]]],["post-icon",[[1,"post-icon",{"animation":[1],"base":[1],"flipH":[4,"flip-h"],"flipV":[4,"flip-v"],"name":[1],"rotate":[2],"scale":[2]},null,{"animation":["validateAnimation"],"base":["validateBase"],"flipH":["validateFlipH"],"flipV":["validateFlipV"],"name":["validateName"],"rotate":["validateRotate"],"scale":["validateScale"]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/{package-79261567.js → package-b6631855.js}

@@ -1,3 +1,3 @@
-const version = "7.4.10";
+const version = "7.4.12";
 
 export { version as v };

package/dist/esm/{post-accordion-f34d67cf.js → post-accordion-b4bd4dc9.js}

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-9ace3232.js';
-import { v as version } from './package-79261567.js';
+import { v as version } from './package-b6631855.js';
 import { H as HEADING_LEVELS } from './heading-levels-5b7b4349.js';
 import { c as checkOneOf } from './check-one-of-6b3ef8eb.js';
 

package/dist/esm/{post-accordion-item-28850d05.js → post-accordion-item-e1d53239.js}

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-9ace3232.js';
-import { v as version } from './package-79261567.js';
+import { v as version } from './package-b6631855.js';
 import { H as HEADING_LEVELS } from './heading-levels-5b7b4349.js';
 import { c as checkEmptyOrOneOf } from './index-29d17d6d.js';
 

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

@@ -1,6 +1,6 @@
-export { P as post_accordion_item } from './post-accordion-item-28850d05.js';
+export { P as post_accordion_item } from './post-accordion-item-e1d53239.js';
 import './index-9ace3232.js';
-import './package-79261567.js';
+import './package-b6631855.js';
 import './heading-levels-5b7b4349.js';
 import './index-29d17d6d.js';
 import './constants-8d548297.js';

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

@@ -1,5 +1,5 @@
-export { P as post_accordion } from './post-accordion-f34d67cf.js';
+export { P as post_accordion } from './post-accordion-b4bd4dc9.js';
 import './index-9ace3232.js';
-import './package-79261567.js';
+import './package-b6631855.js';
 import './heading-levels-5b7b4349.js';
 import './check-one-of-6b3ef8eb.js';

package/dist/esm/{post-alert-29814559.js → post-alert-cfbbd72b.js}

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9ace3232.js';
-import { v as version } from './package-79261567.js';
+import { v as version } from './package-b6631855.js';
 import { f as fadeOut } from './fade-7fd71785.js';
 import { a as checkEmptyOrPattern, c as checkEmptyOrOneOf } from './index-29d17d6d.js';
 import { c as checkType } from './check-type-8828dbe4.js';

package/dist/esm/post-alert.entry.js

@@ -1,6 +1,6 @@
-export { P as post_alert } from './post-alert-29814559.js';
+export { P as post_alert } from './post-alert-cfbbd72b.js';
 import './index-9ace3232.js';
-import './package-79261567.js';
+import './package-b6631855.js';
 import './fade-7fd71785.js';
 import './index-29d17d6d.js';
 import './constants-8d548297.js';

package/dist/esm/{post-card-control-b22b8114.js → post-card-control-4224d76b.js}

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9ace3232.js';
 import { c as checkOneOf } from './check-one-of-6b3ef8eb.js';
 import { c as checkNonEmpty } from './check-non-empty-58bd6b17.js';
-import { v as version } from './package-79261567.js';
+import { v as version } from './package-b6631855.js';
 
 function parse(scss) {
     return Object.entries(scss).reduce((object, [path, value]) => {

package/dist/esm/post-card-control.entry.js

@@ -1,6 +1,6 @@
-export { P as post_card_control } from './post-card-control-b22b8114.js';
+export { P as post_card_control } from './post-card-control-4224d76b.js';
 import './index-9ace3232.js';
 import './check-one-of-6b3ef8eb.js';
 import './check-non-empty-58bd6b17.js';
 import './constants-8d548297.js';
-import './package-79261567.js';
+import './package-b6631855.js';

package/dist/esm/{post-collapsible-56f08239.js → post-collapsible-771dac51.js}

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9ace3232.js';
-import { v as version } from './package-79261567.js';
+import { v as version } from './package-b6631855.js';
 import { b as checkEmptyOrType } from './index-29d17d6d.js';
 
 function isMotionReduced() {

package/dist/esm/{post-collapsible-trigger-b7d0ece3.js → post-collapsible-trigger-094d2677.js}

@@ -1,5 +1,5 @@
 import { r as registerInstance, g as getElement } from './index-9ace3232.js';
-import { v as version } from './package-79261567.js';
+import { v as version } from './package-b6631855.js';
 import { c as checkType } from './check-type-8828dbe4.js';
 import { c as checkNonEmpty } from './check-non-empty-58bd6b17.js';
 

package/dist/esm/post-collapsible-trigger.entry.js

@@ -1,6 +1,6 @@
-export { P as post_collapsible_trigger } from './post-collapsible-trigger-b7d0ece3.js';
+export { P as post_collapsible_trigger } from './post-collapsible-trigger-094d2677.js';
 import './index-9ace3232.js';
-import './package-79261567.js';
+import './package-b6631855.js';
 import './check-type-8828dbe4.js';
 import './check-non-empty-58bd6b17.js';
 import './constants-8d548297.js';

package/dist/esm/post-collapsible.entry.js

@@ -1,6 +1,6 @@
-export { P as post_collapsible } from './post-collapsible-56f08239.js';
+export { P as post_collapsible } from './post-collapsible-771dac51.js';
 import './index-9ace3232.js';
-import './package-79261567.js';
+import './package-b6631855.js';
 import './index-29d17d6d.js';
 import './constants-8d548297.js';
 import './check-one-of-6b3ef8eb.js';

package/dist/esm/post-components.js

@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["post-accordion-item",[[1,"post-accordion-item",{"collapsed":[1028],"headingLevel":[2,"heading-level"],"id":[32],"toggle":[64]},[[2,"postToggle","onCollapseToggle"]],{"headingLevel":["validateHeadingLevel"]}]]],["post-alert",[[1,"post-alert",{"dismissible":[4],"dismissLabel":[1,"dismiss-label"],"fixed":[4],"icon":[1],"type":[1],"alertId":[32],"classes":[32],"hasActions":[32],"hasHeading":[32],"onDismissButtonClick":[32],"dismiss":[64]},null,{"dismissible":["validateDismissible"],"dismissLabel":["validateDismissLabel"],"fixed":["validateFixed"],"icon":["validateIcon"],"type":["validateType"]}]]],["post-card-control",[[65,"post-card-control",{"label":[1],"description":[1],"type":[1],"name":[1],"value":[1],"checked":[1028],"disabled":[1028],"validity":[1025],"icon":[1],"focused":[32],"reset":[64],"groupReset":[64]},null,{"label":["validateControlLabel"],"type":["validateControlType"],"checked":["updateControlChecked"],"disabled":["updateControlDisbled"]}]]],["post-popovercontainer",[[4,"post-popovercontainer",{"placement":[1],"arrow":[4],"show":[64],"hide":[64],"toggle":[64]}]]],["post-popover",[[1,"post-popover",{"placement":[1],"closeButtonCaption":[1,"close-button-caption"],"arrow":[4],"show":[64],"hide":[64],"toggle":[64]}]]],["post-rating",[[1,"post-rating",{"label":[1],"stars":[2],"currentRating":[1026,"current-rating"],"readonly":[4],"hoveredIndex":[32]}]]],["post-tag",[[1,"post-tag",{"variant":[1],"size":[1],"icon":[1],"classes":[32]},null,{"variant":["variantChanged"],"size":["sizeChanged"]}]]],["post-tooltip",[[1,"post-tooltip",{"placement":[1],"arrow":[4],"delayed":[4],"show":[64],"hide":[64],"toggle":[64]},null,{"delayed":["validateDelayed"]}]]],["post-accordion",[[1,"post-accordion",{"headingLevel":[2,"heading-level"],"multiple":[4],"toggle":[64],"expandAll":[64],"collapseAll":[64]},[[0,"postToggle","collapseToggleHandler"]],{"headingLevel":["validateHeadingLevel"]}]]],["post-collapsible-trigger",[[0,"post-collapsible-trigger",{"for":[1],"update":[64]},[[4,"postToggle","setAriaExpanded"]],{"for":["setAriaAttributes"]}]]],["post-tab-header",[[1,"post-tab-header",{"panel":[1],"tabId":[32]},null,{"panel":["validateFor"]}]]],["post-tab-panel",[[1,"post-tab-panel",{"name":[1],"panelId":[32]}]]],["post-tabs",[[1,"post-tabs",{"activePanel":[1,"active-panel"],"show":[64]}]]],["post-collapsible",[[1,"post-collapsible",{"collapsed":[1028],"toggle":[64]},null,{"collapsed":["collapsedChange"]}]]],["post-icon",[[1,"post-icon",{"animation":[1],"base":[1],"flipH":[4,"flip-h"],"flipV":[4,"flip-v"],"name":[1],"rotate":[2],"scale":[2],"svgStyles":[32],"svgOutput":[32]},null,{"animation":["validateAnimation"],"base":["validateBase"],"flipH":["validateFlipH"],"flipV":["validateFlipV"],"name":["validateName"],"rotate":["validateRotate"],"scale":["validateScale"]}]]]], options);
+  return bootstrapLazy([["post-accordion-item",[[1,"post-accordion-item",{"collapsed":[1028],"headingLevel":[2,"heading-level"],"id":[32],"toggle":[64]},[[2,"postToggle","onCollapseToggle"]],{"headingLevel":["validateHeadingLevel"]}]]],["post-alert",[[1,"post-alert",{"dismissible":[4],"dismissLabel":[1,"dismiss-label"],"fixed":[4],"icon":[1],"type":[1],"alertId":[32],"classes":[32],"hasActions":[32],"hasHeading":[32],"onDismissButtonClick":[32],"dismiss":[64]},null,{"dismissible":["validateDismissible"],"dismissLabel":["validateDismissLabel"],"fixed":["validateFixed"],"icon":["validateIcon"],"type":["validateType"]}]]],["post-card-control",[[65,"post-card-control",{"label":[1],"description":[1],"type":[1],"name":[1],"value":[1],"checked":[1028],"disabled":[1028],"validity":[1025],"icon":[1],"focused":[32],"reset":[64],"groupReset":[64]},null,{"label":["validateControlLabel"],"type":["validateControlType"],"checked":["updateControlChecked"],"disabled":["updateControlDisbled"]}]]],["post-popovercontainer",[[4,"post-popovercontainer",{"placement":[1],"arrow":[4],"show":[64],"hide":[64],"toggle":[64]}]]],["post-popover",[[1,"post-popover",{"placement":[1],"closeButtonCaption":[1,"close-button-caption"],"arrow":[4],"show":[64],"hide":[64],"toggle":[64]}]]],["post-rating",[[1,"post-rating",{"label":[1],"stars":[2],"currentRating":[1026,"current-rating"],"readonly":[4],"hoveredIndex":[32]}]]],["post-tag",[[1,"post-tag",{"variant":[1],"size":[1],"icon":[1],"classes":[32]},null,{"variant":["variantChanged"],"size":["sizeChanged"]}]]],["post-tooltip",[[1,"post-tooltip",{"placement":[1],"arrow":[4],"delayed":[4],"show":[64],"hide":[64],"toggle":[64]},null,{"delayed":["validateDelayed"]}]]],["post-accordion",[[1,"post-accordion",{"headingLevel":[2,"heading-level"],"multiple":[4],"toggle":[64],"expandAll":[64],"collapseAll":[64]},[[0,"postToggle","collapseToggleHandler"]],{"headingLevel":["validateHeadingLevel"]}]]],["post-collapsible-trigger",[[0,"post-collapsible-trigger",{"for":[1],"update":[64]},[[4,"postToggle","setAriaExpanded"]],{"for":["setAriaAttributes"]}]]],["post-tab-header",[[1,"post-tab-header",{"panel":[1],"tabId":[32]},null,{"panel":["validateFor"]}]]],["post-tab-panel",[[1,"post-tab-panel",{"name":[1],"panelId":[32]}]]],["post-tabs",[[1,"post-tabs",{"activePanel":[1,"active-panel"],"show":[64]}]]],["post-collapsible",[[1,"post-collapsible",{"collapsed":[1028],"toggle":[64]},null,{"collapsed":["collapsedChange"]}]]],["post-icon",[[1,"post-icon",{"animation":[1],"base":[1],"flipH":[4,"flip-h"],"flipV":[4,"flip-v"],"name":[1],"rotate":[2],"scale":[2]},null,{"animation":["validateAnimation"],"base":["validateBase"],"flipH":["validateFlipH"],"flipV":["validateFlipV"],"name":["validateName"],"rotate":["validateRotate"],"scale":["validateScale"]}]]]], options);
 });

package/dist/esm/{post-icon-5d7a3ba9.js → post-icon-529e58e0.js}

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-9ace3232.js';
 import { c as checkEmptyOrOneOf, b as checkEmptyOrType } from './index-29d17d6d.js';
-import { v as version } from './package-79261567.js';
+import { v as version } from './package-b6631855.js';
 import { c as checkNonEmpty } from './check-non-empty-58bd6b17.js';
 import { c as checkType } from './check-type-8828dbe4.js';
 
@@ -20,8 +20,6 @@ const ANIMATION_KEYS = [...ANIMATION_NAMES];
 const PostIcon = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.svgStyles = undefined;
-        this.svgOutput = undefined;
         this.animation = null;
         this.base = null;
         this.flipH = false;
@@ -53,6 +51,64 @@ const PostIcon = class {
     validateScale(newValue = this.scale) {
         checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
     }
+    // Construct the icon url from different possible sources
+    getUrl() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        // the first definition object which defines a domain, will be used to set the domain of the file url
+        // the first definition object which defines a slug, will be used to set the slug of the file url
+        const urlDefinitions = [
+            getUrlDefinition(this.base, 'both'),
+            getUrlDefinition((_a = document.head
+                .querySelector('meta[name="design-system-settings"][data-post-icon-base]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-post-icon-base'), 'relative'),
+            getUrlDefinition((_b = document.querySelector('base[href]')) === null || _b === void 0 ? void 0 : _b.getAttribute('href'), 'both'),
+        ];
+        // in case no other definition defines a domain, the current origin is used as a fallback
+        const origin = (_e = (_d = (_c = urlDefinitions.find(d => d.definesDomain)) === null || _c === void 0 ? void 0 : _c.url) === null || _d === void 0 ? void 0 : _d.origin) !== null && _e !== void 0 ? _e : window.location.origin;
+        // in case no other definition defines a slug, the cdn url is used as a fallback
+        const slug = (_g = (_f = urlDefinitions.find(d => d.definesSlug)) === null || _f === void 0 ? void 0 : _f.url) === null || _g === void 0 ? void 0 : _g.pathname;
+        const file = `${this.name}.svg`;
+        let url;
+        if (slug) {
+            url = new URL(`${origin}${slug}/${file}`).toString();
+        }
+        else {
+            url = new URL(`${CDN_URL}/${file}`).toString();
+        }
+        return url;
+        function getUrlDefinition(url, allow) {
+            return {
+                url: getUrlObject(url),
+                definesDomain: allow !== 'relative' ? definesDomain(url) : false,
+                definesSlug: allow !== 'absolute' ? definesSlug(url) : false,
+            };
+            function getUrlObject(url) {
+                if (url) {
+                    return definesDomain(url) ? new URL(url) : new URL(url, window.location.origin);
+                }
+                else {
+                    return null;
+                }
+            }
+            function definesDomain(url) {
+                return url ? /^https?:\/\//.test(url) : false;
+            }
+            function definesSlug(url) {
+                const urlObject = getUrlObject(url);
+                return Boolean(/^\/.+/.test(urlObject === null || urlObject === void 0 ? void 0 : urlObject.pathname));
+            }
+        }
+    }
+    getStyles() {
+        const url = this.getUrl();
+        return Object.entries({
+            '-webkit-mask-image': `url(${url})`,
+            'mask-image': `url('${url}')`,
+            'transform': (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
+                (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
+        })
+            .filter(([_key, value]) => value !== null)
+            .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
+    }
     componentDidLoad() {
         this.validateBase();
         this.validateName();
@@ -62,45 +118,8 @@ const PostIcon = class {
         this.validateRotate();
         this.validateAnimation();
     }
-    componentWillRender() {
-        this.setPath();
-    }
-    setPath() {
-        var _a, _b, _c, _d, _e;
-        // Construct icon path from different possible sources
-        const metaBase = (_b = (_a = document.head
-            .querySelector('meta[name="design-system-settings"][data-post-icon-base]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-post-icon-base')) !== null && _b !== void 0 ? _b : null;
-        const baseHref = (_c = document.getElementsByTagName('base')[0]) === null || _c === void 0 ? void 0 : _c.href;
-        let calculatedBase;
-        // If this.base or metaBase are relative, prefix them with the baseHref if it exists
-        const absolutePathReg = /^(?:[a-z+]+:)?\/\//i;
-        if (baseHref) {
-            if (this.base && !absolutePathReg.test(this.base)) {
-                calculatedBase = baseHref + this.base;
-            }
-            else if (metaBase && !absolutePathReg.test(metaBase)) {
-                calculatedBase = baseHref + metaBase;
-            }
-        }
-        else {
-            calculatedBase = (_d = this.base) !== null && _d !== void 0 ? _d : metaBase;
-        }
-        const fileBase = `${(_e = calculatedBase !== null && calculatedBase !== void 0 ? calculatedBase : baseHref) !== null && _e !== void 0 ? _e : CDN_URL}/`.replace(/\/\/$/, '/');
-        const fileName = `${this.name}.svg`;
-        const filePath = `${fileBase}${fileName}`;
-        this.path = new URL(filePath, window.location.origin).toString();
-    }
     render() {
-        // create inline styles for some properties
-        const svgStyles = Object.entries({
-            '-webkit-mask-image': `url('${this.path}')`,
-            'mask-image': `url('${this.path}')`,
-            'transform': (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
-                (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
-        })
-            .filter(([_key, value]) => value !== null)
-            .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
-        return (h(Host, { key: 'bad9e5bf0bf6250cd6597a2e6e67cf1f334d0e2d', "data-version": version }, h("span", { key: '1b07a201ac1bc45cbea6ce6ad3285917cf76e46e', style: svgStyles })));
+        return (h(Host, { key: 'a38838bcd99af618f660ec4ffef4e869cdab3995', "data-version": version }, h("span", { key: '24ae06bdb0aa65ddca7ac88fac9bb6bb5a12550a', style: this.getStyles() })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {