@ascentgl/ads-ui 20.0.28 → 20.0.29

package/fesm2022/ascentgl-ads-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, Component, NgModule, input, output, computed, ChangeDetectionStrategy, signal, effect, ViewChild, ElementRef, HostListener, Directive, EventEmitter, Output, inject, Pipe, contentChild, TemplateRef, Inject, Optional, ChangeDetectorRef, Injectable, viewChild } from '@angular/core';
+import { Input, Component, NgModule, input, output, computed, ChangeDetectionStrategy, signal, effect, ViewChild, ElementRef, HostListener, Directive, EventEmitter, Output, inject, DestroyRef, Pipe, contentChild, TemplateRef, Inject, Optional, ChangeDetectorRef, Injectable, viewChild } from '@angular/core';
 import * as i1 from '@ascentgl/ads-icons';
 import { AdsIconModule, AdsIconRegistry } from '@ascentgl/ads-icons';
 import { adsIconUserCircle, adsIconBell, adsIconChevronRight, adsIconCross, adsIconPlus, adsIconWarning, adsIconLock, adsIconPlusCircle, adsIconSearch, adsIconSortDescending, adsIconCheckCircleFilled, adsIconVisibilityEye, adsIconVisibilityEyeNone, adsIconStatusProcessing, adsIconInformation, adsIconChevronDown, adsIconLoading, adsIconDatepicker, adsIconTimepicker, adsIconCheck, adsIconChevronUp, adsIconMenuMoreInfo, adsIconHamburgerMenu } from '@ascentgl/ads-icons/icons';
@@ -12,11 +12,11 @@ import { RouterModule, RouterLinkActive, RouterLink, RouterOutlet, NavigationSta
 import * as i7 from '@angular/material/button';
 import { MatButtonModule, MatIconButton, MatButton } from '@angular/material/button';
 import * as i4 from '@angular/forms';
-import { FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, Validators, ReactiveFormsModule, TouchedChangeEvent } from '@angular/forms';
 import * as i4$1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { Subject, asapScheduler, timer, of, Subscription, combineLatest } from 'rxjs';
-import { takeUntil, map, tap, debounce, filter } from 'rxjs/operators';
+import { takeUntil, filter, map, tap, debounce } from 'rxjs/operators';
 import * as i3 from '@angular/platform-browser';
 import { DomHelper, AdsGestureModule, ObjectHelper } from '@ascentgl/ads-utils';
 import * as i2$1 from '@angular/material/progress-spinner';
@@ -2305,6 +2305,15 @@ class AbstractBaseComponent {
          */
         if (control instanceof FormControl) {
             this.valueControl = control;
+            const subscription = this.valueControl.events
+                .pipe(filter((event) => event instanceof TouchedChangeEvent))
+                .subscribe((event) => {
+                if (event.touched) {
+                    this.syncState();
+                    this.displayControl.updateValueAndValidity({ emitEvent: false });
+                }
+            });
+            this.destroyRef.onDestroy(() => subscription.unsubscribe());
         }
         else {
             throw Error('Control must be a "FormControl" instance');
@@ -2327,6 +2336,7 @@ class AbstractBaseComponent {
         this.showFooter = true;
         /** @ignore */
         this.registry = inject(AdsIconRegistry);
+        this.destroyRef = inject(DestroyRef);
         /** Component width. Must include units of measure: px, %, em, rem, etc. */
         this.width = '100%';
         /** @ignore */
@@ -2390,7 +2400,12 @@ class AbstractBaseComponent {
     /** @ignore */
     syncState() {
         if (this.displayControl.disabled !== this.valueControl.disabled) {
-            this.valueControl.disabled ? this.displayControl.disable() : this.displayControl.enable();
+            if (this.valueControl.disabled) {
+                this.displayControl.disable();
+            }
+            else {
+                this.displayControl.enable();
+            }
         }
         if (this.valueControl.pristine) {
             this.displayControl.markAsPristine();