@salla.sa/twilight-components 1.6.15-alpha.0 → 1.6.15-alpha.1

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

@@ -0,0 +1,171 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Element, h, Host, Prop, State } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+/**
+ */
+export class SallaInfiniteScroll {
+  constructor() {
+    /**
+     * Next Page element
+     */
+    this.nextPage = '';
+    /**
+     * Is there is need to autoload next page when scroll `next-page-autoload|next-page.autoload`
+     */
+    this.autoload = false;
+    /**
+     * Class selector to know the container if it's not the host `<salla-infinite-scroll>`
+     */
+    this.container = 'salla-infinite-scroll';
+    /**
+     * Class selector to know list items
+     */
+    this.item = 'salla-infinite-scroll > *';
+    Helper.setHost(this.host);
+    this.status = document.createElement('div');
+    this.status.className = 's-infinite-scroll-wrapper';
+    this.status.innerHTML = `<div class="s-infinite-scroll-status" style="display:none">
+        <p class="s-infinite-scroll-last infinite-scroll-last"></p>
+        <p class="s-infinite-scroll-error infinite-scroll-error"></p>
+      </div>
+      <a href="${this.nextPage}" class="s-infinite-scroll-btn s-button-btn s-button-primary">
+        <span class="s-button-text s-infinite-scroll-btn-text">${salla.lang.get('common.elements.load_more')}</span>
+        <span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>
+      </a>`;
+    this.btnLoader = this.status.querySelector('.s-button-loader');
+    salla.lang.onLoaded(() => {
+      this.status.querySelector('.s-button-text').innerHTML = salla.lang.get('common.elements.load_more');
+      this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');
+      this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');
+    });
+  }
+  loading(isLoading = true) {
+    let btnText = this.status.querySelector('.s-button-text');
+    Helper.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);
+    this.btnLoader.style.display = isLoading ? 'inherit' : 'none';
+  }
+  render() {
+    return this.nextPage.length > 1 ?
+      h(Host, { class: "s-infinite-scroll-container" },
+        h("slot", null)) : '';
+  }
+  componentDidLoad() {
+    if (this.nextPage.length === 0) {
+      return;
+    }
+    this.host.insertAdjacentElement('afterend', this.status);
+    let that = this;
+    let infScroll = salla.infiniteScroll.initiate(this.container, {
+      history: this.autoload ? 'push' : false,
+      scrollThreshold: this.autoload ? 400 : false,
+      nextPage: this.nextPage,
+      checkLastPage: 'salla-infinite-scroll[next-page*=":"],salla-infinite-scroll[next-page*="."]',
+      status: '.s-infinite-scroll-status',
+      button: this.status.querySelector('.s-button-btn'),
+      append: this.item,
+      path: function () {
+        return that.nextPage.replace(/page\=(\d)/g, 'page=' + (this.loadCount + 2));
+      },
+    })
+      .on('request', () => this.loading())
+      .on('load', () => {
+      this.loading(false);
+      if (infScroll.pageIndex == 2) {
+        infScroll.option({ loadOnScroll: false });
+      }
+      if (infScroll.pageIndex == 3) {
+        infScroll.option({ loadOnScroll: true });
+      }
+    })
+      .on('error', () => this.loading(false));
+  }
+  static get is() { return "salla-infinite-scroll"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-infinite-scroll.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-infinite-scroll.css"]
+  }; }
+  static get properties() { return {
+    "nextPage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Next Page element"
+      },
+      "attribute": "next-page",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "autoload": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Is there is need to autoload next page when scroll `next-page-autoload|next-page.autoload`"
+      },
+      "attribute": "autoload",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "container": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Class selector to know the container if it's not the host `<salla-infinite-scroll>`"
+      },
+      "attribute": "container",
+      "reflect": false,
+      "defaultValue": "'salla-infinite-scroll'"
+    },
+    "item": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Class selector to know list items"
+      },
+      "attribute": "item",
+      "reflect": false,
+      "defaultValue": "'salla-infinite-scroll > *'"
+    }
+  }; }
+  static get states() { return {
+    "loadMore": {},
+    "noMore": {},
+    "failedToLoad": {}
+  }; }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,134 @@
+/*
+  The whole installment methods is a third-party widgets,
+  So there aren't a custom classes (as other components) to style them.
+*/
+/*
+* Installment::Tabby
+*/
+#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;
+  box-shadow: none;
+  border: none;
+}
+#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet {
+  max-width: 100%;
+  min-height: 100px;
+  padding: 18px 20px;
+  border: none !important;
+}
+#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;
+}
+
+/*
+* Installment::Tamara & Spotii
+*/
+.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;
+}
+.tamara-product-widget .spotii-logo,
+.spotii-wrapper .spotii-logo {
+  float: left;
+  margin: 0 0 0 -75px;
+}
+
+.ltr .tamara-product-widget,
+.ltr .spotii-wrapper {
+  text-align: left;
+  padding: 18px 100px 18px 20px !important;
+}
+.ltr .tamara-product-widget .spotii-logo,
+.ltr .spotii-wrapper .spotii-logo {
+  float: right;
+  margin: 0 -75px 0 0;
+}
+.ltr .tamara-product-widget .spotii-product-widget,
+.ltr .spotii-wrapper .spotii-product-widget {
+  text-align: left !important;
+}
+
+.spotii-wrapper .spotii-promo {
+  font-size: var(--font-md);
+}
+.spotii-wrapper .spotii-product-widget {
+  font-size: var(--font-sm) !important;
+  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/collection/components/salla-installment/salla-installment.js

@@ -0,0 +1,196 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Host, h, Prop, State } from '@stencil/core';
+export class SallaInstallment {
+  constructor() {
+    this.tabbyBorderRemoved = false;
+    this.tabbyRemoveBorderTries = 0;
+    //todo:: this is patch, use better way😜
+    this.readyToRender = false;
+    /**
+     * Language code
+     */
+    this.language = salla.config.get('user.language_code');
+    /**
+     * Currency code
+     */
+    this.currency = salla.config.get('user.currency_code');
+    this.tamaraIsActive = false;
+    this.tabbyIsActive = false;
+    this.spotiiIsActive = false;
+    salla.lang.onLoaded(() => {
+      const installment = salla.config.get('store.settings.installments');
+      if (installment) {
+        this.tamaraIsActive = installment.includes('tamara_installment');
+        this.tabbyIsActive = installment.includes('tabby_installment');
+        this.spotiiIsActive = installment.includes('spotii_pay');
+      }
+      this.readyToRender = true;
+    });
+  }
+  render() {
+    return (h(Host, null,
+      this.tamaraIsActive ?
+        h("div", { class: "tamara-product-widget", "data-price": this.price, "data-currency": this.currency, "data-lang": this.language, "data-payment-type": "installment" })
+        : '',
+      this.tabbyIsActive ?
+        h("div", { id: "tabbyPromoWrapper" },
+          h("div", { id: "tabbyPromo" }))
+        : '',
+      this.spotiiIsActive ?
+        h("div", { class: "spotii-wrapper" },
+          h("div", { class: "spotii-promo" }))
+        : ''));
+  }
+  componentDidRender() {
+    if (!this.readyToRender) {
+      return;
+    }
+    // Tamara
+    if (this.tamaraIsActive) {
+      var script = document.createElement('script');
+      script.setAttribute('src', 'https://cdn.tamara.co/widget/product-widget.min.js');
+      document.head.appendChild(script);
+      script.onload = () => {
+        window.TamaraProductWidget.init({ lang: this.language });
+        setTimeout(() => {
+          window.TamaraProductWidget.render();
+        }, 300);
+      };
+    }
+    // tabby
+    if (this.tabbyIsActive) {
+      var script = document.createElement('script');
+      script.setAttribute('src', 'https://checkout.tabby.ai/tabby-promo.js');
+      document.head.appendChild(script);
+      script.onload = () => {
+        const TabbyPromo = window.TabbyPromo;
+        new TabbyPromo({
+          selector: '#tabbyPromo',
+          currency: this.currency,
+          price: this.price,
+          lang: this.language,
+        });
+        document.querySelectorAll('.tabby-promo-snippet__logo').forEach(function (element) {
+          element.setAttribute('aria-label', 'Tabby Logo');
+        });
+      };
+      //this is workaround to remove the default border and add margin
+      this.removeTabbyBorder();
+    }
+    // Spotii
+    if (this.spotiiIsActive) {
+      let amount = salla.money((Number(this.price) / 4).toFixed(2));
+      let isRTL = salla.config.get('theme.is_rtl', true);
+      window.spotiiConfig = {
+        targetXPath: ['.spotii-wrapper'],
+        renderToPath: ['.spotii-promo'],
+        numberOfPayment: 4,
+        currency: this.currency,
+        templateLine: "${textOne} ${number} ${textTwo} " + amount + "${logo} ${info}",
+        //todo:: translate these
+        textOne: isRTL ? "جزء الدفع على" : "Split it into",
+        textTwo: isRTL ? "أقساط متساوية بدون تكاليف اضافية بقيمة" : "payments of",
+        textThree: "مع",
+        price: this.price,
+        // forcedShow: false,
+        // merchantID: null,
+      };
+      var script = document.createElement('script');
+      script.setAttribute('src', salla.url.cdn('js/price-widget-ar-salla.js'));
+      document.head.appendChild(script);
+      // script.onload = () => {
+      //   // setTimeout()
+      // }
+    }
+  }
+  /**
+   * this is workaround to remove the default border and add margin
+   * we will try to remove tabby border 5 times for 7.5 seconds
+   */
+  removeTabbyBorder() {
+    if (this.tabbyBorderRemoved || this.tabbyRemoveBorderTries > 5) {
+      return;
+    }
+    this.tabbyRemoveBorderTries++;
+    setTimeout(() => {
+      let promo = document.querySelector('#tabbyPromo>div>div');
+      promo = promo ? promo.shadowRoot.querySelector('div[class^="styles__tabby-promo-snippet--"]') : null;
+      if (promo) {
+        promo.style = 'border: none; margin: 15px 0!important;';
+        this.tabbyBorderRemoved = true;
+      }
+      else {
+        this.removeTabbyBorder();
+      }
+    }, this.tabbyRemoveBorderTries * 500);
+  }
+  static get is() { return "salla-installment"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-installment.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-installment.css"]
+  }; }
+  static get properties() { return {
+    "price": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Current product price"
+      },
+      "attribute": "price",
+      "reflect": false
+    },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Language code"
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "salla.config.get('user.language_code')"
+    },
+    "currency": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Currency code"
+      },
+      "attribute": "currency",
+      "reflect": false,
+      "defaultValue": "salla.config.get('user.currency_code')"
+    }
+  }; }
+  static get states() { return {
+    "tamaraIsActive": {},
+    "tabbyIsActive": {},
+    "spotiiIsActive": {}
+  }; }
+}

package/dist/collection/components/salla-list-tile/salla-list-tile.js

@@ -0,0 +1,80 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Host, h, Prop } from '@stencil/core';
+export class SallaListTile {
+  constructor() {
+    /**
+     * Designates the component as anchor and applies the `href` attribute.
+     */
+    this.href = undefined;
+    /**
+     * Designates the target attribute. This should only be applied when using the `href` prop.
+     */
+    this.target = "_self";
+  }
+  generateClass() {
+    return {
+      "s-list-tile-item": true,
+      "s-list-tile-item-href": !!this.href
+    };
+  }
+  render() {
+    return (h(Host, null,
+      h("a", { class: this.generateClass(), href: this.href, target: this.target },
+        h("div", { class: "s-list-tile-item-icon" },
+          h("slot", { name: 'icon' })),
+        h("div", { class: "s-list-tile-item-content" },
+          h("div", { class: "s-list-tile-item-title" },
+            h("slot", { name: 'title' })),
+          h("div", { class: "s-list-tile-item-subtitle" },
+            h("slot", { name: "subtitle" }))),
+        h("div", { class: "s-list-tile-item-action" },
+          h("slot", { name: 'action' })))));
+  }
+  static get is() { return "salla-list-tile"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-list-tile.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-list-tile.css"]
+  }; }
+  static get properties() { return {
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Designates the component as anchor and applies the `href` attribute."
+      },
+      "attribute": "href",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "target": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"_blank\" | \"_self\" | \"_parent\" | \"_top\" | \"framename\"",
+        "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | \"framename\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Designates the target attribute. This should only be applied when using the `href` prop."
+      },
+      "attribute": "target",
+      "reflect": false,
+      "defaultValue": "\"_self\""
+    }
+  }; }
+}

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

@@ -0,0 +1,19 @@
+.s-loading {
+  animation: spin 1s linear infinite;
+  fill: var(--color-primary);
+}
+
+.s-loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}