Ng bootstrap typeahead

import{ChangeDetectorRef,ComponentFactoryResolver,ComponentRef,Directive,ElementRef,EventEmitter,forwardRef,Inject,Injector,Input,NgZone,OnDestroy,OnInit,Output,Renderer2,TemplateRef,ViewContainerRef,ApplicationRef,OnChanges,SimpleChanges}from'@angular/core';import{ControlValueAccessor,NG_VALUE_ACCESSOR}from'@angular/forms';import{DOCUMENT}from'@angular/common';import{BehaviorSubject,fromEvent,Observable,of,OperatorFunction,Subject,Subscription}from'rxjs';import{map,switchMap,tap}from'rxjs/operators';import{Live}from'../util/accessibility/live';import{ngbAutoClose}from'../util/autoclose';import{Key}from'../util/key';import{PopupService}from'../util/popup';import{PlacementArray,positionElements}from'../util/positioning';import{isDefined,toString}from'../util/util';import{NgbTypeaheadConfig}from'./typeahead-config';import{NgbTypeaheadWindow,ResultTemplateContext}from'./typeahead-window';/** * An event emitted right before an item is selected from the result list. */exportinterfaceNgbTypeaheadSelectItemEvent<T=any>{/** * The item from the result list about to be selected. */item: T;/** * Calling this function will prevent item selection from happening. */preventDefault: ()=>void;}letnextWindowId=0;/** * A directive providing a simple way of creating powerful typeaheads from any text input. */@Directive({selector: 'input[ngbTypeahead]',exportAs: 'ngbTypeahead',host: {'(blur)': 'handleBlur()','[class.open]': 'isPopupOpen()','(keydown)': 'handleKeyDown($event)','[autocomplete]': 'autocomplete','autocapitalize': 'off','autocorrect': 'off','role': 'combobox','aria-multiline': 'false','[attr.aria-autocomplete]': 'showHint ? "both" : "list"','[attr.aria-activedescendant]': 'activeDescendant','[attr.aria-owns]': 'isPopupOpen() ? popupId : null','[attr.aria-expanded]': 'isPopupOpen()'},providers: [{provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(()=>NgbTypeahead),multi: true}]})exportclassNgbTypeaheadimplementsControlValueAccessor,OnInit,OnChanges,OnDestroy{private_popupService: PopupService<NgbTypeaheadWindow>;private_subscription: Subscription|null=null;private_closed$=newSubject();private_inputValueBackup: string|null=null;private_valueChanges: Observable<string>;private_resubscribeTypeahead: BehaviorSubject<any>;private_windowRef: ComponentRef<NgbTypeaheadWindow>|null=null;private_zoneSubscription: any;/** * The value for the `autocomplete` attribute for the `<input>` element. * * Defaults to `"off"` to disable the native browser autocomplete, but you can override it if necessary. * * @since 2.1.0 */ @Input()autocomplete='off';/** * A selector specifying the element the typeahead popup will be appended to. * * Currently only supports `"body"`. */ @Input()container: string;/** * If `true`, model values will not be restricted only to items selected from the popup. */ @Input()editable: boolean;/** * If `true`, the first item in the result list will always stay focused while typing. */ @Input()focusFirst: boolean;/** * The function that converts an item from the result list to a `string` to display in the `<input>` field. * * It is called when the user selects something in the popup or the model value changes, so the input needs to * be updated. */ @Input()inputFormatter: (item: any)=>string;/** * The function that converts a stream of text values from the `<input>` element to the stream of the array of items * to display in the typeahead popup. * * If the resulting observable emits a non-empty array - the popup will be shown. If it emits an empty array - the * popup will be closed. * * See the [basic example](#/components/typeahead/examples#basic) for more details. * * Note that the `this` argument is `undefined` so you need to explicitly bind it to a desired "this" target. */ @Input()ngbTypeahead: OperatorFunction<string,readonlyany[]>|null|undefined;/** * The function that converts an item from the result list to a `string` to display in the popup. * * Must be provided, if your `ngbTypeahead` returns something other than `Observable<string[]>`. * * Alternatively for more complex markup in the popup you should use `resultTemplate`. */ @Input()resultFormatter: (item: any)=>string;/** * The template to override the way resulting items are displayed in the popup. * * See the [ResultTemplateContext](#/components/typeahead/api#ResultTemplateContext) for the template context. * * Also see the [template for results demo](#/components/typeahead/examples#template) for more details. */ @Input()resultTemplate: TemplateRef<ResultTemplateContext>;/** * If `true`, will show the hint in the `<input>` when an item in the result list matches. */ @Input()showHint: boolean;/** * The preferred placement of the typeahead. * * Possible values are `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`, * `"bottom-right"`, `"left"`, `"left-top"`, `"left-bottom"`, `"right"`, `"right-top"`, * `"right-bottom"` * * Accepts an array of strings or a string with space separated possible values. * * The default order of preference is `"bottom-left bottom-right top-left top-right"` * * Please see the [positioning overview](#/positioning) for more details. */ @Input()placement: PlacementArray='bottom-left';/** * A custom class to append to the typeahead popup window * * Accepts a string containing CSS class to be applied on the `ngb-typeahead-window`. * * This can be used to provide instance-specific styling, ex. you can override popup window `z-index` * * @since 9.1.0 */ @Input()popupClass: string;/** * An event emitted right before an item is selected from the result list. * * Event payload is of type [`NgbTypeaheadSelectItemEvent`](#/components/typeahead/api#NgbTypeaheadSelectItemEvent). */ @Output()selectItem=newEventEmitter<NgbTypeaheadSelectItemEvent>();activeDescendant: string|null=null;popupId=`ngb-typeahead-${nextWindowId++}`;private_onTouched=()=>{};private_onChange=(_: any)=>{};constructor(private_elementRef: ElementRef<HTMLInputElement>,viewContainerRef: ViewContainerRef,private_renderer: Renderer2,injector: Injector,componentFactoryResolver: ComponentFactoryResolver,config: NgbTypeaheadConfig,ngZone: NgZone,private_live: Live, @Inject(DOCUMENT)private_document: any,private_ngZone: NgZone,private_changeDetector: ChangeDetectorRef,applicationRef: ApplicationRef){this.container=config.container;this.editable=config.editable;this.focusFirst=config.focusFirst;this.showHint=config.showHint;this.placement=config.placement;this._valueChanges=fromEvent<Event>(_elementRef.nativeElement,'input').pipe(map($event=>($event.targetasHTMLInputElement).value));this._resubscribeTypeahead=newBehaviorSubject(null);this._popupService=newPopupService<NgbTypeaheadWindow>(NgbTypeaheadWindow,injector,viewContainerRef,_renderer,this._ngZone,componentFactoryResolver,applicationRef);this._zoneSubscription=ngZone.onStable.subscribe(()=>{if(this.isPopupOpen()){positionElements(this._elementRef.nativeElement,this._windowRef!.location.nativeElement,this.placement,this.container==='body');}});}ngOnInit(): void{this._subscribeToUserInput();}ngOnChanges({ngbTypeahead}: SimpleChanges): void{if(ngbTypeahead&&!ngbTypeahead.firstChange){this._unsubscribeFromUserInput();this._subscribeToUserInput();}}ngOnDestroy(): void{this._closePopup();this._unsubscribeFromUserInput();this._zoneSubscription.unsubscribe();}registerOnChange(fn: (value: any)=>any): void{this._onChange=fn;}registerOnTouched(fn: ()=>any): void{this._onTouched=fn;}writeValue(value){this._writeInputValue(this._formatItemForInput(value));if(this.showHint){this._inputValueBackup=value;}}setDisabledState(isDisabled: boolean): void{this._renderer.setProperty(this._elementRef.nativeElement,'disabled',isDisabled);}/** * Dismisses typeahead popup window */dismissPopup(){if(this.isPopupOpen()){this._resubscribeTypeahead.next(null);this._closePopup();if(this.showHint&&this._inputValueBackup!==null){this._writeInputValue(this._inputValueBackup);}this._changeDetector.markForCheck();}}/** * Returns true if the typeahead popup window is displayed */isPopupOpen(){returnthis._windowRef!=null

Keywords

none