@streamscloud/embeddable 2.5.0 → 2.6.0

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

@@ -1,10 +1,11 @@
-import { type IPriceStreamElementLocalization } from './price-stream-element-localization.svelte';
+import type { Locale } from '../../../core/locale';
+import { type IPriceStreamElementLocalization } from './price-stream-element-localization';
 import type { PriceStreamElementModel } from '../elements';
 import type { StreamLayoutProductPriceModel } from '../models';
 type Props = {
     model: PriceStreamElementModel;
     data: StreamLayoutProductPriceModel;
-    localization?: IPriceStreamElementLocalization;
+    localization: IPriceStreamElementLocalization | Locale;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -1,6 +1,8 @@
 <script lang="ts">import { ShortVideoViewer } from '../../../short-videos/short-video-viewer';
+import { ShortVideoStreamElementLocalization } from './short-video-stream-element-localization';
 import { mapToShortVideoViewerModel } from '../models';
-let { data, on } = $props();
+let { data, localization: localizationInit, on } = $props();
+const localization = $derived(new ShortVideoStreamElementLocalization(localizationInit));
 </script>
 
-<ShortVideoViewer model={mapToShortVideoViewerModel(data)} autoplay={false} on={on} />
+<ShortVideoViewer model={mapToShortVideoViewerModel(data)} autoplay={false} localization={localization.shortVideoViewerLocalization} on={on} />

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

@@ -1,6 +1,9 @@
+import type { Locale } from '../../../core/locale';
+import { type IShortVideoStreamElementLocalization } from './short-video-stream-element-localization';
 import { type StreamLayoutShortVideoModel } from '../models';
 type Props = {
     data: StreamLayoutShortVideoModel;
+    localization: IShortVideoStreamElementLocalization | Locale;
     on?: {
         progress?: (progress: number) => void;
     };

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

@@ -0,0 +1,74 @@
+<script lang="ts">var _a;
+import { StockStreamElementLocalization } from './stock-stream-element-localization';
+import { StockStreamElementLevel } from '../enums';
+import { mapFlexJustifyContent, transformNumericValue } from '../styles-transformer';
+let { model, heightOverrideDdu, localization: localizationInit } = $props();
+const localization = $derived(new StockStreamElementLocalization(localizationInit));
+const height = $derived(heightOverrideDdu || ((_a = model.styles) === null || _a === void 0 ? void 0 : _a.height) || 16);
+const containerStyles = $derived.by(() => {
+    var _a;
+    const values = [
+        `align-items: center;`,
+        `height: ${transformNumericValue(height)}; gap: 1cqi;`,
+        `justify-content: ${mapFlexJustifyContent((_a = model.styles) === null || _a === void 0 ? void 0 : _a.horizontalAlign)};`
+    ];
+    return values.join('');
+});
+const dotCustomStyles = $derived.by(() => {
+    const values = [`height: ${transformNumericValue(height)};`, `width: ${transformNumericValue(height)};`];
+    return values.join('');
+});
+const quantityCustomStyles = $derived.by(() => {
+    const values = [`font-size: ${transformNumericValue(height * 0.75)};`];
+    return values.join('');
+});
+</script>
+
+<div class="stock-stream-element" style={containerStyles}>
+  <div
+    class="stock-stream-element__dot"
+    style={dotCustomStyles}
+    class:stock-stream-element__dot--high={model.level === StockStreamElementLevel.High}
+    class:stock-stream-element__dot--medium={model.level === StockStreamElementLevel.Medium}
+    class:stock-stream-element__dot--low={model.level === StockStreamElementLevel.Low}
+    class:stock-stream-element__dot--out-of-stock={model.level === StockStreamElementLevel.OutOfStock}>
+    &nbsp;
+  </div>
+  <div class="stock-stream-element__quantity" style={quantityCustomStyles}>
+    {localization.quantity(model.quantity, [StockStreamElementLevel.Low, StockStreamElementLevel.OutOfStock].includes(model.level))}
+    {#if model.textAfter}
+      &nbsp;{model.textAfter}
+    {/if}
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.stock-stream-element {
+  display: flex;
+}
+.stock-stream-element__dot {
+  border-radius: 50%;
+}
+.stock-stream-element__dot--high {
+  background-color: #0cce6b;
+}
+.stock-stream-element__dot--medium {
+  background-color: #ffa62b;
+}
+.stock-stream-element__dot--low {
+  background-color: #e71d36;
+}
+.stock-stream-element__dot--out-of-stock {
+  border: 1px solid #144ab0;
+  background-color: #ffffff;
+}</style>

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

@@ -0,0 +1,11 @@
+import type { Locale } from '../../../core/locale';
+import { type IStockStreamElementLocalization } from './stock-stream-element-localization';
+import type { StockStreamElementModel } from '../elements';
+type Props = {
+    model: StockStreamElementModel;
+    heightOverrideDdu?: number;
+    localization: IStockStreamElementLocalization | 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,8 @@
-<script lang="ts">import { AnnotationStreamElementView, ContainerStreamElementView, ImageRefStreamElementView, ImagesStreamElementView, PriceStreamElementView, ShortVideoStreamElementView, SpacerStreamElementView, TextRefStreamElementView, TextStreamElementView, WebViewStreamElementView } from '.';
-import { StreamElementLocalization } from './stream-element-localization.svelte';
+<script lang="ts">import { AnnotationStreamElementView, ContainerStreamElementView, ImageRefStreamElementView, ImagesStreamElementView, PriceStreamElementView, ShortVideoStreamElementView, SpacerStreamElementView, StockStreamElementView, TextRefStreamElementView, TextStreamElementView, WebViewStreamElementView } from '.';
+import { StreamElementLocalization } from './stream-element-localization';
 import { StreamComponentDataType, StreamElementStyleDirection, StreamElementType } from '../enums';
-let { model, data, constainerDirection = StreamElementStyleDirection.Vertical, localization: localizatoinInit, on } = $props();
-const localization = $derived(new StreamElementLocalization(localizatoinInit));
+let { model, data, constainerDirection = StreamElementStyleDirection.Vertical, localization: localizationInit, on } = $props();
+const localization = $derived(new StreamElementLocalization(localizationInit));
 const shortVideoModel = $derived.by(() => {
     if (!data) {
         return null;
@@ -44,9 +44,7 @@ const productModel = $derived.by(() => {
 {#if model.type === StreamElementType.Annotation}
   <AnnotationStreamElementView model={model} />
 {:else if model.type === StreamElementType.Container}
-  <ContainerStreamElementView model={model} data={data} localization={localizatoinInit} />
-{:else if model.type === StreamElementType.Spacer}
-  <SpacerStreamElementView model={model} parentContainerDirection={constainerDirection} />
+  <ContainerStreamElementView model={model} data={data} localization={localizationInit} />
 {:else if model.type === StreamElementType.ImageRef && data}
   <ImageRefStreamElementView model={model} data={data} />
 {:else if model.type === StreamElementType.Images && imagesModel?.length}
@@ -56,6 +54,7 @@ const productModel = $derived.by(() => {
 {:else if model.type === StreamElementType.ShortVideo && shortVideoModel}
   <ShortVideoStreamElementView
     data={shortVideoModel}
+    localization={localization.shortVideoElementLocalization}
     on={on
       ? {
           progress: (progress: Number) => {
@@ -63,6 +62,10 @@ const productModel = $derived.by(() => {
           }
         }
       : undefined} />
+{:else if model.type === StreamElementType.Spacer}
+  <SpacerStreamElementView model={model} parentContainerDirection={constainerDirection} />
+{:else if model.type === StreamElementType.Stock}
+  <StockStreamElementView model={model} localization={localization.stockElementLocalization} />
 {:else if model.type === StreamElementType.Text}
   <TextStreamElementView model={model} />
 {:else if model.type === StreamElementType.TextRef && data}

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

@@ -1,4 +1,5 @@
-import { type IStreamElementLocalization } from './stream-element-localization.svelte';
+import type { Locale } from '../../../core/locale';
+import { type IStreamElementLocalization } from './stream-element-localization';
 import type { StreamElementModel } from '../elements';
 import { StreamElementStyleDirection } from '../enums';
 import type { StreamSlotData } from '../slot-data';
@@ -6,7 +7,7 @@ type Props = {
     model: StreamElementModel;
     data: StreamSlotData | null;
     constainerDirection?: StreamElementStyleDirection;
-    localization?: IStreamElementLocalization;
+    localization: IStreamElementLocalization | Locale;
     on?: {
         progress?: (videoId: string, progress: number) => void;
     };

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

@@ -1,8 +1,12 @@
 <script lang="ts">import { LineClamp } from '../../../ui/line-clamp';
 import { generateTextStyles } from '../styles-transformer';
-let { model } = $props();
+let { model, placeholder } = $props();
 </script>
 
 <div class="text-stream-element" style={generateTextStyles(model.styles)}>
-  <LineClamp value={model.value} maxLines={model.styles?.maxLines || 'auto'} />
+  {#if model.value}
+    <LineClamp value={model.value} maxLines={model.styles?.maxLines || 'auto'} />
+  {:else if placeholder}
+    {@render placeholder()}
+  {/if}
 </div>

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

@@ -1,6 +1,8 @@
 import type { TextStreamElementModel } from '../elements';
+import type { Snippet } from 'svelte';
 type Props = {
     model: TextStreamElementModel;
+    placeholder?: Snippet;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -6,8 +6,11 @@ export { default as ImagesStreamElementView } from './cmp.images-stream-element.
 export { default as PriceStreamElementView } from './cmp.price-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';
 export { default as TextRefStreamElementView } from './cmp.text-ref-stream-element.svelte';
 export { default as TextStreamElementView } from './cmp.text-stream-element.svelte';
 export { default as WebViewStreamElementView } from './cmp.web-view-stream-element.svelte';
-export type { IStreamElementLocalization } from './stream-element-localization.svelte';
-export type { IPriceStreamElementLocalization } from './price-stream-element-localization.svelte';
+export type { IStreamElementLocalization } from './stream-element-localization';
+export type { IPriceStreamElementLocalization } from './price-stream-element-localization';
+export type { IStockStreamElementLocalization } from './stock-stream-element-localization';
+export type { IShortVideoStreamElementLocalization } from './short-video-stream-element-localization';

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

@@ -6,6 +6,7 @@ export { default as ImagesStreamElementView } from './cmp.images-stream-element.
 export { default as PriceStreamElementView } from './cmp.price-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';
 export { default as TextRefStreamElementView } from './cmp.text-ref-stream-element.svelte';
 export { default as TextStreamElementView } from './cmp.text-stream-element.svelte';
 export { default as WebViewStreamElementView } from './cmp.web-view-stream-element.svelte';

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

@@ -0,0 +1,13 @@
+import { type Locale } from '../../../core/locale';
+import type { IStockStreamElementLocalization } from './stock-stream-element-localization';
+export interface IPriceStreamElementLocalization {
+    saveValue?: (value: string | number) => string;
+    beforeValue?: (value: string) => string;
+    stockLocalization?: IStockStreamElementLocalization | Locale;
+}
+export declare class PriceStreamElementLocalization {
+    saveValue: (value: string | number) => string;
+    beforeValue: (value: string) => string;
+    stockLocalization: IStockStreamElementLocalization | Locale;
+    constructor(init: IPriceStreamElementLocalization | Locale);
+}

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

@@ -0,0 +1,21 @@
+import { isLocale } from '../../../core/locale';
+export class PriceStreamElementLocalization {
+    saveValue;
+    beforeValue;
+    stockLocalization;
+    constructor(init) {
+        this.saveValue = isLocale(init) ? loc.saveValue[init] : init.saveValue || loc.saveValue.en;
+        this.beforeValue = isLocale(init) ? loc.beforeValue[init] : init.beforeValue || loc.beforeValue.en;
+        this.stockLocalization = isLocale(init) ? init : init.stockLocalization || 'en';
+    }
+}
+const loc = {
+    saveValue: {
+        en: (value) => `Save ${value}`,
+        no: (value) => `Lagre ${value}`
+    },
+    beforeValue: {
+        en: (value) => `Before ${value}`,
+        no: (value) => `Før ${value}`
+    }
+};

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

@@ -0,0 +1,9 @@
+import { type Locale } from '../../../core/locale';
+import type { IShortVideoViewerLocalization } from '../../../short-videos/short-video-viewer';
+export interface IShortVideoStreamElementLocalization {
+    shortVideoViewerLocalization?: IShortVideoViewerLocalization | Locale;
+}
+export declare class ShortVideoStreamElementLocalization {
+    shortVideoViewerLocalization: IShortVideoViewerLocalization | Locale;
+    constructor(init: IShortVideoStreamElementLocalization | Locale);
+}

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

@@ -0,0 +1,7 @@
+import { isLocale } from '../../../core/locale';
+export class ShortVideoStreamElementLocalization {
+    shortVideoViewerLocalization;
+    constructor(init) {
+        this.shortVideoViewerLocalization = isLocale(init) ? init : init.shortVideoViewerLocalization || 'en';
+    }
+}

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

@@ -0,0 +1,8 @@
+import { type Locale } from '../../../core/locale';
+export interface IStockStreamElementLocalization {
+    quantity?: (value: number, low: boolean) => string;
+}
+export declare class StockStreamElementLocalization {
+    quantity: (value: number, low: boolean) => string;
+    constructor(init: IStockStreamElementLocalization | Locale);
+}

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

@@ -0,0 +1,26 @@
+import { isLocale } from '../../../core/locale';
+export class StockStreamElementLocalization {
+    quantity;
+    constructor(init) {
+        this.quantity = isLocale(init) ? loc.quantity[init] : init.quantity || loc.quantity.en;
+    }
+}
+const loc = {
+    quantity: {
+        en: (value, low) => {
+            if (value === 0) {
+                return 'Out of stock';
+            }
+            const plusMark = low || value < 2 ? '' : '+';
+            const unit = value === 1 ? 'pc' : 'pcs';
+            return `${value}${plusMark} ${unit} in stock`;
+        },
+        no: (value, low) => {
+            if (value === 0) {
+                return 'Ikke på lager';
+            }
+            const plusMark = low || value < 2 ? '' : '+';
+            return `${value}${plusMark} stk. på lager`;
+        }
+    }
+};

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

@@ -0,0 +1,15 @@
+import { type Locale } from '../../../core/locale';
+import type { IPriceStreamElementLocalization } from './price-stream-element-localization';
+import type { IShortVideoStreamElementLocalization } from './short-video-stream-element-localization';
+import type { IStockStreamElementLocalization } from './stock-stream-element-localization';
+export interface IStreamElementLocalization {
+    priceElementLocalization?: IPriceStreamElementLocalization | Locale;
+    stockElementLocalization?: IStockStreamElementLocalization | Locale;
+    shortVideoElementLocalization?: IShortVideoStreamElementLocalization | Locale;
+}
+export declare class StreamElementLocalization {
+    priceElementLocalization: IPriceStreamElementLocalization | Locale;
+    stockElementLocalization: IStockStreamElementLocalization | Locale;
+    shortVideoElementLocalization: IShortVideoStreamElementLocalization | Locale;
+    constructor(init: IStreamElementLocalization | Locale);
+}

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

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

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

@@ -1,6 +1,6 @@
-import { StreamElementType, ImagesStreamElementMode, AnnotationStreamElementPlacement } from './enums';
-import type { ImageStreamElementStyles, TextStreamElementStyles, ContainerStreamElementStyles, PriceStreamElementStyles, AnnotationStreamElementStyles } from './styles';
-export type StreamElementModel = AnnotationStreamElementModel | ContainerStreamElementModel | ImageRefStreamElementModel | ImagesStreamElementModel | PriceStreamElementModel | SpacerStreamElementModel | ShortVideoStreamElementModel | TextStreamElementModel | TextRefStreamElementModel | WebViewStreamElementModel;
+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;
 export type AnnotationStreamElementModel = {
     type: StreamElementType.Annotation;
     $id: string;
@@ -38,6 +38,8 @@ export type PriceStreamElementModel = {
     name?: string | null;
     excludeBeforePrice: boolean | null;
     includeCurrency: boolean | null;
+    textAfter: string | null;
+    stock?: StockStreamElementModel | null;
     styles: PriceStreamElementStyles | null;
 };
 export type ShortVideoStreamElementModel = {
@@ -51,6 +53,15 @@ export type SpacerStreamElementModel = {
     name?: string | null;
     value: number | null;
 };
+export type StockStreamElementModel = {
+    type: StreamElementType.Stock;
+    $id: string;
+    name?: string | null;
+    level: StockStreamElementLevel;
+    quantity: number;
+    textAfter: string | null;
+    styles: StockStreamElementStyles | null;
+};
 export type TextStreamElementModel = {
     type: StreamElementType.Text;
     $id: string;

package/dist/streams/layout/elements.js

@@ -1 +1 @@
-import { StreamElementType, ImagesStreamElementMode, AnnotationStreamElementPlacement } from './enums';
+import { StreamElementType, ImagesStreamElementMode, AnnotationStreamElementPlacement, StockStreamElementLevel } from './enums';

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

@@ -10,8 +10,9 @@ export declare enum StreamElementType {
     ImageRef = "IMAGE_REF",
     Images = "IMAGES",
     Price = "PRICE",
-    Spacer = "SPACER",
     ShortVideo = "SHORT_VIDEO",
+    Spacer = "SPACER",
+    Stock = "STOCK",
     Text = "TEXT",
     TextRef = "TEXT_REF",
     WebView = "WEB_VIEW"
@@ -27,6 +28,12 @@ export declare enum ImagesStreamElementMode {
     Gallery = "GALLERY",
     Slider = "SLIDER"
 }
+export declare enum StockStreamElementLevel {
+    High = "HIGH",
+    Medium = "MEDIUM",
+    Low = "LOW",
+    OutOfStock = "OUT_OF_STOCK"
+}
 export declare enum StreamElementStyleMediaFit {
     Cover = "COVER",
     Contain = "CONTAIN"

package/dist/streams/layout/enums.js

@@ -12,8 +12,9 @@ export var StreamElementType;
     StreamElementType["ImageRef"] = "IMAGE_REF";
     StreamElementType["Images"] = "IMAGES";
     StreamElementType["Price"] = "PRICE";
-    StreamElementType["Spacer"] = "SPACER";
     StreamElementType["ShortVideo"] = "SHORT_VIDEO";
+    StreamElementType["Spacer"] = "SPACER";
+    StreamElementType["Stock"] = "STOCK";
     StreamElementType["Text"] = "TEXT";
     StreamElementType["TextRef"] = "TEXT_REF";
     StreamElementType["WebView"] = "WEB_VIEW";
@@ -31,6 +32,13 @@ export var ImagesStreamElementMode;
     ImagesStreamElementMode["Gallery"] = "GALLERY";
     ImagesStreamElementMode["Slider"] = "SLIDER";
 })(ImagesStreamElementMode || (ImagesStreamElementMode = {}));
+export var StockStreamElementLevel;
+(function (StockStreamElementLevel) {
+    StockStreamElementLevel["High"] = "HIGH";
+    StockStreamElementLevel["Medium"] = "MEDIUM";
+    StockStreamElementLevel["Low"] = "LOW";
+    StockStreamElementLevel["OutOfStock"] = "OUT_OF_STOCK";
+})(StockStreamElementLevel || (StockStreamElementLevel = {}));
 export var StreamElementStyleMediaFit;
 (function (StreamElementStyleMediaFit) {
     StreamElementStyleMediaFit["Cover"] = "COVER";

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

@@ -59,6 +59,10 @@ const removeElementIdRecursive = (element) => {
             delete annotation.$id;
         });
     }
+    if (element.type === StreamElementType.Price && element.stock) {
+        // @ts-expect-error - clearing local data before sending to the server
+        delete element.stock.$id;
+    }
 };
 export class IdPopulator {
     static populateLayoutIds(layout) {
@@ -82,5 +86,8 @@ export class IdPopulator {
         if (element.type === StreamElementType.ImageRef && element.annotations) {
             element.annotations.forEach((element) => IdPopulator.populateElementId(element));
         }
+        if (element.type === StreamElementType.Price && element.stock) {
+            IdPopulator.populateElementId(element.stock);
+        }
     }
 }

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

@@ -37,6 +37,10 @@ export type PriceStreamElementStyles = {
     beforeValueColor?: string | null;
     horizontalAlign?: StreamElementStyleHorizontalAlign | null;
 };
+export type StockStreamElementStyles = {
+    height?: number | null;
+    horizontalAlign?: StreamElementStyleHorizontalAlign | null;
+};
 export type TextStreamElementStyles = {
     fontSize?: number | null;
     fontWeight?: StreamElementStyleFontWeight | null;

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

@@ -1,8 +1,8 @@
-import type { AnnotationStreamElementModel, ContainerStreamElementModel, ImageRefStreamElementModel, ImagesStreamElementModel, PriceStreamElementModel, ShortVideoStreamElementModel, SpacerStreamElementModel, TextRefStreamElementModel, TextStreamElementModel, WebViewStreamElementModel } from './elements';
+import type { AnnotationStreamElementModel, ContainerStreamElementModel, ImageRefStreamElementModel, ImagesStreamElementModel, PriceStreamElementModel, 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, TextStreamElementStyles } from './styles';
+import type { AnnotationStreamElementStyles, ContainerStreamElementStyles, ImageStreamElementStyles, PriceStreamElementStyles, 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 isShortVideoSlotDataInput(data: StreamSlotDataInput | null): data is ShortVideoStreamSlotDataInput;
@@ -14,6 +14,7 @@ export type ElementTypeToStylesMap = {
     [StreamElementType.Container]: ContainerStreamElementStyles;
     [StreamElementType.Price]: PriceStreamElementStyles;
     [StreamElementType.ImageRef]: ImageStreamElementStyles;
+    [StreamElementType.Stock]: StockStreamElementStyles;
     [StreamElementType.Text]: TextStreamElementStyles;
     [StreamElementType.TextRef]: TextStreamElementStyles;
 };
@@ -25,6 +26,7 @@ export type ElementTypeToModelMap = {
     [StreamElementType.Price]: PriceStreamElementModel;
     [StreamElementType.ShortVideo]: ShortVideoStreamElementModel;
     [StreamElementType.Spacer]: SpacerStreamElementModel;
+    [StreamElementType.Stock]: StockStreamElementModel;
     [StreamElementType.Text]: TextStreamElementModel;
     [StreamElementType.TextRef]: TextRefStreamElementModel;
     [StreamElementType.WebView]: WebViewStreamElementModel;

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">import { StreamLayoutSlot, StreamPageLayout, StreamLayoutSlotContent } from '../layout';
-let { page, on } = $props();
+import { StreamPageViewerLocalization } from './stream-page-viewer-localization';
+let { page, localization: localizationInit, on } = $props();
+const localization = $derived(new StreamPageViewerLocalization(localizationInit));
 </script>
 
 {#if page.type === 'general'}
   <StreamPageLayout model={page.layout}>
     {#each page.layout.slots as slot (slot)}
       <StreamLayoutSlot model={slot}>
-        <StreamLayoutSlotContent model={slot} on={on} />
+        <StreamLayoutSlotContent model={slot} on={on} localization={localization.elementsLocalization} />
       </StreamLayoutSlot>
     {/each}
   </StreamPageLayout>

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte.d.ts

@@ -1,6 +1,9 @@
+import type { Locale } from '../../core/locale';
+import { type IStreamPageViewerLocalization } from './stream-page-viewer-localization';
 import type { StreamPageViewerModel } from './types';
 type Props = {
     page: StreamPageViewerModel;
+    localization: IStreamPageViewerLocalization | Locale;
     on?: {
         productClick: (productId: string) => void;
         progress?: (videoId: string, progress: number) => void;

package/dist/streams/stream-page-viewer/index.d.ts

@@ -1,2 +1,3 @@
 export { default as StreamPageViewer } from './cmp.stream-page-viewer.svelte';
 export type { StreamPageViewerModel } from './types';
+export type { IStreamPageViewerLocalization } from './stream-page-viewer-localization';

package/dist/streams/stream-page-viewer/stream-page-viewer-localization.d.ts

@@ -0,0 +1,9 @@
+import { type Locale } from '../../core/locale';
+import type { IStreamElementLocalization } from '../layout/element-views';
+export interface IStreamPageViewerLocalization {
+    elementsLocalization?: IStreamElementLocalization | Locale;
+}
+export declare class StreamPageViewerLocalization {
+    elementsLocalization: IStreamElementLocalization | Locale;
+    constructor(init: IStreamPageViewerLocalization | Locale);
+}

package/dist/streams/stream-page-viewer/stream-page-viewer-localization.js

@@ -0,0 +1,7 @@
+import { isLocale } from '../../core/locale';
+export class StreamPageViewerLocalization {
+    elementsLocalization;
+    constructor(init) {
+        this.elementsLocalization = isLocale(init) ? init : init?.elementsLocalization || 'en';
+    }
+}

package/dist/streams/stream-player/cmp.stream-player.svelte

@@ -23,7 +23,7 @@ import { mapStreamPlayerModel } from './mapper';
 import { GetStreamDocument } from './operations.generated';
 import { default as Overview } from './stream-overview.svelte';
 import { StreamPlayerBuffer } from './stream-player-buffer.svelte';
-import { StreamPlayerLocalization } from './stream-player-localization.svelte';
+import { StreamPlayerLocalization } from './stream-player-localization';
 import { StreamPlayerUiManager } from './ui-manager.svelte';
 import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
 import { onMount } from 'svelte';
@@ -187,6 +187,7 @@ const onProgress = (pageId, videoId, progress) => {
               {#if item.type === 'general'}
                 <StreamPageViewer
                   page={item}
+                  localization={localization.streamPageViewerLocalization}
                   on={{
                     progress: (videoId: String, progress: Number) => onProgress(item.id, videoId, progress),
                     productClick: (productId: String) => onProductCardClick(productId)
@@ -198,12 +199,13 @@ const onProgress = (pageId, videoId, progress) => {
                     progress: (progress) => onProgress(item.id, item.shortVideo.id, progress)
                   }}
                   autoplay="on-appearance"
+                  localization={localization.shortVideoViewerLocalization}
                   showAttachments={uiManager.showShortVideoOverlay} />
               {/if}
             {/snippet}
           </PlayerSlider>
           {#if uiManager.isMobileView && buffer.loaded.length > 1 && !everTouched}
-            <SwipeIndicator />
+            <SwipeIndicator localization={localization.swipeIndicatorLocalization} />
           {/if}
         </div>
       </SpotlightLayout>

package/dist/streams/stream-player/cmp.stream-player.svelte.d.ts

@@ -1,7 +1,8 @@
-import { type IStreamPlayerLocalization } from './stream-player-localization.svelte';
+import type { Locale } from '../../core/locale';
+import { type IStreamPlayerLocalization } from './stream-player-localization';
 type Props = {
     streamId: string;
-    localization?: IStreamPlayerLocalization;
+    localization: IStreamPlayerLocalization | Locale;
     graphqlOrigin?: string;
     on?: {
         closePlayer?: () => void;