@streamscloud/embeddable 16.0.7-1772056193230 → 16.0.7-1772099327648

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

@@ -1,14 +1,14 @@
-<script lang="ts">import ArticleField from './fields/article-field.svelte';
+<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-section.svelte

@@ -1,7 +1,7 @@
-<script lang="ts">import ArticleLayout from './article-layout.svelte';
-import FactsContainer from './facts-container.svelte';
+<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/cmp.article.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import ArticleSection from './article-section.svelte';
+<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));

package/dist/articles/article/cmp.facts-container.svelte.d.ts

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

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

@@ -1,15 +1,15 @@
-<script lang="ts">import BylineField from './byline-field.svelte';
-import ImageField from './image-field.svelte';
-import MediaField from './media-field.svelte';
-import MediaGalleryField from './media-gallery-field.svelte';
-import RichTextField from './rich-text-field.svelte';
-import TextField from './text-field.svelte';
-import VideoField from './video-field.svelte';
-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';
+import { default as MediaGalleryField } from './media-gallery-field.svelte';
+import { default as RichTextField } from './rich-text-field.svelte';
+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/fields/image-field.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { MediaItemView } from '../../../ui/media-items/media-item-view';
-import AltText from './alt-text.svelte';
+import { default as AltText } from './alt-text.svelte';
 let { field } = $props();
 const fieldData = $derived(field.fieldData.imageData);
 </script>

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

@@ -1,5 +1,5 @@
 <script lang="ts">import { MediaItemView } from '../../../ui/media-items/media-item-view';
-import AltText from './alt-text.svelte';
+import { default as AltText } from './alt-text.svelte';
 let { field } = $props();
 const fieldData = $derived(field.fieldData.mediaData);
 </script>

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

@@ -1,5 +1,5 @@
 <script lang="ts">import { MediaItemsGallery } from '../../../ui/media-items/media-items-gallery';
-import AltText from './alt-text.svelte';
+import { default as AltText } from './alt-text.svelte';
 let { field } = $props();
 const fieldData = $derived(field.fieldData.mediaGalleryData);
 </script>

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

@@ -14,7 +14,7 @@ export {};
 <style>.text-field {
   --_text-field--text-color: var(--article-field--text-color);
   color: var(--_text-field--text-color);
-  line-height: 1.2;
+  line-height: 1.4;
 }
 .text-field--semi-bold {
   font-weight: 500;

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

@@ -1,5 +1,5 @@
 <script lang="ts">import { MediaItemView } from '../../../ui/media-items/media-item-view';
-import AltText from './alt-text.svelte';
+import { default as AltText } from './alt-text.svelte';
 let { field } = $props();
 const fieldData = $derived(field.fieldData.videoData);
 </script>

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

@@ -1,4 +1,6 @@
 export { default as Article } from './cmp.article.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,2 +1,4 @@
 export { default as Article } from './cmp.article.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-1772056193230",
+  "version": "16.0.7-1772099327648",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",

package/dist/articles/article/facts-container.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    children: Snippet;
-};
-declare const FactsContainer: import("svelte").Component<Props, {}, "">;
-type FactsContainer = ReturnType<typeof FactsContainer>;
-export default FactsContainer;