@streamscloud/embeddable 11.0.0 → 12.0.0

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

@@ -1,10 +1,8 @@
 import { InternalMediaCenterConfig } from '../../media-center/config/internal-media-center-config';
 import {} from '../../media-center/config/types';
-import { MediaCenter } from '../../media-center/media-center';
 import { InternalPostAnalyticsHandler } from '../../posts/handlers';
+import { openPostsPlayer } from '../../posts/posts-player';
 import { InternalShortVideoPlayerItemsProvider } from '../data-providers';
-import { ModalShadowHost } from '../../ui/shadow-dom';
-import { mount, unmount } from 'svelte';
 /**
  * Opens the short videos player modal.
  *
@@ -71,35 +69,30 @@ import { mount, unmount } from 'svelte';
 export async function openShortVideosPlayer(init) {
     const { ids, graphqlOrigin, initialId, initiator, playerSettings, on } = init;
     const dataProvider = new InternalShortVideoPlayerItemsProvider({ ids, graphqlOrigin, initialId, initiator });
-    const mediaCenterConfig = init.mediaPageId ? new InternalMediaCenterConfig(init.mediaPageId, graphqlOrigin) : undefined;
+    const mediaCenterConfig = init.mediaPageId ? new InternalMediaCenterConfig({ mediaPageId: init.mediaPageId, graphqlOrigin, initiator }) : undefined;
     const analyticsHandler = new InternalPostAnalyticsHandler(graphqlOrigin);
-    const shadowHost = new ModalShadowHost();
-    const mounted = mount(MediaCenter, {
-        target: shadowHost.shadowRoot,
-        props: {
-            config: mediaCenterConfig || null,
-            playerProps: {
-                mode: 'posts',
-                props: {
-                    dataProvider,
-                    analyticsHandler,
-                    playerSettings: {
-                        hideCloseButton: playerSettings?.hideCloseButton,
-                        locale: playerSettings?.locale,
-                        showStreamsCloudWatermark: true
-                    },
-                    on: {
-                        playerClosed: async () => {
-                            await unmount(mounted);
-                            shadowHost.remove();
-                            if (on?.playerClosed) {
-                                on.playerClosed();
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    });
-    shadowHost.attachToBody();
+    if (mediaCenterConfig) {
+        openPostsPlayer({
+            postsProvider: dataProvider,
+            mediaCenterConfig,
+            playerSettings: {
+                hideCloseButton: playerSettings?.hideCloseButton,
+                locale: playerSettings?.locale,
+                showStreamsCloudWatermark: true
+            },
+            on
+        });
+    }
+    else {
+        openPostsPlayer({
+            postsProvider: dataProvider,
+            analyticsHandler,
+            playerSettings: {
+                hideCloseButton: playerSettings?.hideCloseButton,
+                locale: playerSettings?.locale,
+                showStreamsCloudWatermark: true
+            },
+            on
+        });
+    }
 }

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

@@ -70,9 +70,9 @@ const productModel = $derived.by(() => {
 {:else if model.type === StreamElementType.Stock}
   <StockStreamElementView model={model} locale={locale} />
 {:else if model.type === StreamElementType.Text}
-  <TextStreamElementView model={model} />
+  <TextStreamElementView model={model} locale={locale} />
 {:else if model.type === StreamElementType.TextRef && data}
-  <TextRefStreamElementView model={model} data={data} />
+  <TextRefStreamElementView model={model} data={data} locale={locale} />
 {:else if model.type === StreamElementType.WebView}
   <WebViewStreamElementView model={model} />
 {/if}

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

@@ -1,7 +1,7 @@
-<script lang="ts">import { LineClamp } from '../../../ui/line-clamp';
+<script lang="ts">import { LineClamp, LineClampAuto } from '../../../ui/line-clamp';
 import { getStringValueByKey } from './data-by-key-accessor';
 import { generateTextStyles } from '../styles-transformer';
-let { model, data } = $props();
+let { model, data, locale } = $props();
 const value = $derived.by(() => {
     const values = [];
     const value = getStringValueByKey(data, model.key);
@@ -19,5 +19,9 @@ const value = $derived.by(() => {
 </script>
 
 <div class="text-ref-stream-element" style={generateTextStyles(model.styles)}>
-  <LineClamp value={value} maxLines={model.styles?.maxLines || 'auto'} />
+  {#if model.styles?.maxLines}
+    <LineClamp maxLines={model.styles?.maxLines} locale={locale}>{value}</LineClamp>
+  {:else}
+    <LineClampAuto locale={locale}>{value}</LineClampAuto>
+  {/if}
 </div>

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

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

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

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

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

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

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

@@ -138,12 +138,12 @@ $effect(() => {
     {/if}
     {#if model.textAfter}
       <div class="price-stream-element__text-after" style={textAfterCustomStyles}>
-        <LineClamp value={model.textAfter} maxLines={1} />
+        <LineClamp maxLines={1} locale={localization.locale}>{model.textAfter}</LineClamp>
       </div>
     {/if}
   </div>
   {#if model.stock}
-    <StockElementView model={model.stock} heightOverrideDdu={stockElementHeight} locale={localization.stockLocalization} />
+    <StockElementView model={model.stock} heightOverrideDdu={stockElementHeight} locale={localization.locale} />
   {/if}
 </div>
 

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

@@ -2,6 +2,6 @@ import { type Locale } from '../../../core/locale';
 export declare class PriceStreamElementLocalization {
     saveValue: (value: string | number) => string;
     beforeValue: (value: string) => string;
-    stockLocalization: Locale;
+    locale: Locale;
     constructor(locale: Locale);
 }

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

@@ -2,11 +2,11 @@ import {} from '../../../core/locale';
 export class PriceStreamElementLocalization {
     saveValue;
     beforeValue;
-    stockLocalization;
+    locale;
     constructor(locale) {
         this.saveValue = loc.saveValue[locale];
         this.beforeValue = loc.beforeValue[locale];
-        this.stockLocalization = locale;
+        this.locale = locale;
     }
 }
 const loc = {

package/dist/streams/layout/models/mapper.js

@@ -13,6 +13,8 @@ export const mapToPostModel = (model) => {
         kicker: null,
         title: null,
         text: model.text,
+        viewsCount: model.header?.postViewsCount ?? 0,
+        displayDate: model.header?.postDisplayDate ?? '',
         heading: model.header && {
             image: model.header.sourceImage,
             name: model.header.sourceName,

package/dist/streams/streams-player/index.d.ts

@@ -1,7 +1,8 @@
+import type { Locale } from '../../core/locale';
 import { type IMediaCenterConfig } from '../../media-center/config/types';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
 import type { StreamPageViewerModel } from '../stream-page-viewer/types';
-import type { IStreamAnalyticsHandler, IStreamsPlayerDataProvider, StreamAmplificationParameters, StreamPlayerModel, StreamsPlayerSettings } from './types';
+import type { IStreamAnalyticsHandler, IStreamsPlayerDataProvider, StreamAmplificationParameters, StreamPlayerModel } from './types';
 export { type StreamPlayerModel, type StreamPageViewerModel };
 export { mapToStreamPlayerModel } from '../data-loaders/mapper';
 export type { IStreamsPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterConfig };
@@ -110,7 +111,19 @@ export type { IStreamsPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterC
  */
 export declare function openStreamsPlayer(init: {
     dataProvider: IStreamsPlayerDataProvider;
-    mediaCenterConfig?: IMediaCenterConfig;
+    mediaCenterConfig: IMediaCenterConfig;
+    amplificationParameters?: StreamAmplificationParameters;
+    playerSettings?: StreamsPlayerSettings;
+    on?: {
+        streamActivated?: (data: {
+            title: string;
+            image: string | null;
+        }) => void;
+        playerClosed?: () => void;
+    };
+}): void;
+export declare function openStreamsPlayer(init: {
+    dataProvider: IStreamsPlayerDataProvider;
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
     analyticsHandler?: IStreamAnalyticsHandler;
     amplificationParameters?: StreamAmplificationParameters;
@@ -139,3 +152,9 @@ export declare function openStreamsPlayer(init: {
         playerClosed?: () => void;
     };
 }): void;
+export type StreamsPlayerSettings = {
+    disableBackground?: boolean;
+    locale?: Locale;
+    showStreamsCloudWatermark?: boolean;
+    hideCloseButton?: boolean;
+};

package/dist/streams/streams-player/index.js

@@ -2,9 +2,11 @@ import { toastrWarning } from '../../core/toastr';
 import { InternalMediaCenterConfig } from '../../media-center/config/internal-media-center-config';
 import {} from '../../media-center/config/types';
 import { MediaCenter } from '../../media-center/media-center';
+import { CloseOrchestrator } from '../../ui/player/close-orchestrator';
 import { ModalShadowHost } from '../../ui/shadow-dom';
 import { InternalStreamAnalyticsHandler } from './internal-stream-analytics-handler';
 import { InternalStreamsPlayerDataProvider } from './internal-streams-player-data-provider';
+import { default as StreamsPlayerView } from './streams-player-view.svelte';
 import { mount, unmount } from 'svelte';
 export {};
 export { mapToStreamPlayerModel } from '../data-loaders/mapper';
@@ -20,7 +22,7 @@ export function openStreamsPlayer(init) {
     }
     let mediaCenterConfig = init.mediaCenterConfig;
     if (!mediaCenterConfig && init.mediaPageId) {
-        mediaCenterConfig = new InternalMediaCenterConfig(init.mediaPageId, graphqlOrigin);
+        mediaCenterConfig = new InternalMediaCenterConfig({ mediaPageId: init.mediaPageId, graphqlOrigin, initiator });
     }
     let analyticsHandler = init.analyticsHandler;
     if (!analyticsHandler && !init.dataProvider) {
@@ -28,35 +30,58 @@ export function openStreamsPlayer(init) {
         analyticsHandler = new InternalStreamAnalyticsHandler(graphqlOrigin);
     }
     const shadowHost = new ModalShadowHost();
-    const mounted = mount(MediaCenter, {
-        target: shadowHost.shadowRoot,
-        props: {
-            config: mediaCenterConfig || null,
-            playerProps: {
-                mode: 'streams',
-                props: {
-                    dataProvider,
-                    analyticsHandler,
-                    amplificationParameters,
-                    playerSettings,
-                    postSocialInteractionsHandler,
-                    on: {
-                        streamActivated: (data) => {
+    let mounted;
+    const makeCloseOrchestrator = () => new CloseOrchestrator({
+        closeFn: async () => {
+            await unmount(mounted);
+            shadowHost.remove();
+            if (on?.playerClosed) {
+                on.playerClosed();
+            }
+        },
+        canClose: !playerSettings?.hideCloseButton
+    });
+    if (mediaCenterConfig) {
+        mounted = mount(MediaCenter, {
+            target: shadowHost.shadowRoot,
+            props: {
+                config: mediaCenterConfig,
+                settings: playerSettings,
+                modeProps: {
+                    mode: 'streams',
+                    props: {
+                        dataProvider,
+                        amplificationParameters,
+                        onStreamActivated: (data) => {
                             if (init.on?.streamActivated) {
                                 init.on.streamActivated({ title: data.title, image: data.image });
                             }
-                        },
-                        playerClosed: async () => {
-                            await unmount(mounted);
-                            shadowHost.remove();
-                            if (on?.playerClosed) {
-                                on.playerClosed();
-                            }
+                        }
+                    }
+                },
+                closeOrchestrator: makeCloseOrchestrator()
+            }
+        });
+    }
+    else {
+        mounted = mount(StreamsPlayerView, {
+            target: shadowHost.shadowRoot,
+            props: {
+                dataProvider: { type: 'provider', provider: dataProvider },
+                analyticsHandler,
+                amplificationParameters,
+                playerSettings,
+                postSocialInteractionsHandler,
+                closeOrchestrator: makeCloseOrchestrator(),
+                on: {
+                    streamActivated: (data) => {
+                        if (init.on?.streamActivated) {
+                            init.on.streamActivated({ title: data.title, image: data.image });
                         }
                     }
                 }
             }
-        }
-    });
+        });
+    }
     shadowHost.attachToBody();
 }

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

@@ -42,7 +42,7 @@ let { buffer, activePageId, on } = $props();
   overflow-y: auto;
   overscroll-behavior: contain;
   padding-block: 0.9375rem 0;
-  padding-inline: 0.9375rem 1.3125rem;
+  padding-inline: 0.9375rem;
   --_cross-browser-scrollbar--thumb-color: transparent;
   --_cross-browser-scrollbar--track-color: transparent;
 }

package/dist/streams/streams-player/streams-player-buffer.svelte.d.ts

@@ -2,7 +2,5 @@ import type { StreamPageViewerModel } from '../stream-page-viewer';
 import { DefaultChunksPlayerBuffer } from '../../ui/player/providers';
 import type { IStreamsPlayerDataProvider, StreamPlayerModel } from './types';
 export declare class StreamsPlayerBuffer extends DefaultChunksPlayerBuffer<StreamPageViewerModel, StreamPlayerModel> {
-    constructor(provider: IStreamsPlayerDataProvider, on?: {
-        preloaded?: (self: StreamsPlayerBuffer) => void;
-    });
+    constructor(provider: IStreamsPlayerDataProvider);
 }

package/dist/streams/streams-player/streams-player-buffer.svelte.js

@@ -1,6 +1,6 @@
 import { DefaultChunksPlayerBuffer } from '../../ui/player/providers';
 export class StreamsPlayerBuffer extends DefaultChunksPlayerBuffer {
-    constructor(provider, on) {
+    constructor(provider) {
         super({
             kind: 'chunks',
             initialData: {
@@ -10,6 +10,6 @@ export class StreamsPlayerBuffer extends DefaultChunksPlayerBuffer {
                 return await provider.loadMoreStreams();
             },
             loadChunkItems: provider.getStreamPages
-        }, on);
+        });
     }
 }

package/dist/streams/streams-player/streams-player-view.svelte

@@ -17,7 +17,7 @@ import { default as Overview } from './stream-overview.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization';
 import { StreamsPlayerBuffer } from './streams-player-buffer.svelte';
 import { untrack } from 'svelte';
-let { dataProvider, analyticsHandler, postSocialInteractionsHandler, amplificationParameters, playerSettings, on, mediaCenterData } = $props();
+let { dataProvider, analyticsHandler, postSocialInteractionsHandler, amplificationParameters, playerSettings, closeOrchestrator, on } = $props();
 const localization = $derived(new StreamPlayerLocalization((_a = playerSettings === null || playerSettings === void 0 ? void 0 : playerSettings.locale) !== null && _a !== void 0 ? _a : 'en'));
 let currentStreamModel = $state(null);
 let activePageId = $derived.by(() => { var _a, _b; return (_b = (_a = buffer === null || buffer === void 0 ? void 0 : buffer.current) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : ''; });
@@ -33,11 +33,10 @@ $effect(() => {
     untrack(() => {
         buffer = null;
         contentPlayerConfig.playerBuffer = null;
-        initPlayerBuffer();
+        initPlayerBuffer(dataProvider);
     });
     return () => { };
 });
-$effect(() => contentPlayerConfig.updateMediaCenterData(mediaCenterData));
 $effect(() => contentPlayerConfig.updateTrackingParams(currentStreamModel
     ? {
         streamId: currentStreamModel.id,
@@ -45,7 +44,8 @@ $effect(() => contentPlayerConfig.updateTrackingParams(currentStreamModel
     }
     : null));
 $effect(() => {
-    const stream = buffer === null || buffer === void 0 ? void 0 : buffer.activeChunk.model;
+    var _a;
+    const stream = (_a = buffer === null || buffer === void 0 ? void 0 : buffer.activeChunk) === null || _a === void 0 ? void 0 : _a.model;
     untrack(() => {
         var _a;
         if (stream) {
@@ -77,20 +77,23 @@ const streamTrackingParams = $derived.by(() => {
         }
         : false;
 });
-const initPlayerBuffer = () => __awaiter(void 0, void 0, void 0, function* () {
-    new StreamsPlayerBuffer(dataProvider, {
-        preloaded: (instance) => __awaiter(void 0, void 0, void 0, function* () {
-            if (instance.loaded.length) {
-                const coverUrl = instance.loaded[0].cover;
-                if (coverUrl) {
-                    yield preloadImage(coverUrl);
-                }
-                contentPlayerConfig.setBackgroundImageUrl(coverUrl);
-            }
-            buffer = instance;
-            contentPlayerConfig.playerBuffer = instance;
-        })
-    });
+const initPlayerBuffer = (dataProvider) => __awaiter(void 0, void 0, void 0, function* () {
+    let newBuffer;
+    if (dataProvider.type === 'buffer') {
+        newBuffer = dataProvider.buffer;
+    }
+    else {
+        newBuffer = new StreamsPlayerBuffer(dataProvider.provider);
+    }
+    if (newBuffer.loaded.length && (on === null || on === void 0 ? void 0 : on.backgroundImageLoaded)) {
+        const coverUrl = newBuffer.loaded[0].cover;
+        if (coverUrl) {
+            yield preloadImage(coverUrl);
+        }
+        on.backgroundImageLoaded(coverUrl);
+    }
+    buffer = newBuffer;
+    contentPlayerConfig.playerBuffer = newBuffer;
 });
 const contentPlayerConfig = new ContentPlayerConfig({
     playerBuffer: null,
@@ -103,10 +106,9 @@ const contentPlayerConfig = new ContentPlayerConfig({
         }
     },
     socialInteractionsHandler: postSocialInteractionsHandler,
-    mediaCenterData,
     settings: new ContentPlayerSettings(playerSettings),
+    closeOrchestrator,
     callbacks: {
-        close: on === null || on === void 0 ? void 0 : on.playerClosed,
         videoProgress: (pageId, videoId, progress) => {
             onProgress(pageId, videoId, progress);
         },
@@ -144,7 +146,9 @@ const onPageActivated = (id) => {
         return;
     }
     const page = activeChunk.items.find((x) => x.id === id);
-    contentPlayerConfig.setBackgroundImageUrl((page === null || page === void 0 ? void 0 : page.cover) || null);
+    if (on === null || on === void 0 ? void 0 : on.backgroundImageLoaded) {
+        on.backgroundImageLoaded((page === null || page === void 0 ? void 0 : page.cover) || null);
+    }
     if (page) {
         analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamPageView(id, activeChunk.model.id);
         if (page.type === 'short-video' && page.shortVideo) {

package/dist/streams/streams-player/streams-player-view.svelte.d.ts

@@ -1,8 +1,4 @@
-import type { MediaCenterData } from '../../media-center/model/types';
 import type { StreamsPlayerProps } from './types';
-type $$ComponentProps = StreamsPlayerProps & {
-    mediaCenterData?: MediaCenterData;
-};
-declare const StreamsPlayerView: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const StreamsPlayerView: import("svelte").Component<StreamsPlayerProps, {}, "">;
 type StreamsPlayerView = ReturnType<typeof StreamsPlayerView>;
 export default StreamsPlayerView;

package/dist/streams/streams-player/types.d.ts

@@ -1,6 +1,9 @@
-import type { IContentPlayerSettingsInitializer } from '../../content-player/content-player-settings';
+import type { Locale } from '../../core/locale';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
 import type { StreamPageViewerModel } from '../stream-page-viewer';
+import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
+import type { PlayerColors } from '../../ui/player/colors';
+import type { StreamsPlayerBuffer } from './streams-player-buffer.svelte';
 export type StreamPlayerModel = {
     id: string;
     title: string;
@@ -12,20 +15,31 @@ export type StreamPlayerModel = {
     pagesCount: number;
 };
 export type StreamsPlayerProps = {
-    dataProvider: IStreamsPlayerDataProvider;
+    dataProvider: {
+        type: 'buffer';
+        buffer: StreamsPlayerBuffer;
+    } | {
+        type: 'provider';
+        provider: IStreamsPlayerDataProvider;
+    };
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
     analyticsHandler?: IStreamAnalyticsHandler;
     amplificationParameters?: StreamAmplificationParameters;
     playerSettings?: StreamsPlayerSettings;
+    closeOrchestrator: ICloseOrchestrator;
     on?: {
         streamActivated?: (data: {
             title: string;
             image: string | null;
         }) => void;
-        playerClosed?: () => void;
+        backgroundImageLoaded?: (imageUrl: string | null) => void;
     };
 };
-export type StreamsPlayerSettings = Pick<IContentPlayerSettingsInitializer, 'disableBackground' | 'hideCloseButton' | 'locale' | 'showStreamsCloudWatermark'>;
+export type StreamsPlayerSettings = {
+    locale?: Locale;
+    showStreamsCloudWatermark?: boolean;
+    playerColors?: PlayerColors;
+};
 export type StreamAmplificationParameters = {
     campaignId: string;
     campaignName: string;

package/dist/ui/line-clamp/cmp.line-clamp-auto.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">import { LineClampLocalization } from './line-clamp-localization';
+import { LineClampUtils } from './line-clamp-utils';
+import { onDestroy, onMount } from 'svelte';
+let { locale, enableShowMore = false, children } = $props();
+const localization = $derived(new LineClampLocalization(locale !== null && locale !== void 0 ? locale : 'en'));
+let parent;
+let element;
+let clampWrapperRef;
+let isTruncated = $state(false);
+let showingAllText = $state(false);
+let resizeObserver = null;
+const canShowMore = $derived(enableShowMore && isTruncated && !showingAllText);
+onMount(() => {
+    let parentElement = element.parentElement;
+    if (!parentElement || !('clientHeight' in parentElement)) {
+        console.error('Unsupported parent for multiline clamper');
+    }
+    else {
+        parent = parentElement;
+        clamp();
+        resizeObserver = new ResizeObserver(clamp);
+        resizeObserver.observe(parent);
+    }
+});
+onDestroy(() => {
+    resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+    resizeObserver = null;
+});
+const clamp = () => {
+    isTruncated = clampWrapperRef.scrollHeight > clampWrapperRef.offsetHeight;
+    if (showingAllText) {
+        setClampValue('unset');
+    }
+    else {
+        const clampValue = LineClampUtils.calculateClampValue(parent);
+        setClampValue(clampValue.toString());
+    }
+};
+const setClampValue = (value) => {
+    clampWrapperRef.style.setProperty('-webkit-line-clamp', value);
+};
+const toggleShowMore = () => {
+    showingAllText = !showingAllText;
+    clamp();
+};
+</script>
+
+<div
+  class="line-clamp"
+  class:line-clamp--clickable={canShowMore}
+  bind:this={element}
+  onclick={() => canShowMore && toggleShowMore()}
+  onmousedown={() => {}}
+  role="none">
+  <div class="line-clamp__wrapper-container">
+    <div class="line-clamp__wrapper" bind:this={clampWrapperRef}>
+      {@render children()}
+    </div>
+    <!--Testing new concept-->
+    <!--{#if enableShowMore && isTruncated && !showingAllText}
+      <button type="button" class="line-clamp__show-more-button line-clamp__show-more-button&#45;&#45;inline" onclick={toggleShowMore}>
+        {localization.showMore}
+      </button>
+    {/if}-->
+  </div>
+
+  {#if enableShowMore && showingAllText}
+    <button type="button" class="line-clamp__show-more-button" onclick={toggleShowMore}>
+      {localization.showLess}
+    </button>
+  {/if}
+</div>
+
+<style>.line-clamp {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.line-clamp--clickable {
+  cursor: pointer;
+  pointer-events: auto;
+}
+.line-clamp__wrapper-container {
+  position: relative;
+}
+.line-clamp__wrapper {
+  display: -webkit-box;
+  overflow: hidden;
+  word-break: break-word;
+  white-space: var(--line-clamp-white-space, pre-line);
+  -webkit-box-orient: vertical;
+}
+.line-clamp__show-more-button {
+  font-size: 0.9em;
+  font-style: italic;
+  pointer-events: auto;
+  /*Testing new concept*/
+  /*&--inline {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    padding-left: 1em;
+
+    backdrop-filter:
+      brightness(2)
+      contrast(0.3)
+      saturate(0);
+
+    &::after {
+      content: '...';
+      position: absolute;
+      left: 0;
+    }
+  }*/
+}
+.line-clamp__show-more-button:not(.line-clamp__show-more-button--inline) {
+  margin-top: 0.5em;
+}</style>