@ionic/core 9.0.0 → 9.0.1-nightly.20260820

package/dist/collection/components/toast/toast.js

@@ -31,126 +31,103 @@ import { createSwipeToDismissGesture } from "./gestures/swipe-to-dismiss";
  * @part button cancel - Any button element with role "cancel" that is displayed inside of the toast.
  */
 export class Toast {
-    delegateController = createDelegateController(this);
-    lockController = createLockController();
-    triggerController = createTriggerController();
-    customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
-    durationTimeout;
-    gesture;
-    /**
-     * Holds the position of the toast calculated in the present
-     * animation, to be passed along to the dismiss animation so
-     * we don't have to calculate the position twice.
-     */
-    lastPresentedPosition;
-    presented = false;
-    /**
-     * When `true`, content inside of .toast-content
-     * will have aria-hidden elements removed causing
-     * screen readers to announce the remaining content.
-     */
-    revealContentToScreenReader = false;
-    el;
-    /**
-     * @internal
-     */
-    overlayIndex;
-    /** @internal */
-    delegate;
-    /** @internal */
-    hasController = false;
-    /**
-     * 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;
-    /**
-     * Animation to use when the toast is presented.
-     */
-    enterAnimation;
-    /**
-     * Animation to use when the toast is dismissed.
-     */
-    leaveAnimation;
-    /**
-     * Additional classes to apply for custom CSS. If multiple classes are
-     * provided they should be separated by spaces.
-     */
-    cssClass;
-    /**
-     * How many milliseconds to wait before hiding the toast. By default, it will show
-     * until `dismiss()` is called.
-     */
-    duration = config.getNumber('toastDuration', 0);
-    /**
-     * Header to be shown in the toast.
-     */
-    header;
-    /**
-     * Defines how the message and buttons are laid out in the toast.
-     * 'baseline': The message and the buttons will appear on the same line.
-     * Message text may wrap within the message container.
-     * 'stacked': The buttons containers and message will stack on top
-     * of each other. Use this if you have long text in your buttons.
-     */
-    layout = 'baseline';
-    /**
-     * Message to be shown in the toast.
-     * This property accepts custom HTML as a string.
-     * Content is parsed as plaintext by default.
-     * `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config
-     * before custom HTML can be used.
-     */
-    message;
-    /**
-     * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
-     */
-    keyboardClose = false;
-    /**
-     * The starting position of the toast on the screen. Can be tweaked further
-     * using the `positionAnchor` property.
-     */
-    position = 'bottom';
-    /**
-     * The element to anchor the toast's position to. Can be set as a direct reference
-     * or the ID of the element. With `position="bottom"`, the toast will sit above the
-     * chosen element. With `position="top"`, the toast will sit below the chosen element.
-     * With `position="middle"`, the value of `positionAnchor` is ignored.
-     */
-    positionAnchor;
-    /**
-     * An array of buttons for the toast.
-     */
-    buttons;
-    /**
-     * If `true`, the toast will be translucent.
-     * Only applies when the mode is `"ios"` and the device supports
-     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
-     */
-    translucent = false;
-    /**
-     * If `true`, the toast will animate.
-     */
-    animated = true;
-    /**
-     * The name of the icon to display, or the path to a valid SVG file. See `ion-icon`.
-     * https://ionic.io/ionicons
-     */
-    icon;
-    /**
-     * Additional attributes to pass to the toast.
-     */
-    htmlAttributes;
-    /**
-     * If set to 'vertical', the Toast can be dismissed with
-     * a swipe gesture. The swipe direction is determined by
-     * the value of the `position` property:
-     * `top`: The Toast can be swiped up to dismiss.
-     * `bottom`: The Toast can be swiped down to dismiss.
-     * `middle`: The Toast can be swiped up or down to dismiss.
-     */
-    swipeGesture;
+    constructor() {
+        this.delegateController = createDelegateController(this);
+        this.lockController = createLockController();
+        this.triggerController = createTriggerController();
+        this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
+        this.presented = false;
+        /**
+         * When `true`, content inside of .toast-content
+         * will have aria-hidden elements removed causing
+         * screen readers to announce the remaining content.
+         */
+        this.revealContentToScreenReader = false;
+        /** @internal */
+        this.hasController = false;
+        /**
+         * How many milliseconds to wait before hiding the toast. By default, it will show
+         * until `dismiss()` is called.
+         */
+        this.duration = config.getNumber('toastDuration', 0);
+        /**
+         * Defines how the message and buttons are laid out in the toast.
+         * 'baseline': The message and the buttons will appear on the same line.
+         * Message text may wrap within the message container.
+         * 'stacked': The buttons containers and message will stack on top
+         * of each other. Use this if you have long text in your buttons.
+         */
+        this.layout = 'baseline';
+        /**
+         * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+         */
+        this.keyboardClose = false;
+        /**
+         * The starting position of the toast on the screen. Can be tweaked further
+         * using the `positionAnchor` property.
+         */
+        this.position = 'bottom';
+        /**
+         * If `true`, the toast will be translucent.
+         * Only applies when the mode is `"ios"` and the device supports
+         * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+         */
+        this.translucent = false;
+        /**
+         * If `true`, the toast will animate.
+         */
+        this.animated = true;
+        /**
+         * If `true`, the toast will open. If `false`, the toast will close.
+         * Use this if you need finer grained control over presentation, otherwise
+         * just use the toastController or the `trigger` property.
+         * Note: `isOpen` will not automatically be set back to `false` when
+         * the toast dismisses. You will need to do that in your code.
+         */
+        this.isOpen = false;
+        this.dispatchCancelHandler = (ev) => {
+            const role = ev.detail.role;
+            if (isCancel(role)) {
+                const cancelButton = this.getButtons().find((b) => b.role === 'cancel');
+                this.callButtonHandler(cancelButton);
+            }
+        };
+        /**
+         * Create a new swipe gesture so Toast
+         * can be swiped to dismiss.
+         */
+        this.createSwipeGesture = (toastPosition) => {
+            const gesture = (this.gesture = createSwipeToDismissGesture(this.el, toastPosition, () => {
+                /**
+                 * If the gesture completed then
+                 * we should dismiss the toast.
+                 */
+                this.dismiss(undefined, GESTURE);
+            }));
+            gesture.enable(true);
+        };
+        /**
+         * Destroy an existing swipe gesture
+         * so Toast can no longer be swiped to dismiss.
+         */
+        this.destroySwipeGesture = () => {
+            const { gesture } = this;
+            if (gesture === undefined) {
+                return;
+            }
+            gesture.destroy();
+            this.gesture = undefined;
+        };
+        /**
+         * Returns `true` if swipeGesture
+         * is configured to a value that enables the swipe behavior.
+         * Returns `false` otherwise.
+         */
+        this.prefersSwipeGesture = () => {
+            const { swipeGesture } = this;
+            return swipeGesture === 'vertical';
+        };
+    }
     swipeGestureChanged() {
         /**
          * If the Toast is presented, then we need to destroy
@@ -178,14 +155,6 @@ export class Toast {
             this.createSwipeGesture(this.lastPresentedPosition);
         }
     }
-    /**
-     * If `true`, the toast will open. If `false`, the toast will close.
-     * Use this if you need finer grained control over presentation, otherwise
-     * just use the toastController or the `trigger` property.
-     * Note: `isOpen` will not automatically be set back to `false` when
-     * the toast dismisses. You will need to do that in your code.
-     */
-    isOpen = false;
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {
             this.present();
@@ -194,53 +163,12 @@ export class Toast {
             this.dismiss();
         }
     }
-    /**
-     * An ID corresponding to the trigger element that
-     * causes the toast to open when clicked.
-     */
-    trigger;
     triggerChanged() {
         const { trigger, el, triggerController } = this;
         if (trigger) {
             triggerController.addClickListener(el, trigger);
         }
     }
-    /**
-     * Emitted after the toast has presented.
-     */
-    didPresent;
-    /**
-     * Emitted before the toast has presented.
-     */
-    willPresent;
-    /**
-     * Emitted before the toast has dismissed.
-     */
-    willDismiss;
-    /**
-     * Emitted after the toast has dismissed.
-     */
-    didDismiss;
-    /**
-     * Emitted after the toast has presented.
-     * Shorthand for ionToastWillDismiss.
-     */
-    didPresentShorthand;
-    /**
-     * Emitted before the toast has presented.
-     * Shorthand for ionToastWillPresent.
-     */
-    willPresentShorthand;
-    /**
-     * Emitted before the toast has dismissed.
-     * Shorthand for ionToastWillDismiss.
-     */
-    willDismissShorthand;
-    /**
-     * Emitted after the toast has dismissed.
-     * Shorthand for ionToastDidDismiss.
-     */
-    didDismissShorthand;
     connectedCallback() {
         prepareOverlay(this.el);
         this.triggerChanged();
@@ -438,48 +366,6 @@ export class Toast {
         }
         return true;
     }
-    dispatchCancelHandler = (ev) => {
-        const role = ev.detail.role;
-        if (isCancel(role)) {
-            const cancelButton = this.getButtons().find((b) => b.role === 'cancel');
-            this.callButtonHandler(cancelButton);
-        }
-    };
-    /**
-     * Create a new swipe gesture so Toast
-     * can be swiped to dismiss.
-     */
-    createSwipeGesture = (toastPosition) => {
-        const gesture = (this.gesture = createSwipeToDismissGesture(this.el, toastPosition, () => {
-            /**
-             * If the gesture completed then
-             * we should dismiss the toast.
-             */
-            this.dismiss(undefined, GESTURE);
-        }));
-        gesture.enable(true);
-    };
-    /**
-     * Destroy an existing swipe gesture
-     * so Toast can no longer be swiped to dismiss.
-     */
-    destroySwipeGesture = () => {
-        const { gesture } = this;
-        if (gesture === undefined) {
-            return;
-        }
-        gesture.destroy();
-        this.gesture = undefined;
-    };
-    /**
-     * Returns `true` if swipeGesture
-     * is configured to a value that enables the swipe behavior.
-     * Returns `false` otherwise.
-     */
-    prefersSwipeGesture = () => {
-        const { swipeGesture } = this;
-        return swipeGesture === 'vertical';
-    };
     renderButtons(buttons, side) {
         if (buttons.length === 0) {
             return;

package/dist/collection/components/toggle/toggle.js

@@ -24,108 +24,117 @@ import { getIonMode } from "../../global/ionic-global";
  * @part error-text - Supporting text displayed beneath the toggle label when the toggle is invalid and touched.
  */
 export class Toggle {
-    inputId = `ion-tg-${toggleIds++}`;
-    inputLabelId = `${this.inputId}-lbl`;
-    helperTextId = `${this.inputId}-helper-text`;
-    errorTextId = `${this.inputId}-error-text`;
-    gesture;
-    lastDrag = 0;
-    inheritedAttributes = {};
-    toggleTrack;
-    didLoad = false;
-    validationObserver;
-    itemFocusObserver;
-    el;
-    activated = false;
-    /**
-     * Track validation state for proper aria-live announcements.
-     */
-    isInvalid = false;
-    hintTextId;
-    /**
-     * 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;
-    /**
-     * The name of the control, which is submitted with the form data.
-     */
-    name = this.inputId;
-    /**
-     * If `true`, the toggle is selected.
-     */
-    checked = false;
-    /**
-     * If `true`, the user cannot interact with the toggle.
-     */
-    disabled = false;
-    /**
-     * Text that is placed under the toggle label and displayed when an error is detected.
-     */
-    errorText;
-    /**
-     * Text that is placed under the toggle label and displayed when no error is detected.
-     */
-    helperText;
-    /**
-     * The value of the toggle does not mean if it's checked or not, use the `checked`
-     * property for that.
-     *
-     * The value of a toggle is analogous to the value of a `<input type="checkbox">`,
-     * it's only used when the toggle participates in a native `<form>`.
-     */
-    value = 'on';
-    /**
-     * Enables the on/off accessibility switch labels within the toggle.
-     */
-    enableOnOffLabels = config.get('toggleOnOffLabels');
-    /**
-     * Where to place the label relative to the input.
-     * `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL.
-     * `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL.
-     * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
-     * `"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';
-    /**
-     * How to pack the label and toggle within a line.
-     * `"start"`: The label and toggle will appear on the left in LTR and
-     * on the right in RTL.
-     * `"end"`: The label and toggle will appear on the right in LTR and
-     * on the left in RTL.
-     * `"space-between"`: The label and toggle will appear on opposite
-     * ends of the line with space between the two elements.
-     * Setting this property will change the toggle `display` to `block`.
-     */
-    justify;
-    /**
-     * 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.
-     * Setting this property will change the toggle `display` to `block`.
-     */
-    alignment;
-    /**
-     * If true, screen readers will announce it as a required field. This property
-     * works only for accessibility purposes, it will not prevent the form from
-     * submitting if the value is invalid.
-     */
-    required = false;
-    /**
-     * Emitted when the user switches the toggle on or off.
-     *
-     * This event will not emit when programmatically setting the `checked` property.
-     */
-    ionChange;
-    /**
-     * Emitted when the toggle has focus.
-     */
-    ionFocus;
-    /**
-     * Emitted when the toggle loses focus.
-     */
-    ionBlur;
+    constructor() {
+        this.inputId = `ion-tg-${toggleIds++}`;
+        this.inputLabelId = `${this.inputId}-lbl`;
+        this.helperTextId = `${this.inputId}-helper-text`;
+        this.errorTextId = `${this.inputId}-error-text`;
+        this.lastDrag = 0;
+        this.inheritedAttributes = {};
+        this.didLoad = false;
+        this.activated = false;
+        /**
+         * Track validation state for proper aria-live announcements.
+         */
+        this.isInvalid = false;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * If `true`, the toggle is selected.
+         */
+        this.checked = false;
+        /**
+         * If `true`, the user cannot interact with the toggle.
+         */
+        this.disabled = false;
+        /**
+         * The value of the toggle does not mean if it's checked or not, use the `checked`
+         * property for that.
+         *
+         * The value of a toggle is analogous to the value of a `<input type="checkbox">`,
+         * it's only used when the toggle participates in a native `<form>`.
+         */
+        this.value = 'on';
+        /**
+         * Enables the on/off accessibility switch labels within the toggle.
+         */
+        this.enableOnOffLabels = config.get('toggleOnOffLabels');
+        /**
+         * Where to place the label relative to the input.
+         * `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL.
+         * `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL.
+         * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+         * `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
+         */
+        this.labelPlacement = 'start';
+        /**
+         * If true, screen readers will announce it as a required field. This property
+         * works only for accessibility purposes, it will not prevent the form from
+         * submitting if the value is invalid.
+         */
+        this.required = false;
+        this.setupGesture = async () => {
+            const { toggleTrack } = this;
+            if (toggleTrack) {
+                this.gesture = (await import('../../utils/gesture')).createGesture({
+                    el: toggleTrack,
+                    gestureName: 'toggle',
+                    gesturePriority: 100,
+                    threshold: 5,
+                    passive: false,
+                    onStart: () => this.onStart(),
+                    onMove: (ev) => this.onMove(ev),
+                    onEnd: (ev) => this.onEnd(ev),
+                });
+                this.disabledChanged();
+            }
+        };
+        this.onKeyDown = (ev) => {
+            if (ev.key === ' ') {
+                ev.preventDefault();
+                if (!this.disabled) {
+                    this.toggleChecked();
+                }
+            }
+        };
+        this.onClick = (ev) => {
+            /**
+             * The haptics for the toggle on tap is
+             * an iOS-only feature. As such, it should
+             * only trigger on iOS.
+             */
+            const enableHaptics = isPlatform('ios');
+            if (this.disabled) {
+                return;
+            }
+            ev.preventDefault();
+            if (this.lastDrag + 300 < Date.now()) {
+                this.toggleChecked();
+                enableHaptics && hapticSelection();
+            }
+        };
+        /**
+         * Stops propagation when the display label is clicked,
+         * otherwise, two clicks will be triggered.
+         */
+        this.onDivLabelClick = (ev) => {
+            ev.stopPropagation();
+        };
+        this.onFocus = () => {
+            this.ionFocus.emit();
+        };
+        this.onBlur = () => {
+            this.ionBlur.emit();
+        };
+        this.getSwitchLabelIcon = (mode, checked) => {
+            if (mode === 'md') {
+                return checked ? checkmarkOutline : removeOutline;
+            }
+            return checked ? removeOutline : ellipseOutline;
+        };
+    }
     disabledChanged() {
         if (this.gesture) {
             this.gesture.enable(!this.disabled);
@@ -196,22 +205,6 @@ export class Toggle {
         this.setupGesture();
         this.didLoad = true;
     }
-    setupGesture = async () => {
-        const { toggleTrack } = this;
-        if (toggleTrack) {
-            this.gesture = (await import('../../utils/gesture')).createGesture({
-                el: toggleTrack,
-                gestureName: 'toggle',
-                gesturePriority: 100,
-                threshold: 5,
-                passive: false,
-                onStart: () => this.onStart(),
-                onMove: (ev) => this.onMove(ev),
-                onEnd: (ev) => this.onEnd(ev),
-            });
-            this.disabledChanged();
-        }
-    };
     disconnectedCallback() {
         if (this.gesture) {
             this.gesture.destroy();
@@ -256,49 +249,6 @@ export class Toggle {
     setFocus() {
         this.el.focus();
     }
-    onKeyDown = (ev) => {
-        if (ev.key === ' ') {
-            ev.preventDefault();
-            if (!this.disabled) {
-                this.toggleChecked();
-            }
-        }
-    };
-    onClick = (ev) => {
-        /**
-         * The haptics for the toggle on tap is
-         * an iOS-only feature. As such, it should
-         * only trigger on iOS.
-         */
-        const enableHaptics = isPlatform('ios');
-        if (this.disabled) {
-            return;
-        }
-        ev.preventDefault();
-        if (this.lastDrag + 300 < Date.now()) {
-            this.toggleChecked();
-            enableHaptics && hapticSelection();
-        }
-    };
-    /**
-     * Stops propagation when the display label is clicked,
-     * otherwise, two clicks will be triggered.
-     */
-    onDivLabelClick = (ev) => {
-        ev.stopPropagation();
-    };
-    onFocus = () => {
-        this.ionFocus.emit();
-    };
-    onBlur = () => {
-        this.ionBlur.emit();
-    };
-    getSwitchLabelIcon = (mode, checked) => {
-        if (mode === 'md') {
-            return checked ? checkmarkOutline : removeOutline;
-        }
-        return checked ? removeOutline : ellipseOutline;
-    };
     renderOnOffSwitchLabels(mode, checked) {
         const icon = this.getSwitchLabelIcon(mode, checked);
         return (h("ion-icon", { class: {

package/dist/collection/components/toolbar/toolbar.js

@@ -18,14 +18,9 @@ import { getIonMode } from "../../global/ionic-global";
  * @part content - The container for the default slot, wrapping content provided without a named slot.
  */
 export class Toolbar {
-    childrenStyles = new Map();
-    el;
-    /**
-     * 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;
+    constructor() {
+        this.childrenStyles = new Map();
+    }
     componentWillLoad() {
         const buttons = Array.from(this.el.querySelectorAll('ion-buttons'));
         const firstButtons = buttons.find((button) => {