@progress/kendo-angular-toolbar
Version:
Kendo UI Angular Toolbar component - a single UI element that organizes buttons and other navigation elements
107 lines (106 loc) • 4.25 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { TemplateRef, Input, Directive, ElementRef, inject, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
/**
* Represents the base ToolBar Tool component for Angular.
*
* Extend this class to create a custom tool for the ToolBar.
*
* @example
* ```typescript
* import { Component } from '@angular/core';
* import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
*
* @Component({
* providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => CustomToolComponent) }],
* selector: 'custom-tool',
* })
*
* export class CustomToolComponent extends ToolBarToolComponent {
*
* constructor() {
* super();
* }
* }
* ```
*/
export class ToolBarToolComponent {
toolbarTemplate;
sectionTemplate;
popupTemplate;
tabIndex = -1; //Focus movement inside the toolbar is managed using roving tabindex.
overflows = true;
visibility;
element;
isBuiltInTool = false;
/**
* @hidden
*/
isHidden = false;
/**
* @hidden
*/
location;
constructor() {
this.element = inject(ElementRef);
}
// this should be replaced with showTool: DisplayMode = 'both';
/**
* @hidden
*/
responsive = true;
get toolbarDisplay() {
return this.overflows ? 'none' : 'inline-flex';
}
get overflowDisplay() {
return this.overflows ? 'block' : 'none';
}
/**
* Determines if the tool can receive focus.
* Returns `true` if the tool participates in keyboard navigation.
* @returns `true` if the tool is focusable.
*/
canFocus() {
return false;
}
/**
* Called when the tool receives focus.
* Accepts the original browser event, which can be a `KeyboardEvent`, `MouseEvent`, or `FocusEvent`.
* @param {Event} _ev - The event that triggers focus for the tool.
*/
focus(_ev) {
/* noop */
}
/**
* Called when the tool is focused and an arrow key is pressed.
* Returns a boolean value that determines if the `ToolBarComponent` moves focus to the next or previous tool
* ([see example]({% slug customcontroltypes_toolbar %}#toc-adding-keyboard-navigation)).
* @param {KeyboardEvent} _ev - The last pressed arrow key.
* @returns `true` if focus moves to another tool.
*/
handleKey(_ev) {
return false;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarToolComponent, isStandalone: true, inputs: { responsive: "responsive" }, viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "sectionTemplate", first: true, predicate: ["sectionTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarToolComponent, decorators: [{
type: Directive,
args: [{
standalone: true
}]
}], ctorParameters: function () { return []; }, propDecorators: { toolbarTemplate: [{
type: ViewChild,
args: ['toolbarTemplate', { static: true }]
}], sectionTemplate: [{
type: ViewChild,
args: ['sectionTemplate', { static: true }]
}], popupTemplate: [{
type: ViewChild,
args: ['popupTemplate', { static: true }]
}], responsive: [{
type: Input
}] } });