bea-shell
Version:
An angular component for a configurable application shell, consisting of a topbar and sidebar
75 lines • 8.58 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';
var SidebarComponent = /** @class */ (function () {
function SidebarComponent(beaShell) {
this.beaShell = beaShell;
}
/**
* @return {?}
*/
SidebarComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.beaShell.onOptionsChange
.subscribe(function (options) {
_this.options = options.sidebar;
_this.withTopbar = !options.topbar.disabled;
});
this.expanded = this.beaShell.onSidebarToggle;
};
/**
* @param {?} expand
* @return {?}
*/
SidebarComponent.prototype.onMenuButtonClick = /**
* @param {?} expand
* @return {?}
*/
function (expand) {
this.beaShell.onSidebarToggle.next(expand);
};
/**
* @return {?}
*/
SidebarComponent.prototype.close = /**
* @return {?}
*/
function () {
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 = function () { return [
{ type: BeaShellService }
]; };
return SidebarComponent;
}());
export { SidebarComponent };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9iZWEtc2hlbGwvIiwic291cmNlcyI6WyJsaWIvc2lkZWJhci9zaWRlYmFyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQ0EsT0FBTyxFQUFFLFNBQVMsRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUVsRCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFLL0Q7SUFhRSwwQkFBb0IsUUFBeUI7UUFBekIsYUFBUSxHQUFSLFFBQVEsQ0FBaUI7SUFBSSxDQUFDOzs7O0lBRWxELG1DQUFROzs7SUFBUjtRQUFBLGlCQU9DO1FBTkMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxlQUFlO2FBQzFCLFNBQVMsQ0FBQyxVQUFDLE9BQXdCO1lBQ2xDLEtBQUksQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFDLE9BQU8sQ0FBQztZQUMvQixLQUFJLENBQUMsVUFBVSxHQUFHLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUM7UUFDN0MsQ0FBQyxDQUFDLENBQUM7UUFDTCxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsZUFBZSxDQUFDO0lBQ2hELENBQUM7Ozs7O0lBRUQsNENBQWlCOzs7O0lBQWpCLFVBQWtCLE1BQU07UUFDdEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQzdDLENBQUM7Ozs7SUFFRCxnQ0FBSzs7O0lBQUw7UUFDRSxJQUFJLENBQUMsUUFBUSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDNUMsQ0FBQzs7Z0JBOUJGLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsU0FBUztvQkFDbkIsOHZDQUF1Qzs7aUJBRXhDOzs7O2dCQVRRLGVBQWU7O0lBb0N4Qix1QkFBQztDQUFBLEFBL0JELElBK0JDO1NBMUJZLGdCQUFnQjs7O0lBRTNCLG1DQUF3Qjs7SUFDeEIsb0NBQTJCOztJQUMzQixzQ0FBb0I7O0lBRXBCLG9DQUFtQjs7Ozs7SUFFUCxvQ0FBaUMiLCJzb3VyY2VzQ29udGVudCI6WyJcclxuaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbmltcG9ydCB7IEJlYVNoZWxsU2VydmljZSB9IGZyb20gJ0BiZWEtc2hlbGwvYmVhLXNoZWxsLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyBCZWFTaGVsbE9wdGlvbnMsIE1lbnVJdGVtLCBTaWRlYmFyT3B0aW9ucyB9IGZyb20gJ0BiZWEtc2hlbGwvY29tbW9uL29iamVjdHMnO1xyXG5cclxuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzaWRlYmFyJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vc2lkZWJhci5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vc2lkZWJhci5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBTaWRlYmFyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuXHJcbiAgb3B0aW9uczogU2lkZWJhck9wdGlvbnM7XHJcbiAgZXhwYW5kZWQ6IFN1YmplY3Q8Ym9vbGVhbj47XHJcbiAgd2l0aFRvcGJhcjogYm9vbGVhbjtcclxuXHJcbiAgc2VsZWN0ZWQ6IE1lbnVJdGVtO1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGJlYVNoZWxsOiBCZWFTaGVsbFNlcnZpY2UpIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIHRoaXMuYmVhU2hlbGwub25PcHRpb25zQ2hhbmdlXHJcbiAgICAgIC5zdWJzY3JpYmUoKG9wdGlvbnM6IEJlYVNoZWxsT3B0aW9ucykgPT4ge1xyXG4gICAgICAgIHRoaXMub3B0aW9ucyA9IG9wdGlvbnMuc2lkZWJhcjtcclxuICAgICAgICB0aGlzLndpdGhUb3BiYXIgPSAhb3B0aW9ucy50b3BiYXIuZGlzYWJsZWQ7XHJcbiAgICAgIH0pO1xyXG4gICAgdGhpcy5leHBhbmRlZCA9IHRoaXMuYmVhU2hlbGwub25TaWRlYmFyVG9nZ2xlO1xyXG4gIH1cclxuXHJcbiAgb25NZW51QnV0dG9uQ2xpY2soZXhwYW5kKSB7XHJcbiAgICB0aGlzLmJlYVNoZWxsLm9uU2lkZWJhclRvZ2dsZS5uZXh0KGV4cGFuZCk7XHJcbiAgfVxyXG5cclxuICBjbG9zZSgpIHtcclxuICAgIHRoaXMuYmVhU2hlbGwub25TaWRlYmFyVG9nZ2xlLm5leHQoZmFsc2UpO1xyXG4gIH1cclxufVxyXG4iXX0=