@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 11.3 kB
JavaScript
import{r as t,c as i,h as s,H as e}from"./p-D-JVwta2.js";import{a as h}from"./p-DzZLIMy0.js";import"./p-DwRzddFC.js";import"./p-DVds6a5Z.js";import{i as a,j as o,k as n}from"./p-CojoW2Y2.js";import{E as r}from"./p-SVedE_O8.js";import"./p-BcMhjKoS.js";import"./p-Do0EyoO8.js";import"./p-CBuzk8fR.js";import"./p-DHk26cGe.js";import"./p-7ioMFMb5.js";import{m as c,h as l,o as d,p,q as m,a as v}from"./p-CMC2Wc9b.js";import{b as f,c as u,d as b,D as k,a as g,e as x,C as D,f as y}from"./p-jTjLvKa0.js";import{b as j,c as C,d as M,i as w,g as T,a as I,e as z,f as A,h as B}from"./p-tZQNpICM.js";import{D as R}from"./p-BY-Rxx_4.js";import{i as O}from"./p-BA_npyc9.js";import"./p-BFTU3MAI.js";import"./p-CiDQ1Z66.js";import"./p-DfPM2t43.js";import"./p-Dkd2PDJ-.js";const F=class{constructor(s){var e;t(this,s),this.selectedDatesChange=i(this,"selectedDatesChange",7),this.backButtonClicked=i(this,"backButtonClicked",7),this.relativeTimeConfigReset=i(this,"relativeTimeConfigReset",7),this.relativeTimeConfigChange=i(this,"relativeTimeConfigChange",7),this.headerTitle=f,this.displayBackButton=!1,this.mode=a.Range,this.selectedDates=[],this.disabledDates=[],this.calendarInputMinDate=u,this.calendarInputMaxDate=b,this.fromInputValue="",this.toInputValue="",this.singleInputValue="",this.hoveredDate="",this.displayedMonth=null!==(e=c(this.initialDate))&&void 0!==e?e:c(new Date),this.fromInputFocused=!0,this.toInputFocused=!1,this.inputMode=o.Date,this.minDate="",this.maxDate="",this.setDateLimits=(t,i)=>{this.minDate=t,this.maxDate=i},this.setInputValues=(t,i)=>{this.fromInputValue=t,this.toInputValue=i},this.resetInputValues=()=>{this.fromInputValue="",this.toInputValue="",this.singleInputValue=""},this.resetDateLimits=()=>{this.minDate="",this.maxDate=""},this.emitSelectRangeDatesChangeEvent=(t,i)=>{const s=j(t,i);this.selectedDatesChange.emit({range:s})},this.handleBackClick=t=>{this.backButtonClicked.emit(t)},this.onClickDate=({detail:t})=>{var i;const s=t.date,e=l(s),h=d(s),o=C(e,this.calendarInputMinDate),n=M(e,this.calendarInputMaxDate);if(this.mode===a.Range){const[t,s]=null!==(i=this.selectedDates)&&void 0!==i?i:[];return t?p(e,t)?s?(this.resetInputValues(),this.resetDateLimits(),void this.emitSelectRangeDatesChangeEvent()):(this.setInputValues(o.format(k),n.format(k)),this.resetDateLimits(),void this.emitSelectRangeDatesChangeEvent(o,n)):void 0!==s?(this.displayedMonth=h,this.setInputValues(o.format(k),""),this.setDateLimits(h.format(g),""),void this.emitSelectRangeDatesChangeEvent(o)):m(e,t)?(this.displayedMonth=e,this.setInputValues(o.format(k),""),this.setDateLimits(o.format(g),""),void this.emitSelectRangeDatesChangeEvent(o)):(this.setInputValues(d(t).format(k),n.format(k)),this.resetDateLimits(),void this.emitSelectRangeDatesChangeEvent(l(t),n)):(this.displayedMonth=e.startOf("day"),this.setInputValues(o.format(k),""),this.setDateLimits(e.format(g),""),void this.emitSelectRangeDatesChangeEvent(o))}this.displayedMonth=e,this.singleInputValue=o.format(k),this.emitSelectRangeDatesChangeEvent(o)},this.handleClickBackMonth=()=>{this.displayedMonth=this.displayedMonth.subtract(1,"month"),O(this.relativeTimeConfig)||this.relativeTimeConfigReset.emit()},this.handleClickForwardMonth=()=>{this.displayedMonth=this.displayedMonth.add(1,"month"),O(this.relativeTimeConfig)||this.relativeTimeConfigReset.emit()},this.handleHoveredDateChange=t=>{this.mode===a.Range&&(this.hoveredDate=t.detail)},this.handleInputReset=()=>{this.resetInputValues(),this.inputMode=o.Date,this.relativeTimeConfigReset.emit()},this.handleOnFocusFromInput=()=>{this.toInputFocused=!1,this.fromInputFocused=!0;const t=v(this.fromInputValue,k),i=v(this.toInputValue,k);this.relativeTimeConfig?this.relativeTimeConfig.mode===o.Text?this.handleInputReset():(O(this.fromInputValue)||(this.displayedMonth=t),this.emitSelectRangeDatesChangeEvent(v(this.fromInputValue,k),v(this.toInputValue,k))):!O(this.fromInputValue)&&(i.diff(t,"month")>0||this.displayedMonth.diff(t,"month")>0)&&(this.displayedMonth=t)},this.handleOnFocusToInput=()=>{this.toInputFocused=!0,this.fromInputFocused=!1;const t=v(this.toInputValue,k),i=v(this.fromInputValue,k);this.relativeTimeConfig?this.relativeTimeConfig.mode===o.Text?this.handleInputReset():(!O(this.toInputValue)&&i.diff(t,"month")>0&&(this.displayedMonth=t.subtract(1,"month")),this.emitSelectRangeDatesChangeEvent(v(this.fromInputValue,k),v(this.toInputValue,k))):!O(this.toInputValue)&&(t.diff(i,"month")>0||this.displayedMonth.diff(t,"month")>0)&&(this.displayedMonth=t.subtract(1,"month"))},this.handleDateChange=(t,i)=>{const s=t.detail,e=v(s,x),h=v(s,k);i===n.Single?e.isValid()&&h.isValid()&&(this.singleInputValue=h.format(k),this.displayedMonth=e,this.emitSelectRangeDatesChangeEvent(h)):h.isValid()?i===n.From?this.handleFromInputDateChange(e,h):this.handleToInputDateChange(e,h):(O(this.fromInputValue)&&(this.minDate=""),O(this.toInputValue)&&(this.maxDate=""))},this.handleFromInputDateChange=(t,i)=>{this.fromInputValue=i.format(k),this.displayedMonth=t,O(this.toInputValue)?(this.emitSelectRangeDatesChangeEvent(i),this.toInputFocused=!0,this.minDate=t.format(g)):(this.emitSelectRangeDatesChangeEvent(i,v(this.toInputValue,k)),this.resetDateLimits())},this.handleToInputDateChange=(t,i)=>{this.toInputValue=i.format(k),this.displayedMonth=t.subtract(1,"month"),O(this.fromInputValue)?(this.maxDate=t.format(g),this.emitSelectRangeDatesChangeEvent(i),this.fromInputFocused=!0):(this.emitSelectRangeDatesChangeEvent(v(this.fromInputValue,k),i),this.resetDateLimits())},this.handleEndDateLostFocus=t=>{const i=t.detail,s=v(i,x),e=v(i,k);if(s.isValid()&&w(e)){const t=s.endOf("day").format(k);this.toInputValue=t,this.displayedMonth=s.subtract(1,"month"),O(this.fromInputValue)?(this.emitSelectRangeDatesChangeEvent(s.endOf("day")),this.fromInputFocused=!0):this.emitSelectRangeDatesChangeEvent(v(this.fromInputValue,k),s.endOf("day"))}},this.useInputMask=()=>this.inputMode===o.Date,this.getCalendarStringLimits=()=>({minDate:O(this.minDate)?v(this.calendarInputMinDate,k).format(R):this.minDate,maxDate:O(this.maxDate)?v(this.calendarInputMaxDate,k).format(R):this.maxDate}),this.getCalendarTimestampLimits=()=>({minDate:O(this.minDate)?v(this.calendarInputMinDate,k).valueOf():void 0,maxDate:O(this.maxDate)?v(this.calendarInputMaxDate,k).valueOf():void 0})}handleSelectedRangeDatesChange(t=[]){if(0===t.length)return this.resetInputValues(),void this.resetDateLimits();if(this.mode===a.Range){if(O(this.relativeTimeConfig)){const[i,s]=t,e=v(i,D).format(k),h=v(s,D).format(k);this.setInputValues(e,h)}}else{const[i]=t,s=v(i,D).format(k);this.singleInputValue=s}}handleRelativeTimeConfigInput(t){var i;if(O(t))return this.inputMode=o.Date,void(this.selectedDates&&0!==this.selectedDates.length||(this.setInputValues("",""),this.displayedMonth=c(new Date)));this.inputMode=t.mode,this.setInputValues(t.from,t.to);const[s]=null!==(i=this.selectedDates)&&void 0!==i?i:[],e=d(s);e.isValid()&&(this.displayedMonth=e)}render(){const t=T(this.displayedMonth),i=I(this.displayedMonth);return s(e,{key:"25e66a7babdc4feef5fd99969d1f135698752a44"},s("div",{key:"6fdc8c49640ce9efa33ac740da64487648762097",class:"absolute-time-picker-container"},this.displayBackButton&&s("div",{key:"a47537fad2669332373350101c208c4554152f36",class:"navigate-back",onClick:this.handleBackClick},s("kv-icon",{key:"ca2a47f5cbdccdf6c2f782b35c62e917ec3a9c1d",name:r.SlimRight,customClass:"rotate-180"}),s("div",{key:"b9d6b9d018a4b16175d7fd97a323e2deae4fa2b9",class:"back-text"},"Back")),s("div",{key:"60f81ab5cd34c78da812e7414e12db89b6a7a73d",class:"header"},s("div",{key:"7fec81a57a70cf9d21b714af99640b3c2a0103a5",class:"title"},this.headerTitle)),this.mode===a.Range?s("div",{class:"absolute-range-input"},s("kv-date-time-input",Object.assign({inputName:"from-input",useInputMask:this.useInputMask(),label:"From",value:this.fromInputValue,size:h.Small,placeholder:y,highlighted:O(this.fromInputValue)&&!this.toInputFocused,onTextChange:t=>this.handleDateChange(t,n.From),onInputFocus:this.handleOnFocusFromInput},z(this.error,this.getCalendarTimestampLimits()))),s("kv-date-time-input",Object.assign({inputName:"to-input",useInputMask:this.useInputMask(),label:"To",value:this.toInputValue,size:h.Small,placeholder:y,highlighted:O(this.toInputValue)&&!O(this.fromInputValue),onTextChange:t=>this.handleDateChange(t,n.To),onDateTimeBlur:this.handleEndDateLostFocus,onInputFocus:this.handleOnFocusToInput},A(this.error,this.getCalendarTimestampLimits())))):s("div",{class:"absolute-point-input"},s("kv-date-time-input",Object.assign({id:"single-date-input",useInputMask:!0,label:"Day & Hour",value:this.singleInputValue,size:h.Small,placeholder:y,onTextChange:t=>this.handleDateChange(t,n.Single)},B(this.error,this.getCalendarTimestampLimits())))),s("div",{key:"8ce1318dbbe6ca8d6671940b6796d937f8012321",class:"calendars"},s("kv-calendar",Object.assign({key:"c6a6567d84918b8412178a1d2e8af1915a7813c6",mode:this.mode,displayNextMonthArrow:!1,displayPreviousMonthArrow:!0,selectedDates:this.selectedDates,hoveredDate:this.hoveredDate,initialDate:t,disabledDates:this.disabledDates,onClickDate:this.onClickDate,onChangeMonth:this.handleClickBackMonth,onHoveredDateChange:this.handleHoveredDateChange},this.getCalendarStringLimits())),s("kv-calendar",Object.assign({key:"96576139143224ac533005be2fd94c369d7c7192",mode:this.mode,displayNextMonthArrow:!0,displayPreviousMonthArrow:!1,selectedDates:this.selectedDates,hoveredDate:this.hoveredDate,initialDate:i,disabledDates:this.disabledDates,onClickDate:this.onClickDate,onChangeMonth:this.handleClickForwardMonth,onHoveredDateChange:this.handleHoveredDateChange},this.getCalendarStringLimits())))))}static get watchers(){return{selectedDates:["handleSelectedRangeDatesChange"],relativeTimeConfig:["handleRelativeTimeConfigInput"]}}};F.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}.absolute-time-picker-container{display:flex;flex-direction:column;gap:var(--kv-spacing-3x, 12px);background-color:var(--kv-neutral-7, #2a2a2a);padding:var(--kv-spacing-4x, 16px);border-radius:4px;width:fit-content}.absolute-time-picker-container .navigate-back{display:flex;gap:var(--kv-spacing, 4px);align-items:center;cursor:pointer;width:fit-content}.absolute-time-picker-container .navigate-back kv-icon{--icon-color:var(--kv-neutral-4, #bebebe)}.absolute-time-picker-container .navigate-back .back-text{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;text-transform:none;color:var(--kv-neutral-4, #bebebe);user-select:none}.absolute-time-picker-container .header .title{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:16px;font-weight:600;font-stretch:normal;font-style:normal;line-height:24px;letter-spacing:normal;text-transform:none;color:var(--kv-neutral-2, #e5e5e5)}.absolute-time-picker-container .absolute-range-input{display:flex;gap:var(--kv-spacing-6x, 24px)}.absolute-time-picker-container .absolute-range-input kv-date-time-input{width:196px}.absolute-time-picker-container .absolute-point-input{width:100%}.absolute-time-picker-container .calendars{display:flex;gap:var(--kv-spacing-6x, 24px)}';export{F as kv_absolute_time_picker}