vviinn-widgets 2.44.2 → 2.46.0

package/dist/esm/{search-filters_16.entry.js → search-filters_17.entry.js}

@@ -1,8 +1,32 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1f3eaf12.js';
-import { i as imageSearchState, a as _function, O as Option, r as fromAlt, u as foldValueObject, v as scaleWithSized, w as center, x as makeRectangularSearchRequest, y as detectedObjectEq, z as toFile, B as processSelectedFile, E as Either, C as match, o as createCommonjsModule, n as commonjsGlobal, D as sequenceToOption, F as fromImage, G as dimensionsFromImage, H as scaleByLargestSide, N as NonEmptyArray } from './imageSearch.store-c0f2a178.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-1f3eaf12.js';
+import { s as searchState, a as _function, O as Option, r as fromAlt, u as foldValueObject, v as scaleWithSized, w as center, x as makeRectangularSearchRequest, y as detectedObjectEq, z as toFile, B as processSelectedFile, E as Either, C as match, o as createCommonjsModule, n as commonjsGlobal, D as sequenceToOption, F as fromImage, G as dimensionsFromImage, H as scaleByLargestSide, N as NonEmptyArray, I as processSelectedText } from './search.store-5eebcfbe.js';
 import { i as instance } from './i18next-387f2b0a.js';
-import { W as WarningIcon, M as MinusIcon, P as PlusIcon, R as RoundCameraIcon, S as SecondaryActionIcon, A as ArrowIcon } from './index-ac58a953.js';
-import { s as slotChangeListener, c as campaignTypeNames } from './customized-slots-9a9f8c20.js';
+import { s as slotChangeListener, c as campaignTypeNames } from './customized-slots-3bea41d2.js';
+
+const ArrowIcon = () => (h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  h("path", { d: "M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z" })));
+
+const MinusIcon = () => (h("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  h("path", { d: "M8.00001 17.3333C7.62223 17.3333 7.30556 17.2056 7.05001 16.95C6.79445 16.6944 6.66667 16.3778 6.66667 16C6.66667 15.6222 6.79445 15.3056 7.05001 15.05C7.30556 14.7944 7.62223 14.6667 8.00001 14.6667H24C24.3778 14.6667 24.6944 14.7944 24.95 15.05C25.2056 15.3056 25.3333 15.6222 25.3333 16C25.3333 16.3778 25.2056 16.6944 24.95 16.95C24.6944 17.2056 24.3778 17.3333 24 17.3333H8.00001Z", fill: "white" })));
+
+const PlusIcon = () => (h("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  h("path", { d: "M14.6667 17.3333H8.00001C7.62223 17.3333 7.30556 17.2056 7.05001 16.95C6.79445 16.6944 6.66667 16.3778 6.66667 16C6.66667 15.6222 6.79445 15.3056 7.05001 15.05C7.30556 14.7944 7.62223 14.6667 8.00001 14.6667H14.6667V8.00001C14.6667 7.62223 14.7944 7.30556 15.05 7.05001C15.3056 6.79445 15.6222 6.66667 16 6.66667C16.3778 6.66667 16.6944 6.79445 16.95 7.05001C17.2056 7.30556 17.3333 7.62223 17.3333 8.00001V14.6667H24C24.3778 14.6667 24.6944 14.7944 24.95 15.05C25.2056 15.3056 25.3333 15.6222 25.3333 16C25.3333 16.3778 25.2056 16.6944 24.95 16.95C24.6944 17.2056 24.3778 17.3333 24 17.3333H17.3333V24C17.3333 24.3778 17.2056 24.6944 16.95 24.95C16.6944 25.2056 16.3778 25.3333 16 25.3333C15.6222 25.3333 15.3056 25.2056 15.05 24.95C14.7944 24.6944 14.6667 24.3778 14.6667 24V17.3333Z", fill: "white" })));
+
+const RoundCameraIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "80", height: "80", viewBox: "0 0 80 80", fill: "none" },
+  h("circle", { cx: "40", cy: "40", r: "36", fill: "white" }),
+  h("circle", { cx: "40", cy: "40", r: "39", fill: "white", "fill-opacity": "0.16", stroke: "white", "stroke-width": "2" }),
+  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M48 29.3333H50.6667C53.6133 29.3333 56 31.72 56 34.6667V45.3333H53.3333V34.6667C53.3333 33.2 52.1333 32 50.6667 32H46.5733L45.7867 30.8133L43.9067 28H36.0933L34.2133 30.8133L33.4267 32H29.3333C27.8667 32 26.6667 33.2 26.6667 34.6667V48C26.6667 49.4667 27.8667 50.6667 29.3333 50.6667H36V53.3333H29.3333C26.3867 53.3333 24 50.9467 24 48V34.6667C24 31.72 26.3867 29.3333 29.3333 29.3333H32L34.6667 25.3333H45.3333L48 29.3333ZM40 34.6667C43.68 34.6667 46.6667 37.6533 46.6667 41.3333L46.6533 41.3467C46.6533 42.6933 46.24 43.96 45.5467 45.0133L51.6 51.0667L49.72 52.9467L43.6667 46.8933C42.6133 47.5867 41.36 48 40 48C36.32 48 33.3333 45.0133 33.3333 41.3333C33.3333 37.6533 36.32 34.6667 40 34.6667ZM36 41.3333C36 43.5333 37.8 45.3333 40 45.3333C42.2 45.3333 44 43.5333 44 41.3333C44 39.1333 42.2 37.3333 40 37.3333C37.8 37.3333 36 39.1333 36 41.3333Z", fill: "#161616" })));
+
+const SecondaryActionIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
+  h("path", { d: "M7.82499 13L12.725 17.9C12.925 18.1 13.0208 18.3333 13.0125 18.6C13.0042 18.8667 12.9 19.1 12.7 19.3C12.5 19.4833 12.2667 19.5792 12 19.5875C11.7333 19.5958 11.5 19.5 11.3 19.3L4.69999 12.7C4.59999 12.6 4.52915 12.4917 4.48749 12.375C4.44582 12.2583 4.42499 12.1333 4.42499 12C4.42499 11.8667 4.44582 11.7417 4.48749 11.625C4.52915 11.5083 4.59999 11.4 4.69999 11.3L11.3 4.69999C11.4833 4.51665 11.7125 4.42499 11.9875 4.42499C12.2625 4.42499 12.5 4.51665 12.7 4.69999C12.9 4.89999 13 5.13749 13 5.41249C13 5.68749 12.9 5.92499 12.7 6.12499L7.82499 11H19C19.2833 11 19.5208 11.0958 19.7125 11.2875C19.9042 11.4792 20 11.7167 20 12C20 12.2833 19.9042 12.5208 19.7125 12.7125C19.5208 12.9042 19.2833 13 19 13H7.82499Z", fill: "currentColor" })));
+
+const TextSearchIcon = () => (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  h("path", { d: "M20.6 4.57C17.39 4.19 16.88 3.68 16.42 0.37C16.38 0.15 16.22 0 16.01 0C15.8 0 15.63 0.15 15.59 0.37C15.12 3.66 14.63 4.13 11.41 4.57C11.17 4.61 11.01 4.77 11.01 5C11.01 5.23 11.17 5.39 11.41 5.42C14.63 5.81 15.14 6.31 15.59 9.62C15.63 9.84 15.8 10 16.01 10C16.22 10 16.39 9.84 16.42 9.62C16.89 6.31 17.39 5.81 20.6 5.42C20.84 5.38 21 5.22 21 5C21 4.78 20.83 4.6 20.6 4.57Z", fill: "#525252" }),
+  h("path", { d: "M14 12C14 9.24 11.76 7 9 7C6.24 7 4 9.24 4 12C4 14.76 6.24 17 9 17C10.02 17 10.96 16.69 11.75 16.17L16.29 20.71L17.7 19.3L13.16 14.76C13.68 13.97 13.99 13.02 13.99 12.01L14 12ZM9 15C7.35 15 6 13.65 6 12C6 10.35 7.35 9 9 9C10.65 9 12 10.35 12 12C12 13.65 10.65 15 9 15Z", fill: "#525252" })));
+
+const WarningIcon = () => (h("svg", { slot: "icon", class: "icon", width: "32", height: "32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  h("path", { d: "M16 2a14 14 0 1 0 0 28 14 14 0 0 0 0-28Zm0 26a12 12 0 1 1 0-24 12 12 0 0 1 0 24Z", fill: "#525252" }),
+  h("path", { d: "M17 8h-2v11h2V8Zm-1 14a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z", fill: "#525252" })));
 
 // -------------------------------------------------------------------------------------
 // -------------------------------------------------------------------------------------
@@ -71,12 +95,12 @@ const SearchFilters = class {
       : this.selectFilter(filter);
   }
   selectFilter(selectedFilter) {
-    imageSearchState.activeIonLink = selectedFilter;
+    searchState.activeIonLink = selectedFilter;
     this.selectedFilter = parseFilters(selectedFilter, this.filterType);
     this.vviinnSelectFilter.emit(Object.assign(Object.assign({}, this.basicEventData), { action: "select", kind: this.getFilterKind() }));
   }
   clearSelectedFilter(selectedFilter) {
-    imageSearchState.activeIonLink = selectedFilter.clear;
+    searchState.activeIonLink = selectedFilter.clear;
     this.selectedFilter = parseFilters(selectedFilter.clear, this.filterType);
     this.vviinnSelectFilter.emit(Object.assign(Object.assign({}, this.basicEventData), { action: "deselect", kind: this.getFilterKind() }));
   }
@@ -111,12 +135,12 @@ const SearchFilters = class {
           filter: true,
           active: filterActive,
         }, style: { "animation-delay": `${index * 10}ms` }, onPointerUp: (ev) => {
-          if (imageSearchState.loading)
+          if (searchState.loading)
             return;
           ev.stopPropagation();
           this.handleFilterSelection(filter);
         }, onKeyPress: (ev) => {
-          if (imageSearchState.loading)
+          if (searchState.loading)
             return;
           this.handleEnter(ev, filter);
         } }, filter.name));
@@ -147,19 +171,19 @@ const VviinnDetectedObject = class {
     this.position = ["0", "0"];
   }
   getObjectPosition() {
-    return _function.pipe(imageSearchState.imageBounds, Option.map((bounds) => {
+    return _function.pipe(searchState.imageBounds, Option.map((bounds) => {
       const objectRectangle = fromAlt(foldValueObject(this.detectedObject).rectangle);
       const { x, y } = _function.pipe(objectRectangle, scaleWithSized(bounds), center);
       return [`${x}px`, `${y}px`];
     }), Option.getOrElse(() => ["0", "0"]));
   }
   selectDetectedObject() {
-    _function.pipe(imageSearchState.imageBounds, Option.map((bounds) => {
+    _function.pipe(searchState.imageBounds, Option.map((bounds) => {
       const rectangle = foldValueObject(this.detectedObject).rectangle;
       const transformedRect = fromAlt(rectangle);
       const scaledRect = scaleWithSized(bounds)(transformedRect);
-      imageSearchState.detectedObject = this.detectedObject;
-      imageSearchState.searchArea = Option.some(scaledRect);
+      searchState.detectedObject = this.detectedObject;
+      searchState.searchArea = Option.some(scaledRect);
     }));
     makeRectangularSearchRequest();
     this.vviinnSelectObject.emit(Object.assign(Object.assign({}, this.basicEventData), { detectedObject: this.detectedObject }));
@@ -167,10 +191,10 @@ const VviinnDetectedObject = class {
   isActive() {
     if (!this.detectedObject)
       return false;
-    if (!imageSearchState.detectedObject)
+    if (!searchState.detectedObject)
       return false;
     const thisObject = foldValueObject(this.detectedObject);
-    const savedObject = foldValueObject(imageSearchState.detectedObject);
+    const savedObject = foldValueObject(searchState.detectedObject);
     return detectedObjectEq.equals(thisObject, savedObject);
   }
   render() {
@@ -190,7 +214,7 @@ const VviinnEmptyResults = class {
     this.handler = undefined;
   }
   render() {
-    return (h(Host, null, h("vviinn-error", null, h(WarningIcon, null), h("h4", { slot: "title" }, instance.t("emptyResultsBlock.title")), h("button", { slot: "action", onClick: this.handler }, instance.t("emptyResultsBlock.button")))));
+    return (h(Host, null, h("vviinn-error", null, h(WarningIcon, null), h("h4", { slot: "title" }, instance.t("emptyResultsBlock.title")), searchState.searchType === "image" && (h("button", { slot: "action", onClick: this.handler }, instance.t("emptyResultsBlock.button"))))));
   }
 };
 
@@ -3680,9 +3704,9 @@ const VviinnImageView = class {
     registerInstance(this, hostRef);
     this.vviinnImageCrop = createEvent(this, "vviinnImageCrop", 7);
     this.cropEnd = () => {
-      imageSearchState.searchArea = Option.some(this.getCropboxData());
+      searchState.searchArea = Option.some(this.getCropboxData());
       makeRectangularSearchRequest();
-      imageSearchState.detectedObject = undefined;
+      searchState.detectedObject = undefined;
       this.vviinnImageCrop.emit(this.basicEventData);
     };
     this.basicEventData = undefined;
@@ -3731,8 +3755,8 @@ const VviinnImageView = class {
         width: width - width * INITIAL_CROP_AREA_OFFSET,
         height: height - height * INITIAL_CROP_AREA_OFFSET,
       };
-      imageSearchState.imageBounds = Option.some(imageBounds);
-      imageSearchState.searchArea = Option.some(searchArea);
+      searchState.imageBounds = Option.some(imageBounds);
+      searchState.searchArea = Option.some(searchArea);
       if (width / height < SUPPORTED_ASPECT_RATIO ||
         height / width < SUPPORTED_ASPECT_RATIO) {
         this.setShowAspectRatioError(true);
@@ -3752,14 +3776,13 @@ const VviinnImageView = class {
     return (h("vviinn-detected-object", { detectedObject: object, basicEventData: this.basicEventData }));
   }
   renderImage() {
-    return _function.pipe(sequenceToOption(imageSearchState.imageUrl, imageSearchState.image), Option.map(([url, refImage]) => {
+    return _function.pipe(sequenceToOption(searchState.imageUrl, searchState.image), Option.map(([url, refImage]) => {
       const [width, height] = getImageSizes(refImage);
       return (h("img", { decoding: "async", width: width, height: height, src: url, draggable: false, onLoad: () => this.loadImage() }));
     }), Option.getOrElse(() => null));
   }
   render() {
-    return (h(Host, null, h("div", { class: "container" }, h("div", { class: "image-container" }, this.renderImage(), imageSearchState.detectedObjects.map((o) => this.renderDetectedObject(o))), (imageSearchState.loading ||
-      imageSearchState.objectDetectionInProgress) &&
+    return (h(Host, null, h("div", { class: "container" }, h("div", { class: "image-container" }, this.renderImage(), searchState.detectedObjects.map((o) => this.renderDetectedObject(o))), (searchState.loading || searchState.objectDetectionInProgress) &&
       !this.showAspectRatioError &&
       !this.hidePreloader ? (h("div", { class: "image-preloader" }, h("vviinn-preloader", null))) : null)));
   }
@@ -3807,7 +3830,7 @@ const VviinnModal = class {
     this.slider = true;
   }
   renderImage() {
-    return _function.pipe(sequenceToOption(imageSearchState.imageUrl, imageSearchState.image), Option.map(([url]) => {
+    return _function.pipe(sequenceToOption(searchState.imageUrl, searchState.image), Option.map(([url]) => {
       const image = (h("img", { width: "28", height: "28", src: url, class: "title-image" }));
       return image;
     }), Option.getOrElse(() => null));
@@ -3853,7 +3876,7 @@ const VviinnOverlayedModal = class {
 };
 VviinnOverlayedModal.style = vviinnOverlayedModalCss;
 
-const vviinnPrivacyBadgeCss = ":host{color:#525252;font-size:12px;line-height:16px;text-align:center}:host(.invisible){color:transparent}@media (max-width: 768px){:host(.invisible){display:none}}";
+const vviinnPrivacyBadgeCss = ":host{color:#525252;font-size:12px;line-height:16px;text-align:center;margin-top:24px}:host(.invisible){color:transparent}@media (max-width: 768px){:host(.invisible){display:none}}";
 
 const VviinnPrivacyBadge = class {
   constructor(hostRef) {
@@ -4030,6 +4053,43 @@ const VviinnTeaser = class {
 };
 VviinnTeaser.style = vviinnTeaserCss;
 
+const vviinnTextSearchCss = ":host{display:block;position:relative;width:100%}.text-search-input{width:100%;height:48px;padding:0 16px;font-size:16px;box-sizing:border-box;font-style:normal;font-weight:400;border-radius:8px;border:1px solid #e0e0e0;transition:border-color 0.2s;outline:none;overflow:hidden}.text-search-input::-moz-placeholder{color:#a8a8a8}.text-search-input::placeholder{color:#a8a8a8}.text-search-input:focus,.text-search-input:active{border-color:#8d8d8d}.text-search-button{position:absolute;right:1px;top:1px;border:none;border-radius:0 7px 7px 0;width:46px;height:46px;display:flex;justify-content:center;align-items:center;background-color:#f4f4f4;transition:background-color 0.2s;cursor:pointer}.text-search-button:not(:disabled):hover{background-color:#e0e0e0}.text-search-button:disabled{cursor:unset}vviinn-preloader{--preloader-size:16px;display:flex;color:#525252}";
+
+const VviinnTextSearch = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vviinnTextSearchFinished = createEvent(this, "vviinnTextSearchFinished", 7);
+    this.clearSearchQuery = false;
+    this.initialSearchQuery = "";
+    this.searchQuery = this.initialSearchQuery;
+  }
+  componentWillLoad() {
+    slotChangeListener(this, this.el);
+  }
+  handleInputChange(event) {
+    this.searchQuery = event.target.value;
+  }
+  handleKeyPress(event) {
+    if (event.key === "Enter") {
+      this.handleSearch();
+    }
+  }
+  async handleSearch() {
+    if (!this.searchQuery)
+      return;
+    await processSelectedText(this.searchQuery);
+    this.vviinnTextSearchFinished.emit(this.searchQuery);
+    if (this.clearSearchQuery) {
+      this.searchQuery = "";
+    }
+  }
+  render() {
+    return (h(Host, { exportparts: "text-search-input" }, h("input", { class: "text-search-input", part: "text-search-input", type: "text", placeholder: instance.t("textSearchPlaceholder"), value: this.searchQuery, onInput: (event) => this.handleInputChange(event), onKeyUp: (event) => this.handleKeyPress(event) }), h("button", { class: "text-search-button", onClick: () => this.handleSearch(), disabled: searchState.loading }, searchState.loading && searchState.searchType === "text" ? (h("vviinn-preloader", null)) : (h("slot", { name: "vviinn-text-search-icon" }, h(TextSearchIcon, null))))));
+  }
+  get el() { return getElement(this); }
+};
+VviinnTextSearch.style = vviinnTextSearchCss;
+
 const VviinnWrongAspectRatio = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -4050,4 +4110,4 @@ const VviinnWrongFormat = class {
   }
 };
 
-export { SearchFilters as search_filters, VviinnDetectedObject as vviinn_detected_object, VviinnEmptyResults as vviinn_empty_results, VviinnExampleImage as vviinn_example_image, VviinnImageSelector as vviinn_image_selector, VviinnImageView as vviinn_image_view, VviinnModal as vviinn_modal, VviinnOverlay as vviinn_overlay, VviinnOverlayedModal as vviinn_overlayed_modal, VviinnPrivacyBadge as vviinn_privacy_badge, VviinnServerError as vviinn_server_error, VviinnSlide as vviinn_slide, VviinnSlider as vviinn_slider, VviinnTeaser as vviinn_teaser, VviinnWrongAspectRatio as vviinn_wrong_aspect_ratio, VviinnWrongFormat as vviinn_wrong_format };
+export { SearchFilters as search_filters, VviinnDetectedObject as vviinn_detected_object, VviinnEmptyResults as vviinn_empty_results, VviinnExampleImage as vviinn_example_image, VviinnImageSelector as vviinn_image_selector, VviinnImageView as vviinn_image_view, VviinnModal as vviinn_modal, VviinnOverlay as vviinn_overlay, VviinnOverlayedModal as vviinn_overlayed_modal, VviinnPrivacyBadge as vviinn_privacy_badge, VviinnServerError as vviinn_server_error, VviinnSlide as vviinn_slide, VviinnSlider as vviinn_slider, VviinnTeaser as vviinn_teaser, VviinnTextSearch as vviinn_text_search, VviinnWrongAspectRatio as vviinn_wrong_aspect_ratio, VviinnWrongFormat as vviinn_wrong_format };

package/dist/esm/{imageSearch.store-c0f2a178.js → search.store-5eebcfbe.js}

@@ -16474,12 +16474,14 @@ function getJson(x) {
 }
 const request = (url, request = {}) => _function.pipe(safeRequest(url, request), TaskEither.chain(processResponce), TaskEither.chain((x) => getJson(x)));
 const initRequestSemigroup = mergeInitRequests;
-const makeRequest = (path, init) => ([apiPath, options,]) => {
+const makeRequest = (path, init) => ([apiPath, options]) => {
   const url = new URL(path, apiPath);
   const fullOptions = initRequestSemigroup.concat(options, init);
   return _function.pipe(request(url.toString(), fullOptions), TaskEither.mapLeft(basicErrorFromResponse));
 };
 
+const sequenceToEither = Apply$1.sequenceT(Either.Apply);
+
 const isEmpty = (x) => x.length === 0;
 const checkEmpty = (x) => isEmpty(x) ? left("entity is empty") : right(x);
 const existAndNotEmpty = (x) => pipe(x, fromNullable$1("entity not exist"), chain$2(checkEmpty));
@@ -16489,20 +16491,6 @@ const parseExcluded = (value) => value
   .map((value) => (value ? `excluded[]=${value}` : ""))
   .join("&");
 
-const createBearerHeaders = (token) => new Headers({
-  Authorization: `Bearer ${token}`,
-});
-const checkToken = (token) => pipe(token, existAndNotEmpty, Either.mapLeft(() => invalidTokenError));
-const processBearerToken = (token) => pipe(token, checkToken, Either.map(createBearerHeaders));
-
-const sequenceToEither = Apply$1.sequenceT(Either.Apply);
-
-const imageFormFromFile = (file) => {
-  const body = new FormData();
-  body.append("image", file);
-  return body;
-};
-
 const readFilters = (filters) => Object.entries(filters).map(([name, filters]) => {
   return { name, filters };
 });
@@ -16514,7 +16502,7 @@ const detectedObjectEq = {
     x.rectangle.height === y.rectangle.height &&
     x.rectangle.width === y.rectangle.width,
 };
-const searchSessionClient = (initialData, campaignId = none, excludedFilters) => {
+const imageSearchSessionClient = (initialData, campaignId = none, excludedFilters) => {
   const searchUrl = "search/session";
   const requestUrl = _function.pipe(campaignId, fold(() => {
     const params = [];
@@ -16533,6 +16521,10 @@ const searchSessionClient = (initialData, campaignId = none, excludedFilters) =>
   }));
   return _function.pipe(sequenceToEither(getApiPath(), createInitPostRequest), fromEither, chainW(makeRequest(requestUrl, initialData)));
 };
+const textSearchSessionClient = (initialData) => {
+  const requestUrl = "multi-search";
+  return _function.pipe(sequenceToEither(getApiPath(), createInitPostRequest), fromEither, chainW(makeRequest(requestUrl, initialData)));
+};
 
 var ObjectMemberName;
 (function (ObjectMemberName) {
@@ -16722,6 +16714,18 @@ const fromFile = async (f) => {
 const sequenceToOption = Apply$1.sequenceT(Option.Apply);
 const checkEmpryString = (x) => x.length > 0 ? Option.some(x) : Option.none;
 
+const createBearerHeaders = (token) => new Headers({
+  Authorization: `Bearer ${token}`,
+});
+const checkToken = (token) => pipe(token, existAndNotEmpty, Either.mapLeft(() => invalidTokenError));
+const processBearerToken = (token) => pipe(token, checkToken, Either.map(createBearerHeaders));
+
+const imageFormFromFile = (file) => {
+  const body = new FormData();
+  body.append("image", file);
+  return body;
+};
+
 /**
  * Find the first element returned by an option based selector function
  *
@@ -17274,6 +17278,7 @@ const { state, onChange } = createStore({
   serverError: false,
   loading: false,
 });
+const searchState = state;
 const updateState = async (response) => {
   var _a;
   state.results = response.value;
@@ -17316,6 +17321,7 @@ const makeRectangularSearchRequest = async () => {
   }));
 };
 const uploadFile = (file) => {
+  state.searchType = "image";
   state.loading = true;
   const fileForm = imageFormFromFile(file);
   const tokenWithFile = sequenceToEither(processBearerToken(state.token), right(fileForm));
@@ -17324,7 +17330,7 @@ const uploadFile = (file) => {
       headers,
       body,
     };
-  }), fromEither, chain((request) => searchSessionClient(request, state.campaignId, state.excluded)), map((sessionResponse) => {
+  }), fromEither, chain((request) => imageSearchSessionClient(request, state.campaignId, state.excluded)), map((sessionResponse) => {
     updateState(sessionResponse);
     detectObjects(sessionResponse);
     state.loading = false;
@@ -17335,7 +17341,34 @@ const uploadFile = (file) => {
     return error;
   }));
 };
-const imageSearchState = state;
+const uploadText = (query) => {
+  state.searchType = "text";
+  state.loading = true;
+  const body = JSON.stringify({
+    query,
+    campaign: Option.getOrElse(() => "")(state.campaignId),
+  });
+  const tokenWithBody = sequenceToEither(processBearerToken(state.token), right(body));
+  return pipe(tokenWithBody, map$4(([headers, body]) => {
+    headers.set("Content-Type", "application/json");
+    return {
+      headers,
+      body,
+    };
+  }), fromEither, chain((request) => textSearchSessionClient(request)), map((sessionResponse) => {
+    var _a, _b;
+    state.results = (_b = (_a = sessionResponse.data) === null || _a === void 0 ? void 0 : _a.products) !== null && _b !== void 0 ? _b : [];
+    state.loading = false;
+    return sessionResponse;
+  }), mapLeft((error) => {
+    state.serverError = true;
+    state.loading = false;
+    return error;
+  }));
+};
+const processSelectedText = async (query) => {
+  return await uploadText(query)();
+};
 onChange("activeIonLink", async (newLink) => {
   const link = newLink ? newLink : state.resetCategoryLink;
   if (!link)
@@ -17357,8 +17390,8 @@ onChange("serverError", () => {
   state.loading = false;
 });
 const setSelectedImage = (image) => {
-  imageSearchState.image = Option.some(image);
-  imageSearchState.imageUrl = Option.some(image.src);
+  searchState.image = Option.some(image);
+  searchState.imageUrl = Option.some(image.src);
 };
 const processSelectedFile = async (file) => {
   const originFile = checkFileWithExtention(file);
@@ -17370,4 +17403,4 @@ const processSelectedFile = async (file) => {
   return session;
 };
 
-export { Apply as A, processSelectedFile as B, match$1 as C, sequenceToOption as D, Either as E, fromImage as F, dimensionsFromImage as G, scaleByLargestSide as H, NonEmptyArray as N, Option as O, Semigroup$1 as S, TaskEither as T, _Array as _, _function as a, createInitGetRequest as b, chainW as c, map$3 as d, match as e, fromEither as f, getApiPath as g, has as h, imageSearchState as i, arrayToQueryString as j, parseExcluded as k, checkEmpryString as l, makeRequest as m, commonjsGlobal as n, createCommonjsModule as o, pipe as p, isEmpty$1 as q, fromAlt as r, state$1 as s, tuple as t, foldValueObject as u, scaleWithSized as v, center as w, makeRectangularSearchRequest as x, detectedObjectEq as y, toFile as z };
+export { Apply as A, processSelectedFile as B, match$1 as C, sequenceToOption as D, Either as E, fromImage as F, dimensionsFromImage as G, scaleByLargestSide as H, processSelectedText as I, NonEmptyArray as N, Option as O, Semigroup$1 as S, TaskEither as T, _Array as _, _function as a, state$1 as b, chainW as c, createInitGetRequest as d, map$3 as e, fromEither as f, getApiPath as g, has as h, match as i, arrayToQueryString as j, parseExcluded as k, checkEmpryString as l, makeRequest as m, commonjsGlobal as n, createCommonjsModule as o, pipe as p, isEmpty$1 as q, fromAlt as r, searchState as s, tuple as t, foldValueObject as u, scaleWithSized as v, center as w, makeRectangularSearchRequest as x, detectedObjectEq as y, toFile as z };

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host } from './index-1f3eaf12.js';
-import { V as VisualSearchIcon } from './index-ac58a953.js';
+import { V as VisualSearchIcon } from './VisualSearchIcon-13f7da6a.js';
 
 const vviinnButtonCss = ":host{display:block}.open-button{align-items:center;background:rgba(255, 255, 255, 0.8);border-radius:50%;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);box-sizing:border-box;cursor:pointer;display:grid;height:40px;justify-items:center;padding:0;width:40px;transition:all 0.25s ease-in-out}.raw-open-button{background:none;border:none;cursor:pointer}.open-button:hover{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.25)}.open-button:focus{border:2px solid rgba(15, 98, 254, 0.5);outline:none}.open-button:active{background:#f4f4f4;outline:none}";
 

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

@@ -1,10 +1,16 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent, F as Fragment } from './index-1f3eaf12.js';
-import { _ as _Array, O as Option, S as Semigroup, a as _function, h as has, t as tuple, E as Either, i as imageSearchState, s as state, p as pipe, c as chainW, m as makeRequest, f as fromEither, g as getApiPath, b as createInitGetRequest, A as Apply, d as map, e as match, j as arrayToQueryString, k as parseExcluded, T as TaskEither, l as checkEmpryString } from './imageSearch.store-c0f2a178.js';
-import { C as ChevronIcon, U as UpdateIcon } from './index-ac58a953.js';
+import { h, r as registerInstance, H as Host, g as getElement, c as createEvent, F as Fragment } from './index-1f3eaf12.js';
+import { _ as _Array, O as Option, S as Semigroup, a as _function, h as has, t as tuple, E as Either, s as searchState, b as state, p as pipe, c as chainW, m as makeRequest, f as fromEither, g as getApiPath, d as createInitGetRequest, A as Apply, e as map, i as match, j as arrayToQueryString, k as parseExcluded, T as TaskEither, l as checkEmpryString } from './search.store-5eebcfbe.js';
 import { i as instance } from './i18next-387f2b0a.js';
-import { s as slotChangeListener, c as campaignTypeNames, f as fromString, a as fold, S as SlotSkeleton } from './customized-slots-9a9f8c20.js';
-import { v as version } from './package-b2424850.js';
-import { v as v4, c as createTrackingApi, a as createAddToBasketVpcEvent, b as createAddToBasketVprEvent, d as createWidgetVpcEvent, e as createWidgetVprEvent, f as createResultVpcEventByType, g as createResultVprEventByType, h as createProductVpcEventByType, i as createProductVprEventByType } from './index-53105ad4.js';
+import { s as slotChangeListener, c as campaignTypeNames, f as fromString, a as fold, S as SlotSkeleton } from './customized-slots-3bea41d2.js';
+import { v as version } from './package-cae9f186.js';
+import { v as v4, c as createTrackingApi, a as createAddToBasketVpcEvent, b as createAddToBasketVprEvent, d as createWidgetVpcEvent, e as createWidgetVprEvent, f as createResultVpcEventByType, g as createResultVprEventByType, h as createProductVpcEventByType, i as createProductVprEventByType } from './index-9c15b8f1.js';
+
+const ChevronIcon = () => (h("svg", { width: "9", height: "16", xmlns: "http://www.w3.org/2000/svg" },
+  h("path", { d: "m9 8-7.895 8L0 14.88 6.79 8 0 1.12 1.105 0 9 8Z" })));
+
+const UpdateIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
+  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M23.5998 4.57C20.3898 4.19 19.8798 3.68 19.4198 0.37C19.3798 0.15 19.2198 0 19.0098 0C18.7998 0 18.6298 0.15 18.5898 0.37C18.1198 3.66 17.6298 4.13 14.4098 4.57C14.1698 4.61 14.0098 4.77 14.0098 5C14.0098 5.23 14.1698 5.39 14.4098 5.42C17.6298 5.81 18.1398 6.31 18.5898 9.62C18.6298 9.84 18.7998 10 19.0098 10C19.2198 10 19.3898 9.84 19.4198 9.62C19.8898 6.31 20.3898 5.81 23.5998 5.42C23.8398 5.38 23.9998 5.22 23.9998 5C23.9998 4.78 23.8298 4.6 23.5998 4.57Z", fill: "currentColor" }),
+  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.93 13C19.43 13 19.01 13.37 18.95 13.86C18.52 17.36 15.51 20.06 11.89 20C8.24 19.94 5.15 16.92 5.01 13.27C4.92 10.79 6.13 8.58 8.01 7.27V11C8.01 11.55 8.46 12 9.01 12C9.56 12 10.01 11.55 10.01 11V5C10.01 4.45 9.56 4 9.01 4H3C2.45 4 2 4.45 2 5C2 5.55 2.45 6 3 6H6.35C4.24 7.71 2.91 10.35 3 13.3C3.15 17.98 7.06 21.87 11.74 22C16.45 22.13 20.37 18.65 20.93 14.13C21 13.53 20.53 13.01 19.93 13.01V13Z", fill: "currentColor" })));
 
 const vviinnCarouselCss = ":host{--vviinn-progressbar-width:0;--vviinn-carousel-item-width:150px;--vviinn-carousel-columns-internal:var(--vviinn-carousel-columns, 4);--vviinn-carousel-image-width-system:140px}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.content-wrapper *{box-sizing:border-box}.content-wrapper{overflow-y:hidden;overflow-x:auto;flex-grow:1}.bullets{margin-top:16px;display:flex;flex-direction:row;grid-gap:24px;justify-content:center}.bullet{width:10px;height:10px;background:#e0e0e0;border-radius:50%;cursor:pointer}.bullet.active{background:#161616}.content:not(.show-scrollbar),.content.grid{scrollbar-color:#fff0 #fff0}.content:not(.show-scrollbar)::-webkit-scrollbar,.content.grid::-webkit-scrollbar{opacity:0}.content{display:flex;flex-direction:row;grid-gap:8px;overflow-y:hidden;overflow-x:auto;flex-grow:1;padding-bottom:16px}.content.left>*{scroll-snap-align:start}.content.right>*{scroll-snap-align:end}:host(.continuity) .prev,:host(.continuity) .next{border-radius:2px}:host(.grid) .prev,:host(.grid) .next{border-radius:50%}.prev,.next{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);fill:#525252;cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0}.next:disabled,.prev:disabled{display:none}.prev svg{transform:rotate(180deg);margin-left:-5px}.prev{left:0}.next{right:0}.items-group{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--vviinn-carousel-columns-internal), 1fr);min-width:100%}vviinn-product-card::part(price-container){text-align:center}:host(.classic) vviinn-product-card::part(title),:host(.classic) vviinn-product-card::part(brand),:host(.classic) vviinn-product-card::part(type){text-align:center}@media (max-width: 480px){:host(.modern) button{display:none}.items-group{grid-template-columns:repeat(2, 1fr)}}";
 
@@ -577,7 +583,7 @@ const VviinnProductCard = class {
     });
   }
   getProduct() {
-    return imageSearchState.results.find((r) => r.productId === this.productId);
+    return searchState.results.find((r) => r.productId === this.productId);
   }
   renderImage() {
     const props = {
@@ -1420,6 +1426,9 @@ const VviinnVprWidget = class {
       window.location.href = deeplink;
     }
   }
+  findProductById(id) {
+    return this.recommendations.find((r) => r.productId === id);
+  }
   handleProductIdChange() {
     this.getRecommendations();
   }
@@ -1498,7 +1507,7 @@ const VviinnVprWidget = class {
   }
   async trackProductClick({ detail }) {
     const { productId, clickEvent } = detail;
-    const product = this.recommendations.find((r) => r.productId === productId);
+    const product = this.findProductById(productId);
     if (!product || !product.deeplink)
       return;
     const productClickEvent = this.getProductTrackEvent(detail, "click");
@@ -1516,7 +1525,7 @@ const VviinnVprWidget = class {
   }
   async trackAuxClick({ detail }) {
     const { productId } = detail;
-    const product = this.recommendations.find((r) => r.productId === productId);
+    const product = this.findProductById(productId);
     if (!product || !product.deeplink)
       return;
     const productClickEvent = this.getProductTrackEvent(detail, "click");
@@ -1608,7 +1617,7 @@ const VviinnVprWidget = class {
     this.vviinnResultLoad.emit(this.getBasicEventData());
     this.trackResultEvent("load");
     this.recommendations = (_a = data === null || data === void 0 ? void 0 : data.extended) !== null && _a !== void 0 ? _a : data;
-    imageSearchState.results = this.recommendations;
+    searchState.results = this.recommendations;
     this.productIds = this.recommendations.map((r) => r.productId);
     this.productImageLoadedSubject.subscribe((id) => {
       this.productIds = this.productIds.filter((x) => x !== id);

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host } from './index-1f3eaf12.js';
-import { i as imageSearchState } from './imageSearch.store-c0f2a178.js';
+import { s as searchState } from './search.store-5eebcfbe.js';
 
 const vviinnPreloaderCss = ":host{--preloader-size:24px;--preloader-width:calc(var(--preloader-size) / 6);transform-origin:center;animation:rotate 3s linear infinite;border:var(--preloader-width) solid currentColor;border-radius:50%;border-top-color:transparent;display:none;outline:0;width:var(--preloader-size);height:var(--preloader-size);box-sizing:border-box}:host(.active){display:flex}@keyframes rotate{from{transform:rotate(-360deg)}to{transform:rotate(360deg)}}";
 
@@ -8,7 +8,7 @@ const VviinnPreloader = class {
     registerInstance(this, hostRef);
   }
   isActive() {
-    return (imageSearchState.loading || imageSearchState.objectDetectionInProgress);
+    return searchState.loading || searchState.objectDetectionInProgress;
   }
   render() {
     return (h(Host, { class: {

package/dist/esm/vviinn-recommendations-sidebar.entry.js

@@ -1,5 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1f3eaf12.js';
-import { b as CrossIcon } from './index-ac58a953.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-1f3eaf12.js';
+
+const CrossIcon = () => (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  h("path", { d: "M16 1.4L14.6 0L8 6.6L1.4 0L0 1.4L6.6 8L0 14.6L1.4 16L8 9.4L14.6 16L16 14.6L9.4 8L16 1.4Z", fill: "#161616" })));
 
 const recommendationsSidebarCss = ":host{--vviinn-carousel-columns:4;box-sizing:border-box;display:block;display:flex;height:100vh;left:0;position:fixed;top:0;transition:background 0.1s ease-in-out;width:100vw}:host(.open){background:rgba(0, 0, 0, 0.2)}:host(.bottom){flex-direction:column;justify-content:end}:host(.right){flex-direction:row;justify-content:flex-end}:host [slot]{visibility:hidden;position:absolute}header{position:relative;text-align:center;padding:32px}header.contains-source-img{display:grid;justify-items:center;grid-gap:12px}img.source-image{width:64px;height:64px;border-radius:50%;box-shadow:0px 2px 4px rgba(0, 0, 0, 0.15);padding:8px}:host(.right) header{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.1)}main{padding:0 24px;min-height:100px}:host(.right) main{overflow:auto}.sidebar{background:white;box-sizing:border-box;display:flex;flex-direction:column;max-height:100vh;overflow-y:auto}:host(.bottom.idle) .sidebar,:host(.bottom.closed) .sidebar{transform:translateY(100%)}:host(.bottom.closed) .sidebar{animation-name:slideOutFromBottom;animation-duration:0.5s;animation-fill-mode:forwards}:host(.bottom.open) .sidebar{animation-name:slideInFromBottom;animation-duration:0.5s;animation-fill-mode:forwards}:host(.right.idle) .sidebar{transform:translateX(100%)}:host(.right.closed) .sidebar{animation-name:slideOutFromRight;animation-duration:0.5s;animation-fill-mode:forwards}:host(.right.open) .sidebar{animation-name:slideInFromRight;animation-duration:0.5s;animation-fill-mode:forwards}:host(.right) .sidebar{max-width:480px}:host(.right) vviinn-vpr-widget::part(recommendations-grid){display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:24px}:host(.right) vviinn-vpr-widget{overflow:auto}:host(.right) vviinn-vpr-widget::part(image){border:none}.title{font-style:normal;font-weight:500;font-size:28px;line-height:40px;text-align:center;color:#000000}vviinn-vpr-widget::part(title),vviinn-vpr-widget::part(brand),vviinn-vpr-widget::part(type){text-align:left}vviinn-vpr-widget::part(price-container){align-self:start}.close-sidebar{background:transparent;border:none;cursor:pointer;margin:0;padding:0;position:absolute;right:24px;top:24px}@keyframes slideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOutFromBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideOutFromRight{from{transform:translateX(0)}to{transform:translateX(100%)}}@media (max-width: 768px){:host{--vviinn-carousel-columns:2}}";
 

package/dist/esm/vviinn-vpr-button.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1f3eaf12.js';
-import { v as version } from './package-b2424850.js';
-import { V as VisualSearchIcon } from './index-ac58a953.js';
+import { v as version } from './package-cae9f186.js';
+import { V as VisualSearchIcon } from './VisualSearchIcon-13f7da6a.js';
 
 const vviinnVprButtonCss = ":host{display:block}";
 

package/dist/esm/vviinn-vps-button.entry.js

@@ -1,9 +1,11 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1f3eaf12.js';
-import { v as version } from './package-b2424850.js';
-import { a as CameraIcon } from './index-ac58a953.js';
-import { c as campaignTypeNames, S as SlotSkeleton } from './customized-slots-9a9f8c20.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-1f3eaf12.js';
+import { v as version } from './package-cae9f186.js';
+import { c as campaignTypeNames, S as SlotSkeleton } from './customized-slots-3bea41d2.js';
 import { D as DEFAULT_EXAMPLE_IMAGE } from './constants-8bf233a9.js';
 
+const CameraIcon = () => (h("svg", { width: "22", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16.567 3H19A3.01 3.01 0 0 1 22 6v7.69h-2V6c0-.55-.451-1-1.001-1h-3.502l-2.03-3H8.543L6.603 5H3.001c-.55 0-1 .45-1 1v11c0 .55.45 1 1 1h5.933v2H3.001A3.01 3.01 0 0 1 0 17V6c0-1.65 1.35-3 3.001-3h2.522l1.94-3h7.074l2.03 3Zm-5.562 3c1.28 0 2.561.48 3.542 1.46h-.01a4.992 4.992 0 0 1 .64 6.29l3.051 3.05-1.41 1.41-3.052-3.05c-.84.55-1.8.83-2.76.83-1.282 0-2.562-.48-3.543-1.46a5.002 5.002 0 0 1 0-7.07A5.026 5.026 0 0 1 11.005 6Zm-2.771 5a2.763 2.763 0 0 0 2.771 2.77A2.763 2.763 0 0 0 13.776 11a2.763 2.763 0 0 0-2.771-2.77A2.763 2.763 0 0 0 8.234 11Z", fill: "#161616" })));
+
 const vviinnVpsButtonCss = ":host{display:block}";
 
 const VviinnVpsButton = class {
@@ -42,6 +44,7 @@ const VviinnVpsButton = class {
     this.productDetailNewTab = true;
     this.imageResolutionWidth = 250;
     this.exampleImageSource = DEFAULT_EXAMPLE_IMAGE;
+    this.textSearchShow = false;
     this.apiPath = undefined;
     this.buttonPressed = false;
   }
@@ -61,7 +64,7 @@ const VviinnVpsButton = class {
   render() {
     return (h(Host, { tabindex: "0", role: "button" }, h("vviinn-button", { onClick: () => {
         this.handleClick();
-      }, addStyle: this.addStyle, part: "vviinn-button" }, h("slot", null, h(CameraIcon, null))), h(SlotSkeleton, null), h("vviinn-vps-widget", { mode: this.mode, "currency-sign": this.currencySign, token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button", campaignId: this.campaignId, showingInButton: true, buttonPressed: this.buttonPressed, resetVpsButton: this.resetButton.bind(this), buttonElementId: this.el.id, active: this.buttonPressed && this.mode === "modal", excluded: this.excluded, productDetailNewTab: this.productDetailNewTab, imageResolutionWidth: this.imageResolutionWidth, exampleImageSource: this.exampleImageSource })));
+      }, addStyle: this.addStyle, part: "vviinn-button" }, h("slot", null, h(CameraIcon, null))), h(SlotSkeleton, null), h("vviinn-vps-widget", { mode: this.mode, "currency-sign": this.currencySign, token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, deeplink, currency, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, product-card, upload-photo_button, show-files_button, start-camera_button", campaignId: this.campaignId, showingInButton: true, buttonPressed: this.buttonPressed, resetVpsButton: this.resetButton.bind(this), buttonElementId: this.el.id, active: this.buttonPressed && this.mode === "modal", excluded: this.excluded, productDetailNewTab: this.productDetailNewTab, imageResolutionWidth: this.imageResolutionWidth, exampleImageSource: this.exampleImageSource, textSearchShow: this.textSearchShow })));
   }
   get el() { return getElement(this); }
 };