import { customElements , Element , HTMLElement } from '../node_modules/asdom/assembly/index' ; export class HelloFrom extends HTMLElement { static observedAttributes : string [ ] = [ 'place' , 'avatar' ] ; private static readonly __placeDefault : string = 'AssemblyScript' ; private __place : string = HelloFrom . __placeDefault ; private __placeRef : HTMLElement | null = null ; get place ( ) : string { return this . __place ; } set place ( value ) { this . __place = value ; if ( this . __placeRef ) this . __placeRef ! . innerText = value ; } private static readonly __avatarDefault : string = 'https://www.assemblyscript.org/images/icon.svg' ; private __avatar : string = HelloFrom . __avatarDefault ; private __avatarRef : HTMLElement | null = null ; get avatar ( ) : string { return this . __avatar ; } set avatar ( value ) { this . __avatar = value ; if ( this . __avatarRef ) this . __avatarRef ! . setAttribute ( 'src' , value ) ; } attributeChangedCallback ( attr , oldVal , newVal ) { if ( attr == 'place' ) { if ( ! newVal ) this . place = HelloFrom . __placeDefault ; else this . place = newVal ! ; } else if ( attr == 'avatar' ) { if ( ! newVal ) this . avatar = HelloFrom . __avatarDefault ; else this . avatar = newVal ! ; } } connectedCallback ( ) { let root = this . shadowRoot ; if ( ! root ) root = this . attachShadow ( { mode : 'open' } ) ; root . innerHTML = this . template ( ) ; this . __placeRef = root . querySelector ( '[ref=placeRef]' ) as HTMLElement ; this . __avatarRef = root . querySelector ( '[ref=avatarRef]' ) as HTMLElement ; } template ( ) { return `
			<style>
				:host {
					display: flex;
					flex-direction: column;
					align-items: center;
				}
				img {
					width: 150px;
				}
				p {
					font-size: 2rem;
				}
			</style>

			<img ref="avatarRef" src="${ this . avatar }" />
			<p>
				<em>Hello</em> from <strong ref="placeRef">${ this . place }</strong>!
			</p>
		` ; } } customElements . define ( 'hello-from' , ( ) => new HelloFrom ( ) , HelloFrom . observedAttributes ) ;