@ionic/core 8.5.4-dev.11744646756.1244bf71 → 8.5.4-dev.11744657992.1bb14c4f

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

@@ -126,7 +126,7 @@
   pointer-events: none;
 }
 
-:host(.ion-focused) button {
+:host(.has-focus) button {
   border: 2px solid #5e9ed6;
 }
 
@@ -329,7 +329,9 @@ button {
  * highlight when the select is blurred.
  */
 :host(.has-focus.ion-valid),
-:host(.ion-touched.ion-invalid) {
+:host(.select-expanded.ion-valid),
+:host(.ion-touched.ion-invalid),
+:host(.select-expanded.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
 
@@ -596,7 +598,7 @@ button {
  * :host(.label-floating.select-label-placement-floating) .native-wrapper .select-placeholder
  */
 :host(.select-expanded.select-label-placement-floating) .native-wrapper .select-placeholder,
-:host(.ion-focused.select-label-placement-floating) .native-wrapper .select-placeholder,
+:host(.has-focus.select-label-placement-floating) .native-wrapper .select-placeholder,
 :host(.has-value.select-label-placement-floating) .native-wrapper .select-placeholder {
   opacity: 1;
 }

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"]');
@@ -122,11 +71,37 @@ export class Select {
             }
         };
         this.onFocus = () => {
+            this.hasFocus = true;
             this.ionFocus.emit();
         };
         this.onBlur = () => {
+            this.hasFocus = false;
             this.ionBlur.emit();
         };
+        this.isExpanded = false;
+        this.hasFocus = 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();
@@ -731,7 +706,7 @@ export class Select {
         return h("div", { class: "select-bottom" }, this.renderHintText());
     }
     render() {
-        const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
+        const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value, hasFocus, } = this;
         const mode = getIonMode(this);
         const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
         const justifyEnabled = !hasFloatingOrStackedLabel && justify !== undefined;
@@ -759,7 +734,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: 'aa7bd7fbb6479c7805486990650a406e5470fd13', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'a3cbe92d2d1a3455ba7795938f28ef8140177d67', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -769,13 +744,15 @@ export class Select {
                 'has-value': hasValue,
                 'label-floating': labelShouldFloat,
                 'has-placeholder': placeholder !== undefined,
+                'has-focus': hasFocus,
+                // TODO(FW-6451): Remove `ion-focusable` class in favor of `has-focus`.
                 'ion-focusable': true,
                 [`select-${rtl}`]: true,
                 [`select-fill-${fill}`]: fill !== undefined,
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: 'fde3cdfd0ef7d1a20263e35ff4358ee7f61a789f', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '6fb8deedc827b6be2f19f9e57a62efefaaba200f', class: "select-wrapper-inner" }, h("slot", { key: 'a57a204ea1cbd9c4bac338f14e196e780dab0a10', name: "start" }), h("div", { key: '78b83e1484a446537e038527d539d997e330cd69', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '9fc660134e5247c4e5243c7d9d71ac6cec08705d', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '7f143285efa7fd7756dfdc5517ca33e84c8a027e', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '8b4a194686da8d1dd90c8dfc0c560fa4a9e8acee', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: 'de5bca2b95505b617f9f8727afba9f5f76ec252f', class: "select-wrapper-inner" }, h("slot", { key: '3cae9b76f1540324bca0d579a3be6eb539f0b0b6', name: "start" }), h("div", { key: '63bed76b3536f0021bde09f028c4034c9c4ae2c1', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '8a34ac20b76f7a4453edc61a9701e112dcb491cf', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '4fcd50d88c17774d9ec9f1ffe58a808396fec94d', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
@@ -795,7 +772,6 @@ export class Select {
         return {
             "cancelText": {
                 "type": "string",
-                "attribute": "cancel-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -808,14 +784,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 +808,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 +831,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 +848,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 +866,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 +883,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 +900,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 +923,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 +941,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 +959,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 +976,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 +993,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 +1011,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 +1029,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 +1047,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 +1065,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 +1082,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 +1099,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 +1116,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 +1133,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 +1150,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 +1167,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"
             }
@@ -1242,7 +1175,8 @@ export class Select {
     }
     static get states() {
         return {
-            "isExpanded": {}
+            "isExpanded": {},
+            "hasFocus": {}
         };
     }
     static get events() {