voyager-ionic-core 8.5.3 → 8.5.6

package/components/index5.js

@@ -1,7 +1,306 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-const win = typeof window !== 'undefined' ? window : undefined;
-const doc = typeof document !== 'undefined' ? document : undefined;
+import { d as doc } from './index6.js';
+import { MENU_BACK_BUTTON_PRIORITY } from './hardware-back-button.js';
+import { a as printIonWarning } from './index4.js';
+import { c as componentOnReady } from './helpers.js';
+import { b as getIonMode } from './ionic-global.js';
+import { c as createAnimation } from './animation.js';
 
-export { doc as d, win as w };
+/**
+ * baseAnimation
+ * Base class which is extended by the various types. Each
+ * type will provide their own animations for open and close
+ * and registers itself with Menu.
+ */
+const baseAnimation = (isIos) => {
+    // https://material.io/guidelines/motion/movement.html#movement-movement-in-out-of-screen-bounds
+    // https://material.io/guidelines/motion/duration-easing.html#duration-easing-natural-easing-curves
+    /**
+     * "Apply the sharp curve to items temporarily leaving the screen that may return
+     * from the same exit point. When they return, use the deceleration curve. On mobile,
+     * this transition typically occurs over 300ms" -- MD Motion Guide
+     */
+    return createAnimation().duration(isIos ? 400 : 300);
+};
+
+/**
+ * Menu Overlay Type
+ * The menu slides over the content. The content
+ * itself, which is under the menu, does not move.
+ */
+const menuOverlayAnimation = (menu) => {
+    let closedX;
+    let openedX;
+    const width = menu.width + 8;
+    const menuAnimation = createAnimation();
+    const backdropAnimation = createAnimation();
+    if (menu.isEndSide) {
+        // right side
+        closedX = width + 'px';
+        openedX = '0px';
+    }
+    else {
+        // left side
+        closedX = -width + 'px';
+        openedX = '0px';
+    }
+    menuAnimation.addElement(menu.menuInnerEl).fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
+    const mode = getIonMode(menu);
+    const isIos = mode === 'ios';
+    const opacity = isIos ? 0.2 : 0.25;
+    backdropAnimation.addElement(menu.backdropEl).fromTo('opacity', 0.01, opacity);
+    return baseAnimation(isIos).addAnimation([menuAnimation, backdropAnimation]);
+};
+
+/**
+ * Menu Push Type
+ * The content slides over to reveal the menu underneath.
+ * The menu itself also slides over to reveal its bad self.
+ */
+const menuPushAnimation = (menu) => {
+    let contentOpenedX;
+    let menuClosedX;
+    const mode = getIonMode(menu);
+    const width = menu.width;
+    if (menu.isEndSide) {
+        contentOpenedX = -width + 'px';
+        menuClosedX = width + 'px';
+    }
+    else {
+        contentOpenedX = width + 'px';
+        menuClosedX = -width + 'px';
+    }
+    const menuAnimation = createAnimation()
+        .addElement(menu.menuInnerEl)
+        .fromTo('transform', `translateX(${menuClosedX})`, 'translateX(0px)');
+    const contentAnimation = createAnimation()
+        .addElement(menu.contentEl)
+        .fromTo('transform', 'translateX(0px)', `translateX(${contentOpenedX})`);
+    const backdropAnimation = createAnimation().addElement(menu.backdropEl).fromTo('opacity', 0.01, 0.32);
+    return baseAnimation(mode === 'ios').addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
+};
+
+/**
+ * Menu Reveal Type
+ * The content slides over to reveal the menu underneath.
+ * The menu itself, which is under the content, does not move.
+ */
+const menuRevealAnimation = (menu) => {
+    const mode = getIonMode(menu);
+    const openedX = menu.width * (menu.isEndSide ? -1 : 1) + 'px';
+    const contentOpen = createAnimation()
+        .addElement(menu.contentEl) // REVIEW
+        .fromTo('transform', 'translateX(0px)', `translateX(${openedX})`);
+    return baseAnimation(mode === 'ios').addAnimation(contentOpen);
+};
+
+const createMenuController = () => {
+    const menuAnimations = new Map();
+    const menus = [];
+    const open = async (menu) => {
+        const menuEl = await get(menu, true);
+        if (menuEl) {
+            return menuEl.open();
+        }
+        return false;
+    };
+    const close = async (menu) => {
+        const menuEl = await (menu !== undefined ? get(menu, true) : getOpen());
+        if (menuEl !== undefined) {
+            return menuEl.close();
+        }
+        return false;
+    };
+    const toggle = async (menu) => {
+        const menuEl = await get(menu, true);
+        if (menuEl) {
+            return menuEl.toggle();
+        }
+        return false;
+    };
+    const enable = async (shouldEnable, menu) => {
+        const menuEl = await get(menu);
+        if (menuEl) {
+            menuEl.disabled = !shouldEnable;
+        }
+        return menuEl;
+    };
+    const swipeGesture = async (shouldEnable, menu) => {
+        const menuEl = await get(menu);
+        if (menuEl) {
+            menuEl.swipeGesture = shouldEnable;
+        }
+        return menuEl;
+    };
+    const isOpen = async (menu) => {
+        if (menu != null) {
+            const menuEl = await get(menu);
+            // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+            return menuEl !== undefined && menuEl.isOpen();
+        }
+        else {
+            const menuEl = await getOpen();
+            return menuEl !== undefined;
+        }
+    };
+    const isEnabled = async (menu) => {
+        const menuEl = await get(menu);
+        if (menuEl) {
+            return !menuEl.disabled;
+        }
+        return false;
+    };
+    /**
+     * Finds and returns the menu specified by "menu" if registered.
+     * @param menu - The side or ID of the desired menu
+     * @param logOnMultipleSideMenus - If true, this function will log a warning
+     * if "menu" is a side but multiple menus on the same side were found. Since this function
+     * is used in multiple places, we default this log to false so that the calling
+     * functions can choose whether or not it is appropriate to log this warning.
+     */
+    const get = async (menu, logOnMultipleSideMenus = false) => {
+        await waitUntilReady();
+        if (menu === 'start' || menu === 'end') {
+            // there could be more than one menu on the same side
+            // so first try to get the enabled one
+            const menuRefs = menus.filter((m) => m.side === menu && !m.disabled);
+            if (menuRefs.length >= 1) {
+                if (menuRefs.length > 1 && logOnMultipleSideMenus) {
+                    printIonWarning(`menuController queried for a menu on the "${menu}" side, but ${menuRefs.length} menus were found. The first menu reference will be used. If this is not the behavior you want then pass the ID of the menu instead of its side.`, menuRefs.map((m) => m.el));
+                }
+                return menuRefs[0].el;
+            }
+            // didn't find a menu side that is enabled
+            // so try to get the first menu side found
+            const sideMenuRefs = menus.filter((m) => m.side === menu);
+            if (sideMenuRefs.length >= 1) {
+                if (sideMenuRefs.length > 1 && logOnMultipleSideMenus) {
+                    printIonWarning(`menuController queried for a menu on the "${menu}" side, but ${sideMenuRefs.length} menus were found. The first menu reference will be used. If this is not the behavior you want then pass the ID of the menu instead of its side.`, sideMenuRefs.map((m) => m.el));
+                }
+                return sideMenuRefs[0].el;
+            }
+        }
+        else if (menu != null) {
+            // the menuId was not left or right
+            // so try to get the menu by its "id"
+            return find((m) => m.menuId === menu);
+        }
+        // return the first enabled menu
+        const menuEl = find((m) => !m.disabled);
+        if (menuEl) {
+            return menuEl;
+        }
+        // get the first menu in the array, if one exists
+        return menus.length > 0 ? menus[0].el : undefined;
+    };
+    /**
+     * Get the instance of the opened menu. Returns `null` if a menu is not found.
+     */
+    const getOpen = async () => {
+        await waitUntilReady();
+        return _getOpenSync();
+    };
+    /**
+     * Get all menu instances.
+     */
+    const getMenus = async () => {
+        await waitUntilReady();
+        return getMenusSync();
+    };
+    /**
+     * Get whether or not a menu is animating. Returns `true` if any
+     * menu is currently animating.
+     */
+    const isAnimating = async () => {
+        await waitUntilReady();
+        return isAnimatingSync();
+    };
+    const registerAnimation = (name, animation) => {
+        menuAnimations.set(name, animation);
+    };
+    const _register = (menu) => {
+        if (menus.indexOf(menu) < 0) {
+            menus.push(menu);
+        }
+    };
+    const _unregister = (menu) => {
+        const index = menus.indexOf(menu);
+        if (index > -1) {
+            menus.splice(index, 1);
+        }
+    };
+    const _setOpen = async (menu, shouldOpen, animated, role) => {
+        if (isAnimatingSync()) {
+            return false;
+        }
+        if (shouldOpen) {
+            const openedMenu = await getOpen();
+            if (openedMenu && menu.el !== openedMenu) {
+                await openedMenu.setOpen(false, false);
+            }
+        }
+        return menu._setOpen(shouldOpen, animated, role);
+    };
+    const _createAnimation = (type, menuCmp) => {
+        const animationBuilder = menuAnimations.get(type); // TODO(FW-2832): type
+        if (!animationBuilder) {
+            throw new Error('animation not registered');
+        }
+        const animation = animationBuilder(menuCmp);
+        return animation;
+    };
+    const _getOpenSync = () => {
+        return find((m) => m._isOpen);
+    };
+    const getMenusSync = () => {
+        return menus.map((menu) => menu.el);
+    };
+    const isAnimatingSync = () => {
+        return menus.some((menu) => menu.isAnimating);
+    };
+    const find = (predicate) => {
+        const instance = menus.find(predicate);
+        if (instance !== undefined) {
+            return instance.el;
+        }
+        return undefined;
+    };
+    const waitUntilReady = () => {
+        return Promise.all(Array.from(document.querySelectorAll('ion-menu')).map((menu) => new Promise((resolve) => componentOnReady(menu, resolve))));
+    };
+    registerAnimation('reveal', menuRevealAnimation);
+    registerAnimation('push', menuPushAnimation);
+    registerAnimation('overlay', menuOverlayAnimation);
+    doc === null || doc === void 0 ? void 0 : doc.addEventListener('ionBackButton', (ev) => {
+        const openMenu = _getOpenSync();
+        if (openMenu) {
+            ev.detail.register(MENU_BACK_BUTTON_PRIORITY, () => {
+                return openMenu.close();
+            });
+        }
+    });
+    return {
+        registerAnimation,
+        get,
+        getMenus,
+        getOpen,
+        isEnabled,
+        swipeGesture,
+        isAnimating,
+        isOpen,
+        enable,
+        toggle,
+        close,
+        open,
+        _getOpenSync,
+        _createAnimation,
+        _register,
+        _unregister,
+        _setOpen,
+    };
+};
+const menuController = /*@__PURE__*/ createMenuController();
+
+export { menuController as m };

package/components/index6.js

@@ -1,42 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { c as config } from './ionic-global.js';
+const win = typeof window !== 'undefined' ? window : undefined;
+const doc = typeof document !== 'undefined' ? document : undefined;
 
-/**
- * Logs a warning to the console with an Ionic prefix
- * to indicate the library that is warning the developer.
- *
- * @param message - The string message to be logged to the console.
- */
-const printIonWarning = (message, ...params) => {
-    const logLevel = config.get('logLevel', "WARN" /* LogLevel.WARN */);
-    if (["WARN" /* LogLevel.WARN */].includes(logLevel)) {
-        return console.warn(`[Ionic Warning]: ${message}`, ...params);
-    }
-};
-/**
- * Logs an error to the console with an Ionic prefix
- * to indicate the library that is warning the developer.
- *
- * @param message - The string message to be logged to the console.
- * @param params - Additional arguments to supply to the console.error.
- */
-const printIonError = (message, ...params) => {
-    const logLevel = config.get('logLevel', "ERROR" /* LogLevel.ERROR */);
-    if (["ERROR" /* LogLevel.ERROR */, "WARN" /* LogLevel.WARN */].includes(logLevel)) {
-        return console.error(`[Ionic Error]: ${message}`, ...params);
-    }
-};
-/**
- * Prints an error informing developers that an implementation requires an element to be used
- * within a specific selector.
- *
- * @param el The web component element this is requiring the element.
- * @param targetSelectors The selector or selectors that were not found.
- */
-const printRequiredElementError = (el, ...targetSelectors) => {
-    return console.error(`<${el.tagName.toLowerCase()}> must be used inside ${targetSelectors.join(' or ')}.`);
-};
-
-export { printIonError as a, printRequiredElementError as b, printIonWarning as p };
+export { doc as d, win as w };

package/components/index8.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { c as componentOnReady } from './helpers.js';
-import { b as printRequiredElementError } from './index6.js';
+import { e as printRequiredElementError } from './index4.js';
 
 const ION_CONTENT_TAG_NAME = 'ION-CONTENT';
 const ION_CONTENT_ELEMENT_SELECTOR = 'ion-content';

package/components/index9.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { d as doc } from './index5.js';
+import { d as doc } from './index6.js';
 import { q as pointerCoord } from './helpers.js';
 
 const startTapClick = (config) => {

package/components/input-shims.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as win, d as doc } from './index5.js';
+import { w as win, d as doc } from './index6.js';
 import { g as getScrollElement, c as scrollByPoint, a as findClosestIonContent } from './index8.js';
 import { a as addEventListener, b as removeEventListener, r as raf, c as componentOnReady } from './helpers.js';
 import { a as KeyboardResize, K as Keyboard } from './keyboard.js';

package/components/input.utils.js

@@ -1,9 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as win } from './index5.js';
+import { w as win } from './index6.js';
 import { r as raf } from './helpers.js';
-import { a as printIonError } from './index6.js';
+import { p as printIonError } from './index4.js';
 
 /**
  * Used to update a scoped component that uses emulated slots. This fires when
@@ -136,7 +136,7 @@ const getCounterText = (value, maxLength, counterFormatter) => {
         return counterFormatter(valueLength, maxLength);
     }
     catch (e) {
-        printIonError('Exception in provided `counterFormatter`.', e);
+        printIonError('[ion-input] - Exception in provided `counterFormatter`:', e);
         return defaultCounterText;
     }
 };

package/components/ion-accordion-group.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { p as printIonWarning } from './index6.js';
+import { a as printIonWarning } from './index4.js';
 import { b as getIonMode } from './ionic-global.js';
 
 const accordionGroupIosCss = ":host{display:block}:host(.accordion-group-expand-inset){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:16px;margin-bottom:16px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanding),:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanded){border-bottom:none}";
@@ -36,7 +36,7 @@ const AccordionGroup = /*@__PURE__*/ proxyCustomElement(class AccordionGroup ext
              * Default toString() behavior: a,b
              * Custom behavior: ['a', 'b']
              */
-            printIonWarning(`ion-accordion-group 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".
+            printIonWarning(`[ion-accordion-group] - 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".
 
   Value Passed: [${value.map((v) => `'${v}'`).join(', ')}]
 `, this.el);
@@ -206,12 +206,12 @@ const AccordionGroup = /*@__PURE__*/ proxyCustomElement(class AccordionGroup ext
     render() {
         const { disabled, readonly, expand } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '82f3e77066fabb4736638ee4c487ad56efd39c63', class: {
+        return (h(Host, { key: 'd1a79a93179474fbba66fcf11a92f4871dacc975', class: {
                 [mode]: true,
                 'accordion-group-disabled': disabled,
                 'accordion-group-readonly': readonly,
                 [`accordion-group-expand-${expand}`]: true,
-            }, role: "presentation" }, h("slot", { key: 'a3c791ea887fc640b512f81d429be465ae902b3d' })));
+            }, role: "presentation" }, h("slot", { key: 'e6b8954b686d1fbb4fc92adb07fddc97a24b0a31' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-accordion.js

@@ -4,7 +4,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { r as raf, t as transitionEndAsync, a as addEventListener, b as removeEventListener, g as getElementRoot } from './helpers.js';
 import { c as chevronDown } from './index7.js';
-import { c as config, b as getIonMode } from './ionic-global.js';
+import { c as config } from './index4.js';
+import { b as getIonMode } from './ionic-global.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
 const accordionIosCss = ":host{display:block;position:relative;width:100%;background-color:var(--ion-background-color, #ffffff);overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host(.accordion-next) ::slotted(ion-item[slot=header]){--border-width:0.55px 0px 0.55px 0px}";

package/components/ion-app.js

@@ -3,8 +3,8 @@
  */
 import { proxyCustomElement, HTMLElement, Build, h, Host } from '@stencil/core/internal/client';
 import { shouldUseCloseWatcher } from './hardware-back-button.js';
-import { p as printIonWarning } from './index6.js';
-import { b as getIonMode, c as config, a as isPlatform } from './ionic-global.js';
+import { c as config, a as printIonWarning } from './index4.js';
+import { b as getIonMode, a as isPlatform } from './ionic-global.js';
 
 const appCss = "html.plt-mobile ion-app{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html.plt-mobile ion-app [contenteditable]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}ion-app.force-statusbar-padding{--ion-safe-area-top:20px}";
 const IonAppStyle0 = appCss;
@@ -43,7 +43,7 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
                      * then the close watcher will not be used.
                      */
                     if (shouldUseCloseWatcher()) {
-                        printIonWarning('experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.');
+                        printIonWarning('[ion-app] - experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.');
                     }
                     hardwareBackButtonModule.blockHardwareBackButton();
                 }
@@ -70,7 +70,7 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '96715520fd05d6f0e6fa26a8ba78792cfccd4c0a', class: {
+        return (h(Host, { key: '03aa892f986330078d112b1e8b010df98fa7e39e', class: {
                 [mode]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),

package/components/ion-back-button.js

@@ -5,7 +5,8 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { i as inheritAriaAttributes } from './helpers.js';
 import { o as openURL, c as createColorClasses, h as hostContext } from './theme.js';
 import { a as chevronBack, b as arrowBackSharp } from './index7.js';
-import { c as config, b as getIonMode } from './ionic-global.js';
+import { c as config } from './index4.js';
+import { b as getIonMode } from './ionic-global.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './ripple-effect.js';
 

package/components/ion-datetime-button.js

@@ -3,7 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { a as addEventListener, c as componentOnReady } from './helpers.js';
-import { a as printIonError } from './index6.js';
+import { p as printIonError } from './index4.js';
 import { c as createColorClasses } from './theme.js';
 import { b as getIonMode } from './ionic-global.js';
 import { s as parseDate, x as getToday, L as getHourCycle, N as getLocalizedDateTime, M as getLocalizedTime } from './data.js';
@@ -89,7 +89,7 @@ const DatetimeButton = /*@__PURE__*/ proxyCustomElement(class DatetimeButton ext
                                 headerText = titleSelectedDatesFormatter(parsedValues);
                             }
                             catch (e) {
-                                printIonError('Exception in provided `titleSelectedDatesFormatter`: ', e);
+                                printIonError('[ion-datetime-button] - Exception in provided `titleSelectedDatesFormatter`:', e);
                             }
                         }
                         this.dateText = headerText;
@@ -249,12 +249,12 @@ const DatetimeButton = /*@__PURE__*/ proxyCustomElement(class DatetimeButton ext
     async componentWillLoad() {
         const { datetime } = this;
         if (!datetime) {
-            printIonError('An ID associated with an ion-datetime instance is required for ion-datetime-button to function properly.', this.el);
+            printIonError('[ion-datetime-button] - An ID associated with an ion-datetime instance is required to function properly.', this.el);
             return;
         }
         const datetimeEl = (this.datetimeEl = document.getElementById(datetime));
         if (!datetimeEl) {
-            printIonError(`No ion-datetime instance found for ID '${datetime}'.`, this.el);
+            printIonError(`[ion-datetime-button] - No ion-datetime instance found for ID '${datetime}'.`, this.el);
             return;
         }
         /**
@@ -262,7 +262,7 @@ const DatetimeButton = /*@__PURE__*/ proxyCustomElement(class DatetimeButton ext
          * if a non-datetime element was provided.
          */
         if (datetimeEl.tagName !== 'ION-DATETIME') {
-            printIonError(`Expected an ion-datetime instance for ID '${datetime}' but received '${datetimeEl.tagName.toLowerCase()}' instead.`, datetimeEl);
+            printIonError(`[ion-datetime-button] - Expected an ion-datetime instance for ID '${datetime}' but received '${datetimeEl.tagName.toLowerCase()}' instead.`, datetimeEl);
             return;
         }
         /**
@@ -337,11 +337,11 @@ const DatetimeButton = /*@__PURE__*/ proxyCustomElement(class DatetimeButton ext
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '26e606af6f067a5774db37ed41387ffebb941777', class: createColorClasses(color, {
+        return (h(Host, { key: '11d037e6ab061e5116842970760b04850b42f2c7', class: createColorClasses(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
-            }) }, dateText && (h("button", { key: '6b7aa66a15b4a6d89d411e40586de28a2ac9f343', 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: 'd42f34fd167be34386319e7ea788c2ab03c90b87', name: "date-target" }, dateText), mode === 'md' && h("ion-ripple-effect", { key: '47dd34f3c2799064cac7a5fe25440ecc043950f0' }))), timeText && (h("button", { key: 'd77424a20fae320654774c7bfc8a8e2369d3afe3', 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: 'ac088a78141bb53f2efd48dd7745f8954c92378b', name: "time-target" }, timeText), mode === 'md' && h("ion-ripple-effect", { key: 'b3a58ddfd28b9396e2518ffd62a045ec13d8b9d0' })))));
+            }) }, dateText && (h("button", { key: '08ecb62da0fcbf7466a1f2403276712a3ff17fbc', 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: '1c04853d4d23c0f1a594602bde44511c98355644', name: "date-target" }, dateText), mode === 'md' && h("ion-ripple-effect", { key: '5fc566cd4bc885bcf983ce99e3dc65d7f485bf9b' }))), timeText && (h("button", { key: 'c9c5c34ac338badf8659da22bea5829d62c51169', 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: '147a9d2069dbf737f6fc64787823d6d5af5aa653', name: "time-target" }, timeText), mode === 'md' && h("ion-ripple-effect", { key: '70a5e25b75ed90ac6bba003468435f67aa9d8f0a' })))));
     }
     get el() { return this; }
     static get style() { return {