#755 placeholders support

ng2-components/ng2-activiti-form/index.ts

@@ -32,7 +32,6 @@ import { WIDGET_DIRECTIVES } from './src/components/widgets/index';
 
 export * from './src/components/activiti-form.component';
 export * from './src/components/activiti-start-form.component';
-export * from './src/components/widgets/textfield-widget.component';
 export * from './src/services/form.service';
 export * from './src/components/widgets/index';
 export * from  './src/services/ecm-model.service';

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

@@ -1,5 +1,6 @@
-<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label amount-widget"
+<div class="mdl-textfield mdl-js-textfield amount-widget"
      [class.amount-widget__invalid]="!field.isValid">
+    <label [attr.for]="field.id">{{field.name}}</label>
     <input class="mdl-textfield__input"
            type="text"
            pattern="-?[0-9]*(\.[0-9]+)?"
@@ -7,7 +8,7 @@
            [attr.required]="isRequired()"
            [(ngModel)]="field.value"
            (ngModelChange)="checkVisibility(field)"
-           [disabled]="field.readOnly">
+           [disabled]="field.readOnly"
-    <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}, {{currency}}</label>
+           placeholder="{{field.placeholder}}">
     <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
 </div>

ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.spec.ts

@@ -23,7 +23,7 @@ describe('AmountWidget', () => {
     let widget: AmountWidget;
 
     beforeEach(() => {
-        widget = new AmountWidget(null);
+        widget = new AmountWidget();
     });
 
     it('should setup currentcy from field', () => {

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

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import { Component, ElementRef, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { TextFieldWidgetComponent } from './../textfield-widget.component';
+import { WidgetComponent } from './../widget.component';
 
 @Component({
     moduleId: module.id,
@@ -24,16 +24,12 @@ import { TextFieldWidgetComponent } from './../textfield-widget.component';
     templateUrl: './amount.widget.html',
     styleUrls: ['./amount.widget.css']
 })
-export class AmountWidget extends TextFieldWidgetComponent implements OnInit {
+export class AmountWidget extends WidgetComponent implements OnInit {
 
     static DEFAULT_CURRENCY: string = '$';
 
     currency: string = AmountWidget.DEFAULT_CURRENCY;
 
-    constructor(elementRef: ElementRef) {
-        super(elementRef);
-    }
-
     ngOnInit() {
         if (this.field && this.field.currency) {
             this.currency = this.field.currency;

ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts

@@ -54,6 +54,7 @@ export class FormFieldModel extends FormWidgetModel {
     overrideId: boolean;
     tab: string;
     colspan: number = 1;
+    placeholder: string = null;
     minLength: number = 0;
     maxLength: number = 0;
     minValue: string;
@@ -157,6 +158,10 @@ export class FormFieldModel extends FormWidgetModel {
             this.currency = json.currency;
             this._value = this.parseValue(json);
 
+            if (json.placeholder && json.placeholder !== '' && json.placeholder !== 'null') {
+                this.placeholder = json.placeholder;
+            }
+
             // <container>
             this.numberOfColumns = <number> json.numberOfColumns;
 

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

@@ -1,7 +1,8 @@
 <div class="mdl-grid" *ngIf="field?.isVisible" id="data-widget">
     <div class="mdl-cell mdl-cell--11-col">
-        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label date-widget"
+        <div class="mdl-textfield mdl-js-textfield date-widget"
              [class.date-widget__invalid]="!field.isValid">
+            <label [attr.for]="field.id">{{field.name}}</label>
             <input class="mdl-textfield__input"
                    type="text"
                    [attr.id]="field.id"
@@ -9,8 +10,8 @@
                    [(ngModel)]="field.value"
                    (ngModelChange)="onDateChanged()"
                    (onOk)="onDateSelected()"
-                   [disabled]="field.readOnly">
+                   [disabled]="field.readOnly"
-            <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}} (d-M-yyyy)</label>
+                   placeholder="{{field.placeholder}}">
             <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
         </div>
     </div>

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

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, OnInit, AfterViewChecked } from '@angular/core';
-import { TextFieldWidgetComponent } from './../textfield-widget.component';
+import { WidgetComponent } from './../widget.component';
 
 @Component({
     moduleId: module.id,
@@ -24,14 +24,14 @@ import { TextFieldWidgetComponent } from './../textfield-widget.component';
     templateUrl: './date.widget.html',
     styleUrls: ['./date.widget.css']
 })
-export class DateWidget extends TextFieldWidgetComponent implements OnInit, AfterViewChecked {
+export class DateWidget extends WidgetComponent implements OnInit, AfterViewChecked {
 
     DATE_FORMAT: string = 'D-M-YYYY';
 
     datePicker: any;
 
-    constructor(elementRef: ElementRef) {
+    constructor(private elementRef: ElementRef) {
-        super(elementRef);
+        super();
     }
 
     ngOnInit() {

ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.html

@@ -1,5 +1,6 @@
-<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label functional-group-widget"
+<div class="mdl-textfield mdl-js-textfield functional-group-widget"
      [class.functional-group-widget__invalid]="!field.isValid">
+    <label [attr.for]="field.id">{{field.name}}</label>
     <input class="mdl-textfield__input"
            type="text"
            [attr.id]="field.id"
@@ -7,8 +8,8 @@
            (ngModelChange)="checkVisibility(field)"
            (keyup)="onKeyUp($event)"
            (blur)="onBlur()"
-           [disabled]="field.readOnly">
+           [disabled]="field.readOnly"
-    <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
+           placeholder="{{field.placeholder}}">
     <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
 </div>
 <div class="functional-group-widget--autocomplete mdl-shadow--2dp" *ngIf="popupVisible && groups.length > 0">

ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.html

@@ -1,5 +1,6 @@
-<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label multiline-text-widget"
+<div class="mdl-textfield mdl-js-textfield multiline-text-widget"
      [class.multiline-text-widget__invalid]="!field.isValid">
+    <label [attr.for]="field.id">{{field.name}}</label>
     <textarea class="mdl-textfield__input"
               type="text"
               rows= "3"
@@ -7,9 +8,9 @@
               [attr.required]="isRequired()"
               [(ngModel)]="field.value"
               (ngModelChange)="checkVisibility(field)"
-              [disabled]="field.readOnly">
+              [disabled]="field.readOnly"
+              placeholder="{{field.placeholder}}">
     </textarea>
-    <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
     <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
 </div>
 

ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.spec.ts

@@ -22,7 +22,7 @@ describe('MultilineTextWidget', () => {
     let widget: MultilineTextWidget;
 
     beforeEach(() => {
-        widget = new MultilineTextWidget(null);
+        widget = new MultilineTextWidget();
     });
 
     it('should exist', () => {

ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.ts

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import { Component, ElementRef } from '@angular/core';
+import { Component } from '@angular/core';
-import { TextFieldWidgetComponent } from './../textfield-widget.component';
+import { WidgetComponent } from './../widget.component';
 
 @Component({
     moduleId: module.id,
@@ -24,10 +24,5 @@ import { TextFieldWidgetComponent } from './../textfield-widget.component';
     templateUrl: './multiline-text.widget.html',
     styleUrls: ['./multiline-text.widget.css']
 })
-export class MultilineTextWidget extends TextFieldWidgetComponent {
+export class MultilineTextWidget extends WidgetComponent {
-
-    constructor(elementRef: ElementRef) {
-        super(elementRef);
-    }
-
 }

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

@@ -1,5 +1,6 @@
-<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label number-widget"
+<div class="mdl-textfield mdl-js-textfield number-widget"
      [class.number-widget__invalid]="!field.isValid">
+    <label [attr.for]="field.id">{{field.name}}</label>
     <input class="mdl-textfield__input"
            type="text"
            pattern="-?[0-9]*(\.[0-9]+)?"
@@ -7,7 +8,7 @@
            [attr.required]="isRequired()"
            [(ngModel)]="field.value"
            (ngModelChange)="checkVisibility(field)"
-           [disabled]="field.readOnly">
+           [disabled]="field.readOnly"
-    <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
+           placeholder="{{field.placeholder}}">
     <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
 </div>

ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.spec.ts

@@ -22,7 +22,7 @@ describe('NumberWidget', () => {
     let widget: NumberWidget;
 
     beforeEach(() => {
-        widget = new NumberWidget(null);
+        widget = new NumberWidget();
     });
 
     it('should exist', () => {

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

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import { Component, ElementRef } from '@angular/core';
+import { Component } from '@angular/core';
-import { TextFieldWidgetComponent } from './../textfield-widget.component';
+import { WidgetComponent } from './../widget.component';
 
 @Component({
     moduleId: module.id,
@@ -24,10 +24,5 @@ import { TextFieldWidgetComponent } from './../textfield-widget.component';
     templateUrl: './number.widget.html',
     styleUrls: ['./number.widget.css']
 })
-export class NumberWidget extends TextFieldWidgetComponent {
+export class NumberWidget extends WidgetComponent {
-
-    constructor(elementRef: ElementRef) {
-        super(elementRef);
-    }
-
 }

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

@@ -1,5 +1,6 @@
-<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label people-widget"
+<div class="mdl-textfield mdl-js-textfield people-widget"
      [class.people-widget__invalid]="!field.isValid">
+    <label [attr.for]="field.id">{{field.name}}</label>
     <input class="mdl-textfield__input"
            type="text"
            [attr.id]="field.id"
@@ -7,8 +8,8 @@
            (ngModelChange)="checkVisibility(field)"
            (keyup)="onKeyUp($event)"
            (blur)="onBlur()"
-           [disabled]="field.readOnly">
+           [disabled]="field.readOnly"
-    <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
+           placeholder="{{field.placeholder}}">
     <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
 </div>
 <div class="people-widget--autocomplete mdl-shadow--2dp" *ngIf="popupVisible && users.length > 0">

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

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

ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.spec.ts

@@ -15,20 +15,15 @@
  * limitations under the License.
  */
 
-import { ElementRef } from '@angular/core';
 import { TextWidget } from './text.widget';
-import { FormFieldModel } from './../core/form-field.model';
-import { FormFieldTypes } from '../core/form-field-types';
 
 describe('TextWidget', () => {
 
     let widget: TextWidget;
-    let elementRef: ElementRef;
     let componentHandler;
 
     beforeEach(() => {
-        elementRef = new ElementRef(null);
+        widget = new TextWidget();
-        widget = new TextWidget(elementRef);
 
         componentHandler =  jasmine.createSpyObj('componentHandler', [
             'upgradeAllRegistered'
@@ -37,32 +32,4 @@ describe('TextWidget', () => {
         window['componentHandler'] = componentHandler;
     });
 
-    it('should upgrade material textfield', () => {
-        spyOn(widget, 'setupMaterialTextField').and.stub();
-
-        widget.field = new FormFieldModel(null, {
-            type: FormFieldTypes.TEXT,
-            value: '<text>'
-        });
-        widget.ngAfterViewInit();
-        expect(widget.setupMaterialTextField).toHaveBeenCalled();
-    });
-
-    it('should require mdl component handler to setup textfield', () => {
-        expect(widget.setupMaterialComponents(null)).toBeFalsy();
-    });
-
-    it('should require element reference to setup textfield', () => {
-        widget = new TextWidget(null);
-        expect(widget.setupMaterialComponents(componentHandler)).toBeFalsy();
-    });
-
-    it('should require field value to setup textfield', () => {
-        widget.field = new FormFieldModel(null, {
-            type: FormFieldTypes.TEXT,
-            value: null
-        });
-        expect(widget.setupMaterialComponents(componentHandler)).toBeFalsy();
-    });
-
 });

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

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import { Component, ElementRef } from '@angular/core';
+import { Component } from '@angular/core';
-import { TextFieldWidgetComponent } from './../textfield-widget.component';
+import { WidgetComponent } from './../widget.component';
 
 @Component({
     moduleId: module.id,
@@ -24,10 +24,5 @@ import { TextFieldWidgetComponent } from './../textfield-widget.component';
     templateUrl: './text.widget.html',
     styleUrls: ['./text.widget.css']
 })
-export class TextWidget extends TextFieldWidgetComponent {
+export class TextWidget extends WidgetComponent {
-
-    constructor(elementRef: ElementRef) {
-        super(elementRef);
-    }
-
 }

ng2-components/ng2-activiti-form/src/components/widgets/textfield-widget.component.ts

@@ -1,41 +0,0 @@
-/*!
- * @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 { ElementRef } from '@angular/core';
-import { WidgetComponent } from './widget.component';
-
-export abstract class TextFieldWidgetComponent extends WidgetComponent {
-
-    protected elementRef: ElementRef;
-
-    constructor(elementRef: ElementRef) {
-        super();
-        this.elementRef = elementRef;
-    }
-
-    setupMaterialComponents(handler: any): boolean {
-        super.setupMaterialComponents(handler);
-        // workaround for MDL issues with dynamic components
-        if (handler) {
-            if (this.elementRef && this.hasValue()) {
-                return this.setupMaterialTextField(this.elementRef, handler, this.field.value.toString());
-            }
-        }
-        return false;
-    }
-
-}

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

@@ -1,14 +1,15 @@
-<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label typeahead-widget"
+<div class="mdl-textfield mdl-js-textfield typeahead-widget"
      [class.is-dirty]="value"
      [class.typeahead-widget__invalid]="!field.isValid" id="typehead-div" *ngIf="field.isVisible">
+    <label [attr.for]="field.id">{{field.name}}</label>
     <input class="mdl-textfield__input"
            type="text"
            [attr.id]="field.id"
            [(ngModel)]="value"
            (keyup)="onKeyUp($event)"
            (blur)="onBlur()"
-           [disabled]="field.readOnly">
+           [disabled]="field.readOnly"
-    <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
+           placeholder="{{field.placeholder}}">
     <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
 </div>
 <div class="typeahead-autocomplete mdl-shadow--2dp" *ngIf="options.length > 0 && popupVisible">