ng-modal-flexible
Version:
> A simple, light-weight, highly customizable modal for Angular 2+ projects.
96 lines • 14.7 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';
export class NgModalFlexibleComponent {
constructor() {
this.buttonOneClicked = new EventEmitter();
this.buttonTwoClicked = new EventEmitter();
this.buttonThreeClicked = new EventEmitter();
this.modalClosed = new EventEmitter();
this.fadeOutAnimationClass = '';
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @return {?}
*/
openModal() {
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 {?}
*/
closeModal() {
if (this.modalConfig.showAnimation)
this.fadeOutAnimationClass = 'animate-out';
setTimeout((/**
* @return {?}
*/
() => {
this.modalConfig.isOpen = false;
this.fadeOutAnimationClass = '';
}), this.modalConfig.showAnimation ? 500 : 0);
this.modalClosed.emit();
}
/**
* @param {?} event
* @return {?}
*/
handleKeyboardEvent(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 = () => [];
NgModalFlexibleComponent.propDecorators = {
modalConfig: [{ type: Input }],
buttonOneClicked: [{ type: Output }],
buttonTwoClicked: [{ type: Output }],
buttonThreeClicked: [{ type: Output }],
modalClosed: [{ type: Output }]
};
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctbW9kYWwtZmxleGlibGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmctbW9kYWwtZmxleGlibGUvIiwic291cmNlcyI6WyJsaWIvbmctbW9kYWwtZmxleGlibGUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVsRyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sc0JBQXNCLENBQUE7QUFXbEQsTUFBTSxPQUFPLHdCQUF3QjtJQVNuQztRQU5VLHFCQUFnQixHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDdEMscUJBQWdCLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUN0Qyx1QkFBa0IsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBQ3hDLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUMzQywwQkFBcUIsR0FBRyxFQUFFLENBQUM7SUFFWCxDQUFDOzs7O0lBRWpCLFFBQVEsS0FBSyxDQUFDOzs7O0lBRWQsU0FBUztRQUNQLElBQUcsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLFdBQVc7WUFBRSxJQUFJLENBQUMsV0FBVyxDQUFDLFdBQVcsR0FBRyw4QkFBOEIsQ0FBQztRQUNoRyxJQUFHLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxXQUFXO1lBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxXQUFXLEdBQUcsZ0dBQWdHLENBQUM7UUFDbEssSUFBRyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsZUFBZTtZQUFFLElBQUksQ0FBQyxXQUFXLENBQUMsZUFBZSxHQUFHLEdBQUcsQ0FBQztRQUM3RSxJQUFHLE9BQU0sQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLFlBQVksQ0FBQyxLQUFLLFdBQVc7WUFBRSxJQUFJLENBQUMsV0FBVyxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUM7UUFDL0YsSUFBRyxPQUFNLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUMsS0FBSyxXQUFXO1lBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDO1FBQ2pHLElBQUcsT0FBTSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsbUJBQW1CLENBQUMsS0FBSyxXQUFXO1lBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxtQkFBbUIsR0FBRyxJQUFJLENBQUM7UUFDN0csSUFBSSxDQUFDLFdBQVcsQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO0lBQ2pDLENBQUM7Ozs7SUFFRCxVQUFVO1FBQ1IsSUFBSSxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWE7WUFBRSxJQUFJLENBQUMscUJBQXFCLEdBQUcsYUFBYSxDQUFDO1FBQy9FLFVBQVU7OztRQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksQ0FBQyxXQUFXLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztZQUNoQyxJQUFJLENBQUMscUJBQXFCLEdBQUcsRUFBRSxDQUFDO1FBQ2xDLENBQUMsR0FBRSxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUM3QyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzFCLENBQUM7Ozs7O0lBRUQsbUJBQW1CLENBQUMsS0FBb0I7UUFDdEMsSUFBSSxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsSUFBSSxLQUFLLENBQUMsR0FBRyxLQUFLLFFBQVE7WUFBRSxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDbEYsQ0FBQzs7O1lBM0NGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsbUJBQW1CO2dCQUM3Qix3cUdBQWdEO2dCQUVoRCxhQUFhLEVBQUUsaUJBQWlCLENBQUMsSUFBSTtnQkFDckMsSUFBSSxFQUFFO29CQUNKLG9CQUFvQixFQUFFLDZCQUE2QjtpQkFDcEQ7O2FBQ0Y7Ozs7OzBCQUdFLEtBQUs7K0JBQ0wsTUFBTTsrQkFDTixNQUFNO2lDQUNOLE1BQU07MEJBQ04sTUFBTTs7OztJQUpQLCtDQUFrQzs7SUFDbEMsb0RBQWdEOztJQUNoRCxvREFBZ0Q7O0lBQ2hELHNEQUFrRDs7SUFDbEQsK0NBQTJDOztJQUMzQyx5REFBMkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuaW1wb3J0IHsgTW9kYWxDb25maWcgfSBmcm9tICcuL21vZGFsLWNvbmZpZy5tb2RlbCdcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbmctbW9kYWwtZmxleGlibGUnLFxyXG4gIHRlbXBsYXRlVXJsOicuL25nLW1vZGFsLWZsZXhpYmxlLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9uZy1tb2RhbC1mbGV4aWJsZS5jb21wb25lbnQuc2NzcyddLFxyXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXHJcbiAgaG9zdDoge1xyXG4gICAgJyhkb2N1bWVudDprZXlkb3duKSc6ICdoYW5kbGVLZXlib2FyZEV2ZW50KCRldmVudCknXHJcbiAgfVxyXG59KVxyXG5leHBvcnQgY2xhc3MgTmdNb2RhbEZsZXhpYmxlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuXHJcbiAgQElucHV0KCkgbW9kYWxDb25maWc6IE1vZGFsQ29uZmlnO1xyXG4gIEBPdXRwdXQoKSBidXR0b25PbmVDbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG4gIEBPdXRwdXQoKSBidXR0b25Ud29DbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG4gIEBPdXRwdXQoKSBidXR0b25UaHJlZUNsaWNrZWQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcbiAgQE91dHB1dCgpIG1vZGFsQ2xvc2VkID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG4gIGZhZGVPdXRBbmltYXRpb25DbGFzcyA9ICcnO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpIHsgfVxyXG5cclxuICBvcGVuTW9kYWwoKSB7IFxyXG4gICAgaWYoIXRoaXMubW9kYWxDb25maWcuaGVhZGluZ1RleHQpIHRoaXMubW9kYWxDb25maWcuaGVhZGluZ1RleHQgPSAnV2VsY29tZSB0byBuZy1tb2RhbC1mbGV4aWJsZSc7XHJcbiAgICBpZighdGhpcy5tb2RhbENvbmZpZy5jb250ZW50VGV4dCkgdGhpcy5tb2RhbENvbmZpZy5jb250ZW50VGV4dCA9ICdQbGVhc2UgYXNzaWduIHlvdXIgY29udGVudHMgdG8gXFwnY29udGVudFRleHRcXCcgcHJvcGVydHkgb2YgbW9kYWxDb25maWcgYW5kIHlvdSBhcmUgZ29vZCB0byBnbyEnO1xyXG4gICAgaWYoIXRoaXMubW9kYWxDb25maWcuY2xvc2VCdG5Db250ZW50KSB0aGlzLm1vZGFsQ29uZmlnLmNsb3NlQnRuQ29udGVudCA9ICdYJztcclxuICAgIGlmKHR5cGVvZih0aGlzLm1vZGFsQ29uZmlnLnNob3dDbG9zZUJ0bikgPT09ICd1bmRlZmluZWQnKSB0aGlzLm1vZGFsQ29uZmlnLnNob3dDbG9zZUJ0biA9IHRydWU7ICBcclxuICAgIGlmKHR5cGVvZih0aGlzLm1vZGFsQ29uZmlnLnNob3dBbmltYXRpb24pID09PSAndW5kZWZpbmVkJykgdGhpcy5tb2RhbENvbmZpZy5zaG93QW5pbWF0aW9uID0gdHJ1ZTsgIFxyXG4gICAgaWYodHlwZW9mKHRoaXMubW9kYWxDb25maWcuY2xpY2tPdXRzaWRlVG9DbG9zZSkgPT09ICd1bmRlZmluZWQnKSB0aGlzLm1vZGFsQ29uZmlnLmNsaWNrT3V0c2lkZVRvQ2xvc2UgPSB0cnVlO1xyXG4gICAgdGhpcy5tb2RhbENvbmZpZy5pc09wZW4gPSB0cnVlOyBcclxuICB9XHJcblxyXG4gIGNsb3NlTW9kYWwoKSB7XHJcbiAgICBpZiAodGhpcy5tb2RhbENvbmZpZy5zaG93QW5pbWF0aW9uKSB0aGlzLmZhZGVPdXRBbmltYXRpb25DbGFzcyA9ICdhbmltYXRlLW91dCc7XHJcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcclxuICAgICAgdGhpcy5tb2RhbENvbmZpZy5pc09wZW4gPSBmYWxzZTtcclxuICAgICAgdGhpcy5mYWRlT3V0QW5pbWF0aW9uQ2xhc3MgPSAnJztcclxuICAgIH0sIHRoaXMubW9kYWxDb25maWcuc2hvd0FuaW1hdGlvbiA/IDUwMCA6IDApO1xyXG4gICAgdGhpcy5tb2RhbENsb3NlZC5lbWl0KCk7XHJcbiAgfVxyXG5cclxuICBoYW5kbGVLZXlib2FyZEV2ZW50KGV2ZW50OiBLZXlib2FyZEV2ZW50KSB7XHJcbiAgICBpZiAodGhpcy5tb2RhbENvbmZpZy5lc2NhcGVUb0Nsb3NlICYmIGV2ZW50LmtleSA9PT0gJ0VzY2FwZScpIHRoaXMuY2xvc2VNb2RhbCgpO1xyXG4gIH1cclxufVxyXG4iXX0=