@gravitee/ui-particles-angular 5.20.0 → 5.20.1

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, combineLatest, ReplaySubject } from 'rxjs';
+import { timer, Subject, fromEvent, of, BehaviorSubject, merge, ReplaySubject } from 'rxjs';
 import * as i1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i2 from '@angular/material/button';
@@ -2905,10 +2905,11 @@ const getBannerProperties = (banner) => {
  * limitations under the License.
  */
 class GioFormJsonSchemaComponent {
-    constructor(gioFormlyJsonSchema, elRef, fm, ngControl) {
+    constructor(gioFormlyJsonSchema, elRef, fm, changeDetectorRef, ngControl) {
         this.gioFormlyJsonSchema = gioFormlyJsonSchema;
         this.elRef = elRef;
         this.fm = fm;
+        this.changeDetectorRef = changeDetectorRef;
         this.ngControl = ngControl;
         this.unsubscribe$ = new Subject();
         this.gioFormFocusInvalidIgnore = true;
@@ -2944,7 +2945,25 @@ class GioFormJsonSchemaComponent {
         }
     }
     ngOnInit() {
-        // When the parent form is touched, mark all the sub formGroup as touched ony once
+        // Subscribe to state changes to manage touches, status and value
+        this.stateChanges$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+            const { status, value, touched } = this.formGroup;
+            if (touched) {
+                this._onTouched();
+                this.touched = true;
+            }
+            if (this.touched) {
+                this._onChange(value);
+            }
+            if (status === 'VALID') {
+                this.ngControl?.control?.setErrors(null);
+            }
+            if (status === 'INVALID') {
+                this.ngControl?.control?.setErrors({ invalid: true });
+            }
+            this.changeDetectorRef.detectChanges();
+        });
+        // When the parent form is touched, mark all the sub formGroup as touched if not already touched
         const parentControl = this.ngControl?.control?.parent;
         parentControl?.statusChanges
             ?.pipe(takeUntil(this.unsubscribe$), map(() => parentControl?.touched), filter(touched => touched === true), distinctUntilChanged())
@@ -2952,31 +2971,15 @@ class GioFormJsonSchemaComponent {
             this.formGroup.markAllAsTouched();
             this.stateChanges$.next();
         });
-        // To simulate the behavior of classic form controls, emit value only when the form is touched
-        // Allow to keep the formControl pristine until the user interact with it
-        combineLatest([this.formGroup.statusChanges, this.formGroup.valueChanges])
-            .pipe(takeUntil(this.unsubscribe$), 
         // Group all valueChanges events emit by formly in a single one
-        debounceTime(100))
+        merge(this.formGroup.statusChanges, this.formGroup.valueChanges)
+            .pipe(takeUntil(this.unsubscribe$), debounceTime(100))
             .subscribe(() => {
             this.stateChanges$.next();
         });
-        this.stateChanges$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
-            const { status, value, touched } = this.formGroup;
-            if (touched) {
-                this._onTouched();
-                this.touched = true;
-            }
-            if (this.touched) {
-                this._onChange(value);
-                if (status === 'VALID') {
-                    this.ngControl?.control?.setErrors(null);
-                }
-                if (status === 'INVALID') {
-                    this.ngControl?.control?.setErrors({ invalid: true });
-                }
-            }
-        });
+    }
+    ngAfterViewInit() {
+        this.stateChanges$.next();
     }
     ngOnDestroy() {
         this.unsubscribe$.next();
@@ -3000,12 +3003,12 @@ class GioFormJsonSchemaComponent {
         throw new Error('Method not implemented.');
     }
 }
-GioFormJsonSchemaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaComponent, deps: [{ token: GioFormlyJsonSchemaService }, { token: i0.ElementRef }, { token: i2$2.FocusMonitor }, { token: i7.NgControl, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+GioFormJsonSchemaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaComponent, deps: [{ token: GioFormlyJsonSchemaService }, { token: i0.ElementRef }, { token: i2$2.FocusMonitor }, { token: i0.ChangeDetectorRef }, { token: i7.NgControl, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 GioFormJsonSchemaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFormJsonSchemaComponent, selector: "gio-form-json-schema", inputs: { jsonSchema: "jsonSchema", options: "options" }, host: { properties: { "attr.gioFormFocusInvalidIgnore": "this.gioFormFocusInvalidIgnore" } }, ngImport: i0, template: `<formly-form *ngIf="formGroup" [fields]="fields" [options]="options" [form]="formGroup" [model]="model"></formly-form>`, isInline: true, styles: ["::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-outline:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)){padding-bottom:0}::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-outline:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)) .mat-form-field-wrapper{padding-bottom:0}::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-fill:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)){padding-bottom:0}::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-fill:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)) .mat-form-field-wrapper{margin-bottom:-1.34375em}\n"], components: [{ type: i1$4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-form-json-schema', template: `<formly-form *ngIf="formGroup" [fields]="fields" [options]="options" [form]="formGroup" [model]="model"></formly-form>`, styles: ["::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-outline:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)){padding-bottom:0}::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-outline:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)) .mat-form-field-wrapper{padding-bottom:0}::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-fill:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)){padding-bottom:0}::ng-deep gio-form-json-schema .mat-form-field.mat-form-field-appearance-fill:not(::ng-deep :has(mat-hint),::ng-deep :has(mat-error)) .mat-form-field-wrapper{margin-bottom:-1.34375em}\n"] }]
-        }], ctorParameters: function () { return [{ type: GioFormlyJsonSchemaService }, { type: i0.ElementRef }, { type: i2$2.FocusMonitor }, { type: i7.NgControl, decorators: [{
+        }], ctorParameters: function () { return [{ type: GioFormlyJsonSchemaService }, { type: i0.ElementRef }, { type: i2$2.FocusMonitor }, { type: i0.ChangeDetectorRef }, { type: i7.NgControl, decorators: [{
                     type: Host
                 }, {
                     type: Optional