refactor: simplifying

src/app/components/action-bar/action-bar.component.ts

@@ -1,19 +1,11 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { ActionItemComponent } from '../action-item/';
+import { Component, Input } from '@angular/core';
 
 @Component({
   moduleId: module.id,
   selector: 'ActionBar',
   templateUrl: 'action-bar.component.html',
-  styleUrls: ['action-bar.component.css'],
-  directives: [ActionItemComponent]
+  styleUrls: ['action-bar.component.css']
 })
-export class ActionBarComponent implements OnInit {
+export class ActionBarComponent {
   @Input() title: string;
-
-  constructor() {}
-
-  ngOnInit() {
-  }
-
 }

src/app/components/action-item/action-item.component.html

@@ -1,3 +1 @@
-<div>
-  <ng-content></ng-content>
-</div>
+<ng-content></ng-content>

src/app/components/action-item/action-item.component.scss

@@ -1,7 +1,4 @@
 :host {
   display:inline-block;
-
-  div {
-    padding:12px;
-  }
+  padding:12px;
 }

src/app/components/action-item/action-item.component.ts

@@ -1,25 +1,22 @@
 import { Component, OnInit, Input, ElementRef } from '@angular/core';
-import { ButtonComponent } from '../button/';
 
 @Component({
   moduleId: module.id,
   selector: 'ActionItem',
   templateUrl: 'action-item.component.html',
-  styleUrls: ['action-item.component.css'],
-  directives: [ButtonComponent]
+  styleUrls: ['action-item.component.css']
 })
 export class ActionItemComponent implements OnInit {
-  @Input('ios.position') position: string;
-  public positionClass: string;
+  @Input('ios.position') iosPosition: string;
+  @Input('android.position') androidPosition: string;
 
   constructor(private el: ElementRef) {}
 
   ngOnInit() {
-    if (this.position === 'right') {
+    if (this.iosPosition === 'right' || this.androidPosition === 'popup') {
       let cls = 'btn-right';
       let currentClassName = this.el.nativeElement.className;
       this.el.nativeElement.className = currentClassName ? [currentClassName, cls].join(' ') : cls;
     }
   }
-
 }

src/app/components/button/button.component.ts

@@ -1,18 +1,15 @@
-import { Component, Input, ElementRef, OnInit } from '@angular/core';
+import { Component, Input, ElementRef } from '@angular/core';
 
 @Component({
   moduleId: module.id,
   selector: 'Button',
   templateUrl: 'button.component.html',
   styleUrls: ['button.component.css']
 })
-export class ButtonComponent implements OnInit {
+export class ButtonComponent {
   @Input() text: string;
 
-  constructor(private el: ElementRef) { }
-
-  ngOnInit() {
+  constructor(private el: ElementRef) { 
     this.el.nativeElement.setAttribute('type', 'submit');
   }
-
 }

src/app/components/image/image.component.html

@@ -1 +1 @@
-<img [src]="imgSrc"/>
+<img [src]="imgSrc">

src/app/components/image/image.component.ts

@@ -8,12 +8,9 @@ import { Component, OnInit, Input, OnChanges } from '@angular/core';
 })
 export class ImageComponent implements OnChanges {
   @Input() src: string;
-  public imgSrc: string
-
-  constructor() {}
+  public imgSrc: string;
 
   ngOnChanges() {
-    console.log('ngOnChanges');
     if (this.src) {
       if (this.src.indexOf('~') === 0) {
         // local file  
@@ -23,5 +20,4 @@ export class ImageComponent implements OnChanges {
       }
     }
   }
-
 }

src/app/components/label/label.component.html

@@ -1 +1 @@
-<div>{{text}}</div>
+{{text}}

src/app/components/label/label.component.ts

@@ -1,17 +1,11 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   moduleId: module.id,
   selector: 'Label',
   templateUrl: 'label.component.html',
   styleUrls: ['label.component.css']
 })
-export class LabelComponent implements OnInit {
+export class LabelComponent {
   @Input() text: string;
-
-  constructor() {}
-
-  ngOnInit() {
-  }
-
 }

src/app/components/layout-containers/stack-layout/stack-layout.component.html

@@ -1,3 +1 @@
-<div class="stack-layout">
-  <ng-content></ng-content>
-</div>
+<ng-content class="stack-layout"></ng-content>

src/app/components/layout-containers/stack-layout/stack-layout.component.scss

@@ -1,3 +1,3 @@
-.stack-layout {
-  padding:20px;
+:host {
+  display:block;
 }

src/app/components/layout-containers/stack-layout/stack-layout.component.ts

@@ -1,19 +1,9 @@
-import { Component, OnInit } from '@angular/core';
-import { LabelComponent } from '../../label';
-import { ImageComponent } from '../../image';
+import { Component } from '@angular/core';
 
 @Component({
   moduleId: module.id,
   selector: 'StackLayout',
   templateUrl: 'stack-layout.component.html',
-  styleUrls: ['stack-layout.component.css'],
-  directives: [LabelComponent, ImageComponent]
+  styleUrls: ['stack-layout.component.css']
 })
-export class StackLayoutComponent implements OnInit {
-
-  constructor() {}
-
-  ngOnInit() {
-  }
-
-}
+export class StackLayoutComponent {}

src/app/components/list-view/list-view.component.html

@@ -1,3 +1 @@
-<DetachedContainer>
-    <Placeholder #loader></Placeholder>
-</DetachedContainer>
+<Placeholder #loader></Placeholder>

src/global.scss

@@ -5,10 +5,6 @@ body {
   font-family: sans-serif;
 }
 
-Image {
-  margin:20;
-}
-
 ListView {
   max-width: 320px;
   margin: 0 auto;
@@ -20,14 +16,10 @@ ListView {
         background-color: #efefef;
       }
     }
-    div {
-      padding:0 !important;  
-
-      Label {
-        text-align: left;
-        padding:5px;
-      }
+
+    Label {
+      text-align: left;
+      padding:5px 10px;
     }
-
   }
 }