@sbb-esta/lyne-elements-dev 5.4.1-dev.1786238454 → 5.4.1-dev.1786369039

package/development/icon.pure.js

@@ -198,6 +198,7 @@ let SbbIconBase = (() => {
 			this._svgNamespace = namespace;
 			if (this._svgNamespace) this.internals.states.add(`namespace-${this._svgNamespace}`);
 			const svgIcon = this.fetchSvgIcon(this._svgNamespace, name);
+			this.toggleState("empty", true);
 			this._svgIcon = svgIcon.then((v) => unsafeHTML(v));
 			try {
 				this.toggleState("empty", !await svgIcon);

package/icon.pure.js

@@ -1,5 +1,5 @@
 import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isServer as r,nothing as i,unsafeCSS as a}from"lit";import{property as o,state as s}from"lit/decorators.js";import{unsafeHTML as c}from"lit/directives/unsafe-html.js";import{until as l}from"lit/directives/until.js";import{SbbElement as u,forceType as d,omitEmptyConverter as f,readConfig as p}from"./core.js";const m=e=>typeof e==`string`,h=e=>{if(e.nodeType===1){if(e.nodeName.toLowerCase()===`script`)return!1;for(let t=0;t<e.attributes.length;t++){let n=e.attributes[t].name;if(m(n)&&n.toLowerCase().indexOf(`on`)===0)return!1}for(let t=0;t<e.childNodes.length;t++)if(!h(e.childNodes[t]))return!1}return!0},g=(e,t=!0,n=!1)=>{let r=document.createElement(`div`);r.innerHTML=e;for(let e=r.childNodes.length-1;e>=0;e--)r.childNodes[e].nodeName.toLowerCase()!==`svg`&&r.removeChild(r.childNodes[e]);let i=r.firstElementChild;return i&&i.nodeName.toLowerCase()===`svg`&&(n&&!i.classList.contains(`color-immutable`)&&i.classList.add(`color-immutable`),!t||h(i))?r.innerHTML:``},_=`https://icons.app.sbb.ch/`,v=new Map().set(`default`,`${_}icons/`).set(`picto`,`${_}picto/`),y=new Map,b=(e,t,n)=>{let i=p().icon??{},a=i.namespaces?.get(e)??v.get(e);if(a==null)throw Error(`Unable to find the namespace "${e}". Please register your custom namespace.`);let o=`${a}${t}.svg`,s=y.get(o);if(!s)if(typeof fetch<`u`&&!r)s=(i.interceptor??(e=>e.request()))({namespace:e,name:t,url:o,request:()=>fetch(o).then(async r=>{if(!r.ok)throw Error(`Failed to load icon ${e}:${t}`);return g(await r.text(),n)}).catch(e=>(console.warn(e),``))}),y.set(o,s);else return Promise.resolve(``);return s};var x=`:host{-webkit-tap-highlight-color:transparent;line-height:0;display:inline-block}:host(:is(:state(empty),[state--empty])){--sbb-icon-default-dimension:0}:host(:is(:state(empty),[state--empty]):is(:state(namespace-default),[state--namespace-default])[name$=-extra-small]){--sbb-icon-default-dimension:var(--sbb-size-icon-ui-extra-small)}:host(:is(:state(empty),[state--empty]):is(:state(namespace-default),[state--namespace-default])[name$=-small]){--sbb-icon-default-dimension:var(--sbb-size-icon-ui-small)}:host(:is(:state(empty),[state--empty]):is(:state(namespace-default),[state--namespace-default])[name$=-medium]){--sbb-icon-default-dimension:var(--sbb-size-icon-ui-medium)}:host(:is(:state(empty),[state--empty]):is(:state(namespace-default),[state--namespace-default])[name$=-large]){--sbb-icon-default-dimension:var(--sbb-size-icon-ui-large)}svg{display:var(--sbb-icon-svg-display);width:var(--sbb-icon-svg-width,var(--sbb-icon-default-dimension));height:var(--sbb-icon-svg-height,var(--sbb-icon-default-dimension));stroke:var(--sbb-icon-svg-stroke-color);stroke-width:var(--sbb-icon-svg-stroke-width)}svg:not(.color-immutable) [fill]:not([fill=none]){fill:currentColor}svg:not(.color-immutable) [stroke]:not([stroke=none]){stroke:currentColor}svg:not(.color-immutable)>:where(path,polygon,polyline):where(:not([stroke]):not([fill])),svg:not(.color-immutable) :where(:not([stroke]):not([fill])) :where(path,polygon,polyline):where(:not([stroke]):not([fill])){fill:currentColor}
-`;const S=`default`;let C=(()=>{let r=u,i,f=[],p=[],m,h=[],g=[],_,v=[],y=[];return class extends r{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;i=[s()],m=[s()],_=[d(),o({attribute:`no-sanitize`,type:Boolean})],e(this,null,i,{kind:`accessor`,name:`_svgNamespace`,static:!1,private:!1,access:{has:e=>`_svgNamespace`in e,get:e=>e._svgNamespace,set:(e,t)=>{e._svgNamespace=t}},metadata:t},f,p),e(this,null,m,{kind:`accessor`,name:`_svgIcon`,static:!1,private:!1,access:{has:e=>`_svgIcon`in e,get:e=>e._svgIcon,set:(e,t)=>{e._svgIcon=t}},metadata:t},h,g),e(this,null,_,{kind:`accessor`,name:`noSanitize`,static:!1,private:!1,access:{has:e=>`noSanitize`in e,get:e=>e.noSanitize,set:(e,t)=>{e.noSanitize=t}},metadata:t},v,y),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[a(x)]}static{this.role=`img`}#e=t(this,f,S);get _svgNamespace(){return this.#e}set _svgNamespace(e){this.#e=e}#t=(t(this,p),t(this,h,null));get _svgIcon(){return this.#t}set _svgIcon(e){this.#t=e}#n=(t(this,g),t(this,v,!1));get noSanitize(){return this.#n}set noSanitize(e){this.#n=e}constructor(){super(),t(this,y),this.internals.states.add(`empty`)}async loadSvgIcon(e){if(!e)return;let[t,n]=this._splitIconName(e);this._svgNamespace&&this.internals.states.delete(`namespace-${this._svgNamespace}`),this._svgNamespace=t,this._svgNamespace&&this.internals.states.add(`namespace-${this._svgNamespace}`);let r=this.fetchSvgIcon(this._svgNamespace,n);this._svgIcon=r.then(e=>c(e));try{this.toggleState(`empty`,!await r)}catch{this.internals.states.add(`empty`)}}async fetchSvgIcon(e,t){return await b(e,t,!this.noSanitize)}_splitIconName(e){if(!e)return[``,``];let t=e.split(`:`);switch(t.length){case 1:return[S,t[0]];case 2:return t;default:throw Error(`Invalid icon name: "${e}"`)}}render(){return n`<span class="sbb-icon-inner"
+`;const S=`default`;let C=(()=>{let r=u,i,f=[],p=[],m,h=[],g=[],_,v=[],y=[];return class extends r{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;i=[s()],m=[s()],_=[d(),o({attribute:`no-sanitize`,type:Boolean})],e(this,null,i,{kind:`accessor`,name:`_svgNamespace`,static:!1,private:!1,access:{has:e=>`_svgNamespace`in e,get:e=>e._svgNamespace,set:(e,t)=>{e._svgNamespace=t}},metadata:t},f,p),e(this,null,m,{kind:`accessor`,name:`_svgIcon`,static:!1,private:!1,access:{has:e=>`_svgIcon`in e,get:e=>e._svgIcon,set:(e,t)=>{e._svgIcon=t}},metadata:t},h,g),e(this,null,_,{kind:`accessor`,name:`noSanitize`,static:!1,private:!1,access:{has:e=>`noSanitize`in e,get:e=>e.noSanitize,set:(e,t)=>{e.noSanitize=t}},metadata:t},v,y),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[a(x)]}static{this.role=`img`}#e=t(this,f,S);get _svgNamespace(){return this.#e}set _svgNamespace(e){this.#e=e}#t=(t(this,p),t(this,h,null));get _svgIcon(){return this.#t}set _svgIcon(e){this.#t=e}#n=(t(this,g),t(this,v,!1));get noSanitize(){return this.#n}set noSanitize(e){this.#n=e}constructor(){super(),t(this,y),this.internals.states.add(`empty`)}async loadSvgIcon(e){if(!e)return;let[t,n]=this._splitIconName(e);this._svgNamespace&&this.internals.states.delete(`namespace-${this._svgNamespace}`),this._svgNamespace=t,this._svgNamespace&&this.internals.states.add(`namespace-${this._svgNamespace}`);let r=this.fetchSvgIcon(this._svgNamespace,n);this.toggleState(`empty`,!0),this._svgIcon=r.then(e=>c(e));try{this.toggleState(`empty`,!await r)}catch{this.internals.states.add(`empty`)}}async fetchSvgIcon(e,t){return await b(e,t,!this.noSanitize)}_splitIconName(e){if(!e)return[``,``];let t=e.split(`:`);switch(t.length){case 1:return[S,t[0]];case 2:return t;default:throw Error(`Invalid icon name: "${e}"`)}}render(){return n`<span class="sbb-icon-inner"
       >${l(this._svgIcon,n`<svg width="0" height="0"></svg>`)}</span
     >`}}})(),w=(()=>{let r=C,i,a=[],c=[],l,u=[],p=[];return class extends r{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;i=[d(),o({reflect:!0,converter:f})],l=[s()],e(this,null,i,{kind:`accessor`,name:`name`,static:!1,private:!1,access:{has:e=>`name`in e,get:e=>e.name,set:(e,t)=>{e.name=t}},metadata:t},a,c),e(this,null,l,{kind:`accessor`,name:`_sbbAngularCompatibility`,static:!1,private:!1,access:{has:e=>`_sbbAngularCompatibility`in e,get:e=>e._sbbAngularCompatibility,set:(e,t)=>{e._sbbAngularCompatibility=t}},metadata:t},u,p),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-icon`}static get observedAttributes(){return super.observedAttributes.concat(`svgicon`)}#e=t(this,a,``);get name(){return this.#e}set name(e){this.#e=e}#t=(t(this,c),t(this,u,!1));get _sbbAngularCompatibility(){return this.#t}set _sbbAngularCompatibility(e){this.#t=e}constructor(){super(),t(this,p),this.internals.ariaHidden=`true`}async fetchSvgIcon(e,t){return this.internals.ariaLabel=`Icon ${t.replace(/-/g,` `)}`,super.fetchSvgIcon(e,t)}willUpdate(e){super.willUpdate(e),e.has(`name`)&&this.name&&this.loadSvgIcon(this.name)}attributeChangedCallback(e,t,n){e===`svgicon`?this._sbbAngularCompatibility=!!n:super.attributeChangedCallback(e,t,n)}render(){return this._sbbAngularCompatibility?n`<slot></slot>`:super.render()}}})();const T=r=>(()=>{let a=r,s,c=[],l=[];return class extends a{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(a[Symbol.metadata]??null):void 0;s=[d(),o({attribute:`icon-name`,converter:f})],e(this,null,s,{kind:`accessor`,name:`iconName`,static:!1,private:!1,access:{has:e=>`iconName`in e,get:e=>e.iconName,set:(e,t)=>{e.iconName=t}},metadata:t},c,l),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementDependencies=[w]}#e=t(this,c,``);get iconName(){return this.#e}set iconName(e){this.#e=e}renderIconSlot(e){let t=this._renderIconName();return n`
         <slot name="icon">

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.4.1-dev.1786238454",
+  "version": "5.4.1-dev.1786369039",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/e9a10b2130f3b8899de8ded840067e802a68f9dc"
+    "https://github.com/sbb-design-systems/lyne-components/commit/1718270b8a9155612b512f71bac402eb0895d137"
   ],
   "type": "module",
   "exports": {