ksh-list-input/bundles/ksh-list-input.umd.min.js

This is a custom form control which accepts/validates list of values separated by comma

!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define("ksh-list-input",["exports","@angular/core","@angular/forms","@angular/common","@angular/platform-browser"],e):e((n="undefined"!=typeof globalThis?globalThis:n||self)["ksh-list-input"]={},n.ng.core,n.ng.forms,n.ng.common,n.ng.platformBrowser)}(this,(function(n,e,o,t,r){"use strict";var i=function(){function n(){this.controlValue=[]}return n.prototype.ngOnInit=function(){this.options?this.options.maxHeight<30&&(this.options.maxHeight=70):this.options={maxHeight:70,regexp:null,valueLabel:null}},n.prototype.onBlur=function(){this.onTouched()},n.prototype.valueChanged=function(n){n.target.value=null,this.onChange(this.controlValue)},n.prototype.keyPressed=function(n){if(","===n.key||"Enter"===n.key){var e=n.currentTarget.value.split(",");return this.setValue(e),this.controlValue=this.controlValue.filter(Boolean),n.currentTarget.value=null,this.controlValue=this.controlValue.filter(this.getUniqueArray),this.onChange(this.controlValue),!1}},n.prototype.removeElement=function(n){this.controlValue.splice(this.controlValue.indexOf(n),1)},n.prototype.writeValue=function(n){(n=n.filter(this.getUniqueArray))&&this.setValue(n)},n.prototype.setValue=function(n){var e=this;n.forEach((function(n){e.isValidInput(n.trim())&&(e.controlValue.push(n.trim()),setTimeout((function(){return $("#k-email-box").scrollTop($("#k-email-box")[0].scrollHeight)}),0))}))},n.prototype.getUniqueArray=function(n,e,o){return o.indexOf(n)===e},n.prototype.registerOnChange=function(n){this.onChange=n,this.onChange(this.controlValue)},n.prototype.registerOnTouched=function(n){this.onTouched=n},n.prototype.setDisabledState=function(n){this.disabled=n},n.prototype.isValidInput=function(n){return!this.options.regexp||n.match(this.options.regexp)},n}();i.decorators=[{type:e.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">&times;</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:e.ViewEncapsulation.None,providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return i})),multi:!0}],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    "]}]}],i.ctorParameters=function(){return[]},i.propDecorators={disabled:[{type:e.Input}],options:[{type:e.Input}]};var a=function(){};a.decorators=[{type:e.NgModule,args:[{declarations:[i],imports:[r.BrowserModule,t.CommonModule],exports:[i]}]}],n.KshListInputComponent=i,n.KshListInputModule=a,Object.defineProperty(n,"__esModule",{value:!0})}));
//# sourceMappingURL=ksh-list-input.umd.min.js.map