@ionic/core 8.5.4-dev.11743810070.1718b4b2 → 8.5.4-dev.11744052844.17c6a004

package/dist/collection/components/segment-button/segment-button.js

@@ -17,23 +17,6 @@ export class SegmentButton {
     constructor() {
         this.segmentEl = null;
         this.inheritedAttributes = {};
-        this.checked = false;
-        /**
-         * If `true`, the user cannot interact with the segment button.
-         */
-        this.disabled = false;
-        /**
-         * Set the layout of the text and icon in the segment.
-         */
-        this.layout = 'icon-top';
-        /**
-         * The type of the button.
-         */
-        this.type = 'button';
-        /**
-         * The value of the segment button.
-         */
-        this.value = 'ion-sb-' + ids++;
         this.updateStyle = () => {
             forceUpdate(this);
         };
@@ -46,6 +29,12 @@ export class SegmentButton {
                 }
             }
         };
+        this.checked = false;
+        this.contentId = undefined;
+        this.disabled = false;
+        this.layout = 'icon-top';
+        this.type = 'button';
+        this.value = 'ion-sb-' + ids++;
     }
     valueChanged() {
         this.updateState();
@@ -146,7 +135,6 @@ export class SegmentButton {
         return {
             "contentId": {
                 "type": "string",
-                "attribute": "content-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -159,13 +147,11 @@ export class SegmentButton {
                     "tags": [],
                     "text": "The `id` of the segment content."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "content-id",
                 "reflect": true
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -178,14 +164,12 @@ export class SegmentButton {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the segment button."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "layout": {
                 "type": "string",
-                "attribute": "layout",
                 "mutable": false,
                 "complexType": {
                     "original": "SegmentButtonLayout",
@@ -204,14 +188,12 @@ export class SegmentButton {
                     "tags": [],
                     "text": "Set the layout of the text and icon in the segment."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "layout",
                 "reflect": false,
                 "defaultValue": "'icon-top'"
             },
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'submit' | 'reset' | 'button'",
@@ -224,14 +206,12 @@ export class SegmentButton {
                     "tags": [],
                     "text": "The type of the button."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'button'"
             },
             "value": {
                 "type": "any",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "SegmentValue",
@@ -250,8 +230,7 @@ export class SegmentButton {
                     "tags": [],
                     "text": "The value of the segment button."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "'ion-sb-' + ids++"
             }

package/dist/collection/components/segment-view/segment-view.js

@@ -6,10 +6,8 @@ export class SegmentView {
     constructor() {
         this.scrollEndTimeout = null;
         this.isTouching = false;
-        /**
-         * If `true`, the segment view cannot be interacted with.
-         */
         this.disabled = false;
+        this.isManualScroll = undefined;
     }
     handleScroll(ev) {
         var _a;
@@ -119,7 +117,6 @@ export class SegmentView {
         return {
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -132,8 +129,7 @@ export class SegmentView {
                     "tags": [],
                     "text": "If `true`, the segment view cannot be interacted with."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/select/select.ios.css

@@ -289,7 +289,7 @@ button {
  * The component highlight is only shown
  * on focus, so we can safely set the valid
  * color state when touched/valid. If we
- * set it when .has-focus is present then
+ * set it when .ion-focused is present then
  * the highlight color would change
  * from the valid color to the component's
  * color during the transition after the
@@ -328,8 +328,10 @@ button {
  * is currently focused. Do not show the valid
  * highlight when the select is blurred.
  */
-:host(.has-focus.ion-valid),
-:host(.ion-touched.ion-invalid) {
+:host(.ion-focused.ion-valid),
+:host(.select-expanded.ion-valid),
+:host(.ion-touched.ion-invalid),
+:host(.select-expanded.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
 

package/dist/collection/components/select/select.js

@@ -33,57 +33,6 @@ export class Select {
         this.helperTextId = `${this.inputId}-helper-text`;
         this.errorTextId = `${this.inputId}-error-text`;
         this.inheritedAttributes = {};
-        this.isExpanded = false;
-        /**
-         * The text to display on the cancel button.
-         */
-        this.cancelText = 'Cancel';
-        /**
-         * If `true`, the user cannot interact with the select.
-         */
-        this.disabled = false;
-        /**
-         * The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`.
-         */
-        this.interface = 'alert';
-        /**
-         * Any additional options that the `alert`, `action-sheet` or `popover` interface
-         * can take. See the [ion-alert docs](./alert), the
-         * [ion-action-sheet docs](./action-sheet), the
-         * [ion-popover docs](./popover), and the [ion-modal docs](./modal) for the
-         * create options for each interface.
-         *
-         * Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
-         */
-        this.interfaceOptions = {};
-        /**
-         * Where to place the label relative to the select.
-         * `"start"`: The label will appear to the left of the select in LTR and to the right in RTL.
-         * `"end"`: The label will appear to the right of the select in LTR and to the left in RTL.
-         * `"floating"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select.
-         * `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value.
-         * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
-         * When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`.
-         */
-        this.labelPlacement = 'start';
-        /**
-         * If `true`, the select can accept multiple values.
-         */
-        this.multiple = false;
-        /**
-         * The name of the control, which is submitted with the form data.
-         */
-        this.name = this.inputId;
-        /**
-         * The text to display on the ok button.
-         */
-        this.okText = 'OK';
-        /**
-         * If true, screen readers will announce it as a required field. This property
-         * works only for accessibility purposes, it will not prevent the form from
-         * submitting if the value is invalid.
-         */
-        this.required = false;
         this.onClick = (ev) => {
             const target = ev.target;
             const closestSlot = target.closest('[slot="start"], [slot="end"]');
@@ -127,6 +76,29 @@ export class Select {
         this.onBlur = () => {
             this.ionBlur.emit();
         };
+        this.isExpanded = false;
+        this.cancelText = 'Cancel';
+        this.color = undefined;
+        this.compareWith = undefined;
+        this.disabled = false;
+        this.fill = undefined;
+        this.errorText = undefined;
+        this.helperText = undefined;
+        this.interface = 'alert';
+        this.interfaceOptions = {};
+        this.justify = undefined;
+        this.label = undefined;
+        this.labelPlacement = 'start';
+        this.multiple = false;
+        this.name = this.inputId;
+        this.okText = 'OK';
+        this.placeholder = undefined;
+        this.selectedText = undefined;
+        this.toggleIcon = undefined;
+        this.expandedIcon = undefined;
+        this.shape = undefined;
+        this.value = undefined;
+        this.required = false;
     }
     styleChanged() {
         this.emitStyle();
@@ -795,7 +767,6 @@ export class Select {
         return {
             "cancelText": {
                 "type": "string",
-                "attribute": "cancel-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -808,14 +779,12 @@ export class Select {
                     "tags": [],
                     "text": "The text to display on the cancel button."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "cancel-text",
                 "reflect": false,
                 "defaultValue": "'Cancel'"
             },
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -834,13 +803,11 @@ export class Select {
                     "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).\n\nThis property is only available when using the modern select syntax."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "color",
                 "reflect": true
             },
             "compareWith": {
                 "type": "string",
-                "attribute": "compare-with",
                 "mutable": false,
                 "complexType": {
                     "original": "string | SelectCompareFn | null",
@@ -859,13 +826,11 @@ export class Select {
                     "tags": [],
                     "text": "This property allows developers to specify a custom function or property\nname for comparing objects when determining the selected option in the\nion-select. When not specified, the default behavior will use strict\nequality (===) for comparison."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "compare-with",
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -878,14 +843,12 @@ export class Select {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the select."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "fill": {
                 "type": "string",
-                "attribute": "fill",
                 "mutable": false,
                 "complexType": {
                     "original": "'outline' | 'solid'",
@@ -898,13 +861,11 @@ export class Select {
                     "tags": [],
                     "text": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "fill",
                 "reflect": false
             },
             "errorText": {
                 "type": "string",
-                "attribute": "error-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -917,13 +878,11 @@ export class Select {
                     "tags": [],
                     "text": "Text that is placed under the select and displayed when an error is detected."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "error-text",
                 "reflect": false
             },
             "helperText": {
                 "type": "string",
-                "attribute": "helper-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -936,13 +895,11 @@ export class Select {
                     "tags": [],
                     "text": "Text that is placed under the select and displayed when no error is detected."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "helper-text",
                 "reflect": false
             },
             "interface": {
                 "type": "string",
-                "attribute": "interface",
                 "mutable": false,
                 "complexType": {
                     "original": "SelectInterface",
@@ -961,14 +918,12 @@ export class Select {
                     "tags": [],
                     "text": "The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "interface",
                 "reflect": false,
                 "defaultValue": "'alert'"
             },
             "interfaceOptions": {
                 "type": "any",
-                "attribute": "interface-options",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -981,14 +936,12 @@ export class Select {
                     "tags": [],
                     "text": "Any additional options that the `alert`, `action-sheet` or `popover` interface\ncan take. See the [ion-alert docs](./alert), the\n[ion-action-sheet docs](./action-sheet), the\n[ion-popover docs](./popover), and the [ion-modal docs](./modal) for the\ncreate options for each interface.\n\nNote: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "interface-options",
                 "reflect": false,
                 "defaultValue": "{}"
             },
             "justify": {
                 "type": "string",
-                "attribute": "justify",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'space-between'",
@@ -1001,13 +954,11 @@ export class Select {
                     "tags": [],
                     "text": "How to pack the label and select within a line.\n`justify` does not apply when the label and select\nare on different lines when `labelPlacement` is set to\n`\"floating\"` or `\"stacked\"`.\n`\"start\"`: The label and select will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and select will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and select will appear on opposite\nends of the line with space between the two elements."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "justify",
                 "reflect": false
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1020,13 +971,11 @@ export class Select {
                     "tags": [],
                     "text": "The visible label associated with the select.\n\nUse this if you need to render a plaintext label.\n\nThe `label` property will take priority over the `label` slot if both are used."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label",
                 "reflect": false
             },
             "labelPlacement": {
                 "type": "string",
-                "attribute": "label-placement",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'floating' | 'stacked' | 'fixed'",
@@ -1039,14 +988,12 @@ export class Select {
                     "tags": [],
                     "text": "Where to place the label relative to the select.\n`\"start\"`: The label will appear to the left of the select in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the select in LTR and to the left in RTL.\n`\"floating\"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select.\n`\"stacked\"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\nWhen using `\"floating\"` or `\"stacked\"` we recommend initializing the select with either a `value` or a `placeholder`."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label-placement",
                 "reflect": false,
                 "defaultValue": "'start'"
             },
             "multiple": {
                 "type": "boolean",
-                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1059,14 +1006,12 @@ export class Select {
                     "tags": [],
                     "text": "If `true`, the select can accept multiple values."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "multiple",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1079,14 +1024,12 @@ export class Select {
                     "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"
             },
             "okText": {
                 "type": "string",
-                "attribute": "ok-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1099,14 +1042,12 @@ export class Select {
                     "tags": [],
                     "text": "The text to display on the ok button."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "ok-text",
                 "reflect": false,
                 "defaultValue": "'OK'"
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1119,13 +1060,11 @@ export class Select {
                     "tags": [],
                     "text": "The text to display when the select is empty."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "placeholder",
                 "reflect": false
             },
             "selectedText": {
                 "type": "string",
-                "attribute": "selected-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -1138,13 +1077,11 @@ export class Select {
                     "tags": [],
                     "text": "The text to display instead of the selected option's value."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "selected-text",
                 "reflect": false
             },
             "toggleIcon": {
                 "type": "string",
-                "attribute": "toggle-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1157,13 +1094,11 @@ export class Select {
                     "tags": [],
                     "text": "The toggle icon to use. Defaults to `chevronExpand` for `ios` mode,\nor `caretDownSharp` for `md` mode."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "toggle-icon",
                 "reflect": false
             },
             "expandedIcon": {
                 "type": "string",
-                "attribute": "expanded-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1176,13 +1111,11 @@ export class Select {
                     "tags": [],
                     "text": "The toggle icon to show when the select is open. If defined, the icon\nrotation behavior in `md` mode will be disabled. If undefined, `toggleIcon`\nwill be used for when the select is both open and closed."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "expanded-icon",
                 "reflect": false
             },
             "shape": {
                 "type": "string",
-                "attribute": "shape",
                 "mutable": false,
                 "complexType": {
                     "original": "'round'",
@@ -1195,13 +1128,11 @@ export class Select {
                     "tags": [],
                     "text": "The shape of the select. If \"round\" it will have an increased border radius."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "shape",
                 "reflect": false
             },
             "value": {
                 "type": "any",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "any | null",
@@ -1214,13 +1145,11 @@ export class Select {
                     "tags": [],
                     "text": "The value of the select."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "value",
                 "reflect": false
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1233,8 +1162,7 @@ export class Select {
                     "tags": [],
                     "text": "If true, screen readers will announce it as a required field. This property\nworks only for accessibility purposes, it will not prevent the form from\nsubmitting if the value is invalid."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             }