@claspo/components 1.9.4-ctx.5 → 1.10.1-ctx.7

package/script/SysButtonComponent/SysButton.manifest.js

@@ -26,97 +26,128 @@ var SysButtonManifest = {
   "i18nPropPaths": ["content,text", "handlers,[id],actions,[id],params,link", "handlers,[id],actions,[id],params,customData"],
   "i18n": {
     "en": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "At least one field is required: email or phone number"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "At least one field is required: email or phone number",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Something went wrong. Please try again later"
     },
     "ru": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Хотя бы одно из полей должно быть заполнено: Email или Номер телефона"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Хотя бы одно из полей должно быть заполнено: Email или Номер телефона",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Что-то пошло не так. Пожалуйста, попробуйте позже"
     },
     "uk": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Хоча б одне з полів має бути заповнене: Email або Номер телефону"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Хоча б одне з полів має бути заповнене: Email або Номер телефону",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Щось пішло не так. Будь ласка, спробуйте пізніше"
     },
     "es": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Necesita, como mínimo, un campo obligatorio: email o número de teléfono"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Necesita, como mínimo, un campo obligatorio: email o número de teléfono",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Algo salió mal. Por favor, inténtalo de nuevo más tarde"
     },
     "de": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Mindestens ein Feld ist erforderlich: E-Mail-Adresse oder Telefonnummer"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Mindestens ein Feld ist erforderlich: E-Mail-Adresse oder Telefonnummer",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Etwas ist schiefgelaufen. Bitte versuchen Sie es später erneut"
     },
     "fr": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Au moins un champ est obligatoire : courriel ou numéro de téléphone"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Au moins un champ est obligatoire : courriel ou numéro de téléphone",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Une erreur s'est produite. Veuillez réessayer plus tard"
     },
     "it": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Almeno un campo è obbligatorio: email o numero di telefono"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Almeno un campo è obbligatorio: email o numero di telefono",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Qualcosa è andato storto. Riprova più tardi"
     },
     "pt": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "É necessário pelo menos um campo: email ou número de telefone"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "É necessário pelo menos um campo: email ou número de telefone",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Algo deu errado. Por favor, tente novamente mais tarde"
     },
     "ro": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Cel puțin un câmp este obligatoriu: e-mail sau număr de telefon"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Cel puțin un câmp este obligatoriu: e-mail sau număr de telefon",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Ceva nu a funcționat. Vă rugăm să încercați din nou mai târziu"
     },
     "bg": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Изисква се поне едно поле: имейл или телефонен номер"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Изисква се поне едно поле: имейл или телефонен номер",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Нещо се обърка. Моля, опитайте отново по-късно"
     },
     "cs": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Je vyžadováno alespoň jedno pole: e-mail nebo telefonní číslo"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Je vyžadováno alespoň jedno pole: e-mail nebo telefonní číslo",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Něco se pokazilo. Zkuste to prosím znovu později"
     },
     "el": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Απαιτείται τουλάχιστον ένα πεδίο: ηλεκτρονική διεύθυνση ή τηλέφωνο"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Απαιτείται τουλάχιστον ένα πεδίο: ηλεκτρονική διεύθυνση ή τηλέφωνο",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Κάτι πήγε στραβά. Παρακαλώ δοκιμάστε ξανά αργότερα"
     },
     "nl": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Er is minimaal één veld vereist: e-mail of telefoonnummer"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Er is minimaal één veld vereist: e-mail of telefoonnummer",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Er is iets misgegaan. Probeer het later opnieuw"
     },
     "pl": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Wymagane jest co najmniej jedno pole: adres e-mail lub numer telefonu"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Wymagane jest co najmniej jedno pole: adres e-mail lub numer telefonu",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Coś poszło nie tak. Spróbuj ponownie później"
     },
     "sv": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Minst ett fält krävs: e-post eller telefonnummer"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Minst ett fält krävs: e-post eller telefonnummer",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Något gick fel. Försök igen senare"
     },
     "tr": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "En az bir alan gereklidir: e-posta veya telefon numarası"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "En az bir alan gereklidir: e-posta veya telefon numarası",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Bir şeyler ters gitti. Lütfen daha sonra tekrar deneyin"
     },
     "ar": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "مطلوب حقل واحد على الأقل: البريد الإلكتروني أو رقم الهاتف"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "مطلوب حقل واحد على الأقل: البريد الإلكتروني أو رقم الهاتف",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "حدث خطأ ما. يرجى المحاولة مرة أخرى لاحقًا"
     },
     "zh": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "至少一个字段为必填：电子邮箱或电话号码"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "至少一个字段为必填：电子邮箱或电话号码",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "出了点问题。请稍后再试"
     },
     "da": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Mindst ét ​​felt er påkrævet: e-mail eller telefonnummer"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Mindst ét ​​felt er påkrævet: e-mail eller telefonnummer",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Noget gik galt. Prøv venligst igen senere"
     },
     "he": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "נדרש לפחות שדה אחד: אימייל או מספר טלפון"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "נדרש לפחות שדה אחד: אימייל או מספר טלפון",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "משהו השתבש. אנא נסה שוב מאוחר יותר"
     },
     "fi": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Vähintään yksi kenttä vaaditaan: sähköposti tai puhelinnumero"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Vähintään yksi kenttä vaaditaan: sähköposti tai puhelinnumero",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Jotain meni pieleen. Yritä myöhemmin uudelleen"
     },
     "hi": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "कम से कम एक फ़ील्ड आवश्यक है: ईमेल या फ़ोन नंबर"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "कम से कम एक फ़ील्ड आवश्यक है: ईमेल या फ़ोन नंबर",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "कुछ गलत हो गया। कृपया बाद में पुनः प्रयास करें"
     },
     "hr": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Potrebno je ispuniti barem jedno polje: e-mail ili telefonski broj"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Potrebno je ispuniti barem jedno polje: e-mail ili telefonski broj",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Nešto je pošlo po zlu. Pokušajte ponovno kasnije"
     },
     "hu": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Legalább egy mező kitöltése kötelező: e-mail vagy telefonszám."
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Legalább egy mező kitöltése kötelező: e-mail vagy telefonszám.",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Valami hiba történt. Kérjük, próbálja újra később"
     },
     "id": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Setidaknya satu bidang wajib diisi: email atau nomor telepon"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Setidaknya satu bidang wajib diisi: email atau nomor telepon",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Terjadi kesalahan. Silakan coba lagi nanti"
     },
     "ja": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "少なくとも1つのフィールドが必須です：メールアドレスまたは電話番号"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "少なくとも1つのフィールドが必須です：メールアドレスまたは電話番号",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "問題が発生しました。後でもう一度お試しください"
     },
     "ko": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "최소 한 칸 필수 입력: 이메일 또는 전화번호"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "최소 한 칸 필수 입력: 이메일 또는 전화번호",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "문제가 발생했습니다. 나중에 다시 시도해 주세요"
     },
     "no": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Minst ett felt er obligatorisk: e-post eller telefonnummer"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Minst ett felt er obligatorisk: e-post eller telefonnummer",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Noe gikk galt. Vennligst prøv igjen senere"
     },
     "sk": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Aspoň jedno pole je povinné: e-mail alebo telefónne číslo"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Aspoň jedno pole je povinné: e-mail alebo telefónne číslo",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Niečo sa pokazilo. Skúste to znova neskôr"
     },
     "sl": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Vsaj eno polje je obvezno: e-poštni naslov ali telefonska številka"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Vsaj eno polje je obvezno: e-poštni naslov ali telefonska številka",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Nekaj ​​je šlo narobe. Poskusite znova pozneje"
     },
     "sr": {
-      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Najmanje jedno polje je obavezno: e-pošta ili broj telefona"
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Najmanje jedno polje je obavezno: e-pošta ili broj telefona",
+      "control,validation,validationErrors,SUBMIT_REQUEST_FAILED": "Нешто је пошло наопако. Покушајте поново касније"
     }
   },
   "syncEnabled": true,

package/script/SysButtonComponent/SysButton.styles.js

@@ -59,6 +59,69 @@ button {
 button.focus-outline-defined:focus {
   outline: var(--clFocusOutline);
 }
+
+.button-asyncLoader {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  margin: -10px 0 0 -10px;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.main-container.cl-button-loading .button-asyncLoader {
+  display: block;
+}
+
+.button-success-icon {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 22px;
+  height: 22px;
+  margin: -11px 0 0 -11px;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.button-success-icon svg {
+  width: 22px;
+  height: 22px;
+}
+
+.main-container.cl-button-success .button-success-icon {
+  display: block;
+}
+
+.main-container.cl-button-loading .editable-text,
+.main-container.cl-button-loading .icon,
+.main-container.cl-button-success .editable-text,
+.main-container.cl-button-success .icon {
+  visibility: hidden;
+}
+
+.button-asyncLoader .spinner--icon {
+  width: 20px;
+  height: 20px;
+  transform-origin: center;
+  animation: cl-button-spinner-rotate 0.8s linear infinite;
+}
+
+.button-asyncLoader .spinner--icon .path {
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-dasharray: 24 32;
+}
+
+@keyframes cl-button-spinner-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
 `;
 
 export { SysButtonStyles as default };

package/script/SysButtonComponent/SysButtonComponent.js

@@ -18,6 +18,9 @@ class SysButtonComponent extends WcElement {
 
   invalidListener;
   validListener;
+  submitStartedListener;
+  submitFinishedListener;
+  submitErrorWithoutViewListener;
   stylesUpdateObserver;
 
 
@@ -30,6 +33,19 @@ class SysButtonComponent extends WcElement {
     <div class="editable-text" cl-inline-edit="content, text"></div>
   </button>
 
+  <span class="button-asyncLoader" aria-hidden="true">
+    <svg class="spinner--icon" viewBox="0 0 18 18" aria-hidden="true">
+      <circle class="path" cx="9" cy="9" r="5" fill="none" stroke-width="2"></circle>
+    </svg>
+  </span>
+
+  <span class="button-success-icon" aria-hidden="true">
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="12" cy="12" r="11" fill="none" stroke="currentColor" stroke-width="2"></circle>
+      <path d="M7 12.5L10.5 16L17 8.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+    </svg>
+  </span>
+
   <div class="input-tooltip">
     <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M1.5 13.0604C1.5 19.4116 6.6481 24.5605 13.0075 24.5605C19.353 24.5605 24.5 19.4107 24.5 13.0604C24.5 6.70865 19.3531 1.55909 13.0075 1.55908C6.64806 1.55908 1.5 6.7077 1.5 13.0604ZM12.9775 17.9668C12.7032 17.9668 12.4807 17.7443 12.4807 17.47C12.4807 17.1956 12.7032 16.9732 12.9775 16.9732C13.2519 16.9732 13.4743 17.1956 13.4743 17.47C13.4743 17.7443 13.2519 17.9668 12.9775 17.9668ZM12.9775 13.4764C12.7032 13.4764 12.4807 13.254 12.4807 12.9796L12.4807 8.48924C12.4807 8.21487 12.7032 7.99245 12.9775 7.99245C13.2519 7.99245 13.4743 8.21487 13.4743 8.48924L13.4743 12.9796C13.4743 13.254 13.2519 13.4764 12.9775 13.4764Z" fill="#FF0000" stroke="white" stroke-width="2"></path>
@@ -70,8 +86,28 @@ class SysButtonComponent extends WcElement {
         }
 
         if (subscribeContactAction || requestAction) {
-          this.services.eventEmitter.on('CONTACT_DATA_SUBMIT', () => {
+          this.submitStartedListener = this.services.eventEmitter.on('SUBMIT_REQUEST_STARTED', () => {
             buttonElement.disabled = true;
+            this.hideErrorTooltip();
+            this.hideSuccessIcon();
+            this.showPendingLoader();
+          });
+
+          this.submitFinishedListener = this.services.eventEmitter.on('SUBMIT_REQUEST_FINISHED', (payload) => {
+            this.hidePendingLoader();
+
+            if (payload?.success) {
+              // Show a success checkmark on the button. It stays disabled so the indicator
+              // remains until the widget navigates away or closes.
+              this.showSuccessIcon();
+            } else {
+              // Re-enable the button on failure so the user can retry.
+              buttonElement.disabled = false;
+            }
+          });
+
+          this.submitErrorWithoutViewListener = this.services.eventEmitter.on('SUBMIT_REQUEST_ERROR_WITHOUT_VIEW', () => {
+            this.showErrorTooltip('SUBMIT_REQUEST_FAILED');
           });
         }
       }
@@ -98,9 +134,60 @@ class SysButtonComponent extends WcElement {
       this.validListener.off();
     }
 
+    if (this.submitStartedListener) {
+      this.submitStartedListener.off();
+    }
+
+    if (this.submitFinishedListener) {
+      this.submitFinishedListener.off();
+    }
+
+    if (this.submitErrorWithoutViewListener) {
+      this.submitErrorWithoutViewListener.off();
+    }
+
     this.stylesUpdateObserver?.disconnect();
   }
 
+  showPendingLoader() {
+    const mainContainerElement = this.getRootElement().querySelector('.main-container');
+    const loaderElement = mainContainerElement?.querySelector('.button-asyncLoader');
+
+    if (!mainContainerElement || !loaderElement) {
+      return;
+    }
+
+    // Match the spinner color to the button text so it stays visible on the button background.
+    loaderElement.style.color = this.getRootElement().querySelector('button').style.color;
+    mainContainerElement.classList.remove('cl-button-success');
+    mainContainerElement.classList.add('cl-button-loading');
+  }
+
+  hidePendingLoader() {
+    this.getRootElement()
+      .querySelector('.main-container')
+      ?.classList.remove('cl-button-loading');
+  }
+
+  showSuccessIcon() {
+    const mainContainerElement = this.getRootElement().querySelector('.main-container');
+    const successIconElement = mainContainerElement?.querySelector('.button-success-icon');
+
+    if (!mainContainerElement || !successIconElement) {
+      return;
+    }
+
+    // Match the checkmark color to the button text so it stays visible on the button background.
+    successIconElement.style.color = this.getRootElement().querySelector('button').style.color;
+    mainContainerElement.classList.add('cl-button-success');
+  }
+
+  hideSuccessIcon() {
+    this.getRootElement()
+      .querySelector('.main-container')
+      ?.classList.remove('cl-button-success');
+  }
+
   hideErrorTooltip() {
     this.getRootElement()
       .querySelector('.input-tooltip')