@salla.sa/twilight-components 2.14.393 → 2.14.395

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

@@ -1,4 +1,9 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{S as s,d as t}from"./salla-filters-widget2.js";const a=s,o=t;export{a as SallaFiltersWidget,o as defineCustomElement}
+import { S as SallaFiltersWidget$1, d as defineCustomElement$1 } from './salla-filters-widget2.js';
+
+const SallaFiltersWidget = SallaFiltersWidget$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaFiltersWidget, defineCustomElement };

package/dist/components/salla-filters-widget2.js

@@ -1,4 +1,248 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as t,HTMLElement as e,createEvent as i,h as a,Host as l}from"@stencil/core/internal/client";import{H as h}from"./Helper.js";import{d as r}from"./salla-button2.js";import{d as n}from"./salla-price-range2.js";import{d as o}from"./salla-rating-stars2.js";var c,d;!function(s){s.VALUES="values",s.VARIANTS="variants",s.MINIMUM="minimum",s.RANGE="range"}(c||(c={})),function(s){s.VALUES="values",s.VARIANT="variants",s.RANGE="range"}(d||(d={}));const f=t(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.changed=i(this,"changed",7),this.initialItemCount=10,this.expandedItemCount=15,this.calculatedInitialHeight=0,this.calculatedExpandedHeight=0,this.isOpen=!0,this.isShowMore=!1,this.showMoreLabel="عرض المزيد",this.showLessLabel="عرض أقل",this.page=salla.config.get("page"),this.searchQuery="",this.filteredCount=0}connectedCallback(){this.withLoadMore="price"!=this.option.key&&Array.isArray(this.option.values)&&this.option.values.length>this.initialItemCount,salla.onReady((()=>{this.page=salla.config.get("page")})),salla.lang.onLoaded((()=>{this.showMoreLabel=salla.lang.getWithDefault("common.titles.more",this.showMoreLabel),this.showLessLabel=salla.lang.getWithDefault("common.elements.show_less",this.showLessLabel)}))}componentDidLoad(){const s=this.widgetValues.querySelectorAll(".s-filters-label");if(s.length>0){const t=Math.min(this.initialItemCount,s.length);this.calculatedInitialHeight=35*this.initialItemCount,this.calculatedExpandedHeight=s.length>this.initialItemCount?35*this.expandedItemCount:35*t}this.widgetValues.scrollHeight<this.calculatedInitialHeight&&(this.withLoadMore=!1),this.withLoadMore&&this.widgetValues&&(this.widgetValues.style.maxHeight=`${this.calculatedInitialHeight}px`),this.widgetContent.style.height=`${this.widgetContent.scrollHeight}px`}async setWidgetHeight(s=250){this.widgetContent.removeAttribute("style"),setTimeout((()=>{this.widgetContent.style.height=this.widgetContent.scrollHeight+"px"}),s)}async reset(){this.option.type===c.RANGE&&this.priceRange.reset(),Array.from(this.host.querySelectorAll("input")).forEach((s=>s.checked=!1))}async showMore(){this.isShowMore=!this.isShowMore,this.widgetContent.style.height="auto",this.isShowMore||(this.widgetValues.scrollTop=0);const s=this.isShowMore?this.calculatedExpandedHeight:this.calculatedInitialHeight,t=this.searchQuery?this.filteredCount:Array.isArray(this.option.values)?this.option.values.length:0;this.widgetValues.style.maxHeight=`${s}px`,this.widgetValues.style.overflowY=this.isShowMore&&t>this.expandedItemCount?"auto":"hidden",setTimeout((()=>{this.widgetContent.style.height=`${this.widgetContent.scrollHeight}px`}),400)}async toggleWidget(){this.isOpen=!this.isOpen,h.toggleElementClassIf(this.widgetContent,"s-filters-widget-opened","s-filters-widget-closed",(()=>this.isOpen))}renderFilterOption(s){if(![c.VALUES,c.MINIMUM,c.VARIANTS].includes(s.type))return"";const t=s.values.filter((s=>{if(!this.searchQuery)return!0;const t="number"==typeof s?String(s):s?.value||s?.key||"";return String(t).toLowerCase().includes(this.searchQuery.toLowerCase())}));return this.filteredCount=t.length,0===t.length?a("div",{class:"s-filters-widget-empty-state"},salla.lang.get("common.elements.no_options")||"لا توجد نتائج"):t.map((t=>{let e="number"==typeof t?t:t.key||t.value;return a("label",{class:"s-filters-label",htmlFor:`${s.key}-option-${e}`,key:`${s.key}-option-${e}`},a("input",{id:`${s.key}-option-${e}`,name:s.key,type:"radio",checked:this.isSelectedOption(s,e),class:"s-filters-radio",onChange:t=>this.changed.emit({event:t,option:s,value:e})}),this.getOptionLabel(s,t))}))}isSelectedOption(s,t){return s.type===c.MINIMUM?this.filtersData[s.key]==t:s.type===c.VARIANTS?this.filtersData[s.type]&&this.filtersData[s.type][Object.keys(this.filtersData[s.type])[0]]==t:s.type===c.RANGE?this.filtersData[s.key]&&this.filtersData[s.key].min==t.min&&this.filtersData[s.key].max==t.max:s.type===c.VALUES&&this.filtersData[s.key]&&Number(this.filtersData[s.key])==Number(t)}getOptionLabel(s,t){return"rating"==s.key?a("salla-rating-stars",{size:"small",value:t}):a("span",{class:"s-filters-option-name"},t.value||"null")}render(){return a(l,{key:"e93cfb9f1f6daeb8a2121ccb36a3cf135a55e902",class:"s-filters-widget-container"},a("h3",{key:"d5ef45d78e0119e2ac997ded417e310c0a797c34",class:"s-filters-widget-title",onClick:()=>this.toggleWidget()},a("span",{key:"fe4df56fad0d290395d78588456fb7d00a20ed43"},this.option.label),a("span",{key:"c961f86b5e06437dfdd145e164da5fe326500032",class:"s-filters-widget-plusminus "+(this.isOpen?"s-filters-widget-plusminus-active":"")})),a("div",{key:"7cf1ed1b562bf16acc481f682965567d8bc1813c",class:"s-filters-widget-content",ref:s=>this.widgetContent=s},Array.isArray(this.option.values)&&this.option.values.length>5&&a("div",{key:"275427371f48fdfc8ef8b80b9d3e11fa247f7d7a",class:"s-filters-widget-search-wrapper",style:{padding:"8px 0",marginBottom:"8px"}},a("input",{key:"473c082ed9f7415beba445d36a121027eaadbbe1",type:"text",class:"s-filters-widget-search-input",placeholder:salla.lang.get("blocks.header.search_placeholder")||"بحث...",value:this.searchQuery,onInput:s=>this.searchQuery=s.target.value})),a("div",{key:"e45654731cdd801345acc5b3311d9ddab3020035",class:"s-filters-widget-values",ref:s=>this.widgetValues=s},a("slot",{key:"5ae673157a4b579a000901b04db8e375a52565e7"}),this.option.type!==c.RANGE?this.renderFilterOption(this.option):a("salla-price-range",{onChanged:s=>{this.changed.emit(s.detail)},ref:s=>this.priceRange=s,filtersData:this.filtersData,option:this.option})),this.withLoadMore&&(!this.searchQuery||this.filteredCount>this.initialItemCount)&&a("a",{key:"8ec08429d8fb31b338e6f9f9cf455b5ba2155cb8",class:"s-filters-widget-more",onClick:()=>this.showMore()},this.isShowMore?this.showLessLabel:this.showMoreLabel)))}get host(){return this}static get style(){return":host{display:block}"}},[260,"salla-filters-widget",{withLoadMore:[1028,"with-load-more"],filtersData:[16],option:[16],isOpen:[32],isShowMore:[32],showMoreLabel:[32],showLessLabel:[32],page:[32],searchQuery:[32],filteredCount:[32],setWidgetHeight:[64],reset:[64],showMore:[64],toggleWidget:[64]}]);function p(){"undefined"!=typeof customElements&&["salla-filters-widget","salla-button","salla-price-range","salla-rating-stars"].forEach((t=>{switch(t){case"salla-filters-widget":customElements.get(s(t))||customElements.define(s(t),f);break;case"salla-button":customElements.get(s(t))||r();break;case"salla-price-range":customElements.get(s(t))||n();break;case"salla-rating-stars":customElements.get(s(t))||o()}}))}p();export{c as F,f as S,p as d}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { H as Helper } from './Helper.js';
+import { d as defineCustomElement$3 } from './salla-button2.js';
+import { d as defineCustomElement$2 } from './salla-price-range2.js';
+import { d as defineCustomElement$1 } from './salla-rating-stars2.js';
+
+var FilterOptionTypes;
+(function (FilterOptionTypes) {
+    // CATEGORIES = "categories",
+    // BRANDs = "brands",
+    // RATING = "rating",
+    // PRICE = "price",
+    // RADIO = "radio",
+    FilterOptionTypes["VALUES"] = "values";
+    FilterOptionTypes["VARIANTS"] = "variants";
+    FilterOptionTypes["MINIMUM"] = "minimum";
+    FilterOptionTypes["RANGE"] = "range";
+})(FilterOptionTypes || (FilterOptionTypes = {}));
+var FilterOptionInputType;
+(function (FilterOptionInputType) {
+    FilterOptionInputType["VALUES"] = "values";
+    FilterOptionInputType["VARIANT"] = "variants";
+    FilterOptionInputType["RANGE"] = "range";
+})(FilterOptionInputType || (FilterOptionInputType = {}));
+
+const sallaFiltersWidgetCss = ":host{display:block}";
+
+const SallaFiltersWidget = /*@__PURE__*/ proxyCustomElement(class SallaFiltersWidget extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.changed = createEvent(this, "changed", 7);
+        this.initialItemCount = 10; // Show 10 items initially
+        this.expandedItemCount = 15; // Show 15 items when expanded
+        this.calculatedInitialHeight = 0; // Calculated based on actual content
+        this.calculatedExpandedHeight = 0; // Calculated based on actual content
+        this.isOpen = true;
+        this.isShowMore = false;
+        this.showMoreLabel = "عرض المزيد";
+        this.showLessLabel = "عرض أقل";
+        this.page = salla.config.get('page');
+        this.searchQuery = '';
+        this.filteredCount = 0; // Track filtered results count
+    }
+    connectedCallback() {
+        // Show "Show More" button if there are more than 10 items
+        this.withLoadMore = this.option.key != 'price' && Array.isArray(this.option.values) && this.option.values.length > this.initialItemCount;
+        salla.onReady(() => {
+            this.page = salla.config.get('page');
+        });
+        salla.lang.onLoaded(() => {
+            this.showMoreLabel = salla.lang.getWithDefault('common.titles.more', this.showMoreLabel);
+            this.showLessLabel = salla.lang.getWithDefault('common.elements.show_less', this.showLessLabel);
+        });
+    }
+    componentDidLoad() {
+        // Use fixed height per item for predictable calculations
+        // Each item is approximately 20px, so we calculate based on item count
+        const itemHeight = 20; // Fixed height per item
+        const paddingPerItem = 15; // Additional padding per item for margins/spacing
+        const allItems = this.widgetValues.querySelectorAll('.s-filters-label');
+        if (allItems.length > 0) {
+            const itemsToMeasure = Math.min(this.initialItemCount, allItems.length);
+            // Calculate initial height: (items × height) + (items × padding)
+            this.calculatedInitialHeight = this.initialItemCount * (itemHeight + paddingPerItem);
+            // Calculate expanded height based on first 15 items
+            if (allItems.length > this.initialItemCount) {
+                this.calculatedExpandedHeight = this.expandedItemCount * (itemHeight + paddingPerItem);
+            }
+            else {
+                this.calculatedExpandedHeight = itemsToMeasure * (itemHeight + paddingPerItem);
+            }
+        }
+        this.widgetValues.scrollHeight < this.calculatedInitialHeight && (this.withLoadMore = false);
+        (this.withLoadMore && this.widgetValues) && (this.widgetValues.style.maxHeight = `${this.calculatedInitialHeight}px`);
+        this.widgetContent.style.height = `${this.widgetContent.scrollHeight}px`;
+    }
+    /**
+   * Asynchronously sets the height of a widget element to its current height, allowing for smooth transitions.
+   * This function is often used in scenarios where the widget's content changes dynamically, and animating
+   * the height adjustment is desired for a smoother user experience.
+   *
+   * @param {number} [delay=250] - Optional. The delay (in milliseconds) before updating the widget height.
+   *                               Defaults to 250 milliseconds.
+   *
+   * @returns {Promise<void>} - A Promise that resolves once the widget height is set after the specified delay.
+   *
+   * @example
+   * // Set widget height with the default delay (250 milliseconds)
+   * await setWidgetHeight();
+   *
+   * // Set widget height with a custom delay (e.g., 500 milliseconds)
+   * await setWidgetHeight(500);
+   */
+    async setWidgetHeight(delay = 250) {
+        this.widgetContent.removeAttribute('style');
+        setTimeout(() => {
+            let currentWidgetHeight = this.widgetContent.scrollHeight;
+            this.widgetContent.style.height = currentWidgetHeight + 'px';
+        }, delay);
+    }
+    /**
+     * Reset selected filter options.
+     */
+    async reset() {
+        if (this.option.type === FilterOptionTypes.RANGE) {
+            this.priceRange.reset();
+        }
+        Array.from(this.host.querySelectorAll('input')).forEach(input => input.checked = false);
+    }
+    /**
+     * Action to show more or less filter options.
+     */
+    async showMore() {
+        this.isShowMore = !this.isShowMore;
+        this.widgetContent.style.height = 'auto';
+        // Reset scroll position to top when collapsing to prevent content cutting
+        if (!this.isShowMore) {
+            this.widgetValues.scrollTop = 0;
+        }
+        // Use calculated heights based on actual content
+        const maxHeight = this.isShowMore ? this.calculatedExpandedHeight : this.calculatedInitialHeight;
+        // Calculate actual item count
+        const actualCount = this.searchQuery ? this.filteredCount : (Array.isArray(this.option.values) ? this.option.values.length : 0);
+        // When showing more: expand to 15 items height with scrollbar for items beyond 15
+        // When showing less: collapse to 10 items height
+        this.widgetValues.style.maxHeight = `${maxHeight}px`;
+        this.widgetValues.style.overflowY = this.isShowMore && actualCount > this.expandedItemCount ? 'auto' : 'hidden';
+        setTimeout(() => {
+            this.widgetContent.style.height = `${this.widgetContent.scrollHeight}px`;
+        }, 400); // get height after time of collapse animation (duration-300)
+    }
+    /**
+     * Action to toggle widget open or closed (expand/ collapse).
+     */
+    async toggleWidget() {
+        this.isOpen = !this.isOpen;
+        Helper.toggleElementClassIf(this.widgetContent, 's-filters-widget-opened', 's-filters-widget-closed', () => this.isOpen);
+    }
+    renderFilterOption(option) {
+        if (![FilterOptionTypes.VALUES, FilterOptionTypes.MINIMUM, FilterOptionTypes.VARIANTS].includes(option.type)) {
+            return '';
+        }
+        //@ts-ignore
+        const filteredValues = option.values.filter((filterOption) => {
+            if (!this.searchQuery)
+                return true;
+            const label = typeof filterOption === 'number'
+                ? String(filterOption)
+                : (filterOption?.value || filterOption?.key || '');
+            return String(label).toLowerCase().includes(this.searchQuery.toLowerCase());
+        });
+        // Update filtered count for show more button logic
+        this.filteredCount = filteredValues.length;
+        // Show empty state if no results
+        if (filteredValues.length === 0) {
+            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 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: "radio", checked: this.isSelectedOption(option, value), class: `s-filters-radio`, onChange: event => this.changed.emit({ event, option, value }) }), this.getOptionLabel(option, filterOption));
+        });
+    }
+    isSelectedOption(option, value) {
+        if (option.type === FilterOptionTypes.MINIMUM) {
+            return this.filtersData[option.key] == value;
+        }
+        if (option.type === FilterOptionTypes.VARIANTS) {
+            return this.filtersData[option.type] && this.filtersData[option.type][Object.keys(this.filtersData[option.type])[0]] == value;
+        }
+        if (option.type === FilterOptionTypes.RANGE) {
+            return this.filtersData[option.key] && this.filtersData[option.key].min == value.min && this.filtersData[option.key].max == value.max;
+        }
+        if (option.type === FilterOptionTypes.VALUES) {
+            return this.filtersData[option.key] && Number(this.filtersData[option.key]) == Number(value);
+        }
+        return false;
+    }
+    getOptionLabel(option, filterOption) {
+        if (option.key == 'rating') {
+            //in amazon has stars & up, should we add it, to avoid those people who will come to say I selected 4 why I see 5 sars products
+            return h("salla-rating-stars", { size: "small", value: filterOption });
+        }
+        let label = filterOption.value || 'null';
+        //label+=filterOption.count ? ` (${salla.helpers.number(filterOption.count)})` : '';
+        return h("span", { class: "s-filters-option-name" }, label);
+    }
+    render() {
+        return (h(Host, { key: 'e93cfb9f1f6daeb8a2121ccb36a3cf135a55e902', class: "s-filters-widget-container" }, h("h3", { key: 'd5ef45d78e0119e2ac997ded417e310c0a797c34', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: 'fe4df56fad0d290395d78588456fb7d00a20ed43' }, this.option.label), h("span", { key: 'c961f86b5e06437dfdd145e164da5fe326500032', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: '7cf1ed1b562bf16acc481f682965567d8bc1813c', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: '275427371f48fdfc8ef8b80b9d3e11fa247f7d7a', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: '473c082ed9f7415beba445d36a121027eaadbbe1', 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: 'e45654731cdd801345acc5b3311d9ddab3020035', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: '5ae673157a4b579a000901b04db8e375a52565e7' }), 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: '8ec08429d8fb31b338e6f9f9cf455b5ba2155cb8', class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
+    }
+    get host() { return this; }
+    static get style() { return sallaFiltersWidgetCss; }
+}, [4, "salla-filters-widget", {
+        "withLoadMore": [1028, "with-load-more"],
+        "filtersData": [16, "filters-data"],
+        "option": [16],
+        "isOpen": [32],
+        "isShowMore": [32],
+        "showMoreLabel": [32],
+        "showLessLabel": [32],
+        "page": [32],
+        "searchQuery": [32],
+        "filteredCount": [32],
+        "setWidgetHeight": [64],
+        "reset": [64],
+        "showMore": [64],
+        "toggleWidget": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-filters-widget", "salla-button", "salla-price-range", "salla-rating-stars"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-filters-widget":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaFiltersWidget);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-price-range":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "salla-rating-stars":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { FilterOptionTypes as F, SallaFiltersWidget as S, defineCustomElement as d };

package/dist/components/salla-filters.js

@@ -1,4 +1,256 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as t,proxyCustomElement as s,HTMLElement as e,createEvent as i,h as a,Host as l}from"@stencil/core/internal/client";import{d as r,F as n}from"./salla-filters-widget2.js";import{H as o}from"./Helper.js";import{d as c}from"./salla-button2.js";import{d as h}from"./salla-price-range2.js";import{d as f}from"./salla-rating-stars2.js";const d=s(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.changed=i(this,"changed",7),this.isReady=!1,this.filtersData={},salla.event.on("filters::hidden",(()=>this.host.style.display="none")),salla.lang.onLoaded((()=>{this.apply=salla.lang.get("pages.checkout.apply"),this.reset=salla.lang.get("pages.categories.filters_reset")})),salla.event.on("filters::fetched",(({filters:t})=>{this.host.style.display="";let s={};this.filters=t.map((t=>{if(t.label={category_id:salla.lang.get("common.titles.categories"),brand_id:salla.lang.get("common.titles.brands"),rating:salla.lang.get("pages.categories.filter_rating"),price:salla.lang.get("pages.categories.filter_price")}[t.key]||t.label,"rating"==t.key){t.type=n.VALUES;let{max:s,min:e}=t.values;t.values=[5,4,3,2,1].filter((t=>t>=e||t<=s))}this.filtersData.variants&&t.type==n.VARIANTS&&(s.variants=this.filtersData.variants),this.filtersData[t.key]&&t.type!==n.VARIANTS&&(s[t.key]=this.filtersData[t.key]);let e=new URLSearchParams(window.location.search),i=!1;for(let t of e.keys())if(t.includes("filters")){i=!0;break}if("product.index"==salla.config.get("page.slug")&&0==Object.keys(s).length&&!i){let t=window.location.href,e=salla.config.get("page.id"),i=-1!==t.indexOf("?")?"&":"?",a=t+i+"filters[category_id]="+e;s.category_id=e,window.history.pushState({path:a},"",a)}return t})),this.filtersData=s,this.host.childNodes.forEach((async t=>t.setWidgetHeight&&await t.setWidgetHeight()))}))}async componentWillLoad(){try{const t=new URLSearchParams(window.location.search);this.filtersData=await o.extractFiltersFromUrl(t)}catch(t){console.warn("failed to get filters from URL",t.message)}}async getFilters(){return this.filtersData}async applyFilters(){if(!this.isReady)return;let t=Object.keys(this.filtersData).length>0;setTimeout((()=>{if(t){let t=new URL(window.location.href);for(const[s]of t.searchParams.entries())s.startsWith("filters")&&t.searchParams.delete(s);let s=this.encodeFilters(this.filtersData),e=t.search.split("&").filter((t=>!t.includes("filters"))).join("&");t.search=e?t.search.split("&filters")[0]+"&"+s:"?"+s,window.history.pushState({},"",t.href)}else{let t=new URL(window.location.href);t.searchParams?.delete("filters"),window.history.pushState({},"",""+t)}salla.event.emit("salla-filters::changed",this.filtersData),this.changed.emit(this.filtersData)}),300)}encodeFilters(t,s="filters"){const e=[];for(const i in t)if(Object.prototype.hasOwnProperty.call(t,i)){const a=t[i],l=s?`${s}[${i}]`:i;if(Array.isArray(a))for(let t=0;t<a.length;t++)e.push(`${l}[${t}]=${a[t]}`);else e.push("object"==typeof a&&null!==a?this.encodeFilters(a,l):`${l}=${a}`)}return e.join("&")}async resetFilters(){return this.removeFiltersQueryParams(),this.filtersData={},this.host.childNodes.forEach((t=>t.reset&&t.reset())),salla.event.emit("salla-filters::reset"),this.applyFilters()}removeFiltersQueryParams(){const t=new URLSearchParams(window.location.search),s=Array.from(t.keys()).filter((t=>!t.startsWith("filters["))).map((s=>`${encodeURIComponent(s)}=${encodeURIComponent(t.get(s))}`)).join("&"),e=s?`${window.location.pathname}?${s}`:window.location.pathname;window.history.pushState({},"",e)}handleOptionChange(t,s,e){s.type===n.RANGE&&(this.filtersData[s.key]=e);let i=t.target.checked;s.type===n.VARIANTS?(this.filtersData.variants=this.filtersData.variants||{},i&&(this.filtersData.variants[s.key]=e),i||delete this.filtersData.variants[s.key]):"radio"==t.target.type?(i&&(this.filtersData[s.key]=e),i||delete this.filtersData[s.key]):"checkbox"==t.target.type&&(this.filtersData[s.key]=this.filtersData[s.key]||[],i&&this.filtersData[s.key].push(e),this.filtersData[s.key]=this.filtersData[s.key].filter((t=>t!=e))),this.applyFilters()}render(){return a(l,{key:"f3c454fc20472dca6fe646c9121028a2c045808f"},this.filters?.map((t=>a("salla-filters-widget",{option:t,filtersData:this.filtersData,onChanged:({detail:{event:t,option:s,value:e}})=>{this.handleOptionChange(t,s,e)}}))),this.filters?.length?a("div",{class:"s-filters-footer"},a("salla-button",{color:"gray",fill:"outline",onClick:()=>this.resetFilters()},this.reset)):"")}componentDidLoad(){this.isReady=!0}get host(){return this}static get style(){return":host{display:block}.s-rating-stars-small{line-height:12px}.s-filters-radio{background-image:none !important}"}},[0,"salla-filters",{filters:[1040],isSidebarOpen:[32],filtersData:[32],apply:[32],reset:[32],getFilters:[64],applyFilters:[64],resetFilters:[64]}]);function m(){"undefined"!=typeof customElements&&["salla-filters","salla-button","salla-filters-widget","salla-price-range","salla-rating-stars"].forEach((s=>{switch(s){case"salla-filters":customElements.get(t(s))||customElements.define(t(s),d);break;case"salla-button":customElements.get(t(s))||c();break;case"salla-filters-widget":customElements.get(t(s))||r();break;case"salla-price-range":customElements.get(t(s))||h();break;case"salla-rating-stars":customElements.get(t(s))||f()}}))}m();const p=d,g=m;export{p as SallaFilters,g as defineCustomElement}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4, F as FilterOptionTypes } from './salla-filters-widget2.js';
+import { H as Helper } from './Helper.js';
+import { d as defineCustomElement$5 } from './salla-button2.js';
+import { d as defineCustomElement$3 } from './salla-price-range2.js';
+import { d as defineCustomElement$2 } from './salla-rating-stars2.js';
+
+const sallaFiltersCss = ":host{display:block}.s-rating-stars-small{line-height:12px}.s-filters-radio{background-image:none !important}";
+
+const SallaFilters$1 = /*@__PURE__*/ proxyCustomElement(class SallaFilters extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.changed = createEvent(this, "changed", 7);
+        this.isReady = false; //to avoid triggering the changed event
+        this.filtersData = {};
+        salla.event.on('filters::hidden', () => this.host.style.display = 'none');
+        salla.lang.onLoaded(() => {
+            this.apply = salla.lang.get('pages.checkout.apply');
+            this.reset = salla.lang.get('pages.categories.filters_reset');
+        });
+        salla.event.on('filters::fetched', ({ filters }) => {
+            this.host.style.display = '';
+            let freshFilterData = {};
+            this.filters = filters
+                .map((filter) => {
+                filter.label = {
+                    category_id: salla.lang.get('common.titles.categories'),
+                    brand_id: salla.lang.get('common.titles.brands'),
+                    rating: salla.lang.get('pages.categories.filter_rating'),
+                    price: salla.lang.get('pages.categories.filter_price'),
+                }[filter.key] || filter.label;
+                // filter.type = FilterOptionTypes.VALUES;
+                if (filter.key == 'rating') {
+                    filter.type = FilterOptionTypes.VALUES;
+                    //@ts-ignore
+                    let { max, min } = filter.values;
+                    //@ts-ignore
+                    filter.values = [5, 4, 3, 2, 1].filter(stars => stars >= min || stars <= max);
+                }
+                if (this.filtersData.variants && filter.type == FilterOptionTypes.VARIANTS) {
+                    freshFilterData.variants = this.filtersData.variants;
+                }
+                if (this.filtersData[filter.key] && filter.type !== FilterOptionTypes.VARIANTS) {
+                    freshFilterData[filter.key] = this.filtersData[filter.key];
+                }
+                let searchParams = new URLSearchParams(window.location.search);
+                let hasFilters = false;
+                for (let key of searchParams.keys()) {
+                    if (key.includes('filters')) {
+                        hasFilters = true;
+                        break; // No need to continue checking once a match is found
+                    }
+                }
+                if (salla.config.get('page.slug') == "product.index" && Object.keys(freshFilterData).length == 0 && !hasFilters) {
+                    // Append the current category to the url if there are no pre-selected filters
+                    let currentUrl = window.location.href;
+                    let filterValue = salla.config.get('page.id');
+                    let separator = currentUrl.indexOf('?') !== -1 ? '&' : '?';
+                    let newUrl = currentUrl + separator + 'filters[category_id]=' + filterValue;
+                    freshFilterData.category_id = filterValue;
+                    window.history.pushState({ path: newUrl }, '', newUrl);
+                }
+                return filter;
+            });
+            this.filtersData = freshFilterData;
+            this.host.childNodes.forEach(async (widget) => widget.setWidgetHeight && await widget.setWidgetHeight());
+        });
+    }
+    async componentWillLoad() {
+        try {
+            const searchParams = new URLSearchParams(window.location.search);
+            this.filtersData = await Helper.extractFiltersFromUrl(searchParams);
+        }
+        catch (e) {
+            console.warn('failed to get filters from URL', e.message);
+        }
+    }
+    /**
+     * Method to get filter data.
+     */
+    async getFilters() {
+        return this.filtersData;
+    }
+    /**
+     * Apply filter action.
+     */
+    async applyFilters() {
+        if (!this.isReady) {
+            return;
+        }
+        let hasFilters = Object.keys(this.filtersData).length > 0;
+        setTimeout(() => {
+            if (hasFilters) {
+                let url = new URL(window.location.href);
+                for (const [key] of url.searchParams.entries()) {
+                    if (key.startsWith("filters")) {
+                        url.searchParams.delete(key);
+                    }
+                }
+                let encodedFilterValues = this.encodeFilters(this.filtersData);
+                let sanitizedFilterValues = url.search.split("&").filter(item => !item.includes('filters')).join("&");
+                if (sanitizedFilterValues) {
+                    url.search = url.search.split("&filters")[0] + "&" + encodedFilterValues;
+                }
+                else {
+                    url.search = `?${encodedFilterValues}`;
+                }
+                window.history.pushState({}, '', url.href);
+            }
+            else {
+                let url = new URL(window.location.href);
+                url.searchParams?.delete('filters');
+                window.history.pushState({}, '', url.toString());
+            }
+            salla.event.emit('salla-filters::changed', this.filtersData);
+            this.changed.emit(this.filtersData);
+        }, 300);
+    }
+    encodeFilters(filters, parentKey = 'filters') {
+        const encodedFilters = [];
+        for (const key in filters) {
+            if (Object.prototype.hasOwnProperty.call(filters, key)) {
+                const value = filters[key];
+                const fullKey = parentKey ? `${parentKey}[${key}]` : key;
+                if (Array.isArray(value)) {
+                    for (let i = 0; i < value.length; i++) {
+                        encodedFilters.push(`${fullKey}[${i}]=${value[i]}`);
+                    }
+                }
+                else if (typeof value === 'object' && value !== null) {
+                    encodedFilters.push(this.encodeFilters(value, fullKey));
+                }
+                else {
+                    // const encodedKey = encodeURIComponent(fullKey);
+                    // const encodedValue = encodeURIComponent(value);
+                    let result = `${fullKey}=${value}`;
+                    encodedFilters.push(result);
+                }
+            }
+        }
+        return encodedFilters.join('&');
+    }
+    ;
+    /**
+     * Reset selected filters.
+     */
+    async resetFilters() {
+        this.removeFiltersQueryParams();
+        this.filtersData = {};
+        this.host.childNodes.forEach((widget) => widget.reset && widget.reset());
+        salla.event.emit('salla-filters::reset');
+        return this.applyFilters();
+    }
+    removeFiltersQueryParams() {
+        const searchParams = new URLSearchParams(window.location.search);
+        const newUrl = Array.from(searchParams.keys())
+            .filter(key => !key.startsWith('filters['))
+            .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(searchParams.get(key))}`)
+            .join('&');
+        const finalUrl = newUrl ? `${window.location.pathname}?${newUrl}` : window.location.pathname;
+        window.history.pushState({}, '', finalUrl);
+    }
+    /**
+     * @param {{target:HTMLInputElement}} event
+     * @param option
+     * @param value
+     * @private
+     */
+    handleOptionChange(event, option, value) {
+        if (option.type === FilterOptionTypes.RANGE) {
+            this.filtersData[option.key] = value;
+        }
+        let isChecked = event.target.checked;
+        if (option.type === FilterOptionTypes.VARIANTS) {
+            this.filtersData.variants = this.filtersData.variants || {};
+            isChecked && (this.filtersData.variants[option.key] = value);
+            isChecked || (delete this.filtersData.variants[option.key]);
+        }
+        else if (event.target.type == "radio") {
+            isChecked && (this.filtersData[option.key] = value);
+            isChecked || (delete this.filtersData[option.key]);
+        }
+        //it's checkbox
+        // add if condition to avoid error when the filter is not existed in the filtersData
+        else if (event.target.type == "checkbox") {
+            this.filtersData[option.key] = this.filtersData[option.key] || [];
+            if (isChecked) {
+                this.filtersData[option.key].push(value);
+            }
+            this.filtersData[option.key] = this.filtersData[option.key].filter(val => val != value);
+        }
+        this.applyFilters();
+    }
+    render() {
+        return h(Host, { key: 'f3c454fc20472dca6fe646c9121028a2c045808f' }, this.filters?.map(option => h("salla-filters-widget", { option: option, filtersData: this.filtersData, onChanged: ({ detail: { event, option, value } }) => {
+                this.handleOptionChange(event, option, value);
+            } })), this.filters?.length ? h("div", { class: "s-filters-footer" }, h("salla-button", { color: 'gray', fill: 'outline', onClick: () => this.resetFilters() }, this.reset)) : '');
+    }
+    componentDidLoad() {
+        this.isReady = true;
+    }
+    get host() { return this; }
+    static get style() { return sallaFiltersCss; }
+}, [0, "salla-filters", {
+        "filters": [1040],
+        "isSidebarOpen": [32],
+        "filtersData": [32],
+        "apply": [32],
+        "reset": [32],
+        "getFilters": [64],
+        "applyFilters": [64],
+        "resetFilters": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-filters", "salla-button", "salla-filters-widget", "salla-price-range", "salla-rating-stars"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-filters":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaFilters$1);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-filters-widget":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-price-range":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-rating-stars":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaFilters = SallaFilters$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaFilters, defineCustomElement };

package/dist/components/salla-fulfillment-methods.js

@@ -1,4 +1,64 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as l,HTMLElement as t,h as e,Host as i}from"@stencil/core/internal/client";const o=l(class extends t{constructor(s){super(),!1!==s&&this.__registerHost(),this.methods=[],this.shouldRender=!1}async componentDidLoad(){await Salla.onReady(),await Salla.lang.onLoaded(),Salla.config.get("store.support_pickup")&&(this.shouldRender=!0,this.setLabels())}setLabels(){this.methods=[{id:"delivery",title:Salla.lang.getWithDefault("pages.products.promise_delivery_title","متاح للتوصيل"),subtitle:Salla.lang.getWithDefault("pages.products.promise_delivery_subtitle","طلبك يوصلك لباب البيت بسهولة."),iconClass:"sicon-location"},{id:"pickup",title:Salla.lang.getWithDefault("pages.products.promise_pickup_title","متاح للاستلام"),subtitle:Salla.lang.getWithDefault("pages.products.promise_pickup_subtitle","استلام فوري من أقرب فرع."),iconClass:"sicon-store"}]}render(){return this.shouldRender?e(i,{class:"s-fulfillment-methods"},e("div",{class:"s-fulfillment-methods-list"},this.methods.map((s=>e("div",{key:s.id,class:"s-fulfillment-methods-card"},e("div",{class:"s-fulfillment-methods-content"},e("div",{class:"s-fulfillment-methods-icon-wrap"},e("i",{class:s.iconClass+" s-fulfillment-methods-icon"})),e("div",{class:"s-fulfillment-methods-text"},e("span",{class:"s-fulfillment-methods-title"},s.title),e("span",{class:"s-fulfillment-methods-subtitle"},s.subtitle)))))))):null}},[0,"salla-fulfillment-methods",{methods:[32],shouldRender:[32]}]);function a(){"undefined"!=typeof customElements&&["salla-fulfillment-methods"].forEach((l=>{"salla-fulfillment-methods"===l&&(customElements.get(s(l))||customElements.define(s(l),o))}))}a();const n=o,c=a;export{n as SallaFulfillmentMethods,c as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const SallaFulfillmentMethods$1 = /*@__PURE__*/ proxyCustomElement(class SallaFulfillmentMethods extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.methods = [];
+        this.shouldRender = false;
+    }
+    async componentDidLoad() {
+        await Salla.onReady();
+        await Salla.lang.onLoaded();
+        if (!Salla.config.get('store.support_pickup'))
+            return;
+        this.shouldRender = true;
+        this.setLabels();
+    }
+    setLabels() {
+        this.methods = [
+            {
+                id: 'delivery',
+                title: Salla.lang.getWithDefault('pages.products.promise_delivery_title', 'متاح للتوصيل'),
+                subtitle: Salla.lang.getWithDefault('pages.products.promise_delivery_subtitle', 'طلبك يوصلك لباب البيت بسهولة.'),
+                iconClass: 'sicon-location',
+            },
+            {
+                id: 'pickup',
+                title: Salla.lang.getWithDefault('pages.products.promise_pickup_title', 'متاح للاستلام'),
+                subtitle: Salla.lang.getWithDefault('pages.products.promise_pickup_subtitle', 'استلام فوري من أقرب فرع.'),
+                iconClass: 'sicon-store',
+            },
+        ];
+    }
+    render() {
+        if (!this.shouldRender)
+            return null;
+        return (h(Host, { class: "s-fulfillment-methods" }, h("div", { class: "s-fulfillment-methods-list" }, this.methods.map((method) => (h("div", { key: method.id, class: "s-fulfillment-methods-card" }, h("div", { class: "s-fulfillment-methods-content" }, h("div", { class: "s-fulfillment-methods-icon-wrap" }, h("i", { class: `${method.iconClass} s-fulfillment-methods-icon` })), h("div", { class: "s-fulfillment-methods-text" }, h("span", { class: "s-fulfillment-methods-title" }, method.title), h("span", { class: "s-fulfillment-methods-subtitle" }, method.subtitle)))))))));
+    }
+}, [0, "salla-fulfillment-methods", {
+        "methods": [32],
+        "shouldRender": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-fulfillment-methods"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-fulfillment-methods":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaFulfillmentMethods$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaFulfillmentMethods = SallaFulfillmentMethods$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaFulfillmentMethods, defineCustomElement };