@aquera/nile-elements 2.0.18 → 2.0.20

package/dist/nile-calendar/nile-calendar.esm.js

@@ -1,4 +1,4 @@
-import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";import{property as s,state as n,customElement as a}from"lit/decorators.js";import{s as r}from"./nile-calendar.css.esm.js";import{classMap as l}from"lit/directives/class-map.js";import{w as h}from"../internal/watch.esm.js";import{N as o}from"../internal/nile-element.esm.js";import{C as d}from"./nile-calendar.enum.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";let c=class extends o{constructor(){super(...arguments),this.valueAttribute=null,this.allowedDates=JSON.stringify({}),this.range=!1,this.hideTypes=!1,this.doubleClickUnselect=!1,this.allowClear=!1,this.type="absolute",this.hideDurationFields=[],this.showManualInputs=!1,this.showMonthDropdown=!1,this.showYearDropdown=!1,this.dateFormat="MM/DD/YYYY",this.startDate=null,this.endDate=null,this.isSelectingStart=!0,this.hideInput=!1,this.currentMonth=(new Date).getMonth(),this.currentYear=(new Date).getFullYear(),this.allowedDatesLocal=null,this.disabled=!1}static get styles(){return[r]}connectedCallback(){super.connectedCallback(),this.initializeValue(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}updated(t){if(super.updated(t),t.has("valueAttribute")){this.valueAttribute||(this.value=null,this.startDate=null,this.endDate=null,this.isSelectingStart=!0);const t=new Date(this.valueAttribute||"");if(!isNaN(t.getTime())){const i=t.getTimezoneOffset();this.value=new Date(t.getTime()-60*i*1e3),this.currentMonth=this.value.getMonth(),this.currentYear=this.value.getFullYear()}this.initializeValue()}}get monthNames(){return Array.from({length:12},((t,i)=>new Date(0,i).toLocaleString("default",{month:"long"})))}get yearOptions(){const t=this.startYear??2e3,i=this.endYear??2050;return t>i?[]:Array.from({length:i-t+1},((i,e)=>t+e))}onMonthSelected(t){this.currentMonth=t,this.emit("nile-month-change",{month:t})}onYearSelected(t){this.currentYear=t,this.emit("nile-year-change",{year:t})}checkValidAllowedDate(){let t;try{t=JSON.parse(this.allowedDates)}catch(i){t=null}if(!t||0==Object.keys(t).length)return void(this.allowedDatesLocal=null);this.hideInput=!0;this.getUTCDate(t.startDate)>this.getUTCDate(t.endDate)?console.error("StartDate must be greater than endDate"):this.allowedDatesLocal=t}isPrevDisabled(){return 0===this.currentMonth&&void 0!==this.startYear&&this.currentYear<=this.startYear}isNextDisabled(){return 11===this.currentMonth&&void 0!==this.endYear&&this.currentYear>=this.endYear}formatDate(t){if(!t)return"";const i=t.getFullYear(),e=String(t.getMonth()+1).padStart(2,"0"),s=String(t.getDate()).padStart(2,"0");let n=this.dateFormat;return n=n.replace(/YYYY/g,String(i)),n=n.replace(/MM/g,e),n=n.replace(/DD/g,s),n=n.replace(/YY/g,String(i).slice(-2)),n}parseDate(t,i){if(!t||!this.dateFormat)return null;const e=this.dateFormat.replace(/YYYY/,"(?<year>\\d{4})").replace(/YY/,"(?<year>\\d{2})").replace(/MM/,"(?<month>\\d{1,2})").replace(/DD/,"(?<day>\\d{1,2})"),s=new RegExp(`^${e}$`),n=t.match(s);if(!n||!n.groups)return null;const a=2===n.groups.year.length?Number(`20${n.groups.year}`):Number(n.groups.year),r=Number(n.groups.month)-1,l=Number(n.groups.day),h=new Date(a,r,l);return i?h.setHours(i.getHours(),i.getMinutes(),i.getSeconds()):h.setHours(0,0,0),h}handleStartDateInput(t){t.stopPropagation();const i=this.parseDate(t.detail.value,this.startDate);i&&(i.setHours(0,0,0),this.startDate=i,this.currentMonth=i.getMonth(),this.currentYear=i.getFullYear(),this.requestUpdate())}handleEndDateInput(t){t.stopPropagation();const i=this.parseDate(t.detail.value,this.endDate);i&&(i.setHours(23,59,59),this.endDate=i,this.currentMonth=i.getMonth(),this.currentYear=i.getFullYear(),this.requestUpdate())}render(){return i`
+import{__decorate as t}from"tslib";import{html as e,nothing as i}from"lit";import{property as s,state as n,customElement as r}from"lit/decorators.js";import{s as a}from"./nile-calendar.css.esm.js";import{classMap as l}from"lit/directives/class-map.js";import{w as o}from"../internal/watch.esm.js";import{N as h}from"../internal/nile-element.esm.js";import{C as d}from"./nile-calendar.enum.esm.js";import{i as c,D as u,a as p,f as m,l as v,u as $,T as b,b as f}from"./timezones.esm.js";import{a as g}from"../utilities/animation-registry.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";const y=/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2})?(?:\.\d{1,3})?(?:Z|[+-]\d{2}:?\d{2})$/,w=/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})(?:\.(\d{3}))?\[GMT([+-])(\d{2}):(\d{2})\s+([^\]]+)\]$/;function k(t){if("string"!=typeof t)return null;const e=t.trim();if(!y.test(e))return null;const i=new Date(e).getTime();return isNaN(i)?null:i}const D=/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2}))?(?:\.(\d{1,3}))?$/;function N(t){if("string"!=typeof t)return null;const e=D.exec(t.trim());if(!e)return null;const i=Number(e[1]),s=Number(e[2])-1,n=Number(e[3]);if(s<0||s>11||n<1)return null;if(!f(Number(e[4]),Number(e[5]),Number(e[6]??0),Number(e[7]??0)))return null;const r=new Date($(i,s+1,0)).getUTCDate(),a=$(i,s,Math.min(n,r),Number(e[4]),Number(e[5]),Number(e[6]??0),Number(e[7]??0));if(isNaN(a))return null;const l=new Date(a);return{year:l.getUTCFullYear(),month:l.getUTCMonth()+1,day:l.getUTCDate(),hours:l.getUTCHours(),minutes:l.getUTCMinutes(),seconds:l.getUTCSeconds(),ms:l.getUTCMilliseconds()}}function M(t,e){const i=new Intl.DateTimeFormat("en-US",{timeZone:e,hourCycle:"h23",year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"}),s={};for(const e of i.formatToParts(new Date(t)))"literal"!==e.type&&(s[e.type]=Number(e.value));return{year:s.year,month:s.month,day:s.day,hours:24===s.hour?0:s.hour,minutes:s.minute,seconds:s.second,ms:(t%1e3+1e3)%1e3}}let S=class extends h{constructor(){super(...arguments),this.valueAttribute=null,this.allowedDates=JSON.stringify({}),this.range=!1,this.hideTypes=!1,this.showTypes=!1,this.doubleClickUnselect=!1,this.allowClear=!1,this.type="absolute",this.hideDurationFields=[],this.showManualInputs=!1,this.showMonthDropdown=!1,this.showYearDropdown=!1,this.dateFormat="MM/DD/YYYY",this.structuredInput=!1,this.startDate=null,this.endDate=null,this.isSelectingStart=!0,this.hideInput=!1,this.currentMonth=(new Date).getMonth(),this.currentYear=(new Date).getFullYear(),this.allowedDatesLocal=null,this.disabled=!1,this.variant="default",this.timezone="UTC",this.configuredTimezone="UTC",this.internalTimezone=null,this.hideTimeFields=[],this.expanded=!1,this.tpLockedHeight=null,this.tpHours=null,this.tpMinutes=null,this.tpSeconds=null,this.tpMilliseconds=null,this.tpFocusedTimeField=null,this.tpFocusDate=null,this.tpEditingText="",this.seedInstant=null,this.seedFieldsKey=null,this.seedZone=null,this.tpObservedBase=null,this.maskValuesMap=new WeakMap,this.boundMaskInputs=[],this.onMaskKeydown=t=>{if(this.disabled||t.ctrlKey||t.metaKey||t.altKey)return;if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","Tab","Enter","Shift","Control","Meta","Alt","CapsLock"].includes(t.key))return;const e=t.currentTarget,i=e?.input;if(!e||!i)return;const s=e.classList.contains("time-input")?"time":"date",n=this.maskLayoutFor(s),r=this.maskValuesFor(i,n),{slotPos:a}=this.computeMaskDisplay(r,n),l=i.selectionStart??0,o=i.selectionEnd??l,h=(t,s)=>{i.value=t,e.value=t;try{i.setSelectionRange(s,s)}catch{}},d=t=>{const e=this.computeMaskDisplay(r,n),i=e.slotPos[t+1];return void 0!==i&&-1!==i?i:e.display.length};if(t.key>="0"&&t.key<="9"){t.preventDefault();let e=a.findIndex((t=>-1!==t&&t>=l));if(-1===e&&(e=r.findIndex((t=>""===t))),-1===e)return;return r[e]=t.key,this.clampMaskSegment(r,n,e),void h(this.computeMaskDisplay(r,n).display,d(e))}if("Backspace"!==t.key)if("Delete"!==t.key)1===t.key.length&&t.preventDefault();else{t.preventDefault();let e=-1;for(let t=0;t<r.length;t++)if(""!==r[t]&&-1!==a[t]&&a[t]>=l){e=t;break}if(-1===e)return;r[e]="";const i=this.computeMaskDisplay(r,n);h(i.display,-1!==i.slotPos[e]?i.slotPos[e]:l)}else{if(t.preventDefault(),l!==o){for(let t=0;t<r.length;t++)-1!==a[t]&&a[t]>=l&&a[t]<o&&(r[t]="");return void h(this.computeMaskDisplay(r,n).display,l)}let e=-1;for(let t=0;t<r.length;t++)""!==r[t]&&-1!==a[t]&&a[t]<l&&(e=t);if(-1===e)return;r[e]="";const i=this.computeMaskDisplay(r,n);h(i.display,-1!==i.slotPos[e]?i.slotPos[e]:Math.max(0,l-1))}},this.onMaskBlur=t=>{const e=t.currentTarget,i=e?.input;if(!e||!i)return;const s=e.classList.contains("time-input")?"time":"date",n=this.maskLayoutFor(s),r=this.maskValuesFor(i,n);if(!r.some((t=>""!==t)))return i.value="",e.value="",void e.emit?.("nile-change",{value:""});const a=[...new Set(n.slots.map((t=>t.segStart)))];for(const t of a){const e=n.slots.map(((e,i)=>e.segStart===t?i:-1)).filter((t=>-1!==t)),i=e.map((t=>r[t])).filter((t=>""!==t));if(i.length>0&&i.length<e.length){const t=i.join("").padStart(e.length,"0");e.forEach(((e,i)=>{r[e]=t[i]}))}}a.forEach((t=>this.clampMaskSegment(r,n,t)));const{display:l}=this.computeMaskDisplay(r,n);i.value=l,e.value=l,e.emit?.("nile-change",{value:l})}}static get styles(){return[a]}setTimezoneInternally(t){t!==this.timezone&&(this.internalTimezone=t),this.timezone=t}get resolvedTimeFields(){const t={hours:!0,minutes:!0,seconds:!0,milliseconds:!0,timezone:!0},e=Array.isArray(this.hideTimeFields)?this.hideTimeFields:[];for(const i of e)t[i]=!1;return t}get tpFewFieldsNoTz(){const t=this.resolvedTimeFields;if(!1!==t.timezone)return!1;return["hours","minutes","seconds","milliseconds"].filter((e=>!1!==t[e])).length<=2}connectedCallback(){super.connectedCallback(),this.hasUpdated||(this.configuredTimezone=this.timezone),this.initializeValue(),this.hasUpdated&&this.bindStructuredInput(),this.hasUpdated&&"date-time-picker"===this.variant&&this.observeCollapsedBase(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.releasePanelObserver(),this.unbindStructuredInput(),this.emit("nile-destroy")}firstUpdated(){this.bindStructuredInput()}updated(t){if(super.updated(t),t.has("timezone")&&(this.timezone!==this.internalTimezone&&(this.configuredTimezone=this.timezone),this.internalTimezone=null),t.has("timezone")&&!t.has("valueAttribute")&&null!==this.seedInstant&&(null!==this.seedZone?this.timezone!==this.seedZone&&this.clearInstantSeed():this.seedFieldsKey===this.instantSeedFieldsKey()?c(this.timezone)?this.seedFromInstant(this.seedInstant,this.timezone):(this.clearInstantSeed(),this.initializeValue()):this.clearInstantSeed()),(t.has("structuredInput")||t.has("variant")||t.has("range")||t.has("showManualInputs")||t.has("type")||t.has("dateFormat"))&&this.bindStructuredInput(),t.has("valueAttribute")){this.valueAttribute||(this.value=null,this.startDate=null,this.endDate=null,this.isSelectingStart=!0,"date-time-picker"===this.variant&&this.resetTimeUnits());const t=this.dateFromValueString(this.valueAttribute||"");isNaN(t.getTime())||(this.value=t,this.currentMonth=this.value.getMonth(),this.currentYear=this.value.getFullYear()),this.initializeValue()}"date-time-picker"===this.variant?(this.applyMonthYearDropdownAnimation(),this.captureCollapsedHeight()):this.releasePanelObserver()}releasePanelObserver(){this.tpResizeObserver?.disconnect(),this.tpResizeObserver=void 0,this.tpObservedBase=null}observeCollapsedBase(){const t=this.shadowRoot?.querySelector(".base--date-time-picker");return t?(this.tpObservedBase!==t&&(this.tpResizeObserver?.disconnect(),this.tpResizeObserver=new ResizeObserver((()=>this.measurePanel(t))),this.tpResizeObserver.observe(t),this.tpObservedBase=t),t):(this.releasePanelObserver(),null)}captureCollapsedHeight(){const t=this.observeCollapsedBase();t&&this.measurePanel(t)}measurePanel(t){if(this.expanded)return;const e=`${t.offsetHeight}px`;e!==this.tpLockedHeight&&(this.tpLockedHeight=e)}applyMonthYearDropdownAnimation(){const t=t=>{t?.querySelectorAll(".month-dropdown, .year-dropdown").forEach((t=>{g(t,"dropdown.show",{keyframes:[{opacity:0,scale:.9,translate:"0 -14px"},{opacity:1,scale:1,translate:"0 0"}],options:{duration:280,easing:"cubic-bezier(0.16, 1, 0.3, 1)"}}),g(t,"dropdown.hide",{keyframes:[{opacity:1,scale:1,translate:"0 0"},{opacity:0,scale:.9,translate:"0 -14px"}],options:{duration:160,easing:"ease"}})}))};t(this.shadowRoot);const e=this.shadowRoot?.querySelector(".tp-inner-calendar");if(e){const i=()=>t(e.shadowRoot);e.updateComplete?e.updateComplete.then(i):i()}}get monthNames(){return Array.from({length:12},((t,e)=>new Date(0,e).toLocaleString("default",{month:"long"})))}get yearOptions(){const t=this.startYear??u,e=this.endYear??p;return t>e?[]:Array.from({length:e-t+1},((e,i)=>t+i))}onMonthSelected(t){this.currentMonth=t,this.emit("nile-month-change",{month:t})}onYearSelected(t){this.currentYear=t,this.emit("nile-year-change",{year:t})}scrollSelectedIntoView(t){const e=this.shadowRoot?.querySelector(t);if(!e)return;const i=e.closest(".month-scroll-wrapper, .year-scroll-wrapper");if(!i)return void e.scrollIntoView({block:"center"});const s=i.scrollTop+(e.getBoundingClientRect().top-i.getBoundingClientRect().top)-(i.clientHeight-e.clientHeight)/2;window.matchMedia("(prefers-reduced-motion: reduce)").matches?i.scrollTop=s:this.smoothScrollTo(i,s,450)}smoothScrollTo(t,e,i){const s=t.scrollTop,n=e-s;if(0===n)return;const r=performance.now(),a=e=>{const l=Math.min(1,(e-r)/i);t.scrollTop=s+n*(t=>t<.5?2*t*t:1-Math.pow(-2*t+2,2)/2)(l),l<1&&requestAnimationFrame(a)};requestAnimationFrame(a)}checkValidAllowedDate(){let t;try{t=JSON.parse(this.allowedDates)}catch(e){t=null}if(!t||0==Object.keys(t).length)return void(this.allowedDatesLocal=null);this.hideInput=!0;this.getUTCDate(t.startDate)>this.getUTCDate(t.endDate)?console.error("StartDate must be greater than endDate"):this.allowedDatesLocal=t}get minYear(){return"date-time-picker"===this.variant?this.startYear??u:this.startYear}get maxYear(){return"date-time-picker"===this.variant?this.endYear??p:this.endYear}isPrevDisabled(){return 0===this.currentMonth&&void 0!==this.minYear&&this.currentYear<=this.minYear}isNextDisabled(){return 11===this.currentMonth&&void 0!==this.maxYear&&this.currentYear>=this.maxYear}formatDate(t){if(!t)return"";const e=t.getFullYear(),i=String(t.getMonth()+1).padStart(2,"0"),s=String(t.getDate()).padStart(2,"0");let n=this.dateFormat;return n=n.replace(/YYYY/g,"date-time-picker"===this.variant?m(e):String(e)),n=n.replace(/MM/g,i),n=n.replace(/DD/g,s),n=n.replace(/YY/g,String(e).slice(-2)),n}parseDate(t,e){if(!t||!this.dateFormat)return null;const i=this.dateFormat.replace(/YYYY/,"(?<year>\\d{4})").replace(/YY/,"(?<year>\\d{2})").replace(/MM/,"(?<month>\\d{1,2})").replace(/DD/,"(?<day>\\d{1,2})"),s=new RegExp(`^${i}$`),n=t.match(s);if(!n||!n.groups)return null;const r="date-time-picker"===this.variant,a=n.groups.year;let l=2===a.length?Number(`20${a}`):Number(a);r&&2===a.length&&e&&Math.abs(e.getFullYear())%100===Number(a)&&(l=e.getFullYear());const o=Number(n.groups.month)-1,h=Number(n.groups.day),d=r?v(l,o,h):new Date(l,o,h);return e?d.setHours(e.getHours(),e.getMinutes(),e.getSeconds()):d.setHours(0,0,0),d}handleStartDateInput(t){t.stopPropagation();const e=this.parseDate(t.detail.value,this.startDate);e&&(e.setHours(0,0,0),this.startDate=e,this.currentMonth=e.getMonth(),this.currentYear=e.getFullYear(),this.requestUpdate())}handleEndDateInput(t){t.stopPropagation();const e=this.parseDate(t.detail.value,this.endDate);e&&(e.setHours(23,59,59),this.endDate=e,this.currentMonth=e.getMonth(),this.currentYear=e.getFullYear(),this.requestUpdate())}unbindStructuredInput(){for(const t of this.boundMaskInputs)t.removeEventListener("keydown",this.onMaskKeydown,!0),t.removeEventListener("focusout",this.onMaskBlur);this.boundMaskInputs=[]}bindStructuredInput(){if(this.unbindStructuredInput(),!this.structuredInput)return;const t=this.shadowRoot?.querySelectorAll(".calender-input nile-input");t?.forEach((t=>{t.addEventListener("keydown",this.onMaskKeydown,!0),t.addEventListener("focusout",this.onMaskBlur),this.boundMaskInputs.push(t)}))}dateMaskSegments(){const t=t=>{switch(t){case"YYYY":return{kind:"year",len:4,min:0,max:9999};case"YY":return{kind:"year",len:2,min:0,max:99};case"MM":return{kind:"month",len:2,min:1,max:12};default:return{kind:"day",len:2,min:1,max:31}}},e=this.dateFormat||"MM/DD/YYYY",i=/YYYY|YY|MM|DD/g,s=[];let n;for(;null!==(n=i.exec(e));)s.push({token:n[0],index:n.index});return s.map(((i,n)=>{const r=e.slice(i.index+i.token.length,n+1<s.length?s[n+1].index:e.length);return{...t(i.token),after:n<s.length-1?r:""}}))}timeMaskSegments(){return[{kind:"hour",len:2,min:0,max:23,after:":"},{kind:"minute",len:2,min:0,max:59,after:":"},{kind:"second",len:2,min:0,max:59,after:""}]}buildMaskLayout(t){const e=[],i=[];for(const s of t){const t=i.length;for(let n=0;n<s.len;n++)e.push({slot:i.length}),i.push({kind:s.kind,min:s.min,max:s.max,len:s.len,segStart:t});for(const t of s.after)e.push({lit:t})}return{tokens:e,slots:i,length:e.length}}maskLayoutFor(t){return this.buildMaskLayout("time"===t?this.timeMaskSegments():this.dateMaskSegments())}computeMaskDisplay(t,e){let i=-1;t.forEach(((t,e)=>{""!==t&&(i=e)}));let s="";const n=new Array(e.slots.length).fill(-1);for(const r of e.tokens)if("slot"in r){if(r.slot>i)break;n[r.slot]=s.length,t[r.slot]&&(s+=t[r.slot])}else s+=r.lit;return{display:-1===i?"":s,slotPos:n,lastFilled:i}}initMaskValues(t,e){const i=(t||"").replace(/\D/g,"").slice(0,e.slots.length);return e.slots.map(((t,e)=>i[e]??""))}clampMaskSegment(t,e,i){const s=e.slots[i];if("year"===s.kind)return;const n=[];e.slots.forEach(((t,e)=>{t.segStart===s.segStart&&n.push(e)}));const r=n.map((e=>t[e]));if(r.some((t=>""===t)))return;const a=r.join(""),l=Number(a);let o=null;l>s.max?o=String(Number(a[0])).padStart(s.len,"0"):l<s.min&&(o=String(s.min).padStart(s.len,"0")),null!==o&&n.forEach(((e,i)=>{t[e]=o[i]}))}maskValuesFor(t,e){let i=this.maskValuesMap.get(t);return i&&i.length===e.slots.length?this.computeMaskDisplay(i,e).display!==t.value&&(i=this.initMaskValues(t.value,e)):i=this.initMaskValues(t.value,e),this.maskValuesMap.set(t,i),i}render(){return"date-time-picker"===this.variant?this.renderDateTimePicker():e`
       <div
         class=${l({base:!0,base__range:this.range})}
         part="calendar-container"
@@ -15,9 +15,9 @@ import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";impor
         ${"relative"==this.type?this.renderRelativeCalendar():""}
         ${"absolute"==this.type?this.renderAbsoluteCalendar():""}
 
-        ${this.range?i`
+        ${this.range?e`
         <div class="button-container" part="button-container">
-          ${this.allowClear?i`
+          ${this.allowClear?e`
             <nile-button 
             class="clear-button"
             variant="secondary"
@@ -26,7 +26,7 @@ import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";impor
             @keydown="${t=>{"Enter"!==t.key&&" "!==t.key||this.clearDate()}}"
             @click="${this.clearDate}"
 
-            > Reset</nile-button>`:e}
+            > Reset</nile-button>`:i}
           <nile-button 
           class="apply-button"  
           ?disabled="${!this.startDate||!this.endDate||this.disabled}"  
@@ -36,13 +36,13 @@ import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";impor
         </div>
         `:""}
       </div>
-    `}renderAbsoluteCalendar(){return i`
+    `}renderAbsoluteCalendar(){return e`
     <div class="calendar-wrapper" part="calendar-wrapper">
       <div class="calendar-container" >
         ${this.renderMonth(this.currentYear,this.currentMonth,this.getDaysArray(this.currentYear,this.currentMonth))}
       </div>
     </div>
-    ${this.range?i`
+    ${this.range?e`
     <div class="calender-input ${this.showManualInputs?"":"hidden"}" >
      <div class="from">
   <div class="from-date">
@@ -91,11 +91,11 @@ import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";impor
     </div>
     </div>
     `:""}
-    `}renderRelativeCalendar(){return i`
+    `}renderRelativeCalendar(){return e`
       <div class="units-wrapper">
         <div class="unit-container">
   
-          ${this.hideDurationFields?.includes("minutes")?"":i`
+          ${this.hideDurationFields?.includes("minutes")?"":e`
           <div class="unit-group">
             <div class="duration-name">Minutes</div>
             <div class="duration-units">
@@ -104,7 +104,7 @@ import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";impor
           </div>
           `}
   
-          ${this.hideDurationFields?.includes("hours")?"":i`
+          ${this.hideDurationFields?.includes("hours")?"":e`
           <div class="unit-group">
             <div class="duration-name">Hours</div>
             <div class="duration-units">
@@ -113,7 +113,7 @@ import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";impor
           </div>
           `}
   
-          ${this.hideDurationFields?.includes("days")?"":i`
+          ${this.hideDurationFields?.includes("days")?"":e`
           <div class="unit-group">
             <div class="duration-name">Days</div>
             <div class="duration-units">
@@ -122,7 +122,7 @@ import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";impor
           </div>
           `}
   
-          ${this.hideDurationFields?.includes("weeks")?"":i`
+          ${this.hideDurationFields?.includes("weeks")?"":e`
           <div class="unit-group">
             <div class="duration-name">Weeks</div>
             <div class="duration-units">
@@ -131,7 +131,7 @@ import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";impor
           </div>
           `}
   
-          ${this.hideDurationFields?.includes("months")?"":i`
+          ${this.hideDurationFields?.includes("months")?"":e`
           <div class="unit-group">
             <div class="duration-name">Months</div>
             <div class="duration-units">
@@ -142,7 +142,37 @@ import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";impor
         </div>
       </div>
   
-      ${this.range?i`
+      ${"date-time-picker"===this.variant?e`
+      <div>
+        <div class="unit-input-container">
+          <nile-input
+            class="manual-input duration-input"
+            ?disabled="${this.disabled}"
+            label="Duration"
+            inputmode="numeric"
+            type="text"
+            value="${this.selectedValue}"
+            @nile-input="${this.handleDurationChange}"
+            @nile-change="${this.handleDurationChange}"
+            placeholder="Enter Value"
+          ></nile-input>
+
+          <nile-select
+            class="manual-input time-input"
+            ?disabled="${this.disabled}"
+            label="Unit of time"
+            value="${this.selectedUnit}"
+            @nile-change="${this.handleUnitChange}"
+          >
+            ${this.hideDurationFields?.includes("minutes")?"":e`<nile-option value="minutes">Minutes</nile-option>`}
+            ${this.hideDurationFields?.includes("hours")?"":e`<nile-option value="hours">Hours</nile-option>`}
+            ${this.hideDurationFields?.includes("days")?"":e`<nile-option value="days">Days</nile-option>`}
+            ${this.hideDurationFields?.includes("weeks")?"":e`<nile-option value="weeks">Weeks</nile-option>`}
+            ${this.hideDurationFields?.includes("months")?"":e`<nile-option value="months">Months</nile-option>`}
+          </nile-select>
+        </div>
+      </div>
+      `:this.range?e`
       <div>
         <div class="unit-input-container">
           <nile-input 
@@ -172,13 +202,13 @@ import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";impor
         </div>
       </div>
       `:""}
-    `}renderTimeValues(t,e){return e.map((e=>i`
+    `}renderTimeValues(t,i){return i.map((i=>e`
           <div
-            class="duration__value ${this.selectedUnit===t&&this.selectedValue===e?"duration__value--selected":""}"
-            @click=${i=>this.handleTimeValueClick(t,e,i)}
-            @keydown="${i=>{"Enter"!==i.key&&" "!==i.key||this.handleTimeValueClick(t,e,i)}}"
-          >${e}
-          </div>`))}renderMonth(t,s,n){const a=new Date(t,s,1).getDay(),r=new Date(t,s+1,0).getDay(),h=this.getDaysArray(0===s?t-1:t,0===s?11:s-1),o=this.getDaysArray(11===s?t+1:t,11===s?0:s+1),d=h.slice(h.length-a),c=o.slice(0,6-r),u=[...d,...n,...c],v=(t,i,e,s)=>{if(!s)return"";if(!this.range&&this.value){if(t===this.value.getDate()&&i===this.value.getMonth()&&e===this.value.getFullYear())return"selected-date"}const n=this.startDate&&t===this.startDate.getDate()&&i===this.startDate.getMonth()&&e===this.startDate.getFullYear(),a=this.endDate&&t===this.endDate.getDate()&&i===this.endDate.getMonth()&&e===this.endDate.getFullYear();return n?"range-start":a?"range-end":""},p=(t,i,e,s)=>{if(!s)return!1;if(this.startDate&&this.endDate){const s=new Date(e,i,t);return s>=this.startDate&&s<=this.endDate}return!1};return i`
+            class="duration__value ${this.selectedUnit===t&&this.selectedValue===i?"duration__value--selected":""}"
+            @click=${e=>this.handleTimeValueClick(t,i,e)}
+            @keydown="${e=>{"Enter"!==e.key&&" "!==e.key||this.handleTimeValueClick(t,i,e)}}"
+          >${i}
+          </div>`))}renderMonth(t,s,n){const r=new Date(t,s,1).getDay(),a=new Date(t,s+1,0).getDay(),o=this.getDaysArray(0===s?t-1:t,0===s?11:s-1),h=this.getDaysArray(11===s?t+1:t,11===s?0:s+1),d=o.slice(o.length-r),c=h.slice(0,6-a),u=[...d,...n,...c],p=(t,e,i,s)=>{if(!s)return"";if(!this.range&&this.value){if(t===this.value.getDate()&&e===this.value.getMonth()&&i===this.value.getFullYear())return"selected-date"}const n=this.startDate&&t===this.startDate.getDate()&&e===this.startDate.getMonth()&&i===this.startDate.getFullYear(),r=this.endDate&&t===this.endDate.getDate()&&e===this.endDate.getMonth()&&i===this.endDate.getFullYear();return n?"range-start":r?"range-end":""},m=(t,e,i,s)=>{if(!s)return!1;if(this.startDate&&this.endDate){const s=new Date(i,e,t);return s>=this.startDate&&s<=this.endDate}return!1};return e`
       <div class="calendar">
         <div class="calendar-header">
           <nile-icon
@@ -194,8 +224,8 @@ import{__decorate as t}from"tslib";import{html as i,nothing as e}from"lit";impor
           </nile-icon>
           <div class="calendar-header__center">
 
-${this.showMonthDropdown||this.showYearDropdown?i`
-  ${this.showMonthDropdown?i`
+${this.showMonthDropdown||this.showYearDropdown?e`
+  ${this.showMonthDropdown?e`
     <nile-dropdown ?disabled="${this.disabled}" class="month-dropdown">
       <span
         slot="trigger"
@@ -208,11 +238,11 @@ ${this.showMonthDropdown||this.showYearDropdown?i`
       </span>
       <nile-menu>
         <div class="month-scroll-wrapper">
-          ${this.monthNames.map(((t,e)=>i`
+          ${this.monthNames.map(((t,i)=>e`
             <nile-menu-item
               class="month-menu-item"
-              ?selected="${e===s}"
-              @click="${()=>this.onMonthSelected(e)}"
+              ?selected="${i===s}"
+              @click="${()=>this.onMonthSelected(i)}"
             >
               ${t}
             </nile-menu-item>
@@ -220,12 +250,12 @@ ${this.showMonthDropdown||this.showYearDropdown?i`
         </div>
       </nile-menu>
     </nile-dropdown>
-  `:i`
+  `:e`
     <span
       >${new Date(t,s).toLocaleString("default",{month:"long"})}</span
     >
   `}
-  ${this.showYearDropdown?i`
+  ${this.showYearDropdown?e`
     <nile-dropdown ?disabled="${this.disabled}" class="year-dropdown">
       <span
         slot="trigger"
@@ -238,22 +268,22 @@ ${this.showMonthDropdown||this.showYearDropdown?i`
       </span>
       <nile-menu>
         <div class="year-scroll-wrapper">
-          ${this.yearOptions.map((e=>i`
+          ${this.yearOptions.map((i=>e`
               <nile-menu-item
                 class="year-menu-item"
-                ?selected="${e===t}"
-                @click="${()=>this.onYearSelected(e)}"
+                ?selected="${i===t}"
+                @click="${()=>this.onYearSelected(i)}"
               >
-                ${e}
+                ${i}
               </nile-menu-item>
             `))}
         </div>
       </nile-menu>
     </nile-dropdown>
-  `:i`
+  `:e`
     <span>${t}</span>
   `}
-`:i`
+`:e`
   <span
     >${new Date(t,s).toLocaleString("default",{month:"long"})}
     ${t}</span
@@ -276,20 +306,314 @@ ${this.showMonthDropdown||this.showYearDropdown?i`
         </div>
    
         <div class="days_container">
-        ${["Sun","Mon","Tue","Wed","Thu","Fri","Sat"].map((t=>i`<div class="day_name">${t}</div>`))}
-          ${u.map(((a,r)=>{const h=r>=d.length&&r<d.length+n.length,o=v(a,s,t,h),c={day_date:!0,"not-allowed":!this.isAllowedDate(a,s,t),"in-range":p(a,s,t,h),filler:!h};return o&&(c[o]=!0),i` 
+        ${["Sun","Mon","Tue","Wed","Thu","Fri","Sat"].map((t=>e`<div class="day_name">${t}</div>`))}
+          ${u.map(((r,a)=>{const o=a>=d.length&&a<d.length+n.length,h=p(r,s,t,o),c={day_date:!0,"not-allowed":!this.isAllowedDate(r,s,t),"in-range":m(r,s,t,o),filler:!o};return h&&(c[h]=!0),e` 
             <div
-              part="calendar-day-${a}"
+              part="calendar-day-${r}"
               class=${l(c)}
-             tabindex="${h&&this.isAllowedDate(a,s,t)&&!this.disabled?"0":"-1"}"
-              @keydown="${i=>{"Enter"!==i.key&&" "!==i.key||this.selectDate(a,s,t)}}"
-              @click="${()=>{h&&this.selectDate(a,s,t)}}"
+             tabindex="${o&&this.isAllowedDate(r,s,t)&&!this.disabled?"0":"-1"}"
+              @keydown="${e=>{"Enter"!==e.key&&" "!==e.key||this.selectDate(r,s,t)}}"
+              @click="${()=>{o&&this.selectDate(r,s,t)}}"
             >
               <span style="position:relative;">
-                ${a}
-                ${((t,i,e)=>{const s=new Date;return t===s.getDate()&&i+1===s.getMonth()+1&&e===s.getFullYear()})(a,s,t)&&h?i`<div class="current__date__dot" part="current-date-dot"></div>`:e}
+                ${r}
+                ${((t,e,i)=>{const s=new Date;return t===s.getDate()&&e+1===s.getMonth()+1&&i===s.getFullYear()})(r,s,t)&&o?e`<div class="current__date__dot" part="current-date-dot"></div>`:i}
               </span>
             </div>`}))}
         </div>
       </div>
-    `}isAllowedDate(t,i,e){if(!this.allowedDatesLocal)return!0;const s=new Date(Date.UTC(e,i,t)),n=this.getUTCDate(this.allowedDatesLocal.startDate),a=this.getUTCDate(this.allowedDatesLocal.endDate);a.setUTCHours(23,59,59,999);return s>=n&&s<=a}clearDate(t){(t??(this.range?"relative"===this.type?d.Relative:d.Range:d.Single))===d.Single?this.value=null:(this.valueAttribute="",this.startDate=null,this.endDate=null,this.selectedUnit=void 0,this.selectedValue=void 0),this.requestUpdate(),this.emit("nile-clear")}selectDate(t,i,e){if(this.disabled)return;const s=new Date(e,i,t);if(this.range)if(this.startDate&&this.endDate&&(this.startDate=null,this.endDate=null),this.isSelectingStart)this.startDate=s,this.endDate&&s>this.endDate&&(this.endDate=null),this.isSelectingStart=!1;else if(this.isSelectingStart=!0,this.startDate&&s<this.startDate)this.startDate=s,this.endDate=null,this.isSelectingStart=!1;else{const t=s;t.setHours(23,59,59,999),this.endDate=t}else{if(String(this.value)==String(s)&&this.doubleClickUnselect)return void this.clearDate();this.value=s,this.emitChangedData({value:this.value})}}initializeValue(){if(this.range)try{const t=JSON.parse(this.valueAttribute||"");this.startDate=new Date(t.startDate),this.endDate=new Date(t.endDate),this.startDate=new Date(this.startDate.getTime()),this.endDate=new Date(this.endDate.getTime()),this.value=null}catch(t){}else if(this.valueAttribute){let t=new Date(this.valueAttribute);t=new Date(t.getTime()-6e4*t.getTimezoneOffset()),isNaN(t.getTime())||(this.value=t,this.currentMonth=this.value.getMonth(),this.currentYear=this.value.getFullYear())}}handleDurationChange(t){t.stopPropagation(),t.detail.value=t.detail.value.replace(/e/gi,"");const i=Number(t.detail.value);i&&(this.selectedValue=i,this.selectedUnit&&this.selectedValue&&this.handleTimeValueClick(this.selectedUnit,this.selectedValue,t))}handleUnitChange(t){t.stopPropagation(),this.selectedUnit=t.detail.value,this.selectedUnit&&this.selectedValue&&this.handleTimeValueClick(this.selectedUnit,this.selectedValue,t)}handleTimeValueClick(t,i,e){this.createRelativePeriod(t,i),this.selectedUnit=t,this.selectedValue=i}createRelativePeriod(t,i){const e=new Date,s=new Date;switch(t){case"minutes":s.setMinutes(s.getMinutes()-i);break;case"hours":s.setHours(s.getHours()-i);break;case"days":s.setDate(s.getDate()-i);break;case"weeks":s.setDate(s.getDate()-7*i);break;case"months":s.setMonth(s.getMonth()-i)}return this.startDate=new Date(s.getTime()),this.endDate=new Date(e.getTime()),{startDate:this.startDate,endDate:this.endDate}}handleStartTimeInput(t){if(t.stopPropagation(),!this.startDate)return void(this.startDate=null);const i=this.parseTime(t.detail.value,this.startDate);i?this.startDate=i:this.startDate.setHours(0,0,0),this.requestUpdate()}handleEndTimeInput(t){if(t.stopPropagation(),!this.endDate)return void(this.endDate=null);const i=this.parseTime(t.detail.value,this.endDate);i?this.endDate=i:this.endDate.setHours(0,0,0),this.requestUpdate()}parseTime(t,i){if(!this.isValidTimeInput(t))return null;const[e,s,n]=t.split(":").map(Number),a=new Date(i.getTime());return a.setHours(e,s,n),a}isValidTimeInput(t){return/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/.test(t)}formatTime(t){if(!t)return"";return`${String(t.getHours()).padStart(2,"0")}:${String(t.getMinutes()).padStart(2,"0")}:${String(t.getSeconds()).padStart(2,"0")}`}nextMonth(){if(!this.disabled)if(11===this.currentMonth){const t=this.currentYear+1;if(void 0!==this.endYear&&t>this.endYear)return;this.currentMonth=0,this.currentYear=t}else this.currentMonth++}prevMonth(){if(!this.disabled)if(0===this.currentMonth){const t=this.currentYear-1;if(void 0!==this.startYear&&t<this.startYear)return;this.currentMonth=11,this.currentYear=t}else this.currentMonth--}confimRange(){this.startDate&&this.endDate&&this.emitChangedData({startDate:this.startDate,endDate:this.endDate})}onTypeChange(t){this.disabled||(this.type=t.detail.value,this.emit("nile-type-change",{value:this.type}))}getUTCDate(t){return new Date(Date.UTC(t.slice(0,4),t.slice(5,7)-1,t.slice(8,10)))}emitChangedData(t){this.emit("nile-changed",t),this.emit("nile-change",t)}getDaysArray(t,i){const e=new Date(t,i+1,0).getDate();return Array.from({length:e},((t,i)=>i+1))}};t([s({type:String,attribute:"value"})],c.prototype,"valueAttribute",void 0),t([s({type:String,attribute:!0,reflect:!0})],c.prototype,"allowedDates",void 0),t([s({type:Boolean,reflect:!0})],c.prototype,"range",void 0),t([s({type:Boolean,attribute:!0,reflect:!0})],c.prototype,"hideTypes",void 0),t([s({type:Boolean,reflect:!0})],c.prototype,"doubleClickUnselect",void 0),t([s({type:Boolean,reflect:!0})],c.prototype,"allowClear",void 0),t([s({type:String,reflect:!0})],c.prototype,"type",void 0),t([s({type:String})],c.prototype,"selectedUnit",void 0),t([s({type:Number})],c.prototype,"selectedValue",void 0),t([s({type:Array,attribute:"hide-duration-fields"})],c.prototype,"hideDurationFields",void 0),t([s({type:Boolean})],c.prototype,"showManualInputs",void 0),t([s({type:Number,attribute:!0,reflect:!0})],c.prototype,"startYear",void 0),t([s({type:Number,attribute:!0,reflect:!0})],c.prototype,"endYear",void 0),t([s({type:Boolean,attribute:!0,reflect:!0})],c.prototype,"showMonthDropdown",void 0),t([s({type:Boolean,attribute:!0,reflect:!0})],c.prototype,"showYearDropdown",void 0),t([s({type:String,reflect:!0,attribute:!0})],c.prototype,"dateFormat",void 0),t([n()],c.prototype,"startDate",void 0),t([n()],c.prototype,"endDate",void 0),t([n()],c.prototype,"isSelectingStart",void 0),t([n()],c.prototype,"hideInput",void 0),t([n()],c.prototype,"value",void 0),t([n()],c.prototype,"currentMonth",void 0),t([n()],c.prototype,"currentYear",void 0),t([n()],c.prototype,"allowedDatesLocal",void 0),t([s({type:Boolean,attribute:!0,reflect:!0})],c.prototype,"disabled",void 0),t([h("allowedDates")],c.prototype,"checkValidAllowedDate",null),c=t([a("nile-calendar")],c);export{c as N};
+    `}isAllowedDate(t,e,i){if(!this.allowedDatesLocal)return!0;const s=new Date("date-time-picker"===this.variant?$(i,e,t):Date.UTC(i,e,t)),n=this.getUTCDate(this.allowedDatesLocal.startDate),r=this.getUTCDate(this.allowedDatesLocal.endDate);r.setUTCHours(23,59,59,999);return s>=n&&s<=r}dayCellLabel(t,e,i){return v(i,e,t,12).toLocaleDateString("default",{weekday:"long",day:"numeric",month:"long",year:"numeric"})}clearDate(t){const e=t??(this.range?"relative"===this.type?d.Relative:d.Range:d.Single);this.clearInstantSeed(),e===d.Single?this.value=null:(this.valueAttribute="",this.startDate=null,this.endDate=null,this.selectedUnit=void 0,this.selectedValue=void 0),this.requestUpdate(),this.emit("nile-clear")}selectDate(t,e,i){if(this.disabled)return;const s="date-time-picker"===this.variant?v(i,e,t):new Date(i,e,t);if(this.range)if(this.startDate&&this.endDate&&(this.startDate=null,this.endDate=null),this.isSelectingStart)this.startDate=s,this.endDate&&s>this.endDate&&(this.endDate=null),this.isSelectingStart=!1;else if(this.isSelectingStart=!0,this.startDate&&s<this.startDate)this.startDate=s,this.endDate=null,this.isSelectingStart=!1;else{const t=s;t.setHours(23,59,59,999),this.endDate=t}else{if(String(this.value)==String(s)&&this.doubleClickUnselect)return void this.clearDate();this.value=s,this.emitChangedData({value:this.value})}}initializeValue(){if(this.clearInstantSeed(),this.range)try{const t=JSON.parse(this.valueAttribute||"");this.startDate=this.rangeBoundFromValue(t.startDate,!1),this.endDate=this.rangeBoundFromValue(t.endDate,!0),this.startDate=new Date(this.startDate.getTime()),this.endDate=new Date(this.endDate.getTime()),"date-time-picker"===this.variant&&this.startDate&&!isNaN(this.startDate.getTime())&&(this.currentMonth=this.startDate.getMonth(),this.currentYear=this.startDate.getFullYear()),this.value=null}catch(t){}else{if("date-time-picker"===this.variant&&this.trySeedFromInstantValue())return;const t="date-time-picker"===this.variant?this.parseZonedValue(this.valueAttribute):null;if(t){this.setTimezoneInternally(t.timezone);const e=t.wall;return this.value=v(e.year,e.month-1,e.day,12,0,0,0),this.currentMonth=e.month-1,this.currentYear=e.year,this.tpHours=e.hours,this.tpMinutes=e.minutes,this.tpSeconds=e.seconds,void(this.tpMilliseconds=e.ms)}if("date-time-picker"===this.variant){const t=N(this.valueAttribute);if(t)return this.value=v(t.year,t.month-1,t.day,12,0,0,0),this.currentMonth=t.month-1,this.currentYear=t.year,this.tpHours=t.hours,this.tpMinutes=t.minutes,this.tpSeconds=t.seconds,void(this.tpMilliseconds=t.ms)}if("date-time-picker"===this.variant){const t=this.parsePresetValue(this.valueAttribute);return void(t?(this.value=t,this.currentMonth=t.getMonth(),this.currentYear=t.getFullYear(),this.tpHours=t.getHours(),this.tpMinutes=t.getMinutes(),this.tpSeconds=t.getSeconds(),this.tpMilliseconds=t.getMilliseconds()):this.valueAttribute&&(this.value=null,this.resetTimeUnits()))}if(this.valueAttribute){const t=this.dateFromValueString(this.valueAttribute);isNaN(t.getTime())||(this.value=t,this.currentMonth=this.value.getMonth(),this.currentYear=this.value.getFullYear())}}}clearInstantSeed(){this.seedInstant=null,this.seedFieldsKey=null,this.seedZone=null}instantSeedFieldsKey(){const t=this.value;return t?`${t.getFullYear()}-${t.getMonth()}-${t.getDate()}|${this.tpHours}:${this.tpMinutes}:${this.tpSeconds}.${this.tpMilliseconds}`:null}seedFromInstant(t,e){const i=M(t,e);this.value=v(i.year,i.month-1,i.day,12,0,0,0),this.currentMonth=i.month-1,this.currentYear=i.year,this.tpHours=i.hours,this.tpMinutes=i.minutes,this.tpSeconds=i.seconds,this.tpMilliseconds=i.ms,this.seedInstant=t,this.seedFieldsKey=this.instantSeedFieldsKey()}trySeedFromInstantValue(){const t=k(this.valueAttribute);if(null!==t)return!!c(this.timezone)&&(this.seedFromInstant(t,this.timezone),this.seedZone=null,!0);const e=function(t){if("string"!=typeof t)return null;const e=w.exec(t.trim());if(!e)return null;const[,i,s,n,r,a,l,o,h,d,u,p]=e,m=p.trim();if(!c(m))return null;const v={year:Number(i),month:Number(s),day:Number(n),hours:Number(r),minutes:Number(a),seconds:Number(l),ms:Number(o??0)},b=24===v.hours;if(v.hours>24||b&&(0!==v.minutes||0!==v.seconds||0!==v.ms))return null;const f=("-"===h?-1:1)*(36e5*Number(d)+6e4*Number(u)),g=$(v.year,v.month-1,v.day,v.hours,v.minutes,v.seconds,v.ms),y=g-f,k=M(y,m),D=b?M(g,"UTC"):v;return k.year===D.year&&k.month===D.month&&k.day===D.day&&k.hours===D.hours&&k.minutes===D.minutes&&k.seconds===D.seconds&&k.ms===D.ms?{epochMs:y,timezone:m}:null}(this.valueAttribute);return!!e&&(this.setTimezoneInternally(e.timezone),this.seedFromInstant(e.epochMs,e.timezone),this.seedZone=e.timezone,!0)}dateFromValueString(t){const e=new Date(t);return new Date(e.getTime()-6e4*e.getTimezoneOffset())}rangeBoundFromValue(t,e){if("date-time-picker"===this.variant&&"string"==typeof t&&/^\d{4}-\d{2}-\d{2}$/.test(t)){const i=this.parsePresetValue(t);if(i)return e&&i.setHours(23,59,59,999),i}return new Date(t)}parsePresetValue(t){if(!t)return null;if(/^\d{4}-\d{2}-\d{2}$/.exec(t)){const e=Number(t.slice(0,4)),i=Number(t.slice(5,7))-1,s=Number(t.slice(8,10));if(i<0||i>11||s<1)return null;const n=v(e,i+1,0).getDate(),r=v(e,i,Math.min(s,n));return isNaN(r.getTime())?null:r}const e=new Date(t);return isNaN(e.getTime())?null:e}parseZonedValue(t){if(!t)return null;const e=/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})(?:\.(\d{3}))?\[GMT[+-]\d{2}:\d{2}\s+([^\]]+)\]$/.exec(t.trim());if(!e)return null;const[,i,s,n,r,a,l,o,h]=e,d=Number(s)-1,u=Number(r),p=Number(a),m=Number(l);if(d<0||d>11||u>23||p>59||m>59)return null;const $=Number(n);if($<1)return null;const b=v(Number(i),d+1,0).getDate(),f={year:Number(i),month:d+1,day:Math.min($,b),hours:u,minutes:p,seconds:m,ms:Number(o??0)},g=h.trim();return{wall:f,timezone:c(g)?g:"UTC"}}handleDurationChange(t){if(t.stopPropagation(),"date-time-picker"===this.variant){const e=t.target,i=String(t.detail?.value??e?.value??"").replace(/\D/g,"");e&&e.value!==i&&(e.value=i);const s=Number(i);return s?(this.selectedValue=s,void(this.selectedUnit&&this.selectedValue&&this.handleTimeValueClick(this.selectedUnit,this.selectedValue,t))):(this.selectedValue=void 0,this.startDate=null,this.endDate=null,void this.requestUpdate())}t.detail.value=t.detail.value.replace(/e/gi,"");const e=Number(t.detail.value);e&&(this.selectedValue=e,this.selectedUnit&&this.selectedValue&&this.handleTimeValueClick(this.selectedUnit,this.selectedValue,t))}handleUnitChange(t){t.stopPropagation(),this.selectedUnit=t.detail.value,this.selectedUnit&&this.selectedValue&&this.handleTimeValueClick(this.selectedUnit,this.selectedValue,t)}handleTimeValueClick(t,e,i){this.createRelativePeriod(t,e),this.selectedUnit=t,this.selectedValue=e}createRelativePeriod(t,e){const i=new Date,s=new Date,n="date-time-picker"===this.variant;switch(t){case"minutes":n?s.setTime(i.getTime()-6e4*e):s.setMinutes(s.getMinutes()-e);break;case"hours":n?s.setTime(i.getTime()-36e5*e):s.setHours(s.getHours()-e);break;case"days":s.setDate(s.getDate()-e);break;case"weeks":s.setDate(s.getDate()-7*e);break;case"months":if(n){const t=s.getDate();s.setDate(1),s.setMonth(s.getMonth()-e);const i=v(s.getFullYear(),s.getMonth()+1,0).getDate();s.setDate(Math.min(t,i))}else s.setMonth(s.getMonth()-e)}return n&&(isNaN(s.getTime())||isNaN(i.getTime()))?(this.startDate=null,this.endDate=null,{startDate:null,endDate:null}):(this.startDate=new Date(s.getTime()),this.endDate=new Date(i.getTime()),{startDate:this.startDate,endDate:this.endDate})}handleStartTimeInput(t){if(t.stopPropagation(),!this.startDate)return void(this.startDate=null);const e=this.parseTime(t.detail.value,this.startDate);e?this.startDate=e:this.startDate.setHours(0,0,0),this.requestUpdate()}handleEndTimeInput(t){if(t.stopPropagation(),!this.endDate)return void(this.endDate=null);const e=this.parseTime(t.detail.value,this.endDate);e?this.endDate=e:this.endDate.setHours(0,0,0),this.requestUpdate()}parseTime(t,e){if(!this.isValidTimeInput(t))return null;const[i,s,n]=t.split(":").map(Number),r=new Date(e.getTime());return r.setHours(i,s,n),r}isValidTimeInput(t){return/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/.test(t)}formatTime(t){if(!t)return"";return`${String(t.getHours()).padStart(2,"0")}:${String(t.getMinutes()).padStart(2,"0")}:${String(t.getSeconds()).padStart(2,"0")}`}nextMonth(){if(!this.disabled)if(11===this.currentMonth){const t=this.currentYear+1;if(void 0!==this.maxYear&&t>this.maxYear)return;this.currentMonth=0,this.currentYear=t}else this.currentMonth++}prevMonth(){if(!this.disabled)if(0===this.currentMonth){const t=this.currentYear-1;if(void 0!==this.minYear&&t<this.minYear)return;this.currentMonth=11,this.currentYear=t}else this.currentMonth--}confimRange(){this.startDate&&this.endDate&&this.emitChangedData({startDate:this.startDate,endDate:this.endDate})}onTypeChange(t){this.disabled||(this.type=t.detail.value,"date-time-picker"===this.variant&&"absolute"!==this.type&&(this.expanded=!1),this.emit("nile-type-change",{value:this.type}))}getUTCDate(t){return"date-time-picker"===this.variant?new Date($(Number(t.slice(0,4)),Number(t.slice(5,7))-1,Number(t.slice(8,10)))):new Date(Date.UTC(t.slice(0,4),t.slice(5,7)-1,t.slice(8,10)))}emitChangedData(t){this.emit("nile-changed",t),this.emit("nile-change",t)}getDaysArray(t,e){const i=new Date(t,e+1,0).getDate();return Array.from({length:i},((t,e)=>e+1))}renderDateTimePicker(){const t="absolute"===this.type&&this.expanded&&!!this.tpLockedHeight;return e`
+      <div
+        class=${l({base:!0,"base--date-time-picker":!0,"base--tp-expanded":this.expanded,"base--tp-fewfields":this.tpFewFieldsNoTz,"base--tp-height-locked":t})}
+        style=${t?`--nile-calendar-tp-locked-height:${this.tpLockedHeight}`:i}
+        part="calendar-container"
+      >
+        <div class=${l({"calendar-config":!0,hidden:!this.showTypes})} part="calendar-config">
+          <div class="calendar-switcher" part="calendar-switcher">
+            <nile-tab-group centered @nile-tab-show="${this.onTypeChange}" value="${this.type}">
+              <nile-tab slot="nav" panel="absolute" tabindex="${this.disabled?"-1":"0"}">Absolute</nile-tab>
+              <nile-tab slot="nav" panel="relative" tabindex="${this.disabled?"-1":"0"}">Relative</nile-tab>
+            </nile-tab-group>
+          </div>
+        </div>
+
+        ${"relative"===this.type?this.renderRelativeCalendar():this.renderDateTimePickerAbsolute()}
+
+        <div
+          class=${l({"tp-footer":!0,"tp-footer--relative":"relative"===this.type})}
+          part="tp-footer"
+        >
+          ${"absolute"===this.type?e`
+          <nile-button
+            id="tp-set-to-now"
+            class="tp-set-to-now-button"
+            part="tp-set-to-now-button"
+            variant="secondary"
+            ?disabled="${this.disabled}"
+            @click="${this.handleSetToNow}"
+            @keydown="${t=>{"Enter"!==t.key&&" "!==t.key||this.handleSetToNow()}}"
+          >Set to now <nile-glyph name="ng-clock" size="16" method="stroke" color=${this.disabled?"var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))":i}></nile-glyph></nile-button>
+          <nile-lite-tooltip
+            for="tp-set-to-now"
+            content="Sets the time to the current time"
+            size="small"
+          ></nile-lite-tooltip>
+          `:i}
+          <div class="tp-footer-actions" part="tp-footer-actions">
+            <nile-button
+              class="clear-button"
+              part="clear-button"
+              variant="secondary"
+              ?disabled="${this.disabled||!this.hasSelection()}"
+              @click="${this.handleReset}"
+              @keydown="${t=>{"Enter"!==t.key&&" "!==t.key||this.handleReset()}}"
+            >Reset</nile-button>
+            <nile-button
+              class="apply-button"
+              part="apply-button"
+              ?disabled="${this.disabled||!this.hasSelection()}"
+              @click="${this.handleApply}"
+              @keydown="${t=>{"Enter"!==t.key&&" "!==t.key||this.handleApply()}}"
+            >Apply</nile-button>
+          </div>
+        </div>
+      </div>
+    `}renderDateTimePickerAbsolute(){return e`
+      <div class="calendar-wrapper" part="calendar-wrapper">
+        <div class="calendar-container">
+          ${this.expanded?this.renderExpandedCalendar():this.renderCollapsedMonth(this.currentYear,this.currentMonth)}
+        </div>
+      </div>
+
+      <div
+        class=${l({"tp-chevron":!0,"tp-chevron--expanded":this.expanded})}
+        part="tp-chevron"
+        role="button"
+        tabindex="${this.disabled?"-1":"0"}"
+        aria-expanded="${this.expanded}"
+        aria-label="${this.expanded?"Collapse calendar":"Expand calendar"}"
+        @click="${this.toggleExpanded}"
+        @keydown="${t=>{"Enter"!==t.key&&" "!==t.key||this.toggleExpanded()}}"
+      >
+        <nile-icon name="arrowdropdown" color=${this.disabled?"var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))":"var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))"}></nile-icon>
+      </div>
+
+      <div class="tp-scroll-area" part="tp-scroll-area">
+        <div class="tp-scroll-content" part="tp-scroll-content">
+          ${this.renderTimeFields()}
+          ${this.resolvedTimeFields.timezone?this.renderTimezone():""}
+        </div>
+      </div>
+    `}renderExpandedCalendar(){return this.renderVariantMonth(this.currentYear,this.currentMonth,this.getFullMonthDays(this.currentYear,this.currentMonth))}renderCollapsedMonth(t,e){return this.renderVariantMonth(t,e,this.getCollapsedWindowDays(t,e))}renderVariantMonth(t,s,n){const r=(t,e,i,s)=>{if(!s)return"";if(this.value){if(t===this.value.getDate()&&e===this.value.getMonth()&&i===this.value.getFullYear())return"selected-date"}return""},a=(t,e,i)=>{const s=new Date;return t===s.getDate()&&e+1===s.getMonth()+1&&i===s.getFullYear()},o=t=>`${t.year}-${t.month}-${t.day}`,h=n.filter((t=>t.inMonth&&this.isAllowedDate(t.day,t.month,t.year))),d=[this.tpFocusDate&&this.tpFocusDate,this.value&&{year:this.value.getFullYear(),month:this.value.getMonth(),day:this.value.getDate()},(()=>{const t=new Date;return{year:t.getFullYear(),month:t.getMonth(),day:t.getDate()}})()];let c=null;for(const t of d)if(t&&h.some((e=>o(e)===o(t)))){c=o(t);break}return null===c&&h.length&&(c=o(h[0])),e`
+      <div class="calendar" part="calendar">
+        <div class="calendar-header" part="calendar-header">
+          <nile-icon
+            class="calendar-header__month-navigation"
+            part="calendar-header-prev"
+            name="var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))"
+            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+            color=${this.disabled?"var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))":"var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))"}
+            role="button"
+            aria-label="Previous month"
+            aria-disabled="${this.disabled||this.isPrevDisabled()}"
+            tabindex="${this.disabled||this.isPrevDisabled()?"-1":"0"}"
+            @keydown="${t=>{"Enter"!==t.key&&" "!==t.key||this.prevMonth()}}"
+            @click="${this.prevMonth}"
+          >
+          </nile-icon>
+          <div class="calendar-header__center" part="calendar-header-center">
+
+${this.showMonthDropdown||this.showYearDropdown?e`
+  ${this.showMonthDropdown?e`
+    <nile-dropdown ?disabled="${this.disabled}" class="month-dropdown"
+      @nile-after-show="${()=>this.scrollSelectedIntoView(".month-menu-item[selected]")}">
+      <span
+        slot="trigger"
+        class="calendar-header__trigger month-trigger"
+        role="button"
+        part="trigger"
+        tabindex="${this.disabled?"-1":"0"}"
+        @keydown="${t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.currentTarget.click())}}"
+      >
+        ${new Date(t,s).toLocaleString("default",{month:"long"})}
+        <nile-icon name="arrowdropdown" color=${this.disabled?"var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))":"var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))"} class="calendar-header__caret"></nile-icon>
+      </span>
+      <nile-menu>
+        <div class="month-scroll-wrapper">
+          ${this.monthNames.map(((t,i)=>e`
+            <nile-menu-item
+              class="month-menu-item"
+              ?selected="${i===s}"
+              @click="${()=>this.onMonthSelected(i)}"
+            >
+              ${t}
+            </nile-menu-item>
+          `))}
+        </div>
+      </nile-menu>
+    </nile-dropdown>
+  `:e`
+    <span
+      >${new Date(t,s).toLocaleString("default",{month:"long"})}</span
+    >
+  `}
+  ${this.showYearDropdown?e`
+    <nile-dropdown ?disabled="${this.disabled}" class="year-dropdown"
+      @nile-after-show="${()=>this.scrollSelectedIntoView(".year-menu-item[selected]")}">
+      <span
+        slot="trigger"
+        class="calendar-header__trigger"
+        role="button"
+        part="trigger"
+        tabindex="${this.disabled?"-1":"0"}"
+        @keydown="${t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.currentTarget.click())}}"
+      >
+        ${t}
+        <nile-icon name="arrowdropdown" color=${this.disabled?"var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))":"var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))"} class="calendar-header__caret"></nile-icon>
+      </span>
+      <nile-menu>
+        <div class="year-scroll-wrapper">
+          ${this.yearOptions.map((i=>e`
+              <nile-menu-item
+                class="year-menu-item"
+                ?selected="${i===t}"
+                @click="${()=>this.onYearSelected(i)}"
+              >
+                ${i}
+              </nile-menu-item>
+            `))}
+        </div>
+      </nile-menu>
+    </nile-dropdown>
+  `:e`
+    <span>${t}</span>
+  `}
+`:e`
+  <span
+    >${new Date(t,s).toLocaleString("default",{month:"long"})}
+    ${t}</span
+  >
+`}
+</div>
+
+          <nile-icon
+            class="calendar-header__month-navigation"
+            part="calendar-header-next"
+            name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))"
+            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+            color=${this.disabled?"var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))":"var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))"}
+            role="button"
+            aria-label="Next month"
+            aria-disabled="${this.disabled||this.isNextDisabled()}"
+            tabindex="${this.disabled||this.isNextDisabled()?"-1":"0"}"
+            @keydown="${t=>{"Enter"!==t.key&&" "!==t.key||this.nextMonth()}}"
+            @click="${this.nextMonth}"
+          >
+          </nile-icon>
+        </div>
+
+        <div class="days_container" part="days-container">
+        ${["Sun","Mon","Tue","Wed","Thu","Fri","Sat"].map((t=>e`<div class="day_name" part="day-name">${t}</div>`))}
+          ${n.map((t=>{const s=t.inMonth,n=r(t.day,t.month,t.year,s),h={day_date:!0,"not-allowed":!this.isAllowedDate(t.day,t.month,t.year),filler:!s};n&&(h[n]=!0);const d=this.isAllowedDate(t.day,t.month,t.year),u=a(t.day,t.month,t.year)&&s;return e`
+            <div
+              part="calendar-day-${t.day}"
+              class=${l(h)}
+              role=${s?"button":i}
+              aria-hidden=${s?i:"true"}
+              aria-label=${s?this.dayCellLabel(t.day,t.month,t.year):i}
+              aria-disabled=${!s||d&&!this.disabled?i:"true"}
+              aria-pressed=${s?String(!!n):i}
+              aria-current=${u?"date":i}
+             data-tp-date="${s?o(t):i}"
+             tabindex="${s&&!this.disabled&&o(t)===c?"0":"-1"}"
+              @keydown="${e=>{if(s)return"Enter"===e.key||" "===e.key?(e.preventDefault(),this.tpFocusDate={year:t.year,month:t.month,day:t.day},void this.tpSelectDate(t.day,t.month,t.year)):void this.handleDayNavigationKey(e,t)}}"
+              @click="${()=>{s&&(this.tpFocusDate={year:t.year,month:t.month,day:t.day},this.tpSelectDate(t.day,t.month,t.year))}}"
+            >
+              <span class="day-label" part="calendar-day-label">
+                ${t.day}
+                ${a(t.day,t.month,t.year)&&s?e`<div class="current__date__dot" part="current-date-dot"></div>`:i}
+              </span>
+            </div>`}))}
+        </div>
+      </div>
+    `}getCollapsedWindowDays(t,e){const i=new Date,s=i.getFullYear()===t&&i.getMonth()===e,n=i=>{const s=v(t,e,i),n=new Date(s);return n.setDate(s.getDate()-s.getDay()-7),n},r=this.value instanceof Date&&this.value.getFullYear()===t&&this.value.getMonth()===e?n(this.value.getDate()):s?n(i.getDate()):(()=>{const i=v(t,e,1),s=new Date(i);return s.setDate(1-i.getDay()),s})();return Array.from({length:21},((i,s)=>{const n=new Date(r);return n.setDate(r.getDate()+s),{day:n.getDate(),month:n.getMonth(),year:n.getFullYear(),inMonth:n.getMonth()===e&&n.getFullYear()===t}}))}getFullMonthDays(t,e){const i=v(t,e,1).getDay(),s=v(t,e+1,0).getDate(),n=7*Math.ceil((i+s)/7),r=v(t,e,1-i);return Array.from({length:n},((i,s)=>{const n=new Date(r);return n.setDate(r.getDate()+s),{day:n.getDate(),month:n.getMonth(),year:n.getFullYear(),inMonth:n.getMonth()===e&&n.getFullYear()===t}}))}handleDayNavigationKey(t,e){if(this.disabled||t.ctrlKey||t.metaKey||t.altKey)return;const i=v(e.year,e.month,e.day);let s=null;switch(t.key){case"ArrowLeft":s=v(e.year,e.month,e.day-1);break;case"ArrowRight":s=v(e.year,e.month,e.day+1);break;case"ArrowUp":s=v(e.year,e.month,e.day-7);break;case"ArrowDown":s=v(e.year,e.month,e.day+7);break;case"Home":s=v(e.year,e.month,e.day-i.getDay());break;case"End":s=v(e.year,e.month,e.day+(6-i.getDay()));break;case"PageUp":case"PageDown":{const i=("PageUp"===t.key?-1:1)*(t.shiftKey?12:1),n=e.month+i,r=v(e.year,n+1,0).getDate();s=v(e.year,n,Math.min(e.day,r));break}default:return}t.preventDefault(),this.moveDayFocus(s)}moveDayFocus(t){const e=t.getFullYear(),i=t.getMonth(),s=this.minYear,n=this.maxYear;if(void 0!==s&&e<s||void 0!==n&&e>n)return;this.tpFocusDate={year:e,month:i,day:t.getDate()},this.currentYear=e,this.currentMonth=i;const r=`[data-tp-date="${e}-${i}-${t.getDate()}"]`,a=()=>this.shadowRoot?.querySelector(r)?.focus();this.updateComplete.then((()=>{this.shadowRoot?.querySelector(r)?a():(this.expanded=!0,this.updateComplete.then(a).catch((()=>{})))})).catch((()=>{}))}tpSelectDate(t,e,i){if(this.disabled)return;if(!this.isAllowedDate(t,e,i))return;const s=v(i,e,t),n=!!this.value&&this.value.getFullYear()===i&&this.value.getMonth()===e&&this.value.getDate()===t;n&&this.doubleClickUnselect?this.handleReset():(n||this.resetTimeUnits(),this.value=s)}resetTimeUnits(){this.tpHours=null,this.tpMinutes=null,this.tpSeconds=null,this.tpMilliseconds=null,this.tpEditingText=""}renderTimeFields(){const t=this.resolvedTimeFields;return e`
+      <div class=${l({"tp-time-fields":!0,"tp-time-fields--stacked":this.tpFewFieldsNoTz})} part="tp-time-fields">
+        ${t.hours?this.renderTimeField("Hours (24H)","HH",23,this.tpHours,(t=>{this.tpHours=t})):""}
+        ${t.minutes?this.renderTimeField("Minutes","MM",59,this.tpMinutes,(t=>{this.tpMinutes=t})):""}
+        ${t.seconds?this.renderTimeField("Seconds","SS",59,this.tpSeconds,(t=>{this.tpSeconds=t})):""}
+        ${t.milliseconds?this.renderTimeField("Milliseconds","MS",999,this.tpMilliseconds,(t=>{this.tpMilliseconds=t})):""}
+      </div>
+    `}renderTimeField(t,s,n,r,a){const l=String(n).length,o=t=>{t.stopPropagation();const e=t.target,{text:i,value:s}=(t=>{let e=(t||"").replace(/\D/g,"");for(;e.length>l&&"0"===e[0];)e=e.slice(1);if(e.length>l&&(e=e.slice(0,l)),""===e)return{text:"",value:null};const i=Number(e);if(i>n){const t=Number(e[0]);return{text:String(t).padStart(l,"0"),value:t}}return{text:e,value:i}})(e.value);a(s),this.tpEditingText=i,e.value!==i&&(e.value=i)},h=(e,i)=>{if(this.disabled)return;if(i){const t=i.closest("nile-input");t?.input&&t.focus()}const s=n+1,o=null===r?1===e?0:n:((r+e)%s+s)%s;a(o),this.tpFocusedTimeField=t,this.tpEditingText=String(o).padStart(l,"0")},d=this.tpFocusedTimeField===t?this.tpEditingText:null!==r||this.value?String(r??0).padStart(l,"0"):"";return e`
+      <nile-input
+        class="tp-time-field"
+        part="tp-time-field"
+        type="text"
+        inputmode="numeric"
+        label="${t}"
+        placeholder="${s}"
+        ?disabled="${this.disabled}"
+        value="${d}"
+        @nile-change="${o}"
+        @nile-input="${o}"
+        @keydown="${t=>{"ArrowUp"===t.key?(t.preventDefault(),h(1)):"ArrowDown"===t.key&&(t.preventDefault(),h(-1))}}"
+        @nile-focus="${e=>{e.stopPropagation(),this.tpFocusedTimeField=t,this.tpEditingText=""}}"
+        @nile-blur="${e=>{e.stopPropagation(),this.tpFocusedTimeField===t&&(this.tpFocusedTimeField=null)}}"
+      >
+        <div
+          slot="suffix"
+          class="tp-stepper"
+          part="tp-stepper"
+          @mousedown="${t=>t.preventDefault()}"
+        >
+          <div
+            class="tp-stepper-btn tp-stepper-btn--up"
+            part="tp-stepper-btn tp-stepper-btn-up"
+            role="button"
+            tabindex="${this.disabled?"-1":"0"}"
+            aria-label="Increase ${t}"
+            @click="${t=>h(1,t.currentTarget)}"
+            @keydown="${t=>{"Enter"!==t.key&&" "!==t.key||h(1,t.currentTarget)}}"
+          >
+            <nile-icon name="arrowdropdown" size="16" color=${this.disabled?"var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))":i}></nile-icon>
+          </div>
+          <div
+            class="tp-stepper-btn"
+            part="tp-stepper-btn tp-stepper-btn-down"
+            role="button"
+            tabindex="${this.disabled?"-1":"0"}"
+            aria-label="Decrease ${t}"
+            @click="${t=>h(-1,t.currentTarget)}"
+            @keydown="${t=>{"Enter"!==t.key&&" "!==t.key||h(-1,t.currentTarget)}}"
+          >
+            <nile-icon name="arrowdropdown" size="16" color=${this.disabled?"var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))":i}></nile-icon>
+          </div>
+        </div>
+      </nile-input>
+    `}get timezoneOptions(){const t="function"==typeof Intl.supportedValuesOf?Intl.supportedValuesOf("timeZone"):b;return t.includes("UTC")?t:["UTC",...t]}renderTimezone(){return e`
+      <div class="tp-timezone" part="tp-timezone">
+        <div class="tp-timezone-header" part="tp-timezone-header">
+          <span class="tp-timezone-label" part="tp-timezone-label">Timezone</span>
+          <span
+            class="tp-timezone-local-link"
+            part="tp-timezone-local-link"
+            role="button"
+            tabindex="${this.disabled?"-1":"0"}"
+            @click="${this.handleUseLocalTimezone}"
+            @keydown="${t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleUseLocalTimezone())}}"
+          >Use local timezone</span>
+        </div>
+        <nile-select
+          class="tp-timezone-select"
+          part="tp-timezone-select"
+          hoist
+          placement="top"
+          ?disabled="${this.disabled}"
+          searchEnabled
+          placeholder="Select timezone"
+          .value="${this.timezone}"
+          @nile-change="${this.handleTimezoneChange}"
+        >
+          ${this.timezoneOptions.map((t=>e`<nile-option value="${t}">${t}</nile-option>`))}
+        </nile-select>
+      </div>
+    `}handleTimezoneChange(t){t.stopPropagation();const e=t.detail&&(t.detail.value??t.detail)||t.target?.value;"string"==typeof e&&e&&this.setTimezoneInternally(e)}handleUseLocalTimezone(){if(this.disabled)return;const t=Intl.DateTimeFormat().resolvedOptions().timeZone;t&&this.setTimezoneInternally(t)}toggleExpanded(){this.disabled||(this.expanded=!this.expanded)}composeLocalTimezoneValue(){return this.value?null===this.seedInstant||this.seedFieldsKey!==this.instantSeedFieldsKey()||null!==this.seedZone&&this.seedZone!==this.timezone?this.wallClockToInstant(this.value.getFullYear(),this.value.getMonth(),this.value.getDate(),this.tpHours??0,this.tpMinutes??0,this.tpSeconds??0,this.tpMilliseconds??0):new Date(this.seedInstant):null}composeValueISO(t){const e=this.timezone||"UTC",i=(t,e=2)=>String(t).padStart(e,"0"),s=(t%1e3+1e3)%1e3;let n,r,a,l,o,h,d;try{const i=new Intl.DateTimeFormat("en-US",{timeZone:e,hourCycle:"h23",year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"}),c={};for(const e of i.formatToParts(new Date(t)))"literal"!==e.type&&(c[e.type]=Number(e.value));n=c.year,r=c.month,a=c.day,l=c.hour,o=c.minute,h=c.second,d=this.zoneOffsetMs(t-s)}catch{const e=new Date(t);n=e.getFullYear(),r=e.getMonth()+1,a=e.getDate(),l=e.getHours(),o=e.getMinutes(),h=e.getSeconds(),d=0}d=6e4*Math.round(d/6e4);const c=d>=0?"+":"-",u=Math.abs(d),p=`${c}${i(Math.floor(u/36e5))}:${i(Math.floor(u%36e5/6e4))}`;return`${i(n,4)}-${i(r)}-${i(a)}T${i(l)}:${i(o)}:${i(h)}.${i(s,3)}[GMT${p} ${e}]`}wallClockToInstant(t,e,i,s,n,r,a){const l=$(t,e,i,s,n,r,0);try{const t=this.zoneOffsetMs(l);let e=l-t;const i=this.zoneOffsetMs(e);return i!==t&&(e=l-i),new Date(e+a)}catch{const t=new Date(this.value.getTime());return t.setHours(s,n,r,a),t}}zoneOffsetMs(t){const e=new Intl.DateTimeFormat("en-US",{timeZone:this.timezone,hourCycle:"h23",year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"}),i={};for(const s of e.formatToParts(new Date(t)))"literal"!==s.type&&(i[s.type]=Number(s.value));return $(i.year,i.month-1,i.day,i.hour,i.minute,i.second)-t}hasSelection(){return"relative"===this.type?Boolean(this.startDate&&this.endDate):Boolean(this.value)}handleSetToNow(){if(this.disabled)return;const t=new Date;this.tpHours=t.getHours(),this.tpMinutes=t.getMinutes(),this.tpSeconds=t.getSeconds(),this.tpMilliseconds=t.getMilliseconds(),this.value=new Date(t.getFullYear(),t.getMonth(),t.getDate()),this.currentMonth=t.getMonth(),this.currentYear=t.getFullYear();const e=Intl.DateTimeFormat().resolvedOptions().timeZone;e&&this.setTimezoneInternally(e)}handleApply(){if(this.disabled||!this.hasSelection())return;if("relative"===this.type)return void this.emitDateTimePickerChange({startDate:this.startDate,endDate:this.endDate,timezone:"UTC"});const t=this.composeLocalTimezoneValue(),e=t?t.getTime():null;this.emitDateTimePickerChange({value:null===e?null:this.composeValueISO(e),localTimezoneValue:t,unixEpoch:e,timezone:this.timezone})}handleReset(){this.disabled||(this.clearInstantSeed(),this.value=null,this.startDate=null,this.endDate=null,this.selectedUnit=void 0,this.selectedValue=void 0,this.resetTimeUnits(),this.setTimezoneInternally(this.configuredTimezone),this.requestUpdate(),this.emit("nile-clear"))}emitDateTimePickerChange(t){this.emit("nile-change",t)}};t([s({type:String,attribute:"value"})],S.prototype,"valueAttribute",void 0),t([s({type:String,attribute:!0,reflect:!0})],S.prototype,"allowedDates",void 0),t([s({type:Boolean,reflect:!0})],S.prototype,"range",void 0),t([s({type:Boolean,attribute:!0,reflect:!0})],S.prototype,"hideTypes",void 0),t([s({type:Boolean,attribute:!0,reflect:!0})],S.prototype,"showTypes",void 0),t([s({type:Boolean,reflect:!0})],S.prototype,"doubleClickUnselect",void 0),t([s({type:Boolean,reflect:!0})],S.prototype,"allowClear",void 0),t([s({type:String,reflect:!0})],S.prototype,"type",void 0),t([s({type:String})],S.prototype,"selectedUnit",void 0),t([s({type:Number})],S.prototype,"selectedValue",void 0),t([s({type:Array,attribute:"hide-duration-fields"})],S.prototype,"hideDurationFields",void 0),t([s({type:Boolean})],S.prototype,"showManualInputs",void 0),t([s({type:Number,attribute:!0,reflect:!0})],S.prototype,"startYear",void 0),t([s({type:Number,attribute:!0,reflect:!0})],S.prototype,"endYear",void 0),t([s({type:Boolean,attribute:!0,reflect:!0})],S.prototype,"showMonthDropdown",void 0),t([s({type:Boolean,attribute:!0,reflect:!0})],S.prototype,"showYearDropdown",void 0),t([s({type:String,reflect:!0,attribute:!0})],S.prototype,"dateFormat",void 0),t([s({type:Boolean,reflect:!0})],S.prototype,"structuredInput",void 0),t([n()],S.prototype,"startDate",void 0),t([n()],S.prototype,"endDate",void 0),t([n()],S.prototype,"isSelectingStart",void 0),t([n()],S.prototype,"hideInput",void 0),t([n()],S.prototype,"value",void 0),t([n()],S.prototype,"currentMonth",void 0),t([n()],S.prototype,"currentYear",void 0),t([n()],S.prototype,"allowedDatesLocal",void 0),t([s({type:Boolean,attribute:!0,reflect:!0})],S.prototype,"disabled",void 0),t([s({type:String,attribute:!0})],S.prototype,"variant",void 0),t([s({type:String,attribute:!0})],S.prototype,"timezone",void 0),t([s({type:Array,attribute:"hide-time-fields"})],S.prototype,"hideTimeFields",void 0),t([n()],S.prototype,"expanded",void 0),t([n()],S.prototype,"tpLockedHeight",void 0),t([n()],S.prototype,"tpHours",void 0),t([n()],S.prototype,"tpMinutes",void 0),t([n()],S.prototype,"tpSeconds",void 0),t([n()],S.prototype,"tpMilliseconds",void 0),t([n()],S.prototype,"tpFocusedTimeField",void 0),t([n()],S.prototype,"tpFocusDate",void 0),t([n()],S.prototype,"tpEditingText",void 0),t([o("allowedDates")],S.prototype,"checkValidAllowedDate",null),S=t([r("nile-calendar")],S);export{S as N,N as a,k as i,M as w};