texfield refactor

client/core/src/textfield/textfield.html

@@ -0,0 +1,18 @@
+<div class="mdl-textfield mdl-js-textfield {{$ctrl.className}}">
+	<input
+		class="mdl-textfield__input"
+		type="{{$ctrl.type}}"
+		name="{{$ctrl.name}}"
+		ng-model="{{$ctrl.model}}"
+		vn-validation="{{$ctrl.rule}}"
+		ng-disabled="{{$ctrl.disable}}"/>
+	<button
+		type="button"
+		class="mdl-chip__action"
+		tabindex="-1"
+		translate-attr="{title: 'Clear'}"
+		style="visibility: hidden"> 
+        <i class="material-icons">clear</i>
+    </button>
+	<label class="mdl-textfield__label" translate="{{$ctrl.label}}"></label>
+</div>

client/core/src/textfield/textfield.js

@@ -1,15 +1,16 @@
 import {module} from '../module';
-import Component from '../lib/component';
-import * as resolveFactory from '../lib/resolveDefaultComponents';
-import * as normalizerFactory from '../lib/inputAttrsNormalizer';
+
+// import * as resolveFactory from '../lib/resolveDefaultComponents';
+// import * as normalizerFactory from '../lib/inputAttrsNormalizer';
 import './style.scss';
-import './textfield.mdl';
+// import './textfield.mdl';
 
-export default class Textfield extends Component {
+export default class TextfieldController {
     constructor($element, $scope, $attrs) {
-        super($element);
 
-        let input = this.input = this.element.querySelector('input');
+        this.$scope = $scope;
+        this.$attrs = $attrs;
+        let input = this.input = this.$element.querySelector('input');
         input.addEventListener('input',
             () => this.checkValue());
         input.addEventListener('focus',
@@ -17,24 +18,26 @@ export default class Textfield extends Component {
         input.addEventListener('blur',
             () => this.showClear(false));
 
-        let clearButton = this.element.querySelector('button');
+        let clearButton = this.$element.querySelector('button');
         clearButton.addEventListener('click',
             () => this.onClearClick());
         clearButton.addEventListener('mousedown',
             event => event.preventDefault());
 
-        let div = this.element.firstChild;
+        let div = this.$element.firstChild;
         componentHandler.upgradeElement(div);
 
+        Object.assign(this, $attrs);
     }
-    link($scope, $attrs) {
-        let mdlTextField = this.element.firstChild.MaterialTextfield;
+
+    $onInit() {
+        let mdlTextField = this.$element.firstChild.MaterialTextfield;
         mdlTextField.updateClasses_();
 
-        $scope.$watch($attrs.model,
+        this.$scope.$watch(this.$attrs.model,
             () => mdlTextField.updateClasses_());
 
-        let $input = angular.element( this.input);
+        let $input = angular.$element(this.input);
         $input.controller('ng-model').$parsers.push(value => value === '' ? null : value);
     }
     onClearClick() {
@@ -50,7 +53,7 @@ export default class Textfield extends Component {
     }
     showClear(show) {
         show = show && document.activeElement === this.input;
-        let clearButton = this.element.querySelector('button');
+        let clearButton = this.$element.querySelector('button');
         clearButton.style.visibility = show ? 'visible' : 'hidden';
     }
     /**
@@ -66,21 +69,9 @@ export default class Textfield extends Component {
         this.input.focus();
     }
 }
-Textfield.$inject = ['$element', '$scope', '$attrs'];
+TextfieldController.$inject = ['$element', '$scope', '$attrs'];
 
-directive.$inject = [resolveFactory.NAME, normalizerFactory.NAME];
-export function directive(resolve, normalizer) {
-    return {
-        restrict: 'E',
-        template: function(_, attrs) {
-            normalizer.normalize(attrs);
-            return resolve.getTemplate('textfield', attrs);
-        },
-        link: function($scope, $element, $attrs, $ctrl) {
-            $ctrl.link($scope, $attrs);
-        },
-        controller: Textfield
-    };
-}
-
-module.directive('vnTextfield', directive);
+module.component('vnTextfield', {
+    template: require('./textfield.html'),
+    controller: TextfieldController
+});