feat(badge): update badge to ionic core

src/components/app/app.scss

@@ -449,3 +449,11 @@ ion-footer {
     }
   }
 }
+
+
+// Core Components
+// --------------------------------------------------
+
+ion-badge {
+  visibility: hidden;
+}

src/components/badge/badge.ios.scss

@@ -1,4 +1,6 @@
 @import "../../themes/ionic.globals.ios";
+@import "./badge";
+
 
 // iOS Badge
 // --------------------------------------------------

src/components/badge/badge.md.scss

@@ -1,4 +1,6 @@
 @import "../../themes/ionic.globals.md";
+@import "./badge";
+
 
 // Material Design Badge
 // --------------------------------------------------

src/components/badge/badge.module.ts

@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Badge } from './badge';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Badge
-  ],
-  exports: [
-    Badge
-  ]
-})
-export class BadgeModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: BadgeModule, providers: []
-    };
-  }
-}

src/components/badge/badge.scss

@@ -1,5 +1,6 @@
 @import "../../themes/ionic.globals";
 
+
 // Badge
 // --------------------------------------------------
 
@@ -10,9 +11,14 @@ $badge-font-size:                 1.3rem !default;
 $badge-font-weight:               bold !default;
 
 
-ion-badge {
+ion-badge,
+:host {
   display: inline-block;
+  visibility: inherit !important;
+  contain: layout content;
+}
 
+.badge {
   padding: 3px 8px;
 
   min-width: 10px;
@@ -26,6 +32,7 @@ ion-badge {
   vertical-align: baseline;
 }
 
-ion-badge:empty {
+ion-badge:empty,
+:host(:empty) {
   display: none;
 }

src/components/badge/badge.ts

@@ -1,23 +1,12 @@
-import { Directive, ElementRef, Renderer } from '@angular/core';
-
-import { Config } from '../../config/config';
-import { Ion } from '../ion';
+import { Component } from '../../util/decorators';
 
 
-/**
-  * @name Badge
-  * @module ionic
-  * @description
-  * Badges are simple components in Ionic containing numbers or text. You can display a badge to indicate that there is new information associated with the item it is on.
-  * @see {@link /docs/components/#badges Badges Component Docs}
- */
-@Directive({
-  selector: 'ion-badge'
-})
-export class Badge extends Ion {
-
-  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
-    super(config, elementRef, renderer, 'badge');
+@Component({
+  tag: 'ion-badge',
+  styleUrls: {
+    ios: 'badge.ios.scss',
+    md: 'badge.md.scss',
+    wp: 'badge.wp.scss'
   }
-
-}
+})
+export class Badge {}

src/components/badge/badge.wp.scss

@@ -1,4 +1,6 @@
 @import "../../themes/ionic.globals.wp";
+@import "./badge";
+
 
 // Windows Badge
 // --------------------------------------------------

src/components/badge/test/basic/app/app.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { IonicApp, IonicModule } from '../../../../..';
 
@@ -14,6 +14,7 @@ import { PageOneModule } from '../pages/page-one/page-one.module';
     IonicModule.forRoot(AppComponent),
     PageOneModule
   ],
-  bootstrap: [IonicApp]
+  bootstrap: [IonicApp],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class AppModule {}

src/components/badge/test/basic/pages/page-one/page-one.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,6 +12,9 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class PageOneModule {}

src/components/tabs/tabs.module.ts

@@ -1,7 +1,6 @@
 import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
-import { BadgeModule } from '../badge/badge.module';
 import { IconModule } from '../icon/icon.module';
 
 import { Tab } from './tab';
@@ -12,7 +11,6 @@ import { Tabs } from './tabs';
 /** @hidden */
 @NgModule({
   imports: [
-    BadgeModule,
     CommonModule,
     IconModule
   ],
@@ -27,7 +25,8 @@ import { Tabs } from './tabs';
     TabButton,
     TabHighlight,
     Tabs
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class TabsModule {
   public static forRoot(): ModuleWithProviders {