[ADF-852] Form style Material 2 (#2151)

* mdl2 transition part form 1

* hyperlink

* radio buttons

* label

* people component

* [ADF-852] moved textarea to new angular material

* number widget

* change error multiline

* [ADF-852] added md desgin for dropdown

* [ADF-852] removed unused css file

* functional widget

* error dropdown

* [ADF-852] - changed to new md date

* remove md-date-time-picker dependency in ng2-alfresco-from

* [ADF-852] conversion dynamic table phase 1

* container widget

* remove test unused

* validation change

* [ADF-852] convert dynamic table phase 2

* [ADF-852] improving style and fixing bugs

* move custom style for form in form.scss

* error footer refactor

* fix models and test

* [ADF-852]- fixed minor twitch on dynamic table

* align fields and fix tests dropdown

* disabling button in readonly
clean mdl form start process form

* align dropdown

* [ADF-1048] Upload widget can manage multiple files. (#2134)

* [ADF-1048] improving upload widget

* [ADF-1048] added ability to upload multiple file on upload widget

* [ADF-1048] added multiple upload elements on upload widget

* [ADF-1048] - show all the files on the completed form

* [ADF-1048] fixed wrong selecion on displya upload

* [ADF-1048] removed fdescribe from upload widget

* date validation and custom moment data adapter

* move content widget in the widget folder

* add style fields and theming

* color primary radio and checkbox

* fix amount widget and colors

* change ViewEncapsulation and fix date style button issue

* empty form customization 1736

* focus label style

* [ADF-224] fix the rendering of custom stencils when form is opened in readonly state. (#2161)

* [ADF-224] Fixed rendering of custom stencil in readonly mode

* [ADF-224] improved variable name

* test fix

* container filter in form model creation

* show display value correctly

* fix change date and test

* fix date editor and add some test coverage for date

* style minor issue

* fix new unused local import rule

* fix test date

* strict date check

* fix analytics failing test

* restore null as default in model

* unify model diagrams and analytics

ng2-components/ng2-activiti-form/src/components/form.component.html

@@ -1,52 +1,51 @@
-<div>
-    <div *ngIf="!hasForm()">
-        <h3 class="activiti-task-title">Please select a Task</h3>
-    </div>
-    <div *ngIf="hasForm()" class="{{form.className}}">
-        <md-card>
-            <md-card-header>
-                <md-card-title>
-                    <h4 *ngIf="isTitleEnabled()">
-                        <div *ngIf="showRefreshButton" class="activiti-form-reload-button">
-                            <button md-icon-button (click)="onRefreshClicked()">
-                                <md-icon>refresh</md-icon>
-                            </button>
-                        </div>
-                        <md-icon>{{ form.isValid ? 'event_available' : 'event_busy' }}</md-icon>
-                        <span>{{form.taskName}}</span>
-
-                    </h4>
-                </md-card-title>
-            </md-card-header>
-            <md-card-content>
-                <div *ngIf="form.hasTabs()">
-                    <tabs-widget [tabs]="form.tabs" (formTabChanged)="checkVisibility($event);"></tabs-widget>
-                </div>
-
-                <div *ngIf="!form.hasTabs() && form.hasFields()">
-                    <div *ngFor="let field of form.fields">
-                        <form-field [field]="field.field"></form-field>
+<div *ngIf="!hasForm()">
+    <ng-content select="[empty-form]">
+    </ng-content>
+</div>
+<div *ngIf="hasForm()" class="{{form.className}}">
+    <md-card>
+        <md-card-header>
+            <md-card-title>
+                <h4 *ngIf="isTitleEnabled()">
+                    <div *ngIf="showRefreshButton" class="adf-form-reload-button">
+                        <button md-icon-button (click)="onRefreshClicked()">
+                            <md-icon>refresh</md-icon>
+                        </button>
                     </div>
+                    <md-icon>{{ form.isValid ? 'event_available' : 'event_busy' }}</md-icon>
+                    <span>{{form.taskName}}</span>
+
+                </h4>
+            </md-card-title>
+        </md-card-header>
+        <md-card-content>
+            <div *ngIf="form.hasTabs()">
+                <tabs-widget [tabs]="form.tabs" (formTabChanged)="checkVisibility($event);"></tabs-widget>
+            </div>
+
+            <div *ngIf="!form.hasTabs() && form.hasFields()">
+                <div *ngFor="let field of form.fields">
+                    <form-field [field]="field.field"></form-field>
                 </div>
-            </md-card-content>
-            <md-card-actions *ngIf="form.hasOutcomes()">
-                <!--[class.mdl-button--colored]="!outcome.isSystem"-->
-                <button *ngFor="let outcome of form.outcomes"
-                        md-button
-                        [disabled]="!isOutcomeButtonEnabled(outcome)"
-                        [class.activiti-form-hide-button]="!isOutcomeButtonVisible(outcome, form.readOnly)"
-                        (click)="onOutcomeClicked(outcome, $event)">
-                    {{outcome.name | uppercase}}
-                </button>
-            </md-card-actions>
-        </md-card>
-    </div>
+            </div>
+        </md-card-content>
+        <md-card-actions *ngIf="form.hasOutcomes()">
+            <!--[class.mdl-button--colored]="!outcome.isSystem"-->
+            <button *ngFor="let outcome of form.outcomes"
+                    md-button
+                    [disabled]="!isOutcomeButtonEnabled(outcome)"
+                    [class.adf-form-hide-button]="!isOutcomeButtonVisible(outcome, form.readOnly)"
+                    (click)="onOutcomeClicked(outcome, $event)">
+                {{outcome.name | uppercase}}
+            </button>
+        </md-card-actions>
+    </md-card>
 </div>
 <!--
 For debugging and data visualisation purposes,
 will be removed during future revisions
 -->
-<div *ngIf="showDebugButton" class="activiti-form-debug-container">
+<div *ngIf="showDebugButton" class="adf-form-debug-container">
     <md-slide-toggle [(ngModel)]="debugMode">Debug mode</md-slide-toggle>
     <div *ngIf="debugMode && hasForm()">
         <h4>Values</h4>