@ionic/core 8.8.20-dev.11787158518.168a2fea → 8.8.20-dev.11789504012.1a675914

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

@@ -5,12 +5,13 @@ import { Host, h } from "@stencil/core";
 import { componentOnReady, addEventListener } from "../../utils/helpers";
 import { printIonError } from "../../utils/logging/index";
 import { createColorClasses } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 import { getLocalizedDateTime, getLocalizedTime } from "../datetime/utils/format";
 import { getHourCycle } from "../datetime/utils/helpers";
 import { parseDate } from "../datetime/utils/parse";
 /**
- * @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 date-target - Content displayed inside of the date button.
  * @slot time-target - Content displayed inside of the time button.
@@ -18,31 +19,239 @@ import { parseDate } from "../datetime/utils/parse";
  * @part native - The native HTML button that wraps the slotted text.
  */
 export class DatetimeButton {
-    datetimeEl = null;
-    overlayEl = null;
-    dateTargetEl;
-    timeTargetEl;
-    el;
-    datetimePresentation = 'date-time';
-    dateText;
-    timeText;
-    datetimeActive = false;
-    selectedButton;
-    /**
-     * 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).
-     */
-    color;
-    /**
-     * If `true`, the user cannot interact with the button.
-     */
-    disabled = false;
-    /**
-     * The ID of the `ion-datetime` instance
-     * associated with the datetime button.
-     */
-    datetime;
+    constructor() {
+        this.datetimeEl = null;
+        this.overlayEl = null;
+        this.datetimePresentation = 'date-time';
+        this.datetimeActive = 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';
+        /**
+         * If `true`, the user cannot interact with the button.
+         */
+        this.disabled = false;
+        /**
+         * Accepts one or more string values and converts
+         * them to DatetimeParts. This is done so datetime-button
+         * can work with an array internally and not need
+         * to keep checking if the datetime value is `string` or `string[]`.
+         */
+        this.getParsedDateValues = (value) => {
+            if (value === undefined || value === null) {
+                return [];
+            }
+            if (Array.isArray(value)) {
+                return value;
+            }
+            return [value];
+        };
+        /**
+         * Check the value property on the linked
+         * ion-datetime and then format it according
+         * to the locale specified on ion-datetime.
+         */
+        this.setDateTimeText = async () => {
+            var _a, _b, _c, _d, _e;
+            const { datetimeEl, datetimePresentation } = this;
+            if (!datetimeEl) {
+                return;
+            }
+            const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
+            const parsedValues = this.getParsedDateValues(value);
+            /**
+             * Both ion-datetime and ion-datetime-button default to today's date and
+             * time if no value is set. We read the datetime's computed default so the
+             * button respects the same constraints (min, max, minuteValues, etc.) that
+             * the datetime applies to its own fallback, instead of using a raw "now".
+             */
+            const parsedDatetimes = parsedValues.length > 0 ? parseDate(parsedValues) : [await datetimeEl.getDefaultPart()];
+            if (!parsedDatetimes) {
+                return;
+            }
+            /**
+             * If developers incorrectly use multiple="true"
+             * with non "date" datetimes, then just select
+             * the first value so the interface does
+             * not appear broken. Datetime will provide a
+             * warning in the console.
+             */
+            const firstParsedDatetime = parsedDatetimes[0];
+            const computedHourCycle = getHourCycle(locale, hourCycle);
+            this.dateText = this.timeText = undefined;
+            switch (datetimePresentation) {
+                case 'date-time':
+                case 'time-date':
+                    const dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _a !== void 0 ? _a : { month: 'short', day: 'numeric', year: 'numeric' });
+                    const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
+                    if (preferWheel) {
+                        this.dateText = `${dateText} ${timeText}`;
+                    }
+                    else {
+                        this.dateText = dateText;
+                        this.timeText = timeText;
+                    }
+                    break;
+                case 'date':
+                    if (multiple && parsedValues.length !== 1) {
+                        let headerText = `${parsedValues.length} days`; // default/fallback for multiple selection
+                        if (titleSelectedDatesFormatter !== undefined) {
+                            try {
+                                headerText = titleSelectedDatesFormatter(parsedValues);
+                            }
+                            catch (e) {
+                                printIonError('[ion-datetime-button] - Exception in provided `titleSelectedDatesFormatter`:', e);
+                            }
+                        }
+                        this.dateText = headerText;
+                    }
+                    else {
+                        this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_b = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _b !== void 0 ? _b : { month: 'short', day: 'numeric', year: 'numeric' });
+                    }
+                    break;
+                case 'time':
+                    this.timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
+                    break;
+                case 'month-year':
+                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_c = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _c !== void 0 ? _c : { month: 'long', year: 'numeric' });
+                    break;
+                case 'month':
+                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_d = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _d !== void 0 ? _d : { month: 'long' });
+                    break;
+                case 'year':
+                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_e = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _e !== void 0 ? _e : { year: 'numeric' });
+                    break;
+            }
+        };
+        /**
+         * Waits for the ion-datetime to re-render.
+         * This is needed in order to correctly position
+         * a popover relative to the trigger element.
+         */
+        this.waitForDatetimeChanges = async () => {
+            const { datetimeEl } = this;
+            if (!datetimeEl) {
+                return Promise.resolve();
+            }
+            return new Promise((resolve) => {
+                addEventListener(datetimeEl, 'ionRender', resolve, { once: true });
+            });
+        };
+        this.handleDateClick = async (ev) => {
+            const { datetimeEl, datetimePresentation } = this;
+            if (!datetimeEl) {
+                return;
+            }
+            let needsPresentationChange = false;
+            /**
+             * When clicking the date button,
+             * we need to make sure that only a date
+             * picker is displayed. For presentation styles
+             * that display content other than a date picker,
+             * we need to update the presentation style.
+             */
+            switch (datetimePresentation) {
+                case 'date-time':
+                case 'time-date':
+                    const needsChange = datetimeEl.presentation !== 'date';
+                    /**
+                     * The date+time wheel picker
+                     * shows date and time together,
+                     * so do not adjust the presentation
+                     * in that case.
+                     */
+                    if (!datetimeEl.preferWheel && needsChange) {
+                        datetimeEl.presentation = 'date';
+                        needsPresentationChange = true;
+                    }
+                    break;
+            }
+            /**
+             * Track which button was clicked
+             * so that it can have the correct
+             * activated styles applied when
+             * the modal/popover containing
+             * the datetime is opened.
+             */
+            this.selectedButton = 'date';
+            this.presentOverlay(ev, needsPresentationChange, this.dateTargetEl);
+        };
+        this.handleTimeClick = (ev) => {
+            const { datetimeEl, datetimePresentation } = this;
+            if (!datetimeEl) {
+                return;
+            }
+            let needsPresentationChange = false;
+            /**
+             * When clicking the time button,
+             * we need to make sure that only a time
+             * picker is displayed. For presentation styles
+             * that display content other than a time picker,
+             * we need to update the presentation style.
+             */
+            switch (datetimePresentation) {
+                case 'date-time':
+                case 'time-date':
+                    const needsChange = datetimeEl.presentation !== 'time';
+                    if (needsChange) {
+                        datetimeEl.presentation = 'time';
+                        needsPresentationChange = true;
+                    }
+                    break;
+            }
+            /**
+             * Track which button was clicked
+             * so that it can have the correct
+             * activated styles applied when
+             * the modal/popover containing
+             * the datetime is opened.
+             */
+            this.selectedButton = 'time';
+            this.presentOverlay(ev, needsPresentationChange, this.timeTargetEl);
+        };
+        /**
+         * If the datetime is presented in an
+         * overlay, the datetime and overlay
+         * should be appropriately sized.
+         * These classes provide default sizing values
+         * that developers can customize.
+         * The goal is to provide an overlay that is
+         * reasonably sized with a datetime that
+         * fills the entire container.
+         */
+        this.presentOverlay = async (ev, needsPresentationChange, triggerEl) => {
+            const { overlayEl } = this;
+            if (!overlayEl) {
+                return;
+            }
+            if (overlayEl.tagName === 'ION-POPOVER') {
+                /**
+                 * When the presentation on datetime changes,
+                 * we need to wait for the component to re-render
+                 * otherwise the computed width/height of the
+                 * popover content will be wrong, causing
+                 * the popover to not align with the trigger element.
+                 */
+                if (needsPresentationChange) {
+                    await this.waitForDatetimeChanges();
+                }
+                /**
+                 * We pass the trigger button element
+                 * so that the popover aligns with the individual
+                 * button that was clicked, not the component container.
+                 */
+                overlayEl.present(Object.assign(Object.assign({}, ev), { detail: {
+                        ionShadowTarget: triggerEl,
+                    } }));
+            }
+            else {
+                overlayEl.present();
+            }
+        };
+    }
     async componentWillLoad() {
         const { datetime } = this;
         if (!datetime) {
@@ -131,246 +340,29 @@ export class DatetimeButton {
             }
         });
     }
-    /**
-     * Accepts one or more string values and converts
-     * them to DatetimeParts. This is done so datetime-button
-     * can work with an array internally and not need
-     * to keep checking if the datetime value is `string` or `string[]`.
-     */
-    getParsedDateValues = (value) => {
-        if (value === undefined || value === null) {
-            return [];
-        }
-        if (Array.isArray(value)) {
-            return value;
-        }
-        return [value];
-    };
-    /**
-     * Check the value property on the linked
-     * ion-datetime and then format it according
-     * to the locale specified on ion-datetime.
-     */
-    setDateTimeText = async () => {
-        const { datetimeEl, datetimePresentation } = this;
-        if (!datetimeEl) {
-            return;
-        }
-        const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
-        const parsedValues = this.getParsedDateValues(value);
-        /**
-         * Both ion-datetime and ion-datetime-button default to today's date and
-         * time if no value is set. We read the datetime's computed default so the
-         * button respects the same constraints (min, max, minuteValues, etc.) that
-         * the datetime applies to its own fallback, instead of using a raw "now".
-         */
-        const parsedDatetimes = parsedValues.length > 0 ? parseDate(parsedValues) : [await datetimeEl.getDefaultPart()];
-        if (!parsedDatetimes) {
-            return;
-        }
-        /**
-         * If developers incorrectly use multiple="true"
-         * with non "date" datetimes, then just select
-         * the first value so the interface does
-         * not appear broken. Datetime will provide a
-         * warning in the console.
-         */
-        const firstParsedDatetime = parsedDatetimes[0];
-        const computedHourCycle = getHourCycle(locale, hourCycle);
-        this.dateText = this.timeText = undefined;
-        switch (datetimePresentation) {
-            case 'date-time':
-            case 'time-date':
-                const dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' });
-                const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions?.time);
-                if (preferWheel) {
-                    this.dateText = `${dateText} ${timeText}`;
-                }
-                else {
-                    this.dateText = dateText;
-                    this.timeText = timeText;
-                }
-                break;
-            case 'date':
-                if (multiple && parsedValues.length !== 1) {
-                    let headerText = `${parsedValues.length} days`; // default/fallback for multiple selection
-                    if (titleSelectedDatesFormatter !== undefined) {
-                        try {
-                            headerText = titleSelectedDatesFormatter(parsedValues);
-                        }
-                        catch (e) {
-                            printIonError('[ion-datetime-button] - Exception in provided `titleSelectedDatesFormatter`:', e);
-                        }
-                    }
-                    this.dateText = headerText;
-                }
-                else {
-                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' });
-                }
-                break;
-            case 'time':
-                this.timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions?.time);
-                break;
-            case 'month-year':
-                this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.date ?? { month: 'long', year: 'numeric' });
-                break;
-            case 'month':
-                this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.time ?? { month: 'long' });
-                break;
-            case 'year':
-                this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.time ?? { year: 'numeric' });
-                break;
-        }
-    };
-    /**
-     * Waits for the ion-datetime to re-render.
-     * This is needed in order to correctly position
-     * a popover relative to the trigger element.
-     */
-    waitForDatetimeChanges = async () => {
-        const { datetimeEl } = this;
-        if (!datetimeEl) {
-            return Promise.resolve();
-        }
-        return new Promise((resolve) => {
-            addEventListener(datetimeEl, 'ionRender', resolve, { once: true });
-        });
-    };
-    handleDateClick = async (ev) => {
-        const { datetimeEl, datetimePresentation } = this;
-        if (!datetimeEl) {
-            return;
-        }
-        let needsPresentationChange = false;
-        /**
-         * When clicking the date button,
-         * we need to make sure that only a date
-         * picker is displayed. For presentation styles
-         * that display content other than a date picker,
-         * we need to update the presentation style.
-         */
-        switch (datetimePresentation) {
-            case 'date-time':
-            case 'time-date':
-                const needsChange = datetimeEl.presentation !== 'date';
-                /**
-                 * The date+time wheel picker
-                 * shows date and time together,
-                 * so do not adjust the presentation
-                 * in that case.
-                 */
-                if (!datetimeEl.preferWheel && needsChange) {
-                    datetimeEl.presentation = 'date';
-                    needsPresentationChange = true;
-                }
-                break;
-        }
-        /**
-         * Track which button was clicked
-         * so that it can have the correct
-         * activated styles applied when
-         * the modal/popover containing
-         * the datetime is opened.
-         */
-        this.selectedButton = 'date';
-        this.presentOverlay(ev, needsPresentationChange, this.dateTargetEl);
-    };
-    handleTimeClick = (ev) => {
-        const { datetimeEl, datetimePresentation } = this;
-        if (!datetimeEl) {
-            return;
-        }
-        let needsPresentationChange = false;
-        /**
-         * When clicking the time button,
-         * we need to make sure that only a time
-         * picker is displayed. For presentation styles
-         * that display content other than a time picker,
-         * we need to update the presentation style.
-         */
-        switch (datetimePresentation) {
-            case 'date-time':
-            case 'time-date':
-                const needsChange = datetimeEl.presentation !== 'time';
-                if (needsChange) {
-                    datetimeEl.presentation = 'time';
-                    needsPresentationChange = true;
-                }
-                break;
-        }
-        /**
-         * Track which button was clicked
-         * so that it can have the correct
-         * activated styles applied when
-         * the modal/popover containing
-         * the datetime is opened.
-         */
-        this.selectedButton = 'time';
-        this.presentOverlay(ev, needsPresentationChange, this.timeTargetEl);
-    };
-    /**
-     * If the datetime is presented in an
-     * overlay, the datetime and overlay
-     * should be appropriately sized.
-     * These classes provide default sizing values
-     * that developers can customize.
-     * The goal is to provide an overlay that is
-     * reasonably sized with a datetime that
-     * fills the entire container.
-     */
-    presentOverlay = async (ev, needsPresentationChange, triggerEl) => {
-        const { overlayEl } = this;
-        if (!overlayEl) {
-            return;
-        }
-        if (overlayEl.tagName === 'ION-POPOVER') {
-            /**
-             * When the presentation on datetime changes,
-             * we need to wait for the component to re-render
-             * otherwise the computed width/height of the
-             * popover content will be wrong, causing
-             * the popover to not align with the trigger element.
-             */
-            if (needsPresentationChange) {
-                await this.waitForDatetimeChanges();
-            }
-            /**
-             * We pass the trigger button element
-             * so that the popover aligns with the individual
-             * button that was clicked, not the component container.
-             */
-            overlayEl.present({
-                ...ev,
-                detail: {
-                    ionShadowTarget: triggerEl,
-                },
-            });
-        }
-        else {
-            overlayEl.present();
-        }
-    };
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
-        const mode = getIonMode(this);
-        return (h(Host, { key: '2aaa284fe9b53b6347fcb5a1d325fbab1a6f38bd', class: createColorClasses(color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '5324999adc34e2f34aae2825427c28130bc399b4', class: createColorClasses(color, {
+                [theme]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
-            }) }, dateText && (h("button", { key: 'd9698471fa5d5c834ca73db57f9ed98dfc705b4c', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: 'c8761a7f25ae5b93c953b3486dd6335f5ad4fd53', name: "date-target" }, dateText), mode === 'md' && h("ion-ripple-effect", { key: '3dd5e97af8d35a2b008de4ab01f690b3c2223135' }))), timeText && (h("button", { key: '1107ca2382940b642b551f885f7ca763012c236c', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: '5cff53e486923b03715b9ab4dc0947e26f4ea1d9', name: "time-target" }, timeText), mode === 'md' && h("ion-ripple-effect", { key: '5aac1facb6fc7457307c4f59a241e3a5b31facc8' })))));
+            }) }, dateText && (h("button", { key: '565c74efa16fc02a70a6f1ef6b073eb143ab9f07', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: 'c487bd5ae42a089ce22a7cb1bb67016910e24bd0', name: "date-target" }, dateText), theme === 'md' && h("ion-ripple-effect", { key: 'c871fee2350e3207efc2338d229b809f8b44dca9' }))), timeText && (h("button", { key: '7acf19c3d1446133107a622851dfff2d6088cb8d', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: '6091b9d32d423ce438605005077087fc009fd8e7', name: "time-target" }, timeText), theme === 'md' && h("ion-ripple-effect", { key: 'b71f93aa14aa0b7bdfe9ad4ca9bcb90880d23b0e' })))));
     }
     static get is() { return "ion-datetime-button"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["datetime-button.ios.scss"],
-            "md": ["datetime-button.md.scss"]
+            "md": ["datetime-button.md.scss"],
+            "ionic": ["datetime-button.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["datetime-button.ios.css"],
-            "md": ["datetime-button.md.css"]
+            "md": ["datetime-button.md.css"],
+            "ionic": ["datetime-button.md.css"]
         };
     }
     static get properties() {
@@ -399,7 +391,8 @@ export class DatetimeButton {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "color"
+                "attribute": "color",
+                "defaultValue": "'primary'"
             },
             "disabled": {
                 "type": "boolean",

package/dist/collection/components/datetime-button/datetime-button.md.css

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -82,11 +88,6 @@
 
 :host(.time-active) #time-button,
 :host(.date-active) #date-button {
-  color: var(--ion-color-primary, #0054e9);
-}
-
-:host(.ion-color.time-active) #time-button,
-:host(.ion-color.date-active) #date-button {
   color: var(--ion-color-base);
 }