@nasa-terra/components 0.0.195 → 0.0.197

package/dist/chunks/chunk.DV3HUYSH.js

@@ -0,0 +1,780 @@
+import{a as E}from"./chunk.G35JQ2ZG.js";import{a as C}from"./chunk.Q2MCOBRZ.js";import{a as k}from"./chunk.MQMBH2YC.js";import{a as _}from"./chunk.ZBC4UK6H.js";import{a as $,c as T}from"./chunk.IEJAC4O6.js";import{e as u}from"./chunk.INFVQQSJ.js";import{property as g,state as b,query as L}from"lit/decorators.js";import{html as M,nothing as U}from"lit";import{createRef as I,ref as H}from"lit/directives/ref.js";import{isValid as x}from"date-fns";var d=class extends T{constructor(){super();this.range=!1;this.hideLabel=!1;this.label="Select Date";this.helpText="";this.startHelpText="";this.endHelpText="";this.showPresets=!1;this.presets=[];this.enableTime=!1;this.inline=!1;this.splitInputs=!1;this.placeholder="Select Date";this.startPlaceholder="Start Date";this.endPlaceholder="End Date";this.role="group";this.ariaLabel="Date picker";this.hideClearAll=!1;this.clearAllLabel="Clear Dates";this.useEndOfDay=!0;this.showClose=!1;this.twelveHour=!1;this.isOpen=!1;this.leftMonth=new Date;this.rightMonth=new Date;this.selectedStart=null;this.selectedEnd=null;this.hoverDate=null;this.isSelectingRange=!1;this.showLeftMonthDropdown=!1;this.showRightMonthDropdown=!1;this.startHour=0;this.startMinute=0;this.startSecond=0;this.endHour=23;this.endMinute=59;this.endSecond=59;this.selectedDates={startDate:new Date().toString(),endDate:new Date().toString()};this.dropdownRef=I();this.DAYS=["Su","Mo","Tu","We","Th","Fr","Sa"];this.MONTHS=["January","February","March","April","May","June","July","August","September","October","November","December"];this.initializePresets()}getDefaultEndHour(){return this.useEndOfDay?23:0}getDefaultEndMinute(){return this.useEndOfDay?59:0}getDefaultEndSecond(){return this.useEndOfDay?59:0}getTimezoneOffsetMinutes(e){if(!this.timezone)return 0;try{let a=new Intl.DateTimeFormat("en-US",{timeZone:this.timezone,year:"numeric",month:"numeric",day:"numeric",hour:"numeric",minute:"numeric",second:"numeric",hour12:!1}).formatToParts(e),r=p=>{var c,D;return parseInt((D=(c=a.find(f=>f.type===p))==null?void 0:c.value)!=null?D:"0",10)},n=r("year"),s=r("month"),i=r("day"),l=r("hour")%24,h=r("minute"),o=r("second"),m=Date.UTC(n,s-1,i,l,h,o);return Math.round((m-e.getTime())/6e4)}catch(t){return 0}}getDisplayTimeComponents(e,t,a,r){if(!this.timezone||!r)return{hour:e,minute:t,second:a};let n=this.getTimezoneOffsetMinutes(r),s=e*60+t+n;return s=(s%1440+1440)%1440,{hour:Math.floor(s/60),minute:s%60,second:a}}getUtcTimeFromDisplay(e,t,a,r){if(!this.timezone||!r)return{hour:e,minute:t,second:a};let n=this.getTimezoneOffsetMinutes(r),s=e*60+t-n;return s=(s%1440+1440)%1440,{hour:Math.floor(s/60),minute:s%60,second:a}}to12Hour(e){let t=e<12?"AM":"PM";return{hour:e%12||12,period:t}}to24Hour(e,t){return t==="AM"?e===12?0:e:e===12?12:e+12}togglePeriod(e){let t=e?this.startHour:this.endHour,a=e?this.startMinute:this.endMinute,r=e?this.startSecond:this.endSecond,n=e?this.selectedStart:this.selectedEnd,s=this.getDisplayTimeComponents(t,a,r,n),i=this.to12Hour(s.hour),l=i.period==="AM"?"PM":"AM",h=this.to24Hour(i.hour,l),o=this.getUtcTimeFromDisplay(h,s.minute,s.second,n);e?(this.startHour=o.hour,this.startMinute=o.minute,this.startSecond=o.second):(this.endHour=o.hour,this.endMinute=o.minute,this.endSecond=o.second),this.emitChange(),this.requestUpdate()}parseLocalDate(e){if(/^\d{4}-\d{2}-\d{2}$/.test(e)){let[r,n,s]=e.split("-").map(Number);return this.enableTime?new Date(Date.UTC(r,n-1,s,0,0,0)):new Date(r,n-1,s)}if(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/.test(e)){let[r,n]=e.split("T"),[s,i,l]=r.split("-").map(Number),[h,o,m]=n.split(":").map(Number);return new Date(Date.UTC(s,i-1,l,h,o,m))}return new Date(e)}isSameMonth(e,t){return this.enableTime?e.getUTCFullYear()===t.getUTCFullYear()&&e.getUTCMonth()===t.getUTCMonth():e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()}isDateInMonth(e,t){return this.enableTime?e.getUTCFullYear()===t.getUTCFullYear()&&e.getUTCMonth()===t.getUTCMonth():e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()}getBounds(){let e=this.minDate?this.parseLocalDate(this.minDate):void 0,t=this.maxDate?this.parseLocalDate(this.maxDate):void 0;return{min:e,max:t}}doesRangeOverlapBounds(e){let{startDate:t,endDate:a}=e,{min:r,max:n}=this.getBounds();if(!this.range)return!(!t||r&&t<r||n&&t>n);let s=t!=null?t:new Date(-864e13),i=a!=null?a:new Date(864e13);if(!r&&!n)return!0;let l=r!=null?r:new Date(-864e13),h=n!=null?n:new Date(864e13);return i>=l&&s<=h}isPresetWithinBounds(e){return this.doesRangeOverlapBounds(e)}get filteredPresets(){return(this.presets||[]).filter(e=>this.isPresetWithinBounds(e.getValue()))}open(){if(this.isOpen=!0,this.maxDate&&!this.selectedStart&&!this.selectedEnd){let e=this.parseLocalDate(this.maxDate);if(!isNaN(e.getTime()))if(this.range){this.rightMonth=new Date(e);let t=new Date(e);t.setMonth(t.getMonth()-1),this.leftMonth=t}else this.leftMonth=new Date(e)}!this.inline&&this.dropdownRef.value&&this.dropdownRef.value.show(),this.requestUpdate()}close(){this.isOpen=!1,!this.inline&&this.dropdownRef.value&&this.dropdownRef.value.hide(),this.requestUpdate()}clear(){this.selectedStart=null,this.selectedEnd=null,this.hoverDate=null,this.isSelectingRange=!1,this.startHour=0,this.startMinute=0,this.startSecond=0,this.endHour=this.getDefaultEndHour(),this.endMinute=this.getDefaultEndMinute(),this.endSecond=this.getDefaultEndSecond(),this.clearInputValidation(),this.requestUpdate(),this.emitChange()}setOpen(e){e?this.open():this.close()}willUpdate(e){if(super.willUpdate(e),e.has("useEndOfDay")&&(this.endHour=this.getDefaultEndHour(),this.endMinute=this.getDefaultEndMinute(),this.endSecond=this.getDefaultEndSecond()),e.has("inline")&&this.inline&&(this.isOpen=!0,this.dropdownRef.value&&this.dropdownRef.value.hide()),(e.has("minDate")||e.has("maxDate"))&&this.maxDate&&!this.selectedStart&&!this.selectedEnd){let t=this.parseLocalDate(this.maxDate);if(!isNaN(t.getTime()))if(this.range){this.rightMonth=new Date(t);let a=new Date(t);a.setMonth(a.getMonth()-1),this.leftMonth=a}else this.leftMonth=new Date(t)}if(e.has("startDate")||e.has("endDate")){if(this.startDate){let t=this.parseLocalDate(this.startDate);isNaN(t.getTime())||(this.selectedStart=t,this.enableTime&&this.initializeTimeFromDate(t,!0))}else this.selectedStart=null;if(this.range){if(this.endDate){let t=this.parseLocalDate(this.endDate);isNaN(t.getTime())||(this.selectedEnd=t,this.enableTime&&this.initializeTimeFromDate(t,!1))}else this.selectedEnd=null;this.selectedStart&&this.selectedEnd?this.isSameMonth(this.selectedStart,this.selectedEnd)?this.isDateInMonth(this.selectedStart,this.leftMonth)?(this.leftMonth=new Date(this.selectedStart),this.isDateInMonth(this.selectedStart,this.rightMonth)&&(this.rightMonth=new Date(this.selectedStart),this.rightMonth.setMonth(this.rightMonth.getMonth()+1))):this.isDateInMonth(this.selectedStart,this.rightMonth)?this.rightMonth=new Date(this.selectedStart):this.leftMonth=new Date(this.selectedStart):(this.leftMonth=new Date(this.selectedStart),this.rightMonth=new Date(this.selectedEnd)):this.selectedStart&&(this.leftMonth=new Date(this.selectedStart),this.rightMonth=new Date(this.leftMonth),this.rightMonth.setMonth(this.rightMonth.getMonth()+1))}else this.selectedStart&&(this.leftMonth=new Date(this.selectedStart)),this.selectedEnd=null}}initializePresets(){this.presets.length===0&&(this.presets=[{label:"Today",getValue:()=>{let e=new Date;return{startDate:e,endDate:this.range?e:null}}},{label:"Yesterday",getValue:()=>{let e=new Date;return e.setDate(e.getDate()-1),{startDate:e,endDate:this.range?e:null}}},{label:"Last 7 days",getValue:()=>{let e=new Date,t=new Date;return t.setDate(t.getDate()-6),{startDate:t,endDate:e}}},{label:"Last 30 days",getValue:()=>{let e=new Date,t=new Date;return t.setDate(t.getDate()-29),{startDate:t,endDate:e}}},{label:"Last 6 months",getValue:()=>{let e=new Date,t=new Date;return t.setMonth(t.getMonth()-6),{startDate:t,endDate:e}}},{label:"Last year",getValue:()=>{let e=new Date,t=new Date;return t.setFullYear(t.getFullYear()-1),{startDate:t,endDate:e}}},{label:"All time",getValue:()=>{let{min:e,max:t}=this.getBounds();return{startDate:e||null,endDate:t||null}}}])}firstUpdated(){let e=new URLSearchParams(window.location.search),t=e.get("time_start")||this.startDate,a=e.get("time_end")||this.endDate;t&&(this.selectedStart=this.parseLocalDate(t),this.leftMonth=new Date(this.selectedStart),this.enableTime&&this.initializeTimeFromDate(this.selectedStart,!0)),this.range&&a&&(this.selectedEnd=this.parseLocalDate(a),this.enableTime&&this.initializeTimeFromDate(this.selectedEnd,!1),this.selectedStart&&this.selectedEnd?this.isSameMonth(this.selectedStart,this.selectedEnd)?(this.rightMonth=new Date(this.selectedStart),this.rightMonth.setMonth(this.rightMonth.getMonth()+1)):this.rightMonth=new Date(this.selectedEnd):this.selectedEnd&&(this.rightMonth=new Date(this.selectedEnd))),this.range&&!a&&(this.rightMonth=new Date(this.leftMonth),this.rightMonth.setMonth(this.rightMonth.getMonth()+1)),this.inline&&(this.isOpen=!0)}disconnectedCallback(){super.disconnectedCallback()}handleDropdownShow(){this.isOpen=!0}handleDropdownHide(){this.isOpen=!1}formatDisplayDate(e,t=!0){if(!e)return"";let a=this.displayFormat||(this.enableTime?"YYYY-MM-DD HH:mm:ss":"YYYY-MM-DD");if(this.enableTime){let i=e.getUTCFullYear(),l=String(e.getUTCMonth()+1).padStart(2,"0"),h=String(e.getUTCDate()).padStart(2,"0"),o=this.getDisplayTimeComponents(t?this.startHour:this.endHour,t?this.startMinute:this.endMinute,t?this.startSecond:this.endSecond,e);if(this.twelveHour&&!this.displayFormat){let f=this.to12Hour(o.hour),S=String(f.hour).padStart(2,"0"),v=String(o.minute).padStart(2,"0"),y=String(o.second).padStart(2,"0");return`${i}-${l}-${h} ${S}:${v}:${y} ${f.period}`}let m=String(o.hour).padStart(2,"0"),p=String(o.minute).padStart(2,"0"),c=String(o.second).padStart(2,"0");return(this.displayFormat||"YYYY-MM-DD HH:mm:ss").replace("YYYY",i.toString()).replace("MM",l).replace("DD",h).replace("HH",m).replace("mm",p).replace("ss",c)}let r=e.getFullYear(),n=String(e.getMonth()+1).padStart(2,"0"),s=String(e.getDate()).padStart(2,"0");return a.replace("YYYY",r.toString()).replace("MM",n).replace("DD",s)}getDisplayValue(){return this.range?this.selectedStart&&this.selectedEnd?`${this.formatDisplayDate(this.selectedStart,!0)} \u2013 ${this.formatDisplayDate(this.selectedEnd,!1)}`:this.selectedStart?this.formatDisplayDate(this.selectedStart,!0):"":this.selectedStart?this.formatDisplayDate(this.selectedStart,!0):""}getStartDateDisplayValue(){return this.selectedStart?this.formatDisplayDate(this.selectedStart,!0):""}getEndDateDisplayValue(){return this.selectedEnd?this.formatDisplayDate(this.selectedEnd,!1):""}parseAndFormatDate(e){let t=e.trim();if(!t)return null;let a=/^\d{4}-\d{2}-\d{2}$/,r=/^\d{4}-\d{2}-\d{2}[T\s]\d{1,2}:\d{2}(:\d{2})?(\s*(AM|PM))?$/i,n;if(a.test(t))n=this.parseLocalDate(t);else if(this.enableTime&&r.test(t)){let s=t.match(/\s*(AM|PM)$/i),i=s?s[1].toUpperCase():null,l=i?t.slice(0,-s[0].length).trim():t,[h,o]=l.split(/[T\s]+/),[m,p,c]=h.split("-").map(Number),D=o.split(":").map(Number),f=D[0]||0,S=D[1]||0,v=D[2]||0;i&&(f=this.to24Hour(f,i)),n=new Date(Date.UTC(m,p-1,c,f,S,v))}else if(n=new Date(t),!x(n))return null;if(!x(n))return null;if(this.enableTime){if(a.test(t))return t;{let s=n.getUTCFullYear(),i=n.getUTCMonth()+1,l=n.getUTCDate(),h=n.getUTCHours(),o=n.getUTCMinutes(),m=n.getUTCSeconds();return`${s}-${String(i).padStart(2,"0")}-${String(l).padStart(2,"0")} ${String(h).padStart(2,"0")}:${String(o).padStart(2,"0")}:${String(m).padStart(2,"0")}`}}else{let s=n.getFullYear(),i=n.getMonth()+1,l=n.getDate();return`${s}-${String(i).padStart(2,"0")}-${String(l).padStart(2,"0")}`}}clearInputValidation(){this.renderRoot.querySelectorAll("terra-input").forEach(t=>{t.setCustomValidity("")})}formatDateForError(e){return this.enableTime?e:e.split("T")[0]}setInputValidationError(e,t){e.setCustomValidity(t),requestAnimationFrame(()=>{e.validationErrorMessage=t,e.requestUpdate()}),this.emit("terra-date-selection-invalid",{detail:{message:t}})}handleInputBlur(e){let t=e.target,a=t.value||"";if(!a.trim()){this.selectedStart=null,this.selectedEnd=null,t.setCustomValidity(""),this.emitChange();return}if(this.range){let n=a.replace(/(\d{2})-(\d{4})/,"$1 - $2").split(/\s*–\s*|\s+-\s+/);if(n.length!==2){this.setInputValidationError(t,"Date range must be in format: YYYY-MM-DD \u2013 YYYY-MM-DD");return}let s=this.parseAndFormatDate(n[0]),i=this.parseAndFormatDate(n[1]);if(!s){this.setInputValidationError(t,"Invalid start date format");return}if(!i){this.setInputValidationError(t,"Invalid end date format");return}let l,h;if(this.enableTime&&s.length>10){let[p,c]=s.split(/[T\s]+/),[D,f,S]=p.split("-").map(Number),v=c.split(":").map(Number),y=new Date(Date.UTC(D,f-1,S)),w=this.getUtcTimeFromDisplay(v[0]||0,v[1]||0,v[2]||0,y);l=new Date(Date.UTC(D,f-1,S,w.hour,w.minute,w.second)),this.startHour=w.hour,this.startMinute=w.minute,this.startSecond=w.second}else if(this.enableTime){let[p,c,D]=s.split("-").map(Number);l=new Date(Date.UTC(p,c-1,D,this.startHour,this.startMinute,this.startSecond))}else l=this.parseLocalDate(s);if(this.enableTime&&i.length>10){let[p,c]=i.split(/[T\s]+/),[D,f,S]=p.split("-").map(Number),v=c.split(":").map(Number),y=new Date(Date.UTC(D,f-1,S)),w=this.getUtcTimeFromDisplay(v[0]||0,v[1]||0,v[2]||0,y);h=new Date(Date.UTC(D,f-1,S,w.hour,w.minute,w.second)),this.endHour=w.hour,this.endMinute=w.minute,this.endSecond=w.second}else if(this.enableTime){let[p,c,D]=i.split("-").map(Number);h=new Date(Date.UTC(p,c-1,D,this.endHour,this.endMinute,this.endSecond))}else h=this.parseLocalDate(i);let o=l,m=h;if(l>h&&(o=h,m=l),this.minDate){let p=this.parseLocalDate(this.minDate);if(o<p){let c=`Start date must be on or after ${this.formatDateForError(this.minDate)}`;this.setInputValidationError(t,c);return}}if(this.maxDate){let p=this.parseLocalDate(this.maxDate);if(m>p){let c=`End date must be on or before ${this.formatDateForError(this.maxDate)}`;this.setInputValidationError(t,c);return}}this.selectedStart=o,this.selectedEnd=m,this.updateMonthViews(),t.value=`${this.formatDisplayDate(o,!0)} \u2013 ${this.formatDisplayDate(m,!1)}`,t.setCustomValidity(""),this.emitChange()}else{let r=this.parseAndFormatDate(a);if(!r){this.setInputValidationError(t,"Invalid date format");return}let n;if(this.enableTime&&r.length>10){let[s,i]=r.split(/[T\s]+/),[l,h,o]=s.split("-").map(Number),m=i.split(":").map(Number),p=new Date(Date.UTC(l,h-1,o)),c=this.getUtcTimeFromDisplay(m[0]||0,m[1]||0,m[2]||0,p);n=new Date(Date.UTC(l,h-1,o,c.hour,c.minute,c.second)),this.startHour=c.hour,this.startMinute=c.minute,this.startSecond=c.second}else if(this.enableTime){let[s,i,l]=r.split("-").map(Number);n=new Date(Date.UTC(s,i-1,l,this.startHour,this.startMinute,this.startSecond))}else n=this.parseLocalDate(r);if(this.minDate){let s=this.parseLocalDate(this.minDate);if(n<s){let i=`Date must be on or after ${this.formatDateForError(this.minDate)}`;this.setInputValidationError(t,i);return}}if(this.maxDate){let s=this.parseLocalDate(this.maxDate);if(n>s){let i=`Date must be on or before ${this.formatDateForError(this.maxDate)}`;this.setInputValidationError(t,i);return}}this.selectedStart=n,this.selectedEnd=null,this.updateMonthViews(),t.value=this.formatDisplayDate(n,!0),t.setCustomValidity(""),this.emitChange()}}handleStartInputBlur(e){let t=e.target,a=t.value||"";if(!a.trim()){this.selectedStart=null,t.setCustomValidity(""),this.emitChange();return}let r=this.parseAndFormatDate(a);if(!r){this.setInputValidationError(t,"Invalid date format");return}let n;if(this.enableTime&&r.length>10){let[s,i]=r.split(/[T\s]+/),[l,h,o]=s.split("-").map(Number),m=i.split(":").map(Number),p=new Date(Date.UTC(l,h-1,o)),c=this.getUtcTimeFromDisplay(m[0]||0,m[1]||0,m[2]||0,p);n=new Date(Date.UTC(l,h-1,o,c.hour,c.minute,c.second)),this.startHour=c.hour,this.startMinute=c.minute,this.startSecond=c.second}else if(this.enableTime){let[s,i,l]=r.split("-").map(Number);n=new Date(Date.UTC(s,i-1,l,this.startHour,this.startMinute,this.startSecond))}else n=this.parseLocalDate(r);if(this.minDate){let s=this.parseLocalDate(this.minDate);if(n<s){let i=`Date must be on or after ${this.formatDateForError(this.minDate)}`;this.setInputValidationError(t,i);return}}if(this.maxDate){let s=this.parseLocalDate(this.maxDate);if(n>s){let i=`Date must be on or before ${this.formatDateForError(this.maxDate)}`;this.setInputValidationError(t,i);return}}if(this.selectedEnd&&n>this.selectedEnd){this.setInputValidationError(t,"Start date must be before end date");return}this.selectedStart=n,this.leftMonth=new Date(n),t.value=this.formatDisplayDate(n,!0),t.setCustomValidity(""),this.emitChange()}handleEndInputBlur(e){let t=e.target,a=t.value||"";if(!a.trim()){this.selectedEnd=null,t.setCustomValidity(""),this.emitChange();return}let r=this.parseAndFormatDate(a);if(!r){this.setInputValidationError(t,"Invalid date format");return}let n;if(this.enableTime&&r.length>10){let[s,i]=r.split(/[T\s]+/),[l,h,o]=s.split("-").map(Number),m=i.split(":").map(Number),p=new Date(Date.UTC(l,h-1,o)),c=this.getUtcTimeFromDisplay(m[0]||0,m[1]||0,m[2]||0,p);n=new Date(Date.UTC(l,h-1,o,c.hour,c.minute,c.second)),this.endHour=c.hour,this.endMinute=c.minute,this.endSecond=c.second}else if(this.enableTime){let[s,i,l]=r.split("-").map(Number);n=new Date(Date.UTC(s,i-1,l,this.endHour,this.endMinute,this.endSecond))}else n=this.parseLocalDate(r);if(this.minDate){let s=this.parseLocalDate(this.minDate);if(n<s){let i=`Date must be on or after ${this.formatDateForError(this.minDate)}`;this.setInputValidationError(t,i);return}}if(this.maxDate){let s=this.parseLocalDate(this.maxDate);if(n>s){let i=`Date must be on or before ${this.formatDateForError(this.maxDate)}`;this.setInputValidationError(t,i);return}}if(this.selectedStart){if(this.enableTime&&this.isSameDay(n,this.selectedStart)){let s=this.startHour*3600+this.startMinute*60+this.startSecond;if(this.endHour*3600+this.endMinute*60+this.endSecond<s){this.setInputValidationError(t,"End time must be after start time when dates are the same");return}}else if(n<this.selectedStart){this.setInputValidationError(t,"End date must be after start date");return}}this.selectedEnd=n,this.selectedStart&&this.isSameMonth(this.selectedStart,this.selectedEnd)?(this.rightMonth=new Date(this.selectedStart),this.rightMonth.setMonth(this.rightMonth.getMonth()+1)):this.rightMonth=new Date(n),t.value=this.formatDisplayDate(n,!1),t.setCustomValidity(""),this.emitChange()}updateMonthViews(){this.selectedStart&&(this.leftMonth=new Date(this.selectedStart),this.range&&this.selectedEnd&&(this.isSameMonth(this.selectedStart,this.selectedEnd)?(this.rightMonth=new Date(this.selectedStart),this.rightMonth.setMonth(this.rightMonth.getMonth()+1)):this.rightMonth=new Date(this.selectedEnd)))}handleKeydown(e){if(e.key===" "){e.stopPropagation();return}e.key==="Enter"&&(e.preventDefault(),this.handleInputBlur(e))}previousMonth(e){if(e){let t=new Date(this.leftMonth);t.setMonth(t.getMonth()-1),this.leftMonth=t}else{let t=new Date(this.rightMonth);t.setMonth(t.getMonth()-1),this.rightMonth=t}}nextMonth(e){if(e){let t=new Date(this.leftMonth);t.setMonth(t.getMonth()+1),this.leftMonth=t}else{let t=new Date(this.rightMonth);t.setMonth(t.getMonth()+1),this.rightMonth=t}}toggleMonthDropdown(e,t){t.stopPropagation(),e?(this.showLeftMonthDropdown=!this.showLeftMonthDropdown,this.showRightMonthDropdown=!1):(this.showRightMonthDropdown=!this.showRightMonthDropdown,this.showLeftMonthDropdown=!1)}selectMonth(e,t){if(t){let a=new Date(this.leftMonth);a.setDate(1),a.setMonth(e),this.leftMonth=a,this.showLeftMonthDropdown=!1}else{let a=new Date(this.rightMonth);a.setDate(1),a.setMonth(e),this.rightMonth=a,this.showRightMonthDropdown=!1}}changeYear(e,t){if(t){let a=new Date(this.leftMonth);a.setFullYear(a.getFullYear()+e),this.leftMonth=a}else{let a=new Date(this.rightMonth);a.setFullYear(a.getFullYear()+e),this.rightMonth=a}}handleYearInput(e,t){let a=e.target,r=parseInt(a.value,10);if(!isNaN(r)&&r>=1900&&r<=2100)if(t){let n=new Date(this.leftMonth);n.setFullYear(r),this.leftMonth=n}else{let n=new Date(this.rightMonth);n.setFullYear(r),this.rightMonth=n}}getDaysInMonth(e){let t=e.getFullYear(),a=e.getMonth(),r=(o,m,p)=>this.enableTime?new Date(Date.UTC(o,m,p,0,0,0)):new Date(o,m,p),n=r(t,a,1),s=new Date(t,a+1,0),i=[],l=this.enableTime?n.getUTCDay():n.getDay();for(let o=l-1;o>=0;o--){let m=r(t,a,-o);i.push(m)}for(let o=1;o<=s.getDate();o++)i.push(r(t,a,o));let h=7-i.length%7;if(h<7)for(let o=1;o<=h;o++)i.push(r(t,a+1,o));return i}isSameDay(e,t){return!e||!t?!1:this.enableTime?e.getUTCFullYear()===t.getUTCFullYear()&&e.getUTCMonth()===t.getUTCMonth()&&e.getUTCDate()===t.getUTCDate():e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}isInRange(e){if(!this.selectedStart||!this.selectedEnd)return!1;let t=e.getTime();return t>=this.selectedStart.getTime()&&t<=this.selectedEnd.getTime()}isInHoverRange(e){if(!this.range||!this.selectedStart||!this.hoverDate||this.selectedEnd)return!1;let t=e.getTime(),a=Math.min(this.selectedStart.getTime(),this.hoverDate.getTime()),r=Math.max(this.selectedStart.getTime(),this.hoverDate.getTime());return t>=a&&t<=r}isDisabled(e){if(this.minDate){let t=this.parseLocalDate(this.minDate),a=new Date(Date.UTC(t.getUTCFullYear(),t.getUTCMonth(),t.getUTCDate()));if(new Date(Date.UTC(e.getUTCFullYear(),e.getUTCMonth(),e.getUTCDate()))<a)return!0}if(this.maxDate){let t=this.parseLocalDate(this.maxDate),a=new Date(Date.UTC(t.getUTCFullYear(),t.getUTCMonth(),t.getUTCDate()));if(new Date(Date.UTC(e.getUTCFullYear(),e.getUTCMonth(),e.getUTCDate()))>a)return!0}return!1}selectDate(e){if(this.isDisabled(e)){this.emit("terra-date-selection-invalid",{detail:{message:`You are not allowed to select dates outside ${this.minDate} to ${this.maxDate}.`}});return}if(this.clearInputValidation(),this.range)if(!this.selectedStart||this.selectedEnd)this.selectedStart=e,this.selectedEnd=null,this.isSelectingRange=!0;else{if(e<this.selectedStart?(this.selectedEnd=this.selectedStart,this.selectedStart=e):this.selectedEnd=e,this.isSelectingRange=!1,this.enableTime&&this.selectedStart&&this.selectedEnd&&this.isSameDay(this.selectedStart,this.selectedEnd)){let t=this.startHour*3600+this.startMinute*60+this.startSecond;this.endHour*3600+this.endMinute*60+this.endSecond<t&&this.emit("terra-date-selection-invalid",{detail:{message:"End time is before start time. Please adjust the time values."}})}this.emitChange(),this.inline||(this.isOpen=!1)}else this.selectedStart=e,this.selectedEnd=null,this.emitChange(),this.inline||(this.isOpen=!1)}handleDateHover(e){this.range&&this.selectedStart&&!this.selectedEnd&&(this.hoverDate=e)}selectPreset(e){let{startDate:t,endDate:a}=e.getValue();if(!this.isPresetWithinBounds({startDate:t,endDate:a})){this.emit("terra-date-selection-invalid",{detail:{message:`The preset "${e.label}" is not available within the allowed date range ${this.minDate} to ${this.maxDate}.`}});return}this.clearInputValidation();let{min:r,max:n}=this.getBounds();if(this.range){let s=t,i=a;if(s&&r&&s<r&&(s=new Date(r)),s&&n&&s>n&&(s=new Date(n)),i&&r&&i<r&&(i=new Date(r)),i&&n&&i>n&&(i=new Date(n)),s&&i&&i<s){let l=s;s=i,i=l}this.selectedStart=s,this.selectedEnd=i}else{let s=t;s&&r&&s<r&&(s=new Date(r)),s&&n&&s>n&&(s=new Date(n)),this.selectedStart=s,this.selectedEnd=null}this.selectedStart&&(this.leftMonth=new Date(this.selectedStart),this.range&&this.selectedEnd&&(this.rightMonth=new Date(this.selectedEnd))),this.emitChange(),!this.range&&!this.inline&&(this.isOpen=!1)}emitChange(){let e="",t="";if(this.selectedStart)if(this.enableTime){let a=new Date(this.selectedStart);a.setUTCHours(this.startHour,this.startMinute,this.startSecond,0),e=a.toISOString()}else{let a=this.selectedStart.getFullYear(),r=String(this.selectedStart.getMonth()+1).padStart(2,"0"),n=String(this.selectedStart.getDate()).padStart(2,"0");e=`${a}-${r}-${n}`}if(this.selectedEnd)if(this.enableTime){let a=new Date(this.selectedEnd);a.setUTCHours(this.endHour,this.endMinute,this.endSecond,0),t=a.toISOString()}else{let a=this.selectedEnd.getFullYear(),r=String(this.selectedEnd.getMonth()+1).padStart(2,"0"),n=String(this.selectedEnd.getDate()).padStart(2,"0");t=`${a}-${r}-${n}`}this.emit("terra-date-range-change",{detail:{startDate:e,endDate:t}})}initializeTimeFromDate(e,t){let a=e.getUTCHours(),r=e.getUTCMinutes(),n=e.getUTCSeconds();t?(this.startHour=a,this.startMinute=r,this.startSecond=n):(this.endHour=a,this.endMinute=r,this.endSecond=n)}changeTime(e,t,a){let r=a?this.startHour:this.endHour,n=a?this.startMinute:this.endMinute,s=a?this.startSecond:this.endSecond,i=a?this.selectedStart:this.selectedEnd,l=this.getDisplayTimeComponents(r,n,s,i),h=l.hour,o=l.minute,m=l.second;if(e==="hour")if(this.twelveHour){let c=this.to12Hour(l.hour),D=((c.hour-1+t)%12+12)%12+1;h=this.to24Hour(D,c.period)}else h=((l.hour+t)%24+24)%24;else e==="minute"?o=((l.minute+t)%60+60)%60:m=((l.second+t)%60+60)%60;let p=this.getUtcTimeFromDisplay(h,o,m,i);a?(this.startHour=p.hour,this.startMinute=p.minute,this.startSecond=p.second):(this.endHour=p.hour,this.endMinute=p.minute,this.endSecond=p.second),this.emitChange(),this.requestUpdate()}handleTimeInput(e,t,a){let r=e.target,n=parseInt(r.value,10),s=a?this.startHour:this.endHour,i=a?this.startMinute:this.endMinute,l=a?this.startSecond:this.endSecond,h=a?this.selectedStart:this.selectedEnd,o=this.getDisplayTimeComponents(s,i,l,h),m=this.twelveHour?this.to12Hour(o.hour):null,p=o.hour,c=o.minute,D=o.second;if(t==="hour"){let S=this.twelveHour?1:0,v=this.twelveHour?12:23;if(isNaN(n)||n<S||n>v){r.value=(m?m.hour:o.hour).toString().padStart(2,"0");return}p=this.twelveHour?this.to24Hour(n,m.period):n}else if(t==="minute"){if(isNaN(n)||n<0||n>=60){r.value=o.minute.toString().padStart(2,"0");return}c=n}else{if(isNaN(n)||n<0||n>=60){r.value=o.second.toString().padStart(2,"0");return}D=n}let f=this.getUtcTimeFromDisplay(p,c,D,h);a?(this.startHour=f.hour,this.startMinute=f.minute,this.startSecond=f.second):(this.endHour=f.hour,this.endMinute=f.minute,this.endSecond=f.second),this.emitChange(),this.requestUpdate()}renderCalendar(e,t=!0){let a=this.getDaysInMonth(e),r=e.getMonth(),n=t?this.showLeftMonthDropdown:this.showRightMonthDropdown;return M`
+            <div class="calendar">
+                <div class="calendar__header">
+                    <button
+                        type="button"
+                        class="calendar__nav"
+                        @click=${()=>this.previousMonth(t)}
+                    >
+                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                            <path
+                                d="M10 12L6 8L10 4"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                    </button>
+
+                    <div class="calendar__month-year">
+                        <div class="calendar__month-dropdown-wrapper">
+                            <button
+                                type="button"
+                                class="calendar__month-button"
+                                @click=${s=>this.toggleMonthDropdown(t,s)}
+                            >
+                                ${this.MONTHS[e.getMonth()]}
+                                <svg
+                                    width="12"
+                                    height="12"
+                                    viewBox="0 0 12 12"
+                                    fill="none"
+                                    class="calendar__month-icon"
+                                >
+                                    <path
+                                        d="M3 5L6 8L9 5"
+                                        stroke="currentColor"
+                                        stroke-width="1.5"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                            </button>
+
+                            ${n?M`
+                                      <div class="calendar__month-dropdown">
+                                          ${this.MONTHS.map((s,i)=>M`
+                                                  <button
+                                                      type="button"
+                                                      class="calendar__month-option ${i===e.getMonth()?"calendar__month-option--selected":""}"
+                                                      @click=${()=>this.selectMonth(i,t)}
+                                                  >
+                                                      ${i===e.getMonth()?M`
+                                                                <svg
+                                                                    width="16"
+                                                                    height="16"
+                                                                    viewBox="0 0 16 16"
+                                                                    fill="none"
+                                                                    class="calendar__month-check"
+                                                                >
+                                                                    <path
+                                                                        d="M13 4L6 11L3 8"
+                                                                        stroke="currentColor"
+                                                                        stroke-width="2"
+                                                                        stroke-linecap="round"
+                                                                        stroke-linejoin="round"
+                                                                    />
+                                                                </svg>
+                                                            `:""}
+                                                      ${s}
+                                                  </button>
+                                              `)}
+                                      </div>
+                                  `:""}
+                        </div>
+
+                        <div class="calendar__year-input-wrapper">
+                            <input
+                                type="number"
+                                class="calendar__year-input"
+                                .value=${e.getFullYear().toString()}
+                                @input=${s=>this.handleYearInput(s,t)}
+                                @blur=${s=>{let i=s.target;i.value=e.getFullYear().toString()}}
+                                min="1900"
+                                max="2100"
+                            />
+                            <div class="calendar__year-spinners">
+                                <button
+                                    type="button"
+                                    class="calendar__year-spinner calendar__year-spinner--up"
+                                    @click=${()=>this.changeYear(1,t)}
+                                >
+                                    <svg
+                                        width="10"
+                                        height="10"
+                                        viewBox="0 0 10 10"
+                                        fill="none"
+                                    >
+                                        <path
+                                            d="M2 6L5 3L8 6"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                </button>
+                                <button
+                                    type="button"
+                                    class="calendar__year-spinner calendar__year-spinner--down"
+                                    @click=${()=>this.changeYear(-1,t)}
+                                >
+                                    <svg
+                                        width="10"
+                                        height="10"
+                                        viewBox="0 0 10 10"
+                                        fill="none"
+                                    >
+                                        <path
+                                            d="M2 4L5 7L8 4"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <button
+                        type="button"
+                        class="calendar__nav"
+                        @click=${()=>this.nextMonth(t)}
+                    >
+                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                            <path
+                                d="M6 12L10 8L6 4"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                    </button>
+                </div>
+                <div class="calendar__weekdays">
+                    ${this.DAYS.map(s=>M`<div class="calendar__weekday">${s}</div>`)}
+                </div>
+                <div class="calendar__days">
+                    ${a.map(s=>{let i=this.enableTime?s.getUTCMonth():s.getMonth(),l=this.enableTime?s.getUTCDate():s.getDate(),h=i===r,o=this.isSameDay(s,this.selectedStart)||this.isSameDay(s,this.selectedEnd),m=this.isSameDay(s,this.selectedStart),p=this.isSameDay(s,this.selectedEnd),c=this.isInRange(s),D=this.isInHoverRange(s),f=this.isDisabled(s);return M`
+                            <button
+                                type="button"
+                                class="calendar__day ${h?"":"calendar__day--outside"} 
+                                       ${o?"calendar__day--selected":""}
+                                       ${m?"calendar__day--start":""}
+                                       ${p?"calendar__day--end":""}
+                                       ${c?"calendar__day--in-range":""}
+                                       ${D?"calendar__day--hover-range":""}
+                                       ${f?"calendar__day--disabled":""}"
+                                @click=${()=>this.selectDate(s)}
+                                @mouseenter=${()=>this.handleDateHover(s)}
+                                ?disabled=${f}
+                            >
+                                ${l}
+                            </button>
+                        `})}
+                </div>
+            </div>
+        `}renderTimePicker(){if(!this.enableTime)return"";let e=this.getDisplayTimeComponents(this.startHour,this.startMinute,this.startSecond,this.selectedStart),t=this.getDisplayTimeComponents(this.endHour,this.endMinute,this.endSecond,this.selectedEnd),a=this.twelveHour?this.to12Hour(e.hour):null,r=this.twelveHour?this.to12Hour(t.hour):null,n=this.twelveHour?"1":"0",s=this.twelveHour?"12":"23";return M`
+            <div class="date-picker__time">
+                <div class="date-picker__time-section">
+                    <div class="date-picker__time-inputs">
+                        <div class="date-picker__time-input-group">
+                            <input
+                                type="number"
+                                class="date-picker__time-input"
+                                .value=${(a?a.hour:e.hour).toString().padStart(2,"0")}
+                                @input=${i=>this.handleTimeInput(i,"hour",!0)}
+                                @blur=${i=>{let l=i.target,h=this.getDisplayTimeComponents(this.startHour,this.startMinute,this.startSecond,this.selectedStart),o=this.twelveHour?this.to12Hour(h.hour):null;l.value=(o?o.hour:h.hour).toString().padStart(2,"0")}}
+                                min=${n}
+                                max=${s}
+                            />
+                            <div class="date-picker__time-spinners">
+                                <button
+                                    type="button"
+                                    class="date-picker__time-spinner"
+                                    @click=${()=>this.changeTime("hour",1,!0)}
+                                >
+                                    <svg
+                                        width="10"
+                                        height="10"
+                                        viewBox="0 0 10 10"
+                                        fill="none"
+                                    >
+                                        <path
+                                            d="M2 6L5 3L8 6"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                </button>
+                                <button
+                                    type="button"
+                                    class="date-picker__time-spinner"
+                                    @click=${()=>this.changeTime("hour",-1,!0)}
+                                >
+                                    <svg
+                                        width="10"
+                                        height="10"
+                                        viewBox="0 0 10 10"
+                                        fill="none"
+                                    >
+                                        <path
+                                            d="M2 4L5 7L8 4"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+
+                        <span class="date-picker__time-separator">:</span>
+
+                        <div class="date-picker__time-input-group">
+                            <input
+                                type="number"
+                                class="date-picker__time-input"
+                                .value=${e.minute.toString().padStart(2,"0")}
+                                @input=${i=>this.handleTimeInput(i,"minute",!0)}
+                                @blur=${i=>{let l=i.target,h=this.getDisplayTimeComponents(this.startHour,this.startMinute,this.startSecond,this.selectedStart);l.value=h.minute.toString().padStart(2,"0")}}
+                                min="0"
+                                max="59"
+                            />
+                            <div class="date-picker__time-spinners">
+                                <button
+                                    type="button"
+                                    class="date-picker__time-spinner"
+                                    @click=${()=>this.changeTime("minute",1,!0)}
+                                >
+                                    <svg
+                                        width="10"
+                                        height="10"
+                                        viewBox="0 0 10 10"
+                                        fill="none"
+                                    >
+                                        <path
+                                            d="M2 6L5 3L8 6"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                </button>
+                                <button
+                                    type="button"
+                                    class="date-picker__time-spinner"
+                                    @click=${()=>this.changeTime("minute",-1,!0)}
+                                >
+                                    <svg
+                                        width="10"
+                                        height="10"
+                                        viewBox="0 0 10 10"
+                                        fill="none"
+                                    >
+                                        <path
+                                            d="M2 4L5 7L8 4"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+
+                        <span class="date-picker__time-separator">:</span>
+
+                        <div class="date-picker__time-input-group">
+                            <input
+                                type="number"
+                                class="date-picker__time-input"
+                                .value=${e.second.toString().padStart(2,"0")}
+                                @input=${i=>this.handleTimeInput(i,"second",!0)}
+                                @blur=${i=>{let l=i.target,h=this.getDisplayTimeComponents(this.startHour,this.startMinute,this.startSecond,this.selectedStart);l.value=h.second.toString().padStart(2,"0")}}
+                                min="0"
+                                max="59"
+                            />
+                            <div class="date-picker__time-spinners">
+                                <button
+                                    type="button"
+                                    class="date-picker__time-spinner"
+                                    @click=${()=>this.changeTime("second",1,!0)}
+                                >
+                                    <svg
+                                        width="10"
+                                        height="10"
+                                        viewBox="0 0 10 10"
+                                        fill="none"
+                                    >
+                                        <path
+                                            d="M2 6L5 3L8 6"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                </button>
+                                <button
+                                    type="button"
+                                    class="date-picker__time-spinner"
+                                    @click=${()=>this.changeTime("second",-1,!0)}
+                                >
+                                    <svg
+                                        width="10"
+                                        height="10"
+                                        viewBox="0 0 10 10"
+                                        fill="none"
+                                    >
+                                        <path
+                                            d="M2 4L5 7L8 4"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+
+                        ${this.twelveHour?M`
+                                  <button
+                                      type="button"
+                                      class="date-picker__time-period"
+                                      @click=${()=>this.togglePeriod(!0)}
+                                  >
+                                      ${a.period}
+                                  </button>
+                              `:""}
+                    </div>
+                </div>
+
+                ${this.range?M`
+                          <span class="date-picker__separator">–</span>
+
+                          <div class="date-picker__time-section">
+                              <div class="date-picker__time-inputs">
+                                  <div class="date-picker__time-input-group">
+                                      <input
+                                          type="number"
+                                          class="date-picker__time-input"
+                                          .value=${(r?r.hour:t.hour).toString().padStart(2,"0")}
+                                          @input=${i=>this.handleTimeInput(i,"hour",!1)}
+                                          @blur=${i=>{let l=i.target,h=this.getDisplayTimeComponents(this.endHour,this.endMinute,this.endSecond,this.selectedEnd),o=this.twelveHour?this.to12Hour(h.hour):null;l.value=(o?o.hour:h.hour).toString().padStart(2,"0")}}
+                                          min=${n}
+                                          max=${s}
+                                      />
+                                      <div class="date-picker__time-spinners">
+                                          <button
+                                              type="button"
+                                              class="date-picker__time-spinner"
+                                              @click=${()=>this.changeTime("hour",1,!1)}
+                                          >
+                                              <svg
+                                                  width="10"
+                                                  height="10"
+                                                  viewBox="0 0 10 10"
+                                                  fill="none"
+                                              >
+                                                  <path
+                                                      d="M2 6L5 3L8 6"
+                                                      stroke="currentColor"
+                                                      stroke-width="1.5"
+                                                      stroke-linecap="round"
+                                                      stroke-linejoin="round"
+                                                  />
+                                              </svg>
+                                          </button>
+                                          <button
+                                              type="button"
+                                              class="date-picker__time-spinner"
+                                              @click=${()=>this.changeTime("hour",-1,!1)}
+                                          >
+                                              <svg
+                                                  width="10"
+                                                  height="10"
+                                                  viewBox="0 0 10 10"
+                                                  fill="none"
+                                              >
+                                                  <path
+                                                      d="M2 4L5 7L8 4"
+                                                      stroke="currentColor"
+                                                      stroke-width="1.5"
+                                                      stroke-linecap="round"
+                                                      stroke-linejoin="round"
+                                                  />
+                                              </svg>
+                                          </button>
+                                      </div>
+                                  </div>
+
+                                  <span class="date-picker__time-separator">:</span>
+
+                                  <div class="date-picker__time-input-group">
+                                      <input
+                                          type="number"
+                                          class="date-picker__time-input"
+                                          .value=${t.minute.toString().padStart(2,"0")}
+                                          @input=${i=>this.handleTimeInput(i,"minute",!1)}
+                                          @blur=${i=>{let l=i.target,h=this.getDisplayTimeComponents(this.endHour,this.endMinute,this.endSecond,this.selectedEnd);l.value=h.minute.toString().padStart(2,"0")}}
+                                          min="0"
+                                          max="59"
+                                      />
+                                      <div class="date-picker__time-spinners">
+                                          <button
+                                              type="button"
+                                              class="date-picker__time-spinner"
+                                              @click=${()=>this.changeTime("minute",1,!1)}
+                                          >
+                                              <svg
+                                                  width="10"
+                                                  height="10"
+                                                  viewBox="0 0 10 10"
+                                                  fill="none"
+                                              >
+                                                  <path
+                                                      d="M2 6L5 3L8 6"
+                                                      stroke="currentColor"
+                                                      stroke-width="1.5"
+                                                      stroke-linecap="round"
+                                                      stroke-linejoin="round"
+                                                  />
+                                              </svg>
+                                          </button>
+                                          <button
+                                              type="button"
+                                              class="date-picker__time-spinner"
+                                              @click=${()=>this.changeTime("minute",-1,!1)}
+                                          >
+                                              <svg
+                                                  width="10"
+                                                  height="10"
+                                                  viewBox="0 0 10 10"
+                                                  fill="none"
+                                              >
+                                                  <path
+                                                      d="M2 4L5 7L8 4"
+                                                      stroke="currentColor"
+                                                      stroke-width="1.5"
+                                                      stroke-linecap="round"
+                                                      stroke-linejoin="round"
+                                                  />
+                                              </svg>
+                                          </button>
+                                      </div>
+                                  </div>
+
+                                  <span class="date-picker__time-separator">:</span>
+
+                                  <div class="date-picker__time-input-group">
+                                      <input
+                                          type="number"
+                                          class="date-picker__time-input"
+                                          .value=${t.second.toString().padStart(2,"0")}
+                                          @input=${i=>this.handleTimeInput(i,"second",!1)}
+                                          @blur=${i=>{let l=i.target,h=this.getDisplayTimeComponents(this.endHour,this.endMinute,this.endSecond,this.selectedEnd);l.value=h.second.toString().padStart(2,"0")}}
+                                          min="0"
+                                          max="59"
+                                      />
+                                      <div class="date-picker__time-spinners">
+                                          <button
+                                              type="button"
+                                              class="date-picker__time-spinner"
+                                              @click=${()=>this.changeTime("second",1,!1)}
+                                          >
+                                              <svg
+                                                  width="10"
+                                                  height="10"
+                                                  viewBox="0 0 10 10"
+                                                  fill="none"
+                                              >
+                                                  <path
+                                                      d="M2 6L5 3L8 6"
+                                                      stroke="currentColor"
+                                                      stroke-width="1.5"
+                                                      stroke-linecap="round"
+                                                      stroke-linejoin="round"
+                                                  />
+                                              </svg>
+                                          </button>
+                                          <button
+                                              type="button"
+                                              class="date-picker__time-spinner"
+                                              @click=${()=>this.changeTime("second",-1,!1)}
+                                          >
+                                              <svg
+                                                  width="10"
+                                                  height="10"
+                                                  viewBox="0 0 10 10"
+                                                  fill="none"
+                                              >
+                                                  <path
+                                                      d="M2 4L5 7L8 4"
+                                                      stroke="currentColor"
+                                                      stroke-width="1.5"
+                                                      stroke-linecap="round"
+                                                      stroke-linejoin="round"
+                                                  />
+                                              </svg>
+                                          </button>
+                                      </div>
+                                  </div>
+                              </div>
+
+                              ${this.twelveHour?M`
+                                        <button
+                                            type="button"
+                                            class="date-picker__time-period"
+                                            @click=${()=>this.togglePeriod(!1)}
+                                        >
+                                            ${r.period}
+                                        </button>
+                                    `:""}
+                          </div>
+                      `:""}
+            </div>
+        `}renderCalendarIcon(){return M`
+            <svg
+                slot="suffix"
+                class="date-picker__icon"
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+            >
+                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+                <line x1="16" y1="2" x2="16" y2="6"></line>
+                <line x1="8" y1="2" x2="8" y2="6"></line>
+                <line x1="3" y1="10" x2="21" y2="10"></line>
+            </svg>
+        `}renderCalendarContent(){return M`
+            <div class="date-picker__dropdown" part="calendar">
+                ${this.showClose?M`
+                          <div class="dropdown-header">
+                              <button
+                                  class="date-picker__close-btn"
+                                  @click=${e=>{e.stopPropagation(),this.close()}}
+                                  aria-label="Close"
+                              >
+                                  ✕
+                              </button>
+                          </div>
+                      `:U}
+                <div class="date-picker__content">
+                    ${this.showPresets&&this.filteredPresets.length>0?M`
+                              <div class="date-picker__sidebar" part="sidebar">
+                                  <slot name="sidebar-header"></slot>
+
+                                  <div class="presets">
+                                      ${this.filteredPresets.map(e=>M`
+                                              <button
+                                                  type="button"
+                                                  class="date-picker__preset"
+                                                  @click=${()=>this.selectPreset(e)}
+                                              >
+                                                  ${e.label}
+                                              </button>
+                                          `)}
+                                  </div>
+
+                                  <slot name="sidebar-footer">
+                                      <terra-button
+                                          outline
+                                          variant="default"
+                                          size="small"
+                                          @click=${()=>this.clear()}
+                                      >
+                                          ${this.clearAllLabel}
+                                      </terra-button>
+                                  </slot>
+                              </div>
+                          `:""}
+
+                    <div class="date-picker__calendars">
+                        ${this.renderCalendar(this.leftMonth,!0)}
+                        ${this.range?this.renderCalendar(this.rightMonth,!1):""}
+                    </div>
+                </div>
+
+                ${this.enableTime?this.renderTimePicker():""}
+            </div>
+        `}render(){let e=this.range&&this.splitInputs;return this.inline?M`
+                <div
+                    class="date-picker date-picker--inline ${e?"date-picker--split-inputs":""}"
+                    @click=${t=>t.stopPropagation()}
+                >
+                    ${e?M`
+                              <div class="date-picker__inputs">
+                                  <terra-input
+                                      .label=${this.startLabel||(this.label?`${this.label} (Start)`:"Start Date")}
+                                      .hideLabel=${this.hideLabel}
+                                      .helpText=${this.startHelpText||this.helpText}
+                                      .value=${this.getStartDateDisplayValue()}
+                                      @terra-blur=${this.handleStartInputBlur}
+                                      @keydown=${this.handleKeydown}
+                                      placeholder=${this.startPlaceholder}
+                                      name="start-date"
+                                  >
+                                      ${this.renderCalendarIcon()}
+                                  </terra-input>
+                                  <terra-input
+                                      .label=${this.endLabel||(this.label?`${this.label} (End)`:"End Date")}
+                                      .hideLabel=${this.hideLabel}
+                                      .helpText=${this.endHelpText||this.helpText}
+                                      .value=${this.getEndDateDisplayValue()}
+                                      @terra-blur=${this.handleEndInputBlur}
+                                      @keydown=${this.handleKeydown}
+                                      placeholder=${this.endPlaceholder}
+                                      name="end-date"
+                                  >
+                                      ${this.renderCalendarIcon()}
+                                  </terra-input>
+                              </div>
+                          `:M`
+                              <terra-input
+                                  .label=${this.label}
+                                  .hideLabel=${this.hideLabel}
+                                  .helpText=${this.helpText}
+                                  .value=${this.getDisplayValue()}
+                                  placeholder=${this.placeholder}
+                                  @terra-blur=${this.handleInputBlur}
+                                  @keydown=${this.handleKeydown}
+                                  name="date"
+                              >
+                                  ${this.renderCalendarIcon()}
+                              </terra-input>
+                          `}
+
+                    <slot name="additional-text"></slot>
+
+                    <div class="date-picker__dropdown-wrapper">
+                        <div
+                            class="date-picker__dropdown date-picker__dropdown--inline"
+                            part="calendar"
+                        >
+                            <div class="date-picker__content">
+                                ${this.showPresets&&this.filteredPresets.length>0?M`
+                                          <div
+                                              class="date-picker__sidebar"
+                                              part="sidebar"
+                                          >
+                                              <slot name="sidebar-header"></slot>
+
+                                              <div class="presets">
+                                                  ${this.filteredPresets.map(t=>M`
+                                                          <button
+                                                              type="button"
+                                                              class="date-picker__preset"
+                                                              @click=${()=>this.selectPreset(t)}
+                                                          >
+                                                              ${t.label}
+                                                          </button>
+                                                      `)}
+                                              </div>
+
+                                              <slot name="sidebar-footer">
+                                                  <terra-button
+                                                      outline
+                                                      variant="default"
+                                                      size="small"
+                                                      @click=${()=>this.clear()}
+                                                  >
+                                                      ${this.clearAllLabel}
+                                                  </terra-button>
+                                              </slot>
+                                          </div>
+                                      `:""}
+
+                                <div class="date-picker__calendars">
+                                    ${this.renderCalendar(this.leftMonth,!0)}
+                                    ${this.range?this.renderCalendar(this.rightMonth,!1):""}
+                                </div>
+                            </div>
+
+                            ${this.enableTime?this.renderTimePicker():""}
+                        </div>
+                    </div>
+                </div>
+            `:M`
+            <div
+                class="date-picker ${e?"date-picker--split-inputs":""}"
+                @click=${t=>t.stopPropagation()}
+            >
+                ${e?M`
+                          <div class="date-picker__inputs">
+                              <terra-dropdown
+                                  ${H(this.dropdownRef)}
+                                  placement="bottom-start"
+                                  distance="4"
+                                  @terra-show=${this.handleDropdownShow}
+                                  @terra-hide=${this.handleDropdownHide}
+                                  hoist
+                              >
+                                  <terra-input
+                                      slot="trigger"
+                                      .label=${this.startLabel||(this.label?`${this.label} (Start)`:"Start Date")}
+                                      .hideLabel=${this.hideLabel}
+                                      .helpText=${this.startHelpText||this.helpText}
+                                      .value=${this.getStartDateDisplayValue()}
+                                      placeholder=${this.startPlaceholder}
+                                      @terra-blur=${this.handleStartInputBlur}
+                                      @keydown=${this.handleKeydown}
+                                      name="start-date"
+                                  >
+                                      ${this.renderCalendarIcon()}
+                                  </terra-input>
+                                  ${this.renderCalendarContent()}
+                              </terra-dropdown>
+                              <terra-dropdown
+                                  placement="bottom-start"
+                                  distance="4"
+                                  @terra-show=${this.handleDropdownShow}
+                                  @terra-hide=${this.handleDropdownHide}
+                                  hoist
+                              >
+                                  <terra-input
+                                      slot="trigger"
+                                      .label=${this.endLabel||(this.label?`${this.label} (End)`:"End Date")}
+                                      .hideLabel=${this.hideLabel}
+                                      .helpText=${this.endHelpText||this.helpText}
+                                      .value=${this.getEndDateDisplayValue()}
+                                      placeholder=${this.endPlaceholder}
+                                      @terra-blur=${this.handleEndInputBlur}
+                                      @keydown=${this.handleKeydown}
+                                      name="end-date"
+                                  >
+                                      ${this.renderCalendarIcon()}
+                                  </terra-input>
+                                  ${this.renderCalendarContent()}
+                              </terra-dropdown>
+                          </div>
+                      `:M`
+                          <terra-dropdown
+                              ${H(this.dropdownRef)}
+                              placement="bottom-start"
+                              distance="4"
+                              @terra-show=${this.handleDropdownShow}
+                              @terra-hide=${this.handleDropdownHide}
+                              hoist
+                          >
+                              <terra-input
+                                  slot="trigger"
+                                  .label=${this.label}
+                                  .hideLabel=${this.hideLabel}
+                                  .helpText=${this.helpText}
+                                  .value=${this.getDisplayValue()}
+                                  placeholder=${this.placeholder}
+                                  @terra-blur=${this.handleInputBlur}
+                                  @keydown=${this.handleKeydown}
+                                  name="date"
+                              >
+                                  ${this.renderCalendarIcon()}
+                              </terra-input>
+                              ${this.renderCalendarContent()}
+                          </terra-dropdown>
+                      `}
+            </div>
+        `}};d.styles=[$,k],d.dependencies={"terra-button":_,"terra-input":C,"terra-dropdown":E},u([g()],d.prototype,"id",2),u([g({type:Boolean,reflect:!0})],d.prototype,"range",2),u([g({attribute:"min-date",reflect:!0})],d.prototype,"minDate",2),u([g({attribute:"max-date",reflect:!0})],d.prototype,"maxDate",2),u([g({attribute:"start-date",reflect:!0})],d.prototype,"startDate",2),u([g({attribute:"end-date",reflect:!0})],d.prototype,"endDate",2),u([g({attribute:"hide-label",type:Boolean})],d.prototype,"hideLabel",2),u([g()],d.prototype,"label",2),u([g({attribute:"help-text"})],d.prototype,"helpText",2),u([g({attribute:"start-help-text"})],d.prototype,"startHelpText",2),u([g({attribute:"end-help-text"})],d.prototype,"endHelpText",2),u([g({attribute:"start-label"})],d.prototype,"startLabel",2),u([g({attribute:"end-label"})],d.prototype,"endLabel",2),u([g({type:Boolean,attribute:"show-presets"})],d.prototype,"showPresets",2),u([g({type:Array})],d.prototype,"presets",2),u([g({type:Boolean,attribute:"enable-time"})],d.prototype,"enableTime",2),u([g({attribute:"display-format"})],d.prototype,"displayFormat",2),u([g({type:Boolean})],d.prototype,"inline",2),u([g({type:Boolean,attribute:"split-inputs"})],d.prototype,"splitInputs",2),u([g()],d.prototype,"placeholder",2),u([g()],d.prototype,"startPlaceholder",2),u([g()],d.prototype,"endPlaceholder",2),u([g({reflect:!0})],d.prototype,"role",2),u([g({reflect:!0,attribute:"aria-label"})],d.prototype,"ariaLabel",2),u([g({type:Boolean})],d.prototype,"hideClearAll",2),u([g()],d.prototype,"clearAllLabel",2),u([g({type:Boolean,attribute:"use-end-of-day"})],d.prototype,"useEndOfDay",2),u([g({attribute:"closable",type:Boolean})],d.prototype,"showClose",2),u([g()],d.prototype,"timezone",2),u([g({type:Boolean,attribute:"twelve-hour"})],d.prototype,"twelveHour",2),u([b()],d.prototype,"isOpen",2),u([b()],d.prototype,"leftMonth",2),u([b()],d.prototype,"rightMonth",2),u([b()],d.prototype,"selectedStart",2),u([b()],d.prototype,"selectedEnd",2),u([b()],d.prototype,"hoverDate",2),u([b()],d.prototype,"isSelectingRange",2),u([b()],d.prototype,"showLeftMonthDropdown",2),u([b()],d.prototype,"showRightMonthDropdown",2),u([b()],d.prototype,"startHour",2),u([b()],d.prototype,"startMinute",2),u([b()],d.prototype,"startSecond",2),u([b()],d.prototype,"endHour",2),u([b()],d.prototype,"endMinute",2),u([b()],d.prototype,"endSecond",2),u([b()],d.prototype,"selectedDates",2),u([L(".date-picker__dropdown")],d.prototype,"dropdown",2);export{d as a};