ng2-modal-module
Version:
bootstrap modal component adjusted for angular2+ framework based on rx-pubsub service. NO jQuery!
439 lines (428 loc) • 16.8 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('pubsub-distinct'), require('@angular/core'), require('component-injector'), require('xdom-util'), require('@angular/common'), require('trust-html')) :
typeof define === 'function' && define.amd ? define('ng2-modal-module', ['exports', 'pubsub-distinct', '@angular/core', 'component-injector', 'xdom-util', '@angular/common', 'trust-html'], factory) :
(global = global || self, factory(global['ng2-modal-module'] = {}, global.pubsubDistinct, global.ng.core, global.componentInjector, global.xdomUtil, global.ng.common, global.trustHtml));
}(this, function (exports, pubsubDistinct, core, componentInjector, xdomUtil, common, trustHtml) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Ng2ModalWindow = /** @class */ (function () {
function Ng2ModalWindow() {
}
/**
* @param {?} modalId
* @param {?=} options
* @return {?}
*/
Ng2ModalWindow.showModal = /**
* @param {?} modalId
* @param {?=} options
* @return {?}
*/
function (modalId, options) {
if (options === void 0) { options = {}; }
options.show = true;
options.hide = null;
pubsubDistinct.PubSubDistinct.publishDistinct(modalId, options);
};
/**
* @param {?} modalId
* @return {?}
*/
Ng2ModalWindow.hideModal = /**
* @param {?} modalId
* @return {?}
*/
function (modalId) {
/** @type {?} */
var options = { hide: true };
pubsubDistinct.PubSubDistinct.publishDistinct(modalId, options);
};
/**
* @param {?} eventsList
* @return {?}
*/
Ng2ModalWindow.resetEventsSubscribers = /**
* @param {?} eventsList
* @return {?}
*/
function (eventsList) {
eventsList.forEach((/**
* @param {?} eventName
* @return {?}
*/
function (eventName) {
if (eventName && pubsubDistinct.PubSubDistinct.hasSubscribers(eventName)) {
pubsubDistinct.PubSubDistinct.dispose(eventName);
}
}));
};
/**
* @param {?} eventName
* @param {?} callback
* @return {?}
*/
Ng2ModalWindow.subscribe = /**
* @param {?} eventName
* @param {?} callback
* @return {?}
*/
function (eventName, callback) {
pubsubDistinct.PubSubDistinct.subscribe(eventName, callback);
};
return Ng2ModalWindow;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Ng2ModalWindowComponent = /** @class */ (function () {
function Ng2ModalWindowComponent(componentInjector) {
this.componentInjector = componentInjector;
this.animationClass = 'fade';
this.showModalClass = 'in';
this.bodyOpenModalClass = 'modal-open';
this.defaultProperties = {
title: '',
show: false,
showEvent: false,
hide: false,
componentSelector: false,
componentInputs: false,
htmlContent: '',
overlayClick: true,
customClass: '',
buttons: {
visible: true,
cancel: {
visible: true,
label: 'Cancel',
event: false
},
success: {
visible: true,
label: 'Save',
event: false
}
}
};
this.properties = {};
}
Object.defineProperty(Ng2ModalWindowComponent.prototype, "id", {
set: /**
* @param {?} eventName
* @return {?}
*/
function (eventName) {
if (eventName) {
this.eventName = eventName;
// remove previous subscription and create new one
this.unsubscribe();
this.subscribeToEvent();
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
Ng2ModalWindowComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
/**
* @return {?}
*/
Ng2ModalWindowComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.unsubscribe();
this.resetInjectedComponent();
};
/**
* @return {?}
*/
Ng2ModalWindowComponent.prototype.cancelAction = /**
* @return {?}
*/
function () {
if (this.properties.buttons.cancel.event) {
pubsubDistinct.PubSubDistinct.publishDistinct(this.properties.buttons.cancel.event, true);
}
this.hide();
};
/**
* @return {?}
*/
Ng2ModalWindowComponent.prototype.successAction = /**
* @return {?}
*/
function () {
if (this.properties.buttons.success.event) {
pubsubDistinct.PubSubDistinct.publishDistinct(this.properties.buttons.success.event, true);
}
else {
this.hide();
}
};
/**
* @return {?}
*/
Ng2ModalWindowComponent.prototype.overlayClick = /**
* @return {?}
*/
function () {
if (this.properties.overlayClick) {
this.cancelAction();
}
};
/**
* @protected
* @return {?}
*/
Ng2ModalWindowComponent.prototype.show = /**
* @protected
* @return {?}
*/
function () {
// add class to modal DOM element to make it visible
/** @type {?} */
var modalDom = this.modalWindow.nativeElement;
if (!xdomUtil.XDomUtil.hasClass(modalDom, this.showModalClass)) {
xdomUtil.XDomUtil.addClass(modalDom, this.showModalClass);
}
// add class to modal body to disable the scrolling
/** @type {?} */
var body = document.querySelector('body');
if (!xdomUtil.XDomUtil.hasClass(body, this.bodyOpenModalClass)) {
xdomUtil.XDomUtil.addClass(body, this.bodyOpenModalClass);
}
if (this.properties.showEvent) {
pubsubDistinct.PubSubDistinct.publishDistinct(this.properties.showEvent, true);
}
};
/**
* @protected
* @return {?}
*/
Ng2ModalWindowComponent.prototype.hide = /**
* @protected
* @return {?}
*/
function () {
/** @type {?} */
var element = this.modalWindow.nativeElement;
xdomUtil.XDomUtil.removeClass(element, this.showModalClass);
/** @type {?} */
var body = document.querySelector('body');
xdomUtil.XDomUtil.removeClass(body, this.bodyOpenModalClass);
};
/**
* @protected
* @return {?}
*/
Ng2ModalWindowComponent.prototype.subscribeToEvent = /**
* @protected
* @return {?}
*/
function () {
var _this = this;
this.eventSubscriber = pubsubDistinct.PubSubDistinct.subscribe(this.eventName, (/**
* @param {?} data
* @return {?}
*/
function (data) {
_this.initModal(data);
}));
};
/**
* @protected
* @param {?} properties
* @return {?}
*/
Ng2ModalWindowComponent.prototype.initModal = /**
* @protected
* @param {?} properties
* @return {?}
*/
function (properties) {
if (properties.show) {
// remove previously injected component
this.resetInjectedComponent();
// reset the properties
this.setProperties(properties);
// inject component
if (this.properties.componentSelector) {
this.injectedComponentRef = this.injectComponent(this.properties.componentSelector);
// set the components properties
this.setComponentProperties();
}
// display the modal
this.show();
// reset modal event subscriber
this.resetModalEventSubscriber();
}
else if (properties.hide) {
// remove previously injected component
this.resetInjectedComponent();
// reset the properties
this.setProperties(properties);
// hide the modal
this.hide();
// reset modal event subscriber
this.resetModalEventSubscriber();
}
};
/**
* @protected
* @return {?}
*/
Ng2ModalWindowComponent.prototype.unsubscribe = /**
* @protected
* @return {?}
*/
function () {
if (this.eventSubscriber) {
pubsubDistinct.PubSubDistinct.unsubscribe(this.eventSubscriber);
}
};
/**
* @protected
* @param {?} componentSelector
* @return {?}
*/
Ng2ModalWindowComponent.prototype.injectComponent = /**
* @protected
* @param {?} componentSelector
* @return {?}
*/
function (componentSelector) {
/** @type {?} */
var result;
if (componentSelector) {
result = this.componentInjector.inject(this.injectContainer, componentSelector);
}
return result;
};
/**
* @protected
* @return {?}
*/
Ng2ModalWindowComponent.prototype.setComponentProperties = /**
* @protected
* @return {?}
*/
function () {
if (this.properties.componentInputs && this.injectedComponentRef) {
this.componentInjector.setProperties(this.injectedComponentRef, this.properties.componentInputs);
}
};
/**
* @private
* @return {?}
*/
Ng2ModalWindowComponent.prototype.resetInjectedComponent = /**
* @private
* @return {?}
*/
function () {
if (this.injectedComponentRef) {
this.componentInjector.remove(this.injectedComponentRef);
this.injectedComponentRef = null;
}
};
/**
* @private
* @param {?} properties
* @return {?}
*/
Ng2ModalWindowComponent.prototype.setProperties = /**
* @private
* @param {?} properties
* @return {?}
*/
function (properties) {
this.properties = __assign({}, this.defaultProperties, properties);
};
/**
* @private
* @return {?}
*/
Ng2ModalWindowComponent.prototype.resetModalEventSubscriber = /**
* @private
* @return {?}
*/
function () {
// reset modal show/hide display
pubsubDistinct.PubSubDistinct.publishDistinct(this.eventName, {});
};
Ng2ModalWindowComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ng2-modal-window',
template: "<div class=\"ko-modal-window modal\" [ngClass]=\"animationClass\" tabindex=\"-1\" role=\"dialog\" id=\"myModal\" #modalWindow>\n <div class=\"ko-modal-overlay\" (click)=\"overlayClick()\"></div>\n <div class=\"modal-dialog {{properties.customClass}}\" role=\"document\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"cancelAction()\">\n <span aria-hidden=\"true\">×</span>\n </button>\n <h4 class=\"modal-title\">{{properties.title}}</h4>\n </div>\n <div class=\"modal-body\">\n <div #injectContainer [innerHTML]=\"properties.htmlContent | trustHtml\"></div>\n </div>\n <div class=\"modal-footer\" *ngIf=\"properties?.buttons?.visible\">\n <button type=\"button\" class=\"btn btn-default\" (click)=\"cancelAction()\"\n *ngIf=\"properties.buttons.cancel?.visible\">{{properties.buttons.cancel.label}}\n </button>\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"successAction()\"\n *ngIf=\"properties.buttons.success?.visible\">{{properties.buttons.success.label}}\n </button>\n </div>\n </div><!-- /.modal-content -->\n </div><!-- /.modal-dialog -->\n</div><!-- /.modal -->\n",
styles: [".ko-modal-window{background-color:rgba(0,0,0,.5)}.ko-modal-window.in{display:block}.ko-modal-open{overflow:hidden}.ko-modal-overlay{position:fixed;width:100%;height:100%;left:0;top:0}"]
}] }
];
/** @nocollapse */
Ng2ModalWindowComponent.ctorParameters = function () { return [
{ type: componentInjector.ComponentInjector }
]; };
Ng2ModalWindowComponent.propDecorators = {
modalWindow: [{ type: core.ViewChild, args: ['modalWindow', { static: true },] }],
injectContainer: [{ type: core.ViewChild, args: ['injectContainer', { read: core.ViewContainerRef, static: true },] }],
animationClass: [{ type: core.Input }],
id: [{ type: core.Input }]
};
return Ng2ModalWindowComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ModalModule = /** @class */ (function () {
function ModalModule() {
}
ModalModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [Ng2ModalWindowComponent],
imports: [
common.CommonModule,
trustHtml.TrustHtmlModule
],
exports: [Ng2ModalWindowComponent]
},] }
];
return ModalModule;
}());
exports.ModalModule = ModalModule;
exports.Ng2ModalWindow = Ng2ModalWindow;
exports.Ng2ModalWindowComponent = Ng2ModalWindowComponent;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng2-modal-module.umd.js.map