import { html , TemplateResult } from '@spectrum-web-components/base' ; import { property , query , } from '@spectrum-web-components/base/src/decorators.js' ; import { ifDefined } from '@spectrum-web-components/base/src/directives.js' ; import { IconsetRegistry } from '@spectrum-web-components/iconset/src/iconset-registry.js' ; import { IconBase } from './IconBase.js' ; element export class Icon extends IconBase { @ property ( ) public src ? : string ; @ property ( ) public name ? : string ; @ query ( '#container' ) private iconContainer ? : HTMLElement ; private updateIconPromise ? : Promise < void > ; public connectedCallback ( ) { super . connectedCallback ( ) ; window . addEventListener ( 'sp-iconset-added' , this . iconsetListener ) ; } public disconnectedCallback ( ) { super . disconnectedCallback ( ) ; window . removeEventListener ( 'sp-iconset-added' , this . iconsetListener ) ; } public firstUpdated ( ) { this . updateIconPromise = this . updateIcon ( ) ; } public attributeChangedCallback ( name , old , value ) { super . attributeChangedCallback ( name , old , value ) ; this . updateIconPromise = this . updateIcon ( ) ; } private iconsetListener = ( event ) : void => { if ( ! this . name ) { return ; } const icon = this . parseIcon ( this . name ) ; if ( event . detail . name === icon . iconset ) { this . updateIconPromise = this . updateIcon ( ) ; } } ; protected render ( ) { if ( this . name ) { return html `
                <div id="container"></div>
            ` ; } else if ( this . src ) { return html `
                <img src="${ this . src }" alt=${ ifDefined ( this . label ) } />
            ` ; } return super . render ( ) ; } private async updateIcon ( ) { if ( this . updateIconPromise ) { await this . updateIconPromise ; } if ( ! this . name ) { return Promise . resolve ( ) ; } const icon = this . parseIcon ( this . name ) ; const iconset = IconsetRegistry . getInstance ( ) . getIconset ( icon . iconset ) ; if ( ! iconset ) { return Promise . resolve ( ) ; } if ( ! this . iconContainer ) { return Promise . resolve ( ) ; } this . iconContainer . innerHTML = '' ; return iconset . applyIconToElement ( this . iconContainer , icon . icon , this . size || '' , this . label ? this . label : '' ) ; } private parseIcon ( icon ) { const iconParts = icon . split ( ':' ) ; let iconsetName = 'default' ; let iconName = icon ; if ( iconParts . length > 1 ) { iconsetName = iconParts [ 0 ] ; iconName = iconParts [ 1 ] ; } return { iconset : iconsetName , icon : iconName } ; } protected async getUpdateComplete ( ) { const complete = ( await super . getUpdateComplete ( ) ) as boolean ; await this . updateIconPromise ; return complete ; } }