@covalent/core 11.4.0 → 11.4.2

package/common/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { PipeTransform, ChangeDetectorRef } from '@angular/core';
+import { PipeTransform, ChangeDetectorRef, OnInit } from '@angular/core';
 import * as i10 from '@angular/forms';
 import { ControlValueAccessor, NgControl, ValidatorFn, AbstractControl } from '@angular/forms';
 import * as i11 from '@angular/common';
@@ -250,20 +250,29 @@ interface ICanDisableRipple {
 /** Mixin to augment a component or directive with a `disabled` property. */
 declare function mixinDisableRipple<T extends Constructor<Record<string, unknown>>>(base: T): Constructor<ICanDisableRipple> & T;
 
-declare class CovalentTextfieldValueAccessorDirective implements ControlValueAccessor {
+declare class CovalentTextfieldValueAccessorDirective implements ControlValueAccessor, OnInit {
+    private _destroyRef;
     private _elementRef;
     _ngControl: NgControl;
     private _onChange;
     private _onTouched;
     constructor();
+    ngOnInit(): void;
     writeValue(value: string): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
-    handleChange(event: Event): void;
+    /**
+     * Gets the updateOn strategy of the control.
+     * @returns The updateOn strategy of the control, defaulting to 'change' if not set.
+     */
+    private getUpdateOn;
+    handleInput(): void;
+    handleChange(): 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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Directive, HostListener, ElementRef, Pipe, Injectable, NgModule } from '@angular/core';
+import { inject, Directive, HostListener, ElementRef, Pipe, Injectable, NgModule, DestroyRef } from '@angular/core';
 import { DOCUMENT, DecimalPipe, CommonModule } from '@angular/common';
 import { NgModel, FormsModule, NgControl, Validators } from '@angular/forms';
 import { MAT_ICON_DEFAULT_OPTIONS } from '@angular/material/icon';
@@ -9,6 +9,7 @@ import { filter, pairwise } from 'rxjs/operators';
 import { trigger, state, transition, style, group, query, animate, animateChild, 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 = inject(NgModel, { optional: true, host: true });
@@ -2060,6 +2061,7 @@ function mixinDisableRipple(base) {
 
 /* eslint-disable @angular-eslint/directive-selector */
 class CovalentTextfieldValueAccessorDirective {
+    _destroyRef = inject(DestroyRef);
     _elementRef = inject(ElementRef);
     _ngControl = inject(NgControl);
     _onChange = () => {
@@ -2072,6 +2074,16 @@ class CovalentTextfieldValueAccessorDirective {
         const _ngControl = this._ngControl;
         _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._updateValidity();
+            });
+        }
+    }
     writeValue(value) {
         if (this._isCheckBox()) {
             this._elementRef.nativeElement.value = value || '';
@@ -2092,15 +2104,36 @@ class CovalentTextfieldValueAccessorDirective {
     registerOnTouched(fn) {
         this._onTouched = fn;
     }
-    handleChange(event) {
-        const value = this._isCheckBox()
-            ? this._elementRef.nativeElement.checked
-            : this._elementRef.nativeElement.value;
-        this._onChange(value);
-        this._onTouched();
-        this._updateValidity();
+    /**
+     * Gets the updateOn strategy of the control.
+     * @returns The updateOn strategy of the control, defaulting to 'change' if not set.
+     */
+    getUpdateOn() {
+        return this._ngControl.control?.updateOn || 'change';
+    }
+    handleInput() {
+        // Update on 'input' event for textfields/textareas if updateOn strategy is 'change'
+        if (this._isTextAreaOrField() && this.getUpdateOn() === 'change') {
+            const value = this._elementRef.nativeElement.value;
+            this._onChange(value);
+        }
+    }
+    handleChange() {
+        // For textfields/textareas, handleInput covers 'change' event
+        if (!this._isTextAreaOrField()) {
+            const value = this._isCheckBox()
+                ? this._elementRef.nativeElement.checked
+                : this._elementRef.nativeElement.value;
+            this._onChange(value);
+            this._onTouched();
+        }
     }
     handleBlur() {
+        // For textfields/textareas, update on 'blur' if updateOn strategy is 'blur'
+        if (this._isTextAreaOrField() && this.getUpdateOn() === 'blur') {
+            const value = this._elementRef.nativeElement.value;
+            this._onChange(value);
+        }
         this._onTouched();
     }
     // Optional: If you need to handle disabled states
@@ -2115,6 +2148,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;
@@ -2134,7 +2171,7 @@ class CovalentTextfieldValueAccessorDirective {
     }
     static ɵfac = function CovalentTextfieldValueAccessorDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CovalentTextfieldValueAccessorDirective)(); };
     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, [{
@@ -2155,7 +2192,10 @@ class CovalentTextfieldValueAccessorDirective {
      cv-radio[formControlName], 
      cv-radio-icon[formControlName],`,
             }]
-    }], () => [], { handleChange: [{
+    }], () => [], { handleInput: [{
+            type: HostListener,
+            args: ['input']
+        }], handleChange: [{
             type: HostListener,
             args: ['change', ['$event']]
         }], handleBlur: [{