@streamscloud/embeddable 10.0.0 → 10.1.1

package/dist/core/actions/horizontal-wheel-scroll.d.ts

@@ -1,4 +1,5 @@
 import type { Action } from 'svelte/action';
 export declare const horizontalWheelScroll: Action<HTMLElement, {
     isolateScroll: boolean;
+    speed?: number;
 } | undefined>;

package/dist/core/actions/horizontal-wheel-scroll.js

@@ -1,16 +1,17 @@
-export const horizontalWheelScroll = (node, param = { isolateScroll: true }) => {
+export const horizontalWheelScroll = (node, param = { isolateScroll: true, speed: 1 }) => {
     const onWheel = (event) => {
         const canScrollX = node.scrollWidth > node.clientWidth;
         if (!canScrollX) {
             return;
         }
-        const delta = event.deltaX !== 0 ? event.deltaX : event.deltaY;
-        if (delta !== 0) {
-            node.scrollLeft += delta;
-            if (param.isolateScroll) {
-                event.preventDefault();
-                event.stopPropagation();
-            }
+        if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
+            return;
+        }
+        const delta = event.deltaY * (param.speed ?? 1);
+        node.scrollBy({ left: delta, behavior: 'auto' });
+        if (param.isolateScroll) {
+            event.preventDefault();
+            event.stopPropagation();
         }
     };
     node.addEventListener('wheel', onWheel, { passive: false });

package/dist/streams/layout/cmp.slot-content.svelte

@@ -3,30 +3,35 @@ import { enrichProductLinkWithTracking } from '../../marketing-tracking';
 import { StreamElementView } from './element-views';
 import { StreamComponentDataType } from './enums';
 let { model, locale, trackingParams, on } = $props();
+const slotData = $derived.by(() => {
+    return model.data;
+});
 const component = $derived.by(() => {
-    return model.components.find((c) => (model.data ? c.dataType === model.data.type : c.dataType === StreamComponentDataType.NoData));
+    return model.components.find((c) => (slotData ? c.dataType === slotData.type : c.dataType === StreamComponentDataType.NoData));
 });
 const dataIsFilled = $derived.by(() => {
-    if (!model.data) {
+    if (!slotData) {
         return false;
     }
-    switch (model.data.type) {
-        case StreamComponentDataType.ShortVideo: {
-            return !!model.data.shortVideo;
+    switch (slotData.type) {
+        case StreamComponentDataType.Images: {
+            return !!slotData.items.length;
         }
         case StreamComponentDataType.Product: {
-            return !!model.data.product;
+            return !!slotData.product;
         }
-        case StreamComponentDataType.Images: {
-            return !!model.data.items.length;
+        case StreamComponentDataType.Products: {
+            return !!slotData.products.length;
+        }
+        case StreamComponentDataType.ShortVideo: {
+            return !!slotData.shortVideo;
         }
         default:
-            Utils.assertUnreachable(model.data);
+            Utils.assertUnreachable(slotData);
     }
 });
 const productModel = $derived.by(() => {
-    var _a;
-    return ((_a = model.data) === null || _a === void 0 ? void 0 : _a.type) === StreamComponentDataType.Product ? model.data.product : undefined;
+    return (slotData === null || slotData === void 0 ? void 0 : slotData.type) === StreamComponentDataType.Product ? slotData.product : undefined;
 });
 const enrichedLink = $derived((productModel === null || productModel === void 0 ? void 0 : productModel.link)
     ? enrichProductLinkWithTracking({
@@ -71,9 +76,9 @@ const productLinkMounted = (node, productModel) => {
 </script>
 
 {#snippet slotContent()}
-  {#if component && (!model.data || dataIsFilled)}
+  {#if component && (!slotData || dataIsFilled)}
     {#each component.elements as element (element)}
-      <StreamElementView model={element} data={model.data} trackingParams={trackingParams} locale={locale} on={on} />
+      <StreamElementView model={element} data={slotData} trackingParams={trackingParams} locale={locale} on={on} />
     {/each}
   {/if}
 {/snippet}

package/dist/streams/layout/element-views/cmp.button-stream-element.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">import { generateButtonStyles } from '../styles-transformer';
+let { model, placeholder, inert = false } = $props();
+const handleClick = () => {
+    if (model.url) {
+        window.open(model.url, '_blank', 'noopener noreferrer');
+    }
+};
+</script>
+
+<button type="button" class="button-stream-element" style={generateButtonStyles(model.styles)} onclick={handleClick} inert={inert}>
+  <span class="button-stream-element__text">
+    {#if model.text}
+      {model.text}
+    {:else if placeholder}
+      {@render placeholder()}
+    {/if}
+  </span>
+</button>
+
+<style>.button-stream-element__text {
+  min-width: 0;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}</style>

package/dist/streams/layout/element-views/cmp.button-stream-element.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ButtonStreamElementModel } from '../elements';
+import type { Snippet } from 'svelte';
+type Props = {
+    model: ButtonStreamElementModel;
+    inert?: boolean;
+    placeholder?: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/streams/layout/element-views/cmp.products-slider-stream-element.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">import { horizontalWheelScroll } from '../../../core/actions';
+import { StreamComponentDataType, StreamElementStyleDirection } from '../enums';
+import { generateProductsSliderStyles } from '../styles-transformer';
+import { default as StreamElement } from './cmp.stream-element.svelte';
+let { model, data, trackingParams, locale } = $props();
+const getProductDataByIndex = (index) => {
+    const products = (data === null || data === void 0 ? void 0 : data.type) === StreamComponentDataType.Products ? data.products : [];
+    const product = products[index];
+    if (!product) {
+        return null;
+    }
+    return {
+        type: StreamComponentDataType.Product,
+        id: product.id,
+        product: product
+    };
+};
+</script>
+
+<div class="products-slider-stream-element" style={generateProductsSliderStyles(model.styles)} use:horizontalWheelScroll>
+  {#each model.items as item, index (item)}
+    <div class="products-slider-stream-element__item">
+      {#each item.elements as element (element)}
+        {@const productData = getProductDataByIndex(index)}
+        <StreamElement
+          model={element}
+          data={productData}
+          trackingParams={trackingParams}
+          constainerDirection={StreamElementStyleDirection.Vertical}
+          locale={locale} />
+      {/each}
+    </div>
+  {/each}
+</div>
+
+<style>.products-slider-stream-element {
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x proximity;
+}
+.products-slider-stream-element__item {
+  scroll-snap-align: start;
+  flex-shrink: 0;
+}</style>

package/dist/streams/layout/element-views/cmp.products-slider-stream-element.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Locale } from '../../../core/locale';
+import type { StreamTrackingParams } from '..';
+import type { ProductsSliderStreamElementModel } from '../elements';
+import type { StreamSlotData } from '../slot-data';
+type Props = {
+    model: ProductsSliderStreamElementModel;
+    data: StreamSlotData | null;
+    trackingParams: StreamTrackingParams;
+    locale: Locale;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/streams/layout/element-views/cmp.stream-element.svelte

@@ -1,8 +1,6 @@
-<script lang="ts">import { AnnotationStreamElementView, ContainerStreamElementView, ImageRefStreamElementView, ImagesStreamElementView, PriceStreamElementView, ShortVideoStreamElementView, SpacerStreamElementView, StockStreamElementView, TextRefStreamElementView, TextStreamElementView, WebViewStreamElementView } from '.';
-import { StreamElementLocalization } from './stream-element-localization';
+<script lang="ts">import { AnnotationStreamElementView, ButtonStreamElementView, ContainerStreamElementView, ImageRefStreamElementView, ImagesStreamElementView, PriceStreamElementView, ProductsSliderStreamElementView, ShortVideoStreamElementView, SpacerStreamElementView, StockStreamElementView, TextRefStreamElementView, TextStreamElementView, WebViewStreamElementView } from '.';
 import { StreamComponentDataType, StreamElementStyleDirection, StreamElementType } from '../enums';
 let { model, data, trackingParams, constainerDirection = StreamElementStyleDirection.Vertical, locale, on } = $props();
-const localization = $derived(new StreamElementLocalization(locale));
 const shortVideoModel = $derived.by(() => {
     if (!data) {
         return null;
@@ -43,6 +41,8 @@ const productModel = $derived.by(() => {
 
 {#if model.type === StreamElementType.Annotation}
   <AnnotationStreamElementView model={model} />
+{:else if model.type === StreamElementType.Button}
+  <ButtonStreamElementView model={model} />
 {:else if model.type === StreamElementType.Container}
   <ContainerStreamElementView model={model} data={data} trackingParams={trackingParams} locale={locale} />
 {:else if model.type === StreamElementType.ImageRef && data}
@@ -50,12 +50,14 @@ const productModel = $derived.by(() => {
 {:else if model.type === StreamElementType.Images && imagesModel?.length}
   <ImagesStreamElementView model={model} data={imagesModel} />
 {:else if model.type === StreamElementType.Price && productModel}
-  <PriceStreamElementView model={model} data={productModel.price} locale={localization.priceElementLocalization} />
+  <PriceStreamElementView model={model} data={productModel.price} locale={locale} />
+{:else if model.type === StreamElementType.ProductsSlider}
+  <ProductsSliderStreamElementView model={model} data={data} trackingParams={trackingParams} locale={locale} />
 {:else if model.type === StreamElementType.ShortVideo && shortVideoModel}
   <ShortVideoStreamElementView
     data={shortVideoModel}
     trackingParams={trackingParams}
-    locale={localization.shortVideoElementLocalization}
+    locale={locale}
     on={on
       ? {
           progress: (progress: Number) => {
@@ -66,7 +68,7 @@ const productModel = $derived.by(() => {
 {:else if model.type === StreamElementType.Spacer}
   <SpacerStreamElementView model={model} parentContainerDirection={constainerDirection} />
 {:else if model.type === StreamElementType.Stock}
-  <StockStreamElementView model={model} locale={localization.stockElementLocalization} />
+  <StockStreamElementView model={model} locale={locale} />
 {:else if model.type === StreamElementType.Text}
   <TextStreamElementView model={model} />
 {:else if model.type === StreamElementType.TextRef && data}

package/dist/streams/layout/element-views/index.d.ts

@@ -1,9 +1,11 @@
 export { default as StreamElementView } from './cmp.stream-element.svelte';
 export { default as AnnotationStreamElementView } from './cmp.annotation-stream-element.svelte';
+export { default as ButtonStreamElementView } from './cmp.button-stream-element.svelte';
 export { default as ContainerStreamElementView } from './cmp.container-stream-element.svelte';
 export { default as ImageRefStreamElementView } from './cmp.image-ref-stream-element.svelte';
 export { default as ImagesStreamElementView } from './cmp.images-stream-element.svelte';
 export { default as PriceStreamElementView } from './cmp.price-stream-element.svelte';
+export { default as ProductsSliderStreamElementView } from './cmp.products-slider-stream-element.svelte';
 export { default as ShortVideoStreamElementView } from './cmp.short-video-stream-element.svelte';
 export { default as SpacerStreamElementView } from './cmp.spacer-stream-element.svelte';
 export { default as StockStreamElementView } from './cmp.stock-stream-element.svelte';

package/dist/streams/layout/element-views/index.js

@@ -1,9 +1,11 @@
 export { default as StreamElementView } from './cmp.stream-element.svelte';
 export { default as AnnotationStreamElementView } from './cmp.annotation-stream-element.svelte';
+export { default as ButtonStreamElementView } from './cmp.button-stream-element.svelte';
 export { default as ContainerStreamElementView } from './cmp.container-stream-element.svelte';
 export { default as ImageRefStreamElementView } from './cmp.image-ref-stream-element.svelte';
 export { default as ImagesStreamElementView } from './cmp.images-stream-element.svelte';
 export { default as PriceStreamElementView } from './cmp.price-stream-element.svelte';
+export { default as ProductsSliderStreamElementView } from './cmp.products-slider-stream-element.svelte';
 export { default as ShortVideoStreamElementView } from './cmp.short-video-stream-element.svelte';
 export { default as SpacerStreamElementView } from './cmp.spacer-stream-element.svelte';
 export { default as StockStreamElementView } from './cmp.stock-stream-element.svelte';

package/dist/streams/layout/element-views/price-element-view.svelte

@@ -102,6 +102,9 @@ const adjustHeightToFit = () => __awaiter(void 0, void 0, void 0, function* () {
     while (currentHeight > minElementHeight) {
         adjustedHeight = currentHeight;
         yield new Promise((resolve) => requestAnimationFrame(resolve));
+        if (!priceContainerRef || !priceElementRef || !adjustableHeight) {
+            return;
+        }
         let hasOverflow = priceElementRef.clientWidth < priceContainerRef.clientWidth;
         if (!hasOverflow) {
             break;

package/dist/streams/layout/elements.d.ts

@@ -1,6 +1,6 @@
 import { StreamElementType, ImagesStreamElementMode, AnnotationStreamElementPlacement, StockStreamElementLevel } from './enums';
-import type { ImageStreamElementStyles, TextStreamElementStyles, ContainerStreamElementStyles, PriceStreamElementStyles, AnnotationStreamElementStyles, StockStreamElementStyles } from './styles';
-export type StreamElementModel = AnnotationStreamElementModel | ContainerStreamElementModel | ImageRefStreamElementModel | ImagesStreamElementModel | PriceStreamElementModel | ShortVideoStreamElementModel | SpacerStreamElementModel | StockStreamElementModel | TextStreamElementModel | TextRefStreamElementModel | WebViewStreamElementModel;
+import type { ImageStreamElementStyles, TextStreamElementStyles, ContainerStreamElementStyles, PriceStreamElementStyles, AnnotationStreamElementStyles, StockStreamElementStyles, ProductsSliderStreamElementStyles, ButtonStreamElementStyles } from './styles';
+export type StreamElementModel = AnnotationStreamElementModel | ButtonStreamElementModel | ContainerStreamElementModel | ImageRefStreamElementModel | ImagesStreamElementModel | PriceStreamElementModel | ProductsSliderStreamElementModel | ShortVideoStreamElementModel | SpacerStreamElementModel | StockStreamElementModel | TextStreamElementModel | TextRefStreamElementModel | WebViewStreamElementModel;
 export type AnnotationStreamElementModel = {
     type: StreamElementType.Annotation;
     $id: string;
@@ -10,6 +10,14 @@ export type AnnotationStreamElementModel = {
     placement: AnnotationStreamElementPlacement;
     styles: AnnotationStreamElementStyles;
 };
+export type ButtonStreamElementModel = {
+    type: StreamElementType.Button;
+    $id: string;
+    name?: string | null;
+    text: string | null;
+    url: string | null;
+    styles: ButtonStreamElementStyles | null;
+};
 export type ContainerStreamElementModel = {
     type: StreamElementType.Container;
     $id: string;
@@ -42,6 +50,16 @@ export type PriceStreamElementModel = {
     stock?: StockStreamElementModel | null;
     styles: PriceStreamElementStyles | null;
 };
+export type ProductsSliderStreamElementModel = {
+    type: StreamElementType.ProductsSlider;
+    $id: string;
+    name?: string | null;
+    template: StreamElementModel[];
+    items: {
+        elements: StreamElementModel[];
+    }[];
+    styles: ProductsSliderStreamElementStyles | null;
+};
 export type ShortVideoStreamElementModel = {
     type: StreamElementType.ShortVideo;
     $id: string;

package/dist/streams/layout/enums.d.ts

@@ -2,14 +2,17 @@ export declare enum StreamComponentDataType {
     Images = "IMAGES",
     NoData = "NO_DATA",
     ShortVideo = "SHORT_VIDEO",
-    Product = "PRODUCT"
+    Product = "PRODUCT",
+    Products = "PRODUCTS"
 }
 export declare enum StreamElementType {
     Annotation = "ANNOTATION",
+    Button = "BUTTON",
     Container = "CONTAINER",
     ImageRef = "IMAGE_REF",
     Images = "IMAGES",
     Price = "PRICE",
+    ProductsSlider = "PRODUCTS_SLIDER",
     ShortVideo = "SHORT_VIDEO",
     Spacer = "SPACER",
     Stock = "STOCK",

package/dist/streams/layout/enums.js

@@ -4,14 +4,17 @@ export var StreamComponentDataType;
     StreamComponentDataType["NoData"] = "NO_DATA";
     StreamComponentDataType["ShortVideo"] = "SHORT_VIDEO";
     StreamComponentDataType["Product"] = "PRODUCT";
+    StreamComponentDataType["Products"] = "PRODUCTS";
 })(StreamComponentDataType || (StreamComponentDataType = {}));
 export var StreamElementType;
 (function (StreamElementType) {
     StreamElementType["Annotation"] = "ANNOTATION";
+    StreamElementType["Button"] = "BUTTON";
     StreamElementType["Container"] = "CONTAINER";
     StreamElementType["ImageRef"] = "IMAGE_REF";
     StreamElementType["Images"] = "IMAGES";
     StreamElementType["Price"] = "PRICE";
+    StreamElementType["ProductsSlider"] = "PRODUCTS_SLIDER";
     StreamElementType["ShortVideo"] = "SHORT_VIDEO";
     StreamElementType["Spacer"] = "SPACER";
     StreamElementType["Stock"] = "STOCK";

package/dist/streams/layout/index.d.ts

@@ -10,4 +10,5 @@ export * from './svg-attributes';
 export type { StreamTrackingParams } from './types';
 export { parseToStreamLayout, parseToStreamLayoutTemplate, stringifyToStreamLayoutInput, IdPopulator } from './serializer.svelte';
 export declare const getAllowedDataTypesForSlot: (slot: StreamSlot) => StreamComponentDataType[];
+export declare const slotAcceptsDataOfType: (slot: StreamSlot, dataType: StreamComponentDataType) => boolean;
 export declare const getSingleShortVideoFromLayout: (layout: StreamLayout) => StreamLayoutShortVideoModel | null;

package/dist/streams/layout/index.js

@@ -1,3 +1,4 @@
+import { Utils } from '../../core/utils';
 import { StreamComponentDataType } from './enums';
 export { default as StreamPageLayout } from './cmp.layout.svelte';
 export { default as StreamLayoutSlot } from './cmp.slot.svelte';
@@ -8,6 +9,20 @@ export { parseToStreamLayout, parseToStreamLayoutTemplate, stringifyToStreamLayo
 export const getAllowedDataTypesForSlot = (slot) => {
     return slot.components.flatMap((c) => c.dataType);
 };
+export const slotAcceptsDataOfType = (slot, dataType) => {
+    const allowedDataTypesForSlot = getAllowedDataTypesForSlot(slot);
+    switch (dataType) {
+        case StreamComponentDataType.Images:
+        case StreamComponentDataType.NoData:
+        case StreamComponentDataType.Products:
+        case StreamComponentDataType.ShortVideo:
+            return allowedDataTypesForSlot.includes(dataType);
+        case StreamComponentDataType.Product:
+            return allowedDataTypesForSlot.includes(StreamComponentDataType.Product) || allowedDataTypesForSlot.includes(StreamComponentDataType.Products);
+        default:
+            Utils.assertUnreachable(dataType);
+    }
+};
 export const getSingleShortVideoFromLayout = (layout) => {
     if (layout.slots.length === 1 && layout.slots[0].data?.type === StreamComponentDataType.ShortVideo && layout.slots[0].data.shortVideo) {
         return layout.slots[0].data.shortVideo;

package/dist/streams/layout/serializer.svelte.js

@@ -31,28 +31,47 @@ export const stringifyToStreamLayoutInput = (layout) => {
                         // @ts-expect-error - clearing local data before sending to the server
                         delete data.items;
                         break;
-                    case StreamComponentDataType.ShortVideo:
-                        // @ts-expect-error - clearing local data before sending to the server
-                        delete data.shortVideo;
-                        break;
                     case StreamComponentDataType.Product:
                         // @ts-expect-error - clearing local data before sending to the server
                         delete data.product;
                         break;
+                    case StreamComponentDataType.Products:
+                        // @ts-expect-error - clearing local data before sending to the server
+                        delete data.products;
+                        break;
+                    case StreamComponentDataType.ShortVideo:
+                        // @ts-expect-error - clearing local data before sending to the server
+                        delete data.shortVideo;
+                        break;
                     default:
                         Utils.assertUnreachable(data);
                 }
             }
         });
     }
-    return JSON.stringify(clone);
+    return JSON.stringify(clone, removeNullishReplacer);
 };
+function removeNullishReplacer(key, value) {
+    if (key === '') {
+        return value;
+    }
+    if (value === null || value === undefined) {
+        return undefined;
+    }
+    return value;
+}
 const removeElementIdRecursive = (element) => {
     // @ts-expect-error - clearing local data before sending to the server
     delete element.$id;
     if (element.type === StreamElementType.Container && Array.isArray(element.elements)) {
         element.elements.forEach(removeElementIdRecursive);
     }
+    if (element.type === StreamElementType.ProductsSlider) {
+        element.template.forEach(removeElementIdRecursive);
+        if (Array.isArray(element.items)) {
+            element.items.flatMap((i) => i.elements).forEach(removeElementIdRecursive);
+        }
+    }
     if (element.type === StreamElementType.ImageRef && Array.isArray(element.annotations)) {
         element.annotations.forEach((annotation) => {
             // @ts-expect-error - clearing local data before sending to the server
@@ -82,6 +101,12 @@ export class IdPopulator {
         if (element.type === StreamElementType.Container && element.elements) {
             element.elements.forEach((element) => IdPopulator.populateElementId(element));
         }
+        if (element.type === StreamElementType.ProductsSlider) {
+            element.template.forEach((element) => IdPopulator.populateElementId(element));
+            if (element.items) {
+                element.items.flatMap((i) => i.elements).forEach((element) => IdPopulator.populateElementId(element));
+            }
+        }
         if (element.type === StreamElementType.ImageRef && element.annotations) {
             element.annotations.forEach((element) => IdPopulator.populateElementId(element));
         }

package/dist/streams/layout/slot-data-input.d.ts

@@ -1,5 +1,5 @@
 import { StreamComponentDataType } from './enums';
-export type StreamSlotDataInput = ImagesStreamSlotDataInput | ProductStreamSlotDataInput | ShortVideoStreamSlotDataInput;
+export type StreamSlotDataInput = ImagesStreamSlotDataInput | ProductStreamSlotDataInput | ProductsStreamSlotDataInput | ShortVideoStreamSlotDataInput;
 export interface ImagesStreamSlotDataInput {
     type: StreamComponentDataType.Images;
     ids: string[];
@@ -8,6 +8,10 @@ export interface ProductStreamSlotDataInput {
     type: StreamComponentDataType.Product;
     id: string;
 }
+export interface ProductsStreamSlotDataInput {
+    type: StreamComponentDataType.Products;
+    ids: string[];
+}
 export interface ShortVideoStreamSlotDataInput {
     type: StreamComponentDataType.ShortVideo;
     id: string;

package/dist/streams/layout/slot-data-ref.d.ts

@@ -1,5 +1,5 @@
-import type { ImagesStreamSlotData, ProductStreamSlotData, ShortVideoStreamSlotData } from './slot-data';
-export type StreamSlotDataRef = Partial<Pick<ImagesStreamSlotData, 'items'>> & Partial<Pick<ProductStreamSlotData, 'product'>> & Partial<Pick<ShortVideoStreamSlotData, 'shortVideo'>>;
+import type { ImagesStreamSlotData, ProductsStreamSlotData, ProductStreamSlotData, ShortVideoStreamSlotData } from './slot-data';
+export type StreamSlotDataRef = Partial<Pick<ImagesStreamSlotData, 'items'>> & Partial<Pick<ProductStreamSlotData, 'product'>> & Partial<Pick<ProductsStreamSlotData, 'products'>> & Partial<Pick<ShortVideoStreamSlotData, 'shortVideo'>>;
 type Prev = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, ...0[]];
 type Join<K, P> = K extends string | number ? (P extends string | number ? `${K}${'' extends P ? '' : '.'}${P}` : never) : never;
 type IsPrimitive<T> = T extends string | number | boolean | null | undefined ? true : false;

package/dist/streams/layout/slot-data.d.ts

@@ -1,6 +1,6 @@
 import { StreamComponentDataType } from './enums';
 import type { StreamLayoutBlobModel, StreamLayoutProductModel, StreamLayoutShortVideoModel } from './models';
-export type StreamSlotData = ImagesStreamSlotData | ProductStreamSlotData | ShortVideoStreamSlotData;
+export type StreamSlotData = ImagesStreamSlotData | ProductStreamSlotData | ProductsStreamSlotData | ShortVideoStreamSlotData;
 export type ImagesStreamSlotData = {
     type: StreamComponentDataType.Images;
     ids: string[];
@@ -11,6 +11,11 @@ export type ProductStreamSlotData = {
     id: string;
     product: StreamLayoutProductModel | null;
 };
+export type ProductsStreamSlotData = {
+    type: StreamComponentDataType.Products;
+    ids: string[];
+    products: StreamLayoutProductModel[];
+};
 export type ShortVideoStreamSlotData = {
     type: StreamComponentDataType.ShortVideo;
     id: string;

package/dist/streams/layout/styles-transformer.d.ts

@@ -1,8 +1,10 @@
 import { StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleHorizontalAlign, AnnotationStreamElementPlacement } from './enums';
-import type { AnnotationStreamElementStyles, ContainerStreamElementStyles, ImageStreamElementStyles, StreamLayoutStyles, TextStreamElementStyles } from './styles';
+import type { AnnotationStreamElementStyles, ButtonStreamElementStyles, ContainerStreamElementStyles, ImageStreamElementStyles, ProductsSliderStreamElementStyles, StreamLayoutStyles, TextStreamElementStyles } from './styles';
 export declare const generateStreamLayoutStyles: (styles: StreamLayoutStyles | null) => string;
 export declare const generateContainerStyles: (styles: Partial<ContainerStreamElementStyles> | null) => string;
+export declare const generateButtonStyles: (styles: Partial<ButtonStreamElementStyles> | null) => string;
 export declare const generateAnnotationStyles: (styles: AnnotationStreamElementStyles, placement: AnnotationStreamElementPlacement) => string;
+export declare const generateProductsSliderStyles: (styles: Partial<ProductsSliderStreamElementStyles> | null) => string;
 export declare const generateTextStyles: (styles: Partial<TextStreamElementStyles> | null) => string;
 export declare const generateImageStyles: (styles: Partial<ImageStreamElementStyles> | null) => string;
 export declare const mapFontFamily: (value: StreamElementStyleFontFamily | null | undefined) => string;

package/dist/streams/layout/styles-transformer.js

@@ -32,6 +32,32 @@ export const generateContainerStyles = (styles) => {
     }
     return values.join(';');
 };
+export const generateButtonStyles = (styles) => {
+    styles = styles || {};
+    const values = [
+        'display: flex',
+        `justify-content: ${mapFlexJustifyContent(styles.textAlign)}`,
+        `text-align: ${mapTextAlign(styles.textAlign)}`,
+        `align-items: center`,
+        `min-width: ${transformNumericValue(styles.minWidth, '0')}`,
+        `max-width: ${transformNumericValue(styles.maxWidth, '100%')}`,
+        `height: ${transformNumericValue(styles.height, 'fit-content')}`,
+        `font-family: ${mapFontFamily(styles.fontFamily)}`,
+        `font-size: ${transformFontSizeValue(styles.fontSize)}`,
+        `font-weight: ${mapFontWeight(styles.fontWeight)}`,
+        `padding-top: ${transformNumericValue(styles.paddingTop)}`,
+        `padding-right: ${transformNumericValue(styles.paddingRight)}`,
+        `padding-bottom: ${transformNumericValue(styles.paddingBottom)}`,
+        `padding-left: ${transformNumericValue(styles.paddingLeft)}`,
+        `color: ${transformColorValue(styles.textColor)}`,
+        `background-color: ${transformColorValue(styles.backgroundColor)}`,
+        `border-width: ${styles.borderColor ? '1px' : '0'}`,
+        `border-radius: ${transformNumericValue(styles.borderRadius)}`,
+        `border-color: ${transformColorValue(styles.borderColor)}`,
+        `overflow: hidden`
+    ];
+    return values.join(';');
+};
 export const generateAnnotationStyles = (styles, placement) => {
     const values = [`height: ${transformNumericValue(styles.height)}`, `aspect-ratio: ${styles.aspectRatio}`, 'position: absolute'];
     switch (placement) {
@@ -56,6 +82,27 @@ export const generateAnnotationStyles = (styles, placement) => {
     }
     return values.join(';');
 };
+export const generateProductsSliderStyles = (styles) => {
+    styles = styles || {};
+    const values = [
+        'display: flex',
+        'flex-direction: row',
+        `width: 100%`,
+        `height: 100%`,
+        `gap: ${transformNumericValue(styles.gap)}`,
+        `padding-top: ${transformNumericValue(styles.paddingTop)}`,
+        `padding-right: ${transformNumericValue(styles.paddingRight)}`,
+        `padding-bottom: ${transformNumericValue(styles.paddingBottom)}`,
+        `padding-left: ${transformNumericValue(styles.paddingLeft)}`,
+        `background-color: ${transformColorValue(styles.backgroundColor)}`,
+        `overflow-x: auto`,
+        `overflow-y: hidden`,
+        `scrollbar-width: none`,
+        `scroll-padding-left: ${transformNumericValue(styles.paddingLeft)}`,
+        `scroll-padding-right: ${transformNumericValue(styles.paddingRight)}`
+    ];
+    return values.join(';');
+};
 export const generateTextStyles = (styles) => {
     styles = styles || {};
     const values = [

package/dist/streams/layout/styles.d.ts

@@ -10,6 +10,23 @@ export type AnnotationStreamElementStyles = {
     offsetX: number;
     offsetY: number;
 };
+export type ButtonStreamElementStyles = {
+    minWidth?: number | null;
+    maxWidth?: number | null;
+    height?: number | null;
+    fontSize?: number | null;
+    fontWeight?: StreamElementStyleFontWeight | null;
+    fontFamily?: StreamElementStyleFontFamily | null;
+    textAlign?: StreamElementStyleHorizontalAlign | null;
+    paddingTop?: number | null;
+    paddingRight?: number | null;
+    paddingBottom?: number | null;
+    paddingLeft?: number | null;
+    textColor?: string | null;
+    backgroundColor?: string | null;
+    borderRadius?: number | null;
+    borderColor?: string | null;
+};
 export type ContainerStreamElementStyles = {
     width?: StreamCssValue | null;
     height?: StreamCssValue | null;
@@ -38,6 +55,14 @@ export type PriceStreamElementStyles = {
     beforeValueColor?: string | null;
     horizontalAlign?: StreamElementStyleHorizontalAlign | null;
 };
+export type ProductsSliderStreamElementStyles = {
+    gap?: number;
+    paddingTop?: number | null;
+    paddingBottom?: number | null;
+    paddingLeft?: number | null;
+    paddingRight?: number | null;
+    backgroundColor?: string | null;
+};
 export type StockStreamElementStyles = {
     height?: number | null;
     horizontalAlign?: StreamElementStyleHorizontalAlign | null;

package/dist/streams/layout/type-guards.d.ts

@@ -1,18 +1,22 @@
-import type { AnnotationStreamElementModel, ContainerStreamElementModel, ImageRefStreamElementModel, ImagesStreamElementModel, PriceStreamElementModel, ShortVideoStreamElementModel, SpacerStreamElementModel, StockStreamElementModel, TextRefStreamElementModel, TextStreamElementModel, WebViewStreamElementModel } from './elements';
+import type { AnnotationStreamElementModel, ButtonStreamElementModel, ContainerStreamElementModel, ImageRefStreamElementModel, ImagesStreamElementModel, PriceStreamElementModel, ProductsSliderStreamElementModel, ShortVideoStreamElementModel, SpacerStreamElementModel, StockStreamElementModel, TextRefStreamElementModel, TextStreamElementModel, WebViewStreamElementModel } from './elements';
 import { StreamElementType } from './enums';
-import type { ImagesStreamSlotData, ProductStreamSlotData, ShortVideoStreamSlotData, StreamSlotData } from './slot-data';
-import type { ImagesStreamSlotDataInput, ProductStreamSlotDataInput, ShortVideoStreamSlotDataInput, StreamSlotDataInput } from './slot-data-input';
-import type { AnnotationStreamElementStyles, ContainerStreamElementStyles, ImageStreamElementStyles, PriceStreamElementStyles, StockStreamElementStyles, TextStreamElementStyles } from './styles';
+import type { ImagesStreamSlotData, ProductsStreamSlotData, ProductStreamSlotData, ShortVideoStreamSlotData, StreamSlotData } from './slot-data';
+import type { ImagesStreamSlotDataInput, ProductsStreamSlotDataInput, ProductStreamSlotDataInput, ShortVideoStreamSlotDataInput, StreamSlotDataInput } from './slot-data-input';
+import type { AnnotationStreamElementStyles, ButtonStreamElementStyles, ContainerStreamElementStyles, ImageStreamElementStyles, PriceStreamElementStyles, ProductsSliderStreamElementStyles, StockStreamElementStyles, TextStreamElementStyles } from './styles';
 export declare function isImagesSlotDataInput(data: StreamSlotDataInput | null): data is ImagesStreamSlotDataInput;
 export declare function isProductSlotDataInput(data: StreamSlotDataInput | null): data is ProductStreamSlotDataInput;
+export declare function isProductsSlotDataInput(data: StreamSlotDataInput | null): data is ProductsStreamSlotDataInput;
 export declare function isShortVideoSlotDataInput(data: StreamSlotDataInput | null): data is ShortVideoStreamSlotDataInput;
 export declare function isImagesSlotData(data: StreamSlotData | null): data is ImagesStreamSlotData;
 export declare function isProductSlotData(data: StreamSlotData | null): data is ProductStreamSlotData;
+export declare function isProductsSlotData(data: StreamSlotData | null): data is ProductsStreamSlotData;
 export declare function isShortVideoSlotData(data: StreamSlotData | null): data is ShortVideoStreamSlotData;
 export type ElementTypeToStylesMap = {
     [StreamElementType.Annotation]: AnnotationStreamElementStyles;
+    [StreamElementType.Button]: ButtonStreamElementStyles;
     [StreamElementType.Container]: ContainerStreamElementStyles;
     [StreamElementType.Price]: PriceStreamElementStyles;
+    [StreamElementType.ProductsSlider]: ProductsSliderStreamElementStyles;
     [StreamElementType.ImageRef]: ImageStreamElementStyles;
     [StreamElementType.Stock]: StockStreamElementStyles;
     [StreamElementType.Text]: TextStreamElementStyles;
@@ -20,10 +24,12 @@ export type ElementTypeToStylesMap = {
 };
 export type ElementTypeToModelMap = {
     [StreamElementType.Annotation]: AnnotationStreamElementModel;
+    [StreamElementType.Button]: ButtonStreamElementModel;
     [StreamElementType.Container]: ContainerStreamElementModel;
     [StreamElementType.ImageRef]: ImageRefStreamElementModel;
     [StreamElementType.Images]: ImagesStreamElementModel;
     [StreamElementType.Price]: PriceStreamElementModel;
+    [StreamElementType.ProductsSlider]: ProductsSliderStreamElementModel;
     [StreamElementType.ShortVideo]: ShortVideoStreamElementModel;
     [StreamElementType.Spacer]: SpacerStreamElementModel;
     [StreamElementType.Stock]: StockStreamElementModel;
@@ -34,6 +40,7 @@ export type ElementTypeToModelMap = {
 export declare const NotAllowedElementTypesForComponent: {
     IMAGES: StreamElementType[];
     PRODUCT: StreamElementType[];
+    PRODUCTS: StreamElementType[];
     SHORT_VIDEO: StreamElementType[];
     NO_DATA: StreamElementType[];
 };

package/dist/streams/layout/type-guards.js

@@ -6,6 +6,9 @@ export function isImagesSlotDataInput(data) {
 export function isProductSlotDataInput(data) {
     return data?.type === StreamComponentDataType.Product;
 }
+export function isProductsSlotDataInput(data) {
+    return data?.type === StreamComponentDataType.Products;
+}
 export function isShortVideoSlotDataInput(data) {
     return data?.type === StreamComponentDataType.ShortVideo;
 }
@@ -16,17 +19,28 @@ export function isImagesSlotData(data) {
 export function isProductSlotData(data) {
     return data?.type === StreamComponentDataType.Product;
 }
+export function isProductsSlotData(data) {
+    return data?.type === StreamComponentDataType.Products;
+}
 export function isShortVideoSlotData(data) {
     return data?.type === StreamComponentDataType.ShortVideo;
 }
 export const NotAllowedElementTypesForComponent = {
-    [StreamComponentDataType.Images]: [StreamElementType.ImageRef, StreamElementType.Price, StreamElementType.ShortVideo, StreamElementType.TextRef],
-    [StreamComponentDataType.Product]: [StreamElementType.Images, StreamElementType.ShortVideo],
-    [StreamComponentDataType.ShortVideo]: [StreamElementType.ImageRef, StreamElementType.Price, StreamElementType.TextRef],
+    [StreamComponentDataType.Images]: [
+        StreamElementType.ImageRef,
+        StreamElementType.Price,
+        StreamElementType.ProductsSlider,
+        StreamElementType.ShortVideo,
+        StreamElementType.TextRef
+    ],
+    [StreamComponentDataType.Product]: [StreamElementType.Images, StreamElementType.ProductsSlider, StreamElementType.ShortVideo],
+    [StreamComponentDataType.Products]: [StreamElementType.Images, StreamElementType.ShortVideo],
+    [StreamComponentDataType.ShortVideo]: [StreamElementType.ImageRef, StreamElementType.Price, StreamElementType.ProductsSlider, StreamElementType.TextRef],
     [StreamComponentDataType.NoData]: [
         StreamElementType.ImageRef,
         StreamElementType.Images,
         StreamElementType.Price,
+        StreamElementType.ProductsSlider,
         StreamElementType.ShortVideo,
         StreamElementType.TextRef
     ]

package/dist/ui/player/providers/chunks-player-buffer/player-chunks-manager.svelte.d.ts

@@ -2,18 +2,18 @@ import { PlayerChunk } from './player-chunk.svelte';
 import type { IChunksPlayerDataProvider, WithId } from '../types';
 export declare class PlayerChunksManager<TItem extends WithId, TChunk extends WithId> {
     private provider;
-    private callabacks;
-    readonly activeChunk: PlayerChunk<TItem, TChunk>;
-    readonly loadedChunks: PlayerChunk<TItem, TChunk>[];
-    readonly flattenedChunkItems: TItem[];
-    readonly flattenedActiveChunkItemIndex: number;
+    private callbacks;
     private _activeChunkIndex;
     private _loadedChunks;
     private _isLoading;
-    constructor(provider: IChunksPlayerDataProvider<TItem, TChunk>, callabacks: {
+    constructor(provider: IChunksPlayerDataProvider<TItem, TChunk>, callbacks: {
         onInitializationFinished: () => void;
         onEndReached: () => void;
     });
+    get activeChunk(): PlayerChunk<TItem, TChunk>;
+    get loadedChunks(): PlayerChunk<TItem, TChunk>[];
+    get flattenedChunkItems(): TItem[];
+    get flattenedActiveChunkItemIndex(): number;
     initialize: () => Promise<void>;
     setActiveChunkIndex: (index: number) => Promise<void>;
     activateItemAtFlattenedIndex: (index: number) => Promise<void>;

package/dist/ui/player/providers/chunks-player-buffer/player-chunks-manager.svelte.js

@@ -3,14 +3,27 @@ const CHUNKS_BUFFER_SIZE = 5;
 const FIXED_START_INDEX = 0;
 export class PlayerChunksManager {
     provider;
-    callabacks;
-    activeChunk = $derived.by(() => this._loadedChunks[this._activeChunkIndex] ?? null);
-    loadedChunks = $derived.by(() => this._loadedChunks);
-    flattenedChunkItems = $derived.by(() => this._loadedChunks.reduce((acc, chunk) => {
-        acc.push(...chunk.items);
-        return acc;
-    }, []));
-    flattenedActiveChunkItemIndex = $derived.by(() => {
+    callbacks;
+    _activeChunkIndex = $state(-1);
+    _loadedChunks = $state.raw([]);
+    _isLoading = $state(false);
+    constructor(provider, callbacks) {
+        this.provider = provider;
+        this.callbacks = callbacks;
+    }
+    get activeChunk() {
+        return this._loadedChunks[this._activeChunkIndex] ?? null;
+    }
+    get loadedChunks() {
+        return this._loadedChunks;
+    }
+    get flattenedChunkItems() {
+        return this._loadedChunks.reduce((acc, chunk) => {
+            acc.push(...chunk.items);
+            return acc;
+        }, []);
+    }
+    get flattenedActiveChunkItemIndex() {
         if (!this.activeChunk || !this.activeChunk.activeChunkItem) {
             return -1;
         }
@@ -19,16 +32,9 @@ export class PlayerChunksManager {
             itemsBeforeActiveChunk += this._loadedChunks[i].items.length;
         }
         return itemsBeforeActiveChunk + this.activeChunk.activeChunkItem.indexWithinChunk;
-    });
-    _activeChunkIndex = $state(-1);
-    _loadedChunks = $state.raw([]);
-    _isLoading = $state(false);
-    constructor(provider, callabacks) {
-        this.provider = provider;
-        this.callabacks = callabacks;
     }
     initialize = async () => {
-        const { onInitializationFinished, onEndReached } = this.callabacks;
+        const { onInitializationFinished, onEndReached } = this.callbacks;
         const handleInitialized = async () => {
             const startIndex = Math.min(FIXED_START_INDEX, this._loadedChunks.length - 1);
             const populateChunkResult = await this.populateChunkAtIndex(startIndex, (currentIndex) => currentIndex + 1);
@@ -58,6 +64,8 @@ export class PlayerChunksManager {
         this._activeChunkIndex = index;
         this._loadedChunks.forEach((c) => c.setActiveItemIndex(0, false));
         await this.populateChunkAtIndex(this._activeChunkIndex + 1, (currentIndex) => currentIndex + 1);
+        // Don't wait for warm up to be finished, it runs in the background
+        this.warmUp();
     };
     activateItemAtFlattenedIndex = async (index) => {
         const activeChunkId = this.activeChunk?.model.id;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "10.0.0",
+  "version": "10.1.1",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",

package/dist/streams/layout/element-views/stream-element-localization.d.ts

@@ -1,7 +0,0 @@
-import { type Locale } from '../../../core/locale';
-export declare class StreamElementLocalization {
-    priceElementLocalization: Locale;
-    stockElementLocalization: Locale;
-    shortVideoElementLocalization: Locale;
-    constructor(locale: Locale);
-}

package/dist/streams/layout/element-views/stream-element-localization.js

@@ -1,11 +0,0 @@
-import {} from '../../../core/locale';
-export class StreamElementLocalization {
-    priceElementLocalization;
-    stockElementLocalization;
-    shortVideoElementLocalization;
-    constructor(locale) {
-        this.priceElementLocalization = locale;
-        this.stockElementLocalization = locale;
-        this.shortVideoElementLocalization = locale;
-    }
-}