@streamscloud/embeddable 3.2.4 → 3.2.6

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 { ContainerStreamElement, ImageRefStreamElement, ImagesStreamElement, PriceStreamElement, ShortVideoStreamElement, SpacerStreamElement, TextRefStreamElement, TextStreamElement } 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;
@@ -41,28 +41,35 @@ const productModel = $derived.by(() => {
 });
 </script>
 
-{#if model.type === StreamElementType.Container}
-  <ContainerStreamElement model={model} data={data} localization={localizatoinInit} />
-{:else if model.type === StreamElementType.Spacer}
-  <SpacerStreamElement model={model} parentContainerDirection={constainerDirection} />
-{:else if model.type === StreamElementType.ImageRef}
-  <ImageRefStreamElement model={model} data={data} />
+{#if model.type === StreamElementType.Annotation}
+  <AnnotationStreamElementView model={model} />
+{:else if model.type === StreamElementType.Container}
+  <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}
-  <ImagesStreamElement model={model} data={imagesModel} />
+  <ImagesStreamElementView model={model} data={imagesModel} />
 {:else if model.type === StreamElementType.Price && productModel}
-  <PriceStreamElement model={model} data={productModel} localization={localization.priceElementLocalization} />
+  <PriceStreamElementView model={model} data={productModel.price} localization={localization.priceElementLocalization} />
 {:else if model.type === StreamElementType.ShortVideo && shortVideoModel}
-  <ShortVideoStreamElement
+  <ShortVideoStreamElementView
     data={shortVideoModel}
+    localization={localization.shortVideoElementLocalization}
     on={on
       ? {
-          progress: (progress: number) => {
+          progress: (progress: Number) => {
             on.progress?.(shortVideoModel.id, progress);
           }
         }
       : 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}
-  <TextStreamElement model={model} />
-{:else if model.type === StreamElementType.TextRef}
-  <TextRefStreamElement model={model} data={data} />
+  <TextStreamElementView model={model} />
+{:else if model.type === StreamElementType.TextRef && data}
+  <TextRefStreamElementView model={model} data={data} />
+{:else if model.type === StreamElementType.WebView}
+  <WebViewStreamElementView model={model} />
 {/if}

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

@@ -1,12 +1,13 @@
-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';
 type Props = {
     model: StreamElementModel;
-    data: StreamSlotData;
+    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-ref-stream-element.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { TextRefStreamElementModel } from '../elements';
-import type { StreamSlotData } from '../slot-data';
+import type { StreamSlotDataRef } from '../slot-data-ref';
 type Props = {
     model: TextRefStreamElementModel;
-    data: StreamSlotData;
+    data: StreamSlotDataRef;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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/cmp.web-view-stream-element.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">let { model } = $props();
+export {};
+</script>
+
+<div class="web-view-stream-element">
+  {#if model.url}
+    <iframe
+      title="Web View"
+      src={model.url}
+      style="width: 100%; height: 100%; border: none;"
+      allowfullscreen
+      sandbox="allow-scripts allow-forms allow-same-origin"></iframe>
+  {:else}
+    <p>No URL provided for the web view.</p>
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.web-view-stream-element {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  position: relative;
+}</style>

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

@@ -0,0 +1,7 @@
+import type { WebViewStreamElementModel } from '../elements';
+type Props = {
+    model: WebViewStreamElementModel;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/streams/layout/element-views/data-by-key-accessor.d.ts

@@ -1,3 +1,3 @@
-import type { StreamSlotData } from '../slot-data';
-export declare const getStringValueByKey: (data: StreamSlotData, key: string) => string;
-export declare const getNumberValueByKey: (data: StreamSlotData, key: string) => number;
+import type { StreamSlotDataRef } from '../slot-data-ref';
+export declare const getStringValueByKey: (data: StreamSlotDataRef, key: string) => string;
+export declare const getNumberValueByKey: (data: StreamSlotDataRef, key: string) => number;

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

@@ -1,11 +1,16 @@
-export { default as StreamElement } from './cmp.stream-element.svelte';
-export { default as ContainerStreamElement } from './cmp.container-stream-element.svelte';
-export { default as ImageRefStreamElement } from './cmp.image-ref-stream-element.svelte';
-export { default as ImagesStreamElement } from './cmp.images-stream-element.svelte';
-export { default as PriceStreamElement } from './cmp.price-stream-element.svelte';
-export { default as ShortVideoStreamElement } from './cmp.short-video-stream-element.svelte';
-export { default as SpacerStreamElement } from './cmp.spacer-stream-element.svelte';
-export { default as TextRefStreamElement } from './cmp.text-ref-stream-element.svelte';
-export { default as TextStreamElement } from './cmp.text-stream-element.svelte';
-export type { IStreamElementLocalization } from './stream-element-localization.svelte';
-export type { IPriceStreamElementLocalization } from './price-stream-element-localization.svelte';
+export { default as StreamElementView } from './cmp.stream-element.svelte';
+export { default as AnnotationStreamElementView } from './cmp.annotation-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 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';
+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

@@ -1,9 +1,12 @@
-export { default as StreamElement } from './cmp.stream-element.svelte';
-export { default as ContainerStreamElement } from './cmp.container-stream-element.svelte';
-export { default as ImageRefStreamElement } from './cmp.image-ref-stream-element.svelte';
-export { default as ImagesStreamElement } from './cmp.images-stream-element.svelte';
-export { default as PriceStreamElement } from './cmp.price-stream-element.svelte';
-export { default as ShortVideoStreamElement } from './cmp.short-video-stream-element.svelte';
-export { default as SpacerStreamElement } from './cmp.spacer-stream-element.svelte';
-export { default as TextRefStreamElement } from './cmp.text-ref-stream-element.svelte';
-export { default as TextStreamElement } from './cmp.text-stream-element.svelte';
+export { default as StreamElementView } from './cmp.stream-element.svelte';
+export { default as AnnotationStreamElementView } from './cmp.annotation-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 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-element-view.svelte

@@ -0,0 +1,168 @@
+<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Utils } from '../../../core/utils';
+import { toPriceRepresentation } from '../../../products/price-helper';
+import { LineClamp } from '../../../ui/line-clamp';
+import { PriceStreamElementLocalization } from './price-stream-element-localization';
+import { default as StockElementView } from './cmp.stock-stream-element.svelte';
+import { mapFlexJustifyContent, mapFontFamily, mapFontWeight, transformColorValue, transformFontSizeValue, transformNumericValue } from '../styles-transformer';
+let { maxElementHeight, model, data, localization, on } = $props();
+let priceElementRef = $state.raw(null);
+let priceContainerRef = $state.raw(null);
+const minElementHeight = 16;
+let adjustedHeight = $derived(maxElementHeight);
+const lineHeight = 1.2;
+const elementHeight = $derived(adjustedHeight);
+const priceHeight = $derived(model.stock ? elementHeight * 0.68 : elementHeight);
+const adjustableHeight = $derived(!!(on === null || on === void 0 ? void 0 : on.heightAdjusted));
+const currentPrice = $derived.by(() => {
+    if (data.salePrice) {
+        return toPriceRepresentation(data.salePrice, data.currency, model.includeCurrency || false);
+    }
+    return toPriceRepresentation(data.price, data.currency, model.includeCurrency || false);
+});
+const saveValue = $derived.by(() => {
+    if (data.salePrice) {
+        return toPriceRepresentation(data.price - data.salePrice, data.currency, model.includeCurrency || false);
+    }
+    return 0;
+});
+const beforeValue = $derived.by(() => {
+    return toPriceRepresentation(data.price, data.currency, model.includeCurrency || false);
+});
+const elementContainerStyles = $derived.by(() => {
+    var _a, _b;
+    const values = [
+        'display: flex;',
+        'flex-direction: column;',
+        'justify-content: space-between;',
+        `align-items: ${mapFlexJustifyContent((_a = model.styles) === null || _a === void 0 ? void 0 : _a.horizontalAlign)};`,
+        `font-family: ${mapFontFamily((_b = model.styles) === null || _b === void 0 ? void 0 : _b.fontFamily)};`,
+        `height: ${transformNumericValue(elementHeight)};`
+    ];
+    return values.join('');
+});
+const priceContainerStyles = $derived.by(() => {
+    const values = ['display: flex;', `height: ${transformNumericValue(priceHeight)};`, `align-items: center;`, 'gap: 3cqi;'];
+    return values.join('');
+});
+const priceCustomStyles = $derived.by(() => {
+    var _a, _b, _c;
+    const values = [
+        `font-size: ${transformFontSizeValue(priceHeight / lineHeight)};`,
+        `line-height: ${lineHeight};`,
+        `font-weight: ${mapFontWeight((_a = model.styles) === null || _a === void 0 ? void 0 : _a.fontWeight)};`,
+        `color: ${transformColorValue(data.salePrice ? (_b = model.styles) === null || _b === void 0 ? void 0 : _b.salePriceColor : (_c = model.styles) === null || _c === void 0 ? void 0 : _c.regularPriceColor)};`
+    ];
+    return values.join('');
+});
+const saveValueCustomStyles = $derived.by(() => {
+    var _a, _b;
+    const values = [
+        `margin-top: ${transformNumericValue((priceHeight - priceHeight / lineHeight) / 2)};`,
+        `font-size: ${transformFontSizeValue(priceHeight / 4)};`,
+        `font-weight: 500;`,
+        `padding: ${transformNumericValue(priceHeight / 8)} ${transformNumericValue(priceHeight / 4)};`,
+        `border-radius: ${transformNumericValue(priceHeight / 8)};`,
+        `background-color: ${transformColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.saveValueBackgroundColor)};`,
+        `color: ${transformColorValue((_b = model.styles) === null || _b === void 0 ? void 0 : _b.saveValueColor)};`
+    ];
+    return values.join('');
+});
+const beforeValueCustomStyles = $derived.by(() => {
+    var _a;
+    const values = [
+        `font-size: ${transformFontSizeValue(priceHeight / 5)};`,
+        `font-weight: 500;`,
+        `color: ${transformColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.beforeValueColor)};`
+    ];
+    return values.join('');
+});
+const textAfterCustomStyles = $derived.by(() => {
+    const values = [`font-size: ${transformFontSizeValue(priceHeight / lineHeight / 2)};`, `font-weight: 500;`, 'align-self: flex-end;'];
+    return values.join('');
+});
+const stockElementHeight = $derived(elementHeight * 0.23);
+const adjustHeightToFit = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (!priceContainerRef || !priceElementRef || !adjustableHeight) {
+        return;
+    }
+    yield new Promise((resolve) => requestAnimationFrame(resolve));
+    let currentHeight = maxElementHeight;
+    while (currentHeight > minElementHeight) {
+        adjustedHeight = currentHeight;
+        yield new Promise((resolve) => requestAnimationFrame(resolve));
+        let hasOverflow = priceElementRef.clientWidth < priceContainerRef.clientWidth;
+        if (!hasOverflow) {
+            break;
+        }
+        currentHeight -= 1;
+    }
+    on === null || on === void 0 ? void 0 : on.heightAdjusted(currentHeight);
+});
+const debouncedAdjustHeightToFit = Utils.debounce(adjustHeightToFit, 400);
+$effect(() => {
+    const references = [maxElementHeight, currentPrice, saveValue, beforeValue, model.textAfter, model.includeCurrency, model.excludeBeforePrice];
+    void references;
+    debouncedAdjustHeightToFit();
+});
+</script>
+
+<div class="price-stream-element" class:price-stream-element--adjustable={adjustableHeight} style={elementContainerStyles} bind:this={priceElementRef}>
+  <div class="price-stream-element__price-container" style={priceContainerStyles} bind:this={priceContainerRef}>
+    <div class="price-stream-element__price" style={priceCustomStyles}>
+      {currentPrice}
+    </div>
+    {#if data.salePrice && !model.excludeBeforePrice}
+      <div class="price-stream-element__sale-price">
+        <div class="price-stream-element__save" style={saveValueCustomStyles}>
+          {localization.saveValue(saveValue)}
+        </div>
+        <div class="price-stream-element__before-price" style={beforeValueCustomStyles}>
+          {localization.beforeValue(beforeValue)}
+        </div>
+      </div>
+    {/if}
+    {#if model.textAfter}
+      <div class="price-stream-element__text-after" style={textAfterCustomStyles}>
+        <LineClamp value={model.textAfter} maxLines={1} />
+      </div>
+    {/if}
+  </div>
+  {#if model.stock}
+    <StockElementView model={model.stock} heightOverrideDdu={stockElementHeight} localization={localization.stockLocalization} />
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.price-stream-element--adjustable {
+  position: absolute;
+  visibility: hidden;
+  width: 100%;
+}
+.price-stream-element__sale-price {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.price-stream-element__price, .price-stream-element__save, .price-stream-element__before-price {
+  white-space: nowrap;
+}</style>

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

@@ -0,0 +1,15 @@
+import { PriceStreamElementLocalization } from './price-stream-element-localization';
+import type { PriceStreamElementModel } from '../elements';
+import type { StreamLayoutProductPriceModel } from '../models';
+type Props = {
+    maxElementHeight: number;
+    model: PriceStreamElementModel;
+    data: StreamLayoutProductPriceModel;
+    localization: PriceStreamElementLocalization;
+    on?: {
+        heightAdjusted: (height: number) => void;
+    };
+};
+declare const PriceElementView: import("svelte").Component<Props, {}, "">;
+type PriceElementView = ReturnType<typeof PriceElementView>;
+export default PriceElementView;

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';
+    }
+}