@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 9.27 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{b as o,i as a,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{E as d}from"./p-AOocjcjw.js";import{a as l,f as c,h as p}from"./p-CMC2Wc9b.js";import{g as m,a as u}from"./p-tZQNpICM.js";import{i as v}from"./p-BA_npyc9.js";import{i as f}from"./p-C9bG1i86.js";import"./p-BFTU3MAI.js";import"./p-jTjLvKa0.js";import"./p-CiDQ1Z66.js";import"./p-DfPM2t43.js";import"./p-Dkd2PDJ-.js";const b={label:"Change On",required:!0,state:o.None,size:h.Large,leftIcon:r.Calendar},j={label:"Revert On",required:!0,state:o.None,size:h.Large},g="dd-mm-yyyy HH:MM",y="dd-mm-yyyy 00:00",k="Pick date & time",D="DD-MM-YYYY HH:mm",C="YYYY-MM-DD",M=(t,i)=>v(t)?"":l(t[0]).tz(i).format(D),O=(t,i)=>{if(v(t))return{from:"",to:""};const[s,e]=t;return{from:f(s)?l(s).tz(i).format(D):"",to:f(e)?l(e).tz(i).format(D):""}},x=t=>v(t)?[]:[l(t,D).format(C)],w=t=>{const i=null==t?void 0:t.from,s=null==t?void 0:t.to;return v(i)&&v(s)?[]:v(i)&&!v(s)?[l(s,D).format(C)]:!v(i)&&v(s)?[l(i,D).format(C)]:[l(i,D).format(C),l(s,D).format(C)]},I=class{constructor(s){t(this,s),this.selectedTimeChange=i(this,"selectedTimeChange",7),this.dropdownStateChange=i(this,"dropdownStateChange",7),this.timezone=c(),this.mode=a.Range,this.isDropdownOpen=!1,this.disabled=!1,this.singleTimeInputValue="",this.displayedMonth=f(this.initialDate)?l(this.initialDate):l(),this.hoveredDate="",this.handleInputFocus=t=>{this.focusedInput=t,this.isDropdownOpen||(this.isDropdownOpen=!0,this.dropdownStateChange.emit(this.isDropdownOpen))},this.getValidSelectedRangeFromUserClick=t=>{var i,s,e,h;return this.focusedInput===n.From?f(this.minimumFromInputDate)&&t.isBefore(this.minimumFromInputDate)?Object.assign(Object.assign({},this.rangeInputValues),{from:l(this.minimumFromInputDate).format(D)}):!v(null===(i=this.rangeInputValues)||void 0===i?void 0:i.to)&&l(null===(s=this.rangeInputValues)||void 0===s?void 0:s.to,D).isBefore(t)?{from:t.format(D),to:t.format(D)}:Object.assign(Object.assign({},this.rangeInputValues),{from:t.format(D)}):f(this.minimumToInputDate)&&t.isBefore(this.minimumToInputDate)?Object.assign(Object.assign({},this.rangeInputValues),{to:l(this.minimumToInputDate).format(D)}):!v(null===(e=this.rangeInputValues)||void 0===e?void 0:e.from)&&l(null===(h=this.rangeInputValues)||void 0===h?void 0:h.from,D).isAfter(t)?{from:t.format(D),to:t.format(D)}:Object.assign(Object.assign({},this.rangeInputValues),{to:t.format(D)})},this.onClickDate=({detail:t})=>{var i,s;let e=p(t.date);if(this.mode===a.Single)return f(this.minimumSingleInputDate)&&l(e).isBefore(this.minimumSingleInputDate)&&(e=l(this.minimumSingleInputDate)),void(this.singleTimeInputValue=e.format(D));const h=this.getValidSelectedRangeFromUserClick(e);this.rangeInputValues=h,this.focusedInput===n.From&&v(null===(i=this.rangeInputValues)||void 0===i?void 0:i.to)&&(this.focusedInput=n.To),this.focusedInput===n.To&&v(null===(s=this.rangeInputValues)||void 0===s?void 0:s.from)&&(this.focusedInput=n.From)},this.handleEmptyTextChange=()=>{this.mode===a.Single?this.singleTimeInputValue="":this.rangeInputValues=Object.assign(Object.assign({},this.rangeInputValues),this.focusedInput===n.From?{from:""}:{to:""})},this.hanleOnTextChange=t=>{const i=l(t.detail,D);if(v(t.detail))this.handleEmptyTextChange();else if(i.isValid()){if(this.mode===a.Single)return this.singleTimeInputValue=i.format(D),void(this.displayedMonth=i);this.rangeInputValues=Object.assign(Object.assign({},this.rangeInputValues),this.focusedInput===n.From?{from:i.format(D)}:{to:i.format(D)}),this.displayedMonth=i}},this.handleClickBackMonth=()=>{this.displayedMonth=this.displayedMonth.subtract(1,"month")},this.handleClickForwardMonth=()=>{this.displayedMonth=this.displayedMonth.add(1,"month")},this.handleHoveredDateChange=t=>{this.mode===a.Range&&(this.hoveredDate=t.detail)},this.handleCloseDropdown=()=>{var t,i;this.isDropdownOpen=!1,this.focusedInput=null,this.mode===a.Single?v(this.singleTimeInputValue)?this.syncSelectedTimeState(this.selectedTime):this.selectedTimeChange.emit([l(this.singleTimeInputValue,D).tz(this.timezone.name,!0).valueOf()]):v(null===(t=this.rangeInputValues)||void 0===t?void 0:t.from)||v(null===(i=this.rangeInputValues)||void 0===i?void 0:i.to)?this.syncSelectedTimeState(this.selectedTime):this.selectedTimeChange.emit([l(this.rangeInputValues.from,D).tz(this.timezone.name,!0).valueOf(),l(this.rangeInputValues.to,D).tz(this.timezone.name,!0).valueOf()]),this.dropdownStateChange.emit(this.isDropdownOpen)},this.handleDropdownArrowClick=()=>{this.isDropdownOpen?this.handleCloseDropdown():(this.isDropdownOpen=!0,this.focusedInput=this.mode===a.Single?n.Single:n.To,this.dropdownStateChange.emit(this.isDropdownOpen))},this.isHoveringStylingActive=()=>{var t,i;return!v(null===(t=this.rangeInputValues)||void 0===t?void 0:t.from)&&this.focusedInput===n.To||!v(null===(i=this.rangeInputValues)||void 0===i?void 0:i.to)&&this.focusedInput===n.From},this.getMinimumCalendarDate=()=>this.mode===a.Single?f(this.minimumSingleInputDate)&&l(this.minimumSingleInputDate).format(C):f(this.minimumFromInputDate)&&l(this.minimumFromInputDate).format(C),this.getSelectedCalendarDates=()=>(this.mode===a.Single?x(this.singleTimeInputValue):w(this.rangeInputValues))||(this.selectedTime?this.mode===a.Single?x(M(this.selectedTime,this.timezone.name)):w(O(this.selectedTime,this.timezone.name)):[])}componentWillLoad(){this.syncSelectedTimeState(this.selectedTime)}handleSelectedTimeChange(t){this.syncSelectedTimeState(t)}syncSelectedTimeState(t){this.mode===a.Single?this.singleTimeInputValue=M(t,this.timezone.name):this.rangeInputValues=O(t,this.timezone.name)}render(){var t,i;const h=m(this.displayedMonth),o=u(this.displayedMonth),l=this.getSelectedCalendarDates(),c=this.focusedInput===n.From,p=this.focusedInput===n.To,v=this.focusedInput===n.Single,f=this.isHoveringStylingActive(),D=this.getMinimumCalendarDate();return s(e,{key:"d022b0082105162fd2cf7e9482c9d5a5f405b8ea"},s("kv-dropdown-base",{key:"3cbbdadc22ecfe7c25dc0725b2f904f3da89c458",isOpen:this.isDropdownOpen,onClickOutside:this.handleCloseDropdown},s("slot",{key:"9364eeeea27305f426fc619b8d5c49f7d1e104b6",name:"dropdown-action",slot:"action"},this.mode===a.Range?s("div",{class:"time-range-input-container"},s("kv-date-time-input",Object.assign({disabled:this.disabled,inputStyleType:d.MergedLeft,value:null===(t=this.rangeInputValues)||void 0===t?void 0:t.from,dateFormat:g,placeholder:c?y:k,useInputMask:c,onInputFocus:()=>this.handleInputFocus(n.From),forcedFocus:this.focusedInput===n.From&&this.isDropdownOpen,onTextChange:this.hanleOnTextChange},b)),s("kv-date-time-input",Object.assign({disabled:this.disabled,inputStyleType:d.MergedRight,value:null===(i=this.rangeInputValues)||void 0===i?void 0:i.to,dateFormat:g,placeholder:p?y:k,useInputMask:p,onInputFocus:()=>this.handleInputFocus(n.To),forcedFocus:this.focusedInput===n.To&&this.isDropdownOpen,rightIcon:this.isDropdownOpen?r.ArrowDropUp:r.ArrowDropDown,onTextChange:this.hanleOnTextChange,onRightIconClick:this.handleDropdownArrowClick},j))):s("div",{class:"single-input-container"},s("kv-date-time-input",Object.assign({disabled:this.disabled,value:this.singleTimeInputValue,dateFormat:g,placeholder:v?y:k,useInputMask:v,forcedFocus:this.focusedInput===n.Single&&this.isDropdownOpen,onInputFocus:()=>this.handleInputFocus(n.Single),inputStyleType:d.Separated,rightIcon:this.isDropdownOpen?r.ArrowDropUp:r.ArrowDropDown,onTextChange:this.hanleOnTextChange,onRightIconClick:this.handleDropdownArrowClick},b)))),s("div",{key:"8bd27d7b4efa9ff75ad5764685f9f5e89f6de682",slot:"list"},s("div",{key:"ac42692d4a023c4a62aecac88359b7b8aaa3fadb",class:"calendar-container"},s("kv-calendar",{key:"7d73f1c25498556a361140bae8d7f5f7d8243788",mode:this.mode,displayNextMonthArrow:!1,displayPreviousMonthArrow:!0,selectedDates:l,hoveredDate:this.hoveredDate,onHoveredDateChange:this.handleHoveredDateChange,disableHoveringStyling:!f,initialDate:h,onChangeMonth:this.handleClickBackMonth,onClickDate:this.onClickDate,minDate:D}),s("kv-calendar",{key:"fa9ab39d1c542dfede4741f9fcc2d3a5c6fce983",mode:this.mode,displayNextMonthArrow:!0,displayPreviousMonthArrow:!1,selectedDates:l,hoveredDate:this.hoveredDate,onHoveredDateChange:this.handleHoveredDateChange,disableHoveringStyling:!f,initialDate:o,onChangeMonth:this.handleClickForwardMonth,onClickDate:this.onClickDate,minDate:D})))))}static get watchers(){return{selectedTime:["handleSelectedTimeChange"]}}};I.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}.time-range-input-container{display:flex;border-radius:4px;width:100%;align-items:flex-end}.time-range-input-container kv-date-time-input{width:50%}.single-input-container{border-radius:4px}.calendar-container{display:flex;gap:var(--kv-spacing-5x, 20px);border-radius:4px;border:1px solid var(--kv-neutral-6, #3f3f3f);background:var(--kv-neutral-7, #2a2a2a);padding:var(--kv-spacing-5x, 20px)}';export{I as kv_absolute_time_picker_dropdown_input}