voyager-ionic-core 8.5.7 → 8.6.1

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

@@ -45,6 +45,130 @@ 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',
+            isAdjacentDay: false,
+        };
+        this.isTimePopoverOpen = false;
+        /**
+         * The color to use from your application's color palette.
+         * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+         * For more information on colors, see [theming](/docs/theming/basics).
+         */
+        this.color = 'primary';
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * If `true`, the user cannot interact with the datetime.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the datetime appears normal but the selected date cannot be changed.
+         */
+        this.readonly = false;
+        /**
+         * If `true`, the datetime calendar displays a six-week (42-day) layout,
+         * including days from the previous and next months to fill the grid.
+         * These adjacent days are selectable unless disabled.
+         */
+        this.showAdjacentDays = 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)) {
@@ -239,12 +363,15 @@ export class Datetime {
         };
         this.focusWorkingDay = (currentMonth) => {
             /**
-             * Get the number of padding days so
+             * Get the number of offset days so
              * we know how much to offset our next selector by
              * to grab the correct calendar-day element.
              */
-            const padding = currentMonth.querySelectorAll('.calendar-day-padding');
-            const { day } = this.workingParts;
+            const { day, month, year } = this.workingParts;
+            const firstOfMonth = new Date(`${month}/1/${year}`).getDay();
+            const offset = firstOfMonth >= this.firstDayOfWeek
+                ? firstOfMonth - this.firstDayOfWeek
+                : 7 - (this.firstDayOfWeek - firstOfMonth);
             if (day === null) {
                 return;
             }
@@ -252,7 +379,7 @@ export class Datetime {
              * Get the calendar day element
              * and focus it.
              */
-            const dayEl = currentMonth.querySelector(`.calendar-day-wrapper:nth-of-type(${padding.length + day}) .calendar-day`);
+            const dayEl = currentMonth.querySelector(`.calendar-day-wrapper:nth-of-type(${offset + day}) .calendar-day`);
             if (dayEl) {
                 dayEl.focus();
             }
@@ -481,19 +608,18 @@ export class Datetime {
                 warnIfValueOutOfBounds(valueToProcess, minParts, maxParts);
             }
             /**
-             * If there are multiple values, pick an arbitrary one to clamp to. This way,
-             * if the values are across months, we always show at least one of them. Note
-             * that the values don't necessarily have to be in order.
+             * If there are multiple values, clamp to the last one.
+             * This is because the last value is the one that the user
+             * has most recently interacted with.
              */
-            const singleValue = Array.isArray(valueToProcess) ? valueToProcess[0] : valueToProcess;
+            const singleValue = Array.isArray(valueToProcess) ? valueToProcess[valueToProcess.length - 1] : valueToProcess;
             const targetValue = clampDate(singleValue, minParts, maxParts);
             const { month, day, year, hour, minute } = targetValue;
             const ampm = parseAmPm(hour);
             /**
-             * Since `activeParts` indicates a value that
-             * been explicitly selected either by the
-             * user or the app, only update `activeParts`
-             * if the `value` property is set.
+             * Since `activeParts` indicates a value that been explicitly selected
+             * either by the user or the app, only update `activeParts` if the
+             * `value` property is set.
              */
             if (hasValue) {
                 if (Array.isArray(valueToProcess)) {
@@ -518,51 +644,28 @@ export class Datetime {
                  */
                 this.activeParts = [];
             }
-            /**
-             * Only animate if:
-             * 1. We're using grid style (wheel style pickers should just jump to new value)
-             * 2. The month and/or year actually changed, and both are defined (otherwise there's nothing to animate to)
-             * 3. The calendar body is visible (prevents animation when in collapsed datetime-button, for example)
-             * 4. The month/year picker is not open (since you wouldn't see the animation anyway)
-             */
             const didChangeMonth = (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
             const bodyIsVisible = el.classList.contains('datetime-ready');
             const { isGridStyle, showMonthAndYear } = this;
-            let areAllSelectedDatesInSameMonth = true;
-            if (Array.isArray(valueToProcess)) {
-                const firstMonth = valueToProcess[0].month;
-                for (const date of valueToProcess) {
-                    if (date.month !== firstMonth) {
-                        areAllSelectedDatesInSameMonth = false;
-                        break;
-                    }
-                }
+            if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
+                /**
+                 * Only animate if:
+                 * 1. We're using grid style (wheel style pickers should just jump to new value)
+                 * 2. The month and/or year actually changed, and both are defined (otherwise there's nothing to animate to)
+                 * 3. The calendar body is visible (prevents animation when in collapsed datetime-button, for example)
+                 * 4. The month/year picker is not open (since you wouldn't see the animation anyway)
+                 */
+                this.animateToDate(targetValue);
             }
-            /**
-             * If there is more than one date selected
-             * and the dates aren't all in the same month,
-             * then we should neither animate to the date
-             * nor update the working parts because we do
-             * not know which date the user wants to view.
-             */
-            if (areAllSelectedDatesInSameMonth) {
-                if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
-                    this.animateToDate(targetValue);
-                }
-                else {
-                    /**
-                     * We only need to do this if we didn't just animate to a new month,
-                     * since that calls prevMonth/nextMonth which calls setWorkingParts for us.
-                     */
-                    this.setWorkingParts({
-                        month,
-                        day,
-                        year,
-                        hour,
-                        minute,
-                        ampm,
-                    });
-                }
+            else {
+                this.setWorkingParts({
+                    month,
+                    day,
+                    year,
+                    hour,
+                    minute,
+                    ampm,
+                });
             }
         };
         this.animateToDate = async (targetValue) => {
@@ -637,48 +740,6 @@ 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;
@@ -1308,10 +1369,36 @@ export class Datetime {
                 'calendar-month': true,
                 // Prevents scroll snap swipe gestures for months outside of the min/max bounds
                 'calendar-month-disabled': !isWorkingMonth && swipeDisabled,
-            } }, h("div", { class: "calendar-month-grid" }, getDaysOfMonth(month, year, this.firstDayOfWeek % 7).map((dateObject, index) => {
-            const { day, dayOfWeek } = dateObject;
-            const { el, highlightedDates, isDateEnabled, multiple } = this;
-            const referenceParts = { month, day, year };
+            } }, h("div", { class: "calendar-month-grid" }, getDaysOfMonth(month, year, this.firstDayOfWeek % 7, this.showAdjacentDays).map((dateObject, index) => {
+            const { day, dayOfWeek, isAdjacentDay } = dateObject;
+            const { el, highlightedDates, isDateEnabled, multiple, showAdjacentDays } = this;
+            let _month = month;
+            let _year = year;
+            if (showAdjacentDays && isAdjacentDay && day !== null) {
+                if (day > 20) {
+                    // Leading with the adjacent day from the previous month
+                    // if its a adjacent day and is higher than '20' (last week even in feb)
+                    if (month === 1) {
+                        _year = year - 1;
+                        _month = 12;
+                    }
+                    else {
+                        _month = month - 1;
+                    }
+                }
+                else if (day < 15) {
+                    // Leading with the adjacent day from the next month
+                    // if its a adjacent day and is lower than '15' (first two weeks)
+                    if (month === 12) {
+                        _year = year + 1;
+                        _month = 1;
+                    }
+                    else {
+                        _month = month + 1;
+                    }
+                }
+            }
+            const referenceParts = { month: _month, day, year: _year, isAdjacentDay };
             const isCalendarPadding = day === null;
             const { isActive, isToday, ariaLabel, ariaSelected, disabled: isDayDisabled, text, } = getCalendarDayState(this.locale, referenceParts, this.activeParts, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues);
             const dateIsoString = convertDataToISO(referenceParts);
@@ -1341,15 +1428,18 @@ export class Datetime {
              * Custom highlight styles should not override the style for selected dates,
              * nor apply to "filler days" at the start of the grid.
              */
-            if (highlightedDates !== undefined && !isActive && day !== null) {
+            if (highlightedDates !== undefined && !isActive && day !== null && !isAdjacentDay) {
                 dateStyle = getHighlightStyles(highlightedDates, dateIsoString, el);
             }
             let dateParts = undefined;
             // "Filler days" at the beginning of the grid should not get the calendar day
             // CSS parts added to them
-            if (!isCalendarPadding) {
+            if (!isCalendarPadding && !isAdjacentDay) {
                 dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}${isCalDayDisabled ? ' disabled' : ''}`;
             }
+            else if (isAdjacentDay) {
+                dateParts = `calendar-day${isCalDayDisabled ? ' disabled' : ''}`;
+            }
             return (h("div", { class: "calendar-day-wrapper" }, h("button", {
                 // We need to use !important for the inline styles here because
                 // otherwise the CSS shadow parts will override these styles.
@@ -1362,31 +1452,33 @@ export class Datetime {
                         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, "data-day-of-week": dayOfWeek, disabled: isButtonDisabled, class: {
                     'calendar-day-padding': isCalendarPadding,
                     'calendar-day': true,
                     'calendar-day-active': isActive,
                     'calendar-day-constrained': isCalDayConstrained,
                     'calendar-day-today': isToday,
+                    'calendar-day-adjacent-day': isAdjacentDay,
                 }, part: dateParts, "aria-hidden": isCalendarPadding ? 'true' : null, "aria-selected": ariaSelected, "aria-label": ariaLabel, onClick: () => {
                     if (isCalendarPadding) {
                         return;
                     }
-                    this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), { month,
-                        day,
-                        year }));
-                    // multiple only needs date info, so we can wipe out other fields like time
-                    if (multiple) {
-                        this.setActiveParts({
-                            month,
-                            day,
-                            year,
-                        }, isActive);
+                    if (isAdjacentDay) {
+                        // The user selected a day outside the current month. Ignore this button, as the month will be re-rendered.
+                        this.el.blur();
+                        this.activeParts = Object.assign(Object.assign({}, activePart), referenceParts);
+                        this.animateToDate(referenceParts);
+                        this.confirm();
                     }
                     else {
-                        this.setActiveParts(Object.assign(Object.assign({}, activePart), { month,
-                            day,
-                            year }));
+                        this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), referenceParts));
+                        // Multiple only needs date info so we can wipe out other fields like time.
+                        if (multiple) {
+                            this.setActiveParts(referenceParts, isActive);
+                        }
+                        else {
+                            this.setActiveParts(Object.assign(Object.assign({}, activePart), referenceParts));
+                        }
                     }
                 }
             }, text)));
@@ -1557,7 +1649,7 @@ export class Datetime {
         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: 'c3dfea8f46fcbcef38eb9e8a69b1b46a4e4b82fd', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '7ea46c27aa5fb01b748dd4d6eb2340ad13f65175', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1567,7 +1659,7 @@ export class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '75c91243cf6a51f44b83d7cf7d8c0c96bfd3c83f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: '6964378424c58b053e23279d08eaedf28dfcc315', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     static get is() { return "ion-datetime"; }
     static get encapsulation() { return "shadow"; }
@@ -1587,6 +1679,7 @@ export class Datetime {
         return {
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -1605,12 +1698,14 @@ 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)."
                 },
-                "attribute": "color",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'primary'"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1623,12 +1718,14 @@ export class Datetime {
                     "tags": [],
                     "text": "The name of the control, which is submitted with the form data."
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "this.inputId"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1641,12 +1738,14 @@ export class Datetime {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the datetime."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "formatOptions": {
                 "type": "unknown",
+                "attribute": "format-options",
                 "mutable": false,
                 "complexType": {
                     "original": "FormatOptions",
@@ -1664,10 +1763,13 @@ 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",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1680,12 +1782,14 @@ export class Datetime {
                     "tags": [],
                     "text": "If `true`, the datetime appears normal but the selected date cannot be changed."
                 },
-                "attribute": "readonly",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "isDateEnabled": {
                 "type": "unknown",
+                "attribute": "is-date-enabled",
                 "mutable": false,
                 "complexType": {
                     "original": "(dateIsoString: string) => boolean",
@@ -1697,10 +1801,33 @@ 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
+            },
+            "showAdjacentDays": {
+                "type": "boolean",
+                "attribute": "show-adjacent-days",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the datetime calendar displays a six-week (42-day) layout,\nincluding days from the previous and next months to fill the grid.\nThese adjacent days are selectable unless disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             },
             "min": {
                 "type": "string",
+                "attribute": "min",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1713,11 +1840,13 @@ 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."
                 },
-                "attribute": "min",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "max": {
                 "type": "string",
+                "attribute": "max",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1730,11 +1859,13 @@ 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."
                 },
-                "attribute": "max",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "presentation": {
                 "type": "string",
+                "attribute": "presentation",
                 "mutable": false,
                 "complexType": {
                     "original": "DatetimePresentation",
@@ -1753,12 +1884,14 @@ 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."
                 },
-                "attribute": "presentation",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'date-time'"
             },
             "cancelText": {
                 "type": "string",
+                "attribute": "cancel-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1771,12 +1904,14 @@ export class Datetime {
                     "tags": [],
                     "text": "The text to display on the picker's cancel button."
                 },
-                "attribute": "cancel-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'Cancel'"
             },
             "doneText": {
                 "type": "string",
+                "attribute": "done-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1789,12 +1924,14 @@ export class Datetime {
                     "tags": [],
                     "text": "The text to display on the picker's \"Done\" button."
                 },
-                "attribute": "done-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'Done'"
             },
             "clearText": {
                 "type": "string",
+                "attribute": "clear-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1807,12 +1944,14 @@ export class Datetime {
                     "tags": [],
                     "text": "The text to display on the picker's \"Clear\" button."
                 },
-                "attribute": "clear-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'Clear'"
             },
             "yearValues": {
                 "type": "any",
+                "attribute": "year-values",
                 "mutable": false,
                 "complexType": {
                     "original": "number[] | number | string",
@@ -1825,11 +1964,13 @@ 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\"`."
                 },
-                "attribute": "year-values",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "monthValues": {
                 "type": "any",
+                "attribute": "month-values",
                 "mutable": false,
                 "complexType": {
                     "original": "number[] | number | string",
@@ -1842,11 +1983,13 @@ 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`."
                 },
-                "attribute": "month-values",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "dayValues": {
                 "type": "any",
+                "attribute": "day-values",
                 "mutable": false,
                 "complexType": {
                     "original": "number[] | number | string",
@@ -1859,11 +2002,13 @@ 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."
                 },
-                "attribute": "day-values",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "hourValues": {
                 "type": "any",
+                "attribute": "hour-values",
                 "mutable": false,
                 "complexType": {
                     "original": "number[] | number | string",
@@ -1876,11 +2021,13 @@ 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."
                 },
-                "attribute": "hour-values",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "minuteValues": {
                 "type": "any",
+                "attribute": "minute-values",
                 "mutable": false,
                 "complexType": {
                     "original": "number[] | number | string",
@@ -1893,11 +2040,13 @@ 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\"`."
                 },
-                "attribute": "minute-values",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "locale": {
                 "type": "string",
+                "attribute": "locale",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1910,12 +2059,14 @@ 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."
                 },
-                "attribute": "locale",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'default'"
             },
             "firstDayOfWeek": {
                 "type": "number",
+                "attribute": "first-day-of-week",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -1928,12 +2079,14 @@ export class Datetime {
                     "tags": [],
                     "text": "The first day of the week to use for `ion-datetime`. The\ndefault value is `0` and represents Sunday."
                 },
-                "attribute": "first-day-of-week",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "0"
             },
             "titleSelectedDatesFormatter": {
                 "type": "unknown",
+                "attribute": "title-selected-dates-formatter",
                 "mutable": false,
                 "complexType": {
                     "original": "TitleSelectedDatesFormatter",
@@ -1951,10 +2104,13 @@ 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",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1967,12 +2123,14 @@ export class Datetime {
                     "tags": [],
                     "text": "If `true`, multiple dates can be selected at once. Only\napplies to `presentation=\"date\"` and `preferWheel=\"false\"`."
                 },
-                "attribute": "multiple",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "highlightedDates": {
                 "type": "unknown",
+                "attribute": "highlighted-dates",
                 "mutable": false,
                 "complexType": {
                     "original": "DatetimeHighlight[] | DatetimeHighlightCallback",
@@ -1995,10 +2153,13 @@ 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",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string | string[] | null",
@@ -2011,11 +2172,13 @@ 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\"`."
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "showDefaultTitle": {
                 "type": "boolean",
+                "attribute": "show-default-title",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -2028,12 +2191,14 @@ 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."
                 },
-                "attribute": "show-default-title",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "showDefaultButtons": {
                 "type": "boolean",
+                "attribute": "show-default-buttons",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -2046,12 +2211,14 @@ 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."
                 },
-                "attribute": "show-default-buttons",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "showClearButton": {
                 "type": "boolean",
+                "attribute": "show-clear-button",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -2064,12 +2231,14 @@ 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."
                 },
-                "attribute": "show-clear-button",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "showDefaultTimeLabel": {
                 "type": "boolean",
+                "attribute": "show-default-time-label",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -2082,12 +2251,14 @@ 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."
                 },
-                "attribute": "show-default-time-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "hourCycle": {
                 "type": "string",
+                "attribute": "hour-cycle",
                 "mutable": false,
                 "complexType": {
                     "original": "DatetimeHourCycle",
@@ -2106,11 +2277,13 @@ export class Datetime {
                     "tags": [],
                     "text": "The hour cycle of the `ion-datetime`. If no value is set, this is\nspecified by the current locale."
                 },
-                "attribute": "hour-cycle",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'cover' | 'fixed'",
@@ -2123,12 +2296,14 @@ 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."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'fixed'"
             },
             "preferWheel": {
                 "type": "boolean",
+                "attribute": "prefer-wheel",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -2141,7 +2316,8 @@ 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\"`."
                 },
-                "attribute": "prefer-wheel",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }