@ionic/core 8.8.19-dev.11786610762.137bbb21 → 8.8.19-dev.11786735826.1fad7c0a

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

@@ -3,441 +3,260 @@
  */
 'use strict';
 
-var index = require('./index-C1knGA9x.js');
-var helpers = require('./helpers-Fh1iXsX9.js');
-require('./focus-visible-BIj-I3-C.js');
+var index = require('./index-uvry__L4.js');
+var helpers = require('./helpers-CaLhEmTE.js');
 
-const ionicPickerMdCss = () => `: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);right:0;left: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;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);-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)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));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) 90%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}`;
+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)))}`;
 
-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);right:0;left: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;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);-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)))}`;
-
-const pickerMdCss = () => `: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);right:0;left: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;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);-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)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));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) 90%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}`;
+const pickerMdCss = () => `: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)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));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) 90%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}`;
 
 const Picker = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.ionInputModeChange = index.createEvent(this, "ionInputModeChange", 7);
-        this.useInputMode = false;
-        this.isInHighlightBounds = (ev) => {
-            const { highlightEl } = this;
-            if (!highlightEl) {
-                return false;
-            }
-            const bbox = highlightEl.getBoundingClientRect();
-            /**
-             * Check to see if the user clicked
-             * outside the bounds of the highlight.
-             */
-            const outsideX = ev.clientX < bbox.left || ev.clientX > bbox.right;
-            const outsideY = ev.clientY < bbox.top || ev.clientY > bbox.bottom;
-            if (outsideX || outsideY) {
-                return false;
-            }
-            return true;
-        };
+    }
+    inputEl;
+    useInputMode = false;
+    inputModeColumn;
+    highlightEl;
+    actionOnClick;
+    destroyKeypressListener;
+    singleColumnSearchTimeout;
+    get el() { return index.getElement(this); }
+    /**
+     * @internal
+     */
+    ionInputModeChange;
+    /**
+     * When the picker is interacted with
+     * we need to prevent touchstart so other
+     * gestures do not fire. For example,
+     * scrolling on the wheel picker
+     * in ion-datetime should not cause
+     * a card modal to swipe to close.
+     */
+    preventTouchStartPropagation(ev) {
+        ev.stopPropagation();
+    }
+    componentWillLoad() {
+        helpers.getElementRoot(this.el).addEventListener('focusin', this.onFocusIn);
+        helpers.getElementRoot(this.el).addEventListener('focusout', this.onFocusOut);
+    }
+    isInHighlightBounds = (ev) => {
+        const { highlightEl } = this;
+        if (!highlightEl) {
+            return false;
+        }
+        const bbox = highlightEl.getBoundingClientRect();
         /**
-         * If we are no longer focused
-         * on a picker column, then we should
-         * exit input mode. An exception is made
-         * for the input in the picker since having
-         * that focused means we are still in input mode.
+         * Check to see if the user clicked
+         * outside the bounds of the highlight.
          */
-        this.onFocusOut = (ev) => {
-            // TODO(FW-2832): type
-            const { relatedTarget } = ev;
-            if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN' && relatedTarget !== this.inputEl)) {
-                this.exitInputMode();
-            }
-        };
+        const outsideX = ev.clientX < bbox.left || ev.clientX > bbox.right;
+        const outsideY = ev.clientY < bbox.top || ev.clientY > bbox.bottom;
+        if (outsideX || outsideY) {
+            return false;
+        }
+        return true;
+    };
+    /**
+     * If we are no longer focused
+     * on a picker column, then we should
+     * exit input mode. An exception is made
+     * for the input in the picker since having
+     * that focused means we are still in input mode.
+     */
+    onFocusOut = (ev) => {
+        // TODO(FW-2832): type
+        const { relatedTarget } = ev;
+        if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN' && relatedTarget !== this.inputEl)) {
+            this.exitInputMode();
+        }
+    };
+    /**
+     * When picker columns receive focus
+     * the parent picker needs to determine
+     * whether to enter/exit input mode.
+     */
+    onFocusIn = (ev) => {
+        // TODO(FW-2832): type
+        const { target } = ev;
         /**
-         * When picker columns receive focus
-         * the parent picker needs to determine
-         * whether to enter/exit input mode.
+         * Due to browser differences in how/when focus
+         * is dispatched on certain elements, we need to
+         * make sure that this function only ever runs when
+         * focusing a picker column.
          */
-        this.onFocusIn = (ev) => {
-            // TODO(FW-2832): type
-            const { target } = ev;
-            /**
-             * Due to browser differences in how/when focus
-             * is dispatched on certain elements, we need to
-             * make sure that this function only ever runs when
-             * focusing a picker column.
-             */
-            if (target.tagName !== 'ION-PICKER-COLUMN') {
-                return;
-            }
-            /**
-             * If we have actionOnClick
-             * then this means the user focused
-             * a picker column via mouse or
-             * touch (i.e. a PointerEvent). As a result,
-             * we should not enter/exit input mode
-             * until the click event has fired, which happens
-             * after the `focusin` event.
-             *
-             * Otherwise, the user likely focused
-             * the column using their keyboard and
-             * we should enter/exit input mode automatically.
-             */
-            if (!this.actionOnClick) {
-                const columnEl = target;
-                const allowInput = columnEl.numericInput;
-                if (allowInput) {
-                    this.enterInputMode(columnEl, false);
-                }
-                else {
-                    this.exitInputMode();
-                }
-            }
-        };
+        if (target.tagName !== 'ION-PICKER-COLUMN') {
+            return;
+        }
         /**
-         * On click we need to run an actionOnClick
-         * function that has been set in onPointerDown
-         * so that we enter/exit input mode correctly.
+         * If we have actionOnClick
+         * then this means the user focused
+         * a picker column via mouse or
+         * touch (i.e. a PointerEvent). As a result,
+         * we should not enter/exit input mode
+         * until the click event has fired, which happens
+         * after the `focusin` event.
+         *
+         * Otherwise, the user likely focused
+         * the column using their keyboard and
+         * we should enter/exit input mode automatically.
          */
-        this.onClick = () => {
-            const { actionOnClick } = this;
-            if (actionOnClick) {
-                actionOnClick();
-                this.actionOnClick = undefined;
+        if (!this.actionOnClick) {
+            const columnEl = target;
+            const allowInput = columnEl.numericInput;
+            if (allowInput) {
+                this.enterInputMode(columnEl, false);
             }
-        };
-        /**
-         * Clicking a column also focuses the column on
-         * certain browsers, so we use onPointerDown
-         * to tell the onFocusIn function that users
-         * are trying to click the column rather than
-         * focus the column using the keyboard. When the
-         * user completes the click, the onClick function
-         * runs and runs the actionOnClick callback.
-         */
-        this.onPointerDown = (ev) => {
-            const { useInputMode, inputModeColumn, el } = this;
-            if (this.isInHighlightBounds(ev)) {
+            else {
+                this.exitInputMode();
+            }
+        }
+    };
+    /**
+     * On click we need to run an actionOnClick
+     * function that has been set in onPointerDown
+     * so that we enter/exit input mode correctly.
+     */
+    onClick = () => {
+        const { actionOnClick } = this;
+        if (actionOnClick) {
+            actionOnClick();
+            this.actionOnClick = undefined;
+        }
+    };
+    /**
+     * Clicking a column also focuses the column on
+     * certain browsers, so we use onPointerDown
+     * to tell the onFocusIn function that users
+     * are trying to click the column rather than
+     * focus the column using the keyboard. When the
+     * user completes the click, the onClick function
+     * runs and runs the actionOnClick callback.
+     */
+    onPointerDown = (ev) => {
+        const { useInputMode, inputModeColumn, el } = this;
+        if (this.isInHighlightBounds(ev)) {
+            /**
+             * If we were already in
+             * input mode, then we should determine
+             * if we tapped a particular column and
+             * should switch to input mode for
+             * that specific column.
+             */
+            if (useInputMode) {
                 /**
-                 * If we were already in
-                 * input mode, then we should determine
-                 * if we tapped a particular column and
-                 * should switch to input mode for
-                 * that specific column.
+                 * If we tapped a picker column
+                 * then we should either switch to input
+                 * mode for that column or all columns.
+                 * Otherwise we should exit input mode
+                 * since we just tapped the highlight and
+                 * not a column.
                  */
-                if (useInputMode) {
+                if (ev.target.tagName === 'ION-PICKER-COLUMN') {
                     /**
-                     * If we tapped a picker column
-                     * then we should either switch to input
-                     * mode for that column or all columns.
-                     * Otherwise we should exit input mode
-                     * since we just tapped the highlight and
-                     * not a column.
+                     * If user taps 2 different columns
+                     * then we should just switch to input mode
+                     * for the new column rather than switching to
+                     * input mode for all columns.
                      */
-                    if (ev.target.tagName === 'ION-PICKER-COLUMN') {
-                        /**
-                         * If user taps 2 different columns
-                         * then we should just switch to input mode
-                         * for the new column rather than switching to
-                         * input mode for all columns.
-                         */
-                        if (inputModeColumn && inputModeColumn === ev.target) {
-                            this.actionOnClick = () => {
-                                this.enterInputMode();
-                            };
-                        }
-                        else {
-                            this.actionOnClick = () => {
-                                this.enterInputMode(ev.target);
-                            };
-                        }
+                    if (inputModeColumn && inputModeColumn === ev.target) {
+                        this.actionOnClick = () => {
+                            this.enterInputMode();
+                        };
                     }
                     else {
                         this.actionOnClick = () => {
-                            this.exitInputMode();
+                            this.enterInputMode(ev.target);
                         };
                     }
-                    /**
-                     * If we were not already in
-                     * input mode, then we should
-                     * enter input mode for all columns.
-                     */
                 }
                 else {
-                    /**
-                     * If there is only 1 numeric input column
-                     * then we should skip multi column input.
-                     */
-                    const columns = el.querySelectorAll('ion-picker-column.picker-column-numeric-input');
-                    const columnEl = columns.length === 1 ? ev.target : undefined;
                     this.actionOnClick = () => {
-                        this.enterInputMode(columnEl);
+                        this.exitInputMode();
                     };
                 }
-                return;
-            }
-            this.actionOnClick = () => {
-                this.exitInputMode();
-            };
-        };
-        /**
-         * Enters input mode to allow
-         * for text entry of numeric values.
-         * If on mobile, we focus a hidden input
-         * field so that the on screen keyboard
-         * is brought up. When tabbing using a
-         * keyboard, picker columns receive an outline
-         * to indicate they are focused. As a result,
-         * we should not focus the hidden input as it
-         * would cause the outline to go away, preventing
-         * users from having any visual indication of which
-         * column is focused.
-         */
-        this.enterInputMode = (columnEl, focusInput = true) => {
-            const { inputEl, el } = this;
-            if (!inputEl) {
-                return;
-            }
-            /**
-             * Only active input mode if there is at
-             * least one column that accepts numeric input.
-             */
-            const hasInputColumn = el.querySelector('ion-picker-column.picker-column-numeric-input');
-            if (!hasInputColumn) {
-                return;
-            }
-            /**
-             * If columnEl is undefined then
-             * it is assumed that all numeric pickers
-             * are eligible for text entry.
-             * (i.e. hour and minute columns)
-             */
-            this.useInputMode = true;
-            this.inputModeColumn = columnEl;
-            /**
-             * Users with a keyboard and mouse can
-             * activate input mode where the input is
-             * focused as well as when it is not focused,
-             * so we need to make sure we clean up any
-             * old listeners.
-             */
-            if (focusInput) {
-                if (this.destroyKeypressListener) {
-                    this.destroyKeypressListener();
-                    this.destroyKeypressListener = undefined;
-                }
-                inputEl.focus();
+                /**
+                 * If we were not already in
+                 * input mode, then we should
+                 * enter input mode for all columns.
+                 */
             }
             else {
-                // TODO FW-5900 Use keydown instead
-                el.addEventListener('keypress', this.onKeyPress);
-                this.destroyKeypressListener = () => {
-                    el.removeEventListener('keypress', this.onKeyPress);
-                };
-            }
-            this.emitInputModeChange();
-        };
-        this.onKeyPress = (ev) => {
-            const { inputEl } = this;
-            if (!inputEl) {
-                return;
-            }
-            const parsedValue = parseInt(ev.key, 10);
-            /**
-             * Only numbers should be allowed
-             */
-            if (!Number.isNaN(parsedValue)) {
-                inputEl.value += ev.key;
-                this.onInputChange();
-            }
-        };
-        this.selectSingleColumn = () => {
-            const { inputEl, inputModeColumn, singleColumnSearchTimeout } = this;
-            if (!inputEl || !inputModeColumn) {
-                return;
-            }
-            const options = Array.from(inputModeColumn.querySelectorAll('ion-picker-column-option')).filter((el) => el.disabled !== true);
-            /**
-             * If users pause for a bit, the search
-             * value should be reset similar to how a
-             * <select> behaves. So typing "34", waiting,
-             * then typing "5" should select "05".
-             */
-            if (singleColumnSearchTimeout) {
-                clearTimeout(singleColumnSearchTimeout);
-            }
-            this.singleColumnSearchTimeout = setTimeout(() => {
-                inputEl.value = '';
-                this.singleColumnSearchTimeout = undefined;
-            }, 1000);
-            /**
-             * For values that are longer than 2 digits long
-             * we should shift the value over 1 character
-             * to the left. So typing "456" would result in "56".
-             * TODO: If we want to support more than just
-             * time entry, we should update this value to be
-             * the max length of all of the picker items.
-             */
-            if (inputEl.value.length >= 3) {
-                const startIndex = inputEl.value.length - 2;
-                const newString = inputEl.value.substring(startIndex);
-                inputEl.value = newString;
-                this.selectSingleColumn();
-                return;
-            }
-            /**
-             * Checking the value of the input gets priority
-             * first. For example, if the value of the input
-             * is "1" and we entered "2", then the complete value
-             * is "12" and we should select hour 12.
-             *
-             * Regex removes any leading zeros from values like "02",
-             * but it keeps a single zero if there are only zeros in the string.
-             * 0+(?=[1-9]) --> Match 1 or more zeros that are followed by 1-9
-             * 0+(?=0$) --> Match 1 or more zeros that must be followed by one 0 and end.
-             */
-            const findItemFromCompleteValue = options.find(({ textContent }) => {
                 /**
-                 * Keyboard entry is currently only used inside of Datetime
-                 * where we guarantee textContent is set.
-                 * If we end up exposing this feature publicly we should revisit this assumption.
+                 * If there is only 1 numeric input column
+                 * then we should skip multi column input.
                  */
-                const parsedText = textContent.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
-                return parsedText === inputEl.value;
-            });
-            if (findItemFromCompleteValue) {
-                inputModeColumn.setValue(findItemFromCompleteValue.value);
-                return;
-            }
-            /**
-             * If we typed "56" to get minute 56, then typed "7",
-             * we should select "07" as "567" is not a valid minute.
-             */
-            if (inputEl.value.length === 2) {
-                const changedCharacter = inputEl.value.substring(inputEl.value.length - 1);
-                inputEl.value = changedCharacter;
-                this.selectSingleColumn();
+                const columns = el.querySelectorAll('ion-picker-column.picker-column-numeric-input');
+                const columnEl = columns.length === 1 ? ev.target : undefined;
+                this.actionOnClick = () => {
+                    this.enterInputMode(columnEl);
+                };
             }
+            return;
+        }
+        this.actionOnClick = () => {
+            this.exitInputMode();
         };
+    };
+    /**
+     * Enters input mode to allow
+     * for text entry of numeric values.
+     * If on mobile, we focus a hidden input
+     * field so that the on screen keyboard
+     * is brought up. When tabbing using a
+     * keyboard, picker columns receive an outline
+     * to indicate they are focused. As a result,
+     * we should not focus the hidden input as it
+     * would cause the outline to go away, preventing
+     * users from having any visual indication of which
+     * column is focused.
+     */
+    enterInputMode = (columnEl, focusInput = true) => {
+        const { inputEl, el } = this;
+        if (!inputEl) {
+            return;
+        }
         /**
-         * Searches a list of column items for a particular
-         * value. This is currently used for numeric values.
-         * The zeroBehavior can be set to account for leading
-         * or trailing zeros when looking at the item text.
+         * Only active input mode if there is at
+         * least one column that accepts numeric input.
          */
-        this.searchColumn = (colEl, value, zeroBehavior = 'start') => {
-            if (!value) {
-                return false;
-            }
-            const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
-            value = value.replace(behavior, '');
-            const option = Array.from(colEl.querySelectorAll('ion-picker-column-option')).find((el) => {
-                return el.disabled !== true && el.textContent.replace(behavior, '') === value;
-            });
-            if (option) {
-                colEl.setValue(option.value);
-            }
-            return !!option;
-        };
+        const hasInputColumn = el.querySelector('ion-picker-column.picker-column-numeric-input');
+        if (!hasInputColumn) {
+            return;
+        }
         /**
-         * Attempts to intelligently search the first and second
-         * column as if they're number columns for the provided numbers
-         * where the first two numbers are the first column
-         * and the last 2 are the last column. Tries to allow for the first
-         * number to be ignored for situations where typos occurred.
+         * If columnEl is undefined then
+         * it is assumed that all numeric pickers
+         * are eligible for text entry.
+         * (i.e. hour and minute columns)
          */
-        this.multiColumnSearch = (firstColumn, secondColumn, input) => {
-            if (input.length === 0) {
-                return;
-            }
-            const inputArray = input.split('');
-            const hourValue = inputArray.slice(0, 2).join('');
-            // Try to find a match for the first two digits in the first column
-            const foundHour = this.searchColumn(firstColumn, hourValue);
-            // If we have more than 2 digits and found a match for hours,
-            // use the remaining digits for the second column (minutes)
-            if (inputArray.length > 2 && foundHour) {
-                const minuteValue = inputArray.slice(2, 4).join('');
-                this.searchColumn(secondColumn, minuteValue);
-            }
-            // If we couldn't find a match for the two-digit hour, try single digit approaches
-            else if (!foundHour && inputArray.length >= 1) {
-                // First try the first digit as a single-digit hour
-                let singleDigitHour = inputArray[0];
-                let singleDigitFound = this.searchColumn(firstColumn, singleDigitHour);
-                // If that didn't work, try the second digit as a single-digit hour
-                // (handles case where user made a typo in the first digit, or they typed over themselves)
-                if (!singleDigitFound) {
-                    inputArray.shift();
-                    singleDigitHour = inputArray[0];
-                    singleDigitFound = this.searchColumn(firstColumn, singleDigitHour);
-                }
-                // If we found a single-digit hour and have remaining digits,
-                // use up to 2 of the remaining digits for the second column
-                if (singleDigitFound && inputArray.length > 1) {
-                    const remainingDigits = inputArray.slice(1, 3).join('');
-                    this.searchColumn(secondColumn, remainingDigits);
-                }
-            }
-        };
-        this.selectMultiColumn = () => {
-            const { inputEl, el } = this;
-            if (!inputEl) {
-                return;
-            }
-            const numericPickers = Array.from(el.querySelectorAll('ion-picker-column')).filter((col) => col.numericInput);
-            const firstColumn = numericPickers[0];
-            const lastColumn = numericPickers[1];
-            let value = inputEl.value;
-            if (value.length > 4) {
-                const startIndex = inputEl.value.length - 4;
-                const newString = inputEl.value.substring(startIndex);
-                inputEl.value = newString;
-                value = newString;
-            }
-            this.multiColumnSearch(firstColumn, lastColumn, value);
-        };
+        this.useInputMode = true;
+        this.inputModeColumn = columnEl;
         /**
-         * Searches the value of the active column
-         * to determine which value users are trying
-         * to select
+         * Users with a keyboard and mouse can
+         * activate input mode where the input is
+         * focused as well as when it is not focused,
+         * so we need to make sure we clean up any
+         * old listeners.
          */
-        this.onInputChange = () => {
-            const { useInputMode, inputEl, inputModeColumn } = this;
-            if (!useInputMode || !inputEl) {
-                return;
+        if (focusInput) {
+            if (this.destroyKeypressListener) {
+                this.destroyKeypressListener();
+                this.destroyKeypressListener = undefined;
             }
-            if (inputModeColumn) {
-                this.selectSingleColumn();
-            }
-            else {
-                this.selectMultiColumn();
-            }
-        };
-        /**
-         * Emit ionInputModeChange. Picker columns
-         * listen for this event to determine whether
-         * or not their column is "active" for text input.
-         */
-        this.emitInputModeChange = () => {
-            const { useInputMode, inputModeColumn } = this;
-            this.ionInputModeChange.emit({
-                useInputMode,
-                inputModeColumn,
-            });
-        };
-    }
-    /**
-     * When the picker is interacted with
-     * we need to prevent touchstart so other
-     * gestures do not fire. For example,
-     * scrolling on the wheel picker
-     * in ion-datetime should not cause
-     * a card modal to swipe to close.
-     */
-    preventTouchStartPropagation(ev) {
-        ev.stopPropagation();
-    }
-    componentWillLoad() {
-        helpers.getElementRoot(this.el).addEventListener('focusin', this.onFocusIn);
-        helpers.getElementRoot(this.el).addEventListener('focusout', this.onFocusOut);
-    }
+            inputEl.focus();
+        }
+        else {
+            // TODO FW-5900 Use keydown instead
+            el.addEventListener('keypress', this.onKeyPress);
+            this.destroyKeypressListener = () => {
+                el.removeEventListener('keypress', this.onKeyPress);
+            };
+        }
+        this.emitInputModeChange();
+    };
     /**
      * @internal
      * Exits text entry mode for the picker
@@ -459,9 +278,197 @@ const Picker = class {
         }
         this.emitInputModeChange();
     }
+    onKeyPress = (ev) => {
+        const { inputEl } = this;
+        if (!inputEl) {
+            return;
+        }
+        const parsedValue = parseInt(ev.key, 10);
+        /**
+         * Only numbers should be allowed
+         */
+        if (!Number.isNaN(parsedValue)) {
+            inputEl.value += ev.key;
+            this.onInputChange();
+        }
+    };
+    selectSingleColumn = () => {
+        const { inputEl, inputModeColumn, singleColumnSearchTimeout } = this;
+        if (!inputEl || !inputModeColumn) {
+            return;
+        }
+        const options = Array.from(inputModeColumn.querySelectorAll('ion-picker-column-option')).filter((el) => el.disabled !== true);
+        /**
+         * If users pause for a bit, the search
+         * value should be reset similar to how a
+         * <select> behaves. So typing "34", waiting,
+         * then typing "5" should select "05".
+         */
+        if (singleColumnSearchTimeout) {
+            clearTimeout(singleColumnSearchTimeout);
+        }
+        this.singleColumnSearchTimeout = setTimeout(() => {
+            inputEl.value = '';
+            this.singleColumnSearchTimeout = undefined;
+        }, 1000);
+        /**
+         * For values that are longer than 2 digits long
+         * we should shift the value over 1 character
+         * to the left. So typing "456" would result in "56".
+         * TODO: If we want to support more than just
+         * time entry, we should update this value to be
+         * the max length of all of the picker items.
+         */
+        if (inputEl.value.length >= 3) {
+            const startIndex = inputEl.value.length - 2;
+            const newString = inputEl.value.substring(startIndex);
+            inputEl.value = newString;
+            this.selectSingleColumn();
+            return;
+        }
+        /**
+         * Checking the value of the input gets priority
+         * first. For example, if the value of the input
+         * is "1" and we entered "2", then the complete value
+         * is "12" and we should select hour 12.
+         *
+         * Regex removes any leading zeros from values like "02",
+         * but it keeps a single zero if there are only zeros in the string.
+         * 0+(?=[1-9]) --> Match 1 or more zeros that are followed by 1-9
+         * 0+(?=0$) --> Match 1 or more zeros that must be followed by one 0 and end.
+         */
+        const findItemFromCompleteValue = options.find(({ textContent }) => {
+            /**
+             * Keyboard entry is currently only used inside of Datetime
+             * where we guarantee textContent is set.
+             * If we end up exposing this feature publicly we should revisit this assumption.
+             */
+            const parsedText = textContent.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
+            return parsedText === inputEl.value;
+        });
+        if (findItemFromCompleteValue) {
+            inputModeColumn.setValue(findItemFromCompleteValue.value);
+            return;
+        }
+        /**
+         * If we typed "56" to get minute 56, then typed "7",
+         * we should select "07" as "567" is not a valid minute.
+         */
+        if (inputEl.value.length === 2) {
+            const changedCharacter = inputEl.value.substring(inputEl.value.length - 1);
+            inputEl.value = changedCharacter;
+            this.selectSingleColumn();
+        }
+    };
+    /**
+     * Searches a list of column items for a particular
+     * value. This is currently used for numeric values.
+     * The zeroBehavior can be set to account for leading
+     * or trailing zeros when looking at the item text.
+     */
+    searchColumn = (colEl, value, zeroBehavior = 'start') => {
+        if (!value) {
+            return false;
+        }
+        const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
+        value = value.replace(behavior, '');
+        const option = Array.from(colEl.querySelectorAll('ion-picker-column-option')).find((el) => {
+            return el.disabled !== true && el.textContent.replace(behavior, '') === value;
+        });
+        if (option) {
+            colEl.setValue(option.value);
+        }
+        return !!option;
+    };
+    /**
+     * Attempts to intelligently search the first and second
+     * column as if they're number columns for the provided numbers
+     * where the first two numbers are the first column
+     * and the last 2 are the last column. Tries to allow for the first
+     * number to be ignored for situations where typos occurred.
+     */
+    multiColumnSearch = (firstColumn, secondColumn, input) => {
+        if (input.length === 0) {
+            return;
+        }
+        const inputArray = input.split('');
+        const hourValue = inputArray.slice(0, 2).join('');
+        // Try to find a match for the first two digits in the first column
+        const foundHour = this.searchColumn(firstColumn, hourValue);
+        // If we have more than 2 digits and found a match for hours,
+        // use the remaining digits for the second column (minutes)
+        if (inputArray.length > 2 && foundHour) {
+            const minuteValue = inputArray.slice(2, 4).join('');
+            this.searchColumn(secondColumn, minuteValue);
+        }
+        // If we couldn't find a match for the two-digit hour, try single digit approaches
+        else if (!foundHour && inputArray.length >= 1) {
+            // First try the first digit as a single-digit hour
+            let singleDigitHour = inputArray[0];
+            let singleDigitFound = this.searchColumn(firstColumn, singleDigitHour);
+            // If that didn't work, try the second digit as a single-digit hour
+            // (handles case where user made a typo in the first digit, or they typed over themselves)
+            if (!singleDigitFound) {
+                inputArray.shift();
+                singleDigitHour = inputArray[0];
+                singleDigitFound = this.searchColumn(firstColumn, singleDigitHour);
+            }
+            // If we found a single-digit hour and have remaining digits,
+            // use up to 2 of the remaining digits for the second column
+            if (singleDigitFound && inputArray.length > 1) {
+                const remainingDigits = inputArray.slice(1, 3).join('');
+                this.searchColumn(secondColumn, remainingDigits);
+            }
+        }
+    };
+    selectMultiColumn = () => {
+        const { inputEl, el } = this;
+        if (!inputEl) {
+            return;
+        }
+        const numericPickers = Array.from(el.querySelectorAll('ion-picker-column')).filter((col) => col.numericInput);
+        const firstColumn = numericPickers[0];
+        const lastColumn = numericPickers[1];
+        let value = inputEl.value;
+        if (value.length > 4) {
+            const startIndex = inputEl.value.length - 4;
+            const newString = inputEl.value.substring(startIndex);
+            inputEl.value = newString;
+            value = newString;
+        }
+        this.multiColumnSearch(firstColumn, lastColumn, value);
+    };
+    /**
+     * Searches the value of the active column
+     * to determine which value users are trying
+     * to select
+     */
+    onInputChange = () => {
+        const { useInputMode, inputEl, inputModeColumn } = this;
+        if (!useInputMode || !inputEl) {
+            return;
+        }
+        if (inputModeColumn) {
+            this.selectSingleColumn();
+        }
+        else {
+            this.selectMultiColumn();
+        }
+    };
+    /**
+     * Emit ionInputModeChange. Picker columns
+     * listen for this event to determine whether
+     * or not their column is "active" for text input.
+     */
+    emitInputModeChange = () => {
+        const { useInputMode, inputModeColumn } = this;
+        this.ionInputModeChange.emit({
+            useInputMode,
+            inputModeColumn,
+        });
+    };
     render() {
-        return (index.h(index.Host, { key: '0e3b8112fd28191ff6af8313fee72919d9b23ee7', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, index.h("input", { key: '92e86aab71f000c35fcf5f4082116285f2e43016', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
-                var _a;
+        return (index.h(index.Host, { key: '28f81e4ed44a633178561757c5199c2c98f94b74', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, index.h("input", { key: 'abb3d1ad25ef63856af7804111175a4d50008bc0', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
                 /**
                  * The "Enter" key represents
                  * the user submitting their time
@@ -473,14 +480,12 @@ 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() }), index.h("div", { key: '5fad8573cd44bee093f26cd4d7cabad836789e79', class: "picker-before" }), index.h("div", { key: 'fd26db9e86a3cafe125283eeff0da8be7ea2928e', class: "picker-after" }), index.h("div", { key: '8174b0f258f3ce00707132c674ff53d3b9fc2aee', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), index.h("slot", { key: 'a118b0ec709164758ae95fcb9e110befb574138f' })));
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), index.h("div", { key: '334a5abdc02e6b127c57177f626d7e4ff5526183', class: "picker-before" }), index.h("div", { key: 'ffd6271931129e88fc7c820e919d684899e420c5', class: "picker-after" }), index.h("div", { key: '78d1d95fd09e04f154ea59f24a1cece72c47ed7b', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), index.h("slot", { key: '0bd5b9f875d3c71f6cbbde2054baeb1b0a2e8cd5' })));
     }
-    get el() { return index.getElement(this); }
 };
 Picker.style = {
-    ionic: ionicPickerMdCss(),
     ios: pickerIosCss(),
     md: pickerMdCss()
 };