@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
68 lines • 10.5 kB
JavaScript
import { createComponent, Injector } from '@angular/core';
import { NavigationStart } from '@angular/router';
import { assign } from 'lodash';
import { Subject } from 'rxjs';
import { filter, shareReplay, take, takeUntil } from 'rxjs/operators';
import { BottomDrawerComponent } from './bottom-drawer.component';
export const DRAWER_ANIMATION_TIME = 400;
export class BottomDrawerRef {
/**
* Event fired when the bottom drawer behind the reference is closed.
*/
get onClosed$() {
return this.closedObs$;
}
constructor(component, applicationRef, router, options) {
this.applicationRef = applicationRef;
this.router = router;
this.options = options;
this.closedSubject$ = new Subject();
this.closedObs$ = this.closedSubject$.asObservable().pipe(shareReplay());
this.attachDrawerToView(component);
}
/**
* Closes the bottom drawer behind the reference.
*/
close() {
this.detachDrawerFromView();
this.closedSubject$.next();
this.closedSubject$.complete();
}
attachDrawerToView(component) {
const elementInjector = Injector.create({
providers: [{ provide: BottomDrawerRef, useValue: this }]
});
this.drawerComponentRef = createComponent(BottomDrawerComponent, {
environmentInjector: this.applicationRef.injector,
elementInjector
});
this.applicationRef.attachView(this.drawerComponentRef.hostView);
const hostElement = this.options?.host ?? document.getElementById('main-content');
hostElement.append(this.drawerComponentRef.hostView.rootNodes[0]);
this.drawerComponentRef.changeDetectorRef.detectChanges();
this.drawerComponentRef.instance.drawerHost.clear();
const contentComponentRef = this.drawerComponentRef.instance.drawerHost.createComponent(component);
assign(contentComponentRef.instance, this.options?.initialState);
this.drawerComponentRef.changeDetectorRef.detectChanges();
this.handleNavigation();
}
detachDrawerFromView() {
this.drawerComponentRef.instance.hide();
this.detachDrawerWithAnimationDelay();
}
detachDrawerWithAnimationDelay() {
setTimeout(() => {
this.applicationRef.detachView(this.drawerComponentRef.hostView);
this.drawerComponentRef.destroy();
this.drawerComponentRef = null;
}, DRAWER_ANIMATION_TIME);
}
handleNavigation() {
if (!this.options || !(this.options.closeOnNavigation === false)) {
this.router.events
.pipe(filter(event => event instanceof NavigationStart), take(1), takeUntil(this.onClosed$))
.subscribe(() => this.close());
}
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm90dG9tLWRyYXdlci1yZWYuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb3JlL2JvdHRvbS1kcmF3ZXIvYm90dG9tLWRyYXdlci1yZWYudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUdMLGVBQWUsRUFFZixRQUFRLEVBRVQsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGVBQWUsRUFBVSxNQUFNLGlCQUFpQixDQUFDO0FBQzFELE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxRQUFRLENBQUM7QUFDaEMsT0FBTyxFQUFjLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUMzQyxPQUFPLEVBQUUsTUFBTSxFQUFFLFdBQVcsRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDdEUsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFHbEUsTUFBTSxDQUFDLE1BQU0scUJBQXFCLEdBQUcsR0FBRyxDQUFDO0FBQ3pDLE1BQU0sT0FBTyxlQUFlO0lBQzFCOztPQUVHO0lBQ0gsSUFBSSxTQUFTO1FBQ1gsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDO0lBQ3pCLENBQUM7SUFPRCxZQUNFLFNBQWtCLEVBQ1YsY0FBOEIsRUFDOUIsTUFBYyxFQUNkLE9BQTBCO1FBRjFCLG1CQUFjLEdBQWQsY0FBYyxDQUFnQjtRQUM5QixXQUFNLEdBQU4sTUFBTSxDQUFRO1FBQ2QsWUFBTyxHQUFQLE9BQU8sQ0FBbUI7UUFQNUIsbUJBQWMsR0FBa0IsSUFBSSxPQUFPLEVBQUUsQ0FBQztRQUM5QyxlQUFVLEdBQXFCLElBQUksQ0FBQyxjQUFjLENBQUMsWUFBWSxFQUFFLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDLENBQUM7UUFRNUYsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQ3JDLENBQUM7SUFFRDs7T0FFRztJQUNILEtBQUs7UUFDSCxJQUFJLENBQUMsb0JBQW9CLEVBQUUsQ0FBQztRQUM1QixJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksRUFBRSxDQUFDO1FBQzNCLElBQUksQ0FBQyxjQUFjLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDakMsQ0FBQztJQUVPLGtCQUFrQixDQUFDLFNBQWtCO1FBQzNDLE1BQU0sZUFBZSxHQUFHLFFBQVEsQ0FBQyxNQUFNLENBQUM7WUFDdEMsU0FBUyxFQUFFLENBQUMsRUFBRSxPQUFPLEVBQUUsZUFBZSxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsQ0FBQztTQUMxRCxDQUFDLENBQUM7UUFFSCxJQUFJLENBQUMsa0JBQWtCLEdBQUcsZUFBZSxDQUFDLHFCQUFxQixFQUFFO1lBQy9ELG1CQUFtQixFQUFFLElBQUksQ0FBQyxjQUFjLENBQUMsUUFBUTtZQUNqRCxlQUFlO1NBQ2hCLENBQUMsQ0FBQztRQUVILElBQUksQ0FBQyxjQUFjLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUVqRSxNQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsT0FBTyxFQUFFLElBQUksSUFBSSxRQUFRLENBQUMsY0FBYyxDQUFDLGNBQWMsQ0FBQyxDQUFDO1FBQ2xGLFdBQVcsQ0FBQyxNQUFNLENBQXNCLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxRQUFTLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFFeEYsSUFBSSxDQUFDLGtCQUFrQixDQUFDLGlCQUFpQixDQUFDLGFBQWEsRUFBRSxDQUFDO1FBRTFELElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxRQUFRLENBQUMsVUFBVSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ3BELE1BQU0sbUJBQW1CLEdBQ3ZCLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxRQUFRLENBQUMsVUFBVSxDQUFDLGVBQWUsQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUN6RSxNQUFNLENBQUMsbUJBQW1CLENBQUMsUUFBUSxFQUFFLElBQUksQ0FBQyxPQUFPLEVBQUUsWUFBWSxDQUFDLENBQUM7UUFFakUsSUFBSSxDQUFDLGtCQUFrQixDQUFDLGlCQUFpQixDQUFDLGFBQWEsRUFBRSxDQUFDO1FBRTFELElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO0lBQzFCLENBQUM7SUFFTyxvQkFBb0I7UUFDMUIsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUN4QyxJQUFJLENBQUMsOEJBQThCLEVBQUUsQ0FBQztJQUN4QyxDQUFDO0lBRU8sOEJBQThCO1FBQ3BDLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDZCxJQUFJLENBQUMsY0FBYyxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsa0JBQWtCLENBQUMsUUFBUSxDQUFDLENBQUM7WUFDakUsSUFBSSxDQUFDLGtCQUFrQixDQUFDLE9BQU8sRUFBRSxDQUFDO1lBQ2xDLElBQUksQ0FBQyxrQkFBa0IsR0FBRyxJQUFJLENBQUM7UUFDakMsQ0FBQyxFQUFFLHFCQUFxQixDQUFDLENBQUM7SUFDNUIsQ0FBQztJQUVPLGdCQUFnQjtRQUN0QixJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxpQkFBaUIsS0FBSyxLQUFLLENBQUMsRUFBRSxDQUFDO1lBQ2pFLElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTTtpQkFDZixJQUFJLENBQ0gsTUFBTSxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsS0FBSyxZQUFZLGVBQWUsQ0FBQyxFQUNqRCxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQ1AsU0FBUyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FDMUI7aUJBQ0EsU0FBUyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDO1FBQ25DLENBQUM7SUFDSCxDQUFDO0NBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBcHBsaWNhdGlvblJlZixcbiAgQ29tcG9uZW50UmVmLFxuICBjcmVhdGVDb21wb25lbnQsXG4gIEVtYmVkZGVkVmlld1JlZixcbiAgSW5qZWN0b3IsXG4gIFR5cGVcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOYXZpZ2F0aW9uU3RhcnQsIFJvdXRlciB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5pbXBvcnQgeyBhc3NpZ24gfSBmcm9tICdsb2Rhc2gnO1xuaW1wb3J0IHsgT2JzZXJ2YWJsZSwgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgZmlsdGVyLCBzaGFyZVJlcGxheSwgdGFrZSwgdGFrZVVudGlsIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHsgQm90dG9tRHJhd2VyQ29tcG9uZW50IH0gZnJvbSAnLi9ib3R0b20tZHJhd2VyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEcmF3ZXJPcHRpb25zIH0gZnJvbSAnLi9ib3R0b20tZHJhd2VyLm1vZGVsJztcblxuZXhwb3J0IGNvbnN0IERSQVdFUl9BTklNQVRJT05fVElNRSA9IDQwMDtcbmV4cG9ydCBjbGFzcyBCb3R0b21EcmF3ZXJSZWY8Qz4ge1xuICAvKipcbiAgICogRXZlbnQgZmlyZWQgd2hlbiB0aGUgYm90dG9tIGRyYXdlciBiZWhpbmQgdGhlIHJlZmVyZW5jZSBpcyBjbG9zZWQuXG4gICAqL1xuICBnZXQgb25DbG9zZWQkKCk6IE9ic2VydmFibGU8dm9pZD4ge1xuICAgIHJldHVybiB0aGlzLmNsb3NlZE9icyQ7XG4gIH1cblxuICBwcml2YXRlIGRyYXdlckNvbXBvbmVudFJlZjogQ29tcG9uZW50UmVmPEJvdHRvbURyYXdlckNvbXBvbmVudD47XG5cbiAgcHJpdmF0ZSBjbG9zZWRTdWJqZWN0JDogU3ViamVjdDx2b2lkPiA9IG5ldyBTdWJqZWN0KCk7XG4gIHByaXZhdGUgY2xvc2VkT2JzJDogT2JzZXJ2YWJsZTx2b2lkPiA9IHRoaXMuY2xvc2VkU3ViamVjdCQuYXNPYnNlcnZhYmxlKCkucGlwZShzaGFyZVJlcGxheSgpKTtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBjb21wb25lbnQ6IFR5cGU8Qz4sXG4gICAgcHJpdmF0ZSBhcHBsaWNhdGlvblJlZjogQXBwbGljYXRpb25SZWYsXG4gICAgcHJpdmF0ZSByb3V0ZXI6IFJvdXRlcixcbiAgICBwcml2YXRlIG9wdGlvbnM/OiBEcmF3ZXJPcHRpb25zPEM+XG4gICkge1xuICAgIHRoaXMuYXR0YWNoRHJhd2VyVG9WaWV3KGNvbXBvbmVudCk7XG4gIH1cblxuICAvKipcbiAgICogQ2xvc2VzIHRoZSBib3R0b20gZHJhd2VyIGJlaGluZCB0aGUgcmVmZXJlbmNlLlxuICAgKi9cbiAgY2xvc2UoKSB7XG4gICAgdGhpcy5kZXRhY2hEcmF3ZXJGcm9tVmlldygpO1xuICAgIHRoaXMuY2xvc2VkU3ViamVjdCQubmV4dCgpO1xuICAgIHRoaXMuY2xvc2VkU3ViamVjdCQuY29tcGxldGUoKTtcbiAgfVxuXG4gIHByaXZhdGUgYXR0YWNoRHJhd2VyVG9WaWV3KGNvbXBvbmVudDogVHlwZTxDPikge1xuICAgIGNvbnN0IGVsZW1lbnRJbmplY3RvciA9IEluamVjdG9yLmNyZWF0ZSh7XG4gICAgICBwcm92aWRlcnM6IFt7IHByb3ZpZGU6IEJvdHRvbURyYXdlclJlZiwgdXNlVmFsdWU6IHRoaXMgfV1cbiAgICB9KTtcblxuICAgIHRoaXMuZHJhd2VyQ29tcG9uZW50UmVmID0gY3JlYXRlQ29tcG9uZW50KEJvdHRvbURyYXdlckNvbXBvbmVudCwge1xuICAgICAgZW52aXJvbm1lbnRJbmplY3RvcjogdGhpcy5hcHBsaWNhdGlvblJlZi5pbmplY3RvcixcbiAgICAgIGVsZW1lbnRJbmplY3RvclxuICAgIH0pO1xuXG4gICAgdGhpcy5hcHBsaWNhdGlvblJlZi5hdHRhY2hWaWV3KHRoaXMuZHJhd2VyQ29tcG9uZW50UmVmLmhvc3RWaWV3KTtcblxuICAgIGNvbnN0IGhvc3RFbGVtZW50ID0gdGhpcy5vcHRpb25zPy5ob3N0ID8/IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdtYWluLWNvbnRlbnQnKTtcbiAgICBob3N0RWxlbWVudC5hcHBlbmQoKDxFbWJlZGRlZFZpZXdSZWY8Qz4+dGhpcy5kcmF3ZXJDb21wb25lbnRSZWYuaG9zdFZpZXcpLnJvb3ROb2Rlc1swXSk7XG5cbiAgICB0aGlzLmRyYXdlckNvbXBvbmVudFJlZi5jaGFuZ2VEZXRlY3RvclJlZi5kZXRlY3RDaGFuZ2VzKCk7XG5cbiAgICB0aGlzLmRyYXdlckNvbXBvbmVudFJlZi5pbnN0YW5jZS5kcmF3ZXJIb3N0LmNsZWFyKCk7XG4gICAgY29uc3QgY29udGVudENvbXBvbmVudFJlZiA9XG4gICAgICB0aGlzLmRyYXdlckNvbXBvbmVudFJlZi5pbnN0YW5jZS5kcmF3ZXJIb3N0LmNyZWF0ZUNvbXBvbmVudChjb21wb25lbnQpO1xuICAgIGFzc2lnbihjb250ZW50Q29tcG9uZW50UmVmLmluc3RhbmNlLCB0aGlzLm9wdGlvbnM/LmluaXRpYWxTdGF0ZSk7XG5cbiAgICB0aGlzLmRyYXdlckNvbXBvbmVudFJlZi5jaGFuZ2VEZXRlY3RvclJlZi5kZXRlY3RDaGFuZ2VzKCk7XG5cbiAgICB0aGlzLmhhbmRsZU5hdmlnYXRpb24oKTtcbiAgfVxuXG4gIHByaXZhdGUgZGV0YWNoRHJhd2VyRnJvbVZpZXcoKTogdm9pZCB7XG4gICAgdGhpcy5kcmF3ZXJDb21wb25lbnRSZWYuaW5zdGFuY2UuaGlkZSgpO1xuICAgIHRoaXMuZGV0YWNoRHJhd2VyV2l0aEFuaW1hdGlvbkRlbGF5KCk7XG4gIH1cblxuICBwcml2YXRlIGRldGFjaERyYXdlcldpdGhBbmltYXRpb25EZWxheSgpOiB2b2lkIHtcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHRoaXMuYXBwbGljYXRpb25SZWYuZGV0YWNoVmlldyh0aGlzLmRyYXdlckNvbXBvbmVudFJlZi5ob3N0Vmlldyk7XG4gICAgICB0aGlzLmRyYXdlckNvbXBvbmVudFJlZi5kZXN0cm95KCk7XG4gICAgICB0aGlzLmRyYXdlckNvbXBvbmVudFJlZiA9IG51bGw7XG4gICAgfSwgRFJBV0VSX0FOSU1BVElPTl9USU1FKTtcbiAgfVxuXG4gIHByaXZhdGUgaGFuZGxlTmF2aWdhdGlvbigpIHtcbiAgICBpZiAoIXRoaXMub3B0aW9ucyB8fCAhKHRoaXMub3B0aW9ucy5jbG9zZU9uTmF2aWdhdGlvbiA9PT0gZmFsc2UpKSB7XG4gICAgICB0aGlzLnJvdXRlci5ldmVudHNcbiAgICAgICAgLnBpcGUoXG4gICAgICAgICAgZmlsdGVyKGV2ZW50ID0+IGV2ZW50IGluc3RhbmNlb2YgTmF2aWdhdGlvblN0YXJ0KSxcbiAgICAgICAgICB0YWtlKDEpLFxuICAgICAgICAgIHRha2VVbnRpbCh0aGlzLm9uQ2xvc2VkJClcbiAgICAgICAgKVxuICAgICAgICAuc3Vic2NyaWJlKCgpID0+IHRoaXMuY2xvc2UoKSk7XG4gICAgfVxuICB9XG59XG4iXX0=