ngx-modialog-10
Version:
Modal / Dialog for Angular
875 lines (863 loc) • 26 kB
JavaScript
import { ModalOpenContext, ModalOpenContextBuilder, extend, arrayUnion, BaseDynamicComponent, DialogRef, setAssignAlias, privateKey, Modal as Modal$1, CSSBackdrop, PromiseCompleter, Overlay, ModalModule } from 'ngx-modialog-10';
export { ModalOpenContext, ModalOpenContextBuilder } from 'ngx-modialog-10';
import { Component, ViewEncapsulation, ElementRef, Renderer2, Injectable, NgModule } from '@angular/core';
import { combineLatest } from 'rxjs';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* Generated from: lib/modal-context.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const DEFAULT_VALUES = {
dialogClass: 'modal-dialog',
showClose: false
};
/** @type {?} */
const DEFAULT_SETTERS = [
'dialogClass',
'size',
'showClose'
];
class BSModalContext extends ModalOpenContext {
/**
* @return {?}
*/
normalize() {
if (!this.dialogClass) {
this.dialogClass = DEFAULT_VALUES.dialogClass;
}
super.normalize();
}
}
if (false) {
/**
* A Class for the modal dialog container.
* Default: modal-dialog
* @type {?}
*/
BSModalContext.prototype.dialogClass;
/**
* Size of the modal. 'lg' or 'sm' only.
*
* If you want to use custom sizes leave this empty and set the dialogClass property.
* e.g: dialogClass = 'modal-dialog my-custom-dialog`
* NOTE: No validation.
* Default: ''
* @type {?}
*/
BSModalContext.prototype.size;
/**
* When true, show a close button on the top right corner.
* @type {?}
*/
BSModalContext.prototype.showClose;
}
/**
* @template T
*/
class BSModalContextBuilder extends ModalOpenContextBuilder {
/**
* @param {?=} defaultValues
* @param {?=} initialSetters
* @param {?=} baseType
*/
constructor(defaultValues, initialSetters, baseType) {
super(extend(DEFAULT_VALUES, defaultValues || {}), arrayUnion(DEFAULT_SETTERS, initialSetters || []), baseType || (/** @type {?} */ (BSModalContext)) // https://github.com/Microsoft/TypeScript/issues/7234
);
}
}
if (false) {
/**
* A Class for the modal dialog container.
* Default: modal-dialog
* @type {?}
*/
BSModalContextBuilder.prototype.dialogClass;
/**
* Size of the modal. 'lg' or 'sm' only.
*
* If you want to use custom sizes leave this empty and set the dialogClass property.
* e.g: dialogClass = 'modal-dialog my-custom-dialog`
* NOTE: No validation.
* Default: ''
* @type {?}
*/
BSModalContextBuilder.prototype.size;
/**
* When true, show a close button on the top right corner.
* @type {?}
*/
BSModalContextBuilder.prototype.showClose;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/modal-container.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// tslint:disable-next-line:component-class-suffix
class BSModalContainer extends BaseDynamicComponent {
/**
* @param {?} dialog
* @param {?} el
* @param {?} renderer
*/
constructor(dialog, el, renderer) {
super(el, renderer);
this.dialog = dialog;
this.activateAnimationListener();
}
}
BSModalContainer.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line:component-selector
selector: 'bs-modal-container',
host: {
'tabindex': '-1',
'role': 'dialog',
'class': 'modal fade',
'style': 'position: absolute; display: block'
},
encapsulation: ViewEncapsulation.None,
template: `
<div [ngClass]="dialog.context.dialogClass"
[class.modal-lg]="dialog.context.size == \'lg\'"
[class.modal-sm]="dialog.context.size == \'sm\'">
<div class="modal-content" style="display:block" role="document" overlayDialogBoundary>
<ng-content></ng-content>
</div>
</div>`
}] }
];
/** @nocollapse */
BSModalContainer.ctorParameters = () => [
{ type: DialogRef },
{ type: ElementRef },
{ type: Renderer2 }
];
if (false) {
/** @type {?} */
BSModalContainer.prototype.dialog;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/message-modal.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function BSMessageModalButtonHandler() { }
/**
* Interface for button definition
* @record
*/
function BSMessageModalButtonConfig() { }
if (false) {
/** @type {?} */
BSMessageModalButtonConfig.prototype.cssClass;
/** @type {?} */
BSMessageModalButtonConfig.prototype.caption;
/** @type {?} */
BSMessageModalButtonConfig.prototype.onClick;
}
class BSMessageModalTitle {
/**
* @param {?} dialog
*/
constructor(dialog) {
this.dialog = dialog;
this.context = dialog.context;
}
/**
* @return {?}
*/
get titleHtml() {
return this.context.titleHtml ? 1 : 0;
}
}
BSMessageModalTitle.decorators = [
{ type: Component, args: [{
selector: 'modal-title',
encapsulation: ViewEncapsulation.None,
template: `<div [ngClass]="context.headerClass" [ngSwitch]="titleHtml">
<button *ngIf="context.showClose" type="button" class="close"
aria-label="Close" (click)="dialog.dismiss()">
<span aria-hidden="true">×</span>
</button>
<div *ngSwitchCase="1" [innerHtml]="context.titleHtml"></div>
<h3 *ngSwitchDefault class="modal-title">{{context.title}}</h3>
</div>`
}] }
];
/** @nocollapse */
BSMessageModalTitle.ctorParameters = () => [
{ type: DialogRef }
];
if (false) {
/** @type {?} */
BSMessageModalTitle.prototype.context;
/** @type {?} */
BSMessageModalTitle.prototype.dialog;
}
// tslint:disable-next-line:component-class-suffix
class BSMessageModalBody {
/**
* @param {?} dialog
*/
constructor(dialog) {
this.dialog = dialog;
this.context = (/** @type {?} */ (dialog.context));
}
}
BSMessageModalBody.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line:component-selector
selector: 'modal-body',
encapsulation: ViewEncapsulation.None,
template: `<div [ngClass]="context.bodyClass">
<div [innerHtml]="context.message"></div>
<div *ngIf="context.showInput" class="form-group">
<input autofocus #input
name="bootstrap"
type="text"
class="form-control"
[value]="context.defaultValue"
(change)="context.defaultValue = input.value"
placeholder="{{context.placeholder}}">
</div>
</div>
`,
styles: [`.form-group {
margin-top: 10px;
}`]
}] }
];
/** @nocollapse */
BSMessageModalBody.ctorParameters = () => [
{ type: DialogRef }
];
if (false) {
/** @type {?} */
BSMessageModalBody.prototype.context;
/** @type {?} */
BSMessageModalBody.prototype.dialog;
}
/**
* Represents the modal footer for storing buttons.
*/
// tslint:disable-next-line:component-class-suffix
class BSModalFooter {
/**
* @param {?} dialog
*/
constructor(dialog) {
this.dialog = dialog;
}
/**
* @param {?} btn
* @param {?} $event
* @return {?}
*/
onClick(btn, $event) {
$event.stopPropagation();
btn.onClick(this, $event);
}
}
BSModalFooter.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line:component-selector
selector: 'modal-footer',
encapsulation: ViewEncapsulation.None,
template: `<div [ngClass]="dialog.context.footerClass">
<button *ngFor="let btn of dialog.context.buttons;"
[ngClass]="btn.cssClass"
(click)="onClick(btn, $event)">{{btn.caption}}</button>
</div>`
}] }
];
/** @nocollapse */
BSModalFooter.ctorParameters = () => [
{ type: DialogRef }
];
if (false) {
/** @type {?} */
BSModalFooter.prototype.dialog;
}
/**
* 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)
*/
// tslint:disable-next-line:component-class-suffix
class BSMessageModal {
/**
* @param {?} dialog
*/
constructor(dialog) {
this.dialog = dialog;
}
}
BSMessageModal.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line:component-selector
selector: 'modal-content',
encapsulation: ViewEncapsulation.None,
template: `<modal-title></modal-title><modal-body></modal-body><modal-footer></modal-footer>`
}] }
];
/** @nocollapse */
BSMessageModal.ctorParameters = () => [
{ type: DialogRef }
];
if (false) {
/** @type {?} */
BSMessageModal.prototype.dialog;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/presets/message-modal-preset.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const DEFAULT_VALUES$1 = {
component: BSMessageModal,
headerClass: 'modal-header',
bodyClass: 'modal-body',
footerClass: 'modal-footer'
};
/** @type {?} */
const DEFAULT_SETTERS$1 = [
'headerClass',
'title',
'titleHtml',
'bodyClass',
'footerClass'
];
/**
* Data definition
* @record
*/
function MessageModalPreset() { }
if (false) {
/**
* A Class for the header (title) container.
* Default: modal-header
* @type {?}
*/
MessageModalPreset.prototype.headerClass;
/**
* Caption for the title, enclosed in a H3 container.
* @type {?}
*/
MessageModalPreset.prototype.title;
/**
* HTML for the title, if set overrides title property.
* The HTML is wrapped in a DIV element, inside the header container.
* Example:
* <div class="modal-header">
* <div> HTML CONTENT INSERTED HERE </div>
* </div>
* Note: HTML is not compiled.
* @type {?}
*/
MessageModalPreset.prototype.titleHtml;
/**
* aliased by 'body'
* \@aliasedBy body
* @type {?}
*/
MessageModalPreset.prototype.message;
/**
* The body of the modal.
* Can be either text or HTML.
* Note: When using HTML, the template is not compiled. (binding and expression will not parse)
* \@aliasOf message
* @type {?}
*/
MessageModalPreset.prototype.body;
/**
* A Class for the body container.
* Default: modal-body
* @type {?}
*/
MessageModalPreset.prototype.bodyClass;
/**
* A Class for the footer container.
* Default: modal-footer
* @type {?}
*/
MessageModalPreset.prototype.footerClass;
/** @type {?} */
MessageModalPreset.prototype.buttons;
/** @type {?|undefined} */
MessageModalPreset.prototype.showInput;
}
/**
* A Preset representing the configuration needed to open MessageModal.
* This is an abstract implementation with no concrete behaviour.
* Use derived implementation.
* @abstract
* @template T
*/
class MessageModalPresetBuilder extends BSModalContextBuilder {
/**
* @param {?=} defaultValues
* @param {?=} initialSetters
* @param {?=} baseType
*/
constructor(defaultValues, initialSetters, baseType) {
super(extend(extend({ buttons: [] }, DEFAULT_VALUES$1), defaultValues || {}), arrayUnion(DEFAULT_SETTERS$1, initialSetters || []), baseType);
setAssignAlias(this, 'body', 'message', true);
}
/**
* @template THIS
* @this {THIS}
* @param {?} css
* @param {?} caption
* @param {?} onClick
* @return {THIS}
*/
addButton(css, caption, onClick) {
/** @type {?} */
const btn = {
cssClass: css,
caption: caption,
onClick: onClick
};
/** @type {?} */
const key = privateKey('buttons');
((/** @type {?} */ ((/** @type {?} */ (this))[key]))).push(btn);
return (/** @type {?} */ (this));
}
}
if (false) {
/**
* A Class for the header (title) container.
* Default: modal-header
* @type {?}
*/
MessageModalPresetBuilder.prototype.headerClass;
/**
* Caption for the title, enclosed in a H3 container.
* @type {?}
*/
MessageModalPresetBuilder.prototype.title;
/**
* HTML for the title, if set overrides title property.
* The HTML is wrapped in a DIV element, inside the header container.
* Example:
* <div class="modal-header">
* <div> HTML CONTENT INSERTED HERE </div>
* </div>
* Note: HTML is not compiled.
* @type {?}
*/
MessageModalPresetBuilder.prototype.titleHtml;
/**
* aliased by 'body'
* \@aliasedBy body
* @type {?}
*/
MessageModalPresetBuilder.prototype.message;
/**
* The body of the modal.
* Can be either text or HTML.
* Note: When using HTML, the template is not compiled. (binding and expression will not parse)
* \@aliasOf message
* @type {?}
*/
MessageModalPresetBuilder.prototype.body;
/**
* A Class for the body container.
* Default: modal-body
* @type {?}
*/
MessageModalPresetBuilder.prototype.bodyClass;
/**
* A Class for the footer container.
* Default: modal-footer
* @type {?}
*/
MessageModalPresetBuilder.prototype.footerClass;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/presets/one-button-preset.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function OneButtonPreset() { }
if (false) {
/**
* Caption for the OK button.
* Default: OK
* @type {?}
*/
OneButtonPreset.prototype.okBtn;
/**
* A Class for the OK button.
* Default: btn btn-primary
* @type {?}
*/
OneButtonPreset.prototype.okBtnClass;
}
/**
* A Preset for a classic 1 button modal window.
*/
class OneButtonPresetBuilder extends MessageModalPresetBuilder {
/**
* @param {?} modal
* @param {?=} defaultValues
*/
constructor(modal, defaultValues) {
super(extend({
modal: modal,
okBtn: 'OK',
okBtnClass: 'btn btn-primary'
}, defaultValues || {}), [
'okBtn',
'okBtnClass'
]);
}
/**
* @param {?} config
* @return {?}
*/
$$beforeOpen(config) {
super.$$beforeOpen(config);
this.addButton(config.okBtnClass, config.okBtn, (/**
* @param {?} cmp
* @param {?} $event
* @return {?}
*/
(cmp, $event) => cmp.dialog.close(true)));
}
}
if (false) {
/** @type {?} */
OneButtonPresetBuilder.prototype.okBtn;
/** @type {?} */
OneButtonPresetBuilder.prototype.okBtnClass;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/presets/two-button-preset.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function TwoButtonPreset() { }
if (false) {
/**
* Caption for the Cancel button.
* Default: Cancel
* @type {?}
*/
TwoButtonPreset.prototype.cancelBtn;
/**
* A Class for the Cancel button.
* Default: btn btn-default
* @type {?}
*/
TwoButtonPreset.prototype.cancelBtnClass;
}
/**
* Common two button preset
* @abstract
*/
class AbstractTwoButtonPresetBuilder extends MessageModalPresetBuilder {
/**
* @param {?} modal
* @param {?=} defaultValues
* @param {?=} initialSetters
*/
constructor(modal, defaultValues, initialSetters = []) {
super(extend({
modal: modal,
okBtn: 'OK',
okBtnClass: 'btn btn-primary',
cancelBtn: 'Cancel',
cancelBtnClass: 'btn btn-default'
}, defaultValues || {}), arrayUnion([
'okBtn',
'okBtnClass',
'cancelBtn',
'cancelBtnClass',
], initialSetters));
}
/**
* @param {?} config
* @return {?}
*/
$$beforeOpen(config) {
super.$$beforeOpen(config);
this.addButton(config.cancelBtnClass, config.cancelBtn, (/**
* @param {?} cmp
* @param {?} $event
* @return {?}
*/
(cmp, $event) => cmp.dialog.dismiss()));
}
}
if (false) {
/** @type {?} */
AbstractTwoButtonPresetBuilder.prototype.okBtn;
/** @type {?} */
AbstractTwoButtonPresetBuilder.prototype.okBtnClass;
/** @type {?} */
AbstractTwoButtonPresetBuilder.prototype.cancelBtn;
/** @type {?} */
AbstractTwoButtonPresetBuilder.prototype.cancelBtnClass;
}
/**
* A Preset for a classic 2 button modal window.
*/
class TwoButtonPresetBuilder extends AbstractTwoButtonPresetBuilder {
/**
* @param {?} modal
* @param {?=} defaultValues
*/
constructor(modal, defaultValues) {
super(modal, defaultValues);
}
/**
* @param {?} config
* @return {?}
*/
$$beforeOpen(config) {
super.$$beforeOpen(config);
this.addButton(config.okBtnClass, config.okBtn, (/**
* @param {?} cmp
* @param {?} $event
* @return {?}
*/
(cmp, $event) => cmp.dialog.close(true)));
}
}
/**
* @record
*/
function PromptPreset() { }
if (false) {
/** @type {?} */
PromptPreset.prototype.showInput;
/**
* Default value shown in the prompt.
* @type {?}
*/
PromptPreset.prototype.defaultValue;
/**
* A placeholder for the input element.
* @type {?}
*/
PromptPreset.prototype.placeholder;
}
class PromptPresetBuilder extends AbstractTwoButtonPresetBuilder {
/**
* @param {?} modal
* @param {?=} defaultValues
*/
constructor(modal, defaultValues) {
super(modal, extend({ showInput: true, defaultValue: '' }, defaultValues || {}), ['placeholder', 'defaultValue']);
}
/**
* @param {?} config
* @return {?}
*/
$$beforeOpen(config) {
super.$$beforeOpen(config);
this.addButton(config.okBtnClass, config.okBtn, (/**
* @param {?} cmp
* @param {?} $event
* @return {?}
*/
(cmp, $event) => cmp.dialog.close(((/** @type {?} */ (cmp.dialog.context))).defaultValue)));
}
}
if (false) {
/** @type {?} */
PromptPresetBuilder.prototype.placeholder;
/** @type {?} */
PromptPresetBuilder.prototype.defaultValue;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/modal.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// TODO: use DI factory for this.
// TODO: consolidate dup code
/** @type {?} */
const isDoc = !(typeof document === 'undefined' || !document);
/** @type {?} */
let 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';
}
class Modal extends Modal$1 {
/**
* @param {?} overlay
*/
constructor(overlay) {
super(overlay);
}
/**
* @return {?}
*/
alert() {
return new OneButtonPresetBuilder(this, (/** @type {?} */ ({ isBlocking: false })));
}
/**
* @return {?}
*/
prompt() {
return new PromptPresetBuilder(this, (/** @type {?} */ ({ isBlocking: true, keyboard: null })));
}
/**
* @return {?}
*/
confirm() {
return new TwoButtonPresetBuilder(this, (/** @type {?} */ ({ isBlocking: true, keyboard: null })));
}
/**
* @protected
* @param {?} dialogRef
* @param {?} content
* @return {?}
*/
create(dialogRef, content) {
/** @type {?} */
const backdropRef = this.createBackdrop(dialogRef, CSSBackdrop);
/** @type {?} */
const containerRef = this.createContainer(dialogRef, BSModalContainer, content);
/** @type {?} */
const overlay = dialogRef.overlayRef.instance;
/** @type {?} */
const backdrop = backdropRef.instance;
/** @type {?} */
const 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((/**
* @return {?}
*/
() => {
/** @type {?} */
const completer = new PromiseCompleter();
backdrop.removeClass(animationClass);
container.removeClass(animationClass);
combineLatest.call(backdrop.myAnimationEnd$(), container.myAnimationEnd$(), (/**
* @param {?} s1
* @param {?} s2
* @return {?}
*/
(s1, s2) => [s1, s2]))
.subscribe((/**
* @param {?} sources
* @return {?}
*/
sources => {
if (isDoc && this.overlay.groupStackLength(dialogRef) === 1) {
document.body.classList.remove('modal-open');
}
completer.resolve();
}));
return completer.promise;
}));
return dialogRef;
}
}
Modal.decorators = [
{ type: Injectable }
];
/** @nocollapse */
Modal.ctorParameters = () => [
{ type: Overlay }
];
/**
* @fileoverview added by tsickle
* Generated from: lib/bootstrap.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const providers = [
{ provide: Modal$1, useClass: Modal },
{ provide: Modal, useClass: Modal }
];
class BootstrapModalModule {
/**
* @return {?}
*/
static getProviders() {
return providers;
}
}
BootstrapModalModule.decorators = [
{ type: NgModule, args: [{
imports: [ModalModule, CommonModule],
declarations: [
BSModalFooter,
BSMessageModalTitle,
BSMessageModalBody,
BSMessageModal,
BSModalContainer
],
providers,
entryComponents: [
BSModalContainer,
BSMessageModal
]
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: public_api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ngx-modialog-10-plugins-bootstrap.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { BSMessageModal, BSMessageModalBody, BSMessageModalTitle, BSModalContainer, BSModalContext, BSModalContextBuilder, BSModalFooter, BootstrapModalModule, MessageModalPresetBuilder, Modal, OneButtonPresetBuilder, PromptPresetBuilder, TwoButtonPresetBuilder, bootstrap3Mode, bootstrap4Mode, providers, AbstractTwoButtonPresetBuilder as ɵa };
//# sourceMappingURL=ngx-modialog-10-plugins-bootstrap.js.map