@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 12.8 kB
JavaScript
import{r as t,c as i,h as e,H as s}from"./p-WTwLUJcM.js";import{d as a,x as n,C as o,f as h,c as r,j as l}from"./p-COrzvkrr.js";import{D as d,T as c,g as p,e as v,f,i as b,c as g,h as m,F as u,A as k,a as y,j as C,b as w,d as x,k as j,l as z,v as T}from"./p-C_KkAiiZ.js";import{b as S,u as D,n as O,t as B,H as I}from"./p-BS8xGxWJ.js";import{D as L,b as R,C as _}from"./p-jTjLvKa0.js";import{D as A}from"./p-DumtFo-s.js";import{i as J}from"./p-GpUjqmUL.js";import{i as G}from"./p-C9bG1i86.js";import{m as K}from"./p-DlXzUI51.js";import"./p-CJTtq_QG.js";import"./p-B4OowdnI.js";import"./p-DjSNdVAB.js";import"./p-B85MJLTf.js";import"./p-Dkd2PDJ-.js";import"./p-BL_6ssnk.js";import"./p-CK4jS9_E.js";const M=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=d,this.disabled=!1,this.showCalendar=!1,this.relativeTimePickerOptions=A,this.timezones=S(D()),this.disableTimezoneSelection=!1,this.displayCustomizeInterval=!0,this.displayTimezoneDropdown=!0,this.zIndex=c,this.tooltipPosition=a.TopStart,this.timePickerView=n.RelativeTimePicker,this.dropdownOpen=!1,this.applyButtontooltipText="",this.calendarViewLocked=!1,this.timezoneSelectionContentVisible=!1,this.internalDropdownsOpen=!1,this.resetDefaultSelectedTimeState=()=>{this.selectedTimeState={key:v,range:p(),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=O();return{name:i,offset:B(i)}},this.onDropdownChange=({detail:t})=>{this.dropdownOpen=t,this.dropdownStateChange.emit(t),this.isApplyButtonDisabled()||t||(J(this.selectedTimeOption)&&this.resetDefaultSelectedTimeState(),this.timePickerView!==n.FullView&&(this.timePickerView=n.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!==o&&(this.selectedTimeState={key:t,range:[],timezone:this.getSelectedTimezone()}),this.showCalendar?this.calendarViewLocked=!0:this.timePickerView=n.AbsoluteTimePicker},this.onSelectedTimezoneChange=({detail:t})=>{var i,e;const s=this.getSelectedTimezone().name,a=this.selectedTimeState.key===o&&(null===(e=null===(i=this.selectedTimeState)||void 0===i?void 0:i.range)||void 0===e?void 0:e.length)>0?f(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=b(this.selectedTimeState,this.getSelectedTimezone());this.timeRangeChange.emit(t),this.dropdownStateChange.emit(!1),this.dropdownOpen=!1,this.timezoneSelectionContentVisible=!1,this.timePickerView!==n.FullView&&(this.timePickerView=n.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=()=>{J(this.selectedTimeOption)?this.resetDefaultSelectedTimeState():this.selectedTimeState=this.selectedTimeOption,this.applyButtontooltipText="",this.timePickerView!==n.FullView&&(this.calendarViewLocked=!1,this.timePickerView=n.RelativeTimePicker)},this.onShowCalendarClick=()=>{this.calendarViewLocked||this.showCalendarStateChange.emit(!this.showCalendar)},this.handleRelativeTimeConfigReset=()=>{this.calendarViewLocked=!0,this.selectedTimeState={key:o,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=g(e,a.name,_),h=g(s,a.name,_);m([n,h],this.selectedTimeState.range)&&(this.selectedTimeState={key:o,range:i.length===u?[n,h]:[n],timezone:a},this.updateApplyButtonConfig(i))},this.displayInputWrapperContent=()=>{this.timezoneSelectionContentVisible=!0},this.getCalendarLimitDatesFormatted=t=>{if(!G(t))return;const i=this.getSelectedTimezone();return I(t).tz(i.name).format(L)},this.updateApplyButtonConfig=t=>{this.applyButtontooltipText=t&&t.length===u?"":k},this.getDropdownInputValue=()=>{var t,i;return(null===(t=this.selectedTimeOption)||void 0===t?void 0:t.key)===o?y(this.selectedTimeOption.range,this.selectedTimeOption.timezone.name):J(this.selectedTimeOption)?"":C(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)===o)return w(this.selectedTimeState.range,this.getSelectedTimezone(),this.timezones)},this.getFormattedSelectedTime=()=>{var t,i;return(null===(t=this.selectedTimeState)||void 0===t?void 0:t.key)===o?R:C(null===(i=this.selectedTimeState)||void 0===i?void 0:i.key,this.relativeTimePickerOptions)},this.getInputConfig=()=>K({},x,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 j(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(){J(this.selectedTimeOption)?this.resetDefaultSelectedTimeState():this.syncTimeStateWithTimeOption(),this.syncShowCalendarViewState(this.showCalendar)}syncShowCalendarViewState(t){this.timePickerView=t?n.FullView:n.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)!==o)return z(this.relativeTimePickerOptions,this.selectedTimeState,this.getSelectedTimezone().name)}isApplyButtonDisabled(){var t,i,e,s;const{range:a,timezone:n}=this.selectedTimeState;if(a.length>0&&T(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===u&&m(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,o=this.getInputConfig();return e(s,{key:"ca2b9b8351e3dac25906cc041184e9686b19f4f5"},e("kv-dropdown",{key:"d0589482ba1f9a9232e11f9f29279da27660884e",isOpen:this.dropdownOpen,onOpenStateChange:this.onDropdownChange,inputConfig:o,options:i,disabled:this.disabled,zIndex:this.zIndex,clickOutsideClose:!this.internalDropdownsOpen},e("div",{key:"2929b2820d6a80fdea59f66969c6a6ecb1790dbf",class:"time-range-content"},e("div",{key:"f611d902bc6d59d5507bcc0d55280e1e0f32969c",class:{"content-wrapper":!0,"content-wrapper--relative":this.timePickerView===n.RelativeTimePicker,"content-wrapper--absolute":this.timePickerView===n.AbsoluteTimePicker,"content-wrapper--full-view":this.timePickerView===n.FullView}},e("div",{key:"5aaf81e7a00fc3fd00e6cd4e7b4b0d2fb3284545",class:{"relative-range":!0,"relative-range--full-view":this.timePickerView===n.FullView}},e("kv-relative-time-picker",{key:"767d1c2b382125d5077e39c66cafc2b34d467925",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:"cb531264b11aa24e1306aa68d40460c8735bc94a",class:{"calendar-range":!0,"calendar-range--visible":this.timePickerView===n.AbsoluteTimePicker,"calendar-range--full-view":this.timePickerView===n.FullView}},e("kv-absolute-time-picker",{key:"fe8b8776f384112ca803c79e17f8886ac22c2637",mode:h.Range,headerTitle:this.getFormattedSelectedTime(),selectedDates:this.getAbsoluteRange(),relativeTimeConfig:this.getRelativeTimeInputConfig(),displayBackButton:this.timePickerView===n.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:"1be6724e2fc5b354e5106396fe10b9d557b7e024",class:"footer"},e("div",{key:"e240f86c537252f61b992c6e60e004491d1c4044",class:"toggle-wrapper"},this.timePickerView!==n.AbsoluteTimePicker&&e("div",{key:"587d8319767058907904c32dbc1cbf1e6afb620d",class:"show-calendar-toggle"},e("kv-switch-button",{key:"7b269be7102bb2151b9fcb85f49bfc4b6059117c",checked:this.showCalendar,size:r.Small,onClick:this.onShowCalendarClick,disabled:this.calendarViewLocked}),e("div",{key:"efe916b63c5c80efe600a2f2f5e9727c4f940fc3",class:"toggle-text"},"Show Calendar"))),e("div",{key:"48e4c8c414b9317f18b3e782b8675ca05cb33879",class:"actions"},e("kv-action-button-text",{key:"e8163c4c46ebff9c4bf0f5263f862eba9c71d89f",type:l.Tertiary,size:r.Small,text:"Cancel",onClickButton:this.onClickCancel}),e("kv-tooltip",{key:"59248031114fbb21c528106cbcccca1e4cbcaffa",text:this.getApplyButtonTooltipText(),position:a.TopStart},e("kv-action-button-text",{key:"c38210a98bc7fad26f3dc1d88ea016f447a2368a",type:l.Primary,size:r.Small,text:"Apply",disabled:this.isApplyButtonDisabled(),onClickButton:this.onClickApply})))))))}static get watchers(){return{selectedTimeOption:["handleSelectTimeStateChange"],showCalendar:["handleShowCalendarChange"]}}};M.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-content{background-color:var(--background-container-elevated-slider);border:1px solid var(--slider-border-color-default);border-radius:var(--radius-md);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(--slider-border-color-default)}.time-range-content .calendar-range{position:absolute;right:-448px;z-index:1;transition:all 0.3s ease-in-out;background-color:var(--background-container-elevated-slider);border-top-right-radius:var(--radius-md);border-top-left-radius:var(--radius-md)}.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(--spacing-2xl);border-top:1px solid var(--slider-border-color-default)}.footer .toggle-wrapper{display:flex}.footer .show-calendar-toggle{display:flex;gap:var(--spacing-md);align-items:center}.footer .show-calendar-toggle .toggle-text{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;color:var(--text-surface-neutral-tertiary)}.footer .actions{display:flex;gap:var(--spacing-md)}';export{M as kv_time_picker}