@umbraco-ui/uui-icon - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

custom-elements.json

@@ -10,11 +10,17 @@ {
           "name": "name",
-          "type": "string | null"
+          "description": "Icon name is used to retrieve the icon from a parent Icon Registry.\nIf no Icon Registry responds to the given name, the fallback svg will be used.",
+          "type": "string",
+          "default": "\"null\""
         },
         {
           "name": "svg",
-          "type": "string | null"
+          "description": "Define the raw SVG string to be displayed by this component.",
+          "type": "string",
+          "default": "\"null\""
         },
         {
           "name": "fallback",
-          "type": "string | null"
+          "description": "Fallback SVG is a raw SVG string, this is used then 'name' hasn't been accepted by any parent Icon Registry.",
+          "type": "string",
+          "default": "\"null\""
         }
@@ -31,3 +37,5 @@ ],
           "attribute": "name",
-          "type": "string | null"
+          "description": "Icon name is used to retrieve the icon from a parent Icon Registry.\nIf no Icon Registry responds to the given name, the fallback svg will be used.",
+          "type": "string",
+          "default": "\"null\""
         },
@@ -37,3 +45,5 @@ {
           "attribute": "svg",
-          "type": "string | null"
+          "description": "Define the raw SVG string to be displayed by this component.",
+          "type": "string",
+          "default": "\"null\""
         },
@@ -43,4 +53,18 @@ {
           "attribute": "fallback",
-          "type": "string | null"
+          "description": "Fallback SVG is a raw SVG string, this is used then 'name' hasn't been accepted by any parent Icon Registry.",
+          "type": "string",
+          "default": "\"null\""
         }
+      ],
+      "events": [
+        {
+          "name": "icon_request",
+          "description": "fires when the name property is defined to retrieve the icon source."
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--uui-icon-color",
+          "description": "overwrite the icon color."
+        }
       ]
@@ -47,0 +71,0 @@ }

dist/uui-icon.min.js

@@ -1,22 +0,38 @@
-var zt=Object.defineProperty,Dt=Object.defineProperties;var jt=Object.getOwnPropertyDescriptors;var pt=Object.getOwnPropertySymbols;var Bt=Object.prototype.hasOwnProperty,qt=Object.prototype.propertyIsEnumerable;var vt=(u,v,$)=>v in u?zt(u,v,{enumerable:!0,configurable:!0,writable:!0,value:$}):u[v]=$,$t=(u,v)=>{for(var $ in v||(v={}))Bt.call(v,$)&&vt(u,$,v[$]);if(pt)for(var $ of pt(v))qt.call(v,$)&&vt(u,$,v[$]);return u},_t=(u,v)=>Dt(u,jt(v));var Wt=typeof require!="undefined"?require:u=>{throw new Error('Dynamic require of "'+u+'" is not supported')};(function(u){typeof define=="function"&&define.amd?define(u):u()})(function(){"use strict";/**
+(function(g){typeof define=="function"&&define.amd?define(g):g()})(function(){"use strict";/**
  * @license
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const u=window.ShadowRoot&&(window.ShadyCSS===void 0||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,v=Symbol(),$=new Map;class W{constructor(t,e){if(this._$cssResult$=!0,e!==v)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t}get styleSheet(){let t=$.get(this.cssText);return u&&t===void 0&&($.set(this.cssText,t=new CSSStyleSheet),t.replaceSync(this.cssText)),t}toString(){return this.cssText}}const ft=n=>new W(typeof n=="string"?n:n+"",v),mt=(n,...t)=>{const e=n.length===1?n[0]:t.reduce((s,i,r)=>s+(o=>{if(o._$cssResult$===!0)return o.cssText;if(typeof o=="number")return o;throw Error("Value passed to 'css' function must be a 'css' function result: "+o+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+n[r+1],n[0]);return new W(e,v)},gt=(n,t)=>{u?n.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet):t.forEach(e=>{const s=document.createElement("style"),i=window.litNonce;i!==void 0&&s.setAttribute("nonce",i),s.textContent=e.cssText,n.appendChild(s)})},K=u?n=>n:n=>n instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return ft(e)})(n):n;/**
+ */const g=window.ShadowRoot&&(window.ShadyCSS===void 0||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,I=Symbol(),K=new Map;class J{constructor(t,e){if(this._$cssResult$=!0,e!==I)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t}get styleSheet(){let t=K.get(this.cssText);return g&&t===void 0&&(K.set(this.cssText,t=new CSSStyleSheet),t.replaceSync(this.cssText)),t}toString(){return this.cssText}}const mt=i=>new J(typeof i=="string"?i:i+"",I),gt=(i,...t)=>{const e=i.length===1?i[0]:t.reduce((s,n,o)=>s+(r=>{if(r._$cssResult$===!0)return r.cssText;if(typeof r=="number")return r;throw Error("Value passed to 'css' function must be a 'css' function result: "+r+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(n)+i[o+1],i[0]);return new J(e,I)},yt=(i,t)=>{g?i.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet):t.forEach(e=>{const s=document.createElement("style"),n=window.litNonce;n!==void 0&&s.setAttribute("nonce",n),s.textContent=e.cssText,i.appendChild(s)})},Q=g?i=>i:i=>i instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return mt(e)})(i):i;/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */var N;const J=window.trustedTypes,yt=J?J.emptyScript:"",Q=window.reactiveElementPolyfillSupport,k={toAttribute(n,t){switch(t){case Boolean:n=n?yt:null;break;case Object:case Array:n=n==null?n:JSON.stringify(n)}return n},fromAttribute(n,t){let e=n;switch(t){case Boolean:e=n!==null;break;case Number:e=n===null?null:Number(n);break;case Object:case Array:try{e=JSON.parse(n)}catch(s){e=null}}return e}},Z=(n,t)=>t!==n&&(t==t||n==n),L={attribute:!0,type:String,converter:k,reflect:!1,hasChanged:Z};class y extends HTMLElement{constructor(){super(),this._$Et=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Ei=null,this.o()}static addInitializer(t){var e;(e=this.l)!==null&&e!==void 0||(this.l=[]),this.l.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach((e,s)=>{const i=this._$Eh(s,e);i!==void 0&&(this._$Eu.set(i,s),t.push(i))}),t}static createProperty(t,e=L){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const s=typeof t=="symbol"?Symbol():"__"+t,i=this.getPropertyDescriptor(t,s,e);i!==void 0&&Object.defineProperty(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){return{get(){return this[e]},set(i){const r=this[t];this[e]=i,this.requestUpdate(t,r,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||L}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Eu=new Map,this.hasOwnProperty("properties")){const e=this.properties,s=[...Object.getOwnPropertyNames(e),...Object.getOwnPropertySymbols(e)];for(const i of s)this.createProperty(i,e[i])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const i of s)e.unshift(K(i))}else t!==void 0&&e.push(K(t));return e}static _$Eh(t,e){const s=e.attribute;return s===!1?void 0:typeof s=="string"?s:typeof t=="string"?t.toLowerCase():void 0}o(){var t;this._$Ep=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$Em(),this.requestUpdate(),(t=this.constructor.l)===null||t===void 0||t.forEach(e=>e(this))}addController(t){var e,s;((e=this._$Eg)!==null&&e!==void 0?e:this._$Eg=[]).push(t),this.renderRoot!==void 0&&this.isConnected&&((s=t.hostConnected)===null||s===void 0||s.call(t))}removeController(t){var e;(e=this._$Eg)===null||e===void 0||e.splice(this._$Eg.indexOf(t)>>>0,1)}_$Em(){this.constructor.elementProperties.forEach((t,e)=>{this.hasOwnProperty(e)&&(this._$Et.set(e,this[e]),delete this[e])})}createRenderRoot(){var t;const e=(t=this.shadowRoot)!==null&&t!==void 0?t:this.attachShadow(this.constructor.shadowRootOptions);return gt(e,this.constructor.elementStyles),e}connectedCallback(){var t;this.renderRoot===void 0&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(t=this._$Eg)===null||t===void 0||t.forEach(e=>{var s;return(s=e.hostConnected)===null||s===void 0?void 0:s.call(e)})}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$Eg)===null||t===void 0||t.forEach(e=>{var s;return(s=e.hostDisconnected)===null||s===void 0?void 0:s.call(e)})}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$ES(t,e,s=L){var i,r;const o=this.constructor._$Eh(t,s);if(o!==void 0&&s.reflect===!0){const c=((r=(i=s.converter)===null||i===void 0?void 0:i.toAttribute)!==null&&r!==void 0?r:k.toAttribute)(e,s.type);this._$Ei=t,c==null?this.removeAttribute(o):this.setAttribute(o,c),this._$Ei=null}}_$AK(t,e){var s,i,r;const o=this.constructor,c=o._$Eu.get(t);if(c!==void 0&&this._$Ei!==c){const l=o.getPropertyOptions(c),h=l.converter,_=(r=(i=(s=h)===null||s===void 0?void 0:s.fromAttribute)!==null&&i!==void 0?i:typeof h=="function"?h:null)!==null&&r!==void 0?r:k.fromAttribute;this._$Ei=c,this[c]=_(e,l.type),this._$Ei=null}}requestUpdate(t,e,s){let i=!0;t!==void 0&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||Z)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),s.reflect===!0&&this._$Ei!==t&&(this._$E_===void 0&&(this._$E_=new Map),this._$E_.set(t,s))):i=!1),!this.isUpdatePending&&i&&(this._$Ep=this._$EC())}async _$EC(){this.isUpdatePending=!0;try{await this._$Ep}catch(e){Promise.reject(e)}const t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Et&&(this._$Et.forEach((i,r)=>this[r]=i),this._$Et=void 0);let e=!1;const s=this._$AL;try{e=this.shouldUpdate(s),e?(this.willUpdate(s),(t=this._$Eg)===null||t===void 0||t.forEach(i=>{var r;return(r=i.hostUpdate)===null||r===void 0?void 0:r.call(i)}),this.update(s)):this._$EU()}catch(i){throw e=!1,this._$EU(),i}e&&this._$AE(s)}willUpdate(t){}_$AE(t){var e;(e=this._$Eg)===null||e===void 0||e.forEach(s=>{var i;return(i=s.hostUpdated)===null||i===void 0?void 0:i.call(s)}),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$Ep}shouldUpdate(t){return!0}update(t){this._$E_!==void 0&&(this._$E_.forEach((e,s)=>this._$ES(s,this[s],e)),this._$E_=void 0),this._$EU()}updated(t){}firstUpdated(t){}}y.finalized=!0,y.elementProperties=new Map,y.elementStyles=[],y.shadowRootOptions={mode:"open"},Q==null||Q({ReactiveElement:y}),((N=globalThis.reactiveElementVersions)!==null&&N!==void 0?N:globalThis.reactiveElementVersions=[]).push("1.0.2");/**
+ */var k;const Z=window.trustedTypes,At=Z?Z.emptyScript:"",Y=window.reactiveElementPolyfillSupport,L={toAttribute(i,t){switch(t){case Boolean:i=i?At:null;break;case Object:case Array:i=i==null?i:JSON.stringify(i)}return i},fromAttribute(i,t){let e=i;switch(t){case Boolean:e=i!==null;break;case Number:e=i===null?null:Number(i);break;case Object:case Array:try{e=JSON.parse(i)}catch{e=null}}return e}},G=(i,t)=>t!==i&&(t==t||i==i),D={attribute:!0,type:String,converter:L,reflect:!1,hasChanged:G};class y extends HTMLElement{constructor(){super(),this._$Et=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Ei=null,this.o()}static addInitializer(t){var e;(e=this.l)!==null&&e!==void 0||(this.l=[]),this.l.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach((e,s)=>{const n=this._$Eh(s,e);n!==void 0&&(this._$Eu.set(n,s),t.push(n))}),t}static createProperty(t,e=D){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const s=typeof t=="symbol"?Symbol():"__"+t,n=this.getPropertyDescriptor(t,s,e);n!==void 0&&Object.defineProperty(this.prototype,t,n)}}static getPropertyDescriptor(t,e,s){return{get(){return this[e]},set(n){const o=this[t];this[e]=n,this.requestUpdate(t,o,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||D}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Eu=new Map,this.hasOwnProperty("properties")){const e=this.properties,s=[...Object.getOwnPropertyNames(e),...Object.getOwnPropertySymbols(e)];for(const n of s)this.createProperty(n,e[n])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const n of s)e.unshift(Q(n))}else t!==void 0&&e.push(Q(t));return e}static _$Eh(t,e){const s=e.attribute;return s===!1?void 0:typeof s=="string"?s:typeof t=="string"?t.toLowerCase():void 0}o(){var t;this._$Ep=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$Em(),this.requestUpdate(),(t=this.constructor.l)===null||t===void 0||t.forEach(e=>e(this))}addController(t){var e,s;((e=this._$Eg)!==null&&e!==void 0?e:this._$Eg=[]).push(t),this.renderRoot!==void 0&&this.isConnected&&((s=t.hostConnected)===null||s===void 0||s.call(t))}removeController(t){var e;(e=this._$Eg)===null||e===void 0||e.splice(this._$Eg.indexOf(t)>>>0,1)}_$Em(){this.constructor.elementProperties.forEach((t,e)=>{this.hasOwnProperty(e)&&(this._$Et.set(e,this[e]),delete this[e])})}createRenderRoot(){var t;const e=(t=this.shadowRoot)!==null&&t!==void 0?t:this.attachShadow(this.constructor.shadowRootOptions);return yt(e,this.constructor.elementStyles),e}connectedCallback(){var t;this.renderRoot===void 0&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(t=this._$Eg)===null||t===void 0||t.forEach(e=>{var s;return(s=e.hostConnected)===null||s===void 0?void 0:s.call(e)})}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$Eg)===null||t===void 0||t.forEach(e=>{var s;return(s=e.hostDisconnected)===null||s===void 0?void 0:s.call(e)})}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$ES(t,e,s=D){var n,o;const r=this.constructor._$Eh(t,s);if(r!==void 0&&s.reflect===!0){const c=((o=(n=s.converter)===null||n===void 0?void 0:n.toAttribute)!==null&&o!==void 0?o:L.toAttribute)(e,s.type);this._$Ei=t,c==null?this.removeAttribute(r):this.setAttribute(r,c),this._$Ei=null}}_$AK(t,e){var s,n,o;const r=this.constructor,c=r._$Eu.get(t);if(c!==void 0&&this._$Ei!==c){const l=r.getPropertyOptions(c),a=l.converter,p=(o=(n=(s=a)===null||s===void 0?void 0:s.fromAttribute)!==null&&n!==void 0?n:typeof a=="function"?a:null)!==null&&o!==void 0?o:L.fromAttribute;this._$Ei=c,this[c]=p(e,l.type),this._$Ei=null}}requestUpdate(t,e,s){let n=!0;t!==void 0&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||G)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),s.reflect===!0&&this._$Ei!==t&&(this._$E_===void 0&&(this._$E_=new Map),this._$E_.set(t,s))):n=!1),!this.isUpdatePending&&n&&(this._$Ep=this._$EC())}async _$EC(){this.isUpdatePending=!0;try{await this._$Ep}catch(e){Promise.reject(e)}const t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Et&&(this._$Et.forEach((n,o)=>this[o]=n),this._$Et=void 0);let e=!1;const s=this._$AL;try{e=this.shouldUpdate(s),e?(this.willUpdate(s),(t=this._$Eg)===null||t===void 0||t.forEach(n=>{var o;return(o=n.hostUpdate)===null||o===void 0?void 0:o.call(n)}),this.update(s)):this._$EU()}catch(n){throw e=!1,this._$EU(),n}e&&this._$AE(s)}willUpdate(t){}_$AE(t){var e;(e=this._$Eg)===null||e===void 0||e.forEach(s=>{var n;return(n=s.hostUpdated)===null||n===void 0?void 0:n.call(s)}),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$Ep}shouldUpdate(t){return!0}update(t){this._$E_!==void 0&&(this._$E_.forEach((e,s)=>this._$ES(s,this[s],e)),this._$E_=void 0),this._$EU()}updated(t){}firstUpdated(t){}}y.finalized=!0,y.elementProperties=new Map,y.elementStyles=[],y.shadowRootOptions={mode:"open"},Y==null||Y({ReactiveElement:y}),((k=globalThis.reactiveElementVersions)!==null&&k!==void 0?k:globalThis.reactiveElementVersions=[]).push("1.2.0");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */var z;const A=globalThis.trustedTypes,F=A?A.createPolicy("lit-html",{createHTML:n=>n}):void 0,m=`lit$${(Math.random()+"").slice(9)}$`,G="?"+m,At=`<${G}>`,E=document,C=(n="")=>E.createComment(n),U=n=>n===null||typeof n!="object"&&typeof n!="function",X=Array.isArray,Et=n=>{var t;return X(n)||typeof((t=n)===null||t===void 0?void 0:t[Symbol.iterator])=="function"},P=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Y=/-->/g,tt=/>/g,g=/>|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g,et=/'/g,st=/"/g,it=/^(?:script|style|textarea)$/i,b=Symbol.for("lit-noChange"),p=Symbol.for("lit-nothing"),nt=new WeakMap,bt=(n,t,e)=>{var s,i;const r=(s=e==null?void 0:e.renderBefore)!==null&&s!==void 0?s:t;let o=r._$litPart$;if(o===void 0){const c=(i=e==null?void 0:e.renderBefore)!==null&&i!==void 0?i:null;r._$litPart$=o=new T(t.insertBefore(C(),c),c,void 0,e!=null?e:{})}return o._$AI(n),o},w=E.createTreeWalker(E,129,null,!1),wt=(n,t)=>{const e=n.length-1,s=[];let i,r=t===2?"<svg>":"",o=P;for(let l=0;l<e;l++){const h=n[l];let _,a,d=-1,f=0;for(;f<h.length&&(o.lastIndex=f,a=o.exec(h),a!==null);)f=o.lastIndex,o===P?a[1]==="!--"?o=Y:a[1]!==void 0?o=tt:a[2]!==void 0?(it.test(a[2])&&(i=RegExp("</"+a[2],"g")),o=g):a[3]!==void 0&&(o=g):o===g?a[0]===">"?(o=i!=null?i:P,d=-1):a[1]===void 0?d=-2:(d=o.lastIndex-a[2].length,_=a[1],o=a[3]===void 0?g:a[3]==='"'?st:et):o===st||o===et?o=g:o===Y||o===tt?o=P:(o=g,i=void 0);const M=o===g&&n[l+1].startsWith("/>")?" ":"";r+=o===P?h+At:d>=0?(s.push(_),h.slice(0,d)+"$lit$"+h.slice(d)+m+M):h+m+(d===-2?(s.push(void 0),l):M)}const c=r+(n[e]||"<?>")+(t===2?"</svg>":"");return[F!==void 0?F.createHTML(c):c,s]};class x{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let r=0,o=0;const c=t.length-1,l=this.parts,[h,_]=wt(t,e);if(this.el=x.createElement(h,s),w.currentNode=this.el.content,e===2){const a=this.el.content,d=a.firstChild;d.remove(),a.append(...d.childNodes)}for(;(i=w.nextNode())!==null&&l.length<c;){if(i.nodeType===1){if(i.hasAttributes()){const a=[];for(const d of i.getAttributeNames())if(d.endsWith("$lit$")||d.startsWith(m)){const f=_[o++];if(a.push(d),f!==void 0){const M=i.getAttribute(f.toLowerCase()+"$lit$").split(m),I=/([.?@])?(.*)/.exec(f);l.push({type:1,index:r,name:I[2],strings:M,ctor:I[1]==="."?Ct:I[1]==="?"?Pt:I[1]==="@"?xt:R})}else l.push({type:6,index:r})}for(const d of a)i.removeAttribute(d)}if(it.test(i.tagName)){const a=i.textContent.split(m),d=a.length-1;if(d>0){i.textContent=A?A.emptyScript:"";for(let f=0;f<d;f++)i.append(a[f],C()),w.nextNode(),l.push({type:2,index:++r});i.append(a[d],C())}}}else if(i.nodeType===8)if(i.data===G)l.push({type:2,index:r});else{let a=-1;for(;(a=i.data.indexOf(m,a+1))!==-1;)l.push({type:7,index:r}),a+=m.length-1}r++}}static createElement(t,e){const s=E.createElement("template");return s.innerHTML=t,s}}function S(n,t,e=n,s){var i,r,o,c;if(t===b)return t;let l=s!==void 0?(i=e._$Cl)===null||i===void 0?void 0:i[s]:e._$Cu;const h=U(t)?void 0:t._$litDirective$;return(l==null?void 0:l.constructor)!==h&&((r=l==null?void 0:l._$AO)===null||r===void 0||r.call(l,!1),h===void 0?l=void 0:(l=new h(n),l._$AT(n,e,s)),s!==void 0?((o=(c=e)._$Cl)!==null&&o!==void 0?o:c._$Cl=[])[s]=l:e._$Cu=l),l!==void 0&&(t=S(n,l._$AS(n,t.values),l,s)),t}class St{constructor(t,e){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var e;const{el:{content:s},parts:i}=this._$AD,r=((e=t==null?void 0:t.creationScope)!==null&&e!==void 0?e:E).importNode(s,!0);w.currentNode=r;let o=w.nextNode(),c=0,l=0,h=i[0];for(;h!==void 0;){if(c===h.index){let _;h.type===2?_=new T(o,o.nextSibling,this,t):h.type===1?_=new h.ctor(o,h.name,h.strings,this,t):h.type===6&&(_=new Tt(o,this,t)),this.v.push(_),h=i[++l]}c!==(h==null?void 0:h.index)&&(o=w.nextNode(),c++)}return r}m(t){let e=0;for(const s of this.v)s!==void 0&&(s.strings!==void 0?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class T{constructor(t,e,s,i){var r;this.type=2,this._$AH=p,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cg=(r=i==null?void 0:i.isConnected)===null||r===void 0||r}get _$AU(){var t,e;return(e=(t=this._$AM)===null||t===void 0?void 0:t._$AU)!==null&&e!==void 0?e:this._$Cg}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return e!==void 0&&t.nodeType===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=S(this,t,e),U(t)?t===p||t==null||t===""?(this._$AH!==p&&this._$AR(),this._$AH=p):t!==this._$AH&&t!==b&&this.$(t):t._$litType$!==void 0?this.T(t):t.nodeType!==void 0?this.S(t):Et(t)?this.M(t):this.$(t)}A(t,e=this._$AB){return this._$AA.parentNode.insertBefore(t,e)}S(t){this._$AH!==t&&(this._$AR(),this._$AH=this.A(t))}$(t){this._$AH!==p&&U(this._$AH)?this._$AA.nextSibling.data=t:this.S(E.createTextNode(t)),this._$AH=t}T(t){var e;const{values:s,_$litType$:i}=t,r=typeof i=="number"?this._$AC(t):(i.el===void 0&&(i.el=x.createElement(i.h,this.options)),i);if(((e=this._$AH)===null||e===void 0?void 0:e._$AD)===r)this._$AH.m(s);else{const o=new St(r,this),c=o.p(this.options);o.m(s),this.S(c),this._$AH=o}}_$AC(t){let e=nt.get(t.strings);return e===void 0&&nt.set(t.strings,e=new x(t)),e}M(t){X(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const r of t)i===e.length?e.push(s=new T(this.A(C()),this.A(C()),this,this.options)):s=e[i],s._$AI(r),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var s;for((s=this._$AP)===null||s===void 0||s.call(this,!1,!0,e);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var e;this._$AM===void 0&&(this._$Cg=t,(e=this._$AP)===null||e===void 0||e.call(this,t))}}class R{constructor(t,e,s,i,r){this.type=1,this._$AH=p,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=r,s.length>2||s[0]!==""||s[1]!==""?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=p}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,s,i){const r=this.strings;let o=!1;if(r===void 0)t=S(this,t,e,0),o=!U(t)||t!==this._$AH&&t!==b,o&&(this._$AH=t);else{const c=t;let l,h;for(t=r[0],l=0;l<r.length-1;l++)h=S(this,c[s+l],e,l),h===b&&(h=this._$AH[l]),o||(o=!U(h)||h!==this._$AH[l]),h===p?t=p:t!==p&&(t+=(h!=null?h:"")+r[l+1]),this._$AH[l]=h}o&&!i&&this.k(t)}k(t){t===p?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t!=null?t:"")}}class Ct extends R{constructor(){super(...arguments),this.type=3}k(t){this.element[this.name]=t===p?void 0:t}}const Ut=A?A.emptyScript:"";class Pt extends R{constructor(){super(...arguments),this.type=4}k(t){t&&t!==p?this.element.setAttribute(this.name,Ut):this.element.removeAttribute(this.name)}}class xt extends R{constructor(t,e,s,i,r){super(t,e,s,i,r),this.type=5}_$AI(t,e=this){var s;if((t=(s=S(this,t,e,0))!==null&&s!==void 0?s:p)===b)return;const i=this._$AH,r=t===p&&i!==p||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,o=t!==p&&(i===p||r);r&&this.element.removeEventListener(this.name,this,i),o&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,s;typeof this._$AH=="function"?this._$AH.call((s=(e=this.options)===null||e===void 0?void 0:e.host)!==null&&s!==void 0?s:this.element,t):this._$AH.handleEvent(t)}}class Tt{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){S(this,t)}}const ot=window.litHtmlPolyfillSupport;ot==null||ot(x,T),((z=globalThis.litHtmlVersions)!==null&&z!==void 0?z:globalThis.litHtmlVersions=[]).push("2.0.2");/**
+ */var z;const A=globalThis.trustedTypes,X=A?A.createPolicy("lit-html",{createHTML:i=>i}):void 0,v=`lit$${(Math.random()+"").slice(9)}$`,tt="?"+v,Et=`<${tt}>`,E=document,w=(i="")=>E.createComment(i),C=i=>i===null||typeof i!="object"&&typeof i!="function",et=Array.isArray,bt=i=>{var t;return et(i)||typeof((t=i)===null||t===void 0?void 0:t[Symbol.iterator])=="function"},P=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,st=/-->/g,it=/>/g,_=/>|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g,nt=/'/g,rt=/"/g,ot=/^(?:script|style|textarea)$/i,St=i=>(t,...e)=>({_$litType$:i,strings:t,values:e}),lt=St(1),f=Symbol.for("lit-noChange"),d=Symbol.for("lit-nothing"),at=new WeakMap,wt=(i,t,e)=>{var s,n;const o=(s=e==null?void 0:e.renderBefore)!==null&&s!==void 0?s:t;let r=o._$litPart$;if(r===void 0){const c=(n=e==null?void 0:e.renderBefore)!==null&&n!==void 0?n:null;o._$litPart$=r=new U(t.insertBefore(w(),c),c,void 0,e??{})}return r._$AI(i),r},b=E.createTreeWalker(E,129,null,!1),Ct=(i,t)=>{const e=i.length-1,s=[];let n,o=t===2?"<svg>":"",r=P;for(let l=0;l<e;l++){const a=i[l];let p,h,u=-1,$=0;for(;$<a.length&&(r.lastIndex=$,h=r.exec(a),h!==null);)$=r.lastIndex,r===P?h[1]==="!--"?r=st:h[1]!==void 0?r=it:h[2]!==void 0?(ot.test(h[2])&&(n=RegExp("</"+h[2],"g")),r=_):h[3]!==void 0&&(r=_):r===_?h[0]===">"?(r=n??P,u=-1):h[1]===void 0?u=-2:(u=r.lastIndex-h[2].length,p=h[1],r=h[3]===void 0?_:h[3]==='"'?rt:nt):r===rt||r===nt?r=_:r===st||r===it?r=P:(r=_,n=void 0);const M=r===_&&i[l+1].startsWith("/>")?" ":"";o+=r===P?a+Et:u>=0?(s.push(p),a.slice(0,u)+"$lit$"+a.slice(u)+v+M):a+v+(u===-2?(s.push(void 0),l):M)}const c=o+(i[e]||"<?>")+(t===2?"</svg>":"");if(!Array.isArray(i)||!i.hasOwnProperty("raw"))throw Error("invalid template strings array");return[X!==void 0?X.createHTML(c):c,s]};class T{constructor({strings:t,_$litType$:e},s){let n;this.parts=[];let o=0,r=0;const c=t.length-1,l=this.parts,[a,p]=Ct(t,e);if(this.el=T.createElement(a,s),b.currentNode=this.el.content,e===2){const h=this.el.content,u=h.firstChild;u.remove(),h.append(...u.childNodes)}for(;(n=b.nextNode())!==null&&l.length<c;){if(n.nodeType===1){if(n.hasAttributes()){const h=[];for(const u of n.getAttributeNames())if(u.endsWith("$lit$")||u.startsWith(v)){const $=p[r++];if(h.push(u),$!==void 0){const M=n.getAttribute($.toLowerCase()+"$lit$").split(v),R=/([.?@])?(.*)/.exec($);l.push({type:1,index:o,name:R[2],strings:M,ctor:R[1]==="."?Tt:R[1]==="?"?Ot:R[1]==="@"?xt:N})}else l.push({type:6,index:o})}for(const u of h)n.removeAttribute(u)}if(ot.test(n.tagName)){const h=n.textContent.split(v),u=h.length-1;if(u>0){n.textContent=A?A.emptyScript:"";for(let $=0;$<u;$++)n.append(h[$],w()),b.nextNode(),l.push({type:2,index:++o});n.append(h[u],w())}}}else if(n.nodeType===8)if(n.data===tt)l.push({type:2,index:o});else{let h=-1;for(;(h=n.data.indexOf(v,h+1))!==-1;)l.push({type:7,index:o}),h+=v.length-1}o++}}static createElement(t,e){const s=E.createElement("template");return s.innerHTML=t,s}}function S(i,t,e=i,s){var n,o,r,c;if(t===f)return t;let l=s!==void 0?(n=e._$Cl)===null||n===void 0?void 0:n[s]:e._$Cu;const a=C(t)?void 0:t._$litDirective$;return(l==null?void 0:l.constructor)!==a&&((o=l==null?void 0:l._$AO)===null||o===void 0||o.call(l,!1),a===void 0?l=void 0:(l=new a(i),l._$AT(i,e,s)),s!==void 0?((r=(c=e)._$Cl)!==null&&r!==void 0?r:c._$Cl=[])[s]=l:e._$Cu=l),l!==void 0&&(t=S(i,l._$AS(i,t.values),l,s)),t}class Pt{constructor(t,e){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var e;const{el:{content:s},parts:n}=this._$AD,o=((e=t==null?void 0:t.creationScope)!==null&&e!==void 0?e:E).importNode(s,!0);b.currentNode=o;let r=b.nextNode(),c=0,l=0,a=n[0];for(;a!==void 0;){if(c===a.index){let p;a.type===2?p=new U(r,r.nextSibling,this,t):a.type===1?p=new a.ctor(r,a.name,a.strings,this,t):a.type===6&&(p=new Nt(r,this,t)),this.v.push(p),a=n[++l]}c!==(a==null?void 0:a.index)&&(r=b.nextNode(),c++)}return o}m(t){let e=0;for(const s of this.v)s!==void 0&&(s.strings!==void 0?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class U{constructor(t,e,s,n){var o;this.type=2,this._$AH=d,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=n,this._$Cg=(o=n==null?void 0:n.isConnected)===null||o===void 0||o}get _$AU(){var t,e;return(e=(t=this._$AM)===null||t===void 0?void 0:t._$AU)!==null&&e!==void 0?e:this._$Cg}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return e!==void 0&&t.nodeType===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=S(this,t,e),C(t)?t===d||t==null||t===""?(this._$AH!==d&&this._$AR(),this._$AH=d):t!==this._$AH&&t!==f&&this.$(t):t._$litType$!==void 0?this.T(t):t.nodeType!==void 0?this.S(t):bt(t)?this.A(t):this.$(t)}M(t,e=this._$AB){return this._$AA.parentNode.insertBefore(t,e)}S(t){this._$AH!==t&&(this._$AR(),this._$AH=this.M(t))}$(t){this._$AH!==d&&C(this._$AH)?this._$AA.nextSibling.data=t:this.S(E.createTextNode(t)),this._$AH=t}T(t){var e;const{values:s,_$litType$:n}=t,o=typeof n=="number"?this._$AC(t):(n.el===void 0&&(n.el=T.createElement(n.h,this.options)),n);if(((e=this._$AH)===null||e===void 0?void 0:e._$AD)===o)this._$AH.m(s);else{const r=new Pt(o,this),c=r.p(this.options);r.m(s),this.S(c),this._$AH=r}}_$AC(t){let e=at.get(t.strings);return e===void 0&&at.set(t.strings,e=new T(t)),e}A(t){et(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,n=0;for(const o of t)n===e.length?e.push(s=new U(this.M(w()),this.M(w()),this,this.options)):s=e[n],s._$AI(o),n++;n<e.length&&(this._$AR(s&&s._$AB.nextSibling,n),e.length=n)}_$AR(t=this._$AA.nextSibling,e){var s;for((s=this._$AP)===null||s===void 0||s.call(this,!1,!0,e);t&&t!==this._$AB;){const n=t.nextSibling;t.remove(),t=n}}setConnected(t){var e;this._$AM===void 0&&(this._$Cg=t,(e=this._$AP)===null||e===void 0||e.call(this,t))}}class N{constructor(t,e,s,n,o){this.type=1,this._$AH=d,this._$AN=void 0,this.element=t,this.name=e,this._$AM=n,this.options=o,s.length>2||s[0]!==""||s[1]!==""?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=d}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,s,n){const o=this.strings;let r=!1;if(o===void 0)t=S(this,t,e,0),r=!C(t)||t!==this._$AH&&t!==f,r&&(this._$AH=t);else{const c=t;let l,a;for(t=o[0],l=0;l<o.length-1;l++)a=S(this,c[s+l],e,l),a===f&&(a=this._$AH[l]),r||(r=!C(a)||a!==this._$AH[l]),a===d?t=d:t!==d&&(t+=(a??"")+o[l+1]),this._$AH[l]=a}r&&!n&&this.k(t)}k(t){t===d?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class Tt extends N{constructor(){super(...arguments),this.type=3}k(t){this.element[this.name]=t===d?void 0:t}}const Ut=A?A.emptyScript:"";class Ot extends N{constructor(){super(...arguments),this.type=4}k(t){t&&t!==d?this.element.setAttribute(this.name,Ut):this.element.removeAttribute(this.name)}}class xt extends N{constructor(t,e,s,n,o){super(t,e,s,n,o),this.type=5}_$AI(t,e=this){var s;if((t=(s=S(this,t,e,0))!==null&&s!==void 0?s:d)===f)return;const n=this._$AH,o=t===d&&n!==d||t.capture!==n.capture||t.once!==n.once||t.passive!==n.passive,r=t!==d&&(n===d||o);o&&this.element.removeEventListener(this.name,this,n),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,s;typeof this._$AH=="function"?this._$AH.call((s=(e=this.options)===null||e===void 0?void 0:e.host)!==null&&s!==void 0?s:this.element,t):this._$AH.handleEvent(t)}}class Nt{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){S(this,t)}}const ht=window.litHtmlPolyfillSupport;ht==null||ht(T,U),((z=globalThis.litHtmlVersions)!==null&&z!==void 0?z:globalThis.litHtmlVersions=[]).push("2.1.1");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */var D,j;class H extends y{constructor(){super(...arguments),this.renderOptions={host:this},this._$Dt=void 0}createRenderRoot(){var t,e;const s=super.createRenderRoot();return(t=(e=this.renderOptions).renderBefore)!==null&&t!==void 0||(e.renderBefore=s.firstChild),s}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Dt=bt(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),(t=this._$Dt)===null||t===void 0||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this._$Dt)===null||t===void 0||t.setConnected(!1)}render(){return b}}H.finalized=!0,H._$litElement$=!0,(D=globalThis.litElementHydrateSupport)===null||D===void 0||D.call(globalThis,{LitElement:H});const rt=globalThis.litElementPolyfillSupport;rt==null||rt({LitElement:H}),((j=globalThis.litElementVersions)!==null&&j!==void 0?j:globalThis.litElementVersions=[]).push("3.0.2");/**
+ */var B,j;class O extends y{constructor(){super(...arguments),this.renderOptions={host:this},this._$Dt=void 0}createRenderRoot(){var t,e;const s=super.createRenderRoot();return(t=(e=this.renderOptions).renderBefore)!==null&&t!==void 0||(e.renderBefore=s.firstChild),s}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Dt=wt(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),(t=this._$Dt)===null||t===void 0||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this._$Dt)===null||t===void 0||t.setConnected(!1)}render(){return f}}O.finalized=!0,O._$litElement$=!0,(B=globalThis.litElementHydrateSupport)===null||B===void 0||B.call(globalThis,{LitElement:O});const ct=globalThis.litElementPolyfillSupport;ct==null||ct({LitElement:O}),((j=globalThis.litElementVersions)!==null&&j!==void 0?j:globalThis.litElementVersions=[]).push("3.1.1");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const Ht=(n,t)=>t.kind==="method"&&t.descriptor&&!("value"in t.descriptor)?_t($t({},t),{finisher(e){e.createProperty(t.key,n)}}):{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:t.key,initializer(){typeof t.initializer=="function"&&(this[t.key]=t.initializer.call(this))},finisher(e){e.createProperty(t.key,n)}};function B(n){return(t,e)=>e!==void 0?((s,i,r)=>{i.constructor.createProperty(r,s)})(n,t,e):Ht(n,t)}var Ot=Object.defineProperty,lt=Object.getOwnPropertySymbols,Rt=Object.prototype.hasOwnProperty,Mt=Object.prototype.propertyIsEnumerable,ht=(n,t,e)=>t in n?Ot(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e,at=(n,t)=>{for(var e in t||(t={}))Rt.call(t,e)&&ht(n,e,t[e]);if(lt)for(var e of lt(t))Mt.call(t,e)&&ht(n,e,t[e]);return n};typeof require!="undefined"&&require;const ct=class extends Event{constructor(n,t={}){super(n,at(at({},ct.defaultInit),t));this.detail=t.detail||{}}};let dt=ct;dt.defaultInit={composed:!0};class ut{constructor(t){this.promise=new Promise((e,s)=>{this.resolve=e,this.reject=s}),t&&this.resolve(t)}set svg(t){this.resolve(t)}}class q extends dt{acceptRequest(){this.preventDefault()}}q.ICON_REQUEST="icon_request";class It extends EventTarget{constructor(){super(...arguments);this.icons={}}defineIcon(t,e){this.icons[t]&&(this.icons[t].svg=e),this.icons[t]=new ut(e)}async getIcon(t){if(this.icons[t])return this.icons[t].promise;{const e=new ut;this.icons[t]=e;const s=new q(q.ICON_REQUEST,{cancelable:!0,detail:{iconName:t}});return this.dispatchEvent(s),s.defaultPrevented===!1&&(console.log("reject"),e.reject()),e.promise}}}const Nt=new It;var kt=Object.defineProperty,Lt=Object.getOwnPropertyDescriptor;typeof require!="undefined"&&require;var V=(n,t,e,s)=>{for(var i=s>1?void 0:s?Lt(t,e):t,r=n.length-1,o;r>=0;r--)(o=n[r])&&(i=(s?o(t,e,i):o(i))||i);return s&&i&&kt(t,e,i),i};class O extends H{constructor(){super(...arguments);this._name=null,this._svg=null,this.fallback=null}get name(){return this._name}set name(t){this._name=t,this._name!==""&&this._name!==null&&Nt.getIcon(this._name).then(e=>{this.shadowRoot&&(this.shadowRoot.innerHTML=e)}).catch(()=>{this.fallback&&this.shadowRoot&&(this.shadowRoot.innerHTML=this.fallback)})}get svg(){return null}set svg(t){this._svg=t,this.shadowRoot&&(this.shadowRoot.innerHTML=t||"")}connectedCallback(){super.connectedCallback(),this._svg&&(this.shadowRoot.innerHTML=this._svg)}}O.styles=[mt`:host{display:inline-block;vertical-align:bottom;width:1.15em;height:1.15em}:host svg{fill:currentColor}`],V([B()],O.prototype,"name",1),V([B()],O.prototype,"svg",1),V([B()],O.prototype,"fallback",2),((n,t,e)=>{if(n.indexOf("-")>0===!1){console.error(`${n} is not a valid custom element name. A custom element name should consist of at least two words separated by a hyphen.`);return}customElements.get(n)?console.error(`${n} is already defined`):customElements.define(n,t,e)})("uui-icon",O)});
+ */const Ht=(i,t)=>t.kind==="method"&&t.descriptor&&!("value"in t.descriptor)?{...t,finisher(e){e.createProperty(t.key,i)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:t.key,initializer(){typeof t.initializer=="function"&&(this[t.key]=t.initializer.call(this))},finisher(e){e.createProperty(t.key,i)}};function H(i){return(t,e)=>e!==void 0?((s,n,o)=>{n.constructor.createProperty(o,s)})(i,t,e):Ht(i,t)}/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function dt(i){return H({...i,state:!0})}/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */var V;((V=window.HTMLSlotElement)===null||V===void 0?void 0:V.prototype.assignedElements)!=null;var Mt=Object.defineProperty,ut=Object.getOwnPropertySymbols,Rt=Object.prototype.hasOwnProperty,It=Object.prototype.propertyIsEnumerable,pt=(i,t,e)=>t in i?Mt(i,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[t]=e,$t=(i,t)=>{for(var e in t||(t={}))Rt.call(t,e)&&pt(i,e,t[e]);if(ut)for(var e of ut(t))It.call(t,e)&&pt(i,e,t[e]);return i};const kt={composed:!0};class Lt extends Event{constructor(t,e={}){super(t,$t($t({},kt),e));this.detail=e.detail||{}}}/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const Dt={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},zt=i=>(...t)=>({_$litDirective$:i,values:t});class Bt{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,s){this._$Ct=t,this._$AM=e,this._$Ci=s}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */class q extends Bt{constructor(t){if(super(t),this.it=d,t.type!==Dt.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===d||t==null)return this.vt=void 0,this.it=t;if(t===f)return t;if(typeof t!="string")throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this.vt;this.it=t;const e=[t];return e.raw=e,this.vt={_$litType$:this.constructor.resultType,strings:e,values:[]}}}q.directiveName="unsafeHTML",q.resultType=1;const F=zt(q);var jt=Object.defineProperty,vt=Object.getOwnPropertySymbols,Vt=Object.prototype.hasOwnProperty,qt=Object.prototype.propertyIsEnumerable,_t=(i,t,e)=>t in i?jt(i,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[t]=e,ft=(i,t)=>{for(var e in t||(t={}))Vt.call(t,e)&&_t(i,e,t[e]);if(vt)for(var e of vt(t))qt.call(t,e)&&_t(i,e,t[e]);return i};class W extends Lt{constructor(t,e={}){super(t,ft(ft({},{bubbles:!0}),e));this.icon=null}acceptRequest(t){this.icon=t,this.stopImmediatePropagation()}}W.ICON_REQUEST="icon_request";var Ft=Object.defineProperty,Wt=Object.getOwnPropertyDescriptor,x=(i,t,e,s)=>{for(var n=s>1?void 0:s?Wt(t,e):t,o=i.length-1,r;o>=0;o--)(r=i[o])&&(n=(s?r(t,e,n):r(n))||n);return s&&n&&Ft(t,e,n),n};class m extends O{constructor(){super(...arguments);this._name=null,this._nameSvg=null,this.svg=null,this.fallback=null,this._useFallback=!1}get name(){return this._name}set name(t){this._name=t,this.requestIcon()}requestIcon(){if(this._name!==""&&this._name!==null){const t=new W(W.ICON_REQUEST,{detail:{iconName:this._name}});this.dispatchEvent(t),t.icon!==null?t.icon.then(e=>{this._useFallback=!1,this._nameSvg=e}):this._useFallback=!0}}connectedCallback(){super.connectedCallback(),this._name!==""&&this._name!==null&&this._nameSvg===null&&this.requestIcon()}disconnectedCallback(){this._nameSvg=null}render(){return this._useFallback===!0?this.fallback===null?lt`<slot name="fallback"></slot>`:F(this.fallback):this._nameSvg!==null?F(this._nameSvg):this.svg!==null?F(this.svg):lt`<slot></slot>`}}m.styles=[gt`:host{display:inline-block;vertical-align:bottom;width:1.15em;height:1.15em}::slotted(svg),:host svg{fill:var(--uui-icon-color,currentColor)}`],x([dt()],m.prototype,"_nameSvg",2),x([H()],m.prototype,"name",1),x([H({attribute:!1})],m.prototype,"svg",2),x([H({attribute:!1})],m.prototype,"fallback",2),x([dt()],m.prototype,"_useFallback",2),((i,t,e)=>{if(i.indexOf("-")>0===!1){console.error(`${i} is not a valid custom element name. A custom element name should consist of at least two words separated by a hyphen.`);return}customElements.get(i)?console.error(`${i} is already defined`):customElements.define(i,t,e)})("uui-icon",m)});
 //# sourceMappingURL=uui-icon.min.js.map

lib/index.js

@@ -1,65 +0,37 @@
-import { css, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
+import { css, LitElement, html } from 'lit';
+import { state, property } from 'lit/decorators.js';
 import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 
-class UUIIconHost {
-  constructor(svg) {
-    this.promise = new Promise((resolveMethod, rejectMethod) => {
-      this.resolve = resolveMethod;
-      this.reject = rejectMethod;
-    });
-    if (svg) {
-      this.resolve(svg);
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
+  return a;
+};
+class UUIIconRequestEvent extends UUIEvent {
+  constructor(evName, eventInit = {}) {
+    super(evName, __spreadValues(__spreadValues({}, { bubbles: true }), eventInit));
+    this.icon = null;
   }
-  set svg(svg) {
-    this.resolve(svg);
+  acceptRequest(icon) {
+    this.icon = icon;
+    this.stopImmediatePropagation();
   }
 }
+UUIIconRequestEvent.ICON_REQUEST = "icon_request";
 
-class UUIIconRegistryEvent extends UUIEvent {
-  acceptRequest() {
-    this.preventDefault();
-  }
-}
-UUIIconRegistryEvent.ICON_REQUEST = "icon_request";
-
-class UUIIconRegistry extends EventTarget {
-  constructor() {
-    super(...arguments);
-    this.icons = {};
-  }
-  defineIcon(iconName, svgString) {
-    if (this.icons[iconName]) {
-      this.icons[iconName].svg = svgString;
-    }
-    this.icons[iconName] = new UUIIconHost(svgString);
-  }
-  async getIcon(iconName) {
-    if (this.icons[iconName]) {
-      return this.icons[iconName].promise;
-    } else {
-      const icon = new UUIIconHost();
-      this.icons[iconName] = icon;
-      const event = new UUIIconRegistryEvent(UUIIconRegistryEvent.ICON_REQUEST, {
-        cancelable: true,
-        detail: { iconName }
-      });
-      this.dispatchEvent(event);
-      if (event.defaultPrevented === false) {
-        console.log("reject");
-        icon.reject();
-      }
-      return icon.promise;
-    }
-  }
-}
-const iconRegistry = new UUIIconRegistry();
-
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-typeof require !== "undefined" ? require : (x) => {
-  throw new Error('Dynamic require of "' + x + '" is not supported');
-};
 var __decorateClass = (decorators, target, key, kind) => {
@@ -78,4 +50,6 @@ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
     this._name = null;
-    this._svg = null;
+    this._nameSvg = null;
+    this.svg = null;
     this.fallback = null;
+    this._useFallback = false;
   }
@@ -87,29 +61,47 @@ get name() {
     this._name = newValue;
+    this.requestIcon();
+  }
+  requestIcon() {
     if (this._name !== "" && this._name !== null) {
-      iconRegistry.getIcon(this._name).then((svg) => {
-        if (this.shadowRoot) {
-          this.shadowRoot.innerHTML = svg;
-        }
-      }).catch(() => {
-        if (this.fallback && this.shadowRoot) {
-          this.shadowRoot.innerHTML = this.fallback;
-        }
+      const event = new UUIIconRequestEvent(UUIIconRequestEvent.ICON_REQUEST, {
+        detail: { iconName: this._name }
       });
+      this.dispatchEvent(event);
+      if (event.icon !== null) {
+        event.icon.then((iconSvg) => {
+          this._useFallback = false;
+          this._nameSvg = iconSvg;
+        });
+      } else {
+        this._useFallback = true;
+      }
     }
   }
-  get svg() {
-    return null;
-  }
-  set svg(newValue) {
-    this._svg = newValue;
-    if (this.shadowRoot) {
-      this.shadowRoot.innerHTML = newValue || "";
-    }
-  }
   connectedCallback() {
     super.connectedCallback();
-    if (this._svg) {
-      this.shadowRoot.innerHTML = this._svg;
+    if (this._name !== "" && this._name !== null) {
+      if (this._nameSvg === null) {
+        this.requestIcon();
+      }
     }
   }
+  disconnectedCallback() {
+    this._nameSvg = null;
+  }
+  render() {
+    if (this._useFallback === true) {
+      if (this.fallback === null) {
+        return html`<slot name="fallback"></slot>`;
+      } else {
+        return unsafeHTML(this.fallback);
+      }
+    }
+    if (this._nameSvg !== null) {
+      return unsafeHTML(this._nameSvg);
+    }
+    if (this.svg !== null) {
+      return unsafeHTML(this.svg);
+    }
+    return html`<slot></slot>`;
+  }
 }
@@ -125,4 +117,5 @@ UUIIconElement.styles = [
 
-      :host svg {
-        fill: currentColor;
+      :host svg,
+      ::slotted(svg) {
+        fill: var(--uui-icon-color, currentColor);
       }
@@ -132,11 +125,17 @@ `
 __decorateClass([
+  state()
+], UUIIconElement.prototype, "_nameSvg", 2);
+__decorateClass([
   property()
 ], UUIIconElement.prototype, "name", 1);
 __decorateClass([
-  property()
-], UUIIconElement.prototype, "svg", 1);
+  property({ attribute: false })
+], UUIIconElement.prototype, "svg", 2);
 __decorateClass([
-  property()
+  property({ attribute: false })
 ], UUIIconElement.prototype, "fallback", 2);
+__decorateClass([
+  state()
+], UUIIconElement.prototype, "_useFallback", 2);
 
 defineElement("uui-icon", UUIIconElement);

lib/uui-icon.element.d.ts

 import { LitElement } from 'lit';
 /**
  * @element uui-icon
+ * @fires {UUIIconRequestEvent} icon_request - fires when the name property is defined to retrieve the icon source.
+ * @description - Icon component for displaying icons.
+ * @cssprop --uui-icon-color - overwrite the icon color.
+ * @see UUIIconRegistryElement Ideally used together with a icon registry.
  */
@@ -8,9 +12,31 @@ export declare class UUIIconElement extends LitElement {
     private _name;
+    private _nameSvg;
+    /**
+     * Icon name is used to retrieve the icon from a parent Icon Registry.
+     * If no Icon Registry responds to the given name, the fallback svg will be used.
+     * @type {string}
+     * @attr
+     * @default null
+     */
     get name(): string | null;
     set name(newValue: string | null);
-    private _svg;
-    get svg(): string | null;
-    set svg(newValue: string | null);
+    private requestIcon;
+    /**
+     * Define the raw SVG string to be displayed by this component.
+     * @type {string}
+     * @attr
+     * @default null
+     */
+    svg: string | null;
+    /**
+     * Fallback SVG is a raw SVG string, this is used then 'name' hasn't been accepted by any parent Icon Registry.
+     * @type {string}
+     * @attr
+     * @default null
+     */
     fallback: string | null;
+    private _useFallback;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/unsafe-html").UnsafeHTMLDirective>;
 }

lib/uui-icon.element.js

@@ -1,64 +0,36 @@
-import { css, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
+import { css, LitElement, html } from 'lit';
+import { state, property } from 'lit/decorators.js';
 import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
-class UUIIconHost {
-  constructor(svg) {
-    this.promise = new Promise((resolveMethod, rejectMethod) => {
-      this.resolve = resolveMethod;
-      this.reject = rejectMethod;
-    });
-    if (svg) {
-      this.resolve(svg);
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
+  return a;
+};
+class UUIIconRequestEvent extends UUIEvent {
+  constructor(evName, eventInit = {}) {
+    super(evName, __spreadValues(__spreadValues({}, { bubbles: true }), eventInit));
+    this.icon = null;
   }
-  set svg(svg) {
-    this.resolve(svg);
+  acceptRequest(icon) {
+    this.icon = icon;
+    this.stopImmediatePropagation();
   }
 }
+UUIIconRequestEvent.ICON_REQUEST = "icon_request";
 
-class UUIIconRegistryEvent extends UUIEvent {
-  acceptRequest() {
-    this.preventDefault();
-  }
-}
-UUIIconRegistryEvent.ICON_REQUEST = "icon_request";
-
-class UUIIconRegistry extends EventTarget {
-  constructor() {
-    super(...arguments);
-    this.icons = {};
-  }
-  defineIcon(iconName, svgString) {
-    if (this.icons[iconName]) {
-      this.icons[iconName].svg = svgString;
-    }
-    this.icons[iconName] = new UUIIconHost(svgString);
-  }
-  async getIcon(iconName) {
-    if (this.icons[iconName]) {
-      return this.icons[iconName].promise;
-    } else {
-      const icon = new UUIIconHost();
-      this.icons[iconName] = icon;
-      const event = new UUIIconRegistryEvent(UUIIconRegistryEvent.ICON_REQUEST, {
-        cancelable: true,
-        detail: { iconName }
-      });
-      this.dispatchEvent(event);
-      if (event.defaultPrevented === false) {
-        console.log("reject");
-        icon.reject();
-      }
-      return icon.promise;
-    }
-  }
-}
-const iconRegistry = new UUIIconRegistry();
-
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-typeof require !== "undefined" ? require : (x) => {
-  throw new Error('Dynamic require of "' + x + '" is not supported');
-};
 var __decorateClass = (decorators, target, key, kind) => {
@@ -77,4 +49,6 @@ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
     this._name = null;
-    this._svg = null;
+    this._nameSvg = null;
+    this.svg = null;
     this.fallback = null;
+    this._useFallback = false;
   }
@@ -86,29 +60,47 @@ get name() {
     this._name = newValue;
+    this.requestIcon();
+  }
+  requestIcon() {
     if (this._name !== "" && this._name !== null) {
-      iconRegistry.getIcon(this._name).then((svg) => {
-        if (this.shadowRoot) {
-          this.shadowRoot.innerHTML = svg;
-        }
-      }).catch(() => {
-        if (this.fallback && this.shadowRoot) {
-          this.shadowRoot.innerHTML = this.fallback;
-        }
+      const event = new UUIIconRequestEvent(UUIIconRequestEvent.ICON_REQUEST, {
+        detail: { iconName: this._name }
       });
+      this.dispatchEvent(event);
+      if (event.icon !== null) {
+        event.icon.then((iconSvg) => {
+          this._useFallback = false;
+          this._nameSvg = iconSvg;
+        });
+      } else {
+        this._useFallback = true;
+      }
     }
   }
-  get svg() {
-    return null;
-  }
-  set svg(newValue) {
-    this._svg = newValue;
-    if (this.shadowRoot) {
-      this.shadowRoot.innerHTML = newValue || "";
-    }
-  }
   connectedCallback() {
     super.connectedCallback();
-    if (this._svg) {
-      this.shadowRoot.innerHTML = this._svg;
+    if (this._name !== "" && this._name !== null) {
+      if (this._nameSvg === null) {
+        this.requestIcon();
+      }
     }
   }
+  disconnectedCallback() {
+    this._nameSvg = null;
+  }
+  render() {
+    if (this._useFallback === true) {
+      if (this.fallback === null) {
+        return html`<slot name="fallback"></slot>`;
+      } else {
+        return unsafeHTML(this.fallback);
+      }
+    }
+    if (this._nameSvg !== null) {
+      return unsafeHTML(this._nameSvg);
+    }
+    if (this.svg !== null) {
+      return unsafeHTML(this.svg);
+    }
+    return html`<slot></slot>`;
+  }
 }
@@ -124,4 +116,5 @@ UUIIconElement.styles = [
 
-      :host svg {
-        fill: currentColor;
+      :host svg,
+      ::slotted(svg) {
+        fill: var(--uui-icon-color, currentColor);
       }
@@ -131,11 +124,17 @@ `
 __decorateClass([
+  state()
+], UUIIconElement.prototype, "_nameSvg", 2);
+__decorateClass([
   property()
 ], UUIIconElement.prototype, "name", 1);
 __decorateClass([
-  property()
-], UUIIconElement.prototype, "svg", 1);
+  property({ attribute: false })
+], UUIIconElement.prototype, "svg", 2);
 __decorateClass([
-  property()
+  property({ attribute: false })
 ], UUIIconElement.prototype, "fallback", 2);
+__decorateClass([
+  state()
+], UUIIconElement.prototype, "_useFallback", 2);
 
 export { UUIIconElement };

package.json

 {
   "name": "@umbraco-ui/uui-icon",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "MIT",
@@ -32,3 +32,3 @@ "keywords": [
   "dependencies": {
-    "@umbraco-ui/uui-base": "0.0.14"
+    "@umbraco-ui/uui-base": "0.0.15"
   },
@@ -44,3 +44,3 @@ "scripts": {
   "homepage": "https://uui.umbraco.com/?path=/story/uui-icon",
-  "gitHead": "27d48bb352dcac2b08d55958ecba92b28c11d957"
+  "gitHead": "2a640ce4460de94e9c92a97310e27b84bbd6edda"
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

103760

increased by38.72%

Lines of code

522

increased by20%

Number of low quality alerts

1

decreased by-50%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

12

decreased by-7.69%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@umbraco-ui/uui-base@0.0.15(transitive)

• - Removed@umbraco-ui/uui-base@0.0.14(transitive)

• Updated@umbraco-ui/uui-base@0.0.15