Add demo Angular code

src/feat-no-facade/src/lib/containers/smart-b-no-facade/smart-b-no-facade.container.html

@@ -0,0 +1,2 @@
+<hello name="{%raw%}{{ name }}" (nameChange)="name=$event"></hello>
+<button (click)="save()">Save</button>

src/feat-no-facade/src/lib/containers/smart-b-no-facade/smart-b-no-facade.container.scss

@@ -0,0 +1,44 @@
+collapsable-sidebar {
+  height: 100%;
+  display: flex;
+}
+.collapsable-part {
+  min-width: 400px;
+  background: $color-purple-dark;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  h2 {
+    padding-left: 10px;
+    color: $color-white;
+  }
+  .btn-collapsable {
+    position: fixed;
+    left: 364px;
+    margin-top: 0px;
+    z-index: 9999;
+    border-radius: 0;
+  }
+  &.is-collapsed {
+    width: 35px;
+    min-width: 0px;
+    .btn-collapsable {
+      left: 0px;
+    }
+  }
+  .table.table-striped {
+    tbody > tr:nth-of-type(odd) {
+      background: $color-purple-dark;
+      color: $color-white;
+      td {
+        border: none;
+      }
+    }
+    tbody > tr:nth-of-type(even) {
+      color: $color-white;
+      td {
+        border: none;
+      }
+    }
+  }
+}

src/feat-no-facade/src/lib/containers/smart-b-no-facade/smart-b-no-facade.container.ts

@@ -0,0 +1,16 @@
+import { Component, ViewEncapsulation } from "@angular/core";
+@Component({
+  selector: "smart-b-no-facade",
+  encapsulation: ViewEncapsulation.None,
+  templateUrl: "./smart-b-no-facade.container.html"
+})
+export class SmartBNoFacadeContainer {
+  isCollapsed$ = this.sandbox.isCollapsed$;
+
+
+  public save(): void {
+    this.nameService.save(this.name).then(() => {
+      this.router.navigate([".."]);
+    });
+  }
+}

src/feat-no-facade/src/lib/feat-no-facade.module.ts

@@ -0,0 +1,18 @@
+import {NgModule} from "@angular/core";
+import {HttpModule} from "@angular/http";
+import {RouterModule} from "@angular/router";
+import {CommonSandbox} from "./common.sandbox";
+import {CommonModule} from "@angular/common";
+import {ReactiveFormsModule, FormsModule} from "@angular/forms";
+import {AuthenticatedGuard} from "./authenticated.guard";
+import {RealTime} from "./realtime";
+import { SmartBNoFacadeContainer } from "./containers/smart-b-no-facade/smart-b-no-facade.container";
+
+@NgModule({
+    imports: [FormsModule, ReactiveFormsModule, CommonModule, RouterModule, HttpModule],
+    declarations: [SmartBNoFacadeContainer],
+    exports: [],
+    providers: [CommonSandbox, AuthenticatedGuard, RealTime]
+})
+export class FeatNoFacadeModule {
+}

src/feat-test/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/feat-test.module';

src/feat-test/src/lib/components/default-page/default-page.component.scss

@@ -0,0 +1,8 @@
+default-page {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  padding-top: 50px;
+}

src/feat-test/src/lib/components/default-page/default-page.component.ts

@@ -0,0 +1,8 @@
+import {Component} from "@angular/core";
+
+@Component({
+    selector: "default-page",
+    template: `<ng-content><smart-a></smart-a></ng-content>`
+})
+export class DefaultPageComponent {
+}

src/feat-test/src/lib/components/form/form-group-content/form-group-content.component.ts

@@ -0,0 +1,16 @@
+import {Input, Component, ChangeDetectionStrategy} from "@angular/core";
+@Component({
+    selector: "form-group-content",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+        <div class="form-group has-feedback">
+            <label class="col-sm-4 control-label">{{label}}</label>
+            <div class="col-sm-8">
+                <ng-content></ng-content>
+            </div>
+        </div>
+    `
+})
+export class FormGroupContent {
+    @Input() label:string;
+}

src/feat-test/src/lib/components/form/form-group-footer/form-group-footer.component.ts

@@ -0,0 +1,12 @@
+import {Component} from "@angular/core";
+@Component({
+    selector: "form-group-footer",
+    template: `
+        <div class="form-group">
+            <div class="col-sm-offset-4 col-sm-8">
+               <ng-content></ng-content>
+            </div>
+        </div>
+    `
+})
+export class FormGroupFooter {}

src/feat-test/src/lib/components/form/form-group-password/form-group-password.component.ts

@@ -0,0 +1,24 @@
+import {Component, Input, ChangeDetectionStrategy} from "@angular/core";
+import {FormControl} from "@angular/forms";
+@Component({
+    selector: "form-group-password",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+        <div class="form-group has-feedback" [class.has-success]="control.valid">
+             <label class="col-sm-4 control-label">{{label}}</label>
+             <div class="col-sm-8">
+                <input type="password" 
+                    [formControl]="control" 
+                    class="form-control input-lg" 
+                    placeholder="{{placeholder}}"/>
+                    <span *ngIf="control.valid" 
+                    class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+            </div>
+        </div>
+    `
+})
+export class FormGroupPassword {
+    @Input() control: FormControl;
+    @Input() label: string;
+    @Input() placeholder: string;
+}

src/feat-test/src/lib/components/form/form-group-textarea/form-group-textarea.component.ts

@@ -0,0 +1,24 @@
+import {Input, Component, ChangeDetectionStrategy} from "@angular/core";
+import {FormControl} from "@angular/forms";
+@Component({
+    selector: "form-group-textarea",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+        <div class="form-group has-feedback" [class.has-success]="control.valid && control.dirty">
+            <label class="col-sm-4 control-label">{{label}}</label>
+             <div class="col-sm-8">
+                <textarea
+                    [formControl]="control" 
+                    class="form-control input-lg" 
+                    placeholder="{{placeholder}}"></textarea>
+                    <span *ngIf="control.valid && control.dirty" 
+                    class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+            </div>
+        </div>
+    `
+})
+export class FormGroupTextarea {
+    @Input() control: FormControl;
+    @Input() label: string;
+    @Input() placeholder: string;
+}

src/feat-test/src/lib/components/form/form-group-textbox/form-group-textbox.component.ts

@@ -0,0 +1,24 @@
+import {Input, Component, ChangeDetectionStrategy} from "@angular/core";
+import {FormControl} from "@angular/forms";
+@Component({
+    selector: "form-group-textbox",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+        <div class="form-group has-feedback" [class.has-success]="control.valid && control.dirty">
+            <label class="col-sm-4 control-label">{{label}}</label>
+             <div class="col-sm-8">
+                <input type="text" 
+                    [formControl]="control" 
+                    class="form-control input-lg" 
+                    placeholder="{{placeholder}}"/>
+                    <span *ngIf="control.valid && control.dirty" 
+                        class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+            </div>
+        </div>
+    `
+})
+export class FormGroupTextbox {
+    @Input() control: FormControl;
+    @Input() label: string;
+    @Input() placeholder: string;
+}

src/feat-test/src/lib/components/main/main.component.scss

@@ -0,0 +1,15 @@
+main {
+  background: $color-background;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  width: 100%;
+  overflow: auto;
+  padding: 15px;
+  table.table-striped > tbody > tr:nth-of-type(odd) {
+    background-color: $color-white;
+  }
+  table.table-striped td {
+    border: none;
+  }
+}

src/feat-test/src/lib/components/main/main.component.ts

@@ -0,0 +1,7 @@
+import {Component} from "@angular/core";
+@Component({
+    selector: "main",
+    template: `<ng-content><navbar></navbar><number-picker></number-picker></ng-content>`
+})
+export class MainComponent {
+}

src/feat-test/src/lib/components/navbar/navbar.component.scss

@@ -0,0 +1,19 @@
+.navbar.navbar-inverse {
+  background-color: $color-purple;
+  .navbar-nav li a {
+    color: $color-white;
+    &:hover {
+      background: $color-purple-light;
+    }
+  }
+  .navbar-brand {
+    color: $color-white;
+  }
+  .navbar-text {
+    color: $color-white;
+  }
+  .navbar-nav li a.router-link-active {
+    background: $color-purple-dark;
+    color: $color-white;
+  }
+}

src/feat-test/src/lib/components/navbar/navbar.component.ts

@@ -0,0 +1,49 @@
+import {Component, Output, EventEmitter, Input, ChangeDetectionStrategy} from "@angular/core";
+import {Account} from "../../../authentication/types/Account";
+@Component({
+    selector: "navbar",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+      <nav class="navbar navbar-inverse navbar-fixed-top">
+            <div class="container-fluid">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle collapsed" 
+                        data-toggle="collapse" 
+                        data-target="#navbar" 
+                        aria-expanded="false" 
+                        aria-controls="navbar">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand" [routerLink]="['/stock']"><i class="fa fa-glass"></i>&nbsp;Wine cellar</a>
+                </div>
+                <spinner></spinner>
+                <div id="navbar" class="collapse navbar-collapse">
+                    <ul class="nav navbar-nav">
+                        <li><a [routerLink]="['/stock']"><i class="fa fa-user"></i>&nbsp;My wines</a></li>
+                        <li><a [routerLink]="['/about']" ><i class="fa fa-info-circle"></i>&nbsp;About</a></li>
+                    </ul>
+                    <ul class="nav navbar-nav navbar-right">
+                        <li class="navbar-text hidden-sm hidden-xs hidden-md">
+                            Welcome {{account?.firstName}} {{account?.lastName}}
+                        </li>
+                        <li>
+                            <a href="javascript: void(0)" (click)="logoutClicked()">
+                                <i class="fa fa-sign-out"></i>&nbsp;Logout
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>`
+})
+export class NavbarComponent {
+    @Input() account: Account;
+    @Output() logout = new EventEmitter();
+
+    logoutClicked(): void {
+        this.logout.emit(null);
+    }
+}

src/feat-test/src/lib/components/number-picker/number-picker.component.scss

@@ -0,0 +1,17 @@
+number-picker {
+  min-width: 78px;
+  display: flex;
+  flex-direction: row;
+  .btn-primary {
+    background-color: $color-purple-light;
+    border: none;
+    &:hover {
+      background-color: $color-purple;
+    }
+  }
+  .amount {
+    width: 30px;
+    display: block;
+    text-align: center;
+  }
+}

src/feat-test/src/lib/components/number-picker/number-picker.component.ts

@@ -0,0 +1,26 @@
+import {Component, Input, Output, EventEmitter, ChangeDetectionStrategy} from "@angular/core";
+@Component({
+    selector: "number-picker",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+        <button type="button" class="btn btn-primary btn-sm" (click)="down()" [disabled]="amount === 0">
+           <i class="fa fa-chevron-down"></i>
+        </button>
+       <span class="amount">{{amount}}</span>
+        <button type="button" class="btn btn-primary btn-sm" (click)="up()">
+            <i class="fa fa-chevron-up"></i>
+        </button>
+    `
+})
+export class NumberPickerComponent {
+    @Input() amount: number;
+    @Output() setAmount = new EventEmitter<number>();
+
+    up(): void {
+        this.setAmount.emit(this.amount + 1);
+    }
+
+    down(): void {
+        this.setAmount.emit(this.amount - 1);
+    }
+}

src/feat-test/src/lib/components/panel/panel.component.scss

@@ -0,0 +1,9 @@
+panel .panel-primary {
+  border: none;
+  .panel-heading {
+    background-color: $color-purple;
+    border-color: $color-purple-dark;
+  }
+  max-width: 500px;
+  margin: 0 auto;
+}

src/feat-test/src/lib/components/panel/panel.component.ts

@@ -0,0 +1,18 @@
+import {Component, Input, ChangeDetectionStrategy} from "@angular/core";
+@Component({
+    selector: "panel",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+        <div class="panel panel-primary">
+            <div class="panel-heading">
+                <h3 class="panel-title">{{header}}</h3>
+            </div>
+            <div class="panel-body">
+                <ng-content></ng-content>
+            </div>
+        </div>
+    `
+})
+export class PanelComponent {
+    @Input() header: string;
+}

src/feat-test/src/lib/components/rating/rating.component.scss

@@ -0,0 +1,3 @@
+rating i.over, rating i.starred {
+  color: $color-purple;
+}