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

package/dist/src/it-input.js

@@ -439,6 +439,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);
@@ -460,6 +461,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) => {
@@ -481,13 +493,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, []);
         };
@@ -652,6 +681,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
@@ -748,6 +778,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.
@@ -784,6 +818,7 @@ const translation$1 = {
     $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.',
@@ -828,24 +863,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();
     }
@@ -890,7 +928,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) {
@@ -961,7 +1000,7 @@ class FormControl extends BaseLocalizedComponent {
         if (this.customValidation) {
             this.setCustomValidity(this.validationText ?? '');
         }
-        else {
+        else if (this.formControlController.userInteracted()) {
             this.formControlController.updateValidity();
         }
     }
@@ -1029,11 +1068,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',
+    };
+}
+
 /**
  * Checks for repetition of characters in
  * a string
@@ -1341,11 +1392,6 @@ a:hover {
   color: var(--bs-color-link-hover);
 }
 
-a:not([href]):not([class]), a:not([href]):not([class]):hover {
-  color: inherit;
-  text-decoration: none;
-}
-
 pre,
 code,
 kbd,
@@ -1587,6 +1633,9 @@ progress {
   transition: all var(--bs-transition-instant) ease-in-out;
   user-select: none;
 }
+.btn:hover {
+  color: var(--bs-btn-text-color);
+}
 .btn:disabled, .btn.disabled {
   opacity: var(--bs-btn-disabled-opacity);
   cursor: not-allowed;
@@ -4717,6 +4766,10 @@ select.just-validate-success-field {
 .password-icon {
   top: calc(var(--bs-form-control-spacing) * 5);
   --bs-icon-default: var(--bs-icon-primary);
+}
+
+.is-invalid + .input-group-text.align-buttons {
+  bottom: 0 !important;
 }`;
 
 var ItInput_1;
@@ -4788,7 +4841,7 @@ let ItInput = ItInput_1 = class ItInput extends FormControl {
             this.logger.warn("The suggestions property is enabled, but type isn't password. Please, remove suggestions this property.");
         }
         if (!this.label || this.label?.length === 0) {
-            this.logger.warn(`Label is required to ensure accessibility. Please, define a label for <it-input name="${this.name}" ... /> . Set attribute label-hidden="true" if you don't want to show label.`);
+            this.logger.warn(`Label is required to ensure accessibility. Please, define a label for <it-input name="${this.name}" id="${this.id}" ... /> . Set attribute label-hidden="true" if you don't want to show label.`);
         }
     }
     _handleInput(e) {
@@ -4953,9 +5006,9 @@ let ItInput = ItInput_1 = class ItInput extends FormControl {
         }
         return nothing;
     }
-    _renderInput(supportTextId, invalid, validityMessage) {
-        const ariaDescribedBy = this.composeClass(this.supportText?.length > 0 ? supportTextId : '', this.passwordStrengthMeter ? `strengthMeterInfo_${this._id}` : '', this._ariaAttributes['aria-describedby']?.length > 0 ? this._ariaAttributes['aria-describedby'] : '', validityMessage?.length > 0 ? `invalid-feedback-${this._id}` : '');
-        const inputClasses = this.composeClass('it-form__control', this.plaintext ? 'form-control-plaintext' : 'form-control', this.size ? `form-control-${this.size}` : '', invalid ? 'is-invalid' : '', !invalid && this._touched && !this.readonly ? 'just-validate-success-field' : '');
+    _renderInput(supportTextId, invalid, validityMessage, showValidation) {
+        const ariaDescribedBy = this.composeClass(this.supportText?.length > 0 ? supportTextId : '', this.passwordStrengthMeter ? `strengthMeterInfo_${this._id}` : '', this._ariaAttributes['aria-describedby']?.length > 0 ? this._ariaAttributes['aria-describedby'] : '', showValidation && validityMessage?.length > 0 ? `invalid-feedback-${this._id}` : '');
+        const inputClasses = this.composeClass('it-form__control', this.plaintext ? 'form-control-plaintext' : 'form-control', this.size ? `form-control-${this.size}` : '', showValidation && invalid ? 'is-invalid' : '', showValidation && !invalid && !this.readonly ? 'just-validate-success-field' : '');
         let inputRender;
         if (this.type === 'textarea') {
             inputRender = html `
@@ -4963,7 +5016,7 @@ let ItInput = ItInput_1 = class ItInput extends FormControl {
           part="textarea focusable"
           ${setAttributes(this._ariaAttributes)}
           aria-describedby=${ifDefined(ariaDescribedBy || undefined)}
-          ?aria-invalid=${invalid}
+          aria-invalid=${ifDefined(invalid ? 'true' : undefined)}
           @input="${this._handleInput}"
           @blur=${this._handleBlur}
           @focus=${this._handleFocus}
@@ -4995,7 +5048,7 @@ let ItInput = ItInput_1 = class ItInput extends FormControl {
           part="input focusable"
           ${setAttributes(this._ariaAttributes)}
           aria-describedby=${ifDefined(ariaDescribedBy || undefined)}
-          ?aria-invalid=${invalid}
+          aria-invalid=${ifDefined(invalid ? 'true' : undefined)}
           @input="${this._handleInput}"
           @blur=${this._handleBlur}
           @focus=${this._handleFocus}
@@ -5013,6 +5066,7 @@ let ItInput = ItInput_1 = class ItInput extends FormControl {
           min=${ifDefined(this.min)}
           max=${ifDefined(this.max)}
           step=${ifDefined(this.step)}
+          autocomplete="off"
           pattern=${ifDefined(this.pattern)}
           ?formNoValidate=${this.customValidation}
           .value="${live(this.value)}"
@@ -5028,7 +5082,8 @@ let ItInput = ItInput_1 = class ItInput extends FormControl {
     render() {
         const supportTextId = `${this._id}-support-text`;
         const supportTextRender = html ` ${when(this.supportText, () => html ` <small class="form-text" id="${supportTextId}">${this.supportText}</small> `)}`;
-        const validityMessage = (this.validationMessage ) ?? '';
+        const showValidation = this.formControlController.submittedOnce || this.customValidation; // true; // this._touched || this.customValidation;
+        const validityMessage = (showValidation ? this.validationMessage : '') ?? '';
         const invalid = validityMessage?.length > 0 || (!this.customValidation && this.inputElement?.checkValidity() === false);
         const validityMessageRender = html `<div
       role="alert"
@@ -5053,7 +5108,7 @@ let ItInput = ItInput_1 = class ItInput extends FormControl {
                 ${when(this._slotPrepend, () => html ` <span class="input-group-text">
                       <slot name="prepend" @slotchange=${() => this.requestUpdate()}></slot
                     ></span>`)}
-                ${this._renderInput(supportTextId, invalid, validityMessage)}
+                ${this._renderInput(supportTextId, invalid, validityMessage, showValidation)}
                 ${when(this.type === 'number', () => html `<span class="input-group-text align-buttons flex-column">
                       <button
                         class="input-number-add"
@@ -5075,7 +5130,7 @@ let ItInput = ItInput_1 = class ItInput extends FormControl {
                       <slot name="append" @slotchange=${() => this.requestUpdate()}></slot>
                     </div>`)}
               </div>
-              ${validityMessageRender} ${supportTextRender} ${this._renderpasswordStrengthMeter()}`, () => html ` ${this._renderInput(supportTextId, invalid, validityMessage)} ${validityMessageRender}
+              ${validityMessageRender} ${supportTextRender} ${this._renderpasswordStrengthMeter()}`, () => html ` ${this._renderInput(supportTextId, invalid, validityMessage, showValidation)} ${validityMessageRender}
             ${supportTextRender} ${this._renderpasswordStrengthMeter()}`)}
       </div>
     `;