@kodaris/krubble-components 1.0.67 → 1.0.69

package/dist/krubble-components.umd.min.js

@@ -845,11 +845,11 @@ const ze="important",Oe=" !"+ze,De=xe(class extends ke{constructor(e){if(super(e
       gap: 12px;
       justify-content: flex-end;
     }
-  `,Ie=Ke([he("kr-dialog-footer")],Ie);class qe{constructor(){this._resolvePromise=null,this._dialogElement=null,this._promise=new Promise((e=>{this._resolvePromise=e}))}setDialogElement(e){this._dialogElement=e}close(e){this._resolvePromise&&(this._resolvePromise(e),this._resolvePromise=null),this._dialogElement?.remove()}afterClosed(){return this._promise}}e.KRDialog=class extends le{constructor(){super(...arguments),this._dialogRef=null,this._contentElement=null,this.opened=!1,this.label="",this.width="560px",this._handleDocumentKeyDown=e=>{"Escape"===e.key&&this.close()}}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this._handleDocumentKeyDown)}updated(e){super.updated(e),e.has("opened")&&(this.opened?document.addEventListener("keydown",this._handleDocumentKeyDown):document.removeEventListener("keydown",this._handleDocumentKeyDown))}open(){this.opened=!0}close(){this._dialogRef?this._dialogRef.close(void 0):(this.opened=!1,this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0})))}static open(e,t){document.querySelectorAll("kr-dialog").forEach((e=>{e._dialogRef&&e.remove()}));const i=new qe,o=document.createElement("kr-dialog");i.setDialogElement(o),o._dialogRef=i;const s=new e;return s.dialogRef=i,t?.data&&(s.data=t.data),t?.label&&(o.label=t.label),t?.width&&(o.width=t.width),o._contentElement=s,o.opened=!0,document.body.appendChild(o),i}_handleBackdropClick(e){e.target.classList.contains("backdrop")&&this.close()}render(){return F`
+  `,Ie=Ke([he("kr-dialog-footer")],Ie);class qe{constructor(){this._resolvePromise=null,this._dialogElement=null,this._promise=new Promise((e=>{this._resolvePromise=e}))}setDialogElement(e){this._dialogElement=e}close(e){this._resolvePromise&&(this._resolvePromise(e),this._resolvePromise=null),this._dialogElement?.remove()}afterClosed(){return this._promise}}e.KRDialog=class extends le{constructor(){super(...arguments),this._dialogRef=null,this._contentElement=null,this.opened=!1,this.label="",this.width="560px",this._handleDocumentKeyDown=e=>{"Escape"===e.key&&this.close()}}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this._handleDocumentKeyDown)}updated(e){super.updated(e),e.has("opened")&&(this.opened?document.addEventListener("keydown",this._handleDocumentKeyDown):document.removeEventListener("keydown",this._handleDocumentKeyDown))}open(){this.opened=!0,console.log("opened")}close(){this._dialogRef?this._dialogRef.close(void 0):(this.opened=!1,this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0})))}static open(e,t){document.querySelectorAll("kr-dialog").forEach((e=>{e._dialogRef&&e.remove()}));const i=new qe,o=document.createElement("kr-dialog");i.setDialogElement(o),o._dialogRef=i;const s=new e;return s.dialogRef=i,t?.data&&(s.data=t.data),t?.label&&(o.label=t.label),t?.width&&(o.width=t.width),o._contentElement=s,o.opened=!0,document.body.appendChild(o),i}_handleBackdropClick(e){e.target.classList.contains("backdrop")&&this.close()}render(){return F`
       <div class="backdrop" @click=${this._handleBackdropClick}></div>
       <div class="dialog" style=${De({width:this.width})}>
         ${this.label?F`<div class="dialog__header"><div class="dialog__header-label">${this.label}</div></div>`:""}
-        ${this._contentElement?this._contentElement:F`<slot></slot>`}
+        <div class="dialog__body">${this._contentElement?this._contentElement:F`<slot></slot>`}</div>
       </div>
     `}},e.KRDialog.styles=a`
     :host {
@@ -877,6 +877,7 @@ const ze="important",Oe=" !"+ze,De=xe(class extends ke{constructor(e){if(super(e
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 12px;
       box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
+      height: 100%;
       max-height: 90vh;
       overflow: hidden;
       display: flex;
@@ -909,6 +910,13 @@ const ze="important",Oe=" !"+ze,De=xe(class extends ke{constructor(e){if(super(e
       font-size: 18px;
       font-weight: 600;
     }
+
+    .dialog__body {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+    }
   `,Ke([fe()],e.KRDialog.prototype,"_contentElement",void 0),Ke([ue({type:Boolean,reflect:!0})],e.KRDialog.prototype,"opened",void 0),Ke([ue({type:String})],e.KRDialog.prototype,"label",void 0),Ke([ue({type:String})],e.KRDialog.prototype,"width",void 0),e.KRDialog=Ke([he("kr-dialog")],e.KRDialog);var Le=function(e,t,i,o){var s,r=arguments.length,a=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(a=(r<3?s(a):r>3?s(t,i,a):s(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};e.KRDateRangePicker=class extends le{constructor(){super(...arguments),this.relativeOptions=[{key:"last-5-minutes",amount:5,unit:"minute",type:"relative"},{key:"last-30-minutes",amount:30,unit:"minute",type:"relative"},{key:"last-1-hour",amount:1,unit:"hour",type:"relative"},{key:"last-6-hours",amount:6,unit:"hour",type:"relative"},{key:"last-1-day",amount:1,unit:"day",type:"relative"},{key:"last-7-days",amount:7,unit:"day",type:"relative"},{key:"last-30-days",amount:30,unit:"day",type:"relative"}],this.disabled=!1,this.invalid=!1,this.placeholder="Select a date range",this.startDate="",this.endDate="",this._isOpen=!1,this._activeTab="relative",this._tempStartDate="",this._tempEndDate="",this._handleClickOutside=e=>{e.composedPath().includes(this)||(this._isOpen=!1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleClickOutside),this.startDate&&(this._tempStartDate=this.startDate),this.endDate&&(this._tempEndDate=this.endDate),"relative"===this.mode?this._activeTab="relative":"absolute"===this.mode&&(this._activeTab="absolute")}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleClickOutside)}_handleTriggerClick(){this.disabled||(this._isOpen=!this._isOpen)}_handleTabClick(e){this._activeTab=e}_handleRelativeSelect(e){this.value={type:"relative",amount:e.amount,unit:e.unit},this._isOpen=!1,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))}_handleApplyAbsolute(){this._tempStartDate&&this._tempEndDate&&(this._tempStartDate>=this._tempEndDate||(this.value={type:"absolute",startDate:this._tempStartDate,endDate:this._tempEndDate},this.startDate=this._tempStartDate,this.endDate=this._tempEndDate,this._isOpen=!1,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))))}_handleCancel(){this._isOpen=!1,this._tempStartDate=this.startDate,this._tempEndDate=this.endDate}_formatRelativeOption(e){if(0===e.amount)return"day"===e.unit?"Today":`This ${e.unit}`;const t={second:1===e.amount?"second":"seconds",minute:1===e.amount?"minute":"minutes",hour:1===e.amount?"hour":"hours",day:1===e.amount?"day":"days",week:1===e.amount?"week":"weeks",month:1===e.amount?"month":"months",year:1===e.amount?"year":"years"};return`Last ${e.amount} ${t[e.unit]}`}_getDisplayValue(){return this.value?"relative"===this.value.type&&void 0!==this.value.amount&&this.value.unit?this._formatRelativeOption({key:"",amount:this.value.amount,unit:this.value.unit,type:"relative"}):"absolute"===this.value.type&&this.value.startDate&&this.value.endDate?`${this.value.startDate} - ${this.value.endDate}`:"":""}_renderTriggerText(){const e=this._getDisplayValue();return e?F`${e}`:F`<span class="trigger-placeholder">${this.placeholder}</span>`}_renderContent(){return"relative"===this.mode?this._renderRelativeContent():"absolute"===this.mode?this._renderAbsoluteContent():"relative"===this._activeTab?this._renderRelativeContent():this._renderAbsoluteContent()}_renderRelativeContent(){return F`
       <div class="relative-options">
         ${this.relativeOptions.map((e=>F`