@streamscloud/embeddable 6.4.3 → 6.5.0

package/dist/ads/ad-card/cmp.ad-card.svelte

@@ -2,19 +2,7 @@
 import { Button, ButtonSize } from '../../ui/button';
 import { Image } from '../../ui/image';
 import { LineClamp } from '../../ui/line-clamp';
-let { ad, inert = false, on } = $props();
-const onAdClicked = (event) => {
-    var _a;
-    event.preventDefault();
-    event.stopPropagation();
-    if (on === null || on === void 0 ? void 0 : on.adClick) {
-        on.adClick(ad.id);
-    }
-    if (!((_a = ad.ctaButton) === null || _a === void 0 ? void 0 : _a.url)) {
-        return;
-    }
-    window.open(ad.ctaButton.url, '_blank', 'noopener noreferrer');
-};
+let { ad, inert = false } = $props();
 </script>
 
 <div class="ad-card" inert={inert}>
@@ -49,7 +37,7 @@ const onAdClicked = (event) => {
         <div class="ad-card__button">
           <Button
             size={ButtonSize.Standard}
-            on={{ click: onAdClicked }}
+            on={{ click: () => ad.ctaButton && window.open(ad.ctaButton.url, '_blank') }}
             --button--font--size="1em"
             --button--font--color={ad.ctaButton.textColor}
             --button--background={ad.ctaButton.background}
@@ -74,9 +62,6 @@ const onAdClicked = (event) => {
   }
 }
 .ad-card {
-  --image--object-fit: cover;
-  --image--width: auto;
-  --image--height: auto;
   width: 100%;
   height: max-content;
   display: flex;
@@ -86,7 +71,7 @@ const onAdClicked = (event) => {
   aspect-ratio: 9/16;
   color: #000000;
   background-color: rgba(255, 255, 255, 0.9);
-  border: 0.038125rem solid #f2f2f3;
+  border: 1px solid #f2f2f3;
   border-radius: 0.5rem;
   padding: 0.75rem 0.75rem 1.125rem;
   justify-content: flex-start;
@@ -108,6 +93,7 @@ const onAdClicked = (event) => {
   overflow: hidden;
   aspect-ratio: 1/1;
   width: 100%;
+  --image--object-fit: cover;
   --image--width: 100%;
   --image--height: 100%;
 }
@@ -160,7 +146,7 @@ const onAdClicked = (event) => {
   align-items: end;
   min-height: 2.5rem;
   margin-top: 0.125rem;
-  min-width: 0px;
+  min-width: 0;
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 230px) {

package/dist/ads/ad-card/cmp.ad-card.svelte.d.ts

@@ -2,9 +2,6 @@ import type { AdCardModel } from './types';
 type Props = {
     ad: AdCardModel;
     inert?: boolean;
-    on?: {
-        adClick?: (id: string) => void;
-    };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/core/actions/horizontal-wheel-scroll.d.ts

@@ -0,0 +1,4 @@
+import type { Action } from 'svelte/action';
+export declare const horizontalWheelScroll: Action<HTMLElement, {
+    isolateScroll: boolean;
+} | undefined>;

package/dist/core/actions/horizontal-wheel-scroll.js

@@ -0,0 +1,22 @@
+export const horizontalWheelScroll = (node, param = { isolateScroll: true }) => {
+    const onWheel = (event) => {
+        const canScrollX = node.scrollWidth > node.clientWidth;
+        if (!canScrollX) {
+            return;
+        }
+        const delta = event.deltaX !== 0 ? event.deltaX : event.deltaY;
+        if (delta !== 0) {
+            node.scrollLeft += delta;
+            if (param.isolateScroll) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        }
+    };
+    node.addEventListener('wheel', onWheel, { passive: false });
+    return {
+        destroy() {
+            node.removeEventListener('wheel', onWheel);
+        }
+    };
+};

package/dist/core/actions/index.d.ts

@@ -0,0 +1,2 @@
+export { horizontalWheelScroll } from './horizontal-wheel-scroll';
+export { swallowTouch } from './swallow-touch';

package/dist/core/actions/index.js

@@ -0,0 +1,2 @@
+export { horizontalWheelScroll } from './horizontal-wheel-scroll';
+export { swallowTouch } from './swallow-touch';

package/dist/core/actions/swallow-touch.d.ts

@@ -0,0 +1,2 @@
+import type { Action } from 'svelte/action';
+export declare const swallowTouch: Action;

package/dist/core/actions/swallow-touch.js

@@ -0,0 +1,17 @@
+export const swallowTouch = (node) => {
+    const stopAll = (e) => {
+        e.stopPropagation();
+    };
+    node.addEventListener('touchstart', stopAll, { passive: false });
+    node.addEventListener('touchmove', stopAll, { passive: false });
+    node.addEventListener('touchend', stopAll, { passive: false });
+    node.addEventListener('touchcancel', stopAll, { passive: false });
+    return {
+        destroy() {
+            node.removeEventListener('touchstart', stopAll);
+            node.removeEventListener('touchmove', stopAll);
+            node.removeEventListener('touchend', stopAll);
+            node.removeEventListener('touchcancel', stopAll);
+        }
+    };
+};

package/dist/media-center/media-center/cmp.media-center.svelte

@@ -7,6 +7,7 @@
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { horizontalWheelScroll } from '../../core/actions';
 import { Utils } from '../../core/utils';
 import { default as ShortVideosPlayerView } from '../../short-videos/short-videos-player/short-videos-player-view.svelte';
 import { default as StreamPlayer } from '../../streams/stream-player/stream-player.svelte';
@@ -194,6 +195,7 @@ const onScrollMounted = (node) => {
           class:media-center__scroll--has-right={scrollHasRight}
           class:media-center__scroll--has-both={scrollHasRight && scrollHasLeft}
           use:onScrollMounted
+          use:horizontalWheelScroll
           onscroll={updateScrollShadows}>
           <button type="button" class="media-center__overview-button" class:media-center__overview-button--active={overviewOpened} onclick={toggleOverview}>
             <Icon src={IconTextColumnThree} />
@@ -302,7 +304,7 @@ const onScrollMounted = (node) => {
   min-width: 0;
   overflow-x: auto;
   overflow-y: hidden;
-  -webkit-overflow-scrolling: touch;
+  scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
   scrollbar-width: none;
   display: flex;
   align-items: center;
@@ -311,7 +313,12 @@ const onScrollMounted = (node) => {
   mask-image: none;
 }
 .media-center__scroll::-webkit-scrollbar {
-  display: none;
+  width: 0;
+  height: 0;
+  background: var(--custom-scrollbar-background, transparent);
+}
+.media-center__scroll::-webkit-scrollbar-thumb {
+  background: var(--custom-scrollbar-color, #7d7d7d);
 }
 .media-center__scroll--has-left {
   mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) 32px, rgb(0, 0, 0) 100%);
@@ -428,8 +435,7 @@ const onScrollMounted = (node) => {
 .media-center-overview::-webkit-scrollbar {
   width: 3px;
   height: 3px;
-  background: var(--custom-scrollbar-background, transparent);
-  visibility: hidden;
+  background: transparent;
 }
 .media-center-overview::-webkit-scrollbar-thumb {
   background: transparent;
@@ -442,7 +448,6 @@ const onScrollMounted = (node) => {
   width: 3px;
   height: 3px;
   background: var(--custom-scrollbar-background, transparent);
-  visibility: hidden;
 }
 .media-center-overview:hover::-webkit-scrollbar-thumb {
   background: var(--custom-scrollbar-color, #7d7d7d);

package/dist/products/price-helper.d.ts

@@ -1,8 +1,14 @@
 import { Currency } from '../core/enums';
+type CurrecyMode = 'none' | 'symbol' | 'code';
+export type PriceRepresentationOptions = {
+    currencyMode?: CurrecyMode;
+    missingFractionMode?: 'hide' | 'currency-placeholder' | 'zeros' | 'zeros-or-placeholder';
+    locale?: string;
+};
 export declare const toPriceRepresentation: (data: {
     amount: number;
     currency: Currency;
-    includeCurrency?: boolean;
+    options?: PriceRepresentationOptions;
 }) => string;
 export declare const shouldUseSalePrice: (data: {
     price: number;
@@ -17,3 +23,4 @@ export declare const isSalePriceEffective: (data: {
     effectiveDateTo: number | null;
     referenceDate?: string | Date | null;
 }) => boolean;
+export {};

package/dist/products/price-helper.js

@@ -1,32 +1,77 @@
 import { Currency } from '../core/enums';
 import { Utils } from '../core/utils';
 export const toPriceRepresentation = (data) => {
-    const { amount, currency, includeCurrency = true } = data;
-    const formatNumber = (value) => {
-        const noDecimals = Number.isInteger(value);
-        const options = {
-            minimumFractionDigits: noDecimals ? 0 : 2,
-            maximumFractionDigits: noDecimals ? 0 : 2
-        };
-        return value.toLocaleString('no-NO', options);
-    };
-    switch (currency) {
-        case Currency.Eur: {
-            const value = formatNumber(amount);
-            return includeCurrency ? `€ ${value}` : value;
-        }
-        case Currency.Nok: {
-            const formattedValue = Number.isInteger(amount) ? `${amount},-` : formatNumber(amount);
-            return includeCurrency ? `kr ${formatNumber(amount)}` : formattedValue;
-        }
-        case Currency.Usd: {
-            const value = formatNumber(amount);
-            return includeCurrency ? `$ ${value}` : value;
-        }
-        default: {
-            Utils.assertUnreachable(currency);
+    const { amount, currency, options } = data;
+    const { currencyMode = 'symbol', missingFractionMode = 'zeros-or-placeholder', locale = 'nb-NO' } = options ?? {};
+    const cfg = currencyDefaults[currency];
+    // Helper to attach currency per mode
+    const decorateWithCurrency = (value) => {
+        switch (currencyMode) {
+            case 'symbol':
+                return `${cfg.symbol} ${value}`;
+            case 'code':
+                return `${value} ${cfg.code}`;
+            case 'none':
+                return `${value}`;
+            default:
+                Utils.assertUnreachable(currencyMode);
         }
+    };
+    // If amount has a fractional part, show localized number with 2 fraction digits
+    if (hasFraction(amount)) {
+        const nf = new Intl.NumberFormat(locale, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2
+        });
+        return decorateWithCurrency(nf.format(amount));
     }
+    // Fraction is missing: build numeric part according to the selected missingFractionMode
+    const formattedInteger = formatIntegerWithGrouping(amount, locale);
+    const decimalSeparator = getDecimalSeparator(locale);
+    switch (missingFractionMode) {
+        case 'hide':
+            return decorateWithCurrency(formattedInteger);
+        case 'currency-placeholder':
+            if (cfg.missingFractionPlaceholder) {
+                return decorateWithCurrency(`${formattedInteger}${decimalSeparator}${cfg.missingFractionPlaceholder}`);
+            }
+            else {
+                return decorateWithCurrency(formattedInteger);
+            }
+        case 'zeros':
+            return decorateWithCurrency(`${formattedInteger}${decimalSeparator}00`);
+        case 'zeros-or-placeholder':
+            if (cfg.missingFractionPlaceholder) {
+                return decorateWithCurrency(`${formattedInteger}${decimalSeparator}${cfg.missingFractionPlaceholder}`);
+            }
+            else {
+                return decorateWithCurrency(`${formattedInteger}${decimalSeparator}00`);
+            }
+        default:
+            Utils.assertUnreachable(missingFractionMode);
+    }
+};
+const currencyDefaults = {
+    [Currency.Nok]: { symbol: 'kr', code: 'NOK', missingFractionPlaceholder: '-' },
+    [Currency.Usd]: { symbol: '$', code: 'USD' },
+    [Currency.Eur]: { symbol: '€', code: 'EUR' }
+};
+const getDecimalSeparator = (locale) => {
+    const nf = new Intl.NumberFormat(locale);
+    const parts = nf.formatToParts(1.1);
+    const decimalPart = parts.find((p) => p.type === 'decimal');
+    return decimalPart ? decimalPart.value : '.';
+};
+const formatIntegerWithGrouping = (amount, locale) => {
+    const nf = new Intl.NumberFormat(locale, {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0,
+        useGrouping: true
+    });
+    return nf.format(Math.trunc(amount));
+};
+const hasFraction = (amount) => {
+    return Math.abs(amount % 1) > Number.EPSILON;
 };
 export const shouldUseSalePrice = (data) => {
     const { price, salePrice, effectiveDateFrom, effectiveDateTo, referenceDate } = data;

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

@@ -69,7 +69,7 @@ const onProductClicked = (event) => {
   --_product-card--aspect-ratio: var(--product-card--aspect-ratio, 10/16);
   --_product-card--border-radius: var(--product-card--border-radius, 0.5rem);
   --image--border-radius: 0.25rem;
-  --image--object-fit: fit;
+  --image--object-fit: contain;
   --image--width: auto;
   --image--height: auto;
   width: 100%;
@@ -81,7 +81,7 @@ const onProductClicked = (event) => {
   aspect-ratio: var(--_product-card--aspect-ratio);
   color: #000000;
   background-color: rgba(255, 255, 255, 0.9);
-  border: 0.038125rem solid #f2f2f3;
+  border: 1px solid #f2f2f3;
   border-radius: var(--_product-card--border-radius);
   padding: 0.75rem 0.75rem 1.125rem;
   justify-content: space-between;

package/dist/products/product-card/types.d.ts

@@ -2,7 +2,7 @@ import type { Currency } from '../..';
 export type ProductCardModel = {
     id: string;
     title: string;
-    shortDescription?: string | null;
+    shortDescription: string | null;
     link: string | null;
     image: string | null;
     brandName: string | null;

package/dist/short-videos/short-video-viewer/cmp.attachments-horizontal.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">import { horizontalWheelScroll, swallowTouch } from '../../core/actions';
+import { Currency } from '../../core/enums';
+import { toPriceRepresentation } from '../../products/price-helper';
+import { Icon, IconColor } from '../../ui/icon';
+import { ImageRounded } from '../../ui/image';
+import IconTargetArrow from '@fluentui/svg-icons/icons/target_arrow_20_regular.svg?raw';
+let { model, on } = $props();
+const attachmentsToShow = $derived.by(() => {
+    const products = model.products
+        .filter((p) => !!p.image)
+        .map((p) => ({
+        isAd: false,
+        image: p.image,
+        link: p.link,
+        productId: p.id,
+        price: {
+            amount: p.salePrice || p.price,
+            currency: p.currency
+        },
+        title: p.title,
+        description: p.shortDescription
+    }));
+    const ads = (model.ad ? [model.ad] : [])
+        .filter((a) => !!a.image)
+        .map((a) => {
+        var _a;
+        return ({
+            isAd: true,
+            image: a.image,
+            link: ((_a = a.ctaButton) === null || _a === void 0 ? void 0 : _a.url) || null,
+            productId: null,
+            price: a.price && a.currency
+                ? {
+                    amount: a.price,
+                    currency: a.currency,
+                    label: a.priceInfoLabel
+                }
+                : null,
+            title: a.title,
+            description: a.description
+        });
+    });
+    const result = [...ads, ...products];
+    return result;
+});
+const handleAttachmentClick = (attachment) => {
+    if (attachment.productId && (on === null || on === void 0 ? void 0 : on.productClick)) {
+        on.productClick(attachment.productId);
+    }
+    if (attachment.link) {
+        window.open(attachment.link, '_blank');
+    }
+};
+let attachmentElements = $state({});
+let observer = null;
+$effect(() => {
+    if ((on === null || on === void 0 ? void 0 : on.productImpression) && Object.keys(attachmentElements).length > 0) {
+        if (observer) {
+            observer.disconnect();
+        }
+        observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting && entry.intersectionRatio >= 0.1) {
+                    const productId = entry.target.getAttribute('data-product-id');
+                    if (productId) {
+                        on.productImpression(productId, model.id);
+                        observer === null || observer === void 0 ? void 0 : observer.unobserve(entry.target); // Only track once per session
+                    }
+                }
+            });
+        }, { threshold: 0.1 });
+        Object.entries(attachmentElements).forEach(([key, element]) => {
+            if (element && key.startsWith('product-')) {
+                observer === null || observer === void 0 ? void 0 : observer.observe(element);
+            }
+        });
+    }
+    return () => {
+        if (observer) {
+            observer.disconnect();
+            observer = null;
+        }
+    };
+});
+</script>
+
+<div class="attachments-horizontal" use:horizontalWheelScroll use:swallowTouch>
+  {#each attachmentsToShow as attachment, index (attachment)}
+    <div
+      class="attachments-horizontal__item"
+      class:attachments-horizontal__item--single={attachmentsToShow.length === 1}
+      onclick={() => handleAttachmentClick(attachment)}
+      onkeydown={() => {}}
+      role="none"
+      bind:this={attachmentElements[attachment.productId ? `product-${attachment.productId}` : `ad-${index}`]}
+      data-product-id={attachment.productId || undefined}>
+      <div class="attachments-card" class:attachments-card--single={attachmentsToShow.length === 1}>
+        <div class="attachments-card__thumb">
+          <ImageRounded src={attachment.image} alt="" noBorders={true} />
+        </div>
+        <div class="attachments-card__content">
+          <div class="attachments-card__title" title={attachment.title}>
+            {attachment.title}
+          </div>
+          {#if attachment.price}
+            <div class="attachments-card__extra-info">
+              {#if attachment.price.label}
+                {attachment.price.label}<span>&nbsp;</span>
+              {/if}
+              {toPriceRepresentation({ amount: attachment.price.amount, currency: attachment.price.currency, options: { currencyMode: 'code' } })}
+            </div>
+          {:else if attachment.description}
+            <div class="attachments-card__extra-info" title={attachment.description}>
+              {attachment.description}
+            </div>
+          {/if}
+        </div>
+      </div>
+      {#if attachment.isAd}
+        <div class="attachments-horizontal__item-icon">
+          <Icon src={IconTargetArrow} color={IconColor.White} />
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.attachments-horizontal {
+  --_short-video-attachments-horizontal--padding-horizontal: var(--short-video-attachments-horizontal--padding-horizontal, 0);
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: nowrap;
+  width: 100%;
+  justify-content: flex-start;
+  overflow-x: auto;
+  padding: 0 var(--_short-video-attachments-horizontal--padding-horizontal);
+  scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
+  scrollbar-width: none;
+}
+.attachments-horizontal::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  background: var(--custom-scrollbar-background, transparent);
+}
+.attachments-horizontal::-webkit-scrollbar-thumb {
+  background: var(--custom-scrollbar-color, #7d7d7d);
+}
+.attachments-horizontal__item {
+  position: relative;
+  cursor: pointer;
+  width: min-content;
+}
+.attachments-horizontal__item--single {
+  flex: 1 1 auto;
+  width: 100%;
+}
+.attachments-horizontal__item-icon {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  --icon--size: 1rem;
+}
+
+.attachments-card {
+  display: grid;
+  grid-template-columns: 2.375rem 1fr;
+  grid-column-gap: 0.75rem;
+  align-items: center;
+  width: 15.625rem;
+  padding: 0.375rem;
+  background-color: rgba(255, 255, 255, 0.9);
+  color: #000000;
+  border: 0.0625rem solid #f2f2f3;
+  border-radius: 0.25rem;
+}
+.attachments-card--single {
+  width: 100%;
+}
+:global([data-theme="dark"]) .attachments-card {
+  background-color: rgba(18, 18, 18, 0.9);
+  color: #ffffff;
+  border-color: #1e1e1e;
+}
+.attachments-card__thumb {
+  --image--rounded--width: 2.375rem;
+  --image--rounded--height: 2.375rem;
+  overflow: hidden;
+  border-radius: 0.125rem;
+}
+.attachments-card__content {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.attachments-card__title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.0625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.attachments-card__extra-info {
+  font-size: 0.625rem;
+  color: #6b7280;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}</style>

package/dist/short-videos/short-video-viewer/{cmp.attachments-inline.svelte.d.ts → cmp.attachments-horizontal.svelte.d.ts}

@@ -4,8 +4,6 @@ type Props = {
     on?: {
         productClick?: (productId: string) => void;
         productImpression?: (productId: string, videoId: string) => void;
-        adClick?: (adId: string) => void;
-        adImpression?: (adId: string, videoId: string) => void;
     };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

package/dist/short-videos/short-video-viewer/cmp.attachments.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { default as ShortVideoAdCard } from './cmp.short-video-ad-card.svelte';
+<script lang="ts">import { AdCard } from '../../ads/ad-card';
 import { default as ShortVideoProductCard } from './cmp.short-video-product-card.svelte';
 import { ShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
 import {} from './types';
@@ -9,13 +9,7 @@ const localization = $derived(new ShortVideoAttachmentsLocalization(localization
 {#if shortVideo.hasAttachments}
   <div class="short-video-attachments">
     {#if shortVideo.ad}
-      <ShortVideoAdCard
-        ad={shortVideo.ad}
-        videoId={shortVideo.id}
-        on={{
-          adClick: on?.adClick,
-          impression: on?.adImpression
-        }} />
+      <AdCard ad={shortVideo.ad} />
     {/if}
 
     {#if shortVideo.products.length}

package/dist/short-videos/short-video-viewer/cmp.attachments.svelte.d.ts

@@ -7,8 +7,6 @@ type Props = {
     on?: {
         productClick?: (productId: string) => void;
         productImpression?: (productId: string, videoId: string) => void;
-        adClick?: (adId: string) => void;
-        adImpression?: (adId: string, videoId: string) => void;
     };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;