fix(select): support any kind of value

fixes #15200

core/src/components/alert/alert.tsx

@@ -27,8 +27,6 @@ export class Alert implements OverlayInterface {
   presented = false;
   animation?: Animation;
 
-  @Prop() mode!: Mode;
-
   @Element() el!: HTMLStencilElement;
 
   @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement;
@@ -36,6 +34,12 @@ export class Alert implements OverlayInterface {
   @Prop() overlayId!: number;
   @Prop() keyboardClose = true;
 
+  /**
+   * The mode determines which platform styles to use.
+   * Possible values are: `"ios"` or `"md"`.
+   */
+  @Prop() mode!: Mode;
+
   /**
    * Animation to use when the alert is presented.
    */

core/src/components/alert/readme.md

@@ -36,7 +36,7 @@ Alerts can also include several different inputs whose data can be passed back t
 | `keyboardClose`   | `keyboard-close`   |                                                                                                                  | `boolean`                  |
 | `leaveAnimation`  | --                 | Animation to use when the alert is dismissed.                                                                    | `AnimationBuilder`         |
 | `message`         | `message`          | The main message to be displayed in the alert.                                                                   | `string`                   |
-| `mode`            | `mode`             |                                                                                                                  | `Mode`                     |
+| `mode`            | `mode`             | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.                        | `Mode`                     |
 | `overlayId`       | `overlay-id`       |                                                                                                                  | `number`                   |
 | `subHeader`       | `sub-header`       | The subtitle in the heading of the alert. Displayed under the title.                                             | `string`                   |
 | `translucent`     | `translucent`      | If true, the alert will be translucent. Defaults to `false`.                                                     | `boolean`                  |

core/src/components/item/item.ios.scss

@@ -139,13 +139,16 @@
 :host(.item-label-stacked) ::slotted(ion-input),
 :host(.item-label-floating) ::slotted(ion-input),
 :host(.item-label-stacked) ::slotted(ion-textarea),
-:host(.item-label-floating) ::slotted(ion-textarea) {
+:host(.item-label-floating) ::slotted(ion-textarea),
+:host(.item-label-stacked) ::slotted(ion-select),
+:host(.item-label-floating) ::slotted(ion-select) {
   --padding-top: 8px;
   --padding-bottom: 8px;
   --padding-start: 0;
 }
 
 
+
 // TODO
 // .item-ios.item-label-stacked .label-ios + .input + .cloned-input,
 // .item-ios.item-label-floating .label-ios + .input + .cloned-input {

core/src/components/item/item.md.scss

@@ -153,7 +153,9 @@
 :host(.item-label-stacked) ::slotted(ion-input),
 :host(.item-label-floating) ::slotted(ion-input),
 :host(.item-label-stacked) ::slotted(ion-textarea),
-:host(.item-label-floating) ::slotted(ion-textarea) {
+:host(.item-label-floating) ::slotted(ion-textarea),
+:host(.item-label-stacked) ::slotted(ion-select),
+:host(.item-label-floating) ::slotted(ion-select) {
   --padding-top: 8px;
   --padding-bottom: 8px;
   --padding-start: 0;

core/src/components/select-option/readme.md

@@ -12,7 +12,7 @@ SelectOption is a component that is a child element of Select. For more informat
 | ---------- | ---------- | ------------------------------------------------------------------------------ | --------- |
 | `disabled` | `disabled` | If true, the user cannot interact with the select option. Defaults to `false`. | `boolean` |
 | `selected` | `selected` | If true, the element is selected.                                              | `boolean` |
-| `value`    | `value`    | The text value of the option.                                                  | `string`  |
+| `value`    | --         | The text value of the option.                                                  | `any`     |
 
 
 ## Events

core/src/components/select-option/select-option.tsx

@@ -22,7 +22,7 @@ export class SelectOption {
   /**
    * The text value of the option.
    */
-  @Prop({ mutable: true }) value!: string;
+  @Prop({ mutable: true }) value!: any;
 
   /**
    * Emitted when the select option loads.

core/src/components/select/readme.md

@@ -47,6 +47,7 @@ Since select uses the alert, action sheet and popover interfaces, options can be
 | `disabled`         | `disabled`      | If true, the user cannot interact with the select. Defaults to `false`.                                                                                                                                                                                                                                                                                                           | `boolean`         |
 | `interfaceOptions` | --              | Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [AlertController API docs](../../alert/AlertController/#create), the [ActionSheetController API docs](../../action-sheet/ActionSheetController/#create) and the [PopoverController API docs](../../popover/PopoverController/#create) for the create options for each interface. | `any`             |
 | `interface`        | `interface`     | The interface the select should use: `action-sheet`, `popover` or `alert`. Default: `alert`.                                                                                                                                                                                                                                                                                      | `SelectInterface` |
+| `mode`             | `mode`          | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.                                                                                                                                                                                                                                                                                         | `Mode`            |
 | `multiple`         | `multiple`      | If true, the select can accept multiple values.                                                                                                                                                                                                                                                                                                                                   | `boolean`         |
 | `name`             | `name`          | The name of the control, which is submitted with the form data.                                                                                                                                                                                                                                                                                                                   | `string`          |
 | `okText`           | `ok-text`       | The text to display on the ok button. Default: `OK`.                                                                                                                                                                                                                                                                                                                              | `string`          |

core/src/components/select/select.ios.scss

@@ -14,39 +14,7 @@
   --placeholder-color: #{$select-ios-placeholder-color};
 }
 
-.select-placeholder {
-  color: var(--placeholder-color);
-}
-
 .select-icon {
-  position: relative;
-
   width: 12px;
   height: 18px;
 }
-
-.select-icon .select-icon-inner {
-  @include position(50%, null, null, 5px);
-  @include margin(-2px, null, null, null);
-
-  position: absolute;
-
-  width: 0;
-  height: 0;
-
-  border-top: 5px solid;
-  border-right: 5px solid transparent;
-  border-left: 5px solid transparent;
-
-  color: var(--icon-color);
-  pointer-events: none;
-}
-
-
-// Stacked & Floating Select
-// --------------------------------------------------
-
-.item-label-stacked .select-ios,
-.item-label-floating .select-ios {
-  @include padding(8px, null, 8px, 0);
-}

core/src/components/select/select.md.scss

@@ -14,59 +14,7 @@
   --placeholder-color: #{$select-md-placeholder-color};
 }
 
-.select-placeholder {
-  color: var(--placeholder-color);
-}
-
-.select-md .item-select ion-label {
-  @include margin-horizontal(0, null);
-}
-
 .select-icon {
-  position: relative;
-
   width: 12px;
   height: 19px;
 }
-
-.select-icon .select-icon-inner {
-  @include position(50%, null, null, 5px);
-  @include margin(-3px, null, null, null);
-
-  position: absolute;
-
-  width: 0;
-  height: 0;
-
-  border-top: 5px solid;
-  border-right: 5px solid transparent;
-  border-left: 5px solid transparent;
-
-  color: var(--icon-color);
-  pointer-events: none;
-}
-
-
-// Stacked & Floating Select
-// --------------------------------------------------
-
-.item-label-stacked .select-md,
-.item-label-floating .select-md {
-  @include padding(8px, null, 8px, 0);
-}
-
-
-// Select Popover Interface
-// --------------------------------------------------
-
-.select-popover-md .radio-icon {
-  display: none;
-}
-
-.select-popover-md .item-radio-checked {
-  background-color: $background-color-step-150;
-}
-
-.select-popover-md .item-radio-checked ion-label {
-  color: initial;
-}

core/src/components/select/select.scss

@@ -29,10 +29,27 @@
   max-width: 45%;
 }
 
+:host(.select-disabled) {
+  opacity: .4;
+  pointer-events: none;
+}
+
+:host(.select-key) button {
+  border: 2px solid #5e9ed6;
+}
+
+.select-placeholder {
+  color: var(--placeholder-color);
+}
+
 .select-cover {
   @include input-cover();
 }
 
+.select-icon {
+  position: relative;
+}
+
 .select-text {
   flex: 1;
 
@@ -47,8 +64,20 @@
   overflow: hidden;
 }
 
-:host(.select-disabled) {
+.select-icon-inner {
-  opacity: .4;
+  @include position(50%, null, null, 5px);
+  @include margin(-3px, null, null, null);
+
+  position: absolute;
+
+  width: 0;
+  height: 0;
+
+  border-top: 5px solid;
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+
+  color: var(--icon-color);
   pointer-events: none;
 }
 
@@ -59,7 +88,3 @@
 button:focus {
   outline: none;
 }
-
-:host(.select-key) button {
-  border: 2px solid #5e9ed6;
-}

core/src/components/select/select.tsx

@@ -2,7 +2,7 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State, W
 
 import { ActionSheetButton, ActionSheetOptions, AlertInput, AlertOptions, CssClassMap, Mode, PopoverOptions, SelectInputChangeEvent, SelectInterface, SelectPopoverOption, StyleEvent } from '../../interface';
 import { deferEvent, renderHiddenInput } from '../../utils/helpers';
-import { createThemedClasses, hostContext } from '../../utils/theme';
+import { hostContext } from '../../utils/theme';
 
 @Component({
   tag: 'ion-select',
@@ -18,9 +18,6 @@ export class Select {
   private inputId = `ion-sel-${selectIds++}`;
   private labelId?: string;
   private overlay?: HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement;
-
-  mode!: Mode;
-
   @Element() el!: HTMLIonSelectElement;
 
   @Prop({ connect: 'ion-action-sheet-controller' }) actionSheetCtrl!: HTMLIonActionSheetControllerElement;
@@ -31,6 +28,12 @@ export class Select {
   @State() keyFocus = false;
   @State() text?: string;
 
+  /**
+   * The mode determines which platform styles to use.
+   * Possible values are: `"ios"` or `"md"`.
+   */
+  @Prop() mode!: Mode;
+
   /**
    * If true, the user cannot interact with the select. Defaults to `false`.
    */
@@ -452,7 +455,6 @@ export class Select {
   hostData() {
     return {
       class: {
-        ...createThemedClasses(this.mode, 'select'),
         'in-item': hostContext('.item', this.el),
         'select-disabled': this.disabled,
         'select-key': this.keyFocus

core/src/generated.d.ts

@@ -269,6 +269,9 @@ interface IonAlert {
   * The main message to be displayed in the alert.
   */
   'message': string;
+  /**
+  * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
+  */
   'mode': Mode;
   /**
   * Returns a promise that resolves when the alert did dismiss. It also accepts a callback that is called in the same circumstances.
@@ -330,6 +333,9 @@ interface IonAlertAttributes extends JSXElements.HTMLAttributes {
   * The main message to be displayed in the alert.
   */
   'message'?: string;
+  /**
+  * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
+  */
   'mode'?: Mode;
   /**
   * Emitted after the alert has dismissed.
@@ -3889,7 +3895,7 @@ interface IonSelectOption {
   /**
   * The text value of the option.
   */
-  'value': string;
+  'value': any;
 }
 interface IonSelectOptionAttributes extends JSXElements.HTMLAttributes {
   /**
@@ -3911,7 +3917,7 @@ interface IonSelectOptionAttributes extends JSXElements.HTMLAttributes {
   /**
   * The text value of the option.
   */
-  'value'?: string;
+  'value'?: any;
 }
 
 interface IonSelectPopover {
@@ -3969,6 +3975,10 @@ interface IonSelect {
   */
   'interfaceOptions': any;
   /**
+  * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
+  */
+  'mode': Mode;
+  /**
   * If true, the select can accept multiple values.
   */
   'multiple': boolean;
@@ -4012,6 +4022,10 @@ interface IonSelectAttributes extends JSXElements.HTMLAttributes {
   */
   'interfaceOptions'?: any;
   /**
+  * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
+  */
+  'mode'?: Mode;
+  /**
   * If true, the select can accept multiple values.
   */
   'multiple'?: boolean;

core/src/utils/input-interface.ts

@@ -11,7 +11,7 @@ export interface InputChangeEvent {
 }
 
 export interface SelectInputChangeEvent {
-  value: string | string[] | undefined;
+  value: any | any[] | undefined;
   text: string;
 }