refactoring textfield finished

client/client/src/create/create.html

@@ -11,15 +11,15 @@
             <vn-vertical pad-large>
                 <vn-title>Create client</vn-title>
                 <vn-horizontal>
-                    <vn-textfield vn-one label="Name" model="$ctrl.client.name" vn-focus></vn-textfield>
-                    <vn-textfield vn-one label="Tax number" model="$ctrl.client.fi"></vn-textfield>
+                    <vn-textfield vn-one label="Name" field="$ctrl.client.name" vn-focus></vn-textfield>
+                    <vn-textfield vn-one label="Tax number" field="$ctrl.client.fi"></vn-textfield>
                 </vn-horizontal>
                 <vn-horizontal>
-                    <vn-textfield vn-one label="Business name" model="$ctrl.client.socialName"></vn-textfield>
-                    <vn-textfield vn-one label="User name" model="$ctrl.client.userName"></vn-textfield>
+                    <vn-textfield vn-one label="Business name" field="$ctrl.client.socialName"></vn-textfield>
+                    <vn-textfield vn-one label="User name" field="$ctrl.client.userName"></vn-textfield>
                 </vn-horizontal>
                 <vn-horizontal>
-                    <vn-textfield vn-one label="Email" model="$ctrl.client.email" ></vn-textfield>
+                    <vn-textfield vn-one label="Email" field="$ctrl.client.email" ></vn-textfield>
                     <vn-one></vn-one>
                 </vn-horizontal>
             </vn-vertical>

client/core/src/directives/validation.js

@@ -39,6 +39,7 @@ export function directive(interpolate, compile, $window) {
         let errorMsg;
         let errorShown = false;
 
+        input.$options.$$options.allowInvalid = true;
         input.$validators.entity = function(value) {
             try {
                 validateAll(value, validations);

client/core/src/lib/inputAttrsNormalizer.js

@@ -29,6 +29,7 @@ export class InputAttrsNormalizer {
 
         if (attrs.focus !== undefined)
             attrs.focus = 'vn-focus';
+
     }
 }
 module.service(NAME, InputAttrsNormalizer);

client/core/src/textfield/style.scss

@@ -4,7 +4,6 @@ vn-textfield {
         top: 0px; 
         right: -6px; 
         margin: 22px 0px; 
-        visibility: hidden;
         background-color: white;
     }
     .material-icons {

client/core/src/textfield/textfield.html

@@ -5,8 +5,16 @@
         name="{{$ctrl.name}}" 
         ng-model="$ctrl.value" 
         vn-validation="{{$ctrl.rule}}" 
-        ng-disabled="$ctrl.disable" 
+        ng-disabled="$ctrl.disabled" 
     />    
-  
-    <label class="mdl-textfield__label">{{$ctrl.label | translate}}</label>
+    <button
+        type="button"
+        class="mdl-chip__action"
+        tabindex="-1"
+        translate-attr="{title: 'Clear'}"
+        ng-show="$ctrl.showActions"
+    >
+        <i class="material-icons" ng-click="$ctrl.clear()">clear</i>
+    </button>
+    <label class="mdl-textfield__label" translate>{{$ctrl.label}}</label>
 </div>

client/core/src/textfield/textfield.js

@@ -1,23 +1,23 @@
 import { module } from '../module';
 import Component from '../lib/component';
-// import * as resolveFactory from '../lib/resolveDefaultComponents';
-// import * as normalizerFactory from '../lib/inputAttrsNormalizer';
+import * as normalizerFactory from '../lib/inputAttrsNormalizer';
 import './style.scss';
-// import './textfield.mdl';
 
 export default class TextfieldController extends Component {
-    constructor($element, $scope, $attrs) {
+    constructor($element, $scope, $attrs, normalizer) {
         super($element);
 
+        normalizer.normalize($attrs);
+
         this.$scope = $scope;
         this.$attrs = $attrs;
         this.$element = $element;
 
         this._value = null;
-
         this.type = this.$attrs.type || 'text';
-        this.rule = this.$attrs.rule || null;
-        
+        this.showActions = false;
+        this.input = $element[0].querySelector('input');
+
         componentHandler.upgradeElement($element[0].firstChild);
     }
 
@@ -27,44 +27,33 @@ export default class TextfieldController extends Component {
 
     set value(value) {
         this._value = (value === undefined || value === '') ? null : value;
+        this.input.value = this._value;
+        this.showActions = this._value !== null;
+        this.mdlUpdate();
     }
 
-    onClearClick() {
-        this.input.value = null;
-        this.checkValue();
-
-        let event = this.document.createEvent('HTMLEvents');
-        event.initEvent('change', false, true);
-        this.input.dispatchEvent(event);
+    mdlUpdate() {
+        let mdlField = this.$element[0].firstChild.MaterialTextfield;
+        if (mdlField)
+            mdlField.updateClasses_();
     }
 
-    checkValue() {
-        this.showClear(this.input.value);
-    }
-
-    showClear(show) {
-        show = (show && document.activeElement === this.input);
-        let clearButton = this.$element.querySelector('button');
-        clearButton.style.visibility = show ? 'visible' : 'hidden';
-    }
-
-    select() {
-        this.input.select();
-    }
-
-    focus() {
+    clear() {
+        this.value = null;
         this.input.focus();
     }
 }
-TextfieldController.$inject = ['$element', '$scope', '$attrs'];
+TextfieldController.$inject = ['$element', '$scope', '$attrs', normalizerFactory.NAME];
 
 module.component('vnTextfield', {
     template: require('./textfield.html'),
     controller: TextfieldController,
     bindings: {
         value: '=model',
-        label: '@',
-        name: '@',
-        disable: '<'
+        label: '@?',
+        name: '@?',
+        disabled: '<?',
+        rule: '@?',
+        type: '@?'
     }
-});
+});