@taiga-ui/cdk
Version:
Base library for creating Angular components and applications using Taiga UI principles regarding of actual visual appearance
57 lines (53 loc) • 2.89 kB
JavaScript
import { DOCUMENT } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, input, Directive } from '@angular/core';
import { NG_VALIDATORS } from '@angular/forms';
import { tuiZonefree, tuiTakeUntilDestroyed } from '@taiga-ui/cdk/observables';
import { tuiProvide } from '@taiga-ui/cdk/utils/di';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { BehaviorSubject, switchMap, of, delay } from 'rxjs';
class TuiNativeValidator {
constructor() {
this.el = tuiInjectElement();
this.doc = inject(DOCUMENT);
this.control$ = new BehaviorSubject(null);
this.sub = this.control$
.pipe(switchMap((control) => control?.events || of(null)), delay(0), tuiZonefree(), tuiTakeUntilDestroyed())
.subscribe(() => this.handleValidation());
this.tuiNativeValidator = input('Invalid');
this.id = '';
}
get control() {
return this.control$.value;
}
validate(control) {
this.control$.next(control);
return null;
}
handleValidation() {
const invalid = !!this.control?.touched && this.control?.invalid;
// TODO: Replace with :has(:invalid) when supported
this.el.closest('tui-textfield')?.classList.toggle('tui-invalid', invalid);
this.el.setCustomValidity?.(invalid ? this.tuiNativeValidator() : '');
this.el.setAttribute('aria-invalid', String(invalid));
if (!this.id && invalid) {
this.doc.dispatchEvent(new CustomEvent('tui-validator', { detail: this }));
this.el.setAttribute('aria-describedby', this.id);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiNativeValidator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: TuiNativeValidator, isStandalone: true, selector: "[tuiNativeValidator]", inputs: { tuiNativeValidator: { classPropertyName: "tuiNativeValidator", publicName: "tuiNativeValidator", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusout": "handleValidation()" } }, providers: [tuiProvide(NG_VALIDATORS, TuiNativeValidator, true)], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiNativeValidator, decorators: [{
type: Directive,
args: [{
selector: '[tuiNativeValidator]',
providers: [tuiProvide(NG_VALIDATORS, TuiNativeValidator, true)],
host: { '(focusout)': 'handleValidation()' },
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TuiNativeValidator };
//# sourceMappingURL=taiga-ui-cdk-directives-native-validator.mjs.map