@depict-ai/ui 4.7.30 → 4.7.31

package/latest/index.cjs

@@ -105,7 +105,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.7.30";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.7.31";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $gVhhF$solidjs.createSignal(false);
   $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.javascript_media_query(media_query, ({
@@ -360,20 +360,22 @@ function $d92f338ba8f9da9b$export$791ef57e62e21c3f({
   return $gVhhF$solidjs.createMemo(() => $d92f338ba8f9da9b$export$92aa5d691d588f3f({
     wrapped_blocks_: get_wrapped_blocks_(),
     n_cols_currently_showing_: n_cols_currently_showing_()
-  }));
+  }).content_blocks_by_index_);
 }
 function $d92f338ba8f9da9b$export$92aa5d691d588f3f({
   wrapped_blocks_: wrapped_blocks_,
   n_cols_currently_showing_: n_cols_currently_showing_
 }) {
   // This computation should be quite cheap since it just moves around things into an array
-  const content_blocks_by_index = [];
+  const content_blocks_by_index_ = [];
   const constructed_block_arrays = new WeakSet();
   // Need to keep track of products displaced by blocks above when mapping rows to indexes in the actual grid
-  const displaced_products = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
+  const displaced_products_ = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
   if (!n_cols_currently_showing_)
     // Nope out of here if we don't know how many columns are showing
-    return content_blocks_by_index;
+    return {
+      content_blocks_by_index_: content_blocks_by_index_
+    };
   for (let i = 0; i < wrapped_blocks_.length; i++) {
     // i = row to show at
     const block = wrapped_blocks_[i];
@@ -390,22 +392,22 @@ function $d92f338ba8f9da9b$export$92aa5d691d588f3f({
     // Calculate displacement of us by content blocks above us
     let displacement_by_added_blocks = 0;
     for (let j = 0; j < i; j++) {
-      const row = displaced_products[j];
+      const row = displaced_products_[j];
       if (row === undefined) continue; // there were no blocks in this row
       let displaced_items_in_row;
       if (typeof row === "number") displaced_items_in_row = row;else {
         displaced_items_in_row = row.filter(item => item).length;
-        displaced_products[j] = displaced_items_in_row;
+        displaced_products_[j] = displaced_items_in_row;
       }
       displacement_by_added_blocks += displaced_items_in_row;
     }
     const index_of_us_in_row = target_index - index_of_first_item_in_row;
-    for (let j = 0; j < index_of_us_in_row; j++) if (displaced_products[i]?.[j])
+    for (let j = 0; j < index_of_us_in_row; j++) if (displaced_products_[i]?.[j])
       // Add blocks in our *current* row to the displacement, but only the ones to our left
       displacement_by_added_blocks++;
     // Add block to output array at the correct index
     const final_target_index = target_index - displacement_by_added_blocks;
-    const existing_block = content_blocks_by_index[final_target_index];
+    const existing_block = content_blocks_by_index_[final_target_index];
     const block_content = block.content;
     // If two blocks want to exist at the same location (can happen, for example if one block wants to be at the end of a row and the other one at the start of the next row) add an array with both
     if (existing_block) {
@@ -414,16 +416,19 @@ function $d92f338ba8f9da9b$export$92aa5d691d588f3f({
         existing_block.push(block_content);else {
         const array = [existing_block, block_content];
         constructed_block_arrays.add(array);
-        content_blocks_by_index[final_target_index] = array;
+        content_blocks_by_index_[final_target_index] = array;
       }
-    } else content_blocks_by_index[final_target_index] = block_content;
+    } else content_blocks_by_index_[final_target_index] = block_content;
     // Update displacement
     for (let j = 0; j < span_rows; j++) {
-      const row = displaced_products[i + j] ||= [];
+      const row = displaced_products_[i + j] ||= [];
       for (let k = index_of_us_in_row; k < index_of_us_in_row + span_columns; k++) row[k] = true;
     }
   }
-  return content_blocks_by_index;
+  return {
+    content_blocks_by_index_: content_blocks_by_index_,
+    displaced_products_: displaced_products_
+  };
 }
 /**
  * Takes a store that contains an array from where index is number of row and value is the result of executing the content block rendering function.
@@ -10224,7 +10229,8 @@ class $e1d6c0f3d89d531c$export$e015ed2f2950f2e3 {
         breadcrumbs: [],
         quick_links: [],
         image_urls: [],
-        failed: true
+        failed: true,
+        content_blocks: []
       }),
       method_: "GET"
     });
@@ -14881,6 +14887,70 @@ function $bb9760b7a8acdc18$export$7af06a63c5a976c9(el, listing_id, i18n_) {
   $gVhhF$solidjs.onCleanup(disconnect);
 }
 $gVhhF$solidjsweb.delegateEvents(["click"]);
+var $32c662f618f5d80d$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<a><img>`),
+  $32c662f618f5d80d$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<a><video loop>`);
+function $32c662f618f5d80d$export$780a853d15174484({
+  contentBlock: contentBlock,
+  router_: router_
+}) {
+  if (contentBlock.content.type === "image") return () => (() => {
+    var _el$ = $gVhhF$solidjsweb.getNextElement($32c662f618f5d80d$var$_tmpl$),
+      _el$2 = _el$.firstChild;
+    $gVhhF$solidjsweb.addEventListener(_el$, "click", $gVhhF$depictaiutilisharedlatest.catchify(ev => router_.navigate_.go_to_({
+      new_url_: contentBlock.content.link,
+      is_replace_: false,
+      event_: ev
+    })), true);
+    _el$2.style.setProperty("width", "100%");
+    _el$2.style.setProperty("height", "100%");
+    _el$2.style.setProperty("object-fit", "cover");
+    _el$2.style.setProperty("position", "absolute");
+    _el$2.style.setProperty("inset", "0");
+    $gVhhF$solidjsweb.effect(_p$ => {
+      var _v$ = contentBlock.content.link,
+        _v$2 = contentBlock.content.url;
+      _v$ !== _p$.e && $gVhhF$solidjsweb.setAttribute(_el$, "href", _p$.e = _v$);
+      _v$2 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$2, "src", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    $gVhhF$solidjsweb.runHydrationEvents();
+    return _el$;
+  })();
+  if (contentBlock.content.type === "video") return () => (() => {
+    var _el$3 = $gVhhF$solidjsweb.getNextElement($32c662f618f5d80d$var$_tmpl$2),
+      _el$4 = _el$3.firstChild;
+    $gVhhF$solidjsweb.addEventListener(_el$3, "click", $gVhhF$depictaiutilisharedlatest.catchify(ev => router_.navigate_.go_to_({
+      new_url_: contentBlock.content.link,
+      is_replace_: false,
+      event_: ev
+    })), true);
+    $gVhhF$solidjsweb.setProperty(_el$4, "controls", false);
+    $gVhhF$solidjsweb.setProperty(_el$4, "muted", true);
+    $gVhhF$solidjsweb.setProperty(_el$4, "autoplay", true);
+    $gVhhF$solidjsweb.setProperty(_el$4, "playsinline", true);
+    _el$4.style.setProperty("width", "100%");
+    _el$4.style.setProperty("height", "100%");
+    _el$4.style.setProperty("object-fit", "cover");
+    _el$4.style.setProperty("position", "absolute");
+    _el$4.style.setProperty("inset", "0");
+    $gVhhF$solidjsweb.effect(_p$ => {
+      var _v$3 = contentBlock.content.link,
+        _v$4 = contentBlock.content.url;
+      _v$3 !== _p$.e && $gVhhF$solidjsweb.setAttribute(_el$3, "href", _p$.e = _v$3);
+      _v$4 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$4, "src", _p$.t = _v$4);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    $gVhhF$solidjsweb.runHydrationEvents();
+    return _el$3;
+  })();
+}
+$gVhhF$solidjsweb.delegateEvents(["click"]);
 var $840d88a04b2d22a7$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=product-count><!$><!/> <!$><!/>`),
   $840d88a04b2d22a7$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>`),
   $840d88a04b2d22a7$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=filter-results-for-one-row><!$><!/><!$><!/>`),
@@ -14976,6 +15046,23 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
   }));
   // Make "Get Listing" request to get quicklinks, breadcrumbs, title, etc
   const [plp_meta] = $gVhhF$solidjs.createResource(meta_query_base, $gVhhF$depictaiutilisharedlatest.catchify(query => depict_api_.get_listing(query)));
+  const contentBlocksByRow = $gVhhF$solidjs.createMemo(() => {
+    if (content_blocks_by_row_()) return content_blocks_by_row_();
+    const content = [];
+    plp_meta()?.content_blocks?.forEach(row => {
+      const contentBlock = {
+        span_columns: row.span_columns,
+        span_rows: row.span_rows,
+        position: row.position,
+        content: $32c662f618f5d80d$export$780a853d15174484({
+          contentBlock: row,
+          router_: router_
+        })
+      };
+      content[row.row] = contentBlock;
+    });
+    return content;
+  });
   const available_sortings_ = $gVhhF$solidjs.createMemo(() => plp_products_()?.sorts?.map(sort => ({
     ...sort,
     order: sort.order ?? "desc"
@@ -15236,7 +15323,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
               product_card_template_: product_card_template_,
               sort_or_filter_open_: sort_or_filter_open_,
               desktop_filter_elements_: desktop_filter_elements_,
-              content_blocks_by_row_: content_blocks_by_row_,
+              content_blocks_by_row_: contentBlocksByRow,
               ConfiguredScrollStatus_: ConfiguredScrollStatus_,
               id_currently_querying_for_: id_to_query_for_,
               no_results_options_: {

package/latest/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.7.30";
+export const version = "4.7.31";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -93,7 +93,8 @@ export type ContentBlocksByRow = (undefined | ContentBlock)[];
 /**
  * Does pure calculations where to put each of the finished wrapped content blocks in the elements in the grid (input is by row). You need to cap span_columns of the blocks to the columns available before passing them to this function.
  * Also used in the portal in react.
- * @returns an array where index is index of the blocks in the "displays array" and value is the content block (elements) to show at that index
+ * @returns content_blocks_by_index_: an array where index is index of the blocks in the "displays array" and value is the content block (elements) to show at that index.
+ * displaced_products_: internal state that can be used to figure out if there's parts of a content block on a row, see the comment inside this function
  */
 export function remap_blocks_to_index<T = () => JSX.Element | Promise<JSX.Element>>({
   wrapped_blocks_,
@@ -106,7 +107,13 @@ export function remap_blocks_to_index<T = () => JSX.Element | Promise<JSX.Elemen
     content: T;
   })[];
   n_cols_currently_showing_: number | null;
-}): JSX.Element[];
+}): {
+  content_blocks_by_index_: JSX.Element[];
+  readonly displaced_products_?: undefined;
+} | {
+  readonly content_blocks_by_index_: JSX.Element[];
+  readonly displaced_products_: (number | (true | undefined)[])[];
+};
 /**
  * Returns a set containing the element where every element currently touching the screen started touching it.
  */
@@ -1477,7 +1484,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;
@@ -1556,5 +1563,5 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
   filterModalParent_?: HTMLElement | ShadowRoot;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";

package/latest/index.js

@@ -7,7 +7,7 @@ import { dlog as $9HbP8$dlog, catchify as $9HbP8$catchify, ListenableSet as $9Hb
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.7.30";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.7.31";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $9HbP8$createSignal(false);
   $9HbP8$onCleanup($9HbP8$javascript_media_query(media_query, ({
@@ -262,20 +262,22 @@ function $e7a7eb102ddc0c79$export$791ef57e62e21c3f({
   return $9HbP8$createMemo(() => $e7a7eb102ddc0c79$export$92aa5d691d588f3f({
     wrapped_blocks_: get_wrapped_blocks_(),
     n_cols_currently_showing_: n_cols_currently_showing_()
-  }));
+  }).content_blocks_by_index_);
 }
 function $e7a7eb102ddc0c79$export$92aa5d691d588f3f({
   wrapped_blocks_: wrapped_blocks_,
   n_cols_currently_showing_: n_cols_currently_showing_
 }) {
   // This computation should be quite cheap since it just moves around things into an array
-  const content_blocks_by_index = [];
+  const content_blocks_by_index_ = [];
   const constructed_block_arrays = new WeakSet();
   // Need to keep track of products displaced by blocks above when mapping rows to indexes in the actual grid
-  const displaced_products = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
+  const displaced_products_ = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
   if (!n_cols_currently_showing_)
     // Nope out of here if we don't know how many columns are showing
-    return content_blocks_by_index;
+    return {
+      content_blocks_by_index_: content_blocks_by_index_
+    };
   for (let i = 0; i < wrapped_blocks_.length; i++) {
     // i = row to show at
     const block = wrapped_blocks_[i];
@@ -292,22 +294,22 @@ function $e7a7eb102ddc0c79$export$92aa5d691d588f3f({
     // Calculate displacement of us by content blocks above us
     let displacement_by_added_blocks = 0;
     for (let j = 0; j < i; j++) {
-      const row = displaced_products[j];
+      const row = displaced_products_[j];
       if (row === undefined) continue; // there were no blocks in this row
       let displaced_items_in_row;
       if (typeof row === "number") displaced_items_in_row = row;else {
         displaced_items_in_row = row.filter(item => item).length;
-        displaced_products[j] = displaced_items_in_row;
+        displaced_products_[j] = displaced_items_in_row;
       }
       displacement_by_added_blocks += displaced_items_in_row;
     }
     const index_of_us_in_row = target_index - index_of_first_item_in_row;
-    for (let j = 0; j < index_of_us_in_row; j++) if (displaced_products[i]?.[j])
+    for (let j = 0; j < index_of_us_in_row; j++) if (displaced_products_[i]?.[j])
       // Add blocks in our *current* row to the displacement, but only the ones to our left
       displacement_by_added_blocks++;
     // Add block to output array at the correct index
     const final_target_index = target_index - displacement_by_added_blocks;
-    const existing_block = content_blocks_by_index[final_target_index];
+    const existing_block = content_blocks_by_index_[final_target_index];
     const block_content = block.content;
     // If two blocks want to exist at the same location (can happen, for example if one block wants to be at the end of a row and the other one at the start of the next row) add an array with both
     if (existing_block) {
@@ -316,16 +318,19 @@ function $e7a7eb102ddc0c79$export$92aa5d691d588f3f({
         existing_block.push(block_content);else {
         const array = [existing_block, block_content];
         constructed_block_arrays.add(array);
-        content_blocks_by_index[final_target_index] = array;
+        content_blocks_by_index_[final_target_index] = array;
       }
-    } else content_blocks_by_index[final_target_index] = block_content;
+    } else content_blocks_by_index_[final_target_index] = block_content;
     // Update displacement
     for (let j = 0; j < span_rows; j++) {
-      const row = displaced_products[i + j] ||= [];
+      const row = displaced_products_[i + j] ||= [];
       for (let k = index_of_us_in_row; k < index_of_us_in_row + span_columns; k++) row[k] = true;
     }
   }
-  return content_blocks_by_index;
+  return {
+    content_blocks_by_index_: content_blocks_by_index_,
+    displaced_products_: displaced_products_
+  };
 }
 /**
  * Takes a store that contains an array from where index is number of row and value is the result of executing the content block rendering function.
@@ -10126,7 +10131,8 @@ class $7fa23e2a0079eca4$export$e015ed2f2950f2e3 {
         breadcrumbs: [],
         quick_links: [],
         image_urls: [],
-        failed: true
+        failed: true,
+        content_blocks: []
       }),
       method_: "GET"
     });
@@ -14783,6 +14789,70 @@ function $cc6f5b69378cd164$export$7af06a63c5a976c9(el, listing_id, i18n_) {
   $9HbP8$onCleanup(disconnect);
 }
 $9HbP8$delegateEvents(["click"]);
+var $f916989c4b1be9f7$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<a><img>`),
+  $f916989c4b1be9f7$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<a><video loop>`);
+function $f916989c4b1be9f7$export$780a853d15174484({
+  contentBlock: contentBlock,
+  router_: router_
+}) {
+  if (contentBlock.content.type === "image") return () => (() => {
+    var _el$ = $9HbP8$getNextElement($f916989c4b1be9f7$var$_tmpl$),
+      _el$2 = _el$.firstChild;
+    $9HbP8$addEventListener(_el$, "click", $9HbP8$catchify(ev => router_.navigate_.go_to_({
+      new_url_: contentBlock.content.link,
+      is_replace_: false,
+      event_: ev
+    })), true);
+    _el$2.style.setProperty("width", "100%");
+    _el$2.style.setProperty("height", "100%");
+    _el$2.style.setProperty("object-fit", "cover");
+    _el$2.style.setProperty("position", "absolute");
+    _el$2.style.setProperty("inset", "0");
+    $9HbP8$effect(_p$ => {
+      var _v$ = contentBlock.content.link,
+        _v$2 = contentBlock.content.url;
+      _v$ !== _p$.e && $9HbP8$setAttribute(_el$, "href", _p$.e = _v$);
+      _v$2 !== _p$.t && $9HbP8$setAttribute(_el$2, "src", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    $9HbP8$runHydrationEvents();
+    return _el$;
+  })();
+  if (contentBlock.content.type === "video") return () => (() => {
+    var _el$3 = $9HbP8$getNextElement($f916989c4b1be9f7$var$_tmpl$2),
+      _el$4 = _el$3.firstChild;
+    $9HbP8$addEventListener(_el$3, "click", $9HbP8$catchify(ev => router_.navigate_.go_to_({
+      new_url_: contentBlock.content.link,
+      is_replace_: false,
+      event_: ev
+    })), true);
+    $9HbP8$setProperty(_el$4, "controls", false);
+    $9HbP8$setProperty(_el$4, "muted", true);
+    $9HbP8$setProperty(_el$4, "autoplay", true);
+    $9HbP8$setProperty(_el$4, "playsinline", true);
+    _el$4.style.setProperty("width", "100%");
+    _el$4.style.setProperty("height", "100%");
+    _el$4.style.setProperty("object-fit", "cover");
+    _el$4.style.setProperty("position", "absolute");
+    _el$4.style.setProperty("inset", "0");
+    $9HbP8$effect(_p$ => {
+      var _v$3 = contentBlock.content.link,
+        _v$4 = contentBlock.content.url;
+      _v$3 !== _p$.e && $9HbP8$setAttribute(_el$3, "href", _p$.e = _v$3);
+      _v$4 !== _p$.t && $9HbP8$setAttribute(_el$4, "src", _p$.t = _v$4);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    $9HbP8$runHydrationEvents();
+    return _el$3;
+  })();
+}
+$9HbP8$delegateEvents(["click"]);
 var $df5d81d0fe61ff21$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=product-count><!$><!/> <!$><!/>`),
   $df5d81d0fe61ff21$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<div>`),
   $df5d81d0fe61ff21$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=filter-results-for-one-row><!$><!/><!$><!/>`),
@@ -14878,6 +14948,23 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
   }));
   // Make "Get Listing" request to get quicklinks, breadcrumbs, title, etc
   const [plp_meta] = $9HbP8$createResource(meta_query_base, $9HbP8$catchify(query => depict_api_.get_listing(query)));
+  const contentBlocksByRow = $9HbP8$createMemo(() => {
+    if (content_blocks_by_row_()) return content_blocks_by_row_();
+    const content = [];
+    plp_meta()?.content_blocks?.forEach(row => {
+      const contentBlock = {
+        span_columns: row.span_columns,
+        span_rows: row.span_rows,
+        position: row.position,
+        content: $f916989c4b1be9f7$export$780a853d15174484({
+          contentBlock: row,
+          router_: router_
+        })
+      };
+      content[row.row] = contentBlock;
+    });
+    return content;
+  });
   const available_sortings_ = $9HbP8$createMemo(() => plp_products_()?.sorts?.map(sort => ({
     ...sort,
     order: sort.order ?? "desc"
@@ -15138,7 +15225,7 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
               product_card_template_: product_card_template_,
               sort_or_filter_open_: sort_or_filter_open_,
               desktop_filter_elements_: desktop_filter_elements_,
-              content_blocks_by_row_: content_blocks_by_row_,
+              content_blocks_by_row_: contentBlocksByRow,
               ConfiguredScrollStatus_: ConfiguredScrollStatus_,
               id_currently_querying_for_: id_to_query_for_,
               no_results_options_: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.7.30",
+  "version": "4.7.31",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",

package/server/ES10/index.cjs

@@ -111,7 +111,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.7.30";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.7.31";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $3hooq$solidjs.createSignal(false);
   $3hooq$solidjs.onCleanup($3hooq$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -216,7 +216,7 @@ function $f8f375d6245ffff2$export$791ef57e62e21c3f(_ref) {
   return $3hooq$solidjs.createMemo(() => $f8f375d6245ffff2$export$92aa5d691d588f3f({
     wrapped_blocks_: get_wrapped_blocks_(),
     n_cols_currently_showing_: n_cols_currently_showing_()
-  }));
+  }).content_blocks_by_index_);
 }
 function $f8f375d6245ffff2$export$92aa5d691d588f3f(_ref2) {
   let {
@@ -224,13 +224,15 @@ function $f8f375d6245ffff2$export$92aa5d691d588f3f(_ref2) {
     n_cols_currently_showing_: n_cols_currently_showing_
   } = _ref2;
   // This computation should be quite cheap since it just moves around things into an array
-  const content_blocks_by_index = [];
+  const content_blocks_by_index_ = [];
   const constructed_block_arrays = new WeakSet();
   // Need to keep track of products displaced by blocks above when mapping rows to indexes in the actual grid
-  const displaced_products = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
+  const displaced_products_ = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
   if (!n_cols_currently_showing_)
     // Nope out of here if we don't know how many columns are showing
-    return content_blocks_by_index;
+    return {
+      content_blocks_by_index_: content_blocks_by_index_
+    };
   for (let i = 0; i < wrapped_blocks_.length; i++) {
     // i = row to show at
     const block = wrapped_blocks_[i];
@@ -247,25 +249,25 @@ function $f8f375d6245ffff2$export$92aa5d691d588f3f(_ref2) {
     // Calculate displacement of us by content blocks above us
     let displacement_by_added_blocks = 0;
     for (let j = 0; j < i; j++) {
-      const row = displaced_products[j];
+      const row = displaced_products_[j];
       if (row === undefined) continue; // there were no blocks in this row
       let displaced_items_in_row;
       if (typeof row === "number") displaced_items_in_row = row;else {
         displaced_items_in_row = row.filter(item => item).length;
-        displaced_products[j] = displaced_items_in_row;
+        displaced_products_[j] = displaced_items_in_row;
       }
       displacement_by_added_blocks += displaced_items_in_row;
     }
     const index_of_us_in_row = target_index - index_of_first_item_in_row;
     for (let j = 0; j < index_of_us_in_row; j++) {
-      var _displaced_products$i;
-      if ((_displaced_products$i = displaced_products[i]) !== null && _displaced_products$i !== void 0 && _displaced_products$i[j])
+      var _displaced_products_$;
+      if ((_displaced_products_$ = displaced_products_[i]) !== null && _displaced_products_$ !== void 0 && _displaced_products_$[j])
         // Add blocks in our *current* row to the displacement, but only the ones to our left
         displacement_by_added_blocks++;
     }
     // Add block to output array at the correct index
     const final_target_index = target_index - displacement_by_added_blocks;
-    const existing_block = content_blocks_by_index[final_target_index];
+    const existing_block = content_blocks_by_index_[final_target_index];
     const block_content = block.content;
     // If two blocks want to exist at the same location (can happen, for example if one block wants to be at the end of a row and the other one at the start of the next row) add an array with both
     if (existing_block) {
@@ -274,17 +276,20 @@ function $f8f375d6245ffff2$export$92aa5d691d588f3f(_ref2) {
         existing_block.push(block_content);else {
         const array = [existing_block, block_content];
         constructed_block_arrays.add(array);
-        content_blocks_by_index[final_target_index] = array;
+        content_blocks_by_index_[final_target_index] = array;
       }
-    } else content_blocks_by_index[final_target_index] = block_content;
+    } else content_blocks_by_index_[final_target_index] = block_content;
     // Update displacement
     for (let j = 0; j < span_rows; j++) {
       var _ref3;
-      const row = displaced_products[_ref3 = i + j] || (displaced_products[_ref3] = []);
+      const row = displaced_products_[_ref3 = i + j] || (displaced_products_[_ref3] = []);
       for (let k = index_of_us_in_row; k < index_of_us_in_row + span_columns; k++) row[k] = true;
     }
   }
-  return content_blocks_by_index;
+  return {
+    content_blocks_by_index_: content_blocks_by_index_,
+    displaced_products_: displaced_products_
+  };
 }
 /**
  * Takes a store that contains an array from where index is number of row and value is the result of executing the content block rendering function.
@@ -8485,7 +8490,8 @@ class $e270e9f953fcbc58$export$e015ed2f2950f2e3 {
         breadcrumbs: [],
         quick_links: [],
         image_urls: [],
-        failed: true
+        failed: true,
+        content_blocks: []
       }),
       method_: "GET"
     });
@@ -13290,6 +13296,16 @@ function $8b366fdb0c76194d$var$clear_if_opened_new_tab_with_sideways_url_params_
   });
   tracking_function_for_plp_results(plp_results_);
 }
+var $c19709057a32b2e7$var$_tmpl$ = ["<a", "><img", ' style="', '"></a>'],
+  $c19709057a32b2e7$var$_tmpl$2 = ["<a", "><video", ' muted="" autoplay="" playsinline="" loop style="', '"></video></a>'];
+function $c19709057a32b2e7$export$780a853d15174484(_ref) {
+  let {
+    contentBlock: contentBlock,
+    router_: router_
+  } = _ref;
+  if (contentBlock.content.type === "image") return () => $3hooq$solidjsweb.ssr($c19709057a32b2e7$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey() + $3hooq$solidjsweb.ssrAttribute("href", $3hooq$solidjsweb.escape(contentBlock.content.link, true), false), $3hooq$solidjsweb.ssrAttribute("src", $3hooq$solidjsweb.escape(contentBlock.content.url, true), false), "width:100%;height:100%;object-fit:cover;position:absolute;inset:0");
+  if (contentBlock.content.type === "video") return () => $3hooq$solidjsweb.ssr($c19709057a32b2e7$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey() + $3hooq$solidjsweb.ssrAttribute("href", $3hooq$solidjsweb.escape(contentBlock.content.link, true), false), $3hooq$solidjsweb.ssrAttribute("src", $3hooq$solidjsweb.escape(contentBlock.content.url, true), false), "width:100%;height:100%;object-fit:cover;position:absolute;inset:0");
+}
 var $ede6c70ecdca46fe$var$_tmpl$ = ["<div", ' class="product-count"><!--$-->', "<!--/--> <!--$-->", "<!--/--></div>"],
   $ede6c70ecdca46fe$var$_tmpl$2 = ["<div", "></div>"],
   $ede6c70ecdca46fe$var$_tmpl$3 = ["<div", ' class="filter-results-for-one-row"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
@@ -13386,6 +13402,24 @@ function $ede6c70ecdca46fe$export$f7d2f673fc2f091d(_ref) {
   }));
   // Make "Get Listing" request to get quicklinks, breadcrumbs, title, etc
   const [plp_meta] = $3hooq$solidjs.createResource(meta_query_base, $3hooq$depictaiutilisharedlatest.catchify(query => depict_api_.get_listing(query)));
+  const contentBlocksByRow = $3hooq$solidjs.createMemo(() => {
+    var _plp_meta, _plp_meta$content_blo;
+    if (content_blocks_by_row_()) return content_blocks_by_row_();
+    const content = [];
+    (_plp_meta = plp_meta()) === null || _plp_meta === void 0 || (_plp_meta$content_blo = _plp_meta.content_blocks) === null || _plp_meta$content_blo === void 0 || _plp_meta$content_blo.forEach(row => {
+      const contentBlock = {
+        span_columns: row.span_columns,
+        span_rows: row.span_rows,
+        position: row.position,
+        content: $c19709057a32b2e7$export$780a853d15174484({
+          contentBlock: row,
+          router_: router_
+        })
+      };
+      content[row.row] = contentBlock;
+    });
+    return content;
+  });
   const available_sortings_ = $3hooq$solidjs.createMemo(() => {
     var _plp_products_, _plp_products_$sorts;
     return (_plp_products_ = plp_products_()) === null || _plp_products_ === void 0 ? void 0 : (_plp_products_$sorts = _plp_products_.sorts) === null || _plp_products_$sorts === void 0 ? void 0 : _plp_products_$sorts.map(sort => {
@@ -13401,13 +13435,13 @@ function $ede6c70ecdca46fe$export$f7d2f673fc2f091d(_ref) {
     return (_plp_products_2 = plp_products_()) === null || _plp_products_2 === void 0 ? void 0 : _plp_products_2.filters;
   });
   const title = $3hooq$solidjs.createMemo(() => {
-    var _plp_meta;
-    return (_plp_meta = plp_meta()) === null || _plp_meta === void 0 ? void 0 : _plp_meta.title;
+    var _plp_meta2;
+    return (_plp_meta2 = plp_meta()) === null || _plp_meta2 === void 0 ? void 0 : _plp_meta2.title;
   });
   const crumb_data_ = $ede6c70ecdca46fe$var$add_us_to_crumbs(plp_meta);
   const quicklinks_data_ = $3hooq$solidjs.createMemo(() => {
-    var _plp_meta2;
-    return (_plp_meta2 = plp_meta()) === null || _plp_meta2 === void 0 ? void 0 : _plp_meta2.quick_links;
+    var _plp_meta3;
+    return (_plp_meta3 = plp_meta()) === null || _plp_meta3 === void 0 ? void 0 : _plp_meta3.quick_links;
   });
   const [sort_or_filter_open_, set_sort_or_filter_open_] = $3hooq$solidjs.createSignal(false);
   const [desktop_filter_elements_, set_desktop_filter_elements] = $3hooq$solidjs.createSignal();
@@ -13632,7 +13666,7 @@ function $ede6c70ecdca46fe$export$f7d2f673fc2f091d(_ref) {
             product_card_template_: product_card_template_,
             sort_or_filter_open_: sort_or_filter_open_,
             desktop_filter_elements_: desktop_filter_elements_,
-            content_blocks_by_row_: content_blocks_by_row_,
+            content_blocks_by_row_: contentBlocksByRow,
             ConfiguredScrollStatus_: ConfiguredScrollStatus_,
             id_currently_querying_for_: id_to_query_for_,
             no_results_options_: {
@@ -13673,8 +13707,8 @@ function $ede6c70ecdca46fe$export$f7d2f673fc2f091d(_ref) {
 function $ede6c70ecdca46fe$var$add_us_to_crumbs(plp_meta) {
   const href_accessor = $3hooq$depictaiutilisharedlatest.use_href_accessor();
   return $3hooq$solidjs.createMemo(() => {
-    var _plp_meta3;
-    const api_value = (_plp_meta3 = plp_meta()) === null || _plp_meta3 === void 0 ? void 0 : _plp_meta3.breadcrumbs;
+    var _plp_meta4;
+    const api_value = (_plp_meta4 = plp_meta()) === null || _plp_meta4 === void 0 ? void 0 : _plp_meta4.breadcrumbs;
     if (!api_value) return api_value;
     return [...api_value, $3hooq$solidjs.mergeProps(plp_meta(), {
       get page_url() {