@builder.io/sdk-qwik 0.16.6 → 0.16.7

package/lib/browser/blocks/accordion/component-info.qwik.mjs

@@ -0,0 +1,159 @@
+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!"
+        }
+      }
+    }
+  ]
+};
+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", []);
+      }
+    }
+  ],
+  shouldReceiveBuilderProps: {
+    builderBlock: true,
+    builderContext: true,
+    builderComponents: true,
+    builderLinkComponent: true
+  }
+};
+export {
+  componentInfo
+};

package/lib/browser/blocks/accordion/helpers.qwik.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const convertOrderNumberToString = (order) => {
+  return order.toString();
+};
+exports.convertOrderNumberToString = convertOrderNumberToString;

package/lib/browser/blocks/accordion/helpers.qwik.mjs

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

package/lib/browser/blocks/button/button.qwik.cjs

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const qwik = require("@builder.io/qwik");
+const dynamicRenderer = require("../../components/dynamic-renderer/dynamic-renderer.qwik.cjs");
+const getClassPropName = require("../../functions/get-class-prop-name.qwik.cjs");
+const attrs = function attrs2(props, state) {
+  return {
+    ...props.attributes,
+    [getClassPropName.getClassPropName()]: `${props.link ? "" : "builder-button"} ${props.attributes[getClassPropName.getClassPropName()] || ""}`,
+    ...props.link ? {
+      href: props.link,
+      target: props.openLinkInNewTab ? "_blank" : void 0,
+      role: "link"
+    } : {
+      role: "button"
+    }
+  };
+};
+const Button = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  return /* @__PURE__ */ qwik._jsxC(dynamicRenderer.DynamicRenderer, {
+    attributes: attrs(props),
+    get TagName() {
+      return props.link ? props.builderLinkComponent || "a" : "button";
+    },
+    actionAttributes: {},
+    children: qwik._fnSignal((p0) => p0.text, [
+      props
+    ], "p0.text"),
+    [qwik._IMMUTABLE]: {
+      TagName: qwik._fnSignal((p0) => p0.link ? p0.builderLinkComponent || "a" : "button", [
+        props
+      ], 'p0.link?p0.builderLinkComponent||"a":"button"'),
+      actionAttributes: qwik._IMMUTABLE
+    }
+  }, 3, "jc_0");
+}, "Button_component_gJoMUICXoUQ"));
+exports.Button = Button;
+exports.attrs = attrs;
+exports.default = Button;

package/lib/browser/blocks/button/button.qwik.mjs

@@ -0,0 +1,39 @@
+import { componentQrl, inlinedQrl, _jsxC, _fnSignal, _IMMUTABLE } from "@builder.io/qwik";
+import { DynamicRenderer } from "../../components/dynamic-renderer/dynamic-renderer.qwik.mjs";
+import { getClassPropName } from "../../functions/get-class-prop-name.qwik.mjs";
+const attrs = function attrs2(props, state) {
+  return {
+    ...props.attributes,
+    [getClassPropName()]: `${props.link ? "" : "builder-button"} ${props.attributes[getClassPropName()] || ""}`,
+    ...props.link ? {
+      href: props.link,
+      target: props.openLinkInNewTab ? "_blank" : void 0,
+      role: "link"
+    } : {
+      role: "button"
+    }
+  };
+};
+const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxC(DynamicRenderer, {
+    attributes: attrs(props),
+    get TagName() {
+      return props.link ? props.builderLinkComponent || "a" : "button";
+    },
+    actionAttributes: {},
+    children: _fnSignal((p0) => p0.text, [
+      props
+    ], "p0.text"),
+    [_IMMUTABLE]: {
+      TagName: _fnSignal((p0) => p0.link ? p0.builderLinkComponent || "a" : "button", [
+        props
+      ], 'p0.link?p0.builderLinkComponent||"a":"button"'),
+      actionAttributes: _IMMUTABLE
+    }
+  }, 3, "jc_0");
+}, "Button_component_gJoMUICXoUQ"));
+export {
+  Button,
+  attrs,
+  Button as default
+};

package/lib/browser/blocks/button/component-info.qwik.cjs

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const componentInfo = {
+  name: "Core:Button",
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
+  defaultStyles: {
+    // TODO: make min width more intuitive and set one
+    appearance: "none",
+    paddingTop: "15px",
+    paddingBottom: "15px",
+    paddingLeft: "25px",
+    paddingRight: "25px",
+    backgroundColor: "#000000",
+    color: "white",
+    borderRadius: "4px",
+    textAlign: "center",
+    cursor: "pointer"
+  },
+  inputs: [
+    {
+      name: "text",
+      type: "text",
+      defaultValue: "Click me!",
+      bubble: true
+    },
+    {
+      name: "link",
+      type: "url",
+      bubble: true
+    },
+    {
+      name: "openLinkInNewTab",
+      type: "boolean",
+      defaultValue: false,
+      friendlyName: "Open link in new tab"
+    }
+  ],
+  static: true,
+  noWrap: true,
+  shouldReceiveBuilderProps: {
+    builderLinkComponent: true
+  }
+};
+exports.componentInfo = componentInfo;

package/lib/browser/blocks/button/component-info.qwik.mjs

@@ -0,0 +1,44 @@
+const componentInfo = {
+  name: "Core:Button",
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
+  defaultStyles: {
+    // TODO: make min width more intuitive and set one
+    appearance: "none",
+    paddingTop: "15px",
+    paddingBottom: "15px",
+    paddingLeft: "25px",
+    paddingRight: "25px",
+    backgroundColor: "#000000",
+    color: "white",
+    borderRadius: "4px",
+    textAlign: "center",
+    cursor: "pointer"
+  },
+  inputs: [
+    {
+      name: "text",
+      type: "text",
+      defaultValue: "Click me!",
+      bubble: true
+    },
+    {
+      name: "link",
+      type: "url",
+      bubble: true
+    },
+    {
+      name: "openLinkInNewTab",
+      type: "boolean",
+      defaultValue: false,
+      friendlyName: "Open link in new tab"
+    }
+  ],
+  static: true,
+  noWrap: true,
+  shouldReceiveBuilderProps: {
+    builderLinkComponent: true
+  }
+};
+export {
+  componentInfo
+};

package/lib/browser/blocks/columns/columns.qwik.cjs

@@ -0,0 +1,208 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const qwik = require("@builder.io/qwik");
+const blocks = require("../../components/blocks/blocks.qwik.cjs");
+const dynamicRenderer = require("../../components/dynamic-renderer/dynamic-renderer.qwik.cjs");
+const inlinedStyles = require("../../components/inlined-styles.qwik.cjs");
+const deviceSizes = require("../../constants/device-sizes.qwik.cjs");
+const deopt = require("../../functions/deopt.qwik.cjs");
+const getClassPropName = require("../../functions/get-class-prop-name.qwik.cjs");
+const getStyle = require("../../functions/get-style.qwik.cjs");
+const helpers = require("./helpers.qwik.cjs");
+const getTagName = function getTagName2(props, state, column) {
+  return column.link ? props.builderLinkComponent || "a" : "div";
+};
+const getWidth = function getWidth2(props, state, index) {
+  var _a;
+  return ((_a = state.cols[index]) == null ? void 0 : _a.width) || 100 / state.cols.length;
+};
+const getColumnCssWidth = function getColumnCssWidth2(props, state, index) {
+  const width = getWidth(props, state, index);
+  const subtractWidth = state.gutterSize * (state.cols.length - 1) * (width / 100);
+  return `calc(${width}% - ${subtractWidth}px)`;
+};
+const getTabletStyle = function getTabletStyle2(props, state, { stackedStyle, desktopStyle }) {
+  return state.stackAt === "tablet" ? stackedStyle : desktopStyle;
+};
+const getMobileStyle = function getMobileStyle2(props, state, { stackedStyle, desktopStyle }) {
+  return state.stackAt === "never" ? desktopStyle : stackedStyle;
+};
+const columnsCssVars = function columnsCssVars2(props, state) {
+  return {
+    "--flex-dir": state.flexDir,
+    "--flex-dir-tablet": getTabletStyle(props, state, {
+      stackedStyle: state.flexDir,
+      desktopStyle: "row"
+    })
+  };
+};
+const columnCssVars = function columnCssVars2(props, state, index) {
+  const gutter = index === 0 ? 0 : state.gutterSize;
+  const width = getColumnCssWidth(props, state, index);
+  const gutterPixels = `${gutter}px`;
+  const mobileWidth = "100%";
+  const mobileMarginLeft = 0;
+  const marginLeftKey = "margin-left";
+  const sharedStyles = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch"
+  };
+  return {
+    ...sharedStyles,
+    width,
+    [marginLeftKey]: gutterPixels,
+    "--column-width-mobile": getMobileStyle(props, state, {
+      stackedStyle: mobileWidth,
+      desktopStyle: width
+    }),
+    "--column-margin-left-mobile": getMobileStyle(props, state, {
+      stackedStyle: mobileMarginLeft,
+      desktopStyle: gutterPixels
+    }),
+    "--column-width-tablet": getTabletStyle(props, state, {
+      stackedStyle: mobileWidth,
+      desktopStyle: width
+    }),
+    "--column-margin-left-tablet": getTabletStyle(props, state, {
+      stackedStyle: mobileMarginLeft,
+      desktopStyle: gutterPixels
+    })
+  };
+};
+const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, size) {
+  var _a, _b;
+  const breakpointSizes = deviceSizes.getSizesForBreakpoints(((_b = (_a = props.builderContext.content) == null ? void 0 : _a.meta) == null ? void 0 : _b.breakpoints) || {});
+  return breakpointSizes[size].max;
+};
+const columnsStyles = function columnsStyles2(props, state) {
+  const childColumnDiv = `.${props.builderBlock.id}-breakpoints > .builder-column`;
+  return `
+        @media (max-width: ${getWidthForBreakpointSize(props, state, "medium")}px) {
+          .${props.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir-tablet);
+            align-items: stretch;
+          }
+
+          ${childColumnDiv} {
+            width: var(--column-width-tablet) !important;
+            margin-left: var(--column-margin-left-tablet) !important;
+          }
+        }
+
+        @media (max-width: ${getWidthForBreakpointSize(props, state, "small")}px) {
+          .${props.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir);
+            align-items: stretch;
+          }
+
+          ${childColumnDiv} {
+            width: var(--column-width-mobile) !important;
+            margin-left: var(--column-margin-left-mobile) !important;
+          }
+        },
+      `;
+};
+const getAttributes = function getAttributes2(props, state, column, index) {
+  return {
+    ...column.link ? {
+      href: column.link
+    } : {},
+    [getClassPropName.getClassPropName()]: "builder-column",
+    style: getStyle.mapStyleObjToStrIfNeeded(columnCssVars(props, state, index))
+  };
+};
+const Columns = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  var _a;
+  qwik._jsxBranch();
+  const state = qwik.useStore({
+    cols: props.columns || [],
+    flexDir: props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column",
+    gutterSize: typeof props.space === "number" ? props.space || 0 : 20,
+    stackAt: props.stackColumnsAt || "tablet"
+  });
+  qwik.useStylesScopedQrl(/* @__PURE__ */ qwik.inlinedQrl(STYLES, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
+  return /* @__PURE__ */ qwik._jsxQ("div", {
+    class: helpers.getColumnsClass((_a = props.builderBlock) == null ? void 0 : _a.id) + " div-Columns",
+    style: columnsCssVars(props, state)
+  }, null, [
+    /* @__PURE__ */ qwik._jsxC(inlinedStyles.InlinedStyles, {
+      id: "builderio-columns",
+      styles: columnsStyles(props, state),
+      get nonce() {
+        return props.builderContext.nonce;
+      },
+      [qwik._IMMUTABLE]: {
+        id: qwik._IMMUTABLE,
+        nonce: qwik._fnSignal((p0) => p0.builderContext.nonce, [
+          props
+        ], "p0.builderContext.nonce")
+      }
+    }, 3, "c0_0"),
+    (props.columns || []).map((column, index) => {
+      return /* @__PURE__ */ qwik._jsxC(dynamicRenderer.DynamicRenderer, {
+        TagName: getTagName(props, state, column),
+        actionAttributes: {},
+        attributes: getAttributes(props, state, column, index),
+        children: /* @__PURE__ */ qwik._jsxC(blocks.Blocks, {
+          path: `component.options.columns.${index}.blocks`,
+          get parent() {
+            return props.builderBlock.id;
+          },
+          get styleProp() {
+            return {
+              flexGrow: "1"
+            };
+          },
+          get context() {
+            return props.builderContext;
+          },
+          get registeredComponents() {
+            return props.builderComponents;
+          },
+          get linkComponent() {
+            return props.builderLinkComponent;
+          },
+          blocks: deopt.deoptSignal(column.blocks),
+          [qwik._IMMUTABLE]: {
+            context: qwik._fnSignal((p0) => p0.builderContext, [
+              props
+            ], "p0.builderContext"),
+            linkComponent: qwik._fnSignal((p0) => p0.builderLinkComponent, [
+              props
+            ], "p0.builderLinkComponent"),
+            parent: qwik._fnSignal((p0) => p0.builderBlock.id, [
+              props
+            ], "p0.builderBlock.id"),
+            registeredComponents: qwik._fnSignal((p0) => p0.builderComponents, [
+              props
+            ], "p0.builderComponents"),
+            styleProp: qwik._IMMUTABLE
+          }
+        }, 3, "c0_1"),
+        [qwik._IMMUTABLE]: {
+          actionAttributes: qwik._IMMUTABLE
+        }
+      }, 1, index);
+    })
+  ], 1, "c0_2");
+}, "Columns_component_7yLj4bxdI6c"));
+const STYLES = `
+.div-Columns {
+  display: flex;
+  line-height: normal;
+}
+`;
+exports.Columns = Columns;
+exports.STYLES = STYLES;
+exports.columnCssVars = columnCssVars;
+exports.columnsCssVars = columnsCssVars;
+exports.columnsStyles = columnsStyles;
+exports.default = Columns;
+exports.getAttributes = getAttributes;
+exports.getColumnCssWidth = getColumnCssWidth;
+exports.getMobileStyle = getMobileStyle;
+exports.getTabletStyle = getTabletStyle;
+exports.getTagName = getTagName;
+exports.getWidth = getWidth;
+exports.getWidthForBreakpointSize = getWidthForBreakpointSize;