@streamscloud/embeddable 16.0.7-1772099327648 → 16.0.7-1772105016226

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-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/index.d.ts

@@ -1,4 +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/index.js

@@ -1,4 +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/package.json

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