@ionic/core 8.4.2-dev.11736797843.16cc5058 → 8.4.2-dev.11737633140.1934dd0f

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

@@ -35,54 +35,6 @@ export class Toast {
         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)) {
@@ -125,6 +77,29 @@ export class Toast {
             const { swipeGesture } = this;
             return swipeGesture === 'vertical';
         };
+        this.revealContentToScreenReader = false;
+        this.overlayIndex = undefined;
+        this.delegate = undefined;
+        this.hasController = false;
+        this.color = undefined;
+        this.enterAnimation = undefined;
+        this.leaveAnimation = undefined;
+        this.cssClass = undefined;
+        this.duration = config.getNumber('toastDuration', 0);
+        this.header = undefined;
+        this.layout = 'baseline';
+        this.message = undefined;
+        this.keyboardClose = false;
+        this.position = 'bottom';
+        this.positionAnchor = undefined;
+        this.buttons = undefined;
+        this.translucent = false;
+        this.animated = true;
+        this.icon = undefined;
+        this.htmlAttributes = undefined;
+        this.swipeGesture = undefined;
+        this.isOpen = false;
+        this.trigger = undefined;
     }
     swipeGestureChanged() {
         /**
@@ -453,8 +428,6 @@ export class Toast {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "overlay-index",
                 "reflect": false
             },
@@ -480,9 +453,7 @@ export class Toast {
                             "text": undefined
                         }],
                     "text": ""
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "hasController": {
                 "type": "boolean",
@@ -501,8 +472,6 @@ export class Toast {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "has-controller",
                 "reflect": false,
                 "defaultValue": "false"
@@ -527,8 +496,6 @@ export class Toast {
                     "tags": [],
                     "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "color",
                 "reflect": true
             },
@@ -551,9 +518,7 @@ export class Toast {
                 "docs": {
                     "tags": [],
                     "text": "Animation to use when the toast is presented."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "leaveAnimation": {
                 "type": "unknown",
@@ -574,9 +539,7 @@ export class Toast {
                 "docs": {
                     "tags": [],
                     "text": "Animation to use when the toast is dismissed."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "cssClass": {
                 "type": "string",
@@ -592,8 +555,6 @@ export class Toast {
                     "tags": [],
                     "text": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "css-class",
                 "reflect": false
             },
@@ -611,8 +572,6 @@ export class Toast {
                     "tags": [],
                     "text": "How many milliseconds to wait before hiding the toast. By default, it will show\nuntil `dismiss()` is called."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "duration",
                 "reflect": false,
                 "defaultValue": "config.getNumber('toastDuration', 0)"
@@ -631,8 +590,6 @@ export class Toast {
                     "tags": [],
                     "text": "Header to be shown in the toast."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "header",
                 "reflect": false
             },
@@ -656,8 +613,6 @@ export class Toast {
                     "tags": [],
                     "text": "Defines how the message and buttons are laid out in the toast.\n'baseline': The message and the buttons will appear on the same line.\nMessage text may wrap within the message container.\n'stacked': The buttons containers and message will stack on top\nof each other. Use this if you have long text in your buttons."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "layout",
                 "reflect": false,
                 "defaultValue": "'baseline'"
@@ -682,8 +637,6 @@ export class Toast {
                     "tags": [],
                     "text": "Message to be shown in the toast.\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "message",
                 "reflect": false
             },
@@ -701,8 +654,6 @@ export class Toast {
                     "tags": [],
                     "text": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "keyboard-close",
                 "reflect": false,
                 "defaultValue": "false"
@@ -727,8 +678,6 @@ export class Toast {
                     "tags": [],
                     "text": "The starting position of the toast on the screen. Can be tweaked further\nusing the `positionAnchor` property."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "position",
                 "reflect": false,
                 "defaultValue": "'bottom'"
@@ -752,8 +701,6 @@ export class Toast {
                     "tags": [],
                     "text": "The element to anchor the toast's position to. Can be set as a direct reference\nor the ID of the element. With `position=\"bottom\"`, the toast will sit above the\nchosen element. With `position=\"top\"`, the toast will sit below the chosen element.\nWith `position=\"middle\"`, the value of `positionAnchor` is ignored."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "position-anchor",
                 "reflect": false
             },
@@ -776,9 +723,7 @@ export class Toast {
                 "docs": {
                     "tags": [],
                     "text": "An array of buttons for the toast."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "translucent": {
                 "type": "boolean",
@@ -794,8 +739,6 @@ export class Toast {
                     "tags": [],
                     "text": "If `true`, the toast will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "translucent",
                 "reflect": false,
                 "defaultValue": "false"
@@ -814,8 +757,6 @@ export class Toast {
                     "tags": [],
                     "text": "If `true`, the toast will animate."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "animated",
                 "reflect": false,
                 "defaultValue": "true"
@@ -834,8 +775,6 @@ export class Toast {
                     "tags": [],
                     "text": "The name of the icon to display, or the path to a valid SVG file. See `ion-icon`.\nhttps://ionic.io/ionicons"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "icon",
                 "reflect": false
             },
@@ -852,9 +791,7 @@ export class Toast {
                 "docs": {
                     "tags": [],
                     "text": "Additional attributes to pass to the toast."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "swipeGesture": {
                 "type": "string",
@@ -876,8 +813,6 @@ export class Toast {
                     "tags": [],
                     "text": "If set to 'vertical', the Toast can be dismissed with\na swipe gesture. The swipe direction is determined by\nthe value of the `position` property:\n`top`: The Toast can be swiped up to dismiss.\n`bottom`: The Toast can be swiped down to dismiss.\n`middle`: The Toast can be swiped up or down to dismiss."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "swipe-gesture",
                 "reflect": false
             },
@@ -895,8 +830,6 @@ export class Toast {
                     "tags": [],
                     "text": "If `true`, the toast will open. If `false`, the toast will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the toastController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe toast dismisses. You will need to do that in your code."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "is-open",
                 "reflect": false,
                 "defaultValue": "false"
@@ -915,8 +848,6 @@ export class Toast {
                     "tags": [],
                     "text": "An ID corresponding to the trigger element that\ncauses the toast to open when clicked."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "trigger",
                 "reflect": false
             }

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

@@ -24,39 +24,6 @@ export class Toggle {
         this.lastDrag = 0;
         this.inheritedAttributes = {};
         this.didLoad = false;
-        this.activated = 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';
         this.setupGesture = async () => {
             const { toggleTrack } = this;
             if (toggleTrack) {
@@ -94,6 +61,17 @@ export class Toggle {
             }
             return checked ? removeOutline : ellipseOutline;
         };
+        this.activated = false;
+        this.color = undefined;
+        this.name = this.inputId;
+        this.checked = false;
+        this.disabled = false;
+        this.value = 'on';
+        this.enableOnOffLabels = config.get('toggleOnOffLabels');
+        this.labelPlacement = 'start';
+        this.justify = undefined;
+        this.alignment = undefined;
+        this.required = false;
     }
     disabledChanged() {
         if (this.gesture) {
@@ -175,12 +153,12 @@ export class Toggle {
         return this.el.textContent !== '';
     }
     render() {
-        const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;
+        const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment, required } = this;
         const mode = getIonMode(this);
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: 'f52195ec3bc14c024647cb41319c32a4cd330e19', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '480c8d1145b183e8a06081340d9ffd65a113e5e9', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -190,10 +168,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: 'f8b3a215ad85b2cee611ad63449b584e1640f27f', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'f387b1ea840737a9737917e516834c887be99c09', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: '936af880db59fe377cd2de9101eb28a1c4fb8914', class: {
+            }) }, h("label", { key: '175e148a9fcb48a7e19c4d6ccb6d73ee576d6dd8', class: "toggle-wrapper" }, h("input", Object.assign({ key: '2d28f75d495f0e13dccc3f5c9beba26b7c12ea26', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, this.inheritedAttributes)), h("div", { key: '12556bb7c0aff6f9fbfc3e2c91ce989b0f5c8048', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: '80a6672e2e792c15011a9496dcd75363cdba31c6' })), h("div", { key: '2b2b318b38ab27b194c0dab4cecd77d9d780f2ca', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: 'cac9052a882a5ba4205f3bee3fc4f34eefe5e2c9' })), h("div", { key: 'dcc82cc33d2d88712da3a5540d3c9ce4366999c3', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }
@@ -231,8 +209,6 @@ export class Toggle {
                     "tags": [],
                     "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "color",
                 "reflect": true
             },
@@ -250,8 +226,6 @@ export class Toggle {
                     "tags": [],
                     "text": "The name of the control, which is submitted with the form data."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.inputId"
@@ -270,8 +244,6 @@ export class Toggle {
                     "tags": [],
                     "text": "If `true`, the toggle is selected."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "checked",
                 "reflect": false,
                 "defaultValue": "false"
@@ -290,8 +262,6 @@ export class Toggle {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the toggle."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -310,8 +280,6 @@ export class Toggle {
                     "tags": [],
                     "text": "The value of the toggle does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\nit's only used when the toggle participates in a native `<form>`."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "'on'"
@@ -330,8 +298,6 @@ export class Toggle {
                     "tags": [],
                     "text": "Enables the on/off accessibility switch labels within the toggle."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "enable-on-off-labels",
                 "reflect": false,
                 "defaultValue": "config.get('toggleOnOffLabels')"
@@ -350,8 +316,6 @@ export class Toggle {
                     "tags": [],
                     "text": "Where to place the label relative to the input.\n`\"start\"`: The label will appear to the left of the toggle in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the toggle in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\n`\"stacked\"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "label-placement",
                 "reflect": false,
                 "defaultValue": "'start'"
@@ -370,8 +334,6 @@ export class Toggle {
                     "tags": [],
                     "text": "How to pack the label and toggle within a line.\n`\"start\"`: The label and toggle will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and toggle will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and toggle will appear on opposite\nends of the line with space between the two elements.\nSetting this property will change the toggle `display` to `block`."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "justify",
                 "reflect": false
             },
@@ -389,10 +351,26 @@ export class Toggle {
                     "tags": [],
                     "text": "How to control the alignment of the toggle and label on the cross axis.\n`\"start\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\n`\"center\"`: The label and control will appear at the center of the cross axis in both LTR and RTL.\nSetting this property will change the toggle `display` to `block`."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "alignment",
                 "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the user must fill in a value before submitting a form."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -16,6 +16,7 @@ import { getIonMode } from "../../global/ionic-global";
 export class Toolbar {
     constructor() {
         this.childrenStyles = new Map();
+        this.color = undefined;
     }
     componentWillLoad() {
         const buttons = Array.from(this.el.querySelectorAll('ion-buttons'));
@@ -102,8 +103,6 @@ export class Toolbar {
                     "tags": [],
                     "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "color",
                 "reflect": true
             }

package/dist/docs.d.ts

@@ -316,14 +316,6 @@ export interface JsonDocsProp {
    * ```
    */
   required: boolean;
-  /**
-   * `true` if the prop has a `get()`. `false` otherwise
-   */
-  getter: boolean;
-  /**
-   * `true` if the prop has a `set()`. `false` otherwise
-   */
-  setter: boolean;
 }
 export interface JsonDocsMethod {
   name: string;