@sparkle-learning/core 0.0.33 → 0.0.36

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, e as getElement, H as Host } from './index-5568e3fa.js';
+import { r as registerInstance, h, e as getElement, H as Host } from './index-c04b9ed5.js';
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
@@ -35,7 +35,7 @@ const NavLink = class {
     };
   }
   render() {
-    return (h(Host, { onClick: this.onClick }));
+    return h(Host, { onClick: this.onClick });
   }
   get el() { return getElement(this); }
 };

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, i as createEvent, h, e as getElement } from './index-5568e3fa.js';
-import { g as getIonMode, c as config } from './ionic-global-0939c477.js';
-import { g as getTimeGivenProgression } from './cubic-bezier-a7ad9c8e.js';
-import { j as assert, s as shallowEqualStringMap } from './helpers-9d0930de.js';
-import { l as lifecycle, t as transition, s as setPageHidden, L as LIFECYCLE_WILL_UNLOAD, a as LIFECYCLE_WILL_LEAVE, b as LIFECYCLE_DID_LEAVE } from './index-8de9446b.js';
-import { a as attachComponent } from './framework-delegate-518bd233.js';
+import { r as registerInstance, i as createEvent, h, e as getElement } from './index-c04b9ed5.js';
+import { g as getIonMode, c as config } from './ionic-global-4903e23e.js';
+import { g as getTimeGivenProgression } from './cubic-bezier-4c0db14f.js';
+import { o as assert, s as shallowEqualStringMap } from './helpers-bf0e23d6.js';
+import { l as lifecycle, t as transition, s as setPageHidden, L as LIFECYCLE_WILL_UNLOAD, a as LIFECYCLE_WILL_LEAVE, b as LIFECYCLE_DID_LEAVE } from './index-2b84cad2.js';
+import { a as attachComponent } from './framework-delegate-3e634a5c.js';
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
@@ -61,7 +61,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;
     }
@@ -73,10 +74,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}";
@@ -120,9 +122,12 @@ const Nav = class {
   }
   async componentDidLoad() {
     this.rootChanged();
-    this.gesture = (await import('./swipe-back-9a3b2cdd.js')).createSwipeBackGesture(this.el, this.canStart.bind(this), this.onStart.bind(this), this.onMove.bind(this), this.onEnd.bind(this));
+    this.gesture = (await import('./swipe-back-7847a0c1.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) {
       lifecycle(view.element, LIFECYCLE_WILL_UNLOAD);
@@ -177,7 +182,7 @@ const Nav = class {
     return this.queueTrns({
       insertStart: insertIndex,
       insertViews: insertComponents,
-      opts
+      opts,
     }, done);
   }
   /**
@@ -201,7 +206,7 @@ const Nav = class {
     const ti = {
       removeStart: -1,
       removeCount: -1,
-      opts
+      opts,
     };
     if (typeof indexOrViewCtrl === 'object' && indexOrViewCtrl.component) {
       ti.removeView = indexOrViewCtrl;
@@ -233,7 +238,7 @@ const Nav = class {
     return this.queueTrns({
       removeStart: startIndex,
       removeCount,
-      opts
+      opts,
     }, done);
   }
   /**
@@ -268,7 +273,7 @@ const Nav = class {
       insertViews: views,
       removeStart: 0,
       removeCount: -1,
-      opts
+      opts,
     }, done);
   }
   /**
@@ -287,34 +292,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 }));
       }
@@ -338,7 +343,7 @@ const Nav = class {
       return {
         id: active.element.tagName,
         params: active.params,
-        element: active.element
+        element: active.element,
       };
     }
     return undefined;
@@ -530,7 +535,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);
@@ -564,8 +569,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
@@ -697,9 +701,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 = getIonMode(this);
     const enteringEl = enteringView.element;
     const leavingEl = leavingView && leavingView.element;
@@ -709,16 +711,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,
     };
   }
   /**
@@ -766,9 +772,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
@@ -825,7 +835,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
@@ -845,7 +855,7 @@ const Nav = class {
     }
   }
   render() {
-    return (h("slot", null));
+    return h("slot", null);
   }
   get el() { return getElement(this); }
   static get watchers() { return {

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

@@ -1,18 +1,18 @@
-import { r as registerInstance, i as createEvent, h, H as Host, e as getElement } from './index-5568e3fa.js';
-import { g as getIonMode } from './ionic-global-0939c477.js';
-import { b as raf, g as getElementRoot } from './helpers-9d0930de.js';
-import { a as hapticSelectionStart, b as hapticSelectionChanged, c as hapticSelectionEnd } from './haptic-99c9e346.js';
-import { c as createColorClasses } from './theme-c336c9d9.js';
+import { r as registerInstance, i as createEvent, h, H as Host, e as getElement } from './index-c04b9ed5.js';
+import { g as getIonMode } from './ionic-global-4903e23e.js';
+import { l as raf, g as getElementRoot } from './helpers-bf0e23d6.js';
+import { a as hapticSelectionStart, b as hapticSelectionChanged, c as hapticSelectionEnd } from './haptic-522f76f2.js';
+import { c as createColorClasses } from './theme-7ef00c83.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) {
     registerInstance(this, hostRef);
     this.ionChange = createEvent(this, "ionChange", 7);
-    this.hapticsStarted = false;
+    this.isScrolling = false;
     this.isColumnVisible = false;
     this.isActive = false;
     /**
@@ -39,12 +39,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,
           });
         }
       }
@@ -65,10 +65,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
@@ -86,21 +103,24 @@ const PickerColumnInternal = class {
             clearTimeout(timeout);
             timeout = undefined;
           }
-          if (!this.hapticsStarted) {
+          if (!this.isScrolling) {
             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.
@@ -111,6 +131,19 @@ const PickerColumnInternal = class {
           activeEl = activeElement;
           activeElement.classList.add(PICKER_COL_ACTIVE);
           timeout = setTimeout(() => {
+            this.isScrolling = false;
+            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
@@ -124,8 +157,6 @@ const PickerColumnInternal = class {
             const selectedItem = this.items[index];
             if (selectedItem.value !== this.value) {
               this.setValue(selectedItem.value);
-              hapticSelectionEnd();
-              this.hapticsStarted = false;
             }
           }, 250);
         });
@@ -142,6 +173,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) {
       /**
@@ -181,7 +272,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));
@@ -213,16 +304,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 getElementRoot(this.el).querySelector(`.picker-item[data-value="${this.value}"]`);
+    return getElementRoot(this.el).querySelector(`.picker-item[data-value="${this.value}"]:not([disabled])`);
   }
   render() {
     const { items, color, isActive, numericInput } = this;
@@ -230,15 +328,19 @@ const PickerColumnInternal = class {
     return (h(Host, { tabindex: 0, class: createColorClasses(color, {
         [mode]: true,
         ['picker-column-active']: isActive,
-        ['picker-column-numeric-input']: numericInput
+        ['picker-column-numeric-input']: numericInput,
       }) }, h("div", { class: "picker-item picker-item-empty" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty" }, "\u00A0"), items.map((item, index) => {
-      return (h("div", { class: "picker-item", "data-value": item.value, "data-index": index, onClick: (ev) => {
+      return (h("button", { tabindex: "-1", class: {
+          'picker-item': true,
+          'picker-item-disabled': item.disabled || false,
+        }, "data-value": item.value, "data-index": index, onClick: (ev) => {
           this.centerPickerItemInView(ev.target);
-        } }, item.text));
+        }, disabled: item.disabled }, item.text));
     }), h("div", { class: "picker-item picker-item-empty" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty" }, "\u00A0")));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
+    "items": ["itemsChange"],
     "value": ["valueChange"]
   }; }
 };
@@ -248,9 +350,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) {
@@ -283,8 +385,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();
       }
     };
@@ -403,7 +504,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);
           };
@@ -504,7 +605,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
@@ -543,7 +644,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;
       }
       /**
@@ -563,11 +664,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 = () => {
@@ -575,7 +675,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;
@@ -592,7 +692,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,
@@ -612,14 +712,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:
@@ -630,14 +733,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:
@@ -674,7 +782,7 @@ const PickerInternal = class {
       const { useInputMode, inputModeColumn } = this;
       this.ionInputModeChange.emit({
         useInputMode,
-        inputModeColumn
+        inputModeColumn,
       });
     };
   }
@@ -683,7 +791,7 @@ const PickerInternal = class {
     getElementRoot(this.el).addEventListener('focusout', this.onFocusOut);
   }
   render() {
-    return (h(Host, { onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", ref: el => this.inputEl = el, onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { class: "picker-before" }), h("div", { class: "picker-after" }), h("div", { class: "picker-highlight", ref: el => this.highlightEl = el }), h("slot", null)));
+    return (h(Host, { onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { class: "picker-before" }), h("div", { class: "picker-after" }), h("div", { class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", null)));
   }
   get el() { return getElement(this); }
 };