@gravitee/ui-particles-angular 5.19.1 → 5.20.0

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

@@ -78,6 +78,8 @@ class GioSaveBarComponent {
         this.invalidState = false;
         this.creationMode = false;
         this.hasSubmitLock = true;
+        this.hideSubmitButton = false;
+        this.hideDiscardButton = false;
         this.resetClicked = new EventEmitter();
         this.submitted = new EventEmitter();
         this.submittedInvalidState = new EventEmitter();
@@ -122,7 +124,7 @@ class GioSaveBarComponent {
     }
 }
 GioSaveBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioSaveBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GioSaveBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioSaveBarComponent, selector: "gio-save-bar", inputs: { opened: "opened", invalidState: "invalidState", creationMode: "creationMode", form: "form", formInitialValues: "formInitialValues" }, outputs: { resetClicked: "resetClicked", submitted: "submitted", submittedInvalidState: "submittedInvalidState" }, host: { listeners: { "disable-submit-lock": "onDisableSubmitLock()" }, properties: { "class.save-bar-sticky": "this.isSticky", "class.is-open": "this.isOpen" } }, ngImport: i0, template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n\n<div *ngIf=\"isOpen\" [@slideUpDown] [@.disabled]=\"creationMode\">\n  <mat-card class=\"save-bar__content\" [class.mat-elevation-z3]=\"creationMode\" [class.mat-elevation-z6]=\"!creationMode\">\n    <div class=\"save-bar__content__label\">{{ creationMode ? '' : 'You have unsaved changes' }}</div>\n    <div>\n      <button *ngIf=\"!creationMode\" class=\"save-bar__content__reset-button\" mat-button type=\"button\" (click)=\"onResetClicked()\">\n        Discard\n      </button>\n      <button\n        class=\"save-bar__content__submit-button\"\n        [class.invalid]=\"(form && form.invalid) || invalidState\"\n        mat-flat-button\n        color=\"primary\"\n        [type]=\"form ? 'submit' : 'button'\"\n        (click)=\"onSubmitClicked()\"\n      >\n        {{ creationMode ? 'Create' : 'Save' }}\n      </button>\n    </div>\n  </mat-card>\n</div>\n", styles: [":host{z-index:1000;display:block;height:68px;margin-top:32px;visibility:hidden}:host.is-open{visibility:visible}:host(.save-bar-sticky){position:sticky;bottom:0;margin-right:-16px;margin-left:-16px}.save-bar__content{display:flex;height:100%;align-items:center;justify-content:space-between;padding:16px 24px}.save-bar__content__label{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.save-bar__content__reset-button{margin-right:16px}.save-bar__content__submit-button.invalid{background-color:#d6ffff;color:#000}.save-bar__content__submit-button.invalid:hover:enabled{background-color:#099;color:#fff}\n"], components: [{ type: i1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { 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"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+GioSaveBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioSaveBarComponent, selector: "gio-save-bar", inputs: { opened: "opened", invalidState: "invalidState", creationMode: "creationMode", form: "form", formInitialValues: "formInitialValues", hideSubmitButton: "hideSubmitButton", hideDiscardButton: "hideDiscardButton" }, outputs: { resetClicked: "resetClicked", submitted: "submitted", submittedInvalidState: "submittedInvalidState" }, host: { listeners: { "disable-submit-lock": "onDisableSubmitLock()" }, properties: { "class.save-bar-sticky": "this.isSticky", "class.is-open": "this.isOpen" } }, ngImport: i0, template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n\n<div *ngIf=\"isOpen\" [@slideUpDown] [@.disabled]=\"creationMode\">\n  <mat-card class=\"save-bar__content\" [class.mat-elevation-z3]=\"creationMode\" [class.mat-elevation-z6]=\"!creationMode\">\n    <div class=\"save-bar__content__label\">{{ creationMode ? '' : 'You have unsaved changes' }}</div>\n    <div class=\"save-bar__content__actions\">\n      <button\n        *ngIf=\"!creationMode && !hideDiscardButton\"\n        class=\"save-bar__content__actions__reset-button\"\n        mat-button\n        type=\"button\"\n        (click)=\"onResetClicked()\"\n      >\n        Discard\n      </button>\n      <ng-content></ng-content>\n      <button\n        *ngIf=\"!hideSubmitButton\"\n        class=\"save-bar__content__actions__submit-button\"\n        [class.invalid]=\"(form && form.invalid) || invalidState\"\n        mat-flat-button\n        color=\"primary\"\n        [type]=\"form ? 'submit' : 'button'\"\n        (click)=\"onSubmitClicked()\"\n      >\n        {{ creationMode ? 'Create' : 'Save' }}\n      </button>\n    </div>\n  </mat-card>\n</div>\n", styles: [":host{z-index:1000;display:block;height:68px;margin-top:32px;visibility:hidden}:host.is-open{visibility:visible}:host(.save-bar-sticky){position:sticky;bottom:0;margin-right:-16px;margin-left:-16px}.save-bar__content{display:flex;height:100%;align-items:center;justify-content:space-between;padding:16px 24px}.save-bar__content__label{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.save-bar__content__actions{display:flex;gap:16px}.save-bar__content__actions__submit-button.invalid{background-color:#d6ffff;color:#000}.save-bar__content__actions__submit-button.invalid:hover:enabled{background-color:#099;color:#fff}\n"], components: [{ type: i1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { 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"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
         trigger('slideUpDown', [
             transition(':enter', [
                 style({ transform: 'translateY(40vh)', opacity: '0' }),
@@ -147,7 +149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ transform: 'translateY(40vh)', opacity: '0' })),
                             ]),
                         ]),
-                    ], template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n\n<div *ngIf=\"isOpen\" [@slideUpDown] [@.disabled]=\"creationMode\">\n  <mat-card class=\"save-bar__content\" [class.mat-elevation-z3]=\"creationMode\" [class.mat-elevation-z6]=\"!creationMode\">\n    <div class=\"save-bar__content__label\">{{ creationMode ? '' : 'You have unsaved changes' }}</div>\n    <div>\n      <button *ngIf=\"!creationMode\" class=\"save-bar__content__reset-button\" mat-button type=\"button\" (click)=\"onResetClicked()\">\n        Discard\n      </button>\n      <button\n        class=\"save-bar__content__submit-button\"\n        [class.invalid]=\"(form && form.invalid) || invalidState\"\n        mat-flat-button\n        color=\"primary\"\n        [type]=\"form ? 'submit' : 'button'\"\n        (click)=\"onSubmitClicked()\"\n      >\n        {{ creationMode ? 'Create' : 'Save' }}\n      </button>\n    </div>\n  </mat-card>\n</div>\n", styles: [":host{z-index:1000;display:block;height:68px;margin-top:32px;visibility:hidden}:host.is-open{visibility:visible}:host(.save-bar-sticky){position:sticky;bottom:0;margin-right:-16px;margin-left:-16px}.save-bar__content{display:flex;height:100%;align-items:center;justify-content:space-between;padding:16px 24px}.save-bar__content__label{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.save-bar__content__reset-button{margin-right:16px}.save-bar__content__submit-button.invalid{background-color:#d6ffff;color:#000}.save-bar__content__submit-button.invalid:hover:enabled{background-color:#099;color:#fff}\n"] }]
+                    ], template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n\n<div *ngIf=\"isOpen\" [@slideUpDown] [@.disabled]=\"creationMode\">\n  <mat-card class=\"save-bar__content\" [class.mat-elevation-z3]=\"creationMode\" [class.mat-elevation-z6]=\"!creationMode\">\n    <div class=\"save-bar__content__label\">{{ creationMode ? '' : 'You have unsaved changes' }}</div>\n    <div class=\"save-bar__content__actions\">\n      <button\n        *ngIf=\"!creationMode && !hideDiscardButton\"\n        class=\"save-bar__content__actions__reset-button\"\n        mat-button\n        type=\"button\"\n        (click)=\"onResetClicked()\"\n      >\n        Discard\n      </button>\n      <ng-content></ng-content>\n      <button\n        *ngIf=\"!hideSubmitButton\"\n        class=\"save-bar__content__actions__submit-button\"\n        [class.invalid]=\"(form && form.invalid) || invalidState\"\n        mat-flat-button\n        color=\"primary\"\n        [type]=\"form ? 'submit' : 'button'\"\n        (click)=\"onSubmitClicked()\"\n      >\n        {{ creationMode ? 'Create' : 'Save' }}\n      </button>\n    </div>\n  </mat-card>\n</div>\n", styles: [":host{z-index:1000;display:block;height:68px;margin-top:32px;visibility:hidden}:host.is-open{visibility:visible}:host(.save-bar-sticky){position:sticky;bottom:0;margin-right:-16px;margin-left:-16px}.save-bar__content{display:flex;height:100%;align-items:center;justify-content:space-between;padding:16px 24px}.save-bar__content__label{font:400 14px/20px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px}.save-bar__content__actions{display:flex;gap:16px}.save-bar__content__actions__submit-button.invalid{background-color:#d6ffff;color:#000}.save-bar__content__actions__submit-button.invalid:hover:enabled{background-color:#099;color:#fff}\n"] }]
         }], propDecorators: { isSticky: [{
                 type: HostBinding,
                 args: ['class.save-bar-sticky']
@@ -161,6 +163,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], formInitialValues: [{
                 type: Input
+            }], hideSubmitButton: [{
+                type: Input
+            }], hideDiscardButton: [{
+                type: Input
             }], resetClicked: [{
                 type: Output
             }], submitted: [{
@@ -207,15 +213,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 class GioSaveBarHarness extends ComponentHarness {
     constructor() {
         super(...arguments);
-        this.resetButtonSelector = '.save-bar__content__reset-button';
-        this.submitButtonSelector = '.save-bar__content__submit-button';
+        this.cardSelector = '.save-bar__content';
+        this.resetButtonSelector = '.save-bar__content__actions__reset-button';
+        this.submitButtonSelector = '.save-bar__content__actions__submit-button';
         this.getSubmitButton = this.locatorFor(this.submitButtonSelector);
         this.getResetButton = this.locatorFor(this.resetButtonSelector);
     }
     isVisible() {
         return __awaiter(this, void 0, void 0, function* () {
-            const submitButton = yield this.locatorForOptional(this.submitButtonSelector)();
-            return submitButton !== null;
+            const card = yield this.locatorForOptional(this.cardSelector)();
+            return card !== null;
         });
     }
     clickSubmit() {
@@ -232,6 +239,12 @@ class GioSaveBarHarness extends ComponentHarness {
             return submitButton.hasClass('invalid');
         });
     }
+    isSubmitButtonVisible() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const submitButton = yield this.locatorForOptional(this.submitButtonSelector)();
+            return submitButton !== null;
+        });
+    }
     isResetButtonVisible() {
         return __awaiter(this, void 0, void 0, function* () {
             const submitButton = yield this.locatorForOptional(this.resetButtonSelector)();
@@ -2738,6 +2751,34 @@ 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.
+ */
+const GIO_FORM_FOCUS_INVALID_IGNORE_SELECTOR = 'gioFormFocusInvalidIgnore';
+class GioFormFocusInvalidIgnoreDirective {
+}
+GioFormFocusInvalidIgnoreDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidIgnoreDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+GioFormFocusInvalidIgnoreDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GioFormFocusInvalidIgnoreDirective, selector: "[gioFormFocusInvalidIgnore]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidIgnoreDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: `[${GIO_FORM_FOCUS_INVALID_IGNORE_SELECTOR}]`,
+                }]
+        }] });
+
 /*
  * Copyright (C) 2023 The Gravitee team (http://gravitee.io)
  *
@@ -2830,6 +2871,7 @@ class GioFormJsonSchemaComponent {
         this.fm = fm;
         this.ngControl = ngControl;
         this.unsubscribe$ = new Subject();
+        this.gioFormFocusInvalidIgnore = true;
         this.formGroup = new FormGroup({});
         this.options = {};
         this.model = {};
@@ -2920,7 +2962,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: 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, 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"] }] });
+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"] }]
@@ -2930,7 +2972,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     }, {
                         type: Optional
                     }] }];
-    }, propDecorators: { jsonSchema: [{
+    }, propDecorators: { gioFormFocusInvalidIgnore: [{
+                type: HostBinding,
+                args: [`attr.${GIO_FORM_FOCUS_INVALID_IGNORE_SELECTOR}`]
+            }], jsonSchema: [{
                 type: Input
             }], options: [{
                 type: Input
@@ -3749,12 +3794,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GioFormFocusInvalidDirective {
-    constructor(renderer, formGroupDirective) {
-        this.renderer = renderer;
+class GioBaseFormFocusInvalidDirective {
+    constructor(hostElement, formGroupDirective) {
+        this.hostElement = hostElement;
         this.formGroupDirective = formGroupDirective;
     }
-    onFormSubmit() {
+    focusOnFirstInvalid() {
         const selector = '.ng-invalid[formControlName],input.ng-invalid,mat-select.ng-invalid,textarea.ng-invalid,.gio-ng-invalid';
         try {
             // Mark all controls as touched to display errors
@@ -3762,11 +3807,9 @@ class GioFormFocusInvalidDirective {
                 this.formGroupDirective.control.markAllAsTouched();
                 this.formGroupDirective.control.updateValueAndValidity();
             }
-            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);
-            }
+            const parentForm = this.hostElement.nativeElement.closest('form');
+            const invalidFieldElements = parentForm === null || parentForm === void 0 ? void 0 : parentForm.querySelectorAll(selector);
+            const invalidControl = this.getFirstInvalidControl(invalidFieldElements);
             if (invalidControl) {
                 invalidControl.scrollIntoView({ behavior: 'smooth', block: 'center' });
                 invalidControl.focus({ preventScroll: true });
@@ -3777,22 +3820,57 @@ class GioFormFocusInvalidDirective {
             // 🧪 Useful to avoid som error in tests
         }
     }
+    getFirstInvalidControl(invalidFieldElements, index = 0) {
+        var _a;
+        let invalidControl = invalidFieldElements === null || invalidFieldElements === void 0 ? void 0 : invalidFieldElements.item(index);
+        const hasIgnoreAttribute = (_a = invalidControl === null || invalidControl === void 0 ? void 0 : invalidControl.attributes) === null || _a === void 0 ? void 0 : _a.getNamedItem(GIO_FORM_FOCUS_INVALID_IGNORE_SELECTOR);
+        if (hasIgnoreAttribute) {
+            invalidControl = this.getFirstInvalidControl(invalidFieldElements, index + 1);
+        }
+        return invalidControl;
+    }
 }
-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: [{
+GioBaseFormFocusInvalidDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioBaseFormFocusInvalidDirective, deps: [{ token: i0.ElementRef }, { token: i7.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+GioBaseFormFocusInvalidDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GioBaseFormFocusInvalidDirective, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioBaseFormFocusInvalidDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i7.FormGroupDirective, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
+class GioFormFocusInvalidFormDirective extends GioBaseFormFocusInvalidDirective {
+    onFormSubmit() {
+        this.focusOnFirstInvalid();
+    }
+}
+GioFormFocusInvalidFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+GioFormFocusInvalidFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GioFormFocusInvalidFormDirective, selector: "form[gioFormFocusInvalid]", host: { listeners: { "submit": "onFormSubmit()" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidFormDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'form[gioFormFocusInvalid]',
                 }]
-        }], ctorParameters: function () {
-        return [{ type: i0.Renderer2 }, { type: i7.FormGroupDirective, decorators: [{
-                        type: Optional
-                    }] }];
-    }, propDecorators: { onFormSubmit: [{
+        }], propDecorators: { onFormSubmit: [{
                 type: HostListener,
                 args: ['submit']
             }] } });
+class GioButtonFocusInvalidButtonDirective extends GioBaseFormFocusInvalidDirective {
+    onClick() {
+        this.focusOnFirstInvalid();
+    }
+}
+GioButtonFocusInvalidButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioButtonFocusInvalidButtonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+GioButtonFocusInvalidButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GioButtonFocusInvalidButtonDirective, selector: "button[gioFormFocusInvalid]", host: { listeners: { "click": "onClick()" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioButtonFocusInvalidButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[gioFormFocusInvalid]',
+                }]
+        }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
 
 /*
  * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
@@ -3812,13 +3890,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 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.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormFocusInvalidModule, declarations: [GioFormFocusInvalidFormDirective, GioButtonFocusInvalidButtonDirective, GioFormFocusInvalidIgnoreDirective], exports: [GioFormFocusInvalidFormDirective, GioButtonFocusInvalidButtonDirective, GioFormFocusInvalidIgnoreDirective] });
 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],
+                    declarations: [GioFormFocusInvalidFormDirective, GioButtonFocusInvalidButtonDirective, GioFormFocusInvalidIgnoreDirective],
+                    exports: [GioFormFocusInvalidFormDirective, GioButtonFocusInvalidButtonDirective, GioFormFocusInvalidIgnoreDirective],
                 }]
         }] });
 
@@ -4368,5 +4446,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * 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, GioFormFocusInvalidDirective, GioFormFocusInvalidModule, GioFormHeadersComponent, GioFormHeadersHarness, GioFormHeadersModule, GioFormJsonSchemaComponent, GioFormJsonSchemaModule, GioFormLabelComponent, GioFormPrefixDirective, GioFormSlideToggleComponent, GioFormSlideToggleDirective, GioFormSlideToggleModule, GioFormTagsInputComponent, GioFormTagsInputHarness, GioFormTagsInputModule, GioIconsModule, GioLoaderComponent, GioLoaderModule, 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 { GIO_FORM_FOCUS_INVALID_IGNORE_SELECTOR, GioAvatarComponent, GioAvatarModule, GioBannerActionDirective, GioBannerBodyDirective, GioBannerComponent, GioBannerErrorComponent, GioBannerInfoComponent, GioBannerModule, GioBannerSuccessComponent, GioBannerWarningComponent, GioBaseFormFocusInvalidDirective, GioBreadcrumbComponent, GioBreadcrumbItemDirective, GioBreadcrumbModule, GioButtonFocusInvalidButtonDirective, GioConfirmAndValidateDialogComponent, GioConfirmAndValidateDialogHarness, GioConfirmAndValidateDialogModule, GioConfirmDialogComponent, GioConfirmDialogHarness, GioConfirmDialogModule, GioFormFilePickerAddButtonComponent, GioFormFilePickerComponent, GioFormFilePickerEmptyComponent, GioFormFilePickerInputHarness, GioFormFilePickerLabelComponent, GioFormFilePickerModule, GioFormFocusInvalidFormDirective, GioFormFocusInvalidIgnoreDirective, GioFormFocusInvalidModule, GioFormHeadersComponent, GioFormHeadersHarness, GioFormHeadersModule, GioFormJsonSchemaComponent, GioFormJsonSchemaModule, GioFormLabelComponent, GioFormPrefixDirective, GioFormSlideToggleComponent, GioFormSlideToggleDirective, GioFormSlideToggleModule, GioFormTagsInputComponent, GioFormTagsInputHarness, GioFormTagsInputModule, GioIconsModule, GioLoaderComponent, GioLoaderModule, 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