@ionic/core 8.5.5-dev.11744728652.115947e1 → 8.5.5-dev.11744821352.11e7a84f

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.
@@ -56,7 +60,7 @@ export class Datetime {
                  * Default toString() behavior: a,b
                  * Custom behavior: ['a', 'b']
                  */
-                printIonWarning(`[ion-datetime] - An array of values was passed, but multiple is "false". This is incorrect usage and may result in unexpected behaviors. To dismiss this warning, pass a string to the "value" property when multiple="false".
+                printIonWarning(`ion-datetime was passed an array of values, but multiple="false". This is incorrect usage and may result in unexpected behaviors. To dismiss this warning, pass a string to the "value" property when multiple="false".
 
   Value Passed: [${value.map((v) => `'${v}'`).join(', ')}]
 `, this.el);
@@ -937,18 +941,18 @@ export class Datetime {
         const { el, formatOptions, highlightedDates, multiple, presentation, preferWheel } = this;
         if (multiple) {
             if (presentation !== 'date') {
-                printIonWarning('[ion-datetime] - Multiple date selection is only supported for presentation="date".', el);
+                printIonWarning('Multiple date selection is only supported for presentation="date".', el);
             }
             if (preferWheel) {
-                printIonWarning('[ion-datetime] - Multiple date selection is not supported with preferWheel="true".', el);
+                printIonWarning('Multiple date selection is not supported with preferWheel="true".', el);
             }
         }
         if (highlightedDates !== undefined) {
             if (presentation !== 'date' && presentation !== 'date-time' && presentation !== 'time-date') {
-                printIonWarning('[ion-datetime] - The highlightedDates property is only supported with the date, date-time, and time-date presentations.', el);
+                printIonWarning('The highlightedDates property is only supported with the date, date-time, and time-date presentations.', el);
             }
             if (preferWheel) {
-                printIonWarning('[ion-datetime] - The highlightedDates property is not supported with preferWheel="true".', el);
+                printIonWarning('The highlightedDates property is not supported with preferWheel="true".', el);
             }
         }
         if (formatOptions) {
@@ -989,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
@@ -996,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;
@@ -1014,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
@@ -1079,7 +1085,7 @@ export class Datetime {
                     disabled = !isDateEnabled(convertDataToISO(referenceParts));
                 }
                 catch (e) {
-                    printIonError('[ion-datetime] - Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
+                    printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
                 }
                 return Object.assign(Object.assign({}, itemObject), { disabled });
             });
@@ -1128,7 +1134,7 @@ export class Datetime {
                     disabled = !isDateEnabled(convertDataToISO(referenceParts));
                 }
                 catch (e) {
-                    printIonError('[ion-datetime] - Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
+                    printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
                 }
                 return Object.assign(Object.assign({}, dayObject), { disabled });
             });
@@ -1265,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
@@ -1277,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);
         }))));
     }
@@ -1326,7 +1330,7 @@ export class Datetime {
                     isCalDayDisabled = !isDateEnabled(dateIsoString);
                 }
                 catch (e) {
-                    printIonError('[ion-datetime] - Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', el, e);
+                    printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', el, e);
                 }
             }
             /**
@@ -1397,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;
@@ -1462,7 +1466,7 @@ export class Datetime {
                     headerText = titleSelectedDatesFormatter(convertDataToISO(activeParts));
                 }
                 catch (e) {
-                    printIonError('[ion-datetime] - Exception in provided `titleSelectedDatesFormatter`:', e);
+                    printIonError('Exception in provided `titleSelectedDatesFormatter`: ', e);
                 }
             }
         }
@@ -1506,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.
@@ -1520,7 +1524,7 @@ export class Datetime {
             case 'date-time':
                 return [
                     this.renderHeader(),
-                    this.renderCalendar(mode),
+                    this.renderCalendar(theme),
                     this.renderCalendarViewMonthYearPicker(),
                     this.renderTime(),
                     this.renderFooter(),
@@ -1529,7 +1533,7 @@ export class Datetime {
                 return [
                     this.renderHeader(),
                     this.renderTime(),
-                    this.renderCalendar(mode),
+                    this.renderCalendar(theme),
                     this.renderCalendarViewMonthYearPicker(),
                     this.renderFooter(),
                 ];
@@ -1542,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: 'c3dfea8f46fcbcef38eb9e8a69b1b46a4e4b82fd', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: '14466e4eb83d2fe6ec8ad40ae4233a1829eba008', "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,
@@ -1567,20 +1643,22 @@ 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: '0a07af77c636e5dbc8ccb927e6ce471213d97ead', 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() {