@streamscloud/embeddable 16.0.7-1772096232639 → 16.0.7-1772105016226

package/dist/articles/article/article-layout.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">import { default as ArticleField } from './fields/article-field.svelte';
 import { fieldIsFilled } from './helpers';
-import { generatePaddingsCssVar } from './styles-transformer';
+import { ArticleStylesHelper } from './styles-transformer';
 let { layout, metadata } = $props();
 const filledFields = $derived(layout.fields.filter(fieldIsFilled));
 const styles = $derived.by(() => {
     if (!layout.styles) {
         return '';
     }
-    const mobileStyles = generatePaddingsCssVar({ styles: layout.styles, mobileView: true });
-    const desktopStyles = generatePaddingsCssVar({ styles: layout.styles, mobileView: false });
+    const mobileStyles = ArticleStylesHelper.generatePaddingsCssVar({ styles: layout.styles, mobileView: true });
+    const desktopStyles = ArticleStylesHelper.generatePaddingsCssVar({ styles: layout.styles, mobileView: false });
     return `--_article-layout--padding--desktop:${desktopStyles};--_article-layout--padding--mobile:${mobileStyles};`;
 });
 </script>

package/dist/articles/article/article-proxy.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">import { ShadowRoot } from '../../ui/shadow-dom';
+import { default as ArticleView } from './article-view.svelte';
+let { sections, metadata, theme, locale } = $props();
+</script>
+
+<ShadowRoot locale={locale} theme={theme} backgroundDisabled={true} backgroundImageUrl="not-applicable">
+  <ArticleView sections={sections} metadata={metadata} />
+</ShadowRoot>

package/dist/articles/article/article-proxy.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ThemeValue } from '../../core/theme';
+import type { ArticleMetadata, ArticleSectionModel } from './types';
+import type { AppLocaleValue } from '@streamscloud/kit/core/locale';
+type Props = {
+    sections: ArticleSectionModel[];
+    metadata: ArticleMetadata;
+    theme: ThemeValue;
+    locale: AppLocaleValue | undefined;
+};
+declare const ArticleProxy: import("svelte").Component<Props, {}, "">;
+type ArticleProxy = ReturnType<typeof ArticleProxy>;
+export default ArticleProxy;

package/dist/articles/article/article-section.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { default as ArticleLayout } from './article-layout.svelte';
 import { default as FactsContainer } from './cmp.facts-container.svelte';
 import { layoutIsFilled } from './helpers';
-import { generatePaddingsCssVar } from './styles-transformer';
+import { ArticleStylesHelper } from './styles-transformer';
 import { HtmlHelper } from '@streamscloud/kit/core/utils';
 import { HtmlBlock } from '@streamscloud/kit/ui/html-block';
 let { section, metadata } = $props();
@@ -10,8 +10,8 @@ const styles = $derived.by(() => {
     if (!section.styles) {
         return '';
     }
-    const mobileStyles = generatePaddingsCssVar({ styles: section.styles, mobileView: true });
-    const desktopStyles = generatePaddingsCssVar({ styles: section.styles, mobileView: false });
+    const mobileStyles = ArticleStylesHelper.generatePaddingsCssVar({ styles: section.styles, mobileView: true });
+    const desktopStyles = ArticleStylesHelper.generatePaddingsCssVar({ styles: section.styles, mobileView: false });
     return `--_article-section--padding--desktop:${desktopStyles};--_article-section--padding--mobile:${mobileStyles};`;
 });
 const sectionFactsText = $derived(section.facts ? HtmlHelper.sanitizeHtml(section.facts) : null);

package/dist/articles/article/article-view.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">import { default as ArticleSection } from './article-section.svelte';
+import { sectionIsFilled } from './helpers';
+let { sections, metadata } = $props();
+const filledSections = $derived(sections.filter(sectionIsFilled));
+const fieldMetadata = $derived({ displayDate: metadata.displayDate });
+</script>
+
+<div class="article-container">
+  <div class="article">
+    {#each filledSections as section (section.id)}
+      <ArticleSection section={section} metadata={fieldMetadata} />
+    {/each}
+  </div>
+</div>
+
+<style>.article-container {
+  --_article--min-height: var(--article--min-height, 0);
+  --_article--background: var(--article--background, light-dark(#ffffff, #1e1e1e));
+  --_article--text-color: var(--article--text-color, light-dark(#000000, #ffffff));
+  container-type: inline-size;
+  min-height: var(--_article--min-height);
+}
+
+.article {
+  --article-field--text-color: var(--_article--text-color);
+  min-height: var(--_article--min-height);
+  background: var(--_article--background);
+  padding-bottom: 6.25rem;
+  display: flex;
+  flex-direction: column;
+}</style>

package/dist/articles/article/article-view.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ArticleMetadata, ArticleSectionModel } from './types';
+type Props = {
+    sections: ArticleSectionModel[];
+    metadata: ArticleMetadata;
+};
+declare const ArticleView: import("svelte").Component<Props, {}, "">;
+type ArticleView = ReturnType<typeof ArticleView>;
+export default ArticleView;

package/dist/articles/article/cmp.article.svelte

@@ -1,31 +1,36 @@
-<script lang="ts">import { default as ArticleSection } from './article-section.svelte';
-import { sectionIsFilled } from './helpers';
-let { sections, metadata } = $props();
-const filledSections = $derived(sections.filter(sectionIsFilled));
-const fieldMetadata = $derived({ displayDate: metadata.displayDate });
+<script lang="ts">import { createShadowRoot } from '../../ui/shadow-dom';
+import { default as ArticleProxy } from './article-proxy.svelte';
+import { mount, unmount } from 'svelte';
+let { sections, metadata, theme = 'dark', locale } = $props();
+const initHost = (node) => {
+    const shadowRoot = createShadowRoot(node);
+    const mounted = mount(ArticleProxy, {
+        target: shadowRoot,
+        props: {
+            get sections() {
+                return sections;
+            },
+            get metadata() {
+                return metadata;
+            },
+            get theme() {
+                return theme;
+            },
+            get locale() {
+                return locale;
+            }
+        }
+    });
+    return {
+        destroy: () => {
+            unmount(mounted);
+        }
+    };
+};
 </script>
 
-<div class="article-container">
-  <div class="article">
-    {#each filledSections as section (section.id)}
-      <ArticleSection section={section} metadata={fieldMetadata} />
-    {/each}
-  </div>
-</div>
+<div class="article-host" use:initHost></div>
 
-<style>.article-container {
-  --_article--min-height: var(--article--min-height, 0);
-  --_article--background: var(--article--background, light-dark(#ffffff, #1e1e1e));
-  --_article--text-color: var(--article--text-color, light-dark(#000000, #ffffff));
-  container-type: inline-size;
-  min-height: var(--_article--min-height);
-}
-
-.article {
-  --article-field--text-color: var(--_article--text-color);
-  min-height: var(--_article--min-height);
-  background: var(--_article--background);
-  padding-bottom: 6.25rem;
-  display: flex;
-  flex-direction: column;
+<style>.article-host {
+  display: contents;
 }</style>

package/dist/articles/article/cmp.article.svelte.d.ts

@@ -1,7 +1,11 @@
+import type { ThemeValue } from '../../core/theme';
 import type { ArticleMetadata, ArticleSectionModel } from './types';
+import type { AppLocaleValue } from '@streamscloud/kit/core/locale';
 type Props = {
     sections: ArticleSectionModel[];
     metadata: ArticleMetadata;
+    theme?: ThemeValue;
+    locale?: AppLocaleValue;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/articles/article/fields/article-field.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { generateMarginsCssVar } from '../styles-transformer';
+<script lang="ts">import { ArticleStylesHelper } from '../styles-transformer';
 import { default as BylineField } from './byline-field.svelte';
 import { default as ImageField } from './image-field.svelte';
 import { default as MediaField } from './media-field.svelte';
@@ -8,8 +8,8 @@ import { default as TextField } from './text-field.svelte';
 import { default as VideoField } from './video-field.svelte';
 let { field, metadata } = $props();
 const styles = $derived.by(() => {
-    const mobileStyles = generateMarginsCssVar({ styles: field.styles, mobileView: true });
-    const desktopStyles = generateMarginsCssVar({ styles: field.styles, mobileView: false });
+    const mobileStyles = ArticleStylesHelper.generateMarginsCssVar({ styles: field.styles, mobileView: true });
+    const desktopStyles = ArticleStylesHelper.generateMarginsCssVar({ styles: field.styles, mobileView: false });
     return `--_article-field--margin--desktop:${desktopStyles};--_article-field--margin--mobile:${mobileStyles};`;
 });
 </script>

package/dist/articles/article/index.d.ts

@@ -1,5 +1,7 @@
 export { default as Article } from './cmp.article.svelte';
+export { default as ArticleView } from './article-view.svelte';
 export { default as FactsContainer } from './cmp.facts-container.svelte';
 export { fieldIsFilled, layoutIsFilled, sectionIsFilled } from './helpers';
+export { ArticleStylesHelper } from './styles-transformer';
 export type { ArticleLayoutModel, ArticleLayoutStylesModel, ArticleMetadata, ArticleSectionModel, ArticleSectionStylesModel } from './types';
 export type { ArticleFieldDataModel, ArticleFieldModel, ArticleFieldStylesModel, BylineFieldDataModel, FieldMetadata, ImageFieldDataModel, MediaFieldDataModel, MediaGalleryFieldDataModel, RichTextFieldDataModel, TextFieldDataModel, VideoFieldDataModel } from './fields/types';

package/dist/articles/article/index.js

@@ -1,3 +1,5 @@
 export { default as Article } from './cmp.article.svelte';
+export { default as ArticleView } from './article-view.svelte';
 export { default as FactsContainer } from './cmp.facts-container.svelte';
 export { fieldIsFilled, layoutIsFilled, sectionIsFilled } from './helpers';
+export { ArticleStylesHelper } from './styles-transformer';

package/dist/articles/article/styles-transformer.d.ts

@@ -1,19 +1,47 @@
-export declare const generatePaddingsCssVar: (data: {
-    styles: {
-        paddingTop?: number | null;
-        paddingBottom?: number | null;
-        paddingLeft?: number | null;
-        paddingRight?: number | null;
-    };
-    mobileView: boolean;
-}) => string;
-export declare const generateMarginsCssVar: (data: {
-    styles: {
-        marginTop?: number | null;
-        marginBottom?: number | null;
-        marginLeft?: number | null;
-        marginRight?: number | null;
-    } | null;
-    mobileView: boolean;
-    useFallbackIfMissing?: boolean;
-}) => string;
+type IndentValues = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export declare class ArticleStylesHelper {
+    static generatePaddingsCssVar: (data: {
+        styles: {
+            paddingTop?: number | null;
+            paddingBottom?: number | null;
+            paddingLeft?: number | null;
+            paddingRight?: number | null;
+        };
+        mobileView: boolean;
+    }) => string;
+    static parsePaddingValues: (data: {
+        styles: {
+            paddingTop?: number | null;
+            paddingBottom?: number | null;
+            paddingLeft?: number | null;
+            paddingRight?: number | null;
+        };
+        mobileView: boolean;
+    }) => IndentValues;
+    static generateMarginsCssVar: (data: {
+        styles: {
+            marginTop?: number | null;
+            marginBottom?: number | null;
+            marginLeft?: number | null;
+            marginRight?: number | null;
+        } | null;
+        mobileView: boolean;
+        useFallbackIfMissing?: boolean;
+    }) => string;
+    static parseMarginValues: (data: {
+        styles: {
+            marginTop?: number | null;
+            marginBottom?: number | null;
+            marginLeft?: number | null;
+            marginRight?: number | null;
+        } | null;
+        mobileView: boolean;
+        useFallbackIfMissing?: boolean;
+    }) => IndentValues;
+}
+export {};

package/dist/articles/article/styles-transformer.js

@@ -1,36 +1,38 @@
-export const generatePaddingsCssVar = (data) => {
-    const indents = parsePaddingValues(data);
-    const paddings = [indents.top, indents.right, indents.bottom, indents.left];
-    return paddings.map((p) => p + 'rem').join(' ');
-};
-const parsePaddingValues = (data) => {
-    const { styles, mobileView } = data;
-    const verticalScaleFactor = mobileView ? 0.7 : 1;
-    const horizontalScaleFactor = mobileView ? 0.3 : 1;
-    return {
-        top: styles.paddingTop ? styles.paddingTop * verticalScaleFactor : 0,
-        right: styles.paddingRight ? styles.paddingRight * horizontalScaleFactor : 0,
-        bottom: styles.paddingBottom ? styles.paddingBottom * verticalScaleFactor : 0,
-        left: styles.paddingLeft ? styles.paddingLeft * horizontalScaleFactor : 0
+export class ArticleStylesHelper {
+    static generatePaddingsCssVar = (data) => {
+        const indents = ArticleStylesHelper.parsePaddingValues(data);
+        const paddings = [indents.top, indents.right, indents.bottom, indents.left];
+        return paddings.map((p) => p + 'rem').join(' ');
     };
-};
-export const generateMarginsCssVar = (data) => {
-    const indents = parseMarginValues(data);
-    const margins = [indents.top, indents.right, indents.bottom, indents.left];
-    return margins.map((p) => p + 'rem').join(' ');
-};
-const parseMarginValues = (data) => {
-    const { styles, useFallbackIfMissing = true, mobileView } = data;
-    if (!styles && !useFallbackIfMissing) {
-        return { top: 0, right: 0, bottom: 0, left: 0 };
-    }
-    const parsedStyles = styles || { marginBottom: 0.875 };
-    const verticalScaleFactor = mobileView ? 0.7 : 1;
-    const horizontalScaleFactor = mobileView ? 0.3 : 1;
-    return {
-        top: 'marginTop' in parsedStyles && parsedStyles.marginTop ? parsedStyles.marginTop * verticalScaleFactor : 0,
-        right: 'marginRight' in parsedStyles && parsedStyles.marginRight ? parsedStyles.marginRight * horizontalScaleFactor : 0,
-        bottom: 'marginBottom' in parsedStyles && parsedStyles.marginBottom ? parsedStyles.marginBottom * verticalScaleFactor : 0,
-        left: 'marginLeft' in parsedStyles && parsedStyles.marginLeft ? parsedStyles.marginLeft * horizontalScaleFactor : 0
+    static parsePaddingValues = (data) => {
+        const { styles, mobileView } = data;
+        const verticalScaleFactor = mobileView ? 0.7 : 1;
+        const horizontalScaleFactor = mobileView ? 0.3 : 1;
+        return {
+            top: styles.paddingTop ? styles.paddingTop * verticalScaleFactor : 0,
+            right: styles.paddingRight ? styles.paddingRight * horizontalScaleFactor : 0,
+            bottom: styles.paddingBottom ? styles.paddingBottom * verticalScaleFactor : 0,
+            left: styles.paddingLeft ? styles.paddingLeft * horizontalScaleFactor : 0
+        };
     };
-};
+    static generateMarginsCssVar = (data) => {
+        const indents = ArticleStylesHelper.parseMarginValues(data);
+        const margins = [indents.top, indents.right, indents.bottom, indents.left];
+        return margins.map((p) => p + 'rem').join(' ');
+    };
+    static parseMarginValues = (data) => {
+        const { styles, useFallbackIfMissing = true, mobileView } = data;
+        if (!styles && !useFallbackIfMissing) {
+            return { top: 0, right: 0, bottom: 0, left: 0 };
+        }
+        const parsedStyles = styles || { marginBottom: 0.875 };
+        const verticalScaleFactor = mobileView ? 0.7 : 1;
+        const horizontalScaleFactor = mobileView ? 0.3 : 1;
+        return {
+            top: 'marginTop' in parsedStyles && parsedStyles.marginTop ? parsedStyles.marginTop * verticalScaleFactor : 0,
+            right: 'marginRight' in parsedStyles && parsedStyles.marginRight ? parsedStyles.marginRight * horizontalScaleFactor : 0,
+            bottom: 'marginBottom' in parsedStyles && parsedStyles.marginBottom ? parsedStyles.marginBottom * verticalScaleFactor : 0,
+            left: 'marginLeft' in parsedStyles && parsedStyles.marginLeft ? parsedStyles.marginLeft * horizontalScaleFactor : 0
+        };
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "16.0.7-1772096232639",
+  "version": "16.0.7-1772105016226",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",