@asi-ngtools/lib
Version:
This project is a little components library, simple to use, which will help you to simplify your project.
216 lines (215 loc) • 12.9 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
import { DefaultControlValueAccessor } from './../common/default-control-value-accessor';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Component, forwardRef, Input, ElementRef, ViewChild, Renderer2 } from '@angular/core';
import * as nh from '../../native-helper';
export class AsiInputChipsComponent extends DefaultControlValueAccessor {
/**
* @param {?} renderer
* @param {?} elementRef
*/
constructor(renderer, elementRef) {
super();
this.renderer = renderer;
this.elementRef = elementRef;
/**
* Label position
*/
this.labelPosition = 'top';
/**
* Placeholder to display
*/
this.placeholder = '';
/**
* Max length of the text
*/
this.maxlength = -1;
/**
* Must be a number (internaly set the regex to ^-*[0-9,\.]*$
*/
this.number = false;
/**
* Delay before the component change value
*/
this.delay = 0;
/**
* Allow you to define only one value
*/
this.uniq = false;
this.onChangeCallback = () => { };
}
/**
* @return {?}
*/
get value() {
return this._inputValue;
}
;
/**
* @param {?} v
* @return {?}
*/
set value(v) {
if (v !== this._inputValue) {
this._inputValue = v;
this.onChangeCallback(v);
}
}
/**
* @return {?}
*/
ngOnInit() {
this.renderer.addClass(this.elementRef.nativeElement, 'label-' + this.labelPosition);
if (!nh.isArray(this.chips)) {
this.chips = new Array();
}
}
/**
* Catch on key event to add a chip on pressing 'Enter'
* @return {?}
*/
onKey() {
/** @type {?} */
let inputValue = this.inputElm.nativeElement.value;
if (this.validateValue(inputValue)) {
this.chips.push(inputValue);
this.inputElm.nativeElement.value = '';
}
else {
// TODO: Push alert
}
}
/**
* @param {?} chipIndex
* @return {?}
*/
removeChip(chipIndex) {
nh.removeAtIndex(this.chips, chipIndex);
}
/**
* @param {?} value
* @return {?}
*/
validateValue(value) {
return value.length > 0 && !(this.uniq && nh.indexOf(this.chips, value) >= 0);
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
this._inputValue = value;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChangeCallback = fn;
}
/**
* @param {?} _chipIndex
* @return {?}
*/
focusChip(_chipIndex) {
// defaut implementation
}
}
AsiInputChipsComponent.decorators = [
{ type: Component, args: [{
selector: 'asi-input-chips',
host: { 'class': 'asi-component asi-input-chips' },
template: "<div class=\"chips\">\n <div class=\"chip\" *ngFor=\"let chip of chips; let i = index\" (click)=\"focusChip(i)\" tabindex=\"0\">\n {{chip}}\n <i class=\"fa fa-times\" (click)=\"removeChip(i)\"></i>\n </div>\n <input #asiInputChips type=\"text\" class=\"asi-focus-error\"\n [attr.id]=\"id\"\n [attr.name]=\"name\"\n [(ngModel)]=\"value\"\n (keydown.enter)=\"onKey()\"\n [attr.disabled]=\"disabled ? '' : null\" \n [placeholder]=\"placeholder\" />\n</div>\n",
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => AsiInputChipsComponent),
multi: true
}
]
}] }
];
/** @nocollapse */
AsiInputChipsComponent.ctorParameters = () => [
{ type: Renderer2 },
{ type: ElementRef }
];
AsiInputChipsComponent.propDecorators = {
id: [{ type: Input }],
name: [{ type: Input }],
label: [{ type: Input }],
labelPosition: [{ type: Input }],
placeholder: [{ type: Input }],
maxlength: [{ type: Input }],
number: [{ type: Input }],
delay: [{ type: Input }],
uniq: [{ type: Input }],
chips: [{ type: Input }],
inputElm: [{ type: ViewChild, args: ['asiInputChips',] }]
};
if (false) {
/**
* html id
* @type {?}
*/
AsiInputChipsComponent.prototype.id;
/**
* html name
* @type {?}
*/
AsiInputChipsComponent.prototype.name;
/**
* Label to display (is translated)
* @type {?}
*/
AsiInputChipsComponent.prototype.label;
/**
* Label position
* @type {?}
*/
AsiInputChipsComponent.prototype.labelPosition;
/**
* Placeholder to display
* @type {?}
*/
AsiInputChipsComponent.prototype.placeholder;
/**
* Max length of the text
* @type {?}
*/
AsiInputChipsComponent.prototype.maxlength;
/**
* Must be a number (internaly set the regex to ^-*[0-9,\.]*$
* @type {?}
*/
AsiInputChipsComponent.prototype.number;
/**
* Delay before the component change value
* @type {?}
*/
AsiInputChipsComponent.prototype.delay;
/**
* Allow you to define only one value
* @type {?}
*/
AsiInputChipsComponent.prototype.uniq;
/**
* Init data
* @type {?}
*/
AsiInputChipsComponent.prototype.chips;
/** @type {?} */
AsiInputChipsComponent.prototype.inputElm;
/** @type {?} */
AsiInputChipsComponent.prototype._inputValue;
/** @type {?} */
AsiInputChipsComponent.prototype.onChangeCallback;
/** @type {?} */
AsiInputChipsComponent.prototype.renderer;
/** @type {?} */
AsiInputChipsComponent.prototype.elementRef;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXNpLWlucHV0LWNoaXBzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0Bhc2ktbmd0b29scy9saWIvIiwic291cmNlcyI6WyJsaWIvY29tcG9uZW50cy9hc2ktaW5wdXQtY2hpcHMvYXNpLWlucHV0LWNoaXBzLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sNENBQTRDLENBQUM7QUFDekYsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDbkQsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxTQUFTLEVBQVUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3ZHLE9BQU8sS0FBSyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFjMUMsTUFBTSw2QkFBOEIsU0FBUSwyQkFBMkI7Ozs7O0lBOENyRSxZQUFvQixRQUFtQixFQUM3QjtRQUNSLEtBQUssRUFBRSxDQUFDO1FBRlUsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUM3QixlQUFVLEdBQVYsVUFBVTs7Ozs2QkFyQzJFLEtBQUs7Ozs7MkJBRzdFLEVBQUU7Ozs7eUJBR0osQ0FBQyxDQUFDOzs7O3NCQUdMLEtBQUs7Ozs7cUJBR04sQ0FBQzs7OztvQkFHRixLQUFLO2dDQVF3QixHQUFHLEVBQUUsSUFBSTtLQWdCckQ7Ozs7SUFkRCxJQUFJLEtBQUs7UUFDUCxNQUFNLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQztLQUN6QjtJQUFBLENBQUM7Ozs7O0lBRUYsSUFBSSxLQUFLLENBQUMsQ0FBTTtRQUNkLEVBQUUsQ0FBQyxDQUFDLENBQUMsS0FBSyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQztZQUMzQixJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsQ0FBQztZQUNyQixJQUFJLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxDQUFDLENBQUM7U0FDMUI7S0FDRjs7OztJQU9ELFFBQVE7UUFDTixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFBRSxRQUFRLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBQ3JGLEVBQUUsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQzVCLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxLQUFLLEVBQVUsQ0FBQztTQUNsQztLQUNGOzs7OztJQU1ELEtBQUs7O1FBQ0gsSUFBSSxVQUFVLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDO1FBQ25ELEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQ25DLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1lBQzVCLElBQUksQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUM7U0FDeEM7UUFBQyxJQUFJLENBQUMsQ0FBQzs7U0FFUDtLQUNGOzs7OztJQUVELFVBQVUsQ0FBQyxTQUFpQjtRQUMxQixFQUFFLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsU0FBUyxDQUFDLENBQUM7S0FDekM7Ozs7O0lBRUQsYUFBYSxDQUFDLEtBQWE7UUFDekIsTUFBTSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxJQUFJLEVBQUUsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQztLQUMvRTs7Ozs7SUFFRCxVQUFVLENBQUMsS0FBYTtRQUN0QixJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztLQUMxQjs7Ozs7SUFFRCxnQkFBZ0IsQ0FBQyxFQUFPO1FBQ3RCLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxFQUFFLENBQUM7S0FDNUI7Ozs7O0lBRUQsU0FBUyxDQUFDLFVBQWtCOztLQUUzQjs7O1lBdEdGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsaUJBQWlCO2dCQUMzQixJQUFJLEVBQUUsRUFBRSxPQUFPLEVBQUUsK0JBQStCLEVBQUU7Z0JBQ2xELG9oQkFBNkM7Z0JBQzdDLFNBQVMsRUFBRTtvQkFDVDt3QkFDRSxPQUFPLEVBQUUsaUJBQWlCO3dCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLHNCQUFzQixDQUFDO3dCQUNyRCxLQUFLLEVBQUUsSUFBSTtxQkFDWjtpQkFDRjthQUNGOzs7O1lBZHFFLFNBQVM7WUFBeEMsVUFBVTs7O2lCQWtCOUMsS0FBSzttQkFFTCxLQUFLO29CQUdMLEtBQUs7NEJBRUwsS0FBSzswQkFHTCxLQUFLO3dCQUdMLEtBQUs7cUJBR0wsS0FBSztvQkFHTCxLQUFLO21CQUdMLEtBQUs7b0JBR0wsS0FBSzt1QkFFTCxTQUFTLFNBQUMsZUFBZSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERlZmF1bHRDb250cm9sVmFsdWVBY2Nlc3NvciB9IGZyb20gJy4vLi4vY29tbW9uL2RlZmF1bHQtY29udHJvbC12YWx1ZS1hY2Nlc3Nvcic7XG5pbXBvcnQgeyBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IENvbXBvbmVudCwgZm9yd2FyZFJlZiwgSW5wdXQsIEVsZW1lbnRSZWYsIFZpZXdDaGlsZCwgT25Jbml0LCBSZW5kZXJlcjIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCAqIGFzIG5oIGZyb20gJy4uLy4uL25hdGl2ZS1oZWxwZXInO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhc2ktaW5wdXQtY2hpcHMnLFxuICBob3N0OiB7ICdjbGFzcyc6ICdhc2ktY29tcG9uZW50IGFzaS1pbnB1dC1jaGlwcycgfSxcbiAgdGVtcGxhdGVVcmw6ICdhc2ktaW5wdXQtY2hpcHMuY29tcG9uZW50Lmh0bWwnLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IEFzaUlucHV0Q2hpcHNDb21wb25lbnQpLFxuICAgICAgbXVsdGk6IHRydWVcbiAgICB9XG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgQXNpSW5wdXRDaGlwc0NvbXBvbmVudCBleHRlbmRzIERlZmF1bHRDb250cm9sVmFsdWVBY2Nlc3NvciBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgLyoqIGh0bWwgaWQgKi9cbiAgQElucHV0KCkgaWQ6IHN0cmluZztcbiAgLyoqIGh0bWwgbmFtZSAqL1xuICBASW5wdXQoKSBuYW1lOiBzdHJpbmc7XG5cbiAgLyoqIExhYmVsIHRvIGRpc3BsYXkgKGlzIHRyYW5zbGF0ZWQpICovXG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmc7XG4gIC8qKkxhYmVsIHBvc2l0aW9uICovXG4gIEBJbnB1dCgpIGxhYmVsUG9zaXRpb246ICd0b3AnIHwgJ2xlZnQnIHwgJ3JpZ2h0JyB8ICdib3R0b20nIHwgJ2JvdHRvbS1jZW50ZXInIHwgJ3RvcC1jZW50ZXInID0gJ3RvcCc7XG5cbiAgLyoqIFBsYWNlaG9sZGVyIHRvIGRpc3BsYXkgKi9cbiAgQElucHV0KCkgcGxhY2Vob2xkZXIgPSAnJztcblxuICAvKiogTWF4IGxlbmd0aCBvZiB0aGUgdGV4dCAqL1xuICBASW5wdXQoKSBtYXhsZW5ndGggPSAtMTtcblxuICAvKiogTXVzdCBiZSBhIG51bWJlciAoaW50ZXJuYWx5IHNldCB0aGUgcmVnZXggdG8gXi0qWzAtOSxcXC5dKiQgKi9cbiAgQElucHV0KCkgbnVtYmVyID0gZmFsc2U7XG5cbiAgLyoqIERlbGF5IGJlZm9yZSB0aGUgY29tcG9uZW50IGNoYW5nZSB2YWx1ZSAqL1xuICBASW5wdXQoKSBkZWxheSA9IDA7XG5cbiAgLyoqIEFsbG93IHlvdSB0byBkZWZpbmUgb25seSBvbmUgdmFsdWUgKi9cbiAgQElucHV0KCkgdW5pcSA9IGZhbHNlO1xuXG4gIC8qKiBJbml0IGRhdGEgKi9cbiAgQElucHV0KCkgY2hpcHM6IEFycmF5PHN0cmluZz47XG5cbiAgQFZpZXdDaGlsZCgnYXNpSW5wdXRDaGlwcycpIGlucHV0RWxtOiBFbGVtZW50UmVmO1xuXG4gIHByaXZhdGUgX2lucHV0VmFsdWU6IGFueTtcbiAgcHJpdmF0ZSBvbkNoYW5nZUNhbGxiYWNrOiAoXzogYW55KSA9PiB2b2lkID0gKCkgPT4geyB9O1xuXG4gIGdldCB2YWx1ZSgpOiBhbnkge1xuICAgIHJldHVybiB0aGlzLl9pbnB1dFZhbHVlO1xuICB9O1xuXG4gIHNldCB2YWx1ZSh2OiBhbnkpIHtcbiAgICBpZiAodiAhPT0gdGhpcy5faW5wdXRWYWx1ZSkge1xuICAgICAgdGhpcy5faW5wdXRWYWx1ZSA9IHY7XG4gICAgICB0aGlzLm9uQ2hhbmdlQ2FsbGJhY2sodik7XG4gICAgfVxuICB9XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyLFxuICAgIHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZikge1xuICAgIHN1cGVyKCk7XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLnJlbmRlcmVyLmFkZENsYXNzKHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCAnbGFiZWwtJyArIHRoaXMubGFiZWxQb3NpdGlvbik7XG4gICAgaWYgKCFuaC5pc0FycmF5KHRoaXMuY2hpcHMpKSB7XG4gICAgICB0aGlzLmNoaXBzID0gbmV3IEFycmF5PHN0cmluZz4oKTtcbiAgICB9XG4gIH1cblxuICAvKipcbiAgICogQ2F0Y2ggb24ga2V5IGV2ZW50IHRvIGFkZCBhIGNoaXAgb24gcHJlc3NpbmcgJ0VudGVyJ1xuICAgKiBAcGFyYW0gJGV2ZW50IHRoZSBldmVudCB0aHJvd24gYnkgcHJlc3NpbmcgJ0VudGVyJyBvbmx5XG4gICAqL1xuICBvbktleSgpIHtcbiAgICBsZXQgaW5wdXRWYWx1ZSA9IHRoaXMuaW5wdXRFbG0ubmF0aXZlRWxlbWVudC52YWx1ZTtcbiAgICBpZiAodGhpcy52YWxpZGF0ZVZhbHVlKGlucHV0VmFsdWUpKSB7XG4gICAgICB0aGlzLmNoaXBzLnB1c2goaW5wdXRWYWx1ZSk7XG4gICAgICB0aGlzLmlucHV0RWxtLm5hdGl2ZUVsZW1lbnQudmFsdWUgPSAnJztcbiAgICB9IGVsc2Uge1xuICAgICAgLy8gVE9ETzogUHVzaCBhbGVydFxuICAgIH1cbiAgfVxuXG4gIHJlbW92ZUNoaXAoY2hpcEluZGV4OiBudW1iZXIpIHtcbiAgICBuaC5yZW1vdmVBdEluZGV4KHRoaXMuY2hpcHMsIGNoaXBJbmRleCk7XG4gIH1cblxuICB2YWxpZGF0ZVZhbHVlKHZhbHVlOiBzdHJpbmcpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdmFsdWUubGVuZ3RoID4gMCAmJiAhKHRoaXMudW5pcSAmJiBuaC5pbmRleE9mKHRoaXMuY2hpcHMsIHZhbHVlKSA+PSAwKTtcbiAgfVxuXG4gIHdyaXRlVmFsdWUodmFsdWU6IHN0cmluZykge1xuICAgIHRoaXMuX2lucHV0VmFsdWUgPSB2YWx1ZTtcbiAgfVxuXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSkge1xuICAgIHRoaXMub25DaGFuZ2VDYWxsYmFjayA9IGZuO1xuICB9XG5cbiAgZm9jdXNDaGlwKF9jaGlwSW5kZXg6IG51bWJlcikge1xuICAgIC8vIGRlZmF1dCBpbXBsZW1lbnRhdGlvblxuICB9XG59XG4iXX0=