Base class for 'textfield' widgets

Reduces repetitive code needed to fix MDL problems for textfield-based
components

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

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef, OnInit } from '@angular/core';
-import { WidgetComponent } from './../widget.component';
+import { TextFieldWidgetComponent } from './../textfield-widget.component';
 
 @Component({
     moduleId: module.id,
@@ -24,12 +24,12 @@ import { WidgetComponent } from './../widget.component';
     templateUrl: './amount.widget.html',
     styleUrls: ['./amount.widget.css']
 })
-export class AmountWidget extends WidgetComponent implements OnInit {
+export class AmountWidget extends TextFieldWidgetComponent implements OnInit {
 
     currency: string = '$';
 
-    constructor(private elementRef: ElementRef) {
+    constructor(elementRef: ElementRef) {
-        super();
+        super(elementRef);
     }
 
     ngOnInit() {
@@ -38,21 +38,4 @@ export class AmountWidget extends WidgetComponent implements OnInit {
         }
     }
 
-    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;
-    }
-
 }

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

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef } from '@angular/core';
-import { WidgetComponent } from './../widget.component';
+import { TextFieldWidgetComponent } from './../textfield-widget.component';
 
 @Component({
     moduleId: module.id,
@@ -24,27 +24,10 @@ import { WidgetComponent } from './../widget.component';
     templateUrl: './date.widget.html',
     styleUrls: ['./date.widget.css']
 })
-export class DateWidget extends WidgetComponent {
+export class DateWidget extends TextFieldWidgetComponent {
 
-    constructor(private elementRef: ElementRef) {
+    constructor(elementRef: ElementRef) {
-        super();
+        super(elementRef);
-    }
-
-    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;
     }
 
 }

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

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef } from '@angular/core';
-import { WidgetComponent } from './../widget.component';
+import { TextFieldWidgetComponent } from './../textfield-widget.component';
 
 @Component({
     moduleId: module.id,
@@ -24,27 +24,10 @@ import { WidgetComponent } from './../widget.component';
     templateUrl: './multiline-text.widget.html',
     styleUrls: ['./multiline-text.widget.css']
 })
-export class MultilineTextWidget extends WidgetComponent {
+export class MultilineTextWidget extends TextFieldWidgetComponent {
 
-    constructor(private elementRef: ElementRef) {
+    constructor(elementRef: ElementRef) {
-        super();
+        super(elementRef);
-    }
-
-    setupMaterialComponents(handler: any): boolean {
-        // workaround for MDL issues with dynamic components
-        if (handler) {
-            handler.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;
     }
 
 }

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

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef } from '@angular/core';
-import { WidgetComponent } from './../widget.component';
+import { TextFieldWidgetComponent } from './../textfield-widget.component';
 
 @Component({
     moduleId: module.id,
@@ -24,24 +24,10 @@ import { WidgetComponent } from './../widget.component';
     templateUrl: './number.widget.html',
     styleUrls: ['./number.widget.css']
 })
-export class NumberWidget extends WidgetComponent {
+export class NumberWidget extends TextFieldWidgetComponent {
 
-    constructor(private elementRef: ElementRef) {
+    constructor(elementRef: ElementRef) {
-        super();
+        super(elementRef);
     }
 
-    setupMaterialComponents(handler: any): boolean {
-        // workaround for MDL issues with dynamic components
-        if (handler) {
-            handler.upgradeAllRegistered();
-            if (this.elementRef && this.hasValue()) {
-                let container = this.elementRef.nativeElement.querySelector('.mdl-textfield');
-                if (container) {
-                    container.MaterialTextfield.change(this.field.value.toString());
-                }
-            }
-            return true;
-        }
-        return false;
-    }
 }

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

@@ -18,4 +18,3 @@
         </div>
     </div>
 </div>
--

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

@@ -16,7 +16,7 @@
  */
 
 import { Component, ElementRef } from '@angular/core';
-import { WidgetComponent } from './../widget.component';
+import { TextFieldWidgetComponent } from './../textfield-widget.component';
 
 @Component({
     moduleId: module.id,
@@ -24,27 +24,10 @@ import { WidgetComponent } from './../widget.component';
     templateUrl: './text.widget.html',
     styleUrls: ['./text.widget.css']
 })
-export class TextWidget extends WidgetComponent {
+export class TextWidget extends TextFieldWidgetComponent {
 
-    constructor(private elementRef: ElementRef) {
+    constructor(elementRef: ElementRef) {
-        super();
+        super(elementRef);
-    }
-
-    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;
     }
 
 }

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

@@ -0,0 +1,47 @@
+/*!
+ * @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;
+    }
+
+    // Overrides base implementation
+    setupMaterialComponents(handler: any): boolean {
+        // workaround for MDL issues with dynamic components
+        if (handler) {
+            handler.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.toString());
+                }
+            }
+            return true;
+        }
+        return false;
+    }
+
+}