@progress/kendo-angular-pager
Version:
Kendo UI Angular Pager
69 lines (68 loc) • 3.36 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 { Directive, ElementRef, Renderer2 } from '@angular/core';
import { Subscription } from 'rxjs';
import { focusableSelector } from '../util';
import { PagerNavigationService } from './navigation.service';
import * as i0 from "@angular/core";
import * as i1 from "./navigation.service";
/**
* Represents the Kendo UI Pager focusable directive for Angular. Apply this directive to custom focusable elements in the [`kendoPagerTemplate`]({% slug api_pager_pagertemplatedirective %}) to include them in the built-in Pager keyboard navigation.
*
* @example
* ```html
* <kendo-pager [skip]="skip" [pageSize]="pageSize" [total]="total">
* <ng-template kendoPagerTemplate>
* <button kendoPagerFocusable type="button">Custom Button</button>
* </ng-template>
* </kendo-pager>
* ```
*/
export class PagerFocusableDirective {
navigationService;
element;
renderer;
subscriptions = new Subscription();
constructor(navigationService, element, renderer) {
this.navigationService = navigationService;
this.element = element;
this.renderer = renderer;
}
ngOnInit() {
if (!(this.nativeElement instanceof HTMLElement)) {
return;
}
this.subscriptions.add(this.navigationService.innerNavigationChange.subscribe(this.innerNavigationChange.bind(this)));
}
ngOnDestroy() {
this.subscriptions.unsubscribe();
}
get nativeElement() {
return this.element.nativeElement;
}
innerNavigationChange(value) {
if (!this.navigationService.isNavigable) {
return;
}
const index = value ? '0' : '-1';
if (this.nativeElement.matches(focusableSelector)) {
this.renderer.setAttribute(this.nativeElement, 'tabindex', index);
}
const focusableElements = this.nativeElement.querySelectorAll(focusableSelector);
focusableElements.forEach(el => {
this.renderer.setAttribute(el, 'tabindex', index);
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerFocusableDirective, deps: [{ token: i1.PagerNavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PagerFocusableDirective, isStandalone: true, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerFocusableDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoPagerFocusable]',
exportAs: 'kendoPagerFocusable',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i1.PagerNavigationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; } });