@streamscloud/embeddable 1.1.2

package/dist/core/utils/string-helper.js

@@ -0,0 +1,53 @@
+export class StringHelper {
+    static isBlobUrl(val) {
+        return !!val && val.startsWith('blob:');
+    }
+    static isEmail(val) {
+        if (!val) {
+            return false;
+        }
+        const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return re.test(String(val).toLowerCase());
+    }
+    static isNumeric(n) {
+        const parsed = parseFloat(n);
+        return !isNaN(parsed) && isFinite(parsed);
+    }
+    static isUrl(val) {
+        if (!val) {
+            return false;
+        }
+        try {
+            const url = new URL(val);
+            return (val.startsWith('http://') || val.startsWith('https://')) && url && ['http:', 'https:'].includes(url.protocol);
+        }
+        catch {
+            return false;
+        }
+    }
+    static toKebabCase(str) {
+        return (str
+            .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+            ?.join('-')
+            .toLowerCase() || str);
+    }
+    static toSnakeCase(str) {
+        if (!str) {
+            return str;
+        }
+        return str
+            .split(/(?=[A-Z])/)
+            .join('_')
+            .toLowerCase();
+    }
+    static truncate(str, length) {
+        if (str.length <= length) {
+            return str;
+        }
+        str = str.slice(0, length) + '...';
+        return str;
+    }
+    static capitalizeFirstLetter(word) {
+        return word.charAt(0).toUpperCase() + word.slice(1);
+    }
+}

package/dist/core/utils/url-helper.d.ts

@@ -0,0 +1,3 @@
+export declare class UrlHelper {
+    static getRootDomain(url: URL | Location): string;
+}

package/dist/core/utils/url-helper.js

@@ -0,0 +1,13 @@
+export class UrlHelper {
+    static getRootDomain(url) {
+        let tokens = url.hostname.split('.');
+        if (tokens.length <= 2) {
+            return url.hostname;
+        }
+        tokens = tokens.slice(-3);
+        if (['co', 'com'].indexOf(tokens[1]) > -1) {
+            return tokens.join('.');
+        }
+        return tokens.slice(-2).join('.');
+    }
+}

package/dist/core/utils/utils.d.ts

@@ -0,0 +1,28 @@
+export declare class Utils {
+    static assertUnreachable(_x: never): never;
+    static clone<T>(value: T): T;
+    /**
+     * Find the greatest common divisor of 2 numbers
+     */
+    static gcd(a: number, b: number): number;
+    /**
+     * Find the least dividend and divisor by given quotient
+     */
+    static ldd(quotient: number, divisorLimit?: number): {
+        dividend: number;
+        divisor: number;
+    } | null;
+    /**
+     * Returns a function, that, as long as it continues to be invoked, will not
+     * be triggered. The function will be called after it stops being called for
+     * N milliseconds.
+     */
+    static debounce(func: (...args: any[]) => void, wait: number): (...args: unknown[]) => void;
+    static throttle<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => ReturnType<T>;
+    static sleep: (s: number) => Promise<void>;
+    static nameof: <T>(name: keyof T) => keyof T;
+    static unsubscribe(sub: UnsubscribeMethod | UnsubscribeMethod[]): void;
+    static notNullValues(target: object): any[];
+}
+export type Without<T, K> = Pick<T, Exclude<keyof T, K>>;
+export type UnsubscribeMethod = () => void;

package/dist/core/utils/utils.js

@@ -0,0 +1,100 @@
+export class Utils {
+    static assertUnreachable(_x) {
+        throw new Error("Didn't expect to get here");
+    }
+    static clone(value) {
+        return structuredClone(value);
+    }
+    /**
+     * Find the greatest common divisor of 2 numbers
+     */
+    static gcd(a, b) {
+        a = Math.abs(a);
+        b = Math.abs(b);
+        if (b > a) {
+            const temp = a;
+            a = b;
+            b = temp;
+        }
+        while (true) {
+            if (b === 0) {
+                return a;
+            }
+            a %= b;
+            if (a === 0) {
+                return b;
+            }
+            b %= a;
+        }
+    }
+    /**
+     * Find the least dividend and divisor by given quotient
+     */
+    static ldd(quotient, divisorLimit = 1000000) {
+        let divisor = 1;
+        while (divisor <= divisorLimit) {
+            const dividend = quotient * divisor;
+            if (dividend % 1 === 0) {
+                return { dividend, divisor };
+            }
+            divisor++;
+        }
+        return null;
+    }
+    /**
+     * Returns a function, that, as long as it continues to be invoked, will not
+     * be triggered. The function will be called after it stops being called for
+     * N milliseconds.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    static debounce(func, wait) {
+        let timeout;
+        return (...args) => {
+            const later = () => {
+                func.apply(this, args);
+            };
+            clearTimeout(timeout);
+            timeout = window.setTimeout(later, wait);
+        };
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    static throttle(func, wait) {
+        // Capture the current time
+        let time = Date.now();
+        return (...args) => {
+            if (time + wait - Date.now() <= 0) {
+                time = Date.now();
+                // Run the function we've passed to our throttler,
+                // and reset the `time` variable (so we can check again).
+                return func.apply(this, args);
+            }
+            return null;
+        };
+    }
+    static sleep = async (s) => {
+        await setTimeout(() => {
+            return;
+        }, s);
+    };
+    static nameof = (name) => name;
+    static unsubscribe(sub) {
+        if (!sub) {
+            return;
+        }
+        const unsubscribeSingle = (sub) => {
+            if (!sub) {
+                return;
+            }
+            sub();
+        };
+        if (sub instanceof Array) {
+            sub.forEach(unsubscribeSingle);
+        }
+        else {
+            unsubscribeSingle(sub);
+        }
+    }
+    static notNullValues(target) {
+        return Object.values(target).filter((x) => !!x);
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { type MediaItemModel, MediaType } from './core/media';
+export { type ShortVideoViewerModel } from './short-videos/short-video-viewer';
+export { AdType } from './advertising';
+export { Currency } from './products';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { MediaType } from './core/media';
+export {} from './short-videos/short-video-viewer';
+export { AdType } from './advertising';
+export { Currency } from './products';

package/dist/products/index.d.ts

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

package/dist/products/index.js

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

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

@@ -0,0 +1,4 @@
+import { Currency } from './types';
+export declare const toPriceRepresentation: (amount: number, currency: Currency) => 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;

package/dist/products/price-helper.js

@@ -0,0 +1,36 @@
+import { Utils } from '../core/utils';
+import { Currency } from './types';
+export const toPriceRepresentation = (amount, currency) => {
+    const hasDecimalPart = amount - Math.floor(amount) !== 0;
+    const decimalSeparator = (1.1).toLocaleString().substring(1, 2);
+    switch (currency) {
+        case Currency.Eur:
+            return `€ ${amount}`;
+        case Currency.Nok: {
+            return hasDecimalPart ? `kr ${amount}` : `kr ${amount}${decimalSeparator}-`;
+        }
+        case Currency.Usd:
+            return `$ ${amount}`;
+        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/products/product-card/cmp.product-card.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">import { toPriceRepresentation } from '../price-helper';
+import { ImageRounded } from '../../ui/image';
+import { ProportionalContainer } from '../../ui/proportional-container';
+import { ProductCardLocalization } from './product-card-localization.svelte';
+let { model, localization: localizationInit, inert = false } = $props();
+const localization = $derived(new ProductCardLocalization(localizationInit));
+</script>
+
+<div class="product-card" inert={inert}>
+  <ProportionalContainer ratio={4 / 5}>
+    <ImageRounded src={model.image} noBorders={true} />
+  </ProportionalContainer>
+  <div class="product-card__name">{model.title}</div>
+  <div class="product-card__price">
+    <div class="product-price">
+      {#if !model.effectiveSalePrice}
+        <div class="product-price__price">{toPriceRepresentation(model.price, model.currency)}</div>
+      {:else}
+        <div class="product-price__before-price">
+          {#if localization.beforeNowPrefix}
+            {localization.beforeNowPrefix}
+          {/if}
+          {toPriceRepresentation(model.price, model.currency)}
+        </div>
+        <div class="product-price__price product-price__price--sale">
+          {toPriceRepresentation(model.effectiveSalePrice, model.currency)}
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  {#if model.link}
+    <a href={model.link} 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 {
+  --_product-card--global--font-size: var(--product-card--global--font-size, 1rem);
+  --_product-card--name--align: var(--product-card--name--align, center);
+  --_product-card--price--align: var(--product-card--price--align, center);
+  --_product-card--price--color: var(--product-card--price--color, var(--product-card--text--color));
+  --_product-card--price--font-size: var(--product-card--price--font-size, 1.0625em);
+  --_product-card--price--gap: var(--product-card--price--gap, 0.4375em);
+  --_product-card--price--before--color: var(--product-card--price--before--color, #e5e7eb);
+  --_product-card--price--before--font-size: var(--product-card--price--before--font-size, 0.75em);
+  --_product-card--text--color: var(--product-card--text--color);
+  --_product-card--before-price--color: var(--product-card--before-price--color, #e5e7eb);
+  font-size: var(--_product-card--global--font-size);
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  --image--rounded--outer--border-radius: 0.25em;
+}
+.product-card__name {
+  width: 100%;
+  color: var(--_product-card--text--color);
+  font-size: 0.9375em;
+  font-weight: 500;
+  margin-top: 0.5em;
+  text-align: var(--_product-card--name--align);
+  padding: 0 0.3125em;
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.product-card__price {
+  padding-top: 0.3125em;
+  margin-top: auto;
+}
+.product-card__link {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.product-price {
+  --_product-price--gap: var(--product-price--gap, 0.4375em);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--_product-price--gap);
+}
+.product-price__before-price {
+  width: 100%;
+  color: var(--_product-card--price--before--color);
+  text-decoration: line-through;
+  font-size: var(--_product-card--price--before--font-size);
+  font-weight: 500;
+  text-align: var(--_product-card--price--align);
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.product-price__price {
+  width: 100%;
+  color: var(--_product-card--price--color);
+  font-size: var(--_product-card--price--font-size);
+  font-weight: 800;
+  margin-top: auto;
+  text-align: var(--_product-card--price--align);
+  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,10 @@
+import { type IProductCardLocalization } from './product-card-localization.svelte';
+import type { ProductCardModel } from './types';
+type Props = {
+    model: ProductCardModel;
+    inert?: boolean;
+    localization?: IProductCardLocalization;
+};
+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,3 @@
+export { default as ProductCard } from './cmp.product-card.svelte';
+export { type ProductCardModel } from './types';
+export { type IProductCardLocalization } from './product-card-localization.svelte';

package/dist/products/product-card/index.js

@@ -0,0 +1,3 @@
+export { default as ProductCard } from './cmp.product-card.svelte';
+export {} from './types';
+export {} from './product-card-localization.svelte';

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

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

package/dist/products/product-card/mapper.js

@@ -0,0 +1,14 @@
+import { getMediaItemImageUrl } from '../../core/media';
+import { shouldUseSalePrice } from '../price-helper';
+export const mapToProductCard = (payload) => {
+    const effectiveSalePrice = payload.priceAndAvailability.productSalePrices?.find((x) => shouldUseSalePrice(payload.priceAndAvailability.price, x.salePrice, x.salePriceEffectiveDateFrom, x.salePriceEffectiveDateTo));
+    return {
+        id: payload.id,
+        title: payload.title,
+        image: payload.media.length ? getMediaItemImageUrl(payload.media[0]) : null,
+        currency: payload.priceAndAvailability.currency,
+        price: payload.priceAndAvailability.price,
+        effectiveSalePrice: effectiveSalePrice?.salePrice ?? null,
+        link: payload.link
+    };
+};

package/dist/products/product-card/operations.generated.d.ts

@@ -0,0 +1,22 @@
+import type * as SchemaTypes from '../../../gql/types';
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type ProductCardPayloadFragment = {
+    title: string;
+    id: string;
+    link: string | null;
+    media: Array<{
+        url: string;
+        thumbnailUrl: string | null;
+        type: SchemaTypes.MediaType;
+    }>;
+    priceAndAvailability: {
+        currency: SchemaTypes.Currency;
+        price: number;
+        productSalePrices: Array<{
+            salePrice: number;
+            salePriceEffectiveDateFrom: any | null;
+            salePriceEffectiveDateTo: any | null;
+        }> | null;
+    };
+};
+export declare const ProductCardPayloadFragmentDoc: DocumentNode<ProductCardPayloadFragment, unknown>;

package/dist/products/product-card/operations.generated.js

@@ -0,0 +1,65 @@
+export const ProductCardPayloadFragmentDoc = {
+    kind: 'Document',
+    definitions: [
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'ProductCardPayloadFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Product' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'media' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'url' },
+                                    arguments: [
+                                        { kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }
+                                    ]
+                                },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'thumbnailUrl' },
+                                    arguments: [
+                                        { kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }
+                                    ]
+                                },
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                            ]
+                        }
+                    },
+                    { kind: 'Field', name: { kind: 'Name', value: 'title' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'link' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'priceAndAvailability' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'currency' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'price' } },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'productSalePrices' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [
+                                            { kind: 'Field', name: { kind: 'Name', value: 'salePrice' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'salePriceEffectiveDateFrom' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'salePriceEffectiveDateTo' } }
+                                        ]
+                                    }
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+};

package/dist/products/product-card/operations.graphql

@@ -0,0 +1,19 @@
+fragment ProductCardPayloadFragment on Product {
+  media {
+    url(scale: $image_scale)
+    thumbnailUrl(scale: $image_scale)
+    type
+  }
+  title
+  id
+  link
+  priceAndAvailability {
+    currency
+    price
+    productSalePrices {
+      salePrice
+      salePriceEffectiveDateFrom
+      salePriceEffectiveDateTo
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+export interface IProductCardLocalization {
+    beforeNowPrefix?: string | null;
+}
+export declare class ProductCardLocalization {
+    beforeNowPrefix: string | null;
+    constructor(init?: IProductCardLocalization);
+}

package/dist/products/product-card/product-card-localization.svelte.js

@@ -0,0 +1,11 @@
+export class ProductCardLocalization {
+    beforeNowPrefix = $state('Before');
+    constructor(init) {
+        if (!init) {
+            return;
+        }
+        if (init.beforeNowPrefix !== undefined) {
+            this.beforeNowPrefix = init.beforeNowPrefix;
+        }
+    }
+}

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

@@ -0,0 +1,10 @@
+import { Currency } from '..';
+export type ProductCardModel = {
+    id: string;
+    title: string;
+    image: string | null;
+    link: string | null;
+    price: number;
+    currency: Currency;
+    effectiveSalePrice: number | null;
+};

package/dist/products/product-card/types.js

@@ -0,0 +1 @@
+import { Currency } from '..';

package/dist/products/types.d.ts

@@ -0,0 +1,5 @@
+export declare enum Currency {
+    Eur = "EUR",
+    Nok = "NOK",
+    Usd = "USD"
+}

package/dist/products/types.js

@@ -0,0 +1,6 @@
+export var Currency;
+(function (Currency) {
+    Currency["Eur"] = "EUR";
+    Currency["Nok"] = "NOK";
+    Currency["Usd"] = "USD";
+})(Currency || (Currency = {}));

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

@@ -0,0 +1,71 @@
+<script lang="ts">import { getMediaItemImageUrl } from '../../core/media';
+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.media).map((a) => ({ isAd: true, image: getMediaItemImageUrl(a.media), 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.svelte.d.ts

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