@salla.sa/twilight-components 1.0.22 → 1.0.24

package/dist/cjs/{salla-search-45173394.js → salla-search-eb0112c0.js}

@@ -3,30 +3,25 @@
 const index = require('./index-714023c8.js');
 const Helper = require('./Helper-fcea994c.js');
 
-const sallaSearchCss = "#s-search-modal .s-modal-wrapper{align-items:flex-start;padding:0}#s-search-modal .s-modal-spacer{display:inline}#s-search-modal .s-modal-body{padding:0;max-width:90%;margin-top:3.2rem}#s-search-modal .s-modal-close{top:1rem}";
+const sallaSearchCss = "#s-search-modal .s-modal-wrapper{align-items:flex-start;padding:0}#s-search-modal .s-modal-spacer{display:inline}#s-search-modal .s-modal-body{padding:0;max-width:90%;margin-top:3.2rem;border-radius:0.5rem}#s-search-modal .s-modal-close{top:1rem}";
 
 const SallaSearch = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     var _a;
-    this.results = [];
-    /**
-     * Override search placeholder.
-     */
-    this.placeholder = salla.lang.get('blocks.header.search_placeholder');
-    /**
-     * Override no results error message.
-     */
-    this.noResultsText = salla.lang.get('common.elements.no_options');
     Helper.Helper.setHost(this.host);
     this.productSlot = ((_a = Helper.Helper.getElement('[slot="product"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || this.getDefaultProductSlot();
+    salla.event.on('languages::translations.loaded', () => {
+      this.placeholder = salla.lang.get('blocks.header.search_placeholder');
+      this.noResultsText = salla.lang.get('common.elements.no_options');
+    });
   }
   onModalOpen() {
     this.modal.querySelector('.s-search-input').focus();
   }
   onModalClose() {
     this.modal.querySelector('.s-search-input').value = '';
-    this.results = [];
+    this.results = undefined;
     this.afterSearching();
   }
   getDefaultProductSlot() {
@@ -41,7 +36,7 @@ const SallaSearch = class {
   search(e) {
     Helper.Helper.hideElement(this.noResults);
     if (e.target.value.length === 0) {
-      this.results = [];
+      this.results = undefined;
       this.afterSearching();
       return;
     }
@@ -51,26 +46,24 @@ const SallaSearch = class {
     //run loading spinner or stop it
     Helper.Helper.toggleElement(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => true);
     salla.search.api.search(e.target.value)
-      .then(response => this.results = response.results)
-      .catch(err => err !== 'Query Same As Previous!' ? this.results = [] : null)
+      .then(response => this.results = response)
+      .catch(err => err !== 'Query Same As Previous!' ? this.results = undefined : null)
       .finally(() => this.afterSearching(/*isEmpty*/ false));
   }
   afterSearching(isEmpty = true) {
-    this.noResults.style.display = isEmpty || this.results.length > 0 ? 'none' : 'block';
-    Helper.Helper.toggleElement(this.container, 's-search-container-open', 'no-results', () => this.results.length)
+    var _a;
+    this.noResults.style.display = isEmpty || ((_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length) > 0 ? 'none' : 'block';
+    Helper.Helper.toggleElement(this.container, 's-search-container-open', 'no-results', () => { var _a; return (_a = this.results) === null || _a === void 0 ? void 0 : _a.data.length; })
       .toggleElement(this.searchIcon, 's-search-spinner-loader', 'sicon-search', () => false); //stop searching anime
     salla.search.api.previousQuery = ''; //avoid having error 'Query Same As Previous' after reopen modal;
   }
   render() {
     var _a;
     return (index.h("salla-modal", { position: "top", id: "s-search-modal", ref: modal => this.modal = modal }, index.h("div", { class: "s-search-container", ref: container => this.container = container }, index.h("input", { class: "s-search-input", type: "text", placeholder: this.placeholder, onInput: e => this.search(e) }), index.h("span", { class: "s-search-icon" }, index.h("i", { class: "sicon-search", ref: el => this.searchIcon = el })), index.h("div", { class: "s-search-results" }, (_a = this.results) === null || _a === void 0 ? void 0 :
-      _a.map(item => {
-        var _a;
-        return index.h("a", { href: item.url, class: "s-search-product", innerHTML: this.productSlot
-            .replace(/\{name\}/g, item.title)
-            .replace(/\{price\}/g, (_a = item.price) === null || _a === void 0 ? void 0 : _a.after) //todo:: get discounted price too
-            .replace(/\{image\}/g, item.thumb) });
-      }), index.h("p", { ref: el => this.noResults = el, class: "s-search-no-results" }, this.noResultsText)))));
+      _a.data.map(item => index.h("a", { href: item.url, class: "s-search-product", innerHTML: this.productSlot
+          .replace(/\{name\}/g, item.name)
+          .replace(/\{price\}/g, item.price) //todo:: get discounted price too
+          .replace(/\{image\}/g, item.image_url) })), index.h("p", { ref: el => this.noResults = el, class: "s-search-no-results" }, this.noResultsText)))));
   }
   /**
    * Run it one time after load

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

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

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

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["salla-button_5.cjs",[[0,"salla-login",{"isEmailAllowed":[4,"is-email-allowed"],"loginTypeTitle":[1,"login-type-title"],"loginText":[1,"login-text"],"smsLabel":[1,"sms-label"],"mobileLabel":[1,"mobile-label"],"emailLabel":[1,"email-label"],"enterText":[1,"enter-text"],"bySMSText":[1,"by-s-m-s-text"],"byEmailText":[1,"by-email-text"],"backText":[1,"back-text"],"show":[64]},[[0,"verified","onVerified"],[0,"backClicked","onbackClicked"]]],[0,"salla-verify",{"withoutModal":[4,"without-modal"],"url":[1],"by":[1],"backText":[1,"back-text"],"autoReload":[4,"auto-reload"],"getCode":[64],"show":[64]}],[0,"salla-tel-input",{"phone":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"getValues":[64]}],[4,"salla-button",{"btnStyle":[513,"btn-style"],"loading":[516],"disabled":[516],"loaderPosition":[1,"loader-position"],"wide":[4],"load":[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"],"subTitle":[1,"sub-title"],"icon":[1],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[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.cjs",[[4,"salla-localization",{"languagesTitle":[1,"languages-title"],"currenciesTitle":[1,"currencies-title"],"ok":[1],"show":[64],"hide":[64],"submit":[64]}]]],["salla-offer.cjs",[[0,"salla-offer",{"offer":[32],"show":[64]}]]],["salla-product-availability.cjs",[[4,"salla-product-availability",{"channels":[1],"buttonText":[1,"button-text"],"countryCode":[1,"country-code"],"subscribeText":[1,"subscribe-text"],"cancelText":[1,"cancel-text"],"subTitle":[1,"sub-title"],"mobileLabel":[1,"mobile-label"],"emailLabel":[1,"email-label"],"mobilePlaceholder":[1,"mobile-placeholder"],"emailPlaceholder":[1,"email-placeholder"],"productId":[2,"product-id"],"subscribedMessage":[1,"subscribed-message"],"isSubscribed":[1028,"is-subscribed"],"submit":[64]}]]],["salla-rating.cjs",[[0,"salla-rating",{"order":[32],"show":[64],"hide":[64]}]]],["salla-search.cjs",[[0,"salla-search",{"placeholder":[1],"noResultsText":[1,"no-results-text"],"results":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]]]]], options);
+  return index.bootstrapLazy([["salla-button_5.cjs",[[0,"salla-login",{"isEmailAllowed":[4,"is-email-allowed"],"title":[32],"loginTypeTitle":[32],"loginText":[32],"smsLabel":[32],"mobileLabel":[32],"emailLabel":[32],"enterText":[32],"bySMSText":[32],"byEmailText":[32],"isEmailValid":[32],"firstNameLabel":[32],"lastNameLabel":[32],"firstNameRequired":[32],"lastNameRequired":[32],"show":[64]},[[0,"verified","onVerified"],[0,"backClicked","onbackClicked"]]],[0,"salla-verify",{"withoutModal":[4,"without-modal"],"url":[513],"by":[1],"isShowBack":[4,"is-show-back"],"autoReload":[4,"auto-reload"],"getCode":[64],"show":[64]}],[0,"salla-tel-input",{"phone":[1025],"countryCode":[1025,"country-code"],"countryKey":[1025,"country-key"],"invalidNumber":[32],"invalidCountryCode":[32],"tooShort":[32],"tooLong":[32],"mobileLabel":[32],"mobileRequired":[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],"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"],"subTitle":[1,"sub-title"],"icon":[1],"imageIcon":[1,"image-icon"],"title":[32],"show":[64],"hide":[64],"setTitle":[64],"loading":[64],"stopLoading":[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],"ok":[32],"show":[64],"hide":[64]}]]],["salla-localization.cjs",[[4,"salla-localization",{"languagesTitle":[32],"currenciesTitle":[32],"ok":[32],"show":[64],"hide":[64],"submit":[64]}]]],["salla-offer.cjs",[[0,"salla-offer",{"offer":[32],"show":[64]}]]],["salla-product-availability.cjs",[[4,"salla-product-availability",{"channels":[1],"buttonText":[1,"button-text"],"countryCode":[1,"country-code"],"subscribeText":[1,"subscribe-text"],"cancelText":[1,"cancel-text"],"subTitle":[1,"sub-title"],"mobileLabel":[1,"mobile-label"],"emailLabel":[1,"email-label"],"mobilePlaceholder":[1,"mobile-placeholder"],"emailPlaceholder":[1,"email-placeholder"],"productId":[2,"product-id"],"subscribedMessage":[1,"subscribed-message"],"isSubscribed":[1028,"is-subscribed"],"submit":[64]}]]],["salla-rating.cjs",[[0,"salla-rating",{"order":[32],"show":[64],"hide":[64]}]]],["salla-search.cjs",[[0,"salla-search",{"results":[32],"placeholder":[32],"noResultsText":[32]},[[0,"modalOpened","onModalOpen"],[0,"modalClosed","onModalClose"]]]]]], options);
 });

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

@@ -34,6 +34,9 @@ export class SallaBranches {
         : 'التسوق من فرع آخر';
     };
     salla.event.on('branches::show', () => this.show());
+    salla.event.on('languages::translations.loaded', () => {
+      this.ok = salla.lang.get('common.elements.ok');
+    });
   }
   async show() {
     return this.modal.show();
@@ -55,7 +58,7 @@ export class SallaBranches {
     }, 300);
   }
   render() {
-    return (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, "modal-width": "xs", id: "s-branches-modal", class: "hidden" },
+    return (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" },
       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" },
@@ -80,7 +83,7 @@ export class SallaBranches {
             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 }, salla.lang.get('common.elements.ok')))
+          h("salla-button", { ref: btn => this.btn = btn, onClick: () => this.handleSubmit(), class: "s-branches-submit", wide: true }, this.ok))
         : ''));
   }
   componentDidRender() {
@@ -187,7 +190,8 @@ export class SallaBranches {
   static get states() { return {
     "open": {},
     "selected": {},
-    "isOpenedBefore": {}
+    "isOpenedBefore": {},
+    "ok": {}
   }; }
   static get methods() { return {
     "show": {

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

@@ -32,6 +32,8 @@ export class SallaButton {
   }
   async stop() {
     this.host.removeAttribute('loading');
+    if (this.loaderPosition == 'center')
+      this.text.classList.remove('s-button-hide');
     return this.host;
   }
   async disable() {

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

@@ -1,4 +1,4 @@
-import { Component, Element, h, Method, Prop } from '@stencil/core';
+import { Component, Element, h, Method, State } from '@stencil/core';
 import Helper from "../../Helpers/Helper";
 /**
  * @slot header - The top of the modal.
@@ -11,11 +11,13 @@ export class SallaLocalization {
     var _a, _b;
     this.language = salla.config.get('language', {});
     this.currency = salla.config.get('currency', {});
-    this.languagesTitle = salla.lang.get('common.titles.language');
-    this.currenciesTitle = salla.lang.get('common.titles.currency');
-    this.ok = salla.lang.get('common.elements.ok');
     Helper.setHost(this.host);
     salla.event.on('localization::show', () => this.show());
+    salla.event.on('languages::translations.loaded', () => {
+      this.languagesTitle = salla.lang.get('common.titles.language');
+      this.currenciesTitle = salla.lang.get('common.titles.currency');
+      this.ok = salla.lang.get('common.elements.ok');
+    });
     /**
      * letting developer to insert his own slot like:
      * <salla-localization>
@@ -53,7 +55,7 @@ export class SallaLocalization {
       .then(() => url && (window.location.href = url));
   }
   render() {
-    return (h("salla-modal", { id: "salla-localization", class: "hidden", ref: modal => this.modal = modal, "modal-width": "xs" },
+    return (h("salla-modal", { id: "salla-localization", class: "hidden", ref: modal => this.modal = modal, width: "xs" },
       h("div", { slot: "header" },
         h("slot", { name: "header" })),
       h("div", { class: "s-localization-inner" },
@@ -92,61 +94,10 @@ export class SallaLocalization {
     this.host.querySelectorAll('#language-slot').forEach(el => el.replaceWith(el.firstChild));
   }
   static get is() { return "salla-localization"; }
-  static get properties() { return {
-    "languagesTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "languages-title",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.titles.language')"
-    },
-    "currenciesTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "currencies-title",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.titles.currency')"
-    },
-    "ok": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "ok",
-      "reflect": false,
-      "defaultValue": "salla.lang.get('common.elements.ok')"
-    }
+  static get states() { return {
+    "languagesTitle": {},
+    "currenciesTitle": {},
+    "ok": {}
   }; }
   static get methods() { return {
     "show": {

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

@@ -1,3 +1,16 @@
-salla-verify{
-    display: block;
+/**
+ * Initial Variables
+ */
+/**
+ * Functions
+ */
+/**
+ * Delivered variables
+ */
+salla-verify {
+  display: block;
+}
+
+#salla-login .s-modal-body {
+  overflow: inherit;
 }