@italia/avatar 0.1.0-alpha.2 → 1.0.0-alpha.11

package/dist/src/it-avatar.js

@@ -115,7 +115,9 @@ function registerTranslation(...translation) {
     });
     update();
 }
-window.registerTranslation = registerTranslation;
+if (typeof window !== 'undefined') {
+    window.registerTranslation = registerTranslation;
+}
 /**
  * Localize Reactive Controller for components built with Lit
  *
@@ -438,6 +440,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);
@@ -459,6 +462,27 @@ class FormControlController {
                             event.formData.append(name, value);
                         }
                         break;
+                    case 'it-checkbox':
+                    case 'it-toggle':
+                        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':
+                    case 'it-toggle-group':
+                        // non settare valori in formData, perchè ogni singola checkbox setta il suo valore
+                        break;
+                    case 'it-upload':
+                        // value is File[] — append each File object directly (not as string)
+                        if (Array.isArray(value)) {
+                            value.forEach((file) => {
+                                event.formData.append(name, file);
+                            });
+                        }
+                        break;
                     default:
                         if (Array.isArray(value)) {
                             value.forEach((val) => {
@@ -480,13 +504,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, []);
         };
@@ -651,6 +692,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
@@ -747,6 +789,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.
@@ -783,6 +829,7 @@ const translation$2 = {
     $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.',
@@ -827,24 +874,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();
     }
@@ -889,7 +939,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) {
@@ -960,7 +1011,7 @@ class FormControl extends BaseLocalizedComponent {
         if (this.customValidation) {
             this.setCustomValidity(this.validationText ?? '');
         }
-        else {
+        else if (this.formControlController.userInteracted()) {
             this.formControlController.updateValidity();
         }
     }
@@ -1028,11 +1079,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.11',
+    };
+}
+
 var styles = css`/***************************** 1 ****************************************/
 /***************************** 2 ****************************************/
 /***************************** 1 ****************************************/
@@ -1060,80 +1123,83 @@ var styles = css`/***************************** 1 ******************************
 }
 
 .avatar {
-  --bs-avatar-background: var(--bs-color-background-secondary-lighter);
-  --bs-avatar-text-color: var(--bs-color-text-secondary);
-  --bs-avatar-font-size: var(--bs-font-size-3);
-  --bs-avatar-font-weight: var(--bs-font-weight-solid);
-  --bs-avatar-icon-size: var(--bs-icon-size-s);
-  --bs-avatar-radius: var(--bs-radius-circle);
-  --bs-avatar-size: 2.5rem;
-  --bs-avatar-dot-size: 12px;
-  --bs-avatar-dot-border-size: 2px;
-  --bs-avatar-dot-border-color: var(--bs-color-border-inverse);
-  --bs-avatar-dot-offset-right: 0;
-  --bs-avatar-dot-offset-top: 4px;
-  --bs-avatar-dot-offset-bottom: 0;
-  --bs-avatar-overlay-background: var(--bs-color-background-emphasis);
+  --bsi-avatar-background: var(--bsi-color-background-secondary-lighter);
+  --bsi-avatar-dot-border-color: var(--bsi-color-border-inverse);
+  --bsi-avatar-dot-border-size: 2px;
+  --bsi-avatar-dot-offset-bottom: 0;
+  --bsi-avatar-dot-offset-right: 0;
+  --bsi-avatar-dot-offset-top: 4px;
+  --bsi-avatar-dot-size: 12px;
+  --bsi-avatar-font-size: var(--bsi-font-size-3);
+  --bsi-avatar-font-weight: var(--bsi-font-weight-solid);
+  --bsi-avatar-icon-size: var(--bsi-icon-size-s);
+  --bsi-avatar-overlay-background: var(--bsi-color-background-emphasis);
+  --bsi-avatar-radius: var(--bsi-radius-circle);
+  --bsi-avatar-size: 2.5rem;
+  --bsi-avatar-text-color: var(--bsi-color-text-secondary);
+  --bsi-avatar-dropdown-margin-left: -24px;
+  --bsi-avatar-dropdown-margin-top: 24px;
 }
 
+/* stylelint-disable-next-line no-duplicate-selectors */
 .avatar {
   position: relative;
   z-index: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--bs-avatar-size);
-  height: var(--bs-avatar-size);
-  border-radius: var(--bs-avatar-radius);
-  background: var(--bs-avatar-background);
-  color: var(--bs-avatar-text-color);
-  transition: background-color var(--bs-transition-instant);
+  width: var(--bsi-avatar-size);
+  height: var(--bsi-avatar-size);
+  border-radius: var(--bsi-avatar-radius);
+  background: var(--bsi-avatar-background);
+  color: var(--bsi-avatar-text-color);
+  transition: background-color var(--bsi-transition-instant);
 }
 .avatar.avatar-primary {
-  --bs-avatar-background: var(--bs-theme-primary);
-  --bs-avatar-text-color: var(--bs-color-text-inverse);
+  --bsi-avatar-background: var(--bsi-theme-primary);
+  --bsi-avatar-text-color: var(--bsi-color-text-inverse);
 }
 .avatar.avatar-secondary {
-  --bs-avatar-background: var(--bs-color-background-secondary);
-  --bs-avatar-text-color: var(--bs-color-text-inverse);
+  --bsi-avatar-background: var(--bsi-color-background-secondary);
+  --bsi-avatar-text-color: var(--bsi-color-text-inverse);
 }
 .avatar.size-xs {
-  --bs-avatar-dot-border-size: 1px;
-  --bs-avatar-font-size: 0.625rem;
-  --bs-avatar-size: 1rem;
-  --bs-avatar-icon-size: 0.625rem;
+  --bsi-avatar-dot-border-size: 1px;
+  --bsi-avatar-font-size: 0.625rem;
+  --bsi-avatar-size: 1rem;
+  --bsi-avatar-icon-size: 0.625rem;
 }
 .avatar.size-sm {
-  --bs-avatar-dot-border-size: 1px;
-  --bs-avatar-font-size: var(--bs-font-size-1);
-  --bs-avatar-size: 1.5rem;
-  --bs-avatar-icon-size: var(--bs-icon-size-xs);
+  --bsi-avatar-dot-border-size: 1px;
+  --bsi-avatar-font-size: var(--bsi-font-size-1);
+  --bsi-avatar-size: 1.5rem;
+  --bsi-avatar-icon-size: var(--bsi-icon-size-xs);
 }
 .avatar.size-md {
-  --bs-avatar-font-size: var(--bs-font-size-4);
-  --bs-avatar-size: 2.5rem;
-  --bs-avatar-icon-size: var(--bs-icon-size-s);
-  --bs-avatar-dot-offset-right: -2px;
+  --bsi-avatar-font-size: var(--bsi-font-size-4);
+  --bsi-avatar-size: 2.5rem;
+  --bsi-avatar-icon-size: var(--bsi-icon-size-s);
+  --bsi-avatar-dot-offset-right: -2px;
 }
 .avatar.size-lg {
-  --bs-avatar-font-size: var(--bs-font-size-6);
-  --bs-avatar-size: 3.5rem;
-  --bs-avatar-icon-size: var(--bs-icon-size-m);
-  --bs-avatar-dot-offset-right: -2px;
-  --bs-avatar-dot-size: 14px;
+  --bsi-avatar-font-size: var(--bsi-font-size-6);
+  --bsi-avatar-size: 3.5rem;
+  --bsi-avatar-icon-size: var(--bsi-icon-size-m);
+  --bsi-avatar-dot-offset-right: -2px;
+  --bsi-avatar-dot-size: 14px;
 }
 .avatar.size-xl {
-  --bs-avatar-font-size: var(--bs-font-size-9);
-  --bs-avatar-size: 5rem;
-  --bs-avatar-icon-size: var(--bs-icon-size-l);
-  --bs-avatar-dot-size: 16px;
+  --bsi-avatar-font-size: var(--bsi-font-size-9);
+  --bsi-avatar-size: 5rem;
+  --bsi-avatar-icon-size: var(--bsi-icon-size-l);
+  --bsi-avatar-dot-size: 16px;
 }
 .avatar.size-xxl {
-  --bs-avatar-font-size: var(--bs-font-size-11);
-  --bs-avatar-size: 7rem;
-  --bs-avatar-icon-size: var(--bs-icon-size-xl);
-  --bs-avatar-dot-size: 20px;
-  --bs-avatar-dot-offset-right: 4px;
+  --bsi-avatar-font-size: var(--bsi-font-size-11);
+  --bsi-avatar-size: 7rem;
+  --bsi-avatar-icon-size: var(--bsi-icon-size-xl);
+  --bsi-avatar-dot-size: 20px;
+  --bsi-avatar-dot-offset-right: 4px;
 }
 .avatar-wrapper {
   position: relative;
@@ -1141,24 +1207,24 @@ var styles = css`/***************************** 1 ******************************
 }
 .avatar-presence, .avatar-status {
   position: absolute;
-  right: var(--bs-avatar-dot-offset-right);
+  right: var(--bsi-avatar-dot-offset-right);
   z-index: 10;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--bs-avatar-dot-size);
-  height: var(--bs-avatar-dot-size);
-  border: var(--bs-avatar-dot-border-size) solid var(--bs-avatar-dot-border-color);
-  border-radius: var(--bs-avatar-radius);
+  width: var(--bsi-avatar-dot-size);
+  height: var(--bsi-avatar-dot-size);
+  border: var(--bsi-avatar-dot-border-size) solid var(--bsi-avatar-dot-border-color);
+  border-radius: var(--bsi-avatar-radius);
   background: hsl(210, 3%, 85%);
-  color: var(--bs-color-text-inverse);
+  color: var(--bsi-color-text-inverse);
 }
 .avatar-presence .icon, .avatar-status .icon {
   stroke-width: 2px;
-  stroke: var(--bs-icon-inverse);
+  stroke: var(--bsi-icon-inverse);
 }
 .avatar-presence.active, .avatar-status.approved {
-  background: var(--bs-color-background-success);
+  background: var(--bsi-color-background-success);
 }
 .avatar-presence.busy, .avatar-status.declined {
   background: hsl(350, 60%, 50%);
@@ -1174,35 +1240,35 @@ var styles = css`/***************************** 1 ******************************
   width: calc(100% - 4px);
   height: calc(100% - 4px);
   border-radius: 50%;
-  background: var(--bs-color-background-inverse);
+  background: var(--bsi-color-background-inverse);
   transform: translateX(-50%) translateY(-50%);
 }
 .avatar-status {
-  top: var(--bs-avatar-dot-offset-top);
+  top: var(--bsi-avatar-dot-offset-top);
 }
 .avatar-status.notify {
-  background: var(--bs-theme-primary);
+  background: var(--bsi-theme-primary);
 }
 .avatar img {
   width: 100%;
   height: 100%;
-  border-radius: var(--bs-avatar-radius);
+  border-radius: var(--bsi-avatar-radius);
   object-fit: cover;
   object-position: center;
 }
 .avatar p {
   margin: 0;
-  color: var(--bs-avatar-text-color);
-  font-size: var(--bs-avatar-font-size);
-  font-weight: var(--bs-avatar-font-weight);
+  color: var(--bsi-avatar-text-color);
+  font-size: var(--bsi-avatar-font-size);
+  font-weight: var(--bsi-avatar-font-weight);
   line-height: 1;
 }
 .avatar .icon {
-  width: var(--bs-avatar-icon-size);
-  height: var(--bs-avatar-icon-size);
+  width: var(--bsi-avatar-icon-size);
+  height: var(--bsi-avatar-icon-size);
 }
 .avatar ~ span {
-  margin-left: var(--bs-spacing-xxs);
+  margin-left: var(--bsi-spacing-xxs);
 }
 
 a.avatar::after,
@@ -1215,9 +1281,9 @@ a .avatar::after {
   display: block;
   width: 100%;
   height: 100%;
-  border-radius: var(--bs-avatar-radius);
+  border-radius: var(--bsi-avatar-radius);
   opacity: 0;
-  background: var(--bs-color-background-emphasis);
+  background: var(--bsi-color-background-emphasis);
   transition: opacity 0.2s;
 }
 a.avatar:hover::after,
@@ -1249,21 +1315,18 @@ a .avatar:hover p {
   border: 0;
 }
 .avatar-dropdown .dropdown-menu {
-  margin-left: -27px;
+  margin-left: var(--bsi-avatar-dropdown-margin-left) !important;
+  margin-top: var(--bsi-avatar-dropdown-margin-top) !important;
 }
 .avatar-dropdown .btn-dropdown {
   padding: 0;
   color: inherit;
-  font-size: var(--bs-label-font-size-xs);
+  font-size: var(--bsi-avatar-font-size);
   line-height: 0;
 }
 .avatar-dropdown .btn-dropdown:focus {
   box-shadow: none;
 }
-.avatar-dropdown .list-item {
-  display: flex;
-  align-items: center;
-}
 .avatar-dropdown .link-list {
   white-space: nowrap;
 }
@@ -1278,13 +1341,13 @@ a .avatar:hover p {
   flex-shrink: 0;
 }
 .avatar-extra-text .extra-text, .avatar-extra-text slot[name=extra-text]::slotted(*) {
-  margin-left: var(--bs-spacing-s);
+  margin-left: var(--bsi-spacing-s);
 }
 .avatar-extra-text .extra-text h3, .avatar-extra-text slot[name=extra-text]::slotted(*) h3,
 .avatar-extra-text .extra-text h4,
 .avatar-extra-text slot[name=extra-text]::slotted(*) h4 {
   margin: 0;
-  font-size: var(--bs-heading-6-font-size);
+  font-size: var(--bsi-heading-6-font-size);
 }
 .avatar-extra-text .extra-text h3 a, .avatar-extra-text slot[name=extra-text]::slotted(*) h3 a,
 .avatar-extra-text .extra-text h4 a,
@@ -1295,21 +1358,19 @@ a .avatar:hover p {
 .avatar-extra-text .extra-text time,
 .avatar-extra-text slot[name=extra-text]::slotted(*) time {
   margin: 0;
-  color: var(--bs-color-text-secondary);
-  font-size: var(--bs-caption-font-size);
+  color: var(--bsi-color-text-secondary);
+  font-size: var(--bsi-caption-font-size);
   text-transform: uppercase;
 }
 
 .avatar-group > li {
-  margin-bottom: var(--bs-spacing-s);
-  line-height: auto;
+  margin-bottom: var(--bsi-spacing-s);
+  display: flex;
 }
 .avatar-group > li:last-child {
   margin-bottom: 0;
 }
 .avatar-group > li .list-item {
-  display: inline-flex;
-  align-items: center;
   padding: 0;
 }
 
@@ -1327,24 +1388,24 @@ a .avatar:hover p {
 }
 .avatar-group-stacked li > .avatar {
   margin-left: -6px;
-  border: 2px solid var(--bs-color-border-inverse);
+  border: 2px solid var(--bsi-color-border-inverse);
 }
 
 :host {
   display: inline-flex;
-  --bs-avatar-background: var(--bs-color-background-secondary-lighter);
-  --bs-avatar-text-color: var(--bs-color-text-secondary);
-  --bs-avatar-font-size: var(--bs-font-size-3);
-  --bs-avatar-font-weight: var(--bs-font-weight-solid);
-  --bs-avatar-icon-size: var(--bs-icon-size-s);
-  --bs-avatar-radius: var(--bs-radius-circle);
-  --bs-avatar-size: 2.5rem;
-  --bs-avatar-dot-size: 12px;
-  --bs-avatar-dot-border-size: 2px;
-  --bs-avatar-dot-border-color: var(--bs-color-border-inverse);
-  --bs-avatar-dot-offset-right: 0;
-  --bs-avatar-dot-offset-top: 4px;
-  --bs-avatar-dot-offset-bottom: 0;
+  --bsi-avatar-background: var(--bsi-color-background-secondary-lighter);
+  --bsi-avatar-text-color: var(--bsi-color-text-secondary);
+  --bsi-avatar-font-size: var(--bsi-font-size-3);
+  --bsi-avatar-font-weight: var(--bsi-font-weight-solid);
+  --bsi-avatar-icon-size: var(--bsi-icon-size-s);
+  --bsi-avatar-radius: var(--bsi-radius-circle);
+  --bsi-avatar-size: 2.5rem;
+  --bsi-avatar-dot-size: 12px;
+  --bsi-avatar-dot-border-size: 2px;
+  --bsi-avatar-dot-border-color: var(--bsi-color-border-inverse);
+  --bsi-avatar-dot-offset-right: 0;
+  --bsi-avatar-dot-offset-top: 4px;
+  --bsi-avatar-dot-offset-bottom: 0;
 }
 :host a.avatar,
 :host a .avatar {
@@ -1355,9 +1416,14 @@ a .avatar:hover p {
   text-decoration: none;
 }
 
+:host([type=text]) {
+  cursor: default;
+  pointer-events: none;
+}
+
 it-icon::part(icon) {
-  width: var(--bs-avatar-icon-size);
-  height: var(--bs-avatar-icon-size);
+  width: var(--bsi-avatar-icon-size);
+  height: var(--bsi-avatar-icon-size);
 }
 
 it-icon {
@@ -1368,18 +1434,18 @@ it-icon.presence-icon::part(icon),
 it-icon.status-icon::part(icon) {
   width: 12px;
   height: 12px;
-  stroke: var(--bs-icon-inverse);
+  stroke: var(--bsi-icon-inverse);
   stroke-width: 2px;
 }
 
 .extra-text, slot[name=extra-text]::slotted(*) {
-  margin-left: var(--bs-spacing-s);
+  margin-left: var(--bsi-spacing-s);
 }
 .extra-text h3, slot[name=extra-text]::slotted(*) h3,
 .extra-text h4,
 slot[name=extra-text]::slotted(*) h4 {
   margin: 0;
-  font-size: var(--bs-heading-6-font-size) !important;
+  font-size: var(--bsi-heading-6-font-size) !important;
 }
 .extra-text h3 a, slot[name=extra-text]::slotted(*) h3 a,
 .extra-text h4 a,
@@ -1390,8 +1456,8 @@ slot[name=extra-text]::slotted(*) h4 a {
 .extra-text time,
 slot[name=extra-text]::slotted(*) time {
   margin: 0;
-  color: var(--bs-color-text-secondary);
-  font-size: var(--bs-caption-font-size);
+  color: var(--bsi-color-text-secondary);
+  font-size: var(--bsi-caption-font-size);
   text-transform: uppercase;
 }
 
@@ -1634,16 +1700,15 @@ let ItAvatar = class ItAvatar extends BaseLocalizedComponent {
             return nothing;
         return html `
       <p aria-hidden="true">${initials}</p>
-      ${this.text ? html `<span class="visually-hidden">${this.text}</span>` : nothing}
+      ${this.avatarTitle ? html `<span class="visually-hidden">${this.avatarTitle}</span>` : nothing}
     `;
     }
     renderIcon() {
         if (!this.icon)
             return nothing;
-        const accessibleText = this.avatarTitle || this.text || this.alt || 'Icona';
         return html `
-      <it-icon name="${this.icon}" aria-hidden="true"></it-icon>
-      <span class="visually-hidden">${accessibleText}</span>
+      <it-icon name="${this.icon}"></it-icon>
+      ${this.avatarTitle ? html `<span class="visually-hidden">${this.avatarTitle}</span>` : nothing}
     `;
     }
     renderAvatarContent() {