UNPKG

ng-zorro-antd

Version:

An enterprise-class UI components based on Ant Design and Angular

2 lines 11.9 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("ng-zorro-antd/icon"),require("@angular/forms"),require("@angular/cdk/keycodes"),require("@angular/cdk/overlay"),require("@angular/cdk/portal"),require("@angular/common"),require("@angular/core"),require("rxjs"),require("ng-zorro-antd/core")):"function"==typeof define&&define.amd?define("ng-zorro-antd/mention",["exports","ng-zorro-antd/icon","@angular/forms","@angular/cdk/keycodes","@angular/cdk/overlay","@angular/cdk/portal","@angular/common","@angular/core","rxjs","ng-zorro-antd/core"],e):e((t["ng-zorro-antd"]=t["ng-zorro-antd"]||{},t["ng-zorro-antd"].mention={}),t["ng-zorro-antd"].icon,t.ng.forms,t.ng.cdk.keycodes,t.ng.cdk.overlay,t.ng.cdk.portal,t.ng.common,t.ng.core,t.rxjs,t["ng-zorro-antd"].core)}(this,function(t,e,n,i,o,r,s,a,l,c){"use strict";function u(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var i,o,r=n.call(t),s=[];try{for(;(void 0===e||0<e--)&&!(i=r.next()).done;)s.push(i.value)}catch(a){o={error:a}}finally{try{i&&!i.done&&(n=r["return"])&&n.call(r)}finally{if(o)throw o.error}}return s}function g(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(u(arguments[e]));return t}var p=(h.decorators=[{type:a.Directive,args:[{selector:"[nzMentionSuggestion]",exportAs:"nzMentionSuggestion"}]}],h);function h(){}var f={provide:n.NG_VALUE_ACCESSOR,useExisting:a.forwardRef(function(){return d}),multi:!0},d=(v.prototype.ngOnDestroy=function(){this.completeEvents()},v.prototype.completeEvents=function(){this.onFocusin.complete(),this.onBlur.complete(),this.onInput.complete(),this.onKeydown.complete(),this.onClick.complete()},v.prototype.focus=function(t){this.el.nativeElement.focus(),this.el.nativeElement.setSelectionRange(t,t)},v.prototype.insertMention=function(t){var e=this.el.nativeElement.value,n=t.mention.trim()+" ",i=[e.slice(0,t.startPos+1),n,e.slice(t.endPos,e.length)].join("");this.el.nativeElement.value=i,this.focus(t.startPos+n.length+1),this.onChange(i),this.value=i},v.prototype.writeValue=function(t){this.value=t,this.el.nativeElement.value="string"==typeof t?t:""},v.prototype.registerOnChange=function(t){this.onChange=t},v.prototype.registerOnTouched=function(t){this.onTouched=t},v.decorators=[{type:a.Directive,args:[{selector:"input[nzMentionTrigger], textarea[nzMentionTrigger]",exportAs:"nzMentionTrigger",providers:[f],host:{autocomplete:"off","(focusin)":"onFocusin.emit()","(blur)":"onBlur.emit()","(input)":"onInput.emit($event)","(keydown)":"onKeydown.emit($event)","(click)":"onClick.emit($event)"}}]}],v.ctorParameters=function(){return[{type:a.ElementRef}]},v);function v(t){this.el=t,this.onFocusin=new a.EventEmitter,this.onBlur=new a.EventEmitter,this.onInput=new a.EventEmitter,this.onKeydown=new a.EventEmitter,this.onClick=new a.EventEmitter}var y=(Object.defineProperty(m.prototype,"suggestionChild",{set:function(t){t&&(this.suggestionTemplate=t)},enumerable:!0,configurable:!0}),Object.defineProperty(m.prototype,"triggerNativeElement",{get:function(){return this.trigger.el.nativeElement},enumerable:!0,configurable:!0}),m.prototype.ngOnChanges=function(t){t.hasOwnProperty("nzSuggestions")&&this.isOpen&&(this.previousValue=null,this.activeIndex=-1,this.resetDropdown(!1))},m.prototype.ngAfterContentInit=function(){this.bindTriggerEvents()},m.prototype.ngOnDestroy=function(){this.closeDropdown()},m.prototype.closeDropdown=function(){this.overlayRef&&this.overlayRef.hasAttached()&&(this.overlayRef.detach(),this.overlayBackdropClickSubscription.unsubscribe(),this.isOpen=!1,this.changeDetectorRef.markForCheck())},m.prototype.openDropdown=function(){this.attachOverlay(),this.isOpen=!0,this.changeDetectorRef.markForCheck()},m.prototype.getMentions=function(){return c.getMentions(this.trigger.value,this.nzPrefix)},m.prototype.selectSuggestion=function(t){var e=this.nzValueWith(t);this.trigger.insertMention({mention:e,startPos:this.cursorMentionStart,endPos:this.cursorMentionEnd}),this.nzOnSelect.emit(t),this.closeDropdown(),this.activeIndex=-1},m.prototype.handleInput=function(t){var e=t.target;this.trigger.onChange(e.value),this.trigger.value=e.value,this.resetDropdown()},m.prototype.handleKeydown=function(t){var e=t.keyCode;if(this.isOpen&&e===i.ENTER&&-1!==this.activeIndex&&this.filteredSuggestions.length)this.selectSuggestion(this.filteredSuggestions[this.activeIndex]),t.preventDefault();else if(e===i.LEFT_ARROW||e===i.RIGHT_ARROW)this.resetDropdown(),t.stopPropagation();else{if(this.isOpen&&(e===i.TAB||e===i.ESCAPE))return void this.closeDropdown();this.isOpen&&e===i.UP_ARROW&&(this.setPreviousItemActive(),t.preventDefault(),t.stopPropagation()),this.isOpen&&e===i.DOWN_ARROW&&(this.setNextItemActive(),t.preventDefault(),t.stopPropagation())}},m.prototype.handleClick=function(){this.resetDropdown()},m.prototype.bindTriggerEvents=function(){var e=this;this.trigger.onInput.subscribe(function(t){return e.handleInput(t)}),this.trigger.onKeydown.subscribe(function(t){return e.handleKeydown(t)}),this.trigger.onClick.subscribe(function(){return e.handleClick()})},m.prototype.suggestionsFilter=function(t,e){var n=this,i=t.substring(1);if(this.previousValue!==t){this.previousValue=t,e&&this.nzOnSearchChange.emit({value:this.cursorMention.substring(1),prefix:this.cursorMention[0]});var o=i.toLowerCase();this.filteredSuggestions=this.nzSuggestions.filter(function(t){return n.nzValueWith(t).toLowerCase().includes(o)})}},m.prototype.resetDropdown=function(t){if(void 0===t&&(t=!0),this.resetCursorMention(),"string"==typeof this.cursorMention&&this.canOpen()){this.suggestionsFilter(this.cursorMention,t);var e=this.filteredSuggestions.indexOf(this.cursorMention.substring(1));this.activeIndex=0<=e?e:0,this.openDropdown()}else this.closeDropdown()},m.prototype.setNextItemActive=function(){this.activeIndex=this.activeIndex+1<=this.filteredSuggestions.length-1?this.activeIndex+1:0,this.changeDetectorRef.markForCheck()},m.prototype.setPreviousItemActive=function(){this.activeIndex=this.activeIndex-1<0?this.filteredSuggestions.length-1:this.activeIndex-1,this.changeDetectorRef.markForCheck()},m.prototype.canOpen=function(){var t=this.triggerNativeElement;return!t.readOnly&&!t.disabled},m.prototype.resetCursorMention=function(){for(var t=this.triggerNativeElement.value.replace(/[\r\n]/g," ")||"",e=this.triggerNativeElement.selectionStart,n="string"==typeof this.nzPrefix?[this.nzPrefix]:this.nzPrefix,i=n.length;0<=i;){var o=t.lastIndexOf(n[i],e),r=-1<t.indexOf(" ",e)?t.indexOf(" ",e):t.length,s=t.substring(o,r);if(!(0<o&&" "!==t[o-1]||o<0||s.includes(n[i],1)||s.includes(" ")))return this.cursorMention=s,this.cursorMentionStart=o,void(this.cursorMentionEnd=r);this.cursorMention=null,this.cursorMentionStart=-1,this.cursorMentionEnd=-1,i--}},m.prototype.updatePositions=function(){var t=c.getCaretCoordinates(this.triggerNativeElement,this.cursorMentionStart),e=t.top-this.triggerNativeElement.getBoundingClientRect().height-this.triggerNativeElement.scrollTop+("bottom"===this.nzPlacement?t.height:0),n=t.left-this.triggerNativeElement.scrollLeft;this.positionStrategy.withDefaultOffsetX(n).withDefaultOffsetY(e),"bottom"===this.nzPlacement&&this.positionStrategy.withPositions([c.DEFAULT_MENTION_POSITIONS[0]]),"top"===this.nzPlacement&&this.positionStrategy.withPositions([c.DEFAULT_MENTION_POSITIONS[1]]),this.positionStrategy.apply()},m.prototype.subscribeOverlayBackdropClick=function(){var e=this;return l.merge(l.fromEvent(this.ngDocument,"click"),l.fromEvent(this.ngDocument,"touchend")).subscribe(function(t){t.target!==e.trigger.el.nativeElement&&e.isOpen&&e.closeDropdown()})},m.prototype.attachOverlay=function(){this.overlayRef||(this.portal=new r.TemplatePortal(this.suggestionsTemp,this.viewContainerRef),this.overlayRef=this.overlay.create(this.getOverlayConfig())),this.overlayRef&&!this.overlayRef.hasAttached()&&(this.overlayRef.attach(this.portal),this.overlayBackdropClickSubscription=this.subscribeOverlayBackdropClick()),this.updatePositions()},m.prototype.getOverlayConfig=function(){return new o.OverlayConfig({positionStrategy:this.getOverlayPosition(),scrollStrategy:this.overlay.scrollStrategies.reposition()})},m.prototype.getOverlayPosition=function(){var t=[new o.ConnectionPositionPair({originX:"start",originY:"bottom"},{overlayX:"start",overlayY:"top"}),new o.ConnectionPositionPair({originX:"start",originY:"top"},{overlayX:"start",overlayY:"bottom"})];return this.positionStrategy=this.overlay.position().flexibleConnectedTo(this.trigger.el).withPositions(t).withFlexibleDimensions(!1).withPush(!1),this.positionStrategy},m.decorators=[{type:a.Component,args:[{selector:"nz-mention",exportAs:"nzMention",template:'<ng-content></ng-content>\n<ng-template #suggestions>\n <ul class="ant-mention-dropdown">\n <li class="ant-mention-dropdown-item"\n *ngFor="let suggestion of filteredSuggestions; let i = index"\n [class.focus]="i === activeIndex"\n (mousedown)="$event.preventDefault()"\n (click)="selectSuggestion(suggestion)">\n <ng-container *ngIf="suggestionTemplate else defaultSuggestion">\n <ng-container *ngTemplateOutlet="suggestionTemplate; context: {$implicit: suggestion}"></ng-container>\n </ng-container>\n <ng-template #defaultSuggestion>{{ nzValueWith(suggestion) }}</ng-template>\n </li>\n <li class="ant-mention-dropdown-notfound ant-mention-dropdown-item"\n *ngIf="filteredSuggestions.length === 0">\n <span *ngIf="nzLoading"><i nz-icon type="loading"></i></span>\n <span *ngIf="!nzLoading">{{ nzNotFoundContent }}</span>\n </li>\n </ul>\n</ng-template>\n',preserveWhitespaces:!1,changeDetection:a.ChangeDetectionStrategy.OnPush,styles:["\n .ant-mention-dropdown {\n top: 100%;\n left: 0;\n position: relative;\n width: 100%;\n margin-top: 4px;\n margin-bottom: 4px;\n }\n "]}]}],m.ctorParameters=function(){return[{type:undefined,decorators:[{type:a.Optional},{type:a.Inject,args:[s.DOCUMENT]}]},{type:a.ChangeDetectorRef},{type:o.Overlay},{type:a.ViewContainerRef}]},m.propDecorators={nzValueWith:[{type:a.Input}],nzPrefix:[{type:a.Input}],nzLoading:[{type:a.Input}],nzNotFoundContent:[{type:a.Input}],nzPlacement:[{type:a.Input}],nzSuggestions:[{type:a.Input}],nzOnSelect:[{type:a.Output}],nzOnSearchChange:[{type:a.Output}],trigger:[{type:a.ContentChild,args:[d]}],suggestionsTemp:[{type:a.ViewChild,args:[a.TemplateRef]}],suggestionChild:[{type:a.ContentChild,args:[p,{read:a.TemplateRef}]}]},function w(t,e,n,i){var o,r=arguments.length,s=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,n,i);else for(var a=t.length-1;0<=a;a--)(o=t[a])&&(s=(r<3?o(s):3<r?o(e,n,s):o(e,n))||s);return 3<r&&s&&Object.defineProperty(e,n,s),s}([c.InputBoolean(),function S(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)}("design:type",Object)],m.prototype,"nzLoading",void 0),m);function m(t,e,n,i){this.ngDocument=t,this.changeDetectorRef=e,this.overlay=n,this.viewContainerRef=i,this.nzValueWith=function(t){return t},this.nzPrefix="@",this.nzLoading=!1,this.nzNotFoundContent="无匹配结果,轻敲空格完成输入",this.nzPlacement="bottom",this.nzSuggestions=[],this.nzOnSelect=new a.EventEmitter,this.nzOnSearchChange=new a.EventEmitter,this.isOpen=!1,this.filteredSuggestions=[],this.suggestionTemplate=null,this.activeIndex=-1,this.previousValue=null}var O=[y,d,p],C=(z.decorators=[{type:a.NgModule,args:[{imports:[s.CommonModule,n.FormsModule,o.OverlayModule,e.NzIconModule],declarations:g(O),exports:g(O)}]}],z);function z(){}t.NzMentionModule=C,t.NzMentionComponent=y,t.NZ_MENTION_TRIGGER_ACCESSOR=f,t.NzMentionTriggerDirective=d,t.NzMentionSuggestionDirective=p,Object.defineProperty(t,"__esModule",{value:!0})}); //# sourceMappingURL=ng-zorro-antd-mention.umd.min.js.map