@kelvininc/ui-components
Version:
Kelvin UI Components
69 lines (63 loc) • 7.84 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
import { g as getClassMap } from './p-DKOxy79t.js';
import { b as EIconName } from './p-DBphUUgi.js';
import { d as defineCustomElement$2 } from './p-B41PGLQm.js';
const modalLightCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}: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(--kv-neutral-4, #bebebe);--modal-z-index:1;--modal-overlay-color:rgba(var(--kv-neutral-9-rgb, 18, 18, 18), 0.8);--modal-background-color:var(--kv-neutral-8, #202020);--modal-close-button-width:16px;--modal-close-button-height:16px}.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:10px;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 .topbar{display:flex;align-items:center;justify-content:space-between;padding:0 var(--kv-spacing-4x, 16px);height:var(--modal-topbar-height);border-bottom:1px solid var(--kv-neutral-7, #2a2a2a);box-sizing:border-box}.modal-container .topbar .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;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(--kv-spacing-3x, 12px)}.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(--kv-neutral-4, #bebebe)}:host{--modal-overlay-color:rgba(var(--kv-neutral-6-rgb, 63, 63, 63), 0.5);--modal-background-color:var(--kv-neutral-0, #fff)}";
const modalNightCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}: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(--kv-neutral-4, #bebebe);--modal-z-index:1;--modal-overlay-color:rgba(var(--kv-neutral-9-rgb, 18, 18, 18), 0.8);--modal-background-color:var(--kv-neutral-8, #202020);--modal-close-button-width:16px;--modal-close-button-height:16px}.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:10px;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 .topbar{display:flex;align-items:center;justify-content:space-between;padding:0 var(--kv-spacing-4x, 16px);height:var(--modal-topbar-height);border-bottom:1px solid var(--kv-neutral-7, #2a2a2a);box-sizing:border-box}.modal-container .topbar .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;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(--kv-spacing-3x, 12px)}.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(--kv-neutral-4, #bebebe)}:host{--modal-overlay-color:rgba(var(--kv-neutral-9-rgb, 18, 18, 18), 0.8);--modal-background-color:var(--kv-neutral-8, #202020)}";
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);
/** @inheritdoc */
this.showOverlay = true;
/** @inheritdoc */
this.showCloseButton = true;
/** @inheritdoc */
this.customClass = '';
this.onClose = (ev) => {
ev.preventDefault();
this.clickClose.emit();
};
this.onClickOverlay = (ev) => {
ev.preventDefault();
this.clickOverlay.emit();
};
}
render() {
return (h(Host, { key: 'a889fa42e1c7f5ffc7cb16f595ff70f13262da26', class: getClassMap(this.customClass) }, h("div", { key: '2b5c566e0cdd6f9fc99731170bd7c97ef37fee47', class: { 'modal-overlay': this.showOverlay }, onClick: this.onClickOverlay }), h("div", { key: 'cae1cb0afe3cc10b60a603ab5345dd093ed483a2', class: "modal-container" }, h("div", { key: '0b73f512fb4ca7927209c24dd74ab24210847e2b', class: "topbar", part: "topbar" }, h("div", { key: '0ece5540a5268ffe57fa01f7c1ef587672ccd3e2', class: "title" }, this.headerTitle), h("div", { key: 'ee8399b651d4bc4547ef712ba8a7d00c45a749a0', class: "actions" }, h("slot", { key: '745ecbf9dba308bb4998adbd2445321547a84d2e', name: "more-topbar-actions" }), this.showCloseButton && (h("div", { key: '32f83429f6f38cfe135e1f307a4df69bf825ffa1', class: "close-button", onClick: this.onClose }, h("kv-icon", { key: '7b436b792ddf48ad2452e9166cc7756ddcdd8fbb', name: EIconName.Close }))))), h("div", { key: 'fe7f9f3c1f1f661cf0674a5bf55479ad521b8e48', class: "content", part: "content" }, h("slot", { key: '58a7df573f5e5343dee61a812ba076217761bbcb', name: "header" }), h("slot", { key: 'ac641a97ac92b264ba34169c10c5bdd0a95941eb', name: "body" }), h("slot", { key: 'ecb7cc859be32c76fcdd98f17c2deafb7a7cfe8f', name: "footer" })))));
}
static get style() { return {
light: modalLightCss,
night: modalNightCss
}; }
}, [33, "kv-modal", {
"headerTitle": [1, "header-title"],
"showOverlay": [4, "show-overlay"],
"showCloseButton": [4, "show-close-button"],
"customClass": [513, "custom-class"]
}]);
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 };