ngx-modialog-11/plugins/bootstrap/fesm2015/ngx-modialog-11-plugins-bootstrap.js

Modal / Dialog for Angular

import { ModalOpenContext, ModalOpenContextBuilder, extend, arrayUnion, BaseDynamicComponent, DialogRef, setAssignAlias, privateKey, Modal as Modal$1, CSSBackdrop, PromiseCompleter, Overlay, ModalModule } from 'ngx-modialog-11';
export { ModalOpenContext, ModalOpenContextBuilder } from 'ngx-modialog-11';
import { Component, ViewEncapsulation, ElementRef, Renderer2, Injectable, NgModule } from '@angular/core';
import { combineLatest } from 'rxjs';
import { CommonModule } from '@angular/common';

const DEFAULT_VALUES = {
    dialogClass: 'modal-dialog',
    showClose: false
};
const DEFAULT_SETTERS = [
    'dialogClass',
    'size',
    'showClose'
];
class BSModalContext extends ModalOpenContext {
    normalize() {
        if (!this.dialogClass) {
            this.dialogClass = DEFAULT_VALUES.dialogClass;
        }
        super.normalize();
    }
}
class BSModalContextBuilder extends ModalOpenContextBuilder {
    constructor(defaultValues, initialSetters, baseType) {
        super(extend(DEFAULT_VALUES, defaultValues || {}), arrayUnion(DEFAULT_SETTERS, initialSetters || []), baseType || BSModalContext // https://github.com/Microsoft/TypeScript/issues/7234
        );
    }
}

// tslint:disable-next-line:component-class-suffix
class BSModalContainer extends BaseDynamicComponent {
    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 }
];

class BSMessageModalTitle {
    constructor(dialog) {
        this.dialog = dialog;
        this.context = dialog.context;
    }
    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 }
];
// tslint:disable-next-line:component-class-suffix
class BSMessageModalBody {
    constructor(dialog) {
        this.dialog = dialog;
        this.context = 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 }
];
/**
 * Represents the modal footer for storing buttons.
 */
// tslint:disable-next-line:component-class-suffix
class BSModalFooter {
    constructor(dialog) {
        this.dialog = dialog;
    }
    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 }
];
/**
 * 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 {
    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 }
];

const DEFAULT_VALUES$1 = {
    component: BSMessageModal,
    headerClass: 'modal-header',
    bodyClass: 'modal-body',
    footerClass: 'modal-footer'
};
const DEFAULT_SETTERS$1 = [
    'headerClass',
    'title',
    'titleHtml',
    'bodyClass',
    'footerClass'
];
/**
 * A Preset representing the configuration needed to open MessageModal.
 * This is an abstract implementation with no concrete behaviour.
 * Use derived implementation.
 */
class MessageModalPresetBuilder extends BSModalContextBuilder {
    constructor(defaultValues, initialSetters, baseType) {
        super(extend(extend({ buttons: [] }, DEFAULT_VALUES$1), defaultValues || {}), arrayUnion(DEFAULT_SETTERS$1, initialSetters || []), baseType);
        setAssignAlias(this, 'body', 'message', true);
    }
    addButton(css, caption, onClick) {
        const btn = {
            cssClass: css,
            caption: caption,
            onClick: onClick
        };
        const key = privateKey('buttons');
        this[key].push(btn);
        return this;
    }
}

/**
 * A Preset for a classic 1 button modal window.
 */
class OneButtonPresetBuilder extends MessageModalPresetBuilder {
    constructor(modal, defaultValues) {
        super(extend({
            modal: modal,
            okBtn: 'OK',
            okBtnClass: 'btn btn-primary'
        }, defaultValues || {}), [
            'okBtn',
            'okBtnClass'
        ]);
    }
    $$beforeOpen(config) {
        super.$$beforeOpen(config);
        this.addButton(config.okBtnClass, config.okBtn, (cmp, $event) => cmp.dialog.close(true));
    }
}

/** Common two button preset */
class AbstractTwoButtonPresetBuilder extends MessageModalPresetBuilder {
    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));
    }
    $$beforeOpen(config) {
        super.$$beforeOpen(config);
        this.addButton(config.cancelBtnClass, config.cancelBtn, (cmp, $event) => cmp.dialog.dismiss());
    }
}
/**
 * A Preset for a classic 2 button modal window.
 */
class TwoButtonPresetBuilder extends AbstractTwoButtonPresetBuilder {
    constructor(modal, defaultValues) {
        super(modal, defaultValues);
    }
    $$beforeOpen(config) {
        super.$$beforeOpen(config);
        this.addButton(config.okBtnClass, config.okBtn, (cmp, $event) => cmp.dialog.close(true));
    }
}
class PromptPresetBuilder extends AbstractTwoButtonPresetBuilder {
    constructor(modal, defaultValues) {
        super(modal, extend({ showInput: true, defaultValue: '' }, defaultValues || {}), ['placeholder', 'defaultValue']);
    }
    $$beforeOpen(config) {
        super.$$beforeOpen(config);
        this.addButton(config.okBtnClass, config.okBtn, (cmp, $event) => cmp.dialog.close(cmp.dialog.context.defaultValue));
    }
}

// TODO: use DI factory for this.
// TODO: consolidate dup code
const isDoc = !(typeof document === 'undefined' || !document);
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.
 */
function bootstrap4Mode() {
}
/**
 * Execute this method to flag that you are working with Bootstrap version 3.
 */
function bootstrap3Mode() {
    animationClass = 'in';
}
class Modal extends Modal$1 {
    constructor(overlay) {
        super(overlay);
    }
    alert() {
        return new OneButtonPresetBuilder(this, { isBlocking: false });
    }
    prompt() {
        return new PromptPresetBuilder(this, { isBlocking: true, keyboard: null });
    }
    confirm() {
        return new TwoButtonPresetBuilder(this, { isBlocking: true, keyboard: null });
    }
    create(dialogRef, content) {
        const backdropRef = this.createBackdrop(dialogRef, CSSBackdrop);
        const containerRef = this.createContainer(dialogRef, BSModalContainer, content);
        const overlay = dialogRef.overlayRef.instance;
        const backdrop = backdropRef.instance;
        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(() => {
            const completer = new PromiseCompleter();
            backdrop.removeClass(animationClass);
            container.removeClass(animationClass);
            combineLatest.call(backdrop.myAnimationEnd$(), container.myAnimationEnd$(), (s1, s2) => [s1, s2])
                .subscribe(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 }
];

const providers = [
    { provide: Modal$1, useClass: Modal },
    { provide: Modal, useClass: Modal }
];
class BootstrapModalModule {
    static getProviders() {
        return providers;
    }
}
BootstrapModalModule.decorators = [
    { type: NgModule, args: [{
                imports: [ModalModule, CommonModule],
                declarations: [
                    BSModalFooter,
                    BSMessageModalTitle,
                    BSMessageModalBody,
                    BSMessageModal,
                    BSModalContainer
                ],
                providers,
                entryComponents: [
                    BSModalContainer,
                    BSMessageModal
                ]
            },] }
];

/**
 * Generated bundle index. Do not edit.
 */

export { BSMessageModal, BSMessageModalBody, BSMessageModalTitle, BSModalContainer, BSModalContext, BSModalContextBuilder, BSModalFooter, BootstrapModalModule, MessageModalPresetBuilder, Modal, OneButtonPresetBuilder, PromptPresetBuilder, TwoButtonPresetBuilder, bootstrap3Mode, bootstrap4Mode, providers, AbstractTwoButtonPresetBuilder as ɵa };
//# sourceMappingURL=ngx-modialog-11-plugins-bootstrap.js.map