@salla.sa/twilight-components 2.11.48 → 2.11.50

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

@@ -16,37 +16,46 @@ export class SallaProductOptions {
       exl: 'application/excel,application/vnd.ms-excel,application/x-excel,application/x-msexcel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
       txt: 'text/plain',
     };
-    this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
+    this.outOfStockText = '';
     this.donationAmount = salla.lang.get('pages.products.donation_amount');
     this.selectedOptions = [];
+    this.outSkus = [];
     /**
      * The id of the product to which the options are going to be fetched for.
      */
     this.productId = salla.config.get('page.id');
-    this.canDisabled = !salla.config.get('store.settings.products.notify_options_availability');
+    this.canDisabled = salla.config.get('store.settings.products.notify_options_availability');
     salla.lang.onLoaded(() => {
       this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
       this.donationAmount = salla.lang.get('pages.products.donation_amount');
     });
     if (this.options) {
       try {
-        this.optionsData = JSON.parse(this.options);
+        this.setOptionsData(JSON.parse(this.options));
         return;
       }
       catch (e) {
         salla.log('Bad json passed via options prop');
       }
     }
-    if (Array.isArray(this.optionsData)) {
+    if (!Array.isArray(this.optionsData)) {
       salla.log('Options is not an array[] ---> ', this.optionsData);
-      this.optionsData = [];
+      this.setOptionsData([]);
     }
     if (this.productId && !salla.url.is_page('cart')) {
-      salla.api.product.getDetails(this.productId, ['options']).then((resp) => {
-        this.optionsData = resp.data.options;
-      });
+      salla.api.product.getDetails(this.productId, ['options']).then(resp => this.setOptionsData(resp.data.options));
     }
   }
+  setOptionsData(optionsData) {
+    var _a, _b;
+    this.optionsData = optionsData;
+    let that = this;
+    (_b = (_a = this.optionsData[0]) === null || _a === void 0 ? void 0 : _a.details) === null || _b === void 0 ? void 0 : _b.forEach(function (detail) {
+      Object.entries(detail.skus_availability || {})
+        .filter(sku => !sku[1])
+        .map(sku => that.outSkus.push(Number(sku[0])));
+    });
+  }
   /**
    * Get the id's of the selected options.
    * */
@@ -58,6 +67,12 @@ export class SallaProductOptions {
     });
     return selectedOptions;
   }
+  /**
+   * Return true if there is any out of stock options are selected and vise versa.
+   * */
+  async hasOutOfStockOption() {
+    return this.selectedOptions.some(option => option.is_out) || (this.selectedSkus.length && this.selectedSkus.every(sku => this.outSkus.includes(sku)));
+  }
   /**
    * Get selected options.
    * */
@@ -80,10 +95,19 @@ export class SallaProductOptions {
     }
     const index = this.selectedOptions.findIndex(option => option.option_id === data.option.id);
     index > -1 ? this.selectedOptions[index] = Object.assign(Object.assign({}, data.detail), { option_id: data.option.id }) : this.selectedOptions.push(Object.assign(Object.assign({}, data.detail), { option_id: data.option.id }));
+    this.setSelectedSkus();
     this.handleRequiredMultipleOptions(option);
     this.changed.emit(data);
     salla.event.emit('product-options::change', data);
   }
+  /**
+   * loop throw all selected details, then get common sku, if it's only one, means we selected all of them;
+   */
+  setSelectedSkus() {
+    this.selectedSkus = this.selectedOptions.map(detail => Object.keys(detail.skus_availability || {}))
+      .reduce((p, c) => p.filter(e => c.includes(e)))
+      .map(sku => Number(sku));
+  }
   handleRequiredMultipleOptions(option) {
     if (option.type !== DisplayType.MULTIPLE_OPTIONS || !option.required) {
       return;
@@ -147,7 +171,7 @@ export class SallaProductOptions {
           h("salla-progress-bar", { donation: option.donation }))
         : '',
       h("div", { class: "s-product-options-donation-input-group" },
-        h("input", { type: "text", id: "donating-amount", name: "donating_amount", class: "s-form-control", value: option.value, placeholder: option.placeholder, onInput: e => salla.helpers.inputDigitsOnly(e.target), onBlur: e => this.changedHandler(e, option) }),
+        h("input", { type: "text", id: "donating-amount", name: "donating_amount", class: "s-form-control", value: option.value, required: true, placeholder: option.placeholder, onInput: e => salla.helpers.inputDigitsOnly(e.target), onBlur: e => this.changedHandler(e, option) }),
         h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol)));
   }
   fileUploader(option, additions = null) {
@@ -208,7 +232,7 @@ export class SallaProductOptions {
   dateOption(option) {
     //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23
     return h("div", { class: "s-product-options-date-element" },
-      h("salla-datetime-picker", { value: option.value, placeholder: option.name, required: option.required, name: `options[${option.id}]`, onPicked: e => this.changedHandler(e, option) }));
+      h("salla-datetime-picker", { value: option.value, placeholder: option.name, required: option.required, minDate: new Date(), name: `options[${option.id}]`, onPicked: e => this.changedHandler(e, option) }));
   }
   //@ts-ignore
   datetimeOption(option) {
@@ -219,43 +243,67 @@ export class SallaProductOptions {
   /**
    * ============= Advanced options =============
    */
-  getOptionDetailName(detail, outOfStock = true) {
+  // <<<<<<< HEAD
+  getOptionDetailName(detail, outOfStock = true, optionType) {
+    if (optionType && optionType == DisplayType.COLOR) {
+      return detail.name
+        + ((outOfStock && this.isOptionDetailOut(detail)) ? ` <br/> <p> ${this.outOfStockText} </p>` : '')
+        + (detail.additional_price ? ` <p> (${salla.money(detail.additional_price)}) </p>` : '');
+    }
     return detail.name
-      + ((outOfStock && detail.is_out) ? ` - ${this.outOfStockText}` : '')
+      + ((outOfStock && this.isOptionDetailOut(detail)) ? ` - ${this.outOfStockText}` : '')
       + (detail.additional_price ? ` (${salla.money(detail.additional_price)})` : '');
   }
+  isOptionDetailOut(detail) {
+    var _a;
+    if (detail.is_out || !detail.skus_availability || !((_a = this.selectedSkus) === null || _a === void 0 ? void 0 : _a.length)) {
+      return detail.is_out;
+    }
+    let isDetailSelected = this.selectedOptions.filter(option => option.id == detail.id).length;
+    //if the current options is the only selected option, so we are sure that it's not out, because there is no other options selected yet
+    if (isDetailSelected && this.selectedOptions.length == 1) {
+      return false;
+    }
+    //if current details has sku in the possible outSkus it's out for sure
+    if (isDetailSelected) {
+      //here we will get the possible outSkus for current selected options
+      let outSelectableSkus = this.selectedSkus.filter(sku => this.outSkus.includes(sku));
+      return Object.keys(detail.skus_availability).some(sku => outSelectableSkus.includes(Number(sku)));
+    }
+    return this.selectedOptions.some(option => option.is_out && option.option_id !== detail.option_id);
+  }
   singleOption(option) {
     return h("div", null,
       h("select", { name: `options[${option.id}]`, required: option.required, class: "s-form-control", onChange: e => this.changedHandler(e, option) },
         h("option", { value: "" }, option.placeholder), option === null || option === void 0 ? void 0 :
         option.details.map((detail) => {
-          return h("option", { value: detail.id, disabled: this.canDisabled && detail.is_out, selected: detail.is_selected }, this.getOptionDetailName(detail));
+          return h("option", { value: detail.id, disabled: this.canDisabled && this.isOptionDetailOut(detail), selected: detail.is_selected }, this.getOptionDetailName(detail));
         })));
   }
   multipleOptions(option) {
     return h("div", { class: { "s-product-options-multiple-options-wrapper": true, 'required': option.required } }, option === null || option === void 0 ? void 0 : option.details.map((detail) => {
       return h("div", null,
-        h("input", { type: "checkbox", value: detail.id, disabled: detail.is_out, checked: detail.is_selected, required: option.required, name: `options[${option.id}][]`, id: `field-${option.id}-${detail.id}`, onChange: (e) => this.changedHandler(e, option), "aria-describedby": `options[${option.id}]-description` }),
+        h("input", { type: "checkbox", value: detail.id, disabled: this.isOptionDetailOut(detail), checked: detail.is_selected, required: option.required, name: `options[${option.id}][]`, id: `field-${option.id}-${detail.id}`, onChange: (e) => this.changedHandler(e, option), "aria-describedby": `options[${option.id}]-description` }),
         h("label", { htmlFor: `field-${option.id}-${detail.id}` }, this.getOptionDetailName(detail)));
     }));
   }
   //@ts-ignore
   colorOption(option) {
-    return h("fieldset", { class: "s-product-options-colors-wrapper" }, option === null || option === void 0 ? void 0 : option.details.map((detail) => h("div", null,
-      h("input", { type: "radio", value: detail.id, required: option.required, checked: detail.is_selected, name: `options[${option.id}]`, disabled: this.canDisabled && detail.is_out, id: `color-${this.productId}-${option.id}-${detail.id}`, onChange: e => this.changedHandler(e, option) }),
+    return h("fieldset", { class: "s-product-options-colors-wrapper" }, option === null || option === void 0 ? void 0 : option.details.map((detail) => h("div", { class: "s-product-options-colors-item" },
+      h("input", { type: "radio", value: detail.id, required: option.required, checked: detail.is_selected, name: `options[${option.id}]`, disabled: this.canDisabled && this.isOptionDetailOut(detail), id: `color-${this.productId}-${option.id}-${detail.id}`, onChange: e => this.changedHandler(e, option) }),
       h("label", { htmlFor: `color-${this.productId}-${option.id}-${detail.id}` },
         h("span", { style: { "background-color": detail.color } }),
-        h("p", null, this.getOptionDetailName(detail))))));
+        h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) })))));
   }
   //@ts-ignore
   thumbnailOption(option) {
     return h("div", { class: "s-product-options-thumbnails-wrapper" }, option.details.map((detail) => {
       return h("div", null,
-        h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, required: option.required, checked: detail.is_selected, name: `options[${option.id}]`, "data-img-id": detail.option_value, disabled: this.canDisabled && detail.is_out, id: `option_${this.productId}-${option.id}_${detail.id}`, onChange: (e) => this.changedHandler(e, option) }),
+        h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, required: option.required, checked: detail.is_selected, name: `options[${option.id}]`, "data-img-id": detail.option_value, disabled: this.canDisabled && this.isOptionDetailOut(detail), id: `option_${this.productId}-${option.id}_${detail.id}`, onChange: (e) => this.changedHandler(e, option) }),
         h("label", { htmlFor: `option_${this.productId}-${option.id}_${detail.id}`, "data-img-id": detail.option_value, class: "go-to-slide" },
           h("img", { "data-src": detail.image, src: detail.image, title: detail.name, alt: detail.name }),
           h("span", { innerHTML: CheckCircleIcon, class: "s-product-options-thumbnails-icon" }),
-          detail.is_out ?
+          this.isOptionDetailOut(detail) ?
             [
               h("small", { class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText),
               this.canDisabled ? h("div", { class: "s-product-options-thumbnails-badge-overlay" }) : '',
@@ -315,7 +363,9 @@ export class SallaProductOptions {
     "outOfStockText": {},
     "donationAmount": {},
     "selectedOptions": {},
-    "canDisabled": {}
+    "canDisabled": {},
+    "selectedSkus": {},
+    "selectedOutSkus": {}
   }; }
   static get events() { return [{
       "method": "changed",
@@ -350,6 +400,22 @@ export class SallaProductOptions {
         "tags": []
       }
     },
+    "hasOutOfStockOption": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "Return true if there is any out of stock options are selected and vise versa.",
+        "tags": []
+      }
+    },
     "getSelectedOptions": {
       "complexType": {
         "signature": "() => Promise<any[]>",

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

@@ -192,7 +192,7 @@ export class SallaScopees {
                   h("div", { class: "s-scopes-search-icon", innerHTML: Search }),
                   h("input", { type: "text", class: "s-scopes-search-input", onInput: e => this.handleSearchFieldTyping(e), enterkeyhint: "search", placeholder: salla.lang.get('blocks.scope.searching_for_a_branch') }))
                 : "",
-              this.hasError || ((_d = this.scopes) === null || _d === void 0 ? void 0 : _d.length) < 2 ?
+              this.hasError || ((_d = this.originalScopesList) === null || _d === void 0 ? void 0 : _d.length) < 2 ?
                 this.placeholderContent()
                 : this.mode === ModeType.DEFAULT ? this.defaultContent() : this.availabilityContent())])));
   }

package/dist/components/index.d.ts

@@ -5,6 +5,7 @@ export { SallaCartSummary as SallaCartSummary } from '../types/components/salla-
 export { SallaColorPicker as SallaColorPicker } from '../types/components/salla-color-picker/salla-color-picker';
 export { SallaCommentForm as SallaCommentForm } from '../types/components/salla-comment-form/salla-comment-form';
 export { SallaConditionalFields as SallaConditionalFields } from '../types/components/salla-conditional-fields/salla-conditional-fields';
+export { SallaCountDown as SallaCountDown } from '../types/components/salla-count-down/salla-count-down';
 export { SallaDatetimePicker as SallaDatetimePicker } from '../types/components/salla-datetime-picker/salla-datetime-picker';
 export { SallaFileUpload as SallaFileUpload } from '../types/components/salla-file-upload/salla-file-upload';
 export { SallaGifting as SallaGifting } from '../types/components/salla-gifting/salla-gifting';

package/dist/components/index.js

@@ -9,6 +9,7 @@ export { SallaCartSummary, defineCustomElement as defineCustomElementSallaCartSu
 export { SallaColorPicker, defineCustomElement as defineCustomElementSallaColorPicker } from './salla-color-picker.js';
 export { SallaCommentForm, defineCustomElement as defineCustomElementSallaCommentForm } from './salla-comment-form.js';
 export { SallaConditionalFields, defineCustomElement as defineCustomElementSallaConditionalFields } from './salla-conditional-fields.js';
+export { SallaCountDown, defineCustomElement as defineCustomElementSallaCountDown } from './salla-count-down.js';
 export { SallaDatetimePicker, defineCustomElement as defineCustomElementSallaDatetimePicker } from './salla-datetime-picker.js';
 export { SallaFileUpload, defineCustomElement as defineCustomElementSallaFileUpload } from './salla-file-upload.js';
 export { SallaGifting, defineCustomElement as defineCustomElementSallaGifting } from './salla-gifting.js';

package/dist/components/salla-add-product-button.js

@@ -83,16 +83,6 @@ const SallaAddProductButton$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     }
     return this.hostAttributes;
   }
-  pushSelectedOption(data) {
-    const index = this.selectedOptions.findIndex(option => option.option_id === data.option.id);
-    if (index > -1) {
-      this.selectedOptions[index] = Object.assign(Object.assign({}, data.detail), { option_id: data.option.id });
-    }
-    else {
-      this.selectedOptions.push(Object.assign(Object.assign({}, data.detail), { option_id: data.option.id }));
-    }
-    this.hasOutOfStockOption = this.selectedOptions.some(option => option.is_out);
-  }
   componentWillLoad() {
     this.hasLabel = !!this.host.innerHTML.replace('<!---->', '').trim();
   }
@@ -108,17 +98,18 @@ const SallaAddProductButton$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     if ((this.productStatus === 'out-and-notify' && this.channels) || this.hasOutOfStockOption) {
       return h(Host, null, h("salla-product-availability", Object.assign({}, this.getBtnAttributes())));
     }
-    return h(Host, null, h("salla-button", Object.assign({ color: this.productStatus === 'sale' ? 'primary' : 'light', fill: this.productStatus === 'sale' ? 'solid' : 'outline', ref: el => this.btn = el, onClick: event => this.addProductToCart(event), disabled: this.productStatus !== 'sale' }, this.getBtnAttributes(), { "loader-position": "center", type: "button" }), h("slot", null)));
+    return h(Host, null, h("salla-button", Object.assign({ color: this.productStatus === 'sale' ? 'primary' : 'light', type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', ref: el => this.btn = el, onClick: event => this.addProductToCart(event), disabled: this.productStatus !== 'sale' }, this.getBtnAttributes(), { "loader-position": "center" }), h("slot", null)));
   }
   componentDidLoad() {
     if (!this.notifyOptionsAvailability) {
       return;
     }
-    salla.event.on('product-options::change', data => {
+    salla.event.on('product-options::change', async (data) => {
+      var _a;
       if (!['thumbnail', 'color', 'single-option'].includes(data.option.type)) {
         return;
       }
-      this.pushSelectedOption(data);
+      this.hasOutOfStockOption = await ((_a = document.querySelector(`salla-product-options[product-id="${this.productId}"]`)) === null || _a === void 0 ? void 0 : _a.hasOutOfStockOption());
       this.hasLabel = false;
       if (!this.subscribedOptions || this.subscribedOptions === 'null') {
         return;

package/dist/components/salla-cart-summary.js

@@ -13,6 +13,7 @@ const SallaCartSummary$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.__registerHost();
     this.cartSummaryCount = salla.storage.get('cart.summary.count') || 0;
     this.cartSummaryTotal = salla.storage.get('cart.summary.total') || 0;
+    this.cartLabel = salla.config.get('user.language_code') === 'ar' ? 'السلة' : 'Cart';
     salla.cart.event.onUpdated((response) => {
       this.cartSummaryCount = response.count || 0;
       this.cartSummaryTotal = response.total || 0;
@@ -68,13 +69,15 @@ const SallaCartSummary$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     }, '-=1700');
   }
   render() {
-    return (h(Host, null, h("a", { class: "s-cart-summary-wrapper", href: salla.url.get('cart') }, h("div", { id: "s-cart-icon" }, h("slot", { name: "icon" }, h("i", { class: "s-cart-summary-icon", innerHTML: PendingOrdersIcon }))), h("span", { class: "s-cart-summary-count" }, salla.helpers.number(this.cartSummaryCount)), h("b", { class: "s-cart-summary-total" }, salla.money(this.cartSummaryTotal)))));
+    return (h(Host, null, h("a", { class: "s-cart-summary-wrapper", href: salla.url.get('cart') }, h("div", { id: "s-cart-icon" }, h("slot", { name: "icon" }, h("i", { class: "s-cart-summary-icon", innerHTML: PendingOrdersIcon }))), h("span", { class: "s-cart-summary-count" }, salla.helpers.number(this.cartSummaryCount)), h("p", { class: "s-cart-summary-content" }, this.showCartLabel && h("span", { class: "s-cart-summary-label" }, this.cartLabel), h("b", { class: "s-cart-summary-total" }, salla.money(this.cartSummaryTotal))))));
   }
   get host() { return this; }
   static get style() { return sallaCartSummaryCss; }
 }, [4, "salla-cart-summary", {
+    "showCartLabel": [4, "show-cart-label"],
     "cartSummaryCount": [32],
     "cartSummaryTotal": [32],
+    "cartLabel": [32],
     "animateToCart": [64]
   }]);
 function defineCustomElement$1() {

package/dist/components/salla-count-down.d.ts

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

package/dist/components/salla-count-down.js

@@ -0,0 +1,122 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const sallaCountDownCss = "";
+
+const SallaCountDown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * The size of the count down
+     * */
+    this.size = 'md';
+    /**
+     * The color of the count down
+     * */
+    this.color = 'dark';
+    /**
+     * The digits lang to show in the count down
+     * */
+    this.digits = 'auto';
+    this.daysLabel = '';
+    this.hoursLabel = '';
+    this.minutesLabel = '';
+    this.secondsLabel = '';
+    this.endLabel = '';
+    this.invalidDate = '';
+    this.offerEnded = false;
+    salla.lang.onLoaded(() => {
+      this.daysLabel = salla.lang.get('pages.checkout.day');
+      this.hoursLabel = salla.lang.get('pages.checkout.hour');
+      this.minutesLabel = salla.lang.get('pages.checkout.minute');
+      this.invalidDate = salla.lang.get('blocks.buy_as_gift.incorrect_date');
+      this.secondsLabel = salla.lang.get('pages.checkout.second');
+      this.endLabel = salla.lang.get('pages.checkout.offer_ended');
+    });
+  }
+  /**
+   * End the count down
+   * */
+  async endCountDown() {
+    clearInterval(this.countInterval);
+    this.offerEnded = true;
+    this.daysEl.innerHTML = this.number(0);
+    this.hoursEl.innerHTML = this.number(0);
+    this.minutesEl.innerHTML = this.number(0);
+    this.secondsEl.innerHTML = this.number(0);
+  }
+  isValidDate(date) {
+    return !isNaN(Date.parse(date));
+  }
+  number(digit) {
+    return salla.helpers.number(digit, this.digits === 'en');
+  }
+  startCountDown() {
+    let countDownDate = new Date(this.date);
+    countDownDate.setHours(23, 59, 59, 999);
+    let countDownTime = countDownDate.getTime();
+    this.countInterval = setInterval(() => {
+      let now = new Date().getTime();
+      let distance = countDownTime - now;
+      this.daysEl.innerHTML = this.number(Math.floor(distance / (1000 * 60 * 60 * 24)));
+      this.hoursEl.innerHTML = this.number(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
+      this.minutesEl.innerHTML = this.number(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)));
+      this.secondsEl.innerHTML = this.number(Math.floor((distance % (1000 * 60)) / 1000));
+      if (distance < 0) {
+        this.endCountDown();
+      }
+    }, 1000);
+  }
+  componentDidLoad() {
+    if (!this.date) {
+      return;
+    }
+    this.startCountDown();
+  }
+  render() {
+    if (!this.isValidDate(this.date)) {
+      return h("div", null, this.invalidDate);
+    }
+    return (h(Host, { class: "s-count-down-wrapper" }, h("ul", { class: `s-count-down-list ${this.boxed ? 's-count-down-boxed' : ''} ${this.offerEnded ? 's-count-down-ended' : ''} s-count-down-${this.size} s-count-down-${this.color}` }, h("li", { class: "s-count-down-item" }, h("div", { class: "s-count-down-item-value", ref: el => this.secondsEl = el }, this.number(0)), this.labeled && h("div", { class: "s-count-down-item-label" }, this.secondsLabel)), h("li", { class: "s-count-down-item" }, h("div", { class: "s-count-down-item-value", ref: el => this.minutesEl = el }, this.number(0)), this.labeled && h("div", { class: "s-count-down-item-label" }, this.minutesLabel)), h("li", { class: "s-count-down-item" }, h("div", { class: "s-count-down-item-value", ref: el => this.hoursEl = el }, this.number(0)), this.labeled && h("div", { class: "s-count-down-item-label" }, this.hoursLabel)), h("li", { class: "s-count-down-item" }, h("div", { class: "s-count-down-item-value", ref: el => this.daysEl = el }, this.number(0)), this.labeled && h("div", { class: "s-count-down-item-label" }, this.daysLabel))), this.offerEnded && h("div", { class: "s-count-down-end-text" }, this.endText || this.endLabel)));
+  }
+  static get style() { return sallaCountDownCss; }
+}, [0, "salla-count-down", {
+    "date": [1],
+    "boxed": [4],
+    "size": [1],
+    "color": [1],
+    "labeled": [4],
+    "endText": [1, "end-text"],
+    "digits": [1],
+    "daysLabel": [32],
+    "hoursLabel": [32],
+    "minutesLabel": [32],
+    "secondsLabel": [32],
+    "endLabel": [32],
+    "invalidDate": [32],
+    "offerEnded": [32],
+    "countInterval": [32],
+    "endCountDown": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["salla-count-down"];
+  components.forEach(tagName => { switch (tagName) {
+    case "salla-count-down":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SallaCountDown$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SallaCountDown = SallaCountDown$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaCountDown, defineCustomElement };

package/dist/components/salla-gifting.js

@@ -82,6 +82,13 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       this.currentLang = salla.lang.locale;
     });
   }
+  componentDidLoad() {
+    salla.event.product.onPriceUpdated(() => {
+      const quantityInput = document.querySelector('.s-quantity-input-input');
+      // @ts-ignore
+      this.quantity = quantityInput.value;
+    });
+  }
   /**
    * Show / Open the gifting modal window
    */
@@ -318,7 +325,7 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     let payload = {
       text: this.selectedText,
       sender_name: this.senderName,
-      quantity: 1,
+      quantity: this.quantity,
       deliver_at: this.showCalendar ? this.deliveryDate : null,
       image_url: (_a = this.uploadedImage) !== null && _a !== void 0 ? _a : this.selectedImage,
       receiver: {

package/dist/components/salla-installment.js

@@ -3,7 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const sallaInstallmentCss = "#tabbyPromoWrapper{background:white;border-radius:0.375rem;-webkit-transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-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{-webkit-box-shadow:0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;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;-webkit-box-shadow: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}.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;-webkit-transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-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{-webkit-box-shadow:0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;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{margin-bottom:20px}.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}";
+const sallaInstallmentCss = "salla-installment:empty{display:none}#tabbyPromoWrapper{background:white;border-radius:0.375rem;-webkit-transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-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{-webkit-box-shadow:0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;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;-webkit-box-shadow: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}.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;-webkit-transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-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{-webkit-box-shadow:0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;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{margin-bottom:20px}.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}";
 
 const SallaInstallment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -210,9 +210,10 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     if ([this.mobileTab, this.emailTab].includes(tab)) {
       this.regType = tab === this.mobileTab ? 'phone' : 'email';
     }
-    // this.loginTelInput.focus();
-    // tab.querySelector('input')?.focus();
-    //   setTimeout(() =>this.loginTelInput.focus(), 100);
+    const input = tab.querySelector('input[type="tel"], input[type="email"]');
+    input && setTimeout(() => {
+      input.focus();
+    }, 100);
     (_a = this.modal) === null || _a === void 0 ? void 0 : _a.setTitle(this.currentTabName === 'registration' ? salla.lang.get('common.titles.registration') : this.title);
     return this;
   }

package/dist/components/salla-modal2.js

@@ -95,6 +95,7 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    */
   async open() {
     this.host.setAttribute('visible', '');
+    this.handleAutoFocus();
     return this.host;
   }
   /**
@@ -126,6 +127,15 @@ const SallaModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.isLoading = false;
     return this.host;
   }
+  handleAutoFocus() {
+    const firstFocusableElement = this.host.querySelector('input, textarea, select');
+    if (!firstFocusableElement) {
+      return;
+    }
+    setTimeout(() => {
+      firstFocusableElement.focus();
+    }, 100);
+  }
   toggleModal(isOpen) {
     const body = this.host.querySelector('.s-modal-body');
     Helper.toggleElementClassIf(body, 's-modal-entering', 's-modal-leaving', () => isOpen)