@salla.sa/twilight-components 3.0.13 → 3.0.15

package/dist/collection/components/salla-filters-widget/salla-filters-widget.js

@@ -120,8 +120,14 @@ export class SallaFiltersWidget {
         if (![FilterOptionTypes.VALUES, FilterOptionTypes.MINIMUM, FilterOptionTypes.VARIANTS].includes(option.type)) {
             return '';
         }
+        // snapshot once per widget instance: selected options float to the top on page load
+        // only, so checking a box later doesn't shuffle the list under the cursor
+        if (!this.pinnedValues) {
+            //@ts-ignore
+            this.pinnedValues = new Set(option.values.map(v => this.optionValue(v)).filter(v => this.isSelectedOption(option, v)));
+        }
         //@ts-ignore
-        const filteredValues = option.values.filter((filterOption) => {
+        const filteredValues = [...option.values].sort((a, b) => Number(this.pinnedValues.has(this.optionValue(b))) - Number(this.pinnedValues.has(this.optionValue(a)))).filter((filterOption) => {
             if (!this.searchQuery)
                 return true;
             const label = typeof filterOption === 'number'
@@ -136,11 +142,14 @@ export class SallaFiltersWidget {
             return (h("div", { class: "s-filters-widget-empty-state" }, salla.lang.get('common.elements.no_options') || 'لا توجد نتائج'));
         }
         //@ts-ignore
-        return filteredValues.map((filterOption, index) => {
-            let value = typeof filterOption == 'number' ? filterOption : (filterOption.key || filterOption.value);
+        return filteredValues.map((filterOption) => {
+            const value = this.optionValue(filterOption);
             return h("label", { class: "s-filters-label", htmlFor: `${option.key}-option-${value}`, key: `${option.key}-option-${value}` }, h("input", { id: `${option.key}-option-${value}`, name: option.key, type: option.type === FilterOptionTypes.VALUES ? 'checkbox' : 'radio', checked: this.isSelectedOption(option, value), class: option.type === FilterOptionTypes.VALUES ? 's-filters-checkbox' : 's-filters-radio', onChange: event => this.changed.emit({ event, option, value }) }), this.getOptionLabel(option, filterOption));
         });
     }
+    optionValue(filterOption) {
+        return typeof filterOption == 'number' ? filterOption : (filterOption.key || filterOption.value);
+    }
     isSelectedOption(option, value) {
         if (option.type === FilterOptionTypes.MINIMUM) {
             return this.filtersData[option.key] == value;
@@ -173,12 +182,12 @@ export class SallaFiltersWidget {
         return h("span", { class: "s-filters-option-name" }, label);
     }
     render() {
-        return (h(Host, { key: '22e7662e98691ff8be05e8dd6f0b10550b0b4f7f', class: "s-filters-widget-container" }, h("h3", { key: 'a0fcdec4dbd6262f8b3dcaba3009f7daa7201ed5', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: '6a83731bc66b2d48164cdb3069f773e85223dabe' }, this.option.label), h("span", { key: 'ebb6c75aa35297d20721ac21a8ec1b7156752ae6', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: 'ea068e1bdc9c35106b1f48a0a33ae022960e771a', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: 'b591ba684e2f6dbd1473499e848d8f7473993d97', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: '1d0caf13b9033334f525da643c378b7a23a3f227', type: "text", class: "s-filters-widget-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder') || 'بحث...', value: this.searchQuery, onInput: (e) => this.searchQuery = e.target.value }))), h("div", { key: '09b6925befe4eda2912d2fa277ecc9fbfe539166', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: 'b675d934c1cf7d11c71a5c2e5c607f59cba4e44b' }), this.option.type !== FilterOptionTypes.RANGE
+        return (h(Host, { key: '5d0e0ab6de7efb4eb75c2e1c85421dd6f3cf3e1d', class: "s-filters-widget-container" }, h("h3", { key: 'df5a000bf4de2c59ada08cdee02e2239f6052db7', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: '0e55827c11e6d936cd9fd5f489f40bdaacd636fd' }, this.option.label), h("span", { key: 'ebcd57b65904b8669a4bcb8d6d849360bfa5b2da', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: '30e65251f0f2c2d88ad8232ef9c5a1dc407edcd9', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: 'b661a373929b51e16eb6b23190d78a4b6290117d', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: '3e5eebd5d36957d09953f4a6a0629891304a3f7e', type: "text", class: "s-filters-widget-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder') || 'بحث...', value: this.searchQuery, onInput: (e) => this.searchQuery = e.target.value }))), h("div", { key: '774f6590dd76edbd334f41ca2d15518019e8d43a', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: '0fe6b327f9065c53fbeec8a74fa01a21403b5e2b' }), this.option.type !== FilterOptionTypes.RANGE
             ? this.renderFilterOption(this.option)
             : h("salla-price-range", { onChanged: (event) => {
                     this.changed.emit(event.detail);
                 }, ref: price => this.priceRange = price, filtersData: this.filtersData, option: this.option })), this.withLoadMore && (!this.searchQuery || this.filteredCount > this.initialItemCount) &&
-            h("a", { key: '7f3358dd636b01df91510c09f472fee7b4bfb0bf', class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
+            h("a", { key: 'a07b802f1f9432826578992bf77518f3793589a8', class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
     }
     static get is() { return "salla-filters-widget"; }
     static get originalStyleUrls() {

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

@@ -134,7 +134,7 @@ export class SallaMultipleBundleProductSlider {
         }
     }
     render() {
-        return (h(Host, { key: '2ca2abba3b76523115bc14c2f9f5a260d6aac773' }, h("salla-slider", { key: 'a874eb56bd85e4405783e94e0dae1eb5c4077e93', type: "carousel", controlsOuter: false, showControls: false, id: `accordion-multiple-bundle-product-${this.section.id}`, pagination: true, class: "s-multiple-bundle-product-wrapper-slider", sliderConfig: { spaceBetween: 0 } }, h("div", { key: '2b452eb0da6e0d005255daaf73223515dafc2e16', slot: "items" }, this?.section?.products?.map((product, productIndex) => {
+        return (h(Host, { key: 'fc6f9cc1bbc36bbcdfc9bc4346d818cd9ac67c92', class: "s-multiple-bundle-product-slider" }, h("salla-slider", { key: '82648a1348104be40093a501ceab6ea0209ec761', type: "carousel", controlsOuter: false, showControls: false, id: `accordion-multiple-bundle-product-${this.section.id}`, pagination: true, class: "s-multiple-bundle-product-wrapper-slider", sliderConfig: { spaceBetween: 0 } }, h("div", { key: 'a6d44237aaabb99aa4b4c8c3c5a986fe8d5afdc7', slot: "items" }, this?.section?.products?.map((product, productIndex) => {
             const isChecked = this.selectedProducts[this.section.id]?.has(product.id) || false;
             const isLocked = isChecked && this.isSelectionLocked;
             const isDisabled = this.isProductSelectionDisabled(product, isChecked);

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

@@ -45,6 +45,9 @@
   flex-direction: column;
   gap: 1rem;
 }
+.s-multiple-bundle-product-slider {
+  display: block;
+}
 .s-multiple-bundle-product-wrapper-slider .swiper {
   display: block !important;
 }

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

@@ -130,7 +130,7 @@ export class SallaScopees {
                 'id': this.current_scope.id
             });
             salla.cart.reset();
-            window.location.replace(salla.helpers.addParamToUrl('scope', this.current_scope.id));
+            window.location.replace(salla.scope.urlFor(this.current_scope));
         }).catch(e => console.log(e))
             .finally(() => {
             this.changeBtn.stop();