@covalent/core 10.2.1 → 10.3.1

package/common/directives/web-components/form-control.directive.d.ts

@@ -1,20 +1,24 @@
-import { ElementRef } from '@angular/core';
+import { DestroyRef, ElementRef, OnInit } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import * as i0 from "@angular/core";
-export declare class CovalentTextfieldValueAccessorDirective implements ControlValueAccessor {
+export declare class CovalentTextfieldValueAccessorDirective implements ControlValueAccessor, OnInit {
     private _elementRef;
     _ngControl: NgControl;
+    private _destroyRef;
     private _onChange;
     private _onTouched;
-    constructor(_elementRef: ElementRef<any>, _ngControl: NgControl);
+    constructor(_elementRef: ElementRef<any>, _ngControl: NgControl, _destroyRef: DestroyRef);
+    ngOnInit(): void;
     writeValue(value: string): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
+    handleInput(): void;
     handleChange(event: Event): void;
     handleBlur(): void;
     setDisabledState(isDisabled: boolean): void;
     private _isCheckBox;
     private _isRadio;
+    private _isTextAreaOrField;
     private _updateValidity;
     static ɵfac: i0.ɵɵFactoryDeclaration<CovalentTextfieldValueAccessorDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<CovalentTextfieldValueAccessorDirective, "cv-textfield[formControl],     cv-textarea[formControl],     cv-select[formControl],     cv-checkbox[formControl],     cv-checkbox-icon[formControl],     cv-radio[formControl],      cv-radio-icon[formControl],     cv-textfield[formControlName],     cv-textarea[formControlName],     cv-select[formControlName],     cv-checkbox[formControlName],     cv-checkbox-icon[formControlName],     cv-radio[formControlName],      cv-radio-icon[formControlName],", never, {}, {}, never, never, true, never>;

package/fesm2022/covalent-core-common.mjs

@@ -11,6 +11,7 @@ import { filter, pairwise } from 'rxjs/operators';
 import { trigger, state, style, transition, group, query, animateChild, animate, AUTO_STYLE, keyframes } from '@angular/animations';
 import { Subject } from 'rxjs';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 class TdAutoTrimDirective {
     _model;
@@ -2079,17 +2080,30 @@ function mixinDisableRipple(base) {
 class CovalentTextfieldValueAccessorDirective {
     _elementRef;
     _ngControl;
+    _destroyRef;
     _onChange = () => {
         /* noop */
     };
     _onTouched = () => {
         /* noop */
     };
-    constructor(_elementRef, _ngControl) {
+    constructor(_elementRef, _ngControl, _destroyRef) {
         this._elementRef = _elementRef;
         this._ngControl = _ngControl;
+        this._destroyRef = _destroyRef;
         _ngControl.valueAccessor = this;
     }
+    ngOnInit() {
+        // Set up a subscription to monitor status changes
+        if (this._ngControl.control) {
+            this._ngControl.control.statusChanges
+                .pipe(takeUntilDestroyed(this._destroyRef))
+                .subscribe(() => {
+                this._onTouched();
+                this._updateValidity();
+            });
+        }
+    }
     writeValue(value) {
         if (this._isCheckBox()) {
             this._elementRef.nativeElement.value = value || '';
@@ -2110,6 +2124,15 @@ class CovalentTextfieldValueAccessorDirective {
     registerOnTouched(fn) {
         this._onTouched = fn;
     }
+    handleInput() {
+        if (!this._isTextAreaOrField()) {
+            return;
+        }
+        const value = this._elementRef.nativeElement.value;
+        this._onChange(value);
+        this._onTouched();
+        this._updateValidity();
+    }
     handleChange(event) {
         const value = this._isCheckBox()
             ? this._elementRef.nativeElement.checked
@@ -2133,6 +2156,10 @@ class CovalentTextfieldValueAccessorDirective {
         const tagName = this._elementRef.nativeElement.tagName.toLowerCase();
         return tagName === 'cv-radio' || tagName === 'cv-radio-icon';
     }
+    _isTextAreaOrField() {
+        const tagName = this._elementRef.nativeElement.tagName.toLowerCase();
+        return tagName === 'cv-textarea' || tagName === 'cv-textfield';
+    }
     _updateValidity() {
         const element = this._elementRef.nativeElement;
         const control = this._ngControl.control;
@@ -2150,9 +2177,9 @@ class CovalentTextfieldValueAccessorDirective {
         // Set the web component's custom validity message
         element.reportValidity();
     }
-    static ɵfac = function CovalentTextfieldValueAccessorDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CovalentTextfieldValueAccessorDirective)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.NgControl)); };
+    static ɵfac = function CovalentTextfieldValueAccessorDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CovalentTextfieldValueAccessorDirective)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.NgControl), i0.ɵɵdirectiveInject(i0.DestroyRef)); };
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: CovalentTextfieldValueAccessorDirective, selectors: [["cv-textfield", "formControl", ""], ["cv-textarea", "formControl", ""], ["cv-select", "formControl", ""], ["cv-checkbox", "formControl", ""], ["cv-checkbox-icon", "formControl", ""], ["cv-radio", "formControl", ""], ["cv-radio-icon", "formControl", ""], ["cv-textfield", "formControlName", ""], ["cv-textarea", "formControlName", ""], ["cv-select", "formControlName", ""], ["cv-checkbox", "formControlName", ""], ["cv-checkbox-icon", "formControlName", ""], ["cv-radio", "formControlName", ""], ["cv-radio-icon", "formControlName", ""], [""]], hostBindings: function CovalentTextfieldValueAccessorDirective_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("change", function CovalentTextfieldValueAccessorDirective_change_HostBindingHandler($event) { return ctx.handleChange($event); })("blur", function CovalentTextfieldValueAccessorDirective_blur_HostBindingHandler() { return ctx.handleBlur(); });
+            i0.ɵɵlistener("input", function CovalentTextfieldValueAccessorDirective_input_HostBindingHandler() { return ctx.handleInput(); })("change", function CovalentTextfieldValueAccessorDirective_change_HostBindingHandler($event) { return ctx.handleChange($event); })("blur", function CovalentTextfieldValueAccessorDirective_blur_HostBindingHandler() { return ctx.handleBlur(); });
         } } });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentTextfieldValueAccessorDirective, [{
@@ -2173,7 +2200,10 @@ class CovalentTextfieldValueAccessorDirective {
      cv-radio[formControlName], 
      cv-radio-icon[formControlName],`,
             }]
-    }], () => [{ type: i0.ElementRef }, { type: i1.NgControl }], { handleChange: [{
+    }], () => [{ type: i0.ElementRef }, { type: i1.NgControl }, { type: i0.DestroyRef }], { handleInput: [{
+            type: HostListener,
+            args: ['input']
+        }], handleChange: [{
             type: HostListener,
             args: ['change', ['$event']]
         }], handleBlur: [{