@salla.sa/twilight-components 1.0.33 → 1.0.35

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const sallaSearch = require('./salla-search-62921989.js');
+const sallaSearch = require('./salla-search-6738ec5e.js');
 require('./index-714023c8.js');
 require('./Helper-98cc9f18.js');
 

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["salla-button_7.cjs",[[0,"salla-login",{"isEmailAllowed":[4,"is-email-allowed"],"isMobileAllowed":[4,"is-mobile-allowed"],"isEmailRequired":[4,"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"],[0,"backClicked","onbackClicked"]]],[4,"salla-localization",{"languagesTitle":[32],"currenciesTitle":[32],"show":[64],"hide":[64],"submit":[64]}],[0,"salla-search",{"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[0,"salla-verify",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"isShowBack":[4,"is-show-back"],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}],[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]}],[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"setText":[64],"stop":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"error":[4],"success":[4],"primary":[4],"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],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-product-availability.cjs",[[4,"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]}]]],["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],"ok":[32],"show":[64],"hide":[64]}]]],["salla-offer.cjs",[[0,"salla-offer",{"offer":[32],"show":[64],"showOffer":[64]}]]],["salla-rating.cjs",[[0,"salla-rating",{"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[4],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]]], options);
+  return index.bootstrapLazy([["salla-button_7.cjs",[[4,"salla-login",{"isEmailAllowed":[4,"is-email-allowed"],"isMobileAllowed":[4,"is-mobile-allowed"],"isEmailRequired":[4,"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"]]],[4,"salla-localization",{"languages":[32],"currencies":[32],"languagesTitle":[32],"currenciesTitle":[32],"show":[64],"hide":[64],"submit":[64]}],[0,"salla-search",{"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]],[4,"salla-verify",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"autoReload":[4,"auto-reload"],"title":[32],"getCode":[64],"show":[64]}],[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]}],[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[64],"stop":[64],"setText":[64],"disable":[64],"enable":[64]}],[4,"salla-modal",{"error":[4],"success":[4],"primary":[4],"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],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[64]}]]],["salla-product-availability.cjs",[[4,"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]}]]],["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-offer.cjs",[[0,"salla-offer",{"offer":[32],"show":[64],"showOffer":[64]}]]],["salla-rating.cjs",[[0,"salla-rating",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll.cjs",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[4],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]]], options);
   });
 };
 

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

@@ -11,8 +11,8 @@ const SallaBranches = class {
     index.registerInstance(this, hostRef);
     this.open = false;
     this.isOpenedBefore = salla.localData.get("branch-choosed-before");
-    this.displayAs = 'default';
-    this.browseProductsFrom = 'all';
+    this.displayAs = 'default'; //todo:: change it to boolean, isPopup default false
+    this.browseProductsFrom = 'all'; //todo:: get better name
     this.branches = [
       { id: 1, name: 'فرع الرياض', open: true, available: true, limited: false, tag: 'متوفر' },
       { id: 2, name: 'فرع جدة', open: false, available: false, limited: false, tag: 'غير متوفر' },
@@ -39,10 +39,9 @@ const SallaBranches = class {
         : 'التسوق من فرع آخر';
     };
     salla.event.on('branches::show', () => this.show());
-    salla.event.on('languages::translations.loaded', () => {
-      this.ok = salla.lang.get('common.elements.ok');
-    });
+    salla.event.on('languages::translations.loaded', () => { var _a; return (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('common.elements.ok')); });
   }
+  //todo:: add description for all @methods
   async show() {
     return this.modal.show();
   }
@@ -63,11 +62,11 @@ const SallaBranches = class {
     }, 300);
   }
   render() {
-    return (index.h("salla-modal", { icon: "sicon-store-alt", 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: "hidden" }, index.h("h4", { class: "s-branches-title" }, this.formTitle()), this.branches.length <= 5 ?
+    return (index.h("salla-modal", { icon: "sicon-store-alt", 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" }, index.h("h4", { class: "s-branches-title" }, this.formTitle()), this.branches.length <= 5 ?
       index.h("div", { class: "s-branches-space-v" }, this.branches.map((branch) => index.h("div", { class: "s-branches-input-wrap" }, index.h("input", { id: this.position + '_branch_' + branch.id, disabled: !branch.open && this.isChoiceable(), name: "lang", type: "radio", value: branch.id, onChange: (event) => this.handelChange(event), class: {
           's-branches-input': true,
           'opacity-50': !branch.open,
-          'hidden': !this.isChoiceable()
+          's-hidden': !this.isChoiceable()
         }, checked: this.current == branch.id }), index.h("label", { htmlFor: this.position + '_branch_' + branch.id, class: {
           's-branches-label': true,
           's-branches-clickable': this.isChoiceable()
@@ -77,7 +76,7 @@ const SallaBranches = class {
           index.h("span", { class: this.statusColor(branch) }, branch.tag)))))
       :
         index.h("select", { class: "s-branches-select", onInput: (event) => this.handelChange(event) }, this.branches.map(branch => (index.h("option", { value: branch.id, disabled: !branch.open, selected: this.selected == branch.id }, branch.name, " ", branch.open ? '' : '- مُغلق')))), this.isChoiceable() ?
-      index.h("slot", { name: "footer" }, index.h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit", wide: true }, this.ok))
+      index.h("slot", { name: "footer" }, index.h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit", wide: true }, salla.lang.get('common.elements.ok')))
       : ''));
   }
   componentDidRender() {

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

@@ -4,20 +4,34 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-714023c8.js');
 const Helper = require('./Helper-98cc9f18.js');
-const sallaSearch = require('./salla-search-62921989.js');
+const sallaSearch = require('./salla-search-6738ec5e.js');
 
 const sallaButtonCss = ":host{display:block}";
 
 const SallaButton = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * Button Style
+     */
     this.btnStyle = 'primary';
+    /**
+     * Is the button currently loading
+     */
     this.loading = false;
+    /**
+     * Is the button currently disabled
+     */
     this.disabled = false;
+    /**
+     * If there is need to change loader position, pass the position
+     */
     this.loaderPosition = 'before';
+    /**
+     * Is the button wide
+     */
     this.wide = false;
     this.hostAttributes = {};
-    //============= Initiate Button Attributes =============//
     for (let i = 0; i < this.host.attributes.length; i++) {
       this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
     }
@@ -25,33 +39,50 @@ const SallaButton = class {
     this.hostAttributes.class += ' s-button-btn btn--has-loading'
       + ' s-button-' + this.btnStyle
       + (this.wide ? ' s-button-wide ' : '')
-      + ' loader-' + this.loaderPosition
+      + ' loader-' + this.loaderPosition //todo:: it looks there is no need for this class🤔
       + (this.loaderPosition == 'before' ? ' s-button-loader-after' : '');
     delete this.hostAttributes['btn-style'];
     delete this.hostAttributes['id'];
+    delete this.hostAttributes['data-on-click'];
     if (this.wide) {
       this.host.classList.add('s-button-wide');
     }
   }
+  /**
+   * Run loading animation
+   */
   async load() {
     if (this.loaderPosition == 'center')
       this.text.classList.add('s-button-hide');
     this.host.setAttribute('loading', '');
     return this.host;
   }
-  async setText(html) {
-    this.text.innerHTML = html;
-    return this.host;
-  }
+  /**
+   * Stop loading animation
+   */
   async stop() {
     this.host.removeAttribute('loading');
     if (this.loaderPosition == 'center')
       this.text.classList.remove('s-button-hide');
     return this.host;
   }
+  /**
+   * Changing the body of the button
+   * @param html
+   */
+  async setText(html) {
+    this.text.innerHTML = html;
+    return this.host;
+  }
+  /**
+   * Add `disabled` attribute
+   */
   async disable() {
     this.host.setAttribute('disabled', '');
   }
+  /**
+   * Remove `disabled` attribute
+   */
   async enable() {
     this.host.removeAttribute('disabled');
   }
@@ -89,6 +120,8 @@ const SallaLocalization = class {
     var _a, _b;
     this.language = salla.config.get('language', {});
     this.currency = salla.config.get('currency', {});
+    this.languages = [];
+    this.currencies = [];
     Helper.Helper.setHost(this.host);
     salla.event.on('localization::show', () => this.show());
     salla.event.on('languages::translations.loaded', () => {
@@ -108,15 +141,27 @@ const SallaLocalization = class {
      */
     this.languageSlot = ((_a = Helper.Helper.getElement('[slot="language"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<label class="s-localization-label" for="lang-{code}"><span>{name}</span><div class="s-localization-flag flag iti__flag iti__{country_code}"></div></label>';
     this.currencySlot = ((_b = Helper.Helper.getElement('[slot="currency"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || '<label class="s-localization-label" for="currency-{code}"><span>{name}</span><small class="s-localization-currency">{code}</small></label>';
-    this.languages = Object.values(salla.config.get('languages', {}));
-    this.currencies = Object.values(salla.config.get('currencies', {}));
   }
+  /**
+   * Show the component
+   */
   async show() {
-    return this.modal.show();
+    return this.getLanguages()
+      .then(() => this.getCurrencies())
+      .then(() => this.modal.show());
   }
+  /**
+   * Hide the component
+   */
   async hide() {
     return this.modal.hide();
   }
+  async getLanguages() {
+    return this.languages.length > 1 ? null : await salla.config.languages().then(data => this.languages = data);
+  }
+  async getCurrencies() {
+    return this.currencies.length > 1 ? null : await salla.config.currencies().then(data => this.currencies = data);
+  }
   onChangeCurrency(event) {
     this.currency = salla.config.get('currencies.' + event.target.value);
   }
@@ -125,16 +170,16 @@ const SallaLocalization = class {
   }
   async submit() {
     let url;
-    console.log('this.currency.code::::', this.currency, this.currency.code);
+    console.log('this.currency.code::::', this.currency, this.currency.code); //todo:: remove it
     this.btn.load()
-      .then(() => this.currency.code === salla.config.get('user.currency') || ((url = window.location.href) && salla.currency.api.change(this.currency.code)))
-      .then(() => this.language.code === salla.config.get('user.language') || (url = this.language.url))
+      .then(() => this.currency.code === salla.config.get('user.currency_code', 'SAR') || ((url = window.location.href) && salla.currency.api.change(this.currency.code)))
+      .then(() => this.language.code === salla.config.get('user.language_code', 'ar') || (url = this.language.url))
       .then(() => this.btn.stop())
       .then(() => this.hide())
       .then(() => url && (window.location.href = url));
   }
   render() {
-    return (index.h("salla-modal", { id: "salla-localization", class: "hidden", ref: modal => this.modal = modal, width: "xs" }, index.h("div", { slot: "header" }, index.h("slot", { name: "header" })), index.h("div", { class: "s-localization-inner" }, this.languages.length > 1 ?
+    return (index.h("salla-modal", { id: "salla-localization", class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, index.h("div", { slot: "header" }, index.h("slot", { name: "header" })), index.h("div", { class: "s-localization-inner" }, this.languages.length > 1 ?
       index.h("div", { class: "s-localization-section" }, index.h("label", { class: "s-localization-title" }, this.languagesTitle), index.h("div", { class: "s-localization-section-inner" }, this.languages.length < 6 ?
         this.languages.map(lang => index.h("div", { class: "s-localization-item" }, index.h("input", { class: "s-localization-input", type: "radio", checked: this.language.code == lang.code, onChange: () => this.language = lang, name: "language", id: 'lang-' + lang.code.toLowerCase(), value: lang.code }), index.h("div", { id: "language-slot", innerHTML: this.languageSlot
             .replace(/\{name\}/g, lang.name)
@@ -167,27 +212,43 @@ const SallaModal = class {
     index.registerInstance(this, hostRef);
     this.modalOpened = index.createEvent(this, "modalOpened", 7);
     this.modalClosed = index.createEvent(this, "modalClosed", 7);
-    var _a;
     //todo:: unite three colors (error, success, primary) in one prop
     this.error = false;
     this.success = false;
     this.primary = false;
-    this.isClosable = true;
+    this.isClosable = true; //todo::rename unclude
+    /**
+     * The size of the modal
+     */
     this.width = 'md';
-    this.position = 'middel';
+    /**
+     * The position of the modal
+     */
+    this.position = 'middle';
+    /**
+     * Show the modal on rendering
+     */
     this.visible = false;
+    /**
+     * Show loading in the middle
+     */
     this.isLoading = false;
-    this.subTitleFirst = false;
-    this.noPadding = false;
+    this.subTitleFirst = false; //todo:: choose better name
+    this.noPadding = false; //todo:: choose better name
     this.subTitle = '';
+    /**
+     * Icon css class, default for types `error` is `sicon-alert-engine`, `success` is `sicon-check-circle2`
+     */
     this.icon = '';
+    /**
+     * url of an image
+     */
     this.imageIcon = '';
     Helper.Helper.setHost(this.host);
     salla.event.on('modal::open', btn => btn.dataset.target == this.host.id && this.show());
     salla.event.on('modal::close', btn => btn.dataset.target == this.host.id && this.hide());
     this.title = this.host.title;
     this.host.removeAttribute('title');
-    (_a = Helper.Helper.getElement('[slot=body]')) === null || _a === void 0 ? void 0 : _a.classList.add('s-modal-body', 's-modal-' + this.width);
   }
   handleVisible(newValue) {
     if (!newValue) {
@@ -199,30 +260,44 @@ const SallaModal = class {
     setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
     this.modalOpened.emit();
   }
+  /**
+   * Show the modal
+   */
   async show() {
     this.host.setAttribute('visible', '');
     return this.host;
   }
+  /**
+   * hide the modal
+   */
   async hide() {
     this.host.removeAttribute('visible');
     return this.host;
   }
+  /**
+   * Change the title
+   * @param {string} title
+   */
   async setTitle(title) {
     this.title = title;
     return this.host;
   }
+  /**
+   * Start loading
+   */
   async loading() {
     this.isLoading = true;
     return this.host;
   }
+  /**
+   * Stop the loading
+   */
   async stopLoading() {
     this.isLoading = false;
     return this.host;
   }
   toggleModal(isOpen) {
-    Helper.Helper
-      // .toggleElement(this.host.querySelector('.s-modal-body'), 's-modal-entering', 's-modal-leaving', () => isOpen)
-      .toggleElement(this.host.querySelector('[slot=body]') || this.host, 's-modal-entering', 's-modal-leaving', () => isOpen)
+    Helper.Helper.toggleElement(this.host, 's-modal-entering', 's-modal-leaving', () => isOpen)
       .toggleElement(this.overlay, 's-modal-entering', 's-modal-overlay-leaving', () => isOpen)
       //todo:: use united class names
       .toggleElement(document.body, 'modal-is-open', 'modal-is-closed', () => isOpen);
@@ -236,34 +311,36 @@ const SallaModal = class {
     }
     this.host.removeAttribute('visible');
   }
+  iconBlockClasses() {
+    return {
+      's-modal-icon': true,
+      's-modal-bg-error': this.error,
+      's-modal-bg-success': this.success,
+      's-modal-bg-normal': !this.error && !this.success,
+      's-modal-bg-primary': this.primary
+    };
+  }
+  iconClasses() {
+    return {
+      [this.icon]: true,
+      's-modal-text-error': this.error,
+      's-modal-text-success': this.success,
+      'sicon-alert-engine': !this.icon && this.error && !this.imageIcon,
+      'sicon-check-circle2': !this.icon && this.success && !this.imageIcon,
+    };
+  }
   //todo:: pref for each modal
   render() {
     this.host.id = this.host.id || 'salla-modal';
-    return (
-    //todo:: use suitable class name instead of hidden
-    index.h(index.Host, { class: 's-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, index.h("div", { class: "s-modal-wrapper" }, index.h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), index.h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), index.h("div", { class: 's-modal-body s-modal-scroll-y ' + 's-modal-align-' + this.position + ' s-modal-' + this.width + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding'), slot: "body" }, this.isLoading
+    return (index.h(index.Host, { class: 's-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, index.h("div", { class: "s-modal-wrapper" }, index.h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), index.h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), index.h("div", { class: 's-modal-body s-modal-scroll-y ' + 's-modal-align-' + this.position + ' s-modal-' + this.width + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, this.isLoading
       ? index.h("div", { class: "s-modal-loader-wrap" }, index.h("span", { class: "s-modal-loader" }))
       :
         [index.h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } }, this.isClosable ?
             index.h("button", { class: "s-modal-close", onClick: () => this.closeModal(), type: "button" }, index.h("span", { class: "sicon-cancel" }))
             : '', this.title || this.subTitle ?
             index.h("div", { class: "s-modal-header-inner" }, this.error || this.success || this.icon
-              ? index.h("div", { class: {
-                  's-modal-icon': true,
-                  's-modal-bg-error': this.error,
-                  's-modal-bg-success': this.success,
-                  's-modal-bg-normal': !this.error && !this.success,
-                  's-modal-bg-primary': this.primary
-                } }, index.h("i", { class: {
-                  [this.icon]: true,
-                  's-modal-text-error': this.error,
-                  's-modal-text-success': this.success,
-                  'sicon-alert-engine': !this.icon && this.error,
-                  'sicon-check-circle2': !this.icon && this.success,
-                } }))
-              : this.imageIcon ?
-                index.h("img", { class: "s-modal-header-img", src: this.imageIcon })
-                : '', index.h("div", { class: "s-modal-header-content" }, index.h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.title }), index.h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))
+              ? index.h("div", { class: this.iconBlockClasses() }, index.h("i", { class: this.iconClasses() }))
+              : this.imageIcon ? index.h("img", { class: "s-modal-header-img", src: this.imageIcon }) : '', index.h("div", { class: "s-modal-header-content" }, index.h("div", { class: { 's-modal-title': true, 's-modal-title-below': this.subTitleFirst }, innerHTML: this.title }), index.h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))
             : ''),
           index.h("slot", null),
           index.h("slot", { name: "footer" })
@@ -1653,8 +1730,11 @@ const SallaTelInput = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.enterClicked = index.createEvent(this, "enterClicked", 7);
+    /**
+     * Current country_code
+     */
     this.countryCode = salla.config.get('user.country_code', 'SA');
-    this.countryKey = "+966"; //TODO:: why we need it
+    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 });
@@ -1674,12 +1754,21 @@ const SallaTelInput = class {
       this.errorMap = [this.invalidNumber, this.invalidCountryCode, this.tooShort, this.tooLong, this.invalidNumber];
     });
   }
+  /**
+   * Get current values
+   * @return {{mobile:number,countryCode:'SA'|string, countryKey:'+966'|string}}
+   */
   async getValues() {
-    this.mobile = this.phoneInput.value;
-    this.countryCode = this.countryCodeInput.value;
-    this.countryKey = this.countryKeyInput.value;
-    return { mobile: this.phoneInput.value, countryCode: this.countryCodeInput.value, countryKey: this.countryKeyInput.value };
+    return {
+      mobile: this.mobile = this.phoneInput.value,
+      countryCode: this.countryCode = this.countryCodeInput.value,
+      countryKey: this.countryKey = this.countryKeyInput.value
+    };
   }
+  /**
+   * Is current data valid or not
+   * @return {boolean}
+   */
   async isValid() {
     this.reset();
     if (this.iti.isValidNumber())
@@ -1712,9 +1801,7 @@ const SallaTelInput = class {
       });
     });
     // on blur: validate
-    this.phoneInput.addEventListener('blur', () => {
-      this.isValid();
-    });
+    this.phoneInput.addEventListener('blur', () => this.isValid());
     // on keyup / change flag: reset
     this.phoneInput.addEventListener('input', e => {
       salla.helpers.digitsOnly(e.target);
@@ -1739,10 +1826,15 @@ const SallaVerify = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.verified = index.createEvent(this, "verified", 7);
-    this.backClicked = index.createEvent(this, "backClicked", 7);
+    this.initiated = false;
+    /**
+     * Verifying method
+     */
     this.by = 'sms';
+    /**
+     * should auto reloading the page after success verification
+     */
     this.autoReload = true;
-    this.initiated = false;
     Helper.Helper.setHost(this.host);
     if (this.withoutModal) {
       this.modal = { show: () => '', hide: () => '' };
@@ -1754,12 +1846,22 @@ const SallaVerify = class {
       });
     }
     salla.event.on('languages::translations.loaded', () => {
+      var _a;
       this.title = salla.lang.get('pages.profile.verify_title');
+      (_a = this.btn) === null || _a === void 0 ? void 0 : _a.setText(salla.lang.get('pages.profile.verify'));
     });
   }
+  /**
+   * Get current code
+   * @return {string}
+   */
   async getCode() {
     return this.code.value;
   }
+  /**
+   * Show verifying modal
+   * @param data
+   */
   async show(data) {
     var _a;
     this.data = data;
@@ -1854,12 +1956,10 @@ const SallaVerify = class {
   myBody() {
     return [
       index.h("div", { class: "s-verify-message", innerHTML: salla.lang.get('pages.profile.verify_message') }),
-      // <label class="s-verify-label">{salla.lang.get('pages.profile.verify_placeholder')}</label>,
       index.h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }),
       index.h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => index.h("input", { type: "text", maxlength: "1", class: "s-verify-input", required: true }))),
-      index.h("div", { slot: "footer", class: "s-verify-footer" }, index.h("salla-button", { class: "s-verify-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), index.h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), index.h("b", { class: "s-verify-timer", ref: el => this.timer = el })), index.h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit')), this.isShowBack ?
-        index.h("a", { href: "#", class: "s-verify-back", onClick: () => this.backClicked.emit() }, index.h("i", { class: "sicon-arrow-right" }))
-        : '')
+      index.h("div", { slot: "footer", class: "s-verify-footer" }, index.h("salla-button", { class: "s-verify-submit", "loader-position": 'center', disabled: true, onClick: () => this.submit(), ref: b => this.btn = b }, salla.lang.get('pages.profile.verify')), index.h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), index.h("b", { class: "s-verify-timer", ref: el => this.timer = el })), index.h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))),
+      index.h("slot", { name: "after-footer" })
     ];
   }
   get host() { return index.getElement(this); }

package/dist/cjs/salla-infinite-scroll.cjs.entry.js

@@ -12,6 +12,9 @@ const SallaInfiniteScroll = class {
      * Next Page element
      */
     this.nextPage = '';
+    /**
+     * Is there is need to autoload next page when scroll
+     */
     this.autoload = false;
     /**
      * Class selector to know the container if it's not the host `<salla-infinite-scroll>`

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

@@ -23,10 +23,18 @@ const SallaOffer = class {
       this.show(data.product_id);
     });
   }
-  async show(productId) {
+  /**
+   * Show the available offers for the product
+   * @param product_id
+   */
+  async show(product_id) {
     //TODO:: make sure there is only one offer
-    return salla.api.offer.details(productId).then(response => this.offer = response.data[0]);
+    return salla.api.offer.details(product_id).then(response => this.offer = response.data[0]);
   }
+  /**
+   * Show offer details
+   * @param {Offer} offer
+   */
   async showOffer(offer) {
     this.offer = offer;
     return this.modal.show();

package/dist/cjs/salla-product-availability.cjs.entry.js

@@ -9,7 +9,13 @@ const SallaProductAvailability = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.isUser = Helper.Helper.isUser();
+    /**
+     * product id that can visitor subscribe to its availability notification
+     */
     this.productId = salla.config.get('page.id');
+    /**
+     * is current user already subscribed
+     */
     this.isSubscribed = false;
     // @Method()
     this.submit = async () => {

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

@@ -13,6 +13,10 @@ const SallaRating = class {
     this.stepsCount = 0;
     this.currentIndex = 0;
     this.submitted = [];
+    /**
+     * The order id, to rate on its products & shipping
+     */
+    this.orderId = salla.config.get('page.id');
     this.rate_the_store = salla.lang.get('pages.rating.rate_the_store');
     this.write_store_rate = salla.lang.get('pages.rating.write_store_rate');
     this.rate_product_stars = salla.lang.get('pages.rating.rate_product_stars');
@@ -36,14 +40,20 @@ const SallaRating = class {
       this.next = salla.lang.get('common.elements.next');
     });
   }
+  /**
+   * Show the rating modal
+   */
   async show() {
     return this.modal.show()
-      .then(() => this.order || salla.feedback.api.order(salla.config.get('page.id')).then(res => this.order = res.data))
+      .then(() => this.order || salla.feedback.api.order(this.orderId).then(res => this.order = res.data))
       .then(() => this.modal.setTitle(salla.lang.get('pages.rating.rate_order') + ' <span class="unicode">(#' + this.order.id + ')</span>'))
       .then(() => this.modal.stopLoading())
       .then(() => this.stepsCount = [this.order.testimonials_enabled, this.order.products_enabled, this.order.shipping_enabled].filter(enabled => enabled).length)
       .then(() => setTimeout(() => this.initiateRating(), 100));
   }
+  /**
+   * Show the rating modal
+   */
   async hide() {
     return this.modal.hide();
   }
@@ -169,7 +179,7 @@ const SallaRating = class {
     if (Object.keys(data).length == 0) {
       return;
     }
-    data['order_id'] = salla.config.get('page.id');
+    data['order_id'] = this.orderId;
     data['type'] = this.currentTab.dataset.type;
     this.submitted.push(this.currentIndex);
     return salla.feedback.api[this.currentTab.dataset.type](data);