ng-modal-flexible
Version:
> A simple, light-weight, highly customizable modal for Angular 2+ projects.
2 lines • 8.1 kB
JavaScript
!function(o,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ng-modal-flexible",["exports","@angular/core","@angular/common"],n):n((o=o||self)["ng-modal-flexible"]={},o.ng.core,o.ng.common)}(this,(function(o,n,e){"use strict";var t=function(){function o(){this.buttonOneClicked=new n.EventEmitter,this.buttonTwoClicked=new n.EventEmitter,this.buttonThreeClicked=new n.EventEmitter,this.modalClosed=new n.EventEmitter,this.fadeOutAnimationClass=""}return o.prototype.ngOnInit=function(){},o.prototype.openModal=function(){this.modalConfig.headingText||(this.modalConfig.headingText="Welcome to ng-modal-flexible"),this.modalConfig.contentText||(this.modalConfig.contentText="Please assign your contents to 'contentText' property of modalConfig and you are good to go!"),this.modalConfig.closeBtnContent||(this.modalConfig.closeBtnContent="X"),void 0===this.modalConfig.showCloseBtn&&(this.modalConfig.showCloseBtn=!0),void 0===this.modalConfig.showAnimation&&(this.modalConfig.showAnimation=!0),void 0===this.modalConfig.clickOutsideToClose&&(this.modalConfig.clickOutsideToClose=!0),this.modalConfig.isOpen=!0},o.prototype.closeModal=function(){var o=this;this.modalConfig.showAnimation&&(this.fadeOutAnimationClass="animate-out"),setTimeout((function(){o.modalConfig.isOpen=!1,o.fadeOutAnimationClass=""}),this.modalConfig.showAnimation?500:0),this.modalClosed.emit()},o.prototype.handleKeyboardEvent=function(o){this.modalConfig.escapeToClose&&"Escape"===o.key&&this.closeModal()},o.decorators=[{type:n.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:n.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)}}"]}]}],o.ctorParameters=function(){return[]},o.propDecorators={modalConfig:[{type:n.Input}],buttonOneClicked:[{type:n.Output}],buttonTwoClicked:[{type:n.Output}],buttonThreeClicked:[{type:n.Output}],modalClosed:[{type:n.Output}]},o}();var a=function(){function o(){}return o.decorators=[{type:n.NgModule,args:[{declarations:[t],imports:[e.CommonModule],exports:[t]}]}],o}();o.NgModalFlexibleComponent=t,o.NgModalFlexibleModule=a,Object.defineProperty(o,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-modal-flexible.umd.min.js.map