voyager-ionic-core 8.8.17 → 9.0.3

package/dist/esm/ion-picker-column.entry.js

@@ -1,15 +1,16 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, h, d as Host, g as getElement } from './index-tcQvqkiX.js';
+import { r as registerInstance, c as createEvent, h, d as Host, g as getElement } from './index-C23AVPx9.js';
 import { d as doc } from './index-ZjP4CjeZ.js';
-import { r as raf } from './helpers-HEqiOzXb.js';
-import { b as hapticSelectionStart, a as hapticSelectionChanged, h as hapticSelectionEnd } from './haptic-DzAMWJuk.js';
-import { a as isPlatform, b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
-import { c as createColorClasses } from './theme-DiVJyqlX.js';
+import { r as raf } from './helpers-BSmc0nst.js';
+import { h as hapticSelectionEnd, b as hapticSelectionStart, a as hapticSelectionChanged } from './haptic-Cq4UAeka.js';
+import { a as isPlatform, b as getIonMode } from './ionic-global-ZXjCXKH0.js';
+import { c as createColorClasses } from './theme-byZM6qHV.js';
+import './dir-Dojwmvde.js';
 import './capacitor-CFERIeaU.js';
 
-const pickerColumnCss = () => `:host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;max-width:100%;height:200px;font-size:22px;text-align:center}.assistive-focusable{left:0;right:0;top:0;bottom:0;position:absolute;z-index:1;pointer-events:none}.assistive-focusable:focus{outline:none}.picker-opts{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-width:26px;max-height:200px;outline:none;text-align:inherit;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none}.picker-item-empty{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.picker-opts::-webkit-scrollbar{display:none}::slotted(ion-picker-column-option){display:block;scroll-snap-align:center}.picker-item-empty,:host(:not([disabled])) ::slotted(ion-picker-column-option.option-disabled){scroll-snap-align:none}::slotted([slot=prefix]),::slotted([slot=suffix]){max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::slotted([slot=prefix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:end;justify-content:end}::slotted([slot=suffix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:start;justify-content:start}:host(.picker-column-disabled) .picker-opts{overflow-y:hidden}:host(.picker-column-disabled) ::slotted(ion-picker-column-option){cursor:default;opacity:0.4;pointer-events:none}@media (any-hover: hover){:host(:focus) .picker-opts{outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}`;
+const pickerColumnCss = () => `:host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;max-width:100%;height:200px;font-size:22px;text-align:center}.assistive-focusable{left:0;right:0;top:0;bottom:0;position:absolute;z-index:1;pointer-events:none}.assistive-focusable:focus{outline:none}.picker-opts{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-width:26px;max-height:200px;outline:none;text-align:inherit;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none}.picker-item-empty{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.picker-opts::-webkit-scrollbar{display:none}::slotted(ion-picker-column-option){display:block;scroll-snap-align:center}.picker-item-empty,:host(:not([disabled])) ::slotted(ion-picker-column-option.option-disabled){scroll-snap-align:none}::slotted([slot=prefix]),::slotted([slot=suffix]){max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::slotted([slot=prefix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:end;justify-content:end}::slotted([slot=suffix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:start;justify-content:start}:host(.picker-column-disabled) .picker-opts{overflow-y:hidden}:host(.picker-column-disabled) ::slotted(ion-picker-column-option){cursor:default;opacity:0.4;pointer-events:none}@media (any-hover: hover){:host(:focus) .picker-opts{outline:none;background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2)}:host(.ion-color:focus) .picker-opts{background:rgba(var(--ion-color-base-rgb), 0.2)}}`;
 
 const PickerColumn = class {
     constructor(hostRef) {
@@ -19,18 +20,18 @@ const PickerColumn = class {
         this.isColumnVisible = false;
         this.canExitInputMode = true;
         this.updateValueTextOnScroll = false;
+        this.isUserScroll = false;
+        /**
+         * The haptics for the wheel picker are an iOS-only feature. As a result,
+         * they should be disabled on Android.
+         */
+        this.enableHaptics = false;
         this.ariaLabel = null;
         this.isActive = false;
         /**
          * If `true`, the user cannot interact with the picker.
          */
         this.disabled = 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`, tapping the picker will
          * reveal a number input keyboard that lets
@@ -56,6 +57,12 @@ const PickerColumn = class {
                      */
                     this.canExitInputMode = canExitInputMode;
                     this.updateValueTextOnScroll = false;
+                    /**
+                     * This scroll takes over from whatever the user was doing, so an outside
+                     * press must not commit an option the column is only passing through.
+                     */
+                    this.isUserScroll = false;
+                    this.stopWatchingForOutsidePress();
                     scrollEl.scroll({
                         top,
                         left: 0,
@@ -110,6 +117,117 @@ const PickerColumn = class {
             }
             this.isActive = state;
         };
+        this.clearScrollEndTimeout = () => {
+            if (this.scrollEndTimeout) {
+                clearTimeout(this.scrollEndTimeout);
+                this.scrollEndTimeout = undefined;
+            }
+        };
+        /**
+         * Resets the idle timer that commits the centered option.
+         */
+        this.resetScrollEndTimeout = () => {
+            this.clearScrollEndTimeout();
+            this.scrollEndTimeout = setTimeout(this.settle, SCROLL_END_DELAY);
+        };
+        /**
+         * Capture so the column still commits if an application's own pointerdown
+         * handler stops the event before it reaches the document.
+         */
+        this.watchForOutsidePress = () => {
+            doc?.addEventListener('pointerdown', this.onPointerDownOutside, { capture: true });
+        };
+        this.stopWatchingForOutsidePress = () => {
+            doc?.removeEventListener('pointerdown', this.onPointerDownOutside, { capture: true });
+        };
+        /**
+         * Resets everything the current scroll interaction is holding, so nothing
+         * pending on it can commit later.
+         */
+        this.discardScroll = () => {
+            this.stopWatchingForOutsidePress();
+            this.clearScrollEndTimeout();
+            this.scrollEndCallback = undefined;
+            this.centeredOption = undefined;
+            this.haltedAtScrollTop = undefined;
+            this.isScrolling = false;
+            this.isUserScroll = false;
+            this.canExitInputMode = true;
+        };
+        /**
+         * Commits the option that is currently centered under the highlight and ends
+         * the scroll interaction.
+         */
+        this.settle = () => {
+            const { centeredOption } = this;
+            this.clearScrollEndTimeout();
+            this.stopWatchingForOutsidePress();
+            this.isUserScroll = false;
+            this.isScrolling = false;
+            this.updateValueTextOnScroll = true;
+            this.enableHaptics && hapticSelectionEnd();
+            /**
+             * Certain tasks (such as those that
+             * cause re-renders) should only be done
+             * once scrolling has finished, otherwise
+             * flickering may occur.
+             */
+            const { scrollEndCallback } = this;
+            if (scrollEndCallback) {
+                scrollEndCallback();
+                this.scrollEndCallback = undefined;
+            }
+            /**
+             * Reset this flag as the
+             * next scroll interaction could
+             * be a scroll from the user. In this
+             * case, we should exit input mode.
+             */
+            this.canExitInputMode = true;
+            if (centeredOption !== undefined) {
+                // Cleared here so a later scroll that centers nothing cannot fall back on it.
+                this.centeredOption = undefined;
+                if (centeredOption.isConnected) {
+                    this.setValue(centeredOption.value);
+                }
+            }
+        };
+        /**
+         * Commits the option the user can see when they press anything outside of the
+         * column during a scroll they started. This runs on pointerdown rather than
+         * click so the value is up to date by the time an application's own click
+         * handler (a Save button, for example) reads it.
+         */
+        this.onPointerDownOutside = (ev) => {
+            const { centeredOption, parentEl, scrollEl } = this;
+            if (!this.isScrolling) {
+                return;
+            }
+            /**
+             * The column can live in another component's Shadow DOM, where a document
+             * listener sees the target retargeted to the outer host. The composed path
+             * is the only reliable way to tell a press on the column apart.
+             */
+            const path = ev.composedPath();
+            /**
+             * A press anywhere in the parent picker counts as inside, so reaching for a
+             * sibling wheel leaves this column coasting.
+             */
+            if (path.includes(this.el) || (parentEl != null && path.includes(parentEl))) {
+                return;
+            }
+            /**
+             * Landing on the centered option halts the in-flight momentum scroll, so the
+             * committed value and the option the user is left looking at agree. The
+             * option list can be replaced mid-scroll, and a detached option has no
+             * offset to center on.
+             */
+            if (centeredOption !== undefined && centeredOption.isConnected) {
+                this.centerPickerItemInView(centeredOption, false, false);
+                this.haltedAtScrollTop = scrollEl?.scrollTop;
+            }
+            this.settle();
+        };
         /**
          * When the column scrolls, the component
          * needs to determine which item is centered
@@ -117,28 +235,42 @@ const PickerColumn = class {
          * the item object.
          */
         this.initializeScrollListener = () => {
-            /**
-             * The haptics for the wheel picker are
-             * an iOS-only feature. As a result, they should
-             * be disabled on Android.
-             */
-            const enableHaptics = isPlatform('ios');
+            this.enableHaptics = isPlatform('ios');
             const { el, scrollEl } = this;
-            let timeout;
             let activeEl = this.activeItem;
             const scrollCallback = () => {
                 raf(() => {
-                    var _a;
-                    if (!scrollEl)
+                    /**
+                     * This frame cannot be cancelled, and moving the column disconnects it
+                     * without the observer reporting a change, so this checks live state.
+                     */
+                    if (!this.el.isConnected || !this.isColumnVisible || !scrollEl)
                         return;
-                    if (timeout) {
-                        clearTimeout(timeout);
-                        timeout = undefined;
+                    const { haltedAtScrollTop } = this;
+                    if (haltedAtScrollTop !== undefined) {
+                        /**
+                         * Still at the halted position, so this frame is the halt landing
+                         * rather than the wheel moving, and re-arming would start a second
+                         * commit cycle.
+                         */
+                        if (Math.abs(scrollEl.scrollTop - haltedAtScrollTop) <= HALT_TOLERANCE)
+                            return;
+                        this.haltedAtScrollTop = undefined;
                     }
+                    // Armed before the early returns below, so a scroll never ends uncommitted.
+                    this.resetScrollEndTimeout();
                     if (!this.isScrolling) {
-                        enableHaptics && hapticSelectionStart();
+                        this.enableHaptics && hapticSelectionStart();
                         this.isScrolling = true;
                     }
+                    /**
+                     * Only a user-driven scroll holds an uncommitted selection. Checked every
+                     * frame because the user can take hold of the wheel mid-scroll, and
+                     * re-adding the same listener is a no-op.
+                     */
+                    if (this.isUserScroll) {
+                        this.watchForOutsidePress();
+                    }
                     /**
                      * Select item in the center of the column
                      * which is the month/year that we want to select
@@ -194,22 +326,27 @@ const PickerColumn = class {
                      */
                     if (newActiveElement === undefined) {
                         const fallbackActiveElement = referenceNode.elementFromPoint(centerX, centerY);
-                        if ((fallbackActiveElement === null || fallbackActiveElement === void 0 ? void 0 : fallbackActiveElement.tagName) === 'ION-PICKER-COLUMN-OPTION') {
+                        if (fallbackActiveElement?.tagName === 'ION-PICKER-COLUMN-OPTION') {
                             newActiveElement = fallbackActiveElement;
                         }
                     }
-                    if (activeEl !== undefined) {
-                        this.setPickerItemActiveState(activeEl, false);
-                    }
+                    /**
+                     * A scroll can land with no selectable option centered, such as an
+                     * overscroll bounce briefly centering the empty padding rows. Keep the
+                     * current selection until an option is centered again.
+                     */
                     if (newActiveElement === undefined || newActiveElement.disabled) {
                         return;
                     }
+                    if (activeEl !== undefined) {
+                        this.setPickerItemActiveState(activeEl, false);
+                    }
                     /**
                      * If we are selecting a new value,
                      * we need to run haptics again.
                      */
                     if (newActiveElement !== activeEl) {
-                        enableHaptics && hapticSelectionChanged();
+                        this.enableHaptics && hapticSelectionChanged();
                         if (this.canExitInputMode) {
                             /**
                              * The native iOS wheel picker
@@ -239,34 +376,16 @@ const PickerColumn = class {
                      * again before announcing the new value. The correct valuetext will be set on render.
                      */
                     if (this.updateValueTextOnScroll) {
-                        (_a = this.assistiveFocusable) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-valuetext', this.getOptionValueText(newActiveElement));
+                        this.assistiveFocusable?.setAttribute('aria-valuetext', this.getOptionValueText(newActiveElement));
                     }
-                    timeout = setTimeout(() => {
-                        this.isScrolling = false;
-                        this.updateValueTextOnScroll = true;
-                        enableHaptics && hapticSelectionEnd();
-                        /**
-                         * Certain tasks (such as those that
-                         * cause re-renders) should only be done
-                         * once scrolling has finished, otherwise
-                         * flickering may occur.
-                         */
-                        const { scrollEndCallback } = this;
-                        if (scrollEndCallback) {
-                            scrollEndCallback();
-                            this.scrollEndCallback = undefined;
-                        }
-                        /**
-                         * Reset this flag as the
-                         * next scroll interaction could
-                         * be a scroll from the user. In this
-                         * case, we should exit input mode.
-                         */
-                        this.canExitInputMode = true;
-                        this.setValue(newActiveElement.value);
-                    }, 250);
+                    this.centeredOption = newActiveElement;
                 });
             };
+            const userScrollCallback = () => {
+                this.isUserScroll = true;
+                // Taking hold of the wheel ends the halt even if it has not moved yet.
+                this.haltedAtScrollTop = undefined;
+            };
             /**
              * Wrap this in an raf so that the scroll callback
              * does not fire when component is initially shown.
@@ -275,8 +394,19 @@ const PickerColumn = class {
                 if (!scrollEl)
                     return;
                 scrollEl.addEventListener('scroll', scrollCallback);
+                scrollEl.addEventListener('pointerdown', userScrollCallback);
+                scrollEl.addEventListener('wheel', userScrollCallback, { passive: true });
+                /**
+                 * A `pointerdown` fires once per touch, so a drag that pauses long enough
+                 * to commit would look like a scroll the column started. A `touchmove`
+                 * keeps arriving while the finger moves.
+                 */
+                scrollEl.addEventListener('touchmove', userScrollCallback, { passive: true });
                 this.destroyScrollListener = () => {
                     scrollEl.removeEventListener('scroll', scrollCallback);
+                    scrollEl.removeEventListener('pointerdown', userScrollCallback);
+                    scrollEl.removeEventListener('wheel', userScrollCallback);
+                    scrollEl.removeEventListener('touchmove', userScrollCallback);
                 };
             });
         };
@@ -405,8 +535,7 @@ const PickerColumn = class {
          * Utility to generate the correct text for aria-valuetext.
          */
         this.getOptionValueText = (el) => {
-            var _a;
-            return el ? (_a = el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : el.innerText : '';
+            return el ? el.getAttribute('aria-label') ?? el.innerText : '';
         };
     }
     ariaLabelChanged(newValue) {
@@ -460,6 +589,14 @@ const PickerColumn = class {
             }
             else {
                 this.isColumnVisible = false;
+                /**
+                 * The pending timer still runs so it resets the scroll state, but the
+                 * option it would have committed is dropped. A column the user cannot
+                 * see should not change its value.
+                 */
+                this.stopWatchingForOutsidePress();
+                this.centeredOption = undefined;
+                this.haltedAtScrollTop = undefined;
                 if (this.destroyScrollListener) {
                     this.destroyScrollListener();
                     this.destroyScrollListener = undefined;
@@ -528,8 +665,14 @@ const PickerColumn = class {
         }
     }
     connectedCallback() {
-        var _a;
-        this.ariaLabel = (_a = this.el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : 'Select a value';
+        this.ariaLabel = this.el.getAttribute('aria-label') ?? 'Select a value';
+    }
+    disconnectedCallback() {
+        /**
+         * A pending settle would otherwise commit a value on a column that is no
+         * longer in the DOM.
+         */
+        this.discardScroll();
     }
     get activeItem() {
         const { value } = this;
@@ -548,14 +691,14 @@ const PickerColumn = class {
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '234c96a501d7ac413b9b0ea56b33017681e25b40', class: createColorClasses(color, {
+        return (h(Host, { key: '60a893619d0b01fba53fbccef67a10d533a22657', class: createColorClasses(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, h("slot", { key: '9dc15ea0601ddd2cb2e0a745e91e036a8bd96f8b', name: "prefix" }), h("div", { key: 'de4fe28ee4bc46b7c0420d6ab0df0e7809443da9', class: "picker-opts", ref: (el) => {
+            }) }, h("slot", { key: '79f1e047f89c5ec916ed02efaac56ef3f73b8969', name: "prefix" }), h("div", { key: 'c45c86e88353a196ff38159f40f390bc27852c9e', class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
-            }, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, h("div", { key: '5297617462cc30e9444039ae032d8bdf718349af', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '55ea39ef867bcb1a11a912d52ecd20cb886c5fb3', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '3496730ce6182ebfd33e0ee4bafc130feb575a31', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '44c3628aa957d60f799dc7019f72fe8b676c7843' }), h("div", { key: '5a1809f6c949678a67e0d4b5bfe93ea335c0161d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '98fd57f1c66dbaebc2db2dd5da142671b3159fd1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '85590708abddfa885994e549deac64866fec938f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'bb7e674f543696a80fcbfb1f68f2e975826898a6', name: "suffix" })));
+            }, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, h("div", { key: 'e02d76752f5d3dd4cd2846fbc28645f1508a4b49', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'd577bcbadc530970b2781692b050811633625c5a', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'c89e78c3a896bc1f55b922d01df16fdbb1259bdd', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '6c597ff899692597432ee2aa0b42de53b86deed4' }), h("div", { key: '91686ed94f14c47647836ed4d63e54b5c54ee3b9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '2ff058c6d0e8cef4e143c2d848f9a52684579af1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'bc7386bec6fced36e44084a7a137b3fe6506c996', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: '8835fd3f4e025bce964e6f05984c9aaadc20d7fb', name: "suffix" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -568,6 +711,19 @@ const PickerColumn = class {
     }; }
 };
 const PICKER_ITEM_ACTIVE_CLASS = 'option-active';
+/**
+ * How long the column must be idle before the centered option is treated as
+ * the user's selection. Replaceable by the `scrollend` event once that is
+ * supported everywhere (https://caniuse.com/?search=scrollend).
+ */
+const SCROLL_END_DELAY = 250;
+/**
+ * How far, in pixels, the column may report from where it was halted and still
+ * count as having stayed there. Centering targets a position between two snap
+ * points, so mandatory snapping corrects it by half the column height less
+ * three option heights: 2px at the default sizes.
+ */
+const HALT_TOLERANCE = 2;
 PickerColumn.style = pickerColumnCss();
 
 export { PickerColumn as ion_picker_column };

package/dist/esm/ion-picker.entry.js

@@ -1,8 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, h, d as Host, g as getElement } from './index-tcQvqkiX.js';
-import { g as getElementRoot } from './helpers-HEqiOzXb.js';
+import { r as registerInstance, c as createEvent, h, d as Host, g as getElement } from './index-C23AVPx9.js';
+import { g as getElementRoot } from './helpers-BSmc0nst.js';
+import './dir-Dojwmvde.js';
 
 const pickerIosCss = () => `:host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}:host .picker-before{inset-inline-start:0}:host .picker-after{top:116px;height:84px}:host .picker-after{inset-inline-start:0}:host .picker-highlight{border-radius:var(--highlight-border-radius, 8px);left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--highlight-background);z-index:-1}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column:first-of-type){text-align:start}:host ::slotted(ion-picker-column:last-of-type){text-align:end}:host ::slotted(ion-picker-column:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-highlight{background:var(--highlight-background, var(--ion-color-step-150, var(--ion-background-color-step-150, #eeeeef)))}`;
 
@@ -456,7 +457,6 @@ const Picker = class {
     }
     render() {
         return (h(Host, { key: '28f81e4ed44a633178561757c5199c2c98f94b74', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: 'abb3d1ad25ef63856af7804111175a4d50008bc0', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
-                var _a;
                 /**
                  * The "Enter" key represents
                  * the user submitting their time
@@ -468,7 +468,7 @@ const Picker = class {
                  * callback below.
                  */
                 if (ev.key === 'Enter') {
-                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
+                    this.inputEl?.blur();
                 }
             }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: '334a5abdc02e6b127c57177f626d7e4ff5526183', class: "picker-before" }), h("div", { key: 'ffd6271931129e88fc7c820e919d684899e420c5', class: "picker-after" }), h("div", { key: '78d1d95fd09e04f154ea59f24a1cece72c47ed7b', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: '0bd5b9f875d3c71f6cbbde2054baeb1b0a2e8cd5' })));
     }