feat(badge): add badge component

src/demo-app/badge/badge-demo.html

@@ -0,0 +1,84 @@
+<div class="badge-demo">
+
+  <h3>Icons</h3>
+  <mat-badge [content]="badgeContent">
+    <mat-icon color="accent">home</mat-icon>
+  </mat-badge>
+
+  <mat-badge content="1" overlap="false">
+    <mat-icon color="primary">home</mat-icon>
+  </mat-badge>
+
+  <br />
+  <br />
+  <br />
+
+  <h3>Buttons</h3>
+  <mat-badge content="22">
+    <button mat-raised-button>
+      <mat-icon color="primary">home</mat-icon>
+    </button>
+  </mat-badge>
+
+  <mat-badge content="1">
+    <button mat-raised-button>
+      Email
+    </button>
+  </mat-badge>
+
+  <br />
+  <br />
+  <br />
+
+  <h3>Text</h3>
+  <mat-badge [overlap]="false" content="22">
+    Email
+  </mat-badge>
+
+  <mat-badge overlap="false" content="John">
+    Email
+  </mat-badge>
+
+  <br />
+  <br />
+  <br />
+
+  <h3>Text Directions</h3>
+  <mat-badge overlap="false" direction="above before" content="22" color="primary">
+    Email
+  </mat-badge>
+
+  <mat-badge overlap="false" direction="above after" content="22" color="accent">
+    Email
+  </mat-badge>
+
+  <mat-badge overlap="false" direction="below before" content="22" color="warn">
+    Email
+  </mat-badge>
+
+  <mat-badge overlap="false" direction="below after" content="22">
+    Email
+  </mat-badge>
+
+  <br />
+  <br />
+  <br />
+
+  <h3>Icon Directions</h3>
+  <mat-badge direction="above before" content="22">
+    <mat-icon color="primary">home</mat-icon>
+  </mat-badge>
+
+  <mat-badge direction="above after" content="22">
+    <mat-icon color="primary">home</mat-icon>
+  </mat-badge>
+
+  <mat-badge direction="below before" content="22">
+    <mat-icon color="primary">home</mat-icon>
+  </mat-badge>
+
+  <mat-badge direction="below after" content="22">
+    <mat-icon color="primary">home</mat-icon>
+  </mat-badge>
+
+</div>

src/demo-app/badge/badge-demo.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'badge-demo',
+  templateUrl: 'badge-demo.html',
+  styleUrls: ['badge-demo.css'],
+})
+export class BadgeDemo {
+  badgeContent = '1';
+}

src/demo-app/demo-app/demo-app.ts

@@ -43,6 +43,7 @@ export class DemoApp {
   dark = false;
   navItems = [
     {name: 'Autocomplete', route: '/autocomplete'},
+    {name: 'Badge', route: '/badge'},
     {name: 'Button Toggle', route: '/button-toggle'},
     {name: 'Button', route: '/button'},
     {name: 'Card', route: '/card'},

src/demo-app/demo-app/demo-module.ts

@@ -47,6 +47,7 @@ import {TooltipDemo} from '../tooltip/tooltip-demo';
 import {TypographyDemo} from '../typography/typography-demo';
 import {DemoApp, Home} from './demo-app';
 import {DEMO_APP_ROUTES} from './routes';
+import {BadgeDemo} from '../badge/badge-demo';
 
 @NgModule({
   imports: [
@@ -59,6 +60,7 @@ import {DEMO_APP_ROUTES} from './routes';
   ],
   declarations: [
     AutocompleteDemo,
+    BadgeDemo,
     BaselineDemo,
     ButtonDemo,
     ButtonToggleDemo,

src/demo-app/demo-app/routes.ts

@@ -41,11 +41,13 @@ import {ToolbarDemo} from '../toolbar/toolbar-demo';
 import {TooltipDemo} from '../tooltip/tooltip-demo';
 import {TypographyDemo} from '../typography/typography-demo';
 import {DemoApp, Home} from './demo-app';
+import {BadgeDemo} from '../badge/badge-demo';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: DemoApp, children: [
     {path: '', component: Home},
     {path: 'autocomplete', component: AutocompleteDemo},
+    {path: 'badge', component: BadgeDemo},
     {path: 'baseline', component: BaselineDemo},
     {path: 'button', component: ButtonDemo},
     {path: 'button-toggle', component: ButtonToggleDemo},

src/demo-app/demo-material-module.ts

@@ -1,6 +1,7 @@
 import {NgModule} from '@angular/core';
 import {
   MatAutocompleteModule,
+  MatBadgeModule,
   MatButtonModule,
   MatButtonToggleModule,
   MatCardModule,
@@ -46,6 +47,7 @@ import {PortalModule} from '@angular/cdk/portal';
 @NgModule({
   exports: [
     MatAutocompleteModule,
+    MatBadgeModule,
     MatButtonModule,
     MatButtonToggleModule,
     MatCardModule,

src/demo-app/system-config.ts

@@ -76,6 +76,7 @@ System.config({
     '@angular/material/tabs': 'dist/packages/material/tabs/index.js',
     '@angular/material/toolbar': 'dist/packages/material/toolbar/index.js',
     '@angular/material/tooltip': 'dist/packages/material/tooltip/index.js',
+    '@angular/material/badge': 'dist/packages/material/badge/index.js',
   },
   packages: {
     // Thirdparty barrels.

src/lib/badge/_badge-theme.scss

@@ -0,0 +1,42 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
+
+$mat-badge-font-size: 12px;
+$mat-badge-font-weight: 600;
+
+@mixin _mat-badge-color($palette) {
+  background: mat-color($palette);
+  color: mat-color($palette, default-contrast);
+}
+
+@mixin mat-badge-theme($theme) {
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $primary: map-get($theme, primary);
+
+  .mat-badge {
+    .mat-badge-content {
+      @include _mat-badge-color($primary);
+    }
+
+    &.mat-accent {
+      .mat-badge-content {
+        @include _mat-toolbar-color($accent);
+      }
+    }
+
+    &.mat-warn {
+      .mat-badge-content {
+        @include _mat-toolbar-color($warn);
+      }
+    }
+  }
+}
+
+@mixin mat-badge-typography($config) {
+  .mat-badge-content {
+    font-weight: $mat-badge-font-weight;
+    font-size: $mat-badge-font-size;
+  }
+}

src/lib/badge/badge-module.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {MatCommonModule} from '@angular/material/core';
+import {MatBadge} from './badge';
+
+
+@NgModule({
+  imports: [MatCommonModule],
+  exports: [
+    MatBadge,
+    MatCommonModule,
+  ],
+  declarations: [MatBadge],
+})
+export class MatBadgeModule {}

src/lib/badge/badge.html

@@ -0,0 +1,5 @@
+<ng-content></ng-content>
+<span 
+  class="mat-badge-content" 
+  [innerHTML]="content">
+</span>

src/lib/badge/badge.md

@@ -0,0 +1,35 @@
+Badges are small status descriptors for UI elements. A badge consists of a small circle, 
+typically containing a number or other short set of characters, that appears in proximity to another object.
+
+### Customizing badge position
+By default, the badge will be placed `above after`. The direction can be changed by defining
+the attribute `direction` follow by `above|below` and `before|after`.
+
+```html
+<mat-badge direction="above after" content="22">
+  <mat-icon>home</mat-icon>
+</mat-badge>
+```
+
+The overlap of the badge in relation to its inner contents can also be defined
+using the `overlap` tag. Typically, you want the badge to overlap an icon and not
+a text phrase. By default it will overlap.
+
+```html
+<mat-badge overlap="false" content="22">
+  Email
+</mat-badge>
+```
+
+### Theming
+Badges can be colored in terms of the current theme using the `color` property to set the
+background color to `primary`, `accent`, or `warn`.
+
+```html
+<mat-badge color="accent" content="22">
+  <mat-icon>home</mat-icon>
+</mat-badge>
+```
+
+### Accessibility
+Badges should be given a meaningful label via `aria-label` or `aria-labelledby` attributes.

src/lib/badge/badge.scss

@@ -0,0 +1,64 @@
+$mat-badge-size: 22px !default;
+
+.mat-badge {
+  position: relative;
+  display: inline-block;
+
+  &.mat-badge-above {
+    .mat-badge-content {
+      top: -$mat-badge-size / 2;
+    }
+  }
+
+  &.mat-badge-below {
+    .mat-badge-content {
+      bottom: -$mat-badge-size / 2;
+    }
+  }
+
+  &.mat-badge-before {
+    margin-left: $mat-badge-size;
+    .mat-badge-content {
+      left: -$mat-badge-size;
+    }
+  }
+
+  &.mat-badge-after {
+    margin-right: $mat-badge-size;
+    .mat-badge-content {
+      right: -$mat-badge-size;
+    }
+  }
+
+  &.mat-badge-overlap {
+    &.mat-badge-before {
+      margin-left: $mat-badge-size / 2;
+      .mat-badge-content {
+        left: -$mat-badge-size / 2;
+      }
+    }
+
+    &.mat-badge-after {
+      margin-right: $mat-badge-size / 2;
+      .mat-badge-content {
+        right: -$mat-badge-size / 2;
+      }
+    }
+  }
+
+  .mat-badge-content {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    position: absolute;
+    width: $mat-badge-size;
+    height: $mat-badge-size;
+    border-radius: 50%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}