@ionic/core 8.8.19-dev.11787076261.138d5922 → 8.8.19-dev.11787084784.17cf25cf

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

@@ -114,18 +114,11 @@ export declare class Modal implements ComponentInterface, OverlayInterface {
     /**
      * The interaction behavior for the sheet modal when the handle is pressed.
      *
-     * Handle behavior is unavailable when the `handle` property is set to
-     * `false` or when the `breakpoints` property is not set (using a
-     * fullscreen or card modal).
+     * Defaults to `"none"`, which  means the modal will not change size or position when the handle is pressed.
+     * Set to `"cycle"` to let the modal cycle between available breakpoints when pressed.
      *
-     * Set to `"cycle"` to make the handle focusable and let the sheet modal
-     * cycle between available breakpoints when pressed. This keeps the sheet
-     * operable with assistive technology.
-     *
-     * Set to `"none"` to make the handle purely decorative when pressed and
-     * removed from the tab order.
-     *
-     * Defaults to `"cycle"`.
+     * Handle behavior is unavailable when the `handle` property is set to `false` or
+     * when the `breakpoints` property is not set (using a fullscreen or card modal).
      */
     handleBehavior?: ModalHandleBehavior;
     /**

package/dist/types/components/nav/nav-interface.d.ts

@@ -33,6 +33,7 @@ export interface RouterOutletOptions {
 }
 export interface NavOptions extends RouterOutletOptions {
     progressAnimation?: boolean;
+    updateURL?: boolean;
     delegate?: FrameworkDelegate;
     viewIsReady?: (enteringEl: HTMLElement) => Promise<any>;
 }

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

@@ -1,11 +1,13 @@
-import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import type { EventEmitter } from '../../stencil-public-runtime';
 import type { AnimationBuilder, ComponentProps, FrameworkDelegate } from '../../interface';
+import type { NavOutlet, RouteID, RouteWrite, RouterDirection } from '../router/utils/interface';
 import type { NavComponent, NavComponentWithProps, NavOptions, TransitionDoneFn } from './nav-interface';
 import type { ViewController } from './view-controller';
-export declare class Nav implements ComponentInterface {
+export declare class Nav implements NavOutlet {
     private transInstr;
     private sbAni?;
     private gestureOrAnimationInProgress;
+    private useRouter;
     private isTransitioning;
     private destroyed;
     private views;
@@ -139,6 +141,24 @@ export declare class Nav implements ComponentInterface {
      * @param done The transition complete function.
      */
     setPages(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn): Promise<boolean>;
+    /**
+     * Called by the router to update the view.
+     *
+     * @param id The component tag.
+     * @param params The component params.
+     * @param direction A direction hint.
+     * @param animation an AnimationBuilder.
+     *
+     * @return the status.
+     * @internal
+     */
+    setRouteId(id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder): Promise<RouteWrite>;
+    /**
+     * Called by <ion-router> to retrieve the current component.
+     *
+     * @internal
+     */
+    getRouteId(): Promise<RouteID | undefined>;
     /**
      * Get the active view.
      */

package/dist/types/components/picker-legacy/animations/ios.enter.d.ts

@@ -0,0 +1,5 @@
+import type { Animation } from '../../../interface';
+/**
+ * iOS Picker Enter Animation
+ */
+export declare const iosEnterAnimation: (baseEl: HTMLElement) => Animation;

package/dist/types/components/picker-legacy/animations/ios.leave.d.ts

@@ -0,0 +1,5 @@
+import type { Animation } from '../../../interface';
+/**
+ * iOS Picker Leave Animation
+ */
+export declare const iosLeaveAnimation: (baseEl: HTMLElement) => Animation;

package/dist/types/components/picker-legacy/picker-interface.d.ts

@@ -0,0 +1,52 @@
+import type { AnimationBuilder, Mode } from '../../interface';
+export interface PickerOptions {
+    columns: PickerColumn[];
+    buttons?: PickerButton[];
+    cssClass?: string | string[];
+    showBackdrop?: boolean;
+    backdropDismiss?: boolean;
+    animated?: boolean;
+    mode?: Mode;
+    keyboardClose?: boolean;
+    id?: string;
+    htmlAttributes?: {
+        [key: string]: any;
+    };
+    enterAnimation?: AnimationBuilder;
+    leaveAnimation?: AnimationBuilder;
+}
+export interface PickerButton {
+    text?: string;
+    role?: string;
+    cssClass?: string | string[];
+    handler?: (value: any) => boolean | void;
+}
+export interface PickerColumn {
+    name: string;
+    align?: string;
+    /**
+     * Changing this value allows the initial value of a picker column to be set.
+     */
+    selectedIndex?: number;
+    prevSelected?: number;
+    prefix?: string;
+    suffix?: string;
+    options: PickerColumnOption[];
+    cssClass?: string | string[];
+    columnWidth?: string;
+    prefixWidth?: string;
+    suffixWidth?: string;
+    optionsWidth?: string;
+}
+export interface PickerColumnOption {
+    text?: string;
+    value?: any;
+    disabled?: boolean;
+    duration?: number;
+    transform?: string;
+    selected?: boolean;
+    /**
+     * The optional text to assign as the aria-label on the picker column option.
+     */
+    ariaLabel?: string;
+}

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

@@ -0,0 +1,158 @@
+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';
+/**
+ * @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;
+    el: HTMLIonPickerLegacyElement;
+    presented: boolean;
+    /** @internal */
+    overlayIndex: number;
+    /** @internal */
+    delegate?: FrameworkDelegate;
+    /** @internal */
+    hasController: boolean;
+    /**
+     * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+     */
+    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>;
+    /**
+     * 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;
+    /**
+     * Present the picker overlay after it has been created.
+     */
+    present(): Promise<void>;
+    /**
+     * 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"`.
+     */
+    dismiss(data?: any, role?: string): Promise<boolean>;
+    /**
+     * Returns a promise that resolves when the picker did dismiss.
+     */
+    onDidDismiss<T = any>(): Promise<OverlayEventDetail<T>>;
+    /**
+     * Returns a promise that resolves when the picker will dismiss.
+     */
+    onWillDismiss<T = any>(): Promise<OverlayEventDetail<T>>;
+    /**
+     * Get the column that matches the specified name.
+     *
+     * @param name The name of the column.
+     */
+    getColumn(name: string): Promise<PickerColumn | undefined>;
+    private buttonClick;
+    private callButtonHandler;
+    private getSelected;
+    private onBackdropTap;
+    private dispatchCancelHandler;
+    render(): any;
+}

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

@@ -0,0 +1,46 @@
+import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import type { PickerColumn } from '../picker-legacy/picker-interface';
+/**
+ * @internal
+ */
+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
+     */
+    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-legacy-column/test/test.utils.d.ts

@@ -0,0 +1,9 @@
+import type { E2EPage, ScreenshotFn } from "../../../utils/test/playwright/index";
+/**
+ * Visual regression tests for picker-column.
+ * @param page - The page to run the tests on.
+ * @param screenshot - The screenshot function to generate unique screenshot names
+ * @param buttonSelector - The selector for the button that opens the picker.
+ * @param description - The description to amend to the screenshot names (typically 'single' or 'multiple').
+ */
+export declare function testPickerColumn(page: E2EPage, screenshot: ScreenshotFn, buttonSelector: string, description: string): Promise<void>;

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

@@ -91,6 +91,7 @@ export declare class Range implements ComponentInterface {
      * Show two knobs.
      */
     dualKnobs: boolean;
+    protected dualKnobsChanged(): void;
     /**
      * Minimum integer value of the range.
      */

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

@@ -9,7 +9,7 @@ export declare class Route implements ComponentInterface {
      */
     url: string;
     /**
-     * Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-router-outlet`)
+     * Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`)
      * when the route matches.
      *
      * The value of this property is not always the tagname of the component to load,

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

@@ -23,12 +23,6 @@ export declare class RouterOutlet implements ComponentInterface, NavOutlet {
     animated: boolean;
     /** This property allows to create custom transition using AnimationBuilder functions. */
     animation?: AnimationBuilder;
-    /**
-     * If `true`, the router-outlet should allow navigation via swipe-to-go-back gesture.
-     * Defaults to `true` for `"ios"` mode and `false` for `"md"` mode.
-     */
-    swipeGesture?: boolean;
-    swipeGestureChanged(): void;
     /** @internal */
     swipeHandler?: SwipeGestureHandler;
     swipeHandlerChanged(): void;
@@ -40,7 +34,6 @@ export declare class RouterOutlet implements ComponentInterface, NavOutlet {
     ionNavDidChange: EventEmitter<void>;
     connectedCallback(): Promise<void>;
     componentWillLoad(): void;
-    private updateGestureEnabled;
     disconnectedCallback(): void;
     /** @internal */
     commit(enteringEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: RouterOutletOptions): Promise<boolean>;

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

@@ -52,7 +52,7 @@ export declare class Searchbar implements ComponentInterface {
     /**
      * Set the input's autocorrect property.
      */
-    autocorrect: boolean;
+    autocorrect: 'on' | 'off';
     /**
      * Set the cancel button icon. Only applies to `md` mode.
      * Defaults to `arrow-back-sharp`.

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

@@ -1,6 +1,3 @@
-import type { ActionSheetButton } from '../action-sheet/action-sheet-interface';
-import type { AlertInput } from '../alert/alert-interface';
-import type { SelectPopoverOption } from '../select-popover/select-popover-interface';
 export type SelectInterface = 'action-sheet' | 'popover' | 'alert' | 'modal';
 export type SelectCompareFn = (currentValue: any, compareValue: any) => boolean;
 export interface SelectChangeEventDetail<T = any> {
@@ -10,31 +7,3 @@ export interface SelectCustomEvent<T = any> extends CustomEvent {
     detail: SelectChangeEventDetail<T>;
     target: HTMLIonSelectElement;
 }
-export interface SelectActionSheetButton extends Omit<ActionSheetButton, 'text'>, RichContentOption {
-    /** The main text for the option as a string or an HTMLElement. */
-    text?: string | HTMLElement;
-}
-export interface SelectAlertInput extends Omit<AlertInput, 'label'>, RichContentOption {
-    /** The main label for the option as a string or an HTMLElement. */
-    label?: string | HTMLElement;
-    /** Where the label sits relative to the option's selection control. */
-    labelPlacement?: 'start' | 'end';
-    /** How to pack the label and the option's selection control within a line. */
-    justify?: 'start' | 'end' | 'space-between';
-}
-export interface SelectOverlayOption extends Omit<SelectPopoverOption, 'text'>, RichContentOption {
-    /** The main text for the option as a string or an HTMLElement. */
-    text?: string | HTMLElement;
-    /** Where the label sits relative to the option's selection control. */
-    labelPlacement?: 'start' | 'end';
-    /** How to pack the label and the option's selection control within a line. */
-    justify?: 'start' | 'end' | 'space-between';
-}
-export interface RichContentOption {
-    /** Content to display at the start of the option. */
-    startContent?: HTMLElement;
-    /** Content to display at the end of the option. */
-    endContent?: HTMLElement;
-    /** A description for the option. */
-    description?: string;
-}

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

@@ -18,9 +18,7 @@ import type { SelectChangeEventDetail, SelectInterface, SelectCompareFn } from '
  * @part error-text - Supporting text displayed beneath the select when the select is invalid and touched.
  * @part bottom - The container element for helper text, error text, and counter.
  * @part wrapper - The clickable label element that wraps the entire form field (label text, slots, selected values or placeholder, and toggle icons).
- * @part start - The wrapper element for the content in the start slot.
- * @part control - The wrapper element containing the label and native select control. When the label is not floating or stacked, this part also contains the dropdown icon.
- * @part end - The wrapper element for the content in the end slot. When the label is floating or stacked, this part also contains the dropdown icon.
+ * @part inner - The inner element of the wrapper that manages the slots, selected values or placeholder, and toggle icons.
  */
 export declare class Select implements ComponentInterface {
     private inputId;
@@ -30,14 +28,10 @@ export declare class Select implements ComponentInterface {
     private focusEl?;
     private mutationO?;
     private inheritedAttributes;
-    private slotMutationController?;
     private nativeWrapperEl;
     private notchSpacerEl;
     private validationObserver?;
     private notchController?;
-    private startContainerController?;
-    private startContainerEl;
-    private customHTMLEnabled;
     el: HTMLIonSelectElement;
     isExpanded: boolean;
     /**
@@ -209,7 +203,6 @@ export declare class Select implements ComponentInterface {
     ionStyle: EventEmitter<StyleEventDetail>;
     protected styleChanged(): void;
     private setValue;
-    private isValueEqual;
     connectedCallback(): Promise<void>;
     componentWillLoad(): void;
     componentDidLoad(): void;
@@ -245,12 +238,6 @@ export declare class Select implements ComponentInterface {
      * was passed.
      */
     private get labelText();
-    /**
-     * Returns the text to display in the select based on the selected value.
-     *
-     * @param useHTML If `true`, the returned text will include any custom HTML content from the selected option. If `false`, the returned text will be plain text without any HTML. Defaults to `false`.
-     * @returns The text to display in the select, either with or without HTML based on the `useHTML` parameter.
-     */
     private getText;
     private setFocus;
     private emitStyle;
@@ -272,26 +259,15 @@ export declare class Select implements ComponentInterface {
      */
     private get hasLabel();
     /**
-     * Stops propagation for re-dispatched clicks (when already expanded) to
-     * prevent double-click events. Allows initial button clicks (from keyboard
-     * or mouse) and slotted content clicks to propagate so event delegation
-     * works for parent handlers.
+     * Stops propagation when the label is clicked,
+     * otherwise, two clicks will be triggered.
      */
     private onLabelClick;
     /**
-     * Renders the outline border with a notch for the label.
-     */
-    private renderOutlineContainer;
-    /**
-     * Wraps text nodes in the select text with span elements
-     * so spacing can be added between elements without
-     * changing the display to prevent losing the ellipses
-     * behavior.
-     *
-     * Only wraps when the string contains HTML elements
-     * alongside text.
+     * Renders the border container
+     * when fill="outline".
      */
-    private wrapSelectTextNodes;
+    private renderLabelContainer;
     /**
      * Renders either the placeholder
      * or the selected values based on

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

@@ -1,55 +1,14 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- *
- * @slot - Content is placed between the named slots if provided without a slot.
- * @slot start - Content is placed to the left of the select option text in LTR, and to the right in RTL.
- * @slot end - Content is placed to the right of the select option text in LTR, and to the left in RTL.
- */
 export declare class SelectOption implements ComponentInterface {
     private inputId;
     el: HTMLElement;
     /**
-     * If `true`, the user cannot interact with the select option.
+     * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
      */
     disabled: boolean;
     /**
      * The text value of the option.
      */
     value?: any | null;
-    /**
-     * Text that is placed underneath the option text to provide additional details about the option.
-     */
-    description?: string;
-    /**
-     * Where the label is placed relative to the option's selection control
-     * (radio circle or checkbox box) when the option is rendered in an
-     * `alert`, `popover`, or `modal` interface.
-     * `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL.
-     * `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL.
-     *
-     * Applies to the `alert`, `popover`, and `modal` interfaces, but has no
-     * visible effect on radio options in `popover` or `modal` on `md` (the radio control is hidden there).
-     *
-     * When unset, the interface picks a default based on mode and control
-     * type.
-     */
-    labelPlacement?: 'start' | 'end';
-    /**
-     * How to pack the label and the option's selection control within a line.
-     * `"start"`: The label and radio will appear on the left in LTR and
-     * on the right in RTL.
-     * `"end"`: The label and radio will appear on the right in LTR and
-     * on the left in RTL.
-     * `"space-between"`: The label and radio will appear on opposite
-     * ends of the line with space between the two elements.
-     *
-     * Applies to the `alert`, `popover`, and `modal` interfaces, but has no
-     * visible effect on radio options in `popover` or `modal` on `md` (the radio control is hidden there).
-     *
-     * When unset, the interface picks a default based on mode and control
-     * type.
-     */
-    justify?: 'start' | 'end' | 'space-between';
     render(): any;
 }

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

@@ -23,11 +23,9 @@ export declare class Textarea implements ComponentInterface {
     private textareaWrapper?;
     private inheritedAttributes;
     private originalIonInput?;
+    private notchSpacerEl;
     private slotMutationController?;
     private notchController?;
-    private notchSpacerEl;
-    private startContainerController?;
-    private startContainerEl;
     /**
      * The value of the textarea when the textarea is focused.
      */
@@ -280,19 +278,14 @@ export declare class Textarea implements ComponentInterface {
      */
     private get hasLabel();
     /**
-     * Stops propagation for clicks on the textarea's own content (label text,
-     * textarea field) to prevent double-click events. Allows clicks on slotted
-     * content to propagate so event delegation works for parent handlers.
-     *
-     * Only slots belonging directly to this textarea should be considered.
-     * The textarea itself may have a slot attribute when placed in an item
-     * or toolbar, which does not make its content slotted content.
+     * Stops propagation when the label is clicked,
+     * otherwise, two clicks will be triggered.
      */
     private onLabelClick;
     /**
-     * Renders the outline border with a notch for the label.
+     * Renders the border container when fill="outline".
      */
-    private renderOutlineContainer;
+    private renderLabelContainer;
     /**
      * Renders the helper text or error text values
      */