chore: add ViewEncapsulation.None to components

Closes #5884

ionic/components/action-sheet/action-sheet.ts

@@ -1,4 +1,4 @@
-import {Component, Renderer, ElementRef, HostListener, ChangeDetectionStrategy} from 'angular2/core';
+import {Component, Renderer, ElementRef, HostListener, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
 import {NgFor, NgIf} from 'angular2/common';
 
 import {Animation} from '../../animations/animation';
@@ -188,6 +188,7 @@ export class ActionSheet extends ViewController {
   },
   directives: [NgFor, NgIf, Icon],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 class ActionSheetCmp {
   private d: any;

ionic/components/alert/alert.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, Renderer, HostListener, ChangeDetectionStrategy} from 'angular2/core';
+import {Component, ElementRef, Renderer, HostListener, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
 import {NgClass, NgSwitch, NgIf, NgFor} from 'angular2/common';
 
 import {Animation} from '../../animations/animation';
@@ -310,6 +310,7 @@ export class Alert extends ViewController {
   },
   directives: [NgClass, NgSwitch, NgIf, NgFor],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 class AlertCmp {
   private activeId: string;

ionic/components/button/button.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, Renderer, Attribute, Optional, Input, ChangeDetectionStrategy} from 'angular2/core';
+import {Component, ElementRef, Renderer, Attribute, Optional, Input, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
 
 import {Config} from '../../config/config';
 import {Toolbar} from '../toolbar/toolbar';
@@ -40,6 +40,7 @@ import {isTrueProperty} from '../../util/util';
     '</span>' +
     '<ion-button-effect></ion-button-effect>',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 export class Button {
   private _role: string = 'button'; // bar-button/item-button

ionic/components/checkbox/checkbox.ts

@@ -1,4 +1,4 @@
-import {Component, Optional, Input, Output, EventEmitter, HostListener, Provider, forwardRef} from 'angular2/core';
+import {Component, Optional, Input, Output, EventEmitter, HostListener, Provider, forwardRef, ViewEncapsulation} from 'angular2/core';
 import {NG_VALUE_ACCESSOR} from 'angular2/common';
 
 import {Form} from '../../util/form';
@@ -63,7 +63,8 @@ const CHECKBOX_VALUE_ACCESSOR = new Provider(
   host: {
     '[class.checkbox-disabled]': '_disabled'
   },
-  providers: [CHECKBOX_VALUE_ACCESSOR]
+  providers: [CHECKBOX_VALUE_ACCESSOR],
+  encapsulation: ViewEncapsulation.None,
 })
 export class Checkbox {
   private _checked: boolean = false;

ionic/components/content/content.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, Optional, NgZone, ChangeDetectionStrategy} from 'angular2/core';
+import {Component, ElementRef, Optional, NgZone, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
 
 import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
@@ -34,6 +34,7 @@ import {ScrollView} from '../../util/scroll-view';
     '<ng-content select="ion-fixed"></ng-content>' +
     '<ng-content select="ion-refresher"></ng-content>',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 export class Content extends Ion {
   private _padding: number = 0;

ionic/components/img/img.ts

@@ -1,4 +1,4 @@
-import {Component, Input, HostBinding, ViewChild, ElementRef} from 'angular2/core';
+import {Component, Input, HostBinding, ViewChild, ElementRef, ViewEncapsulation} from 'angular2/core';
 
 import {isPresent} from '../../util/util';
 import {Platform} from '../../platform/platform';
@@ -10,7 +10,8 @@ import {Platform} from '../../platform/platform';
     '<div *ngIf="_useA" class="img-placeholder" [style.height]="_h" [style.width]="_w"></div>' +
     '<img #imgA *ngIf="_useA" (load)="_onLoad()" [src]="_srcA" [style.height]="_h" [style.width]="_w">' +
     '<div *ngIf="!_useA" class="img-placeholder" [style.height]="_h" [style.width]="_w"></div>' +
-    '<img #imgB *ngIf="!_useA" (load)="_onLoad()" [src]="_srcB" [style.height]="_h" [style.width]="_w">'
+    '<img #imgB *ngIf="!_useA" (load)="_onLoad()" [src]="_srcB" [style.height]="_h" [style.width]="_w">',
+  encapsulation: ViewEncapsulation.None,
 })
 export class Img {
   private _src: string = '';

ionic/components/infinite-scroll/infinite-scroll-content.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from 'angular2/core';
+import {Component, Input, ViewEncapsulation} from 'angular2/core';
 import {NgIf} from 'angular2/common';
 
 import {Config} from '../../config/config';
@@ -21,7 +21,8 @@ import {Spinner} from '../spinner/spinner';
   directives: [NgIf, Spinner],
   host: {
     '[attr.state]': 'inf.state'
-  }
+  },
+  encapsulation: ViewEncapsulation.None,
 })
 export class InfiniteScrollContent {
 

ionic/components/input/input.ts

@@ -1,4 +1,4 @@
-import {Component, Optional, ElementRef, ViewChild} from 'angular2/core';
+import {Component, Optional, ElementRef, ViewChild, ViewEncapsulation} from 'angular2/core';
 import {NgIf, NgControl} from 'angular2/common';
 
 import {Button} from '../button/button';
@@ -74,7 +74,8 @@ import {Platform} from '../../platform/platform';
     NextInput,
     NativeInput,
     Button
-  ]
+  ],
+  encapsulation: ViewEncapsulation.None,
 })
 export class TextInput extends InputBase {
   constructor(
@@ -155,7 +156,8 @@ export class TextInput extends InputBase {
     NgIf,
     NextInput,
     NativeInput
-  ]
+  ],
+  encapsulation: ViewEncapsulation.None,
 })
 export class TextArea extends InputBase {
   constructor(

ionic/components/item/item-sliding.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, Optional, ChangeDetectionStrategy} from 'angular2/core';
+import {Component, ElementRef, Optional, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
 
 import {List} from '../list/list';
 
@@ -33,6 +33,7 @@ import {List} from '../list/list';
     '<ng-content select="ion-item,[ion-item]"></ng-content>' +
     '<ng-content select="ion-item-options"></ng-content>',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 export class ItemSliding {
 

ionic/components/item/item.ts

@@ -1,4 +1,4 @@
-import {Component, ContentChildren, forwardRef, ViewChild, ContentChild, Renderer, ElementRef, ChangeDetectionStrategy} from 'angular2/core';
+import {Component, ContentChildren, forwardRef, ViewChild, ContentChild, Renderer, ElementRef, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
 import {NgIf} from 'angular2/common';
 
 import {Button} from '../button/button';
@@ -59,6 +59,7 @@ import {Label} from '../label/label';
   },
   directives: [NgIf, Label],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 export class Item {
   private _ids: number = -1;

ionic/components/loading/loading.ts

@@ -1,4 +1,4 @@
-import {Component, Renderer, ElementRef, HostListener, ChangeDetectionStrategy} from 'angular2/core';
+import {Component, Renderer, ElementRef, HostListener, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
 import {NgFor, NgIf} from 'angular2/common';
 
 import {Animation} from '../../animations/animation';
@@ -159,6 +159,7 @@ export class Loading extends ViewController {
   },
   directives: [NgIf, Spinner],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 class LoadingCmp {
   private d: any;

ionic/components/menu/menu.ts

@@ -1,4 +1,4 @@
-import {Component, forwardRef, Directive, Host, EventEmitter, ElementRef, NgZone, Input, Output, Renderer, ChangeDetectionStrategy} from 'angular2/core';
+import {Component, forwardRef, Directive, Host, EventEmitter, ElementRef, NgZone, Input, Output, Renderer, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
 
 import {Ion} from '../ion';
 import {Config} from '../../config/config';
@@ -23,6 +23,7 @@ import {isTrueProperty} from '../../util/util';
     '<div tappable disable-activated class="backdrop"></div>',
   directives: [forwardRef(() => MenuBackdrop)],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 export class Menu extends Ion {
   private _preventTime: number = 0;

ionic/components/nav/nav.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, Input, Optional, NgZone, Compiler, AppViewManager, Renderer, Type, ViewChild} from 'angular2/core';
+import {Component, ElementRef, Input, Optional, NgZone, Compiler, AppViewManager, Renderer, Type, ViewChild, ViewEncapsulation} from 'angular2/core';
 
 import {IonicApp} from '../app/app';
 import {Config} from '../../config/config';
@@ -106,7 +106,8 @@ import {ViewController} from './view-controller';
 @Component({
   selector: 'ion-nav',
   template: '<div #contents></div><div portal></div>',
-  directives: [Portal]
+  directives: [Portal],
+  encapsulation: ViewEncapsulation.None,
 })
 export class Nav extends NavController {
   private _root: Type;

ionic/components/radio/radio-button.ts

@@ -1,4 +1,4 @@
-import {Component, Optional, Input, Output, HostListener, EventEmitter} from 'angular2/core';
+import {Component, Optional, Input, Output, HostListener, EventEmitter, ViewEncapsulation} from 'angular2/core';
 
 import {Form} from '../../util/form';
 import {isTrueProperty, isPresent, isBlank, isCheckedProperty} from '../../util/util';
@@ -44,7 +44,8 @@ import {RadioGroup} from './radio-group';
     '</button>',
   host: {
     '[class.radio-disabled]': '_disabled'
-  }
+  },
+  encapsulation: ViewEncapsulation.None,
 })
 export class RadioButton {
   private _checked: boolean = false;

ionic/components/refresher/refresher-content.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from 'angular2/core';
+import {Component, Input, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
 import {NgIf} from 'angular2/common';
 
 import {Config} from '../../config/config';
@@ -28,7 +28,9 @@ import {Spinner} from '../spinner/spinner';
   directives: [NgIf, Icon, Spinner],
   host: {
     '[attr.state]': 'r.state'
-  }
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 export class RefresherContent {
 

ionic/components/scroll/scroll.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, ChangeDetectionStrategy} from 'angular2/core';
+import {Component, ElementRef, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
 
 import {Ion} from '../ion';
 import {Gesture} from '../../gestures/gesture';
@@ -44,6 +44,7 @@ import * as util from '../../util';
       '</div>' +
     '</scroll-content>',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 export class Scroll extends Ion {
   /**

ionic/components/searchbar/searchbar.ts

@@ -1,4 +1,4 @@
-import {ElementRef, Component, Directive, Host, HostBinding, HostListener, ViewChild, Input, Output, EventEmitter, Optional} from 'angular2/core';
+import {ElementRef, Component, Directive, Host, HostBinding, HostListener, ViewChild, Input, Output, EventEmitter, Optional, ViewEncapsulation} from 'angular2/core';
 import {NgIf, NgClass, NgControl, FORM_DIRECTIVES} from 'angular2/common';
 
 import {Ion} from '../ion';
@@ -64,7 +64,8 @@ export class SearchbarInput {
       '<button clear class="searchbar-clear-icon" (click)="clearInput()" (mousedown)="clearInput()"></button>' +
     '</div>' +
     '<button clear (click)="cancelSearchbar()" (mousedown)="cancelSearchbar()" [hidden]="hideCancelButton" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
-  directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, SearchbarInput]
+  directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, SearchbarInput],
+  encapsulation: ViewEncapsulation.None,
 })
 export class Searchbar extends Ion {
   private _tmr: any;

ionic/components/segment/segment.ts

@@ -1,4 +1,4 @@
-import {Directive, Component, ElementRef, Renderer, Optional, EventEmitter, Input, Output, HostListener, ContentChildren, QueryList} from 'angular2/core';
+import {Directive, Component, ElementRef, Renderer, Optional, EventEmitter, Input, Output, HostListener, ContentChildren, QueryList, ViewEncapsulation} from 'angular2/core';
 import {NgControl} from 'angular2/common';
 
 import {isPresent} from '../../util/util';
@@ -52,7 +52,8 @@ import {isPresent} from '../../util/util';
     'tappable': '',
     'class': 'segment-button',
     'role': 'button'
-  }
+  },
+  encapsulation: ViewEncapsulation.None,
 })
 export class SegmentButton {
 

ionic/components/select/select.ts

@@ -1,4 +1,4 @@
-import {Component, Optional, ElementRef, Renderer, Input, Output, Provider, forwardRef, EventEmitter, HostListener, ContentChildren, QueryList} from 'angular2/core';
+import {Component, Optional, ElementRef, Renderer, Input, Output, Provider, forwardRef, EventEmitter, HostListener, ContentChildren, QueryList, ViewEncapsulation} from 'angular2/core';
 import {NG_VALUE_ACCESSOR} from 'angular2/common';
 
 import {Alert} from '../alert/alert';
@@ -115,7 +115,8 @@ const SELECT_VALUE_ACCESSOR = new Provider(
   host: {
     '[class.select-disabled]': '_disabled'
   },
-  providers: [SELECT_VALUE_ACCESSOR]
+  providers: [SELECT_VALUE_ACCESSOR],
+  encapsulation: ViewEncapsulation.None,
 })
 export class Select {
   private _disabled: any = false;

ionic/components/slides/slides.ts

@@ -1,4 +1,4 @@
-import {Directive, Component, ElementRef, Host, EventEmitter, Input, Output, ChangeDetectionStrategy} from 'angular2/core';
+import {Directive, Component, ElementRef, Host, EventEmitter, Input, Output, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
 import {NgClass} from 'angular2/common';
 
 import {Ion} from '../ion';
@@ -73,6 +73,7 @@ import {Scroll} from '../scroll/scroll';
     '</div>',
   directives: [NgClass],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 export class Slides extends Ion {
 
@@ -669,6 +670,7 @@ export class Slides extends Ion {
   selector: 'ion-slide',
   template: '<div class="slide-zoom"><ng-content></ng-content></div>',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 export class Slide {
 

ionic/components/spinner/spinner.ts

@@ -1,4 +1,4 @@
-import {Component, Input, ChangeDetectionStrategy} from 'angular2/core';
+import {Component, Input, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
 import {NgStyle} from 'angular2/common';
 
 import {Config} from '../../config/config';
@@ -112,6 +112,7 @@ import {Config} from '../../config/config';
     '[class.spinner-paused]': 'paused'
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 export class Spinner {
   private _c: any[];

ionic/components/tabs/tab.ts

@@ -1,4 +1,4 @@
-import {Component, Directive, Host, Inject, forwardRef, ElementRef, Compiler, AppViewManager, NgZone, Renderer, Type} from 'angular2/core';
+import {Component, Directive, Host, Inject, forwardRef, ElementRef, Compiler, AppViewManager, NgZone, Renderer, Type, ViewEncapsulation} from 'angular2/core';
 import {EventEmitter, Input, Output} from 'angular2/core';
 
 import {IonicApp} from '../app/app';
@@ -80,7 +80,8 @@ import {TabButton} from './tab-button';
     '[attr.aria-labelledby]': '_btnId',
     'role': 'tabpanel'
   },
-  template: '<div #contents></div>'
+  template: '<div #contents></div>',
+  encapsulation: ViewEncapsulation.None,
 })
 export class Tab extends NavController {
 

ionic/components/tabs/tabs.ts

@@ -1,4 +1,4 @@
-import {Component, Directive, ElementRef, Optional, Host, forwardRef, ViewContainerRef, ViewChild, ViewChildren, EventEmitter, Output, Input, Renderer, Type} from 'angular2/core';
+import {Component, Directive, ElementRef, Optional, Host, forwardRef, ViewContainerRef, ViewChild, ViewChildren, EventEmitter, Output, Input, Renderer, Type, ViewEncapsulation} from 'angular2/core';
 import {NgFor, NgIf} from 'angular2/common';
 
 import {IonicApp} from '../app/app';
@@ -65,7 +65,8 @@ import {isBlank, isTrueProperty} from '../../util/util';
     TabButton,
     TabHighlight,
     forwardRef(() => TabNavBarAnchor)
-  ]
+  ],
+  encapsulation: ViewEncapsulation.None,
 })
 export class Tabs extends Ion {
   private _ids: number = -1;

ionic/components/toggle/toggle.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, Renderer, Input, Output, EventEmitter, Optional, Provider, forwardRef} from 'angular2/core';
+import {Component, ElementRef, Renderer, Input, Output, EventEmitter, Optional, Provider, forwardRef, ViewEncapsulation} from 'angular2/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from 'angular2/common';
 
 import {Form} from '../../util/form';
@@ -73,7 +73,8 @@ const TOGGLE_VALUE_ACCESSOR = new Provider(
   host: {
     '[class.toggle-disabled]': '_disabled'
   },
-  providers: [TOGGLE_VALUE_ACCESSOR]
+  providers: [TOGGLE_VALUE_ACCESSOR],
+  encapsulation: ViewEncapsulation.None,
 })
 export class Toggle implements ControlValueAccessor  {
   private _checked: boolean = false;

ionic/components/toolbar/toolbar.ts

@@ -1,4 +1,4 @@
-import {Component, Directive, Host, ElementRef, Optional, forwardRef, Inject, ContentChildren, ContentChild, QueryList, ChangeDetectionStrategy} from 'angular2/core';
+import {Component, Directive, Host, ElementRef, Optional, forwardRef, Inject, ContentChildren, ContentChild, QueryList, ChangeDetectionStrategy, ViewEncapsulation} from 'angular2/core';
 
 import {Ion} from '../ion';
 import {MenuToggle} from '../menu/menu-toggle';
@@ -147,6 +147,7 @@ export class Toolbar extends ToolbarBase {
       '<ng-content></ng-content>' +
     '</div>',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 export class ToolbarTitle extends Ion {
   constructor(