@streamscloud/embeddable 2.0.4 → 2.1.1

package/dist/products/price-helper.js

@@ -1,47 +0,0 @@
-import { Currency } from '../core/enums';
-import { Utils } from '../core/utils';
-export const toPriceRepresentation = (amount, currency, includeCurrency = true) => {
-    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);
-        }
-    }
-};
-export const shouldUseSalePrice = (price, salePrice, effectiveDateFrom, effectiveDateTo) => {
-    if (!isSalePriceEffective(salePrice, effectiveDateFrom, effectiveDateTo)) {
-        return false;
-    }
-    return price !== salePrice;
-};
-export const isSalePriceEffective = (salePrice, effectiveDateFrom, effectiveDateTo) => {
-    if (!salePrice) {
-        return false;
-    }
-    if (!effectiveDateFrom && !effectiveDateTo) {
-        return true;
-    }
-    const now = Date.now();
-    const fromDate = effectiveDateFrom && new Date(effectiveDateFrom);
-    const toDate = effectiveDateTo && new Date(effectiveDateTo);
-    return (!fromDate || now >= fromDate.getTime()) && (!toDate || now < toDate.getTime());
-};

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

@@ -1,74 +0,0 @@
-<script lang="ts">import { Button, ButtonSize } from '../../ui/button';
-import { Image } from '../../ui/image';
-import { LineClamp } from '../../ui/line-clamp';
-import { ProportionalContainer } from '../../ui/proportional-container';
-let { ad } = $props();
-</script>
-
-<div class="short-video-ad-viewer">
-  <ProportionalContainer ratio={16 / 9}>
-    <Image src={ad.image} alt={ad.title} />
-  </ProportionalContainer>
-  <div class="short-video-ad-viewer__body">
-    {#if ad.title}
-      <p class="short-video-ad-viewer__title">{ad.title}</p>
-    {/if}
-    {#if ad.description}
-      <p class="short-video-ad-viewer__description">
-        <LineClamp value={ad.description} maxLines={3} />
-      </p>
-    {/if}
-    {#if ad.buttonUrl}
-      <div class="short-video-ad-viewer__button">
-        <a href={ad.buttonUrl} target="_blank" class="short-video-ad-viewer__link">
-          <Button size={ButtonSize.Standard}>{ad.buttonText || ad.buttonUrl}</Button>
-        </a>
-      </div>
-    {/if}
-  </div>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.short-video-ad-viewer {
-  --_short-video-ad-viewer--background: var(--short-video-ad-viewer--background, #2e2e2e);
-  display: flex;
-  flex-direction: column;
-  border-radius: 0.25em;
-  background: var(--_short-video-ad-viewer--background);
-  min-height: 0;
-  overflow: hidden;
-  width: 100%;
-}
-.short-video-ad-viewer__body {
-  padding: 1em 1em 1.25em;
-}
-.short-video-ad-viewer__title {
-  color: #ffffff;
-  font-size: 0.9375em;
-  font-weight: bold;
-  display: block;
-  margin-bottom: 0.6666666667em;
-}
-.short-video-ad-viewer__description {
-  color: #ffffff;
-  font-size: 0.75em;
-  display: block;
-  margin-bottom: 1.3333333333em;
-  white-space: pre-line;
-  word-break: break-word;
-}
-.short-video-ad-viewer__button {
-  margin-top: 1em;
-  display: flex;
-  justify-content: center;
-}</style>

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

@@ -1,7 +0,0 @@
-import type { ShortVideoViewerAdModel } from './types';
-type Props = {
-    ad: ShortVideoViewerAdModel;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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

@@ -1,70 +0,0 @@
-<script lang="ts">import { Icon, IconColor } from '../../ui/icon';
-import { ImageRounded } from '../../ui/image';
-import IconTargetArrow from '@fluentui/svg-icons/icons/target_arrow_20_regular.svg';
-let { model } = $props();
-const attachmentsToShow = $derived.by(() => {
-    const products = model.products.filter((p) => !!p.image).map((p) => ({ isAd: false, image: p.image, link: p.link }));
-    const ads = (model.ad ? [model.ad] : []).filter((a) => !!a.image).map((a) => ({ isAd: true, image: a.image, link: a.buttonUrl }));
-    return [...products, ...ads];
-});
-</script>
-
-<div class="attachments-inline-container">
-  <div class="attachments-inline">
-    {#each attachmentsToShow as attachment (attachment)}
-      <div class="attachments-inline__item" onclick={() => attachment.link && window.open(attachment.link, '_blank')} onkeydown={() => {}} role="none">
-        <ImageRounded src={attachment.image} alt="" />
-        {#if attachment.isAd}
-          <div class="attachments-inline__item-icon">
-            <Icon src={IconTargetArrow} color={IconColor.White} />
-          </div>
-        {/if}
-      </div>
-    {/each}
-  </div>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.attachments-inline-container {
-  flex: 1;
-  overflow: hidden;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-}
-
-.attachments-inline {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-  height: 100%;
-  justify-content: flex-end;
-}
-.attachments-inline__item {
-  --image--rounded--width: 3.125rem;
-  --image--rounded--height: 3.75rem;
-  --image--rounded--inner--border-width: 0;
-  --image--rounded--outer--border-radius: 0.25rem;
-  --image--rounded--outer--border-width: 1px;
-  --image--rounded--outer--border-color: #f3f4f6;
-  position: relative;
-  cursor: pointer;
-}
-.attachments-inline__item-icon {
-  position: absolute;
-  bottom: 2px;
-  right: 2px;
-  --icon--size: 1rem;
-}</style>

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

@@ -1,7 +0,0 @@
-import type { ShortVideoViewerModel } from './types';
-type Props = {
-    model: ShortVideoViewerModel;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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

@@ -1,68 +0,0 @@
-<script lang="ts">import { default as ShortVideoAdViewer } from './cmp.ad.svelte';
-import { default as ShortVideoProductViewer } from './cmp.product.svelte';
-import { ShortVideoAttachmentsLocalizationSvelte } from './short-video-attachments-localization.svelte';
-import {} from './types';
-let { shortVideo, localization: localizationInit } = $props();
-const localization = $derived(new ShortVideoAttachmentsLocalizationSvelte(localizationInit));
-</script>
-
-{#if shortVideo.products.length || shortVideo.ad}
-  <div class="short-video-attachments">
-    {#if shortVideo.products.length}
-      <div class="short-video-attachments__section-header">{localization.productsSection}</div>
-      <div class="short-video-attachments__products">
-        {#each shortVideo.products as product (product.id)}
-          <ShortVideoProductViewer product={product} localization={localization.productLocalization} />
-        {/each}
-      </div>
-    {/if}
-
-    {#if shortVideo.ad}
-      <div class="short-video-attachments__section-header">{localization.offersSection}</div>
-      <div class="short-video-attachments__offer">
-        <ShortVideoAdViewer ad={shortVideo.ad} />
-      </div>
-    {/if}
-  </div>
-{/if}
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.short-video-attachments {
-  --_short-video-attachments--margin-vertical: var(--short-video-attachments--margin-vertical, 0);
-  --_short-video-attachments--spacing-vertical: var(--short-video-attachments--spacing-vertical, 1.25rem);
-  --_short-video-attachments--spacing-horizontal: var(--short-video-attachments--spacing-horizontal, 1rem);
-  display: flex;
-  flex-direction: column;
-  gap: var(--_short-video-attachments--spacing-vertical);
-  padding: var(--_short-video-attachments--margin-vertical) 0;
-}
-.short-video-attachments__section-header {
-  color: #d1d5db;
-  font-size: 1rem;
-  font-weight: 700;
-  line-height: 1.2;
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 0.5rem;
-  padding: 0.5625rem var(--_short-video-attachments--spacing-horizontal) 0;
-}
-.short-video-attachments__products {
-  padding: 0 var(--_short-video-attachments--spacing-horizontal);
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  grid-column-gap: var(--_short-video-attachments--spacing-horizontal);
-  grid-row-gap: var(--_short-video-attachments--spacing-vertical);
-}
-.short-video-attachments__offer {
-  padding: 0 var(--_short-video-attachments--spacing-horizontal);
-}</style>

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

@@ -1,9 +0,0 @@
-import { type IShortVideoAttachmentsLocalization } from './short-video-attachments-localization.svelte';
-import { type ShortVideoViewerModel } from './types';
-type Props = {
-    shortVideo: ShortVideoViewerModel;
-    localization?: IShortVideoAttachmentsLocalization;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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

@@ -1,156 +0,0 @@
-<script lang="ts">import { toPriceRepresentation } from '../../products/price-helper';
-import { ImageRounded } from '../../ui/image';
-import { ProportionalContainer } from '../../ui/proportional-container';
-import { ShortVideoProductLocalization } from './short-video-product-localization.svelte';
-let { product, fitToContainer = false, localization: localizationInit } = $props();
-const localization = $derived(new ShortVideoProductLocalization(localizationInit));
-</script>
-
-<div class="short-video-product-viewer">
-  {#if fitToContainer}
-    <div class="short-video-product-viewer__image">
-      <ImageRounded src={product.image} noBorders={true} />
-    </div>
-  {:else}
-    <ProportionalContainer ratio={4 / 5}>
-      <ImageRounded src={product.image} noBorders={true} />
-    </ProportionalContainer>
-  {/if}
-  <div class="short-video-product-viewer__name">{product.title}</div>
-  <div class="short-video-product-viewer__price">
-    <div class="product-price">
-      {#if !product.salePrice}
-        <div class="product-price__price">{toPriceRepresentation(product.price, product.currency)}</div>
-      {:else}
-        <div class="product-price__before-price">
-          {#if localization.beforeNowPrefix}
-            {localization.beforeNowPrefix}
-          {/if}
-          {toPriceRepresentation(product.price, product.currency)}
-        </div>
-        <div class="product-price__price product-price__price--sale">
-          {toPriceRepresentation(product.salePrice, product.currency)}
-        </div>
-      {/if}
-    </div>
-  </div>
-
-  {#if product.link}
-    <a href={product.link} target="_blank" rel="noopener noreferrer" class="short-video-product-viewer__link" aria-label="none">&nbsp;</a>
-  {/if}
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.short-video-product-viewer {
-  width: 100%;
-  height: auto;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  container-type: inline-size;
-  --image--object-fit: contain;
-  --image--rounded--outer--border-radius: 0.25em;
-  --image--rounded--inner--border-color: transparent;
-  --image--rounded--outer--border-color: transparent;
-}
-.short-video-product-viewer__image {
-  flex: 1;
-  min-height: 0;
-}
-.short-video-product-viewer__name {
-  width: 100%;
-  font-weight: 500;
-  font-size: 0.9375rem;
-  color: #ffffff;
-  margin-top: 0.5rem;
-  padding: 0 0.3125rem;
-  text-align: center;
-  text-overflow: ellipsis;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 300px) {
-  .short-video-product-viewer__name {
-    font-size: 0.75rem;
-    margin-top: 0.3125rem;
-    padding: 0 0.25rem;
-  }
-}
-.short-video-product-viewer__price {
-  padding-top: 0.3125rem;
-  margin-top: auto;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 300px) {
-  .short-video-product-viewer__price {
-    padding-top: 0.25rem;
-  }
-}
-.short-video-product-viewer__link {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.product-price {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 0.4375rem;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 300px) {
-  .product-price {
-    gap: 0.3125rem;
-  }
-}
-.product-price__before-price {
-  width: 100%;
-  color: #e5e7eb;
-  text-decoration: line-through;
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-align: center;
-  text-overflow: ellipsis;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 300px) {
-  .product-price__before-price {
-    font-size: 0.625em;
-  }
-}
-.product-price__price {
-  width: 100%;
-  font-size: 1.0625em;
-  color: #ffffff;
-  font-weight: 800;
-  margin-top: auto;
-  text-align: center;
-  text-overflow: ellipsis;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 300px) {
-  .product-price__price {
-    font-size: 0.9375em;
-  }
-}</style>

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

@@ -1,10 +0,0 @@
-import { type IShortVideoProductLocalization } from './short-video-product-localization.svelte';
-import type { ShortVideoViewerProductModel } from './types';
-type Props = {
-    product: ShortVideoViewerProductModel;
-    fitToContainer?: boolean;
-    localization?: IShortVideoProductLocalization;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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

@@ -1,124 +0,0 @@
-<script lang="ts">import { slideHorizontally } from '../../core/transitions';
-import { default as ShortVideoAttachments } from './cmp.attachments.svelte';
-import { default as ShortVideoHeading } from './cmp.short-video-heading.svelte';
-import { ShortVideoDetailsLocalization } from './short-video-details-localization.svelte';
-import {} from './types';
-let { shortVideo, collapsed, localization: localizationInit } = $props();
-const localization = $derived(new ShortVideoDetailsLocalization(localizationInit));
-</script>
-
-{#if !collapsed}
-  <div class="short-video-details" transition:slideHorizontally|local data-theme="dark">
-    <div class="short-video-details__sliding-container">
-      <div class="short-video-details__content">
-        <div class="short-video-details__heading">
-          <ShortVideoHeading
-            model={shortVideo.heading}
-            localization={{ viewsCount: localization.viewsCount, timeAgoLocalization: localization.timeAgoLocalization }} />
-        </div>
-
-        {#if shortVideo.text}
-          <p class="short-video-details__text">
-            {shortVideo.text}
-          </p>
-        {/if}
-      </div>
-
-      <div class="short-video-details__section-splitter"></div>
-
-      <ShortVideoAttachments shortVideo={shortVideo} localization={localization.attachmentsLocalization} />
-    </div>
-  </div>
-{/if}
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.short-video-details {
-  --_short-video-details--padding-horizontal: 1rem;
-  --short-video-attachments--margin-vertical: 1.25rem;
-  --short-video-attachments--spacing-horizontal: var(--_short-video-details--padding-horizontal);
-  background: #1c1c1c;
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  width: 25rem;
-  min-width: 25rem;
-  max-width: 25rem;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  padding-bottom: 0.9375rem;
-  overflow: auto;
-  scrollbar-color: transparent transparent;
-  scrollbar-width: thin;
-  --custom-scrollbar-color: #999999;
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 100%;
-  z-index: 1;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-.short-video-details::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-  background: var(--custom-scrollbar-background, transparent);
-  visibility: hidden;
-}
-.short-video-details::-webkit-scrollbar-thumb {
-  background: transparent;
-}
-.short-video-details:hover {
-  scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
-  scrollbar-width: thin;
-}
-.short-video-details:hover::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-  background: var(--custom-scrollbar-background, transparent);
-  visibility: hidden;
-}
-.short-video-details:hover::-webkit-scrollbar-thumb {
-  background: var(--custom-scrollbar-color, #7d7d7d);
-}
-.short-video-details__sliding-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-@container (width < 576px) {
-  .short-video-details {
-    width: 100%;
-    min-width: 100%;
-    max-width: 100%;
-  }
-}
-.short-video-details__content {
-  padding: 1.5rem var(--_short-video-details--padding-horizontal) 0.875rem;
-  margin-bottom: 0.875rem;
-}
-.short-video-details__heading {
-  --short-video-heading--padding: 0 1.875rem 1.25rem 0;
-}
-.short-video-details__text {
-  color: #d1d5db;
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-weight: 400;
-  white-space: pre-line;
-  word-break: break-word;
-  margin-bottom: 0.4375rem;
-}
-.short-video-details__section-splitter {
-  border-bottom: 1px solid #4b5563;
-}</style>

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

@@ -1,10 +0,0 @@
-import { type IShortVideoDetailsLocalization } from './short-video-details-localization.svelte';
-import { type ShortVideoViewerModel } from './types';
-type Props = {
-    shortVideo: ShortVideoViewerModel;
-    collapsed: boolean;
-    localization?: IShortVideoDetailsLocalization;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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

@@ -1,86 +0,0 @@
-<script lang="ts">import { ImageRound } from '../../ui/image';
-import { TimeAgo } from '../../ui/time-ago';
-import { ShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';
-let { model, localization: localizationInit } = $props();
-const localization = $derived(new ShortVideoViewerLocalization(localizationInit));
-</script>
-
-<div class="short-video-heading">
-  <div class="short-video-heading__source-image">
-    <ImageRound src={model.image} alt={`${model.name} profilbilde`} noBorders={true} />
-  </div>
-
-  <div class="short-video-heading__info">
-    <div class="short-video-heading__source-name">{model.name}</div>
-    <p class="short-video-heading__metadata">
-      <TimeAgo date={model.displayDate} localization={localization.timeAgoLocalization} />
-      {#if Number.isInteger(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;
-  }
-}
-.short-video-heading {
-  --_short-video-heading--container--font-size: var(--short-video-heading--container--font-size, 1em);
-  --_short-video-heading--text--color: var(--short-video-heading--text--color, #374151);
-  --_short-video-heading--meta--color: var(--short-video-heading--meta--color, #6b7280);
-  --_short-video-heading--padding: var(--short-video-heading--padding, 0);
-  display: flex;
-  align-items: center;
-  padding: var(--_short-video-heading--padding);
-  min-width: 0;
-  font-size: var(--_short-video-heading--container--font-size);
-}
-.short-video-heading__source-image {
-  width: 2em;
-  min-width: 2em;
-  max-width: 2em;
-  height: 2em;
-  min-height: 2em;
-  max-height: 2em;
-  margin-right: 0.625em;
-  --image--rounded--outer--border-radius: 0.5em;
-  --image--rounded--inner--border-width: 0;
-  --rounded-img-background: none;
-}
-.short-video-heading__info {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-.short-video-heading__source-name {
-  font-size: 0.75em;
-  line-height: 1.25em;
-  font-weight: 500;
-  color: var(--_short-video-heading--text--color);
-  text-overflow: ellipsis;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-}
-:global([data-theme="dark"]) .short-video-heading__source-name {
-  --_short-video-heading--text--color: var(--short-video-heading--text--color, #ffffff);
-}
-.short-video-heading__metadata {
-  margin: 0;
-  font-size: 0.625em;
-  line-height: 1.2em;
-  font-weight: 400;
-  color: var(--_short-video-heading--meta--color);
-}
-:global([data-theme="dark"]) .short-video-heading__metadata {
-  --_short-video-heading--meta--color: var(--short-video-heading--meta--color, #d1d5db);
-}</style>

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

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