@covalent/core 10.4.0-beta.3 → 10.4.0

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

@@ -1,20 +1,29 @@
-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;
-    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/common/styles/font/_font.scss

@@ -3,6 +3,10 @@ $mat-font-url: 'styles/font/' !default;
 @mixin covalent-material-icons() {
   @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block');
 
+  .material-icons {
+    font-family: 'Material Symbols Outlined', sans-serif;
+  }
+
   // Ensure our size prevails over material
   mat-icon.material-icons {
     &,

package/fesm2022/covalent-core-breadcrumbs.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, HostBinding, ContentChildren, Input, NgModule } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, Input, ContentChildren, NgModule } from '@angular/core';
 import { Subject, fromEvent } from 'rxjs';
 import { debounceTime, takeUntil, startWith } from 'rxjs/operators';
 import * as i1 from '@angular/common';

package/fesm2022/covalent-core-common.mjs

@@ -8,9 +8,10 @@ import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import * as i1$1 from '@angular/router';
 import { RoutesRecognized } from '@angular/router';
 import { filter, pairwise } from 'rxjs/operators';
-import { trigger, state, style, transition, group, query, animateChild, animate, AUTO_STYLE, keyframes } from '@angular/animations';
+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;
@@ -2079,17 +2080,29 @@ 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._updateValidity();
+            });
+        }
+    }
     writeValue(value) {
         if (this._isCheckBox()) {
             this._elementRef.nativeElement.value = value || '';
@@ -2110,15 +2123,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
@@ -2133,6 +2167,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 +2188,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 +2211,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: [{