@builder.io/sdk-svelte 1.0.23 → 1.0.24

package/lib/browser/components/content/components/enable-editor.svelte.d.ts

@@ -18,9 +18,9 @@ declare const __propDef: {
         model?: BuilderEditorProps["model"];
         content?: BuilderEditorProps["content"];
         data?: BuilderEditorProps["data"];
+        showContent: BuilderEditorProps["showContent"];
         contentWrapper?: BuilderEditorProps["contentWrapper"];
         context?: BuilderEditorProps["context"];
-        showContent: BuilderEditorProps["showContent"];
         contentWrapperProps?: BuilderEditorProps["contentWrapperProps"];
     };
     events: {

package/lib/browser/components/content/components/styles.helpers.d.ts

@@ -14,3 +14,4 @@ export declare const getCss: ({ cssCode, contentId }: {
     contentId?: string | undefined;
 }) => string;
 export declare const getDefaultStyles: (isNested: boolean | undefined) => "" | "\n.builder-button {\n  all: unset;\n}\n\n.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {\n  margin: 0;\n}\n.builder-text > p, .builder-text > .builder-paragraph {\n  color: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  font-weight: inherit;\n  font-size: inherit;\n  text-align: inherit;\n  font-family: inherit;\n}\n";
+export declare const getWrapperClassName: (variationId?: string) => string;

package/lib/browser/components/content/components/styles.helpers.js

@@ -77,3 +77,6 @@ const DEFAULT_STYLES = `
 export const getDefaultStyles = (isNested) => {
     return !isNested ? DEFAULT_STYLES : '';
 };
+export const getWrapperClassName = (variationId) => {
+    return `variant-${variationId}`;
+};

package/lib/browser/components/content/content.svelte

@@ -11,6 +11,7 @@ import EnableEditor from "./components/enable-editor.svelte";
 import ContentStyles from "./components/styles.svelte";
 import { getContentInitialValue, getRootStateInitialValue, } from "./content.helpers";
 import "./wrap-component-ref";
+import "../dynamic-div.svelte";
 export let content = undefined;
 export let customComponents = undefined;
 export let data = undefined;

package/lib/browser/components/dynamic-div.svelte

@@ -0,0 +1,5 @@
+<script context="module"></script>
+
+<script></script>
+
+<div><slot /></div>

package/lib/browser/constants/builder-registered-components.js

@@ -12,9 +12,12 @@ import { componentInfo as slotComponentInfo } from '../blocks/slot/component-inf
 import { default as Slot } from '../blocks/slot/index';
 import { componentInfo as symbolComponentInfo } from '../blocks/symbol/component-info';
 import { default as Symbol } from '../blocks/symbol/index';
+import { componentInfo as tabsComponentInfo } from '../blocks/tabs/component-info';
+import { default as Tabs } from '../blocks/tabs/index';
 import { componentInfo as textComponentInfo } from '../blocks/text/component-info';
 import { default as Text } from '../blocks/text/index';
 import { getExtraComponents } from './extra-components';
+import { TARGET } from './target';
 /**
  * Returns a list of all registered components.
  * NOTE: This needs to be a function to work around ESM circular dependencies.
@@ -43,4 +46,7 @@ export const getDefaultRegisteredComponents = () => [{
     }, {
         component: Text,
         ...textComponentInfo
-    }, ...getExtraComponents()];
+    }, ...(TARGET === 'rsc' ? [] : [{
+            component: Tabs,
+            ...tabsComponentInfo
+        }]), ...getExtraComponents()];

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.0.23";
+export declare const SDK_VERSION = "1.0.24";

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

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.23";
+export const SDK_VERSION = "1.0.24";

package/lib/browser/functions/get-class-prop-name.js

@@ -9,6 +9,7 @@ export const getClassPropName = () => {
         case 'vue':
         case 'solid':
         case 'qwik':
+        case 'angular':
             return 'class';
     }
 };

package/lib/browser/functions/get-style.js

@@ -18,6 +18,7 @@ export function mapStyleObjToStrIfNeeded(style) {
         case 'svelte':
         case 'vue':
         case 'solid':
+        case 'angular':
             return convertStyleMapToCSSArray(style).join(' ');
         case 'qwik':
         case 'reactNative':

package/lib/browser/types/targets.d.ts

@@ -1 +1 @@
-export type Target = 'vue' | 'reactNative' | 'svelte' | 'qwik' | 'react' | 'solid' | 'rsc';
+export type Target = 'vue' | 'reactNative' | 'svelte' | 'qwik' | 'react' | 'solid' | 'rsc' | 'angular';

package/lib/edge/blocks/button/button.svelte

@@ -6,24 +6,25 @@ export let link = undefined;
 export let openLinkInNewTab = undefined;
 export let builderLinkComponent = undefined;
 export let text = undefined;
+function attrs() {
+    return {
+        ...filterAttrs(attributes, "on:", false),
+        [getClassPropName()]: `${link ? "" : "builder-button"} ${attributes[getClassPropName()] || ""}`,
+        ...(link
+            ? {
+                href: link,
+                target: openLinkInNewTab ? "_blank" : undefined,
+                role: "link",
+            }
+            : {
+                role: "button",
+            }),
+    };
+}
 </script>
 
 <DynamicRenderer
-  attributes={{
-    ...filterAttrs(attributes, "on:", false),
-    [getClassPropName()]: `${link ? "" : "builder-button"} ${
-      attributes[getClassPropName()] || ""
-    }`,
-    ...(link
-      ? {
-          href: link,
-          target: openLinkInNewTab ? "_blank" : undefined,
-          role: "link",
-        }
-      : {
-          role: "button",
-        }),
-  }}
+  attributes={attrs()}
   TagName={link ? builderLinkComponent || "a" : "button"}
   actionAttributes={filterAttrs(attributes, "on:", true)}
   >{text}</DynamicRenderer

package/lib/edge/blocks/columns/columns.svelte

@@ -8,13 +8,15 @@ import { TARGET } from "../../constants/target";
 import "../../functions/deopt";
 import { getClassPropName } from "../../functions/get-class-prop-name";
 import { mapStyleObjToStrIfNeeded } from "../../functions/get-style";
+import { getColumnsClass } from "./helpers";
+import "../../components/dynamic-div.svelte";
 export let space = undefined;
 export let columns = undefined;
 export let stackColumnsAt = undefined;
+export let builderLinkComponent = undefined;
 export let reverseColumnsWhenStacked = undefined;
 export let builderContext;
 export let builderBlock;
-export let builderLinkComponent = undefined;
 export let builderComponents;
 function stringifyStyles(stylesObj) {
     let styles = "";
@@ -26,6 +28,9 @@ function stringifyStyles(stylesObj) {
     }
     return styles;
 }
+function getTagName(column) {
+    return column.link ? builderLinkComponent || "a" : "div";
+}
 function getWidth(index) {
     return cols[index]?.width || 100 / cols.length;
 }
@@ -39,6 +44,15 @@ function getTabletStyle({ stackedStyle, desktopStyle, }) {
 function getMobileStyle({ stackedStyle, desktopStyle, }) {
     return stackAt === "never" ? desktopStyle : stackedStyle;
 }
+function columnsCssVars() {
+    return {
+        "--flex-dir": flexDir,
+        "--flex-dir-tablet": getTabletStyle({
+            stackedStyle: flexDir,
+            desktopStyle: "row",
+        }),
+    };
+}
 function columnCssVars(index) {
     const gutter = index === 0 ? 0 : gutterSize;
     const width = getColumnCssWidth(index);
@@ -77,16 +91,7 @@ function getWidthForBreakpointSize(size) {
     const breakpointSizes = getSizesForBreakpoints($builderContext.content?.meta?.breakpoints || {});
     return breakpointSizes[size].max;
 }
-$: columnsCssVars = () => {
-    return {
-        "--flex-dir": flexDir,
-        "--flex-dir-tablet": getTabletStyle({
-            stackedStyle: flexDir,
-            desktopStyle: "row",
-        }),
-    };
-};
-$: columnsStyles = () => {
+function columnsStyles() {
     return `
         @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
           .${builderBlock.id}-breakpoints {
@@ -112,7 +117,19 @@ $: columnsStyles = () => {
           }
         },
       `;
-};
+}
+function getAttributes(column, index) {
+    return {
+        ...{},
+        ...(column.link
+            ? {
+                href: column.link,
+            }
+            : {}),
+        [getClassPropName()]: "builder-column",
+        style: mapStyleObjToStrIfNeeded(columnCssVars(index)),
+    };
+}
 let gutterSize = typeof space === "number" ? space || 0 : 20;
 let cols = columns || [];
 let stackAt = stackColumnsAt || "tablet";
@@ -125,7 +142,7 @@ let flexDir = stackColumnsAt === "never"
 
 <div
   style={stringifyStyles(columnsCssVars())}
-  class={`builder-columns ${builderBlock.id}-breakpoints` + " div"}
+  class={getColumnsClass(builderBlock?.id) + " div"}
   {...{}}
 >
   {#if TARGET !== "reactNative"}
@@ -133,18 +150,9 @@ let flexDir = stackColumnsAt === "never"
   {/if}
   {#each columns as column, index (index)}
     <DynamicRenderer
-      TagName={column.link ? builderLinkComponent || "a" : "div"}
+      TagName={getTagName(column)}
       actionAttributes={{}}
-      attributes={{
-        ...{},
-        ...(column.link
-          ? {
-              href: column.link,
-            }
-          : {}),
-        [getClassPropName()]: "builder-column",
-        style: mapStyleObjToStrIfNeeded(columnCssVars(index)),
-      }}
+      attributes={getAttributes(column, index)}
       ><Blocks
         path={`component.options.columns.${index}.blocks`}
         parent={builderBlock.id}

package/lib/edge/blocks/columns/columns.svelte.d.ts

@@ -5,10 +5,10 @@ declare const __propDef: {
         space?: ColumnProps["space"];
         columns?: ColumnProps["columns"];
         stackColumnsAt?: ColumnProps["stackColumnsAt"];
+        builderLinkComponent?: ColumnProps["builderLinkComponent"];
         reverseColumnsWhenStacked?: ColumnProps["reverseColumnsWhenStacked"];
         builderContext: ColumnProps["builderContext"];
         builderBlock: ColumnProps["builderBlock"];
-        builderLinkComponent?: ColumnProps["builderLinkComponent"];
         builderComponents: ColumnProps["builderComponents"];
     };
     events: {

package/lib/edge/blocks/columns/columns.types.d.ts

@@ -1,6 +1,6 @@
 import type { BuilderBlock } from '../../types/builder-block';
 import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props';
-type Column = {
+export type Column = {
     blocks: BuilderBlock[];
     width?: number;
     link?: string;

package/lib/edge/blocks/columns/helpers.d.ts

@@ -0,0 +1 @@
+export declare const getColumnsClass: (id?: string) => string;

package/lib/edge/blocks/columns/helpers.js

@@ -0,0 +1,3 @@
+export const getColumnsClass = (id) => {
+    return `builder-columns ${id}-breakpoints`;
+};

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

@@ -94,7 +94,7 @@ $: aspectRatioCss = () => {
   <slot />
 {/if}
 
-{#if !fitContent && $$slots.default}
+{#if !fitContent && builderBlock?.children?.length}
   <div class="div-2"><slot /></div>
 {/if}
 

package/lib/edge/blocks/symbol/symbol.helpers.js

@@ -1,5 +1,5 @@
+import { fetchOneEntry } from '../../functions/get-content/index';
 import { logger } from '../../helpers/logger';
-import { fetchOneEntry } from '../../index';
 export const fetchSymbolContent = async ({ builderContextValue, symbol }) => {
     /**
      * If:

package/lib/edge/blocks/symbol/symbol.svelte

@@ -4,6 +4,7 @@ import { filterAttrs } from "../helpers";
 import { getClassPropName } from "../../functions/get-class-prop-name";
 import { setAttrs } from "../helpers";
 import { fetchSymbolContent } from "./symbol.helpers";
+import "../../components/dynamic-div.svelte";
 export let symbol = undefined;
 export let attributes = undefined;
 export let dynamic = undefined;
@@ -23,6 +24,12 @@ function setContent() {
         }
     });
 }
+$: blocksWrapper = () => {
+    return "div";
+};
+$: contentWrapper = () => {
+    return "div";
+};
 $: className = () => {
     return [
         ...[attributes[getClassPropName()]],
@@ -66,7 +73,7 @@ $: onUpdateFn_0(...[symbol]);
     model={symbol?.model}
     content={contentToUse}
     linkComponent={builderLinkComponent}
-    blocksWrapper={"div"}
-    contentWrapper={"div"}
+    blocksWrapper={blocksWrapper()}
+    contentWrapper={contentWrapper()}
   />
 </div>

package/lib/edge/blocks/tabs/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components';
+export declare const componentInfo: ComponentInfo;

package/lib/edge/blocks/tabs/component-info.js

@@ -0,0 +1,138 @@
+const defaultTab = {
+    '@type': '@builder.io/sdk:Element',
+    responsiveStyles: {
+        large: {
+            paddingLeft: '20px',
+            paddingRight: '20px',
+            paddingTop: '10px',
+            paddingBottom: '10px',
+            minWidth: '100px',
+            textAlign: 'center',
+            display: 'flex',
+            flexDirection: 'column',
+            cursor: 'pointer',
+            userSelect: 'none'
+        }
+    },
+    component: {
+        name: 'Text',
+        options: {
+            text: 'New tab'
+        }
+    }
+};
+const defaultElement = {
+    '@type': '@builder.io/sdk:Element',
+    responsiveStyles: {
+        large: {
+            height: '200px',
+            display: 'flex',
+            marginTop: '20px',
+            flexDirection: 'column'
+        }
+    },
+    component: {
+        name: 'Text',
+        options: {
+            text: 'New tab content '
+        }
+    }
+};
+export const componentInfo = {
+    name: 'Builder: Tabs',
+    inputs: [{
+            name: 'tabs',
+            type: 'list',
+            broadcast: true,
+            subFields: [{
+                    name: 'label',
+                    type: 'uiBlocks',
+                    hideFromUI: true,
+                    defaultValue: [defaultTab]
+                }, {
+                    name: 'content',
+                    type: 'uiBlocks',
+                    hideFromUI: true,
+                    defaultValue: [defaultElement]
+                }],
+            defaultValue: [{
+                    label: [{
+                            ...defaultTab,
+                            component: {
+                                name: 'Text',
+                                options: {
+                                    text: 'Tab 1'
+                                }
+                            }
+                        }],
+                    content: [{
+                            ...defaultElement,
+                            component: {
+                                name: 'Text',
+                                options: {
+                                    text: 'Tab 1 content'
+                                }
+                            }
+                        }]
+                }, {
+                    label: [{
+                            ...defaultTab,
+                            component: {
+                                name: 'Text',
+                                options: {
+                                    text: 'Tab 2'
+                                }
+                            }
+                        }],
+                    content: [{
+                            ...defaultElement,
+                            component: {
+                                name: 'Text',
+                                options: {
+                                    text: 'Tab 2 content'
+                                }
+                            }
+                        }]
+                }]
+        }, {
+            name: 'activeTabStyle',
+            type: 'uiStyle',
+            helperText: 'CSS styles for the active tab',
+            defaultValue: {
+                backgroundColor: 'rgba(0, 0, 0, 0.1)'
+            }
+        }, {
+            name: 'defaultActiveTab',
+            type: 'number',
+            helperText: 'Default tab to open to. Set to "1" for the first tab, "2" for the second, or choose "0" for none',
+            defaultValue: 1,
+            advanced: true
+        }, {
+            name: 'collapsible',
+            type: 'boolean',
+            helperText: 'If on, clicking an open tab closes it so no tabs are active',
+            defaultValue: false,
+            advanced: true
+        }, {
+            name: 'tabHeaderLayout',
+            type: 'enum',
+            helperText: 'Change the layout of the tab headers (uses justify-content)',
+            defaultValue: 'flex-start',
+            enum: [{
+                    label: 'Center',
+                    value: 'center'
+                }, {
+                    label: 'Space between',
+                    value: 'space-between'
+                }, {
+                    label: 'Space around',
+                    value: 'space-around'
+                }, {
+                    label: 'Left',
+                    value: 'flex-start'
+                }, {
+                    label: 'Right',
+                    value: 'flex-end'
+                }]
+        }]
+};

package/lib/edge/blocks/tabs/index.d.ts

@@ -0,0 +1 @@
+export { default } from './tabs.svelte';

package/lib/edge/blocks/tabs/index.js

@@ -0,0 +1 @@
+export { default } from './tabs.svelte';

package/lib/edge/blocks/tabs/tabs.svelte

@@ -0,0 +1,76 @@
+<script>import Blocks from "../../components/blocks/blocks.svelte";
+export let defaultActiveTab = undefined;
+export let tabs;
+export let activeTabStyle = undefined;
+export let tabHeaderLayout = undefined;
+export let collapsible = undefined;
+export let builderBlock;
+export let builderContext;
+export let builderComponents;
+export let builderLinkComponent = undefined;
+function stringifyStyles(stylesObj) {
+    let styles = "";
+    for (let key in stylesObj) {
+        const dashedKey = key.replace(/[A-Z]/g, function (match) {
+            return "-" + match.toLowerCase();
+        });
+        styles += dashedKey + ":" + stylesObj[key] + ";";
+    }
+    return styles;
+}
+function activeTabContent(active) {
+    return tabs && tabs[active].content;
+}
+function getActiveTabStyle(index) {
+    return activeTab === index ? activeTabStyle : {};
+}
+let activeTab = defaultActiveTab ? defaultActiveTab - 1 : 0;
+</script>
+
+<div>
+  <div
+    style={stringifyStyles({
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: tabHeaderLayout || "flex-start",
+      overflow: "auto",
+    })}
+    class="builder-tabs-wrap"
+  >
+    {#each tabs as tab, index (index)}
+      <span
+        style={stringifyStyles(getActiveTabStyle(index))}
+        class={`builder-tab-wrap ${
+          activeTab === index ? "builder-tab-active" : ""
+        }`}
+        on:click={(event) => {
+          if (index === activeTab && collapsible) {
+            activeTab = -1;
+          } else {
+            activeTab = index;
+          }
+        }}
+        ><Blocks
+          parent={builderBlock.id}
+          path={`component.options.tabs.${index}.label`}
+          blocks={tab.label}
+          context={builderContext}
+          registeredComponents={builderComponents}
+          linkComponent={builderLinkComponent}
+        /></span
+      >
+    {/each}
+  </div>
+  {#if activeTabContent(activeTab)}
+    <div>
+      <Blocks
+        parent={builderBlock.id}
+        path={`component.options.tabs.${activeTab}.content`}
+        blocks={activeTabContent(activeTab)}
+        context={builderContext}
+        registeredComponents={builderComponents}
+        linkComponent={builderLinkComponent}
+      />
+    </div>
+  {/if}
+</div>

package/lib/edge/blocks/tabs/tabs.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { TabsProps } from "./tabs.types";
+declare const __propDef: {
+    props: {
+        defaultActiveTab?: TabsProps["defaultActiveTab"];
+        tabs: TabsProps["tabs"];
+        activeTabStyle?: TabsProps["activeTabStyle"];
+        tabHeaderLayout?: TabsProps["tabHeaderLayout"];
+        collapsible?: TabsProps["collapsible"];
+        builderBlock: TabsProps["builderBlock"];
+        builderContext: TabsProps["builderContext"];
+        builderComponents: TabsProps["builderComponents"];
+        builderLinkComponent?: TabsProps["builderLinkComponent"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type TabsProps_ = typeof __propDef.props;
+export { TabsProps_ as TabsProps };
+export type TabsEvents = typeof __propDef.events;
+export type TabsSlots = typeof __propDef.slots;
+export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {
+}

package/lib/edge/blocks/tabs/tabs.types.d.ts

@@ -0,0 +1,13 @@
+import type { BuilderBlock } from '../../types/builder-block';
+import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props';
+export interface TabsProps extends BuilderComponentsProp, BuilderLinkComponentProp, BuilderDataProps {
+    tabs: {
+        label: BuilderBlock[];
+        content: BuilderBlock[];
+    }[];
+    builderBlock: BuilderBlock;
+    defaultActiveTab?: number;
+    collapsible?: boolean;
+    tabHeaderLayout?: 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+    activeTabStyle?: any;
+}

package/lib/edge/blocks/tabs/tabs.types.js

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

package/lib/edge/blocks/text/text.types.d.ts

@@ -1,3 +1,4 @@
+import type { BuilderDataProps } from '../../types/builder-props';
 export type TextProps = {
     text?: string;
-};
+} & BuilderDataProps;

package/lib/edge/components/block/block.helpers.d.ts

@@ -14,3 +14,5 @@ export declare const getInheritedStyles: ({ block, context }: {
     block: BuilderBlock;
     context: BuilderContextInterface;
 }) => Partial<CSSStyleDeclaration>;
+export declare const shouldPassLinkComponent: (blockName: string | undefined) => boolean | "" | undefined;
+export declare const shouldPassRegisteredComponents: (blockName: string | undefined) => boolean | "" | undefined;

package/lib/edge/components/block/block.helpers.js

@@ -73,3 +73,9 @@ export const getInheritedStyles = ({ block, context }) => {
     }
     return extractTextStyles(style);
 };
+export const shouldPassLinkComponent = (blockName) => {
+    return blockName && ['Core:Button', 'Symbol', 'Columns', 'Form:Form', 'Builder: Tabs'].includes(blockName);
+};
+export const shouldPassRegisteredComponents = (blockName) => {
+    return blockName && ['Symbol', 'Columns', 'Form:Form', 'Builder: Tabs'].includes(blockName);
+};

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

@@ -4,11 +4,12 @@
 import { getBlockComponentOptions } from "../../functions/get-block-component-options";
 import { getProcessedBlock } from "../../functions/get-processed-block";
 import { bindAnimations } from "./animator";
-import { getComponent, getRepeatItemData, } from "./block.helpers";
+import { getComponent, getRepeatItemData, shouldPassLinkComponent, shouldPassRegisteredComponents, } from "./block.helpers";
 import BlockStyles from "./components/block-styles.svelte";
 import BlockWrapper from "./components/block-wrapper.svelte";
 import ComponentRef from "./components/component-ref/component-ref.svelte";
 import RepeatedBlock from "./components/repeated-block.svelte";
+import "../dynamic-div.svelte";
 export let block;
 export let context;
 export let registeredComponents;
@@ -76,17 +77,12 @@ $: componentRefProps = () => {
         componentOptions: {
             ...getBlockComponentOptions(processedBlock()),
             builderContext: context,
-            ...(blockComponent?.()?.name === "Core:Button" ||
-                blockComponent?.()?.name === "Symbol" ||
-                blockComponent?.()?.name === "Columns" ||
-                blockComponent?.()?.name === "Form:Form"
+            ...(shouldPassLinkComponent(blockComponent?.()?.name)
                 ? {
                     builderLinkComponent: linkComponent,
                 }
                 : {}),
-            ...(blockComponent?.()?.name === "Symbol" ||
-                blockComponent?.()?.name === "Columns" ||
-                blockComponent?.()?.name === "Form:Form"
+            ...(shouldPassRegisteredComponents(blockComponent?.()?.name)
                 ? {
                     builderComponents: registeredComponents,
                 }