@depict-ai/ui 4.7.28 → 4.7.30

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.
@@ -1,8 +1,8 @@
1
1
  var $5vyXB$depictaiutilishared = require("@depict-ai/utilishared/latest");
2
- var $5vyXB$depictaiutilisharedlatest = require("@depict-ai/utilishared/latest");
3
- var $5vyXB$solidjs = require("solid-js");
4
2
  var $5vyXB$solidjsweb = require("solid-js/web");
3
+ var $5vyXB$solidjs = require("solid-js");
5
4
  var $5vyXB$solidjsstore = require("solid-js/store");
5
+ var $5vyXB$depictaiutilisharedlatest = require("@depict-ai/utilishared/latest");
6
6
  require("../../multi_import_deduplicator.cjs").register_es_version("ui", "latest");
7
7
  function $parcel$export(e, n, v, s) {
8
8
  Object.defineProperty(e, n, {
@@ -12,6 +12,7 @@ function $parcel$export(e, n, v, s) {
12
12
  configurable: true
13
13
  });
14
14
  }
15
+ $parcel$export(module.exports, "remap_blocks_to_index", () => $d92f338ba8f9da9b$export$92aa5d691d588f3f);
15
16
  $parcel$export(module.exports, "useMobileHover", () => $8bf678c45948a297$export$d4d96868197be50e);
16
17
  $parcel$export(module.exports, "useVisibilityState", () => $55cbacb79d3e0cea$export$54299a3c81f5425);
17
18
  $parcel$export(module.exports, "useSlidableInformation", () => $a0e53f99354809d9$export$eaa625fb39439e37);
@@ -104,7 +105,232 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
104
105
  $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
105
106
  $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
106
107
  /*! Depict.ai search and product listing SDK */
107
- const $b757f75811f3261f$export$83d89fbfd8236492 = "4.7.28";
108
+ const $b757f75811f3261f$export$83d89fbfd8236492 = "4.7.30";
109
+ function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
110
+ const signal = $5vyXB$solidjs.createSignal(false);
111
+ $5vyXB$solidjs.onCleanup($5vyXB$depictaiutilishared.javascript_media_query(media_query, ({
112
+ matches: matches
113
+ }) => signal[1](matches)).remove);
114
+ return signal[0];
115
+ }
116
+ function $17d06b3bcb035500$export$a79e666719b3647c(cols_at_size_) {
117
+ const size_active = $5vyXB$solidjs.createMemo(() => cols_at_size_().map(([n_cols, min_width, max_width]) => {
118
+ const media_query = $5vyXB$depictaiutilishared.layout_media_query_header(min_width, max_width).replaceAll("@media", "");
119
+ const matches = $b54e6192d0caa293$export$d9f36cf74e24d595(media_query);
120
+ return [matches, n_cols];
121
+ }));
122
+ const n_cols_currently_showing = $5vyXB$solidjs.createMemo(() => {
123
+ try {
124
+ const [, n_cols_currently_showing] = size_active().find(([media_query]) => media_query());
125
+ return n_cols_currently_showing;
126
+ } catch (e) {
127
+ $5vyXB$depictaiutilishared.dwarn("No active size found in columnsAtSize - can't render content blocks or looks");
128
+ return null;
129
+ }
130
+ });
131
+ return n_cols_currently_showing;
132
+ }
133
+ var $9fe9883b1d8ecccc$var$_tmpl$ = ["<span", ' class="', '" style="', '"></span>'];
134
+ function $9fe9883b1d8ecccc$export$acb3eaade4b23afd(props) {
135
+ // Work around https://github.com/solidjs/solid/issues/1980
136
+ return $5vyXB$solidjsweb.ssr($9fe9883b1d8ecccc$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `${$5vyXB$solidjsweb.escape(props.class, true) || ""} depict-placeholder`, $5vyXB$solidjsweb.ssrStyle(props.style));
137
+ }
138
+ function $3bc4a89b971a3af5$export$3f37af283f8fb843(props) {
139
+ const style = $5vyXB$solidjs.createMemo(() => {
140
+ const {
141
+ style: style,
142
+ height: height,
143
+ width: width,
144
+ aspectRatio: aspectRatio
145
+ } = props;
146
+ const is_image = aspectRatio != undefined;
147
+ const size_data = is_image ? {
148
+ width: "100%",
149
+ "padding-bottom": `calc(calc(1 / ${aspectRatio}) * 100%)`
150
+ } : {
151
+ width: width,
152
+ height: height
153
+ };
154
+ return {
155
+ display: "block",
156
+ ...(style || {}),
157
+ ...size_data
158
+ };
159
+ });
160
+ return $5vyXB$solidjsweb.createComponent((0, $9fe9883b1d8ecccc$export$acb3eaade4b23afd), {
161
+ get style() {
162
+ return style();
163
+ },
164
+ get ["class"]() {
165
+ return props.class;
166
+ }
167
+ });
168
+ }
169
+ var $d92f338ba8f9da9b$var$_tmpl$ = ["<div", ' class="content-block-wrapper" style="', '">', "</div>"];
170
+ function $d92f338ba8f9da9b$export$791ef57e62e21c3f({
171
+ content_blocks_: incoming_content_blocks,
172
+ cols_at_size_: cols_at_size_,
173
+ set_top_row_shortened_by_: set_top_row_shortened_by_
174
+ }) {
175
+ // these are by row
176
+ const [content_blocks, set_content_blocks] = $5vyXB$solidjsstore.createStore([]);
177
+ const n_cols_currently_showing_ = $17d06b3bcb035500$export$a79e666719b3647c(cols_at_size_);
178
+ $5vyXB$solidjs.createEffect(() => {
179
+ const incoming_value = incoming_content_blocks();
180
+ if (!incoming_value) {
181
+ set_content_blocks([]);
182
+ return;
183
+ }
184
+ set_content_blocks($5vyXB$solidjsstore.reconcile(incoming_value, {
185
+ key: "content"
186
+ })); // key: Make moving blocks faster, see https://github.com/solidjs/solid/issues/1925#issuecomment-1769671596
187
+ });
188
+
189
+ const get_wrapped_blocks_ = $d92f338ba8f9da9b$var$wrap_blocks_in_div(content_blocks, n_cols_currently_showing_);
190
+ $5vyXB$solidjs.createComputed(() => {
191
+ // Update our styling if a content block forces some items that should be in the top row into a lower one, so we can generate margin-top declarations for them
192
+ const top_row_block = get_wrapped_blocks_()[0];
193
+ const blocks_in_top_row_taken = top_row_block?.span_columns;
194
+ if (blocks_in_top_row_taken == undefined) {
195
+ // Fall back to zero if no content block in top row, since then no blocks in top row are taken
196
+ set_top_row_shortened_by_(0);
197
+ return;
198
+ }
199
+ set_top_row_shortened_by_(blocks_in_top_row_taken - 1); // minus one because the content block wrapper also is an element
200
+ });
201
+
202
+ return $5vyXB$solidjs.createMemo(() => $d92f338ba8f9da9b$export$92aa5d691d588f3f({
203
+ wrapped_blocks_: get_wrapped_blocks_(),
204
+ n_cols_currently_showing_: n_cols_currently_showing_()
205
+ }));
206
+ }
207
+ function $d92f338ba8f9da9b$export$92aa5d691d588f3f({
208
+ wrapped_blocks_: wrapped_blocks_,
209
+ n_cols_currently_showing_: n_cols_currently_showing_
210
+ }) {
211
+ // This computation should be quite cheap since it just moves around things into an array
212
+ const content_blocks_by_index = [];
213
+ const constructed_block_arrays = new WeakSet();
214
+ // Need to keep track of products displaced by blocks above when mapping rows to indexes in the actual grid
215
+ 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
216
+ if (!n_cols_currently_showing_)
217
+ // Nope out of here if we don't know how many columns are showing
218
+ return content_blocks_by_index;
219
+ for (let i = 0; i < wrapped_blocks_.length; i++) {
220
+ // i = row to show at
221
+ const block = wrapped_blocks_[i];
222
+ if (!block) continue; // Array can have holes/not defined places
223
+ const index_of_first_item_in_row = i * n_cols_currently_showing_;
224
+ const index_of_last_item_in_row = index_of_first_item_in_row + n_cols_currently_showing_;
225
+ const {
226
+ span_rows: span_rows,
227
+ position: position,
228
+ span_columns: span_columns
229
+ } = block; // span columns is already capped in the block wrapping step (wrap_blocks_in_div)
230
+ let target_index;
231
+ if (position === "left") target_index = index_of_first_item_in_row;else if (position === "right") target_index = index_of_last_item_in_row - span_columns;else if (position === "center") target_index = index_of_first_item_in_row + Math.floor((n_cols_currently_showing_ - span_columns) / 2);else throw new Error("Invalid position for content block - must be left, right or center: " + JSON.stringify(position));
232
+ // Calculate displacement of us by content blocks above us
233
+ let displacement_by_added_blocks = 0;
234
+ for (let j = 0; j < i; j++) {
235
+ const row = displaced_products[j];
236
+ if (row === undefined) continue; // there were no blocks in this row
237
+ let displaced_items_in_row;
238
+ if (typeof row === "number") displaced_items_in_row = row;else {
239
+ displaced_items_in_row = row.filter(item => item).length;
240
+ displaced_products[j] = displaced_items_in_row;
241
+ }
242
+ displacement_by_added_blocks += displaced_items_in_row;
243
+ }
244
+ const index_of_us_in_row = target_index - index_of_first_item_in_row;
245
+ for (let j = 0; j < index_of_us_in_row; j++) if (displaced_products[i]?.[j])
246
+ // Add blocks in our *current* row to the displacement, but only the ones to our left
247
+ displacement_by_added_blocks++;
248
+ // Add block to output array at the correct index
249
+ const final_target_index = target_index - displacement_by_added_blocks;
250
+ const existing_block = content_blocks_by_index[final_target_index];
251
+ const block_content = block.content;
252
+ // 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
253
+ if (existing_block) {
254
+ if (constructed_block_arrays.has(existing_block))
255
+ // Only push to arrays we have created to not create funky bugs when there's an array in JSX.Element
256
+ existing_block.push(block_content);else {
257
+ const array = [existing_block, block_content];
258
+ constructed_block_arrays.add(array);
259
+ content_blocks_by_index[final_target_index] = array;
260
+ }
261
+ } else content_blocks_by_index[final_target_index] = block_content;
262
+ // Update displacement
263
+ for (let j = 0; j < span_rows; j++) {
264
+ const row = displaced_products[i + j] ||= [];
265
+ for (let k = index_of_us_in_row; k < index_of_us_in_row + span_columns; k++) row[k] = true;
266
+ }
267
+ }
268
+ return content_blocks_by_index;
269
+ }
270
+ /**
271
+ * 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.
272
+ * Then renders the content and wraps it into a div with the correct styling.
273
+ * Also caps span_columns to max available columns
274
+ */
275
+ function $d92f338ba8f9da9b$var$wrap_blocks_in_div(rendered_content_blocks, max_span_columns) {
276
+ const get_wrapped_blocks = $5vyXB$solidjs.mapArray(() => rendered_content_blocks, block => {
277
+ if (!block) return;
278
+ const final_span_columns = $5vyXB$solidjs.createMemo(() => Math.min(block.span_columns, max_span_columns() ?? Infinity));
279
+ // If the item spans an entire row, limit the height to 1 row since there's no concept of "rows" if there are no products beside the block
280
+ const final_span_rows = $5vyXB$solidjs.createMemo(() => final_span_columns() === max_span_columns() ? 1 : block.span_rows);
281
+ const [rendering_delayed, set_rendering_delayed_] = $5vyXB$solidjs.createSignal(true);
282
+ const content = $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
283
+ get when() {
284
+ return !rendering_delayed();
285
+ },
286
+ get children() {
287
+ return $5vyXB$solidjsweb.ssr($d92f338ba8f9da9b$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), "grid-column:" + `span ${$5vyXB$solidjsweb.escape(final_span_columns(), true)}` + (";grid-row:" + `span ${$5vyXB$solidjsweb.escape(final_span_rows(), true)}`) + (";spans_columns_variable_name:" + $5vyXB$solidjsweb.escape(final_span_columns(), true)), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent($d92f338ba8f9da9b$var$RenderContent, {
288
+ get content() {
289
+ return block.content;
290
+ }
291
+ })));
292
+ }
293
+ });
294
+ return $5vyXB$solidjs.mergeProps(block, {
295
+ // Create content divs for the blocks with as much fine-grained diffing as possible?
296
+ content: () => {
297
+ // Sneaky on-demand rendering, so we don't render more blocks than we can show: we have the rendered value here and don't return a function that renders because if our block would be moved around we'd be guaranteed to re-render
298
+ // However, no need to count products to know if we should render: the <For> loops in Placeholders and render_displays will only call this function if there's actually a product here that wants to display this block
299
+ set_rendering_delayed_(false);
300
+ return content;
301
+ },
302
+ get span_columns() {
303
+ // Cap max width of block to the number of columns available, for everyone downstream
304
+ return final_span_columns();
305
+ },
306
+ get span_rows() {
307
+ return final_span_rows();
308
+ }
309
+ });
310
+ });
311
+ return get_wrapped_blocks;
312
+ }
313
+ /**
314
+ * Basically adds support for async content block functions and shows a rudimentary placeholder if rendering is delayed. Required due to react having a rendering delay.
315
+ */
316
+ function $d92f338ba8f9da9b$var$RenderContent(props) {
317
+ const [resource] = $5vyXB$solidjs.createResource(() => props.content,
318
+ // Could be reactive
319
+ fn => fn());
320
+ $5vyXB$solidjs.createEffect(() => {
321
+ if (resource.error) console.error("Error in content block rendering", resource.error);
322
+ });
323
+ // The suspense is for when there's an async content block (which we have to support due to react having a rendering delay) so that we can show some height while it's loading (should kinda never be visible)
324
+ return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Suspense), {
325
+ get fallback() {
326
+ return $5vyXB$solidjsweb.createComponent((0, $3bc4a89b971a3af5$export$3f37af283f8fb843), {
327
+ width: "100%",
328
+ height: "max(100%, 400px)"
329
+ });
330
+ },
331
+ children: resource
332
+ });
333
+ }
108
334
  let $8bf678c45948a297$var$elementsHoveredSignal;
109
335
  let $8bf678c45948a297$var$consumersSignal;
110
336
  function $8bf678c45948a297$export$d4d96868197be50e() {
@@ -1009,49 +1235,6 @@ function $84798aaa863a4909$export$e68cff63f76bd15b(props) {
1009
1235
  function $84798aaa863a4909$export$8d0c4fdbb05a2f2e() {
1010
1236
  return $5vyXB$solidjs.useContext($84798aaa863a4909$var$ListingContext);
1011
1237
  }
1012
- var $9fe9883b1d8ecccc$var$_tmpl$ = ["<span", ' class="', '" style="', '"></span>'];
1013
- function $9fe9883b1d8ecccc$export$acb3eaade4b23afd(props) {
1014
- // Work around https://github.com/solidjs/solid/issues/1980
1015
- return $5vyXB$solidjsweb.ssr($9fe9883b1d8ecccc$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `${$5vyXB$solidjsweb.escape(props.class, true) || ""} depict-placeholder`, $5vyXB$solidjsweb.ssrStyle(props.style));
1016
- }
1017
- function $3bc4a89b971a3af5$export$3f37af283f8fb843(props) {
1018
- const style = $5vyXB$solidjs.createMemo(() => {
1019
- const {
1020
- style: style,
1021
- height: height,
1022
- width: width,
1023
- aspectRatio: aspectRatio
1024
- } = props;
1025
- const is_image = aspectRatio != undefined;
1026
- const size_data = is_image ? {
1027
- width: "100%",
1028
- "padding-bottom": `calc(calc(1 / ${aspectRatio}) * 100%)`
1029
- } : {
1030
- width: width,
1031
- height: height
1032
- };
1033
- return {
1034
- display: "block",
1035
- ...(style || {}),
1036
- ...size_data
1037
- };
1038
- });
1039
- return $5vyXB$solidjsweb.createComponent((0, $9fe9883b1d8ecccc$export$acb3eaade4b23afd), {
1040
- get style() {
1041
- return style();
1042
- },
1043
- get ["class"]() {
1044
- return props.class;
1045
- }
1046
- });
1047
- }
1048
- function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
1049
- const signal = $5vyXB$solidjs.createSignal(false);
1050
- $5vyXB$solidjs.onCleanup($5vyXB$depictaiutilishared.javascript_media_query(media_query, ({
1051
- matches: matches
1052
- }) => signal[1](matches)).remove);
1053
- return signal[0];
1054
- }
1055
1238
  function $061ff5b4c3d36171$export$89c6019e4baa40b1(props) {
1056
1239
  const style = $5vyXB$solidjs.createMemo(() => {
1057
1240
  const {
@@ -1621,7 +1804,7 @@ function $912d9a717ceee184$export$ebf0b1d4f90c09ae({
1621
1804
  return containerWidth_() || !displays_();
1622
1805
  },
1623
1806
  get children() {
1624
- return $5vyXB$solidjsweb.ssr($912d9a717ceee184$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `look-overlay ${userWantsExpanded() && !!displays_() ? "expanded" : ""} ${!getSecondPartAnimationRunning() && userWantsExpanded() ? "resting-fully-expanded" : ""}`, $5vyXB$solidjsweb.ssrStyle(displays_() &&
1807
+ return $5vyXB$solidjsweb.ssr($912d9a717ceee184$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `look-overlay ${userWantsExpanded() ? "expanded" : ""} ${!getSecondPartAnimationRunning() && userWantsExpanded() ? "resting-fully-expanded" : ""}`, $5vyXB$solidjsweb.ssrStyle(displays_() &&
1625
1808
  // The styling is written like this to eke out animation smoothness on low CPU devices, git blame for previous, more readable versions.
1626
1809
  `--look-card-width:${containerWidth_()}px;--look-card-height:${containerHeight_()}px;--look-item-height:${lookItemHeight() || 200}px`), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Index), {
1627
1810
  get each() {
@@ -1709,6 +1892,7 @@ function $bda357ff87c46163$export$44809a8a3e867e30({
1709
1892
  } else prev.delete(us);
1710
1893
  return prev;
1711
1894
  }));
1895
+ $5vyXB$solidjs.createEffect(() => !display_() && setUserWantsExpanded(false));
1712
1896
  if (slidableInformation) {
1713
1897
  const ourVisiblityInSlider = $5vyXB$solidjs.createMemo(() => {
1714
1898
  const currentCard = index?.();
@@ -9204,196 +9388,6 @@ function $738c3a81fc46a340$export$cb5808ba002cdeed({
9204
9388
  }) : when_filters_closed_cols;
9205
9389
  });
9206
9390
  }
9207
- function $17d06b3bcb035500$export$a79e666719b3647c(cols_at_size_) {
9208
- const size_active = $5vyXB$solidjs.createMemo(() => cols_at_size_().map(([n_cols, min_width, max_width]) => {
9209
- const media_query = $5vyXB$depictaiutilishared.layout_media_query_header(min_width, max_width).replaceAll("@media", "");
9210
- const matches = $b54e6192d0caa293$export$d9f36cf74e24d595(media_query);
9211
- return [matches, n_cols];
9212
- }));
9213
- const n_cols_currently_showing = $5vyXB$solidjs.createMemo(() => {
9214
- try {
9215
- const [, n_cols_currently_showing] = size_active().find(([media_query]) => media_query());
9216
- return n_cols_currently_showing;
9217
- } catch (e) {
9218
- $5vyXB$depictaiutilishared.dwarn("No active size found in columnsAtSize - can't render content blocks or looks");
9219
- return null;
9220
- }
9221
- });
9222
- return n_cols_currently_showing;
9223
- }
9224
- var $d92f338ba8f9da9b$var$_tmpl$ = ["<div", ' class="content-block-wrapper" style="', '">', "</div>"];
9225
- function $d92f338ba8f9da9b$export$791ef57e62e21c3f({
9226
- content_blocks_: incoming_content_blocks,
9227
- cols_at_size_: cols_at_size_,
9228
- set_top_row_shortened_by_: set_top_row_shortened_by_
9229
- }) {
9230
- // these are by row
9231
- const [content_blocks, set_content_blocks] = $5vyXB$solidjsstore.createStore([]);
9232
- const n_cols_currently_showing_ = $17d06b3bcb035500$export$a79e666719b3647c(cols_at_size_);
9233
- $5vyXB$solidjs.createEffect(() => {
9234
- const incoming_value = incoming_content_blocks();
9235
- if (!incoming_value) {
9236
- set_content_blocks([]);
9237
- return;
9238
- }
9239
- set_content_blocks($5vyXB$solidjsstore.reconcile(incoming_value, {
9240
- key: "content"
9241
- })); // key: Make moving blocks faster, see https://github.com/solidjs/solid/issues/1925#issuecomment-1769671596
9242
- });
9243
-
9244
- const get_wrapped_blocks_ = $d92f338ba8f9da9b$var$wrap_blocks_in_div(content_blocks, n_cols_currently_showing_);
9245
- $5vyXB$solidjs.createComputed(() => {
9246
- // Update our styling if a content block forces some items that should be in the top row into a lower one, so we can generate margin-top declarations for them
9247
- const top_row_block = get_wrapped_blocks_()[0];
9248
- const blocks_in_top_row_taken = top_row_block?.span_columns;
9249
- if (blocks_in_top_row_taken == undefined) {
9250
- // Fall back to zero if no content block in top row, since then no blocks in top row are taken
9251
- set_top_row_shortened_by_(0);
9252
- return;
9253
- }
9254
- set_top_row_shortened_by_(blocks_in_top_row_taken - 1); // minus one because the content block wrapper also is an element
9255
- });
9256
-
9257
- return $d92f338ba8f9da9b$var$remap_blocks_to_index({
9258
- get_wrapped_blocks_: get_wrapped_blocks_,
9259
- n_cols_currently_showing_: n_cols_currently_showing_
9260
- });
9261
- }
9262
- /**
9263
- * Calculate where to put each of the finished wrapped content blocks. Also limit blocks' max width.
9264
- * @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
9265
- */
9266
- function $d92f338ba8f9da9b$var$remap_blocks_to_index({
9267
- get_wrapped_blocks_: get_wrapped_blocks_,
9268
- n_cols_currently_showing_: n_cols_currently_showing_
9269
- }) {
9270
- return $5vyXB$solidjs.createMemo(() => {
9271
- // This computation should be quite cheap since it just moves around things into an array
9272
- const content_blocks_by_index = [];
9273
- const constructed_block_arrays = new WeakSet();
9274
- const wrapped_blocks = get_wrapped_blocks_();
9275
- const cols_showing = n_cols_currently_showing_();
9276
- // Need to keep track of products displaced by blocks above when mapping rows to indexes in the actual grid
9277
- 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
9278
- if (!cols_showing)
9279
- // Nope out of here if we don't know how many columns are showing
9280
- return content_blocks_by_index;
9281
- for (let i = 0; i < wrapped_blocks.length; i++) {
9282
- // i = row to show at
9283
- const block = wrapped_blocks[i];
9284
- if (!block) continue; // Array can have holes/not defined places
9285
- const index_of_first_item_in_row = i * cols_showing;
9286
- const index_of_last_item_in_row = index_of_first_item_in_row + cols_showing;
9287
- const {
9288
- span_rows: span_rows,
9289
- position: position,
9290
- span_columns: span_columns
9291
- } = block; // span columns is already capped in the block wrapping step (wrap_blocks_in_div)
9292
- let target_index;
9293
- if (position === "left") target_index = index_of_first_item_in_row;else if (position === "right") target_index = index_of_last_item_in_row - span_columns;else if (position === "center") target_index = index_of_first_item_in_row + Math.floor((cols_showing - span_columns) / 2);else throw new Error("Invalid position for content block - must be left, right or center: " + JSON.stringify(position));
9294
- // Calculate displacement of us by content blocks above us
9295
- let displacement_by_added_blocks = 0;
9296
- for (let j = 0; j < i; j++) {
9297
- const row = displaced_products[j];
9298
- if (row === undefined) continue; // there were no blocks in this row
9299
- let displaced_items_in_row;
9300
- if (typeof row === "number") displaced_items_in_row = row;else {
9301
- displaced_items_in_row = row.filter(item => item).length;
9302
- displaced_products[j] = displaced_items_in_row;
9303
- }
9304
- displacement_by_added_blocks += displaced_items_in_row;
9305
- }
9306
- const index_of_us_in_row = target_index - index_of_first_item_in_row;
9307
- for (let j = 0; j < index_of_us_in_row; j++) if (displaced_products[i]?.[j])
9308
- // Add blocks in our *current* row to the displacement, but only the ones to our left
9309
- displacement_by_added_blocks++;
9310
- // Add block to output array at the correct index
9311
- const final_target_index = target_index - displacement_by_added_blocks;
9312
- const existing_block = content_blocks_by_index[final_target_index];
9313
- const block_content = block.content;
9314
- // 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
9315
- if (existing_block) {
9316
- if (constructed_block_arrays.has(existing_block))
9317
- // Only push to arrays we have created to not create funky bugs when there's an array in JSX.Element
9318
- existing_block.push(block_content);else {
9319
- const array = [existing_block, block_content];
9320
- constructed_block_arrays.add(array);
9321
- content_blocks_by_index[final_target_index] = array;
9322
- }
9323
- } else content_blocks_by_index[final_target_index] = block_content;
9324
- // Update displacement
9325
- for (let j = 0; j < span_rows; j++) {
9326
- const row = displaced_products[i + j] ||= [];
9327
- for (let k = index_of_us_in_row; k < index_of_us_in_row + span_columns; k++) row[k] = true;
9328
- }
9329
- }
9330
- return content_blocks_by_index;
9331
- });
9332
- }
9333
- /**
9334
- * 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.
9335
- * Then renders the content and wraps it into a div with the correct styling.
9336
- * Also caps span_columns to max available columns
9337
- */
9338
- function $d92f338ba8f9da9b$var$wrap_blocks_in_div(rendered_content_blocks, max_span_columns) {
9339
- const get_wrapped_blocks = $5vyXB$solidjs.mapArray(() => rendered_content_blocks, block => {
9340
- if (!block) return;
9341
- const final_span_columns = $5vyXB$solidjs.createMemo(() => Math.min(block.span_columns, max_span_columns() ?? Infinity));
9342
- // If the item spans an entire row, limit the height to 1 row since there's no concept of "rows" if there are no products beside the block
9343
- const final_span_rows = $5vyXB$solidjs.createMemo(() => final_span_columns() === max_span_columns() ? 1 : block.span_rows);
9344
- const [rendering_delayed, set_rendering_delayed_] = $5vyXB$solidjs.createSignal(true);
9345
- const content = $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
9346
- get when() {
9347
- return !rendering_delayed();
9348
- },
9349
- get children() {
9350
- return $5vyXB$solidjsweb.ssr($d92f338ba8f9da9b$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), "grid-column:" + `span ${$5vyXB$solidjsweb.escape(final_span_columns(), true)}` + (";grid-row:" + `span ${$5vyXB$solidjsweb.escape(final_span_rows(), true)}`) + (";spans_columns_variable_name:" + $5vyXB$solidjsweb.escape(final_span_columns(), true)), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent($d92f338ba8f9da9b$var$RenderContent, {
9351
- get content() {
9352
- return block.content;
9353
- }
9354
- })));
9355
- }
9356
- });
9357
- return $5vyXB$solidjs.mergeProps(block, {
9358
- // Create content divs for the blocks with as much fine-grained diffing as possible?
9359
- content: () => {
9360
- // Sneaky on-demand rendering, so we don't render more blocks than we can show: we have the rendered value here and don't return a function that renders because if our block would be moved around we'd be guaranteed to re-render
9361
- // However, no need to count products to know if we should render: the <For> loops in Placeholders and render_displays will only call this function if there's actually a product here that wants to display this block
9362
- set_rendering_delayed_(false);
9363
- return content;
9364
- },
9365
- get span_columns() {
9366
- // Cap max width of block to the number of columns available, for everyone downstream
9367
- return final_span_columns();
9368
- },
9369
- get span_rows() {
9370
- return final_span_rows();
9371
- }
9372
- });
9373
- });
9374
- return get_wrapped_blocks;
9375
- }
9376
- /**
9377
- * Basically adds support for async content block functions and shows a rudimentary placeholder if rendering is delayed. Required due to react having a rendering delay.
9378
- */
9379
- function $d92f338ba8f9da9b$var$RenderContent(props) {
9380
- const [resource] = $5vyXB$solidjs.createResource(() => props.content,
9381
- // Could be reactive
9382
- fn => fn());
9383
- $5vyXB$solidjs.createEffect(() => {
9384
- if (resource.error) console.error("Error in content block rendering", resource.error);
9385
- });
9386
- // The suspense is for when there's an async content block (which we have to support due to react having a rendering delay) so that we can show some height while it's loading (should kinda never be visible)
9387
- return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Suspense), {
9388
- get fallback() {
9389
- return $5vyXB$solidjsweb.createComponent((0, $3bc4a89b971a3af5$export$3f37af283f8fb843), {
9390
- width: "100%",
9391
- height: "max(100%, 400px)"
9392
- });
9393
- },
9394
- children: resource
9395
- });
9396
- }
9397
9391
  var $fe76fb463cc60b89$var$_tmpl$ = ["<div", ' class="', '"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
9398
9392
  function $fe76fb463cc60b89$export$3925f87b1545cfc6({
9399
9393
  plp_results_: plp_results_,