@browninglogic/ng-modal
Version:
A simple, lightweight interface for creating layered modal dialogs in Angular 6+
101 lines • 12.3 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { Component, Input } from '@angular/core';
import { ModalManagerService } from '../services/modal-manager.service';
import { filter } from 'rxjs/operators';
let ModalWindowComponent = class ModalWindowComponent {
constructor(modalManagerService) {
this.modalManagerService = modalManagerService;
/** Custom CSS class(es) to apply to the modal*/
this.modalClass = '';
/** Custom CSS class(es) to apply to the overlay*/
this.overlayClass = '';
/** Specifies whether the modal will close if the user clicks on the surrounding overlay */
this.closeOnOverlayClick = true;
/** Specifies whether to show the built-in close button */
this.showCloseButton = false;
/** Visibility flag for internal use*/
this._visible = false;
}
/** Reports the visibility status of the modal window*/
get visible() {
return this._visible;
}
ngOnInit() {
/*
Subscribe to changes of this modal's index on the global modal stack
so that this modal can accurately maintain its z-index
with relation to other layered modal windows
*/
this.subIndexChanged = this.modalManagerService.modalIndexChanged.pipe(
// We only care about changes to the modal's own index.
filter(indexChange => indexChange[0] === this)).subscribe(indexChange => this.onIndexChanged(indexChange[1]));
}
ngOnDestroy() {
if (this.subIndexChanged) {
this.subIndexChanged.unsubscribe();
}
}
/**
* Updates the local copy of the index when necessary so that the
* corresponding z-index will be updated in the template.
* @param newIndex new index provided by the modal management service
*/
onIndexChanged(newIndex) {
this.modalIndex = newIndex;
}
/** Provides the z-index to be used in the template for layering the modal */
get zIndex() {
return this.modalIndex != null ? this.modalManagerService.startingZIndex + this.modalIndex : null;
}
/** Shows the modal and registers it with the modal manager */
show() {
this.modalIndex = this.modalManagerService.push(this);
this._visible = true;
}
/** Hides the modal and de-registers it with the modal manager */
hide() {
this.modalManagerService.removeModal(this);
this._visible = false;
this.modalIndex = null;
}
/**
* Handles the click event when a user clicks on the overlay.
* If the user clicked on the overlay and closeOnOverlayClick is enabled,
* then close the modal.
* @param event The mouse event provided by the browser
*/
onOverlayClicked(event) {
if (event.target.classList.contains('nm-modal-overlay') && this.closeOnOverlayClick) {
this.hide();
}
}
};
ModalWindowComponent.ctorParameters = () => [
{ type: ModalManagerService }
];
__decorate([
Input(),
__metadata("design:type", Object)
], ModalWindowComponent.prototype, "modalClass", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], ModalWindowComponent.prototype, "overlayClass", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], ModalWindowComponent.prototype, "closeOnOverlayClick", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], ModalWindowComponent.prototype, "showCloseButton", void 0);
ModalWindowComponent = __decorate([
Component({
selector: 'nm-modal-window',
template: "<div [class]=\"'nm-modal-overlay ' + overlayClass\" (click)=\"onOverlayClicked($event)\" [style.display]=\"visible ? 'block' : 'none'\" [style.z-index]=\"zIndex\">\n <div [class]=\"'nm-modal-window ' + modalClass\">\n <div *ngIf=\"showCloseButton\" (click)=\"hide()\" class=\"nm-modal-close-btn\">×</div>\n\n <div>\n <ng-content select=\"[header]\"></ng-content>\n </div>\n <div>\n <ng-content select=\"[body]\"></ng-content>\n </div>\n <div>\n <ng-content select=\"[footer]\"></ng-content>\n </div>\n </div>\n</div>",
styles: [".nm-modal-overlay{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.2)}.nm-modal-window{position:fixed;border:2px solid grey;border-radius:15px;text-align:center;background:#fff;padding:10px 23px;display:inline-block;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.nm-modal-close-btn{position:absolute;right:3px;top:5px;color:#888;font-weight:700;font-size:20px;cursor:pointer;width:25px;line-height:23px}.nm-modal-close-btn:hover{color:#000}"]
}),
__metadata("design:paramtypes", [ModalManagerService])
], ModalWindowComponent);
export { ModalWindowComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwtd2luZG93LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0Bicm93bmluZ2xvZ2ljL25nLW1vZGFsLyIsInNvdXJjZXMiOlsibGliL2NvbXBvbmVudHMvbW9kYWwtd2luZG93LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQXFCLE1BQU0sZUFBZSxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBRXhFLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQVN4QyxJQUFhLG9CQUFvQixHQUFqQyxNQUFhLG9CQUFvQjtJQXFCN0IsWUFDVyxtQkFBd0M7UUFBeEMsd0JBQW1CLEdBQW5CLG1CQUFtQixDQUFxQjtRQXJCbkQsZ0RBQWdEO1FBQ3ZDLGVBQVUsR0FBRyxFQUFFLENBQUM7UUFDekIsa0RBQWtEO1FBQ3pDLGlCQUFZLEdBQUcsRUFBRSxDQUFDO1FBQzNCLDJGQUEyRjtRQUNsRix3QkFBbUIsR0FBRyxJQUFJLENBQUM7UUFDcEMsMERBQTBEO1FBQ2pELG9CQUFlLEdBQUcsS0FBSyxDQUFDO1FBS2pDLHNDQUFzQztRQUM5QixhQUFRLEdBQUcsS0FBSyxDQUFDO0lBU3RCLENBQUM7SUFQSix1REFBdUQ7SUFDdkQsSUFBVyxPQUFPO1FBQ2QsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDO0lBQ3pCLENBQUM7SUFNRCxRQUFRO1FBQ0o7Ozs7VUFJRTtRQUNGLElBQUksQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixDQUFDLGlCQUFpQixDQUFDLElBQUk7UUFDbEUsdURBQXVEO1FBQ3ZELE1BQU0sQ0FBQyxXQUFXLENBQUMsRUFBRSxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsS0FBSyxJQUFJLENBQUMsQ0FDakQsQ0FBQyxTQUFTLENBQUMsV0FBVyxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDcEUsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLElBQUksQ0FBQyxlQUFlLEVBQUU7WUFDdEIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxXQUFXLEVBQUUsQ0FBQztTQUN0QztJQUNMLENBQUM7SUFFRDs7OztPQUlHO0lBQ0gsY0FBYyxDQUFDLFFBQWdCO1FBQzNCLElBQUksQ0FBQyxVQUFVLEdBQUcsUUFBUSxDQUFDO0lBQy9CLENBQUM7SUFFRCw2RUFBNkU7SUFDN0UsSUFBVyxNQUFNO1FBQ2IsT0FBTyxJQUFJLENBQUMsVUFBVSxJQUFJLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLG1CQUFtQixDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7SUFDdEcsQ0FBQztJQUVELDhEQUE4RDtJQUN2RCxJQUFJO1FBQ1AsSUFBSSxDQUFDLFVBQVUsR0FBSSxJQUFJLENBQUMsbUJBQW1CLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3ZELElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO0lBQ3pCLENBQUM7SUFFRCxpRUFBaUU7SUFDMUQsSUFBSTtRQUNQLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDM0MsSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7UUFDdEIsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUM7SUFDM0IsQ0FBQztJQUVEOzs7OztPQUtHO0lBQ0ksZ0JBQWdCLENBQUMsS0FBaUI7UUFDckMsSUFBa0IsS0FBSyxDQUFDLE1BQU8sQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLGtCQUFrQixDQUFDLElBQUksSUFBSSxDQUFDLG1CQUFtQixFQUFFO1lBQ2hHLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUNmO0lBQ0wsQ0FBQztDQUNKLENBQUE7O1lBM0RtQyxtQkFBbUI7O0FBcEIxQztJQUFSLEtBQUssRUFBRTs7d0RBQWlCO0FBRWhCO0lBQVIsS0FBSyxFQUFFOzswREFBbUI7QUFFbEI7SUFBUixLQUFLLEVBQUU7O2lFQUE0QjtBQUUzQjtJQUFSLEtBQUssRUFBRTs7NkRBQXlCO0FBUnhCLG9CQUFvQjtJQU5oQyxTQUFTLENBQUM7UUFDUCxRQUFRLEVBQUUsaUJBQWlCO1FBQzNCLDhtQkFBNEM7O0tBRS9DLENBQUM7cUNBd0JrQyxtQkFBbUI7R0F0QjFDLG9CQUFvQixDQWlGaEM7U0FqRlksb0JBQW9CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0LCBPbkRlc3Ryb3kgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1vZGFsTWFuYWdlclNlcnZpY2UgfSBmcm9tICcuLi9zZXJ2aWNlcy9tb2RhbC1tYW5hZ2VyLnNlcnZpY2UnO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBmaWx0ZXIgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5cblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdubS1tb2RhbC13aW5kb3cnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9tb2RhbC13aW5kb3cuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWyAnLi9tb2RhbC13aW5kb3cuY29tcG9uZW50LmNzcycgXVxufSlcblxuZXhwb3J0IGNsYXNzIE1vZGFsV2luZG93Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICAgIC8qKiBDdXN0b20gQ1NTIGNsYXNzKGVzKSB0byBhcHBseSB0byB0aGUgbW9kYWwqL1xuICAgIEBJbnB1dCgpIG1vZGFsQ2xhc3MgPSAnJztcbiAgICAvKiogQ3VzdG9tIENTUyBjbGFzcyhlcykgdG8gYXBwbHkgdG8gdGhlIG92ZXJsYXkqL1xuICAgIEBJbnB1dCgpIG92ZXJsYXlDbGFzcyA9ICcnO1xuICAgIC8qKiBTcGVjaWZpZXMgd2hldGhlciB0aGUgbW9kYWwgd2lsbCBjbG9zZSBpZiB0aGUgdXNlciBjbGlja3Mgb24gdGhlIHN1cnJvdW5kaW5nIG92ZXJsYXkgKi9cbiAgICBASW5wdXQoKSBjbG9zZU9uT3ZlcmxheUNsaWNrID0gdHJ1ZTtcbiAgICAvKiogU3BlY2lmaWVzIHdoZXRoZXIgdG8gc2hvdyB0aGUgYnVpbHQtaW4gY2xvc2UgYnV0dG9uICovXG4gICAgQElucHV0KCkgc2hvd0Nsb3NlQnV0dG9uID0gZmFsc2U7XG4gICAgLyoqIEluZGV4IG9mIHRoZSBtb2RhbCBvbiB0aGUgZ2xvYmFsIG1vZGFsIHN0YWNrKi9cbiAgICBwcml2YXRlIG1vZGFsSW5kZXg6IG51bWJlcjtcbiAgICAvKiogU3Vic2NyaXB0aW9uIHRvIGluZGV4IGNoYW5nZSBub3RpZmljYXRpb25zIGZyb20gdGhlIG1vZGFsIG1hbmFnZXIgc2VydmljZSovXG4gICAgcHJpdmF0ZSBzdWJJbmRleENoYW5nZWQ6IFN1YnNjcmlwdGlvbjtcbiAgICAvKiogVmlzaWJpbGl0eSBmbGFnIGZvciBpbnRlcm5hbCB1c2UqL1xuICAgIHByaXZhdGUgX3Zpc2libGUgPSBmYWxzZTtcblxuICAgIC8qKiBSZXBvcnRzIHRoZSB2aXNpYmlsaXR5IHN0YXR1cyBvZiB0aGUgbW9kYWwgd2luZG93Ki9cbiAgICBwdWJsaWMgZ2V0IHZpc2libGUoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiB0aGlzLl92aXNpYmxlO1xuICAgIH1cblxuICAgIGNvbnN0cnVjdG9yIChcbiAgICAgICAgcHVibGljIG1vZGFsTWFuYWdlclNlcnZpY2U6IE1vZGFsTWFuYWdlclNlcnZpY2VcbiAgICApIHt9XG5cbiAgICBuZ09uSW5pdCgpIHtcbiAgICAgICAgLypcbiAgICAgICAgU3Vic2NyaWJlIHRvIGNoYW5nZXMgb2YgdGhpcyBtb2RhbCdzIGluZGV4IG9uIHRoZSBnbG9iYWwgbW9kYWwgc3RhY2tcbiAgICAgICAgc28gdGhhdCB0aGlzIG1vZGFsIGNhbiBhY2N1cmF0ZWx5IG1haW50YWluIGl0cyB6LWluZGV4XG4gICAgICAgIHdpdGggcmVsYXRpb24gdG8gb3RoZXIgbGF5ZXJlZCBtb2RhbCB3aW5kb3dzXG4gICAgICAgICovXG4gICAgICAgIHRoaXMuc3ViSW5kZXhDaGFuZ2VkID0gdGhpcy5tb2RhbE1hbmFnZXJTZXJ2aWNlLm1vZGFsSW5kZXhDaGFuZ2VkLnBpcGUoXG4gICAgICAgICAgICAvLyBXZSBvbmx5IGNhcmUgYWJvdXQgY2hhbmdlcyB0byB0aGUgbW9kYWwncyBvd24gaW5kZXguXG4gICAgICAgICAgICBmaWx0ZXIoaW5kZXhDaGFuZ2UgPT4gaW5kZXhDaGFuZ2VbMF0gPT09IHRoaXMpXG4gICAgICAgICkuc3Vic2NyaWJlKGluZGV4Q2hhbmdlID0+IHRoaXMub25JbmRleENoYW5nZWQoaW5kZXhDaGFuZ2VbMV0pKTtcbiAgICB9XG5cbiAgICBuZ09uRGVzdHJveSgpIHtcbiAgICAgICAgaWYgKHRoaXMuc3ViSW5kZXhDaGFuZ2VkKSB7XG4gICAgICAgICAgICB0aGlzLnN1YkluZGV4Q2hhbmdlZC51bnN1YnNjcmliZSgpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgLyoqXG4gICAgICogVXBkYXRlcyB0aGUgbG9jYWwgY29weSBvZiB0aGUgaW5kZXggd2hlbiBuZWNlc3Nhcnkgc28gdGhhdCB0aGVcbiAgICAgKiBjb3JyZXNwb25kaW5nIHotaW5kZXggd2lsbCBiZSB1cGRhdGVkIGluIHRoZSB0ZW1wbGF0ZS5cbiAgICAgKiBAcGFyYW0gbmV3SW5kZXggbmV3IGluZGV4IHByb3ZpZGVkIGJ5IHRoZSBtb2RhbCBtYW5hZ2VtZW50IHNlcnZpY2VcbiAgICAgKi9cbiAgICBvbkluZGV4Q2hhbmdlZChuZXdJbmRleDogbnVtYmVyKSB7XG4gICAgICAgIHRoaXMubW9kYWxJbmRleCA9IG5ld0luZGV4O1xuICAgIH1cblxuICAgIC8qKiBQcm92aWRlcyB0aGUgei1pbmRleCB0byBiZSB1c2VkIGluIHRoZSB0ZW1wbGF0ZSBmb3IgbGF5ZXJpbmcgdGhlIG1vZGFsICovXG4gICAgcHVibGljIGdldCB6SW5kZXgoKTogbnVtYmVyIHtcbiAgICAgICAgcmV0dXJuIHRoaXMubW9kYWxJbmRleCAhPSBudWxsID8gdGhpcy5tb2RhbE1hbmFnZXJTZXJ2aWNlLnN0YXJ0aW5nWkluZGV4ICsgdGhpcy5tb2RhbEluZGV4IDogbnVsbDtcbiAgICB9XG5cbiAgICAvKiogU2hvd3MgdGhlIG1vZGFsIGFuZCByZWdpc3RlcnMgaXQgd2l0aCB0aGUgbW9kYWwgbWFuYWdlciAqL1xuICAgIHB1YmxpYyBzaG93KCk6IHZvaWQge1xuICAgICAgICB0aGlzLm1vZGFsSW5kZXggID0gdGhpcy5tb2RhbE1hbmFnZXJTZXJ2aWNlLnB1c2godGhpcyk7XG4gICAgICAgIHRoaXMuX3Zpc2libGUgPSB0cnVlO1xuICAgIH1cblxuICAgIC8qKiBIaWRlcyB0aGUgbW9kYWwgYW5kIGRlLXJlZ2lzdGVycyBpdCB3aXRoIHRoZSBtb2RhbCBtYW5hZ2VyICovXG4gICAgcHVibGljIGhpZGUoKTogdm9pZCB7XG4gICAgICAgIHRoaXMubW9kYWxNYW5hZ2VyU2VydmljZS5yZW1vdmVNb2RhbCh0aGlzKTtcbiAgICAgICAgdGhpcy5fdmlzaWJsZSA9IGZhbHNlO1xuICAgICAgICB0aGlzLm1vZGFsSW5kZXggPSBudWxsO1xuICAgIH1cblxuICAgIC8qKlxuICAgICAqIEhhbmRsZXMgdGhlIGNsaWNrIGV2ZW50IHdoZW4gYSB1c2VyIGNsaWNrcyBvbiB0aGUgb3ZlcmxheS5cbiAgICAgKiBJZiB0aGUgdXNlciBjbGlja2VkIG9uIHRoZSBvdmVybGF5IGFuZCBjbG9zZU9uT3ZlcmxheUNsaWNrIGlzIGVuYWJsZWQsXG4gICAgICogdGhlbiBjbG9zZSB0aGUgbW9kYWwuXG4gICAgICogQHBhcmFtIGV2ZW50IFRoZSBtb3VzZSBldmVudCBwcm92aWRlZCBieSB0aGUgYnJvd3NlclxuICAgICAqL1xuICAgIHB1YmxpYyBvbk92ZXJsYXlDbGlja2VkKGV2ZW50OiBNb3VzZUV2ZW50KTogdm9pZCB7XG4gICAgICAgIGlmICgoPEhUTUxFbGVtZW50PmV2ZW50LnRhcmdldCkuY2xhc3NMaXN0LmNvbnRhaW5zKCdubS1tb2RhbC1vdmVybGF5JykgJiYgdGhpcy5jbG9zZU9uT3ZlcmxheUNsaWNrKSB7XG4gICAgICAgICAgICB0aGlzLmhpZGUoKTtcbiAgICAgICAgfVxuICAgIH1cbn1cbiJdfQ==