@sparkle-learning/core 0.0.55 → 0.0.57

package/dist/cjs/ion-datetime.cjs.entry.js

@@ -1,1623 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-51e8292e.js');
-const index$2 = require('./index-975586fd.js');
-const ionicGlobal = require('./ionic-global-2cde9d3a.js');
-const focusVisible = require('./focus-visible-b0b07ba6.js');
-const helpers = require('./helpers-c2496722.js');
-const index$1 = require('./index-e56e09b8.js');
-const dir = require('./dir-5af5259a.js');
-const theme = require('./theme-b0b295c1.js');
-const parse = require('./parse-d0071120.js');
-
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-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 && parse.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 && parse.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) => parse.isSameDay(refParts, parts)) !== undefined;
-  const isToday = parse.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: parse.generateDayAriaLabel(locale, isToday, refParts),
-  };
-};
-/**
- * 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 && parse.isBefore(refParts, minParts)) || (maxParts && parse.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({}, parse.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({}, parse.getNextMonth(refParts)), { day: null });
-  return isMonthDisabled(nextMonth, {
-    maxParts,
-  });
-};
-
-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{left:-99999px;position:absolute;visibility:hidden;pointer-events:none}: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 (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-readonly),:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled){opacity:0.4}: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}: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}:host .calendar-action-buttons ion-item ion-icon{padding-left:4px;padding-right:0;padding-top:0;padding-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-action-buttons ion-item ion-icon{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0}}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}: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{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);height:100%}:host .calendar-day{padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;margin-left:0px;margin-right: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;cursor:pointer;appearance:none;z-index:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-day{padding-left:unset;padding-right:unset;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-day{margin-left:unset;margin-right:unset;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px}}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}:host .calendar-day:after{border-radius:32px;padding-left:4px;padding-right:4px;padding-top:4px;padding-bottom:4px;position:absolute;top:50%;left:50%;width:32px;height:32px;transform:translate(-50%, -50%);content:\" \";z-index:-1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-day:after{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px}}: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;padding-left:12px;padding-right: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}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .time-body{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}: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{padding-left:16px;padding-right:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, #cccccc)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .datetime-header{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}:host .datetime-header .datetime-title{color:var(--title-color);font-size:14px}:host .calendar-action-buttons ion-item{--padding-start:16px;--background-hover:transparent;--background-activated:transparent;font-size:16px;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{padding-left:8px;padding-right:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, #b3b3b3);font-size:12px;font-weight:600;line-height:24px;text-transform:uppercase}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-days-of-week{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}:host .calendar-body .calendar-month .calendar-month-grid{padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;height:calc(100% - 16px)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-body .calendar-month .calendar-month-grid{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}:host .calendar-day{font-size:20px}:host .calendar-day:after{opacity:0.2}:host .calendar-day:focus:after{background:var(--ion-color-base)}: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-active:after{background:var(--ion-color-base)}:host .calendar-day.calendar-day-today.calendar-day-active{color:var(--ion-color-contrast)}:host .calendar-day.calendar-day-today.calendar-day-active:after{background:var(--ion-color-base);opacity:1}:host .datetime-time{padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:16px;font-size:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .datetime-time{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}:host .datetime-time .time-header{font-weight:600}:host .datetime-buttons{padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, #cccccc)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .datetime-buttons{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}: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{left:-99999px;position:absolute;visibility:hidden;pointer-events:none}: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 (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-readonly),:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled){opacity:0.4}: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}: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}:host .calendar-action-buttons ion-item ion-icon{padding-left:4px;padding-right:0;padding-top:0;padding-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-action-buttons ion-item ion-icon{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0}}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}: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{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);height:100%}:host .calendar-day{padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;margin-left:0px;margin-right: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;cursor:pointer;appearance:none;z-index:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-day{padding-left:unset;padding-right:unset;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-day{margin-left:unset;margin-right:unset;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px}}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}:host .calendar-day:after{border-radius:32px;padding-left:4px;padding-right:4px;padding-top:4px;padding-bottom:4px;position:absolute;top:50%;left:50%;width:32px;height:32px;transform:translate(-50%, -50%);content:\" \";z-index:-1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-day:after{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px}}: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;padding-left:12px;padding-right: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}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .time-body{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}: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{padding-left:20px;padding-right:20px;padding-top:20px;padding-bottom:20px;background:var(--ion-color-base);color:var(--title-color)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .datetime-header{padding-left:unset;padding-right:unset;-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px}}:host .datetime-header .datetime-title{font-size:12px;text-transform:uppercase}:host .datetime-header .datetime-selected-date{margin-top:30px;font-size:34px}: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{padding-left:10px;padding-right:10px;padding-top:0px;padding-bottom:0px;color:var(--ion-color-step-500, gray);font-size:14px;line-height:36px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-days-of-week{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px}}:host .calendar-body .calendar-month .calendar-month-grid{padding-left:10px;padding-right:10px;padding-top:3px;padding-bottom:0px;grid-template-rows:repeat(6, 1fr)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-body .calendar-month .calendar-month-grid{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px}}:host .calendar-day{padding-left:0px;padding-right:0;padding-top:13px;padding-bottom:13px;font-size:14px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-day{padding-left:unset;padding-right:unset;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0;padding-inline-end:0}}:host .calendar-day:focus:after{background:rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-today:after{border:1px solid var(--ion-color-base)}:host .calendar-day.calendar-day-active{color:var(--ion-color-contrast)}:host .calendar-day.calendar-day-active:after{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}:host .datetime-time{padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .datetime-time{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}: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{padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px;display:flex;align-items:center;justify-content:flex-end}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .datetime-buttons{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px}}:host .datetime-view-buttons ion-button{color:var(--ion-color-step-800, #333333)}";
-
-const Datetime = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ionCancel = index.createEvent(this, "ionCancel", 7);
-    this.ionChange = index.createEvent(this, "ionChange", 7);
-    this.ionFocus = index.createEvent(this, "ionFocus", 7);
-    this.ionBlur = index.createEvent(this, "ionBlur", 7);
-    this.ionStyle = index.createEvent(this, "ionStyle", 7);
-    this.ionRender = index.createEvent(this, "ionRender", 7);
-    this.inputId = `ion-dt-${datetimeIds++}`;
-    /**
-     * Whether to highlight the active day with a solid circle (as opposed
-     * to the outline circle around today). If you don't specify an initial
-     * value for the datetime, it doesn't automatically init to a default to
-     * avoid unwanted change events firing. If the solid circle were still
-     * shown then, it would look like a date had already been selected, which
-     * is misleading UX.
-     */
-    this.highlightActiveParts = false;
-    this.todayParts = parse.parseDate(parse.getToday());
-    this.prevPresentation = null;
-    this.showMonthAndYear = false;
-    this.activeParts = {
-      month: 5,
-      day: 28,
-      year: 2021,
-      hour: 13,
-      minute: 52,
-      ampm: 'pm',
-    };
-    this.workingParts = {
-      month: 5,
-      day: 28,
-      year: 2021,
-      hour: 13,
-      minute: 52,
-      ampm: 'pm',
-    };
-    this.isPresented = false;
-    this.isTimePopoverOpen = false;
-    /**
-     * The color to use from your application's color palette.
-     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-     * For more information on colors, see [theming](/docs/theming/basics).
-     */
-    this.color = 'primary';
-    /**
-     * The name of the control, which is submitted with the form data.
-     */
-    this.name = this.inputId;
-    /**
-     * If `true`, the user cannot interact with the datetime.
-     */
-    this.disabled = false;
-    /**
-     * If `true`, the datetime appears normal but is not interactive.
-     */
-    this.readonly = false;
-    /**
-     * Which values you want to select. `'date'` will show
-     * a calendar picker to select the month, day, and year. `'time'`
-     * will show a time picker to select the hour, minute, and (optionally)
-     * AM/PM. `'date-time'` will show the date picker first and time picker second.
-     * `'time-date'` will show the time picker first and date picker second.
-     */
-    this.presentation = 'date-time';
-    /**
-     * The text to display on the picker's cancel button.
-     */
-    this.cancelText = 'Cancel';
-    /**
-     * The text to display on the picker's "Done" button.
-     */
-    this.doneText = 'Done';
-    /**
-     * The text to display on the picker's "Clear" button.
-     */
-    this.clearText = 'Clear';
-    /**
-     * The locale to use for `ion-datetime`. This
-     * impacts month and day name formatting.
-     * The `'default'` value refers to the default
-     * locale set by your device.
-     */
-    this.locale = 'default';
-    /**
-     * The first day of the week to use for `ion-datetime`. The
-     * default value is `0` and represents Sunday.
-     */
-    this.firstDayOfWeek = 0;
-    /**
-     * If `true`, multiple dates can be selected at once. Only
-     * applies to `presentation="date"` and `preferWheel="false"`.
-     */
-    this.multiple = false;
-    /**
-     * If `true`, a header will be shown above the calendar
-     * picker. On `ios` mode this will include the
-     * slotted title, and on `md` mode this will include
-     * the slotted title and the selected date.
-     */
-    this.showDefaultTitle = false;
-    /**
-     * If `true`, the default "Cancel" and "OK" buttons
-     * will be rendered at the bottom of the `ion-datetime`
-     * component. Developers can also use the `button` slot
-     * if they want to customize these buttons. If custom
-     * buttons are set in the `button` slot then the
-     * default buttons will not be rendered.
-     */
-    this.showDefaultButtons = false;
-    /**
-     * If `true`, a "Clear" button will be rendered alongside
-     * the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime`
-     * component. Developers can also use the `button` slot
-     * if they want to customize these buttons. If custom
-     * buttons are set in the `button` slot then the
-     * default buttons will not be rendered.
-     */
-    this.showClearButton = false;
-    /**
-     * If `true`, the default "Time" label will be rendered
-     * for the time selector of the `ion-datetime` component.
-     * Developers can also use the `time-label` slot
-     * if they want to customize this label. If a custom
-     * label is set in the `time-label` slot then the
-     * default label will not be rendered.
-     */
-    this.showDefaultTimeLabel = true;
-    /**
-     * If `cover`, the `ion-datetime` will expand to cover the full width of its container.
-     * If `fixed`, the `ion-datetime` will have a fixed width.
-     */
-    this.size = 'fixed';
-    /**
-     * If `true`, a wheel picker will be rendered instead of a calendar grid
-     * where possible. If `false`, a calendar grid will be rendered instead of
-     * a wheel picker where possible.
-     *
-     * A wheel picker can be rendered instead of a grid when `presentation` is
-     * one of the following values: `'date'`, `'date-time'`, or `'time-date'`.
-     *
-     * A wheel picker will always be rendered regardless of
-     * the `preferWheel` value when `presentation` is one of the following values:
-     * `'time'`, `'month'`, `'month-year'`, or `'year'`.
-     */
-    this.preferWheel = false;
-    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) => {
-      const { multiple, activePartsClone, highlightActiveParts } = this;
-      if (multiple) {
-        /**
-         * We read from activePartsClone here because valueChanged() only updates that,
-         * so it's the more reliable source of truth. If we read from activeParts, then
-         * if you click July 1, manually set the value to July 2, and then click July 3,
-         * the new value would be [July 1, July 3], ignoring the value set.
-         *
-         * We can then pass the new value to activeParts (rather than activePartsClone)
-         * since the clone will be updated automatically by activePartsChanged().
-         */
-        const activePartsArray = Array.isArray(activePartsClone) ? activePartsClone : [activePartsClone];
-        if (removeDate) {
-          this.activeParts = activePartsArray.filter((p) => !parse.isSameDay(p, parts));
-        }
-        else if (highlightActiveParts) {
-          this.activeParts = [...activePartsArray, parts];
-        }
-        else {
-          /**
-           * If highlightActiveParts is false, that means we just have a
-           * default value of today in activeParts; we need to replace that
-           * rather than adding to it since it's just a placeholder.
-           */
-          this.activeParts = [parts];
-        }
-      }
-      else {
-        this.activeParts = Object.assign({}, parts);
-      }
-      /**
-       * Now that the user has interacted somehow to select something, we can
-       * show the solid highlight. This needs to be done after checking it above,
-       * but before the confirm call below.
-       *
-       * Note that for datetimes with confirm/cancel buttons, the value
-       * isn't updated until you call confirm(). We need to bring the
-       * solid circle back on day click for UX reasons, rather than only
-       * show the circle if `value` is truthy.
-       */
-      this.highlightActiveParts = true;
-      const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
-      if (hasSlottedButtons || this.showDefaultButtons) {
-        return;
-      }
-      this.confirm();
-    };
-    /**
-     * Stencil sometimes sets calendarBodyRef to null on rerender, even though
-     * the element is present. Query for it manually as a fallback.
-     *
-     * TODO(FW-901) Remove when issue is resolved: https://github.com/ionic-team/stencil/issues/3253
-     */
-    this.getCalendarBodyEl = () => {
-      var _a;
-      return this.calendarBodyRef || ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.calendar-body'));
-    };
-    this.initializeKeyboardListeners = () => {
-      const calendarBodyRef = this.getCalendarBodyEl();
-      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 = parse.getPartsFromCalendarDay(activeElement);
-        let partsToFocus;
-        switch (ev.key) {
-          case 'ArrowDown':
-            ev.preventDefault();
-            partsToFocus = parse.getNextWeek(parts);
-            break;
-          case 'ArrowUp':
-            ev.preventDefault();
-            partsToFocus = parse.getPreviousWeek(parts);
-            break;
-          case 'ArrowRight':
-            ev.preventDefault();
-            partsToFocus = parse.getNextDay(parts);
-            break;
-          case 'ArrowLeft':
-            ev.preventDefault();
-            partsToFocus = parse.getPreviousDay(parts);
-            break;
-          case 'Home':
-            ev.preventDefault();
-            partsToFocus = parse.getStartOfWeek(parts);
-            break;
-          case 'End':
-            ev.preventDefault();
-            partsToFocus = parse.getEndOfWeek(parts);
-            break;
-          case 'PageUp':
-            ev.preventDefault();
-            partsToFocus = ev.shiftKey ? parse.getPreviousYear(parts) : parse.getPreviousMonth(parts);
-            break;
-          case 'PageDown':
-            ev.preventDefault();
-            partsToFocus = ev.shiftKey ? parse.getNextYear(parts) : parse.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 calenday-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:nth-of-type(${padding.length + day})`);
-      if (dayEl) {
-        dayEl.focus();
-      }
-    };
-    this.processMinParts = () => {
-      if (this.min === undefined) {
-        this.minParts = undefined;
-        return;
-      }
-      const { month, day, year, hour, minute } = parse.parseDate(this.min);
-      this.minParts = {
-        month,
-        day,
-        year,
-        hour,
-        minute,
-      };
-    };
-    this.processMaxParts = () => {
-      if (this.max === undefined) {
-        this.maxParts = undefined;
-        return;
-      }
-      const { month, day, year, hour, minute } = parse.parseDate(this.max);
-      this.maxParts = {
-        month,
-        day,
-        year,
-        hour,
-        minute,
-      };
-    };
-    this.initializeCalendarListener = () => {
-      const calendarBodyRef = this.getCalendarBodyEl();
-      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 = ionicGlobal.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.
-       */
-      index.writeTask(() => {
-        calendarBodyRef.scrollLeft = startMonth.clientWidth * (dir.isRTL(this.el) ? -1 : 1);
-        const getChangedMonth = (parts) => {
-          const box = calendarBodyRef.getBoundingClientRect();
-          const root = this.el.shadowRoot;
-          /**
-           * Get the element that is in the center of the calendar body.
-           * This will be an element inside of the active month.
-           */
-          const elementAtCenter = root.elementFromPoint(box.x + box.width / 2, box.y + box.height / 2);
-          /**
-           * If there is no element then the
-           * component may be re-rendering on a slow device.
-           */
-          if (!elementAtCenter)
-            return;
-          const month = elementAtCenter.closest('.calendar-month');
-          if (!month)
-            return;
-          /**
-           * 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;
-          /**
-           * 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 parse.getPreviousMonth(parts);
-          }
-          else if (month === endMonth) {
-            return parse.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.
-           */
-          index.writeTask(() => {
-            this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), { month, day: day, year }));
-            calendarBodyRef.scrollLeft = workingMonth.clientWidth * (dir.isRTL(this.el) ? -1 : 1);
-            calendarBodyRef.style.removeProperty('overflow');
-          });
-        };
-        /**
-         * 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) => {
-      this.highlightActiveParts = !!value;
-      let valueToProcess = parse.parseDate(value || parse.getToday());
-      const { minParts, maxParts, multiple } = this;
-      if (!multiple && Array.isArray(value)) {
-        this.value = value[0];
-        valueToProcess = valueToProcess[0];
-      }
-      parse.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 { month, day, year, hour, minute, tzOffset } = parse.clampDate(singleValue, minParts, maxParts);
-      const ampm = parse.parseAmPm(hour);
-      this.setWorkingParts({
-        month,
-        day,
-        year,
-        hour,
-        minute,
-        tzOffset,
-        ampm,
-      });
-      if (Array.isArray(valueToProcess)) {
-        this.activeParts = [...valueToProcess];
-      }
-      else {
-        this.activeParts = {
-          month,
-          day,
-          year,
-          hour,
-          minute,
-          tzOffset,
-          ampm,
-        };
-      }
-    };
-    this.onFocus = () => {
-      this.ionFocus.emit();
-    };
-    this.onBlur = () => {
-      this.ionBlur.emit();
-    };
-    this.hasValue = () => {
-      return this.value != null && this.value !== '';
-    };
-    this.nextMonth = () => {
-      const calendarBodyRef = this.getCalendarBodyEl();
-      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 * (dir.isRTL(this.el) ? -1 : 1),
-        behavior: 'smooth',
-      });
-    };
-    this.prevMonth = () => {
-      const calendarBodyRef = this.getCalendarBodyEl();
-      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;
-    };
-  }
-  disabledChanged() {
-    this.emitStyle();
-  }
-  minChanged() {
-    this.processMinParts();
-  }
-  maxChanged() {
-    this.processMaxParts();
-  }
-  yearValuesChanged() {
-    this.parsedYearValues = parse.convertToArrayOfNumbers(this.yearValues);
-  }
-  monthValuesChanged() {
-    this.parsedMonthValues = parse.convertToArrayOfNumbers(this.monthValues);
-  }
-  dayValuesChanged() {
-    this.parsedDayValues = parse.convertToArrayOfNumbers(this.dayValues);
-  }
-  hourValuesChanged() {
-    this.parsedHourValues = parse.convertToArrayOfNumbers(this.hourValues);
-  }
-  minuteValuesChanged() {
-    this.parsedMinuteValues = parse.convertToArrayOfNumbers(this.minuteValues);
-  }
-  activePartsChanged() {
-    this.activePartsClone = this.activeParts;
-  }
-  /**
-   * Update the datetime value when the value changes
-   */
-  valueChanged() {
-    const { value, minParts, maxParts, workingParts, multiple } = this;
-    if (this.hasValue()) {
-      if (!multiple && Array.isArray(value)) {
-        this.value = value[0];
-        return; // setting this.value will trigger re-run of this function
-      }
-      /**
-       * Clones the value of the `activeParts` to the private clone, to update
-       * the date display on the current render cycle without causing another render.
-       *
-       * This allows us to update the current value's date/time display without
-       * refocusing or shifting the user's display (leaves the user in place).
-       */
-      const valueDateParts = parse.parseDate(value);
-      if (valueDateParts) {
-        parse.warnIfValueOutOfBounds(valueDateParts, minParts, maxParts);
-        if (Array.isArray(valueDateParts)) {
-          this.activePartsClone = [...valueDateParts];
-        }
-        else {
-          const { month, day, year, hour, minute } = valueDateParts;
-          const ampm = hour != null ? (hour >= 12 ? 'pm' : 'am') : undefined;
-          this.activePartsClone = Object.assign(Object.assign({}, this.activeParts), { month,
-            day,
-            year,
-            hour,
-            minute,
-            ampm });
-          /**
-           * The working parts am/pm value must be updated when the value changes, to
-           * ensure the time picker hour column values are generated correctly.
-           *
-           * Note that we don't need to do this if valueDateParts is an array, since
-           * multiple="true" does not apply to time pickers.
-           */
-          this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm }));
-        }
-      }
-      else {
-        index$1.printIonWarning(`Unable to parse date string: ${value}. Please provide a valid ISO 8601 datetime string.`);
-      }
-    }
-    this.emitStyle();
-    this.ionChange.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 { highlightActiveParts, isCalendarPicker, activeParts } = this;
-    /**
-     * We only update the value if the presentation is not a calendar picker,
-     * or if `highlightActiveParts` is true; indicating that the user
-     * has selected a date from the calendar picker.
-     *
-     * Otherwise "today" would accidentally be set as the value.
-     */
-    if (highlightActiveParts || !isCalendarPicker) {
-      const activePartsIsArray = Array.isArray(activeParts);
-      if (activePartsIsArray && activeParts.length === 0) {
-        this.value = undefined;
-      }
-      else {
-        /**
-         * Prevent convertDataToISO from doing any
-         * kind of transformation based on timezone
-         * This cancels out any change it attempts to make
-         *
-         * Important: Take the timezone offset based on
-         * the date that is currently selected, otherwise
-         * there can be 1 hr difference when dealing w/ DST
-         */
-        if (activePartsIsArray) {
-          const dates = parse.convertDataToISO(activeParts).map((str) => new Date(str));
-          for (let i = 0; i < dates.length; i++) {
-            activeParts[i].tzOffset = dates[i].getTimezoneOffset() * -1;
-          }
-        }
-        else {
-          const date = new Date(parse.convertDataToISO(activeParts));
-          activeParts.tzOffset = date.getTimezoneOffset() * -1;
-        }
-        this.value = parse.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 = focusVisible.startFocusVisible(this.el).destroy;
-  }
-  disconnectedCallback() {
-    if (this.clearFocusVisible) {
-      this.clearFocusVisible();
-      this.clearFocusVisible = undefined;
-    }
-  }
-  initializeListeners() {
-    this.initializeCalendarListener();
-    this.initializeKeyboardListeners();
-  }
-  componentDidLoad() {
-    /**
-     * 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: 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?
-       */
-      index.writeTask(() => {
-        this.el.classList.add('datetime-ready');
-      });
-    };
-    const visibleIO = new IntersectionObserver(visibleCallback, { threshold: 0.01 });
-    /**
-     * 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.
-     */
-    helpers.raf(() => visibleIO === null || visibleIO === void 0 ? void 0 : visibleIO.observe(this.el));
-    /**
-     * 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();
-      index.writeTask(() => {
-        this.el.classList.remove('datetime-ready');
-      });
-    };
-    const hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0 });
-    helpers.raf(() => hiddenIO === null || hiddenIO === void 0 ? void 0 : hiddenIO.observe(this.el));
-    /**
-     * 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 = helpers.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 } = this;
-    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;
-    helpers.raf(() => {
-      this.ionRender.emit();
-    });
-  }
-  componentWillLoad() {
-    const { el, multiple, presentation, preferWheel } = this;
-    if (multiple) {
-      if (presentation !== 'date') {
-        index$1.printIonWarning('Multiple date selection is only supported for presentation="date".', el);
-      }
-      if (preferWheel) {
-        index$1.printIonWarning('Multiple date selection is not supported with preferWheel="true".', el);
-      }
-    }
-    this.processMinParts();
-    this.processMaxParts();
-    this.processValue(this.value);
-    this.parsedHourValues = parse.convertToArrayOfNumbers(this.hourValues);
-    this.parsedMinuteValues = parse.convertToArrayOfNumbers(this.minuteValues);
-    this.parsedMonthValues = parse.convertToArrayOfNumbers(this.monthValues);
-    this.parsedYearValues = parse.convertToArrayOfNumbers(this.yearValues);
-    this.parsedDayValues = parse.convertToArrayOfNumbers(this.dayValues);
-    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 { showDefaultButtons, showClearButton } = this;
-    const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
-    if (!hasSlottedButtons && !showDefaultButtons && !showClearButton) {
-      return;
-    }
-    const clearButtonClick = () => {
-      this.reset();
-      this.value = 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 (index.h("div", { class: "datetime-footer" }, index.h("div", { class: "datetime-buttons" }, index.h("div", { class: {
-        ['datetime-action-buttons']: true,
-        ['has-clear-button']: this.showClearButton,
-      } }, index.h("slot", { name: "buttons" }, index.h("ion-buttons", null, showDefaultButtons && (index.h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true) }, this.cancelText)), index.h("div", null, showClearButton && (index.h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick() }, this.clearText)), showDefaultButtons && (index.h("ion-button", { id: "confirm-button", color: this.color, onClick: () => this.confirm(true) }, 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 index.h("ion-picker-internal", null, renderArray);
-  }
-  renderDatePickerColumns(forcePresentation) {
-    return forcePresentation === 'date-time' || forcePresentation === 'time-date'
-      ? this.renderCombinedDatePickerColumn()
-      : this.renderIndividualDatePickerColumns(forcePresentation);
-  }
-  renderCombinedDatePickerColumn() {
-    const { activeParts, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
-    /**
-     * By default, generate a range of 3 months:
-     * Previous month, current month, and next month
-     */
-    const monthsToRender = parse.generateMonths(workingParts);
-    /**
-     * generateMonths returns the day data as well,
-     * but we do not want the day value to act as a max/min
-     * on the data we are going to generate.
-     */
-    for (let i = 0; i <= monthsToRender.length - 1; i++) {
-      monthsToRender[i].day = null;
-    }
-    /**
-     * If developers have provided their own
-     * min/max values, use that instead. Otherwise,
-     * fallback to the default range of 3 months.
-     */
-    const min = minParts || monthsToRender[0];
-    const max = maxParts || monthsToRender[monthsToRender.length - 1];
-    const result = parse.getCombinedDateColumnData(locale, workingParts, 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(parse.convertDataToISO(referenceParts));
-        }
-        catch (e) {
-          index$1.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, default it to today.
-     */
-    const todayString = workingParts.day
-      ? `${workingParts.year}-${workingParts.month}-${workingParts.day}`
-      : `${todayParts.year}-${todayParts.month}-${todayParts.day}`;
-    return (index.h("ion-picker-column-internal", { class: "date-column", color: this.color, 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));
-        if (!Array.isArray(activeParts)) {
-          this.setActiveParts(Object.assign(Object.assign({}, activeParts), 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
-      ? parse.getMonthColumnData(this.locale, workingParts, this.minParts, this.maxParts, this.parsedMonthValues)
-      : [];
-    const shouldRenderDays = forcePresentation === 'date';
-    let days = shouldRenderDays
-      ? parse.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(parse.convertDataToISO(referenceParts));
-        }
-        catch (e) {
-          index$1.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
-      ? parse.getYearColumnData(this.todayParts, this.minParts, this.maxParts, this.parsedYearValues)
-      : [];
-    /**
-     * Certain locales show the day before the month.
-     */
-    const showMonthFirst = parse.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 { activeParts, workingParts } = this;
-    return (index.h("ion-picker-column-internal", { class: "day-column", color: this.color, items: days, value: (_a = (workingParts.day || this.todayParts.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 }));
-        if (!Array.isArray(activeParts)) {
-          this.setActiveParts(Object.assign(Object.assign({}, activeParts), { 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 { activeParts, workingParts } = this;
-    return (index.h("ion-picker-column-internal", { class: "month-column", color: this.color, 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 }));
-        if (!Array.isArray(activeParts)) {
-          this.setActiveParts(Object.assign(Object.assign({}, activeParts), { 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 { activeParts, workingParts } = this;
-    return (index.h("ion-picker-column-internal", { class: "year-column", color: this.color, 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 }));
-        if (!Array.isArray(activeParts)) {
-          this.setActiveParts(Object.assign(Object.assign({}, activeParts), { 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 [];
-    }
-    const { hoursData, minutesData, dayPeriodData } = parse.getTimeColumnsData(this.locale, this.workingParts, this.hourCycle, this.value ? this.minParts : undefined, this.value ? this.maxParts : undefined, this.parsedHourValues, this.parsedMinuteValues);
-    return [
-      this.renderHourPickerColumn(hoursData),
-      this.renderMinutePickerColumn(minutesData),
-      this.renderDayPeriodPickerColumn(dayPeriodData),
-    ];
-  }
-  renderHourPickerColumn(hoursData) {
-    const { workingParts, activePartsClone } = this;
-    if (hoursData.length === 0)
-      return [];
-    return (index.h("ion-picker-column-internal", { color: this.color, value: activePartsClone.hour, items: hoursData, numericInput: true, onIonChange: (ev) => {
-        this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
-        if (!Array.isArray(activePartsClone)) {
-          this.setActiveParts(Object.assign(Object.assign({}, activePartsClone), { hour: ev.detail.value }));
-        }
-        ev.stopPropagation();
-      } }));
-  }
-  renderMinutePickerColumn(minutesData) {
-    const { workingParts, activePartsClone } = this;
-    if (minutesData.length === 0)
-      return [];
-    return (index.h("ion-picker-column-internal", { color: this.color, value: activePartsClone.minute, items: minutesData, numericInput: true, onIonChange: (ev) => {
-        this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
-        if (!Array.isArray(activePartsClone)) {
-          this.setActiveParts(Object.assign(Object.assign({}, activePartsClone), { minute: ev.detail.value }));
-        }
-        ev.stopPropagation();
-      } }));
-  }
-  renderDayPeriodPickerColumn(dayPeriodData) {
-    const { workingParts, activePartsClone } = this;
-    if (dayPeriodData.length === 0) {
-      return [];
-    }
-    const isDayPeriodRTL = parse.isLocaleDayPeriodRTL(this.locale);
-    return (index.h("ion-picker-column-internal", { style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, value: activePartsClone.ampm, items: dayPeriodData, onIonChange: (ev) => {
-        const hour = parse.calculateHourFromAMPM(workingParts, ev.detail.value);
-        this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
-        if (!Array.isArray(activePartsClone)) {
-          this.setActiveParts(Object.assign(Object.assign({}, activePartsClone), { ampm: ev.detail.value, hour }));
-        }
-        ev.stopPropagation();
-      } }));
-  }
-  renderWheelView(forcePresentation) {
-    const { locale } = this;
-    const showMonthFirst = parse.isMonthFirstLocale(locale);
-    const columnOrder = showMonthFirst ? 'month-first' : 'year-first';
-    return (index.h("div", { class: {
-        [`wheel-order-${columnOrder}`]: true,
-      } }, this.renderWheelPicker(forcePresentation)));
-  }
-  /**
-   * Grid Render Methods
-   */
-  renderCalendarHeader(mode) {
-    const expandedIcon = mode === 'ios' ? index$2.chevronDown : index$2.caretUpSharp;
-    const collapsedIcon = mode === 'ios' ? index$2.chevronForward : index$2.caretDownSharp;
-    const prevMonthDisabled = isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
-    const nextMonthDisabled = isNextMonthDisabled(this.workingParts, this.maxParts);
-    return (index.h("div", { class: "calendar-header" }, index.h("div", { class: "calendar-action-buttons" }, index.h("div", { class: "calendar-month-year" }, index.h("ion-item", { button: true, detail: false, lines: "none", onClick: () => this.toggleMonthAndYearView() }, index.h("ion-label", null, parse.getMonthAndYear(this.locale, this.workingParts), ' ', index.h("ion-icon", { icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false })))), index.h("div", { class: "calendar-next-prev" }, index.h("ion-buttons", null, index.h("ion-button", { disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, index.h("ion-icon", { slot: "icon-only", icon: index$2.chevronBack, lazy: false, flipRtl: true })), index.h("ion-button", { disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, index.h("ion-icon", { slot: "icon-only", icon: index$2.chevronForward, lazy: false, flipRtl: true }))))), index.h("div", { class: "calendar-days-of-week" }, parse.getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
-      return index.h("div", { class: "day-of-week" }, d);
-    }))));
-  }
-  renderMonth(month, year) {
-    const { highlightActiveParts } = this;
-    const yearAllowed = this.parsedYearValues === undefined || this.parsedYearValues.includes(year);
-    const monthAllowed = this.parsedMonthValues === undefined || this.parsedMonthValues.includes(month);
-    const isCalMonthDisabled = !yearAllowed || !monthAllowed;
-    const swipeDisabled = 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;
-    return (index.h("div", { class: {
-        'calendar-month': true,
-        // Prevents scroll snap swipe gestures for months outside of the min/max bounds
-        'calendar-month-disabled': !isWorkingMonth && swipeDisabled,
-      } }, index.h("div", { class: "calendar-month-grid" }, parse.getDaysOfMonth(month, year, this.firstDayOfWeek % 7).map((dateObject, index$2) => {
-      const { day, dayOfWeek } = dateObject;
-      const { isDateEnabled, multiple } = this;
-      const referenceParts = { month, day, year };
-      const { isActive, isToday, ariaLabel, ariaSelected, disabled } = getCalendarDayState(this.locale, referenceParts, this.activePartsClone, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues);
-      let isCalDayDisabled = isCalMonthDisabled || disabled;
-      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(parse.convertDataToISO(referenceParts));
-        }
-        catch (e) {
-          index$1.printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
-        }
-      }
-      return (index.h("button", { tabindex: "-1", "data-day": day, "data-month": month, "data-year": year, "data-index": index$2, "data-day-of-week": dayOfWeek, disabled: isCalDayDisabled, class: {
-          'calendar-day-padding': day === null,
-          'calendar-day': true,
-          'calendar-day-active': isActive && highlightActiveParts,
-          'calendar-day-today': isToday,
-        }, "aria-selected": ariaSelected, "aria-label": ariaLabel, onClick: () => {
-          if (day === null) {
-            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 && highlightActiveParts);
-          }
-          else {
-            this.setActiveParts(Object.assign(Object.assign({}, this.activeParts), { month,
-              day,
-              year }));
-          }
-        } }, day));
-    }))));
-  }
-  renderCalendarBody() {
-    return (index.h("div", { class: "calendar-body ion-focusable", ref: (el) => (this.calendarBodyRef = el), tabindex: "0" }, parse.generateMonths(this.workingParts).map(({ month, year }) => {
-      return this.renderMonth(month, year);
-    })));
-  }
-  renderCalendar(mode) {
-    return (index.h("div", { class: "datetime-calendar" }, this.renderCalendarHeader(mode), this.renderCalendarBody()));
-  }
-  renderTimeLabel() {
-    const hasSlottedTimeLabel = this.el.querySelector('[slot="time-label"]') !== null;
-    if (!hasSlottedTimeLabel && !this.showDefaultTimeLabel) {
-      return;
-    }
-    return index.h("slot", { name: "time-label" }, "Time");
-  }
-  renderTimeOverlay() {
-    const use24Hour = parse.is24Hour(this.locale, this.hourCycle);
-    return [
-      index.h("div", { class: "time-header" }, this.renderTimeLabel()),
-      index.h("button", { class: {
-          'time-body': true,
-          'time-body-active': this.isTimePopoverOpen,
-        }, "aria-expanded": "false", "aria-haspopup": "true", 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;
-          }
-        } }, parse.getLocalizedTime(this.locale, this.activePartsClone, use24Hour)),
-      index.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')),
-    ];
-  }
-  renderCalendarViewHeader(mode) {
-    const hasSlottedTitle = this.el.querySelector('[slot="title"]') !== null;
-    if (!hasSlottedTitle && !this.showDefaultTitle) {
-      return;
-    }
-    return (index.h("div", { class: "datetime-header" }, index.h("div", { class: "datetime-title" }, index.h("slot", { name: "title" }, "Select Date")), mode === 'md' && !this.multiple && (index.h("div", { class: "datetime-selected-date" }, parse.getMonthAndDay(this.locale, this.activeParts)))));
-  }
-  /**
-   * 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 (index.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 index.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.renderWheelView(), this.renderFooter()];
-    }
-    switch (presentation) {
-      case 'date-time':
-        return [
-          this.renderCalendarViewHeader(mode),
-          this.renderCalendar(mode),
-          this.renderCalendarViewMonthYearPicker(),
-          this.renderTime(),
-          this.renderFooter(),
-        ];
-      case 'time-date':
-        return [
-          this.renderCalendarViewHeader(mode),
-          this.renderTime(),
-          this.renderCalendar(mode),
-          this.renderCalendarViewMonthYearPicker(),
-          this.renderFooter(),
-        ];
-      case 'time':
-        return [this.renderTime(), this.renderFooter()];
-      case 'month':
-      case 'month-year':
-      case 'year':
-        return [this.renderWheelView(), this.renderFooter()];
-      default:
-        return [
-          this.renderCalendarViewHeader(mode),
-          this.renderCalendar(mode),
-          this.renderCalendarViewMonthYearPicker(),
-          this.renderFooter(),
-        ];
-    }
-  }
-  render() {
-    const { name, value, disabled, el, color, isPresented, readonly, showMonthAndYear, preferWheel, presentation, size, } = this;
-    const mode = ionicGlobal.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;
-    const hasGrid = hasDatePresentation && !preferWheel;
-    helpers.renderHiddenInput(true, el, name, parse.formatValue(value), disabled);
-    return (index.h(index.Host, { "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
-        [mode]: true,
-        ['datetime-presented']: isPresented,
-        ['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`]: hasGrid,
-      })) }, this.renderDatetime(mode)));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "disabled": ["disabledChanged"],
-    "min": ["minChanged"],
-    "max": ["maxChanged"],
-    "yearValues": ["yearValuesChanged"],
-    "monthValues": ["monthValuesChanged"],
-    "dayValues": ["dayValuesChanged"],
-    "hourValues": ["hourValuesChanged"],
-    "minuteValues": ["minuteValuesChanged"],
-    "activeParts": ["activePartsChanged"],
-    "value": ["valueChanged"]
-  }; }
-};
-let datetimeIds = 0;
-Datetime.style = {
-  ios: datetimeIosCss,
-  md: datetimeMdCss
-};
-
-exports.ion_datetime = Datetime;