ksh-list-input
Version:
This is a custom form control which accepts/validates list of values separated by comma
134 lines (126 loc) • 8.23 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('/core'), require('@angular/forms'), require('/common'), require('@angular/platform-browser')) :
typeof define === 'function' && define.amd ? define('ksh-list-input', ['exports', '/core', '@angular/forms', '/common', '@angular/platform-browser'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ksh-list-input'] = {}, global.ng.core, global.ng.forms, global.ng.common, global.ng.platformBrowser));
}(this, (function (exports, core, forms, common, platformBrowser) { 'use strict';
var KshListInputComponent = /** @class */ (function () {
function KshListInputComponent() {
this.controlValue = [];
}
KshListInputComponent.prototype.ngOnInit = function () {
if (this.options) {
if (this.options.maxHeight < 30) {
this.options.maxHeight = 70;
}
}
else {
this.options = {
maxHeight: 70,
regexp: null,
valueLabel: null
};
}
};
KshListInputComponent.prototype.onBlur = function () {
this.onTouched();
};
KshListInputComponent.prototype.valueChanged = function (event) {
event.target.value = null;
this.onChange(this.controlValue);
};
KshListInputComponent.prototype.keyPressed = function (e) {
if (e.key === ',' || e.key === 'Enter') {
var value = e.currentTarget['value'].split(',');
this.setValue(value);
this.controlValue = this.controlValue.filter(Boolean);
e.currentTarget['value'] = null;
this.controlValue = this.controlValue.filter(this.getUniqueArray);
this.onChange(this.controlValue);
return false;
}
};
KshListInputComponent.prototype.removeElement = function (element) {
this.controlValue.splice(this.controlValue.indexOf(element), 1);
};
KshListInputComponent.prototype.writeValue = function (value) {
value = value.filter(this.getUniqueArray);
if (value) {
this.setValue(value);
}
};
KshListInputComponent.prototype.setValue = function (array) {
var _this = this;
array.forEach(function (element) {
if (_this.isValidInput(element.trim())) {
_this.controlValue.push(element.trim());
setTimeout(function () { return $('#k-email-box').scrollTop($('#k-email-box')[0].scrollHeight); }, 0);
}
});
};
KshListInputComponent.prototype.getUniqueArray = function (value, index, self) {
return self.indexOf(value) === index;
};
KshListInputComponent.prototype.registerOnChange = function (fn) {
this.onChange = fn;
this.onChange(this.controlValue);
};
KshListInputComponent.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
KshListInputComponent.prototype.setDisabledState = function (isDisabled) {
this.disabled = isDisabled;
};
KshListInputComponent.prototype.isValidInput = function (value) {
if (this.options.regexp) {
return value.match(this.options.regexp);
}
else {
return true;
}
};
return KshListInputComponent;
}());
KshListInputComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ksh-list-input',
template: "\n <div class=\"kshitij-input-emailbox\">\n <label class=\"value-label\">\n {{ options.valueLabel ? options.valueLabel : 'Values' }}\n </label>\n <div class=\"control-values\" id=\"k-email-box\" [style.max-height.px]=\"options.maxHeight\">\n <span *ngFor=\"let value of controlValue\" class=\"badge badge-pill badge-light input-badge\">\n {{ value }} <span class=\"cursor-pointer\" (click)=\"!disabled ? removeElement(value) : false\">×</span>\n </span>\n </div>\n </div>\n <div class=\"kshitij-input-container\">\n <input class=\"form-control kshitij-input\"\n (change)=\"valueChanged($event)\"\n (blur)=\"onBlur()\"\n (keypress)=\"keyPressed($event)\"\n [attr.disabled]=\"disabled ? true : null\"/>\n </div>\n ",
encapsulation: core.ViewEncapsulation.None,
providers: [{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return KshListInputComponent; }),
multi: true
}],
styles: [".kshitij-input {\n border-top: 0px;\n border-radius: 0px 0px 3px 3px;\n border: 1px solid #d4dadf;\n background: #f5f5f5;\n }\n\n .kshitij-input-container {\n border: 1px solid #d4dadf;\n padding: 0.5rem 0.5rem;\n background: #f5f5f5;\n border-radius: 0 0 3px 3px;\n }\n\n .kshitij-input:focus {\n box-shadow: none;\n }\n\n .kshitij-input-emailbox {\n border: 1px solid #d4dadf;\n border-radius: 3px 3px 0 0;\n padding: 0.5rem 0.5rem;\n background: #f5f5f5;\n }\n\n .cursor-pointer {\n cursor: pointer;\n }\n\n .control-values {\n overflow: auto;\n border: none;\n padding-top: 5px;\n }\n\n .value-label {\n border-bottom: 1px solid #ccc;\n padding-bottom: 0.5rem;\n margin-bottom: 0px;\n }\n\n .input-badge {\n margin-right: 10px;\n border: 1px solid #ccc;\n }\n\n .input-badge .cursor-pointer {\n cursor: pointer;\n }\n\n .input-badge .cursor-pointer:hover {\n color: #dc3545;\n }\n\n label {\n display: block;\n }\n\n .badge-pill {\n padding-right: .6em;\n padding-left: .6em;\n border-radius: 10rem;\n }\n\n .badge {\n display: inline-block;\n padding: .25em .4em;\n font-size: 75%;\n font-weight: 700;\n line-height: 1;\n text-align: center;\n white-space: nowrap;\n vertical-align: baseline;\n border-radius: .25rem;\n }\n\n .badge-light {\n color: #212529;\n background-color: #f8f9fa;\n }\n\n .form-control {\n display: block;\n width: 100%;\n font-size: 1rem;\n line-height: 1.7;\n color: #495057;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid #ced4da;\n border-radius: .25rem;\n transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;\n }\n\n .form-control:focus {\n color: #495057;\n background-color: #fff;\n border-color: #80bdff;\n outline: 0;\n box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);\n }\n "]
},] }
];
KshListInputComponent.ctorParameters = function () { return []; };
KshListInputComponent.propDecorators = {
disabled: [{ type: core.Input }],
options: [{ type: core.Input }]
};
var KshListInputModule = /** @class */ (function () {
function KshListInputModule() {
}
return KshListInputModule;
}());
KshListInputModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [KshListInputComponent],
imports: [
platformBrowser.BrowserModule,
common.CommonModule
],
exports: [KshListInputComponent]
},] }
];
/*
* Public API Surface of ksh-list-input
*/
/**
* Generated bundle index. Do not edit.
*/
exports.KshListInputComponent = KshListInputComponent;
exports.KshListInputModule = KshListInputModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ksh-list-input.umd.js.map