@salla.sa/twilight-components 1.0.160 → 1.1.4

package/dist/components/salla-loyalty.js

@@ -0,0 +1,255 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$a } from './salla-button2.js';
+import { d as defineCustomElement$9 } from './salla-list-tile2.js';
+import { d as defineCustomElement$8 } from './salla-loading2.js';
+import { d as defineCustomElement$7 } from './salla-modal2.js';
+import { d as defineCustomElement$6 } from './salla-placeholder2.js';
+import { d as defineCustomElement$5 } from './salla-swiper2.js';
+import { d as defineCustomElement$4 } from './salla-tab-content2.js';
+import { d as defineCustomElement$3 } from './salla-tab-header2.js';
+import { d as defineCustomElement$2 } from './salla-tabs2.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;
+      }
+
+      .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 CheckCircle = `<!-- 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>check-circle</title>
+<path d="M19.557 11.26l-4.593 6.891-2.891-1.927c-0.616-0.411-1.441-0.243-1.849 0.369-0.409 0.612-0.244 1.441 0.369 1.849l4 2.667c0.228 0.152 0.485 0.224 0.739 0.224 0.431 0 0.855-0.208 1.111-0.593l5.333-8c0.409-0.612 0.244-1.441-0.369-1.849-0.616-0.411-1.443-0.243-1.849 0.369zM16 0c-8.823 0-16 7.177-16 16s7.177 16 16 16 16-7.177 16-16-7.177-16-16-16zM16 29.333c-7.352 0-13.333-5.981-13.333-13.333s5.981-13.333 13.333-13.333 13.333 5.981 13.333 13.333-5.981 13.333-13.333 13.333z"></path>
+</svg>
+`;
+
+const sallaLoyaltyCss = "";
+
+const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.loyaltyProgram = undefined;
+    this.buttonLoading = false;
+    this.selectedItem = undefined;
+    this.askConfirmation = false;
+    salla.lang.onLoaded(() => {
+      this.points = salla.lang.get('pages.loyalty_program.point');
+      this.exchange_points = salla.lang.get('pages.loyalty_program.exchange_points');
+      this.are_you_sure_to_exchange = salla.lang.get('pages.loyalty_program.are_you_sure_to_exchange');
+      this.for = salla.lang.get('pages.loyalty_program.for');
+      this.confirm = salla.lang.get('pages.loyalty_program.confirm');
+      this.cancel = salla.lang.get('pages.loyalty_program.cancellation');
+      this.loyalty_placeholder = salla.lang.get('pages.loyalty.points');
+      this.loyalty_placeholder_info = salla.lang.get('pages.loyalty.points');
+    });
+  }
+  setSelectedPrizeItem(item) {
+    if (!this.selectedItem || this.selectedItem.id != item.id) {
+      this.selectedItem = item;
+    }
+    else {
+      this.selectedItem = undefined;
+    }
+  }
+  prizeItem(item) {
+    var klass = {
+      's-loyalty-prize-item-selected': !!this.selectedItem && this.selectedItem.id == item.id,
+      "s-loyalty-prize-item": true
+    };
+    return h("div", { onClick: () => this.setSelectedPrizeItem(item), class: klass }, h("span", { class: "s-loyalty-prize-item-check", innerHTML: CheckCircle }), h("img", { class: "s-loyalty-prize-item-image", src: item.image, alt: item.name }), h("div", { class: "s-loyalty-prize-item-title" }, item.name), h("div", { class: "s-loyalty-prize-item-subtitle" }, item.description), h("div", { class: "s-loyalty-prize-item-points" }, item.cost_points, " ", this.points));
+  }
+  getConfirmationModal() {
+    var _a, _b;
+    return h("div", null, h("salla-placeholder", { alignment: "center", icon: Star3, class: "s-loyalty-confirmation-modal-content" }, h("div", { slot: "title", class: "s-loyalty-confirmation-title" }, this.exchange_points), h("div", { slot: "description" }, h("span", null, this.are_you_sure_to_exchange, " ( ", h("strong", null, (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.cost_points), " ) ", this.for, " ( ", h("strong", null, (_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.name), " )"))), h("div", { class: "s-loyalty-confirmation-actions" }, h("salla-button", { fill: 'outline', width: "wide", onClick: () => this.cancelProcess() }, this.cancel), h("salla-button", { loading: this.buttonLoading, width: "wide", onClick: () => this.exchangeLoyaltyPoint() }, this.confirm)));
+  }
+  /**
+   * Show loyalty modal
+   */
+  async 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();
+  }
+  /**
+   * Open Confirmation modal
+   */
+  async openConfirmation() {
+    return await this.modal.close()
+      .then(() => this.confirmationModal.open())
+      .catch(e => console.log(e));
+  }
+  /**
+   * Cancel process
+   */
+  async cancelProcess() {
+    await this.confirmationModal.close()
+      .then(() => this.selectedItem = null)
+      .catch(e => console.log(e));
+  }
+  /**
+   *
+   * @param {number} loyalty_prize_id
+   *
+   */
+  async exchangeLoyaltyPoint() {
+    this.buttonLoading = true;
+    const cartId = await salla.cart.api.getCurrentCartId();
+    return await salla.loyalty.exchangePoint(this.selectedItem.id, cartId)
+      .then((response) => {
+      this.loyaltyProgram = response.data;
+    })
+      .catch(e => console.log(e))
+      .finally(() => this.buttonLoading = false);
+  }
+  render() {
+    return (h(Host, null, h("salla-list-tile", { id: 's-loyalty-activator' }, h("div", { slot: "icon", class: "s-loyalty-activator-icon", innerHTML: Star3 }), h("div", { slot: "subtitle" }, h("div", null, "You have 200 points that you can use for great prizes", h("salla-button", { shape: "link", color: "danger", onClick: () => this.open() }, "Get Loyalty Program")))), h("salla-modal", { id: "salla-loyalty-confirmation-modal", noPadding: true, position: 'top', width: "sm", ref: modal => this.confirmationModal = modal }, this.getConfirmationModal()), h("salla-modal", { isLoading: true, id: "salla-loyalty-modal", width: "lg", ref: modal => this.modal = modal }, !!this.loyaltyProgram ?
+      [
+        h("salla-list-tile", { id: 's-loyalty-header', class: "s-loyalty-header" }, h("div", { slot: "icon", class: "s-loyalty-header-icon" }, h("img", { src: "https://cdn.salla.network/custom-themes/images/flat.svg", alt: "flat" })), h("div", { slot: "title", class: "s-loyalty-header-title" }, this.loyaltyProgram.prize_promotion_title), h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, this.loyaltyProgram.prize_promotion_description)),
+        h("salla-tabs", null, this.loyaltyProgram.prizes.map((prize) => h("salla-tab-header", { slot: "header", name: prize.title }, h("span", null, prize.title))), this.loyaltyProgram.prizes.map((prize) => h("salla-tab-content", { slot: "content", name: prize.title }, h("salla-swiper", { "space-between-items": "20" }, prize.items.map((item) => this.prizeItem(item)))))),
+        h("salla-button", { disabled: !this.selectedItem, width: "wide", class: "s-loyalty-program-redeem-btn", onClick: () => this.openConfirmation() }, this.exchange_points)
+      ]
+      :
+        h("salla-placeholder", { alignment: "center", iconSize: "xl" }, h("div", { slot: "title" }, this.loyalty_placeholder), h("div", { slot: "description" }, this.loyalty_placeholder_info)), h("slot", { name: "footer" }))));
+  }
+  static get style() { return sallaLoyaltyCss; }
+}, [4, "salla-loyalty", {
+    "loyaltyProgram": [32],
+    "buttonLoading": [32],
+    "selectedItem": [32],
+    "askConfirmation": [32],
+    "points": [32],
+    "exchange_points": [32],
+    "are_you_sure_to_exchange": [32],
+    "for": [32],
+    "cancel": [32],
+    "confirm": [32],
+    "loyalty_placeholder": [32],
+    "loyalty_placeholder_info": [32],
+    "open": [64],
+    "close": [64],
+    "exchangeLoyaltyPoint": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["salla-loyalty", "salla-button", "salla-list-tile", "salla-loading", "salla-modal", "salla-placeholder", "salla-swiper", "salla-tab-content", "salla-tab-header", "salla-tabs"];
+  components.forEach(tagName => { switch (tagName) {
+    case "salla-loyalty":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SallaLoyalty$1);
+      }
+      break;
+    case "salla-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "salla-list-tile":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "salla-loading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "salla-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "salla-placeholder":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "salla-swiper":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "salla-tab-content":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "salla-tab-header":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "salla-tabs":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SallaLoyalty = SallaLoyalty$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaLoyalty, defineCustomElement };

package/dist/components/salla-modal2.js

@@ -3,6 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { H as Helper } from './Helper.js';
+import { d as defineCustomElement$1 } from './salla-loading2.js';
 
 const sallaModalCss = "";
 
@@ -126,18 +127,16 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //todo:: pref for each modal
   render() {
     this.host.id = this.host.id || 'salla-modal';
-    return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + '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" }))
-            : '', h("div", { class: "s-modal-header-inner" }, this.iconStyle || this.icon
-            ? 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.modalTitle }), h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))),
-          h("slot", null),
-          h("slot", { name: "footer" })
-        ]))));
+    if (this.isLoading) {
+      return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.width + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, h("salla-loading", null), h("div", { class: "s-hidden" }, h("slot", null))))));
+    }
+    return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal() }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.width + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding') }, 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.modalTitle || this.subTitle ?
+      h("div", { class: "s-modal-header-inner" }, this.iconStyle || this.icon
+        ? 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.modalTitle }), h("p", { class: { 's-modal-sub-title': true }, innerHTML: this.subTitle })))
+      : ""), h("slot", null), h("slot", { name: "footer" })))));
   }
   //move the modal as root dom, because we need the model to be outside the forms
   componentDidLoad() {
@@ -171,13 +170,18 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["salla-modal"];
+  const components = ["salla-modal", "salla-loading"];
   components.forEach(tagName => { switch (tagName) {
     case "salla-modal":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, SallaModal);
       }
       break;
+    case "salla-loading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
   } });
 }
 defineCustomElement();

package/dist/components/salla-offer-modal.js

@@ -3,7 +3,8 @@
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { H as Helper } from './Helper.js';
-import { d as defineCustomElement$3 } from './salla-button2.js';
+import { d as defineCustomElement$4 } from './salla-button2.js';
+import { d as defineCustomElement$3 } from './salla-loading2.js';
 import { d as defineCustomElement$2 } from './salla-modal2.js';
 
 const sallaOfferModalCss = "";
@@ -153,7 +154,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["salla-offer-modal", "salla-button", "salla-modal"];
+  const components = ["salla-offer-modal", "salla-button", "salla-loading", "salla-modal"];
   components.forEach(tagName => { switch (tagName) {
     case "salla-offer-modal":
       if (!customElements.get(tagName)) {
@@ -161,6 +162,11 @@ function defineCustomElement$1() {
       }
       break;
     case "salla-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "salla-loading":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/salla-placeholder.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaPlaceholder extends Components.SallaPlaceholder, HTMLElement {}
+export const SallaPlaceholder: {
+  prototype: SallaPlaceholder;
+  new (): SallaPlaceholder;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/salla-placeholder.js

@@ -0,0 +1,9 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { S as SallaPlaceholder$1, d as defineCustomElement$1 } from './salla-placeholder2.js';
+
+const SallaPlaceholder = SallaPlaceholder$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaPlaceholder, defineCustomElement };

package/dist/components/salla-placeholder2.js

@@ -0,0 +1,64 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * 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';
+  }
+  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 (h("div", { class: this.alignmentClass() }, h("div", { class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { class: "s-placeholder-title" }, h("slot", { name: 'title' })), h("div", { class: "s-placeholder-description" }, h("slot", { name: 'description' }))));
+  }
+  static get style() { return sallaPlaceholderCss; }
+}, [4, "salla-placeholder", {
+    "icon": [1],
+    "alignment": [1],
+    "iconSize": [1, "icon-size"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["salla-placeholder"];
+  components.forEach(tagName => { switch (tagName) {
+    case "salla-placeholder":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SallaPlaceholder);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SallaPlaceholder as S, defineCustomElement as d };

package/dist/components/salla-product-availability2.js

@@ -3,7 +3,8 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { H as Helper } from './Helper.js';
-import { d as defineCustomElement$3 } from './salla-button2.js';
+import { d as defineCustomElement$4 } from './salla-button2.js';
+import { d as defineCustomElement$3 } from './salla-loading2.js';
 import { d as defineCustomElement$2 } from './salla-modal2.js';
 import { d as defineCustomElement$1 } from './salla-tel-input2.js';
 
@@ -142,7 +143,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["salla-product-availability", "salla-button", "salla-modal", "salla-tel-input"];
+  const components = ["salla-product-availability", "salla-button", "salla-loading", "salla-modal", "salla-tel-input"];
   components.forEach(tagName => { switch (tagName) {
     case "salla-product-availability":
       if (!customElements.get(tagName)) {
@@ -150,6 +151,11 @@ function defineCustomElement() {
       }
       break;
     case "salla-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "salla-loading":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/salla-product-size-guide.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaProductSizeGuide extends Components.SallaProductSizeGuide, HTMLElement {}
+export const SallaProductSizeGuide: {
+  prototype: SallaProductSizeGuide;
+  new (): SallaProductSizeGuide;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/salla-product-size-guide.js

@@ -0,0 +1,107 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { H as Helper } from './Helper.js';
+import { d as defineCustomElement$7 } from './salla-loading2.js';
+import { d as defineCustomElement$6 } from './salla-modal2.js';
+import { d as defineCustomElement$5 } from './salla-placeholder2.js';
+import { d as defineCustomElement$4 } from './salla-tab-content2.js';
+import { d as defineCustomElement$3 } from './salla-tab-header2.js';
+import { d as defineCustomElement$2 } from './salla-tabs2.js';
+
+const sallaProductSizeGuideCss = "";
+
+const SallaProductSizeGuide$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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 h("salla-placeholder", { alignment: "center", iconSize: "xl" }, h("div", { slot: "title" }, salla.lang.get('pages.products.size_guide_placeholder')), h("div", { slot: "description" }, salla.lang.get('pages.products.size_guide_placeholder_info')));
+  }
+  render() {
+    return (h(Host, { class: "s-product-size-guide-block" }, h("salla-modal", { id: 'salla-product-size-guide-modal', isLoading: true, width: "md", ref: modal => this.modal = modal }, h("slot", { name: "header" }), !!this.guides ?
+      [h("div", { class: "container px-8" }, h("salla-tabs", null, this.guides.map((guide) => h("salla-tab-header", { slot: "header", name: guide.name }, h("span", null, guide.name))), this.guides.map((guide) => h("salla-tab-content", { slot: "content", name: guide.name }, h("div", { innerHTML: guide.description })))))]
+      : this.showPlaceholder(), h("slot", { name: "footer" }))));
+  }
+  get host() { return this; }
+  static get style() { return sallaProductSizeGuideCss; }
+}, [4, "salla-product-size-guide", {
+    "guides": [32],
+    "productId": [32],
+    "open": [64],
+    "close": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["salla-product-size-guide", "salla-loading", "salla-modal", "salla-placeholder", "salla-tab-content", "salla-tab-header", "salla-tabs"];
+  components.forEach(tagName => { switch (tagName) {
+    case "salla-product-size-guide":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SallaProductSizeGuide$1);
+      }
+      break;
+    case "salla-loading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "salla-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "salla-placeholder":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "salla-tab-content":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "salla-tab-header":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "salla-tabs":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SallaProductSizeGuide = SallaProductSizeGuide$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaProductSizeGuide, defineCustomElement };

package/dist/components/salla-rating-modal.js

@@ -3,7 +3,8 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { H as Helper } from './Helper.js';
-import { d as defineCustomElement$4 } from './salla-button2.js';
+import { d as defineCustomElement$5 } from './salla-button2.js';
+import { d as defineCustomElement$4 } from './salla-loading2.js';
 import { d as defineCustomElement$3 } from './salla-modal2.js';
 import { d as defineCustomElement$2 } from './salla-rating-stars2.js';
 
@@ -182,7 +183,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["salla-rating-modal", "salla-button", "salla-modal", "salla-rating-stars"];
+  const components = ["salla-rating-modal", "salla-button", "salla-loading", "salla-modal", "salla-rating-stars"];
   components.forEach(tagName => { switch (tagName) {
     case "salla-rating-modal":
       if (!customElements.get(tagName)) {
@@ -190,6 +191,11 @@ function defineCustomElement$1() {
       }
       break;
     case "salla-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "salla-loading":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }

package/dist/components/salla-search.js

@@ -3,6 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { H as Helper } from './Helper.js';
+import { d as defineCustomElement$3 } from './salla-loading2.js';
 import { d as defineCustomElement$2 } from './salla-modal2.js';
 
 const sallaSearchCss = "";
@@ -119,13 +120,18 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["salla-search", "salla-modal"];
+  const components = ["salla-search", "salla-loading", "salla-modal"];
   components.forEach(tagName => { switch (tagName) {
     case "salla-search":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, SallaSearch$1);
       }
       break;
+    case "salla-loading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
     case "salla-modal":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();

package/dist/components/salla-swiper.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaSwiper extends Components.SallaSwiper, HTMLElement {}
+export const SallaSwiper: {
+  prototype: SallaSwiper;
+  new (): SallaSwiper;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;