@salla.sa/twilight-components 1.0.100 → 1.0.107

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3771e52a.js');
+const index = require('./index-b4140db0.js');
 
 const SallaConditionalFields = class {
   constructor(hostRef) {
@@ -13,6 +13,7 @@ const SallaConditionalFields = class {
   }
   changeHandler(event) {
     var _a;
+    console.log("🚀 ~ file: salla-conditional-fields.tsx ~ line 17 ~ SallaConditionalFields ~ changeHandler ~ changeHandler", event);
     salla.log('Received the change event: ', event);
     if (!event.target || !['SELECT'].includes(event.target.tagName) && !['checkbox'].includes(event.target.getAttribute('type'))) {
       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'));
@@ -21,7 +22,7 @@ const SallaConditionalFields = class {
     // to extract the option id from the input name, the supported names are name[*] and name[*][]
     let optionId = event.target.name.replace('[]', '');
     let isMultiple = event.target.getAttribute('type') === 'checkbox';
-    salla.log('Trying to find all the element with condation:', `[data-show-when^="${optionId}"]`);
+    salla.log('Trying to find all the element with condition:', `[data-show-when^="${optionId}"]`);
     this.host.querySelectorAll(`[data-show-when^="${optionId}"]`)
       .forEach((field) => {
       let isEqual = !(field === null || field === void 0 ? void 0 : field.dataset.showWhen.includes('!='));
@@ -70,6 +71,7 @@ const SallaConditionalFields = class {
       var _a;
       // @ts-ignore
       let optionName = (_a = field === null || field === void 0 ? void 0 : field.dataset) === null || _a === void 0 ? void 0 : _a.showWhen.replace(/(.*)(=|!=)(.*)/gm, '$1').trim();
+      console.log("🚀 ~ file: salla-conditional-fields.tsx ~ line 83 ~ SallaConditionalFields ~ this.host.querySelectorAll ~ optionName", optionName);
       if (!optionName) {
         return;
       }

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3771e52a.js');
+const index = require('./index-b4140db0.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}.salla-y #tabbyPromoWrapper{border:1px solid var(--color-grey-dark);border-radius:12px}#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;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)}.salla-y .tamara-product-widget,.salla-y .spotii-wrapper{border-radius:12px;border:1px solid var(--color-grey-dark)}.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}";
 

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3771e52a.js');
+const index = require('./index-b4140db0.js');
 const Helper = require('./Helper-8ae6a805.js');
 
 const sallaQuantityInputCss = "";
@@ -75,7 +75,7 @@ const SallaQuantityInput = class {
     return this.host;
   }
   render() {
-    return (index.h(index.Host, { class: "s-quantity-input s-quantity-input-container" }, index.h("button", { onClick: () => this.increase(), class: "s-quantity-input-button", type: "button" }, !this.hasIncrementSlot ? index.h("i", { class: "sicon-add" }) : '', index.h("slot", { name: "increment-button" })), index.h("input", Object.assign({ class: "s-quantity-input-input" }, this.getInputAttributes(), { ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), min: "1", value: this.quantity })), index.h("button", { class: "s-quantity-input-button", onClick: () => this.decrease(), type: "button" }, !this.hasDecrementSlot ? index.h("i", { class: "sicon-minus" }) : '', index.h("slot", { name: "decrement-button" }))));
+    return (index.h(index.Host, { class: "s-quantity-input s-quantity-input-container" }, index.h("button", { onClick: () => this.increase(), class: "s-quantity-input-increase-button", type: "button" }, !this.hasIncrementSlot ? index.h("i", { class: "sicon-add" }) : '', index.h("slot", { name: "increment-button" })), index.h("input", Object.assign({ class: "s-quantity-input-input" }, this.getInputAttributes(), { ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), min: "1", value: this.quantity })), index.h("button", { class: "s-quantity-input-decrease-button", onClick: () => this.decrease(), type: "button" }, !this.hasDecrementSlot ? index.h("i", { class: "sicon-minus" }) : '', index.h("slot", { name: "decrement-button" }))));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -3,10 +3,10 @@
  */
 'use strict';
 
-const index = require('./index-3771e52a.js');
+const index = require('./index-b4140db0.js');
 
 /*
- Stencil Client Patch Browser v2.15.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.17.1 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('twilight-components.cjs.js', document.baseURI).href));
@@ -18,5 +18,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["salla-add-product-button_6.cjs",[[4,"salla-add-product-button",{"channels":[513],"quantity":[514],"donatingAmount":[514,"donating-amount"],"productId":[520,"product-id"],"productStatus":[513,"product-status"],"productType":[513,"product-type"],"disabled":[516]}],[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32],"typing":[32],"debounce":[32],"search_term":[32]}],[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]}],[0,"salla-tel-input",{"phone":[1025],"name":[1],"countryCode":[1025,"country-code"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[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],"open":[64],"close":[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],"open":[64]},[[8,"verified","onVerified"]]]]],["salla-rating-modal.cjs",[[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"open":[64],"close":[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],"open":[64],"close":[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],"open":[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"],"autoload":[1028],"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-verify.cjs",[[4,"salla-verify",{"display":[1],"type":[1025],"autoReload":[4,"auto-reload"],"title":[32],"resendAfter":[32],"isProfileVerify":[32],"getCode":[64],"open":[64]}]]],["salla-rating-stars.cjs",[[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}]]]], options);
+  return index.bootstrapLazy([["salla-branches_13.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],"open":[64]},[[8,"verified","onVerified"]]],[0,"salla-rating-modal",{"orderId":[2,"order-id"],"order":[32],"open":[64],"close":[64]}],[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]}],[0,"salla-localization-modal",{"language":[1537],"currency":[1537],"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"isLoading":[32],"open":[64],"close":[64],"submit":[64]}],[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],"open":[64],"showOffer":[64]}],[0,"salla-search",{"inline":[4],"oval":[4],"height":[2],"results":[32],"placeholder":[32],"noResultsText":[32],"typing":[32],"debounce":[32],"search_term":[32]}],[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[1028],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}],[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]}],[4,"salla-verify",{"display":[1],"type":[1025],"autoReload":[4,"auto-reload"],"title":[32],"resendAfter":[32],"isProfileVerify":[32],"getCode":[64],"open":[64]}],[0,"salla-rating-stars",{"name":[1],"size":[1],"value":[2]}],[0,"salla-tel-input",{"phone":[1025],"name":[1],"countryCode":[1025,"country-code"],"mobileRequired":[32],"countryCodeLabel":[32],"mobileLabel":[32],"tooShort":[32],"tooLong":[32],"invalidCountryCode":[32],"invalidNumber":[32],"errorMap":[32],"getValues":[64],"isValid":[64]}],[4,"salla-button",{"shape":[513],"color":[513],"fill":[513],"size":[513],"width":[513],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"href":[1],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[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],"open":[64],"close":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-add-product-button.cjs",[[4,"salla-add-product-button",{"channels":[513],"quantity":[514],"donatingAmount":[514,"donating-amount"],"productId":[520,"product-id"],"productStatus":[513,"product-status"],"productType":[513,"product-type"]}]]],["salla-conditional-fields.cjs",[[4,"salla-conditional-fields",null,[[0,"change","changeHandler"]]]]],["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]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -20,7 +20,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.15.0",
+    "version": "2.17.1",
     "typescriptVersion": "4.5.4"
   },
   "collections": [],

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

@@ -11,10 +11,6 @@ export class SallaAddProductButton {
     this.donatingAmount = 0;
     this.productStatus = 'sale';
     this.productType = 'product';
-    /**
-     * Is the button currently disabled
-     */
-    this.disabled = false;
   }
   getLabel() {
     if (this.productStatus === 'sale') {
@@ -37,13 +33,20 @@ export class SallaAddProductButton {
      * but its work only when the id is the only value is passed via the object
      * so we will filter the object entities to remove null and zero values in case we don't want the normal add item action
      */
-    return salla.cart.quickAdd(Object.entries({
+    const data = Object.entries({
       id: this.productId,
       donating_amount: this.donatingAmount,
       quantity: this.quantity
-    }).reduce((a, [k, v]) => (v ? (a[k] = v, a) : a), {}))
-      .then((response) => this.success.emit(response))
-      .catch((error) => this.failed.emit(error));
+    }).reduce((a, [k, v]) => (v ? (a[k] = v, a) : a), {});
+    return salla.cart.quickAdd(data)
+      .then((response) => {
+      console.log("🚀 ~ file: salla-add-product-button.tsx ~ line 67 ~ SallaAddProductButton ~ .then ~ response", response);
+      return this.success.emit(response);
+    })
+      .catch((error) => {
+      console.log("🚀 ~ file: salla-add-product-button.tsx ~ line 70 ~ SallaAddProductButton ~ addProductToCart ~ error", error);
+      return this.failed.emit(error);
+    });
   }
   getBtnAttributes() {
     for (let i = 0; i < this.host.attributes.length; i++) {
@@ -60,12 +63,12 @@ export class SallaAddProductButton {
     return (h(Host, null, this.productStatus === 'out-and-notify' && this.channels ?
       h("salla-product-availability", Object.assign({}, this.getBtnAttributes()),
         h("slot", null)) :
-      h("salla-button", Object.assign({ ref: btn => this.btn = btn, onClick: event => this.addProductToCart(event), type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', color: this.productStatus === 'sale' ? 'primary' : 'light', "loader-position": "center" }, this.getBtnAttributes(), { disabled: this.productStatus !== 'sale' }),
+      h("salla-button", Object.assign({ ref: el => this.btn = el, onClick: event => this.addProductToCart(event), type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', color: this.productStatus === 'sale' ? 'primary' : 'light', "loader-position": "center" }, this.getBtnAttributes(), { disabled: this.productStatus !== 'sale' }),
         h("slot", null))));
   }
   componentDidRender() {
     //if label not passed, get label
-    this.hasLabel || salla.lang.onLoaded(() => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(this.getLabel() || 'اضافة للسلة'); });
+    this.hasLabel || salla.event.on('languages::translations.loaded', () => this.btn.setText(this.getLabel() || 'اضافة للسلة'));
   }
   static get is() { return "salla-add-product-button"; }
   static get originalStyleUrls() { return {
@@ -181,24 +184,6 @@ export class SallaAddProductButton {
       "attribute": "product-type",
       "reflect": true,
       "defaultValue": "'product'"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Is the button currently disabled"
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
     }
   }; }
   static get events() { return [{

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

@@ -1,7 +1,4 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-/*
 * Salla Branches Component: Store branches & warehouses popup modal
 * You can use these classes to target the elements in the component.
 */

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

@@ -4,7 +4,7 @@
 import { Component, h, Prop, Method, State, Element } from "@stencil/core";
 export class SallaBranches {
   constructor() {
-    this.open = false;
+    this.open = true;
     this.isOpenedBefore = salla.storage.get("branch-choosed-before");
     this.displayAs = 'default'; //todo:: change it to boolean, isPopup default false
     this.browseProductsFrom = 'all'; //todo:: get better name
@@ -38,10 +38,12 @@ export class SallaBranches {
   }
   //todo:: add description for all @methods
   async show() {
-    return this.modal.open();
+    var _a;
+    return (_a = this.modal) === null || _a === void 0 ? void 0 : _a.open();
   }
   async hide() {
-    return this.modal.close();
+    var _a;
+    return (_a = this.modal) === null || _a === void 0 ? void 0 : _a.close();
   }
   handelChange(event) {
     this.selected = event.target.value;
@@ -57,7 +59,9 @@ export class SallaBranches {
     }, 300);
   }
   render() {
-    return (h("salla-modal", { icon: "sicon-store-alt", "modal-title": "\u0641\u0631\u0639 \u0627\u0644\u0631\u064A\u0627\u0636", "sub-title": "\u0623\u0646\u062A \u0627\u0644\u0622\u0646 \u062A\u062A\u0635\u0641\u062D \u0627\u0644\u0645\u062A\u062C\u0631 \u0645\u0646", "sub-title-first": true, "is-closable": !this.isOpenedBefore && this.displayAs == 'popup' ? 'false' : 'true', ref: modal => this.modal = modal, width: "sm", id: "s-branches-modal", class: "s-hidden" },
+    return (h("salla-modal", { icon: "sicon-store-alt", "modal-title": "\u0641\u0631\u0639 \u0627\u0644\u0631\u064A\u0627\u0636", "sub-title": "\u0623\u0646\u062A \u0627\u0644\u0622\u0646 \u062A\u062A\u0635\u0641\u062D \u0627\u0644\u0645\u062A\u062C\u0631 \u0645\u0646", "sub-title-first": true, 
+      // is-closable={!this.isOpenedBefore && this.displayAs == 'popup' ? 'false' : 'true'}
+      ref: (modal) => this.modal = modal, width: "sm", id: "s-branches-modal", class: "s-hidden" },
       h("h4", { class: "s-branches-title" }, this.formTitle()),
       this.branches.length <= 5 ?
         h("div", { class: "s-branches-space-v" }, this.branches.map((branch) => h("div", { class: "s-branches-input-wrap" },
@@ -165,7 +169,7 @@ export class SallaBranches {
         "tags": [],
         "text": ""
       },
-      "defaultValue": "[\n    {id: 1, name: '\u0641\u0631\u0639 \u0627\u0644\u0631\u064A\u0627\u0636', open: true, available: true, limited: false, tag: '\u0645\u062A\u0648\u0641\u0631'},\n    {id: 2, name: '\u0641\u0631\u0639 \u062C\u062F\u0629', open: false, available: false, limited: false, tag: '\u063A\u064A\u0631 \u0645\u062A\u0648\u0641\u0631'},\n    {id: 3, name: '\u0641\u0631\u0639 \u0645\u0643\u0629', open: true, available: true, limited: false, tag: '\u0645\u062A\u0648\u0641\u0631'},\n    {id: 4, name: '\u0641\u0631\u0639 \u0627\u0644\u0645\u062F\u064A\u0646\u0629', open: true, available: true, limited: false, tag: '\u0645\u062A\u0648\u0641\u0631'},\n    {id: 5, name: '\u0641\u0631\u0639 \u062C\u0627\u0632\u0627\u0646', open: true, available: true, limited: true, tag: '\u0627\u0644\u0643\u0645\u064A\u0629 \u0645\u062D\u062F\u0648\u062F\u0629'}\n  ]"
+      "defaultValue": "[\n    { id: 1, name: '\u0641\u0631\u0639 \u0627\u0644\u0631\u064A\u0627\u0636', open: true, available: true, limited: false, tag: '\u0645\u062A\u0648\u0641\u0631' },\n    { id: 2, name: '\u0641\u0631\u0639 \u062C\u062F\u0629', open: false, available: false, limited: false, tag: '\u063A\u064A\u0631 \u0645\u062A\u0648\u0641\u0631' },\n    { id: 3, name: '\u0641\u0631\u0639 \u0645\u0643\u0629', open: true, available: true, limited: false, tag: '\u0645\u062A\u0648\u0641\u0631' },\n    { id: 4, name: '\u0641\u0631\u0639 \u0627\u0644\u0645\u062F\u064A\u0646\u0629', open: true, available: true, limited: false, tag: '\u0645\u062A\u0648\u0641\u0631' },\n    { id: 5, name: '\u0641\u0631\u0639 \u062C\u0627\u0632\u0627\u0646', open: true, available: true, limited: true, tag: '\u0627\u0644\u0643\u0645\u064A\u0629 \u0645\u062D\u062F\u0648\u062F\u0629' }\n  ]"
     },
     "current": {
       "type": "number",

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

@@ -1,7 +1,4 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-/*
 * Salla Button Component: has many sizes, styles and loading state.
 * You can use these classes to target the elements in the component.
 */

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

@@ -9,6 +9,7 @@ import { Component, Element, Host, Listen, h } from '@stencil/core';
 export class SallaConditionalFields {
   changeHandler(event) {
     var _a;
+    console.log("🚀 ~ file: salla-conditional-fields.tsx ~ line 17 ~ SallaConditionalFields ~ changeHandler ~ changeHandler", event);
     salla.log('Received the change event: ', event);
     if (!event.target || !['SELECT'].includes(event.target.tagName) && !['checkbox'].includes(event.target.getAttribute('type'))) {
       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'));
@@ -17,7 +18,7 @@ export class SallaConditionalFields {
     // to extract the option id from the input name, the supported names are name[*] and name[*][]
     let optionId = event.target.name.replace('[]', '');
     let isMultiple = event.target.getAttribute('type') === 'checkbox';
-    salla.log('Trying to find all the element with condation:', `[data-show-when^="${optionId}"]`);
+    salla.log('Trying to find all the element with condition:', `[data-show-when^="${optionId}"]`);
     this.host.querySelectorAll(`[data-show-when^="${optionId}"]`)
       .forEach((field) => {
       let isEqual = !(field === null || field === void 0 ? void 0 : field.dataset.showWhen.includes('!='));
@@ -66,6 +67,7 @@ export class SallaConditionalFields {
       var _a;
       // @ts-ignore
       let optionName = (_a = field === null || field === void 0 ? void 0 : field.dataset) === null || _a === void 0 ? void 0 : _a.showWhen.replace(/(.*)(=|!=)(.*)/gm, '$1').trim();
+      console.log("🚀 ~ file: salla-conditional-fields.tsx ~ line 83 ~ SallaConditionalFields ~ this.host.querySelectorAll ~ optionName", optionName);
       if (!optionName) {
         return;
       }

package/dist/collection/components/salla-infinite-scroll/salla-infinite-scroll.css

@@ -1,7 +1,4 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-/*
 * Salla Infinite Scroll Component: used in latest-products page, comments, brands, orders and so on..
 * You can use these classes to target the elements in the component.
 */

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

@@ -1,6 +1,3 @@
-/*
-* Global flags style [imported from Int-tel-input]
-*/
 /*
   The whole installment methods is a third-party widgets, 
   So there aren't a custom classes (as other components) to style them.

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

@@ -1,7 +1,4 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-/*
 * Salla Localization Component: Languages & Currencies popup modal
 * You can use these classes to target the elements in the component.
 */
@@ -1067,7 +1064,7 @@
 .iti__flag {
   height: 15px;
   box-shadow: 0px 0px 1px 0px #888;
-  background-image: url("https://intl-tel-input.com/node_modules/intl-tel-input/build/img/flags.png");
+  background-image: url("https://cdn.salla.network/images/flags.png");
   background-repeat: no-repeat;
   background-color: #f5f7f9;
   background-position: 20px 0;
@@ -1075,7 +1072,7 @@
 
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   .iti__flag {
-    background-image: url("https://intl-tel-input.com/node_modules/intl-tel-input/build/img/flags@2x.png");
+    background-image: url("https://cdn.salla.network/images/flags@2x.png");
   }
 }
 .iti__flag.iti__np {

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

@@ -41,7 +41,8 @@ export class SallaLocalizationModal {
    * open the component
    */
   async open() {
-    return this.modal.open()
+    console.log("🚀 ~ file: salla-localization-modal.tsx ~ line 59 ~ SallaLocalizationModal ~ open ~ this.modal", this.modal);
+    return await this.modal.open()
       .then(() => this.getLanguages())
       .then(() => this.getCurrencies())
       .then(() => this.isLoading = false);
@@ -98,7 +99,7 @@ export class SallaLocalizationModal {
                     .replace(/\{name\}/g, lang.name)
                     .replace(/\{code\}/g, lang.code)
                     .replace(/\{country_code\}/g, lang.country_code) }))) :
-              h("select", { class: "s-localization-modal-select", name: "currency", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => h("option", { value: lang.code, selected: this.language == lang.code }, lang.name)))))
+              h("select", { class: "s-localization-modal-select", name: "language", onChange: e => this.onChangeLanguage(e) }, this.languages.map(lang => h("option", { value: lang.code, selected: this.language == lang.code }, lang.name)))))
           : '',
         this.currencies.length > 1 ?
           h("div", { class: "s-localization-modal-section" },

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

@@ -1,7 +1,4 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-/*
 * Salla Login Component: login popup modal
 * You can use these classes to target the elements in the component.
 */

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

@@ -93,7 +93,7 @@ export class SallaLoginModal {
     salla.auth.event.onVerificationFailed(() => {
       //
     });
-    salla.event.on('login::open', () => this.open());
+    salla.event.on('login::open', (event) => this.open(event));
     salla.event.on('twilight::initiated', () => {
       this.isEmailAllowed = salla.config.get('store.settings.auth.email_allowed', !!this.isEmailAllowed);
       this.isMobileAllowed = salla.config.get('store.settings.auth.mobile_allowed', !!this.isMobileAllowed);
@@ -127,7 +127,15 @@ export class SallaLoginModal {
   /**
    * Open login component
    */
-  async open() {
+  // @ts-ignore
+  async open(event = null) {
+    // if(event && event.hasOwnProperty('isEmailAllowed')){
+    //   this.isEmailAllowed = event?.isEmailAllowed;
+    // }
+    //
+    // if(event && event.hasOwnProperty('isMobileAllowed')){
+    //   this.isMobileAllowed = event?.isMobileAllowed;
+    // }
     if (this.isEmailAllowed && this.isMobileAllowed) {
       this.showTab(this.homeTab);
     }
@@ -220,7 +228,7 @@ export class SallaLoginModal {
               : '',
             h("slot", { name: "after-login-email" })) : '',
         h("salla-verify", { display: "inline", ref: tab => this.verifyTab = tab, autoReload: false },
-          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("a", { onClick: () => this.showTab(this.regType == 'phone' ? this.mobileTab : this.emailTab), class: "s-verify-back sicon-arrow-right", slot: "after-footer", href: "#" })),
         h("div", { ref: tab => this.registrationTab = tab },
           h("slot", { name: "before-registration" }),
           h("div", null,
@@ -323,8 +331,11 @@ export class SallaLoginModal {
   static get methods() { return {
     "open": {
       "complexType": {
-        "signature": "() => Promise<HTMLElement>",
-        "parameters": [],
+        "signature": "(event?: any) => Promise<HTMLElement>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
         "references": {
           "Promise": {
             "location": "global"

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

@@ -1,7 +1,4 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-/*
 * Salla Modal Component: popup modal used in most parts of the theme
 * You can use these classes to target the elements in the component.
 */

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

@@ -8,7 +8,7 @@ import Helper from "../../Helpers/Helper";
  */
 export class SallaModal {
   constructor() {
-    this.isClosable = true; //todo::rename unclude
+    this.isClosable = true; //todo::rename unclude. Suggestion => persistent
     /**
      * The size of the modal
      */
@@ -138,16 +138,17 @@ export class SallaModal {
                   h("button", { class: "s-modal-close", onClick: () => this.closeModal(), type: "button" },
                     h("span", { class: "sicon-cancel" }))
                   : '',
-                this.modalTitle || this.subTitle ?
-                  h("div", { class: "s-modal-header-inner" },
-                    this.iconStyle || this.icon
-                      ? h("div", { class: this.iconBlockClasses() },
-                        h("i", { class: this.iconClasses() }))
-                      : this.imageIcon ? h("img", { class: "s-modal-header-img", src: this.imageIcon }) : '',
-                    h("div", { class: "s-modal-header-content" },
-                      h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.modalTitle }),
-                      h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))
-                  : ''),
+                h("div", { class: "s-modal-header-inner" },
+                  this.iconStyle || this.icon
+                    ? h("div", { class: this.iconBlockClasses() },
+                      h("i", { class: this.iconClasses() }))
+                    : this.imageIcon ? h("img", { class: "s-modal-header-img", src: this.imageIcon }) : '',
+                  h("div", { class: "s-modal-header-content" },
+                    h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.modalTitle }),
+                    h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))
+              // : ''
+              ,
+                "// : ''"),
               h("slot", null),
               h("slot", { name: "footer" })
             ]))));

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

@@ -1,7 +1,4 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-/*
 * Salla Offer Modal Component: popup modal to display the offers
 * You can use these classes to target the elements in the component.
 */

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

@@ -54,6 +54,7 @@ export class SallaOfferModal {
     return this.modal.open();
   }
   rememberMe(event) {
+    console.log("🚀 ~ file: salla-offer-modal.tsx ~ line 75 ~ SallaOfferModal ~ rememberMe ~ rememberMe", event);
     salla.storage.set('remember-offer-' + this.offer.id, event.target.checked);
   }
   //todo:: pass event then use sallaButton from it

package/dist/collection/components/salla-product-availability/salla-product-availability.css

@@ -1,7 +1,4 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-/*
 * Salla Product Availability Component: popup modal to notify user if the product is available,
 * used in the product single page if the product isn't available.
 * You can use these classes to target the elements in the component.

package/dist/collection/components/salla-product-availability/salla-product-availability.js

@@ -17,6 +17,7 @@ export class SallaProductAvailability {
     this.isSubscribed = false;
     // @Method()
     this.submit = async () => {
+      console.log("🚀 ~ file: salla-product-availability.tsx ~ line 74 ~ SallaProductAvailability ~ submit= ~ submit");
       if (this.isUser) {
         return salla.api.product.availabilitySubscribe(this.productId)
           .then(() => this.isSubscribed = true);
@@ -72,21 +73,25 @@ export class SallaProductAvailability {
     this.isVisitorSubscribed = salla.storage.get(`product-${this.productId}-subscribed`);
   }
   channelsWatcher(newValue) {
-    this.channels_ = newValue.split(',');
+    this.channels_ = !!newValue ? newValue.split(',') : [];
   }
   async validateform() {
-    if (this.channels_.includes('email')) {
-      const isEmailValid = Helper.isValidEmail(this.email.value);
-      if (isEmailValid)
-        return;
-      !isEmailValid && this.validateField(this.email, this.emailErrorMsg);
+    try {
+      if (this.channels_.includes('email')) {
+        const isEmailValid = Helper.isValidEmail(this.email.value);
+        if (isEmailValid)
+          return;
+        !isEmailValid && this.validateField(this.email, this.emailErrorMsg);
+      }
+      if (this.channels_.includes('sms')) {
+        const isPhoneValid = await this.mobileInput.isValid();
+        if (isPhoneValid)
+          return;
+      }
     }
-    if (this.channels_.includes('sms')) {
-      const isPhoneValid = await this.mobileInput.isValid();
-      if (isPhoneValid)
-        return;
+    catch (error) {
+      throw ('Please insert required fields');
     }
-    throw ('Please insert required fields');
   }
   validateField(field, errorMsg) {
     field.classList.add('s-has-error');
@@ -116,8 +121,8 @@ export class SallaProductAvailability {
           h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e, this.submit) })
         ] : ''),
       h("div", { slot: "footer", class: "s-product-availability-footer" },
-        h("salla-button", { width: "wide", color: "light", fill: "outline", onClick: () => this.modal.close(), ref: btn => this.cancelBtn = btn }, salla.lang.get('common.elements.cancel')),
-        h("salla-button", { "loader-position": 'center', width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.submit')))));
+        h("salla-button", { class: "modal-cancel-btn", width: "wide", color: "light", fill: "outline", onClick: () => this.modal.close(), ref: btn => this.cancelBtn = btn }, salla.lang.get('common.elements.cancel')),
+        h("salla-button", { class: "submit-btn", "loader-position": 'center', width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.submit')))));
   }
   static get is() { return "salla-product-availability"; }
   static get originalStyleUrls() { return {

package/dist/collection/components/salla-quantity-input/salla-quantity-input.css

@@ -1,7 +1,4 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-/*
 * Salla Qunatity Input Component: quantity input with increase & decrease buttons.
 * You can use these classes to target the elements in the component.
 */

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

@@ -68,11 +68,11 @@ export class SallaQuantityInput {
   }
   render() {
     return (h(Host, { class: "s-quantity-input s-quantity-input-container" },
-      h("button", { onClick: () => this.increase(), class: "s-quantity-input-button", type: "button" },
+      h("button", { onClick: () => this.increase(), class: "s-quantity-input-increase-button", type: "button" },
         !this.hasIncrementSlot ? h("i", { class: "sicon-add" }) : '',
         h("slot", { name: "increment-button" })),
       h("input", Object.assign({ class: "s-quantity-input-input" }, this.getInputAttributes(), { ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), min: "1", value: this.quantity })),
-      h("button", { class: "s-quantity-input-button", onClick: () => this.decrease(), type: "button" },
+      h("button", { class: "s-quantity-input-decrease-button", onClick: () => this.decrease(), type: "button" },
         !this.hasDecrementSlot ? h("i", { class: "sicon-minus" }) : '',
         h("slot", { name: "decrement-button" }))));
   }

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

@@ -1,7 +1,4 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-/*
 * Salla Rating Component: Order rating modal, used in the order single page
 * You can use these classes to target the elements in the component.
 */

package/dist/collection/components/salla-rating-stars/salla-rating-stars.css

@@ -1,7 +1,4 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-/*
 * Salla Rating Stars Component: Rating starts as rating input or to display rating values.
 * You can use these classes to target the elements in the component.
 */

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

@@ -1,7 +1,4 @@
 /*
-* Global flags style [imported from Int-tel-input]
-*/
-/*
 * Salla Search Component: Site search modal.
 * You can use these classes to target the elements in the component.
 */