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

Kendo UI Navigation for Angular

/**-----------------------------------------------------------------------------------------
* Copyright © 2025 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]({% slug overview_bottomnavigation %}).
 *
 * @example
 * ```ts-no-run
 * _@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;
    /**
     * The collection of items that will be rendered in the BottomNavigation ([see example]({% slug items_bottomnavigation %})).
     */
    items: any[];
    /**
     * Sets a top border to the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
     *
     * @default false
     */
    border: boolean;
    /**
     * Disables the whole BottomNavigation.
     *
     * @default false
     */
    disabled: boolean;
    /**
     * The fill style of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
     *
     * * The possible values are:
     * * (Default) `flat`
     * * `solid`
     */
    set fill(fill: BottomNavigationFill);
    get fill(): BottomNavigationFill;
    /**
     * Specifies how the icon and text label are positioned in the BottomNavigation items.
     *
     * The possible values are:
     * * (Default) `vertical` - Renders the text below the icon.
     * * `horizontal` - Renders the icon and the text on the same line.
     */
    set itemFlow(itemFlow: BottomNavigationItemFlow);
    get itemFlow(): BottomNavigationItemFlow;
    /**
     * Specifies the position and behavior of the BottomNavigation when the page is scrollable ([see example]({% slug positioning_bottomnavigation %})).
     *
     * The possible values are:
     * * (Default) `fixed` - The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
     * * `sticky` - Positions the BottomNavigation at the end of the scrollable container.
     */
    set positionMode(positionMode: BottomNavigationPositionMode);
    get positionMode(): BottomNavigationPositionMode;
    /**
     * Specifies the theme color of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
     *
     * * The possible values are:
     * * (Default) `primary` - Applies coloring based on the primary theme color.
     * * `secondary` - Applies coloring based on the secondary theme color.
     * * `tertiary` - Applies coloring based on the tertiary theme color.
     * * `info` - Applies coloring based on the info theme color.
     * * `success` - Applies coloring based on the success theme color.
     * * `warning` - Applies coloring based on the warning theme color.
     * * `error` - Applies coloring based on the error theme color.
     * * `dark` - Applies coloring based on the dark theme color.
     * * `light` - Applies coloring based on the light theme color.
     * * `inverse` - Applies coloring based on the inverted theme color.
     */
    set themeColor(themeColor: BottomNavigationThemeColor);
    get themeColor(): BottomNavigationThemeColor;
    /**
     * Fires each time an item is selected. 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>;
}