@builder.io/sdk-qwik 0.16.5 → 0.16.6-1

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

@@ -0,0 +1,215 @@
+"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 helpers = require("./helpers.qwik.cjs");
+const getAccordionTitleClassName = function getAccordionTitleClassName2(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
+  return `builder-accordion-title builder-accordion-title-${state.open.includes(index) ? "open" : "closed"}`;
+};
+const getAccordionDetailClassName = function getAccordionDetailClassName2(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
+  return `builder-accordion-detail builder-accordion-detail-${state.open.includes(index) ? "open" : "closed"}`;
+};
+const onClick = function onClick2(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
+  if (state.open.includes(index))
+    state.open = onlyOneAtATime.value ? [] : state.open.filter((item) => item !== index);
+  else
+    state.open = onlyOneAtATime.value ? [
+      index
+    ] : state.open.concat(index);
+};
+const Accordion = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  const state = qwik.useStore({
+    open: []
+  });
+  const onlyOneAtATime = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2] = qwik.useLexicalScope();
+    return Boolean(props2.grid || props2.oneAtATime);
+  }, "Accordion_component_onlyOneAtATime_useComputed_QYD7IoPU2HY", [
+    props
+  ]));
+  const accordionStyles = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2] = qwik.useLexicalScope();
+    const styles = {
+      display: "flex",
+      alignItems: "stretch",
+      flexDirection: "column",
+      ...props2.grid && {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        flexWrap: "wrap"
+      }
+    };
+    return styles;
+  }, "Accordion_component_accordionStyles_useComputed_Jrd0cwGn25U", [
+    props
+  ]));
+  const accordionTitleStyles = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const shared = {
+      display: "flex",
+      flexDirection: "column"
+    };
+    const styles = {
+      ...shared,
+      alignItems: "stretch",
+      cursor: "pointer"
+    };
+    return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
+  }, "Accordion_component_accordionTitleStyles_useComputed_FopdBMH0V6U"));
+  const openGridItemOrder = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2, state2] = qwik.useLexicalScope();
+    let itemOrder = null;
+    const getOpenGridItemPosition = props2.grid && state2.open.length;
+    if (getOpenGridItemPosition && document) {
+      const openItemIndex = state2.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;
+  }, "Accordion_component_openGridItemOrder_useComputed_cCQY1Vnxll0", [
+    props,
+    state
+  ]));
+  const accordionDetailStyles = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [openGridItemOrder2, props2] = qwik.useLexicalScope();
+    const styles = {
+      order: typeof openGridItemOrder2.value === "number" ? openGridItemOrder2.value : void 0,
+      ...props2.grid && {
+        width: "100%"
+      }
+    };
+    return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
+  }, "Accordion_component_accordionDetailStyles_useComputed_S0QmQzGJoRo", [
+    openGridItemOrder,
+    props
+  ]));
+  return /* @__PURE__ */ qwik._jsxQ("div", null, {
+    class: "builder-accordion",
+    style: qwik._fnSignal((p0) => p0.value, [
+      accordionStyles
+    ], "p0.value")
+  }, (props.items || []).map((item, index) => {
+    qwik._jsxBranch();
+    return /* @__PURE__ */ qwik._jsxC(qwik.Fragment, {
+      children: [
+        /* @__PURE__ */ qwik._jsxQ("div", {
+          class: getAccordionTitleClassName(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index),
+          "data-index": index,
+          onClick$: /* @__PURE__ */ qwik.inlinedQrl((event) => {
+            const [accordionDetailStyles2, accordionStyles2, accordionTitleStyles2, index2, onlyOneAtATime2, openGridItemOrder2, props2, state2] = qwik.useLexicalScope();
+            return onClick(props2, state2, onlyOneAtATime2, accordionStyles2, accordionTitleStyles2, openGridItemOrder2, accordionDetailStyles2, index2);
+          }, "Accordion_component_div_Fragment_div_onClick_VtzhhJnK0XI", [
+            accordionDetailStyles,
+            accordionStyles,
+            accordionTitleStyles,
+            index,
+            onlyOneAtATime,
+            openGridItemOrder,
+            props,
+            state
+          ]),
+          style: {
+            ...accordionTitleStyles.value,
+            width: props.grid ? props.gridRowWidth : void 0,
+            order: openGridItemOrder.value !== null ? helpers.convertOrderNumberToString(index) : helpers.convertOrderNumberToString(index + 1)
+          }
+        }, null, /* @__PURE__ */ qwik._jsxC(blocks.Blocks, {
+          get blocks() {
+            return item.title;
+          },
+          path: `items.${index}.title`,
+          get parent() {
+            return props.builderBlock.id;
+          },
+          get context() {
+            return props.builderContext;
+          },
+          get registeredComponents() {
+            return props.builderComponents;
+          },
+          get linkComponent() {
+            return props.builderLinkComponent;
+          },
+          [qwik._IMMUTABLE]: {
+            blocks: qwik._wrapProp(item, "title"),
+            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")
+          }
+        }, 3, "hf_0"), 0, null),
+        state.open.includes(index) ? /* @__PURE__ */ qwik._jsxQ("div", {
+          class: getAccordionDetailClassName(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index)
+        }, {
+          style: qwik._fnSignal((p0) => p0.value, [
+            accordionDetailStyles
+          ], "p0.value")
+        }, /* @__PURE__ */ qwik._jsxC(blocks.Blocks, {
+          get blocks() {
+            return item.detail;
+          },
+          path: `items.${index}.detail`,
+          get parent() {
+            return props.builderBlock.id;
+          },
+          get context() {
+            return props.builderContext;
+          },
+          get registeredComponents() {
+            return props.builderComponents;
+          },
+          get linkComponent() {
+            return props.builderLinkComponent;
+          },
+          [qwik._IMMUTABLE]: {
+            blocks: qwik._wrapProp(item, "detail"),
+            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")
+          }
+        }, 3, "hf_1"), 1, "hf_2") : null
+      ]
+    }, 1, "hf_3");
+  }), 1, "hf_4");
+}, "Accordion_component_jkuUCHm0nt0"));
+exports.Accordion = Accordion;
+exports.default = Accordion;
+exports.getAccordionDetailClassName = getAccordionDetailClassName;
+exports.getAccordionTitleClassName = getAccordionTitleClassName;
+exports.onClick = onClick;

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

@@ -0,0 +1,215 @@
+import { componentQrl, inlinedQrl, useStore, useComputedQrl, useLexicalScope, _jsxQ, _fnSignal, _jsxBranch, _jsxC, Fragment, _IMMUTABLE, _wrapProp } from "@builder.io/qwik";
+import { Blocks } from "../../components/blocks/blocks.qwik.mjs";
+import { convertOrderNumberToString } from "./helpers.qwik.mjs";
+const getAccordionTitleClassName = function getAccordionTitleClassName2(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
+  return `builder-accordion-title builder-accordion-title-${state.open.includes(index) ? "open" : "closed"}`;
+};
+const getAccordionDetailClassName = function getAccordionDetailClassName2(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
+  return `builder-accordion-detail builder-accordion-detail-${state.open.includes(index) ? "open" : "closed"}`;
+};
+const onClick = function onClick2(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
+  if (state.open.includes(index))
+    state.open = onlyOneAtATime.value ? [] : state.open.filter((item) => item !== index);
+  else
+    state.open = onlyOneAtATime.value ? [
+      index
+    ] : state.open.concat(index);
+};
+const Accordion = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const state = useStore({
+    open: []
+  });
+  const onlyOneAtATime = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2] = useLexicalScope();
+    return Boolean(props2.grid || props2.oneAtATime);
+  }, "Accordion_component_onlyOneAtATime_useComputed_QYD7IoPU2HY", [
+    props
+  ]));
+  const accordionStyles = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2] = useLexicalScope();
+    const styles = {
+      display: "flex",
+      alignItems: "stretch",
+      flexDirection: "column",
+      ...props2.grid && {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        flexWrap: "wrap"
+      }
+    };
+    return styles;
+  }, "Accordion_component_accordionStyles_useComputed_Jrd0cwGn25U", [
+    props
+  ]));
+  const accordionTitleStyles = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const shared = {
+      display: "flex",
+      flexDirection: "column"
+    };
+    const styles = {
+      ...shared,
+      alignItems: "stretch",
+      cursor: "pointer"
+    };
+    return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
+  }, "Accordion_component_accordionTitleStyles_useComputed_FopdBMH0V6U"));
+  const openGridItemOrder = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2, state2] = useLexicalScope();
+    let itemOrder = null;
+    const getOpenGridItemPosition = props2.grid && state2.open.length;
+    if (getOpenGridItemPosition && document) {
+      const openItemIndex = state2.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;
+  }, "Accordion_component_openGridItemOrder_useComputed_cCQY1Vnxll0", [
+    props,
+    state
+  ]));
+  const accordionDetailStyles = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [openGridItemOrder2, props2] = useLexicalScope();
+    const styles = {
+      order: typeof openGridItemOrder2.value === "number" ? openGridItemOrder2.value : void 0,
+      ...props2.grid && {
+        width: "100%"
+      }
+    };
+    return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
+  }, "Accordion_component_accordionDetailStyles_useComputed_S0QmQzGJoRo", [
+    openGridItemOrder,
+    props
+  ]));
+  return /* @__PURE__ */ _jsxQ("div", null, {
+    class: "builder-accordion",
+    style: _fnSignal((p0) => p0.value, [
+      accordionStyles
+    ], "p0.value")
+  }, (props.items || []).map((item, index) => {
+    _jsxBranch();
+    return /* @__PURE__ */ _jsxC(Fragment, {
+      children: [
+        /* @__PURE__ */ _jsxQ("div", {
+          class: getAccordionTitleClassName(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index),
+          "data-index": index,
+          onClick$: /* @__PURE__ */ inlinedQrl((event) => {
+            const [accordionDetailStyles2, accordionStyles2, accordionTitleStyles2, index2, onlyOneAtATime2, openGridItemOrder2, props2, state2] = useLexicalScope();
+            return onClick(props2, state2, onlyOneAtATime2, accordionStyles2, accordionTitleStyles2, openGridItemOrder2, accordionDetailStyles2, index2);
+          }, "Accordion_component_div_Fragment_div_onClick_VtzhhJnK0XI", [
+            accordionDetailStyles,
+            accordionStyles,
+            accordionTitleStyles,
+            index,
+            onlyOneAtATime,
+            openGridItemOrder,
+            props,
+            state
+          ]),
+          style: {
+            ...accordionTitleStyles.value,
+            width: props.grid ? props.gridRowWidth : void 0,
+            order: openGridItemOrder.value !== null ? convertOrderNumberToString(index) : convertOrderNumberToString(index + 1)
+          }
+        }, null, /* @__PURE__ */ _jsxC(Blocks, {
+          get blocks() {
+            return item.title;
+          },
+          path: `items.${index}.title`,
+          get parent() {
+            return props.builderBlock.id;
+          },
+          get context() {
+            return props.builderContext;
+          },
+          get registeredComponents() {
+            return props.builderComponents;
+          },
+          get linkComponent() {
+            return props.builderLinkComponent;
+          },
+          [_IMMUTABLE]: {
+            blocks: _wrapProp(item, "title"),
+            context: _fnSignal((p0) => p0.builderContext, [
+              props
+            ], "p0.builderContext"),
+            linkComponent: _fnSignal((p0) => p0.builderLinkComponent, [
+              props
+            ], "p0.builderLinkComponent"),
+            parent: _fnSignal((p0) => p0.builderBlock.id, [
+              props
+            ], "p0.builderBlock.id"),
+            registeredComponents: _fnSignal((p0) => p0.builderComponents, [
+              props
+            ], "p0.builderComponents")
+          }
+        }, 3, "hf_0"), 0, null),
+        state.open.includes(index) ? /* @__PURE__ */ _jsxQ("div", {
+          class: getAccordionDetailClassName(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index)
+        }, {
+          style: _fnSignal((p0) => p0.value, [
+            accordionDetailStyles
+          ], "p0.value")
+        }, /* @__PURE__ */ _jsxC(Blocks, {
+          get blocks() {
+            return item.detail;
+          },
+          path: `items.${index}.detail`,
+          get parent() {
+            return props.builderBlock.id;
+          },
+          get context() {
+            return props.builderContext;
+          },
+          get registeredComponents() {
+            return props.builderComponents;
+          },
+          get linkComponent() {
+            return props.builderLinkComponent;
+          },
+          [_IMMUTABLE]: {
+            blocks: _wrapProp(item, "detail"),
+            context: _fnSignal((p0) => p0.builderContext, [
+              props
+            ], "p0.builderContext"),
+            linkComponent: _fnSignal((p0) => p0.builderLinkComponent, [
+              props
+            ], "p0.builderLinkComponent"),
+            parent: _fnSignal((p0) => p0.builderBlock.id, [
+              props
+            ], "p0.builderBlock.id"),
+            registeredComponents: _fnSignal((p0) => p0.builderComponents, [
+              props
+            ], "p0.builderComponents")
+          }
+        }, 3, "hf_1"), 1, "hf_2") : null
+      ]
+    }, 1, "hf_3");
+  }), 1, "hf_4");
+}, "Accordion_component_jkuUCHm0nt0"));
+export {
+  Accordion,
+  Accordion as default,
+  getAccordionDetailClassName,
+  getAccordionTitleClassName,
+  onClick
+};

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

@@ -0,0 +1,159 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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
+  }
+};
+exports.componentInfo = componentInfo;