@amwaljs/checkout-button 0.3.1 → 0.3.2

package/dist/components/ion-datetime.js

@@ -1,4 +1,1963 @@
-import{p as t,H as e,c as a,w as i,h as n,d as o,t as s}from"./p-BnQDByf2.js";import{startFocusVisible as r}from"./p-BmVRXR1y.js";import{r as d,g as l,e as h}from"./p-BwKjt_Dc.js";import{a as c,p as m}from"./p-CYPPT3AE.js";import{i as p}from"./p-C53feagD.js";import{c as u}from"./p-DiVJyqlX.js";import{c as y,f as b,g,h as f,a as x}from"./p-CwRU9ccI.js";import{g as w}from"./p-CN34uOrj.js";import{i as v,a as k,g as j,b as C,c as O,d as P,e as D,v as V,f as z,h as E,j as T,k as A,l as S,m as I,n as B,o as R,p as $,q as M,r as W,s as L,w as F,t as H,u as Y,x as q,y as G,z as N,A as X,B as J,C as _,D as K,E as U,F as Z,G as Q,H as tt,I as et,J as at,K as it,L as nt,M as ot,N as st,O as rt,P as dt,Q as lt,R as ht}from"./p-DoR35tr_.js";import{d as ct}from"./p-BIA8A9ZO.js";import{d as mt}from"./p-Cm9b7fIl.js";import{d as pt}from"./p-uXV7tzS3.js";import{d as ut}from"./p-DMmSL7_l.js";import{d as yt}from"./p-DxSo4SXG.js";import{d as bt}from"./p-DTgJTJD6.js";import{d as gt}from"./p-DxEgz9x_.js";import{d as ft}from"./p-VeNdmYSo.js";import{d as xt}from"./p-BriBxgcM.js";import{d as wt}from"./p-Cho32MPa.js";import{d as vt}from"./p-B5XH2zAk.js";
+import { p as proxyCustomElement, H, c as createEvent, w as writeTask, h, d as Host } from './p-ec0e3f3f.js';
+import { startFocusVisible } from './p-620fa0ec.js';
+import { b as raf, e as renderHiddenInput, g as getElementRoot } from './p-2bb89b46.js';
+import { a as printIonError, p as printIonWarning } from './p-e187a77c.js';
+import { i as isRTL } from './p-d5862637.js';
+import { c as createColorClasses } from './p-350e7423.js';
+import { a as chevronBack, f as chevronForward, c as chevronDown, g as caretUpSharp, h as caretDownSharp } from './p-b8fdd517.js';
+import { g as getIonMode } from './p-901c16c5.js';
+import { g as generateDayAriaLabel, a as getDay, i as isBefore, b as isAfter, c as isSameDay, d as getPreviousMonth, e as getNextMonth, v as validateParts, f as getPartsFromCalendarDay, h as getEndOfWeek, j as getStartOfWeek, k as getPreviousDay, l as getNextDay, m as getPreviousWeek, n as getNextWeek, p as parseMinParts, o as parseMaxParts, q as parseDate, w as warnIfValueOutOfBounds, r as convertToArrayOfNumbers, s as convertDataToISO, t as getToday, u as getClosestValidDate, x as getNumDaysInMonth, y as getCombinedDateColumnData, z as getMonthColumnData, A as getDayColumnData, B as getYearColumnData, C as isMonthFirstLocale, D as getTimeColumnsData, E as isLocaleDayPeriodRTL, F as getDaysOfWeek, G as getMonthAndYear, H as getDaysOfMonth, I as generateMonths, J as getHourCycle, K as getLocalizedTime, L as getLocalizedDateTime, M as formatValue, N as getNextYear, O as getPreviousYear, P as clampDate, Q as parseAmPm, R as calculateHourFromAMPM } from './p-39ad94cf.js';
+import { d as defineCustomElement$c } from './p-f7e3c502.js';
+import { d as defineCustomElement$b } from './p-2fc99fef.js';
+import { d as defineCustomElement$a } from './p-5280b372.js';
+import { d as defineCustomElement$9 } from './p-83e529db.js';
+import { d as defineCustomElement$8 } from './p-d25fd077.js';
+import { d as defineCustomElement$7 } from './p-d69dc32f.js';
+import { d as defineCustomElement$6 } from './p-95c79593.js';
+import { d as defineCustomElement$5 } from './p-031ed92d.js';
+import { d as defineCustomElement$4 } from './p-0dc7a5ff.js';
+import { d as defineCustomElement$3 } from './p-e65ea9fb.js';
+import { d as defineCustomElement$2 } from './p-51c44f42.js';
+
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
- */const kt=(t,e,a,i)=>null===t.day||void 0!==i&&!i.includes(t.day)||!(!e||!v(t,e))||!(!a||!k(t,a)),jt=(t,e,a,i,n,o,s)=>{const r=void 0!==(Array.isArray(a)?a:[a]).find((t=>O(e,t))),d=O(e,i);return{disabled:kt(e,n,o,s),isActive:r,isToday:d,ariaSelected:r?"true":null,ariaLabel:D(t,d,e),text:null!=e.day?P(t,e):null}},Ct=(t,{minParts:e,maxParts:a})=>!!((t,e,a)=>!!(e&&e.year>t)||!!(a&&a.year<t))(t.year,e,a)||!!(e&&v(t,e)||a&&k(t,a)),Ot=(t,e)=>{var a,i,n,o;((null===(a=null==e?void 0:e.date)||void 0===a?void 0:a.timeZone)||(null===(i=null==e?void 0:e.date)||void 0===i?void 0:i.timeZoneName)||(null===(n=null==e?void 0:e.time)||void 0===n?void 0:n.timeZone)||(null===(o=null==e?void 0:e.time)||void 0===o?void 0:o.timeZoneName))&&m('Datetime: "timeZone" and "timeZoneName" are not supported in "formatOptions".',t)},Pt=(t,e,a)=>{if(a)switch(e){case"date":case"month-year":case"month":case"year":void 0===a.date&&m(`Datetime: The '${e}' presentation requires a date object in formatOptions.`,t);break;case"time":void 0===a.time&&m("Datetime: The 'time' presentation requires a time object in formatOptions.",t);break;case"date-time":case"time-date":void 0===a.date&&void 0===a.time&&m(`Datetime: The '${e}' presentation requires either a date or time object (or both) in formatOptions.`,t)}},Dt=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.ionCancel=a(this,"ionCancel",7),this.ionChange=a(this,"ionChange",7),this.ionValueChange=a(this,"ionValueChange",7),this.ionFocus=a(this,"ionFocus",7),this.ionBlur=a(this,"ionBlur",7),this.ionStyle=a(this,"ionStyle",7),this.ionRender=a(this,"ionRender",7),this.inputId="ion-dt-"+Vt++,this.prevPresentation=null,this.warnIfIncorrectValueUsage=()=>{const{multiple:t,value:e}=this;!t&&Array.isArray(e)&&m(`ion-datetime was passed an array of values, but multiple="false". This is incorrect usage and may result in unexpected behaviors. To dismiss this warning, pass a string to the "value" property when multiple="false".\n\n  Value Passed: [${e.map((t=>`'${t}'`)).join(", ")}]\n`,this.el)},this.setValue=t=>{this.value=t,this.ionChange.emit({value:t})},this.getActivePartsWithFallback=()=>{var t;const{defaultParts:e}=this;return null!==(t=this.getActivePart())&&void 0!==t?t:e},this.getActivePart=()=>{const{activeParts:t}=this;return Array.isArray(t)?t[0]:t},this.closeParentOverlay=()=>{const t=this.el.closest("ion-modal, ion-popover");t&&t.dismiss()},this.setWorkingParts=t=>{this.workingParts=Object.assign({},t)},this.setActiveParts=(t,e=!1)=>{if(this.readonly)return;const{multiple:a,minParts:i,maxParts:n,activeParts:o}=this,s=V(t,i,n);if(this.setWorkingParts(s),a){const t=Array.isArray(o)?o:[o];this.activeParts=e?t.filter((t=>!O(t,s))):[...t,s]}else this.activeParts=Object.assign({},s);null!==this.el.querySelector('[slot="buttons"]')||this.showDefaultButtons||this.confirm()},this.initializeKeyboardListeners=()=>{const t=this.calendarBodyRef;if(!t)return;const e=this.el.shadowRoot,a=t.querySelector(".calendar-month:nth-of-type(2)"),i=new MutationObserver((e=>{var i;!(null===(i=e[0].oldValue)||void 0===i?void 0:i.includes("ion-focused"))&&t.classList.contains("ion-focused")&&this.focusWorkingDay(a)}));i.observe(t,{attributeFilter:["class"],attributeOldValue:!0}),this.destroyKeyboardMO=()=>{null==i||i.disconnect()},t.addEventListener("keydown",(t=>{const i=e.activeElement;if(!i||!i.classList.contains("calendar-day"))return;const n=z(i);let o;switch(t.key){case"ArrowDown":t.preventDefault(),o=$(n);break;case"ArrowUp":t.preventDefault(),o=R(n);break;case"ArrowRight":t.preventDefault(),o=B(n);break;case"ArrowLeft":t.preventDefault(),o=I(n);break;case"Home":t.preventDefault(),o=S(n);break;case"End":t.preventDefault(),o=A(n);break;case"PageUp":t.preventDefault(),o=t.shiftKey?T(n):j(n);break;case"PageDown":t.preventDefault(),o=t.shiftKey?E(n):C(n);break;default:return}kt(o,this.minParts,this.maxParts)||(this.setWorkingParts(Object.assign(Object.assign({},this.workingParts),o)),requestAnimationFrame((()=>this.focusWorkingDay(a))))}))},this.focusWorkingDay=t=>{const e=t.querySelectorAll(".calendar-day-padding"),{day:a}=this.workingParts;if(null===a)return;const i=t.querySelector(`.calendar-day-wrapper:nth-of-type(${e.length+a}) .calendar-day`);i&&i.focus()},this.processMinParts=()=>{const{min:t,defaultParts:e}=this;this.minParts=void 0!==t?M(t,e):void 0},this.processMaxParts=()=>{const{max:t,defaultParts:e}=this;this.maxParts=void 0!==t?W(t,e):void 0},this.initializeCalendarListener=()=>{const t=this.calendarBodyRef;if(!t)return;const e=t.querySelectorAll(".calendar-month"),a=e[0],n=e[1],o=e[2],s="ios"===w(this)&&"undefined"!=typeof navigator&&navigator.maxTouchPoints>1;i((()=>{t.scrollLeft=a.clientWidth*(p(this.el)?-1:1);const e=e=>{const i=t.getBoundingClientRect(),n=t.scrollLeft<=2?a:o,s=n.getBoundingClientRect();if(Math.abs(s.x-i.x)>2)return;const{forceRenderDate:r}=this;return void 0!==r?{month:r.month,year:r.year,day:r.day}:n===a?j(e):n===o?C(e):void 0},r=()=>{s&&(t.style.removeProperty("pointer-events"),l=!1);const a=e(this.workingParts);if(!a)return;const{month:o,day:r,year:d}=a;Ct({month:o,year:d,day:null},{minParts:Object.assign(Object.assign({},this.minParts),{day:null}),maxParts:Object.assign(Object.assign({},this.maxParts),{day:null})})||(t.style.setProperty("overflow","hidden"),i((()=>{this.setWorkingParts(Object.assign(Object.assign({},this.workingParts),{month:o,day:r,year:d})),t.scrollLeft=n.clientWidth*(p(this.el)?-1:1),t.style.removeProperty("overflow"),this.resolveForceDateScrolling&&this.resolveForceDateScrolling()})))};let d,l=!1;const h=()=>{d&&clearTimeout(d),!l&&s&&(t.style.setProperty("pointer-events","none"),l=!0),d=setTimeout(r,50)};t.addEventListener("scroll",h),this.destroyCalendarListener=()=>{t.removeEventListener("scroll",h)}}))},this.destroyInteractionListeners=()=>{const{destroyCalendarListener:t,destroyKeyboardMO:e}=this;void 0!==t&&t(),void 0!==e&&e()},this.processValue=t=>{const e=null!=t&&(!Array.isArray(t)||t.length>0),a=e?L(t):this.defaultParts,{minParts:i,maxParts:n,workingParts:o,el:s}=this;if(this.warnIfIncorrectValueUsage(),!a)return;e&&F(a,i,n);const r=Y(Array.isArray(a)?a[0]:a,i,n),{month:d,day:l,year:h,hour:c,minute:m}=r,p=H(c);this.activeParts=e?Array.isArray(a)?[...a]:{month:d,day:l,year:h,hour:c,minute:m,ampm:p}:[];const u=void 0!==d&&d!==o.month||void 0!==h&&h!==o.year,y=s.classList.contains("datetime-ready"),{isGridStyle:b,showMonthAndYear:g}=this;let f=!0;if(Array.isArray(a)){const t=a[0].month;for(const e of a)if(e.month!==t){f=!1;break}}f&&(b&&u&&y&&!g?this.animateToDate(r):this.setWorkingParts({month:d,day:l,year:h,hour:c,minute:m,ampm:p}))},this.animateToDate=async t=>{const{workingParts:e}=this;this.forceRenderDate=t;const a=new Promise((t=>{this.resolveForceDateScrolling=t}));v(t,e)?this.prevMonth():this.nextMonth(),await a,this.resolveForceDateScrolling=void 0,this.forceRenderDate=void 0},this.onFocus=()=>{this.ionFocus.emit()},this.onBlur=()=>{this.ionBlur.emit()},this.hasValue=()=>null!=this.value,this.nextMonth=()=>{const t=this.calendarBodyRef;if(!t)return;const e=t.querySelector(".calendar-month:last-of-type");e&&t.scrollTo({top:0,left:2*e.offsetWidth*(p(this.el)?-1:1),behavior:"smooth"})},this.prevMonth=()=>{const t=this.calendarBodyRef;t&&t.querySelector(".calendar-month:first-of-type")&&t.scrollTo({top:0,left:0,behavior:"smooth"})},this.toggleMonthAndYearView=()=>{this.showMonthAndYear=!this.showMonthAndYear},this.showMonthAndYear=!1,this.activeParts=[],this.workingParts={month:5,day:28,year:2021,hour:13,minute:52,ampm:"pm"},this.isTimePopoverOpen=!1,this.forceRenderDate=void 0,this.color="primary",this.name=this.inputId,this.disabled=!1,this.formatOptions=void 0,this.readonly=!1,this.isDateEnabled=void 0,this.min=void 0,this.max=void 0,this.presentation="date-time",this.cancelText="Cancel",this.doneText="Done",this.clearText="Clear",this.yearValues=void 0,this.monthValues=void 0,this.dayValues=void 0,this.hourValues=void 0,this.minuteValues=void 0,this.locale="default",this.firstDayOfWeek=0,this.titleSelectedDatesFormatter=void 0,this.multiple=!1,this.highlightedDates=void 0,this.value=void 0,this.showDefaultTitle=!1,this.showDefaultButtons=!1,this.showClearButton=!1,this.showDefaultTimeLabel=!0,this.hourCycle=void 0,this.size="fixed",this.preferWheel=!1}formatOptionsChanged(){const{el:t,formatOptions:e,presentation:a}=this;Pt(t,a,e),Ot(t,e)}disabledChanged(){this.emitStyle()}minChanged(){this.processMinParts()}maxChanged(){this.processMaxParts()}presentationChanged(){const{el:t,formatOptions:e,presentation:a}=this;Pt(t,a,e)}get isGridStyle(){const{presentation:t,preferWheel:e}=this;return("date"===t||"date-time"===t||"time-date"===t)&&!e}yearValuesChanged(){this.parsedYearValues=q(this.yearValues)}monthValuesChanged(){this.parsedMonthValues=q(this.monthValues)}dayValuesChanged(){this.parsedDayValues=q(this.dayValues)}hourValuesChanged(){this.parsedHourValues=q(this.hourValues)}minuteValuesChanged(){this.parsedMinuteValues=q(this.minuteValues)}async valueChanged(){const{value:t}=this;this.hasValue()&&this.processValue(t),this.emitStyle(),this.ionValueChange.emit({value:t})}async confirm(t=!1){const{isCalendarPicker:e,activeParts:a,preferWheel:i,workingParts:n}=this;void 0===a&&e||this.setValue(Array.isArray(a)&&0===a.length?i?G(n):void 0:G(a)),t&&this.closeParentOverlay()}async reset(t){this.processValue(t)}async cancel(t=!1){this.ionCancel.emit(),t&&this.closeParentOverlay()}get isCalendarPicker(){const{presentation:t}=this;return"date"===t||"date-time"===t||"time-date"===t}connectedCallback(){this.clearFocusVisible=r(this.el).destroy}disconnectedCallback(){this.clearFocusVisible&&(this.clearFocusVisible(),this.clearFocusVisible=void 0)}initializeListeners(){this.initializeCalendarListener(),this.initializeKeyboardListeners()}componentDidLoad(){const{el:t,intersectionTrackerRef:e}=this,a=new IntersectionObserver((t=>{t[0].isIntersecting&&(this.initializeListeners(),i((()=>{this.el.classList.add("datetime-ready")})))}),{threshold:.01,root:t});d((()=>null==a?void 0:a.observe(e)));const n=new IntersectionObserver((t=>{t[0].isIntersecting||(this.destroyInteractionListeners(),this.showMonthAndYear=!1,i((()=>{this.el.classList.remove("datetime-ready")})))}),{threshold:0,root:t});d((()=>null==n?void 0:n.observe(e)));const o=l(this.el);o.addEventListener("ionFocus",(t=>t.stopPropagation())),o.addEventListener("ionBlur",(t=>t.stopPropagation()))}componentDidRender(){const{presentation:t,prevPresentation:e,calendarBodyRef:a,minParts:i,preferWheel:n,forceRenderDate:o}=this;if(void 0!==i&&!n&&["date-time","time-date","date"].includes(t)&&a){const t=a.querySelector(".calendar-month:nth-of-type(1)");t&&void 0===o&&(a.scrollLeft=t.clientWidth*(p(this.el)?-1:1))}null!==e?t!==e&&(this.prevPresentation=t,this.destroyInteractionListeners(),this.initializeListeners(),this.showMonthAndYear=!1,d((()=>{this.ionRender.emit()}))):this.prevPresentation=t}componentWillLoad(){const{el:t,formatOptions:e,highlightedDates:a,multiple:i,presentation:n,preferWheel:o}=this;i&&("date"!==n&&m('Multiple date selection is only supported for presentation="date".',t),o&&m('Multiple date selection is not supported with preferWheel="true".',t)),void 0!==a&&("date"!==n&&"date-time"!==n&&"time-date"!==n&&m("The highlightedDates property is only supported with the date, date-time, and time-date presentations.",t),o&&m('The highlightedDates property is not supported with preferWheel="true".',t)),e&&(Pt(t,n,e),Ot(t,e));const s=this.parsedHourValues=q(this.hourValues),r=this.parsedMinuteValues=q(this.minuteValues),d=this.parsedMonthValues=q(this.monthValues),l=this.parsedYearValues=q(this.yearValues),h=this.parsedDayValues=q(this.dayValues),c=this.todayParts=L(N());this.processMinParts(),this.processMaxParts(),this.defaultParts=X({refParts:c,monthValues:d,dayValues:h,yearValues:l,hourValues:s,minuteValues:r,minParts:this.minParts,maxParts:this.maxParts}),this.processValue(this.value),this.emitStyle()}emitStyle(){this.ionStyle.emit({interactive:!0,datetime:!0,"interactive-disabled":this.disabled})}renderFooter(){const{disabled:t,readonly:e,showDefaultButtons:a,showClearButton:i}=this,o=t||e;if(null===this.el.querySelector('[slot="buttons"]')&&!a&&!i)return;const s=()=>{this.reset(),this.setValue(void 0)};return n("div",{class:"datetime-footer"},n("div",{class:"datetime-buttons"},n("div",{class:{"datetime-action-buttons":!0,"has-clear-button":this.showClearButton}},n("slot",{name:"buttons"},n("ion-buttons",null,a&&n("ion-button",{id:"cancel-button",color:this.color,onClick:()=>this.cancel(!0),disabled:o},this.cancelText),n("div",{class:"datetime-action-buttons-container"},i&&n("ion-button",{id:"clear-button",color:this.color,onClick:()=>s(),disabled:o},this.clearText),a&&n("ion-button",{id:"confirm-button",color:this.color,onClick:()=>this.confirm(!0),disabled:o},this.doneText)))))))}renderWheelPicker(t=this.presentation){const e="time-date"===t?[this.renderTimePickerColumns(t),this.renderDatePickerColumns(t)]:[this.renderDatePickerColumns(t),this.renderTimePickerColumns(t)];return n("ion-picker-internal",null,e)}renderDatePickerColumns(t){return"date-time"===t||"time-date"===t?this.renderCombinedDatePickerColumn():this.renderIndividualDatePickerColumns(t)}renderCombinedDatePickerColumn(){const{defaultParts:t,disabled:e,workingParts:a,locale:i,minParts:o,maxParts:s,todayParts:r,isDateEnabled:d}=this,l=this.getActivePartsWithFallback(),h=J(a),m=h[h.length-1];h[0].day=1,m.day=_(m.month,m.year);const p=void 0!==o&&k(o,h[0])?o:h[0],u=void 0!==s&&v(s,m)?s:m,y=K(i,r,p,u,this.parsedDayValues,this.parsedMonthValues);let b=y.items;const g=y.parts;return d&&(b=b.map(((t,e)=>{const a=g[e];let i;try{i=!d(G(a))}catch(t){c("Exception thrown from provided `isDateEnabled` function. Please check your function and try again.",t)}return Object.assign(Object.assign({},t),{disabled:i})}))),n("ion-picker-column-internal",{class:"date-column",color:this.color,disabled:e,items:b,value:null!==a.day?`${a.year}-${a.month}-${a.day}`:`${t.year}-${t.month}-${t.day}`,onIonChange:t=>{this.destroyCalendarListener&&this.destroyCalendarListener();const{value:e}=t.detail,i=g.find((({month:t,day:a,year:i})=>e===`${i}-${t}-${a}`));this.setWorkingParts(Object.assign(Object.assign({},a),i)),this.setActiveParts(Object.assign(Object.assign({},l),i)),this.initializeCalendarListener(),t.stopPropagation()}})}renderIndividualDatePickerColumns(t){const{workingParts:e,isDateEnabled:a}=this,i="year"!==t&&"time"!==t?U(this.locale,e,this.minParts,this.maxParts,this.parsedMonthValues):[];let n="date"===t?Z(this.locale,e,this.minParts,this.maxParts,this.parsedDayValues):[];a&&(n=n.map((t=>{const{value:i}=t,n={month:e.month,day:"string"==typeof i?parseInt(i):i,year:e.year};let o;try{o=!a(G(n))}catch(t){c("Exception thrown from provided `isDateEnabled` function. Please check your function and try again.",t)}return Object.assign(Object.assign({},t),{disabled:o})})));const o="month"!==t&&"time"!==t?Q(this.locale,this.defaultParts,this.minParts,this.maxParts,this.parsedYearValues):[];let s=[];return s=tt(this.locale,{month:"numeric",day:"numeric"})?[this.renderMonthPickerColumn(i),this.renderDayPickerColumn(n),this.renderYearPickerColumn(o)]:[this.renderDayPickerColumn(n),this.renderMonthPickerColumn(i),this.renderYearPickerColumn(o)],s}renderDayPickerColumn(t){var e;if(0===t.length)return[];const{disabled:a,workingParts:i}=this,o=this.getActivePartsWithFallback();return n("ion-picker-column-internal",{class:"day-column",color:this.color,disabled:a,items:t,value:null!==(e=null!==i.day?i.day:this.defaultParts.day)&&void 0!==e?e:void 0,onIonChange:t=>{this.destroyCalendarListener&&this.destroyCalendarListener(),this.setWorkingParts(Object.assign(Object.assign({},i),{day:t.detail.value})),this.setActiveParts(Object.assign(Object.assign({},o),{day:t.detail.value})),this.initializeCalendarListener(),t.stopPropagation()}})}renderMonthPickerColumn(t){if(0===t.length)return[];const{disabled:e,workingParts:a}=this,i=this.getActivePartsWithFallback();return n("ion-picker-column-internal",{class:"month-column",color:this.color,disabled:e,items:t,value:a.month,onIonChange:t=>{this.destroyCalendarListener&&this.destroyCalendarListener(),this.setWorkingParts(Object.assign(Object.assign({},a),{month:t.detail.value})),this.setActiveParts(Object.assign(Object.assign({},i),{month:t.detail.value})),this.initializeCalendarListener(),t.stopPropagation()}})}renderYearPickerColumn(t){if(0===t.length)return[];const{disabled:e,workingParts:a}=this,i=this.getActivePartsWithFallback();return n("ion-picker-column-internal",{class:"year-column",color:this.color,disabled:e,items:t,value:a.year,onIonChange:t=>{this.destroyCalendarListener&&this.destroyCalendarListener(),this.setWorkingParts(Object.assign(Object.assign({},a),{year:t.detail.value})),this.setActiveParts(Object.assign(Object.assign({},i),{year:t.detail.value})),this.initializeCalendarListener(),t.stopPropagation()}})}renderTimePickerColumns(t){if(["date","month","month-year","year"].includes(t))return[];const e=void 0!==this.getActivePart(),{hoursData:a,minutesData:i,dayPeriodData:n}=et(this.locale,this.workingParts,this.hourCycle,e?this.minParts:void 0,e?this.maxParts:void 0,this.parsedHourValues,this.parsedMinuteValues);return[this.renderHourPickerColumn(a),this.renderMinutePickerColumn(i),this.renderDayPeriodPickerColumn(n)]}renderHourPickerColumn(t){const{disabled:e,workingParts:a}=this;if(0===t.length)return[];const i=this.getActivePartsWithFallback();return n("ion-picker-column-internal",{color:this.color,disabled:e,value:i.hour,items:t,numericInput:!0,onIonChange:t=>{this.setWorkingParts(Object.assign(Object.assign({},a),{hour:t.detail.value})),this.setActiveParts(Object.assign(Object.assign({},i),{hour:t.detail.value})),t.stopPropagation()}})}renderMinutePickerColumn(t){const{disabled:e,workingParts:a}=this;if(0===t.length)return[];const i=this.getActivePartsWithFallback();return n("ion-picker-column-internal",{color:this.color,disabled:e,value:i.minute,items:t,numericInput:!0,onIonChange:t=>{this.setWorkingParts(Object.assign(Object.assign({},a),{minute:t.detail.value})),this.setActiveParts(Object.assign(Object.assign({},i),{minute:t.detail.value})),t.stopPropagation()}})}renderDayPeriodPickerColumn(t){const{disabled:e,workingParts:a}=this;if(0===t.length)return[];const i=this.getActivePartsWithFallback(),o=at(this.locale);return n("ion-picker-column-internal",{style:o?{order:"-1"}:{},color:this.color,disabled:e,value:i.ampm,items:t,onIonChange:t=>{const e=ht(a,t.detail.value);this.setWorkingParts(Object.assign(Object.assign({},a),{ampm:t.detail.value,hour:e})),this.setActiveParts(Object.assign(Object.assign({},i),{ampm:t.detail.value,hour:e})),t.stopPropagation()}})}renderWheelView(t){const{locale:e}=this,a=tt(e)?"month-first":"year-first";return n("div",{class:{["wheel-order-"+a]:!0}},this.renderWheelPicker(t))}renderCalendarHeader(t){const{disabled:e}=this,a="ios"===t?y:b,i="ios"===t?g:f,o=e||((t,e,a)=>{const i=Object.assign(Object.assign({},j(this.workingParts)),{day:null});return Ct(i,{minParts:e,maxParts:a})})(0,this.minParts,this.maxParts),s=e||((t,e)=>{const a=Object.assign(Object.assign({},C(this.workingParts)),{day:null});return Ct(a,{maxParts:e})})(0,this.maxParts),r=this.el.getAttribute("dir")||void 0;return n("div",{class:"calendar-header"},n("div",{class:"calendar-action-buttons"},n("div",{class:"calendar-month-year"},n("ion-item",{part:"month-year-button",ref:t=>this.monthYearToggleItemRef=t,button:!0,"aria-label":"Show year picker",detail:!1,lines:"none",disabled:e,onClick:()=>{var t;this.toggleMonthAndYearView();const{monthYearToggleItemRef:e}=this;if(e){const a=null===(t=e.shadowRoot)||void 0===t?void 0:t.querySelector(".item-native");a&&a.setAttribute("aria-label",this.showMonthAndYear?"Hide year picker":"Show year picker")}}},n("ion-label",null,nt(this.locale,this.workingParts),n("ion-icon",{"aria-hidden":"true",icon:this.showMonthAndYear?a:i,lazy:!1,flipRtl:!0})))),n("div",{class:"calendar-next-prev"},n("ion-buttons",null,n("ion-button",{"aria-label":"Previous month",disabled:o,onClick:()=>this.prevMonth()},n("ion-icon",{dir:r,"aria-hidden":"true",slot:"icon-only",icon:x,lazy:!1,flipRtl:!0})),n("ion-button",{"aria-label":"Next month",disabled:s,onClick:()=>this.nextMonth()},n("ion-icon",{dir:r,"aria-hidden":"true",slot:"icon-only",icon:g,lazy:!1,flipRtl:!0}))))),n("div",{class:"calendar-days-of-week","aria-hidden":"true"},it(this.locale,t,this.firstDayOfWeek%7).map((t=>n("div",{class:"day-of-week"},t)))))}renderMonth(t,e){const{disabled:a,readonly:i}=this,o=void 0===this.parsedYearValues||this.parsedYearValues.includes(e),s=void 0===this.parsedMonthValues||this.parsedMonthValues.includes(t),r=!o||!s,d=a||i,l=a||Ct({month:t,year:e,day:null},{minParts:Object.assign(Object.assign({},this.minParts),{day:null}),maxParts:Object.assign(Object.assign({},this.maxParts),{day:null})}),h=this.workingParts.month===t&&this.workingParts.year===e,m=this.getActivePartsWithFallback();return n("div",{"aria-hidden":h?null:"true",class:{"calendar-month":!0,"calendar-month-disabled":!h&&l}},n("div",{class:"calendar-month-grid"},ot(t,e,this.firstDayOfWeek%7).map(((a,i)=>{const{day:o,dayOfWeek:s}=a,{el:l,highlightedDates:h,isDateEnabled:p,multiple:u}=this,y={month:t,day:o,year:e},b=null===o,{isActive:g,isToday:f,ariaLabel:x,ariaSelected:w,disabled:v,text:k}=jt(this.locale,y,this.activeParts,this.todayParts,this.minParts,this.maxParts,this.parsedDayValues),j=G(y);let C=r||v;if(!C&&void 0!==p)try{C=!p(j)}catch(t){c("Exception thrown from provided `isDateEnabled` function. Please check your function and try again.",l,t)}const O=C&&d,P=C||d;let D,V;return void 0===h||g||null===o||(D=((t,e,a)=>{if(Array.isArray(t)){const a=e.split("T")[0],i=t.find((t=>t.date===a));if(i)return{textColor:i.textColor,backgroundColor:i.backgroundColor}}else try{return t(e)}catch(t){c("Exception thrown from provided `highlightedDates` callback. Please check your function and try again.",a,t)}})(h,j,l)),b||(V=`calendar-day${g?" active":""}${f?" today":""}${C?" disabled":""}`),n("div",{class:"calendar-day-wrapper"},n("button",{ref:t=>{t&&(t.style.setProperty("color",""+(D?D.textColor:""),"important"),t.style.setProperty("background-color",""+(D?D.backgroundColor:""),"important"))},tabindex:"-1","data-day":o,"data-month":t,"data-year":e,"data-index":i,"data-day-of-week":s,disabled:P,class:{"calendar-day-padding":b,"calendar-day":!0,"calendar-day-active":g,"calendar-day-constrained":O,"calendar-day-today":f},part:V,"aria-hidden":b?"true":null,"aria-selected":w,"aria-label":x,onClick:()=>{b||(this.setWorkingParts(Object.assign(Object.assign({},this.workingParts),{month:t,day:o,year:e})),u?this.setActiveParts({month:t,day:o,year:e},g):this.setActiveParts(Object.assign(Object.assign({},m),{month:t,day:o,year:e})))}},k))}))))}renderCalendarBody(){return n("div",{class:"calendar-body ion-focusable",ref:t=>this.calendarBodyRef=t,tabindex:"0"},J(this.workingParts,this.forceRenderDate).map((({month:t,year:e})=>this.renderMonth(t,e))))}renderCalendar(t){return n("div",{class:"datetime-calendar",key:"datetime-calendar"},this.renderCalendarHeader(t),this.renderCalendarBody())}renderTimeLabel(){if(null!==this.el.querySelector('[slot="time-label"]')||this.showDefaultTimeLabel)return n("slot",{name:"time-label"},"Time")}renderTimeOverlay(){const{disabled:t,hourCycle:e,isTimePopoverOpen:a,locale:i,formatOptions:o}=this,s=st(i,e),r=this.getActivePartsWithFallback();return[n("div",{class:"time-header"},this.renderTimeLabel()),n("button",{class:{"time-body":!0,"time-body-active":a},part:"time-button"+(a?" active":""),"aria-expanded":"false","aria-haspopup":"true",disabled:t,onClick:async t=>{const{popoverRef:e}=this;e&&(this.isTimePopoverOpen=!0,e.present(new CustomEvent("ionShadowTarget",{detail:{ionShadowTarget:t.target}})),await e.onWillDismiss(),this.isTimePopoverOpen=!1)}},rt(i,r,s,null==o?void 0:o.time)),n("ion-popover",{alignment:"center",translucent:!0,overlayIndex:1,arrow:!1,onWillPresent:t=>{t.target.querySelectorAll("ion-picker-column-internal").forEach((t=>t.scrollActiveItemIntoView()))},style:{"--offset-y":"-10px","--min-width":"fit-content"},keyboardEvents:!0,ref:t=>this.popoverRef=t},this.renderWheelPicker("time"))]}getHeaderSelectedDateText(){var t;const{activeParts:e,formatOptions:a,multiple:i,titleSelectedDatesFormatter:n}=this;let o;if(i&&Array.isArray(e)&&1!==e.length){if(o=e.length+" days",void 0!==n)try{o=n(G(e))}catch(t){c("Exception in provided `titleSelectedDatesFormatter`: ",t)}}else o=dt(this.locale,this.getActivePartsWithFallback(),null!==(t=null==a?void 0:a.date)&&void 0!==t?t:{weekday:"short",month:"short",day:"numeric"});return o}renderHeader(t=!0){if(null!==this.el.querySelector('[slot="title"]')||this.showDefaultTitle)return n("div",{class:"datetime-header"},n("div",{class:"datetime-title"},n("slot",{name:"title"},"Select Date")),t&&n("div",{class:"datetime-selected-date"},this.getHeaderSelectedDateText()))}renderTime(){const{presentation:t}=this;return n("div",{class:"datetime-time"},"time"===t?this.renderWheelPicker():this.renderTimeOverlay())}renderCalendarViewMonthYearPicker(){return n("div",{class:"datetime-year"},this.renderWheelView("month-year"))}renderDatetime(t){const{presentation:e,preferWheel:a}=this;if(a&&("date"===e||"date-time"===e||"time-date"===e))return[this.renderHeader(!1),this.renderWheelView(),this.renderFooter()];switch(e){case"date-time":return[this.renderHeader(),this.renderCalendar(t),this.renderCalendarViewMonthYearPicker(),this.renderTime(),this.renderFooter()];case"time-date":return[this.renderHeader(),this.renderTime(),this.renderCalendar(t),this.renderCalendarViewMonthYearPicker(),this.renderFooter()];case"time":return[this.renderHeader(!1),this.renderTime(),this.renderFooter()];case"month":case"month-year":case"year":return[this.renderHeader(!1),this.renderWheelView(),this.renderFooter()];default:return[this.renderHeader(),this.renderCalendar(t),this.renderCalendarViewMonthYearPicker(),this.renderFooter()]}}render(){const{name:t,value:e,disabled:a,el:i,color:s,readonly:r,showMonthAndYear:d,preferWheel:l,presentation:c,size:m,isGridStyle:p}=this,y=w(this),b="year"===c||"month"===c||"month-year"===c,g=d||b,f=d&&!b,x=("date"===c||"date-time"===c||"time-date"===c)&&l;return h(!0,i,t,lt(e),a),n(o,{key:"8490192beb6c5c6064ed8f2a7be2d51846f84f36","aria-disabled":a?"true":null,onFocus:this.onFocus,onBlur:this.onBlur,class:Object.assign({},u(s,{[y]:!0,"datetime-readonly":r,"datetime-disabled":a,"show-month-and-year":g,"month-year-picker-open":f,["datetime-presentation-"+c]:!0,["datetime-size-"+m]:!0,"datetime-prefer-wheel":x,"datetime-grid":p}))},n("div",{key:"a2959c07ed871f9004a2f11ab1385a5a7b5737fd",class:"intersection-tracker",ref:t=>this.intersectionTrackerRef=t}),this.renderDatetime(y))}get el(){return this}static get watchers(){return{formatOptions:[{formatOptionsChanged:0}],disabled:[{disabledChanged:0}],min:[{minChanged:0}],max:[{maxChanged:0}],presentation:[{presentationChanged:0}],yearValues:[{yearValuesChanged:0}],monthValues:[{monthValuesChanged:0}],dayValues:[{dayValuesChanged:0}],hourValues:[{hourValuesChanged:0}],minuteValues:[{minuteValuesChanged:0}],value:[{valueChanged:0}]}}static get style(){return{ios:":host{display:flex;flex-flow:column;background:var(--background);overflow:hidden}ion-picker-column-internal{min-width:26px}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{order:3;text-align:end}:host .wheel-order-year-first .month-column{order:2;text-align:end}:host .wheel-order-year-first .year-column{order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:flex;flex:1 1 auto;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:flex}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{position:absolute;visibility:hidden;pointer-events:none}@supports (inset-inline-start: 0){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{inset-inline-start:-99999px}}@supports not (inset-inline-start: 0){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{left:-99999px}:host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev,:host-context([dir=rtl]).show-month-and-year .calendar-next-prev,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week,:host-context([dir=rtl]).show-month-and-year .calendar-days-of-week,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-body,:host-context([dir=rtl]).show-month-and-year .calendar-body,:host-context([dir=rtl]):host(.show-month-and-year) .datetime-time,:host-context([dir=rtl]).show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){:host(.show-month-and-year:dir(rtl)) .calendar-next-prev,:host(.show-month-and-year:dir(rtl)) .calendar-days-of-week,:host(.show-month-and-year:dir(rtl)) .calendar-body,:host(.show-month-and-year:dir(rtl)) .datetime-time{left:unset;right:unset;right:-99999px}}}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:flex;justify-content:space-between}.datetime-action-buttons .datetime-action-buttons-container{display:flex}:host .calendar-action-buttons{display:flex;justify-content:space-between}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--background:translucent}:host .calendar-action-buttons ion-item ion-label{display:flex;align-items:center;width:auto}:host .calendar-action-buttons ion-item ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:flex;flex-grow:1;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:flex;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:flex;position:relative;align-items:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:focus{background:rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .datetime-time{display:flex;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:flex;align-items:center}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;appearance:none}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons ion-item{--color:var(--ion-color-base)}:host{--background:var(--ion-color-light, #ffffff);--background-rgb:var(--ion-color-light-rgb);--title-color:var(--ion-color-step-600, #666666)}:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),:host(.datetime-presentation-date:not(.datetime-prefer-wheel)){min-height:350px}:host .datetime-header{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, #cccccc);font-size:min(0.875rem, 22.4px)}:host .datetime-header .datetime-title{color:var(--title-color)}:host .datetime-header .datetime-selected-date{margin-top:10px}:host .calendar-action-buttons ion-item{--padding-start:16px;--background-hover:transparent;--background-activated:transparent;font-size:min(1rem, 25.6px);font-weight:600}:host .calendar-action-buttons ion-item ion-icon,:host .calendar-action-buttons ion-buttons ion-button{color:var(--ion-color-base)}:host .calendar-action-buttons ion-buttons{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:0}:host .calendar-action-buttons ion-buttons ion-button{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host .calendar-days-of-week{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, #b3b3b3);font-size:min(0.75rem, 19.2px);font-weight:600;line-height:24px;text-transform:uppercase}@supports (border-radius: mod(1px, 1px)){.calendar-days-of-week .day-of-week{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}.calendar-day{border-radius:max(8px, mod(min(1rem, 24px), 24px) * 10)}}@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))){.calendar-days-of-week .day-of-week{width:auto;height:auto;overflow:initial}.calendar-day{border-radius:32px}}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;align-items:center;height:calc(100% - 16px)}:host .calendar-day-wrapper{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;height:0;min-height:1rem}:host .calendar-day{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}.calendar-day.calendar-day-active{background:rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-active{color:var(--ion-color-base);font-weight:600}:host .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:16px;font-size:min(1rem, 25.6px)}:host .datetime-time .time-header{font-weight:600}:host .datetime-buttons{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, #cccccc)}:host .datetime-buttons ::slotted(ion-buttons),:host .datetime-buttons ion-buttons{display:flex;align-items:center;justify-content:space-between}:host .datetime-action-buttons{width:100%}",md:":host{display:flex;flex-flow:column;background:var(--background);overflow:hidden}ion-picker-column-internal{min-width:26px}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{order:3;text-align:end}:host .wheel-order-year-first .month-column{order:2;text-align:end}:host .wheel-order-year-first .year-column{order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:flex;flex:1 1 auto;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:flex}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{position:absolute;visibility:hidden;pointer-events:none}@supports (inset-inline-start: 0){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{inset-inline-start:-99999px}}@supports not (inset-inline-start: 0){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{left:-99999px}:host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev,:host-context([dir=rtl]).show-month-and-year .calendar-next-prev,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week,:host-context([dir=rtl]).show-month-and-year .calendar-days-of-week,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-body,:host-context([dir=rtl]).show-month-and-year .calendar-body,:host-context([dir=rtl]):host(.show-month-and-year) .datetime-time,:host-context([dir=rtl]).show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){:host(.show-month-and-year:dir(rtl)) .calendar-next-prev,:host(.show-month-and-year:dir(rtl)) .calendar-days-of-week,:host(.show-month-and-year:dir(rtl)) .calendar-body,:host(.show-month-and-year:dir(rtl)) .datetime-time{left:unset;right:unset;right:-99999px}}}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:flex;justify-content:space-between}.datetime-action-buttons .datetime-action-buttons-container{display:flex}:host .calendar-action-buttons{display:flex;justify-content:space-between}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--background:translucent}:host .calendar-action-buttons ion-item ion-label{display:flex;align-items:center;width:auto}:host .calendar-action-buttons ion-item ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:flex;flex-grow:1;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:flex;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:flex;position:relative;align-items:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:focus{background:rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .datetime-time{display:flex;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:flex;align-items:center}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;appearance:none}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons ion-item{--color:var(--ion-color-base)}:host{--background:var(--ion-color-step-100, #ffffff);--title-color:var(--ion-color-contrast)}:host .datetime-header{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:20px;background:var(--ion-color-base);color:var(--title-color)}:host .datetime-header .datetime-title{font-size:0.75rem;text-transform:uppercase}:host .datetime-header .datetime-selected-date{margin-top:30px;font-size:2.125rem}:host .datetime-calendar .calendar-action-buttons ion-item{--padding-start:20px}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--color:var(--ion-color-step-650, #595959)}:host .calendar-days-of-week{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:0px;padding-bottom:0px;color:var(--ion-color-step-500, gray);font-size:0.875rem;line-height:36px}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:4px;padding-bottom:4px;grid-template-rows:repeat(6, 1fr)}:host .calendar-day{width:42px;min-width:42px;height:42px;font-size:0.875rem}:host .calendar-day.calendar-day-today{border:1px solid var(--ion-color-base);color:var(--ion-color-base)}:host .calendar-day.calendar-day-active{color:var(--ion-color-contrast)}.calendar-day.calendar-day-active{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:8px}:host .time-header{color:var(--ion-color-step-650, #595959)}:host(.datetime-presentation-month) .datetime-year,:host(.datetime-presentation-year) .datetime-year,:host(.datetime-presentation-month-year) .datetime-year{margin-top:20px;margin-bottom:20px}:host .datetime-buttons{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:10px;padding-bottom:10px;display:flex;align-items:center;justify-content:flex-end}"}}},[289,"ion-datetime",{color:[1],name:[1],disabled:[4],formatOptions:[16],readonly:[4],isDateEnabled:[16],min:[1025],max:[1025],presentation:[1],cancelText:[1,"cancel-text"],doneText:[1,"done-text"],clearText:[1,"clear-text"],yearValues:[8,"year-values"],monthValues:[8,"month-values"],dayValues:[8,"day-values"],hourValues:[8,"hour-values"],minuteValues:[8,"minute-values"],locale:[1],firstDayOfWeek:[2,"first-day-of-week"],titleSelectedDatesFormatter:[16],multiple:[4],highlightedDates:[16],value:[1025],showDefaultTitle:[4,"show-default-title"],showDefaultButtons:[4,"show-default-buttons"],showClearButton:[4,"show-clear-button"],showDefaultTimeLabel:[4,"show-default-time-label"],hourCycle:[1,"hour-cycle"],size:[1],preferWheel:[4,"prefer-wheel"],showMonthAndYear:[32],activeParts:[32],workingParts:[32],isTimePopoverOpen:[32],forceRenderDate:[32],confirm:[64],reset:[64],cancel:[64]},void 0,{formatOptions:[{formatOptionsChanged:0}],disabled:[{disabledChanged:0}],min:[{minChanged:0}],max:[{maxChanged:0}],presentation:[{presentationChanged:0}],yearValues:[{yearValuesChanged:0}],monthValues:[{monthValuesChanged:0}],dayValues:[{dayValuesChanged:0}],hourValues:[{hourValuesChanged:0}],minuteValues:[{minuteValuesChanged:0}],value:[{valueChanged:0}]}]);let Vt=0;const zt=Dt,Et=function(){"undefined"!=typeof customElements&&["ion-datetime","ion-backdrop","ion-button","ion-buttons","ion-icon","ion-item","ion-label","ion-note","ion-picker-column-internal","ion-picker-internal","ion-popover","ion-ripple-effect"].forEach((t=>{switch(t){case"ion-datetime":customElements.get(s(t))||customElements.define(s(t),Dt);break;case"ion-backdrop":customElements.get(s(t))||ct();break;case"ion-button":customElements.get(s(t))||mt();break;case"ion-buttons":customElements.get(s(t))||pt();break;case"ion-icon":customElements.get(s(t))||ut();break;case"ion-item":customElements.get(s(t))||yt();break;case"ion-label":customElements.get(s(t))||bt();break;case"ion-note":customElements.get(s(t))||gt();break;case"ion-picker-column-internal":customElements.get(s(t))||ft();break;case"ion-picker-internal":customElements.get(s(t))||xt();break;case"ion-popover":customElements.get(s(t))||wt();break;case"ion-ripple-effect":customElements.get(s(t))||vt()}}))};export{zt as IonDatetime,Et as defineCustomElement}
+ */
+const isYearDisabled = (refYear, minParts, maxParts) => {
+    if (minParts && minParts.year > refYear) {
+        return true;
+    }
+    if (maxParts && maxParts.year < refYear) {
+        return true;
+    }
+    return false;
+};
+/**
+ * Returns true if a given day should
+ * not be interactive according to its value,
+ * or the max/min dates.
+ */
+const isDayDisabled = (refParts, minParts, maxParts, dayValues) => {
+    /**
+     * If this is a filler date (i.e. padding)
+     * then the date is disabled.
+     */
+    if (refParts.day === null) {
+        return true;
+    }
+    /**
+     * If user passed in a list of acceptable day values
+     * check to make sure that the date we are looking
+     * at is in this array.
+     */
+    if (dayValues !== undefined && !dayValues.includes(refParts.day)) {
+        return true;
+    }
+    /**
+     * Given a min date, perform the following
+     * checks. If any of them are true, then the
+     * day should be disabled:
+     * 1. Is the current year < the min allowed year?
+     * 2. Is the current year === min allowed year,
+     * but the current month < the min allowed month?
+     * 3. Is the current year === min allowed year, the
+     * current month === min allow month, but the current
+     * day < the min allowed day?
+     */
+    if (minParts && isBefore(refParts, minParts)) {
+        return true;
+    }
+    /**
+     * Given a max date, perform the following
+     * checks. If any of them are true, then the
+     * day should be disabled:
+     * 1. Is the current year > the max allowed year?
+     * 2. Is the current year === max allowed year,
+     * but the current month > the max allowed month?
+     * 3. Is the current year === max allowed year, the
+     * current month === max allow month, but the current
+     * day > the max allowed day?
+     */
+    if (maxParts && isAfter(refParts, maxParts)) {
+        return true;
+    }
+    /**
+     * If none of these checks
+     * passed then the date should
+     * be interactive.
+     */
+    return false;
+};
+/**
+ * Given a locale, a date, the selected date(s), and today's date,
+ * generate the state for a given calendar day button.
+ */
+const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts, maxParts, dayValues) => {
+    /**
+     * activeParts signals what day(s) are currently selected in the datetime.
+     * If multiple="true", this will be an array, but the logic in this util
+     * is the same whether we have one selected day or many because we're only
+     * calculating the state for one button. So, we treat a single activeParts value
+     * the same as an array of length one.
+     */
+    const activePartsArray = Array.isArray(activeParts) ? activeParts : [activeParts];
+    /**
+     * The day button is active if it is selected, or in other words, if refParts
+     * matches at least one selected date.
+     */
+    const isActive = activePartsArray.find((parts) => isSameDay(refParts, parts)) !== undefined;
+    const isToday = isSameDay(refParts, todayParts);
+    const disabled = isDayDisabled(refParts, minParts, maxParts, dayValues);
+    /**
+     * Note that we always return one object regardless of whether activeParts
+     * was an array, since we pare down to one value for isActive.
+     */
+    return {
+        disabled,
+        isActive,
+        isToday,
+        ariaSelected: isActive ? 'true' : null,
+        ariaLabel: generateDayAriaLabel(locale, isToday, refParts),
+        text: refParts.day != null ? getDay(locale, refParts) : null,
+    };
+};
+/**
+ * Returns `true` if the month is disabled given the
+ * current date value and min/max date constraints.
+ */
+const isMonthDisabled = (refParts, { minParts, maxParts, }) => {
+    // If the year is disabled then the month is disabled.
+    if (isYearDisabled(refParts.year, minParts, maxParts)) {
+        return true;
+    }
+    // If the date value is before the min date, then the month is disabled.
+    // If the date value is after the max date, then the month is disabled.
+    if ((minParts && isBefore(refParts, minParts)) || (maxParts && isAfter(refParts, maxParts))) {
+        return true;
+    }
+    return false;
+};
+/**
+ * Given a working date, an optional minimum date range,
+ * and an optional maximum date range; determine if the
+ * previous navigation button is disabled.
+ */
+const isPrevMonthDisabled = (refParts, minParts, maxParts) => {
+    const prevMonth = Object.assign(Object.assign({}, getPreviousMonth(refParts)), { day: null });
+    return isMonthDisabled(prevMonth, {
+        minParts,
+        maxParts,
+    });
+};
+/**
+ * Given a working date and a maximum date range,
+ * determine if the next navigation button is disabled.
+ */
+const isNextMonthDisabled = (refParts, maxParts) => {
+    const nextMonth = Object.assign(Object.assign({}, getNextMonth(refParts)), { day: null });
+    return isMonthDisabled(nextMonth, {
+        maxParts,
+    });
+};
+/**
+ * Given the value of the highlightedDates property
+ * and an ISO string, return the styles to use for
+ * that date, or undefined if none are found.
+ */
+const getHighlightStyles = (highlightedDates, dateIsoString, el) => {
+    if (Array.isArray(highlightedDates)) {
+        const dateStringWithoutTime = dateIsoString.split('T')[0];
+        const matchingHighlight = highlightedDates.find((hd) => hd.date === dateStringWithoutTime);
+        if (matchingHighlight) {
+            return {
+                textColor: matchingHighlight.textColor,
+                backgroundColor: matchingHighlight.backgroundColor,
+            };
+        }
+    }
+    else {
+        /**
+         * Wrap in a try-catch to prevent exceptions in the user's function
+         * from interrupting the calendar's rendering.
+         */
+        try {
+            return highlightedDates(dateIsoString);
+        }
+        catch (e) {
+            printIonError('Exception thrown from provided `highlightedDates` callback. Please check your function and try again.', el, e);
+        }
+    }
+    return undefined;
+};
+
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * If a time zone is provided in the format options, the rendered text could
+ * differ from what was selected in the Datetime, which could cause
+ * confusion.
+ */
+const warnIfTimeZoneProvided = (el, formatOptions) => {
+    var _a, _b, _c, _d;
+    if (((_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) === null || _a === void 0 ? void 0 : _a.timeZone) ||
+        ((_b = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) === null || _b === void 0 ? void 0 : _b.timeZoneName) ||
+        ((_c = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) === null || _c === void 0 ? void 0 : _c.timeZone) ||
+        ((_d = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) === null || _d === void 0 ? void 0 : _d.timeZoneName)) {
+        printIonWarning('Datetime: "timeZone" and "timeZoneName" are not supported in "formatOptions".', el);
+    }
+};
+const checkForPresentationFormatMismatch = (el, presentation, formatOptions) => {
+    // formatOptions is not required
+    if (!formatOptions)
+        return;
+    // If formatOptions is provided, the date and/or time objects are required, depending on the presentation
+    switch (presentation) {
+        case 'date':
+        case 'month-year':
+        case 'month':
+        case 'year':
+            if (formatOptions.date === undefined) {
+                printIonWarning(`Datetime: The '${presentation}' presentation requires a date object in formatOptions.`, el);
+            }
+            break;
+        case 'time':
+            if (formatOptions.time === undefined) {
+                printIonWarning(`Datetime: The 'time' presentation requires a time object in formatOptions.`, el);
+            }
+            break;
+        case 'date-time':
+        case 'time-date':
+            if (formatOptions.date === undefined && formatOptions.time === undefined) {
+                printIonWarning(`Datetime: The '${presentation}' presentation requires either a date or time object (or both) in formatOptions.`, el);
+            }
+            break;
+    }
+};
+
+const datetimeIosCss = ":host{display:flex;flex-flow:column;background:var(--background);overflow:hidden}ion-picker-column-internal{min-width:26px}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{order:3;text-align:end}:host .wheel-order-year-first .month-column{order:2;text-align:end}:host .wheel-order-year-first .year-column{order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:flex;flex:1 1 auto;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:flex}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{position:absolute;visibility:hidden;pointer-events:none}@supports (inset-inline-start: 0){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{inset-inline-start:-99999px}}@supports not (inset-inline-start: 0){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{left:-99999px}:host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev,:host-context([dir=rtl]).show-month-and-year .calendar-next-prev,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week,:host-context([dir=rtl]).show-month-and-year .calendar-days-of-week,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-body,:host-context([dir=rtl]).show-month-and-year .calendar-body,:host-context([dir=rtl]):host(.show-month-and-year) .datetime-time,:host-context([dir=rtl]).show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){:host(.show-month-and-year:dir(rtl)) .calendar-next-prev,:host(.show-month-and-year:dir(rtl)) .calendar-days-of-week,:host(.show-month-and-year:dir(rtl)) .calendar-body,:host(.show-month-and-year:dir(rtl)) .datetime-time{left:unset;right:unset;right:-99999px}}}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:flex;justify-content:space-between}.datetime-action-buttons .datetime-action-buttons-container{display:flex}:host .calendar-action-buttons{display:flex;justify-content:space-between}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--background:translucent}:host .calendar-action-buttons ion-item ion-label{display:flex;align-items:center;width:auto}:host .calendar-action-buttons ion-item ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:flex;flex-grow:1;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:flex;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:flex;position:relative;align-items:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:focus{background:rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .datetime-time{display:flex;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:flex;align-items:center}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;appearance:none}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons ion-item{--color:var(--ion-color-base)}:host{--background:var(--ion-color-light, #ffffff);--background-rgb:var(--ion-color-light-rgb);--title-color:var(--ion-color-step-600, #666666)}:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),:host(.datetime-presentation-date:not(.datetime-prefer-wheel)){min-height:350px}:host .datetime-header{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, #cccccc);font-size:min(0.875rem, 22.4px)}:host .datetime-header .datetime-title{color:var(--title-color)}:host .datetime-header .datetime-selected-date{margin-top:10px}:host .calendar-action-buttons ion-item{--padding-start:16px;--background-hover:transparent;--background-activated:transparent;font-size:min(1rem, 25.6px);font-weight:600}:host .calendar-action-buttons ion-item ion-icon,:host .calendar-action-buttons ion-buttons ion-button{color:var(--ion-color-base)}:host .calendar-action-buttons ion-buttons{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:0}:host .calendar-action-buttons ion-buttons ion-button{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host .calendar-days-of-week{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, #b3b3b3);font-size:min(0.75rem, 19.2px);font-weight:600;line-height:24px;text-transform:uppercase}@supports (border-radius: mod(1px, 1px)){.calendar-days-of-week .day-of-week{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}.calendar-day{border-radius:max(8px, mod(min(1rem, 24px), 24px) * 10)}}@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))){.calendar-days-of-week .day-of-week{width:auto;height:auto;overflow:initial}.calendar-day{border-radius:32px}}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;align-items:center;height:calc(100% - 16px)}:host .calendar-day-wrapper{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;height:0;min-height:1rem}:host .calendar-day{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}.calendar-day.calendar-day-active{background:rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-active{color:var(--ion-color-base);font-weight:600}:host .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:16px;font-size:min(1rem, 25.6px)}:host .datetime-time .time-header{font-weight:600}:host .datetime-buttons{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, #cccccc)}:host .datetime-buttons ::slotted(ion-buttons),:host .datetime-buttons ion-buttons{display:flex;align-items:center;justify-content:space-between}:host .datetime-action-buttons{width:100%}";
+
+const datetimeMdCss = ":host{display:flex;flex-flow:column;background:var(--background);overflow:hidden}ion-picker-column-internal{min-width:26px}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{order:3;text-align:end}:host .wheel-order-year-first .month-column{order:2;text-align:end}:host .wheel-order-year-first .year-column{order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:flex;flex:1 1 auto;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:flex}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{position:absolute;visibility:hidden;pointer-events:none}@supports (inset-inline-start: 0){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{inset-inline-start:-99999px}}@supports not (inset-inline-start: 0){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{left:-99999px}:host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev,:host-context([dir=rtl]).show-month-and-year .calendar-next-prev,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week,:host-context([dir=rtl]).show-month-and-year .calendar-days-of-week,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-body,:host-context([dir=rtl]).show-month-and-year .calendar-body,:host-context([dir=rtl]):host(.show-month-and-year) .datetime-time,:host-context([dir=rtl]).show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){:host(.show-month-and-year:dir(rtl)) .calendar-next-prev,:host(.show-month-and-year:dir(rtl)) .calendar-days-of-week,:host(.show-month-and-year:dir(rtl)) .calendar-body,:host(.show-month-and-year:dir(rtl)) .datetime-time{left:unset;right:unset;right:-99999px}}}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:flex;justify-content:space-between}.datetime-action-buttons .datetime-action-buttons-container{display:flex}:host .calendar-action-buttons{display:flex;justify-content:space-between}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--background:translucent}:host .calendar-action-buttons ion-item ion-label{display:flex;align-items:center;width:auto}:host .calendar-action-buttons ion-item ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:flex;flex-grow:1;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:flex;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:flex;position:relative;align-items:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:focus{background:rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .datetime-time{display:flex;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:flex;align-items:center}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;appearance:none}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons ion-item{--color:var(--ion-color-base)}:host{--background:var(--ion-color-step-100, #ffffff);--title-color:var(--ion-color-contrast)}:host .datetime-header{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:20px;background:var(--ion-color-base);color:var(--title-color)}:host .datetime-header .datetime-title{font-size:0.75rem;text-transform:uppercase}:host .datetime-header .datetime-selected-date{margin-top:30px;font-size:2.125rem}:host .datetime-calendar .calendar-action-buttons ion-item{--padding-start:20px}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--color:var(--ion-color-step-650, #595959)}:host .calendar-days-of-week{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:0px;padding-bottom:0px;color:var(--ion-color-step-500, gray);font-size:0.875rem;line-height:36px}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:4px;padding-bottom:4px;grid-template-rows:repeat(6, 1fr)}:host .calendar-day{width:42px;min-width:42px;height:42px;font-size:0.875rem}:host .calendar-day.calendar-day-today{border:1px solid var(--ion-color-base);color:var(--ion-color-base)}:host .calendar-day.calendar-day-active{color:var(--ion-color-contrast)}.calendar-day.calendar-day-active{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:8px}:host .time-header{color:var(--ion-color-step-650, #595959)}:host(.datetime-presentation-month) .datetime-year,:host(.datetime-presentation-year) .datetime-year,:host(.datetime-presentation-month-year) .datetime-year{margin-top:20px;margin-bottom:20px}:host .datetime-buttons{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:10px;padding-bottom:10px;display:flex;align-items:center;justify-content:flex-end}";
+
+const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ionCancel = createEvent(this, "ionCancel", 7);
+    this.ionChange = createEvent(this, "ionChange", 7);
+    this.ionValueChange = createEvent(this, "ionValueChange", 7);
+    this.ionFocus = createEvent(this, "ionFocus", 7);
+    this.ionBlur = createEvent(this, "ionBlur", 7);
+    this.ionStyle = createEvent(this, "ionStyle", 7);
+    this.ionRender = createEvent(this, "ionRender", 7);
+    this.inputId = `ion-dt-${datetimeIds++}`;
+    this.prevPresentation = null;
+    this.warnIfIncorrectValueUsage = () => {
+      const { multiple, value } = this;
+      if (!multiple && Array.isArray(value)) {
+        /**
+         * We do some processing on the `value` array so
+         * that it looks more like an array when logged to
+         * the console.
+         * Example given ['a', 'b']
+         * Default toString() behavior: a,b
+         * Custom behavior: ['a', 'b']
+         */
+        printIonWarning(`ion-datetime was passed an array of values, but multiple="false". This is incorrect usage and may result in unexpected behaviors. To dismiss this warning, pass a string to the "value" property when multiple="false".
+
+  Value Passed: [${value.map((v) => `'${v}'`).join(', ')}]
+`, this.el);
+      }
+    };
+    this.setValue = (value) => {
+      this.value = value;
+      this.ionChange.emit({ value });
+    };
+    /**
+     * Returns the DatetimePart interface
+     * to use when rendering an initial set of
+     * data. This should be used when rendering an
+     * interface in an environment where the `value`
+     * may not be set. This function works
+     * by returning the first selected date and then
+     * falling back to defaultParts if no active date
+     * is selected.
+     */
+    this.getActivePartsWithFallback = () => {
+      var _a;
+      const { defaultParts } = this;
+      return (_a = this.getActivePart()) !== null && _a !== void 0 ? _a : defaultParts;
+    };
+    this.getActivePart = () => {
+      const { activeParts } = this;
+      return Array.isArray(activeParts) ? activeParts[0] : activeParts;
+    };
+    this.closeParentOverlay = () => {
+      const popoverOrModal = this.el.closest('ion-modal, ion-popover');
+      if (popoverOrModal) {
+        popoverOrModal.dismiss();
+      }
+    };
+    this.setWorkingParts = (parts) => {
+      this.workingParts = Object.assign({}, parts);
+    };
+    this.setActiveParts = (parts, removeDate = false) => {
+      /** if the datetime component is in readonly mode,
+       * allow browsing of the calendar without changing
+       * the set value
+       */
+      if (this.readonly) {
+        return;
+      }
+      const { multiple, minParts, maxParts, activeParts } = this;
+      /**
+       * When setting the active parts, it is possible
+       * to set invalid data. For example,
+       * when updating January 31 to February,
+       * February 31 does not exist. As a result
+       * we need to validate the active parts and
+       * ensure that we are only setting valid dates.
+       * Additionally, we need to update the working parts
+       * too in the event that the validated parts are different.
+       */
+      const validatedParts = validateParts(parts, minParts, maxParts);
+      this.setWorkingParts(validatedParts);
+      if (multiple) {
+        const activePartsArray = Array.isArray(activeParts) ? activeParts : [activeParts];
+        if (removeDate) {
+          this.activeParts = activePartsArray.filter((p) => !isSameDay(p, validatedParts));
+        }
+        else {
+          this.activeParts = [...activePartsArray, validatedParts];
+        }
+      }
+      else {
+        this.activeParts = Object.assign({}, validatedParts);
+      }
+      const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
+      if (hasSlottedButtons || this.showDefaultButtons) {
+        return;
+      }
+      this.confirm();
+    };
+    this.initializeKeyboardListeners = () => {
+      const calendarBodyRef = this.calendarBodyRef;
+      if (!calendarBodyRef) {
+        return;
+      }
+      const root = this.el.shadowRoot;
+      /**
+       * Get a reference to the month
+       * element we are currently viewing.
+       */
+      const currentMonth = calendarBodyRef.querySelector('.calendar-month:nth-of-type(2)');
+      /**
+       * When focusing the calendar body, we want to pass focus
+       * to the working day, but other days should
+       * only be accessible using the arrow keys. Pressing
+       * Tab should jump between bodies of selectable content.
+       */
+      const checkCalendarBodyFocus = (ev) => {
+        var _a;
+        const record = ev[0];
+        /**
+         * If calendar body was already focused
+         * when this fired or if the calendar body
+         * if not currently focused, we should not re-focus
+         * the inner day.
+         */
+        if (((_a = record.oldValue) === null || _a === void 0 ? void 0 : _a.includes('ion-focused')) || !calendarBodyRef.classList.contains('ion-focused')) {
+          return;
+        }
+        this.focusWorkingDay(currentMonth);
+      };
+      const mo = new MutationObserver(checkCalendarBodyFocus);
+      mo.observe(calendarBodyRef, { attributeFilter: ['class'], attributeOldValue: true });
+      this.destroyKeyboardMO = () => {
+        mo === null || mo === void 0 ? void 0 : mo.disconnect();
+      };
+      /**
+       * We must use keydown not keyup as we want
+       * to prevent scrolling when using the arrow keys.
+       */
+      calendarBodyRef.addEventListener('keydown', (ev) => {
+        const activeElement = root.activeElement;
+        if (!activeElement || !activeElement.classList.contains('calendar-day')) {
+          return;
+        }
+        const parts = getPartsFromCalendarDay(activeElement);
+        let partsToFocus;
+        switch (ev.key) {
+          case 'ArrowDown':
+            ev.preventDefault();
+            partsToFocus = getNextWeek(parts);
+            break;
+          case 'ArrowUp':
+            ev.preventDefault();
+            partsToFocus = getPreviousWeek(parts);
+            break;
+          case 'ArrowRight':
+            ev.preventDefault();
+            partsToFocus = getNextDay(parts);
+            break;
+          case 'ArrowLeft':
+            ev.preventDefault();
+            partsToFocus = getPreviousDay(parts);
+            break;
+          case 'Home':
+            ev.preventDefault();
+            partsToFocus = getStartOfWeek(parts);
+            break;
+          case 'End':
+            ev.preventDefault();
+            partsToFocus = getEndOfWeek(parts);
+            break;
+          case 'PageUp':
+            ev.preventDefault();
+            partsToFocus = ev.shiftKey ? getPreviousYear(parts) : getPreviousMonth(parts);
+            break;
+          case 'PageDown':
+            ev.preventDefault();
+            partsToFocus = ev.shiftKey ? getNextYear(parts) : getNextMonth(parts);
+            break;
+          /**
+           * Do not preventDefault here
+           * as we do not want to override other
+           * browser defaults such as pressing Enter/Space
+           * to select a day.
+           */
+          default:
+            return;
+        }
+        /**
+         * If the day we want to move focus to is
+         * disabled, do not do anything.
+         */
+        if (isDayDisabled(partsToFocus, this.minParts, this.maxParts)) {
+          return;
+        }
+        this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), partsToFocus));
+        /**
+         * Give view a chance to re-render
+         * then move focus to the new working day
+         */
+        requestAnimationFrame(() => this.focusWorkingDay(currentMonth));
+      });
+    };
+    this.focusWorkingDay = (currentMonth) => {
+      /**
+       * Get the number of padding days so
+       * we know how much to offset our next selector by
+       * to grab the correct calendar-day element.
+       */
+      const padding = currentMonth.querySelectorAll('.calendar-day-padding');
+      const { day } = this.workingParts;
+      if (day === null) {
+        return;
+      }
+      /**
+       * Get the calendar day element
+       * and focus it.
+       */
+      const dayEl = currentMonth.querySelector(`.calendar-day-wrapper:nth-of-type(${padding.length + day}) .calendar-day`);
+      if (dayEl) {
+        dayEl.focus();
+      }
+    };
+    this.processMinParts = () => {
+      const { min, defaultParts } = this;
+      if (min === undefined) {
+        this.minParts = undefined;
+        return;
+      }
+      this.minParts = parseMinParts(min, defaultParts);
+    };
+    this.processMaxParts = () => {
+      const { max, defaultParts } = this;
+      if (max === undefined) {
+        this.maxParts = undefined;
+        return;
+      }
+      this.maxParts = parseMaxParts(max, defaultParts);
+    };
+    this.initializeCalendarListener = () => {
+      const calendarBodyRef = this.calendarBodyRef;
+      if (!calendarBodyRef) {
+        return;
+      }
+      /**
+       * For performance reasons, we only render 3
+       * months at a time: The current month, the previous
+       * month, and the next month. We have a scroll listener
+       * on the calendar body to append/prepend new months.
+       *
+       * We can do this because Stencil is smart enough to not
+       * re-create the .calendar-month containers, but rather
+       * update the content within those containers.
+       *
+       * As an added bonus, WebKit has some troubles with
+       * scroll-snap-stop: always, so not rendering all of
+       * the months in a row allows us to mostly sidestep
+       * that issue.
+       */
+      const months = calendarBodyRef.querySelectorAll('.calendar-month');
+      const startMonth = months[0];
+      const workingMonth = months[1];
+      const endMonth = months[2];
+      const mode = getIonMode(this);
+      const needsiOSRubberBandFix = mode === 'ios' && typeof navigator !== 'undefined' && navigator.maxTouchPoints > 1;
+      /**
+       * Before setting up the scroll listener,
+       * scroll the middle month into view.
+       * scrollIntoView() will scroll entire page
+       * if element is not in viewport. Use scrollLeft instead.
+       */
+      writeTask(() => {
+        calendarBodyRef.scrollLeft = startMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
+        const getChangedMonth = (parts) => {
+          const box = calendarBodyRef.getBoundingClientRect();
+          /**
+           * If the current scroll position is all the way to the left
+           * then we have scrolled to the previous month.
+           * Otherwise, assume that we have scrolled to the next
+           * month. We have a tolerance of 2px to account for
+           * sub pixel rendering.
+           *
+           * Check below the next line ensures that we did not
+           * swipe and abort (i.e. we swiped but we are still on the current month).
+           */
+          const month = calendarBodyRef.scrollLeft <= 2 ? startMonth : endMonth;
+          /**
+           * The edge of the month must be lined up with
+           * the edge of the calendar body in order for
+           * the component to update. Otherwise, it
+           * may be the case that the user has paused their
+           * swipe or the browser has not finished snapping yet.
+           * Rather than check if the x values are equal,
+           * we give it a tolerance of 2px to account for
+           * sub pixel rendering.
+           */
+          const monthBox = month.getBoundingClientRect();
+          if (Math.abs(monthBox.x - box.x) > 2)
+            return;
+          /**
+           * If we're force-rendering a month, assume we've
+           * scrolled to that and return it.
+           *
+           * If forceRenderDate is ever used in a context where the
+           * forced month is not immediately auto-scrolled to, this
+           * should be updated to also check whether `month` has the
+           * same month and year as the forced date.
+           */
+          const { forceRenderDate } = this;
+          if (forceRenderDate !== undefined) {
+            return { month: forceRenderDate.month, year: forceRenderDate.year, day: forceRenderDate.day };
+          }
+          /**
+           * From here, we can determine if the start
+           * month or the end month was scrolled into view.
+           * If no month was changed, then we can return from
+           * the scroll callback early.
+           */
+          if (month === startMonth) {
+            return getPreviousMonth(parts);
+          }
+          else if (month === endMonth) {
+            return getNextMonth(parts);
+          }
+          else {
+            return;
+          }
+        };
+        const updateActiveMonth = () => {
+          if (needsiOSRubberBandFix) {
+            calendarBodyRef.style.removeProperty('pointer-events');
+            appliediOSRubberBandFix = false;
+          }
+          /**
+           * If the month did not change
+           * then we can return early.
+           */
+          const newDate = getChangedMonth(this.workingParts);
+          if (!newDate)
+            return;
+          const { month, day, year } = newDate;
+          if (isMonthDisabled({ month, year, day: null }, {
+            minParts: Object.assign(Object.assign({}, this.minParts), { day: null }),
+            maxParts: Object.assign(Object.assign({}, this.maxParts), { day: null }),
+          })) {
+            return;
+          }
+          /**
+           * Prevent scrolling for other browsers
+           * to give the DOM time to update and the container
+           * time to properly snap.
+           */
+          calendarBodyRef.style.setProperty('overflow', 'hidden');
+          /**
+           * Use a writeTask here to ensure
+           * that the state is updated and the
+           * correct month is scrolled into view
+           * in the same frame. This is not
+           * typically a problem on newer devices
+           * but older/slower device may have a flicker
+           * if we did not do this.
+           */
+          writeTask(() => {
+            this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), { month, day: day, year }));
+            calendarBodyRef.scrollLeft = workingMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
+            calendarBodyRef.style.removeProperty('overflow');
+            if (this.resolveForceDateScrolling) {
+              this.resolveForceDateScrolling();
+            }
+          });
+        };
+        /**
+         * When the container finishes scrolling we
+         * need to update the DOM with the selected month.
+         */
+        let scrollTimeout;
+        /**
+         * We do not want to attempt to set pointer-events
+         * multiple times within a single swipe gesture as
+         * that adds unnecessary work to the main thread.
+         */
+        let appliediOSRubberBandFix = false;
+        const scrollCallback = () => {
+          if (scrollTimeout) {
+            clearTimeout(scrollTimeout);
+          }
+          /**
+           * On iOS it is possible to quickly rubber band
+           * the scroll area before the scroll timeout has fired.
+           * This results in users reaching the end of the scrollable
+           * container before the DOM has updated.
+           * By setting `pointer-events: none` we can ensure that
+           * subsequent swipes do not happen while the container
+           * is snapping.
+           */
+          if (!appliediOSRubberBandFix && needsiOSRubberBandFix) {
+            calendarBodyRef.style.setProperty('pointer-events', 'none');
+            appliediOSRubberBandFix = true;
+          }
+          // Wait ~3 frames
+          scrollTimeout = setTimeout(updateActiveMonth, 50);
+        };
+        calendarBodyRef.addEventListener('scroll', scrollCallback);
+        this.destroyCalendarListener = () => {
+          calendarBodyRef.removeEventListener('scroll', scrollCallback);
+        };
+      });
+    };
+    /**
+     * Clean up all listeners except for the overlay
+     * listener. This is so that we can re-create the listeners
+     * if the datetime has been hidden/presented by a modal or popover.
+     */
+    this.destroyInteractionListeners = () => {
+      const { destroyCalendarListener, destroyKeyboardMO } = this;
+      if (destroyCalendarListener !== undefined) {
+        destroyCalendarListener();
+      }
+      if (destroyKeyboardMO !== undefined) {
+        destroyKeyboardMO();
+      }
+    };
+    this.processValue = (value) => {
+      const hasValue = value !== null && value !== undefined && (!Array.isArray(value) || value.length > 0);
+      const valueToProcess = hasValue ? parseDate(value) : this.defaultParts;
+      const { minParts, maxParts, workingParts, el } = this;
+      this.warnIfIncorrectValueUsage();
+      /**
+       * Return early if the value wasn't parsed correctly, such as
+       * if an improperly formatted date string was provided.
+       */
+      if (!valueToProcess) {
+        return;
+      }
+      /**
+       * Datetime should only warn of out of bounds values
+       * if set by the user. If the `value` is undefined,
+       * we will default to today's date which may be out
+       * of bounds. In this case, the warning makes it look
+       * like the developer did something wrong which is
+       * not true.
+       */
+      if (hasValue) {
+        warnIfValueOutOfBounds(valueToProcess, minParts, maxParts);
+      }
+      /**
+       * If there are multiple values, pick an arbitrary one to clamp to. This way,
+       * if the values are across months, we always show at least one of them. Note
+       * that the values don't necessarily have to be in order.
+       */
+      const singleValue = Array.isArray(valueToProcess) ? valueToProcess[0] : valueToProcess;
+      const targetValue = clampDate(singleValue, minParts, maxParts);
+      const { month, day, year, hour, minute } = targetValue;
+      const ampm = parseAmPm(hour);
+      /**
+       * Since `activeParts` indicates a value that
+       * been explicitly selected either by the
+       * user or the app, only update `activeParts`
+       * if the `value` property is set.
+       */
+      if (hasValue) {
+        if (Array.isArray(valueToProcess)) {
+          this.activeParts = [...valueToProcess];
+        }
+        else {
+          this.activeParts = {
+            month,
+            day,
+            year,
+            hour,
+            minute,
+            ampm,
+          };
+        }
+      }
+      else {
+        /**
+         * Reset the active parts if the value is not set.
+         * This will clear the selected calendar day when
+         * performing a clear action or using the reset() method.
+         */
+        this.activeParts = [];
+      }
+      /**
+       * Only animate if:
+       * 1. We're using grid style (wheel style pickers should just jump to new value)
+       * 2. The month and/or year actually changed, and both are defined (otherwise there's nothing to animate to)
+       * 3. The calendar body is visible (prevents animation when in collapsed datetime-button, for example)
+       * 4. The month/year picker is not open (since you wouldn't see the animation anyway)
+       */
+      const didChangeMonth = (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
+      const bodyIsVisible = el.classList.contains('datetime-ready');
+      const { isGridStyle, showMonthAndYear } = this;
+      let areAllSelectedDatesInSameMonth = true;
+      if (Array.isArray(valueToProcess)) {
+        const firstMonth = valueToProcess[0].month;
+        for (const date of valueToProcess) {
+          if (date.month !== firstMonth) {
+            areAllSelectedDatesInSameMonth = false;
+            break;
+          }
+        }
+      }
+      /**
+       * If there is more than one date selected
+       * and the dates aren't all in the same month,
+       * then we should neither animate to the date
+       * nor update the working parts because we do
+       * not know which date the user wants to view.
+       */
+      if (areAllSelectedDatesInSameMonth) {
+        if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
+          this.animateToDate(targetValue);
+        }
+        else {
+          /**
+           * We only need to do this if we didn't just animate to a new month,
+           * since that calls prevMonth/nextMonth which calls setWorkingParts for us.
+           */
+          this.setWorkingParts({
+            month,
+            day,
+            year,
+            hour,
+            minute,
+            ampm,
+          });
+        }
+      }
+    };
+    this.animateToDate = async (targetValue) => {
+      const { workingParts } = this;
+      /**
+       * Tell other render functions that we need to force the
+       * target month to appear in place of the actual next/prev month.
+       * Because this is a State variable, a rerender will be triggered
+       * automatically, updating the rendered months.
+       */
+      this.forceRenderDate = targetValue;
+      /**
+       * Flag that we've started scrolling to the forced date.
+       * The resolve function will be called by the datetime's
+       * scroll listener when it's done updating everything.
+       * This is a replacement for making prev/nextMonth async,
+       * since the logic we're waiting on is in a listener.
+       */
+      const forceDateScrollingPromise = new Promise((resolve) => {
+        this.resolveForceDateScrolling = resolve;
+      });
+      /**
+       * Animate smoothly to the forced month. This will also update
+       * workingParts and correct the surrounding months for us.
+       */
+      const targetMonthIsBefore = isBefore(targetValue, workingParts);
+      targetMonthIsBefore ? this.prevMonth() : this.nextMonth();
+      await forceDateScrollingPromise;
+      this.resolveForceDateScrolling = undefined;
+      this.forceRenderDate = undefined;
+    };
+    this.onFocus = () => {
+      this.ionFocus.emit();
+    };
+    this.onBlur = () => {
+      this.ionBlur.emit();
+    };
+    this.hasValue = () => {
+      return this.value != null;
+    };
+    this.nextMonth = () => {
+      const calendarBodyRef = this.calendarBodyRef;
+      if (!calendarBodyRef) {
+        return;
+      }
+      const nextMonth = calendarBodyRef.querySelector('.calendar-month:last-of-type');
+      if (!nextMonth) {
+        return;
+      }
+      const left = nextMonth.offsetWidth * 2;
+      calendarBodyRef.scrollTo({
+        top: 0,
+        left: left * (isRTL(this.el) ? -1 : 1),
+        behavior: 'smooth',
+      });
+    };
+    this.prevMonth = () => {
+      const calendarBodyRef = this.calendarBodyRef;
+      if (!calendarBodyRef) {
+        return;
+      }
+      const prevMonth = calendarBodyRef.querySelector('.calendar-month:first-of-type');
+      if (!prevMonth) {
+        return;
+      }
+      calendarBodyRef.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: 'smooth',
+      });
+    };
+    this.toggleMonthAndYearView = () => {
+      this.showMonthAndYear = !this.showMonthAndYear;
+    };
+    this.showMonthAndYear = false;
+    this.activeParts = [];
+    this.workingParts = {
+      month: 5,
+      day: 28,
+      year: 2021,
+      hour: 13,
+      minute: 52,
+      ampm: 'pm',
+    };
+    this.isTimePopoverOpen = false;
+    this.forceRenderDate = undefined;
+    this.color = 'primary';
+    this.name = this.inputId;
+    this.disabled = false;
+    this.formatOptions = undefined;
+    this.readonly = false;
+    this.isDateEnabled = undefined;
+    this.min = undefined;
+    this.max = undefined;
+    this.presentation = 'date-time';
+    this.cancelText = 'Cancel';
+    this.doneText = 'Done';
+    this.clearText = 'Clear';
+    this.yearValues = undefined;
+    this.monthValues = undefined;
+    this.dayValues = undefined;
+    this.hourValues = undefined;
+    this.minuteValues = undefined;
+    this.locale = 'default';
+    this.firstDayOfWeek = 0;
+    this.titleSelectedDatesFormatter = undefined;
+    this.multiple = false;
+    this.highlightedDates = undefined;
+    this.value = undefined;
+    this.showDefaultTitle = false;
+    this.showDefaultButtons = false;
+    this.showClearButton = false;
+    this.showDefaultTimeLabel = true;
+    this.hourCycle = undefined;
+    this.size = 'fixed';
+    this.preferWheel = false;
+  }
+  formatOptionsChanged() {
+    const { el, formatOptions, presentation } = this;
+    checkForPresentationFormatMismatch(el, presentation, formatOptions);
+    warnIfTimeZoneProvided(el, formatOptions);
+  }
+  disabledChanged() {
+    this.emitStyle();
+  }
+  minChanged() {
+    this.processMinParts();
+  }
+  maxChanged() {
+    this.processMaxParts();
+  }
+  presentationChanged() {
+    const { el, formatOptions, presentation } = this;
+    checkForPresentationFormatMismatch(el, presentation, formatOptions);
+  }
+  get isGridStyle() {
+    const { presentation, preferWheel } = this;
+    const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
+    return hasDatePresentation && !preferWheel;
+  }
+  yearValuesChanged() {
+    this.parsedYearValues = convertToArrayOfNumbers(this.yearValues);
+  }
+  monthValuesChanged() {
+    this.parsedMonthValues = convertToArrayOfNumbers(this.monthValues);
+  }
+  dayValuesChanged() {
+    this.parsedDayValues = convertToArrayOfNumbers(this.dayValues);
+  }
+  hourValuesChanged() {
+    this.parsedHourValues = convertToArrayOfNumbers(this.hourValues);
+  }
+  minuteValuesChanged() {
+    this.parsedMinuteValues = convertToArrayOfNumbers(this.minuteValues);
+  }
+  /**
+   * Update the datetime value when the value changes
+   */
+  async valueChanged() {
+    const { value } = this;
+    if (this.hasValue()) {
+      this.processValue(value);
+    }
+    this.emitStyle();
+    this.ionValueChange.emit({ value });
+  }
+  /**
+   * Confirms the selected datetime value, updates the
+   * `value` property, and optionally closes the popover
+   * or modal that the datetime was presented in.
+   */
+  async confirm(closeOverlay = false) {
+    const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
+    /**
+     * We only update the value if the presentation is not a calendar picker.
+     */
+    if (activeParts !== undefined || !isCalendarPicker) {
+      const activePartsIsArray = Array.isArray(activeParts);
+      if (activePartsIsArray && activeParts.length === 0) {
+        if (preferWheel) {
+          /**
+           * If the datetime is using a wheel picker, but the
+           * active parts are empty, then the user has confirmed the
+           * initial value (working parts) presented to them.
+           */
+          this.setValue(convertDataToISO(workingParts));
+        }
+        else {
+          this.setValue(undefined);
+        }
+      }
+      else {
+        this.setValue(convertDataToISO(activeParts));
+      }
+    }
+    if (closeOverlay) {
+      this.closeParentOverlay();
+    }
+  }
+  /**
+   * Resets the internal state of the datetime but does not update the value.
+   * Passing a valid ISO-8601 string will reset the state of the component to the provided date.
+   * If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
+   */
+  async reset(startDate) {
+    this.processValue(startDate);
+  }
+  /**
+   * Emits the ionCancel event and
+   * optionally closes the popover
+   * or modal that the datetime was
+   * presented in.
+   */
+  async cancel(closeOverlay = false) {
+    this.ionCancel.emit();
+    if (closeOverlay) {
+      this.closeParentOverlay();
+    }
+  }
+  get isCalendarPicker() {
+    const { presentation } = this;
+    return presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
+  }
+  connectedCallback() {
+    this.clearFocusVisible = startFocusVisible(this.el).destroy;
+  }
+  disconnectedCallback() {
+    if (this.clearFocusVisible) {
+      this.clearFocusVisible();
+      this.clearFocusVisible = undefined;
+    }
+  }
+  initializeListeners() {
+    this.initializeCalendarListener();
+    this.initializeKeyboardListeners();
+  }
+  componentDidLoad() {
+    const { el, intersectionTrackerRef } = this;
+    /**
+     * If a scrollable element is hidden using `display: none`,
+     * it will not have a scroll height meaning we cannot scroll elements
+     * into view. As a result, we will need to wait for the datetime to become
+     * visible if used inside of a modal or a popover otherwise the scrollable
+     * areas will not have the correct values snapped into place.
+     */
+    const visibleCallback = (entries) => {
+      const ev = entries[0];
+      if (!ev.isIntersecting) {
+        return;
+      }
+      this.initializeListeners();
+      /**
+       * TODO FW-2793: Datetime needs a frame to ensure that it
+       * can properly scroll contents into view. As a result
+       * we hide the scrollable content until after that frame
+       * so users do not see the content quickly shifting. The downside
+       * is that the content will pop into view a frame after. Maybe there
+       * is a better way to handle this?
+       */
+      writeTask(() => {
+        this.el.classList.add('datetime-ready');
+      });
+    };
+    const visibleIO = new IntersectionObserver(visibleCallback, { threshold: 0.01, root: el });
+    /**
+     * Use raf to avoid a race condition between the component loading and
+     * its display animation starting (such as when shown in a modal). This
+     * could cause the datetime to start at a visibility of 0, erroneously
+     * triggering the `hiddenIO` observer below.
+     */
+    raf(() => visibleIO === null || visibleIO === void 0 ? void 0 : visibleIO.observe(intersectionTrackerRef));
+    /**
+     * We need to clean up listeners when the datetime is hidden
+     * in a popover/modal so that we can properly scroll containers
+     * back into view if they are re-presented. When the datetime is hidden
+     * the scroll areas have scroll widths/heights of 0px, so any snapping
+     * we did originally has been lost.
+     */
+    const hiddenCallback = (entries) => {
+      const ev = entries[0];
+      if (ev.isIntersecting) {
+        return;
+      }
+      this.destroyInteractionListeners();
+      /**
+       * When datetime is hidden, we need to make sure that
+       * the month/year picker is closed. Otherwise,
+       * it will be open when the datetime re-appears
+       * and the scroll area of the calendar grid will be 0.
+       * As a result, the wrong month will be shown.
+       */
+      this.showMonthAndYear = false;
+      writeTask(() => {
+        this.el.classList.remove('datetime-ready');
+      });
+    };
+    const hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0, root: el });
+    raf(() => hiddenIO === null || hiddenIO === void 0 ? void 0 : hiddenIO.observe(intersectionTrackerRef));
+    /**
+     * Datetime uses Ionic components that emit
+     * ionFocus and ionBlur. These events are
+     * composed meaning they will cross
+     * the shadow dom boundary. We need to
+     * stop propagation on these events otherwise
+     * developers will see 2 ionFocus or 2 ionBlur
+     * events at a time.
+     */
+    const root = getElementRoot(this.el);
+    root.addEventListener('ionFocus', (ev) => ev.stopPropagation());
+    root.addEventListener('ionBlur', (ev) => ev.stopPropagation());
+  }
+  /**
+   * When the presentation is changed, all calendar content is recreated,
+   * so we need to re-init behavior with the new elements.
+   */
+  componentDidRender() {
+    const { presentation, prevPresentation, calendarBodyRef, minParts, preferWheel, forceRenderDate } = this;
+    /**
+     * TODO(FW-2165)
+     * Remove this when https://bugs.webkit.org/show_bug.cgi?id=235960 is fixed.
+     * When using `min`, we add `scroll-snap-align: none`
+     * to the disabled month so that users cannot scroll to it.
+     * This triggers a bug in WebKit where the scroll position is reset.
+     * Since the month change logic is handled by a scroll listener,
+     * this causes the month to change leading to `scroll-snap-align`
+     * changing again, thus changing the scroll position again and causing
+     * an infinite loop.
+     * This issue only applies to the calendar grid, so we can disable
+     * it if the calendar grid is not being used.
+     */
+    const hasCalendarGrid = !preferWheel && ['date-time', 'time-date', 'date'].includes(presentation);
+    if (minParts !== undefined && hasCalendarGrid && calendarBodyRef) {
+      const workingMonth = calendarBodyRef.querySelector('.calendar-month:nth-of-type(1)');
+      /**
+       * We need to make sure the datetime is not in the process
+       * of scrolling to a new datetime value if the value
+       * is updated programmatically.
+       * Otherwise, the datetime will appear to not scroll at all because
+       * we are resetting the scroll position to the center of the view.
+       * Prior to the datetime's value being updated programmatically,
+       * the calendarBodyRef is scrolled such that the middle month is centered
+       * in the view. The below code updates the scroll position so the middle
+       * month is also centered in the view. Since the scroll position did not change,
+       * the scroll callback in this file does not fire,
+       * and the resolveForceDateScrolling promise never resolves.
+       */
+      if (workingMonth && forceRenderDate === undefined) {
+        calendarBodyRef.scrollLeft = workingMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
+      }
+    }
+    if (prevPresentation === null) {
+      this.prevPresentation = presentation;
+      return;
+    }
+    if (presentation === prevPresentation) {
+      return;
+    }
+    this.prevPresentation = presentation;
+    this.destroyInteractionListeners();
+    this.initializeListeners();
+    /**
+     * The month/year picker from the date interface
+     * should be closed as it is not available in non-date
+     * interfaces.
+     */
+    this.showMonthAndYear = false;
+    raf(() => {
+      this.ionRender.emit();
+    });
+  }
+  componentWillLoad() {
+    const { el, formatOptions, highlightedDates, multiple, presentation, preferWheel } = this;
+    if (multiple) {
+      if (presentation !== 'date') {
+        printIonWarning('Multiple date selection is only supported for presentation="date".', el);
+      }
+      if (preferWheel) {
+        printIonWarning('Multiple date selection is not supported with preferWheel="true".', el);
+      }
+    }
+    if (highlightedDates !== undefined) {
+      if (presentation !== 'date' && presentation !== 'date-time' && presentation !== 'time-date') {
+        printIonWarning('The highlightedDates property is only supported with the date, date-time, and time-date presentations.', el);
+      }
+      if (preferWheel) {
+        printIonWarning('The highlightedDates property is not supported with preferWheel="true".', el);
+      }
+    }
+    if (formatOptions) {
+      checkForPresentationFormatMismatch(el, presentation, formatOptions);
+      warnIfTimeZoneProvided(el, formatOptions);
+    }
+    const hourValues = (this.parsedHourValues = convertToArrayOfNumbers(this.hourValues));
+    const minuteValues = (this.parsedMinuteValues = convertToArrayOfNumbers(this.minuteValues));
+    const monthValues = (this.parsedMonthValues = convertToArrayOfNumbers(this.monthValues));
+    const yearValues = (this.parsedYearValues = convertToArrayOfNumbers(this.yearValues));
+    const dayValues = (this.parsedDayValues = convertToArrayOfNumbers(this.dayValues));
+    const todayParts = (this.todayParts = parseDate(getToday()));
+    this.processMinParts();
+    this.processMaxParts();
+    this.defaultParts = getClosestValidDate({
+      refParts: todayParts,
+      monthValues,
+      dayValues,
+      yearValues,
+      hourValues,
+      minuteValues,
+      minParts: this.minParts,
+      maxParts: this.maxParts,
+    });
+    this.processValue(this.value);
+    this.emitStyle();
+  }
+  emitStyle() {
+    this.ionStyle.emit({
+      interactive: true,
+      datetime: true,
+      'interactive-disabled': this.disabled,
+    });
+  }
+  /**
+   * Universal render methods
+   * These are pieces of datetime that
+   * are rendered independently of presentation.
+   */
+  renderFooter() {
+    const { disabled, readonly, showDefaultButtons, showClearButton } = this;
+    /**
+     * The cancel, clear, and confirm buttons
+     * should not be interactive if the datetime
+     * is disabled or readonly.
+     */
+    const isButtonDisabled = disabled || readonly;
+    const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
+    if (!hasSlottedButtons && !showDefaultButtons && !showClearButton) {
+      return;
+    }
+    const clearButtonClick = () => {
+      this.reset();
+      this.setValue(undefined);
+    };
+    /**
+     * By default we render two buttons:
+     * Cancel - Dismisses the datetime and
+     * does not update the `value` prop.
+     * OK - Dismisses the datetime and
+     * updates the `value` prop.
+     */
+    return (h("div", { class: "datetime-footer" }, h("div", { class: "datetime-buttons" }, h("div", { class: {
+        ['datetime-action-buttons']: true,
+        ['has-clear-button']: this.showClearButton,
+      } }, h("slot", { name: "buttons" }, h("ion-buttons", null, showDefaultButtons && (h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true), disabled: isButtonDisabled }, this.cancelText)), h("div", { class: "datetime-action-buttons-container" }, showClearButton && (h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick(), disabled: isButtonDisabled }, this.clearText)), showDefaultButtons && (h("ion-button", { id: "confirm-button", color: this.color, onClick: () => this.confirm(true), disabled: isButtonDisabled }, this.doneText)))))))));
+  }
+  /**
+   * Wheel picker render methods
+   */
+  renderWheelPicker(forcePresentation = this.presentation) {
+    /**
+     * If presentation="time-date" we switch the
+     * order of the render array here instead of
+     * manually reordering each date/time picker
+     * column with CSS. This allows for additional
+     * flexibility if we need to render subsets
+     * of the date/time data or do additional ordering
+     * within the child render functions.
+     */
+    const renderArray = forcePresentation === 'time-date'
+      ? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
+      : [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
+    return h("ion-picker-internal", null, renderArray);
+  }
+  renderDatePickerColumns(forcePresentation) {
+    return forcePresentation === 'date-time' || forcePresentation === 'time-date'
+      ? this.renderCombinedDatePickerColumn()
+      : this.renderIndividualDatePickerColumns(forcePresentation);
+  }
+  renderCombinedDatePickerColumn() {
+    const { defaultParts, disabled, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
+    const activePart = this.getActivePartsWithFallback();
+    /**
+     * By default, generate a range of 3 months:
+     * Previous month, current month, and next month
+     */
+    const monthsToRender = generateMonths(workingParts);
+    const lastMonth = monthsToRender[monthsToRender.length - 1];
+    /**
+     * Ensure that users can select the entire window of dates.
+     */
+    monthsToRender[0].day = 1;
+    lastMonth.day = getNumDaysInMonth(lastMonth.month, lastMonth.year);
+    /**
+     * Narrow the dates rendered based on min/max dates (if any).
+     * The `min` date is used if the min is after the generated min month.
+     * The `max` date is used if the max is before the generated max month.
+     * This ensures that the sliding window always stays at 3 months
+     * but still allows future dates to be lazily rendered based on any min/max
+     * constraints.
+     */
+    const min = minParts !== undefined && isAfter(minParts, monthsToRender[0]) ? minParts : monthsToRender[0];
+    const max = maxParts !== undefined && isBefore(maxParts, lastMonth) ? maxParts : lastMonth;
+    const result = getCombinedDateColumnData(locale, todayParts, min, max, this.parsedDayValues, this.parsedMonthValues);
+    let items = result.items;
+    const parts = result.parts;
+    if (isDateEnabled) {
+      items = items.map((itemObject, index) => {
+        const referenceParts = parts[index];
+        let disabled;
+        try {
+          /**
+           * The `isDateEnabled` implementation is try-catch wrapped
+           * to prevent exceptions in the user's function from
+           * interrupting the calendar rendering.
+           */
+          disabled = !isDateEnabled(convertDataToISO(referenceParts));
+        }
+        catch (e) {
+          printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
+        }
+        return Object.assign(Object.assign({}, itemObject), { disabled });
+      });
+    }
+    /**
+     * If we have selected a day already, then default the column
+     * to that value. Otherwise, set it to the default date.
+     */
+    const todayString = workingParts.day !== null
+      ? `${workingParts.year}-${workingParts.month}-${workingParts.day}`
+      : `${defaultParts.year}-${defaultParts.month}-${defaultParts.day}`;
+    return (h("ion-picker-column-internal", { class: "date-column", color: this.color, disabled: disabled, items: items, value: todayString, onIonChange: (ev) => {
+        // TODO(FW-1823) Remove this when iOS 14 support is dropped.
+        // Due to a Safari 14 issue we need to destroy
+        // the scroll listener before we update state
+        // and trigger a re-render.
+        if (this.destroyCalendarListener) {
+          this.destroyCalendarListener();
+        }
+        const { value } = ev.detail;
+        const findPart = parts.find(({ month, day, year }) => value === `${year}-${month}-${day}`);
+        this.setWorkingParts(Object.assign(Object.assign({}, workingParts), findPart));
+        this.setActiveParts(Object.assign(Object.assign({}, activePart), findPart));
+        // We can re-attach the scroll listener after
+        // the working parts have been updated.
+        this.initializeCalendarListener();
+        ev.stopPropagation();
+      } }));
+  }
+  renderIndividualDatePickerColumns(forcePresentation) {
+    const { workingParts, isDateEnabled } = this;
+    const shouldRenderMonths = forcePresentation !== 'year' && forcePresentation !== 'time';
+    const months = shouldRenderMonths
+      ? getMonthColumnData(this.locale, workingParts, this.minParts, this.maxParts, this.parsedMonthValues)
+      : [];
+    const shouldRenderDays = forcePresentation === 'date';
+    let days = shouldRenderDays
+      ? getDayColumnData(this.locale, workingParts, this.minParts, this.maxParts, this.parsedDayValues)
+      : [];
+    if (isDateEnabled) {
+      days = days.map((dayObject) => {
+        const { value } = dayObject;
+        const valueNum = typeof value === 'string' ? parseInt(value) : value;
+        const referenceParts = {
+          month: workingParts.month,
+          day: valueNum,
+          year: workingParts.year,
+        };
+        let disabled;
+        try {
+          /**
+           * The `isDateEnabled` implementation is try-catch wrapped
+           * to prevent exceptions in the user's function from
+           * interrupting the calendar rendering.
+           */
+          disabled = !isDateEnabled(convertDataToISO(referenceParts));
+        }
+        catch (e) {
+          printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
+        }
+        return Object.assign(Object.assign({}, dayObject), { disabled });
+      });
+    }
+    const shouldRenderYears = forcePresentation !== 'month' && forcePresentation !== 'time';
+    const years = shouldRenderYears
+      ? getYearColumnData(this.locale, this.defaultParts, this.minParts, this.maxParts, this.parsedYearValues)
+      : [];
+    /**
+     * Certain locales show the day before the month.
+     */
+    const showMonthFirst = isMonthFirstLocale(this.locale, { month: 'numeric', day: 'numeric' });
+    let renderArray = [];
+    if (showMonthFirst) {
+      renderArray = [
+        this.renderMonthPickerColumn(months),
+        this.renderDayPickerColumn(days),
+        this.renderYearPickerColumn(years),
+      ];
+    }
+    else {
+      renderArray = [
+        this.renderDayPickerColumn(days),
+        this.renderMonthPickerColumn(months),
+        this.renderYearPickerColumn(years),
+      ];
+    }
+    return renderArray;
+  }
+  renderDayPickerColumn(days) {
+    var _a;
+    if (days.length === 0) {
+      return [];
+    }
+    const { disabled, workingParts } = this;
+    const activePart = this.getActivePartsWithFallback();
+    return (h("ion-picker-column-internal", { class: "day-column", color: this.color, disabled: disabled, items: days, value: (_a = (workingParts.day !== null ? workingParts.day : this.defaultParts.day)) !== null && _a !== void 0 ? _a : undefined, onIonChange: (ev) => {
+        // TODO(FW-1823) Remove this when iOS 14 support is dropped.
+        // Due to a Safari 14 issue we need to destroy
+        // the scroll listener before we update state
+        // and trigger a re-render.
+        if (this.destroyCalendarListener) {
+          this.destroyCalendarListener();
+        }
+        this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { day: ev.detail.value }));
+        this.setActiveParts(Object.assign(Object.assign({}, activePart), { day: ev.detail.value }));
+        // We can re-attach the scroll listener after
+        // the working parts have been updated.
+        this.initializeCalendarListener();
+        ev.stopPropagation();
+      } }));
+  }
+  renderMonthPickerColumn(months) {
+    if (months.length === 0) {
+      return [];
+    }
+    const { disabled, workingParts } = this;
+    const activePart = this.getActivePartsWithFallback();
+    return (h("ion-picker-column-internal", { class: "month-column", color: this.color, disabled: disabled, items: months, value: workingParts.month, onIonChange: (ev) => {
+        // TODO(FW-1823) Remove this when iOS 14 support is dropped.
+        // Due to a Safari 14 issue we need to destroy
+        // the scroll listener before we update state
+        // and trigger a re-render.
+        if (this.destroyCalendarListener) {
+          this.destroyCalendarListener();
+        }
+        this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { month: ev.detail.value }));
+        this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value }));
+        // We can re-attach the scroll listener after
+        // the working parts have been updated.
+        this.initializeCalendarListener();
+        ev.stopPropagation();
+      } }));
+  }
+  renderYearPickerColumn(years) {
+    if (years.length === 0) {
+      return [];
+    }
+    const { disabled, workingParts } = this;
+    const activePart = this.getActivePartsWithFallback();
+    return (h("ion-picker-column-internal", { class: "year-column", color: this.color, disabled: disabled, items: years, value: workingParts.year, onIonChange: (ev) => {
+        // TODO(FW-1823) Remove this when iOS 14 support is dropped.
+        // Due to a Safari 14 issue we need to destroy
+        // the scroll listener before we update state
+        // and trigger a re-render.
+        if (this.destroyCalendarListener) {
+          this.destroyCalendarListener();
+        }
+        this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { year: ev.detail.value }));
+        this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value }));
+        // We can re-attach the scroll listener after
+        // the working parts have been updated.
+        this.initializeCalendarListener();
+        ev.stopPropagation();
+      } }));
+  }
+  renderTimePickerColumns(forcePresentation) {
+    if (['date', 'month', 'month-year', 'year'].includes(forcePresentation)) {
+      return [];
+    }
+    /**
+     * If a user has not selected a date,
+     * then we should show all times. If the
+     * user has selected a date (even if it has
+     * not been confirmed yet), we should apply
+     * the max and min restrictions so that the
+     * time picker shows values that are
+     * appropriate for the selected date.
+     */
+    const activePart = this.getActivePart();
+    const userHasSelectedDate = activePart !== undefined;
+    const { hoursData, minutesData, dayPeriodData } = getTimeColumnsData(this.locale, this.workingParts, this.hourCycle, userHasSelectedDate ? this.minParts : undefined, userHasSelectedDate ? this.maxParts : undefined, this.parsedHourValues, this.parsedMinuteValues);
+    return [
+      this.renderHourPickerColumn(hoursData),
+      this.renderMinutePickerColumn(minutesData),
+      this.renderDayPeriodPickerColumn(dayPeriodData),
+    ];
+  }
+  renderHourPickerColumn(hoursData) {
+    const { disabled, workingParts } = this;
+    if (hoursData.length === 0)
+      return [];
+    const activePart = this.getActivePartsWithFallback();
+    return (h("ion-picker-column-internal", { color: this.color, disabled: disabled, value: activePart.hour, items: hoursData, numericInput: true, onIonChange: (ev) => {
+        this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
+        this.setActiveParts(Object.assign(Object.assign({}, activePart), { hour: ev.detail.value }));
+        ev.stopPropagation();
+      } }));
+  }
+  renderMinutePickerColumn(minutesData) {
+    const { disabled, workingParts } = this;
+    if (minutesData.length === 0)
+      return [];
+    const activePart = this.getActivePartsWithFallback();
+    return (h("ion-picker-column-internal", { color: this.color, disabled: disabled, value: activePart.minute, items: minutesData, numericInput: true, onIonChange: (ev) => {
+        this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
+        this.setActiveParts(Object.assign(Object.assign({}, activePart), { minute: ev.detail.value }));
+        ev.stopPropagation();
+      } }));
+  }
+  renderDayPeriodPickerColumn(dayPeriodData) {
+    const { disabled, workingParts } = this;
+    if (dayPeriodData.length === 0) {
+      return [];
+    }
+    const activePart = this.getActivePartsWithFallback();
+    const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);
+    return (h("ion-picker-column-internal", { style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, items: dayPeriodData, onIonChange: (ev) => {
+        const hour = calculateHourFromAMPM(workingParts, ev.detail.value);
+        this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
+        this.setActiveParts(Object.assign(Object.assign({}, activePart), { ampm: ev.detail.value, hour }));
+        ev.stopPropagation();
+      } }));
+  }
+  renderWheelView(forcePresentation) {
+    const { locale } = this;
+    const showMonthFirst = isMonthFirstLocale(locale);
+    const columnOrder = showMonthFirst ? 'month-first' : 'year-first';
+    return (h("div", { class: {
+        [`wheel-order-${columnOrder}`]: true,
+      } }, this.renderWheelPicker(forcePresentation)));
+  }
+  /**
+   * Grid Render Methods
+   */
+  renderCalendarHeader(mode) {
+    const { disabled } = this;
+    const expandedIcon = mode === 'ios' ? chevronDown : caretUpSharp;
+    const collapsedIcon = mode === 'ios' ? chevronForward : caretDownSharp;
+    const prevMonthDisabled = disabled || isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
+    const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
+    // don't use the inheritAttributes util because it removes dir from the host, and we still need that
+    const hostDir = this.el.getAttribute('dir') || undefined;
+    return (h("div", { class: "calendar-header" }, h("div", { class: "calendar-action-buttons" }, h("div", { class: "calendar-month-year" }, h("ion-item", { part: "month-year-button", ref: (el) => (this.monthYearToggleItemRef = el), button: true, "aria-label": "Show year picker", detail: false, lines: "none", disabled: disabled, onClick: () => {
+        var _a;
+        this.toggleMonthAndYearView();
+        /**
+         * TODO: FW-3547
+         *
+         * Currently there is not a way to set the aria-label on the inner button
+         * on the `ion-item` and have it be reactive to changes. This is a workaround
+         * until we either refactor `ion-item` to a button or Stencil adds a way to
+         * have reactive props for built-in properties, such as `aria-label`.
+         */
+        const { monthYearToggleItemRef } = this;
+        if (monthYearToggleItemRef) {
+          const btn = (_a = monthYearToggleItemRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-native');
+          if (btn) {
+            const monthYearAriaLabel = this.showMonthAndYear ? 'Hide year picker' : 'Show year picker';
+            btn.setAttribute('aria-label', monthYearAriaLabel);
+          }
+        }
+      } }, h("ion-label", null, getMonthAndYear(this.locale, this.workingParts), h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })))), h("div", { class: "calendar-next-prev" }, h("ion-buttons", null, h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), h("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
+      return h("div", { class: "day-of-week" }, d);
+    }))));
+  }
+  renderMonth(month, year) {
+    const { disabled, readonly } = this;
+    const yearAllowed = this.parsedYearValues === undefined || this.parsedYearValues.includes(year);
+    const monthAllowed = this.parsedMonthValues === undefined || this.parsedMonthValues.includes(month);
+    const isCalMonthDisabled = !yearAllowed || !monthAllowed;
+    const isDatetimeDisabled = disabled || readonly;
+    const swipeDisabled = disabled ||
+      isMonthDisabled({
+        month,
+        year,
+        day: null,
+      }, {
+        // The day is not used when checking if a month is disabled.
+        // Users should be able to access the min or max month, even if the
+        // min/max date is out of bounds (e.g. min is set to Feb 15, Feb should not be disabled).
+        minParts: Object.assign(Object.assign({}, this.minParts), { day: null }),
+        maxParts: Object.assign(Object.assign({}, this.maxParts), { day: null }),
+      });
+    // The working month should never have swipe disabled.
+    // Otherwise the CSS scroll snap will not work and the user
+    // can free-scroll the calendar.
+    const isWorkingMonth = this.workingParts.month === month && this.workingParts.year === year;
+    const activePart = this.getActivePartsWithFallback();
+    return (h("div", { "aria-hidden": !isWorkingMonth ? 'true' : null, class: {
+        'calendar-month': true,
+        // Prevents scroll snap swipe gestures for months outside of the min/max bounds
+        'calendar-month-disabled': !isWorkingMonth && swipeDisabled,
+      } }, h("div", { class: "calendar-month-grid" }, getDaysOfMonth(month, year, this.firstDayOfWeek % 7).map((dateObject, index) => {
+      const { day, dayOfWeek } = dateObject;
+      const { el, highlightedDates, isDateEnabled, multiple } = this;
+      const referenceParts = { month, day, year };
+      const isCalendarPadding = day === null;
+      const { isActive, isToday, ariaLabel, ariaSelected, disabled: isDayDisabled, text, } = getCalendarDayState(this.locale, referenceParts, this.activeParts, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues);
+      const dateIsoString = convertDataToISO(referenceParts);
+      let isCalDayDisabled = isCalMonthDisabled || isDayDisabled;
+      if (!isCalDayDisabled && isDateEnabled !== undefined) {
+        try {
+          /**
+           * The `isDateEnabled` implementation is try-catch wrapped
+           * to prevent exceptions in the user's function from
+           * interrupting the calendar rendering.
+           */
+          isCalDayDisabled = !isDateEnabled(dateIsoString);
+        }
+        catch (e) {
+          printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', el, e);
+        }
+      }
+      /**
+       * Some days are constrained through max & min or allowed dates
+       * and also disabled because the component is readonly or disabled.
+       * These need to be displayed differently.
+       */
+      const isCalDayConstrained = isCalDayDisabled && isDatetimeDisabled;
+      const isButtonDisabled = isCalDayDisabled || isDatetimeDisabled;
+      let dateStyle = undefined;
+      /**
+       * Custom highlight styles should not override the style for selected dates,
+       * nor apply to "filler days" at the start of the grid.
+       */
+      if (highlightedDates !== undefined && !isActive && day !== null) {
+        dateStyle = getHighlightStyles(highlightedDates, dateIsoString, el);
+      }
+      let dateParts = undefined;
+      // "Filler days" at the beginning of the grid should not get the calendar day
+      // CSS parts added to them
+      if (!isCalendarPadding) {
+        dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}${isCalDayDisabled ? ' disabled' : ''}`;
+      }
+      return (h("div", { class: "calendar-day-wrapper" }, h("button", {
+        // We need to use !important for the inline styles here because
+        // otherwise the CSS shadow parts will override these styles.
+        // See https://github.com/WICG/webcomponents/issues/847
+        // Both the CSS shadow parts and highlightedDates styles are
+        // provided by the developer, but highlightedDates styles should
+        // always take priority.
+        ref: (el) => {
+          if (el) {
+            el.style.setProperty('color', `${dateStyle ? dateStyle.textColor : ''}`, 'important');
+            el.style.setProperty('background-color', `${dateStyle ? dateStyle.backgroundColor : ''}`, 'important');
+          }
+        }, tabindex: "-1", "data-day": day, "data-month": month, "data-year": year, "data-index": index, "data-day-of-week": dayOfWeek, disabled: isButtonDisabled, class: {
+          'calendar-day-padding': isCalendarPadding,
+          'calendar-day': true,
+          'calendar-day-active': isActive,
+          'calendar-day-constrained': isCalDayConstrained,
+          'calendar-day-today': isToday,
+        }, part: dateParts, "aria-hidden": isCalendarPadding ? 'true' : null, "aria-selected": ariaSelected, "aria-label": ariaLabel, onClick: () => {
+          if (isCalendarPadding) {
+            return;
+          }
+          this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), { month,
+            day,
+            year }));
+          // multiple only needs date info, so we can wipe out other fields like time
+          if (multiple) {
+            this.setActiveParts({
+              month,
+              day,
+              year,
+            }, isActive);
+          }
+          else {
+            this.setActiveParts(Object.assign(Object.assign({}, activePart), { month,
+              day,
+              year }));
+          }
+        }
+      }, text)));
+    }))));
+  }
+  renderCalendarBody() {
+    return (h("div", { class: "calendar-body ion-focusable", ref: (el) => (this.calendarBodyRef = el), tabindex: "0" }, generateMonths(this.workingParts, this.forceRenderDate).map(({ month, year }) => {
+      return this.renderMonth(month, year);
+    })));
+  }
+  renderCalendar(mode) {
+    return (h("div", { class: "datetime-calendar", key: "datetime-calendar" }, this.renderCalendarHeader(mode), this.renderCalendarBody()));
+  }
+  renderTimeLabel() {
+    const hasSlottedTimeLabel = this.el.querySelector('[slot="time-label"]') !== null;
+    if (!hasSlottedTimeLabel && !this.showDefaultTimeLabel) {
+      return;
+    }
+    return h("slot", { name: "time-label" }, "Time");
+  }
+  renderTimeOverlay() {
+    const { disabled, hourCycle, isTimePopoverOpen, locale, formatOptions } = this;
+    const computedHourCycle = getHourCycle(locale, hourCycle);
+    const activePart = this.getActivePartsWithFallback();
+    return [
+      h("div", { class: "time-header" }, this.renderTimeLabel()),
+      h("button", { class: {
+          'time-body': true,
+          'time-body-active': isTimePopoverOpen,
+        }, part: `time-button${isTimePopoverOpen ? ' active' : ''}`, "aria-expanded": "false", "aria-haspopup": "true", disabled: disabled, onClick: async (ev) => {
+          const { popoverRef } = this;
+          if (popoverRef) {
+            this.isTimePopoverOpen = true;
+            popoverRef.present(new CustomEvent('ionShadowTarget', {
+              detail: {
+                ionShadowTarget: ev.target,
+              },
+            }));
+            await popoverRef.onWillDismiss();
+            this.isTimePopoverOpen = false;
+          }
+        } }, getLocalizedTime(locale, activePart, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time)),
+      h("ion-popover", { alignment: "center", translucent: true, overlayIndex: 1, arrow: false, onWillPresent: (ev) => {
+          /**
+           * Intersection Observers do not consistently fire between Blink and Webkit
+           * when toggling the visibility of the popover and trying to scroll the picker
+           * column to the correct time value.
+           *
+           * This will correctly scroll the element position to the correct time value,
+           * before the popover is fully presented.
+           */
+          const cols = ev.target.querySelectorAll('ion-picker-column-internal');
+          // TODO (FW-615): Potentially remove this when intersection observers are fixed in picker column
+          cols.forEach((col) => col.scrollActiveItemIntoView());
+        }, style: {
+          '--offset-y': '-10px',
+          '--min-width': 'fit-content',
+        },
+        // Allow native browser keyboard events to support up/down/home/end key
+        // navigation within the time picker.
+        keyboardEvents: true, ref: (el) => (this.popoverRef = el) }, this.renderWheelPicker('time')),
+    ];
+  }
+  getHeaderSelectedDateText() {
+    var _a;
+    const { activeParts, formatOptions, multiple, titleSelectedDatesFormatter } = this;
+    const isArray = Array.isArray(activeParts);
+    let headerText;
+    if (multiple && isArray && activeParts.length !== 1) {
+      headerText = `${activeParts.length} days`; // default/fallback for multiple selection
+      if (titleSelectedDatesFormatter !== undefined) {
+        try {
+          headerText = titleSelectedDatesFormatter(convertDataToISO(activeParts));
+        }
+        catch (e) {
+          printIonError('Exception in provided `titleSelectedDatesFormatter`: ', e);
+        }
+      }
+    }
+    else {
+      // for exactly 1 day selected (multiple set or not), show a formatted version of that
+      headerText = getLocalizedDateTime(this.locale, this.getActivePartsWithFallback(), (_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _a !== void 0 ? _a : { weekday: 'short', month: 'short', day: 'numeric' });
+    }
+    return headerText;
+  }
+  renderHeader(showExpandedHeader = true) {
+    const hasSlottedTitle = this.el.querySelector('[slot="title"]') !== null;
+    if (!hasSlottedTitle && !this.showDefaultTitle) {
+      return;
+    }
+    return (h("div", { class: "datetime-header" }, h("div", { class: "datetime-title" }, h("slot", { name: "title" }, "Select Date")), showExpandedHeader && h("div", { class: "datetime-selected-date" }, this.getHeaderSelectedDateText())));
+  }
+  /**
+   * Render time picker inside of datetime.
+   * Do not pass color prop to segment on
+   * iOS mode. MD segment has been customized and
+   * should take on the color prop, but iOS
+   * should just be the default segment.
+   */
+  renderTime() {
+    const { presentation } = this;
+    const timeOnlyPresentation = presentation === 'time';
+    return (h("div", { class: "datetime-time" }, timeOnlyPresentation ? this.renderWheelPicker() : this.renderTimeOverlay()));
+  }
+  /**
+   * Renders the month/year picker that is
+   * displayed on the calendar grid.
+   * The .datetime-year class has additional
+   * styles that let us show/hide the
+   * picker when the user clicks on the
+   * toggle in the calendar header.
+   */
+  renderCalendarViewMonthYearPicker() {
+    return h("div", { class: "datetime-year" }, this.renderWheelView('month-year'));
+  }
+  /**
+   * Render entry point
+   * All presentation types are rendered from here.
+   */
+  renderDatetime(mode) {
+    const { presentation, preferWheel } = this;
+    /**
+     * Certain presentation types have separate grid and wheel displays.
+     * If preferWheel is true then we should show a wheel picker instead.
+     */
+    const hasWheelVariant = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
+    if (preferWheel && hasWheelVariant) {
+      return [this.renderHeader(false), this.renderWheelView(), this.renderFooter()];
+    }
+    switch (presentation) {
+      case 'date-time':
+        return [
+          this.renderHeader(),
+          this.renderCalendar(mode),
+          this.renderCalendarViewMonthYearPicker(),
+          this.renderTime(),
+          this.renderFooter(),
+        ];
+      case 'time-date':
+        return [
+          this.renderHeader(),
+          this.renderTime(),
+          this.renderCalendar(mode),
+          this.renderCalendarViewMonthYearPicker(),
+          this.renderFooter(),
+        ];
+      case 'time':
+        return [this.renderHeader(false), this.renderTime(), this.renderFooter()];
+      case 'month':
+      case 'month-year':
+      case 'year':
+        return [this.renderHeader(false), this.renderWheelView(), this.renderFooter()];
+      default:
+        return [
+          this.renderHeader(),
+          this.renderCalendar(mode),
+          this.renderCalendarViewMonthYearPicker(),
+          this.renderFooter(),
+        ];
+    }
+  }
+  render() {
+    const { name, value, disabled, el, color, readonly, showMonthAndYear, preferWheel, presentation, size, isGridStyle, } = this;
+    const mode = getIonMode(this);
+    const isMonthAndYearPresentation = presentation === 'year' || presentation === 'month' || presentation === 'month-year';
+    const shouldShowMonthAndYear = showMonthAndYear || isMonthAndYearPresentation;
+    const monthYearPickerOpen = showMonthAndYear && !isMonthAndYearPresentation;
+    const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
+    const hasWheelVariant = hasDatePresentation && preferWheel;
+    renderHiddenInput(true, el, name, formatValue(value), disabled);
+    return (h(Host, { key: '8490192beb6c5c6064ed8f2a7be2d51846f84f36', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        [mode]: true,
+        ['datetime-readonly']: readonly,
+        ['datetime-disabled']: disabled,
+        'show-month-and-year': shouldShowMonthAndYear,
+        'month-year-picker-open': monthYearPickerOpen,
+        [`datetime-presentation-${presentation}`]: true,
+        [`datetime-size-${size}`]: true,
+        [`datetime-prefer-wheel`]: hasWheelVariant,
+        [`datetime-grid`]: isGridStyle,
+      })) }, h("div", { key: 'a2959c07ed871f9004a2f11ab1385a5a7b5737fd', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "formatOptions": ["formatOptionsChanged"],
+    "disabled": ["disabledChanged"],
+    "min": ["minChanged"],
+    "max": ["maxChanged"],
+    "presentation": ["presentationChanged"],
+    "yearValues": ["yearValuesChanged"],
+    "monthValues": ["monthValuesChanged"],
+    "dayValues": ["dayValuesChanged"],
+    "hourValues": ["hourValuesChanged"],
+    "minuteValues": ["minuteValuesChanged"],
+    "value": ["valueChanged"]
+  }; }
+  static get style() { return {
+    ios: datetimeIosCss,
+    md: datetimeMdCss
+  }; }
+}, [33, "ion-datetime", {
+    "color": [1],
+    "name": [1],
+    "disabled": [4],
+    "formatOptions": [16],
+    "readonly": [4],
+    "isDateEnabled": [16],
+    "min": [1025],
+    "max": [1025],
+    "presentation": [1],
+    "cancelText": [1, "cancel-text"],
+    "doneText": [1, "done-text"],
+    "clearText": [1, "clear-text"],
+    "yearValues": [8, "year-values"],
+    "monthValues": [8, "month-values"],
+    "dayValues": [8, "day-values"],
+    "hourValues": [8, "hour-values"],
+    "minuteValues": [8, "minute-values"],
+    "locale": [1],
+    "firstDayOfWeek": [2, "first-day-of-week"],
+    "titleSelectedDatesFormatter": [16],
+    "multiple": [4],
+    "highlightedDates": [16],
+    "value": [1025],
+    "showDefaultTitle": [4, "show-default-title"],
+    "showDefaultButtons": [4, "show-default-buttons"],
+    "showClearButton": [4, "show-clear-button"],
+    "showDefaultTimeLabel": [4, "show-default-time-label"],
+    "hourCycle": [1, "hour-cycle"],
+    "size": [1],
+    "preferWheel": [4, "prefer-wheel"],
+    "showMonthAndYear": [32],
+    "activeParts": [32],
+    "workingParts": [32],
+    "isTimePopoverOpen": [32],
+    "forceRenderDate": [32],
+    "confirm": [64],
+    "reset": [64],
+    "cancel": [64]
+  }]);
+let datetimeIds = 0;
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-datetime", "ion-backdrop", "ion-button", "ion-buttons", "ion-icon", "ion-item", "ion-label", "ion-note", "ion-picker-column-internal", "ion-picker-internal", "ion-popover", "ion-ripple-effect"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-datetime":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Datetime);
+      }
+      break;
+    case "ion-backdrop":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "ion-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "ion-buttons":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "ion-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "ion-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "ion-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "ion-note":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "ion-picker-column-internal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ion-picker-internal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ion-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ion-ripple-effect":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IonDatetime = Datetime;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonDatetime, defineCustomElement };