@nasa-terra/components 0.0.179 → 0.0.182

package/dist/chunks/chunk.KBQI5V5Q.js

@@ -0,0 +1,749 @@
+import{a as _}from"./chunk.IVAJTYHP.js";import{a as $}from"./chunk.WZJ6BLFI.js";import{a as y}from"./chunk.25IJTRN2.js";import{a as S}from"./chunk.PAOPYU6H.js";import{a as M,b as w}from"./chunk.OTF3DTPS.js";import{e as l}from"./chunk.INFVQQSJ.js";import{property as u,state as f,query as k}from"lit/decorators.js";import{html as m}from"lit";import{createRef as C,ref as T}from"lit/directives/ref.js";import{isValid as E}from"date-fns";var o=class extends w{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.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=C();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}parseLocalDate(e){if(/^\d{4}-\d{2}-\d{2}$/.test(e)){let[s,i,n]=e.split("-").map(Number);return this.enableTime?new Date(Date.UTC(s,i-1,n,0,0,0)):new Date(s,i-1,n)}if(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/.test(e)){let[s,i]=e.split("T"),[n,r,h]=s.split("-").map(Number),[c,d,p]=i.split(":").map(Number);return new Date(Date.UTC(n,r-1,h,c,d,p))}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:s,max:i}=this.getBounds();if(!this.range)return!(!t||s&&t<s||i&&t>i);let n=t!=null?t:new Date(-864e13),r=a!=null?a:new Date(864e13);if(!s&&!i)return!0;let h=s!=null?s:new Date(-864e13),c=i!=null?i:new Date(864e13);return r>=h&&n<=c}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 r=e.getUTCFullYear(),h=String(e.getUTCMonth()+1).padStart(2,"0"),c=String(e.getUTCDate()).padStart(2,"0"),d=String(t?this.startHour:this.endHour).padStart(2,"0"),p=String(t?this.startMinute:this.endMinute).padStart(2,"0"),g=String(t?this.startSecond:this.endSecond).padStart(2,"0");return a.replace("YYYY",r.toString()).replace("MM",h).replace("DD",c).replace("HH",d).replace("mm",p).replace("ss",g)}let s=e.getFullYear(),i=String(e.getMonth()+1).padStart(2,"0"),n=String(e.getDate()).padStart(2,"0");return a.replace("YYYY",s.toString()).replace("MM",i).replace("DD",n)}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}$/,s=/^\d{4}-\d{2}-\d{2}[T\s]\d{1,2}:\d{2}(:\d{2})?$/,i;if(a.test(t))i=this.parseLocalDate(t);else if(this.enableTime&&s.test(t)){let[n,r]=t.split(/[T\s]+/),[h,c,d]=n.split("-").map(Number),p=r.split(":").map(Number),g=p[0]||0,D=p[1]||0,v=p[2]||0;i=new Date(Date.UTC(h,c-1,d,g,D,v))}else if(i=new Date(t),!E(i))return null;if(!E(i))return null;if(this.enableTime){if(a.test(t))return t;{let n=i.getUTCFullYear(),r=i.getUTCMonth()+1,h=i.getUTCDate(),c=i.getUTCHours(),d=i.getUTCMinutes(),p=i.getUTCSeconds();return`${n}-${String(r).padStart(2,"0")}-${String(h).padStart(2,"0")}T${String(c).padStart(2,"0")}:${String(d).padStart(2,"0")}:${String(p).padStart(2,"0")}`}}else{let n=i.getFullYear(),r=i.getMonth()+1,h=i.getDate();return`${n}-${String(r).padStart(2,"0")}-${String(h).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 i=a.replace(/(\d{2})-(\d{4})/,"$1 - $2").split(/\s*–\s*|\s+-\s+/);if(i.length!==2){this.setInputValidationError(t,"Date range must be in format: YYYY-MM-DD \u2013 YYYY-MM-DD");return}let n=this.parseAndFormatDate(i[0]),r=this.parseAndFormatDate(i[1]);if(!n){this.setInputValidationError(t,"Invalid start date format");return}if(!r){this.setInputValidationError(t,"Invalid end date format");return}let h,c;if(this.enableTime&&n.includes("T"))h=new Date(n),this.initializeTimeFromDate(h,!0);else if(this.enableTime){let[g,D,v]=n.split("-").map(Number);h=new Date(Date.UTC(g,D-1,v,this.startHour,this.startMinute,this.startSecond))}else h=this.parseLocalDate(n);if(this.enableTime&&r.includes("T"))c=new Date(r),this.initializeTimeFromDate(c,!1);else if(this.enableTime){let[g,D,v]=r.split("-").map(Number);c=new Date(Date.UTC(g,D-1,v,this.endHour,this.endMinute,this.endSecond))}else c=this.parseLocalDate(r);let d=h,p=c;if(h>c&&(d=c,p=h),this.minDate){let g=this.parseLocalDate(this.minDate);if(d<g){let D=`Start date must be on or after ${this.formatDateForError(this.minDate)}`;this.setInputValidationError(t,D);return}}if(this.maxDate){let g=this.parseLocalDate(this.maxDate);if(p>g){let D=`End date must be on or before ${this.formatDateForError(this.maxDate)}`;this.setInputValidationError(t,D);return}}this.selectedStart=d,this.selectedEnd=p,this.updateMonthViews(),t.value=`${n} - ${r}`,t.setCustomValidity(""),this.emitChange()}else{let s=this.parseAndFormatDate(a);if(!s){this.setInputValidationError(t,"Invalid date format");return}let i;if(this.enableTime&&s.includes("T"))i=new Date(s),this.initializeTimeFromDate(i,!0);else if(this.enableTime){let[n,r,h]=s.split("-").map(Number);i=new Date(Date.UTC(n,r-1,h,this.startHour,this.startMinute,this.startSecond))}else i=this.parseLocalDate(s);if(this.minDate){let n=this.parseLocalDate(this.minDate);if(i<n){let r=`Date must be on or after ${this.formatDateForError(this.minDate)}`;this.setInputValidationError(t,r);return}}if(this.maxDate){let n=this.parseLocalDate(this.maxDate);if(i>n){let r=`Date must be on or before ${this.formatDateForError(this.maxDate)}`;this.setInputValidationError(t,r);return}}this.selectedStart=i,this.selectedEnd=null,this.updateMonthViews(),t.value=s,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 s=this.parseAndFormatDate(a);if(!s){this.setInputValidationError(t,"Invalid date format");return}let i;if(this.enableTime&&s.includes("T"))i=new Date(s),this.initializeTimeFromDate(i,!0);else if(this.enableTime){let[n,r,h]=s.split("-").map(Number);i=new Date(Date.UTC(n,r-1,h,this.startHour,this.startMinute,this.startSecond))}else i=this.parseLocalDate(s);if(this.minDate){let n=this.parseLocalDate(this.minDate);if(i<n){let r=`Date must be on or after ${this.formatDateForError(this.minDate)}`;this.setInputValidationError(t,r);return}}if(this.maxDate){let n=this.parseLocalDate(this.maxDate);if(i>n){let r=`Date must be on or before ${this.formatDateForError(this.maxDate)}`;this.setInputValidationError(t,r);return}}if(this.selectedEnd&&i>this.selectedEnd){this.setInputValidationError(t,"Start date must be before end date");return}this.selectedStart=i,this.leftMonth=new Date(i),t.value=s,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 s=this.parseAndFormatDate(a);if(!s){this.setInputValidationError(t,"Invalid date format");return}let i;if(this.enableTime&&s.includes("T"))i=new Date(s),this.initializeTimeFromDate(i,!1);else if(this.enableTime){let[n,r,h]=s.split("-").map(Number);i=new Date(Date.UTC(n,r-1,h,this.endHour,this.endMinute,this.endSecond))}else i=this.parseLocalDate(s);if(this.minDate){let n=this.parseLocalDate(this.minDate);if(i<n){let r=`Date must be on or after ${this.formatDateForError(this.minDate)}`;this.setInputValidationError(t,r);return}}if(this.maxDate){let n=this.parseLocalDate(this.maxDate);if(i>n){let r=`Date must be on or before ${this.formatDateForError(this.maxDate)}`;this.setInputValidationError(t,r);return}}if(this.selectedStart){if(this.enableTime&&this.isSameDay(i,this.selectedStart)){let n=this.startHour*3600+this.startMinute*60+this.startSecond;if(this.endHour*3600+this.endMinute*60+this.endSecond<n){this.setInputValidationError(t,"End time must be after start time when dates are the same");return}}else if(i<this.selectedStart){this.setInputValidationError(t,"End date must be after start date");return}}this.selectedEnd=i,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(i),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,s=parseInt(a.value,10);if(!isNaN(s)&&s>=1900&&s<=2100)if(t){let i=new Date(this.leftMonth);i.setFullYear(s),this.leftMonth=i}else{let i=new Date(this.rightMonth);i.setFullYear(s),this.rightMonth=i}}getDaysInMonth(e){let t=e.getFullYear(),a=e.getMonth(),s=(d,p,g)=>this.enableTime?new Date(Date.UTC(d,p,g,0,0,0)):new Date(d,p,g),i=s(t,a,1),n=new Date(t,a+1,0),r=[],h=this.enableTime?i.getUTCDay():i.getDay();for(let d=h-1;d>=0;d--){let p=s(t,a,-d);r.push(p)}for(let d=1;d<=n.getDate();d++)r.push(s(t,a,d));let c=7-r.length%7;if(c<7)for(let d=1;d<=c;d++)r.push(s(t,a+1,d));return r}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()),s=Math.max(this.selectedStart.getTime(),this.hoverDate.getTime());return t>=a&&t<=s}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:s,max:i}=this.getBounds();if(this.range){let n=t,r=a;if(n&&s&&n<s&&(n=new Date(s)),n&&i&&n>i&&(n=new Date(i)),r&&s&&r<s&&(r=new Date(s)),r&&i&&r>i&&(r=new Date(i)),n&&r&&r<n){let h=n;n=r,r=h}this.selectedStart=n,this.selectedEnd=r}else{let n=t;n&&s&&n<s&&(n=new Date(s)),n&&i&&n>i&&(n=new Date(i)),this.selectedStart=n,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(),s=String(this.selectedStart.getMonth()+1).padStart(2,"0"),i=String(this.selectedStart.getDate()).padStart(2,"0");e=`${a}-${s}-${i}`}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(),s=String(this.selectedEnd.getMonth()+1).padStart(2,"0"),i=String(this.selectedEnd.getDate()).padStart(2,"0");t=`${a}-${s}-${i}`}this.emit("terra-date-range-change",{detail:{startDate:e,endDate:t}})}initializeTimeFromDate(e,t){let a=e.getUTCHours(),s=e.getUTCMinutes(),i=e.getUTCSeconds();t?(this.startHour=a,this.startMinute=s,this.startSecond=i):(this.endHour=a,this.endMinute=s,this.endSecond=i)}changeTime(e,t,a){if(e==="hour")if(a){let s=this.startHour+t;s>23&&(s=0),s<0&&(s=23),this.startHour=s}else{let s=this.endHour+t;s>23&&(s=0),s<0&&(s=23),this.endHour=s}else if(e==="minute")if(a){let s=this.startMinute+t;s>=60&&(s=0),s<0&&(s=59),this.startMinute=s}else{let s=this.endMinute+t;s>=60&&(s=0),s<0&&(s=59),this.endMinute=s}else if(a){let s=this.startSecond+t;s>=60&&(s=0),s<0&&(s=59),this.startSecond=s}else{let s=this.endSecond+t;s>=60&&(s=0),s<0&&(s=59),this.endSecond=s}this.emitChange(),this.requestUpdate()}handleTimeInput(e,t,a){let s=e.target,i=parseInt(s.value,10);if(t==="hour"){if(isNaN(i)||i<0||i>23){s.value=a?this.startHour.toString().padStart(2,"0"):this.endHour.toString().padStart(2,"0");return}a?this.startHour=i:this.endHour=i}else if(t==="minute"){if(isNaN(i)||i<0||i>=60){s.value=a?this.startMinute.toString().padStart(2,"0"):this.endMinute.toString().padStart(2,"0");return}a?this.startMinute=i:this.endMinute=i}else{if(isNaN(i)||i<0||i>=60){s.value=a?this.startSecond.toString().padStart(2,"0"):this.endSecond.toString().padStart(2,"0");return}a?this.startSecond=i:this.endSecond=i}this.emitChange(),this.requestUpdate()}renderCalendar(e,t=!0){let a=this.getDaysInMonth(e),s=e.getMonth(),i=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=${n=>this.toggleMonthDropdown(t,n)}
+                            >
+                                ${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>
+
+                            ${i?m`
+                                      <div class="calendar__month-dropdown">
+                                          ${this.MONTHS.map((n,r)=>m`
+                                                  <button
+                                                      type="button"
+                                                      class="calendar__month-option ${r===e.getMonth()?"calendar__month-option--selected":""}"
+                                                      @click=${()=>this.selectMonth(r,t)}
+                                                  >
+                                                      ${r===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>
+                                                            `:""}
+                                                      ${n}
+                                                  </button>
+                                              `)}
+                                      </div>
+                                  `:""}
+                        </div>
+
+                        <div class="calendar__year-input-wrapper">
+                            <input
+                                type="number"
+                                class="calendar__year-input"
+                                .value=${e.getFullYear().toString()}
+                                @input=${n=>this.handleYearInput(n,t)}
+                                @blur=${n=>{let r=n.target;r.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(n=>m`<div class="calendar__weekday">${n}</div>`)}
+                </div>
+                <div class="calendar__days">
+                    ${a.map(n=>{let r=this.enableTime?n.getUTCMonth():n.getMonth(),h=this.enableTime?n.getUTCDate():n.getDate(),c=r===s,d=this.isSameDay(n,this.selectedStart)||this.isSameDay(n,this.selectedEnd),p=this.isSameDay(n,this.selectedStart),g=this.isSameDay(n,this.selectedEnd),D=this.isInRange(n),v=this.isInHoverRange(n),b=this.isDisabled(n);return m`
+                            <button
+                                type="button"
+                                class="calendar__day ${c?"":"calendar__day--outside"} 
+                                       ${d?"calendar__day--selected":""}
+                                       ${p?"calendar__day--start":""}
+                                       ${g?"calendar__day--end":""}
+                                       ${D?"calendar__day--in-range":""}
+                                       ${v?"calendar__day--hover-range":""}
+                                       ${b?"calendar__day--disabled":""}"
+                                @click=${()=>this.selectDate(n)}
+                                @mouseenter=${()=>this.handleDateHover(n)}
+                                ?disabled=${b}
+                            >
+                                ${h}
+                            </button>
+                        `})}
+                </div>
+            </div>
+        `}renderTimePicker(){return this.enableTime?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=${this.startHour.toString().padStart(2,"0")}
+                                @input=${e=>this.handleTimeInput(e,"hour",!0)}
+                                @blur=${e=>{let t=e.target;t.value=this.startHour.toString().padStart(2,"0")}}
+                                min="0"
+                                max="23"
+                            />
+                            <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=${this.startMinute.toString().padStart(2,"0")}
+                                @input=${e=>this.handleTimeInput(e,"minute",!0)}
+                                @blur=${e=>{let t=e.target;t.value=this.startMinute.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=${this.startSecond.toString().padStart(2,"0")}
+                                @input=${e=>this.handleTimeInput(e,"second",!0)}
+                                @blur=${e=>{let t=e.target;t.value=this.startSecond.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>
+                    </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=${this.endHour.toString().padStart(2,"0")}
+                                          @input=${e=>this.handleTimeInput(e,"hour",!1)}
+                                          @blur=${e=>{let t=e.target;t.value=this.endHour.toString().padStart(2,"0")}}
+                                          min="0"
+                                          max="23"
+                                      />
+                                      <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=${this.endMinute.toString().padStart(2,"0")}
+                                          @input=${e=>this.handleTimeInput(e,"minute",!1)}
+                                          @blur=${e=>{let t=e.target;t.value=this.endMinute.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=${this.endSecond.toString().padStart(2,"0")}
+                                          @input=${e=>this.handleTimeInput(e,"second",!1)}
+                                          @blur=${e=>{let t=e.target;t.value=this.endSecond.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>
+                          </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">
+                <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
+                                  ${T(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
+                              ${T(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>
+        `}};o.styles=[M,_],o.dependencies={"terra-button":S,"terra-input":$,"terra-dropdown":y},l([u()],o.prototype,"id",2),l([u({type:Boolean,reflect:!0})],o.prototype,"range",2),l([u({attribute:"min-date",reflect:!0})],o.prototype,"minDate",2),l([u({attribute:"max-date",reflect:!0})],o.prototype,"maxDate",2),l([u({attribute:"start-date",reflect:!0})],o.prototype,"startDate",2),l([u({attribute:"end-date",reflect:!0})],o.prototype,"endDate",2),l([u({attribute:"hide-label",type:Boolean})],o.prototype,"hideLabel",2),l([u()],o.prototype,"label",2),l([u({attribute:"help-text"})],o.prototype,"helpText",2),l([u({attribute:"start-help-text"})],o.prototype,"startHelpText",2),l([u({attribute:"end-help-text"})],o.prototype,"endHelpText",2),l([u({attribute:"start-label"})],o.prototype,"startLabel",2),l([u({attribute:"end-label"})],o.prototype,"endLabel",2),l([u({type:Boolean,attribute:"show-presets"})],o.prototype,"showPresets",2),l([u({type:Array})],o.prototype,"presets",2),l([u({type:Boolean,attribute:"enable-time"})],o.prototype,"enableTime",2),l([u({attribute:"display-format"})],o.prototype,"displayFormat",2),l([u({type:Boolean})],o.prototype,"inline",2),l([u({type:Boolean,attribute:"split-inputs"})],o.prototype,"splitInputs",2),l([u()],o.prototype,"placeholder",2),l([u()],o.prototype,"startPlaceholder",2),l([u()],o.prototype,"endPlaceholder",2),l([u({reflect:!0})],o.prototype,"role",2),l([u({reflect:!0,attribute:"aria-label"})],o.prototype,"ariaLabel",2),l([u({type:Boolean})],o.prototype,"hideClearAll",2),l([u()],o.prototype,"clearAllLabel",2),l([u({type:Boolean,attribute:"use-end-of-day"})],o.prototype,"useEndOfDay",2),l([f()],o.prototype,"isOpen",2),l([f()],o.prototype,"leftMonth",2),l([f()],o.prototype,"rightMonth",2),l([f()],o.prototype,"selectedStart",2),l([f()],o.prototype,"selectedEnd",2),l([f()],o.prototype,"hoverDate",2),l([f()],o.prototype,"isSelectingRange",2),l([f()],o.prototype,"showLeftMonthDropdown",2),l([f()],o.prototype,"showRightMonthDropdown",2),l([f()],o.prototype,"startHour",2),l([f()],o.prototype,"startMinute",2),l([f()],o.prototype,"startSecond",2),l([f()],o.prototype,"endHour",2),l([f()],o.prototype,"endMinute",2),l([f()],o.prototype,"endSecond",2),l([f()],o.prototype,"selectedDates",2),l([k(".date-picker__dropdown")],o.prototype,"dropdown",2);export{o as a};