fundamental-ngx
Version:
SAP Fiori Fundamentals, implemented in Angular
94 lines • 12.9 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, ContentChildren, HostListener, Input, QueryList } from '@angular/core';
import { ShellbarActionComponent } from './shellbar-action.component';
var ShellbarActionsComponent = /** @class */ (function () {
function ShellbarActionsComponent() {
this.actionsCollapsed = false;
this.showCollapsedProducts = false;
}
/**
* @return {?}
*/
ShellbarActionsComponent.prototype.onResize = /**
* @return {?}
*/
function () {
this.actionsCollapsed = window.innerWidth < 1024;
};
/**
* @return {?}
*/
ShellbarActionsComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.onResize();
};
/**
* @return {?}
*/
ShellbarActionsComponent.prototype.ngAfterContentChecked = /**
* @return {?}
*/
function () {
var _this = this;
this.totalNotifications = 0;
this.shellbarActions.forEach((/**
* @param {?} action
* @return {?}
*/
function (action) {
if (action.notificationCount && typeof action.notificationCount === 'number') {
_this.totalNotifications = _this.totalNotifications + action.notificationCount;
}
}));
};
/**
* @param {?} event
* @return {?}
*/
ShellbarActionsComponent.prototype.toggleCollapsedProducts = /**
* @param {?} event
* @return {?}
*/
function (event) {
event.preventDefault();
event.stopPropagation();
this.showCollapsedProducts = !this.showCollapsedProducts;
};
ShellbarActionsComponent.decorators = [
{ type: Component, args: [{
selector: 'fd-shellbar-actions',
template: "<div class=\"fd-shellbar__actions\">\n <div *ngIf=\"actionsCollapsed && shellbarActions.length\"\n class=\"fd-shellbar__action fd-shellbar__action--collapse\">\n <div class=\"fd-shellbar-collapse\">\n <fd-popover [options]=\"{placement: 'bottom-end'}\"\n [focusTrapped]=\"false\">\n <fd-popover-control>\n <div class=\"fd-shellbar-collapse--control\">\n <button class=\"fd-button--shell sap-icon--overflow\"\n aria-label=\"Collapsed Item Menu\">\n <span *ngIf=\"totalNotifications\"\n class=\"fd-counter fd-counter--notification\">{{totalNotifications}}</span>\n </button>\n </div>\n </fd-popover-control>\n <fd-popover-body>\n <fd-menu>\n <ul fd-menu-list\n *ngIf=\"!showCollapsedProducts\">\n <div *ngFor=\"let action of shellbarActions\"\n class=\"fd-menu__addon-before\">\n <span [ngClass]=\"'sap-icon--' + action.glyph\"></span>\n </div>\n <li fd-menu-item\n *ngFor=\"let action of shellbarActions\"\n (click)=\"action.callback($event)\">\n {{action.label}}\n </li>\n <div *ngIf=\"productSwitcher\"\n class=\"fd-menu__addon-before\">\n <span [ngClass]=\"'sap-icon--grid'\"></span>\n </div>\n <li fd-menu-item\n *ngIf=\"productSwitcher\"\n (click)=\"toggleCollapsedProducts($event);\">\n Product Switcher\n </li>\n </ul>\n <ul fd-menu-list\n *ngIf=\"showCollapsedProducts\">\n <li fd-menu-item\n (click)=\"toggleCollapsedProducts($event)\">\n <span class=\"fd-menu__item sap-icon--nav-back\"></span>\n </li>\n <hr>\n <li fd-menu-item\n *ngFor=\"let product of productSwitcher\"\n (click)=\"product.callback($event)\">\n {{product.title}}\n </li>\n </ul>\n </fd-menu>\n </fd-popover-body>\n </fd-popover>\n </div>\n </div>\n <ng-content></ng-content>\n <ng-content select=\"fd-shellbar-action\"></ng-content>\n <ng-container *ngIf=\"user\">\n <div class=\"fd-shellbar__action fd-shellbar__action--show-always\">\n <div class=\"fd-user-menu\">\n <fd-popover [options]=\"{placement: 'bottom-end'}\"\n [focusTrapped]=\"false\">\n <fd-popover-control>\n <div class=\"fd-user-menu__control\">\n <span *ngIf=\"!user.image\"\n class=\"fd-identifier fd-identifier--xs fd-identifier--circle\"\n [ngClass]=\"(user.colorAccent ? 'fd-has-background-color-accent-' + user.colorAccent : '')\">\n {{user.initials}}\n </span>\n <span *ngIf=\"user.image\"\n class=\"fd-identifier fd-identifier--xs fd-identifier--circle fd-identifier--thumbnail\"\n [ngStyle]=\"{'background-image': 'url(' + user.image + ')'}\">\n </span>\n </div>\n </fd-popover-control>\n <fd-popover-body>\n <fd-menu>\n <ul fd-menu-list>\n <li fd-menu-item\n *ngFor=\"let item of userMenu\"\n (click)=\"item.callback($event)\">\n {{item.text}}\n </li>\n </ul>\n </fd-menu>\n </fd-popover-body>\n </fd-popover>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"productSwitcher\">\n <div class=\"fd-shellbar__action fd-shellbar__action--collapsible\">\n <div class=\"fd-product-switcher\">\n <fd-popover [options]=\"{placement: 'bottom-end'}\"\n [focusTrapped]=\"false\">\n <fd-popover-control>\n <button class=\"fd-button--shell sap-icon--grid\"></button>\n </fd-popover-control>\n <fd-popover-body>\n <div class=\"fd-product-switcher__body\">\n <nav>\n <ul>\n <li *ngFor=\"let product of productSwitcher\"\n (click)=\"product.callback($event)\">\n <span class=\"fd-product-switcher__product-icon\">\n <img [src]=\"product.image\">\n </span>\n <span class=\"fd-product-switcher__product-title\">\n {{product.title}}\n </span>\n </li>\n </ul>\n </nav>\n </div>\n </fd-popover-body>\n </fd-popover>\n </div>\n </div>\n </ng-container>\n</div>"
}] }
];
ShellbarActionsComponent.propDecorators = {
productSwitcher: [{ type: Input }],
user: [{ type: Input }],
userMenu: [{ type: Input }],
shellbarActions: [{ type: ContentChildren, args: [ShellbarActionComponent,] }],
onResize: [{ type: HostListener, args: ['window:resize', [],] }]
};
return ShellbarActionsComponent;
}());
export { ShellbarActionsComponent };
if (false) {
/** @type {?} */
ShellbarActionsComponent.prototype.actionsCollapsed;
/** @type {?} */
ShellbarActionsComponent.prototype.showCollapsedProducts;
/** @type {?} */
ShellbarActionsComponent.prototype.productSwitcher;
/** @type {?} */
ShellbarActionsComponent.prototype.user;
/** @type {?} */
ShellbarActionsComponent.prototype.userMenu;
/** @type {?} */
ShellbarActionsComponent.prototype.shellbarActions;
/** @type {?} */
ShellbarActionsComponent.prototype.totalNotifications;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hlbGxiYXItYWN0aW9ucy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9mdW5kYW1lbnRhbC1uZ3gvIiwic291cmNlcyI6WyJsaWIvc2hlbGxiYXIvc2hlbGxiYXItYWN0aW9ucy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsZUFBZSxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQStCLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN4SCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUV0RTtJQUFBO1FBS0kscUJBQWdCLEdBQVksS0FBSyxDQUFDO1FBRWxDLDBCQUFxQixHQUFZLEtBQUssQ0FBQztJQXdDM0MsQ0FBQzs7OztJQXZCRywyQ0FBUTs7O0lBRFI7UUFFSSxJQUFJLENBQUMsZ0JBQWdCLEdBQUcsTUFBTSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUM7SUFDckQsQ0FBQzs7OztJQUVELDJDQUFROzs7SUFBUjtRQUNJLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNwQixDQUFDOzs7O0lBRUQsd0RBQXFCOzs7SUFBckI7UUFBQSxpQkFPQztRQU5HLElBQUksQ0FBQyxrQkFBa0IsR0FBRyxDQUFDLENBQUM7UUFDNUIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxPQUFPOzs7O1FBQUMsVUFBQyxNQUFNO1lBQ2hDLElBQUksTUFBTSxDQUFDLGlCQUFpQixJQUFJLE9BQU8sTUFBTSxDQUFDLGlCQUFpQixLQUFLLFFBQVEsRUFBRTtnQkFDMUUsS0FBSSxDQUFDLGtCQUFrQixHQUFHLEtBQUksQ0FBQyxrQkFBa0IsR0FBRyxNQUFNLENBQUMsaUJBQWlCLENBQUM7YUFDaEY7UUFDTCxDQUFDLEVBQUMsQ0FBQztJQUNQLENBQUM7Ozs7O0lBRUQsMERBQXVCOzs7O0lBQXZCLFVBQXdCLEtBQUs7UUFDekIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3ZCLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN4QixJQUFJLENBQUMscUJBQXFCLEdBQUcsQ0FBQyxJQUFJLENBQUMscUJBQXFCLENBQUM7SUFDN0QsQ0FBQzs7Z0JBN0NKLFNBQVMsU0FBQztvQkFDUCxRQUFRLEVBQUUscUJBQXFCO29CQUMvQiw4cE1BQWdEO2lCQUNuRDs7O2tDQU1JLEtBQUs7dUJBR0wsS0FBSzsyQkFHTCxLQUFLO2tDQUdMLGVBQWUsU0FBQyx1QkFBdUI7MkJBS3ZDLFlBQVksU0FBQyxlQUFlLEVBQUUsRUFBRTs7SUF3QnJDLCtCQUFDO0NBQUEsQUEvQ0QsSUErQ0M7U0EzQ1ksd0JBQXdCOzs7SUFDakMsb0RBQWtDOztJQUVsQyx5REFBdUM7O0lBRXZDLG1EQUN1Qjs7SUFFdkIsd0NBQ1U7O0lBRVYsNENBQ2dCOztJQUVoQixtREFDb0Q7O0lBRXBELHNEQUEyQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ29udGVudENoaWxkcmVuLCBIb3N0TGlzdGVuZXIsIElucHV0LCBPbkluaXQsIEFmdGVyQ29udGVudENoZWNrZWQsIFF1ZXJ5TGlzdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU2hlbGxiYXJBY3Rpb25Db21wb25lbnQgfSBmcm9tICcuL3NoZWxsYmFyLWFjdGlvbi5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2ZkLXNoZWxsYmFyLWFjdGlvbnMnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9zaGVsbGJhci1hY3Rpb25zLmNvbXBvbmVudC5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBTaGVsbGJhckFjdGlvbnNDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIEFmdGVyQ29udGVudENoZWNrZWQge1xuICAgIGFjdGlvbnNDb2xsYXBzZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIHNob3dDb2xsYXBzZWRQcm9kdWN0czogYm9vbGVhbiA9IGZhbHNlO1xuXG4gICAgQElucHV0KClcbiAgICBwcm9kdWN0U3dpdGNoZXI6IGFueVtdO1xuXG4gICAgQElucHV0KClcbiAgICB1c2VyOiBhbnk7XG5cbiAgICBASW5wdXQoKVxuICAgIHVzZXJNZW51OiBhbnlbXTtcblxuICAgIEBDb250ZW50Q2hpbGRyZW4oU2hlbGxiYXJBY3Rpb25Db21wb25lbnQpXG4gICAgc2hlbGxiYXJBY3Rpb25zOiBRdWVyeUxpc3Q8U2hlbGxiYXJBY3Rpb25Db21wb25lbnQ+O1xuXG4gICAgdG90YWxOb3RpZmljYXRpb25zOiBudW1iZXI7XG5cbiAgICBASG9zdExpc3RlbmVyKCd3aW5kb3c6cmVzaXplJywgW10pXG4gICAgb25SZXNpemUoKSB7XG4gICAgICAgIHRoaXMuYWN0aW9uc0NvbGxhcHNlZCA9IHdpbmRvdy5pbm5lcldpZHRoIDwgMTAyNDtcbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpIHtcbiAgICAgICAgdGhpcy5vblJlc2l6ZSgpO1xuICAgIH1cblxuICAgIG5nQWZ0ZXJDb250ZW50Q2hlY2tlZCgpIHtcbiAgICAgICAgdGhpcy50b3RhbE5vdGlmaWNhdGlvbnMgPSAwO1xuICAgICAgICB0aGlzLnNoZWxsYmFyQWN0aW9ucy5mb3JFYWNoKChhY3Rpb24pID0+IHtcbiAgICAgICAgICAgIGlmIChhY3Rpb24ubm90aWZpY2F0aW9uQ291bnQgJiYgdHlwZW9mIGFjdGlvbi5ub3RpZmljYXRpb25Db3VudCA9PT0gJ251bWJlcicpIHtcbiAgICAgICAgICAgICAgICB0aGlzLnRvdGFsTm90aWZpY2F0aW9ucyA9IHRoaXMudG90YWxOb3RpZmljYXRpb25zICsgYWN0aW9uLm5vdGlmaWNhdGlvbkNvdW50O1xuICAgICAgICAgICAgfVxuICAgICAgICB9KTtcbiAgICB9XG5cbiAgICB0b2dnbGVDb2xsYXBzZWRQcm9kdWN0cyhldmVudCkge1xuICAgICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICAgICAgdGhpcy5zaG93Q29sbGFwc2VkUHJvZHVjdHMgPSAhdGhpcy5zaG93Q29sbGFwc2VkUHJvZHVjdHM7XG4gICAgfVxuXG59XG4iXX0=