@tet/tet-components 1.3.157-testing → 1.4.0-staging

package/dist/collection/components/advanced/address/tet-address-offers-filters/tet-address-offers-filters.js

@@ -6,23 +6,6 @@ import { processTranslations, t } from "../../../../services/translations/index"
  */
 export class TetAddressOffersFilters {
     constructor() {
-        /** Render Clear Filter button if defined it should be included. */
-        this.renderClearFilterBtn = () => {
-            if (!this.clearFilterButton) {
-                return null;
-            }
-            if (addressOffersStore.availableFilters.length > 0) {
-                return (h("button", { class: { 'clear-button': true, [`theme-${this.theme}`]: true }, onClick: () => clearFilters() }, h("tet-icon", { name: "tc-reload", part: "icon-selected" }), t('components-address-offers-filters-clear-btn')));
-            }
-            return null;
-        };
-        /**
-         * Renders loader component
-         * @returns {FunctionalComponent}
-         */
-        this.renderLoader = () => {
-            return (h("div", { class: "loader" }, Array.from({ length: 4 }).map(() => (h("tet-placeholder", { height: "2rem", width: "8rem", class: "tag-placeholder", darkTheme: this.theme === 'dark' })))));
-        };
         this.language = 'lv';
         this.clearFilterButton = false;
         this.theme = 'light';
@@ -40,6 +23,23 @@ export class TetAddressOffersFilters {
     componentWillLoad() {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
+    /** Render Clear Filter button if defined it should be included. */
+    renderClearFilterBtn = () => {
+        if (!this.clearFilterButton) {
+            return null;
+        }
+        if (addressOffersStore.availableFilters.length > 0) {
+            return (h("button", { class: { 'clear-button': true, [`theme-${this.theme}`]: true }, onClick: () => clearFilters() }, h("tet-icon", { name: "tc-reload", part: "icon-selected" }), t('components-address-offers-filters-clear-btn')));
+        }
+        return null;
+    };
+    /**
+     * Renders loader component
+     * @returns {FunctionalComponent}
+     */
+    renderLoader = () => {
+        return (h("div", { class: "loader" }, Array.from({ length: 4 }).map(() => (h("tet-placeholder", { height: "2rem", width: "8rem", class: "tag-placeholder", darkTheme: this.theme === 'dark' })))));
+    };
     /**
      * Renders component
      * @returns {FunctionalComponent}

package/dist/collection/components/advanced/address/tet-address-offers-filters-products/address-offers-products-filters.js

@@ -1,98 +1,99 @@
 class AddressOffersProductsFilters {
+    onFilterSelect;
+    availableTvFilters = [];
+    allFilters = [];
     constructor(onFilterSelect) {
         this.onFilterSelect = onFilterSelect;
-        this.availableTvFilters = [];
-        this.allFilters = [];
-        this.initialize = (serviceAvailabilityData, category) => {
-            if (serviceAvailabilityData.productTags) {
-                this.availableTvFilters = this.resolveFilters(serviceAvailabilityData, category);
+    }
+    initialize = (serviceAvailabilityData, category) => {
+        if (serviceAvailabilityData.productTags) {
+            this.availableTvFilters = this.resolveFilters(serviceAvailabilityData, category);
+        }
+        this.updateDisabledFilters();
+        this.onFilterSelect([...this.availableTvFilters], this.getActiveFilterIds(), this.getFilteredProductIds(category));
+    };
+    getAvailableFilters = () => {
+        return [...this.availableTvFilters];
+    };
+    clearFilters = (category) => {
+        this.availableTvFilters.forEach(filter => {
+            filter.active = false;
+            filter.showIcon = false;
+        });
+        this.updateDisabledFilters();
+        this.onFilterSelect([...this.availableTvFilters], [], this.getFilteredProductIds(category));
+    };
+    resolveFilters = (serviceAvailabilityData, category) => {
+        const subcategoryProductCodes = new Set(category.products.map(product => product.productCode));
+        const productTags = serviceAvailabilityData.productTags || [];
+        return productTags
+            .map(tag => {
+            const localProducts = (tag.products || []).filter(productCode => subcategoryProductCodes.has(productCode));
+            return {
+                id: tag.tag,
+                title: tag.title,
+                products: localProducts,
+                active: false,
+                disabled: false,
+                showIcon: false,
+                clickAction: this.filterClickAction.bind(this)
+            };
+        })
+            .filter(filter => filter.products.length > 0); // Only include if products present in this group
+    };
+    updateDisabledFilters = () => {
+        const activeFilters = this.availableTvFilters.filter(f => f.active);
+        const activeCount = activeFilters.length;
+        let intersection = null;
+        if (activeCount > 0) {
+            intersection = new Set(activeFilters[0].products);
+            for (let i = 1; i < activeFilters.length; i++) {
+                intersection = new Set([...intersection].filter(productCode => activeFilters[i].products.includes(productCode)));
             }
-            this.updateDisabledFilters();
-            this.onFilterSelect([...this.availableTvFilters], this.getActiveFilterIds(), this.getFilteredProductIds(category));
-        };
-        this.getAvailableFilters = () => {
-            return [...this.availableTvFilters];
-        };
-        this.clearFilters = (category) => {
-            this.availableTvFilters.forEach(filter => {
-                filter.active = false;
-                filter.showIcon = false;
-            });
-            this.updateDisabledFilters();
-            this.onFilterSelect([...this.availableTvFilters], [], this.getFilteredProductIds(category));
-        };
-        this.resolveFilters = (serviceAvailabilityData, category) => {
-            const subcategoryProductCodes = new Set(category.products.map(product => product.productCode));
-            const productTags = serviceAvailabilityData.productTags || [];
-            return productTags
-                .map(tag => {
-                const localProducts = (tag.products || []).filter(productCode => subcategoryProductCodes.has(productCode));
-                return {
-                    id: tag.tag,
-                    title: tag.title,
-                    products: localProducts,
-                    active: false,
-                    disabled: false,
-                    showIcon: false,
-                    clickAction: this.filterClickAction.bind(this)
-                };
-            })
-                .filter(filter => filter.products.length > 0); // Only include if products present in this group
-        };
-        this.updateDisabledFilters = () => {
-            const activeFilters = this.availableTvFilters.filter(f => f.active);
-            const activeCount = activeFilters.length;
-            let intersection = null;
-            if (activeCount > 0) {
-                intersection = new Set(activeFilters[0].products);
-                for (let i = 1; i < activeFilters.length; i++) {
-                    intersection = new Set([...intersection].filter(productCode => activeFilters[i].products.includes(productCode)));
-                }
+        }
+        for (const filter of this.availableTvFilters) {
+            if (filter.active || activeCount === 0) {
+                filter.disabled = false;
             }
-            for (const filter of this.availableTvFilters) {
-                if (filter.active || activeCount === 0) {
-                    filter.disabled = false;
+            else {
+                let simulatedIntersection = intersection ? [...intersection] : filter.products;
+                if (intersection) {
+                    simulatedIntersection = simulatedIntersection.filter(code => filter.products.includes(code));
                 }
-                else {
-                    let simulatedIntersection = intersection ? [...intersection] : filter.products;
-                    if (intersection) {
-                        simulatedIntersection = simulatedIntersection.filter(code => filter.products.includes(code));
-                    }
-                    filter.disabled = simulatedIntersection.length <= 0;
-                    filter.showIcon = false;
-                }
-            }
-        };
-        this.filterClickAction = (filter, category) => {
-            const availableFilter = this.availableTvFilters.find(({ id }) => id === filter.id);
-            if (!availableFilter)
-                return;
-            if (availableFilter.disabled)
-                return;
-            availableFilter.active = !availableFilter.active;
-            availableFilter.showIcon = !availableFilter.showIcon;
-            this.updateDisabledFilters();
-            this.onFilterSelect([...this.availableTvFilters], this.getActiveFilterIds(), this.getFilteredProductIds(category));
-        };
-        this.getActiveFilterIds = () => {
-            return this.availableTvFilters.filter(filter => filter.active).map(filter => filter.id);
-        };
-        this.getFilteredProductIds = (category = null) => {
-            if (!category || !category.products) {
-                return [];
-            }
-            const activeTags = this.availableTvFilters.filter(tag => tag.active);
-            if (activeTags.length === 0) {
-                return category.products.map(product => product.productCode);
-            }
-            let intersection = [...activeTags[0].products];
-            for (let i = 1; i < activeTags.length; i++) {
-                intersection = intersection.filter(productCode => activeTags[i].products.includes(productCode));
+                filter.disabled = simulatedIntersection.length <= 0;
+                filter.showIcon = false;
             }
-            const productsInCategory = new Set(category.products.map(product => product.productCode));
-            intersection = intersection.filter(productCode => productsInCategory.has(productCode));
-            return intersection;
-        };
-    }
+        }
+    };
+    filterClickAction = (filter, category) => {
+        const availableFilter = this.availableTvFilters.find(({ id }) => id === filter.id);
+        if (!availableFilter)
+            return;
+        if (availableFilter.disabled)
+            return;
+        availableFilter.active = !availableFilter.active;
+        availableFilter.showIcon = !availableFilter.showIcon;
+        this.updateDisabledFilters();
+        this.onFilterSelect([...this.availableTvFilters], this.getActiveFilterIds(), this.getFilteredProductIds(category));
+    };
+    getActiveFilterIds = () => {
+        return this.availableTvFilters.filter(filter => filter.active).map(filter => filter.id);
+    };
+    getFilteredProductIds = (category = null) => {
+        if (!category || !category.products) {
+            return [];
+        }
+        const activeTags = this.availableTvFilters.filter(tag => tag.active);
+        if (activeTags.length === 0) {
+            return category.products.map(product => product.productCode);
+        }
+        let intersection = [...activeTags[0].products];
+        for (let i = 1; i < activeTags.length; i++) {
+            intersection = intersection.filter(productCode => activeTags[i].products.includes(productCode));
+        }
+        const productsInCategory = new Set(category.products.map(product => product.productCode));
+        intersection = intersection.filter(productCode => productsInCategory.has(productCode));
+        return intersection;
+    };
 }
 export { AddressOffersProductsFilters };

package/dist/collection/components/advanced/address/tet-address-offers-filters-products/tet-address-offers-filters-products.js

@@ -4,23 +4,6 @@ import { AddressOffersProductsFilters } from "./address-offers-products-filters"
 import { CompareCardsTabProductsFilters } from "../../cards/tet-compare-cards-tab/compare-cards-tab-products-filters";
 export class TetAddressOffersFiltersProducts {
     constructor() {
-        this.clearAllFilters = () => {
-            if (this.filtersHelper) {
-                this.filtersHelper.clearFilters(this.category);
-            }
-            if (this.compareCardsFiltersHelper) {
-                this.compareCardsFiltersHelper.clearFilters();
-            }
-        };
-        this.renderClearFilterBtn = () => {
-            if (!this.clearFilterButton || this.availableTvProducts.length === 0) {
-                return null;
-            }
-            return (h("button", { class: { 'clear-button': true, [`theme-${this.theme}`]: true }, onClick: () => this.clearAllFilters() }, h("tet-icon", { name: "tc-reload", part: "icon-selected" }), t('components-address-offers-filters-clear-btn')));
-        };
-        this.renderLoader = () => {
-            return (h("div", { class: "loader" }, Array.from({ length: 4 }).map(() => (h("tet-placeholder", { height: "2rem", width: "8rem", class: "tag-placeholder", darkTheme: this.theme === 'dark' })))));
-        };
         this.language = 'lv';
         this.clearFilterButton = false;
         this.theme = 'light';
@@ -31,6 +14,14 @@ export class TetAddressOffersFiltersProducts {
         this.availableTvProducts = [];
         this.activeTvFilters = [];
     }
+    /** Event emitted when active filters change, sending array of active filter IDs. */
+    activeFiltersChanged;
+    /** Event emitted when filtered products change, sending subcategory ID and array of filtered product IDs. */
+    filteredProductsChanged;
+    // Helper class instance
+    filtersHelper;
+    // Helper class instance for compare cards
+    compareCardsFiltersHelper;
     /**
      * Change translations on language change
      * @param {Language} language
@@ -64,7 +55,10 @@ export class TetAddressOffersFiltersProducts {
     }
     initAdrressOffersFilters() {
         this.filtersHelper = new AddressOffersProductsFilters((filters, activeFilterIds, filteredProductIds) => {
-            this.availableTvProducts = filters.map((tag) => (Object.assign(Object.assign({}, tag), { clickAction: () => this.toggleFilter(tag.id) })));
+            this.availableTvProducts = filters.map((tag) => ({
+                ...tag,
+                clickAction: () => this.toggleFilter(tag.id)
+            }));
             this.activeTvFilters = activeFilterIds;
             this.activeFiltersChanged.emit(activeFilterIds);
             this.filteredProductsChanged.emit({
@@ -76,7 +70,10 @@ export class TetAddressOffersFiltersProducts {
     }
     initCompareCardFilters() {
         this.compareCardsFiltersHelper = new CompareCardsTabProductsFilters((filters, activeFilterIds, filteredProductIds) => {
-            this.availableTvProducts = filters.map((tag) => (Object.assign(Object.assign({}, tag), { clickAction: () => this.toggleCompareCardsFilter(tag.id) })));
+            this.availableTvProducts = filters.map((tag) => ({
+                ...tag,
+                clickAction: () => this.toggleCompareCardsFilter(tag.id)
+            }));
             this.activeTvFilters = activeFilterIds;
             this.activeFiltersChanged.emit(activeFilterIds);
             this.filteredProductsChanged.emit({
@@ -98,6 +95,23 @@ export class TetAddressOffersFiltersProducts {
             this.compareCardsFiltersHelper.filterClickAction(filter);
         }
     }
+    clearAllFilters = () => {
+        if (this.filtersHelper) {
+            this.filtersHelper.clearFilters(this.category);
+        }
+        if (this.compareCardsFiltersHelper) {
+            this.compareCardsFiltersHelper.clearFilters();
+        }
+    };
+    renderClearFilterBtn = () => {
+        if (!this.clearFilterButton || this.availableTvProducts.length === 0) {
+            return null;
+        }
+        return (h("button", { class: { 'clear-button': true, [`theme-${this.theme}`]: true }, onClick: () => this.clearAllFilters() }, h("tet-icon", { name: "tc-reload", part: "icon-selected" }), t('components-address-offers-filters-clear-btn')));
+    };
+    renderLoader = () => {
+        return (h("div", { class: "loader" }, Array.from({ length: 4 }).map(() => (h("tet-placeholder", { height: "2rem", width: "8rem", class: "tag-placeholder", darkTheme: this.theme === 'dark' })))));
+    };
     render() {
         return (h(Host, { key: '0653dfffcff52b781190e2d8bd13611217410425' }, this.availableTvProducts.length === 0 && this.renderLoader(), h("tet-tag-group", { key: '56d5d36703d745c6e1c57ff721bda16bae741d9e', tags: this.availableTvProducts, language: this.language, theme: this.theme }), this.renderClearFilterBtn()));
     }