@salla.sa/twilight-components 2.14.470 → 2.14.472

package/dist/components/salla-price-range2.js

@@ -159,9 +159,9 @@ const SallaPriceRange = /*@__PURE__*/ proxyCustomElement(class SallaPriceRange e
         this.maxPrice = value === undefined ? '' : value;
     }
     render() {
-        return (h(Host, { key: 'ab96e0b292966af5dea7627ed2cfae7aa6cf42d2' }, this.filterValues.map((filterValue, index) => {
+        return (h(Host, { key: 'ecc44cf63ea7788f00aa33a19c06579c887c59dd' }, this.filterValues.map((filterValue, index) => {
             return h("label", { class: "s-filters-label", htmlFor: `${this.option.key}-${index}`, key: index }, h("input", { id: `${this.option.key}-${index}`, name: "price", type: "radio", checked: this.isChecked(filterValue), class: "s-filters-radio", onChange: e => this.handleMinMaxPrice(e, filterValue) }), h("span", { innerHTML: this.getPriceLabel(filterValue) }));
-        }), h("div", { key: '5d958a76e7878542fd8090229570ed9baf9ca2ea', class: "flex justify-center items-center" }, h("div", { key: '1c500632705c5006b901a809368ce85a16709afb', class: "relative max-w-xl w-full" }, h("div", { key: 'd29b5185bf50c5582920b54716005e8756de05bd', class: "s-price-range-inputs" }, h("div", { key: 'bd41a6602d5f3f434ba7d7ee4b8c92900d27c6b9', class: "s-price-range-relative" }, h("div", { key: 'd61027acbb26d6754d4406aa07c11101fd8c4005', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: 'b368eabded71a6631943b5cd12624418df07afe8', type: "number", maxlength: "5", ref: el => this.minInput = el, onBlur: (e) => this.handleMinPrice(e), value: this.minPrice, placeholder: this.fromLabel, class: "s-price-range-number-input" })), h("div", { key: '0b7b3750d740e929fe0c3f120185d153cb9f6a8e', class: "s-price-range-gray-text" }, " -"), h("div", { key: '148ebe3d2b5a52d013ab9ca6aef02342c5acb3fa', class: "s-price-range-relative" }, h("div", { key: '205c13dd92d5784fc2b1551b56a0ec5e329e0854', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: 'a4b8886ae87387e891f286931b58a3340920a0e0', type: "number", maxlength: "5", ref: el => this.maxInput = el, onBlur: (e) => this.handleMaxPrice(e), value: this.maxPrice, placeholder: this.toLabel, class: "s-price-range-number-input", "aria-describedby": "price-currency" })), h("salla-button", { key: '221241ca34ed2e7aec47b57b609718e68ccd5060', color: 'gray', shape: 'icon', size: 'small', fill: 'outline', onClick: (event) => this.changedEventHandler(event) }, h("span", { key: 'b277d7c12f44eba76b967055e79a12ed7e492e4d', innerHTML: this.isRTL ? IconArrowLeft : arrowRight })))))));
+        }), h("div", { key: 'c4b6d75b11a2625f429caf6bba9e0dd625f6f646', class: "flex justify-center items-center" }, h("div", { key: '4e85f9c05415daf235ab965ebe185c7171f08e06', class: "relative max-w-xl w-full" }, h("div", { key: '44b7747bfa4ec0e46da70dcf25f5325562bb0be9', class: "s-price-range-inputs" }, h("div", { key: '08a9afa0ea579f31eba87561283162b1d47f123f', class: "s-price-range-relative" }, h("div", { key: '54540065c16484f01e356fb2094f3163357ffd95', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: '851b957d076c25808edba4e763ae31286047782f', type: "number", maxlength: "5", ref: el => this.minInput = el, onBlur: (e) => this.handleMinPrice(e), value: this.minPrice, placeholder: this.fromLabel, class: "s-price-range-number-input" })), h("div", { key: 'f8a910aca554ae21657a19115d7f9607efb0566d', class: "s-price-range-gray-text" }, " -"), h("div", { key: '7d1561634459c15862bc0455b4bd9248d44a8446', class: "s-price-range-relative" }, h("div", { key: '7ca1fb8056b8af71f6f57524ed9d5fdfdc641ef2', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: 'e6411b0e1b0e36b45a6879c1b257f394ec94007f', type: "number", maxlength: "5", ref: el => this.maxInput = el, onBlur: (e) => this.handleMaxPrice(e), value: this.maxPrice, placeholder: this.toLabel, class: "s-price-range-number-input", "aria-describedby": "price-currency" })), h("salla-button", { key: '63bc422c8d82c820bd984d5af68f8081add164c3', color: 'gray', shape: 'icon', size: 'small', fill: 'outline', onClick: (event) => this.changedEventHandler(event) }, h("span", { key: 'b81d3813cb2ff9523f232cf0a615c58576b14177', innerHTML: this.isRTL ? IconArrowLeft : arrowRight })))))));
     }
     componentDidLoad() {
         this.isReady = true;

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

@@ -146,7 +146,7 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class SallaPro
         field.nextElementSibling['innerText'] = '* ' + errorMsg;
     }
     render() {
-        return (h(Host, { key: '144b0687a0e527fa493aa701c334db76a7b42164', class: "s-product-availability-wrap" }, this.isSubscribedToProduct
+        return (h(Host, { key: '0779c3aef2637bfcd30ecf110d0cd31d819a82a5', class: "s-product-availability-wrap" }, this.isSubscribedToProduct
             ? h("div", { class: "s-product-availability-subscribed" }, h("span", { innerHTML: BellRing, class: "s-product-availability-subs-icon" }), salla.lang.get('pages.products.notify_availability_success'))
             :
                 h("salla-button", { width: "wide", onClick: () => this.isUser ? this.submit() : this.openModel() }, salla.lang.get('pages.products.notify_availability')), this.isUser || this.isSubscribedToProduct ? '' : this.renderModal()));

package/dist/components/salla-product-card-embed.js

@@ -84,7 +84,7 @@ const SallaProductCardEmbed$1 = /*@__PURE__*/ proxyCustomElement(class SallaProd
             's-product-card-embed-card-align-right': this.align === 'right',
             's-product-card-embed-card-align-center': this.align === 'center',
         };
-        return (h(Host, { key: 'a742a11dc2926fb941f44d1b3fd5cc3b4a207822' }, this.hasError && h("span", { key: 'c554a3b1971fa0b646611d24b7000bed921114d8', class: "s-product-card-embed-fallback" }), h("div", { key: 'cb0551a374e4ed68496bfa436adf6424febbd681', class: cardClasses, ref: (el) => {
+        return (h(Host, { key: '61c3e673a103e5d13217bac208611bf4978d20a4' }, this.hasError && h("span", { key: '8f013953f9eed502307823825e573281f481fd19', class: "s-product-card-embed-fallback" }), h("div", { key: '150d4080de0dbf21a2abaa00eca4c8ffae604546', class: cardClasses, ref: (el) => {
                 this.cardContainer = el;
             } })));
     }

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

@@ -3,12 +3,20 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { R as Rate } from './star2.js';
-import { d as defineCustomElement$9 } from './salla-add-product-button2.js';
-import { d as defineCustomElement$8 } from './salla-button2.js';
-import { d as defineCustomElement$7 } from './salla-count-down2.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-product-availability2.js';
+import { d as defineCustomElement$h } from './salla-add-product-button2.js';
+import { d as defineCustomElement$g } from './salla-booking-field2.js';
+import { d as defineCustomElement$f } from './salla-button2.js';
+import { d as defineCustomElement$e } from './salla-color-picker2.js';
+import { d as defineCustomElement$d } from './salla-conditional-fields2.js';
+import { d as defineCustomElement$c } from './salla-count-down2.js';
+import { d as defineCustomElement$b } from './salla-datetime-picker2.js';
+import { d as defineCustomElement$a } from './salla-file-upload2.js';
+import { d as defineCustomElement$9 } from './salla-loading2.js';
+import { d as defineCustomElement$8 } from './salla-map2.js';
+import { d as defineCustomElement$7 } from './salla-modal2.js';
+import { d as defineCustomElement$6 } from './salla-order-options-modal2.js';
+import { d as defineCustomElement$5 } from './salla-product-availability2.js';
+import { d as defineCustomElement$4 } from './salla-product-options2.js';
 import { d as defineCustomElement$3 } from './salla-progress-bar2.js';
 import { d as defineCustomElement$2 } from './salla-quick-buy2.js';
 import { d as defineCustomElement$1 } from './salla-tel-input2.js';
@@ -122,14 +130,14 @@ const SallaProductCard = /*@__PURE__*/ proxyCustomElement(class SallaProductCard
             's-product-card-out-of-stock': this.productData?.is_out_of_stock,
         };
         const hrefProp = this.productData?.url ? { href: this.productData.url, title: `Learn more about ${this.productData?.name}` } : {};
-        return (h(Host, { key: '789fbb35499a12f08dab69a6be3559eebea03381', id: `product-${this.productData?.id}`, class: classes }, h("div", { key: '9cb05484a39b108348e3b2070d63c503681ef417', class: !this.fullImage ? 's-product-card-image' : 's-product-card-image-full' }, h("a", { key: '1805be53cb3a3cf1068752121b846178d6b9340f', ...hrefProp }, h("img", { key: 'bf9183ed961e8fe5207548ce1e8146064b69675d', class: `s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)
+        return (h(Host, { key: '0f4b4f64ee342da10905dee73db8a2b4bebdfc9e', id: `product-${this.productData?.id}`, class: classes }, h("div", { key: 'ed5cfb208c6241ca6ccd2c8f2205f76d1f81ca2a', class: !this.fullImage ? 's-product-card-image' : 's-product-card-image-full' }, h("a", { key: '865376db3deadd97c23480e9226a50abe9371284', ...hrefProp }, h("img", { key: 'ad314a97956853e26b3a3c4ecb9f1d427bf748fb', class: `s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)
                 ? 'contain'
                 : this.fitImageHeight
                     ? this.fitImageHeight
-                    : 'cover'} lazy`, src: this.placeholder, alt: this.productData?.image?.alt || this.productData?.name, "data-src": this.productData?.image?.url || this.productData?.thumbnail }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", { key: '567e6766ff7516ff409d9f86dc3cba7a51508d57', ...hrefProp, class: "s-product-card-overlay" }), !this.horizontal && !this.fullImage ?
-            h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick() }, h("span", { innerHTML: Heart })) : ''), h("div", { key: 'b36b0e6bdb8af5b1cf38d416b9f64038fa1f17ae', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
+                    : 'cover'} lazy`, src: this.placeholder, alt: this.productData?.image?.alt || this.productData?.name, "data-src": this.productData?.image?.url || this.productData?.thumbnail }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", { key: 'eef3edab8f4cc75c385928dcdbd9d29c318b68cc', ...hrefProp, class: "s-product-card-overlay" }), !this.horizontal && !this.fullImage ?
+            h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick() }, h("span", { innerHTML: Heart })) : ''), h("div", { key: '208f74738cd81bb68ec63f4fdadedbd9b19e6dad', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
             h("div", { class: "s-product-card-content-pie", ref: pie => this.pie = pie }, h("span", null, h("b", null, salla.helpers.number(this.productData?.quantity)), this.remained), h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-2 -1 36 34", class: "s-product-card-content-pie-svg" }, h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-base" }), h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-bar" })))
-            : '', h("div", { key: '93258adb3ca7ff5d3a89a118c7642b8b1264e045', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: 'fdf1c66e6533f3b092ad66e66875cbb2e213e6ad', class: "s-product-card-content-title" }, h("a", { key: 'cd3476f564e8ed4050b909c33926a5d44bf8fb5a', ...hrefProp }, this.productData?.name)), this.productData?.subtitle && !this.minimal ?
+            : '', h("div", { key: '6b00056661ebe29db89377f858bfefda80ed365f', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: 'a1a7a2d363a009c3254df7728e80f958be76a012', class: "s-product-card-content-title" }, h("a", { key: 'c3c8a4b862cf6a0b78bafb6f30bd5a04d437257d', ...hrefProp }, this.productData?.name)), this.productData?.subtitle && !this.minimal ?
             h("p", { class: "s-product-card-content-subtitle" }, this.productData?.subtitle)
             : ''), this.productData?.donation && !this.minimal && !this.fullImage ?
             [h("salla-progress-bar", { donation: this.productData?.donation }), h("div", { class: "s-product-card-donation-input" }, this.productData?.donation?.can_donate ?
@@ -138,7 +146,7 @@ const SallaProductCard = /*@__PURE__*/ proxyCustomElement(class SallaProductCard
                                 this.addBtn.donatingAmount = e.target.value;
                             }, id: "donation-amount", name: "donating_amount", class: "s-form-control", placeholder: this.donationAmount })]
                     : '')]
-            : '', h("div", { key: 'b32c488819742ae8dd56147f4285424d381a3df4', class: { 's-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial } }, this.getProductPrice(), this.productData?.rating?.stars && !this.minimal ?
+            : '', h("div", { key: '2ab7701aac64f90667627f0a0b3bfc031e30d835', class: { 's-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial } }, this.getProductPrice(), this.productData?.rating?.stars && !this.minimal ?
             h("div", { class: "s-product-card-rating" }, h("span", { innerHTML: Rate }), h("span", null, this.productData.rating.stars))
             : ''), this.isSpecial && this.productData.discount_ends
             ? h("salla-count-down", { date: this.formatDate(this.productData.discount_ends), "end-of-day": true, boxed: true, labeled: true })
@@ -185,7 +193,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-product-card", "salla-add-product-button", "salla-button", "salla-count-down", "salla-loading", "salla-modal", "salla-product-availability", "salla-progress-bar", "salla-quick-buy", "salla-tel-input"];
+    const components = ["salla-product-card", "salla-add-product-button", "salla-booking-field", "salla-button", "salla-color-picker", "salla-conditional-fields", "salla-count-down", "salla-datetime-picker", "salla-file-upload", "salla-loading", "salla-map", "salla-modal", "salla-order-options-modal", "salla-product-availability", "salla-product-options", "salla-progress-bar", "salla-quick-buy", "salla-tel-input"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-product-card":
             if (!customElements.get(tagName)) {
@@ -194,30 +202,70 @@ function defineCustomElement() {
             break;
         case "salla-add-product-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$h();
+            }
+            break;
+        case "salla-booking-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
             }
             break;
         case "salla-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$f();
+            }
+            break;
+        case "salla-color-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "salla-conditional-fields":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
             }
             break;
         case "salla-count-down":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$c();
+            }
+            break;
+        case "salla-datetime-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "salla-file-upload":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
             }
             break;
         case "salla-loading":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$9();
+            }
+            break;
+        case "salla-map":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
             }
             break;
         case "salla-modal":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$7();
+            }
+            break;
+        case "salla-order-options-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
             }
             break;
         case "salla-product-availability":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-product-options":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

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

@@ -44,6 +44,58 @@ var Currency;
     Currency["Sar"] = "SAR";
 })(Currency || (Currency = {}));
 
+/**
+ * Builds a per-detail availability map from SKU-level data.
+ *
+ * Exported as a pure function so it can be unit-tested independently of the
+ * Stencil component (the @State availabilityMap backing-store is not accessible
+ * via page.rootInstance in the Stencil mock-doc test environment).
+ *
+ * Status values:
+ *   'available'    – at least one in-stock SKU for this detail + current selections
+ *   'out_of_stock' – all matching SKUs are out of stock
+ *   'impossible'   – no SKU intersection exists for this combination
+ *
+ * skus_availability is always the authoritative source when present; is_out is
+ * consulted only as a last resort when a detail has no SKU data at all.
+ */
+function computeAvailabilityMap(optionsData, selectedOptions) {
+    const map = {};
+    if (!optionsData?.length)
+        return map;
+    const variantGroups = optionsData.filter(opt => opt.details?.some(d => d.skus_availability && Object.keys(d.skus_availability).length > 0));
+    const isSingleGroup = variantGroups.length <= 1;
+    for (const optionGroup of variantGroups) {
+        const otherSelected = selectedOptions.filter(s => s.option_id !== optionGroup.id);
+        for (const detail of optionGroup.details) {
+            const skusAvail = detail.skus_availability;
+            // No skus_availability data — fall back to is_out as last resort only.
+            if (!skusAvail || !Object.keys(skusAvail).length) {
+                map[detail.id] = detail.is_out ? 'out_of_stock' : 'available';
+                continue;
+            }
+            const detailSkus = Object.keys(skusAvail).map(Number);
+            // No cross-group context yet — evaluate this detail's own SKUs directly.
+            if (isSingleGroup || otherSelected.length === 0) {
+                map[detail.id] = detailSkus.some(sku => skusAvail[sku]) ? 'available' : 'out_of_stock';
+                continue;
+            }
+            // Intersect this detail's SKUs with those of each other selected detail.
+            let candidates = detailSkus;
+            for (const other of otherSelected) {
+                const otherSkus = new Set(Object.keys(other.skus_availability || {}).map(Number));
+                candidates = candidates.filter(sku => otherSkus.has(sku));
+            }
+            if (!candidates.length) {
+                map[detail.id] = 'impossible';
+                continue;
+            }
+            map[detail.id] = candidates.some(sku => skusAvail[sku]) ? 'available' : 'out_of_stock';
+        }
+    }
+    return map;
+}
+
 var FileIcon = `<!-- 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>file-upload</title>
@@ -77,6 +129,7 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
         this.availableDigitalCardValues = [];
         this.userInitiatedValidation = false;
         this.isCartMode = false;
+        this.availabilityMap = {};
         this.outSkus = [];
         /**
        * Avoid selection of previous default or selected card value option
@@ -87,6 +140,11 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
          * The id of the product to which the options are going to be fetched for.
          */
         this.productId = salla.config.get('page.id');
+        /**
+         * Strip the wrapper's padding (keeps the background, rounded corners, margin).
+         * Used by callers that need the options to sit flush inside their own surface.
+         */
+        this.noPadding = false;
         this.handleDonationOptions = (event, detail, type, _option) => {
             // Donating-amount input only: onInput updates price and dispatches native change for form price watcher.
             if (detail === 'custom' && type === 'input') {
@@ -167,12 +225,14 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
      */
     async setOptionsData(optionsData) {
         this.optionsData = optionsData;
-        const that = this;
-        this.optionsData[0]?.details?.forEach(function (detail) {
+        this.outSkus = [];
+        this.optionsData[0]?.details?.forEach(detail => {
             Object.entries(detail.skus_availability || {})
-                .filter(sku => !sku[1])
-                .map(sku => that.outSkus.push(Number(sku[0])));
+                .filter(([, available]) => !available)
+                .forEach(([sku]) => this.outSkus.push(Number(sku)));
         });
+        this.fillSelectedOptions();
+        this.computeAvailability();
     }
     /**
      * Get the current options state, including selected values/details.
@@ -358,8 +418,9 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
      */
     setSelectedSkus() {
         this.selectedSkus = this.selectedOptions.map(detail => Object.keys(detail.skus_availability || {}))
-            .reduce((p, c) => p.filter(e => c.includes(e)), []) // Initialize accumulator as an empty array
+            .reduce((p, c) => p.filter(e => c.includes(e)), [])
             .map(sku => Number(sku));
+        this.computeAvailability();
     }
     handleRequiredMultipleOptions(option) {
         if (option.type !== DisplayType.MULTIPLE_OPTIONS || !option.required) {
@@ -563,7 +624,7 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
         if (this.optionsData?.length === 0) {
             return;
         }
-        return (h(Host, { class: "s-product-options-wrapper" }, h("salla-conditional-fields", null, this.optionsData.map((option) => h("div", { key: option.id, class: `s-product-options-option-container${option.visibility_condition || this.hideDigitalCardsOptions(option) ? ' hidden' : ''}`, "data-option-id": option.id, ...this.getOptionShownWhen(option) }, option.name === 'splitter' ?
+        return (h(Host, { class: { 's-product-options-wrapper': true, 's-product-options-no-padding': this.noPadding } }, h("salla-conditional-fields", null, this.optionsData.map((option) => h("div", { key: option.id, class: `s-product-options-option-container${option.visibility_condition || this.hideDigitalCardsOptions(option) ? ' hidden' : ''}`, "data-option-id": option.id, ...this.getOptionShownWhen(option) }, option.name === 'splitter' ?
             this.splitterOption()
             : h("div", { class: { "s-product-options-option": true, "s-product-options-option-booking": option.type === DisplayType.BOOKING && salla.url.is_page("cart") }, "data-option-type": option.type, "data-option-required": `${option.required}` }, h("label", { htmlFor: this.generateInputId(option.id), class: `s-product-options-option-label ${this.hideLabel(option) ? 's-product-options-option-label-hidden' : ''}` }, h("b", null, option.name, option.required && h("span", null, " * "), " "), h("small", null, option.placeholder)), h("div", { class: `s-product-options-option-content ${this.hideLabel(option) || (option.type === DisplayType.BOOKING && salla.url.is_page("cart")) ? 's-product-options-option-content-full-width' : ''}` }, this.getDisplayForType(option))))))));
     }
@@ -618,7 +679,9 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
     }
     fillSelectedOptions() {
         this.selectedOptions = this.optionsData.reduce((acc, opt) => {
-            const selectedDetails = opt.details.filter(detail => detail.is_selected);
+            // `details` is optional on the Option interface — input-type options
+            // (text/number/date/file) carry no choice list, so guard before filtering.
+            const selectedDetails = (opt.details ?? []).filter(detail => detail.is_selected);
             const mappedDetails = selectedDetails.map(detail => ({
                 ...detail,
                 option_id: opt.id
@@ -626,6 +689,25 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
             return acc.concat(mappedDetails);
         }, []);
     }
+    /**
+     * Seed `selectedOptions` from API defaults (`is_selected: true`).
+     * componentWillLoad does this only on the cart page; non-cart callers
+     * (e.g. order-options modal) call this after mount to avoid the first
+     * multi-select toggle wiping the pre-selected defaults.
+     * */
+    async seedSelectedOptions() {
+        this.fillSelectedOptions();
+        // A required multi-select renders every checkbox `required`; handleRequiredMultipleOptions
+        // clears that once one is checked, but it only fires on user `change`. After seeding a
+        // pre-selected default we run it for the initial DOM so a defaulted-but-untouched required
+        // multi-select doesn't fail validation and block checkout. Defer to rAF so the seeded
+        // `checked` state is painted before we count it (matches the change-handler pattern above).
+        requestAnimationFrame(() => {
+            this.optionsData
+                ?.filter(o => o.type === DisplayType.MULTIPLE_OPTIONS && o.required)
+                .forEach(o => this.handleRequiredMultipleOptions(o));
+        });
+    }
     async componentDidLoad() {
         if (!this.optionsData?.length) {
             return;
@@ -688,6 +770,7 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
         this.disableCardValue = false;
         this.canDisabled = true;
         this.fillSelectedOptions();
+        this.computeAvailability();
     }
     /**
      * Enable user-initiated validation mode so invalid fields will scroll into view
@@ -798,22 +881,14 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
         //and because we are using this inside select option, we need to replace the html currency symbol with the store currency symbol
         return detailName.replace('<i class=sicon-sar></i>', salla.config.currency()?.symbol || 'ر.س');
     }
+    computeAvailability() {
+        this.availabilityMap = computeAvailabilityMap(this.optionsData || [], this.selectedOptions || []);
+    }
     isOptionDetailOut(detail) {
-        if (detail.is_out || !detail.skus_availability || !this.selectedSkus?.length) {
-            return detail.is_out;
-        }
-        const 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
-            const 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);
+        const status = this.availabilityMap[detail.id];
+        // !!detail.is_out guards against TypeScript optimising away `?? false`
+        // for the non-nullable `is_out: boolean` field when the value is actually undefined at runtime.
+        return status !== undefined ? status !== 'available' : !!detail.is_out;
     }
     /**
      * Renders a single input element (radio or checkbox) for an option detail.
@@ -826,10 +901,14 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
      */
     renderInput(type, detail, option, isRequired, name, buttonStyle) {
         const id = this.generateUniqueKey(`${type}-${option.id}-${detail.id}`);
-        const isDisabled = this.isOptionDetailOut(detail);
+        const isOutOfStock = this.isOptionDetailOut(detail);
         return (h("label", { class: {
-                "s-product-options-disabled": isDisabled,
-            } }, h("input", { id: id, type: type, name: name, value: detail.id, disabled: isDisabled, required: isRequired, checked: detail.is_selected, onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("div", { class: { "s-product-options-grid-mode-span": buttonStyle, "s-product-options-disabled": isDisabled } }, this.getOptionDetailName(detail))));
+                "s-product-options-disabled": this.canDisabled && isOutOfStock,
+                "s-product-options-option-stock-out": isOutOfStock,
+            } }, h("input", { id: id, type: type, name: name, value: detail.id, disabled: this.canDisabled && isOutOfStock, required: isRequired, checked: detail.is_selected, onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("div", { class: {
+                "s-product-options-grid-mode-span": buttonStyle,
+                "s-product-options-disabled": this.canDisabled && isOutOfStock,
+            } }, this.getOptionDetailName(detail))));
     }
     /**
      * Renders a collection of input elements for all details of an option.
@@ -902,15 +981,22 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
     }
     //@ts-ignore
     colorOption(option) {
-        return (h("fieldset", { class: "s-product-options-colors-wrapper" }, option?.details.map((detail) => (h("div", { class: "s-product-options-colors-item", key: detail.id }, h("input", { type: "radio", value: detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), disabled: this.canDisabled && this.isOptionDetailOut(detail), id: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option), "data-img-id": detail.option_value }), h("label", { htmlFor: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), "data-img-id": detail.option_value }, h("span", { style: { backgroundColor: detail.color } }), h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) })))))));
+        return (h("fieldset", { class: "s-product-options-colors-wrapper" }, option?.details.map((detail) => {
+            const isOutOfStock = this.isOptionDetailOut(detail);
+            return (h("div", { class: {
+                    "s-product-options-colors-item": true,
+                    "s-product-options-option-stock-out": isOutOfStock,
+                }, key: detail.id }, h("input", { type: "radio", value: detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), disabled: this.canDisabled && isOutOfStock, id: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option), "data-img-id": detail.option_value }), h("label", { htmlFor: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), "data-img-id": detail.option_value }, h("span", { style: { backgroundColor: detail.color } }), 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", { key: detail.id }, h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), "data-img-id": detail.option_value, disabled: this.canDisabled && this.isOptionDetailOut(detail), id: this.generateUniqueKey(`option_${this.productId}-${option.id}_${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("label", { htmlFor: this.generateUniqueKey(`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: IconVerified, class: "s-product-options-thumbnails-icon" }), this.isOptionDetailOut(detail) ?
+            const isOutOfStock = this.isOptionDetailOut(detail);
+            return h("div", { key: detail.id, class: { "s-product-options-option-stock-out": isOutOfStock } }, h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), "data-img-id": detail.option_value, disabled: this.canDisabled && isOutOfStock, id: this.generateUniqueKey(`option_${this.productId}-${option.id}_${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("label", { htmlFor: this.generateUniqueKey(`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: IconVerified, class: "s-product-options-thumbnails-icon" }), isOutOfStock ?
                 [
-                    h("small", { key: detail.id, class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText),
-                    this.canDisabled ? h("div", { key: detail.id, class: "s-product-options-thumbnails-badge-overlay" }) : '',
+                    h("small", { key: `badge-${detail.id}`, class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText),
+                    this.canDisabled ? h("div", { key: `overlay-${detail.id}`, class: "s-product-options-thumbnails-badge-overlay" }) : '',
                 ]
                 : ''), h("p", null, this.getOptionDetailName(detail, false), " "));
         }));
@@ -925,7 +1011,8 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
     }
     countryOption(option) {
         return h("div", { class: "s-product-options-digital-card-wrapper" }, option.details.map((detail) => {
-            return h("label", { htmlFor: this.generateUniqueKey(detail.id.toString()), key: detail.id, class: { "s-product-options-digital-card-option": true, "s-product-options-digital-card-option-stock-out": detail.is_out } }, h("input", { id: this.generateUniqueKey(detail.id.toString()), type: "radio", class: "s-form-control s-product-options-digital-card-input", value: detail.id, name: this.generateInputName(option.id), disabled: detail.is_out, required: !option.visibility_condition && option.required, onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option), onClick: () => { this.disableCardValue = false; }, ...(salla.url.is_page("cart") ? { defaultChecked: this.getSelectedDigitalCardOptions(option)?.id === detail.id } : {}) }), h("img", { loading: "lazy", alt: detail.code, height: 24, width: 24, class: "s-product-options-country-flag", src: `https://cdn.assets.salla.network/prod/admin/cp/assets/flags/1x1/${String(detail.code).toLocaleLowerCase()}.svg`, onError: e => {
+            const isOutOfStock = this.isOptionDetailOut(detail);
+            return h("label", { htmlFor: this.generateUniqueKey(detail.id.toString()), key: detail.id, class: { "s-product-options-digital-card-option": true, "s-product-options-digital-card-option-stock-out": isOutOfStock, "s-product-options-option-stock-out": isOutOfStock } }, h("input", { id: this.generateUniqueKey(detail.id.toString()), type: "radio", class: "s-form-control s-product-options-digital-card-input", value: detail.id, name: this.generateInputName(option.id), disabled: this.canDisabled && isOutOfStock, required: !option.visibility_condition && option.required, onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option), onClick: () => { this.disableCardValue = false; }, ...(salla.url.is_page("cart") ? { defaultChecked: this.getSelectedDigitalCardOptions(option)?.id === detail.id } : {}) }), h("img", { loading: "lazy", alt: detail.code, height: 24, width: 24, class: "s-product-options-country-flag", src: `https://cdn.assets.salla.network/prod/admin/cp/assets/flags/1x1/${String(detail.code).toLocaleLowerCase()}.svg`, onError: e => {
                     e.currentTarget.onerror = null;
                     e.currentTarget.src =
                         salla.url.cdn('images/globe.svg');
@@ -941,6 +1028,7 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
         "uniqueKey": [1, "unique-key"],
         "bundleContext": [1, "bundle-context"],
         "config": [1],
+        "noPadding": [4, "no-padding"],
         "optionsData": [32],
         "outOfStockText": [32],
         "donationAmount": [32],
@@ -955,6 +1043,7 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
         "availableDigitalCardValues": [32],
         "userInitiatedValidation": [32],
         "isCartMode": [32],
+        "availabilityMap": [32],
         "setOptionsData": [64],
         "getOptionsData": [64],
         "getSelectedOptionsData": [64],
@@ -962,6 +1051,7 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
         "hasOutOfStockOption": [64],
         "getSelectedOptions": [64],
         "getOption": [64],
+        "seedSelectedOptions": [64],
         "enterCartMode": [64],
         "enableUserInitiatedValidation": [64],
         "validateAndScroll": [64]

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

@@ -59,11 +59,11 @@ const SallaProductSizeGuide$1 = /*@__PURE__*/ proxyCustomElement(class SallaProd
         return h("salla-placeholder", { alignment: "center", iconSize: "xl" }, h("div", { slot: "title" }, this.placeholder_title), h("div", { slot: "description" }, this.placeholder_description));
     }
     render() {
-        return (h("salla-modal", { key: 'de368aff05a19d87eb4e99f4e1d7eee36155f435', class: "s-product-size-guide-wrapper", id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("span", { key: 'c4ab31b3e6ef2751761ca2db27554f7f5bf057fc', slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { key: '17cfceb5ccb0546928f87f956267e9d0c11017ac', slot: "loading" }, h("div", { key: '4f4e20a62396d7825315203ffd22a72030e821b1', class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { key: 'd9132b26634ae1997dad9f1229b248c2cd76fff0', height: '15px', width: '25%' }), h("div", { key: '1b6a236851eef6e7caf7b7a0e84e591824b4e4ef', class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { key: 'bae06741881b57b4eb853f1256a22f9393d9cea4', height: '40px' }), h("salla-skeleton", { key: 'fdeb75a853f89df154b69dbd48fc8e233561af59', height: '40px' }), h("salla-skeleton", { key: 'd0be70bc141f04fd24adc86c56eec3a5e896f2d4', height: '40px' }), h("salla-skeleton", { key: 'c5146addbf2d5b9bda05170a9743cad0e08d8674', height: '40px' })), h("div", { key: '04dbbffe2de708c984c5d0966aa2b86c0051bd14', class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { key: '320fb33a2e5d9ee1f4b87c18b3f3dd13de180d4f', height: '15px', width: '25%' }), h("salla-skeleton", { key: 'f06aeac8e2f8ea86ec9b1c5c6f2b31172f23209f', height: '10px', width: '75%' }), h("salla-skeleton", { key: '1accf852a34edcac77a77151ebf67ba8e05cc729', height: '10px', width: '50%' }), h("salla-skeleton", { key: '42d4c3364779a6ee130339e37affe2e0c590e6a7', height: '10px', width: '75%' }), h("salla-skeleton", { key: '13064a231460414b4a0abd19dda41b01ac1ee04f', height: '10px', width: '100%' }), h("salla-skeleton", { key: 'd5a50f96ca3bab125503f836cd883cfb98ca135d', height: '10px', width: '25%' }), h("salla-skeleton", { key: '11cd2ed36d9754c32173f14cd7d5ea99fc2b5577', height: '10px', width: '60%' }), h("salla-skeleton", { key: 'a5b3a192d0e38dc13a025b8b8e0aba767f35611b', height: '10px', width: '45%' }), h("salla-skeleton", { key: 'dddcb26038e180fb5b686b29d286316d4314909f', height: '10px', width: '30%' })))), h("slot", { key: '43a08b9b6e64955b726b832f0849617ac31d4c25', name: "header" }), !this.hasError && !!this.guides ?
+        return (h("salla-modal", { key: '750cca54e5286fc1b77942cc4a9784970b8569ec', class: "s-product-size-guide-wrapper", id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("span", { key: '0aecc3b447a0ef8f92183c1c785c2a8bbf139c17', slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { key: '1720d30460d99d578365cae9d6a0e92790f834a2', slot: "loading" }, h("div", { key: '0bf85ba5de7db72b7e4f4d94e592dc951c1d3801', class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { key: '3635e6c238400762f5c70266bb8359cf3c1c0527', height: '15px', width: '25%' }), h("div", { key: '0adfa776efbf9e7d988d08a3dce69900d6d3d737', class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { key: '53799c8bd0f495ec723d0cf4be0ab0e978351c23', height: '40px' }), h("salla-skeleton", { key: 'a825da569d6453a5e3b6cac9cf5848f941af22ae', height: '40px' }), h("salla-skeleton", { key: 'd2091d09ca662aef1f2d6b3cddb4bf86ccc77c0f', height: '40px' }), h("salla-skeleton", { key: '5974a5b7227d03979ea5a65f2f1481f59ca6e0fe', height: '40px' })), h("div", { key: '6e12dc1b703488433f5e8047efe16d70ebaec8c3', class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { key: '9d54f957ba7e4c78fff9ed693179d5f7faa55a25', height: '15px', width: '25%' }), h("salla-skeleton", { key: '946eedae2371d7df9d1b9cf8cf1b0f7800554eed', height: '10px', width: '75%' }), h("salla-skeleton", { key: '35d38d23f73bb4bbd4dc5372b70cd34f09cec2ea', height: '10px', width: '50%' }), h("salla-skeleton", { key: '8f13518e172127af747f50773f7a7f0d64d2c0ba', height: '10px', width: '75%' }), h("salla-skeleton", { key: '759708410b562babb733f401cdf8ee310761b110', height: '10px', width: '100%' }), h("salla-skeleton", { key: 'ad8d12dcefe5fbbd8dfa4060a028a3387186ffa1', height: '10px', width: '25%' }), h("salla-skeleton", { key: '63c5864943ec23a3a42761c90ca019acd7118f8c', height: '10px', width: '60%' }), h("salla-skeleton", { key: '490d6078c8d382740eb92c825a08e2aad203c4af', height: '10px', width: '45%' }), h("salla-skeleton", { key: '10b0d73e6a34990a2d23554faec6bce24dcc234e', height: '10px', width: '30%' })))), h("slot", { key: '3d0a3e42eba7cc521e8df1fbb2e7323962bff5a8', name: "header" }), !this.hasError && !!this.guides ?
             [
                 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", { key: '5ae0956ca1f9313b5ef3d01dbdcab32f2e975e05', name: "footer" })));
+            : this.showPlaceholder(), h("slot", { key: 'd1fc7cdbbd52a1c3c2b08f45a647e7ea1586cc9d', name: "footer" })));
     }
     get host() { return this; }
     static get style() { return sallaProductSizeGuideCss; }

package/dist/components/salla-products-slider2.js

@@ -3,13 +3,21 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { H as Helper } from './Helper.js';
-import { d as defineCustomElement$b } from './salla-add-product-button2.js';
-import { d as defineCustomElement$a } from './salla-button2.js';
-import { d as defineCustomElement$9 } from './salla-count-down2.js';
-import { d as defineCustomElement$8 } from './salla-loading2.js';
-import { d as defineCustomElement$7 } from './salla-modal2.js';
-import { d as defineCustomElement$6 } from './salla-product-availability2.js';
-import { d as defineCustomElement$5 } from './salla-product-card2.js';
+import { d as defineCustomElement$j } from './salla-add-product-button2.js';
+import { d as defineCustomElement$i } from './salla-booking-field2.js';
+import { d as defineCustomElement$h } from './salla-button2.js';
+import { d as defineCustomElement$g } from './salla-color-picker2.js';
+import { d as defineCustomElement$f } from './salla-conditional-fields2.js';
+import { d as defineCustomElement$e } from './salla-count-down2.js';
+import { d as defineCustomElement$d } from './salla-datetime-picker2.js';
+import { d as defineCustomElement$c } from './salla-file-upload2.js';
+import { d as defineCustomElement$b } from './salla-loading2.js';
+import { d as defineCustomElement$a } from './salla-map2.js';
+import { d as defineCustomElement$9 } from './salla-modal2.js';
+import { d as defineCustomElement$8 } from './salla-order-options-modal2.js';
+import { d as defineCustomElement$7 } from './salla-product-availability2.js';
+import { d as defineCustomElement$6 } from './salla-product-card2.js';
+import { d as defineCustomElement$5 } from './salla-product-options2.js';
 import { d as defineCustomElement$4 } from './salla-progress-bar2.js';
 import { d as defineCustomElement$3 } from './salla-quick-buy2.js';
 import { d as defineCustomElement$2 } from './salla-slider2.js';
@@ -149,7 +157,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-products-slider", "salla-add-product-button", "salla-button", "salla-count-down", "salla-loading", "salla-modal", "salla-product-availability", "salla-product-card", "salla-progress-bar", "salla-quick-buy", "salla-slider", "salla-tel-input"];
+    const components = ["salla-products-slider", "salla-add-product-button", "salla-booking-field", "salla-button", "salla-color-picker", "salla-conditional-fields", "salla-count-down", "salla-datetime-picker", "salla-file-upload", "salla-loading", "salla-map", "salla-modal", "salla-order-options-modal", "salla-product-availability", "salla-product-card", "salla-product-options", "salla-progress-bar", "salla-quick-buy", "salla-slider", "salla-tel-input"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-products-slider":
             if (!customElements.get(tagName)) {
@@ -158,35 +166,75 @@ function defineCustomElement() {
             break;
         case "salla-add-product-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$j();
+            }
+            break;
+        case "salla-booking-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
             }
             break;
         case "salla-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$h();
+            }
+            break;
+        case "salla-color-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "salla-conditional-fields":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
             }
             break;
         case "salla-count-down":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$e();
+            }
+            break;
+        case "salla-datetime-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "salla-file-upload":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
             }
             break;
         case "salla-loading":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$b();
+            }
+            break;
+        case "salla-map":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
             }
             break;
         case "salla-modal":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$9();
+            }
+            break;
+        case "salla-order-options-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
             }
             break;
         case "salla-product-availability":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "salla-product-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "salla-product-options":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }