@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 13.1 kB
JavaScript
import{r as t,c as i,h as e,H as s}from"./p-D-JVwta2.js";import{E as a}from"./p-DVds6a5Z.js";import{D as n,T as o,E as h,g as r,e as l,f as d,i as c,c as p,h as f,F as v,A as b,a as m,j as g,b as u,d as k,k as C,l as y,v as j}from"./p-B7AI_0a-.js";import{b as x,a as w}from"./p-DzZLIMy0.js";import"./p-DwRzddFC.js";import{i as z}from"./p-CojoW2Y2.js";import"./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{D,C as S}from"./p-DulScpJD.js";import{b as T,g as O,c as B,e as I,a as M}from"./p-CMC2Wc9b.js";import{D as A,b as R,C as E}from"./p-jTjLvKa0.js";import{i as V}from"./p-BA_npyc9.js";import{i as _}from"./p-C9bG1i86.js";import{m as F}from"./p-DkMsLawH.js";import"./p-CJTtq_QG.js";import"./p-nGbDFIaH.js";import"./p-DjSNdVAB.js";import"./p-BFTU3MAI.js";import"./p-CiDQ1Z66.js";import"./p-DfPM2t43.js";import"./p-Dkd2PDJ-.js";import"./p-Dp5Jdzmz.js";import"./p-CK4jS9_E.js";import"./p-DVju43gQ.js";const J=class{constructor(e){t(this,e),this.timeRangeChange=i(this,"timeRangeChange",7),this.dropdownStateChange=i(this,"dropdownStateChange",7),this.cancelClicked=i(this,"cancelClicked",7),this.showCalendarStateChange=i(this,"showCalendarStateChange",7),this.inputConfig={},this.dropdownPositionOptions=n,this.disabled=!1,this.showCalendar=!1,this.relativeTimePickerOptions=D,this.timezones=T(O()),this.disableTimezoneSelection=!1,this.displayCustomizeInterval=!0,this.displayTimezoneDropdown=!0,this.zIndex=o,this.tooltipPosition=x.TopStart,this.timePickerView=h.RelativeTimePicker,this.dropdownOpen=!1,this.applyButtontooltipText="",this.calendarViewLocked=!1,this.timezoneSelectionContentVisible=!1,this.internalDropdownsOpen=!1,this.resetDefaultSelectedTimeState=()=>{this.selectedTimeState={key:l,range:r(),timezone:this.getSelectedTimezone()}},this.getSelectedTimezone=()=>{var t;if(void 0!==(null===(t=this.selectedTimeState)||void 0===t?void 0:t.timezone))return this.selectedTimeState.timezone;const i=B();return{name:i,offset:I(i)}},this.onDropdownChange=({detail:t})=>{this.dropdownOpen=t,this.dropdownStateChange.emit(t),this.isApplyButtonDisabled()||t||(V(this.selectedTimeOption)&&this.resetDefaultSelectedTimeState(),this.timePickerView!==h.FullView&&(this.timePickerView=h.RelativeTimePicker)),this.timezoneSelectionContentVisible=!1},this.onSelectedRelativeTimeChange=({detail:t})=>{this.selectedTimeState={key:t.key,range:t.range,timezone:this.getSelectedTimezone()},this.calendarViewLocked=!1},this.onClickSeeCustomInterval=({detail:t})=>{this.selectedTimeState&&this.selectedTimeState.key!==S&&(this.selectedTimeState={key:t,range:[],timezone:this.getSelectedTimezone()}),this.showCalendar?this.calendarViewLocked=!0:this.timePickerView=h.AbsoluteTimePicker},this.onSelectedTimezoneChange=({detail:t})=>{var i,e;const s=this.getSelectedTimezone().name,a=this.selectedTimeState.key===S&&(null===(e=null===(i=this.selectedTimeState)||void 0===i?void 0:i.range)||void 0===e?void 0:e.length)>0?d(this.selectedTimeState.range,s,t.name):this.selectedTimeState.range;this.selectedTimeState=Object.assign(Object.assign({},this.selectedTimeState),{range:a,timezone:t})},this.onClickApply=()=>{const t=c(this.selectedTimeState,this.getSelectedTimezone());this.timeRangeChange.emit(t),this.dropdownStateChange.emit(!1),this.dropdownOpen=!1,this.timezoneSelectionContentVisible=!1,this.timePickerView!==h.FullView&&(this.timePickerView=h.RelativeTimePicker,this.calendarViewLocked=!1)},this.onClickBack=()=>{this.undoLastChanges(),this.calendarViewLocked=!1},this.onClickCancel=t=>{this.undoLastChanges(),this.cancelClicked.emit(t),this.dropdownOpen=!1,this.timezoneSelectionContentVisible=!1},this.undoLastChanges=()=>{V(this.selectedTimeOption)?this.resetDefaultSelectedTimeState():this.selectedTimeState=this.selectedTimeOption,this.applyButtontooltipText="",this.timePickerView!==h.FullView&&(this.calendarViewLocked=!1,this.timePickerView=h.RelativeTimePicker)},this.onShowCalendarClick=()=>{this.calendarViewLocked||this.showCalendarStateChange.emit(!this.showCalendar)},this.handleRelativeTimeConfigReset=()=>{this.calendarViewLocked=!0,this.selectedTimeState={key:S,range:[],timezone:this.getSelectedTimezone()}},this.handleAbsoluteDatesChange=({detail:t})=>{const i=t.range;this.calendarViewLocked||(this.calendarViewLocked=!0);const[e,s]=i,a=this.getSelectedTimezone(),n=p(e,a.name,E),o=p(s,a.name,E);f([n,o],this.selectedTimeState.range)&&(this.selectedTimeState={key:S,range:i.length===v?[n,o]:[n],timezone:a},this.updateApplyButtonConfig(i))},this.displayInputWrapperContent=()=>{this.timezoneSelectionContentVisible=!0},this.getCalendarLimitDatesFormatted=t=>{if(!_(t))return;const i=this.getSelectedTimezone();return M(t).tz(i.name).format(A)},this.updateApplyButtonConfig=t=>{this.applyButtontooltipText=t&&t.length===v?"":b},this.getDropdownInputValue=()=>{var t,i;return(null===(t=this.selectedTimeOption)||void 0===t?void 0:t.key)===S?m(this.selectedTimeOption.range,this.selectedTimeOption.timezone.name):V(this.selectedTimeOption)?"":g(null===(i=this.selectedTimeOption)||void 0===i?void 0:i.key,this.relativeTimePickerOptions)},this.getTextFieldTooltip=()=>{var t;if((null===(t=this.selectedTimeState)||void 0===t?void 0:t.key)===S)return u(this.selectedTimeState.range,this.getSelectedTimezone(),this.timezones)},this.getFormattedSelectedTime=()=>{var t,i;return(null===(t=this.selectedTimeState)||void 0===t?void 0:t.key)===S?R:g(null===(i=this.selectedTimeState)||void 0===i?void 0:i.key,this.relativeTimePickerOptions)},this.getInputConfig=()=>F({},k,this.inputConfig,{value:this.getDropdownInputValue(),tooltipConfig:{text:this.getTextFieldTooltip(),position:this.tooltipPosition},inputDisabled:this.disabled}),this.getApplyButtonTooltipText=()=>this.isApplyButtonDisabled()?this.applyButtontooltipText:"",this.getAbsoluteRange=()=>{const t=this.getSelectedTimezone();return C(this.selectedTimeState,t)},this.onInternalDropdownsStateChange=({detail:t})=>{this.internalDropdownsOpen=t}}handleSelectTimeStateChange(t){var i;this.selectedTimeState=Object.assign(Object.assign({},t),{timezone:null!==(i=null==t?void 0:t.timezone)&&void 0!==i?i:this.getSelectedTimezone()})}handleShowCalendarChange(t){this.syncShowCalendarViewState(t)}componentWillLoad(){V(this.selectedTimeOption)?this.resetDefaultSelectedTimeState():this.syncTimeStateWithTimeOption(),this.syncShowCalendarViewState(this.showCalendar)}syncShowCalendarViewState(t){this.timePickerView=t?h.FullView:h.RelativeTimePicker}syncTimeStateWithTimeOption(){var t;this.selectedTimeState=Object.assign(Object.assign({},this.selectedTimeOption),{timezone:null!==(t=this.selectedTimeOption.timezone)&&void 0!==t?t:this.getSelectedTimezone()})}getRelativeTimeInputConfig(){var t;if((null===(t=this.selectedTimeState)||void 0===t?void 0:t.key)!==S)return y(this.relativeTimePickerOptions,this.selectedTimeState,this.getSelectedTimezone().name)}isApplyButtonDisabled(){var t,i,e,s;const{range:a,timezone:n}=this.selectedTimeState;if(a.length>0&&j(a)){if((null===(i=null===(t=this.selectedTimeOption)||void 0===t?void 0:t.range)||void 0===i?void 0:i.length)>0){const{range:t}=this.selectedTimeOption;if(a.length===v&&f(a,t))return!1}if((null===(s=null===(e=this.selectedTimeOption)||void 0===e?void 0:e.timezone)||void 0===s?void 0:s.name)!==(null==n?void 0:n.name))return!1}return!0}render(){var t;const i=this.dropdownPositionOptions,n=this.getInputConfig();return e(s,{key:"3a42810f7eb2671de0695eb639d97f7dbb130b71"},e("kv-dropdown",{key:"124305e83b06de2b8bb34ccae05fa7a09054d416",isOpen:this.dropdownOpen,onOpenStateChange:this.onDropdownChange,inputConfig:n,options:i,disabled:this.disabled,zIndex:this.zIndex,clickOutsideClose:!this.internalDropdownsOpen},e("div",{key:"1fc9f6962abb08c363cf67078fe13211d232cf62",class:"time-range-content"},e("div",{key:"09918ee6025f2b1e10c005c1b5736c653286f0ac",class:{"content-wrapper":!0,"content-wrapper--relative":this.timePickerView===h.RelativeTimePicker,"content-wrapper--absolute":this.timePickerView===h.AbsoluteTimePicker,"content-wrapper--full-view":this.timePickerView===h.FullView}},e("div",{key:"28f1d7d3bb7f6787f8a96a594af76a004817df02",class:{"relative-range":!0,"relative-range--full-view":this.timePickerView===h.FullView}},e("kv-relative-time-picker",{key:"e7894bd6492a443ad9783c92af3abea3246455b8",options:this.relativeTimePickerOptions,timezones:this.timezones,selectedTimezone:this.getSelectedTimezone().name,selectedTimeKey:null===(t=this.selectedTimeState)||void 0===t?void 0:t.key,customIntervalOptionEnabled:this.displayCustomizeInterval,timezoneSelectionEnabled:this.displayTimezoneDropdown,timezoneContentVisible:this.timezoneSelectionContentVisible,disableTimezoneSelection:this.disableTimezoneSelection,onCustomizeIntervalClicked:this.onClickSeeCustomInterval,onSelectedRelativeTimeChange:this.onSelectedRelativeTimeChange,onTimezoneChange:this.onSelectedTimezoneChange,onTimezoneInputClicked:this.displayInputWrapperContent,onTimezoneDropdownStateChange:this.onInternalDropdownsStateChange})),e("div",{key:"019c7c7973539a47b9769fa815229a74eb124717",class:{"calendar-range":!0,"calendar-range--visible":this.timePickerView===h.AbsoluteTimePicker,"calendar-range--full-view":this.timePickerView===h.FullView}},e("kv-absolute-time-picker",{key:"95bebabd624f82e073ed74a054e750bac15ec098",mode:z.Range,headerTitle:this.getFormattedSelectedTime(),selectedDates:this.getAbsoluteRange(),relativeTimeConfig:this.getRelativeTimeInputConfig(),displayBackButton:this.timePickerView===h.AbsoluteTimePicker,onBackButtonClicked:this.onClickBack,onSelectedDatesChange:this.handleAbsoluteDatesChange,onRelativeTimeConfigReset:this.handleRelativeTimeConfigReset,onRelativeTimeConfigChange:this.handleAbsoluteDatesChange,calendarInputMinDate:this.getCalendarLimitDatesFormatted(this.calendarInputMinDate),calendarInputMaxDate:this.getCalendarLimitDatesFormatted(this.calendarInputMaxDate)}))),e("div",{key:"1eb15f82cf5327b64b1426bf172fea9e8c010e39",class:"footer"},e("div",{key:"305f9f7118ebde2f083af623d777f03cf519b91b",class:"toggle-wrapper"},this.timePickerView!==h.AbsoluteTimePicker&&e("div",{key:"777afc7719bbc1b99ab7b407c951b35bb4bb1f4e",class:"show-calendar-toggle"},e("kv-switch-button",{key:"d1723117d7b975ac04b0283d6dbfb7d54ec688c1",checked:this.showCalendar,size:w.Small,onClick:this.onShowCalendarClick,disabled:this.calendarViewLocked}),e("div",{key:"661caba234db94a90a5a5ebdff93807f859d3861",class:"toggle-text"},"Show Calendar"))),e("div",{key:"34adfedcfea37f1cccfd2f448345585f42edb3c4",class:"actions"},e("kv-action-button-text",{key:"81e40074f16c56b20c769bc68ae9713edcb27893",type:a.Tertiary,size:w.Small,text:"Cancel",onClickButton:this.onClickCancel}),e("kv-tooltip",{key:"ccb038714dc949eb0153e05051c6d1c7b9834a80",text:this.getApplyButtonTooltipText(),position:x.TopStart},e("kv-action-button-text",{key:"46d559a76cf190ac8968b0f613b190de52bdfc64",type:a.Primary,size:w.Small,text:"Apply",disabled:this.isApplyButtonDisabled(),onClickButton:this.onClickApply})))))))}static get watchers(){return{selectedTimeOption:["handleSelectTimeStateChange"],showCalendar:["handleShowCalendarChange"]}}};J.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}.time-range-content{background-color:var(--kv-neutral-7, #2a2a2a);border:1px solid var(--kv-neutral-6, #3f3f3f);border-radius:4px;width:max-content}.time-range-content .content-wrapper{position:relative;display:flex;overflow:hidden;transition:all 0.3s ease-in-out}.time-range-content .content-wrapper--relative{height:347px;width:328px}.time-range-content .content-wrapper--absolute{height:377px;width:448px}.time-range-content .content-wrapper--full-view{height:347px;width:779px}.time-range-content .relative-range{position:absolute}.time-range-content .relative-range kv-relative-time-picker{--background-color:transparent}.time-range-content .relative-range--full-view{border-right:1px solid var(--kv-neutral-6, #3f3f3f)}.time-range-content .calendar-range{position:absolute;right:-448px;z-index:1;transition:all 0.3s ease-in-out;background-color:var(--kv-neutral-7, #2a2a2a);border-top-right-radius:4px;border-top-left-radius:4px}.time-range-content .calendar-range--visible{right:0}.time-range-content .calendar-range--full-view{right:0}.time-range-content kv-absolute-time-picker .absolute-time-picker-container{background-color:transparent}.footer{display:flex;justify-content:space-between;padding:var(--kv-spacing-4x, 16px);border-top:1px solid var(--kv-neutral-6, #3f3f3f)}.footer .toggle-wrapper{display:flex}.footer .show-calendar-toggle{display:flex;gap:var(--kv-spacing-2x, 8px);align-items:center}.footer .show-calendar-toggle .toggle-text{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;color:var(--kv-neutral-2, #e5e5e5)}.footer .actions{display:flex;gap:var(--kv-spacing-2x, 8px)}';export{J as kv_time_picker}