@ionic/core 9.0.10-dev.11792788258.1f71cfee → 9.0.10-dev.11793383958.19a7d413

package/dist/types/components/input-otp/input-otp.d.ts

@@ -1,10 +1,14 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import type { Color } from '../../interface';
-import type { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from './input-otp-interface';
+import type { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail, InputOtpLabelFormatter } from './input-otp-interface';
 export declare class InputOTP implements ComponentInterface {
-    private inheritedAttributes;
+    private ariaController?;
     private inputRefs;
     private inputId;
+    private helperTextId;
+    private errorTextId;
+    private descriptionId;
+    private validationObserver?;
     private parsedSeparators;
     /**
      * Stores the initial value of the input when it receives focus.
@@ -27,6 +31,7 @@ export declare class InputOTP implements ComponentInterface {
     private inputValues;
     hasFocus: boolean;
     private previousInputValues;
+    isInvalid: 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"`.
@@ -42,11 +47,28 @@ export declare class InputOTP implements ComponentInterface {
      * If `true`, the user cannot interact with the input.
      */
     disabled: boolean;
+    /**
+     * Text that is placed under the input boxes and displayed when an error is detected.
+     */
+    errorText?: string;
     /**
      * The fill for the input boxes. If `"solid"` the input boxes will have a background. If
      * `"outline"` the input boxes will be transparent with a border.
      */
     fill?: 'outline' | 'solid';
+    /**
+     * Text that is placed under the input boxes and displayed when no error is detected.
+     */
+    helperText?: string;
+    /**
+     * A callback used to format the accessible name of each input box. It
+     * receives the 0-based `index` of the box and the total `length`. By default
+     * the name is "Input 1 of 4", or "PIN, 1 of 4" with an `aria-label` of "PIN".
+     *
+     * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
+     * if you need to access `this` from within the callback.
+     */
+    inputLabelFormatter?: InputOtpLabelFormatter;
     /**
      * A hint to the browser for which keyboard to display.
      * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
@@ -141,6 +163,7 @@ export declare class InputOTP implements ComponentInterface {
      * Otherwise, the first empty input box or the last input if all are filled will be focused.
      */
     setFocus(index?: number): Promise<void>;
+    onHostAriaChange(): void;
     valueChanged(): void;
     lengthChanged(): void;
     /**
@@ -154,6 +177,8 @@ export declare class InputOTP implements ComponentInterface {
      * If the separators are greater than the input length, it will warn and ignore the separators.
      */
     private processSeparators;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidRender(): void;
@@ -275,5 +300,18 @@ export declare class InputOTP implements ComponentInterface {
      * checking if the index is included in the parsed separators array.
      */
     private showSeparator;
+    /**
+     * Returns `undefined` until the first render creates the description container.
+     */
+    private getDescriptionText;
+    private getHintTextId;
+    private renderHintText;
+    private renderBottomContent;
+    /**
+     * A custom formatter is used as is so translators control the whole name.
+     * With a host `aria-labelledby`, each box also references itself so its
+     * position is still read.
+     */
+    private getInputLabelAttributes;
     render(): any;
 }

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

@@ -24,7 +24,6 @@ export declare class Popover implements ComponentInterface, PopoverInterface {
     private inline;
     private workingDelegate?;
     private focusDescendantOnPresent;
-    private dirSetOnPresent;
     lastFocus?: HTMLElement;
     presented: boolean;
     el: HTMLIonPopoverElement;

package/dist/types/components/progress-bar/progress-bar.d.ts

@@ -9,7 +9,6 @@ import type { Color } from '../../interface';
  * width of the `buffer` value.
  */
 export declare class ProgressBar implements ComponentInterface {
-    el: HTMLElement;
     /**
      * The state of the progress bar, based on if the time the process takes is known or not.
      * Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).

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

@@ -6,6 +6,14 @@ export declare class Route implements ComponentInterface {
      *
      * Accepts paths similar to expressjs so that you can define parameters
      * in the url /foo/:bar where bar would be available in incoming props.
+     *
+     * A url ending in `*`, such as `*` or `/admin/*`, matches any remaining path,
+     * including none, so `/admin/*` also matches `/admin`. It only wins over a
+     * route that matches the whole path when it has more fixed segments, so
+     * `/admin/*` wins over `/:section/:id` but not over `/admin/:id`. It always
+     * wins over a route that matches by ignoring trailing segments, such as
+     * `/admin` for `/admin/users`. The matched path is passed in the `pathMatch`
+     * prop without a leading `/`. A `*` on a route with child routes is ignored.
      */
     url: string;
     /**

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

@@ -2,7 +2,9 @@ import type { ComponentInterface, EventEmitter } from '../../stencil-public-runt
 export declare class RouteRedirect implements ComponentInterface {
     /**
      * A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL.
-     * It needs to be an exact match of the navigated URL in order to apply.
+     * It needs to be an exact match of the navigated URL in order to apply, unless it contains a `*`.
+     * A `*` matches the rest of the path from that segment on, as long as the path has at least as
+     * many segments as `from`, so `/admin/*` matches `/admin/posts` but not `/admin`.
      *
      * The path specified in this value is always an absolute path, even if the initial `/` slash
      * is not specified.

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

@@ -1,3 +1,5 @@
 export declare const ROUTER_INTENT_NONE = "root";
 export declare const ROUTER_INTENT_FORWARD = "forward";
 export declare const ROUTER_INTENT_BACK = "back";
+/** Param that holds the path matched by a trailing `*` in an `ion-route` url. */
+export declare const WILDCARD_PARAM = "pathMatch";

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

@@ -35,6 +35,9 @@ export declare const mergeParams: (a: {
  * Returns the best match or null when no match is found.
  * When a chain is returned the parameters are updated from the RouteIDs.
  * That is they contain both the componentProps of the <ion-route> and the parameter segment.
+ *
+ * When a wildcard route ties with other routes, a route without a wildcard that can build a url wins,
+ * then the wildcard route. Otherwise the first route declared wins a tie.
  */
 export declare const findChainForIDs: (ids: RouteID[], chains: RouteChain[]) => RouteChain | null;
 /**
@@ -43,6 +46,9 @@ export declare const findChainForIDs: (ids: RouteID[], chains: RouteChain[]) =>
  * Returns the best match or null when no match is found.
  * When a chain is returned the parameters are updated from the segments.
  * That is they contain both the componentProps of the <ion-route> and the parameter segments.
+ *
+ * When wildcard routes match, the one with the most fixed segments wins if it has more fixed segments than every
+ * route that matched the whole path. Routes that only matched by ignoring trailing segments don't count.
  */
 export declare const findChainForSegments: (segments: string[], chains: RouteChain[]) => RouteChain | null;
 /**
@@ -55,10 +61,14 @@ export declare const findChainForSegments: (segments: string[], chains: RouteCha
  * - /path/to/page
  *
  * The second one will be given a higher priority because "page" is a fixed segment (vs ":where", a parameter segment).
+ *
+ * A trailing wildcard is not counted.
  */
 export declare const computePriority: (chain: RouteChain) => number;
 export declare class RouterSegments {
     private segments;
     constructor(segments: string[]);
     next(): string;
+    /** Consumes and returns the remaining non empty segments. */
+    rest(): string[];
 }

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

@@ -7,9 +7,13 @@ export declare const writeSegments: (history: History, root: string, useHash: bo
  *
  * Notes:
  * - parameter segments of the form :param are replaced with their value,
- * - null is returned when a value is missing for any parameter segment.
+ * - null is returned when a value is missing for any parameter segment,
+ * - a trailing wildcard is replaced with the path it matched.
  */
 export declare const chainToSegments: (chain: RouteChain) => string[] | null;
+/** Only a `*` in the last segment of a route url is a wildcard. Elsewhere it's matched literally. */
+export declare const endsWithWildcard: (segments: string[]) => boolean;
+export declare const withoutWildcard: (segments: string[]) => string[];
 export declare const readSegments: (loc: Location, root: string, useHash: boolean) => string[] | null;
 /**
  * Parses the path to:

package/dist/types/components.d.ts

@@ -18,7 +18,7 @@ import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-int
 import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimeParts, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
-import { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from "./components/input-otp/input-otp-interface";
+import { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail, InputOtpLabelFormatter } from "./components/input-otp/input-otp-interface";
 import { MenuChangeEventDetail, MenuCloseEventDetail, MenuType, Side } from "./components/menu/menu-interface";
 import { ModalBreakpointChangeEventDetail, ModalDragEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 import { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
@@ -55,7 +55,7 @@ export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-int
 export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimeParts, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
-export { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from "./components/input-otp/input-otp-interface";
+export { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail, InputOtpLabelFormatter } from "./components/input-otp/input-otp-interface";
 export { MenuChangeEventDetail, MenuCloseEventDetail, MenuType, Side } from "./components/menu/menu-interface";
 export { ModalBreakpointChangeEventDetail, ModalDragEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 export { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
@@ -1468,11 +1468,23 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        /**
+          * Text that is placed under the input boxes and displayed when an error is detected.
+         */
+        "errorText"?: string;
         /**
           * The fill for the input boxes. If `"solid"` the input boxes will have a background. If `"outline"` the input boxes will be transparent with a border.
           * @default 'outline'
          */
         "fill"?: 'outline' | 'solid';
+        /**
+          * Text that is placed under the input boxes and displayed when no error is detected.
+         */
+        "helperText"?: string;
+        /**
+          * A callback used to format the accessible name of each input box. It receives the 0-based `index` of the box and the total `length`. By default the name is "Input 1 of 4", or "PIN, 1 of 4" with an `aria-label` of "PIN".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+         */
+        "inputLabelFormatter"?: InputOtpLabelFormatter;
         /**
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.  For numbers (type="number"): "numeric" For text (type="text"): "text"
          */
@@ -2719,14 +2731,14 @@ export namespace Components {
          */
         "componentProps"?: { [key: string]: any };
         /**
-          * Relative path that needs to match in order for this route to apply.  Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props.
+          * Relative path that needs to match in order for this route to apply.  Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props.  A url ending in `*`, such as `*` or `/admin/*`, matches any remaining path, including none, so `/admin/*` also matches `/admin`. It only wins over a route that matches the whole path when it has more fixed segments, so `/admin/*` wins over `/:section/:id` but not over `/admin/:id`. It always wins over a route that matches by ignoring trailing segments, such as `/admin` for `/admin/users`. The matched path is passed in the `pathMatch` prop without a leading `/`. A `*` on a route with child routes is ignored.
           * @default ''
          */
         "url": string;
     }
     interface IonRouteRedirect {
         /**
-          * A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. It needs to be an exact match of the navigated URL in order to apply.  The path specified in this value is always an absolute path, even if the initial `/` slash is not specified.
+          * A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. It needs to be an exact match of the navigated URL in order to apply, unless it contains a `*`. A `*` matches the rest of the path from that segment on, as long as the path has at least as many segments as `from`, so `/admin/*` matches `/admin/posts` but not `/admin`.  The path specified in this value is always an absolute path, even if the initial `/` slash is not specified.
          */
         "from": string;
         /**
@@ -6590,11 +6602,23 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * Text that is placed under the input boxes and displayed when an error is detected.
+         */
+        "errorText"?: string;
         /**
           * The fill for the input boxes. If `"solid"` the input boxes will have a background. If `"outline"` the input boxes will be transparent with a border.
           * @default 'outline'
          */
         "fill"?: 'outline' | 'solid';
+        /**
+          * Text that is placed under the input boxes and displayed when no error is detected.
+         */
+        "helperText"?: string;
+        /**
+          * A callback used to format the accessible name of each input box. It receives the 0-based `index` of the box and the total `length`. By default the name is "Input 1 of 4", or "PIN, 1 of 4" with an `aria-label` of "PIN".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+         */
+        "inputLabelFormatter"?: InputOtpLabelFormatter;
         /**
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.  For numbers (type="number"): "numeric" For text (type="text"): "text"
          */
@@ -7781,14 +7805,14 @@ declare namespace LocalJSX {
          */
         "onIonRouteDataChanged"?: (event: IonRouteCustomEvent<any>) => void;
         /**
-          * Relative path that needs to match in order for this route to apply.  Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props.
+          * Relative path that needs to match in order for this route to apply.  Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props.  A url ending in `*`, such as `*` or `/admin/*`, matches any remaining path, including none, so `/admin/*` also matches `/admin`. It only wins over a route that matches the whole path when it has more fixed segments, so `/admin/*` wins over `/:section/:id` but not over `/admin/:id`. It always wins over a route that matches by ignoring trailing segments, such as `/admin` for `/admin/users`. The matched path is passed in the `pathMatch` prop without a leading `/`. A `*` on a route with child routes is ignored.
           * @default ''
          */
         "url"?: string;
     }
     interface IonRouteRedirect {
         /**
-          * A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. It needs to be an exact match of the navigated URL in order to apply.  The path specified in this value is always an absolute path, even if the initial `/` slash is not specified.
+          * A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. It needs to be an exact match of the navigated URL in order to apply, unless it contains a `*`. A `*` matches the rest of the path from that segment on, as long as the path has at least as many segments as `from`, so `/admin/*` matches `/admin/posts` but not `/admin`.  The path specified in this value is always an absolute path, even if the initial `/` slash is not specified.
          */
         "from": string;
         /**
@@ -9060,7 +9084,9 @@ declare namespace LocalJSX {
         "autocapitalize": string;
         "color": Color;
         "disabled": boolean;
+        "errorText": string;
         "fill": 'outline' | 'solid';
+        "helperText": string;
         "inputmode": 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
         "length": number;
         "pattern": string;

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

@@ -113,9 +113,10 @@ export declare const pointerCoord: (ev: any) => {
  *
  * @param side The current side before being redefined based on the direction.
  * @param hostEl The component's host element. The direction is resolved from
- * it or its nearest ancestor that declares one, falling back to the document.
+ * it or its nearest ancestor that declares one. When omitted, the direction
+ * is resolved from the document.
  */
-export declare const isEndSide: (side: Side, hostEl: HTMLElement) => boolean;
+export declare const isEndSide: (side: Side, hostEl?: HTMLElement) => boolean;
 export declare const deferEvent: (event: EventEmitter) => EventEmitter;
 export declare const debounceEvent: (event: EventEmitter, wait: number) => EventEmitter;
 export declare const debounce: (func: (...args: any[]) => void, wait?: number) => (...args: any[]) => any;

package/dist/types/utils/rtl/dir.d.ts

@@ -9,4 +9,4 @@
  *
  * @param hostEl the element to resolve the direction for.
  */
-export declare const isRTL: (hostEl: Element) => boolean;
+export declare const isRTL: (hostEl?: Element | null) => boolean;