ng-modal-flexible/ng-modal-flexible.metadata.json

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

{"__symbolic":"module","version":4,"metadata":{"NgModalFlexibleComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"ng-modal-flexible","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":8,"character":17},"member":"None"},"host":{"(document:keydown)":"handleKeyboardEvent($event)","$quoted$":["(document:keydown)"]},"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>","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)}}"]}]}],"members":{"modalConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"buttonOneClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"buttonTwoClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":17,"character":3}}]}],"buttonThreeClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":18,"character":3}}]}],"modalClosed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"openModal":[{"__symbolic":"method"}],"closeModal":[{"__symbolic":"method"}],"handleKeyboardEvent":[{"__symbolic":"method"}]}},"NgModalFlexibleModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NgModalFlexibleComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":12}],"exports":[{"__symbolic":"reference","name":"NgModalFlexibleComponent"}]}]}],"members":{}}},"origins":{"NgModalFlexibleComponent":"./lib/ng-modal-flexible.component","NgModalFlexibleModule":"./lib/ng-modal-flexible.module"},"importAs":"ng-modal-flexible"}