export class IconLogo {
    constructor() {
        this.data = {};
        this.visible = true;
        this.redraw = true;
    }
    componentDidLoad() {
        this.postRender();
        document.dispatchEvent(new CustomEvent('sketch-artboard-init', { detail: { "name": "icon-logo", "tage": "sk-icon-logo", "selector": "sk-icon-logo", "className": "IconLogo", "pageName": "sketch", "options": { "imageFormat": {}, "embedSvg": true, "imageScales": [1] }, "paths": { "splash": "splash", "dev-stack": "dev-stack", "icon-logo": "icon-logo" }, "classes": { "Splash": "Splash", "DevStack": "DevStack", "IconLogo": "IconLogo" }, "data": {} } }));
    }
    componentDidUpdate() {
        this.postRender();
        document.dispatchEvent(new CustomEvent('sketch-artboard-update', { detail: { "name": "icon-logo", "tage": "sk-icon-logo", "selector": "sk-icon-logo", "className": "IconLogo", "pageName": "sketch", "options": { "imageFormat": {}, "embedSvg": true, "imageScales": [1] }, "paths": { "splash": "splash", "dev-stack": "dev-stack", "icon-logo": "icon-logo" }, "classes": { "Splash": "Splash", "DevStack": "DevStack", "IconLogo": "IconLogo" }, "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) {
        // remove whitespaces
        html = this.replaceAll(html, '{{ ', '{{');
        html = this.replaceAll(html, '{{  ', '{{');
        html = this.replaceAll(html, ' }}', '}}');
        html = this.replaceAll(html, '  }}', '}}');
        // set dynamic data
        if (this.data) {
            Object.keys(this.data).forEach((k) => {
                html = this.replaceAll(html, '{{' + k + '}}', this.data[k]);
            });
        }
        // html = between(html,'{{','}}');
        // \{\{(.*?)\}\}
        html = this.replaceAll(html, '{{}}', '');
        return html;
    }
    postRender() {
        var html;
        setTimeout((arg) => {
            if (this.redraw || !this.initialized) {
                html = this.html = this.parseHtml(this.html);
                this.el.innerHTML = html;
            }
            else {
                // html = this.html = this.parseHtml(this.el.innerHTML)
                // this.el.innerHTML = html;
                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);
    }
    // todo: fixme: resize responsive scaling
    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;
        // fixme ??
        if (viewBox) {
            w = viewBox.split(' ')[2];
            h = viewBox.split(' ')[3];
            // if (responsive === true) {
            if (responsive === false) {
                // 100%
                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;
                // att.value = w+'px';
                $svg.setAttributeNode(att);
                att = document.createAttribute('height');
                att.value = h;
                // att.value = h+'px';
                $svg.setAttributeNode(att);
            }
            // console.log('--------------');
            // console.log('responsive=' + responsive);
            // console.log('viewBox=' + viewBox);
            // console.log('svg attr: '+$svg.getAttribute('width')+' - '+$svg.getAttribute('height'));
        }
    }
    getAttributes(el) {
        let attrs = el.attributes, obj = {}, i = 0;
        for (; i < attrs.length; i++) {
            obj[attrs[i].name] = attrs[i].value;
        }
        return obj;
    }
    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);
    }
    between(s, prefix, suffix) {
        // Usage:  var betweenResult = between('hello you guys','hello ',' guys');
        let i = s.indexOf(prefix);
        if (i >= 0) {
            s = s.substring(i + prefix.length);
        }
        else {
            return '';
        }
        if (suffix) {
            i = s.indexOf(suffix);
            if (i >= 0) {
                s = s.substring(0, i);
            }
            else {
                return '';
            }
        }
        return s;
    }
    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 = `<style amp-custom>

/* Sketch Template boiler plate CSS */
.sk-template {
	max-width: 100%;
	overflow: hidden;
}
.sk-ab {
	background-color: none;
	margin: 0 auto;
	transform: scale(1);
	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;
}
/* Sketch Template css specific to icon-logo */
/* icon-logo-start */
.sk-ab.sk-ab-icon-logo {
	width: 70px;
	height: 87px;
}

/* icon-logo-end */
</style>

<div data-sk-paths='{"splash":"splash","dev-stack":"dev-stack","icon-logo":"icon-logo"}' class='sk-template sk-template-svg zoomed'>
	<div class='sk-ab sk-ab-icon-logo'>
<div class="sketch-container">
<svg width="70px" height="87px" viewBox="0 0 70 87" 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</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="icon-logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="logo-2" transform="translate(-13.000000, 0.000000)">
            <path d="M53.981,6.125 C53.981,2.73 51.226,0 47.88,0 C44.509,0 41.778,2.73 41.778,6.125 C41.779,9.484 44.509,12.214 47.88,12.214 C51.226,12.214 53.981,9.484 53.981,6.125 Z" id="Shape" fill="#4A4A4A" fill-rule="nonzero"></path>
            <path d="M38.033,14.184 C33.709,14.184 30.228,17.724 30.228,22.122 L30.228,36.74 C30.228,40.377 35.037,40.377 35.037,36.74 L35.037,22.629 L40.027,22.629 L40.027,40.413 C42.576,41.029 45.185,41.488 47.94,41.488 C50.67,41.488 53.255,41.029 55.793,40.437 L55.793,22.629 L60.747,22.629 L60.747,36.74 C60.747,40.401 65.556,40.401 65.556,36.74 L65.556,22.206 C65.555,18.183 62.39,14.184 57.629,14.184 L38.033,14.184 Z" id="Shape" fill="#4A4A4A" fill-rule="nonzero"></path>
            <g id="Group-2" stroke-width="1" fill-rule="evenodd" transform="translate(13.000000, 47.000000)" fill="#CC0000">
                <path d="M51.765,0.0859259259 C46.9729167,3.4237037 41.1410417,5.3837037 34.88625,5.3837037 C28.6671875,5.3837037 22.9045833,3.45111111 18.0957292,0.175555556 L14.3252083,5.86740741 C20.1920833,9.91259259 27.2752083,12.257037 34.88625,12.257037 C42.55125,12.257037 49.6686458,9.88592593 55.55375,5.81407407 L51.765,0.0859259259 Z" id="Shape" fill-rule="nonzero"></path>
                <path d="M58.9713542,11.8266667 C52.1179167,16.5703704 43.8367708,19.3266667 34.9219792,19.3266667 C26.0414583,19.3266667 17.7960417,16.5962963 10.9601042,11.9074074 L7.15385417,17.482963 C15.0653125,22.9414815 24.6327083,26.1274074 34.9219792,26.1274074 C45.22875,26.1274074 54.7961458,22.9237037 62.7426042,17.4651852 L58.9713542,11.8266667 Z" id="Shape" fill-rule="nonzero"></path>
                <path d="M66.1244792,23.4703704 C57.2089583,29.6185185 46.4792708,33.1985185 34.90375,33.1985185 C23.3457292,33.1985185 12.6153125,29.6185185 3.71802083,23.497037 L0,29.1533333 C9.94583333,35.9992593 21.97125,40 34.90375,40 C47.85375,40 59.9054167,35.9725926 69.895,29.0822222 L66.1244792,23.4703704 Z" id="Shape" fill-rule="nonzero"></path>
            </g>
        </g>
    </g>
</svg></div></div>
`;
        return (h("span", null));
    }
    static get is() { return "sk-icon-logo"; }
    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
        }]; }
}
//# sourceMappingURL=icon-logo.js.map