ngx-aside
Version:
Angular Aside Component. Simple Angular Sidebar Panel.
2 lines • 5.86 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/animations"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-aside",["exports","@angular/core","@angular/animations","@angular/common"],e):e(t["ngx-aside"]={},t.ng.core,t.ng.animations,t.ng.common)}(this,function(t,n,e,o){"use strict";var i=function(){function t(){this.showStatus=!0}return t.decorators=[{type:n.Component,args:[{selector:"ngx-aside-overlay",template:'\n <div class="overlay" [@show]="showStatus"></div>',styles:[".overlay {\n z-index: 1;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: currentColor;\n opacity: .6;\n }"],animations:[e.trigger("show",[e.transition("void => *",[e.style([{opacity:0}]),e.animate(100,e.style([{opacity:.6}]))])])]}]}],t.ctorParameters=function(){return[]},t}(),s=e.trigger("slide",[e.transition("void => left",[e.style({opacity:.6,transform:"translate3d(-100%,0,0)"}),e.animate(".2s cubic-bezier(0.215, 0.610, 0.355, 1)",e.style({opacity:1,transform:"translateZ(0)"}))]),e.transition("void => right",[e.style({opacity:.6,transform:"translate3d(100%,0,0)"}),e.animate(".2s cubic-bezier(0.215, 0.610, 0.355, 1)",e.style({opacity:1,transform:"translateZ(0)"}))]),e.transition("left => void",[e.animate(".2s cubic-bezier(0.165, 0.84, 0.44, 1)",e.style({opacity:0,transform:"translate3d(-50%,0,0)"}))]),e.transition("right => void",[e.animate(".2s cubic-bezier(0.165, 0.84, 0.44, 1)",e.style({opacity:0,transform:"translate3d(50%,0,0)"}))])]),r=function(){function t(t,e){this._resolver=t,this.vcRef=e,this.cancel=new n.EventEmitter,this.submit=new n.EventEmitter,this.position="right",this.showOverlay=!0,this.closeOnEscape=!0,this.showDefaultFooter=!0,this.showDefaultHeader=!0,this.title="",this.cancelButtonTitle="Cancel",this.submitButtonTitle="Submit",this.visibleStatus=!1,this.rootViewContainerRef=e}return t.prototype.hideAside=function(t){0<this.cancel.observers.length?this.cancel.emit(t):this.hide()},t.prototype.submitAside=function(t){0<this.cancel.observers.length?this.submit.emit():this.hide()},t.prototype.handleEscape=function(t){return this.closeOnEscape&&(t.preventDefault(),this.hideAside(t)),!1},t.prototype.hide=function(){this.visibleStatus=!1,this.backdrop&&(this.backdrop.destroy(),this.backdrop=void 0)},t.prototype.show=function(){this.visibleStatus=!0,this.addOverlay()},t.prototype.addOverlay=function(){if(!this.backdrop&&this.showOverlay){var t=this._resolver.resolveComponentFactory(i);this.backdrop=this.rootViewContainerRef.createComponent(t,0)}},t.decorators=[{type:n.Component,args:[{selector:"ngx-aside",template:'<aside [@slide]="position" *ngIf="visibleStatus" [className]="position">\n\n \x3c!-- Custom Header --\x3e\n <ng-content *ngIf="!showDefaultHeader" class="aside-title-huj" select="header">\n\n\n </ng-content>\n \x3c!-- End Custom Header --\x3e\n\n\n \x3c!-- Default Header --\x3e\n <header *ngIf="showDefaultHeader">\n <div class="aside-title">\n {{title}}\n </div>\n\n <div (click)="hideAside($event)" class="aside-button-close">\n ×\n </div>\n\n </header>\n \x3c!-- End Custom Header --\x3e\n\n\n <section>\n <div class="aside-container">\n <ng-content></ng-content>\n </div>\n </section>\n\n \x3c!-- Custom Footer --\x3e\n <ng-content *ngIf="!showDefaultFooter" select="footer"></ng-content>\n \x3c!-- End Custom Footer --\x3e\n\n \x3c!-- Default Footer --\x3e\n <footer *ngIf="showDefaultFooter">\n\n <button (click)="hideAside($event)" type="button" class="btn btn-secondary btn-cancel">\n {{cancelButtonTitle}}</button>\n\n <button (click)="submitAside($event)" type="button" class="btn btn-primary btn-submit">{{submitButtonTitle}}</button>\n\n\n </footer>\n \x3c!--End Default Footer --\x3e\n\n</aside>',styles:[":host *{box-sizing:border-box}:host aside.right{right:0;top:0;bottom:0}:host aside.left{left:0;top:0;bottom:0}aside{will-change:opacity;display:flex;flex-direction:column;align-items:stretch;position:fixed;width:auto;max-width:50%;background-color:#fff;z-index:2;box-shadow:-6px 3px 11px 0 rgba(0,0,0,.23);padding:0 16px;height:100vh}section{overflow:auto;flex-grow:1}header{font-size:20px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:64px;flex-shrink:0}header .aside-button-close{width:20px;text-align:center;opacity:.8}header .aside-button-close:hover{cursor:pointer;opacity:1}footer{flex-shrink:0;border-top:1px solid #e5e5e5;display:flex;align-items:flex-start;padding:16px 0}footer button{margin-right:6px}.left footer{justify-content:flex-end}.right footer{justify-content:flex-start}:host.left aside{box-shadow:6px -1px 11px 0 rgba(0,0,0,.23)}:host.left.footer{justify-content:flex-end}"],animations:[s]}]}],t.ctorParameters=function(){return[{type:n.ComponentFactoryResolver},{type:n.ViewContainerRef}]},t.propDecorators={cancel:[{type:n.Output}],submit:[{type:n.Output}],position:[{type:n.Input}],showOverlay:[{type:n.Input}],closeOnEscape:[{type:n.Input}],showDefaultFooter:[{type:n.Input}],showDefaultHeader:[{type:n.Input}],title:[{type:n.Input}],cancelButtonTitle:[{type:n.Input}],submitButtonTitle:[{type:n.Input}],handleEscape:[{type:n.HostListener,args:["document:keydown.esc",["$event"]]}]},t}(),a=function(){function t(){}return t.forRoot=function(){return{ngModule:t,providers:[]}},t.decorators=[{type:n.NgModule,args:[{imports:[o.CommonModule],declarations:[r,i],providers:[],entryComponents:[r,i],exports:[r,i]}]}],t}();t.NgxAsideModule=a,t.ɵb=s,t.ɵa=r,t.ɵc=i,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-aside.umd.min.js.map