@ionic/core 7.5.7-dev.11701113479.149fdab6 → 7.5.7-dev.11701201960.104b3a1f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.5.7-dev.11701113479.149fdab6",
+  "version": "7.5.7-dev.11701201960.104b3a1f",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",

package/components/ion-picker-column-internal.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface IonPickerColumnInternal extends Components.IonPickerColumnInternal, HTMLElement {}
-export const IonPickerColumnInternal: {
-  prototype: IonPickerColumnInternal;
-  new (): IonPickerColumnInternal;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/components/ion-picker-column-internal.js

@@ -1,9 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { P as PickerColumnInternal, d as defineCustomElement$1 } from './picker-column-internal.js';
-
-const IonPickerColumnInternal = PickerColumnInternal;
-const defineCustomElement = defineCustomElement$1;
-
-export { IonPickerColumnInternal, defineCustomElement };

package/components/ion-picker-internal.js

@@ -1,9 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { P as PickerInternal, d as defineCustomElement$1 } from './picker-internal.js';
-
-const IonPickerInternal = PickerInternal;
-const defineCustomElement = defineCustomElement$1;
-
-export { IonPickerInternal, defineCustomElement };

package/components/picker-column-internal.js

@@ -1,390 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { r as raf, g as getElementRoot } from './helpers.js';
-import { a as hapticSelectionStart, b as hapticSelectionChanged, h as hapticSelectionEnd } from './haptic.js';
-import { a as isPlatform, b as getIonMode } from './ionic-global.js';
-import { c as createColorClasses } from './theme.js';
-
-const pickerColumnInternalIosCss = ":host{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}:host::-webkit-scrollbar{display:none}:host .picker-item{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden;scroll-snap-align:center}:host .picker-item-empty,:host .picker-item[disabled]{cursor:default}:host .picker-item-empty,:host(:not([disabled])) .picker-item[disabled]{scroll-snap-align:none}:host([disabled]){overflow-y:hidden}:host .picker-item[disabled]{opacity:0.4}:host(.picker-column-active) .picker-item.picker-item-active{color:var(--ion-color-base)}@media (any-hover: hover){:host(:focus){outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}";
-
-const pickerColumnInternalMdCss = ":host{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}:host::-webkit-scrollbar{display:none}:host .picker-item{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden;scroll-snap-align:center}:host .picker-item-empty,:host .picker-item[disabled]{cursor:default}:host .picker-item-empty,:host(:not([disabled])) .picker-item[disabled]{scroll-snap-align:none}:host([disabled]){overflow-y:hidden}:host .picker-item[disabled]{opacity:0.4}:host(.picker-column-active) .picker-item.picker-item-active{color:var(--ion-color-base)}@media (any-hover: hover){:host(:focus){outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}:host .picker-item-active{color:var(--ion-color-base)}";
-
-const PickerColumnInternal = /*@__PURE__*/ proxyCustomElement(class PickerColumnInternal extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.ionChange = createEvent(this, "ionChange", 7);
-    this.isScrolling = false;
-    this.isColumnVisible = false;
-    this.canExitInputMode = true;
-    this.centerPickerItemInView = (target, smooth = true, canExitInputMode = true) => {
-      const { el, isColumnVisible } = this;
-      if (isColumnVisible) {
-        // (Vertical offset from parent) - (three empty picker rows) + (half the height of the target to ensure the scroll triggers)
-        const top = target.offsetTop - 3 * target.clientHeight + target.clientHeight / 2;
-        if (el.scrollTop !== top) {
-          /**
-           * Setting this flag prevents input
-           * mode from exiting in the picker column's
-           * scroll callback. This is useful when the user manually
-           * taps an item or types on the keyboard as both
-           * of these can cause a scroll to occur.
-           */
-          this.canExitInputMode = canExitInputMode;
-          el.scroll({
-            top,
-            left: 0,
-            behavior: smooth ? 'smooth' : undefined,
-          });
-        }
-      }
-    };
-    this.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);
-      }
-    };
-    /**
-     * 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 { 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;
-      }
-      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
-     * 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) {
-      /**
-       * Only scroll the active item into view when the picker column
-       * is actively visible to the user.
-       */
-      this.scrollActiveItemIntoView();
-    }
-  }
-  /**
-   * 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();
-      }
-      else {
-        this.isColumnVisible = false;
-        if (this.destroyScrollListener) {
-          this.destroyScrollListener();
-          this.destroyScrollListener = undefined;
-        }
-      }
-    };
-    new IntersectionObserver(visibleCallback, { threshold: 0.001 }).observe(this.el);
-    const parentEl = (this.parentEl = this.el.closest('ion-picker-internal'));
-    if (parentEl !== null) {
-      // TODO(FW-2832): type
-      parentEl.addEventListener('ionInputModeChange', (ev) => this.inputModeChange(ev));
-    }
-  }
-  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);
-      }
-    }
-  }
-  /** @internal  */
-  async scrollActiveItemIntoView() {
-    const activeEl = this.activeItem;
-    if (activeEl) {
-      this.centerPickerItemInView(activeEl, false, 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);
-    }
-  }
-  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);
-  }
-  render() {
-    const { items, color, disabled: pickerDisabled, isActive, numericInput } = this;
-    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-internal there instead.
-     */
-    return (h(Host, { exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: createColorClasses(color, {
-        [mode]: true,
-        ['picker-column-active']: isActive,
-        ['picker-column-numeric-input']: numericInput,
-      }) }, h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), items.map((item, index) => {
-      const isItemDisabled = pickerDisabled || item.disabled || false;
-      return (h("button", { tabindex: "-1", class: {
-          'picker-item': true,
-        }, "data-value": item.value, "data-index": index, onClick: (ev) => {
-          this.centerPickerItemInView(ev.target, true);
-        }, disabled: isItemDisabled, part: PICKER_ITEM_PART }, item.text));
-    }), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")));
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "value": ["valueChange"]
-  }; }
-  static get style() { return {
-    ios: pickerColumnInternalIosCss,
-    md: pickerColumnInternalMdCss
-  }; }
-}, [33, "ion-picker-column-internal", {
-    "disabled": [4],
-    "items": [16],
-    "value": [1032],
-    "color": [513],
-    "numericInput": [4, "numeric-input"],
-    "isActive": [32],
-    "scrollActiveItemIntoView": [64],
-    "setValue": [64]
-  }, undefined, {
-    "value": ["valueChange"]
-  }]);
-const PICKER_ITEM_ACTIVE_CLASS = 'picker-item-active';
-const PICKER_ITEM_PART = 'wheel-item';
-const PICKER_ITEM_ACTIVE_PART = 'active';
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ion-picker-column-internal"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ion-picker-column-internal":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, PickerColumnInternal);
-      }
-      break;
-  } });
-}
-
-export { PickerColumnInternal as P, defineCustomElement as d };

package/dist/esm-es5/ion-picker-column-internal.entry.js

@@ -1,4 +0,0 @@
-import{__awaiter,__generator}from"tslib";
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */import{r as registerInstance,d as createEvent,h,H as Host,f as getElement}from"./index-7c9b1bca.js";import{r as raf,g as getElementRoot}from"./helpers-3379ba19.js";import{a as hapticSelectionStart,b as hapticSelectionChanged,h as hapticSelectionEnd}from"./haptic-1243b917.js";import{a as isPlatform,b as getIonMode}from"./ionic-global-40e42e7f.js";import{c as createColorClasses}from"./theme-17531cdf.js";import"./capacitor-b4979570.js";import"./index-7a14ecec.js";var pickerColumnInternalIosCss=":host{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}:host::-webkit-scrollbar{display:none}:host .picker-item{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden;scroll-snap-align:center}:host .picker-item-empty,:host .picker-item[disabled]{cursor:default}:host .picker-item-empty,:host(:not([disabled])) .picker-item[disabled]{scroll-snap-align:none}:host([disabled]){overflow-y:hidden}:host .picker-item[disabled]{opacity:0.4}:host(.picker-column-active) .picker-item.picker-item-active{color:var(--ion-color-base)}@media (any-hover: hover){:host(:focus){outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}";var pickerColumnInternalMdCss=":host{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}:host::-webkit-scrollbar{display:none}:host .picker-item{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden;scroll-snap-align:center}:host .picker-item-empty,:host .picker-item[disabled]{cursor:default}:host .picker-item-empty,:host(:not([disabled])) .picker-item[disabled]{scroll-snap-align:none}:host([disabled]){overflow-y:hidden}:host .picker-item[disabled]{opacity:0.4}:host(.picker-column-active) .picker-item.picker-item-active{color:var(--ion-color-base)}@media (any-hover: hover){:host(:focus){outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}:host .picker-item-active{color:var(--ion-color-base)}";var PickerColumnInternal=function(){function e(e){var i=this;registerInstance(this,e);this.ionChange=createEvent(this,"ionChange",7);this.isScrolling=false;this.isColumnVisible=false;this.canExitInputMode=true;this.centerPickerItemInView=function(e,t,r){if(t===void 0){t=true}if(r===void 0){r=true}var n=i,a=n.el,o=n.isColumnVisible;if(o){var s=e.offsetTop-3*e.clientHeight+e.clientHeight/2;if(a.scrollTop!==s){i.canExitInputMode=r;a.scroll({top:s,left:0,behavior:t?"smooth":undefined})}}};this.setPickerItemActiveState=function(e,i){if(i){e.classList.add(PICKER_ITEM_ACTIVE_CLASS);e.part.add(PICKER_ITEM_ACTIVE_PART)}else{e.classList.remove(PICKER_ITEM_ACTIVE_CLASS);e.part.remove(PICKER_ITEM_ACTIVE_PART)}};this.inputModeChange=function(e){if(!i.numericInput){return}var t=e.detail,r=t.useInputMode,n=t.inputModeColumn;var a=n===undefined||n===i.el;if(!r||!a){i.setInputModeActive(false);return}i.setInputModeActive(true)};this.setInputModeActive=function(e){if(i.isScrolling){i.scrollEndCallback=function(){i.isActive=e};return}i.isActive=e};this.initializeScrollListener=function(){var e=isPlatform("ios");var t=i.el;var r;var n=i.activeItem;var a=function(){raf((function(){if(r){clearTimeout(r);r=undefined}if(!i.isScrolling){e&&hapticSelectionStart();i.isScrolling=true}var a=t.getBoundingClientRect();var o=a.x+a.width/2;var s=a.y+a.height/2;var l=t.shadowRoot.elementFromPoint(o,s);if(n!==null){i.setPickerItemActiveState(n,false)}if(l===null||l.disabled){return}if(l!==n){e&&hapticSelectionChanged();if(i.canExitInputMode){i.exitInputMode()}}n=l;i.setPickerItemActiveState(l,true);r=setTimeout((function(){i.isScrolling=false;e&&hapticSelectionEnd();var t=i.scrollEndCallback;if(t){t();i.scrollEndCallback=undefined}i.canExitInputMode=true;var r=l.getAttribute("data-index");if(r===null){return}var n=parseInt(r,10);var a=i.items[n];if(a.value!==i.value){i.setValue(a.value)}}),250)}))};raf((function(){t.addEventListener("scroll",a);i.destroyScrollListener=function(){t.removeEventListener("scroll",a)}}))};this.exitInputMode=function(){var e=i.parentEl;if(e==null)return;e.exitInputMode();i.el.classList.remove("picker-column-active")};this.isActive=false;this.disabled=false;this.items=[];this.value=undefined;this.color="primary";this.numericInput=false}e.prototype.valueChange=function(){if(this.isColumnVisible){this.scrollActiveItemIntoView()}};e.prototype.componentWillLoad=function(){var e=this;var i=function(i){var t=i[0];if(t.isIntersecting){var r=e,n=r.activeItem,a=r.el;e.isColumnVisible=true;var o=getElementRoot(a).querySelector(".".concat(PICKER_ITEM_ACTIVE_CLASS));if(o){e.setPickerItemActiveState(o,false)}e.scrollActiveItemIntoView();if(n){e.setPickerItemActiveState(n,true)}e.initializeScrollListener()}else{e.isColumnVisible=false;if(e.destroyScrollListener){e.destroyScrollListener();e.destroyScrollListener=undefined}}};new IntersectionObserver(i,{threshold:.001}).observe(this.el);var t=this.parentEl=this.el.closest("ion-picker-internal");if(t!==null){t.addEventListener("ionInputModeChange",(function(i){return e.inputModeChange(i)}))}};e.prototype.componentDidRender=function(){var e;var i=this,t=i.activeItem,r=i.items,n=i.isColumnVisible,a=i.value;if(n){if(t){this.scrollActiveItemIntoView()}else if(((e=r[0])===null||e===void 0?void 0:e.value)!==a){this.setValue(r[0].value)}}};e.prototype.scrollActiveItemIntoView=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(i){e=this.activeItem;if(e){this.centerPickerItemInView(e,false,false)}return[2]}))}))};e.prototype.setValue=function(e){return __awaiter(this,void 0,void 0,(function(){var i,t;return __generator(this,(function(r){i=this.items;this.value=e;t=i.find((function(i){return i.value===e&&i.disabled!==true}));if(t){this.ionChange.emit(t)}return[2]}))}))};Object.defineProperty(e.prototype,"activeItem",{get:function(){var e='.picker-item[data-value="'.concat(this.value,'"]').concat(this.disabled?"":":not([disabled])");return getElementRoot(this.el).querySelector(e)},enumerable:false,configurable:true});e.prototype.render=function(){var e;var i=this;var t=this,r=t.items,n=t.color,a=t.disabled,o=t.isActive,s=t.numericInput;var l=getIonMode(this);return h(Host,{exportparts:"".concat(PICKER_ITEM_PART,", ").concat(PICKER_ITEM_ACTIVE_PART),disabled:a,tabindex:a?null:0,class:createColorClasses(n,(e={},e[l]=true,e["picker-column-active"]=o,e["picker-column-numeric-input"]=s,e))},h("div",{class:"picker-item picker-item-empty","aria-hidden":"true"}," "),h("div",{class:"picker-item picker-item-empty","aria-hidden":"true"}," "),h("div",{class:"picker-item picker-item-empty","aria-hidden":"true"}," "),r.map((function(e,t){var r=a||e.disabled||false;return h("button",{tabindex:"-1",class:{"picker-item":true},"data-value":e.value,"data-index":t,onClick:function(e){i.centerPickerItemInView(e.target,true)},disabled:r,part:PICKER_ITEM_PART},e.text)})),h("div",{class:"picker-item picker-item-empty","aria-hidden":"true"}," "),h("div",{class:"picker-item picker-item-empty","aria-hidden":"true"}," "),h("div",{class:"picker-item picker-item-empty","aria-hidden":"true"}," "))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{value:["valueChange"]}},enumerable:false,configurable:true});return e}();var PICKER_ITEM_ACTIVE_CLASS="picker-item-active";var PICKER_ITEM_PART="wheel-item";var PICKER_ITEM_ACTIVE_PART="active";PickerColumnInternal.style={ios:pickerColumnInternalIosCss,md:pickerColumnInternalMdCss};export{PickerColumnInternal as ion_picker_column_internal};

package/dist/esm-es5/ion-picker-internal.entry.js

@@ -1,4 +0,0 @@
-import{__awaiter,__generator}from"tslib";
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */import{r as registerInstance,d as createEvent,h,H as Host,f as getElement}from"./index-7c9b1bca.js";import{g as getElementRoot}from"./helpers-3379ba19.js";var pickerInternalIosCss=":host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}@supports (inset-inline-start: 0){:host .picker-before{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-before{left:0}:host-context([dir=rtl]) .picker-before{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-before{left:unset;right:unset;right:0}}}:host .picker-after{top:116px;height:84px}@supports (inset-inline-start: 0){:host .picker-after{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-after{left:0}:host-context([dir=rtl]) .picker-after{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-after{left:unset;right:unset;right:0}}}:host .picker-highlight{border-radius:8px;left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--wheel-highlight-background);z-index:-1}: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:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to bottom, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to top, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-highlight{background:var(--wheel-highlight-background, var(--ion-color-step-150, #eeeeef))}";var pickerInternalMdCss=":host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}@supports (inset-inline-start: 0){:host .picker-before{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-before{left:0}:host-context([dir=rtl]) .picker-before{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-before{left:unset;right:unset;right:0}}}:host .picker-after{top:116px;height:84px}@supports (inset-inline-start: 0){:host .picker-after{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-after{left:0}:host-context([dir=rtl]) .picker-after{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-after{left:unset;right:unset;right:0}}}:host .picker-highlight{border-radius:8px;left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--wheel-highlight-background);z-index:-1}: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:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to bottom, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}";var PickerInternal=function(){function r(r){var t=this;registerInstance(this,r);this.ionInputModeChange=createEvent(this,"ionInputModeChange",7);this.useInputMode=false;this.isInHighlightBounds=function(r){var e=t.highlightEl;if(!e){return false}var n=e.getBoundingClientRect();var i=r.clientX<n.left||r.clientX>n.right;var o=r.clientY<n.top||r.clientY>n.bottom;if(i||o){return false}return true};this.onFocusOut=function(r){var e=r.relatedTarget;if(!e||e.tagName!=="ION-PICKER-COLUMN-INTERNAL"&&e!==t.inputEl){t.exitInputMode()}};this.onFocusIn=function(r){var e=r.target;if(e.tagName!=="ION-PICKER-COLUMN-INTERNAL"){return}if(!t.actionOnClick){var n=e;var i=n.numericInput;if(i){t.enterInputMode(n,false)}else{t.exitInputMode()}}};this.onClick=function(){var r=t.actionOnClick;if(r){r();t.actionOnClick=undefined}};this.onPointerDown=function(r){var e=t,n=e.useInputMode,i=e.inputModeColumn,o=e.el;if(t.isInHighlightBounds(r)){if(n){if(r.target.tagName==="ION-PICKER-COLUMN-INTERNAL"){if(i&&i===r.target){t.actionOnClick=function(){t.enterInputMode()}}else{t.actionOnClick=function(){t.enterInputMode(r.target)}}}else{t.actionOnClick=function(){t.exitInputMode()}}}else{var a=o.querySelectorAll("ion-picker-column-internal.picker-column-numeric-input");var s=a.length===1?r.target:undefined;t.actionOnClick=function(){t.enterInputMode(s)}}return}t.actionOnClick=function(){t.exitInputMode()}};this.enterInputMode=function(r,e){if(e===void 0){e=true}var n=t,i=n.inputEl,o=n.el;if(!i){return}var a=o.querySelector("ion-picker-column-internal.picker-column-numeric-input");if(!a){return}t.useInputMode=true;t.inputModeColumn=r;if(e){if(t.destroyKeypressListener){t.destroyKeypressListener();t.destroyKeypressListener=undefined}i.focus()}else{o.addEventListener("keypress",t.onKeyPress);t.destroyKeypressListener=function(){o.removeEventListener("keypress",t.onKeyPress)}}t.emitInputModeChange()};this.onKeyPress=function(r){var e=t.inputEl;if(!e){return}var n=parseInt(r.key,10);if(!Number.isNaN(n)){e.value+=r.key;t.onInputChange()}};this.selectSingleColumn=function(){var r=t,e=r.inputEl,n=r.inputModeColumn,i=r.singleColumnSearchTimeout;if(!e||!n){return}var o=n.items.filter((function(r){return r.disabled!==true}));if(i){clearTimeout(i)}t.singleColumnSearchTimeout=setTimeout((function(){e.value="";t.singleColumnSearchTimeout=undefined}),1e3);if(e.value.length>=3){var a=e.value.length-2;var s=e.value.substring(a);e.value=s;t.selectSingleColumn();return}var c=o.find((function(r){var t=r.text;var n=t.replace(/^0+(?=[1-9])|0+(?=0$)/,"");return n===e.value}));if(c){n.setValue(c.value);return}if(e.value.length===2){var l=e.value.substring(e.value.length-1);e.value=l;t.selectSingleColumn()}};this.searchColumn=function(r,t,e){if(e===void 0){e="start"}var n=e==="start"?/^0+/:/0$/;var i=r.items.find((function(r){var e=r.text,i=r.disabled;return i!==true&&e.replace(n,"")===t}));if(i){r.setValue(i.value)}};this.selectMultiColumn=function(){var r=t,e=r.inputEl,n=r.el;if(!e){return}var i=Array.from(n.querySelectorAll("ion-picker-column-internal")).filter((function(r){return r.numericInput}));var o=i[0];var a=i[1];var s=e.value;var c;switch(s.length){case 1:t.searchColumn(o,s);break;case 2:var l=e.value.substring(0,1);s=l==="0"||l==="1"?e.value:l;t.searchColumn(o,s);if(s.length===1){c=e.value.substring(e.value.length-1);t.searchColumn(a,c,"end")}break;case 3:var u=e.value.substring(0,1);s=u==="0"||u==="1"?e.value.substring(0,2):u;t.searchColumn(o,s);c=s.length===1?e.value.substring(1):e.value.substring(2);t.searchColumn(a,c,"end");break;case 4:var g=e.value.substring(0,1);s=g==="0"||g==="1"?e.value.substring(0,2):g;t.searchColumn(o,s);var b=s.length===1?e.value.substring(1,e.value.length):e.value.substring(2,e.value.length);t.searchColumn(a,b,"end");break;default:var f=e.value.length-4;var d=e.value.substring(f);e.value=d;t.selectMultiColumn();break}};this.onInputChange=function(){var r=t,e=r.useInputMode,n=r.inputEl,i=r.inputModeColumn;if(!e||!n){return}if(i){t.selectSingleColumn()}else{t.selectMultiColumn()}};this.emitInputModeChange=function(){var r=t,e=r.useInputMode,n=r.inputModeColumn;t.ionInputModeChange.emit({useInputMode:e,inputModeColumn:n})}}r.prototype.preventTouchStartPropagation=function(r){r.stopPropagation()};r.prototype.componentWillLoad=function(){getElementRoot(this.el).addEventListener("focusin",this.onFocusIn);getElementRoot(this.el).addEventListener("focusout",this.onFocusOut)};r.prototype.exitInputMode=function(){return __awaiter(this,void 0,void 0,(function(){var r,t,e;return __generator(this,(function(n){r=this,t=r.inputEl,e=r.useInputMode;if(!e||!t){return[2]}this.useInputMode=false;this.inputModeColumn=undefined;t.blur();t.value="";if(this.destroyKeypressListener){this.destroyKeypressListener();this.destroyKeypressListener=undefined}this.emitInputModeChange();return[2]}))}))};r.prototype.render=function(){var r=this;return h(Host,{onPointerDown:function(t){return r.onPointerDown(t)},onClick:function(){return r.onClick()}},h("input",{"aria-hidden":"true",tabindex:-1,inputmode:"numeric",type:"number",ref:function(t){return r.inputEl=t},onInput:function(){return r.onInputChange()},onBlur:function(){return r.exitInputMode()}}),h("div",{class:"picker-before"}),h("div",{class:"picker-after"}),h("div",{class:"picker-highlight",ref:function(t){return r.highlightEl=t}}),h("slot",null))};Object.defineProperty(r.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return r}();PickerInternal.style={ios:pickerInternalIosCss,md:pickerInternalMdCss};export{PickerInternal as ion_picker_internal};