@ionic/core 8.3.2-dev.11728314937.130218e6 → 8.3.2-dev.11729014526.1ab61c12

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

@@ -5,23 +5,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const config = require('./config-1349d5b4.js');
+const index = require('./index-73f75efb.js');
 const caretLeft = require('./caret-left-2bb66970.js');
 const caretRight = require('./caret-right-88e03970.js');
-const focusVisible = require('./focus-visible-9aa87fa3.js');
-const helpers = require('./helpers-e75eb909.js');
-const ionicGlobal = require('./ionic-global-3647b9f5.js');
+const focusVisible = require('./focus-visible-7a0ce04f.js');
+const helpers = require('./helpers-afaa9001.js');
+const ionicGlobal = require('./ionic-global-5df85d73.js');
 const dir = require('./dir-94c21456.js');
 const theme = require('./theme-d1c573d2.js');
-const index = require('./index-073c7cdc.js');
-const data = require('./data-cad5d489.js');
+const index$1 = require('./index-073c7cdc.js');
+const data = require('./data-b3a1a686.js');
 const lockController = require('./lock-controller-6585a42a.js');
-const overlays = require('./overlays-22320753.js');
-const animation = require('./animation-232e0c8f.js');
-const haptic = require('./haptic-f0cad9a6.js');
-require('./framework-delegate-cf116b1d.js');
+const overlays = require('./overlays-faf6f843.js');
+const animation = require('./animation-b4fdf128.js');
+const haptic = require('./haptic-f6b37aa3.js');
+require('./index-c8d52405.js');
+require('./hardware-back-button-d37054f2.js');
+require('./framework-delegate-55f5683a.js');
 require('./gesture-controller-9436f482.js');
-require('./capacitor-806e7fee.js');
+require('./capacitor-c04564bf.js');
 
 const isYearDisabled = (refYear, minParts, maxParts) => {
     if (minParts && minParts.year > refYear) {
@@ -243,14 +245,14 @@ const IonDatetimeMdStyle0 = datetimeMdCss;
 
 const Datetime = class {
     constructor(hostRef) {
-        config.registerInstance(this, hostRef);
-        this.ionCancel = config.createEvent(this, "ionCancel", 7);
-        this.ionChange = config.createEvent(this, "ionChange", 7);
-        this.ionValueChange = config.createEvent(this, "ionValueChange", 7);
-        this.ionFocus = config.createEvent(this, "ionFocus", 7);
-        this.ionBlur = config.createEvent(this, "ionBlur", 7);
-        this.ionStyle = config.createEvent(this, "ionStyle", 7);
-        this.ionRender = config.createEvent(this, "ionRender", 7);
+        index.registerInstance(this, hostRef);
+        this.ionCancel = index.createEvent(this, "ionCancel", 7);
+        this.ionChange = index.createEvent(this, "ionChange", 7);
+        this.ionValueChange = index.createEvent(this, "ionValueChange", 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++}`;
         this.prevPresentation = null;
         this.warnIfIncorrectValueUsage = () => {
@@ -513,7 +515,7 @@ const Datetime = class {
              * scrollIntoView() will scroll entire page
              * if element is not in viewport. Use scrollLeft instead.
              */
-            config.writeTask(() => {
+            index.writeTask(() => {
                 calendarBodyRef.scrollLeft = startMonth.clientWidth * (dir.isRTL(this.el) ? -1 : 1);
                 const getChangedMonth = (parts) => {
                     const box = calendarBodyRef.getBoundingClientRect();
@@ -605,7 +607,7 @@ const Datetime = class {
                      * but older/slower device may have a flicker
                      * if we did not do this.
                      */
-                    config.writeTask(() => {
+                    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');
@@ -1030,7 +1032,7 @@ const Datetime = class {
              * is that the content will pop into view a frame after. Maybe there
              * is a better way to handle this?
              */
-            config.writeTask(() => {
+            index.writeTask(() => {
                 this.el.classList.add('datetime-ready');
             });
         };
@@ -1063,7 +1065,7 @@ const Datetime = class {
              * As a result, the wrong month will be shown.
              */
             this.showMonthAndYear = false;
-            config.writeTask(() => {
+            index.writeTask(() => {
                 this.el.classList.remove('datetime-ready');
             });
         };
@@ -1219,10 +1221,10 @@ const Datetime = class {
          * OK - Dismisses the datetime and
          * updates the `value` prop.
          */
-        return (config.h("div", { class: "datetime-footer" }, config.h("div", { class: "datetime-buttons" }, config.h("div", { class: {
+        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,
-            } }, config.h("slot", { name: "buttons" }, config.h("ion-buttons", null, showDefaultButtons && (config.h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true), disabled: isButtonDisabled }, this.cancelText)), config.h("div", { class: "datetime-action-buttons-container" }, showClearButton && (config.h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick(), disabled: isButtonDisabled }, this.clearText)), showDefaultButtons && (config.h("ion-button", { id: "confirm-button", color: this.color, onClick: () => this.confirm(true), disabled: isButtonDisabled }, this.doneText)))))))));
+            } }, 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), disabled: isButtonDisabled }, this.cancelText)), index.h("div", { class: "datetime-action-buttons-container" }, showClearButton && (index.h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick(), disabled: isButtonDisabled }, this.clearText)), showDefaultButtons && (index.h("ion-button", { id: "confirm-button", color: this.color, onClick: () => this.confirm(true), disabled: isButtonDisabled }, this.doneText)))))))));
     }
     /**
      * Wheel picker render methods
@@ -1240,7 +1242,7 @@ const Datetime = class {
         const renderArray = forcePresentation === 'time-date'
             ? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
             : [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
-        return config.h("ion-picker", null, renderArray);
+        return index.h("ion-picker", null, renderArray);
     }
     renderDatePickerColumns(forcePresentation) {
         return forcePresentation === 'date-time' || forcePresentation === 'time-date'
@@ -1299,13 +1301,13 @@ const Datetime = class {
         const todayString = workingParts.day !== null
             ? `${workingParts.year}-${workingParts.month}-${workingParts.day}`
             : `${defaultParts.year}-${defaultParts.month}-${defaultParts.day}`;
-        return (config.h("ion-picker-column", { "aria-label": "Select a date", class: "date-column", color: this.color, disabled: disabled, value: todayString, onIonChange: (ev) => {
+        return (index.h("ion-picker-column", { "aria-label": "Select a date", class: "date-column", color: this.color, disabled: disabled, value: todayString, onIonChange: (ev) => {
                 const { value } = ev.detail;
                 const findPart = parts.find(({ month, day, year }) => value === `${year}-${month}-${day}`);
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), findPart));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), findPart));
                 ev.stopPropagation();
-            } }, items.map((item) => (config.h("ion-picker-column-option", { part: item.value === todayString ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: item.value, disabled: item.disabled, value: item.value }, item.text)))));
+            } }, items.map((item) => (index.h("ion-picker-column-option", { part: item.value === todayString ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: item.value, disabled: item.disabled, value: item.value }, item.text)))));
     }
     renderIndividualDatePickerColumns(forcePresentation) {
         const { workingParts, isDateEnabled } = this;
@@ -1374,11 +1376,11 @@ const Datetime = class {
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
         const pickerColumnValue = (_a = (workingParts.day !== null ? workingParts.day : this.defaultParts.day)) !== null && _a !== void 0 ? _a : undefined;
-        return (config.h("ion-picker-column", { "aria-label": "Select a day", class: "day-column", color: this.color, disabled: disabled, value: pickerColumnValue, onIonChange: (ev) => {
+        return (index.h("ion-picker-column", { "aria-label": "Select a day", class: "day-column", color: this.color, disabled: disabled, value: pickerColumnValue, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { day: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { day: ev.detail.value }));
                 ev.stopPropagation();
-            } }, days.map((day) => (config.h("ion-picker-column-option", { part: day.value === pickerColumnValue ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: day.value, disabled: day.disabled, value: day.value }, day.text)))));
+            } }, days.map((day) => (index.h("ion-picker-column-option", { part: day.value === pickerColumnValue ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: day.value, disabled: day.disabled, value: day.value }, day.text)))));
     }
     renderMonthPickerColumn(months) {
         if (months.length === 0) {
@@ -1386,11 +1388,11 @@ const Datetime = class {
         }
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
-        return (config.h("ion-picker-column", { "aria-label": "Select a month", class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
+        return (index.h("ion-picker-column", { "aria-label": "Select a month", class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { month: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value }));
                 ev.stopPropagation();
-            } }, months.map((month) => (config.h("ion-picker-column-option", { part: month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: month.value, disabled: month.disabled, value: month.value }, month.text)))));
+            } }, months.map((month) => (index.h("ion-picker-column-option", { part: month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: month.value, disabled: month.disabled, value: month.value }, month.text)))));
     }
     renderYearPickerColumn(years) {
         if (years.length === 0) {
@@ -1398,11 +1400,11 @@ const Datetime = class {
         }
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
-        return (config.h("ion-picker-column", { "aria-label": "Select a year", class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
+        return (index.h("ion-picker-column", { "aria-label": "Select a year", class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { year: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value }));
                 ev.stopPropagation();
-            } }, years.map((year) => (config.h("ion-picker-column-option", { part: year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: year.value, disabled: year.disabled, value: year.value }, year.text)))));
+            } }, years.map((year) => (index.h("ion-picker-column-option", { part: year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: year.value, disabled: year.disabled, value: year.value }, year.text)))));
     }
     renderTimePickerColumns(forcePresentation) {
         if (['date', 'month', 'month-year', 'year'].includes(forcePresentation)) {
@@ -1431,22 +1433,22 @@ const Datetime = class {
         if (hoursData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
-        return (config.h("ion-picker-column", { "aria-label": "Select an hour", color: this.color, disabled: disabled, value: activePart.hour, numericInput: true, onIonChange: (ev) => {
+        return (index.h("ion-picker-column", { "aria-label": "Select an hour", color: this.color, disabled: disabled, value: activePart.hour, numericInput: true, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { hour: ev.detail.value }));
                 ev.stopPropagation();
-            } }, hoursData.map((hour) => (config.h("ion-picker-column-option", { part: hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: hour.value, disabled: hour.disabled, value: hour.value }, hour.text)))));
+            } }, hoursData.map((hour) => (index.h("ion-picker-column-option", { part: hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: hour.value, disabled: hour.disabled, value: hour.value }, hour.text)))));
     }
     renderMinutePickerColumn(minutesData) {
         const { disabled, workingParts } = this;
         if (minutesData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
-        return (config.h("ion-picker-column", { "aria-label": "Select a minute", color: this.color, disabled: disabled, value: activePart.minute, numericInput: true, onIonChange: (ev) => {
+        return (index.h("ion-picker-column", { "aria-label": "Select a minute", color: this.color, disabled: disabled, value: activePart.minute, numericInput: true, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { minute: ev.detail.value }));
                 ev.stopPropagation();
-            } }, minutesData.map((minute) => (config.h("ion-picker-column-option", { part: minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: minute.value, disabled: minute.disabled, value: minute.value }, minute.text)))));
+            } }, minutesData.map((minute) => (index.h("ion-picker-column-option", { part: minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: minute.value, disabled: minute.disabled, value: minute.value }, minute.text)))));
     }
     renderDayPeriodPickerColumn(dayPeriodData) {
         const { disabled, workingParts } = this;
@@ -1455,18 +1457,18 @@ const Datetime = class {
         }
         const activePart = this.getActivePartsWithFallback();
         const isDayPeriodRTL = data.isLocaleDayPeriodRTL(this.locale);
-        return (config.h("ion-picker-column", { "aria-label": "Select a day period", style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
+        return (index.h("ion-picker-column", { "aria-label": "Select a day period", style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
                 const hour = data.calculateHourFromAMPM(workingParts, ev.detail.value);
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { ampm: ev.detail.value, hour }));
                 ev.stopPropagation();
-            } }, dayPeriodData.map((dayPeriod) => (config.h("ion-picker-column-option", { part: dayPeriod.value === activePart.ampm ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: dayPeriod.value, disabled: dayPeriod.disabled, value: dayPeriod.value }, dayPeriod.text)))));
+            } }, dayPeriodData.map((dayPeriod) => (index.h("ion-picker-column-option", { part: dayPeriod.value === activePart.ampm ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: dayPeriod.value, disabled: dayPeriod.disabled, value: dayPeriod.value }, dayPeriod.text)))));
     }
     renderWheelView(forcePresentation) {
         const { locale } = this;
         const showMonthFirst = data.isMonthFirstLocale(locale);
         const columnOrder = showMonthFirst ? 'month-first' : 'year-first';
-        return (config.h("div", { class: {
+        return (index.h("div", { class: {
                 [`wheel-order-${columnOrder}`]: true,
             } }, this.renderWheelPicker(forcePresentation)));
     }
@@ -1479,12 +1481,12 @@ const Datetime = class {
         const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
         // don't use the inheritAttributes util because it removes dir from the host, and we still need that
         const hostDir = this.el.getAttribute('dir') || undefined;
-        return (config.h("div", { class: "calendar-header" }, config.h("div", { class: "calendar-action-buttons" }, config.h("div", { class: "calendar-month-year" }, config.h("button", { class: {
+        return (index.h("div", { class: "calendar-header" }, index.h("div", { class: "calendar-action-buttons" }, index.h("div", { class: "calendar-month-year" }, index.h("button", { class: {
                 'calendar-month-year-toggle': true,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, config.h("span", { id: "toggle-wrapper" }, data.getMonthAndYear(this.locale, this.workingParts), theme !== 'ionic' && (config.h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? datetimeExpandedIcon : datetimeCollapsedIcon, lazy: false, flipRtl: true }))), theme === 'md' && config.h("ion-ripple-effect", null))), config.h("div", { class: "calendar-next-prev" }, config.h("ion-buttons", null, config.h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, config.h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: datetimePreviousIcon, lazy: false, flipRtl: true })), config.h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, config.h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: datetimeNextIcon, lazy: false, flipRtl: true }))))), config.h("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, data.getDaysOfWeek(this.locale, theme, this.firstDayOfWeek % 7).map((d) => {
-            return config.h("div", { class: "day-of-week" }, d);
+            }, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, index.h("span", { id: "toggle-wrapper" }, data.getMonthAndYear(this.locale, this.workingParts), theme !== 'ionic' && (index.h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? datetimeExpandedIcon : datetimeCollapsedIcon, lazy: false, flipRtl: true }))), theme === 'md' && index.h("ion-ripple-effect", null))), 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", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: datetimePreviousIcon, lazy: false, flipRtl: true })), index.h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, index.h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: datetimeNextIcon, lazy: false, flipRtl: true }))))), index.h("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, data.getDaysOfWeek(this.locale, theme, this.firstDayOfWeek % 7).map((d) => {
+            return index.h("div", { class: "day-of-week" }, d);
         }))));
     }
     renderMonth(month, year) {
@@ -1510,11 +1512,11 @@ const Datetime = class {
         // can free-scroll the calendar.
         const isWorkingMonth = this.workingParts.month === month && this.workingParts.year === year;
         const activePart = this.getActivePartsWithFallback();
-        return (config.h("div", { "aria-hidden": !isWorkingMonth ? 'true' : null, class: {
+        return (index.h("div", { "aria-hidden": !isWorkingMonth ? 'true' : null, class: {
                 'calendar-month': true,
                 // Prevents scroll snap swipe gestures for months outside of the min/max bounds
                 'calendar-month-disabled': !isWorkingMonth && swipeDisabled,
-            } }, config.h("div", { class: "calendar-month-grid" }, data.getDaysOfMonth(month, year, this.firstDayOfWeek % 7).map((dateObject, index) => {
+            } }, index.h("div", { class: "calendar-month-grid" }, data.getDaysOfMonth(month, year, this.firstDayOfWeek % 7).map((dateObject, index$1) => {
             const { day, dayOfWeek } = dateObject;
             const { el, highlightedDates, isDateEnabled, multiple } = this;
             const referenceParts = { month, day, year };
@@ -1556,7 +1558,7 @@ const Datetime = class {
             if (!isCalendarPadding) {
                 dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}${isCalDayDisabled ? ' disabled' : ''}`;
             }
-            return (config.h("div", { class: "calendar-day-wrapper" }, config.h("button", {
+            return (index.h("div", { class: "calendar-day-wrapper" }, index.h("button", {
                 // We need to use !important for the inline styles here because
                 // otherwise the CSS shadow parts will override these styles.
                 // See https://github.com/WICG/webcomponents/issues/847
@@ -1568,7 +1570,7 @@ const Datetime = class {
                         el.style.setProperty('color', `${dateStyle ? dateStyle.textColor : ''}`, 'important');
                         el.style.setProperty('background-color', `${dateStyle ? dateStyle.backgroundColor : ''}`, 'important');
                     }
-                }, tabindex: "-1", "data-day": day, "data-month": month, "data-year": year, "data-index": index, "data-day-of-week": dayOfWeek, disabled: isButtonDisabled, class: {
+                }, tabindex: "-1", "data-day": day, "data-month": month, "data-year": year, "data-index": index$1, "data-day-of-week": dayOfWeek, disabled: isButtonDisabled, class: {
                     'calendar-day-padding': isCalendarPadding,
                     'calendar-day': true,
                     'calendar-day-active': isActive,
@@ -1599,27 +1601,27 @@ const Datetime = class {
         }))));
     }
     renderCalendarBody() {
-        return (config.h("div", { class: "calendar-body ion-focusable", ref: (el) => (this.calendarBodyRef = el), tabindex: "0" }, data.generateMonths(this.workingParts, this.forceRenderDate).map(({ month, year }) => {
+        return (index.h("div", { class: "calendar-body ion-focusable", ref: (el) => (this.calendarBodyRef = el), tabindex: "0" }, data.generateMonths(this.workingParts, this.forceRenderDate).map(({ month, year }) => {
             return this.renderMonth(month, year);
         })));
     }
     renderCalendar(theme) {
-        return (config.h("div", { class: "datetime-calendar", key: "datetime-calendar" }, this.renderCalendarHeader(theme), this.renderCalendarBody()));
+        return (index.h("div", { class: "datetime-calendar", key: "datetime-calendar" }, this.renderCalendarHeader(theme), this.renderCalendarBody()));
     }
     renderTimeLabel() {
         const hasSlottedTimeLabel = this.el.querySelector('[slot="time-label"]') !== null;
         if (!hasSlottedTimeLabel && !this.showDefaultTimeLabel) {
             return;
         }
-        return config.h("slot", { name: "time-label" }, "Time");
+        return index.h("slot", { name: "time-label" }, "Time");
     }
     renderTimeOverlay() {
         const { disabled, hourCycle, isTimePopoverOpen, locale, formatOptions } = this;
         const computedHourCycle = data.getHourCycle(locale, hourCycle);
         const activePart = this.getActivePartsWithFallback();
         return [
-            config.h("div", { class: "time-header" }, this.renderTimeLabel()),
-            config.h("button", { class: {
+            index.h("div", { class: "time-header" }, this.renderTimeLabel()),
+            index.h("button", { class: {
                     'time-body': true,
                     'time-body-active': isTimePopoverOpen,
                 }, part: `time-button${isTimePopoverOpen ? ' active' : ''}`, "aria-expanded": "false", "aria-haspopup": "true", disabled: disabled, onClick: async (ev) => {
@@ -1635,7 +1637,7 @@ const Datetime = class {
                         this.isTimePopoverOpen = false;
                     }
                 } }, data.getLocalizedTime(locale, activePart, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time)),
-            config.h("ion-popover", { alignment: "center", translucent: true, overlayIndex: 1, arrow: false, onWillPresent: (ev) => {
+            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
@@ -1683,7 +1685,7 @@ const Datetime = class {
         if (!hasSlottedTitle && !this.showDefaultTitle) {
             return;
         }
-        return (config.h("div", { class: "datetime-header" }, config.h("div", { class: "datetime-title" }, config.h("slot", { name: "title" }, "Select Date")), showExpandedHeader && config.h("div", { class: "datetime-selected-date" }, this.getHeaderSelectedDateText())));
+        return (index.h("div", { class: "datetime-header" }, index.h("div", { class: "datetime-title" }, index.h("slot", { name: "title" }, "Select Date")), showExpandedHeader && index.h("div", { class: "datetime-selected-date" }, this.getHeaderSelectedDateText())));
     }
     /**
      * Render time picker inside of datetime.
@@ -1695,7 +1697,7 @@ const Datetime = class {
     renderTime() {
         const { presentation } = this;
         const timeOnlyPresentation = presentation === 'time';
-        return (config.h("div", { class: "datetime-time" }, timeOnlyPresentation ? this.renderWheelPicker() : this.renderTimeOverlay()));
+        return (index.h("div", { class: "datetime-time" }, timeOnlyPresentation ? this.renderWheelPicker() : this.renderTimeOverlay()));
     }
     /**
      * Renders the month/year picker that is
@@ -1706,7 +1708,7 @@ const Datetime = class {
      * toggle in the calendar header.
      */
     renderCalendarViewMonthYearPicker() {
-        return config.h("div", { class: "datetime-year" }, this.renderWheelView('month-year'));
+        return index.h("div", { class: "datetime-year" }, this.renderWheelView('month-year'));
     }
     /**
      * Render entry point
@@ -1763,14 +1765,14 @@ const Datetime = class {
         // Determine the theme and map to default icons
         const theme = ionicGlobal.getIonTheme(this);
         const defaultIcons = {
-            ios: index.chevronForward,
+            ios: index$1.chevronForward,
             ionic: caretRight.caretRightSvg,
-            md: index.chevronForward,
+            md: index$1.chevronForward,
         };
         // Get the default icon based on the theme, falling back to 'md' icon if necessary
         const defaultIcon = defaultIcons[theme] || defaultIcons.md;
         // Return the configured datetime next icon or the default icon
-        return config.config.get('datetimeNextIcon', defaultIcon);
+        return ionicGlobal.config.get('datetimeNextIcon', defaultIcon);
     }
     /**
      * Get the icon to use for the previous icon.
@@ -1781,14 +1783,14 @@ const Datetime = class {
         // Determine the theme and map to default icons
         const theme = ionicGlobal.getIonTheme(this);
         const defaultIcons = {
-            ios: index.chevronBack,
+            ios: index$1.chevronBack,
             ionic: caretLeft.caretLeftSvg,
-            md: index.chevronBack,
+            md: index$1.chevronBack,
         };
         // Get the default icon based on the theme, falling back to 'md' icon if necessary
         const defaultIcon = defaultIcons[theme] || defaultIcons.md;
         // Return the configured datetime previous icon or the default icon
-        return config.config.get('datetimePreviousIcon', defaultIcon);
+        return ionicGlobal.config.get('datetimePreviousIcon', defaultIcon);
     }
     /**
      * Get the icon to use for the show month and year icon.
@@ -1799,14 +1801,14 @@ const Datetime = class {
         // Determine the theme and map to default icons
         const theme = ionicGlobal.getIonTheme(this);
         const defaultIcons = {
-            ios: index.chevronForward,
+            ios: index$1.chevronForward,
             ionic: undefined,
-            md: index.caretDownSharp,
+            md: index$1.caretDownSharp,
         };
         // Get the default icon based on the theme, falling back to 'md' icon if necessary
         const defaultIcon = defaultIcons[theme] || defaultIcons.md;
         // Return the configured datetime show month and year icon or the default icon
-        return config.config.get('datetimeCollapsedIcon', defaultIcon);
+        return ionicGlobal.config.get('datetimeCollapsedIcon', defaultIcon);
     }
     /**
      * Get the icon to use for the hide month and year icon.
@@ -1817,14 +1819,14 @@ const Datetime = class {
         // Determine the theme and map to default icons
         const theme = ionicGlobal.getIonTheme(this);
         const defaultIcons = {
-            ios: index.chevronDown,
+            ios: index$1.chevronDown,
             ionic: undefined,
-            md: index.caretUpSharp,
+            md: index$1.caretUpSharp,
         };
         // Get the default icon based on the theme, falling back to 'md' icon if necessary
         const defaultIcon = defaultIcons[theme] || defaultIcons.md;
         // Return the configured datetime hide month and year icon or the default icon
-        return config.config.get('datetimeExpandedIcon', defaultIcon);
+        return ionicGlobal.config.get('datetimeExpandedIcon', defaultIcon);
     }
     render() {
         const { name, value, disabled, el, color, readonly, showMonthAndYear, preferWheel, presentation, size, isGridStyle, } = this;
@@ -1835,7 +1837,7 @@ const Datetime = class {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         helpers.renderHiddenInput(true, el, name, data.formatValue(value), disabled);
-        return (config.h(config.Host, { key: 'a47da1fce2b2cb96dddaeeb8debdad46f0a65d34', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: 'a47da1fce2b2cb96dddaeeb8debdad46f0a65d34', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
                 [theme$1]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1845,9 +1847,9 @@ const Datetime = class {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, config.h("div", { key: '0e0600aabb73693c5f87c98475f1b60f99779581', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(theme$1)));
+            })) }, index.h("div", { key: '0e0600aabb73693c5f87c98475f1b60f99779581', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(theme$1)));
     }
-    get el() { return config.getElement(this); }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "formatOptions": ["formatOptionsChanged"],
         "disabled": ["disabledChanged"],
@@ -1925,15 +1927,15 @@ const IonPickerLegacyMdStyle0 = pickerMdCss;
 
 const Picker = class {
     constructor(hostRef) {
-        config.registerInstance(this, hostRef);
-        this.didPresent = config.createEvent(this, "ionPickerDidPresent", 7);
-        this.willPresent = config.createEvent(this, "ionPickerWillPresent", 7);
-        this.willDismiss = config.createEvent(this, "ionPickerWillDismiss", 7);
-        this.didDismiss = config.createEvent(this, "ionPickerDidDismiss", 7);
-        this.didPresentShorthand = config.createEvent(this, "didPresent", 7);
-        this.willPresentShorthand = config.createEvent(this, "willPresent", 7);
-        this.willDismissShorthand = config.createEvent(this, "willDismiss", 7);
-        this.didDismissShorthand = config.createEvent(this, "didDismiss", 7);
+        index.registerInstance(this, hostRef);
+        this.didPresent = index.createEvent(this, "ionPickerDidPresent", 7);
+        this.willPresent = index.createEvent(this, "ionPickerWillPresent", 7);
+        this.willDismiss = index.createEvent(this, "ionPickerWillDismiss", 7);
+        this.didDismiss = index.createEvent(this, "ionPickerDidDismiss", 7);
+        this.didPresentShorthand = index.createEvent(this, "didPresent", 7);
+        this.willPresentShorthand = index.createEvent(this, "willPresent", 7);
+        this.willDismissShorthand = index.createEvent(this, "willDismiss", 7);
+        this.didDismissShorthand = index.createEvent(this, "didDismiss", 7);
         this.delegateController = overlays.createDelegateController(this);
         this.lockController = lockController.createLockController();
         this.triggerController = overlays.createTriggerController();
@@ -2103,13 +2105,13 @@ const Picker = class {
     render() {
         const { htmlAttributes } = this;
         const theme$1 = ionicGlobal.getIonTheme(this);
-        return (config.h(config.Host, Object.assign({ key: 'a36fccc6cc5adb35016a1b35ebc0da1532e6c48a', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (index.h(index.Host, Object.assign({ key: 'a36fccc6cc5adb35016a1b35ebc0da1532e6c48a', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [theme$1]: true,
                 // Used internally for styling
-                [`picker-${theme$1}`]: true, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), config.h("ion-backdrop", { key: '139410342112f23387e8e80aee19747c7657753e', visible: this.showBackdrop, tappable: this.backdropDismiss }), config.h("div", { key: 'db8b9b6126f0b00fca50ece90a9418aa363f9844', tabindex: "0" }), config.h("div", { key: '60db8680187182b4fa080509fb197c3694204e60', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, config.h("div", { key: '671e1b7d523a3fe83376aaf2d79ed70c712606c6', class: "picker-toolbar" }, this.buttons.map((b) => (config.h("div", { class: buttonWrapperClass(b) }, config.h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), config.h("div", { key: '24d71acd315b352111ca82c0307f9c96275a43b7', class: "picker-columns" }, config.h("div", { key: '763229a27c3a2c01ec0ac92930861ff24b7664ca', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => config.h("ion-picker-legacy-column", { col: c })), config.h("div", { key: '6dc995dbbc70ebc9b491ee87bb93249bda490240', class: "picker-below-highlight" }))), config.h("div", { key: '6a80f957217a8b824779c95133c5e1d2d2dec13e', tabindex: "0" })));
+                [`picker-${theme$1}`]: true, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), index.h("ion-backdrop", { key: '139410342112f23387e8e80aee19747c7657753e', visible: this.showBackdrop, tappable: this.backdropDismiss }), index.h("div", { key: 'db8b9b6126f0b00fca50ece90a9418aa363f9844', tabindex: "0" }), index.h("div", { key: '60db8680187182b4fa080509fb197c3694204e60', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, index.h("div", { key: '671e1b7d523a3fe83376aaf2d79ed70c712606c6', class: "picker-toolbar" }, this.buttons.map((b) => (index.h("div", { class: buttonWrapperClass(b) }, index.h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), index.h("div", { key: '24d71acd315b352111ca82c0307f9c96275a43b7', class: "picker-columns" }, index.h("div", { key: '763229a27c3a2c01ec0ac92930861ff24b7664ca', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => index.h("ion-picker-legacy-column", { col: c })), index.h("div", { key: '6dc995dbbc70ebc9b491ee87bb93249bda490240', class: "picker-below-highlight" }))), index.h("div", { key: '6a80f957217a8b824779c95133c5e1d2d2dec13e', tabindex: "0" })));
     }
-    get el() { return config.getElement(this); }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "isOpen": ["onIsOpenChange"],
         "trigger": ["triggerChanged"]
@@ -2137,8 +2139,8 @@ const IonPickerLegacyColumnMdStyle0 = pickerColumnMdCss;
 
 const PickerColumnCmp = class {
     constructor(hostRef) {
-        config.registerInstance(this, hostRef);
-        this.ionPickerColChange = config.createEvent(this, "ionPickerColChange", 7);
+        index.registerInstance(this, hostRef);
+        this.ionPickerColChange = index.createEvent(this, "ionPickerColChange", 7);
         this.optHeight = 0;
         this.rotateFactor = 0;
         this.scaleFactor = 1;
@@ -2464,11 +2466,11 @@ const PickerColumnCmp = class {
     render() {
         const col = this.col;
         const theme$1 = ionicGlobal.getIonTheme(this);
-        return (config.h(config.Host, { key: 'c27a6cefcbe86c84423d9e3bf07aecb692d0cbc0', class: Object.assign({ [theme$1]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, theme.getClassMap(col.cssClass)), style: {
+        return (index.h(index.Host, { key: 'c27a6cefcbe86c84423d9e3bf07aecb692d0cbc0', class: Object.assign({ [theme$1]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, theme.getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (config.h("div", { key: '46e316911e42570f50e81c16026a784d474a11ce', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), config.h("div", { key: '139092ca616fafdb338bf6018929698f6b6f39b5', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (config.h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (config.h("div", { key: '4343e0f17f3d6951afe7c4e376e38e7a95bedc7d', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (index.h("div", { key: '46e316911e42570f50e81c16026a784d474a11ce', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), index.h("div", { key: '139092ca616fafdb338bf6018929698f6b6f39b5', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index$1) => (index.h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index$1 }, o.text)))), col.suffix && (index.h("div", { key: '4343e0f17f3d6951afe7c4e376e38e7a95bedc7d', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
-    get el() { return config.getElement(this); }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "col": ["colChanged"]
     }; }