@amwaljs/checkout-button 0.2.9 → 0.3.1

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

@@ -0,0 +1,886 @@
+'use strict';
+
+var index = require('./index-DncWzXDA.js');
+var ionicGlobal = require('./ionic-global-DRLi5Iq3.js');
+var helpers = require('./helpers-B4vhh9gt.js');
+var haptic = require('./haptic-CC9tl6g8.js');
+var theme = require('./theme-DbHdw1Nx.js');
+require('./capacitor-CqhugS19.js');
+require('./index-D3mJ1Cix.js');
+
+const buttonsIosCss = () => `.sc-ion-buttons-ios-h{display:flex;align-items:center;transform:translateZ(0);z-index:99}.sc-ion-buttons-ios-s ion-button{--padding-top:0;--padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-buttons-ios-s ion-button{--padding-top:3px;--padding-bottom:3px;--padding-start:5px;--padding-end:5px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;min-height:32px}.sc-ion-buttons-ios-s .button-has-icon-only{--padding-top:0;--padding-bottom:0}.sc-ion-buttons-ios-s ion-button:not(.button-round){--border-radius:4px}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button{--color:initial;--border-color:initial;--background-focused:var(--ion-color-contrast)}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button-solid,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button-solid{--background:var(--ion-color-contrast);--background-focused:#000;--background-focused-opacity:.12;--background-activated:#000;--background-activated-opacity:.12;--background-hover:var(--ion-color-base);--background-hover-opacity:0.45;--color:var(--ion-color-base);--color-focused:var(--ion-color-base)}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button-clear,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button-clear{--color-activated:var(--ion-color-contrast);--color-focused:var(--ion-color-contrast)}.sc-ion-buttons-ios-h.ion-color.sc-ion-buttons-ios-s .button-outline,.ion-color .sc-ion-buttons-ios-h.sc-ion-buttons-ios-s .button-outline{--color-activated:var(--ion-color-base);--color-focused:var(--ion-color-contrast);--background-activated:var(--ion-color-contrast)}.sc-ion-buttons-ios-s .button-clear,.sc-ion-buttons-ios-s .button-outline{--background-activated:transparent;--background-focused:currentColor;--background-hover:transparent}.sc-ion-buttons-ios-s .button-solid:not(.ion-color){--background-focused:#000;--background-focused-opacity:.12;--background-activated:#000;--background-activated-opacity:.12}.sc-ion-buttons-ios-s ion-icon[slot=start]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-margin-end:0.3em;margin-inline-end:0.3em;font-size:1.41em;line-height:0.67}.sc-ion-buttons-ios-s ion-icon[slot=end]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-margin-start:0.4em;margin-inline-start:0.4em;font-size:1.41em;line-height:0.67}.sc-ion-buttons-ios-s ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;font-size:1.65em;line-height:0.67}`;
+
+const buttonsMdCss = () => `.sc-ion-buttons-md-h{display:flex;align-items:center;transform:translateZ(0);z-index:99}.sc-ion-buttons-md-s ion-button{--padding-top:0;--padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-buttons-md-s ion-button{--padding-top:3px;--padding-bottom:3px;--padding-start:8px;--padding-end:8px;--box-shadow:none;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;min-height:32px}.sc-ion-buttons-md-s .button-has-icon-only{--padding-top:0;--padding-bottom:0}.sc-ion-buttons-md-s ion-button:not(.button-round){--border-radius:2px}.sc-ion-buttons-md-h.ion-color.sc-ion-buttons-md-s .button,.ion-color .sc-ion-buttons-md-h.sc-ion-buttons-md-s .button{--color:initial;--color-focused:var(--ion-color-contrast);--color-hover:var(--ion-color-contrast);--background-activated:transparent;--background-focused:var(--ion-color-contrast);--background-hover:var(--ion-color-contrast)}.sc-ion-buttons-md-h.ion-color.sc-ion-buttons-md-s .button-solid,.ion-color .sc-ion-buttons-md-h.sc-ion-buttons-md-s .button-solid{--background:var(--ion-color-contrast);--background-activated:transparent;--background-focused:var(--ion-color-shade);--background-hover:var(--ion-color-base);--color:var(--ion-color-base);--color-focused:var(--ion-color-base);--color-hover:var(--ion-color-base)}.sc-ion-buttons-md-h.ion-color.sc-ion-buttons-md-s .button-outline,.ion-color .sc-ion-buttons-md-h.sc-ion-buttons-md-s .button-outline{--border-color:var(--ion-color-contrast)}.sc-ion-buttons-md-s .button-has-icon-only.button-clear{--padding-top:12px;--padding-end:12px;--padding-bottom:12px;--padding-start:12px;--border-radius:50%;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:3rem;height:3rem}.sc-ion-buttons-md-s .button{--background-hover:currentColor}.sc-ion-buttons-md-s .button-solid{--color:var(--ion-toolbar-background, var(--ion-background-color, #fff));--background:var(--ion-toolbar-color, var(--ion-text-color, #424242));--background-activated:transparent;--background-focused:currentColor}.sc-ion-buttons-md-s .button-outline{--color:initial;--background:transparent;--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor;--border-color:currentColor}.sc-ion-buttons-md-s .button-clear{--color:initial;--background:transparent;--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor}.sc-ion-buttons-md-s ion-icon[slot=start]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-margin-end:0.3em;margin-inline-end:0.3em;font-size:1.4em}.sc-ion-buttons-md-s ion-icon[slot=end]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-margin-start:0.4em;margin-inline-start:0.4em;font-size:1.4em}.sc-ion-buttons-md-s ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;font-size:1.8em}`;
+
+const Buttons = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.collapse = false;
+    }
+    render() {
+        const mode = ionicGlobal.getIonMode(this);
+        return (index.h(index.Host, { key: '2929fd8c4469bab2953c23d47f601706acb104f1', class: {
+                [mode]: true,
+                ['buttons-collapse']: this.collapse,
+            } }));
+    }
+};
+Buttons.style = {
+    ios: buttonsIosCss(),
+    md: buttonsMdCss()
+};
+
+const pickerColumnInternalIosCss = () => `:host{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}:host::-webkit-scrollbar{display:none}:host .picker-item{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;cursor:pointer;overflow:hidden;scroll-snap-align:center}:host .picker-item-empty,:host .picker-item[disabled]{cursor:default}:host .picker-item-empty,:host(:not([disabled])) .picker-item[disabled]{scroll-snap-align:none}:host([disabled]){overflow-y:hidden}:host .picker-item[disabled]{opacity:0.4}:host(.picker-column-active) .picker-item.picker-item-active{color:var(--ion-color-base)}@media (any-hover: hover){:host(:focus){outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}`;
+
+const pickerColumnInternalMdCss = () => `:host{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}:host::-webkit-scrollbar{display:none}:host .picker-item{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;cursor:pointer;overflow:hidden;scroll-snap-align:center}:host .picker-item-empty,:host .picker-item[disabled]{cursor:default}:host .picker-item-empty,:host(:not([disabled])) .picker-item[disabled]{scroll-snap-align:none}:host([disabled]){overflow-y:hidden}:host .picker-item[disabled]{opacity:0.4}:host(.picker-column-active) .picker-item.picker-item-active{color:var(--ion-color-base)}@media (any-hover: hover){:host(:focus){outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}:host .picker-item-active{color:var(--ion-color-base)}`;
+
+const PickerColumnInternal = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ionChange = index.createEvent(this, "ionChange", 7);
+        this.isScrolling = false;
+        this.isColumnVisible = false;
+        this.canExitInputMode = true;
+        this.centerPickerItemInView = (target, smooth = true, canExitInputMode = true) => {
+            const { el, isColumnVisible } = this;
+            if (isColumnVisible) {
+                // (Vertical offset from parent) - (three empty picker rows) + (half the height of the target to ensure the scroll triggers)
+                const top = target.offsetTop - 3 * target.clientHeight + target.clientHeight / 2;
+                if (el.scrollTop !== top) {
+                    /**
+                     * Setting this flag prevents input
+                     * mode from exiting in the picker column's
+                     * scroll callback. This is useful when the user manually
+                     * taps an item or types on the keyboard as both
+                     * of these can cause a scroll to occur.
+                     */
+                    this.canExitInputMode = canExitInputMode;
+                    el.scroll({
+                        top,
+                        left: 0,
+                        behavior: smooth ? 'smooth' : undefined,
+                    });
+                }
+            }
+        };
+        this.setPickerItemActiveState = (item, isActive) => {
+            if (isActive) {
+                item.classList.add(PICKER_ITEM_ACTIVE_CLASS);
+                item.part.add(PICKER_ITEM_ACTIVE_PART);
+            }
+            else {
+                item.classList.remove(PICKER_ITEM_ACTIVE_CLASS);
+                item.part.remove(PICKER_ITEM_ACTIVE_PART);
+            }
+        };
+        /**
+         * When ionInputModeChange is emitted, each column
+         * needs to check if it is the one being made available
+         * for text entry.
+         */
+        this.inputModeChange = (ev) => {
+            if (!this.numericInput) {
+                return;
+            }
+            const { useInputMode, inputModeColumn } = ev.detail;
+            /**
+             * If inputModeColumn is undefined then this means
+             * all numericInput columns are being selected.
+             */
+            const isColumnActive = inputModeColumn === undefined || inputModeColumn === this.el;
+            if (!useInputMode || !isColumnActive) {
+                this.setInputModeActive(false);
+                return;
+            }
+            this.setInputModeActive(true);
+        };
+        /**
+         * Setting isActive will cause a re-render.
+         * As a result, we do not want to cause the
+         * re-render mid scroll as this will cause
+         * the picker column to jump back to
+         * whatever value was selected at the
+         * start of the scroll interaction.
+         */
+        this.setInputModeActive = (state) => {
+            if (this.isScrolling) {
+                this.scrollEndCallback = () => {
+                    this.isActive = state;
+                };
+                return;
+            }
+            this.isActive = state;
+        };
+        /**
+         * When the column scrolls, the component
+         * needs to determine which item is centered
+         * in the view and will emit an ionChange with
+         * 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 = ionicGlobal.isPlatform('ios');
+            const { el } = this;
+            let timeout;
+            let activeEl = this.activeItem;
+            const scrollCallback = () => {
+                helpers.raf(() => {
+                    if (timeout) {
+                        clearTimeout(timeout);
+                        timeout = undefined;
+                    }
+                    if (!this.isScrolling) {
+                        enableHaptics && haptic.hapticSelectionStart();
+                        this.isScrolling = true;
+                    }
+                    /**
+                     * Select item in the center of the column
+                     * which is the month/year that we want to select
+                     */
+                    const bbox = el.getBoundingClientRect();
+                    const centerX = bbox.x + bbox.width / 2;
+                    const centerY = bbox.y + bbox.height / 2;
+                    const activeElement = el.shadowRoot.elementFromPoint(centerX, centerY);
+                    if (activeEl !== null) {
+                        this.setPickerItemActiveState(activeEl, false);
+                    }
+                    if (activeElement === null || activeElement.disabled) {
+                        return;
+                    }
+                    /**
+                     * If we are selecting a new value,
+                     * we need to run haptics again.
+                     */
+                    if (activeElement !== activeEl) {
+                        enableHaptics && haptic.hapticSelectionChanged();
+                        if (this.canExitInputMode) {
+                            /**
+                             * The native iOS wheel picker
+                             * only dismisses the keyboard
+                             * once the selected item has changed
+                             * as a result of a swipe
+                             * from the user. If `canExitInputMode` is
+                             * `false` then this means that the
+                             * scroll is happening as a result of
+                             * the `value` property programmatically changing
+                             * either by an application or by the user via the keyboard.
+                             */
+                            this.exitInputMode();
+                        }
+                    }
+                    activeEl = activeElement;
+                    this.setPickerItemActiveState(activeElement, true);
+                    timeout = setTimeout(() => {
+                        this.isScrolling = false;
+                        enableHaptics && haptic.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;
+                        const dataIndex = activeElement.getAttribute('data-index');
+                        /**
+                         * If no value it is
+                         * possible we hit one of the
+                         * empty padding columns.
+                         */
+                        if (dataIndex === null) {
+                            return;
+                        }
+                        const index = parseInt(dataIndex, 10);
+                        const selectedItem = this.items[index];
+                        if (selectedItem.value !== this.value) {
+                            this.setValue(selectedItem.value);
+                        }
+                    }, 250);
+                });
+            };
+            /**
+             * Wrap this in an raf so that the scroll callback
+             * does not fire when component is initially shown.
+             */
+            helpers.raf(() => {
+                el.addEventListener('scroll', scrollCallback);
+                this.destroyScrollListener = () => {
+                    el.removeEventListener('scroll', scrollCallback);
+                };
+            });
+        };
+        /**
+         * Tells the parent picker to
+         * exit text entry mode. This is only called
+         * when the selected item changes during scroll, so
+         * we know that the user likely wants to scroll
+         * instead of type.
+         */
+        this.exitInputMode = () => {
+            const { parentEl } = this;
+            if (parentEl == null)
+                return;
+            parentEl.exitInputMode();
+            /**
+             * setInputModeActive only takes
+             * effect once scrolling stops to avoid
+             * a component re-render while scrolling.
+             * However, we want the visual active
+             * indicator to go away immediately, so
+             * we call classList.remove here.
+             */
+            this.el.classList.remove('picker-column-active');
+        };
+        this.isActive = false;
+        this.disabled = false;
+        this.items = [];
+        this.value = undefined;
+        this.color = 'primary';
+        this.numericInput = false;
+    }
+    valueChange() {
+        if (this.isColumnVisible) {
+            /**
+             * Only scroll the active item into view when the picker column
+             * is actively visible to the user.
+             */
+            this.scrollActiveItemIntoView();
+        }
+    }
+    /**
+     * Only setup scroll listeners
+     * when the picker is visible, otherwise
+     * the container will have a scroll
+     * height of 0px.
+     */
+    componentWillLoad() {
+        const visibleCallback = (entries) => {
+            /**
+             * Browsers will sometimes group multiple IO events into a single callback.
+             * As a result, we want to grab the last/most recent event in case there are multiple events.
+             */
+            const ev = entries[entries.length - 1];
+            if (ev.isIntersecting) {
+                const { activeItem, el } = this;
+                this.isColumnVisible = true;
+                /**
+                 * Because this initial call to scrollActiveItemIntoView has to fire before
+                 * the scroll listener is set up, we need to manage the active class manually.
+                 */
+                const oldActive = helpers.getElementRoot(el).querySelector(`.${PICKER_ITEM_ACTIVE_CLASS}`);
+                if (oldActive) {
+                    this.setPickerItemActiveState(oldActive, false);
+                }
+                this.scrollActiveItemIntoView();
+                if (activeItem) {
+                    this.setPickerItemActiveState(activeItem, true);
+                }
+                this.initializeScrollListener();
+            }
+            else {
+                this.isColumnVisible = false;
+                if (this.destroyScrollListener) {
+                    this.destroyScrollListener();
+                    this.destroyScrollListener = undefined;
+                }
+            }
+        };
+        new IntersectionObserver(visibleCallback, { threshold: 0.001 }).observe(this.el);
+        const parentEl = (this.parentEl = this.el.closest('ion-picker-internal'));
+        if (parentEl !== null) {
+            // TODO(FW-2832): type
+            parentEl.addEventListener('ionInputModeChange', (ev) => this.inputModeChange(ev));
+        }
+    }
+    componentDidRender() {
+        var _a;
+        const { activeItem, items, isColumnVisible, value } = this;
+        if (isColumnVisible) {
+            if (activeItem) {
+                this.scrollActiveItemIntoView();
+            }
+            else if (((_a = items[0]) === null || _a === void 0 ? void 0 : _a.value) !== value) {
+                /**
+                 * If the picker column does not have an active item and the current value
+                 * does not match the first item in the picker column, that means
+                 * the value is out of bounds. In this case, we assign the value to the
+                 * first item to match the scroll position of the column.
+                 *
+                 */
+                this.setValue(items[0].value);
+            }
+        }
+    }
+    /** @internal  */
+    async scrollActiveItemIntoView() {
+        const activeEl = this.activeItem;
+        if (activeEl) {
+            this.centerPickerItemInView(activeEl, false, false);
+        }
+    }
+    /**
+     * Sets the value prop and fires the ionChange event.
+     * This is used when we need to fire ionChange from
+     * user-generated events that cannot be caught with normal
+     * input/change event listeners.
+     * @internal
+     */
+    async setValue(value) {
+        const { items } = this;
+        this.value = value;
+        const findItem = items.find((item) => item.value === value && item.disabled !== true);
+        if (findItem) {
+            this.ionChange.emit(findItem);
+        }
+    }
+    get activeItem() {
+        // If the whole picker column is disabled, the current value should appear active
+        // If the current value item is specifically disabled, it should not appear active
+        const selector = `.picker-item[data-value="${this.value}"]${this.disabled ? '' : ':not([disabled])'}`;
+        return helpers.getElementRoot(this.el).querySelector(selector);
+    }
+    render() {
+        const { items, color, disabled: pickerDisabled, isActive, numericInput } = this;
+        const mode = ionicGlobal.getIonMode(this);
+        /**
+         * exportparts is needed so ion-datetime can expose the parts
+         * from two layers of shadow nesting. If this causes problems,
+         * the attribute can be moved to datetime.tsx and set on every
+         * instance of ion-picker-column-internal there instead.
+         */
+        return (index.h(index.Host, { key: '42a034f2533d30d19f96a121eb74d5f757e1c684', exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: theme.createColorClasses(color, {
+                [mode]: true,
+                ['picker-column-active']: isActive,
+                ['picker-column-numeric-input']: numericInput,
+            }) }, index.h("div", { key: '85efccb40c87d473c06026b8041d57b40d2369c3', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '9fae4dd6697f23acba18c218ba250ea77954b18d', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: 'f117afeb204a4f6bb34a1cd0e1b786fa479d8b32', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), items.map((item, index$1) => {
+            const isItemDisabled = pickerDisabled || item.disabled || false;
+            return (index.h("button", { tabindex: "-1", class: {
+                    'picker-item': true,
+                }, "data-value": item.value, "data-index": index$1, onClick: (ev) => {
+                    this.centerPickerItemInView(ev.target, true);
+                }, disabled: isItemDisabled, part: PICKER_ITEM_PART }, item.text));
+        }), index.h("div", { key: '28aa37f9ce90e88b9c3a5b2c399e3066e9f339e1', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: 'ef4ae6bee2b17918f0c2aba9d5c720c1d95987e4', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '564967bc8e42a9018163850da3a967a933b3de7b', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "valueChange": 0
+            }]
+    }; }
+};
+const PICKER_ITEM_ACTIVE_CLASS = 'picker-item-active';
+const PICKER_ITEM_PART = 'wheel-item';
+const PICKER_ITEM_ACTIVE_PART = 'active';
+PickerColumnInternal.style = {
+    ios: pickerColumnInternalIosCss(),
+    md: pickerColumnInternalMdCss()
+};
+
+const pickerInternalIosCss = () => `:host{display:flex;position:relative;align-items:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}@supports (inset-inline-start: 0){:host .picker-before{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-before{left:0}:host-context([dir=rtl]) .picker-before{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-before{left:unset;right:unset;right:0}}}:host .picker-after{top:116px;height:84px}@supports (inset-inline-start: 0){:host .picker-after{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-after{left:0}:host-context([dir=rtl]) .picker-after{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-after{left:unset;right:unset;right:0}}}:host .picker-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;transform:translateY(-50%);background:var(--wheel-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-internal:first-of-type){text-align:start}:host ::slotted(ion-picker-column-internal:last-of-type){text-align:end}:host ::slotted(ion-picker-column-internal:only-child){text-align:center}:host .picker-before{background:linear-gradient(to bottom, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-after{background:linear-gradient(to top, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-highlight{background:var(--wheel-highlight-background, var(--ion-color-step-150, #eeeeef))}`;
+
+const pickerInternalMdCss = () => `:host{display:flex;position:relative;align-items:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}@supports (inset-inline-start: 0){:host .picker-before{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-before{left:0}:host-context([dir=rtl]) .picker-before{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-before{left:unset;right:unset;right:0}}}:host .picker-after{top:116px;height:84px}@supports (inset-inline-start: 0){:host .picker-after{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-after{left:0}:host-context([dir=rtl]) .picker-after{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-after{left:unset;right:unset;right:0}}}:host .picker-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;transform:translateY(-50%);background:var(--wheel-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-internal:first-of-type){text-align:start}:host ::slotted(ion-picker-column-internal:last-of-type){text-align:end}:host ::slotted(ion-picker-column-internal:only-child){text-align:center}:host .picker-before{background:linear-gradient(to bottom, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}:host .picker-after{background:linear-gradient(to top, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}`;
+
+const PickerInternal = 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;
+        };
+        /**
+         * 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.
+         */
+        this.onFocusOut = (ev) => {
+            // TODO(FW-2832): type
+            const { relatedTarget } = ev;
+            if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN-INTERNAL' && relatedTarget !== this.inputEl)) {
+                this.exitInputMode();
+            }
+        };
+        /**
+         * When picker columns receive focus
+         * the parent picker needs to determine
+         * whether to enter/exit input mode.
+         */
+        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-INTERNAL') {
+                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();
+                }
+            }
+        };
+        /**
+         * On click we need to run an actionOnClick
+         * function that has been set in onPointerDown
+         * so that we enter/exit input mode correctly.
+         */
+        this.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.
+         */
+        this.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 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 (ev.target.tagName === 'ION-PICKER-COLUMN-INTERNAL') {
+                        /**
+                         * 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);
+                            };
+                        }
+                    }
+                    else {
+                        this.actionOnClick = () => {
+                            this.exitInputMode();
+                        };
+                    }
+                    /**
+                     * 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-internal.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.
+         */
+        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-internal.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();
+            }
+            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 values = inputModeColumn.items.filter((item) => item.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 = values.find(({ text }) => {
+                const parsedText = text.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.
+         */
+        this.searchColumn = (colEl, value, zeroBehavior = 'start') => {
+            const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
+            const item = colEl.items.find(({ text, disabled }) => disabled !== true && text.replace(behavior, '') === value);
+            if (item) {
+                colEl.setValue(item.value);
+            }
+        };
+        this.selectMultiColumn = () => {
+            const { inputEl, el } = this;
+            if (!inputEl) {
+                return;
+            }
+            const numericPickers = Array.from(el.querySelectorAll('ion-picker-column-internal')).filter((col) => col.numericInput);
+            const firstColumn = numericPickers[0];
+            const lastColumn = numericPickers[1];
+            let value = inputEl.value;
+            let minuteValue;
+            switch (value.length) {
+                case 1:
+                    this.searchColumn(firstColumn, value);
+                    break;
+                case 2:
+                    /**
+                     * If the first character is `0` or `1` it is
+                     * possible that users are trying to type `09`
+                     * or `11` into the hour field, so we should look
+                     * at that first.
+                     */
+                    const firstCharacter = inputEl.value.substring(0, 1);
+                    value = firstCharacter === '0' || firstCharacter === '1' ? inputEl.value : firstCharacter;
+                    this.searchColumn(firstColumn, value);
+                    /**
+                     * If only checked the first value,
+                     * we can check the second value
+                     * for a match in the minutes column
+                     */
+                    if (value.length === 1) {
+                        minuteValue = inputEl.value.substring(inputEl.value.length - 1);
+                        this.searchColumn(lastColumn, minuteValue, 'end');
+                    }
+                    break;
+                case 3:
+                    /**
+                     * If the first character is `0` or `1` it is
+                     * possible that users are trying to type `09`
+                     * or `11` into the hour field, so we should look
+                     * at that first.
+                     */
+                    const firstCharacterAgain = inputEl.value.substring(0, 1);
+                    value =
+                        firstCharacterAgain === '0' || firstCharacterAgain === '1'
+                            ? inputEl.value.substring(0, 2)
+                            : firstCharacterAgain;
+                    this.searchColumn(firstColumn, value);
+                    /**
+                     * If only checked the first value,
+                     * we can check the second value
+                     * for a match in the minutes column
+                     */
+                    minuteValue = value.length === 1 ? inputEl.value.substring(1) : inputEl.value.substring(2);
+                    this.searchColumn(lastColumn, minuteValue, 'end');
+                    break;
+                case 4:
+                    /**
+                     * If the first character is `0` or `1` it is
+                     * possible that users are trying to type `09`
+                     * or `11` into the hour field, so we should look
+                     * at that first.
+                     */
+                    const firstCharacterAgainAgain = inputEl.value.substring(0, 1);
+                    value =
+                        firstCharacterAgainAgain === '0' || firstCharacterAgainAgain === '1'
+                            ? inputEl.value.substring(0, 2)
+                            : firstCharacterAgainAgain;
+                    this.searchColumn(firstColumn, value);
+                    /**
+                     * If only checked the first value,
+                     * we can check the second value
+                     * for a match in the minutes column
+                     */
+                    const minuteValueAgain = value.length === 1
+                        ? inputEl.value.substring(1, inputEl.value.length)
+                        : inputEl.value.substring(2, inputEl.value.length);
+                    this.searchColumn(lastColumn, minuteValueAgain, 'end');
+                    break;
+                default:
+                    const startIndex = inputEl.value.length - 4;
+                    const newString = inputEl.value.substring(startIndex);
+                    inputEl.value = newString;
+                    this.selectMultiColumn();
+                    break;
+            }
+        };
+        /**
+         * Searches the value of the active column
+         * to determine which value users are trying
+         * to select
+         */
+        this.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.
+         */
+        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);
+    }
+    /**
+     * @internal
+     * Exits text entry mode for the picker
+     * This method blurs the hidden input
+     * and cause the keyboard to dismiss.
+     */
+    async exitInputMode() {
+        const { inputEl, useInputMode } = this;
+        if (!useInputMode || !inputEl) {
+            return;
+        }
+        this.useInputMode = false;
+        this.inputModeColumn = undefined;
+        inputEl.blur();
+        inputEl.value = '';
+        if (this.destroyKeypressListener) {
+            this.destroyKeypressListener();
+            this.destroyKeypressListener = undefined;
+        }
+        this.emitInputModeChange();
+    }
+    render() {
+        return (index.h(index.Host, { key: '01cbd466787242ad070b01909714089570b4d67f', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, index.h("input", { key: '7ff8c0a74c107610a6f0dd9fbc2fc7a4a6dc2468', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+                var _a;
+                /**
+                 * The "Enter" key represents
+                 * the user submitting their time
+                 * selection, so we should blur the
+                 * input (and therefore close the keyboard)
+                 *
+                 * Updating the picker's state to no longer
+                 * be in input mode is handled in the onBlur
+                 * callback below.
+                 */
+                if (ev.key === 'Enter') {
+                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
+                }
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), index.h("div", { key: '4700c9d877f54ae8f3fb173122193c27637f70a4', class: "picker-before" }), index.h("div", { key: '7ceae834b15d559f3819ec2116f83669cf6665fc', class: "picker-after" }), index.h("div", { key: '2d3bfda76279c2ee14edc067c53651be23b8b525', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), index.h("slot", { key: '4797def7a3882a8a911ad47949b76f58a9f448d1' })));
+    }
+    get el() { return index.getElement(this); }
+};
+PickerInternal.style = {
+    ios: pickerInternalIosCss(),
+    md: pickerInternalMdCss()
+};
+
+exports.ion_buttons = Buttons;
+exports.ion_picker_column_internal = PickerColumnInternal;
+exports.ion_picker_internal = PickerInternal;