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