@progress/kendo-angular-listbox
Version:
Kendo UI for Angular ListBox
216 lines (215 loc) • 6.45 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 { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList, Renderer2 } from '@angular/core';
import { ListBoxSelectionEvent, ListBoxSelectionService } from './selection.service';
import { ItemTemplateDirective } from './item-template.directive';
import { Direction } from './util';
import { ListBoxSize } from './size';
import { ActionName, ListBoxToolbarConfig, Tool } from './toolbar';
import { Button } from '@progress/kendo-angular-buttons';
import { KeyboardNavigationService } from './keyboard-navigation.service';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { SVGIcon } from '@progress/kendo-svg-icons';
import * as i0 from "@angular/core";
/**
* Represents the Kendo UI ListBox component for Angular.
* Provides a list of items from which you can select and transfer data between connected ListBoxes
* ([see overview]({% slug overview_listbox %})).
*
* @example
* ```typescript
* @Component({
* selector: 'my-app',
* template: `
* <kendo-listbox
* [data]="items"
* textField="name"
* [toolbar]="true">
* </kendo-listbox>
* `
* })
* export class AppComponent {
* items = [
* { name: 'Item 1' },
* { name: 'Item 2' }
* ];
* }
* ```
*
* @remarks
* Supported children components are: {@link CustomMessagesComponent}.
*/
export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestroy {
keyboardNavigationService: KeyboardNavigationService;
selectionService: ListBoxSelectionService;
private hostElement;
private renderer;
private zone;
private localization;
private changeDetector;
/**
* @hidden
*/
listboxClassName: boolean;
/**
* @hidden
*/
direction: Direction;
/**
* @hidden
*/
itemTemplate: ItemTemplateDirective;
/**
* @hidden
*/
listboxElement: ElementRef;
/**
* @hidden
*/
listboxItems: QueryList<any>;
/**
* @hidden
*/
toolbarElement: ElementRef;
/**
* @hidden
*/
tools: QueryList<Button>;
/**
* Specifies the field of the data item that provides the text content of the nodes.
*/
textField: string;
/**
* Specifies the data that the ListBox displays.
*
* @default []
*/
data: any[];
/**
* Specifies the size of the component.
*
*/
set size(size: ListBoxSize);
get size(): ListBoxSize;
/**
* Configures the toolbar of the ListBox.
* Specifies whether to display a toolbar and which tools and position to use.
*/
set toolbar(config: ListBoxToolbarConfig);
/**
* Specifies the value of the `aria-label` attribute of the Listbox element.
*
* @default 'Listbox'
*/
listboxLabel: string;
/**
* Specifies the value of the `aria-label` attribute of the Listbox toolbar element.
*
* @default 'Toolbar'
*/
listboxToolbarLabel: string;
/**
* Specifies a function that determines if a specific item is disabled.
*/
itemDisabled: (item: any) => boolean;
/**
* Fires when you select a different ListBox item.
* Also fires when you move a node, because moving changes its index.
*/
selectionChange: EventEmitter<ListBoxSelectionEvent>;
/**
* Fires when you click a ListBox item.
*/
actionClick: EventEmitter<ActionName>;
/**
* @hidden
*/
getChildListbox: EventEmitter<any>;
/**
* @hidden
*/
get listClasses(): string;
/**
* @hidden
*/
messageFor(key: string): string;
/**
* @hidden
*/
selectedTools: Tool[];
/**
* @hidden
*/
listboxId: string;
/**
* @hidden
*/
toolbarId: string;
/**
* @hidden
*/
childListbox: ListBoxComponent;
/**
* @hidden
*/
parentListbox: ListBoxComponent;
/**
* @hidden
*/
caretAltLeftIcon: SVGIcon;
/**
* @hidden
*/
caretAltRightIcon: SVGIcon;
private localizationSubscription;
private _size;
private subs;
private shouldFireFocusIn;
constructor(keyboardNavigationService: KeyboardNavigationService, selectionService: ListBoxSelectionService, hostElement: ElementRef, renderer: Renderer2, zone: NgZone, localization: LocalizationService, changeDetector: ChangeDetectorRef);
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnDestroy(): void;
/**
* @hidden
*/
performAction(actionName: ActionName): void;
/**
* Selects a ListBox node programmatically.
*/
selectItem(index: number): void;
/**
* Clears the ListBox selection programmatically.
*/
clearSelection(): void;
/**
* Gets the index of the currently selected item in the ListBox.
*/
get selectedIndex(): number;
/**
* @hidden
*/
get getListboxId(): string;
/**
* @hidden
*/
getText(dataItem: any): string;
/**
* @hidden
*/
toolIcon(icon: string): string;
/**
* @hidden
*/
toolSVGIcon(icon: SVGIcon): SVGIcon;
private onClickEvent;
private initSubscriptions;
private onFocusIn;
private setIds;
private onDeleteEvent;
private setToolbarClass;
private setSizingClass;
static ɵfac: i0.ɵɵFactoryDeclaration<ListBoxComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ListBoxComponent, "kendo-listbox", never, { "textField": { "alias": "textField"; "required": false; }; "data": { "alias": "data"; "required": false; }; "size": { "alias": "size"; "required": false; }; "toolbar": { "alias": "toolbar"; "required": false; }; "listboxLabel": { "alias": "listboxLabel"; "required": false; }; "listboxToolbarLabel": { "alias": "listboxToolbarLabel"; "required": false; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; }; }, { "selectionChange": "selectionChange"; "actionClick": "actionClick"; "getChildListbox": "getChildListbox"; }, ["itemTemplate"], never, true, never>;
}