@gravitee/ui-particles-angular 7.22.0 → 7.22.1-apim-1416-enable-disable-form-70f7ec2

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

@@ -4066,12 +4066,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * limitations under the License.
  */
 class GioFjsArrayTypeComponent extends FieldArrayType {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
         this.collapse = false;
     }
+    /**
+     * This method is here to ensure that all fields of the array are disabled or enabled when the form is disabled or enabled.
+     */
+    ngAfterViewChecked() {
+        this.field.props.disabled = this.form.disabled;
+        this.field.fieldGroup?.forEach(f => {
+            if (f && f.props)
+                f.props.disabled = this.form.disabled;
+        });
+        this.cdr.detectChanges();
+    }
+    /**
+     * This method fix an issue with the fieldChanges Subject which can be undefined when we enable or disable the form.
+     */
+    onFocusIn() {
+        if (this.field && this.field.options && this.field.options.fieldChanges === undefined) {
+            this.field.options.fieldChanges = new Subject();
+        }
+    }
+    /**
+     * This method fix an issue with the fieldChanges Subject which can be undefined when we enable or disable the form
+     * and then try to add a new field.
+     */
+    add() {
+        if (this.field && this.field.options && this.field.options.fieldChanges === undefined) {
+            this.field.options.fieldChanges = new Subject();
+        }
+        super.add();
+    }
 }
-GioFjsArrayTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsArrayTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+GioFjsArrayTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsArrayTypeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 GioFjsArrayTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFjsArrayTypeComponent, selector: "gio-fjs-array-type", usesInheritance: true, ngImport: i0, template: `
     <div class="wrapper" [class.error]="formControl.touched && formControl.invalid">
       <div class="wrapper__header">
@@ -4092,16 +4122,18 @@ GioFjsArrayTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
 
       <div [hidden]="collapse" class="wrapper__rows" [class.collapse-open]="collapse" [class.collapse-close]="!collapse">
         <div *ngFor="let field of field.fieldGroup; let i = index" class="wrapper__rows__row">
-          <formly-field class="wrapper__rows__row__field" [field]="field"></formly-field>
+          <formly-field class="wrapper__rows__row__field" [field]="field" (focusin)="onFocusIn()"></formly-field>
           <div class="wrapper__rows__row__remove">
-            <button type="button" mat-icon-button aria-label="Remove" (click)="remove(i)">
+            <button type="button" mat-icon-button aria-label="Remove" [disabled]="this.form?.disabled ?? false" (click)="remove(i)">
               <mat-icon svgIcon="gio:cancel"></mat-icon>
             </button>
           </div>
         </div>
 
         <div>
-          <button type="button" mat-stroked-button aria-label="Add" (click)="add()"><mat-icon svgIcon="gio:plus"></mat-icon> Add</button>
+          <button type="button" mat-stroked-button aria-label="Add" [disabled]="this.form?.disabled ?? false" (click)="add()">
+            <mat-icon svgIcon="gio:plus"></mat-icon> Add
+          </button>
         </div>
       </div>
     </div>
@@ -4128,21 +4160,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
       <div [hidden]="collapse" class="wrapper__rows" [class.collapse-open]="collapse" [class.collapse-close]="!collapse">
         <div *ngFor="let field of field.fieldGroup; let i = index" class="wrapper__rows__row">
-          <formly-field class="wrapper__rows__row__field" [field]="field"></formly-field>
+          <formly-field class="wrapper__rows__row__field" [field]="field" (focusin)="onFocusIn()"></formly-field>
           <div class="wrapper__rows__row__remove">
-            <button type="button" mat-icon-button aria-label="Remove" (click)="remove(i)">
+            <button type="button" mat-icon-button aria-label="Remove" [disabled]="this.form?.disabled ?? false" (click)="remove(i)">
               <mat-icon svgIcon="gio:cancel"></mat-icon>
             </button>
           </div>
         </div>
 
         <div>
-          <button type="button" mat-stroked-button aria-label="Add" (click)="add()"><mat-icon svgIcon="gio:plus"></mat-icon> Add</button>
+          <button type="button" mat-stroked-button aria-label="Add" [disabled]="this.form?.disabled ?? false" (click)="add()">
+            <mat-icon svgIcon="gio:plus"></mat-icon> Add
+          </button>
         </div>
       </div>
     </div>
   `, styles: [".wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper.error{border-color:#ec4899}.wrapper:empty{display:none}.wrapper__header{display:flex}.wrapper__header__text{flex:1 1 auto}.wrapper__header__text__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:8px}.wrapper__header__collapse{flex:0 0 auto}.wrapper__header__collapse .collapse-open{transform:rotate(180deg);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__header__collapse .collapse-close{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}.wrapper__rows__row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.wrapper__rows__row+.wrapper__rows__row{padding-top:3px;border-top:1px solid #d3d5dc;margin-top:4px}.wrapper__rows__row__field{flex:1 1 auto}.wrapper__rows__row__remove{flex:0 0 auto}\n"] }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
 
 function minItemsValidationMessage(error, field) {
     return `Should NOT have fewer than ${field.props?.minItems} items`;
@@ -4228,12 +4262,28 @@ function bannerExtension(field) {
  * limitations under the License.
  */
 class GioFjsMultiSchemaTypeComponent extends FieldType {
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.unsubscribe$ = new Subject();
+    }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.unsubscribe();
+    }
     ngOnInit() {
         set(this.field, 'fieldGroup[0].props.appearance', 'fill');
         set(this.field, 'fieldGroup[0].props.label', 'Select option');
+        set(this.field, 'fieldGroup[0].props.disabled', this.form.disabled);
+        this.form.valueChanges
+            .pipe(tap(() => {
+            set(this.field, 'fieldGroup[0].props.disabled', this.form.disabled);
+            this.cdr.detectChanges();
+        }), takeUntil(this.unsubscribe$))
+            .subscribe();
     }
 }
-GioFjsMultiSchemaTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsMultiSchemaTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+GioFjsMultiSchemaTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsMultiSchemaTypeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 GioFjsMultiSchemaTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFjsMultiSchemaTypeComponent, selector: "gio-fjs-multi-schema-type", usesInheritance: true, ngImport: i0, template: `
     <div class="wrapper">
       <div class="wrapper__title" *ngIf="props.label">{{ props.label }}</div>
@@ -4256,7 +4306,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
       <formly-field *ngFor="let f of field.fieldGroup" [field]="f"></formly-field>
     </div>
   `, styles: [".wrapper__title{font-size:16px;font-weight:500;line-height:24px;font:600 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:4px}.wrapper:empty{display:none}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}\n"] }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
 
 /*
  * Copyright (C) 2023 The Gravitee team (http://gravitee.io)