@kelvininc/ui-components
Version:
Kelvin UI Components
41 lines (35 loc) • 6.91 kB
JavaScript
'use strict';
var index = require('./index-DpuMIXDY.js');
var cssClass_helper = require('./css-class.helper-B7G6WFT7.js');
var icon_types = require('./icon.types-B8lvUrX_.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 = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.clickClose = index.createEvent(this, "clickClose", 7);
this.clickOverlay = index.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 (index.h(index.Host, { key: 'a889fa42e1c7f5ffc7cb16f595ff70f13262da26', class: cssClass_helper.getClassMap(this.customClass) }, index.h("div", { key: '2b5c566e0cdd6f9fc99731170bd7c97ef37fee47', class: { 'modal-overlay': this.showOverlay }, onClick: this.onClickOverlay }), index.h("div", { key: 'cae1cb0afe3cc10b60a603ab5345dd093ed483a2', class: "modal-container" }, index.h("div", { key: '0b73f512fb4ca7927209c24dd74ab24210847e2b', class: "topbar", part: "topbar" }, index.h("div", { key: '0ece5540a5268ffe57fa01f7c1ef587672ccd3e2', class: "title" }, this.headerTitle), index.h("div", { key: 'ee8399b651d4bc4547ef712ba8a7d00c45a749a0', class: "actions" }, index.h("slot", { key: '745ecbf9dba308bb4998adbd2445321547a84d2e', name: "more-topbar-actions" }), this.showCloseButton && (index.h("div", { key: '32f83429f6f38cfe135e1f307a4df69bf825ffa1', class: "close-button", onClick: this.onClose }, index.h("kv-icon", { key: '7b436b792ddf48ad2452e9166cc7756ddcdd8fbb', name: icon_types.EIconName.Close }))))), index.h("div", { key: 'fe7f9f3c1f1f661cf0674a5bf55479ad521b8e48', class: "content", part: "content" }, index.h("slot", { key: '58a7df573f5e5343dee61a812ba076217761bbcb', name: "header" }), index.h("slot", { key: 'ac641a97ac92b264ba34169c10c5bdd0a95941eb', name: "body" }), index.h("slot", { key: 'ecb7cc859be32c76fcdd98f17c2deafb7a7cfe8f', name: "footer" })))));
}
};
KvModal.style = {
light: modalLightCss,
night: modalNightCss
};
exports.kv_modal = KvModal;