Feat/aot dev app

.circleci/config.yml

@@ -31,6 +31,12 @@ var_6: &save_cache
 var_7: &yarn_install
     run: yarn install --frozen-lockfile --non-interactive
 
+var_8: &attach_release_output
+    attach_workspace:
+        at: dist/
+
+var_9: &release_path "releases/**/*"
+
 attach_options: &attach_options
     at: .
 
@@ -59,18 +65,37 @@ jobs:
         steps:
             - attach_workspace: *attach_options
             - run: yarn run build:lib
+            - persist_to_workspace:
+                  root: dist
+                  paths:
+                      - *release_path
 
     build_cdk:
         <<: *job_defaults
         steps:
             - attach_workspace: *attach_options
             - run: yarn run build:cdk
+            - persist_to_workspace:
+                  root: dist
+                  paths:
+                      - *release_path
 
     build_mosaic-moment-adapter:
         <<: *job_defaults
         steps:
             - attach_workspace: *attach_options
             - run: yarn run build:mosaic-moment-adapter
+            - persist_to_workspace:
+                  root: dist
+                  paths:
+                      - *release_path
+
+    build_dev_app_aot:
+        <<: *job_defaults
+        steps:
+            - *attach_release_output
+            - attach_workspace: *attach_options
+            - run: yarn run ci:aot
 
     test_unit:
         <<: *job_defaults
@@ -133,6 +158,12 @@ workflows:
                       - build_cdk
                       - build_mosaic
                       - build_mosaic-moment-adapter
+            - build_dev_app_aot:
+                  requires:
+                      - test_unit
+                      - build_cdk
+                      - build_mosaic
+                      - build_mosaic-moment-adapter
             - snapshot_publish:
                   requires:
                       - test_unit

package.json

@@ -44,6 +44,7 @@
         "@ptsecurity/commitlint-config": "^0.2.1",
         "@ptsecurity/tslint-config": "^0.10.1",
         "@schematics/angular": "7.1.4",
+        "@types/browser-sync": "^0.0.42",
         "@types/chalk": "^2.2.0",
         "@types/fs-extra": "^5.0.4",
         "@types/glob": "^5.0.36",
@@ -56,6 +57,7 @@
         "angular2-template-loader": "^0.6.2",
         "autoprefixer": "^9.4.2",
         "awesome-typescript-loader": "^5.2.1",
+        "browser-sync": "^2.26.3",
         "chalk": "^2.4.1",
         "conventional-changelog": "^3.0.5",
         "dgeni": "^0.4.10",
@@ -80,6 +82,7 @@
         "gulp-transform": "^2.0.0",
         "gulp-util": "^3.0.8",
         "highlight.js": "^9.13.1",
+        "http-rewrite-middleware": "^0.1.6",
         "html-webpack-plugin": "^3.2.0",
         "husky": "^1.3.1",
         "inquirer": "^6.2.1",
@@ -130,6 +133,9 @@
         "webpack-dev-server": "^3.1.9"
     },
     "scripts": {
+        "serve:dev-app": "gulp serve:devapp",
+        "ci:aot": "gulp ci:aot",
+        "build-dev-app:aot": "gulp build-aot",
         "test:unit": "gulp ci:test",
         "valid:lic": "gulp validate-licenses",
         "build:cdk": "gulp cdk:build-release",

src/dev-app/button/button-demo.html

@@ -0,0 +1,115 @@
+<div>
+    <button mc-icon-button>
+        <i mc-icon="mc-angle-down-L_16"></i>
+    </button>&nbsp;
+
+    <button mc-icon-button>
+        <i mc-icon="mc-play_16"></i>
+        default
+    </button>&nbsp;
+
+    <button mc-icon-button>
+        default
+        <i mc-icon="mc-angle-down-L_16"></i>
+    </button>&nbsp;
+
+    <button mc-icon-button>
+        <i mc-icon="mc-play_16"></i>
+        default
+        <i mc-icon="mc-angle-down-L_16"></i>
+    </button>&nbsp;
+
+    <br>
+    <br>
+
+    <span class="mc-button-group">
+        <button mc-button>default</button>
+        <button mc-icon-button><i mc-icon="mc-angle-down-L_16"></i></button>&nbsp;
+    </span>
+
+    <br>
+    <br>
+
+    <span class="mc-button-group">
+        <button mc-button>default</button>
+        <button mc-button>default</button>
+        <button mc-button>default</button>
+        <button mc-icon-button><i mc-icon="mc-angle-down-L_16"></i></button>
+    </span>
+
+    <br>
+    <br>
+
+    <span class="mc-button-group mc-button-group_justified">
+        <button mc-button>default</button>
+        <button mc-button color="primary">default</button>
+        <button mc-button color="error">default</button>
+        <button mc-icon-button><i mc-icon="mc-angle-down-L_16"></i></button>
+    </span>
+
+    <br>
+    <br>
+
+    <span class="mc-button-group_vertical">
+        <button mc-button>default</button>
+        <button mc-button color="primary">default</button>
+        <button mc-button color="error">default</button>
+        <button mc-icon-button><i mc-icon="mc-angle-down-L_16"></i></button>
+    </span>
+
+    <br>
+    <br>
+
+    <button mc-icon-button color="primary" disabled><i mc-icon="mc-play_16"></i>disabled</button>&nbsp;
+    <button mc-icon-button color="primary"><i mc-icon="mc-play_16"></i>normal</button>&nbsp;
+    <button class="mc-hover" mc-icon-button color="primary"><i mc-icon="mc-play_16"></i>hover</button>&nbsp;
+    <button class="mc-active" mc-icon-button color="primary"><i mc-icon="mc-play_16"></i>pressed</button>&nbsp;
+    <button class="cdk-keyboard-focused" mc-icon-button color="primary"><i mc-icon="mc-play_16"></i>focus</button>&nbsp;
+
+    <br>
+    <br>
+
+    <button class="mc-progress" mc-icon-button color="primary" disabled><i mc-icon="mc-play_16"></i>disabled</button>&nbsp;
+    <button class="mc-progress" mc-icon-button color="primary"><i mc-icon="mc-play_16"></i>normal</button>&nbsp;
+    <button class="mc-hover mc-progress" mc-icon-button color="primary"><i mc-icon="mc-play_16"></i>hover</button>&nbsp;
+    <button class="mc-active mc-progress" mc-icon-button color="primary"><i mc-icon="mc-play_16"></i>pressed</button>&nbsp;
+    <button class="cdk-keyboard-focused mc-progress" mc-icon-button color="primary"><i mc-icon="mc-play_16"></i>focus</button>&nbsp;
+
+    <br>
+    <br>
+    <br>
+
+    <button mc-icon-button color="second" disabled><i mc-icon="mc-play_16"></i>disabled</button>&nbsp;
+    <button mc-icon-button color="second"><i mc-icon="mc-play_16"></i>normal</button>&nbsp;
+    <button class="mc-hover" mc-icon-button color="second"><i mc-icon="mc-play_16"></i>hover</button>&nbsp;
+    <button class="mc-active" mc-icon-button color="second"><i mc-icon="mc-play_16"></i>pressed</button>&nbsp;
+    <button class="cdk-keyboard-focused" mc-icon-button color="second"><i mc-icon="mc-play_16"></i>focus</button>&nbsp;
+
+    <br>
+    <br>
+
+    <button class="mc-progress" mc-icon-button color="second" disabled><i mc-icon="mc-play_16"></i>disabled</button>&nbsp;
+    <button class="mc-progress" mc-icon-button color="second"><i mc-icon="mc-play_16"></i>normal</button>&nbsp;
+    <button class="mc-hover mc-progress" mc-icon-button color="second"><i mc-icon="mc-play_16"></i>hover</button>&nbsp;
+    <button class="mc-active mc-progress" mc-icon-button color="second"><i mc-icon="mc-play_16"></i>pressed</button>&nbsp;
+    <button class="cdk-keyboard-focused mc-progress" mc-icon-button color="second"><i mc-icon="mc-play_16"></i>focus</button>&nbsp;
+
+    <br>
+    <br>
+    <br>
+
+    <button mc-icon-button color="error" disabled><i mc-icon="mc-play_16"></i>disabled</button>&nbsp;
+    <button mc-icon-button color="error"><i mc-icon="mc-play_16"></i>normal</button>&nbsp;
+    <button class="mc-hover" mc-icon-button color="error"><i mc-icon="mc-play_16"></i>hover</button>&nbsp;
+    <button class="mc-active" mc-icon-button color="error"><i mc-icon="mc-play_16"></i>pressed</button>&nbsp;
+    <button class="cdk-keyboard-focused" mc-icon-button color="error"><i mc-icon="mc-play_16"></i>focus</button>&nbsp;
+
+    <br>
+    <br>
+
+    <button class="mc-progress" mc-icon-button color="error" disabled><i mc-icon="mc-play_16"></i>disabled</button>&nbsp;
+    <button class="mc-progress" mc-icon-button color="error"><i mc-icon="mc-play_16"></i>normal</button>&nbsp;
+    <button class="mc-hover mc-progress" mc-icon-button color="error"><i mc-icon="mc-play_16"></i>hover</button>&nbsp;
+    <button class="mc-active mc-progress" mc-icon-button color="error"><i mc-icon="mc-play_16"></i>pressed</button>&nbsp;
+    <button class="cdk-keyboard-focused mc-progress" mc-icon-button color="error"><i mc-icon="mc-play_16"></i>focus</button>&nbsp;
+</div>

src/dev-app/button/button-demo.scss

@@ -0,0 +1,3 @@
+.mc-button-group_vertical {
+    width: 200px;
+}

src/dev-app/button/button-demo.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+
+@Component({
+    selector: 'button-demo',
+    templateUrl: 'button-demo.html',
+    styleUrls: ['button-demo.css']
+})
+export class ButtonDemo {
+    isDisabled: boolean = false;
+    clickCounter: number = 0;
+    toggleDisable: boolean = false;
+}

src/dev-app/datepicker/datepicker-demo.html

@@ -0,0 +1,85 @@
+<div class="container">
+    <label>Default datepicker toggle</label>
+    <mc-form-field>
+        <input mcInput [(ngModel)]="date" [mcDatepicker]="myDatepicker1" />
+        <mc-datepicker-toggle tabindex="7" mcSuffix [for]="myDatepicker1"></mc-datepicker-toggle>
+        <mc-datepicker #myDatepicker1></mc-datepicker>
+    </mc-form-field>
+
+    <br/>
+    <br/>
+
+    <label>Datepicker toggle with custom icon</label>
+    <mc-form-field>
+        <input mcInput [mcDatepicker]="myDatepicker2" />
+        <mc-datepicker-toggle mcSuffix [for]="myDatepicker2">
+            <i mc-icon="mc-angle-down-M_16" mcDatepickerToggleIcon></i>
+        </mc-datepicker-toggle>
+        <mc-datepicker #myDatepicker2></mc-datepicker>
+    </mc-form-field>
+
+    <br/>
+    <br/>
+
+    <label>Datepicker with multi year view</label>
+    <mc-form-field>
+        <input mcInput [mcDatepicker]="myDatepicker3" />
+        <mc-datepicker-toggle mcSuffix [for]="myDatepicker3">
+            <i mc-icon="mc-angle-down-M_16" mcDatepickerToggleIcon></i>
+        </mc-datepicker-toggle>
+        <mc-datepicker #myDatepicker3 startView="multi-year"></mc-datepicker>
+    </mc-form-field>
+
+    <br/>
+    <br/>
+
+    <label>Datepicker disabled</label>
+    <mc-form-field>
+        <input mcInput [mcDatepicker]="myDatepicker4" />
+        <mc-datepicker-toggle mcSuffix [for]="myDatepicker4">
+            <i mc-icon="mc-angle-down-M_16" mcDatepickerToggleIcon></i>
+        </mc-datepicker-toggle>
+        <mc-datepicker disabled #myDatepicker4 startView="multi-year"></mc-datepicker>
+    </mc-form-field>
+
+    <br/>
+    <br/>
+
+    <label>Datepicker with disabled input</label>
+    <mc-form-field>
+        <input mcInput [mcDatepicker]="myDatepicker5" disabled/>
+        <mc-datepicker-toggle mcSuffix [for]="myDatepicker5">
+            <i mc-icon="mc-angle-down-M_16" mcDatepickerToggleIcon></i>
+        </mc-datepicker-toggle>
+        <mc-datepicker #myDatepicker5 ></mc-datepicker>
+    </mc-form-field>
+
+    <br/>
+    <br/>
+
+    <label>Datepicker with readonly input</label>
+    <mc-form-field>
+        <input mcInput [mcDatepicker]="myDatepicker6" readonly/>
+        <mc-datepicker-toggle mcSuffix [for]="myDatepicker6">
+            <i mc-icon="mc-angle-down-M_16" mcDatepickerToggleIcon></i>
+        </mc-datepicker-toggle>
+        <mc-datepicker #myDatepicker6 ></mc-datepicker>
+    </mc-form-field>
+
+    <br/>
+    <br/>
+
+    <label>Datepicker with some dates disabled</label>
+    <mc-form-field>
+        <input mcInput
+               [mcDatepicker]="myDatepicker7"
+               [mcDatepickerFilter]="myFilter"
+               [min]="minDate"
+               [max]="maxDate"/>
+        <mc-datepicker-toggle mcSuffix [for]="myDatepicker7">
+            <i mc-icon="mc-angle-down-M_16" mcDatepickerToggleIcon></i>
+        </mc-datepicker-toggle>
+        <mc-datepicker #myDatepicker7></mc-datepicker>
+    </mc-form-field>
+
+</div>

src/dev-app/datepicker/datepicker-demo.scss

@@ -0,0 +1,3 @@
+.container {
+    max-width: 200px;
+}

src/dev-app/datepicker/datepicker-demo.ts

@@ -0,0 +1,32 @@
+// tslint:disable:no-console
+// tslint:disable:no-magic-numbers
+import { Component } from '@angular/core';
+
+// Depending on whether rollup is used, moment needs to be imported differently.
+// Since Moment.js doesn't have a default export, we normally need to import using the `* as`
+// syntax. However, rollup creates a synthetic default module and we thus need to import it using
+// the `default as` syntax.
+// tslint:disable-next-line:ordered-imports
+import * as _moment from 'moment';
+// tslint:disable-next-line:no-duplicate-imports
+import { default as _rollupMoment, Moment } from 'moment';
+
+
+const moment = _rollupMoment || _moment;
+
+@Component({
+    selector: 'datepicker-demo',
+    templateUrl: 'datepicker-demo.html',
+    styleUrls: ['datepicker-demo.css'],
+})
+export class DatepickerDemo {
+    date = moment([2019, 0, 24]);
+    minDate = moment([2015, 0, 1]);
+    maxDate = moment([2020, 0, 1]);
+
+    myFilter(date: Moment): boolean {
+        const day = date.day();
+
+        return day !== 0 && day !== 6;
+    }
+}