@italia/popover 0.1.0-alpha.2 → 1.0.0-alpha.4

package/dist/src/it-popover.js

@@ -436,6 +436,7 @@ const interactions = new WeakMap();
 /** A reactive controller to allow form controls to participate in form submission, validation, etc. */
 class FormControlController {
     constructor(host, options) {
+        this.submittedOnce = false;
         this.handleFormData = (event) => {
             // console.log('handleFormData');
             const disabled = this.options.disabled(this.host);
@@ -457,6 +458,17 @@ class FormControlController {
                             event.formData.append(name, value);
                         }
                         break;
+                    case 'it-checkbox':
+                        if (this.host.checked) {
+                            if (event.formData.getAll(name).indexOf(value) < 0) {
+                                // handle group checkbox
+                                event.formData.append(name, value);
+                            }
+                        }
+                        break;
+                    case 'it-checkbox-group':
+                        // non settare valori in formData, perchè ogni singola checkbox setta il suo valore
+                        break;
                     default:
                         if (Array.isArray(value)) {
                             value.forEach((val) => {
@@ -478,13 +490,30 @@ class FormControlController {
                     this.setUserInteracted(control, true);
                 });
             }
-            if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
+            const resReportValidity = reportValidity(this.host);
+            if (this.form && !this.form.noValidate && !disabled && !resReportValidity) {
                 event.preventDefault();
                 // event.stopImmediatePropagation(); // se lo attiviamo, valida un campo alla volta
+                // Scroll al primo controllo non valido
+                const formControls = formCollections.get(this.form);
+                if (formControls) {
+                    for (const control of formControls) {
+                        if (!control.validity?.valid) {
+                            // Scroll smooth verso il controllo non valido
+                            control.scrollIntoView({
+                                behavior: 'smooth',
+                                block: 'center',
+                            });
+                            break;
+                        }
+                    }
+                }
             }
+            this.submittedOnce = true;
         };
         this.handleFormReset = () => {
             this.options.setValue(this.host, '');
+            this.submittedOnce = false;
             this.setUserInteracted(this.host, false);
             interactions.set(this.host, []);
         };
@@ -649,6 +678,7 @@ class FormControlController {
         if (!formCollection) {
             return;
         }
+        this.submittedOnce = false;
         // Remove this host from the form's collection
         formCollection.delete(this.host);
         // Check to make sure there's no other form controls in the collection. If we do this
@@ -745,6 +775,10 @@ class FormControlController {
         host.toggleAttribute('data-user-invalid', !isValid && hasInteracted);
         host.toggleAttribute('data-user-valid', isValid && hasInteracted);
     }
+    userInteracted() {
+        const hasInteracted = Boolean(userInteractedControls.has(this.host));
+        return hasInteracted;
+    }
     /**
      * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
      * that affects constraint validation changes so the component receives the correct validity states.
@@ -781,6 +815,7 @@ const translation = {
     $name: 'Italiano',
     $dir: 'ltr',
     validityRequired: 'Questo campo è obbligatorio.',
+    validityGroupRequired: "Scegli almeno un'opzione",
     validityPattern: 'Il valore non corrisponde al formato richiesto.',
     validityMinlength: 'Il valore deve essere lungo almeno {minlength} caratteri.',
     validityMaxlength: 'Il valore deve essere lungo al massimo {maxlength} caratteri.',
@@ -825,24 +860,27 @@ class FormControl extends BaseLocalizedComponent {
         this.maxlength = -1;
         /** If the input is required. */
         this.required = false;
+        /* For grouped input, like checkbox-group */
+        this.isInGroup = false;
         this.validationMessage = '';
     }
     /** Gets the validity state object */
     get validity() {
         return this.inputElement?.validity;
     }
+    /** Gets the associated form, if one exists. */
+    getForm() {
+        return this.formControlController.getForm();
+    }
     // Form validation methods
     checkValidity() {
         const inputValid = this.inputElement?.checkValidity() ?? true; // this.inputElement.checkValidity() è la validazione del browser
         return inputValid;
     }
-    /** Gets the associated form, if one exists. */
-    getForm() {
-        return this.formControlController.getForm();
-    }
     /** Checks for validity and shows the browser's validation message if the control is invalid. */
     reportValidity() {
-        const ret = this.inputElement.checkValidity();
+        // const ret = this.inputElement.checkValidity();
+        const ret = this.checkValidity(); // chiama la checkValidity, che se è stata overridata chiama quella
         this.handleValidationMessages();
         return ret; // this.inputElement.reportValidity();
     }
@@ -887,7 +925,8 @@ class FormControl extends BaseLocalizedComponent {
     handleValidationMessages() {
         if (!this.customValidation) {
             const _v = this.inputElement.validity;
-            if (_v.valueMissing) {
+            const isRequiredHandledByGroup = this.isInGroup === true;
+            if (_v.valueMissing && !isRequiredHandledByGroup) {
                 this.setCustomValidity(this.$t('validityRequired'));
             }
             else if (_v.patternMismatch) {
@@ -958,7 +997,7 @@ class FormControl extends BaseLocalizedComponent {
         if (this.customValidation) {
             this.setCustomValidity(this.validationText ?? '');
         }
-        else {
+        else if (this.formControlController.userInteracted()) {
             this.formControlController.updateValidity();
         }
     }
@@ -1026,11 +1065,23 @@ __decorate([
     ,
     __metadata("design:type", Object)
 ], FormControl.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], FormControl.prototype, "isInGroup", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
 ], FormControl.prototype, "validationMessage", void 0);
 
+if (typeof window !== 'undefined') {
+    window._itAnalytics = window._itAnalytics || {};
+    window._itAnalytics = {
+        ...window._itAnalytics,
+        version: '1.0.0-alpha.4',
+    };
+}
+
 /**
  * Custom positioning reference element.
  * @see https://floating-ui.com/docs/virtual-elements