@ionic/core 7.5.7-dev.11701201960.104b3a1f → 7.5.7-dev.11701203423.1b6a8829

package/components/picker-column.js

@@ -2,377 +2,366 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { r as raf, g as getElementRoot } from './helpers.js';
-import { a as hapticSelectionStart, b as hapticSelectionChanged, h as hapticSelectionEnd } from './haptic.js';
-import { a as isPlatform, b as getIonMode } from './ionic-global.js';
-import { c as createColorClasses } from './theme.js';
+import { m as clamp } from './helpers.js';
+import { b as hapticSelectionChanged, h as hapticSelectionEnd, a as hapticSelectionStart } from './haptic.js';
+import { g as getClassMap } from './theme.js';
+import { b as getIonMode } from './ionic-global.js';
 
-const pickerColumnIosCss = ":host{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}:host::-webkit-scrollbar{display:none}:host .picker-item{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden;scroll-snap-align:center}:host .picker-item-empty,:host .picker-item[disabled]{cursor:default}:host .picker-item-empty,:host(:not([disabled])) .picker-item[disabled]{scroll-snap-align:none}:host([disabled]){overflow-y:hidden}:host .picker-item[disabled]{opacity:0.4}:host(.picker-column-active) .picker-item.picker-item-active{color:var(--ion-color-base)}@media (any-hover: hover){:host(:focus){outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}";
+const pickerColumnIosCss = ".picker-col{display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content}.picker-opts{position:relative;-ms-flex:1;flex:1;max-width:100%}.picker-opt{top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}@supports (inset-inline-start: 0){.picker-opt{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-opt{left:0}:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}[dir=rtl] .picker-opt{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){left:unset;right:unset;right:0}}}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{-ms-flex-pack:start;justify-content:flex-start}.picker-opts-right{-ms-flex-pack:end;justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;-ms-flex:1;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;-ms-flex:1;flex:1;text-align:start;white-space:nowrap}.picker-col{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:0;padding-bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.picker-prefix,.picker-suffix,.picker-opts{top:77px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:inherit;font-size:20px;line-height:42px;pointer-events:none}.picker-opt{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-transform-origin:center center;transform-origin:center center;height:46px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:20px;line-height:42px;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}:host-context([dir=rtl]) .picker-opt{-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}[dir=rtl] .picker-opt{-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}}";
 
-const pickerColumnMdCss = ":host{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}:host::-webkit-scrollbar{display:none}:host .picker-item{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden;scroll-snap-align:center}:host .picker-item-empty,:host .picker-item[disabled]{cursor:default}:host .picker-item-empty,:host(:not([disabled])) .picker-item[disabled]{scroll-snap-align:none}:host([disabled]){overflow-y:hidden}:host .picker-item[disabled]{opacity:0.4}:host(.picker-column-active) .picker-item.picker-item-active{color:var(--ion-color-base)}@media (any-hover: hover){:host(:focus){outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}:host .picker-item-active{color:var(--ion-color-base)}";
+const pickerColumnMdCss = ".picker-col{display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content}.picker-opts{position:relative;-ms-flex:1;flex:1;max-width:100%}.picker-opt{top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}@supports (inset-inline-start: 0){.picker-opt{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-opt{left:0}:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}[dir=rtl] .picker-opt{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){left:unset;right:unset;right:0}}}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{-ms-flex-pack:start;justify-content:flex-start}.picker-opts-right{-ms-flex-pack:end;justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;-ms-flex:1;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;-ms-flex:1;flex:1;text-align:start;white-space:nowrap}.picker-col{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.picker-prefix,.picker-suffix,.picker-opts{top:77px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:inherit;font-size:22px;line-height:42px;pointer-events:none}.picker-opt{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;height:43px;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:22px;line-height:42px;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}.picker-prefix,.picker-suffix,.picker-opt.picker-opt-selected{color:var(--ion-color-primary, #3880ff)}";
 
-const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends HTMLElement {
+const PickerColumnCmp = /*@__PURE__*/ proxyCustomElement(class PickerColumnCmp extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.__attachShadow();
-    this.ionChange = createEvent(this, "ionChange", 7);
-    this.isScrolling = false;
-    this.isColumnVisible = false;
-    this.canExitInputMode = true;
-    this.centerPickerItemInView = (target, smooth = true, canExitInputMode = true) => {
-      const { el, isColumnVisible } = this;
-      if (isColumnVisible) {
-        // (Vertical offset from parent) - (three empty picker rows) + (half the height of the target to ensure the scroll triggers)
-        const top = target.offsetTop - 3 * target.clientHeight + target.clientHeight / 2;
-        if (el.scrollTop !== top) {
-          /**
-           * Setting this flag prevents input
-           * mode from exiting in the picker column's
-           * scroll callback. This is useful when the user manually
-           * taps an item or types on the keyboard as both
-           * of these can cause a scroll to occur.
-           */
-          this.canExitInputMode = canExitInputMode;
-          el.scroll({
-            top,
-            left: 0,
-            behavior: smooth ? 'smooth' : undefined,
-          });
+    this.ionPickerColChange = createEvent(this, "ionPickerColChange", 7);
+    this.optHeight = 0;
+    this.rotateFactor = 0;
+    this.scaleFactor = 1;
+    this.velocity = 0;
+    this.y = 0;
+    this.noAnimate = true;
+    // `colDidChange` is a flag that gets set when the column is changed
+    // dynamically. When this flag is set, the column will refresh
+    // after the component re-renders to incorporate the new column data.
+    // This is necessary because `this.refresh` queries for the option elements,
+    // so it needs to wait for the latest elements to be available in the DOM.
+    // Ex: column is created with 3 options. User updates the column data
+    // to have 5 options. The column will still think it only has 3 options.
+    this.colDidChange = false;
+    this.col = undefined;
+  }
+  colChanged() {
+    this.colDidChange = true;
+  }
+  async connectedCallback() {
+    let pickerRotateFactor = 0;
+    let pickerScaleFactor = 0.81;
+    const mode = getIonMode(this);
+    if (mode === 'ios') {
+      pickerRotateFactor = -0.46;
+      pickerScaleFactor = 1;
+    }
+    this.rotateFactor = pickerRotateFactor;
+    this.scaleFactor = pickerScaleFactor;
+    this.gesture = (await import('./index3.js')).createGesture({
+      el: this.el,
+      gestureName: 'picker-swipe',
+      gesturePriority: 100,
+      threshold: 0,
+      passive: false,
+      onStart: (ev) => this.onStart(ev),
+      onMove: (ev) => this.onMove(ev),
+      onEnd: (ev) => this.onEnd(ev),
+    });
+    this.gesture.enable();
+    // Options have not been initialized yet
+    // Animation must be disabled through the `noAnimate` flag
+    // Otherwise, the options will render
+    // at the top of the column and transition down
+    this.tmrId = setTimeout(() => {
+      this.noAnimate = false;
+      // After initialization, `refresh()` will be called
+      // At this point, animation will be enabled. The options will
+      // animate as they are being selected.
+      this.refresh(true);
+    }, 250);
+  }
+  componentDidLoad() {
+    this.onDomChange();
+  }
+  componentDidUpdate() {
+    // Options may have changed since last update.
+    if (this.colDidChange) {
+      // Animation must be disabled through the `onDomChange` parameter.
+      // Otherwise, the recently added options will render
+      // at the top of the column and transition down
+      this.onDomChange(true, false);
+      this.colDidChange = false;
+    }
+  }
+  disconnectedCallback() {
+    if (this.rafId !== undefined)
+      cancelAnimationFrame(this.rafId);
+    if (this.tmrId)
+      clearTimeout(this.tmrId);
+    if (this.gesture) {
+      this.gesture.destroy();
+      this.gesture = undefined;
+    }
+  }
+  emitColChange() {
+    this.ionPickerColChange.emit(this.col);
+  }
+  setSelected(selectedIndex, duration) {
+    // if there is a selected index, then figure out it's y position
+    // if there isn't a selected index, then just use the top y position
+    const y = selectedIndex > -1 ? -(selectedIndex * this.optHeight) : 0;
+    this.velocity = 0;
+    // set what y position we're at
+    if (this.rafId !== undefined)
+      cancelAnimationFrame(this.rafId);
+    this.update(y, duration, true);
+    this.emitColChange();
+  }
+  update(y, duration, saveY) {
+    if (!this.optsEl) {
+      return;
+    }
+    // ensure we've got a good round number :)
+    let translateY = 0;
+    let translateZ = 0;
+    const { col, rotateFactor } = this;
+    const prevSelected = col.selectedIndex;
+    const selectedIndex = (col.selectedIndex = this.indexForY(-y));
+    const durationStr = duration === 0 ? '' : duration + 'ms';
+    const scaleStr = `scale(${this.scaleFactor})`;
+    const children = this.optsEl.children;
+    for (let i = 0; i < children.length; i++) {
+      const button = children[i];
+      const opt = col.options[i];
+      const optOffset = i * this.optHeight + y;
+      let transform = '';
+      if (rotateFactor !== 0) {
+        const rotateX = optOffset * rotateFactor;
+        if (Math.abs(rotateX) <= 90) {
+          translateY = 0;
+          translateZ = 90;
+          transform = `rotateX(${rotateX}deg) `;
+        }
+        else {
+          translateY = -9999;
         }
-      }
-    };
-    this.setPickerItemActiveState = (item, isActive) => {
-      if (isActive) {
-        item.classList.add(PICKER_ITEM_ACTIVE_CLASS);
-        item.part.add(PICKER_ITEM_ACTIVE_PART);
       }
       else {
-        item.classList.remove(PICKER_ITEM_ACTIVE_CLASS);
-        item.part.remove(PICKER_ITEM_ACTIVE_PART);
+        translateZ = 0;
+        translateY = optOffset;
       }
-    };
-    /**
-     * When ionInputModeChange is emitted, each column
-     * needs to check if it is the one being made available
-     * for text entry.
-     */
-    this.inputModeChange = (ev) => {
-      if (!this.numericInput) {
-        return;
+      const selected = selectedIndex === i;
+      transform += `translate3d(0px,${translateY}px,${translateZ}px) `;
+      if (this.scaleFactor !== 1 && !selected) {
+        transform += scaleStr;
       }
-      const { useInputMode, inputModeColumn } = ev.detail;
-      /**
-       * If inputModeColumn is undefined then this means
-       * all numericInput columns are being selected.
-       */
-      const isColumnActive = inputModeColumn === undefined || inputModeColumn === this.el;
-      if (!useInputMode || !isColumnActive) {
-        this.setInputModeActive(false);
-        return;
+      // Update transition duration
+      if (this.noAnimate) {
+        opt.duration = 0;
+        button.style.transitionDuration = '';
       }
-      this.setInputModeActive(true);
-    };
-    /**
-     * Setting isActive will cause a re-render.
-     * As a result, we do not want to cause the
-     * re-render mid scroll as this will cause
-     * the picker column to jump back to
-     * whatever value was selected at the
-     * start of the scroll interaction.
-     */
-    this.setInputModeActive = (state) => {
-      if (this.isScrolling) {
-        this.scrollEndCallback = () => {
-          this.isActive = state;
-        };
-        return;
+      else if (duration !== opt.duration) {
+        opt.duration = duration;
+        button.style.transitionDuration = durationStr;
       }
-      this.isActive = state;
-    };
-    /**
-     * When the column scrolls, the component
-     * needs to determine which item is centered
-     * in the view and will emit an ionChange with
-     * the item object.
-     */
-    this.initializeScrollListener = () => {
-      /**
-       * The haptics for the wheel picker are
-       * an iOS-only feature. As a result, they should
-       * be disabled on Android.
-       */
-      const enableHaptics = isPlatform('ios');
-      const { el } = this;
-      let timeout;
-      let activeEl = this.activeItem;
-      const scrollCallback = () => {
-        raf(() => {
-          if (timeout) {
-            clearTimeout(timeout);
-            timeout = undefined;
-          }
-          if (!this.isScrolling) {
-            enableHaptics && hapticSelectionStart();
-            this.isScrolling = true;
-          }
-          /**
-           * Select item in the center of the column
-           * which is the month/year that we want to select
-           */
-          const bbox = el.getBoundingClientRect();
-          const centerX = bbox.x + bbox.width / 2;
-          const centerY = bbox.y + bbox.height / 2;
-          const activeElement = el.shadowRoot.elementFromPoint(centerX, centerY);
-          if (activeEl !== null) {
-            this.setPickerItemActiveState(activeEl, false);
-          }
-          if (activeElement === null || activeElement.disabled) {
-            return;
-          }
-          /**
-           * If we are selecting a new value,
-           * we need to run haptics again.
-           */
-          if (activeElement !== activeEl) {
-            enableHaptics && hapticSelectionChanged();
-            if (this.canExitInputMode) {
-              /**
-               * The native iOS wheel picker
-               * only dismisses the keyboard
-               * once the selected item has changed
-               * as a result of a swipe
-               * from the user. If `canExitInputMode` is
-               * `false` then this means that the
-               * scroll is happening as a result of
-               * the `value` property programmatically changing
-               * either by an application or by the user via the keyboard.
-               */
-              this.exitInputMode();
-            }
-          }
-          activeEl = activeElement;
-          this.setPickerItemActiveState(activeElement, true);
-          timeout = setTimeout(() => {
-            this.isScrolling = false;
-            enableHaptics && hapticSelectionEnd();
-            /**
-             * Certain tasks (such as those that
-             * cause re-renders) should only be done
-             * once scrolling has finished, otherwise
-             * flickering may occur.
-             */
-            const { scrollEndCallback } = this;
-            if (scrollEndCallback) {
-              scrollEndCallback();
-              this.scrollEndCallback = undefined;
-            }
-            /**
-             * Reset this flag as the
-             * next scroll interaction could
-             * be a scroll from the user. In this
-             * case, we should exit input mode.
-             */
-            this.canExitInputMode = true;
-            const dataIndex = activeElement.getAttribute('data-index');
-            /**
-             * If no value it is
-             * possible we hit one of the
-             * empty padding columns.
-             */
-            if (dataIndex === null) {
-              return;
-            }
-            const index = parseInt(dataIndex, 10);
-            const selectedItem = this.items[index];
-            if (selectedItem.value !== this.value) {
-              this.setValue(selectedItem.value);
-            }
-          }, 250);
-        });
-      };
-      /**
-       * Wrap this in an raf so that the scroll callback
-       * does not fire when component is initially shown.
-       */
-      raf(() => {
-        el.addEventListener('scroll', scrollCallback);
-        this.destroyScrollListener = () => {
-          el.removeEventListener('scroll', scrollCallback);
-        };
-      });
-    };
-    /**
-     * Tells the parent picker to
-     * exit text entry mode. This is only called
-     * when the selected item changes during scroll, so
-     * we know that the user likely wants to scroll
-     * instead of type.
-     */
-    this.exitInputMode = () => {
-      const { parentEl } = this;
-      if (parentEl == null)
-        return;
-      parentEl.exitInputMode();
-      /**
-       * setInputModeActive only takes
-       * effect once scrolling stops to avoid
-       * a component re-render while scrolling.
-       * However, we want the visual active
-       * indicator to go away immediately, so
-       * we call classList.remove here.
-       */
-      this.el.classList.remove('picker-column-active');
-    };
-    this.isActive = false;
-    this.disabled = false;
-    this.items = [];
-    this.value = undefined;
-    this.color = 'primary';
-    this.numericInput = false;
-  }
-  valueChange() {
-    if (this.isColumnVisible) {
+      // Update transform
+      if (transform !== opt.transform) {
+        opt.transform = transform;
+      }
+      button.style.transform = transform;
       /**
-       * Only scroll the active item into view when the picker column
-       * is actively visible to the user.
+       * Ensure that the select column
+       * item has the selected class
        */
-      this.scrollActiveItemIntoView();
+      opt.selected = selected;
+      if (selected) {
+        button.classList.add(PICKER_OPT_SELECTED);
+      }
+      else {
+        button.classList.remove(PICKER_OPT_SELECTED);
+      }
+    }
+    this.col.prevSelected = prevSelected;
+    if (saveY) {
+      this.y = y;
+    }
+    if (this.lastIndex !== selectedIndex) {
+      // have not set a last index yet
+      hapticSelectionChanged();
+      this.lastIndex = selectedIndex;
     }
   }
-  /**
-   * Only setup scroll listeners
-   * when the picker is visible, otherwise
-   * the container will have a scroll
-   * height of 0px.
-   */
-  componentWillLoad() {
-    const visibleCallback = (entries) => {
-      const ev = entries[0];
-      if (ev.isIntersecting) {
-        const { activeItem, el } = this;
-        this.isColumnVisible = true;
-        /**
-         * Because this initial call to scrollActiveItemIntoView has to fire before
-         * the scroll listener is set up, we need to manage the active class manually.
-         */
-        const oldActive = getElementRoot(el).querySelector(`.${PICKER_ITEM_ACTIVE_CLASS}`);
-        if (oldActive) {
-          this.setPickerItemActiveState(oldActive, false);
-        }
-        this.scrollActiveItemIntoView();
-        if (activeItem) {
-          this.setPickerItemActiveState(activeItem, true);
-        }
-        this.initializeScrollListener();
+  decelerate() {
+    if (this.velocity !== 0) {
+      // still decelerating
+      this.velocity *= DECELERATION_FRICTION;
+      // do not let it go slower than a velocity of 1
+      this.velocity = this.velocity > 0 ? Math.max(this.velocity, 1) : Math.min(this.velocity, -1);
+      let y = this.y + this.velocity;
+      if (y > this.minY) {
+        // whoops, it's trying to scroll up farther than the options we have!
+        y = this.minY;
+        this.velocity = 0;
+      }
+      else if (y < this.maxY) {
+        // gahh, it's trying to scroll down farther than we can!
+        y = this.maxY;
+        this.velocity = 0;
+      }
+      this.update(y, 0, true);
+      const notLockedIn = Math.round(y) % this.optHeight !== 0 || Math.abs(this.velocity) > 1;
+      if (notLockedIn) {
+        // isn't locked in yet, keep decelerating until it is
+        this.rafId = requestAnimationFrame(() => this.decelerate());
       }
       else {
-        this.isColumnVisible = false;
-        if (this.destroyScrollListener) {
-          this.destroyScrollListener();
-          this.destroyScrollListener = undefined;
-        }
+        this.velocity = 0;
+        this.emitColChange();
+        hapticSelectionEnd();
       }
-    };
-    new IntersectionObserver(visibleCallback, { threshold: 0.001 }).observe(this.el);
-    const parentEl = (this.parentEl = this.el.closest('ion-picker'));
-    if (parentEl !== null) {
-      // TODO(FW-2832): type
-      parentEl.addEventListener('ionInputModeChange', (ev) => this.inputModeChange(ev));
+    }
+    else if (this.y % this.optHeight !== 0) {
+      // needs to still get locked into a position so options line up
+      const currentPos = Math.abs(this.y % this.optHeight);
+      // create a velocity in the direction it needs to scroll
+      this.velocity = currentPos > this.optHeight / 2 ? 1 : -1;
+      this.decelerate();
     }
   }
-  componentDidRender() {
-    var _a;
-    const { activeItem, items, isColumnVisible, value } = this;
-    if (isColumnVisible) {
-      if (activeItem) {
-        this.scrollActiveItemIntoView();
-      }
-      else if (((_a = items[0]) === null || _a === void 0 ? void 0 : _a.value) !== value) {
-        /**
-         * If the picker column does not have an active item and the current value
-         * does not match the first item in the picker column, that means
-         * the value is out of bounds. In this case, we assign the value to the
-         * first item to match the scroll position of the column.
-         *
-         */
-        this.setValue(items[0].value);
+  indexForY(y) {
+    return Math.min(Math.max(Math.abs(Math.round(y / this.optHeight)), 0), this.col.options.length - 1);
+  }
+  onStart(detail) {
+    // We have to prevent default in order to block scrolling under the picker
+    // but we DO NOT have to stop propagation, since we still want
+    // some "click" events to capture
+    if (detail.event.cancelable) {
+      detail.event.preventDefault();
+    }
+    detail.event.stopPropagation();
+    hapticSelectionStart();
+    // reset everything
+    if (this.rafId !== undefined)
+      cancelAnimationFrame(this.rafId);
+    const options = this.col.options;
+    let minY = options.length - 1;
+    let maxY = 0;
+    for (let i = 0; i < options.length; i++) {
+      if (!options[i].disabled) {
+        minY = Math.min(minY, i);
+        maxY = Math.max(maxY, i);
       }
     }
+    this.minY = -(minY * this.optHeight);
+    this.maxY = -(maxY * this.optHeight);
+  }
+  onMove(detail) {
+    if (detail.event.cancelable) {
+      detail.event.preventDefault();
+    }
+    detail.event.stopPropagation();
+    // update the scroll position relative to pointer start position
+    let y = this.y + detail.deltaY;
+    if (y > this.minY) {
+      // scrolling up higher than scroll area
+      y = Math.pow(y, 0.8);
+      this.bounceFrom = y;
+    }
+    else if (y < this.maxY) {
+      // scrolling down below scroll area
+      y += Math.pow(this.maxY - y, 0.9);
+      this.bounceFrom = y;
+    }
+    else {
+      this.bounceFrom = 0;
+    }
+    this.update(y, 0, false);
   }
-  /** @internal  */
-  async scrollActiveItemIntoView() {
-    const activeEl = this.activeItem;
-    if (activeEl) {
-      this.centerPickerItemInView(activeEl, false, false);
+  onEnd(detail) {
+    if (this.bounceFrom > 0) {
+      // bounce back up
+      this.update(this.minY, 100, true);
+      this.emitColChange();
+      return;
+    }
+    else if (this.bounceFrom < 0) {
+      // bounce back down
+      this.update(this.maxY, 100, true);
+      this.emitColChange();
+      return;
+    }
+    this.velocity = clamp(-MAX_PICKER_SPEED, detail.velocityY * 23, MAX_PICKER_SPEED);
+    if (this.velocity === 0 && detail.deltaY === 0) {
+      const opt = detail.event.target.closest('.picker-opt');
+      if (opt === null || opt === void 0 ? void 0 : opt.hasAttribute('opt-index')) {
+        this.setSelected(parseInt(opt.getAttribute('opt-index'), 10), TRANSITION_DURATION);
+      }
+    }
+    else {
+      this.y += detail.deltaY;
+      if (Math.abs(detail.velocityY) < 0.05) {
+        const isScrollingUp = detail.deltaY > 0;
+        const optHeightFraction = (Math.abs(this.y) % this.optHeight) / this.optHeight;
+        if (isScrollingUp && optHeightFraction > 0.5) {
+          this.velocity = Math.abs(this.velocity) * -1;
+        }
+        else if (!isScrollingUp && optHeightFraction <= 0.5) {
+          this.velocity = Math.abs(this.velocity);
+        }
+      }
+      this.decelerate();
     }
   }
-  /**
-   * Sets the value prop and fires the ionChange event.
-   * This is used when we need to fire ionChange from
-   * user-generated events that cannot be caught with normal
-   * input/change event listeners.
-   * @internal
-   */
-  async setValue(value) {
-    const { items } = this;
-    this.value = value;
-    const findItem = items.find((item) => item.value === value && item.disabled !== true);
-    if (findItem) {
-      this.ionChange.emit(findItem);
+  refresh(forceRefresh, animated) {
+    var _a;
+    let min = this.col.options.length - 1;
+    let max = 0;
+    const options = this.col.options;
+    for (let i = 0; i < options.length; i++) {
+      if (!options[i].disabled) {
+        min = Math.min(min, i);
+        max = Math.max(max, i);
+      }
+    }
+    /**
+     * Only update selected value if column has a
+     * velocity of 0. If it does not, then the
+     * column is animating might land on
+     * a value different than the value at
+     * selectedIndex
+     */
+    if (this.velocity !== 0) {
+      return;
+    }
+    const selectedIndex = clamp(min, (_a = this.col.selectedIndex) !== null && _a !== void 0 ? _a : 0, max);
+    if (this.col.prevSelected !== selectedIndex || forceRefresh) {
+      const y = selectedIndex * this.optHeight * -1;
+      const duration = animated ? TRANSITION_DURATION : 0;
+      this.velocity = 0;
+      this.update(y, duration, true);
     }
   }
-  get activeItem() {
-    // If the whole picker column is disabled, the current value should appear active
-    // If the current value item is specifically disabled, it should not appear active
-    const selector = `.picker-item[data-value="${this.value}"]${this.disabled ? '' : ':not([disabled])'}`;
-    return getElementRoot(this.el).querySelector(selector);
+  onDomChange(forceRefresh, animated) {
+    const colEl = this.optsEl;
+    if (colEl) {
+      // DOM READ
+      // We perfom a DOM read over a rendered item, this needs to happen after the first render or after the the column has changed
+      this.optHeight = colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0;
+    }
+    this.refresh(forceRefresh, animated);
   }
   render() {
-    const { items, color, disabled: pickerDisabled, isActive, numericInput } = this;
+    const col = this.col;
     const mode = getIonMode(this);
-    /**
-     * exportparts is needed so ion-datetime can expose the parts
-     * from two layers of shadow nesting. If this causes problems,
-     * the attribute can be moved to datetime.tsx and set on every
-     * instance of ion-picker-column there instead.
-     */
-    return (h(Host, { exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: createColorClasses(color, {
-        [mode]: true,
-        ['picker-column-active']: isActive,
-        ['picker-column-numeric-input']: numericInput,
-      }) }, h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), items.map((item, index) => {
-      const isItemDisabled = pickerDisabled || item.disabled || false;
-      return (h("button", { tabindex: "-1", class: {
-          'picker-item': true,
-        }, "data-value": item.value, "data-index": index, onClick: (ev) => {
-          this.centerPickerItemInView(ev.target, true);
-        }, disabled: isItemDisabled, part: PICKER_ITEM_PART }, item.text));
-    }), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")));
+    return (h(Host, { class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        'max-width': this.col.columnWidth,
+      } }, col.prefix && (h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
   }
   get el() { return this; }
   static get watchers() { return {
-    "value": ["valueChange"]
+    "col": ["colChanged"]
   }; }
   static get style() { return {
     ios: pickerColumnIosCss,
     md: pickerColumnMdCss
   }; }
-}, [33, "ion-picker-column", {
-    "disabled": [4],
-    "items": [16],
-    "value": [1032],
-    "color": [513],
-    "numericInput": [4, "numeric-input"],
-    "isActive": [32],
-    "scrollActiveItemIntoView": [64],
-    "setValue": [64]
+}, [32, "ion-picker-column", {
+    "col": [16]
   }, undefined, {
-    "value": ["valueChange"]
+    "col": ["colChanged"]
   }]);
-const PICKER_ITEM_ACTIVE_CLASS = 'picker-item-active';
-const PICKER_ITEM_PART = 'wheel-item';
-const PICKER_ITEM_ACTIVE_PART = 'active';
+const PICKER_OPT_SELECTED = 'picker-opt-selected';
+const DECELERATION_FRICTION = 0.97;
+const MAX_PICKER_SPEED = 90;
+const TRANSITION_DURATION = 150;
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
@@ -381,10 +370,10 @@ function defineCustomElement() {
   components.forEach(tagName => { switch (tagName) {
     case "ion-picker-column":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, PickerColumn);
+        customElements.define(tagName, PickerColumnCmp);
       }
       break;
   } });
 }
 
-export { PickerColumn as P, defineCustomElement as d };
+export { PickerColumnCmp as P, defineCustomElement as d };