[ADF-1384] fix placeholder overlapping with label in form (#2212)

* fix placeholder overlapping with label in form

* fix import material module

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

@@ -17,14 +17,12 @@
 
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { HttpModule } from '@angular/http';
-import { MdAutocompleteModule, MdButtonModule, MdCardModule, MdCheckboxModule,
-    MdDatepickerModule, MdGridListModule, MdIconModule, MdInputModule, MdListModule,
-    MdOptionModule, MdRadioModule, MdSelectModule, MdSlideToggleModule, MdTableModule, MdTabsModule } from '@angular/material';
 import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
 import { FormFieldComponent } from './src/components/form-field/form-field.component';
 import { FormListComponent } from './src/components/form-list.component';
 import { FormComponent } from './src/components/form.component';
+import { MaterialModule } from './src/components/material.module';
 import { StartFormComponent } from './src/components/start-form.component';
 import { ContentWidgetComponent } from './src/components/widgets/content/content.widget';
 import { MASK_DIRECTIVE, WIDGET_DIRECTIVES } from './src/components/widgets/index';
@@ -82,18 +80,12 @@ export const ACTIVITI_FORM_PROVIDERS: any[] = [
     FormRenderingService
 ];
 
-export const MATERIAL_MODULE: any[] = [
-    MdAutocompleteModule, MdButtonModule, MdCardModule, MdCheckboxModule,
-    MdDatepickerModule, MdGridListModule, MdIconModule, MdInputModule, MdRadioModule,
-    MdSelectModule, MdSlideToggleModule, MdTableModule, MdTabsModule, MdOptionModule, MdListModule
-];
-
 @NgModule({
     imports: [
         CoreModule,
         DataTableModule,
         HttpModule,
-        ...MATERIAL_MODULE
+        MaterialModule
     ],
     declarations: [
         ...ACTIVITI_FORM_DIRECTIVES,
@@ -117,7 +109,7 @@ export const MATERIAL_MODULE: any[] = [
     exports: [
         ...ACTIVITI_FORM_DIRECTIVES,
         ...DEPRECATED_FORM_DIRECTIVES,
-        ...MATERIAL_MODULE
+        MaterialModule
     ]
 })
 export class ActivitiFormModule {

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

@@ -20,10 +20,10 @@ import { By } from '@angular/platform-browser';
 import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';
 import { Observable } from 'rxjs/Rx';
-import { MATERIAL_MODULE } from '../../index';
 import { EcmModelService } from '../services/ecm-model.service';
 import { FormService } from '../services/form.service';
 import { FormListComponent } from './form-list.component';
+import { MaterialModule } from './material.module';
 
 describe('TaskAttachmentList', () => {
 
@@ -36,7 +36,7 @@ describe('TaskAttachmentList', () => {
             imports: [
                 CoreModule.forRoot(),
                 DataTableModule,
-                MATERIAL_MODULE
+                MaterialModule
             ],
             declarations: [
                 FormListComponent

ng2-components/ng2-activiti-form/src/components/material.module.ts

@@ -0,0 +1,41 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import {
+    MD_PLACEHOLDER_GLOBAL_OPTIONS, MdAutocompleteModule, MdButtonModule, MdCardModule,
+    MdCheckboxModule, MdDatepickerModule, MdGridListModule, MdIconModule, MdInputModule,
+    MdListModule, MdOptionModule, MdRadioModule, MdSelectModule, MdSlideToggleModule, MdTableModule,
+    MdTabsModule
+} from '@angular/material';
+
+export function modules() {
+    return [
+        MdAutocompleteModule, MdButtonModule, MdCardModule, MdCheckboxModule,
+        MdDatepickerModule, MdGridListModule, MdIconModule, MdInputModule, MdListModule,
+        MdOptionModule, MdRadioModule, MdSelectModule, MdSlideToggleModule, MdTableModule, MdTabsModule
+    ];
+}
+
+@NgModule({
+    providers: [
+        {provide: MD_PLACEHOLDER_GLOBAL_OPTIONS, useValue: { float: 'never' }}
+    ],
+    imports: modules(),
+    exports: modules()
+})
+export class MaterialModule {}

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

@@ -19,12 +19,12 @@ import { SimpleChange } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
 import { Observable } from 'rxjs/Rx';
-import { MATERIAL_MODULE } from '../../index';
 import { TranslationMock } from './../assets/translation.service.mock';
 import { EcmModelService } from './../services/ecm-model.service';
 import { FormService } from './../services/form.service';
 import { WidgetVisibilityService } from './../services/widget-visibility.service';
 import { FormFieldComponent } from './form-field/form-field.component';
+import { MaterialModule } from './material.module';
 import { StartFormComponent } from './start-form.component';
 import { ContentWidgetComponent } from './widgets/content/content.widget';
 import { MASK_DIRECTIVE } from './widgets/index';
@@ -43,7 +43,7 @@ describe('ActivitiStartForm', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
-                ...MATERIAL_MODULE,
+                MaterialModule,
                 CoreModule.forRoot()],
             declarations: [
                 StartFormComponent,

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

@@ -18,8 +18,8 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { CoreModule } from 'ng2-alfresco-core';
 import { Observable } from 'rxjs/Rx';
-import { MATERIAL_MODULE } from '../../../../index';
 import { ActivitiAlfrescoContentService } from '../../../services/activiti-alfresco.service';
+import { MaterialModule } from '../../material.module';
 import { ExternalContent } from '../core/external-content';
 import { ExternalContentLink } from '../core/external-content-link';
 import { FormFieldTypes } from '../core/form-field-types';
@@ -42,7 +42,7 @@ describe('AttachWidgetComponent', () => {
         TestBed.configureTestingModule({
             imports: [
                 CoreModule.forRoot(),
-                ...MATERIAL_MODULE
+                MaterialModule
             ],
             declarations: [
                 AttachWidgetComponent,

ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.scss

@@ -37,7 +37,20 @@ container-widget{
         width: 95%;
     }
 
+    .mat-input-placeholder-wrapper{
+        top:0px !important;
+    }
+
+    .mat-input-placeholder{
+        top: 2.5em !important;
+    }
+
     .mat-focused {
+
+        .mat-input-placeholder-wrapper{
+            display: none;
+        }
+
         label {
             transform: scaleX(1);
             transition: transform 150ms linear,

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

@@ -17,9 +17,9 @@
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { CoreModule } from 'ng2-alfresco-core';
-import { MATERIAL_MODULE } from '../../../../index';
 import { ActivitiAlfrescoContentService } from '../../../services/activiti-alfresco.service';
 import { fakeFormJson } from '../../../services/assets/widget-visibility.service.mock';
+import { MaterialModule } from '../../material.module';
 import { WIDGET_DIRECTIVES } from '../index';
 import { MASK_DIRECTIVE } from '../index';
 import { EcmModelService } from './../../../services/ecm-model.service';
@@ -44,7 +44,7 @@ describe('ContainerWidgetComponent', () => {
         TestBed.configureTestingModule({
             imports: [
                 CoreModule.forRoot(),
-                ...MATERIAL_MODULE
+                MaterialModule
             ],
             declarations: [FormFieldComponent, ContentWidgetComponent, WIDGET_DIRECTIVES, MASK_DIRECTIVE],
             providers: [

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

@@ -18,8 +18,8 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import * as moment from 'moment';
 import { CoreModule } from 'ng2-alfresco-core';
-import { MATERIAL_MODULE } from '../../../../index';
 import { ActivitiAlfrescoContentService } from '../../../services/activiti-alfresco.service';
+import { MaterialModule } from '../../material.module';
 import { ErrorWidgetComponent } from '../error/error.component';
 import { EcmModelService } from './../../../services/ecm-model.service';
 import { FormService } from './../../../services/form.service';
@@ -38,7 +38,7 @@ describe('DateWidgetComponent', () => {
         TestBed.configureTestingModule({
             imports: [
                 CoreModule.forRoot(),
-                ...MATERIAL_MODULE
+                MaterialModule
             ],
             declarations: [
                 DateWidgetComponent,

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

@@ -19,10 +19,10 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { CoreModule } from 'ng2-alfresco-core';
 import { Observable } from 'rxjs/Rx';
-import { MATERIAL_MODULE } from '../../../../index';
 import { EcmModelService } from '../../../services/ecm-model.service';
 import { FormService } from '../../../services/form.service';
 import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
+import { MaterialModule } from '../../material.module';
 import { ErrorWidgetComponent } from '../error/error.component';
 import { FormFieldOption } from './../core/form-field-option';
 import { FormFieldModel } from './../core/form-field.model';
@@ -52,7 +52,7 @@ describe('DropdownWidgetComponent', () => {
         TestBed.configureTestingModule({
             imports: [
                 CoreModule,
-                ...MATERIAL_MODULE
+                MaterialModule
             ],
             declarations: [DropdownWidgetComponent, ErrorWidgetComponent],
             providers: [FormService, EcmModelService, WidgetVisibilityService]

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

@@ -16,11 +16,11 @@
  */
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { LogServiceMock } from 'ng2-alfresco-core';
 import { CoreModule, LogService } from 'ng2-alfresco-core';
-import { MATERIAL_MODULE } from '../../../../index';
+import { LogServiceMock } from 'ng2-alfresco-core';
 import { ActivitiAlfrescoContentService } from '../../../services/activiti-alfresco.service';
 import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
+import { MaterialModule } from '../../material.module';
 import { ErrorWidgetComponent } from '../error/error.component';
 import { EcmModelService } from './../../../services/ecm-model.service';
 import { FormService } from './../../../services/form.service';
@@ -86,7 +86,7 @@ describe('DynamicTableWidgetComponent', () => {
         TestBed.configureTestingModule({
             imports: [
                 CoreModule.forRoot(),
-                ...MATERIAL_MODULE
+                MaterialModule
             ],
             declarations: [DynamicTableWidgetComponent, RowEditorComponent,
                 DropdownEditorComponent, DateEditorComponent, BooleanEditorComponent,

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.spec.ts

@@ -19,8 +19,8 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { CoreModule } from 'ng2-alfresco-core';
 import { Observable } from 'rxjs/Rx';
-import { MATERIAL_MODULE } from '../../../../../../index';
 import { EcmModelService } from '../../../../../services/ecm-model.service';
+import { MaterialModule } from '../../../../material.module';
 import { FormService } from './../../../../../services/form.service';
 import { FormFieldModel, FormModel } from './../../../core/index';
 import {
@@ -193,7 +193,7 @@ describe('DropdownEditorComponent', () => {
 
         beforeEach(async(() => {
             TestBed.configureTestingModule({
-                imports: [CoreModule, ...MATERIAL_MODULE],
+                imports: [CoreModule, MaterialModule],
                 declarations: [DropdownEditorComponent],
                 providers: [FormService, EcmModelService]
             }).compileComponents().then(() => {

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

@@ -19,10 +19,10 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { CoreModule, LogServiceMock } from 'ng2-alfresco-core';
 import { Observable } from 'rxjs/Rx';
 
-import { MATERIAL_MODULE } from '../../../../index';
 import { EcmModelService } from '../../../services/ecm-model.service';
 import { FormService } from '../../../services/form.service';
 import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
+import { MaterialModule } from '../../material.module';
 import { ContainerModel } from '../core/container.model';
 import { FormFieldTypes } from '../core/form-field-types';
 import { ErrorWidgetComponent } from '../error/error.component';
@@ -148,7 +148,7 @@ describe('RadioButtonsWidgetComponent', () => {
 
         beforeEach(async(() => {
             TestBed.configureTestingModule({
-                imports: [CoreModule, MATERIAL_MODULE ],
+                imports: [CoreModule, MaterialModule ],
                 declarations: [RadioButtonsWidgetComponent, ErrorWidgetComponent],
                 providers: [FormService, EcmModelService, WidgetVisibilityService]
             }).compileComponents().then(() => {

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

@@ -17,8 +17,8 @@
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { CoreModule } from 'ng2-alfresco-core';
-import { MATERIAL_MODULE } from '../../../../index';
 import { fakeFormJson } from '../../../services/assets/widget-visibility.service.mock';
+import { MaterialModule } from '../../material.module';
 import { FormFieldModel } from '../core/form-field.model';
 import { FormModel } from '../core/form.model';
 import { TabModel } from '../core/tab.model';
@@ -86,7 +86,7 @@ describe('TabsWidgetComponent', () => {
 
         beforeEach(async(() => {
             TestBed.configureTestingModule({
-                imports: [CoreModule, ...MATERIAL_MODULE ],
+                imports: [CoreModule, MaterialModule ],
                 declarations: [FormFieldComponent, ContentWidgetComponent, WIDGET_DIRECTIVES, MASK_DIRECTIVE]
             }).compileComponents().then(() => {
                 fixture = TestBed.createComponent(TabsWidgetComponent);

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

@@ -23,8 +23,8 @@ import { InputMaskDirective } from './text-mask.component';
 import { TextWidgetComponent } from './text.widget';
 
 import { CoreModule } from 'ng2-alfresco-core';
-import { MATERIAL_MODULE } from '../../../../index';
 import { ActivitiAlfrescoContentService } from '../../../services/activiti-alfresco.service';
+import { MaterialModule } from '../../material.module';
 import { ErrorWidgetComponent } from '../error/error.component';
 import { EcmModelService } from './../../../services/ecm-model.service';
 import { FormService } from './../../../services/form.service';
@@ -39,7 +39,7 @@ describe('TextWidgetComponent', () => {
         TestBed.configureTestingModule({
             imports: [
                 CoreModule.forRoot(),
-                MATERIAL_MODULE
+                MaterialModule
             ],
             declarations: [
                 TextWidgetComponent,

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

@@ -20,10 +20,10 @@ import { CoreModule, LogServiceMock } from 'ng2-alfresco-core';
 import { Observable } from 'rxjs/Rx';
 
 import { By } from '@angular/platform-browser';
-import { MATERIAL_MODULE } from '../../../../index';
 import { EcmModelService } from '../../../services/ecm-model.service';
 import { FormService } from '../../../services/form.service';
 import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
+import { MaterialModule } from '../../material.module';
 import { FormFieldOption } from '../core/form-field-option';
 import { FormFieldTypes } from '../core/form-field-types';
 import { FormFieldModel } from '../core/form-field.model';
@@ -390,7 +390,7 @@ describe('TypeaheadWidgetComponent', () => {
 
         beforeEach(async(() => {
             TestBed.configureTestingModule({
-                imports: [CoreModule, MATERIAL_MODULE],
+                imports: [CoreModule, MaterialModule],
                 declarations: [TypeaheadWidgetComponent, ErrorWidgetComponent],
                 providers: [FormService, EcmModelService, WidgetVisibilityService]
             }).compileComponents().then(() => {

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

@@ -19,9 +19,9 @@ import { DebugElement } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { CoreModule } from 'ng2-alfresco-core';
-import { MATERIAL_MODULE } from '../../../../index';
 import { EcmModelService } from '../../../services/ecm-model.service';
 import { FormService } from '../../../services/form.service';
+import { MaterialModule } from '../../material.module';
 import { FormFieldTypes } from '../core/form-field-types';
 import { FormModel } from '../core/form.model';
 import { ErrorWidgetComponent } from '../error/error.component';
@@ -116,7 +116,7 @@ describe('UploadWidgetComponent', () => {
 
         beforeEach(async(() => {
             TestBed.configureTestingModule({
-                imports: [CoreModule.forRoot(), MATERIAL_MODULE],
+                imports: [CoreModule.forRoot(), MaterialModule],
                 declarations: [UploadWidgetComponent, ErrorWidgetComponent],
                 providers: [FormService, EcmModelService]
             }).compileComponents().then(() => {