From ba8b49e159311c776bff3473546944046274160c Mon Sep 17 00:00:00 2001
From: emoralesb05 <eduardo.morales@teradata.com>
Date: Mon, 15 May 2017 15:18:38 -0700
Subject: [PATCH 1/8] feat(message): introducing `message` module

adding CovalentMessageComponent with `TdMessageComponent` for easy display of inline messages or info boxes
---
 .../components/components.component.ts        |   5 +
 .../components/components.module.ts           |   5 +-
 .../components/components.routes.ts           |   4 +
 .../components/message/message.component.html |  18 +++
 .../components/message/message.component.scss |   0
 .../components/message/message.component.ts   |  15 ++
 .../components/overview/overview.component.ts |   5 +
 src/platform/core/index.ts                    |   7 +
 src/platform/core/message/README.md           |  49 ++++++
 src/platform/core/message/_message-theme.scss |  22 +++
 .../core/message/message.component.html       |  12 ++
 .../core/message/message.component.scss       |   6 +
 .../core/message/message.component.ts         | 143 ++++++++++++++++++
 src/platform/core/message/message.module.ts   |  30 ++++
 src/platform/core/theming/_all-theme.scss     |   2 +
 15 files changed, 322 insertions(+), 1 deletion(-)
 create mode 100644 src/app/components/components/message/message.component.html
 create mode 100644 src/app/components/components/message/message.component.scss
 create mode 100644 src/app/components/components/message/message.component.ts
 create mode 100644 src/platform/core/message/README.md
 create mode 100644 src/platform/core/message/_message-theme.scss
 create mode 100644 src/platform/core/message/message.component.html
 create mode 100644 src/platform/core/message/message.component.scss
 create mode 100644 src/platform/core/message/message.component.ts
 create mode 100644 src/platform/core/message/message.module.ts

diff --git a/src/app/components/components/components.component.ts b/src/app/components/components/components.component.ts
index 763f4549e8..4bc5e25d19 100644
--- a/src/app/components/components/components.component.ts
+++ b/src/app/components/components/components.component.ts
@@ -75,6 +75,11 @@ export class ComponentsComponent implements AfterViewInit {
     icon: 'notifications',
     route: 'notifications',
     title: 'Notifications',
+  }, {
+    description: 'Set inline messages',
+    icon: 'message',
+    route: 'message',
+    title: 'Message',
   }, {
     description: 'Search and filter items',
     icon: 'search',
diff --git a/src/app/components/components/components.module.ts b/src/app/components/components/components.module.ts
index 9d69615569..b4fd411a94 100644
--- a/src/app/components/components/components.module.ts
+++ b/src/app/components/components/components.module.ts
@@ -14,6 +14,7 @@ import { FileUploadDemoComponent } from './file-upload/file-upload.component';
 import { LoadingDemoComponent } from './loading/loading.component';
 import { MarkdownDemoComponent } from './markdown/markdown.component';
 import { MediaDemoComponent } from './media/media.component';
+import { MessageDemoComponent } from './message/message.component';
 import { HttpDemoComponent } from './http/http.component';
 import { JsonFormatterDemoComponent } from './json-formatter/json-formatter.component';
 import { ChipsDemoComponent } from './chips/chips.component';
@@ -38,7 +39,7 @@ import { MdButtonModule, MdListModule, MdIconModule, MdCardModule, MdMenuModule,
 import { CovalentCommonModule, CovalentLayoutModule, CovalentMediaModule, CovalentExpansionPanelModule, CovalentFileModule,
          CovalentStepsModule, CovalentLoadingModule, CovalentDialogsModule, CovalentSearchModule, CovalentPagingModule,
          CovalentNotificationsModule, CovalentMenuModule, CovalentChipsModule, CovalentDataTableModule, CovalentJsonFormatterModule,
-         } from '../../../platform/core';
+         CovalentMessageModule } from '../../../platform/core';
 import { CovalentHighlightModule } from '../../../platform/highlight';
 import { CovalentMarkdownModule } from '../../../platform/markdown';
 import { CovalentDynamicFormsModule } from '../../../platform/dynamic-forms';
@@ -57,6 +58,7 @@ import { DocumentationToolsModule } from '../../documentation-tools';
     LoadingDemoComponent,
     MarkdownDemoComponent,
     MediaDemoComponent,
+    MessageDemoComponent,
     HttpDemoComponent,
     JsonFormatterDemoComponent,
     ChipsDemoComponent,
@@ -109,6 +111,7 @@ import { DocumentationToolsModule } from '../../documentation-tools';
     CovalentHighlightModule,
     CovalentMarkdownModule,
     CovalentDynamicFormsModule,
+    CovalentMessageModule,
     DocumentationToolsModule,
     NgxChartsModule,
     TranslateModule,
diff --git a/src/app/components/components/components.routes.ts b/src/app/components/components/components.routes.ts
index 503ca7cb01..32a376d135 100644
--- a/src/app/components/components/components.routes.ts
+++ b/src/app/components/components/components.routes.ts
@@ -10,6 +10,7 @@ import { FileUploadDemoComponent } from './file-upload/file-upload.component';
 import { LoadingDemoComponent } from './loading/loading.component';
 import { MarkdownDemoComponent } from './markdown/markdown.component';
 import { MediaDemoComponent } from './media/media.component';
+import { MessageDemoComponent } from './message/message.component';
 import { HttpDemoComponent } from './http/http.component';
 import { JsonFormatterDemoComponent } from './json-formatter/json-formatter.component';
 import { ChipsDemoComponent } from './chips/chips.component';
@@ -52,6 +53,9 @@ const routes: Routes = [{
     }, {
       component: MediaDemoComponent,
       path: 'media',
+    }, {
+      component: MessageDemoComponent,
+      path: 'message',
     }, {
       component: HttpDemoComponent,
       path: 'http',
diff --git a/src/app/components/components/message/message.component.html b/src/app/components/components/message/message.component.html
new file mode 100644
index 0000000000..5979dbcfe5
--- /dev/null
+++ b/src/app/components/components/message/message.component.html
@@ -0,0 +1,18 @@
+<md-card>
+  <md-card-title>Message</md-card-title>
+  <md-card-subtitle>Set inline messages</md-card-subtitle>
+  <md-divider></md-divider>
+  <md-card-content>
+    <td-message label="test" sublabel="test 2" color="warn" icon="warning"></td-message>
+    <td-message label="test" color="purple" icon="error"></td-message>
+    <td-message label="test" color="yellow">
+      <button td-message-actions md-button>VIEW MORE</button>
+    </td-message>
+    <td-message #messageDemo label="test" color="blue" [opened]="true">
+      <button td-message-actions md-button (click)="messageDemo.close()">CLOSE</button>
+    </td-message>
+    <button td-message-actions md-button (click)="messageDemo.open()">OPEN</button>
+  </md-card-content>
+</md-card>
+
+<td-readme-loader resourceUrl="platform/core/message/README.md"></td-readme-loader>
\ No newline at end of file
diff --git a/src/app/components/components/message/message.component.scss b/src/app/components/components/message/message.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/components/components/message/message.component.ts b/src/app/components/components/message/message.component.ts
new file mode 100644
index 0000000000..060166e85b
--- /dev/null
+++ b/src/app/components/components/message/message.component.ts
@@ -0,0 +1,15 @@
+import { Component, HostBinding } from '@angular/core';
+import { slideInDownAnimation } from '../../../app.animations';
+
+@Component({
+  selector: 'message-demo',
+  styleUrls: ['./message.component.scss' ],
+  templateUrl: './message.component.html',
+  animations: [slideInDownAnimation],
+})
+export class MessageDemoComponent {
+
+  @HostBinding('@routeAnimation') routeAnimation: boolean = true;
+  @HostBinding('class.td-route-animation') classAnimation: boolean = true;
+
+}
diff --git a/src/app/components/components/overview/overview.component.ts b/src/app/components/components/overview/overview.component.ts
index 2a63d3b46c..73dfb8c0ff 100644
--- a/src/app/components/components/overview/overview.component.ts
+++ b/src/app/components/components/overview/overview.component.ts
@@ -68,6 +68,11 @@ export class ComponentsOverviewComponent {
       icon: 'notifications',
       route: 'notifications',
       title: 'Notifications',
+    }, {
+      color: 'blue-700',
+      icon: 'message',
+      route: 'message',
+      title: 'Message',
     }, {
       color: 'lime-700',
       icon: 'search',
diff --git a/src/platform/core/index.ts b/src/platform/core/index.ts
index a25f3f2d6f..7bfd70be37 100644
--- a/src/platform/core/index.ts
+++ b/src/platform/core/index.ts
@@ -81,6 +81,13 @@ export * from './media/media.module';
 import { CovalentMenuModule } from './menu/menu.module';
 export * from './menu/menu.module';
 
+/**
+ * MESSAGE
+ */
+
+import { CovalentMessageModule } from './message/message.module';
+export * from './message/message.module';
+
 /**
  * NOTIFICATIONS
  */
diff --git a/src/platform/core/message/README.md b/src/platform/core/message/README.md
new file mode 100644
index 0000000000..3dd2f45890
--- /dev/null
+++ b/src/platform/core/message/README.md
@@ -0,0 +1,49 @@
+# td-message
+
+`td-message` element generates an inline message with an icon, color, label and sublabel.
+
+`color` can be either with any theme color (`primary`, `accent` or `warn`)
+But you can also set a `color` from our lib can be applied in the component to get any material color not in the theme. (`blue`, `red`, etc)
+
+## API Summary
+
+Properties:
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `label?` | `string` | Sets the label of the message.
+| `sublabel?` | `string` | Sets the sublabel of the message.
+| `icon?` | `string` | The icon to be displayed before the title. Defaults to `info_outline` icon
+| `color?` | `'primary', 'accent' or 'warn'` | Sets the color of the message. Can also use any material color: `purple`, `light-blue`, etc.
+| `opened?` | `boolean` | Shows or hiddes the message depending on its value. Defaults to 'true'.
+| `open` | `function()` | Renders the message on screen.
+| `close` | `function()` | Removes the message content from screen.
+| `toggle` | `function()` | Toggles between open and close depending on state.
+
+## Setup
+
+Import the [CovalentMessageModule] in your NgModule:
+
+```typescript
+import { CovalentMessageModule } from '@covalent/core';
+@NgModule({
+  imports: [
+    CovalentMessageModule,
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
+
+## Usage
+
+Example for HTML usage:
+
+```html
+<td-message #message label="Label" sublabel="Sublabel goes here" icon="warning" color="primary | blue | red" [opened]="true">
+  <button td-message-actions md-button>View More<button>
+  <button td-message-actions md-button (click)="message.close()">Close<button>
+  // .. body goes here
+</td-message>  
+```
diff --git a/src/platform/core/message/_message-theme.scss b/src/platform/core/message/_message-theme.scss
new file mode 100644
index 0000000000..73a180fe2a
--- /dev/null
+++ b/src/platform/core/message/_message-theme.scss
@@ -0,0 +1,22 @@
+@import '../common/styles/theme-functions';
+
+@mixin td-message-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+
+  .td-message {
+    &.mat-primary {
+      color: mat-color($primary);
+      background-color: mat-color($primary, 0.15);
+    }
+    &.mat-accent {
+      color: mat-color($accent);
+      background-color: mat-color($accent, 0.15);
+    }
+    &.mat-warn {
+      color: mat-color($warn);
+      background-color: mat-color($warn, 0.15);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/platform/core/message/message.component.html b/src/platform/core/message/message.component.html
new file mode 100644
index 0000000000..f88ef2a018
--- /dev/null
+++ b/src/platform/core/message/message.component.html
@@ -0,0 +1,12 @@
+<div tdMessageContainer></div>
+<ng-template>
+  <div class="pad-left pad-right td-message-wrapper" layout="row" layout-align="center center">
+    <md-icon class="push-right">{{icon}}</md-icon>
+    <div>
+      <div *ngIf="label" class="td-message-label md-body-2">{{label}}</div>
+      <div *ngIf="sublabel" class="td-message-sublabel md-body-1">{{sublabel}}</div>
+    </div>
+    <span flex></span>
+    <ng-content select="[td-message-actions]"></ng-content>
+  </div>
+</ng-template>
\ No newline at end of file
diff --git a/src/platform/core/message/message.component.scss b/src/platform/core/message/message.component.scss
new file mode 100644
index 0000000000..d6f553d15a
--- /dev/null
+++ b/src/platform/core/message/message.component.scss
@@ -0,0 +1,6 @@
+:host {
+  display: block;
+  .td-message-wrapper {
+    min-height: 52px;
+  }
+}
\ No newline at end of file
diff --git a/src/platform/core/message/message.component.ts b/src/platform/core/message/message.component.ts
new file mode 100644
index 0000000000..a70e2b2409
--- /dev/null
+++ b/src/platform/core/message/message.component.ts
@@ -0,0 +1,143 @@
+import { Component, Directive, Input, Renderer2, ElementRef, AfterViewInit, ViewContainerRef, TemplateRef, ViewChild,
+         HostBinding } from '@angular/core';
+
+@Directive({
+  selector: '[tdMessageContainer]',
+})
+export class TdMessageContainerDirective {
+  constructor(public viewContainer: ViewContainerRef) { }
+}
+
+@Component({
+  selector: 'td-message',
+  templateUrl: './message.component.html',
+  styleUrls: ['./message.component.scss'],
+})
+export class TdMessageComponent implements AfterViewInit {
+
+  private _color: string;
+  private _opened: boolean = true;
+  private _initialized: boolean = false;
+
+  @ViewChild(TdMessageContainerDirective) _childElement: TdMessageContainerDirective;
+  @ViewChild(TemplateRef) _template: TemplateRef<any>;
+
+  @HostBinding('style.height.px')
+  get hidden(): string {
+    return !this._opened ? '0' : undefined;
+  }
+
+  /**
+   * label: string
+   *
+   * Sets the label of the message.
+   */
+  @Input('label') label: string;
+
+  /**
+   * sublabel?: string
+   *
+   * Sets the sublabel of the message.
+   */
+  @Input('sublabel') sublabel: string;
+
+  /**
+   * icon?: string
+   *
+   * The icon to be displayed before the title.
+   * Defaults to `info_outline` icon
+   */
+  @Input('icon') icon: string = 'info_outline';
+
+  /**
+   * color?: primary | accent | warn
+   *
+   * Sets the color of the message.
+   * Can also use any material color: purple | light-blue, etc.
+   */
+  @Input('color')
+  set color(color: string) {
+    this._renderer.removeClass(this._elementRef.nativeElement, 'mat-' + color);
+    this._renderer.removeClass(this._elementRef.nativeElement, 'bgc-' + color + '-100');
+    this._renderer.removeClass(this._elementRef.nativeElement, 'tc-' + color + '-700');
+    if (color === 'primary' || color === 'accent' || color === 'warn') {
+      this._renderer.addClass(this._elementRef.nativeElement, 'mat-' + color);
+    } else {
+      this._renderer.addClass(this._elementRef.nativeElement, 'bgc-' + color + '-100');
+      this._renderer.addClass(this._elementRef.nativeElement, 'tc-' + color + '-700');
+    }
+    this._color = color;
+  }
+  get color(): string {
+    return this._color;
+  }
+
+
+  /**
+   * opened?: boolean
+   *
+   * Shows or hiddes the message depending on its value.
+   * Defaults to 'true'.
+   */
+  @Input('opened')
+  set opened(opened: boolean) {
+    if (this._initialized) {
+      if (opened) {
+        this.open();
+      } else {
+        this.close();
+      }
+    } else {
+      this._opened = opened;
+    }
+  }
+  get opened(): boolean {
+    return this._opened;
+  }
+
+  constructor(private _renderer: Renderer2,
+              private _elementRef: ElementRef) {
+    this._renderer.addClass(this._elementRef.nativeElement, 'td-message');
+  }
+
+  /**
+   * Initializes the component and attaches the content if [opened] was true.
+   */
+  ngAfterViewInit(): void {
+    if (this._opened) {
+      this._childElement.viewContainer.createEmbeddedView(this._template);
+    }
+    this._initialized = true;
+  }
+
+  /**
+   * Renders the message on screen.
+   */
+  open(): void {
+    if (!this._opened) {
+      this._opened = true;
+      this._childElement.viewContainer.createEmbeddedView(this._template);
+    }
+  }
+
+  /**
+   * Removes the message content from screen.
+   */
+  close(): void {
+    if (this._opened) {
+      this._opened = false;
+      this._childElement.viewContainer.clear();
+    }
+  }
+
+  /**
+   * Toggles between open and close depending on state.
+   */
+  toggle(): void {
+    if (this._opened) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+}
diff --git a/src/platform/core/message/message.module.ts b/src/platform/core/message/message.module.ts
new file mode 100644
index 0000000000..62a88d182a
--- /dev/null
+++ b/src/platform/core/message/message.module.ts
@@ -0,0 +1,30 @@
+import { Type } from '@angular/core';
+import { NgModule } from '@angular/core';
+
+import { CommonModule } from '@angular/common';
+import { MdIconModule } from '@angular/material';
+
+import { TdMessageComponent, TdMessageContainerDirective } from './message.component';
+
+const TD_MESSAGE: Type<any>[] = [
+  TdMessageComponent,
+  TdMessageContainerDirective,
+];
+
+export { TdMessageComponent } from './message.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MdIconModule,
+  ],
+  declarations: [
+    TD_MESSAGE,
+  ],
+  exports: [
+    TD_MESSAGE,
+  ],
+})
+export class CovalentMessageModule {
+
+}
diff --git a/src/platform/core/theming/_all-theme.scss b/src/platform/core/theming/_all-theme.scss
index 4c80887639..d260360239 100644
--- a/src/platform/core/theming/_all-theme.scss
+++ b/src/platform/core/theming/_all-theme.scss
@@ -9,6 +9,7 @@
 @import '../json-formatter/json-formatter-theme';
 @import '../paging/paging-bar-theme';
 @import '../notifications/notification-count-theme';
+@import '../message/message-theme';
 
 // Create a theme.
 @mixin covalent-theme($theme) {
@@ -23,4 +24,5 @@
   @include td-loading-theme($theme);
   @include td-data-table-theme($theme);
   @include td-notification-count-theme($theme);
+  @include td-message-theme($theme);
 }
\ No newline at end of file

From 8b333605c97053cb0a16841e9cbe7f498592d66e Mon Sep 17 00:00:00 2001
From: emoralesb05 <eduardo.morales@teradata.com>
Date: Mon, 15 May 2017 16:38:33 -0700
Subject: [PATCH 2/8] chore(message): add initial unit tests

---
 .../core/message/message.component.spec.ts    | 154 ++++++++++++++++++
 .../core/message/message.component.ts         |  20 ++-
 2 files changed, 167 insertions(+), 7 deletions(-)
 create mode 100644 src/platform/core/message/message.component.spec.ts

diff --git a/src/platform/core/message/message.component.spec.ts b/src/platform/core/message/message.component.spec.ts
new file mode 100644
index 0000000000..2d7eb73424
--- /dev/null
+++ b/src/platform/core/message/message.component.spec.ts
@@ -0,0 +1,154 @@
+import {
+  TestBed,
+  inject,
+  async,
+  ComponentFixture,
+} from '@angular/core/testing';
+import 'hammerjs';
+import { Component } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { TdMessageComponent } from './message.component';
+import { CovalentMessageModule } from './message.module';
+import { NgModule, DebugElement } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('Component: Message', () => {
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        BrowserAnimationsModule,
+        CovalentMessageModule,
+      ],
+      declarations: [
+        TdMessageBasicTestComponent,
+        TdMessageContentTestComponent,
+      ],
+    });
+    TestBed.compileComponents();
+  })); 
+
+  it('should set label, sublabel and color `primary`, `red` and then change to color `accent`', (done: DoneFn) => {
+    let fixture: ComponentFixture<any> = TestBed.createComponent(TdMessageBasicTestComponent);
+    let component: TdMessageBasicTestComponent = fixture.debugElement.componentInstance;
+    
+    component.label = 'Label';
+    component.sublabel = 'Sublabel';
+    component.color = 'primary';
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      fixture.detectChanges();
+      expect(fixture.debugElement.query(By.directive(TdMessageComponent)).nativeElement.textContent).toContain('Label');
+      expect(fixture.debugElement.query(By.directive(TdMessageComponent)).nativeElement.textContent).toContain('Sublabel');
+      expect((<HTMLElement>fixture.debugElement.query(By.directive(TdMessageComponent)).nativeElement).classList.contains('mat-primary'))
+      .toBeTruthy();
+
+      component.color = 'red';
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        expect((<HTMLElement>fixture.debugElement.query(By.directive(TdMessageComponent)).nativeElement).classList.contains('mat-primary'))
+        .toBeFalsy();
+        expect((<HTMLElement>fixture.debugElement.query(By.directive(TdMessageComponent)).nativeElement).classList.contains('bgc-red-100'))
+        .toBeTruthy();
+        expect((<HTMLElement>fixture.debugElement.query(By.directive(TdMessageComponent)).nativeElement).classList.contains('tc-red-700'))
+        .toBeTruthy();
+
+        component.color = 'accent';
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          fixture.detectChanges();
+          expect((<HTMLElement>fixture.debugElement.query(By.directive(TdMessageComponent)).nativeElement).classList.contains('mat-accent'))
+          .toBeTruthy();
+          expect((<HTMLElement>fixture.debugElement.query(By.directive(TdMessageComponent)).nativeElement).classList.contains('bgc-red-100'))
+          .toBeFalsy();
+          expect((<HTMLElement>fixture.debugElement.query(By.directive(TdMessageComponent)).nativeElement).classList.contains('tc-red-700'))
+          .toBeFalsy();
+          done();
+        });
+      });
+    });
+  });
+
+  it('should render the component with label and no sublabel', (done: DoneFn) => {
+    let fixture: ComponentFixture<any> = TestBed.createComponent(TdMessageBasicTestComponent);
+    let component: TdMessageBasicTestComponent = fixture.debugElement.componentInstance;
+
+    component.label = 'Label';
+    component.color = 'primary';
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      fixture.detectChanges();
+
+      expect(fixture.debugElement.query(By.css('.td-message-label'))).toBeTruthy();
+      expect(fixture.debugElement.query(By.css('.td-message-sublabel'))).toBeFalsy();
+      done();
+    });
+  });
+
+  it('should render the component with a button content as actions', (done: DoneFn) => {
+    let fixture: ComponentFixture<any> = TestBed.createComponent(TdMessageContentTestComponent);
+    let component: TdMessageContentTestComponent = fixture.debugElement.componentInstance;
+
+    component.color = 'primary';
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      fixture.detectChanges();
+
+      expect(fixture.debugElement.query(By.css('.td-message-wrapper')).query(By.css('button'))).toBeTruthy();
+      done();
+    });
+  });
+
+  it('should render the component, close it and then open it', (done: DoneFn) => {
+    let fixture: ComponentFixture<any> = TestBed.createComponent(TdMessageContentTestComponent);
+    let component: TdMessageContentTestComponent = fixture.debugElement.componentInstance;
+    let message: TdMessageComponent = fixture.debugElement.query(By.directive(TdMessageComponent)).componentInstance;
+
+    component.label = 'Label';
+    component.color = 'primary';
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      fixture.detectChanges();
+      expect(fixture.debugElement.query(By.css('.td-message-wrapper'))).toBeTruthy();
+
+      message.close();
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        expect(fixture.debugElement.query(By.css('.td-message-wrapper'))).toBeFalsy();
+
+        message.open();
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          fixture.detectChanges();
+          expect(fixture.debugElement.query(By.css('.td-message-wrapper'))).toBeTruthy();
+          done();
+        });
+      });
+    });
+  });
+});
+
+@Component({
+  template: `
+    <td-message [label]="label" [sublabel]="sublabel" [color]="color">
+    </td-message>`,
+})
+class TdMessageBasicTestComponent {
+  label: string;
+  sublabel: string;
+  color: string;
+}
+
+@Component({
+  template: `
+    <td-message [label]="label" [sublabel]="sublabel" [color]="color">
+      <button td-message-actions>BUTTON</button>
+    </td-message>`,
+})
+class TdMessageContentTestComponent {
+  label: string = 'Label';
+  sublabel: string = 'Sublabel';
+  color: string = 'primary';
+}
diff --git a/src/platform/core/message/message.component.ts b/src/platform/core/message/message.component.ts
index a70e2b2409..4c7c5e571b 100644
--- a/src/platform/core/message/message.component.ts
+++ b/src/platform/core/message/message.component.ts
@@ -1,5 +1,5 @@
 import { Component, Directive, Input, Renderer2, ElementRef, AfterViewInit, ViewContainerRef, TemplateRef, ViewChild,
-         HostBinding } from '@angular/core';
+         HostBinding, ChangeDetectorRef } from '@angular/core';
 
 @Directive({
   selector: '[tdMessageContainer]',
@@ -57,9 +57,9 @@ export class TdMessageComponent implements AfterViewInit {
    */
   @Input('color')
   set color(color: string) {
-    this._renderer.removeClass(this._elementRef.nativeElement, 'mat-' + color);
-    this._renderer.removeClass(this._elementRef.nativeElement, 'bgc-' + color + '-100');
-    this._renderer.removeClass(this._elementRef.nativeElement, 'tc-' + color + '-700');
+    this._renderer.removeClass(this._elementRef.nativeElement, 'mat-' + this._color);
+    this._renderer.removeClass(this._elementRef.nativeElement, 'bgc-' + this._color + '-100');
+    this._renderer.removeClass(this._elementRef.nativeElement, 'tc-' + this._color + '-700');
     if (color === 'primary' || color === 'accent' || color === 'warn') {
       this._renderer.addClass(this._elementRef.nativeElement, 'mat-' + color);
     } else {
@@ -67,12 +67,12 @@ export class TdMessageComponent implements AfterViewInit {
       this._renderer.addClass(this._elementRef.nativeElement, 'tc-' + color + '-700');
     }
     this._color = color;
+    this._changeDetectorRef.markForCheck();
   }
   get color(): string {
     return this._color;
   }
 
-
   /**
    * opened?: boolean
    *
@@ -96,6 +96,7 @@ export class TdMessageComponent implements AfterViewInit {
   }
 
   constructor(private _renderer: Renderer2,
+              private _changeDetectorRef: ChangeDetectorRef,
               private _elementRef: ElementRef) {
     this._renderer.addClass(this._elementRef.nativeElement, 'td-message');
   }
@@ -105,9 +106,12 @@ export class TdMessageComponent implements AfterViewInit {
    */
   ngAfterViewInit(): void {
     if (this._opened) {
-      this._childElement.viewContainer.createEmbeddedView(this._template);
+      Promise.resolve(undefined).then(() => {
+        this._childElement.viewContainer.createEmbeddedView(this._template);
+        this._initialized = true;
+        this._changeDetectorRef.markForCheck();
+      });
     }
-    this._initialized = true;
   }
 
   /**
@@ -117,6 +121,7 @@ export class TdMessageComponent implements AfterViewInit {
     if (!this._opened) {
       this._opened = true;
       this._childElement.viewContainer.createEmbeddedView(this._template);
+      this._changeDetectorRef.markForCheck();
     }
   }
 
@@ -127,6 +132,7 @@ export class TdMessageComponent implements AfterViewInit {
     if (this._opened) {
       this._opened = false;
       this._childElement.viewContainer.clear();
+      this._changeDetectorRef.markForCheck();
     }
   }
 

From 4786b31c34efecad6c86effad844144407be9897 Mon Sep 17 00:00:00 2001
From: KL186023 <Kyle.Ledbetter@teradata.com>
Date: Mon, 15 May 2017 17:09:54 -0700
Subject: [PATCH 3/8] update(message): change to display none for toggle

---
 src/platform/core/message/message.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/platform/core/message/message.component.ts b/src/platform/core/message/message.component.ts
index 4c7c5e571b..ec6fc9ce1c 100644
--- a/src/platform/core/message/message.component.ts
+++ b/src/platform/core/message/message.component.ts
@@ -22,9 +22,9 @@ export class TdMessageComponent implements AfterViewInit {
   @ViewChild(TdMessageContainerDirective) _childElement: TdMessageContainerDirective;
   @ViewChild(TemplateRef) _template: TemplateRef<any>;
 
-  @HostBinding('style.height.px')
+  @HostBinding('style.display')
   get hidden(): string {
-    return !this._opened ? '0' : undefined;
+    return !this._opened ? 'none' : undefined;
   }
 
   /**

From 17fc801284ac282a9325ec6d5742427f4f96b0a1 Mon Sep 17 00:00:00 2001
From: KL186023 <Kyle.Ledbetter@teradata.com>
Date: Mon, 15 May 2017 17:11:31 -0700
Subject: [PATCH 4/8] update(docs): overview & nav for messages

---
 src/app/components/components/components.component.ts       | 6 +++---
 .../components/components/overview/overview.component.ts    | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/components/components/components.component.ts b/src/app/components/components/components.component.ts
index 4bc5e25d19..0a90cc0f94 100644
--- a/src/app/components/components/components.component.ts
+++ b/src/app/components/components/components.component.ts
@@ -76,10 +76,10 @@ export class ComponentsComponent implements AfterViewInit {
     route: 'notifications',
     title: 'Notifications',
   }, {
-    description: 'Set inline messages',
-    icon: 'message',
+    description: 'Info, warning & alert messages',
+    icon: 'info_outline',
     route: 'message',
-    title: 'Message',
+    title: 'Messages & Alerts',
   }, {
     description: 'Search and filter items',
     icon: 'search',
diff --git a/src/app/components/components/overview/overview.component.ts b/src/app/components/components/overview/overview.component.ts
index 73dfb8c0ff..03548e424d 100644
--- a/src/app/components/components/overview/overview.component.ts
+++ b/src/app/components/components/overview/overview.component.ts
@@ -69,10 +69,10 @@ export class ComponentsOverviewComponent {
       route: 'notifications',
       title: 'Notifications',
     }, {
-      color: 'blue-700',
-      icon: 'message',
+      color: 'light-blue-A400',
+      icon: 'info_outline',
       route: 'message',
-      title: 'Message',
+      title: 'Messages',
     }, {
       color: 'lime-700',
       icon: 'search',

From 3cd677ac192461ed56b5830104814c8febabfa40 Mon Sep 17 00:00:00 2001
From: KL186023 <Kyle.Ledbetter@teradata.com>
Date: Mon, 15 May 2017 17:11:44 -0700
Subject: [PATCH 5/8] update(demo): message component demo

---
 .../components/message/message.component.html | 128 ++++++++++++++++--
 1 file changed, 114 insertions(+), 14 deletions(-)

diff --git a/src/app/components/components/message/message.component.html b/src/app/components/components/message/message.component.html
index 5979dbcfe5..6874a4bb6e 100644
--- a/src/app/components/components/message/message.component.html
+++ b/src/app/components/components/message/message.component.html
@@ -1,18 +1,118 @@
 <md-card>
-  <md-card-title>Message</md-card-title>
-  <md-card-subtitle>Set inline messages</md-card-subtitle>
+  <md-card-title>Messages &amp; Alerts</md-card-title>
+  <md-card-subtitle>Info, warning &amp; alert messages</md-card-subtitle>
   <md-divider></md-divider>
-  <md-card-content>
-    <td-message label="test" sublabel="test 2" color="warn" icon="warning"></td-message>
-    <td-message label="test" color="purple" icon="error"></td-message>
-    <td-message label="test" color="yellow">
-      <button td-message-actions md-button>VIEW MORE</button>
-    </td-message>
-    <td-message #messageDemo label="test" color="blue" [opened]="true">
-      <button td-message-actions md-button (click)="messageDemo.close()">CLOSE</button>
-    </td-message>
-    <button td-message-actions md-button (click)="messageDemo.open()">OPEN</button>
-  </md-card-content>
+  <md-tab-group md-stretch-tabs dynamicHeight>
+    <md-tab>
+      <ng-template md-tab-label>Demo</ng-template>
+      <md-card-content>
+        <p class="md-body-1">Standalone message:</p>
+        <td-message label="Error!" sublabel="You did something wrong!" color="warn" icon="error"></td-message>
+        <p class="md-body-1">Message in a card with action</p>
+        <md-card>
+          <td-message label="Warning!" sublabel="Your probably shouldn't do that!" color="primary" icon="warning">
+            <button td-message-actions md-button>VIEW MORE</button>
+          </td-message>
+        </md-card>
+        <p class="md-body-1">Message in a card content:</p>
+        <md-card>
+          <md-card-title>Card title</md-card-title>
+          <md-divider></md-divider>
+          <td-message label="Info" sublabel="Maybe you want to know this" color="accent" icon="info"></td-message>
+          <md-card-content>
+            content
+          </md-card-content>
+        </md-card>
+        <p class="md-body-1">Toggle visibility:</p>
+        <td-message #messageDemo color="primary" class="pad-sm" label="Hide me!" sublabel="You can toggle my visibility & add a class!">
+          <button td-message-actions md-icon-button (click)="messageDemo.close()"><md-icon>cancel</md-icon></button>
+        </td-message>
+      </md-card-content>
+    </md-tab>
+    <md-tab>
+      <ng-template md-tab-label>Code</ng-template>
+      <md-card-content>
+        <p>HTML:</p>
+        <td-highlight lang="html">
+          <![CDATA[
+            <p class="md-body-1">Standalone message:</p>
+            <td-message label="Error!" sublabel="You did something wrong!" color="warn" icon="error"></td-message>
+            <p class="md-body-1">Message in a card with action</p>
+            <md-card>
+              <td-message label="Warning!" sublabel="Your probably shouldn't do that!" color="primary" icon="warning">
+                <button td-message-actions md-button>VIEW MORE</button>
+              </td-message>
+            </md-card>
+            <p class="md-body-1">Message in a card content:</p>
+            <md-card>
+              <md-card-title>Card title</md-card-title>
+              <md-divider></md-divider>
+              <td-message label="Info" sublabel="Maybe you want to know this" color="accent" icon="info"></td-message>
+              <md-card-content>
+                content
+              </md-card-content>
+            </md-card>
+            <p class="md-body-1">Toggle visibility:</p>
+            <td-message #messageDemo color="primary" class="pad-sm" label="Hide me!" sublabel="You can toggle my visibility & add a class!">
+              <button td-message-actions md-icon-button (click)="messageDemo.close()"><md-icon>cancel</md-icon></button>
+            </td-message>
+            <button md-button color="accent" (click)="messageDemo.toggle()">
+              Toggle Visibility
+            </button>
+          ]]>
+        </td-highlight>
+      </md-card-content>
+    </md-tab>
+  </md-tab-group>
+  <md-divider></md-divider>
+  <md-card-actions>
+    <button md-button color="accent" class="text-upper" (click)="messageDemo.toggle()">
+      Toggle Visibility
+    </button>
+  </md-card-actions>
+</md-card>
+<md-card>
+  <md-card-title>Material Colored Messages</md-card-title>
+  <md-card-subtitle>Use the full Material Design color palette</md-card-subtitle>
+  <md-divider></md-divider>
+  <md-tab-group md-stretch-tabs dynamicHeight>
+    <md-tab>
+      <ng-template md-tab-label>Demo</ng-template>
+      <md-card-content>
+        <p class="md-body-1">Using <code>color</code>:</p>
+        <td-message label="Purple!" sublabel="Simply add color=blah" color="purple" icon="error">
+          <button td-message-actions md-button>VIEW MORE</button>
+        </td-message>
+        <p class="md-body-1">Using <code>class</code>:</p>
+        <td-message label="Cyan!" sublabel="Reference the Covalent style guide" class="bgc-cyan-800 tc-cyan-100" icon="error">
+          <button td-message-actions md-button>VIEW MORE</button>
+        </td-message>
+      </md-card-content>
+    </md-tab>
+    <md-tab>
+      <ng-template md-tab-label>Code</ng-template>
+      <md-card-content>
+        <p>HTML:</p>
+        <td-highlight lang="html">
+          <![CDATA[
+            <p class="md-body-1">Using <code>color</code>:</p>
+            <td-message label="Purple!" sublabel="Simply add color=blah" color="purple" icon="error">
+              <button td-message-actions md-button>VIEW MORE</button>
+            </td-message>
+            <p class="md-body-1">Using <code>class</code>:</p>
+            <td-message label="Cyan!" sublabel="Reference the Covalent style guide" class="bgc-cyan-800 tc-cyan-100" icon="error">
+              <button td-message-actions md-button>VIEW MORE</button>
+            </td-message>
+          ]]>
+        </td-highlight>
+      </md-card-content>
+    </md-tab>
+  </md-tab-group>
+  <md-divider></md-divider>
+  <md-card-actions>
+    <a md-button color="accent" class="text-upper" [routerLink]="['/style-guide/colors']">
+      Color Guide
+    </a>
+  </md-card-actions>
 </md-card>
-
 <td-readme-loader resourceUrl="platform/core/message/README.md"></td-readme-loader>
\ No newline at end of file

From 16f1c60104b6e687053a28342b092db30149b085 Mon Sep 17 00:00:00 2001
From: emoralesb05 <emoralesb05@gmail.com>
Date: Mon, 15 May 2017 19:36:31 -0700
Subject: [PATCH 6/8] fix(message): initialize flag not set in some cases

when [opened] was initialized as false, the initialized flag was never set to true

added unit test to verify it works
---
 .../core/message/message.component.spec.ts    | 79 ++++++++++++++++++-
 .../core/message/message.component.ts         | 10 +--
 2 files changed, 80 insertions(+), 9 deletions(-)

diff --git a/src/platform/core/message/message.component.spec.ts b/src/platform/core/message/message.component.spec.ts
index 2d7eb73424..c50f0435a9 100644
--- a/src/platform/core/message/message.component.spec.ts
+++ b/src/platform/core/message/message.component.spec.ts
@@ -23,6 +23,7 @@ describe('Component: Message', () => {
       declarations: [
         TdMessageBasicTestComponent,
         TdMessageContentTestComponent,
+        TdMessageOpenedTestComponent,
       ],
     });
     TestBed.compileComponents();
@@ -42,7 +43,7 @@ describe('Component: Message', () => {
       expect(fixture.debugElement.query(By.directive(TdMessageComponent)).nativeElement.textContent).toContain('Sublabel');
       expect((<HTMLElement>fixture.debugElement.query(By.directive(TdMessageComponent)).nativeElement).classList.contains('mat-primary'))
       .toBeTruthy();
-
+      expect(fixture.debugElement.query(By.directive(TdMessageComponent)).componentInstance.color).toBe('primary');
       component.color = 'red';
       fixture.detectChanges();
       fixture.whenStable().then(() => {
@@ -53,7 +54,7 @@ describe('Component: Message', () => {
         .toBeTruthy();
         expect((<HTMLElement>fixture.debugElement.query(By.directive(TdMessageComponent)).nativeElement).classList.contains('tc-red-700'))
         .toBeTruthy();
-
+        expect(fixture.debugElement.query(By.directive(TdMessageComponent)).componentInstance.color).toBe('red');
         component.color = 'accent';
         fixture.detectChanges();
         fixture.whenStable().then(() => {
@@ -64,6 +65,7 @@ describe('Component: Message', () => {
           .toBeFalsy();
           expect((<HTMLElement>fixture.debugElement.query(By.directive(TdMessageComponent)).nativeElement).classList.contains('tc-red-700'))
           .toBeFalsy();
+          expect(fixture.debugElement.query(By.directive(TdMessageComponent)).componentInstance.color).toBe('accent');
           done();
         });
       });
@@ -101,8 +103,8 @@ describe('Component: Message', () => {
   });
 
   it('should render the component, close it and then open it', (done: DoneFn) => {
-    let fixture: ComponentFixture<any> = TestBed.createComponent(TdMessageContentTestComponent);
-    let component: TdMessageContentTestComponent = fixture.debugElement.componentInstance;
+    let fixture: ComponentFixture<any> = TestBed.createComponent(TdMessageBasicTestComponent);
+    let component: TdMessageBasicTestComponent = fixture.debugElement.componentInstance;
     let message: TdMessageComponent = fixture.debugElement.query(By.directive(TdMessageComponent)).componentInstance;
 
     component.label = 'Label';
@@ -128,6 +130,64 @@ describe('Component: Message', () => {
       });
     });
   });
+
+  it('should render the component, toggle it and then toggle it again', (done: DoneFn) => {
+    let fixture: ComponentFixture<any> = TestBed.createComponent(TdMessageBasicTestComponent);
+    let component: TdMessageBasicTestComponent = fixture.debugElement.componentInstance;
+    let message: TdMessageComponent = fixture.debugElement.query(By.directive(TdMessageComponent)).componentInstance;
+
+    component.label = 'Label';
+    component.color = 'primary';
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      fixture.detectChanges();
+      expect(fixture.debugElement.query(By.css('.td-message-wrapper'))).toBeTruthy();
+
+      message.toggle();
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        expect(fixture.debugElement.query(By.css('.td-message-wrapper'))).toBeFalsy();
+
+        message.toggle();
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          fixture.detectChanges();
+          expect(fixture.debugElement.query(By.css('.td-message-wrapper'))).toBeTruthy();
+          done();
+        });
+      });
+    });
+  });
+
+
+  it('should not render the component, set [opened] to true and then [opened] to false', (done: DoneFn) => {
+    let fixture: ComponentFixture<any> = TestBed.createComponent(TdMessageOpenedTestComponent);
+    let component: TdMessageOpenedTestComponent = fixture.debugElement.componentInstance;
+
+    component.label = 'Label';
+    component.color = 'primary';
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      fixture.detectChanges();
+      expect(fixture.debugElement.query(By.css('.td-message-wrapper'))).toBeFalsy();
+
+      component.opened = true;
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        expect(fixture.debugElement.query(By.css('.td-message-wrapper'))).toBeTruthy();
+
+        component.opened = false;
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          fixture.detectChanges();
+          expect(fixture.debugElement.query(By.css('.td-message-wrapper'))).toBeFalsy();
+          done();
+        });
+      });
+    });
+  });
 });
 
 @Component({
@@ -152,3 +212,14 @@ class TdMessageContentTestComponent {
   sublabel: string = 'Sublabel';
   color: string = 'primary';
 }
+
+@Component({
+  template: `
+    <td-message [label]="label" [color]="color" [opened]="opened">
+    </td-message>`,
+})
+class TdMessageOpenedTestComponent {
+  label: string;
+  color: string;
+  opened: boolean;
+}
diff --git a/src/platform/core/message/message.component.ts b/src/platform/core/message/message.component.ts
index ec6fc9ce1c..854ad923f5 100644
--- a/src/platform/core/message/message.component.ts
+++ b/src/platform/core/message/message.component.ts
@@ -105,13 +105,13 @@ export class TdMessageComponent implements AfterViewInit {
    * Initializes the component and attaches the content if [opened] was true.
    */
   ngAfterViewInit(): void {
-    if (this._opened) {
-      Promise.resolve(undefined).then(() => {
+    Promise.resolve(undefined).then(() => {
+      if (this._opened) {
         this._childElement.viewContainer.createEmbeddedView(this._template);
-        this._initialized = true;
         this._changeDetectorRef.markForCheck();
-      });
-    }
+      }
+      this._initialized = true;
+    });
   }
 
   /**

From facd672e5dcffbadedd68df65642665c1251e4bb Mon Sep 17 00:00:00 2001
From: emoralesb05 <emoralesb05@gmail.com>
Date: Mon, 15 May 2017 19:42:04 -0700
Subject: [PATCH 7/8] fix(): lint error

---
 src/platform/core/message/message.component.spec.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/platform/core/message/message.component.spec.ts b/src/platform/core/message/message.component.spec.ts
index c50f0435a9..c1784c3823 100644
--- a/src/platform/core/message/message.component.spec.ts
+++ b/src/platform/core/message/message.component.spec.ts
@@ -160,7 +160,6 @@ describe('Component: Message', () => {
     });
   });
 
-
   it('should not render the component, set [opened] to true and then [opened] to false', (done: DoneFn) => {
     let fixture: ComponentFixture<any> = TestBed.createComponent(TdMessageOpenedTestComponent);
     let component: TdMessageOpenedTestComponent = fixture.debugElement.componentInstance;

From 94f63c2c46c6adaa8a0c5377aadb830280fdd8fd Mon Sep 17 00:00:00 2001
From: emoralesb05 <emoralesb05@gmail.com>
Date: Mon, 15 May 2017 20:22:50 -0700
Subject: [PATCH 8/8] chore(): change wording in README.md

---
 src/platform/core/message/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/platform/core/message/README.md b/src/platform/core/message/README.md
index 3dd2f45890..904ff14b25 100644
--- a/src/platform/core/message/README.md
+++ b/src/platform/core/message/README.md
@@ -3,7 +3,7 @@
 `td-message` element generates an inline message with an icon, color, label and sublabel.
 
 `color` can be either with any theme color (`primary`, `accent` or `warn`)
-But you can also set a `color` from our lib can be applied in the component to get any material color not in the theme. (`blue`, `red`, etc)
+But you can also set a `color` from our lib and it can be applied in the component to get any material color not in the theme. (`blue`, `red`, etc)
 
 ## API Summary