feat(demo): add select input

packages/angular/demo/README.md

@@ -4,7 +4,9 @@ The purpose of this application is to provide an Angular CLI application where I
 
 ## Getting started
 
-From this directory:
+**Note:** This application uses the locally built Ionic Core. It does not grab the latest uploaded version or anything. That allows the developer to use this application as they make changes in core. That also means that you **must** build core before building this application. So if you haven't done that yet, go do that first.
+
+To use _this_ application perform the following commands from this directory:
 
 - `npm i`
 - `npm start` - to serve the application

packages/angular/demo/e2e/inputs.e2e-spec.ts

@@ -100,6 +100,14 @@ describe('Demo Inputs Page', () => {
     });
   });
 
+  describe('select input', () => {
+    it('should be set the initial value', () => {
+      page.navigateTo();
+      const el = page.getIonicSelect();
+      expect(el.getAttribute('value')).toEqual('brains');
+    });
+  });
+
   async function hasClass(el: ElementFinder, cls: string): Promise<boolean> {
     const classes = await el.getAttribute('class');
     return classes.split(' ').indexOf(cls) !== -1;

packages/angular/demo/e2e/inputs.po.ts

@@ -13,6 +13,14 @@ export class InputsPage {
     return element(by.id('checkboxOutput')).getText();
   }
 
+  getIonicSelect() {
+    return element(by.id('ionSelect'));
+  }
+
+  getSelectOutput() {
+    return element(by.id('selectOutput')).getText();
+  }
+
   getIonicToggle() {
     return element(by.id('ionToggle'));
   }

packages/angular/demo/src/app/inputs/inputs-test-page.component.html

@@ -12,7 +12,7 @@
   <ion-row>
     <ion-col>
       <label for="stdTextInput">Standard Input</label>
-      <input id="stdTextInput" name="stdTextInput" [(ngModel)]="textValue" minlength="10"/>
+      <input id="stdTextInput" name="stdTextInput" [(ngModel)]="textValue" minlength="10" />
     </ion-col>
     <ion-col>
       Value:
@@ -82,6 +82,44 @@
     </ion-col>
   </ion-row>
 
+  <ion-row>
+    <ion-col>
+      <h2>Select</h2>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <label for="stdSelect">Standard Select (for tacos)</label>
+      <select id="stdSelect" name="stdSelect" [(ngModel)]="selectValue" (blur)="onBlur($event)">
+        <option value="beef">Carne Asada</option>
+        <option value="tongue">Lengua</option>
+        <option value="brains">Sesos</option>
+        <option value="tripe">Tripa</option>
+        <option value="chicken">Pollo</option>
+      </select>
+    </ion-col>
+    <ion-col>
+      Value:
+      <span id="selectOutput">{{selectValue}}</span>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <ion-item>
+        <ion-label>Ionic Select (for tacos)</ion-label>
+        <ion-select id="ionSelect" name="ionSelect" [(ngModel)]="selectValue" (blur)="onBlur($event)">
+          <ion-select-option value="beef">Carne Asada</ion-select-option>
+          <ion-select-option value="tongue">Lengua</ion-select-option>
+          <ion-select-option value="brains">Sesos</ion-select-option>
+          <ion-select-option value="tripe">Tripa</ion-select-option>
+          <ion-select-option value="chicken">Pollo</ion-select-option>
+        </ion-select>
+      </ion-item>
+    </ion-col>
+    <ion-col>
+    </ion-col>
+  </ion-row>
+
   <ion-row>
     <ion-col>
       <h2>Toggle</h2>

packages/angular/demo/src/app/inputs/inputs-test-page.component.ts

@@ -13,6 +13,8 @@ export class InputsTestPageComponent implements OnInit {
   checkboxValue = true;
   toggleValue = false;
 
+  selectValue = 'brains';
+
   constructor() {}
 
   ngOnInit() {}

packages/angular/demo/src/app/shared/ion-boolean-value-accessor/ion-boolean-value-accessor.directive.ts

@@ -3,6 +3,7 @@ import { ControlValueAccessor, DefaultValueAccessor, NG_VALUE_ACCESSOR } from '@
 
 // NOTE: this is just a sample. It really belongs in @ionic/angular and not at all int his app here
 @Directive({
+  /* tslint:disable-next-line:directive-selector */
   selector: 'ion-checkbox,ion-toggle',
   providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonBooleanValueAccessorDirective, multi: true }]
 })

packages/angular/demo/src/app/shared/ion-select-value-accessor/ion-select-value-accessor.directive.ts

@@ -0,0 +1,42 @@
+import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+// NOTE: this is just a sample. It really belongs in @ionic/angular and not at all int his app here
+// May also need to look at this to see if we need anything else:
+// https://github.com/angular/angular/blob/5.0.2/packages/forms/src/directives/select_control_value_accessor.ts#L28-L158
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: 'ion-select',
+  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonSelectValueAccessorDirective, multi: true }]
+})
+export class IonSelectValueAccessorDirective implements ControlValueAccessor {
+  constructor(private element: ElementRef, private renderer: Renderer2) {
+    this.onChange = () => {};
+    this.onTouched = () => {};
+  }
+
+  onChange: (value: any) => void;
+  onTouched: () => void;
+
+  writeValue(value: any) {
+    this.renderer.setProperty(this.element.nativeElement, 'value', value);
+  }
+
+  @HostListener('ionChange', ['$event.target.value'])
+  _handleChangeEvent(value: any) {
+    this.onChange(value);
+  }
+
+  @HostListener('ionBlur')
+  _handleBlurEvent() {
+    this.onTouched();
+  }
+
+  registerOnChange(fn: (value: any) => void) {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void) {
+    this.onTouched = fn;
+  }
+}

packages/angular/demo/src/app/shared/ion-text-value-accessor/ion-text-value-accessor.directive.ts

@@ -5,6 +5,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 // May also need to look at this to see if we need anything else:
 // https://github.com/angular/angular/blob/5.0.1/packages/forms/src/directives/default_value_accessor.ts#L33-L101
 @Directive({
+  /* tslint:disable-next-line:directive-selector */
   selector: 'ion-input,ion-textarea',
   providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonTextValueAccessorDirective, multi: true }]
 })

packages/angular/demo/src/app/shared/shared.module.ts

@@ -1,10 +1,11 @@
 import { NgModule } from '@angular/core';
 
 import { IonBooleanValueAccessorDirective } from './ion-boolean-value-accessor/ion-boolean-value-accessor.directive';
+import { IonSelectValueAccessorDirective } from './ion-select-value-accessor/ion-select-value-accessor.directive';
 import { IonTextValueAccessorDirective } from './ion-text-value-accessor/ion-text-value-accessor.directive';
 
 @NgModule({
-  exports: [IonBooleanValueAccessorDirective, IonTextValueAccessorDirective],
+  exports: [IonBooleanValueAccessorDirective, IonSelectValueAccessorDirective, IonTextValueAccessorDirective],
-  declarations: [IonBooleanValueAccessorDirective, IonTextValueAccessorDirective]
+  declarations: [IonBooleanValueAccessorDirective, IonSelectValueAccessorDirective, IonTextValueAccessorDirective]
 })
 export class SharedModule { }