UNPKG

ng-zorro-antd

Version:

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

2 lines 12.7 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/cdk/overlay"),require("@angular/common"),require("@angular/core"),require("@angular/forms"),require("ng-zorro-antd/icon"),require("rxjs"),require("@angular/cdk/keycodes"),require("@angular/cdk/portal"),require("ng-zorro-antd/core")):"function"==typeof define&&define.amd?define("ng-zorro-antd/mention",["exports","@angular/cdk/overlay","@angular/common","@angular/core","@angular/forms","ng-zorro-antd/icon","rxjs","@angular/cdk/keycodes","@angular/cdk/portal","ng-zorro-antd/core"],e):e(((t=t||self)["ng-zorro-antd"]=t["ng-zorro-antd"]||{},t["ng-zorro-antd"].mention={}),t.ng.cdk.overlay,t.ng.common,t.ng.core,t.ng.forms,t["ng-zorro-antd"].icon,t.rxjs,t.ng.cdk.keycodes,t.ng.cdk.portal,t["ng-zorro-antd"].core)}(this,function(t,e,n,i,o,r,s,a,c,g){"use strict";function l(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)}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||e-- >0)&&!(i=r.next()).done;)s.push(i.value)}catch(t){o={error:t}}finally{try{i&&!i.done&&(n=r.return)&&n.call(r)}finally{if(o)throw o.error}}return s}function p(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(u(arguments[e]));return t}var h=function(){function t(){}return t.decorators=[{type:i.Directive,args:[{selector:"[nzMentionSuggestion]",exportAs:"nzMentionSuggestion"}]}],t}(),f=function(){function t(){this.triggerChange$=new s.Subject}return t.prototype.triggerChanged=function(){return this.triggerChange$.asObservable()},t.prototype.registerTrigger=function(t){this.trigger!==t&&(this.trigger=t,this.triggerChange$.next(t))},t.prototype.ngOnDestroy=function(){this.triggerChange$.complete()},t.decorators=[{type:i.Injectable}],t}();var d={provide:o.NG_VALUE_ACCESSOR,useExisting:i.forwardRef(function(){return v}),multi:!0},v=function(){function t(t,e){this.el=t,this.nzMentionService=e,this.onFocusin=new i.EventEmitter,this.onBlur=new i.EventEmitter,this.onInput=new i.EventEmitter,this.onKeydown=new i.EventEmitter,this.onClick=new i.EventEmitter}return t.prototype.completeEvents=function(){this.onFocusin.complete(),this.onBlur.complete(),this.onInput.complete(),this.onKeydown.complete(),this.onClick.complete()},t.prototype.focus=function(t){this.el.nativeElement.focus(),this.el.nativeElement.setSelectionRange(t,t)},t.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},t.prototype.writeValue=function(t){this.value=t,this.el.nativeElement.value="string"==typeof t?t:""},t.prototype.registerOnChange=function(t){this.onChange=t},t.prototype.registerOnTouched=function(t){this.onTouched=t},t.prototype.ngAfterViewInit=function(){this.nzMentionService.registerTrigger(this)},t.prototype.ngOnDestroy=function(){this.completeEvents()},t.decorators=[{type:i.Directive,args:[{selector:"input[nzMentionTrigger], textarea[nzMentionTrigger]",exportAs:"nzMentionTrigger",providers:[d],host:{autocomplete:"off","(focusin)":"onFocusin.emit()","(blur)":"onBlur.emit()","(input)":"onInput.emit($event)","(keydown)":"onKeydown.emit($event)","(click)":"onClick.emit($event)"}}]}],t.ctorParameters=function(){return[{type:i.ElementRef},{type:f}]},t}();var y=function(){function t(t,e,n,o,r){this.ngDocument=t,this.changeDetectorRef=e,this.overlay=n,this.viewContainerRef=o,this.nzMentionService=r,this.nzValueWith=function(t){return t},this.nzPrefix="@",this.nzLoading=!1,this.nzNotFoundContent="无匹配结果,轻敲空格完成输入",this.nzPlacement="bottom",this.nzSuggestions=[],this.nzOnSelect=new i.EventEmitter,this.nzOnSearchChange=new i.EventEmitter,this.isOpen=!1,this.filteredSuggestions=[],this.suggestionTemplate=null,this.activeIndex=-1,this.previousValue=null}return Object.defineProperty(t.prototype,"suggestionChild",{set:function(t){t&&(this.suggestionTemplate=t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"triggerNativeElement",{get:function(){return this.trigger.el.nativeElement},enumerable:!0,configurable:!0}),t.prototype.ngOnInit=function(){var t=this;this.nzMentionService.triggerChanged().subscribe(function(e){t.trigger=e,t.bindTriggerEvents(),t.closeDropdown(),t.overlayRef=null})},t.prototype.ngOnChanges=function(t){t.hasOwnProperty("nzSuggestions")&&this.isOpen&&(this.previousValue=null,this.activeIndex=-1,this.resetDropdown(!1))},t.prototype.ngOnDestroy=function(){this.closeDropdown()},t.prototype.closeDropdown=function(){this.overlayRef&&this.overlayRef.hasAttached()&&(this.overlayRef.detach(),this.overlayBackdropClickSubscription.unsubscribe(),this.isOpen=!1,this.changeDetectorRef.markForCheck())},t.prototype.openDropdown=function(){this.attachOverlay(),this.isOpen=!0,this.changeDetectorRef.markForCheck()},t.prototype.getMentions=function(){return this.trigger?g.getMentions(this.trigger.value,this.nzPrefix):[]},t.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},t.prototype.handleInput=function(t){var e=t.target;this.trigger.onChange(e.value),this.trigger.value=e.value,this.resetDropdown()},t.prototype.handleKeydown=function(t){var e=t.keyCode;if(this.isOpen&&e===a.ENTER&&-1!==this.activeIndex&&this.filteredSuggestions.length)this.selectSuggestion(this.filteredSuggestions[this.activeIndex]),t.preventDefault();else if(e===a.LEFT_ARROW||e===a.RIGHT_ARROW)this.resetDropdown(),t.stopPropagation();else{if(this.isOpen&&(e===a.TAB||e===a.ESCAPE))return void this.closeDropdown();this.isOpen&&e===a.UP_ARROW&&(this.setPreviousItemActive(),t.preventDefault(),t.stopPropagation()),this.isOpen&&e===a.DOWN_ARROW&&(this.setNextItemActive(),t.preventDefault(),t.stopPropagation())}},t.prototype.handleClick=function(){this.resetDropdown()},t.prototype.bindTriggerEvents=function(){var t=this;this.trigger.onInput.subscribe(function(e){return t.handleInput(e)}),this.trigger.onKeydown.subscribe(function(e){return t.handleKeydown(e)}),this.trigger.onClick.subscribe(function(){return t.handleClick()})},t.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)})}},t.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=e>=0?e:0,this.openDropdown()}else this.closeDropdown()},t.prototype.setNextItemActive=function(){this.activeIndex=this.activeIndex+1<=this.filteredSuggestions.length-1?this.activeIndex+1:0,this.changeDetectorRef.markForCheck()},t.prototype.setPreviousItemActive=function(){this.activeIndex=this.activeIndex-1<0?this.filteredSuggestions.length-1:this.activeIndex-1,this.changeDetectorRef.markForCheck()},t.prototype.canOpen=function(){var t=this.triggerNativeElement;return!t.readOnly&&!t.disabled},t.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;i>=0;){var o=t.lastIndexOf(n[i],e),r=t.indexOf(" ",e)>-1?t.indexOf(" ",e):t.length,s=t.substring(o,r);if(!(o>0&&" "!==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--}},t.prototype.updatePositions=function(){var t=g.getCaretCoordinates(this.triggerNativeElement,this.cursorMentionStart),e=t.top-this.triggerNativeElement.getBoundingClientRect().height-this.triggerNativeElement.scrollTop+("bottom"===this.nzPlacement?t.height-6:-6),n=t.left-this.triggerNativeElement.scrollLeft;this.positionStrategy.withDefaultOffsetX(n).withDefaultOffsetY(e),"bottom"===this.nzPlacement&&this.positionStrategy.withPositions(p(g.DEFAULT_MENTION_BOTTOM_POSITIONS)),"top"===this.nzPlacement&&this.positionStrategy.withPositions(p(g.DEFAULT_MENTION_TOP_POSITIONS)),this.positionStrategy.apply()},t.prototype.subscribeOverlayBackdropClick=function(){var t=this;return s.merge(s.fromEvent(this.ngDocument,"click"),s.fromEvent(this.ngDocument,"touchend")).subscribe(function(e){e.target!==t.trigger.el.nativeElement&&t.isOpen&&t.closeDropdown()})},t.prototype.attachOverlay=function(){this.overlayRef||(this.portal=new c.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()},t.prototype.getOverlayConfig=function(){return new e.OverlayConfig({positionStrategy:this.getOverlayPosition(),scrollStrategy:this.overlay.scrollStrategies.reposition()})},t.prototype.getOverlayPosition=function(){var t=[new e.ConnectionPositionPair({originX:"start",originY:"bottom"},{overlayX:"start",overlayY:"top"}),new e.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},t.decorators=[{type:i.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 nzType="loading"></i></span>\n <span *ngIf="!nzLoading">{{ nzNotFoundContent }}</span>\n </li>\n </ul>\n</ng-template>\n',preserveWhitespaces:!1,changeDetection:i.ChangeDetectionStrategy.OnPush,providers:[f],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 "]}]}],t.ctorParameters=function(){return[{type:void 0,decorators:[{type:i.Optional},{type:i.Inject,args:[n.DOCUMENT]}]},{type:i.ChangeDetectorRef},{type:e.Overlay},{type:i.ViewContainerRef},{type:f}]},t.propDecorators={nzValueWith:[{type:i.Input}],nzPrefix:[{type:i.Input}],nzLoading:[{type:i.Input}],nzNotFoundContent:[{type:i.Input}],nzPlacement:[{type:i.Input}],nzSuggestions:[{type:i.Input}],nzOnSelect:[{type:i.Output}],nzOnSearchChange:[{type:i.Output}],suggestionsTemp:[{type:i.ViewChild,args:[i.TemplateRef,{static:!1}]}],suggestionChild:[{type:i.ContentChild,args:[h,{static:!1,read:i.TemplateRef}]}]},function(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;a>=0;a--)(o=t[a])&&(s=(r<3?o(s):r>3?o(e,n,s):o(e,n))||s);r>3&&s&&Object.defineProperty(e,n,s)}([g.InputBoolean(),l("design:type",Object)],t.prototype,"nzLoading",void 0),t}();var m=[y,v,h],O=function(){function t(){}return t.decorators=[{type:i.NgModule,args:[{imports:[n.CommonModule,o.FormsModule,e.OverlayModule,r.NzIconModule],declarations:p(m),exports:p(m)}]}],t}();t.NZ_MENTION_TRIGGER_ACCESSOR=d,t.NzMentionComponent=y,t.NzMentionModule=O,t.NzMentionService=f,t.NzMentionSuggestionDirective=h,t.NzMentionTriggerDirective=v,Object.defineProperty(t,"__esModule",{value:!0})}); //# sourceMappingURL=ng-zorro-antd-mention.umd.min.js.map