ngx-menubar
Version:
Simple basic menubar with step-into view display menu items(not tree view display) for angular14+.
223 lines (218 loc) • 23.9 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import { BehaviorSubject, debounceTime, distinctUntilChanged, map } from 'rxjs';
import * as i1 from '@angular/platform-browser';
/**
* Simple basic menubar with step-into view display menu items(not tree view display).
* @usageNotes
* ```html
* <style>
* .container {
* width: 350px;
* height: 500px;
* box-shadow: 1px 2px 8px rgba(0, 0, 0, .45);
* }
* </style>
*
* <div class="container">
* <cyx-menubar #menubar [datasource]="navs"></cyx-menubar>
* </div>
* ```
* @see IMenuItem
*/
class CyxMenubarComponent {
constructor(sanitizer) {
this.sanitizer = sanitizer;
/**
* Default Top menu title.
*/
this.title = 'Menu';
/**
* Menu items.
*/
this.datasource = [];
/**
* Theme color, 'dark' or 'light'.
*/
this.color = 'dark';
/**
* Show bottom doc panel.
*/
this.showDocPanel = false;
/**
* Show menu icon.
*/
this.showMenuIcon = true;
/**
* Parse icon which from menu item data field {@link IMenuItem#icon}, e.g.
* ```javascript
* // menu item data.
* {id: 1, title: '...', icon: 'deployed_code'}
*
* // font icon.
* icon => `<span class="material-symbols-sharp">${icon}</span>`
*
* // svg icon.
* icon => `<svg viewBox="...">...</svg>`
* ```
* @param icon icon name.
*/
this.iconParser = (icon) => icon;
/**
* Global menu item search configuration.
*/
this.searchConfig = {
placeHolder: 'search',
predicate: (keyword, item) => item.title.toLowerCase().includes(keyword.toLowerCase())
};
/**
* Menu item click event.
*/
this.itemClick = new EventEmitter();
this.indices = [];
this.currentTitle = null;
this.currentChildren = [];
this.flattenItems = [];
/**
* Selected item.
*/
this.selectedItem = null;
this._displayItems = [];
this.searchTerms = new BehaviorSubject('');
}
get displayItems() {
return this._displayItems;
}
/**
* Is menu top level.
*/
get isTopMenu() {
return this.indices.length === 0;
}
ngOnChanges(changes) {
if (changes['datasource']) {
this.doFlatDatasource(this.datasource);
}
if (changes['active'] && this.active) {
this.doActiveItemById(this.active);
}
}
ngOnInit() {
this.doFlatDatasource(this.datasource);
if (this.active) {
this.doActiveItemById(this.active);
}
else {
this.currentChildren = this.datasource;
this._displayItems = this.currentChildren;
}
this.searchPredicate = this.searchConfig.predicate || (() => true);
this.searchTerms.pipe(debounceTime(300), distinctUntilChanged(), map(term => term.trim())).subscribe(term => {
if (term) {
this._displayItems = this.flattenItems.filter(item => this.searchPredicate(term, item));
return;
}
this._displayItems = this.currentChildren;
});
}
doActiveItemById(id) {
const activeItem = this.flattenItems.find(i => i.id === id);
if (activeItem) {
this.currentChildren = [activeItem];
this._displayItems = this.currentChildren;
}
}
doFlatDatasource(datasource) {
const flatting = (items) => {
return items.reduce((acc, curr) => {
if (curr.children && curr.children.length > 0) {
acc.push({
id: curr.id,
title: curr.title,
icon: curr.icon,
data: curr.data,
children: curr.children,
});
return acc.concat(flatting(curr.children));
}
acc.push(curr);
return acc;
}, []);
};
this.flattenItems = flatting(datasource);
}
iconHTML(icon) {
const iconHTMLString = this.iconParser(icon);
return this.sanitizer.bypassSecurityTrustHtml(iconHTMLString);
}
clickItem(item, index) {
this.selectedItem = item;
if (item.children && item.children.length > 0) {
this.indices.push(index);
this.currentTitle = item.title;
this.currentChildren = item.children;
this._displayItems = this.currentChildren;
}
this.itemClick.emit(item);
}
backward() {
this.indices.pop();
if (this.isTopMenu) {
this.currentTitle = null;
this.currentChildren = this.datasource;
this._displayItems = this.currentChildren;
return;
}
let prevItem = null;
let prevItems = this.datasource;
for (const index of this.indices) {
prevItem = prevItems[index];
prevItems = prevItem.children || [];
}
this.currentTitle = prevItem === null || prevItem === void 0 ? void 0 : prevItem.title;
this.currentChildren = prevItems;
this._displayItems = this.currentChildren;
}
trackById(_, item) {
return item.id;
}
searchItems(value) {
this.searchTerms.next(value);
}
}
CyxMenubarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CyxMenubarComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
CyxMenubarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CyxMenubarComponent, isStandalone: true, selector: "cyx-menubar", inputs: { title: "title", datasource: "datasource", color: "color", showDocPanel: "showDocPanel", showMenuIcon: "showMenuIcon", iconParser: "iconParser", searchConfig: "searchConfig", active: "active" }, outputs: { itemClick: "itemClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"menubar\" [ngClass]=\"color\">\n <header>\n <div class=\"backrow\" (click)=\"backward()\">\n <svg viewBox=\"0 0 542.187 461.8\" class=\"icon\" *ngIf=\"isTopMenu && showMenuIcon\">\n <g>\n <path\n d=\"M184.508 112.461V1.656h357.677v110.805H184.508M184.508 287.127V176.329h357.679v110.798H184.508M184.508 461.8V351h357.681v110.8H184.508M116.022 58.001c0 32.044-25.974 58.011-58.012 58.011C25.973 116.012 0 90.045 0 58.002 0 25.961 25.973-.005 58.01-.005c32.038 0 58.012 25.967 58.012 58.005M116.022 224.827c0 32.037-25.974 58.01-58.012 58.01-32.037 0-58.01-25.973-58.01-58.01 0-32.036 25.973-58.011 58.01-58.011 32.038 0 58.012 25.975 58.012 58.01M116.022 403.357c0 32.038-25.974 58.011-58.012 58.011-32.037 0-58.01-25.973-58.01-58.01 0-32.04 25.973-58.01 58.01-58.01 32.038 0 58.012 25.97 58.012 58.01\"></path>\n </g>\n </svg>\n <svg viewBox=\"0 0 14.2 21\" class=\"icon\" *ngIf=\"!isTopMenu\">\n <path d=\"M10.5 21l3.7-3.7-6.8-6.8 6.8-6.8L10.5 0 0 10.5z\"></path>\n </svg>\n <h1 class=\"label\" [class.no-icon-title]=\"!showMenuIcon && isTopMenu\">\n <ng-container *ngIf=\"currentTitle else defaultMenu\">{{ currentTitle }}</ng-container>\n <ng-template #defaultMenu>\n {{ title }}\n </ng-template>\n </h1>\n </div>\n </header>\n\n <header class=\"search\">\n <input type=\"text\" #searchBox [placeholder]=\"searchConfig.placeHolder || ''\"\n [value]=\"searchTerms.getValue()\"\n (input)=\"searchItems(searchBox.value)\"\n (keydown.enter)=\"searchItems(searchBox.value)\">\n\n <svg *ngIf=\"searchBox.value else queryIcon\" viewBox=\"0 0 18 18\" class=\"icon small\"\n (click)=\"searchBox.value = '';searchBox.focus();searchTerms.next('');\">\n <path\n d=\"M12.2 9l5.6-5.6c.2-.2.2-.6 0-.8L15.4.2c-.2-.2-.6-.2-.8 0L9 5.8 3.4.2c-.2-.2-.6-.2-.8 0L.2 2.5c-.2.2-.2.6 0 .8L5.8 9 .2 14.6c-.2.2-.2.6 0 .8l2.4 2.4c.2.2.6.2.8 0L9 12.2l5.6 5.6c.2.2.6.2.8 0l2.4-2.4c.2-.2.2-.6 0-.8L12.2 9z\"></path>\n </svg>\n <ng-template #queryIcon>\n <svg viewBox=\"0 0 594.573 594.107\" class=\"icon small\" (click)=\"searchBox.focus()\">\n <path\n d=\"M234.513 411.179c-96.785-.622-175.027-79.878-174.416-176.67.62-96.172 79.352-174.416 175.5-174.421l1.174.003c46.889.294 90.857 18.832 123.8 52.198 32.94 33.367 50.918 77.57 50.616 124.468-.296 46.687-18.703 90.524-51.823 123.42-33.112 32.894-77.04 51.003-123.69 51.003zm351.942 89.513l-3.588-3.585.008-.003-143.352-143.363c19.917-34.312 31.488-74.086 31.76-116.601C472.117 106.987 367.296.816 237.152-.003c-.525-.002-1.035-.002-1.557-.002C106.18 0 .838 104.516.005 234.125-.82 364.271 104.003 470.44 234.133 471.271c.519.002 1.022.005 1.54.005 43.258 0 83.795-11.72 118.664-32.1l143.226 143.241.013-.012 3.581 3.58c10.834 10.832 28.391 10.823 39.219 0l46.079-46.072c10.822-10.822 10.829-28.39 0-39.22\"></path>\n </svg>\n </ng-template>\n </header>\n\n <ul class=\"list\">\n <li *ngFor=\"let item of displayItems;index as i;trackBy:trackById\" (click)=\"clickItem(item,i)\"\n [class.selected]=\"item === selectedItem\">\n <div class=\"title\">\n <ng-container *ngIf=\"item.icon else defaultItemIcon\">\n <div class=\"icon\" [innerHTML]=\"iconHTML(item.icon)\"></div>\n </ng-container>\n <ng-template #defaultItemIcon>\n <svg class=\"icon\" viewBox=\"0 -960 960 960\">\n <path\n d=\"M480.276-96Q401-96 331-126q-70-30-122.5-82.5T126-330.958q-30-69.959-30-149.5Q96-560 126-629.5t82.5-122Q261-804 330.958-834q69.959-30 149.5-30Q560-864 629.5-834t122 82.5Q804-699 834-629.276q30 69.725 30 149Q864-401 834-331q-30 70-82.5 122.5T629.276-126q-69.725 30-149 30Z\"/>\n </svg>\n </ng-template>\n <span class=\"label\">{{ item.title }}</span>\n </div>\n <svg class=\"small icon\" viewBox=\"0 0 14.2 21\"\n *ngIf=\"(item.children && item.children.length > 0)\">\n <path d=\"M14.2 10.5L3.7 0 0 3.7l6.8 6.8L0 17.3 3.7 21z\"></path>\n </svg>\n </li>\n </ul>\n\n <div class=\"doc\" *ngIf=\"showDocPanel\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["h1,h2{font-size:1rem;font-weight:700;margin:0}.label{flex:1;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon{width:1.125em;height:1.125em;display:inline-block;fill:currentColor;vertical-align:middle;box-sizing:content-box}.icon.small{width:.75em;height:.75em}.menubar{min-width:50px;width:100%;height:100%;background:var(--bg-color);flex:1;display:flex;flex-direction:column;color:var(--text-color);border-right:1px solid var(--list-ui-color);z-index:100}.menubar>header{flex:0 0 2.5rem;padding:0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-bottom-color);transition:background .2s;color:var(--text-color)}.menubar>header h1{color:var(--header-fg-higlight)}.menubar>header .backrow{display:flex;flex:1 0 auto;align-items:center;cursor:pointer;margin:0;padding:.5rem 0;width:1px}.menubar>header .backrow:hover{color:var(--header-fg-higlight)}.menubar>header .backrow:hover .icon{color:currentColor}.menubar>header .backrow .icon{flex:0 0 auto;margin:0 1rem}.menubar>header .backrow .no-icon-title{padding-left:1rem}.menubar>header .icon{color:var(--li-icon-color);transition:color .2s}.menubar>header .icon:not(.inactive){cursor:pointer}.menubar>header .icon:not(.inactive):hover{color:var(--header-fg-higlight)}.menubar .search{position:relative;justify-content:flex-end}.menubar .search input{position:absolute;inset:0;padding:0 2.5rem 0 1rem;color:currentColor;font-size:14px;border:none;outline:none;background:transparent;z-index:10}.menubar .search input:hover,.menubar .search input:focus{outline:none}.menubar .search .icon{padding:.75rem 1rem;margin:0;z-index:11}.menubar .list{flex:1 1 0;display:flex;align-items:stretch;flex-direction:column;margin:0;padding:0;overflow-y:auto;background:var(--list-ui-color);border-bottom:2px solid var(--list-ui-color)}.menubar .list li{display:flex;flex:0 0 auto;padding:.5rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-bottom-color);transition:background .2s,color .2s;color:var(--text-color)}.menubar .list li:not(.inactive){cursor:pointer}.menubar .list li:not(.inactive):hover{color:var(--icon-color-hover)}.menubar .list li:not(.inactive):hover .icon{color:var(--icon-color-hover)}.menubar .list li:hover:not(.inactive){background:var(--li-bg-color-hover)}.menubar .list li>*{margin:0 .5rem}.menubar .list li .icon{color:var(--li-icon-color);padding:.2rem 0;transition:fill .2s}.menubar .list li .title{display:flex;flex:1 0 auto;align-items:center;cursor:pointer;width:1px}.menubar .list li .title .icon{flex:0 0 auto;display:flex;justify-content:center;align-items:center;text-align:center}.menubar .list li .title .icon svg{width:1.125em;height:1.125em;display:inline-block;fill:currentColor;vertical-align:middle;box-sizing:content-box}.menubar .list li .title .label{margin-left:1rem}.menubar .list li.selected,.menubar .list li.selected .icon{color:var(--li-selected-color)}.menubar .doc{flex:1 1 0;overflow-y:auto;overflow-x:hidden;padding:1rem;-webkit-user-select:text;user-select:text;overflow-wrap:break-word;border-top:2px solid var(--doc-top-color);line-height:1.4em}\n", ".menubar.light{--bg-color: #f9f9f9;--header-fg-higlight: #5e5f61;--border-bottom-color: rgba(28, 28, 28, .08);--text-color: #616161;--list-ui-color: #ededed;--icon-color-hover: #e7e9ea;--li-icon-color: #797d81;--li-bg-color-hover: #4a4f53;--li-selected-color: #187cee;--doc-top-color: #e8e8e8}\n", ".menubar.dark{--bg-color: #282b2d;--header-fg-higlight: #f0f1f2;--border-bottom-color: rgba(240, 241, 242, .06);--text-color: #b7bcc0;--list-ui-color: #3a3e41;--icon-color-hover: #e7e9ea;--li-icon-color: #797d81;--li-bg-color-hover: #4a4f53;--li-selected-color: #7fc9ff;--doc-top-color: #282b2d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CyxMenubarComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'cyx-menubar', imports: [
CommonModule
], template: "<div class=\"menubar\" [ngClass]=\"color\">\n <header>\n <div class=\"backrow\" (click)=\"backward()\">\n <svg viewBox=\"0 0 542.187 461.8\" class=\"icon\" *ngIf=\"isTopMenu && showMenuIcon\">\n <g>\n <path\n d=\"M184.508 112.461V1.656h357.677v110.805H184.508M184.508 287.127V176.329h357.679v110.798H184.508M184.508 461.8V351h357.681v110.8H184.508M116.022 58.001c0 32.044-25.974 58.011-58.012 58.011C25.973 116.012 0 90.045 0 58.002 0 25.961 25.973-.005 58.01-.005c32.038 0 58.012 25.967 58.012 58.005M116.022 224.827c0 32.037-25.974 58.01-58.012 58.01-32.037 0-58.01-25.973-58.01-58.01 0-32.036 25.973-58.011 58.01-58.011 32.038 0 58.012 25.975 58.012 58.01M116.022 403.357c0 32.038-25.974 58.011-58.012 58.011-32.037 0-58.01-25.973-58.01-58.01 0-32.04 25.973-58.01 58.01-58.01 32.038 0 58.012 25.97 58.012 58.01\"></path>\n </g>\n </svg>\n <svg viewBox=\"0 0 14.2 21\" class=\"icon\" *ngIf=\"!isTopMenu\">\n <path d=\"M10.5 21l3.7-3.7-6.8-6.8 6.8-6.8L10.5 0 0 10.5z\"></path>\n </svg>\n <h1 class=\"label\" [class.no-icon-title]=\"!showMenuIcon && isTopMenu\">\n <ng-container *ngIf=\"currentTitle else defaultMenu\">{{ currentTitle }}</ng-container>\n <ng-template #defaultMenu>\n {{ title }}\n </ng-template>\n </h1>\n </div>\n </header>\n\n <header class=\"search\">\n <input type=\"text\" #searchBox [placeholder]=\"searchConfig.placeHolder || ''\"\n [value]=\"searchTerms.getValue()\"\n (input)=\"searchItems(searchBox.value)\"\n (keydown.enter)=\"searchItems(searchBox.value)\">\n\n <svg *ngIf=\"searchBox.value else queryIcon\" viewBox=\"0 0 18 18\" class=\"icon small\"\n (click)=\"searchBox.value = '';searchBox.focus();searchTerms.next('');\">\n <path\n d=\"M12.2 9l5.6-5.6c.2-.2.2-.6 0-.8L15.4.2c-.2-.2-.6-.2-.8 0L9 5.8 3.4.2c-.2-.2-.6-.2-.8 0L.2 2.5c-.2.2-.2.6 0 .8L5.8 9 .2 14.6c-.2.2-.2.6 0 .8l2.4 2.4c.2.2.6.2.8 0L9 12.2l5.6 5.6c.2.2.6.2.8 0l2.4-2.4c.2-.2.2-.6 0-.8L12.2 9z\"></path>\n </svg>\n <ng-template #queryIcon>\n <svg viewBox=\"0 0 594.573 594.107\" class=\"icon small\" (click)=\"searchBox.focus()\">\n <path\n d=\"M234.513 411.179c-96.785-.622-175.027-79.878-174.416-176.67.62-96.172 79.352-174.416 175.5-174.421l1.174.003c46.889.294 90.857 18.832 123.8 52.198 32.94 33.367 50.918 77.57 50.616 124.468-.296 46.687-18.703 90.524-51.823 123.42-33.112 32.894-77.04 51.003-123.69 51.003zm351.942 89.513l-3.588-3.585.008-.003-143.352-143.363c19.917-34.312 31.488-74.086 31.76-116.601C472.117 106.987 367.296.816 237.152-.003c-.525-.002-1.035-.002-1.557-.002C106.18 0 .838 104.516.005 234.125-.82 364.271 104.003 470.44 234.133 471.271c.519.002 1.022.005 1.54.005 43.258 0 83.795-11.72 118.664-32.1l143.226 143.241.013-.012 3.581 3.58c10.834 10.832 28.391 10.823 39.219 0l46.079-46.072c10.822-10.822 10.829-28.39 0-39.22\"></path>\n </svg>\n </ng-template>\n </header>\n\n <ul class=\"list\">\n <li *ngFor=\"let item of displayItems;index as i;trackBy:trackById\" (click)=\"clickItem(item,i)\"\n [class.selected]=\"item === selectedItem\">\n <div class=\"title\">\n <ng-container *ngIf=\"item.icon else defaultItemIcon\">\n <div class=\"icon\" [innerHTML]=\"iconHTML(item.icon)\"></div>\n </ng-container>\n <ng-template #defaultItemIcon>\n <svg class=\"icon\" viewBox=\"0 -960 960 960\">\n <path\n d=\"M480.276-96Q401-96 331-126q-70-30-122.5-82.5T126-330.958q-30-69.959-30-149.5Q96-560 126-629.5t82.5-122Q261-804 330.958-834q69.959-30 149.5-30Q560-864 629.5-834t122 82.5Q804-699 834-629.276q30 69.725 30 149Q864-401 834-331q-30 70-82.5 122.5T629.276-126q-69.725 30-149 30Z\"/>\n </svg>\n </ng-template>\n <span class=\"label\">{{ item.title }}</span>\n </div>\n <svg class=\"small icon\" viewBox=\"0 0 14.2 21\"\n *ngIf=\"(item.children && item.children.length > 0)\">\n <path d=\"M14.2 10.5L3.7 0 0 3.7l6.8 6.8L0 17.3 3.7 21z\"></path>\n </svg>\n </li>\n </ul>\n\n <div class=\"doc\" *ngIf=\"showDocPanel\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["h1,h2{font-size:1rem;font-weight:700;margin:0}.label{flex:1;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon{width:1.125em;height:1.125em;display:inline-block;fill:currentColor;vertical-align:middle;box-sizing:content-box}.icon.small{width:.75em;height:.75em}.menubar{min-width:50px;width:100%;height:100%;background:var(--bg-color);flex:1;display:flex;flex-direction:column;color:var(--text-color);border-right:1px solid var(--list-ui-color);z-index:100}.menubar>header{flex:0 0 2.5rem;padding:0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-bottom-color);transition:background .2s;color:var(--text-color)}.menubar>header h1{color:var(--header-fg-higlight)}.menubar>header .backrow{display:flex;flex:1 0 auto;align-items:center;cursor:pointer;margin:0;padding:.5rem 0;width:1px}.menubar>header .backrow:hover{color:var(--header-fg-higlight)}.menubar>header .backrow:hover .icon{color:currentColor}.menubar>header .backrow .icon{flex:0 0 auto;margin:0 1rem}.menubar>header .backrow .no-icon-title{padding-left:1rem}.menubar>header .icon{color:var(--li-icon-color);transition:color .2s}.menubar>header .icon:not(.inactive){cursor:pointer}.menubar>header .icon:not(.inactive):hover{color:var(--header-fg-higlight)}.menubar .search{position:relative;justify-content:flex-end}.menubar .search input{position:absolute;inset:0;padding:0 2.5rem 0 1rem;color:currentColor;font-size:14px;border:none;outline:none;background:transparent;z-index:10}.menubar .search input:hover,.menubar .search input:focus{outline:none}.menubar .search .icon{padding:.75rem 1rem;margin:0;z-index:11}.menubar .list{flex:1 1 0;display:flex;align-items:stretch;flex-direction:column;margin:0;padding:0;overflow-y:auto;background:var(--list-ui-color);border-bottom:2px solid var(--list-ui-color)}.menubar .list li{display:flex;flex:0 0 auto;padding:.5rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-bottom-color);transition:background .2s,color .2s;color:var(--text-color)}.menubar .list li:not(.inactive){cursor:pointer}.menubar .list li:not(.inactive):hover{color:var(--icon-color-hover)}.menubar .list li:not(.inactive):hover .icon{color:var(--icon-color-hover)}.menubar .list li:hover:not(.inactive){background:var(--li-bg-color-hover)}.menubar .list li>*{margin:0 .5rem}.menubar .list li .icon{color:var(--li-icon-color);padding:.2rem 0;transition:fill .2s}.menubar .list li .title{display:flex;flex:1 0 auto;align-items:center;cursor:pointer;width:1px}.menubar .list li .title .icon{flex:0 0 auto;display:flex;justify-content:center;align-items:center;text-align:center}.menubar .list li .title .icon svg{width:1.125em;height:1.125em;display:inline-block;fill:currentColor;vertical-align:middle;box-sizing:content-box}.menubar .list li .title .label{margin-left:1rem}.menubar .list li.selected,.menubar .list li.selected .icon{color:var(--li-selected-color)}.menubar .doc{flex:1 1 0;overflow-y:auto;overflow-x:hidden;padding:1rem;-webkit-user-select:text;user-select:text;overflow-wrap:break-word;border-top:2px solid var(--doc-top-color);line-height:1.4em}\n", ".menubar.light{--bg-color: #f9f9f9;--header-fg-higlight: #5e5f61;--border-bottom-color: rgba(28, 28, 28, .08);--text-color: #616161;--list-ui-color: #ededed;--icon-color-hover: #e7e9ea;--li-icon-color: #797d81;--li-bg-color-hover: #4a4f53;--li-selected-color: #187cee;--doc-top-color: #e8e8e8}\n", ".menubar.dark{--bg-color: #282b2d;--header-fg-higlight: #f0f1f2;--border-bottom-color: rgba(240, 241, 242, .06);--text-color: #b7bcc0;--list-ui-color: #3a3e41;--icon-color-hover: #e7e9ea;--li-icon-color: #797d81;--li-bg-color-hover: #4a4f53;--li-selected-color: #7fc9ff;--doc-top-color: #282b2d}\n"] }]
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; }, propDecorators: { title: [{
type: Input
}], datasource: [{
type: Input
}], color: [{
type: Input
}], showDocPanel: [{
type: Input
}], showMenuIcon: [{
type: Input
}], iconParser: [{
type: Input
}], searchConfig: [{
type: Input
}], active: [{
type: Input
}], itemClick: [{
type: Output
}] } });
/*
* Public API Surface of ngx-menubar
*/
/**
* Generated bundle index. Do not edit.
*/
export { CyxMenubarComponent };
//# sourceMappingURL=ngx-menubar.mjs.map