angular-text-input-autocomplete/bundles/angular-text-input-autocomplete.umd.min.js

A angular 6+ directive for adding autocomplete functionality to text input elements, built around composability

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("rxjs"),require("textarea-caret"),require("rxjs/operators"),require("to-px"),require("@angular/common")):"function"==typeof define&&define.amd?define("angular-text-input-autocomplete",["exports","@angular/core","rxjs","textarea-caret","rxjs/operators","to-px","@angular/common"],t):t(e["angular-text-input-autocomplete"]={},e.ng.core,e.rxjs,e.getCaretCoordinates,e.rxjs.operators,null,e.ng.common)}(this,function(e,i,r,s,c,h,t){"use strict";s=s&&s.hasOwnProperty("default")?s["default"]:s,h=h&&h.hasOwnProperty("default")?h["default"]:h;var u=function(){function e(){this.selectChoice=new r.Subject,this.choiceLoading=!1,this.trackById=function(e,t){return"undefined"!=typeof t.id?t.id:t}}return Object.defineProperty(e.prototype,"choices",{get:function(){return this._choices},set:function(e){-1===(this._choices=e).indexOf(this.activeChoice)&&0<e.length&&(this.activeChoice=e[0])},enumerable:!0,configurable:!0}),e.prototype.onArrowDown=function(e){e.preventDefault();var t=this.choices.indexOf(this.activeChoice);this.choices[t+1]&&this.scrollToChoice(t+1)},e.prototype.onArrowUp=function(e){e.preventDefault();var t=this.choices.indexOf(this.activeChoice);this.choices[t-1]&&this.scrollToChoice(t-1)},e.prototype.onEnter=function(e){-1<this.choices.indexOf(this.activeChoice)&&(e.preventDefault(),this.selectChoice.next(this.activeChoice))},e.prototype.scrollToChoice=function(e){if(this.activeChoice=this._choices[e],this.dropdownMenuElement){var t=this.dropdownMenuElement.nativeElement.getBoundingClientRect(),n=this.dropdownMenuElement.nativeElement.children[e],o=n.getBoundingClientRect();(o.top<t.top||o.bottom>t.bottom)&&n.scrollIntoView({behavior:"smooth",block:"nearest"})}},e.decorators=[{type:i.Component,args:[{selector:"mwl-text-input-autocomplete-menu",template:'\n    <ul \n      *ngIf="choices?.length > 0"\n      #dropdownMenu\n      class="dropdown-menu"\n      [style.top.px]="position?.top"\n      [style.left.px]="position?.left">\n      <li\n        *ngFor="let choice of choices; trackBy:trackById"\n        [class.active]="activeChoice === choice">\n        <a\n          href="javascript:;"\n          (click)="selectChoice.next(choice)">\n          {{ choice }}\n        </a>\n      </li>\n    </ul>\n  ',styles:["\n      .dropdown-menu {\n        display: block;\n        max-height: 200px;\n        overflow-y: auto;\n      }\n    "]}]}],e.propDecorators={dropdownMenuElement:[{type:i.ViewChild,args:["dropdownMenu"]}],onArrowDown:[{type:i.HostListener,args:["document:keydown.ArrowDown",["$event"]]}],onArrowUp:[{type:i.HostListener,args:["document:keydown.ArrowUp",["$event"]]}],onEnter:[{type:i.HostListener,args:["document:keydown.Enter",["$event"]]}]},e}(),n=function(){function e(e,t,n,o){this.componentFactoryResolver=e,this.viewContainerRef=t,this.injector=n,this.elm=o,this.triggerCharacter="@",this.searchRegexp=/^\w*$/,this.closeMenuOnBlur=!1,this.menuComponent=u,this.menuShown=new i.EventEmitter,this.menuHidden=new i.EventEmitter,this.choiceSelected=new i.EventEmitter,this.getChoiceLabel=function(e){return e},this.menuHidden$=new r.Subject,this.usingShortcut=!1}return e.prototype.onKeypress=function(e){e===this.triggerCharacter&&(this.usingShortcut=!1,this.showMenu())},e.prototype.onKeyDown=function(e){this.keyboardShortcut&&this.keyboardShortcut(e)&&(this.usingShortcut=!0,this.showMenu(),this.onChange(""))},e.prototype.onChange=function(e){var t=this;if(this.menu)if(e[this.menu.triggerCharacterPosition]===this.triggerCharacter||this.usingShortcut){var n=this.elm.nativeElement.selectionStart;if(n<this.menu.triggerCharacterPosition)this.hideMenu();else{this.usingShortcut&&!this.menu&&(e=this.triggerCharacter);var o=this.usingShortcut?0:1,i=e.slice(this.menu.triggerCharacterPosition+o,n);i.match(this.searchRegexp)?(this.menu.component.instance.searchText=i,this.menu.component.instance.choices=[],this.menu.component.instance.choiceLoadError=undefined,this.menu.component.instance.choiceLoading=!0,this.menu.component.changeDetectorRef.detectChanges(),Promise.resolve(this.findChoices(i)).then(function(e){t.menu&&(t.menu.component.instance.choices=e,t.menu.component.instance.choiceLoading=!1,t.menu.component.changeDetectorRef.detectChanges())})["catch"](function(e){t.menu&&(t.menu.component.instance.choiceLoading=!1,t.menu.component.instance.choiceLoadError=e,t.menu.component.changeDetectorRef.detectChanges())})):this.hideMenu()}}else this.hideMenu()},e.prototype.onBlur=function(){this.menu&&(this.menu.lastCaretPosition=this.elm.nativeElement.selectionStart,!0===this.closeMenuOnBlur&&this.hideMenu())},e.prototype.showMenu=function(){var u=this;if(!this.menu){var e=this.componentFactoryResolver.resolveComponentFactory(this.menuComponent);this.menu={component:this.viewContainerRef.createComponent(e,0,this.injector),triggerCharacterPosition:this.elm.nativeElement.selectionStart};var t=this.getLineHeight(this.elm.nativeElement),n=s(this.elm.nativeElement,this.elm.nativeElement.selectionStart),o=n.top,i=n.left;this.menu.component.instance.position={top:o+t,left:i},this.menu.component.changeDetectorRef.detectChanges(),this.menu.component.instance.selectChoice.pipe(c.takeUntil(this.menuHidden$)).subscribe(function(e){var t=u.getChoiceLabel(e),n=u.elm.nativeElement,o=n.value,i=u.menu.triggerCharacterPosition,r=o.slice(0,i),s=u.menu.lastCaretPosition||n.selectionStart,c=o.slice(s);n.value=r+t+c,n.dispatchEvent(new Event("input")),u.hideMenu();var h=(r+t).length;n.setSelectionRange(h,h),n.focus(),u.choiceSelected.emit({choice:e,insertedAt:{start:i,end:i+t.length}})}),this.menuShown.emit()}},e.prototype.getLineHeight=function(e){var t=getComputedStyle(e).lineHeight||"",n=getComputedStyle(e).fontSize||"",o=+h(n),i=parseFloat(t);return t===i+""?o*i:"normal"===t.toLowerCase()?1.2*o:h(t)},e.prototype.hideMenu=function(){this.menu&&(this.menu.component.destroy(),this.menuHidden$.next(),this.menuHidden.emit(),this.menu=undefined)},e.prototype.ngOnDestroy=function(){this.hideMenu()},e.decorators=[{type:i.Directive,args:[{selector:'textarea[mwlTextInputAutocomplete],input[type="text"][mwlTextInputAutocomplete]'}]}],e.ctorParameters=function(){return[{type:i.ComponentFactoryResolver},{type:i.ViewContainerRef},{type:i.Injector},{type:i.ElementRef}]},e.propDecorators={triggerCharacter:[{type:i.Input}],keyboardShortcut:[{type:i.Input}],searchRegexp:[{type:i.Input}],closeMenuOnBlur:[{type:i.Input}],menuComponent:[{type:i.Input}],menuShown:[{type:i.Output}],menuHidden:[{type:i.Output}],choiceSelected:[{type:i.Output}],findChoices:[{type:i.Input}],getChoiceLabel:[{type:i.Input}],onKeypress:[{type:i.HostListener,args:["keypress",["$event.key"]]}],onKeyDown:[{type:i.HostListener,args:["keydown",["$event"]]}],onChange:[{type:i.HostListener,args:["input",["$event.target.value"]]}],onBlur:[{type:i.HostListener,args:["blur"]}]},e}(),o=function(){function e(){}return e.decorators=[{type:i.Component,args:[{selector:"mwl-text-input-autocomplete-container",styles:["\n      :host {\n        position: relative;\n        display: block;\n      }\n    "],template:"<ng-content></ng-content>"}]}],e}(),a=function(){function e(){}return e.decorators=[{type:i.NgModule,args:[{declarations:[n,o,u],imports:[t.CommonModule],exports:[n,o,u],entryComponents:[u]}]}],e}();e.TextInputAutocompleteMenuComponent=u,e.TextInputAutocompleteModule=a,e.ɵb=o,e.ɵa=n,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=angular-text-input-autocomplete.umd.min.js.map