@salla.sa/twilight-components 2.14.548 → 2.14.550

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

@@ -0,0 +1,185 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h, Host } from "@stencil/core";
+import { FilterOptionTypes } from "../salla-filters/interfaces";
+import Helper from "../../Helpers/Helper";
+export class SallaAppliedFilters {
+    constructor() {
+        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 is() { return "salla-applied-filters"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-applied-filters.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-applied-filters.css"]
+        };
+    }
+    static get states() {
+        return {
+            "filters": {},
+            "filtersData": {},
+            "clearAllLabel": {},
+            "removeLabel": {}
+        };
+    }
+}

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

@@ -9,14 +9,6 @@
 .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);
 }
@@ -100,114 +92,3 @@
 .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);
-}

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

@@ -9,32 +9,15 @@ export class SallaFilters {
         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;
                 }
@@ -197,57 +180,12 @@ export class SallaFilters {
         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];
@@ -273,9 +211,7 @@ export class SallaFilters {
         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);
             } })));
     }
@@ -325,10 +261,7 @@ export class SallaFilters {
         return {
             "isSidebarOpen": {},
             "filtersData": {},
-            "apply": {},
-            "reset": {},
-            "selectedTitle": {},
-            "appliedOpen": {}
+            "apply": {}
         };
     }
     static get events() {
@@ -405,6 +338,27 @@ export class SallaFilters {
                     "text": "Reset selected filters.",
                     "tags": []
                 }
+            },
+            "removeFilter": {
+                "complexType": {
+                    "signature": "(chip: any) => Promise<void>",
+                    "parameters": [{
+                            "name": "chip",
+                            "type": "any",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Remove a single applied filter \u2014 the direct inverse of handleOptionChange.\nPublic so salla-applied-filters (which owns the applied-chips UI) can\ndrive removal on the live salla-filters element it reads chips from.",
+                    "tags": []
+                }
             }
         };
     }

package/dist/components/Helper.js

@@ -3,6 +3,25 @@
  */
 import { a as anime } from './anime.es.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 };