@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
155 lines (154 loc) • 7.42 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 { Component, Input, ElementRef, HostBinding, HostListener } from '@angular/core';
import { closest, isDocumentAvailable, isFocusable } from '@progress/kendo-angular-common';
import { ContextService } from './../../common/provider.service';
import { NgIf, NgTemplateOutlet } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "./../../common/provider.service";
/**
* @hidden
*/
export class ToolbarComponent {
ctx;
wrapper;
context = {};
role = 'toolbar';
hostClasses = true;
get sizeSmallClass() {
return this.size === 'small';
}
get sizeMediumClass() {
return this.size === 'medium' || !this.size;
}
set position(value) {
this.context.position = value;
}
set size(size) {
this._size = size;
if (size === 'none') {
this.wrapper.nativeElement.classList.remove('k-toolbar-sm', 'k-toolbar-md');
}
}
get size() {
return this._size;
}
clickHandler(ev) {
if (this.navigable && isDocumentAvailable()) {
const closestFocusable = closest(ev.target, isFocusable);
const targetIndex = this.navigationService.navigableElements.indexOf(closestFocusable);
if (targetIndex > -1) {
this.navigationService.currentActiveIndex = targetIndex;
}
this.navigationService.updateFocus();
if (ev.target === this.wrapper.nativeElement) {
this.navigationService.focus();
}
}
}
arrowLeftListener() {
if (this.navigable && isDocumentAvailable() && this.navigationService.navigableElements.length) {
this.navigationService.currentActiveIndex--;
if (this.navigationService.currentActiveIndex < 0) {
this.navigationService.currentActiveIndex = this.navigationService.navigableElements.length - 1;
}
this.navigationService.updateFocus();
}
}
arrowRightListener() {
if (this.navigable && isDocumentAvailable() && this.navigationService.navigableElements.length) {
this.navigationService.currentActiveIndex++;
if (this.navigationService.currentActiveIndex >= this.navigationService.navigableElements.length) {
this.navigationService.currentActiveIndex = 0;
}
this.navigationService.updateFocus();
}
}
homeKeyListener(e) {
if (this.navigable && isDocumentAvailable() && this.navigationService.navigableElements.length) {
e.preventDefault();
this.navigationService.currentActiveIndex = 0;
this.navigationService.updateFocus();
}
}
endKeyListener(e) {
if (this.navigable && isDocumentAvailable() && this.navigationService.navigableElements.length) {
e.preventDefault();
this.navigationService.currentActiveIndex = this.navigationService.navigableElements.length - 1;
this.navigationService.updateFocus();
}
}
navigable;
get toolbarTemplateRef() {
return this.ctx.grid.toolbarTemplate ? this.ctx.grid.toolbarTemplate.templateRef : undefined;
}
_size = 'medium';
navigationService;
constructor(ctx, wrapper) {
this.ctx = ctx;
this.wrapper = wrapper;
this.navigationService = this.ctx[`${this.wrapper.nativeElement.getAttribute('position')}ToolbarNavigation`];
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.ContextService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarComponent, isStandalone: true, selector: "kendo-grid-toolbar", inputs: { position: "position", size: "size", navigable: "navigable" }, host: { listeners: { "click": "clickHandler($event)", "keydown.arrowleft": "arrowLeftListener($event)", "keydown.arrowright": "arrowRightListener($event)", "keydown.home": "homeKeyListener($event)", "keydown.end": "endKeyListener($event)" }, properties: { "attr.role": "this.role", "class.k-toolbar": "this.hostClasses", "class.k-grid-toolbar": "this.hostClasses", "class.k-toolbar-solid": "this.hostClasses", "class.k-toolbar-sm": "this.sizeSmallClass", "class.k-toolbar-md": "this.sizeMediumClass" } }, ngImport: i0, template: `
<ng-template
*ngIf="toolbarTemplateRef"
[ngTemplateOutlet]="toolbarTemplateRef"
[ngTemplateOutletContext]="context"></ng-template>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-grid-toolbar',
template: `
<ng-template
*ngIf="toolbarTemplateRef"
[ngTemplateOutlet]="toolbarTemplateRef"
[ngTemplateOutletContext]="context"></ng-template>
`,
standalone: true,
imports: [NgIf, NgTemplateOutlet]
}]
}], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i0.ElementRef }]; }, propDecorators: { role: [{
type: HostBinding,
args: ['attr.role']
}], hostClasses: [{
type: HostBinding,
args: ['class.k-toolbar']
}, {
type: HostBinding,
args: ['class.k-grid-toolbar']
}, {
type: HostBinding,
args: ['class.k-toolbar-solid']
}], sizeSmallClass: [{
type: HostBinding,
args: ['class.k-toolbar-sm']
}], sizeMediumClass: [{
type: HostBinding,
args: ['class.k-toolbar-md']
}], position: [{
type: Input
}], size: [{
type: Input
}], clickHandler: [{
type: HostListener,
args: ['click', ['$event']]
}], arrowLeftListener: [{
type: HostListener,
args: ['keydown.arrowleft', ['$event']]
}], arrowRightListener: [{
type: HostListener,
args: ['keydown.arrowright', ['$event']]
}], homeKeyListener: [{
type: HostListener,
args: ['keydown.home', ['$event']]
}], endKeyListener: [{
type: HostListener,
args: ['keydown.end', ['$event']]
}], navigable: [{
type: Input
}] } });