bea-shell
Version:
An angular component for a configurable application shell, consisting of a topbar and sidebar
2 lines • 17.8 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("rxjs"),require("@angular/common"),require("rxjs/operators"),require("@bea-shell/bea-shell.service"),require("@angular/core"),require("@angular/router")):"function"==typeof define&&define.amd?define("bea-shell",["exports","rxjs","@angular/common","rxjs/operators","@bea-shell/bea-shell.service","@angular/core","@angular/router"],t):t(e["bea-shell"]={},e.rxjs,e.ng.common,e.rxjs.operators,e.BeaShellService,e.ng.core,e.ng.router)}(this,function(e,t,n,o,i,r,a){"use strict";var s=function(){function e(){this.onMenuItemClick=new t.BehaviorSubject(null),this.onMenuItemDoubleClick=new t.BehaviorSubject(null),this.onMenuButtonClick=new t.BehaviorSubject(!1),this.onSidebarToggle=new t.BehaviorSubject(!1),this.onOptionsChange=new t.BehaviorSubject(null)}return e.prototype.setOptions=function(e){this.onOptionsChange.next(e)},e.prototype.expandSidebar=function(){this.onSidebarToggle.next(!0)},e.prototype.retractSidebar=function(){this.onSidebarToggle.next(!1)},e.decorators=[{type:r.Injectable,args:[{providedIn:"root"}]}],e.ctorParameters=function(){return[]},e.ngInjectableDef=r.defineInjectable({factory:function(){return new e},token:e,providedIn:"root"}),e}(),p=function(){function e(e){this._beaShell=e,this.beaShell=e}return Object.defineProperty(e.prototype,"options",{get:function(){return this._options},set:function(e){this._options=e},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.ngDoCheck=function(){this.withTopbar=!this.options.topbar.disabled,this.withSidebar=!this.options.sidebar.disabled,this.beaShell.setOptions(this.options)},e.decorators=[{type:r.Component,args:[{selector:"bea-shell",template:'<topbar *ngIf="!options?.topbar || !options?.topbar?.disabled"></topbar>\r\n<sidebar *ngIf="!options?.sidebar || !options?.sidebar?.disabled"></sidebar>\r\n<content [class.withTopbar]="withTopbar" [class.withSidebar]="withSidebar" [class.alwaysExpandable]="options?.sidebar?.alwaysExpandable"\r\n [ngClass]="options?.sidebar?.placement ? options.sidebar.placement : \'left\'">\r\n <ng-content></ng-content>\r\n</content>',styles:[".topbar{height:54px;box-shadow:rgba(0,0,0,.2) 0 3px 5px -1px,rgba(0,0,0,.14) 0 6px 10px 0,transparent 0 1px 18px 0;background-color:#f0f0f0}.sidebar{width:300px;box-shadow:rgba(0,0,0,.2) 0 3px 5px -1px,rgba(0,0,0,.14) 0 6px 10px 0,transparent 0 1px 18px 0;background-color:#f0f0f0}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}content{box-sizing:border-box;position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1}content.withTopbar{top:54px}content.withSidebar:not(.alwaysExpandable).left{left:300px}content.withSidebar:not(.alwaysExpandable).right{right:300px}@media screen and (max-width:768px){content.withSidebar.left,content.withSidebar:not(.alwaysExpandable).left{left:0}content.withSidebar.right,content.withSidebar:not(.alwaysExpandable).right{right:0}}"]}]}],e.ctorParameters=function(){return[{type:i.BeaShellService}]},e.propDecorators={options:[{type:r.Input,args:["options"]}]},e}(),l=function(){function e(e){this.beaShell=e}return e.prototype.ngOnInit=function(){this.options=this.beaShell.onOptionsChange.pipe(o.map(function(e){return e})),this.expanded=this.beaShell.onSidebarToggle},e.prototype.onMenuButtonClick=function(e){this.beaShell.onSidebarToggle.next(e)},e.decorators=[{type:r.Component,args:[{selector:"topbar",template:'<div *ngIf="(options | async).topbar as _topbar">\r\n <div class="topbar" *ngIf="!_topbar.disabled">\r\n <div class="topbar-container" role="navigation">\r\n <div class="left">\r\n <topbar-item *ngFor="let menuItem of _topbar.left" [menuItem]="menuItem"></topbar-item>\r\n </div>\r\n <div class="right">\r\n <topbar-item *ngFor="let menuItem of _topbar.right" [menuItem]="menuItem"></topbar-item>\r\n </div>\r\n <menu-icon *ngIf="(options | async).sidebar as _sidebar" [class.alwaysExpandable]="_sidebar.alwaysExpandable && !_sidebar.disabled"\r\n [active]="expanded | async" (onStateChange)="onMenuButtonClick($event)"></menu-icon>\r\n </div>\r\n </div>\r\n</div>',styles:[".topbar{height:54px;box-shadow:rgba(0,0,0,.2) 0 3px 5px -1px,rgba(0,0,0,.14) 0 6px 10px 0,transparent 0 1px 18px 0;background-color:#f0f0f0;box-sizing:border-box;position:fixed;left:0;right:0}.sidebar{width:300px;box-shadow:rgba(0,0,0,.2) 0 3px 5px -1px,rgba(0,0,0,.14) 0 6px 10px 0,transparent 0 1px 18px 0;background-color:#f0f0f0}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.topbar-container{box-sizing:border-box;display:table;padding:8px 16px;width:100%;max-width:100%;display:flex;flex-direction:row}.left{white-space:nowrap;overflow-x:auto;overflow-y:hidden;flex:1 1 auto}.right{white-space:nowrap;overflow-x:auto;overflow-y:hidden;flex:1 1 auto;text-align:right}menu-icon{display:inline-block;height:45px}menu-icon:not(.alwaysExpandable){display:none}@media screen and (max-width:768px){.item:not(.logo){display:none}menu-icon,menu-icon:not(.alwaysExpandable){display:inline-block}}"]}]}],e.ctorParameters=function(){return[{type:i.BeaShellService}]},e}(),c=function(){function e(e){this.beaShell=e}return e.prototype.ngOnInit=function(){var t=this;this.beaShell.onOptionsChange.subscribe(function(e){t.options=e.sidebar,t.withTopbar=!e.topbar.disabled}),this.expanded=this.beaShell.onSidebarToggle},e.prototype.onMenuButtonClick=function(e){this.beaShell.onSidebarToggle.next(e)},e.prototype.close=function(){this.beaShell.onSidebarToggle.next(!1)},e.decorators=[{type:r.Component,args:[{selector:"sidebar",template:'<div *ngIf="options" class="sidebar" [ngClass]="options.placement ? options.placement : \'left\'"\r\n [class.alwaysExpandable]="options.alwaysExpandable" [class.expanded]="(expanded | async)" [class.withTopbar]="withTopbar">\r\n\r\n <div class="header sidebar-content">\r\n\r\n <div *ngFor="let menuItem of options.header">\r\n <sidebar-item [options]="options" [menuItem]="menuItem"></sidebar-item>\r\n </div>\r\n\r\n <div class="header-close-button">\r\n <menu-icon [active]="true" (onStateChange)="onMenuButtonClick($event)"></menu-icon>\r\n </div>\r\n </div>\r\n\r\n <div class="sidebar-content-container">\r\n <div class="sidebar-content" *ngFor="let menuItem of options.menuItems">\r\n <sidebar-item [options]="options" [menuItem]="menuItem"></sidebar-item>\r\n </div>\r\n </div>\r\n\r\n <div class="footer sidebar-content" *ngIf="options.footer">\r\n <div *ngFor="let menuItem of options.footer">\r\n <sidebar-item [options]="options" [menuItem]="menuItem"></sidebar-item>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class="closing-box" [class.expanded]="(expanded | async)" [class.alwaysExpandable]="options.alwaysExpandable"\r\n (click)="close()"></div>',styles:['.topbar{height:54px;box-shadow:rgba(0,0,0,.2) 0 3px 5px -1px,rgba(0,0,0,.14) 0 6px 10px 0,transparent 0 1px 18px 0;background-color:#f0f0f0}.sidebar{width:300px;box-shadow:rgba(0,0,0,.2) 0 3px 5px -1px,rgba(0,0,0,.14) 0 6px 10px 0,transparent 0 1px 18px 0;background-color:#f0f0f0;position:fixed;top:0;bottom:0;transition:left .4s ease-in-out,right .4s ease-in-out;z-index:2;overflow:auto;display:flex;flex-direction:column}.sidebar .footer .footer-container a,.sidebar .header .header-title a{color:rgba(0,0,0,.7);font-family:Roboto,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:15px}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sidebar.withTopbar{margin-top:54px}.sidebar.left{left:0}.sidebar.right{right:0}.sidebar .header{display:table;padding-top:8px;border-bottom:1px solid rgba(0,0,0,.1)}.sidebar .header .header-title{vertical-align:top;display:table-cell;white-space:nowrap}.sidebar .header .header-title a{display:block;text-decoration:none;padding:10px 16px}.sidebar .header .header-close-button{vertical-align:top;display:none;text-align:right;white-space:nowrap}.sidebar .sidebar-content-container{flex-grow:1}.sidebar .sidebar-content{box-sizing:border-box;margin:0;width:100%}.sidebar .footer{border-top:1px solid rgba(0,0,0,.1)}.sidebar .footer .footer-container{padding:8px 16px}.sidebar .footer .footer-container a{display:block;text-decoration:none;padding:10px 16px}.closing-box{position:absolute;top:0;left:0;right:0;bottom:0;transition:.2s;background-color:rgba(0,0,0,.3);display:none;z-index:3}.alwaysExpandable.sidebar{margin-top:0;z-index:4}.alwaysExpandable.sidebar.withTopbar{margin-top:0}.alwaysExpandable.sidebar.left:not(.expanded){left:-310px}.alwaysExpandable.sidebar.left.expanded{left:0}.alwaysExpandable.sidebar.right:not(.expanded){right:-310px}.alwaysExpandable.sidebar.right.expanded{right:0}.alwaysExpandable.sidebar .header .header-close-button{display:table-cell}.alwaysExpandable.closing-box.expanded{display:block}@media screen and (max-width:768px){.sidebar{margin-top:0;z-index:4}.sidebar.withTopbar{margin-top:0}.sidebar.left:not(.expanded){left:-310px}.sidebar.left.expanded{left:0}.sidebar.right:not(.expanded){right:-310px}.sidebar.right.expanded{right:0}.sidebar .header .header-close-button{display:table-cell}.closing-box.expanded{display:block}}']}]}],e.ctorParameters=function(){return[{type:i.BeaShellService}]},e}(),d=function(){function e(){this.active=!1,this.onStateChange=new r.EventEmitter}return e.prototype.ngOnInit=function(){},e.decorators=[{type:r.Component,args:[{selector:"menu-icon",template:'\r\n<div class="container" [class.active]="active" (click)="onStateChange.emit( !active )">\r\n <div class="bar top"></div>\r\n <div class="bar middle"></div>\r\n <div class="bar bottom"></div>\r\n</div>',styles:[".container{display:inline-block;cursor:pointer;padding:10px 16px 9px}.bar{width:18px;height:3px;background-color:rgba(0,0,0,.6);transition:.4s}.top{margin:0 0 3px}.middle{margin:3px 0}.bottom{margin:3px 0 0}.active .top{-webkit-transform:translateY(6px) rotate(45deg);transform:translateY(6px) rotate(45deg)}.active .middle{opacity:0}.active .bottom{-webkit-transform:translateY(-6px) rotate(-45deg);transform:translateY(-6px) rotate(-45deg)}"]}]}],e.ctorParameters=function(){return[]},e.propDecorators={active:[{type:r.Input}],onStateChange:[{type:r.Output}]},e}(),b=function(){function e(){}return e.prototype.ngOnInit=function(){},e.prototype.select=function(){this.selected=!this.selected},e.decorators=[{type:r.Component,args:[{selector:"sidebar-item",template:'<div class="item-group" *ngIf="options">\r\n <menu-item [barClass]="\'sidebar-item\'" [menuItem]="menuItem" [submenuIcon]="options?.submenuIcon" (click)=select()></menu-item>\r\n <div class="sub-items" *ngIf="menuItem.subitems" [class.selected]="selected">\r\n <div *ngFor="let subItem of menuItem.subitems">\r\n <sidebar-item [options]="options" [menuItem]="subItem"></sidebar-item>\r\n </div>\r\n </div>\r\n</div>',styles:[".topbar{height:54px;box-shadow:rgba(0,0,0,.2) 0 3px 5px -1px,rgba(0,0,0,.14) 0 6px 10px 0,transparent 0 1px 18px 0;background-color:#f0f0f0}.sidebar{width:300px;box-shadow:rgba(0,0,0,.2) 0 3px 5px -1px,rgba(0,0,0,.14) 0 6px 10px 0,transparent 0 1px 18px 0;background-color:#f0f0f0}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.item-group{cursor:pointer}.item-group .sub-items{height:0;overflow-y:hidden}.item-group .sub-items.selected{height:auto;padding-top:5px;padding-bottom:5px}"]}]}],e.ctorParameters=function(){return[]},e.propDecorators={options:[{type:r.Input,args:["options"]}],menuItem:[{type:r.Input,args:["menuItem"]}]},e}(),u=function(){function e(){}return e.prototype.ngOnInit=function(){},e.prototype.select=function(e){console.log(e)},e.decorators=[{type:r.Component,args:[{selector:"topbar-item",template:'<div class="item-group" [ngClass]="menuItem.class">\r\n <div *ngIf="menuItem.html">{{menuItem.html}}</div>\r\n <menu-item [barClass]="\'topbar-item\'" [menuItem]="menuItem" (click)=select(menuItem)></menu-item>\r\n <div class="subitems" *ngIf="menuItem.subitems">\r\n <menu-item *ngFor="let menuItem of menuItem.subitems" [barClass]="\'topbar-subitem\'" [menuItem]="menuItem" (click)=select(menuItem)></menu-item>\r\n </div>\r\n</div>',styles:[".topbar{height:54px;box-shadow:rgba(0,0,0,.2) 0 3px 5px -1px,rgba(0,0,0,.14) 0 6px 10px 0,transparent 0 1px 18px 0;background-color:#f0f0f0}.sidebar{width:300px;box-shadow:rgba(0,0,0,.2) 0 3px 5px -1px,rgba(0,0,0,.14) 0 6px 10px 0,transparent 0 1px 18px 0;background-color:#f0f0f0}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.item-group{cursor:pointer;display:inline-block}.item-group .subitems{display:none;position:fixed;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2)}.item-group .subitems .item,.item-group:hover .subitems{display:block}"]}]}],e.ctorParameters=function(){return[]},e.propDecorators={menuItem:[{type:r.Input,args:["menuItem"]}]},e}(),m=function(){function e(e){this.beaShell=e}return e.prototype.ngOnInit=function(){var t=this;this.beaShell.onOptionsChange.subscribe(function(e){t.options=e,t.withTopbar=!e.topbar.disabled})},e.decorators=[{type:r.Component,args:[{selector:"content",template:"<ng-content></ng-content>"}]}],e.ctorParameters=function(){return[{type:i.BeaShellService}]},e}(),g=function(){function e(e){this._router=e}return e.prototype.ngOnInit=function(){this.menuItem.icon&&(this.placement="right"==this.menuItem.iconPlacement?"right":"left")},e.prototype.click=function(e){e.href&&window.open(e.href,e.newTab?"_blank":"_self"),e.link&&this._router.navigate([e.link])},e.decorators=[{type:r.Component,args:[{selector:"menu-item",template:'\x3c!-- Duplicated to avoid empty href which occurs when setting routerLink without a value --\x3e\r\n\r\n<div class="item" [ngClass]="barClass" (click)="selected = !selected" [class.linked]="menuItem.href || menuItem.link || menuItem.subitems">\r\n <div *ngIf="menuItem.image" class="item-content item-image">\r\n <img [src]="menuItem.image">\r\n </div>\r\n <div class="item-content item-title">\r\n <a class="noselect" (click)="click(menuItem)">\r\n <i *ngIf="placement == \'left\'" class="item-icon {{menuItem.icon}}"></i>\r\n {{menuItem.title}}\r\n <i *ngIf="placement == \'right\'" class="item-icon {{menuItem.icon}}"></i>\r\n </a>\r\n </div>\r\n <div class="item-content item-toggle" *ngIf="menuItem.subitems && !submenuIcon?.disabled">\r\n <span class="{{submenuIcon?.customClass}}" [class.selected]="selected" [class.rotate]="submenuIcon?.rotate ? submenuIcon.rotate : true"\r\n [innerHTML]="submenuIcon ? submenuIcon.html : \'▼\'">\r\n </span>\r\n </div>\r\n</div>',styles:['.topbar{height:54px;box-shadow:rgba(0,0,0,.2) 0 3px 5px -1px,rgba(0,0,0,.14) 0 6px 10px 0,transparent 0 1px 18px 0;background-color:#f0f0f0}.sidebar{width:300px;box-shadow:rgba(0,0,0,.2) 0 3px 5px -1px,rgba(0,0,0,.14) 0 6px 10px 0,transparent 0 1px 18px 0;background-color:#f0f0f0}.item a,.sidebar-item .item-title a{color:rgba(0,0,0,.7);font-family:Roboto,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:15px}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.topbar-item.item .item-toggle,.topbar-subitem .item-toggle{display:none}.topbar-item.item a,.topbar-subitem a{display:block;text-align:center;padding:10px 16px}.topbar-item.item .item-icon,.topbar-subitem .item-icon{padding:0 5px}.sidebar-item .item{width:100%}.sidebar-item .item-title a{padding:10px 32px;font-size:15px;text-decoration:none;display:block}.sidebar-item .item-icon{padding:0 5px}.sidebar-item .item-toggle{padding:10px 16px}.sidebar-item .item-toggle span{display:block;color:rgba(0,0,0,.6);transition:.3s}.sidebar-item .item-toggle span.selected.rotate{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.item{transition:background-color .3s,color .3s;cursor:default}.item .item-content{display:table-cell;vertical-align:top;box-sizing:border-box;margin:0;width:100%;height:auto}.item .item-image img{max-height:35px}.item.linked{cursor:pointer}.item.linked:hover{color:rgba(255,255,255,.9);background-color:rgba(0,0,0,.3);border-radius:3px}.item.linked:hover .item-title a,.item.linked:hover .item-toggle span{color:rgba(255,255,255,.9)}.item a{display:inline-block;text-decoration:none;transition:.2s}']}]}],e.ctorParameters=function(){return[{type:a.Router}]},e.propDecorators={menuItem:[{type:r.Input,args:["menuItem"]}],submenuIcon:[{type:r.Input,args:["submenuIcon"]}],barClass:[{type:r.Input,args:["barClass"]}]},e}(),x=function(){function e(){}return e.decorators=[{type:r.NgModule,args:[{imports:[n.CommonModule,a.RouterModule],declarations:[p,l,c,d,b,u,m,g],exports:[p],providers:[i.BeaShellService]}]}],e}(),h={None:0,Mobile:1,Tablet:2,Laptop:3,Monitor:4,Television:5};h[h.None]="None",h[h.Mobile]="Mobile",h[h.Tablet]="Tablet",h[h.Laptop]="Laptop",h[h.Monitor]="Monitor",h[h.Television]="Television";var f=function S(){},y=function C(){this.rotate=!0},v=function T(){},w=function E(){},I=function M(){},k=function O(){this.alwaysExpandable=!1};e.BeaShellService=s,e.BeaShellComponent=p,e.BeaShellModule=x,e.Visibility=h,e.MenuItem=f,e.SubmenuIcon=y,e.MenuItemEvent=v,e.BeaShellOptions=w,e.TopbarOptions=I,e.SidebarOptions=k,e.ɵc=d,e.ɵg=g,e.ɵf=m,e.ɵd=b,e.ɵb=c,e.ɵe=u,e.ɵa=l,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=bea-shell.umd.min.js.map