'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const __chunk_1 = require('./chunk-2755df65.js');
require('./chunk-f5b13333.js');
const __chunk_3 = require('./chunk-451ee4a2.js');

const demosMarkup = {
    'ema-card': `<ema-card>
    <ema-card-header background="var(--ema-background-light)">
        <span class="ema-card-header-title">Card title</span>
        <span class="ema-card-header-subtitle">Card subtitle</span>
    </ema-card-header>
    <ema-card-content>
        Card content:<br>Lorem ipsum
    </ema-card-content>
    <ema-card-footer>
        <button class="btn btn-primary">Card bottom Action!</button>
    </ema-card-footer>
</ema-card>`,
    'ema-collapsible': `<ema-collapsible label="Collapse" collapsed="false">
    <img src="https://dummyimage.com/214x117.png/cc0000/ffffff">
</ema-collapsible>`,
    'ema-dialog': ` 
<button onClick="document.querySelector('ema-dialog').alert('Your message')">Alert
</button>
<button onClick="document.querySelector('ema-dialog').confirm('Are you sure?')">Confirm
</button>
<button onClick="document.querySelector('ema-dialog').notice('Please, take notice')">Notice
</button>`,
    'ema-debugger': `
<button onClick="document.querySelector('ema-debugger').open()">Show debugger</button>
<p>Or press Control + d to toggle the debugger</p>`,
    'ema-flash-message': ` 
<button onClick="document.querySelector('ema-flash-message').show('Just some message', 'secondary', 3000)">Show message
</button>`,
    'ema-flip': `
<ema-flip flip-events="click" flip-back-events="click" flip-duration="350" flip-timing-function="ease-in-out">
    <div slot="front">
        <img src="https://dummyimage.com/214x117.png/cccccc/ffffff&text=flip+me">
    </div>
    <div slot="back">
        <img src="https://dummyimage.com/214x117.png/cc0000/ffffff&text=flip+me+back">
    </div>
</ema-flip>`,
    'ema-form': `
<ema-form language="nl" 
    data-json='{"title":"","Inhoud":"test inhoud"}'
    definitions-json='{"title":{"constraints":{"presence": true}}}'>
</ema-form>`,
    'ema-iframe': `
<ema-iframe src="https://variations.firebaseapp.com/" width="100%" height="420px"></ema-iframe>`,
    'ema-json-viewer': `
<ema-json-viewer 
    json-url="/assets/collection-manifest.json"
    collapse-at="1">
</ema-json-viewer>`,
    'ema-lazy-img': `
<ema-lazy-img src="https://dummyimage.com/214x214.png/cc0000/ffffff" alt="just an image"></ema-lazy-img>`,
    'ema-layout': `
<ema-layout class={'layout-header-sidebar20-content80-footer'} grid-gap={'5px'}>
    <header>My header</header>
    <aside>Sidebar</aside>
    <article>
        <h6>2 column, header and footer</h6>
        <p>Example content.</p>
    </article>
    <footer>My footer</footer>
</ema-layout>`,
    'ema-loading-spinner': `
<ema-loading-spinner type="ios" color="#495057"></ema-loading-spinner>`,
    'ema-login-form': `
<ema-login-form
    username-label="Gebruikersnaam"
    password-label="Wachtwoord"
    submit-label="Login">
</ema-login-form>
<script>
    var loginForm = document.querySelector('ema-login-form');
    loginForm.addEventListener('formSubmit', function(event) {
        var username = event.detail.username;
        var password = event.detail.password;
        myApiUrl.login(username, password);
    } );
</script>`,
    'ema-modal': `
<ema-modal id="demo-modal" 
    modal-title="Just some modal title"
    modal-content="<h4>Modal content</h4><div>Just some content</div>"
    width="50%" 
    height="50%" 
    center-content="true"
    allow-close="true">
</ema-modal>
<button onClick="document.getElementById('demo-modal').show('<h4>Modal content</h4><div>Just some content</div>')">Show modal
</button>`,
    'ema-permission': `
<div>
    <ema-permission can='["create"]' subject="User" conditions='{}'>
        <button class="create-btn">Create</button>
    </ema-permission>
    <ema-permission can='["read"]' subject="User" conditions='{}'>
        <button class="read-btn">Read</button>
    </ema-permission>
    <ema-permission can='["update"]' subject="User" conditions='{}'>
        <button class="edit-btn">Edit</button>
    </ema-permission>
    <ema-permission can='["delete"]' subject="User" conditions='{}'>
        <button class="delete-btn">Delete</button>
    </ema-permission>
</div>`,
    // 'ema-repeater':`
    // <ema-repeater
    //     element="ul"
    //     template="<li>${type}: ${title}</li>"
    //     data-json='[{"type":"TV serie","title": "Bonanza"},{"type":"TV serie","title": "Game of Thrones"}]'>
    // </ema-repeater>`,
    'ema-slider': `
<ema-slider min="0" max="100" value="50"></ema-slider>`,
    'ema-svg': `
<ema-svg src="../assets/images/splash.svg" data-json='{"title":"my-title"}'></ema-svg>`,
    'ema-tabs': `
<ema-tabs selected-index="3">
    <ema-tab-header slot="header" name="tab-1">Tab 1</ema-tab-header>
    <ema-tab-content slot="content" name="tab-1">
        Tab 1 content
    </ema-tab-content>
    <ema-tab-header slot="header" name="tab-2">Tab 2</ema-tab-header>
    <ema-tab-content slot="content" name="tab-2">
        Tab 2 content
    </ema-tab-content>
    <ema-tab-header slot="header" name="tab-3">Tab 3</ema-tab-header>
    <ema-tab-content slot="content" name="tab-3">
        Tab 3 content
    </ema-tab-content>
</ema-tabs>`,
    'ema-translate': `
<ul>
    <li><ema-translate>PASSWORD</ema-translate></li>
    <li><ema-translate string="PASSWORD"></ema-translate></li>
    <li><ema-translate transform="lowercaseFirst">PASSWORD</ema-translate></li>
    <li><ema-translate params="0">RESULTS_NTH</ema-translate></li>
    <li><ema-translate params="1">RESULTS_NTH</ema-translate></li>
    <li><ema-translate params="2">RESULTS_NTH</ema-translate></li>
    <li><ema-translate params="24">counter</ema-translate></li>
    <li><ema-translate params-json='["2",{ "day": "13", "year": "2014"}]'>DATE_NTH</ema-translate></li>
</ul>`,
};

class Demo {
    constructor(hostRef) {
        __chunk_1.registerInstance(this, hostRef);
        this.markup = new Map();
        this.tag = '';
        Object.keys(demosMarkup).forEach((k, i) => {
            this.markup.set(k, demosMarkup[k].trim());
        });
    }
    componentDidLoad() {
        this.initTextArea();
    }
    componentDidUpdate() {
        if (this.tag && this.tag !== this.currentTag) {
            this.currentTag = this.tag;
            this.initTextArea();
        }
    }
    initTextArea() {
        console.log('initTextArea');
        this.textArea = this.el.getElementsByTagName('textarea')[0];
        if (this.markup.get(this.tag)) {
            this.currentMarkup = this.markup.get(this.tag);
        }
        if (this.textArea) {
            this.textArea.addEventListener('keydown', () => {
                this.updateExample();
            });
            this.textArea.addEventListener('change', () => {
                this.updateExample();
            });
            this.textArea['value'] = this.currentMarkup;
            this.el.getElementsByClassName('example')[0].innerHTML = this.currentMarkup;
            this.updateExample();
        }
    }
    updateExample() {
        if (this.textArea) {
            this.markup.set(this.tag, this.textArea['value'].trim());
            this.currentMarkup = this.textArea['value'];
            // let markup = this.markup.get(this.tag).trim();
            // this.textArea['value'] = this.textArea['value'];
            // if(this.el.getElementsByClassName('example')[0].innerHTML !=  this.currentMarkup) {
            this.el.getElementsByClassName('example')[0].innerHTML = this.currentMarkup;
            // }
            this.updateTextArea();
        }
    }
    updateTextArea() {
        if (this.textArea) {
            setTimeout(() => {
                this.textArea.style.cssText = 'height:auto; padding:0';
                this.textArea.style.cssText = 'height:' + (this.textArea.scrollHeight + 7) + 'px';
            }, 30);
        }
    }
    copyExample(ev) {
        __chunk_3.DomUtil.copyToClipboard(this.markup.get(this.tag));
    }
    render() {
        return (__chunk_1.h("div", null, this.markup.get(this.tag) &&
            __chunk_1.h("div", null, __chunk_1.h("h6", { class: 'mt-1' }, "component render: ", '<' + this.tag + '>'), __chunk_1.h("div", { class: 'example' }), __chunk_1.h("hr", null), __chunk_1.h("h6", null, "component markup: ", '<' + this.tag + '>'), __chunk_1.h("textarea", null), __chunk_1.h("button", { class: 'btn btn-link pl-0', onClick: (ev) => this.copyExample(ev) }, __chunk_1.h("ion-icon", { name: "copy", size: "large" })), __chunk_1.h("button", { class: 'btn btn-link', onClick: (ev) => this.updateExample() }, __chunk_1.h("ion-icon", { name: "refresh-circle", size: "large" })))));
    }
    get el() { return __chunk_1.getElement(this); }
    static get style() { return ":root{--ema-color:#343a40;--ema-primary:#007bff;--ema-secondary:#6c757d;--ema-success:#28a745;--ema-info:#17a2b8;--ema-warning:#ffc107;--ema-danger:#dc3545;--ema-light:#f8f9fa;--ema-dark:#343a40;--ema-background:#fff;--ema-background-diap:rgba(29,29,29,0.97);--ema-border-color:#c5c9cd;--ema-border:1px solid #c5c9cd;--ema-border-radius:3px 3px 3px 3px;--ema-box-shadow:1px 1px 10px 1px #ccc;--ema-margin:0.25rem;--ema-margin-sm:0.5rem;--ema-margin-md:1rem;--ema-margin-lg:1.5rem;--ema-margin-xl:2rem;--ema-padding:0.25rem;--ema-padding-sm:0.5rem;--ema-padding-md:1rem;--ema-padding-lg:1.5rem;--ema-padding-xl:2rem;--ema-gray-100:#f8f9fa;--ema-gray-200:#e9ecef;--ema-gray-300:#dee2e6;--ema-gray-400:#ced4da;--ema-gray-500:#adb5bd;--ema-gray-600:#868e96;--ema-gray-700:#495057;--ema-gray-800:#343a40;--ema-gray-900:#212529}ema-demo{position:relative}ema-demo textarea{margin-top:var(--ema-padding-md,1rem);min-width:100%;min-height:42px;display:block;font-size:80%;-webkit-box-shadow:var(--ema-box-shadow,1px 1px 10px 1px #ccc);box-shadow:var(--ema-box-shadow,1px 1px 10px 1px #ccc);border:1px solid #c5c9cd}ema-demo .ema-flip{min-height:120px}"; }
}

exports.ema_demo = Demo;
