@sparkle-learning/core 0.0.32 → 0.0.35

package/dist/cjs/ion-nav-link.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bae2a754.js');
+const index = require('./index-51e8292e.js');
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
@@ -39,7 +39,7 @@ const NavLink = class {
     };
   }
   render() {
-    return (index.h(index.Host, { onClick: this.onClick }));
+    return index.h(index.Host, { onClick: this.onClick });
   }
   get el() { return index.getElement(this); }
 };

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bae2a754.js');
-const ionicGlobal = require('./ionic-global-878073d1.js');
-const cubicBezier = require('./cubic-bezier-293f4663.js');
-const helpers = require('./helpers-7e28976c.js');
-const index$1 = require('./index-b12edb26.js');
-const frameworkDelegate = require('./framework-delegate-2470a246.js');
+const index = require('./index-51e8292e.js');
+const ionicGlobal = require('./ionic-global-2cde9d3a.js');
+const cubicBezier = require('./cubic-bezier-53d26d05.js');
+const helpers = require('./helpers-c2496722.js');
+const index$1 = require('./index-787d4498.js');
+const frameworkDelegate = require('./framework-delegate-59a98abd.js');
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
@@ -65,7 +65,8 @@ const convertToView = (page, params) => {
   return new ViewController(page, params);
 };
 const convertToViews = (pages) => {
-  return pages.map(page => {
+  return pages
+    .map((page) => {
     if (page instanceof ViewController) {
       return page;
     }
@@ -77,10 +78,11 @@ const convertToViews = (pages) => {
        * `NavComponentWithProps`. Previously `pages` was
        * of type `any[]` so TypeScript did not catch this.
        */
-      return convertToView(page.component, (page.componentProps === null) ? undefined : page.componentProps);
+      return convertToView(page.component, page.componentProps === null ? undefined : page.componentProps);
     }
     return convertToView(page, undefined);
-  }).filter(v => v !== null);
+  })
+    .filter((v) => v !== null);
 };
 
 const navCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:layout size style;overflow:hidden;z-index:0}";
@@ -124,9 +126,12 @@ const Nav = class {
   }
   async componentDidLoad() {
     this.rootChanged();
-    this.gesture = (await Promise.resolve().then(function () { return require('./swipe-back-7e08b5e0.js'); })).createSwipeBackGesture(this.el, this.canStart.bind(this), this.onStart.bind(this), this.onMove.bind(this), this.onEnd.bind(this));
+    this.gesture = (await Promise.resolve().then(function () { return require('./swipe-back-4a826f9b.js'); })).createSwipeBackGesture(this.el, this.canStart.bind(this), this.onStart.bind(this), this.onMove.bind(this), this.onEnd.bind(this));
     this.swipeGestureChanged();
   }
+  connectedCallback() {
+    this.destroyed = false;
+  }
   disconnectedCallback() {
     for (const view of this.views) {
       index$1.lifecycle(view.element, index$1.LIFECYCLE_WILL_UNLOAD);
@@ -181,7 +186,7 @@ const Nav = class {
     return this.queueTrns({
       insertStart: insertIndex,
       insertViews: insertComponents,
-      opts
+      opts,
     }, done);
   }
   /**
@@ -205,7 +210,7 @@ const Nav = class {
     const ti = {
       removeStart: -1,
       removeCount: -1,
-      opts
+      opts,
     };
     if (typeof indexOrViewCtrl === 'object' && indexOrViewCtrl.component) {
       ti.removeView = indexOrViewCtrl;
@@ -237,7 +242,7 @@ const Nav = class {
     return this.queueTrns({
       removeStart: startIndex,
       removeCount,
-      opts
+      opts,
     }, done);
   }
   /**
@@ -272,7 +277,7 @@ const Nav = class {
       insertViews: views,
       removeStart: 0,
       removeCount: -1,
-      opts
+      opts,
     }, done);
   }
   /**
@@ -291,34 +296,34 @@ const Nav = class {
     if (matches(active, id, params)) {
       return Promise.resolve({
         changed: false,
-        element: active.element
+        element: active.element,
       });
     }
     let resolve;
-    const promise = new Promise(r => (resolve = r));
+    const promise = new Promise((r) => (resolve = r));
     let finish;
     const commonOpts = {
       updateURL: false,
-      viewIsReady: enteringEl => {
+      viewIsReady: (enteringEl) => {
         let mark;
-        const p = new Promise(r => (mark = r));
+        const p = new Promise((r) => (mark = r));
         resolve({
           changed: true,
           element: enteringEl,
           markVisible: async () => {
             mark();
             await finish;
-          }
+          },
         });
         return p;
-      }
+      },
     };
     if (direction === 'root') {
       finish = this.setRoot(id, params, commonOpts);
     }
     else {
       // Look for a view matching the target in the view stack.
-      const viewController = this.views.find(v => matches(v, id, params));
+      const viewController = this.views.find((v) => matches(v, id, params));
       if (viewController) {
         finish = this.popTo(viewController, Object.assign(Object.assign({}, commonOpts), { direction: 'back', animationBuilder: animation }));
       }
@@ -342,7 +347,7 @@ const Nav = class {
       return {
         id: active.element.tagName,
         params: active.params,
-        element: active.element
+        element: active.element,
       };
     }
     return undefined;
@@ -534,7 +539,7 @@ const Nav = class {
         // resolve immediately because there's no animation that's happening
         result = {
           hasCompleted: true,
-          requiresTransition: false
+          requiresTransition: false,
         };
       }
       this.success(result, ti);
@@ -568,8 +573,7 @@ const Nav = class {
       if (ti.removeCount < 0) {
         ti.removeCount = viewsLength - ti.removeStart;
       }
-      ti.leavingRequiresTransition =
-        ti.removeCount > 0 && ti.removeStart + ti.removeCount === viewsLength;
+      ti.leavingRequiresTransition = ti.removeCount > 0 && ti.removeStart + ti.removeCount === viewsLength;
     }
     if (ti.insertViews) {
       // allow -1 to be passed in to auto push it on the end
@@ -701,9 +705,7 @@ const Nav = class {
     // we should animate (duration > 0) if the pushed page is not the first one (startup)
     // or if it is a portal (modal, actionsheet, etc.)
     const opts = ti.opts;
-    const progressCallback = opts.progressAnimation
-      ? (ani) => this.sbAni = ani
-      : undefined;
+    const progressCallback = opts.progressAnimation ? (ani) => (this.sbAni = ani) : undefined;
     const mode = ionicGlobal.getIonMode(this);
     const enteringEl = enteringView.element;
     const leavingEl = leavingView && leavingView.element;
@@ -713,16 +715,20 @@ const Nav = class {
     return this.transitionFinish(hasCompleted, enteringView, leavingView, opts);
   }
   transitionFinish(hasCompleted, enteringView, leavingView, opts) {
-    const cleanupView = hasCompleted ? enteringView : leavingView;
-    if (cleanupView) {
-      this.cleanup(cleanupView);
+    /**
+     * If the transition did not complete, the leavingView will still be the active
+     * view on the stack. Otherwise unmount all the views after the enteringView.
+     */
+    const activeView = hasCompleted ? enteringView : leavingView;
+    if (activeView) {
+      this.unmountInactiveViews(activeView);
     }
     return {
       hasCompleted,
       requiresTransition: true,
       enteringView,
       leavingView,
-      direction: opts.direction
+      direction: opts.direction,
     };
   }
   /**
@@ -770,9 +776,13 @@ const Nav = class {
     this.removeView(view);
   }
   /**
+   * Unmounts all inactive views after the specified active view.
+   *
    * DOM WRITE
+   *
+   * @param activeView The view that is actively visible in the stack. Used to calculate which views to unmount.
    */
-  cleanup(activeView) {
+  unmountInactiveViews(activeView) {
     // ok, cleanup time!! Destroy all of the views that are
     // INACTIVE and come after the active view
     // only do this if the views exist, though
@@ -829,7 +839,7 @@ const Nav = class {
         this.animationEnabled = true;
       }, { oneTimeCallback: true });
       // Account for rounding errors in JS
-      let newStepValue = (shouldComplete) ? -0.001 : 0.001;
+      let newStepValue = shouldComplete ? -0.001 : 0.001;
       /**
        * Animation will be reversed here, so need to
        * reverse the easing curve as well
@@ -849,7 +859,7 @@ const Nav = class {
     }
   }
   render() {
-    return (index.h("slot", null));
+    return index.h("slot", null);
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/ion-picker-column-internal_2.cjs.entry.js

@@ -2,21 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bae2a754.js');
-const ionicGlobal = require('./ionic-global-878073d1.js');
-const helpers = require('./helpers-7e28976c.js');
-const haptic = require('./haptic-91e86eb7.js');
-const theme = require('./theme-4252ac15.js');
+const index = require('./index-51e8292e.js');
+const ionicGlobal = require('./ionic-global-2cde9d3a.js');
+const helpers = require('./helpers-c2496722.js');
+const haptic = require('./haptic-780f33c4.js');
+const theme = require('./theme-b0b295c1.js');
 
-const pickerColumnInternalIosCss = ":host{padding-left:16px;padding-right:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}:host::-webkit-scrollbar{display:none}:host .picker-item{height:34px;line-height:34px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;scroll-snap-align:center}:host .picker-item-empty{scroll-snap-align:none}: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 pickerColumnInternalIosCss = ":host{padding-left:16px;padding-right:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}: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-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.picker-item-disabled{scroll-snap-align:none;cursor:default}:host .picker-item.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 pickerColumnInternalMdCss = ":host{padding-left:16px;padding-right:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}:host::-webkit-scrollbar{display:none}:host .picker-item{height:34px;line-height:34px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;scroll-snap-align:center}:host .picker-item-empty{scroll-snap-align:none}: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 pickerColumnInternalMdCss = ":host{padding-left:16px;padding-right:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}: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-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.picker-item-disabled{scroll-snap-align:none;cursor:default}:host .picker-item.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 PickerColumnInternal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ionChange = index.createEvent(this, "ionChange", 7);
-    this.hapticsStarted = false;
+    this.isScrolling = false;
     this.isColumnVisible = false;
     this.isActive = false;
     /**
@@ -43,12 +43,12 @@ const PickerColumnInternal = class {
       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);
+        const top = target.offsetTop - 3 * target.clientHeight + target.clientHeight / 2;
         if (el.scrollTop !== top) {
           el.scroll({
             top,
             left: 0,
-            behavior: smooth ? 'smooth' : undefined
+            behavior: smooth ? 'smooth' : undefined,
           });
         }
       }
@@ -69,10 +69,27 @@ const PickerColumnInternal = class {
        */
       const isColumnActive = inputModeColumn === undefined || inputModeColumn === this.el;
       if (!useInputMode || !isColumnActive) {
-        this.isActive = false;
+        this.setInputModeActive(false);
         return;
       }
-      this.isActive = true;
+      this.setInputModeActive(true);
+    };
+    /**
+     * Setting isActive will cause a re-render.
+     * As a result, we do not want to cause the
+     * re-render mid scroll as this will cause
+     * the picker column to jump back to
+     * whatever value was selected at the
+     * start of the scroll interaction.
+     */
+    this.setInputModeActive = (state) => {
+      if (this.isScrolling) {
+        this.scrollEndCallback = () => {
+          this.isActive = state;
+        };
+        return;
+      }
+      this.isActive = state;
     };
     /**
      * When the column scrolls, the component
@@ -90,21 +107,24 @@ const PickerColumnInternal = class {
             clearTimeout(timeout);
             timeout = undefined;
           }
-          if (!this.hapticsStarted) {
+          if (!this.isScrolling) {
             haptic.hapticSelectionStart();
-            this.hapticsStarted = true;
+            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 centerX = bbox.x + bbox.width / 2;
+          const centerY = bbox.y + bbox.height / 2;
           const activeElement = el.shadowRoot.elementFromPoint(centerX, centerY);
           if (activeEl !== null) {
             activeEl.classList.remove(PICKER_COL_ACTIVE);
           }
+          if (activeElement.disabled) {
+            return;
+          }
           /**
            * If we are selecting a new value,
            * we need to run haptics again.
@@ -115,6 +135,19 @@ const PickerColumnInternal = class {
           activeEl = activeElement;
           activeElement.classList.add(PICKER_COL_ACTIVE);
           timeout = setTimeout(() => {
+            this.isScrolling = false;
+            haptic.hapticSelectionEnd();
+            /**
+             * Certain tasks (such as those that
+             * cause re-renders) should only be done
+             * once scrolling has finished, otherwise
+             * flickering may occur.
+             */
+            const { scrollEndCallback } = this;
+            if (scrollEndCallback) {
+              scrollEndCallback();
+              this.scrollEndCallback = undefined;
+            }
             const dataIndex = activeElement.getAttribute('data-index');
             /**
              * If no value it is
@@ -128,8 +161,6 @@ const PickerColumnInternal = class {
             const selectedItem = this.items[index];
             if (selectedItem.value !== this.value) {
               this.setValue(selectedItem.value);
-              haptic.hapticSelectionEnd();
-              this.hapticsStarted = false;
             }
           }, 250);
         });
@@ -146,6 +177,66 @@ const PickerColumnInternal = class {
       });
     };
   }
+  itemsChange(currentItems, previousItems) {
+    const { value } = this;
+    /**
+     * When the items change, it is possible for the item
+     * that was selected to no longer exist. In that case, we need
+     * to automatically select the nearest item. If we do not,
+     * then the scroll position will be reset to zero and it will
+     * look like the first item was automatically selected.
+     *
+     * If we cannot find a closest item then we do nothing, and
+     * the browser will reset the scroll position to 0.
+     */
+    const findCurrentItem = currentItems.find((item) => item.value === value);
+    if (!findCurrentItem) {
+      /**
+       * The default behavior is to assume
+       * that the new set of data is similar to the old
+       * set of data, just with some items filtered out.
+       * We walk backwards through the data to find the
+       * closest enabled picker item and select it.
+       *
+       * Developers can also swap the items out for an entirely
+       * new set of data. In that case, the value we select
+       * here likely will not make much sense. For this use case,
+       * developers should update the `value` prop themselves
+       * when swapping out the data.
+       */
+      const findPreviousItemIndex = previousItems.findIndex((item) => item.value === value);
+      if (findPreviousItemIndex === -1) {
+        return;
+      }
+      /**
+       * Step through the current items backwards
+       * until we find a neighbor we can select.
+       * We start at the last known location of the
+       * current selected item in order to
+       * account for data that has been added. This
+       * search prioritizes stability in that it
+       * tries to keep the scroll position as close
+       * to where it was before the update.
+       * Before Items: ['a', 'b', 'c'], Selected Value: 'b'
+       * After Items:  ['a', 'dog', 'c']
+       * Even though 'dog' is a different item than 'b',
+       * it is the closest item we can select while
+       * preserving the scroll position.
+       */
+      let nearestItem;
+      for (let i = findPreviousItemIndex; i >= 0; i--) {
+        const item = currentItems[i];
+        if (item !== undefined && item.disabled !== true) {
+          nearestItem = item;
+          break;
+        }
+      }
+      if (nearestItem) {
+        this.setValue(nearestItem.value);
+        return;
+      }
+    }
+  }
   valueChange() {
     if (this.isColumnVisible) {
       /**
@@ -185,7 +276,7 @@ const PickerColumnInternal = class {
         }
       }
     };
-    new IntersectionObserver(visibleCallback, { threshold: 0.01 }).observe(this.el);
+    new IntersectionObserver(visibleCallback, { threshold: 0.001 }).observe(this.el);
     const parentEl = this.el.closest('ion-picker-internal');
     if (parentEl !== null) {
       parentEl.addEventListener('ionInputModeChange', (ev) => this.inputModeChange(ev));
@@ -217,16 +308,23 @@ const PickerColumnInternal = class {
       this.centerPickerItemInView(activeEl, false);
     }
   }
-  setValue(value) {
+  /**
+   * 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);
+    const findItem = items.find((item) => item.value === value && item.disabled !== true);
     if (findItem) {
       this.ionChange.emit(findItem);
     }
   }
   get activeItem() {
-    return helpers.getElementRoot(this.el).querySelector(`.picker-item[data-value="${this.value}"]`);
+    return helpers.getElementRoot(this.el).querySelector(`.picker-item[data-value="${this.value}"]:not([disabled])`);
   }
   render() {
     const { items, color, isActive, numericInput } = this;
@@ -234,15 +332,19 @@ const PickerColumnInternal = class {
     return (index.h(index.Host, { tabindex: 0, class: theme.createColorClasses(color, {
         [mode]: true,
         ['picker-column-active']: isActive,
-        ['picker-column-numeric-input']: numericInput
+        ['picker-column-numeric-input']: numericInput,
       }) }, index.h("div", { class: "picker-item picker-item-empty" }, "\u00A0"), index.h("div", { class: "picker-item picker-item-empty" }, "\u00A0"), index.h("div", { class: "picker-item picker-item-empty" }, "\u00A0"), items.map((item, index$1) => {
-      return (index.h("div", { class: "picker-item", "data-value": item.value, "data-index": index$1, onClick: (ev) => {
+      return (index.h("button", { tabindex: "-1", class: {
+          'picker-item': true,
+          'picker-item-disabled': item.disabled || false,
+        }, "data-value": item.value, "data-index": index$1, onClick: (ev) => {
           this.centerPickerItemInView(ev.target);
-        } }, item.text));
+        }, disabled: item.disabled }, item.text));
     }), index.h("div", { class: "picker-item picker-item-empty" }, "\u00A0"), index.h("div", { class: "picker-item picker-item-empty" }, "\u00A0"), index.h("div", { class: "picker-item picker-item-empty" }, "\u00A0")));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
+    "items": ["itemsChange"],
     "value": ["valueChange"]
   }; }
 };
@@ -252,9 +354,9 @@ PickerColumnInternal.style = {
   md: pickerColumnInternalMdCss
 };
 
-const pickerInternalIosCss = ":host{display:flex;position:relative;align-items:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;z-index:1;pointer-events:none}:host .picker-before{left:0;top:0;height:83px}:host-context([dir=rtl]){left:unset;right:unset;right:0}:host .picker-after{left:0;top:116px;height:84px}:host-context([dir=rtl]){left:unset;right:unset;right:0}:host .picker-highlight{border-radius:8px;left:0;right:0;top:50%;bottom:0;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;transform:translateY(-50%);z-index:-1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .picker-highlight{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column-internal:first-of-type){text-align:start}:host ::slotted(ion-picker-column-internal:last-of-type){text-align:end}:host .picker-before{background:linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%)}:host .picker-after{background:linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%)}:host .picker-highlight{background:var(--ion-color-step-150, #eeeeef)}";
+const pickerInternalIosCss = ":host{display:flex;position:relative;align-items:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;z-index:1;pointer-events:none}:host .picker-before{left:0;top:0;height:83px}:host-context([dir=rtl]){left:unset;right:unset;right:0}:host .picker-after{left:0;top:116px;height:84px}:host-context([dir=rtl]){left:unset;right:unset;right:0}:host .picker-highlight{border-radius:8px;left:0;right:0;top:50%;bottom:0;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;transform:translateY(-50%);z-index:-1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .picker-highlight{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column-internal:first-of-type){text-align:start}:host ::slotted(ion-picker-column-internal:last-of-type){text-align:end}:host ::slotted(ion-picker-column-internal:only-child){text-align:center}:host .picker-before{background:linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%)}:host .picker-after{background:linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%)}:host .picker-highlight{background:var(--ion-color-step-150, #eeeeef)}";
 
-const pickerInternalMdCss = ":host{display:flex;position:relative;align-items:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;z-index:1;pointer-events:none}:host .picker-before{left:0;top:0;height:83px}:host-context([dir=rtl]){left:unset;right:unset;right:0}:host .picker-after{left:0;top:116px;height:84px}:host-context([dir=rtl]){left:unset;right:unset;right:0}:host .picker-highlight{border-radius:8px;left:0;right:0;top:50%;bottom:0;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;transform:translateY(-50%);z-index:-1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .picker-highlight{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column-internal:first-of-type){text-align:start}:host ::slotted(ion-picker-column-internal:last-of-type){text-align:end}:host .picker-before{background:linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0) 90%)}:host .picker-after{background:linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 30%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0) 90%)}";
+const pickerInternalMdCss = ":host{display:flex;position:relative;align-items:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;z-index:1;pointer-events:none}:host .picker-before{left:0;top:0;height:83px}:host-context([dir=rtl]){left:unset;right:unset;right:0}:host .picker-after{left:0;top:116px;height:84px}:host-context([dir=rtl]){left:unset;right:unset;right:0}:host .picker-highlight{border-radius:8px;left:0;right:0;top:50%;bottom:0;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;transform:translateY(-50%);z-index:-1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .picker-highlight{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column-internal:first-of-type){text-align:start}:host ::slotted(ion-picker-column-internal:last-of-type){text-align:end}:host ::slotted(ion-picker-column-internal:only-child){text-align:center}:host .picker-before{background:linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0) 90%)}:host .picker-after{background:linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 30%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0) 90%)}";
 
 const PickerInternal = class {
   constructor(hostRef) {
@@ -287,8 +389,7 @@ const PickerInternal = class {
      */
     this.onFocusOut = (ev) => {
       const { relatedTarget } = ev;
-      if (!relatedTarget ||
-        relatedTarget.tagName !== 'ION-PICKER-COLUMN-INTERNAL' && relatedTarget !== this.inputEl) {
+      if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN-INTERNAL' && relatedTarget !== this.inputEl)) {
         this.exitInputMode();
       }
     };
@@ -407,7 +508,7 @@ const PickerInternal = class {
            * then we should skip multi column input.
            */
           const columns = el.querySelectorAll('ion-picker-column-internal.picker-column-numeric-input');
-          const columnEl = (columns.length === 1) ? ev.target : undefined;
+          const columnEl = columns.length === 1 ? ev.target : undefined;
           this.actionOnClick = () => {
             this.enterInputMode(columnEl);
           };
@@ -508,7 +609,7 @@ const PickerInternal = class {
       if (!inputEl || !inputModeColumn) {
         return;
       }
-      const values = inputModeColumn.items;
+      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
@@ -547,7 +648,7 @@ const PickerInternal = class {
        */
       const findItemFromCompleteValue = values.find(({ text }) => text.replace(/^0+/, '') === inputEl.value);
       if (findItemFromCompleteValue) {
-        inputModeColumn.value = findItemFromCompleteValue.value;
+        inputModeColumn.setValue(findItemFromCompleteValue.value);
         return;
       }
       /**
@@ -567,11 +668,10 @@ const PickerInternal = class {
      * or trailing zeros when looking at the item text.
      */
     this.searchColumn = (colEl, value, zeroBehavior = 'start') => {
-      let item;
       const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
-      item = colEl.items.find(({ text }) => text.replace(behavior, '') === value);
+      const item = colEl.items.find(({ text, disabled }) => disabled !== true && text.replace(behavior, '') === value);
       if (item) {
-        colEl.value = item.value;
+        colEl.setValue(item.value);
       }
     };
     this.selectMultiColumn = () => {
@@ -579,7 +679,7 @@ const PickerInternal = class {
       if (!inputEl) {
         return;
       }
-      const numericPickers = Array.from(el.querySelectorAll('ion-picker-column-internal')).filter(col => col.numericInput);
+      const numericPickers = Array.from(el.querySelectorAll('ion-picker-column-internal')).filter((col) => col.numericInput);
       const firstColumn = numericPickers[0];
       const lastColumn = numericPickers[1];
       let value = inputEl.value;
@@ -596,7 +696,7 @@ const PickerInternal = class {
            * at that first.
            */
           const firstCharacter = inputEl.value.substring(0, 1);
-          value = (firstCharacter === '0' || firstCharacter === '1') ? inputEl.value : firstCharacter;
+          value = firstCharacter === '0' || firstCharacter === '1' ? inputEl.value : firstCharacter;
           this.searchColumn(firstColumn, value);
           /**
            * If only checked the first value,
@@ -616,14 +716,17 @@ const PickerInternal = class {
            * at that first.
            */
           const firstCharacterAgain = inputEl.value.substring(0, 1);
-          value = (firstCharacterAgain === '0' || firstCharacterAgain === '1') ? inputEl.value.substring(0, 2) : firstCharacterAgain;
+          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);
+          minuteValue = value.length === 1 ? inputEl.value.substring(1) : inputEl.value.substring(2);
           this.searchColumn(lastColumn, minuteValue, 'end');
           break;
         case 4:
@@ -634,14 +737,19 @@ const PickerInternal = class {
            * at that first.
            */
           const firstCharacterAgainAgain = inputEl.value.substring(0, 1);
-          value = (firstCharacterAgainAgain === '0' || firstCharacterAgainAgain === '1') ? inputEl.value.substring(0, 2) : firstCharacterAgainAgain;
+          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);
+          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:
@@ -678,7 +786,7 @@ const PickerInternal = class {
       const { useInputMode, inputModeColumn } = this;
       this.ionInputModeChange.emit({
         useInputMode,
-        inputModeColumn
+        inputModeColumn,
       });
     };
   }
@@ -687,7 +795,7 @@ const PickerInternal = class {
     helpers.getElementRoot(this.el).addEventListener('focusout', this.onFocusOut);
   }
   render() {
-    return (index.h(index.Host, { onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, index.h("input", { "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", ref: el => this.inputEl = el, onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), index.h("div", { class: "picker-before" }), index.h("div", { class: "picker-after" }), index.h("div", { class: "picker-highlight", ref: el => this.highlightEl = el }), index.h("slot", null)));
+    return (index.h(index.Host, { onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, index.h("input", { "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), index.h("div", { class: "picker-before" }), index.h("div", { class: "picker-after" }), index.h("div", { class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), index.h("slot", null)));
   }
   get el() { return index.getElement(this); }
 };