import { interval } from 'rxjs';
import { takeWhile } from 'rxjs/operators';
export class AppSketch {
    // @State() seconds: string;
    constructor() {
        this.data = {};
        interval(100).pipe(takeWhile(i => i <= 100)).subscribe((i) => {
            this.data = Object.assign({}, this.data, { label: 'progress: ' + i });
            if (document.getElementById('sk-progress-bar')) {
                document.getElementById('sk-progress-bar').setAttribute('width', String(0));
                document.getElementById('sk-progress-bar').setAttribute('width', String(i * 3));
            }
            if (i == 99) {
                // this.el.querySelector('sk-graph').hide(3000)
            }
        });
    }
    render() {
        return (h("div", { class: 'text-center' },
            h("sk-sketch", null),
            h("sk-about", { "data-json": '{"version":"0.0.1"}' }),
            h("sk-icon-logo", { "data-json": '{"version":"0.0.1"}' }),
            h("sk-graph", { "data-json": JSON.stringify(this.data), redraw: false, class: 'pb-3' }),
            h("sk-graph", { "data-json": JSON.stringify(this.data), redraw: true }),
            h("ema-svg", { src: '../assets/sketch/about/index.template.html', "data-json": '{"version":"0.0.2"}', class: 'img-responsive' }),
            h("sk-splash", { "data-json": '{"title":"dynamic title"}', class: 'img-fluid' })));
    }
    static get is() { return "ema-app-sketch"; }
    static get properties() { return {
        "data": {
            "state": true
        },
        "dataJson": {
            "type": String,
            "attr": "data-json"
        },
        "el": {
            "elementRef": true
        }
    }; }
    static get style() { return "/**style-placeholder:ema-app-sketch:**/"; }
}
//# sourceMappingURL=app-sketch.js.map