@streamscloud/blocks 0.1.0

package/dist/feed-player/sidebar/recommended-tab.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { IFeedPlayerRecommendedHandler } from '../types';
+type Props = {
+    handler: IFeedPlayerRecommendedHandler;
+    currentContentId: string;
+};
+declare const RecommendedTab: import("svelte").Component<Props, {}, "">;
+type RecommendedTab = ReturnType<typeof RecommendedTab>;
+export default RecommendedTab;

package/dist/feed-player/sidebar/sidebar-panel.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">import { ProductCard } from '../../products/product-card';
+import { default as ArticleTab } from './article-tab.svelte';
+import { default as InformationTab } from './information-tab.svelte';
+import { default as PlaylistTab } from './playlist-tab.svelte';
+import { default as RecommendedTab } from './recommended-tab.svelte';
+import { default as SidebarTabBar } from './sidebar-tab-bar.svelte';
+const selectedProduct = $derived.by(() => {
+    if (!selectedProductId || !model.attachments) {
+        return null;
+    }
+    return model.attachments.products.find((p) => p.id === selectedProductId) ?? null;
+});
+let { tabs, activeTabId, model, selectedProductId, interactionsDisabled, recommendedHandler, playlistHandler, on } = $props();
+</script>
+
+<div class="sidebar-panel">
+  <SidebarTabBar tabs={tabs} activeTabId={activeTabId} disabled={interactionsDisabled} on={{ tabChange: on.tabChange }} />
+
+  <div class="sidebar-panel__content">
+    {#if activeTabId === 'information'}
+      <InformationTab
+        model={model}
+        selectedProductId={selectedProductId}
+        on={{
+          productImpression: on.productImpression,
+          productBuy: on.productBuy,
+          productSelect: on.productSelect,
+          ctaClick: on.ctaClick,
+          ctaImpression: on.ctaImpression
+        }} />
+    {:else if activeTabId === 'product' && selectedProduct}
+      <div class="sidebar-panel__product">
+        <ProductCard
+          product={selectedProduct}
+          on={{
+            click: on.productClick,
+            buy: on.productBuy
+          }} />
+      </div>
+    {:else if activeTabId === 'article'}
+      <ArticleTab model={model} on={{ readMore: on.articleReadMore }} />
+    {:else if activeTabId === 'recommended' && recommendedHandler}
+      <RecommendedTab handler={recommendedHandler} currentContentId={model.id} />
+    {:else if activeTabId === 'playlist' && playlistHandler}
+      <PlaylistTab handler={playlistHandler} activeContentId={model.id} on={{ contentActivate: on.contentActivate }} />
+    {/if}
+  </div>
+</div>
+
+<style>.sidebar-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  height: 100%;
+  overflow: hidden;
+}
+.sidebar-panel__content {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+  border-radius: 0.5rem;
+}
+.sidebar-panel__product {
+  padding: 0.75rem;
+  --sc-blocks--product-card--aspect-ratio: auto;
+}</style>

package/dist/feed-player/sidebar/sidebar-panel.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { ContentModel } from '../../content/model';
+import type { IFeedPlayerPlaylistHandler, IFeedPlayerRecommendedHandler } from '../types';
+import type { SidebarTab } from './types';
+type Props = {
+    tabs: SidebarTab[];
+    activeTabId: string;
+    model: ContentModel;
+    selectedProductId: string | null;
+    interactionsDisabled?: boolean;
+    recommendedHandler?: IFeedPlayerRecommendedHandler;
+    playlistHandler?: IFeedPlayerPlaylistHandler;
+    on: {
+        tabChange: (id: string) => void;
+        productClick?: (productId: string) => void;
+        productImpression?: (productId: string) => void;
+        productBuy?: (productId: string) => void;
+        productSelect?: (productId: string) => void;
+        ctaClick?: (ctaId: string) => void;
+        ctaImpression?: (ctaId: string) => void;
+        articleReadMore?: (articleId: string) => void;
+        contentActivate?: (contentId: string) => void;
+    };
+};
+declare const SidebarPanel: import("svelte").Component<Props, {}, "">;
+type SidebarPanel = ReturnType<typeof SidebarPanel>;
+export default SidebarPanel;

package/dist/feed-player/sidebar/sidebar-tab-bar.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">let { tabs, activeTabId, disabled, on } = $props();
+export {};
+</script>
+
+<div class="sidebar-tab-bar" class:sidebar-tab-bar--disabled={disabled}>
+  {#each tabs as tab (tab.id)}
+    <button type="button" class="sidebar-tab-bar__tab" class:sidebar-tab-bar__tab--active={tab.id === activeTabId} onclick={() => on.tabChange(tab.id)}>
+      {tab.label}
+    </button>
+  {/each}
+</div>
+
+<style>.sidebar-tab-bar {
+  --_sidebar-tab-bar--color: var(--sc-blocks--sidebar-tab-bar--color, var(--sc-kit--color--text--secondary));
+  --_sidebar-tab-bar--color-active: var(--sc-blocks--sidebar-tab-bar--color-active, var(--sc-kit--color--text--primary));
+  --_sidebar-tab-bar--background: var(--sc-blocks--sidebar-tab-bar--background, rgb(from var(--sc-kit--color--bg--panel) r g b / 0.58));
+  display: flex;
+  gap: 2.25rem;
+  flex-shrink: 0;
+  padding: var(--sc-kit--space--2) var(--sc-kit--space--4);
+  border-radius: var(--sc-kit--radius--md);
+  background: var(--_sidebar-tab-bar--background);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.sidebar-tab-bar__tab {
+  font-size: var(--sc-kit--font-size--sm);
+  font-weight: var(--sc-kit--font-weight--regular);
+  line-height: var(--sc-kit--line-height--xs);
+  color: var(--_sidebar-tab-bar--color);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.sidebar-tab-bar__tab--active {
+  font-weight: var(--sc-kit--font-weight--medium);
+  color: var(--_sidebar-tab-bar--color-active);
+}
+.sidebar-tab-bar--disabled .sidebar-tab-bar__tab:not(.sidebar-tab-bar__tab--active) {
+  pointer-events: none;
+  opacity: 0.5;
+}</style>

package/dist/feed-player/sidebar/sidebar-tab-bar.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { SidebarTab } from './types';
+type Props = {
+    tabs: SidebarTab[];
+    activeTabId: string;
+    disabled?: boolean;
+    on: {
+        tabChange: (id: string) => void;
+    };
+};
+declare const SidebarTabBar: import("svelte").Component<Props, {}, "">;
+type SidebarTabBar = ReturnType<typeof SidebarTabBar>;
+export default SidebarTabBar;

package/dist/feed-player/sidebar/types.d.ts

@@ -0,0 +1,4 @@
+export type SidebarTab = {
+    id: string;
+    label: string;
+};

package/dist/feed-player/sidebar/types.js

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

package/dist/feed-player/types.d.ts

@@ -0,0 +1,65 @@
+import type { IContentAnalyticsHandler } from '../content/analytics';
+import type { IContentModel } from '../content/model';
+import type { IContentSharingHandler } from '../content/sharing';
+import type { IContentSocialInteractionsHandler } from '../content/social-interactions';
+import type { ProductCardModel } from '../products/product-card';
+import type { AppLocaleValue } from '@streamscloud/kit/core/locale';
+import type { IPlayerDataProvider } from '@streamscloud/kit/ui/player/providers';
+import type { Snippet } from 'svelte';
+export type FeedPlayerContentPreview = {
+    id: string;
+    thumbnailUrl: string | null;
+    title: string | null;
+    description: string | null;
+    displayDate: string;
+    viewsCount: number;
+    durationSeconds: number | null;
+};
+export type FeedPlayerSuggestedPlaylist = {
+    id: string;
+    name: string;
+    postsCount: number;
+    thumbnailUrl: string | null;
+};
+export type FeedPlayerRecommendedData = {
+    relatedContent: FeedPlayerContentPreview[];
+    suggestedPlaylists: FeedPlayerSuggestedPlaylist[];
+    suggestedProducts: ProductCardModel[];
+};
+export interface IFeedPlayerRecommendedHandler {
+    getRecommendations: (contentId: string) => Promise<FeedPlayerRecommendedData>;
+    onContentSelect?: (contentId: string) => void;
+    onPlaylistSelect?: (playlistId: string) => void;
+    onPlaylistShow?: (playlistId: string) => void;
+    onProductSelect?: (productId: string) => void;
+    onProductBuy?: (productId: string) => void;
+}
+export type FeedPlayerPlaylistData = {
+    name: string;
+    updatedAt: string;
+    content: FeedPlayerContentPreview[];
+};
+export interface IFeedPlayerPlaylistHandler {
+    getPlaylist: () => Promise<FeedPlayerPlaylistData>;
+}
+export type FeedPlayerProps = {
+    dataProvider: IPlayerDataProvider<IContentModel>;
+    socialInteractionsHandler?: IContentSocialInteractionsHandler;
+    sharingHandler?: IContentSharingHandler;
+    analyticsHandler?: IContentAnalyticsHandler;
+    recommendedHandler?: IFeedPlayerRecommendedHandler;
+    playlistHandler?: IFeedPlayerPlaylistHandler;
+    settings?: FeedPlayerSettings;
+    header?: Snippet;
+    on?: {
+        contentActivated?: (id: string) => void;
+        productBuy?: (productId: string) => void;
+        articleReadMore?: (articleId: string) => void;
+        closed?: () => void;
+    };
+};
+export type FeedPlayerSettings = {
+    locale?: AppLocaleValue;
+    background?: 'solid' | 'glass' | 'transparent';
+    mode?: 'default' | 'preview';
+};

package/dist/feed-player/types.js

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

package/dist/index.d.ts

@@ -0,0 +1 @@
+export type { ContentType, CtaType, Currency, MediaType } from './core/enums';

package/dist/index.js

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

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

@@ -0,0 +1,282 @@
+<script lang="ts">import { ProductCardLocalization } from './product-card-localization';
+import IconCart from '@fluentui/svg-icons/icons/cart_20_regular.svg?raw';
+import { toPriceRepresentation } from '@streamscloud/kit/core/utils';
+import { Button } from '@streamscloud/kit/ui/button';
+import { IconText } from '@streamscloud/kit/ui/icon-text';
+import { Image } from '@streamscloud/kit/ui/image';
+import { LineClamp } from '@streamscloud/kit/ui/line-clamp';
+import { ProportionalContainer } from '@streamscloud/kit/ui/proportional-container';
+let { product, includeBeforeNowPrefix, inert = false, on } = $props();
+const localization = new ProductCardLocalization();
+const shortDescriptionPresented = $derived(product.shortDescription && product.shortDescription.length > 0);
+const trackImpression = (node) => {
+    if (on?.impression) {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
+                    on.impression?.(product.id);
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.5 });
+        observer.observe(node);
+        return {
+            destroy() {
+                observer.disconnect();
+            }
+        };
+    }
+};
+const onProductClicked = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (on?.click) {
+        on.click(product.id);
+    }
+    if (product.link) {
+        window.open(product.link, '_blank', 'noopener noreferrer');
+    }
+};
+const onBuyClicked = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    on?.buy?.(product.id);
+};
+</script>
+
+<div class="product-card" class:product-card--with-buy={!!on?.buy} use:trackImpression>
+  <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 maxLines={shortDescriptionPresented ? 1 : 2}>
+      <div class="product-card__title" class:two-lines={!shortDescriptionPresented}>{product.title}</div>
+    </LineClamp>
+    <LineClamp maxLines={2}>
+      <div class="product-card__description" class:two-lines={shortDescriptionPresented}>{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" class:product-price__price--sale={product.salePrice}>
+        {toPriceRepresentation({ amount: product.salePrice ?? product.price, currency: product.currency })}
+      </div>
+    </div>
+
+    {#if on?.buy}
+      <div class="product-card__buy" onclick={onBuyClicked} onkeydown={() => {}} role="none">
+        <Button type="button" size="md" variant="secondary" on={{ click: onBuyClicked }} --sc-kit--button--min-width="100%">
+          <IconText icon={IconCart}>{localization.buy}</IconText>
+        </Button>
+      </div>
+    {/if}
+  </div>
+
+  {#if !inert}
+    {#if product.link}
+      <a href={product.link} onclick={onProductClicked} target="_blank" rel="noopener noreferrer" class="product-card__link" aria-label="none">&nbsp;</a>
+    {:else if on?.click}
+      <button type="button" onclick={onProductClicked} class="product-card__link" aria-label="none">&nbsp;</button>
+    {/if}
+  {/if}
+</div>
+
+<!--
+  @component
+  Product card with image, brand, title, description, price, and buy button.
+
+  ### CSS Custom Properties
+  | Property | Description | Default |
+  |---|---|---|
+  | `--sc-blocks--product-card--aspect-ratio` | Card aspect ratio | `10/16` |
+  | `--sc-blocks--product-card--border-radius` | Card border radius | `8px` |
+  | `--sc-blocks--product-card--background-color` | Card background | `rgb(from light-dark(white, black) r g b / 90%)` |
+  | `--sc-blocks--product-card--border-color` | Card border color | `--sc-kit--color--border` |
+  | `--sc-blocks--product-card--button--background` | Buy button background | `--sc-kit--color--bg--element` |
+  | `--sc-blocks--product-card--button--color` | Buy button text color | `--sc-kit--color--text--muted` |
+  | `--sc-blocks--product-card--price-color` | Price color | `inherit` |
+  | `--sc-blocks--product-card--sale-price-color` | Sale price color | `inherit` |
+  | `--sc-blocks--product-card--text-secondary` | Secondary text color | `--sc-kit--color--text--secondary` |
+-->
+
+<style>.product-card {
+  --_product-card--aspect-ratio: var(--sc-blocks--product-card--aspect-ratio, 10/16);
+  --_product-card--border-radius: var(--sc-blocks--product-card--border-radius, var(--sc-kit--radius--lg));
+  --_product-card--background-color: var(
+    --sc-blocks--product-card--background-color,
+    rgb(from light-dark(#ffffff, #000000) r g b / 90%)
+  );
+  --_product-card--border-color: var(--sc-blocks--product-card--border-color, var(--sc-kit--color--border));
+  --_product-card--button--background: var(--sc-blocks--product-card--button--background, var(--sc-kit--color--bg--element));
+  --_product-card--button--color: var(--sc-blocks--product-card--button--color, var(--sc-kit--color--text--muted));
+  --_product-card--price-color: var(--sc-blocks--product-card--price-color, inherit);
+  --_product-card--sale-price-color: var(--sc-blocks--product-card--sale-price-color, inherit);
+  --_product-card--text-secondary: var(--sc-blocks--product-card--text-secondary, var(--sc-kit--color--text--secondary));
+  --sc-kit--image--border-radius: var(--sc-kit--radius--sm);
+  --sc-kit--image--object-fit: cover;
+  width: 100%;
+  height: max-content;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  container-type: inline-size;
+  aspect-ratio: var(--_product-card--aspect-ratio);
+  background-color: var(--_product-card--background-color);
+  border: 1px solid var(--_product-card--border-color);
+  border-radius: var(--_product-card--border-radius);
+  padding: var(--sc-kit--space--3) var(--sc-kit--space--3) 1.125rem;
+  justify-content: space-between;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .product-card {
+    padding: var(--sc-kit--space--2) var(--sc-kit--space--2) var(--sc-kit--space--3);
+  }
+}
+.product-card--with-buy {
+  aspect-ratio: auto;
+}
+.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: var(--sc-kit--space--1);
+    margin-top: 0.125rem;
+  }
+}
+.product-card__brand {
+  font-weight: var(--sc-kit--font-weight--bold);
+  font-size: var(--sc-kit--font-size--sm);
+  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: 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) {
+  .product-card__title {
+    font-size: var(--sc-kit--font-size--sm);
+    line-height: 0.875rem;
+    min-height: 0.875rem;
+  }
+}
+.product-card__description {
+  font-weight: var(--sc-kit--font-weight--regular);
+  color: var(--_product-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) {
+  .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__buy {
+  position: relative;
+  z-index: 1;
+  margin-top: 0.625rem;
+  --sc-kit--button--background: var(--_product-card--button--background);
+  --sc-kit--button--color: var(--_product-card--button--color);
+  --sc-kit--button--border: none;
+  --sc-kit--button--font-size: 0.75rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .product-card__buy {
+    margin-top: 0.375rem;
+  }
+}
+.product-card__link {
+  position: absolute;
+  inset: 0;
+}
+
+.product-price {
+  --_product-price--before--color: var(--_product-card--text-secondary);
+  --_product-price--before--font-size: 0.75em;
+  --_product-price--font-size: 1.875em;
+  --_product-price--gap: 0.375em;
+  --_product-price--align: right;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-items: end;
+  gap: var(--_product-price--gap);
+  /* 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: var(--sc-kit--font-weight--medium);
+  text-align: var(--_product-price--align);
+  min-height: var(--_product-price--before--font-size);
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.product-price__price {
+  width: 100%;
+  color: var(--_product-card--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;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.product-price__price--sale {
+  color: var(--_product-card--sale-price-color);
+}</style>

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

@@ -0,0 +1,30 @@
+import type { ProductCardModel } from './types';
+type Props = {
+    product: ProductCardModel;
+    includeBeforeNowPrefix?: boolean;
+    inert?: boolean;
+    on?: {
+        click?: (id: string) => void;
+        impression?: (id: string) => void;
+        buy?: (id: string) => void;
+    };
+};
+/**
+ * Product card with image, brand, title, description, price, and buy button.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-blocks--product-card--aspect-ratio` | Card aspect ratio | `10/16` |
+ * | `--sc-blocks--product-card--border-radius` | Card border radius | `8px` |
+ * | `--sc-blocks--product-card--background-color` | Card background | `rgb(from light-dark(white, black) r g b / 90%)` |
+ * | `--sc-blocks--product-card--border-color` | Card border color | `--sc-kit--color--border` |
+ * | `--sc-blocks--product-card--button--background` | Buy button background | `--sc-kit--color--bg--element` |
+ * | `--sc-blocks--product-card--button--color` | Buy button text color | `--sc-kit--color--text--muted` |
+ * | `--sc-blocks--product-card--price-color` | Price color | `inherit` |
+ * | `--sc-blocks--product-card--sale-price-color` | Sale price color | `inherit` |
+ * | `--sc-blocks--product-card--text-secondary` | Secondary text color | `--sc-kit--color--text--secondary` |
+ */
+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,2 @@
+export { default as ProductCard } from './cmp.product-card.svelte';
+export type { ProductCardModel } from './types';

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

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

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

@@ -0,0 +1,4 @@
+export declare class ProductCardLocalization {
+    get beforeNowPrefix(): string | null;
+    get buy(): string;
+}

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

@@ -0,0 +1,19 @@
+import { AppLocale } from '@streamscloud/kit/core/locale';
+export class ProductCardLocalization {
+    get beforeNowPrefix() {
+        return loc.beforeNowPrefix[AppLocale.current];
+    }
+    get buy() {
+        return loc.buy[AppLocale.current];
+    }
+}
+const loc = {
+    beforeNowPrefix: {
+        en: 'Before',
+        no: 'Før'
+    },
+    buy: {
+        en: 'Buy',
+        no: 'Kjøp'
+    }
+};

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

@@ -0,0 +1,12 @@
+import type { Currency } from '../../core/enums';
+export type ProductCardModel = {
+    id: string;
+    title: string;
+    shortDescription: string | null;
+    link: string | null;
+    image: string | null;
+    brandName: string | null;
+    price: number;
+    currency: Currency;
+    salePrice: number | null;
+};

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

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