import { r as registerInstance, h, g as getElement } from './chunk-82a2445c.js';
import './chunk-d7ac2f15.js';
import { D as DomUtil } from './chunk-18ca1c85.js';
var demosMarkup = {
    'ema-card': "<ema-card>\n    <ema-card-header background=\"var(--ema-background-light)\">\n        <span class=\"ema-card-header-title\">Card title</span>\n        <span class=\"ema-card-header-subtitle\">Card subtitle</span>\n    </ema-card-header>\n    <ema-card-content>\n        Card content:<br>Lorem ipsum\n    </ema-card-content>\n    <ema-card-footer>\n        <button class=\"btn btn-primary\">Card bottom Action!</button>\n    </ema-card-footer>\n</ema-card>",
    'ema-collapsible': "<ema-collapsible label=\"Collapse\" collapsed=\"false\">\n    <img src=\"https://dummyimage.com/214x117.png/cc0000/ffffff\">\n</ema-collapsible>",
    'ema-dialog': " \n<button onClick=\"document.querySelector('ema-dialog').alert('Your message')\">Alert\n</button>\n<button onClick=\"document.querySelector('ema-dialog').confirm('Are you sure?')\">Confirm\n</button>\n<button onClick=\"document.querySelector('ema-dialog').notice('Please, take notice')\">Notice\n</button>",
    'ema-debugger': "\n<button onClick=\"document.querySelector('ema-debugger').open()\">Show debugger</button>\n<p>Or press Control + d to toggle the debugger</p>",
    'ema-flash-message': " \n<button onClick=\"document.querySelector('ema-flash-message').show('Just some message', 'secondary', 3000)\">Show message\n</button>",
    'ema-flip': "\n<ema-flip flip-events=\"click\" flip-back-events=\"click\" flip-duration=\"350\" flip-timing-function=\"ease-in-out\">\n    <div slot=\"front\">\n        <img src=\"https://dummyimage.com/214x117.png/cccccc/ffffff&text=flip+me\">\n    </div>\n    <div slot=\"back\">\n        <img src=\"https://dummyimage.com/214x117.png/cc0000/ffffff&text=flip+me+back\">\n    </div>\n</ema-flip>",
    'ema-form': "\n<ema-form language=\"nl\" \n    data-json='{\"title\":\"\",\"Inhoud\":\"test inhoud\"}'\n    definitions-json='{\"title\":{\"constraints\":{\"presence\": true}}}'>\n</ema-form>",
    'ema-iframe': "\n<ema-iframe src=\"https://variations.firebaseapp.com/\" width=\"100%\" height=\"420px\"></ema-iframe>",
    'ema-json-viewer': "\n<ema-json-viewer \n    json-url=\"/assets/collection-manifest.json\"\n    collapse-at=\"1\">\n</ema-json-viewer>",
    'ema-lazy-img': "\n<ema-lazy-img src=\"https://dummyimage.com/214x214.png/cc0000/ffffff\" alt=\"just an image\"></ema-lazy-img>",
    'ema-layout': "\n<ema-layout class={'layout-header-sidebar20-content80-footer'} grid-gap={'5px'}>\n    <header>My header</header>\n    <aside>Sidebar</aside>\n    <article>\n        <h6>2 column, header and footer</h6>\n        <p>Example content.</p>\n    </article>\n    <footer>My footer</footer>\n</ema-layout>",
    'ema-loading-spinner': "\n<ema-loading-spinner type=\"ios\" color=\"#495057\"></ema-loading-spinner>",
    'ema-login-form': "\n<ema-login-form\n    username-label=\"Gebruikersnaam\"\n    password-label=\"Wachtwoord\"\n    submit-label=\"Login\">\n</ema-login-form>\n<script>\n    var loginForm = document.querySelector('ema-login-form');\n    loginForm.addEventListener('formSubmit', function(event) {\n        var username = event.detail.username;\n        var password = event.detail.password;\n        myApiUrl.login(username, password);\n    } );\n</script>",
    'ema-modal': "\n<ema-modal id=\"demo-modal\" \n    modal-title=\"Just some modal title\"\n    modal-content=\"<h4>Modal content</h4><div>Just some content</div>\"\n    width=\"50%\" \n    height=\"50%\" \n    center-content=\"true\"\n    allow-close=\"true\">\n</ema-modal>\n<button onClick=\"document.getElementById('demo-modal').show('<h4>Modal content</h4><div>Just some content</div>')\">Show modal\n</button>",
    'ema-permission': "\n<div>\n    <ema-permission can='[\"create\"]' subject=\"User\" conditions='{}'>\n        <button class=\"create-btn\">Create</button>\n    </ema-permission>\n    <ema-permission can='[\"read\"]' subject=\"User\" conditions='{}'>\n        <button class=\"read-btn\">Read</button>\n    </ema-permission>\n    <ema-permission can='[\"update\"]' subject=\"User\" conditions='{}'>\n        <button class=\"edit-btn\">Edit</button>\n    </ema-permission>\n    <ema-permission can='[\"delete\"]' subject=\"User\" conditions='{}'>\n        <button class=\"delete-btn\">Delete</button>\n    </ema-permission>\n</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': "\n<ema-slider min=\"0\" max=\"100\" value=\"50\"></ema-slider>",
    'ema-svg': "\n<ema-svg src=\"../assets/images/splash.svg\" data-json='{\"title\":\"my-title\"}'></ema-svg>",
    'ema-tabs': "\n<ema-tabs selected-index=\"3\">\n    <ema-tab-header slot=\"header\" name=\"tab-1\">Tab 1</ema-tab-header>\n    <ema-tab-content slot=\"content\" name=\"tab-1\">\n        Tab 1 content\n    </ema-tab-content>\n    <ema-tab-header slot=\"header\" name=\"tab-2\">Tab 2</ema-tab-header>\n    <ema-tab-content slot=\"content\" name=\"tab-2\">\n        Tab 2 content\n    </ema-tab-content>\n    <ema-tab-header slot=\"header\" name=\"tab-3\">Tab 3</ema-tab-header>\n    <ema-tab-content slot=\"content\" name=\"tab-3\">\n        Tab 3 content\n    </ema-tab-content>\n</ema-tabs>",
    'ema-translate': "\n<ul>\n    <li><ema-translate>PASSWORD</ema-translate></li>\n    <li><ema-translate string=\"PASSWORD\"></ema-translate></li>\n    <li><ema-translate transform=\"lowercaseFirst\">PASSWORD</ema-translate></li>\n    <li><ema-translate params=\"0\">RESULTS_NTH</ema-translate></li>\n    <li><ema-translate params=\"1\">RESULTS_NTH</ema-translate></li>\n    <li><ema-translate params=\"2\">RESULTS_NTH</ema-translate></li>\n    <li><ema-translate params=\"24\">counter</ema-translate></li>\n    <li><ema-translate params-json='[\"2\",{ \"day\": \"13\", \"year\": \"2014\"}]'>DATE_NTH</ema-translate></li>\n</ul>",
};
var Demo = /** @class */ (function () {
    function Demo(hostRef) {
        var _this = this;
        registerInstance(this, hostRef);
        this.markup = new Map();
        this.tag = '';
        Object.keys(demosMarkup).forEach(function (k, i) {
            _this.markup.set(k, demosMarkup[k].trim());
        });
    }
    Demo.prototype.componentDidLoad = function () {
        this.initTextArea();
    };
    Demo.prototype.componentDidUpdate = function () {
        if (this.tag && this.tag !== this.currentTag) {
            this.currentTag = this.tag;
            this.initTextArea();
        }
    };
    Demo.prototype.initTextArea = function () {
        var _this = this;
        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', function () {
                _this.updateExample();
            });
            this.textArea.addEventListener('change', function () {
                _this.updateExample();
            });
            this.textArea['value'] = this.currentMarkup;
            this.el.getElementsByClassName('example')[0].innerHTML = this.currentMarkup;
            this.updateExample();
        }
    };
    Demo.prototype.updateExample = function () {
        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();
        }
    };
    Demo.prototype.updateTextArea = function () {
        var _this = this;
        if (this.textArea) {
            setTimeout(function () {
                _this.textArea.style.cssText = 'height:auto; padding:0';
                _this.textArea.style.cssText = 'height:' + (_this.textArea.scrollHeight + 7) + 'px';
            }, 30);
        }
    };
    Demo.prototype.copyExample = function (ev) {
        DomUtil.copyToClipboard(this.markup.get(this.tag));
    };
    Demo.prototype.render = function () {
        var _this = this;
        return (h("div", null, this.markup.get(this.tag) &&
            h("div", null, h("h6", { class: 'mt-1' }, "component render: ", '<' + this.tag + '>'), h("div", { class: 'example' }), h("hr", null), h("h6", null, "component markup: ", '<' + this.tag + '>'), h("textarea", null), h("button", { class: 'btn btn-link pl-0', onClick: function (ev) { return _this.copyExample(ev); } }, h("ion-icon", { name: "copy", size: "large" })), h("button", { class: 'btn btn-link', onClick: function (ev) { return _this.updateExample(); } }, h("ion-icon", { name: "refresh-circle", size: "large" })))));
    };
    Object.defineProperty(Demo.prototype, "el", {
        get: function () { return getElement(this); },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Demo, "style", {
        get: function () { 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}"; },
        enumerable: true,
        configurable: true
    });
    return Demo;
}());
export { Demo as ema_demo };
