wip: start bringing in the first component

setup Angular Material properly since ng add failed
build errors due to angular/flex-layout#851

Author: Splaktar

angular.json

@@ -139,6 +139,11 @@
       "sourceRoot": "projects/dev/src",
       "projectType": "library",
       "prefix": "dev",
+      "schematics": {
+        "@schematics/angular:component": {
+          "styleext": "scss"
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",

package-lock.json

@@ -21,14 +21,15 @@
     "@angular/common": "~7.0.0-rc.0",
     "@angular/compiler": "~7.0.0-rc.0",
     "@angular/core": "~7.0.0-rc.0",
-    "@angular/flex-layout": "^6.0.0-beta.18",
+    "@angular/flex-layout": "github:angular/flex-layout-builds",
     "@angular/forms": "~7.0.0-rc.0",
     "@angular/http": "~7.0.0-rc.0",
     "@angular/material": "^7.0.0-rc.0",
     "@angular/platform-browser": "~7.0.0-rc.0",
     "@angular/platform-browser-dynamic": "~7.0.0-rc.0",
     "@angular/router": "~7.0.0-rc.0",
     "core-js": "^2.5.4",
+    "hammerjs": "^2.0.8",
     "rxjs": "~6.3.3",
     "zone.js": "~0.8.26"
   },

package.json

@@ -0,0 +1,29 @@
+<mat-toolbar class="mat-elevation-z1">
+  <button mat-button
+     *ngFor="let button of namedButtons"
+     [routerLink]="button.path"
+     routerLinkActive #rla="routerLinkActive"
+     [ngClass]="{'active': rla.isActive}">
+    {{button.label}}
+  </button>
+  <button mat-icon-button
+     *ngFor="let button of iconButtons"
+     [routerLink]="button.path"
+     routerLinkActive #rla="routerLinkActive"
+     [ngClass]="{'active': rla.isActive}" [matTooltip]="button.label">
+     <mat-icon>{{button.iconName}}</mat-icon>
+  </button>
+  <span fxFlex></span>
+  <button mat-icon-button [matMenuTriggerFor]="overflowMenu" class="overflowMenu"
+          *ngIf="overflowMenuItems.length">
+    <mat-icon>more_vert</mat-icon>
+  </button>
+  <mat-menu #overflowMenu="matMenu" [overlapTrigger]="false">
+    <button mat-menu-item color="primary"
+            *ngFor="let item of overflowMenuItems"
+            [routerLink]="item.path">
+      <mat-icon>{{item.iconName}}</mat-icon>
+      <span>{{item.label}}</span>
+    </button>
+  </mat-menu>
+</mat-toolbar>

projects/dev/src/lib/button-bar/button-bar.component.html

@@ -0,0 +1,25 @@
+@import '~@angular/material/theming';
+
+// TODO support theming of components
+.mat-toolbar {
+  padding-top: 2px;
+
+  button {
+    opacity: 0.6;
+    text-transform: uppercase;
+
+    &:hover,
+    &:focus {
+      background-color: map-get($mat-indigo, 50);
+    }
+
+    &.active {
+      color: map-get($mat-indigo, 500);
+      opacity: 1;
+    }
+
+    &.mat-icon-button {
+      margin-right: 8px;
+    }
+  }
+}

projects/dev/src/lib/button-bar/button-bar.component.scss

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

projects/dev/src/lib/button-bar/button-bar.component.spec.ts

@@ -0,0 +1,54 @@
+import {Component, OnInit, OnDestroy, Input} from '@angular/core';
+import {MediaChange, ObservableMedia} from '@angular/flex-layout';
+import {NavItem} from '../nav-item';
+import {Subscription} from 'rxjs';
+
+@Component({
+  selector: 'dev-button-bar',
+  templateUrl: './button-bar.component.html',
+  styleUrls: ['./button-bar.component.scss']
+})
+export class ButtonBarComponent implements OnInit, OnDestroy {
+  @Input() navItems: NavItem[];
+  watcher: Subscription;
+  namedButtons: NavItem[] = [];
+  iconButtons: NavItem[] = [];
+  overflowMenuItems: NavItem[] = [];
+
+  constructor(public mediaService: ObservableMedia) {}
+
+  ngOnInit() {
+    this.watcher = this.mediaService.subscribe((change: MediaChange) => {
+      this.onMediaChange();
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.watcher) {
+      this.watcher.unsubscribe();
+    }
+  }
+
+  onMediaChange() {
+    const items = this.navItems.slice();
+    this.namedButtons = [];
+    this.iconButtons = [];
+    this.overflowMenuItems = [];
+
+    if (this.mediaService.isActive('xs')) {
+      this.iconButtons = this.iconButtons.concat(items.splice(0, 5));
+    } else if (this.mediaService.isActive('sm')) {
+      this.namedButtons = this.namedButtons.concat(items.splice(0, 6));
+    } else if (this.mediaService.isActive('md')) {
+      this.namedButtons = this.namedButtons.concat(items.splice(0, 8));
+    } else if (this.mediaService.isActive('lg')) {
+      this.namedButtons = this.namedButtons.concat(items.splice(0, 12));
+    } else if (this.mediaService.isActive('xl')) {
+      this.namedButtons = this.namedButtons.concat(items.splice(0, 16));
+    }
+
+    if (items.length > 0) {
+      this.overflowMenuItems = items;
+    }
+  }
+}