refactor(decorators): remove ConfigComponent

ionic/animations/scroll-to.ts

@@ -2,8 +2,10 @@ import {raf} from '../util/dom';
 
 
 export class ScrollTo {
+  public isPlaying: boolean;
+  private _el: HTMLElement;
 
-  constructor(ele, x, y, duration) {
+  constructor(ele: any) {
     if (typeof ele === 'string') {
       // string query selector
       ele = document.querySelector(ele);
@@ -21,7 +23,7 @@ export class ScrollTo {
     }
   }
 
-  start(x, y, duration, tolerance) {
+  start(x, y, duration, tolerance): Promise<any> {
     // scroll animation loop w/ easing
     // credit https://gist.github.com/dezinezync/5487119
     let self = this;

ionic/components/content/content.ts

@@ -44,7 +44,7 @@ export class Content extends Ion {
     private _app: IonicApp,
     private _zone: NgZone
   ) {
-    super(elementRef, _config);
+    super(elementRef);
     this.scrollPadding = 0;
 
     if (viewCtrl) {
@@ -57,8 +57,6 @@ export class Content extends Ion {
    * @private
    */
   ngOnInit() {
-    super.ngOnInit();
-
     let self = this;
     self.scrollElement = self.getNativeElement().children[0];
 
@@ -69,7 +67,7 @@ export class Content extends Ion {
     if (self._config.get('tapPolyfill') === true) {
       self._zone.runOutsideAngular(function() {
         self.scrollElement.addEventListener('scroll', self._scroll);
-      });  
+      });
     }
   }
 

ionic/components/ion.ts

@@ -10,42 +10,8 @@ import * as dom from '../util/dom';
  * sending/receiving app-level events.
  */
 export class Ion {
-  constructor(elementRef: ElementRef, config: Config) {
+  constructor(elementRef: ElementRef) {
     this.elementRef = elementRef;
-    this.config = config;
-  }
-
-  ngOnInit() {
-    let cls = this.constructor;
-
-    if (cls.defaultInputs && this.config) {
-      for (let prop in cls.defaultInputs) {
-        // Priority:
-        // ---------
-        // 1) Value set from within constructor
-        // 2) Value set from the host element's attribute
-        // 3) Value set by the users global config
-        // 4) Value set by the default mode/platform config
-        // 5) Value set from the component's default
-
-        if (this[prop]) {
-          // this property has already been set on the instance
-          // could be from the user setting the element's attribute
-          // or from the user setting it within the constructor
-          continue;
-        }
-
-        // get the property values from a global user/platform config
-        let configVal = this.config.get(prop);
-        if (configVal) {
-          this[prop] = configVal;
-          continue;
-        }
-
-        // wasn't set yet, so go with property's default value
-        this[prop] = cls.defaultInputs[prop];
-      }
-    }
   }
 
   getElementRef() {

ionic/components/list/list.ts

@@ -1,7 +1,6 @@
 import {Directive, ElementRef, Renderer, Attribute, NgZone} from 'angular2/core';
 
 import {Ion} from '../ion';
-import {Config} from '../../config/config';
 import {ListVirtualScroll} from './virtual';
 import {ItemSlidingGesture} from '../item/item-sliding-gesture';
 import {isDefined} from '../../util';
@@ -30,8 +29,8 @@ import {isDefined} from '../../util';
 })
 export class List extends Ion {
 
-  constructor(elementRef: ElementRef, config: Config, private zone: NgZone) {
-    super(elementRef, config);
+  constructor(elementRef: ElementRef, private zone: NgZone) {
+    super(elementRef);
     this.ele = elementRef.nativeElement;
     this._enableSliding = false;
   }
@@ -40,8 +39,6 @@ export class List extends Ion {
    * @private
    */
   ngOnInit() {
-    super.ngOnInit();
-
     if (isDefined(this.virtual)) {
       console.log('Content', this.content);
       console.log('Virtual?', this.virtual);

ionic/components/menu/menu.ts

@@ -115,13 +115,13 @@ export class Menu extends Ion {
 
   constructor(
     elementRef: ElementRef,
-    config: Config,
+    private _config: Config,
     private app: IonicApp,
     private platform: Platform,
     private keyboard: Keyboard,
     private zone: NgZone
   ) {
-    super(elementRef, config);
+    super(elementRef);
 
     this.opening = new EventEmitter('opening');
     this.isOpen = false;
@@ -133,7 +133,6 @@ export class Menu extends Ion {
    * @private
    */
   ngOnInit() {
-    super.ngOnInit();
     let self = this;
 
     let content = self.content;
@@ -196,7 +195,7 @@ export class Menu extends Ion {
   _initType(type) {
     type = type && type.trim().toLowerCase();
     if (!type) {
-      type = this.config.get('menuType');
+      type = this._config.get('menuType');
     }
     this.type = type;
   }
@@ -208,7 +207,7 @@ export class Menu extends Ion {
     if (!this._type) {
       this._type = new menuTypes[this.type](this);
 
-      if (this.config.get('animate') === false) {
+      if (this._config.get('animate') === false) {
         this._type.open.duration(33);
         this._type.close.duration(33);
       }

ionic/components/nav/nav.ts

@@ -1,9 +1,8 @@
-import {ChangeDetectorRef, Component, Directive, ElementRef, Host, Optional, forwardRef, Inject, NgZone, Compiler, AppViewManager, Renderer, ViewContainerRef} from 'angular2/core';
+import {ChangeDetectorRef, Component, Directive, ElementRef, Host, Input, Optional, forwardRef, Inject, NgZone, Compiler, AppViewManager, Renderer, ViewContainerRef} from 'angular2/core';
 
 import {IonicApp} from '../app/app';
 import {Config} from '../../config/config';
 import {Keyboard} from '../../util/keyboard';
-import {ConfigComponent} from '../../decorators/config-component';
 import {NavController} from './nav-controller';
 import {ViewController} from './view-controller';
 
@@ -100,17 +99,12 @@ import {ViewController} from './view-controller';
  *
  * @see {@link /docs/v2/components#navigation Navigation Component Docs}
  */
-@ConfigComponent({
+@Component({
   selector: 'ion-nav',
-  inputs: [
-    'root'
-  ],
-  // defaultInputs: {
-  //   'swipeBackEnabled': true
-  // },
   template: '<template #contents></template>'
 })
 export class Nav extends NavController {
+  @Input() root: any;
 
   constructor(
     @Optional() hostNavCtrl: NavController,
@@ -139,8 +133,6 @@ export class Nav extends NavController {
    * @private
    */
   ngOnInit() {
-    super.ngOnInit();
-
     if (this.root) {
       if (typeof this.root !== 'function') {
         throw 'The [root] property in <ion-nav> must be given a reference to a component class from within the constructor.';

ionic/components/navbar/navbar.ts

@@ -21,7 +21,7 @@ class BackButton extends Ion {
     elementRef: ElementRef,
     @Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar
   ) {
-    super(elementRef, null);
+    super(elementRef);
     this.navCtrl = navCtrl;
     navbar && navbar.setBackButtonRef(elementRef);
   }
@@ -137,7 +137,6 @@ export class Navbar extends ToolbarBase {
    * @private
    */
   ngOnInit() {
-    super.ngOnInit();
     let hideBackButton = this.hideBackButton;
     if (typeof hideBackButton === 'string') {
       this.hideBackButton = (hideBackButton === '' || hideBackButton === 'true');

ionic/components/scroll/scroll.ts

@@ -1,7 +1,6 @@
 import {Component, ElementRef, onInit} from 'angular2/core';
 
 import {Ion} from '../ion';
-import {Config} from '../../config/config';
 import {Gesture} from '../../gestures/gesture';
 import {CSS} from '../../util/dom';
 import {Animation} from '../../animations/animation';
@@ -47,8 +46,8 @@ import * as util from '../../util';
 })
 export class Scroll extends Ion {
 
-  constructor(elementRef: ElementRef, Config: Config) {
-    super(elementRef, Config);
+  constructor(elementRef: ElementRef) {
+    super(elementRef);
 
     this.maxScale = 3;
     this.zoomDuration = 250;

ionic/components/searchbar/searchbar.ts

@@ -126,7 +126,7 @@ export class Searchbar extends Ion {
     private _config: Config,
     @Optional() ngControl: NgControl
   ) {
-    super(_elementRef, _config);
+    super(_elementRef);
 
     // If the user passed a ngControl we need to set the valueAccessor
     if (ngControl) {

ionic/components/slides/slides.ts

@@ -5,7 +5,6 @@ import {Ion} from '../ion';
 import {Animation} from '../../animations/animation';
 import {Gesture} from '../../gestures/gesture';
 import {DragGesture} from '../../gestures/drag-gesture';
-import {Config} from '../../config/config';
 import {dom} from '../../util';
 import {CSS} from '../../util/dom';
 import * as util from '../../util';
@@ -98,9 +97,9 @@ export class Slides extends Ion {
    * @private
    * @param {ElementRef} elementRef  TODO
    */
-  constructor(elementRef: ElementRef, config: Config) {
+  constructor(elementRef: ElementRef) {
 
-    super(elementRef, config);
+    super(elementRef);
     this.rapidUpdate = util.debounce(() => {
       this.update();
     }, 10);

ionic/components/tabs/tabs.ts

@@ -1,5 +1,4 @@
-import {Directive, ElementRef, Optional, Host, forwardRef, ViewContainerRef, HostListener} from 'angular2/core';
-import {EventEmitter, Output} from 'angular2/core';
+import {Component, Directive, ElementRef, Optional, Host, forwardRef, ViewContainerRef, HostListener, EventEmitter, Output, Input, Renderer} from 'angular2/core';
 import {NgFor, NgIf} from 'angular2/common';
 
 import {Ion} from '../ion';
@@ -8,9 +7,9 @@ import {Config} from '../../config/config';
 import {Platform} from '../../platform/platform';
 import {NavController} from '../nav/nav-controller';
 import {ViewController} from '../nav/view-controller';
-import {ConfigComponent} from '../../decorators/config-component';
 import {Icon} from '../icon/icon';
 import {rafFrames} from '../../util/dom';
+import {isUndefined} from '../../util/util';
 
 
 /**
@@ -35,13 +34,8 @@ import {rafFrames} from '../../util/dom';
  * @see {@link /docs/v2/components#tabs Tabs Component Docs}
  * @see {@link ../Tab Tab API Docs}
  */
-@ConfigComponent({
+@Component({
   selector: 'ion-tabs',
-  defaultInputs: {
-    'tabbarPlacement': 'bottom',
-    'tabbarIcons': 'top',
-    'preloadTabs': false
-  },
   template:
     '<ion-navbar-section>' +
       '<template navbar-anchor></template>' +
@@ -69,26 +63,23 @@ import {rafFrames} from '../../util/dom';
   ]
 })
 export class Tabs extends Ion {
+  private tabs: Array<any>;
+  @Input() tabbarPlacement: string;
+  @Input() tabbarIcons: string;
+  @Input() preloadTabs: boolean;
   @Output() change: EventEmitter<any> = new EventEmitter();
 
-  /**
-   * Hi, I'm "Tabs". I'm really just another Page, with a few special features.
-   * "Tabs" can be a sibling to other pages that can be navigated to, which those
-   * sibling pages may or may not have their own tab bars (doesn't matter). The fact
-   * that "Tabs" can happen to have children "Tab" classes, and each "Tab" can have
-   * children pages with their own "ViewController" instance, as nothing to do with the
-   * point that "Tabs" is itself is just a page with its own instance of ViewController.
-   */
  constructor(
-    config: Config,
     elementRef: ElementRef,
     @Optional() viewCtrl: ViewController,
     @Optional() navCtrl: NavController,
-    private _platform: Platform
+    private _config: Config,
+    private _platform: Platform,
+    private _renderer: Renderer
   ) {
-    super(elementRef, config);
+    super(elementRef);
     this.parent = navCtrl;
-    this.subPages = config.get('tabSubPages');
+    this.subPages = _config.get('tabSubPages');
 
     this._tabs = [];
     this._id = ++tabIds;
@@ -112,9 +103,12 @@ export class Tabs extends Ion {
    * @private
    */
   ngOnInit() {
-    super.ngOnInit();
     this.preloadTabs = (this.preloadTabs !== "false" && this.preloadTabs !== false);
 
+    this._setConfig('tabbarPlacement', 'bottom');
+    this._setConfig('tabbarIcons', 'top');
+    this._setConfig('preloadTabs', false);
+
     if (this._highlight) {
       this._platform.onResize(() => {
         this._highlight.select(this.getSelected());
@@ -122,6 +116,14 @@ export class Tabs extends Ion {
     }
   }
 
+  _setConfig(attrKey, fallback) {
+    var val = this[attrKey];
+    if (isUndefined(val)) {
+      val = this._config.get(attrKey);
+    }
+    this._renderer.setElementAttribute(this.elementRef, attrKey, val);
+  }
+
   /**
    * @private
    */
@@ -294,7 +296,7 @@ let tabIds = -1;
 })
 class TabButton extends Ion {
   constructor(@Host() tabs: Tabs, config: Config, elementRef: ElementRef) {
-    super(elementRef, config);
+    super(elementRef);
     this.tabs = tabs;
     this.disHover = (config.get('hoverCSS') === false);
   }

ionic/components/toolbar/test/scenarios/main.html

@@ -7,7 +7,7 @@
 <ion-toolbar>
   <ion-buttons start>
     <button>
-      <ion-icon ios="contact"></ion-icon>
+      <ion-icon name="contact"></ion-icon>
     </button>
     <button>
       <ion-icon name="search"></ion-icon>
@@ -25,7 +25,7 @@
 <ion-toolbar>
   <ion-buttons start>
     <button class="activated">
-      <ion-icon ios="contact"></ion-icon>
+      <ion-icon name="contact"></ion-icon>
     </button>
     <button class="activated">
       <ion-icon name="search"></ion-icon>

ionic/config/bootstrap.ts

@@ -7,6 +7,7 @@ import {Config} from './config';
 import {Platform} from '../platform/platform';
 import {Form} from '../util/form';
 import {Keyboard} from '../util/keyboard';
+import {ScrollTo} from '../animations/scroll-to';
 import {Events} from '../util/events';
 import {NavRegistry} from '../components/nav/nav-registry';
 import {Translate} from '../translation/translate';
@@ -18,7 +19,7 @@ import {ready, closest} from '../util/dom';
 /**
  * @private
  */
-export function ionicProviders(args={}) {
+export function ionicProviders(args: any={}) {
   let platform = new Platform();
   let navRegistry = new NavRegistry(args.pages);
 
@@ -34,7 +35,7 @@ export function ionicProviders(args={}) {
   platform.load();
   config.setPlatform(platform);
 
-  let clickBlock = new ClickBlock(config.get('clickBlock'));
+  let clickBlock = new ClickBlock();
 
   let events = new Events();
   let featureDetect = new FeatureDetect();
@@ -137,10 +138,10 @@ function bindEvents(window, document, platform, events) {
   window.addEventListener('statusTap', (ev) => {
     // TODO: Make this more better
     var el = document.elementFromPoint(platform.width() / 2, platform.height() / 2);
-    if(!el) { return; }
+    if (!el) { return; }
 
     var content = closest(el, 'scroll-content');
-    if(content) {
+    if (content) {
       var scrollTo = new ScrollTo(content);
       scrollTo.start(0, 0, 300, 0);
     }

ionic/decorators/app.ts

@@ -4,6 +4,8 @@ import {TapClick} from '../components/tap-click/tap-click';
 import {ionicProviders} from '../config/bootstrap';
 import {IONIC_DIRECTIVES} from '../config/directives';
 
+const _reflect: any=Reflect;
+
 /**
 * @name App
 * @description
@@ -28,11 +30,11 @@ import {IONIC_DIRECTIVES} from '../config/directives';
 * @param {String} [templateUrl] - a relative URL pointing to the template to use for the app root
 *
 */
-export function App(args={}) {
+export function App(args: any={}) {
 
   return function(cls) {
     // get current annotations
-    let annotations = Reflect.getMetadata('annotations', cls) || [];
+    let annotations = _reflect.getMetadata('annotations', cls) || [];
 
     args.selector = 'ion-app';
 
@@ -48,8 +50,8 @@ export function App(args={}) {
     annotations.push(new Component(args));
 
     // redefine with added annotations
-    Reflect.defineMetadata('annotations', annotations, cls);
-    
+    _reflect.defineMetadata('annotations', annotations, cls);
+
     // define array of bootstrap providers
     let providers = ionicProviders(args).concat(args.providers || []);
 

ionic/decorators/config-component.ts

@@ -1,38 +0,0 @@
-import {Component} from 'angular2/core'
-
-
-/**
- * @private
- */
-export function ConfigComponent(config) {
-  return function(cls) {
-    var annotations = Reflect.getMetadata('annotations', cls) || [];
-    annotations.push(new Component(appendConfig(cls, config)));
-    Reflect.defineMetadata('annotations', annotations, cls);
-    return cls;
-  }
-}
-
-/**
- * @private
- */
-function appendConfig(cls, config) {
-  config.host = config.host || {};
-
-  cls.defaultInputs = config.defaultInputs || {};
-
-  config.inputs = config.inputs || [];
-
-  for (let prop in cls.defaultInputs) {
-    // add the property to the component "inputs"
-    config.inputs.push(prop);
-
-    // set the component "hostProperties", so the instance's
-    // input value will be used to set the element's attribute
-    config.host['[attr.' + prop + ']'] = prop;
-  }
-
-  cls.delegates = config.delegates;
-
-  return config;
-}

ionic/decorators/page.ts

@@ -1,6 +1,7 @@
 import {Component} from 'angular2/core'
 import {IONIC_DIRECTIVES} from '../config/directives';
 
+const _reflect: any=Reflect;
 
 /**
  * @name Page
@@ -69,16 +70,16 @@ import {IONIC_DIRECTIVES} from '../config/directives';
  * you may see these tags if you inspect your markup, you don't need to include
  * them in your templates.
  */
-export function Page(config={}) {
+export function Page(config: any={}) {
   return function(cls) {
     config.selector = 'ion-page';
     config.directives = config.directives ? config.directives.concat(IONIC_DIRECTIVES) : IONIC_DIRECTIVES;
     config.host = config.host || {};
     config.host['[hidden]'] = '_hidden';
     config.host['[class.tab-subpage]'] = '_tabSubPage';
-    var annotations = Reflect.getMetadata('annotations', cls) || [];
+    var annotations = _reflect.getMetadata('annotations', cls) || [];
     annotations.push(new Component(config));
-    Reflect.defineMetadata('annotations', annotations, cls);
+    _reflect.defineMetadata('annotations', annotations, cls);
     return cls;
   }
 }

ionic/ionic.ts

@@ -3,7 +3,6 @@ export * from './config/bootstrap'
 export * from './config/config'
 export * from './config/directives'
 
-export * from './decorators/config-component'
 export * from './decorators/app'
 export * from './decorators/page'
 

ionic/platform/platform.ts

@@ -469,7 +469,7 @@ export class Platform {
   /**
    * @private
    */
-  load(platformOverride) {
+  load(platformOverride?) {
     let rootPlatformNode = null;
     let engineNode = null;
     let self = this;

ionic/util/dom.ts

@@ -207,7 +207,7 @@ matchesMethods.some((fn: string) => {
   }
 });
 
-export function closest(ele, selector, checkSelf) {
+export function closest(ele: HTMLElement, selector: string, checkSelf?: boolean) {
   if (ele && matchesFn) {
 
     // traverse parents