@builder.io/sdk-svelte 5.2.11 → 5.2.12

package/lib/browser/blocks/image/image.svelte

@@ -78,7 +78,9 @@ onMount(() => { });
     <source type="image/webp" srcset={webpSrcSet()} sizes={sizesToUse()} />
   {/if}<img
     style={stringifyStyles({
-      objectPosition: backgroundPosition || "center",
+      objectPosition: `var(--builder-image-position, ${
+        backgroundPosition || "center"
+      })`,
       objectFit: backgroundSize || "cover",
       ...aspectRatioCss(),
     })}

package/lib/browser/components/block/components/block-styles.svelte

@@ -3,7 +3,7 @@
 <script>import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../../constants/device-sizes";
 import { TARGET } from "../../../constants/target";
 import { camelToKebabCase } from "../../../functions/camel-to-kebab-case";
-import { createCssClass } from "../../../helpers/css";
+import { createCssClass, getResponsiveStylesWithImagePosition, } from "../../../helpers/css";
 import { checkIsDefined } from "../../../helpers/nullable";
 import InlinedStyles from "../../inlined-styles.svelte";
 export let block;
@@ -21,7 +21,7 @@ $: canShowBlock = () => {
 };
 $: css = () => {
     const processedBlock = block;
-    const styles = processedBlock.responsiveStyles;
+    const styles = getResponsiveStylesWithImagePosition(processedBlock.responsiveStyles, processedBlock.component?.name === "Image");
     const content = context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
     const contentHasXSmallBreakpoint = Boolean(content?.meta?.breakpoints?.xsmall);

package/lib/browser/components/block/components/live-edit-block-styles.svelte

@@ -4,7 +4,7 @@
 import { TARGET } from "../../../constants/target";
 import { camelToKebabCase } from "../../../functions/camel-to-kebab-case";
 import { getProcessedBlock } from "../../../functions/get-processed-block";
-import { createCssClass } from "../../../helpers/css";
+import { createCssClass, getResponsiveStylesWithImagePosition, } from "../../../helpers/css";
 import { findBlockById } from "../../../helpers/find-block";
 import { checkIsDefined } from "../../../helpers/nullable";
 import InlinedStyles from "../../inlined-styles.svelte";
@@ -39,7 +39,7 @@ $: canShowBlock = () => {
     return true;
 };
 $: css = () => {
-    const styles = processedBlock?.()?.responsiveStyles;
+    const styles = getResponsiveStylesWithImagePosition(processedBlock?.()?.responsiveStyles, processedBlock?.()?.component?.name === "Image");
     const content = contextProvider.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
     const contentHasXSmallBreakpoint = Boolean(content?.meta?.breakpoints?.xsmall);

package/lib/browser/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "5.2.11";
+export declare const SDK_VERSION = "5.2.12";

package/lib/browser/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "5.2.11";
+export const SDK_VERSION = "5.2.12";

package/lib/browser/helpers/css.d.ts

@@ -1,3 +1,5 @@
+import type { BuilderBlock } from '../types/builder-block';
+export declare const getResponsiveStylesWithImagePosition: (styles: BuilderBlock['responsiveStyles'], isBuilderImage: boolean) => BuilderBlock['responsiveStyles'];
 export declare const convertStyleMapToCSSArray: (style: Partial<CSSStyleDeclaration>) => string[];
 export declare const convertStyleMapToCSS: (style: Partial<CSSStyleDeclaration>) => string;
 export declare const createCssClass: ({ mediaQuery, className, styles }: {

package/lib/browser/helpers/css.js

@@ -1,5 +1,19 @@
 import { camelToKebabCase } from '../functions/camel-to-kebab-case';
 import { checkIsDefined } from './nullable';
+const withBuilderImagePosition = (style, fallback) => {
+    const imagePosition = style?.objectPosition || fallback;
+    return imagePosition ? {
+        ...style,
+        '--builder-image-position': imagePosition
+    } : style;
+};
+export const getResponsiveStylesWithImagePosition = (styles, isBuilderImage) => isBuilderImage ? {
+    ...styles,
+    large: withBuilderImagePosition(styles?.large, 'initial'),
+    medium: withBuilderImagePosition(styles?.medium),
+    small: withBuilderImagePosition(styles?.small),
+    xsmall: withBuilderImagePosition(styles?.xsmall)
+} : styles;
 export const convertStyleMapToCSSArray = (style) => {
     const cssProps = Object.entries(style).map(([key, value]) => {
         if (typeof value === 'string') {

package/lib/edge/blocks/image/image.svelte

@@ -78,7 +78,9 @@ onMount(() => { });
     <source type="image/webp" srcset={webpSrcSet()} sizes={sizesToUse()} />
   {/if}<img
     style={stringifyStyles({
-      objectPosition: backgroundPosition || "center",
+      objectPosition: `var(--builder-image-position, ${
+        backgroundPosition || "center"
+      })`,
       objectFit: backgroundSize || "cover",
       ...aspectRatioCss(),
     })}

package/lib/edge/components/block/components/block-styles.svelte

@@ -3,7 +3,7 @@
 <script>import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../../constants/device-sizes";
 import { TARGET } from "../../../constants/target";
 import { camelToKebabCase } from "../../../functions/camel-to-kebab-case";
-import { createCssClass } from "../../../helpers/css";
+import { createCssClass, getResponsiveStylesWithImagePosition, } from "../../../helpers/css";
 import { checkIsDefined } from "../../../helpers/nullable";
 import InlinedStyles from "../../inlined-styles.svelte";
 export let block;
@@ -21,7 +21,7 @@ $: canShowBlock = () => {
 };
 $: css = () => {
     const processedBlock = block;
-    const styles = processedBlock.responsiveStyles;
+    const styles = getResponsiveStylesWithImagePosition(processedBlock.responsiveStyles, processedBlock.component?.name === "Image");
     const content = context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
     const contentHasXSmallBreakpoint = Boolean(content?.meta?.breakpoints?.xsmall);

package/lib/edge/components/block/components/live-edit-block-styles.svelte

@@ -4,7 +4,7 @@
 import { TARGET } from "../../../constants/target";
 import { camelToKebabCase } from "../../../functions/camel-to-kebab-case";
 import { getProcessedBlock } from "../../../functions/get-processed-block";
-import { createCssClass } from "../../../helpers/css";
+import { createCssClass, getResponsiveStylesWithImagePosition, } from "../../../helpers/css";
 import { findBlockById } from "../../../helpers/find-block";
 import { checkIsDefined } from "../../../helpers/nullable";
 import InlinedStyles from "../../inlined-styles.svelte";
@@ -39,7 +39,7 @@ $: canShowBlock = () => {
     return true;
 };
 $: css = () => {
-    const styles = processedBlock?.()?.responsiveStyles;
+    const styles = getResponsiveStylesWithImagePosition(processedBlock?.()?.responsiveStyles, processedBlock?.()?.component?.name === "Image");
     const content = contextProvider.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
     const contentHasXSmallBreakpoint = Boolean(content?.meta?.breakpoints?.xsmall);

package/lib/edge/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "5.2.11";
+export declare const SDK_VERSION = "5.2.12";

package/lib/edge/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "5.2.11";
+export const SDK_VERSION = "5.2.12";

package/lib/edge/helpers/css.d.ts

@@ -1,3 +1,5 @@
+import type { BuilderBlock } from '../types/builder-block';
+export declare const getResponsiveStylesWithImagePosition: (styles: BuilderBlock['responsiveStyles'], isBuilderImage: boolean) => BuilderBlock['responsiveStyles'];
 export declare const convertStyleMapToCSSArray: (style: Partial<CSSStyleDeclaration>) => string[];
 export declare const convertStyleMapToCSS: (style: Partial<CSSStyleDeclaration>) => string;
 export declare const createCssClass: ({ mediaQuery, className, styles }: {

package/lib/edge/helpers/css.js

@@ -1,5 +1,19 @@
 import { camelToKebabCase } from '../functions/camel-to-kebab-case';
 import { checkIsDefined } from './nullable';
+const withBuilderImagePosition = (style, fallback) => {
+    const imagePosition = style?.objectPosition || fallback;
+    return imagePosition ? {
+        ...style,
+        '--builder-image-position': imagePosition
+    } : style;
+};
+export const getResponsiveStylesWithImagePosition = (styles, isBuilderImage) => isBuilderImage ? {
+    ...styles,
+    large: withBuilderImagePosition(styles?.large, 'initial'),
+    medium: withBuilderImagePosition(styles?.medium),
+    small: withBuilderImagePosition(styles?.small),
+    xsmall: withBuilderImagePosition(styles?.xsmall)
+} : styles;
 export const convertStyleMapToCSSArray = (style) => {
     const cssProps = Object.entries(style).map(([key, value]) => {
         if (typeof value === 'string') {

package/lib/node/blocks/image/image.svelte

@@ -78,7 +78,9 @@ onMount(() => { });
     <source type="image/webp" srcset={webpSrcSet()} sizes={sizesToUse()} />
   {/if}<img
     style={stringifyStyles({
-      objectPosition: backgroundPosition || "center",
+      objectPosition: `var(--builder-image-position, ${
+        backgroundPosition || "center"
+      })`,
       objectFit: backgroundSize || "cover",
       ...aspectRatioCss(),
     })}

package/lib/node/components/block/components/block-styles.svelte

@@ -3,7 +3,7 @@
 <script>import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../../constants/device-sizes";
 import { TARGET } from "../../../constants/target";
 import { camelToKebabCase } from "../../../functions/camel-to-kebab-case";
-import { createCssClass } from "../../../helpers/css";
+import { createCssClass, getResponsiveStylesWithImagePosition, } from "../../../helpers/css";
 import { checkIsDefined } from "../../../helpers/nullable";
 import InlinedStyles from "../../inlined-styles.svelte";
 export let block;
@@ -21,7 +21,7 @@ $: canShowBlock = () => {
 };
 $: css = () => {
     const processedBlock = block;
-    const styles = processedBlock.responsiveStyles;
+    const styles = getResponsiveStylesWithImagePosition(processedBlock.responsiveStyles, processedBlock.component?.name === "Image");
     const content = context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
     const contentHasXSmallBreakpoint = Boolean(content?.meta?.breakpoints?.xsmall);

package/lib/node/components/block/components/live-edit-block-styles.svelte

@@ -4,7 +4,7 @@
 import { TARGET } from "../../../constants/target";
 import { camelToKebabCase } from "../../../functions/camel-to-kebab-case";
 import { getProcessedBlock } from "../../../functions/get-processed-block";
-import { createCssClass } from "../../../helpers/css";
+import { createCssClass, getResponsiveStylesWithImagePosition, } from "../../../helpers/css";
 import { findBlockById } from "../../../helpers/find-block";
 import { checkIsDefined } from "../../../helpers/nullable";
 import InlinedStyles from "../../inlined-styles.svelte";
@@ -39,7 +39,7 @@ $: canShowBlock = () => {
     return true;
 };
 $: css = () => {
-    const styles = processedBlock?.()?.responsiveStyles;
+    const styles = getResponsiveStylesWithImagePosition(processedBlock?.()?.responsiveStyles, processedBlock?.()?.component?.name === "Image");
     const content = contextProvider.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
     const contentHasXSmallBreakpoint = Boolean(content?.meta?.breakpoints?.xsmall);

package/lib/node/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "5.2.11";
+export declare const SDK_VERSION = "5.2.12";

package/lib/node/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "5.2.11";
+export const SDK_VERSION = "5.2.12";

package/lib/node/helpers/css.d.ts

@@ -1,3 +1,5 @@
+import type { BuilderBlock } from '../types/builder-block';
+export declare const getResponsiveStylesWithImagePosition: (styles: BuilderBlock['responsiveStyles'], isBuilderImage: boolean) => BuilderBlock['responsiveStyles'];
 export declare const convertStyleMapToCSSArray: (style: Partial<CSSStyleDeclaration>) => string[];
 export declare const convertStyleMapToCSS: (style: Partial<CSSStyleDeclaration>) => string;
 export declare const createCssClass: ({ mediaQuery, className, styles }: {

package/lib/node/helpers/css.js

@@ -1,5 +1,19 @@
 import { camelToKebabCase } from '../functions/camel-to-kebab-case';
 import { checkIsDefined } from './nullable';
+const withBuilderImagePosition = (style, fallback) => {
+    const imagePosition = style?.objectPosition || fallback;
+    return imagePosition ? {
+        ...style,
+        '--builder-image-position': imagePosition
+    } : style;
+};
+export const getResponsiveStylesWithImagePosition = (styles, isBuilderImage) => isBuilderImage ? {
+    ...styles,
+    large: withBuilderImagePosition(styles?.large, 'initial'),
+    medium: withBuilderImagePosition(styles?.medium),
+    small: withBuilderImagePosition(styles?.small),
+    xsmall: withBuilderImagePosition(styles?.xsmall)
+} : styles;
 export const convertStyleMapToCSSArray = (style) => {
     const cssProps = Object.entries(style).map(([key, value]) => {
         if (typeof value === 'string') {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "5.2.11",
+  "version": "5.2.12",
   "type": "module",
   "files": [
     "lib",

package/src/blocks/image/image.svelte

@@ -87,7 +87,9 @@
     <source type="image/webp" srcset={webpSrcSet()} sizes={sizesToUse()} />
   {/if}<img
     style={stringifyStyles({
-      objectPosition: backgroundPosition || "center",
+      objectPosition: `var(--builder-image-position, ${
+        backgroundPosition || "center"
+      })`,
       objectFit: backgroundSize || "cover",
       ...aspectRatioCss(),
     })}

package/src/components/block/components/block-styles.svelte

@@ -13,7 +13,10 @@
   import { TARGET } from "../../../constants/target";
   import type { BuilderContextInterface } from "../../../context/types";
   import { camelToKebabCase } from "../../../functions/camel-to-kebab-case";
-  import { createCssClass } from "../../../helpers/css";
+  import {
+    createCssClass,
+    getResponsiveStylesWithImagePosition,
+  } from "../../../helpers/css";
   import { checkIsDefined } from "../../../helpers/nullable";
   import type { BuilderBlock } from "../../../types/builder-block";
   import InlinedStyles from "../../inlined-styles.svelte";
@@ -34,7 +37,10 @@
   };
   $: css = () => {
     const processedBlock = block;
-    const styles = processedBlock.responsiveStyles;
+    const styles = getResponsiveStylesWithImagePosition(
+      processedBlock.responsiveStyles,
+      processedBlock.component?.name === "Image"
+    );
     const content = context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
       content?.meta?.breakpoints || {}

package/src/components/block/components/live-edit-block-styles.svelte

@@ -13,7 +13,10 @@
   import { TARGET } from "../../../constants/target";
   import { camelToKebabCase } from "../../../functions/camel-to-kebab-case";
   import { getProcessedBlock } from "../../../functions/get-processed-block";
-  import { createCssClass } from "../../../helpers/css";
+  import {
+    createCssClass,
+    getResponsiveStylesWithImagePosition,
+  } from "../../../helpers/css";
   import { findBlockById } from "../../../helpers/find-block";
   import { checkIsDefined } from "../../../helpers/nullable";
   import type {
@@ -54,7 +57,10 @@
     return true;
   };
   $: css = () => {
-    const styles = processedBlock?.()?.responsiveStyles;
+    const styles = getResponsiveStylesWithImagePosition(
+      processedBlock?.()?.responsiveStyles,
+      processedBlock?.()?.component?.name === "Image"
+    );
     const content = contextProvider.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
       content?.meta?.breakpoints || {}

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "5.2.11"
+export const SDK_VERSION = "5.2.12"

package/src/helpers/css.ts

@@ -1,5 +1,20 @@
 import { camelToKebabCase } from '../functions/camel-to-kebab-case';
+import type { BuilderBlock } from '../types/builder-block';
 import { checkIsDefined } from './nullable';
+const withBuilderImagePosition = (style: Partial<CSSStyleDeclaration> | undefined, fallback?: string): Partial<CSSStyleDeclaration> | undefined => {
+  const imagePosition = style?.objectPosition || fallback;
+  return imagePosition ? ({
+    ...style,
+    '--builder-image-position': imagePosition
+  } as Partial<CSSStyleDeclaration>) : style;
+};
+export const getResponsiveStylesWithImagePosition = (styles: BuilderBlock['responsiveStyles'], isBuilderImage: boolean): BuilderBlock['responsiveStyles'] => isBuilderImage ? {
+  ...styles,
+  large: withBuilderImagePosition(styles?.large, 'initial'),
+  medium: withBuilderImagePosition(styles?.medium),
+  small: withBuilderImagePosition(styles?.small),
+  xsmall: withBuilderImagePosition(styles?.xsmall)
+} : styles;
 export const convertStyleMapToCSSArray = (style: Partial<CSSStyleDeclaration>): string[] => {
   const cssProps = Object.entries(style).map(([key, value]) => {
     if (typeof value === 'string') {