@salla.sa/twilight-components 1.0.33 → 1.0.34

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

@@ -1,10 +1,20 @@
 import { Component, Element, Event, h, Method, Prop, State } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
+/**
+ * @slot footer - Replaces the footer, by default it contains: verify button, resend, and timer
+ * @slot after-footer - placeholder position
+ */
 export class SallaVerify {
   constructor() {
+    this.initiated = false;
+    /**
+     * Verifying method
+     */
     this.by = 'sms';
+    /**
+     * should auto reloading the page after success verification
+     */
     this.autoReload = true;
-    this.initiated = false;
     Helper.setHost(this.host);
     if (this.withoutModal) {
       this.modal = { show: () => '', hide: () => '' };
@@ -16,12 +26,22 @@ export class SallaVerify {
       });
     }
     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;
@@ -116,7 +136,6 @@ export class SallaVerify {
   myBody() {
     return [
       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>,
       h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }),
       h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => h("input", { type: "text", maxlength: "1", class: "s-verify-input", required: true }))),
       h("div", { slot: "footer", class: "s-verify-footer" },
@@ -124,11 +143,8 @@ export class SallaVerify {
         h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el },
           salla.lang.get('blocks.header.resend_after'),
           h("b", { class: "s-verify-timer", ref: el => this.timer = el })),
-        h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit')),
-        this.isShowBack ?
-          h("a", { href: "#", class: "s-verify-back", onClick: () => this.backClicked.emit() },
-            h("i", { class: "sicon-arrow-right" }))
-          : '')
+        h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))),
+      h("slot", { name: "after-footer" })
     ];
   }
   static get is() { return "salla-verify"; }
@@ -162,7 +178,7 @@ export class SallaVerify {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Submitting url, default will use salla api auth: `salla.api.auth.verify`"
       },
       "attribute": "url",
       "reflect": true
@@ -171,37 +187,20 @@ export class SallaVerify {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "'sms' | 'email'",
+        "resolved": "\"email\" | \"sms\"",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Verifying method"
       },
       "attribute": "by",
       "reflect": false,
       "defaultValue": "'sms'"
     },
-    "isShowBack": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-show-back",
-      "reflect": false
-    },
     "autoReload": {
       "type": "boolean",
       "mutable": false,
@@ -214,7 +213,7 @@ export class SallaVerify {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "should auto reloading the page after success verification"
       },
       "attribute": "auto-reload",
       "reflect": false,
@@ -232,22 +231,7 @@ export class SallaVerify {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "backClicked",
-      "name": "backClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+        "text": "Event when success verification"
       },
       "complexType": {
         "original": "any",
@@ -268,15 +252,21 @@ export class SallaVerify {
         "return": "Promise<string>"
       },
       "docs": {
-        "text": "",
-        "tags": []
+        "text": "Get current code",
+        "tags": [{
+            "name": "return",
+            "text": undefined
+          }]
       }
     },
     "show": {
       "complexType": {
         "signature": "(data: any) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "text": "data",
+                "name": "param"
+              }],
             "text": ""
           }],
         "references": {
@@ -287,8 +277,11 @@ export class SallaVerify {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
-        "tags": []
+        "text": "Show verifying modal",
+        "tags": [{
+            "name": "param",
+            "text": "data"
+          }]
       }
     }
   }; }

package/dist/collection/plugins/tailwind-theme/index.js

@@ -4,7 +4,7 @@ module.exports = require('tailwindcss/plugin').withOptions(() => {
       // TODO :: find if there are used and defined them here if its.
       '.s-hidden'           : {'@apply hidden': {}},
       '.text-md'            : {},
-      '.has-error'          : {'@apply border-red-400 focus:border-red-500': {}},
+      '.s-has-error'          : {'@apply border-red-400 focus:border-red-500': {}},
       '.rounded-icon'       : {'@apply w-16 h-16 flex justify-center items-center rounded-full text-3xl': {}},
       '.form-input'         : {'@apply w-full h-10 transition-colors duration-300 focus:ring-transparent focus:border-primary dark:focus:border-primary sm:text-sm border-border-color dark:bg-gray-600 dark:border-gray-600 rounded-md': {}},
       '.btn'                : {'@apply transition duration-300 flex-1 inline-flex justify-center items-center px-6 pb-2.5 pt-2 text-sm font-bold rounded-md hover:opacity-80 whitespace-nowrap': {}},

package/dist/esm/index.js

@@ -1,3 +1,3 @@
-export { S as SallaLogin, a as SallaSearch } from './salla-search-96520d15.js';
+export { S as SallaLogin, a as SallaSearch } from './salla-search-90231876.js';
 import './index-a1bf769d.js';
 import './Helper-7162a06c.js';

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["salla-button_7",[[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",[[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",[[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",[[0,"salla-offer",{"offer":[32],"show":[64],"showOffer":[64]}]]],["salla-rating",[[0,"salla-rating",{"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[4],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]]], options);
+  return bootstrapLazy([["salla-button_7",[[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",{"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",[[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",[[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",[[0,"salla-offer",{"offer":[32],"show":[64],"showOffer":[64]}]]],["salla-rating",[[0,"salla-rating",{"orderId":[2,"order-id"],"order":[32],"show":[64],"hide":[64]}]]],["salla-infinite-scroll",[[4,"salla-infinite-scroll",{"nextPage":[1,"next-page"],"autoload":[4],"container":[1],"item":[1],"loadMore":[32],"noMore":[32],"failedToLoad":[32]}]]]], options);
   });
 };
 

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

@@ -7,8 +7,8 @@ const SallaBranches = class {
     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: 'غير متوفر' },
@@ -35,10 +35,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();
   }
@@ -73,7 +72,7 @@ const SallaBranches = class {
           h("span", { class: this.statusColor(branch) }, branch.tag)))))
       :
         h("select", { class: "s-branches-select", onInput: (event) => this.handelChange(event) }, this.branches.map(branch => (h("option", { value: branch.id, disabled: !branch.open, selected: this.selected == branch.id }, branch.name, " ", branch.open ? '' : '- مُغلق')))), this.isChoiceable() ?
-      h("slot", { name: "footer" }, h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit", wide: true }, this.ok))
+      h("slot", { name: "footer" }, 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/esm/salla-button_7.entry.js

@@ -1,19 +1,33 @@
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-a1bf769d.js';
 import { H as Helper } from './Helper-7162a06c.js';
-export { S as salla_login, a as salla_search } from './salla-search-96520d15.js';
+export { S as salla_login, a as salla_search } from './salla-search-90231876.js';
 
 const sallaButtonCss = ":host{display:block}";
 
 const SallaButton = class {
   constructor(hostRef) {
     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;
     }
@@ -21,7 +35,7 @@ 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'];
@@ -29,25 +43,41 @@ const SallaButton = class {
       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');
   }
@@ -107,9 +137,15 @@ const SallaLocalization = class {
     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();
   }
+  /**
+   * Hide the component
+   */
   async hide() {
     return this.modal.hide();
   }
@@ -121,10 +157,10 @@ 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));
@@ -163,27 +199,43 @@ const SallaModal = class {
     registerInstance(this, hostRef);
     this.modalOpened = createEvent(this, "modalOpened", 7);
     this.modalClosed = 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.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.getElement('[slot=body]')) === null || _a === void 0 ? void 0 : _a.classList.add('s-modal-body', 's-modal-' + this.width);
   }
   handleVisible(newValue) {
     if (!newValue) {
@@ -195,30 +247,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
-      // .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.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);
@@ -232,34 +298,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
-    h(Host, { class: 's-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-wrapper" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), 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 (h(Host, { class: 's-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-wrapper" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), 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
       ? h("div", { class: "s-modal-loader-wrap" }, h("span", { class: "s-modal-loader" }))
       :
         [h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.icon != '' || this.imageIcon != '' } }, this.isClosable ?
             h("button", { class: "s-modal-close", onClick: () => this.closeModal(), type: "button" }, h("span", { class: "sicon-cancel" }))
             : '', this.title || this.subTitle ?
             h("div", { class: "s-modal-header-inner" }, this.error || this.success || this.icon
-              ? 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
-                } }, 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 ?
-                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.title }), h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))
+              ? 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.title }), h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))
             : ''),
           h("slot", null),
           h("slot", { name: "footer" })
@@ -1649,8 +1717,11 @@ const SallaTelInput = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.enterClicked = 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 });
@@ -1670,12 +1741,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())
@@ -1708,9 +1788,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);
@@ -1735,10 +1813,15 @@ const SallaVerify = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.verified = createEvent(this, "verified", 7);
-    this.backClicked = 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.setHost(this.host);
     if (this.withoutModal) {
       this.modal = { show: () => '', hide: () => '' };
@@ -1750,12 +1833,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;
@@ -1850,12 +1943,10 @@ const SallaVerify = class {
   myBody() {
     return [
       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>,
       h("input", { type: "hidden", name: "code", maxlength: "4", required: true, ref: code => this.code = code }),
       h("div", { class: "s-verify-codes", dir: "ltr" }, [1, 2, 3, 4].map(() => h("input", { type: "text", maxlength: "1", class: "s-verify-input", required: true }))),
-      h("div", { slot: "footer", class: "s-verify-footer" }, 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')), h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), h("b", { class: "s-verify-timer", ref: el => this.timer = el })), h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit')), this.isShowBack ?
-        h("a", { href: "#", class: "s-verify-back", onClick: () => this.backClicked.emit() }, h("i", { class: "sicon-arrow-right" }))
-        : '')
+      h("div", { slot: "footer", class: "s-verify-footer" }, 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')), h("p", { class: "s-verify-resend-message", ref: el => this.resendMessage = el }, salla.lang.get('blocks.header.resend_after'), h("b", { class: "s-verify-timer", ref: el => this.timer = el })), h("a", { href: "#", class: "s-verify-resend", onClick: () => this.resendCode(), ref: el => this.resend = el }, salla.lang.get('blocks.comments.submit'))),
+      h("slot", { name: "after-footer" })
     ];
   }
   get host() { return getElement(this); }

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

@@ -8,6 +8,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>`