@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
74 lines • 12.1 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.instance = 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();
return contentComponentRef.instance;
}
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), filter(({ url: targetUrl }) => {
const currentUrlWithoutParams = this.router.url.split('?')[0];
const targetUrlWithoutParams = targetUrl.split('?')[0];
// this check is not to close the drawer when the query params change, e.g. when filter is applied to the list
return currentUrlWithoutParams !== targetUrlWithoutParams;
}), take(1), takeUntil(this.onClosed$))
.subscribe(() => this.close());
}
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm90dG9tLWRyYXdlci1yZWYuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb3JlL2JvdHRvbS1kcmF3ZXIvYm90dG9tLWRyYXdlci1yZWYudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUdMLGVBQWUsRUFFZixRQUFRLEVBRVQsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGVBQWUsRUFBVSxNQUFNLGlCQUFpQixDQUFDO0FBQzFELE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxRQUFRLENBQUM7QUFDaEMsT0FBTyxFQUFjLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUMzQyxPQUFPLEVBQUUsTUFBTSxFQUFFLFdBQVcsRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDdEUsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFHbEUsTUFBTSxDQUFDLE1BQU0scUJBQXFCLEdBQUcsR0FBRyxDQUFDO0FBQ3pDLE1BQU0sT0FBTyxlQUFlO0lBQzFCOztPQUVHO0lBQ0gsSUFBSSxTQUFTO1FBQ1gsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDO0lBQ3pCLENBQUM7SUFZRCxZQUNFLFNBQWtCLEVBQ1YsY0FBOEIsRUFDOUIsTUFBYyxFQUNkLE9BQTBCO1FBRjFCLG1CQUFjLEdBQWQsY0FBYyxDQUFnQjtRQUM5QixXQUFNLEdBQU4sTUFBTSxDQUFRO1FBQ2QsWUFBTyxHQUFQLE9BQU8sQ0FBbUI7UUFQNUIsbUJBQWMsR0FBa0IsSUFBSSxPQUFPLEVBQUUsQ0FBQztRQUM5QyxlQUFVLEdBQXFCLElBQUksQ0FBQyxjQUFjLENBQUMsWUFBWSxFQUFFLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDLENBQUM7UUFRNUYsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsa0JBQWtCLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDckQsQ0FBQztJQUVE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QVMsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7Z0JBRXZELDhHQUE4RztnQkFDOUcsT0FBTyx1QkFBdUIsS0FBSyxzQkFBc0IsQ0FBQztZQUM1RCxDQUFDLENBQUMsRUFDRixJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQ1AsU0FBUyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FDMUI7aUJBQ0EsU0FBUyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDO1FBQ25DLENBQUM7SUFDSCxDQUFDO0NBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBcHBsaWNhdGlvblJlZixcbiAgQ29tcG9uZW50UmVmLFxuICBjcmVhdGVDb21wb25lbnQsXG4gIEVtYmVkZGVkVmlld1JlZixcbiAgSW5qZWN0b3IsXG4gIFR5cGVcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOYXZpZ2F0aW9uU3RhcnQsIFJvdXRlciB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5pbXBvcnQgeyBhc3NpZ24gfSBmcm9tICdsb2Rhc2gnO1xuaW1wb3J0IHsgT2JzZXJ2YWJsZSwgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgZmlsdGVyLCBzaGFyZVJlcGxheSwgdGFrZSwgdGFrZVVudGlsIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHsgQm90dG9tRHJhd2VyQ29tcG9uZW50IH0gZnJvbSAnLi9ib3R0b20tZHJhd2VyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEcmF3ZXJPcHRpb25zIH0gZnJvbSAnLi9ib3R0b20tZHJhd2VyLm1vZGVsJztcblxuZXhwb3J0IGNvbnN0IERSQVdFUl9BTklNQVRJT05fVElNRSA9IDQwMDtcbmV4cG9ydCBjbGFzcyBCb3R0b21EcmF3ZXJSZWY8Qz4ge1xuICAvKipcbiAgICogRXZlbnQgZmlyZWQgd2hlbiB0aGUgYm90dG9tIGRyYXdlciBiZWhpbmQgdGhlIHJlZmVyZW5jZSBpcyBjbG9zZWQuXG4gICAqL1xuICBnZXQgb25DbG9zZWQkKCk6IE9ic2VydmFibGU8dm9pZD4ge1xuICAgIHJldHVybiB0aGlzLmNsb3NlZE9icyQ7XG4gIH1cblxuICAvKipcbiAgICogVGhlIGluc3RhbmNlIG9mIHRoZSBjb21wb25lbnQgY3JlYXRlZC5cbiAgICovXG4gIGluc3RhbmNlOiBDO1xuXG4gIHByaXZhdGUgZHJhd2VyQ29tcG9uZW50UmVmOiBDb21wb25lbnRSZWY8Qm90dG9tRHJhd2VyQ29tcG9uZW50PjtcblxuICBwcml2YXRlIGNsb3NlZFN1YmplY3QkOiBTdWJqZWN0PHZvaWQ+ID0gbmV3IFN1YmplY3QoKTtcbiAgcHJpdmF0ZSBjbG9zZWRPYnMkOiBPYnNlcnZhYmxlPHZvaWQ+ID0gdGhpcy5jbG9zZWRTdWJqZWN0JC5hc09ic2VydmFibGUoKS5waXBlKHNoYXJlUmVwbGF5KCkpO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIGNvbXBvbmVudDogVHlwZTxDPixcbiAgICBwcml2YXRlIGFwcGxpY2F0aW9uUmVmOiBBcHBsaWNhdGlvblJlZixcbiAgICBwcml2YXRlIHJvdXRlcjogUm91dGVyLFxuICAgIHByaXZhdGUgb3B0aW9ucz86IERyYXdlck9wdGlvbnM8Qz5cbiAgKSB7XG4gICAgdGhpcy5pbnN0YW5jZSA9IHRoaXMuYXR0YWNoRHJhd2VyVG9WaWV3KGNvbXBvbmVudCk7XG4gIH1cblxuICAvKipcbiAgICogQ2xvc2VzIHRoZSBib3R0b20gZHJhd2VyIGJlaGluZCB0aGUgcmVmZXJlbmNlLlxuICAgKi9cbiAgY2xvc2UoKSB7XG4gICAgdGhpcy5kZXRhY2hEcmF3ZXJGcm9tVmlldygpO1xuICAgIHRoaXMuY2xvc2VkU3ViamVjdCQubmV4dCgpO1xuICAgIHRoaXMuY2xvc2VkU3ViamVjdCQuY29tcGxldGUoKTtcbiAgfVxuXG4gIHByaXZhdGUgYXR0YWNoRHJhd2VyVG9WaWV3KGNvbXBvbmVudDogVHlwZTxDPikge1xuICAgIGNvbnN0IGVsZW1lbnRJbmplY3RvciA9IEluamVjdG9yLmNyZWF0ZSh7XG4gICAgICBwcm92aWRlcnM6IFt7IHByb3ZpZGU6IEJvdHRvbURyYXdlclJlZiwgdXNlVmFsdWU6IHRoaXMgfV1cbiAgICB9KTtcblxuICAgIHRoaXMuZHJhd2VyQ29tcG9uZW50UmVmID0gY3JlYXRlQ29tcG9uZW50KEJvdHRvbURyYXdlckNvbXBvbmVudCwge1xuICAgICAgZW52aXJvbm1lbnRJbmplY3RvcjogdGhpcy5hcHBsaWNhdGlvblJlZi5pbmplY3RvcixcbiAgICAgIGVsZW1lbnRJbmplY3RvclxuICAgIH0pO1xuXG4gICAgdGhpcy5hcHBsaWNhdGlvblJlZi5hdHRhY2hWaWV3KHRoaXMuZHJhd2VyQ29tcG9uZW50UmVmLmhvc3RWaWV3KTtcblxuICAgIGNvbnN0IGhvc3RFbGVtZW50ID0gdGhpcy5vcHRpb25zPy5ob3N0ID8/IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdtYWluLWNvbnRlbnQnKTtcbiAgICBob3N0RWxlbWVudC5hcHBlbmQoKDxFbWJlZGRlZFZpZXdSZWY8Qz4+dGhpcy5kcmF3ZXJDb21wb25lbnRSZWYuaG9zdFZpZXcpLnJvb3ROb2Rlc1swXSk7XG5cbiAgICB0aGlzLmRyYXdlckNvbXBvbmVudFJlZi5jaGFuZ2VEZXRlY3RvclJlZi5kZXRlY3RDaGFuZ2VzKCk7XG5cbiAgICB0aGlzLmRyYXdlckNvbXBvbmVudFJlZi5pbnN0YW5jZS5kcmF3ZXJIb3N0LmNsZWFyKCk7XG4gICAgY29uc3QgY29udGVudENvbXBvbmVudFJlZiA9XG4gICAgICB0aGlzLmRyYXdlckNvbXBvbmVudFJlZi5pbnN0YW5jZS5kcmF3ZXJIb3N0LmNyZWF0ZUNvbXBvbmVudChjb21wb25lbnQpO1xuICAgIGFzc2lnbihjb250ZW50Q29tcG9uZW50UmVmLmluc3RhbmNlLCB0aGlzLm9wdGlvbnM/LmluaXRpYWxTdGF0ZSk7XG5cbiAgICB0aGlzLmRyYXdlckNvbXBvbmVudFJlZi5jaGFuZ2VEZXRlY3RvclJlZi5kZXRlY3RDaGFuZ2VzKCk7XG5cbiAgICB0aGlzLmhhbmRsZU5hdmlnYXRpb24oKTtcblxuICAgIHJldHVybiBjb250ZW50Q29tcG9uZW50UmVmLmluc3RhbmNlO1xuICB9XG5cbiAgcHJpdmF0ZSBkZXRhY2hEcmF3ZXJGcm9tVmlldygpOiB2b2lkIHtcbiAgICB0aGlzLmRyYXdlckNvbXBvbmVudFJlZi5pbnN0YW5jZS5oaWRlKCk7XG4gICAgdGhpcy5kZXRhY2hEcmF3ZXJXaXRoQW5pbWF0aW9uRGVsYXkoKTtcbiAgfVxuXG4gIHByaXZhdGUgZGV0YWNoRHJhd2VyV2l0aEFuaW1hdGlvbkRlbGF5KCk6IHZvaWQge1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgdGhpcy5hcHBsaWNhdGlvblJlZi5kZXRhY2hWaWV3KHRoaXMuZHJhd2VyQ29tcG9uZW50UmVmLmhvc3RWaWV3KTtcbiAgICAgIHRoaXMuZHJhd2VyQ29tcG9uZW50UmVmLmRlc3Ryb3koKTtcbiAgICAgIHRoaXMuZHJhd2VyQ29tcG9uZW50UmVmID0gbnVsbDtcbiAgICB9LCBEUkFXRVJfQU5JTUFUSU9OX1RJTUUpO1xuICB9XG5cbiAgcHJpdmF0ZSBoYW5kbGVOYXZpZ2F0aW9uKCkge1xuICAgIGlmICghdGhpcy5vcHRpb25zIHx8ICEodGhpcy5vcHRpb25zLmNsb3NlT25OYXZpZ2F0aW9uID09PSBmYWxzZSkpIHtcbiAgICAgIHRoaXMucm91dGVyLmV2ZW50c1xuICAgICAgICAucGlwZShcbiAgICAgICAgICBmaWx0ZXIoZXZlbnQgPT4gZXZlbnQgaW5zdGFuY2VvZiBOYXZpZ2F0aW9uU3RhcnQpLFxuICAgICAgICAgIGZpbHRlcigoeyB1cmw6IHRhcmdldFVybCB9KSA9PiB7XG4gICAgICAgICAgICBjb25zdCBjdXJyZW50VXJsV2l0aG91dFBhcmFtcyA9IHRoaXMucm91dGVyLnVybC5zcGxpdCgnPycpWzBdO1xuICAgICAgICAgICAgY29uc3QgdGFyZ2V0VXJsV2l0aG91dFBhcmFtcyA9IHRhcmdldFVybC5zcGxpdCgnPycpWzBdO1xuXG4gICAgICAgICAgICAvLyB0aGlzIGNoZWNrIGlzIG5vdCB0byBjbG9zZSB0aGUgZHJhd2VyIHdoZW4gdGhlIHF1ZXJ5IHBhcmFtcyBjaGFuZ2UsIGUuZy4gd2hlbiBmaWx0ZXIgaXMgYXBwbGllZCB0byB0aGUgbGlzdFxuICAgICAgICAgICAgcmV0dXJuIGN1cnJlbnRVcmxXaXRob3V0UGFyYW1zICE9PSB0YXJnZXRVcmxXaXRob3V0UGFyYW1zO1xuICAgICAgICAgIH0pLFxuICAgICAgICAgIHRha2UoMSksXG4gICAgICAgICAgdGFrZVVudGlsKHRoaXMub25DbG9zZWQkKVxuICAgICAgICApXG4gICAgICAgIC5zdWJzY3JpYmUoKCkgPT4gdGhpcy5jbG9zZSgpKTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==