feat(layout): introducing layout toggle directives

[emoralesb05]

to allow more flexibility using td-layout, td-layout-nav-list and td-layout-manage-list we removed the toggle button from the component and created a few toggle directives so developers can pick and choose how, what and when to add them

What's included?

• [tdLayoutToggle], [tdLayoutNavListToggle] and [tdLayoutManageListToggle] directives.
• Removed toggle buttons from td-layout-nav-list and td-layout-manage-list in favor of these directives.

e.g.

<button md-icon-button tdLayoutManageListToggle [hideWhenOpened]="true">
   <md-icon>arrow_back</md-icon>
</button>

AND

<button md-icon-button tdLayoutNavListToggle [hideWhenOpened]="true">
   <md-icon>arrow_back</md-icon>
</button>

• Removed embedded md-toolbar from td-layout-manage-list to make it more flexible.

e.g.

  <td-layout-manage-list>
    <md-toolbar td-sidenav-content>
      ... toolbar in sidenav
    </md-toolbar>
    <md-nav-list td-sidenav-content>
      ... sidenav content
    </md-nav-list>
    <md-toolbar>
      <button md-icon-button tdLayoutManageListToggle [hideWhenOpened]="true">
        <md-icon>arrow_back</md-icon>
      </button>
      ... sub toolbar content
    </md-toolbar>
    ... main content
  </td-layout-manage-list>

• feat(): removing internal dependency to td-layout in td-layout-nav

before we needed to check if td-layout-nav was a child component of any td-layout wrapper. now we will remove that dependency all together and the menu button in favor of a [td-menu-button] placeholder so users can add their own button and add [tdLayoutToggle] or their own sidenav.

e.g.

<td-layout>
  <td-layout-nav toolbarTitle="Covalent">
    <button md-icon-button td-menu-button tdLayoutToggle>
      <md-icon>menu</md-icon>
    </button>

OR

<td-layout-nav toolbarTitle="Covalent">
  <button md-icon-button td-menu-button (click)="openSomethingElse()">
    <md-icon>menu</md-icon>
  </button>

The purpose of all this is to make layouts more flexible to allow this sort of thing:

<td-layout>
  <td-layout-nav>
     <button md-icon-button td-menu-button tdLayoutToggle><md-icon>menu</md-icon></button>
     <td-layout-manage-list>
       <md-toolbar td-sidenav-content>TITLE</md-toolbar>
       <md-nav-list td-sidenav-content>SIDENAV</md-nav-list>
       <td-layout-nav>
         <button md-icon-button td-menu-button tdLayoutManageListToggle><md-icon>arrow_back</md-icon></button>
         // content

Test Steps

• ng serve
• Go to http://localhost:4200/#/layouts
• See new usage.

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

[ranouf]

Hi,

is it possible to have something like "hideWhenClosed"? or a way to get the current status (true = opened, false = close)?

Thanks