@streamscloud/embeddable 9.0.0 → 10.1.0

package/dist/streams/{stream-player → data-loaders}/operations.generated.d.ts

@@ -1,30 +1,33 @@
 import type * as SchemaTypes from '../../../gql/types';
 import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
-export type GetStreamQueryVariables = SchemaTypes.Exact<{
-    id: SchemaTypes.Scalars['String']['input'];
+export type GetStreamsQueryVariables = SchemaTypes.Exact<{
+    input: SchemaTypes.EmbedStreamsInput;
 }>;
-export type GetStreamQuery = {
-    stream: {
-        id: string;
-        title: string;
-        subTitle: string | null;
-        createdAt: any;
-        publishedAt: any | null;
-        pagesCount: number;
-        cover: {
-            url: string;
-        } | null;
-        ownerProfile: {
-            image: string | null;
-            name: string;
+export type GetStreamsQuery = {
+    streams: {
+        continuationToken: string | null;
+        items: Array<{
             id: string;
-            type: SchemaTypes.ProfileType;
-        };
-        availableFrom: {
-            image: string;
-            name: string;
-        } | null;
-    } | null;
+            title: string;
+            subTitle: string | null;
+            createdAt: any;
+            publishedAt: any | null;
+            pagesCount: number;
+            cover: {
+                url: string;
+            } | null;
+            ownerProfile: {
+                image: string | null;
+                name: string;
+                id: string;
+                type: SchemaTypes.ProfileType;
+            };
+            availableFrom: {
+                image: string;
+                name: string;
+            } | null;
+        }>;
+    };
 };
 export type GetStreamPagesQueryVariables = SchemaTypes.Exact<{
     input: SchemaTypes.EmbedStreamPagesInput;
@@ -65,5 +68,5 @@ export type StreamPlayerPayloadFragment = {
     } | null;
 };
 export declare const StreamPlayerPayloadFragmentDoc: DocumentNode<StreamPlayerPayloadFragment, unknown>;
-export declare const GetStreamDocument: DocumentNode<GetStreamQuery, GetStreamQueryVariables>;
+export declare const GetStreamsDocument: DocumentNode<GetStreamsQuery, GetStreamsQueryVariables>;
 export declare const GetStreamPagesDocument: DocumentNode<GetStreamPagesQuery, GetStreamPagesQueryVariables>;

package/dist/streams/{stream-player → data-loaders}/operations.generated.js

@@ -48,18 +48,18 @@ export const StreamPlayerPayloadFragmentDoc = {
         }
     ]
 };
-export const GetStreamDocument = {
+export const GetStreamsDocument = {
     kind: 'Document',
     definitions: [
         {
             kind: 'OperationDefinition',
             operation: 'query',
-            name: { kind: 'Name', value: 'GetStream' },
+            name: { kind: 'Name', value: 'GetStreams' },
             variableDefinitions: [
                 {
                     kind: 'VariableDefinition',
-                    variable: { kind: 'Variable', name: { kind: 'Name', value: 'id' } },
-                    type: { kind: 'NonNullType', type: { kind: 'NamedType', name: { kind: 'Name', value: 'String' } } }
+                    variable: { kind: 'Variable', name: { kind: 'Name', value: 'input' } },
+                    type: { kind: 'NonNullType', type: { kind: 'NamedType', name: { kind: 'Name', value: 'EmbedStreamsInput' } } }
                 }
             ],
             selectionSet: {
@@ -67,19 +67,20 @@ export const GetStreamDocument = {
                 selections: [
                     {
                         kind: 'Field',
-                        alias: { kind: 'Name', value: 'stream' },
-                        name: { kind: 'Name', value: 'embedStream' },
-                        arguments: [
-                            {
-                                kind: 'Argument',
-                                name: { kind: 'Name', value: 'input' },
-                                value: {
-                                    kind: 'ObjectValue',
-                                    fields: [{ kind: 'ObjectField', name: { kind: 'Name', value: 'id' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'id' } } }]
-                                }
-                            }
-                        ],
-                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'StreamPlayerPayloadFragment' } }] }
+                        alias: { kind: 'Name', value: 'streams' },
+                        name: { kind: 'Name', value: 'embedStreams' },
+                        arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'input' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'input' } } }],
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'items' },
+                                    selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'StreamPlayerPayloadFragment' } }] }
+                                },
+                                { kind: 'Field', name: { kind: 'Name', value: 'continuationToken' } }
+                            ]
+                        }
                     }
                 ]
             }

package/dist/streams/{stream-player → data-loaders}/operations.graphql

@@ -1,6 +1,9 @@
-query GetStream($id: String!) {
-  stream: embedStream(input: { id: $id }) {
-    ...StreamPlayerPayloadFragment
+query GetStreams($input: EmbedStreamsInput!) {
+  streams: embedStreams(input: $input) {
+    items {
+      ...StreamPlayerPayloadFragment
+    }
+    continuationToken
   }
 }
 

package/dist/streams/data-loaders/stream-pages-loader.d.ts

@@ -0,0 +1,10 @@
+import { type StreamPageViewerModel } from '../stream-page-viewer';
+import type { Client } from '@urql/core';
+export declare const getStreamPagesCursor: (input: {
+    streamId: string;
+    continuationToken: string | null | undefined;
+    graphql: Client;
+}) => Promise<{
+    items: StreamPageViewerModel[];
+    continuationToken: string | null;
+}>;

package/dist/streams/data-loaders/stream-pages-loader.js

@@ -0,0 +1,33 @@
+import { ImageScale } from '../..';
+import { mapToStreamPageViewerModel } from '../stream-page-viewer';
+import { GetStreamPagesDocument } from './operations.generated';
+export const getStreamPagesCursor = async (input) => {
+    const { streamId, continuationToken, graphql } = input;
+    const emptyResult = { items: [], continuationToken: null };
+    if (continuationToken === null) {
+        return emptyResult;
+    }
+    try {
+        const payload = await graphql
+            .query(GetStreamPagesDocument, {
+            input: {
+                limit: 10,
+                continuationToken,
+                filter: { streamId }
+            },
+            image_scale: ImageScale.OriginalEncoded
+        })
+            .toPromise();
+        const data = payload.data?.streamPages;
+        if (!data) {
+            return emptyResult;
+        }
+        return {
+            items: data.items.map(mapToStreamPageViewerModel),
+            continuationToken: data.continuationToken
+        };
+    }
+    catch {
+        return emptyResult;
+    }
+};

package/dist/streams/data-loaders/streams-loader.d.ts

@@ -0,0 +1,19 @@
+import { StreamStatus } from '../../core/enums';
+import type { StreamPlayerModel } from '../streams-player/types';
+import type { Client } from '@urql/core';
+export declare const getStreamsCursor: (input: {
+    filter: {
+        ids?: string[];
+        categoryId?: string;
+        excludeIds?: string[];
+        mediaPageId?: string;
+        statuses?: StreamStatus[];
+        showInFeed?: boolean;
+    };
+    limit: number;
+    continuationToken?: string | null;
+    graphql: Client;
+}) => Promise<{
+    items: StreamPlayerModel[];
+    continuationToken: string | null;
+}>;

package/dist/streams/data-loaders/streams-loader.js

@@ -0,0 +1,28 @@
+import { StreamStatus } from '../../core/enums';
+import { mapToStreamPlayerModel } from './mapper';
+import { GetStreamsDocument } from './operations.generated';
+export const getStreamsCursor = async (input) => {
+    const { filter, limit, continuationToken, graphql } = input;
+    const { mediaPageId, ids, categoryId, excludeIds, statuses, showInFeed } = filter;
+    const payload = await graphql
+        .query(GetStreamsDocument, {
+        input: {
+            filter: {
+                ids,
+                mediaPageId,
+                categoryId,
+                excludeIds,
+                statuses,
+                showInFeed
+            },
+            limit,
+            continuationToken
+        }
+    })
+        .toPromise();
+    const streams = payload.data?.streams.items ?? [];
+    return {
+        items: streams.map(mapToStreamPlayerModel),
+        continuationToken: payload.data?.streams?.continuationToken ?? null
+    };
+};

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));
         }