bea-shell
Version:
An angular component for a configurable application shell, consisting of a topbar and sidebar
65 lines • 8.11 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component } from '@angular/core';
import { BeaShellService } from '@bea-shell/bea-shell.service';
export class SidebarComponent {
/**
* @param {?} beaShell
*/
constructor(beaShell) {
this.beaShell = beaShell;
}
/**
* @return {?}
*/
ngOnInit() {
this.beaShell.onOptionsChange
.subscribe((options) => {
this.options = options.sidebar;
this.withTopbar = !options.topbar.disabled;
});
this.expanded = this.beaShell.onSidebarToggle;
}
/**
* @param {?} expand
* @return {?}
*/
onMenuButtonClick(expand) {
this.beaShell.onSidebarToggle.next(expand);
}
/**
* @return {?}
*/
close() {
this.beaShell.onSidebarToggle.next(false);
}
}
SidebarComponent.decorators = [
{ type: 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}}"]
}] }
];
/** @nocollapse */
SidebarComponent.ctorParameters = () => [
{ type: BeaShellService }
];
if (false) {
/** @type {?} */
SidebarComponent.prototype.options;
/** @type {?} */
SidebarComponent.prototype.expanded;
/** @type {?} */
SidebarComponent.prototype.withTopbar;
/** @type {?} */
SidebarComponent.prototype.selected;
/**
* @type {?}
* @private
*/
SidebarComponent.prototype.beaShell;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9iZWEtc2hlbGwvIiwic291cmNlcyI6WyJsaWIvc2lkZWJhci9zaWRlYmFyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQ0EsT0FBTyxFQUFFLFNBQVMsRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUVsRCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFVL0QsTUFBTSxPQUFPLGdCQUFnQjs7OztJQVEzQixZQUFvQixRQUF5QjtRQUF6QixhQUFRLEdBQVIsUUFBUSxDQUFpQjtJQUFJLENBQUM7Ozs7SUFFbEQsUUFBUTtRQUNOLElBQUksQ0FBQyxRQUFRLENBQUMsZUFBZTthQUMxQixTQUFTLENBQUMsQ0FBQyxPQUF3QixFQUFFLEVBQUU7WUFDdEMsSUFBSSxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUMsT0FBTyxDQUFDO1lBQy9CLElBQUksQ0FBQyxVQUFVLEdBQUcsQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQztRQUM3QyxDQUFDLENBQUMsQ0FBQztRQUNMLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxlQUFlLENBQUM7SUFDaEQsQ0FBQzs7Ozs7SUFFRCxpQkFBaUIsQ0FBQyxNQUFNO1FBQ3RCLElBQUksQ0FBQyxRQUFRLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUM3QyxDQUFDOzs7O0lBRUQsS0FBSztRQUNILElBQUksQ0FBQyxRQUFRLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM1QyxDQUFDOzs7WUE5QkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxTQUFTO2dCQUNuQiw4dkNBQXVDOzthQUV4Qzs7OztZQVRRLGVBQWU7Ozs7SUFZdEIsbUNBQXdCOztJQUN4QixvQ0FBMkI7O0lBQzNCLHNDQUFvQjs7SUFFcEIsb0NBQW1COzs7OztJQUVQLG9DQUFpQyIsInNvdXJjZXNDb250ZW50IjpbIlxyXG5pbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuaW1wb3J0IHsgQmVhU2hlbGxTZXJ2aWNlIH0gZnJvbSAnQGJlYS1zaGVsbC9iZWEtc2hlbGwuc2VydmljZSc7XHJcbmltcG9ydCB7IEJlYVNoZWxsT3B0aW9ucywgTWVudUl0ZW0sIFNpZGViYXJPcHRpb25zIH0gZnJvbSAnQGJlYS1zaGVsbC9jb21tb24vb2JqZWN0cyc7XHJcblxyXG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3NpZGViYXInLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9zaWRlYmFyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9zaWRlYmFyLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIFNpZGViYXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG5cclxuICBvcHRpb25zOiBTaWRlYmFyT3B0aW9ucztcclxuICBleHBhbmRlZDogU3ViamVjdDxib29sZWFuPjtcclxuICB3aXRoVG9wYmFyOiBib29sZWFuO1xyXG5cclxuICBzZWxlY3RlZDogTWVudUl0ZW07XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgYmVhU2hlbGw6IEJlYVNoZWxsU2VydmljZSkgeyB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgdGhpcy5iZWFTaGVsbC5vbk9wdGlvbnNDaGFuZ2VcclxuICAgICAgLnN1YnNjcmliZSgob3B0aW9uczogQmVhU2hlbGxPcHRpb25zKSA9PiB7XHJcbiAgICAgICAgdGhpcy5vcHRpb25zID0gb3B0aW9ucy5zaWRlYmFyO1xyXG4gICAgICAgIHRoaXMud2l0aFRvcGJhciA9ICFvcHRpb25zLnRvcGJhci5kaXNhYmxlZDtcclxuICAgICAgfSk7XHJcbiAgICB0aGlzLmV4cGFuZGVkID0gdGhpcy5iZWFTaGVsbC5vblNpZGViYXJUb2dnbGU7XHJcbiAgfVxyXG5cclxuICBvbk1lbnVCdXR0b25DbGljayhleHBhbmQpIHtcclxuICAgIHRoaXMuYmVhU2hlbGwub25TaWRlYmFyVG9nZ2xlLm5leHQoZXhwYW5kKTtcclxuICB9XHJcblxyXG4gIGNsb3NlKCkge1xyXG4gICAgdGhpcy5iZWFTaGVsbC5vblNpZGViYXJUb2dnbGUubmV4dChmYWxzZSk7XHJcbiAgfVxyXG59XHJcbiJdfQ==