@progress/kendo-angular-dropdowns
Version:
A wide variety of native Angular dropdown components including AutoComplete, ComboBox, DropDownList, DropDownTree, MultiColumnComboBox, MultiSelect, and MultiSelectTree
102 lines (101 loc) • 4.59 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 { ChangeDetectorRef, Directive, EventEmitter, Input, NgZone, Output, Renderer2 } from '@angular/core';
import { Subscription } from 'rxjs';
import { Keys, closest } from '@progress/kendo-angular-common';
import * as i0 from "@angular/core";
/**
* @hidden
*/
export class SharedDropDownEventsDirective {
ngZone;
renderer;
cdr;
hostElement;
clearButtonClicked;
isFocused;
isFocusedChange = new EventEmitter();
onFocus = new EventEmitter();
handleBlur = new EventEmitter();
subscriptions = new Subscription();
constructor(ngZone, renderer, cdr) {
this.ngZone = ngZone;
this.renderer = renderer;
this.cdr = cdr;
}
ngAfterViewInit() {
const hostElement = this.hostElement.nativeElement;
let cursorInsideWrapper = false;
let tabbing = false;
this.ngZone.runOutsideAngular(() => {
// focusIn and focusOut are relative to the host element
this.subscriptions.add(this.renderer.listen(hostElement, 'focusin', () => {
this.cdr.detectChanges();
if (!this.isFocused) {
this.ngZone.run(() => {
this.onFocus.emit();
this.isFocused = true;
this.isFocusedChange.emit(this.isFocused);
});
}
}));
this.subscriptions.add(this.renderer.listen(hostElement, 'focusout', (args) => {
if (!this.isFocused) {
return;
}
if (tabbing) {
const closestTextbox = closest(args.relatedTarget, (element) => element === hostElement);
if (!closestTextbox) {
this.handleBlur.emit();
}
tabbing = false;
}
else {
if (!cursorInsideWrapper) {
this.handleBlur.emit();
}
}
}));
this.subscriptions.add(this.renderer.listen(hostElement, 'mouseenter', () => {
cursorInsideWrapper = true;
}));
this.subscriptions.add(this.renderer.listen(hostElement, 'mouseleave', () => {
cursorInsideWrapper = false;
}));
this.subscriptions.add(this.renderer.listen(hostElement, 'keydown', (args) => {
if (args.keyCode === Keys.Tab) {
tabbing = true;
}
else {
tabbing = false;
}
}));
});
}
ngOnDestroy() {
this.subscriptions.unsubscribe();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedDropDownEventsDirective, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SharedDropDownEventsDirective, isStandalone: true, selector: "[kendoDropDownSharedEvents]", inputs: { hostElement: "hostElement", clearButtonClicked: "clearButtonClicked", isFocused: "isFocused" }, outputs: { isFocusedChange: "isFocusedChange", onFocus: "onFocus", handleBlur: "handleBlur" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedDropDownEventsDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoDropDownSharedEvents]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostElement: [{
type: Input
}], clearButtonClicked: [{
type: Input
}], isFocused: [{
type: Input
}], isFocusedChange: [{
type: Output
}], onFocus: [{
type: Output
}], handleBlur: [{
type: Output
}] } });