radh-ui/dist/esm/radh-modal.entry.js

Stencil Component Starter

import { r as registerInstance, c as createEvent, h } from './index-a9700b09.js';

const radhModalCss = ".radh-modal-wrapper{position:fixed;left:0;top:0;width:100%;height:100%;background-color:var(--background-color, red);opacity:0;visibility:hidden;-webkit-transform:scale(1.1);transform:scale(1.1);-webkit-transition:visibility 0s linear 0.25s, opacity 0.25s 0s, -webkit-transform 0.25s;transition:visibility 0s linear 0.25s, opacity 0.25s 0s, -webkit-transform 0.25s;transition:visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;transition:visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s, -webkit-transform 0.25s;z-index:1}.visible{opacity:1;visibility:visible;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:visibility 0s linear 0s, opacity 0.25s 0s, -webkit-transform 0.25s;transition:visibility 0s linear 0s, opacity 0.25s 0s, -webkit-transform 0.25s;transition:visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;transition:visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s, -webkit-transform 0.25s}.radh-modal{font-family:var(--font-family, Helvetica);font-size:var(--font-size, 13px);background-color:#fff;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border-radius:var(--border-radius, 0.2em);min-width:300px}.radh-modal-header{font-size:1.3em;padding:5px 10px 5px 10px;border-top-left-radius:var(--border-radius, 0.2em);border-top-right-radius:var(--border-radius, 0.2em);background-color:var(--header-bg-color, #fff);color:var(--header-color, #4c4b4b)}.radh-modal-content{padding:0px 10px 5px 10px}.radh-modal-buttons{padding:5px 10px 10px 10px;text-align:right}.radh-modal-buttons button{font-size:inherit;margin-left:10px;min-width:80px;line-height:20px;border-style:solid;border-radius:var(--border-radius, 0.2em);padding:3px;color:var(--button-color, white);cursor:pointer}.radh-modal-cancel{background-color:var(--cancel-bg-color, #848e97);border-color:var(--cancel-bg-color, #848e97)}.radh-modal-cancel:hover{background-color:var(--cancel-hover-bg-color, #6c757d);border-color:var(--cancel-hover-bg-color, #6c757d)}.radh-modal-ok{background-color:var(--ok-bg-color, #848e97);border-color:var(--ok-bg-color, #848e97)}.radh-modal-ok:hover{background-color:var(--ok-hover-bg-color, #6c757d);border-color:var(--ok-hover-bg-color, #6c757d)}";

class XModal {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.visible = false;
        this.handleCancelClick = () => {
            this.visible = false;
            this.cancel.emit();
        };
        this.handleOkClick = () => {
            this.visible = false;
            this.ok.emit();
        };
        this.ok = createEvent(this, "ok", 7);
        this.cancel = createEvent(this, "cancel", 7);
    }
    render() {
        const { visible, heading: title, handleCancelClick, handleOkClick } = this;
        return (h("div", { class: visible ? "radh-modal-wrapper visible" : "radh-modal-wrapper" }, h("div", { class: "radh-modal" }, h("div", { class: "radh-modal-header" }, h("span", null, title)), h("div", { class: "radh-modal-content" }, h("slot", null)), h("div", { class: "radh-modal-buttons" }, h("button", { class: "radh-modal-cancel", onClick: handleCancelClick }, "Cancel"), h("button", { class: "radh-modal-ok", onClick: handleOkClick }, "Okay")))));
    }
}
XModal.style = radhModalCss;

export { XModal as radh_modal };