@streamscloud/blocks 0.1.0

package/dist/content/content-viewer/media/content-media.svelte.d.ts

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

package/dist/content/content-viewer/ui-manager.svelte.d.ts

@@ -0,0 +1,10 @@
+export declare class ContentViewerUiManager {
+    readonly showAttachments: boolean;
+    readonly showControls: boolean;
+    readonly infoPaddingInline: number;
+    isMobileView: boolean;
+    controlsPanelWidth: number;
+    enableControls: boolean;
+    enableAttachments: boolean;
+    canShowAttachments: boolean;
+}

package/dist/content/content-viewer/ui-manager.svelte.js

@@ -0,0 +1,18 @@
+const INFO_PADDING_INLINE = 20;
+const INFO_PADDING_INLINE_MOBILE = 10;
+export class ContentViewerUiManager {
+    showAttachments = $derived.by(() => {
+        return this.canShowAttachments && this.enableAttachments;
+    });
+    showControls = $derived.by(() => {
+        return this.enableControls;
+    });
+    infoPaddingInline = $derived.by(() => {
+        return this.isMobileView ? INFO_PADDING_INLINE_MOBILE : INFO_PADDING_INLINE;
+    });
+    isMobileView = $state(false);
+    controlsPanelWidth = $state(0);
+    enableControls = $state(false);
+    enableAttachments = $state(false);
+    canShowAttachments = $state(true);
+}

package/dist/content/controls/content-actions-generator.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ContentModel } from '../model';
+import type { IContentSharingHandler } from '../sharing';
+import type { IContentSocialInteractionsHandler } from '../social-interactions';
+import { ContentActionsHandler } from './content-actions-handler.svelte';
+export declare class ContentActionsGenerator {
+    private props;
+    private handlers;
+    constructor(props: ContentActionsGeneratorProps);
+    getContentActionsHandler(model: ContentModel): ContentActionsHandler;
+}
+type ContentActionsGeneratorProps = {
+    readonly socialInteractionsHandler: IContentSocialInteractionsHandler | undefined;
+    readonly sharingHandler: IContentSharingHandler | undefined;
+    readonly on: {
+        attachmentClicked: () => void;
+    };
+};
+export {};

package/dist/content/controls/content-actions-generator.svelte.js

@@ -0,0 +1,27 @@
+import { ContentActionsHandler } from './content-actions-handler.svelte';
+export class ContentActionsGenerator {
+    props;
+    handlers = {};
+    constructor(props) {
+        this.props = props;
+    }
+    getContentActionsHandler(model) {
+        let handler = this.handlers[model.id];
+        if (!handler) {
+            const props = this.props;
+            handler = new ContentActionsHandler({
+                content: model,
+                get socialInteractionsHandler() {
+                    return props.socialInteractionsHandler ?? null;
+                },
+                get shareClicked() {
+                    const sh = props.sharingHandler;
+                    return sh ? () => sh.share(model.id) : undefined;
+                },
+                attachmentClicked: props.on.attachmentClicked
+            });
+            this.handlers[model.id] = handler;
+        }
+        return handler;
+    }
+}

package/dist/content/controls/content-actions-handler.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { ContentModel } from '../model';
+import type { IContentSocialInteractionsHandler } from '../social-interactions';
+import type { IconColor } from '@streamscloud/kit/ui/icon';
+export declare class ContentActionsHandler {
+    readonly actions: ContentAction[];
+    private content;
+    private props;
+    private isLikedStore;
+    constructor(props: ContentActionsHandlerProps);
+    private initIsLikedStore;
+}
+export type ContentActionsHandlerProps = {
+    content: ContentModel;
+    readonly socialInteractionsHandler: IContentSocialInteractionsHandler | null;
+    readonly shareClicked: (() => void) | undefined;
+    attachmentClicked: () => void;
+};
+type ContentAction = {
+    icon: string;
+    iconColor?: IconColor;
+    callback: () => void;
+};
+export {};

package/dist/content/controls/content-actions-handler.svelte.js

@@ -0,0 +1,55 @@
+import IconHeartFilled from '@fluentui/svg-icons/icons/heart_32_filled.svg?raw';
+import IconHeart from '@fluentui/svg-icons/icons/heart_32_regular.svg?raw';
+import IconShare from '@fluentui/svg-icons/icons/share_48_regular.svg?raw';
+import IconShoppingBag from '@fluentui/svg-icons/icons/shopping_bag_32_regular.svg?raw';
+import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_32_regular.svg?raw';
+import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_32_regular.svg?raw';
+import { MediaVolumeManager } from '@streamscloud/kit/ui/media-playback';
+export class ContentActionsHandler {
+    actions = $derived.by(() => {
+        const result = [];
+        if (this.content.attachments) {
+            result.push({ icon: IconShoppingBag, callback: this.props.attachmentClicked });
+        }
+        if (this.content.enableSocialInteractions && this.props.socialInteractionsHandler) {
+            result.push({
+                icon: this.isLikedStore.isLiked ? IconHeartFilled : IconHeart,
+                iconColor: this.isLikedStore.isLiked ? 'danger' : undefined,
+                callback: () => this.props.socialInteractionsHandler?.toggleLike(this.content.id)
+            });
+        }
+        const shareClicked = this.props.shareClicked;
+        if (shareClicked) {
+            result.push({
+                icon: IconShare,
+                callback: () => shareClicked()
+            });
+        }
+        if (this.content.media && !this.content.media.currentItem.isImage) {
+            result.push({
+                icon: MediaVolumeManager.isMuted ? IconSpeakerMute : IconSpeaker2,
+                callback: () => (MediaVolumeManager.isMuted = !MediaVolumeManager.isMuted)
+            });
+        }
+        return result;
+    });
+    content;
+    props;
+    isLikedStore = $state.raw({
+        get isLiked() {
+            return false;
+        }
+    });
+    constructor(props) {
+        this.content = props.content;
+        this.props = props;
+        void this.initIsLikedStore();
+    }
+    async initIsLikedStore() {
+        const handler = this.props.socialInteractionsHandler;
+        if (!handler) {
+            return;
+        }
+        this.isLikedStore = await handler.getIsLiked(this.content.id);
+    }
+}

package/dist/content/controls/index.d.ts

@@ -0,0 +1 @@
+export { ContentActionsGenerator } from './content-actions-generator.svelte';

package/dist/content/controls/index.js

@@ -0,0 +1 @@
+export { ContentActionsGenerator } from './content-actions-generator.svelte';

package/dist/content/model/content-media-model.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { ContentModelMediaFit, IContentMediaItemModel } from './types';
+export declare class ContentViewerMediaModel {
+    readonly currentItem: {
+        isImage: false;
+        url: string;
+        thumbnailUrl: string;
+    } | {
+        isImage: boolean;
+        url: string;
+    };
+    currentIndex: number;
+    readonly isGallery: boolean;
+    items: IContentMediaItemModel[];
+    mediaFit: ContentModelMediaFit;
+    constructor(init: {
+        media: IContentMediaItemModel[];
+        mediaFit: ContentModelMediaFit;
+        mediaIndex?: number;
+    });
+}

package/dist/content/model/content-media-model.svelte.js

@@ -0,0 +1,16 @@
+export class ContentViewerMediaModel {
+    currentItem = $derived.by(() => {
+        const item = this.items[this.currentIndex];
+        return item ? item : { isImage: true, url: '' };
+    });
+    currentIndex = $state(0);
+    isGallery = $derived.by(() => this.items.length > 1);
+    items;
+    mediaFit;
+    constructor(init) {
+        const { media, mediaFit, mediaIndex } = init;
+        this.items = media;
+        this.mediaFit = mediaFit;
+        this.currentIndex = mediaIndex || 0;
+    }
+}

package/dist/content/model/content-model.d.ts

@@ -0,0 +1,24 @@
+import type { ContentType } from '../../core/enums';
+import { ContentViewerMediaModel } from './content-media-model.svelte';
+import type { IContentCtaCardModel, IContentHeadingModel, IContentModel, IContentProductCardModel } from './types';
+export declare class ContentModel {
+    id: string;
+    media: ContentViewerMediaModel;
+    contentType: ContentType | null;
+    articleId: string | null;
+    texts: {
+        kicker: string | null;
+        title: string | null;
+        text: string | null;
+        readMoreUrl: string | null;
+    };
+    heading: IContentHeadingModel | null;
+    enableSocialInteractions: boolean;
+    attachments: false | {
+        products: IContentProductCardModel[];
+        ctas: IContentCtaCardModel[];
+    };
+    constructor(init: IContentModel & {
+        mediaIndex?: number;
+    });
+}

package/dist/content/model/content-model.js

@@ -0,0 +1,32 @@
+import { ContentViewerMediaModel } from './content-media-model.svelte';
+export class ContentModel {
+    id;
+    media;
+    contentType;
+    articleId;
+    texts;
+    heading;
+    enableSocialInteractions;
+    attachments;
+    constructor(init) {
+        this.id = init.id;
+        this.contentType = init.contentType;
+        this.articleId = init.articleId;
+        this.media = new ContentViewerMediaModel({ media: init.media, mediaFit: init.mediaFit, mediaIndex: init.mediaIndex });
+        this.texts = {
+            kicker: init.kicker,
+            title: init.title,
+            text: init.text,
+            readMoreUrl: init.readMoreUrl ?? null
+        };
+        this.heading = init.heading;
+        this.enableSocialInteractions = init.enableSocialInteractions;
+        this.attachments =
+            init.products.length || init.ctas.length
+                ? {
+                    products: init.products,
+                    ctas: init.ctas
+                }
+                : false;
+    }
+}

package/dist/content/model/index.d.ts

@@ -0,0 +1,3 @@
+export { ContentModel } from './content-model';
+export type { ContentModelMediaFit, IContentCtaCardModel, IContentHeadingModel, IContentMediaItemModel, IContentModel, IContentProductCardModel } from './types';
+export { getContentCoverImage } from './utils';

package/dist/content/model/index.js

@@ -0,0 +1,2 @@
+export { ContentModel } from './content-model';
+export { getContentCoverImage } from './utils';

package/dist/content/model/types.d.ts

@@ -0,0 +1,61 @@
+import { type ContentType, type CtaType, type Currency } from '../../core/enums';
+export type IContentModel = {
+    id: string;
+    contentType: ContentType | null;
+    media: IContentMediaItemModel[];
+    mediaFit: ContentModelMediaFit;
+    kicker: string | null;
+    title: string | null;
+    text: string | null;
+    viewsCount: number;
+    displayDate: string;
+    readMoreUrl?: string;
+    heading: IContentHeadingModel | null;
+    enableSocialInteractions: boolean;
+    articleId: string | null;
+    products: IContentProductCardModel[];
+    ctas: IContentCtaCardModel[];
+};
+export type IContentMediaItemModel = {
+    isImage: true;
+    url: string;
+} | {
+    isImage: false;
+    url: string;
+    thumbnailUrl: string;
+};
+export type IContentHeadingModel = {
+    image: string | null;
+    name: string;
+    displayDate: string;
+    viewsCount: number;
+};
+export type ContentModelMediaFit = 'cover' | 'contain';
+export type IContentProductCardModel = {
+    id: string;
+    title: string;
+    shortDescription: string | null;
+    link: string | null;
+    image: string | null;
+    brandName: string | null;
+    price: number;
+    currency: Currency;
+    salePrice: number | null;
+};
+export type IContentCtaCardModel = {
+    id: string;
+    type: CtaType;
+    image: string | null;
+    title: string;
+    description: string | null;
+    price: number | null;
+    priceInfoLabel: string | null;
+    currency: Currency | null;
+    ctaButton: {
+        background: string;
+        textColor: string;
+        text: string;
+        url: string;
+        border: string;
+    } | null;
+};

package/dist/content/model/types.js

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

package/dist/content/model/utils.d.ts

@@ -0,0 +1,4 @@
+import type { IContentMediaItemModel } from './types';
+export declare const getContentCoverImage: (content: {
+    media: IContentMediaItemModel[];
+}) => string;

package/dist/content/model/utils.js

@@ -0,0 +1,7 @@
+export const getContentCoverImage = (content) => {
+    const firstItem = content.media[0];
+    if (!firstItem) {
+        return '';
+    }
+    return firstItem.isImage ? firstItem.url : firstItem.thumbnailUrl;
+};

package/dist/content/sharing/index.d.ts

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

package/dist/content/sharing/index.js

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

package/dist/content/sharing/types.d.ts

@@ -0,0 +1,5 @@
+export interface IContentSharingHandler {
+    share: (contentId: string) => PromiseLike<void>;
+}
+type PromiseLike<T> = T | Promise<T>;
+export {};

package/dist/content/sharing/types.js

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

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

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

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

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

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

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

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

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

package/dist/core/enums.d.ts

@@ -0,0 +1,4 @@
+export type ContentType = 'ARTICLE' | 'MEDIA' | 'MOMENT' | 'SHORT_VIDEO' | 'VIDEO';
+export type CtaType = 'BANNER_RESPONSIVE' | 'MEDIA_DIALOG_PROMOTION' | 'STORY';
+export type Currency = 'EUR' | 'NOK' | 'USD';
+export type MediaType = 'AUDIO' | 'IMAGE' | 'VIDEO';

package/dist/core/enums.js

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

package/dist/cta/cta-card/cmp.cta-card.svelte

@@ -0,0 +1,259 @@
+<script lang="ts">import { toPriceRepresentation } from '@streamscloud/kit/core/utils';
+import { Button } from '@streamscloud/kit/ui/button';
+import { Image } from '@streamscloud/kit/ui/image';
+import { LineClamp } from '@streamscloud/kit/ui/line-clamp';
+let { cta, inert = false, on } = $props();
+const trackImpression = (node) => {
+    if (on?.impression) {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
+                    on.impression?.(cta.id);
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.5 });
+        observer.observe(node);
+        return {
+            destroy() {
+                observer.disconnect();
+            }
+        };
+    }
+};
+const handleCtaClick = () => {
+    if (on?.click) {
+        on.click(cta.id);
+    }
+    if (cta.ctaButton?.url) {
+        window.open(cta.ctaButton.url, '_blank', 'noopener noreferrer');
+    }
+};
+</script>
+
+<div
+  class="cta-card"
+  style:--_--cta-card--cta--background={cta.ctaButton?.background}
+  style:--_--cta-card--cta--text-color={cta.ctaButton?.textColor}
+  inert={inert}
+  use:trackImpression>
+  <div class="cta-card__image">
+    <Image src={cta.image} alt={cta.title} />
+  </div>
+  <div class="cta-card__info">
+    <div class="cta-card__content">
+      {#if cta.title}
+        <div class="cta-card__title">
+          <LineClamp maxLines={2}>{cta.title}</LineClamp>
+        </div>
+      {/if}
+      {#if cta.description}
+        <div class="cta-card__description">
+          <LineClamp maxLines={2}>{cta.description}</LineClamp>
+        </div>
+      {/if}
+    </div>
+    <div class="cta-card__price-container">
+      {#if cta.price && cta.currency}
+        <div class="cta-card__price">
+          {#if cta.priceInfoLabel}
+            <span class="cta-card__price-info-label">{cta.priceInfoLabel}</span>
+          {/if}
+          {toPriceRepresentation({ amount: cta.price, currency: cta.currency })}
+        </div>
+      {/if}
+    </div>
+    <div class="cta-card__button-container">
+      {#if cta.ctaButton && cta.ctaButton.url && cta.ctaButton.text}
+        <div class="cta-card__button">
+          <Button type="button" size="md" variant="secondary" fullWidth on={{ click: handleCtaClick }}>
+            <span class="cta-card__button-text">{cta.ctaButton.text}</span>
+          </Button>
+        </div>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<!--
+  @component
+  Call-to-action card with image, primary text, secondary text, and CTA button.
+
+  ### CSS Custom Properties
+  | Property | Description | Default |
+  |---|---|---|
+  | `--sc-blocks--cta-card--background-color` | Card background | `rgb(from light-dark(white, black) r g b / 90%)` |
+  | `--sc-blocks--cta-card--border-color` | Card border color | `--sc-kit--color--border` |
+  | `--sc-blocks--cta-card--price-color` | Price color | `inherit` |
+  | `--sc-blocks--cta-card--text--primary` | Primary text color | `--sc-kit--color--text--primary` |
+  | `--sc-blocks--cta-card--text-secondary` | Secondary text color | `--sc-kit--color--text--secondary` |
+-->
+
+<style>.cta-card {
+  --_cta-card--background-color: var(
+    --sc-blocks--cta-card--background-color,
+    rgb(from light-dark(#ffffff, #000000) r g b / 90%)
+  );
+  --_cta-card--border-color: var(--sc-blocks--cta-card--border-color, var(--sc-kit--color--border));
+  --_cta-card--price-color: var(--sc-blocks--cta-card--price-color, inherit);
+  --_cta-card--text--primary: var(--sc-blocks--cta-card--text--primary, var(--sc-kit--color--text--primary));
+  --_cta-card--text-secondary: var(--sc-blocks--cta-card--text-secondary, var(--sc-kit--color--text--secondary));
+  --_cta-card--cta--background: var(--_--cta-card--cta--background, var(--sc-kit--color--bg--panel));
+  --_cta-card--cta--text-color: var(--_--cta-card--cta--text-color, var(--sc-kit--color--text--primary));
+  width: 100%;
+  height: max-content;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  container-type: inline-size;
+  aspect-ratio: 9/16;
+  background-color: var(--_cta-card--background-color);
+  border: 1px solid var(--_cta-card--border-color);
+  border-radius: var(--sc-kit--radius--lg);
+  padding: var(--sc-kit--space--3) var(--sc-kit--space--3) 1.125rem;
+  justify-content: flex-start;
+  gap: var(--sc-kit--space--2);
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .cta-card {
+    padding: var(--sc-kit--space--2) var(--sc-kit--space--2) var(--sc-kit--space--3);
+  }
+}
+.cta-card__image {
+  border-radius: var(--sc-kit--radius--sm);
+  overflow: hidden;
+  aspect-ratio: 1/1;
+  width: 100%;
+  --sc-kit--image--object-fit: cover;
+}
+.cta-card__info {
+  display: grid;
+  grid-template-rows: 0.7fr auto auto;
+  grid-template-areas: "content" "price" "button";
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.cta-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) {
+  .cta-card__content {
+    gap: 0.0938rem;
+  }
+}
+.cta-card__price-container {
+  grid-area: price;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: 3rem;
+  overflow: hidden;
+  min-width: 0;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .cta-card__price-container {
+    height: 2rem;
+  }
+}
+.cta-card__button-container {
+  grid-area: button;
+  display: flex;
+  justify-content: center;
+  align-items: end;
+  margin-top: 0.625rem;
+  min-width: 0;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .cta-card__button-container {
+    margin-top: 0.375rem;
+  }
+}
+.cta-card__button-text {
+  display: block;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.cta-card__title {
+  color: var(--_cta-card--text--primary);
+  font-weight: var(--sc-kit--font-weight--bold);
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  min-height: 1.375rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .cta-card__title {
+    font-size: var(--sc-kit--font-size--sm);
+    line-height: 0.875rem;
+    min-height: 0.875rem;
+  }
+}
+.cta-card__description {
+  font-weight: var(--sc-kit--font-weight--regular);
+  color: var(--_cta-card--text-secondary);
+  font-size: 0.9375rem;
+  line-height: 1.375rem;
+  min-height: 1.375rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .cta-card__description {
+    font-size: 0.625rem;
+    line-height: 0.875rem;
+    min-height: 0.875rem;
+  }
+}
+.cta-card__price {
+  font-size: 1.6875rem;
+  font-weight: var(--sc-kit--font-weight--bold);
+  text-align: right;
+  display: flex;
+  align-items: end;
+  gap: 0.625rem;
+  min-width: 0;
+  white-space: nowrap;
+  color: var(--_cta-card--price-color);
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .cta-card__price {
+    font-size: 1.25rem;
+  }
+}
+.cta-card__price-info-label {
+  font-weight: var(--sc-kit--font-weight--regular);
+  font-size: var(--sc-kit--font-size--sm);
+  line-height: 1.0625rem;
+  text-align: right;
+  color: var(--_cta-card--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1 1 auto;
+  min-width: 0;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .cta-card__price-info-label {
+    font-size: 0.625rem;
+    line-height: 0.875rem;
+  }
+}
+.cta-card__button {
+  width: 100%;
+  --sc-kit--button--background: var(--_cta-card--cta--background);
+  --sc-kit--button--background--hover: var(--_cta-card--cta--background);
+  --sc-kit--button--background--active: var(--_cta-card--cta--background);
+  --sc-kit--button--color: var(--_cta-card--cta--text-color);
+  --sc-kit--button--border: none;
+}</style>