alpha39 updates

ionic/components/app/structure.scss

@@ -131,7 +131,7 @@ ion-view {
   }
 }
 
-.no-navbar > .navbar-container {
+[no-navbar] > .navbar-container {
   display: none;
 }
 

ionic/components/card/card.ts

@@ -1,24 +1,12 @@
-import {ElementRef} from 'angular2/angular2';
+import {Directive} from 'angular2/angular2';
-
-import {Ion} from '../ion';
-import {IonicConfig} from '../../config/config';
-import {IonicDirective} from '../../config/decorators';
-import {ListVirtualScroll} from './virtual';
-import * as util from 'ionic/util';
 
 /**
  * TODO
  */
-@IonicDirective({
+@Directive({
-  selector: 'ion-card'
+  selector: 'ion-card',
-})
+  host: {
-export class Card extends Ion {
+    'class': 'card'
-  /**
-   * TODO
-   * @param {ElementeRef} elementRef  TODO
-   * @param {IonicConfig} ionicConfig  TODO
-   */
-  constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
-    super(elementRef, ionicConfig);
   }
-}
+})
+export class Card {}

ionic/components/checkbox/checkbox.ts

@@ -1,15 +1,8 @@
-import {
+import {Component, View, Directive, ElementRef, Optional, NgControl} from 'angular2/angular2';
-  View,
-  Directive,
-  ElementRef,
-  Optional,
-  NgControl
-} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonInput} from '../form/input';
 import {IonicConfig} from '../../config/config';
-import {IonicComponent} from '../../config/decorators';
 
 /**
  * The checkbox is no different than the HTML checkbox input, except it's styled differently
@@ -23,7 +16,7 @@ import {IonicComponent} from '../../config/decorators';
  * </ion-checkbox>
  * ```
  */
-@IonicComponent({
+@Component({
   selector: 'ion-checkbox',
   inputs: [
     'value',

ionic/components/content/content.ts

@@ -3,7 +3,6 @@ import {Component, View, ElementRef, Optional, Host} from 'angular2/angular2';
 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
 import {IonicPlatform} from '../../platform/platform';
-import {IonicComponent} from '../../config/decorators';
 import {ViewController} from '../nav/view-controller';
 import {Tab} from '../tabs/tab';
 import {ScrollTo} from '../../animations/scroll-to';

ionic/components/item/item.ts

@@ -1,6 +1,4 @@
-import {Component, Directive, View, ElementRef, NgIf, ViewQuery, QueryList} from 'angular2/angular2';
+import {Component, View} from 'angular2/angular2';
-
-import * as util from 'ionic/util';
 
 
 /**
@@ -31,25 +29,6 @@ import * as util from 'ionic/util';
     '<ion-item-content>' +
       '<ng-content></ng-content>'+
     '</ion-item-content>' +
-    '<ng-content select="ion-item-options"></ng-content>' +
+    '<ng-content select="[item-right]"></ng-content>'
-    '<ng-content select="[item-right]"></ng-content>',
-  directives: [NgIf]
 })
-export class Item {
+export class Item {}
-  /**
-   * TODO
-   * @param {ElementRef} elementRef  A reference to the component's DOM element.
-   */
-  constructor(elementRef: ElementRef) {
-    this._isOpen = false;
-    this._isSlideActive = false;
-    this._isTransitioning = false;
-    this._transform = '';
-
-    this.ele = elementRef.nativeElement;
-    this.swipeButtons = {};
-    this.optionButtons = {};
-
-  }
-
-}

ionic/components/list/list.ts

@@ -2,7 +2,6 @@ import {Directive, ElementRef} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
-import {IonicDirective} from '../../config/decorators';
 import {ListVirtualScroll} from './virtual';
 import * as util from 'ionic/util';
 
@@ -17,13 +16,16 @@ import * as util from 'ionic/util';
  * interaction modes such as swipe to edit, drag to reorder, and removing items.
  *
  */
-@IonicDirective({
+@Directive({
   selector: 'ion-list',
   inputs: [
     'items',
     'virtual',
     'content'
-  ]
+  ],
+  host: {
+    'class': 'list'
+  }
 })
 export class List extends Ion {
   /**

ionic/components/menu/test/basic/e2e.ts

@@ -5,5 +5,5 @@ it('should toggle open menu', function() {
 
 
 it('should close menu', function() {
-  element(by.css('.e2eCloseMenu')).click();
+  element(by.css('[menu-close=leftMenu]')).click();
 });

ionic/components/menu/test/basic/main.html

@@ -12,7 +12,7 @@
         {{p.title}}
       </button>
 
-      <button ion-item menu-toggle="leftMenu" detail-none class="e2eCloseMenu">
+      <button ion-item menu-close="leftMenu" detail-none>
         Close Menu
       </button>
 

ionic/components/nav/nav.ts

@@ -430,7 +430,7 @@ class Pane {
   showNavbar(hasNavbar) {
     this.navbar = hasNavbar;
     if (!hasNavbar) {
-      this.renderer.setElementClass(this.elementRef, 'no-navbar', true);
+      this.renderer.setElementAttribute(this.elementRef, 'no-navbar', '');
     }
   }
 

ionic/components/radio/radio.ts

@@ -1,6 +1,5 @@
-import {ElementRef, Host, Optional, NgControl, Query, QueryList, View} from 'angular2/angular2';
+import {Component, Directive, ElementRef, Host, Optional, NgControl, Query, QueryList, View} from 'angular2/angular2';
 
-import {IonicDirective, IonicComponent} from '../../config/decorators';
 import {IonicConfig} from '../../config/config';
 import {Ion} from '../ion';
 import {ListHeader} from '../list/list';
@@ -43,7 +42,7 @@ import {ListHeader} from '../list/list';
  * ```
 */
 
-@IonicDirective({
+@Directive({
   selector: 'ion-radio-group',
   host: {
     'class': 'list',
@@ -162,7 +161,7 @@ export class RadioGroup extends Ion {
  * ```
  *
  */
-@IonicComponent({
+@Component({
   selector: 'ion-radio',
   inputs: [
     'value',

ionic/components/scroll/scroll.ts

@@ -1,8 +1,7 @@
-import {View, ElementRef, onInit} from 'angular2/angular2';
+import {Component, View, ElementRef, onInit} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
-import {IonicComponent} from '../../config/decorators';
 import {Gesture} from '../../gestures/gesture';
 import {CSS} from '../../util/dom';
 import {Animation} from '../../animations/animation';
@@ -13,7 +12,7 @@ import * as util from 'ionic/util';
  * Scroll is a non-flexboxed scroll area that can scroll horizontally or
  * vertically.
  */
-@IonicComponent({
+@Component({
   selector: 'ion-scroll',
   inputs: [
     'scrollX', 'scrollY', 'zoom', 'maxZoom'

ionic/components/search-bar/search-bar.ts

@@ -1,5 +1,4 @@
 import {ElementRef, Pipe, NgControl, Renderer, View} from 'angular2/angular2';
-//import {ControlGroup} from 'angular2/forms'
 
 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
@@ -22,7 +21,6 @@ import {IonicComponent} from '../../config/decorators';
     'query'
   ],
   defaultInputs: {
-
     'showCancel': false,
     'cancelText': 'Cancel',
     'placeholder': 'Search',
@@ -30,7 +28,7 @@ import {IonicComponent} from '../../config/decorators';
       console.log('Default Cancel');
       this.isFocused = false;
       this.shouldLeftAlign = this.value.trim() != '';
-      // TODO input blur      
+      // TODO input blur
     }
   }
 })

ionic/components/search-bar/search-bar.ts.orig

@@ -1,135 +0,0 @@
-import {ElementRef, Pipe, NgControl, Renderer, View} from 'angular2/angular2';
-//import {ControlGroup} from 'angular2/forms'
-
-import {Ion} from '../ion';
-import {IonicConfig} from '../../config/config';
-import {IonicComponent} from '../../config/decorators';
-
-/**
- * @name Search Bar
- * @description
- * The Search Bar service adds an input field which can be used to search or filter items.
- *
- * @usage
- * ```html
- * <ion-search-bar ng-control="searchQuery"></ion-search-bar>
- * ```
- */
-@IonicComponent({
-  selector: 'ion-search-bar',
-  inputs: [
-    'list',
-    'query'
-  ],
-<<<<<<< HEAD
-  defaultInputs: {
-=======
-  defaultProperties: {
-    'showCancel': false,
->>>>>>> master
-    'cancelText': 'Cancel',
-    'placeholder': 'Search',
-    'cancelAction': function() {
-      console.log('Default Cancel');
-      this.isFocused = false;
-      this.shouldLeftAlign = this.value.trim() != '';
-      // TODO input blur      
-    }
-  }
-})
-@View({
-  template: `
-  <div class="search-bar-input-container" [class.left-align]="shouldLeftAlign">
-    <div class="search-bar-search-icon"></div>
-    <input (focus)="inputFocused()" (blur)="inputBlurred()"
-    (input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder" [(ng-model)]="value">
-    <div class="search-bar-close-icon" (click)="clearInput()"></div>
-  </div>
-  <button *ng-if="showCancel" (click)="cancelAction()" class="search-bar-cancel" [class.left-align]="shouldLeftAlign">{{cancelText}}</button>`
-})
-
-export class SearchBar extends Ion {
-  /**
-   * TODO
-   * @param {ElementRef} elementRef  TODO
-   * @param {IonicConfig} config  TODO
-   */
-  constructor(
-    elementRef: ElementRef,
-    config: IonicConfig,
-    ngControl: NgControl,
-    renderer: Renderer
-  ) {
-    super(elementRef, config);
-    this.renderer = renderer;
-    this.elementRef = elementRef;
-    if(!ngControl) {
-      // They don't want to do anything that works, so we won't do anything that breaks
-      return;
-    }
-
-    this.ngControl = ngControl;
-
-    ngControl.valueAccessor = this;
-
-    this.query = '';
-  }
-
-  /**
-   * Much like ngModel, this is called from our valueAccessor for the attached
-   * ControlDirective to update the value internally.
-   */
-  writeValue(value) {
-    this.value = value;
-    this.renderer.setElementProperty(this.elementRef, 'value', this.value);
-
-  }
-
-  registerOnChange(val) {
-  }
-
-  registerOnTouched(val) {
-  }
-
-  inputChanged(event) {
-    this.value = event.target.value;
-    this.ngControl.valueAccessor.writeValue(this.value);
-    this.ngControl.control.updateValue(this.value);
-  }
-
-  inputFocused() {
-    this.isFocused = true;
-    this.shouldLeftAlign = true;
-  }
-  inputBlurred() {
-    this.isFocused = false;
-    this.shouldLeftAlign = this.value.trim() != '';
-  }
-
-  clearInput() {
-    this.value = '';
-    this.ngControl.control.updateValue('');
-  }
-}
-
-/*
-export class SearchPipe extends Pipe {
-  constructor() {
-    super();
-    this.state = 0;
-  }
-
-  supports(newValue) {
-    return true;
-  }
-
-  transform(value, ...args) {
-    return value;
-    //return `${value} state:${this.state ++}`;
-  }
-
-  create(cdRef) {
-    return new SearchPipe(cdRef);
-  }
-}
-*/

ionic/components/search-bar/test/floating/index.ts

@@ -1,5 +1,4 @@
-import {NgControl} from 'angular2/angular2';
+import {NgControl, FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2';
-import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/forms';
 
 import {App} from 'ionic/ionic';
 import {SearchPipe} from 'ionic/components/search-bar/search-bar';

ionic/components/segment/segment.ts

@@ -1,17 +1,15 @@
-import {View, Renderer, ElementRef, EventEmitter, Host, forwardRef, Optional} from 'angular2/angular2';
+import {Component, Directive, View, Renderer, ElementRef, EventEmitter, Host, forwardRef, Optional} from 'angular2/angular2';
 import {Control, NgControl, NgFormControl, ControlGroup, ControlDirective} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
-import {IonicDirective, IonicComponent} from '../../config/decorators'
 import {dom} from 'ionic/util';
 
 /**
  * TODO
  */
-@IonicComponent({
+@Component({
   selector: 'ion-segment',
-  appInjector: [ NgControl ],
   inputs: [
     'value'
   ],
@@ -123,7 +121,7 @@ export class Segment extends Ion {
 /**
  * TODO
  */
-@IonicDirective({
+@Directive({
   selector: 'ion-segment',
   //inputs: ['value'],
   host: {
@@ -190,7 +188,7 @@ export class SegmentControlValueAccessor {
 /**
  * TODO
  */
-@IonicDirective({
+@Directive({
   selector: 'ion-segment-button',
   inputs: [
     'value'

ionic/components/slides/slides.ts

@@ -1,11 +1,9 @@
-import {Component, View, QueryList, ElementRef, EventEmitter, onInit,
+import {Directive, Component, View, ElementRef, Host, NgIf, NgClass} from 'angular2/angular2';
-  Host, forwardRef, NgFor, NgIf, NgClass} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {Animation} from 'ionic/animations/animation';
 import {Gesture} from 'ionic/gestures/gesture';
 import {DragGesture} from 'ionic/gestures/drag-gesture';
-import {IonicComponent, IonicDirective} from '../../config/decorators';
 import {IonicConfig} from '../../config/config';
 import {dom} from 'ionic/util';
 import {CSS} from '../../util/dom';
@@ -14,6 +12,7 @@ import * as util from 'ionic/util';
 import {Swiper} from './swiper-widget';
 import {Scroll} from '../scroll/scroll';
 
+
 /**
  * Slides is a slide box implementation based on Swiper.js
  *
@@ -29,7 +28,7 @@ import {Scroll} from '../scroll/scroll';
  * Licensed under MIT
  *
  */
-@IonicComponent({
+@Component({
   selector: 'ion-slides',
   inputs: [
     'loop',
@@ -447,7 +446,7 @@ export class Slides extends Ion {
 /**
  * TODO
  */
-@IonicComponent({
+@Component({
   selector: 'ion-slide',
   inputs: ['zoom']
 })
@@ -471,7 +470,7 @@ export class Slide {
   }
 }
 
-@IonicDirective({
+@Directive({
   selector: 'slide-lazy',
 })
 export class SlideLazy {

ionic/components/switch/switch.ts

@@ -1,11 +1,11 @@
 import {
+  Component,
   View,
   Directive,
   ElementRef,
   Host,
   Optional,
   NgControl,
-  Renderer,
   Inject,
   forwardRef
 } from 'angular2/angular2';
@@ -13,7 +13,6 @@ import {
 import {Ion} from '../ion';
 import {IonInput} from '../form/input';
 import {IonicConfig} from '../../config/config';
-import {IonicComponent} from '../../config/decorators';
 import {pointerCoord} from '../../util/dom';
 
 /**
@@ -77,7 +76,7 @@ class MediaSwitch {
  * ```
  *
  */
-@IonicComponent({
+@Component({
   selector: 'ion-switch',
   inputs: [
     'value',

ionic/components/tabs/test/tab-bar-scenarios/main.html

@@ -1,6 +1,6 @@
 
 <!-- Text -->
-<ion-tabs class="no-navbar">
+<ion-tabs no-navbar>
   <ion-tab tab-title="Recents"></ion-tab>
   <ion-tab tab-title="Favorites"></ion-tab>
   <ion-tab tab-title="Settings"></ion-tab>
@@ -8,7 +8,7 @@
 
 
 <!-- Icons -->
-<ion-tabs class="no-navbar">
+<ion-tabs no-navbar>
   <ion-tab tab-icon="call"></ion-tab>
   <ion-tab tab-icon="heart"></ion-tab>
   <ion-tab tab-icon="settings"></ion-tab>
@@ -16,7 +16,7 @@
 
 
 <!-- Icons on top of text -->
-<ion-tabs class="no-navbar">
+<ion-tabs no-navbar>
   <ion-tab tab-title="Location" tab-icon="navigate"></ion-tab>
   <ion-tab tab-title="Favorites" tab-icon="star"></ion-tab>
   <ion-tab tab-title="Radio" tab-icon="musical-notes"></ion-tab>
@@ -24,7 +24,7 @@
 
 
 <!-- Icons below text -->
-<ion-tabs tab-bar-icons="bottom" class="no-navbar">
+<ion-tabs tab-bar-icons="bottom" no-navbar>
   <ion-tab tab-title="Recents" tab-icon="call"></ion-tab>
   <ion-tab tab-title="Favorites" tab-icon="heart"></ion-tab>
   <ion-tab tab-title="Settings" tab-icon="settings"></ion-tab>
@@ -32,7 +32,7 @@
 
 
 <!-- Icons right of text -->
-<ion-tabs tab-bar-icons="right" class="no-navbar">
+<ion-tabs tab-bar-icons="right" no-navbar>
   <ion-tab tab-title="Recents" tab-icon="call"></ion-tab>
   <ion-tab tab-title="Favorites" tab-icon="heart"></ion-tab>
   <ion-tab tab-title="Settings" tab-icon="settings"></ion-tab>
@@ -40,21 +40,21 @@
 
 
 <!-- Icons left of text -->
-<ion-tabs tab-bar-icons="left" class="no-navbar">
+<ion-tabs tab-bar-icons="left" no-navbar>
   <ion-tab tab-title="Recents" tab-icon="call"></ion-tab>
   <ion-tab tab-title="Favorites" tab-icon="heart"></ion-tab>
   <ion-tab tab-title="Settings" tab-icon="settings"></ion-tab>
 </ion-tabs>
 
 <!-- No icons -->
-<ion-tabs tab-bar-icons="hide" class="no-navbar">
+<ion-tabs tab-bar-icons="hide" no-navbar>
   <ion-tab tab-title="Recents" tab-icon="call"></ion-tab>
   <ion-tab tab-title="Favorites" tab-icon="heart"></ion-tab>
   <ion-tab tab-title="Settings" tab-icon="settings"></ion-tab>
 </ion-tabs>
 
 <!-- No overflow text -->
-<ion-tabs class="no-navbar">
+<ion-tabs no-navbar>
   <ion-tab tab-title="Indiana Jones and the Raiders of the Lost Ark"></ion-tab>
   <ion-tab tab-title="Indiana Jones and the Temple of Doom"></ion-tab>
   <ion-tab tab-title="Indiana Jones and the Last Crusade"></ion-tab>

ionic/components/text-input/text-input.ts

@@ -1,6 +1,5 @@
 import {Directive, View, Host, Optional, ElementRef, Attribute, Query, QueryList, NgZone} from 'angular2/angular2';
 
-import {IonicDirective} from '../../config/decorators';
 import {IonicConfig} from '../../config/config';
 import {IonInput} from '../form/input';
 import {Label} from './label';
@@ -14,9 +13,8 @@ import {IonicPlatform} from '../../platform/platform';
 /**
  * TODO
  */
-@IonicDirective({
+@Directive({
   selector: 'ion-input',
-  classId: 'item-input',
   inputs: [
     'tabIndex'
   ],

ionic/config/decorators.ts

@@ -78,18 +78,6 @@ export function IonicView(args) {
   }
 }
 
-/**
- * TODO
- */
-export function IonicDirective(config) {
-  return function(cls) {
-    var annotations = Reflect.getMetadata('annotations', cls) || [];
-    annotations.push(new Directive(appendConfig(cls, config)));
-    Reflect.defineMetadata('annotations', annotations, cls);
-    return cls;
-  }
-}
-
 /**
  * TODO
  */
@@ -109,22 +97,22 @@ export function makeComponent(cls, config) {
 function appendConfig(cls, config) {
   config.host = config.host || {};
 
-  cls.defaultProperties = config.defaultProperties || {};
+  cls.defaultInputs = config.defaultInputs || {};
 
-  config.properties = config.properties || [];
+  config.inputs = config.inputs || [];
 
-  for (let prop in cls.defaultProperties) {
+  for (let prop in cls.defaultInputs) {
-    // add the property to the component "properties"
+    // add the property to the component "inputs"
-    config.properties.push(prop);
+    config.inputs.push(prop);
 
     // set the component "hostProperties", so the instance's
-    // property value will be used to set the element's attribute
+    // input value will be used to set the element's attribute
     config.host['[attr.' + util.pascalCaseToDashCase(prop) + ']'] = prop;
   }
 
   cls.delegates = config.delegates;
 
-  let componentId = config.classId || (config.selector && config.selector.replace('ion-', ''));
+  let componentId = (config.selector && config.selector.replace('ion-', ''));
   config.host['class'] = ((config.host['class'] || '') + ' ' + componentId).trim();
 
   return config;