@progress/kendo-angular-navigation
Version:
Kendo UI Navigation for Angular
127 lines (126 loc) • 5.1 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* 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, ChangeDetectorRef, NgZone, AfterViewInit, OnDestroy, QueryList, OnInit, Renderer2 } from '@angular/core';
import { Observable } from 'rxjs';
import { ResizeSensorComponent } from '@progress/kendo-angular-common';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { BreadCrumbItemModel, BreadCrumbItem } from './models/breadcrumb-item.interface';
import { BreadCrumbCollapseMode } from './models/collapse-mode';
import { BreadCrumbItemTemplateDirective } from './template-directives/item-template.directive';
import { BreadCrumbListComponent } from './list.component';
import { SVGIcon } from '@progress/kendo-angular-icons';
import { BreadcrumbSize } from './models/breadcrumb-size';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI Breadcrumb component for Angular](slug:overview_breadcrumb).
*
* Use the Breadcrumb component to allow users to navigate through a hierarchical structure. The component automatically handles overflow
* scenarios and supports customizable separators, templates, and collapse modes.
*
* @example
* ```typescript
* @Component({
* selector: 'my-app',
* template: `
* <kendo-breadcrumb
* [items]="items"
* (itemClick)="onItemClick($event)">
* </kendo-breadcrumb>
* `
* })
* class AppComponent {
* public items: BreadCrumbItem[] = [
* { text: 'Home', title: 'Home', icon: 'home' },
* { text: 'Kids', title: 'Kids' },
* { text: '8y-16y', title: '8y-16y', disabled: true },
* { text: 'New collection', title: 'New collection' },
* { text: 'Jeans', title: 'Jeans' }
* ];
*
* public onItemClick(item: BreadCrumbItem): void {
* console.log(item);
* }
* }
* ```
*/
export declare class BreadCrumbComponent implements OnInit, AfterViewInit, OnDestroy {
private localization;
private el;
private cdr;
private zone;
private renderer;
/**
* Configures the collection of items that will be rendered in the Breadcrumb.
*/
set items(items: any[]);
get items(): any[];
/**
* Specifies the name of a [built-in font icon](slug:icon_list) in a Kendo UI theme to be rendered as a separator.
*/
separatorIcon: string;
/**
* Defines an [`SVGIcon`](slug:api_icons_svgicon) to be rendered as a separator.
*/
separatorSVGIcon: SVGIcon;
/**
* Controls the collapse mode of the Breadcrumb.
* For more information and example, refer to the [Collapse Modes]({% slug collapse_modes_breadcrumb %}) article.
*
* @default `auto`
*/
set collapseMode(mode: BreadCrumbCollapseMode);
get collapseMode(): BreadCrumbCollapseMode;
/**
* Determines the padding of all Breadcrumb elements.
*
* @default `medium`
*/
set size(size: BreadcrumbSize);
get size(): BreadcrumbSize;
/**
* Fires when you click a Breadcrumb item. The event will not be fired by disabled items and the last item.
*/
itemClick: EventEmitter<BreadCrumbItem>;
/**
* @hidden
*/
resizeSensor: ResizeSensorComponent;
/**
* @hidden
*/
itemsContainers: QueryList<ElementRef<HTMLOListElement>>;
/**
* @hidden
*/
listComponent: BreadCrumbListComponent;
/**
* @hidden
*/
itemTemplate: BreadCrumbItemTemplateDirective;
hostClasses: boolean;
get wrapMode(): boolean;
hostAriaLabel: string;
get getDir(): string;
itemsData$: Observable<BreadCrumbItemModel[]>;
firstItem$: Observable<BreadCrumbItemModel[]>;
private _items;
private _collapseMode;
private _size;
private updateItems;
private afterViewInit;
private subscriptions;
private direction;
constructor(localization: LocalizationService, el: ElementRef<HTMLElement>, cdr: ChangeDetectorRef, zone: NgZone, renderer: Renderer2);
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnDestroy(): void;
private handleResize;
private shouldResize;
private attachResizeHandler;
private handleClasses;
private resizeHandler;
static ɵfac: i0.ɵɵFactoryDeclaration<BreadCrumbComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<BreadCrumbComponent, "kendo-breadcrumb", ["kendoBreadCrumb"], { "items": { "alias": "items"; "required": false; }; "separatorIcon": { "alias": "separatorIcon"; "required": false; }; "separatorSVGIcon": { "alias": "separatorSVGIcon"; "required": false; }; "collapseMode": { "alias": "collapseMode"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "itemClick": "itemClick"; }, ["itemTemplate"], never, true, never>;
}