[ADF - 334] Added prefix to amount widget (#2031)

[ADF - 334] added material design prefix to amount widget

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

@@ -16,7 +16,7 @@
  */
 
 import { NgModule, ModuleWithProviders } from '@angular/core';
-import { MdCheckboxModule, MdTabsModule, MdCardModule, MdButtonModule, MdIconModule, MdSlideToggleModule } from '@angular/material';
+import { MdCheckboxModule, MdTabsModule, MdCardModule, MdButtonModule, MdIconModule, MdSlideToggleModule, MdInputModule } from '@angular/material';
 import { CoreModule } from 'ng2-alfresco-core';
 
 import { ActivitiForm } from './src/components/activiti-form.component';
@@ -71,7 +71,8 @@ export const ACTIVITI_FORM_PROVIDERS: any[] = [
         MdCardModule,
         MdButtonModule,
         MdIconModule,
-        MdSlideToggleModule
+        MdSlideToggleModule,
+        MdInputModule
     ],
     declarations: [
         ...ACTIVITI_FORM_DIRECTIVES,
@@ -90,7 +91,8 @@ export const ACTIVITI_FORM_PROVIDERS: any[] = [
         MdCardModule,
         MdButtonModule,
         MdIconModule,
-        MdSlideToggleModule
+        MdSlideToggleModule,
+        MdInputModule
     ]
 })
 export class ActivitiFormModule {

ng2-components/ng2-activiti-form/src/components/activiti-start-form.component.spec.ts

@@ -30,6 +30,7 @@ import { EcmModelService } from './../services/ecm-model.service';
 import { WidgetVisibilityService } from './../services/widget-visibility.service';
 import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
 import { TranslationMock } from './../assets/translation.service.mock';
+import { MdInputModule } from '@angular/material';
 
 describe('ActivitiStartForm', () => {
 
@@ -46,6 +47,7 @@ describe('ActivitiStartForm', () => {
         TestBed.configureTestingModule({
             imports: [
                 MdTabsModule,
+                MdInputModule,
                 CoreModule.forRoot()],
             declarations: [
                 ActivitiStartForm,

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

@@ -2,6 +2,56 @@
     width: 100%;
 }
 
+.amount-widget__container {
+    position: relative;
+    font-size: 16px;
+    display: inline-block;
+    box-sizing: border-box;
+    width: 300px;
+    max-width: 100%;
+    margin: 0;
+    padding: 20px 0;
+}
+
+.adf-amount-widget {
+    vertical-align: baseline !important;
+}
+
+.adf-amount-widget__prefix-spacing {
+    padding-right: 5px;
+}
+
+:host() .amount-widget__input {
+    width: 100%;
+}
+
+.amount-widget__input .mat-focused {
+    transition: none;
+}
+
+.amount-widget__error_message {
+    color: #d50000;
+    position: absolute;
+    font-size: 12px;
+    margin-top: 3px;
+    display: block;
+    padding-top: 3px;
+}
+
+md-input-container >>> .mat-input-wrapper {
+    margin-top: 0px;
+    padding-top: 4px;
+}
+
+md-input-container >>> .mat-input-ripple {
+    transition: none;
+    visibility: hidden;
+}
+
+md-input-container.mat-focused >>> .mat-input-underline .mat-input-ripple {
+    visibility: hidden;
+    transition: none;
+}
 
 .amount-widget__invalid .mdl-textfield__input {
     border-color: #d50000;
@@ -14,7 +64,3 @@
 .amount-widget__invalid .mdl-textfield__label:after {
     background-color: #d50000;
 }
-
-.amount-widget__invalid .mdl-textfield__error {
-    visibility: visible !important;
-}

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

@@ -1,14 +1,21 @@
-<div class="mdl-textfield mdl-js-textfield amount-widget {{field.className}}"
+<div class="amount-widget__container amount-widget {{field.className}}"
      [class.amount-widget__invalid]="!field.isValid">
-    <label [attr.for]="field.id">{{field.name}}, {{currency}}<span *ngIf="isRequired()">*</span></label>
+    <div>
-    <input class="mdl-textfield__input"
+        <label>{{field.name}} <span *ngIf="isRequired()">*</span></label>
-           type="text"
+    </div>
-           [attr.id]="field.id"
+    <md-input-container floatPlaceholder="never" class="amount-widget__input">
-           [attr.required]="isRequired()"
+        <span mdPrefix class="adf-amount-widget__prefix-spacing"> {{currency }}</span>
-           [value]="field.value"
+        <input mdInput
-           [(ngModel)]="field.value"
+                class="adf-amount-widget"
-           (ngModelChange)="checkVisibility(field)"
+                type="text"
-           [disabled]="field.readOnly"
+                [attr.id]="field.id"
-           placeholder="{{field.placeholder}}">
+                [attr.required]="isRequired()"
-    <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
+                [value]="field.value"
+                [(ngModel)]="field.value"
+                (ngModelChange)="checkVisibility(field)"
+                [disabled]="field.readOnly"
+                placeholder="{{field.placeholder}}">
+        <span *ngIf="field.validationSummary" class="amount-widget__error_message">{{field.validationSummary}}</span>
+    </md-input-container>
 </div>
+

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

@@ -22,6 +22,7 @@ import { CoreModule } from 'ng2-alfresco-core';
 import { FormService } from './../../../services/form.service';
 import { EcmModelService } from './../../../services/ecm-model.service';
 import { ActivitiAlfrescoContentService } from '../../../services/activiti-alfresco.service';
+import { MdInputModule } from '@angular/material';
 
 describe('AmountWidget', () => {
 
@@ -31,7 +32,8 @@ describe('AmountWidget', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
-                CoreModule.forRoot()
+                CoreModule.forRoot(),
+                MdInputModule
             ],
             declarations: [
                 AmountWidget

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

@@ -25,7 +25,7 @@ import { MASK_DIRECTIVE } from '../index';
 import { FormFieldComponent } from './../../form-field/form-field.component';
 import { ActivitiContent } from './../../activiti-content.component';
 import { fakeFormJson } from '../../../services/assets/widget-visibility.service.mock';
-import { MdTabsModule } from '@angular/material';
+import { MdTabsModule, MdInputModule } from '@angular/material';
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { CoreModule } from 'ng2-alfresco-core';
 import { FormService } from './../../../services/form.service';
@@ -45,7 +45,8 @@ describe('ContainerWidget', () => {
         TestBed.configureTestingModule({
             imports: [
                 CoreModule.forRoot(),
-                MdTabsModule
+                MdTabsModule,
+                MdInputModule
             ],
             declarations: [FormFieldComponent, ActivitiContent, WIDGET_DIRECTIVES, MASK_DIRECTIVE],
             providers: [

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

@@ -26,7 +26,7 @@ import { MASK_DIRECTIVE } from '../index';
 import { FormFieldComponent } from './../../form-field/form-field.component';
 import { ActivitiContent } from './../../activiti-content.component';
 import { CoreModule } from 'ng2-alfresco-core';
-import { MdTabsModule } from '@angular/material';
+import { MdTabsModule, MdInputModule } from '@angular/material';
 
 describe('TabsWidget', () => {
 
@@ -105,7 +105,7 @@ describe('TabsWidget', () => {
 
         beforeEach(async(() => {
             TestBed.configureTestingModule({
-                imports: [CoreModule, MdTabsModule],
+                imports: [CoreModule, MdTabsModule, MdInputModule],
                 declarations: [FormFieldComponent, ActivitiContent, WIDGET_DIRECTIVES, MASK_DIRECTIVE]
             }).compileComponents().then(() => {
                 fixture = TestBed.createComponent(TabsWidget);