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

package/dist/esm/ion-datetime-button.entry.js

@@ -1,46 +1,255 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, g as getElement, j as printIonError, h, d as Host } from './index-ChhhtsGZ.js';
-import { c as componentOnReady, f as addEventListener } from './helpers-CAGf8Wgp.js';
-import { c as createColorClasses } from './theme-byZM6qHV.js';
-import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
-import { F as parseDate, d as getHourCycle, P as getLocalizedDateTime, O as getLocalizedTime } from './format-Dcwga61t.js';
-import './dir-Dojwmvde.js';
+import { r as registerInstance, j as printIonError, h, d as Host, g as getElement } from './index-C0EQceqV.js';
+import { f as addEventListener, c as componentOnReady } from './helpers-ChPZH7zh.js';
+import { c as createColorClasses } from './theme-DaJxRxSQ.js';
+import { c as getIonTheme } from './ionic-global-BJDU78B6.js';
+import { D as parseDate, d as getHourCycle, P as getLocalizedDateTime, O as getLocalizedTime } from './format-2WlZcMvG.js';
+import './focus-visible-vXpMhGrs.js';
+import './dir-o8OKV5aD.js';
 
-const datetimeButtonIosCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}: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)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}:host button{-webkit-padding-start:13px;padding-inline-start:13px;-webkit-padding-end:13px;padding-inline-end:13px;padding-top:7px;padding-bottom:7px}:host button.ion-activated{color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}`;
+const ionicDatetimeButtonMdCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.time-active) #time-button,:host(.date-active) #date-button{color:var(--ion-color-base)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}:host button{-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px}`;
 
-const datetimeButtonMdCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}: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)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}:host button{-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px}`;
+const datetimeButtonIosCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.time-active) #time-button,:host(.date-active) #date-button{color:var(--ion-color-base)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}:host button{-webkit-padding-start:13px;padding-inline-start:13px;-webkit-padding-end:13px;padding-inline-end:13px;padding-top:7px;padding-bottom:7px}:host button.ion-activated{color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}`;
+
+const datetimeButtonMdCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.time-active) #time-button,:host(.date-active) #date-button{color:var(--ion-color-base)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}:host button{-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px}`;
 
 const DatetimeButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        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();
+            }
+        };
     }
-    datetimeEl = null;
-    overlayEl = null;
-    dateTargetEl;
-    timeTargetEl;
-    get el() { return getElement(this); }
-    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;
     async componentWillLoad() {
         const { datetime } = this;
         if (!datetime) {
@@ -129,236 +338,19 @@ const DatetimeButton = class {
             }
         });
     }
-    /**
-     * 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' })))));
     }
+    get el() { return getElement(this); }
 };
 DatetimeButton.style = {
+    ionic: ionicDatetimeButtonMdCss(),
     ios: datetimeButtonIosCss(),
     md: datetimeButtonMdCss()
 };