feat(demo): show contact person form in demo

angular.json

@@ -56,11 +56,17 @@
             "aot": false,
             "assets": [
               "projects/ng-hoepel-common-demo/src/favicon.ico",
-              "projects/ng-hoepel-common-demo/src/assets"
+              "projects/ng-hoepel-common-demo/src/assets",
+              { "glob": "mdi.svg", "input": "../node_modules/@mdi/angular-material", "output": "./assets" }
             ],
             "styles": [
               "projects/ng-hoepel-common-demo/src/styles.css"
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "./projects/ng-hoepel-common/src/global-styles/"
+              ]
+            },
             "scripts": []
           },
           "configurations": {

package.json

@@ -30,6 +30,8 @@
     "@angular/platform-browser": "~8.0.1",
     "@angular/platform-browser-dynamic": "~8.0.1",
     "@angular/router": "~8.0.1",
+    "@mdi/angular-material": "^3.7.95",
+    "hammerjs": "^2.0.8",
     "rxjs": "~6.4.0",
     "tslib": "^1.9.0",
     "zone.js": "~0.9.1"

projects/ng-hoepel-common-demo/src/app/app.component.css

@@ -0,0 +1,4 @@
+.example-card {
+  max-width: 700px;
+  margin: 20px auto;
+}

projects/ng-hoepel-common-demo/src/app/app.component.html

@@ -1,20 +1,6 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
 
+<mat-card class="example-card">
+  <h1>Tenant contact</h1>
+
+  <app-tenant-contact-example></app-tenant-contact-example>
+</mat-card>

projects/ng-hoepel-common-demo/src/app/app.component.ts

@@ -1,10 +1,9 @@
 import { Component } from '@angular/core';
+import { Tenant } from '@hoepel.app/types';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  title = 'ng-hoepel-common-demo';
-}
+export class AppComponent {}

projects/ng-hoepel-common-demo/src/app/app.module.ts

@@ -1,12 +1,20 @@
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import { TenantContactModule } from '../../../ng-hoepel-common/src/lib/tenant-contact';
+import { TenantContactExampleComponent } from './tenant-contact-example/tenant-contact-example.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatCardModule, MatIconRegistry } from '@angular/material';
 
 @NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule],
+  declarations: [AppComponent, TenantContactExampleComponent],
+  imports: [BrowserModule, TenantContactModule, BrowserAnimationsModule, MatCardModule],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule {
+  constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
+    matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg'));
+  }
+}

projects/ng-hoepel-common-demo/src/app/tenant-contact-example/tenant-contact-example.component.html

@@ -0,0 +1,8 @@
+<hoepel-tenant-contact-dumb
+  [tenant]="tenant"
+  (updated)="tenantContactUpdated($event)"
+></hoepel-tenant-contact-dumb>
+
+<pre *ngIf="result">
+  {{ result | json }}
+</pre>

projects/ng-hoepel-common-demo/src/app/tenant-contact-example/tenant-contact-example.component.spec.ts

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

projects/ng-hoepel-common-demo/src/app/tenant-contact-example/tenant-contact-example.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { Tenant } from '@hoepel.app/types';
+
+@Component({
+  selector: 'app-tenant-contact-example',
+  templateUrl: './tenant-contact-example.component.html',
+  styleUrls: ['./tenant-contact-example.component.css']
+})
+export class TenantContactExampleComponent implements OnInit {
+  tenant: Tenant = {
+    name: '',
+    email: '',
+    address: {},
+    contactPerson: {},
+    description: ''
+  };
+
+  result: Tenant;
+
+  tenantContactUpdated(tenant: Tenant) {
+    this.result = tenant;
+  }
+
+  constructor() {}
+
+  ngOnInit() {}
+}

projects/ng-hoepel-common-demo/src/index.html

@@ -2,11 +2,12 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>NgHoepelCommonDemo</title>
+  <title>Common hoepel.app components - demo</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

projects/ng-hoepel-common-demo/src/main.ts

@@ -1,6 +1,6 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
+import 'hammerjs';
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 

projects/ng-hoepel-common-demo/src/styles.css

@@ -1 +1,17 @@
 /* You can add global styles to this file, and also import other style files */
+
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+
+
+/* See https://www.npmjs.com/package/@mdi/angular-material#angular */
+button.mat-menu-item {
+  line-height: 24px !important;
+}
+a.mat-menu-item > mat-icon {
+  margin-bottom: 14px;
+}
+.mat-icon svg {
+  height: 24px;
+  width: 24px;
+}
+