@hxui/angular
Version:
An Angular library based on the [HXUI design system](https://hxui.io).
93 lines • 12.7 kB
JavaScript
import { ReflectiveInjector, Injectable, ComponentFactoryResolver, Optional, Inject } from '@angular/core';
import { ModalBackdropComponent } from './modal-backdrop.component';
import { FocusTrapFactory } from '@angular/cdk/a11y';
import { DOCUMENT } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "@angular/cdk/a11y";
export class ModalService {
constructor(componentFactoryResolver, focusTrapFactory, document) {
this.componentFactoryResolver = componentFactoryResolver;
this.focusTrapFactory = focusTrapFactory;
this.document = document;
// Element that was focused before the dialog was opened. Save this to restore upon close.
this.elementFocusedBeforeDialogWasOpened = null;
}
registerViewContainerRef(vcRef) {
this.vcRef = vcRef;
}
registerInjector(injector) {
this.injector = injector;
}
/**
* Create component dynamically
*/
create(component, parameters) {
// create backdrop
this.backdropRef = this.dynamicComponentLoader(ModalBackdropComponent);
// create dynamic component
this.componentRef = this.dynamicComponentLoader(component, parameters);
this.componentNativeElement = this.componentRef.location.nativeElement;
this.trapFocus();
return this.componentRef;
}
close() {
if (!!this.componentRef) {
this.componentRef.destroy();
}
}
/**
* Load dynamic component and return componentRef
*/
dynamicComponentLoader(component, parameters) {
// compile the component based on its type and
// create a component factory
const factory = this.componentFactoryResolver.resolveComponentFactory(component);
// the injector will be needed for DI in
// the custom component
const childInjector = ReflectiveInjector.resolveAndCreate([], this.injector);
// create the actual component
const componentRef = this.vcRef.createComponent(factory, 0, childInjector);
// pass the @Input parameters to the instance
Object.assign(componentRef.instance, parameters);
// add a destroy method to the modal instance
componentRef.instance['destroy'] = () => {
// this will close the backdrop
this.backdropRef.destroy();
// this will destroy the component
componentRef.destroy();
this.restoreFocus();
};
return componentRef;
}
trapFocus() {
this.focusTrap = this.focusTrapFactory.create(this.componentNativeElement);
this.savePreviouslyFocusedElement();
this.focusTrap.focusInitialElementWhenReady();
}
restoreFocus() {
const toFocus = this.elementFocusedBeforeDialogWasOpened;
if (toFocus && typeof toFocus.focus === 'function') {
toFocus.focus();
}
if (this.focusTrap) {
this.focusTrap.destroy();
}
}
savePreviouslyFocusedElement() {
if (this.document) {
this.elementFocusedBeforeDialogWasOpened = this.document
.activeElement;
}
}
}
ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ModalService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i1.FocusTrapFactory }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ModalService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ModalService, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i1.FocusTrapFactory }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [DOCUMENT]
}] }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2h4LXVpL3NyYy9saWIvbW9kYWwvbW9kYWwuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsa0JBQWtCLEVBQ2xCLFVBQVUsRUFHVix3QkFBd0IsRUFDeEIsUUFBUSxFQUNSLE1BQU0sRUFDUCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNwRSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUNyRCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0saUJBQWlCLENBQUM7OztBQUczQyxNQUFNLE9BQU8sWUFBWTtJQWdCdkIsWUFDVSx3QkFBa0QsRUFDbEQsZ0JBQWtDLEVBR2xDLFFBQWE7UUFKYiw2QkFBd0IsR0FBeEIsd0JBQXdCLENBQTBCO1FBQ2xELHFCQUFnQixHQUFoQixnQkFBZ0IsQ0FBa0I7UUFHbEMsYUFBUSxHQUFSLFFBQVEsQ0FBSztRQWR2QiwwRkFBMEY7UUFDbEYsd0NBQW1DLEdBQXVCLElBQUksQ0FBQztJQWNwRSxDQUFDO0lBRUosd0JBQXdCLENBQUMsS0FBdUI7UUFDOUMsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7SUFDckIsQ0FBQztJQUVELGdCQUFnQixDQUFDLFFBQWtCO1FBQ2pDLElBQUksQ0FBQyxRQUFRLEdBQUcsUUFBUSxDQUFDO0lBQzNCLENBQUM7SUFFRDs7T0FFRztJQUNILE1BQU0sQ0FBSSxTQUFjLEVBQUUsVUFBbUI7UUFDM0Msa0JBQWtCO1FBQ2xCLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLHNCQUFzQixDQUM1QyxzQkFBc0IsQ0FDdkIsQ0FBQztRQUVGLDJCQUEyQjtRQUMzQixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxzQkFBc0IsQ0FBSSxTQUFTLEVBQUUsVUFBVSxDQUFDLENBQUM7UUFFMUUsSUFBSSxDQUFDLHNCQUFzQixHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQztRQUN2RSxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7UUFFakIsT0FBTyxJQUFJLENBQUMsWUFBWSxDQUFDO0lBQzNCLENBQUM7SUFFRCxLQUFLO1FBQ0gsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRTtZQUN2QixJQUFJLENBQUMsWUFBWSxDQUFDLE9BQU8sRUFBRSxDQUFDO1NBQzdCO0lBQ0gsQ0FBQztJQUVEOztPQUVHO0lBQ0ssc0JBQXNCLENBQzVCLFNBQWMsRUFDZCxVQUFtQjtRQUVuQiw4Q0FBOEM7UUFDOUMsNkJBQTZCO1FBQzdCLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyx1QkFBdUIsQ0FDbkUsU0FBUyxDQUNWLENBQUM7UUFDRix3Q0FBd0M7UUFDeEMsdUJBQXVCO1FBQ3ZCLE1BQU0sYUFBYSxHQUFHLGtCQUFrQixDQUFDLGdCQUFnQixDQUN2RCxFQUFFLEVBQ0YsSUFBSSxDQUFDLFFBQVEsQ0FDZCxDQUFDO1FBQ0YsOEJBQThCO1FBQzlCLE1BQU0sWUFBWSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsZUFBZSxDQUFDLE9BQU8sRUFBRSxDQUFDLEVBQUUsYUFBYSxDQUFDLENBQUM7UUFFM0UsNkNBQTZDO1FBQzdDLE1BQU0sQ0FBQyxNQUFNLENBQUMsWUFBWSxDQUFDLFFBQVEsRUFBRSxVQUFVLENBQUMsQ0FBQztRQUNqRCw2Q0FBNkM7UUFDN0MsWUFBWSxDQUFDLFFBQVEsQ0FBQyxTQUFTLENBQUMsR0FBRyxHQUFHLEVBQUU7WUFDdEMsK0JBQStCO1lBQy9CLElBQUksQ0FBQyxXQUFXLENBQUMsT0FBTyxFQUFFLENBQUM7WUFDM0Isa0NBQWtDO1lBQ2xDLFlBQVksQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUN2QixJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDdEIsQ0FBQyxDQUFDO1FBRUYsT0FBTyxZQUFZLENBQUM7SUFDdEIsQ0FBQztJQUVPLFNBQVM7UUFDZixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLHNCQUFzQixDQUFDLENBQUM7UUFDM0UsSUFBSSxDQUFDLDRCQUE0QixFQUFFLENBQUM7UUFDcEMsSUFBSSxDQUFDLFNBQVMsQ0FBQyw0QkFBNEIsRUFBRSxDQUFDO0lBQ2hELENBQUM7SUFFTyxZQUFZO1FBQ2xCLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxtQ0FBbUMsQ0FBQztRQUV6RCxJQUFJLE9BQU8sSUFBSSxPQUFPLE9BQU8sQ0FBQyxLQUFLLEtBQUssVUFBVSxFQUFFO1lBQ2xELE9BQU8sQ0FBQyxLQUFLLEVBQUUsQ0FBQztTQUNqQjtRQUVELElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUNsQixJQUFJLENBQUMsU0FBUyxDQUFDLE9BQU8sRUFBRSxDQUFDO1NBQzFCO0lBQ0gsQ0FBQztJQUVPLDRCQUE0QjtRQUNsQyxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDakIsSUFBSSxDQUFDLG1DQUFtQyxHQUFHLElBQUksQ0FBQyxRQUFRO2lCQUNyRCxhQUE0QixDQUFDO1NBQ2pDO0lBQ0gsQ0FBQzs7MEdBbEhVLFlBQVksMEZBb0JiLFFBQVE7OEdBcEJQLFlBQVk7NEZBQVosWUFBWTtrQkFEeEIsVUFBVTs7MEJBb0JOLFFBQVE7OzBCQUNSLE1BQU07MkJBQUMsUUFBUSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgVmlld0NvbnRhaW5lclJlZixcclxuICBSZWZsZWN0aXZlSW5qZWN0b3IsXHJcbiAgSW5qZWN0YWJsZSxcclxuICBJbmplY3RvcixcclxuICBDb21wb25lbnRSZWYsXHJcbiAgQ29tcG9uZW50RmFjdG9yeVJlc29sdmVyLFxyXG4gIE9wdGlvbmFsLFxyXG4gIEluamVjdFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBNb2RhbEJhY2tkcm9wQ29tcG9uZW50IH0gZnJvbSAnLi9tb2RhbC1iYWNrZHJvcC5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBGb2N1c1RyYXBGYWN0b3J5IH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2ExMXknO1xyXG5pbXBvcnQgeyBET0NVTUVOVCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcblxyXG5ASW5qZWN0YWJsZSgpXHJcbmV4cG9ydCBjbGFzcyBNb2RhbFNlcnZpY2Uge1xyXG4gIC8vIGhlcmUgd2UgaG9sZCBvdXIgcGxhY2Vob2xkZXJcclxuICBwcml2YXRlIHZjUmVmOiBWaWV3Q29udGFpbmVyUmVmO1xyXG4gIC8vIGhlcmUgd2UgaG9sZCBvdXIgaW5qZWN0b3JcclxuICBwcml2YXRlIGluamVjdG9yOiBJbmplY3RvcjtcclxuICAvLyBoZXJlIHdlIGhvbGQgdGhlIGJhY2tkcm9wIGNvbXBvbmVudFxyXG4gIHByaXZhdGUgYmFja2Ryb3BSZWY6IENvbXBvbmVudFJlZjxNb2RhbEJhY2tkcm9wQ29tcG9uZW50PjtcclxuICAvLyBFbGVtZW50IHRoYXQgd2FzIGZvY3VzZWQgYmVmb3JlIHRoZSBkaWFsb2cgd2FzIG9wZW5lZC4gU2F2ZSB0aGlzIHRvIHJlc3RvcmUgdXBvbiBjbG9zZS5cclxuICBwcml2YXRlIGVsZW1lbnRGb2N1c2VkQmVmb3JlRGlhbG9nV2FzT3BlbmVkOiBIVE1MRWxlbWVudCB8IG51bGwgPSBudWxsO1xyXG5cclxuICBwcml2YXRlIGNvbXBvbmVudFJlZjtcclxuXHJcbiAgcHJpdmF0ZSBjb21wb25lbnROYXRpdmVFbGVtZW50O1xyXG5cclxuICBwcml2YXRlIGZvY3VzVHJhcDtcclxuXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcml2YXRlIGNvbXBvbmVudEZhY3RvcnlSZXNvbHZlcjogQ29tcG9uZW50RmFjdG9yeVJlc29sdmVyLFxyXG4gICAgcHJpdmF0ZSBmb2N1c1RyYXBGYWN0b3J5OiBGb2N1c1RyYXBGYWN0b3J5LFxyXG4gICAgQE9wdGlvbmFsKClcclxuICAgIEBJbmplY3QoRE9DVU1FTlQpXHJcbiAgICBwcml2YXRlIGRvY3VtZW50OiBhbnlcclxuICApIHt9XHJcblxyXG4gIHJlZ2lzdGVyVmlld0NvbnRhaW5lclJlZih2Y1JlZjogVmlld0NvbnRhaW5lclJlZik6IHZvaWQge1xyXG4gICAgdGhpcy52Y1JlZiA9IHZjUmVmO1xyXG4gIH1cclxuXHJcbiAgcmVnaXN0ZXJJbmplY3RvcihpbmplY3RvcjogSW5qZWN0b3IpOiB2b2lkIHtcclxuICAgIHRoaXMuaW5qZWN0b3IgPSBpbmplY3RvcjtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIENyZWF0ZSBjb21wb25lbnQgZHluYW1pY2FsbHlcclxuICAgKi9cclxuICBjcmVhdGU8VD4oY29tcG9uZW50OiBhbnksIHBhcmFtZXRlcnM/OiBPYmplY3QpOiBDb21wb25lbnRSZWY8VD4ge1xyXG4gICAgLy8gY3JlYXRlIGJhY2tkcm9wXHJcbiAgICB0aGlzLmJhY2tkcm9wUmVmID0gdGhpcy5keW5hbWljQ29tcG9uZW50TG9hZGVyPE1vZGFsQmFja2Ryb3BDb21wb25lbnQ+KFxyXG4gICAgICBNb2RhbEJhY2tkcm9wQ29tcG9uZW50XHJcbiAgICApO1xyXG5cclxuICAgIC8vIGNyZWF0ZSBkeW5hbWljIGNvbXBvbmVudFxyXG4gICAgdGhpcy5jb21wb25lbnRSZWYgPSB0aGlzLmR5bmFtaWNDb21wb25lbnRMb2FkZXI8VD4oY29tcG9uZW50LCBwYXJhbWV0ZXJzKTtcclxuXHJcbiAgICB0aGlzLmNvbXBvbmVudE5hdGl2ZUVsZW1lbnQgPSB0aGlzLmNvbXBvbmVudFJlZi5sb2NhdGlvbi5uYXRpdmVFbGVtZW50O1xyXG4gICAgdGhpcy50cmFwRm9jdXMoKTtcclxuXHJcbiAgICByZXR1cm4gdGhpcy5jb21wb25lbnRSZWY7XHJcbiAgfVxyXG5cclxuICBjbG9zZSgpIHtcclxuICAgIGlmICghIXRoaXMuY29tcG9uZW50UmVmKSB7XHJcbiAgICAgIHRoaXMuY29tcG9uZW50UmVmLmRlc3Ryb3koKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIExvYWQgZHluYW1pYyBjb21wb25lbnQgYW5kIHJldHVybiBjb21wb25lbnRSZWZcclxuICAgKi9cclxuICBwcml2YXRlIGR5bmFtaWNDb21wb25lbnRMb2FkZXI8VD4oXHJcbiAgICBjb21wb25lbnQ6IGFueSxcclxuICAgIHBhcmFtZXRlcnM/OiBPYmplY3RcclxuICApOiBDb21wb25lbnRSZWY8YW55PiB7XHJcbiAgICAvLyBjb21waWxlIHRoZSBjb21wb25lbnQgYmFzZWQgb24gaXRzIHR5cGUgYW5kXHJcbiAgICAvLyBjcmVhdGUgYSBjb21wb25lbnQgZmFjdG9yeVxyXG4gICAgY29uc3QgZmFjdG9yeSA9IHRoaXMuY29tcG9uZW50RmFjdG9yeVJlc29sdmVyLnJlc29sdmVDb21wb25lbnRGYWN0b3J5KFxyXG4gICAgICBjb21wb25lbnRcclxuICAgICk7XHJcbiAgICAvLyB0aGUgaW5qZWN0b3Igd2lsbCBiZSBuZWVkZWQgZm9yIERJIGluXHJcbiAgICAvLyB0aGUgY3VzdG9tIGNvbXBvbmVudFxyXG4gICAgY29uc3QgY2hpbGRJbmplY3RvciA9IFJlZmxlY3RpdmVJbmplY3Rvci5yZXNvbHZlQW5kQ3JlYXRlKFxyXG4gICAgICBbXSxcclxuICAgICAgdGhpcy5pbmplY3RvclxyXG4gICAgKTtcclxuICAgIC8vIGNyZWF0ZSB0aGUgYWN0dWFsIGNvbXBvbmVudFxyXG4gICAgY29uc3QgY29tcG9uZW50UmVmID0gdGhpcy52Y1JlZi5jcmVhdGVDb21wb25lbnQoZmFjdG9yeSwgMCwgY2hpbGRJbmplY3Rvcik7XHJcblxyXG4gICAgLy8gcGFzcyB0aGUgQElucHV0IHBhcmFtZXRlcnMgdG8gdGhlIGluc3RhbmNlXHJcbiAgICBPYmplY3QuYXNzaWduKGNvbXBvbmVudFJlZi5pbnN0YW5jZSwgcGFyYW1ldGVycyk7XHJcbiAgICAvLyBhZGQgYSBkZXN0cm95IG1ldGhvZCB0byB0aGUgbW9kYWwgaW5zdGFuY2VcclxuICAgIGNvbXBvbmVudFJlZi5pbnN0YW5jZVsnZGVzdHJveSddID0gKCkgPT4ge1xyXG4gICAgICAvLyB0aGlzIHdpbGwgY2xvc2UgdGhlIGJhY2tkcm9wXHJcbiAgICAgIHRoaXMuYmFja2Ryb3BSZWYuZGVzdHJveSgpO1xyXG4gICAgICAvLyB0aGlzIHdpbGwgZGVzdHJveSB0aGUgY29tcG9uZW50XHJcbiAgICAgIGNvbXBvbmVudFJlZi5kZXN0cm95KCk7XHJcbiAgICAgIHRoaXMucmVzdG9yZUZvY3VzKCk7XHJcbiAgICB9O1xyXG5cclxuICAgIHJldHVybiBjb21wb25lbnRSZWY7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIHRyYXBGb2N1cygpIHtcclxuICAgIHRoaXMuZm9jdXNUcmFwID0gdGhpcy5mb2N1c1RyYXBGYWN0b3J5LmNyZWF0ZSh0aGlzLmNvbXBvbmVudE5hdGl2ZUVsZW1lbnQpO1xyXG4gICAgdGhpcy5zYXZlUHJldmlvdXNseUZvY3VzZWRFbGVtZW50KCk7XHJcbiAgICB0aGlzLmZvY3VzVHJhcC5mb2N1c0luaXRpYWxFbGVtZW50V2hlblJlYWR5KCk7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIHJlc3RvcmVGb2N1cygpIHtcclxuICAgIGNvbnN0IHRvRm9jdXMgPSB0aGlzLmVsZW1lbnRGb2N1c2VkQmVmb3JlRGlhbG9nV2FzT3BlbmVkO1xyXG5cclxuICAgIGlmICh0b0ZvY3VzICYmIHR5cGVvZiB0b0ZvY3VzLmZvY3VzID09PSAnZnVuY3Rpb24nKSB7XHJcbiAgICAgIHRvRm9jdXMuZm9jdXMoKTtcclxuICAgIH1cclxuXHJcbiAgICBpZiAodGhpcy5mb2N1c1RyYXApIHtcclxuICAgICAgdGhpcy5mb2N1c1RyYXAuZGVzdHJveSgpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBzYXZlUHJldmlvdXNseUZvY3VzZWRFbGVtZW50KCkge1xyXG4gICAgaWYgKHRoaXMuZG9jdW1lbnQpIHtcclxuICAgICAgdGhpcy5lbGVtZW50Rm9jdXNlZEJlZm9yZURpYWxvZ1dhc09wZW5lZCA9IHRoaXMuZG9jdW1lbnRcclxuICAgICAgICAuYWN0aXZlRWxlbWVudCBhcyBIVE1MRWxlbWVudDtcclxuICAgIH1cclxuICB9XHJcbn1cclxuIl19