@ionic/core 7.7.2-dev.11707425083.192d8103 → 7.7.2-dev.11707881769.185d2a14

package/dist/collection/components/picker/picker.js

@@ -2,497 +2,196 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { getElementRoot } from "../../utils/helpers";
+import { raf } from "../../utils/helpers";
+import { createLockController } from "../../utils/lock-controller";
+import { createDelegateController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
+import { getClassMap } from "../../utils/theme";
+import { getIonMode } from "../../global/ionic-global";
+import { iosEnterAnimation } from "./animations/ios.enter";
+import { iosLeaveAnimation } from "./animations/ios.leave";
+// TODO(FW-2832): types
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Picker {
     constructor() {
-        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();
-            };
+        this.delegateController = createDelegateController(this);
+        this.lockController = createLockController();
+        this.triggerController = createTriggerController();
+        this.onBackdropTap = () => {
+            this.dismiss(undefined, BACKDROP);
         };
-        /**
-         * 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') => {
-            const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
-            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);
-            }
-        };
-        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;
-            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;
+        this.dispatchCancelHandler = (ev) => {
+            const role = ev.detail.role;
+            if (isCancel(role)) {
+                const cancelButton = this.buttons.find((b) => b.role === 'cancel');
+                this.callButtonHandler(cancelButton);
             }
         };
+        this.presented = false;
+        this.overlayIndex = undefined;
+        this.delegate = undefined;
+        this.hasController = false;
+        this.keyboardClose = true;
+        this.enterAnimation = undefined;
+        this.leaveAnimation = undefined;
+        this.buttons = [];
+        this.columns = [];
+        this.cssClass = undefined;
+        this.duration = 0;
+        this.showBackdrop = true;
+        this.backdropDismiss = true;
+        this.animated = true;
+        this.htmlAttributes = undefined;
+        this.isOpen = false;
+        this.trigger = undefined;
+    }
+    onIsOpenChange(newValue, oldValue) {
+        if (newValue === true && oldValue === false) {
+            this.present();
+        }
+        else if (newValue === false && oldValue === true) {
+            this.dismiss();
+        }
+    }
+    triggerChanged() {
+        const { trigger, el, triggerController } = this;
+        if (trigger) {
+            triggerController.addClickListener(el, trigger);
+        }
+    }
+    connectedCallback() {
+        prepareOverlay(this.el);
+        this.triggerChanged();
+    }
+    disconnectedCallback() {
+        this.triggerController.removeClickListener();
+    }
+    componentWillLoad() {
+        setOverlayId(this.el);
+    }
+    componentDidLoad() {
         /**
-         * Searches the value of the active column
-         * to determine which value users are trying
-         * to select
+         * If picker was rendered with isOpen="true"
+         * then we should open picker immediately.
          */
-        this.onInputChange = () => {
-            const { useInputMode, inputEl, inputModeColumn } = this;
-            if (!useInputMode || !inputEl) {
-                return;
-            }
-            if (inputModeColumn) {
-                this.selectSingleColumn();
-            }
-            else {
-                this.selectMultiColumn();
-            }
-        };
+        if (this.isOpen === true) {
+            raf(() => this.present());
+        }
         /**
-         * Emit ionInputModeChange. Picker columns
-         * listen for this event to determine whether
-         * or not their column is "active" for text input.
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
          */
-        this.emitInputModeChange = () => {
-            const { useInputMode, inputModeColumn } = this;
-            this.ionInputModeChange.emit({
-                useInputMode,
-                inputModeColumn,
-            });
-        };
+        this.triggerChanged();
     }
     /**
-     * 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.
+     * Present the picker overlay after it has been created.
      */
-    preventTouchStartPropagation(ev) {
-        ev.stopPropagation();
+    async present() {
+        const unlock = await this.lockController.lock();
+        await this.delegateController.attachViewToDom();
+        await present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
+        if (this.duration > 0) {
+            this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
+        }
+        unlock();
     }
-    componentWillLoad() {
-        getElementRoot(this.el).addEventListener('focusin', this.onFocusIn);
-        getElementRoot(this.el).addEventListener('focusout', this.onFocusOut);
+    /**
+     * Dismiss the picker overlay after it has been presented.
+     *
+     * @param data Any data to emit in the dismiss events.
+     * @param role The role of the element that is dismissing the picker.
+     * This can be useful in a button handler for determining which button was
+     * clicked to dismiss the picker.
+     * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+     *
+     * This is a no-op if the overlay has not been presented yet. If you want
+     * to remove an overlay from the DOM that was never presented, use the
+     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+     */
+    async dismiss(data, role) {
+        const unlock = await this.lockController.lock();
+        if (this.durationTimeout) {
+            clearTimeout(this.durationTimeout);
+        }
+        const dismissed = await dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
+        if (dismissed) {
+            this.delegateController.removeViewFromDom();
+        }
+        unlock();
+        return dismissed;
     }
     /**
-     * @internal
-     * Exits text entry mode for the picker
-     * This method blurs the hidden input
-     * and cause the keyboard to dismiss.
+     * Returns a promise that resolves when the picker did dismiss.
      */
-    async exitInputMode() {
-        const { inputEl, useInputMode } = this;
-        if (!useInputMode || !inputEl) {
-            return;
+    onDidDismiss() {
+        return eventMethod(this.el, 'ionPickerDidDismiss');
+    }
+    /**
+     * Returns a promise that resolves when the picker will dismiss.
+     */
+    onWillDismiss() {
+        return eventMethod(this.el, 'ionPickerWillDismiss');
+    }
+    /**
+     * Get the column that matches the specified name.
+     *
+     * @param name The name of the column.
+     */
+    getColumn(name) {
+        return Promise.resolve(this.columns.find((column) => column.name === name));
+    }
+    async buttonClick(button) {
+        const role = button.role;
+        if (isCancel(role)) {
+            return this.dismiss(undefined, role);
         }
-        this.useInputMode = false;
-        this.inputModeColumn = undefined;
-        inputEl.blur();
-        inputEl.value = '';
-        if (this.destroyKeypressListener) {
-            this.destroyKeypressListener();
-            this.destroyKeypressListener = undefined;
+        const shouldDismiss = await this.callButtonHandler(button);
+        if (shouldDismiss) {
+            return this.dismiss(this.getSelected(), button.role);
+        }
+        return Promise.resolve();
+    }
+    async callButtonHandler(button) {
+        if (button) {
+            // a handler has been provided, execute it
+            // pass the handler the values from the inputs
+            const rtn = await safeCall(button.handler, this.getSelected());
+            if (rtn === false) {
+                // if the return value of the handler is false then do not dismiss
+                return false;
+            }
         }
-        this.emitInputModeChange();
+        return true;
+    }
+    getSelected() {
+        const selected = {};
+        this.columns.forEach((col, index) => {
+            const selectedColumn = col.selectedIndex !== undefined ? col.options[col.selectedIndex] : undefined;
+            selected[col.name] = {
+                text: selectedColumn ? selectedColumn.text : undefined,
+                value: selectedColumn ? selectedColumn.value : undefined,
+                columnIndex: index,
+            };
+        });
+        return selected;
     }
     render() {
-        return (h(Host, { key: '69a87b004f01d3c85818c24550d71ab8b1217574', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: '42f208ad6693b223150d175855a4e3a940fcbf8a', "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() }), h("div", { key: 'c3a20925dae51059cdbce7c3aa78789591de36e9', class: "picker-before" }), h("div", { key: '0a949c776a3c5d83feb7eca32ec85f6e26aab1b8', class: "picker-after" }), h("div", { key: '80e96a86a89bc223faf65badf66a56c971c846aa', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: '5110775b45ddf3ad8cce397b910063fdea173409' })));
+        const { htmlAttributes } = this;
+        const mode = getIonMode(this);
+        return (h(Host, Object.assign({ key: 'c266cc072afaba2da22f70d8b62dc4bc6756d188', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+                zIndex: `${20000 + this.overlayIndex}`,
+            }, class: Object.assign({ [mode]: true,
+                // Used internally for styling
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '35ee3e5028028835580e28ac2c8db65a924d5d6a', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '8b454e6edbcfc45c57d3d8baf7c14b7905921a6e', tabindex: "0" }), h("div", { key: 'e0fee78ec6d097bf0963190f748e5daad602e0f7', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'ce66bca18fc3e982ad7d6660f27cb1a03fb8247b', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: 'a58b9523fe16f109dd6de0610717c5077fed964b', class: "picker-columns" }, h("div", { key: 'acd54c0314cff51e8513a08dd9755c4b847c0617', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-column", { col: c })), h("div", { key: '604730bd87582d048d850c6e0a0f29ba33258918', class: "picker-below-highlight" }))), h("div", { key: '93baf5e6e57aec5f084d7d5b24af14e7d8126b5a', tabindex: "0" })));
     }
     static get is() { return "ion-picker"; }
-    static get encapsulation() { return "shadow"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["picker.ios.scss"],
@@ -505,13 +204,62 @@ export class Picker {
             "md": ["picker.md.css"]
         };
     }
-    static get events() {
-        return [{
-                "method": "ionInputModeChange",
-                "name": "ionInputModeChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
+    static get properties() {
+        return {
+            "overlayIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "attribute": "overlay-index",
+                "reflect": false
+            },
+            "delegate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "FrameworkDelegate",
+                    "resolved": "FrameworkDelegate | undefined",
+                    "references": {
+                        "FrameworkDelegate": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.d.ts::FrameworkDelegate"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                }
+            },
+            "hasController": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
                 "docs": {
                     "tags": [{
                             "name": "internal",
@@ -519,14 +267,402 @@ export class Picker {
                         }],
                     "text": ""
                 },
+                "attribute": "has-controller",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "keyboardClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
+                },
+                "attribute": "keyboard-close",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "enterAnimation": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AnimationBuilder",
+                    "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+                    "references": {
+                        "AnimationBuilder": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.d.ts::AnimationBuilder"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation to use when the picker is presented."
+                }
+            },
+            "leaveAnimation": {
+                "type": "unknown",
+                "mutable": false,
                 "complexType": {
-                    "original": "PickerChangeEventDetail",
-                    "resolved": "PickerChangeEventDetail",
+                    "original": "AnimationBuilder",
+                    "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
                     "references": {
-                        "PickerChangeEventDetail": {
+                        "AnimationBuilder": {
                             "location": "import",
-                            "path": "./picker-interfaces",
-                            "id": "src/components/picker/picker-interfaces.ts::PickerChangeEventDetail"
+                            "path": "../../interface",
+                            "id": "src/interface.d.ts::AnimationBuilder"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation to use when the picker is dismissed."
+                }
+            },
+            "buttons": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PickerButton[]",
+                    "resolved": "PickerButton[]",
+                    "references": {
+                        "PickerButton": {
+                            "location": "import",
+                            "path": "./picker-interface",
+                            "id": "src/components/picker/picker-interface.ts::PickerButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of buttons to be displayed at the top of the picker."
+                },
+                "defaultValue": "[]"
+            },
+            "columns": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PickerColumn[]",
+                    "resolved": "PickerColumn[]",
+                    "references": {
+                        "PickerColumn": {
+                            "location": "import",
+                            "path": "./picker-interface",
+                            "id": "src/components/picker/picker-interface.ts::PickerColumn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of columns to be displayed in the picker."
+                },
+                "defaultValue": "[]"
+            },
+            "cssClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
+                },
+                "attribute": "css-class",
+                "reflect": false
+            },
+            "duration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of milliseconds to wait before dismissing the picker."
+                },
+                "attribute": "duration",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "showBackdrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, a backdrop will be displayed behind the picker."
+                },
+                "attribute": "show-backdrop",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "backdropDismiss": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the picker will be dismissed when the backdrop is clicked."
+                },
+                "attribute": "backdrop-dismiss",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the picker will animate."
+                },
+                "attribute": "animated",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "htmlAttributes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: any }",
+                    "resolved": "undefined | { [key: string]: any; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Additional attributes to pass to the picker."
+                }
+            },
+            "isOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the picker will open. If `false`, the picker will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the pickerController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe picker dismisses. You will need to do that in your code."
+                },
+                "attribute": "is-open",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An ID corresponding to the trigger element that\ncauses the picker to open when clicked."
+                },
+                "attribute": "trigger",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "presented": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "didPresent",
+                "name": "ionPickerDidPresent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after the picker has presented."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "willPresent",
+                "name": "ionPickerWillPresent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted before the picker has presented."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "willDismiss",
+                "name": "ionPickerWillDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted before the picker has dismissed."
+                },
+                "complexType": {
+                    "original": "OverlayEventDetail",
+                    "resolved": "OverlayEventDetail<any>",
+                    "references": {
+                        "OverlayEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/overlays-interface",
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "didDismiss",
+                "name": "ionPickerDidDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after the picker has dismissed."
+                },
+                "complexType": {
+                    "original": "OverlayEventDetail",
+                    "resolved": "OverlayEventDetail<any>",
+                    "references": {
+                        "OverlayEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/overlays-interface",
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "didPresentShorthand",
+                "name": "didPresent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after the picker has presented.\nShorthand for ionPickerWillDismiss."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "willPresentShorthand",
+                "name": "willPresent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted before the picker has presented.\nShorthand for ionPickerWillPresent."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "willDismissShorthand",
+                "name": "willDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted before the picker has dismissed.\nShorthand for ionPickerWillDismiss."
+                },
+                "complexType": {
+                    "original": "OverlayEventDetail",
+                    "resolved": "OverlayEventDetail<any>",
+                    "references": {
+                        "OverlayEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/overlays-interface",
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "didDismissShorthand",
+                "name": "didDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after the picker has dismissed.\nShorthand for ionPickerDidDismiss."
+                },
+                "complexType": {
+                    "original": "OverlayEventDetail",
+                    "resolved": "OverlayEventDetail<any>",
+                    "references": {
+                        "OverlayEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/overlays-interface",
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
                         }
                     }
                 }
@@ -534,7 +670,7 @@ export class Picker {
     }
     static get methods() {
         return {
-            "exitInputMode": {
+            "present": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -547,23 +683,141 @@ export class Picker {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Present the picker overlay after it has been created.",
+                    "tags": []
+                }
+            },
+            "dismiss": {
+                "complexType": {
+                    "signature": "(data?: any, role?: string) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "data",
+                            "type": "any",
+                            "docs": "Any data to emit in the dismiss events."
+                        }, {
+                            "name": "role",
+                            "type": "string | undefined",
+                            "docs": "The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Dismiss the picker overlay after it has been presented.",
                     "tags": [{
-                            "name": "internal",
-                            "text": "Exits text entry mode for the picker\nThis method blurs the hidden input\nand cause the keyboard to dismiss."
+                            "name": "param",
+                            "text": "data Any data to emit in the dismiss events."
+                        }, {
+                            "name": "param",
+                            "text": "role The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
+                        }]
+                }
+            },
+            "onDidDismiss": {
+                "complexType": {
+                    "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "OverlayEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/overlays-interface",
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                        },
+                        "T": {
+                            "location": "global",
+                            "id": "global::T"
+                        }
+                    },
+                    "return": "Promise<OverlayEventDetail<T>>"
+                },
+                "docs": {
+                    "text": "Returns a promise that resolves when the picker did dismiss.",
+                    "tags": []
+                }
+            },
+            "onWillDismiss": {
+                "complexType": {
+                    "signature": "<T = any>() => Promise<OverlayEventDetail<T>>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "OverlayEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/overlays-interface",
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                        },
+                        "T": {
+                            "location": "global",
+                            "id": "global::T"
+                        }
+                    },
+                    "return": "Promise<OverlayEventDetail<T>>"
+                },
+                "docs": {
+                    "text": "Returns a promise that resolves when the picker will dismiss.",
+                    "tags": []
+                }
+            },
+            "getColumn": {
+                "complexType": {
+                    "signature": "(name: string) => Promise<PickerColumn | undefined>",
+                    "parameters": [{
+                            "name": "name",
+                            "type": "string",
+                            "docs": "The name of the column."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "PickerColumn": {
+                            "location": "import",
+                            "path": "./picker-interface",
+                            "id": "src/components/picker/picker-interface.ts::PickerColumn"
+                        }
+                    },
+                    "return": "Promise<PickerColumn | undefined>"
+                },
+                "docs": {
+                    "text": "Get the column that matches the specified name.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "name The name of the column."
                         }]
                 }
             }
         };
     }
     static get elementRef() { return "el"; }
-    static get listeners() {
+    static get watchers() {
         return [{
-                "name": "touchstart",
-                "method": "preventTouchStartPropagation",
-                "target": undefined,
-                "capture": false,
-                "passive": true
+                "propName": "isOpen",
+                "methodName": "onIsOpenChange"
+            }, {
+                "propName": "trigger",
+                "methodName": "triggerChanged"
             }];
     }
 }
+const buttonWrapperClass = (button) => {
+    return {
+        [`picker-toolbar-${button.role}`]: button.role !== undefined,
+        'picker-toolbar-button': true,
+    };
+};
+const buttonClass = (button) => {
+    return Object.assign({ 'picker-button': true, 'ion-activatable': true }, getClassMap(button.cssClass));
+};