@gravitee/ui-particles-angular 5.11.0-monaco-editor-fd07ef6 → 5.11.0-monaco-editor-c729a02

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

@@ -2881,6 +2881,11 @@ class GioFormJsonSchemaComponent {
         }
     }
     ngOnInit() {
+        // When the parent form is touched, mark all the sub formGroup as touched
+        const parentControl = this.ngControl?.control?.parent;
+        parentControl?.statusChanges
+            ?.pipe(takeUntil(this.unsubscribe$), map(() => parentControl?.touched), filter(touched => touched === true), tap(() => this.formGroup.markAllAsTouched()))
+            .subscribe();
         this.formGroup.statusChanges.pipe(takeUntil(this.unsubscribe$)).subscribe(status => {
             if (status === 'VALID') {
                 this.ngControl?.control?.setErrors(null);
@@ -3129,7 +3134,7 @@ GioFjsObjectTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
     <div class="wrapper">
       <div class="wrapper__title" *ngIf="to.label">{{ to.label }}</div>
       <p *ngIf="to.description">{{ to.description }}</p>
-      <div class="wrapper__error" *ngIf="showError && formControl.errors">
+      <div class="wrapper__error gio-ng-invalid" *ngIf="showError && formControl.errors">
         <formly-validation-message [field]="field"></formly-validation-message>
       </div>
       <div class="wrapper__fields">
@@ -3143,7 +3148,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
     <div class="wrapper">
       <div class="wrapper__title" *ngIf="to.label">{{ to.label }}</div>
       <p *ngIf="to.description">{{ to.description }}</p>
-      <div class="wrapper__error" *ngIf="showError && formControl.errors">
+      <div class="wrapper__error gio-ng-invalid" *ngIf="showError && formControl.errors">
         <formly-validation-message [field]="field"></formly-validation-message>
       </div>
       <div class="wrapper__fields">
@@ -3176,7 +3181,7 @@ 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 class="wrapper">
+    <div class="wrapper" [class.error]="formControl.touched && formControl.invalid">
       <div class="wrapper__header">
         <div class="wrapper__header__text">
           <div class="wrapper__header__text__title" *ngIf="to.label">{{ to.label }}</div>
@@ -3189,11 +3194,11 @@ GioFjsArrayTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
         </div>
       </div>
 
-      <div class="wrapper__error" *ngIf="showError && formControl.errors">
+      <div class="wrapper__error gio-ng-invalid" *ngIf="showError && formControl.errors">
         <formly-validation-message [field]="field"></formly-validation-message>
       </div>
 
-      <div *ngIf="!collapse" class="wrapper__rows" [class.collapse-open]="collapse" [class.collapse-close]="!collapse">
+      <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>
           <div class="wrapper__rows__row__remove">
@@ -3208,11 +3213,11 @@ GioFjsArrayTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [".wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.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"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.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"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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 class="wrapper">
+    <div class="wrapper" [class.error]="formControl.touched && formControl.invalid">
       <div class="wrapper__header">
         <div class="wrapper__header__text">
           <div class="wrapper__header__text__title" *ngIf="to.label">{{ to.label }}</div>
@@ -3225,11 +3230,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </div>
       </div>
 
-      <div class="wrapper__error" *ngIf="showError && formControl.errors">
+      <div class="wrapper__error gio-ng-invalid" *ngIf="showError && formControl.errors">
         <formly-validation-message [field]="field"></formly-validation-message>
       </div>
 
-      <div *ngIf="!collapse" class="wrapper__rows" [class.collapse-open]="collapse" [class.collapse-close]="!collapse">
+      <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>
           <div class="wrapper__rows__row__remove">
@@ -3244,7 +3249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </div>
       </div>
     </div>
-  `, styles: [".wrapper{padding:8px;border:1px solid #d3d5dc;border-radius:8px}.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"] }]
+  `, 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"] }]
         }] });
 
 function minItemsValidationMessage(error, field) {
@@ -3341,7 +3346,7 @@ GioFjsMultiSchemaTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
     <div class="wrapper">
       <div class="wrapper__title" *ngIf="props.label">{{ props.label }}</div>
       <p *ngIf="props.description">{{ props.description }}</p>
-      <div class="wrapper__error" *ngIf="showError && formControl.errors">
+      <div class="wrapper__error gio-ng-invalid" *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>
@@ -3353,7 +3358,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
     <div class="wrapper">
       <div class="wrapper__title" *ngIf="props.label">{{ props.label }}</div>
       <p *ngIf="props.description">{{ props.description }}</p>
-      <div class="wrapper__error" *ngIf="showError && formControl.errors">
+      <div class="wrapper__error gio-ng-invalid" *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>
@@ -3657,6 +3662,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * limitations under the License.
  */
 
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class GioFormFocusInvalidDirective {
+    constructor(renderer, formGroupDirective) {
+        this.renderer = renderer;
+        this.formGroupDirective = formGroupDirective;
+    }
+    onFormSubmit() {
+        const selector = '.ng-invalid[formControlName],input.ng-invalid,mat-select.ng-invalid,textarea.ng-invalid,.gio-ng-invalid';
+        try {
+            let invalidControl = this.renderer.selectRootElement(selector, true);
+            // If the form is a GioFormJsonSchema, we need to focus the first invalid control inside
+            if (invalidControl.tagName === 'GIO-FORM-JSON-SCHEMA') {
+                invalidControl = invalidControl.querySelector(selector);
+            }
+            if (invalidControl) {
+                // Mark all controls as touched to display errors
+                if (this.formGroupDirective) {
+                    this.formGroupDirective.control.markAllAsTouched();
+                    this.formGroupDirective.control.updateValueAndValidity();
+                }
+                invalidControl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                invalidControl.focus({ preventScroll: true });
+            }
+        }
+        catch (error) {
+            // Best effort. If the focus doesn't work it's not very important
+            // 🧪 Useful to avoid som error in tests
+        }
+    }
+}
+GioFormFocusInvalidDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidDirective, deps: [{ token: i0.Renderer2 }, { token: i7.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+GioFormFocusInvalidDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GioFormFocusInvalidDirective, selector: "form[gioFormFocusInvalid]", host: { listeners: { "submit": "onFormSubmit()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'form[gioFormFocusInvalid]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i7.FormGroupDirective, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { onFormSubmit: [{
+                type: HostListener,
+                args: ['submit']
+            }] } });
+
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class GioFormFocusInvalidModule {
+}
+GioFormFocusInvalidModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GioFormFocusInvalidModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidModule, declarations: [GioFormFocusInvalidDirective], exports: [GioFormFocusInvalidDirective] });
+GioFormFocusInvalidModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [GioFormFocusInvalidDirective],
+                    exports: [GioFormFocusInvalidDirective],
+                }]
+        }] });
+
 /*
  * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
  *
@@ -4157,5 +4248,5 @@ GioMonacoEditorHarness.hostSelector = 'gio-monaco-editor';
  * Generated bundle index. Do not edit.
  */
 
-export { GioAvatarComponent, GioAvatarModule, GioBannerActionDirective, GioBannerBodyDirective, GioBannerComponent, GioBannerErrorComponent, GioBannerInfoComponent, GioBannerModule, GioBannerSuccessComponent, GioBannerWarningComponent, GioBreadcrumbComponent, GioBreadcrumbItemDirective, GioBreadcrumbModule, GioConfirmAndValidateDialogComponent, GioConfirmAndValidateDialogHarness, GioConfirmAndValidateDialogModule, GioConfirmDialogComponent, GioConfirmDialogHarness, GioConfirmDialogModule, GioFormFilePickerAddButtonComponent, GioFormFilePickerComponent, GioFormFilePickerEmptyComponent, GioFormFilePickerInputHarness, GioFormFilePickerLabelComponent, GioFormFilePickerModule, GioFormHeadersComponent, GioFormHeadersHarness, GioFormHeadersModule, GioFormJsonSchemaComponent, GioFormJsonSchemaModule, GioFormLabelComponent, GioFormPrefixDirective, GioFormSlideToggleComponent, GioFormSlideToggleDirective, GioFormSlideToggleModule, GioFormTagsInputComponent, GioFormTagsInputHarness, GioFormTagsInputModule, GioIconsModule, GioMatConfigModule, GioMenuComponent, GioMenuFooterComponent, GioMenuHeaderComponent, GioMenuItemComponent, GioMenuListComponent, GioMenuModule, GioMenuSelectorComponent, GioMenuSelectorHarness, GioMenuService, GioMonacoEditorComponent, GioMonacoEditorHarness, GioMonacoEditorModule, GioSaveBarComponent, GioSaveBarHarness, GioSaveBarModule, GioSubmenuComponent, GioSubmenuGroupComponent, GioSubmenuItemComponent, GioSubmenuModule, GioSubmenuTitleDirective, GioTopBarComponent, GioTopBarContentComponent, GioTopBarLinkComponent, GioTopBarLinkModule, GioTopBarMenuComponent, GioTopBarMenuModule, GioTopBarModule, NewFile };
+export { GioAvatarComponent, GioAvatarModule, GioBannerActionDirective, GioBannerBodyDirective, GioBannerComponent, GioBannerErrorComponent, GioBannerInfoComponent, GioBannerModule, GioBannerSuccessComponent, GioBannerWarningComponent, GioBreadcrumbComponent, GioBreadcrumbItemDirective, GioBreadcrumbModule, GioConfirmAndValidateDialogComponent, GioConfirmAndValidateDialogHarness, GioConfirmAndValidateDialogModule, GioConfirmDialogComponent, GioConfirmDialogHarness, GioConfirmDialogModule, GioFormFilePickerAddButtonComponent, GioFormFilePickerComponent, GioFormFilePickerEmptyComponent, GioFormFilePickerInputHarness, GioFormFilePickerLabelComponent, GioFormFilePickerModule, GioFormFocusInvalidDirective, GioFormFocusInvalidModule, GioFormHeadersComponent, GioFormHeadersHarness, GioFormHeadersModule, GioFormJsonSchemaComponent, GioFormJsonSchemaModule, GioFormLabelComponent, GioFormPrefixDirective, GioFormSlideToggleComponent, GioFormSlideToggleDirective, GioFormSlideToggleModule, GioFormTagsInputComponent, GioFormTagsInputHarness, GioFormTagsInputModule, GioIconsModule, GioMatConfigModule, GioMenuComponent, GioMenuFooterComponent, GioMenuHeaderComponent, GioMenuItemComponent, GioMenuListComponent, GioMenuModule, GioMenuSelectorComponent, GioMenuSelectorHarness, GioMenuService, GioMonacoEditorComponent, GioMonacoEditorHarness, GioMonacoEditorModule, GioSaveBarComponent, GioSaveBarHarness, GioSaveBarModule, GioSubmenuComponent, GioSubmenuGroupComponent, GioSubmenuItemComponent, GioSubmenuModule, GioSubmenuTitleDirective, GioTopBarComponent, GioTopBarContentComponent, GioTopBarLinkComponent, GioTopBarLinkModule, GioTopBarMenuComponent, GioTopBarMenuModule, GioTopBarModule, NewFile };
 //# sourceMappingURL=gravitee-ui-particles-angular.mjs.map