@gravitee/ui-particles-angular 5.8.0 → 5.9.0

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

@@ -1,6 +1,6 @@
 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 } from '@angular/core';
+import { EventEmitter, Component, HostBinding, Input, Output, HostListener, NgModule, Optional, Self, ViewChild, Directive, Inject, forwardRef, ChangeDetectionStrategy, Injectable, ViewEncapsulation, ContentChildren, Host } from '@angular/core';
 import { timer, Subject, fromEvent, of, BehaviorSubject } from 'rxjs';
 import * as i1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
@@ -12,7 +12,7 @@ import { ComponentHarness, HarnessPredicate, parallel, TestKey } from '@angular/
 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 } from 'lodash';
+import { isEmpty, toLower, dropRight, isNil, isArray, remove, isObject, cloneDeep, set } from 'lodash';
 import { startWith, map, distinctUntilChanged, tap, debounce, takeUntil, delay, filter, switchMap } from 'rxjs/operators';
 import * as i7 from '@angular/forms';
 import { FormsModule, FormArray, FormGroup, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
@@ -2779,22 +2779,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * limitations under the License.
  */
 class GioFormJsonSchemaComponent {
-    constructor(formlyJsonschema) {
+    constructor(formlyJsonschema, elRef, fm, ngControl) {
         this.formlyJsonschema = formlyJsonschema;
+        this.elRef = elRef;
+        this.fm = fm;
+        this.ngControl = ngControl;
+        this.unsubscribe$ = new Subject();
         this.formGroup = new FormGroup({});
         this.options = {};
         this.model = {};
         this.fields = [];
+        this._onChange = () => ({});
+        this._onTouched = () => ({});
+        this.touched = false;
+        if (ngControl) {
+            // Setting the value accessor directly (instead of using
+            // the providers `NG_VALUE_ACCESSOR`) to avoid running into a circular import.
+            ngControl.valueAccessor = this;
+        }
+        // When the user interact with the form, mark it as touched
+        fm.monitor(elRef.nativeElement, true)
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe(() => {
+            this._onTouched();
+            this.touched = true;
+        });
     }
     set jsonSchema(jsonSchema) {
         if (isObject(jsonSchema)) {
             this.fields = [this.toFormlyFieldConfig(jsonSchema)];
         }
     }
-    set initialValue(initialValue) {
-        if (initialValue) {
-            this.model = cloneDeep(initialValue);
-        }
+    ngOnInit() {
+        this.formGroup.statusChanges.pipe(takeUntil(this.unsubscribe$)).subscribe(status => {
+            if (status === 'VALID') {
+                this.ngControl?.control?.setErrors(null);
+            }
+            if (status === 'INVALID') {
+                this.ngControl?.control?.setErrors({ invalid: true });
+            }
+        });
+        // 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
+        this.formGroup.valueChanges
+            .pipe(takeUntil(this.unsubscribe$), filter(() => this.touched))
+            .subscribe(value => {
+            this._onChange(value);
+        });
+    }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.unsubscribe();
+        this.fm.stopMonitoring(this.elRef.nativeElement);
+    }
+    // From ControlValueAccessor
+    writeValue(value) {
+        this.model = cloneDeep(value) ?? {};
+    }
+    // From ControlValueAccessor
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    // From ControlValueAccessor
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    // From ControlValueAccessor
+    setDisabledState(_isDisabled) {
+        throw new Error('Method not implemented.');
     }
     toFormlyFieldConfig(jsonSchema) {
         return this.formlyJsonschema.toFieldConfig(jsonSchema, {
@@ -2816,22 +2868,23 @@ class GioFormJsonSchemaComponent {
         };
     }
 }
-GioFormJsonSchemaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaComponent, deps: [{ token: i1$3.FormlyJsonschema }], 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", formGroup: "formGroup", options: "options", initialValue: "initialValue" }, ngImport: i0, template: `<formly-form [fields]="fields" [options]="options" [form]="formGroup" [model]="model"></formly-form>`, isInline: true, components: [{ type: i1$4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }] });
+GioFormJsonSchemaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaComponent, deps: [{ token: i1$3.FormlyJsonschema }, { token: i0.ElementRef }, { token: i2$2.FocusMonitor }, { 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" }, ngImport: i0, template: `<formly-form *ngIf="formGroup" [fields]="fields" [options]="options" [form]="formGroup" [model]="model"></formly-form>`, isInline: true, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 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 [fields]="fields" [options]="options" [form]="formGroup" [model]="model"></formly-form>`,
+                    template: `<formly-form *ngIf="formGroup" [fields]="fields" [options]="options" [form]="formGroup" [model]="model"></formly-form>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: i1$3.FormlyJsonschema }]; }, propDecorators: { jsonSchema: [{
-                type: Input
-            }], formGroup: [{
+        }], ctorParameters: function () { return [{ type: i1$3.FormlyJsonschema }, { type: i0.ElementRef }, { type: i2$2.FocusMonitor }, { type: i7.NgControl, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }]; }, propDecorators: { jsonSchema: [{
                 type: Input
             }], options: [{
                 type: Input
-            }], initialValue: [{
-                type: Input
             }] } });
 
 /*
@@ -2886,30 +2939,27 @@ class GioFjsObjectTypeComponent extends FieldType {
 }
 GioFjsObjectTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsObjectTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 GioFjsObjectTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFjsObjectTypeComponent, selector: "gio-fjs-object-type", usesInheritance: true, ngImport: i0, template: `
-    <div>
-      <legend *ngIf="to.label">{{ to.label }}</legend>
+    <div class="wrapper">
+      <div class="wrapper__title" *ngIf="to.label">{{ to.label }}</div>
       <p *ngIf="to.description">{{ to.description }}</p>
       <div class="alert alert-danger" role="alert" *ngIf="showError && formControl.errors">
         <formly-validation-message [field]="field"></formly-validation-message>
       </div>
       <formly-field *ngFor="let f of field.fieldGroup" [field]="f"></formly-field>
     </div>
-  `, isInline: true, components: [{ type: i1$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i1$4.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  `, isInline: true, styles: [".wrapper{display:flex;flex-direction:column;padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:16px}.wrapper:empty{display:none}.wrapper formly-field+formly-field{margin-top:8px}\n"], components: [{ type: i1$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i1$4.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsObjectTypeComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'gio-fjs-object-type',
-                    template: `
-    <div>
-      <legend *ngIf="to.label">{{ to.label }}</legend>
+            args: [{ selector: 'gio-fjs-object-type', template: `
+    <div class="wrapper">
+      <div class="wrapper__title" *ngIf="to.label">{{ to.label }}</div>
       <p *ngIf="to.description">{{ to.description }}</p>
       <div class="alert alert-danger" role="alert" *ngIf="showError && formControl.errors">
         <formly-validation-message [field]="field"></formly-validation-message>
       </div>
       <formly-field *ngFor="let f of field.fieldGroup" [field]="f"></formly-field>
     </div>
-  `,
-                }]
+  `, styles: [".wrapper{display:flex;flex-direction:column;padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:16px}.wrapper:empty{display:none}.wrapper formly-field+formly-field{margin-top:8px}\n"] }]
         }] });
 
 /*
@@ -2931,8 +2981,8 @@ class GioFjsArrayTypeComponent extends FieldArrayType {
 }
 GioFjsArrayTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsArrayTypeComponent, deps: null, 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>
-      <legend *ngIf="to.label">{{ to.label }}</legend>
+    <div class="wrapper">
+      <div class="wrapper__title" *ngIf="to.label">{{ to.label }}</div>
       <p *ngIf="to.description">{{ to.description }}</p>
 
       <div class="alert alert-danger" role="alert" *ngIf="showError && formControl.errors">
@@ -2950,14 +3000,12 @@ GioFjsArrayTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
         <button class="btn btn-primary" type="button" (click)="add()">+</button>
       </div>
     </div>
-  `, isInline: true, components: [{ type: i1$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i1$4.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  `, isInline: true, styles: [".wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:16px}.wrapper:empty{display:none}.wrapper formly-field+formly-field{display:block;margin-top:8px}\n"], components: [{ type: i1$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i1$4.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsArrayTypeComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'gio-fjs-array-type',
-                    template: `
-    <div>
-      <legend *ngIf="to.label">{{ to.label }}</legend>
+            args: [{ selector: 'gio-fjs-array-type', template: `
+    <div class="wrapper">
+      <div class="wrapper__title" *ngIf="to.label">{{ to.label }}</div>
       <p *ngIf="to.description">{{ to.description }}</p>
 
       <div class="alert alert-danger" role="alert" *ngIf="showError && formControl.errors">
@@ -2975,8 +3023,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <button class="btn btn-primary" type="button" (click)="add()">+</button>
       </div>
     </div>
-  `,
-                }]
+  `, styles: [".wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:16px}.wrapper:empty{display:none}.wrapper formly-field+formly-field{display:block;margin-top:8px}\n"] }]
         }] });
 
 function minItemsValidationMessage(error, field) {
@@ -3063,37 +3110,33 @@ function bannerExtension(field) {
  * limitations under the License.
  */
 class GioFjsMultiSchemaTypeComponent extends FieldType {
+    ngOnInit() {
+        set(this.field, 'fieldGroup[0].props.appearance', 'fill');
+    }
 }
 GioFjsMultiSchemaTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsMultiSchemaTypeComponent, deps: null, 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="card mb-3">
-      <div class="card-body">
-        <legend *ngIf="props.label">{{ props.label }}</legend>
-        <p *ngIf="props.description">{{ props.description }}</p>
-        <div class="alert alert-danger" role="alert" *ngIf="showError && formControl.errors">
-          <formly-validation-message [field]="field"></formly-validation-message>
-        </div>
-        <formly-field *ngFor="let f of field.fieldGroup" [field]="f"></formly-field>
+    <div class="wrapper">
+      <div class="wrapper__title" *ngIf="props.label">{{ props.label }}</div>
+      <p *ngIf="props.description">{{ props.description }}</p>
+      <div role="alert" *ngIf="showError && formControl.errors">
+        <formly-validation-message [field]="field"></formly-validation-message>
       </div>
+      <formly-field *ngFor="let f of field.fieldGroup" [field]="f"></formly-field>
     </div>
-  `, isInline: true, components: [{ type: i1$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i1$4.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  `, isInline: true, styles: ["::ng-deep gio-fjs-multi-schema-type div.wrapper formly-field:first-child mat-form-field{padding-bottom:0}.wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__title{font-size:16px;font-weight:500;letter-spacing:.4px;line-height:24px;margin-bottom:4px}.wrapper:empty{display:none}\n"], components: [{ type: i1$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: i1$4.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsMultiSchemaTypeComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'gio-fjs-multi-schema-type',
-                    template: `
-    <div class="card mb-3">
-      <div class="card-body">
-        <legend *ngIf="props.label">{{ props.label }}</legend>
-        <p *ngIf="props.description">{{ props.description }}</p>
-        <div class="alert alert-danger" role="alert" *ngIf="showError && formControl.errors">
-          <formly-validation-message [field]="field"></formly-validation-message>
-        </div>
-        <formly-field *ngFor="let f of field.fieldGroup" [field]="f"></formly-field>
+            args: [{ selector: 'gio-fjs-multi-schema-type', template: `
+    <div class="wrapper">
+      <div class="wrapper__title" *ngIf="props.label">{{ props.label }}</div>
+      <p *ngIf="props.description">{{ props.description }}</p>
+      <div role="alert" *ngIf="showError && formControl.errors">
+        <formly-validation-message [field]="field"></formly-validation-message>
       </div>
+      <formly-field *ngFor="let f of field.fieldGroup" [field]="f"></formly-field>
     </div>
-  `,
-                }]
+  `, styles: ["::ng-deep gio-fjs-multi-schema-type div.wrapper formly-field:first-child mat-form-field{padding-bottom:0}.wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__title{font-size:16px;font-weight:500;letter-spacing:.4px;line-height:24px;margin-bottom:4px}.wrapper:empty{display:none}\n"] }]
         }] });
 
 /*
@@ -3120,10 +3163,12 @@ GioFormJsonSchemaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         GioFjsMultiSchemaTypeComponent,
         GioFjsArrayTypeComponent,
         GioFormFieldWrapperComponent], imports: [CommonModule,
+        A11yModule,
         ReactiveFormsModule, i1$4.FormlyModule, FormlyMaterialModule,
         GioIconsModule], exports: [GioFormJsonSchemaComponent, FormlyModule] });
 GioFormJsonSchemaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormJsonSchemaModule, imports: [[
             CommonModule,
+            A11yModule,
             ReactiveFormsModule,
             FormlyModule.forRoot({
                 validationMessages: [
@@ -3149,6 +3194,9 @@ GioFormJsonSchemaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
                     { name: 'multischema', component: GioFjsMultiSchemaTypeComponent },
                 ],
                 extensions: [{ name: 'banner', extension: { onPopulate: bannerExtension } }],
+                extras: {
+                    checkExpressionOn: 'changeDetectionCheck',
+                },
             }),
             FormlyMaterialModule,
             GioIconsModule,
@@ -3166,6 +3214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     ],
                     imports: [
                         CommonModule,
+                        A11yModule,
                         ReactiveFormsModule,
                         FormlyModule.forRoot({
                             validationMessages: [
@@ -3191,6 +3240,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 { name: 'multischema', component: GioFjsMultiSchemaTypeComponent },
                             ],
                             extensions: [{ name: 'banner', extension: { onPopulate: bannerExtension } }],
+                            extras: {
+                                checkExpressionOn: 'changeDetectionCheck',
+                            },
                         }),
                         FormlyMaterialModule,
                         GioIconsModule,