@ionic/core 7.5.7-dev.11700601905.13f94170 → 7.5.7-nightly.20231123

package/dist/collection/components/datetime/test/manipulation.spec.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { getPreviousYear, getNextYear, getPreviousMonth, getNextMonth, getPreviousDay, getNextDay, getPreviousWeek, getNextWeek, getEndOfWeek, getStartOfWeek, convert12HourTo24Hour, getInternalHourValue, calculateHourFromAMPM, subtractDays, addDays, validateParts, getClosestValidDate, } from "../utils/manipulation";
+import { getPreviousYear, getNextYear, getPreviousMonth, getNextMonth, getPreviousDay, getNextDay, getPreviousWeek, getNextWeek, getEndOfWeek, getStartOfWeek, convert12HourTo24Hour, getInternalHourValue, calculateHourFromAMPM, subtractDays, addDays, validateParts, } from "../utils/manipulation";
 describe('addDays()', () => {
   it('should correctly add days', () => {
     expect(addDays({
@@ -431,79 +431,3 @@ describe('validateParts()', () => {
     })).toEqual({ month: 1, day: 1, year: 2022, hour: 9, minute: 30 });
   });
 });
-describe('getClosestValidDate()', () => {
-  it('should match a date with only month/day/year', () => {
-    // October 10, 2023
-    const refParts = { month: 10, day: 10, year: 2023 };
-    // April 10, 2021
-    const minParts = { month: 4, day: 10, year: 2021 };
-    // September 14, 2021
-    const maxParts = { month: 9, day: 14, year: 2021 };
-    // September 4, 2021
-    const expected = { month: 9, day: 4, year: 2021, dayOfWeek: undefined };
-    expect(getClosestValidDate({
-      refParts,
-      monthValues: [2, 3, 7, 9, 10],
-      dayValues: [4, 15, 25],
-      yearValues: [2020, 2021, 2023],
-      maxParts,
-      minParts,
-    })).toEqual(expected);
-  });
-  it('should match a date when the reference date is before the min', () => {
-    // April 2, 2020 3:20 PM
-    const refParts = { month: 4, day: 2, year: 2020, hour: 15, minute: 20 };
-    // September 10, 2021 10:10 AM
-    const minParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 10 };
-    // September 14, 2021 10:11 AM
-    const maxParts = { month: 9, day: 14, year: 2021, hour: 10, minute: 11 };
-    // September 11, 2021 11:15 AM
-    const expected = {
-      year: 2021,
-      day: 11,
-      month: 9,
-      hour: 11,
-      minute: 15,
-      ampm: 'am',
-      dayOfWeek: undefined,
-    };
-    expect(getClosestValidDate({
-      refParts,
-      monthValues: [4, 9, 11],
-      dayValues: [11, 12, 13, 14],
-      yearValues: [2020, 2021, 2023],
-      hourValues: [9, 10, 11],
-      minuteValues: [11, 12, 13, 14, 15],
-      maxParts,
-      minParts,
-    })).toEqual(expected);
-  });
-  it('should match a date when the reference date is before the min', () => {
-    // April 2, 2020 3:20 PM
-    const refParts = { month: 4, day: 2, year: 2020, hour: 15, minute: 20 };
-    // September 10, 2021 10:10 AM
-    const minParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 10 };
-    // September 10, 2021 10:15 AM
-    const maxParts = { month: 9, day: 10, year: 2021, hour: 10, minute: 15 };
-    // September 10, 2021 10:15 AM
-    const expected = {
-      month: 9,
-      day: 10,
-      year: 2021,
-      hour: 10,
-      minute: 15,
-      ampm: 'am',
-      dayOfWeek: undefined,
-    };
-    expect(getClosestValidDate({
-      refParts,
-      monthValues: [4, 9, 11],
-      dayValues: [10, 12, 13, 14],
-      yearValues: [2020, 2021, 2023],
-      hourValues: [9, 10, 11],
-      minuteValues: [11, 12, 13, 14, 15],
-      minParts,
-      maxParts,
-    })).toEqual(expected);
-  });
-});

package/dist/collection/components/datetime/utils/manipulation.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { isAfter, isBefore, isSameDay } from "./comparison";
+import { isSameDay } from "./comparison";
 import { getNumDaysInMonth } from "./helpers";
 import { clampDate, parseAmPm } from "./parse";
 const twoDigit = (val) => {
@@ -355,60 +355,32 @@ export const validateParts = (parts, minParts, maxParts) => {
  * Returns the closest date to refParts
  * that also meets the constraints of
  * the *Values params.
+ * @param refParts The reference date
+ * @param monthValues The allowed month values
+ * @param dayValues The allowed day (of the month) values
+ * @param yearValues The allowed year values
+ * @param hourValues The allowed hour values
+ * @param minuteValues The allowed minute values
  */
-export const getClosestValidDate = ({ refParts, monthValues, dayValues, yearValues, hourValues, minuteValues, minParts, maxParts, }) => {
+export const getClosestValidDate = (refParts, monthValues, dayValues, yearValues, hourValues, minuteValues) => {
   const { hour, minute, day, month, year } = refParts;
-  const copyParts = clampDate(Object.assign(Object.assign({}, refParts), { dayOfWeek: undefined }), minParts, maxParts);
+  const copyParts = Object.assign(Object.assign({}, refParts), { dayOfWeek: undefined });
   if (monthValues !== undefined) {
-    // Filters out months that are out of the min/max bounds
-    const filteredMonths = monthValues.filter((month) => !(minParts !== undefined && month < minParts.month) && !(maxParts !== undefined && month > maxParts.month));
-    copyParts.month = findClosestValue(month, filteredMonths);
+    copyParts.month = findClosestValue(month, monthValues);
   }
   // Day is nullable but cannot be undefined
   if (day !== null && dayValues !== undefined) {
-    // Filters out days that are out of the min/max bounds
-    const filteredDays = dayValues.filter((day) => {
-      if (minParts && isBefore(Object.assign(Object.assign({}, copyParts), { day }), minParts)) {
-        return false;
-      }
-      if (maxParts && isAfter(Object.assign(Object.assign({}, copyParts), { day }), maxParts)) {
-        return false;
-      }
-      return true;
-    });
-    copyParts.day = findClosestValue(day, filteredDays);
+    copyParts.day = findClosestValue(day, dayValues);
   }
   if (yearValues !== undefined) {
-    // Filters out years that are out of the min/max bounds
-    const filteredYears = yearValues.filter((year) => !(minParts !== undefined && year < minParts.year) && !(maxParts !== undefined && year > maxParts.year));
-    copyParts.year = findClosestValue(year, filteredYears);
+    copyParts.year = findClosestValue(year, yearValues);
   }
   if (hour !== undefined && hourValues !== undefined) {
-    // Filters out hours that are out of the min/max bounds
-    const filteredHours = hourValues.filter((hour) => {
-      if ((minParts === null || minParts === void 0 ? void 0 : minParts.hour) !== undefined && isSameDay(copyParts, minParts) && hour < minParts.hour) {
-        return false;
-      }
-      if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.hour) !== undefined && isSameDay(copyParts, maxParts) && hour > maxParts.hour) {
-        return false;
-      }
-      return true;
-    });
-    copyParts.hour = findClosestValue(hour, filteredHours);
+    copyParts.hour = findClosestValue(hour, hourValues);
     copyParts.ampm = parseAmPm(copyParts.hour);
   }
   if (minute !== undefined && minuteValues !== undefined) {
-    // Filters out minutes that are out of the min/max bounds
-    const filteredMinutes = minuteValues.filter((minute) => {
-      if ((minParts === null || minParts === void 0 ? void 0 : minParts.minute) !== undefined && isSameDay(copyParts, minParts) && minute < minParts.minute) {
-        return false;
-      }
-      if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.minute) !== undefined && isSameDay(copyParts, maxParts) && minute > maxParts.minute) {
-        return false;
-      }
-      return true;
-    });
-    copyParts.minute = findClosestValue(minute, filteredMinutes);
+    copyParts.minute = findClosestValue(minute, minuteValues);
   }
   return copyParts;
 };

package/dist/collection/components/picker-column-internal/picker-column-internal.ios.css

@@ -109,12 +109,20 @@
 }
 
 :host .picker-item-empty,
-:host .picker-item.picker-item-disabled {
-  scroll-snap-align: none;
+:host .picker-item[disabled] {
   cursor: default;
 }
 
-:host .picker-item.picker-item-disabled {
+:host .picker-item-empty,
+:host(:not([disabled])) .picker-item[disabled] {
+  scroll-snap-align: none;
+}
+
+:host([disabled]) {
+  overflow-y: hidden;
+}
+
+:host .picker-item[disabled] {
   opacity: 0.4;
 }
 

package/dist/collection/components/picker-column-internal/picker-column-internal.js

@@ -221,6 +221,7 @@ export class PickerColumnInternal {
       this.el.classList.remove('picker-column-active');
     };
     this.isActive = false;
+    this.disabled = false;
     this.items = [];
     this.value = undefined;
     this.color = 'primary';
@@ -318,10 +319,13 @@ export class PickerColumnInternal {
     }
   }
   get activeItem() {
-    return getElementRoot(this.el).querySelector(`.picker-item[data-value="${this.value}"]:not([disabled])`);
+    // If the whole picker column is disabled, the current value should appear active
+    // If the current value item is specifically disabled, it should not appear active
+    const selector = `.picker-item[data-value="${this.value}"]${this.disabled ? '' : ':not([disabled])'}`;
+    return getElementRoot(this.el).querySelector(selector);
   }
   render() {
-    const { items, color, isActive, numericInput } = this;
+    const { items, color, disabled: pickerDisabled, isActive, numericInput } = this;
     const mode = getIonMode(this);
     /**
      * exportparts is needed so ion-datetime can expose the parts
@@ -329,11 +333,12 @@ export class PickerColumnInternal {
      * the attribute can be moved to datetime.tsx and set on every
      * instance of ion-picker-column-internal there instead.
      */
-    return (h(Host, { exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, tabindex: 0, class: createColorClasses(color, {
+    return (h(Host, { exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: createColorClasses(color, {
         [mode]: true,
         ['picker-column-active']: isActive,
         ['picker-column-numeric-input']: numericInput,
       }) }, h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), items.map((item, index) => {
+      const isItemDisabled = pickerDisabled || item.disabled || false;
       {
         /*
         Users should be able to tab
@@ -346,10 +351,9 @@ export class PickerColumnInternal {
       }
       return (h("button", { tabindex: "-1", class: {
           'picker-item': true,
-          'picker-item-disabled': item.disabled || false,
         }, "data-value": item.value, "data-index": index, onClick: (ev) => {
           this.centerPickerItemInView(ev.target, true);
-        }, disabled: item.disabled, part: PICKER_ITEM_PART }, item.text));
+        }, disabled: isItemDisabled, part: PICKER_ITEM_PART }, item.text));
     }), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")));
   }
   static get is() { return "ion-picker-column-internal"; }
@@ -368,6 +372,24 @@ export class PickerColumnInternal {
   }
   static get properties() {
     return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the user cannot interact with the picker."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "items": {
         "type": "unknown",
         "mutable": false,

package/dist/collection/components/picker-column-internal/picker-column-internal.md.css

@@ -109,12 +109,20 @@
 }
 
 :host .picker-item-empty,
-:host .picker-item.picker-item-disabled {
-  scroll-snap-align: none;
+:host .picker-item[disabled] {
   cursor: default;
 }
 
-:host .picker-item.picker-item-disabled {
+:host .picker-item-empty,
+:host(:not([disabled])) .picker-item[disabled] {
+  scroll-snap-align: none;
+}
+
+:host([disabled]) {
+  overflow-y: hidden;
+}
+
+:host .picker-item[disabled] {
   opacity: 0.4;
 }
 

package/dist/collection/components/picker-column-internal/test/disabled/picker-column-internal.e2e.js

@@ -32,7 +32,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
  * This behavior does not vary across modes/directions.
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('picker-column-internal: disabled'), () => {
+  test.describe(title('picker-column-internal: disabled items'), () => {
     test('all picker items should be enabled by default', async ({ page }) => {
       await page.setContent(`
         <ion-picker-internal>
@@ -48,7 +48,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           ]
         </script>
       `, config);
-      const pickerItems = page.locator('ion-picker-column-internal .picker-item:not(.picker-item-empty, .picker-item-disabled)');
+      const pickerItems = page.locator('ion-picker-column-internal .picker-item:not(.picker-item-empty, [disabled])');
       expect(await pickerItems.count()).toBe(3);
     });
     test('disabled picker item should not be interactive', async ({ page }) => {
@@ -66,7 +66,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           ]
         </script>
       `, config);
-      const disabledItem = page.locator('ion-picker-column-internal .picker-item.picker-item-disabled');
+      const disabledItem = page.locator('ion-picker-column-internal .picker-item[disabled]');
       await expect(disabledItem).not.toBeEnabled();
     });
     test('disabled picker item should not be considered active', async ({ page }) => {
@@ -106,7 +106,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await pickerColumn.evaluate((el) => (el.value = 'b'));
       await page.waitForChanges();
       const disabledItem = page.locator('ion-picker-column-internal .picker-item[data-value="b"]');
-      await expect(disabledItem).toHaveClass(/picker-item-disabled/);
+      await expect(disabledItem).toBeDisabled();
       await expect(disabledItem).not.toHaveClass(/picker-item-active/);
     });
     test('defaulting the value to a disabled item should not cause that item to be active', async ({ page }) => {
@@ -126,8 +126,37 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         </script>
       `, config);
       const disabledItem = page.locator('ion-picker-column-internal .picker-item[data-value="b"]');
-      await expect(disabledItem).toHaveClass(/picker-item-disabled/);
+      await expect(disabledItem).toBeDisabled();
       await expect(disabledItem).not.toHaveClass(/picker-item-active/);
     });
   });
 });
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('picker-column-internal: disabled column rendering'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/picker-column-internal/test/disabled', config);
+    });
+    test('disabled column should not have visual regressions', async ({ page }) => {
+      const disabledColumn = page.locator('#column-disabled');
+      await page.waitForChanges();
+      await expect(disabledColumn).toHaveScreenshot(screenshot('picker-internal-disabled-column'));
+    });
+  });
+});
+/**
+ * This behavior does not vary across modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('picker-column-internal: disabled column'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/picker-column-internal/test/disabled', config);
+    });
+    test('item in disabled column should not be interactive', async ({ page }) => {
+      const secondItem = page.locator('#column-disabled .picker-item:not(.picker-item-empty)').nth(1);
+      await expect(secondItem).toBeDisabled();
+    });
+  });
+});

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-11-21T21:26:53",
+  "timestamp": "2023-11-23T06:03:10",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.7.2",
@@ -29058,6 +29058,16 @@
       "docstring": "",
       "path": "src/components/datetime/datetime-interface.ts"
     },
+    "src/components/picker-column-internal/picker-column-internal-interfaces.ts::PickerColumnItem": {
+      "declaration": "export interface PickerColumnItem {\n  text: string;\n  value: string | number;\n  disabled?: boolean;\n}",
+      "docstring": "",
+      "path": "src/components/picker-column-internal/picker-column-internal-interfaces.ts"
+    },
+    "src/components/picker-internal/picker-internal-interfaces.ts::PickerInternalChangeEventDetail": {
+      "declaration": "export interface PickerInternalChangeEventDetail {\n  useInputMode: boolean;\n  inputModeColumn?: HTMLIonPickerColumnInternalElement;\n}",
+      "docstring": "",
+      "path": "src/components/picker-internal/picker-internal-interfaces.ts"
+    },
     "src/components/spinner/spinner-configs.ts::SpinnerTypes": {
       "declaration": "\"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines\" | \"lines-small\" | \"lines-sharp\" | \"lines-sharp-small\"",
       "docstring": "",
@@ -29168,16 +29178,6 @@
       "docstring": "",
       "path": "src/components/picker/picker-interface.ts"
     },
-    "src/components/picker-column-internal/picker-column-internal-interfaces.ts::PickerColumnItem": {
-      "declaration": "export interface PickerColumnItem {\n  text: string;\n  value: string | number;\n  disabled?: boolean;\n}",
-      "docstring": "",
-      "path": "src/components/picker-column-internal/picker-column-internal-interfaces.ts"
-    },
-    "src/components/picker-internal/picker-internal-interfaces.ts::PickerInternalChangeEventDetail": {
-      "declaration": "export interface PickerInternalChangeEventDetail {\n  useInputMode: boolean;\n  inputModeColumn?: HTMLIonPickerColumnInternalElement;\n}",
-      "docstring": "",
-      "path": "src/components/picker-internal/picker-internal-interfaces.ts"
-    },
     "src/components/popover/popover-interface.ts::TriggerAction": {
       "declaration": "export type TriggerAction = 'click' | 'hover' | 'context-menu';",
       "docstring": "",

package/dist/esm/{data-2b019469.js → data-44d9e816.js}

@@ -716,60 +716,32 @@ const validateParts = (parts, minParts, maxParts) => {
  * Returns the closest date to refParts
  * that also meets the constraints of
  * the *Values params.
+ * @param refParts The reference date
+ * @param monthValues The allowed month values
+ * @param dayValues The allowed day (of the month) values
+ * @param yearValues The allowed year values
+ * @param hourValues The allowed hour values
+ * @param minuteValues The allowed minute values
  */
-const getClosestValidDate = ({ refParts, monthValues, dayValues, yearValues, hourValues, minuteValues, minParts, maxParts, }) => {
+const getClosestValidDate = (refParts, monthValues, dayValues, yearValues, hourValues, minuteValues) => {
   const { hour, minute, day, month, year } = refParts;
-  const copyParts = clampDate(Object.assign(Object.assign({}, refParts), { dayOfWeek: undefined }), minParts, maxParts);
+  const copyParts = Object.assign(Object.assign({}, refParts), { dayOfWeek: undefined });
   if (monthValues !== undefined) {
-    // Filters out months that are out of the min/max bounds
-    const filteredMonths = monthValues.filter((month) => !(minParts !== undefined && month < minParts.month) && !(maxParts !== undefined && month > maxParts.month));
-    copyParts.month = findClosestValue(month, filteredMonths);
+    copyParts.month = findClosestValue(month, monthValues);
   }
   // Day is nullable but cannot be undefined
   if (day !== null && dayValues !== undefined) {
-    // Filters out days that are out of the min/max bounds
-    const filteredDays = dayValues.filter((day) => {
-      if (minParts && isBefore(Object.assign(Object.assign({}, copyParts), { day }), minParts)) {
-        return false;
-      }
-      if (maxParts && isAfter(Object.assign(Object.assign({}, copyParts), { day }), maxParts)) {
-        return false;
-      }
-      return true;
-    });
-    copyParts.day = findClosestValue(day, filteredDays);
+    copyParts.day = findClosestValue(day, dayValues);
   }
   if (yearValues !== undefined) {
-    // Filters out years that are out of the min/max bounds
-    const filteredYears = yearValues.filter((year) => !(minParts !== undefined && year < minParts.year) && !(maxParts !== undefined && year > maxParts.year));
-    copyParts.year = findClosestValue(year, filteredYears);
+    copyParts.year = findClosestValue(year, yearValues);
   }
   if (hour !== undefined && hourValues !== undefined) {
-    // Filters out hours that are out of the min/max bounds
-    const filteredHours = hourValues.filter((hour) => {
-      if ((minParts === null || minParts === void 0 ? void 0 : minParts.hour) !== undefined && isSameDay(copyParts, minParts) && hour < minParts.hour) {
-        return false;
-      }
-      if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.hour) !== undefined && isSameDay(copyParts, maxParts) && hour > maxParts.hour) {
-        return false;
-      }
-      return true;
-    });
-    copyParts.hour = findClosestValue(hour, filteredHours);
+    copyParts.hour = findClosestValue(hour, hourValues);
     copyParts.ampm = parseAmPm(copyParts.hour);
   }
   if (minute !== undefined && minuteValues !== undefined) {
-    // Filters out minutes that are out of the min/max bounds
-    const filteredMinutes = minuteValues.filter((minute) => {
-      if ((minParts === null || minParts === void 0 ? void 0 : minParts.minute) !== undefined && isSameDay(copyParts, minParts) && minute < minParts.minute) {
-        return false;
-      }
-      if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.minute) !== undefined && isSameDay(copyParts, maxParts) && minute > maxParts.minute) {
-        return false;
-      }
-      return true;
-    });
-    copyParts.minute = findClosestValue(minute, filteredMinutes);
+    copyParts.minute = findClosestValue(minute, minuteValues);
   }
   return copyParts;
 };

package/dist/esm/ion-datetime-button.entry.js

@@ -6,7 +6,7 @@ import { a as addEventListener, c as componentOnReady } from './helpers-3379ba19
 import { a as printIonError } from './index-595d62c9.js';
 import { c as createColorClasses } from './theme-17531cdf.js';
 import { b as getIonMode } from './ionic-global-40e42e7f.js';
-import { q as parseDate, t as getToday, J as getHourCycle, S as getLocalizedDateTime, G as getMonthAndYear, K as getLocalizedTime, T as getMonthDayAndYear } from './data-2b019469.js';
+import { q as parseDate, t as getToday, J as getHourCycle, S as getLocalizedDateTime, G as getMonthAndYear, K as getLocalizedTime, T as getMonthDayAndYear } from './data-44d9e816.js';
 
 const iosDatetimeButtonCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.time-active) #time-button,:host(.date-active) #date-button{color:var(--ion-color-base)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}";
 

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

@@ -9,7 +9,7 @@ import { i as isRTL } from './dir-912e3e13.js';
 import { c as createColorClasses, g as getClassMap } from './theme-17531cdf.js';
 import { c as chevronBack, o as chevronForward, l as chevronDown, p as caretUpSharp, q as caretDownSharp } from './index-c132c5f1.js';
 import { b as getIonMode } from './ionic-global-40e42e7f.js';
-import { g as generateDayAriaLabel, a as getDay, i as isBefore, b as isAfter, c as isSameDay, d as getPreviousMonth, e as getNextMonth, v as validateParts, f as getPartsFromCalendarDay, h as getEndOfWeek, j as getStartOfWeek, k as getPreviousDay, l as getNextDay, m as getPreviousWeek, n as getNextWeek, p as parseMinParts, o as parseMaxParts, q as parseDate, w as warnIfValueOutOfBounds, r as convertToArrayOfNumbers, s as convertDataToISO, t as getToday, u as getClosestValidDate, x as getNumDaysInMonth, y as getCombinedDateColumnData, z as getMonthColumnData, A as getDayColumnData, B as getYearColumnData, C as isMonthFirstLocale, D as getTimeColumnsData, E as isLocaleDayPeriodRTL, F as getDaysOfWeek, G as getMonthAndYear, H as getDaysOfMonth, I as generateMonths, J as getHourCycle, K as getLocalizedTime, L as getMonthAndDay, M as formatValue, N as getNextYear, O as getPreviousYear, P as clampDate, Q as parseAmPm, R as calculateHourFromAMPM } from './data-2b019469.js';
+import { g as generateDayAriaLabel, a as getDay, i as isBefore, b as isAfter, c as isSameDay, d as getPreviousMonth, e as getNextMonth, v as validateParts, f as getPartsFromCalendarDay, h as getEndOfWeek, j as getStartOfWeek, k as getPreviousDay, l as getNextDay, m as getPreviousWeek, n as getNextWeek, p as parseMinParts, o as parseMaxParts, q as parseDate, w as warnIfValueOutOfBounds, r as convertToArrayOfNumbers, s as convertDataToISO, t as getToday, u as getClosestValidDate, x as getNumDaysInMonth, y as getCombinedDateColumnData, z as getMonthColumnData, A as getDayColumnData, B as getYearColumnData, C as isMonthFirstLocale, D as getTimeColumnsData, E as isLocaleDayPeriodRTL, F as getDaysOfWeek, G as getMonthAndYear, H as getDaysOfMonth, I as generateMonths, J as getHourCycle, K as getLocalizedTime, L as getMonthAndDay, M as formatValue, N as getNextYear, O as getPreviousYear, P as clampDate, Q as parseAmPm, R as calculateHourFromAMPM } from './data-44d9e816.js';
 import { c as createLockController } from './lock-controller-e8c6c051.js';
 import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-6c9feb7e.js';
 import { c as createAnimation } from './animation-8aa13916.js';
@@ -862,24 +862,14 @@ const Datetime = class {
    * or modal that the datetime was presented in.
    */
   async confirm(closeOverlay = false) {
-    const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
+    const { isCalendarPicker, activeParts } = this;
     /**
      * We only update the value if the presentation is not a calendar picker.
      */
     if (activeParts !== undefined || !isCalendarPicker) {
       const activePartsIsArray = Array.isArray(activeParts);
       if (activePartsIsArray && activeParts.length === 0) {
-        if (preferWheel) {
-          /**
-           * If the datetime is using a wheel picker, but the
-           * active parts are empty, then the user has confirmed the
-           * initial value (working parts) presented to them.
-           */
-          this.setValue(convertDataToISO(workingParts));
-        }
-        else {
-          this.setValue(undefined);
-        }
+        this.setValue(undefined);
       }
       else {
         this.setValue(convertDataToISO(activeParts));
@@ -1083,18 +1073,9 @@ const Datetime = class {
     const yearValues = (this.parsedYearValues = convertToArrayOfNumbers(this.yearValues));
     const dayValues = (this.parsedDayValues = convertToArrayOfNumbers(this.dayValues));
     const todayParts = (this.todayParts = parseDate(getToday()));
+    this.defaultParts = getClosestValidDate(todayParts, monthValues, dayValues, yearValues, hourValues, minuteValues);
     this.processMinParts();
     this.processMaxParts();
-    this.defaultParts = getClosestValidDate({
-      refParts: todayParts,
-      monthValues,
-      dayValues,
-      yearValues,
-      hourValues,
-      minuteValues,
-      minParts: this.minParts,
-      maxParts: this.maxParts,
-    });
     this.processValue(this.value);
     this.emitStyle();
   }
@@ -1162,7 +1143,7 @@ const Datetime = class {
       : this.renderIndividualDatePickerColumns(forcePresentation);
   }
   renderCombinedDatePickerColumn() {
-    const { defaultParts, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
+    const { defaultParts, disabled, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
     const activePart = this.getActivePartsWithFallback();
     /**
      * By default, generate a range of 3 months:
@@ -1213,7 +1194,7 @@ const Datetime = class {
     const todayString = workingParts.day !== null
       ? `${workingParts.year}-${workingParts.month}-${workingParts.day}`
       : `${defaultParts.year}-${defaultParts.month}-${defaultParts.day}`;
-    return (h("ion-picker-column-internal", { class: "date-column", color: this.color, items: items, value: todayString, onIonChange: (ev) => {
+    return (h("ion-picker-column-internal", { class: "date-column", color: this.color, disabled: disabled, items: items, value: todayString, onIonChange: (ev) => {
         // TODO(FW-1823) Remove this when iOS 14 support is dropped.
         // Due to a Safari 14 issue we need to destroy
         // the scroll listener before we update state
@@ -1295,9 +1276,9 @@ const Datetime = class {
     if (days.length === 0) {
       return [];
     }
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
     const activePart = this.getActivePartsWithFallback();
-    return (h("ion-picker-column-internal", { class: "day-column", color: this.color, items: days, value: (_a = (workingParts.day !== null ? workingParts.day : this.defaultParts.day)) !== null && _a !== void 0 ? _a : undefined, onIonChange: (ev) => {
+    return (h("ion-picker-column-internal", { class: "day-column", color: this.color, disabled: disabled, items: days, value: (_a = (workingParts.day !== null ? workingParts.day : this.defaultParts.day)) !== null && _a !== void 0 ? _a : undefined, onIonChange: (ev) => {
         // TODO(FW-1823) Remove this when iOS 14 support is dropped.
         // Due to a Safari 14 issue we need to destroy
         // the scroll listener before we update state
@@ -1317,9 +1298,9 @@ const Datetime = class {
     if (months.length === 0) {
       return [];
     }
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
     const activePart = this.getActivePartsWithFallback();
-    return (h("ion-picker-column-internal", { class: "month-column", color: this.color, items: months, value: workingParts.month, onIonChange: (ev) => {
+    return (h("ion-picker-column-internal", { class: "month-column", color: this.color, disabled: disabled, items: months, value: workingParts.month, onIonChange: (ev) => {
         // TODO(FW-1823) Remove this when iOS 14 support is dropped.
         // Due to a Safari 14 issue we need to destroy
         // the scroll listener before we update state
@@ -1339,9 +1320,9 @@ const Datetime = class {
     if (years.length === 0) {
       return [];
     }
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
     const activePart = this.getActivePartsWithFallback();
-    return (h("ion-picker-column-internal", { class: "year-column", color: this.color, items: years, value: workingParts.year, onIonChange: (ev) => {
+    return (h("ion-picker-column-internal", { class: "year-column", color: this.color, disabled: disabled, items: years, value: workingParts.year, onIonChange: (ev) => {
         // TODO(FW-1823) Remove this when iOS 14 support is dropped.
         // Due to a Safari 14 issue we need to destroy
         // the scroll listener before we update state
@@ -1380,35 +1361,35 @@ const Datetime = class {
     ];
   }
   renderHourPickerColumn(hoursData) {
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
     if (hoursData.length === 0)
       return [];
     const activePart = this.getActivePartsWithFallback();
-    return (h("ion-picker-column-internal", { color: this.color, value: activePart.hour, items: hoursData, numericInput: true, onIonChange: (ev) => {
+    return (h("ion-picker-column-internal", { color: this.color, disabled: disabled, value: activePart.hour, items: hoursData, numericInput: true, onIonChange: (ev) => {
         this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
         this.setActiveParts(Object.assign(Object.assign({}, activePart), { hour: ev.detail.value }));
         ev.stopPropagation();
       } }));
   }
   renderMinutePickerColumn(minutesData) {
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
     if (minutesData.length === 0)
       return [];
     const activePart = this.getActivePartsWithFallback();
-    return (h("ion-picker-column-internal", { color: this.color, value: activePart.minute, items: minutesData, numericInput: true, onIonChange: (ev) => {
+    return (h("ion-picker-column-internal", { color: this.color, disabled: disabled, value: activePart.minute, items: minutesData, numericInput: true, onIonChange: (ev) => {
         this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
         this.setActiveParts(Object.assign(Object.assign({}, activePart), { minute: ev.detail.value }));
         ev.stopPropagation();
       } }));
   }
   renderDayPeriodPickerColumn(dayPeriodData) {
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
     if (dayPeriodData.length === 0) {
       return [];
     }
     const activePart = this.getActivePartsWithFallback();
     const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);
-    return (h("ion-picker-column-internal", { style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, value: activePart.ampm, items: dayPeriodData, onIonChange: (ev) => {
+    return (h("ion-picker-column-internal", { style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, items: dayPeriodData, onIonChange: (ev) => {
         const hour = calculateHourFromAMPM(workingParts, ev.detail.value);
         this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
         this.setActiveParts(Object.assign(Object.assign({}, activePart), { ampm: ev.detail.value, hour }));