@progress/kendo-angular-navigation/bottomnavigation/bottomnavigation.component.d.ts

Kendo UI Navigation for Angular

/**-----------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { EventEmitter, ElementRef, Renderer2, NgZone, ChangeDetectorRef, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { BottomNavigationSelectEvent } from './events/select-event';
import { BottomNavigationItemFlow } from './types/bottomnavigation-item-flow';
import { BottomNavigationFill } from './types/bottomnavigation-fill';
import { BottomNavigationPositionMode } from './types/bottomnavigation-position-mode';
import { BottomNavigationThemeColor } from './types/bottomnavigation-theme-color';
import { BottomNavigationItemTemplateDirective } from './templates/item-template.directive';
import * as i0 from "@angular/core";
/**
 * Represents the [Kendo UI BottomNavigation component for Angular](https://www.telerik.com/kendo-angular-ui/components/navigation/bottomnavigation).
 *
 * Use the BottomNavigation component to let users quickly switch between primary views in your app.
 *
 * @example
 * ```typescript
 * @Component({
 *      selector: 'my-app',
 *      template: `
 *          <kendo-bottomnavigation [items]="items"></kendo-bottomnavigation>
 *      `
 * })
 * class AppComponent {
 *      public items: Array<any> = [
 *          { text: 'Inbox', icon: 'envelop', selected: true },
 *          { text: 'Calendar', icon: 'calendar'},
 *          { text: 'Profile', icon: 'user'}
 *      ];
 * }
 * ```
 */
export declare class BottomNavigationComponent implements OnInit, AfterViewInit, OnDestroy {
    private localization;
    private hostElement;
    private ngZone;
    private changeDetector;
    private renderer;
    /**
     * Provides the collection of items rendered in the BottomNavigation ([see example](https://www.telerik.com/kendo-angular-ui/components/navigation/bottomnavigation/items)).
     */
    items: any[];
    /**
     * Shows a top border on the BottomNavigation ([see example](https://www.telerik.com/kendo-angular-ui/components/navigation/bottomnavigation/appearance)).
     *
     * @default false
     */
    border: boolean;
    /**
     * Disables the entire BottomNavigation.
     *
     * @default false
     */
    disabled: boolean;
    /**
     * Sets the fill style of the BottomNavigation ([see example](https://www.telerik.com/kendo-angular-ui/components/navigation/bottomnavigation/appearance)). The default value is set by the Kendo theme.
     */
    set fill(fill: BottomNavigationFill);
    get fill(): BottomNavigationFill;
    /**
     * Controls how the icon and text label are positioned in the BottomNavigation items.
     *
     * @default 'vertical'
     */
    set itemFlow(itemFlow: BottomNavigationItemFlow);
    get itemFlow(): BottomNavigationItemFlow;
    /**
     * Sets the position and behavior of the BottomNavigation when the page is scrollable ([see example](https://www.telerik.com/kendo-angular-ui/components/navigation/bottomnavigation/position-mode)).
     *
     * @default 'fixed'
     */
    set positionMode(positionMode: BottomNavigationPositionMode);
    get positionMode(): BottomNavigationPositionMode;
    /**
     * Sets the theme color of the BottomNavigation ([see example](https://www.telerik.com/kendo-angular-ui/components/navigation/bottomnavigation/appearance)).
     */
    set themeColor(themeColor: BottomNavigationThemeColor);
    get themeColor(): BottomNavigationThemeColor;
    /**
     * Fires when a user selects an item. This event is preventable.
     */
    select: EventEmitter<BottomNavigationSelectEvent>;
    /**
     * @hidden
     */
    hostClass: boolean;
    /**
     * @hidden
     */
    get borderClass(): boolean;
    /**
     * @hidden
     */
    get disabledClass(): boolean;
    /**
     * @hidden
     */
    role: string;
    /**
     * @hidden
     */
    direction: string;
    /**
     * @hidden
     */
    itemTemplate: BottomNavigationItemTemplateDirective;
    /**
     * @hidden
     */
    selectedIdx: number;
    private _fill;
    private _itemFlow;
    private _positionMode;
    private _themeColor;
    private _nativeHostElement;
    private dynamicRTLSubscription;
    private subscriptions;
    private rtl;
    constructor(localization: LocalizationService, hostElement: ElementRef, ngZone: NgZone, changeDetector: ChangeDetectorRef, renderer: Renderer2);
    /**
     * @hidden
     */
    ngOnInit(): void;
    /**
     * @hidden
     */
    ngAfterViewInit(): void;
    /**
     * @hidden
     */
    ngOnDestroy(): void;
    /**
     * @hidden
     */
    selectItem(idx: number, args: any): void;
    private applyClasses;
    private initDomEvents;
    private clickHandler;
    private keyDownHandler;
    private getBottomNavigationItemIndex;
    static ɵfac: i0.ɵɵFactoryDeclaration<BottomNavigationComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<BottomNavigationComponent, "kendo-bottomnavigation", ["kendoBottomNavigation"], { "items": { "alias": "items"; "required": false; }; "border": { "alias": "border"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "fill": { "alias": "fill"; "required": false; }; "itemFlow": { "alias": "itemFlow"; "required": false; }; "positionMode": { "alias": "positionMode"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; }, { "select": "select"; }, ["itemTemplate"], never, true, never>;
}