@progress/kendo-angular-toolbar
Version:
Kendo UI Angular Toolbar component - a single UI element that organizes buttons and other navigation elements
88 lines (87 loc) • 3.94 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 custom tools.
*/
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 be focused.
* If the returned value is `false`, the tool will not be part of the keyboard navigation.
* @returns `true` if the tool should take part in keyboard navigation.
*/
canFocus() {
return false;
}
/**
* Called when the tool is focused.
* The method accepts as argument the original browser event, which can be a `KeyboardEvent`, `MouseEvent` or `FocusEvent`.
* @param {Event} _ev - This is the event that caused the tool to be focused.
*/
focus(_ev) {
/* noop */
}
/**
* Called when the tool is focused and one of the arrow keys is pressed.
* The returned boolean value determines whether the `ToolBarComponent` will move the focus to the next/previous `ToolBarToolComponent`
* ([see example]({% slug customcontroltypes_toolbar %}#toc-adding-keyboard-navigation)).
* @param {KeyboardEvent} _ev - The last pressed arrow key
* @returns a boolean value determines whether the focus will move to the next/previous component.
*/
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
}] } });