import { h } from '../webcomponents.core.js';

import './chunk-de721f0a.js';
import { x as interval } from './chunk-fec5a75d.js';
import { d as takeWhile } from './chunk-d51357a9.js';

class AppSketch {
    constructor() {
        this.data = {};
        interval(100).pipe(takeWhile(i => i <= 100)).subscribe((i) => {
            this.data = Object.assign({}, this.data, { label: 'progress: ' + i });
        });
    }
    render() {
        return (h("div", { class: 'text-center' },
            h("sk-sketch-index", null),
            h("sk-icon-logo-ema", { "data-json": '{"version":"0.0.1"}' }),
            h("sk-home-content", { "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 ""; }
}

class HomeContent {
    constructor() {
        this.data = {};
        this.visible = true;
        this.redraw = true;
    }
    componentDidLoad() {
        this.postRender();
        document.dispatchEvent(new CustomEvent('sketch-artboard-init', { detail: { "name": "home-content", "tage": "sk-home-content", "selector": "sk-home-content", "className": "HomeContent", "pageName": "sketch-index", "options": { "imageFormat": {}, "embedSvg": true, "imageScales": [1] }, "paths": { "home-content": "home-content" }, "classes": { "HomeContent": "HomeContent" }, "data": {} } }));
    }
    componentDidUpdate() {
        this.postRender();
        document.dispatchEvent(new CustomEvent('sketch-artboard-update', { detail: { "name": "home-content", "tage": "sk-home-content", "selector": "sk-home-content", "className": "HomeContent", "pageName": "sketch-index", "options": { "imageFormat": {}, "embedSvg": true, "imageScales": [1] }, "paths": { "home-content": "home-content" }, "classes": { "HomeContent": "HomeContent" }, "data": {} } }));
    }
    hide(duration = 300, delay = 0, visible = false) {
        this.fadeOut(this.el, duration, delay, visible);
    }
    show(duration = 300, delay = 0, display = 'block') {
        this.fadeIn(this.el, duration, delay, display);
    }
    setData(data) {
        this.data = data;
    }
    getElements() {
        this.elements = [];
        let ignoredArr = ['Shape', 'Oval', 'Rectangle', 'Line', 'Group'];
        let elements = this.el.querySelectorAll('*');
        Array.prototype.forEach.call(elements, (el) => {
            if (this.getAttributes(el)['id']) {
                let id = this.getAttributes(el)['id'];
                let ignored = false;
                ignoredArr.forEach((ignore) => {
                    if (id.match(ignore)) {
                        ignored = true;
                    }
                });
                if (!ignored) {
                    if (id.match('btn-')) {
                        el.style.cursor = 'pointer';
                        el.style.opacity = '0';
                    }
                    this.elements.push({
                        id: id,
                        el: el
                    });
                }
            }
        });
        this.setClickHandlers();
        return this.elements;
    }
    svgElementClickHandler(e) {
        let detail;
        e.stopPropagation();
        this.elements.forEach((element) => {
            if (element.el === e.target) {
                detail = element;
            }
        });
        if (detail) {
            this.svgElementClick.emit(detail);
        }
    }
    setClickHandlers() {
        this.elements.forEach((element) => {
            if (element.id) {
                if (this.el.querySelector("[id='" + element.id + "']")) {
                    this.el.querySelector("[id='" + element.id + "']").addEventListener('click', (e) => {
                        this.svgElementClickHandler(e);
                    });
                }
            }
        });
    }
    parseHtml(html) {
        html = this.replaceAll(html, '{{ ', '{{');
        html = this.replaceAll(html, '{{  ', '{{');
        html = this.replaceAll(html, ' }}', '}}');
        html = this.replaceAll(html, '  }}', '}}');
        if (this.data) {
            Object.keys(this.data).forEach((k) => {
                html = this.replaceAll(html, '{{' + k + '}}', this.data[k]);
            });
        }
        let unusedVars = html.match(/\{\{(.*?)\}\}/g);
        if (unusedVars) {
            unusedVars.forEach((match) => {
                html = this.replaceAll(html, match, '');
            });
        }
        return html;
    }
    postRender() {
        var html;
        setTimeout((arg) => {
            if (this.redraw || !this.initialized) {
                html = this.html = this.parseHtml(this.html);
                this.el.innerHTML = html;
            }
            else {
                this.el.innerHTML = this.parseHtml(this.el.innerHTML);
            }
            setTimeout((arg) => {
                if (this.el.querySelector('svg')) {
                    this._svgElement = this.el.querySelector('svg');
                    this.renderSvg();
                    this.initialized = true;
                }
            }, 40);
            this.getElements();
        }, 20);
    }
    renderSvg() {
        const $svg = this._svgElement;
        const responsive = !(this.el.className.indexOf('img-fluid') === -1);
        let viewBox;
        if ($svg.getAttribute('viewBox')) {
            viewBox = $svg.getAttribute('viewBox');
        }
        let w, h;
        if (viewBox) {
            w = viewBox.split(' ')[2];
            h = viewBox.split(' ')[3];
            if (responsive === false) {
                this.el.style.width = w + 'px';
                this.el.style.maxWidth = w + 'px';
                this.el.style.height = h + 'px';
                this.el.style.maxHeight = h + 'px';
                $svg.style.width = w + 'px';
                $svg.style.maxWidth = w + 'px';
                $svg.style.height = h + 'px';
                $svg.style.maxHeight = h + 'px';
                let att;
                att = document.createAttribute('width');
                att.value = w;
                $svg.setAttributeNode(att);
                att = document.createAttribute('height');
                att.value = h;
                $svg.setAttributeNode(att);
            }
        }
    }
    fadeIn(el, duration = 300, delay = 0, display = 'block') {
        let step = (1 / duration) * 10;
        el.style.opacity = '0';
        el.style.display = display;
        setTimeout(() => {
            (function fade() {
                let val = parseFloat(el.style.opacity);
                if (!((val += step) > 1)) {
                    el.style.opacity = val.toString();
                    requestAnimationFrame(fade);
                }
            })();
        }, delay);
    }
    fadeOut(el, duration = 300, delay = 0, visible = false) {
        let step = (1 / duration) * 10;
        el.style.opacity = '1';
        setTimeout(() => {
            (function fade() {
                let opacity = Number(el.style.opacity);
                opacity = opacity - step;
                el.style.opacity = opacity.toString();
                if (opacity < 0) {
                    if (visible === false) {
                        el.style.display = 'none';
                        el.style.opacity = '1';
                    }
                }
                else {
                    requestAnimationFrame(fade);
                }
            })();
        }, delay);
    }
    getAttributes(el) {
        let attrs = el.attributes, obj = {}, i = 0;
        for (; i < attrs.length; i++) {
            obj[attrs[i].name] = attrs[i].value;
        }
        return obj;
    }
    replaceAll(src, str1, str2, ignore = false) {
        return String(src).replace(new RegExp(str1.replace(/([\/\,\!\\\^\$\{\}\[\]\(\)\.\*\+\?\|\<\>\-\&])/g, '\\$&'), (ignore ? 'gi' : 'g')), (typeof (str2) === 'string') ? str2.replace(/\$/g, '$$$$') : str2);
    }
    render() {
        var data;
        if (this.dataJson) {
            data = this.data = JSON.parse(this.dataJson);
        }
        this.html = `<div data-sk-paths='{"home-content":"home-content"}' class='sk-template sk-template-svg zoomed'>
	<div class='sk-ab sk-ab-home-content'>
<div class="sketch-container">
<svg width="375px" height="375px" viewBox="0 0 375 375" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="sk-tspan-0" class="sk-tspan-0" class="sk-tspan-0" class="sk-tspan-0" class="sk-tspan-0" class="sk-tspan-0">
    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
    <title>home-content</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="home-content" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Group" transform="translate(85.000000, 22.000000)">
            <text id="@ema/components" font-family="DINAlternate-Bold, DIN Alternate" font-size="24" font-weight="bold" fill="#4A4A4A">
                <tspan x="6.41796875" y="114.964912" class="sk-tspan-15">@ema/components</tspan>
            </text>
            <text id="webcomponents-librar" font-family="DINAlternate-Bold, DIN Alternate" font-size="16" font-weight="bold" fill="#4A4A4A">
                <tspan x="103" y="213"></tspan>
                <tspan x="47.8945312" y="232" class="sk-tspan-13">webcomponents</tspan>
                <tspan x="81.234375" y="251" class="sk-tspan-7">library</tspan>
                <tspan x="103" y="270"></tspan>
                <tspan x="103" y="289"></tspan>
                <tspan x="103" y="308"></tspan>
                <tspan x="103" y="327"></tspan>
            </text>
            <g id="logo" transform="translate(52.000000, 4.000000)" fill-rule="nonzero">
                <path d="M66.9549639,15.3291111 C66.9549639,6.86277778 59.9894337,0 51.3945181,0 C42.7983614,0 35.8315904,6.86277778 35.8315904,15.3291111 C35.8328313,23.793 42.7983614,30.6557778 51.3945181,30.6557778 C59.9894337,30.6557778 66.9549639,23.793 66.9549639,15.3291111 Z" id="Shape" fill-opacity="0.484035326" fill="#000000" opacity="0.890228714"></path>
                <ellipse id="Oval" fill="#007BFF" cx="6.74960241" cy="15.3291111" rx="6.74960241" ry="6.64766667"></ellipse>
                <ellipse id="Oval" fill="#007BFF" cx="96.0369518" cy="15.3291111" rx="6.74836145" ry="6.64644444"></ellipse>
                <ellipse id="Oval" fill="#007BFF" cx="51.362253" cy="59.3291111" rx="6.74836145" ry="6.64644444"></ellipse>
            </g>
            <g id="icon-html" transform="translate(85.000000, 152.000000)" fill="#007BFF">
                <path d="M11.6531078,22.4461175 C11.9040672,22.193962 11.9040672,21.8060306 11.6531078,21.5538751 L4.0664114,13.9310212 L11.6531078,6.30816725 C11.9040672,6.05601178 11.9040672,5.66808028 11.6531078,5.41592481 L10.6878793,4.44609606 C10.4369198,4.19394059 10.0508284,4.19394059 9.79986899,4.44609606 L0.803938905,13.4848999 C0.552979482,13.7370554 0.552979482,14.1249869 0.803938905,14.3771424 L9.79986899,23.4159463 C10.0508284,23.6681017 10.4369198,23.6681017 10.6878793,23.4159463 L11.6531078,22.4461175 Z M23.0621093,1.74997216 C23.1586321,1.42023039 22.9655864,1.07109204 22.6374087,0.974109167 L21.4405253,0.644367394 C21.1316522,0.54738452 20.7841699,0.741350268 20.687647,1.07109204 L13.4870421,26.1120702 C13.3905192,26.4418119 13.5835649,26.7909503 13.9117426,26.8879332 L15.108626,27.2176749 C15.4174992,27.3146578 15.7649814,27.1206921 15.8615043,26.7909503 L23.0621093,1.74997216 Z M35.7452124,14.3771424 C35.9961718,14.1249869 35.9961718,13.7370554 35.7452124,13.4848999 L26.7492823,4.44609606 C26.4983229,4.19394059 26.1122315,4.19394059 25.8612721,4.44609606 L24.8960435,5.41592481 C24.6450841,5.66808028 24.6450841,6.05601178 24.8960435,6.30816725 L32.4827399,13.9310212 L24.8960435,21.5538751 C24.6450841,21.8060306 24.6450841,22.193962 24.8960435,22.4461175 L25.8612721,23.4159463 C26.1122315,23.6681017 26.4983229,23.6681017 26.7492823,23.4159463 L35.7452124,14.3771424 Z" id="ÔÑ°"></path>
            </g>
            <polygon id="btn-logo" fill-opacity="0.05" fill="#000000" points="22 0 187 0 187 74 94.2980942 74 80.6713142 74 22 74"></polygon>
            <g id="icon-devstack" transform="translate(85.000000, 291.000000)" fill="#007BFF">
                <path d="M0.751953125,10.2839177 C0.569660547,10.1949945 0.427246606,10.0616117 0.324707031,9.88376524 C0.222167456,9.70591883 0.170898438,9.51695984 0.170898438,9.31688262 C0.170898438,9.1168054 0.227864014,8.93340403 0.341796875,8.76667302 C0.455729736,8.599942 0.603840234,8.47211681 0.786132813,8.3831936 L17.1923828,0.34679878 C17.3518888,0.257875572 17.517089,0.213414634 17.6879883,0.213414634 C17.8588876,0.213414634 18.0240877,0.257875572 18.1835938,0.34679878 L34.4189453,8.3831936 C34.6012379,8.47211681 34.7436518,8.599942 34.8461914,8.76667302 C34.948731,8.93340403 35,9.1168054 35,9.31688262 C35,9.51695984 34.948731,9.70591883 34.8461914,9.88376524 C34.7436518,10.0616117 34.612631,10.1949945 34.453125,10.2839177 L18.0126953,18.9205412 C17.9443356,18.9650028 17.8645838,18.9927908 17.7734375,19.0039062 C17.6822912,19.0150217 17.5911463,19.0205793 17.5,19.0205793 C17.4088537,19.0205793 17.3234053,19.009464 17.2436523,18.9872332 C17.1638993,18.9650024 17.078451,18.942772 16.9873047,18.9205412 L0.751953125,10.2839177 Z M17.6708984,2.48094512 L3.62304688,9.3835747 L17.5,16.7530488 L31.5478516,9.3835747 L17.6708984,2.48094512 Z M34.2138672,16.2195122 C34.3961598,16.3084354 34.5442703,16.4418182 34.6582031,16.6196646 C34.772136,16.7975111 34.8291016,16.9753548 34.8291016,17.1532012 C34.8291016,17.3532784 34.7778325,17.5422374 34.675293,17.7200838 C34.5727534,17.8979303 34.4303395,18.0313131 34.2480469,18.1202363 L17.8417969,26.7568598 C17.7506506,26.8013214 17.6652022,26.8346671 17.5854492,26.8568979 C17.5056962,26.8791287 17.4202479,26.8902439 17.3291016,26.8902439 C17.2379553,26.8902439 17.1468104,26.8791287 17.0556641,26.8568979 C16.9645178,26.8346671 16.8733729,26.8013214 16.7822266,26.7568598 L0.546875,18.1202363 C0.387368994,18.0313131 0.256348169,17.8979303 0.153808594,17.7200838 C0.0512690186,17.5422374 0,17.3532784 0,17.1532012 C0,16.953124 0.0512690186,16.7697226 0.153808594,16.6029916 C0.256348169,16.4362606 0.398762109,16.3084354 0.581054688,16.2195122 L4.03320312,14.5522104 L6.35742188,15.7860137 L3.45214844,17.2198933 L17.3291016,24.5893674 L31.3769531,17.2198933 L28.6425781,15.8527058 L30.9667969,14.6189024 L34.2138672,16.2195122 Z M34.2138672,23.6890244 C34.3961598,23.7779476 34.5442703,23.9113304 34.6582031,24.0891768 C34.772136,24.2670232 34.8291016,24.444867 34.8291016,24.6227134 C34.8291016,24.8227906 34.7778325,25.0117496 34.675293,25.189596 C34.5727534,25.3674425 34.4303395,25.5008253 34.2480469,25.5897485 L17.8417969,34.226372 C17.7506506,34.2708336 17.6652022,34.3041793 17.5854492,34.3264101 C17.5056962,34.3486409 17.4202479,34.3597561 17.3291016,34.3597561 C17.2379553,34.3597561 17.1468104,34.3486409 17.0556641,34.3264101 C16.9645178,34.3041793 16.8733729,34.2708336 16.7822266,34.226372 L0.546875,25.5897485 C0.387368994,25.5008253 0.256348169,25.3674425 0.153808594,25.189596 C0.0512690186,25.0117496 0,24.8227906 0,24.6227134 C0,24.4226362 0.0512690186,24.2392348 0.153808594,24.0725038 C0.256348169,23.9057728 0.398762109,23.7779476 0.581054688,23.6890244 L3.828125,22.2551448 L6.15234375,23.4889482 L3.45214844,24.6894055 L17.3291016,32.0588796 L31.3769531,24.6894055 L28.8134766,23.4556021 L31.1376953,22.2217988 L34.2138672,23.6890244 Z" id="undefined---simple-line-icons"></path>
            </g>
        </g>
    </g>
</svg></div></div>
`;
        return (h("span", null));
    }
    static get is() { return "sk-home-content"; }
    static get properties() { return {
        "data": {
            "state": true
        },
        "dataJson": {
            "type": String,
            "attr": "data-json"
        },
        "el": {
            "elementRef": true
        },
        "getElements": {
            "method": true
        },
        "hide": {
            "method": true
        },
        "redraw": {
            "type": Boolean,
            "attr": "redraw"
        },
        "setData": {
            "method": true
        },
        "show": {
            "method": true
        },
        "visible": {
            "type": Boolean,
            "attr": "visible"
        }
    }; }
    static get events() { return [{
            "name": "svgElementClick",
            "method": "svgElementClick",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
    static get style() { return ".sk-template{max-width:100%;overflow:hidden}.sk-ab{background-color:none;margin:0 auto;-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 0;transform-origin:0 0;position:relative;overflow:hidden}.sk-asset{position:absolute;background-repeat:no-repeat}.sk-router-menu,.sk-template header{text-align:center}.sk-router-menu,ul{padding-left:0;list-style:none}.sk-ab.sk-ab-home-content{width:375px;height:375px}"; }
}

class IconLogoEma {
    constructor() {
        this.data = {};
        this.visible = true;
        this.redraw = true;
    }
    componentDidLoad() {
        this.postRender();
        document.dispatchEvent(new CustomEvent('sketch-artboard-init', { detail: { "name": "icon-logo-ema", "tage": "sk-icon-logo-ema", "selector": "sk-icon-logo-ema", "className": "IconLogoEma", "pageName": "sketch-index", "options": { "imageFormat": {}, "embedSvg": true, "imageScales": [1] }, "paths": { "home-content": "home-content", "dev-stack": "dev-stack", "icon-logo-ema": "icon-logo-ema" }, "classes": { "HomeContent": "HomeContent", "DevStack": "DevStack", "IconLogoEma": "IconLogoEma" }, "data": {} } }));
    }
    componentDidUpdate() {
        this.postRender();
        document.dispatchEvent(new CustomEvent('sketch-artboard-update', { detail: { "name": "icon-logo-ema", "tage": "sk-icon-logo-ema", "selector": "sk-icon-logo-ema", "className": "IconLogoEma", "pageName": "sketch-index", "options": { "imageFormat": {}, "embedSvg": true, "imageScales": [1] }, "paths": { "home-content": "home-content", "dev-stack": "dev-stack", "icon-logo-ema": "icon-logo-ema" }, "classes": { "HomeContent": "HomeContent", "DevStack": "DevStack", "IconLogoEma": "IconLogoEma" }, "data": {} } }));
    }
    hide(duration = 300, delay = 0, visible = false) {
        this.fadeOut(this.el, duration, delay, visible);
    }
    show(duration = 300, delay = 0, display = 'block') {
        this.fadeIn(this.el, duration, delay, display);
    }
    setData(data) {
        this.data = data;
    }
    getElements() {
        this.elements = [];
        let ignoredArr = ['Shape', 'Oval', 'Rectangle', 'Line', 'Group'];
        let elements = this.el.querySelectorAll('*');
        Array.prototype.forEach.call(elements, (el) => {
            if (this.getAttributes(el)['id']) {
                let id = this.getAttributes(el)['id'];
                let ignored = false;
                ignoredArr.forEach((ignore) => {
                    if (id.match(ignore)) {
                        ignored = true;
                    }
                });
                if (!ignored) {
                    if (id.match('btn-')) {
                        el.style.cursor = 'pointer';
                        el.style.opacity = '0';
                    }
                    this.elements.push({
                        id: id,
                        el: el
                    });
                }
            }
        });
        this.setClickHandlers();
        return this.elements;
    }
    svgElementClickHandler(e) {
        let detail;
        e.stopPropagation();
        this.elements.forEach((element) => {
            if (element.el === e.target) {
                detail = element;
            }
        });
        if (detail) {
            this.svgElementClick.emit(detail);
        }
    }
    setClickHandlers() {
        this.elements.forEach((element) => {
            if (element.id) {
                if (this.el.querySelector("[id='" + element.id + "']")) {
                    this.el.querySelector("[id='" + element.id + "']").addEventListener('click', (e) => {
                        this.svgElementClickHandler(e);
                    });
                }
            }
        });
    }
    parseHtml(html) {
        html = this.replaceAll(html, '{{ ', '{{');
        html = this.replaceAll(html, '{{  ', '{{');
        html = this.replaceAll(html, ' }}', '}}');
        html = this.replaceAll(html, '  }}', '}}');
        if (this.data) {
            Object.keys(this.data).forEach((k) => {
                html = this.replaceAll(html, '{{' + k + '}}', this.data[k]);
            });
        }
        let unusedVars = html.match(/\{\{(.*?)\}\}/g);
        if (unusedVars) {
            unusedVars.forEach((match) => {
                html = this.replaceAll(html, match, '');
            });
        }
        return html;
    }
    postRender() {
        var html;
        setTimeout((arg) => {
            if (this.redraw || !this.initialized) {
                html = this.html = this.parseHtml(this.html);
                this.el.innerHTML = html;
            }
            else {
                this.el.innerHTML = this.parseHtml(this.el.innerHTML);
            }
            setTimeout((arg) => {
                if (this.el.querySelector('svg')) {
                    this._svgElement = this.el.querySelector('svg');
                    this.renderSvg();
                    this.initialized = true;
                }
            }, 40);
            this.getElements();
        }, 20);
    }
    renderSvg() {
        const $svg = this._svgElement;
        const responsive = !(this.el.className.indexOf('img-fluid') === -1);
        let viewBox;
        if ($svg.getAttribute('viewBox')) {
            viewBox = $svg.getAttribute('viewBox');
        }
        let w, h;
        if (viewBox) {
            w = viewBox.split(' ')[2];
            h = viewBox.split(' ')[3];
            if (responsive === false) {
                this.el.style.width = w + 'px';
                this.el.style.maxWidth = w + 'px';
                this.el.style.height = h + 'px';
                this.el.style.maxHeight = h + 'px';
                $svg.style.width = w + 'px';
                $svg.style.maxWidth = w + 'px';
                $svg.style.height = h + 'px';
                $svg.style.maxHeight = h + 'px';
                let att;
                att = document.createAttribute('width');
                att.value = w;
                $svg.setAttributeNode(att);
                att = document.createAttribute('height');
                att.value = h;
                $svg.setAttributeNode(att);
            }
        }
    }
    fadeIn(el, duration = 300, delay = 0, display = 'block') {
        let step = (1 / duration) * 10;
        el.style.opacity = '0';
        el.style.display = display;
        setTimeout(() => {
            (function fade() {
                let val = parseFloat(el.style.opacity);
                if (!((val += step) > 1)) {
                    el.style.opacity = val.toString();
                    requestAnimationFrame(fade);
                }
            })();
        }, delay);
    }
    fadeOut(el, duration = 300, delay = 0, visible = false) {
        let step = (1 / duration) * 10;
        el.style.opacity = '1';
        setTimeout(() => {
            (function fade() {
                let opacity = Number(el.style.opacity);
                opacity = opacity - step;
                el.style.opacity = opacity.toString();
                if (opacity < 0) {
                    if (visible === false) {
                        el.style.display = 'none';
                        el.style.opacity = '1';
                    }
                }
                else {
                    requestAnimationFrame(fade);
                }
            })();
        }, delay);
    }
    getAttributes(el) {
        let attrs = el.attributes, obj = {}, i = 0;
        for (; i < attrs.length; i++) {
            obj[attrs[i].name] = attrs[i].value;
        }
        return obj;
    }
    replaceAll(src, str1, str2, ignore = false) {
        return String(src).replace(new RegExp(str1.replace(/([\/\,\!\\\^\$\{\}\[\]\(\)\.\*\+\?\|\<\>\-\&])/g, '\\$&'), (ignore ? 'gi' : 'g')), (typeof (str2) === 'string') ? str2.replace(/\$/g, '$$$$') : str2);
    }
    render() {
        var data;
        if (this.dataJson) {
            data = this.data = JSON.parse(this.dataJson);
        }
        this.html = `<div data-sk-paths='{"home-content":"home-content","dev-stack":"dev-stack","icon-logo-ema":"icon-logo-ema"}' class='sk-template sk-template-svg zoomed'>
	<div class='sk-ab sk-ab-icon-logo-ema'>
<div class="sketch-container">
<svg width="103px" height="66px" viewBox="0 0 103 66" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="sk-tspan-0">
    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
    <title>icon-logo-ema</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="icon-logo-ema" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="logo-2" fill-rule="nonzero">
            <g id="logo">
                <path d="M66.9549639,15.3291111 C66.9549639,6.86277778 59.9894337,0 51.3945181,0 C42.7983614,0 35.8315904,6.86277778 35.8315904,15.3291111 C35.8328313,23.793 42.7983614,30.6557778 51.3945181,30.6557778 C59.9894337,30.6557778 66.9549639,23.793 66.9549639,15.3291111 Z" id="Shape" fill-opacity="0.484035326" fill="#000000" opacity="0.890228714"></path>
                <ellipse id="Oval" fill="#007BFF" cx="6.74960241" cy="15.3291111" rx="6.74960241" ry="6.64766667"></ellipse>
                <ellipse id="Oval" fill="#007BFF" cx="96.0369518" cy="15.3291111" rx="6.74836145" ry="6.64644444"></ellipse>
                <ellipse id="Oval" fill="#007BFF" cx="51.362253" cy="59.3291111" rx="6.74836145" ry="6.64644444"></ellipse>
            </g>
        </g>
    </g>
</svg></div></div>
`;
        return (h("span", null));
    }
    static get is() { return "sk-icon-logo-ema"; }
    static get properties() { return {
        "data": {
            "state": true
        },
        "dataJson": {
            "type": String,
            "attr": "data-json"
        },
        "el": {
            "elementRef": true
        },
        "getElements": {
            "method": true
        },
        "hide": {
            "method": true
        },
        "redraw": {
            "type": Boolean,
            "attr": "redraw"
        },
        "setData": {
            "method": true
        },
        "show": {
            "method": true
        },
        "visible": {
            "type": Boolean,
            "attr": "visible"
        }
    }; }
    static get events() { return [{
            "name": "svgElementClick",
            "method": "svgElementClick",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
    static get style() { return ".sk-template{max-width:100%;overflow:hidden}.sk-ab{background-color:none;margin:0 auto;-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 0;transform-origin:0 0;position:relative;overflow:hidden}.sk-asset{position:absolute;background-repeat:no-repeat}.sk-router-menu,.sk-template header{text-align:center}.sk-router-menu,ul{padding-left:0;list-style:none}.sk-ab.sk-ab-icon-logo-ema{width:103px;height:66px}"; }
}

class SketchIndexComponent {
    constructor() {
        this.sketchData = { "className": "SketchIndex", "pageName": "sketch-index", "data": {} };
        this.dataJson = {};
    }
    render() {
        return (h("div", null,
            h("nav", { class: "sk-router-menu" },
                h("ul", null,
                    h("li", { class: "nav-item" },
                        h("sk-route-link", { class: "nav-item", url: "/sketch-index/home-content" }, "home-content")),
                    h("li", { class: "nav-item" },
                        h("sk-route-link", { class: "nav-item", url: "/sketch-index/dev-stack" }, "dev-stack")),
                    h("li", { class: "nav-item" },
                        h("sk-route-link", { class: "nav-item", url: "/sketch-index/icon-logo-ema" }, "icon-logo-ema")))),
            h("div", { class: "sketch-index-router-outlet" }),
            h("sk-router", { "target-selector": ".sketch-index-router-outlet" },
                h("sk-route", { url: "/sketch-index/icon-logo-ema", component: "sk-icon-logo-ema" }),
                h("sk-route", { url: "/sketch-index/dev-stack", component: "sk-dev-stack" }),
                h("sk-route", { url: "/sketch-index/home-content", component: "sk-home-content" }))));
    }
    static get is() { return "sk-sketch-index"; }
    static get properties() { return {
        "dataJson": {
            "type": "Any",
            "attr": "data-json"
        }
    }; }
    static get style() { return ".sk-template{max-width:100%;overflow:hidden}.sk-ab{background-color:none;margin:0 auto;-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 0;transform-origin:0 0;position:relative;overflow:hidden}.sk-asset{position:absolute;background-repeat:no-repeat}.sk-router-menu,.sk-template header{text-align:center}.sk-router-menu,ul{padding-left:0;list-style:none}"; }
}

export { AppSketch as EmaAppSketch, HomeContent as SkHomeContent, IconLogoEma as SkIconLogoEma, SketchIndexComponent as SkSketchIndex };
