@kelvininc/ui-components/components/kv-modal.js

Kelvin UI Components

import { H as proxyCustomElement, I as H, J as createEvent, K as h, t as EIconName, L as Host } from './p-BP5CxQcH.js';
import { a as getClassMap } from './p-DCOsOAOy.js';
import { d as defineCustomElement$2 } from './p-DQ7v6WT-.js';

const modalCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--modal-height:fit-content;--modal-min-height:235px;--modal-width:fit-content;--modal-min-width:400px;--modal-topbar-height:50px;--modal-topbar-text-color:var(--modal-title-default);--modal-z-index:1;--modal-overlay-color:var(--overlay-surface-opacity-80);--modal-background-color:var(--modal-background-default);--modal-close-button-width:var(--button-text-icon-size-regular);--modal-close-button-height:var(--button-text-icon-size-regular)}.modal-overlay{position:fixed;inset:0;z-index:var(--modal-z-index);background:var(--modal-overlay-color)}.modal-container{position:absolute;overflow:auto;outline:none;top:0;bottom:0;left:0;right:0;margin:auto;width:var(--modal-width);min-width:var(--modal-min-width);height:var(--modal-height);min-height:var(--modal-min-height);border-radius:var(--modal-radius-default);background-color:var(--modal-background-color);display:flex;flex-direction:column;z-index:var(--modal-z-index);transition:width 0.3s ease-in-out, height 0.3s ease-in-out}.modal-container .divider{content:\"\";display:flex;flex:1;height:1px;background:var(--modal-divider-default);flex:none}.modal-container .topbar{display:flex;align-items:center;justify-content:space-between;padding:0 var(--spacing-2xl);height:var(--modal-topbar-height);box-sizing:border-box}.modal-container .topbar .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:1.5px;text-transform:uppercase;color:var(--modal-topbar-text-color)}.modal-container .topbar .actions{display:inline-flex;align-items:center;gap:var(--spacing-xl)}.modal-container .content{display:flex;flex-direction:column;flex:1;min-height:0}.modal-container .close-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;pointer-events:all}.modal-container .close-button kv-icon{--icon-width:var(--modal-close-button-width);--icon-height:var(--modal-close-button-height);--icon-color:var(--button-text-icon-color-default)}";

const KvModal$1 = /*@__PURE__*/ proxyCustomElement(class KvModal extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.clickClose = createEvent(this, "clickClose", 7);
        this.clickOverlay = createEvent(this, "clickOverlay", 7);
        this.escapeKeyPressed = createEvent(this, "escapeKeyPressed", 7);
        /** @inheritdoc */
        this.showOverlay = true;
        /** @inheritdoc */
        this.showCloseButton = true;
        /** @inheritdoc */
        this.customClass = '';
        this.onClose = (ev) => {
            ev.preventDefault();
            this.clickClose.emit(ev);
        };
        this.onClickOverlay = (ev) => {
            ev.preventDefault();
            this.clickOverlay.emit(ev);
        };
    }
    handleKeyDown(event) {
        if (event.key === 'Escape') {
            event.preventDefault();
            this.escapeKeyPressed.emit(event);
        }
    }
    render() {
        return (h(Host, { key: 'b2db7418d1470203f255c09919040ceb8e901fe8', class: getClassMap(this.customClass) }, h("div", { key: '7785461f7d276eb96064ca8f92c32470e9eec5a5', class: { 'modal-overlay': this.showOverlay }, onClick: this.onClickOverlay }), h("div", { key: 'faa914c60c600ab88f62f7191fbe73e92b35bf14', class: "modal-container" }, h("div", { key: 'c6f4a0515cc235f641d32b3258cc44d59992acce', class: "topbar", part: "topbar" }, h("div", { key: 'c4c1e2a076885575f6d9b52b07c7e528d178df9d', class: "title" }, this.headerTitle), h("div", { key: '6afa13d13b679ab6da0e0debf99d79f0e592e1a2', class: "actions" }, h("slot", { key: '584b699ba1674d418c9568e970e4b26f7ad81e0a', name: "more-topbar-actions" }), this.showCloseButton && (h("div", { key: '5cf0d8f83d4c2db875e004d03b0991442f1ddea9', class: "close-button", onClick: this.onClose }, h("kv-icon", { key: '26983cae94233cd3de0bfe77cd648962c375863b', name: EIconName.Close }))))), this.headerTitle && h("div", { key: 'a51ad5921de0979e404322ba8e98a83e9bf64818', class: "divider" }), h("div", { key: 'b131f46c94312a129440cec3d6c9dea28120394c', class: "content", part: "content" }, h("slot", { key: 'd81a8d490da39fe6c4dd9af365b2e82533772116', name: "header" }), h("slot", { key: '6960c3760febba2e1bdb7ef801b22188efc0273c', name: "body" }), h("slot", { key: 'e9152cedd1ec8995c2374bb0aca3f506a82c7449', name: "footer" })))));
    }
    static get style() { return modalCss; }
}, [257, "kv-modal", {
        "headerTitle": [1, "header-title"],
        "showOverlay": [4, "show-overlay"],
        "showCloseButton": [4, "show-close-button"],
        "customClass": [513, "custom-class"]
    }, [[4, "keydown", "handleKeyDown"]]]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["kv-modal", "kv-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "kv-modal":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, KvModal$1);
            }
            break;
        case "kv-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}
defineCustomElement$1();

const KvModal = KvModal$1;
const defineCustomElement = defineCustomElement$1;

export { KvModal, defineCustomElement };