@getlupa/client 0.7.0-alpha-14 → 0.7.0-alpha-17

package/dist/cjs/components/search-results/SearchResultsTitle.vue.d.ts

@@ -9,5 +9,6 @@ export default class SearchResultsTitle extends Vue {
     get queryText(): string;
     get showProductCount(): boolean;
     get showSearchTitle(): boolean;
+    get descriptionTop(): string | undefined;
     getLabel(label: string): string;
 }

package/dist/cjs/components/search-results/filters/facets/StatsFacet.vue.d.ts

@@ -26,6 +26,8 @@ export default class TermFacet extends Vue {
     get facetMin(): number;
     get facetMax(): number;
     get statsSummary(): string;
+    get separator(): string;
+    get sliderInputFormat(): string | undefined;
     onMinValueChange(): void;
     onMaxValueChange(): void;
     handleInputChange(): void;

package/dist/cjs/index.min.js

@@ -14806,7 +14806,7 @@ let TermFacet = class TermFacet extends Vue$1 {
     }
     get fromValue() {
         return this.isPrice
-            ? this.sliderRange[0].toFixed(2)
+            ? this.sliderRange[0].toFixed(2).replace(".", this.separator)
             : `${this.sliderRange[0]}`;
     }
     set fromValue(stringValue) {
@@ -14822,7 +14822,7 @@ let TermFacet = class TermFacet extends Vue$1 {
     }
     get toValue() {
         return this.isPrice
-            ? this.sliderRange[1].toFixed(2)
+            ? this.sliderRange[1].toFixed(2).replace(".", this.separator)
             : `${this.sliderRange[1]}`;
     }
     set toValue(stringValue) {
@@ -14881,9 +14881,16 @@ let TermFacet = class TermFacet extends Vue$1 {
     get statsSummary() {
         const [min, max] = this.sliderRange;
         return this.isPrice
-            ? formatPriceSummary([min, max], this.currency, this.searchResultOptions.labels.priceSeparator)
+            ? formatPriceSummary([min, max], this.currency, this.separator)
             : formatRange({ gte: min, lte: max });
     }
+    get separator() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.searchResultOptions) === null || _a === void 0 ? void 0 : _a.labels) === null || _b === void 0 ? void 0 : _b.priceSeparator) !== null && _c !== void 0 ? _c : ",";
+    }
+    get sliderInputFormat() {
+        return this.isPrice ? `[0-9]+([${this.separator}][0-9]{1,2})?` : undefined;
+    }
     onMinValueChange() {
         this.innerSliderRange = [];
     }
@@ -14974,10 +14981,10 @@ var __vue_render__$N = function () {
                   },
                 ],
                 attrs: {
-                  type: "number",
+                  type: "text",
                   max: _vm.facetMax,
                   min: _vm.facetMin,
-                  step: _vm.isPrice ? "0.01" : "1",
+                  pattern: _vm.sliderInputFormat,
                 },
                 domProps: { value: _vm.fromValue },
                 on: {
@@ -15014,10 +15021,10 @@ var __vue_render__$N = function () {
                   },
                 ],
                 attrs: {
-                  type: "number",
+                  type: "text",
                   max: _vm.facetMax,
                   min: _vm.facetMin,
-                  step: _vm.isPrice ? "0.01" : "1",
+                  pattern: _vm.sliderInputFormat,
                 },
                 domProps: { value: _vm.toValue },
                 on: {
@@ -20449,6 +20456,10 @@ let SearchResultsTitle = class SearchResultsTitle extends Vue$1 {
         return Boolean(((_a = this.options.labels) === null || _a === void 0 ? void 0 : _a.searchResults) &&
             (this.currentQueryText || this.isProductList));
     }
+    get descriptionTop() {
+        var _a, _b;
+        return (_b = (_a = this.options.categories) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.descriptionTop;
+    }
     getLabel(label) {
         return addParamsToLabel(label, `'${this.currentQueryText}'`);
     }
@@ -20483,27 +20494,36 @@ var __vue_render__$6 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _vm.showSearchTitle
-    ? _c(
-        "h1",
-        {
-          staticClass: "lupa-result-page-title",
-          attrs: { "data-cy": "lupa-result-page-title" },
-        },
-        [
-          _vm._v("\n  " + _vm._s(_vm.options.labels.searchResults)),
-          _vm.queryText
-            ? _c("span", [_vm._v("'" + _vm._s(_vm.queryText) + "'")])
-            : _vm._e(),
-          _vm._v(" "),
-          _vm.showProductCount
-            ? _c("span", { staticClass: "lupa-results-total-count" }, [
-                _vm._v("(" + _vm._s(_vm.totalItems) + ")"),
-              ])
-            : _vm._e(),
-        ]
-      )
-    : _vm._e()
+  return _c("div", [
+    _vm.showSearchTitle
+      ? _c(
+          "h1",
+          {
+            staticClass: "lupa-result-page-title",
+            attrs: { "data-cy": "lupa-result-page-title" },
+          },
+          [
+            _vm._v("\n    " + _vm._s(_vm.options.labels.searchResults)),
+            _vm.queryText
+              ? _c("span", [_vm._v("'" + _vm._s(_vm.queryText) + "'")])
+              : _vm._e(),
+            _vm._v(" "),
+            _vm.showProductCount
+              ? _c("span", { staticClass: "lupa-results-total-count" }, [
+                  _vm._v("(" + _vm._s(_vm.totalItems) + ")"),
+                ])
+              : _vm._e(),
+          ]
+        )
+      : _vm._e(),
+    _vm._v(" "),
+    _vm.descriptionTop
+      ? _c("div", {
+          staticClass: "lupa-result-page-description-top",
+          domProps: { innerHTML: _vm._s(_vm.descriptionTop) },
+        })
+      : _vm._e(),
+  ])
 };
 var __vue_staticRenderFns__$6 = [];
 __vue_render__$6._withStripped = true;
@@ -20703,7 +20723,12 @@ let SearchResults = class SearchResults extends Vue$1 {
         this.setDefaultLimit(this.defaultSearchResultPageSize);
     }
     handleParamsChange() {
+        var _a, _b;
         this.handleUrlChange();
+        (_b = (_a = this.options.callbacks) === null || _a === void 0 ? void 0 : _a.onUrlQueryChange) === null || _b === void 0 ? void 0 : _b.call(_a, {
+            queryKey: this.options.queryKey,
+            urlQueryString: this.searchString,
+        });
     }
     handleUrlChange(params) {
         const searchParams = params || new URLSearchParams(window.location.search);

package/dist/cjs/types/product-list/ProductListOptions.d.ts

@@ -20,6 +20,7 @@ export declare type CategoryFilterOptions = {
     current?: {
         title?: string;
         description?: string;
+        descriptionTop?: string;
     };
 };
 export declare type ProductListOptions = SearchResultsOptions & {

package/dist/cjs/types/search-results/SearchResultsOptions.d.ts

@@ -9,6 +9,7 @@ export declare type SearchResultsOptions = SearchResultsProductOptions & SearchR
     classMap?: Record<string, string>;
     disallowEmptyQuery?: boolean;
     callbacks?: SearchResultEventCallbacks;
+    categories?: CategoryFilterOptions;
 };
 export declare type SearchTitlePosition = "page-top" | "search-results-top";
 export declare type SearchResultsDidYouMeanLabels = {
@@ -22,13 +23,15 @@ export declare type SearchResultsSimilarQueriesLabels = {
 };
 export declare type CallbackContext = {
     queryKey: string;
-    hasResults: boolean;
+    hasResults?: boolean;
+    urlQueryString?: string;
 };
 export declare type SearchResultEventCallbacks = {
     onSearchResults?: (context: CallbackContext) => unknown;
     onAdditionalPanelResults?: (context: CallbackContext) => unknown;
     onCategoryFilterResults?: (context: CallbackContext) => unknown;
     onProductClick?: (context: CallbackContext) => unknown;
+    onUrlQueryChange?: (context: CallbackContext) => unknown;
     onMounted?: () => unknown;
 };
 export declare type SearchResultsOptionLabels = SearchResultsPaginationLabels & SearchResultsDidYouMeanLabels & SearchResultsSimilarQueriesLabels & {

package/dist/es/components/search-results/SearchResultsTitle.vue.d.ts

@@ -9,5 +9,6 @@ export default class SearchResultsTitle extends Vue {
     get queryText(): string;
     get showProductCount(): boolean;
     get showSearchTitle(): boolean;
+    get descriptionTop(): string | undefined;
     getLabel(label: string): string;
 }

package/dist/es/components/search-results/filters/facets/StatsFacet.vue.d.ts

@@ -26,6 +26,8 @@ export default class TermFacet extends Vue {
     get facetMin(): number;
     get facetMax(): number;
     get statsSummary(): string;
+    get separator(): string;
+    get sliderInputFormat(): string | undefined;
     onMinValueChange(): void;
     onMaxValueChange(): void;
     handleInputChange(): void;

package/dist/es/index.min.js

@@ -14802,7 +14802,7 @@ let TermFacet = class TermFacet extends Vue$1 {
     }
     get fromValue() {
         return this.isPrice
-            ? this.sliderRange[0].toFixed(2)
+            ? this.sliderRange[0].toFixed(2).replace(".", this.separator)
             : `${this.sliderRange[0]}`;
     }
     set fromValue(stringValue) {
@@ -14818,7 +14818,7 @@ let TermFacet = class TermFacet extends Vue$1 {
     }
     get toValue() {
         return this.isPrice
-            ? this.sliderRange[1].toFixed(2)
+            ? this.sliderRange[1].toFixed(2).replace(".", this.separator)
             : `${this.sliderRange[1]}`;
     }
     set toValue(stringValue) {
@@ -14877,9 +14877,16 @@ let TermFacet = class TermFacet extends Vue$1 {
     get statsSummary() {
         const [min, max] = this.sliderRange;
         return this.isPrice
-            ? formatPriceSummary([min, max], this.currency, this.searchResultOptions.labels.priceSeparator)
+            ? formatPriceSummary([min, max], this.currency, this.separator)
             : formatRange({ gte: min, lte: max });
     }
+    get separator() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.searchResultOptions) === null || _a === void 0 ? void 0 : _a.labels) === null || _b === void 0 ? void 0 : _b.priceSeparator) !== null && _c !== void 0 ? _c : ",";
+    }
+    get sliderInputFormat() {
+        return this.isPrice ? `[0-9]+([${this.separator}][0-9]{1,2})?` : undefined;
+    }
     onMinValueChange() {
         this.innerSliderRange = [];
     }
@@ -14970,10 +14977,10 @@ var __vue_render__$N = function () {
                   },
                 ],
                 attrs: {
-                  type: "number",
+                  type: "text",
                   max: _vm.facetMax,
                   min: _vm.facetMin,
-                  step: _vm.isPrice ? "0.01" : "1",
+                  pattern: _vm.sliderInputFormat,
                 },
                 domProps: { value: _vm.fromValue },
                 on: {
@@ -15010,10 +15017,10 @@ var __vue_render__$N = function () {
                   },
                 ],
                 attrs: {
-                  type: "number",
+                  type: "text",
                   max: _vm.facetMax,
                   min: _vm.facetMin,
-                  step: _vm.isPrice ? "0.01" : "1",
+                  pattern: _vm.sliderInputFormat,
                 },
                 domProps: { value: _vm.toValue },
                 on: {
@@ -20445,6 +20452,10 @@ let SearchResultsTitle = class SearchResultsTitle extends Vue$1 {
         return Boolean(((_a = this.options.labels) === null || _a === void 0 ? void 0 : _a.searchResults) &&
             (this.currentQueryText || this.isProductList));
     }
+    get descriptionTop() {
+        var _a, _b;
+        return (_b = (_a = this.options.categories) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.descriptionTop;
+    }
     getLabel(label) {
         return addParamsToLabel(label, `'${this.currentQueryText}'`);
     }
@@ -20479,27 +20490,36 @@ var __vue_render__$6 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _vm.showSearchTitle
-    ? _c(
-        "h1",
-        {
-          staticClass: "lupa-result-page-title",
-          attrs: { "data-cy": "lupa-result-page-title" },
-        },
-        [
-          _vm._v("\n  " + _vm._s(_vm.options.labels.searchResults)),
-          _vm.queryText
-            ? _c("span", [_vm._v("'" + _vm._s(_vm.queryText) + "'")])
-            : _vm._e(),
-          _vm._v(" "),
-          _vm.showProductCount
-            ? _c("span", { staticClass: "lupa-results-total-count" }, [
-                _vm._v("(" + _vm._s(_vm.totalItems) + ")"),
-              ])
-            : _vm._e(),
-        ]
-      )
-    : _vm._e()
+  return _c("div", [
+    _vm.showSearchTitle
+      ? _c(
+          "h1",
+          {
+            staticClass: "lupa-result-page-title",
+            attrs: { "data-cy": "lupa-result-page-title" },
+          },
+          [
+            _vm._v("\n    " + _vm._s(_vm.options.labels.searchResults)),
+            _vm.queryText
+              ? _c("span", [_vm._v("'" + _vm._s(_vm.queryText) + "'")])
+              : _vm._e(),
+            _vm._v(" "),
+            _vm.showProductCount
+              ? _c("span", { staticClass: "lupa-results-total-count" }, [
+                  _vm._v("(" + _vm._s(_vm.totalItems) + ")"),
+                ])
+              : _vm._e(),
+          ]
+        )
+      : _vm._e(),
+    _vm._v(" "),
+    _vm.descriptionTop
+      ? _c("div", {
+          staticClass: "lupa-result-page-description-top",
+          domProps: { innerHTML: _vm._s(_vm.descriptionTop) },
+        })
+      : _vm._e(),
+  ])
 };
 var __vue_staticRenderFns__$6 = [];
 __vue_render__$6._withStripped = true;
@@ -20699,7 +20719,12 @@ let SearchResults = class SearchResults extends Vue$1 {
         this.setDefaultLimit(this.defaultSearchResultPageSize);
     }
     handleParamsChange() {
+        var _a, _b;
         this.handleUrlChange();
+        (_b = (_a = this.options.callbacks) === null || _a === void 0 ? void 0 : _a.onUrlQueryChange) === null || _b === void 0 ? void 0 : _b.call(_a, {
+            queryKey: this.options.queryKey,
+            urlQueryString: this.searchString,
+        });
     }
     handleUrlChange(params) {
         const searchParams = params || new URLSearchParams(window.location.search);

package/dist/es/types/product-list/ProductListOptions.d.ts

@@ -20,6 +20,7 @@ export declare type CategoryFilterOptions = {
     current?: {
         title?: string;
         description?: string;
+        descriptionTop?: string;
     };
 };
 export declare type ProductListOptions = SearchResultsOptions & {

package/dist/es/types/search-results/SearchResultsOptions.d.ts

@@ -9,6 +9,7 @@ export declare type SearchResultsOptions = SearchResultsProductOptions & SearchR
     classMap?: Record<string, string>;
     disallowEmptyQuery?: boolean;
     callbacks?: SearchResultEventCallbacks;
+    categories?: CategoryFilterOptions;
 };
 export declare type SearchTitlePosition = "page-top" | "search-results-top";
 export declare type SearchResultsDidYouMeanLabels = {
@@ -22,13 +23,15 @@ export declare type SearchResultsSimilarQueriesLabels = {
 };
 export declare type CallbackContext = {
     queryKey: string;
-    hasResults: boolean;
+    hasResults?: boolean;
+    urlQueryString?: string;
 };
 export declare type SearchResultEventCallbacks = {
     onSearchResults?: (context: CallbackContext) => unknown;
     onAdditionalPanelResults?: (context: CallbackContext) => unknown;
     onCategoryFilterResults?: (context: CallbackContext) => unknown;
     onProductClick?: (context: CallbackContext) => unknown;
+    onUrlQueryChange?: (context: CallbackContext) => unknown;
     onMounted?: () => unknown;
 };
 export declare type SearchResultsOptionLabels = SearchResultsPaginationLabels & SearchResultsDidYouMeanLabels & SearchResultsSimilarQueriesLabels & {

package/dist/iife/components/search-results/SearchResultsTitle.vue.d.ts

@@ -9,5 +9,6 @@ export default class SearchResultsTitle extends Vue {
     get queryText(): string;
     get showProductCount(): boolean;
     get showSearchTitle(): boolean;
+    get descriptionTop(): string | undefined;
     getLabel(label: string): string;
 }

package/dist/iife/components/search-results/filters/facets/StatsFacet.vue.d.ts

@@ -26,6 +26,8 @@ export default class TermFacet extends Vue {
     get facetMin(): number;
     get facetMax(): number;
     get statsSummary(): string;
+    get separator(): string;
+    get sliderInputFormat(): string | undefined;
     onMinValueChange(): void;
     onMaxValueChange(): void;
     handleInputChange(): void;