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

<div class="container"
    ng-class="{selected: $ctrl.hasFocus}"
    ng-mouseenter="$ctrl.hasMouseIn = true"
    ng-mouseleave="$ctrl.hasMouseIn = false"
    style="display: inline-flex"
>
    <div class="textField">
        <div class="leftIcons">
        </div>
        
        <div class="infix">
        <input
            type="{{$ctrl.type}}" 
            name="{{$ctrl.name}}" 
            ng-model="$ctrl.value" 
            vn-validation="{{$ctrl.rule}}" 
            ng-disabled="$ctrl.disabled"
            ng-readonly="$ctrl.readonly"
            ng-focus="$ctrl.hasFocus = true"
            ng-blur="$ctrl.hasFocus = false"
            tabindex="{{$ctrl.input.tabindex}}"
            />

            <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) 
                    && !$ctrl.unclearable}"
                ng-click="$ctrl.clear()">
                clear
            </i>
            <i class="material-icons"
                ng-if="$ctrl.hasInfo"
                vn-tooltip="{{$ctrl.info}}">
                info_outline
            </i>
        </div>
        <div class="rightIcons"></div>
    </div>
</div>