Move some templates + css into separate files

lib/components/LoadingBar/loading-bar.scss

@@ -0,0 +1,21 @@
+:host {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: block;
+
+  height: 5px;
+  z-index: 100;
+}
+
+span {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: attr(progress percentage);
+  background-color: #5f7fc3;
+  transition: right 0.2s linear;
+}

lib/components/LoadingBar/loading-bar.ts

@@ -6,29 +6,7 @@ import { Input, HostBinding, Component, OnChanges } from '@angular/core';
   template: `
   <span [style.width]='progress + "%"'> </span>
   `,
-  styles: [`
+  styleUrls: ['loading-bar.scss']
-    :host {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      display: block;
-
-      height: 5px;
-      z-index: 100;
-    }
-
-    span {
-      display: block;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      right: attr(progress percentage);
-      background-color: #5f7fc3;
-      transition: right 0.2s linear;
-    }
-  `]
 })
 export class LoadingBar implements OnChanges {
   @Input() progress:number = 0;

lib/shared/components/DropDown/drop-down.html

@@ -0,0 +1,3 @@
+<select (change)=onChange($event.target.value)>
+  <ng-content></ng-content>
+</select>

lib/shared/components/DropDown/drop-down.ts

@@ -5,11 +5,7 @@ import * as DropKick from 'dropkickjs';
 
 @Component({
   selector: 'drop-down',
-  template: `
+  templateUrl: 'drop-down.html',
-    <select (change)=onChange($event.target.value)>
-      <ng-content></ng-content>
-    </select>
-  `,
   styleUrls: ['./drop-down.css']
 })
 export class DropDown implements AfterContentInit {

lib/shared/components/Tabs/tab.html

@@ -0,0 +1,3 @@
+<div class="tab-wrap" [ngClass]="{'active': active}">
+  <ng-content></ng-content>
+</div>

lib/shared/components/Tabs/tab.scss

@@ -0,0 +1,10 @@
+:host {
+  display: block;
+}
+.tab-wrap {
+  display: none;
+}
+
+.tab-wrap.active {
+  display: block;
+}

lib/shared/components/Tabs/tabs.html

@@ -0,0 +1,5 @@
+<ul>
+  <li *ngFor="let tab of tabs" [ngClass]="{active: tab.active}" (click)="selectTab(tab)"
+    class="tab-{{tab.tabStatus}}">{{tab.tabTitle}}</li>
+</ul>
+<ng-content></ng-content>

lib/shared/components/Tabs/tabs.ts

@@ -5,13 +5,7 @@ import { ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'tabs',
-  template: `
+  templateUrl: 'tabs.html',
-    <ul>
-      <li *ngFor="let tab of tabs" [ngClass]="{active: tab.active}" (click)="selectTab(tab)"
-        class="tab-{{tab.tabStatus}}">{{tab.tabTitle}}</li>
-    </ul>
-    <ng-content></ng-content>
-  `,
   styleUrls: ['tabs.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -63,23 +57,8 @@ export class Tabs implements OnInit {
 
 @Component({
   selector: 'tab',
-  template: `
+  templateUrl: 'tab.html',
-    <div class="tab-wrap" [ngClass]="{'active': active}">
+  styleUrls: ['tab.css']
-      <ng-content></ng-content>
-    </div>
-  `,
-  styles: [`
-    :host {
-      display: block;
-    }
-    .tab-wrap {
-      display: none;
-    }
-
-    .tab-wrap.active {
-      display: block;
-    }`
-  ]
 })
 export class Tab {
   @Input() active: boolean = false;