ng4-input-counter
Version:
A very cool input which display characters counter and can be configured to display counter bounds.
196 lines (190 loc) • 7.06 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/platform-browser'), require('@angular/forms')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/platform-browser', '@angular/forms'], factory) :
(factory((global['ng4-input-counter'] = global['ng4-input-counter'] || {}),global._angular_core,global._angular_platformBrowser,global._angular_forms));
}(this, (function (exports,_angular_core,_angular_platformBrowser,_angular_forms) { 'use strict';
var CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
provide: _angular_forms.NG_VALUE_ACCESSOR,
useExisting: _angular_core.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 _angular_core.EventEmitter();
this.blur = new _angular_core.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: _angular_core.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: _angular_core.Input },],
'type': [{ type: _angular_core.Input },],
'name': [{ type: _angular_core.Input },],
'maxlength': [{ type: _angular_core.Input },],
'minlength': [{ type: _angular_core.Input },],
'className': [{ type: _angular_core.Input },],
'placeholder': [{ type: _angular_core.Input },],
'disabled': [{ type: _angular_core.Input },],
'readonly': [{ type: _angular_core.Input },],
'pattern': [{ type: _angular_core.Input },],
'required': [{ type: _angular_core.Input },],
'focus': [{ type: _angular_core.Output },],
'blur': [{ type: _angular_core.Output },],
};
var InputCounterModule = (function () {
function InputCounterModule() {
}
/**
* @return {?}
*/
InputCounterModule.forRoot = function () {
return {
ngModule: InputCounterModule,
providers: []
};
};
return InputCounterModule;
}());
InputCounterModule.decorators = [
{ type: _angular_core.NgModule, args: [{
imports: [
_angular_platformBrowser.BrowserModule,
_angular_forms.FormsModule
],
declarations: [
InputCounterComponent
],
exports: [
InputCounterComponent
]
},] },
];
/**
* @nocollapse
*/
InputCounterModule.ctorParameters = function () { return []; };
exports.InputCounterModule = InputCounterModule;
exports.CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR;
exports.InputCounterComponent = InputCounterComponent;
Object.defineProperty(exports, '__esModule', { value: true });
})));