import { AppService } from "../../../global/app-service";
import { DomUtil } from "../../../lib";
export class Home {
    constructor() {
        this.app = AppService.instance;
    }
    iframeLoaded(e) {
        console.log(e.detail);
    }
    componentWillLoad() {
        this.data = {
            title: 'js-base'
        };
        this.app.fetchJson('assets/documentation.json').then((res) => {
            this.docData = res;
            // DomUtil.fadeIn(this.el.querySelector('.jumbotron'),400,2)
            console.log(res);
        });
    }
    componentDidLoad() {
        this.postRender();
    }
    componentDidUpdate() {
        this.postRender();
    }
    svgElementClickHandler(event) {
        let id = event.detail.id;
        let el = event.detail.el;
        if (id === 'btn-logo') {
        }
    }
    postRender() {
        if (this.docData) {
            DomUtil.fadeIn(this.el.querySelector('.jumbotron'), 350, 2000);
        }
    }
    render() {
        return (h("div", { class: 'text-center' },
            h("ema-svg", { src: '../assets/images/splash.svg', "data-json": JSON.stringify(this.data), class: 'img-responsive' }),
            this.docData &&
                h("div", { class: 'jumbotron pt-3 pb-3 hidden' },
                    h("h5", null, 'webcomponents'),
                    h("ul", { class: 'list-inline' }, this.app.components.map((item) => {
                        return h("li", { class: "list-inline-item" },
                            h("stencil-route-link", { url: '/components/' + item.tag }, '<' + item.tag + '>'));
                    })),
                    h("h5", null, 'modules'),
                    h("ul", { class: 'list-inline' }, this.docData.children.map((item) => {
                        if (item.flags.isExported) {
                            { /*return <li class="list-inline-item"><stencil-route-link url={'/documentation/classes/'+item.name.toLowerCase()}>{item.name}</stencil-route-link></li>*/ }
                            return h("li", { class: "list-inline-item" },
                                h("stencil-route-link", { url: '/documentation' }, item.name));
                        }
                    })))));
    }
    static get is() { return "ema-app-home"; }
    static get properties() { return {
        "data": {
            "state": true
        },
        "docData": {
            "state": true
        },
        "el": {
            "elementRef": true
        }
    }; }
    static get listeners() { return [{
            "name": "iframeLoaded",
            "method": "iframeLoaded"
        }, {
            "name": "svgElementClick",
            "method": "svgElementClickHandler"
        }]; }
    static get style() { return "/**style-placeholder:ema-app-home:**/"; }
}
//# sourceMappingURL=app-home.js.map