@progress/kendo-angular-toolbar
Version:
Kendo UI Angular Toolbar component - a single UI element that organizes buttons and other navigation elements
286 lines (285 loc) • 9.54 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 { TemplateRef, ElementRef, QueryList, EventEmitter, ViewContainerRef, NgZone, Renderer2, SimpleChanges, ChangeDetectorRef } from '@angular/core';
import { PopupService, PopupRef } from '@progress/kendo-angular-popup';
import { ResizeSensorComponent } from '@progress/kendo-angular-common';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { RefreshService } from './refresh.service';
import { NavigationService } from './navigation.service';
import { PopupSettings } from './popup-settings';
import { ToolBarToolComponent } from './tools/toolbar-tool.component';
import { ToolbarSize } from './common/size';
import { PreventableEvent } from './common/preventable-event';
import { Direction } from './direction';
import { RendererClickPayload } from './common/renderer-click';
import { SVGIcon } from '@progress/kendo-svg-icons';
import { ToolbarToolsService } from './tools/tools.service';
import { ToolbarFillMode } from './common/fillmode';
import { OverflowMode } from './common/overflow-mode';
import { ToolbarOverflowSettings } from './common/overflow-settings';
import { ToolbarScrollButtonsPosition } from './common/scroll-buttons';
import { ScrollService } from './scroll.service';
import { DisplayMode } from './display-mode';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI ToolBar component for Angular]({% slug overview_toolbar %}).
*/
export declare class ToolBarComponent {
localization: LocalizationService;
private popupService;
refreshService: RefreshService;
private navigationService;
element: ElementRef;
private zone;
private renderer;
private _cdr;
private toolsService;
private scrollService;
get overflowClass(): string;
/**
* Configures the overflow mode. Used to specify how tools will be rendered when the total size of all tools is greater than the size of the Toolbar container.
* @default false
*/
set overflow(overflow: boolean | OverflowMode | ToolbarOverflowSettings);
get overflow(): boolean | OverflowMode | ToolbarOverflowSettings;
get showScrollButtons(): boolean;
/**
* @hidden
*/
set resizable(value: boolean);
get resizable(): boolean;
/**
* @hidden
*/
get hasScrollButtons(): {
visible: boolean;
position: ToolbarScrollButtonsPosition;
};
/**
* @hidden
*/
get isScrollMode(): boolean;
/**
* @hidden
*/
get showMenu(): boolean;
/**
* @hidden
*/
get overflowEnabled(): boolean;
/**
* Configures the popup of the ToolBar overflow button ([see example](slug:responsive_toolbar#customizing-the-popup)).
*
* The available options are:
* - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
* - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
*/
set popupSettings(settings: PopupSettings);
get popupSettings(): PopupSettings;
/**
* The fillMode property specifies the background and border styles of the Toolbar
* ([see example](slug:appearance_toolbar#toc-fill-mode)).
*
* @default 'solid'
*/
set fillMode(fillMode: ToolbarFillMode);
get fillMode(): ToolbarFillMode;
/**
* Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the ToolBar.
*/
tabindex: number;
/**
* Specifies the padding of all Toolbar elements.
*
* The possible values are:
* * `small`
* * `medium` (default)
* * `large`
* * `none`
*/
set size(size: ToolbarSize);
get size(): ToolbarSize;
/**
* @hidden
*/
set tabIndex(tabIndex: number);
get tabIndex(): number;
/**
* Specifies the icons visibility for all tools in the ToolBar.
* This can be overridden by the `showIcon` property of each tool.
*/
set showIcon(value: DisplayMode | boolean);
/**
* Specifies the text visibility for all tools in the ToolBar.
* This can be overridden by the `showText` property of each tool.
*/
set showText(value: DisplayMode | boolean);
/**
* Fires when the overflow popup of the ToolBar is opened.
*/
open: EventEmitter<PreventableEvent>;
/**
* Fires when the overflow popup of the ToolBar is closed.
*/
close: EventEmitter<PreventableEvent>;
allTools: QueryList<ToolBarToolComponent>;
overflowButton: ElementRef;
popupTemplate: TemplateRef<any>;
popupSectionTemplate: TemplateRef<any>;
scrollContainer: ElementRef;
resizeSensor: ResizeSensorComponent;
container: ViewContainerRef;
prevScrollButton: ElementRef;
nextScrollButton: ElementRef;
startButtonGroup: ElementRef;
endButtonGroup: ElementRef;
scrollSeparator: ElementRef;
popupRef: PopupRef;
direction: Direction;
get appendTo(): ViewContainerRef;
set popupOpen(open: boolean);
get popupOpen(): boolean;
/**
* @hidden
*/
prevButtonIcon: SVGIcon;
/**
* @hidden
*/
nextButtonIcon: SVGIcon;
/**
* @hidden
*/
propertyChange: EventEmitter<{
property: string;
value: any;
}>;
hostClass: boolean;
get scrollableClass(): boolean;
get sectionClass(): boolean;
private _overflow;
private _popupSettings;
private cachedOverflowAnchorWidth;
private _open;
private toolbarKeydownListener;
private overflowKeydownListener;
private sectionKeydownListener;
private cancelRenderedToolsSubscription$;
private cachedGap;
private _size;
private _fillMode;
private _showText;
private _showIcon;
private overflowButtonClickedTime;
private showAutoButtons;
private scrollButtonStateChangeSub;
private scrollContainerScrollSub;
/**
* @hidden
*/
get normalizedOverflow(): ToolbarOverflowSettings;
private subscriptions;
private popupSubs;
private focusedByPointer;
/**
* @hidden
*/
onFocus(ev: any): void;
/**
* @hidden
*/
onFocusOut(event: any): void;
role: string;
get getDir(): string;
get resizableClass(): boolean;
constructor(localization: LocalizationService, popupService: PopupService, refreshService: RefreshService, navigationService: NavigationService, element: ElementRef, zone: NgZone, renderer: Renderer2, _cdr: ChangeDetectorRef, toolsService: ToolbarToolsService, scrollService: ScrollService);
ngAfterContentInit(): void;
ngAfterViewInit(): void;
ngOnInit(): void;
ngOnChanges(changes: SimpleChanges): void;
ngOnDestroy(): void;
/**
* @hidden
*/
showOverflowSeparator: boolean;
/**
* @hidden
*/
get moreToolsTitle(): string;
/**
* @hidden
*/
get cdr(): ChangeDetectorRef;
/**
* @hidden
*/
get sectionSizeClass(): string;
/**
* @hidden
*/
getScrollButtonTitle(buttonType: string): string;
/**
* @hidden
*/
scrollTools(dir: string): void;
/**
* @hidden
*/
onRendererClick(data: RendererClickPayload): void;
/**
* @hidden
*/
overflowButtonIcon(iconType: string): any;
/**
* @hidden
*/
showPopup(): void;
/**
* Toggles the visibility of the overflow popup.
*/
toggle(popupOpen?: boolean): void;
/**
* @hidden
*/
onResize(): void;
/**
* @hidden
*/
onPopupOpen(): void;
/**
* @hidden
*/
onPopupClose(): void;
/**
* @hidden
*/
overflowBtnId: string;
/**
* @hidden
*/
popupId: string;
private displayAnchor;
private get popupWidth();
private get popupHeight();
private get overflowAnchorWidth();
private get gap();
private get childrenWidth();
get visibleTools(): ToolBarToolComponent[];
get overflowTools(): ToolBarToolComponent[];
private shrink;
private stretch;
private hideLastVisibleTool;
private showFirstHiddenTool;
private setPopupContentDimensions;
private destroyPopup;
private handleClasses;
private normalizePopupClasses;
private setScrollableOverlayClasses;
private handleScrollModeUpdates;
private removeSubscriptions;
private normalizeDisplayValue;
static ɵfac: i0.ɵɵFactoryDeclaration<ToolBarComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ToolBarComponent, "kendo-toolbar", ["kendoToolBar"], { "overflow": { "alias": "overflow"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "showText": { "alias": "showText"; "required": false; }; }, { "open": "open"; "close": "close"; }, ["allTools"], never, true, never>;
}