ng4-input-counter/index.js

A very cool input which display characters counter and can be configured to display counter bounds.

import { Component, EventEmitter, Input, NgModule, Output, forwardRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';

var CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(function () { return InputCounterComponent; }),
    multi: true
};
var noop = function () { };
var InputCounterComponent = (function () {
    function InputCounterComponent() {
        this.innerValue = '';
        this.onTouchedCallback = noop;
        this.onChangeCallback = noop;
        this.type = 'text';
        this.placeholder = '';
        this.disabled = false;
        this.readonly = false;
        this.required = false;
        this.focus = new EventEmitter();
        this.blur = new EventEmitter();
    }
    /**
     * @return {?}
     */
    InputCounterComponent.prototype.ngAfterViewInit = function () {
        this.updateCounter();
    };
    /**
     * @return {?}
     */
    InputCounterComponent.prototype.enableCounter = function () {
        this.enabled = true;
    };
    /**
     * @return {?}
     */
    InputCounterComponent.prototype.disableCounter = function () {
        this.enabled = false;
    };
    /**
     * @return {?}
     */
    InputCounterComponent.prototype.displayMinLength = function () {
        return this.minlength && this.counter < this.minlength;
    };
    /**
     * @return {?}
     */
    InputCounterComponent.prototype.displayMaxLength = function () {
        return this.maxlength && this.counter > 0 && !this.displayMinLength();
    };
    /**
     * @return {?}
     */
    InputCounterComponent.prototype.onFocus = function () {
        this.enableCounter();
        this.focus.emit();
    };
    /**
     * @return {?}
     */
    InputCounterComponent.prototype.onBlur = function () {
        this.disableCounter();
        this.onTouchedCallback();
        this.blur.emit();
    };
    /**
     * @return {?}
     */
    InputCounterComponent.prototype.updateCounter = function () {
        if (this.innerValue) {
            this.counter = this.innerValue.length;
        }
        else {
            this.counter = 0;
        }
    };
    /**
     * @param {?} value
     * @return {?}
     */
    InputCounterComponent.prototype.writeValue = function (value) {
        if (value !== this.innerValue) {
            this.innerValue = value;
            this.updateCounter();
        }
    };
    /**
     * @param {?} fn
     * @return {?}
     */
    InputCounterComponent.prototype.registerOnChange = function (fn) {
        this.onChangeCallback = fn;
    };
    /**
     * @param {?} fn
     * @return {?}
     */
    InputCounterComponent.prototype.registerOnTouched = function (fn) {
        this.onTouchedCallback = fn;
    };
    Object.defineProperty(InputCounterComponent.prototype, "value", {
        /**
         * @return {?}
         */
        get: function () {
            return this.innerValue;
        },
        /**
         * @param {?} value
         * @return {?}
         */
        set: function (value) {
            if (value !== this.innerValue) {
                this.innerValue = value;
                this.updateCounter();
                this.onChangeCallback(value);
            }
        },
        enumerable: true,
        configurable: true
    });
    return InputCounterComponent;
}());
InputCounterComponent.decorators = [
    { type: Component, args: [{
                selector: 'input-counter',
                template: "\n    <style>\n      .input-counter-group {\n        display: block;\n        position: relative;\n      }\n\n      .input-counter-group span {\n        color: #b0b0b0;\n        font-size: 10px;\n      }\n\n      .input-counter-group .text-input-counter {\n        position: absolute;\n        line-height: 10px;\n        right: 0;\n        bottom: -13px;\n      }\n    </style>\n    <div class=\"input-counter-group\">\n      <input \n        [id]=\"id\" \n        [type]=\"type\"\n        [ngClass]=\"className\" \n        [name]=\"name\" \n        [placeholder]=\"placeholder\" \n        [maxlength]=\"maxlength\" \n        [disabled]=\"disabled\" \n        [pattern]=\"pattern\" \n        [required]=\"required\" \n        [readonly]=\"readonly\"\n        [(ngModel)]=\"value\"\n        (focus)=\"onFocus()\" \n        (blur)=\"onBlur()\">\n      <span *ngIf=\"enabled\" class=\"text-input-counter\">\n        <span *ngIf=\"displayMinLength()\">{{ minlength }} characters at least required: </span>{{ counter }}<span *ngIf=\"displayMaxLength()\">/{{ maxlength }}</span>\n      </span>\n    </div>\n  ",
                providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
            },] },
];
/**
 * @nocollapse
 */
InputCounterComponent.ctorParameters = function () { return []; };
InputCounterComponent.propDecorators = {
    'id': [{ type: Input },],
    'type': [{ type: Input },],
    'name': [{ type: Input },],
    'maxlength': [{ type: Input },],
    'minlength': [{ type: Input },],
    'className': [{ type: Input },],
    'placeholder': [{ type: Input },],
    'disabled': [{ type: Input },],
    'readonly': [{ type: Input },],
    'pattern': [{ type: Input },],
    'required': [{ type: Input },],
    'focus': [{ type: Output },],
    'blur': [{ type: Output },],
};

var InputCounterModule = (function () {
    function InputCounterModule() {
    }
    /**
     * @return {?}
     */
    InputCounterModule.forRoot = function () {
        return {
            ngModule: InputCounterModule,
            providers: []
        };
    };
    return InputCounterModule;
}());
InputCounterModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    BrowserModule,
                    FormsModule
                ],
                declarations: [
                    InputCounterComponent
                ],
                exports: [
                    InputCounterComponent
                ]
            },] },
];
/**
 * @nocollapse
 */
InputCounterModule.ctorParameters = function () { return []; };

export { InputCounterModule, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, InputCounterComponent };