@ionic/core 8.7.18 → 8.7.19-dev.11772655618.1af0949f

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

@@ -8,6 +8,7 @@ import type { DatetimePresentation, DatetimeChangeEventDetail, DatetimeParts, Ti
  * @slot buttons - The buttons in the datetime.
  * @slot time-label - The label for the time selector in the datetime.
  *
+ * @part wheel - The wheel container when using a wheel style layout, or in the month/year picker when using a grid style layout.
  * @part wheel-item - The individual items when using a wheel style layout, or in the
  * month/year picker when using a grid style layout.
  * @part wheel-item active - The currently selected wheel-item.
@@ -16,14 +17,23 @@ import type { DatetimePresentation, DatetimeChangeEventDetail, DatetimeParts, Ti
  * layout with `presentation="date-time"` or `"time-date"`.
  * @part time-button active - The time picker button when the picker is open.
  *
+ * @part calendar-header - The calendar header manages the date navigation controls (month/year picker and previous/next buttons) and the days of the week when using a grid style layout.
  * @part month-year-button - The button that opens the month/year picker when
  * using a grid style layout.
+ * @part navigation-button - The buttons used to navigate to the next or previous month when using a grid style layout.
+ * @part previous-button - The button used to navigate to the previous month when using a grid style layout.
+ * @part next-button - The button used to navigate to the next month when using a grid style layout.
+ * @part calendar-days-of-week - The container for the day-of-the-week header (both weekdays and weekends) when using a grid style layout.
  *
  * @part calendar-day - The individual buttons that display a day inside of the datetime
  * calendar.
  * @part calendar-day active - The currently selected calendar day.
  * @part calendar-day today - The calendar day that contains the current day.
  * @part calendar-day disabled - The calendar day that is disabled.
+ *
+ * @part datetime-header - The datetime header contains the content for the `title` slot and the selected date.
+ * @part datetime-title - The element that contains the `title` slot content.
+ * @part datetime-selected-date - The element that contains the selected date.
  */
 export declare class Datetime implements ComponentInterface {
     private inputId;

package/dist/types/components/header/header.utils.d.ts

@@ -18,7 +18,8 @@ export declare const setToolbarBackgroundOpacity: (headerEl: HTMLIonHeaderElemen
  * and show the primary toolbar content. If the toolbars are not intersecting,
  * hide the primary toolbar content and show the scrollable toolbar content
  */
-export declare const handleToolbarIntersection: (ev: any, mainHeaderIndex: HeaderIndex, scrollHeaderIndex: HeaderIndex, scrollEl: HTMLElement) => void;
+export declare const handleToolbarIntersection: (ev: any, // TODO(FW-2832): type (IntersectionObserverEntry[] triggers errors which should be sorted)
+mainHeaderIndex: HeaderIndex, scrollHeaderIndex: HeaderIndex, scrollEl: HTMLElement) => void;
 export declare const setHeaderActive: (headerIndex: HeaderIndex, active?: boolean) => void;
 export declare const scaleLargeTitles: (toolbars?: ToolbarIndex[], scale?: number, transition?: boolean) => void;
 export declare const handleHeaderFade: (scrollEl: HTMLElement, baseEl: HTMLElement, condenseHeader: HTMLElement | null) => void;

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

@@ -10,6 +10,8 @@ import type { RouterDirection } from '../router/utils/interface';
  * @slot end - Content is placed to the right of the item text in LTR, and to the left in RTL.
  *
  * @part native - The native HTML button, anchor or div element that wraps all child elements.
+ * @part inner - The inner wrapper element that arranges the item content.
+ * @part container - The wrapper element that contains the default slot.
  * @part detail-icon - The chevron icon for the item. Only applies when `detail="true"`.
  */
 export declare class Item implements ComponentInterface, AnchorInterface, ButtonInterface {

package/dist/types/components/item-divider/item-divider.d.ts

@@ -6,6 +6,9 @@ import type { Color } from '../../interface';
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot start - Content is placed to the left of the divider text in LTR, and to the right in RTL.
  * @slot end - Content is placed to the right of the divider text in LTR, and to the left in RTL.
+ *
+ * @part inner - The inner wrapper element that arranges the divider content.
+ * @part container - The wrapper element that contains the default slot.
  */
 export declare class ItemDivider implements ComponentInterface {
     el: HTMLElement;

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

@@ -12,6 +12,8 @@ import type { Color } from '../../interface';
  * @slot end - Content is placed to the right of the option text in LTR, and to the left in RTL.
  *
  * @part native - The native HTML button or anchor element that wraps all child elements.
+ * @part inner - The inner wrapper element that arranges the option content.
+ * @part container - The container element that wraps the start, icon-only, default, and end slots.
  */
 export declare class ItemOption implements ComponentInterface, AnchorInterface, ButtonInterface {
     el: HTMLElement;

package/dist/types/components/list-header/list-header.d.ts

@@ -2,6 +2,8 @@ import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { Color } from '../../interface';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @part inner - The inner wrapper element that arranges the list header content.
  */
 export declare class ListHeader implements ComponentInterface {
     /**

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

@@ -1,4 +1,4 @@
-import type { Animation } from '../../../interface';
+import type { Animation, ModalDragEventDetail } from '../../../interface';
 export interface MoveSheetToBreakpointOptions {
     /**
      * The breakpoint value to move the sheet to.
@@ -29,7 +29,7 @@ export interface MoveSheetToBreakpointOptions {
      */
     animated: boolean;
 }
-export declare const createSheetGesture: (baseEl: HTMLIonModalElement, backdropEl: HTMLIonBackdropElement, wrapperEl: HTMLElement, initialBreakpoint: number, backdropBreakpoint: number, animation: Animation, breakpoints: number[] | undefined, expandToScroll: boolean, getCurrentBreakpoint: () => number, onDismiss: () => void, onBreakpointChange: (breakpoint: number) => void) => {
+export declare const createSheetGesture: (baseEl: HTMLIonModalElement, backdropEl: HTMLIonBackdropElement, wrapperEl: HTMLElement, initialBreakpoint: number, backdropBreakpoint: number, animation: Animation, breakpoints: number[] | undefined, expandToScroll: boolean, getCurrentBreakpoint: () => number, onDismiss: () => void, onBreakpointChange: (breakpoint: number) => void, onDragStart: () => void, onDragMove: (detail: ModalDragEventDetail) => void, onDragEnd: (detail: ModalDragEventDetail) => void) => {
     gesture: import("@utils/gesture").Gesture;
     moveSheetToBreakpoint: (options: MoveSheetToBreakpointOptions) => Promise<void>;
 };

package/dist/types/components/modal/gestures/swipe-to-close.d.ts

@@ -1,6 +1,6 @@
-import type { Animation } from '../../../interface';
+import type { Animation, ModalDragEventDetail } from '../../../interface';
 import type { Style as StatusBarStyle } from '../../../utils/native/status-bar';
 export declare const SwipeToCloseDefaults: {
     MIN_PRESENTING_SCALE: number;
 };
-export declare const createSwipeToCloseGesture: (el: HTMLIonModalElement, animation: Animation, statusBarStyle: StatusBarStyle, onDismiss: () => void) => import("@utils/gesture").Gesture;
+export declare const createSwipeToCloseGesture: (el: HTMLIonModalElement, animation: Animation, statusBarStyle: StatusBarStyle, onDismiss: () => void, onDragStart: () => void, onDragMove: (detail: ModalDragEventDetail) => void, onDragEnd: (detail: ModalDragEventDetail) => void) => import("@utils/gesture").Gesture;

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

@@ -41,3 +41,28 @@ export interface ModalCustomEvent extends CustomEvent {
  * The behavior setting for modals when the handle is pressed.
  */
 export type ModalHandleBehavior = 'none' | 'cycle';
+export interface ModalDragEventDetail {
+    /**
+     * The current Y coordinate of the drag event.
+     */
+    currentY: number;
+    /**
+     * The change in Y coordinate since the last drag event.
+     */
+    deltaY: number;
+    /**
+     * The velocity of the drag event in the Y direction.
+     */
+    velocityY: number;
+    /**
+     * The progress of the drag event, represented as a value between 0 and 1.
+     * A value of 0 means the modal is at its lowest point (fully closed),
+     * while a value of 1 means the modal is at its highest point (fully open).
+     */
+    progress: number;
+    /**
+     * The breakpoint that the sheet will snap to if the user releases
+     * the gesture.
+     */
+    snapBreakpoint?: number;
+}

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

@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import type { Animation, AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, OverlayInterface } from '../../interface';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
-import type { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from './modal-interface';
+import type { ModalBreakpointChangeEventDetail, ModalHandleBehavior, ModalDragEventDetail } from './modal-interface';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
@@ -18,6 +18,11 @@ export declare class Modal implements ComponentInterface, OverlayInterface {
     private coreDelegate;
     private sheetTransition?;
     private isSheetModal;
+    /**
+     * The breakpoint value that has been committed for a sheet modal.
+     * This represents the modal's resting state when it is not being dragged
+     * or animating toward a new position.
+     */
     private currentBreakpoint?;
     private wrapperEl?;
     private backdropEl?;
@@ -263,6 +268,18 @@ export declare class Modal implements ComponentInterface, OverlayInterface {
      * @internal
      */
     ionMount: EventEmitter<void>;
+    /**
+     * Event that is emitted when the sheet modal or card modal gesture starts.
+     */
+    ionDragStart: EventEmitter<void>;
+    /**
+     * Event that is emitted when the sheet modal or card modal gesture moves.
+     */
+    ionDragMove: EventEmitter<ModalDragEventDetail>;
+    /**
+     * Event that is emitted when the sheet modal or card modal gesture ends.
+     */
+    ionDragEnd: EventEmitter<ModalDragEventDetail>;
     breakpointsChanged(breakpoints: number[] | undefined): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -304,6 +321,7 @@ export declare class Modal implements ComponentInterface, OverlayInterface {
      */
     private cleanupChildRoutePassthrough;
     private sheetOnDismiss;
+    private cardOnDismiss;
     /**
      * Dismiss the modal overlay after it has been presented.
      * This is a no-op if the overlay has not been presented yet. If you want
@@ -359,6 +377,9 @@ export declare class Modal implements ComponentInterface, OverlayInterface {
     private dismissNestedModals;
     private initParentRemovalObserver;
     private cleanupParentRemovalObserver;
+    private onDragStart;
+    private onDragMove;
+    private onDragEnd;
     /**
      * Creates the context object for safe-area utilities.
      */

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

@@ -1,4 +1,5 @@
 export type KnobName = 'A' | 'B' | undefined;
+export type KnobPosition = 'lower' | 'upper' | undefined;
 export type RangeValue = number | {
     lower: number;
     upper: number;

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

@@ -8,13 +8,30 @@ import type { RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMove
  * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.
  * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.
  *
+ * @part label - The label text describing the range.
  * @part tick - An inactive tick mark.
  * @part tick-active - An active tick mark.
- * @part pin - The counter that appears above a knob.
- * @part knob - The handle that is used to drag the range.
  * @part bar - The inactive part of the bar.
  * @part bar-active - The active part of the bar.
- * @part label - The label text describing the range.
+ * @part knob-handle - The container that wraps the knob and handles drag interactions.
+ * @part knob-handle-a - The container for the knob with the static `A` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
+ * @part knob-handle-b - The container for the knob with the static `B` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
+ * @part knob-handle-lower - The container for the knob whose current `value` is `lower` when `dualKnobs` is `true`. The lower and upper parts swap which knob handle they refer to when the knobs cross.
+ * @part knob-handle-upper - The container for the knob whose current `value` is `upper` when `dualKnobs` is `true`. The lower and upper parts swap which knob handle they refer to when the knobs cross.
+ * @part pin - The value indicator displayed above a knob.
+ * @part pin-a - The value indicator above the knob with the static `A` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
+ * @part pin-b - The value indicator above the knob with the static `B` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
+ * @part pin-lower - The value indicator above the knob whose current `value` is `lower` when `dualKnobs` is `true`. The lower and upper parts swap which pin they refer to when the knobs cross.
+ * @part pin-upper - The value indicator above the knob whose current `value` is `upper` when `dualKnobs` is `true`. The lower and upper parts swap which pin they refer to when the knobs cross.
+ * @part knob - The visual knob element on the range track.
+ * @part knob-a - The visual knob for the static `A` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
+ * @part knob-b - The visual knob for the static `B` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
+ * @part knob-lower - The visual knob whose current `value` is `lower` when `dualKnobs` is `true`. The lower and upper parts swap which knob they refer to when the knobs cross.
+ * @part knob-upper - The visual knob whose current `value` is `upper` when `dualKnobs` is `true`. The lower and upper parts swap which knob they refer to when the knobs cross.
+ * @part activated - Added to the knob-handle, knob, and pin when the knob is active. Only one set has this part at a time when `dualKnobs` is `true`.
+ * @part focused - Added to the knob-handle, knob, and pin that currently has focus. Only one set has this part at a time when `dualKnobs` is `true`.
+ * @part hover - Added to the knob-handle, knob, and pin when the knob has hover. Only one set has this part at a time when `dualKnobs` is `true`.
+ * @part pressed - Added to the knob-handle, knob, and pin that is currently being pressed to drag. Only one set has this part at a time when `dualKnobs` is `true`.
  */
 export declare class Range implements ComponentInterface {
     private rangeId;
@@ -28,9 +45,25 @@ export declare class Range implements ComponentInterface {
     private contentEl;
     private initialContentScrollY;
     private originalIonInput?;
+    /**
+     * Used to avoid setting the focused state on click or tap. The focused
+     * state is only set when the focus comes from the keyboard (e.g. Tab).
+     * This is set to true on pointer down (mouse/touch).
+     */
+    private focusFromPointer;
+    /**
+     * Observes class changes on the knob handles to keep the activatedKnob
+     * state in sync with the ion-activated class. This is necessary to
+     * determine which knob the user is dragging when using dual knobs and
+     * apply the activated part correctly.
+     */
+    private activatedObserver?;
     el: HTMLIonRangeElement;
     private ratioA;
     private ratioB;
+    private activatedKnob;
+    private focusedKnob;
+    private hoveredKnob;
     private pressedKnob;
     /**
      * The color to use from your application's color palette.
@@ -164,6 +197,12 @@ export declare class Range implements ComponentInterface {
      */
     ionKnobMoveEnd: EventEmitter<RangeKnobMoveEndEventDetail>;
     private setupGesture;
+    /**
+     * Observes the knob handles for the ion-activated class and syncs
+     * activatedKnob so the activated part is correctly set on the handle,
+     * knob, and pin.
+     */
+    private setupActivatedObserver;
     componentWillLoad(): void;
     componentDidLoad(): void;
     connectedCallback(): void;
@@ -216,11 +255,12 @@ export declare class Range implements ComponentInterface {
     private get ratioUpper();
     private updateRatio;
     private updateValue;
-    private setFocus;
     private onBlur;
     private onFocus;
     private onKnobFocus;
     private onKnobBlur;
+    private onKnobMouseEnter;
+    private onKnobMouseLeave;
     /**
      * Returns true if content was passed to the "start" slot
      */

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

@@ -1,7 +1,14 @@
 export interface RefresherEventDetail {
     complete(): void;
 }
+export interface RefresherPullEndEventDetail {
+    reason: 'complete' | 'cancel';
+}
 export interface RefresherCustomEvent extends CustomEvent {
     detail: RefresherEventDetail;
     target: HTMLIonRefresherElement;
 }
+export interface RefresherPullEndCustomEvent extends CustomEvent {
+    detail: RefresherPullEndEventDetail;
+    target: HTMLIonRefresherElement;
+}

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

@@ -1,5 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import type { RefresherEventDetail } from './refresher-interface';
+import type { RefresherEventDetail, RefresherPullEndEventDetail } from './refresher-interface';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
@@ -65,8 +65,8 @@ export declare class Refresher implements ComponentInterface {
      * than `1`. The default value is `1` which is equal to the speed of the cursor.
      * If a negative value is passed in, the factor will be `1` instead.
      *
-     * For example: If the value passed is `1.2` and the content is dragged by
-     * `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels
+     * For example, If the value passed is `1.2` and the content is dragged by
+     * `10` pixels, instead of `10` pixels, the content will be pulled by `12` pixels
      * (an increase of 20 percent). If the value passed is `0.8`, the dragged amount
      * will be `8` pixels, less than the amount the cursor has moved.
      *
@@ -92,8 +92,21 @@ export declare class Refresher implements ComponentInterface {
     ionPull: EventEmitter<void>;
     /**
      * Emitted when the user begins to start pulling down.
+     * TODO(FW-7044): Remove this in a major release
+     *
+     * @deprecated Use `ionPullStart` instead.
      */
     ionStart: EventEmitter<void>;
+    /**
+     * Emitted when the user begins to start pulling down.
+     */
+    ionPullStart: EventEmitter<void>;
+    /**
+     * Emitted when the refresher has returned to the inactive state
+     * after a pull gesture. This fires whether the refresh completed
+     * successfully or was canceled.
+     */
+    ionPullEnd: EventEmitter<RefresherPullEndEventDetail>;
     private checkNativeRefresher;
     private destroyNativeRefresher;
     private resetNativeRefresher;

package/dist/types/components/segment-view/segment-view.d.ts

@@ -8,6 +8,10 @@ export declare class SegmentView implements ComponentInterface {
      * If `true`, the segment view cannot be interacted with.
      */
     disabled: boolean;
+    /**
+     * If `true`, users will be able to swipe the segment view to navigate between segment contents.
+     */
+    swipeGesture: boolean;
     /**
      * @internal
      *

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

@@ -16,6 +16,9 @@ import type { SelectChangeEventDetail, SelectInterface, SelectCompareFn } from '
  * @part supporting-text - Supporting text displayed beneath the select.
  * @part helper-text - Supporting text displayed beneath the select when the select is valid.
  * @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 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;

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

@@ -3,6 +3,10 @@ import type { SelectModalOption } from './select-modal-interface';
 export declare class SelectModal implements ComponentInterface {
     el: HTMLIonSelectModalElement;
     header?: string;
+    /**
+     * The text to display on the cancel button.
+     */
+    cancelText: string;
     multiple?: boolean;
     options: SelectModalOption[];
     private closeModal;