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

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

@@ -1,101 +1,158 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import type { PickerChangeEventDetail } from './picker-interfaces';
+import type { AnimationBuilder, OverlayInterface, FrameworkDelegate } from '../../interface';
+import type { OverlayEventDetail } from '../../utils/overlays-interface';
+import type { PickerButton, PickerColumn } from './picker-interface';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
-export declare class Picker implements ComponentInterface {
-  private inputEl?;
-  private useInputMode;
-  private inputModeColumn?;
-  private highlightEl?;
-  private actionOnClick?;
-  private destroyKeypressListener?;
-  private singleColumnSearchTimeout?;
+export declare class Picker implements ComponentInterface, OverlayInterface {
+  private readonly delegateController;
+  private readonly lockController;
+  private readonly triggerController;
+  private durationTimeout?;
+  lastFocus?: HTMLElement;
   el: HTMLIonPickerElement;
-  ionInputModeChange: EventEmitter<PickerChangeEventDetail>;
+  presented: boolean;
+  /** @internal */
+  overlayIndex: number;
+  /** @internal */
+  delegate?: FrameworkDelegate;
+  /** @internal */
+  hasController: boolean;
   /**
-   * 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.
+   * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
    */
-  preventTouchStartPropagation(ev: TouchEvent): void;
-  componentWillLoad(): void;
-  private isInHighlightBounds;
+  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 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.
+   * If `true`, the picker will animate.
    */
-  private onFocusOut;
+  animated: boolean;
   /**
-   * When picker columns receive focus
-   * the parent picker needs to determine
-   * whether to enter/exit input mode.
+   * Additional attributes to pass to the picker.
    */
-  private onFocusIn;
+  htmlAttributes?: {
+    [key: string]: any;
+  };
   /**
-   * On click we need to run an actionOnClick
-   * function that has been set in onPointerDown
-   * so that we enter/exit input mode correctly.
+   * 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.
    */
-  private onClick;
+  isOpen: boolean;
+  onIsOpenChange(newValue: boolean, oldValue: boolean): void;
   /**
-   * 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.
+   * An ID corresponding to the trigger element that
+   * causes the picker to open when clicked.
    */
-  private onPointerDown;
+  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>;
+  /**
+   * Emitted after the picker has presented.
+   * Shorthand for ionPickerWillDismiss.
+   */
+  didPresentShorthand: EventEmitter<void>;
+  /**
+   * Emitted before the picker has presented.
+   * Shorthand for ionPickerWillPresent.
+   */
+  willPresentShorthand: EventEmitter<void>;
+  /**
+   * Emitted before the picker has dismissed.
+   * Shorthand for ionPickerWillDismiss.
+   */
+  willDismissShorthand: EventEmitter<OverlayEventDetail>;
+  /**
+   * Emitted after the picker has dismissed.
+   * Shorthand for ionPickerDidDismiss.
+   */
+  didDismissShorthand: EventEmitter<OverlayEventDetail>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   /**
-   * 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 the picker overlay after it has been created.
    */
-  private enterInputMode;
+  present(): Promise<void>;
   /**
-   * @internal
-   * Exits text entry mode for the picker
-   * This method blurs the hidden input
-   * and cause the keyboard to dismiss.
+   * 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"`.
    */
-  exitInputMode(): Promise<void>;
-  private onKeyPress;
-  private selectSingleColumn;
+  dismiss(data?: any, role?: string): Promise<boolean>;
   /**
-   * 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.
+   * Returns a promise that resolves when the picker did dismiss.
    */
-  private searchColumn;
-  private selectMultiColumn;
+  onDidDismiss<T = any>(): Promise<OverlayEventDetail<T>>;
   /**
-   * Searches the value of the active column
-   * to determine which value users are trying
-   * to select
+   * Returns a promise that resolves when the picker will dismiss.
    */
-  private onInputChange;
+  onWillDismiss<T = any>(): Promise<OverlayEventDetail<T>>;
   /**
-   * Emit ionInputModeChange. Picker columns
-   * listen for this event to determine whether
-   * or not their column is "active" for text input.
+   * Get the column that matches the specified name.
+   *
+   * @param name The name of the column.
    */
-  private emitInputModeChange;
+  getColumn(name: string): Promise<PickerColumn | undefined>;
+  private buttonClick;
+  private callButtonHandler;
+  private getSelected;
+  private onBackdropTap;
+  private dispatchCancelHandler;
   render(): any;
 }

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

@@ -1,101 +1,46 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import type { Color } from '../../interface';
-import type { PickerColumnItem } from './picker-column-interfaces';
+import type { PickerColumn } from '../picker/picker-interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @internal
  */
-export declare class PickerColumn implements ComponentInterface {
-  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<PickerColumnItem>;
-  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.
+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
    * @internal
    */
-  setValue(value?: string | number): 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(): HTMLElement | null;
+  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;
   render(): any;
 }

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

@@ -0,0 +1,102 @@
+import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import type { Color } from '../../interface';
+import type { PickerColumnItem } from './picker-column-internal-interfaces';
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @internal
+ */
+export declare class PickerColumnInternal implements ComponentInterface {
+  private destroyScrollListener?;
+  private isScrolling;
+  private scrollEndCallback?;
+  private isColumnVisible;
+  private parentEl?;
+  private canExitInputMode;
+  isActive: boolean;
+  el: HTMLIonPickerColumnInternalElement;
+  /**
+   * 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<PickerColumnItem>;
+  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
+   */
+  setValue(value?: string | number): 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(): HTMLElement | null;
+  render(): any;
+}

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

@@ -0,0 +1,8 @@
+export interface PickerInternalChangeEventDetail {
+  useInputMode: boolean;
+  inputModeColumn?: HTMLIonPickerColumnInternalElement;
+}
+export interface PickerInternalCustomEvent extends CustomEvent {
+  target: HTMLIonPickerInternalElement;
+  detail: PickerInternalChangeEventDetail;
+}

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

@@ -0,0 +1,102 @@
+import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import type { PickerInternalChangeEventDetail } from './picker-internal-interfaces';
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @internal
+ */
+export declare class PickerInternal implements ComponentInterface {
+  private inputEl?;
+  private useInputMode;
+  private inputModeColumn?;
+  private highlightEl?;
+  private actionOnClick?;
+  private destroyKeypressListener?;
+  private singleColumnSearchTimeout?;
+  el: HTMLIonPickerInternalElement;
+  ionInputModeChange: EventEmitter<PickerInternalChangeEventDetail>;
+  /**
+   * 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.
+   */
+  preventTouchStartPropagation(ev: TouchEvent): void;
+  componentWillLoad(): void;
+  private isInHighlightBounds;
+  /**
+   * 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.
+   */
+  private onFocusOut;
+  /**
+   * When picker columns receive focus
+   * the parent picker needs to determine
+   * whether to enter/exit input mode.
+   */
+  private onFocusIn;
+  /**
+   * On click we need to run an actionOnClick
+   * function that has been set in onPointerDown
+   * so that we enter/exit input mode correctly.
+   */
+  private onClick;
+  /**
+   * 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.
+   */
+  private onPointerDown;
+  /**
+   * 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.
+   */
+  private enterInputMode;
+  /**
+   * @internal
+   * Exits text entry mode for the picker
+   * This method blurs the hidden input
+   * and cause the keyboard to dismiss.
+   */
+  exitInputMode(): Promise<void>;
+  private onKeyPress;
+  private selectSingleColumn;
+  /**
+   * 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.
+   */
+  private searchColumn;
+  private selectMultiColumn;
+  /**
+   * Searches the value of the active column
+   * to determine which value users are trying
+   * to select
+   */
+  private onInputChange;
+  /**
+   * Emit ionInputModeChange. Picker columns
+   * listen for this event to determine whether
+   * or not their column is "active" for text input.
+   */
+  private emitInputModeChange;
+  render(): any;
+}

package/dist/types/components/radio-group/radio-group-interface.d.ts

@@ -6,3 +6,4 @@ export interface RadioGroupCustomEvent<T = any> extends CustomEvent {
   detail: RadioGroupChangeEventDetail<T>;
   target: HTMLIonRadioGroupElement;
 }
+export type RadioGroupCompareFn = (currentValue: any, compareValue: any) => boolean;

package/dist/types/components/radio-group/radio-group.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import type { RadioGroupChangeEventDetail } from './radio-group-interface';
+import type { RadioGroupChangeEventDetail, RadioGroupCompareFn } from './radio-group-interface';
 export declare class RadioGroup implements ComponentInterface {
   private inputId;
   private labelId;
@@ -9,6 +9,13 @@ export declare class RadioGroup implements ComponentInterface {
    * If `true`, the radios can be deselected.
    */
   allowEmptySelection: boolean;
+  /**
+   * This property allows developers to specify a custom function or property
+   * name for comparing objects when determining the selected option in the
+   * ion-radio-group. When not specified, the default behavior will use strict
+   * equality (===) for comparison.
+   */
+  compareWith?: string | RadioGroupCompareFn | null;
   /**
    * The name of the control, which is submitted with the form data.
    */

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

@@ -1,5 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import type { AnimationBuilder, BackButtonEvent } from '../../interface';
+import type { BackButtonEvent } from "../../utils/hardware-back-button";
+import type { AnimationBuilder } from '../../interface';
 import type { RouterDirection, RouterEventDetail } from './utils/interface';
 export declare class Router implements ComponentInterface {
   private previousPath;

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

@@ -5,6 +5,8 @@ import type { SelectChangeEventDetail, SelectInterface, SelectCompareFn } from '
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot label - The label text to associate with the select. Use the `labelPlacement` property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML.
+ * @slot start - Content to display at the leading edge of the select.
+ * @slot end - Content to display at the trailing edge of the select.
  *
  * @part placeholder - The text displayed in the select when there is no value.
  * @part text - The displayed value of the select.
@@ -38,7 +40,10 @@ export declare class Select implements ComponentInterface {
    */
   color?: Color;
   /**
-   * A property name or function used to compare object values
+   * This property allows developers to specify a custom function or property
+   * name for comparing objects when determining the selected option in the
+   * ion-select. When not specified, the default behavior will use strict
+   * equality (===) for comparison.
    */
   compareWith?: string | SelectCompareFn | null;
   /**

package/dist/types/components/skeleton-text/skeleton-text.d.ts

@@ -1,9 +1,17 @@
-import type { ComponentInterface } from '../../stencil-public-runtime';
+import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import type { StyleEventDetail } from '../../interface';
 export declare class SkeletonText implements ComponentInterface {
   el: HTMLElement;
   /**
    * If `true`, the skeleton text will animate.
    */
   animated: boolean;
+  /**
+   * Emitted when the styles change.
+   * @internal
+   */
+  ionStyle: EventEmitter<StyleEventDetail>;
+  componentWillLoad(): void;
+  private emitStyle;
   render(): any;
 }

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

@@ -5,6 +5,8 @@ import type { TextareaChangeEventDetail, TextareaInputEventDetail } from './text
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot label - The label text to associate with the textarea. Use the `labelPlacement` property to control where the label is placed relative to the textarea. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)
+ * @slot start - Content to display at the leading edge of the textarea. (EXPERIMENTAL)
+ * @slot end - Content to display at the trailing edge of the textarea. (EXPERIMENTAL)
  */
 export declare class Textarea implements ComponentInterface {
   private nativeInput?;