@salla.sa/twilight-components 2.9.38 → 2.9.40

package/dist/components/index.d.ts

@@ -28,6 +28,7 @@ export { SallaSearch as SallaSearch } from '../types/components/salla-search/sal
 export { SallaSelect as SallaSelect } from '../types/components/salla-select/salla-select';
 export { SallaSheet as SallaSheet } from '../types/components/salla-sheet/salla-sheet';
 export { SallaSkeleton as SallaSkeleton } from '../types/components/salla-skeleton/salla-skeleton';
+export { SallaSwiper as SallaSlider } from '../types/components/salla-slider/salla-slider';
 export { SallaSocialShare as SallaSocialShare } from '../types/components/salla-social-share/salla-social-share';
 export { SallaSwiper as SallaSwiper } from '../types/components/salla-swiper/salla-swiper';
 export { SallaTabContent as SallaTabContent } from '../types/components/salla-tabs/salla-tab-content';

package/dist/components/index.js

@@ -32,6 +32,7 @@ export { SallaSearch, defineCustomElement as defineCustomElementSallaSearch } fr
 export { SallaSelect, defineCustomElement as defineCustomElementSallaSelect } from './salla-select.js';
 export { SallaSheet, defineCustomElement as defineCustomElementSallaSheet } from './salla-sheet.js';
 export { SallaSkeleton, defineCustomElement as defineCustomElementSallaSkeleton } from './salla-skeleton.js';
+export { SallaSlider, defineCustomElement as defineCustomElementSallaSlider } from './salla-slider.js';
 export { SallaSocialShare, defineCustomElement as defineCustomElementSallaSocialShare } from './salla-social-share.js';
 export { SallaSwiper, defineCustomElement as defineCustomElementSallaSwiper } from './salla-swiper.js';
 export { SallaTabContent, defineCustomElement as defineCustomElementSallaTabContent } from './salla-tab-content.js';

package/dist/components/salla-gifting.js

@@ -4,7 +4,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { a as anime } from './anime.es.js';
 import { A as ArrowRightIcon } from './arrow-right.js';
-import { L as LeftArrow, d as defineCustomElement$3 } from './salla-swiper2.js';
+import { A as ArrowLeftIcon } from './arrow-left.js';
 import { C as Cancel } from './cancel.js';
 import { d as defineCustomElement$b } from './salla-button2.js';
 import { d as defineCustomElement$a } from './salla-datetime-picker2.js';
@@ -14,6 +14,7 @@ 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-skeleton2.js';
+import { d as defineCustomElement$3 } from './salla-slider2.js';
 import { d as defineCustomElement$2 } from './salla-tel-input2.js';
 
 const Images = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
@@ -371,9 +372,9 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
           [
             h("div", { class: "s-gifting-modal-header" }, h("span", { class: "s-gifting-modal-icon" }, h("span", { innerHTML: GiftSharing })), h("h2", { class: "s-gifting-modal-title" }, h("div", { class: "s-gifting-modal-badge-wrapper" }, h("div", { class: "s-gifting-modal-badge" }, h("span", null, h("span", null, this.currentStep), "/2")), h("span", null, this.giftDetails)))),
             h("div", { class: "s-gifting-steps-wrapper steps-wrapper" }, h("div", { class: "s-gifting-step-one gift-step-1" }, h("div", { class: "s-gifting-modal-uploader-title anime-item" }, this.selectImageForYourGift), h("div", { class: "s-gifting-modal-uploader anime-item" }, h("span", { class: "s-gifting-remove-preview", onClick: () => this.removePreview(), innerHTML: Cancel }), this.selectImageOrUpload && h("salla-file-upload", { "instant-upload": true, labelIdle: this.getFilepondPlaceholder(), serverConfig: this.getServerConfig(), onRemove: () => this.handleRemoveImage() }, " ")), h("div", { class: "anime-item" }, !this.uploadedImage && !!this.gift && this.gift.gift_images.length > 0 ?
-              h("salla-swiper", { "space-between-items": "10" }, (_a = this.gift) === null || _a === void 0 ? void 0 : _a.gift_images.map((item) => h("img", { class: "s-gifting-image s-gifting-clickable", src: item.url, onClick: () => this.setPreview(item), alt: `${item.id}` })))
+              h("salla-slider", { type: "carousel" }, h("div", { slot: "items" }, (_a = this.gift) === null || _a === void 0 ? void 0 : _a.gift_images.map((item) => h("img", { class: "s-gifting-image s-gifting-clickable", src: item.url, onClick: () => this.setPreview(item), alt: `${item.id}` }))))
               : ""), h("div", { class: "anime-item" }, h("div", { class: "s-form-group s-gifting-selectText" }, h("label", { htmlFor: "gift-text-selection", class: "s-form-label" }, this.selectGiftMessage), h("select", { id: "gift-text-selection", name: "gift-text-selection", class: "s-form-control s-gifting-select", onChange: e => this.toggleGiftText(e) }, h("option", { "data-id": null, selected: true }, this.selectGiftMessage), (_b = this.gift) === null || _b === void 0 ? void 0 :
-              _b.gift_texts.map((txt) => h("option", { "data-id": txt.id, value: txt.text, key: txt.id }, txt.text)), h("option", { "data-id": "custom" }, this.giftCustomText))), h("div", { class: this.showGiftText ? "s-form-group s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide" }, h("label", { htmlFor: "gift-custom-text", class: "s-form-label" }, this.giftCustomText), h("div", { class: "mt-1" }, h("textarea", { onInput: (event) => this.handleTextAreaChange(event), rows: 4, ref: (el) => this.textArea = el, name: "gift-custom-text", id: "gift-custom-text", class: "s-form-control" })))), h("div", { class: "anime-item" }, h("salla-button", { color: "primary", width: "wide", onClick: () => this.goToStep2() }, h("span", null, this.nextStep)))), h("div", { class: "s-gifting-step-two gift-step-2" }, h("div", { class: this.errors && this.errors['sender_name'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, h("label", { htmlFor: "sender_name", class: "s-form-label" }, this.senderNameLabel), h("input", { type: "text", class: "s-form-control", name: "sender_name", id: "sender_name", value: this.senderName, onInput: (event) => this.handleSenderName(event), placeholder: "" }), this.errors && this.errors['sender_name'] ? h("span", { class: "text-danger text-xs" }, this.errors['sender_name']) : ''), h("div", { class: this.errors && this.errors['receiver.name'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, h("label", { htmlFor: "receiver_name", class: "s-form-label" }, this.receiverNameFieldLabel), h("input", { type: "text", class: "s-form-control", name: "receiver_name", id: "receiver_name", value: "", onInput: (event) => this.handleReceiverName(event), placeholder: "" }), this.errors && this.errors['receiver.name'] ? h("span", { class: "text-danger text-xs" }, this.errors['receiver.name']) : ''), h("div", { class: this.errors && this.errors['receiver.mobile'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, h("label", { class: "s-form-label" }, this.receiverMobileFieldLabel), h("salla-tel-input", { class: "s-gifting-tel-input", phone: this.receiverMobile, countryCode: this.receiverCountryCode, onPhoneEntered: (e) => this.handlePhoneInputChange(e) }), this.errors && this.errors['receiver.mobile'] ? h("span", { class: "text-danger text-xs" }, this.errors['receiver.mobile']) : ''), h("div", { class: "anime-item opacity-0" }, h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: "schedule" }, h("input", { type: "checkbox", name: 'schedule', id: 'schedule', onChange: () => this.toggleCalendar(), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), h("div", { class: this.getCalendarClasses() }, h("label", { class: "s-form-label" }, this.selectSendDateAndTime), h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), h("div", { class: "s-gifting-step-two-footer anime-item opacity-0" }, h("a", { href: "#!", innerHTML: this.currentLang == 'ar' ? ArrowRightIcon : LeftArrow, onClick: () => this.goToStep1() }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
+              _b.gift_texts.map((txt) => h("option", { "data-id": txt.id, value: txt.text, key: txt.id }, txt.text)), h("option", { "data-id": "custom" }, this.giftCustomText))), h("div", { class: this.showGiftText ? "s-form-group s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide" }, h("label", { htmlFor: "gift-custom-text", class: "s-form-label" }, this.giftCustomText), h("div", { class: "mt-1" }, h("textarea", { onInput: (event) => this.handleTextAreaChange(event), rows: 4, ref: (el) => this.textArea = el, name: "gift-custom-text", id: "gift-custom-text", class: "s-form-control" })))), h("div", { class: "anime-item" }, h("salla-button", { color: "primary", width: "wide", onClick: () => this.goToStep2() }, h("span", null, this.nextStep)))), h("div", { class: "s-gifting-step-two gift-step-2" }, h("div", { class: this.errors && this.errors['sender_name'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, h("label", { htmlFor: "sender_name", class: "s-form-label" }, this.senderNameLabel), h("input", { type: "text", class: "s-form-control", name: "sender_name", id: "sender_name", value: this.senderName, onInput: (event) => this.handleSenderName(event), placeholder: "" }), this.errors && this.errors['sender_name'] ? h("span", { class: "text-danger text-xs" }, this.errors['sender_name']) : ''), h("div", { class: this.errors && this.errors['receiver.name'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, h("label", { htmlFor: "receiver_name", class: "s-form-label" }, this.receiverNameFieldLabel), h("input", { type: "text", class: "s-form-control", name: "receiver_name", id: "receiver_name", value: "", onInput: (event) => this.handleReceiverName(event), placeholder: "" }), this.errors && this.errors['receiver.name'] ? h("span", { class: "text-danger text-xs" }, this.errors['receiver.name']) : ''), h("div", { class: this.errors && this.errors['receiver.mobile'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, h("label", { class: "s-form-label" }, this.receiverMobileFieldLabel), h("salla-tel-input", { class: "s-gifting-tel-input", phone: this.receiverMobile, countryCode: this.receiverCountryCode, onPhoneEntered: (e) => this.handlePhoneInputChange(e) }), this.errors && this.errors['receiver.mobile'] ? h("span", { class: "text-danger text-xs" }, this.errors['receiver.mobile']) : ''), h("div", { class: "anime-item opacity-0" }, h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: "schedule" }, h("input", { type: "checkbox", name: 'schedule', id: 'schedule', onChange: () => this.toggleCalendar(), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), h("div", { class: this.getCalendarClasses() }, h("label", { class: "s-form-label" }, this.selectSendDateAndTime), h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), h("div", { class: "s-gifting-step-two-footer anime-item opacity-0" }, h("a", { href: "#!", innerHTML: this.currentLang == 'ar' ? ArrowRightIcon : ArrowLeftIcon, onClick: () => this.goToStep1() }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
           ], h("slot", { name: "footer" })))
     ];
   }
@@ -439,7 +440,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["salla-gifting", "salla-button", "salla-datetime-picker", "salla-file-upload", "salla-list-tile", "salla-loading", "salla-modal", "salla-placeholder", "salla-skeleton", "salla-swiper", "salla-tel-input"];
+  const components = ["salla-gifting", "salla-button", "salla-datetime-picker", "salla-file-upload", "salla-list-tile", "salla-loading", "salla-modal", "salla-placeholder", "salla-skeleton", "salla-slider", "salla-tel-input"];
   components.forEach(tagName => { switch (tagName) {
     case "salla-gifting":
       if (!customElements.get(tagName)) {
@@ -486,7 +487,7 @@ function defineCustomElement$1() {
         defineCustomElement$4();
       }
       break;
-    case "salla-swiper":
+    case "salla-slider":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/salla-loyalty.js

@@ -10,7 +10,7 @@ import { d as defineCustomElement$9 } from './salla-loading2.js';
 import { d as defineCustomElement$8 } from './salla-modal2.js';
 import { d as defineCustomElement$7 } from './salla-placeholder2.js';
 import { d as defineCustomElement$6 } from './salla-skeleton2.js';
-import { d as defineCustomElement$5 } from './salla-swiper2.js';
+import { d as defineCustomElement$5 } from './salla-slider2.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';
@@ -230,7 +230,7 @@ const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       h("salla-modal", { isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("div", { slot: "loading" }, h("div", { class: "s-loyalty-skeleton" }, h("salla-list-tile", { class: "s-loyalty-header" }, h("div", { slot: "icon", class: "s-loyalty-header-icon" }, h("salla-skeleton", { type: "circle", height: '6rem', width: '6rem' })), h("div", { slot: "title", class: "s-loyalty-header-title mb-5" }, h("salla-skeleton", { height: '15px', width: '50%' })), h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, h("salla-skeleton", { height: '10px' }), h("salla-skeleton", { height: '10px', width: '75%' }))), h("div", { class: "s-loyalty-skeleton-cards" }, [...Array(3)].map(() => h("div", { class: "s-loyalty-prize-item" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-loyalty-prize-item-title" }, h("salla-skeleton", { height: '15px', width: '75%' })), h("div", { class: "s-loyalty-prize-item-subtitle" }, h("salla-skeleton", { height: '10px', width: '50%' }), h("salla-skeleton", { height: '10px', width: '25%' })), h("div", { class: "s-loyalty-prize-item-points" }, h("salla-skeleton", { height: '15px', width: '100px' }), h("div", { class: "s-loyalty-prize-item-check" }, h("salla-skeleton", { height: '1rem', width: '1rem', type: 'circle' })))))))), !this.hasError && !!this.loyaltyProgram ?
         [
           h("salla-list-tile", { id: 's-loyalty-header', class: "s-loyalty-header" }, h("div", { slot: "icon", class: "s-loyalty-header-icon", innerHTML: GiftImg }), 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-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-slider", { class: "s-loyalty-slider", type: "carousel" }, h("div", { slot: 'items' }, prize.items.map((item) => this.prizeItem(item))))))),
           h("salla-button", { disabled: !this.selectedItem, width: "wide", class: "s-loyalty-program-redeem-btn", onClick: () => this.openConfirmation() }, salla.lang.get('pages.loyalty_program.exchange_points')),
         ]
         : h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" }, !!this.errorMessage ? h("span", { slot: "description" }, this.errorMessage) : '')),
@@ -265,7 +265,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["salla-loyalty", "salla-button", "salla-list-tile", "salla-loading", "salla-modal", "salla-placeholder", "salla-skeleton", "salla-swiper", "salla-tab-content", "salla-tab-header", "salla-tabs"];
+  const components = ["salla-loyalty", "salla-button", "salla-list-tile", "salla-loading", "salla-modal", "salla-placeholder", "salla-skeleton", "salla-slider", "salla-tab-content", "salla-tab-header", "salla-tabs"];
   components.forEach(tagName => { switch (tagName) {
     case "salla-loyalty":
       if (!customElements.get(tagName)) {
@@ -302,7 +302,7 @@ function defineCustomElement$1() {
         defineCustomElement$6();
       }
       break;
-    case "salla-swiper":
+    case "salla-slider":
       if (!customElements.get(tagName)) {
         defineCustomElement$5();
       }

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

@@ -2,12 +2,12 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { K as KeyboardArrowRightIcon } from './keyboard_arrow_right.js';
-import { d as defineCustomElement$6 } from './salla-button2.js';
-import { d as defineCustomElement$5 } from './salla-loading2.js';
-import { d as defineCustomElement$4 } from './salla-modal2.js';
-import { d as defineCustomElement$3 } from './salla-placeholder2.js';
-import { d as defineCustomElement$2 } from './salla-skeleton2.js';
+import { d as defineCustomElement$7 } from './salla-button2.js';
+import { d as defineCustomElement$6 } from './salla-loading2.js';
+import { d as defineCustomElement$5 } from './salla-modal2.js';
+import { d as defineCustomElement$4 } from './salla-placeholder2.js';
+import { d as defineCustomElement$3 } from './salla-skeleton2.js';
+import { d as defineCustomElement$2 } from './salla-slider2.js';
 
 const SpecialDiscountIcon = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
@@ -16,13 +16,6 @@ const SpecialDiscountIcon = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
 
-const KeyboardArrowLeftIcon = `<!-- 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>keyboard_arrow_left</title>
-<path d="M20.563 22.104l-1.875 1.875-8-8 8-8 1.875 1.875-6.125 6.125z"></path>
-</svg>
-`;
-
 const Tag = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>tag</title>
 <path d="M28 0h-9.344c-1.059 0-2.056 0.411-2.809 1.153l-14.673 14.456c-1.56 1.56-1.561 4.097-0.001 5.657l9.56 9.56c0.755 0.755 1.76 1.172 2.828 1.173h0.003c1.068 0 2.072-0.416 2.833-1.179l14.451-14.668c0.743-0.753 1.153-1.751 1.153-2.809v-9.344c0-2.205-1.795-4-4-4zM29.333 13.344c0 0.353-0.137 0.685-0.385 0.937l-14.444 14.661c-0.252 0.252-0.587 0.391-0.941 0.391-0.001 0-0.001 0-0.001 0-0.356-0.001-0.691-0.139-0.943-0.392l-9.561-9.56c-0.52-0.52-0.52-1.365-0.005-1.88l14.667-14.449c0.253-0.248 0.585-0.385 0.937-0.385h9.344c0.736 0 1.333 0.597 1.333 1.333zM24 6.673c-0.737 0-1.333 0.604-1.333 1.341s0.596 1.333 1.333 1.333 1.333-0.596 1.333-1.333v-0.015c0-0.737-0.596-1.327-1.333-1.327z"></path>
@@ -98,9 +91,9 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     salla.api.withoutNotifier(() => salla.cart.quickAdd(this.productID, qty)).then(() => this.modal.close());
   }
   getOfferContent() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     if ((_a = this.offer.get.products) === null || _a === void 0 ? void 0 : _a.length) {
-      return h("div", { class: "s-offer-modal-scrolled-slider-wrap" }, h("div", { class: "s-offer-modal-body s-offer-modal-scrolled-slider" }, (_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.map(product => h("div", { class: {
+      return h("salla-slider", { type: "carousel", class: { "s-offer-modal-slider-centered": ((_b = this.offer.get.products) === null || _b === void 0 ? void 0 : _b.length) <= 2, "s-offer-modal-slider": true }, "show-controls": ((_c = this.offer.get.products) === null || _c === void 0 ? void 0 : _c.length) <= 2 ? 'false' : 'true' }, h("div", { slot: 'items' }, (_d = this.offer.get.products) === null || _d === void 0 ? void 0 : _d.map(product => h("div", { class: {
           "s-offer-modal-product": true,
           "s-offer-modal-slider-item": true,
           "s-offer-modal-not-available": !product.is_available
@@ -110,16 +103,16 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
           .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 ? salla.lang.get('pages.cart.add_to_cart') : salla.lang.get('pages.products.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", innerHTML: KeyboardArrowLeftIcon })), h("button", { class: "s-offer-modal-nav-btn s-offer-modal-next-btn" }, h("span", { class: "s-offer-modal-nav-btn-icon", innerHTML: KeyboardArrowRightIcon }))));
+          : 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 ? salla.lang.get('pages.cart.add_to_cart') : salla.lang.get('pages.products.out_of_stock')))))));
     }
-    else if ((_c = this.offer.get.categories) === null || _c === void 0 ? void 0 : _c.length) {
-      return h("div", { class: "s-offer-modal-scrolled-slider-wrap" }, h("div", { class: "s-offer-modal-body s-offer-modal-scrolled-slider" }, 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
+    else if ((_e = this.offer.get.categories) === null || _e === void 0 ? void 0 : _e.length) {
+      return h("salla-slider", { type: "carousel", class: { "s-offer-modal-slider-centered": ((_f = this.offer.get.categories) === null || _f === void 0 ? void 0 : _f.length) <= 2, "s-offer-modal-slider": true }, "show-controls": ((_g = this.offer.get.categories) === null || _g === void 0 ? void 0 : _g.length) <= 2 ? 'false' : 'true' }, h("div", { slot: 'items' }, 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(/\{tagIcon\}/g, Tag)
           .replace(/\{name\}/g, category.name)
-          .replace(/\{url\}/g, category.urls.customer) }))), 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", innerHTML: KeyboardArrowLeftIcon })), h("button", { class: "s-offer-modal-nav-btn s-offer-modal-next-btn" }, h("span", { class: "s-offer-modal-nav-btn-icon", innerHTML: KeyboardArrowRightIcon }))));
+          .replace(/\{url\}/g, category.urls.customer) }))));
     }
     else if (this.offer.get.discounts_table) {
-      return h("div", { class: "s-offer-modal-discount-table" }, h("table", null, h("tbody", null, (_d = this.offer.get.discounts_table) === null || _d === void 0 ? void 0 : _d.map(discount => h("tr", null, h("td", null, discount.text), h("td", { class: "s-offer-modal-discount-table-cell" }, h("salla-button", { fill: "outline", shape: "btn", color: "primary", size: "medium", width: "normal", onClick: () => this.addToCart(discount.quantity) }, this.addToCartLabel)))))));
+      return h("div", { class: "s-offer-modal-discount-table" }, h("table", null, h("tbody", null, (_h = this.offer.get.discounts_table) === null || _h === void 0 ? void 0 : _h.map(discount => h("tr", null, h("td", null, discount.text), h("td", { class: "s-offer-modal-discount-table-cell" }, h("salla-button", { fill: "outline", shape: "btn", color: "primary", size: "medium", width: "normal", onClick: () => this.addToCart(discount.quantity) }, this.addToCartLabel)))))));
     }
   }
   //todo:: pass event then use sallaButton from it
@@ -145,85 +138,6 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       ] :
       h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" }, !!this.errorMessage ? h("span", { slot: "description" }, this.errorMessage) : ''));
   }
-  componentDidRender() {
-    // Sooo mini Slider
-    var _a, _b, _c, _d, _e, _f;
-    if (this.offer && (((_a = this.offer.get.products) === null || _a === void 0 ? void 0 : _a.length) || ((_b = this.offer.get.categories) === null || _b === void 0 ? void 0 : _b.length)) && 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, isDown = false, startX, scrollLeft;
-      slider.addEventListener('mousedown', (e) => {
-        isDown = true;
-        slider.classList.add('scrolling');
-        startX = e.pageX - slider.offsetLeft;
-        scrollLeft = slider.scrollLeft;
-      });
-      slider.addEventListener('mouseleave', () => {
-        isDown = false;
-        slider.classList.remove('scrolling');
-        items.forEach(item => {
-          item.querySelector('a').removeAttribute('disabled');
-        });
-      });
-      slider.addEventListener('mouseup', () => {
-        isDown = false;
-        slider.classList.remove('scrolling');
-        items.forEach(item => {
-          item.querySelector('a').removeAttribute('disabled');
-        });
-      });
-      slider.addEventListener('mousemove', (e) => {
-        if (!isDown)
-          return;
-        e.preventDefault();
-        const x = e.pageX - slider.offsetLeft;
-        const walk = (x - startX) * 2;
-        slider.scrollLeft = scrollLeft - walk;
-        items.forEach(item => {
-          item.querySelector('a').setAttribute('disabled', 'true');
-        });
-      });
-      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');
-      if (((_d = (_c = this.offer.get) === null || _c === void 0 ? void 0 : _c.products) === null || _d === void 0 ? void 0 : _d.length) <= 2 || ((_f = (_e = this.offer.get) === null || _e === void 0 ? void 0 : _e.categories) === null || _f === void 0 ? void 0 : _f.length) <= 2)
-        slider.classList.add('s-offer-modal-slider-centered');
-      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'
-          });
-        });
-      });
-    }
-  }
   get host() { return this; }
   static get style() { return sallaOfferModalCss; }
 }, [0, "salla-offer-modal", {
@@ -242,7 +156,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["salla-offer-modal", "salla-button", "salla-loading", "salla-modal", "salla-placeholder", "salla-skeleton"];
+  const components = ["salla-offer-modal", "salla-button", "salla-loading", "salla-modal", "salla-placeholder", "salla-skeleton", "salla-slider"];
   components.forEach(tagName => { switch (tagName) {
     case "salla-offer-modal":
       if (!customElements.get(tagName)) {
@@ -251,25 +165,30 @@ function defineCustomElement$1() {
       break;
     case "salla-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "salla-loading":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "salla-modal":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "salla-placeholder":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "salla-skeleton":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "salla-slider":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/salla-scopes.js

@@ -35,6 +35,7 @@ const SallaScopees = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.originalScopesList = [];
     this.isOpenedBefore = salla.storage.get("branch-choosed-before");
     this.hasError = false;
+    this.loading = false;
     /**
      * Optionally open the modal or enforce the pop-up to the viewer
      */
@@ -69,6 +70,7 @@ const SallaScopees = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
    * Opens the scope modal.
    */
   async open(mode = ModeType.DEFAULT, product_id = null) {
+    this.loading = true;
     this.setScopeValues([]);
     if (typeof mode !== 'undefined' && [ModeType.AVAILABILITY, ModeType.DEFAULT].includes(mode)) {
       this.mode = mode;
@@ -89,7 +91,10 @@ const SallaScopees = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       console.log(e);
       this.hasError = true;
     })
-      .finally(() => this.modal.stopLoading());
+      .finally(() => {
+      this.modal.stopLoading();
+      this.loading = false;
+    });
   }
   /**
    * Submit form to change exsiting scope.
@@ -116,13 +121,13 @@ const SallaScopees = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   setScopeValues(value) {
     this.scopes = value;
     this.originalScopesList = value;
-    if (value.length == 1) {
+    if ((value === null || value === void 0 ? void 0 : value.length) == 1) {
       this.current_scope = value[0];
       this.selected_scope = value[0];
     }
     else {
-      this.current_scope = value.find(scope => scope.selected);
-      this.selected_scope = value.find(scope => scope.selected);
+      this.current_scope = value === null || value === void 0 ? void 0 : value.find(scope => scope.selected);
+      this.selected_scope = value === null || value === void 0 ? void 0 : value.find(scope => scope.selected);
     }
   }
   handleSearchFieldTyping(e) {
@@ -135,16 +140,19 @@ const SallaScopees = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   handleScopeSelection(event) {
-    this.current_scope = this.scopes.find(scope => scope.id == event.target.value);
+    var _a;
+    this.current_scope = (_a = this.scopes) === null || _a === void 0 ? void 0 : _a.find(scope => scope.id == event.target.value);
   }
   placeholderContent() {
     return h("salla-placeholder", { alignment: "center", class: "s-scopes-placeholder" }, h("span", { slot: "title" }, salla.lang.get("blocks.scope.branch_looking_for_not_found")), h("span", { slot: "description" }, salla.lang.get("blocks.scope.our_services_not_available_in_this_branch")));
   }
   defaultContent() {
-    return [h("div", { class: "s-scopes-container s-scrollbar" }, this.scopes.map((scope) => h("div", { class: "s-scopes-input-wrap", "data-selection": this.selection }, h("input", { id: `${this.selection} + '_scope_' + ${scope.id}`, name: "lang", type: "radio", value: scope.id, onChange: (event) => this.handleScopeSelection(event), class: "s-scopes-input", checked: !!this.current_scope && this.current_scope.id == scope.id }), h("label", { htmlFor: `${this.selection} + '_scope_' + ${scope.id}`, class: "s-scopes-label s-scopes-clickable" }, h("span", null, scope.name))))), this.footerContent()];
+    var _a;
+    return [h("div", { class: "s-scopes-container s-scrollbar" }, (_a = this.scopes) === null || _a === void 0 ? void 0 : _a.map((scope) => h("div", { class: "s-scopes-input-wrap", "data-selection": this.selection }, h("input", { id: `${this.selection} + '_scope_' + ${scope.id}`, name: "lang", type: "radio", value: scope.id, onChange: (event) => this.handleScopeSelection(event), class: "s-scopes-input", checked: !!this.current_scope && this.current_scope.id == scope.id }), h("label", { htmlFor: `${this.selection} + '_scope_' + ${scope.id}`, class: "s-scopes-label s-scopes-clickable" }, h("span", null, scope.name))))), this.footerContent()];
   }
   availabilityContent() {
-    return h("div", { class: "s-scopes-container" }, this.scopes.map((scope) => {
+    var _a;
+    return h("div", { class: "s-scopes-container" }, (_a = this.scopes) === null || _a === void 0 ? void 0 : _a.map((scope) => {
       var _a, _b, _c, _d, _e, _f;
       return h("div", { class: "s-scopes-input-wrap", "data-selection": this.selection }, h("h2", { class: { "s-scopes-label": true, "s-scopes-clickable": this.mode === ModeType.DEFAULT } }, h("span", null, scope.name)), h("h2", { style: { 'color': (_b = (_a = scope) === null || _a === void 0 ? void 0 : _a.availability) === null || _b === void 0 ? void 0 : _b.color }, class: `s-scopes-${(_d = (_c = scope) === null || _c === void 0 ? void 0 : _c.availability) === null || _d === void 0 ? void 0 : _d.key}` }, (_f = (_e = scope) === null || _e === void 0 ? void 0 : _e.availability) === null || _f === void 0 ? void 0 : _f.label));
     }));
@@ -153,11 +161,15 @@ const SallaScopees = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     return h("div", { class: "s-scopes-footer" }, h("slot", { name: "footer" }, h("salla-button", { ref: btn => this.changeBtn = btn, disabled: !this.current_scope, onClick: () => this.handleSubmit(), class: "s-scopes-submit", "loader-position": "center", width: "wide" }, salla.lang.get('common.elements.confirm'))));
   }
   render() {
-    return (h(Host, null, h("salla-modal", { ref: modal => this.modal = modal, isClosable: !!(this.isOpenedBefore || (this.selection == 'optional')), class: "s-scopes-modal", isLoading: true, "has-skeleton": true }, h("div", { slot: "loading" }, h("div", { class: "s-scopes-skeleton" }, h("salla-list-tile", { class: "s-scopes-header" }, h("div", { slot: "icon", class: "s-scopes-header-icon" }, h("salla-skeleton", { type: "circle" })), h("div", { slot: "title", class: "s-scopes-header-title mb-5" }, h("salla-skeleton", { height: '15px', width: '50%' })), h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, h("salla-skeleton", { height: '10px' }), h("salla-skeleton", { height: '10px', width: '75%' }))), h("div", { class: "s-scopes-skeleton-search" }, h("salla-skeleton", { height: '10px', width: '50%' }), h("salla-skeleton", { height: '30px', width: '100%' })), h("div", { class: "s-scopes-skeleton-scopes" }, h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' })), h("div", { class: "s-scopes-skeleton-btn" }, h("salla-skeleton", { height: '40px', width: '100%' })))), h("salla-list-tile", { class: this.originalScopesList.length ? "s-scopes-header block" : "s-hidden" }, h("div", { slot: "icon", class: "s-scopes-header-icon", innerHTML: StoreAlt }), h("div", { slot: "title", class: "s-scopes-header-title" }, salla.lang.get('blocks.scope.you_are_browse_store_from')), h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, !!this.selected_scope ? this.selected_scope.name : "")), h("div", { class: "s-scopes-wrap" }, !!this.originalScopesList.length && h("h4", { class: "s-scopes-title" }, this.getFormTitle()), this.originalScopesList.length > this.searchDisplayLimit ?
-      h("div", { class: "s-scopes-search-wrapper" }, 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 || this.scopes.length < 2 ?
-      this.placeholderContent()
-      : this.mode === ModeType.DEFAULT ? this.defaultContent() : this.availabilityContent()))));
+    var _a, _b, _c, _d;
+    return (h(Host, null, h("salla-modal", { ref: modal => this.modal = modal, isClosable: !!(this.isOpenedBefore || (this.selection == 'optional')), class: "s-scopes-modal", isLoading: true, "has-skeleton": true }, this.loading ?
+      h("div", { slot: "loading" }, h("div", { class: "s-scopes-skeleton" }, h("salla-list-tile", { class: "s-scopes-header" }, h("div", { slot: "icon", class: "s-scopes-header-icon" }, h("salla-skeleton", { type: "circle" })), h("div", { slot: "title", class: "s-scopes-header-title mb-5" }, h("salla-skeleton", { height: '15px', width: '50%' })), h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, h("salla-skeleton", { height: '10px' }), h("salla-skeleton", { height: '10px', width: '75%' }))), h("div", { class: "s-scopes-skeleton-search" }, h("salla-skeleton", { height: '10px', width: '50%' }), h("salla-skeleton", { height: '30px', width: '100%' })), h("div", { class: "s-scopes-skeleton-scopes" }, h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' })), h("div", { class: "s-scopes-skeleton-btn" }, h("salla-skeleton", { height: '40px', width: '100%' }))))
+      :
+        [h("salla-list-tile", { class: ((_a = this.originalScopesList) === null || _a === void 0 ? void 0 : _a.length) ? "s-scopes-header block" : "s-hidden" }, h("div", { slot: "icon", class: "s-scopes-header-icon", innerHTML: StoreAlt }), h("div", { slot: "title", class: "s-scopes-header-title" }, salla.lang.get('blocks.scope.you_are_browse_store_from')), h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, !!this.selected_scope ? this.selected_scope.name : "")), h("div", { class: "s-scopes-wrap" }, !!((_b = this.originalScopesList) === null || _b === void 0 ? void 0 : _b.length) && h("h4", { class: "s-scopes-title" }, this.getFormTitle()), ((_c = this.originalScopesList) === null || _c === void 0 ? void 0 : _c.length) > this.searchDisplayLimit ?
+            h("div", { class: "s-scopes-search-wrapper" }, 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.placeholderContent()
+            : this.mode === ModeType.DEFAULT ? this.defaultContent() : this.availabilityContent())])));
   }
   componentDidLoad() {
     if (!this.isOpenedBefore && this.selection == 'mandatory') {
@@ -176,6 +188,7 @@ const SallaScopees = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "selected_scope": [32],
     "isOpenedBefore": [32],
     "hasError": [32],
+    "loading": [32],
     "close": [64],
     "open": [64],
     "handleSubmit": [64]

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

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

package/dist/components/salla-slider.js

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