@salla.sa/twilight-components 1.0.69 → 1.0.71

package/dist/cjs/loader.cjs.js

@@ -17,7 +17,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["salla-modal_2.cjs",[[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"modalTitle":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-login-modal.cjs",[[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"show":[64]},[[0,"verified","onVerified"]]]]],["salla-product-availability.cjs",[[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}]]],["salla-rating-modal.cjs",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-branches.cjs",[[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}]]],["salla-localization-modal.cjs",[[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}]]],["salla-offer-modal.cjs",[[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"add_to_cart":[32],"out_of_stock":[32],"show":[64],"showOffer":[64]}]]],["salla-conditional-fields.cjs",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"nextPageAutoload":[1028,"next-page-autoload"],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]],["salla-installment.cjs",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]],["salla-quantity-input.cjs",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]],["salla-button.cjs",[[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}]]],["salla-verify-modal.cjs",[[4,"salla-verify-modal",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}]]],["salla-rating-stars.cjs",[[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}]]],["salla-tel-input.cjs",[[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}]]]], options);
+  return index.bootstrapLazy([["salla-modal_2.cjs",[[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"modalTitle":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-login-modal.cjs",[[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"show":[64]},[[0,"verified","onVerified"]]]]],["salla-product-availability.cjs",[[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}]]],["salla-rating-modal.cjs",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-branches.cjs",[[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}]]],["salla-localization-modal.cjs",[[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}]]],["salla-offer-modal.cjs",[[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"add_to_cart":[32],"out_of_stock":[32],"show":[64],"showOffer":[64]}]]],["salla-conditional-fields.cjs",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"nextPageAutoload":[1028,"next-page-autoload"],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]],["salla-installment.cjs",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]],["salla-quantity-input.cjs",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]],["salla-button.cjs",[[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}]]],["salla-verify-modal.cjs",[[4,"salla-verify-modal",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}]]],["salla-rating-stars.cjs",[[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}]]],["salla-tel-input.cjs",[[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}]]]], options);
   });
 };
 

package/dist/cjs/salla-button.cjs.entry.js

@@ -7,14 +7,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c0f5bb97.js');
 
-const sallaButtonCss = "salla-button{pointer-events:none}salla-button[type=submit]{-webkit-appearance:none}salla-button[width=wide]{width:100%}.s-button-wrap[loading]{pointer-events:none}.s-button-wrap[loading] .s-button-element{pointer-events:none !important}.s-button-wrap[loading] .s-button-loader-center .s-button-text{opacity:0}.s-button-wrap .s-button-element[loading]{pointer-events:none !important}.s-button-wrap .s-button-element:not(:disabled){pointer-events:auto}.s-button-wrap .s-button-solid .s-button-loader:before{border-color:#fff #fff rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.2)}.s-button-wrap .s-button-outline{border:1px solid currentColor}.s-button-wrap .s-button-outline:hover{border-color:transparent}.s-button-wrap .s-button-outline .s-button-loader:before{border-top-color:currentColor;border-left-color:currentColor}.s-button-wrap .s-button-icon.s-button-large{width:56px;height:56px}.s-button-wrap .s-button-icon.s-button-small{width:24px;height:24px}.s-button-wrap .s-button-icon.s-button-small .s-button-loader:before{width:0.85rem;height:0.85rem}.s-button-wrap .s-button-loader-after .s-button-load{flex-direction:row}.s-button-wrap .s-button-loader-start.s-button-element{padding-right:40px}.s-button-wrap .s-button-loader-start .s-button-loader{position:absolute;right:8px}.s-button-wrap .s-button-loader-start .s-button-loader [dir=ltr]{left:8px;right:auto}.s-button-wrap .s-button-loader-end.s-button-element{padding-left:40px}.s-button-wrap .s-button-loader-end .s-button-loader{position:absolute;left:8px}.s-button-wrap .s-button-loader-end .s-button-loader [dir=ltr]{right:8px;left:auto}.s-button-wrap .s-button-loader-center .s-button-loader{position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);margin:0 !important}";
+const sallaButtonCss = "salla-button{pointer-events:none}salla-button[type=submit]{-webkit-appearance:none}salla-button[width=wide]{width:100%}.s-button-wrap[loading]{pointer-events:none}.s-button-wrap[loading] .s-button-element{pointer-events:none !important}.s-button-wrap[loading] .s-button-loader-center .s-button-text{opacity:0}.s-button-wrap .s-button-element[loading]{pointer-events:none !important}.s-button-wrap .s-button-element:not(:disabled){pointer-events:auto}.s-button-wrap .s-button-solid .s-button-loader:before{border-color:#fff #fff rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.2)}.s-button-wrap .s-button-outline{border:1px solid currentColor}.s-button-wrap .s-button-outline:hover{border-color:transparent}.s-button-wrap .s-button-outline .s-button-loader:before{border-top-color:currentColor;border-left-color:currentColor}.s-button-wrap .s-button-icon.s-button-large{width:56px;height:56px}.s-button-wrap .s-button-icon.s-button-small{width:24px;height:24px}.s-button-wrap .s-button-icon.s-button-small .s-button-loader:before{width:0.85rem;height:0.85rem}.s-button-wrap .s-button-loader-after .s-button-load{flex-direction:row}.s-button-wrap .s-button-loader-start.s-button-element{padding-left:32px;padding-right:32px}.s-button-wrap .s-button-loader-start .s-button-loader{position:absolute;right:8px}.s-button-wrap .s-button-loader-start .s-button-loader [dir=ltr]{left:8px;right:auto}.s-button-wrap .s-button-loader-end.s-button-element{padding-left:32px;padding-right:32px}.s-button-wrap .s-button-loader-end .s-button-loader{position:absolute;left:8px}.s-button-wrap .s-button-loader-end .s-button-loader [dir=ltr]{right:8px;left:auto}.s-button-wrap .s-button-loader-center .s-button-loader{position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);margin:0 !important}";
 
 const SallaButton = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.hostAttributes = {};
     /**
-     * Button Type todo :: find better name,
+     * Button Type
      */
     this.shape = 'btn';
     /**

package/dist/cjs/salla-conditional-fields.cjs.entry.js

@@ -17,7 +17,6 @@ const SallaConditionalFields = class {
     var _a;
     salla.log('Received the change event: ', event);
     if (!event.target || !['SELECT'].includes(event.target.tagName) && !['checkbox'].includes(event.target.getAttribute('type'))) {
-      // todo :: support debug
       salla.log('Ignore the change because is not support input: ' + (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.tagName) || 'N/A'));
       return;
     }

package/dist/cjs/salla-installment.cjs.entry.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c0f5bb97.js');
 
-const sallaInstallmentCss = "#tabbyPromoWrapper{background:white;border-radius:0.375rem;transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);margin-bottom:20px}#tabbyPromoWrapper:hover{box-shadow:0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D}#tabbyPromoWrapper #tabbyPromo *{font-family:var(--font-main)}#tabbyPromoWrapper #tabbyPromo>div>div{max-width:none;padding:15px;box-shadow:none}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet{max-width:100%;min-height:100px;padding:18px 20px;border:none}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__text,#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__link{font-size:var(--font-sm);color:var(--color-text) !important}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__link{font-weight:bold}.tabby-promo-wrapper #tabby-promo{font-family:var(--font-main) !important}.tabby-promo-wrapper #tabby-promo .tabby-promo__feature-title{font-size:var(--font-md)}.tabby-promo-wrapper #tabby-promo .tabby-promo__feature-desc{font-size:var(--font-sm);line-height:20px}.tamara-product-widget{margin-bottom:20px}.tamara-product-widget,.spotii-wrapper{min-height:100px;position:relative;color:var(--color-text);font-size:var(--font-sm);line-height:1.25;border:1px solid var(--color-grey-dark);padding:18px 20px 18px 100px !important;background:white;border-radius:0.375rem;transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1)}.tamara-product-widget:hover,.spotii-wrapper:hover{box-shadow:0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D}.spotii-wrapper .spotii-promo{font-size:var(--font-md)}.spotii-wrapper .spotii-product-widget{font-size:var(--font-sm);margin-top:10px}.tamara-product-widget .tamara-logo{position:absolute;left:20px;top:18px;margin:0 !important}.ltr .tamara-product-widget .tamara-logo{right:20px;left:auto}.tamara-product-widget span{font-family:var(--font-main);font-size:var(--font-sm);color:var(--color-text)}.tamara-product-widget span:last-child{display:block;position:relative;margin-top:8px}.tamara-popup__wrap{overflow:auto !important}";
+const sallaInstallmentCss = "#tabbyPromoWrapper{background:white;border-radius:0.375rem;transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);margin-bottom:20px}#tabbyPromoWrapper:hover{box-shadow:0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D}#tabbyPromoWrapper #tabbyPromo *{font-family:var(--font-main)}#tabbyPromoWrapper #tabbyPromo>div>div{max-width:none;padding:15px;box-shadow:none;border:none}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet{max-width:100%;min-height:100px;padding:18px 20px;border:none}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__text,#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__link{font-size:var(--font-sm);color:var(--color-text) !important}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__link{font-weight:bold}.tabby-promo-wrapper #tabby-promo{font-family:var(--font-main) !important}.tabby-promo-wrapper #tabby-promo .tabby-promo__feature-title{font-size:var(--font-md)}.tabby-promo-wrapper #tabby-promo .tabby-promo__feature-desc{font-size:var(--font-sm);line-height:20px}.tamara-product-widget{margin-bottom:20px}.tamara-product-widget,.spotii-wrapper{min-height:100px;position:relative;color:var(--color-text);font-size:var(--font-sm);line-height:1.25;border:1px solid var(--color-grey-dark);padding:18px 20px 18px 100px !important;background:white;border-radius:0.375rem;transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1)}.tamara-product-widget:hover,.spotii-wrapper:hover{box-shadow:0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D}.spotii-wrapper .spotii-promo{font-size:var(--font-md)}.spotii-wrapper .spotii-product-widget{font-size:var(--font-sm);margin-top:10px}.tamara-product-widget .tamara-logo{position:absolute;left:20px;top:18px;margin:0 !important}.ltr .tamara-product-widget .tamara-logo{right:20px;left:auto}.tamara-product-widget span{font-family:var(--font-main);font-size:var(--font-sm);color:var(--color-text)}.tamara-product-widget span:last-child{display:block;position:relative;margin-top:8px}.tamara-popup__wrap{overflow:auto !important}";
 
 const SallaInstallment = class {
   constructor(hostRef) {

package/dist/cjs/salla-login-modal.cjs.entry.js

@@ -26,7 +26,6 @@ const SallaLoginModal = class {
      */
     this.isEmailRequired = salla.config.get('store.settings.auth.is_email_required', false);
     this.regType = 'phone';
-    //TODO:: any salla-button, text should updated by this.btn?.setText(newText)
     this.title = salla.lang.get('blocks.header.login');
     this.loginTypeTitle = salla.lang.get('blocks.header.select_login_way');
     this.loginText = salla.lang.get('blocks.header.login');
@@ -63,7 +62,7 @@ const SallaLoginModal = class {
     };
     this.newUser = async () => {
       var _a;
-      const { mobile: regPhone, countryCode, countryKey } = this.regType == "email" ? await this.regTelInput.getValues() : await this.loginTelInput.getValues(), emailValue = this.regEmail.value || ((_a = this.loginEmail) === null || _a === void 0 ? void 0 : _a.value);
+      const { mobile: regPhone, countryCode } = this.regType == "email" ? await this.regTelInput.getValues() : await this.loginTelInput.getValues(), emailValue = this.regEmail.value || ((_a = this.loginEmail) === null || _a === void 0 ? void 0 : _a.value);
       await this.newUserValidation();
       await this.regBtn.load();
       await this.regBtn.disable();
@@ -72,7 +71,6 @@ const SallaLoginModal = class {
         last_name: this.lastName.value,
         phone: regPhone || this.loginTelInput.mobile,
         country_code: countryCode,
-        country_key: countryKey,
         verified_by: this.regType,
       };
       emailValue && (data = Object.assign(Object.assign({}, data), { email: emailValue }));
@@ -117,19 +115,19 @@ const SallaLoginModal = class {
    * @param {CustomEvent|{details:{case:'new_customer'|'authenticated', redirect_url:string|null}}} event
    */
   onVerified(event) {
-    if (!event.detail.case) {
+    if (!event.detail.data.case) {
       salla.log('verified but without case!');
       return;
     }
-    if (event.detail.case === "new_customer") {
+    if (event.detail.data.case === "new_customer") {
       return this.showTab(this.registrationTab);
     }
     //TODO::It looks that this is a workaround for something, so needs to be enhanced🤔
     if (salla.auth.event.getTypeActionOnVerified() !== 'redirect') {
       return;
     }
-    if (event.redirect_url) {
-      return window.location.href = event.redirect_url;
+    if (event.data.redirect_url) {
+      return window.location.href = event.data.redirect_url;
     }
     window.location.reload();
   }
@@ -162,8 +160,8 @@ const SallaLoginModal = class {
     isRegistrationTab && ((_a = this.firstName) === null || _a === void 0 ? void 0 : _a.focus());
     (_b = this.modal) === null || _b === void 0 ? void 0 : _b.setTitle(isRegistrationTab ? salla.lang.get('common.titles.registration') : this.title);
     if (!isRegistrationTab) {
-      Helper.Helper.toggleElementClassIf(this.regMobileBlock, 's-hidden', 's-block', () => this.regType === 'phone')
-        .toggleElementClassIf(this.regEmailBlock, 's-hidden', 's-block', () => this.regType === 'email');
+      Helper.Helper.toggleElementClassIf(this.regMobileBlock, 's-hidden', 's-show', () => this.regType === 'phone')
+        .toggleElementClassIf(this.regEmailBlock, 's-hidden', 's-show', () => this.regType === 'email');
     }
     return this;
   }
@@ -196,7 +194,7 @@ const SallaLoginModal = class {
       index.h("div", { class: "s-login-modal-tab", ref: tab => this.mobileTab = tab }, index.h("slot", { name: "before-login-mobile" }), index.h("label", { class: "s-login-modal-label" }, this.mobileLabel), index.h("salla-tel-input", { ref: el => this.loginTelInput = el, onKeyDown: e => this.typing(e, this.loginBySMS) }), index.h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.loginBySMS(), ref: b => this.smsBtn = b }, salla.lang.get('blocks.header.enter')), this.isEmailAllowed ?
         index.h("a", { href: "#", onClick: () => this.showTab(this.emailTab), class: "s-login-modal-link" }, this.byEmailText) : '', index.h("slot", { name: "after-login-mobile" })) : '', this.isEmailAllowed ?
       index.h("div", { class: "s-login-modal-tab", ref: tab => this.emailTab = tab }, index.h("slot", { name: "before-login-email" }), index.h("label", { class: "s-login-modal-label" }, this.emailLabel), index.h("input", { type: "email", ref: el => this.loginEmail = el, onKeyDown: e => this.typing(e, this.loginByEmail), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }), index.h("span", { class: "s-login-modal-error-message" }), index.h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.loginByEmail(), ref: b => this.emailBtn = b }, salla.lang.get('blocks.header.enter')), this.isMobileAllowed ?
-        index.h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-modal-link" }, this.bySMSText) : '', index.h("slot", { name: "after-login-email" })) : '', index.h("salla-verify-modal", { withoutModal: true, ref: tab => this.verifyTab = tab, autoReload: false }, index.h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-modal-back sicon-arrow-right", slot: "after-footer", href: "#" })), index.h("div", { ref: tab => this.registrationTab = tab }, index.h("slot", { name: "before-registration" }), index.h("label", { class: "s-login-modal-label" }, this.firstNameLabel), index.h("input", { type: "text", class: "s-login-modal-input", ref: el => this.firstName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.first_name') }), index.h("span", { class: "s-login-modal-error-message" }), index.h("label", { class: "s-login-modal-label" }, this.lastNameLabel), index.h("input", { type: "text", class: "s-login-modal-input", ref: el => this.lastName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.last_name') }), index.h("span", { class: "s-login-modal-error-message" }), index.h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-modal-label" }, this.mobileLabel), index.h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), index.h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-modal-label" }, this.emailLabel), index.h("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }), index.h("span", { class: "s-login-modal-error-message" })), index.h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), index.h("slot", { name: "after-registration" })))));
+        index.h("a", { href: "#", onClick: () => this.showTab(this.mobileTab), class: "s-login-modal-link" }, this.bySMSText) : '', index.h("slot", { name: "after-login-email" })) : '', index.h("salla-verify-modal", { withoutModal: true, ref: tab => this.verifyTab = tab, autoReload: false }, index.h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-modal-back sicon-arrow-right", slot: "after-footer", href: "#" })), index.h("div", { ref: tab => this.registrationTab = tab }, index.h("slot", { name: "before-registration" }), index.h("div", null, index.h("label", { class: "s-login-modal-label" }, this.firstNameLabel), index.h("input", { type: "text", class: "s-login-modal-input", ref: el => this.firstName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.first_name') }), index.h("span", { class: "s-login-modal-error-message" })), index.h("div", null, index.h("label", { class: "s-login-modal-label" }, this.lastNameLabel), index.h("input", { type: "text", class: "s-login-modal-input", ref: el => this.lastName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.last_name') }), index.h("span", { class: "s-login-modal-error-message" })), index.h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-modal-label" }, this.mobileLabel), index.h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })), index.h("div", { ref: el => this.regEmailBlock = el, class: "mb-1.5" }, index.h("label", { class: "s-login-modal-label" }, this.emailLabel), index.h("input", { type: "email", ref: el => this.regEmail = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: "your@email.com", class: "s-login-modal-input s-ltr" }), index.h("span", { class: "s-login-modal-error-message" })), index.h("salla-button", { "loader-position": 'center', width: "wide", onClick: () => this.newUser(), ref: b => this.regBtn = b }, salla.lang.get('blocks.header.register')), index.h("slot", { name: "after-registration" })))));
   }
   get host() { return index.getElement(this); }
 };

package/dist/cjs/salla-modal_2.cjs.entry.js

@@ -100,7 +100,6 @@ const SallaModal = class {
     const body = this.host.querySelector('.s-modal-body');
     Helper.Helper.toggleElementClassIf(body, 's-modal-entering', 's-modal-leaving', () => isOpen)
       .toggleElementClassIf(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
-      //todo:: use united class names
       .toggleElementClassIf(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
     if (!isOpen) {
       setTimeout(() => this.host.classList.add('s-hidden'), 350);
@@ -188,7 +187,6 @@ const SallaSearch = class {
       '  <div class="s-search-product-title">{name}</div> <div class="s-search-product-price">{price} <span class="s-search-product-regular-price">{regular_price}</span></div>' +
       '</div>';
   }
-  //todo:: reset data when closing
   search(e) {
     this.inputValue = e.target.value;
     Helper.Helper.hideElement(this.noResults);

package/dist/cjs/salla-offer-modal.cjs.entry.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c0f5bb97.js');
 const Helper = require('./Helper-8ae6a805.js');
 
-const sallaOfferModalCss = "#salla-offer-modal .s-offer-modal-body{-webkit-overflow-scrolling:touch}#salla-offer-modal .s-offer-modal-body::-webkit-scrollbar{display:none}#salla-offer-modal .s-offer-modal-next-btn{background:linear-gradient(90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}#salla-offer-modal .s-offer-modal-prev-btn{background:linear-gradient(-90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}.ltr #salla-offer-modal .s-offer-modal-nav-btn,.ltr #salla-offer-modal .s-offer-modal-nav-btn-icon{transform:scale(-1)}";
+const sallaOfferModalCss = "#salla-offer-modal .s-offer-modal-body{-webkit-overflow-scrolling:touch}#salla-offer-modal .s-offer-modal-body::-webkit-scrollbar{display:none}#salla-offer-modal .s-offer-modal-next-btn{background:linear-gradient(-90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}#salla-offer-modal .s-offer-modal-prev-btn{background:linear-gradient(90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%)}.rtl #salla-offer-modal .s-offer-modal-next-btn{transform:scale(-1) translateX(100%)}.rtl #salla-offer-modal .s-offer-modal-prev-btn{transform:scale(-1) translateX(-100%)}.rtl #salla-offer-modal .s-offer-modal-btn-is-active{transform:scale(-1) translateX(0)}";
 
 const SallaOfferModal = class {
   constructor(hostRef) {
@@ -92,9 +92,6 @@ const SallaOfferModal = class {
       ] : '');
   }
   componentDidRender() {
-    //todo:: know from where there is hidden attributes to the doms🤔
-    //todo:: add animation
-    this.modal.querySelectorAll('[hidden]').forEach(el => el.removeAttribute('hidden'));
     // Sooo mini Slider
     if (this.offer && window.screen.width > 639) {
       let sliderWrap = this.host.querySelector('.s-offer-modal-scrolled-slider-wrap'), slider = this.host.querySelector('.s-offer-modal-scrolled-slider'), navButtons = this.host.querySelectorAll('.s-offer-modal-nav-btn'), nexBtn = this.host.querySelector('.s-offer-modal-next-btn'), prevBtn = this.host.querySelector('.s-offer-modal-prev-btn'), items = this.host.querySelectorAll('.s-offer-modal-slider-item'), sliderNavMargin = 20, // space before displaying the next/prev btns.

package/dist/cjs/salla-rating-modal.cjs.entry.js

@@ -167,10 +167,6 @@ const SallaRatingModal = class {
           : '', index.h("div", { class: "s-rating-modal-thanks s-rating-modal-hidden", ref: el => this.thanksTab = el }, index.h("span", { class: "s-rating-modal-icon sicon-check-circle2" }), index.h("h3", { class: "s-rating-modal-thanks-title" }, this.thanks), index.h("div", { class: "s-rating-modal-thanks-msg", innerHTML: this.order.thanks_message }), index.h("time", { class: "s-rating-modal-thanks-time", ref: el => this.thanksTime = el }))), index.h("div", { class: "s-rating-modal-footer" }, index.h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-modal-btn s-rating-modal-unvisiable" }, this.back), this.stepsCount > 1 ? index.h("ul", { class: "s-rating-modal-dots" }, [0, 1, 2].slice(0, this.stepsCount).map(() => index.h("li", { class: 's-rating-modal-bg-gray s-rating-modal-step-dot' }))) : '', index.h("salla-button", { "loader-position": 'center', ref: el => this.nextBtn = el, onClick: () => this.submit() }, this.next)),]
       : '')));
   }
-  componentDidRender() {
-    //todo:: know from where there is hidden attributes to the doms🤔
-    this.modal.querySelectorAll('[hidden]').forEach(el => el.removeAttribute('hidden'));
-  }
   componentDidLoad() {
     salla.event.dispatch('rating::ready', this);
   }

package/dist/cjs/salla-tel-input.cjs.entry.js

@@ -1391,7 +1391,6 @@ const SallaTelInput = class {
      * Current country_code
      */
     this.countryCode = salla.config.get('user.country_code', 'SA');
-    this.countryKey = "+966"; //TODO:: why we need it, if it's important find a way to get it automatically for the current user
     this.countryCodeLabel = salla.lang.get('common.country_code');
     this.mobileLabel = salla.lang.get('common.elements.mobile');
     this.tooShort = salla.lang.get('common.errors.too_short', { attribute: this.mobileLabel });
@@ -1413,13 +1412,12 @@ const SallaTelInput = class {
   }
   /**
    * Get current values
-   * @return {{mobile:number,countryCode:'SA'|string, countryKey:'+966'|string}}
+   * @return {{mobile:number,countryCode:'SA'|string}}
    */
   async getValues() {
     return {
       mobile: this.mobile = this.phoneInput.value,
-      countryCode: this.countryCode = this.countryCodeInput.value,
-      countryKey: this.countryKey = this.countryKeyInput.value
+      countryCode: this.countryCode = this.countryCodeInput.value
     };
   }
   /**
@@ -1453,7 +1451,6 @@ const SallaTelInput = class {
     this.phoneInput.addEventListener("countrychange", () => {
       let data = this.iti.getSelectedCountryData();
       this.countryCodeInput.value = data.iso2.toUpperCase();
-      this.countryKeyInput.value = ('+' + data.dialCode).replace('++', '+');
     });
     // on blur: validate
     this.phoneInput.addEventListener('blur', () => this.isValid());
@@ -1469,7 +1466,7 @@ const SallaTelInput = class {
   }
   ;
   render() {
-    return (index.h(index.Host, { id: "s-tel-input" }, index.h("input", { type: "tel", name: "mobile", value: this.mobile, ref: el => this.phoneInput = el, class: "s-tel-input-control tel-input s-ltr" }), index.h("span", { class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), index.h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" }), index.h("input", { type: "hidden", name: "country_key", value: this.countryKey, ref: el => this.countryKeyInput = el, class: "country_key" })));
+    return (index.h(index.Host, { id: "s-tel-input" }, index.h("input", { type: "tel", name: "mobile", value: this.mobile, ref: el => this.phoneInput = el, class: "s-tel-input-control tel-input s-ltr" }), index.h("span", { class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), index.h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
   }
   componentDidLoad() {
     this.initTelInput();

package/dist/cjs/twilight-components.cjs.js

@@ -18,5 +18,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["salla-modal_2.cjs",[[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"modalTitle":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-login-modal.cjs",[[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"show":[64]},[[0,"verified","onVerified"]]]]],["salla-product-availability.cjs",[[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}]]],["salla-rating-modal.cjs",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-branches.cjs",[[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}]]],["salla-localization-modal.cjs",[[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}]]],["salla-offer-modal.cjs",[[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"add_to_cart":[32],"out_of_stock":[32],"show":[64],"showOffer":[64]}]]],["salla-conditional-fields.cjs",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"nextPageAutoload":[1028,"next-page-autoload"],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]],["salla-installment.cjs",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]],["salla-quantity-input.cjs",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]],["salla-button.cjs",[[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}]]],["salla-verify-modal.cjs",[[4,"salla-verify-modal",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}]]],["salla-rating-stars.cjs",[[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}]]],["salla-tel-input.cjs",[[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}]]]], options);
+  return index.bootstrapLazy([["salla-modal_2.cjs",[[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-modal",{"isClosable":[1028,"is-closable"],"width":[513],"position":[513],"visible":[516],"isLoading":[1540,"is-loading"],"subTitleFirst":[4,"sub-title-first"],"noPadding":[4,"no-padding"],"subTitle":[1,"sub-title"],"icon":[1],"iconStyle":[1,"icon-style"],"imageIcon":[1,"image-icon"],"modalTitle":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-login-modal.cjs",[[4,"salla-login-modal",{"isEmailAllowed":[1028,"is-email-allowed"],"isMobileAllowed":[1028,"is-mobile-allowed"],"isEmailRequired":[1028,"is-email-required"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"emailErrorMsg":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameErrorMsg":[32],"lastNameErrorMsg":[32],"show":[64]},[[0,"verified","onVerified"]]]]],["salla-product-availability.cjs",[[0,"salla-product-availability",{"channels":[1],"productId":[2,"product-id"],"isSubscribed":[1028,"is-subscribed"],"subTitle":[32],"mobileLabel":[32],"emailLabel":[32],"emailPlaceholder":[32],"subscribedMessage":[32],"title_":[32],"emailErrorMsg":[32],"isVisitorSubscribed":[32]}]]],["salla-rating-modal.cjs",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-branches.cjs",[[4,"salla-branches",{"position":[1],"displayAs":[1,"display-as"],"browseProductsFrom":[1,"browse-products-from"],"branches":[16],"current":[1026],"open":[32],"selected":[32],"isOpenedBefore":[32],"show":[64],"hide":[64]}]]],["salla-localization-modal.cjs",[[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"show":[64],"hide":[64],"submit":[64]}]]],["salla-offer-modal.cjs",[[0,"salla-offer-modal",{"offer":[32],"offer_name":[32],"offer_message":[32],"offer_expires_in":[32],"remember_my_choice":[32],"add_to_cart":[32],"out_of_stock":[32],"show":[64],"showOffer":[64]}]]],["salla-conditional-fields.cjs",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"nextPageAutoload":[1028,"next-page-autoload"],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]],["salla-installment.cjs",[[0,"salla-installment",{"price":[1],"language":[1],"currency":[1],"tamaraIsActive":[32],"tabbyIsActive":[32],"spotiiIsActive":[32]}]]],["salla-quantity-input.cjs",[[4,"salla-quantity-input",{"quantity":[32],"decrease":[64],"increase":[64],"setValue":[64]}]]],["salla-button.cjs",[[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}]]],["salla-verify-modal.cjs",[[4,"salla-verify-modal",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}]]],["salla-rating-stars.cjs",[[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}]]],["salla-tel-input.cjs",[[0,"salla-tel-input",{"mobile":[1025],"countryCode":[1025,"country-code"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}]]]], options);
 });

package/dist/collection/components/salla-button/salla-button.css

@@ -59,7 +59,8 @@ salla-button[width=wide] {
   flex-direction: row;
 }
 .s-button-wrap .s-button-loader-start.s-button-element {
-  padding-right: 40px;
+  padding-left: 32px;
+  padding-right: 32px;
 }
 .s-button-wrap .s-button-loader-start .s-button-loader {
   position: absolute;
@@ -70,7 +71,8 @@ salla-button[width=wide] {
   right: auto;
 }
 .s-button-wrap .s-button-loader-end.s-button-element {
-  padding-left: 40px;
+  padding-left: 32px;
+  padding-right: 32px;
 }
 .s-button-wrap .s-button-loader-end .s-button-loader {
   position: absolute;

package/dist/collection/components/salla-button/salla-button.js

@@ -6,7 +6,7 @@ export class SallaButton {
   constructor() {
     this.hostAttributes = {};
     /**
-     * Button Type todo :: find better name,
+     * Button Type
      */
     this.shape = 'btn';
     /**
@@ -131,7 +131,7 @@ export class SallaButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Button Type todo :: find better name,"
+        "text": "Button Type"
       },
       "attribute": "shape",
       "reflect": true,

package/dist/collection/components/salla-conditional-fields/salla-conditional-fields.js

@@ -11,7 +11,6 @@ export class SallaConditionalFields {
     var _a;
     salla.log('Received the change event: ', event);
     if (!event.target || !['SELECT'].includes(event.target.tagName) && !['checkbox'].includes(event.target.getAttribute('type'))) {
-      // todo :: support debug
       salla.log('Ignore the change because is not support input: ' + (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.tagName) || 'N/A'));
       return;
     }

package/dist/collection/components/salla-installment/salla-installment.css

@@ -20,6 +20,7 @@
   max-width: none;
   padding: 15px;
   box-shadow: none;
+  border: none;
 }
 #tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet {
   max-width: 100%;

package/dist/collection/components/salla-login-modal/salla-login-modal.js

@@ -29,7 +29,6 @@ export class SallaLoginModal {
      */
     this.isEmailRequired = salla.config.get('store.settings.auth.is_email_required', false);
     this.regType = 'phone';
-    //TODO:: any salla-button, text should updated by this.btn?.setText(newText)
     this.title = salla.lang.get('blocks.header.login');
     this.loginTypeTitle = salla.lang.get('blocks.header.select_login_way');
     this.loginText = salla.lang.get('blocks.header.login');
@@ -66,7 +65,7 @@ export class SallaLoginModal {
     };
     this.newUser = async () => {
       var _a;
-      const { mobile: regPhone, countryCode, countryKey } = this.regType == "email" ? await this.regTelInput.getValues() : await this.loginTelInput.getValues(), emailValue = this.regEmail.value || ((_a = this.loginEmail) === null || _a === void 0 ? void 0 : _a.value);
+      const { mobile: regPhone, countryCode } = this.regType == "email" ? await this.regTelInput.getValues() : await this.loginTelInput.getValues(), emailValue = this.regEmail.value || ((_a = this.loginEmail) === null || _a === void 0 ? void 0 : _a.value);
       await this.newUserValidation();
       await this.regBtn.load();
       await this.regBtn.disable();
@@ -75,7 +74,6 @@ export class SallaLoginModal {
         last_name: this.lastName.value,
         phone: regPhone || this.loginTelInput.mobile,
         country_code: countryCode,
-        country_key: countryKey,
         verified_by: this.regType,
       };
       emailValue && (data = Object.assign(Object.assign({}, data), { email: emailValue }));
@@ -120,19 +118,19 @@ export class SallaLoginModal {
    * @param {CustomEvent|{details:{case:'new_customer'|'authenticated', redirect_url:string|null}}} event
    */
   onVerified(event) {
-    if (!event.detail.case) {
+    if (!event.detail.data.case) {
       salla.log('verified but without case!');
       return;
     }
-    if (event.detail.case === "new_customer") {
+    if (event.detail.data.case === "new_customer") {
       return this.showTab(this.registrationTab);
     }
     //TODO::It looks that this is a workaround for something, so needs to be enhanced🤔
     if (salla.auth.event.getTypeActionOnVerified() !== 'redirect') {
       return;
     }
-    if (event.redirect_url) {
-      return window.location.href = event.redirect_url;
+    if (event.data.redirect_url) {
+      return window.location.href = event.data.redirect_url;
     }
     window.location.reload();
   }
@@ -165,8 +163,8 @@ export class SallaLoginModal {
     isRegistrationTab && ((_a = this.firstName) === null || _a === void 0 ? void 0 : _a.focus());
     (_b = this.modal) === null || _b === void 0 ? void 0 : _b.setTitle(isRegistrationTab ? salla.lang.get('common.titles.registration') : this.title);
     if (!isRegistrationTab) {
-      Helper.toggleElementClassIf(this.regMobileBlock, 's-hidden', 's-block', () => this.regType === 'phone')
-        .toggleElementClassIf(this.regEmailBlock, 's-hidden', 's-block', () => this.regType === 'email');
+      Helper.toggleElementClassIf(this.regMobileBlock, 's-hidden', 's-show', () => this.regType === 'phone')
+        .toggleElementClassIf(this.regEmailBlock, 's-hidden', 's-show', () => this.regType === 'email');
     }
     return this;
   }
@@ -232,12 +230,14 @@ export class SallaLoginModal {
           h("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-modal-back sicon-arrow-right", slot: "after-footer", href: "#" })),
         h("div", { ref: tab => this.registrationTab = tab },
           h("slot", { name: "before-registration" }),
-          h("label", { class: "s-login-modal-label" }, this.firstNameLabel),
-          h("input", { type: "text", class: "s-login-modal-input", ref: el => this.firstName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.first_name') }),
-          h("span", { class: "s-login-modal-error-message" }),
-          h("label", { class: "s-login-modal-label" }, this.lastNameLabel),
-          h("input", { type: "text", class: "s-login-modal-input", ref: el => this.lastName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.last_name') }),
-          h("span", { class: "s-login-modal-error-message" }),
+          h("div", null,
+            h("label", { class: "s-login-modal-label" }, this.firstNameLabel),
+            h("input", { type: "text", class: "s-login-modal-input", ref: el => this.firstName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.first_name') }),
+            h("span", { class: "s-login-modal-error-message" })),
+          h("div", null,
+            h("label", { class: "s-login-modal-label" }, this.lastNameLabel),
+            h("input", { type: "text", class: "s-login-modal-input", ref: el => this.lastName = el, onKeyDown: e => this.typing(e, this.newUser), placeholder: salla.lang.get('pages.profile.last_name') }),
+            h("span", { class: "s-login-modal-error-message" })),
           h("div", { ref: el => this.regMobileBlock = el, class: "mb-1.5" },
             h("label", { class: "s-login-modal-label" }, this.mobileLabel),
             h("salla-tel-input", { ref: el => this.regTelInput = el, onKeyDown: e => this.typing(e, this.newUser) })),

package/dist/collection/components/salla-modal/salla-modal.js

@@ -93,7 +93,6 @@ export class SallaModal {
     const body = this.host.querySelector('.s-modal-body');
     Helper.toggleElementClassIf(body, 's-modal-entering', 's-modal-leaving', () => isOpen)
       .toggleElementClassIf(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
-      //todo:: use united class names
       .toggleElementClassIf(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
     if (!isOpen) {
       setTimeout(() => this.host.classList.add('s-hidden'), 350);

package/dist/collection/components/salla-offer-modal/salla-offer-modal.css

@@ -12,11 +12,17 @@
   display: none;
 }
 #salla-offer-modal .s-offer-modal-next-btn {
-  background: linear-gradient(90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%);
+  background: linear-gradient(-90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%);
 }
 #salla-offer-modal .s-offer-modal-prev-btn {
-  background: linear-gradient(-90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%);
+  background: linear-gradient(90deg, #fff 25%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%);
+}
+.rtl #salla-offer-modal .s-offer-modal-next-btn {
+  transform: scale(-1) translateX(100%);
+}
+.rtl #salla-offer-modal .s-offer-modal-prev-btn {
+  transform: scale(-1) translateX(-100%);
 }
-.ltr #salla-offer-modal .s-offer-modal-nav-btn, .ltr #salla-offer-modal .s-offer-modal-nav-btn-icon {
-  transform: scale(-1);
+.rtl #salla-offer-modal .s-offer-modal-btn-is-active {
+  transform: scale(-1) translateX(0);
 }

package/dist/collection/components/salla-offer-modal/salla-offer-modal.js

@@ -105,9 +105,6 @@ export class SallaOfferModal {
       ] : '');
   }
   componentDidRender() {
-    //todo:: know from where there is hidden attributes to the doms🤔
-    //todo:: add animation
-    this.modal.querySelectorAll('[hidden]').forEach(el => el.removeAttribute('hidden'));
     // Sooo mini Slider
     if (this.offer && window.screen.width > 639) {
       let sliderWrap = this.host.querySelector('.s-offer-modal-scrolled-slider-wrap'), slider = this.host.querySelector('.s-offer-modal-scrolled-slider'), navButtons = this.host.querySelectorAll('.s-offer-modal-nav-btn'), nexBtn = this.host.querySelector('.s-offer-modal-next-btn'), prevBtn = this.host.querySelector('.s-offer-modal-prev-btn'), items = this.host.querySelectorAll('.s-offer-modal-slider-item'), sliderNavMargin = 20, // space before displaying the next/prev btns.

package/dist/collection/components/salla-rating-modal/salla-rating-modal.js

@@ -199,10 +199,6 @@ export class SallaRatingModal {
             h("salla-button", { "loader-position": 'center', ref: el => this.nextBtn = el, onClick: () => this.submit() }, this.next)),]
         : '')));
   }
-  componentDidRender() {
-    //todo:: know from where there is hidden attributes to the doms🤔
-    this.modal.querySelectorAll('[hidden]').forEach(el => el.removeAttribute('hidden'));
-  }
   componentDidLoad() {
     salla.event.dispatch('rating::ready', this);
   }

package/dist/collection/components/salla-search/salla-search.js

@@ -38,7 +38,6 @@ export class SallaSearch {
       '  <div class="s-search-product-title">{name}</div> <div class="s-search-product-price">{price} <span class="s-search-product-regular-price">{regular_price}</span></div>' +
       '</div>';
   }
-  //todo:: reset data when closing
   search(e) {
     this.inputValue = e.target.value;
     Helper.hideElement(this.noResults);

package/dist/collection/components/salla-tel-input/salla-tel-input.js

@@ -10,7 +10,6 @@ export class SallaTelInput {
      * Current country_code
      */
     this.countryCode = salla.config.get('user.country_code', 'SA');
-    this.countryKey = "+966"; //TODO:: why we need it, if it's important find a way to get it automatically for the current user
     this.countryCodeLabel = salla.lang.get('common.country_code');
     this.mobileLabel = salla.lang.get('common.elements.mobile');
     this.tooShort = salla.lang.get('common.errors.too_short', { attribute: this.mobileLabel });
@@ -32,13 +31,12 @@ export class SallaTelInput {
   }
   /**
    * Get current values
-   * @return {{mobile:number,countryCode:'SA'|string, countryKey:'+966'|string}}
+   * @return {{mobile:number,countryCode:'SA'|string}}
    */
   async getValues() {
     return {
       mobile: this.mobile = this.phoneInput.value,
-      countryCode: this.countryCode = this.countryCodeInput.value,
-      countryKey: this.countryKey = this.countryKeyInput.value
+      countryCode: this.countryCode = this.countryCodeInput.value
     };
   }
   /**
@@ -72,7 +70,6 @@ export class SallaTelInput {
     this.phoneInput.addEventListener("countrychange", () => {
       let data = this.iti.getSelectedCountryData();
       this.countryCodeInput.value = data.iso2.toUpperCase();
-      this.countryKeyInput.value = ('+' + data.dialCode).replace('++', '+');
     });
     // on blur: validate
     this.phoneInput.addEventListener('blur', () => this.isValid());
@@ -91,8 +88,7 @@ export class SallaTelInput {
     return (h(Host, { id: "s-tel-input" },
       h("input", { type: "tel", name: "mobile", value: this.mobile, ref: el => this.phoneInput = el, class: "s-tel-input-control tel-input s-ltr" }),
       h("span", { class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }),
-      h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" }),
-      h("input", { type: "hidden", name: "country_key", value: this.countryKey, ref: el => this.countryKeyInput = el, class: "country_key" })));
+      h("input", { type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
   }
   componentDidLoad() {
     this.initTelInput();
@@ -139,24 +135,6 @@ export class SallaTelInput {
       "attribute": "country-code",
       "reflect": false,
       "defaultValue": "salla.config.get('user.country_code', 'SA')"
-    },
-    "countryKey": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "country-key",
-      "reflect": false,
-      "defaultValue": "\"+966\""
     }
   }; }
   static get states() { return {
@@ -188,14 +166,14 @@ export class SallaTelInput {
   static get methods() { return {
     "getValues": {
       "complexType": {
-        "signature": "() => Promise<{ mobile: string; countryCode: string; countryKey: string; }>",
+        "signature": "() => Promise<{ mobile: string; countryCode: string; }>",
         "parameters": [],
         "references": {
           "Promise": {
             "location": "global"
           }
         },
-        "return": "Promise<{ mobile: string; countryCode: string; countryKey: string; }>"
+        "return": "Promise<{ mobile: string; countryCode: string; }>"
       },
       "docs": {
         "text": "Get current values",

package/dist/components/salla-button2.js

@@ -3,7 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const sallaButtonCss = "salla-button{pointer-events:none}salla-button[type=submit]{-webkit-appearance:none}salla-button[width=wide]{width:100%}.s-button-wrap[loading]{pointer-events:none}.s-button-wrap[loading] .s-button-element{pointer-events:none !important}.s-button-wrap[loading] .s-button-loader-center .s-button-text{opacity:0}.s-button-wrap .s-button-element[loading]{pointer-events:none !important}.s-button-wrap .s-button-element:not(:disabled){pointer-events:auto}.s-button-wrap .s-button-solid .s-button-loader:before{border-color:#fff #fff rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.2)}.s-button-wrap .s-button-outline{border:1px solid currentColor}.s-button-wrap .s-button-outline:hover{border-color:transparent}.s-button-wrap .s-button-outline .s-button-loader:before{border-top-color:currentColor;border-left-color:currentColor}.s-button-wrap .s-button-icon.s-button-large{width:56px;height:56px}.s-button-wrap .s-button-icon.s-button-small{width:24px;height:24px}.s-button-wrap .s-button-icon.s-button-small .s-button-loader:before{width:0.85rem;height:0.85rem}.s-button-wrap .s-button-loader-after .s-button-load{flex-direction:row}.s-button-wrap .s-button-loader-start.s-button-element{padding-right:40px}.s-button-wrap .s-button-loader-start .s-button-loader{position:absolute;right:8px}.s-button-wrap .s-button-loader-start .s-button-loader [dir=ltr]{left:8px;right:auto}.s-button-wrap .s-button-loader-end.s-button-element{padding-left:40px}.s-button-wrap .s-button-loader-end .s-button-loader{position:absolute;left:8px}.s-button-wrap .s-button-loader-end .s-button-loader [dir=ltr]{right:8px;left:auto}.s-button-wrap .s-button-loader-center .s-button-loader{position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);margin:0 !important}";
+const sallaButtonCss = "salla-button{pointer-events:none}salla-button[type=submit]{-webkit-appearance:none}salla-button[width=wide]{width:100%}.s-button-wrap[loading]{pointer-events:none}.s-button-wrap[loading] .s-button-element{pointer-events:none !important}.s-button-wrap[loading] .s-button-loader-center .s-button-text{opacity:0}.s-button-wrap .s-button-element[loading]{pointer-events:none !important}.s-button-wrap .s-button-element:not(:disabled){pointer-events:auto}.s-button-wrap .s-button-solid .s-button-loader:before{border-color:#fff #fff rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.2)}.s-button-wrap .s-button-outline{border:1px solid currentColor}.s-button-wrap .s-button-outline:hover{border-color:transparent}.s-button-wrap .s-button-outline .s-button-loader:before{border-top-color:currentColor;border-left-color:currentColor}.s-button-wrap .s-button-icon.s-button-large{width:56px;height:56px}.s-button-wrap .s-button-icon.s-button-small{width:24px;height:24px}.s-button-wrap .s-button-icon.s-button-small .s-button-loader:before{width:0.85rem;height:0.85rem}.s-button-wrap .s-button-loader-after .s-button-load{flex-direction:row}.s-button-wrap .s-button-loader-start.s-button-element{padding-left:32px;padding-right:32px}.s-button-wrap .s-button-loader-start .s-button-loader{position:absolute;right:8px}.s-button-wrap .s-button-loader-start .s-button-loader [dir=ltr]{left:8px;right:auto}.s-button-wrap .s-button-loader-end.s-button-element{padding-left:32px;padding-right:32px}.s-button-wrap .s-button-loader-end .s-button-loader{position:absolute;left:8px}.s-button-wrap .s-button-loader-end .s-button-loader [dir=ltr]{right:8px;left:auto}.s-button-wrap .s-button-loader-center .s-button-loader{position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);margin:0 !important}";
 
 const SallaButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -11,7 +11,7 @@ const SallaButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.hostAttributes = {};
     /**
-     * Button Type todo :: find better name,
+     * Button Type
      */
     this.shape = 'btn';
     /**

package/dist/components/salla-conditional-fields.js

@@ -14,7 +14,6 @@ const SallaConditionalFields$1 = /*@__PURE__*/ proxyCustomElement(class extends
     var _a;
     salla.log('Received the change event: ', event);
     if (!event.target || !['SELECT'].includes(event.target.tagName) && !['checkbox'].includes(event.target.getAttribute('type'))) {
-      // todo :: support debug
       salla.log('Ignore the change because is not support input: ' + (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.tagName) || 'N/A'));
       return;
     }