@gravitee/ui-particles-angular 7.14.0 → 7.15.0-apim-1415-table-style-c855338

package/fesm2020/gravitee-ui-particles-angular.mjs

@@ -1,7 +1,7 @@
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, HostBinding, Input, Output, HostListener, NgModule, Optional, Self, ViewChild, Directive, Inject, forwardRef, ChangeDetectionStrategy, Injectable, ViewEncapsulation, ContentChildren, Host, ContentChild, InjectionToken } from '@angular/core';
-import { timer, Subject, fromEvent, of, BehaviorSubject, merge, ReplaySubject } from 'rxjs';
+import { timer, Subject, fromEvent, of, BehaviorSubject, ReplaySubject, merge } from 'rxjs';
 import * as i1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i2 from '@angular/material/button';
@@ -13,7 +13,7 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i3$1 from '@angular/material/form-field';
 import { MatFormFieldControl, MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { isEmpty, toLower, dropRight, isNil, isArray, remove, isObject, cloneDeep, uniqueId, set } from 'lodash';
-import { startWith, map, distinctUntilChanged, tap, debounce, takeUntil, delay, filter, switchMap, debounceTime } from 'rxjs/operators';
+import { startWith, map, distinctUntilChanged, tap, debounce, takeUntil, delay, filter, switchMap, take, debounceTime } from 'rxjs/operators';
 import * as i7 from '@angular/forms';
 import { FormsModule, FormArray, FormGroup, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule, NgControl } from '@angular/forms';
 import * as i2$2 from '@angular/cdk/a11y';
@@ -2938,6 +2938,7 @@ class GioFormJsonSchemaComponent {
         this._onChange = () => ({});
         this._onTouched = () => ({});
         this.touched = false;
+        this.isValid$ = new ReplaySubject(1); // Wait JsonSchema to be loaded to check if it's valid
         this.stateChanges$ = new Subject();
         if (ngControl) {
             // Setting the value accessor directly (instead of using
@@ -2965,25 +2966,33 @@ class GioFormJsonSchemaComponent {
         }
     }
     ngOnInit() {
+        // Invalid by default.
+        this.ngControl?.control?.addAsyncValidators(() => {
+            return this.isValid$.pipe(takeUntil(this.unsubscribe$), take(1), map(isValid => (isValid ? null : { invalid: true })));
+        });
+        this.ngControl?.control?.updateValueAndValidity({ emitEvent: false });
         // Subscribe to state changes to manage touches, status and value
-        this.stateChanges$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+        this.stateChanges$.pipe(takeUntil(this.unsubscribe$), debounceTime(100)).subscribe(() => {
             const { status, value, touched } = this.formGroup;
             if (this.isDisabled) {
                 return;
             }
-            if (touched) {
-                this._onTouched();
-                this.touched = true;
-            }
-            if (this.touched) {
-                this._onChange(value);
-            }
             if (status === 'VALID') {
+                this.isValid$.next(true);
                 this.ngControl?.control?.setErrors(null);
             }
             if (status === 'INVALID') {
+                this.isValid$.next(false);
                 this.ngControl?.control?.setErrors({ invalid: true });
             }
+            if (touched && !this.touched) {
+                this._onTouched();
+                this.touched = true;
+            }
+            if (this.touched) {
+                this._onChange(value);
+            }
+            this.ngControl?.control?.updateValueAndValidity({ emitEvent: false });
             this.changeDetectorRef.detectChanges();
         });
         // When the parent form is touched, mark all the sub formGroup as touched if not already touched
@@ -2999,7 +3008,7 @@ class GioFormJsonSchemaComponent {
         });
         // Group all valueChanges events emit by formly in a single one
         merge(this.formGroup.statusChanges, this.formGroup.valueChanges)
-            .pipe(takeUntil(this.unsubscribe$), debounceTime(100))
+            .pipe(takeUntil(this.unsubscribe$))
             .subscribe(() => {
             this.stateChanges$.next();
         });