@progress/kendo-angular-inputs
Version:
Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, Te
97 lines (96 loc) • 4.62 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2024 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 { closest } from '../common/dom-utils';
import { Keys } from '@progress/kendo-angular-common';
import * as i0 from "@angular/core";
/**
* @hidden
*/
export class SharedInputEventsDirective {
constructor(ngZone, renderer, cdr) {
this.ngZone = ngZone;
this.renderer = renderer;
this.cdr = cdr;
this.isFocusedChange = new EventEmitter();
this.onFocus = new EventEmitter();
this.handleBlur = new EventEmitter();
this.subscriptions = new Subscription();
}
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?.clearButtonClicked) {
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();
}
}
SharedInputEventsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedInputEventsDirective, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
SharedInputEventsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SharedInputEventsDirective, isStandalone: true, selector: "[kendoInputSharedEvents]", inputs: { hostElement: "hostElement", clearButtonClicked: "clearButtonClicked", isFocused: "isFocused" }, outputs: { isFocusedChange: "isFocusedChange", onFocus: "onFocus", handleBlur: "handleBlur" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedInputEventsDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoInputSharedEvents]',
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
}] } });