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

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

@@ -2,361 +2,345 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { getElementRoot, raf } from "../../utils/helpers";
+import { clamp } from "../../utils/helpers";
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from "../../utils/native/haptic";
-import { isPlatform } from "../../utils/platform";
-import { createColorClasses } from "../../utils/theme";
+import { getClassMap } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @internal
  */
-export class PickerColumn {
+export class PickerColumnCmp {
   constructor() {
-    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.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('../../utils/gesture')).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);
   }
-  /** @internal  */
-  async scrollActiveItemIntoView() {
-    const activeEl = this.activeItem;
-    if (activeEl) {
-      this.centerPickerItemInView(activeEl, false, false);
+  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);
   }
-  /**
-   * 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);
+  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();
     }
   }
-  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);
+  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);
+    }
+  }
+  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;
-      {
-        /*
-        Users should be able to tab
-        between multiple columns. As a result,
-        we set tabindex here so that tabbing switches
-        between columns instead of buttons. Users
-        can still use arrow keys on the keyboard to
-        navigate the column up and down.
-      */
-      }
-      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))));
   }
   static get is() { return "ion-picker-column"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "ios": ["picker-column.ios.scss"],
@@ -371,194 +355,65 @@ export class PickerColumn {
   }
   static get properties() {
     return {
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the user cannot interact with the picker."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "items": {
+      "col": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "PickerColumnItem[]",
-          "resolved": "PickerColumnItem[]",
+          "original": "PickerColumn",
+          "resolved": "PickerColumn",
           "references": {
-            "PickerColumnItem": {
+            "PickerColumn": {
               "location": "import",
-              "path": "./picker-column-interfaces",
-              "id": "src/components/picker-column/picker-column-interfaces.ts::PickerColumnItem"
+              "path": "../picker/picker-interface",
+              "id": "src/components/picker/picker-interface.ts::PickerColumn"
             }
           }
         },
-        "required": false,
+        "required": true,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "A list of options to be displayed in the picker"
-        },
-        "defaultValue": "[]"
-      },
-      "value": {
-        "type": "any",
-        "mutable": true,
-        "complexType": {
-          "original": "string | number",
-          "resolved": "number | string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The selected option in the picker."
-        },
-        "attribute": "value",
-        "reflect": false
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Color",
-          "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
-          "references": {
-            "Color": {
-              "location": "import",
-              "path": "../../interface",
-              "id": "src/interface.d.ts::Color"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
-        },
-        "attribute": "color",
-        "reflect": true,
-        "defaultValue": "'primary'"
-      },
-      "numericInput": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }],
-          "text": "If `true`, tapping the picker will\nreveal a number input keyboard that lets\nthe user type in values for each picker\ncolumn. This is useful when working\nwith time pickers."
-        },
-        "attribute": "numeric-input",
-        "reflect": false,
-        "defaultValue": "false"
+          "text": "Picker column data"
+        }
       }
     };
   }
-  static get states() {
-    return {
-      "isActive": {}
-    };
-  }
   static get events() {
     return [{
-        "method": "ionChange",
-        "name": "ionChange",
+        "method": "ionPickerColChange",
+        "name": "ionPickerColChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": "Emitted when the value has changed."
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Emitted when the selected value has changed"
         },
         "complexType": {
-          "original": "PickerColumnItem",
-          "resolved": "PickerColumnItem",
+          "original": "PickerColumn",
+          "resolved": "PickerColumn",
           "references": {
-            "PickerColumnItem": {
+            "PickerColumn": {
               "location": "import",
-              "path": "./picker-column-interfaces",
-              "id": "src/components/picker-column/picker-column-interfaces.ts::PickerColumnItem"
+              "path": "../picker/picker-interface",
+              "id": "src/components/picker/picker-interface.ts::PickerColumn"
             }
           }
         }
       }];
   }
-  static get methods() {
-    return {
-      "scrollActiveItemIntoView": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }]
-        }
-      },
-      "setValue": {
-        "complexType": {
-          "signature": "(value?: string | number) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets the value prop and fires the ionChange event.\nThis is used when we need to fire ionChange from\nuser-generated events that cannot be caught with normal\ninput/change event listeners.",
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }]
-        }
-      }
-    };
-  }
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "value",
-        "methodName": "valueChange"
+        "propName": "col",
+        "methodName": "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;