@streamscloud/embeddable 1.1.2

package/dist/streams/components/operations.graphql

@@ -0,0 +1,35 @@
+fragment StreamComponentPayloadFragment on StreamComponent {
+  slotId
+  type
+  params {
+    shortVideo {
+      ...ShortVideoStreamComponentParamsFragment
+    }
+    images {
+      ...ImagesStreamComponentParamsFragment
+    }
+    product {
+      ...ProductStreamComponentParamsFragment
+    }
+  }
+}
+
+fragment ShortVideoStreamComponentParamsFragment on ShortVideoStreamComponentParams {
+  data {
+    ...ShortVideoStreamComponentDataFragment
+  }
+}
+
+fragment ImagesStreamComponentParamsFragment on ImagesStreamComponentParams {
+  images {
+    id
+    url
+  }
+  mode
+}
+
+fragment ProductStreamComponentParamsFragment on ProductStreamComponentParams {
+  data {
+    ...ProductStreamComponentDataFragment
+  }
+}

package/dist/streams/components/product/cmp.product-component.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">import { toPriceRepresentation } from '../../../products/price-helper';
+import { ImageRounded } from '../../../ui/image';
+import { ProportionalContainer } from '../../../ui/proportional-container';
+let { model, fitToContainer = true } = $props();
+</script>
+
+<div class="product-component">
+  {#if fitToContainer}
+    <div class="product-component__image">
+      <ImageRounded src={model.image} noBorders={true} />
+    </div>
+  {:else}
+    <ProportionalContainer ratio={4 / 5}>
+      <ImageRounded src={model.image} noBorders={true} />
+    </ProportionalContainer>
+  {/if}
+  <div class="product-component__name">{model.title}</div>
+  <div class="product-component__price">
+    <div class="product-price">
+      {#if !model.salePrice}
+        <div class="product-price__price">{toPriceRepresentation(model.price, model.currency)}</div>
+      {:else}
+        <div class="product-price__before-price">
+          {toPriceRepresentation(model.price, model.currency)}
+        </div>
+        <div class="product-price__price product-price__price--sale">
+          {toPriceRepresentation(model.salePrice, model.currency)}
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  {#if model.link}
+    <a href={model.link} target="_blank" rel="noopener noreferrer" class="product-component__link" aria-label="none">&nbsp;</a>
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.product-component {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  container-type: inline-size;
+  --image--rounded--outer--border-radius: 0.25em;
+}
+.product-component__image {
+  flex: 1;
+  min-height: 0;
+}
+.product-component__name {
+  width: 100%;
+  font-weight: 500;
+  font-size: 0.9375rem;
+  color: #2e2e2e;
+  margin-top: 0.5rem;
+  padding: 0 0.3125rem;
+  text-align: center;
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 300px) {
+  .product-component__name {
+    font-size: 0.75rem;
+    margin-top: 0.3125rem;
+    padding: 0 0.25rem;
+  }
+}
+.product-component__price {
+  padding-top: 0.3125rem;
+  margin-top: auto;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 300px) {
+  .product-component__price {
+    padding-top: 0.25rem;
+  }
+}
+.product-component__link {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.product-price {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4375rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 300px) {
+  .product-price {
+    gap: 0.3125rem;
+  }
+}
+.product-price__before-price {
+  width: 100%;
+  color: #e5e7eb;
+  text-decoration: line-through;
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-align: center;
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 300px) {
+  .product-price__before-price {
+    font-size: 0.625em;
+  }
+}
+.product-price__price {
+  width: 100%;
+  font-size: 1.0625em;
+  color: #2e2e2e;
+  font-weight: 800;
+  margin-top: auto;
+  text-align: center;
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 300px) {
+  .product-price__price {
+    font-size: 0.9375em;
+  }
+}</style>

package/dist/streams/components/product/cmp.product-component.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ProductComponentData } from './types';
+type Props = {
+    model: ProductComponentData;
+    fitToContainer?: boolean;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/streams/components/product/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ProductComponent } from './cmp.product-component.svelte';
+export { mapToProductComponentData } from './mapper';
+export type { ProductComponentData } from './types';

package/dist/streams/components/product/index.js

@@ -0,0 +1,2 @@
+export { default as ProductComponent } from './cmp.product-component.svelte';
+export { mapToProductComponentData } from './mapper';

package/dist/streams/components/product/mapper.d.ts

@@ -0,0 +1,3 @@
+import type { ProductStreamComponentDataFragment } from './operations.generated';
+import type { ProductComponentData } from './types';
+export declare const mapToProductComponentData: (payload: ProductStreamComponentDataFragment) => ProductComponentData;

package/dist/streams/components/product/mapper.js

@@ -0,0 +1,14 @@
+import { getMediaItemImageUrl } from '../../../core/media';
+import { shouldUseSalePrice } from '../../../products/price-helper';
+export const mapToProductComponentData = (payload) => {
+    const effectiveSalePrice = payload.priceAndAvailability.productSalePrices?.find((x) => shouldUseSalePrice(payload.priceAndAvailability.price, x.salePrice, x.salePriceEffectiveDateFrom, x.salePriceEffectiveDateTo));
+    return {
+        id: payload.id,
+        title: payload.title,
+        image: payload.media[0] ? getMediaItemImageUrl(payload.media[0]) : null,
+        link: payload.link,
+        currency: payload.priceAndAvailability.currency,
+        price: payload.priceAndAvailability.price,
+        salePrice: effectiveSalePrice?.salePrice || null
+    };
+};

package/dist/streams/components/product/operations.generated.d.ts

@@ -0,0 +1,22 @@
+import type * as SchemaTypes from '../../../../gql/types';
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type ProductStreamComponentDataFragment = {
+    title: string;
+    id: string;
+    link: string | null;
+    media: Array<{
+        url: string;
+        thumbnailUrl: string | null;
+        type: SchemaTypes.MediaType;
+    }>;
+    priceAndAvailability: {
+        currency: SchemaTypes.Currency;
+        price: number;
+        productSalePrices: Array<{
+            salePrice: number;
+            salePriceEffectiveDateFrom: any | null;
+            salePriceEffectiveDateTo: any | null;
+        }> | null;
+    };
+};
+export declare const ProductStreamComponentDataFragmentDoc: DocumentNode<ProductStreamComponentDataFragment, unknown>;

package/dist/streams/components/product/operations.generated.js

@@ -0,0 +1,53 @@
+export const ProductStreamComponentDataFragmentDoc = {
+    kind: 'Document',
+    definitions: [
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'ProductStreamComponentDataFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Product' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'media' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'url' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'thumbnailUrl' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                            ]
+                        }
+                    },
+                    { kind: 'Field', name: { kind: 'Name', value: 'title' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'link' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'priceAndAvailability' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'currency' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'price' } },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'productSalePrices' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [
+                                            { kind: 'Field', name: { kind: 'Name', value: 'salePrice' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'salePriceEffectiveDateFrom' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'salePriceEffectiveDateTo' } }
+                                        ]
+                                    }
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+};

package/dist/streams/components/product/operations.graphql

@@ -0,0 +1,19 @@
+fragment ProductStreamComponentDataFragment on Product {
+  media {
+    url
+    thumbnailUrl
+    type
+  }
+  title
+  id
+  link
+  priceAndAvailability {
+    currency
+    price
+    productSalePrices {
+      salePrice
+      salePriceEffectiveDateFrom
+      salePriceEffectiveDateTo
+    }
+  }
+}

package/dist/streams/components/product/types.d.ts

@@ -0,0 +1,10 @@
+import { Currency } from '../../../products';
+export type ProductComponentData = {
+    id: string;
+    title: string;
+    image: string | null;
+    link: string | null;
+    price: number;
+    currency: Currency;
+    salePrice: number | null;
+};

package/dist/streams/components/product/types.js

@@ -0,0 +1 @@
+import { Currency } from '../../../products';

package/dist/streams/components/short-video/cmp.short-video-component.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">import { ShortVideosViewer } from '../../../short-videos/short-video-viewer';
+import { StreamComponentsLocalization } from '../stream-components-localization.svelte';
+let { model, autoplay = true, localization } = $props();
+</script>
+
+<ShortVideosViewer
+  model={model}
+  autoplay={autoplay ? 'on-appearance' : false}
+  localization={{ viewsCount: localization.viewsCount, timeAgoLocalization: localization.timeAgoLocalization }} />

package/dist/streams/components/short-video/cmp.short-video-component.svelte.d.ts

@@ -0,0 +1,10 @@
+import { StreamComponentsLocalization } from '../stream-components-localization.svelte';
+import type { ShortVideoStreamComponentData } from './types';
+type Props = {
+    model: ShortVideoStreamComponentData;
+    autoplay?: boolean;
+    localization: StreamComponentsLocalization;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/streams/components/short-video/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ShortVideoComponent } from './cmp.short-video-component.svelte';
+export { mapToShortVideoStreamComponentData } from './mapper';
+export type { ShortVideoStreamComponentData } from './types';

package/dist/streams/components/short-video/index.js

@@ -0,0 +1,2 @@
+export { default as ShortVideoComponent } from './cmp.short-video-component.svelte';
+export { mapToShortVideoStreamComponentData } from './mapper';

package/dist/streams/components/short-video/mapper.d.ts

@@ -0,0 +1,3 @@
+import type { ShortVideoStreamComponentDataFragment } from './operations.generated';
+import type { ShortVideoStreamComponentData } from './types';
+export declare const mapToShortVideoStreamComponentData: (payload: ShortVideoStreamComponentDataFragment) => ShortVideoStreamComponentData;

package/dist/streams/components/short-video/mapper.js

@@ -0,0 +1,4 @@
+import { mapShortVideoViewerModel } from '../../../short-videos/short-video-viewer/mapper';
+export const mapToShortVideoStreamComponentData = (payload) => {
+    return mapShortVideoViewerModel(payload);
+};

package/dist/streams/components/short-video/operations.generated.d.ts

@@ -0,0 +1,56 @@
+import type * as SchemaTypes from '../../../../gql/types';
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type ShortVideoStreamComponentDataFragment = {
+    id: string;
+    enableSocialInteractions: boolean;
+    postHeading: {
+        sourceImage: string | null;
+        sourceName: string;
+        postDisplayDate: any;
+        postViewsCount: number;
+    };
+    allProducts: Array<{
+        title: string;
+        id: string;
+        link: string | null;
+        media: Array<{
+            url: string;
+            thumbnailUrl: string | null;
+            type: SchemaTypes.MediaType;
+        }>;
+        priceAndAvailability: {
+            currency: SchemaTypes.Currency;
+            price: number;
+            productSalePrices: Array<{
+                salePrice: number;
+                salePriceEffectiveDateFrom: any | null;
+                salePriceEffectiveDateTo: any | null;
+            }> | null;
+        };
+    }>;
+    ad: {
+        id: string;
+        title: string;
+        description: string | null;
+        buttonText: string | null;
+        buttonUrl: string | null;
+        openLinkInNewWindow: boolean | null;
+        type: SchemaTypes.AdType;
+        media: Array<{
+            type: SchemaTypes.MediaType;
+            url: string;
+            thumbnailUrl: string | null;
+        }>;
+    } | null;
+    postData: {
+        media: Array<{
+            url: string;
+            thumbnailUrl: string | null;
+            type: SchemaTypes.MediaType;
+        }>;
+        shortVideoData: {
+            text: string | null;
+        } | null;
+    };
+};
+export declare const ShortVideoStreamComponentDataFragmentDoc: DocumentNode<ShortVideoStreamComponentDataFragment, unknown>;

package/dist/streams/components/short-video/operations.generated.js

@@ -0,0 +1,193 @@
+export const ShortVideoStreamComponentDataFragmentDoc = {
+    kind: 'Document',
+    definitions: [
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'ShortVideoStreamComponentDataFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Post' } },
+            selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ShortVideoViewerPayloadFragment' } }] }
+        },
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'ProductCardPayloadFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Product' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'media' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'url' },
+                                    arguments: [
+                                        { kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }
+                                    ]
+                                },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'thumbnailUrl' },
+                                    arguments: [
+                                        { kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }
+                                    ]
+                                },
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                            ]
+                        }
+                    },
+                    { kind: 'Field', name: { kind: 'Name', value: 'title' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'link' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'priceAndAvailability' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'currency' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'price' } },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'productSalePrices' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [
+                                            { kind: 'Field', name: { kind: 'Name', value: 'salePrice' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'salePriceEffectiveDateFrom' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'salePriceEffectiveDateTo' } }
+                                        ]
+                                    }
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        },
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'AdViewPayloadFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Ad' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'title' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'description' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'buttonText' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'buttonUrl' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'openLinkInNewWindow' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'type' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'media' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'url' },
+                                    arguments: [
+                                        { kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }
+                                    ]
+                                },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'thumbnailUrl' },
+                                    arguments: [
+                                        { kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }
+                                    ]
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        },
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'ShortVideoViewerPayloadFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Post' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'enableSocialInteractions' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'postHeading' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'sourceImage' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'sourceName' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'postDisplayDate' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'postViewsCount' } }
+                            ]
+                        }
+                    },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'allProducts' },
+                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ProductCardPayloadFragment' } }] }
+                    },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'ad' },
+                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'AdViewPayloadFragment' } }] }
+                    },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'postData' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'media' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'url' },
+                                                arguments: [
+                                                    {
+                                                        kind: 'Argument',
+                                                        name: { kind: 'Name', value: 'scale' },
+                                                        value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } }
+                                                    }
+                                                ]
+                                            },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'thumbnailUrl' },
+                                                arguments: [
+                                                    {
+                                                        kind: 'Argument',
+                                                        name: { kind: 'Name', value: 'scale' },
+                                                        value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } }
+                                                    }
+                                                ]
+                                            },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                                        ]
+                                    }
+                                },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'shortVideoData' },
+                                    selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'text' } }] }
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+};

package/dist/streams/components/short-video/operations.graphql

@@ -0,0 +1,3 @@
+fragment ShortVideoStreamComponentDataFragment on Post {
+  ...ShortVideoViewerPayloadFragment
+}

package/dist/streams/components/short-video/types.d.ts

@@ -0,0 +1,2 @@
+import type { ShortVideoViewerModel } from '../../../short-videos/short-video-viewer';
+export type ShortVideoStreamComponentData = ShortVideoViewerModel;

package/dist/streams/components/short-video/types.js

@@ -0,0 +1 @@
+export {};

package/dist/streams/components/stream-components-localization.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ITimeAgoLocalization } from '../../ui/time-ago';
+export interface IStreamComponentsLocalization {
+    viewsCount?: (count: number) => string;
+    timeAgoLocalization?: ITimeAgoLocalization;
+}
+export declare class StreamComponentsLocalization {
+    viewsCount: (count: number) => string;
+    timeAgoLocalization: ITimeAgoLocalization | undefined;
+    constructor(init?: IStreamComponentsLocalization);
+}