@salla.sa/twilight-components 3.0.15 → 3.0.16

package/dist/cjs/salla-wishlist-summary.cjs.entry.js

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-var index = require('./index-Cbi9cOBy.js');
+var index = require('./index-PB4iLztN.js');
 var heart = require('./heart-ClVn_Co8.js');
-var Helper = require('./Helper-Dmb3FQQs.js');
+var Helper = require('./Helper-BV6HUQzI.js');
 
 const sallaWishlistSummaryCss = "/*!twlt*/:host{display:inline-flex;align-items:center;margin-inline-start:1rem}.hidden{display:none}.s-wishlist-summary-wrapper{position:relative;margin-inline-start:0.75rem;display:inline-flex;align-items:center;border-style:none;text-decoration-line:none;outline:2px solid transparent;outline-offset:2px;transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms}.s-wishlist-summary-wrapper:hover{opacity:0.8}.s-wishlist-summary-icon{display:inline-flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;border-color:var(--color-border,#e5e7eb);color:var(--color-text-primary,#374151)}.s-wishlist-summary-icon svg{height:1.25rem;width:1.25rem;fill:currentColor}.s-wishlist-summary-count{position:absolute;top:-4px;left:-6px;display:inline-flex;height:1.25rem;width:1.25rem;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(248 113 113 / var(--tw-bg-opacity, 1));padding:0.25rem;font-size:0.75rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.s-wishlist-summary-count:where([dir=\"rtl\"],[dir=\"rtl\"] *){left:unset;right:-6px}";
 

package/dist/cjs/twilight.cjs.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Cbi9cOBy.js');
+var index = require('./index-PB4iLztN.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*

package/dist/cjs/{vanilla-picker-D1DK9OwS.js → vanilla-picker-ZsewI4gd.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Cbi9cOBy.js');
+var index = require('./index-PB4iLztN.js');
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/collection/components/salla-bullet-delivery/salla-bullet-delivery.css

@@ -14,11 +14,14 @@
   }
 }
 
-/* Allow searchable dropdown popover to paint outside the modal body */
-.s-bullet-delivery .s-bullet-delivery-modal .s-modal-body:has(.s-searchable-dropdown--open) {
-  overflow: visible !important;
+/* Allow searchable dropdown popover to paint outside the modal body (tablet/desktop only).
+   On mobile the modal body is the bottom-sheet scroll container (overflow-y: auto); forcing it
+   visible lets the panel run off-screen so the options can't be reached or scrolled. */
+@media screen and (min-width: 640px) {
+  .s-bullet-delivery .s-bullet-delivery-modal .s-modal-body:has(.s-searchable-dropdown--open) {
+    overflow: visible !important;
+  }
 }
-
 .s-bullet-delivery-form-actions.s-bullet-delivery-form-actions--single {
   padding-bottom: 0;
   flex-direction: column;
@@ -455,8 +458,10 @@
     overflow-y: auto;
   }
 }
-.s-bullet-delivery .s-bullet-delivery-modal .s-modal-body:has(.s-searchable-dropdown--open){
-  overflow: visible !important;
+@media (min-width: 640px){
+  .s-bullet-delivery .s-bullet-delivery-modal .s-modal-body:has(.s-searchable-dropdown--open){
+    overflow: visible !important;
+  }
 }
 .s-bullet-delivery-inner{
   min-block-size: 0;

package/dist/collection/components/salla-color-picker/color-popup-placement.js

@@ -0,0 +1,68 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+const CLIPPING_OVERFLOW = new Set(['hidden', 'auto', 'clip', 'scroll']);
+/**
+ * Intersect the viewport with the nearest ancestor that clips each axis.
+ * `overflow-x` / `overflow-y` of `hidden`, `auto`, `clip`, or `scroll` clip.
+ * `visible` does not.
+ */
+export function clippingFrame(start, viewport) {
+    const frame = {
+        left: 0,
+        right: viewport.width,
+        top: 0,
+        bottom: viewport.height,
+    };
+    let clipsX = false;
+    let clipsY = false;
+    let node = start.parentElement;
+    while (node && (!clipsX || !clipsY)) {
+        const style = getComputedStyle(node);
+        const hitX = !clipsX && CLIPPING_OVERFLOW.has(style.overflowX);
+        const hitY = !clipsY && CLIPPING_OVERFLOW.has(style.overflowY);
+        if (hitX || hitY) {
+            const rect = node.getBoundingClientRect();
+            if (hitX) {
+                frame.left = Math.max(frame.left, rect.left);
+                frame.right = Math.min(frame.right, rect.right);
+                clipsX = true;
+            }
+            if (hitY) {
+                frame.top = Math.max(frame.top, rect.top);
+                frame.bottom = Math.min(frame.bottom, rect.bottom);
+                clipsY = true;
+            }
+        }
+        node = node.parentElement;
+    }
+    return frame;
+}
+/**
+ * Keep the legacy popup position unless it leaves the visible frame.
+ * The frame is the viewport, or the viewport intersected with a clipping ancestor.
+ * Open downward unless that would clip the Ok button and there is more room above.
+ * `shift` is a pixel correction on top of the left already applied.
+ */
+export function placeColorPopup(input) {
+    const margin = input.margin ?? 8;
+    const { popup, widget, viewport } = input;
+    const frame = input.frame ?? {
+        left: 0,
+        right: viewport.width,
+        top: 0,
+        bottom: viewport.height,
+    };
+    const spaceBelow = frame.bottom - widget.bottom;
+    const spaceAbove = widget.top - frame.top;
+    const clipsBottom = popup.bottom > frame.bottom - margin;
+    const side = clipsBottom && spaceAbove > spaceBelow ? 'top' : 'bottom';
+    let shift = 0;
+    if (popup.left < frame.left + margin) {
+        shift = frame.left + margin - popup.left;
+    }
+    else if (popup.right > frame.right - margin) {
+        shift = frame.right - margin - popup.right;
+    }
+    return { side, shift };
+}

package/dist/collection/components/salla-color-picker/salla-color-picker.css

@@ -1,4 +1,10 @@
-/*!twlt*/.resize {
+/*!twlt*/.visible {
+    visibility: visible
+}
+.hidden {
+    display: none
+}
+.resize {
     resize: both
 }
 .s-hidden {
@@ -14,6 +20,12 @@
     --tw-shadow-colored: 0 0 #0000 !important;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
 }
+.s-color-picker-main .picker_wrapper.popup {
+    z-index: 30 !important
+}
+.s-color-picker-main .picker_wrapper.\!popup {
+    z-index: 30 !important
+}
 .s-color-picker-main .picker_arrow {
     display: none
 }

package/dist/collection/components/salla-color-picker/salla-color-picker.js

@@ -4,6 +4,7 @@
 import { h, Host, } from "@stencil/core";
 import ArrowDown from "../../assets/svg/keyboard_arrow_down.svg";
 import { isSallaSdkAvailable } from "../../utils/ssr-helpers";
+import { clippingFrame, placeColorPopup } from "./color-popup-placement";
 export class SallaColorPicker {
     constructor() {
         /** Lazy-loaded to avoid bundling vanilla-picker (Babel polyfills) into main/hydrate bundle. */
@@ -159,12 +160,13 @@ export class SallaColorPicker {
         return 375;
     }
     setPopInPosition() {
-        // Use cached viewport width – reading innerWidth at popup open causes forced reflow.
-        // Fallback: matchMedia-based value when cache is 0 (e.g. SSR before hydration). Same breakpoints as updateViewportCache.
+        // Legacy offset still uses the breakpoint cache, not innerWidth.
+        // The clip check reads the viewport and the nearest clipping ancestor
+        // in the same turn as getBoundingClientRect, so those reads share that layout flush.
         const viewportWidth = this.cachedViewportWidth || this.getViewportWidthFromBreakpoints();
         const popup = this.host.querySelector('.picker_wrapper');
         const widgetEl = this.host.querySelector('.s-color-picker-widget');
-        if (!popup || !widgetEl)
+        if (!popup || !widgetEl || typeof window === 'undefined')
             return;
         const widgetPosition = widgetEl.getBoundingClientRect();
         const widgetToWindowEq = viewportWidth / 2 - widgetPosition.width / 2;
@@ -179,7 +181,24 @@ export class SallaColorPicker {
             popup.style.left = 'auto';
         }
         if (!isMobile || (isMobile && ((!widgetInRight && !widgetInLeft) || widgetInCenter))) {
-            popup.style.left = `-95px`;
+            popup.style.left = '-95px';
+        }
+        popup.classList.add('popup_bottom');
+        popup.classList.remove('popup_top');
+        const viewport = { width: window.innerWidth, height: window.innerHeight };
+        const placement = placeColorPopup({
+            popup: popup.getBoundingClientRect(),
+            widget: { top: widgetPosition.top, bottom: widgetPosition.bottom },
+            viewport,
+            frame: clippingFrame(popup, viewport),
+        });
+        popup.classList.remove('popup_bottom');
+        popup.classList.remove('popup_top');
+        popup.classList.add(placement.side === 'top' ? 'popup_top' : 'popup_bottom');
+        if (placement.shift !== 0) {
+            const base = popup.style.left === 'auto' ? parseFloat(getComputedStyle(popup).left) || 0 : parseFloat(popup.style.left);
+            popup.style.left = `${base + placement.shift}px`;
+            popup.style.right = 'auto';
         }
     }
     initColorPicker() {
@@ -203,7 +222,7 @@ export class SallaColorPicker {
         });
     }
     render() {
-        return (h(Host, { key: '07854a7e805e42a1f951fc7fbf32e72190104c10', class: "s-color-picker-main" }, h("slot", { key: '041f76cc8829cc8c69aa6a37edbeada7bdf0ec2f', name: "widget" }, h("div", { key: '6834f5fb645d1934d7a5a859e5e1642b6feb3b7a', class: "s-color-picker-widget" }, h("div", { key: 'f5859253aa89ca001f240ef96a8afeff2f24f072', class: "s-color-picker-widget-canvas", ref: dv => (this.canvas = dv) }), h("span", { key: '7d2260c312e04e5c756cb342a6600af1a3b9fabf', innerHTML: ArrowDown }))), h("input", { key: '81aee3223b9fd228015809319c40eed173938292', class: "s-hidden", name: this.name, required: this.required, value: this.color, ref: color => (this.colorInput = color) })));
+        return (h(Host, { key: '9b733fabacb7d18cbe2dee845ef96d7770fad402', class: "s-color-picker-main" }, h("slot", { key: '077d47dc2a759500db5eb588df1caa05a3d04ecc', name: "widget" }, h("div", { key: '76252b75d56cdc0587c327b5c0777a91d8e8dcba', class: "s-color-picker-widget" }, h("div", { key: '334ce5f8aa8ab3b529fa19310b551f2f57a776ea', class: "s-color-picker-widget-canvas", ref: dv => (this.canvas = dv) }), h("span", { key: 'b43c29d5e939ee7da3b69257c088efb1e9871737', innerHTML: ArrowDown }))), h("input", { key: 'c607e63377ceab32cd6cf77de572c0e2afbf72c7', class: "s-hidden", name: this.name, required: this.required, value: this.color, ref: color => (this.colorInput = color) })));
     }
     componentDidLoad() {
         if (this.canvas)

package/dist/collection/components/salla-modal/salla-modal.css

@@ -62,8 +62,10 @@
     overflow-y: auto;
   }
 }
-.s-bullet-delivery .s-bullet-delivery-modal .s-modal-body:has(.s-searchable-dropdown--open) {
-  overflow: visible !important;
+@media (min-width: 640px) {
+  .s-bullet-delivery .s-bullet-delivery-modal .s-modal-body:has(.s-searchable-dropdown--open) {
+    overflow: visible !important;
+  }
 }
 .s-comments-item-images-slider .s-modal-close {
   background-color: transparent;

package/dist/collection/components/salla-multiple-bundle-product/components/salla-multiple-bundle-product-details.js

@@ -302,29 +302,44 @@ export class SallaMultipleBundleProductDetails {
         }
         return '0';
     }
+    ensureProductCountLang() {
+        if (SallaMultipleBundleProductDetails.productCountLangReady) {
+            return;
+        }
+        salla.lang.add('pages.products.bundle_product_count', {
+            ar: '{1} منتج|{2} منتجان|[3,10] :count منتجات|[11,99] :count منتجًا|[0,*] :count منتج',
+            en: '{1} :count product|[0,*] :count products',
+        });
+        SallaMultipleBundleProductDetails.productCountLangReady = true;
+    }
     getSectionSelectionNote(section) {
         const min = this.getObligatoryMin(section);
         const max = Number(section.max_obligatory_products) || 0;
-        const hasMin = min > 0;
-        const hasMax = max > 0;
-        if (!hasMin && !hasMax) {
+        if (min <= 0 && max <= 0) {
             return null;
         }
-        if (hasMin && hasMax) {
+        this.ensureProductCountLang();
+        const products = (count) => salla.lang.choice('pages.products.bundle_product_count', count);
+        const num = (v) => salla.helpers.number(String(v));
+        const ar = (salla.lang.getLocale?.() || 'ar') === 'ar';
+        if (min > 0 && max > 0) {
             if (min === max) {
-                return salla.lang.getWithDefault('pages.products.bundle_select_exact', `اختر ${min} منتجات`, { count: min });
+                return ar ? `اختر ${products(min)}` : `Select ${products(min)}`;
             }
-            return salla.lang.getWithDefault('pages.products.bundle_select_range', `اختر من ${min} إلى ${max} منتجات`, { min, max });
+            return ar
+                ? `اختر من ${num(min)} إلى ${products(max)}`
+                : `Select from ${num(min)} to ${products(max)}`;
         }
-        if (hasMin) {
-            return salla.lang.getWithDefault('pages.products.bundle_select_min', `اختر على الأقل ${min} منتجات`, { min });
+        if (min > 0) {
+            return ar ? `اختر على الأقل ${products(min)}` : `Select at least ${products(min)}`;
         }
-        return salla.lang.getWithDefault('pages.products.bundle_select_max', `اختر حتى ${max} منتجات`, { max });
+        return ar ? `اختر حتى ${products(max)}` : `Select up to ${products(max)}`;
     }
     handleSectionsChange() {
         this.autoSelectSingleProductSections();
     }
     componentWillLoad() {
+        this.ensureProductCountLang();
         this.autoSelectSingleProductSections();
     }
     renderAccordionHeader(section) {
@@ -360,9 +375,9 @@ export class SallaMultipleBundleProductDetails {
         }
     }
     render() {
-        return (h(Host, { key: '716869ccc9770ebbf8d4873c3c9e666c6ce0294c', class: "s-multiple-bundle-product-wrapper" }, h("div", { key: '1d8756931ac2968db4f951b29c409f676498b2bf', class: "s-multiple-bundle-product-wrapper-sections" }, this.sections.map((section, index) => {
+        return (h(Host, { key: 'ccc37b0f67b64192f1d7c12660b8c968aa776b15', class: "s-multiple-bundle-product-wrapper" }, h("div", { key: '6529eb0eea69ea8440fbba251df56a3e7bdcff32', class: "s-multiple-bundle-product-wrapper-sections" }, this.sections.map((section, index) => {
             return (h("salla-accordion", { key: section.id, collapsed: index === 0 ? false : true }, h("salla-accordion-head", null, this.renderAccordionHeader(section)), h("salla-accordion-body", null, h("salla-multiple-bundle-product-slider", { section: section, sectionIndex: index, selectedProducts: this.selectedProducts, selectionLimit: this.getEffectiveMax(section), isSelectionLocked: this.isProductSelectionLocked(section), onProductSelected: this.handleBundleSliderProductSelected, onProductOptionsSelected: this.handleBundleSliderProductOptionsSelected }))));
-        })), h("salla-multiple-bundle-product-options-modal", { key: '065067fdeb3487f5b0b71649d0f2718ec62caf38' })));
+        })), h("salla-multiple-bundle-product-options-modal", { key: 'ea769a631840c75d2906da8f97c7127ddd772f04' })));
     }
     static get is() { return "salla-multiple-bundle-product-details"; }
     static get originalStyleUrls() {
@@ -446,3 +461,4 @@ export class SallaMultipleBundleProductDetails {
             }];
     }
 }
+SallaMultipleBundleProductDetails.productCountLangReady = false;

package/dist/collection/components/salla-multiple-bundle-product/salla-multiple-bundle-product.css

@@ -4,6 +4,9 @@
 .visible {
   visibility: visible;
 }
+.static {
+  position: static;
+}
 .hidden {
   display: none;
 }

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

@@ -98,6 +98,11 @@
         grid-column: span 2 / span 2;
         margin-top: 0px
     }
+}
+.s-product-options-option-content-color {
+    overflow: visible !important
+}
+@media (min-width: 640px) {
     .s-product-options-option-content-full-width {
         grid-column: span 3 / span 3
     }

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

@@ -615,7 +615,11 @@ export class SallaProductOptions {
         }
         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))))))));
+            : 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': true,
+                    's-product-options-option-content-full-width': this.hideLabel(option) || (option.type === DisplayType.BOOKING && salla.url.is_page('cart')),
+                    's-product-options-option-content-color': option.type === DisplayType.COLOR_PICKER,
+                } }, this.getDisplayForType(option))))))));
     }
     generateUniqueKey(defaultValue) {
         const contextData = this.bundleContext;

package/dist/collection/components/salla-quick-buy/salla-quick-buy.js

@@ -314,7 +314,15 @@ export class SallaQuickBuy {
         return salla.api.request('checkout/quick-purchase/' + this.productId, data, 'post');
     }
     isGuestCheckout() {
-        return salla.config.isGuest() && salla.config.get('store.features').includes('guest-checkout') && this.isPhysicalProduct();
+        return salla.config.isGuest() && this.isGuestCheckoutAllowed() && this.isPhysicalProduct();
+    }
+    // store.features scores the shopper's cart; buy_now.guest_checkout scores this product alone
+    isGuestCheckoutAllowed() {
+        const buyNowGuest = salla.config.get('store.settings.buy_now.guest_checkout');
+        if (typeof buyNowGuest === 'boolean' && this.productId == salla.config.get('page.id')) {
+            return buyNowGuest;
+        }
+        return salla.config.get('store.features').includes('guest-checkout');
     }
     getRequiredShippingContactFields() {
         let fields = [];

package/dist/collection/components/salla-searchable-dropdown/salla-searchable-dropdown.css

@@ -149,6 +149,9 @@
   max-height: min(40vh, 220px);
   overflow-y: auto;
   scrollbar-width: thin;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  touch-action: pan-y;
 }
 
 .s-searchable-dropdown-item {
@@ -264,8 +267,11 @@
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
 }
-.s-bullet-delivery .s-bullet-delivery-modal .s-modal-body:has(.s-searchable-dropdown--open) {
-  overflow: visible !important;
+@media (min-width: 640px) {
+
+  .s-bullet-delivery .s-bullet-delivery-modal .s-modal-body:has(.s-searchable-dropdown--open) {
+    overflow: visible !important;
+  }
 }
 .s-searchable-dropdown {
   position: relative;

package/dist/collection/components/salla-searchable-dropdown/salla-searchable-dropdown.js

@@ -116,19 +116,32 @@ export class SallaSearchableDropdown {
         }
         return null;
     }
+    /** Touch-first devices: focusing the search input raises the on-screen keyboard, which covers the list. */
+    isCoarsePointer() {
+        return !!window.matchMedia?.('(pointer: coarse)').matches;
+    }
+    /** Mobile bottom-sheet layout: the modal body is the scroll container and must keep scrolling. */
+    isNarrowViewport() {
+        return !!window.matchMedia?.('(max-width: 639px)').matches;
+    }
     open() {
         if (this.disabled || this.loading)
             return;
         this.isOpen = true;
         this.focusedIndex = -1;
-        if (!this.keepParentScroll) {
+        if (!this.keepParentScroll && !this.isNarrowViewport()) {
             this.scrollableAncestor = this.findScrollableAncestor();
             if (this.scrollableAncestor) {
                 this.scrollableAncestor.style.overflow = 'visible';
             }
         }
         this.dropdownOpened.emit();
-        requestAnimationFrame(() => this.searchInputRef?.focus());
+        requestAnimationFrame(() => {
+            if (!this.isCoarsePointer()) {
+                this.searchInputRef?.focus();
+            }
+            this.panelRef?.scrollIntoView?.({ block: 'nearest' });
+        });
     }
     close() {
         if (!this.isOpen)
@@ -188,18 +201,18 @@ export class SallaSearchableDropdown {
     render() {
         const hasSelection = this.selectedItem != null;
         const listboxId = `${this.inputId}-listbox`;
-        return (h(Host, { key: '9bf5bb827d3738d4782736af17630208771342eb', class: "s-searchable-dropdown" }, h("div", { key: '2d2f88a24afa01d6f3e554906ee6d936fede5c02', class: { 's-searchable-dropdown': true, 's-searchable-dropdown--open': this.isOpen } }, this.label && (h("label", { key: 'a3c68d7a0a73229691df9bf30cf973b74ea62999', class: "s-searchable-dropdown-label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '5c068cd4babd03a5fc3604ad0acc98f4a61f05cc', class: "s-searchable-dropdown-required" }, " *"))), h("div", { key: 'e80750322f9e4d72e45d23f0b830e2b64b5e531e', class: {
+        return (h(Host, { key: 'eadd6ff762e66bc3458d19f7d2490da939a268d0', class: "s-searchable-dropdown" }, h("div", { key: '0cb614d73e06626c0cd3b5e5eadc76ebfc296093', class: { 's-searchable-dropdown': true, 's-searchable-dropdown--open': this.isOpen } }, this.label && (h("label", { key: '6f3c440ccad07f3ab271f85f508ddf6294464947', class: "s-searchable-dropdown-label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '9415e3b6b87e702079c2fc810aa7621e623e5641', class: "s-searchable-dropdown-required" }, " *"))), h("div", { key: '7ed8979005ef68e40976a536ead5da4c736bb0ba', class: {
                 's-searchable-dropdown-trigger': true,
                 's-searchable-dropdown-trigger--disabled': this.disabled || this.loading,
                 's-searchable-dropdown-trigger--open': this.isOpen,
-            }, role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-disabled": this.disabled || this.loading ? 'true' : 'false', tabIndex: this.disabled || this.loading ? -1 : 0, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hasSelection ? (h("span", { class: "s-searchable-dropdown-trigger-text" }, this.getDisplayName(this.selectedItem))) : (h("span", { class: "s-searchable-dropdown-trigger-placeholder" }, this.placeholder)), h("i", { key: '030dddd73a8909d51847c6a8ea98b628674002c1', class: {
+            }, role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-disabled": this.disabled || this.loading ? 'true' : 'false', tabIndex: this.disabled || this.loading ? -1 : 0, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hasSelection ? (h("span", { class: "s-searchable-dropdown-trigger-text" }, this.getDisplayName(this.selectedItem))) : (h("span", { class: "s-searchable-dropdown-trigger-placeholder" }, this.placeholder)), h("i", { key: '7df0a517cb916ad6652544c1b738c569ab2f290f', class: {
                 'sicon-keyboard_arrow_down': true,
                 's-searchable-dropdown-trigger-icon': true,
                 's-searchable-dropdown-trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" })), this.isOpen && (h("div", { key: 'ced396bea68ce724a04b4cd2a85c8972ff7f7f3d', class: {
+            }, "aria-hidden": "true" })), this.isOpen && (h("div", { key: '797dea9a0b0a26402132f5d33c49b74cde5f617d', class: {
                 's-searchable-dropdown-panel': true,
                 's-searchable-dropdown-panel--up': this.dropUp,
-            }, ref: (el) => (this.panelRef = el) }, this.searchable && (h("div", { key: '2d93d2156463cb53e4d8422bbbc54a90d58cde49', class: "s-searchable-dropdown-search-wrap" }, h("i", { key: '651f0b1e13e55bd67a0465241bc2d38fbc2192e7', class: "sicon-search s-searchable-dropdown-search-icon", "aria-hidden": "true" }), h("input", { key: '563c06758fdd5027e227218e77b7c2fb29ca07db', ref: (el) => (this.searchInputRef = el), id: this.inputId, type: "text", class: "s-searchable-dropdown-search-input", placeholder: this.placeholder, value: this.clientSearch ? this.clientSearchQuery : this.searchQuery, onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchKeyDown, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": listboxId }))), h("div", { key: '20b26b044bba28fc74c0a0f81c6fcc8dae63d9de', id: listboxId, class: "s-searchable-dropdown-list s-scrollbar", role: "listbox" }, this.renderListContent()))))));
+            }, ref: (el) => (this.panelRef = el) }, this.searchable && (h("div", { key: 'e7b7ec94dbc99ac40a1f833b7aa61c5d2a8742b7', class: "s-searchable-dropdown-search-wrap" }, h("i", { key: '59fc0e1986726f99639688c18bc6c501fae966b4', class: "sicon-search s-searchable-dropdown-search-icon", "aria-hidden": "true" }), h("input", { key: '70a63f4297d7f1f204d95336cc6aaea28d8f14e1', ref: (el) => (this.searchInputRef = el), id: this.inputId, type: "text", class: "s-searchable-dropdown-search-input", placeholder: this.placeholder, value: this.clientSearch ? this.clientSearchQuery : this.searchQuery, onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchKeyDown, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": listboxId }))), h("div", { key: 'f998cc8115062d98befdb814cba0a282c491ef4e', id: listboxId, class: "s-searchable-dropdown-list s-scrollbar", role: "listbox" }, this.renderListContent()))))));
     }
     renderListContent() {
         if (this.searching || this.loading) {