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

import './chunk-de721f0a.js';
import { e as Util, j as DomUtil } from './chunk-f9f1602a.js';

class LoginForm {
    constructor() {
        this.usernameLabel = 'Username';
        this.passwordLabel = 'Password';
        this.submitLabel = 'Login';
        this.forgotPasswordLabel = 'Forgot password?';
    }
    loginHandler() {
        event.preventDefault();
        let inputs = this.host.querySelectorAll('input');
        console.log(inputs[0].value);
        this.loginShouldOccur.emit({ username: inputs[0].value, password: inputs[1].value });
    }
    render() {
        return (h("form", { class: "login-form", onSubmit: () => this.loginHandler() },
            h("div", { class: "login-container form-group" },
                h("div", { class: "field-wrap" },
                    h("input", { name: "username", class: "form-control", required: true, placeholder: this.usernameLabel })),
                h("br", null),
                h("div", { class: "field-wrap" },
                    h("input", { type: "password", class: "form-control", name: "password", required: true, placeholder: this.passwordLabel })),
                this.forgotPasswordUrl ?
                    h("p", { class: "forgot" },
                        h("a", { href: this.forgotPasswordUrl }, this.forgotPasswordLabel)) : '',
                this.errorMessage ?
                    h("p", { class: "error" }, this.errorMessage) : '',
                h("br", null),
                h("button", { class: "btn btn-primary", type: "submit" }, this.submitLabel))));
    }
    static get is() { return "ema-login-form"; }
    static get properties() { return {
        "constraintsJson": {
            "type": String,
            "attr": "constraints-json"
        },
        "errorMessage": {
            "type": String,
            "attr": "error-message"
        },
        "forgotPasswordLabel": {
            "type": String,
            "attr": "forgot-password-label"
        },
        "forgotPasswordUrl": {
            "type": String,
            "attr": "forgot-password-url"
        },
        "host": {
            "elementRef": true
        },
        "passwordLabel": {
            "type": String,
            "attr": "password-label"
        },
        "submitLabel": {
            "type": String,
            "attr": "submit-label"
        },
        "usernameLabel": {
            "type": String,
            "attr": "username-label"
        }
    }; }
    static get events() { return [{
            "name": "loginShouldOccur",
            "method": "loginShouldOccur",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
    static get style() { return "ema-login-form .forgot{margin-top:15px}ema-login-form .error{color:red;margin-top:15px}"; }
}

class Modal {
    constructor() {
        this.fadeDuration = 150;
        this.html = '';
        this.width = '80%';
        this.centerVertical = true;
        this.centerContent = false;
        this.allowClose = 'true';
        this.id = Util.getUUID();
    }
    async show(html) {
        this.host.querySelectorAll('.modal-check')[0]['checked'] = true;
        if (html)
            this.html = html;
        this.postRender();
        setTimeout(() => {
        }, 210);
    }
    async hide() {
        this.host.querySelectorAll('.modal-check')[0]['checked'] = false;
    }
    modalContentChangeHandler() {
        this.html = this.modalContent;
    }
    componentWillLoad() {
        if (this.modalContent)
            this.html = this.modalContent;
    }
    componentDidLoad() {
        this.postRender();
    }
    componentDidUpdate() {
        this.postRender();
    }
    postRender() {
        this.modalWrapper = this.host.querySelector('.modal-wrapper');
        this.modalHeader = this.host.querySelector('.modal-header');
        this.modal = this.host.querySelector('.modal');
        this.modalBackground = this.host.querySelector('.modal-background');
        this.content = this.host.querySelector('.modal-content-render');
        if (this.html) {
            this.host.getElementsByClassName('html-render')[0].innerHTML = this.html;
        }
        setTimeout(() => {
            let headerH = this.modalHeader['offsetHeight'];
            if (this.modal['offsetHeight'] > (this.content['offsetHeight'] + headerH)) {
                let correction = this.modal['offsetHeight'] - (this.content['offsetHeight'] + headerH);
                this.modal['style'].height = (this.modal['offsetHeight'] - correction) + 'px';
            }
            this.modal['style'].width = this.width;
            if (this.height) {
                this.modal['style'].height = this.height;
            }
            if (this.centerContent) {
                DomUtil.addClass(this.content, 'modal-content-centered');
                DomUtil.addClass(this.modalHeader, 'modal-header-centered');
            }
            if (!this.centerVertical) {
                DomUtil.addClass(this.modal, 'modal-align-top');
            }
            if (!this.modalTitle) {
                DomUtil.addClass(this.modalHeader, 'modal-header-no-title');
            }
            if (this.allowClose == 'false') {
                this.host.querySelectorAll('.modal-background')[0].setAttribute('for', '');
            }
            else {
                this.host.querySelectorAll('.modal-background')[0].setAttribute('for', 'modal-' + this.id);
            }
        }, 100);
    }
    render() {
        return (h("div", { class: 'modal-wrapper' },
            h("input", { type: "checkbox", id: 'modal-' + this.id, class: 'modal-check' }),
            h("label", { htmlFor: 'modal-' + this.id, class: "modal-background" }),
            h("div", { class: "modal" },
                h("div", { class: "modal-header" },
                    this.modalTitle &&
                        h("div", { class: "modal-title" }, this.modalTitle),
                    this.allowClose == 'true' &&
                        h("label", { htmlFor: 'modal-' + this.id },
                            h("img", { src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAdVBMVEUAAABNTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU0N3NIOAAAAJnRSTlMAAQIDBAUGBwgRFRYZGiEjQ3l7hYaqtLm8vsDFx87a4uvv8fP1+bbY9ZEAAAB8SURBVBhXXY5LFoJAAMOCIP4VBRXEv5j7H9HFDOizu2TRFljedgCQHeocWHVaAWStXnKyl2oVWI+kd1XLvFV1D7Ng3qrWKYMZ+MdEhk3gbhw59KvlH0eTnf2mgiRwvQ7NW6aqNmncukKhnvo/zzlQ2PR/HgsAJkncH6XwAcr0FUY5BVeFAAAAAElFTkSuQmCC", width: "16", height: "16", alt: "" }))),
                h("div", { class: "modal-content-render" }, this.html !== '' ? (h("span", { class: 'html-render' })) : (h("slot", null))))));
    }
    static get is() { return "ema-modal"; }
    static get properties() { return {
        "allowClose": {
            "type": String,
            "attr": "allow-close"
        },
        "centerContent": {
            "type": Boolean,
            "attr": "center-content"
        },
        "centerVertical": {
            "type": Boolean,
            "attr": "center-vertical"
        },
        "height": {
            "type": String,
            "attr": "height"
        },
        "hide": {
            "method": true
        },
        "host": {
            "elementRef": true
        },
        "html": {
            "state": true
        },
        "modalContent": {
            "type": String,
            "attr": "modal-content",
            "watchCallbacks": ["modalContentChangeHandler"]
        },
        "modalTitle": {
            "type": String,
            "attr": "modal-title"
        },
        "show": {
            "method": true
        },
        "width": {
            "type": String,
            "attr": "width"
        }
    }; }
    static get style() { return "ema-modal input[type=checkbox]{display:none}ema-modal input[type=checkbox]:checked~.modal,ema-modal input[type=checkbox]:checked~.modal-background{display:block;opacity:1}ema-modal .modal-wrapper{z-index:9996;display:block}ema-modal .modal-background{width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:9998}ema-modal .modal,ema-modal .modal-background{opacity:0;position:fixed;top:0;left:0;display:none;-webkit-transition:opacity .2s;transition:opacity .2s}ema-modal .modal{border-radius:var(--ema-border-radius,3px);background:var(--ema-background,#fff);right:0;bottom:0;margin:auto;min-height:180px;min-width:180px;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:9999;overflow-y:auto}ema-modal .modal-align-top{margin:var(--ema-paddig,15px) auto}ema-modal .modal-header{background-color:var(--ema-background,#fff);border-bottom:var(--ema-border,1px solid #c5c9cd);-webkit-box-sizing:border-box;box-sizing:border-box;padding:var(--ema-padding-md,1rem)}ema-modal .modal-header .modal-title{margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-weight:700}ema-modal .modal-header label{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;top:var(--ema-padding-md,1rem);right:var(--ema-padding-md,1rem);line-height:50px;padding:0 var(--ema-padding-md,1rem) 0 var(--ema-padding-md,1rem);margin-top:-1rem;margin-right:-.8rem;cursor:pointer;z-index:1}ema-modal .modal-header label:hover img{opacity:.6}ema-modal .modal-header.modal-header-centered{text-align:center}ema-modal .modal-header.modal-header-centered .modal-title{text-align:center;padding-top:var(--ema-padding-xl,2rem);margin:0 auto}ema-modal .modal-header.modal-header-centered label{right:50%;margin-left:-8px}ema-modal .modal-header.modal-header-no-title{border-bottom:none}ema-modal .modal-header.modal-header-no-title label{top:var(--ema-padding-sm,.5rem)}ema-modal .modal-content-render{padding:var(--ema-padding-md,1rem)}ema-modal .modal-content-render.modal-content-centered{text-align:center;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}"; }
}

export { LoginForm as EmaLoginForm, Modal as EmaModal };
