@ionic/core 9.0.1-dev.11787177893.1979eb13 → 9.0.1-dev.11787248963.10a00c73

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

@@ -8,18 +8,14 @@ import { getIonMode } from "../../global/ionic-global";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class CardHeader {
-    /**
-     * 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 card header 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;
+    constructor() {
+        /**
+         * If `true`, the card header 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;
+    }
     render() {
         const mode = getIonMode(this);
         return (h(Host, { key: '64246b81931203a64d553c788cd736f41e23f37b', class: createColorClasses(this.color, {

package/dist/collection/components/card-subtitle/card-subtitle.js

@@ -8,12 +8,6 @@ import { getIonMode } from "../../global/ionic-global";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class CardSubtitle {
-    /**
-     * 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;
     render() {
         const mode = getIonMode(this);
         return (h(Host, { key: '84d820a19d9074f9c8bc61ccba1ca40062a60b73', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {

package/dist/collection/components/card-title/card-title.js

@@ -8,12 +8,6 @@ import { getIonMode } from "../../global/ionic-global";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class CardTitle {
-    /**
-     * 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;
     render() {
         const mode = getIonMode(this);
         return (h(Host, { key: 'fca001a86396e83718d5211cd71912fdf40dea2f', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {

package/dist/collection/components/checkbox/checkbox.js

@@ -19,104 +19,101 @@ import { getIonMode } from "../../global/ionic-global";
  * @part error-text - Supporting text displayed beneath the checkbox label when the checkbox is invalid and touched.
  */
 export class Checkbox {
-    inputId = `ion-cb-${checkboxIds++}`;
-    inputLabelId = `${this.inputId}-lbl`;
-    helperTextId = `${this.inputId}-helper-text`;
-    errorTextId = `${this.inputId}-error-text`;
-    inheritedAttributes = {};
-    validationObserver;
-    itemFocusObserver;
-    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 name of the control, which is submitted with the form data.
-     */
-    name = this.inputId;
-    /**
-     * If `true`, the checkbox is selected.
-     */
-    checked = false;
-    /**
-     * If `true`, the checkbox will visually appear as indeterminate.
-     */
-    indeterminate = false;
-    /**
-     * If `true`, the user cannot interact with the checkbox.
-     */
-    disabled = false;
-    /**
-     * Text that is placed under the checkbox label and displayed when an error is detected.
-     */
-    errorText;
-    /**
-     * Text that is placed under the checkbox label and displayed when no error is detected.
-     */
-    helperText;
-    /**
-     * The value of the checkbox does not mean if it's checked or not, use the `checked`
-     * property for that.
-     *
-     * The value of a checkbox is analogous to the value of an `<input type="checkbox">`,
-     * it's only used when the checkbox participates in a native `<form>`.
-     */
-    value = 'on';
-    /**
-     * Where to place the label relative to the checkbox.
-     * `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.
-     * `"end"`: The label will appear to the right of the checkbox 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 checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
-     */
-    labelPlacement = 'start';
-    /**
-     * How to pack the label and checkbox within a line.
-     * `"start"`: The label and checkbox will appear on the left in LTR and
-     * on the right in RTL.
-     * `"end"`: The label and checkbox will appear on the right in LTR and
-     * on the left in RTL.
-     * `"space-between"`: The label and checkbox will appear on opposite
-     * ends of the line with space between the two elements.
-     * Setting this property will change the checkbox `display` to `block`.
-     */
-    justify;
-    /**
-     * How to control the alignment of the checkbox 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 checkbox `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;
-    /**
-     * Track validation state for proper aria-live announcements.
-     */
-    isInvalid = false;
-    hasLabelContent = false;
-    hintTextId;
-    /**
-     * Emitted when the checked property has changed as a result of a user action such as a click.
-     *
-     * This event will not emit when programmatically setting the `checked` property.
-     */
-    ionChange;
-    /**
-     * Emitted when the checkbox has focus.
-     */
-    ionFocus;
-    /**
-     * Emitted when the checkbox loses focus.
-     */
-    ionBlur;
+    constructor() {
+        this.inputId = `ion-cb-${checkboxIds++}`;
+        this.inputLabelId = `${this.inputId}-lbl`;
+        this.helperTextId = `${this.inputId}-helper-text`;
+        this.errorTextId = `${this.inputId}-error-text`;
+        this.inheritedAttributes = {};
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * If `true`, the checkbox is selected.
+         */
+        this.checked = false;
+        /**
+         * If `true`, the checkbox will visually appear as indeterminate.
+         */
+        this.indeterminate = false;
+        /**
+         * If `true`, the user cannot interact with the checkbox.
+         */
+        this.disabled = false;
+        /**
+         * The value of the checkbox does not mean if it's checked or not, use the `checked`
+         * property for that.
+         *
+         * The value of a checkbox is analogous to the value of an `<input type="checkbox">`,
+         * it's only used when the checkbox participates in a native `<form>`.
+         */
+        this.value = 'on';
+        /**
+         * Where to place the label relative to the checkbox.
+         * `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.
+         * `"end"`: The label will appear to the right of the checkbox 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 checkbox 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;
+        /**
+         * Track validation state for proper aria-live announcements.
+         */
+        this.isInvalid = false;
+        this.hasLabelContent = false;
+        /**
+         * Sets the checked property and emits
+         * the ionChange event. Use this to update the
+         * checked state in response to user-generated
+         * actions such as a click.
+         */
+        this.setChecked = (state) => {
+            const isChecked = (this.checked = state);
+            this.ionChange.emit({
+                checked: isChecked,
+                value: this.value,
+            });
+        };
+        this.toggleChecked = (ev) => {
+            ev.preventDefault();
+            this.setChecked(!this.checked);
+            this.indeterminate = false;
+        };
+        this.onFocus = () => {
+            this.ionFocus.emit();
+        };
+        this.onBlur = () => {
+            this.ionBlur.emit();
+        };
+        this.onKeyDown = (ev) => {
+            if (ev.key === ' ') {
+                ev.preventDefault();
+                if (!this.disabled) {
+                    this.toggleChecked(ev);
+                }
+            }
+        };
+        this.onClick = (ev) => {
+            if (this.disabled) {
+                return;
+            }
+            this.toggleChecked(ev);
+        };
+        /**
+         * Stops propagation when the display label is clicked,
+         * otherwise, two clicks will be triggered.
+         */
+        this.onDivLabelClick = (ev) => {
+            ev.stopPropagation();
+        };
+    }
     connectedCallback() {
         const { el } = this;
         if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
@@ -187,51 +184,6 @@ export class Checkbox {
     async setFocus() {
         this.el.focus();
     }
-    /**
-     * Sets the checked property and emits
-     * the ionChange event. Use this to update the
-     * checked state in response to user-generated
-     * actions such as a click.
-     */
-    setChecked = (state) => {
-        const isChecked = (this.checked = state);
-        this.ionChange.emit({
-            checked: isChecked,
-            value: this.value,
-        });
-    };
-    toggleChecked = (ev) => {
-        ev.preventDefault();
-        this.setChecked(!this.checked);
-        this.indeterminate = false;
-    };
-    onFocus = () => {
-        this.ionFocus.emit();
-    };
-    onBlur = () => {
-        this.ionBlur.emit();
-    };
-    onKeyDown = (ev) => {
-        if (ev.key === ' ') {
-            ev.preventDefault();
-            if (!this.disabled) {
-                this.toggleChecked(ev);
-            }
-        }
-    };
-    onClick = (ev) => {
-        if (this.disabled) {
-            return;
-        }
-        this.toggleChecked(ev);
-    };
-    /**
-     * Stops propagation when the display label is clicked,
-     * otherwise, two clicks will be triggered.
-     */
-    onDivLabelClick = (ev) => {
-        ev.stopPropagation();
-    };
     getHintTextId() {
         const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         if (isInvalid && errorText) {

package/dist/collection/components/chip/chip.js

@@ -8,20 +8,16 @@ import { getIonMode } from "../../global/ionic-global";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Chip {
-    /**
-     * 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;
-    /**
-     * Display an outline style button.
-     */
-    outline = false;
-    /**
-     * If `true`, the user cannot interact with the chip.
-     */
-    disabled = false;
+    constructor() {
+        /**
+         * Display an outline style button.
+         */
+        this.outline = false;
+        /**
+         * If `true`, the user cannot interact with the chip.
+         */
+        this.disabled = false;
+    }
     render() {
         const mode = getIonMode(this);
         return (h(Host, { key: 'fa2e9a4837ef87a17ef10f388e8caa7f604d9145', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {

package/dist/collection/components/col/col.js

@@ -8,126 +8,6 @@ const win = typeof window !== 'undefined' ? window : undefined;
 const SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));
 const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
 export class Col {
-    /**
-     * The amount to offset the column, in terms of how many columns it should shift to the end
-     * of the total available.
-     */
-    offset;
-    /**
-     * The amount to offset the column for xs screens, in terms of how many columns it should shift
-     * to the end of the total available.
-     */
-    offsetXs;
-    /**
-     * The amount to offset the column for sm screens, in terms of how many columns it should shift
-     * to the end of the total available.
-     */
-    offsetSm;
-    /**
-     * The amount to offset the column for md screens, in terms of how many columns it should shift
-     * to the end of the total available.
-     */
-    offsetMd;
-    /**
-     * The amount to offset the column for lg screens, in terms of how many columns it should shift
-     * to the end of the total available.
-     */
-    offsetLg;
-    /**
-     * The amount to offset the column for xl screens, in terms of how many columns it should shift
-     * to the end of the total available.
-     */
-    offsetXl;
-    /**
-     * The amount to pull the column, in terms of how many columns it should shift to the start of
-     * the total available.
-     */
-    pull;
-    /**
-     * The amount to pull the column for xs screens, in terms of how many columns it should shift
-     * to the start of the total available.
-     */
-    pullXs;
-    /**
-     * The amount to pull the column for sm screens, in terms of how many columns it should shift
-     * to the start of the total available.
-     */
-    pullSm;
-    /**
-     * The amount to pull the column for md screens, in terms of how many columns it should shift
-     * to the start of the total available.
-     */
-    pullMd;
-    /**
-     * The amount to pull the column for lg screens, in terms of how many columns it should shift
-     * to the start of the total available.
-     */
-    pullLg;
-    /**
-     * The amount to pull the column for xl screens, in terms of how many columns it should shift
-     * to the start of the total available.
-     */
-    pullXl;
-    /**
-     * The amount to push the column, in terms of how many columns it should shift to the end
-     * of the total available.
-     */
-    push;
-    /**
-     * The amount to push the column for xs screens, in terms of how many columns it should shift
-     * to the end of the total available.
-     */
-    pushXs;
-    /**
-     * The amount to push the column for sm screens, in terms of how many columns it should shift
-     * to the end of the total available.
-     */
-    pushSm;
-    /**
-     * The amount to push the column for md screens, in terms of how many columns it should shift
-     * to the end of the total available.
-     */
-    pushMd;
-    /**
-     * The amount to push the column for lg screens, in terms of how many columns it should shift
-     * to the end of the total available.
-     */
-    pushLg;
-    /**
-     * The amount to push the column for xl screens, in terms of how many columns it should shift
-     * to the end of the total available.
-     */
-    pushXl;
-    /**
-     * The size of the column, in terms of how many columns it should take up out of the total
-     * available. If `"auto"` is passed, the column will be the size of its content.
-     */
-    size;
-    /**
-     * The size of the column for xs screens, in terms of how many columns it should take up out
-     * of the total available. If `"auto"` is passed, the column will be the size of its content.
-     */
-    sizeXs;
-    /**
-     * The size of the column for sm screens, in terms of how many columns it should take up out
-     * of the total available. If `"auto"` is passed, the column will be the size of its content.
-     */
-    sizeSm;
-    /**
-     * The size of the column for md screens, in terms of how many columns it should take up out
-     * of the total available. If `"auto"` is passed, the column will be the size of its content.
-     */
-    sizeMd;
-    /**
-     * The size of the column for lg screens, in terms of how many columns it should take up out
-     * of the total available. If `"auto"` is passed, the column will be the size of its content.
-     */
-    sizeLg;
-    /**
-     * The size of the column for xl screens, in terms of how many columns it should take up out
-     * of the total available. If `"auto"` is passed, the column will be the size of its content.
-     */
-    sizeXl;
     onResize() {
         forceUpdate(this);
     }

package/dist/collection/components/content/content.js

@@ -15,99 +15,69 @@ import { getIonMode } from "../../global/ionic-global";
  * @part scroll - The scrollable container of the content.
  */
 export class Content {
-    watchDog = null;
-    isScrolling = false;
-    lastScroll = 0;
-    queued = false;
-    cTop = -1;
-    cBottom = -1;
-    scrollEl;
-    backgroundContentEl;
-    isMainContent = true;
-    resizeTimeout = null;
-    fullscreenResizeObserver;
-    inheritedAttributes = {};
-    tabsElement = null;
-    tabsLoadCallback;
-    // Detail is used in a hot loop in the scroll event, by allocating it here
-    // V8 will be able to inline any read/write to it since it's a monomorphic class.
-    // https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
-    detail = {
-        scrollTop: 0,
-        scrollLeft: 0,
-        type: 'scroll',
-        event: undefined,
-        startX: 0,
-        startY: 0,
-        startTime: 0,
-        currentX: 0,
-        currentY: 0,
-        velocityX: 0,
-        velocityY: 0,
-        deltaX: 0,
-        deltaY: 0,
-        currentTime: 0,
-        data: undefined,
-        isScrolling: true,
-    };
-    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 content will scroll behind the headers
-     * and footers. This effect can easily be seen by setting the toolbar
-     * to transparent.
-     */
-    fullscreen = false;
+    constructor() {
+        this.watchDog = null;
+        this.isScrolling = false;
+        this.lastScroll = 0;
+        this.queued = false;
+        this.cTop = -1;
+        this.cBottom = -1;
+        this.isMainContent = true;
+        this.resizeTimeout = null;
+        this.inheritedAttributes = {};
+        this.tabsElement = null;
+        // Detail is used in a hot loop in the scroll event, by allocating it here
+        // V8 will be able to inline any read/write to it since it's a monomorphic class.
+        // https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
+        this.detail = {
+            scrollTop: 0,
+            scrollLeft: 0,
+            type: 'scroll',
+            event: undefined,
+            startX: 0,
+            startY: 0,
+            startTime: 0,
+            currentX: 0,
+            currentY: 0,
+            velocityX: 0,
+            velocityY: 0,
+            deltaX: 0,
+            deltaY: 0,
+            currentTime: 0,
+            data: undefined,
+            isScrolling: true,
+        };
+        /**
+         * If `true`, the content will scroll behind the headers
+         * and footers. This effect can easily be seen by setting the toolbar
+         * to transparent.
+         */
+        this.fullscreen = false;
+        /**
+         * Controls where the fixed content is placed relative to the main content
+         * in the DOM. This can be used to control the order in which fixed elements
+         * receive keyboard focus.
+         * For example, if a FAB in the fixed slot should receive keyboard focus before
+         * the main page content, set this property to `'before'`.
+         */
+        this.fixedSlotPlacement = 'after';
+        /**
+         * If you want to enable the content scrolling in the X axis, set this property to `true`.
+         */
+        this.scrollX = false;
+        /**
+         * If you want to disable the content scrolling in the Y axis, set this property to `false`.
+         */
+        this.scrollY = true;
+        /**
+         * Because of performance reasons, ionScroll events are disabled by default, in order to enable them
+         * and start listening from (ionScroll), set this property to `true`.
+         */
+        this.scrollEvents = false;
+    }
     fullscreenChanged() {
         this.setupFullscreenResizeObserver();
     }
-    /**
-     * Controls where the fixed content is placed relative to the main content
-     * in the DOM. This can be used to control the order in which fixed elements
-     * receive keyboard focus.
-     * For example, if a FAB in the fixed slot should receive keyboard focus before
-     * the main page content, set this property to `'before'`.
-     */
-    fixedSlotPlacement = 'after';
-    /**
-     * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.
-     * If the content exceeds the bounds of ionContent, nothing will change.
-     * Note, this does not disable the system bounce on iOS. That is an OS level setting.
-     */
-    forceOverscroll;
-    /**
-     * If you want to enable the content scrolling in the X axis, set this property to `true`.
-     */
-    scrollX = false;
-    /**
-     * If you want to disable the content scrolling in the Y axis, set this property to `false`.
-     */
-    scrollY = true;
-    /**
-     * Because of performance reasons, ionScroll events are disabled by default, in order to enable them
-     * and start listening from (ionScroll), set this property to `true`.
-     */
-    scrollEvents = false;
-    /**
-     * Emitted when the scroll has started. This event is disabled by default.
-     * Set `scrollEvents` to `true` to enable.
-     */
-    ionScrollStart;
-    /**
-     * Emitted while scrolling. This event is disabled by default.
-     * Set `scrollEvents` to `true` to enable.
-     */
-    ionScroll;
-    /**
-     * Emitted when the scroll has ended. This event is disabled by default.
-     * Set `scrollEvents` to `true` to enable.
-     */
-    ionScrollEnd;
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }