feat(select): add compareWith property (#17358)

* feat(select): add compareWith property

* style(select): fix lint errors

* test(select): move tests from preview to basic

* refactor(select): improve parameter names in compareOptions method

* chore(): add react usage docs

* chore(): update var names, update examples

* rerun build

* add doc on compareWith

core/src/components/select/usage/angular.md

@@ -59,6 +59,56 @@
 </ion-list>
 ```
 
+## Objects as Values
+
+```html
+<ion-list>
+  <ion-list-header>Objects as Values (compareWith)</ion-list-header>
+  
+  <ion-item>
+    <ion-label>Users</ion-label>
+    <ion-select [compareWith]="compareWith">
+      <ion-select-option *ngFor="let user of users">{{user.first + ' ' + user.last}}</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```
+
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'select-example',
+  templateUrl: 'select-example.html',
+  styleUrls: ['./select-example.css'],
+})
+export class SelectExample {
+  users: any[] = [
+    {
+      id: 1,
+      first: 'Alice',
+      last: 'Smith',
+    },
+    {
+      id: 2,
+      first: 'Bob',
+      last: 'Davis',
+    },
+    {
+      id: 3,
+      first: 'Charlie',
+      last: 'Rosenburg',
+    }
+  ];
+
+  compareWithFn = (o1, o2) => {
+    return o1 && o2 ? o1.id === o2.id : o1 === o2;
+  };
+
+  compareWith = compareWithFn;
+}
+```
+
 ## Interface Options
 
 ```html

core/src/components/select/usage/javascript.md

@@ -59,6 +59,56 @@
 </ion-list>
 ```
 
+## Objects as Values
+
+```html
+<ion-list>
+  <ion-list-header>Objects as Values (compareWith)</ion-list-header>
+
+  <ion-item>
+    <ion-label>Users</ion-label>
+    <ion-select id="objectSelectCompareWith"></ion-select>
+  </ion-item>
+</ion-list>
+```
+
+```javascript
+  let objectOptions = [
+    {
+      id: 1,
+      first: 'Alice',
+      last: 'Smith',
+    },
+    {
+      id: 2,
+      first: 'Bob',
+      last: 'Davis',
+    },
+    {
+      id: 3,
+      first: 'Charlie',
+      last: 'Rosenburg',
+    }
+  ];
+
+  let compareWithFn = (o1, o2) => {
+    return o1 && o2 ? o1.id === o2.id : o1 === o2;
+  };
+
+  let objectSelectElement = document.getElementById('objectSelectCompareWith');
+  objectSelectElement.compareWith = compareWithFn;
+  
+  objectOptions.forEach((option, i) => {
+    let selectOption = document.createElement('ion-select-option');
+    selectOption.value = option;
+    selectOption.textContent = option.first + ' ' + option.last;
+    selectOption.selected = (i === 0);
+    
+    objectSelectElement.appendChild(selectOption)
+  });
+}
+```
+
 ## Interface Options
 
 ```html

core/src/components/select/usage/react.md

@@ -21,6 +21,28 @@ const customActionSheetOptions = {
   subHeader: 'Select your favorite color'
 };
 
+const objectOptions = [
+  {
+    id: 1,
+    first: 'Alice',
+    last: 'Smith'
+  },
+  {
+    id: 2,
+    first: 'Bob',
+    last: 'Davis'
+  },
+  {
+    id: 3,
+    first: 'Charlie',
+    last: 'Rosenburg'
+  }
+];
+
+const compareWith = (o1: any, o2: any) => {
+  return o1 && o2 ? o1.id === o2.id : o1 === o2;
+};
+
 const Example: React.SFC<{}> = () => (
   <>
     ## Single Selection
@@ -81,6 +103,20 @@ const Example: React.SFC<{}> = () => (
         </IonSelect>
       </IonItem>
     </IonList>
+    
+    ## Objects as Values
+    
+    <IonList>
+      <IonListHeader>Objects as Values (compareWith)</IonListHeader>
+      <IonItem>
+        <IonLabel>Users</IonLabel>
+        <IonSelect compareWith={compareWith}>
+          {objectOptions.map((object, i) => {
+            return <IonSelectOption key={object.id} value={object.id}>{object.first} {object.last}</IonSelectOption>
+          })}
+        </IonSelect>
+      </IonItem>
+    </IonList>
 
 
     ## Interface Options