@six-group/ui-library-angular 0.0.0-insider.a8d68c7 → 0.0.0-insider.b50c229

package/fesm2020/six-group-ui-library-angular.mjs

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Injectable, inject, Directive, HostListener, Input, APP_INITIALIZER, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Injectable, inject, Directive, HostListener, Input, EventEmitter, Output, APP_INITIALIZER, NgModule } from '@angular/core';
 import { __decorate } from 'tslib';
 import { fromEvent } from 'rxjs';
 import { defineCustomElements } from '@six-group/ui-library/loader';
-import { NgControl, NG_VALUE_ACCESSOR, FormGroupDirective, FormControl, FormGroup, FormArray, NG_VALIDATORS, Validators } from '@angular/forms';
+import * as i1 from '@angular/forms';
+import { NgControl, NG_VALUE_ACCESSOR, FormControl, FormGroup, FormArray, NG_VALIDATORS, Validators } from '@angular/forms';
 import { getErrorMessage } from '@six-group/ui-library';
 
 /* eslint-disable */
@@ -215,7 +216,7 @@ SixCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
 SixCheckbox = __decorate([
     ProxyCmp({
         inputs: ['checked', 'disabled', 'errorText', 'indeterminate', 'invalid', 'label', 'name', 'required', 'value'],
-        methods: ['setFocus', 'removeFocus', 'reset']
+        methods: ['setFocus', 'removeFocus']
     })
 ], SixCheckbox);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixCheckbox, decorators: [{
@@ -878,7 +879,7 @@ SixRadio.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.
 SixRadio = __decorate([
     ProxyCmp({
         inputs: ['checked', 'disabled', 'invalid', 'name', 'value'],
-        methods: ['setFocus', 'removeFocus', 'reset']
+        methods: ['setFocus', 'removeFocus']
     })
 ], SixRadio);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixRadio, decorators: [{
@@ -1715,49 +1716,134 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['change', ['$event.target']]
             }] } });
 
+/**
+ * This directive intercepts the ngSubmit event of an Angular form and introduces
+ * a supplementary event named sixSubmit. The sixSubmit event is triggered exclusively
+ * when the form is valid. In cases where the form is considered invalid, this directive
+ * takes proactive actions by marking all form controls as touched and dirty. Additionally,
+ * it shifts the focus to the initial invalid form element, facilitating quick error
+ * resolution.
+ *
+ * To utilize this directive, apply it to an Angular form.
+ * ```html
+ * <form [formGroup]="form" sixForm (sixSubmit)="onSubmit($event)">
+ *   <!-- form content -->
+ * </form>
+ * ```
+ *
+ * For users needing greater flexibility in determining when error messages are displayed,
+ * or for those who prefer not to rely solely on the form submission event,
+ * an alternative is to use the SixFormUtilDirective.
+ */
+class SixFormDirective {
+    onNgSubmit(event) {
+        if (this.formGroupDirective.invalid) {
+            focusInvalidField(this.formGroupDirective, this.elementRef);
+        }
+        else {
+            this.sixSubmit.emit(event);
+        }
+    }
+    constructor(elementRef, formGroupDirective) {
+        this.elementRef = elementRef;
+        this.formGroupDirective = formGroupDirective;
+        /**
+         * Emits an event when the form is valid and the form submission has been triggered.
+         */
+        this.sixSubmit = new EventEmitter();
+    }
+}
+SixFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixFormDirective, deps: [{ token: i0.ElementRef }, { token: i1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Directive });
+SixFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SixFormDirective, selector: "form[sixForm]", outputs: { sixSubmit: "sixSubmit" }, host: { listeners: { "ngSubmit": "onNgSubmit($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixFormDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'form[sixForm]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.FormGroupDirective }]; }, propDecorators: { sixSubmit: [{
+                type: Output
+            }], onNgSubmit: [{
+                type: HostListener,
+                args: ['ngSubmit', ['$event']]
+            }] } });
+/**
+ * This directive provides a utility method, that marks all form controls
+ * as touched and dirty, and focuses the first invalid form element.
+ *
+ * To utilize this directive, apply it to an Angular form.
+ * ```html
+ * <form [formGroup]="form" sixFormUtil (ngSubmit)="onSubmit($event)">
+ *   <!-- form content -->
+ * </form>
+ * ```
+ *
+ * Then, get a reference to the directive and invoke `focusInvalidField()` if the
+ * form is invalid:
+ * ```ts
+ * @ViewChild(SixFormUtilDirective) sixFormUtil!: SixFormUtilDirective;
+ * // ...
+ * onSubmit() {
+ *   if (this.form.invalid) {
+ *     this.sixFormUtil.focusInvalidField();
+ *   } else {
+ *      // ...
+ *   }
+ * }
+ * ```
+ */
 class SixFormUtilDirective {
-    constructor(elementRef, injector) {
+    constructor(elementRef, formGroupDirective) {
         this.elementRef = elementRef;
-        this.injector = injector;
+        this.formGroupDirective = formGroupDirective;
     }
+    /** markAllControlsAsDirty(Object.values(formGroup.controls));
+     * Marks all form controls as touched and dirty, and focuses the first
+     * invalid form element.
+     */
     focusInvalidField() {
-        const formGroupDirective = this.injector.get(FormGroupDirective);
-        if (formGroupDirective) {
-            formGroupDirective.form.markAllAsTouched();
-            markAllAsDirty(formGroupDirective.form);
-            const invalidField = this.elementRef.nativeElement.querySelector('.ng-invalid');
-            if (typeof invalidField?.setFocus === 'function') {
-                invalidField.setFocus();
-            }
-            else if (typeof invalidField?.focus === 'function') {
-                invalidField?.focus();
-            }
-        }
+        focusInvalidField(this.formGroupDirective, this.elementRef);
     }
 }
-SixFormUtilDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixFormUtilDirective, deps: [{ token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+SixFormUtilDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixFormUtilDirective, deps: [{ token: i0.ElementRef }, { token: i1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Directive });
 SixFormUtilDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SixFormUtilDirective, selector: "[sixFormUtil]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SixFormUtilDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sixFormUtil]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Injector }]; } });
-function markAllAsDirty(formGroup) {
-    function markAllControlsAsDirty(controls) {
-        controls.forEach((control) => {
-            if (control instanceof FormControl) {
-                control.markAsDirty({ onlySelf: true });
-            }
-            else if (control instanceof FormGroup) {
-                markAllControlsAsDirty(Object.values(control.controls));
-            }
-            else if (control instanceof FormArray) {
-                markAllControlsAsDirty(control.controls);
-            }
-        });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.FormGroupDirective }]; } });
+function focusInvalidField(formGroupDirective, formElement) {
+    formGroupDirective.form.markAllAsTouched();
+    markAllAsDirty([formGroupDirective.form]);
+    const invalidElement = getInvalidElement(formElement.nativeElement);
+    if ('setFocus' in invalidElement && typeof invalidElement?.setFocus === 'function') {
+        invalidElement.setFocus();
+    }
+    if ('focus' in invalidElement && typeof invalidElement?.focus === 'function') {
+        invalidElement.focus();
     }
-    markAllControlsAsDirty(Object.values(formGroup.controls));
+}
+function getInvalidElement(parent) {
+    const invalidElement = parent.querySelector('.ng-invalid');
+    if (invalidElement == null) {
+        return parent;
+    }
+    return getInvalidElement(invalidElement);
+}
+function markAllAsDirty(controls) {
+    controls.forEach((control) => {
+        if (control instanceof FormControl) {
+            control.markAsDirty({ onlySelf: true });
+        }
+        else if (control instanceof FormGroup) {
+            control.markAsDirty({ onlySelf: true });
+            markAllAsDirty(Object.values(control.controls));
+        }
+        else if (control instanceof FormArray) {
+            control.markAsDirty({ onlySelf: true });
+            markAllAsDirty(control.controls);
+        }
+    });
 }
 
 class SixUiLibraryValidators {
@@ -2086,6 +2172,7 @@ UiLibraryAngularModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         MaxDateValidator,
         AllowedDatesValidator,
         // form helpers
+        SixFormDirective,
         SixFormUtilDirective], exports: [SetAttributes, SixAlert, SixAvatar, SixBadge, SixButton, SixCard, SixCheckbox, SixDatepicker, SixDetails, SixDialog, SixDrawer, SixDropdown, SixErrorPage, SixFileList, SixFileListItem, SixFileUpload, SixFooter, SixGroupLabel, SixHeader, SixIcon, SixIconButton, SixInput, SixItemPicker, SixLanguageSwitcher, SixLayoutGrid, SixMainContainer, SixMenu, SixMenuDivider, SixMenuItem, SixMenuLabel, SixPicto, SixProgressBar, SixProgressRing, SixRadio, SixRange, SixRoot, SixSearchField, SixSelect, SixSidebar, SixSidebarItem, SixSidebarItemGroup, SixSpinner, SixStageIndicator, SixSwitch, SixTab, SixTabGroup, SixTabPanel, SixTag, SixTextarea, SixTile, SixTimepicker, SixTooltip, 
         // value accessors
         TextValueAccessor,
@@ -2104,6 +2191,7 @@ UiLibraryAngularModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         MaxDateValidator,
         AllowedDatesValidator,
         // form helpers
+        SixFormDirective,
         SixFormUtilDirective] });
 UiLibraryAngularModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UiLibraryAngularModule });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UiLibraryAngularModule, decorators: [{
@@ -2129,6 +2217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         MaxDateValidator,
                         AllowedDatesValidator,
                         // form helpers
+                        SixFormDirective,
                         SixFormUtilDirective,
                     ],
                     imports: [],
@@ -2152,6 +2241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         MaxDateValidator,
                         AllowedDatesValidator,
                         // form helpers
+                        SixFormDirective,
                         SixFormUtilDirective,
                     ],
                 }]
@@ -2165,5 +2255,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AllowedDatesValidator, CheckboxValueAccessor, DIRECTIVES, DatepickerValueAccessor, MaxDateValidator, MaxValidator, MinDateValidator, MinValidator, NumericValueAccessor, RadioValueAccessor, RangeValueAccessor, SelectValueAccessor, SetAttributes, SixAlert, SixAvatar, SixBadge, SixButton, SixCard, SixCheckbox, SixDatepicker, SixDetails, SixDialog, SixDrawer, SixDropdown, SixErrorPage, SixFileList, SixFileListItem, SixFileUpload, SixFooter, SixFormUtilDirective, SixGroupLabel, SixHeader, SixIcon, SixIconButton, SixInput, SixItemPicker, SixLanguageSwitcher, SixLayoutGrid, SixMainContainer, SixMenu, SixMenuDivider, SixMenuItem, SixMenuLabel, SixPicto, SixProgressBar, SixProgressRing, SixRadio, SixRange, SixRoot, SixSearchField, SixSelect, SixSidebar, SixSidebarItem, SixSidebarItemGroup, SixSpinner, SixStageIndicator, SixSwitch, SixTab, SixTabGroup, SixTabPanel, SixTag, SixTextarea, SixTile, SixTimepicker, SixTooltip, SixUiLibraryValidators, SwitchValueAccessor, TextValueAccessor, TimepickerValueAccessor, UiLibraryAngularModule, ValidationMessagesService, ValueAccessor };
+export { AllowedDatesValidator, CheckboxValueAccessor, DIRECTIVES, DatepickerValueAccessor, MaxDateValidator, MaxValidator, MinDateValidator, MinValidator, NumericValueAccessor, RadioValueAccessor, RangeValueAccessor, SelectValueAccessor, SetAttributes, SixAlert, SixAvatar, SixBadge, SixButton, SixCard, SixCheckbox, SixDatepicker, SixDetails, SixDialog, SixDrawer, SixDropdown, SixErrorPage, SixFileList, SixFileListItem, SixFileUpload, SixFooter, SixFormDirective, SixFormUtilDirective, SixGroupLabel, SixHeader, SixIcon, SixIconButton, SixInput, SixItemPicker, SixLanguageSwitcher, SixLayoutGrid, SixMainContainer, SixMenu, SixMenuDivider, SixMenuItem, SixMenuLabel, SixPicto, SixProgressBar, SixProgressRing, SixRadio, SixRange, SixRoot, SixSearchField, SixSelect, SixSidebar, SixSidebarItem, SixSidebarItemGroup, SixSpinner, SixStageIndicator, SixSwitch, SixTab, SixTabGroup, SixTabPanel, SixTag, SixTextarea, SixTile, SixTimepicker, SixTooltip, SixUiLibraryValidators, SwitchValueAccessor, TextValueAccessor, TimepickerValueAccessor, UiLibraryAngularModule, ValidationMessagesService, ValueAccessor };
 //# sourceMappingURL=six-group-ui-library-angular.mjs.map