vviinn-widgets 2.222.0 → 2.223.0

package/dist/collection/components/vviinn-cropper/vviinn-cropper.js

@@ -12,6 +12,7 @@ import { makeVisualSearchRequest, useSearchStore, } from "../../store/search.sto
 import { getImageSizes } from "../../Image/sizing";
 import { isCropBoxChangeMinimal } from "./helpers/isCropBoxDataSimilar";
 import { getCropBoxData } from "./helpers/cropperUtils";
+import { CropperOcrGate } from "./helpers/cropperOcrGate";
 import { cleanLocalStorage, getLocalStorageItems } from "../../localStorage";
 import { addEventListenersWithSignal } from "../../dom";
 import { renderExternalCSS } from "../../utils/cssUrl/cssUrlHelper";
@@ -30,6 +31,45 @@ export class VviinnCropper {
         this.showInWidget = false;
         this.cropper = null;
         this.selectedDetectedObject = null;
+        this.imageElement = null;
+        this.gate = new CropperOcrGate();
+        this.destroyCropper = () => {
+            var _a;
+            (_a = this.cropper) === null || _a === void 0 ? void 0 : _a.destroy();
+            this.cropper = null;
+        };
+        this.clearCropSelection = () => {
+            this.state.searchArea = null;
+            this.state.croppedImageUrl = null;
+            this.selectedDetectedObject = null;
+        };
+        /** Tear down the cropper and drop any applied crop. */
+        this.discardCrop = () => {
+            this.destroyCropper();
+            this.clearCropSelection();
+        };
+        this.resetCropperState = () => {
+            this.discardCrop();
+            this.state.image = null;
+        };
+        /** Show or hide the cropper to match the current OCR gate decision. */
+        this.reconcileCropper = () => {
+            // Trust the fresh filters even before the image DOM is ready.
+            this.gate.onFreshFilters();
+            if (!this.state.image || !this.imageElement || !this.state.imageBounds)
+                return;
+            if (this.gate.isGated(this.state.dynamicFilters)) {
+                // Drop only the frame, keep the region/object so OCR searches within it.
+                this.destroyCropper();
+                return;
+            }
+            // Guard geometry here so initCropper doesn't re-emit the aspect-ratio error on every filter change.
+            if (!this.cropper &&
+                this.hasSupportedAspectRatio() &&
+                this.hasSupportedSize()) {
+                this.initCropper(this.imageElement);
+            }
+        };
         this.initPreloadedImage = () => {
             var _a;
             if (this.showInWidget && this.state.image) {
@@ -53,14 +93,12 @@ export class VviinnCropper {
                 cleanLocalStorage();
         };
         this.resetStateHandler = ({ detail, }) => {
-            var _a, _b;
+            var _a;
             if (this.skipStateChanges(detail.isTriggeredByVpsWidget))
                 return;
-            this.selectedDetectedObject = null;
             (_a = this.state.image) === null || _a === void 0 ? void 0 : _a.setAttribute("src", "");
             this.state.detectedObjects = [];
-            this.state.image = null;
-            (_b = this.cropper) === null || _b === void 0 ? void 0 : _b.destroy();
+            this.resetCropperState();
             cleanLocalStorage();
         };
         this.resetCropAreaHandler = ({ detail, }) => {
@@ -68,9 +106,7 @@ export class VviinnCropper {
             if (this.skipStateChanges(detail.isTriggeredByVpsWidget))
                 return;
             (_a = this.cropper) === null || _a === void 0 ? void 0 : _a.reset();
-            this.state.searchArea = null;
-            this.state.croppedImageUrl = null;
-            this.selectedDetectedObject = null;
+            this.clearCropSelection();
             this.vviinnImageCrop.emit({
                 isTriggeredByVpsWidget: this.showInWidget,
             });
@@ -98,32 +134,62 @@ export class VviinnCropper {
                 this.cropper.replace(this.state.image.src);
         };
         this.loadImage = () => {
-            const renderedImageElement = this.el.shadowRoot.querySelector("img");
-            if (this.state.image) {
-                let data = {};
-                if (this.cropper) {
-                    data = this.cropper.getData(true);
-                    this.cropper.destroy();
-                }
-                const imageBounds = fromImage(renderedImageElement);
-                const { width, height } = imageBounds;
-                this.vviinnCropperLoadImage.emit({
-                    imageBounds,
-                });
-                this.state.imageBounds = imageBounds;
-                if (width / height < SUPPORTED_ASPECT_RATIO ||
-                    height / width < SUPPORTED_ASPECT_RATIO) {
-                    this.vviinnCropperAspectRatioError.emit(true);
-                    return;
-                }
-                if (width < MIN_IMAGE_SIDE_FOR_CROPPER ||
-                    height < MIN_IMAGE_SIDE_FOR_CROPPER) {
-                    return;
-                }
-                this.cropper = new Cropper(renderedImageElement, Object.assign(Object.assign({}, cropperOptions), { cropstart: this.cropStart, cropend: this.cropEnd, ready: () => this.cropper.reset(), data }));
+            var _a;
+            if (!this.state.image)
+                return;
+            const renderedImageElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("img");
+            if (!renderedImageElement)
+                return;
+            this.imageElement = renderedImageElement;
+            this.gate.onImage(this.state.image);
+            let data = {};
+            if (this.cropper) {
+                data = this.cropper.getData(true);
+                this.destroyCropper();
+            }
+            const imageBounds = fromImage(renderedImageElement);
+            this.vviinnCropperLoadImage.emit({
+                imageBounds,
+            });
+            this.state.imageBounds = imageBounds;
+            const isSearchLoading = this.state.searchStatus === "loading";
+            if (this.gate.isGated(this.state.dynamicFilters, isSearchLoading)) {
+                this.discardCrop();
+                // Still surface aspect-ratio errors while hidden — geometry matters regardless.
+                this.checkAspectRatio();
+                return;
             }
+            this.initCropper(renderedImageElement, data);
+        };
+        this.hasSupportedAspectRatio = () => {
+            if (!this.state.imageBounds)
+                return false;
+            const { width, height } = this.state.imageBounds;
+            return (width / height >= SUPPORTED_ASPECT_RATIO &&
+                height / width >= SUPPORTED_ASPECT_RATIO);
+        };
+        this.hasSupportedSize = () => {
+            if (!this.state.imageBounds)
+                return false;
+            const { width, height } = this.state.imageBounds;
+            return (width >= MIN_IMAGE_SIDE_FOR_CROPPER &&
+                height >= MIN_IMAGE_SIDE_FOR_CROPPER);
+        };
+        this.checkAspectRatio = () => {
+            if (this.hasSupportedAspectRatio())
+                return true;
+            this.vviinnCropperAspectRatioError.emit(true);
+            return false;
+        };
+        this.initCropper = (imageElement, data = {}) => {
+            if (!imageElement)
+                return;
+            if (!this.checkAspectRatio() || !this.hasSupportedSize())
+                return;
+            this.cropper = new Cropper(imageElement, Object.assign(Object.assign({}, cropperOptions), { cropstart: this.cropStart, cropend: this.cropEnd, ready: () => { var _a; return (_a = this.cropper) === null || _a === void 0 ? void 0 : _a.reset(); }, data }));
         };
         this.cropStart = () => {
+            this.gate.onUserAdjust();
             this.startEndCropBoxData = getCropBoxData(this.cropper);
         };
         this.cropEnd = () => {
@@ -149,9 +215,10 @@ export class VviinnCropper {
             !this.showAspectRatioError;
     }
     connectedCallback() {
-        const { state, storeName } = useSearchStore(this.showInWidget);
+        const { state, storeName, onChange } = useSearchStore(this.showInWidget);
         this.state = state;
         this.storeName = storeName;
+        this.disposeStoreListener = onChange("dynamicFilters", this.reconcileCropper);
         this.initPreloadedImage();
         this.eventAbortController = new AbortController();
         const { signal } = this.eventAbortController;
@@ -162,10 +229,13 @@ export class VviinnCropper {
         ], signal);
     }
     disconnectedCallback() {
-        var _a, _b, _c;
+        var _a, _b;
         (_a = this.eventAbortController) === null || _a === void 0 ? void 0 : _a.abort();
-        (_c = (_b = this.cropper) === null || _b === void 0 ? void 0 : _b.destroy) === null || _c === void 0 ? void 0 : _c.call(_b);
-        this.state.image = null;
+        (_b = this.disposeStoreListener) === null || _b === void 0 ? void 0 : _b.call(this);
+        this.destroyCropper();
+        // "never" keeps no image across mounts, so clear it from the shared store.
+        if (this.saveImageMode === "never")
+            this.state.image = null;
     }
     selectDetectedObject({ detail }) {
         this.selectedDetectedObject = detail.detectedObject;
@@ -198,14 +268,14 @@ export class VviinnCropper {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'ae2656d0782e723ffe5c8ba9ad6074db55e219c0', class: {
+        return (h(Host, { key: 'b50ccb5595b27ef6673ff9d9350fc30359a6f7ce', class: {
                 "show-in-widget": this.showInWidget,
                 active: !!this.state.image,
-            } }, renderExternalCSS(this.cssUrl), h("div", { key: '0c547762649ddc68aa2755681c6637ec1556b315', class: "container" }, this.state.image && (h("div", { key: '811e79aaf4ee1144c8c6ce0017300ba9aeda8803', class: "image-container", style: {
+            } }, renderExternalCSS(this.cssUrl), h("div", { key: 'efd816ed4e19082091567714fee4ef40efe9a6c4', class: "container" }, this.state.image && (h("div", { key: '13f35758ba243eb73513e17375daca8431538383', class: "image-container", style: {
                 width: `${this.width.toString()}px`,
                 overflow: "hidden",
-            } }, h("img", { key: '458474fa006a1397daa335fb9ee50477ab0e62ce', decoding: "async", width: this.width, height: this.height, src: this.state.image.src, draggable: false, onLoad: this.loadImage, alt: i18next.t("a11y.cropperImage") }), (_a = this.state.detectedObjects) === null || _a === void 0 ? void 0 :
-            _a.map((object) => (h("vviinn-detected-object", { detectedObject: object, selectedDetectedObject: this.selectedDetectedObject, basicEventData: this.basicEventData, imageBounds: this.state.imageBounds, showInWidget: this.showInWidget }))))), this.showPreloader() && (h("div", { key: 'd002cf170858ae7e5a46ca0f36bc64a425990119', class: "image-preloader" }, h("vviinn-preloader", { key: '2867876e7f492364528636d4b77dc4c7f80bee71' }))))));
+            } }, h("img", { key: '7525aae0654325fb25c88106a9ee1fface11a62e', decoding: "async", width: this.width, height: this.height, src: this.state.image.src, draggable: false, onLoad: this.loadImage, alt: i18next.t("a11y.cropperImage") }), (_a = this.state.detectedObjects) === null || _a === void 0 ? void 0 :
+            _a.map((object) => (h("vviinn-detected-object", { detectedObject: object, selectedDetectedObject: this.selectedDetectedObject, basicEventData: this.basicEventData, imageBounds: this.state.imageBounds, showInWidget: this.showInWidget }))))), this.showPreloader() && (h("div", { key: 'b89ad46bda5279b77f4fe258f7a6d4af08f81c29', class: "image-preloader" }, h("vviinn-preloader", { key: '34f55578c05321480d7e3d8141a4638df8aad08b' }))))));
     }
     static get is() { return "vviinn-cropper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/vviinn-filters/vviinn-extended-filters.js

@@ -12,6 +12,8 @@ import { useSearchStore } from "../../store/search.store";
 import { defaultConfig } from "../../store/store";
 import { addEventListenersWithSignal, isElementInSelector } from "../../dom";
 import { extendedFiltersParts } from "../../cssParts";
+const FILTER_OPTIONS_INITIAL_COUNT = 8;
+const FILTER_OPTIONS_STEP_COUNT = 5;
 /**
  * @slot vviinn-extended-filters-title - Text on widget's header.
  * @slot vviinn-extended-filters-apply - Title of Apply Button.
@@ -63,8 +65,6 @@ import { extendedFiltersParts } from "../../cssParts";
  * @part histogram-from-input - Input field for the minimum value.
  * @part histogram-to-input - Input field for the maximum value.
  */
-const FILTER_OPTIONS_INITIAL_COUNT = 8;
-const FILTER_OPTIONS_STEP_COUNT = 5;
 export class VviinnExtendedFilters {
     constructor() {
         this.mode = "button";

package/dist/collection/components/vviinn-results/vviinn-results.js

@@ -32,6 +32,81 @@ import { addIfNotEmpty } from "../../utils/collections/collectionsUtils";
 import { RESULTS_CALCULATED_COLUMNS_CSS_VAR } from "../vviinn-carousel/constants";
 import { renderExternalCSS } from "../../utils/cssUrl/cssUrlHelper";
 import { openProductLink } from "../../helpers/navigation/openProductLink";
+/**
+ * @part products - Products container.
+ * @part product-card - Product Card itself.
+ * @part image-container - Product Card's image container.
+ * @part content-container - Product Card's content container.
+ * @part basket-button-container - Product Card's basket button container.
+ * @part brand - Brand inside Product Card.
+ * @part product-type - Product Type inside Product Card.
+ * @part currency - Currency related to price.
+ * @part deeplink - Anchor element around product title. Rendered only if "deeplink" property is filled.
+ * @part image - Product Card image.
+ * @part image-link - Anchor element around product image. Rendered only if "deeplink" property is filled.
+ * @part image-picture - Picture element for image.
+ * @part image-placeholder - Placeholder shown when no image is available.
+ * @part price-amount-regular - Numeric part of the price.
+ * @part price-amount-sale - Numeric part of the price.
+ * @part price-amount-outdated - Numeric part of the price.
+ * @part price-amount-base-sale - Numeric part of the base price.
+ * @part price-amount-base-outdated - Numeric part of the base price.
+ * @part price-amount-base-regular - Numeric part of the base price.
+ * @part price-outdated - Block for outdated price. Rendered when the product contains the sale price.
+ * @part price-regular - Block for a price if no sale price is presented.
+ * @part price-sale - Block for sale price. Rendered only if the sale price is presented.
+ * @part price-prefix - Block rendered before each price element (for ex. "from").
+ * @part title - Title inside Product Card.
+ * @part basket-button - Add to Basket button.
+ * @part basket-button-container - Product Card's basket button container.
+ * @part favorite-button - Favorite button.
+ * @part product-card-actions - Product Card actions wrapper.
+ * @part product-card-actions-top - Product Card top actions wrapper.
+ * @part energy-label-container - Energy label container.
+ * @part energy-label-icon - Icon with an energy class.
+ * @part energy-label-product-type - Product type.
+ * @part energy-label-data-sheet-link - Data sheet link.
+ * @part product-images-pagination - Container for product images pagination dots (mobile only).
+ * @part product-images-pagination-bullet - Individual pagination dot.
+ * @part product-images-pagination-bullet-active - Active pagination dot.
+ *
+ * @part custom-label-0 - Custom label with index 0.
+ * @part custom-label-1 - Custom label with index 1.
+ * @part custom-label-2 - Custom label with index 2.
+ * @part custom-label-3 - Custom label with index 3.
+ * @part custom-label-4 - Custom label with index 4.
+ *
+ * @part list-card - List card container (for entity-type="list").
+ * @part list-card-content-container - List card's content container.
+ * @part list-label - List card's label (e.g., "Category").
+ * @part list-title - List card's title.
+ * @part list-card-image-container - List card's image container.
+ * @part list-card-image - List card's image element.
+ * @part list-card-image-picture - List card's image picture element.
+ *
+ * @part content-card - Content card container (for entity-type="content").
+ * @part content-card-content-container - Content card's content container.
+ * @part content-label - Content card's label.
+ * @part content-title - Content card's title.
+ * @part content-link - Content card's link.
+ * @part content-card-image - Content card's image element.
+ * @part content-card-image-container - Content card's image container.
+ * @part content-card-image-picture - Content card's image picture element.
+ *
+ * @slot vviinn-results-vpr-icon - One-Click Discovery icon.
+ * @slot vviinn-favorite-icon - Icon of Favorite button.
+ * @slot vviinn-favorite-icon-pressed - Icon of pressed Favorite button.
+ * @slot vviinn-basket-button-text - Text of Add to Basket button.
+ * @slot vviinn-basket-button-icon - Text of Add to Basket icon.
+ * @slot vviinn-basket-button-text-pressed - Text of pressed Add to Basket button.
+ * @slot vviinn-basket-button-icon-pressed - Icon of pressed Add to Basket button.
+ * @slot vviinn-custom-label-0 - Custom label with index 0.
+ * @slot vviinn-custom-label-1 - Custom label with index 1.
+ * @slot vviinn-custom-label-2 - Custom label with index 2.
+ * @slot vviinn-custom-label-3 - Custom label with index 3.
+ * @slot vviinn-custom-label-4 - Custom label with index 4.
+ * @slot vviinn-image-placeholder-icon - Icon or content for the image placeholder.
+ */
 export class VviinnResults {
     constructor() {
         /** Campaign ID used for Text Search */
@@ -432,13 +507,13 @@ export class VviinnResults {
     render() {
         var _a;
         const resultsLength = this.getResults().length;
-        return (h(Host, { key: '0767d0c21dee72b9a0f09a80dfe2ca7c375e4d50', id: "results-block", class: {
+        return (h(Host, { key: 'd62957bb1294f3a62e14fa9a3eb97c7ef6007eae', id: "results-block", class: {
                 "show-in-widget": this.showInWidget,
                 "matching-discovery": this.oneClickDiscoveryMode === "append-slider",
-            }, exportparts: `${productCardParts}, ${listCardParts}, ${contentCardParts}, ${productCardsGridPart}` }, renderExternalCSS(this.cssUrl), h("div", { key: 'bfd01f2bf39be84501ce0cf42f5672acda3e500b', class: "nothing-found" }, this.getCurrentErrorType() && (h("vviinn-error", { key: 'ce077ad92253c7727a509567571d821ebda6dbd4', errorType: this.getCurrentErrorType(), handler: this.resetWidgetState, hasBackground: this.showInWidget, searchType: this.state.searchType }))), h("div", { key: 'dc63984664328f04abe6011aa0db856cb862f37c', class: {
+            }, exportparts: `${productCardParts}, ${listCardParts}, ${contentCardParts}, ${productCardsGridPart}` }, renderExternalCSS(this.cssUrl), h("div", { key: '69f7a38dc02f42c357dbae8cf154ecb78380f270', class: "nothing-found" }, this.getCurrentErrorType() && (h("vviinn-error", { key: 'd78ed9f6d777d7ec1686b10b709deee018c4391e', errorType: this.getCurrentErrorType(), handler: this.resetWidgetState, hasBackground: this.showInWidget, searchType: this.state.searchType }))), h("div", { key: 'be3db62dcfd508b6f60036454d3c825d6c27f5ae', class: {
                 hidden: this.showAspectRatioError || resultsLength === 0,
                 products: true,
-            }, part: productCardsGridPart, id: "vviinn-results-products" }, resultsLength > 0 && this.renderResults(), h("div", { key: '2e39c5d65c5c7981c0b9a93dfe97ad62165a25b4', id: "one-click-discovery-append", style: {
+            }, part: productCardsGridPart, id: "vviinn-results-products" }, resultsLength > 0 && this.renderResults(), h("div", { key: '88d3d2d5880806b9e24799694cc540de676d17f8', id: "one-click-discovery-append", style: {
                 order: ((_a = this.oneClickDiscoveryAppendIndex) !== null && _a !== void 0 ? _a : resultsLength).toString(),
             } }))));
     }

package/dist/esm/{index-CEzGPs5u.js → index-DQQYIioG.js}

@@ -1,5 +1,5 @@
 import { h } from './index-B89nCb_F.js';
-import { h as addIfNotEmpty, p as parseStringToExcluded, n as isValueMatch, o as isIntervalMatch, q as valueToString, r as extractFilterValue } from './search.store-Cgs5icgA.js';
+import { h as addIfNotEmpty, p as parseStringToExcluded, n as isValueMatch, o as isIntervalMatch, q as valueToString, r as extractFilterValue } from './search.store-lTerE9Yh.js';
 import { i as instance } from './store-BJxQCbNV.js';
 
 const PlusIcon = () => (h("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "plus-icon", "aria-hidden": "true" },

package/dist/esm/{search.store-Cgs5icgA.js → search.store-lTerE9Yh.js}

@@ -8596,7 +8596,7 @@ const encodeToBase64UTF8 = (str) => {
     return btoa(String.fromCharCode.apply(null, utf8Array));
 };
 
-const version = "2.222.0";
+const version = "2.223.0";
 
 const appStateGlobalDefaults = {
     excluded: null,
@@ -8893,4 +8893,4 @@ const makeAutoSuggestRequest = async (store, query, token, apiPath, onCompletion
     }), mapLeft((error) => error))();
 };
 
-export { checkDeviceType as A, isMobile as B, fromString as C, fold as D, _ArrayExports as _, makeVisualSearchByUrlRequest as a, imageFromFileTask as b, makeUploadFileRequest as c, setTextSearchQuery as d, makeAutoSuggestRequest as e, campaignTypeNames as f, getAcceptableFileFormats as g, addIfNotEmpty as h, isDesktop as i, makeTextSearchRequest as j, getAcceptableFileFormatsForDisplay as k, searchState as l, makeVisualSearchRequest as m, isValueMatch as n, isIntervalMatch as o, parseStringToExcluded as p, valueToString as q, extractFilterValue as r, shopTheLookState as s, toFile as t, useSearchStore as u, version as v, getImageSizes as w, checkImageType as x, resetStore as y, makeProductListingPageRequest as z };
+export { makeProductListingPageRequest as A, checkDeviceType as B, isMobile as C, fromString as D, fold as E, _ArrayExports as _, makeVisualSearchByUrlRequest as a, imageFromFileTask as b, makeUploadFileRequest as c, setTextSearchQuery as d, makeAutoSuggestRequest as e, campaignTypeNames as f, getAcceptableFileFormats as g, addIfNotEmpty as h, isDesktop as i, makeTextSearchRequest as j, getAcceptableFileFormatsForDisplay as k, searchState as l, makeVisualSearchRequest as m, isValueMatch as n, isIntervalMatch as o, parseStringToExcluded as p, valueToString as q, extractFilterValue as r, shopTheLookState as s, toFile as t, useSearchStore as u, version as v, extractSelectedFilters as w, getImageSizes as x, checkImageType as y, resetStore as z };

package/dist/esm/vviinn-button_6.entry.js

@@ -1,6 +1,6 @@
 import { h, r as registerInstance, H as Host, c as createEvent, g as getElement, F as Fragment } from './index-B89nCb_F.js';
 import { i as instance } from './store-BJxQCbNV.js';
-import { k as getAcceptableFileFormatsForDisplay, f as campaignTypeNames, h as addIfNotEmpty, l as searchState, u as useSearchStore, v as version } from './search.store-Cgs5icgA.js';
+import { k as getAcceptableFileFormatsForDisplay, f as campaignTypeNames, h as addIfNotEmpty, l as searchState, u as useSearchStore, v as version } from './search.store-lTerE9Yh.js';
 import { s as slotChangeListener, a as addEventListenersWithSignal } from './index-C1-PYhS4.js';
 import { S as SecondaryActionIcon } from './SecondaryActionIcon-D4f3aMUD.js';
 import { m as modalParts, c as carouselParts, p as productCardParts, r as recommendationsParts, i as initializeLocale } from './index-BCrstDkj.js';