wip: start bringing in the first component

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

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.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"
   },

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

@@ -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.scss

@@ -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.spec.ts

@@ -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.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;
+    }
+  }
+}

projects/dev/src/lib/devintent.module.ts

@@ -0,0 +1,35 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FlexLayoutModule} from '@angular/flex-layout';
+import {MatButtonModule, MatIconModule, MatMenuModule, MatToolbarModule, MatTooltipModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
+import {ButtonBarComponent} from './button-bar/button-bar.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatIconModule,
+    MatMenuModule,
+    MatButtonModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    FlexLayoutModule,
+    RouterModule
+  ],
+  declarations: [
+    ButtonBarComponent
+  ],
+  exports: [
+    ButtonBarComponent,
+    CommonModule,
+    MatIconModule,
+    MatMenuModule,
+    MatButtonModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    FlexLayoutModule,
+    RouterModule
+  ]
+})
+export class DevintentModule {
+}

projects/dev/src/lib/nav-item.ts

@@ -0,0 +1,5 @@
+export interface NavItem {
+  label: string;
+  path: string;
+  iconName: string;
+}

projects/dev/src/public_api.ts

@@ -1,7 +1,6 @@
-/*
- * Public API Surface of dev
+/**
+ * Public API Surface of Library
  */
-
-export * from './lib/dev.service';
-export * from './lib/dev.component';
-export * from './lib/dev.module';
+export * from './lib/devintent.module';
+export * from './lib/button-bar/button-bar.component';
+export * from './lib/nav-item';

src/app/app.component.html

@@ -1 +1 @@
-<dev-dev></dev-dev>
+<dev-button-bar [navItems]="navItems"></dev-button-bar>

src/app/app.component.ts

@@ -1,10 +1,28 @@
 import {Component} from '@angular/core';
+import {NavItem} from '../../projects/dev/src/lib/nav-item';
 
 @Component({
   selector: 'dev-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'dev-demo';
+  navItems: NavItem[];
+
+  constructor() {
+    this.navItems = [
+      {label: 'Hot Tub', path: 'first', iconName: 'hot_tub'},
+      {label: 'Beach', path: 'second', iconName: 'beach_access'},
+      {label: 'Gym', path: 'third', iconName: 'fitness_center'},
+      {label: 'Children', path: 'fake', iconName: 'child_friendly'},
+      {label: 'Child Care', path: 'fake', iconName: 'child_care'},
+      {label: 'Golf', path: 'fake', iconName: 'golf_course'},
+      {label: 'Spa', path: 'fake', iconName: 'spa'},
+      {label: 'Pool', path: 'fake', iconName: 'pool'},
+      {label: 'Service', path: 'fake', iconName: 'room_service'},
+      {label: 'Casino', path: 'fake', iconName: 'casino'},
+      {label: 'Business', path: 'fake', iconName: 'business_center'},
+      {label: 'Coffee', path: 'fake', iconName: 'free_breakfast'}
+    ];
+  }
 }

src/app/app.module.ts

@@ -1,16 +1,22 @@
 import {NgModule} from '@angular/core';
+import {FlexLayoutModule} from '@angular/flex-layout';
+import {ReactiveFormsModule} from '@angular/forms';
 import {BrowserModule} from '@angular/platform-browser';
-import {DevComponent} from '../../projects/dev/src/lib/dev.component';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {DevintentModule} from '../../projects/dev/src/lib/devintent.module';
 
 import {AppComponent} from './app.component';
 
 @NgModule({
   declarations: [
-    AppComponent,
-    DevComponent
+    AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    BrowserAnimationsModule,
+    FlexLayoutModule,
+    ReactiveFormsModule,
+    DevintentModule
   ],
   providers: [],
   bootstrap: [AppComponent]