@amwaljs/checkout-button 0.3.0 → 0.3.2

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

@@ -1,1157 +0,0 @@
-'use strict';
-
-var index = require('./index-q1-id3dG.js');
-var helpers = require('./helpers-VdS_U_Su.js');
-var index$1 = require('./index-D3mJ1Cix.js');
-var haptic = require('./haptic-DCn793nz.js');
-var ionicGlobal = require('./ionic-global-tfENS075.js');
-var theme = require('./theme-DbHdw1Nx.js');
-require('./capacitor-CqhugS19.js');
-
-const pickerIosCss = () => `: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}: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;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: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: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: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}: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;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: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: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;
-        };
-        /**
-         * 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' && 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') {
-                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') {
-                        /**
-                         * 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.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.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 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.
-         */
-        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;
-        };
-        /**
-         * 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.
-         */
-        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);
-        };
-        /**
-         * 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: '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) => {
-                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: '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 = {
-    ios: pickerIosCss(),
-    md: pickerMdCss()
-};
-
-const pickerColumnCss = () => `:host{display:flex;position:relative;align-items:center;justify-content:center;max-width:100%;height:200px;font-size:22px;text-align:center}.assistive-focusable{left:0;right:0;top:0;bottom:0;position:absolute;z-index:1;pointer-events:none}.assistive-focusable:focus{outline:none}.picker-opts{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-width:26px;max-height:200px;outline:none;text-align:inherit;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none}.picker-item-empty{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.picker-opts::-webkit-scrollbar{display:none}::slotted(ion-picker-column-option){display:block;scroll-snap-align:center}.picker-item-empty,:host(:not([disabled])) ::slotted(ion-picker-column-option.option-disabled){scroll-snap-align:none}::slotted([slot=prefix]),::slotted([slot=suffix]){max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::slotted([slot=prefix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;justify-content:end}::slotted([slot=suffix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;justify-content:start}:host(.picker-column-disabled) .picker-opts{overflow-y:hidden}:host(.picker-column-disabled) ::slotted(ion-picker-column-option){cursor:default;opacity:0.4;pointer-events:none}@media (any-hover: hover){:host(:focus) .picker-opts{outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}`;
-
-const PickerColumn = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.ionChange = index.createEvent(this, "ionChange", 7);
-        this.isScrolling = false;
-        this.isColumnVisible = false;
-        this.canExitInputMode = true;
-        this.updateValueTextOnScroll = false;
-        this.ariaLabel = null;
-        this.isActive = false;
-        /**
-         * If `true`, the user cannot interact with the picker.
-         */
-        this.disabled = false;
-        /**
-         * The color to use from your application's color palette.
-         * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-         * For more information on colors, see [theming](/docs/theming/basics).
-         */
-        this.color = 'primary';
-        /**
-         * If `true`, tapping the picker will
-         * reveal a number input keyboard that lets
-         * the user type in values for each picker
-         * column. This is useful when working
-         * with time pickers.
-         *
-         * @internal
-         */
-        this.numericInput = false;
-        this.centerPickerItemInView = (target, smooth = true, canExitInputMode = true) => {
-            const { isColumnVisible, scrollEl } = this;
-            if (isColumnVisible && scrollEl) {
-                // (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 (scrollEl.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;
-                    this.updateValueTextOnScroll = false;
-                    scrollEl.scroll({
-                        top,
-                        left: 0,
-                        behavior: smooth ? 'smooth' : undefined,
-                    });
-                }
-            }
-        };
-        this.setPickerItemActiveState = (item, isActive) => {
-            if (isActive) {
-                item.classList.add(PICKER_ITEM_ACTIVE_CLASS);
-            }
-            else {
-                item.classList.remove(PICKER_ITEM_ACTIVE_CLASS);
-            }
-        };
-        /**
-         * 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, scrollEl } = this;
-            let timeout;
-            let activeEl = this.activeItem;
-            const scrollCallback = () => {
-                helpers.raf(() => {
-                    var _a;
-                    if (!scrollEl)
-                        return;
-                    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 = scrollEl.getBoundingClientRect();
-                    const centerX = bbox.x + bbox.width / 2;
-                    const centerY = bbox.y + bbox.height / 2;
-                    /**
-                     * elementFromPoint returns the top-most element.
-                     * This means that if an ion-backdrop is overlaying the
-                     * picker then the appropriate picker column option will
-                     * not be selected. To account for this, we use elementsFromPoint
-                     * and use an Array.find to find the appropriate column option
-                     * at that point.
-                     *
-                     * Additionally, the picker column could be used in the
-                     * Shadow DOM (i.e. in ion-datetime) so we need to make
-                     * sure we are choosing the correct host otherwise
-                     * the elements returns by elementsFromPoint will be
-                     * retargeted. To account for this, we check to see
-                     * if the picker column has a parent shadow root. If
-                     * so, we use that shadow root when doing elementsFromPoint.
-                     * Otherwise, we just use the document.
-                     */
-                    const rootNode = el.getRootNode();
-                    const hasParentShadow = rootNode instanceof ShadowRoot;
-                    const referenceNode = hasParentShadow ? rootNode : index$1.doc;
-                    /**
-                     * If the reference node is undefined
-                     * then it's likely that doc is undefined
-                     * due to being in an SSR environment.
-                     */
-                    if (referenceNode === undefined) {
-                        return;
-                    }
-                    const elementsAtPoint = referenceNode.elementsFromPoint(centerX, centerY);
-                    /**
-                     * elementsFromPoint can returns multiple elements
-                     * so find the relevant picker column option if one exists.
-                     */
-                    let newActiveElement = elementsAtPoint.find((el) => el.tagName === 'ION-PICKER-COLUMN-OPTION');
-                    /**
-                     * TODO(FW-6594): Remove this workaround when iOS 16 is no longer
-                     * supported.
-                     *
-                     * If `elementsFromPoint` failed to find the active element (a known
-                     * issue on iOS 16 when elements are in a Shadow DOM and the
-                     * referenceNode is the document), a fallback to `elementFromPoint`
-                     * is used. While `elementsFromPoint` returns all elements,
-                     * `elementFromPoint` returns only the top-most, which is sufficient
-                     * for this use case and appears to handle Shadow DOM retargeting
-                     * more reliably in this specific iOS bug.
-                     */
-                    if (newActiveElement === undefined) {
-                        const fallbackActiveElement = referenceNode.elementFromPoint(centerX, centerY);
-                        if ((fallbackActiveElement === null || fallbackActiveElement === void 0 ? void 0 : fallbackActiveElement.tagName) === 'ION-PICKER-COLUMN-OPTION') {
-                            newActiveElement = fallbackActiveElement;
-                        }
-                    }
-                    if (activeEl !== undefined) {
-                        this.setPickerItemActiveState(activeEl, false);
-                    }
-                    if (newActiveElement === undefined || newActiveElement.disabled) {
-                        return;
-                    }
-                    /**
-                     * If we are selecting a new value,
-                     * we need to run haptics again.
-                     */
-                    if (newActiveElement !== 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 = newActiveElement;
-                    this.setPickerItemActiveState(newActiveElement, true);
-                    /**
-                     * Set the aria-valuetext even though the value prop has not been updated yet.
-                     * This enables some screen readers to announce the value as the users drag
-                     * as opposed to when their release their pointer from the screen.
-                     *
-                     * When the value is programmatically updated, we will smoothly scroll
-                     * to the new option. However, we do not want to update aria-valuetext mid-scroll
-                     * as that can cause the old value to be briefly set before being set to the
-                     * correct option. This will cause some screen readers to announce the old value
-                     * again before announcing the new value. The correct valuetext will be set on render.
-                     */
-                    if (this.updateValueTextOnScroll) {
-                        (_a = this.assistiveFocusable) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-valuetext', this.getOptionValueText(newActiveElement));
-                    }
-                    timeout = setTimeout(() => {
-                        this.isScrolling = false;
-                        this.updateValueTextOnScroll = true;
-                        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;
-                        this.setValue(newActiveElement.value);
-                    }, 250);
-                });
-            };
-            /**
-             * Wrap this in an raf so that the scroll callback
-             * does not fire when component is initially shown.
-             */
-            helpers.raf(() => {
-                if (!scrollEl)
-                    return;
-                scrollEl.addEventListener('scroll', scrollCallback);
-                this.destroyScrollListener = () => {
-                    scrollEl.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');
-        };
-        /**
-         * Find the next enabled option after the active option.
-         * @param stride - How many options to "jump" over in order to select the next option.
-         * This can be used to implement PageUp/PageDown behaviors where pressing these keys
-         * scrolls the picker by more than 1 option. For example, a stride of 5 means select
-         * the enabled option 5 options after the active one. Note that the actual option selected
-         * may be past the stride if the option at the stride is disabled.
-         */
-        this.findNextOption = (stride = 1) => {
-            const { activeItem } = this;
-            if (!activeItem)
-                return null;
-            let prevNode = activeItem;
-            let node = activeItem.nextElementSibling;
-            while (node != null) {
-                if (stride > 0) {
-                    stride--;
-                }
-                if (node.tagName === 'ION-PICKER-COLUMN-OPTION' && !node.disabled && stride === 0) {
-                    return node;
-                }
-                prevNode = node;
-                // Use nextElementSibling instead of nextSibling to avoid text/comment nodes
-                node = node.nextElementSibling;
-            }
-            return prevNode;
-        };
-        /**
-         * Find the next enabled option after the active option.
-         * @param stride - How many options to "jump" over in order to select the next option.
-         * This can be used to implement PageUp/PageDown behaviors where pressing these keys
-         * scrolls the picker by more than 1 option. For example, a stride of 5 means select
-         * the enabled option 5 options before the active one. Note that the actual option selected
-         *  may be past the stride if the option at the stride is disabled.
-         */
-        this.findPreviousOption = (stride = 1) => {
-            const { activeItem } = this;
-            if (!activeItem)
-                return null;
-            let nextNode = activeItem;
-            let node = activeItem.previousElementSibling;
-            while (node != null) {
-                if (stride > 0) {
-                    stride--;
-                }
-                if (node.tagName === 'ION-PICKER-COLUMN-OPTION' && !node.disabled && stride === 0) {
-                    return node;
-                }
-                nextNode = node;
-                // Use previousElementSibling instead of previousSibling to avoid text/comment nodes
-                node = node.previousElementSibling;
-            }
-            return nextNode;
-        };
-        this.onKeyDown = (ev) => {
-            /**
-             * The below operations should be inverted when running on a mobile device.
-             * For example, swiping up will dispatch an "ArrowUp" event. On desktop,
-             * this should cause the previous option to be selected. On mobile, swiping
-             * up causes a view to scroll down. As a result, swiping up on mobile should
-             * cause the next option to be selected. The Home/End operations remain
-             * unchanged because those always represent the first/last options, respectively.
-             */
-            const mobile = ionicGlobal.isPlatform('mobile');
-            let newOption = null;
-            switch (ev.key) {
-                case 'ArrowDown':
-                    newOption = mobile ? this.findPreviousOption() : this.findNextOption();
-                    break;
-                case 'ArrowUp':
-                    newOption = mobile ? this.findNextOption() : this.findPreviousOption();
-                    break;
-                case 'PageUp':
-                    newOption = mobile ? this.findNextOption(5) : this.findPreviousOption(5);
-                    break;
-                case 'PageDown':
-                    newOption = mobile ? this.findPreviousOption(5) : this.findNextOption(5);
-                    break;
-                case 'Home':
-                    /**
-                     * There is no guarantee that the first child will be an ion-picker-column-option,
-                     * so we do not use firstElementChild.
-                     */
-                    newOption = this.el.querySelector('ion-picker-column-option:first-of-type');
-                    break;
-                case 'End':
-                    /**
-                     * There is no guarantee that the last child will be an ion-picker-column-option,
-                     * so we do not use lastElementChild.
-                     */
-                    newOption = this.el.querySelector('ion-picker-column-option:last-of-type');
-                    break;
-            }
-            if (newOption !== null) {
-                this.setValue(newOption.value);
-                // This stops any default browser behavior such as scrolling
-                ev.preventDefault();
-            }
-        };
-        /**
-         * Utility to generate the correct text for aria-valuetext.
-         */
-        this.getOptionValueText = (el) => {
-            var _a;
-            return el ? (_a = el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : el.innerText : '';
-        };
-    }
-    ariaLabelChanged(newValue) {
-        this.ariaLabel = newValue;
-    }
-    valueChange() {
-        if (this.isColumnVisible) {
-            /**
-             * Only scroll the active item into view when the picker column
-             * is actively visible to the user.
-             */
-            this.scrollActiveItemIntoView(true);
-        }
-    }
-    /**
-     * Only setup scroll listeners
-     * when the picker is visible, otherwise
-     * the container will have a scroll
-     * height of 0px.
-     */
-    componentWillLoad() {
-        /**
-         * We cache parentEl in a local variable
-         * so we don't need to keep accessing
-         * the class variable (which comes with
-         * a small performance hit)
-         */
-        const parentEl = (this.parentEl = this.el.closest('ion-picker'));
-        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;
-                }
-            }
-        };
-        /**
-         * Set the root to be the parent picker element
-         * This causes the IO callback
-         * to be fired in WebKit as soon as the element
-         * is visible. If we used the default root value
-         * then WebKit would only fire the IO callback
-         * after any animations (such as a modal transition)
-         * finished, and there would potentially be a flicker.
-         */
-        new IntersectionObserver(visibleCallback, { threshold: 0.001, root: this.parentEl }).observe(this.el);
-        if (parentEl !== null) {
-            // TODO(FW-2832): type
-            parentEl.addEventListener('ionInputModeChange', (ev) => this.inputModeChange(ev));
-        }
-    }
-    componentDidRender() {
-        const { el, activeItem, isColumnVisible, value } = this;
-        if (isColumnVisible && !activeItem) {
-            const firstOption = el.querySelector('ion-picker-column-option');
-            /**
-             * 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.
-             *
-             */
-            if (firstOption !== null && firstOption.value !== value) {
-                this.setValue(firstOption.value);
-            }
-        }
-    }
-    /** @internal  */
-    async scrollActiveItemIntoView(smooth = false) {
-        const activeEl = this.activeItem;
-        if (activeEl) {
-            this.centerPickerItemInView(activeEl, smooth, 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) {
-        if (this.disabled === true || this.value === value) {
-            return;
-        }
-        this.value = value;
-        this.ionChange.emit({ value });
-    }
-    /**
-     * Sets focus on the scrollable container within the picker column.
-     * Use this method instead of the global `pickerColumn.focus()`.
-     */
-    async setFocus() {
-        if (this.assistiveFocusable) {
-            this.assistiveFocusable.focus();
-        }
-    }
-    connectedCallback() {
-        var _a;
-        this.ariaLabel = (_a = this.el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : 'Select a value';
-    }
-    get activeItem() {
-        const { value } = this;
-        const options = Array.from(this.el.querySelectorAll('ion-picker-column-option'));
-        return options.find((option) => {
-            /**
-             * 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
-             */
-            if (!this.disabled && option.disabled) {
-                return false;
-            }
-            return option.value === value;
-        });
-    }
-    render() {
-        const { color, disabled, isActive, numericInput } = this;
-        const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: 'db903fd415f8a2d91994dececca481c1af8ba6a9', class: theme.createColorClasses(color, {
-                [mode]: true,
-                ['picker-column-active']: isActive,
-                ['picker-column-numeric-input']: numericInput,
-                ['picker-column-disabled']: disabled,
-            }) }, index.h("slot", { key: '02ce9e1dd7df91afcd50b06416552bcffb5dec98', name: "prefix" }), index.h("div", { key: '6dfd7d2429bec19244a6b1afb4448121963a031b', class: "picker-opts", ref: (el) => {
-                this.scrollEl = el;
-            }, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, index.h("div", { key: 'e30ce0b9cefbfe4d4441fa33acf595da31855c3f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '8be2bd293c12c6ba720d9b31d0d561a96f42e97d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '8afdcddddabbf646fbb55cb0ba4448309a2c1dd9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("slot", { key: '6aa0dacc34d6848575ad5b122b9046982308ca43' }), index.h("div", { key: '92ec8a357414c1b779b11d1dd18fb87a7ee63982', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: 'b89457cb74b5907c25594ff6720ac54ca537e933', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '5bbc92e6bc24de08e39873bf08c5b668373ac0f8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), index.h("slot", { key: 'd7bf2b519214f0f3576a4ca79844ad97827dd97f', name: "suffix" })));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "aria-label": [{
-                "ariaLabelChanged": 0
-            }],
-        "value": [{
-                "valueChange": 0
-            }]
-    }; }
-};
-const PICKER_ITEM_ACTIVE_CLASS = 'option-active';
-PickerColumn.style = pickerColumnCss();
-
-const pickerColumnOptionIosCss = () => `.picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;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}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}`;
-
-const pickerColumnOptionMdCss = () => `.picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;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}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}:host(.option-active){color:var(--ion-color-base)}`;
-
-const PickerColumnOption = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * We keep track of the parent picker column
-         * so we can update the value of it when
-         * clicking an enable option.
-         */
-        this.pickerColumn = null;
-        /**
-         * The aria-label of the option.
-         *
-         * If the value changes, then it will trigger a
-         * re-render of the picker since it's a @State variable.
-         * Otherwise, the `aria-label` attribute cannot be updated
-         * after the component is loaded.
-         */
-        this.ariaLabel = null;
-        /**
-         * If `true`, the user cannot interact with the picker column option.
-         */
-        this.disabled = false;
-        /**
-         * The color to use from your application's color palette.
-         * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-         * For more information on colors, see [theming](/docs/theming/basics).
-         */
-        this.color = 'primary';
-    }
-    /**
-     * The aria-label of the option has changed after the
-     * first render and needs to be updated within the component.
-     *
-     * @param ariaLbl The new aria-label value.
-     */
-    onAriaLabelChange(ariaLbl) {
-        this.ariaLabel = ariaLbl;
-    }
-    componentWillLoad() {
-        const inheritedAttributes = helpers.inheritAttributes(this.el, ['aria-label']);
-        /**
-         * The initial value of `aria-label` needs to be set for
-         * the first render.
-    
-         */
-        this.ariaLabel = inheritedAttributes['aria-label'] || null;
-    }
-    connectedCallback() {
-        this.pickerColumn = this.el.closest('ion-picker-column');
-    }
-    disconnectedCallback() {
-        this.pickerColumn = null;
-    }
-    /**
-     * The column options can load at any time
-     * so the options needs to tell the
-     * parent picker column when it is loaded
-     * so the picker column can ensure it is
-     * centered in the view.
-     *
-     * We intentionally run this for every
-     * option. If we only ran this from
-     * the selected option then if the newly
-     * loaded options were not selected then
-     * scrollActiveItemIntoView would not be called.
-     */
-    componentDidLoad() {
-        const { pickerColumn } = this;
-        if (pickerColumn !== null) {
-            pickerColumn.scrollActiveItemIntoView();
-        }
-    }
-    /**
-     * When an option is clicked, update the
-     * parent picker column value. This
-     * component will handle centering the option
-     * in the column view.
-     */
-    onClick() {
-        const { pickerColumn } = this;
-        if (pickerColumn !== null) {
-            pickerColumn.setValue(this.value);
-        }
-    }
-    render() {
-        const { color, disabled, ariaLabel } = this;
-        const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: 'f816729941aabcb31ddfdce3ffe2e2139030d715', class: theme.createColorClasses(color, {
-                [mode]: true,
-                ['option-disabled']: disabled,
-            }) }, index.h("div", { key: 'd942de84fd14d7dc06b1e5cf4f7920d1dc3c6371', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, index.h("slot", { key: 'b0df5717b42209e649097209a01476e1a66f5c5c' }))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "aria-label": [{
-                "onAriaLabelChange": 0
-            }]
-    }; }
-};
-PickerColumnOption.style = {
-    ios: pickerColumnOptionIosCss(),
-    md: pickerColumnOptionMdCss()
-};
-
-exports.ion_picker = Picker;
-exports.ion_picker_column = PickerColumn;
-exports.ion_picker_column_option = PickerColumnOption;