@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 6.13 kB
JavaScript
import{r as o,c as a,h as e,H as t}from"./p-D-JVwta2.js";import{g as i}from"./p-DKOxy79t.js";import{E as n}from"./p-SVedE_O8.js";const r=class{constructor(e){o(this,e),this.clickClose=a(this,"clickClose",7),this.clickOverlay=a(this,"clickOverlay",7),this.showOverlay=!0,this.showCloseButton=!0,this.customClass="",this.onClose=o=>{o.preventDefault(),this.clickClose.emit()},this.onClickOverlay=o=>{o.preventDefault(),this.clickOverlay.emit()}}render(){return e(t,{key:"a889fa42e1c7f5ffc7cb16f595ff70f13262da26",class:i(this.customClass)},e("div",{key:"2b5c566e0cdd6f9fc99731170bd7c97ef37fee47",class:{"modal-overlay":this.showOverlay},onClick:this.onClickOverlay}),e("div",{key:"cae1cb0afe3cc10b60a603ab5345dd093ed483a2",class:"modal-container"},e("div",{key:"0b73f512fb4ca7927209c24dd74ab24210847e2b",class:"topbar",part:"topbar"},e("div",{key:"0ece5540a5268ffe57fa01f7c1ef587672ccd3e2",class:"title"},this.headerTitle),e("div",{key:"ee8399b651d4bc4547ef712ba8a7d00c45a749a0",class:"actions"},e("slot",{key:"745ecbf9dba308bb4998adbd2445321547a84d2e",name:"more-topbar-actions"}),this.showCloseButton&&e("div",{key:"32f83429f6f38cfe135e1f307a4df69bf825ffa1",class:"close-button",onClick:this.onClose},e("kv-icon",{key:"7b436b792ddf48ad2452e9166cc7756ddcdd8fbb",name:n.Close})))),e("div",{key:"fe7f9f3c1f1f661cf0674a5bf55479ad521b8e48",class:"content",part:"content"},e("slot",{key:"58a7df573f5e5343dee61a812ba076217761bbcb",name:"header"}),e("slot",{key:"ac641a97ac92b264ba34169c10c5bdd0a95941eb",name:"body"}),e("slot",{key:"ecb7cc859be32c76fcdd98f17c2deafb7a7cfe8f",name:"footer"}))))}};r.style={light:'@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)}',night:'@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)}'};export{r as kv_modal}