@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
2 lines • 9.95 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("lodash-es/isEmpty"),require("rxjs"),require("rxjs/operators"),require("@angular/forms"),require("@angular/common")):"function"==typeof define&&define.amd?define("ng-devui/tags-input",["exports","@angular/core","lodash-es/isEmpty","rxjs","rxjs/operators","@angular/forms","@angular/common"],e):e(((t=t||self)["ng-devui"]=t["ng-devui"]||{},t["ng-devui"]["tags-input"]={}),t.ng.core,t.isEmpty,t.rxjs,t.rxjs.operators,t.ng.forms,t.ng.common)}(this,(function(t,e,i,s,n,o,r){"use strict";i=i&&i.hasOwnProperty("default")?i.default:i;var a=function(){function t(){this.tags=[],this.displayProperty="name",this.placeholder="",this.minLength=3,this.maxLength=Number.MAX_SAFE_INTEGER,this.minTags=0,this.maxTags=Number.MAX_SAFE_INTEGER,this.spellcheck=!0,this.suggestionList=[],this.isAddBySpace=!0,this.caseSensitivity=!1,this.valueChange=new e.EventEmitter,this.newTag="",this.showSuggestionList=!1,this.availableOptions=[],this.newTagValid=!1,this.isReduce=!1,this.KEYS={backspace:8,tab:9,enter:13,escape:27,space:32,up:38,down:40,left:37,right:39,delete:46,comma:188},this.selectIndex=0}return t.prototype.ngOnInit=function(){var t=this;this.newTag="",this.searchFn=function(e){return s.of((t.suggestionList?t.suggestionList:[]).filter((function(i){return""===e||(t.caseSensitivity?-1!==i[t.displayProperty].indexOf(e):-1!==i[t.displayProperty].toLowerCase().indexOf(e.toLowerCase()))})))},this.registerFilterChange()},t.prototype.ngOnChanges=function(t){t&&t.suggestionList&&t.suggestionList.currentValue&&(this.reduceSuggestionList(),this.sourceSubscription&&this.searchFn&&this.sourceSubscription.next("")),t&&t.tags&&t.tags.currentValue&&this.reduceSuggestionList()},t.prototype.registerFilterChange=function(){var t=this;this.sourceSubscription=new s.BehaviorSubject(""),this.sourceSubscription.pipe(n.map((function(e){return t.tagIsValid(),e})),n.switchMap((function(e){return t.searchFn(e)}))).subscribe((function(e){t.availableOptions=e,!t.availableOptions||t.availableOptions.length<=0?t.selectIndex=-1:t.selectIndex=0})),s.fromEvent(this.tagInputElement.nativeElement,"input").pipe(n.map((function(t){return t.target.value})),n.filter((function(t){return!0})),n.debounceTime(100)).subscribe((function(e){return t.sourceSubscription.next(e)}))},t.prototype.reduceSuggestionList=function(){var t=this;this.isReduce||this.suggestionList.length>0&&this.tags.length>0&&(this.isReduce=!0,this.suggestionList=this.suggestionList.filter((function(e){return-1===t.tags.findIndex((function(i){return t.caseSensitivity?i[t.displayProperty]===e[t.displayProperty]:i[t.displayProperty].toLowerCase()===e[t.displayProperty].toLowerCase()}))})),this.sourceSubscription&&this.searchFn&&this.sourceSubscription.next(""))},t.prototype.host_click=function(){this.tagInputElement.nativeElement.focus(),this.selectIndex=0},t.prototype.input_keydown=function(t){var e=this,i=[this.KEYS.enter,this.KEYS.tab,this.KEYS.up,this.KEYS.down];this.isAddBySpace&&i.push(this.KEYS.space),-1!==i.indexOf(t.keyCode)&&(t.keyCode===this.KEYS.down?this.select(++this.selectIndex):t.keyCode===this.KEYS.up?this.select(--this.selectIndex):(t.keyCode===this.KEYS.enter||t.keyCode===this.KEYS.tab)&&-1!==this.selectIndex?setTimeout((function(){e.addSuggestionByIndex(e.selectIndex,e.availableOptions[e.selectIndex])}),50):this.addTag())},t.prototype.select=function(t){t<0?t=this.suggestionList.length-1:t>=this.suggestionList.length&&(t=0),this.selectIndex=t},t.prototype.input_focus=function(t){this.showSuggestionList=!0},t.prototype.input_blur=function(t){i(this.newTag)||this.addTag()},t.prototype.addSuggestionByIndex=function(t,e){var i=this;t<0||t>=this.availableOptions.length||this.maxTags<=this.tags.length||-1!==this.tags.findIndex((function(t){return i.caseSensitivity?t[i.displayProperty]===e[i.displayProperty]:t[i.displayProperty].toLowerCase()===e[i.displayProperty].toLowerCase()}))||this.canAdd().then((function(s){if(s){i.tags.push(i.availableOptions[t]),i.valueChange.emit(i.availableOptions[t]);var n=i.suggestionList.findIndex((function(t){return i.caseSensitivity?t[i.displayProperty]===e[i.displayProperty]:t[i.displayProperty].toLowerCase()===e[i.displayProperty].toLowerCase()}));i.suggestionList.splice(n,1),i.newTag="",i.sourceSubscription.next(i.newTag)}}))},t.prototype.removeTag=function(t){if(!(t<0||t>=this.tags.length)){this.availableOptions.push(this.tags[t]),this.suggestionList=this.availableOptions;var e=this.tags[t];this.tags.splice(t,1),this.valueChange.emit(e)}},t.prototype.tagIsValid=function(){var t=this,e=this.newTag,i=this.displayProperty,s=e&&e.length>=this.minLength&&e.length<=this.maxLength&&-1===this.suggestionList.findIndex((function(s){return t.caseSensitivity?s[i]===e:s[i].toLowerCase()===e.toLowerCase()}))&&-1===this.tags.findIndex((function(s){return t.caseSensitivity?s[i]===e:s[i].toLowerCase()===e.toLowerCase()}))&&!this.isEmptyString(e);return this.newTagValid=""===e||!!s,s},t.prototype.isEmptyString=function(t){var e=t.match(/\s/g);return!!e&&t.length===e.length},t.prototype.addTag=function(){var t=this;this.canAdd().then((function(e){if(e&&t.maxTags>t.tags.length){if(t.tagIsValid()){var i={};i[t.displayProperty]=t.newTag,t.tags.push(i),t.valueChange.emit(t.newTag)}setTimeout((function(){t.newTag=""}),50)}else t.newTagValid=!1})),this.sourceSubscription.next("")},t.prototype.canAdd=function(){var t=Promise.resolve(!0);if(this.checkBeforeAdd){var e=this.checkBeforeAdd(this.newTag);void 0!==e&&(t=e.then?e:e.subscribe?e.toPromise():Promise.resolve(e))}return t},t.prototype.onDocumentClick=function(t){this.showSuggestionList&&!this.selectBoxElement.nativeElement.contains(t.target)&&(this.showSuggestionList=!1)},t.prototype.ngOnDestroy=function(){this.sourceSubscription&&this.sourceSubscription.unsubscribe()},t.decorators=[{type:e.Component,args:[{selector:"d-tags-input",template:'<div #selectBox class="devui-tags-host" tabindex="-1" (click)="host_click()">\r\n <div class="devui-tags">\r\n <ul class="devui-tag-list">\r\n <li class="devui-tag-item" *ngFor="let tag of tags; let index = index">\r\n <span>{{ tag[displayProperty] }}</span>\r\n <a class="remove-button" (click)="removeTag(index)">×</a>\r\n </li>\r\n </ul>\r\n <input\r\n #tagInput\r\n class="input devui-input"\r\n [(ngModel)]="newTag"\r\n (keydown)="input_keydown($event)"\r\n (focus)="input_focus($event)"\r\n (blur)="input_blur($event)"\r\n (trim)="(false)"\r\n [placeholder]="placeholder"\r\n [spellcheck]="spellcheck"\r\n [ngClass]="{ \'invalid-tag\': !newTagValid }"\r\n type="text"\r\n />\r\n </div>\r\n <div class="devui-tags-autocomplete" *ngIf="showSuggestionList && availableOptions?.length">\r\n <ul class="devui-suggestion-list">\r\n <li\r\n class="devui-suggestion-item"\r\n *ngFor="let item of availableOptions; let index = index"\r\n [ngClass]="{ selected: index === selectIndex }"\r\n (mousedown)="addSuggestionByIndex(index, item)"\r\n >\r\n {{ item[displayProperty] }}\r\n </li>\r\n </ul>\r\n </div>\r\n</div>\r\n',exportAs:"TagsInput",styles:[":host{display:block}.devui-tags-host{position:relative;height:100%}.devui-tags-host:active{outline:0}.devui-tags{-moz-appearance:textfield;-webkit-appearance:textfield;padding:2px 5px;overflow:hidden;word-wrap:break-word;cursor:text;background-color:#fff;border:1px solid #adb0b8;border-radius:1px;height:100%}.devui-tags:hover{border-color:#344899}.devui-tags.focused{outline:0}.devui-tags .devui-tag-list{margin:0;padding:0;list-style-type:none}.devui-tags .devui-tag-item{margin:2px;padding:0 5px;display:inline-block;min-height:20px;line-height:20px;border-radius:1px;color:#252b3a;background-color:#eef0f5}.devui-tags .devui-tag-item .remove-button{margin:0 0 0 5px;padding:0;border:none;background:0 0;cursor:pointer;vertical-align:top;font-size:16px;line-height:20px;color:#252b3a}.devui-tags .devui-tag-item .remove-button:hover{text-decoration:none}.devui-tags input.devui-input{border:0;outline:0;float:left;width:100%;height:26px;font-size:14px;padding-left:5px}.devui-tags input.devui-input::-ms-clear{display:none}.devui-tags-autocomplete{margin-top:5px;position:absolute;padding:5px 0;z-index:99999;width:100%;background-color:#fff;border:#adb0b8;box-shadow:0 5px 10px rgba(41,48,64,.2)}.devui-tags-autocomplete .devui-suggestion-list{margin:0;padding:0;list-style-type:none;max-height:280px;overflow-y:auto;position:relative}.devui-tags-autocomplete .devui-suggestion-list .devui-suggestion-item{padding:5px 10px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;line-height:20px;color:#252b3a;background-color:#fff}.devui-tags-autocomplete .devui-suggestion-list .devui-suggestion-item:hover{background-color:#f2f5fc}.devui-tags-autocomplete .devui-suggestion-list .devui-suggestion-item.selected{color:#5e7ce0;background-color:#f2f5fc}"]}]}],t.propDecorators={tags:[{type:e.Input}],displayProperty:[{type:e.Input}],placeholder:[{type:e.Input}],minLength:[{type:e.Input}],maxLength:[{type:e.Input}],minTags:[{type:e.Input}],maxTags:[{type:e.Input}],spellcheck:[{type:e.Input}],suggestionList:[{type:e.Input}],isAddBySpace:[{type:e.Input}],caseSensitivity:[{type:e.Input}],checkBeforeAdd:[{type:e.Input}],valueChange:[{type:e.Output}],tagInputElement:[{type:e.ViewChild,args:["tagInput",{static:!0}]}],selectBoxElement:[{type:e.ViewChild,args:["selectBox",{static:!0}]}],onDocumentClick:[{type:e.HostListener,args:["document:click",["$event"]]}]},t}();var u=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[r.CommonModule,o.FormsModule],exports:[a],declarations:[a]}]}],t}();t.TagsInputComponent=a,t.TagsInputModule=u,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-devui-tags-input.umd.min.js.map