feat(message): introducing message module. (closes #316)

[emoralesb05]

adding CovalentMessageComponent with TdMessageComponent for easy display of inline messages or info boxes

#316

Description

Adding message component to covalent.

This leverages our color styles to set the color and contrast (red,blue, etc), but also can use the material theme colors like primary , warn and accent.

Usage example:

<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-icon-button (click)="message.close()">
    <md-icon>cancel</md-icon>
  <button>
</td-message>  

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.

What's included?

• CovalentMessageModule and TdMessageComponent
• Theming for message component
• Docs and Demo

Test Steps

• ng serve
• Go to http://localhost:4200/#/components/message
• Play with demo

General Tests for Every PR

• ng serve --aot still works.
• npm run lint passes.
• npm test passes and code coverage is not lower.
• npm run build still works.

Screenshots or link to CodePen/Plunker/JSfiddle

[kyleledbetter]

Latest demo updates:

[jeremysmartt]

I think you mean:
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)

[emoralesb05]

updated~