@browninglogic/ng-modal
Version:
A simple, lightweight interface for creating layered modal dialogs in Angular 6+
111 lines • 13.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';
var ModalWindowComponent = /** @class */ (function () {
function ModalWindowComponent(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;
}
Object.defineProperty(ModalWindowComponent.prototype, "visible", {
/** Reports the visibility status of the modal window*/
get: function () {
return this._visible;
},
enumerable: true,
configurable: true
});
ModalWindowComponent.prototype.ngOnInit = function () {
var _this = this;
/*
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(function (indexChange) { return indexChange[0] === _this; })).subscribe(function (indexChange) { return _this.onIndexChanged(indexChange[1]); });
};
ModalWindowComponent.prototype.ngOnDestroy = function () {
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
*/
ModalWindowComponent.prototype.onIndexChanged = function (newIndex) {
this.modalIndex = newIndex;
};
Object.defineProperty(ModalWindowComponent.prototype, "zIndex", {
/** Provides the z-index to be used in the template for layering the modal */
get: function () {
return this.modalIndex != null ? this.modalManagerService.startingZIndex + this.modalIndex : null;
},
enumerable: true,
configurable: true
});
/** Shows the modal and registers it with the modal manager */
ModalWindowComponent.prototype.show = function () {
this.modalIndex = this.modalManagerService.push(this);
this._visible = true;
};
/** Hides the modal and de-registers it with the modal manager */
ModalWindowComponent.prototype.hide = function () {
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
*/
ModalWindowComponent.prototype.onOverlayClicked = function (event) {
if (event.target.classList.contains('nm-modal-overlay') && this.closeOnOverlayClick) {
this.hide();
}
};
ModalWindowComponent.ctorParameters = function () { return [
{ 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);
return ModalWindowComponent;
}());
export { ModalWindowComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwtd2luZG93LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0Bicm93bmluZ2xvZ2ljL25nLW1vZGFsLyIsInNvdXJjZXMiOlsibGliL2NvbXBvbmVudHMvbW9kYWwtd2luZG93LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQXFCLE1BQU0sZUFBZSxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBRXhFLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQVN4QztJQXFCSSw4QkFDVyxtQkFBd0M7UUFBeEMsd0JBQW1CLEdBQW5CLG1CQUFtQixDQUFxQjtRQXJCbkQsZ0RBQWdEO1FBQ3ZDLGVBQVUsR0FBRyxFQUFFLENBQUM7UUFDekIsa0RBQWtEO1FBQ3pDLGlCQUFZLEdBQUcsRUFBRSxDQUFDO1FBQzNCLDJGQUEyRjtRQUNsRix3QkFBbUIsR0FBRyxJQUFJLENBQUM7UUFDcEMsMERBQTBEO1FBQ2pELG9CQUFlLEdBQUcsS0FBSyxDQUFDO1FBS2pDLHNDQUFzQztRQUM5QixhQUFRLEdBQUcsS0FBSyxDQUFDO0lBU3RCLENBQUM7SUFOSixzQkFBVyx5Q0FBTztRQURsQix1REFBdUQ7YUFDdkQ7WUFDSSxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUM7UUFDekIsQ0FBQzs7O09BQUE7SUFNRCx1Q0FBUSxHQUFSO1FBQUEsaUJBVUM7UUFURzs7OztVQUlFO1FBQ0YsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUMsbUJBQW1CLENBQUMsaUJBQWlCLENBQUMsSUFBSTtRQUNsRSx1REFBdUQ7UUFDdkQsTUFBTSxDQUFDLFVBQUEsV0FBVyxJQUFJLE9BQUEsV0FBVyxDQUFDLENBQUMsQ0FBQyxLQUFLLEtBQUksRUFBdkIsQ0FBdUIsQ0FBQyxDQUNqRCxDQUFDLFNBQVMsQ0FBQyxVQUFBLFdBQVcsSUFBSSxPQUFBLEtBQUksQ0FBQyxjQUFjLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQW5DLENBQW1DLENBQUMsQ0FBQztJQUNwRSxDQUFDO0lBRUQsMENBQVcsR0FBWDtRQUNJLElBQUksSUFBSSxDQUFDLGVBQWUsRUFBRTtZQUN0QixJQUFJLENBQUMsZUFBZSxDQUFDLFdBQVcsRUFBRSxDQUFDO1NBQ3RDO0lBQ0wsQ0FBQztJQUVEOzs7O09BSUc7SUFDSCw2Q0FBYyxHQUFkLFVBQWUsUUFBZ0I7UUFDM0IsSUFBSSxDQUFDLFVBQVUsR0FBRyxRQUFRLENBQUM7SUFDL0IsQ0FBQztJQUdELHNCQUFXLHdDQUFNO1FBRGpCLDZFQUE2RTthQUM3RTtZQUNJLE9BQU8sSUFBSSxDQUFDLFVBQVUsSUFBSSxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxjQUFjLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO1FBQ3RHLENBQUM7OztPQUFBO0lBRUQsOERBQThEO0lBQ3ZELG1DQUFJLEdBQVg7UUFDSSxJQUFJLENBQUMsVUFBVSxHQUFJLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDdkQsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUM7SUFDekIsQ0FBQztJQUVELGlFQUFpRTtJQUMxRCxtQ0FBSSxHQUFYO1FBQ0ksSUFBSSxDQUFDLG1CQUFtQixDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUMzQyxJQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztRQUN0QixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQztJQUMzQixDQUFDO0lBRUQ7Ozs7O09BS0c7SUFDSSwrQ0FBZ0IsR0FBdkIsVUFBd0IsS0FBaUI7UUFDckMsSUFBa0IsS0FBSyxDQUFDLE1BQU8sQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLGtCQUFrQixDQUFDLElBQUksSUFBSSxDQUFDLG1CQUFtQixFQUFFO1lBQ2hHLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUNmO0lBQ0wsQ0FBQzs7Z0JBMUQrQixtQkFBbUI7O0lBcEIxQztRQUFSLEtBQUssRUFBRTs7NERBQWlCO0lBRWhCO1FBQVIsS0FBSyxFQUFFOzs4REFBbUI7SUFFbEI7UUFBUixLQUFLLEVBQUU7O3FFQUE0QjtJQUUzQjtRQUFSLEtBQUssRUFBRTs7aUVBQXlCO0lBUnhCLG9CQUFvQjtRQU5oQyxTQUFTLENBQUM7WUFDUCxRQUFRLEVBQUUsaUJBQWlCO1lBQzNCLDhtQkFBNEM7O1NBRS9DLENBQUM7eUNBd0JrQyxtQkFBbUI7T0F0QjFDLG9CQUFvQixDQWlGaEM7SUFBRCwyQkFBQztDQUFBLEFBakZELElBaUZDO1NBakZZLG9CQUFvQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCwgT25EZXN0cm95IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNb2RhbE1hbmFnZXJTZXJ2aWNlIH0gZnJvbSAnLi4vc2VydmljZXMvbW9kYWwtbWFuYWdlci5zZXJ2aWNlJztcbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgZmlsdGVyIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuXG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnbm0tbW9kYWwtd2luZG93JyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vbW9kYWwtd2luZG93LmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsgJy4vbW9kYWwtd2luZG93LmNvbXBvbmVudC5jc3MnIF1cbn0pXG5cbmV4cG9ydCBjbGFzcyBNb2RhbFdpbmRvd0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgICAvKiogQ3VzdG9tIENTUyBjbGFzcyhlcykgdG8gYXBwbHkgdG8gdGhlIG1vZGFsKi9cbiAgICBASW5wdXQoKSBtb2RhbENsYXNzID0gJyc7XG4gICAgLyoqIEN1c3RvbSBDU1MgY2xhc3MoZXMpIHRvIGFwcGx5IHRvIHRoZSBvdmVybGF5Ki9cbiAgICBASW5wdXQoKSBvdmVybGF5Q2xhc3MgPSAnJztcbiAgICAvKiogU3BlY2lmaWVzIHdoZXRoZXIgdGhlIG1vZGFsIHdpbGwgY2xvc2UgaWYgdGhlIHVzZXIgY2xpY2tzIG9uIHRoZSBzdXJyb3VuZGluZyBvdmVybGF5ICovXG4gICAgQElucHV0KCkgY2xvc2VPbk92ZXJsYXlDbGljayA9IHRydWU7XG4gICAgLyoqIFNwZWNpZmllcyB3aGV0aGVyIHRvIHNob3cgdGhlIGJ1aWx0LWluIGNsb3NlIGJ1dHRvbiAqL1xuICAgIEBJbnB1dCgpIHNob3dDbG9zZUJ1dHRvbiA9IGZhbHNlO1xuICAgIC8qKiBJbmRleCBvZiB0aGUgbW9kYWwgb24gdGhlIGdsb2JhbCBtb2RhbCBzdGFjayovXG4gICAgcHJpdmF0ZSBtb2RhbEluZGV4OiBudW1iZXI7XG4gICAgLyoqIFN1YnNjcmlwdGlvbiB0byBpbmRleCBjaGFuZ2Ugbm90aWZpY2F0aW9ucyBmcm9tIHRoZSBtb2RhbCBtYW5hZ2VyIHNlcnZpY2UqL1xuICAgIHByaXZhdGUgc3ViSW5kZXhDaGFuZ2VkOiBTdWJzY3JpcHRpb247XG4gICAgLyoqIFZpc2liaWxpdHkgZmxhZyBmb3IgaW50ZXJuYWwgdXNlKi9cbiAgICBwcml2YXRlIF92aXNpYmxlID0gZmFsc2U7XG5cbiAgICAvKiogUmVwb3J0cyB0aGUgdmlzaWJpbGl0eSBzdGF0dXMgb2YgdGhlIG1vZGFsIHdpbmRvdyovXG4gICAgcHVibGljIGdldCB2aXNpYmxlKCk6IGJvb2xlYW4ge1xuICAgICAgICByZXR1cm4gdGhpcy5fdmlzaWJsZTtcbiAgICB9XG5cbiAgICBjb25zdHJ1Y3RvciAoXG4gICAgICAgIHB1YmxpYyBtb2RhbE1hbmFnZXJTZXJ2aWNlOiBNb2RhbE1hbmFnZXJTZXJ2aWNlXG4gICAgKSB7fVxuXG4gICAgbmdPbkluaXQoKSB7XG4gICAgICAgIC8qXG4gICAgICAgIFN1YnNjcmliZSB0byBjaGFuZ2VzIG9mIHRoaXMgbW9kYWwncyBpbmRleCBvbiB0aGUgZ2xvYmFsIG1vZGFsIHN0YWNrXG4gICAgICAgIHNvIHRoYXQgdGhpcyBtb2RhbCBjYW4gYWNjdXJhdGVseSBtYWludGFpbiBpdHMgei1pbmRleFxuICAgICAgICB3aXRoIHJlbGF0aW9uIHRvIG90aGVyIGxheWVyZWQgbW9kYWwgd2luZG93c1xuICAgICAgICAqL1xuICAgICAgICB0aGlzLnN1YkluZGV4Q2hhbmdlZCA9IHRoaXMubW9kYWxNYW5hZ2VyU2VydmljZS5tb2RhbEluZGV4Q2hhbmdlZC5waXBlKFxuICAgICAgICAgICAgLy8gV2Ugb25seSBjYXJlIGFib3V0IGNoYW5nZXMgdG8gdGhlIG1vZGFsJ3Mgb3duIGluZGV4LlxuICAgICAgICAgICAgZmlsdGVyKGluZGV4Q2hhbmdlID0+IGluZGV4Q2hhbmdlWzBdID09PSB0aGlzKVxuICAgICAgICApLnN1YnNjcmliZShpbmRleENoYW5nZSA9PiB0aGlzLm9uSW5kZXhDaGFuZ2VkKGluZGV4Q2hhbmdlWzFdKSk7XG4gICAgfVxuXG4gICAgbmdPbkRlc3Ryb3koKSB7XG4gICAgICAgIGlmICh0aGlzLnN1YkluZGV4Q2hhbmdlZCkge1xuICAgICAgICAgICAgdGhpcy5zdWJJbmRleENoYW5nZWQudW5zdWJzY3JpYmUoKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIC8qKlxuICAgICAqIFVwZGF0ZXMgdGhlIGxvY2FsIGNvcHkgb2YgdGhlIGluZGV4IHdoZW4gbmVjZXNzYXJ5IHNvIHRoYXQgdGhlXG4gICAgICogY29ycmVzcG9uZGluZyB6LWluZGV4IHdpbGwgYmUgdXBkYXRlZCBpbiB0aGUgdGVtcGxhdGUuXG4gICAgICogQHBhcmFtIG5ld0luZGV4IG5ldyBpbmRleCBwcm92aWRlZCBieSB0aGUgbW9kYWwgbWFuYWdlbWVudCBzZXJ2aWNlXG4gICAgICovXG4gICAgb25JbmRleENoYW5nZWQobmV3SW5kZXg6IG51bWJlcikge1xuICAgICAgICB0aGlzLm1vZGFsSW5kZXggPSBuZXdJbmRleDtcbiAgICB9XG5cbiAgICAvKiogUHJvdmlkZXMgdGhlIHotaW5kZXggdG8gYmUgdXNlZCBpbiB0aGUgdGVtcGxhdGUgZm9yIGxheWVyaW5nIHRoZSBtb2RhbCAqL1xuICAgIHB1YmxpYyBnZXQgekluZGV4KCk6IG51bWJlciB7XG4gICAgICAgIHJldHVybiB0aGlzLm1vZGFsSW5kZXggIT0gbnVsbCA/IHRoaXMubW9kYWxNYW5hZ2VyU2VydmljZS5zdGFydGluZ1pJbmRleCArIHRoaXMubW9kYWxJbmRleCA6IG51bGw7XG4gICAgfVxuXG4gICAgLyoqIFNob3dzIHRoZSBtb2RhbCBhbmQgcmVnaXN0ZXJzIGl0IHdpdGggdGhlIG1vZGFsIG1hbmFnZXIgKi9cbiAgICBwdWJsaWMgc2hvdygpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5tb2RhbEluZGV4ICA9IHRoaXMubW9kYWxNYW5hZ2VyU2VydmljZS5wdXNoKHRoaXMpO1xuICAgICAgICB0aGlzLl92aXNpYmxlID0gdHJ1ZTtcbiAgICB9XG5cbiAgICAvKiogSGlkZXMgdGhlIG1vZGFsIGFuZCBkZS1yZWdpc3RlcnMgaXQgd2l0aCB0aGUgbW9kYWwgbWFuYWdlciAqL1xuICAgIHB1YmxpYyBoaWRlKCk6IHZvaWQge1xuICAgICAgICB0aGlzLm1vZGFsTWFuYWdlclNlcnZpY2UucmVtb3ZlTW9kYWwodGhpcyk7XG4gICAgICAgIHRoaXMuX3Zpc2libGUgPSBmYWxzZTtcbiAgICAgICAgdGhpcy5tb2RhbEluZGV4ID0gbnVsbDtcbiAgICB9XG5cbiAgICAvKipcbiAgICAgKiBIYW5kbGVzIHRoZSBjbGljayBldmVudCB3aGVuIGEgdXNlciBjbGlja3Mgb24gdGhlIG92ZXJsYXkuXG4gICAgICogSWYgdGhlIHVzZXIgY2xpY2tlZCBvbiB0aGUgb3ZlcmxheSBhbmQgY2xvc2VPbk92ZXJsYXlDbGljayBpcyBlbmFibGVkLFxuICAgICAqIHRoZW4gY2xvc2UgdGhlIG1vZGFsLlxuICAgICAqIEBwYXJhbSBldmVudCBUaGUgbW91c2UgZXZlbnQgcHJvdmlkZWQgYnkgdGhlIGJyb3dzZXJcbiAgICAgKi9cbiAgICBwdWJsaWMgb25PdmVybGF5Q2xpY2tlZChldmVudDogTW91c2VFdmVudCk6IHZvaWQge1xuICAgICAgICBpZiAoKDxIVE1MRWxlbWVudD5ldmVudC50YXJnZXQpLmNsYXNzTGlzdC5jb250YWlucygnbm0tbW9kYWwtb3ZlcmxheScpICYmIHRoaXMuY2xvc2VPbk92ZXJsYXlDbGljaykge1xuICAgICAgICAgICAgdGhpcy5oaWRlKCk7XG4gICAgICAgIH1cbiAgICB9XG59XG4iXX0=