@ionic/core 9.0.0 → 9.0.1-nightly.20260820

package/dist/collection/components/input-password-toggle/input-password-toggle.js

@@ -10,26 +10,19 @@ import { getIonMode } from "../../global/ionic-global";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class InputPasswordToggle {
-    inputElRef;
-    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;
-    /**
-     * The icon that can be used to represent showing a password. If not set, the "eye" Ionicon will be used.
-     */
-    showIcon;
-    /**
-     * The icon that can be used to represent hiding a password. If not set, the "eyeOff" Ionicon will be used.
-     */
-    hideIcon;
-    /**
-     * @internal
-     */
-    type = 'password';
+    constructor() {
+        /**
+         * @internal
+         */
+        this.type = 'password';
+        this.togglePasswordVisibility = () => {
+            const { inputElRef } = this;
+            if (!inputElRef) {
+                return;
+            }
+            inputElRef.type = inputElRef.type === 'text' ? 'password' : 'text';
+        };
+    }
     /**
      * Whenever the input type changes we need to re-run validation to ensure the password
      * toggle is being used with the correct input type. If the application changes the type
@@ -60,13 +53,6 @@ export class InputPasswordToggle {
     disconnectedCallback() {
         this.inputElRef = null;
     }
-    togglePasswordVisibility = () => {
-        const { inputElRef } = this;
-        if (!inputElRef) {
-            return;
-        }
-        inputElRef.type = inputElRef.type === 'text' ? 'password' : 'text';
-    };
     render() {
         const { color, type } = this;
         const mode = getIonMode(this);

package/dist/collection/components/item/item.js

@@ -20,80 +20,43 @@ const INDICATOR_CONTROL_SELECTOR = 'ion-checkbox, ion-radio, ion-toggle';
  * @part detail-icon - The chevron icon for the item. Only applies when `detail="true"`.
  */
 export class Item {
-    labelColorStyles = {};
-    itemStyles = new Map();
-    inheritedAriaAttributes = {};
-    indicatorControlObserver;
-    didLoad = false;
-    el;
-    multipleInputs = false;
-    focusable = true;
-    isInteractive = false;
-    hasSlottedIndicatorControl = 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;
-    /**
-     * If `true`, a button tag will be rendered and the item will be tappable.
-     */
-    button = false;
-    /**
-     * 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.
-     */
-    detail;
-    /**
-     * The icon to use when `detail` is set to `true`.
-     */
-    detailIcon = chevronForward;
-    /**
-     * If `true`, the user cannot interact with the item.
-     */
-    disabled = false;
-    /**
-     * 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;
-    /**
-     * Contains a URL or a URL fragment that the hyperlink points to.
-     * If this property is set, an anchor tag will be rendered.
-     */
-    href;
-    /**
-     * Specifies the relationship of the target object to the link object.
-     * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
-     */
-    rel;
-    /**
-     * How the bottom border should be displayed on the item.
-     */
-    lines;
-    /**
-     * When using a router, it specifies the transition animation when navigating to
-     * another page using `href`.
-     */
-    routerAnimation;
-    /**
-     * When using a router, it specifies the transition direction when navigating to
-     * another page using `href`.
-     */
-    routerDirection = 'forward';
-    /**
-     * Specifies where to display the linked URL.
-     * Only applies when an `href` is provided.
-     * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
-     */
-    target;
-    /**
-     * The type of the button. Only used when an `onclick` or `button` property is present.
-     */
-    type = 'button';
+    constructor() {
+        this.labelColorStyles = {};
+        this.itemStyles = new Map();
+        this.inheritedAriaAttributes = {};
+        this.didLoad = false;
+        this.multipleInputs = false;
+        this.focusable = true;
+        this.isInteractive = false;
+        this.hasSlottedIndicatorControl = false;
+        /**
+         * If `true`, a button tag will be rendered and the item will be tappable.
+         */
+        this.button = false;
+        /**
+         * The icon to use when `detail` is set to `true`.
+         */
+        this.detailIcon = chevronForward;
+        /**
+         * If `true`, the user cannot interact with the item.
+         */
+        this.disabled = false;
+        /**
+         * When using a router, it specifies the transition direction when navigating to
+         * another page using `href`.
+         */
+        this.routerDirection = 'forward';
+        /**
+         * The type of the button. Only used when an `onclick` or `button` property is present.
+         */
+        this.type = 'button';
+        // slot change listener updates state to reflect how/if item should be interactive
+        this.updateInteractivityOnSlotChange = () => {
+            this.setIsInteractive();
+            this.setMultipleInputs();
+            this.setHasSlottedIndicatorControl();
+        };
+    }
     buttonChanged() {
         // Update the focusable option when the button option is changed
         this.focusable = this.isFocusable();
@@ -236,12 +199,6 @@ export class Item {
             return slotted !== null && !slotted.getAttribute('slot');
         });
     }
-    // slot change listener updates state to reflect how/if item should be interactive
-    updateInteractivityOnSlotChange = () => {
-        this.setIsInteractive();
-        this.setMultipleInputs();
-        this.setHasSlottedIndicatorControl();
-    };
     // If the item contains an input including a checkbox, datetime, select, or radio
     // then the item will have a clickable input cover that covers the item
     // that should get the hover, focused and activated states UNLESS it has multiple

package/dist/collection/components/item-divider/item-divider.js

@@ -15,21 +15,16 @@ import { getIonMode } from "../../global/ionic-global";
  * @part container - The wrapper element that contains the default slot.
  */
 export class ItemDivider {
-    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;
-    /**
-     * When it's set to `true`, the item-divider will stay visible when it reaches the top
-     * of the viewport until the next `ion-item-divider` replaces it.
-     *
-     * This feature relies in `position:sticky`:
-     * https://caniuse.com/#feat=css-sticky
-     */
-    sticky = false;
+    constructor() {
+        /**
+         * When it's set to `true`, the item-divider will stay visible when it reaches the top
+         * of the viewport until the next `ion-item-divider` replaces it.
+         *
+         * This feature relies in `position:sticky`:
+         * https://caniuse.com/#feat=css-sticky
+         */
+        this.sticky = false;
+    }
     render() {
         const mode = getIonMode(this);
         return (h(Host, { key: 'b191727cc26c600287fd856e49216bf1ae1d5aad', class: createColorClasses(this.color, {

package/dist/collection/components/item-option/item-option.js

@@ -19,54 +19,26 @@ import { getIonMode } from "../../global/ionic-global";
  * @part container - The container element that wraps the start, icon-only, default, and end slots.
  */
 export class ItemOption {
-    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;
-    /**
-     * If `true`, the user cannot interact with the item option.
-     */
-    disabled = false;
-    /**
-     * 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;
-    /**
-     * If `true`, the option will expand to take up the available width and cover any other options.
-     */
-    expandable = false;
-    /**
-     * Contains a URL or a URL fragment that the hyperlink points to.
-     * If this property is set, an anchor tag will be rendered.
-     */
-    href;
-    /**
-     * Specifies the relationship of the target object to the link object.
-     * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
-     */
-    rel;
-    /**
-     * Specifies where to display the linked URL.
-     * Only applies when an `href` is provided.
-     * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
-     */
-    target;
-    /**
-     * The type of the button.
-     */
-    type = 'button';
-    onClick = (ev) => {
-        const el = ev.target.closest('ion-item-option');
-        if (el) {
-            ev.preventDefault();
-        }
-    };
+    constructor() {
+        /**
+         * If `true`, the user cannot interact with the item option.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the option will expand to take up the available width and cover any other options.
+         */
+        this.expandable = false;
+        /**
+         * The type of the button.
+         */
+        this.type = 'button';
+        this.onClick = (ev) => {
+            const el = ev.target.closest('ion-item-option');
+            if (el) {
+                ev.preventDefault();
+            }
+        };
+    }
     render() {
         const { disabled, expandable, href } = this;
         const TagType = href === undefined ? 'button' : 'a';

package/dist/collection/components/item-options/item-options.js

@@ -5,16 +5,13 @@ import { Host, h } from "@stencil/core";
 import { isEndSide } from "../../utils/helpers";
 import { getIonMode } from "../../global/ionic-global";
 export class ItemOptions {
-    el;
-    /**
-     * The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.
-     *
-     */
-    side = 'end';
-    /**
-     * Emitted when the item has been fully swiped.
-     */
-    ionSwipe; // TODO(FW-2832): type
+    constructor() {
+        /**
+         * The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.
+         *
+         */
+        this.side = 'end';
+    }
     /** @internal */
     async fireSwipeEvent() {
         this.ionSwipe.emit({

package/dist/collection/components/item-sliding/item-sliding.js

@@ -11,35 +11,27 @@ const SWIPE_MARGIN = 30;
 const ELASTIC_FACTOR = 0.55;
 let openSlidingItem;
 export class ItemSliding {
-    item = null;
-    openAmount = 0;
-    initialOpenAmount = 0;
-    optsWidthRightSide = 0;
-    optsWidthLeftSide = 0;
-    sides = 0 /* ItemSide.None */;
-    tmr;
-    leftOptions;
-    rightOptions;
-    optsDirty = true;
-    gesture;
-    contentEl = null;
-    initialContentScrollY = true;
-    mutationObserver;
-    el;
-    state = 2 /* SlidingState.Disabled */;
-    /**
-     * If `true`, the user cannot interact with the sliding item.
-     */
-    disabled = false;
+    constructor() {
+        this.item = null;
+        this.openAmount = 0;
+        this.initialOpenAmount = 0;
+        this.optsWidthRightSide = 0;
+        this.optsWidthLeftSide = 0;
+        this.sides = 0 /* ItemSide.None */;
+        this.optsDirty = true;
+        this.contentEl = null;
+        this.initialContentScrollY = true;
+        this.state = 2 /* SlidingState.Disabled */;
+        /**
+         * If `true`, the user cannot interact with the sliding item.
+         */
+        this.disabled = false;
+    }
     disabledChanged() {
         if (this.gesture) {
             this.gesture.enable(!this.disabled);
         }
     }
-    /**
-     * Emitted when the sliding position changes.
-     */
-    ionDrag;
     async connectedCallback() {
         const { el } = this;
         this.item = el.querySelector('ion-item');

package/dist/collection/components/label/label.js

@@ -8,30 +8,10 @@ import { getIonMode } from "../../global/ionic-global";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Label {
-    inRange = false;
-    loadTimeout;
-    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;
-    /**
-     * The position determines where and how the label behaves inside an item.
-     */
-    position;
-    /**
-     * Emitted when the color changes.
-     * @internal
-     */
-    ionColor;
-    /**
-     * Emitted when the styles change.
-     * @internal
-     */
-    ionStyle;
-    noAnimate = false;
+    constructor() {
+        this.inRange = false;
+        this.noAnimate = false;
+    }
     componentWillLoad() {
         this.inRange = !!this.el.closest('ion-range');
         this.noAnimate = this.position === 'floating';

package/dist/collection/components/list/list.js

@@ -7,15 +7,12 @@ import { getIonMode } from "../../global/ionic-global";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class List {
-    el;
-    /**
-     * How the bottom border should be displayed on all items.
-     */
-    lines;
-    /**
-     * If `true`, the list will have margin around it and rounded corners.
-     */
-    inset = false;
+    constructor() {
+        /**
+         * If `true`, the list will have margin around it and rounded corners.
+         */
+        this.inset = false;
+    }
     /**
      * If `ion-item-sliding` are used inside the list, this method closes
      * any open sliding item.

package/dist/collection/components/list-header/list-header.js

@@ -10,16 +10,6 @@ import { getIonMode } from "../../global/ionic-global";
  * @part inner - The inner wrapper element that arranges the list header content.
  */
 export class ListHeader {
-    /**
-     * 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;
-    /**
-     * How the bottom border should be displayed on the list header.
-     */
-    lines;
     render() {
         const { lines } = this;
         const mode = getIonMode(this);

package/dist/collection/components/loading/loading.js

@@ -19,84 +19,52 @@ import { mdLeaveAnimation } from "./animations/md.leave";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Loading {
-    delegateController = createDelegateController(this);
-    lockController = createLockController();
-    triggerController = createTriggerController();
-    customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
-    durationTimeout;
-    presented = false;
-    lastFocus;
-    el;
-    /** @internal */
-    overlayIndex;
-    /** @internal */
-    delegate;
-    /** @internal */
-    hasController = false;
-    /**
-     * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
-     */
-    keyboardClose = true;
-    /**
-     * Animation to use when the loading indicator is presented.
-     */
-    enterAnimation;
-    /**
-     * Animation to use when the loading indicator is dismissed.
-     */
-    leaveAnimation;
-    /**
-     * Optional text content to display in the loading indicator.
-     *
-     * 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;
-    /**
-     * Additional classes to apply for custom CSS. If multiple classes are
-     * provided they should be separated by spaces.
-     */
-    cssClass;
-    /**
-     * Number of milliseconds to wait before dismissing the loading indicator.
-     */
-    duration = 0;
-    /**
-     * If `true`, the loading indicator will be dismissed when the backdrop is clicked.
-     */
-    backdropDismiss = false;
-    /**
-     * If `true`, a backdrop will be displayed behind the loading indicator.
-     */
-    showBackdrop = true;
-    /**
-     * The name of the spinner to display.
-     */
-    spinner;
-    /**
-     * If `true`, the loading indicator 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 loading indicator will animate.
-     */
-    animated = true;
-    /**
-     * Additional attributes to pass to the loader.
-     */
-    htmlAttributes;
-    /**
-     * If `true`, the loading indicator will open. If `false`, the loading indicator will close.
-     * Use this if you need finer grained control over presentation, otherwise
-     * just use the loadingController or the `trigger` property.
-     * Note: `isOpen` will not automatically be set back to `false` when
-     * the loading indicator dismisses. You will need to do that in your code.
-     */
-    isOpen = false;
+    constructor() {
+        this.delegateController = createDelegateController(this);
+        this.lockController = createLockController();
+        this.triggerController = createTriggerController();
+        this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
+        this.presented = false;
+        /** @internal */
+        this.hasController = false;
+        /**
+         * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+         */
+        this.keyboardClose = true;
+        /**
+         * Number of milliseconds to wait before dismissing the loading indicator.
+         */
+        this.duration = 0;
+        /**
+         * If `true`, the loading indicator will be dismissed when the backdrop is clicked.
+         */
+        this.backdropDismiss = false;
+        /**
+         * If `true`, a backdrop will be displayed behind the loading indicator.
+         */
+        this.showBackdrop = true;
+        /**
+         * If `true`, the loading indicator 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 loading indicator will animate.
+         */
+        this.animated = true;
+        /**
+         * If `true`, the loading indicator will open. If `false`, the loading indicator will close.
+         * Use this if you need finer grained control over presentation, otherwise
+         * just use the loadingController or the `trigger` property.
+         * Note: `isOpen` will not automatically be set back to `false` when
+         * the loading indicator dismisses. You will need to do that in your code.
+         */
+        this.isOpen = false;
+        this.onBackdropTap = () => {
+            this.dismiss(undefined, BACKDROP);
+        };
+    }
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {
             this.present();
@@ -105,53 +73,12 @@ export class Loading {
             this.dismiss();
         }
     }
-    /**
-     * An ID corresponding to the trigger element that
-     * causes the loading indicator to open when clicked.
-     */
-    trigger;
     triggerChanged() {
         const { trigger, el, triggerController } = this;
         if (trigger) {
             triggerController.addClickListener(el, trigger);
         }
     }
-    /**
-     * Emitted after the loading has presented.
-     */
-    didPresent;
-    /**
-     * Emitted before the loading has presented.
-     */
-    willPresent;
-    /**
-     * Emitted before the loading has dismissed.
-     */
-    willDismiss;
-    /**
-     * Emitted after the loading has dismissed.
-     */
-    didDismiss;
-    /**
-     * Emitted after the loading indicator has presented.
-     * Shorthand for ionLoadingWillDismiss.
-     */
-    didPresentShorthand;
-    /**
-     * Emitted before the loading indicator has presented.
-     * Shorthand for ionLoadingWillPresent.
-     */
-    willPresentShorthand;
-    /**
-     * Emitted before the loading indicator has dismissed.
-     * Shorthand for ionLoadingWillDismiss.
-     */
-    willDismissShorthand;
-    /**
-     * Emitted after the loading indicator has dismissed.
-     * Shorthand for ionLoadingDidDismiss.
-     */
-    didDismissShorthand;
     connectedCallback() {
         prepareOverlay(this.el);
         this.triggerChanged();
@@ -239,9 +166,6 @@ export class Loading {
     onWillDismiss() {
         return eventMethod(this.el, 'ionLoadingWillDismiss');
     }
-    onBackdropTap = () => {
-        this.dismiss(undefined, BACKDROP);
-    };
     renderLoadingMessage(msgId) {
         const { customHTMLEnabled, message } = this;
         if (customHTMLEnabled) {