@salla.sa/twilight-components 1.4.8 → 1.4.9

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

@@ -0,0 +1,225 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, h, Element, Method, State } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+/**
+ * @slot header - The top of the popup, has replaceable props `{name}`, `{message}`.
+ * @slot product - Replaces product card, has replaceable props `{name}`, `{url}`, `{image}`, `{price}`.
+ * @slot category - Replaces Category badge, has replaceable props `{name}`, `{url}`.
+ */
+export class SallaOfferModal {
+  constructor() {
+    var _a, _b;
+    this.offer = null;
+    this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
+    this.remember_my_choice = salla.lang.get('commone.remember_my_choice');
+    this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');
+    this.out_of_stock = salla.lang.get('pages.products.out_of_stock');
+    Helper.setHost(this.host);
+    salla.lang.onLoaded(() => {
+      this.offer_expires_in = salla.lang.get('pages.products.offer_expires_in');
+      this.remember_my_choice = salla.lang.get('common.elements.remember_my_choice');
+      this.add_to_cart = salla.lang.get('pages.cart.add_to_cart');
+      this.out_of_stock = salla.lang.get('pages.products.out_of_stock');
+    });
+    this.categorySlot = ((_a = Helper.getElement('[slot="category"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '<i class="s-offer-modal-badge-icon sicon-tag"></i><span class="s-offer-modal-badge-text">{name}</span>';
+    this.productSlot = ((_b = Helper.getElement('[slot="product"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || this.defaultProductSlot();
+    salla.product.event.onOfferExisted(offer => {
+      if (salla.storage.get('remember-offer-' + offer.id)) {
+        salla.log('User selected to don\'t show this offer again.');
+        return;
+      }
+      this.open(offer.product_id);
+    });
+  }
+  /**
+   * Show the available offers for the product
+   * @param product_id
+   */
+  async open(product_id) {
+    //TODO:: make sure there is only one offer
+    return salla.product.offers(product_id)
+      .then(response => this.showOffer(response.data[0]));
+  }
+  /**
+   * Show offer details
+   * @param {Offer} offer
+   */
+  async showOffer(offer) {
+    this.offer = offer;
+    this.offer_name = offer.name;
+    this.offer_message = offer.message;
+    this.modal.setTitle(this.offer_name);
+    return this.modal.open();
+  }
+  rememberMe(event) {
+    salla.storage.set('remember-offer-' + this.offer.id, event.target.checked);
+  }
+  //todo:: pass event then use sallaButton from it
+  addItem() {
+    // this here, is sallaButton
+    this['load']();
+    return salla.cart.api
+      .quickAdd(this['dataset'].id)
+      .finally(() => this['stop']());
+  }
+  defaultProductSlot() {
+    return '<a href={url} class="s-offer-modal-product-image-wrap"><img class="s-offer-modal-product-image" src="{image}" /></a>' +
+      '<div class="s-offer-modal-product-info">' +
+      '   <a href={url} class="s-offer-modal-product-name">{name}</a>' +
+      '   <div class="s-offer-modal-product-price">{price}</div>' +
+      '</div>';
+  }
+  render() {
+    var _a, _b;
+    return h("salla-modal", { id: "salla-offer-modal", "sub-title-first": true, icon: "sicon-special-discount", "sub-title": this.offer_message, ref: modal => this.modal = modal, "is-loading": this.offer === null }, this.offer !== null
+      ? [h("div", { class: "s-offer-modal-scrolled-slider-wrap" },
+          h("div", { class: "s-offer-modal-body s-offer-modal-scrolled-slider" }, ((_a = this.offer.get.categories) === null || _a === void 0 ? void 0 : _a.length) > 0
+            ? this.offer.get.categories.map(category => h("a", { href: category.urls.customer, class: "s-offer-modal-badge s-offer-modal-slider-item", innerHTML: this.categorySlot
+                .replace(/\{name\}/g, category.name)
+                .replace(/\{url\}/g, category.urls.customer) }))
+            : (_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.map(product => h("div", { class: { "s-offer-modal-product": true, "s-offer-modal-slider-item": true, "s-offer-modal-not-available": !product.is_available }, id: 'product_' + product.id, innerHTML: this.productSlot
+                .replace(/\{name\}/g, product.name)
+                .replace(/\{url\}/g, product.url)
+                .replace(/\{image\}/g, product.thumbnail)
+                .replace(/\{price\}/g, product.has_special_price
+                ? salla.money(product.price) + '<span class="s-offer-modal-product-old-price">' + salla.money(product.regular_price) + '</span>'
+                : salla.money(product.price)) },
+              h("div", { class: "s-offer-modal-btn-wrap" },
+                h("salla-button", { width: "wide", fill: 'outline', "data-id": product.id, disabled: !product.is_available, "loader-position": "center", onClick: this.addItem }, product.is_available ? this.add_to_cart : this.out_of_stock))))),
+          h("div", { class: "s-offer-modal-slider-nav" },
+            h("button", { class: "s-offer-modal-nav-btn s-offer-modal-prev-btn" },
+              h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_left" })),
+            h("button", { class: "s-offer-modal-nav-btn s-offer-modal-next-btn" },
+              h("span", { class: "s-offer-modal-nav-btn-icon sicon-keyboard_arrow_right" })))), h("div", { class: "s-offer-modal-footer", slot: "footer" },
+          this.offer.formatted_date ?
+            h("p", { class: "s-offer-modal-expiry" },
+              this.offer_expires_in,
+              " ",
+              this.offer.formatted_date)
+            : '',
+          h("label", { class: "s-offer-modal-remember-label" },
+            h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-modal-remember-input" }),
+            "\u00A0 ",
+            this.remember_my_choice)),
+      ] : '');
+  }
+  componentDidRender() {
+    // Sooo mini Slider
+    if (this.offer && window.screen.width > 639) {
+      let sliderWrap = this.modal.querySelector('.s-offer-modal-scrolled-slider-wrap'), slider = this.modal.querySelector('.s-offer-modal-scrolled-slider'), navButtons = this.modal.querySelectorAll('.s-offer-modal-nav-btn'), nexBtn = this.modal.querySelector('.s-offer-modal-next-btn'), prevBtn = this.modal.querySelector('.s-offer-modal-prev-btn'), items = this.modal.querySelectorAll('.s-offer-modal-slider-item'), sliderNavMargin = 20, // space before displaying the next/prev btns.
+      current = 0, // current slide
+      slidesToScroll = 3, itemsLength = items.length;
+      console.log('items[0]:', items[0]);
+      let itemSize = items[0].offsetWidth, sliderSize = itemsLength * itemSize, sliderWrapperSize = sliderWrap.offsetWidth, sliderInvisibleSize = sliderSize - sliderWrapperSize, isRTL = document.body.classList.contains('rtl') ? true : false;
+      if (sliderInvisibleSize > sliderNavMargin)
+        nexBtn.classList.add('s-offer-modal-btn-is-active');
+      window.onresize = function () {
+        sliderWrapperSize = sliderWrap.offsetWidth;
+        sliderInvisibleSize = sliderSize - sliderWrapperSize;
+      };
+      slider.addEventListener('scroll', function () {
+        let sliderPosition = Math.abs(slider.scrollLeft);
+        let sliderEndOffset = sliderInvisibleSize - sliderNavMargin;
+        // show & hide the navigation btns depending on scroll position
+        if (sliderPosition <= sliderNavMargin) {
+          nexBtn.classList.add('s-offer-modal-btn-is-active');
+          prevBtn.classList.remove('s-offer-modal-btn-is-active');
+        }
+        else if (sliderPosition < sliderEndOffset) {
+          // show both btns in the middle
+          nexBtn.classList.add('s-offer-modal-btn-is-active');
+          prevBtn.classList.add('s-offer-modal-btn-is-active');
+        }
+        else if (sliderPosition >= sliderEndOffset) {
+          nexBtn.classList.remove('s-offer-modal-btn-is-active');
+          prevBtn.classList.add('s-offer-modal-btn-is-active');
+        }
+      });
+      // Navigation
+      navButtons.forEach(btn => {
+        btn.addEventListener('click', function () {
+          btn.classList.contains('s-offer-modal-next-btn') ? current++ : current--;
+          slider.scrollTo({
+            top: 0,
+            left: itemSize * slidesToScroll * current * (isRTL ? -1 : 1),
+            behavior: 'smooth'
+          });
+        });
+      });
+    }
+  }
+  static get is() { return "salla-offer-modal"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-offer-modal.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-offer-modal.css"]
+  }; }
+  static get states() { return {
+    "offer": {},
+    "offer_name": {},
+    "offer_message": {},
+    "offer_expires_in": {},
+    "remember_my_choice": {},
+    "add_to_cart": {},
+    "out_of_stock": {}
+  }; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "(product_id: number) => Promise<any>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "product_id"
+              }],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "Show the available offers for the product",
+        "tags": [{
+            "name": "param",
+            "text": "product_id"
+          }]
+      }
+    },
+    "showOffer": {
+      "complexType": {
+        "signature": "(offer: any) => Promise<HTMLElement>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "offer"
+              }],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "Show offer details",
+        "tags": [{
+            "name": "param",
+            "text": "offer"
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,110 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Prop, State, h } from '@stencil/core';
+import Inbox from '../../assets/svg/inbox.svg';
+export class SallaPlaceholder {
+  constructor() {
+    /**
+     * 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.default_title = salla.lang.get('common.elements.no_options');
+      this.default_description = salla.lang.get('common.errors.empty_results');
+    });
+  }
+  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("span", null, this.default_title))),
+      h("div", { class: "s-placeholder-description" },
+        h("slot", { name: 'description' },
+          h("span", null, this.default_description)))));
+  }
+  static get is() { return "salla-placeholder"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-placeholder.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-placeholder.css"]
+  }; }
+  static get properties() { return {
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Custom icon to display, defaults to [`sicon-inbox`]"
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "Inbox"
+    },
+    "alignment": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'left' | 'center' | 'right'",
+        "resolved": "\"center\" | \"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines the alignment of contents. Defaults to [`left`]"
+      },
+      "attribute": "alignment",
+      "reflect": false,
+      "defaultValue": "'left'"
+    },
+    "iconSize": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+        "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The size of the icon. Defaults to [`md`]"
+      },
+      "attribute": "icon-size",
+      "reflect": false,
+      "defaultValue": "'md'"
+    }
+  }; }
+  static get states() { return {
+    "default_title": {},
+    "default_description": {}
+  }; }
+}

package/dist/collection/components/salla-product-availability/salla-product-availability.css

@@ -0,0 +1,5 @@
+/*
+* Salla Product Availability Component: popup modal to notify user if the product is available,
+* used in the product single page if the product isn't available.
+* You can use these classes to target the elements in the component.
+*/

package/dist/collection/components/salla-product-availability/salla-product-availability.js

@@ -0,0 +1,203 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
+import Helper from '../../Helpers/Helper';
+export class SallaProductAvailability {
+  constructor() {
+    this.isUser = Helper.isUser();
+    this.emailPlaceholder = 'your@email.com';
+    /**
+     * 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, _b, _c, _d;
+      // console.log('translations:', salla.lang);
+      this.subscribedMessage = salla.lang.get('pages.products.notify_availability_success');
+      this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
+      this.subTitle = salla.lang.get('pages.products.notify_availability_subtitle');
+      this.mobileLabel = salla.lang.get('common.elements.mobile');
+      this.emailLabel = salla.lang.get('common.elements.email');
+      this.emailPlaceholder = salla.lang.get('common.elements.email_placeholder') || 'your@email.com';
+      this.emailErrorMsg = salla.lang.get('common.elements.email_is_valid');
+      (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.title_);
+      (_b = this.btn) === null || _b === void 0 ? void 0 : _b.setText(salla.lang.get('common.elements.submit'));
+      (_c = this.cancelBtn) === null || _c === void 0 ? void 0 : _c.setText(salla.lang.get('common.elements.cancel'));
+      (_d = this.inlineBtn) === null || _d === void 0 ? void 0 : _d.setText(salla.lang.get('pages.products.notify_availability'));
+    });
+    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.isValidEmail(this.email.value);
+        if (isEmailValid)
+          return;
+        !isEmailValid && this.validateField(this.email, this.emailErrorMsg);
+      }
+      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 (h(Host, { class: "s-product-availability-wrap" },
+      this.isSubscribed || this.isVisitorSubscribed
+        ? h("div", { class: "s-product-availability-subscribed" },
+          h("i", { class: "sicon-bell-ring s-product-availability-subs-icon" }),
+          " ",
+          this.subscribedMessage)
+        :
+          h("salla-button", { width: "wide", onClick: () => this.isUser ? this.submit() : this.modal.open(), ref: btn => this.inlineBtn = btn }, salla.lang.get('pages.products.notify_availability')),
+      this.isUser || this.isSubscribed || this.isVisitorSubscribed ? '' : this.renderModal()));
+  }
+  renderModal() {
+    return (h("salla-modal", { ref: modal => this.modal = modal, "modal-title": this.title_, subTitle: this.subTitle, icon: "sicon-bell-ring", width: "sm" },
+      h("div", { class: "s-product-availability-body" },
+        this.channels_.includes('email') ? [
+          h("label", { class: "s-product-availability-label" }, this.emailLabel),
+          h("input", { class: "s-product-availability-input", onKeyDown: e => this.typing(e, this.submit), placeholder: this.emailPlaceholder, ref: el => this.email = el, type: "email" }),
+          h("span", { class: "s-product-availability-error-msg" })
+        ] : '',
+        this.channels_.includes('sms') ? [
+          h("label", { class: "s-product-availability-label" }, this.mobileLabel),
+          h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e, this.submit) })
+        ] : ''),
+      h("div", { slot: "footer", class: "s-product-availability-footer" },
+        h("salla-button", { class: "modal-cancel-btn", width: "wide", color: "light", fill: "outline", onClick: () => this.modal.close(), ref: btn => this.cancelBtn = btn }, salla.lang.get('common.elements.cancel')),
+        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')))));
+  }
+  static get is() { return "salla-product-availability"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-product-availability.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-product-availability.css"]
+  }; }
+  static get properties() { return {
+    "channels": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'sms' | 'mobile' | 'sms,mobile'",
+        "resolved": "\"mobile\" | \"sms\" | \"sms,mobile\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Notification channels"
+      },
+      "attribute": "channels",
+      "reflect": false
+    },
+    "productId": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "product id that can visitor subscribe to its availability notification"
+      },
+      "attribute": "product-id",
+      "reflect": false,
+      "defaultValue": "salla.config.get('page.id')"
+    },
+    "isSubscribed": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "is current user already subscribed"
+      },
+      "attribute": "is-subscribed",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "subTitle": {},
+    "mobileLabel": {},
+    "emailLabel": {},
+    "emailPlaceholder": {},
+    "subscribedMessage": {},
+    "title_": {},
+    "emailErrorMsg": {},
+    "isVisitorSubscribed": {}
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "channels",
+      "methodName": "channelsWatcher"
+    }]; }
+}

package/dist/collection/components/salla-product-size-guide/salla-product-size-guide.css

@@ -0,0 +1,4 @@
+/*
+* Salla Product Size Guide Component: has many sizes, styles and loading state.
+* You can use these classes to target the elements in the component.
+*/

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

@@ -0,0 +1,103 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Component, Host, State, Method, Element, h } from '@stencil/core';
+import Helper from "../../Helpers/Helper";
+export class SallaProductSizeGuide {
+  constructor() {
+    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" }))));
+  }
+  static get is() { return "salla-product-size-guide"; }
+  static get originalStyleUrls() { return {
+    "$": ["salla-product-size-guide.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["salla-product-size-guide.css"]
+  }; }
+  static get states() { return {
+    "guides": {},
+    "productId": {}
+  }; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "(product_id: number) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "Show the size-guide modal window",
+        "tags": []
+      }
+    },
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<HTMLElement>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<HTMLElement>"
+      },
+      "docs": {
+        "text": "\nHide the size-guide modal window",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/salla-quantity-input/salla-quantity-input.css

@@ -0,0 +1,4 @@
+/*
+* Salla Qunatity Input Component: quantity input with increase & decrease buttons.
+* You can use these classes to target the elements in the component.
+*/