@streamscloud/embeddable 3.2.1 → 3.2.3

package/dist/short-videos/short-videos-player/controls.svelte

@@ -2,7 +2,7 @@
 import { Icon } from '../../ui/icon';
 import { MediaVolumeManager } from '../../ui/media-playback';
 import { default as ActionButton } from './action-button.svelte';
-import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
+import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte.js';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
@@ -37,7 +37,7 @@ const shortVideo = $derived(buffer.current);
   <div class="short-videos-player-controls__right">
     {#if shortVideo}
       <div class="short-videos-player-controls__short-video-attachments">
-        <ShortVideoViewerAttachments shortVideo={shortVideo} localization={localization.shortVideoAttachmentsLocalization} />
+        <ShortVideoViewerAttachments shortVideo={shortVideo} localization={localization.shortVideoDetailsLocalization?.attachmentsLocalization} />
       </div>
     {/if}
     <div class="short-videos-player-controls__controls">

package/dist/short-videos/short-videos-player/controls.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type ShortVideoViewerModel } from '../short-video-viewer';
 import type { IPlayerBuffer } from '../../ui/player';
-import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
+import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte.js';
 import type { ShortVideosPlayerUiManager } from './ui-manager.svelte';
 type Props = {
     buffer: IPlayerBuffer<ShortVideoViewerModel>;

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

@@ -1,38 +1,15 @@
-import type { IShortVideosPlayerLocalization } from './short-videos-player-localization';
-import { type OpenShortVideosPlayerInit } from './types';
+import type { ShortVideoViewerModel } from '../short-video-viewer';
+import type { PlayerItemsProvider } from '../../ui/player';
+import type { IShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
 export type { IShortVideosPlayerLocalization };
 /**
- * Opens the short videos player modal with the specified provider or by fetching videos by IDs.
- *
- * You can use either a ready-made provider, or simply pass a list of video IDs and a GraphQL endpoint to fetch them.
+ * Opens the short videos player modal with the specified provider and optional localization.
  *
  * @param init - Configuration options.
+ * @param {PlayerItemsProvider<ShortVideoViewerModel>} init.shortVideosProvider - The provider instance supplying short video items to the player.
+ * @param {IShortVideosPlayerLocalization} [init.localization] - Optional localization settings for the player UI.
  *
- * @param {PlayerItemsProvider<ShortVideoViewerModel>} [init.shortVideosProvider]
- *   The provider instance supplying short video items to the player.
- *   **Use this if you already have your own provider implementation.**
- *
- * @param {string[]} [init.ids]
- *   List of short video IDs to display in the player.
- *   **Use this if you want the player to fetch and show specific videos.**
- *
- * @param {string} [init.graphqlUrl]
- *   The GraphQL endpoint to use when fetching videos by IDs.
- *   **Required if you use `ids`.**
- *
- * @param {string} [init.initialId]
- *   The ID of the video that should be shown first.
- *   **Optional. Only used when using `ids`.**
- *
- * @param {IShortVideosPlayerLocalization} [init.localization]
- *   Optional localization settings for the player UI.
- *
- * @param {object} [init.on]
- *   Optional event handlers.
- * @param {() => void} [init.on.playerClosed]
- *   Called when the player is closed.
- *
- * @example <caption>Using a custom provider</caption>
+ * @example
  * ```ts
  * import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';
  *
@@ -44,25 +21,11 @@ export type { IShortVideosPlayerLocalization };
  *   }
  * });
  * ```
- *
- * @example <caption>Using a list of IDs</caption>
- * ```ts
- * import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';
- *
- * openShortVideosPlayer({
- *   ids: ['id1', 'id2', 'id3'],
- *   graphqlOrigin: 'https://api.example.com',
- *   initialId: 'id2',
- *   localization: {
- *     next: 'Next',
- *     previous: 'Previous'
- *   },
- *   on: {
- *     playerClosed: () => {
- *       console.log('Player was closed');
- *     }
- *   }
- * });
- * ```
  */
-export declare const openShortVideosPlayer: (init: OpenShortVideosPlayerInit) => Promise<void>;
+export declare const openShortVideosPlayer: (init: {
+    shortVideosProvider: PlayerItemsProvider<ShortVideoViewerModel>;
+    localization?: IShortVideosPlayerLocalization;
+    on?: {
+        playerClosed?: () => void;
+    };
+}) => void;

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

@@ -1,40 +1,14 @@
-import { getLocale } from '../../core/locale';
 import { ShadowHost } from '../../ui/shadow-dom';
 import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
-import { isIdsInit, isShortVideosProviderInit } from './types';
-import { mount, unmount } from 'svelte';
+import { mount } from 'svelte';
 /**
- * Opens the short videos player modal with the specified provider or by fetching videos by IDs.
- *
- * You can use either a ready-made provider, or simply pass a list of video IDs and a GraphQL endpoint to fetch them.
+ * Opens the short videos player modal with the specified provider and optional localization.
  *
  * @param init - Configuration options.
+ * @param {PlayerItemsProvider<ShortVideoViewerModel>} init.shortVideosProvider - The provider instance supplying short video items to the player.
+ * @param {IShortVideosPlayerLocalization} [init.localization] - Optional localization settings for the player UI.
  *
- * @param {PlayerItemsProvider<ShortVideoViewerModel>} [init.shortVideosProvider]
- *   The provider instance supplying short video items to the player.
- *   **Use this if you already have your own provider implementation.**
- *
- * @param {string[]} [init.ids]
- *   List of short video IDs to display in the player.
- *   **Use this if you want the player to fetch and show specific videos.**
- *
- * @param {string} [init.graphqlUrl]
- *   The GraphQL endpoint to use when fetching videos by IDs.
- *   **Required if you use `ids`.**
- *
- * @param {string} [init.initialId]
- *   The ID of the video that should be shown first.
- *   **Optional. Only used when using `ids`.**
- *
- * @param {IShortVideosPlayerLocalization} [init.localization]
- *   Optional localization settings for the player UI.
- *
- * @param {object} [init.on]
- *   Optional event handlers.
- * @param {() => void} [init.on.playerClosed]
- *   Called when the player is closed.
- *
- * @example <caption>Using a custom provider</caption>
+ * @example
  * ```ts
  * import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';
  *
@@ -46,62 +20,17 @@ import { mount, unmount } from 'svelte';
  *   }
  * });
  * ```
- *
- * @example <caption>Using a list of IDs</caption>
- * ```ts
- * import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';
- *
- * openShortVideosPlayer({
- *   ids: ['id1', 'id2', 'id3'],
- *   graphqlOrigin: 'https://api.example.com',
- *   initialId: 'id2',
- *   localization: {
- *     next: 'Next',
- *     previous: 'Previous'
- *   },
- *   on: {
- *     playerClosed: () => {
- *       console.log('Player was closed');
- *     }
- *   }
- * });
- * ```
  */
-export const openShortVideosPlayer = async (init) => {
-    let input = null;
-    if (isShortVideosProviderInit(init)) {
-        input = {
-            type: 'provider',
-            provider: init.shortVideosProvider
-        };
-    }
-    else if (isIdsInit(init)) {
-        input = {
-            type: 'ids',
-            ids: init.ids,
-            initialId: init.initialId,
-            graphqlOrigin: init.graphqlOrigin,
-            initiator: init.initiator
-        };
-    }
-    else {
-        input = null;
-    }
-    if (!input) {
-        return;
-    }
-    const shadowHost = new ShadowHost();
-    const mounted = mount(ShortVideosPlayer, {
+export const openShortVideosPlayer = (init) => {
+    const { shortVideosProvider, localization } = init;
+    const shadowHost = new ShadowHost({ onClosed: () => init.on?.playerClosed?.() });
+    mount(ShortVideosPlayer, {
         target: shadowHost.shadowRoot,
         props: {
-            input,
-            localization: getLocale(init.localization),
+            shortVideosProvider,
+            localization,
             on: {
-                closePlayer: async () => {
-                    if (init.on?.playerClosed) {
-                        init.on.playerClosed();
-                    }
-                    await unmount(mounted);
+                closePlayer: () => {
                     shadowHost.remove();
                 }
             }

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

@@ -0,0 +1,8 @@
+import type { IShortVideoDetailsLocalization } from '../short-video-viewer';
+export interface IShortVideosPlayerLocalization {
+    shortVideoDetailsLocalization?: IShortVideoDetailsLocalization;
+}
+export declare class ShortVideosPlayerLocalization {
+    shortVideoDetailsLocalization: IShortVideoDetailsLocalization | undefined;
+    constructor(init?: IShortVideosPlayerLocalization);
+}

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

@@ -0,0 +1,6 @@
+export class ShortVideosPlayerLocalization {
+    shortVideoDetailsLocalization = $state(undefined);
+    constructor(init) {
+        this.shortVideoDetailsLocalization = init?.shortVideoDetailsLocalization || this.shortVideoDetailsLocalization;
+    }
+}

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

@@ -1,9 +1,7 @@
-import type { StreamLayoutStyles } from './styles';
+import type { StreamLayout } from './layout';
 import type { Snippet } from 'svelte';
 type Props = {
-    model: {
-        styles: StreamLayoutStyles | null;
-    };
+    model: StreamLayout;
     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 { StreamElementView } from './element-views';
+import { StreamElement } from './element-views';
 import { StreamComponentDataType } from './enums';
 let { model, localization, on } = $props();
 const component = $derived.by(() => {
-    return model.components.find((c) => (model.data ? c.dataType === model.data.type : c.dataType === StreamComponentDataType.NoData));
+    return model.components.find((c) => { var _a; return c.dataType === ((_a = model.data) === null || _a === void 0 ? void 0 : _a.type); });
 });
 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)}
-      <StreamElementView model={element} data={model.data} localization={localization} on={on} />
+      <StreamElement model={element} data={model.data} localization={localization} on={on} />
     {/each}
   {/if}
 {/snippet}

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

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

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

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

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

@@ -1,8 +1,6 @@
 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.container-stream-element.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import {} from './stream-element-localization';
+<script lang="ts">import {} from './stream-element-localization.svelte';
 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,11 +1,10 @@
-import type { Locale } from '../../../core/locale';
-import { type IStreamElementLocalization } from './stream-element-localization';
+import { type IStreamElementLocalization } from './stream-element-localization.svelte';
 import type { ContainerStreamElementModel } from '../elements';
 import type { StreamSlotData } from '../slot-data';
 type Props = {
     model: ContainerStreamElementModel;
-    data: StreamSlotData | null;
-    localization: IStreamElementLocalization | Locale;
+    data: StreamSlotData;
+    localization?: IStreamElementLocalization;
 };
 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,21 +1,11 @@
 <script lang="ts">import { getStringValueByKey } from './data-by-key-accessor';
 import { generateImageStyles } from '../styles-transformer';
-import { default as AnnotationStreamElement } from './cmp.annotation-stream-element.svelte';
-let { model, data, annotationView } = $props();
+let { model, data } = $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 {
@@ -36,10 +26,7 @@ const value = $derived(getStringValueByKey(data, model.key));
   height: 100%;
   min-height: 100%;
   max-height: 100%;
-  position: relative;
-}
-.image-ref-stream-element :global(svg) {
-  overflow: visible;
+  overflow: hidden;
 }
 
 .image-ref-stream-element-image {

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

@@ -1,12 +1,8 @@
-import type { AnnotationStreamElementModel, ImageRefStreamElementModel } from '../elements';
-import type { StreamSlotDataRef } from '../slot-data-ref';
-import type { Snippet } from 'svelte';
+import type { ImageRefStreamElementModel } from '../elements';
+import type { StreamSlotData } from '../slot-data';
 type Props = {
     model: ImageRefStreamElementModel;
-    data: StreamSlotDataRef;
-    annotationView?: Snippet<[{
-        model: AnnotationStreamElementModel;
-    }]>;
+    data: StreamSlotData;
 };
 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 { ImagesStreamElementMode } from '../enums';
+import { ImagesImagesElementMode } from '../enums';
 let { model, data } = $props();
 </script>
 
 <div class="images-stream-element">
   {#if data.length > 0}
-    {#if model.mode === ImagesStreamElementMode.Single || data.length === 1}
+    {#if model.mode === ImagesImagesElementMode.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,23 +1,97 @@
 <script lang="ts">var _a;
-import { PriceStreamElementLocalization } from './price-stream-element-localization';
-import { default as PriceElementView } from './price-element-view.svelte';
+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';
 let { model, data, localization: localizationInit } = $props();
 const localization = $derived(new PriceStreamElementLocalization(localizationInit));
-let baseMaxHeight = $derived(((_a = model.styles) === null || _a === void 0 ? void 0 : _a.height) || 32);
-let adjustedHeight = $derived(baseMaxHeight);
+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('');
+});
 </script>
 
-<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 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>
 
-<style>.price-stream-element {
-  position: relative;
-  width: 100%;
+<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>

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

@@ -1,11 +1,10 @@
-import type { Locale } from '../../../core/locale';
-import { type IPriceStreamElementLocalization } from './price-stream-element-localization';
+import { type IPriceStreamElementLocalization } from './price-stream-element-localization.svelte.js';
 import type { PriceStreamElementModel } from '../elements';
-import type { StreamLayoutProductPriceModel } from '../models';
+import type { StreamLayoutProductModel } from '../models';
 type Props = {
     model: PriceStreamElementModel;
-    data: StreamLayoutProductPriceModel;
-    localization: IPriceStreamElementLocalization | Locale;
+    data: StreamLayoutProductModel;
+    localization?: IPriceStreamElementLocalization;
 };
 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,8 +1,6 @@
 <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, localization: localizationInit, on } = $props();
-const localization = $derived(new ShortVideoStreamElementLocalization(localizationInit));
+let { data, on } = $props();
 </script>
 
-<ShortVideoViewer model={mapToShortVideoViewerModel(data)} autoplay={false} localization={localization.shortVideoViewerLocalization} on={on} />
+<ShortVideoViewer model={mapToShortVideoViewerModel(data)} autoplay={false} on={on} />

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

@@ -1,9 +1,6 @@
-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.stream-element.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">import { AnnotationStreamElementView, ContainerStreamElementView, ImageRefStreamElementView, ImagesStreamElementView, PriceStreamElementView, ShortVideoStreamElementView, SpacerStreamElementView, StockStreamElementView, TextRefStreamElementView, TextStreamElementView, WebViewStreamElementView } from '.';
-import { StreamElementLocalization } from './stream-element-localization';
+<script lang="ts">import { ContainerStreamElement, ImageRefStreamElement, ImagesStreamElement, PriceStreamElement, ShortVideoStreamElement, SpacerStreamElement, TextRefStreamElement, TextStreamElement } from '.';
+import { StreamElementLocalization } from './stream-element-localization.svelte';
 import { StreamComponentDataType, StreamElementStyleDirection, StreamElementType } from '../enums';
-let { model, data, constainerDirection = StreamElementStyleDirection.Vertical, localization: localizationInit, on } = $props();
-const localization = $derived(new StreamElementLocalization(localizationInit));
+let { model, data, constainerDirection = StreamElementStyleDirection.Vertical, localization: localizatoinInit, on } = $props();
+const localization = $derived(new StreamElementLocalization(localizatoinInit));
 const shortVideoModel = $derived.by(() => {
     if (!data) {
         return null;
@@ -41,35 +41,28 @@ const productModel = $derived.by(() => {
 });
 </script>
 
-{#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} />
+{#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} />
 {:else if model.type === StreamElementType.Images && imagesModel?.length}
-  <ImagesStreamElementView model={model} data={imagesModel} />
+  <ImagesStreamElement model={model} data={imagesModel} />
 {:else if model.type === StreamElementType.Price && productModel}
-  <PriceStreamElementView model={model} data={productModel.price} localization={localization.priceElementLocalization} />
+  <PriceStreamElement model={model} data={productModel} localization={localization.priceElementLocalization} />
 {:else if model.type === StreamElementType.ShortVideo && shortVideoModel}
-  <ShortVideoStreamElementView
+  <ShortVideoStreamElement
     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}
-  <TextStreamElementView model={model} />
-{:else if model.type === StreamElementType.TextRef && data}
-  <TextRefStreamElementView model={model} data={data} />
-{:else if model.type === StreamElementType.WebView}
-  <WebViewStreamElementView model={model} />
+  <TextStreamElement model={model} />
+{:else if model.type === StreamElementType.TextRef}
+  <TextRefStreamElement model={model} data={data} />
 {/if}

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

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