@gravitee/ui-particles-angular 7.36.0 → 7.37.0-fix-ps-v2-de33006

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

@@ -3333,9 +3333,12 @@ class GioFormJsonSchemaComponent {
         this.gioFormFocusInvalidIgnore = true;
         this.formGroup = new FormGroup({});
         this.options = {};
+        // When true the form is ready and control status are up-to-date
+        // Useful to know when initial control status can be used
+        this.ready = new EventEmitter();
+        this.isReady = false;
         this.model = {};
         this.fields = [];
-        this.loading = true;
         this.isDisabled = false;
         this._onChange = () => ({});
         this._onTouched = () => ({});
@@ -3367,6 +3370,12 @@ class GioFormJsonSchemaComponent {
             this.fields = [this.gioFormlyJsonSchema.toFormlyFieldConfig(jsonSchema)];
         }
     }
+    ngOnChanges(changes) {
+        if (changes.jsonSchema) {
+            this.isReady = false;
+            this.ready.next(false);
+        }
+    }
     ngOnInit() {
         // When the parent form is touched, mark all the sub formGroup as touched if not already touched
         const parentControl = this.ngControl?.control?.parent;
@@ -3383,6 +3392,14 @@ class GioFormJsonSchemaComponent {
         this.ngControl?.control?.addAsyncValidators(() => {
             return this.isValid$.pipe(take(1), map(isValid => (isValid ? null : { invalid: true })), takeUntil(this.unsubscribe$));
         });
+        // Init control value with default value without emit event
+        this.formGroup.valueChanges.pipe(take(1), takeUntil(this.unsubscribe$)).subscribe(value => {
+            this.ngControl?.control?.reset(value, { emitEvent: false });
+            this.changeDetectorRef.markForCheck();
+            this.changeDetectorRef.detectChanges();
+        });
+        this.changeDetectorRef.markForCheck();
+        this.changeDetectorRef.detectChanges();
         // Subscribe to state changes to manage touches, status and value
         this.stateChanges$
             .pipe(tap(() => {
@@ -3412,16 +3429,22 @@ class GioFormJsonSchemaComponent {
             this.ngControl?.control?.updateValueAndValidity({
                 emitEvent: false,
             });
+            // After the first state change, the form is ready
+            if (!this.isReady) {
+                this.isReady = true;
+                this.ready.emit(true);
+            }
         });
     }
     ngAfterViewInit() {
         // Group all valueChanges events emit by formly in a single one
         merge(this.formGroup.statusChanges, this.formGroup.valueChanges)
-            .pipe(debounceTime(100), takeUntil(this.unsubscribe$))
+            .pipe(
+        // Force fist stateChanges$
+        startWith({}), debounceTime(100), takeUntil(this.unsubscribe$))
             .subscribe(() => {
             this.stateChanges$.next();
         });
-        this.stateChanges$.next();
     }
     ngOnDestroy() {
         this.unsubscribe$.next();
@@ -3456,7 +3479,7 @@ class GioFormJsonSchemaComponent {
     }
 }
 GioFormJsonSchemaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaComponent, deps: [{ token: GioFormlyJsonSchemaService }, { token: i0.ElementRef }, { token: i1$1.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$5.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+GioFormJsonSchemaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFormJsonSchemaComponent, selector: "gio-form-json-schema", inputs: { jsonSchema: "jsonSchema", options: "options" }, outputs: { ready: "ready" }, host: { properties: { "attr.gioFormFocusInvalidIgnore": "this.gioFormFocusInvalidIgnore" } }, usesOnChanges: true, 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$5.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }], directives: [{ type: i2.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"] }]
@@ -3471,6 +3494,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], options: [{
                 type: Input
+            }], ready: [{
+                type: Output
             }] } });
 
 /*