@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 9.07 kB
JavaScript
import{r as t,c as i,h as s,H as e}from"./p-WTwLUJcM.js";import{o as h,c as o,w as a,f as n,h as d,n as r}from"./p-COrzvkrr.js";import{H as l,o as c,j as u}from"./p-BS8xGxWJ.js";import{g as v,a as p}from"./p-D-mMcu3l.js";import{i as m}from"./p-GpUjqmUL.js";import{i as b}from"./p-C9bG1i86.js";import"./p-B85MJLTf.js";import"./p-jTjLvKa0.js";import"./p-Dkd2PDJ-.js";const f={label:"Change On",required:!0,state:a.None,size:o.Large,leftIcon:h.Calendar},g={label:"Revert On",required:!0,state:a.None,size:o.Large},y="dd-mm-yyyy HH:MM",k="dd-mm-yyyy 00:00",j="Pick date & time",O="DD-MM-YYYY HH:mm",C="YYYY-MM-DD",D=(t,i)=>m(t)?"":l(t[0]).tz(i).format(O),M=(t,i)=>{if(m(t))return{from:"",to:""};const[s,e]=t;return{from:b(s)?l(s).tz(i).format(O):"",to:b(e)?l(e).tz(i).format(O):""}},x=t=>m(t)?[]:[l(t,O).format(C)],w=t=>{const i=null==t?void 0:t.from,s=null==t?void 0:t.to;return m(i)&&m(s)?[]:m(i)&&!m(s)?[l(s,O).format(C)]:!m(i)&&m(s)?[l(i,O).format(C)]:[l(i,O).format(C),l(s,O).format(C)]},T=class{constructor(s){t(this,s),this.selectedTimeChange=i(this,"selectedTimeChange",7),this.dropdownStateChange=i(this,"dropdownStateChange",7),this.timezone=c(),this.mode=n.Range,this.isDropdownOpen=!1,this.disabled=!1,this.singleTimeInputValue="",this.displayedMonth=b(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===d.From?b(this.minimumFromInputDate)&&t.isBefore(this.minimumFromInputDate)?Object.assign(Object.assign({},this.rangeInputValues),{from:l(this.minimumFromInputDate).format(O)}):!m(null===(i=this.rangeInputValues)||void 0===i?void 0:i.to)&&l(null===(s=this.rangeInputValues)||void 0===s?void 0:s.to,O).isBefore(t)?{from:t.format(O),to:t.format(O)}:Object.assign(Object.assign({},this.rangeInputValues),{from:t.format(O)}):b(this.minimumToInputDate)&&t.isBefore(this.minimumToInputDate)?Object.assign(Object.assign({},this.rangeInputValues),{to:l(this.minimumToInputDate).format(O)}):!m(null===(e=this.rangeInputValues)||void 0===e?void 0:e.from)&&l(null===(h=this.rangeInputValues)||void 0===h?void 0:h.from,O).isAfter(t)?{from:t.format(O),to:t.format(O)}:Object.assign(Object.assign({},this.rangeInputValues),{to:t.format(O)})},this.onClickDate=({detail:t})=>{var i,s;let e=u(t.date);if(this.mode===n.Single)return b(this.minimumSingleInputDate)&&l(e).isBefore(this.minimumSingleInputDate)&&(e=l(this.minimumSingleInputDate)),void(this.singleTimeInputValue=e.format(O));const h=this.getValidSelectedRangeFromUserClick(e);this.rangeInputValues=h,this.focusedInput===d.From&&m(null===(i=this.rangeInputValues)||void 0===i?void 0:i.to)&&(this.focusedInput=d.To),this.focusedInput===d.To&&m(null===(s=this.rangeInputValues)||void 0===s?void 0:s.from)&&(this.focusedInput=d.From)},this.handleEmptyTextChange=()=>{this.mode===n.Single?this.singleTimeInputValue="":this.rangeInputValues=Object.assign(Object.assign({},this.rangeInputValues),this.focusedInput===d.From?{from:""}:{to:""})},this.hanleOnTextChange=t=>{const i=l(t.detail,O);if(m(t.detail))this.handleEmptyTextChange();else if(i.isValid()){if(this.mode===n.Single)return this.singleTimeInputValue=i.format(O),void(this.displayedMonth=i);this.rangeInputValues=Object.assign(Object.assign({},this.rangeInputValues),this.focusedInput===d.From?{from:i.format(O)}:{to:i.format(O)}),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===n.Range&&(this.hoveredDate=t.detail)},this.handleCloseDropdown=()=>{var t,i;this.isDropdownOpen=!1,this.focusedInput=null,this.mode===n.Single?m(this.singleTimeInputValue)?this.syncSelectedTimeState(this.selectedTime):this.selectedTimeChange.emit([l(this.singleTimeInputValue,O).tz(this.timezone.name,!0).valueOf()]):m(null===(t=this.rangeInputValues)||void 0===t?void 0:t.from)||m(null===(i=this.rangeInputValues)||void 0===i?void 0:i.to)?this.syncSelectedTimeState(this.selectedTime):this.selectedTimeChange.emit([l(this.rangeInputValues.from,O).tz(this.timezone.name,!0).valueOf(),l(this.rangeInputValues.to,O).tz(this.timezone.name,!0).valueOf()]),this.dropdownStateChange.emit(this.isDropdownOpen)},this.handleDropdownArrowClick=()=>{this.isDropdownOpen?this.handleCloseDropdown():(this.isDropdownOpen=!0,this.focusedInput=this.mode===n.Single?d.Single:d.To,this.dropdownStateChange.emit(this.isDropdownOpen))},this.isHoveringStylingActive=()=>{var t,i;return!m(null===(t=this.rangeInputValues)||void 0===t?void 0:t.from)&&this.focusedInput===d.To||!m(null===(i=this.rangeInputValues)||void 0===i?void 0:i.to)&&this.focusedInput===d.From},this.getMinimumCalendarDate=()=>this.mode===n.Single?b(this.minimumSingleInputDate)&&l(this.minimumSingleInputDate).format(C):b(this.minimumFromInputDate)&&l(this.minimumFromInputDate).format(C),this.getSelectedCalendarDates=()=>(this.mode===n.Single?x(this.singleTimeInputValue):w(this.rangeInputValues))||(this.selectedTime?this.mode===n.Single?x(D(this.selectedTime,this.timezone.name)):w(M(this.selectedTime,this.timezone.name)):[])}componentWillLoad(){this.syncSelectedTimeState(this.selectedTime)}handleSelectedTimeChange(t){this.syncSelectedTimeState(t)}syncSelectedTimeState(t){this.mode===n.Single?this.singleTimeInputValue=D(t,this.timezone.name):this.rangeInputValues=M(t,this.timezone.name)}render(){var t,i;const o=v(this.displayedMonth),a=p(this.displayedMonth),l=this.getSelectedCalendarDates(),c=this.focusedInput===d.From,u=this.focusedInput===d.To,m=this.focusedInput===d.Single,b=this.isHoveringStylingActive(),O=this.getMinimumCalendarDate();return s(e,{key:"2460d2e8ab558c6d64e6b4148d232e374f50a235"},s("kv-dropdown-base",{key:"8556ff31672fb6a9438a65cb8ac2b2cbddad29ea",isOpen:this.isDropdownOpen,onClickOutside:this.handleCloseDropdown},s("slot",{key:"6fd559cf83df7bfd58cfb7ae8760d6dd0194d11f",name:"dropdown-action",slot:"action"},this.mode===n.Range?s("div",{class:"time-range-input-container"},s("kv-date-time-input",Object.assign({disabled:this.disabled,inputStyleType:r.MergedLeft,value:null===(t=this.rangeInputValues)||void 0===t?void 0:t.from,dateFormat:y,placeholder:c?k:j,useInputMask:c,onInputFocus:()=>this.handleInputFocus(d.From),forcedFocus:this.focusedInput===d.From&&this.isDropdownOpen,onTextChange:this.hanleOnTextChange},f)),s("kv-date-time-input",Object.assign({disabled:this.disabled,inputStyleType:r.MergedRight,value:null===(i=this.rangeInputValues)||void 0===i?void 0:i.to,dateFormat:y,placeholder:u?k:j,useInputMask:u,onInputFocus:()=>this.handleInputFocus(d.To),forcedFocus:this.focusedInput===d.To&&this.isDropdownOpen,rightIcon:this.isDropdownOpen?h.ArrowDropUp:h.ArrowDropDown,onTextChange:this.hanleOnTextChange,onRightIconClick:this.handleDropdownArrowClick},g))):s("div",{class:"single-input-container"},s("kv-date-time-input",Object.assign({disabled:this.disabled,value:this.singleTimeInputValue,dateFormat:y,placeholder:m?k:j,useInputMask:m,forcedFocus:this.focusedInput===d.Single&&this.isDropdownOpen,onInputFocus:()=>this.handleInputFocus(d.Single),inputStyleType:r.Separated,rightIcon:this.isDropdownOpen?h.ArrowDropUp:h.ArrowDropDown,onTextChange:this.hanleOnTextChange,onRightIconClick:this.handleDropdownArrowClick},f)))),s("div",{key:"4c3775d051bf21b6b00edef7cdeb3916fde9c072",slot:"list"},s("div",{key:"32ed07881274b42003e22f12e4f3a91faa49d20b",class:"calendar-container"},s("kv-calendar",{key:"87c0a5814c14d756b7ac3610be39e551c9b8789d",mode:this.mode,displayNextMonthArrow:!1,displayPreviousMonthArrow:!0,selectedDates:l,hoveredDate:this.hoveredDate,onHoveredDateChange:this.handleHoveredDateChange,disableHoveringStyling:!b,initialDate:o,onChangeMonth:this.handleClickBackMonth,onClickDate:this.onClickDate,minDate:O}),s("kv-calendar",{key:"529c70d7002e510e7fe00c7d951fa01e726a9ccc",mode:this.mode,displayNextMonthArrow:!0,displayPreviousMonthArrow:!1,selectedDates:l,hoveredDate:this.hoveredDate,onHoveredDateChange:this.handleHoveredDateChange,disableHoveringStyling:!b,initialDate:a,onChangeMonth:this.handleClickForwardMonth,onClickDate:this.onClickDate,minDate:O})))))}static get watchers(){return{selectedTime:["handleSelectedTimeChange"]}}};T.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}.time-range-input-container{display:flex;border-radius:var(--radius-md);width:100%;align-items:flex-end}.time-range-input-container kv-date-time-input{width:50%}.single-input-container{border-radius:var(--radius-md)}.calendar-container{display:flex;gap:var(--spacing-3xl);border-radius:var(--radius-md);background-color:var(--background-container-elevated-slider);border:1px solid var(--slider-border-color-default);padding:var(--spacing-3xl)}';export{T as kv_absolute_time_picker_dropdown_input}