feat(side-bar): add side-bar angular 7 component

angular/src/docs/app/playground/playground.component.ts

@@ -3,16 +3,27 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'docs-playground',
   template: `
-    <div className="row">
-      <div className="example-spacing">
-      <example-popover-default></example-popover-default>
-      <example-popover-direction></example-popover-direction>
-      <example-popover-trigger></example-popover-trigger>
-      <example-popover-showarrow></example-popover-showarrow>
-      </div>
-    </div>
+        <!-- Insert example here -->
+
+        <example-sidebar-default></example-sidebar-default>
+
+       <!-- <br>
+
+        <example-sidebar-dark></example-sidebar-dark>
+
+        <br>
+
+        <example-sidebar-with-icons></example-sidebar-with-icons>
+
+        <br>
+
+        <example-sidebar-page-level></example-sidebar-page-level> -->
   `,
 })
 export class PlaygroundComponent implements OnInit {
   ngOnInit() {}
-}
+
+  onSelect (event) {
+    console.info('custom onSelect working');
+  }
+}

angular/src/lib/examples.module.ts

@@ -23,6 +23,7 @@ import { ToggleSwitchExamplesModule } from './toggle-switch/examples/toggle-swit
 import { EditableTextfieldExamplesModule } from './editable-textfield/examples/editable-textfield-examples.module';
 import { TopbarExamplesModule } from './topbar/examples/examples.module';
 import { AccordionExamplesModule } from './accordion/examples/accordion-examples.module';
+import { SideBarExamplesModule } from './sidebar/examples/sidebar-examples.module';
 import { TimePickerExamplesModule } from './time-picker/examples/examples.module';
 import { DatePickerExamplesModule } from './date-picker/examples/examples.module';
 import { ModalExamplesModule } from './modal/examples/modal-examples.module';
@@ -55,6 +56,7 @@ import { PageHeaderExamplesModule } from './page-header/examples/page-header-exa
     EditableTextfieldExamplesModule,
     TopbarExamplesModule,
     AccordionExamplesModule,
+    SideBarExamplesModule,
     TimePickerExamplesModule,
     DatePickerExamplesModule,
     ModalExamplesModule,
@@ -87,6 +89,7 @@ import { PageHeaderExamplesModule } from './page-header/examples/page-header-exa
     EditableTextfieldExamplesModule,
     TopbarExamplesModule,
     AccordionExamplesModule,
+    SideBarExamplesModule,
     TimePickerExamplesModule,
     DatePickerExamplesModule,
     ModalExamplesModule,

angular/src/lib/list-item/list-item.component.ts

@@ -33,6 +33,7 @@ export class OptionSelectionChange {
                   <ng-content></ng-content>
               </ng-template>
           </md-list-item-section>
+
           <md-list-item-section key="child-1" position='right'>
               <md-icon *ngIf="selected" name="check_20" color="blue-50"></md-icon>
           </md-list-item-section>

angular/src/lib/list/examples/list-default.component.ts

@@ -7,7 +7,8 @@ import { Component, OnInit } from '@angular/core';
       <md-list
         [ngClass]="'my-ng-class'"
         class="custom-class"
-        (select)="onSelect($event)">
+        (select)="onSelect($event)"
+      >
         <div md-list-item label='List Item A'></div>
         <div md-list-item label='List Item B'></div>
       </md-list>

angular/src/lib/public_api.ts

@@ -35,6 +35,12 @@ export * from './tabs';
 export * from './toggle-switch';
 export * from './topbar';
 export * from './accordion';
+export * from './sidebar';
+export * from './sidebar-body';
+export * from './sidebar-nav';
+export * from './sidebar-nav-item';
+export * from './sidebar-header';
+export * from './sidebar-footer';
 export * from './time-picker';
 export * from './date-picker';
 export * from './breadcrumbs';

angular/src/lib/sidebar-body/index.ts

@@ -0,0 +1,2 @@
+export * from './sidebar-body.module';
+export * from './sidebar-body.component';

angular/src/lib/sidebar-body/sidebar-body.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'md-sidebar-body',
+  template: `<ng-content></ng-content>`,
+  styles: [],
+  host: {
+    'class': 'md-sidebar__body'
+  }
+})
+export class SideBarBodyComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

angular/src/lib/sidebar-body/sidebar-body.module.ts

@@ -0,0 +1,14 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SideBarBodyComponent } from './sidebar-body.component';
+
+@NgModule({
+  declarations: [SideBarBodyComponent],
+  imports: [
+    CommonModule
+  ],
+  exports: [SideBarBodyComponent],
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
+
+})
+export class SideBarBodyModule { }

angular/src/lib/sidebar-footer/index.ts

@@ -0,0 +1,2 @@
+export * from './sidebar-footer.module';
+export * from './sidebar-footer.component';

angular/src/lib/sidebar-footer/sidebar-footer.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'md-sidebar-footer',
+  template: `<ng-content></ng-content>`,
+  styles: [],
+  host: {
+    'class': 'md-sidebar__footer'
+  }
+
+})
+export class SidebarFooterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

angular/src/lib/sidebar-footer/sidebar-footer.module.ts

@@ -0,0 +1,13 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SidebarFooterComponent } from './sidebar-footer.component';
+
+@NgModule({
+  declarations: [SidebarFooterComponent],
+  imports: [
+    CommonModule
+  ],
+  exports: [SidebarFooterComponent],
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
+})
+export class SidebarFooterModule { }

angular/src/lib/sidebar-footer/tests/sidebar-footer.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarFooterComponent } from '../sidebar-footer.component';
+
+describe('SidebarFooterComponent', () => {
+  let component: SidebarFooterComponent;
+  let fixture: ComponentFixture<SidebarFooterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SidebarFooterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SidebarFooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/src/lib/sidebar-header/index.ts

@@ -0,0 +1,2 @@
+export * from './sidebar-header.module';
+export * from './sidebar-header.component';

angular/src/lib/sidebar-header/sidebar-header.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'md-sidebar-header',
+  template: `<ng-content></ng-content>`,
+  styles: [],
+  host: {
+    'class': 'md-sidebar__header'
+  }
+})
+export class SidebarHeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

angular/src/lib/sidebar-header/sidebar-header.module.ts

@@ -0,0 +1,13 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SidebarHeaderComponent } from './sidebar-header.component';
+
+@NgModule({
+  declarations: [SidebarHeaderComponent],
+  imports: [
+    CommonModule
+  ],
+  exports: [SidebarHeaderComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class SidebarHeaderModule { }

angular/src/lib/sidebar-header/tests/sidebar-header.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarHeaderComponent } from '../sidebar-header.component';
+
+describe('SidebarHeaderComponent', () => {
+  let component: SidebarHeaderComponent;
+  let fixture: ComponentFixture<SidebarHeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SidebarHeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SidebarHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/src/lib/sidebar-nav-item/index.ts

@@ -0,0 +1,2 @@
+export * from './sidebar-nav-item.module';
+export * from './sidebar-nav-item.component';