import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
import { BehaviorSubject } from "rxjs";
import * as i0 from "@angular/core";
/**
 * Menubar menu item type.
 */
export interface IMenuItem {
    id: number | string;
    title: string;
    icon?: string;
    children?: IMenuItem[];
    data?: {
        [key: string]: any;
    };
}
/**
 * Global menu item Search configuration type.
 */
export interface SearchConfig {
    placeHolder?: string;
    predicate?: (keyword: string, item: IMenuItem) => boolean;
}
/**
 * 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
 */
export declare class CyxMenubarComponent implements OnInit, OnChanges {
    private sanitizer;
    /**
     * Default Top menu title.
     */
    title: string;
    /**
     * Menu items.
     */
    datasource: IMenuItem[];
    /**
     * Theme color, 'dark' or 'light'.
     */
    color: string;
    /**
     * Show bottom doc panel.
     */
    showDocPanel: boolean;
    /**
     * Show menu icon.
     */
    showMenuIcon: boolean;
    /**
     * 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.
     */
    iconParser: (icon: string) => string;
    /**
     * Global menu item search configuration.
     */
    searchConfig: SearchConfig;
    /**
     * Active item id.
     */
    active?: number | string;
    /**
     * Menu item click event.
     */
    itemClick: EventEmitter<IMenuItem>;
    protected indices: number[];
    protected currentTitle?: string | null;
    protected currentChildren: IMenuItem[];
    protected flattenItems: IMenuItem[];
    /**
     * Selected item.
     */
    selectedItem: IMenuItem | null;
    private searchPredicate;
    private _displayItems;
    protected get displayItems(): IMenuItem[];
    /**
     * Is menu top level.
     */
    get isTopMenu(): boolean;
    protected readonly searchTerms: BehaviorSubject<string>;
    constructor(sanitizer: DomSanitizer);
    ngOnChanges(changes: SimpleChanges): void;
    ngOnInit(): void;
    protected doActiveItemById(id: number | string): void;
    private doFlatDatasource;
    protected iconHTML(icon: string): SafeHtml;
    protected clickItem(item: IMenuItem, index: number): void;
    protected backward(): void;
    protected trackById(_: number, item: IMenuItem): string | number;
    protected searchItems(value: string): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<CyxMenubarComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<CyxMenubarComponent, "cyx-menubar", never, { "title": "title"; "datasource": "datasource"; "color": "color"; "showDocPanel": "showDocPanel"; "showMenuIcon": "showMenuIcon"; "iconParser": "iconParser"; "searchConfig": "searchConfig"; "active": "active"; }, { "itemClick": "itemClick"; }, never, ["*"], true>;
}