ngx-modialog
Version:
Modal / Dialog for Angular
562 lines (557 loc) • 22.4 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('tslib'), require('ngx-modialog'), require('@angular/core'), require('rxjs'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ngxModialog.plugins.bootstrap', ['exports', 'tslib', 'ngx-modialog', '@angular/core', 'rxjs', '@angular/common'], factory) :
(factory((global.ngxModialog = global.ngxModialog || {}, global.ngxModialog.plugins = global.ngxModialog.plugins || {}, global.ngxModialog.plugins.bootstrap = {}),global.tslib,global.ngxModialog,global.ng.core,global.rxjs,global.ng.common));
}(this, (function (exports,tslib,ngxModialog,core,rxjs,common) { 'use strict';
var /** @type {?} */ DEFAULT_VALUES = {
dialogClass: 'modal-dialog',
showClose: false
};
var /** @type {?} */ DEFAULT_SETTERS = [
'dialogClass',
'size',
'showClose'
];
var BSModalContext = (function (_super) {
tslib.__extends(BSModalContext, _super);
function BSModalContext() {
return _super !== null && _super.apply(this, arguments) || this;
}
/**
* @return {?}
*/
BSModalContext.prototype.normalize = function () {
if (!this.dialogClass) {
this.dialogClass = DEFAULT_VALUES.dialogClass;
}
_super.prototype.normalize.call(this);
};
return BSModalContext;
}(ngxModialog.ModalOpenContext));
// unsupported: template constraints.
/**
* @template T
*/
var BSModalContextBuilder = (function (_super) {
tslib.__extends(BSModalContextBuilder, _super);
/**
* @param {?=} defaultValues
* @param {?=} initialSetters
* @param {?=} baseType
*/
function BSModalContextBuilder(defaultValues, initialSetters, baseType) {
if (defaultValues === void 0) {
defaultValues = undefined;
}
if (initialSetters === void 0) {
initialSetters = undefined;
}
if (baseType === void 0) {
baseType = undefined;
}
return _super.call(this, ngxModialog.extend(DEFAULT_VALUES, defaultValues || {}), ngxModialog.arrayUnion(DEFAULT_SETTERS, initialSetters || []), baseType || /** @type {?} */ (BSModalContext // https://github.com/Microsoft/TypeScript/issues/7234
) // https://github.com/Microsoft/TypeScript/issues/7234
) || this;
}
return BSModalContextBuilder;
}(ngxModialog.ModalOpenContextBuilder));
var BSModalContainer = (function (_super) {
tslib.__extends(BSModalContainer, _super);
/**
* @param {?} dialog
* @param {?} el
* @param {?} renderer
*/
function BSModalContainer(dialog, el, renderer) {
var _this = _super.call(this, el, renderer) || this;
_this.dialog = dialog;
_this.activateAnimationListener();
return _this;
}
return BSModalContainer;
}(ngxModialog.BaseDynamicComponent));
BSModalContainer.decorators = [
{ type: core.Component, args: [{
selector: 'bs-modal-container',
host: {
'tabindex': '-1',
'role': 'dialog',
'class': 'modal fade',
'style': 'position: absolute; display: block'
},
encapsulation: core.ViewEncapsulation.None,
template: "<div [ngClass]=\"dialog.context.dialogClass\"\n [class.modal-lg]=\"dialog.context.size == 'lg'\"\n [class.modal-sm]=\"dialog.context.size == 'sm'\">\n <div class=\"modal-content\" style=\"display:block\" role=\"document\" overlayDialogBoundary>\n <ng-content></ng-content>\n </div>\n</div>"
},] },
];
/** @nocollapse */
BSModalContainer.ctorParameters = function () {
return [
{ type: ngxModialog.DialogRef, },
{ type: core.ElementRef, },
{ type: core.Renderer2, },
];
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var BSMessageModalTitle = (function () {
/**
* @param {?} dialog
*/
function BSMessageModalTitle(dialog) {
this.dialog = dialog;
this.context = dialog.context;
}
Object.defineProperty(BSMessageModalTitle.prototype, "titleHtml", {
/**
* @return {?}
*/
get: function () {
return this.context.titleHtml ? 1 : 0;
},
enumerable: true,
configurable: true
});
return BSMessageModalTitle;
}());
BSMessageModalTitle.decorators = [
{ type: core.Component, args: [{
selector: 'modal-title',
encapsulation: core.ViewEncapsulation.None,
template: "<div [ngClass]=\"context.headerClass\" [ngSwitch]=\"titleHtml\">\n <button *ngIf=\"context.showClose\" type=\"button\" class=\"close\"\n aria-label=\"Close\" (click)=\"dialog.dismiss()\">\n <span aria-hidden=\"true\">\u00D7</span>\n </button>\n <div *ngSwitchCase=\"1\" [innerHtml]=\"context.titleHtml\"></div>\n <h3 *ngSwitchDefault class=\"modal-title\">{{context.title}}</h3>\n </div>"
},] },
];
/** @nocollapse */
BSMessageModalTitle.ctorParameters = function () {
return [
{ type: ngxModialog.DialogRef, },
];
};
var BSMessageModalBody = (function () {
/**
* @param {?} dialog
*/
function BSMessageModalBody(dialog) {
this.dialog = dialog;
this.context = /** @type {?} */ (dialog.context);
}
return BSMessageModalBody;
}());
BSMessageModalBody.decorators = [
{ type: core.Component, args: [{
selector: 'modal-body',
encapsulation: core.ViewEncapsulation.None,
styles: [".form-group {\n margin-top: 10px;\n }"],
template: "<div [ngClass]=\"context.bodyClass\">\n <div [innerHtml]=\"context.message\"></div>\n <div *ngIf=\"context.showInput\" class=\"form-group\">\n <input autofocus #input\n name=\"bootstrap\"\n type=\"text\"\n class=\"form-control\"\n [value]=\"context.defaultValue\"\n (change)=\"context.defaultValue = input.value\"\n placeholder=\"{{context.placeholder}}\">\n </div>\n </div>\n"
},] },
];
/** @nocollapse */
BSMessageModalBody.ctorParameters = function () {
return [
{ type: ngxModialog.DialogRef, },
];
};
/**
* Represents the modal footer for storing buttons.
*/
var BSModalFooter = (function () {
/**
* @param {?} dialog
*/
function BSModalFooter(dialog) {
this.dialog = dialog;
}
/**
* @param {?} btn
* @param {?} $event
* @return {?}
*/
BSModalFooter.prototype.onClick = function (btn, $event) {
$event.stopPropagation();
btn.onClick(this, $event);
};
return BSModalFooter;
}());
BSModalFooter.decorators = [
{ type: core.Component, args: [{
selector: 'modal-footer',
encapsulation: core.ViewEncapsulation.None,
template: "<div [ngClass]=\"dialog.context.footerClass\">\n <button *ngFor=\"let btn of dialog.context.buttons;\"\n [ngClass]=\"btn.cssClass\"\n (click)=\"onClick(btn, $event)\">{{btn.caption}}</button>\n</div>"
},] },
];
/** @nocollapse */
BSModalFooter.ctorParameters = function () {
return [
{ type: ngxModialog.DialogRef, },
];
};
/**
* A Component representing a generic bootstrap modal content element.
*
* By configuring a MessageModalContext instance you can:
*
* Header:
* - Set header container class (default: modal-header)
* - Set title text (enclosed in H3 element)
* - Set title html (overrides text)
*
* Body:
* - Set body container class. (default: modal-body)
* - Set body container HTML.
*
* Footer:
* - Set footer class. (default: modal-footer)
* - Set button configuration (from 0 to n)
*/
var BSMessageModal = (function () {
/**
* @param {?} dialog
*/
function BSMessageModal(dialog) {
this.dialog = dialog;
}
return BSMessageModal;
}());
BSMessageModal.decorators = [
{ type: core.Component, args: [{
selector: 'modal-content',
encapsulation: core.ViewEncapsulation.None,
template: "<modal-title></modal-title><modal-body></modal-body><modal-footer></modal-footer>"
},] },
];
/** @nocollapse */
BSMessageModal.ctorParameters = function () {
return [
{ type: ngxModialog.DialogRef, },
];
};
var /** @type {?} */ DEFAULT_VALUES$1 = {
component: BSMessageModal,
headerClass: 'modal-header',
bodyClass: 'modal-body',
footerClass: 'modal-footer'
};
var /** @type {?} */ DEFAULT_SETTERS$1 = [
'headerClass',
'title',
'titleHtml',
'bodyClass',
'footerClass'
];
// unsupported: template constraints.
/**
* A Preset representing the configuration needed to open MessageModal.
* This is an abstract implementation with no concrete behaviour.
* Use derived implementation.
* @abstract
* @template T
*/
var MessageModalPresetBuilder = (function (_super) {
tslib.__extends(MessageModalPresetBuilder, _super);
/**
* @param {?=} defaultValues
* @param {?=} initialSetters
* @param {?=} baseType
*/
function MessageModalPresetBuilder(defaultValues, initialSetters, baseType) {
if (defaultValues === void 0) {
defaultValues = undefined;
}
if (initialSetters === void 0) {
initialSetters = undefined;
}
if (baseType === void 0) {
baseType = undefined;
}
var _this = _super.call(this, ngxModialog.extend(ngxModialog.extend({ buttons: [] }, DEFAULT_VALUES$1), defaultValues || {}), ngxModialog.arrayUnion(DEFAULT_SETTERS$1, initialSetters || []), baseType) || this;
ngxModialog.setAssignAlias(_this, 'body', 'message', true);
return _this;
}
/**
* @param {?} css
* @param {?} caption
* @param {?} onClick
* @return {?}
*/
MessageModalPresetBuilder.prototype.addButton = function (css, caption, onClick) {
var /** @type {?} */ btn = {
cssClass: css,
caption: caption,
onClick: onClick
};
var /** @type {?} */ key = ngxModialog.privateKey('buttons');
((this[key])).push(btn);
return this;
};
return MessageModalPresetBuilder;
}(BSModalContextBuilder));
/**
* A Preset for a classic 1 button modal window.
*/
var OneButtonPresetBuilder = (function (_super) {
tslib.__extends(OneButtonPresetBuilder, _super);
/**
* @param {?} modal
* @param {?=} defaultValues
*/
function OneButtonPresetBuilder(modal, defaultValues) {
if (defaultValues === void 0) {
defaultValues = undefined;
}
return _super.call(this, ngxModialog.extend({
modal: modal,
okBtn: 'OK',
okBtnClass: 'btn btn-primary'
}, defaultValues || {}), [
'okBtn',
'okBtnClass'
]) || this;
}
/**
* @param {?} config
* @return {?}
*/
OneButtonPresetBuilder.prototype.$$beforeOpen = function (config) {
_super.prototype.$$beforeOpen.call(this, config);
this.addButton(config.okBtnClass, config.okBtn, function (cmp, $event) { return cmp.dialog.close(true); });
};
return OneButtonPresetBuilder;
}(MessageModalPresetBuilder));
/**
* Common two button preset
* @abstract
*/
var AbstractTwoButtonPresetBuilder = (function (_super) {
tslib.__extends(AbstractTwoButtonPresetBuilder, _super);
/**
* @param {?} modal
* @param {?=} defaultValues
* @param {?=} initialSetters
*/
function AbstractTwoButtonPresetBuilder(modal, defaultValues, initialSetters) {
if (defaultValues === void 0) {
defaultValues = undefined;
}
if (initialSetters === void 0) {
initialSetters = [];
}
return _super.call(this, ngxModialog.extend({
modal: modal,
okBtn: 'OK',
okBtnClass: 'btn btn-primary',
cancelBtn: 'Cancel',
cancelBtnClass: 'btn btn-default'
}, defaultValues || {}), ngxModialog.arrayUnion([
'okBtn',
'okBtnClass',
'cancelBtn',
'cancelBtnClass',
], initialSetters)) || this;
}
/**
* @param {?} config
* @return {?}
*/
AbstractTwoButtonPresetBuilder.prototype.$$beforeOpen = function (config) {
_super.prototype.$$beforeOpen.call(this, config);
this.addButton(config.cancelBtnClass, config.cancelBtn, function (cmp, $event) { return cmp.dialog.dismiss(); });
};
return AbstractTwoButtonPresetBuilder;
}(MessageModalPresetBuilder));
/**
* A Preset for a classic 2 button modal window.
*/
var TwoButtonPresetBuilder = (function (_super) {
tslib.__extends(TwoButtonPresetBuilder, _super);
/**
* @param {?} modal
* @param {?=} defaultValues
*/
function TwoButtonPresetBuilder(modal, defaultValues) {
if (defaultValues === void 0) {
defaultValues = undefined;
}
return _super.call(this, modal, defaultValues) || this;
}
/**
* @param {?} config
* @return {?}
*/
TwoButtonPresetBuilder.prototype.$$beforeOpen = function (config) {
_super.prototype.$$beforeOpen.call(this, config);
this.addButton(config.okBtnClass, config.okBtn, function (cmp, $event) { return cmp.dialog.close(true); });
};
return TwoButtonPresetBuilder;
}(AbstractTwoButtonPresetBuilder));
var PromptPresetBuilder = (function (_super) {
tslib.__extends(PromptPresetBuilder, _super);
/**
* @param {?} modal
* @param {?=} defaultValues
*/
function PromptPresetBuilder(modal, defaultValues) {
if (defaultValues === void 0) {
defaultValues = undefined;
}
return _super.call(this, modal, ngxModialog.extend({ showInput: true, defaultValue: '' }, defaultValues || {}), ['placeholder', 'defaultValue']) || this;
}
/**
* @param {?} config
* @return {?}
*/
PromptPresetBuilder.prototype.$$beforeOpen = function (config) {
_super.prototype.$$beforeOpen.call(this, config);
this.addButton(config.okBtnClass, config.okBtn, function (cmp, $event) { return cmp.dialog.close(((cmp.dialog.context)).defaultValue); });
};
return PromptPresetBuilder;
}(AbstractTwoButtonPresetBuilder));
// TODO: use DI factory for this.
// TODO: consolidate dup code
var /** @type {?} */ isDoc = !(typeof document === 'undefined' || !document);
var /** @type {?} */ animationClass = 'show';
/**
* Execute this method to flag that you are working with Bootstrap version 4.
* @deprecated From version 5, ngx-modialog's bootstrap plugin is set to work with version 4 of bootstrap by default.
* @return {?}
*/
function bootstrap4Mode() { }
/**
* Execute this method to flag that you are working with Bootstrap version 3.
* @return {?}
*/
function bootstrap3Mode() { animationClass = 'in'; }
var Modal$1 = (function (_super) {
tslib.__extends(Modal$$1, _super);
/**
* @param {?} overlay
*/
function Modal$$1(overlay) {
return _super.call(this, overlay) || this;
}
/**
* @return {?}
*/
Modal$$1.prototype.alert = function () {
return new OneButtonPresetBuilder(this, /** @type {?} */ ({ isBlocking: false }));
};
/**
* @return {?}
*/
Modal$$1.prototype.prompt = function () {
return new PromptPresetBuilder(this, /** @type {?} */ ({ isBlocking: true, keyboard: null }));
};
/**
* @return {?}
*/
Modal$$1.prototype.confirm = function () {
return new TwoButtonPresetBuilder(this, /** @type {?} */ ({ isBlocking: true, keyboard: null }));
};
/**
* @param {?} dialogRef
* @param {?} content
* @return {?}
*/
Modal$$1.prototype.create = function (dialogRef, content) {
var _this = this;
var /** @type {?} */ backdropRef = this.createBackdrop(dialogRef, ngxModialog.CSSBackdrop);
var /** @type {?} */ containerRef = this.createContainer(dialogRef, BSModalContainer, content);
var /** @type {?} */ overlay = dialogRef.overlayRef.instance;
var /** @type {?} */ backdrop = backdropRef.instance;
var /** @type {?} */ container = containerRef.instance;
dialogRef.inElement ? overlay.insideElement() : overlay.fullscreen();
// add body class if this is the only dialog in the stack
if (isDoc && !document.body.classList.contains('modal-open')) {
document.body.classList.add('modal-open');
}
if (dialogRef.inElement) {
backdrop.setStyle('position', 'absolute');
}
backdrop.addClass('modal-backdrop fade', true);
backdrop.addClass(animationClass);
container.addClass(animationClass);
if (containerRef.location.nativeElement) {
containerRef.location.nativeElement.focus();
}
overlay.beforeDestroy(function () {
var /** @type {?} */ completer = new ngxModialog.PromiseCompleter();
backdrop.removeClass(animationClass);
container.removeClass(animationClass);
rxjs.combineLatest.call(backdrop.myAnimationEnd$(), container.myAnimationEnd$(), function (s1, s2) { return [s1, s2]; })
.subscribe(function (sources) {
isDoc && _this.overlay.groupStackLength(dialogRef) === 1 && document.body.classList.remove('modal-open');
completer.resolve();
});
return completer.promise;
});
return dialogRef;
};
return Modal$$1;
}(ngxModialog.Modal));
Modal$1.decorators = [
{ type: core.Injectable },
];
/** @nocollapse */
Modal$1.ctorParameters = function () {
return [
{ type: ngxModialog.Overlay, },
];
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var /** @type {?} */ providers = [
{ provide: ngxModialog.Modal, useClass: Modal$1 },
{ provide: Modal$1, useClass: Modal$1 }
];
var BootstrapModalModule = (function () {
function BootstrapModalModule() {
}
/**
* @return {?}
*/
BootstrapModalModule.getProviders = function () {
return providers;
};
return BootstrapModalModule;
}());
BootstrapModalModule.decorators = [
{ type: core.NgModule, args: [{
imports: [ngxModialog.ModalModule, common.CommonModule],
declarations: [
BSModalFooter,
BSMessageModalTitle,
BSMessageModalBody,
BSMessageModal,
BSModalContainer
],
providers: providers,
entryComponents: [
BSModalContainer,
BSMessageModal
]
},] },
];
exports.ModalOpenContext = ngxModialog.ModalOpenContext;
exports.ModalOpenContextBuilder = ngxModialog.ModalOpenContextBuilder;
exports.BSModalContext = BSModalContext;
exports.BSModalContextBuilder = BSModalContextBuilder;
exports.BSModalContainer = BSModalContainer;
exports.BSMessageModal = BSMessageModal;
exports.BSMessageModalTitle = BSMessageModalTitle;
exports.BSMessageModalBody = BSMessageModalBody;
exports.BSModalFooter = BSModalFooter;
exports.MessageModalPresetBuilder = MessageModalPresetBuilder;
exports.OneButtonPresetBuilder = OneButtonPresetBuilder;
exports.TwoButtonPresetBuilder = TwoButtonPresetBuilder;
exports.PromptPresetBuilder = PromptPresetBuilder;
exports.Modal = Modal$1;
exports.bootstrap3Mode = bootstrap3Mode;
exports.bootstrap4Mode = bootstrap4Mode;
exports.BootstrapModalModule = BootstrapModalModule;
exports.providers = providers;
exports.ɵa = AbstractTwoButtonPresetBuilder;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ngx-modialog-plugins-bootstrap.umd.js.map