feat: Update for Angular 8 and Material design

BREAKING CHANGE: Component now use Angular's reactive forms and material design styling. Support for template based forms is removed.
haavardj · Dec 26, 2019 · 81c5bcb · 81c5bcb
1 parent 25e9028
commit 81c5bcb
Show file tree

Hide file tree

Showing 51 changed files with 1,260 additions and 227,061 deletions.
diff --git a/angular.json b/angular.json
@@ -8,7 +8,11 @@
       "sourceRoot": "src",
       "projectType": "application",
       "prefix": "demo",
-      "schematics": {},
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
@@ -23,8 +27,8 @@
               "src/assets"
             ],
             "styles": [
-              "apps/demo/src/styles.css",
-              "node_modules/bootstrap/dist/css/bootstrap.min.css"
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "apps/demo/src/styles.scss"
             ],
             "scripts": []
           },
@@ -73,7 +77,8 @@
             "tsConfig": "apps/demo/src/tsconfig.spec.json",
             "karmaConfig": "apps/demo/src/karma.conf.js",
             "styles": [
-              "apps/demo/src/styles.css"
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "apps/demo/src/styles.scss"
             ],
             "scripts": [],
             "assets": [
@@ -105,32 +110,28 @@
         "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",
           "options": {
-              "tsConfig": "libs/ngx-cron-editor/tsconfig.lib.json",
-              "project": "libs/ngx-cron-editor/ng-package.json"
-            },
-            "configurations": {
-              "production": {
-                "project": "libs/ngx-cron-editor/ng-package.prod.json"
-              }
-            },
-            "styles": [
-              "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "src/styles.css"
-            ]
+            "tsConfig": "libs/ngx-cron-editor/tsconfig.lib.json",
+            "project": "libs/ngx-cron-editor/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "project": "libs/ngx-cron-editor/ng-package.prod.json"
+            }
+          },
+          "styles": ["libs/ngx-cron-editor/src/cron-editor-theme.scss"]
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
-            "options": {
-              "tsConfig": [
-                "libs/ngx-cron-editor/tsconfig.lib.json",
-                "libs/ngx-cron-editor/tsconfig.spec.json"
-              ],
-              "exclude": []
-            }
+          "options": {
+            "tsConfig": [
+              "libs/ngx-cron-editor/tsconfig.lib.json",
+              "libs/ngx-cron-editor/tsconfig.spec.json"
+            ],
+            "exclude": []
           }
         }
       }
-    },
+    }
+  },
   "defaultProject": "ngx-cron-editor"
 }
-
diff --git a/apps/demo/src/app/app.component.css b/apps/demo/src/app/app.component.css
diff --git a/apps/demo/src/app/app.component.html b/apps/demo/src/app/app.component.html
@@ -1,38 +1,42 @@
-<div style="text-align:center">
-  <h1>Angular 8+ Cron expression editor</h1>
-</div>
+<section class="mat-typography demo-container">
 
-<div class="row">
-  <div class="col col-sm-2"></div>
-  <div class="col-sm-8">
-    <div class="card card-sm-8">
-      <div class="card-header text-white bg-dark mb-3 form-group form-inline">
-        <label class="col-form-label">Select your cron flavor:&nbsp;
-          <select class="form-control" (change)="cronFlavorChange()" [(ngModel)]="cronOptions.cronFlavor">
-            <option [ngValue]="'quartz'">
-              quartz
-            </option>
-            <option [ngValue]="'standard'">
-              standard
-            </option>
-          </select>
-        </label>
-      </div>
-      <div class="card-body">
-        <cron-editor #cronEditorDemo [(cron)]="cronExpression" [disabled]="isCronDisabled" [(options)]="cronOptions">Cron here...</cron-editor>
-      </div>
-      <div class="card-footer text-center">
-        <div class="alert alert-info">
+  <h1>Angular 8+ Cron Expression Editor</h1>
+
+    <mat-card class="demo-card">
+      <mat-card-header class="demo-card-header">
+
+        <mat-card-title>
+          Select your cron flavor
+        </mat-card-title>
+        <div>
+          <mat-form-field>
+            <mat-label>Flavor</mat-label>
+            <mat-select (change)="cronFlavorChange()" [(ngModel)]="cronOptions.cronFlavor">
+              <mat-option [value]="'quartz'">
+                Quartz
+              </mat-option>
+
+              <mat-option [value]="'standard'">
+                Standard
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+      </mat-card-header>
+
+      <mat-card-content class="demo-card-content">
+        <form>
+        <cron-editor  #cronEditorDemo  [(cron)]="cronExpression"  [options]="cronOptions">Cron here...</cron-editor>
+        </form>
+      </mat-card-content>
+
+      <mat-card-footer class="demo-card-footer">
+        <div>
           <h3>
-            <b>{{cronExpression}}</b>
+            <b>Expression: {{cronExpression}}</b>
           </h3>
         </div>
-        <div class="form-group form-inline" >
-          <label class="col-form-label mx-auto">Enter a custom cron expression:&nbsp;
-            <input class="form-control" [(ngModel)]="cronExpression" /> </label>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col col-sm-2"></div>
-</div>
+      </mat-card-footer>
+
+    </mat-card>
+</section>
diff --git a/apps/demo/src/app/app.component.scss b/apps/demo/src/app/app.component.scss
@@ -0,0 +1,24 @@
+@import '~@angular/material/theming';
+
+.demo-container {
+  margin: 30px;
+}
+
+.demo-card {
+  @include  mat-elevation(2);
+  position: absolute;
+}
+
+.demo-card-content {
+}
+
+.demo-card-header {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  align-items: center;
+}
+
+.demo-card-footer {
+  margin: 0px;
+  padding: 16px;
+}
diff --git a/apps/demo/src/app/app.component.ts b/apps/demo/src/app/app.component.ts
@@ -1,13 +1,14 @@
-import { Component, ViewChild } from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import { CronOptions } from 'ngx-cron-editor';
 import { CronGenComponent } from 'ngx-cron-editor';
+import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   public cronExpression = '0 0 1/1 * *';
   public isCronDisabled = false;
   public cronOptions: CronOptions = {
@@ -25,8 +26,8 @@ export class AppComponent {
     hideMonthlyTab: false,
     hideYearlyTab: false,
     hideAdvancedTab: false,
-    hideSpecificWeekDayTab : false,
-    hideSpecificMonthWeekTab : false,
+    hideSpecificWeekDayTab: false,
+    hideSpecificMonthWeekTab: false,
 
     use24HourTime: true,
     hideSeconds: false,
@@ -37,6 +38,9 @@ export class AppComponent {
   @ViewChild('cronEditorDemo', { static: false })
   cronEditorDemo: CronGenComponent;
 
+  constructor() {}
+
+  ngOnInit(): void {}
   cronFlavorChange() {
     this.cronEditorDemo.options = this.cronOptions;
     this.cronEditorDemo.regenerateCron();

diff --git a/apps/demo/src/app/app.module.ts b/apps/demo/src/app/app.module.ts
@@ -1,11 +1,35 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import { AppComponent } from './app.component';
 import {CronEditorModule} from 'ngx-cron-editor';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {MatCardModule} from '@angular/material/card';
+import {MatSelectModule} from '@angular/material/select';
+import {MatSliderModule} from '@angular/material/slider';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { LayoutModule } from '@angular/cdk/layout';
+import {CommonModule} from '@angular/common';
 
 @NgModule({
-  imports: [BrowserModule, FormsModule, CronEditorModule],
+  imports: [
+    CommonModule,
+    BrowserModule,
+    FormsModule,
+    ReactiveFormsModule,
+    BrowserAnimationsModule,
+    MatCardModule,
+    MatSelectModule,
+    MatSliderModule,
+    MatGridListModule,
+    MatMenuModule,
+    MatIconModule,
+    MatButtonModule,
+    LayoutModule,
+    CronEditorModule],
   declarations: [AppComponent],
   providers: [],
   bootstrap: [AppComponent]

diff --git a/apps/demo/src/index.html b/apps/demo/src/index.html
@@ -7,9 +7,11 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
-  </head>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
 
-  <body>
+  <body class="mat-app-background">
     <app-root></app-root>
   </body>
 

diff --git a/apps/demo/src/main.ts b/apps/demo/src/main.ts
@@ -3,9 +3,10 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
+import 'hammerjs';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule); 
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/apps/demo/src/styles.css b/apps/demo/src/styles.css
diff --git a/apps/demo/src/styles.scss b/apps/demo/src/styles.scss
@@ -0,0 +1,17 @@
+/* You can add global styles to this file, and also import other style files */
+
+@import '~@angular/material/theming';
+
+@include mat-core();
+
+$primary: mat-palette($mat-deep-purple);
+$accent:  mat-palette($mat-green, A200, A100, A400);
+$warn:    mat-palette($mat-red);
+
+$theme: mat-light-theme($primary, $accent, $warn);
+
+@include angular-material-theme($theme);
+
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }