angular-input-focus
Version:
An Angular focus attribute directive.
142 lines (136 loc) • 6.24 kB
JavaScript
import * as i0 from '@angular/core';
import { PLATFORM_ID, Directive, Inject, Input, NgModule } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { isPlatformBrowser } from '@angular/common';
/**
* An angular focus directive.
* ## Usage
* For autofocus-like functionality, use like this:
* <input [libFocus]="true"...>
*
* You can also pass an `EventEmitter<boolean>` as `setFocus` like so:
* <input [libFocus]="false" [setFocus]="focusEvent">`
*
* Whenever your `focusEvent` emits a value, your element will focus/blur depending on
* whether it is true or false.
*/
class AngularInputFocusDirective {
constructor(el, cd, zone, platformId) {
this.el = el;
this.cd = cd;
this.zone = zone;
/**
* Indicates whether the current platform is a web browser. Used because our `focus`
* implementation is specific to the DOM. Set in constructor.
*/
this.isRunningInBrowser = null;
/**
* When set to true, directive will mimick `autofocus` like functionality for your input.
*/
this.focus = false;
/**
* Set to true if you want to run outside angular and skip change detection. If you're not using
* Angular Material, you can pretty safely set to "true".
*/
this.skipChangeDetection = false;
/**
* A subject that will emit a value when we should unsubscribe to our observables.
*/
this.killSubscriptions = new Subject();
this.isRunningInBrowser = isPlatformBrowser(platformId);
}
/**
* When you emit a true value, the input will gain focus. If false, the input will blur.
*/
set setFocus(value) {
// Unsubscribe from any previous subs
this.killSubscriptions.next();
value.pipe(takeUntil(this.killSubscriptions)).subscribe(focus => this.setFocusOnElement(focus));
}
/**
* Set the focus on the target element.
* @param focus Should the element have focus?
*/
setFocusOnElement(focus) {
// If we aren't in a browser, there's nothing to do since our implementation is DOM-specific.
// If we don't have a nativeElement, we have nothing to do either.
if (this.isRunningInBrowser === false || !this.el.nativeElement) {
return;
}
// Running outside angular zone to not trigger change detection unless we want to.
this.zone.runOutsideAngular(() => {
if (focus === true) {
this.el.nativeElement.focus();
}
else {
this.el.nativeElement.blur();
}
if (!this.skipChangeDetection) {
this.cd.detectChanges();
}
});
}
ngAfterViewInit() {
if (this.focus === true) {
// After view init, if focus is set, focus element to mimick autofocus functionality.
this.setFocusOnElement(true);
}
}
ngOnDestroy() {
this.killSubscriptions.next();
this.killSubscriptions.complete();
}
}
AngularInputFocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AngularInputFocusDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive });
AngularInputFocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: AngularInputFocusDirective, selector: "[libFocus]", inputs: { focus: ["libFocus", "focus"], setFocus: "setFocus", skipChangeDetection: "skipChangeDetection" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AngularInputFocusDirective, decorators: [{
type: Directive,
args: [{
selector: '[libFocus]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }]; }, propDecorators: { focus: [{
type: Input,
args: ['libFocus']
}], setFocus: [{
type: Input,
args: ['setFocus']
}], skipChangeDetection: [{
type: Input
}] } });
/**
* A module for an angular focus directive.
* ## Usage
* For autofocus-like functionality, use like this:
* <input [libFocus]="true"...>
*
* You can also pass an `EventEmitter<boolean>` as `setFocus` like so:
* <input [libFocus]="false" [setFocus]="focusEvent">`
*
* Whenever your `focusEvent` emits a value, your element will focus/blur depending on
* whether it is true or false.
*/
class AngularInputFocusModule {
}
AngularInputFocusModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AngularInputFocusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
AngularInputFocusModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: AngularInputFocusModule, declarations: [AngularInputFocusDirective], exports: [AngularInputFocusDirective] });
AngularInputFocusModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AngularInputFocusModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AngularInputFocusModule, decorators: [{
type: NgModule,
args: [{
declarations: [AngularInputFocusDirective],
imports: [],
exports: [AngularInputFocusDirective]
}]
}] });
/*
* Public API Surface of angular-input-focus
*/
/**
* Generated bundle index. Do not edit.
*/
export { AngularInputFocusDirective, AngularInputFocusModule };
//# sourceMappingURL=angular-input-focus.mjs.map