@ionic/core 7.5.8-dev.11701791090.18ebbea8 → 7.5.8-dev.11701806358.1ca1b519

package/dist/ionic/p-ffd5dba4.system.entry.js

@@ -0,0 +1,4 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+System.register(["./p-d3b030b8.system.js","./p-32ad210f.system.js","./p-4609d030.system.js","./p-b4a51c42.system.js"],(function(t){"use strict";var i,n,o,e,r,a,s;return{setters:[function(t){i=t.r;n=t.h;o=t.H;e=t.f},function(t){r=t.k},function(t){a=t.c},function(t){s=t.b}],execute:function(){var l="button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;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}:host(.option-disabled){opacity:0.4}:host(.option-disabled) button{cursor:default}";var u="button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;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}:host(.option-disabled){opacity:0.4}:host(.option-disabled) button{cursor:default}:host(.option-active){color:var(--ion-color-base)}";var h=t("ion_picker_column_option",function(){function t(t){i(this,t);this.pickerColumn=null;this.ariaLabel=null;this.disabled=false;this.value=undefined;this.color="primary"}t.prototype.onAriaLabelChange=function(t){this.ariaLabel=t};t.prototype.componentWillLoad=function(){var t=r(this.el,["aria-label"]);this.ariaLabel=t["aria-label"]||null};t.prototype.connectedCallback=function(){this.pickerColumn=this.el.closest("ion-picker-column")};t.prototype.disconnectedCallback=function(){this.pickerColumn=null};t.prototype.componentDidLoad=function(){var t=this.pickerColumn;if(t!==null){t.scrollActiveItemIntoView()}};t.prototype.onClick=function(){var t=this.pickerColumn;if(t!==null){t.setValue(this.value)}};t.prototype.render=function(){var t;var i=this;var e=this,r=e.color,l=e.disabled,u=e.ariaLabel;var h=s(this);return n(o,{class:a(r,(t={},t[h]=true,t["option-disabled"]=l,t))},n("button",{tabindex:"-1","aria-label":u,disabled:l,onClick:function(){return i.onClick()}},n("slot",null)))};Object.defineProperty(t.prototype,"el",{get:function(){return e(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{"aria-label":["onAriaLabelChange"]}},enumerable:false,configurable:true});return t}());h.style={ios:l,md:u}}}}));

package/dist/types/components/backdrop/backdrop.d.ts

@@ -1,6 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 export declare class Backdrop implements ComponentInterface {
-    private blocker;
     /**
      * If `true`, the backdrop will be visible.
      */
@@ -17,8 +16,6 @@ export declare class Backdrop implements ComponentInterface {
      * Emitted when the backdrop is tapped.
      */
     ionBackdropTap: EventEmitter<void>;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     protected onMouseDown(ev: TouchEvent): void;
     private emitTap;
     render(): any;

package/dist/types/components/datetime/datetime.d.ts

@@ -28,7 +28,6 @@ import type { DatetimePresentation, DatetimeChangeEventDetail, DatetimeParts, Ti
 export declare class Datetime implements ComponentInterface {
     private inputId;
     private calendarBodyRef?;
-    private monthYearToggleItemRef?;
     private popoverRef?;
     private clearFocusVisible?;
     private parsedMinuteValues?;

package/dist/types/components/datetime/utils/data.d.ts

@@ -1,5 +1,5 @@
 import type { Mode } from '../../../interface';
-import type { PickerColumnItem } from '../../picker-column-internal/picker-column-internal-interfaces';
+import type { PickerColumnItem } from '../../picker-column/picker-column-interfaces';
 import type { DatetimeParts, DatetimeHourCycle } from '../datetime-interface';
 /**
  * Returns the current date as
@@ -56,7 +56,7 @@ export declare const getMonthColumnData: (locale: string, refParts: DatetimePart
  * @param minParts The minimum bound on the date that can be returned
  * @param maxParts The maximum bound on the date that can be returned
  * @param dayValues The allowed date values
- * @returns Date data to be used in ion-picker-column-internal
+ * @returns Date data to be used in ion-picker-column
  */
 export declare const getDayColumnData: (locale: string, refParts: DatetimeParts, minParts?: DatetimeParts, maxParts?: DatetimeParts, dayValues?: number[], formatOptions?: Intl.DateTimeFormatOptions) => PickerColumnItem[];
 export declare const getYearColumnData: (locale: string, refParts: DatetimeParts, minParts?: DatetimeParts, maxParts?: DatetimeParts, yearValues?: number[]) => PickerColumnItem[];

package/dist/types/components/menu/menu.d.ts

@@ -21,7 +21,7 @@ export declare class Menu implements ComponentInterface, MenuI {
     isAnimating: boolean;
     width: number;
     _isOpen: boolean;
-    backdropEl?: HTMLElement;
+    backdropEl?: HTMLIonBackdropElement;
     menuInnerEl?: HTMLElement;
     contentEl?: HTMLElement;
     lastFocus?: HTMLElement;

package/dist/types/components/picker/picker-interfaces.d.ts

@@ -0,0 +1,8 @@
+export interface PickerChangeEventDetail {
+    useInputMode: boolean;
+    inputModeColumn?: HTMLIonPickerColumnElement;
+}
+export interface PickerCustomEvent extends CustomEvent {
+    target: HTMLIonPickerElement;
+    detail: PickerChangeEventDetail;
+}

package/dist/types/components/picker/picker.d.ts

@@ -1,158 +1,101 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import type { AnimationBuilder, OverlayInterface, FrameworkDelegate } from '../../interface';
-import type { OverlayEventDetail } from '../../utils/overlays-interface';
-import type { PickerButton, PickerColumn } from './picker-interface';
+import type { PickerChangeEventDetail } from './picker-interfaces';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
-export declare class Picker implements ComponentInterface, OverlayInterface {
-    private readonly delegateController;
-    private readonly lockController;
-    private readonly triggerController;
-    private durationTimeout?;
-    lastFocus?: HTMLElement;
+export declare class Picker implements ComponentInterface {
+    private inputEl?;
+    private useInputMode;
+    private inputModeColumn?;
+    private highlightEl?;
+    private actionOnClick?;
+    private destroyKeypressListener?;
+    private singleColumnSearchTimeout?;
     el: HTMLIonPickerElement;
-    presented: boolean;
-    /** @internal */
-    overlayIndex: number;
-    /** @internal */
-    delegate?: FrameworkDelegate;
-    /** @internal */
-    hasController: boolean;
+    ionInputModeChange: EventEmitter<PickerChangeEventDetail>;
     /**
-     * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+     * When the picker is interacted with
+     * we need to prevent touchstart so other
+     * gestures do not fire. For example,
+     * scrolling on the wheel picker
+     * in ion-datetime should not cause
+     * a card modal to swipe to close.
      */
-    keyboardClose: boolean;
-    /**
-     * Animation to use when the picker is presented.
-     */
-    enterAnimation?: AnimationBuilder;
-    /**
-     * Animation to use when the picker is dismissed.
-     */
-    leaveAnimation?: AnimationBuilder;
-    /**
-     * Array of buttons to be displayed at the top of the picker.
-     */
-    buttons: PickerButton[];
-    /**
-     * Array of columns to be displayed in the picker.
-     */
-    columns: PickerColumn[];
-    /**
-     * Additional classes to apply for custom CSS. If multiple classes are
-     * provided they should be separated by spaces.
-     */
-    cssClass?: string | string[];
-    /**
-     * Number of milliseconds to wait before dismissing the picker.
-     */
-    duration: number;
-    /**
-     * If `true`, a backdrop will be displayed behind the picker.
-     */
-    showBackdrop: boolean;
-    /**
-     * If `true`, the picker will be dismissed when the backdrop is clicked.
-     */
-    backdropDismiss: boolean;
-    /**
-     * If `true`, the picker will animate.
-     */
-    animated: boolean;
-    /**
-     * Additional attributes to pass to the picker.
-     */
-    htmlAttributes?: {
-        [key: string]: any;
-    };
-    /**
-     * If `true`, the picker will open. If `false`, the picker will close.
-     * Use this if you need finer grained control over presentation, otherwise
-     * just use the pickerController or the `trigger` property.
-     * Note: `isOpen` will not automatically be set back to `false` when
-     * the picker dismisses. You will need to do that in your code.
-     */
-    isOpen: boolean;
-    onIsOpenChange(newValue: boolean, oldValue: boolean): void;
-    /**
-     * An ID corresponding to the trigger element that
-     * causes the picker to open when clicked.
-     */
-    trigger: string | undefined;
-    triggerChanged(): void;
-    /**
-     * Emitted after the picker has presented.
-     */
-    didPresent: EventEmitter<void>;
-    /**
-     * Emitted before the picker has presented.
-     */
-    willPresent: EventEmitter<void>;
-    /**
-     * Emitted before the picker has dismissed.
-     */
-    willDismiss: EventEmitter<OverlayEventDetail>;
-    /**
-     * Emitted after the picker has dismissed.
-     */
-    didDismiss: EventEmitter<OverlayEventDetail>;
+    preventTouchStartPropagation(ev: TouchEvent): void;
+    componentWillLoad(): void;
+    private isInHighlightBounds;
     /**
-     * Emitted after the picker has presented.
-     * Shorthand for ionPickerWillDismiss.
+     * If we are no longer focused
+     * on a picker column, then we should
+     * exit input mode. An exception is made
+     * for the input in the picker since having
+     * that focused means we are still in input mode.
      */
-    didPresentShorthand: EventEmitter<void>;
+    private onFocusOut;
     /**
-     * Emitted before the picker has presented.
-     * Shorthand for ionPickerWillPresent.
+     * When picker columns receive focus
+     * the parent picker needs to determine
+     * whether to enter/exit input mode.
      */
-    willPresentShorthand: EventEmitter<void>;
+    private onFocusIn;
     /**
-     * Emitted before the picker has dismissed.
-     * Shorthand for ionPickerWillDismiss.
+     * On click we need to run an actionOnClick
+     * function that has been set in onPointerDown
+     * so that we enter/exit input mode correctly.
      */
-    willDismissShorthand: EventEmitter<OverlayEventDetail>;
+    private onClick;
     /**
-     * Emitted after the picker has dismissed.
-     * Shorthand for ionPickerDidDismiss.
+     * Clicking a column also focuses the column on
+     * certain browsers, so we use onPointerDown
+     * to tell the onFocusIn function that users
+     * are trying to click the column rather than
+     * focus the column using the keyboard. When the
+     * user completes the click, the onClick function
+     * runs and runs the actionOnClick callback.
      */
-    didDismissShorthand: EventEmitter<OverlayEventDetail>;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    componentWillLoad(): void;
-    componentDidLoad(): void;
+    private onPointerDown;
     /**
-     * Present the picker overlay after it has been created.
+     * Enters input mode to allow
+     * for text entry of numeric values.
+     * If on mobile, we focus a hidden input
+     * field so that the on screen keyboard
+     * is brought up. When tabbing using a
+     * keyboard, picker columns receive an outline
+     * to indicate they are focused. As a result,
+     * we should not focus the hidden input as it
+     * would cause the outline to go away, preventing
+     * users from having any visual indication of which
+     * column is focused.
      */
-    present(): Promise<void>;
+    private enterInputMode;
     /**
-     * Dismiss the picker overlay after it has been presented.
-     *
-     * @param data Any data to emit in the dismiss events.
-     * @param role The role of the element that is dismissing the picker.
-     * This can be useful in a button handler for determining which button was
-     * clicked to dismiss the picker.
-     * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+     * @internal
+     * Exits text entry mode for the picker
+     * This method blurs the hidden input
+     * and cause the keyboard to dismiss.
      */
-    dismiss(data?: any, role?: string): Promise<boolean>;
+    exitInputMode(): Promise<void>;
+    private onKeyPress;
+    private selectSingleColumn;
     /**
-     * Returns a promise that resolves when the picker did dismiss.
+     * Searches a list of column items for a particular
+     * value. This is currently used for numeric values.
+     * The zeroBehavior can be set to account for leading
+     * or trailing zeros when looking at the item text.
      */
-    onDidDismiss<T = any>(): Promise<OverlayEventDetail<T>>;
+    private searchColumn;
+    private selectMultiColumn;
     /**
-     * Returns a promise that resolves when the picker will dismiss.
+     * Searches the value of the active column
+     * to determine which value users are trying
+     * to select
      */
-    onWillDismiss<T = any>(): Promise<OverlayEventDetail<T>>;
+    private onInputChange;
     /**
-     * Get the column that matches the specified name.
-     *
-     * @param name The name of the column.
+     * Emit ionInputModeChange. Picker columns
+     * listen for this event to determine whether
+     * or not their column is "active" for text input.
      */
-    getColumn(name: string): Promise<PickerColumn | undefined>;
-    private buttonClick;
-    private callButtonHandler;
-    private getSelected;
-    private onBackdropTap;
-    private dispatchCancelHandler;
+    private emitInputModeChange;
     render(): any;
 }

package/dist/types/components/picker-column/picker-column.d.ts

@@ -1,46 +1,112 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import type { PickerColumn } from '../picker/picker-interface';
+import type { Color } from '../../interface';
+import type { PickerColumnItem } from './picker-column-interfaces';
 /**
- * @internal
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @slot prefix - Content to show on the left side of the picker options.
+ * @slot suffix - Content to show on the right side of the picker options.
  */
-export declare class PickerColumnCmp implements ComponentInterface {
-    private bounceFrom;
-    private lastIndex?;
-    private minY;
-    private maxY;
-    private optHeight;
-    private rotateFactor;
-    private scaleFactor;
-    private velocity;
-    private y;
-    private optsEl?;
-    private gesture?;
-    private rafId?;
-    private tmrId?;
-    private noAnimate;
-    private colDidChange;
-    el: HTMLElement;
-    /**
-     * Emitted when the selected value has changed
+export declare class PickerColumn implements ComponentInterface {
+    private scrollEl?;
+    private destroyScrollListener?;
+    private isScrolling;
+    private scrollEndCallback?;
+    private isColumnVisible;
+    private parentEl?;
+    private canExitInputMode;
+    isActive: boolean;
+    el: HTMLIonPickerColumnElement;
+    /**
+     * If `true`, the user cannot interact with the picker.
+     */
+    disabled: boolean;
+    /**
+     * A list of options to be displayed in the picker
+     */
+    items: PickerColumnItem[];
+    /**
+     * The selected option in the picker.
+     */
+    value?: string | number;
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color?: Color;
+    /**
+     * If `true`, tapping the picker will
+     * reveal a number input keyboard that lets
+     * the user type in values for each picker
+     * column. This is useful when working
+     * with time pickers.
+     *
+     * @internal
+     */
+    numericInput: boolean;
+    /**
+     * Emitted when the value has changed.
+     */
+    ionChange: EventEmitter<{
+        value: string | number | undefined;
+    }>;
+    valueChange(): void;
+    /**
+     * Only setup scroll listeners
+     * when the picker is visible, otherwise
+     * the container will have a scroll
+     * height of 0px.
+     */
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    /** @internal  */
+    scrollActiveItemIntoView(): Promise<void>;
+    /**
+     * 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
      */
-    ionPickerColChange: EventEmitter<PickerColumn>;
-    /** Picker column data */
-    col: PickerColumn;
-    protected colChanged(): void;
-    connectedCallback(): Promise<void>;
-    componentDidLoad(): void;
-    componentDidUpdate(): void;
-    disconnectedCallback(): void;
-    private emitColChange;
-    private setSelected;
-    private update;
-    private decelerate;
-    private indexForY;
-    private onStart;
-    private onMove;
-    private onEnd;
-    private refresh;
-    private onDomChange;
+    setValue(value?: string | number): Promise<void>;
+    /**
+     * Sets focus on the scrollable container within the picker column.
+     * Use this method instead of the global `pickerColumn.focus()`.
+     */
+    setFocus(): Promise<void>;
+    private centerPickerItemInView;
+    private setPickerItemActiveState;
+    /**
+     * When ionInputModeChange is emitted, each column
+     * needs to check if it is the one being made available
+     * for text entry.
+     */
+    private inputModeChange;
+    /**
+     * 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.
+     */
+    private setInputModeActive;
+    /**
+     * 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.
+     */
+    private initializeScrollListener;
+    /**
+     * 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.
+     */
+    private exitInputMode;
+    get activeItem(): HTMLIonPickerColumnOptionElement | undefined;
     render(): any;
 }

package/dist/types/components/picker-column-option/picker-column-option.d.ts

@@ -0,0 +1,66 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+import type { Color } from '../../interface';
+export declare class PickerColumnOption implements ComponentInterface {
+    /**
+     * We keep track of the parent picker column
+     * so we can update the value of it when
+     * clicking an enable option.
+     */
+    private pickerColumn;
+    el: HTMLElement;
+    /**
+     * The aria-label of the option.
+     *
+     * If the value changes, then it will trigger a
+     * re-render of the picker since it's a @State variable.
+     * Otherwise, the `aria-label` attribute cannot be updated
+     * after the component is loaded.
+     */
+    ariaLabel?: string | null;
+    /**
+     * If `true`, the user cannot interact with the picker column option.
+     */
+    disabled: boolean;
+    /**
+     * The text value of the option.
+     */
+    value?: any | null;
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color?: Color;
+    /**
+     * The aria-label of the option has changed after the
+     * first render and needs to be updated within the component.
+     *
+     * @param ariaLbl The new aria-label value.
+     */
+    onAriaLabelChange(ariaLbl: string): void;
+    componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * The column options can load at any time
+     * so the options needs to tell the
+     * parent picker column when it is loaded
+     * so the picker column can ensure it is
+     * centered in the view.
+     *
+     * We intentionally run this for every
+     * option. If we only ran this from
+     * the selected option then if the newly
+     * loaded options were not selected then
+     * scrollActiveItemIntoView would not be called.
+     */
+    componentDidLoad(): void;
+    /**
+     * When an option is clicked update the
+     * parent picker column value. This
+     * component will handle centering the option
+     * in the column view.
+     */
+    onClick(): void;
+    render(): any;
+}