@ionic/core 8.7.6-dev.11759412372.1f332f62 → 8.7.6-dev.11759493293.13f81b9f

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";
@@ -9,7 +11,8 @@ import { FOCUS_TRAP_DISABLE_CLASS } from "../../utils/overlays";
 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";
@@ -19,7 +22,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.
@@ -1057,6 +1061,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
@@ -1064,6 +1069,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;
@@ -1082,7 +1088,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
@@ -1333,10 +1339,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
@@ -1345,7 +1349,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);
         }))));
     }
@@ -1497,8 +1501,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;
@@ -1606,7 +1610,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.
@@ -1620,7 +1624,7 @@ export class Datetime {
             case 'date-time':
                 return [
                     this.renderHeader(),
-                    this.renderCalendar(mode),
+                    this.renderCalendar(theme),
                     this.renderCalendarViewMonthYearPicker(),
                     this.renderTime(),
                     this.renderFooter(),
@@ -1629,7 +1633,7 @@ export class Datetime {
                 return [
                     this.renderHeader(),
                     this.renderTime(),
-                    this.renderCalendar(mode),
+                    this.renderCalendar(theme),
                     this.renderCalendarViewMonthYearPicker(),
                     this.renderFooter(),
                 ];
@@ -1642,23 +1646,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: '57492534800ea059a7c2bbd9f0059cc0b75ae8d2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: 'd87c9e8d85ae7b1c8af3c8f266b76dd8d364a446', "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,
@@ -1667,27 +1743,28 @@ export class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '97dac5e5195635ac0bc5fb472b9d09e5c3c6bbc3', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: '4d2e7316268ebbadf79f00b5d85928bbeffd283d', 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() {
         return {
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -1709,11 +1786,11 @@ export class Datetime {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "color",
                 "defaultValue": "'primary'"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1729,11 +1806,11 @@ export class Datetime {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "name",
                 "defaultValue": "this.inputId"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1749,11 +1826,11 @@ export class Datetime {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "formatOptions": {
                 "type": "unknown",
-                "attribute": "format-options",
                 "mutable": false,
                 "complexType": {
                     "original": "FormatOptions",
@@ -1777,7 +1854,6 @@ export class Datetime {
             },
             "readonly": {
                 "type": "boolean",
-                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1793,11 +1869,11 @@ export class Datetime {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "readonly",
                 "defaultValue": "false"
             },
             "isDateEnabled": {
                 "type": "unknown",
-                "attribute": "is-date-enabled",
                 "mutable": false,
                 "complexType": {
                     "original": "(dateIsoString: string) => boolean",
@@ -1815,7 +1891,6 @@ export class Datetime {
             },
             "showAdjacentDays": {
                 "type": "boolean",
-                "attribute": "show-adjacent-days",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1831,11 +1906,11 @@ export class Datetime {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "show-adjacent-days",
                 "defaultValue": "false"
             },
             "min": {
                 "type": "string",
-                "attribute": "min",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1850,11 +1925,11 @@ export class Datetime {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "min"
             },
             "max": {
                 "type": "string",
-                "attribute": "max",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1869,11 +1944,11 @@ export class Datetime {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "max"
             },
             "presentation": {
                 "type": "string",
-                "attribute": "presentation",
                 "mutable": false,
                 "complexType": {
                     "original": "DatetimePresentation",
@@ -1895,11 +1970,11 @@ export class Datetime {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "presentation",
                 "defaultValue": "'date-time'"
             },
             "cancelText": {
                 "type": "string",
-                "attribute": "cancel-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1915,11 +1990,11 @@ export class Datetime {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "cancel-text",
                 "defaultValue": "'Cancel'"
             },
             "doneText": {
                 "type": "string",
-                "attribute": "done-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1935,11 +2010,11 @@ export class Datetime {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "done-text",
                 "defaultValue": "'Done'"
             },
             "clearText": {
                 "type": "string",
-                "attribute": "clear-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1955,11 +2030,11 @@ export class Datetime {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "clear-text",
                 "defaultValue": "'Clear'"
             },
             "yearValues": {
                 "type": "any",
-                "attribute": "year-values",
                 "mutable": false,
                 "complexType": {
                     "original": "number[] | number | string",
@@ -1974,11 +2049,11 @@ export class Datetime {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "year-values"
             },
             "monthValues": {
                 "type": "any",
-                "attribute": "month-values",
                 "mutable": false,
                 "complexType": {
                     "original": "number[] | number | string",
@@ -1993,11 +2068,11 @@ export class Datetime {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "month-values"
             },
             "dayValues": {
                 "type": "any",
-                "attribute": "day-values",
                 "mutable": false,
                 "complexType": {
                     "original": "number[] | number | string",
@@ -2012,11 +2087,11 @@ export class Datetime {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "day-values"
             },
             "hourValues": {
                 "type": "any",
-                "attribute": "hour-values",
                 "mutable": false,
                 "complexType": {
                     "original": "number[] | number | string",
@@ -2031,11 +2106,11 @@ export class Datetime {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "hour-values"
             },
             "minuteValues": {
                 "type": "any",
-                "attribute": "minute-values",
                 "mutable": false,
                 "complexType": {
                     "original": "number[] | number | string",
@@ -2050,11 +2125,11 @@ export class Datetime {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "minute-values"
             },
             "locale": {
                 "type": "string",
-                "attribute": "locale",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -2070,11 +2145,11 @@ export class Datetime {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "locale",
                 "defaultValue": "'default'"
             },
             "firstDayOfWeek": {
                 "type": "number",
-                "attribute": "first-day-of-week",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -2090,11 +2165,11 @@ export class Datetime {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "first-day-of-week",
                 "defaultValue": "0"
             },
             "titleSelectedDatesFormatter": {
                 "type": "unknown",
-                "attribute": "title-selected-dates-formatter",
                 "mutable": false,
                 "complexType": {
                     "original": "TitleSelectedDatesFormatter",
@@ -2118,7 +2193,6 @@ export class Datetime {
             },
             "multiple": {
                 "type": "boolean",
-                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -2134,11 +2208,11 @@ export class Datetime {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "multiple",
                 "defaultValue": "false"
             },
             "highlightedDates": {
                 "type": "unknown",
-                "attribute": "highlighted-dates",
                 "mutable": false,
                 "complexType": {
                     "original": "DatetimeHighlight[] | DatetimeHighlightCallback",
@@ -2167,7 +2241,6 @@ export class Datetime {
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string | string[] | null",
@@ -2182,11 +2255,11 @@ export class Datetime {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "showDefaultTitle": {
                 "type": "boolean",
-                "attribute": "show-default-title",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -2202,11 +2275,11 @@ export class Datetime {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "show-default-title",
                 "defaultValue": "false"
             },
             "showDefaultButtons": {
                 "type": "boolean",
-                "attribute": "show-default-buttons",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -2222,11 +2295,11 @@ export class Datetime {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "show-default-buttons",
                 "defaultValue": "false"
             },
             "showClearButton": {
                 "type": "boolean",
-                "attribute": "show-clear-button",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -2242,11 +2315,11 @@ export class Datetime {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "show-clear-button",
                 "defaultValue": "false"
             },
             "showDefaultTimeLabel": {
                 "type": "boolean",
-                "attribute": "show-default-time-label",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -2262,11 +2335,11 @@ export class Datetime {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "show-default-time-label",
                 "defaultValue": "true"
             },
             "hourCycle": {
                 "type": "string",
-                "attribute": "hour-cycle",
                 "mutable": false,
                 "complexType": {
                     "original": "DatetimeHourCycle",
@@ -2287,11 +2360,11 @@ export class Datetime {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "hour-cycle"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'cover' | 'fixed'",
@@ -2307,11 +2380,11 @@ export class Datetime {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'fixed'"
             },
             "preferWheel": {
                 "type": "boolean",
-                "attribute": "prefer-wheel",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -2327,6 +2400,7 @@ export class Datetime {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "prefer-wheel",
                 "defaultValue": "false"
             }
         };