UNPKG

@duoduo-oba/ng-devui

Version:

DevUI components based on Angular

2 lines 14.9 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("rxjs"),require("rxjs/operators"),require("ng-devui/position"),require("ng-devui/utils"),require("@angular/common"),require("ng-devui/window-ref"),require("ng-devui/loading")):"function"==typeof define&&define.amd?define("ng-devui/auto-complete",["exports","@angular/core","@angular/forms","rxjs","rxjs/operators","ng-devui/position","ng-devui/utils","@angular/common","ng-devui/window-ref","ng-devui/loading"],t):t(((e=e||self)["ng-devui"]=e["ng-devui"]||{},e["ng-devui"]["auto-complete"]={}),e.ng.core,e.ng.forms,e.rxjs,e.rxjs.operators,e["ng-devui"].position,e["ng-devui"].utils,e.ng.common,e["ng-devui"]["window-ref"],e["ng-devui"].loading)}(this,(function(e,t,n,o,i,r,s,p,u,a){"use strict";var l=function(){function e(){this.display="inline"}return Object.defineProperty(e.prototype,"htmlContent",{get:function(){return this.highlightHtml},enumerable:!0,configurable:!0}),e.prototype.ngOnChanges=function(e){this.highlightHtml=this.transform(this.value,this.term)},e.prototype.transform=function(e,t){return e&&t?this.highlight(e,t):e},e.prototype.highlight=function(e,t){var n=new RegExp(t.replace(/[-[\]{}()*+?.,\\^$|#\s]/g,"\\$&"),"gi");return e.replace(n,(function(e){return'<b class="re-highlight">'+e+"</b>"}))},e.decorators=[{type:t.Component,args:[{selector:"d-highlight",template:"",changeDetection:t.ChangeDetectionStrategy.OnPush}]}],e.propDecorators={htmlContent:[{type:t.HostBinding,args:["innerHTML"]}],display:[{type:t.HostBinding,args:["style.display"]}],value:[{type:t.Input}],term:[{type:t.Input}]},e}();var c=function(){function e(){this.activeIndex=0,this.showLoading=!1,this.labelMinHeight=20,this.onChange=function(e){return null},this.onTouched=function(){return null},this.formatter=function(e){return e?e.label||e.toString():""},this.maxHeight=300}return e.prototype.writeValue=function(e){this.value=e},e.prototype.setDisabledState=function(e){this.disabled=e},e.prototype.registerOnChange=function(e){this.onChange=e},e.prototype.registerOnTouched=function(e){this.onTouched=e},e.prototype.onSelect=function(e,t){if(this.disabledKey&&t[this.disabledKey])return e.preventDefault(),void e.stopPropagation();"single"===this.overview&&(e.preventDefault(),e.stopPropagation()),this.value=t,this.onTouched(),this.onChange({type:"select",value:this.value})},e.prototype.selectCurrentItem=function(e){this.onSelect(e,this.source[this.activeIndex])},e.prototype.onActiveIndexChange=function(e){this.activeIndex=e},e.prototype.reset=function(){this.activeIndex=0},e.prototype.next=function(){if(this.isOpen&&this.source&&this.source.length){if(this.activeIndex===this.source.length-1)return void(this.activeIndex=0);this.activeIndex=this.activeIndex+1}},e.prototype.prev=function(){if(this.isOpen&&this.source&&this.source.length){if(0===this.activeIndex)return void(this.activeIndex=this.source.length-1);this.activeIndex=this.activeIndex-1}},e.prototype.trackByFn=function(e,t){return e},e.prototype.animationEnd=function(e){this.isOpen||(this.selectMenuElement.nativeElement.style.display="none")},e.prototype.loadMoreEvent=function(e){this.showLoading=!0,this.onChange({type:"loadMore",value:this})},e.prototype.loadFinish=function(e){this.showLoading=!1},e.decorators=[{type:t.Component,args:[{selector:"d-auto-complete-popup",template:'<div\r\n class="devui-dropdown-menu"\r\n [style.display]="isOpen && (source?.length || noResultItemTemplate) ? \'inline-block\' : \'none\'"\r\n [style.top]="overview === \'multiline\' ? (position?.top < labelMinHeight ? \'50%\' : \'100%\') : \'100%\'"\r\n [style.left]="overview === \'multiline\' ? position?.left + \'px\' : \'0\'"\r\n [@fadeInOut]="isOpen ? \'bottom\' : \'void\'"\r\n (@fadeInOut.done)="animationEnd($event)"\r\n #selectMenuElement\r\n dLoading\r\n [showLoading]="showLoading"\r\n [backdrop]="true"\r\n>\r\n <ul\r\n class="devui-list-unstyled scroll-height"\r\n [style.maxHeight]="maxHeight + \'px\'"\r\n dLazyLoad\r\n [enableLazyLoad]="enableLazyLoad"\r\n (loadMore)="loadMoreEvent($event)"\r\n >\r\n <li *ngIf="popTipsText && popTipsText.length > 0" class="devui-popup-tips">\r\n {{ popTipsText }}\r\n </li>\r\n <li\r\n *ngFor="let item of source; let $index = index; trackBy: trackByFn"\r\n class="devui-dropdown-item"\r\n [title]="formatter(item)"\r\n [ngClass]="{\r\n \'devui-dropdown-bg\': $index == activeIndex,\r\n disabled: disabledKey && item[disabledKey]\r\n }"\r\n (click)="onSelect($event, item)"\r\n (mouseenter)="onActiveIndexChange($index)"\r\n >\r\n <ng-template\r\n [ngTemplateOutlet]="itemTemplate || defaultItemTemplate"\r\n [ngTemplateOutletContext]="{\r\n formatter: formatter,\r\n term: term,\r\n source: source,\r\n item: item,\r\n $index: $index\r\n }"\r\n >\r\n </ng-template>\r\n </li>\r\n <li class="devui-dropdown-item devui-no-result-template" *ngIf="!source?.length && noResultItemTemplate != null">\r\n <ng-template [ngTemplateOutlet]="noResultItemTemplate" [ngTemplateOutletContext]="{ term: term, source: source }"> </ng-template>\r\n </li>\r\n </ul>\r\n</div>\r\n\r\n<ng-template #defaultItemTemplate let-item="item" let-term="term">\r\n <d-highlight [value]="formatter(item)" [term]="term"></d-highlight>\r\n</ng-template>\r\n',animations:[s.fadeInOut],styles:['@charset "UTF-8";.devui-dropdown-menu{width:100%;display:block}.devui-dropdown-item{cursor:pointer;display:block;width:100%;padding:8px 1rem;clear:both;border:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devui-no-result-template{cursor:not-allowed}.devui-no-result-template:hover{background:0 0!important}.devui-dropdown-item.disabled,.devui-dropdown-item.disabled:hover{cursor:not-allowed;opacity:.3;color:#252b3a;background:#fff}ul.devui-list-unstyled{margin:0;overflow-y:auto}:host(.devui-dropdown-menu){width:100%;margin:0;padding:5px 0}.devui-dropdown-bg{background:#f2f5fc}.devui-popup-tips{color:#adb0b8;padding:3px 1rem}']}]}],e.ctorParameters=function(){return[]},e.propDecorators={cssClass:[{type:t.Input}],maxHeight:[{type:t.Input}],disabled:[{type:t.Input}],disabledKey:[{type:t.Input}],source:[{type:t.Input}],position:[{type:t.Input}],isOpen:[{type:t.Input}],term:[{type:t.Input}],popTipsText:[{type:t.Input}],overview:[{type:t.Input}],itemTemplate:[{type:t.Input}],noResultItemTemplate:[{type:t.Input}],formatter:[{type:t.Input}],dropdown:[{type:t.Input}],selectWidth:[{type:t.Input}],enableLazyLoad:[{type:t.Input}],selectMenuElement:[{type:t.ViewChild,args:["selectMenuElement",{static:!0}]}]},e}();var h=function(){function e(e,n,o,i,r,s,p){this.elementRef=e,this.viewContainerRef=n,this.componentFactoryResolver=o,this.renderer=i,this.injector=r,this.positionService=s,this.changeDetectorRef=p,this.autocomplete="off",this.autocapitalize="off",this.autocorrect="off",this.sceneType="",this.tipsText="",this.maxHeight=300,this.enableLazyLoad=!1,this.loadMore=new t.EventEmitter,this.selectValue=new t.EventEmitter,this.transInputFocusEmit=new t.EventEmitter,this.KEYBOARD_EVENT_NOT_REFRESH=["escape","enter","arrowup","arrowdown","esc","up","down"],this.popTipsText="",this.focus=!1,this.placement="bottom-left",this.onChange=function(e){return null},this.onTouched=function(){return null},this.delay=300,this.valueChanges=this.registerInputEvent(e),this.minLength=1,this.itemTemplate=null,this.noResultItemTemplate=null,this.formatter=function(e){return e?e.label||e.toString():""},this.valueParser=function(e){return e}}return e.prototype.ngOnInit=function(){var e=this;this.subscription=this.valueChanges.subscribe((function(t){return e.onSourceChange(t)}));var t=this.componentFactoryResolver.resolveComponentFactory(c);this.popupRef=this.viewContainerRef.createComponent(t,this.viewContainerRef.length,this.injector),this.fillPopup(this.source),this.searchFn||(this.searchFn=function(t){return o.of(e.source.filter((function(n){return-1!==e.formatter(n).toLowerCase().indexOf(t.toLowerCase())})))}),this.popupRef.instance.registerOnChange((function(t){if("loadMore"!==t.type){var n=e.valueParser(t.value);e.writeValue(n),e.onChange(n),e.hidePopup(),e.selectValue.emit(t.value),e.overview&&"single"!==e.overview&&setTimeout((function(){e.restLatestSource()}),0)}else e.loadMore.emit(t.value)}))},e.prototype.ngOnChanges=function(e){e&&this.popupRef&&e.source&&this.fillPopup(this.source)},e.prototype.restLatestSource=function(){this.latestSource&&this.latestSource.length>0&&(this.writeValue(""),this.clearInputValue(),this.showLatestSource())},e.prototype.onSourceChange=function(e){this.elementRef.nativeElement.value?this.showSource(e,!0,!0):"select"!==this.sceneType?this.showLatestSource():this.showSource(e,!0,!0)},e.prototype.showLatestSource=function(){var e=this,t=[];this.latestSource&&this.latestSource.length>0&&this.searchFn("").subscribe((function(n){var o=e.latestSource.slice(-5);t=o.filter((function(e){return e.label?n.find((function(t){return t.label===e.label})):n.find((function(t){return t===e}))}));var i=e.popupRef.instance;i.reset(),e.popTipsText="最近输入",e.fillPopup(t),i.isOpen=!0,e.changeDetectorRef.markForCheck()})),t.length<=0&&this.hidePopup()},e.prototype.showSource=function(e,t,n){if(e&&e.length||this.noResultItemTemplate){var o=this.popupRef.instance;n&&o.reset(),this.popTipsText=this.tipsText||"",this.fillPopup(e,this.value),t&&(o.isOpen=!0),this.changeDetectorRef.markForCheck()}else this.hidePopup()},e.prototype.writeValue=function(e){this.value=this.formatter(e)||"",this.writeInputValue(this.value)},e.prototype.registerOnChange=function(e){this.onChange=e},e.prototype.registerOnTouched=function(e){this.onTouched=e},e.prototype.setDisabledState=function(e){this.disabled=e,this.renderer.setProperty(this.elementRef.nativeElement,"disabled",e),this.popupRef&&this.popupRef.instance.setDisabledState(e)},e.prototype.ngOnDestroy=function(){this.unSubscription()},e.prototype.onFocus=function(e){var t=this;this.focus=!0,this.transInputFocusEmit.emit({focus:!0,popupRef:this.popupRef});var n="select"!==this.sceneType;"select"===this.sceneType?this.searchFn("").subscribe((function(e){t.showSource(e,n,!1)})):this.elementRef.nativeElement.value?this.searchFn(this.elementRef.nativeElement.value).subscribe((function(e){t.showSource(e,!0,!1)})):this.showLatestSource()},e.prototype.onBlur=function(e){this.focus=!1,this.onTouched()},e.prototype.onEscKeyup=function(e){this.hidePopup()},e.prototype.onEnterKeyDown=function(e){this.popupRef.instance.source&&this.popupRef.instance.isOpen&&this.popupRef&&this.popupRef.instance.selectCurrentItem(e)},e.prototype.onArrowUpKeyDown=function(e){this.popupRef&&(e.preventDefault(),e.stopPropagation(),this.popupRef.instance.prev())},e.prototype.onArrowDownKeyDown=function(e){this.popupRef&&(e.preventDefault(),e.stopPropagation(),this.popupRef.instance.next())},e.prototype.onDocumentClick=function(e){(this.focus&&this.transInputFocusEmit.emit({focus:this.focus,popupRef:this.popupRef}),!this.popupRef||this.popupRef.instance.isOpen)&&(this.elementRef.nativeElement.contains(e.target)||(this.hidePopup(),this.transInputFocusEmit.emit({focus:!1,popupRef:this.popupRef})))},e.prototype.hidePopup=function(){this.popupRef&&(this.popupRef.instance.isOpen=!1)},e.prototype.fillPopup=function(e,t){var n=this;this.position=this.positionService.position(this.elementRef.nativeElement);var o=this.popupRef.instance;o.source=e,o.maxHeight=this.maxHeight,o.term=t,o.disabledKey=this.disabledKey,o.enableLazyLoad=this.enableLazyLoad,["formatter","itemTemplate","noResultItemTemplate","cssClass","dropdown","popTipsText","position","overview"].forEach((function(e){void 0!==n[e]&&(o[e]=n[e])}))},e.prototype.writeInputValue=function(e){this.renderer.setProperty(this.elementRef.nativeElement,"value",e)},e.prototype.clearInputValue=function(){this.renderer.setProperty(this.elementRef.nativeElement,"value","")},e.prototype.unSubscription=function(){this.subscription&&(this.subscription.unsubscribe(),this.subscription=null)},e.prototype.onTermChange=function(e){this.value=e,this.popupRef&&(this.popupRef.instance.term=e),this.onChange(e)},e.prototype.registerInputEvent=function(e){var t=this;return o.fromEvent(e.nativeElement,"keyup").pipe(i.filter((function(e){return-1===t.KEYBOARD_EVENT_NOT_REFRESH.indexOf(e.key.toLocaleLowerCase())})),i.map((function(e){return e.target.value})),i.tap((function(e){return t.onTouched()})),i.filter((function(e){return!t.disabled&&t.searchFn&&e.length>=0})),i.debounceTime(this.delay),i.tap((function(e){return t.onTermChange(e)})),i.switchMap((function(e){return t.searchFn(e,t)})))},e.decorators=[{type:t.Directive,args:[{selector:"[dAutoComplete]",exportAs:"autoComplete",providers:[{provide:n.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return e})),multi:!0}]}]}],e.ctorParameters=function(){return[{type:t.ElementRef},{type:t.ViewContainerRef},{type:t.ComponentFactoryResolver},{type:t.Renderer2},{type:t.Injector},{type:r.PositionService},{type:t.ChangeDetectorRef}]},e.propDecorators={autocomplete:[{type:t.HostBinding,args:["attr.autocomplete"]}],autocapitalize:[{type:t.HostBinding,args:["attr.autocapitalize"]}],autocorrect:[{type:t.HostBinding,args:["attr.autocorrect"]}],disabled:[{type:t.Input}],cssClass:[{type:t.Input}],delay:[{type:t.Input}],minLength:[{type:t.Input}],itemTemplate:[{type:t.Input}],noResultItemTemplate:[{type:t.Input}],formatter:[{type:t.Input}],sceneType:[{type:t.Input}],tipsText:[{type:t.Input}],overview:[{type:t.Input}],latestSource:[{type:t.Input}],source:[{type:t.Input}],valueParser:[{type:t.Input}],searchFn:[{type:t.Input}],dropdown:[{type:t.Input}],maxHeight:[{type:t.Input}],disabledKey:[{type:t.Input}],enableLazyLoad:[{type:t.Input}],loadMore:[{type:t.Output}],selectValue:[{type:t.Output}],transInputFocusEmit:[{type:t.Output}],onFocus:[{type:t.HostListener,args:["focus",["$event"]]}],onBlur:[{type:t.HostListener,args:["blur",["$event"]]}],onEscKeyup:[{type:t.HostListener,args:["keydown.esc",["$event"]]}],onEnterKeyDown:[{type:t.HostListener,args:["keydown.Enter",["$event"]]}],onArrowUpKeyDown:[{type:t.HostListener,args:["keydown.ArrowUp",["$event"]]}],onArrowDownKeyDown:[{type:t.HostListener,args:["keydown.ArrowDown",["$event"]]}],onDocumentClick:[{type:t.HostListener,args:["document:click",["$event"]]}]},e}();var d=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[p.CommonModule,n.FormsModule,s.LazyLoadModule,a.LoadingModule],exports:[h,c,l],declarations:[h,c,l],providers:[u.DocumentRef,u.WindowRef,r.PositionService],entryComponents:[c]}]}],e}();e.AutoCompleteDirective=h,e.AutoCompleteModule=d,e.AutoCompletePopupComponent=c,e.HighlightComponent=l,Object.defineProperty(e,"__esModule",{value:!0})})); //# sourceMappingURL=ng-devui-auto-complete.umd.min.js.map