@ionic/core 8.4.2-dev.11736797843.16cc5058 → 8.4.2-dev.11739377372.17be7c08

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

@@ -1,6 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import caretLeftRegular from "@phosphor-icons/core/assets/regular/caret-left.svg";
+import caretRightRegular from "@phosphor-icons/core/assets/regular/caret-right.svg";
 import { Host, h, writeTask } from "@stencil/core";
 import { startFocusVisible } from "../../utils/focus-visible";
 import { getElementRoot, raf, renderHiddenInput } from "../../utils/helpers";
@@ -8,7 +10,8 @@ import { printIonError, printIonWarning } from "../../utils/logging/index";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses } from "../../utils/theme";
 import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from "ionicons/icons";
-import { getIonMode } from "../../global/ionic-global";
+import { config } from "../../global/config";
+import { getIonMode, getIonTheme } from "../../global/ionic-global";
 import { isSameDay, warnIfValueOutOfBounds, isBefore, isAfter } from "./utils/comparison";
 import { generateMonths, getDaysOfMonth, getDaysOfWeek, getToday, getMonthColumnData, getDayColumnData, getYearColumnData, getTimeColumnsData, getCombinedDateColumnData, } from "./utils/data";
 import { formatValue, getLocalizedDateTime, getLocalizedTime, getMonthAndYear } from "./utils/format";
@@ -18,7 +21,8 @@ import { clampDate, convertToArrayOfNumbers, getPartsFromCalendarDay, parseAmPm,
 import { getCalendarDayState, getHighlightStyles, isDayDisabled, isMonthDisabled, isNextMonthDisabled, isPrevMonthDisabled, } from "./utils/state";
 import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from "./utils/validate";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot title - The title of the datetime.
  * @slot buttons - The buttons in the datetime.
@@ -45,123 +49,6 @@ export class Datetime {
     constructor() {
         this.inputId = `ion-dt-${datetimeIds++}`;
         this.prevPresentation = null;
-        this.showMonthAndYear = false;
-        this.activeParts = [];
-        this.workingParts = {
-            month: 5,
-            day: 28,
-            year: 2021,
-            hour: 13,
-            minute: 52,
-            ampm: 'pm',
-        };
-        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 the selected date cannot be changed.
-         */
-        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. This will include both 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.warnIfIncorrectValueUsage = () => {
             const { multiple, value } = this;
             if (!multiple && Array.isArray(value)) {
@@ -754,6 +641,48 @@ export class Datetime {
         this.toggleMonthAndYearView = () => {
             this.showMonthAndYear = !this.showMonthAndYear;
         };
+        this.showMonthAndYear = false;
+        this.activeParts = [];
+        this.workingParts = {
+            month: 5,
+            day: 28,
+            year: 2021,
+            hour: 13,
+            minute: 52,
+            ampm: 'pm',
+        };
+        this.isTimePopoverOpen = false;
+        this.forceRenderDate = undefined;
+        this.color = 'primary';
+        this.name = this.inputId;
+        this.disabled = false;
+        this.formatOptions = undefined;
+        this.readonly = false;
+        this.isDateEnabled = undefined;
+        this.min = undefined;
+        this.max = undefined;
+        this.presentation = 'date-time';
+        this.cancelText = 'Cancel';
+        this.doneText = 'Done';
+        this.clearText = 'Clear';
+        this.yearValues = undefined;
+        this.monthValues = undefined;
+        this.dayValues = undefined;
+        this.hourValues = undefined;
+        this.minuteValues = undefined;
+        this.locale = 'default';
+        this.firstDayOfWeek = 0;
+        this.titleSelectedDatesFormatter = undefined;
+        this.multiple = false;
+        this.highlightedDates = undefined;
+        this.value = undefined;
+        this.showDefaultTitle = false;
+        this.showDefaultButtons = false;
+        this.showClearButton = false;
+        this.showDefaultTimeLabel = true;
+        this.hourCycle = undefined;
+        this.size = 'fixed';
+        this.preferWheel = false;
     }
     formatOptionsChanged() {
         const { el, formatOptions, presentation } = this;
@@ -1064,6 +993,7 @@ export class Datetime {
      * are rendered independently of presentation.
      */
     renderFooter() {
+        const theme = getIonTheme(this);
         const { disabled, readonly, showDefaultButtons, showClearButton } = this;
         /**
          * The cancel, clear, and confirm buttons
@@ -1071,6 +1001,7 @@ export class Datetime {
          * is disabled or readonly.
          */
         const isButtonDisabled = disabled || readonly;
+        const confirmFill = theme === 'ionic' ? 'solid' : undefined;
         const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
         if (!hasSlottedButtons && !showDefaultButtons && !showClearButton) {
             return;
@@ -1089,7 +1020,7 @@ export class Datetime {
         return (h("div", { class: "datetime-footer" }, h("div", { class: "datetime-buttons" }, h("div", { class: {
                 ['datetime-action-buttons']: true,
                 ['has-clear-button']: this.showClearButton,
-            } }, h("slot", { name: "buttons" }, h("ion-buttons", null, showDefaultButtons && (h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true), disabled: isButtonDisabled }, this.cancelText)), h("div", { class: "datetime-action-buttons-container" }, showClearButton && (h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick(), disabled: isButtonDisabled }, this.clearText)), showDefaultButtons && (h("ion-button", { id: "confirm-button", color: this.color, onClick: () => this.confirm(true), disabled: isButtonDisabled }, this.doneText)))))))));
+            } }, h("slot", { name: "buttons" }, h("ion-buttons", null, showDefaultButtons && (h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true), disabled: isButtonDisabled }, this.cancelText)), h("div", { class: "datetime-action-buttons-container" }, showClearButton && (h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick(), disabled: isButtonDisabled }, this.clearText)), showDefaultButtons && (h("ion-button", { id: "confirm-button", color: this.color, onClick: () => this.confirm(true), disabled: isButtonDisabled, fill: confirmFill }, this.doneText)))))))));
     }
     /**
      * Wheel picker render methods
@@ -1340,10 +1271,8 @@ export class Datetime {
     /**
      * Grid Render Methods
      */
-    renderCalendarHeader(mode) {
-        const { disabled } = this;
-        const expandedIcon = mode === 'ios' ? chevronDown : caretUpSharp;
-        const collapsedIcon = mode === 'ios' ? chevronForward : caretDownSharp;
+    renderCalendarHeader(theme) {
+        const { disabled, datetimeNextIcon, datetimePreviousIcon, datetimeCollapsedIcon, datetimeExpandedIcon } = this;
         const prevMonthDisabled = disabled || isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
         const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
         // don't use the inheritAttributes util because it removes dir from the host, and we still need that
@@ -1352,7 +1281,7 @@ export class Datetime {
                 '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() }, h("span", { id: "toggle-wrapper" }, getMonthAndYear(this.locale, this.workingParts), h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })), mode === 'md' && h("ion-ripple-effect", null))), h("div", { class: "calendar-next-prev" }, h("ion-buttons", null, h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), h("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
+            }, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, h("span", { id: "toggle-wrapper" }, getMonthAndYear(this.locale, this.workingParts), theme !== 'ionic' && (h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? datetimeExpandedIcon : datetimeCollapsedIcon, lazy: false, flipRtl: true }))), theme === 'md' && h("ion-ripple-effect", null))), h("div", { class: "calendar-next-prev" }, h("ion-buttons", null, h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: datetimePreviousIcon, lazy: false, flipRtl: true })), h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: datetimeNextIcon, lazy: false, flipRtl: true }))))), h("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, getDaysOfWeek(this.locale, theme, this.firstDayOfWeek % 7).map((d) => {
             return h("div", { class: "day-of-week" }, d);
         }))));
     }
@@ -1472,8 +1401,8 @@ export class Datetime {
             return this.renderMonth(month, year);
         })));
     }
-    renderCalendar(mode) {
-        return (h("div", { class: "datetime-calendar", key: "datetime-calendar" }, this.renderCalendarHeader(mode), this.renderCalendarBody()));
+    renderCalendar(theme) {
+        return (h("div", { class: "datetime-calendar", key: "datetime-calendar" }, this.renderCalendarHeader(theme), this.renderCalendarBody()));
     }
     renderTimeLabel() {
         const hasSlottedTimeLabel = this.el.querySelector('[slot="time-label"]') !== null;
@@ -1581,7 +1510,7 @@ export class Datetime {
      * Render entry point
      * All presentation types are rendered from here.
      */
-    renderDatetime(mode) {
+    renderDatetime(theme) {
         const { presentation, preferWheel } = this;
         /**
          * Certain presentation types have separate grid and wheel displays.
@@ -1595,7 +1524,7 @@ export class Datetime {
             case 'date-time':
                 return [
                     this.renderHeader(),
-                    this.renderCalendar(mode),
+                    this.renderCalendar(theme),
                     this.renderCalendarViewMonthYearPicker(),
                     this.renderTime(),
                     this.renderFooter(),
@@ -1604,7 +1533,7 @@ export class Datetime {
                 return [
                     this.renderHeader(),
                     this.renderTime(),
-                    this.renderCalendar(mode),
+                    this.renderCalendar(theme),
                     this.renderCalendarViewMonthYearPicker(),
                     this.renderFooter(),
                 ];
@@ -1617,23 +1546,95 @@ export class Datetime {
             default:
                 return [
                     this.renderHeader(),
-                    this.renderCalendar(mode),
+                    this.renderCalendar(theme),
                     this.renderCalendarViewMonthYearPicker(),
                     this.renderFooter(),
                 ];
         }
     }
+    /**
+     * Get the icon to use for the next icon.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get datetimeNextIcon() {
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: chevronForward,
+            ionic: caretRightRegular,
+            md: 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.get('datetimeNextIcon', defaultIcon);
+    }
+    /**
+     * Get the icon to use for the previous icon.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get datetimePreviousIcon() {
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: chevronBack,
+            ionic: caretLeftRegular,
+            md: 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.get('datetimePreviousIcon', defaultIcon);
+    }
+    /**
+     * Get the icon to use for the show month and year icon.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get datetimeCollapsedIcon() {
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: chevronForward,
+            ionic: undefined,
+            md: 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.get('datetimeCollapsedIcon', defaultIcon);
+    }
+    /**
+     * Get the icon to use for the hide month and year icon.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get datetimeExpandedIcon() {
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: chevronDown,
+            ionic: undefined,
+            md: 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.get('datetimeExpandedIcon', defaultIcon);
+    }
     render() {
         const { name, value, disabled, el, color, readonly, showMonthAndYear, preferWheel, presentation, size, isGridStyle, } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const isMonthAndYearPresentation = presentation === 'year' || presentation === 'month' || presentation === 'month-year';
         const shouldShowMonthAndYear = showMonthAndYear || isMonthAndYearPresentation;
         const monthYearPickerOpen = showMonthAndYear && !isMonthAndYearPresentation;
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: '7afbb1a7e6c78389b4588999779e5c90e010e85d', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: 'ab0e90e68515ba32cafb69b0ded436c123b97b74', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+                [theme]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
                 'show-month-and-year': shouldShowMonthAndYear,
@@ -1642,20 +1643,22 @@ export class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '297c458d4d17154cb297e2ef5926505bcb2d1fce', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: '16ffe958948a7d599dcd1c5c970d98cc77d6c8da', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(theme)));
     }
     static get is() { return "ion-datetime"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["datetime.ios.scss"],
-            "md": ["datetime.md.scss"]
+            "md": ["datetime.md.scss"],
+            "ionic": ["datetime.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["datetime.ios.css"],
-            "md": ["datetime.md.css"]
+            "md": ["datetime.md.css"],
+            "ionic": ["datetime.ionic.css"]
         };
     }
     static get properties() {
@@ -1680,8 +1683,6 @@ export class Datetime {
                     "tags": [],
                     "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "color",
                 "reflect": false,
                 "defaultValue": "'primary'"
@@ -1700,8 +1701,6 @@ export class Datetime {
                     "tags": [],
                     "text": "The name of the control, which is submitted with the form data."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.inputId"
@@ -1720,8 +1719,6 @@ export class Datetime {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the datetime."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -1745,9 +1742,7 @@ export class Datetime {
                 "docs": {
                     "tags": [],
                     "text": "Formatting options for dates and times.\nShould include a 'date' and/or 'time' object, each of which is of type [Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options)."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "readonly": {
                 "type": "boolean",
@@ -1763,8 +1758,6 @@ export class Datetime {
                     "tags": [],
                     "text": "If `true`, the datetime appears normal but the selected date cannot be changed."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
@@ -1782,9 +1775,7 @@ export class Datetime {
                 "docs": {
                     "tags": [],
                     "text": "Returns if an individual date (calendar day) is enabled or disabled.\n\nIf `true`, the day will be enabled/interactive.\nIf `false`, the day will be disabled/non-interactive.\n\nThe function accepts an ISO 8601 date string of a given day.\nBy default, all days are enabled. Developers can use this function\nto write custom logic to disable certain days.\n\nThe function is called for each rendered calendar day, for the previous, current and next month.\nCustom implementations should be optimized for performance to avoid jank."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "min": {
                 "type": "string",
@@ -1800,8 +1791,6 @@ export class Datetime {
                     "tags": [],
                     "text": "The minimum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\nsuch as `1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the minimum could just be the year, such as `1994`.\nDefaults to the beginning of the year, 100 years ago from today."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "min",
                 "reflect": false
             },
@@ -1819,8 +1808,6 @@ export class Datetime {
                     "tags": [],
                     "text": "The maximum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\n`1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the maximum could just be the year, such as `1994`.\nDefaults to the end of this year."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "max",
                 "reflect": false
             },
@@ -1844,8 +1831,6 @@ export class Datetime {
                     "tags": [],
                     "text": "Which values you want to select. `\"date\"` will show\na calendar picker to select the month, day, and year. `\"time\"`\nwill show a time picker to select the hour, minute, and (optionally)\nAM/PM. `\"date-time\"` will show the date picker first and time picker second.\n`\"time-date\"` will show the time picker first and date picker second."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "presentation",
                 "reflect": false,
                 "defaultValue": "'date-time'"
@@ -1864,8 +1849,6 @@ export class Datetime {
                     "tags": [],
                     "text": "The text to display on the picker's cancel button."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "cancel-text",
                 "reflect": false,
                 "defaultValue": "'Cancel'"
@@ -1884,8 +1867,6 @@ export class Datetime {
                     "tags": [],
                     "text": "The text to display on the picker's \"Done\" button."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "done-text",
                 "reflect": false,
                 "defaultValue": "'Done'"
@@ -1904,8 +1885,6 @@ export class Datetime {
                     "tags": [],
                     "text": "The text to display on the picker's \"Clear\" button."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "clear-text",
                 "reflect": false,
                 "defaultValue": "'Clear'"
@@ -1924,8 +1903,6 @@ export class Datetime {
                     "tags": [],
                     "text": "Values used to create the list of selectable years. By default\nthe year values range between the `min` and `max` datetime inputs. However, to\ncontrol exactly which years to display, the `yearValues` input can take a number, an array\nof numbers, or string of comma separated numbers. For example, to show upcoming and\nrecent leap years, then this input's value would be `yearValues=\"2008,2012,2016,2020,2024\"`."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "year-values",
                 "reflect": false
             },
@@ -1943,8 +1920,6 @@ export class Datetime {
                     "tags": [],
                     "text": "Values used to create the list of selectable months. By default\nthe month values range from `1` to `12`. However, to control exactly which months to\ndisplay, the `monthValues` input can take a number, an array of numbers, or a string of\ncomma separated numbers. For example, if only summer months should be shown, then this\ninput value would be `monthValues=\"6,7,8\"`. Note that month numbers do *not* have a\nzero-based index, meaning January's value is `1`, and December's is `12`."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "month-values",
                 "reflect": false
             },
@@ -1962,8 +1937,6 @@ export class Datetime {
                     "tags": [],
                     "text": "Values used to create the list of selectable days. By default\nevery day is shown for the given month. However, to control exactly which days of\nthe month to display, the `dayValues` input can take a number, an array of numbers, or\na string of comma separated numbers. Note that even if the array days have an invalid\nnumber for the selected month, like `31` in February, it will correctly not show\ndays which are not valid for the selected month."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "day-values",
                 "reflect": false
             },
@@ -1981,8 +1954,6 @@ export class Datetime {
                     "tags": [],
                     "text": "Values used to create the list of selectable hours. By default\nthe hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However,\nto control exactly which hours to display, the `hourValues` input can take a number, an\narray of numbers, or a string of comma separated numbers."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "hour-values",
                 "reflect": false
             },
@@ -2000,8 +1971,6 @@ export class Datetime {
                     "tags": [],
                     "text": "Values used to create the list of selectable minutes. By default\nthe minutes range from `0` to `59`. However, to control exactly which minutes to display,\nthe `minuteValues` input can take a number, an array of numbers, or a string of comma\nseparated numbers. For example, if the minute selections should only be every 15 minutes,\nthen this input value would be `minuteValues=\"0,15,30,45\"`."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "minute-values",
                 "reflect": false
             },
@@ -2019,8 +1988,6 @@ export class Datetime {
                     "tags": [],
                     "text": "The locale to use for `ion-datetime`. This\nimpacts month and day name formatting.\nThe `\"default\"` value refers to the default\nlocale set by your device."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "locale",
                 "reflect": false,
                 "defaultValue": "'default'"
@@ -2039,8 +2006,6 @@ export class Datetime {
                     "tags": [],
                     "text": "The first day of the week to use for `ion-datetime`. The\ndefault value is `0` and represents Sunday."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "first-day-of-week",
                 "reflect": false,
                 "defaultValue": "0"
@@ -2064,9 +2029,7 @@ export class Datetime {
                 "docs": {
                     "tags": [],
                     "text": "A callback used to format the header text that shows how many\ndates are selected. Only used if there are 0 or more than 1\nselected (i.e. unused for exactly 1). By default, the header\ntext is set to \"numberOfDates days\".\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "multiple": {
                 "type": "boolean",
@@ -2082,8 +2045,6 @@ export class Datetime {
                     "tags": [],
                     "text": "If `true`, multiple dates can be selected at once. Only\napplies to `presentation=\"date\"` and `preferWheel=\"false\"`."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "multiple",
                 "reflect": false,
                 "defaultValue": "false"
@@ -2112,9 +2073,7 @@ export class Datetime {
                 "docs": {
                     "tags": [],
                     "text": "Used to apply custom text and background colors to specific dates.\n\nCan be either an array of objects containing ISO strings and colors,\nor a callback that receives an ISO string and returns the colors.\n\nOnly applies to the `date`, `date-time`, and `time-date` presentations,\nwith `preferWheel=\"false\"`."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "value": {
                 "type": "string",
@@ -2130,8 +2089,6 @@ export class Datetime {
                     "tags": [],
                     "text": "The value of the datetime as a valid ISO 8601 datetime string.\nThis should be an array of strings only when `multiple=\"true\"`."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "value",
                 "reflect": false
             },
@@ -2149,8 +2106,6 @@ export class Datetime {
                     "tags": [],
                     "text": "If `true`, a header will be shown above the calendar\npicker. This will include both the slotted title, and\nthe selected date."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "show-default-title",
                 "reflect": false,
                 "defaultValue": "false"
@@ -2169,8 +2124,6 @@ export class Datetime {
                     "tags": [],
                     "text": "If `true`, the default \"Cancel\" and \"OK\" buttons\nwill be rendered at the bottom of the `ion-datetime`\ncomponent. Developers can also use the `button` slot\nif they want to customize these buttons. If custom\nbuttons are set in the `button` slot then the\ndefault buttons will not be rendered."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "show-default-buttons",
                 "reflect": false,
                 "defaultValue": "false"
@@ -2189,8 +2142,6 @@ export class Datetime {
                     "tags": [],
                     "text": "If `true`, a \"Clear\" button will be rendered alongside\nthe default \"Cancel\" and \"OK\" buttons at the bottom of the `ion-datetime`\ncomponent. Developers can also use the `button` slot\nif they want to customize these buttons. If custom\nbuttons are set in the `button` slot then the\ndefault buttons will not be rendered."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "show-clear-button",
                 "reflect": false,
                 "defaultValue": "false"
@@ -2209,8 +2160,6 @@ export class Datetime {
                     "tags": [],
                     "text": "If `true`, the default \"Time\" label will be rendered\nfor the time selector of the `ion-datetime` component.\nDevelopers can also use the `time-label` slot\nif they want to customize this label. If a custom\nlabel is set in the `time-label` slot then the\ndefault label will not be rendered."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "show-default-time-label",
                 "reflect": false,
                 "defaultValue": "true"
@@ -2235,8 +2184,6 @@ export class Datetime {
                     "tags": [],
                     "text": "The hour cycle of the `ion-datetime`. If no value is set, this is\nspecified by the current locale."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "hour-cycle",
                 "reflect": false
             },
@@ -2254,8 +2201,6 @@ export class Datetime {
                     "tags": [],
                     "text": "If `cover`, the `ion-datetime` will expand to cover the full width of its container.\nIf `fixed`, the `ion-datetime` will have a fixed width."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'fixed'"
@@ -2274,8 +2219,6 @@ export class Datetime {
                     "tags": [],
                     "text": "If `true`, a wheel picker will be rendered instead of a calendar grid\nwhere possible. If `false`, a calendar grid will be rendered instead of\na wheel picker where possible.\n\nA wheel picker can be rendered instead of a grid when `presentation` is\none of the following values: `\"date\"`, `\"date-time\"`, or `\"time-date\"`.\n\nA wheel picker will always be rendered regardless of\nthe `preferWheel` value when `presentation` is one of the following values:\n`\"time\"`, `\"month\"`, `\"month-year\"`, or `\"year\"`."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "prefer-wheel",
                 "reflect": false,
                 "defaultValue": "false"