@venite/components 0.16.33 → 0.16.36

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

@@ -0,0 +1,2584 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-01fdec29.js');
+const index$2 = require('./index-b6879fbc.js');
+const ionicGlobal = require('./ionic-global-bd0aab94.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-c36185aa.js');
+const haptic = require('./haptic-780f33c4.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();
+    };
+    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 = 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 = () => {
+      const { min, todayParts } = this;
+      if (min === undefined) {
+        this.minParts = undefined;
+        return;
+      }
+      this.minParts = parse.parseMinParts(min, todayParts);
+    };
+    this.processMaxParts = () => {
+      const { max, todayParts } = this;
+      if (max === undefined) {
+        this.maxParts = undefined;
+        return;
+      }
+      this.maxParts = parse.parseMaxParts(max, todayParts);
+    };
+    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 = 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) => {
+      const hasValue = !!value;
+      this.highlightActiveParts = hasValue;
+      let valueToProcess = parse.parseDate(value || parse.getToday());
+      const { minParts, maxParts, multiple } = this;
+      if (!multiple && Array.isArray(value)) {
+        this.value = value[0];
+        valueToProcess = valueToProcess[0];
+      }
+      /**
+       * 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) {
+        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.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 * (dir.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;
+    };
+  }
+  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();
+      /**
+       * 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;
+      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", { "aria-label": "previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, index.h("ion-icon", { "aria-hidden": "true", slot: "icon-only", icon: index$2.chevronBack, lazy: false, flipRtl: true })), index.h("ion-button", { "aria-label": "next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, index.h("ion-icon", { "aria-hidden": "true", 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", key: "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
+};
+
+const pickerColumnInternalIosCss = ":host{padding-left:16px;padding-right:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}:host::-webkit-scrollbar{display:none}:host .picker-item{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden;scroll-snap-align:center}:host .picker-item-empty,:host .picker-item.picker-item-disabled{scroll-snap-align:none;cursor:default}:host .picker-item.picker-item-disabled{opacity:0.4}:host(.picker-column-active) .picker-item.picker-item-active{color:var(--ion-color-base)}@media (any-hover: hover){:host(:focus){outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}";
+
+const pickerColumnInternalMdCss = ":host{padding-left:16px;padding-right:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}:host::-webkit-scrollbar{display:none}:host .picker-item{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden;scroll-snap-align:center}:host .picker-item-empty,:host .picker-item.picker-item-disabled{scroll-snap-align:none;cursor:default}:host .picker-item.picker-item-disabled{opacity:0.4}:host(.picker-column-active) .picker-item.picker-item-active{color:var(--ion-color-base)}@media (any-hover: hover){:host(:focus){outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}:host .picker-item-active{color:var(--ion-color-base)}";
+
+const PickerColumnInternal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ionChange = index.createEvent(this, "ionChange", 7);
+    this.isScrolling = false;
+    this.isColumnVisible = false;
+    this.isActive = false;
+    /**
+     * A list of options to be displayed in the picker
+     */
+    this.items = [];
+    /**
+     * 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';
+    /**
+     * If `true`, tapping the picker will
+     * reveal a number input keyboard that lets
+     * the user type in values for each picker
+     * column. This is useful when working
+     * with time pickers.
+     *
+     * @internal
+     */
+    this.numericInput = false;
+    this.centerPickerItemInView = (target, smooth = true) => {
+      const { el, isColumnVisible } = this;
+      if (isColumnVisible) {
+        // (Vertical offset from parent) - (three empty picker rows) + (half the height of the target to ensure the scroll triggers)
+        const top = target.offsetTop - 3 * target.clientHeight + target.clientHeight / 2;
+        if (el.scrollTop !== top) {
+          el.scroll({
+            top,
+            left: 0,
+            behavior: smooth ? 'smooth' : undefined,
+          });
+        }
+      }
+    };
+    /**
+     * When ionInputModeChange is emitted, each column
+     * needs to check if it is the one being made available
+     * for text entry.
+     */
+    this.inputModeChange = (ev) => {
+      if (!this.numericInput) {
+        return;
+      }
+      const { useInputMode, inputModeColumn } = ev.detail;
+      /**
+       * If inputModeColumn is undefined then this means
+       * all numericInput columns are being selected.
+       */
+      const isColumnActive = inputModeColumn === undefined || inputModeColumn === this.el;
+      if (!useInputMode || !isColumnActive) {
+        this.setInputModeActive(false);
+        return;
+      }
+      this.setInputModeActive(true);
+    };
+    /**
+     * Setting isActive will cause a re-render.
+     * As a result, we do not want to cause the
+     * re-render mid scroll as this will cause
+     * the picker column to jump back to
+     * whatever value was selected at the
+     * start of the scroll interaction.
+     */
+    this.setInputModeActive = (state) => {
+      if (this.isScrolling) {
+        this.scrollEndCallback = () => {
+          this.isActive = state;
+        };
+        return;
+      }
+      this.isActive = state;
+    };
+    /**
+     * When the column scrolls, the component
+     * needs to determine which item is centered
+     * in the view and will emit an ionChange with
+     * the item object.
+     */
+    this.initializeScrollListener = () => {
+      const { el } = this;
+      let timeout;
+      let activeEl = this.activeItem;
+      const scrollCallback = () => {
+        helpers.raf(() => {
+          if (timeout) {
+            clearTimeout(timeout);
+            timeout = undefined;
+          }
+          if (!this.isScrolling) {
+            haptic.hapticSelectionStart();
+            this.isScrolling = true;
+          }
+          /**
+           * Select item in the center of the column
+           * which is the month/year that we want to select
+           */
+          const bbox = el.getBoundingClientRect();
+          const centerX = bbox.x + bbox.width / 2;
+          const centerY = bbox.y + bbox.height / 2;
+          const activeElement = el.shadowRoot.elementFromPoint(centerX, centerY);
+          if (activeEl !== null) {
+            activeEl.classList.remove(PICKER_COL_ACTIVE);
+          }
+          if (activeElement.disabled) {
+            return;
+          }
+          /**
+           * If we are selecting a new value,
+           * we need to run haptics again.
+           */
+          if (activeElement !== activeEl) {
+            haptic.hapticSelectionChanged();
+          }
+          activeEl = activeElement;
+          activeElement.classList.add(PICKER_COL_ACTIVE);
+          timeout = setTimeout(() => {
+            this.isScrolling = false;
+            haptic.hapticSelectionEnd();
+            /**
+             * Certain tasks (such as those that
+             * cause re-renders) should only be done
+             * once scrolling has finished, otherwise
+             * flickering may occur.
+             */
+            const { scrollEndCallback } = this;
+            if (scrollEndCallback) {
+              scrollEndCallback();
+              this.scrollEndCallback = undefined;
+            }
+            const dataIndex = activeElement.getAttribute('data-index');
+            /**
+             * If no value it is
+             * possible we hit one of the
+             * empty padding columns.
+             */
+            if (dataIndex === null) {
+              return;
+            }
+            const index = parseInt(dataIndex, 10);
+            const selectedItem = this.items[index];
+            if (selectedItem.value !== this.value) {
+              this.setValue(selectedItem.value);
+            }
+          }, 250);
+        });
+      };
+      /**
+       * Wrap this in an raf so that the scroll callback
+       * does not fire when component is initially shown.
+       */
+      helpers.raf(() => {
+        el.addEventListener('scroll', scrollCallback);
+        this.destroyScrollListener = () => {
+          el.removeEventListener('scroll', scrollCallback);
+        };
+      });
+    };
+  }
+  itemsChange(currentItems, previousItems) {
+    const { value } = this;
+    /**
+     * When the items change, it is possible for the item
+     * that was selected to no longer exist. In that case, we need
+     * to automatically select the nearest item. If we do not,
+     * then the scroll position will be reset to zero and it will
+     * look like the first item was automatically selected.
+     *
+     * If we cannot find a closest item then we do nothing, and
+     * the browser will reset the scroll position to 0.
+     */
+    const findCurrentItem = currentItems.find((item) => item.value === value);
+    if (!findCurrentItem) {
+      /**
+       * The default behavior is to assume
+       * that the new set of data is similar to the old
+       * set of data, just with some items filtered out.
+       * We walk backwards through the data to find the
+       * closest enabled picker item and select it.
+       *
+       * Developers can also swap the items out for an entirely
+       * new set of data. In that case, the value we select
+       * here likely will not make much sense. For this use case,
+       * developers should update the `value` prop themselves
+       * when swapping out the data.
+       */
+      const findPreviousItemIndex = previousItems.findIndex((item) => item.value === value);
+      if (findPreviousItemIndex === -1) {
+        return;
+      }
+      /**
+       * Step through the current items backwards
+       * until we find a neighbor we can select.
+       * We start at the last known location of the
+       * current selected item in order to
+       * account for data that has been added. This
+       * search prioritizes stability in that it
+       * tries to keep the scroll position as close
+       * to where it was before the update.
+       * Before Items: ['a', 'b', 'c'], Selected Value: 'b'
+       * After Items:  ['a', 'dog', 'c']
+       * Even though 'dog' is a different item than 'b',
+       * it is the closest item we can select while
+       * preserving the scroll position.
+       */
+      let nearestItem;
+      for (let i = findPreviousItemIndex; i >= 0; i--) {
+        const item = currentItems[i];
+        if (item !== undefined && item.disabled !== true) {
+          nearestItem = item;
+          break;
+        }
+      }
+      if (nearestItem) {
+        this.setValue(nearestItem.value);
+        return;
+      }
+    }
+  }
+  valueChange() {
+    if (this.isColumnVisible) {
+      /**
+       * Only scroll the active item into view when the picker column
+       * is actively visible to the user.
+       */
+      this.scrollActiveItemIntoView();
+    }
+  }
+  /**
+   * Only setup scroll listeners
+   * when the picker is visible, otherwise
+   * the container will have a scroll
+   * height of 0px.
+   */
+  componentWillLoad() {
+    const visibleCallback = (entries) => {
+      var _a;
+      const ev = entries[0];
+      if (ev.isIntersecting) {
+        this.isColumnVisible = true;
+        /**
+         * Because this initial call to scrollActiveItemIntoView has to fire before
+         * the scroll listener is set up, we need to manage the active class manually.
+         */
+        const oldActive = helpers.getElementRoot(this.el).querySelector(`.${PICKER_COL_ACTIVE}`);
+        oldActive === null || oldActive === void 0 ? void 0 : oldActive.classList.remove(PICKER_COL_ACTIVE);
+        this.scrollActiveItemIntoView();
+        (_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.classList.add(PICKER_COL_ACTIVE);
+        this.initializeScrollListener();
+      }
+      else {
+        this.isColumnVisible = false;
+        if (this.destroyScrollListener) {
+          this.destroyScrollListener();
+          this.destroyScrollListener = undefined;
+        }
+      }
+    };
+    new IntersectionObserver(visibleCallback, { threshold: 0.001 }).observe(this.el);
+    const parentEl = this.el.closest('ion-picker-internal');
+    if (parentEl !== null) {
+      parentEl.addEventListener('ionInputModeChange', (ev) => this.inputModeChange(ev));
+    }
+  }
+  componentDidRender() {
+    var _a;
+    const { activeItem, items, isColumnVisible, value } = this;
+    if (isColumnVisible) {
+      if (activeItem) {
+        this.scrollActiveItemIntoView();
+      }
+      else if (((_a = items[0]) === null || _a === void 0 ? void 0 : _a.value) !== value) {
+        /**
+         * If the picker column does not have an active item and the current value
+         * does not match the first item in the picker column, that means
+         * the value is out of bounds. In this case, we assign the value to the
+         * first item to match the scroll position of the column.
+         *
+         */
+        this.setValue(items[0].value);
+      }
+    }
+  }
+  /** @internal  */
+  async scrollActiveItemIntoView() {
+    const activeEl = this.activeItem;
+    if (activeEl) {
+      this.centerPickerItemInView(activeEl, false);
+    }
+  }
+  /**
+   * Sets the value prop and fires the ionChange event.
+   * This is used when we need to fire ionChange from
+   * user-generated events that cannot be caught with normal
+   * input/change event listeners.
+   * @internal
+   */
+  async setValue(value) {
+    const { items } = this;
+    this.value = value;
+    const findItem = items.find((item) => item.value === value && item.disabled !== true);
+    if (findItem) {
+      this.ionChange.emit(findItem);
+    }
+  }
+  get activeItem() {
+    return helpers.getElementRoot(this.el).querySelector(`.picker-item[data-value="${this.value}"]:not([disabled])`);
+  }
+  render() {
+    const { items, color, isActive, numericInput } = this;
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { tabindex: 0, class: theme.createColorClasses(color, {
+        [mode]: true,
+        ['picker-column-active']: isActive,
+        ['picker-column-numeric-input']: numericInput,
+      }) }, index.h("div", { class: "picker-item picker-item-empty" }, "\u00A0"), index.h("div", { class: "picker-item picker-item-empty" }, "\u00A0"), index.h("div", { class: "picker-item picker-item-empty" }, "\u00A0"), items.map((item, index$1) => {
+      return (index.h("button", { tabindex: "-1", class: {
+          'picker-item': true,
+          'picker-item-disabled': item.disabled || false,
+        }, "data-value": item.value, "data-index": index$1, onClick: (ev) => {
+          this.centerPickerItemInView(ev.target);
+        }, disabled: item.disabled }, item.text));
+    }), index.h("div", { class: "picker-item picker-item-empty" }, "\u00A0"), index.h("div", { class: "picker-item picker-item-empty" }, "\u00A0"), index.h("div", { class: "picker-item picker-item-empty" }, "\u00A0")));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "items": ["itemsChange"],
+    "value": ["valueChange"]
+  }; }
+};
+const PICKER_COL_ACTIVE = 'picker-item-active';
+PickerColumnInternal.style = {
+  ios: pickerColumnInternalIosCss,
+  md: pickerColumnInternalMdCss
+};
+
+const pickerInternalIosCss = ":host{display:flex;position:relative;align-items:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{left:0;top:0;height:83px}:host-context([dir=rtl]){left:unset;right:unset;right:0}:host .picker-after{left:0;top:116px;height:84px}:host-context([dir=rtl]){left:unset;right:unset;right:0}:host .picker-highlight{border-radius:8px;left:0;right:0;top:50%;bottom:0;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;transform:translateY(-50%);z-index:-1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .picker-highlight{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column-internal:first-of-type){text-align:start}:host ::slotted(ion-picker-column-internal:last-of-type){text-align:end}:host ::slotted(ion-picker-column-internal:only-child){text-align:center}:host .picker-before{background:linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%)}:host .picker-after{background:linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%)}:host .picker-highlight{background:var(--ion-color-step-150, #eeeeef)}";
+
+const pickerInternalMdCss = ":host{display:flex;position:relative;align-items:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{left:0;top:0;height:83px}:host-context([dir=rtl]){left:unset;right:unset;right:0}:host .picker-after{left:0;top:116px;height:84px}:host-context([dir=rtl]){left:unset;right:unset;right:0}:host .picker-highlight{border-radius:8px;left:0;right:0;top:50%;bottom:0;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;transform:translateY(-50%);z-index:-1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .picker-highlight{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column-internal:first-of-type){text-align:start}:host ::slotted(ion-picker-column-internal:last-of-type){text-align:end}:host ::slotted(ion-picker-column-internal:only-child){text-align:center}:host .picker-before{background:linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0) 90%)}:host .picker-after{background:linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 30%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0) 90%)}";
+
+const PickerInternal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ionInputModeChange = index.createEvent(this, "ionInputModeChange", 7);
+    this.useInputMode = false;
+    this.isInHighlightBounds = (ev) => {
+      const { highlightEl } = this;
+      if (!highlightEl) {
+        return false;
+      }
+      const bbox = highlightEl.getBoundingClientRect();
+      /**
+       * Check to see if the user clicked
+       * outside the bounds of the highlight.
+       */
+      const outsideX = ev.clientX < bbox.left || ev.clientX > bbox.right;
+      const outsideY = ev.clientY < bbox.top || ev.clientY > bbox.bottom;
+      if (outsideX || outsideY) {
+        return false;
+      }
+      return true;
+    };
+    /**
+     * If we are no longer focused
+     * on a picker column, then we should
+     * exit input mode. An exception is made
+     * for the input in the picker since having
+     * that focused means we are still in input mode.
+     */
+    this.onFocusOut = (ev) => {
+      const { relatedTarget } = ev;
+      if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN-INTERNAL' && relatedTarget !== this.inputEl)) {
+        this.exitInputMode();
+      }
+    };
+    /**
+     * When picker columns receive focus
+     * the parent picker needs to determine
+     * whether to enter/exit input mode.
+     */
+    this.onFocusIn = (ev) => {
+      const { target } = ev;
+      /**
+       * Due to browser differences in how/when focus
+       * is dispatched on certain elements, we need to
+       * make sure that this function only ever runs when
+       * focusing a picker column.
+       */
+      if (target.tagName !== 'ION-PICKER-COLUMN-INTERNAL') {
+        return;
+      }
+      /**
+       * If we have actionOnClick
+       * then this means the user focused
+       * a picker column via mouse or
+       * touch (i.e. a PointerEvent). As a result,
+       * we should not enter/exit input mode
+       * until the click event has fired, which happens
+       * after the `focusin` event.
+       *
+       * Otherwise, the user likely focused
+       * the column using their keyboard and
+       * we should enter/exit input mode automatically.
+       */
+      if (!this.actionOnClick) {
+        const columnEl = target;
+        const allowInput = columnEl.numericInput;
+        if (allowInput) {
+          this.enterInputMode(columnEl, false);
+        }
+        else {
+          this.exitInputMode();
+        }
+      }
+    };
+    /**
+     * On click we need to run an actionOnClick
+     * function that has been set in onPointerDown
+     * so that we enter/exit input mode correctly.
+     */
+    this.onClick = () => {
+      const { actionOnClick } = this;
+      if (actionOnClick) {
+        actionOnClick();
+        this.actionOnClick = undefined;
+      }
+    };
+    /**
+     * Clicking a column also focuses the column on
+     * certain browsers, so we use onPointerDown
+     * to tell the onFocusIn function that users
+     * are trying to click the column rather than
+     * focus the column using the keyboard. When the
+     * user completes the click, the onClick function
+     * runs and runs the actionOnClick callback.
+     */
+    this.onPointerDown = (ev) => {
+      const { useInputMode, inputModeColumn, el } = this;
+      if (this.isInHighlightBounds(ev)) {
+        /**
+         * If we were already in
+         * input mode, then we should determine
+         * if we tapped a particular column and
+         * should switch to input mode for
+         * that specific column.
+         */
+        if (useInputMode) {
+          /**
+           * If we tapped a picker column
+           * then we should either switch to input
+           * mode for that column or all columns.
+           * Otherwise we should exit input mode
+           * since we just tapped the highlight and
+           * not a column.
+           */
+          if (ev.target.tagName === 'ION-PICKER-COLUMN-INTERNAL') {
+            /**
+             * If user taps 2 different columns
+             * then we should just switch to input mode
+             * for the new column rather than switching to
+             * input mode for all columns.
+             */
+            if (inputModeColumn && inputModeColumn === ev.target) {
+              this.actionOnClick = () => {
+                this.enterInputMode();
+              };
+            }
+            else {
+              this.actionOnClick = () => {
+                this.enterInputMode(ev.target);
+              };
+            }
+          }
+          else {
+            this.actionOnClick = () => {
+              this.exitInputMode();
+            };
+          }
+          /**
+           * If we were not already in
+           * input mode, then we should
+           * enter input mode for all columns.
+           */
+        }
+        else {
+          /**
+           * If there is only 1 numeric input column
+           * then we should skip multi column input.
+           */
+          const columns = el.querySelectorAll('ion-picker-column-internal.picker-column-numeric-input');
+          const columnEl = columns.length === 1 ? ev.target : undefined;
+          this.actionOnClick = () => {
+            this.enterInputMode(columnEl);
+          };
+        }
+        return;
+      }
+      this.actionOnClick = () => {
+        this.exitInputMode();
+      };
+    };
+    /**
+     * Enters input mode to allow
+     * for text entry of numeric values.
+     * If on mobile, we focus a hidden input
+     * field so that the on screen keyboard
+     * is brought up. When tabbing using a
+     * keyboard, picker columns receive an outline
+     * to indicate they are focused. As a result,
+     * we should not focus the hidden input as it
+     * would cause the outline to go away, preventing
+     * users from having any visual indication of which
+     * column is focused.
+     */
+    this.enterInputMode = (columnEl, focusInput = true) => {
+      const { inputEl, el } = this;
+      if (!inputEl) {
+        return;
+      }
+      /**
+       * Only active input mode if there is at
+       * least one column that accepts numeric input.
+       */
+      const hasInputColumn = el.querySelector('ion-picker-column-internal.picker-column-numeric-input');
+      if (!hasInputColumn) {
+        return;
+      }
+      /**
+       * If columnEl is undefined then
+       * it is assumed that all numeric pickers
+       * are eligible for text entry.
+       * (i.e. hour and minute columns)
+       */
+      this.useInputMode = true;
+      this.inputModeColumn = columnEl;
+      /**
+       * Users with a keyboard and mouse can
+       * activate input mode where the input is
+       * focused as well as when it is not focused,
+       * so we need to make sure we clean up any
+       * old listeners.
+       */
+      if (focusInput) {
+        if (this.destroyKeypressListener) {
+          this.destroyKeypressListener();
+          this.destroyKeypressListener = undefined;
+        }
+        inputEl.focus();
+      }
+      else {
+        el.addEventListener('keypress', this.onKeyPress);
+        this.destroyKeypressListener = () => {
+          el.removeEventListener('keypress', this.onKeyPress);
+        };
+      }
+      this.emitInputModeChange();
+    };
+    this.exitInputMode = () => {
+      const { inputEl, useInputMode } = this;
+      if (!useInputMode || !inputEl) {
+        return;
+      }
+      this.useInputMode = false;
+      this.inputModeColumn = undefined;
+      inputEl.blur();
+      inputEl.value = '';
+      if (this.destroyKeypressListener) {
+        this.destroyKeypressListener();
+        this.destroyKeypressListener = undefined;
+      }
+      this.emitInputModeChange();
+    };
+    this.onKeyPress = (ev) => {
+      const { inputEl } = this;
+      if (!inputEl) {
+        return;
+      }
+      const parsedValue = parseInt(ev.key, 10);
+      /**
+       * Only numbers should be allowed
+       */
+      if (!Number.isNaN(parsedValue)) {
+        inputEl.value += ev.key;
+        this.onInputChange();
+      }
+    };
+    this.selectSingleColumn = () => {
+      const { inputEl, inputModeColumn, singleColumnSearchTimeout } = this;
+      if (!inputEl || !inputModeColumn) {
+        return;
+      }
+      const values = inputModeColumn.items.filter((item) => item.disabled !== true);
+      /**
+       * If users pause for a bit, the search
+       * value should be reset similar to how a
+       * <select> behaves. So typing "34", waiting,
+       * then typing "5" should select "05".
+       */
+      if (singleColumnSearchTimeout) {
+        clearTimeout(singleColumnSearchTimeout);
+      }
+      this.singleColumnSearchTimeout = setTimeout(() => {
+        inputEl.value = '';
+        this.singleColumnSearchTimeout = undefined;
+      }, 1000);
+      /**
+       * For values that are longer than 2 digits long
+       * we should shift the value over 1 character
+       * to the left. So typing "456" would result in "56".
+       * TODO: If we want to support more than just
+       * time entry, we should update this value to be
+       * the max length of all of the picker items.
+       */
+      if (inputEl.value.length >= 3) {
+        const startIndex = inputEl.value.length - 2;
+        const newString = inputEl.value.substring(startIndex);
+        inputEl.value = newString;
+        this.selectSingleColumn();
+        return;
+      }
+      /**
+       * Checking the value of the input gets priority
+       * first. For example, if the value of the input
+       * is "1" and we entered "2", then the complete value
+       * is "12" and we should select hour 12.
+       *
+       * Regex removes any leading zeros from values like "02".
+       */
+      const findItemFromCompleteValue = values.find(({ text }) => text.replace(/^0+/, '') === inputEl.value);
+      if (findItemFromCompleteValue) {
+        inputModeColumn.setValue(findItemFromCompleteValue.value);
+        return;
+      }
+      /**
+       * If we typed "56" to get minute 56, then typed "7",
+       * we should select "07" as "567" is not a valid minute.
+       */
+      if (inputEl.value.length === 2) {
+        const changedCharacter = inputEl.value.substring(inputEl.value.length - 1);
+        inputEl.value = changedCharacter;
+        this.selectSingleColumn();
+      }
+    };
+    /**
+     * Searches a list of column items for a particular
+     * value. This is currently used for numeric values.
+     * The zeroBehavior can be set to account for leading
+     * or trailing zeros when looking at the item text.
+     */
+    this.searchColumn = (colEl, value, zeroBehavior = 'start') => {
+      const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
+      const item = colEl.items.find(({ text, disabled }) => disabled !== true && text.replace(behavior, '') === value);
+      if (item) {
+        colEl.setValue(item.value);
+      }
+    };
+    this.selectMultiColumn = () => {
+      const { inputEl, el } = this;
+      if (!inputEl) {
+        return;
+      }
+      const numericPickers = Array.from(el.querySelectorAll('ion-picker-column-internal')).filter((col) => col.numericInput);
+      const firstColumn = numericPickers[0];
+      const lastColumn = numericPickers[1];
+      let value = inputEl.value;
+      let minuteValue;
+      switch (value.length) {
+        case 1:
+          this.searchColumn(firstColumn, value);
+          break;
+        case 2:
+          /**
+           * If the first character is `0` or `1` it is
+           * possible that users are trying to type `09`
+           * or `11` into the hour field, so we should look
+           * at that first.
+           */
+          const firstCharacter = inputEl.value.substring(0, 1);
+          value = firstCharacter === '0' || firstCharacter === '1' ? inputEl.value : firstCharacter;
+          this.searchColumn(firstColumn, value);
+          /**
+           * If only checked the first value,
+           * we can check the second value
+           * for a match in the minutes column
+           */
+          if (value.length === 1) {
+            minuteValue = inputEl.value.substring(inputEl.value.length - 1);
+            this.searchColumn(lastColumn, minuteValue, 'end');
+          }
+          break;
+        case 3:
+          /**
+           * If the first character is `0` or `1` it is
+           * possible that users are trying to type `09`
+           * or `11` into the hour field, so we should look
+           * at that first.
+           */
+          const firstCharacterAgain = inputEl.value.substring(0, 1);
+          value =
+            firstCharacterAgain === '0' || firstCharacterAgain === '1'
+              ? inputEl.value.substring(0, 2)
+              : firstCharacterAgain;
+          this.searchColumn(firstColumn, value);
+          /**
+           * If only checked the first value,
+           * we can check the second value
+           * for a match in the minutes column
+           */
+          minuteValue = value.length === 1 ? inputEl.value.substring(1) : inputEl.value.substring(2);
+          this.searchColumn(lastColumn, minuteValue, 'end');
+          break;
+        case 4:
+          /**
+           * If the first character is `0` or `1` it is
+           * possible that users are trying to type `09`
+           * or `11` into the hour field, so we should look
+           * at that first.
+           */
+          const firstCharacterAgainAgain = inputEl.value.substring(0, 1);
+          value =
+            firstCharacterAgainAgain === '0' || firstCharacterAgainAgain === '1'
+              ? inputEl.value.substring(0, 2)
+              : firstCharacterAgainAgain;
+          this.searchColumn(firstColumn, value);
+          /**
+           * If only checked the first value,
+           * we can check the second value
+           * for a match in the minutes column
+           */
+          const minuteValueAgain = value.length === 1
+            ? inputEl.value.substring(1, inputEl.value.length)
+            : inputEl.value.substring(2, inputEl.value.length);
+          this.searchColumn(lastColumn, minuteValueAgain, 'end');
+          break;
+        default:
+          const startIndex = inputEl.value.length - 4;
+          const newString = inputEl.value.substring(startIndex);
+          inputEl.value = newString;
+          this.selectMultiColumn();
+          break;
+      }
+    };
+    /**
+     * Searches the value of the active column
+     * to determine which value users are trying
+     * to select
+     */
+    this.onInputChange = () => {
+      const { useInputMode, inputEl, inputModeColumn } = this;
+      if (!useInputMode || !inputEl) {
+        return;
+      }
+      if (inputModeColumn) {
+        this.selectSingleColumn();
+      }
+      else {
+        this.selectMultiColumn();
+      }
+    };
+    /**
+     * Emit ionInputModeChange. Picker columns
+     * listen for this event to determine whether
+     * or not their column is "active" for text input.
+     */
+    this.emitInputModeChange = () => {
+      const { useInputMode, inputModeColumn } = this;
+      this.ionInputModeChange.emit({
+        useInputMode,
+        inputModeColumn,
+      });
+    };
+  }
+  componentWillLoad() {
+    helpers.getElementRoot(this.el).addEventListener('focusin', this.onFocusIn);
+    helpers.getElementRoot(this.el).addEventListener('focusout', this.onFocusOut);
+  }
+  render() {
+    return (index.h(index.Host, { onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, index.h("input", { "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), index.h("div", { class: "picker-before" }), index.h("div", { class: "picker-after" }), index.h("div", { class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+};
+PickerInternal.style = {
+  ios: pickerInternalIosCss,
+  md: pickerInternalMdCss
+};
+
+const toggleIosCss = ":host{box-sizing:content-box !important;display:inline-block;position:relative;outline:none;contain:content;cursor:pointer;touch-action:none;user-select:none;z-index:2}:host(.ion-focused) input{border:2px solid #5e9ed6}:host(.toggle-disabled){pointer-events:none}label{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;appearance:none;outline:none;display:flex;align-items:center;opacity:0;pointer-events:none}[dir=rtl] label,:host-context([dir=rtl]) label{left:unset;right:unset;right:0}label::-moz-focus-inner{border:0}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.toggle-icon-wrapper{display:flex;position:relative;align-items:center;width:100%;height:100%;transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--background);pointer-events:none;overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--background-checked)}.toggle-inner{left:var(--handle-spacing);border-radius:var(--handle-border-radius);position:absolute;width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);transition:var(--handle-transition);background:var(--handle-background);box-shadow:var(--handle-box-shadow);contain:strict}[dir=rtl] .toggle-inner,:host-context([dir=rtl]) .toggle-inner{left:unset;right:unset;right:var(--handle-spacing)}:host(.toggle-checked) .toggle-icon-wrapper{transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host-context([dir=rtl]):host(.toggle-checked) .toggle-icon-wrapper,:host-context([dir=rtl]).toggle-checked .toggle-icon-wrapper{transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);background:var(--handle-background-checked)}:host-context([dir=rtl]):host(.toggle-checked) .toggle-inner,:host-context([dir=rtl]).toggle-checked .toggle-inner{transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.088);--background-checked:var(--ion-color-primary, #3880ff);--border-radius:16px;--handle-background:#ffffff;--handle-background-checked:#ffffff;--handle-border-radius:25.5px;--handle-box-shadow:0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1);--handle-height:calc(32px - (2px * 2));--handle-max-height:calc(100% - var(--handle-spacing) * 2);--handle-width:calc(32px - (2px * 2));--handle-spacing:2px;--handle-transition:transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms;width:51px;height:32px;contain:strict;overflow:hidden}:host(.ion-color.toggle-checked) .toggle-icon{background:var(--ion-color-base)}:host(.toggle-activated) .toggle-switch-icon{opacity:0}.toggle-icon{transform:translate3d(0, 0, 0);transition:background-color 300ms}.toggle-inner{will-change:transform}.toggle-switch-icon{position:absolute;top:50%;width:11px;height:11px;transform:translateY(-50%);transition:opacity 300ms, color 300ms}.toggle-switch-icon{right:6px;position:absolute;color:var(--ion-color-dark)}[dir=rtl] .toggle-switch-icon,:host-context([dir=rtl]) .toggle-switch-icon{right:initial;left:6px;}:host(.toggle-checked) .toggle-switch-icon.toggle-switch-icon-checked{color:var(--ion-color-contrast, #fff)}:host(.toggle-checked) .toggle-switch-icon:not(.toggle-switch-icon-checked){opacity:0}.toggle-switch-icon-checked{right:initial;left:4px;position:absolute;width:15px;height:15px;transform:translateY(-50%) rotate(90deg)}[dir=rtl] .toggle-switch-icon-checked,:host-context([dir=rtl]) .toggle-switch-icon-checked{right:4px}:host(.toggle-activated) .toggle-icon::before,:host(.toggle-checked) .toggle-icon::before{transform:scale3d(0, 0, 0)}:host(.toggle-activated.toggle-checked) .toggle-inner::before{transform:scale3d(0, 0, 0)}:host(.toggle-activated) .toggle-inner{width:calc(var(--handle-width) + 6px)}:host(.toggle-activated.toggle-checked) .toggle-icon-wrapper{transform:translate3d(calc(100% - var(--handle-width) - 6px), 0, 0)}:host-context([dir=rtl]):host(.toggle-activated.toggle-checked) .toggle-icon-wrapper,:host-context([dir=rtl]).toggle-activated.toggle-checked .toggle-icon-wrapper{transform:translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0)}:host(.toggle-disabled){opacity:0.3}:host(.in-item[slot]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:20px;padding-right:10px;padding-top:6px;padding-bottom:5px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item[slot]){padding-left:unset;padding-right:unset;-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:10px;padding-inline-end:10px}}:host(.in-item[slot=start]){padding-left:0;padding-right:16px;padding-top:6px;padding-bottom:5px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item[slot=start]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:16px;padding-inline-end:16px}}";
+
+const toggleMdCss = ":host{box-sizing:content-box !important;display:inline-block;position:relative;outline:none;contain:content;cursor:pointer;touch-action:none;user-select:none;z-index:2}:host(.ion-focused) input{border:2px solid #5e9ed6}:host(.toggle-disabled){pointer-events:none}label{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;appearance:none;outline:none;display:flex;align-items:center;opacity:0;pointer-events:none}[dir=rtl] label,:host-context([dir=rtl]) label{left:unset;right:unset;right:0}label::-moz-focus-inner{border:0}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.toggle-icon-wrapper{display:flex;position:relative;align-items:center;width:100%;height:100%;transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--background);pointer-events:none;overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--background-checked)}.toggle-inner{left:var(--handle-spacing);border-radius:var(--handle-border-radius);position:absolute;width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);transition:var(--handle-transition);background:var(--handle-background);box-shadow:var(--handle-box-shadow);contain:strict}[dir=rtl] .toggle-inner,:host-context([dir=rtl]) .toggle-inner{left:unset;right:unset;right:var(--handle-spacing)}:host(.toggle-checked) .toggle-icon-wrapper{transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host-context([dir=rtl]):host(.toggle-checked) .toggle-icon-wrapper,:host-context([dir=rtl]).toggle-checked .toggle-icon-wrapper{transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);background:var(--handle-background-checked)}:host-context([dir=rtl]):host(.toggle-checked) .toggle-inner,:host-context([dir=rtl]).toggle-checked .toggle-inner{transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39);--background-checked:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5);--border-radius:14px;--handle-background:#ffffff;--handle-background-checked:var(--ion-color-primary, #3880ff);--handle-border-radius:50%;--handle-box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);--handle-width:20px;--handle-height:20px;--handle-max-height:calc(100% + 6px);--handle-spacing:0;--handle-transition:transform 160ms cubic-bezier(0.4, 0, 0.2, 1), background-color 160ms cubic-bezier(0.4, 0, 0.2, 1);padding-left:12px;padding-right:12px;padding-top:12px;padding-bottom:12px;width:36px;height:14px;contain:strict}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}:host(.ion-color.toggle-checked) .toggle-icon{background:rgba(var(--ion-color-base-rgb), 0.5)}:host(.ion-color.toggle-checked) .toggle-inner{background:var(--ion-color-base)}:host(.toggle-checked) .toggle-inner{color:var(--ion-color-contrast, #fff)}.toggle-icon{transition:background-color 160ms}.toggle-inner{will-change:background-color, transform;display:flex;align-items:center;justify-content:center;color:#000}.toggle-inner .toggle-switch-icon{padding-left:1px;padding-right:1px;padding-top:1px;padding-bottom:1px;width:100%;height:100%}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toggle-inner .toggle-switch-icon{padding-left:unset;padding-right:unset;-webkit-padding-start:1px;padding-inline-start:1px;-webkit-padding-end:1px;padding-inline-end:1px}}:host(.toggle-disabled){opacity:0.3}:host(.in-item[slot]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:16px;padding-right:0;padding-top:12px;padding-bottom:12px;cursor:pointer}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item[slot]){padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:0;padding-inline-end:0}}:host(.in-item[slot=start]){padding-left:2px;padding-right:18px;padding-top:12px;padding-bottom:12px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item[slot=start]){padding-left:unset;padding-right:unset;-webkit-padding-start:2px;padding-inline-start:2px;-webkit-padding-end:18px;padding-inline-end:18px}}";
+
+const Toggle = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    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.inputId = `ion-tg-${toggleIds++}`;
+    this.lastDrag = 0;
+    this.activated = false;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    this.name = this.inputId;
+    /**
+     * If `true`, the toggle is selected.
+     */
+    this.checked = false;
+    /**
+     * If `true`, the user cannot interact with the toggle.
+     */
+    this.disabled = false;
+    /**
+     * The value of the toggle does not mean if it's checked or not, use the `checked`
+     * property for that.
+     *
+     * The value of a toggle is analogous to the value of a `<input type="checkbox">`,
+     * it's only used when the toggle participates in a native `<form>`.
+     */
+    this.value = 'on';
+    /**
+     * Enables the on/off accessibility switch labels within the toggle.
+     */
+    this.enableOnOffLabels = undefined;
+    this.onClick = (ev) => {
+      ev.preventDefault();
+      if (this.lastDrag + 300 < Date.now()) {
+        this.checked = !this.checked;
+      }
+    };
+    this.onFocus = () => {
+      this.ionFocus.emit();
+    };
+    this.onBlur = () => {
+      this.ionBlur.emit();
+    };
+    this.getSwitchLabelIcon = (mode, checked) => {
+      if (mode === 'md') {
+        return checked ? index$2.checkmarkOutline : index$2.removeOutline;
+      }
+      return checked ? index$2.removeOutline : index$2.ellipseOutline;
+    };
+  }
+  checkedChanged(isChecked) {
+    this.ionChange.emit({
+      checked: isChecked,
+      value: this.value,
+    });
+  }
+  disabledChanged() {
+    this.emitStyle();
+    if (this.gesture) {
+      this.gesture.enable(!this.disabled);
+    }
+  }
+  async connectedCallback() {
+    this.gesture = (await Promise.resolve().then(function () { return require('./index-12082cba.js'); })).createGesture({
+      el: this.el,
+      gestureName: 'toggle',
+      gesturePriority: 100,
+      threshold: 5,
+      passive: false,
+      onStart: () => this.onStart(),
+      onMove: (ev) => this.onMove(ev),
+      onEnd: (ev) => this.onEnd(ev),
+    });
+    this.disabledChanged();
+  }
+  disconnectedCallback() {
+    if (this.gesture) {
+      this.gesture.destroy();
+      this.gesture = undefined;
+    }
+  }
+  componentWillLoad() {
+    this.emitStyle();
+  }
+  emitStyle() {
+    this.ionStyle.emit({
+      'interactive-disabled': this.disabled,
+    });
+  }
+  onStart() {
+    this.activated = true;
+    // touch-action does not work in iOS
+    this.setFocus();
+  }
+  onMove(detail) {
+    if (shouldToggle(dir.isRTL(this.el), this.checked, detail.deltaX, -10)) {
+      this.checked = !this.checked;
+      haptic.hapticSelection();
+    }
+  }
+  onEnd(ev) {
+    this.activated = false;
+    this.lastDrag = Date.now();
+    ev.event.preventDefault();
+    ev.event.stopImmediatePropagation();
+  }
+  getValue() {
+    return this.value || '';
+  }
+  setFocus() {
+    if (this.focusEl) {
+      this.focusEl.focus();
+    }
+  }
+  renderOnOffSwitchLabels(mode, checked) {
+    const icon = this.getSwitchLabelIcon(mode, checked);
+    return (index.h("ion-icon", { class: {
+        'toggle-switch-icon': true,
+        'toggle-switch-icon-checked': checked,
+      }, icon: icon }));
+  }
+  render() {
+    const { activated, color, checked, disabled, el, inputId, name, enableOnOffLabels } = this;
+    const mode = ionicGlobal.getIonMode(this);
+    const { label, labelId, labelText } = helpers.getAriaLabel(el, inputId);
+    const value = this.getValue();
+    helpers.renderHiddenInput(true, el, name, checked ? value : '', disabled);
+    return (index.h(index.Host, { onClick: this.onClick, "aria-labelledby": label ? labelId : null, "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, role: "switch", class: theme.createColorClasses(color, {
+        [mode]: true,
+        'in-item': theme.hostContext('ion-item', el),
+        'toggle-activated': activated,
+        'toggle-checked': checked,
+        'toggle-disabled': disabled,
+        interactive: true,
+      }) }, index.h("div", { class: "toggle-icon", part: "track" }, enableOnOffLabels &&
+      mode === 'ios' && [this.renderOnOffSwitchLabels(mode, true), this.renderOnOffSwitchLabels(mode, false)], index.h("div", { class: "toggle-icon-wrapper" }, index.h("div", { class: "toggle-inner", part: "handle" }, enableOnOffLabels && mode === 'md' && this.renderOnOffSwitchLabels(mode, checked)))), index.h("label", { htmlFor: inputId }, labelText), index.h("input", { type: "checkbox", role: "switch", "aria-checked": `${checked}`, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) })));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "checked": ["checkedChanged"],
+    "disabled": ["disabledChanged"]
+  }; }
+};
+const shouldToggle = (rtl, checked, deltaX, margin) => {
+  if (checked) {
+    return (!rtl && margin > deltaX) || (rtl && -margin < deltaX);
+  }
+  else {
+    return (!rtl && -margin < deltaX) || (rtl && margin > deltaX);
+  }
+};
+let toggleIds = 0;
+Toggle.style = {
+  ios: toggleIosCss,
+  md: toggleMdCss
+};
+
+exports.ion_datetime = Datetime;
+exports.ion_picker_column_internal = PickerColumnInternal;
+exports.ion_picker_internal = PickerInternal;
+exports.ion_toggle = Toggle;