@salla.sa/twilight-components 2.14.549 → 2.14.551

package/dist/components/salla-applied-filters.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaAppliedFilters extends Components.SallaAppliedFilters, HTMLElement {}
+export const SallaAppliedFilters: {
+    prototype: SallaAppliedFilters;
+    new (): SallaAppliedFilters;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,195 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { H as Helper, F as FilterOptionTypes } from './Helper.js';
+
+const sallaAppliedFiltersCss = "/*!twlt*/:host{display:block}.s-applied-filters-tags{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;margin-bottom:1rem}.s-applied-filters-tag{display:inline-flex;align-items:center;gap:0.4rem;border-radius:999px;border:1px solid #e8e8e8;background:rgba(255, 255, 255, 0.3);color:var(--main-text-color);font-size:0.85rem;line-height:1;padding:0.4rem 0.65rem}.s-applied-filters-tag-remove{display:inline-flex;align-items:center;justify-content:center;border:0;padding:0;background:transparent;color:inherit;font-size:0.75rem;cursor:pointer}.s-applied-filters-clear-tag{display:inline-flex;align-items:center;gap:0.4rem;border-radius:999px;border:1px solid var(--color-danger, #dc3545);background:transparent;color:var(--color-danger, #dc3545);font-size:0.85rem;line-height:1;padding:0.4rem 0.65rem;cursor:pointer}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.s-applied-filters-wrapper{display:block}.s-applied-filters-tags{margin-bottom:1rem;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0.5rem}.s-applied-filters-tag{display:inline-flex;align-items:center;gap:0.375rem;border-radius:9999px;border-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));background-color:rgb(255 255 255 / 0.3);padding-top:0.375rem;padding-bottom:0.375rem;padding-left:0.625rem;padding-right:0.625rem;font-size:0.875rem;line-height:1.25rem;color:var(--main-text-color)}.s-applied-filters-tag-name{color:inherit}.s-applied-filters-tag-remove{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;border-width:0px;background-color:transparent;padding:0px;font-size:0.75rem;line-height:1rem;color:inherit}.s-applied-filters-clear-tag{display:inline-flex;cursor:pointer;align-items:center;gap:0.375rem;border-radius:9999px;border-width:1px;--tw-border-opacity:1;border-color:rgb(248 113 113 / var(--tw-border-opacity, 1));background-color:transparent;padding-top:0.375rem;padding-bottom:0.375rem;padding-left:0.625rem;padding-right:0.625rem;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}";
+
+const SallaAppliedFilters$1 = /*@__PURE__*/ proxyCustomElement(class SallaAppliedFilters extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.filters = [];
+        this.filtersData = {};
+        this.clearAllLabel = '';
+        this.removeLabel = '';
+        this.translationDefaults = {
+            'pages.categories.clear_all_filters': { ar: 'إزالة التصفية', en: 'Clear All' },
+            'common.elements.delete': { ar: 'حذف', en: 'Delete' },
+        };
+    }
+    async componentWillLoad() {
+        salla.event.on('filters::fetched', ({ filters }) => {
+            this.filters = Helper.resolveFilterLabels(filters);
+            this.syncFiltersDataFromFiltersElement();
+        });
+        salla.event.on('filters::hidden', () => {
+            this.filters = [];
+        });
+        // The current selections, kept in sync with salla-filters' own state.
+        salla.event.on('salla-filters::changed', (filtersData) => {
+            this.filtersData = { ...filtersData };
+        });
+        salla.event.on('salla-filters::reset', () => {
+            this.filtersData = {};
+        });
+        salla.lang.onLoaded(() => {
+            this.registerTranslationDefaults();
+            this.loadTranslations();
+        });
+        this.getInitialFiltersData();
+    }
+    getInitialFiltersData() {
+        const searchParams = new URLSearchParams(window.location.search);
+        this.filtersData = Helper.extractFiltersFromUrl(searchParams);
+    }
+    /**
+     * salla-filters reconciles its own filtersData synchronously in its `filters::fetched`
+     * handler, dropping any key whose filter group no longer exists in the fresh backend
+     * response (e.g. a disabled category). Pull that reconciled state instead of keeping our
+     * own copy sourced from the raw URL, which would otherwise go stale forever — it's only
+     * ever updated by user-driven `salla-filters::changed`/`reset` events, never by a fetch.
+     * Deferred a tick so it runs after salla-filters' own (synchronous) listener, regardless
+     * of which component happened to register its `filters::fetched` listener first.
+     */
+    syncFiltersDataFromFiltersElement() {
+        setTimeout(async () => {
+            const filtersData = await this.getFiltersElement()?.getFilters();
+            if (filtersData) {
+                this.filtersData = { ...filtersData };
+            }
+        });
+    }
+    /**
+     * Register bilingual (ar/en) defaults for our keys, without overriding any
+     * translation that already exists in the store/central translations.
+     */
+    registerTranslationDefaults() {
+        const missing = Object.entries(this.translationDefaults).reduce((acc, [key, value]) => {
+            // `get` returns the key itself when no translation is found.
+            if (salla.lang.get(key) === key) {
+                acc[key] = value;
+            }
+            return acc;
+        }, {});
+        if (Object.keys(missing).length) {
+            salla.lang.addBulk(missing);
+        }
+    }
+    loadTranslations() {
+        this.clearAllLabel = salla.lang.get('pages.categories.clear_all_filters');
+        this.removeLabel = salla.lang.get('common.elements.delete');
+    }
+    /**
+     * Flatten the selected filtersData into displayable chips, resolving the
+     * human label for each group + option from `this.filters`. Selections that
+     * can't be resolved to a known option (e.g. the auto-added base category)
+     * are skipped. Ported from salla-filters, which no longer renders this UI.
+     */
+    getAppliedFilters() {
+        const chips = [];
+        const data = this.filtersData || {};
+        for (const key of Object.keys(data)) {
+            if (key === 'variants') {
+                const variantFilter = this.filters?.find(f => f.type === FilterOptionTypes.VARIANTS);
+                for (const variantKey of Object.keys(data.variants || {})) {
+                    const value = data.variants[variantKey];
+                    const opt = variantFilter?.values?.find(o => (o.key || o.value) == value);
+                    if (!opt)
+                        continue;
+                    chips.push({
+                        key,
+                        variantKey,
+                        value,
+                        type: FilterOptionTypes.VARIANTS,
+                        groupLabel: variantFilter?.label,
+                        optionLabel: opt.value,
+                    });
+                }
+                continue;
+            }
+            const group = this.filters?.find(f => f.key === key);
+            if (!group)
+                continue;
+            const raw = data[key];
+            // RANGE (e.g. price) is stored as a { min, max } object
+            if (group.type === FilterOptionTypes.RANGE ||
+                (raw && typeof raw === 'object' && !Array.isArray(raw))) {
+                const min = raw.min;
+                const max = raw.max;
+                chips.push({
+                    key,
+                    value: raw,
+                    type: FilterOptionTypes.RANGE,
+                    groupLabel: group.label,
+                    optionLabel: `${min} - ${max}`,
+                });
+                continue;
+            }
+            // the auto-appended base category (see filters::fetched) is page scoping, not a user
+            // selection — skip it. It's stored as a scalar; user selections are always arrays.
+            if (key === 'category_id' &&
+                !Array.isArray(raw) &&
+                salla.config.get('page.slug') == 'product.index' &&
+                raw == salla.config.get('page.id')) {
+                continue;
+            }
+            const values = Array.isArray(raw) ? raw : [raw];
+            for (const value of values) {
+                // rating values are bare numbers; everything else maps key -> value label
+                const opt = group.values?.find(o => (typeof o === 'number' ? o : o.key || o.value) == value);
+                const optionLabel = group.key === 'rating'
+                    ? `${value}`
+                    : opt && typeof opt !== 'number'
+                        ? opt.value
+                        : undefined;
+                if (optionLabel == null)
+                    continue;
+                chips.push({ key, value, type: group.type, groupLabel: group.label, optionLabel });
+            }
+        }
+        return chips;
+    }
+    getFiltersElement() {
+        return document.querySelector('salla-filters');
+    }
+    removeFilter(chip) {
+        this.getFiltersElement()?.removeFilter(chip);
+    }
+    clearAll() {
+        this.getFiltersElement()?.resetFilters();
+    }
+    render() {
+        const chips = this.getAppliedFilters();
+        if (!chips.length) {
+            return null;
+        }
+        return (h(Host, { class: "s-applied-filters-wrapper" }, h("div", { class: "s-applied-filters-tags" }, chips.map(chip => (h("div", { class: "s-applied-filters-tag" }, h("span", { class: "s-applied-filters-tag-name" }, chip.groupLabel, ": ", chip.optionLabel), h("button", { type: "button", class: "s-applied-filters-tag-remove", "aria-label": `${this.removeLabel} ${chip.groupLabel}: ${chip.optionLabel}`, onClick: () => this.removeFilter(chip) }, h("i", { class: "sicon-cancel", "aria-hidden": "true" }))))), h("button", { type: "button", class: "s-applied-filters-clear-tag", onClick: () => this.clearAll() }, h("span", null, this.clearAllLabel)))));
+    }
+    static get style() { return sallaAppliedFiltersCss; }
+}, [0, "salla-applied-filters", {
+        "filters": [32],
+        "filtersData": [32],
+        "clearAllLabel": [32],
+        "removeLabel": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-applied-filters"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-applied-filters":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaAppliedFilters$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaAppliedFilters = SallaAppliedFilters$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaAppliedFilters, defineCustomElement };

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

@@ -2,30 +2,11 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { H as Helper } from './Helper.js';
+import { F as FilterOptionTypes, 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 = "/*!twlt*/:host{display:block}.collapse{visibility:collapse}.fixed{position:fixed}.hidden{display:none}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.duration-300{transition-duration:300ms}.s-filters-widget-container{display:block;overflow:hidden;border-radius:var(--s-radius, 0.25rem);--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-left:1rem;padding-right:1rem;padding-top:1.25rem;padding-bottom:0.5rem}@media (min-width: 768px){.s-filters-widget-container{margin-bottom:1.25rem;padding-bottom:1.25rem;padding-top:1.25rem}}.s-filters-widget-content{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-filters-widget-opened{visibility:visible;opacity:1}.s-filters-widget-closed{visibility:hidden;height:0px !important;padding:0px;opacity:0}.s-filters-widget-title{display:flex;cursor:pointer;align-items:center;justify-content:space-between;font-size:1rem;line-height:1.5rem;font-weight:700}.s-filters-widget-arrow{font-size:1.25rem;line-height:1.75rem;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-filters-widget-arrow svg{height:1.25rem;width:1.25rem}.s-filters-widget-active-arrow{--tw-rotate:90deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.s-filters-widget-values{overflow:hidden;padding-top:1rem;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-filters-widget-more{margin-top:0.5rem;display:block;cursor:pointer;font-size:0.875rem;line-height:1.25rem;color:var(--color-primary)}.s-filters-widget-plusminus{position:relative;height:0.75rem;width:0.75rem;--tw-rotate:90deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.s-filters-widget-plusminus::before{position:absolute;left:0px;top:50%;display:block;height:0.125rem;width:100%;--tw-bg-opacity:1;background-color:rgb(153 153 153 / var(--tw-bg-opacity, 1));transition-property:0.35s;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;--tw-content:'';content:var(--tw-content)}.s-filters-widget-plusminus::after{position:absolute;left:0px;top:50%;display:block;height:0.125rem;width:100%;--tw-bg-opacity:1;background-color:rgb(153 153 153 / var(--tw-bg-opacity, 1));transition-property:0.35s;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;--tw-content:'';content:var(--tw-content)}.s-filters-widget-plusminus-active:before{transform:translatey(-50%) rotate(-90deg);opacity:0}.s-filters-widget-plusminus-active:after{transform:translatey(-50%) rotate(0);background-color:var(--color-primary)}.s-filters-widget-plusminus:before{transform:translatey(-50%)}.s-filters-widget-plusminus:after{transform:translatey(-50%) rotate(90deg)}.s-filters-widget-search-input{width:100%;border-radius:0.375rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding:0.5rem}.s-filters-widget-search-input:focus{border-color:var(--color-primary);outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-color:var(--color-primary)}.s-filters-widget-empty-state{padding:0.5rem;text-align:center;font-size:1.125rem;line-height:1.75rem;--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}";
 
 const SallaFiltersWidget = /*@__PURE__*/ proxyCustomElement(class SallaFiltersWidget extends HTMLElement {
@@ -252,4 +233,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { FilterOptionTypes as F, SallaFiltersWidget as S, defineCustomElement as d };
+export { SallaFiltersWidget as S, defineCustomElement as d };

package/dist/components/salla-filters.js

@@ -2,13 +2,13 @@
  * 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 { H as Helper, F as FilterOptionTypes } from './Helper.js';
 import { d as defineCustomElement$5 } from './salla-button2.js';
+import { d as defineCustomElement$4 } from './salla-filters-widget2.js';
 import { d as defineCustomElement$3 } from './salla-price-range2.js';
 import { d as defineCustomElement$2 } from './salla-rating-stars2.js';
 
-const sallaFiltersCss = "/*!twlt*/:host{display:block}.s-rating-stars-small{line-height:12px}.s-filters-radio{background-image:none !important}.s-filters-applied-remove{pointer-events:auto !important;cursor:pointer}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.s-filters-checkbox{height:1.25rem;width:1.25rem;border-radius:6px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));color:var(--color-primary)}.s-filters-checkbox:focus{--tw-ring-color:transparent}.s-filters-radio{position:relative;height:1rem;width:1rem;--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-bg-opacity:1 !important;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;color:var(--color-primary)}.s-filters-radio:focus{--tw-ring-color:transparent}.s-filters-radio:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-right:0.75rem}.s-filters-radio:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-left:0.75rem}.s-filters-radio:checked{border-color:var(--color-primary)}.s-filters-radio:checked::after{position:absolute;left:0.125rem;top:0.125rem;display:block;height:0.625rem;width:0.625rem;border-radius:9999px;background-color:var(--color-primary);--tw-content:'';content:var(--tw-content)}.s-filters-radio:checked:hover{border-color:var(--color-primary)}.s-filters-radio:checked:focus{border-color:var(--color-primary)}.s-filters-label{position:relative;margin-bottom:0.75rem;display:flex;cursor:pointer;align-items:center;font-size:0.875rem;line-height:1.25rem;font-weight:500}.s-filters-label:last-child{margin-bottom:0px}.s-filters-option-name{margin-left:0.5rem;margin-right:0.5rem;--tw-text-opacity:1;color:rgb(129 127 127 / var(--tw-text-opacity, 1))}.s-filters-footer{margin-top:1rem;display:flex}.s-filters-footer salla-button{flex:1 1 0%}.s-filters-footer salla-button button{width:100%}.s-filters-applied-item{justify-content:space-between}.s-filters-applied-remove{cursor:pointer;border-width:0px;background-color:transparent;padding:0px;color:inherit}.s-filters-widget-container{display:block;overflow:hidden;border-radius:var(--s-radius, 0.25rem);--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-left:1rem;padding-right:1rem;padding-top:1.25rem;padding-bottom:0.5rem}@media (min-width: 768px){.s-filters-widget-container{margin-bottom:1.25rem;padding-bottom:1.25rem;padding-top:1.25rem}}.s-filters-widget-content{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-filters-widget-opened{visibility:visible;opacity:1}.s-filters-widget-closed{visibility:hidden;height:0px !important;padding:0px;opacity:0}.s-filters-widget-title{display:flex;cursor:pointer;align-items:center;justify-content:space-between;font-size:1rem;line-height:1.5rem;font-weight:700}.s-filters-widget-values{overflow:hidden;padding-top:1rem;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-filters-widget-plusminus{position:relative;height:0.75rem;width:0.75rem;--tw-rotate:90deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.s-filters-widget-plusminus::before{position:absolute;left:0px;top:50%;display:block;height:0.125rem;width:100%;--tw-bg-opacity:1;background-color:rgb(153 153 153 / var(--tw-bg-opacity, 1));transition-property:0.35s;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;--tw-content:'';content:var(--tw-content)}.s-filters-widget-plusminus::after{position:absolute;left:0px;top:50%;display:block;height:0.125rem;width:100%;--tw-bg-opacity:1;background-color:rgb(153 153 153 / var(--tw-bg-opacity, 1));transition-property:0.35s;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;--tw-content:'';content:var(--tw-content)}.s-filters-widget-plusminus-active:before{transform:translatey(-50%) rotate(-90deg);opacity:0}.s-filters-widget-plusminus-active:after{transform:translatey(-50%) rotate(0);background-color:var(--color-primary)}.s-filters-widget-plusminus:before{transform:translatey(-50%)}.s-filters-widget-plusminus:after{transform:translatey(-50%) rotate(90deg)}";
+const sallaFiltersCss = "/*!twlt*/:host{display:block}.s-rating-stars-small{line-height:12px}.s-filters-radio{background-image:none !important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.s-filters-checkbox{height:1.25rem;width:1.25rem;border-radius:6px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));color:var(--color-primary)}.s-filters-checkbox:focus{--tw-ring-color:transparent}.s-filters-radio{position:relative;height:1rem;width:1rem;--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-bg-opacity:1 !important;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;color:var(--color-primary)}.s-filters-radio:focus{--tw-ring-color:transparent}.s-filters-radio:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-right:0.75rem}.s-filters-radio:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-left:0.75rem}.s-filters-radio:checked{border-color:var(--color-primary)}.s-filters-radio:checked::after{position:absolute;left:0.125rem;top:0.125rem;display:block;height:0.625rem;width:0.625rem;border-radius:9999px;background-color:var(--color-primary);--tw-content:'';content:var(--tw-content)}.s-filters-radio:checked:hover{border-color:var(--color-primary)}.s-filters-radio:checked:focus{border-color:var(--color-primary)}.s-filters-label{position:relative;margin-bottom:0.75rem;display:flex;cursor:pointer;align-items:center;font-size:0.875rem;line-height:1.25rem;font-weight:500}.s-filters-label:last-child{margin-bottom:0px}.s-filters-option-name{margin-left:0.5rem;margin-right:0.5rem;--tw-text-opacity:1;color:rgb(129 127 127 / var(--tw-text-opacity, 1))}.s-filters-footer{margin-top:1rem;display:flex}.s-filters-footer salla-button{flex:1 1 0%}.s-filters-footer salla-button button{width:100%}";
 
 const SallaFilters$1 = /*@__PURE__*/ proxyCustomElement(class SallaFilters extends HTMLElement {
     constructor() {
@@ -18,32 +18,15 @@ const SallaFilters$1 = /*@__PURE__*/ proxyCustomElement(class SallaFilters exten
         this.isReady = false; //to avoid triggering the changed event
         this.isInitialFetch = true; //the base-category auto-append may only run on the first filters::fetched
         this.filtersData = {};
-        this.appliedOpen = true;
         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');
-            this.selectedTitle = salla.lang.getWithDefault('pages.categories.selected_filters', 'لقد اخترت');
         });
         salla.event.on('filters::fetched', ({ filters }) => {
             this.host.style.display = '';
             let freshFilterData = {};
-            this.filters = filters
+            this.filters = Helper.resolveFilterLabels(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;
                 }
@@ -206,57 +189,12 @@ const SallaFilters$1 = /*@__PURE__*/ proxyCustomElement(class SallaFilters exten
         this.filtersData = { ...this.filtersData }; // reassign so @State re-renders the applied chips
         this.applyFilters();
     }
-    /**
-     * Flatten the selected filtersData into displayable chips, resolving the
-     * human label for each group + option from `this.filters`. Selections that
-     * can't be resolved to a known option (e.g. the auto-added base category)
-     * are skipped.
-     */
-    getAppliedFilters() {
-        const chips = [];
-        const data = this.filtersData || {};
-        for (const key of Object.keys(data)) {
-            if (key === 'variants') {
-                const variantFilter = this.filters?.find(f => f.type === FilterOptionTypes.VARIANTS);
-                for (const variantKey of Object.keys(data.variants || {})) {
-                    const value = data.variants[variantKey];
-                    const opt = variantFilter?.values?.find(o => (o.key || o.value) == value);
-                    if (!opt)
-                        continue;
-                    chips.push({ key, variantKey, value, type: FilterOptionTypes.VARIANTS, groupLabel: variantFilter?.label, optionLabel: opt.value });
-                }
-                continue;
-            }
-            const group = this.filters?.find(f => f.key === key);
-            if (!group)
-                continue;
-            const raw = data[key];
-            // RANGE (e.g. price) is stored as a { min, max } object
-            if (group.type === FilterOptionTypes.RANGE || (raw && typeof raw === 'object' && !Array.isArray(raw))) {
-                chips.push({ key, value: raw, type: FilterOptionTypes.RANGE, groupLabel: group.label, optionLabel: `${raw.min} - ${raw.max}` });
-                continue;
-            }
-            // the auto-appended base category (see filters::fetched) is page scoping, not a user
-            // selection — skip it. It's stored as a scalar; user selections are always arrays.
-            if (key === 'category_id' && !Array.isArray(raw) && salla.config.get('page.slug') == 'product.index' && raw == salla.config.get('page.id')) {
-                continue;
-            }
-            const values = Array.isArray(raw) ? raw : [raw];
-            for (const value of values) {
-                // rating values are bare numbers; everything else maps key -> value label
-                const opt = group.values?.find(o => (typeof o === 'number' ? o : (o.key || o.value)) == value);
-                const optionLabel = group.key === 'rating' ? `${value}` : (opt && typeof opt !== 'number' ? opt.value : undefined);
-                if (optionLabel == null)
-                    continue;
-                chips.push({ key, value, type: group.type, groupLabel: group.label, optionLabel });
-            }
-        }
-        return chips;
-    }
     /**
      * Remove a single applied filter — the direct inverse of handleOptionChange.
+     * Public so salla-applied-filters (which owns the applied-chips UI) can
+     * drive removal on the live salla-filters element it reads chips from.
      */
-    removeFilter(chip) {
+    async removeFilter(chip) {
         if (chip.type === FilterOptionTypes.VARIANTS) {
             if (this.filtersData.variants) {
                 delete this.filtersData.variants[chip.variantKey];
@@ -282,9 +220,7 @@ const SallaFilters$1 = /*@__PURE__*/ proxyCustomElement(class SallaFilters exten
         this.applyFilters();
     }
     render() {
-        const appliedFilters = this.getAppliedFilters();
-        const removeText = salla.lang.getWithDefault('common.elements.delete', 'Remove');
-        return h(Host, { key: 'f0493d0e85ebb9e6612a1edc6cd7f45e7473017e' }, appliedFilters.length ? h("div", { class: "s-filters-applied s-filters-widget-container" }, h("h3", { class: "s-filters-widget-title", onClick: () => this.appliedOpen = !this.appliedOpen }, h("span", null, this.selectedTitle), h("span", { class: `s-filters-widget-plusminus ${this.appliedOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { class: `s-filters-widget-content ${this.appliedOpen ? 's-filters-widget-opened' : 's-filters-widget-closed'}` }, h("div", { class: "s-filters-widget-values" }, appliedFilters.map(chip => h("div", { class: "s-filters-label s-filters-applied-item" }, h("span", { class: "s-filters-option-name" }, chip.groupLabel, ": ", chip.optionLabel), h("button", { type: "button", class: "s-filters-applied-remove", "aria-label": `${removeText} ${chip.groupLabel}: ${chip.optionLabel}`, onClick: () => this.removeFilter(chip) }, h("i", { class: "sicon-cancel", "aria-hidden": "true" }))))), h("div", { class: "s-filters-footer" }, h("salla-button", { color: 'gray', fill: 'outline', onClick: () => this.resetFilters() }, this.reset)))) : '', this.filters?.map(option => h("salla-filters-widget", { option: option, filtersData: this.filtersData, onChanged: ({ detail: { event, option, value } }) => {
+        return h(Host, { key: '32ede23f7fb3d9c7fbcd136ad2773e3212c2f5b8' }, this.filters?.map(option => h("salla-filters-widget", { option: option, filtersData: this.filtersData, onChanged: ({ detail: { event, option, value } }) => {
                 this.handleOptionChange(event, option, value);
             } })));
     }
@@ -298,12 +234,10 @@ const SallaFilters$1 = /*@__PURE__*/ proxyCustomElement(class SallaFilters exten
         "isSidebarOpen": [32],
         "filtersData": [32],
         "apply": [32],
-        "reset": [32],
-        "selectedTitle": [32],
-        "appliedOpen": [32],
         "getFilters": [64],
         "applyFilters": [64],
-        "resetFilters": [64]
+        "resetFilters": [64],
+        "removeFilter": [64]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/esm/{Helper-CBmYxrzX.js → Helper-DsjZ6kte.js}

@@ -3,6 +3,25 @@
  */
 import { a as anime } from './anime.es-CgtvEd63.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 = {}));
+
 //TODO::reduce it to 10
 salla.event.setMaxListeners(100);
 class Helper {
@@ -139,6 +158,33 @@ class Helper {
         });
         return filters;
     }
+    /**
+     * Resolve i18n labels for the known filter groups (category/brand/rating/price)
+     * and normalize the `rating` group's `{min,max}` values into a plain 1-5 star
+     * array. Shared by salla-filters (the filter panel) and salla-applied-filters
+     * (the applied chips) so both agree on the same group labels. Returns shallow
+     * copies rather than mutating in place, since both components receive the
+     * same `filters::fetched` payload by reference.
+     */
+    resolveFilterLabels(filters) {
+        return filters.map((filter) => {
+            const resolved = { ...filter };
+            resolved.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'),
+            }[resolved.key] || resolved.label;
+            if (resolved.key == 'rating') {
+                resolved.type = FilterOptionTypes.VALUES;
+                //@ts-ignore
+                const { max, min } = filter.values;
+                //@ts-ignore
+                resolved.values = [5, 4, 3, 2, 1].filter(stars => stars >= min || stars <= max);
+            }
+            return resolved;
+        });
+    }
     async injectExtraFieldsToResponse(response) {
         if (!response || !this.includes)
             return response;
@@ -472,4 +518,4 @@ class Helper {
 }
 var Helper$1 = new Helper;
 
-export { Helper$1 as H };
+export { FilterOptionTypes as F, Helper$1 as H };

package/dist/esm/{filepond-CA4TWKuz.js → filepond-DuMUHI7t.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-C0qiFNJn.js';
+import { d as getDefaultExportFromCjs } from './index-BsIeN-bg.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-poster-C4_NyGjO.js → filepond-plugin-file-poster-Dv25V2UU.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-C0qiFNJn.js';
+import { d as getDefaultExportFromCjs } from './index-BsIeN-bg.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-size-DVV7mZ-K.js → filepond-plugin-file-validate-size-Dxl4yPm6.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-C0qiFNJn.js';
+import { d as getDefaultExportFromCjs } from './index-BsIeN-bg.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-type-DT1IX9KM.js → filepond-plugin-file-validate-type-C602myuq.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-C0qiFNJn.js';
+import { d as getDefaultExportFromCjs } from './index-BsIeN-bg.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-edit-RrqhOPfq.js → filepond-plugin-image-edit-DLd3ht_R.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-C0qiFNJn.js';
+import { d as getDefaultExportFromCjs } from './index-BsIeN-bg.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-exif-orientation-Dc9_Qlva.js → filepond-plugin-image-exif-orientation-BaQ5DNLu.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-C0qiFNJn.js';
+import { d as getDefaultExportFromCjs } from './index-BsIeN-bg.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-preview-Iu7ULzAy.js → filepond-plugin-image-preview-C-RFNs7l.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-C0qiFNJn.js';
+import { d as getDefaultExportFromCjs } from './index-BsIeN-bg.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {