bea-shell
Version:
An angular component for a configurable application shell, consisting of a topbar and sidebar
69 lines • 7.58 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input } from '@angular/core';
import { MenuItem, SubmenuIcon } from '@bea-shell/common/objects';
import { Router } from '@angular/router';
export class MenuItemComponent {
/**
* @param {?} _router
*/
constructor(_router) {
this._router = _router;
}
/**
* @return {?}
*/
ngOnInit() {
if (this.menuItem.icon) {
this.placement = this.menuItem.iconPlacement == 'right' ? 'right' : 'left';
}
}
/**
* @param {?} menuItem
* @return {?}
*/
click(menuItem) {
if (menuItem.href) {
window.open(menuItem.href, menuItem.newTab ? '_blank' : '_self');
}
if (menuItem.link) {
this._router.navigate([menuItem.link]);
}
}
}
MenuItemComponent.decorators = [
{ type: Component, args: [{
selector: 'menu-item',
template: "<!-- Duplicated to avoid empty href which occurs when setting routerLink without a value -->\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 : '\u25BC'\">\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}"]
}] }
];
/** @nocollapse */
MenuItemComponent.ctorParameters = () => [
{ type: Router }
];
MenuItemComponent.propDecorators = {
menuItem: [{ type: Input, args: ['menuItem',] }],
submenuIcon: [{ type: Input, args: ['submenuIcon',] }],
barClass: [{ type: Input, args: ['barClass',] }]
};
if (false) {
/** @type {?} */
MenuItemComponent.prototype.menuItem;
/** @type {?} */
MenuItemComponent.prototype.submenuIcon;
/** @type {?} */
MenuItemComponent.prototype.barClass;
/** @type {?} */
MenuItemComponent.prototype.placement;
/** @type {?} */
MenuItemComponent.prototype.selected;
/**
* @type {?}
* @private
*/
MenuItemComponent.prototype._router;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2JlYS1zaGVsbC8iLCJzb3VyY2VzIjpbImxpYi9jb21tb24vbWVudS1pdGVtL21lbnUtaXRlbS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUF3QixNQUFNLGVBQWUsQ0FBQztBQUMvRSxPQUFPLEVBQUUsUUFBUSxFQUFFLFdBQVcsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQU96QyxNQUFNLE9BQU8saUJBQWlCOzs7O0lBUzVCLFlBQW9CLE9BQWU7UUFBZixZQUFPLEdBQVAsT0FBTyxDQUFRO0lBQUksQ0FBQzs7OztJQUV4QyxRQUFRO1FBQ04sSUFBSSxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRTtZQUN0QixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsYUFBYSxJQUFJLE9BQU8sQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUM7U0FDNUU7SUFDSCxDQUFDOzs7OztJQUVELEtBQUssQ0FBQyxRQUFrQjtRQUN0QixJQUFHLFFBQVEsQ0FBQyxJQUFJLEVBQUM7WUFDZixNQUFNLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsUUFBUSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQztTQUNsRTtRQUNELElBQUcsUUFBUSxDQUFDLElBQUksRUFBQztZQUNmLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7U0FDeEM7SUFDSCxDQUFDOzs7WUE3QkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxXQUFXO2dCQUNyQiwraUNBQXlDOzthQUUxQzs7OztZQU5RLE1BQU07Ozt1QkFTWixLQUFLLFNBQUMsVUFBVTswQkFDaEIsS0FBSyxTQUFDLGFBQWE7dUJBQ25CLEtBQUssU0FBQyxVQUFVOzs7O0lBRmpCLHFDQUFzQzs7SUFDdEMsd0NBQStDOztJQUMvQyxxQ0FBb0M7O0lBRXBDLHNDQUFrQjs7SUFDbEIscUNBQWtCOzs7OztJQUVOLG9DQUF1QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgRXZlbnRFbWl0dGVyLCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTWVudUl0ZW0sIFN1Ym1lbnVJY29uIH0gZnJvbSAnQGJlYS1zaGVsbC9jb21tb24vb2JqZWN0cyc7XHJcbmltcG9ydCB7IFJvdXRlciB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ21lbnUtaXRlbScsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL21lbnUtaXRlbS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vbWVudS1pdGVtLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIE1lbnVJdGVtQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuXHJcbiAgQElucHV0KCdtZW51SXRlbScpIG1lbnVJdGVtOiBNZW51SXRlbTtcclxuICBASW5wdXQoJ3N1Ym1lbnVJY29uJykgc3VibWVudUljb246IFN1Ym1lbnVJY29uO1xyXG4gIEBJbnB1dCgnYmFyQ2xhc3MnKSBiYXJDbGFzczogc3RyaW5nO1xyXG5cclxuICBwbGFjZW1lbnQ6IHN0cmluZztcclxuICBzZWxlY3RlZDogYm9vbGVhbjtcclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBfcm91dGVyOiBSb3V0ZXIpIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIGlmICh0aGlzLm1lbnVJdGVtLmljb24pIHtcclxuICAgICAgdGhpcy5wbGFjZW1lbnQgPSB0aGlzLm1lbnVJdGVtLmljb25QbGFjZW1lbnQgPT0gJ3JpZ2h0JyA/ICdyaWdodCcgOiAnbGVmdCc7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBjbGljayhtZW51SXRlbTogTWVudUl0ZW0pe1xyXG4gICAgaWYobWVudUl0ZW0uaHJlZil7XHJcbiAgICAgIHdpbmRvdy5vcGVuKG1lbnVJdGVtLmhyZWYsIG1lbnVJdGVtLm5ld1RhYiA/ICdfYmxhbmsnIDogJ19zZWxmJyk7XHJcbiAgICB9XHJcbiAgICBpZihtZW51SXRlbS5saW5rKXtcclxuICAgICAgdGhpcy5fcm91dGVyLm5hdmlnYXRlKFttZW51SXRlbS5saW5rXSk7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiJdfQ==