@salla.sa/twilight-components 1.6.2 → 1.6.3

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

@@ -1,93 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-0d0167d5.js');
-const Helper = require('./Helper-8ae6a805.js');
-
-const sallaInfiniteScrollCss = "";
-
-const SallaInfiniteScroll = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * 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.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.Helper.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);
-    this.btnLoader.style.display = isLoading ? 'inherit' : 'none';
-  }
-  render() {
-    return this.nextPage.length > 1 ?
-      index.h(index.Host, { class: "s-infinite-scroll-container" }, index.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));
-  }
-  get host() { return index.getElement(this); }
-};
-SallaInfiniteScroll.style = sallaInfiniteScrollCss;
-
-exports.salla_infinite_scroll = SallaInfiniteScroll;

package/dist/cjs/salla-list-tile_2.cjs.entry.js

@@ -1,80 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-0d0167d5.js');
-
-const sallaListTileCss = "";
-
-const SallaListTile = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * 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 (index.h(index.Host, null, index.h("a", { class: this.generateClass(), href: this.href, target: this.target }, index.h("div", { class: "s-list-tile-item-icon" }, index.h("slot", { name: 'icon' })), index.h("div", { class: "s-list-tile-item-content" }, index.h("div", { class: "s-list-tile-item-title" }, index.h("slot", { name: 'title' })), index.h("div", { class: "s-list-tile-item-subtitle" }, index.h("slot", { name: "subtitle" }))), index.h("div", { class: "s-list-tile-item-action" }, index.h("slot", { name: 'action' })))));
-  }
-};
-SallaListTile.style = sallaListTileCss;
-
-const Inbox = `<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>inbox</title>
-<path d="M31.984 19.797l-2.667-17.333c-0.1-0.651-0.659-1.131-1.317-1.131h-24c-0.659 0-1.217 0.48-1.317 1.131l-2.667 17.333c-0.011 0.067-0.016 0.135-0.016 0.203v6.667c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-6.667c0-0.068-0.005-0.136-0.016-0.203zM5.144 4h21.712l2.256 14.667h-9.112c-0.736 0-1.333 0.596-1.333 1.333 0 1.471-1.196 2.667-2.667 2.667s-2.667-1.196-2.667-2.667c0-0.737-0.597-1.333-1.333-1.333h-9.112zM29.333 26.667c0 0.736-0.599 1.333-1.333 1.333h-24c-0.735 0-1.333-0.597-1.333-1.333v-5.333h8.168c0.593 2.299 2.684 4 5.165 4s4.571-1.701 5.165-4h8.168z"></path>
-</svg>
-`;
-
-const sallaPlaceholderCss = "";
-
-const SallaPlaceholder = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.translationLoaded = false;
-    /**
-     * Custom icon to display, defaults to [`sicon-inbox`]
-     */
-    this.icon = Inbox;
-    /**
-     * Defines the alignment of contents. Defaults to [`left`]
-     */
-    this.alignment = 'left';
-    /**
-      * The size of the icon. Defaults to [`md`]
-      */
-    this.iconSize = 'md';
-    salla.lang.onLoaded(() => {
-      this.translationLoaded = true;
-    });
-  }
-  alignmentClass() {
-    return {
-      's-placeholder-wrapper': true,
-      's-placeholder-align-left': this.alignment == 'left',
-      's-placeholder-align-center': this.alignment == 'center',
-      's-placeholder-align-right': this.alignment == 'right',
-    };
-  }
-  render() {
-    return (index.h(index.Host, { class: this.alignmentClass() }, index.h("div", { class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), index.h("div", { class: "s-placeholder-title" }, index.h("slot", { name: 'title' }, index.h("span", null, salla.lang.get('common.elements.no_options')))), index.h("div", { class: "s-placeholder-description" }, index.h("slot", { name: 'description' }, index.h("span", null, salla.lang.get('common.errors.empty_results'))))));
-  }
-};
-SallaPlaceholder.style = sallaPlaceholderCss;
-
-exports.salla_list_tile = SallaListTile;
-exports.salla_placeholder = SallaPlaceholder;

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

@@ -1,229 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-0d0167d5.js');
-const star2 = require('./star2-8288e6e1.js');
-const cancel = require('./cancel-ae668d91.js');
-
-const Star3 = `<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
-<title>star3</title>
-  <defs>
-    <style>
-      .a {
-        fill: none !important;
-      }
-
-      .b {
-        fill: #ff9e01;
-      }
-
-      .c {
-        fill: #fff;
-        opacity: 0.1;
-      }
-
-    </style>
-  </defs>
-  <g transform="translate(-683 -269)">
-    <rect class="a" width="80" height="80" transform="translate(683 269)" />
-    <g transform="translate(684.539 261.216)">
-      <path class="b"
-        d="M110.117,37.062,90.024,35.2,82.043,16.665a1.61,1.61,0,0,0-2.958,0L71.1,35.2,51.011,37.062a1.61,1.61,0,0,0-.914,2.813l15.16,13.318L60.821,72.878a1.61,1.61,0,0,0,2.393,1.739l17.351-10.3,17.351,10.3a1.61,1.61,0,0,0,2.393-1.739L95.871,53.192l15.16-13.318A1.61,1.61,0,0,0,110.117,37.062Z"
-        transform="translate(-42.104 -4.011)" />
-      <g transform="translate(0 10.971)">
-        <path class="b"
-          d="M93.54,12.016c1.024,1.423,3.915,7.533,5.568,11.094a.559.559,0,0,1-.891.641c-2.853-2.7-7.73-7.377-8.754-8.8a2.512,2.512,0,0,1,4.077-2.935Z"
-          transform="translate(-75.621 -10.971)" />
-        <path class="b"
-          d="M360.909,12.016c-1.024,1.423-3.915,7.533-5.568,11.094a.559.559,0,0,0,.891.641c2.853-2.7,7.73-7.377,8.754-8.8a2.512,2.512,0,0,0-4.077-2.935Z"
-          transform="translate(-301.908 -10.971)" />
-        <path class="b"
-          d="M427.538,284.659c-1.667-.543-8.366-1.441-12.261-1.934a.559.559,0,0,0-.34,1.044c3.436,1.9,9.377,5.123,11.044,5.666a2.512,2.512,0,0,0,1.558-4.776Z"
-          transform="translate(-352.351 -241.894)" />
-        <path class="b"
-          d="M1.734,284.659c1.667-.543,8.366-1.441,12.261-1.934a.559.559,0,0,1,.34,1.044c-3.436,1.9-9.377,5.123-11.044,5.666a2.512,2.512,0,0,1-1.558-4.776Z"
-          transform="translate(0 -241.894)" />
-        <path class="b"
-          d="M239.794,412.414c0-1.753,1.224-8.4,1.963-12.257a.559.559,0,0,1,1.1,0c.739,3.855,1.963,10.5,1.963,12.257a2.512,2.512,0,0,1-5.023,0Z"
-          transform="translate(-203.768 -341.301)" />
-      </g>
-      <path class="c"
-        d="M84.945,23.4l-2.9-6.74a1.61,1.61,0,0,0-2.958,0L71.1,35.2,51.011,37.062a1.61,1.61,0,0,0-.914,2.813l15.16,13.318L60.821,72.878a1.61,1.61,0,0,0,2.393,1.739l2.309-1.371A125,125,0,0,1,84.945,23.4Z"
-        transform="translate(-42.104 -4.011)" />
-    </g>
-  </g>
-</svg>
-`;
-
-const GiftImg = `<svg xmlns="http://www.w3.org/2000/svg" width="54.079" height="53.191" viewBox="0 0 54.079 53.191"><defs><style>.a{fill:#ee9d0d;}.b{fill:#c7830b;}.c{fill:#ea2b2d;}.d{fill:#cb2527;}.e{fill:#6699ce;}.f{fill:#faa6b2;}.g{fill:#a6deff;}.h{fill:#eeb436;}.i{fill:#f72d2f;}</style></defs><path class="a" d="M40,248H77.3v25.88a2.1,2.1,0,0,1-2.1,2.1H42.1a2.1,2.1,0,0,1-2.1-2.1Z" transform="translate(-38.135 -222.787)"/><path class="b" d="M250.632,248.711v12.755L236.2,248h13.67Z" transform="translate(-211.463 -222.787)"/><path class="b" d="M333.957,336v3.207L330.52,336Z" transform="translate(-294.787 -300.528)"/><path class="c" d="M226.194,32.048l-.5.185a5.035,5.035,0,0,0-3.072,3.292l-.468,1.585-.759.414a5.035,5.035,0,0,0-2.422,3l8.865,8.271,5.09-5.456.262-6.205a5.191,5.191,0,0,0-7-5.083Z" transform="translate(-196.246 -31.722)"/><path class="c" d="M358.628,175.48l-.15.509a5.034,5.034,0,0,1-3.072,3.292l-1.55.577-.359.785a5.034,5.034,0,0,1-2.822,2.624L341.81,175l5.09-5.455,6.172-.69a5.191,5.191,0,0,1,5.555,6.629Z" transform="translate(-304.761 -152.837)"/><path class="d" d="M168,248h7.461v27.978H168Z" transform="translate(-151.213 -222.787)"/><path class="c" d="M40,336H77.3v7.461H40Z" transform="translate(-38.135 -300.528)"/><path class="d" d="M333.957,336v3.207L330.52,336Z" transform="translate(-294.787 -300.528)"/><path class="a" d="M2.1,0H40.8a2.1,2.1,0,0,1,2.1,2.1V9.326H0V2.1A2.1,2.1,0,0,1,2.1,0Z" transform="matrix(0.731, 0.682, -0.682, 0.731, 18.641, 4.976)"/><path class="d" d="M0,0H9.326V9.326H0Z" transform="matrix(0.731, 0.682, -0.682, 0.731, 30.912, 16.424)"/><path class="d" d="M286.857,79.389a.931.931,0,0,1-.74-.365l-.615-.8a12.516,12.516,0,0,1-2.528-9,.933.933,0,0,1,1.855.2,10.66,10.66,0,0,0,2.153,7.667l.615.8a.933.933,0,0,1-.739,1.5Z" transform="translate(-252.718 -64.113)"/><path class="c" d="M185.485,178.151l-.039.014a30.78,30.78,0,0,1-12.034,1.906l-2.381-.1,4.092,3.817-1.181,4,3.728-1.206a30.775,30.775,0,0,0,9.833-5.315l.71-.572Z" transform="translate(-153.891 -161.081)"/><path class="d" d="M363.834,194.779a12.51,12.51,0,0,1-6.93-2.1l-.843-.559a.933.933,0,1,1,1.031-1.554l.842.558a10.659,10.659,0,0,0,7.8,1.618.933.933,0,1,1,.328,1.836A12.663,12.663,0,0,1,363.834,194.779Z" transform="translate(-316.982 -171.914)"/><path class="c" d="M275,202.524l-.012.04a30.776,30.776,0,0,0-1.069,12.137l.265,2.369-4.092-3.817-3.909,1.455.945-3.8a30.776,30.776,0,0,1,4.622-10.177l.521-.748Z" transform="translate(-237.949 -180.364)"/><circle class="e" cx="1.865" cy="1.865" r="1.865" transform="translate(10.259 0.032)"/><circle class="f" cx="1.865" cy="1.865" r="1.865" transform="translate(0 21.482)"/><path class="g" d="M36.663,36.663a.933.933,0,0,1-.885-.638l-.048-.143a2.946,2.946,0,0,0-2.8-2.017.933.933,0,1,1,0-1.865A4.808,4.808,0,0,1,37.5,35.292l.048.143a.933.933,0,0,1-.885,1.228Z" transform="translate(-31.067 -31.968)"/><path class="g" d="M79.493,194.438a.929.929,0,0,1-.506-.15l-.185-.12a2.074,2.074,0,0,0-2.192-.047.933.933,0,0,1-.947-1.607,3.929,3.929,0,0,1,4.153.088l.185.12a.933.933,0,0,1-.508,1.716Z" transform="translate(-69.235 -173.283)"/><path class="h" d="M27.751,85.141l2.88,2.644,3.811-.874-1.624,3.556,2.008,3.354-3.884-.446-2.569,2.946L27.6,92.49,24,90.957l3.4-1.922Z" transform="translate(-24 -78.914)"/><path class="h" d="M82.174,227.375l-.959,3.772,2.564,2.928-3.884.254L77.9,237.673l-1.442-3.615-3.8-.862,2.993-2.488-.353-3.876,3.291,2.078Z" transform="translate(-66.992 -204.086)"/><path class="i" d="M300.471,141.9l-5.455-5.09,5.09-5.456a8.342,8.342,0,0,1,5.455,5.09Z" transform="translate(-263.422 -119.737)"/></svg>`;
-
-const sallaLoyaltyCss = "#salla-loyalty-modal .s-swiper-button-prev button,#salla-loyalty-modal .s-swiper-button-next button{box-shadow:#32325d40 0px 6px 12px -2px, #0000004d 0px 3px 7px -3px}";
-
-const SallaLoyalty = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.loyaltyProgram = undefined;
-    this.buttonLoading = false;
-    this.selectedItem = undefined;
-    this.askConfirmation = false;
-    this.is_loggedin = false;
-    /**
-     * The exchanged prize point
-     */
-    this.prizePoints = undefined;
-    /**
-     * Available customer points with which they can exchange.
-     */
-    this.customerPoints = undefined;
-    /**
-     * The exchangable prize title
-     */
-    this.prizeTitle = undefined;
-    /**
-     * Does the merchant allow to login using email
-     */
-    this.allowEmail = true;
-    /**
-     * Does the merchant/current location for visitor allow to login using mobile, By default outside KSA is `false`
-     */
-    this.allowMobile = true;
-    /**
-     * Does the merchant require registration with email & mobile
-     */
-    this.requireEmail = false;
-    salla.event.on('loyalty::open', () => this.open());
-    salla.auth.event.onLoggedIn(() => {
-      this.is_loggedin = true;
-    });
-    salla.lang.onLoaded(() => {
-      this.translationLoaded = true;
-    });
-  }
-  setSelectedPrizeItem(item) {
-    if (!this.selectedItem || this.selectedItem.id != item.id) {
-      this.selectedItem = item;
-    }
-    else {
-      this.selectedItem = undefined;
-    }
-  }
-  handleLongText(text) {
-    if (text.length > 150) {
-      return text.substring(0, 150) + '...';
-    }
-    return text;
-  }
-  prizeItem(item) {
-    let klass = {
-      's-loyalty-prize-item-selected': !!this.selectedItem && this.selectedItem.id == item.id,
-      "s-loyalty-prize-item": true
-    };
-    return index.h("div", { onClick: () => this.setSelectedPrizeItem(item), class: klass }, index.h("img", { class: "s-loyalty-prize-item-image", src: item.image, alt: item.name }), index.h("div", { class: "s-loyalty-prize-item-title" }, item.name), index.h("div", { class: "s-loyalty-prize-item-subtitle" }, this.handleLongText(item.description)), index.h("div", { class: "s-loyalty-prize-item-points" }, item.cost_points, " ", salla.lang.get('pages.loyalty_program.point'), index.h("div", { class: "s-loyalty-prize-item-check" }, index.h("div", null))));
-  }
-  getConfirmationModal() {
-    var _a, _b;
-    return [
-      index.h("salla-placeholder", { alignment: "center", icon: Star3, class: "s-loyalty-confirmation-modal-content" }, index.h("div", { slot: "title", class: "s-loyalty-confirmation-title" }, salla.lang.get('pages.loyalty_program.exchange_points')), index.h("div", { slot: "description" }, salla.lang.get('pages.loyalty_program.are_you_sure_to_exchange'), " ( ", index.h("strong", null, (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.cost_points), " ) ", salla.lang.get('pages.loyalty_program.for'), " ( ", index.h("strong", null, (_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.name), " )")),
-      index.h("div", { class: "s-loyalty-confirmation-actions" }, index.h("salla-button", { fill: 'outline', width: "wide", onClick: () => this.cancelProcess() }, salla.lang.get('pages.loyalty_program.cancellation')), index.h("salla-button", { loading: this.buttonLoading, width: "wide", onClick: () => this.exchangeLoyaltyPoint() }, salla.lang.get('pages.loyalty_program.confirm')))
-    ];
-  }
-  getAfterExchangeUI() {
-    return index.h("slot", { name: 'points-applied-widget' }, index.h("salla-list-tile", { class: "s-loyalty-after-exchange" }, index.h("div", { slot: "title", class: "s-loyalty-after-exchange-title" }, this.prizeTitle, " \u00A0 - \u00A0 ", this.prizePoints), index.h("div", { slot: 'action', class: "s-loyalty-after-exchange-action" }, index.h("salla-button", { class: "s-loyalty-after-exchange-reset", shape: "icon", fill: 'outline', color: "danger", size: "small", onClick: () => this.resetExchange() }, index.h("span", { innerHTML: cancel.Cancel })))));
-  }
-  /**
-   * Show loyalty modal
-   */
-  async open() {
-    if (!this.is_loggedin)
-      return salla.event.dispatch('login::open');
-    this.modal.open();
-    return await salla.loyalty.getProgram()
-      .then((response) => {
-      this.loyaltyProgram = response.data;
-    })
-      .catch(e => console.log(e))
-      .finally(() => {
-      this.modal.stopLoading();
-    });
-  }
-  /**
-   *
-   * Hide loyalty modal
-   */
-  async close() {
-    return this.modal.close();
-  }
-  /**
-   *
-   * Cancel Exchanged prizes
-   */
-  async resetExchange() {
-    return await salla.loyalty.reset()
-      .then(() => {
-      this.prizePoints = undefined;
-      this.prizeTitle = undefined;
-    }).catch(e => console.log(e));
-  }
-  /**
-   * Open Confirmation modal
-   */
-  async openConfirmation() {
-    return await this.modal.close()
-      .then(() => this.confirmationModal.open())
-      .catch(e => console.log(e));
-  }
-  /**
-   * Cancel process
-   */
-  async cancelProcess() {
-    return await this.confirmationModal.close()
-      .then(() => this.selectedItem = null)
-      .catch(e => console.log(e));
-  }
-  /**
-   * Exchange loyalty points with the selected prize item
-   * @param {number} loyalty_prize_id
-   *
-   */
-  async exchangeLoyaltyPoint() {
-    this.buttonLoading = true;
-    return await salla.loyalty.exchange(this.selectedItem.id)
-      .then((response) => {
-      this.loyaltyProgram = response.data;
-    })
-      .catch(e => console.log(e))
-      .finally(() => {
-      this.buttonLoading = false;
-      this.cancelProcess();
-    });
-  }
-  render() {
-    // A. when the exchange is done, and we have the final prize points to show it in cart page
-    if (this.prizePoints) {
-      return this.getAfterExchangeUI();
-    }
-    return [
-      index.h("slot", { name: 'widget' }, this.customerPoints ?
-        index.h("salla-list-tile", { class: 's-loyalty-widget' }, index.h("div", { slot: "icon", class: "s-loyalty-widget-icon", innerHTML: star2.Star2 }), index.h("div", { slot: "subtitle" }, this.is_loggedin ? salla.lang.get('pages.loyalty_program.cart_total_point_summary', { "balance": this.customerPoints }) : (this.guestMessage || salla.lang.get('pages.loyalty_program.guest_message')), index.h("salla-button", { shape: "link", color: "primary", onClick: () => salla.event.dispatch("loyalty::open") }, this.is_loggedin ? salla.lang.get('pages.loyalty_program.cart_point_exchange_now') : salla.lang.get('blocks.header.login')))) :
-        ''),
-      index.h("salla-modal", { noPadding: true, width: "sm", ref: modal => this.confirmationModal = modal }, this.getConfirmationModal()),
-      index.h("salla-modal", { isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, index.h("div", { slot: "loading" }, index.h("div", { class: "s-loyalty-skeleton" }, index.h("salla-list-tile", { class: "s-loyalty-header" }, index.h("div", { slot: "icon", class: "s-loyalty-header-icon" }, index.h("salla-skeleton", { type: "circle", height: '6rem', width: '6rem' })), index.h("div", { slot: "title", class: "s-loyalty-header-title mb-5" }, index.h("salla-skeleton", { height: '15px', width: '50%' })), index.h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, index.h("salla-skeleton", { height: '10px' }), index.h("salla-skeleton", { height: '10px', width: '75%' }))), index.h("div", { class: "s-loyalty-skeleton-cards" }, [...Array(3)].map(() => index.h("div", { class: "s-loyalty-prize-item" }, index.h("salla-skeleton", { height: '9rem' }), index.h("div", { class: "s-loyalty-prize-item-title" }, index.h("salla-skeleton", { height: '15px', width: '75%' })), index.h("div", { class: "s-loyalty-prize-item-subtitle" }, index.h("salla-skeleton", { height: '10px', width: '50%' }), index.h("salla-skeleton", { height: '10px', width: '25%' })), index.h("div", { class: "s-loyalty-prize-item-points" }, index.h("salla-skeleton", { height: '15px', width: '100px' }), index.h("div", { class: "s-loyalty-prize-item-check" }, index.h("salla-skeleton", { height: '1rem', width: '1rem', type: 'circle' })))))))), !!this.loyaltyProgram ?
-        [
-          index.h("salla-list-tile", { id: 's-loyalty-header', class: "s-loyalty-header" }, index.h("div", { slot: "icon", class: "s-loyalty-header-icon", innerHTML: GiftImg }), index.h("div", { slot: "title", class: "s-loyalty-header-title" }, this.loyaltyProgram.prize_promotion_title), index.h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, this.loyaltyProgram.prize_promotion_description)),
-          index.h("salla-tabs", null, this.loyaltyProgram.prizes.map((prize) => index.h("salla-tab-header", { slot: "header", name: prize.title }, index.h("span", null, prize.title))), this.loyaltyProgram.prizes.map((prize) => index.h("salla-tab-content", { slot: "content", name: prize.title }, index.h("salla-swiper", { "space-between-items": "20" }, prize.items.map((item) => this.prizeItem(item)))))),
-          index.h("salla-button", { disabled: !this.selectedItem, width: "wide", class: "s-loyalty-program-redeem-btn", onClick: () => this.openConfirmation() }, salla.lang.get('pages.loyalty_program.exchange_points')),
-        ]
-        : index.h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" })),
-    ];
-  }
-  componentDidLoad() {
-    this.is_loggedin = salla.config.isUser();
-  }
-};
-SallaLoyalty.style = sallaLoyaltyCss;
-
-exports.salla_loyalty = SallaLoyalty;

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

@@ -1,128 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-0d0167d5.js');
-const Helper = require('./Helper-8ae6a805.js');
-
-const BellRingIcon = `<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>bell-ring</title>
-<path d="M2.667 13.333v-4c0-2.592 0.748-5.107 2.161-7.271 0.404-0.616 0.231-1.443-0.387-1.845-0.616-0.401-1.443-0.228-1.845 0.388-1.699 2.599-2.596 5.617-2.596 8.728v4c0 0.736 0.596 1.333 1.333 1.333s1.333-0.596 1.333-1.333zM25.333 15.647v-6.313c0-5.147-4.188-9.333-9.333-9.333s-9.333 4.187-9.333 9.333v6.312l-5.157 9.027c-0.236 0.413-0.235 0.92 0.004 1.331 0.239 0.412 0.679 0.664 1.153 0.664h8c0 2.941 2.392 5.333 5.333 5.333s5.333-2.392 5.333-5.333h8c0.475 0 0.915-0.252 1.153-0.664 0.239-0.411 0.24-0.917 0.004-1.331zM16 29.333c-1.471 0-2.667-1.196-2.667-2.667h5.333c0 1.472-1.196 2.667-2.667 2.667zM4.965 24l4.193-7.339c0.113-0.2 0.175-0.429 0.175-0.661v-6.667c0-3.676 2.991-6.667 6.667-6.667s6.667 2.991 6.667 6.667v6.667c0 0.232 0.061 0.46 0.176 0.661l4.192 7.339zM29.403 0.603c-0.403-0.616-1.232-0.789-1.845-0.387-0.617 0.403-0.791 1.229-0.387 1.845 1.415 2.165 2.163 4.68 2.163 7.272v4c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-4c0-3.112-0.899-6.132-2.597-8.731z"></path>
-</svg>
-`;
-
-const sallaProductAvailabilityCss = "";
-
-const SallaProductAvailability = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.isUser = Helper.Helper.isUser();
-    this.translationLoaded = false;
-    /**
-     * 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 () => {
-      if (this.isUser) {
-        return salla.api.product.availabilitySubscribe(this.productId)
-          .then(() => this.isSubscribed = true);
-      }
-      let data = { id: this.productId };
-      if (this.channels_.includes('sms')) {
-        let { phone, countryCode } = await this.mobileInput.getValues();
-        data['country_code'] = countryCode;
-        data['phone'] = phone;
-      }
-      if (this.channels_.includes('email')) {
-        this.email.value !== '' && (data['email'] = this.email.value);
-      }
-      await this.validateform();
-      return this.btn.load()
-        .then(() => this.btn.disable())
-        .then(() => salla.api.product.availabilitySubscribe(data))
-        .then(() => {
-        this.isSubscribed = true;
-        salla.storage.set(`product-${this.productId}-subscribed`, true);
-      }) //no need to wait until finishing alert animation
-        .then(() => this.btn.stop())
-        .then(() => this.modal.close())
-        .catch(() => this.btn.stop() && this.btn.enable());
-    };
-    // helpers
-    this.typing = (e, submitMethod) => {
-      const error = e.target.nextElementSibling;
-      e.target.classList.remove('s-has-error');
-      (error === null || error === void 0 ? void 0 : error.classList.contains('s-product-availability-error-msg')) && (error.innerText = '');
-      e.key == 'Enter' && submitMethod();
-    };
-    salla.lang.onLoaded(() => {
-      var _a;
-      this.translationLoaded = true;
-      this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
-      (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title_);
-    });
-    if (this.isUser)
-      return;
-    this.channelsWatcher(this.channels);
-    this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
-    this.host.removeAttribute('title');
-    this.isVisitorSubscribed = salla.storage.get(`product-${this.productId}-subscribed`);
-  }
-  channelsWatcher(newValue) {
-    this.channels_ = !!newValue ? newValue.split(',') : [];
-  }
-  async validateform() {
-    try {
-      if (this.channels_.includes('email')) {
-        const isEmailValid = Helper.Helper.isValidEmail(this.email.value);
-        if (isEmailValid)
-          return;
-        !isEmailValid && this.validateField(this.email, salla.lang.get('common.elements.email_is_valid'));
-      }
-      if (this.channels_.includes('sms')) {
-        const isPhoneValid = await this.mobileInput.isValid();
-        if (isPhoneValid)
-          return;
-      }
-    }
-    catch (error) {
-      throw ('Please insert required fields');
-    }
-  }
-  validateField(field, errorMsg) {
-    field.classList.add('s-has-error');
-    field.nextElementSibling['innerText'] = '* ' + errorMsg;
-  }
-  render() {
-    return (index.h(index.Host, { class: "s-product-availability-wrap" }, this.isSubscribed || this.isVisitorSubscribed
-      ? index.h("div", { class: "s-product-availability-subscribed" }, index.h("span", { innerHTML: BellRingIcon, class: "s-product-availability-subs-icon" }), " ", salla.lang.get('pages.products.notify_availability_success'))
-      :
-        index.h("salla-button", { width: "wide", onClick: () => this.isUser ? this.submit() : this.modal.open() }, salla.lang.get('pages.products.notify_availability')), this.isUser || this.isSubscribed || this.isVisitorSubscribed ? '' : this.renderModal()));
-  }
-  renderModal() {
-    return (index.h("salla-modal", { ref: modal => this.modal = modal, "modal-title": this.title_, subTitle: salla.lang.get('pages.products.notify_availability_subtitle'), width: "sm" }, index.h("span", { slot: 'icon', innerHTML: BellRingIcon }), index.h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
-      index.h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.email')),
-      index.h("input", { class: "s-product-availability-input", onKeyDown: e => this.typing(e, this.submit), placeholder: salla.lang.get('common.elements.email_placeholder') || 'your@email.com', ref: el => this.email = el, type: "email" }),
-      index.h("span", { class: "s-product-availability-error-msg" })
-    ] : '', this.channels_.includes('sms') ? [
-      index.h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.mobile')),
-      index.h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e, this.submit) })
-    ] : ''), index.h("div", { slot: "footer", class: "s-product-availability-footer" }, index.h("salla-button", { class: "modal-cancel-btn", width: "wide", color: "light", fill: "outline", onClick: () => this.modal.close() }, salla.lang.get('common.elements.cancel')), index.h("salla-button", { class: "submit-btn", "loader-position": 'center', width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.submit')))));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "channels": ["channelsWatcher"]
-  }; }
-};
-SallaProductAvailability.style = sallaProductAvailabilityCss;
-
-exports.salla_product_availability = SallaProductAvailability;

package/dist/cjs/salla-product-size-guide.cjs.entry.js

@@ -1,52 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-0d0167d5.js');
-const Helper = require('./Helper-8ae6a805.js');
-
-const sallaProductSizeGuideCss = "";
-
-const SallaProductSizeGuide = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    Helper.Helper.setHost(document);
-    salla.event.on('size-guide::open', (product_id) => this.open(product_id));
-  }
-  /**
-   * Show the size-guide modal window
-   */
-  async open(product_id) {
-    this.modal.setTitle(salla.lang.get('pages.products.size_guides'));
-    this.modal.open();
-    return await salla.product.getSizeGuides(product_id)
-      .then((response) => {
-      this.guides = response.data;
-    })
-      .catch(e => console.log(e))
-      .finally(() => this.modal.stopLoading());
-  }
-  /**
-   *
-   * Hide the size-guide modal window
-   */
-  async close() {
-    return this.modal.close();
-  }
-  // !Todo - Enhance placeholder text
-  showPlaceholder() {
-    return index.h("salla-placeholder", { alignment: "center", iconSize: "xl" }, index.h("div", { slot: "title" }, salla.lang.get('pages.products.size_guide_placeholder')), index.h("div", { slot: "description" }, salla.lang.get('pages.products.size_guide_placeholder_info')));
-  }
-  render() {
-    return (index.h(index.Host, { class: "s-product-size-guide-block" }, index.h("salla-modal", { id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, index.h("div", { slot: "loading" }, index.h("div", { class: "s-product-size-guide-skeleton" }, index.h("salla-skeleton", { height: '15px', width: '25%' }), index.h("div", { class: "s-product-size-guide-skeleton-header" }, index.h("salla-skeleton", { height: '40px' }), index.h("salla-skeleton", { height: '40px' }), index.h("salla-skeleton", { height: '40px' }), index.h("salla-skeleton", { height: '40px' })), index.h("div", { class: "s-product-size-guide-skeleton-content" }, index.h("salla-skeleton", { height: '15px', width: '25%' }), index.h("salla-skeleton", { height: '10px', width: '75%' }), index.h("salla-skeleton", { height: '10px', width: '50%' }), index.h("salla-skeleton", { height: '10px', width: '75%' }), index.h("salla-skeleton", { height: '10px', width: '100%' }), index.h("salla-skeleton", { height: '10px', width: '25%' }), index.h("salla-skeleton", { height: '10px', width: '60%' }), index.h("salla-skeleton", { height: '10px', width: '45%' }), index.h("salla-skeleton", { height: '10px', width: '30%' })))), index.h("slot", { name: "header" }), !!this.guides ?
-      [index.h("div", { class: "container px-8" }, index.h("salla-tabs", null, this.guides.map((guide) => index.h("salla-tab-header", { slot: "header", name: guide.name }, index.h("span", null, guide.name))), this.guides.map((guide) => index.h("salla-tab-content", { slot: "content", name: guide.name }, index.h("div", { innerHTML: guide.description })))))]
-      : this.showPlaceholder(), index.h("slot", { name: "footer" }))));
-  }
-  get host() { return index.getElement(this); }
-};
-SallaProductSizeGuide.style = sallaProductSizeGuideCss;
-
-exports.salla_product_size_guide = SallaProductSizeGuide;