@salla.sa/twilight-components 2.14.392 → 2.14.393

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

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

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

@@ -1,248 +1,4 @@
 /*!
  * Crafted with ❤ by Salla
  */
-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 };
+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}

package/dist/components/salla-filters.js

@@ -1,256 +1,4 @@
 /*!
  * Crafted with ❤ by Salla
  */
-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 };
+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}

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

@@ -1,64 +1,4 @@
 /*!
  * Crafted with ❤ by Salla
  */
-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 };
+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}