@ionic/core 7.7.2-dev.11707932366.16baf005 → 7.7.2-dev.11707941206.120570b8

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

@@ -1,104 +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;
+    presented: boolean;
+    /** @internal */
+    overlayIndex: number;
+    /** @internal */
+    delegate?: FrameworkDelegate;
+    /** @internal */
+    hasController: boolean;
     /**
-     * @internal
+     * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
      */
-    ionInputModeChange: EventEmitter<PickerChangeEventDetail>;
+    keyboardClose: 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.
+     * Animation to use when the picker is presented.
      */
-    preventTouchStartPropagation(ev: TouchEvent): void;
-    componentWillLoad(): void;
-    private isInHighlightBounds;
+    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>;
     /**
-     * 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.
+     * Emitted after the picker has presented.
+     * Shorthand for ionPickerWillDismiss.
      */
-    private onFocusOut;
+    didPresentShorthand: EventEmitter<void>;
     /**
-     * When picker columns receive focus
-     * the parent picker needs to determine
-     * whether to enter/exit input mode.
+     * Emitted before the picker has presented.
+     * Shorthand for ionPickerWillPresent.
      */
-    private onFocusIn;
+    willPresentShorthand: EventEmitter<void>;
     /**
-     * On click we need to run an actionOnClick
-     * function that has been set in onPointerDown
-     * so that we enter/exit input mode correctly.
+     * Emitted before the picker has dismissed.
+     * Shorthand for ionPickerWillDismiss.
      */
-    private onClick;
+    willDismissShorthand: EventEmitter<OverlayEventDetail>;
     /**
-     * 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.
+     * Emitted after the picker has dismissed.
+     * Shorthand for ionPickerDidDismiss.
      */
-    private onPointerDown;
+    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,106 +1,46 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import type { Color } from '../../interface';
-import type { PickerColumnChangeEventDetail, PickerColumnValue } from './picker-column-interfaces';
+import type { PickerColumn } from '../picker/picker-interface';
 /**
- * @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.
+ * @internal
  */
-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;
-    /**
-     * 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<PickerColumnChangeEventDetail>;
-    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(smooth?: boolean): 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: PickerColumnValue): 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;
+    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-interfaces.d.ts

@@ -0,0 +1,5 @@
+export interface PickerColumnItem {
+    text: string;
+    value: string | number;
+    disabled?: boolean;
+}

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/radio.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import type { Color } from '../../interface';
+import type { Color, StyleEventDetail } from '../../interface';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
@@ -12,6 +12,9 @@ import type { Color } from '../../interface';
 export declare class Radio implements ComponentInterface {
     private inputId;
     private radioGroup;
+    private nativeInput;
+    private legacyFormController;
+    private hasLoggedDeprecationWarning;
     el: HTMLIonRadioElement;
     /**
      * If `true`, the radio is selected.
@@ -49,6 +52,16 @@ export declare class Radio implements ComponentInterface {
      * `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
      */
     labelPlacement: 'start' | 'end' | 'fixed' | 'stacked';
+    /**
+     * Set the `legacy` property to `true` to forcibly use the legacy form control markup.
+     * Ionic will only opt components in to the modern form markup when they are
+     * using either the `aria-label` attribute or the default slot that contains
+     * the label text. As a result, the `legacy` property should only be used as
+     * an escape hatch when you want to avoid this automatic opt-in behavior.
+     * Note that this property will be removed in an upcoming major release
+     * of Ionic, and all form components will be opted-in to using the modern form markup.
+     */
+    legacy?: boolean;
     /**
      * How to pack the label and radio within a line.
      * `"start"`: The label and radio will appear on the left in LTR and
@@ -65,6 +78,11 @@ export declare class Radio implements ComponentInterface {
      * `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
      */
     alignment: 'start' | 'center';
+    /**
+     * Emitted when the styles change.
+     * @internal
+     */
+    ionStyle: EventEmitter<StyleEventDetail>;
     /**
      * Emitted when the radio button has focus.
      */
@@ -79,6 +97,9 @@ export declare class Radio implements ComponentInterface {
     setButtonTabindex(value: number): Promise<void>;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    componentWillLoad(): void;
+    protected styleChanged(): void;
+    private emitStyle;
     private updateState;
     private onClick;
     private onFocus;
@@ -86,4 +107,6 @@ export declare class Radio implements ComponentInterface {
     private get hasLabel();
     private renderRadioControl;
     render(): any;
+    private renderRadio;
+    private renderLegacyRadio;
 }