@depict-ai/ui 4.3.14 → 4.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/ES10/index.cjs +130 -62
  2. package/ES10/index.d.ts +1 -1
  3. package/ES10/index.js +130 -62
  4. package/latest/index.cjs +127 -62
  5. package/latest/index.d.ts +1 -1
  6. package/latest/index.js +127 -62
  7. package/package.json +2 -2
  8. package/server/ES10/index.cjs +64 -19
  9. package/server/ES10/index.d.ts +1 -1
  10. package/server/ES10/index.js +64 -19
  11. package/server/latest/index.cjs +61 -19
  12. package/server/latest/index.d.ts +1 -1
  13. package/server/latest/index.js +61 -19
package/server/ES10/index.cjs CHANGED
@@ -100,7 +100,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7
100
100
  $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
101
101
  $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
102
102
  /*! Depict.ai search and product listing SDK */
103
- const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.3.14";
103
+ const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.4.0";
104
104
  const $5401a6698b0c0658$var$transform_elements = sorted_cols_at_size => {
105
105
  const cols_at_size = [];
106
106
  for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -3055,11 +3055,12 @@ let $c95c6dd9e93acd82$export$44dad306455dddf;
3055
3055
  DEPICT_ID["SEARCH_PAGE"] = "depict-search-page";
3056
3056
  DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
3057
3057
  })($c95c6dd9e93acd82$export$44dad306455dddf || ($c95c6dd9e93acd82$export$44dad306455dddf = {}));
3058
- var $29e5dbeb69da7a36$var$_tmpl$ = ["<button", ' class="back" type="button"', ">", "</button>"],
3059
- $29e5dbeb69da7a36$var$_tmpl$2 = ["<div", ' class="search-field" role="search"><!--$-->', '<!--/--><div class="field"><input class="', '" tabindex="0"', '><button type="button" class="clear"', ' style="', '">', "</button></div>", "</div>"];
3058
+ var $29e5dbeb69da7a36$var$_tmpl$ = ["<div", ' style="', '" class="spacer"></div>'],
3059
+ $29e5dbeb69da7a36$var$_tmpl$2 = ["<button", ' class="submit major" type="button"', ">", "</button>"],
3060
+ $29e5dbeb69da7a36$var$_tmpl$3 = ["<div", ' class="', '" role="search"><!--$-->', "<!--/--><!--$-->", '<!--/--><div class="field"><!--$-->', '<!--/--><input class="', '" tabindex="0"', "><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
3060
3061
  function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
3061
3062
  let {
3062
- search_field_value_: search_field_value_,
3063
+ search_field_value_: [searchFieldValue, setSearchFieldValue],
3063
3064
  input_field_ref_: input_field_ref_,
3064
3065
  field_element_ref_: field_element_ref_,
3065
3066
  submit_query_: submit_query_,
@@ -3084,19 +3085,65 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
3084
3085
  })); // focus field on render
3085
3086
  const owner_of_field_element = $3hooq$solidjs.getOwner();
3086
3087
  const isNewModal = BackIcon_[(0, $072ab198d82c3eb7$export$1ea76ea778b880dd)] === 2;
3087
- return $3hooq$solidjsweb.ssr($29e5dbeb69da7a36$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
3088
+ const [backButtonWidthAccessor, setBackButtonWidthAccessor] = $3hooq$solidjs.createSignal();
3089
+ const getBackButtonWidth = () => {
3090
+ var _backButtonWidthAcces;
3091
+ return (_backButtonWidthAcces = backButtonWidthAccessor()) === null || _backButtonWidthAcces === void 0 ? void 0 : _backButtonWidthAcces();
3092
+ };
3093
+ const searchFieldEmpty = $3hooq$solidjs.createMemo(() => !searchFieldValue());
3094
+ const BackButton = () => $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
3088
3095
  when: on_back_,
3089
3096
  get children() {
3090
- return $3hooq$solidjsweb.ssr($29e5dbeb69da7a36$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.back_(), true), false), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(BackIcon_, {})));
3097
+ return $3hooq$solidjsweb.ssrElement("button", $3hooq$solidjsweb.mergeProps({
3098
+ "class": "back",
3099
+ type: "button",
3100
+ get ["aria-label"]() {
3101
+ return i18n_.back_();
3102
+ }
3103
+ }, isNewModal && {
3104
+ ref: el => {
3105
+ setBackButtonWidthAccessor(() => $c387d7f1d9fb66c0$export$ebdc3711f7e02ccd(el));
3106
+ $3hooq$solidjs.onCleanup(() => setBackButtonWidthAccessor());
3107
+ }
3108
+ }), () => isNewModal ? $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $083b2336093176cf$export$3b621d86b1566b2), {})) : $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(BackIcon_, {})), true);
3091
3109
  }
3092
- })), "query ".concat(!!on_back_ ? "has-adjacent-back-button" : ""), $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.search_field_field_aria_label_(), true), false) + $3hooq$solidjsweb.ssrAttribute("value", $3hooq$solidjsweb.escape(search_field_value_[0](), true), false) + $3hooq$solidjsweb.ssrAttribute("placeholder", $3hooq$solidjsweb.escape(i18n_.placeholder_text_(), true), false), $3hooq$solidjsweb.ssrAttribute("title", $3hooq$solidjsweb.escape(i18n_.clear_filters_query_sorting_after_submit_(), true), false), $3hooq$solidjsweb.ssrStyle($3hooq$solidjs.createMemo(() => search_field_value_[0]() ? "" : "display: none")()), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $083b2336093176cf$export$3b621d86b1566b2), {})), $3hooq$solidjsweb.ssrElement("button", $3hooq$solidjsweb.mergeProps({
3093
- "class": "submit major",
3094
- type: "button"
3095
- }, () => isNewModal ? {
3096
- tabindex: "-1"
3110
+ });
3111
+ const ClearButton = () => $3hooq$solidjsweb.ssrElement("button", $3hooq$solidjsweb.mergeProps({
3112
+ type: "button",
3113
+ get ["class"]() {
3114
+ return "clear ".concat(searchFieldEmpty() ? "empty" : "");
3115
+ },
3116
+ get style() {
3117
+ return isNewModal || !searchFieldEmpty() ? "" : "display: none";
3118
+ }
3119
+ }, () => searchFieldEmpty() ? {
3120
+ "aria-hidden": "true"
3097
3121
  } : {
3098
- "aria-label": i18n_.search_submit_button_aria_label_()
3099
- }), () => $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $5b88b077e48a4451$export$82eafebb825fc23f), {})), false));
3122
+ title: i18n_.clear_filters_query_sorting_after_submit_()
3123
+ }), () => isNewModal ? $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
3124
+ get when() {
3125
+ return !searchFieldEmpty();
3126
+ },
3127
+ get fallback() {
3128
+ return $3hooq$solidjsweb.createComponent((0, $5b88b077e48a4451$export$82eafebb825fc23f), {});
3129
+ },
3130
+ get children() {
3131
+ return $3hooq$solidjsweb.createComponent(BackIcon_, {});
3132
+ }
3133
+ })) : $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $083b2336093176cf$export$3b621d86b1566b2), {})), true);
3134
+ return $3hooq$solidjsweb.ssr($29e5dbeb69da7a36$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), "search-field ".concat(!!on_back_ ? "in-modal" : ""), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
3135
+ get when() {
3136
+ return getBackButtonWidth() !== undefined && on_back_;
3137
+ },
3138
+ get children() {
3139
+ return $3hooq$solidjsweb.ssr($29e5dbeb69da7a36$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "width:" + ($3hooq$solidjsweb.escape(getBackButtonWidth(), true) + "px"));
3140
+ }
3141
+ })), !isNewModal && $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(BackButton, {})), isNewModal && $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(ClearButton, {})), "query ".concat(!!on_back_ ? "has-adjacent-back-button" : ""), $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.search_field_field_aria_label_(), true), false) + $3hooq$solidjsweb.ssrAttribute("value", $3hooq$solidjsweb.escape(searchFieldValue(), true), false) + $3hooq$solidjsweb.ssrAttribute("placeholder", $3hooq$solidjsweb.escape(i18n_.placeholder_text_(), true), false), !isNewModal && $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(ClearButton, {})), isNewModal && $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(BackButton, {})), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
3142
+ when: !isNewModal,
3143
+ get children() {
3144
+ return $3hooq$solidjsweb.ssr($29e5dbeb69da7a36$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.search_submit_button_aria_label_(), true), false), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $5b88b077e48a4451$export$82eafebb825fc23f), {})));
3145
+ }
3146
+ })));
3100
3147
  }
3101
3148
  function $8c2e68c6d458169b$export$fe334901e8bebd57() {
3102
3149
  const cleanup_fns = [];
@@ -3263,7 +3310,7 @@ function $9035b24c2dbd3f36$var$RawClassicSearchModal(_ref) {
3263
3310
  };
3264
3311
  });
3265
3312
  const search_field = $29e5dbeb69da7a36$export$b94867ecbd698f21({
3266
- BackIcon_: () => $3hooq$solidjsweb.createComponent((0, $820f2920cc576f7e$export$8d8893ffd8aca39a), {}),
3313
+ BackIcon_: (0, $820f2920cc576f7e$export$8d8893ffd8aca39a),
3267
3314
  input_field_ref_: element => set_input_field(element),
3268
3315
  override_on_enter_: e => {
3269
3316
  var _on_enter_in_search_f;
@@ -3282,7 +3329,6 @@ function $9035b24c2dbd3f36$var$RawClassicSearchModal(_ref) {
3282
3329
  input_el.setSelectionRange(start, end);
3283
3330
  }
3284
3331
  });
3285
- search_field.classList.add("in-modal");
3286
3332
  const modal_element = $3hooq$solidjsweb.ssr($9035b24c2dbd3f36$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), "depict-search-modal", "".concat("body", " ").concat($3hooq$solidjsweb.escape($3hooq$solidjsweb.escape(random_classname, true), true)), $3hooq$solidjsweb.escape(search_field), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $1b3cf201cdd38687$export$b69d0d92862de18b), {
3287
3333
  severity_: "error",
3288
3334
  message_: "Autocomplete/suggestions failed",
@@ -4320,7 +4366,7 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
4320
4366
  };
4321
4367
  const discoverMoreSection = $3hooq$solidjsweb.ssr($43600b30502feeda$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), get_search_field_value_() ? $3hooq$solidjsweb.escape(i18n_.modal_view_all_results_()($3hooq$solidjsweb.ssr($43600b30502feeda$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape(formattedTotalNumberResults())))) : $3hooq$solidjsweb.escape(i18n_.modal_discover_more_()));
4322
4368
  const search_field = $29e5dbeb69da7a36$export$b94867ecbd698f21({
4323
- BackIcon_: () => $3hooq$solidjsweb.createComponent((0, $50b50df3efaa8776$export$11e9f390c90a537f), {}),
4369
+ BackIcon_: (0, $50b50df3efaa8776$export$11e9f390c90a537f),
4324
4370
  input_field_ref_: element => set_input_field(element),
4325
4371
  override_on_enter_: e => {
4326
4372
  var _on_enter_in_search_f;
@@ -4339,7 +4385,6 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
4339
4385
  input_el.setSelectionRange(start, end);
4340
4386
  }
4341
4387
  });
4342
- search_field.classList.add("in-modal");
4343
4388
  if (setSearchFieldOuterWidth_) {
4344
4389
  const resizeObserver = new ResizeObserver($3hooq$depictaiutilishared.catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));
4345
4390
  resizeObserver.observe(search_field);
@@ -11160,7 +11205,7 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
11160
11205
  const closeDuration_ = pxOffCenter > 100 ? 150 : 100;
11161
11206
  setPollAlignment_(true);
11162
11207
  // Fade out submit button so there aren't two overlapping buttons for a split second
11163
- submitButton_.animate([{
11208
+ submitButton_ === null || submitButton_ === void 0 || submitButton_.animate([{
11164
11209
  opacity: 1
11165
11210
  }, {
11166
11211
  opacity: 0
@@ -11242,7 +11287,7 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
11242
11287
  duration: closeDuration_,
11243
11288
  fill: "forwards",
11244
11289
  easing: "ease-out"
11245
- }).finished, submitButton_.animate([{
11290
+ }).finished, submitButton_ === null || submitButton_ === void 0 ? void 0 : submitButton_.animate([{
11246
11291
  opacity: 0
11247
11292
  }, {
11248
11293
  opacity: 1
package/server/ES10/index.d.ts CHANGED
@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
10
10
  import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
11
11
  import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
12
12
  import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
13
- export const version = "4.3.14";
13
+ export const version = "4.4.0";
14
14
  declare const LISTING_ID = "listingId";
15
15
  declare const EXTERNAL_ID = "externalId";
16
16
  type ScrollRestorationData = {
package/server/ES10/index.js CHANGED
@@ -10,7 +10,7 @@ import { createStore as $b8hua$createStore, reconcile as $b8hua$reconcile } from
10
10
  /*! Depict.ai search and product listing SDK */
11
11
  import { register_es_version } from "../../multi_import_deduplicator.mjs";
12
12
  register_es_version("ui", "ES10");
13
- const $8db9a15135765c11$export$83d89fbfd8236492 = "4.3.14";
13
+ const $8db9a15135765c11$export$83d89fbfd8236492 = "4.4.0";
14
14
  const $a9c7ba6087881ac2$var$transform_elements = sorted_cols_at_size => {
15
15
  const cols_at_size = [];
16
16
  for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -2965,11 +2965,12 @@ let $c3820807ac1e6fd7$export$44dad306455dddf;
2965
2965
  DEPICT_ID["SEARCH_PAGE"] = "depict-search-page";
2966
2966
  DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
2967
2967
  })($c3820807ac1e6fd7$export$44dad306455dddf || ($c3820807ac1e6fd7$export$44dad306455dddf = {}));
2968
- var $584c06c09cf4609d$var$_tmpl$ = ["<button", ' class="back" type="button"', ">", "</button>"],
2969
- $584c06c09cf4609d$var$_tmpl$2 = ["<div", ' class="search-field" role="search"><!--$-->', '<!--/--><div class="field"><input class="', '" tabindex="0"', '><button type="button" class="clear"', ' style="', '">', "</button></div>", "</div>"];
2968
+ var $584c06c09cf4609d$var$_tmpl$ = ["<div", ' style="', '" class="spacer"></div>'],
2969
+ $584c06c09cf4609d$var$_tmpl$2 = ["<button", ' class="submit major" type="button"', ">", "</button>"],
2970
+ $584c06c09cf4609d$var$_tmpl$3 = ["<div", ' class="', '" role="search"><!--$-->', "<!--/--><!--$-->", '<!--/--><div class="field"><!--$-->', '<!--/--><input class="', '" tabindex="0"', "><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
2970
2971
  function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
2971
2972
  let {
2972
- search_field_value_: search_field_value_,
2973
+ search_field_value_: [searchFieldValue, setSearchFieldValue],
2973
2974
  input_field_ref_: input_field_ref_,
2974
2975
  field_element_ref_: field_element_ref_,
2975
2976
  submit_query_: submit_query_,
@@ -2994,19 +2995,65 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
2994
2995
  })); // focus field on render
2995
2996
  const owner_of_field_element = $b8hua$getOwner();
2996
2997
  const isNewModal = BackIcon_[(0, $b026fa9c9c904a98$export$1ea76ea778b880dd)] === 2;
2997
- return $b8hua$ssr($584c06c09cf4609d$var$_tmpl$2, $b8hua$ssrHydrationKey(), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
2998
+ const [backButtonWidthAccessor, setBackButtonWidthAccessor] = $b8hua$createSignal();
2999
+ const getBackButtonWidth = () => {
3000
+ var _backButtonWidthAcces;
3001
+ return (_backButtonWidthAcces = backButtonWidthAccessor()) === null || _backButtonWidthAcces === void 0 ? void 0 : _backButtonWidthAcces();
3002
+ };
3003
+ const searchFieldEmpty = $b8hua$createMemo(() => !searchFieldValue());
3004
+ const BackButton = () => $b8hua$createComponent((0, $b8hua$Show), {
2998
3005
  when: on_back_,
2999
3006
  get children() {
3000
- return $b8hua$ssr($584c06c09cf4609d$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("aria-label", $b8hua$escape(i18n_.back_(), true), false), $b8hua$escape($b8hua$createComponent(BackIcon_, {})));
3007
+ return $b8hua$ssrElement("button", $b8hua$mergeProps({
3008
+ "class": "back",
3009
+ type: "button",
3010
+ get ["aria-label"]() {
3011
+ return i18n_.back_();
3012
+ }
3013
+ }, isNewModal && {
3014
+ ref: el => {
3015
+ setBackButtonWidthAccessor(() => $fc830a7ee59416ef$export$ebdc3711f7e02ccd(el));
3016
+ $b8hua$onCleanup(() => setBackButtonWidthAccessor());
3017
+ }
3018
+ }), () => isNewModal ? $b8hua$escape($b8hua$createComponent((0, $9783d437ad61594c$export$3b621d86b1566b2), {})) : $b8hua$escape($b8hua$createComponent(BackIcon_, {})), true);
3001
3019
  }
3002
- })), "query ".concat(!!on_back_ ? "has-adjacent-back-button" : ""), $b8hua$ssrAttribute("aria-label", $b8hua$escape(i18n_.search_field_field_aria_label_(), true), false) + $b8hua$ssrAttribute("value", $b8hua$escape(search_field_value_[0](), true), false) + $b8hua$ssrAttribute("placeholder", $b8hua$escape(i18n_.placeholder_text_(), true), false), $b8hua$ssrAttribute("title", $b8hua$escape(i18n_.clear_filters_query_sorting_after_submit_(), true), false), $b8hua$ssrStyle($b8hua$createMemo(() => search_field_value_[0]() ? "" : "display: none")()), $b8hua$escape($b8hua$createComponent((0, $9783d437ad61594c$export$3b621d86b1566b2), {})), $b8hua$ssrElement("button", $b8hua$mergeProps({
3003
- "class": "submit major",
3004
- type: "button"
3005
- }, () => isNewModal ? {
3006
- tabindex: "-1"
3020
+ });
3021
+ const ClearButton = () => $b8hua$ssrElement("button", $b8hua$mergeProps({
3022
+ type: "button",
3023
+ get ["class"]() {
3024
+ return "clear ".concat(searchFieldEmpty() ? "empty" : "");
3025
+ },
3026
+ get style() {
3027
+ return isNewModal || !searchFieldEmpty() ? "" : "display: none";
3028
+ }
3029
+ }, () => searchFieldEmpty() ? {
3030
+ "aria-hidden": "true"
3007
3031
  } : {
3008
- "aria-label": i18n_.search_submit_button_aria_label_()
3009
- }), () => $b8hua$escape($b8hua$createComponent((0, $ef0f18a578b32578$export$82eafebb825fc23f), {})), false));
3032
+ title: i18n_.clear_filters_query_sorting_after_submit_()
3033
+ }), () => isNewModal ? $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
3034
+ get when() {
3035
+ return !searchFieldEmpty();
3036
+ },
3037
+ get fallback() {
3038
+ return $b8hua$createComponent((0, $ef0f18a578b32578$export$82eafebb825fc23f), {});
3039
+ },
3040
+ get children() {
3041
+ return $b8hua$createComponent(BackIcon_, {});
3042
+ }
3043
+ })) : $b8hua$escape($b8hua$createComponent((0, $9783d437ad61594c$export$3b621d86b1566b2), {})), true);
3044
+ return $b8hua$ssr($584c06c09cf4609d$var$_tmpl$3, $b8hua$ssrHydrationKey(), "search-field ".concat(!!on_back_ ? "in-modal" : ""), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
3045
+ get when() {
3046
+ return getBackButtonWidth() !== undefined && on_back_;
3047
+ },
3048
+ get children() {
3049
+ return $b8hua$ssr($584c06c09cf4609d$var$_tmpl$, $b8hua$ssrHydrationKey(), "width:" + ($b8hua$escape(getBackButtonWidth(), true) + "px"));
3050
+ }
3051
+ })), !isNewModal && $b8hua$escape($b8hua$createComponent(BackButton, {})), isNewModal && $b8hua$escape($b8hua$createComponent(ClearButton, {})), "query ".concat(!!on_back_ ? "has-adjacent-back-button" : ""), $b8hua$ssrAttribute("aria-label", $b8hua$escape(i18n_.search_field_field_aria_label_(), true), false) + $b8hua$ssrAttribute("value", $b8hua$escape(searchFieldValue(), true), false) + $b8hua$ssrAttribute("placeholder", $b8hua$escape(i18n_.placeholder_text_(), true), false), !isNewModal && $b8hua$escape($b8hua$createComponent(ClearButton, {})), isNewModal && $b8hua$escape($b8hua$createComponent(BackButton, {})), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
3052
+ when: !isNewModal,
3053
+ get children() {
3054
+ return $b8hua$ssr($584c06c09cf4609d$var$_tmpl$2, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("aria-label", $b8hua$escape(i18n_.search_submit_button_aria_label_(), true), false), $b8hua$escape($b8hua$createComponent((0, $ef0f18a578b32578$export$82eafebb825fc23f), {})));
3055
+ }
3056
+ })));
3010
3057
  }
3011
3058
  function $e56d241d0f33d459$export$fe334901e8bebd57() {
3012
3059
  const cleanup_fns = [];
@@ -3173,7 +3220,7 @@ function $40411f2ec772c376$var$RawClassicSearchModal(_ref) {
3173
3220
  };
3174
3221
  });
3175
3222
  const search_field = $584c06c09cf4609d$export$b94867ecbd698f21({
3176
- BackIcon_: () => $b8hua$createComponent((0, $fac58b5610eec6a9$export$8d8893ffd8aca39a), {}),
3223
+ BackIcon_: (0, $fac58b5610eec6a9$export$8d8893ffd8aca39a),
3177
3224
  input_field_ref_: element => set_input_field(element),
3178
3225
  override_on_enter_: e => {
3179
3226
  var _on_enter_in_search_f;
@@ -3192,7 +3239,6 @@ function $40411f2ec772c376$var$RawClassicSearchModal(_ref) {
3192
3239
  input_el.setSelectionRange(start, end);
3193
3240
  }
3194
3241
  });
3195
- search_field.classList.add("in-modal");
3196
3242
  const modal_element = $b8hua$ssr($40411f2ec772c376$var$_tmpl$3, $b8hua$ssrHydrationKey(), "depict-search-modal", "".concat("body", " ").concat($b8hua$escape($b8hua$escape(random_classname, true), true)), $b8hua$escape(search_field), $b8hua$escape($b8hua$createComponent((0, $74777e8fe65b3dcb$export$b69d0d92862de18b), {
3197
3243
  severity_: "error",
3198
3244
  message_: "Autocomplete/suggestions failed",
@@ -4230,7 +4276,7 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
4230
4276
  };
4231
4277
  const discoverMoreSection = $b8hua$ssr($06fcd2a345efd24d$var$_tmpl$2, $b8hua$ssrHydrationKey(), get_search_field_value_() ? $b8hua$escape(i18n_.modal_view_all_results_()($b8hua$ssr($06fcd2a345efd24d$var$_tmpl$3, $b8hua$ssrHydrationKey(), $b8hua$escape(formattedTotalNumberResults())))) : $b8hua$escape(i18n_.modal_discover_more_()));
4232
4278
  const search_field = $584c06c09cf4609d$export$b94867ecbd698f21({
4233
- BackIcon_: () => $b8hua$createComponent((0, $c2fe922d21c40514$export$11e9f390c90a537f), {}),
4279
+ BackIcon_: (0, $c2fe922d21c40514$export$11e9f390c90a537f),
4234
4280
  input_field_ref_: element => set_input_field(element),
4235
4281
  override_on_enter_: e => {
4236
4282
  var _on_enter_in_search_f;
@@ -4249,7 +4295,6 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
4249
4295
  input_el.setSelectionRange(start, end);
4250
4296
  }
4251
4297
  });
4252
- search_field.classList.add("in-modal");
4253
4298
  if (setSearchFieldOuterWidth_) {
4254
4299
  const resizeObserver = new ResizeObserver($b8hua$catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));
4255
4300
  resizeObserver.observe(search_field);
@@ -11070,7 +11115,7 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
11070
11115
  const closeDuration_ = pxOffCenter > 100 ? 150 : 100;
11071
11116
  setPollAlignment_(true);
11072
11117
  // Fade out submit button so there aren't two overlapping buttons for a split second
11073
- submitButton_.animate([{
11118
+ submitButton_ === null || submitButton_ === void 0 || submitButton_.animate([{
11074
11119
  opacity: 1
11075
11120
  }, {
11076
11121
  opacity: 0
@@ -11152,7 +11197,7 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
11152
11197
  duration: closeDuration_,
11153
11198
  fill: "forwards",
11154
11199
  easing: "ease-out"
11155
- }).finished, submitButton_.animate([{
11200
+ }).finished, submitButton_ === null || submitButton_ === void 0 ? void 0 : submitButton_.animate([{
11156
11201
  opacity: 0
11157
11202
  }, {
11158
11203
  opacity: 1
package/server/latest/index.cjs CHANGED
@@ -94,7 +94,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
94
94
  $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
95
95
  $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
96
96
  /*! Depict.ai search and product listing SDK */
97
- const $b757f75811f3261f$export$83d89fbfd8236492 = "4.3.14";
97
+ const $b757f75811f3261f$export$83d89fbfd8236492 = "4.4.0";
98
98
  const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
99
99
  const cols_at_size = [];
100
100
  for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -2885,10 +2885,11 @@ let $0b6e2070a98de347$export$44dad306455dddf;
2885
2885
  DEPICT_ID["SEARCH_PAGE"] = "depict-search-page";
2886
2886
  DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
2887
2887
  })($0b6e2070a98de347$export$44dad306455dddf || ($0b6e2070a98de347$export$44dad306455dddf = {}));
2888
- var $66b8b9a9613c141d$var$_tmpl$ = ["<button", ' class="back" type="button"', ">", "</button>"],
2889
- $66b8b9a9613c141d$var$_tmpl$2 = ["<div", ' class="search-field" role="search"><!--$-->', '<!--/--><div class="field"><input class="', '" tabindex="0"', '><button type="button" class="clear"', ' style="', '">', "</button></div>", "</div>"];
2888
+ var $66b8b9a9613c141d$var$_tmpl$ = ["<div", ' style="', '" class="spacer"></div>'],
2889
+ $66b8b9a9613c141d$var$_tmpl$2 = ["<button", ' class="submit major" type="button"', ">", "</button>"],
2890
+ $66b8b9a9613c141d$var$_tmpl$3 = ["<div", ' class="', '" role="search"><!--$-->', "<!--/--><!--$-->", '<!--/--><div class="field"><!--$-->', '<!--/--><input class="', '" tabindex="0"', "><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
2890
2891
  function $66b8b9a9613c141d$export$b94867ecbd698f21({
2891
- search_field_value_: search_field_value_,
2892
+ search_field_value_: [searchFieldValue, setSearchFieldValue],
2892
2893
  input_field_ref_: input_field_ref_,
2893
2894
  field_element_ref_: field_element_ref_,
2894
2895
  submit_query_: submit_query_,
@@ -2913,19 +2914,62 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
2913
2914
  })); // focus field on render
2914
2915
  const owner_of_field_element = $5vyXB$solidjs.getOwner();
2915
2916
  const isNewModal = BackIcon_[(0, $ad1fa088e5509cca$export$1ea76ea778b880dd)] === 2;
2916
- return $5vyXB$solidjsweb.ssr($66b8b9a9613c141d$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
2917
+ const [backButtonWidthAccessor, setBackButtonWidthAccessor] = $5vyXB$solidjs.createSignal();
2918
+ const getBackButtonWidth = () => backButtonWidthAccessor()?.();
2919
+ const searchFieldEmpty = $5vyXB$solidjs.createMemo(() => !searchFieldValue());
2920
+ const BackButton = () => $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
2917
2921
  when: on_back_,
2918
2922
  get children() {
2919
- return $5vyXB$solidjsweb.ssr($66b8b9a9613c141d$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape(i18n_.back_(), true), false), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(BackIcon_, {})));
2923
+ return $5vyXB$solidjsweb.ssrElement("button", $5vyXB$solidjsweb.mergeProps({
2924
+ "class": "back",
2925
+ type: "button",
2926
+ get ["aria-label"]() {
2927
+ return i18n_.back_();
2928
+ }
2929
+ }, isNewModal && {
2930
+ ref: el => {
2931
+ setBackButtonWidthAccessor(() => $f13855d1b951b24a$export$ebdc3711f7e02ccd(el));
2932
+ $5vyXB$solidjs.onCleanup(() => setBackButtonWidthAccessor());
2933
+ }
2934
+ }), () => isNewModal ? $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {})) : $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(BackIcon_, {})), true);
2920
2935
  }
2921
- })), `query ${!!on_back_ ? "has-adjacent-back-button" : ""}`, $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape(i18n_.search_field_field_aria_label_(), true), false) + $5vyXB$solidjsweb.ssrAttribute("value", $5vyXB$solidjsweb.escape(search_field_value_[0](), true), false) + $5vyXB$solidjsweb.ssrAttribute("placeholder", $5vyXB$solidjsweb.escape(i18n_.placeholder_text_(), true), false), $5vyXB$solidjsweb.ssrAttribute("title", $5vyXB$solidjsweb.escape(i18n_.clear_filters_query_sorting_after_submit_(), true), false), $5vyXB$solidjsweb.ssrStyle($5vyXB$solidjs.createMemo(() => search_field_value_[0]() ? "" : "display: none")()), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {})), $5vyXB$solidjsweb.ssrElement("button", $5vyXB$solidjsweb.mergeProps({
2922
- "class": "submit major",
2923
- type: "button"
2924
- }, () => isNewModal ? {
2925
- tabindex: "-1"
2936
+ });
2937
+ const ClearButton = () => $5vyXB$solidjsweb.ssrElement("button", $5vyXB$solidjsweb.mergeProps({
2938
+ type: "button",
2939
+ get ["class"]() {
2940
+ return `clear ${searchFieldEmpty() ? "empty" : ""}`;
2941
+ },
2942
+ get style() {
2943
+ return isNewModal || !searchFieldEmpty() ? "" : "display: none";
2944
+ }
2945
+ }, () => searchFieldEmpty() ? {
2946
+ "aria-hidden": "true"
2926
2947
  } : {
2927
- "aria-label": i18n_.search_submit_button_aria_label_()
2928
- }), () => $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $87d7574e1d89d69b$export$82eafebb825fc23f), {})), false));
2948
+ title: i18n_.clear_filters_query_sorting_after_submit_()
2949
+ }), () => isNewModal ? $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
2950
+ get when() {
2951
+ return !searchFieldEmpty();
2952
+ },
2953
+ get fallback() {
2954
+ return $5vyXB$solidjsweb.createComponent((0, $87d7574e1d89d69b$export$82eafebb825fc23f), {});
2955
+ },
2956
+ get children() {
2957
+ return $5vyXB$solidjsweb.createComponent(BackIcon_, {});
2958
+ }
2959
+ })) : $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {})), true);
2960
+ return $5vyXB$solidjsweb.ssr($66b8b9a9613c141d$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), `search-field ${!!on_back_ ? "in-modal" : ""}`, $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
2961
+ get when() {
2962
+ return getBackButtonWidth() !== undefined && on_back_;
2963
+ },
2964
+ get children() {
2965
+ return $5vyXB$solidjsweb.ssr($66b8b9a9613c141d$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), "width:" + ($5vyXB$solidjsweb.escape(getBackButtonWidth(), true) + "px"));
2966
+ }
2967
+ })), !isNewModal && $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(BackButton, {})), isNewModal && $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(ClearButton, {})), `query ${!!on_back_ ? "has-adjacent-back-button" : ""}`, $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape(i18n_.search_field_field_aria_label_(), true), false) + $5vyXB$solidjsweb.ssrAttribute("value", $5vyXB$solidjsweb.escape(searchFieldValue(), true), false) + $5vyXB$solidjsweb.ssrAttribute("placeholder", $5vyXB$solidjsweb.escape(i18n_.placeholder_text_(), true), false), !isNewModal && $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(ClearButton, {})), isNewModal && $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(BackButton, {})), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
2968
+ when: !isNewModal,
2969
+ get children() {
2970
+ return $5vyXB$solidjsweb.ssr($66b8b9a9613c141d$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape(i18n_.search_submit_button_aria_label_(), true), false), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $87d7574e1d89d69b$export$82eafebb825fc23f), {})));
2971
+ }
2972
+ })));
2929
2973
  }
2930
2974
  function $ca1176b694a6ee2e$export$fe334901e8bebd57() {
2931
2975
  const cleanup_fns = [];
@@ -3089,7 +3133,7 @@ function $44f0b2e312a9b710$var$RawClassicSearchModal({
3089
3133
  };
3090
3134
  });
3091
3135
  const search_field = $66b8b9a9613c141d$export$b94867ecbd698f21({
3092
- BackIcon_: () => $5vyXB$solidjsweb.createComponent((0, $610b584d4f54699e$export$8d8893ffd8aca39a), {}),
3136
+ BackIcon_: (0, $610b584d4f54699e$export$8d8893ffd8aca39a),
3093
3137
  input_field_ref_: element => set_input_field(element),
3094
3138
  override_on_enter_: e => on_enter_in_search_field_function?.(e),
3095
3139
  on_back_: close_modal_,
@@ -3105,7 +3149,6 @@ function $44f0b2e312a9b710$var$RawClassicSearchModal({
3105
3149
  input_el.setSelectionRange(start, end);
3106
3150
  }
3107
3151
  });
3108
- search_field.classList.add("in-modal");
3109
3152
  const modal_element = $5vyXB$solidjsweb.ssr($44f0b2e312a9b710$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), `depict-search-modal`, `${`body` || ""} ${$5vyXB$solidjsweb.escape($5vyXB$solidjsweb.escape(random_classname, true), true)}`, $5vyXB$solidjsweb.escape(search_field), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
3110
3153
  severity_: "error",
3111
3154
  message_: "Autocomplete/suggestions failed",
@@ -4100,7 +4143,7 @@ function $11597ae03e703a47$var$RawSearchModalV2({
4100
4143
  };
4101
4144
  const discoverMoreSection = $5vyXB$solidjsweb.ssr($11597ae03e703a47$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), get_search_field_value_() ? $5vyXB$solidjsweb.escape(i18n_.modal_view_all_results_()($5vyXB$solidjsweb.ssr($11597ae03e703a47$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(formattedTotalNumberResults())))) : $5vyXB$solidjsweb.escape(i18n_.modal_discover_more_()));
4102
4145
  const search_field = $66b8b9a9613c141d$export$b94867ecbd698f21({
4103
- BackIcon_: () => $5vyXB$solidjsweb.createComponent((0, $b8660a70353e03cf$export$11e9f390c90a537f), {}),
4146
+ BackIcon_: (0, $b8660a70353e03cf$export$11e9f390c90a537f),
4104
4147
  input_field_ref_: element => set_input_field(element),
4105
4148
  override_on_enter_: e => on_enter_in_search_field_function?.(e),
4106
4149
  on_back_: close_modal_,
@@ -4116,7 +4159,6 @@ function $11597ae03e703a47$var$RawSearchModalV2({
4116
4159
  input_el.setSelectionRange(start, end);
4117
4160
  }
4118
4161
  });
4119
- search_field.classList.add("in-modal");
4120
4162
  if (setSearchFieldOuterWidth_) {
4121
4163
  const resizeObserver = new ResizeObserver($5vyXB$depictaiutilishared.catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));
4122
4164
  resizeObserver.observe(search_field);
@@ -10440,7 +10482,7 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
10440
10482
  const closeDuration_ = pxOffCenter > 100 ? 150 : 100;
10441
10483
  setPollAlignment_(true);
10442
10484
  // Fade out submit button so there aren't two overlapping buttons for a split second
10443
- submitButton_.animate([{
10485
+ submitButton_?.animate([{
10444
10486
  opacity: 1
10445
10487
  }, {
10446
10488
  opacity: 0
@@ -10522,7 +10564,7 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
10522
10564
  duration: closeDuration_,
10523
10565
  fill: "forwards",
10524
10566
  easing: "ease-out"
10525
- }).finished, submitButton_.animate([{
10567
+ }).finished, submitButton_?.animate([{
10526
10568
  opacity: 0
10527
10569
  }, {
10528
10570
  opacity: 1
package/server/latest/index.d.ts CHANGED
@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
10
10
  import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
11
11
  import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
12
12
  import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
13
- export const version = "4.3.14";
13
+ export const version = "4.4.0";
14
14
  declare const LISTING_ID = "listingId";
15
15
  declare const EXTERNAL_ID = "externalId";
16
16
  type ScrollRestorationData = {
package/server/latest/index.js CHANGED
@@ -7,7 +7,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from
7
7
  /*! Depict.ai search and product listing SDK */
8
8
  import { register_es_version } from "../../multi_import_deduplicator.mjs";
9
9
  register_es_version("ui", "latest");
10
- const $ec291e0010116877$export$83d89fbfd8236492 = "4.3.14";
10
+ const $ec291e0010116877$export$83d89fbfd8236492 = "4.4.0";
11
11
  const $b5cccc8ee7d24677$var$transform_elements = sorted_cols_at_size => {
12
12
  const cols_at_size = [];
13
13
  for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -2798,10 +2798,11 @@ let $f86ba724282f6690$export$44dad306455dddf;
2798
2798
  DEPICT_ID["SEARCH_PAGE"] = "depict-search-page";
2799
2799
  DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
2800
2800
  })($f86ba724282f6690$export$44dad306455dddf || ($f86ba724282f6690$export$44dad306455dddf = {}));
2801
- var $5285d2814d0fac0c$var$_tmpl$ = ["<button", ' class="back" type="button"', ">", "</button>"],
2802
- $5285d2814d0fac0c$var$_tmpl$2 = ["<div", ' class="search-field" role="search"><!--$-->', '<!--/--><div class="field"><input class="', '" tabindex="0"', '><button type="button" class="clear"', ' style="', '">', "</button></div>", "</div>"];
2801
+ var $5285d2814d0fac0c$var$_tmpl$ = ["<div", ' style="', '" class="spacer"></div>'],
2802
+ $5285d2814d0fac0c$var$_tmpl$2 = ["<button", ' class="submit major" type="button"', ">", "</button>"],
2803
+ $5285d2814d0fac0c$var$_tmpl$3 = ["<div", ' class="', '" role="search"><!--$-->', "<!--/--><!--$-->", '<!--/--><div class="field"><!--$-->', '<!--/--><input class="', '" tabindex="0"', "><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
2803
2804
  function $5285d2814d0fac0c$export$b94867ecbd698f21({
2804
- search_field_value_: search_field_value_,
2805
+ search_field_value_: [searchFieldValue, setSearchFieldValue],
2805
2806
  input_field_ref_: input_field_ref_,
2806
2807
  field_element_ref_: field_element_ref_,
2807
2808
  submit_query_: submit_query_,
@@ -2826,19 +2827,62 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
2826
2827
  })); // focus field on render
2827
2828
  const owner_of_field_element = $i7OB2$getOwner();
2828
2829
  const isNewModal = BackIcon_[(0, $66db7a014e20802e$export$1ea76ea778b880dd)] === 2;
2829
- return $i7OB2$ssr($5285d2814d0fac0c$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
2830
+ const [backButtonWidthAccessor, setBackButtonWidthAccessor] = $i7OB2$createSignal();
2831
+ const getBackButtonWidth = () => backButtonWidthAccessor()?.();
2832
+ const searchFieldEmpty = $i7OB2$createMemo(() => !searchFieldValue());
2833
+ const BackButton = () => $i7OB2$createComponent((0, $i7OB2$Show), {
2830
2834
  when: on_back_,
2831
2835
  get children() {
2832
- return $i7OB2$ssr($5285d2814d0fac0c$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("aria-label", $i7OB2$escape(i18n_.back_(), true), false), $i7OB2$escape($i7OB2$createComponent(BackIcon_, {})));
2836
+ return $i7OB2$ssrElement("button", $i7OB2$mergeProps({
2837
+ "class": "back",
2838
+ type: "button",
2839
+ get ["aria-label"]() {
2840
+ return i18n_.back_();
2841
+ }
2842
+ }, isNewModal && {
2843
+ ref: el => {
2844
+ setBackButtonWidthAccessor(() => $2449872a62a75a20$export$ebdc3711f7e02ccd(el));
2845
+ $i7OB2$onCleanup(() => setBackButtonWidthAccessor());
2846
+ }
2847
+ }), () => isNewModal ? $i7OB2$escape($i7OB2$createComponent((0, $19976a74d273070d$export$3b621d86b1566b2), {})) : $i7OB2$escape($i7OB2$createComponent(BackIcon_, {})), true);
2833
2848
  }
2834
- })), `query ${!!on_back_ ? "has-adjacent-back-button" : ""}`, $i7OB2$ssrAttribute("aria-label", $i7OB2$escape(i18n_.search_field_field_aria_label_(), true), false) + $i7OB2$ssrAttribute("value", $i7OB2$escape(search_field_value_[0](), true), false) + $i7OB2$ssrAttribute("placeholder", $i7OB2$escape(i18n_.placeholder_text_(), true), false), $i7OB2$ssrAttribute("title", $i7OB2$escape(i18n_.clear_filters_query_sorting_after_submit_(), true), false), $i7OB2$ssrStyle($i7OB2$createMemo(() => search_field_value_[0]() ? "" : "display: none")()), $i7OB2$escape($i7OB2$createComponent((0, $19976a74d273070d$export$3b621d86b1566b2), {})), $i7OB2$ssrElement("button", $i7OB2$mergeProps({
2835
- "class": "submit major",
2836
- type: "button"
2837
- }, () => isNewModal ? {
2838
- tabindex: "-1"
2849
+ });
2850
+ const ClearButton = () => $i7OB2$ssrElement("button", $i7OB2$mergeProps({
2851
+ type: "button",
2852
+ get ["class"]() {
2853
+ return `clear ${searchFieldEmpty() ? "empty" : ""}`;
2854
+ },
2855
+ get style() {
2856
+ return isNewModal || !searchFieldEmpty() ? "" : "display: none";
2857
+ }
2858
+ }, () => searchFieldEmpty() ? {
2859
+ "aria-hidden": "true"
2839
2860
  } : {
2840
- "aria-label": i18n_.search_submit_button_aria_label_()
2841
- }), () => $i7OB2$escape($i7OB2$createComponent((0, $16f0ed5ea30d8d9c$export$82eafebb825fc23f), {})), false));
2861
+ title: i18n_.clear_filters_query_sorting_after_submit_()
2862
+ }), () => isNewModal ? $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
2863
+ get when() {
2864
+ return !searchFieldEmpty();
2865
+ },
2866
+ get fallback() {
2867
+ return $i7OB2$createComponent((0, $16f0ed5ea30d8d9c$export$82eafebb825fc23f), {});
2868
+ },
2869
+ get children() {
2870
+ return $i7OB2$createComponent(BackIcon_, {});
2871
+ }
2872
+ })) : $i7OB2$escape($i7OB2$createComponent((0, $19976a74d273070d$export$3b621d86b1566b2), {})), true);
2873
+ return $i7OB2$ssr($5285d2814d0fac0c$var$_tmpl$3, $i7OB2$ssrHydrationKey(), `search-field ${!!on_back_ ? "in-modal" : ""}`, $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
2874
+ get when() {
2875
+ return getBackButtonWidth() !== undefined && on_back_;
2876
+ },
2877
+ get children() {
2878
+ return $i7OB2$ssr($5285d2814d0fac0c$var$_tmpl$, $i7OB2$ssrHydrationKey(), "width:" + ($i7OB2$escape(getBackButtonWidth(), true) + "px"));
2879
+ }
2880
+ })), !isNewModal && $i7OB2$escape($i7OB2$createComponent(BackButton, {})), isNewModal && $i7OB2$escape($i7OB2$createComponent(ClearButton, {})), `query ${!!on_back_ ? "has-adjacent-back-button" : ""}`, $i7OB2$ssrAttribute("aria-label", $i7OB2$escape(i18n_.search_field_field_aria_label_(), true), false) + $i7OB2$ssrAttribute("value", $i7OB2$escape(searchFieldValue(), true), false) + $i7OB2$ssrAttribute("placeholder", $i7OB2$escape(i18n_.placeholder_text_(), true), false), !isNewModal && $i7OB2$escape($i7OB2$createComponent(ClearButton, {})), isNewModal && $i7OB2$escape($i7OB2$createComponent(BackButton, {})), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
2881
+ when: !isNewModal,
2882
+ get children() {
2883
+ return $i7OB2$ssr($5285d2814d0fac0c$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("aria-label", $i7OB2$escape(i18n_.search_submit_button_aria_label_(), true), false), $i7OB2$escape($i7OB2$createComponent((0, $16f0ed5ea30d8d9c$export$82eafebb825fc23f), {})));
2884
+ }
2885
+ })));
2842
2886
  }
2843
2887
  function $aea1edf92433e81e$export$fe334901e8bebd57() {
2844
2888
  const cleanup_fns = [];
@@ -3002,7 +3046,7 @@ function $42912431795f188e$var$RawClassicSearchModal({
3002
3046
  };
3003
3047
  });
3004
3048
  const search_field = $5285d2814d0fac0c$export$b94867ecbd698f21({
3005
- BackIcon_: () => $i7OB2$createComponent((0, $ffb84ffbf4014982$export$8d8893ffd8aca39a), {}),
3049
+ BackIcon_: (0, $ffb84ffbf4014982$export$8d8893ffd8aca39a),
3006
3050
  input_field_ref_: element => set_input_field(element),
3007
3051
  override_on_enter_: e => on_enter_in_search_field_function?.(e),
3008
3052
  on_back_: close_modal_,
@@ -3018,7 +3062,6 @@ function $42912431795f188e$var$RawClassicSearchModal({
3018
3062
  input_el.setSelectionRange(start, end);
3019
3063
  }
3020
3064
  });
3021
- search_field.classList.add("in-modal");
3022
3065
  const modal_element = $i7OB2$ssr($42912431795f188e$var$_tmpl$3, $i7OB2$ssrHydrationKey(), `depict-search-modal`, `${`body` || ""} ${$i7OB2$escape($i7OB2$escape(random_classname, true), true)}`, $i7OB2$escape(search_field), $i7OB2$escape($i7OB2$createComponent((0, $b7436a6d1fd64e3b$export$b69d0d92862de18b), {
3023
3066
  severity_: "error",
3024
3067
  message_: "Autocomplete/suggestions failed",
@@ -4013,7 +4056,7 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
4013
4056
  };
4014
4057
  const discoverMoreSection = $i7OB2$ssr($500a16dd18ee5a71$var$_tmpl$2, $i7OB2$ssrHydrationKey(), get_search_field_value_() ? $i7OB2$escape(i18n_.modal_view_all_results_()($i7OB2$ssr($500a16dd18ee5a71$var$_tmpl$3, $i7OB2$ssrHydrationKey(), $i7OB2$escape(formattedTotalNumberResults())))) : $i7OB2$escape(i18n_.modal_discover_more_()));
4015
4058
  const search_field = $5285d2814d0fac0c$export$b94867ecbd698f21({
4016
- BackIcon_: () => $i7OB2$createComponent((0, $5cec65dd06ade2c4$export$11e9f390c90a537f), {}),
4059
+ BackIcon_: (0, $5cec65dd06ade2c4$export$11e9f390c90a537f),
4017
4060
  input_field_ref_: element => set_input_field(element),
4018
4061
  override_on_enter_: e => on_enter_in_search_field_function?.(e),
4019
4062
  on_back_: close_modal_,
@@ -4029,7 +4072,6 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
4029
4072
  input_el.setSelectionRange(start, end);
4030
4073
  }
4031
4074
  });
4032
- search_field.classList.add("in-modal");
4033
4075
  if (setSearchFieldOuterWidth_) {
4034
4076
  const resizeObserver = new ResizeObserver($i7OB2$catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));
4035
4077
  resizeObserver.observe(search_field);
@@ -10353,7 +10395,7 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
10353
10395
  const closeDuration_ = pxOffCenter > 100 ? 150 : 100;
10354
10396
  setPollAlignment_(true);
10355
10397
  // Fade out submit button so there aren't two overlapping buttons for a split second
10356
- submitButton_.animate([{
10398
+ submitButton_?.animate([{
10357
10399
  opacity: 1
10358
10400
  }, {
10359
10401
  opacity: 0
@@ -10435,7 +10477,7 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
10435
10477
  duration: closeDuration_,
10436
10478
  fill: "forwards",
10437
10479
  easing: "ease-out"
10438
- }).finished, submitButton_.animate([{
10480
+ }).finished, submitButton_?.animate([{
10439
10481
  opacity: 0
10440
10482
  }, {
10441
10483
  opacity: 1