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

import './chunk-de721f0a.js';
import './chunk-fec5a75d.js';
import './chunk-d51357a9.js';
import { j as DomUtil } from './chunk-f9f1602a.js';
import { a as AppService } from './chunk-50f0a6d7.js';

class AppComponents {
    constructor() {
        this.appService = AppService.instance;
        this.components = this.appService.components;
    }
    render() {
        let router = document.getElementsByTagName('ema-router')[0];
        router.getState().then((routerState) => {
            let tag = routerState.context.params.name;
            this.components.map((comp) => {
                if (comp.tag === tag) {
                    this.component = comp;
                    this.currentTag = tag;
                    if (!comp.methods) {
                        comp.methods = [];
                    }
                }
            });
        });
        return (h("div", null,
            h("ema-layout", { class: 'layout-header-sidebar20-content80-footer', "grid-gap": '0px', "padding-style": '0px 15px 15px 0px' },
                h("header", null, " "),
                h("aside", null,
                    h("h5", { class: 'text-center' }, "- webcomponents -"),
                    h("ul", { class: "list-group" }, this.components.map((item, i) => {
                        return h("li", { class: 'list-group-item' },
                            h("ema-route-link", { url: '/components/' + item.tag }, item.tag));
                    }))),
                this.currentTag &&
                    h("article", null, this.component &&
                        h("div", null,
                            h("ema-layout", { class: 'layout-header-content50-sidebar50-footer', "grid-gap": '0px', "padding-style": '0px 15px 15px 0px' },
                                h("header", null,
                                    h("h5", null, '<' + this.currentTag + '>')),
                                h("article", null,
                                    this.component.props &&
                                        h("div", null,
                                            h("h6", null, "html properties:"),
                                            h("ul", { class: 'props list-unstyled' }, this.component.props.map((prop, i) => {
                                                return h("li", { class: 'prop' },
                                                    '• ' + prop.attr + ' : ',
                                                    h("span", null, prop.type.toLowerCase()));
                                            }))),
                                    this.component.methods &&
                                        h("div", null,
                                            h("h6", null, "javascript methods:"),
                                            h("ul", { class: 'methods list-unstyled' }, this.component.methods.map((prop, i) => {
                                                return h("li", { class: 'method' }, '• ' + prop.name + '()');
                                            }))),
                                    this.component.events &&
                                        h("div", null,
                                            h("h6", null, "javascript events:"),
                                            h("ul", { class: 'events list-unstyled' }, this.component.events.map((prop, i) => {
                                                return h("li", { class: 'event' },
                                                    '• ' + prop.event + ' : ',
                                                    h("span", null, "event"));
                                            }))),
                                    this.component.dependencies &&
                                        h("div", null,
                                            h("h6", null, "dependencies:"),
                                            h("ul", { class: 'dependencies list-unstyled' }, this.component.dependencies.map((prop, i) => {
                                                return h("li", { class: 'dependencie' }, '• ' + prop);
                                            })))),
                                h("aside", { class: 'demos' },
                                    h("ema-demo", { tag: this.currentTag }))))),
                !this.currentTag &&
                    h("article", { class: 'container mt-2' },
                        h("ema-layout", { class: 'layout-grid-fill flip-board mt-3', "grid-gap": '10px', "cell-width": "225px", "cell-height": "166px" }, this.components.map((item) => {
                            return h("ema-card", { class: 'text-center component-card' },
                                h("ema-card-header", null,
                                    h("span", { class: "ema-card-header-title" }, '<' + item.tag + '>')),
                                h("ema-card-content", { class: "ema-card-header-subtitle" },
                                    h("div", null, item.componentPath.split('/')[item.componentPath.split('/').length - 1])),
                                h("ema-card-bottom", null,
                                    h("ema-route-link", { url: '/components/' + item.tag },
                                        h("button", { class: 'btn btn-primary' }, "example"))));
                        }))))));
    }
    static get is() { return "ema-app-components"; }
    static get properties() { return {
        "currentTag": {
            "state": true
        }
    }; }
    static get style() { return "ema-app-components li span{color:#afb0b4}ema-app-components li.list-group-item{cursor:pointer;font-weight:700;padding:.33333rem 1.25rem}ema-app-components .component-card *{text-decoration:none}"; }
}

class Collapsible {
    constructor() {
        this.toggle = false;
        this.collapsed = false;
    }
    collapsedChanged() {
        if (this.collapsed == true) {
            this.toggle = false;
        }
        if (this.collapsed == false) {
            this.toggle = true;
        }
    }
    componentDidLoad() {
        if (this.collapsed == false) {
            this.toggleComponent();
        }
    }
    toggleComponent() {
        this.toggle = !this.toggle;
        this.onToggle.emit({ visible: this.toggle });
    }
    render() {
        return (h("div", null,
            h("ema-card", null,
                h("ema-card-header", null,
                    h("span", { class: "ema-card-header-title", onClick: () => this.toggleComponent() },
                        h("div", null,
                            this.label,
                            " ",
                            this.toggle ? h("span", null, "\u25B2") : h("span", null, "\u25BC")))),
                h("ema-card-content", { class: this.toggle ? 'active' : 'inactive' },
                    h("slot", null)))));
    }
    static get is() { return "ema-collapsible"; }
    static get properties() { return {
        "collapsed": {
            "type": Boolean,
            "attr": "collapsed",
            "watchCallbacks": ["collapsedChanged"]
        },
        "label": {
            "type": String,
            "attr": "label"
        },
        "toggle": {
            "state": true
        }
    }; }
    static get events() { return [{
            "name": "onToggle",
            "method": "onToggle",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
    static get style() { return "ema-collapsible .ema-card-header-title{cursor:pointer;position:relative}ema-collapsible .ema-card-header-title span{cursor:pointer;position:absolute;right:1em;top:.6em;font-size:.6em}ema-collapsible .active{display:block}ema-collapsible .inactive{display:none}"; }
}

const demosMarkup = {
    'ema-card': `<ema-card>
    <ema-card-header>
        <span class="ema-card-header-title">Title</span>
        <span class="ema-card-header-subtitle">Subtitle</span>
    </ema-card-header>
    <ema-card-content>
        Content goes here
    </ema-card-content>
    <ema-card-bottom>
        <button class="btn btn-primary">Action!</button>
    </ema-card-bottom>
</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('loginShouldOccur', 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-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() {
        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'];
            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) {
        DomUtil.copyToClipboard(this.markup.get(this.tag));
    }
    render() {
        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: (ev) => this.copyExample(ev) },
                    h("ion-icon", { name: "copy", size: "large" })),
                h("button", { class: 'btn btn-link', onClick: (ev) => this.updateExample() },
                    h("ion-icon", { name: "refresh-circle", size: "large" })))));
    }
    static get is() { return "ema-demo"; }
    static get properties() { return {
        "el": {
            "elementRef": true
        },
        "tag": {
            "type": String,
            "attr": "tag"
        }
    }; }
    static get style() { return "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}"; }
}

class Layout {
    constructor() {
        this.gridGap = '0px';
        this.cellWidth = '230px';
        this.cellHeight = '210px';
        this.paddingStyle = '0 0 0 0';
    }
    componentDidLoad() {
        this.class = this.host.className;
        if (this.host.querySelectorAll('header').length) {
            this.host.querySelectorAll('header').item(0).className += ' header';
        }
        if (this.host.querySelectorAll('aside').length) {
            this.host.querySelectorAll('aside').item(0).className += ' sidebar';
        }
        if (this.host.querySelectorAll('article').length) {
            this.host.querySelectorAll('article').item(0).className += ' content';
        }
        if (this.host.querySelectorAll('footer').length) {
            this.host.querySelectorAll('footer').item(0).className += ' footer';
        }
        this.host.querySelectorAll('.ema-layout-wrapper').item(0)['style'].gridGap = this.gridGap;
        let divs = this.host.querySelectorAll('.ema-layout-wrapper > *'), i;
        for (i = 0; i < divs.length; ++i) {
            divs[i]['style']['padding'] = this.paddingStyle;
        }
        if (this.class.match('layout-grid-fill')) {
            let wrapper = this.host.getElementsByClassName('ema-layout-wrapper')[0];
            wrapper['style'].gridTemplateColumns = 'repeat(auto-fill, minmax(' + this.cellWidth + ', 1fr))';
            wrapper['style'].gridAutoRows = ' minmax(' + this.cellHeight + ', auto)';
        }
    }
    render() {
        return (h("div", { class: "ema-layout-wrapper" },
            h("slot", null),
            h("slot", null)));
    }
    static get is() { return "ema-layout"; }
    static get properties() { return {
        "cellHeight": {
            "type": String,
            "attr": "cell-height"
        },
        "cellWidth": {
            "type": String,
            "attr": "cell-width"
        },
        "gridGap": {
            "type": String,
            "attr": "grid-gap"
        },
        "host": {
            "elementRef": true
        },
        "paddingStyle": {
            "type": String,
            "attr": "padding-style"
        },
        "type": {
            "type": String,
            "attr": "type"
        }
    }; }
    static get style() { return "\@media screen and (min-width:500px){.layout-header-content80-sidebar20-footer .ema-layout-wrapper,.layout-header-sidebar20-content80-footer .ema-layout-wrapper,.layout-header-sidebar50-content50-footer .ema-layout-wrapper{display:grid}.layout-header-content80-sidebar20-footer .sidebar,.layout-header-sidebar20-content80-footer .sidebar,.layout-header-sidebar50-content50-footer .sidebar{float:left;width:20%}.layout-header-content80-sidebar20-footer .content,.layout-header-sidebar20-content80-footer .content,.layout-header-sidebar50-content50-footer .content{float:right;width:80%}.layout-header-content80-sidebar20-footer .ema-layout-wrapper,.layout-header-sidebar20-content80-footer .ema-layout-wrapper,.layout-header-sidebar50-content50-footer .ema-layout-wrapper{margin:0 auto;grid-template-columns:1fr 3fr}.layout-header-content80-sidebar20-footer .footer,.layout-header-content80-sidebar20-footer .header,.layout-header-sidebar20-content80-footer .footer,.layout-header-sidebar20-content80-footer .header,.layout-header-sidebar50-content50-footer .footer,.layout-header-sidebar50-content50-footer .header{grid-column:1/-1;clear:both}}.layout-header-content80-sidebar20-footer .ema-layout-wrapper>*,.layout-header-sidebar20-content80-footer .ema-layout-wrapper>*,.layout-header-sidebar50-content50-footer .ema-layout-wrapper>*{margin-bottom:10px}\@supports (display:grid){.layout-header-content80-sidebar20-footer .ema-layout-wrapper>*,.layout-header-sidebar20-content80-footer .ema-layout-wrapper>*,.layout-header-sidebar50-content50-footer .ema-layout-wrapper>*{width:auto;margin:0}}\@media screen and (min-width:500px){.layout-header-content80-sidebar20-footer .ema-layout-wrapper{grid-template-columns:3fr 1fr}.layout-header-content80-sidebar20-footer .sidebar{float:right}.layout-header-content80-sidebar20-footer .content{float:left}}.layout-header-content50-sidebar50-footer .ema-layout-wrapper{grid-template-columns:1fr 1fr}.layout-header-content50-sidebar50-footer .sidebar{float:left;min-width:49.1489%}.layout-header-content50-sidebar50-footer .content{float:right;width:49.7872%}.layout-grid-fill .ema-layout-wrapper{grid-gap:10px;justify-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;display:grid;margin:0 auto;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));grid-auto-rows:minmax(210px,auto)}.layout-grid-fill .content{margin-left:5px;margin-right:5px;-ms-flex:1 1 230px;flex:1 1 230px}.layout-grid-fill .ema-layout-wrapper>*{margin-bottom:10px}\@supports (display:grid){.layout-grid-fill .ema-layout-wrapper>*{margin:0}}"; }
}

export { AppComponents as EmaAppComponents, Collapsible as EmaCollapsible, Demo as EmaDemo, Layout as EmaLayout };
