d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { getFlexiblePositions, ThyAbstractOverlayService } from 'ngx-tethys/core';
import { of, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { Directionality } from '@angular/cdk/bidi';
import { coerceArray, coerceElement } from '@angular/cdk/coercion';
import {
    ComponentType,
    FlexibleConnectedPositionStrategy,
    Overlay,
    OverlayConfig,
    OverlayContainer,
    OverlayRef,
    PositionStrategy,
    ScrollDispatcher
} from '@angular/cdk/overlay';
import { Platform } from '@angular/cdk/platform';
import { ComponentPortal } from '@angular/cdk/portal';
import { ViewportRuler } from '@angular/cdk/scrolling';
import { DOCUMENT } from '@angular/common';
import { ElementRef, Inject, Injectable, Injector, NgZone, OnDestroy, StaticProvider, TemplateRef } from '@angular/core';

import { ThyAutocompleteContainerComponent } from './autocomplete-container.component';
import { ThyAutocompleteRef, ThyInternalAutocompleteRef } from './autocomplete-ref';
import { THY_AUTOCOMPLETE_DEFAULT_CONFIG, ThyAutocompleteConfig } from './autocomplete.config';
import { autocompleteAbstractOverlayOptions } from './autocomplete.options';

/**
 * @private
 */
@Injectable()
export class ThyAutocompleteService
    extends ThyAbstractOverlayService<ThyAutocompleteConfig, ThyAutocompleteContainerComponent>
    implements OnDestroy
{
    private readonly ngUnsubscribe$ = new Subject();

    private originInstancesMap = new Map<
        ElementRef | HTMLElement,
        {
            config: ThyAutocompleteConfig;
            autocompleteRef: ThyAutocompleteRef<any, any>;
        }
    >();

    private buildPositionStrategy<TData>(config: ThyAutocompleteConfig<TData>): PositionStrategy {
        const positionStrategy = new FlexibleConnectedPositionStrategy(
            config.origin,
            this._viewportRuler,
            this._document,
            this._platform,
            this._overlayContainer
        );
        const positions = getFlexiblePositions(config.placement, config.offset, 'thy-autocomplete');
        positionStrategy.withPositions(positions);
        positionStrategy.withGrowAfterOpen(true);
        positionStrategy.positionChanges.pipe(takeUntil(this.ngUnsubscribe$)).subscribe(change => {
            if (change.scrollableViewProperties.isOverlayClipped) {
                // After position changes occur and the overlay is clipped by
                // a parent scrollable then close the tooltip.
                this.ngZone.run(() => this.close());
            }
        });
        return positionStrategy;
    }

    protected buildOverlayConfig<TData>(config: ThyAutocompleteConfig<TData>): OverlayConfig {
        const strategy = this.buildPositionStrategy(config);
        const overlayConfig = this.buildBaseOverlayConfig(config);
        overlayConfig.positionStrategy = strategy;
        overlayConfig.scrollStrategy = config.scrollStrategy || this.overlay.scrollStrategies.block();
        overlayConfig.width = config.width;
        return overlayConfig;
    }

    protected attachOverlayContainer(overlay: OverlayRef, config: ThyAutocompleteConfig<any>): ThyAutocompleteContainerComponent {
        const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
        const injector = Injector.create({
            parent: userInjector || this.injector,
            providers: [{ provide: ThyAutocompleteConfig, useValue: config }]
        });
        const containerPortal = new ComponentPortal(ThyAutocompleteContainerComponent, config.viewContainerRef, injector);
        const containerRef = overlay.attach<ThyAutocompleteContainerComponent>(containerPortal);
        return containerRef.instance;
    }

    protected createAbstractOverlayRef<T>(
        overlayRef: OverlayRef,
        containerInstance: ThyAutocompleteContainerComponent,
        config: ThyAutocompleteConfig<any>
    ): ThyInternalAutocompleteRef<T> {
        return new ThyInternalAutocompleteRef<T>(overlayRef, containerInstance, config);
    }

    protected createInjector<T>(
        config: ThyAutocompleteConfig,
        autocompleteRef: ThyAutocompleteRef<T>,
        autocompleteContainer: ThyAutocompleteContainerComponent
    ): Injector {
        const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
        const injectionTokens: StaticProvider[] = [
            {
                provide: ThyAutocompleteContainerComponent,
                useValue: autocompleteContainer
            },
            {
                provide: ThyAutocompleteRef,
                useValue: autocompleteRef
            }
        ];

        if (config.direction && (!userInjector || !userInjector.get<Directionality | null>(Directionality, null))) {
            injectionTokens.push({
                provide: Directionality,
                useValue: {
                    value: config.direction,
                    change: of()
                }
            });
        }

        return Injector.create({ parent: userInjector || this.injector, providers: injectionTokens });
    }

    private originElementAddActiveClass(config: ThyAutocompleteConfig) {
        if (config.originActiveClass) {
            coerceElement<HTMLElement>(config.origin).classList.add(...coerceArray(config.originActiveClass));
        }
    }

    private originElementRemoveActiveClass(config: ThyAutocompleteConfig) {
        if (config.originActiveClass) {
            coerceElement<HTMLElement>(config.origin).classList.remove(...coerceArray(config.originActiveClass));
        }
    }

    constructor(
        overlay: Overlay,
        injector: Injector,
        @Inject(THY_AUTOCOMPLETE_DEFAULT_CONFIG) defaultConfig: ThyAutocompleteConfig,
        private scrollDispatcher: ScrollDispatcher,
        private ngZone: NgZone,
        private _viewportRuler: ViewportRuler,
        @Inject(DOCUMENT) private _document: any,
        private _platform: Platform,
        private _overlayContainer: OverlayContainer
    ) {
        super(autocompleteAbstractOverlayOptions, overlay, injector, defaultConfig);
    }

    open<T, TData = any, TResult = any>(
        componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
        config?: ThyAutocompleteConfig<TData>
    ): ThyAutocompleteRef<T, TResult> {
        const originElement = coerceElement(config.origin);
        const autocompleteRef = this.openOverlay(componentOrTemplateRef, config) as ThyAutocompleteRef<T>;
        config = autocompleteRef.containerInstance.config;
        autocompleteRef.afterClosed().subscribe(() => {
            this.originElementRemoveActiveClass(config);
            this.originInstancesMap.delete(originElement);
        });

        this.originElementAddActiveClass(config);
        this.originInstancesMap.set(originElement, {
            config,
            autocompleteRef
        });

        return autocompleteRef;
    }

    ngOnDestroy() {
        this.dispose();
    }
}

1	import { getFlexiblePositions, ThyAbstractOverlayService } from 'ngx-tethys/core';
2	import { of, Subject } from 'rxjs';
3	import { takeUntil } from 'rxjs/operators';
4
5	import { Directionality } from '@angular/cdk/bidi';
6	import { coerceArray, coerceElement } from '@angular/cdk/coercion';
7	import {
8	ComponentType,
9	FlexibleConnectedPositionStrategy,
10	Overlay,
11	OverlayConfig,
12	OverlayContainer,
13	OverlayRef,
14	PositionStrategy,
15	ScrollDispatcher
16	} from '@angular/cdk/overlay';
17	import { Platform } from '@angular/cdk/platform';
18	import { ComponentPortal } from '@angular/cdk/portal';
19	import { ViewportRuler } from '@angular/cdk/scrolling';
20	import { DOCUMENT } from '@angular/common';	1✔
21	import { ElementRef, Inject, Injectable, Injector, NgZone, OnDestroy, StaticProvider, TemplateRef } from '@angular/core';
22		×
23	import { ThyAutocompleteContainerComponent } from './autocomplete-container.component';	×
24	import { ThyAutocompleteRef, ThyInternalAutocompleteRef } from './autocomplete-ref';	×
25	import { THY_AUTOCOMPLETE_DEFAULT_CONFIG, ThyAutocompleteConfig } from './autocomplete.config';	×
26	import { autocompleteAbstractOverlayOptions } from './autocomplete.options';	×
27		×
28	/**
29	* @private
30	*/	×
31	@Injectable()
32	export class ThyAutocompleteService
33	extends ThyAbstractOverlayService<ThyAutocompleteConfig, ThyAutocompleteContainerComponent>	×
34	implements OnDestroy
35	{
36	private readonly ngUnsubscribe$ = new Subject();	×
37		×
38	private originInstancesMap = new Map<	×
39	ElementRef \| HTMLElement,	×
40	{	×
41	config: ThyAutocompleteConfig;	×
42	autocompleteRef: ThyAutocompleteRef<any, any>;
43	}
44	>();	×
45		×
46	private buildPositionStrategy<TData>(config: ThyAutocompleteConfig<TData>): PositionStrategy {	×
47	const positionStrategy = new FlexibleConnectedPositionStrategy(
48	config.origin,
49	this._viewportRuler,	×
50	this._document,	×
51	this._platform,	×
52	this._overlayContainer
53	);
54	const positions = getFlexiblePositions(config.placement, config.offset, 'thy-autocomplete');	×
55	positionStrategy.withPositions(positions);
56	positionStrategy.withGrowAfterOpen(true);
57	positionStrategy.positionChanges.pipe(takeUntil(this.ngUnsubscribe$)).subscribe(change => {	×
58	if (change.scrollableViewProperties.isOverlayClipped) {	×
59	// After position changes occur and the overlay is clipped by
60	// a parent scrollable then close the tooltip.
61	this.ngZone.run(() => this.close());
62	}
63	});
64	return positionStrategy;
65	}
66
67	protected buildOverlayConfig<TData>(config: ThyAutocompleteConfig<TData>): OverlayConfig {
68	const strategy = this.buildPositionStrategy(config);	×
69	const overlayConfig = this.buildBaseOverlayConfig(config);	×
70	overlayConfig.positionStrategy = strategy;
71	overlayConfig.scrollStrategy = config.scrollStrategy \|\| this.overlay.scrollStrategies.block();
72	overlayConfig.width = config.width;
73	return overlayConfig;
74	}
75
76	protected attachOverlayContainer(overlay: OverlayRef, config: ThyAutocompleteConfig<any>): ThyAutocompleteContainerComponent {
77	const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;	×
78	const injector = Injector.create({
79	parent: userInjector \|\| this.injector,
80	providers: [{ provide: ThyAutocompleteConfig, useValue: config }]	×
81	});	×
82	const containerPortal = new ComponentPortal(ThyAutocompleteContainerComponent, config.viewContainerRef, injector);
83	const containerRef = overlay.attach<ThyAutocompleteContainerComponent>(containerPortal);
84	return containerRef.instance;
85	}	×
86		×
87	protected createAbstractOverlayRef<T>(
88	overlayRef: OverlayRef,
89	containerInstance: ThyAutocompleteContainerComponent,
90	config: ThyAutocompleteConfig<any>	×
91	): ThyInternalAutocompleteRef<T> {	×
92	return new ThyInternalAutocompleteRef<T>(overlayRef, containerInstance, config);	×
93	}	×
94		×
95	protected createInjector<T>(	×
96	config: ThyAutocompleteConfig,	×
97	autocompleteRef: ThyAutocompleteRef<T>,	×
98	autocompleteContainer: ThyAutocompleteContainerComponent	×
99	): Injector {
100	const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
101	const injectionTokens: StaticProvider[] = [	×
102	{	×
103	provide: ThyAutocompleteContainerComponent,	×
104	useValue: autocompleteContainer	×
105	},	×
106	{	×
107	provide: ThyAutocompleteRef,
108	useValue: autocompleteRef	×
109	}	×
110	];
111
112	if (config.direction && (!userInjector \|\| !userInjector.get<Directionality \| null>(Directionality, null))) {
113	injectionTokens.push({	×
114	provide: Directionality,
115	useValue: {
116	value: config.direction,	×
117	change: of()
118	}	1✔
119	});
120	}
121
122	return Injector.create({ parent: userInjector \|\| this.injector, providers: injectionTokens });
123	}
124
125	private originElementAddActiveClass(config: ThyAutocompleteConfig) {
126	if (config.originActiveClass) {
127	coerceElement<HTMLElement>(config.origin).classList.add(...coerceArray(config.originActiveClass));
128	}
129	}
130		1✔
131	private originElementRemoveActiveClass(config: ThyAutocompleteConfig) {
132	if (config.originActiveClass) {
133	coerceElement<HTMLElement>(config.origin).classList.remove(...coerceArray(config.originActiveClass));
134	}
135	}
136
137	constructor(
138	overlay: Overlay,
139	injector: Injector,
140	@Inject(THY_AUTOCOMPLETE_DEFAULT_CONFIG) defaultConfig: ThyAutocompleteConfig,
141	private scrollDispatcher: ScrollDispatcher,
142	private ngZone: NgZone,
143	private _viewportRuler: ViewportRuler,
144	@Inject(DOCUMENT) private _document: any,
145	private _platform: Platform,
146	private _overlayContainer: OverlayContainer
147	) {
148	super(autocompleteAbstractOverlayOptions, overlay, injector, defaultConfig);
149	}
150
151	open<T, TData = any, TResult = any>(
152	componentOrTemplateRef: ComponentType<T> \| TemplateRef<T>,
153	config?: ThyAutocompleteConfig<TData>
154	): ThyAutocompleteRef<T, TResult> {
155	const originElement = coerceElement(config.origin);
156	const autocompleteRef = this.openOverlay(componentOrTemplateRef, config) as ThyAutocompleteRef<T>;
157	config = autocompleteRef.containerInstance.config;
158	autocompleteRef.afterClosed().subscribe(() => {
159	this.originElementRemoveActiveClass(config);
160	this.originInstancesMap.delete(originElement);
161	});
162
163	this.originElementAddActiveClass(config);
164	this.originInstancesMap.set(originElement, {
165	config,
166	autocompleteRef
167	});
168
169	return autocompleteRef;
170	}
171
172	ngOnDestroy() {
173	this.dispose();
174	}
175	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous