@streamscloud/embeddable 3.2.4 → 3.2.5

package/dist/short-videos/short-videos-player/operations.generated.js

@@ -0,0 +1,207 @@
+export const GetShortVideosDocument = {
+    kind: 'Document',
+    definitions: [
+        {
+            kind: 'OperationDefinition',
+            operation: 'query',
+            name: { kind: 'Name', value: 'GetShortVideos' },
+            variableDefinitions: [
+                {
+                    kind: 'VariableDefinition',
+                    variable: { kind: 'Variable', name: { kind: 'Name', value: 'input' } },
+                    type: { kind: 'NonNullType', type: { kind: 'NamedType', name: { kind: 'Name', value: 'EmbedPostsInput' } } }
+                },
+                {
+                    kind: 'VariableDefinition',
+                    variable: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } },
+                    type: { kind: 'NamedType', name: { kind: 'Name', value: 'ImageScale' } },
+                    defaultValue: { kind: 'EnumValue', value: 'ORIGINAL_ENCODED' }
+                }
+            ],
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    {
+                        kind: 'Field',
+                        alias: { kind: 'Name', value: 'shortVideos' },
+                        name: { kind: 'Name', value: 'embedPosts' },
+                        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: 'ShortVideoViewerPayloadFragment' } }]
+                                    }
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        },
+        {
+            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: '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: 'shortDescription' } },
+                                {
+                                    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: 'Field',
+                        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: 'price' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'currency' } },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'ctaButton' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [
+                                            { kind: 'Field', name: { kind: 'Name', value: 'background' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'textColor' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'text' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'url' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'border' } }
+                                        ]
+                                    }
+                                },
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } },
+                                {
+                                    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: '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/short-videos/short-videos-player/operations.graphql

@@ -0,0 +1,8 @@
+# noinspection GraphQLSchemaValidation
+query GetShortVideos($input: EmbedPostsInput!, $image_scale: ImageScale = ORIGINAL_ENCODED) {
+  shortVideos: embedPosts(input: $input) {
+    items {
+      ...ShortVideoViewerPayloadFragment
+    }
+  }
+}

package/dist/short-videos/short-videos-player/short-videos-player-localization.d.ts

@@ -0,0 +1,16 @@
+import { type Locale } from '../../core/locale';
+import type { IShortVideoAttachmentsLocalization, IShortVideoDetailsLocalization, IShortVideoViewerLocalization } from '../short-video-viewer';
+import type { ISwipeIndicatorLocalization } from '../../ui/swipe-indicator';
+export interface IShortVideosPlayerLocalization {
+    shortVideoAttachmentsLocalization?: IShortVideoAttachmentsLocalization | Locale;
+    shortVideoDetailsLocalization?: IShortVideoDetailsLocalization | Locale;
+    shortVideoViewerLocalization?: IShortVideoViewerLocalization | Locale;
+    swipeIndicatorLocalization?: ISwipeIndicatorLocalization | Locale;
+}
+export declare class ShortVideosPlayerLocalization {
+    shortVideoAttachmentsLocalization: IShortVideoAttachmentsLocalization | Locale;
+    shortVideoDetailsLocalization: IShortVideoDetailsLocalization | Locale;
+    shortVideoViewerLocalization: IShortVideoViewerLocalization | Locale;
+    swipeIndicatorLocalization: ISwipeIndicatorLocalization | Locale;
+    constructor(init: IShortVideosPlayerLocalization | Locale);
+}

package/dist/short-videos/short-videos-player/short-videos-player-localization.js

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

package/dist/short-videos/short-videos-player/types.d.ts

@@ -0,0 +1,36 @@
+import type { ShortVideoViewerModel } from '../..';
+import type { PlayerItemsProvider } from '../../ui/player';
+import type { IShortVideosPlayerLocalization } from './short-videos-player-localization';
+export type PlayerInput = ProviderPlayerInput | IdsPlayerInput;
+export type ProviderPlayerInput = {
+    type: 'provider';
+    provider: PlayerItemsProvider<ShortVideoViewerModel>;
+};
+export type IdsPlayerInput = {
+    type: 'ids';
+    ids: string[];
+    initialId?: string;
+    graphqlOrigin?: string;
+    initiator?: string;
+};
+export type OpenShortVideosPlayerInit = ProviderInit | IdsInit;
+type ProviderInit = {
+    shortVideosProvider: PlayerItemsProvider<ShortVideoViewerModel>;
+    localization?: IShortVideosPlayerLocalization | 'en' | 'no';
+    on?: {
+        playerClosed?: () => void;
+    };
+};
+type IdsInit = {
+    ids: string[];
+    graphqlOrigin?: string;
+    initialId?: string;
+    localization?: IShortVideosPlayerLocalization | 'en' | 'no';
+    initiator?: string;
+    on?: {
+        playerClosed?: () => void;
+    };
+};
+export declare const isShortVideosProviderInit: (init: unknown) => init is ProviderInit;
+export declare function isIdsInit(init: unknown): init is IdsInit;
+export {};

package/dist/short-videos/short-videos-player/types.js

@@ -0,0 +1,6 @@
+export const isShortVideosProviderInit = (init) => {
+    return typeof init === 'object' && init !== null && 'shortVideosProvider' in init;
+};
+export function isIdsInit(init) {
+    return typeof init === 'object' && init !== null && 'ids' in init && 'graphqlOrigin' in init;
+}

package/dist/streams/layout/cmp.layout.svelte.d.ts

@@ -1,7 +1,9 @@
-import type { StreamLayout } from './layout';
+import type { StreamLayoutStyles } from './styles';
 import type { Snippet } from 'svelte';
 type Props = {
-    model: StreamLayout;
+    model: {
+        styles: StreamLayoutStyles | null;
+    };
     children: Snippet;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

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

@@ -1,9 +1,9 @@
 <script lang="ts">import { Utils } from '../../core/utils';
-import { StreamElement } from './element-views';
+import { StreamElementView } from './element-views';
 import { StreamComponentDataType } from './enums';
 let { model, localization, on } = $props();
 const component = $derived.by(() => {
-    return model.components.find((c) => { var _a; return c.dataType === ((_a = model.data) === null || _a === void 0 ? void 0 : _a.type); });
+    return model.components.find((c) => (model.data ? c.dataType === model.data.type : c.dataType === StreamComponentDataType.NoData));
 });
 const dataIsFilled = $derived.by(() => {
     if (!model.data) {
@@ -42,9 +42,9 @@ const handleProductClick = (e) => {
 </script>
 
 {#snippet slotContent()}
-  {#if component && model.data && dataIsFilled}
+  {#if component && (!model.data || dataIsFilled)}
     {#each component.elements as element (element)}
-      <StreamElement model={element} data={model.data} localization={localization} on={on} />
+      <StreamElementView model={element} data={model.data} localization={localization} on={on} />
     {/each}
   {/if}
 {/snippet}

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

@@ -1,8 +1,9 @@
+import type { Locale } from '../../core/locale';
 import { type IStreamElementLocalization } from './element-views';
 import type { StreamSlot } from './slot';
 type Props = {
     model: StreamSlot;
-    localization?: IStreamElementLocalization;
+    localization: IStreamElementLocalization | Locale;
     on?: {
         productClick: (productId: string) => void;
         progress?: (videoId: string, progress: number) => void;

package/dist/streams/layout/cmp.slot.svelte.d.ts

@@ -1,7 +1,12 @@
-import type { StreamSlot } from './slot';
 import type { Snippet } from 'svelte';
+type LayoutStyles = {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+};
 type Props = {
-    model: StreamSlot;
+    model: LayoutStyles;
     children: Snippet;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

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

@@ -1,6 +1,8 @@
 import type { StreamElementModel } from './elements';
 import { StreamComponentDataType } from './enums';
 export type StreamComponent = {
+    $id: string;
+    name?: string | null;
     dataType: StreamComponentDataType;
     elements: StreamElementModel[];
 };

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

@@ -0,0 +1,16 @@
+<script lang="ts">import { HtmlHelper } from '../../../core/utils/html-helper';
+import { generateAnnotationStyles } from '../styles-transformer';
+let { model } = $props();
+const svgValue = $derived.by(() => {
+    if (model.svg) {
+        return HtmlHelper.sanitizeSvg(model.svg);
+    }
+    return '';
+});
+</script>
+
+{#if !model.inactive}
+  <div class="annotation-stream-element" style={generateAnnotationStyles(model.styles, model.placement)}>
+    {@html svgValue}
+  </div>
+{/if}

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

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

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

@@ -1,4 +1,4 @@
-<script lang="ts">import {} from './stream-element-localization.svelte';
+<script lang="ts">import {} from './stream-element-localization';
 import { StreamElementStyleDirection } from '../enums';
 import { generateContainerStyles } from '../styles-transformer';
 import { default as StreamElement } from './cmp.stream-element.svelte';

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

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

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

@@ -1,11 +1,21 @@
 <script lang="ts">import { getStringValueByKey } from './data-by-key-accessor';
 import { generateImageStyles } from '../styles-transformer';
-let { model, data } = $props();
+import { default as AnnotationStreamElement } from './cmp.annotation-stream-element.svelte';
+let { model, data, annotationView } = $props();
 const value = $derived(getStringValueByKey(data, model.key));
 </script>
 
 <div class="image-ref-stream-element">
   <img class="image-ref-stream-element-image" src={value} alt={model.key} style={generateImageStyles(model.styles)} />
+  {#if model.annotations}
+    {#each model.annotations as annotationModel (annotationModel)}
+      {#if annotationView}
+        {@render annotationView({ model: annotationModel })}
+      {:else}
+        <AnnotationStreamElement model={annotationModel} />
+      {/if}
+    {/each}
+  {/if}
 </div>
 
 <style>@keyframes fadeIn {
@@ -26,7 +36,10 @@ const value = $derived(getStringValueByKey(data, model.key));
   height: 100%;
   min-height: 100%;
   max-height: 100%;
-  overflow: hidden;
+  position: relative;
+}
+.image-ref-stream-element :global(svg) {
+  overflow: visible;
 }
 
 .image-ref-stream-element-image {

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

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

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

@@ -1,11 +1,11 @@
 <script lang="ts">import { Image } from '../../../ui/image';
-import { ImagesImagesElementMode } from '../enums';
+import { ImagesStreamElementMode } from '../enums';
 let { model, data } = $props();
 </script>
 
 <div class="images-stream-element">
   {#if data.length > 0}
-    {#if model.mode === ImagesImagesElementMode.Single || data.length === 1}
+    {#if model.mode === ImagesStreamElementMode.Single || data.length === 1}
       <Image src={data[0].url} />
     {:else}
       need implement multiple images

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

@@ -1,97 +1,23 @@
 <script lang="ts">var _a;
-import { toPriceRepresentation } from '../../../products/price-helper';
-import { PriceStreamElementLocalization } from './price-stream-element-localization.svelte.js';
-import { mapFlexJustifyContent, mapFontFamily, mapFontWeight, transformColorValue, transformFontSizeValue, transformNumericValue } from '../styles-transformer';
+import { PriceStreamElementLocalization } from './price-stream-element-localization';
+import { default as PriceElementView } from './price-element-view.svelte';
 let { model, data, localization: localizationInit } = $props();
 const localization = $derived(new PriceStreamElementLocalization(localizationInit));
-const lineHeight = 1.2;
-const height = $derived(((_a = model.styles) === null || _a === void 0 ? void 0 : _a.height) || 16);
-const currentPrice = $derived.by(() => {
-    if (data.price.salePrice) {
-        return toPriceRepresentation(data.price.salePrice, data.price.currency, model.includeCurrency || false);
-    }
-    return toPriceRepresentation(data.price.price, data.price.currency, model.includeCurrency || false);
-});
-const saveValue = $derived.by(() => {
-    if (data.price.salePrice) {
-        return toPriceRepresentation(data.price.price - data.price.salePrice, data.price.currency, model.includeCurrency || false);
-    }
-    return 0;
-});
-const containerStyles = $derived.by(() => {
-    var _a, _b;
-    const values = [
-        `font-family: ${mapFontFamily((_a = model.styles) === null || _a === void 0 ? void 0 : _a.fontFamily)};`,
-        `justify-content: ${mapFlexJustifyContent((_b = model.styles) === null || _b === void 0 ? void 0 : _b.horizontalAlign)};`,
-        `align-items: center;`,
-        `height: ${transformNumericValue(height)};`
-    ];
-    return values.join('');
-});
-const priceCustomStyles = $derived.by(() => {
-    var _a, _b, _c;
-    const values = [
-        `font-size: ${transformFontSizeValue(height / lineHeight)};`,
-        `line-height: ${lineHeight};`,
-        `font-weight: ${mapFontWeight((_a = model.styles) === null || _a === void 0 ? void 0 : _a.fontWeight)};`,
-        `color: ${transformColorValue(data.price.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((height - height / lineHeight) / 2)};`,
-        `font-size: ${transformFontSizeValue(height / 4)};`,
-        `font-weight: 500;`,
-        `padding: ${transformNumericValue(height / 8)} ${transformNumericValue(height / 4)};`,
-        `border-radius: ${transformNumericValue(height / 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(height / 5)};`, `font-weight: 500;`, `color: ${transformColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.beforeValueColor)};`];
-    return values.join('');
-});
+let baseMaxHeight = $derived(((_a = model.styles) === null || _a === void 0 ? void 0 : _a.height) || 32);
+let adjustedHeight = $derived(baseMaxHeight);
 </script>
 
-<div class="price-stream-element" style={containerStyles}>
-  <div class="price-stream-element__price" style={priceCustomStyles}>
-    {currentPrice}
-  </div>
-  {#if data.price.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(toPriceRepresentation(data.price.price, data.price.currency, model.includeCurrency || false))}
-      </div>
-    </div>
-  {/if}
+<div class="price-stream-element">
+  <PriceElementView maxElementHeight={adjustedHeight} model={model} data={data} localization={localization} />
+  <PriceElementView
+    maxElementHeight={baseMaxHeight}
+    model={model}
+    data={data}
+    localization={localization}
+    on={{ heightAdjusted: (e) => (adjustedHeight = e) }} />
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.price-stream-element {
-  display: flex;
-  gap: 4cqi;
-}
-.price-stream-element__sale-price {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  justify-content: space-between;
+<style>.price-stream-element {
+  position: relative;
+  width: 100%;
 }</style>

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.js';
+import type { Locale } from '../../../core/locale';
+import { type IPriceStreamElementLocalization } from './price-stream-element-localization';
 import type { PriceStreamElementModel } from '../elements';
-import type { StreamLayoutProductModel } from '../models';
+import type { StreamLayoutProductPriceModel } from '../models';
 type Props = {
     model: PriceStreamElementModel;
-    data: StreamLayoutProductModel;
-    localization?: IPriceStreamElementLocalization;
+    data: StreamLayoutProductPriceModel;
+    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;
     };