@developer-partners/ngx-modal-dialog
Version:
1. Install the libary
237 lines (228 loc) • 22.2 kB
JavaScript
import * as i0 from '@angular/core';
import { EnvironmentInjector, ViewContainerRef, Component, ViewEncapsulation, ViewChild, createComponent, Injectable, NgModule } from '@angular/core';
import { Subject } from 'rxjs';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
class ModalReference {
constructor(config) {
this.config = config;
this._event = new Subject();
this._cancelEvent = new Subject();
}
result() {
return this._event.asObservable();
}
cancelResult() {
return this._cancelEvent.asObservable();
}
closeSuccess(model) {
this._event.next(model);
this._event.complete();
}
cancel() {
// Just comlete the event transmission.
this._event.complete();
this._cancelEvent.next();
this._cancelEvent.complete();
}
}
var ModalSize;
(function (ModalSize) {
ModalSize[ModalSize["default"] = 0] = "default";
ModalSize[ModalSize["large"] = 1] = "large";
ModalSize[ModalSize["extraLarge"] = 2] = "extraLarge";
ModalSize[ModalSize["medium"] = 3] = "medium";
})(ModalSize || (ModalSize = {}));
class ModalComponent {
constructor(changeDetectorRef, modalRefernce) {
this.modalSize = ModalSize;
this._changeDetectorRef = changeDetectorRef;
this.modalReference = modalRefernce;
}
createModalContent(componentType) {
var _a, _b;
this.contentContainer.clear();
return this.contentContainer.createComponent(componentType, {
injector: (_a = this.elementInjector) !== null && _a !== void 0 ? _a : this.contentContainer.injector,
environmentInjector: (_b = this.envInjector) !== null && _b !== void 0 ? _b : this.contentContainer.injector.get(EnvironmentInjector)
});
}
ngAfterViewInit() {
this.componentRef = this.createModalContent(this.contentComponentType);
// To update the view.
this._changeDetectorRef.detectChanges();
// To take focus from a button clicked behind the modal;
this.bodyElement.nativeElement.focus();
}
ngOnDestroy() {
if (this.componentRef) {
this.componentRef.destroy();
}
}
isBackdropElement(target) {
let targetElement = target;
if (targetElement.classList.contains('dp-backdrop')) {
return true;
}
if (targetElement.classList.contains('dp-close-modal')) {
return true;
}
return false;
}
mouseDownEvent(event, backdropCliecked) {
// The backdropCliecked will be false if the event is just bubbled up from a child element.
if (backdropCliecked && !this.isBackdropElement(event.target)) {
return;
}
// Mark the mouse button pressed to check on the mouseUp event.
this._mouseDownPressed = !this._mouseDownPressed;
}
mouseUpEvent(event) {
// Check if the mouse was clicked on the backdrop.
if (this._mouseDownPressed) {
// Check if the mouse button was released on the backdrop
if (this.isBackdropElement(event.target)) {
// If mouse button was released on the backdrop, close the modal.
event.stopPropagation();
this.modalReference.cancel();
}
}
}
keyUpEvent(event) {
// Close on the Esc key press.
if (event.which === 27) {
this.modalReference.cancel();
}
}
maximize() {
this.modalReference.config.mode = 'fullScreen';
}
restoreWindow() {
this.modalReference.config.mode = 'default';
}
close() {
this.modalReference.cancel();
}
}
ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ModalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ModalReference }], target: i0.ɵɵFactoryTarget.Component });
ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: ModalComponent, selector: "dp-modal", viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "bodyElement", first: true, predicate: ["bodyElement"], descendants: true }], ngImport: i0, template: "<div class=\"dp-backdrop dp-modal-backdrop\"\r\n (mousedown)=\"mouseDownEvent($event, true)\"\r\n (mouseup)=\"mouseUpEvent($event)\"\r\n (keyup)=\"keyUpEvent($event)\">\r\n <div class=\"dp-modal\"\r\n [class.dp-large]=\"modalReference.config?.size === modalSize.large\"\r\n [class.dp-extra-large]=\"modalReference.config?.size === modalSize.extraLarge\"\r\n [class.dp-medium]=\"modalReference.config?.size === modalSize.medium\"\r\n [class.dp-full-screen-modal]=\"modalReference.config?.mode === 'fullScreen'\"\r\n [class.dp-disable-full-screen]=\"modalReference.config?.mode === 'disableFullScreen'\"\r\n [class.dp-modal-position-top]=\"modalReference.config?.position === 'top'\"\r\n [class.dp-modal-position-bottom]=\"modalReference.config?.position === 'bottom'\"\r\n [class.dp-modal-position-left]=\"modalReference.config?.position === 'left'\"\r\n [class.dp-modal-position-right]=\"modalReference.config?.position === 'right'\">\r\n\r\n <div class=\"dp-modal-header\"\r\n [class.dp-warning]=\"modalReference.config?.type === 'warning'\"\r\n [class.dp-error]=\"modalReference.config?.type === 'error'\"\r\n [class.dp-success]=\"modalReference.config?.type === 'success'\">\r\n <h2 class=\"dp-title\">\r\n {{modalReference.config?.title}}\r\n </h2>\r\n\r\n <ng-container *ngIf=\"modalReference.config?.mode != 'disableFullScreen'\">\r\n <button *ngIf=\"modalReference.config?.mode != 'fullScreen'\"\r\n (click)=\"maximize()\"\r\n title=\"Maximize\"\r\n aria-label=\"Maximize\">\r\n <span class=\"material-icons\">\r\n fullscreen\r\n </span>\r\n </button>\r\n\r\n <button *ngIf=\"modalReference.config?.mode == 'fullScreen'\"\r\n (click)=\"restoreWindow()\"\r\n title=\"Restore Window Size\"\r\n aria-label=\"Restore Window Size\">\r\n <span class=\"material-icons\">\r\n fullscreen_exit\r\n </span>\r\n </button>\r\n </ng-container>\r\n <button class=\"dp-close-modal\"\r\n (click)=\"close()\"\r\n title=\"Close\"\r\n aria-label=\"Close\">\r\n <span class=\"material-icons\">\r\n close\r\n </span>\r\n </button>\r\n </div>\r\n\r\n <div #bodyElement class=\"dp-modal-body\" tabindex=\"-1\">\r\n <ng-template #contentContainer></ng-template>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";.dp-modal-backdrop{display:flex;align-items:center;justify-content:center}.dp-backdrop{position:fixed;width:100%;height:100%;inset:0;z-index:49;background-color:#313a4259}.dp-modal{display:flex;flex-direction:column;min-width:280px;min-height:100px;max-width:800px;transition:all .4s cubic-bezier(.65,.07,.35,.92);opacity:0;filter:alpha(opacity=0);transform:scale(.3);background-color:#fff;border-radius:5px;overflow:auto;max-height:95%;position:absolute}.dp-modal.dp-modal-position-top{top:-100%}.dp-modal.dp-modal-position-bottom{bottom:-100%}.dp-modal.dp-modal-position-left{left:-100%}.dp-modal.dp-modal-position-right{right:-100%}.dp-modal.dp-modal-position-top,.dp-modal.dp-modal-position-bottom{width:100%;min-width:100%;height:50%}.dp-modal.dp-modal-position-left,.dp-modal.dp-modal-position-right{height:100%;min-height:100%;width:0}.dp-modal.dp-modal-position-top,.dp-modal.dp-modal-position-bottom,.dp-modal.dp-modal-position-left,.dp-modal.dp-modal-position-right{transition:all .4s ease-in-out;transform:scale(1);border-radius:0}.dp-modal.dp-modal-position-top .dp-modal-header,.dp-modal.dp-modal-position-bottom .dp-modal-header,.dp-modal.dp-modal-position-left .dp-modal-header,.dp-modal.dp-modal-position-right .dp-modal-header{border-radius:0}.dp-visible .dp-modal{transform:scale(1);opacity:1;filter:alpha(opacity=100)}.dp-visible .dp-modal.dp-modal-position-top{top:0}.dp-visible .dp-modal.dp-modal-position-bottom{bottom:0}.dp-visible .dp-modal.dp-modal-position-left{left:0}.dp-visible .dp-modal.dp-modal-position-right{right:0}.dp-modal-header{display:flex;background-color:#244b8c;border-radius:5px 5px 0 0;color:#e2dfdf;padding:1px 1px 1px 14px}.dp-modal-header button{border:0;background-color:transparent;color:#e2dfdf;padding:8px}.dp-modal-header .dp-title{font-size:20px;margin:.7rem 0;width:calc(100% - 35px)}.dp-modal-body{padding:20px;overflow:auto;outline:none;height:100%}.dp-modal.dp-large{min-width:40%}.dp-modal.dp-extra-large{min-width:70%}@media screen and (max-width: 1400px){.dp-modal.dp-large{min-width:40%}}@media screen and (max-width: 1200px){.dp-modal,.dp-modal.dp-large{max-width:80%;min-width:60%}.dp-modal.dp-extra-large{max-width:80%;min-width:80%}}.dp-modal.dp-full-screen-modal,.dp-modal.dp-large.dp-full-screen-modal,.dp-modal.dp-extra-large.dp-full-screen-modal{width:100%;min-width:100%;height:100%;min-height:100%;max-height:100%;max-width:none}.dp-modal.dp-full-screen-modal,.dp-modal.dp-full-screen-modal .dp-modal-header,.dp-modal.dp-large.dp-full-screen-modal,.dp-modal.dp-large.dp-full-screen-modal .dp-modal-header,.dp-modal.dp-extra-large.dp-full-screen-modal,.dp-modal.dp-extra-large.dp-full-screen-modal .dp-modal-header{border-radius:0}@media screen and (max-width: 960px){.dp-modal:not(.dp-disable-full-screen),.dp-modal.dp-large:not(.dp-disable-full-screen),.dp-modal.dp-extra-large:not(.dp-disable-full-screen){width:100%;min-width:100%;height:100%;min-height:95%;max-height:100%;max-width:none}.dp-modal,.dp-modal-header{border-radius:0}}.dp-warning{background-color:#df9308}.dp-success{background-color:#0e940e}.dp-error{background-color:#c41111}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ModalComponent, decorators: [{
type: Component,
args: [{ selector: 'dp-modal', encapsulation: ViewEncapsulation.None, template: "<div class=\"dp-backdrop dp-modal-backdrop\"\r\n (mousedown)=\"mouseDownEvent($event, true)\"\r\n (mouseup)=\"mouseUpEvent($event)\"\r\n (keyup)=\"keyUpEvent($event)\">\r\n <div class=\"dp-modal\"\r\n [class.dp-large]=\"modalReference.config?.size === modalSize.large\"\r\n [class.dp-extra-large]=\"modalReference.config?.size === modalSize.extraLarge\"\r\n [class.dp-medium]=\"modalReference.config?.size === modalSize.medium\"\r\n [class.dp-full-screen-modal]=\"modalReference.config?.mode === 'fullScreen'\"\r\n [class.dp-disable-full-screen]=\"modalReference.config?.mode === 'disableFullScreen'\"\r\n [class.dp-modal-position-top]=\"modalReference.config?.position === 'top'\"\r\n [class.dp-modal-position-bottom]=\"modalReference.config?.position === 'bottom'\"\r\n [class.dp-modal-position-left]=\"modalReference.config?.position === 'left'\"\r\n [class.dp-modal-position-right]=\"modalReference.config?.position === 'right'\">\r\n\r\n <div class=\"dp-modal-header\"\r\n [class.dp-warning]=\"modalReference.config?.type === 'warning'\"\r\n [class.dp-error]=\"modalReference.config?.type === 'error'\"\r\n [class.dp-success]=\"modalReference.config?.type === 'success'\">\r\n <h2 class=\"dp-title\">\r\n {{modalReference.config?.title}}\r\n </h2>\r\n\r\n <ng-container *ngIf=\"modalReference.config?.mode != 'disableFullScreen'\">\r\n <button *ngIf=\"modalReference.config?.mode != 'fullScreen'\"\r\n (click)=\"maximize()\"\r\n title=\"Maximize\"\r\n aria-label=\"Maximize\">\r\n <span class=\"material-icons\">\r\n fullscreen\r\n </span>\r\n </button>\r\n\r\n <button *ngIf=\"modalReference.config?.mode == 'fullScreen'\"\r\n (click)=\"restoreWindow()\"\r\n title=\"Restore Window Size\"\r\n aria-label=\"Restore Window Size\">\r\n <span class=\"material-icons\">\r\n fullscreen_exit\r\n </span>\r\n </button>\r\n </ng-container>\r\n <button class=\"dp-close-modal\"\r\n (click)=\"close()\"\r\n title=\"Close\"\r\n aria-label=\"Close\">\r\n <span class=\"material-icons\">\r\n close\r\n </span>\r\n </button>\r\n </div>\r\n\r\n <div #bodyElement class=\"dp-modal-body\" tabindex=\"-1\">\r\n <ng-template #contentContainer></ng-template>\r\n </div>\r\n </div>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";.dp-modal-backdrop{display:flex;align-items:center;justify-content:center}.dp-backdrop{position:fixed;width:100%;height:100%;inset:0;z-index:49;background-color:#313a4259}.dp-modal{display:flex;flex-direction:column;min-width:280px;min-height:100px;max-width:800px;transition:all .4s cubic-bezier(.65,.07,.35,.92);opacity:0;filter:alpha(opacity=0);transform:scale(.3);background-color:#fff;border-radius:5px;overflow:auto;max-height:95%;position:absolute}.dp-modal.dp-modal-position-top{top:-100%}.dp-modal.dp-modal-position-bottom{bottom:-100%}.dp-modal.dp-modal-position-left{left:-100%}.dp-modal.dp-modal-position-right{right:-100%}.dp-modal.dp-modal-position-top,.dp-modal.dp-modal-position-bottom{width:100%;min-width:100%;height:50%}.dp-modal.dp-modal-position-left,.dp-modal.dp-modal-position-right{height:100%;min-height:100%;width:0}.dp-modal.dp-modal-position-top,.dp-modal.dp-modal-position-bottom,.dp-modal.dp-modal-position-left,.dp-modal.dp-modal-position-right{transition:all .4s ease-in-out;transform:scale(1);border-radius:0}.dp-modal.dp-modal-position-top .dp-modal-header,.dp-modal.dp-modal-position-bottom .dp-modal-header,.dp-modal.dp-modal-position-left .dp-modal-header,.dp-modal.dp-modal-position-right .dp-modal-header{border-radius:0}.dp-visible .dp-modal{transform:scale(1);opacity:1;filter:alpha(opacity=100)}.dp-visible .dp-modal.dp-modal-position-top{top:0}.dp-visible .dp-modal.dp-modal-position-bottom{bottom:0}.dp-visible .dp-modal.dp-modal-position-left{left:0}.dp-visible .dp-modal.dp-modal-position-right{right:0}.dp-modal-header{display:flex;background-color:#244b8c;border-radius:5px 5px 0 0;color:#e2dfdf;padding:1px 1px 1px 14px}.dp-modal-header button{border:0;background-color:transparent;color:#e2dfdf;padding:8px}.dp-modal-header .dp-title{font-size:20px;margin:.7rem 0;width:calc(100% - 35px)}.dp-modal-body{padding:20px;overflow:auto;outline:none;height:100%}.dp-modal.dp-large{min-width:40%}.dp-modal.dp-extra-large{min-width:70%}@media screen and (max-width: 1400px){.dp-modal.dp-large{min-width:40%}}@media screen and (max-width: 1200px){.dp-modal,.dp-modal.dp-large{max-width:80%;min-width:60%}.dp-modal.dp-extra-large{max-width:80%;min-width:80%}}.dp-modal.dp-full-screen-modal,.dp-modal.dp-large.dp-full-screen-modal,.dp-modal.dp-extra-large.dp-full-screen-modal{width:100%;min-width:100%;height:100%;min-height:100%;max-height:100%;max-width:none}.dp-modal.dp-full-screen-modal,.dp-modal.dp-full-screen-modal .dp-modal-header,.dp-modal.dp-large.dp-full-screen-modal,.dp-modal.dp-large.dp-full-screen-modal .dp-modal-header,.dp-modal.dp-extra-large.dp-full-screen-modal,.dp-modal.dp-extra-large.dp-full-screen-modal .dp-modal-header{border-radius:0}@media screen and (max-width: 960px){.dp-modal:not(.dp-disable-full-screen),.dp-modal.dp-large:not(.dp-disable-full-screen),.dp-modal.dp-extra-large:not(.dp-disable-full-screen){width:100%;min-width:100%;height:100%;min-height:95%;max-height:100%;max-width:none}.dp-modal,.dp-modal-header{border-radius:0}}.dp-warning{background-color:#df9308}.dp-success{background-color:#0e940e}.dp-error{background-color:#c41111}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: ModalReference }]; }, propDecorators: { contentContainer: [{
type: ViewChild,
args: ['contentContainer', { read: ViewContainerRef }]
}], bodyElement: [{
type: ViewChild,
args: ['bodyElement']
}] } });
class ModalService {
constructor(applicaionRef, injector, envInjector) {
this._applicaionRef = applicaionRef;
this._injector = injector;
this._envInjector = envInjector;
}
createModalComponent(dependecies, config) {
var _a, _b, _c, _d;
const envInjector = (_b = (_a = config.viewContainerRef) === null || _a === void 0 ? void 0 : _a.injector.get(EnvironmentInjector, null)) !== null && _b !== void 0 ? _b : this._envInjector;
const injector = new ModalInjector((_d = (_c = config.viewContainerRef) === null || _c === void 0 ? void 0 : _c.injector) !== null && _d !== void 0 ? _d : this._injector, dependecies);
const component = createComponent(ModalComponent, {
environmentInjector: envInjector,
elementInjector: injector
});
component.instance.envInjector = envInjector;
component.instance.elementInjector = injector;
return component;
}
createModalRefernce(map, config) {
let modalReference = new InternalModalRef(config);
// Create with internal implementation, but inject the public version.
map.set(ModalReference, modalReference);
modalReference.componentRef = this.createModalComponent(map, config);
modalReference
.result()
.subscribe({
complete: () => this.removeModal(modalReference)
});
return modalReference;
}
show(componentType, config) {
let map = new WeakMap();
let modalReference = this.createModalRefernce(map, config);
modalReference.componentRef.instance.contentComponentType = componentType;
this._applicaionRef.attachView(modalReference.componentRef.hostView);
document.body.appendChild(modalReference.getHtmlElement());
// To trigger the animation effect. The modal is added to document at this point, but it's invisible.
// We animate the showing part.
window.setTimeout(() => {
modalReference.getHtmlElement().firstElementChild.classList.add('dp-visible');
});
modalReference.componentRef.changeDetectorRef.detectChanges();
return modalReference;
}
removeModal(modalReference) {
modalReference.getHtmlElement().firstElementChild.classList.remove('dp-visible');
// Wait until the closing animation is done, then remove the component.
window.setTimeout(() => {
this._applicaionRef.detachView(modalReference.componentRef.hostView);
modalReference.componentRef.destroy();
}, 400);
}
}
ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ModalService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ModalService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ModalService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.EnvironmentInjector }]; } });
class ModalInjector {
constructor(injector, extraDependencies) {
this._injector = injector;
this._extraDependecnies = extraDependencies;
}
get(token, notFoundValue, flags) {
let resolved = this._extraDependecnies.get(token);
if (resolved) {
return resolved;
}
return this._injector.get(token, notFoundValue, flags);
}
}
class InternalModalRef extends ModalReference {
constructor(config) {
super(config);
}
getHtmlElement() {
let viewRef = this.componentRef.hostView;
return viewRef.rootNodes[0];
}
}
class ModalModule {
}
ModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
ModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.2", ngImport: i0, type: ModalModule, declarations: [ModalComponent], imports: [CommonModule], exports: [ModalComponent] });
ModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ModalModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ModalModule, decorators: [{
type: NgModule,
args: [{
declarations: [
ModalComponent
],
imports: [
CommonModule
],
exports: [
ModalComponent
]
}]
}] });
/*
* Public API Surface of ngx-modal-dialog
*/
/**
* Generated bundle index. Do not edit.
*/
export { ModalComponent, ModalModule, ModalReference, ModalService, ModalSize };
//# sourceMappingURL=developer-partners-ngx-modal-dialog.mjs.map