@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 10.7 kB
JavaScript
import{r as t,c as i,h as s,H as e}from"./p-WTwLUJcM.js";import{f as h,g as a,h as n,c as o,j as r,o as c}from"./p-COrzvkrr.js";import{i as d,j as l,E as p,A as u,x as m,H as v}from"./p-BS8xGxWJ.js";import{b as f,c as b,d as g,D as k,a as x,e as y,C as D,f as C}from"./p-jTjLvKa0.js";import{b as j,c as w,d as T,i as M,g as I,a as z,e as B,f as O,h as R}from"./p-D-mMcu3l.js";import{D as A}from"./p-BY-Rxx_4.js";import{i as H}from"./p-GpUjqmUL.js";import"./p-B85MJLTf.js";import"./p-Dkd2PDJ-.js";const N=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=h.Range,this.selectedDates=[],this.disabledDates=[],this.calendarInputMinDate=b,this.calendarInputMaxDate=g,this.fromInputValue="",this.toInputValue="",this.singleInputValue="",this.hoveredDate="",this.displayedMonth=null!==(e=d(this.initialDate))&&void 0!==e?e:d(new Date),this.fromInputFocused=!0,this.toInputFocused=!1,this.inputMode=a.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),a=p(s),n=w(e,this.calendarInputMinDate),o=T(e,this.calendarInputMaxDate);if(this.mode===h.Range){const[t,s]=null!==(i=this.selectedDates)&&void 0!==i?i:[];return t?u(e,t)?s?(this.resetInputValues(),this.resetDateLimits(),void this.emitSelectRangeDatesChangeEvent()):(this.setInputValues(n.format(k),o.format(k)),this.resetDateLimits(),void this.emitSelectRangeDatesChangeEvent(n,o)):void 0!==s?(this.displayedMonth=a,this.setInputValues(n.format(k),""),this.setDateLimits(a.format(x),""),void this.emitSelectRangeDatesChangeEvent(n)):m(e,t)?(this.displayedMonth=e,this.setInputValues(n.format(k),""),this.setDateLimits(n.format(x),""),void this.emitSelectRangeDatesChangeEvent(n)):(this.setInputValues(p(t).format(k),o.format(k)),this.resetDateLimits(),void this.emitSelectRangeDatesChangeEvent(l(t),o)):(this.displayedMonth=e.startOf("day"),this.setInputValues(n.format(k),""),this.setDateLimits(e.format(x),""),void this.emitSelectRangeDatesChangeEvent(n))}this.displayedMonth=e,this.singleInputValue=n.format(k),this.emitSelectRangeDatesChangeEvent(n)},this.handleClickBackMonth=()=>{this.displayedMonth=this.displayedMonth.subtract(1,"month"),H(this.relativeTimeConfig)||this.relativeTimeConfigReset.emit()},this.handleClickForwardMonth=()=>{this.displayedMonth=this.displayedMonth.add(1,"month"),H(this.relativeTimeConfig)||this.relativeTimeConfigReset.emit()},this.handleHoveredDateChange=t=>{this.mode===h.Range&&(this.hoveredDate=t.detail)},this.handleInputReset=()=>{this.resetInputValues(),this.inputMode=a.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===a.Text?this.handleInputReset():(H(this.fromInputValue)||(this.displayedMonth=t),this.emitSelectRangeDatesChangeEvent(v(this.fromInputValue,k),v(this.toInputValue,k))):!H(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===a.Text?this.handleInputReset():(!H(this.toInputValue)&&i.diff(t,"month")>0&&(this.displayedMonth=t.subtract(1,"month")),this.emitSelectRangeDatesChangeEvent(v(this.fromInputValue,k),v(this.toInputValue,k))):!H(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,y),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):(H(this.fromInputValue)&&(this.minDate=""),H(this.toInputValue)&&(this.maxDate=""))},this.handleFromInputDateChange=(t,i)=>{this.fromInputValue=i.format(k),this.displayedMonth=t,H(this.toInputValue)?(this.emitSelectRangeDatesChangeEvent(i),this.toInputFocused=!0,this.minDate=t.format(x)):(this.emitSelectRangeDatesChangeEvent(i,v(this.toInputValue,k)),this.resetDateLimits())},this.handleToInputDateChange=(t,i)=>{this.toInputValue=i.format(k),this.displayedMonth=t.subtract(1,"month"),H(this.fromInputValue)?(this.maxDate=t.format(x),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,y),e=v(i,k);if(s.isValid()&&M(e)){const t=s.endOf("day").format(k);this.toInputValue=t,this.displayedMonth=s.subtract(1,"month"),H(this.fromInputValue)?(this.emitSelectRangeDatesChangeEvent(s.endOf("day")),this.fromInputFocused=!0):this.emitSelectRangeDatesChangeEvent(v(this.fromInputValue,k),s.endOf("day"))}},this.useInputMask=()=>this.inputMode===a.Date,this.getCalendarStringLimits=()=>({minDate:H(this.minDate)?v(this.calendarInputMinDate,k).format(A):this.minDate,maxDate:H(this.maxDate)?v(this.calendarInputMaxDate,k).format(A):this.maxDate}),this.getCalendarTimestampLimits=()=>({minDate:H(this.minDate)?v(this.calendarInputMinDate,k).valueOf():void 0,maxDate:H(this.maxDate)?v(this.calendarInputMaxDate,k).valueOf():void 0})}handleSelectedRangeDatesChange(t=[]){if(0===t.length)return this.resetInputValues(),void this.resetDateLimits();if(this.mode===h.Range){if(H(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(H(t))return this.inputMode=a.Date,void(this.selectedDates&&0!==this.selectedDates.length||(this.setInputValues("",""),this.displayedMonth=d(new Date)));this.inputMode=t.mode,this.setInputValues(t.from,t.to);const[s]=null!==(i=this.selectedDates)&&void 0!==i?i:[],e=p(s);e.isValid()&&(this.displayedMonth=e)}render(){const t=I(this.displayedMonth),i=z(this.displayedMonth);return s(e,{key:"0e3d605bcf63fd0051c31d97e5d86b336041b6e9"},s("div",{key:"9442479afb6635af2aee2d11e49ceff43a923524",class:"absolute-time-picker-container"},this.displayBackButton&&s("div",{key:"021c0b6977bd68e8533063f64662610ee0b9d061",class:"navigate-back",onClick:this.handleBackClick},s("kv-action-button-text",{key:"4d0ab36df56ef43ef1cefa66595e7dbcf6ba61dd",text:"Back",icon:c.SlimRight,type:r.Text,size:o.Small})),this.headerTitle&&s("div",{key:"9267d91699a5d825395589644ce193ec554aea16",class:"header"},s("div",{key:"9c6c2666df41b718fa80fe315386a51039e1397a",class:"title"},this.headerTitle)),this.mode===h.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:o.Small,placeholder:C,highlighted:H(this.fromInputValue)&&!this.toInputFocused,onTextChange:t=>this.handleDateChange(t,n.From),onInputFocus:this.handleOnFocusFromInput},B(this.error,this.getCalendarTimestampLimits()))),s("kv-date-time-input",Object.assign({inputName:"to-input",useInputMask:this.useInputMask(),label:"To",value:this.toInputValue,size:o.Small,placeholder:C,highlighted:H(this.toInputValue)&&!H(this.fromInputValue),onTextChange:t=>this.handleDateChange(t,n.To),onDateTimeBlur:this.handleEndDateLostFocus,onInputFocus:this.handleOnFocusToInput},O(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:o.Small,placeholder:C,onTextChange:t=>this.handleDateChange(t,n.Single)},R(this.error,this.getCalendarTimestampLimits())))),s("div",{key:"3ea2252c5974867e2010741412c3c71bcaf1ef23",class:"calendars"},s("kv-calendar",Object.assign({key:"769e1ac0a896e81b072907c3e79d9b6b265817f7",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:"04f44676e38e0cf3ca377325c1f540c3e32c3270",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"]}}};N.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}.absolute-time-picker-container{display:flex;flex-direction:column;gap:var(--spacing-xl);padding:var(--spacing-2xl);border-radius:var(--radius-md);width:fit-content}.absolute-time-picker-container .navigate-back{display:flex;height:16px}.absolute-time-picker-container .navigate-back kv-action-button-text::part(button){width:57px}.absolute-time-picker-container .navigate-back kv-action-button-text::part(icon){transform:rotate(180deg)}.absolute-time-picker-container .header .title{font-family:Proxima Nova;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0;color:var(--text-surface-neutral-secondary)}.absolute-time-picker-container .absolute-range-input{display:flex;gap:var(--spacing-4xl)}.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(--spacing-4xl)}';export{N as kv_absolute_time_picker}