@streamscloud/embeddable 3.4.2 → 5.0.0

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

@@ -0,0 +1,220 @@
+<script lang="ts">import { toPriceRepresentation } from '../../products/price-helper';
+import { Button, ButtonSize } from '../../ui/button';
+import { Image } from '../../ui/image';
+import { LineClamp } from '../../ui/line-clamp';
+let { ad, inert = false } = $props();
+</script>
+
+<div class="ad-card" inert={inert}>
+  <div class="ad-card__image">
+    <Image src={ad.image} alt={ad.title} />
+  </div>
+  <div class="ad-card__info">
+    <div class="ad-card__content">
+      {#if ad.title}
+        <div class="ad-card__title">
+          <LineClamp value={ad.title} maxLines={2} />
+        </div>
+      {/if}
+      {#if ad.description}
+        <div class="ad-card__description">
+          <LineClamp value={ad.description} maxLines={2} />
+        </div>
+      {/if}
+    </div>
+    <div class="ad-card__price-container">
+      {#if ad.price && ad.currency}
+        <div class="ad-card__price">
+          {#if ad.priceInfoLabel}
+            <span class="ad-card__price-info-label">{ad.priceInfoLabel}</span>
+          {/if}
+          {toPriceRepresentation({ amount: ad.price, currency: ad.currency })}
+        </div>
+      {/if}
+    </div>
+    <div class="ad-card__button-container">
+      {#if ad.ctaButton}
+        <Button
+          size={ButtonSize.Standard}
+          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}
+          --button--min-width="100%">
+          <span class="ad-card__button-text">{ad.ctaButton.text}</span>
+        </Button>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.ad-card {
+  width: 100%;
+  height: max-content;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  container-type: inline-size;
+  aspect-ratio: 10/16;
+  color: #000000;
+  background-color: rgba(255, 255, 255, 0.9);
+  border: 0.038125rem solid #f2f2f3;
+  border-radius: 0.5rem;
+  padding: 0.75rem 0.75rem 1.125rem;
+  justify-content: flex-start;
+  gap: 0.5rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+:global([data-theme="dark"]) .ad-card {
+  background-color: rgba(18, 18, 18, 0.9);
+  color: #ffffff;
+  border-color: #1e1e1e;
+}
+@container (width < 230px) {
+  .ad-card {
+    padding: 0.5rem 0.5rem 0.75rem;
+  }
+}
+.ad-card__image {
+  border-radius: 0.25rem;
+  overflow: hidden;
+  aspect-ratio: 1/1;
+  width: 100%;
+  --image--width: 100%;
+  --image--height: 100%;
+  --image--object-fit: cover;
+}
+.ad-card__info {
+  display: grid;
+  grid-template-rows: 0.7fr auto auto;
+  grid-template-areas: "content" "price" "button";
+  row-gap: 0rem;
+  flex: 1 1 auto;
+  min-height: 0;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .ad-card__info {
+    row-gap: 0rem;
+  }
+}
+.ad-card__content {
+  grid-area: content;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1875rem;
+  align-self: start;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .ad-card__content {
+    gap: 0.09375rem;
+  }
+}
+.ad-card__price-container {
+  grid-area: price;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  min-height: 3rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .ad-card__price-container {
+    min-height: 2rem;
+  }
+}
+.ad-card__button-container {
+  grid-area: button;
+  display: flex;
+  justify-content: center;
+  align-items: end;
+  min-height: 2.5rem;
+  margin-top: 0.125rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .ad-card__button-container {
+    min-height: 2rem;
+    margin-top: 0.09375rem;
+  }
+}
+.ad-card__button-text {
+  display: block;
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.ad-card__title {
+  font-weight: 700;
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  min-height: 1.375rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .ad-card__title {
+    font-size: 0.75rem;
+    line-height: 0.875rem;
+    min-height: 0.875rem;
+  }
+}
+.ad-card__description {
+  font-weight: 400;
+  color: #6b7280;
+  font-size: 0.9375rem;
+  line-height: 1.375rem;
+  min-height: 1.375rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .ad-card__description {
+    font-size: 0.625rem;
+    line-height: 0.875rem;
+    min-height: 0.875rem;
+  }
+}
+.ad-card__price {
+  font-size: 1.875rem;
+  font-weight: 700;
+  text-align: right;
+  display: flex;
+  align-items: end;
+  gap: 0.625rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .ad-card__price {
+    font-size: 1.25rem;
+  }
+}
+.ad-card__price-info-label {
+  font-family: "Inter", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  letter-spacing: 0;
+  text-align: right;
+  color: #6b7280;
+  white-space: nowrap;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .ad-card__price-info-label {
+    font-size: 0.625rem;
+    line-height: 0.875rem;
+  }
+}</style>

package/dist/{short-videos/short-video-viewer/cmp.ad.svelte.d.ts → ads/ad-card/cmp.ad-card.svelte.d.ts}

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

package/dist/ads/ad-card/index.d.ts

@@ -0,0 +1,3 @@
+export { default as AdCard } from './cmp.ad-card.svelte';
+export type { AdCardModel } from './types';
+export { mapToAdCardModel } from './mapper';

package/dist/ads/ad-card/index.js

@@ -0,0 +1,2 @@
+export { default as AdCard } from './cmp.ad-card.svelte';
+export { mapToAdCardModel } from './mapper';

package/dist/ads/ad-card/mapper.d.ts

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

package/dist/ads/ad-card/mapper.js

@@ -0,0 +1,14 @@
+import { getMediaItemImageUrl } from '../../core/media';
+export const mapToAdCardModel = (payload) => {
+    return {
+        id: payload.id,
+        type: payload.type,
+        image: getMediaItemImageUrl(payload.media[0]),
+        title: payload.title,
+        description: payload.description,
+        price: payload.price,
+        priceInfoLabel: payload.priceInfo,
+        currency: payload.currency,
+        ctaButton: payload.ctaButton
+    };
+};

package/dist/ads/ad-card/operations.generated.d.ts

@@ -0,0 +1,24 @@
+import type * as SchemaTypes from '../../../gql/types';
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type AdCardPayloadFragment = {
+    id: string;
+    title: string;
+    description: string | null;
+    price: number | null;
+    currency: SchemaTypes.Currency | null;
+    priceInfo: string | null;
+    type: SchemaTypes.AdType;
+    ctaButton: {
+        background: string;
+        textColor: string;
+        text: string;
+        url: string;
+        border: string;
+    } | null;
+    media: Array<{
+        url: string;
+        thumbnailUrl: string | null;
+        type: SchemaTypes.MediaType;
+    }>;
+};
+export declare const AdCardPayloadFragmentDoc: DocumentNode<AdCardPayloadFragment, unknown>;

package/dist/ads/ad-card/operations.generated.js

@@ -0,0 +1,48 @@
+export const AdCardPayloadFragmentDoc = {
+    kind: 'Document',
+    definitions: [
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'AdCardPayloadFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Ad' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'title' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'description' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'price' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'currency' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'priceInfo' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'ctaButton' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'background' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'textColor' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'text' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'url' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'border' } }
+                            ]
+                        }
+                    },
+                    { kind: 'Field', name: { kind: 'Name', value: 'type' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'media' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'url' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'thumbnailUrl' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                            ]
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+};

package/dist/ads/ad-card/operations.graphql

@@ -0,0 +1,21 @@
+fragment AdCardPayloadFragment on Ad {
+  id
+  title
+  description
+  price
+  currency
+  priceInfo
+  ctaButton {
+    background
+    textColor
+    text
+    url
+    border
+  }
+  type
+  media {
+    url
+    thumbnailUrl
+    type
+  }
+}

package/dist/ads/ad-card/types.d.ts

@@ -0,0 +1,18 @@
+import { AdType, type Currency } from '../../core/enums';
+export type AdCardModel = {
+    id: string;
+    type: AdType;
+    image: string | null;
+    title: string;
+    description: string | null;
+    price: number | null;
+    currency: Currency | null;
+    priceInfoLabel: string | null;
+    ctaButton: {
+        background: string;
+        textColor: string;
+        text: string;
+        url: string;
+        border: string;
+    } | null;
+};

package/dist/ads/ad-card/types.js

@@ -0,0 +1 @@
+import { AdType } from '../../core/enums';

package/dist/core/locale.d.ts

@@ -1,4 +1,7 @@
 export type Locale = 'en' | 'no';
+export type LocalizationSchema = {
+    [key: string]: Record<Locale, unknown>;
+};
 export declare const getLocale: <T>(input?: Locale | T) => Locale | T;
 export declare const isEn: <T>(input: Locale | T) => input is "en";
 export declare const isNo: <T>(input: Locale | T) => input is "no";

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

@@ -1,4 +1,19 @@
 import { Currency } from '../core/enums';
-export declare const toPriceRepresentation: (amount: number, currency: Currency, includeCurrency?: boolean) => string;
-export declare const shouldUseSalePrice: (price: number, salePrice: number | null, effectiveDateFrom: string | null, effectiveDateTo: string | null) => boolean;
-export declare const isSalePriceEffective: (salePrice: number | null, effectiveDateFrom: string | null, effectiveDateTo: string | null) => boolean;
+export declare const toPriceRepresentation: (data: {
+    amount: number;
+    currency: Currency;
+    includeCurrency?: boolean;
+}) => string;
+export declare const shouldUseSalePrice: (data: {
+    price: number;
+    salePrice: number | null;
+    effectiveDateFrom: number | null;
+    effectiveDateTo: number | null;
+    referenceDate?: string | Date | null;
+}) => boolean;
+export declare const isSalePriceEffective: (data: {
+    salePrice: number | null;
+    effectiveDateFrom: number | null;
+    effectiveDateTo: number | null;
+    referenceDate?: string | Date | null;
+}) => boolean;

package/dist/products/price-helper.js

@@ -1,6 +1,7 @@
 import { Currency } from '../core/enums';
 import { Utils } from '../core/utils';
-export const toPriceRepresentation = (amount, currency, includeCurrency = true) => {
+export const toPriceRepresentation = (data) => {
+    const { amount, currency, includeCurrency = true } = data;
     const formatNumber = (value) => {
         const noDecimals = Number.isInteger(value);
         const options = {
@@ -27,21 +28,23 @@ export const toPriceRepresentation = (amount, currency, includeCurrency = true)
         }
     }
 };
-export const shouldUseSalePrice = (price, salePrice, effectiveDateFrom, effectiveDateTo) => {
-    if (!isSalePriceEffective(salePrice, effectiveDateFrom, effectiveDateTo)) {
+export const shouldUseSalePrice = (data) => {
+    const { price, salePrice, effectiveDateFrom, effectiveDateTo, referenceDate } = data;
+    if (!isSalePriceEffective({ salePrice, effectiveDateFrom, effectiveDateTo, referenceDate })) {
         return false;
     }
     return price !== salePrice;
 };
-export const isSalePriceEffective = (salePrice, effectiveDateFrom, effectiveDateTo) => {
+export const isSalePriceEffective = (data) => {
+    const { salePrice, effectiveDateFrom, effectiveDateTo, referenceDate } = data;
     if (!salePrice) {
         return false;
     }
     if (!effectiveDateFrom && !effectiveDateTo) {
         return true;
     }
-    const now = Date.now();
+    const reference = referenceDate ? (typeof referenceDate === 'string' ? new Date(referenceDate).getTime() : referenceDate.getTime()) : Date.now();
     const fromDate = effectiveDateFrom && new Date(effectiveDateFrom);
     const toDate = effectiveDateTo && new Date(effectiveDateTo);
-    return (!fromDate || now >= fromDate.getTime()) && (!toDate || now < toDate.getTime());
+    return (!fromDate || reference >= fromDate.getTime()) && (!toDate || reference < toDate.getTime());
 };

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

@@ -0,0 +1,219 @@
+<script lang="ts">import { toPriceRepresentation } from '../price-helper';
+import { Image } from '../../ui/image';
+import { LineClamp } from '../../ui/line-clamp';
+import { ProportionalContainer } from '../../ui/proportional-container';
+import { ProductCardLocalization } from './product-card-localization';
+let { product, includeBeforeNowPrefix, inert = false, localization: localizationInit = 'en', on } = $props();
+const localization = $derived(new ProductCardLocalization(localizationInit));
+const showDescriptionPresented = $derived(product.shortDescription && product.shortDescription.length > 0);
+const onProductClicked = (event) => {
+    if (!product.link) {
+        return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    if (on === null || on === void 0 ? void 0 : on.productClick) {
+        on.productClick(product.id);
+    }
+    window.open(product.link, '_blank', 'noopener noreferrer');
+};
+</script>
+
+<div class="product-card" inert={inert}>
+  <ProportionalContainer ratio={1}>
+    <Image src={product.image} />
+  </ProportionalContainer>
+
+  <div class="product-card__info">
+    <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>
+    <LineClamp value={product.shortDescription} maxLines={2}>
+      <div class="product-card__description" class:two-lines={showDescriptionPresented}>{product.shortDescription}</div>
+    </LineClamp>
+    <div class="product-price">
+      <div class="product-price__before-price">
+        {#if product.salePrice}
+          {#if includeBeforeNowPrefix}
+            {localization.beforeNowPrefix}
+          {/if}
+          {toPriceRepresentation({ amount: product.price, currency: product.currency })}
+        {/if}
+      </div>
+      <div class="product-price__price product-price__price--sale">
+        {toPriceRepresentation({ amount: product.salePrice ?? product.price, currency: product.currency })}
+      </div>
+    </div>
+  </div>
+
+  {#if product.link}
+    <a href={product.link} onclick={onProductClicked} target="_blank" rel="noopener noreferrer" class="product-card__link" aria-label="none">&nbsp;</a>
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.product-card {
+  --image--border-radius: 0.25rem;
+  --image--object-fit: fit;
+  --image--width: auto;
+  --image--height: auto;
+  width: 100%;
+  height: max-content;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  container-type: inline-size;
+  aspect-ratio: 10/16;
+  color: #000000;
+  background-color: rgba(255, 255, 255, 0.9);
+  border: 0.038125rem solid #f2f2f3;
+  border-radius: 0.5rem;
+  padding: 0.75rem 0.75rem 1.125rem;
+  justify-content: space-between;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+:global([data-theme="dark"]) .product-card {
+  background-color: rgba(18, 18, 18, 0.9);
+  color: #ffffff;
+  border-color: #1e1e1e;
+}
+@container (width < 230px) {
+  .product-card {
+    padding: 0.5rem 0.5rem 0.75rem;
+  }
+}
+.product-card__info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  margin-top: 0.1875rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .product-card__info {
+    gap: 0.25rem;
+    margin-top: 0.125rem;
+  }
+}
+.product-card__brand {
+  font-weight: 700;
+  font-size: 0.75rem;
+  line-height: 1.375rem;
+  min-height: 1.375rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .product-card__brand {
+    font-size: 0.5rem;
+    line-height: 0.875rem;
+    min-height: 0.875rem;
+  }
+}
+.product-card__title {
+  font-weight: 700;
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  min-height: 1.375rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .product-card__title {
+    font-size: 0.75rem;
+    line-height: 0.875rem;
+    min-height: 0.875rem;
+  }
+}
+.product-card__description {
+  font-weight: 400;
+  color: #6b7280;
+  font-size: 0.9375rem;
+  line-height: 1.375rem;
+  min-height: 1.375rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .product-card__description {
+    font-size: 0.625rem;
+    line-height: 0.875rem;
+    min-height: 0.875rem;
+  }
+}
+.product-card .two-lines {
+  height: 2.75rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .product-card .two-lines {
+    height: 1.75rem;
+  }
+}
+.product-card__link {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.product-price {
+  --_product-price--align: right;
+  --_product-price--before--color: #6b7280;
+  --_product-price--before--font-size: 0.75em;
+  --_product-price--color: inherit;
+  --_product-price--font-size: 1.875em;
+  --_product-price--gap: 0.375em;
+  --_product-price--min-height: 2.40625rem;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-items: end;
+  gap: var(--_product-price--gap);
+  min-height: var(--_product-price--min-height);
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .product-price {
+    --_product-price--before--font-size: 0.5rem;
+    --_product-price--font-size: 1.25rem;
+    --_product-price--gap: 0.25rem;
+  }
+}
+.product-price__before-price {
+  width: 100%;
+  color: var(--_product-price--before--color);
+  text-decoration: line-through;
+  font-size: var(--_product-price--before--font-size);
+  font-weight: 500;
+  text-align: var(--_product-price--align);
+  min-height: var(--_product-price--before--font-size);
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.product-price__price {
+  width: 100%;
+  color: var(--_product-price--color);
+  font-size: var(--_product-price--font-size);
+  font-weight: 800;
+  margin-top: auto;
+  text-align: var(--_product-price--align);
+  min-height: var(--_product-price--font-size);
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}</style>

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

@@ -0,0 +1,15 @@
+import type { Locale } from '../../core/locale';
+import { type IProductCardLocalization } from './product-card-localization';
+import type { ProductCardModel } from './types';
+type Props = {
+    product: ProductCardModel;
+    localization?: IProductCardLocalization | Locale;
+    includeBeforeNowPrefix?: boolean;
+    inert?: boolean;
+    on?: {
+        productClick?: (id: string) => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,4 @@
+export { default as ProductCard } from './cmp.product-card.svelte';
+export { mapToProductCard } from './mapper';
+export type { ProductCardModel } from './types';
+export type { ProductCardPayloadFragment } from './operations.generated';