voyager-ionic-core 7.7.2 → 7.8.6

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

@@ -1,6 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import type { Color, StyleEventDetail } from '../../interface';
-import type { DatetimePresentation, DatetimeChangeEventDetail, DatetimeParts, TitleSelectedDatesFormatter, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle } from './datetime-interface';
+import type { DatetimePresentation, DatetimeChangeEventDetail, DatetimeParts, TitleSelectedDatesFormatter, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, FormatOptions } from './datetime-interface';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
@@ -30,6 +30,7 @@ export declare class Datetime implements ComponentInterface {
     private calendarBodyRef?;
     private monthYearToggleItemRef?;
     private popoverRef?;
+    private intersectionTrackerRef?;
     private clearFocusVisible?;
     private parsedMinuteValues?;
     private parsedHourValues?;
@@ -73,6 +74,13 @@ export declare class Datetime implements ComponentInterface {
      * If `true`, the user cannot interact with the datetime.
      */
     disabled: boolean;
+    /**
+     * Formatting options for dates and times.
+     * Should include a 'date' and/or 'time' object, each of which is of type [Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options).
+     *
+     */
+    formatOptions?: FormatOptions;
+    protected formatOptionsChanged(): void;
     /**
      * If `true`, the datetime appears normal but the selected date cannot be changed.
      */
@@ -120,6 +128,7 @@ export declare class Datetime implements ComponentInterface {
      * `"time-date"` will show the time picker first and date picker second.
      */
     presentation: DatetimePresentation;
+    protected presentationChanged(): void;
     private get isGridStyle();
     /**
      * The text to display on the picker's cancel button.

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

@@ -1,5 +1,11 @@
 import type { DatetimeParts, DatetimeHourCycle } from '../datetime-interface';
-export declare const getLocalizedTime: (locale: string, refParts: DatetimeParts, hourCycle: DatetimeHourCycle) => string;
+/**
+ * Including time zone options may lead to the rendered text showing a
+ * different time from what was selected in the Datetime, which could cause
+ * confusion.
+ */
+export declare const stripTimeZone: (formatOptions: Intl.DateTimeFormatOptions) => Intl.DateTimeFormatOptions;
+export declare const getLocalizedTime: (locale: string, refParts: DatetimeParts, hourCycle: DatetimeHourCycle, formatOptions?: Intl.DateTimeFormatOptions) => string;
 /**
  * Adds padding to a time value so
  * that it is always 2 digits.
@@ -18,11 +24,6 @@ export declare const getFormattedHour: (hour: number, hourCycle: DatetimeHourCyc
  * today's date.
  */
 export declare const generateDayAriaLabel: (locale: string, today: boolean, refParts: DatetimeParts) => string | null;
-/**
- * Gets the day of the week, month, and day
- * Used for the header in MD mode.
- */
-export declare const getMonthAndDay: (locale: string, refParts: DatetimeParts) => string;
 /**
  * Given a locale and a date object,
  * return a formatted string that includes
@@ -30,13 +31,6 @@ export declare const getMonthAndDay: (locale: string, refParts: DatetimeParts) =
  * Example: May 2021
  */
 export declare const getMonthAndYear: (locale: string, refParts: DatetimeParts) => string;
-/**
- * Given a locale and a date object,
- * return a formatted string that includes
- * the short month, numeric day, and full year.
- * Example: Apr 22, 2021
- */
-export declare const getMonthDayAndYear: (locale: string, refParts: DatetimeParts) => string;
 /**
  * Given a locale and a date object,
  * return a formatted string that includes

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

@@ -107,31 +107,31 @@ export declare const getClosestValidDate: ({ refParts, monthValues, dayValues, y
     /**
      * The allowed month values
      */
-    monthValues?: number[] | undefined;
+    monthValues?: number[];
     /**
      * The allowed day (of the month) values
      */
-    dayValues?: number[] | undefined;
+    dayValues?: number[];
     /**
      * The allowed year values
      */
-    yearValues?: number[] | undefined;
+    yearValues?: number[];
     /**
      * The allowed hour values
      */
-    hourValues?: number[] | undefined;
+    hourValues?: number[];
     /**
      * The allowed minute values
      */
-    minuteValues?: number[] | undefined;
+    minuteValues?: number[];
     /**
      * The minimum date that can be returned
      */
-    minParts?: DatetimeParts | undefined;
+    minParts?: DatetimeParts;
     /**
      * The maximum date that can be returned
      */
-    maxParts?: DatetimeParts | undefined;
+    maxParts?: DatetimeParts;
 }) => {
     dayOfWeek: undefined;
     month: number;

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

@@ -23,8 +23,8 @@ export declare const getCalendarDayState: (locale: string, refParts: DatetimePar
  * current date value and min/max date constraints.
  */
 export declare const isMonthDisabled: (refParts: DatetimeParts, { minParts, maxParts, }: {
-    minParts?: DatetimeParts | undefined;
-    maxParts?: DatetimeParts | undefined;
+    minParts?: DatetimeParts;
+    maxParts?: DatetimeParts;
 }) => boolean;
 /**
  * Given a working date, an optional minimum date range,

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

@@ -0,0 +1,8 @@
+import type { DatetimePresentation, FormatOptions } from '../datetime-interface';
+/**
+ * If a time zone is provided in the format options, the rendered text could
+ * differ from what was selected in the Datetime, which could cause
+ * confusion.
+ */
+export declare const warnIfTimeZoneProvided: (el: HTMLElement, formatOptions?: FormatOptions) => void;
+export declare const checkForPresentationFormatMismatch: (el: HTMLElement, presentation: DatetimePresentation, formatOptions?: FormatOptions) => void;

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

@@ -1 +1 @@
-export declare const getCounterText: (value: string | number | null | undefined, maxLength: number, counterFormatter?: ((inputLength: number, maxLength: number) => string) | undefined) => string;
+export declare const getCounterText: (value: string | number | null | undefined, maxLength: number, counterFormatter?: (inputLength: number, maxLength: number) => string) => string;

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

@@ -186,10 +186,39 @@ export declare class Range implements ComponentInterface {
      * This API should not be used for external value changes.
      */
     private emitValueChange;
+    /**
+     * The value should be updated on touch end or
+     * when the component is being dragged.
+     * This follows the native behavior of mobile devices.
+     *
+     * For example: When the user lifts their finger from the
+     * screen after tapping the bar or dragging the bar or knob.
+     */
     private onStart;
+    /**
+     * The value should be updated while dragging the
+     * bar or knob.
+     *
+     * While the user is dragging, the view
+     * should not scroll. This is to prevent the user from
+     * feeling disoriented while dragging.
+     *
+     * The user can scroll on the view if the knob or
+     * bar is not being dragged.
+     *
+     * @param detail The details of the gesture event.
+     */
     private onMove;
+    /**
+     * The value should be updated on touch end:
+     * - When the user lifts their finger from the screen after
+     * tapping the bar.
+     *
+     * @param detail The details of the gesture or mouse event.
+     */
     private onEnd;
     private update;
+    private setPressedKnob;
     private get valA();
     private get valB();
     private get ratioLower();

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

@@ -10,6 +10,7 @@ export declare class Searchbar implements ComponentInterface {
     private shouldAlignLeft;
     private originalIonInput?;
     private inputId;
+    private inheritedAttributes;
     /**
      * The value of the input when the textarea is focused.
      */
@@ -17,6 +18,15 @@ export declare class Searchbar implements ComponentInterface {
     el: HTMLIonSearchbarElement;
     focused: boolean;
     noAnimate: boolean;
+    /**
+     * lang and dir are globally enumerated attributes.
+     * As a result, creating these as properties
+     * can have unintended side effects. Instead, we
+     * listen for attribute changes and inherit them
+     * to the inner `<input>` element.
+     */
+    onLangChanged(newValue: string): void;
+    onDirChanged(newValue: string): void;
     /**
      * The color to use from your application's color palette.
      * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -27,6 +37,24 @@ export declare class Searchbar implements ComponentInterface {
      * If `true`, enable searchbar animation.
      */
     animated: boolean;
+    /**
+     * Prior to the addition of this property
+     * autocapitalize was enabled by default on iOS
+     * and disabled by default on Android
+     * for Searchbar. The autocapitalize type on HTMLElement
+     * requires that it be a string and never undefined.
+     * However, setting it to one of the accepted values would be a breaking change
+     * in behavior, so we use the internal "default" keyword to ensure
+     * we use the default browser behavior for now.
+     *
+     * In the future, this property will default to "off" to align with
+     * Input and Textarea, and the internal "default" keyword will not be needed.
+     */
+    /**
+     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
+     * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+     */
+    autocapitalize: string;
     /**
      * Set the input's autocomplete property.
      */
@@ -69,6 +97,14 @@ export declare class Searchbar implements ComponentInterface {
      * `"previous"`, `"search"`, and `"send"`.
      */
     enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+    /**
+     * This attribute specifies the maximum number of characters that the user can enter.
+     */
+    maxlength?: number;
+    /**
+     * This attribute specifies the minimum number of characters that the user can enter.
+     */
+    minlength?: number;
     /**
      * If used in a form, set the name of the control, which is submitted with the form data.
      */
@@ -156,6 +192,7 @@ export declare class Searchbar implements ComponentInterface {
     protected valueChanged(): void;
     protected showCancelButtonChanged(): void;
     connectedCallback(): void;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     private emitStyle;
     /**

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

@@ -82,7 +82,7 @@ export declare class Toggle implements ComponentInterface {
     justify: 'start' | 'end' | 'space-between';
     /**
      * How to control the alignment of the toggle and label on the cross axis.
-     * ``"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.
+     * `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.
      * `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
      */
     alignment: 'start' | 'center';

package/dist/types/components.d.ts

@@ -15,7 +15,7 @@ import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
-import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 import { CounterFormatter } from "./components/item/item-interface";
@@ -51,7 +51,7 @@ export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
-export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 export { CounterFormatter } from "./components/item/item-interface";
@@ -858,6 +858,10 @@ export namespace Components {
           * The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.
          */
         "firstDayOfWeek": number;
+        /**
+          * Formatting options for dates and times. Should include a 'date' and/or 'time' object, each of which is of type [Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options).
+         */
+        "formatOptions"?: FormatOptions;
         /**
           * Used to apply custom text and background colors to specific dates.  Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors.  Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel="false"`.
          */
@@ -2548,6 +2552,10 @@ export namespace Components {
           * If `true`, enable searchbar animation.
          */
         "animated": boolean;
+        /**
+          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+         */
+        "autocapitalize": string;
         /**
           * Set the input's autocomplete property.
          */
@@ -2592,6 +2600,14 @@ export namespace Components {
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * This attribute specifies the maximum number of characters that the user can enter.
+         */
+        "maxlength"?: number;
+        /**
+          * This attribute specifies the minimum number of characters that the user can enter.
+         */
+        "minlength"?: number;
         /**
           * The mode determines which platform styles to use.
          */
@@ -3195,7 +3211,7 @@ export namespace Components {
     }
     interface IonToggle {
         /**
-          * How to control the alignment of the toggle and label on the cross axis. ``"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+          * How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
          */
         "alignment": 'start' | 'center';
         /**
@@ -5520,6 +5536,10 @@ declare namespace LocalJSX {
           * The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.
          */
         "firstDayOfWeek"?: number;
+        /**
+          * Formatting options for dates and times. Should include a 'date' and/or 'time' object, each of which is of type [Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options).
+         */
+        "formatOptions"?: FormatOptions;
         /**
           * Used to apply custom text and background colors to specific dates.  Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors.  Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel="false"`.
          */
@@ -7156,6 +7176,10 @@ declare namespace LocalJSX {
           * If `true`, enable searchbar animation.
          */
         "animated"?: boolean;
+        /**
+          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+         */
+        "autocapitalize"?: string;
         /**
           * Set the input's autocomplete property.
          */
@@ -7196,6 +7220,14 @@ declare namespace LocalJSX {
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * This attribute specifies the maximum number of characters that the user can enter.
+         */
+        "maxlength"?: number;
+        /**
+          * This attribute specifies the minimum number of characters that the user can enter.
+         */
+        "minlength"?: number;
         /**
           * The mode determines which platform styles to use.
          */
@@ -7845,7 +7877,7 @@ declare namespace LocalJSX {
     }
     interface IonToggle {
         /**
-          * How to control the alignment of the toggle and label on the cross axis. ``"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+          * How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
          */
         "alignment"?: 'start' | 'center';
         /**

package/dist/types/utils/framework-delegate.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentRef, FrameworkDelegate } from '../interface';
 export declare const attachComponent: (delegate: FrameworkDelegate | undefined, container: Element, component?: ComponentRef, cssClasses?: string[], componentProps?: {
     [key: string]: any;
-} | undefined, inline?: boolean) => Promise<HTMLElement>;
+}, inline?: boolean) => Promise<HTMLElement>;
 export declare const detachComponent: (delegate: FrameworkDelegate | undefined, element: HTMLElement | undefined) => Promise<void>;
 export declare const CoreDelegate: () => {
     attachViewToDom: (parentElement: HTMLElement, userComponent: any, userComponentProps?: any, cssClasses?: string[]) => Promise<any>;

package/dist/types/utils/hardware-back-button.d.ts

@@ -14,7 +14,7 @@ export type BackButtonEvent = CustomEvent<BackButtonEventDetail>;
  * moment this file is evaluated which could be
  * before the config is set.
  */
-export declare const shoudUseCloseWatcher: () => any;
+export declare const shouldUseCloseWatcher: () => any;
 /**
  * When hardwareBackButton: false in config,
  * we need to make sure we also block the default

package/dist/types/utils/helpers.d.ts

@@ -61,7 +61,7 @@ export declare const getElementRoot: (el: HTMLElement, fallback?: HTMLElement) =
 export declare const raf: (h: FrameRequestCallback) => number;
 export declare const hasShadowDom: (el: HTMLElement) => boolean;
 export declare const findItemLabel: (componentEl: HTMLElement) => HTMLIonLabelElement | null;
-export declare const focusElement: (el: HTMLElement) => void;
+export declare const focusVisibleElement: (el: HTMLElement) => void;
 /**
  * This method is used for Ionic's input components that use Shadow DOM. In
  * order to properly label the inputs to work with screen readers, we need

package/dist/types/utils/keyboard/keyboard-controller.d.ts

@@ -4,7 +4,7 @@
  * @internal
  * @param keyboardChangeCallback A function to call when the keyboard opens or closes.
  */
-export declare const createKeyboardController: (keyboardChangeCallback?: ((keyboardOpen: boolean, resizePromise?: Promise<void>) => void) | undefined) => Promise<KeyboardController>;
+export declare const createKeyboardController: (keyboardChangeCallback?: (keyboardOpen: boolean, resizePromise?: Promise<void>) => void) => Promise<KeyboardController>;
 export type KeyboardController = {
     init: () => void;
     destroy: () => void;

package/dist/types/utils/overlays.d.ts

@@ -47,6 +47,11 @@ export declare const prepareOverlay: <T extends HTMLIonOverlayElement>(el: T) =>
  */
 export declare const setOverlayId: <T extends HTMLIonOverlayElement>(el: T) => string;
 export declare const createOverlay: <T extends HTMLIonOverlayElement>(tagName: string, opts: object | undefined) => Promise<T>;
+/**
+ * Focuses the first descendant in an overlay
+ * that can receive focus. If none exists,
+ * the entire overlay will be focused.
+ */
 export declare const focusFirstDescendant: (ref: Element, overlay: HTMLIonOverlayElement) => void;
 export declare const dismissOverlay: (doc: Document, data: any, role: string | undefined, overlayTag: string, id?: string) => Promise<boolean>;
 /**
@@ -84,8 +89,8 @@ export declare const getPresentedOverlay: (doc: Document, overlayTag?: string, i
  * for main content.
  */
 export declare const setRootAriaHidden: (hidden?: boolean) => void;
-export declare const present: <OverlayPresentOptions>(overlay: OverlayInterface, name: keyof IonicConfig, iosEnterAnimation: AnimationBuilder, mdEnterAnimation: AnimationBuilder, opts?: OverlayPresentOptions | undefined) => Promise<void>;
-export declare const dismiss: <OverlayDismissOptions>(overlay: OverlayInterface, data: any | undefined, role: string | undefined, name: keyof IonicConfig, iosLeaveAnimation: AnimationBuilder, mdLeaveAnimation: AnimationBuilder, opts?: OverlayDismissOptions | undefined) => Promise<boolean>;
+export declare const present: <OverlayPresentOptions>(overlay: OverlayInterface, name: keyof IonicConfig, iosEnterAnimation: AnimationBuilder, mdEnterAnimation: AnimationBuilder, opts?: OverlayPresentOptions) => Promise<void>;
+export declare const dismiss: <OverlayDismissOptions>(overlay: OverlayInterface, data: any | undefined, role: string | undefined, name: keyof IonicConfig, iosLeaveAnimation: AnimationBuilder, mdLeaveAnimation: AnimationBuilder, opts?: OverlayDismissOptions) => Promise<boolean>;
 export declare const eventMethod: <T>(element: HTMLElement, eventName: string) => Promise<T>;
 export declare const onceEvent: (element: HTMLElement, eventName: string, callback: (ev: Event) => void) => void;
 export declare const isCancel: (role: string | undefined) => boolean;