@ionic/core 8.5.4-dev.11744406052.1d9f8ea6 → 8.5.4-dev.11744646756.1244bf71

package/dist/collection/components/range/range.js

@@ -34,6 +34,59 @@ export class Range {
         this.inheritedAttributes = {};
         this.contentEl = null;
         this.initialContentScrollY = true;
+        this.ratioA = 0;
+        this.ratioB = 0;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.rangeId;
+        /**
+         * Show two knobs.
+         */
+        this.dualKnobs = false;
+        /**
+         * Minimum integer value of the range.
+         */
+        this.min = 0;
+        /**
+         * Maximum integer value of the range.
+         */
+        this.max = 100;
+        /**
+         * If `true`, a pin with integer value is shown when the knob
+         * is pressed.
+         */
+        this.pin = false;
+        /**
+         * A callback used to format the pin text.
+         * By default the pin text is set to `Math.round(value)`.
+         *
+         * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
+         * if you need to access `this` from within the callback.
+         */
+        this.pinFormatter = (value) => Math.round(value);
+        /**
+         * If `true`, the knob snaps to tick marks evenly spaced based
+         * on the step property value.
+         */
+        this.snaps = false;
+        /**
+         * Specifies the value granularity.
+         */
+        this.step = 1;
+        /**
+         * If `true`, tick marks are displayed based on the step value.
+         * Only applies when `snaps` is `true`.
+         */
+        this.ticks = true;
+        /**
+         * If `true`, the user cannot interact with the range.
+         */
+        this.disabled = false;
+        /**
+         * the value of the range.
+         */
+        this.value = 0;
         /**
          * Compares two RangeValue inputs to determine if they are different.
          *
@@ -61,6 +114,14 @@ export class Range {
                 return this.clampBounds(value);
             }
         };
+        /**
+         * Where to place the label relative to the range.
+         * `"start"`: The label will appear to the left of the range in LTR and to the right in RTL.
+         * `"end"`: The label will appear to the right of the range 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 range regardless of the direction.
+         */
+        this.labelPlacement = 'start';
         this.setupGesture = async () => {
             const rangeSlider = this.rangeSlider;
             if (rangeSlider) {
@@ -113,25 +174,6 @@ export class Range {
                 this.ionFocus.emit();
             }
         };
-        this.ratioA = 0;
-        this.ratioB = 0;
-        this.pressedKnob = undefined;
-        this.color = undefined;
-        this.debounce = undefined;
-        this.name = this.rangeId;
-        this.label = undefined;
-        this.dualKnobs = false;
-        this.min = 0;
-        this.max = 100;
-        this.pin = false;
-        this.pinFormatter = (value) => Math.round(value);
-        this.snaps = false;
-        this.step = 1;
-        this.ticks = true;
-        this.activeBarStart = undefined;
-        this.disabled = false;
-        this.value = 0;
-        this.labelPlacement = 'start';
     }
     debounceChanged() {
         const { ionInput, debounce, originalIonInput } = this;
@@ -628,6 +670,7 @@ export class Range {
         return {
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -646,11 +689,13 @@ export class Range {
                     "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)."
                 },
-                "attribute": "color",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "debounce": {
                 "type": "number",
+                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -663,11 +708,13 @@ export class Range {
                     "tags": [],
                     "text": "How long, in milliseconds, to wait to trigger the\n`ionInput` event after each change in the range value."
                 },
-                "attribute": "debounce",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -680,12 +727,14 @@ export class Range {
                     "tags": [],
                     "text": "The name of the control, which is submitted with the form data."
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "this.rangeId"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -698,11 +747,13 @@ export class Range {
                     "tags": [],
                     "text": "The text to display as the control's label. Use this over the `label` slot if\nyou only need plain text. The `label` property will take priority over the\n`label` slot if both are used."
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "dualKnobs": {
                 "type": "boolean",
+                "attribute": "dual-knobs",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -715,12 +766,14 @@ export class Range {
                     "tags": [],
                     "text": "Show two knobs."
                 },
-                "attribute": "dual-knobs",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "min": {
                 "type": "number",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -733,12 +786,14 @@ export class Range {
                     "tags": [],
                     "text": "Minimum integer value of the range."
                 },
-                "attribute": "min",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "0"
             },
             "max": {
                 "type": "number",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -751,12 +806,14 @@ export class Range {
                     "tags": [],
                     "text": "Maximum integer value of the range."
                 },
-                "attribute": "max",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "100"
             },
             "pin": {
                 "type": "boolean",
+                "attribute": "pin",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -769,12 +826,14 @@ export class Range {
                     "tags": [],
                     "text": "If `true`, a pin with integer value is shown when the knob\nis pressed."
                 },
-                "attribute": "pin",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "pinFormatter": {
                 "type": "unknown",
+                "attribute": "pin-formatter",
                 "mutable": false,
                 "complexType": {
                     "original": "PinFormatter",
@@ -793,10 +852,13 @@ export class Range {
                     "tags": [],
                     "text": "A callback used to format the pin text.\nBy default the pin text is set to `Math.round(value)`.\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback."
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "(value: number): number => Math.round(value)"
             },
             "snaps": {
                 "type": "boolean",
+                "attribute": "snaps",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -809,12 +871,14 @@ export class Range {
                     "tags": [],
                     "text": "If `true`, the knob snaps to tick marks evenly spaced based\non the step property value."
                 },
-                "attribute": "snaps",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "step": {
                 "type": "number",
+                "attribute": "step",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -827,12 +891,14 @@ export class Range {
                     "tags": [],
                     "text": "Specifies the value granularity."
                 },
-                "attribute": "step",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "1"
             },
             "ticks": {
                 "type": "boolean",
+                "attribute": "ticks",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -845,12 +911,14 @@ export class Range {
                     "tags": [],
                     "text": "If `true`, tick marks are displayed based on the step value.\nOnly applies when `snaps` is `true`."
                 },
-                "attribute": "ticks",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "activeBarStart": {
                 "type": "number",
+                "attribute": "active-bar-start",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -863,11 +931,13 @@ export class Range {
                     "tags": [],
                     "text": "The start position of the range active bar. This feature is only available with a single knob (dualKnobs=\"false\").\nValid values are greater than or equal to the min value and less than or equal to the max value."
                 },
-                "attribute": "active-bar-start",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -880,12 +950,14 @@ export class Range {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the range."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "number",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "RangeValue",
@@ -904,12 +976,14 @@ export class Range {
                     "tags": [],
                     "text": "the value of the range."
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "0"
             },
             "labelPlacement": {
                 "type": "string",
+                "attribute": "label-placement",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'fixed' | 'stacked'",
@@ -922,7 +996,8 @@ export class Range {
                     "tags": [],
                     "text": "Where to place the label relative to the range.\n`\"start\"`: The label will appear to the left of the range in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the range 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 range regardless of the direction."
                 },
-                "attribute": "label-placement",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'start'"
             }

package/dist/collection/components/refresher/refresher.js

@@ -23,12 +23,62 @@ export class Refresher {
         this.lastVelocityY = 0;
         this.animations = [];
         this.nativeRefresher = false;
+        /**
+         * The current state which the refresher is in. The refresher's states include:
+         *
+         * - `inactive` - The refresher is not being pulled down or refreshing and is currently hidden.
+         * - `pulling` - The user is actively pulling down the refresher, but has not reached the point yet that if the user lets go, it'll refresh.
+         * - `cancelling` - The user pulled down the refresher and let go, but did not pull down far enough to kick off the `refreshing` state. After letting go, the refresher is in the `cancelling` state while it is closing, and will go back to the `inactive` state once closed.
+         * - `ready` - The user has pulled down the refresher far enough that if they let go, it'll begin the `refreshing` state.
+         * - `refreshing` - The refresher is actively waiting on the async operation to end. Once the refresh handler calls `complete()` it will begin the `completing` state.
+         * - `completing` - The `refreshing` state has finished and the refresher is in the way of closing itself. Once closed, the refresher will go back to the `inactive` state.
+         */
         this.state = 1 /* RefresherState.Inactive */;
+        /**
+         * The minimum distance the user must pull down until the
+         * refresher will go into the `refreshing` state.
+         * Does not apply when the refresher content uses a spinner,
+         * enabling the native refresher.
+         */
         this.pullMin = 60;
+        /**
+         * The maximum distance of the pull until the refresher
+         * will automatically go into the `refreshing` state.
+         * Defaults to the result of `pullMin + 60`.
+         * Does not apply when  the refresher content uses a spinner,
+         * enabling the native refresher.
+         */
         this.pullMax = this.pullMin + 60;
+        /**
+         * Time it takes to close the refresher.
+         * Does not apply when the refresher content uses a spinner,
+         * enabling the native refresher.
+         */
         this.closeDuration = '280ms';
+        /**
+         * Time it takes the refresher to snap back to the `refreshing` state.
+         * Does not apply when the refresher content uses a spinner,
+         * enabling the native refresher.
+         */
         this.snapbackDuration = '280ms';
+        /**
+         * How much to multiply the pull speed by. To slow the pull animation down,
+         * pass a number less than `1`. To speed up the pull, pass a number greater
+         * than `1`. The default value is `1` which is equal to the speed of the cursor.
+         * If a negative value is passed in, the factor will be `1` instead.
+         *
+         * For example: If the value passed is `1.2` and the content is dragged by
+         * `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels
+         * (an increase of 20 percent). If the value passed is `0.8`, the dragged amount
+         * will be `8` pixels, less than the amount the cursor has moved.
+         *
+         * Does not apply when the refresher content uses a spinner,
+         * enabling the native refresher.
+         */
         this.pullFactor = 1;
+        /**
+         * If `true`, the refresher will be hidden.
+         */
         this.disabled = false;
     }
     disabledChanged() {
@@ -651,6 +701,7 @@ export class Refresher {
         return {
             "pullMin": {
                 "type": "number",
+                "attribute": "pull-min",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -663,12 +714,14 @@ export class Refresher {
                     "tags": [],
                     "text": "The minimum distance the user must pull down until the\nrefresher will go into the `refreshing` state.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher."
                 },
-                "attribute": "pull-min",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "60"
             },
             "pullMax": {
                 "type": "number",
+                "attribute": "pull-max",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -681,12 +734,14 @@ export class Refresher {
                     "tags": [],
                     "text": "The maximum distance of the pull until the refresher\nwill automatically go into the `refreshing` state.\nDefaults to the result of `pullMin + 60`.\nDoes not apply when  the refresher content uses a spinner,\nenabling the native refresher."
                 },
-                "attribute": "pull-max",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "this.pullMin + 60"
             },
             "closeDuration": {
                 "type": "string",
+                "attribute": "close-duration",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -699,12 +754,14 @@ export class Refresher {
                     "tags": [],
                     "text": "Time it takes to close the refresher.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher."
                 },
-                "attribute": "close-duration",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'280ms'"
             },
             "snapbackDuration": {
                 "type": "string",
+                "attribute": "snapback-duration",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -717,12 +774,14 @@ export class Refresher {
                     "tags": [],
                     "text": "Time it takes the refresher to snap back to the `refreshing` state.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher."
                 },
-                "attribute": "snapback-duration",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'280ms'"
             },
             "pullFactor": {
                 "type": "number",
+                "attribute": "pull-factor",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -735,12 +794,14 @@ export class Refresher {
                     "tags": [],
                     "text": "How much to multiply the pull speed by. To slow the pull animation down,\npass a number less than `1`. To speed up the pull, pass a number greater\nthan `1`. The default value is `1` which is equal to the speed of the cursor.\nIf a negative value is passed in, the factor will be `1` instead.\n\nFor example: If the value passed is `1.2` and the content is dragged by\n`10` pixels, instead of `10` pixels the content will be pulled by `12` pixels\n(an increase of 20 percent). If the value passed is `0.8`, the dragged amount\nwill be `8` pixels, less than the amount the cursor has moved.\n\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher."
                 },
-                "attribute": "pull-factor",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "1"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -753,7 +814,8 @@ export class Refresher {
                     "tags": [],
                     "text": "If `true`, the refresher will be hidden."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -12,10 +12,6 @@ import { SPINNERS } from "../spinner/spinner-configs";
 export class RefresherContent {
     constructor() {
         this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
-        this.pullingIcon = undefined;
-        this.pullingText = undefined;
-        this.refreshingSpinner = undefined;
-        this.refreshingText = undefined;
     }
     componentWillLoad() {
         if (this.pullingIcon === undefined) {
@@ -59,6 +55,7 @@ export class RefresherContent {
         return {
             "pullingIcon": {
                 "type": "string",
+                "attribute": "pulling-icon",
                 "mutable": true,
                 "complexType": {
                     "original": "SpinnerTypes | string | null",
@@ -77,11 +74,13 @@ export class RefresherContent {
                     "tags": [],
                     "text": "A static icon or a spinner to display when you begin to pull down.\nA spinner name can be provided to gradually show tick marks\nwhen pulling down on iOS devices."
                 },
-                "attribute": "pulling-icon",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "pullingText": {
                 "type": "string",
+                "attribute": "pulling-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string | IonicSafeString",
@@ -100,11 +99,13 @@ export class RefresherContent {
                     "tags": [],
                     "text": "The text you want to display when you begin to pull down.\n`pullingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used."
                 },
-                "attribute": "pulling-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "refreshingSpinner": {
                 "type": "string",
+                "attribute": "refreshing-spinner",
                 "mutable": true,
                 "complexType": {
                     "original": "SpinnerTypes | null",
@@ -123,11 +124,13 @@ export class RefresherContent {
                     "tags": [],
                     "text": "An animated SVG spinner that shows when refreshing begins"
                 },
-                "attribute": "refreshing-spinner",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "refreshingText": {
                 "type": "string",
+                "attribute": "refreshing-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string | IonicSafeString",
@@ -146,7 +149,8 @@ export class RefresherContent {
                     "tags": [],
                     "text": "The text you want to display when performing a refresh.\n`refreshingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used."
                 },
-                "attribute": "refreshing-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

package/dist/collection/components/reorder-group/reorder-group.js

@@ -16,6 +16,9 @@ export class ReorderGroup {
         this.containerTop = 0;
         this.containerBottom = 0;
         this.state = 0 /* ReorderGroupState.Idle */;
+        /**
+         * If `true`, the reorder will be hidden.
+         */
         this.disabled = true;
     }
     disabledChanged() {
@@ -259,6 +262,7 @@ export class ReorderGroup {
         return {
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -271,7 +275,8 @@ export class ReorderGroup {
                     "tags": [],
                     "text": "If `true`, the reorder will be hidden."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             }

package/dist/collection/components/ripple-effect/ripple-effect.js

@@ -5,6 +5,15 @@ import { Host, h, readTask, writeTask } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class RippleEffect {
     constructor() {
+        /**
+         * Sets the type of ripple-effect:
+         *
+         * - `bounded`: the ripple effect expands from the user's click position
+         * - `unbounded`: the ripple effect expands from the center of the button and overflows the container.
+         *
+         * NOTE: Surfaces for bounded ripples should have the overflow property set to hidden,
+         * while surfaces for unbounded ripples should have it set to visible.
+         */
         this.type = 'bounded';
     }
     /**
@@ -80,6 +89,7 @@ export class RippleEffect {
         return {
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'bounded' | 'unbounded'",
@@ -92,7 +102,8 @@ export class RippleEffect {
                     "tags": [],
                     "text": "Sets the type of ripple-effect:\n\n- `bounded`: the ripple effect expands from the user's click position\n- `unbounded`: the ripple effect expands from the center of the button and overflows the container.\n\nNOTE: Surfaces for bounded ripples should have the overflow property set to hidden,\nwhile surfaces for unbounded ripples should have it set to visible."
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'bounded'"
             }