fix(input): event interfaces

core/src/components/checkbox/checkbox.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 
-import { CheckboxInput, CheckedInputChangeEvent, Color, Mode, StyleEvent } from '../../interface';
+import { CheckedInputChangeEvent, Color, Mode, StyleEvent } from '../../interface';
 import { deferEvent, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
@@ -12,7 +12,7 @@ import { createColorClasses, hostContext } from '../../utils/theme';
   },
   shadow: true
 })
-export class Checkbox implements CheckboxInput {
+export class Checkbox {
 
   private inputId = `ion-cb-${checkboxIds++}`;
   private labelId = `${this.inputId}-lbl`;

core/src/components/datetime/datetime.tsx

@@ -1,6 +1,6 @@
-import { Component, Event, EventEmitter, Prop, State, Watch, Method } from '@stencil/core';
+import { Component, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
 
-import { CssClassMap, PickerColumn, PickerOptions, StyleEvent } from '../../interface';
+import { CssClassMap, InputChangeEvent, PickerColumn, PickerOptions, StyleEvent } from '../../interface';
 import { clamp, deferEvent } from '../../utils/helpers';
 import { createThemedClasses } from '../../utils/theme';
 
@@ -48,7 +48,7 @@ export class Datetime {
    * datetime. For example, the minimum could just be the year, such as `1994`.
    * Defaults to the beginning of the year, 100 years ago from today.
    */
-  @Prop({ mutable: true }) min: string | undefined;
+  @Prop({ mutable: true }) min?: string;
 
   /**
    * The maximum datetime allowed. Value must be a date string
@@ -58,7 +58,7 @@ export class Datetime {
    * datetime. For example, the maximum could just be the year, such as `1994`.
    * Defaults to the end of this year.
    */
-  @Prop({ mutable: true }) max: string | undefined;
+  @Prop({ mutable: true }) max?: string;
 
   /**
    * The display format of the date and time as text that shows
@@ -174,7 +174,7 @@ export class Datetime {
   /**
    * the value of the datetime.
    */
-  @Prop({ mutable: true }) value?: string;
+  @Prop({ mutable: true }) value?: any;
 
   /**
    * Update the datetime value when the value changes
@@ -183,7 +183,9 @@ export class Datetime {
   protected valueChanged() {
     this.updateValue();
     this.emitStyle();
-    this.ionChange.emit();
+    this.ionChange.emit({
+      value: this.value
+    });
   }
 
   /**
@@ -194,7 +196,7 @@ export class Datetime {
   /**
    * Emitted when the value (selected date) has changed.
    */
-  @Event() ionChange!: EventEmitter<void>;
+  @Event() ionChange!: EventEmitter<InputChangeEvent>;
 
   /**
    * Emitted when the styles change.

core/src/components/input/input.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 
-import { Color, InputChangeEvent, Mode, StyleEvent, TextFieldTypes } from '../../interface';
+import { Color, Mode, StyleEvent, TextFieldTypes, TextInputChangeEvent } from '../../interface';
 import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
@@ -32,7 +32,7 @@ export class Input implements InputComponent {
   /**
    * Emitted when the value has changed.
    */
-  @Event() ionChange!: EventEmitter<InputChangeEvent>;
+  @Event() ionChange!: EventEmitter<TextInputChangeEvent>;
 
   /**
    * Emitted when the styles change.

core/src/components/picker-column/picker-column.tsx

@@ -30,11 +30,6 @@ export class PickerColumnCmp {
 
   @Prop() col!: PickerColumn;
 
-  /**
-   * Emitted when the selected option has changed.
-   */
-  @Event() ionChange!: EventEmitter<void>;
-
   componentWillLoad() {
     let pickerRotateFactor = 0;
     let pickerScaleFactor = 0.81;
@@ -80,7 +75,6 @@ export class PickerColumnCmp {
     // set what y position we're at
     cancelAnimationFrame(this.rafId);
     this.update(y, duration, true);
-    this.ionChange.emit();
   }
 
   private update(y: number, duration: number, saveY: boolean) {
@@ -187,8 +181,6 @@ export class PickerColumnCmp {
       if (notLockedIn) {
         // isn't locked in yet, keep decelerating until it is
         this.rafId = requestAnimationFrame(() => this.decelerate());
-      } else {
-        this.ionChange.emit();
       }
 
     } else if (this.y % this.optHeight !== 0) {

core/src/components/picker/picker.tsx

@@ -91,26 +91,22 @@ export class Picker implements OverlayInterface {
   /**
    * Emitted after the picker has presented.
    */
-  @Event({ eventName: 'ionPickerDidPresent' })
+  @Event({ eventName: 'ionPickerDidPresent' }) didPresent!: EventEmitter<void>;
-  didPresent!: EventEmitter<void>;
 
   /**
    * Emitted before the picker has presented.
    */
-  @Event({ eventName: 'ionPickerWillPresent' })
+  @Event({ eventName: 'ionPickerWillPresent' }) willPresent!: EventEmitter<void>;
-  willPresent!: EventEmitter<void>;
 
   /**
    * Emitted before the picker has dismissed.
    */
-  @Event({ eventName: 'ionPickerWillDismiss' })
+  @Event({ eventName: 'ionPickerWillDismiss' }) willDismiss!: EventEmitter<OverlayEventDetail>;
-  willDismiss!: EventEmitter<OverlayEventDetail>;
 
   /**
    * Emitted after the picker has dismissed.
    */
-  @Event({ eventName: 'ionPickerDidDismiss' })
+  @Event({ eventName: 'ionPickerDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
-  didDismiss!: EventEmitter<OverlayEventDetail>;
 
   /**
    * Emitted after the picker has unloaded.
@@ -285,8 +281,7 @@ export class Picker implements OverlayInterface {
               <button
                 type="button"
                 onClick={() => this.buttonClick(b)}
-                class={buttonClass(b)}
+                class={buttonClass(b)}>
-              >
                 {b.text}
               </button>
             </div>
@@ -295,7 +290,7 @@ export class Picker implements OverlayInterface {
 
         <div class="picker-columns">
           <div class="picker-above-highlight" />
-          {columns.map(c => <ion-picker-column col={c} />)}
+            { columns.map(c => <ion-picker-column col={c} />) }
           <div class="picker-below-highlight" />
         </div>
 

core/src/components/radio-group/radio-group.tsx

@@ -1,11 +1,11 @@
-import { Component, ComponentDidLoad, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
 
-import { InputChangeEvent, RadioGroupInput } from '../../interface';
+import { TextInputChangeEvent } from '../../interface';
 
 @Component({
   tag: 'ion-radio-group'
 })
-export class RadioGroup implements ComponentDidLoad, RadioGroupInput {
+export class RadioGroup {
 
   private inputId = `ion-rg-${radioGroupIds++}`;
   private labelId = `${this.inputId}-lbl`;
@@ -49,7 +49,7 @@ export class RadioGroup implements ComponentDidLoad, RadioGroupInput {
   /**
    * Emitted when the value has changed.
    */
-  @Event() ionChange!: EventEmitter<InputChangeEvent>;
+  @Event() ionChange!: EventEmitter<TextInputChangeEvent>;
 
   @Listen('ionRadioDidLoad')
   onRadioDidLoad(ev: Event) {

core/src/components/radio/radio.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 
-import { CheckedInputChangeEvent, Color, Mode, RadioButtonInput, StyleEvent } from '../../interface';
+import { CheckedInputChangeEvent, Color, Mode, StyleEvent } from '../../interface';
 import { deferEvent } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
@@ -12,7 +12,7 @@ import { createColorClasses, hostContext } from '../../utils/theme';
   },
   shadow: true
 })
-export class Radio implements RadioButtonInput {
+export class Radio {
 
   private inputId = `ion-rb-${radioButtonIds++}`;
   private nativeInput!: HTMLInputElement;

core/src/components/range/range.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core';
 
-import { BaseInput, Color, Gesture, GestureDetail, Mode, RangeInputChangeEvent, RangeValue, StyleEvent } from '../../interface';
+import { Color, Gesture, GestureDetail, InputChangeEvent, Mode, RangeValue, StyleEvent } from '../../interface';
 import { clamp, debounceEvent, deferEvent } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
@@ -14,7 +14,7 @@ import { Knob, RangeEventDetail } from './range-interface';
   },
   shadow: true
 })
-export class Range implements BaseInput {
+export class Range {
 
   private noUpdate = false;
   private rect!: ClientRect;
@@ -118,7 +118,7 @@ export class Range implements BaseInput {
   /**
    * Emitted when the value property has changed.
    */
-  @Event() ionChange!: EventEmitter<RangeInputChangeEvent>;
+  @Event() ionChange!: EventEmitter<InputChangeEvent>;
 
   /**
    * Emitted when the styles change.

core/src/components/searchbar/searchbar.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 
-import { Color, InputChangeEvent, Mode } from '../../interface';
+import { Color, Mode, TextInputChangeEvent } from '../../interface';
 import { debounceEvent } from '../../utils/helpers';
 import { createColorClasses } from '../../utils/theme';
 
@@ -115,7 +115,7 @@ export class Searchbar {
   /**
    * Emitted when the value has changed.
    */
-  @Event() ionChange!: EventEmitter<InputChangeEvent>;
+  @Event() ionChange!: EventEmitter<TextInputChangeEvent>;
 
   /**
    * Emitted when the cancel button is clicked.

core/src/components/segment/segment.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
 
-import { Color, InputChangeEvent, Mode } from '../../interface';
+import { Color, Mode, TextInputChangeEvent } from '../../interface';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
 @Component({
@@ -47,7 +47,7 @@ export class Segment {
   /**
    * Emitted when the value property has changed.
    */
-  @Event() ionChange!: EventEmitter<InputChangeEvent>;
+  @Event() ionChange!: EventEmitter<TextInputChangeEvent>;
 
   @Listen('ionSelect')
   segmentClick(ev: CustomEvent) {

core/src/components/tab-highlight/readme.md

@@ -1,25 +0,0 @@
-# ion-tab-highlight
-
-
-
-<!-- Auto Generated Below -->
-
-
-## Properties
-
-#### selectedTab
-
-
-
-
-## Attributes
-
-#### selected-tab
-
-
-
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*

core/src/components/textarea/textarea.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 
-import { Color, InputChangeEvent, Mode, StyleEvent } from '../../interface';
+import { Color, Mode, StyleEvent, TextInputChangeEvent } from '../../interface';
 import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses } from '../../utils/theme';
 import { TextareaComponent } from '../input/input-base';
@@ -27,7 +27,7 @@ export class Textarea implements TextareaComponent {
   /**
    * Emitted when the input value has changed.
    */
-  @Event() ionChange!: EventEmitter<InputChangeEvent>;
+  @Event() ionChange!: EventEmitter<TextInputChangeEvent>;
 
   /**
    * Emitted when a keyboard input ocurred.

core/src/components/toggle/toggle.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, Prop, QueueApi, State, Watch } from '@stencil/core';
 
-import { CheckboxInput, CheckedInputChangeEvent, Color, Gesture, GestureDetail, Mode, StyleEvent } from '../../interface';
+import { CheckedInputChangeEvent, Color, Gesture, GestureDetail, Mode, StyleEvent } from '../../interface';
 import { hapticSelection } from '../../utils/haptic';
 import { deferEvent, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
@@ -13,7 +13,7 @@ import { createColorClasses, hostContext } from '../../utils/theme';
   },
   shadow: true
 })
-export class Toggle implements CheckboxInput {
+export class Toggle {
 
   private inputId = `ion-tg-${toggleIds++}`;
   private nativeInput!: HTMLInputElement;

core/src/utils/input-interface.ts

@@ -1,203 +1,12 @@
-import { EventEmitter } from '@stencil/core';
+export interface TextInputChangeEvent {
-
-export interface BaseInput {
-
-  /**
-   * Indicates that the user cannot interact with the control.
-   */
-  disabled: boolean;
-
-  /**
-   * Returns / Sets the element's readonly attribute, indicating that
-   * the user cannot modify the value of the control. HTML5. This is
-   * ignored if the value of the type attribute is hidden, range, color,
-   * checkbox, radio, file, or a button type.
-   */
-  readOnly?: boolean;
-
-  name: string;
-}
-
-export interface CheckboxInput extends BaseInput {
-  /**
-   * Reflects the value of the form control.
-   */
-  value: string;
-
-  /**
-   * Returns / Sets the current state of the element when type is checkbox or radio.
-   */
-  checked: boolean;
-
-  /**
-   * The change event is fired when the value of has changed.
-   */
-  ionChange: EventEmitter<CheckedInputChangeEvent>;
-
-  /**
-   * Removes focus from input; keystrokes will subsequently go nowhere.
-   */
-  ionBlur: EventEmitter<void>;
-
-  /**
-   * Focus on the input element; keystrokes will subsequently go to this element.
-   */
-  ionFocus: EventEmitter<void>;
-
-  /**
-   * Emitted when the styles change. This is useful for parent
-   * components to know how to style themselves depending on the
-   * child input. For example, a disabled ion-toggle may give
-   * its wrapping ion-item a different style.
-   */
-  ionStyle: EventEmitter<StyleEvent>;
-}
-
-export interface RadioButtonInput extends BaseInput {
-  /**
-   * Reflects the value of the form control.
-   */
-  value: string;
-
-  /**
-   * Returns / Sets the current state of the element when type is checkbox or radio.
-   */
-  checked: boolean;
-
-  /**
-   * A single radio button fires an ionSelect event, whereas
-   * a radio group fires an ionChange event. It would be more common
-   * to attach listeners to the radio group, not individual radio buttons.
-   */
-  ionSelect: EventEmitter<CheckedInputChangeEvent>;
-
-  /**
-   * Removes focus from input; keystrokes will subsequently go nowhere.
-   */
-  ionBlur: EventEmitter<void>;
-
-  /**
-   * Focus on the input element; keystrokes will subsequently go to this element.
-   */
-  ionFocus: EventEmitter<void>;
-}
-
-export interface RadioGroupInput extends BaseInput {
-  ionChange: EventEmitter<InputChangeEvent>;
-}
-
-export interface SelectInput extends BaseInput {
-  /**
-   * Indicates whether the option is currently selected.
-   */
-  selected: boolean;
-
-  /**
-   * A long reflecting the index of the first selected <option> element.
-   * The value -1 indicates no element is selected.
-   */
-  selectedIndex: number;
-
-  /**
-   * Reflecting the multiple HTML attribute, which indicates
-   * whether multiple items can be selected.
-   */
-  multiple: boolean;
-
-  /**
-   * The change event is fired when the value of has changed.
-   * This is actually more similar to the native "input" event
-   * https://developer.mozilla.org/en-US/docs/Web/Events/input
-   */
-  ionChange: EventEmitter<CheckedInputChangeEvent>;
-
-  /**
-   * Removes focus from input; keystrokes will subsequently go nowhere.
-   */
-  ionBlur: EventEmitter<void>;
-
-  /**
-   * Focus on the input element; keystrokes will subsequently go to this element.
-   */
-  ionFocus: EventEmitter<void>;
-
-  /**
-   * Emitted when the styles change. This is useful for parent
-   * components to know how to style themselves depending on the
-   * child input. For example, a disabled ion-toggle may give
-   * its wrapping ion-item a different style.
-   */
-  ionStyle: EventEmitter<StyleEvent>;
-}
-
-export interface TextInput extends BaseInput {
-  /**
-   * Reflects the value of the form control.
-   */
-  value: string;
-
-  /**
-   * The change event is fired when the value of has changed.
-   * This is actually more similar to the native "input" event
-   * https://developer.mozilla.org/en-US/docs/Web/Events/input
-   */
-  ionChange: EventEmitter<CheckedInputChangeEvent>;
-
-  /**
-   * Removes focus from input; keystrokes will subsequently go nowhere.
-   */
-  ionBlur: EventEmitter<void>;
-
-  /**
-   * Focus on the input element; keystrokes will subsequently go to this element.
-   */
-  ionFocus: EventEmitter<void>;
-
-  /**
-   * Emitted when the styles change. This is useful for parent
-   * components to know how to style themselves depending on the
-   * child input. For example, a disabled ion-toggle may give
-   * its wrapping ion-item a different style.
-   */
-  ionStyle: EventEmitter<StyleEvent>;
-}
-
-export interface TextMultiLineInput extends TextInput {
-  /**
-   * The change event is fired when the value of has changed.
-   * This is actually more similar to the native "input" event
-   * https://developer.mozilla.org/en-US/docs/Web/Events/input
-   */
-  ionChange: EventEmitter<CheckedInputChangeEvent>;
-
-  /**
-   * Removes focus from input; keystrokes will subsequently go nowhere.
-   */
-  ionBlur: EventEmitter<void>;
-
-  /**
-   * Focus on the input element; keystrokes will subsequently go to this element.
-   */
-  ionFocus: EventEmitter<void>;
-
-  /**
-   * Emitted when the styles change. This is useful for parent
-   * components to know how to style themselves depending on the
-   * child input. For example, a disabled ion-toggle may give
-   * its wrapping ion-item a different style.
-   */
-  ionStyle: EventEmitter<StyleEvent>;
-}
-
-export interface InputChangeEvent {
   value: string | undefined;
 }
 
-export interface CheckedInputChangeEvent extends InputChangeEvent {
+export interface CheckedInputChangeEvent extends TextInputChangeEvent {
   checked: boolean;
 }
 
-export interface RangeInputChangeEvent {
+export interface InputChangeEvent {
   value: any;
 }