ng-modal-flexible
Version:
> A simple, light-weight, highly customizable modal for Angular 2+ projects.
112 lines • 15.4 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: lib/ng-modal-flexible.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
import { ModalConfig } from './modal-config.model';
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;
}());
export { 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;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctbW9kYWwtZmxleGlibGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmctbW9kYWwtZmxleGlibGUvIiwic291cmNlcyI6WyJsaWIvbmctbW9kYWwtZmxleGlibGUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVsRyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sc0JBQXNCLENBQUE7QUFFbEQ7SUFrQkU7UUFOVSxxQkFBZ0IsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ3RDLHFCQUFnQixHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDdEMsdUJBQWtCLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUN4QyxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDM0MsMEJBQXFCLEdBQUcsRUFBRSxDQUFDO0lBRVgsQ0FBQzs7OztJQUVqQiwyQ0FBUTs7O0lBQVIsY0FBYSxDQUFDOzs7O0lBRWQsNENBQVM7OztJQUFUO1FBQ0UsSUFBRyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsV0FBVztZQUFFLElBQUksQ0FBQyxXQUFXLENBQUMsV0FBVyxHQUFHLDhCQUE4QixDQUFDO1FBQ2hHLElBQUcsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLFdBQVc7WUFBRSxJQUFJLENBQUMsV0FBVyxDQUFDLFdBQVcsR0FBRyxnR0FBZ0csQ0FBQztRQUNsSyxJQUFHLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxlQUFlO1lBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxlQUFlLEdBQUcsR0FBRyxDQUFDO1FBQzdFLElBQUcsT0FBTSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsWUFBWSxDQUFDLEtBQUssV0FBVztZQUFFLElBQUksQ0FBQyxXQUFXLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQztRQUMvRixJQUFHLE9BQU0sQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxLQUFLLFdBQVc7WUFBRSxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7UUFDakcsSUFBRyxPQUFNLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxtQkFBbUIsQ0FBQyxLQUFLLFdBQVc7WUFBRSxJQUFJLENBQUMsV0FBVyxDQUFDLG1CQUFtQixHQUFHLElBQUksQ0FBQztRQUM3RyxJQUFJLENBQUMsV0FBVyxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUM7SUFDakMsQ0FBQzs7OztJQUVELDZDQUFVOzs7SUFBVjtRQUFBLGlCQU9DO1FBTkMsSUFBSSxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWE7WUFBRSxJQUFJLENBQUMscUJBQXFCLEdBQUcsYUFBYSxDQUFDO1FBQy9FLFVBQVU7OztRQUFDO1lBQ1QsS0FBSSxDQUFDLFdBQVcsQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO1lBQ2hDLEtBQUksQ0FBQyxxQkFBcUIsR0FBRyxFQUFFLENBQUM7UUFDbEMsQ0FBQyxHQUFFLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQzdDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDMUIsQ0FBQzs7Ozs7SUFFRCxzREFBbUI7Ozs7SUFBbkIsVUFBb0IsS0FBb0I7UUFDdEMsSUFBSSxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsSUFBSSxLQUFLLENBQUMsR0FBRyxLQUFLLFFBQVE7WUFBRSxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDbEYsQ0FBQzs7Z0JBM0NGLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsbUJBQW1CO29CQUM3Qix3cUdBQWdEO29CQUVoRCxhQUFhLEVBQUUsaUJBQWlCLENBQUMsSUFBSTtvQkFDckMsSUFBSSxFQUFFO3dCQUNKLG9CQUFvQixFQUFFLDZCQUE2QjtxQkFDcEQ7O2lCQUNGOzs7Ozs4QkFHRSxLQUFLO21DQUNMLE1BQU07bUNBQ04sTUFBTTtxQ0FDTixNQUFNOzhCQUNOLE1BQU07O0lBNkJULCtCQUFDO0NBQUEsQUE1Q0QsSUE0Q0M7U0FuQ1ksd0JBQXdCOzs7SUFFbkMsK0NBQWtDOztJQUNsQyxvREFBZ0Q7O0lBQ2hELG9EQUFnRDs7SUFDaEQsc0RBQWtEOztJQUNsRCwrQ0FBMkM7O0lBQzNDLHlEQUEyQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5pbXBvcnQgeyBNb2RhbENvbmZpZyB9IGZyb20gJy4vbW9kYWwtY29uZmlnLm1vZGVsJ1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICduZy1tb2RhbC1mbGV4aWJsZScsXHJcbiAgdGVtcGxhdGVVcmw6Jy4vbmctbW9kYWwtZmxleGlibGUuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL25nLW1vZGFsLWZsZXhpYmxlLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcclxuICBob3N0OiB7XHJcbiAgICAnKGRvY3VtZW50OmtleWRvd24pJzogJ2hhbmRsZUtleWJvYXJkRXZlbnQoJGV2ZW50KSdcclxuICB9XHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBOZ01vZGFsRmxleGlibGVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG5cclxuICBASW5wdXQoKSBtb2RhbENvbmZpZzogTW9kYWxDb25maWc7XHJcbiAgQE91dHB1dCgpIGJ1dHRvbk9uZUNsaWNrZWQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcbiAgQE91dHB1dCgpIGJ1dHRvblR3b0NsaWNrZWQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcbiAgQE91dHB1dCgpIGJ1dHRvblRocmVlQ2xpY2tlZCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuICBAT3V0cHV0KCkgbW9kYWxDbG9zZWQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcbiAgZmFkZU91dEFuaW1hdGlvbkNsYXNzID0gJyc7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gIG5nT25Jbml0KCkgeyB9XHJcblxyXG4gIG9wZW5Nb2RhbCgpIHsgXHJcbiAgICBpZighdGhpcy5tb2RhbENvbmZpZy5oZWFkaW5nVGV4dCkgdGhpcy5tb2RhbENvbmZpZy5oZWFkaW5nVGV4dCA9ICdXZWxjb21lIHRvIG5nLW1vZGFsLWZsZXhpYmxlJztcclxuICAgIGlmKCF0aGlzLm1vZGFsQ29uZmlnLmNvbnRlbnRUZXh0KSB0aGlzLm1vZGFsQ29uZmlnLmNvbnRlbnRUZXh0ID0gJ1BsZWFzZSBhc3NpZ24geW91ciBjb250ZW50cyB0byBcXCdjb250ZW50VGV4dFxcJyBwcm9wZXJ0eSBvZiBtb2RhbENvbmZpZyBhbmQgeW91IGFyZSBnb29kIHRvIGdvISc7XHJcbiAgICBpZighdGhpcy5tb2RhbENvbmZpZy5jbG9zZUJ0bkNvbnRlbnQpIHRoaXMubW9kYWxDb25maWcuY2xvc2VCdG5Db250ZW50ID0gJ1gnO1xyXG4gICAgaWYodHlwZW9mKHRoaXMubW9kYWxDb25maWcuc2hvd0Nsb3NlQnRuKSA9PT0gJ3VuZGVmaW5lZCcpIHRoaXMubW9kYWxDb25maWcuc2hvd0Nsb3NlQnRuID0gdHJ1ZTsgIFxyXG4gICAgaWYodHlwZW9mKHRoaXMubW9kYWxDb25maWcuc2hvd0FuaW1hdGlvbikgPT09ICd1bmRlZmluZWQnKSB0aGlzLm1vZGFsQ29uZmlnLnNob3dBbmltYXRpb24gPSB0cnVlOyAgXHJcbiAgICBpZih0eXBlb2YodGhpcy5tb2RhbENvbmZpZy5jbGlja091dHNpZGVUb0Nsb3NlKSA9PT0gJ3VuZGVmaW5lZCcpIHRoaXMubW9kYWxDb25maWcuY2xpY2tPdXRzaWRlVG9DbG9zZSA9IHRydWU7XHJcbiAgICB0aGlzLm1vZGFsQ29uZmlnLmlzT3BlbiA9IHRydWU7IFxyXG4gIH1cclxuXHJcbiAgY2xvc2VNb2RhbCgpIHtcclxuICAgIGlmICh0aGlzLm1vZGFsQ29uZmlnLnNob3dBbmltYXRpb24pIHRoaXMuZmFkZU91dEFuaW1hdGlvbkNsYXNzID0gJ2FuaW1hdGUtb3V0JztcclxuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xyXG4gICAgICB0aGlzLm1vZGFsQ29uZmlnLmlzT3BlbiA9IGZhbHNlO1xyXG4gICAgICB0aGlzLmZhZGVPdXRBbmltYXRpb25DbGFzcyA9ICcnO1xyXG4gICAgfSwgdGhpcy5tb2RhbENvbmZpZy5zaG93QW5pbWF0aW9uID8gNTAwIDogMCk7XHJcbiAgICB0aGlzLm1vZGFsQ2xvc2VkLmVtaXQoKTtcclxuICB9XHJcblxyXG4gIGhhbmRsZUtleWJvYXJkRXZlbnQoZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcclxuICAgIGlmICh0aGlzLm1vZGFsQ29uZmlnLmVzY2FwZVRvQ2xvc2UgJiYgZXZlbnQua2V5ID09PSAnRXNjYXBlJykgdGhpcy5jbG9zZU1vZGFsKCk7XHJcbiAgfVxyXG59XHJcbiJdfQ==