@ionic/core 7.5.7-dev.11701270755.14f050ad → 7.5.7-dev.11701273756.1eb73d4c

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

@@ -2,474 +2,182 @@
  * (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;
+    this.delegateController = createDelegateController(this);
+    this.lockController = createLockController();
+    this.triggerController = createTriggerController();
+    this.onBackdropTap = () => {
+      this.dismiss(undefined, BACKDROP);
     };
-    /**
-     * 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 {
-        el.addEventListener('keypress', this.onKeyPress);
-        this.destroyKeypressListener = () => {
-          el.removeEventListener('keypress', this.onKeyPress);
-        };
-      }
-      this.emitInputModeChange();
-    };
-    this.onKeyPress = (ev) => {
-      const { inputEl } = this;
-      if (!inputEl) {
-        return;
-      }
-      const parsedValue = parseInt(ev.key, 10);
-      /**
-       * Only numbers should be allowed
-       */
-      if (!Number.isNaN(parsedValue)) {
-        inputEl.value += ev.key;
-        this.onInputChange();
-      }
-    };
-    this.selectSingleColumn = () => {
-      const { inputEl, inputModeColumn, singleColumnSearchTimeout } = this;
-      if (!inputEl || !inputModeColumn) {
-        return;
-      }
-      const values = inputModeColumn.items.filter((item) => item.disabled !== true);
-      /**
-       * If users pause for a bit, the search
-       * value should be reset similar to how a
-       * <select> behaves. So typing "34", waiting,
-       * then typing "5" should select "05".
-       */
-      if (singleColumnSearchTimeout) {
-        clearTimeout(singleColumnSearchTimeout);
-      }
-      this.singleColumnSearchTimeout = setTimeout(() => {
-        inputEl.value = '';
-        this.singleColumnSearchTimeout = undefined;
-      }, 1000);
-      /**
-       * For values that are longer than 2 digits long
-       * we should shift the value over 1 character
-       * to the left. So typing "456" would result in "56".
-       * TODO: If we want to support more than just
-       * time entry, we should update this value to be
-       * the max length of all of the picker items.
-       */
-      if (inputEl.value.length >= 3) {
-        const startIndex = inputEl.value.length - 2;
-        const newString = inputEl.value.substring(startIndex);
-        inputEl.value = newString;
-        this.selectSingleColumn();
-        return;
-      }
-      /**
-       * Checking the value of the input gets priority
-       * first. For example, if the value of the input
-       * is "1" and we entered "2", then the complete value
-       * is "12" and we should select hour 12.
-       *
-       * Regex removes any leading zeros from values like "02",
-       * but it keeps a single zero if there are only zeros in the string.
-       * 0+(?=[1-9]) --> Match 1 or more zeros that are followed by 1-9
-       * 0+(?=0$) --> Match 1 or more zeros that must be followed by one 0 and end.
-       */
-      const findItemFromCompleteValue = values.find(({ text }) => {
-        const parsedText = text.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
-        return parsedText === inputEl.value;
-      });
-      if (findItemFromCompleteValue) {
-        inputModeColumn.setValue(findItemFromCompleteValue.value);
-        return;
-      }
-      /**
-       * If we typed "56" to get minute 56, then typed "7",
-       * we should select "07" as "567" is not a valid minute.
-       */
-      if (inputEl.value.length === 2) {
-        const changedCharacter = inputEl.value.substring(inputEl.value.length - 1);
-        inputEl.value = changedCharacter;
-        this.selectSingleColumn();
-      }
-    };
-    /**
-     * Searches a list of column items for a particular
-     * value. This is currently used for numeric values.
-     * The zeroBehavior can be set to account for leading
-     * or trailing zeros when looking at the item text.
-     */
-    this.searchColumn = (colEl, value, zeroBehavior = 'start') => {
-      const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
-      const item = colEl.items.find(({ text, disabled }) => disabled !== true && text.replace(behavior, '') === value);
-      if (item) {
-        colEl.setValue(item.value);
-      }
-    };
-    this.selectMultiColumn = () => {
-      const { inputEl, el } = this;
-      if (!inputEl) {
-        return;
-      }
-      const numericPickers = Array.from(el.querySelectorAll('ion-picker-column')).filter((col) => col.numericInput);
-      const firstColumn = numericPickers[0];
-      const lastColumn = numericPickers[1];
-      let value = inputEl.value;
-      let minuteValue;
-      switch (value.length) {
-        case 1:
-          this.searchColumn(firstColumn, value);
-          break;
-        case 2:
-          /**
-           * If the first character is `0` or `1` it is
-           * possible that users are trying to type `09`
-           * or `11` into the hour field, so we should look
-           * at that first.
-           */
-          const firstCharacter = inputEl.value.substring(0, 1);
-          value = firstCharacter === '0' || firstCharacter === '1' ? inputEl.value : firstCharacter;
-          this.searchColumn(firstColumn, value);
-          /**
-           * If only checked the first value,
-           * we can check the second value
-           * for a match in the minutes column
-           */
-          if (value.length === 1) {
-            minuteValue = inputEl.value.substring(inputEl.value.length - 1);
-            this.searchColumn(lastColumn, minuteValue, 'end');
-          }
-          break;
-        case 3:
-          /**
-           * If the first character is `0` or `1` it is
-           * possible that users are trying to type `09`
-           * or `11` into the hour field, so we should look
-           * at that first.
-           */
-          const firstCharacterAgain = inputEl.value.substring(0, 1);
-          value =
-            firstCharacterAgain === '0' || firstCharacterAgain === '1'
-              ? inputEl.value.substring(0, 2)
-              : firstCharacterAgain;
-          this.searchColumn(firstColumn, value);
-          /**
-           * If only checked the first value,
-           * we can check the second value
-           * for a match in the minutes column
-           */
-          minuteValue = value.length === 1 ? inputEl.value.substring(1) : inputEl.value.substring(2);
-          this.searchColumn(lastColumn, minuteValue, 'end');
-          break;
-        case 4:
-          /**
-           * If the first character is `0` or `1` it is
-           * possible that users are trying to type `09`
-           * or `11` into the hour field, so we should look
-           * at that first.
-           */
-          const firstCharacterAgainAgain = inputEl.value.substring(0, 1);
-          value =
-            firstCharacterAgainAgain === '0' || firstCharacterAgainAgain === '1'
-              ? inputEl.value.substring(0, 2)
-              : firstCharacterAgainAgain;
-          this.searchColumn(firstColumn, value);
-          /**
-           * If only checked the first value,
-           * we can check the second value
-           * for a match in the minutes column
-           */
-          const minuteValueAgain = value.length === 1
-            ? inputEl.value.substring(1, inputEl.value.length)
-            : inputEl.value.substring(2, inputEl.value.length);
-          this.searchColumn(lastColumn, minuteValueAgain, 'end');
-          break;
-        default:
-          const startIndex = inputEl.value.length - 4;
-          const newString = inputEl.value.substring(startIndex);
-          inputEl.value = newString;
-          this.selectMultiColumn();
-          break;
-      }
-    };
-    /**
-     * Searches the value of the active column
-     * to determine which value users are trying
-     * to select
-     */
-    this.onInputChange = () => {
-      const { useInputMode, inputEl, inputModeColumn } = this;
-      if (!useInputMode || !inputEl) {
-        return;
-      }
-      if (inputModeColumn) {
-        this.selectSingleColumn();
-      }
-      else {
-        this.selectMultiColumn();
+    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() {
     /**
-     * Emit ionInputModeChange. Picker columns
-     * listen for this event to determine whether
-     * or not their column is "active" for text input.
+     * If picker was rendered with isOpen="true"
+     * then we should open picker immediately.
      */
-    this.emitInputModeChange = () => {
-      const { useInputMode, inputModeColumn } = this;
-      this.ionInputModeChange.emit({
-        useInputMode,
-        inputModeColumn,
-      });
-    };
+    if (this.isOpen === true) {
+      raf(() => this.present());
+    }
   }
   /**
-   * 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"`.
+   */
+  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, { onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { class: "picker-before" }), h("div", { class: "picker-after" }), h("div", { class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", null)));
+    const { htmlAttributes } = this;
+    const mode = getIonMode(this);
+    return (h(Host, Object.assign({ "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", { visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { tabindex: "0" }), h("div", { class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { 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", { class: "picker-columns" }, h("div", { class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-column", { col: c })), h("div", { class: "picker-below-highlight" }))), h("div", { 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"],
@@ -482,25 +190,465 @@ export class Picker {
       "md": ["picker.md.css"]
     };
   }
+  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",
+              "text": undefined
+            }],
+          "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": "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 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": "ionInputModeChange",
-        "name": "ionInputModeChange",
+        "method": "didPresent",
+        "name": "ionPickerDidPresent",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "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": "PickerChangeEventDetail",
-          "resolved": "PickerChangeEventDetail",
+          "original": "OverlayEventDetail",
+          "resolved": "OverlayEventDetail<any>",
           "references": {
-            "PickerChangeEventDetail": {
+            "OverlayEventDetail": {
               "location": "import",
-              "path": "./picker-interfaces",
-              "id": "src/components/picker/picker-interfaces.ts::PickerChangeEventDetail"
+              "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"
             }
           }
         }
@@ -508,7 +656,7 @@ export class Picker {
   }
   static get methods() {
     return {
-      "exitInputMode": {
+      "present": {
         "complexType": {
           "signature": "() => Promise<void>",
           "parameters": [],
@@ -521,23 +669,147 @@ 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": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "data Any data to emit in the dismiss events."
+                }],
+              "text": "Any data to emit in the dismiss events."
+            }, {
+              "tags": [{
+                  "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\"`."
+                }],
+              "text": "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\"`."
+            }],
+          "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\"`."
+            }]
+        }
+      },
+      "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": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "name The name of the column."
+                }],
+              "text": "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));
+};