@streamscloud/embeddable 10.1.2 → 12.0.0

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: 'stream',
-                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

@@ -1,47 +1,9 @@
-<script lang="ts">import { Image, ImageRound } from '../../ui/image';
+<script lang="ts">import { Image } from '../../ui/image';
 import { InfiniteScrolling } from '../../ui/infinite-scrolling';
-import { LineClamp } from '../../ui/line-clamp';
 import { ProportionalContainer } from '../../ui/proportional-container';
-import { TimeAgo } from '../../ui/time-ago';
-import { StreamPlayerLocalization } from './stream-player-localization';
-let { model, buffer, activePageId, on, localization } = $props();
+let { buffer, activePageId, on } = $props();
 </script>
 
-<div class="stream-overview-info">
-  <div class="stream-overview-owner">
-    <div class="stream-overview-owner__image">
-      <ImageRound src={model.header.image} />
-    </div>
-    <div class="stream-overview-owner__body">
-      <div class="stream-overview-owner__name">
-        <LineClamp maxLines={1}>
-          {model.header.name}
-        </LineClamp>
-      </div>
-      <div class="stream-overview-owner__meta">
-        <LineClamp maxLines={1}>
-          <TimeAgo date={model.publishedAt || model.createdAt} locale={localization.locale} />
-        </LineClamp>
-      </div>
-    </div>
-  </div>
-  <div class="stream-overview-info__title">
-    <LineClamp maxLines={2}>
-      {model.title}
-    </LineClamp>
-  </div>
-  {#if model.subTitle}
-    <div class="stream-overview-info__subtitle">
-      <LineClamp maxLines={3}>
-        {model.subTitle}
-      </LineClamp>
-    </div>
-  {/if}
-  <div class="stream-overview-info__pages">
-    {localization.pagesCount(model.pagesCount)}
-  </div>
-</div>
-
 <div class="stream-overview-pages">
   {#if buffer.activeChunk}
     <InfiniteScrolling loadMore={buffer.activeChunk.loadMore}>
@@ -73,34 +35,14 @@ let { model, buffer, activePageId, on, localization } = $props();
     opacity: 1;
   }
 }
-.stream-overview-info {
-  padding: 1rem;
-}
-.stream-overview-info__title {
-  font-size: 1.125rem;
-  line-height: 1.55;
-  font-weight: 600;
-  color: #ffffff;
-}
-.stream-overview-info__subtitle {
-  font-size: 0.875rem;
-  color: #ffffff;
-}
-.stream-overview-info__pages {
-  font-size: 0.625rem;
-  line-height: 1;
-  font-weight: 400;
-  letter-spacing: -0.0125rem;
-  color: #999999;
-}
-
 .stream-overview-pages {
   display: flex;
   flex: 1;
   justify-content: center;
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding: 0.9375rem 0.9375rem 0;
+  padding-block: 0.9375rem 0;
+  padding-inline: 0.9375rem;
   --_cross-browser-scrollbar--thumb-color: transparent;
   --_cross-browser-scrollbar--track-color: transparent;
 }
@@ -137,7 +79,7 @@ let { model, buffer, activePageId, on, localization } = $props();
   .stream-overview-pages__grid {
     display: grid;
     width: 100%;
-    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
     gap: 1.25rem;
   }
 }
@@ -153,37 +95,5 @@ let { model, buffer, activePageId, on, localization } = $props();
   }
 }
 .stream-overview-pages__page--active {
-  outline: 2px solid #5a8dec;
-}
-
-.stream-overview-owner {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-.stream-overview-owner__image {
-  width: 2rem;
-  min-width: 2rem;
-  max-width: 2rem;
-  height: 2rem;
-  min-height: 2rem;
-  max-height: 2rem;
-  --image--rounded--inner--border-width: 0;
-  --image--rounded--outer--border-color: #f2f2f3;
-  --image--rounded--outer--border-width: 1px;
-}
-.stream-overview-owner__body {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  color: #ffffff;
-}
-.stream-overview-owner__name {
-  font-size: 0.75rem;
-  font-weight: 500;
-  letter-spacing: -0.015625rem;
-}
-.stream-overview-owner__meta {
-  font-size: 0.625rem;
-  letter-spacing: -0.0125rem;
+  outline: 2px solid var(--brand-color, #5a8dec);
 }</style>

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

@@ -1,11 +1,7 @@
-import { StreamPlayerLocalization } from './stream-player-localization';
 import type { StreamsPlayerBuffer } from './streams-player-buffer.svelte';
-import type { StreamPlayerModel } from './types';
 type Props = {
-    model: StreamPlayerModel;
     buffer: StreamsPlayerBuffer;
     activePageId: string;
-    localization: StreamPlayerLocalization;
     on: {
         setCurrentItem: (index: number) => void;
     };

package/dist/streams/streams-player/stream-player-localization.d.ts

@@ -1,7 +1,6 @@
 import { type Locale } from '../../core/locale';
 export declare class StreamPlayerLocalization {
     streamNotFound: string;
-    pagesCount: (count: number) => string;
     locale: Locale;
     constructor(locale: Locale);
 }

package/dist/streams/streams-player/stream-player-localization.js

@@ -1,11 +1,9 @@
 import {} from '../../core/locale';
 export class StreamPlayerLocalization {
     streamNotFound;
-    pagesCount;
     locale;
     constructor(locale) {
         this.streamNotFound = loc.streamNotFound[locale];
-        this.pagesCount = loc.pagesCount[locale];
         this.locale = locale;
     }
 }
@@ -13,9 +11,5 @@ const loc = {
     streamNotFound: {
         en: 'Stream not found',
         no: 'Stream ikke funnet'
-    },
-    pagesCount: {
-        en: (count) => (count === 1 ? '1 page' : `${count} pages`),
-        no: (count) => (count === 1 ? '1 side' : `${count} sider`)
     }
 };

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) {
@@ -238,10 +242,8 @@ const stopActivityTracking = () => {
   {#snippet overviewPanelContent()}
     {#if contentPlayerConfig.playerBuffer && buffer && currentStreamModel}
       <Overview
-        model={currentStreamModel}
         buffer={buffer}
         activePageId={activePageId}
-        localization={localization}
         on={{
           setCurrentItem: handleChangePage
         }} />

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;
@@ -9,27 +12,34 @@ export type StreamPlayerModel = {
     createdAt: string;
     publishedAt: string | null;
     organizationId: string | null;
-    header: {
-        image: string | null;
-        name: string;
-    };
     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/icon/cmp.icon.svelte

@@ -30,6 +30,7 @@ let { src, color = null } = $props();
 .icon {
   --_icon--color: var(--icon--color);
   --_icon--size: var(--icon--size, 1.25em);
+  --_icon--stroke-color: var(--icon--stroke-color);
   --_icon--stroke-width: var(--icon--stroke-width, 0);
   --_icon--filter: var(--icon--filter, none);
   display: contents;
@@ -89,10 +90,10 @@ let { src, color = null } = $props();
   max-width: var(--_icon--size);
 }
 .icon :global(path) {
-  stroke: var(--_icon--color);
+  stroke: var(--_icon--stroke-color, var(--_icon--color));
   stroke-width: var(--_icon--stroke-width);
 }
 :global([data-theme="dark"]) .icon :global(path) {
-  stroke: var(--_icon--color);
+  stroke: var(--_icon--stroke-color, var(--_icon--color));
   stroke-width: var(--_icon--stroke-width);
 }</style>

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>

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

@@ -0,0 +1,10 @@
+import type { Locale } from '../../core/locale';
+import { type Snippet } from 'svelte';
+type Props = {
+    enableShowMore?: boolean;
+    locale?: Locale;
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;