@hxui/angular
Version:
An Angular library based on the [HXUI design system](https://hxui.io).
88 lines • 13 kB
JavaScript
import { Injectable, Injector } from '@angular/core';
import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
import { DialogOverlayRef } from './dialog-overlay.ref';
import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
import { FocusTrapFactory } from '@angular/cdk/a11y';
import * as i0 from "@angular/core";
import * as i1 from "@angular/cdk/overlay";
import * as i2 from "@angular/cdk/a11y";
const DEFAULT_CONFIG = {
hasBackdrop: true,
backdropClass: 'dark-backdrop',
panelClass: 'hx-modal-panel',
backdropClickable: true
};
export class DialogService {
constructor(injector, overlay, focusTrapFactory) {
this.injector = injector;
this.overlay = overlay;
this.focusTrapFactory = focusTrapFactory;
}
/**
* Create component dynamically
*/
open(component, config = {}, parameters) {
// Override default configuration
const dialogConfig = { ...DEFAULT_CONFIG, ...config };
// Returns an OverlayRef (which is a PortalHost)
const overlayRef = this.createOverlay(dialogConfig);
const dialogRef = new DialogOverlayRef(overlayRef);
// Create ComponentPortal that can be attached to a PortalHost
// and then attach ComponentPortal to PortalHost
const containerRef = this.attachDialogContainer(component, overlayRef, dialogConfig, dialogRef);
// pass the @Input parameters to the instance
Object.assign(containerRef.instance, parameters);
// Subscribe to a stream that emits when the backdrop was clicked
if (dialogConfig.backdropClickable) {
overlayRef.backdropClick().subscribe(_ => dialogRef.close());
}
// create and manage focus trap
this.componentNativeElement = containerRef.location.nativeElement;
this.trapFocus();
return dialogRef;
}
createOverlay(config) {
// Returns an OverlayConfig
const overlayConfig = this.getOverlayConfig(config);
// Returns an OverlayRef
return this.overlay.create(overlayConfig);
}
getOverlayConfig(config) {
const positionStrategy = this.overlay.position()
.global()
.centerHorizontally()
.centerVertically();
const overlayConfig = new OverlayConfig({
hasBackdrop: config.hasBackdrop,
backdropClass: config.backdropClass,
panelClass: config.panelClass,
scrollStrategy: this.overlay.scrollStrategies.block(),
positionStrategy
});
return overlayConfig;
}
createInjector(dialogRef) {
// Instantiate new WeakMap for our custom injection tokens
const injectionTokens = new WeakMap();
// Set custom injection tokens
injectionTokens.set(DialogOverlayRef, dialogRef);
// Instantiate new PortalInjector
return new PortalInjector(this.injector, injectionTokens);
}
attachDialogContainer(component, overlayRef, config, dialogRef) {
const injector = this.createInjector(dialogRef);
const containerPortal = new ComponentPortal(component, null, injector);
const containerRef = overlayRef.attach(containerPortal);
return containerRef;
}
trapFocus() {
this.focusTrap = this.focusTrapFactory.create(this.componentNativeElement);
this.focusTrap.focusInitialElementWhenReady();
}
}
DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogService, deps: [{ token: i0.Injector }, { token: i1.Overlay }, { token: i2.FocusTrapFactory }], target: i0.ɵɵFactoryTarget.Injectable });
DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogService, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Overlay }, { type: i2.FocusTrapFactory }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlhbG9nLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9oeC11aS9zcmMvbGliL2RpYWxvZy9kaWFsb2cuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQXVCLFVBQVUsRUFBRSxRQUFRLEVBQVcsTUFBTSxlQUFlLENBQUM7QUFDbkYsT0FBTyxFQUFDLE9BQU8sRUFBRSxhQUFhLEVBQWEsTUFBTSxzQkFBc0IsQ0FBQztBQUN4RSxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSxzQkFBc0IsQ0FBQztBQUN0RCxPQUFPLEVBQUMsZUFBZSxFQUFFLGNBQWMsRUFBQyxNQUFNLHFCQUFxQixDQUFDO0FBQ3BFLE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLG1CQUFtQixDQUFDOzs7O0FBVW5ELE1BQU0sY0FBYyxHQUFpQjtJQUNuQyxXQUFXLEVBQUUsSUFBSTtJQUNqQixhQUFhLEVBQUUsZUFBZTtJQUM5QixVQUFVLEVBQUUsZ0JBQWdCO0lBQzVCLGlCQUFpQixFQUFFLElBQUk7Q0FDeEIsQ0FBQztBQUdGLE1BQU0sT0FBTyxhQUFhO0lBS3hCLFlBQ1UsUUFBa0IsRUFDbEIsT0FBZ0IsRUFDaEIsZ0JBQWtDO1FBRmxDLGFBQVEsR0FBUixRQUFRLENBQVU7UUFDbEIsWUFBTyxHQUFQLE9BQU8sQ0FBUztRQUNoQixxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQWtCO0lBQ3pDLENBQUM7SUFHSjs7T0FFRztJQUNILElBQUksQ0FBQyxTQUFjLEVBQUUsU0FBdUIsRUFBRSxFQUFFLFVBQW1CO1FBRWpFLGlDQUFpQztRQUNqQyxNQUFNLFlBQVksR0FBRyxFQUFFLEdBQUcsY0FBYyxFQUFFLEdBQUcsTUFBTSxFQUFFLENBQUM7UUFFdEQsZ0RBQWdEO1FBQ2hELE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsWUFBWSxDQUFDLENBQUM7UUFFcEQsTUFBTSxTQUFT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dGFibGUsIEluamVjdG9yLCBPcHRpb25hbH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7T3ZlcmxheSwgT3ZlcmxheUNvbmZpZywgT3ZlcmxheVJlZn0gZnJvbSAnQGFuZ3VsYXIvY2RrL292ZXJsYXknO1xyXG5pbXBvcnQge0RpYWxvZ092ZXJsYXlSZWZ9IGZyb20gJy4vZGlhbG9nLW92ZXJsYXkucmVmJztcclxuaW1wb3J0IHtDb21wb25lbnRQb3J0YWwsIFBvcnRhbEluamVjdG9yfSBmcm9tICdAYW5ndWxhci9jZGsvcG9ydGFsJztcclxuaW1wb3J0IHtGb2N1c1RyYXBGYWN0b3J5fSBmcm9tICdAYW5ndWxhci9jZGsvYTExeSc7XHJcbmltcG9ydCB7RE9DVU1FTlR9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcblxyXG5pbnRlcmZhY2UgRGlhbG9nQ29uZmlnIHtcclxuICBwYW5lbENsYXNzPzogc3RyaW5nO1xyXG4gIGhhc0JhY2tkcm9wPzogYm9vbGVhbjtcclxuICBiYWNrZHJvcENsYXNzPzogc3RyaW5nO1xyXG4gIGJhY2tkcm9wQ2xpY2thYmxlPzogYm9vbGVhbjtcclxufVxyXG5cclxuY29uc3QgREVGQVVMVF9DT05GSUc6IERpYWxvZ0NvbmZpZyA9IHtcclxuICBoYXNCYWNrZHJvcDogdHJ1ZSxcclxuICBiYWNrZHJvcENsYXNzOiAnZGFyay1iYWNrZHJvcCcsXHJcbiAgcGFuZWxDbGFzczogJ2h4LW1vZGFsLXBhbmVsJyxcclxuICBiYWNrZHJvcENsaWNrYWJsZTogdHJ1ZVxyXG59O1xyXG5cclxuQEluamVjdGFibGUoKVxyXG5leHBvcnQgY2xhc3MgRGlhbG9nU2VydmljZSB7XHJcblxyXG4gIHByaXZhdGUgZm9jdXNUcmFwO1xyXG4gIHByaXZhdGUgY29tcG9uZW50TmF0aXZlRWxlbWVudDtcclxuXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcml2YXRlIGluamVjdG9yOiBJbmplY3RvcixcclxuICAgIHByaXZhdGUgb3ZlcmxheTogT3ZlcmxheSxcclxuICAgIHByaXZhdGUgZm9jdXNUcmFwRmFjdG9yeTogRm9jdXNUcmFwRmFjdG9yeVxyXG4gICkge31cclxuXHJcblxyXG4gIC8qKlxyXG4gICAqIENyZWF0ZSBjb21wb25lbnQgZHluYW1pY2FsbHlcclxuICAgKi9cclxuICBvcGVuKGNvbXBvbmVudDogYW55LCBjb25maWc6IERpYWxvZ0NvbmZpZyA9IHt9LCBwYXJhbWV0ZXJzPzogT2JqZWN0KTogRGlhbG9nT3ZlcmxheVJlZiB7XHJcblxyXG4gICAgLy8gT3ZlcnJpZGUgZGVmYXVsdCBjb25maWd1cmF0aW9uXHJcbiAgICBjb25zdCBkaWFsb2dDb25maWcgPSB7IC4uLkRFRkFVTFRfQ09ORklHLCAuLi5jb25maWcgfTtcclxuXHJcbiAgICAvLyBSZXR1cm5zIGFuIE92ZXJsYXlSZWYgKHdoaWNoIGlzIGEgUG9ydGFsSG9zdClcclxuICAgIGNvbnN0IG92ZXJsYXlSZWYgPSB0aGlzLmNyZWF0ZU92ZXJsYXkoZGlhbG9nQ29uZmlnKTtcclxuXHJcbiAgICBjb25zdCBkaWFsb2dSZWYgPSBuZXcgRGlhbG9nT3ZlcmxheVJlZihvdmVybGF5UmVmKTtcclxuXHJcbiAgICAvLyBDcmVhdGUgQ29tcG9uZW50UG9ydGFsIHRoYXQgY2FuIGJlIGF0dGFjaGVkIHRvIGEgUG9ydGFsSG9zdFxyXG4gICAgLy8gYW5kIHRoZW4gYXR0YWNoIENvbXBvbmVudFBvcnRhbCB0byBQb3J0YWxIb3N0XHJcbiAgICBjb25zdCBjb250YWluZXJSZWYgPSB0aGlzLmF0dGFjaERpYWxvZ0NvbnRhaW5lcihjb21wb25lbnQsIG92ZXJsYXlSZWYsIGRpYWxvZ0NvbmZpZywgZGlhbG9nUmVmKTtcclxuXHJcbiAgICAvLyBwYXNzIHRoZSBASW5wdXQgcGFyYW1ldGVycyB0byB0aGUgaW5zdGFuY2VcclxuICAgIE9iamVjdC5hc3NpZ24oY29udGFpbmVyUmVmLmluc3RhbmNlLCBwYXJhbWV0ZXJzKTtcclxuXHJcbiAgICAvLyBTdWJzY3JpYmUgdG8gYSBzdHJlYW0gdGhhdCBlbWl0cyB3aGVuIHRoZSBiYWNrZHJvcCB3YXMgY2xpY2tlZFxyXG4gICAgaWYgKGRpYWxvZ0NvbmZpZy5iYWNrZHJvcENsaWNrYWJsZSkge1xyXG4gICAgICBvdmVybGF5UmVmLmJhY2tkcm9wQ2xpY2soKS5zdWJzY3JpYmUoXyA9PiBkaWFsb2dSZWYuY2xvc2UoKSk7XHJcbiAgICB9XHJcblxyXG4gICAgLy8gY3JlYXRlIGFuZCBtYW5hZ2UgZm9jdXMgdHJhcFxyXG4gICAgdGhpcy5jb21wb25lbnROYXRpdmVFbGVtZW50ID0gY29udGFpbmVyUmVmLmxvY2F0aW9uLm5hdGl2ZUVsZW1lbnQ7XHJcbiAgICB0aGlzLnRyYXBGb2N1cygpO1xyXG5cclxuICAgIHJldHVybiBkaWFsb2dSZWY7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIGNyZWF0ZU92ZXJsYXkoY29uZmlnOiBEaWFsb2dDb25maWcpIHtcclxuICAgIC8vIFJldHVybnMgYW4gT3ZlcmxheUNvbmZpZ1xyXG4gICAgY29uc3Qgb3ZlcmxheUNvbmZpZyA9IHRoaXMuZ2V0T3ZlcmxheUNvbmZpZyhjb25maWcpO1xyXG5cclxuICAgIC8vIFJldHVybnMgYW4gT3ZlcmxheVJlZlxyXG4gICAgcmV0dXJuIHRoaXMub3ZlcmxheS5jcmVhdGUob3ZlcmxheUNvbmZpZyk7XHJcbiAgfVxyXG5cclxuXHJcbiAgcHJpdmF0ZSBnZXRPdmVybGF5Q29uZmlnKGNvbmZpZzogRGlhbG9nQ29uZmlnKTogT3ZlcmxheUNvbmZpZyB7XHJcbiAgICBjb25zdCBwb3NpdGlvblN0cmF0ZWd5ID0gdGhpcy5vdmVybGF5LnBvc2l0aW9uKClcclxuICAgICAgLmdsb2JhbCgpXHJcbiAgICAgIC5jZW50ZXJIb3Jpem9udGFsbHkoKVxyXG4gICAgICAuY2VudGVyVmVydGljYWxseSgpO1xyXG5cclxuICAgIGNvbnN0IG92ZXJsYXlDb25maWcgPSBuZXcgT3ZlcmxheUNvbmZpZyh7XHJcbiAgICAgIGhhc0JhY2tkcm9wOiBjb25maWcuaGFzQmFja2Ryb3AsXHJcbiAgICAgIGJhY2tkcm9wQ2xhc3M6IGNvbmZpZy5iYWNrZHJvcENsYXNzLFxyXG4gICAgICBwYW5lbENsYXNzOiBjb25maWcucGFuZWxDbGFzcyxcclxuICAgICAgc2Nyb2xsU3RyYXRlZ3k6IHRoaXMub3ZlcmxheS5zY3JvbGxTdHJhdGVnaWVzLmJsb2NrKCksXHJcbiAgICAgIHBvc2l0aW9uU3RyYXRlZ3lcclxuICAgIH0pO1xyXG5cclxuICAgIHJldHVybiBvdmVybGF5Q29uZmlnO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBjcmVhdGVJbmplY3RvcihkaWFsb2dSZWY6IERpYWxvZ092ZXJsYXlSZWYpOiBQb3J0YWxJbmplY3RvciB7XHJcbiAgICAvLyBJbnN0YW50aWF0ZSBuZXcgV2Vha01hcCBmb3Igb3VyIGN1c3RvbSBpbmplY3Rpb24gdG9rZW5zXHJcbiAgICBjb25zdCBpbmplY3Rpb25Ub2tlbnMgPSBuZXcgV2Vha01hcCgpO1xyXG5cclxuICAgIC8vIFNldCBjdXN0b20gaW5qZWN0aW9uIHRva2Vuc1xyXG4gICAgaW5qZWN0aW9uVG9rZW5zLnNldChEaWFsb2dPdmVybGF5UmVmLCBkaWFsb2dSZWYpO1xyXG5cclxuICAgIC8vIEluc3RhbnRpYXRlIG5ldyBQb3J0YWxJbmplY3RvclxyXG4gICAgcmV0dXJuIG5ldyBQb3J0YWxJbmplY3Rvcih0aGlzLmluamVjdG9yLCBpbmplY3Rpb25Ub2tlbnMpO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBhdHRhY2hEaWFsb2dDb250YWluZXIoY29tcG9uZW50OiBhbnksIG92ZXJsYXlSZWY6IE92ZXJsYXlSZWYsIGNvbmZpZzogRGlhbG9nQ29uZmlnLCBkaWFsb2dSZWY6IERpYWxvZ092ZXJsYXlSZWYpIHtcclxuICAgIGNvbnN0IGluamVjdG9yID0gdGhpcy5jcmVhdGVJbmplY3RvcihkaWFsb2dSZWYpO1xyXG5cclxuICAgIGNvbnN0IGNvbnRhaW5lclBvcnRhbCA9IG5ldyBDb21wb25lbnRQb3J0YWwoY29tcG9uZW50LCBudWxsLCBpbmplY3Rvcik7XHJcbiAgICBjb25zdCBjb250YWluZXJSZWY6IENvbXBvbmVudFJlZjxhbnk+ID0gb3ZlcmxheVJlZi5hdHRhY2goY29udGFpbmVyUG9ydGFsKTtcclxuXHJcbiAgICByZXR1cm4gY29udGFpbmVyUmVmO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSB0cmFwRm9jdXMoKSB7XHJcbiAgICB0aGlzLmZvY3VzVHJhcCA9IHRoaXMuZm9jdXNUcmFwRmFjdG9yeS5jcmVhdGUodGhpcy5jb21wb25lbnROYXRpdmVFbGVtZW50KTtcclxuICAgIHRoaXMuZm9jdXNUcmFwLmZvY3VzSW5pdGlhbEVsZW1lbnRXaGVuUmVhZHkoKTtcclxuICB9XHJcblxyXG59XHJcbiJdfQ==