voyager-ionic-core 7.7.3 → 8.0.0-beta.2

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

@@ -0,0 +1,158 @@
+import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import type { AnimationBuilder, OverlayInterface, FrameworkDelegate } from '../../interface';
+import type { OverlayEventDetail } from '../../utils/overlays-interface';
+import type { PickerButton, PickerColumn } from './picker-interface';
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ */
+export declare class Picker implements ComponentInterface, OverlayInterface {
+    private readonly delegateController;
+    private readonly lockController;
+    private readonly triggerController;
+    private durationTimeout?;
+    lastFocus?: HTMLElement;
+    el: HTMLIonPickerLegacyElement;
+    presented: boolean;
+    /** @internal */
+    overlayIndex: number;
+    /** @internal */
+    delegate?: FrameworkDelegate;
+    /** @internal */
+    hasController: boolean;
+    /**
+     * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+     */
+    keyboardClose: boolean;
+    /**
+     * Animation to use when the picker is presented.
+     */
+    enterAnimation?: AnimationBuilder;
+    /**
+     * Animation to use when the picker is dismissed.
+     */
+    leaveAnimation?: AnimationBuilder;
+    /**
+     * Array of buttons to be displayed at the top of the picker.
+     */
+    buttons: PickerButton[];
+    /**
+     * Array of columns to be displayed in the picker.
+     */
+    columns: PickerColumn[];
+    /**
+     * Additional classes to apply for custom CSS. If multiple classes are
+     * provided they should be separated by spaces.
+     */
+    cssClass?: string | string[];
+    /**
+     * Number of milliseconds to wait before dismissing the picker.
+     */
+    duration: number;
+    /**
+     * If `true`, a backdrop will be displayed behind the picker.
+     */
+    showBackdrop: boolean;
+    /**
+     * If `true`, the picker will be dismissed when the backdrop is clicked.
+     */
+    backdropDismiss: boolean;
+    /**
+     * If `true`, the picker will animate.
+     */
+    animated: boolean;
+    /**
+     * Additional attributes to pass to the picker.
+     */
+    htmlAttributes?: {
+        [key: string]: any;
+    };
+    /**
+     * If `true`, the picker will open. If `false`, the picker will close.
+     * Use this if you need finer grained control over presentation, otherwise
+     * just use the pickerController or the `trigger` property.
+     * Note: `isOpen` will not automatically be set back to `false` when
+     * the picker dismisses. You will need to do that in your code.
+     */
+    isOpen: boolean;
+    onIsOpenChange(newValue: boolean, oldValue: boolean): void;
+    /**
+     * An ID corresponding to the trigger element that
+     * causes the picker to open when clicked.
+     */
+    trigger: string | undefined;
+    triggerChanged(): void;
+    /**
+     * Emitted after the picker has presented.
+     */
+    didPresent: EventEmitter<void>;
+    /**
+     * Emitted before the picker has presented.
+     */
+    willPresent: EventEmitter<void>;
+    /**
+     * Emitted before the picker has dismissed.
+     */
+    willDismiss: EventEmitter<OverlayEventDetail>;
+    /**
+     * Emitted after the picker has dismissed.
+     */
+    didDismiss: EventEmitter<OverlayEventDetail>;
+    /**
+     * Emitted after the picker has presented.
+     * Shorthand for ionPickerWillDismiss.
+     */
+    didPresentShorthand: EventEmitter<void>;
+    /**
+     * Emitted before the picker has presented.
+     * Shorthand for ionPickerWillPresent.
+     */
+    willPresentShorthand: EventEmitter<void>;
+    /**
+     * Emitted before the picker has dismissed.
+     * Shorthand for ionPickerWillDismiss.
+     */
+    willDismissShorthand: EventEmitter<OverlayEventDetail>;
+    /**
+     * Emitted after the picker has dismissed.
+     * Shorthand for ionPickerDidDismiss.
+     */
+    didDismissShorthand: EventEmitter<OverlayEventDetail>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    /**
+     * Present the picker overlay after it has been created.
+     */
+    present(): Promise<void>;
+    /**
+     * Dismiss the picker overlay after it has been presented.
+     *
+     * @param data Any data to emit in the dismiss events.
+     * @param role The role of the element that is dismissing the picker.
+     * This can be useful in a button handler for determining which button was
+     * clicked to dismiss the picker.
+     * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+     */
+    dismiss(data?: any, role?: string): Promise<boolean>;
+    /**
+     * Returns a promise that resolves when the picker did dismiss.
+     */
+    onDidDismiss<T = any>(): Promise<OverlayEventDetail<T>>;
+    /**
+     * Returns a promise that resolves when the picker will dismiss.
+     */
+    onWillDismiss<T = any>(): Promise<OverlayEventDetail<T>>;
+    /**
+     * Get the column that matches the specified name.
+     *
+     * @param name The name of the column.
+     */
+    getColumn(name: string): Promise<PickerColumn | undefined>;
+    private buttonClick;
+    private callButtonHandler;
+    private getSelected;
+    private onBackdropTap;
+    private dispatchCancelHandler;
+    render(): any;
+}

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

@@ -0,0 +1,46 @@
+import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import type { PickerColumn } from '../picker-legacy/picker-interface';
+/**
+ * @internal
+ */
+export declare class PickerColumnCmp implements ComponentInterface {
+    private bounceFrom;
+    private lastIndex?;
+    private minY;
+    private maxY;
+    private optHeight;
+    private rotateFactor;
+    private scaleFactor;
+    private velocity;
+    private y;
+    private optsEl?;
+    private gesture?;
+    private rafId?;
+    private tmrId?;
+    private noAnimate;
+    private colDidChange;
+    el: HTMLElement;
+    /**
+     * Emitted when the selected value has changed
+     * @internal
+     */
+    ionPickerColChange: EventEmitter<PickerColumn>;
+    /** Picker column data */
+    col: PickerColumn;
+    protected colChanged(): void;
+    connectedCallback(): Promise<void>;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    disconnectedCallback(): void;
+    private emitColChange;
+    private setSelected;
+    private update;
+    private decelerate;
+    private indexForY;
+    private onStart;
+    private onMove;
+    private onEnd;
+    private refresh;
+    private onDomChange;
+    render(): any;
+}

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

@@ -1,5 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import type { Color, StyleEventDetail } from '../../interface';
+import type { Color } from '../../interface';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
@@ -12,9 +12,6 @@ import type { Color, StyleEventDetail } from '../../interface';
 export declare class Radio implements ComponentInterface {
     private inputId;
     private radioGroup;
-    private nativeInput;
-    private legacyFormController;
-    private hasLoggedDeprecationWarning;
     el: HTMLIonRadioElement;
     /**
      * If `true`, the radio is selected.
@@ -52,16 +49,6 @@ export declare class Radio implements ComponentInterface {
      * `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
      */
     labelPlacement: 'start' | 'end' | 'fixed' | 'stacked';
-    /**
-     * Set the `legacy` property to `true` to forcibly use the legacy form control markup.
-     * Ionic will only opt components in to the modern form markup when they are
-     * using either the `aria-label` attribute or the default slot that contains
-     * the label text. As a result, the `legacy` property should only be used as
-     * an escape hatch when you want to avoid this automatic opt-in behavior.
-     * Note that this property will be removed in an upcoming major release
-     * of Ionic, and all form components will be opted-in to using the modern form markup.
-     */
-    legacy?: boolean;
     /**
      * How to pack the label and radio within a line.
      * `"start"`: The label and radio will appear on the left in LTR and
@@ -78,11 +65,6 @@ export declare class Radio implements ComponentInterface {
      * `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
      */
     alignment: 'start' | 'center';
-    /**
-     * Emitted when the styles change.
-     * @internal
-     */
-    ionStyle: EventEmitter<StyleEventDetail>;
     /**
      * Emitted when the radio button has focus.
      */
@@ -97,9 +79,6 @@ export declare class Radio implements ComponentInterface {
     setButtonTabindex(value: number): Promise<void>;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    componentWillLoad(): void;
-    protected styleChanged(): void;
-    private emitStyle;
     private updateState;
     private onClick;
     private onFocus;
@@ -107,6 +86,4 @@ export declare class Radio implements ComponentInterface {
     private get hasLabel();
     private renderRadioControl;
     render(): any;
-    private renderRadio;
-    private renderLegacyRadio;
 }

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

@@ -1,5 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import type { Color, StyleEventDetail } from '../../interface';
+import type { Color } from '../../interface';
 import type { RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue, PinFormatter } from './range-interface';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -28,8 +28,6 @@ export declare class Range implements ComponentInterface {
     private contentEl;
     private initialContentScrollY;
     private originalIonInput?;
-    private legacyFormController;
-    private hasLoggedDeprecationWarning;
     el: HTMLIonRangeElement;
     private ratioA;
     private ratioB;
@@ -123,16 +121,6 @@ export declare class Range implements ComponentInterface {
      * `"stacked"`: The label will appear above the range regardless of the direction.
      */
     labelPlacement: 'start' | 'end' | 'fixed' | 'stacked';
-    /**
-     * Set the `legacy` property to `true` to forcibly use the legacy form control markup.
-     * Ionic will only opt components in to the modern form markup when they are
-     * using either the `aria-label` attribute or the `label` property. As a result,
-     * the `legacy` property should only be used as an escape hatch when you want to
-     * avoid this automatic opt-in behavior.
-     * Note that this property will be removed in an upcoming major release
-     * of Ionic, and all form components will be opted-in to using the modern form markup.
-     */
-    legacy?: boolean;
     /**
      * The `ionChange` event is fired for `<ion-range>` elements when the user
      * modifies the element's value:
@@ -148,11 +136,6 @@ export declare class Range implements ComponentInterface {
      * while the user is dragging the knob.
      */
     ionInput: EventEmitter<RangeChangeEventDetail>;
-    /**
-     * Emitted when the styles change.
-     * @internal
-     */
-    ionStyle: EventEmitter<StyleEventDetail>;
     /**
      * Emitted when the range has focus.
      */
@@ -178,7 +161,6 @@ export declare class Range implements ComponentInterface {
     disconnectedCallback(): void;
     private handleKeyboard;
     private getValue;
-    private emitStyle;
     /**
      * Emits an `ionChange` event.
      *
@@ -186,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();
@@ -199,7 +210,6 @@ export declare class Range implements ComponentInterface {
     private setFocus;
     private onBlur;
     private onFocus;
-    private renderLegacyRange;
     /**
      * Returns true if content was passed to the "start" slot
      */
@@ -208,7 +218,6 @@ export declare class Range implements ComponentInterface {
      * Returns true if content was passed to the "end" slot
      */
     private get hasEndSlotContent();
-    private renderRange;
     private get hasLabel();
     private renderRangeSlider;
     render(): any;

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

@@ -19,12 +19,10 @@ export declare class Select implements ComponentInterface {
     private overlay?;
     private focusEl?;
     private mutationO?;
-    private legacyFormController;
     private inheritedAttributes;
     private nativeWrapperEl;
     private notchSpacerEl;
     private notchController?;
-    private hasLoggedDeprecationWarning;
     el: HTMLIonSelectElement;
     isExpanded: boolean;
     /**
@@ -100,16 +98,6 @@ export declare class Select implements ComponentInterface {
      * When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`.
      */
     labelPlacement?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
-    /**
-     * Set the `legacy` property to `true` to forcibly use the legacy form control markup.
-     * Ionic will only opt components in to the modern form markup when they are
-     * using either the `aria-label` attribute or the `label` property. As a result,
-     * the `legacy` property should only be used as an escape hatch when you want to
-     * avoid this automatic opt-in behavior.
-     * Note that this property will be removed in an upcoming major release
-     * of Ionic, and all form components will be opted-in to using the modern form markup.
-     */
-    legacy?: boolean;
     /**
      * If `true`, the select can accept multiple values.
      */
@@ -198,7 +186,6 @@ export declare class Select implements ComponentInterface {
      * Close the select interface.
      */
     private close;
-    private getLabel;
     private hasValue;
     private get childOpts();
     /**
@@ -235,8 +222,6 @@ export declare class Select implements ComponentInterface {
      * when fill="outline".
      */
     private renderLabelContainer;
-    private renderSelect;
-    private renderLegacySelect;
     /**
      * Renders either the placeholder
      * or the selected values based on

package/dist/types/components/split-pane/split-pane.d.ts

@@ -28,10 +28,22 @@ export declare class SplitPane implements ComponentInterface {
         visible: boolean;
     }>;
     visibleChanged(visible: boolean): void;
+    /**
+     * @internal
+     */
+    isVisible(): Promise<boolean>;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     protected updateState(): void;
-    private isPane;
-    private styleChildren;
+    /**
+     * Attempt to find the main content
+     * element inside of the split pane.
+     * If found, set it as the main node.
+     *
+     * We assume that the main node
+     * is available in the DOM on split
+     * pane load.
+     */
+    private styleMainElement;
     render(): any;
 }

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

@@ -21,11 +21,9 @@ export declare class Textarea implements ComponentInterface {
     private textareaWrapper?;
     private inheritedAttributes;
     private originalIonInput?;
-    private legacyFormController;
     private notchSpacerEl;
     private slotMutationController?;
     private notchController?;
-    private hasLoggedDeprecationWarning;
     /**
      * The value of the textarea when the textarea is focused.
      */
@@ -62,7 +60,6 @@ export declare class Textarea implements ComponentInterface {
      * If `true`, the user cannot interact with the textarea.
      */
     disabled: boolean;
-    protected disabledChanged(): void;
     /**
      * 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.
@@ -167,16 +164,6 @@ export declare class Textarea implements ComponentInterface {
      * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
      */
     labelPlacement: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
-    /**
-     * Set the `legacy` property to `true` to forcibly use the legacy form control markup.
-     * Ionic will only opt components in to the modern form markup when they are
-     * using either the `aria-label` attribute or the default slot that contains
-     * the label text. As a result, the `legacy` property should only be used as
-     * an escape hatch when you want to avoid this automatic opt-in behavior.
-     * Note that this property will be removed in an upcoming major release
-     * of Ionic, and all form components will be opted-in to using the modern form markup.
-     */
-    legacy?: boolean;
     /**
      * The shape of the textarea. If "round" it will have an increased border radius.
      */
@@ -229,7 +216,6 @@ export declare class Textarea implements ComponentInterface {
      * Returns the native `<textarea>` element used under the hood.
      */
     getInputElement(): Promise<HTMLTextAreaElement>;
-    private emitStyle;
     /**
      * Emits an `ionChange` event.
      *
@@ -246,7 +232,6 @@ export declare class Textarea implements ComponentInterface {
      * Check if we need to clear the text input if clearOnEdit is enabled
      */
     private checkClearOnEdit;
-    private focusChange;
     private hasValue;
     private getValue;
     private onInput;
@@ -254,7 +239,6 @@ export declare class Textarea implements ComponentInterface {
     private onFocus;
     private onBlur;
     private onKeyDown;
-    private renderLegacyTextarea;
     private renderLabel;
     /**
      * Gets any content passed into the `label` slot,
@@ -283,6 +267,5 @@ export declare class Textarea implements ComponentInterface {
      * be rendered if hint text is set or counter is enabled.
      */
     private renderBottomContent;
-    private renderTextarea;
     render(): any;
 }

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

@@ -29,10 +29,6 @@ export interface ToastButton {
     icon?: string;
     side?: 'start' | 'end';
     role?: LiteralUnion<'cancel', string>;
-    /**
-     * @deprecated Use the toast button's CSS Shadow Parts instead.
-     */
-    cssClass?: string | string[];
     htmlAttributes?: {
         [key: string]: any;
     };

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

@@ -1,5 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import type { Color, StyleEventDetail } from '../../interface';
+import type { Color } from '../../interface';
 import type { ToggleChangeEventDetail } from './toggle-interface';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -15,11 +15,9 @@ export declare class Toggle implements ComponentInterface {
     private gesture?;
     private focusEl?;
     private lastDrag;
-    private legacyFormController;
     private inheritedAttributes;
     private toggleTrack?;
     private didLoad;
-    private hasLoggedDeprecationWarning;
     el: HTMLIonToggleElement;
     activated: boolean;
     /**
@@ -60,16 +58,6 @@ export declare class Toggle implements ComponentInterface {
      * `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
      */
     labelPlacement: 'start' | 'end' | 'fixed' | 'stacked';
-    /**
-     * Set the `legacy` property to `true` to forcibly use the legacy form control markup.
-     * Ionic will only opt components in to the modern form markup when they are
-     * using either the `aria-label` attribute or the default slot that contains
-     * the label text. As a result, the `legacy` property should only be used as
-     * an escape hatch when you want to avoid this automatic opt-in behavior.
-     * Note that this property will be removed in an upcoming major release
-     * of Ionic, and all form components will be opted-in to using the modern form markup.
-     */
-    legacy?: boolean;
     /**
      * How to pack the label and toggle within a line.
      * `"start"`: The label and toggle will appear on the left in LTR and
@@ -99,11 +87,6 @@ export declare class Toggle implements ComponentInterface {
      * Emitted when the toggle loses focus.
      */
     ionBlur: EventEmitter<void>;
-    /**
-     * Emitted when the styles change.
-     * @internal
-     */
-    ionStyle: EventEmitter<StyleEventDetail>;
     disabledChanged(): void;
     private toggleChecked;
     connectedCallback(): Promise<void>;
@@ -111,7 +94,6 @@ export declare class Toggle implements ComponentInterface {
     private setupGesture;
     disconnectedCallback(): void;
     componentWillLoad(): void;
-    private emitStyle;
     private onStart;
     private onMove;
     private onEnd;
@@ -125,6 +107,4 @@ export declare class Toggle implements ComponentInterface {
     private renderToggleControl;
     private get hasLabel();
     render(): any;
-    private renderToggle;
-    private renderLegacyToggle;
 }