@spectrum-web-components/icon
Version:
`<sp-icon>` renders an icon to the page. By default the `name` attribute will pair with separately registered icon sets to deliver the icons. When not present, `<sp-icon>` will subsequently check for its `src` attribute which could populate the icon via a
11 lines (10 loc) • 2.3 kB
JavaScript
"use strict";var p=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var o=(s,r,e,t)=>{for(var i=t>1?void 0:t?l(r,e):r,n=s.length-1,a;n>=0;n--)(a=s[n])&&(i=(t?a(r,e,i):a(i))||i);return t&&i&&p(r,e,i),i};import{html as c}from"@spectrum-web-components/base";import{property as d,query as m}from"@spectrum-web-components/base/src/decorators.js";import{ifDefined as u}from"@spectrum-web-components/base/src/directives.js";import{IconsetRegistry as h}from"@spectrum-web-components/iconset/src/iconset-registry.js";import{IconBase as v}from"./IconBase.js";export class Icon extends v{constructor(){super(...arguments);this.iconsetListener=e=>{if(!this.name)return;const t=this.parseIcon(this.name);e.detail.name===t.iconset&&(this.updateIconPromise=this.updateIcon())}}connectedCallback(){super.connectedCallback(),window.addEventListener("sp-iconset-added",this.iconsetListener)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("sp-iconset-added",this.iconsetListener)}firstUpdated(){this.updateIconPromise=this.updateIcon()}attributeChangedCallback(e,t,i){super.attributeChangedCallback(e,t,i),this.updateIconPromise=this.updateIcon()}announceIconImageSrcError(){this.dispatchEvent(new Event("error",{cancelable:!1,bubbles:!1,composed:!1}))}render(){return this.name?c`
<div id="container"></div>
`:this.src?c`
<img
src="${this.src}"
alt=${u(this.label)}
=${this.announceIconImageSrcError}
/>
`:super.render()}async updateIcon(){if(this.updateIconPromise&&await this.updateIconPromise,!this.name)return Promise.resolve();const e=this.parseIcon(this.name),t=h.getInstance().getIconset(e.iconset);return!t||!this.iconContainer?Promise.resolve():(this.iconContainer.innerHTML="",t.applyIconToElement(this.iconContainer,e.icon,this.size||"",this.label?this.label:""))}parseIcon(e){const t=e.split(":");let i="default",n=e;return t.length>1&&(i=t[0],n=t[1]),{iconset:i,icon:n}}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this.updateIconPromise,e}}o([d()],Icon.prototype,"src",2),o([d()],Icon.prototype,"name",2),o([m("#container")],Icon.prototype,"iconContainer",2);
//# sourceMappingURL=Icon.js.map