Merge branch 'dev' of https://git.verdnatura.es/salix into dev

client/core/src/components/textfield/style.scss

@@ -1,128 +1,45 @@
-@import "colors";
 vn-textfield {
-    margin: 20px 0!important;
+    .mdl-chip__action {
-    display: block;
-
-    .leftIcons, .rightIcons, .suffix{
-        display: inline-flex;
-        color: $secondary-font-color;
-        & .material-icons{
-            font-size: 20px!important
-        }
-    }
-    .leftIcons{
-        margin-right: 3px;
-    }
-    .container{
-        width: 100%;
-        position: relative;
-        padding-bottom: 2px;
-    }
-    .textField{
-        width: 100%;
-        display: inline-flex;
-        position: relative;
-        padding: 4px 0;
-    }
-    .infix {
-        position: relative;
-        display: block;
-        flex: auto;
-        width: 100%;
-        min-width: 0;
-    }
-    i.pointer {
-        visibility: hidden
-    }
-    i.visible {
-        visibility: visible;
-    }
-    label {
         position: absolute;
-        bottom: 2px;
+        width: auto; 
-        pointer-events: none;
+        top: 0px; 
-        color: $secondary-font-color;
+        right: -6px; 
-        transition-duration: .2s;
+        margin: 21px 0px; 
-        transition-timing-function: cubic-bezier(.4,0,.2,1);
+        background: white;
+        opacity: 1;
+        z-index: 1;
+        color: #aaa;
     }
-    input {
+    .mdl-textfield {
-
-        outline: none;
-        border: none;
-        font-family: "Helvetica","Arial",sans-serif;
-        display: block;
-        font-size: 16px;
         width: 100%;
-        background: 0 0;
-        color: inherit;
-
-        &[type=number]{
-            -moz-appearance: textfield;
-            &::-webkit-outer-spin-button,
-            &::-webkit-inner-spin-button{
-                -webkit-appearance: none;
-                margin: 0;
     }
-        }
+    .mdl-textfield__error {
-    }
-
-    .underline{
-        position: absolute;
-        bottom: 0;
-        height: 1px;
-        content: ' ';
-        pointer-events: none;
-        width: 100%;
-        background-color: rgba(0,0,0,.12);
-    }
-
-    .selected.underline{
-        background-color: rgb(255,152,0);
-        height: 2px;
-        left: 50%;
-        width: 0px!important;
-        transition-duration: 0.2s;
-        transition-timing-function: cubic-bezier(.4,0,.2,1);
-    }
-
-    &.not-empty{
-        & label {
-            bottom: 24px;
-            color: $main-01;
-            font-size: 12px;
-        }
-    }
-
-    div.selected{
-        &.container{
-            border-bottom: 0px;
-        }
-        & label {
-            bottom: 24px;
-            color: $main-01;
-            font-size: 12px;
-        }
-        & .selected.underline{
-            left: 0;
-            width: 100%!important;
-        }
-    }
-
-    & > div.container > div.textField > div.infix.invalid{
-        @extend div.selected;
-
-        & > span.mdl-textfield__error{
         visibility: visible;
-            margin-top: 9px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
     }
-        & > label{
+    .mdl-textfield.invalid {
-            color: #d50000;
+        .mdl-textfield__input {
+            border-color: #d50000;
+            box-shadow: none;
         }
-    }
+        .mdl-textfield__label::after {
-
-    .infix.invalid + .underline {
-        &{
             background-color: #d50000;
         }
     }
+    .mdl-textfield--floating-label.invalid .mdl-textfield__label {
+        color: #d50000;
+        font-size: 12px;
+        top: 4px;
+    }
+    .material-icons {
+        font-size: 18px;  
+        float: right;
+        margin-right: 5px;
+    }
+    .material-icons:hover {
+        color: rgba(0,0,0, .87);
+    }
 }

client/core/src/components/textfield/textfield.html

@@ -1,15 +1,9 @@
-<div class="container"
+<div
-    ng-class="{selected: $ctrl.hasFocus}"
+    class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
     ng-mouseenter="$ctrl.hasMouseIn = true"
-    ng-mouseleave="$ctrl.hasMouseIn = false"
+    ng-mouseleave="$ctrl.hasMouseIn = false">
-    style="display: inline-flex"
->
-    <div class="textField">
-        <div class="leftIcons">
-        </div>
-        
-        <div class=" infix">
 	<input
+        class="mdl-textfield__input" 
         type="{{$ctrl.type}}" 
         name="{{$ctrl.name}}" 
         ng-model="$ctrl.value" 
@@ -19,23 +13,17 @@
         ng-focus="$ctrl.hasFocus = true"
         ng-blur="$ctrl.hasFocus = false"
         tabindex="{{$ctrl.input.tabindex}}"/>
-
+    <div class="mdl-chip__action">
-            <label class="label" translate>{{::$ctrl.label}}</label>
-        </div>
-        <div class="underline"></div>
-        <div class="selected underline"></div>
-        <div class="suffix">
-            <i class="material-icons pointer"
-                ng-class="{visible: !$ctrl.disabled && $ctrl.hasValue && ($ctrl.hasFocus || $ctrl.hasMouseIn)}"
-                ng-click="$ctrl.clear()">
-                clear
-            </i>
         <i class="material-icons"
             ng-if="$ctrl.hasInfo"
             vn-tooltip="{{$ctrl.info}}">
             info_outline
         </i>
+        <i class="material-icons pointer"
+            ng-show="!$ctrl.disabled && $ctrl.hasValue && ($ctrl.hasFocus || $ctrl.hasMouseIn)"
+            ng-click="$ctrl.clear()">
+            clear
+        </i>
     </div>
-        <div class="rightIcons"></div>
+    <label class="mdl-textfield__label" translate>{{::$ctrl.label}}</label>
-    </div>
 </div>

client/core/src/components/textfield/textfield.js

@@ -3,7 +3,7 @@ import Input from '../../lib/input';
 import './style.scss';
 
 export default class Textfield extends Input {
-    constructor($element, $scope, $attrs, vnTemplate, $transclude) {
+    constructor($element, $scope, $attrs, vnTemplate) {
         super($element, $scope);
         vnTemplate.normalizeInputAttrs($attrs);
         this._value = null;
@@ -13,53 +13,35 @@ export default class Textfield extends Input {
         this.info = $attrs.info || null;
         this.hasFocus = false;
         this.hasMouseIn = false;
-
+        componentHandler.upgradeElement($element[0].firstChild);
-        if ($transclude) {
-            $transclude($scope.$parent, tClone => {
-                this.leftIcons = tClone[0];
-            }, null, 'leftIcons');
-            $transclude($scope.$parent, tClone => {
-                this.rightIcons = tClone[0];
-            }, null, 'rightIcons');
-        }
-    }
-    set leftIcons(value) {
-        for (let i = 0; i < value.children.length; i++) {
-            this.element.querySelector('.leftIcons').appendChild(value);
-        }
-    }
-    set rightIcons(value) {
-        for (let i = 0; i < value.children.length; i++) {
-            this.element.querySelector('.rightIcons').appendChild(value.children[i]);
-        }
-    }
-    set value(value) {
-        this._value = (value === undefined || value === '') ? null : value;
-        this.input.value = this._value;
-        this.hasValue = this._value !== null;
-        if (this.hasValue) this.element.classList.add('not-empty');
-        else this.element.classList.remove('not-empty');
-        this.mdlUpdate();
     }
     get value() {
         return this._value;
     }
+    set value(value) {
+        this._value = (value === undefined || value === '') ? null : value;
+        this.input.value = this._value;
+        this.hasValue = Boolean(this._value);
+        this.mdlUpdate();
+    }
+
     set vnTabIndex(value) {
         this.input.tabindex = value;
     }
+
     clear() {
         this.value = null;
         this.input.focus();
     }
+    mdlUpdate() {
+        let mdlElement = this.element.firstChild.MaterialTextfield;
+        if (mdlElement) mdlElement.updateClasses_();
     }
-Textfield.$inject = ['$element', '$scope', '$attrs', 'vnTemplate', '$transclude'];
+}
+Textfield.$inject = ['$element', '$scope', '$attrs', 'vnTemplate'];
 
 ngModule.component('vnTextfield', {
     template: require('./textfield.html'),
-    transclude: {
-        leftIcons: '?tLeftIcons',
-        rightIcons: '?tRightIcons'
-    },
     controller: Textfield,
     bindings: {
         value: '=model',

client/core/src/components/textfield/textfield.spec.js

@@ -18,7 +18,7 @@ describe('Component vnTextfield', () => {
         $attrs = {};
         $timeout = _$timeout_;
         $element = angular.element('<div><input></div>');
-        controller = $componentController('vnTextfield', {$scope, $element, $attrs, $timeout, $transclude: null});
+        controller = $componentController('vnTextfield', {$scope, $element, $attrs, $timeout});
     }));
 
     describe('value() setter', () => {