ng-modal-flexible/fesm5/ng-modal-flexible.js

> A simple, light-weight, highly customizable modal for Angular 2+ projects.

import { EventEmitter, Component, ViewEncapsulation, Input, Output, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

/**
 * @fileoverview added by tsickle
 * Generated from: lib/modal-config.model.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var ModalConfig = /** @class */ (function () {
    function ModalConfig() {
    }
    return ModalConfig;
}());
if (false) {
    /** @type {?} */
    ModalConfig.prototype.isOpen;
    /** @type {?} */
    ModalConfig.prototype.modalParentClass;
    /** @type {?} */
    ModalConfig.prototype.headingText;
    /** @type {?} */
    ModalConfig.prototype.headingTextClass;
    /** @type {?} */
    ModalConfig.prototype.showCloseBtn;
    /** @type {?} */
    ModalConfig.prototype.closeBtnContent;
    /** @type {?} */
    ModalConfig.prototype.closeBtnClass;
    /** @type {?} */
    ModalConfig.prototype.contentText;
    /** @type {?} */
    ModalConfig.prototype.contentTextClass;
    /** @type {?} */
    ModalConfig.prototype.buttonOneText;
    /** @type {?} */
    ModalConfig.prototype.buttonOneClass;
    /** @type {?} */
    ModalConfig.prototype.buttonTwoText;
    /** @type {?} */
    ModalConfig.prototype.buttonTwoClass;
    /** @type {?} */
    ModalConfig.prototype.buttonThreeText;
    /** @type {?} */
    ModalConfig.prototype.buttonThreeClass;
    /** @type {?} */
    ModalConfig.prototype.clickOutsideToClose;
    /** @type {?} */
    ModalConfig.prototype.escapeToClose;
    /** @type {?} */
    ModalConfig.prototype.showAnimation;
}

/**
 * @fileoverview added by tsickle
 * Generated from: lib/ng-modal-flexible.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var NgModalFlexibleComponent = /** @class */ (function () {
    function NgModalFlexibleComponent() {
        this.buttonOneClicked = new EventEmitter();
        this.buttonTwoClicked = new EventEmitter();
        this.buttonThreeClicked = new EventEmitter();
        this.modalClosed = new EventEmitter();
        this.fadeOutAnimationClass = '';
    }
    /**
     * @return {?}
     */
    NgModalFlexibleComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () { };
    /**
     * @return {?}
     */
    NgModalFlexibleComponent.prototype.openModal = /**
     * @return {?}
     */
    function () {
        if (!this.modalConfig.headingText)
            this.modalConfig.headingText = 'Welcome to ng-modal-flexible';
        if (!this.modalConfig.contentText)
            this.modalConfig.contentText = 'Please assign your contents to \'contentText\' property of modalConfig and you are good to go!';
        if (!this.modalConfig.closeBtnContent)
            this.modalConfig.closeBtnContent = 'X';
        if (typeof (this.modalConfig.showCloseBtn) === 'undefined')
            this.modalConfig.showCloseBtn = true;
        if (typeof (this.modalConfig.showAnimation) === 'undefined')
            this.modalConfig.showAnimation = true;
        if (typeof (this.modalConfig.clickOutsideToClose) === 'undefined')
            this.modalConfig.clickOutsideToClose = true;
        this.modalConfig.isOpen = true;
    };
    /**
     * @return {?}
     */
    NgModalFlexibleComponent.prototype.closeModal = /**
     * @return {?}
     */
    function () {
        var _this = this;
        if (this.modalConfig.showAnimation)
            this.fadeOutAnimationClass = 'animate-out';
        setTimeout((/**
         * @return {?}
         */
        function () {
            _this.modalConfig.isOpen = false;
            _this.fadeOutAnimationClass = '';
        }), this.modalConfig.showAnimation ? 500 : 0);
        this.modalClosed.emit();
    };
    /**
     * @param {?} event
     * @return {?}
     */
    NgModalFlexibleComponent.prototype.handleKeyboardEvent = /**
     * @param {?} event
     * @return {?}
     */
    function (event) {
        if (this.modalConfig.escapeToClose && event.key === 'Escape')
            this.closeModal();
    };
    NgModalFlexibleComponent.decorators = [
        { type: Component, args: [{
                    selector: 'ng-modal-flexible',
                    template: "<div \r\n    [ngClass]=\"[\r\n        'modal-flexible__parent', \r\n        modalConfig.modalParentClass ? modalConfig.modalParentClass : '',\r\n        fadeOutAnimationClass ? fadeOutAnimationClass : '', \r\n        modalConfig.showAnimation ? 'modal-animate' : '' \r\n    ]\" \r\n    *ngIf=\"modalConfig.isOpen\">\r\n    <div \r\n        class=\"modal-flexible__backdrop\"\r\n        (click)=\"modalConfig.clickOutsideToClose ? closeModal() : null\">\r\n    </div>\r\n    <div class=\"modal-flexible__body\">\r\n        <div class=\"modal-flexible__header\">\r\n            <h4 \r\n                [ngClass]=\"[\r\n                    'modal-flexible-header__heading', \r\n                    modalConfig.headingTextClass ? modalConfig.headingTextClass : ''\r\n                ]\">\r\n                {{modalConfig.headingText}}\r\n            </h4>\r\n            <button \r\n                [ngClass]=\"[\r\n                    'modal-flexible-header__close-btn', \r\n                    modalConfig.closeBtnClass ? modalConfig.closeBtnClass : ''\r\n                ]\"\r\n                (click)=\"closeModal()\"\r\n                *ngIf=\"modalConfig.showCloseBtn\">\r\n                {{modalConfig.closeBtnContent}}\r\n            </button>\r\n        </div>\r\n        <div class=\"modal-flexible__content\">\r\n            <p [ngClass]=\"[\r\n                    'modal-flexible__content-p', \r\n                    modalConfig.contentTextClass ? modalConfig.contentTextClass : ''\r\n                ]\">\r\n                {{modalConfig.contentText}}\r\n            </p>\r\n        </div>\r\n        <div class=\"modal-flexible__footer\">\r\n            <div class=\"modal-flexible__button-holder\">\r\n                <button \r\n                    [ngClass]=\"[\r\n                        'modal-flexible__button', \r\n                        modalConfig.buttonOneClass ? modalConfig.buttonOneClass : ''\r\n                    ]\"\r\n                    type=\"button\"\r\n                    *ngIf=\"modalConfig.buttonOneText\"\r\n                    (click)=\"buttonOneClicked.emit()\">\r\n                    {{modalConfig.buttonOneText}}\r\n                </button>\r\n                <button \r\n                    [ngClass]=\"[\r\n                        'modal-flexible__button', \r\n                        modalConfig.buttonTwoClass ? modalConfig.buttonTwoClass : 'primary-btn'\r\n                    ]\"\r\n                    type=\"button\"\r\n                    *ngIf=\"modalConfig.buttonTwoText\"\r\n                    (click)=\"buttonTwoClicked.emit()\">\r\n                    {{modalConfig.buttonTwoText}}\r\n                </button>\r\n                <button \r\n                    [ngClass]=\"[\r\n                        'modal-flexible__button', \r\n                        modalConfig.buttonThreeClass ? modalConfig.buttonThreeClass : 'primary-btn'\r\n                    ]\"\r\n                    type=\"button\"\r\n                    *ngIf=\"modalConfig.buttonThreeText\"\r\n                    (click)=\"buttonThreeClicked.emit()\">\r\n                    {{modalConfig.buttonThreeText}}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>",
                    encapsulation: ViewEncapsulation.None,
                    host: {
                        '(document:keydown)': 'handleKeyboardEvent($event)'
                    },
                    styles: [".modal-flexible__parent.modal-animate .modal-flexible__backdrop{-webkit-animation:.5s forwards modal-backdrop-fade-in;animation:.5s forwards modal-backdrop-fade-in}.modal-flexible__parent.modal-animate .modal-flexible__body{-webkit-animation:.5s forwards modal-slide-in;animation:.5s forwards modal-slide-in}.modal-flexible__parent.modal-animate.animate-out .modal-flexible__backdrop{-webkit-animation:.5s forwards modal-backdrop-fade-out;animation:.5s forwards modal-backdrop-fade-out}.modal-flexible__parent.modal-animate.animate-out .modal-flexible__body{-webkit-animation:.5s forwards modal-slide-out;animation:.5s forwards modal-slide-out}.modal-flexible__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);z-index:1000}.modal-flexible__body{position:absolute;left:50%;top:25%;transform:translate(-50%,-50%);z-index:1000;background:#fff;padding:0;box-shadow:0 0 8px #333;border-radius:6px;width:480px;font-family:sans-serif}.modal-flexible__header{position:relative;padding:20px 25px;border-bottom:1px solid #ddd}.modal-flexible-header__heading{margin:5px 25px;text-align:center}.modal-flexible-header__close-btn{position:absolute;right:20px;top:50%;transform:translateY(-50%);border:1px solid #ccc;outline:0;background-color:#fff;color:#000;padding:6px 10px;border-radius:50%;box-shadow:0 0 6px #ccc;cursor:pointer}.modal-flexible__content{padding:25px}.modal-flexible__content-p{text-align:center}.modal-flexible__footer{padding:20px 25px;border-top:1px solid #ddd}.modal-flexible__button-holder{text-align:center}.modal-flexible__button{outline:0;border-radius:6px;cursor:pointer;box-shadow:0 0 6px #ccc;margin:0 10px;padding:12px 24px;background-color:#fff;border:1px solid #ccc;color:#000}.modal-flexible__button.primary-btn{background-color:#0275d8;color:#fff}@-webkit-keyframes modal-slide-in{from{top:-25%}to{top:25%}}@keyframes modal-slide-in{from{top:-25%}to{top:25%}}@-webkit-keyframes modal-slide-out{from{top:25%}to{top:-25%}}@keyframes modal-slide-out{from{top:25%}to{top:-25%}}@-webkit-keyframes modal-backdrop-fade-in{from{background-color:rgba(0,0,0,0)}to{background-color:rgba(0,0,0,.7)}}@keyframes modal-backdrop-fade-in{from{background-color:rgba(0,0,0,0)}to{background-color:rgba(0,0,0,.7)}}@-webkit-keyframes modal-backdrop-fade-out{from{background-color:rgba(0,0,0,.7)}to{background-color:rgba(0,0,0,0)}}@keyframes modal-backdrop-fade-out{from{background-color:rgba(0,0,0,.7)}to{background-color:rgba(0,0,0,0)}}@media only screen and (max-width:568px){.modal-flexible__body{width:calc(100% - 12px)}}"]
                }] }
    ];
    /** @nocollapse */
    NgModalFlexibleComponent.ctorParameters = function () { return []; };
    NgModalFlexibleComponent.propDecorators = {
        modalConfig: [{ type: Input }],
        buttonOneClicked: [{ type: Output }],
        buttonTwoClicked: [{ type: Output }],
        buttonThreeClicked: [{ type: Output }],
        modalClosed: [{ type: Output }]
    };
    return NgModalFlexibleComponent;
}());
if (false) {
    /** @type {?} */
    NgModalFlexibleComponent.prototype.modalConfig;
    /** @type {?} */
    NgModalFlexibleComponent.prototype.buttonOneClicked;
    /** @type {?} */
    NgModalFlexibleComponent.prototype.buttonTwoClicked;
    /** @type {?} */
    NgModalFlexibleComponent.prototype.buttonThreeClicked;
    /** @type {?} */
    NgModalFlexibleComponent.prototype.modalClosed;
    /** @type {?} */
    NgModalFlexibleComponent.prototype.fadeOutAnimationClass;
}

/**
 * @fileoverview added by tsickle
 * Generated from: lib/ng-modal-flexible.module.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var NgModalFlexibleModule = /** @class */ (function () {
    function NgModalFlexibleModule() {
    }
    NgModalFlexibleModule.decorators = [
        { type: NgModule, args: [{
                    declarations: [NgModalFlexibleComponent],
                    imports: [CommonModule],
                    exports: [NgModalFlexibleComponent]
                },] }
    ];
    return NgModalFlexibleModule;
}());

/**
 * @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: ng-modal-flexible.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

export { NgModalFlexibleComponent, NgModalFlexibleModule };
//# sourceMappingURL=ng-modal-flexible.js.map