@streamscloud/embeddable 7.0.1 → 7.0.2-1759150121372

package/dist/posts/post-viewer/cmp.post-viewer.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">import { PostControls } from '../controls';
+import { LineClamp } from '../../ui/line-clamp';
+import { default as AttachmentsHorizontal } from './attachments-horizontal.svelte';
+import { default as Heading } from './heading.svelte';
+import { default as PostMedia } from './post-media.svelte';
+import { PostViewerLocalization } from './post-viewer-localization';
+import { PostViewerUiManager } from './ui-manager.svelte';
+let { model, socialInteractionsHandler, showAttachments = true, showControls = true, autoplay = 'on-appearance', locale = 'en', on } = $props();
+const localization = $derived(new PostViewerLocalization(locale));
+const uiManager = new PostViewerUiManager();
+$effect(() => {
+    uiManager.setCanShowAttachments(showAttachments);
+    uiManager.setCanShowControls(showControls);
+});
+const trackControlsPanelSize = (node) => {
+    const resizeObserver = new ResizeObserver(([entry]) => {
+        const width = entry.contentRect.width;
+        uiManager.setControlsPanelWidth(width);
+    });
+    resizeObserver.observe(node);
+    return {
+        destroy() {
+            resizeObserver.unobserve(node);
+        }
+    };
+};
+</script>
+
+<div class="post-viewer" style={uiManager.globalCssVariables}>
+  <PostMedia id={model.id} media={model.media} autoplay={autoplay} on={{ progress: on?.progress }} />
+  <div class="post-viewer__information">
+    {#if model.heading}
+      <Heading model={model.heading} localization={localization} />
+    {/if}
+    <div class="post-viewer__text">
+      {#if model.text}
+        <LineClamp value={model.text} maxLines={2} enableShowMore={true} />
+      {/if}
+    </div>
+    {#if uiManager.showAttachments && (model.ads.length || model.products.length)}
+      <div class="post-viewer__attachments">
+        <AttachmentsHorizontal
+          model={model}
+          on={{
+            productClick: on?.productClick,
+            productImpression: on?.productImpression,
+            adClick: on?.adClick,
+            adImpression: on?.adImpression
+          }} />
+      </div>
+    {/if}
+  </div>
+
+  <div class="post-viewer__controls-panel" use:trackControlsPanelSize>
+    {#if uiManager.showControls}
+      <PostControls model={model} socialInteractionsHandler={socialInteractionsHandler} on={{ attachmentsClicked: uiManager.toggleEnableAttachments }} />
+    {/if}
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.post-viewer {
+  --video--media-fit: cover;
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  border-radius: 0.375rem;
+  overflow: hidden;
+  position: relative;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .post-viewer {
+    border-radius: 0;
+    position: relative;
+  }
+}
+.post-viewer__controls-panel {
+  position: absolute;
+  left: auto;
+  right: 0.625rem;
+  top: 5rem;
+  bottom: 6.25rem;
+  gap: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+.post-viewer__information {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 1.875rem 0;
+  background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
+}
+.post-viewer__text {
+  color: #ffffff;
+  font-size: 1.125rem;
+  font-weight: 400;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
+  padding: var(--post-viewer--information--text--padding);
+}
+.post-viewer__attachments {
+  margin-top: 1.25rem;
+}</style>

package/dist/{short-videos/short-video-viewer/cmp.short-video-viewer.svelte.d.ts → posts/post-viewer/cmp.post-viewer.svelte.d.ts}

@@ -1,7 +1,8 @@
 import type { Locale } from '../../core/locale';
-import type { IPostSocialInteractionsHandler, ShortVideoViewerModel } from './types';
+import type { IPostSocialInteractionsHandler } from '../social-interactions';
+import type { PostViewerModel } from './types';
 type Props = {
-    model: ShortVideoViewerModel;
+    model: PostViewerModel;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
     showAttachments?: boolean;
     showControls?: boolean;

package/dist/posts/post-viewer/heading.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">import { ImageRound } from '../../ui/image';
+import { TimeAgo } from '../../ui/time-ago';
+import { PostViewerLocalization } from './post-viewer-localization';
+let { model, localization } = $props();
+</script>
+
+<div class="post-viewer-heading">
+  <div class="post-viewer-heading__source-image">
+    <ImageRound src={model.image} alt={`${model.name} profilbilde`} noBorders={true} />
+  </div>
+
+  <div class="post-viewer-heading__info">
+    <div class="post-viewer-heading__source-name">{model.name}</div>
+    <p class="post-viewer-heading__metadata">
+      <TimeAgo date={model.displayDate} locale={localization.locale} />
+      {#if Number.isInteger(model.viewsCount) && model.viewsCount}
+        <span>&middot;</span>
+        {localization.viewsCount(model.viewsCount)}
+      {/if}
+    </p>
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.post-viewer-heading {
+  display: flex;
+  align-items: center;
+  padding: var(--post-viewer--heading--padding);
+  min-width: 0;
+}
+.post-viewer-heading__source-image {
+  width: 2rem;
+  min-width: 2rem;
+  max-width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+  max-height: 2rem;
+  margin-right: 0.625rem;
+  --image--rounded--outer--border-radius: 0.5rem;
+  --image--rounded--inner--border-width: 0;
+  --rounded-img-background: none;
+}
+.post-viewer-heading__info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.post-viewer-heading__source-name {
+  font-size: 0.75rem;
+  line-height: 0.9375rem;
+  font-weight: 500;
+  color: #ffffff;
+  text-shadow: 1px 1px hsl(0, 0%, 10%);
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.post-viewer-heading__metadata {
+  margin: 0;
+  font-size: 0.625rem;
+  line-height: 0.75rem;
+  font-weight: 400;
+  color: #ffffff;
+  text-shadow: 1px 1px hsl(0, 0%, 10%);
+}</style>

package/dist/posts/post-viewer/heading.svelte.d.ts

@@ -0,0 +1,9 @@
+import { PostViewerLocalization } from './post-viewer-localization';
+import type { PostViewerHeadingModel } from './types';
+type Props = {
+    model: PostViewerHeadingModel;
+    localization: PostViewerLocalization;
+};
+declare const Heading: import("svelte").Component<Props, {}, "">;
+type Heading = ReturnType<typeof Heading>;
+export default Heading;

package/dist/posts/post-viewer/index.d.ts

@@ -0,0 +1,4 @@
+export { default as PostViewer } from './cmp.post-viewer.svelte';
+export type { PostViewerModel, PostViewerAdCardModel, PostViewerProductCardModel } from './types';
+export { mapToPostViewerModel } from './mapper';
+export { getPostCoverImage } from './utils';

package/dist/posts/post-viewer/index.js

@@ -0,0 +1,3 @@
+export { default as PostViewer } from './cmp.post-viewer.svelte';
+export { mapToPostViewerModel } from './mapper';
+export { getPostCoverImage } from './utils';

package/dist/posts/post-viewer/mapper.d.ts

@@ -0,0 +1,3 @@
+import type { PostViewerPayloadFragment } from './operations.generated';
+import type { PostViewerModel } from './types';
+export declare const mapToPostViewerModel: (payload: PostViewerPayloadFragment) => PostViewerModel;

package/dist/{short-videos/short-video-viewer → posts/post-viewer}/mapper.js

@@ -1,26 +1,15 @@
 import { MediaType } from '../../core/enums';
 import { getMediaItemImageUrl } from '../../core/media';
 import { shouldUseSalePrice } from '../../products/price-helper';
-export const mapToShortVideoViewerModel = (payload) => {
-    const mediaBlob = payload.postData.media[0];
-    if (!mediaBlob) {
-        console.warn(`Short video '${payload.id}' media is missing. Unexpected behavior.`);
-    }
+export const mapToPostViewerModel = (payload) => {
     return {
         id: payload.id,
-        media: mediaBlob.type === MediaType.Image
-            ? { isImage: true, url: mediaBlob.url }
-            : {
-                isImage: false,
-                url: mediaBlob.url,
-                thumbnailUrl: mediaBlob.thumbnailUrl
-            },
+        media: mapToPostViewerMediaModel(payload.postData),
         text: payload.postData.shortVideoData.text,
         enableSocialInteractions: payload.enableSocialInteractions,
         heading: null,
-        hasAttachments: !!(payload.allProducts.length || payload.ad),
-        ad: payload.ad ? mapToShortVideoAdCardModel(payload.ad) : null,
-        products: payload.allProducts.map((x) => mapToShortVideoProductCard(x))
+        ads: payload.ad ? [mapToPostViewerAdCardModel(payload.ad)] : [],
+        products: payload.allProducts.map((x) => mapToPostViewerProductCard(x))
         // uncomment if you want to test many products behavior
         // .flatMap((x) =>
         //   Array.from({ length: 20 }, (_, i) => ({
@@ -30,7 +19,34 @@ export const mapToShortVideoViewerModel = (payload) => {
         // )
     };
 };
-const mapToShortVideoAdCardModel = (payload) => {
+const emptyMedia = { type: 'image', url: '', isMutable: false };
+const toSingleMediaItem = (mediaBlob) => {
+    switch (mediaBlob.type) {
+        case MediaType.Image:
+            return { type: 'image', url: mediaBlob.url, isMutable: false };
+        case MediaType.Video:
+        case MediaType.ShortVideo:
+            return { type: 'video', url: mediaBlob.url, thumbnailUrl: mediaBlob.thumbnailUrl, isMutable: true };
+        default:
+            return emptyMedia;
+    }
+};
+const mapToPostViewerMediaModel = (payload) => {
+    const mediaBlob = payload.media[0];
+    if (!payload.media.length) {
+        return emptyMedia;
+    }
+    if (payload.media.length > 1) {
+        const items = payload.media.map(toSingleMediaItem);
+        return {
+            type: 'gallery',
+            items,
+            isMutable: items.some((x) => x.isMutable)
+        };
+    }
+    return toSingleMediaItem(mediaBlob);
+};
+const mapToPostViewerAdCardModel = (payload) => {
     return {
         id: payload.id,
         type: payload.type,
@@ -43,7 +59,7 @@ const mapToShortVideoAdCardModel = (payload) => {
         ctaButton: payload.ctaButton
     };
 };
-const mapToShortVideoProductCard = (payload, referenceDate) => {
+const mapToPostViewerProductCard = (payload, referenceDate) => {
     const effectiveSalePrice = payload.priceAndAvailability.productSalePrices?.find((x) => shouldUseSalePrice({
         price: payload.priceAndAvailability.price,
         salePrice: x.salePrice,

package/dist/{short-videos/short-video-viewer → posts/post-viewer}/operations.generated.d.ts

@@ -1,6 +1,6 @@
 import type * as SchemaTypes from '../../../gql/types';
 import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
-export type ShortVideoViewerPayloadFragment = {
+export type PostViewerPayloadFragment = {
     id: string;
     enableSocialInteractions: boolean;
     allProducts: Array<{
@@ -58,4 +58,4 @@ export type ShortVideoViewerPayloadFragment = {
         } | null;
     };
 };
-export declare const ShortVideoViewerPayloadFragmentDoc: DocumentNode<ShortVideoViewerPayloadFragment, unknown>;
+export declare const PostViewerPayloadFragmentDoc: DocumentNode<PostViewerPayloadFragment, unknown>;

package/dist/{short-videos/short-video-viewer → posts/post-viewer}/operations.generated.js

@@ -1,9 +1,9 @@
-export const ShortVideoViewerPayloadFragmentDoc = {
+export const PostViewerPayloadFragmentDoc = {
     kind: 'Document',
     definitions: [
         {
             kind: 'FragmentDefinition',
-            name: { kind: 'Name', value: 'ShortVideoViewerPayloadFragment' },
+            name: { kind: 'Name', value: 'PostViewerPayloadFragment' },
             typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Post' } },
             selectionSet: {
                 kind: 'SelectionSet',

package/dist/{short-videos/short-video-viewer → posts/post-viewer}/operations.graphql

@@ -1,4 +1,4 @@
-fragment ShortVideoViewerPayloadFragment on Post {
+fragment PostViewerPayloadFragment on Post {
   id
   enableSocialInteractions
   allProducts {

package/dist/posts/post-viewer/post-media.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">import { Image } from '../../ui/image';
+import { Video } from '../../ui/video';
+let { id, media, autoplay = 'on-appearance', on } = $props();
+</script>
+
+{#if media.type === 'video'}
+  <Video
+    src={media.url}
+    poster={media.thumbnailUrl}
+    controls={false}
+    autoplay={autoplay}
+    loop={true}
+    id={id}
+    hideSpeaker={true}
+    on={{
+      progress: on?.progress
+    }} />
+{:else if media.type === 'image'}
+  <Image src={media.url} />
+{/if}

package/dist/posts/post-viewer/post-media.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { PostViewerMediaModel } from './types';
+type Props = {
+    id: string;
+    media: PostViewerMediaModel;
+    autoplay?: true | false | 'on-appearance';
+    on?: {
+        progress?: (progress: number) => void;
+    };
+};
+declare const PostMedia: import("svelte").Component<Props, {}, "">;
+type PostMedia = ReturnType<typeof PostMedia>;
+export default PostMedia;

package/dist/{short-videos/short-video-viewer/short-video-viewer-localization.d.ts → posts/post-viewer/post-viewer-localization.d.ts}

@@ -1,7 +1,6 @@
 import { type Locale } from '../../core/locale';
-export declare class ShortVideoViewerLocalization {
+export declare class PostViewerLocalization {
     viewsCount: (count: number) => string;
-    timeAgoLocale: Locale;
-    productLocale: Locale;
+    locale: Locale;
     constructor(locale: Locale);
 }

package/dist/{short-videos/short-video-viewer/short-video-viewer-localization.js → posts/post-viewer/post-viewer-localization.js}

@@ -1,12 +1,10 @@
 import {} from '../../core/locale';
-export class ShortVideoViewerLocalization {
+export class PostViewerLocalization {
     viewsCount;
-    timeAgoLocale;
-    productLocale;
+    locale;
     constructor(locale) {
         this.viewsCount = loc.viewsCount[locale];
-        this.timeAgoLocale = locale;
-        this.productLocale = locale;
+        this.locale = locale;
     }
 }
 const loc = {

package/dist/{short-videos/short-video-viewer → posts/post-viewer}/types.d.ts

@@ -1,36 +1,36 @@
 import { AdType, type Currency } from '../../core/enums';
-export type ShortVideoViewerModel = {
+export type PostViewerModel = {
     id: string;
-    media: {
-        isImage: true;
-        url: string;
-    } | {
-        isImage: false;
-        url: string;
-        thumbnailUrl: string;
-    };
+    media: PostViewerMediaModel;
     text: string | null;
-    heading: ShortVideoViewerHeadingModel | null;
+    heading: PostViewerHeadingModel | null;
     enableSocialInteractions: boolean;
-    products: ShortVideoProductCardModel[];
-    ad: ShortVideoAdCardModel | null;
-    hasAttachments: boolean;
+    products: PostViewerProductCardModel[];
+    ads: PostViewerAdCardModel[];
+};
+export type PostViewerMediaModel = PostViewerImageMediaModel | PostViewerVideoMediaModel | {
+    type: 'gallery';
+    items: Array<PostViewerImageMediaModel | PostViewerVideoMediaModel>;
+    isMutable: boolean;
+};
+export type PostViewerImageMediaModel = {
+    type: 'image';
+    url: string;
+    isMutable: false;
+};
+export type PostViewerVideoMediaModel = {
+    type: 'video';
+    url: string;
+    thumbnailUrl: string;
+    isMutable: true;
 };
-export type ShortVideoViewerHeadingModel = {
+export type PostViewerHeadingModel = {
     image: string | null;
     name: string;
     displayDate: string;
     viewsCount: number;
 };
-export interface IPostSocialInteractionsHandler {
-    getIsLiked: (shortVideoId: string) => PromiseLike<{
-        readonly isLiked: boolean;
-    }>;
-    toggleLike: (shortVideoId: string) => PromiseLike<void>;
-    share: (shortVideoId: string) => PromiseLike<void>;
-}
-type PromiseLike<T> = T | Promise<T>;
-export type ShortVideoProductCardModel = {
+export type PostViewerProductCardModel = {
     id: string;
     title: string;
     shortDescription: string | null;
@@ -41,7 +41,7 @@ export type ShortVideoProductCardModel = {
     currency: Currency;
     salePrice: number | null;
 };
-export type ShortVideoAdCardModel = {
+export type PostViewerAdCardModel = {
     id: string;
     type: AdType;
     image: string | null;
@@ -58,4 +58,3 @@ export type ShortVideoAdCardModel = {
         border: string;
     } | null;
 };
-export {};

package/dist/{short-videos/short-video-viewer → posts/post-viewer}/ui-manager.svelte.d.ts

@@ -1,4 +1,4 @@
-export declare class ShortVideoViewerUiManager {
+export declare class PostViewerUiManager {
     readonly globalCssVariables: string;
     readonly showAttachments: boolean;
     readonly showControls: boolean;
@@ -6,8 +6,10 @@ export declare class ShortVideoViewerUiManager {
     private canShowControls;
     private canShowAttachments;
     private enableAttachments;
-    updateCanShowAttachments: (value: boolean) => void;
-    updateCanShowControls: (value: boolean) => void;
+    private infoPaddingLeft;
+    private infoPaddingRight;
+    setCanShowAttachments: (value: boolean) => void;
+    setCanShowControls: (value: boolean) => void;
     toggleEnableAttachments: () => void;
     setControlsPanelWidth(value: number): void;
 }

package/dist/{short-videos/short-video-viewer → posts/post-viewer}/ui-manager.svelte.js

@@ -1,6 +1,11 @@
-export class ShortVideoViewerUiManager {
+const INFO_PADDING_HORIZONTAL = 20;
+export class PostViewerUiManager {
     globalCssVariables = $derived.by(() => {
-        const values = [`--_short-video-viewer--controls-panel--width: ${this.controlsPanelWidth}px`];
+        const values = [
+            `--post-viewer--heading--padding: 0 ${this.infoPaddingRight}px 14px ${this.infoPaddingLeft}px`,
+            `--post-viewer--information--text--padding: 0 ${this.infoPaddingRight}px 0 ${this.infoPaddingLeft}px`,
+            `--post-viewer--attachments-horizontal--padding-horizontal: ${INFO_PADDING_HORIZONTAL}px`
+        ];
         return values.join(';');
     });
     showAttachments = $derived.by(() => {
@@ -16,10 +21,12 @@ export class ShortVideoViewerUiManager {
     canShowAttachments = $state(false);
     // managed internally by component
     enableAttachments = $state(true);
-    updateCanShowAttachments = (value) => {
+    infoPaddingLeft = $derived(INFO_PADDING_HORIZONTAL);
+    infoPaddingRight = $derived(INFO_PADDING_HORIZONTAL + this.controlsPanelWidth ? this.controlsPanelWidth + 10 : 0);
+    setCanShowAttachments = (value) => {
         this.canShowAttachments = value;
     };
-    updateCanShowControls = (value) => {
+    setCanShowControls = (value) => {
         this.canShowControls = value;
     };
     toggleEnableAttachments = () => {

package/dist/posts/post-viewer/utils.d.ts

@@ -0,0 +1,2 @@
+import type { PostViewerModel } from './types';
+export declare const getPostCoverImage: (post: PostViewerModel) => string;

package/dist/posts/post-viewer/utils.js

@@ -0,0 +1,13 @@
+import { Utils } from '../../core/utils';
+export const getPostCoverImage = (post) => {
+    switch (post.media.type) {
+        case 'image':
+            return post.media.url;
+        case 'video':
+            return post.media.thumbnailUrl;
+        case 'gallery':
+            return post.media.items[0].type === 'image' ? post.media.items[0].url : post.media.items[0].thumbnailUrl;
+        default:
+            Utils.assertUnreachable(post.media);
+    }
+};

package/dist/posts/social-interactions/index.d.ts

@@ -0,0 +1 @@
+export type { IPostSocialInteractionsHandler } from './types';

package/dist/posts/social-interactions/index.js

@@ -0,0 +1 @@
+export {};

package/dist/posts/social-interactions/types.d.ts

@@ -0,0 +1,9 @@
+export interface IPostSocialInteractionsHandler {
+    getIsLiked: (shortVideoId: string) => PromiseLike<{
+        readonly isLiked: boolean;
+    }>;
+    toggleLike: (shortVideoId: string) => PromiseLike<void>;
+    share: (shortVideoId: string) => PromiseLike<void>;
+}
+type PromiseLike<T> = T | Promise<T>;
+export {};

package/dist/posts/social-interactions/types.js

@@ -0,0 +1 @@
+export {};

package/dist/products/product-card/cmp.product-card.svelte

@@ -5,12 +5,31 @@ import { ProportionalContainer } from '../../ui/proportional-container';
 import { ProductCardLocalization } from './product-card-localization';
 let { product, includeBeforeNowPrefix, inert = false, locale = 'en', on } = $props();
 const localization = $derived(new ProductCardLocalization(locale));
-const showDescriptionPresented = $derived(product.shortDescription && product.shortDescription.length > 0);
+const shortDescriptionPresented = $derived(product.shortDescription && product.shortDescription.length > 0);
+const trackImpression = (node) => {
+    if (on === null || on === void 0 ? void 0 : on.impression) {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                var _a;
+                if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
+                    (_a = on.impression) === null || _a === void 0 ? void 0 : _a.call(on, product.id);
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.5 });
+        observer.observe(node);
+        return {
+            destroy() {
+                observer.disconnect();
+            }
+        };
+    }
+};
 const onProductClicked = (event) => {
     event.preventDefault();
     event.stopPropagation();
-    if (on === null || on === void 0 ? void 0 : on.productClick) {
-        on.productClick(product.id);
+    if (on === null || on === void 0 ? void 0 : on.click) {
+        on.click(product.id);
     }
     if (!product.link) {
         return;
@@ -19,7 +38,7 @@ const onProductClicked = (event) => {
 };
 </script>
 
-<div class="product-card" inert={inert}>
+<div class="product-card" inert={inert} use:trackImpression>
   <ProportionalContainer ratio={1}>
     <Image src={product.image} />
   </ProportionalContainer>
@@ -28,11 +47,11 @@ const onProductClicked = (event) => {
     <LineClamp maxLines={1}>
       <div class="product-card__brand">{product.brandName}</div>
     </LineClamp>
-    <LineClamp value={product.shortDescription} maxLines={showDescriptionPresented ? 1 : 2}>
-      <div class="product-card__title" class:two-lines={!showDescriptionPresented}>{product.title}</div>
+    <LineClamp value={product.shortDescription} maxLines={shortDescriptionPresented ? 1 : 2}>
+      <div class="product-card__title" class:two-lines={!shortDescriptionPresented}>{product.title}</div>
     </LineClamp>
     <LineClamp value={product.shortDescription} maxLines={2}>
-      <div class="product-card__description" class:two-lines={showDescriptionPresented}>{product.shortDescription}</div>
+      <div class="product-card__description" class:two-lines={shortDescriptionPresented}>{product.shortDescription}</div>
     </LineClamp>
     <div class="product-price">
       <div class="product-price__before-price">
@@ -49,7 +68,7 @@ const onProductClicked = (event) => {
     </div>
   </div>
 
-  {#if product.link || on?.productClick}
+  {#if product.link || on?.click}
     <a href={product.link} onclick={onProductClicked} target="_blank" rel="noopener noreferrer" class="product-card__link" aria-label="none">&nbsp;</a>
   {/if}
 </div>

package/dist/products/product-card/cmp.product-card.svelte.d.ts

@@ -6,7 +6,8 @@ type Props = {
     includeBeforeNowPrefix?: boolean;
     inert?: boolean;
     on?: {
-        productClick?: (id: string) => void;
+        click?: (id: string) => void;
+        impression?: (id: string) => void;
     };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;