@builder.io/sdk-svelte 1.0.27 → 1.0.28

package/lib/browser/blocks/accordion/accordion.svelte

@@ -0,0 +1,160 @@
+<script>import Blocks from "../../components/blocks/index";
+import { convertOrderNumberToString } from "./helpers";
+import "../../functions/camel-to-kebab-case";
+export let grid = undefined;
+export let oneAtATime = undefined;
+export let items;
+export let gridRowWidth = 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 getAccordionTitleClassName(index) {
+    return `builder-accordion-title builder-accordion-title-${open.includes(index) ? "open" : "closed"}`;
+}
+function getAccordionDetailClassName(index) {
+    return `builder-accordion-detail builder-accordion-detail-${open.includes(index) ? "open" : "closed"}`;
+}
+function onClick(index) {
+    if (open.includes(index)) {
+        open = onlyOneAtATime() ? [] : open.filter((item) => item !== index);
+    }
+    else {
+        open = onlyOneAtATime() ? [index] : open.concat(index);
+    }
+}
+$: onlyOneAtATime = () => {
+    return Boolean(grid || oneAtATime);
+};
+$: accordionStyles = () => {
+    const styles = {
+        display: "flex",
+        alignItems: "stretch",
+        flexDirection: "column",
+        ...(grid && {
+            flexDirection: "row",
+            alignItems: "flex-start",
+            flexWrap: "wrap",
+        }),
+    };
+    return styles;
+};
+$: accordionTitleStyles = () => {
+    const shared = {
+        display: "flex",
+        flexDirection: "column",
+    };
+    const styles = {
+        ...shared,
+        alignItems: "stretch",
+        cursor: "pointer",
+    };
+    return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== undefined));
+};
+$: openGridItemOrder = () => {
+    let itemOrder = null;
+    const getOpenGridItemPosition = grid && open.length;
+    if (getOpenGridItemPosition && document) {
+        const openItemIndex = open[0];
+        const openItem = document.querySelector(`.builder-accordion-title[data-index="${openItemIndex}"]`);
+        let subjectItem = openItem;
+        itemOrder = openItemIndex;
+        if (subjectItem) {
+            let prevItemRect = subjectItem.getBoundingClientRect();
+            while ((subjectItem = subjectItem && subjectItem.nextElementSibling)) {
+                if (subjectItem) {
+                    if (subjectItem.classList.contains("builder-accordion-detail")) {
+                        continue;
+                    }
+                    const subjectItemRect = subjectItem.getBoundingClientRect();
+                    if (subjectItemRect.left > prevItemRect.left) {
+                        const index = parseInt(subjectItem.getAttribute("data-index") || "", 10);
+                        if (!isNaN(index)) {
+                            prevItemRect = subjectItemRect;
+                            itemOrder = index;
+                        }
+                    }
+                    else {
+                        break;
+                    }
+                }
+            }
+        }
+    }
+    if (typeof itemOrder === "number") {
+        itemOrder = itemOrder + 1;
+    }
+    return itemOrder;
+};
+$: accordionDetailStyles = () => {
+    const styles = {
+        ...{
+            order: typeof openGridItemOrder() === "number"
+                ? openGridItemOrder()
+                : undefined,
+        },
+        ...(grid && {
+            width: "100%",
+        }),
+    };
+    return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== undefined));
+};
+let open = [];
+</script>
+
+<div style={stringifyStyles(accordionStyles())} class="builder-accordion">
+  {#each items as item, index}
+    <div
+      style={stringifyStyles({
+        ...accordionTitleStyles(),
+        width: grid ? gridRowWidth : undefined,
+        ...{
+          order:
+            openGridItemOrder() !== null
+              ? convertOrderNumberToString(index)
+              : convertOrderNumberToString(index + 1),
+        },
+      })}
+      class={getAccordionTitleClassName(index)}
+      data-index={index}
+      on:click={(event) => {
+        onClick(index);
+      }}
+    >
+      <Blocks
+        blocks={item.title}
+        path={`items.${index}.title`}
+        parent={builderBlock.id}
+        context={builderContext}
+        registeredComponents={builderComponents}
+        linkComponent={builderLinkComponent}
+      />
+    </div>
+
+    {#if open.includes(index)}
+      <div
+        style={stringifyStyles(accordionDetailStyles())}
+        class={getAccordionDetailClassName(index)}
+      >
+        <Blocks
+          blocks={item.detail}
+          path={`items.${index}.detail`}
+          parent={builderBlock.id}
+          context={builderContext}
+          registeredComponents={builderComponents}
+          linkComponent={builderLinkComponent}
+        />
+      </div>
+    {/if}
+  {/each}
+</div>

package/lib/browser/blocks/accordion/accordion.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { AccordionProps } from "./accordion.types";
+declare const __propDef: {
+    props: {
+        grid?: AccordionProps["grid"];
+        oneAtATime?: AccordionProps["oneAtATime"];
+        items: AccordionProps["items"];
+        gridRowWidth?: AccordionProps["gridRowWidth"];
+        builderBlock: AccordionProps["builderBlock"];
+        builderContext: AccordionProps["builderContext"];
+        builderComponents: AccordionProps["builderComponents"];
+        builderLinkComponent?: AccordionProps["builderLinkComponent"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type AccordionProps_ = typeof __propDef.props;
+export { AccordionProps_ as AccordionProps };
+export type AccordionEvents = typeof __propDef.events;
+export type AccordionSlots = typeof __propDef.slots;
+export default class Accordion extends SvelteComponent<AccordionProps, AccordionEvents, AccordionSlots> {
+}

package/lib/browser/blocks/accordion/accordion.types.d.ts

@@ -0,0 +1,12 @@
+import type { BuilderBlock } from '../../types/builder-block';
+import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props';
+export interface AccordionProps extends BuilderComponentsProp, BuilderLinkComponentProp, BuilderDataProps {
+    items: {
+        title: BuilderBlock[];
+        detail: BuilderBlock[];
+    }[];
+    oneAtATime?: boolean;
+    grid?: boolean;
+    gridRowWidth?: string;
+    useChildrenForItems?: boolean;
+}

package/lib/browser/blocks/accordion/accordion.types.js

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

package/lib/browser/blocks/accordion/component-info.d.ts

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

package/lib/browser/blocks/accordion/component-info.js

@@ -0,0 +1,123 @@
+const defaultTitle = {
+    '@type': '@builder.io/sdk:Element',
+    layerName: 'Accordion item title',
+    responsiveStyles: {
+        large: {
+            marginTop: '10px',
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'stretch',
+            flexDirection: 'column',
+            paddingBottom: '10px'
+        }
+    },
+    children: [{
+            '@type': '@builder.io/sdk:Element',
+            responsiveStyles: {
+                large: {
+                    textAlign: 'left',
+                    display: 'flex',
+                    flexDirection: 'column'
+                }
+            },
+            component: {
+                name: 'Text',
+                options: {
+                    text: 'I am an accordion title. Click me!'
+                }
+            }
+        }]
+};
+const defaultDetail = {
+    '@type': '@builder.io/sdk:Element',
+    layerName: 'Accordion item detail',
+    responsiveStyles: {
+        large: {
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'stretch',
+            flexDirection: 'column',
+            marginTop: '10px',
+            paddingBottom: '10px'
+        }
+    },
+    children: [{
+            '@type': '@builder.io/sdk:Element',
+            responsiveStyles: {
+                large: {
+                    paddingTop: '50px',
+                    textAlign: 'left',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    paddingBottom: '50px'
+                }
+            },
+            component: {
+                name: 'Text',
+                options: {
+                    text: 'I am an accordion detail, hello!'
+                }
+            }
+        }]
+};
+export const componentInfo = {
+    name: 'Builder:Accordion',
+    canHaveChildren: true,
+    image: 'https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2Ffab6c1fd3fe542408cbdec078bca7f35',
+    defaultStyles: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'stretch'
+    },
+    inputs: [{
+            name: 'items',
+            type: 'list',
+            broadcast: true,
+            subFields: [{
+                    name: 'title',
+                    type: 'uiBlocks',
+                    hideFromUI: true,
+                    defaultValue: [defaultTitle]
+                }, {
+                    name: 'detail',
+                    type: 'uiBlocks',
+                    hideFromUI: true,
+                    defaultValue: [defaultDetail]
+                }],
+            defaultValue: [{
+                    title: [defaultTitle],
+                    detail: [defaultDetail]
+                }, {
+                    title: [defaultTitle],
+                    detail: [defaultDetail]
+                }],
+            showIf: (options) => !options.get('useChildrenForItems')
+        }, {
+            name: 'oneAtATime',
+            helperText: 'Only allow opening one at a time (collapse all others when new item openned)',
+            type: 'boolean',
+            defaultValue: false
+        }, {
+            name: 'grid',
+            helperText: 'Display as a grid',
+            type: 'boolean',
+            defaultValue: false
+        }, {
+            name: 'gridRowWidth',
+            helperText: 'Display as a grid',
+            type: 'string',
+            showIf: (options) => options.get('grid'),
+            defaultValue: '25%'
+        }, {
+            name: 'useChildrenForItems',
+            type: 'boolean',
+            helperText: 'Use child elements for each slide, instead of the array. Useful for dynamically repeating items',
+            advanced: true,
+            defaultValue: false,
+            onChange: (options) => {
+                if (options.get('useChildrenForItems') === true) {
+                    options.set('items', []);
+                }
+            }
+        }]
+};

package/lib/browser/blocks/accordion/helpers.d.ts

@@ -0,0 +1 @@
+export declare const convertOrderNumberToString: (order: number) => string;

package/lib/browser/blocks/accordion/helpers.js

@@ -0,0 +1,3 @@
+export const convertOrderNumberToString = (order) => {
+    return order.toString();
+};

package/lib/browser/blocks/accordion/index.d.ts

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

package/lib/browser/blocks/accordion/index.js

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

package/lib/browser/blocks/tabs/tabs.svelte

@@ -1,9 +1,9 @@
 <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 tabHeaderLayout = undefined;
+export let activeTabStyle = undefined;
 export let builderBlock;
 export let builderContext;
 export let builderComponents;
@@ -21,8 +21,13 @@ function stringifyStyles(stylesObj) {
 function activeTabContent(active) {
     return tabs && tabs[active].content;
 }
-function getActiveTabStyle(index) {
-    return activeTab === index ? activeTabStyle : {};
+function onClick(index) {
+    if (index === activeTab && collapsible) {
+        activeTab = -1;
+    }
+    else {
+        activeTab = index;
+    }
 }
 let activeTab = defaultActiveTab ? defaultActiveTab - 1 : 0;
 </script>
@@ -39,16 +44,14 @@ let activeTab = defaultActiveTab ? defaultActiveTab - 1 : 0;
   >
     {#each tabs as tab, index (index)}
       <span
-        style={stringifyStyles(getActiveTabStyle(index))}
+        style={stringifyStyles({
+          ...(activeTab === index ? activeTabStyle : {}),
+        })}
         class={`builder-tab-wrap ${
           activeTab === index ? "builder-tab-active" : ""
         }`}
         on:click={(event) => {
-          if (index === activeTab && collapsible) {
-            activeTab = -1;
-          } else {
-            activeTab = index;
-          }
+          onClick(index);
         }}
         ><Blocks
           parent={builderBlock.id}

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

@@ -4,9 +4,9 @@ declare const __propDef: {
     props: {
         defaultActiveTab?: TabsProps["defaultActiveTab"];
         tabs: TabsProps["tabs"];
-        activeTabStyle?: TabsProps["activeTabStyle"];
-        tabHeaderLayout?: TabsProps["tabHeaderLayout"];
         collapsible?: TabsProps["collapsible"];
+        tabHeaderLayout?: TabsProps["tabHeaderLayout"];
+        activeTabStyle?: TabsProps["activeTabStyle"];
         builderBlock: TabsProps["builderBlock"];
         builderContext: TabsProps["builderContext"];
         builderComponents: TabsProps["builderComponents"];

package/lib/browser/components/block/animator.d.ts

@@ -1,5 +1,4 @@
 import type { BuilderAnimation } from '../../types/builder-block';
-export declare const camelCaseToKebabCase: (str?: string) => string;
 export declare function bindAnimations(animations: BuilderAnimation[]): void;
 export declare function triggerAnimation(animation: BuilderAnimation): void;
 export declare function bindScrollInViewAnimation(animation: BuilderAnimation): void;

package/lib/browser/components/block/animator.js

@@ -1,3 +1,4 @@
+import { camelToKebabCase } from '../../functions/camel-to-kebab-case';
 // eslint-disable-next-line @typescript-eslint/ban-types
 function throttle(func, wait, options = {}) {
     let context;
@@ -54,7 +55,6 @@ function assign(target, ..._args) {
     }
     return to;
 }
-export const camelCaseToKebabCase = (str) => str ? str.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`) : '';
 export function bindAnimations(animations) {
     for (const animation of animations) {
         switch (animation.trigger) {
@@ -120,7 +120,7 @@ export function triggerAnimation(animation) {
         // TODO: only include properties explicitly set in the animation
         // using Object.keys(styles)
         setTimeout(() => {
-            element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+            element.style.transition = `all ${animation.duration}s ${camelToKebabCase(animation.easing)}`;
             if (animation.delay) {
                 element.style.transitionDelay = animation.delay + 's';
             }
@@ -193,7 +193,7 @@ export function bindScrollInViewAnimation(animation) {
         attachDefaultState();
         // TODO: queue/batch these timeouts!
         setTimeout(() => {
-            element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+            element.style.transition = `all ${animation.duration}s ${camelToKebabCase(animation.easing)}`;
             if (animation.delay) {
                 element.style.transitionDelay = animation.delay + 's';
             }

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

@@ -74,8 +74,8 @@ export const getInheritedStyles = ({ block, context }) => {
     return extractTextStyles(style);
 };
 export const shouldPassLinkComponent = (block) => {
-    return block && (block.isRSC || ['Core:Button', 'Symbol', 'Columns', 'Form:Form', 'Builder: Tabs'].includes(block.name));
+    return block && (block.isRSC || ['Core:Button', 'Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name));
 };
 export const shouldPassRegisteredComponents = (block) => {
-    return block && (block.isRSC || ['Symbol', 'Columns', 'Form:Form', 'Builder: Tabs'].includes(block.name));
+    return block && (block.isRSC || ['Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name));
 };

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

@@ -6,7 +6,7 @@ import { getProcessedBlock } from "../../../functions/get-processed-block";
 import { createCssClass } from "../../../helpers/css";
 import { checkIsDefined } from "../../../helpers/nullable";
 import InlinedStyles from "../../inlined-styles.svelte";
-import { camelCaseToKebabCase } from "../animator";
+import { camelToKebabCase } from "../../../functions/camel-to-kebab-case";
 export let block;
 export let context;
 $: canShowBlock = () => {
@@ -76,7 +76,7 @@ $: css = () => {
                 className: `${className}:hover`,
                 styles: {
                     ...hoverStyles,
-                    transition: `all ${hoverAnimation.duration}s ${camelCaseToKebabCase(hoverAnimation.easing)}`,
+                    transition: `all ${hoverAnimation.duration}s ${camelToKebabCase(hoverAnimation.easing)}`,
                     transitionDelay: hoverAnimation.delay
                         ? `${hoverAnimation.delay}s`
                         : "0s",

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

@@ -272,7 +272,7 @@ onMount(() => {
 });
 onMount(() => {
     if (!apiKey) {
-        logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
+        logger.error("No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
     }
     evaluateJsCode();
     runHttpRequests();

package/lib/browser/components/content-variants/content-variants.types.d.ts

@@ -22,7 +22,7 @@ export interface ContentVariantsPrps {
      */
     context?: BuilderRenderContext;
     /**
-     * Your API Key: needed to dynamically fetch symbols (required).
+     * Your API Key: needed to enable visual editing, and to dynamically fetch symbols (required).
      */
     apiKey: string;
     apiVersion?: ApiVersion;

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

@@ -16,6 +16,8 @@ import { componentInfo as tabsComponentInfo } from '../blocks/tabs/component-inf
 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 { default as Accordion } from '../blocks/accordion/index';
+import { componentInfo as accordionComponentInfo } from '../blocks/accordion/component-info';
 import { getExtraComponents } from './extra-components';
 import { TARGET } from './target';
 /**
@@ -49,4 +51,7 @@ export const getDefaultRegisteredComponents = () => [{
     }, ...(TARGET === 'rsc' ? [] : [{
             component: Tabs,
             ...tabsComponentInfo
+        }, {
+            component: Accordion,
+            ...accordionComponentInfo
         }]), ...getExtraComponents()];

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.0.27";
+export declare const SDK_VERSION = "1.0.28";

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

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.27";
+export const SDK_VERSION = "1.0.28";

package/lib/browser/functions/camel-to-kebab-case.d.ts

@@ -1 +1 @@
-export declare const camelToKebabCase: (string: string) => string;
+export declare const camelToKebabCase: (str?: string) => string;

package/lib/browser/functions/camel-to-kebab-case.js

@@ -1 +1 @@
-export const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+export const camelToKebabCase = (str) => str ? str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase() : '';