@nebular/theme
Version:
@nebular/theme
367 lines • 17.5 kB
JavaScript
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
import { Component, Input, Output, EventEmitter, Inject, } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { takeWhile, filter, map } from 'rxjs/operators';
import { NbMenuInternalService, NbMenuService } from './menu.service';
import { convertToBoolProperty } from '../helpers';
import { NB_WINDOW } from '../../theme.options';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { NbLayoutDirectionService } from '../../services/direction.service';
export var NbToggleStates;
(function (NbToggleStates) {
NbToggleStates["Expanded"] = "expanded";
NbToggleStates["Collapsed"] = "collapsed";
})(NbToggleStates || (NbToggleStates = {}));
var NbMenuItemComponent = /** @class */ (function () {
function NbMenuItemComponent(menuService, directionService) {
this.menuService = menuService;
this.directionService = directionService;
this.menuItem = null;
this.hoverItem = new EventEmitter();
this.toggleSubMenu = new EventEmitter();
this.selectItem = new EventEmitter();
this.itemClick = new EventEmitter();
this.alive = true;
}
NbMenuItemComponent.prototype.ngDoCheck = function () {
this.toggleState = this.menuItem.expanded ? NbToggleStates.Expanded : NbToggleStates.Collapsed;
};
NbMenuItemComponent.prototype.ngAfterViewInit = function () {
var _this = this;
this.menuService.onSubmenuToggle()
.pipe(takeWhile(function () { return _this.alive; }), filter(function (_a) {
var item = _a.item;
return item === _this.menuItem;
}), map(function (_a) {
var item = _a.item;
return item.expanded;
}))
.subscribe(function (isExpanded) { return _this.toggleState = isExpanded ? NbToggleStates.Expanded : NbToggleStates.Collapsed; });
};
NbMenuItemComponent.prototype.ngOnDestroy = function () {
this.alive = false;
};
NbMenuItemComponent.prototype.onToggleSubMenu = function (item) {
this.toggleSubMenu.emit(item);
};
NbMenuItemComponent.prototype.onHoverItem = function (item) {
this.hoverItem.emit(item);
};
NbMenuItemComponent.prototype.onSelectItem = function (item) {
this.selectItem.emit(item);
};
NbMenuItemComponent.prototype.onItemClick = function (item) {
this.itemClick.emit(item);
};
NbMenuItemComponent.prototype.getExpandStateIcon = function () {
if (this.menuItem.expanded) {
return 'chevron-down-outline';
}
return this.directionService.isLtr()
? 'chevron-left-outline'
: 'chevron-right-outline';
};
__decorate([
Input(),
__metadata("design:type", Object)
], NbMenuItemComponent.prototype, "menuItem", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], NbMenuItemComponent.prototype, "hoverItem", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], NbMenuItemComponent.prototype, "toggleSubMenu", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], NbMenuItemComponent.prototype, "selectItem", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], NbMenuItemComponent.prototype, "itemClick", void 0);
NbMenuItemComponent = __decorate([
Component({
selector: '[nbMenuItem]',
template: "<span *ngIf=\"menuItem.group\">\n <nb-icon class=\"menu-icon\" [icon]=\"menuItem.icon\" *ngIf=\"menuItem.icon\"></nb-icon>\n {{ menuItem.title }}\n</span>\n<a *ngIf=\"menuItem.link && !menuItem.url && !menuItem.children && !menuItem.group\"\n [routerLink]=\"menuItem.link\"\n [queryParams]=\"menuItem.queryParams\"\n [fragment]=\"menuItem.fragment\"\n [skipLocationChange]=\"menuItem.skipLocationChange\"\n [attr.target]=\"menuItem.target\"\n [attr.title]=\"menuItem.title\"\n [class.active]=\"menuItem.selected\"\n (mouseenter)=\"onHoverItem(menuItem)\"\n (click)=\"onItemClick(menuItem);\">\n <nb-icon class=\"menu-icon\" [icon]=\"menuItem.icon\" *ngIf=\"menuItem.icon\"></nb-icon>\n <span class=\"menu-title\">{{ menuItem.title }}</span>\n</a>\n<a *ngIf=\"menuItem.url && !menuItem.children && !menuItem.link && !menuItem.group\"\n [attr.href]=\"menuItem.url\"\n [attr.target]=\"menuItem.target\"\n [attr.title]=\"menuItem.title\"\n [class.active]=\"menuItem.selected\"\n (mouseenter)=\"onHoverItem(menuItem)\"\n (click)=\"onSelectItem(menuItem)\">\n <nb-icon class=\"menu-icon\" [icon]=\"menuItem.icon\" *ngIf=\"menuItem.icon\"></nb-icon>\n <span class=\"menu-title\">{{ menuItem.title }}</span>\n</a>\n<a *ngIf=\"!menuItem.children && !menuItem.link && !menuItem.url && !menuItem.group\"\n [attr.target]=\"menuItem.target\"\n [attr.title]=\"menuItem.title\"\n [class.active]=\"menuItem.selected\"\n (mouseenter)=\"onHoverItem(menuItem)\"\n (click)=\"$event.preventDefault(); onItemClick(menuItem);\">\n <nb-icon class=\"menu-icon\" [icon]=\"menuItem.icon\" *ngIf=\"menuItem.icon\"></nb-icon>\n <span class=\"menu-title\">{{ menuItem.title }}</span>\n</a>\n<a *ngIf=\"menuItem.children\"\n (click)=\"$event.preventDefault(); onToggleSubMenu(menuItem);\"\n [attr.target]=\"menuItem.target\"\n [attr.title]=\"menuItem.title\"\n [class.active]=\"menuItem.selected\"\n (mouseenter)=\"onHoverItem(menuItem)\"\n href=\"#\">\n <nb-icon class=\"menu-icon\" [icon]=\"menuItem.icon\" *ngIf=\"menuItem.icon\"></nb-icon>\n <span class=\"menu-title\">{{ menuItem.title }}</span>\n <nb-icon class=\"expand-state\" [icon]=\"getExpandStateIcon()\" pack=\"nebular-essentials\"></nb-icon>\n</a>\n<ul *ngIf=\"menuItem.children\"\n [class.collapsed]=\"!(menuItem.children && menuItem.expanded)\"\n [class.expanded]=\"menuItem.expanded\"\n [@toggle]=\"toggleState\"\n class=\"menu-items\">\n <ng-container *ngFor=\"let item of menuItem.children\">\n <li nbMenuItem *ngIf=\"!item.hidden\"\n [menuItem]=\"item\"\n [class.menu-group]=\"item.group\"\n (hoverItem)=\"onHoverItem($event)\"\n (toggleSubMenu)=\"onToggleSubMenu($event)\"\n (selectItem)=\"onSelectItem($event)\"\n (itemClick)=\"onItemClick($event)\"\n class=\"menu-item\">\n </li>\n </ng-container>\n</ul>\n",
animations: [
trigger('toggle', [
state(NbToggleStates.Collapsed, style({ height: '0', margin: '0' })),
state(NbToggleStates.Expanded, style({ height: '*' })),
transition(NbToggleStates.Collapsed + " <=> " + NbToggleStates.Expanded, animate(300)),
]),
]
}),
__metadata("design:paramtypes", [NbMenuService,
NbLayoutDirectionService])
], NbMenuItemComponent);
return NbMenuItemComponent;
}());
export { NbMenuItemComponent };
/**
* Vertical menu component.
*
* Accepts a list of menu items and renders them accordingly. Supports multi-level menus.
*
* Basic example
* @stacked-example(Showcase, menu/menu-showcase.component)
*
* ```ts
* // ...
* items: NbMenuItem[] = [
* {
* title: home,
* link: '/'
* },
* {
* title: dashboard,
* link: 'dashboard'
* }
* ];
* // ...
* <nb-menu [items]="items"></nb-menu>
* ```
* ### Installation
*
* Import `NbMenuModule.forRoot()` to your app module.
* ```ts
* @NgModule({
* imports: [
* // ...
* NbMenuModule.forRoot(),
* ],
* })
* export class AppModule { }
* ```
* and `NbMenuModule` to your feature module where the component should be shown:
* ```ts
* @NgModule({
* imports: [
* // ...
* NbMenuModule,
* ],
* })
* export class PageModule { }
* ```
* ### Usage
*
* Two-level menu example
* @stacked-example(Two Levels, menu/menu-children.component)
*
*
* Autocollapse menu example
* @stacked-example(Autocollapse Menu, menu/menu-autocollapse.component)
*
*
* @styles
*
* menu-background-color:
* menu-text-color:
* menu-text-font-family:
* menu-text-font-size:
* menu-text-font-weight:
* menu-text-line-height:
* menu-group-text-color:
* menu-item-border-radius:
* menu-item-padding:
* menu-item-hover-background-color:
* menu-item-hover-cursor:
* menu-item-hover-text-color:
* menu-item-icon-hover-color:
* menu-item-active-background-color:
* menu-item-active-text-color:
* menu-item-icon-active-color:
* menu-item-icon-color:
* menu-item-icon-margin:
* menu-item-icon-width:
* menu-item-divider-color:
* menu-item-divider-style:
* menu-item-divider-width:
* menu-submenu-background-color:
* menu-submenu-text-color:
* menu-submenu-margin:
* menu-submenu-padding:
* menu-submenu-item-border-color:
* menu-submenu-item-border-style:
* menu-submenu-item-border-width:
* menu-submenu-item-border-radius:
* menu-submenu-item-padding:
* menu-submenu-item-hover-background-color:
* menu-submenu-item-hover-border-color:
* menu-submenu-item-hover-text-color:
* menu-submenu-item-icon-hover-color:
* menu-submenu-item-active-background-color:
* menu-submenu-item-active-border-color:
* menu-submenu-item-active-text-color:
* menu-submenu-item-icon-active-color:
* menu-submenu-item-active-hover-background-color:
* menu-submenu-item-active-hover-border-color:
* menu-submenu-item-active-hover-text-color:
* menu-submenu-item-icon-active-hover-color:
*/
var NbMenuComponent = /** @class */ (function () {
function NbMenuComponent(window, menuInternalService, router) {
this.window = window;
this.menuInternalService = menuInternalService;
this.router = router;
this._autoCollapse = false;
this.alive = true;
}
Object.defineProperty(NbMenuComponent.prototype, "autoCollapse", {
/**
* Collapse all opened submenus on the toggle event
* Default value is "false"
* @type boolean
*/
get: function () {
return this._autoCollapse;
},
set: function (value) {
this._autoCollapse = convertToBoolProperty(value);
},
enumerable: true,
configurable: true
});
NbMenuComponent.prototype.ngOnInit = function () {
var _this = this;
this.menuInternalService.prepareItems(this.items);
this.menuInternalService
.onAddItem()
.pipe(takeWhile(function () { return _this.alive; }), filter(function (data) { return _this.compareTag(data.tag); }))
.subscribe(function (data) { return _this.onAddItem(data); });
this.menuInternalService
.onNavigateHome()
.pipe(takeWhile(function () { return _this.alive; }), filter(function (data) { return _this.compareTag(data.tag); }))
.subscribe(function () { return _this.navigateHome(); });
this.menuInternalService
.onGetSelectedItem()
.pipe(takeWhile(function () { return _this.alive; }), filter(function (data) { return _this.compareTag(data.tag); }))
.subscribe(function (data) {
data.listener.next({ tag: _this.tag, item: _this.getSelectedItem(_this.items) });
});
this.menuInternalService
.onCollapseAll()
.pipe(takeWhile(function () { return _this.alive; }), filter(function (data) { return _this.compareTag(data.tag); }))
.subscribe(function () { return _this.collapseAll(); });
this.router.events
.pipe(takeWhile(function () { return _this.alive; }), filter(function (event) { return event instanceof NavigationEnd; }))
.subscribe(function () {
_this.menuInternalService.selectFromUrl(_this.items, _this.tag, _this.autoCollapse);
});
};
NbMenuComponent.prototype.ngAfterViewInit = function () {
var _this = this;
setTimeout(function () { return _this.menuInternalService.selectFromUrl(_this.items, _this.tag, _this.autoCollapse); });
};
NbMenuComponent.prototype.onAddItem = function (data) {
var _a;
(_a = this.items).push.apply(_a, data.items);
this.menuInternalService.prepareItems(this.items);
this.menuInternalService.selectFromUrl(this.items, this.tag, this.autoCollapse);
};
NbMenuComponent.prototype.onHoverItem = function (item) {
this.menuInternalService.itemHover(item, this.tag);
};
NbMenuComponent.prototype.onToggleSubMenu = function (item) {
if (this.autoCollapse) {
this.menuInternalService.collapseAll(this.items, this.tag, item);
}
item.expanded = !item.expanded;
this.menuInternalService.submenuToggle(item, this.tag);
};
// TODO: is not fired on page reload
NbMenuComponent.prototype.onSelectItem = function (item) {
this.menuInternalService.selectItem(item, this.items, this.autoCollapse, this.tag);
};
NbMenuComponent.prototype.onItemClick = function (item) {
this.menuInternalService.itemClick(item, this.tag);
};
NbMenuComponent.prototype.ngOnDestroy = function () {
this.alive = false;
};
NbMenuComponent.prototype.navigateHome = function () {
var homeItem = this.getHomeItem(this.items);
if (homeItem) {
if (homeItem.link) {
this.router.navigate([homeItem.link], { queryParams: homeItem.queryParams, fragment: homeItem.fragment });
}
if (homeItem.url) {
this.window.location.href = homeItem.url;
}
}
};
NbMenuComponent.prototype.collapseAll = function () {
this.menuInternalService.collapseAll(this.items, this.tag);
};
NbMenuComponent.prototype.getHomeItem = function (items) {
for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
var item = items_1[_i];
if (item.home) {
return item;
}
var homeItem = item.children && this.getHomeItem(item.children);
if (homeItem) {
return homeItem;
}
}
};
NbMenuComponent.prototype.compareTag = function (tag) {
return !tag || tag === this.tag;
};
NbMenuComponent.prototype.getSelectedItem = function (items) {
var _this = this;
var selected = null;
items.forEach(function (item) {
if (item.selected) {
selected = item;
}
if (item.selected && item.children && item.children.length > 0) {
selected = _this.getSelectedItem(item.children);
}
});
return selected;
};
__decorate([
Input(),
__metadata("design:type", String)
], NbMenuComponent.prototype, "tag", void 0);
__decorate([
Input(),
__metadata("design:type", Array)
], NbMenuComponent.prototype, "items", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NbMenuComponent.prototype, "autoCollapse", null);
NbMenuComponent = __decorate([
Component({
selector: 'nb-menu',
template: "\n <ul class=\"menu-items\">\n <ng-container *ngFor=\"let item of items\">\n <li nbMenuItem *ngIf=\"!item.hidden\"\n [menuItem]=\"item\"\n [class.menu-group]=\"item.group\"\n (hoverItem)=\"onHoverItem($event)\"\n (toggleSubMenu)=\"onToggleSubMenu($event)\"\n (selectItem)=\"onSelectItem($event)\"\n (itemClick)=\"onItemClick($event)\"\n class=\"menu-item\">\n </li>\n </ng-container>\n </ul>\n ",
styles: [":host ::ng-deep{display:block}:host ::ng-deep .menu-items,:host ::ng-deep .menu-item>.menu-items{list-style-type:none;overflow:hidden}:host ::ng-deep .menu-item a{display:flex;color:inherit;text-decoration:none;align-items:center}:host ::ng-deep .menu-item a .menu-title{flex:1 0 auto}[dir=rtl] :host ::ng-deep .menu-item a .menu-title{text-align:right}:host ::ng-deep .menu-group span{display:flex}\n"]
}),
__param(0, Inject(NB_WINDOW)),
__metadata("design:paramtypes", [Object, NbMenuInternalService,
Router])
], NbMenuComponent);
return NbMenuComponent;
}());
export { NbMenuComponent };
//# sourceMappingURL=menu.component.js.map