ngx-tags
Version:
To install this library, run:
2 lines • 12.6 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/platform-browser"),require("@angular/forms"),require("rxjs"),require("rxjs/operators"),require("@angular/core")):"function"==typeof define&&define.amd?define("ngx-tags",["exports","@angular/platform-browser","@angular/forms","rxjs","rxjs/operators","@angular/core"],e):e(t["ngx-tags"]={},t.ng.platformBrowser,t.ng.forms,t.rxjs,t.rxjs.operators,t.ng.core)}(this,function(t,e,n,o,i,a){"use strict";var r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function s(){}var p=(Object.defineProperty(l.prototype,"value",{get:function(){return this._value},set:function(t){t!==this._value&&(this._value=t,this.onChangeCallback(t))},enumerable:!0,configurable:!0}),l.prototype.writeValue=function(t){t!==this._value&&(this._value=t)},l.prototype.registerOnChange=function(t){this.onChangeCallback=t},l.prototype.registerOnTouched=function(t){this.onTouchedCallback=t},l.prototype.setDisabledState=function(t){this.disabled=t},l);function l(){this.onTouchedCallback=s,this.onChangeCallback=s,this._value=[]}var u,c=(function C(t,e){function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}(d,u=p),Object.defineProperty(d.prototype,"tags",{get:function(){return this._value},enumerable:!0,configurable:!0}),d.prototype.whenClickedOut=function(){this.isMenuOpen=!1},d.prototype.enter=function(t){if(this.onlyFromDropdown)return t.stopProgation(),!1;this.inputTag.trim()&&(this.addToModal(this.inputTag),this.clearInput())},d.prototype.save=function(t){this._value[t.index][this.tagLabel]=t.item.trim(),this.emitChange(this.actionTypes.update,this._value[t.index])},d.prototype.blur=function(){this.clearOnBlur&&this.clearInput()},d.prototype.clearInput=function(){this.inputTag=""},d.prototype.del=function(t){this.canDeleteTags&&(this._value.splice(t,1),this.emitChange(this.actionTypes["delete"],this._value))},d.prototype.backspace=function(){this.removeLastOnBackspace||this.inputTag.trim()||this._value.pop()},d.prototype.input=function(){this.inputTag.trim()&&(this._options=this.filterByInput(this.options),this.isMenuOpen=!0)},d.prototype.filterByInput=function(t){var e=this;return t.filter(function(t){return!!("string"!=typeof t&&e.tagLabel?t[e.tagLabel]:t).toLowerCase().includes(e.inputTag.trim().toLowerCase())})},d.prototype.select=function(t){this.addToModal(t.value),this.clearInput(),this.whenClickedOut()},d.prototype.addToModal=function(t){if(!this.hasReachedMaxTags()){var e=this.createTag(t);this.allowDupes?(this._value.push(e),this.emitChange(this.actionTypes.add,e)):this.isDuplicate(e)&&(this._value.push(e),this.emitChange(this.actionTypes.add,e))}},d.prototype.createTag=function(t){var e;return"string"!=typeof t?t:((e={})[this.tagValue]=t,e[this.tagLabel]=t,e)},d.prototype.hasReachedMaxTags=function(){return!!this.maxTags&&this.maxTags===this._value.length},d.prototype.isDuplicate=function(t){return-1===this._value.indexOf(t)},d.prototype.emitChange=function(t,e){this.change.emit({type:t,value:e})},d.decorators=[{type:a.Component,args:[{selector:"ngx-tags",template:'<section class="ngx-tags">\n <section class="tag-container" [closeMenu]="isMenuOpen" (whenClickedOut)="whenClickedOut()" [ngClass]="{\'ngx-tags-disabled\':disabled}" >\n <span class="tag" *ngFor="let tag of tags;let $index = index" [ngClass]="{\'tag-readonly\': tag.readonly}">\n <ng-container [ngTemplateOutletContext]="{ item: tag, index: $index,tagLabel:tagLabel,tagEditable:tagEditable }"\n [ngTemplateOutlet]="tagTemplate ? tagTemplate:defaultTagItemTemplate">\n </ng-container>\n <a href="#" class="close" [hidden]="!canDeleteTags" (click)="del($index)"></a>\n </span>\n <span class="tag-input" >\n <input type="text" *ngIf="canAddTags" [(ngModel)]="inputTag" (blur)="blur()"\n [placeholder]="placeholder" (keydown.enter)="enter($event)" (keydown.backspace)="backspace()"\n (input)="input()">\n </span>\n </section>\n <ngx-tags-dropdown [items]="_options" [dropdownItemTemplate]="dropdownItemTemplate" [tagLabel]="tagLabel" [inputTag]="inputTag" (select)="select($event) " [hidden]="!isMenuOpen"></ngx-tags-dropdown>\n</section>\n\n<ng-template #defaultTagItemTemplate let-item="item" let-tagLabel="tagLabel" let-input="input" let-tagEditable="tagEditable" let-index="index">\n <ngx-tag [item]="item" [tagEditable]="tagEditable" [tagLabel]="tagLabel" [index]="index" (change)="save($event)"></ngx-tag>\n</ng-template>',providers:[{provide:n.NG_VALUE_ACCESSOR,useExisting:a.forwardRef(function(){return d}),multi:!0}],encapsulation:a.ViewEncapsulation.None,styles:[".ngx-tags{position:relative;display:block;width:100%}.ngx-tags .ngx-tags-disabled{opacity:.7;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.ngx-tags .tag-container{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;box-sizing:border-box}.ngx-tags .tag-container .tag,.ngx-tags .tag-container .tag-input{background:#9dc1ff;padding:.25rem;border-radius:.25rem;margin-right:.25rem;display:inline-flex;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ngx-tags .tag-container .tag-input{background:#fff}.ngx-tags .tag-container .tag-input input{border:none;outline:0;min-width:140px;max-width:100%;height:100%;margin-left:4px;box-sizing:border-box;display:inline-block}.ngx-tags .tag-container .tag-readonly{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;opacity:.7}.ngx-tags .tag-container .close{position:relative;display:inline-block;width:10px;height:10px;opacity:.8}.ngx-tags .tag-container .close:hover{opacity:1}.ngx-tags .tag-container .close:after,.ngx-tags .tag-container .close:before{position:absolute;left:3px;content:' ';height:11px;width:2px;background-color:#333}.ngx-tags .tag-container .close:before{transform:rotate(45deg)}.ngx-tags .tag-container .close:after{transform:rotate(-45deg)}.item:hover,.keynav-active{background:#e1e4e8}.dropdown{margin:0;padding:0;border:1px solid #e1e4e8;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);border-radius:2px;max-height:200px;overflow-y:auto;position:absolute;background:#fff;display:block;width:100%;z-index:1}.item{padding:4px 2px;display:block}"]}]}],d.ctorParameters=function(){return[]},d.propDecorators={tagTemplate:[{type:a.Input}],dropdownItemTemplate:[{type:a.Input}],options:[{type:a.Input}],maxTags:[{type:a.Input}],tagLabel:[{type:a.Input}],tagValue:[{type:a.Input}],removeLastOnBackspace:[{type:a.Input}],canDeleteTags:[{type:a.Input}],canAddTags:[{type:a.Input}],clearOnBlur:[{type:a.Input}],allowDupes:[{type:a.Input}],onlyFromDropdown:[{type:a.Input}],tagEditable:[{type:a.Input}],change:[{type:a.Output}]},d);function d(){var t=u.call(this)||this;return t.isMenuOpen=!1,t.inputTag="",t.placeholder="add a tag",t.actionTypes={add:"add","delete":"delete",update:"update"},t.tagLabel="tagLabel",t.tagValue="tagValue",t.clearOnBlur=!0,t.allowDupes=!1,t.onlyFromDropdown=!1,t.tagEditable=!1,t.change=new a.EventEmitter,t}var g="ArrowUp",h="ArrowDown",f="Escape",m="Enter",y=(b.prototype.onKeydownHandler=function(t){this.navKey$.next(t)},b.prototype.ngOnInit=function(){this.navDropdown(),this.selectOnEnter()},b.prototype.ngOnChanges=function(t){t.items&&(this._focusIndex=0)},b.prototype.selectOnEnter=function(){var e=this;this.navKey$.pipe(i.map(function(t){return t.key}),i.filter(function(t){return e.items&&e.items.length}),i.filter(function(t){return t===m}),i.takeUntil(this.destroy$)).subscribe(function(t){e.emitSelectedItem(e.items[e._focusIndex],e._focusIndex)})},b.prototype.navDropdown=function(){var n=this;this.navKey$.pipe(i.map(function(t){return t.key}),i.filter(function(t){return n.items&&n.items.length}),i.filter(function(t){return t===h||t===g}),i.takeUntil(this.destroy$)).subscribe(function(t){if(n.items.length){var e=0;t===h?e=(e=n._focusIndex+1)===n.items.length?0:e:t===g&&(e=-1==(e=n._focusIndex-1)?n.items.length-1:e),n._focusIndex=e}})},b.prototype.emitSelectedItem=function(t,e){this.select.emit({key:e,value:t})},b.prototype.ngOnDestroy=function(){this.destroy$.next(!0),this.destroy$.unsubscribe()},b.decorators=[{type:a.Component,args:[{selector:"ngx-tags-dropdown",template:'<article class="dropdown" #dropdown tabindex="0">\n\t<a class="item" *ngFor="let item of items;let $index =index" (click)="emitSelectedItem(item,$index)" [ngClass]="{\'keynav-active\':$index == _focusIndex}" [InView]="$index == _focusIndex" >\n <ng-container \n [ngTemplateOutletContext]="{ \n item: item, \n label: tagLabel, \n input: inputTag, \n index: index }"\n [ngTemplateOutlet]="dropdownItemTemplate ? dropdownItemTemplate : defaultDropdownItemTemplate">\n </ng-container>\n </a>\n</article>\n<ng-template \n #defaultDropdownItemTemplate\n let-item="item"\n let-label="label"\n let-input="input"\n let-index="index">\n <span > {{item[label]}}</span>\n</ng-template>\n',encapsulation:a.ViewEncapsulation.None}]}],b.ctorParameters=function(){return[]},b.propDecorators={items:[{type:a.Input}],tagLabel:[{type:a.Input}],inputTag:[{type:a.Input}],dropdownItemTemplate:[{type:a.Input}],select:[{type:a.Output}],onKeydownHandler:[{type:a.HostListener,args:["document:keydown",["$event"]]}]},b);function b(){this._focusIndex=-1,this.navKey$=new o.Subject,this.destroy$=new o.Subject,this.select=new a.EventEmitter}var x=(Object.defineProperty(v.prototype,"isEditable",{get:function(){return this.tagContent.nativeElement.contentEditable},set:function(t){this.tagContent.nativeElement.contentEditable=t},enumerable:!0,configurable:!0}),v.prototype.dbclick=function(t){this.tagEditable&&(this.isEditable=!0)},v.prototype.keydownHandler=function(t){this.isEditable&&t.key===f&&this.toggleEditMode()},v.prototype.toggleEditMode=function(){this.isEditable=!this.isEditable},v.prototype.save=function(t){t.preventDefault();var e=this.tagContent.nativeElement.innerHTML.trim();e&&this.change.emit({item:e,index:this.index}),this.toggleEditMode()},v.prototype.blur=function(){this.isEditable=!1},v.decorators=[{type:a.Component,args:[{selector:"ngx-tag",template:'<span (keydown.enter)="save($event)" contenteditable="false" (blur)="blur()" #tagContent>\n {{(tagLabel) ? item[tagLabel] : item }}\n</span>\n\n\n'}]}],v.ctorParameters=function(){return[]},v.propDecorators={item:[{type:a.Input}],tagLabel:[{type:a.Input}],index:[{type:a.Input}],tagEditable:[{type:a.Input}],change:[{type:a.Output}],tagContent:[{type:a.ViewChild,args:["tagContent"]}],dbclick:[{type:a.HostListener,args:["dblclick",["$event"]]}],keydownHandler:[{type:a.HostListener,args:["keydown",["$event"]]}]},v);function v(){this.change=new a.EventEmitter}var w=(T.prototype.onMouseUp=function(t){this.closeMenu&&this.isOutside(t)},T.prototype.isOutside=function(t){this.$elem.nativeElement.contains(event.target)||"none"===this.$elem.nativeElement.style.display||this.whenClickedOut.emit()},T.decorators=[{type:a.Directive,args:[{selector:"[closeMenu]"}]}],T.ctorParameters=function(){return[{type:a.ElementRef}]},T.propDecorators={whenClickedOut:[{type:a.Output}],closeMenu:[{type:a.Input}],onMouseUp:[{type:a.HostListener,args:["document:mouseup",["$event"]]}]},T);function T(t){this.$elem=t,this.whenClickedOut=new a.EventEmitter}var I=(k.prototype.ngOnChanges=function(t){t.InView.currentValue&&this.setInView()},k.prototype.setInView=function(){var t=this.el.nativeElement.closest(".dropdown"),e=this.el.nativeElement.offsetTop,n=t.scrollTop;n+t.offsetHeight<e+this.el.nativeElement.offsetHeight?t.scrollTop=e:e<n&&(t.scrollTop=e)},k.decorators=[{type:a.Directive,args:[{selector:"[InView]"}]}],k.ctorParameters=function(){return[{type:a.ElementRef}]},k.propDecorators={InView:[{type:a.Input}]},k);function k(t){this.el=t,this.dropdown=this.el.nativeElement.closest(".dropdown")}var E=(O.decorators=[{type:a.NgModule,args:[{imports:[e.BrowserModule,n.FormsModule],declarations:[c,y,x,w,I],exports:[c]}]}],O);function O(){}t.NgxTagsModule=E,t.ɵc=y,t.ɵd=x,t.ɵe=w,t.ɵf=I,t.ɵa=c,t.ɵb=p,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-tags.umd.min.js.map