#632 date widget (basic implementation)

ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.css

@@ -0,0 +1,19 @@
+.date-widget {
+    width: 100%;
+}
+
+.date-widget__invalid .mdl-textfield__input {
+    border-color: #d50000;
+}
+
+.date-widget__invalid .mdl-textfield__label {
+    color: #d50000;
+}
+
+.date-widget__invalid .mdl-textfield__label:after {
+    background-color: #d50000;
+}
+
+.date-widget__invalid .mdl-textfield__error {
+    visibility: visible !important;
+}

ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.html

@@ -0,0 +1,12 @@
+<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label date-widget"
+     [class.date-widget__invalid]="!field.isValid">
+    <input class="mdl-textfield__input"
+           type="text"
+           [attr.id]="field.id"
+           [attr.required]="isRequired()"
+           [(ngModel)]="field.value"
+           (ngModelChange)="checkVisibility(field)"
+           [disabled]="field.readOnly">
+    <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}} (d-M-yyyy)</label>
+    <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
+</div>

ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts

@@ -0,0 +1,52 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ElementRef } from '@angular/core';
+import { WidgetComponent } from './../widget.component';
+
+declare let __moduleName: string;
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'date-widget',
+    templateUrl: './date.widget.html',
+    styleUrls: ['./date.widget.css']
+})
+export class DateWidget extends WidgetComponent {
+
+    constructor(private elementRef: ElementRef) {
+        super();
+    }
+
+    setupMaterialComponents(componentHandler: any): boolean {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+            if (this.elementRef && this.hasValue()) {
+                let el = this.elementRef.nativeElement;
+                let container = el.querySelector('.mdl-textfield');
+                if (container) {
+                    container.MaterialTextfield.change(this.field.value);
+                }
+            }
+
+            return true;
+        }
+        return false;
+    }
+
+}