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

import ngModule from '../../module';
import Input from '../../lib/input';
import './style.scss';

export default class Textfield extends Input {
    constructor($element, $scope, $attrs, vnTemplate, $transclude) {
        super($element, $scope);
        vnTemplate.normalizeInputAttrs($attrs);
        this._value = null;
        this.type = $attrs.type;
        this.showActions = false;
        this.hasInfo = Boolean($attrs.info);
        this.info = $attrs.info || null;
        this.hasFocus = false;
        this.hasMouseIn = false;

        if ($transclude) {
            $transclude($scope.$parent, tClone => {
                this.leftIcons = tClone[0];
            }, null, 'leftIcons');
            $transclude($scope.$parent, tClone => {
                this.rightIcons = tClone[0];
            }, null, 'rightIcons');
        }
        this.input.addEventListener('keyup', e => {
            if (e.key == "Escape") {
                this._cancel();
            }
        });
        this.input.addEventListener('focus', () => this.saveOldValue());
        this.input.addEventListener('keyup', e => {
            if (e.key == "Enter") {
                this._accept();
            }
        });
    }
    _accept() {
        if (this.accept) {
            this.input.blur();
            this.accept();
        }
    }
    _cancel() {
        this.input.blur();
        this.input.value = this.oldValue;
        this.value = this.input.value;
        this.$.$apply();

        if (this.cancel) {
            this.cancel();
        }
    }
    saveOldValue() {
        this.oldValue = this.input.value;
    }
    set leftIcons(value) {
        for (let i = 0; i < value.children.length; i++) {
            this.element.querySelector('.leftIcons').appendChild(value.children[i]);
        }
    }
    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 type(value) {
        this._type = value || 'text';
    }
    get type() {
        return this._type;
    }
    set vnTabIndex(value) {
        this.input.tabindex = value;
    }
    mdlUpdate() {
        let mdlElement = this.element.firstChild.MaterialTextfield;
        if (mdlElement) mdlElement.updateClasses_();
    }
    clear() {
        this.value = null;
        this.input.focus();
    }
}
Textfield.$inject = ['$element', '$scope', '$attrs', 'vnTemplate', '$transclude'];

ngModule.component('vnTextfield', {
    template: require('./textfield.html'),
    transclude: {
        leftIcons: '?tLeftIcons',
        rightIcons: '?tRightIcons'
    },
    controller: Textfield,
    bindings: {
        value: '=model',
        label: '@?',
        name: '@?',
        disabled: '<?',
        readonly: '<?',
        rule: '@?',
        type: '@?',
        vnTabIndex: '@?',
        accept: '&',
        cancel: '&',
        unclearable: '<?'
    }
});