chore(interface): init input interfaces

packages/core/src/components/checkbox/checkbox.tsx

@@ -1,6 +1,6 @@
+import { BlurEvent, BooleanInput, BooleanInputChangeEvent, FocusEvent, StyleEvent } from '../../utils/input-interfaces';
 import { Component, CssClassMap, Event, EventEmitter, Listen, Prop, PropDidChange } from '@stencil/core';
 
-
 /**
  * @name Checkbox
  * @module ionic
@@ -76,7 +76,7 @@ import { Component, CssClassMap, Event, EventEmitter, Listen, Prop, PropDidChang
     theme: 'checkbox'
   }
 })
-export class Checkbox {
+export class Checkbox implements BooleanInput {
   private checkboxId: string;
   private labelId: string;
   private styleTmr: any;
@@ -84,12 +84,22 @@ export class Checkbox {
   /**
    * @output {Event} Emitted when the checked property has changed.
    */
-  @Event() ionChange: EventEmitter;
+  @Event() ionChange: EventEmitter<BooleanInputChangeEvent>;
+
+  /**
+   * @output {Event} Emitted when the toggle has focus.
+   */
+  @Event() ionFocus: EventEmitter<FocusEvent>;
+
+  /**
+   * @output {Event} Emitted when the toggle loses focus.
+   */
+  @Event() ionBlur: EventEmitter<BlurEvent>;
 
   /**
    * @output {Event} Emitted when the styles change.
    */
-  @Event() ionStyle: EventEmitter;
+  @Event() ionStyle: EventEmitter<StyleEvent>;
 
   /**
    * @input {string} The color to use from your Sass `$colors` map.

packages/core/src/components/toggle/toggle.tsx

@@ -1,5 +1,6 @@
+import { BlurEvent, BooleanInput, BooleanInputChangeEvent, FocusEvent, StyleEvent } from '../../utils/input-interfaces';
 import { Component, Event, EventEmitter, Listen, Method, Prop, PropDidChange, State } from '@stencil/core';
-import { BooleanInputComponent, GestureDetail } from '../../index';
+import { GestureDetail } from '../../index';
 import { hapticSelection } from '../../utils/haptic';
 
 
@@ -13,7 +14,7 @@ import { hapticSelection } from '../../utils/haptic';
     theme: 'toggle'
   }
 })
-export class Toggle implements BooleanInputComponent {
+export class Toggle implements BooleanInput {
   private toggleId: string;
   private labelId: string;
   private styleTmr: any;
@@ -26,22 +27,22 @@ export class Toggle implements BooleanInputComponent {
   /**
    * @output {Event} Emitted when the value property has changed.
    */
-  @Event() ionChange: EventEmitter;
+  @Event() ionChange: EventEmitter<BooleanInputChangeEvent>;
 
   /**
    * @output {Event} Emitted when the styles change.
    */
-  @Event() ionStyle: EventEmitter;
+  @Event() ionStyle: EventEmitter<StyleEvent>;
 
   /**
    * @output {Event} Emitted when the toggle has focus.
    */
-  @Event() ionFocus: EventEmitter;
+  @Event() ionFocus: EventEmitter<FocusEvent>;
 
   /**
    * @output {Event} Emitted when the toggle loses focus.
    */
-  @Event() ionBlur: EventEmitter;
+  @Event() ionBlur: EventEmitter<BlurEvent>;
 
   /**
    * @input {string} The color to use from your Sass `$colors` map.
@@ -187,8 +188,7 @@ export class Toggle implements BooleanInputComponent {
   protected render() {
     return (
       <ion-gesture {...this.gestureConfig}
-        enabled={!this.disabled}
+        enabled={!this.disabled}>
-      >
         <div class='toggle-icon'>
           <div class='toggle-inner'></div>
         </div>
@@ -199,8 +199,7 @@ export class Toggle implements BooleanInputComponent {
           aria-disabled={this.disabled ? 'true' : false}
           aria-labelledby={this.labelId}
           role='checkbox'
-          tabIndex={0}
+          tabIndex={0}>
-        >
         </div>
       </ion-gesture>
     );

packages/core/src/index.d.ts

@@ -174,12 +174,6 @@ export interface BaseInputComponent {
   fireBlur: () => void;
 }
 
-export interface BooleanInputComponent extends BaseInputComponent {
-  checked: boolean;
-  toggle: (ev: UIEvent) => void;
-}
-
-
 export interface StencilElement extends HTMLElement {
   componentOnReady(): Promise<HTMLElement>;
   componentOnReady(done: (cmp?: HTMLElement) => void): void;

packages/core/src/utils/input-interfaces.d.ts

@@ -0,0 +1,122 @@
+import { EventEmitter } from '@stencil/core';
+
+
+export interface BaseInput {
+
+  // Properties
+  // ------------------------
+
+  /**
+   * 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;
+
+  /**
+   * Reflects the value of the form control.
+   */
+  value: string;
+
+
+  // Events
+  // ------------------------
+
+  /**
+   * Removes focus from input; keystrokes will subsequently go nowhere.
+   */
+  ionBlur: EventEmitter<BlurEvent>;
+
+  /**
+   * Focus on the input element; keystrokes will subsequently go to this element.
+   */
+  ionFocus: EventEmitter<FocusEvent>;
+
+  /**
+   * 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 BooleanInput extends BaseInput {
+  /**
+   * 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.
+   * This is actually more similar to the native "input" event
+   * https://developer.mozilla.org/en-US/docs/Web/Events/input
+   */
+  ionChange: EventEmitter<BooleanInputChangeEvent>;
+}
+
+
+export interface BooleanInputChangeEvent {
+  checked: boolean;
+}
+
+
+export interface SelectOptionInput extends BaseInput {
+  /**
+   * Indicates whether the option is currently selected.
+   */
+  selected: boolean;
+
+}
+
+
+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;
+}
+
+
+export interface TextInput extends BaseInput {
+  /**
+   *
+   */
+}
+
+
+export interface TextMultiLineInput extends TextInput {
+
+}
+
+
+export interface StyleEvent {
+  [styleName: string]: boolean;
+}
+
+
+export interface FocusEvent {}
+
+
+export interface BlurEvent {}
+