@progress/kendo-angular-conversational-ui
Version:
Kendo UI for Angular Conversational UI components
72 lines (71 loc) • 3.52 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 { ToolbarNavigationService } from './toolbar-navigation.service';
import { Keys, focusableSelector } from '@progress/kendo-angular-common';
import * as i0 from "@angular/core";
import * as i1 from "./toolbar-navigation.service";
/**
* @hidden
*/
export class AIPromptToolbarFocusableDirective {
host;
navigationService;
renderer;
constructor(host, navigationService, renderer) {
this.host = host;
this.navigationService = navigationService;
this.renderer = renderer;
navigationService.register(this);
}
get element() {
return this.host.nativeElement;
}
ngAfterViewInit() {
this.renderer.setAttribute(this.element, 'tabindex', this.navigationService.isActive(this) ? '0' : '-1');
this.element.addEventListener('keydown', this.keyDownHandler, { capture: true });
this.element.addEventListener('click', this.clickHandler, { capture: true });
}
ngOnDestroy() {
this.navigationService.unregister(this);
this.element.removeEventListener('keydown', this.keyDownHandler, { capture: true });
this.element.removeEventListener('click', this.clickHandler, { capture: true });
}
activate() {
this.renderer.setAttribute(this.element, 'tabindex', '0');
this.element.focus();
}
keyDownHandler = (e) => {
const targetsSelf = e.target === this.element;
const isLeftArrow = e.keyCode === Keys.ArrowLeft;
const isRightArrow = e.keyCode === Keys.ArrowRight;
const isArrow = isLeftArrow || isRightArrow;
if (!targetsSelf || !isArrow) {
return;
}
this.renderer.setAttribute(this.element, 'tabindex', '-1');
this.element.querySelectorAll(focusableSelector).forEach(el => {
this.renderer.setAttribute(el, 'tabindex', '-1');
});
if (isRightArrow) {
this.navigationService.move('right');
}
else if (isLeftArrow) {
this.navigationService.move('left');
}
};
clickHandler = () => {
this.navigationService.setActiveIndex(this);
};
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptToolbarFocusableDirective, deps: [{ token: i0.ElementRef }, { token: i1.ToolbarNavigationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AIPromptToolbarFocusableDirective, isStandalone: true, selector: "[kendoAIPromptToolbarFocusable]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptToolbarFocusableDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoAIPromptToolbarFocusable]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ToolbarNavigationService }, { type: i0.Renderer2 }]; } });