@ionic/core 8.0.0-beta.1 → 8.0.0-beta.2

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

@@ -1,17 +1,13 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { AnchorInterface, ButtonInterface } from "../../utils/element-interface";
 import type { AnimationBuilder, Color, StyleEventDetail } from '../../interface';
-import type { InputInputEventDetail } from '../input/input-interface';
 import type { RouterDirection } from '../router/utils/interface';
-import type { CounterFormatter } from './item-interface';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot start - Content is placed to the left of the item text in LTR, and to the right in RTL.
  * @slot end - Content is placed to the right of the item text in LTR, and to the left in RTL.
- * @slot helper - Content is placed under the item and displayed when no error is detected. **DEPRECATED** Use the "helperText" property on ion-input or ion-textarea instead.
- * @slot error - Content is placed under the item and displayed when an error is detected. **DEPRECATED** Use the "errorText" property on ion-input or ion-textarea instead.
  *
  * @part native - The native HTML button, anchor or div element that wraps all child elements.
  * @part detail-icon - The chevron icon for the item. Only applies when `detail="true"`.
@@ -53,17 +49,6 @@ export declare class Item implements ComponentInterface, AnchorInterface, Button
      * (the user can still change the file name if they want).
      */
     download: string | undefined;
-    /**
-     * The fill for the item. If `"solid"` the item will have a background. If
-     * `"outline"` the item will be transparent with a border. Only available in `md` mode.
-     * @deprecated Use the `fill` property on `ion-input` or `ion-textarea` instead.
-     */
-    fill?: 'outline' | 'solid';
-    /**
-     * The shape of the item. If "round" it will have increased
-     * border radius.
-     */
-    shape?: 'round';
     /**
      * Contains a URL or a URL fragment that the hyperlink points to.
      * If this property is set, an anchor tag will be rendered.
@@ -78,11 +63,6 @@ export declare class Item implements ComponentInterface, AnchorInterface, Button
      * How the bottom border should be displayed on the item.
      */
     lines?: 'full' | 'inset' | 'none';
-    /**
-     * If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`.
-     * @deprecated Use the `counter` property on `ion-input` or `ion-textarea` instead.
-     */
-    counter: boolean;
     /**
      * When using a router, it specifies the transition animation when navigating to
      * another page using `href`.
@@ -103,16 +83,7 @@ export declare class Item implements ComponentInterface, AnchorInterface, Button
      * The type of the button. Only used when an `onclick` or `button` property is present.
      */
     type: 'submit' | 'reset' | 'button';
-    /**
-     * A callback used to format the counter text.
-     * By default the counter text is set to "itemLength / maxLength".
-     * @deprecated Use the `counterFormatter` property on `ion-input` or `ion-textarea` instead.
-     */
-    counterFormatter?: CounterFormatter;
-    counterString: string | null | undefined;
     buttonChanged(): void;
-    counterFormatterChanged(): void;
-    handleIonInput(ev: CustomEvent<InputInputEventDetail>): void;
     labelColorChanged(ev: CustomEvent<string>): void;
     itemStyle(ev: CustomEvent<StyleEventDetail>): void;
     connectedCallback(): void;
@@ -123,9 +94,6 @@ export declare class Item implements ComponentInterface, AnchorInterface, Button
     private isClickable;
     private canActivate;
     private isFocusable;
-    private getFirstInput;
-    private updateCounterOutput;
-    private defaultCounterFormatter;
     private hasStartEl;
     private getFirstInteractive;
     render(): any;

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

@@ -47,3 +47,4 @@ export interface MenuCustomEvent<T = any> extends CustomEvent {
     detail: T;
     target: HTMLIonMenuElement;
 }
+export type MenuType = 'overlay' | 'reveal' | 'push';

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

@@ -1,5 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import type { MenuChangeEventDetail, MenuI, Side } from './menu-interface';
+import type { MenuChangeEventDetail, MenuI, MenuType, Side } from './menu-interface';
 /**
  * @part container - The container for the menu content.
  * @part backdrop - The backdrop that appears over the main content when the menu is open.
@@ -54,7 +54,7 @@ export declare class Menu implements ComponentInterface, MenuI {
      * The display type of the menu.
      * Available options: `"overlay"`, `"reveal"`, `"push"`.
      */
-    type?: string;
+    type?: MenuType;
     typeChanged(type: string, oldType: string | undefined): void;
     /**
      * If `true`, the menu is disabled.

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

@@ -168,10 +168,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,25 @@ 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 a string value would be a breaking change
+     * in behavior, so we use "!" to tell TypeScript that this property
+     * is always defined so we can rely on the browser defaults. Browsers
+     * will automatically set a default value if the developer does not set one.
+     *
+     * In the future, this property will default to "off" to align with
+     * Input and Textarea, and the "!" 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 +98,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 +193,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.d.ts

@@ -15,11 +15,10 @@ 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";
-import { MenuChangeEventDetail, Side } from "./components/menu/menu-interface";
+import { MenuChangeEventDetail, MenuType, Side } from "./components/menu/menu-interface";
 import { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 import { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
 import { ViewController } from "./components/nav/view-controller";
@@ -51,11 +50,10 @@ 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";
-export { MenuChangeEventDetail, Side } from "./components/menu/menu-interface";
+export { MenuChangeEventDetail, MenuType, Side } from "./components/menu/menu-interface";
 export { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 export { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
 export { ViewController } from "./components/nav/view-controller";
@@ -854,6 +852,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"`.
          */
@@ -1294,16 +1296,6 @@ export namespace Components {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
-        /**
-          * If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`.
-          * @deprecated Use the `counter` property on `ion-input` or `ion-textarea` instead.
-         */
-        "counter": boolean;
-        /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
-          * @deprecated Use the `counterFormatter` property on `ion-input` or `ion-textarea` instead.
-         */
-        "counterFormatter"?: CounterFormatter;
         /**
           * If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present.
          */
@@ -1320,11 +1312,6 @@ export namespace Components {
           * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
          */
         "download": string | undefined;
-        /**
-          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
-          * @deprecated Use the `fill` property on `ion-input` or `ion-textarea` instead.
-         */
-        "fill"?: 'outline' | 'solid';
         /**
           * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
          */
@@ -1349,10 +1336,6 @@ export namespace Components {
           * When using a router, it specifies the transition direction when navigating to another page using `href`.
          */
         "routerDirection": RouterDirection;
-        /**
-          * The shape of the item. If "round" it will have increased border radius.
-         */
-        "shape"?: 'round';
         /**
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
@@ -1631,7 +1614,7 @@ export namespace Components {
         /**
           * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`.
          */
-        "type"?: string;
+        "type"?: MenuType;
     }
     interface IonMenuButton {
         /**
@@ -2544,6 +2527,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.
          */
@@ -2588,6 +2575,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.
          */
@@ -5504,6 +5499,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"`.
          */
@@ -5976,16 +5975,6 @@ declare namespace LocalJSX {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
-        /**
-          * If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`.
-          * @deprecated Use the `counter` property on `ion-input` or `ion-textarea` instead.
-         */
-        "counter"?: boolean;
-        /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
-          * @deprecated Use the `counterFormatter` property on `ion-input` or `ion-textarea` instead.
-         */
-        "counterFormatter"?: CounterFormatter;
         /**
           * If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present.
          */
@@ -6002,11 +5991,6 @@ declare namespace LocalJSX {
           * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
          */
         "download"?: string | undefined;
-        /**
-          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
-          * @deprecated Use the `fill` property on `ion-input` or `ion-textarea` instead.
-         */
-        "fill"?: 'outline' | 'solid';
         /**
           * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
          */
@@ -6031,10 +6015,6 @@ declare namespace LocalJSX {
           * When using a router, it specifies the transition direction when navigating to another page using `href`.
          */
         "routerDirection"?: RouterDirection;
-        /**
-          * The shape of the item. If "round" it will have increased border radius.
-         */
-        "shape"?: 'round';
         /**
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
@@ -6298,7 +6278,7 @@ declare namespace LocalJSX {
         /**
           * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`.
          */
-        "type"?: string;
+        "type"?: MenuType;
     }
     interface IonMenuButton {
         /**
@@ -7131,6 +7111,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.
          */
@@ -7171,6 +7155,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.
          */

package/dist/types/utils/forms/index.d.ts

@@ -1,3 +1,2 @@
-export * from './form-controller';
 export * from './notch-controller';
 export * from './compare-with-utils';

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

@@ -60,7 +60,6 @@ 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 focusVisibleElement: (el: HTMLElement) => void;
 /**
  * This method is used for Ionic's input components that use Shadow DOM. In