feat: add nav-list-item component

Splaktar · Splaktar · commit 9b81985a2981 · 2020-05-23T13:48:05.000-04:00
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "dev-demo",
   "description": "DevIntent Application Development Tools",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "repository": "https://github.com/DevIntent/dev",
   "homepage": "https://devintent-dev.web.app",
   "bugs": "https://github.com/DevIntent/dev/issues",
diff --git a/projects/dev/package.json b/projects/dev/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devintent/dev",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Application Development Library",
   "keywords": [
     "material", "design", "angular", "material design", "components"
diff --git a/projects/dev/src/lib/core/nav-item.ts b/projects/dev/src/lib/core/nav-item.ts
@@ -1,5 +1,5 @@
 export interface NavItem {
   label: string;
-  path: string;
+  path?: string;
   iconName: string;
 }
diff --git a/projects/dev/src/lib/core/nested-nav-item.ts b/projects/dev/src/lib/core/nested-nav-item.ts
@@ -0,0 +1,5 @@
+import { NavItem } from './nav-item';
+
+export interface NestedNavItem extends NavItem {
+  children: NestedNavItem[];
+}
diff --git a/projects/dev/src/lib/core/theming/_all-theme.scss b/projects/dev/src/lib/core/theming/_all-theme.scss
@@ -1,5 +1,6 @@
 // Import library functions for theme creation.
 @import '../../button-bar/button-bar-theme';
+@import '../../nav-list-item/nav-list-item-theme';
 
 // Define a mixin that accepts a theme and outputs the theme-specific styles.
 @mixin dev-theme($theme) {
@@ -12,6 +13,7 @@
   //$background: map-get($theme, background);
 
   @include dev-button-bar-theme($theme);
+  @include dev-nav-list-item-theme($theme);
 }
 
 // TODO allow customizing some component typography
diff --git a/projects/dev/src/lib/nav-list-item/_nav-list-item-theme.scss b/projects/dev/src/lib/nav-list-item/_nav-list-item-theme.scss
@@ -0,0 +1,19 @@
+@import '~@angular/material/theming';
+
+@mixin dev-nav-list-item-theme($theme) {
+  $primary: map-get($theme, primary);
+
+  dev-nav-list-item {
+    .mat-list-item {
+      &.active {
+        background-color: mat-color($primary, 50);
+      }
+    }
+    &:hover,
+    &:focus {
+      > .mat-list-item:not(.expanded) {
+        background-color: mat-color($primary, 100);
+      }
+    }
+  }
+}
diff --git a/projects/dev/src/lib/nav-list-item/dev-nav.service.ts b/projects/dev/src/lib/nav-list-item/dev-nav.service.ts
@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import { MatDrawer } from '@angular/material/sidenav';
+import { NavigationEnd, Router } from '@angular/router';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+@Injectable()
+export class DevNavService {
+  private _appDrawer: MatDrawer | null = null;
+  private _currentUrl = new BehaviorSubject<string>('');
+  get currentUrl(): Observable<string> {
+    return this._currentUrl.asObservable();
+  }
+
+  constructor(private router: Router) {
+    this.router.events.subscribe(event => {
+      if (event instanceof NavigationEnd) {
+        this._currentUrl.next(event.urlAfterRedirects);
+      }
+    });
+  }
+
+  public closeNav(): Promise<'open' | 'close' | null> {
+    if (this._appDrawer) {
+      if (!this._appDrawer.disableClose) {
+        return this._appDrawer.close();
+      } else {
+        return Promise.resolve<null>(null);
+      }
+    } else {
+      return Promise.reject<null>('appDrawer has not been set.');
+    }
+  }
+
+  get appDrawer(): MatDrawer | null {
+    return this._appDrawer;
+  }
+
+  set appDrawer(value: MatDrawer | null) {
+    this._appDrawer = value;
+  }
+}
diff --git a/projects/dev/src/lib/nav-list-item/index.ts b/projects/dev/src/lib/nav-list-item/index.ts
@@ -0,0 +1 @@
+export * from './public-api';
diff --git a/projects/dev/src/lib/nav-list-item/nav-list-item.component.html b/projects/dev/src/lib/nav-list-item/nav-list-item.component.html
@@ -0,0 +1,18 @@
+<a
+  mat-list-item
+  [ngStyle]="{ 'padding-left': depth * 12 + 'px' }"
+  (click)="onItemSelected(item)"
+  *ngIf="item"
+  [ngClass]="{ active: item.path ? router.isActive(item.path, true) : false, expanded: expanded }"
+>
+  <mat-icon class="dev-path-icon">{{ item.iconName }}</mat-icon>
+  {{ item.label }}
+  <span class="dev-caret-container" *ngIf="item.children && item.children.length">
+    <mat-icon [@indicatorRotate]="expanded ? 'expanded' : 'collapsed'">
+      expand_more
+    </mat-icon>
+  </span>
+</a>
+<div *ngIf="item && expanded">
+  <dev-nav-list-item *ngFor="let child of item.children" [item]="child" [depth]="depth + 1"> </dev-nav-list-item>
+</div>
diff --git a/projects/dev/src/lib/nav-list-item/nav-list-item.component.scss b/projects/dev/src/lib/nav-list-item/nav-list-item.component.scss
@@ -0,0 +1,23 @@
+@import '~@angular/material/theming';
+
+dev-nav-list-item {
+  display: flex;
+  flex-direction: column;
+  outline: none;
+  width: 100%;
+
+  .mat-list-item {
+    padding: 8px 0;
+    display: flex;
+    width: auto;
+
+    .dev-path-icon {
+      margin-right: 40px;
+    }
+    .dev-caret-container {
+      flex: auto;
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
diff --git a/projects/dev/src/lib/nav-list-item/nav-list-item.component.ts b/projects/dev/src/lib/nav-list-item/nav-list-item.component.ts
@@ -0,0 +1,54 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { Component, HostBinding, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { NestedNavItem } from '..';
+import { DevNavService } from './dev-nav.service';
+
+@Component({
+  selector: 'dev-nav-list-item',
+  templateUrl: './nav-list-item.component.html',
+  styleUrls: ['./nav-list-item.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  animations: [
+    trigger('indicatorRotate', [
+      state('collapsed', style({ transform: 'rotate(0deg)' })),
+      state('expanded', style({ transform: 'rotate(180deg)' })),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
+    ]),
+  ],
+})
+export class NavListItemComponent implements OnInit, OnDestroy {
+  expanded = false;
+  @HostBinding('attr.aria-expanded') ariaExpanded = this.expanded;
+  @Input() item: NestedNavItem | undefined;
+  @Input() depth = 0;
+  private destroyed = new Subject();
+
+  constructor(public navExpansionService: DevNavService, public router: Router) {}
+
+  ngOnInit() {
+    this.navExpansionService.currentUrl.pipe(takeUntil(this.destroyed)).subscribe((url: string) => {
+      if (this.item && this.item.path && url) {
+        this.expanded = url.indexOf(`/${this.item.path}`) === 0;
+        this.ariaExpanded = this.expanded;
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.destroyed.next();
+    this.destroyed.complete();
+  }
+
+  onItemSelected(item: NestedNavItem) {
+    if (!item.children || !item.children.length) {
+      this.router.navigate([item.path]);
+      this.navExpansionService.closeNav();
+    }
+    if (item.children && item.children.length) {
+      this.expanded = !this.expanded;
+    }
+  }
+}
diff --git a/projects/dev/src/lib/nav-list-item/nav-list-item.module.ts b/projects/dev/src/lib/nav-list-item/nav-list-item.module.ts
@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { RouterModule } from '@angular/router';
+import { DevNavService } from './dev-nav.service';
+import { NavListItemComponent } from './nav-list-item.component';
+
+@NgModule({
+  imports: [CommonModule, MatIconModule, MatListModule, MatSidenavModule, RouterModule],
+  declarations: [NavListItemComponent],
+  providers: [DevNavService],
+  exports: [CommonModule, NavListItemComponent, MatIconModule, MatListModule, MatSidenavModule, RouterModule],
+})
+export class NavListItemModule {}
diff --git a/projects/dev/src/lib/nav-list-item/public-api.ts b/projects/dev/src/lib/nav-list-item/public-api.ts
@@ -0,0 +1,4 @@
+export * from './nav-list-item.module';
+export * from './nav-list-item.component';
+export * from './dev-nav.service';
+export * from '../core/nested-nav-item';
diff --git a/projects/dev/src/lib/public-api.ts b/projects/dev/src/lib/public-api.ts
@@ -1 +1,2 @@
 export * from './button-bar/index';
+export * from './nav-list-item/index';
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -1,4 +1,11 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
 .mat-toolbar {
+  flex: 0 0 64px;
+
   a {
     text-decoration: none;
     color: inherit;
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -7,7 +7,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule, Routes } from '@angular/router';
-import { ButtonBarModule } from '@devintent/dev';
+import { ButtonBarModule, NavListItemModule } from '@devintent/dev';
 import { environment } from '../environments/environment';
 
 import { AppComponent } from './app.component';
@@ -25,6 +25,7 @@ import { SeventhComponent } from './seventh/seventh.component';
 import { SixthComponent } from './sixth/sixth.component';
 import { TenthComponent } from './tenth/tenth.component';
 import { ThirdComponent } from './third/third.component';
+import { NavListItemDemoComponent } from './nav-list-item-demo/nav-list-item-demo.component';
 
 export const appRoutes: Routes = [
   { path: '', pathMatch: 'full', component: DemosComponent, children: [] },
@@ -47,6 +48,28 @@ export const appRoutes: Routes = [
       { path: 'coffee', component: CoffeeComponent, children: [] },
     ],
   },
+  {
+    path: 'nav-list-item',
+    component: NavListItemDemoComponent,
+    children: [
+      {
+        path: 'sections',
+        children: [
+          { path: 'first', component: FirstComponent, children: [] },
+          { path: 'second', component: SecondComponent, children: [] },
+          { path: 'third', component: ThirdComponent, children: [] },
+        ],
+      },
+      {
+        path: 'chapters',
+        children: [
+          { path: 'fourth', component: FourthComponent, children: [] },
+          { path: 'fifth', component: FifthComponent, children: [] },
+          { path: 'sixth', component: SixthComponent, children: [] },
+        ],
+      },
+    ],
+  },
   { path: '**', component: DemosComponent, children: [] },
 ];
 
@@ -67,6 +90,7 @@ export const appRoutes: Routes = [
     CoffeeComponent,
     ButtonBarDemoComponent,
     DemosComponent,
+    NavListItemDemoComponent,
   ],
   imports: [
     CommonModule,
@@ -75,6 +99,7 @@ export const appRoutes: Routes = [
     FlexLayoutModule,
     ReactiveFormsModule,
     ButtonBarModule,
+    NavListItemModule,
     RouterModule.forRoot(appRoutes, { useHash: false }),
     AngularFireModule.initializeApp(environment.firebase),
     AngularFirePerformanceModule,
diff --git a/src/app/demos/demos.component.html b/src/app/demos/demos.component.html
@@ -2,4 +2,7 @@
   <a mat-stroked-button color="primary" routerLink="button-bar">
     Button Bar Demo
   </a>
+  <a mat-stroked-button color="primary" routerLink="nav-list-item">
+    Nav List Item Demo
+  </a>
 </div>
diff --git a/src/app/nav-list-item-demo/nav-list-item-demo.component.html b/src/app/nav-list-item-demo/nav-list-item-demo.component.html
@@ -0,0 +1,8 @@
+<mat-sidenav-container>
+  <mat-sidenav #appDrawer mode="side" [opened]="true" [disableClose]="true">
+    <mat-nav-list aria-label="Side Navigation">
+      <dev-nav-list-item *ngFor="let item of navItems" [item]="item"></dev-nav-list-item>
+    </mat-nav-list>
+  </mat-sidenav>
+  <router-outlet></router-outlet>
+</mat-sidenav-container>
diff --git a/src/app/nav-list-item-demo/nav-list-item-demo.component.scss b/src/app/nav-list-item-demo/nav-list-item-demo.component.scss
@@ -0,0 +1,15 @@
+:host {
+  display: flex;
+  flex: auto;
+}
+.mat-sidenav {
+  width: 360px;
+}
+.mat-sidenav-container {
+  height: calc(100vh - 64px);
+
+  .mat-sidenav-content {
+    display: flex;
+    flex-direction: column;
+  }
+}
diff --git a/src/app/nav-list-item-demo/nav-list-item-demo.component.spec.ts b/src/app/nav-list-item-demo/nav-list-item-demo.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavListItemDemoComponent } from './nav-list-item-demo.component';
+
+describe('NavListItemDemoComponent', () => {
+  let component: NavListItemDemoComponent;
+  let fixture: ComponentFixture<NavListItemDemoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [NavListItemDemoComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavListItemDemoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/nav-list-item-demo/nav-list-item-demo.component.ts b/src/app/nav-list-item-demo/nav-list-item-demo.component.ts
diff --git a/src/favicon.ico b/src/favicon.ico

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "dev-demo",`
`3`	`3`	`"description": "DevIntent Application Development Tools",`
`4`		`- "version": "0.6.0",`
	`4`	`+ "version": "0.7.0",`
`5`	`5`	`"repository": "https://github.com/DevIntent/dev",`
`6`	`6`	`"homepage": "https://devintent-dev.web.app",`
`7`	`7`	`"bugs": "https://github.com/DevIntent/dev/issues",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@devintent/dev",`
`3`		`- "version": "0.6.0",`
	`3`	`+ "version": "0.7.0",`
`4`	`4`	`"description": "Application Development Library",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"material", "design", "angular", "material design", "components"`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`export interface NavItem {`
`2`	`2`	`label: string;`
`3`		`- path: string;`
	`3`	`+ path?: string;`
`4`	`4`	`iconName: string;`
`5`	`5`	`}`