@swisspost/design-system-components 8.8.0 → 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,31 +120,8 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLEle
         this.validateRotate();
         this.validateAnimation();
     }
-    componentWillRender() {
-        this.setPath();
-    }
-    setPath() {
-        var _a, _b, _c, _d, _e, _f;
-        // 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;
-        const fileBase = `${(_f = (_e = (_d = this.base) !== null && _d !== void 0 ? _d : metaBase) !== null && _e !== void 0 ? _e : baseHref) !== null && _f !== void 0 ? _f : 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: '4eff0b8a359adccaa1957983f24dd9d2b5cc465d', "data-version": version }, h("span", { key: 'b84e20e26b501bb3c03a31beb908ece1c9dddfa5', 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 {
@@ -108,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/loaders/post-popovercontainer2.js

@@ -2039,7 +2039,7 @@ const computePosition = (reference, floating, options) => {
   }
 `,E=null;function I(e){if(E===null)try{E=new CSSStyleSheet,E.replaceSync(C);}catch{E=!1;}if(E===!1){let t=document.createElement("style");t.textContent=C,e instanceof Document?e.head.prepend(t):e.prepend(t);}else e.adoptedStyleSheets=[E,...e.adoptedStyleSheets];}function K(){window.ToggleEvent=window.ToggleEvent||c;function e(n){return n?.includes(":popover-open")&&(n=n.replace(J,"$1.\\:popover-open")),n}f(Document.prototype,"querySelector",e),f(Document.prototype,"querySelectorAll",e),f(Element.prototype,"querySelector",e),f(Element.prototype,"querySelectorAll",e),f(Element.prototype,"matches",e),f(Element.prototype,"closest",e),f(DocumentFragment.prototype,"querySelectorAll",e),f(DocumentFragment.prototype,"querySelectorAll",e),Object.defineProperties(HTMLElement.prototype,{popover:{enumerable:!0,configurable:!0,get(){if(!this.hasAttribute("popover"))return null;let n=(this.getAttribute("popover")||"").toLowerCase();return n===""||n=="auto"?"auto":"manual"},set(n){this.setAttribute("popover",n);}},showPopover:{enumerable:!0,configurable:!0,value(){S(this);}},hidePopover:{enumerable:!0,configurable:!0,value(){m(this,!0,!0);}},togglePopover:{enumerable:!0,configurable:!0,value(n){h.get(this)==="showing"&&n===void 0||n===!1?m(this,!0,!0):(n===void 0||n===!0)&&S(this);}}});let t=Element.prototype.attachShadow;t&&Object.defineProperties(Element.prototype,{attachShadow:{enumerable:!0,configurable:!0,writable:!0,value(n){let s=t.call(this,n);return I(s),s}}});let o=HTMLElement.prototype.attachInternals;o&&Object.defineProperties(HTMLElement.prototype,{attachInternals:{enumerable:!0,configurable:!0,writable:!0,value(){let n=o.call(this);return n.shadowRoot&&I(n.shadowRoot),n}}});let r=new WeakMap;function i(n){Object.defineProperties(n.prototype,{popoverTargetElement:{enumerable:!0,configurable:!0,set(s){if(s===null)this.removeAttribute("popovertarget"),r.delete(this);else if(s instanceof Element)this.setAttribute("popovertarget",""),r.set(this,s);else throw new TypeError("popoverTargetElement must be an element or null")},get(){if(this.localName!=="button"&&this.localName!=="input"||this.localName==="input"&&this.type!=="reset"&&this.type!=="image"&&this.type!=="button"||this.disabled||this.form&&this.type==="submit")return null;let s=r.get(this);if(s&&s.isConnected)return s;if(s&&!s.isConnected)return r.delete(this),null;let u=v(this),w=this.getAttribute("popovertarget");return (u instanceof Document||u instanceof B)&&w&&u.getElementById(w)||null}},popoverTargetAction:{enumerable:!0,configurable:!0,get(){let s=(this.getAttribute("popovertargetaction")||"").toLowerCase();return s==="show"||s==="hide"?s:"toggle"},set(s){this.setAttribute("popovertargetaction",s);}}});}i(HTMLButtonElement),i(HTMLInputElement);let l=n=>{if(!n.isTrusted)return;let s=n.composedPath()[0];if(!(s instanceof Element)||s?.shadowRoot)return;let u=v(s);if(!(u instanceof B||u instanceof Document))return;let w=s.closest("[popovertargetaction],[popovertarget]");if(w){O(w),n.preventDefault();return}},a=n=>{let s=n.key,u=n.target;!n.defaultPrevented&&u&&(s==="Escape"||s==="Esc")&&T(u.ownerDocument,!0,!0);};(n=>{n.addEventListener("click",l),n.addEventListener("keydown",a),n.addEventListener("pointerdown",x),n.addEventListener("pointerup",x);})(document),I(document);}j()||K();})();
 
-const postPopovercontainerCss = "@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}:where(post-popovercontainer){box-shadow:.5px 3px 4px rgba(0,0,0,.1),2px 4px 10px 4px rgba(0,0,0,.12);position:fixed;z-index:1060;width:max-content;margin:0;padding:0;box-sizing:border-box;color:var(--post-contrast-color);background-color:rgb(var(--post-bg-rgb));border:2px solid rgba(0,0,0,0);border-radius:4px;overflow:visible}:where(post-popovercontainer) .arrow{position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow.top{border-left:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.right{border-right:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.left{border-left:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.bottom{border-right:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}";
+const postPopovercontainerCss = "@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}:where(post-popovercontainer){box-shadow:.5px 3px 4px rgba(0,0,0,.1),2px 4px 10px 4px rgba(0,0,0,.12);position:fixed;z-index:1060;width:max-content;margin:0;padding:0;box-sizing:border-box;color:var(--post-contrast-color);background-color:rgb(var(--post-bg-rgb));border:2px solid rgba(0,0,0,0);border-radius:4px;overflow:visible}:where(post-popovercontainer):not(:has(.arrow)){box-shadow:.5px 3px 4px rgba(0,0,0,.1),2px 4px 10px 4px rgba(0,0,0,.12)}:where(post-popovercontainer):has(.arrow){filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.top){filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.left){filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.right){filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer) .arrow{position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow.top{border-left:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.right{border-right:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.left{border-left:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.bottom{border-right:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}";
 const PostPopovercontainerStyle0 = postPopovercontainerCss;
 
 const SIDE_MAP = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "8.8.0",
+  "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.0",
+    "@swisspost/design-system-styles": "8.9.0",
     "ally.js": "1.4.1",
     "long-press-event": "2.5.0"
   },

package/dist/post-components/p-051affe1.entry.js

@@ -1 +0,0 @@
-export{P as post_popovercontainer}from"./p-acc58441.js";import"./p-343f6de1.js";import"./p-072e09e5.js";

package/dist/post-components/p-072e09e5.js

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

package/dist/post-components/p-201aa44b.entry.js

@@ -1 +0,0 @@
-export{P as post_logo}from"./p-ee540033.js";import"./p-343f6de1.js";import"./p-072e09e5.js";import"./p-deb4131c.js";import"./p-440193f4.js";import"./p-611b3c41.js";

package/dist/post-components/p-423300d9.entry.js

@@ -1 +0,0 @@
-export{P as post_accordion}from"./p-6b39cec5.js";import"./p-343f6de1.js";import"./p-072e09e5.js";import"./p-247a1668.js";import"./p-611b3c41.js";

package/dist/post-components/p-442d115b.entry.js

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

package/dist/post-components/p-4a95d21e.entry.js

@@ -1 +0,0 @@
-export{P as post_tab_header}from"./p-2a21d0cb.js";import"./p-343f6de1.js";import"./p-072e09e5.js";import"./p-b095519d.js";import"./p-440193f4.js";

package/dist/post-components/p-50e9827f.entry.js

@@ -1 +0,0 @@
-export{P as post_alert}from"./p-a1d2c19f.js";import"./p-343f6de1.js";import"./p-072e09e5.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-5f048f56.entry.js

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

package/dist/post-components/p-6bbe961c.entry.js

@@ -1 +0,0 @@
-export{P as post_popover}from"./p-8632c93e.js";import"./p-343f6de1.js";import"./p-072e09e5.js";import"./p-6adeaa6c.js";

package/dist/post-components/p-753c8265.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-072e09e5.js";import{c as l}from"./p-b095519d.js";const c=["cylon","cylon-vertical","spin","spin-reverse","fade","throb"],m=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,c,`The post-icon "animation" prop requires one of the following values: ${c.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,n;const s=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,r=null===(a=document.getElementsByTagName("base")[0])||void 0===a?void 0:a.href,l=`${null!==(n=null!==(o=null!==(e=this.base)&&void 0!==e?e:s)&&void 0!==o?o:r)&&void 0!==n?n:"https://unpkg.com/@swisspost/design-system-icons/public/post-icons"}/`.replace(/\/\/$/,"/");this.path=new URL(`${l}${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:"4eff0b8a359adccaa1957983f24dd9d2b5cc465d","data-version":r},t("span",{key:"b84e20e26b501bb3c03a31beb908ece1c9dddfa5",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"]}}};m.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{m as P}

package/dist/post-components/p-956f9933.entry.js

@@ -1 +0,0 @@
-export{P as post_rating}from"./p-8914ab70.js";import"./p-343f6de1.js";import"./p-072e09e5.js";

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

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

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

@@ -1 +0,0 @@
-export{P as post_tag}from"./p-94c1642c.js";import"./p-343f6de1.js";import"./p-072e09e5.js";

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

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

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

@@ -1 +0,0 @@
-export{P as post_card_control}from"./p-8ffe22ec.js";import"./p-343f6de1.js";import"./p-611b3c41.js";import"./p-b095519d.js";import"./p-440193f4.js";import"./p-072e09e5.js";

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

@@ -1 +0,0 @@
-export{P as post_tab_panel}from"./p-6d229e13.js";import"./p-343f6de1.js";import"./p-072e09e5.js";