export 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">
    <!-- 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 "/**style-placeholder:sk-icon-logo-ema:**/"; }
}
