import { Component , Event , EventEmitter , Listen , Method , Prop , State , Watch , h } from '@stencil/core' ; import { format } from './utils' ; @ Component ( { tag : 'cmp-a' , styleUrl : 'cmp-a.css' , shadow : true , } ) export class CmpA { /**
     * The first name
     */ @ Prop ( ) first : string ; /**
     * The middle name
     */ @ Prop ( ) middle : string ; /**
     * The last name
     */ @ Prop ( ) last : string ; @ State ( ) innerFirst : string ; @ State ( ) innerMiddle : string ; @ State ( ) innerLast : string ; @ Watch ( 'first' ) parseFirstProp ( newValue ) { this . innerFirst = newValue ? newValue : '' ; } @ Watch ( 'middle' ) parseMiddleProp ( newValue ) { this . innerMiddle = newValue ? newValue : '' ; } @ Watch ( 'last' ) parseLastProp ( newValue ) { this . innerLast = newValue ? newValue : '' ; } /**
     * Emitted when the component Loads
     */ @ Event ( ) initevent : EventEmitter ; @ Listen ( 'testevent' , { target : 'document' } ) handleTestEvent ( event ) { this . parseLastProp ( event . detail . last ? event . detail . last : '' ) ; } /**
     * Method initialize
     */ @ Method ( ) init ( ) { return Promise . resolve ( this . _init ( ) ) ; } async componentWillLoad ( ) { await this . init ( ) ; } private async _init ( ) { this . parseFirstProp ( this . first ? this . first : '' ) ; this . parseMiddleProp ( this . middle ? this . middle : '' ) ; this . parseLastProp ( this . last ? this . last : '' ) ; this . initevent . emit ( { init : true } ) ; return ; } private getText ( ) { return format ( this . innerFirst , this . innerMiddle , this . innerLast ) ; } render ( ) { return < div > Hello , World ! I 'm {this.getText()}</div>; } }