import { ComponentFactoryResolver , ComponentRef , Directive , Input , OnDestroy , OnInit , ViewContainerRef } from '@angular/core' ; import { delay , distinctUntilChanged , takeUntil } from 'rxjs/operators' ; import { Subject } from 'rxjs' ; import { SearchBuilderFocusService } from '../search-builder-focus.service' ; import { SearchBuilderService } from '../search-builder.service' ; import { BaseSearchComponent } from '../search-components/base-search.component' ; @ Directive ( { selector : '[uxSearchBuilderOutlet]' } ) export class SearchBuilderOutletDirective implements OnInit , OnDestroy { @ Input ( 'uxSearchBuilderOutlet' ) outlet : string ; @ Input ( 'uxSearchBuilderOutletContext' ) context : any ; @ Input ( 'uxSearchBuilderOutletGroupId' ) groupId : string ; @ Input ( 'uxSearchBuilderOutletIndex' ) index : number ; private _componentRef : ComponentRef < BaseSearchComponent > ; private _onDestroy = new Subject < void > ( ) ; constructor ( private _viewContainerRef , private _componentFactoryResolver , private _searchBuilderService , private _searchBuilderFocusService ) { } ngOnInit ( ) { const componentDefinition = this . _searchBuilderService . getComponent ( this . outlet ) ; const componentFactory = this . _componentFactoryResolver . resolveComponentFactory < BaseSearchComponent > ( componentDefinition . component ) ; this . _componentRef = this . _viewContainerRef . createComponent ( componentFactory ) ; const config = Object . assign ( { } , componentDefinition . config , this . context . config || { } ) ; this . _componentRef . instance . context = this . context ; this . _componentRef . instance . config = config ; this . _searchBuilderFocusService . focus$ . pipe ( distinctUntilChanged ( ) , delay ( 0 ) , takeUntil ( this . _onDestroy ) ) . subscribe ( focus => { this . _componentRef . instance . focus = ( focus . groupId === this . groupId && focus . index === this . index ) ; } ) ; } ngOnDestroy ( ) { this . _onDestroy . next ( ) ; this . _onDestroy . complete ( ) ; } }