@swisspost/design-system-components 8.8.1 → 8.9.0

package/loaders/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: '5703c51eda06d34af250a182b100a6bb85ce1dfb', "data-version": version }, h("span", { key: '918921da2a4ef82154d27d4a988c524deecb627b', style: svgStyles })));
+        return (h(Host, { key: '77740745eb170076301edb3ff96b846e48c7f2f4', "data-version": version }, h("span", { key: '573f2acd8e92ec5f2f8853b5cb05386bcaee693d', 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "8.8.1",
+  "version": "8.9.0",
   "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.",
   "license": "Apache-2.0",
   "main": "dist/index.cjs.js",
@@ -26,7 +26,7 @@
   "dependencies": {
     "@floating-ui/dom": "1.6.8",
     "@oddbird/popover-polyfill": "0.3.7",
-    "@swisspost/design-system-styles": "8.8.1",
+    "@swisspost/design-system-styles": "8.9.0",
     "ally.js": "1.4.1",
     "long-press-event": "2.5.0"
   },

package/dist/post-components/p-18a1b6aa.entry.js

@@ -1 +0,0 @@
-export{P as post_alert}from"./p-fbe0c51a.js";import"./p-343f6de1.js";import"./p-36e197f4.js";import"./p-2737eaf5.js";import"./p-deb4131c.js";import"./p-440193f4.js";import"./p-611b3c41.js";import"./p-b095519d.js";

package/dist/post-components/p-31b1c158.entry.js

@@ -1 +0,0 @@
-export{P as post_tag}from"./p-98a2eebf.js";import"./p-343f6de1.js";import"./p-36e197f4.js";

package/dist/post-components/p-326ddd97.entry.js

@@ -1 +0,0 @@
-export{P as post_tab_panel}from"./p-0642e538.js";import"./p-343f6de1.js";import"./p-36e197f4.js";

package/dist/post-components/p-36e197f4.js

@@ -1 +0,0 @@
-const o="8.8.1";export{o as v}

package/dist/post-components/p-453d2b59.entry.js

@@ -1 +0,0 @@
-export{P as post_tabs}from"./p-df113888.js";import"./p-343f6de1.js";import"./p-36e197f4.js";import"./p-2737eaf5.js";

package/dist/post-components/p-51f07a27.entry.js

@@ -1 +0,0 @@
-export{P as post_logo}from"./p-85b9b6ec.js";import"./p-343f6de1.js";import"./p-36e197f4.js";import"./p-deb4131c.js";import"./p-440193f4.js";import"./p-611b3c41.js";

package/dist/post-components/p-53b727b2.entry.js

@@ -1 +0,0 @@
-export{P as post_popover}from"./p-3a9ea683.js";import"./p-343f6de1.js";import"./p-36e197f4.js";import"./p-6adeaa6c.js";

package/dist/post-components/p-56dfc056.entry.js

@@ -1 +0,0 @@
-export{P as post_accordion}from"./p-3e67d7b3.js";import"./p-343f6de1.js";import"./p-36e197f4.js";import"./p-247a1668.js";import"./p-611b3c41.js";

package/dist/post-components/p-7be9ddcb.entry.js

@@ -1 +0,0 @@
-export{P as post_rating}from"./p-e14579cb.js";import"./p-343f6de1.js";import"./p-36e197f4.js";

package/dist/post-components/p-8479b48c.entry.js

@@ -1 +0,0 @@
-export{P as post_tab_header}from"./p-5ccdb402.js";import"./p-343f6de1.js";import"./p-36e197f4.js";import"./p-b095519d.js";import"./p-440193f4.js";

package/dist/post-components/p-949984b1.entry.js

@@ -1 +0,0 @@
-export{P as post_accordion_item}from"./p-6442b545.js";import"./p-343f6de1.js";import"./p-36e197f4.js";import"./p-247a1668.js";import"./p-deb4131c.js";import"./p-440193f4.js";import"./p-611b3c41.js";

package/dist/post-components/p-950c543c.entry.js

@@ -1 +0,0 @@
-export{P as post_tooltip}from"./p-a2020cf0.js";import"./p-343f6de1.js";import"./p-36e197f4.js";import"./p-6adeaa6c.js";import"./p-deb4131c.js";import"./p-440193f4.js";import"./p-611b3c41.js";

package/dist/post-components/p-ad17494f.entry.js

@@ -1 +0,0 @@
-export{P as post_icon}from"./p-b5b33d21.js";import"./p-343f6de1.js";import"./p-deb4131c.js";import"./p-440193f4.js";import"./p-611b3c41.js";import"./p-36e197f4.js";import"./p-b095519d.js";

package/dist/post-components/p-b5b33d21.js

@@ -1 +0,0 @@
-import{r as i,h as t,H as a,g as e}from"./p-343f6de1.js";import{c as o,d as n,a as s}from"./p-deb4131c.js";import{v as r}from"./p-36e197f4.js";import{c as l}from"./p-b095519d.js";const m=["cylon","cylon-vertical","spin","spin-reverse","fade","throb"],c=class{constructor(t){i(this,t),this.svgStyles=void 0,this.svgOutput=void 0,this.animation=null,this.base=null,this.flipH=!1,this.flipV=!1,this.name=void 0,this.rotate=null,this.scale=null}validateAnimation(i=this.animation){void 0!==i&&o(i,m,`The post-icon "animation" prop requires one of the following values: ${m.join(", ")}.`)}validateBase(i=this.base){n(i,"string",'The post-icon "base" prop should be a string.')}validateFlipH(i=this.flipH){n(i,"boolean",'The post-icon "flipH" prop should be a boolean.')}validateFlipV(i=this.flipV){n(i,"boolean",'The post-icon "flipV" prop should be a boolean.')}validateName(i=this.name){l(i,'The post-icon "name" prop is required!.'),s(i,"string",'The post-icon "name" prop should be a string.')}validateRotate(i=this.rotate){n(i,"number",'The post-icon "rotate" prop should be a number.')}validateScale(i=this.scale){n(i,"number",'The post-icon "scale" prop should be a number.')}componentDidLoad(){this.validateBase(),this.validateName(),this.validateFlipH(),this.validateFlipV(),this.validateScale(),this.validateRotate(),this.validateAnimation()}componentWillRender(){this.setPath()}setPath(){var i,t,a,e,o;const n=null!==(t=null===(i=document.head.querySelector('meta[name="design-system-settings"][data-post-icon-base]'))||void 0===i?void 0:i.getAttribute("data-post-icon-base"))&&void 0!==t?t:null,s=null===(a=document.getElementsByTagName("base")[0])||void 0===a?void 0:a.href;let r;const l=/^(?:[a-z+]+:)?\/\//i;s?this.base&&!l.test(this.base)?r=s+this.base:n&&!l.test(n)&&(r=s+n):r=null!==(e=this.base)&&void 0!==e?e:n;const m=`${null!==(o=null!=r?r:s)&&void 0!==o?o:"https://unpkg.com/@swisspost/design-system-icons/public/post-icons"}/`.replace(/\/\/$/,"/");this.path=new URL(`${m}${this.name}.svg`,window.location.origin).toString()}render(){const i=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((([i,t])=>null!==t)).reduce(((i,[t,a])=>Object.assign(i,{[t]:a})),{});return t(a,{key:"5703c51eda06d34af250a182b100a6bb85ce1dfb","data-version":r},t("span",{key:"918921da2a4ef82154d27d4a988c524deecb627b",style:i}))}get host(){return e(this)}static get watchers(){return{animation:["validateAnimation"],base:["validateBase"],flipH:["validateFlipH"],flipV:["validateFlipV"],name:["validateName"],rotate:["validateRotate"],scale:["validateScale"]}}};c.style=":host{display:inline-block;width:1em;height:1em;vertical-align:-0.15em}span{display:block;width:100%;height:100%;fill:currentColor;forced-color-adjust:preserve-parent-color;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}";export{c as P}

package/dist/post-components/p-dbf4049e.entry.js

@@ -1 +0,0 @@
-export{P as post_card_control}from"./p-0469b617.js";import"./p-343f6de1.js";import"./p-611b3c41.js";import"./p-b095519d.js";import"./p-440193f4.js";import"./p-36e197f4.js";

package/dist/post-components/p-f4d3207d.entry.js

@@ -1 +0,0 @@
-export{P as post_popovercontainer}from"./p-bfbc2d0f.js";import"./p-343f6de1.js";import"./p-36e197f4.js";