@ionic/core 8.5.4-dev.11743804857.1f3f3ee1 → 8.5.4-dev.11743808789.130d15f2

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

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

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

@@ -6,8 +6,10 @@ 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;
@@ -117,6 +119,7 @@ export class SegmentView {
         return {
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -129,7 +132,8 @@ export class SegmentView {
                     "tags": [],
                     "text": "If `true`, the segment view cannot be interacted with."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "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 .ion-focused is present then
+ * set it when .has-focus is present then
  * the highlight color would change
  * from the valid color to the component's
  * color during the transition after the
@@ -328,7 +328,7 @@ button {
  * is currently focused. Do not show the valid
  * highlight when the select is blurred.
  */
-:host(.ion-focused.ion-valid),
+:host(.has-focus.ion-valid),
 :host(.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }

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

@@ -33,6 +33,57 @@ 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"]');
@@ -76,29 +127,6 @@ 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();
@@ -767,6 +795,7 @@ export class Select {
         return {
             "cancelText": {
                 "type": "string",
+                "attribute": "cancel-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -779,12 +808,14 @@ export class Select {
                     "tags": [],
                     "text": "The text to display on the cancel button."
                 },
-                "attribute": "cancel-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'Cancel'"
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -803,11 +834,13 @@ 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."
                 },
-                "attribute": "color",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "compareWith": {
                 "type": "string",
+                "attribute": "compare-with",
                 "mutable": false,
                 "complexType": {
                     "original": "string | SelectCompareFn | null",
@@ -826,11 +859,13 @@ 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."
                 },
-                "attribute": "compare-with",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -843,12 +878,14 @@ export class Select {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the select."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "fill": {
                 "type": "string",
+                "attribute": "fill",
                 "mutable": false,
                 "complexType": {
                     "original": "'outline' | 'solid'",
@@ -861,11 +898,13 @@ 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."
                 },
-                "attribute": "fill",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "errorText": {
                 "type": "string",
+                "attribute": "error-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -878,11 +917,13 @@ export class Select {
                     "tags": [],
                     "text": "Text that is placed under the select and displayed when an error is detected."
                 },
-                "attribute": "error-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "helperText": {
                 "type": "string",
+                "attribute": "helper-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -895,11 +936,13 @@ export class Select {
                     "tags": [],
                     "text": "Text that is placed under the select and displayed when no error is detected."
                 },
-                "attribute": "helper-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "interface": {
                 "type": "string",
+                "attribute": "interface",
                 "mutable": false,
                 "complexType": {
                     "original": "SelectInterface",
@@ -918,12 +961,14 @@ export class Select {
                     "tags": [],
                     "text": "The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`."
                 },
-                "attribute": "interface",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'alert'"
             },
             "interfaceOptions": {
                 "type": "any",
+                "attribute": "interface-options",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -936,12 +981,14 @@ 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."
                 },
-                "attribute": "interface-options",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "{}"
             },
             "justify": {
                 "type": "string",
+                "attribute": "justify",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'space-between'",
@@ -954,11 +1001,13 @@ 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."
                 },
-                "attribute": "justify",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -971,11 +1020,13 @@ 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."
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "labelPlacement": {
                 "type": "string",
+                "attribute": "label-placement",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'floating' | 'stacked' | 'fixed'",
@@ -988,12 +1039,14 @@ 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`."
                 },
-                "attribute": "label-placement",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'start'"
             },
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1006,12 +1059,14 @@ export class Select {
                     "tags": [],
                     "text": "If `true`, the select can accept multiple values."
                 },
-                "attribute": "multiple",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1024,12 +1079,14 @@ export class Select {
                     "tags": [],
                     "text": "The name of the control, which is submitted with the form data."
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "this.inputId"
             },
             "okText": {
                 "type": "string",
+                "attribute": "ok-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1042,12 +1099,14 @@ export class Select {
                     "tags": [],
                     "text": "The text to display on the ok button."
                 },
-                "attribute": "ok-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'OK'"
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1060,11 +1119,13 @@ export class Select {
                     "tags": [],
                     "text": "The text to display when the select is empty."
                 },
-                "attribute": "placeholder",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "selectedText": {
                 "type": "string",
+                "attribute": "selected-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -1077,11 +1138,13 @@ export class Select {
                     "tags": [],
                     "text": "The text to display instead of the selected option's value."
                 },
-                "attribute": "selected-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "toggleIcon": {
                 "type": "string",
+                "attribute": "toggle-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1094,11 +1157,13 @@ export class Select {
                     "tags": [],
                     "text": "The toggle icon to use. Defaults to `chevronExpand` for `ios` mode,\nor `caretDownSharp` for `md` mode."
                 },
-                "attribute": "toggle-icon",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "expandedIcon": {
                 "type": "string",
+                "attribute": "expanded-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1111,11 +1176,13 @@ 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."
                 },
-                "attribute": "expanded-icon",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "shape": {
                 "type": "string",
+                "attribute": "shape",
                 "mutable": false,
                 "complexType": {
                     "original": "'round'",
@@ -1128,11 +1195,13 @@ export class Select {
                     "tags": [],
                     "text": "The shape of the select. If \"round\" it will have an increased border radius."
                 },
-                "attribute": "shape",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "value": {
                 "type": "any",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "any | null",
@@ -1145,11 +1214,13 @@ export class Select {
                     "tags": [],
                     "text": "The value of the select."
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1162,7 +1233,8 @@ 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."
                 },
-                "attribute": "required",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/select/select.md.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 .ion-focused is present then
+ * set it when .has-focus is present then
  * the highlight color would change
  * from the valid color to the component's
  * color during the transition after the
@@ -328,7 +328,7 @@ button {
  * is currently focused. Do not show the valid
  * highlight when the select is blurred.
  */
-:host(.ion-focused.ion-valid),
+:host(.has-focus.ion-valid),
 :host(.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
@@ -820,7 +820,7 @@ button {
  * If the select has a validity state, the
  * border should reflect that as a color.
  */
-:host(.ion-focused.select-fill-solid.ion-valid),
+:host(.has-focus.select-fill-solid.ion-valid),
 :host(.select-fill-solid.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
@@ -872,10 +872,6 @@ button {
   max-width: calc(100% / 0.75);
 }
 
-:host(.in-item.select-expanded.select-fill-solid) .select-wrapper .select-icon {
-  color: var(--highlight-color);
-}
-
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -949,7 +945,7 @@ button {
  * If the select has a validity state, the
  * border should reflect that as a color.
  */
-:host(.ion-focused.select-fill-outline.ion-valid),
+:host(.has-focus.select-fill-outline.ion-valid),
 :host(.select-fill-outline.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
@@ -1171,10 +1167,6 @@ button {
   border-top: none;
 }
 
-:host(.in-item.select-expanded.select-fill-outline) .select-wrapper .select-icon {
-  color: var(--highlight-color);
-}
-
 :host {
   --border-width: 1px;
   --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
@@ -1199,9 +1191,9 @@ button {
   color: var(--highlight-color);
 }
 
-:host(.ion-focused.select-label-placement-floating.ion-valid) .label-text-wrapper,
+:host(.has-focus.select-label-placement-floating.ion-valid) .label-text-wrapper,
 :host(.select-label-placement-floating.ion-touched.ion-invalid) .label-text-wrapper,
-:host(.ion-focused.select-label-placement-stacked.ion-valid) .label-text-wrapper,
+:host(.has-focus.select-label-placement-stacked.ion-valid) .label-text-wrapper,
 :host(.select-label-placement-stacked.ion-touched.ion-invalid) .label-text-wrapper {
   color: var(--highlight-color);
 }
@@ -1251,8 +1243,8 @@ button {
  * The icon should also take on the highlight
  * color if there is a validation state.
  */
-:host(.select-expanded:not(.in-item)) .select-wrapper .select-icon,
-:host(.ion-focused.ion-valid) .select-wrapper .select-icon,
+:host(.select-expanded) .select-wrapper .select-icon,
+:host(.has-focus.ion-valid) .select-wrapper .select-icon,
 :host(.ion-touched.ion-invalid) .select-wrapper .select-icon,
 :host(.ion-focused) .select-wrapper .select-icon {
   color: var(--highlight-color);