@builder.io/sdk-solid 0.0.5 → 0.0.8-0

package/src/blocks/form.js

@@ -1,355 +0,0 @@
-import { template as _$template } from "solid-js/web";
-import { setAttribute as _$setAttribute } from "solid-js/web";
-import { effect as _$effect } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
-import { spread as _$spread } from "solid-js/web";
-
-const _tmpl$ = /*#__PURE__*/_$template(`<pre></pre>`, 2),
-      _tmpl$2 = /*#__PURE__*/_$template(`<form></form>`, 2);
-
-import { Show, For } from "solid-js";
-import { createMutable } from "solid-js/store";
-import { css } from "solid-styled-components";
-import RenderBlock from "../components/render-block";
-export default function FormComponent(props) {
-  const state = createMutable({
-    state: "unsubmitted",
-    responseData: null,
-    formErrorMessage: "",
-
-    get submissionState() {
-      return Builder.isEditing && props.previewState || state.state;
-    },
-
-    onSubmit(event) {
-      const sendWithJs = props.sendWithJs || props.sendSubmissionsTo === "email";
-
-      if (props.sendSubmissionsTo === "zapier") {
-        event.preventDefault();
-      } else if (sendWithJs) {
-        if (!(props.action || props.sendSubmissionsTo === "email")) {
-          event.preventDefault();
-          return;
-        }
-
-        event.preventDefault();
-        const el = event.currentTarget;
-        const headers = props.customHeaders || {};
-        let body;
-        const formData = new FormData(el); // TODO: maybe support null
-
-        const formPairs = Array.from(event.currentTarget.querySelectorAll("input,select,textarea")).filter(el => !!el.name).map(el => {
-          let value;
-          const key = el.name;
-
-          if (el instanceof HTMLInputElement) {
-            if (el.type === "radio") {
-              if (el.checked) {
-                value = el.name;
-                return {
-                  key,
-                  value
-                };
-              }
-            } else if (el.type === "checkbox") {
-              value = el.checked;
-            } else if (el.type === "number" || el.type === "range") {
-              const num = el.valueAsNumber;
-
-              if (!isNaN(num)) {
-                value = num;
-              }
-            } else if (el.type === "file") {
-              // TODO: one vs multiple files
-              value = el.files;
-            } else {
-              value = el.value;
-            }
-          } else {
-            value = el.value;
-          }
-
-          return {
-            key,
-            value
-          };
-        });
-        let contentType = props.contentType;
-
-        if (props.sendSubmissionsTo === "email") {
-          contentType = "multipart/form-data";
-        }
-
-        Array.from(formPairs).forEach(({
-          value
-        }) => {
-          if (value instanceof File || Array.isArray(value) && value[0] instanceof File || value instanceof FileList) {
-            contentType = "multipart/form-data";
-          }
-        }); // TODO: send as urlEncoded or multipart by default
-        // because of ease of use and reliability in browser API
-        // for encoding the form?
-
-        if (contentType !== "application/json") {
-          body = formData;
-        } else {
-          // Json
-          const json = {};
-          Array.from(formPairs).forEach(({
-            value,
-            key
-          }) => {
-            set(json, key, value);
-          });
-          body = JSON.stringify(json);
-        }
-
-        if (contentType && contentType !== "multipart/form-data") {
-          if (
-          /* Zapier doesn't allow content-type header to be sent from browsers */
-          !(sendWithJs && props.action?.includes("zapier.com"))) {
-            headers["content-type"] = contentType;
-          }
-        }
-
-        const presubmitEvent = new CustomEvent("presubmit", {
-          detail: {
-            body
-          }
-        });
-
-        if (formRef) {
-          formRef.dispatchEvent(presubmitEvent);
-
-          if (presubmitEvent.defaultPrevented) {
-            return;
-          }
-        }
-
-        state.state = "sending";
-        const formUrl = `${builder.env === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${builder.apiKey}&to=${btoa(props.sendSubmissionsToEmail || "")}&name=${encodeURIComponent(props.name || "")}`;
-        fetch(props.sendSubmissionsTo === "email" ? formUrl : props.action,
-        /* TODO: throw error if no action URL */
-        {
-          body,
-          headers,
-          method: props.method || "post"
-        }).then(async res => {
-          let body;
-          const contentType = res.headers.get("content-type");
-
-          if (contentType && contentType.indexOf("application/json") !== -1) {
-            body = await res.json();
-          } else {
-            body = await res.text();
-          }
-
-          if (!res.ok && props.errorMessagePath) {
-            /* TODO: allow supplying an error formatter function */
-            let message = get(body, props.errorMessagePath);
-
-            if (message) {
-              if (typeof message !== "string") {
-                /* TODO: ideally convert json to yaml so it woul dbe like
-                error: - email has been taken */
-                message = JSON.stringify(message);
-              }
-
-              state.formErrorMessage = message;
-            }
-          }
-
-          state.responseData = body;
-          state.state = res.ok ? "success" : "error";
-
-          if (res.ok) {
-            const submitSuccessEvent = new CustomEvent("submit:success", {
-              detail: {
-                res,
-                body
-              }
-            });
-
-            if (formRef) {
-              formRef.dispatchEvent(submitSuccessEvent);
-
-              if (submitSuccessEvent.defaultPrevented) {
-                return;
-              }
-              /* TODO: option to turn this on/off? */
-
-
-              if (props.resetFormOnSubmit !== false) {
-                formRef.reset();
-              }
-            }
-            /* TODO: client side route event first that can be preventDefaulted */
-
-
-            if (props.successUrl) {
-              if (formRef) {
-                const event = new CustomEvent("route", {
-                  detail: {
-                    url: props.successUrl
-                  }
-                });
-                formRef.dispatchEvent(event);
-
-                if (!event.defaultPrevented) {
-                  location.href = props.successUrl;
-                }
-              } else {
-                location.href = props.successUrl;
-              }
-            }
-          }
-        }, err => {
-          const submitErrorEvent = new CustomEvent("submit:error", {
-            detail: {
-              error: err
-            }
-          });
-
-          if (formRef) {
-            formRef.dispatchEvent(submitErrorEvent);
-
-            if (submitErrorEvent.defaultPrevented) {
-              return;
-            }
-          }
-
-          state.responseData = err;
-          state.state = "error";
-        });
-      }
-    }
-
-  });
-  const formRef = useRef();
-  return (() => {
-    const _el$ = _tmpl$2.cloneNode(true);
-
-    _el$.addEventListener("submit", event => state.onSubmit(event));
-
-    formRef(_el$);
-
-    _$spread(_el$, () => props.attributes, false, true);
-
-    _$insert(_el$, _$createComponent(Show, {
-      get when() {
-        return props.builderBlock && props.builderBlock.children;
-      },
-
-      get children() {
-        return _$createComponent(For, {
-          get each() {
-            return props.builderBlock?.children;
-          },
-
-          children: (block, index) => _$createComponent(RenderBlock, {
-            block: block
-          })
-        });
-      }
-
-    }), null);
-
-    _$insert(_el$, _$createComponent(Show, {
-      get when() {
-        return state.submissionState === "error";
-      },
-
-      get children() {
-        return _$createComponent(BuilderBlocks, {
-          dataPath: "errorMessage",
-
-          get blocks() {
-            return props.errorMessage;
-          }
-
-        });
-      }
-
-    }), null);
-
-    _$insert(_el$, _$createComponent(Show, {
-      get when() {
-        return state.submissionState === "sending";
-      },
-
-      get children() {
-        return _$createComponent(BuilderBlocks, {
-          dataPath: "sendingMessage",
-
-          get blocks() {
-            return props.sendingMessage;
-          }
-
-        });
-      }
-
-    }), null);
-
-    _$insert(_el$, _$createComponent(Show, {
-      get when() {
-        return state.submissionState === "error" && state.responseData;
-      },
-
-      get children() {
-        const _el$2 = _tmpl$.cloneNode(true);
-
-        _$insert(_el$2, () => JSON.stringify(state.responseData, null, 2));
-
-        _$effect(() => _el$2.className = css({
-          padding: "10px",
-          color: "red",
-          textAlign: "center"
-        }));
-
-        return _el$2;
-      }
-
-    }), null);
-
-    _$insert(_el$, _$createComponent(Show, {
-      get when() {
-        return state.submissionState === "success";
-      },
-
-      get children() {
-        return _$createComponent(BuilderBlocks, {
-          dataPath: "successMessage",
-
-          get blocks() {
-            return props.successMessage;
-          }
-
-        });
-      }
-
-    }), null);
-
-    _$effect(_p$ => {
-      const _v$ = props.validate,
-            _v$2 = !props.sendWithJs && props.action,
-            _v$3 = props.method,
-            _v$4 = props.name;
-
-      _v$ !== _p$._v$ && _$setAttribute(_el$, "validate", _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && _$setAttribute(_el$, "action", _p$._v$2 = _v$2);
-      _v$3 !== _p$._v$3 && _$setAttribute(_el$, "method", _p$._v$3 = _v$3);
-      _v$4 !== _p$._v$4 && _$setAttribute(_el$, "name", _p$._v$4 = _v$4);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined,
-      _v$3: undefined,
-      _v$4: undefined
-    });
-
-    return _el$;
-  })();
-}import { registerComponent } from '../functions/register-component';
-registerComponent(FormComponent, {name:'Form:Form',builtIn:true,defaults:{responsiveStyles:{large:{marginTop:'15px',paddingBottom:'15px'}}},image:'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5',inputs:[{name:'sendSubmissionsTo',type:'string',enum:[{label:'Send to email',value:'email',helperText:'Send form submissions to the email address of your choosing'},{label:'Custom',value:'custom',helperText:'Handle where the form requests go manually with a little code, e.g. to your own custom backend'}],defaultValue:'email'},{name:'sendSubmissionsToEmail',type:'string',required:true,defaultValue:'your@email.com',showIf:'options.get("sendSubmissionsTo") === "email"'},{name:'sendWithJs',type:'boolean',helperText:'Set to false to use basic html form action',defaultValue:true,showIf:'options.get("sendSubmissionsTo") === "custom"'},{name:'name',type:'string',defaultValue:'My form'},{name:'action',type:'string',helperText:'URL to send the form data to',showIf:'options.get("sendSubmissionsTo") === "custom"'},{name:'contentType',type:'string',defaultValue:'application/json',advanced:true,enum:['application/json','multipart/form-data','application/x-www-form-urlencoded'],showIf:'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'},{name:'method',type:'string',showIf:'options.get("sendSubmissionsTo") === "custom"',defaultValue:'POST',advanced:true},{name:'previewState',type:'string',enum:['unsubmitted','sending','success','error'],defaultValue:'unsubmitted',helperText:'Choose a state to edit, e.g. choose "success" to show what users see on success and edit the message',showIf:'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'},{name:'successUrl',type:'url',helperText:'Optional URL to redirect the user to on form submission success',showIf:'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'},{name:'resetFormOnSubmit',type:'boolean',showIf:"options.get('sendSubmissionsTo') === 'custom' && options.get('sendWithJs') === true",advanced:true},{name:'successMessage',type:'uiBlocks',hideFromUI:true,defaultValue:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Text',options:{text:'<span>Thanks!</span>'}}}]},{name:'validate',type:'boolean',defaultValue:true,advanced:true},{name:'errorMessagePath',type:'text',advanced:true,helperText:'Path to where to get the error message from in a JSON response to display to the user, e.g. "error.message" for a response like { "error": { "message": "this username is taken" }}'},{name:'errorMessage',type:'uiBlocks',hideFromUI:true,defaultValue:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},bindings:{'component.options.text':'state.formErrorMessage || block.component.options.text'},component:{name:'Text',options:{text:'<span>Form submission error :( Please check your answers and try again</span>'}}}]},{name:'sendingMessage',type:'uiBlocks',hideFromUI:true,defaultValue:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Text',options:{text:'<span>Sending...</span>'}}}]},{name:'customHeaders',type:'map',valueType:{type:'string'},advanced:true,showIf:'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'}],noWrap:true,canHaveChildren:true,defaultChildren:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Text',options:{text:'<span>Enter your name</span>'}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Form:Input',options:{name:'name',placeholder:'Jane Doe'}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Text',options:{text:'<span>Enter your email</span>'}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Form:Input',options:{name:'email',placeholder:'jane@doe.com'}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Form:SubmitButton',options:{text:'Submit'}}}]});

package/src/blocks/fragment.js

@@ -1,15 +0,0 @@
-import { template as _$template } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
-
-const _tmpl$ = /*#__PURE__*/_$template(`<span></span>`, 2);
-
-export default function FragmentComponent(props) {
-  return (() => {
-    const _el$ = _tmpl$.cloneNode(true);
-
-    _$insert(_el$, () => props.children);
-
-    return _el$;
-  })();
-}import { registerComponent } from '../functions/register-component';
-registerComponent(FragmentComponent, {name:'Fragment',static:true,hidden:true,builtIn:true,canHaveChildren:true,noWrap:true});

package/src/blocks/fragment.lite.tsx

@@ -1,3 +0,0 @@
-export default function FragmentComponent(props) {
-  return <span>{props.children}</span>;
-}

package/src/blocks/image.js

@@ -1,211 +0,0 @@
-import { template as _$template } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
-import { setAttribute as _$setAttribute } from "solid-js/web";
-import { effect as _$effect } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
-
-const _tmpl$ = /*#__PURE__*/_$template(`<source type="image/webp">`, 1),
-      _tmpl$2 = /*#__PURE__*/_$template(`<div> </div>`, 2),
-      _tmpl$3 = /*#__PURE__*/_$template(`<div></div>`, 2),
-      _tmpl$4 = /*#__PURE__*/_$template(`<div><picture><img loading="lazy"></picture></div>`, 5);
-
-import { Show } from "solid-js";
-import { createMutable } from "solid-js/store";
-import { css } from "solid-styled-components";
-export default function Image(props) {
-  const state = createMutable({
-    updateQueryParam: function updateQueryParam(uri = "", key, value) {
-      const re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
-      const separator = uri.indexOf("?") !== -1 ? "&" : "?";
-
-      if (uri.match(re)) {
-        return uri.replace(re, "$1" + key + "=" + encodeURIComponent(value) + "$2");
-      }
-
-      return uri + separator + key + "=" + encodeURIComponent(value);
-    },
-    removeProtocol: function removeProtocol(path) {
-      return path.replace(/http(s)?:/, "");
-    },
-    getShopifyImageUrl: function getShopifyImageUrl(src, size) {
-      if (!src || !src?.match(/cdn\.shopify\.com/) || !size) {
-        return src;
-      }
-
-      if (size === "master") {
-        return state.removeProtocol(src);
-      }
-
-      const match = src.match(/(_\d+x(\d+)?)?(\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?)/i);
-
-      if (match) {
-        const prefix = src.split(match[0]);
-        const suffix = match[3];
-        const useSize = size.match("x") ? size : `${size}x`;
-        return state.removeProtocol(`${prefix[0]}_${useSize}${suffix}`);
-      }
-
-      return null;
-    },
-    getSrcSet: function getSrcSet(url) {
-      if (!url) {
-        return url;
-      }
-
-      const sizes = [100, 200, 400, 800, 1200, 1600, 2000];
-
-      if (url.match(/builder\.io/)) {
-        let srcUrl = url;
-        const widthInSrc = Number(url.split("?width=")[1]);
-
-        if (!isNaN(widthInSrc)) {
-          srcUrl = `${srcUrl} ${widthInSrc}w`;
-        }
-
-        return sizes.filter(size => size !== widthInSrc).map(size => `${state.updateQueryParam(url, "width", size)} ${size}w`).concat([srcUrl]).join(", ");
-      }
-
-      if (url.match(/cdn\.shopify\.com/)) {
-        return sizes.map(size => [state.getShopifyImageUrl(url, `${size}x${size}`), size]).filter(([sizeUrl]) => !!sizeUrl).map(([sizeUrl, size]) => `${sizeUrl} ${size}w`).concat([url]).join(", ");
-      }
-
-      return url;
-    },
-    useSrcSet: function useSrcSet() {
-      return props.srcset || state.getSrcSet(props.image) || "";
-    }
-  });
-  return (() => {
-    const _el$ = _tmpl$4.cloneNode(true),
-          _el$2 = _el$.firstChild,
-          _el$3 = _el$2.firstChild;
-
-    _$insert(_el$2, _$createComponent(Show, {
-      get when() {
-        return _$memo(() => !!!props.noWebp, true)() && state.useSrcSet().includes("builder.io");
-      },
-
-      get children() {
-        const _el$4 = _tmpl$.cloneNode(true);
-
-        _$effect(() => _$setAttribute(_el$4, "srcset", state.useSrcSet().replace(/\?/g, "?format=webp&")));
-
-        return _el$4;
-      }
-
-    }), null);
-
-    _$insert(_el$, _$createComponent(Show, {
-      get when() {
-        return props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length);
-      },
-
-      get children() {
-        const _el$5 = _tmpl$2.cloneNode(true);
-
-        _$effect(_p$ => {
-          const _v$ = css({
-            width: "100%",
-            pointerEvents: "none",
-            fontSize: "0"
-          }),
-                _v$2 = props.aspectRatio * 100 + "%";
-
-          _v$ !== _p$._v$ && (_el$5.className = _p$._v$ = _v$);
-          _v$2 !== _p$._v$2 && _el$5.style.setProperty("padding-top", _p$._v$2 = _v$2);
-          return _p$;
-        }, {
-          _v$: undefined,
-          _v$2: undefined
-        });
-
-        return _el$5;
-      }
-
-    }), null);
-
-    _$insert(_el$, _$createComponent(Show, {
-      get when() {
-        return props.builderBlock?.children?.length && props.fitContent;
-      },
-
-      get children() {
-        return props.children;
-      }
-
-    }), null);
-
-    _$insert(_el$, _$createComponent(Show, {
-      get when() {
-        return !props.fitContent;
-      },
-
-      get children() {
-        const _el$6 = _tmpl$3.cloneNode(true);
-
-        _$insert(_el$6, () => props.children);
-
-        _$effect(() => _el$6.className = css({
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "stretch",
-          position: "absolute",
-          top: "0",
-          left: "0",
-          width: "100%",
-          height: "100%"
-        }));
-
-        return _el$6;
-      }
-
-    }), null);
-
-    _$effect(_p$ => {
-      const _v$3 = css({
-        position: "relative"
-      }),
-            _v$4 = "builder-image" + (props.class ? " " + props.class : "") + " " + css({
-        opacity: "1",
-        transition: "opacity 0.2s ease-in-out",
-        position: "absolute",
-        height: "100%",
-        width: "100%",
-        top: "0px",
-        left: "0px"
-      }),
-            _v$5 = props.altText,
-            _v$6 = props.altText ? "presentation" : undefined,
-            _v$7 = props.backgroundSize || "center",
-            _v$8 = props.backgroundSize || "cover",
-            _v$9 = props.image,
-            _v$10 = props.srcset || state.getSrcSet(props.image),
-            _v$11 = props.sizes;
-
-      _v$3 !== _p$._v$3 && (_el$.className = _p$._v$3 = _v$3);
-      _v$4 !== _p$._v$4 && (_el$3.className = _p$._v$4 = _v$4);
-      _v$5 !== _p$._v$5 && _$setAttribute(_el$3, "alt", _p$._v$5 = _v$5);
-      _v$6 !== _p$._v$6 && _$setAttribute(_el$3, "aria-role", _p$._v$6 = _v$6);
-      _v$7 !== _p$._v$7 && _el$3.style.setProperty("object-position", _p$._v$7 = _v$7);
-      _v$8 !== _p$._v$8 && _el$3.style.setProperty("object-fit", _p$._v$8 = _v$8);
-      _v$9 !== _p$._v$9 && _$setAttribute(_el$3, "src", _p$._v$9 = _v$9);
-      _v$10 !== _p$._v$10 && _$setAttribute(_el$3, "srcset", _p$._v$10 = _v$10);
-      _v$11 !== _p$._v$11 && _$setAttribute(_el$3, "sizes", _p$._v$11 = _v$11);
-      return _p$;
-    }, {
-      _v$3: undefined,
-      _v$4: undefined,
-      _v$5: undefined,
-      _v$6: undefined,
-      _v$7: undefined,
-      _v$8: undefined,
-      _v$9: undefined,
-      _v$10: undefined,
-      _v$11: undefined
-    });
-
-    return _el$;
-  })();
-}import { registerComponent } from '../functions/register-component';
-registerComponent(Image, {name:'Image',static:true,builtIn:true,image:'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4',defaultStyles:{position:'relative',minHeight:'20px',minWidth:'20px',overflow:'hidden'},canHaveChildren:true,inputs:[{name:'image',type:'file',bubble:true,allowedFileTypes:['jpeg','jpg','png','svg'],required:true,defaultValue:'https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',onChange:"        const DEFAULT_ASPECT_RATIO = 0.7041;        options.delete('srcset');        options.delete('noWebp');        function loadImage(url, timeout) {          return new Promise((resolve, reject) => {            const img = document.createElement('img');            let loaded = false;            img.onload = () => {              loaded = true;              resolve(img);            };            img.addEventListener('error', event => {              console.warn('Image load failed', event.error);              reject(event.error);            });            img.src = url;            setTimeout(() => {              if (!loaded) {                reject(new Error('Image load timed out'));              }            }, timeout);          });        }        function round(num) {          return Math.round(num * 1000) / 1000;        }        const value = options.get('image');        const aspectRatio = options.get('aspectRatio');        // For SVG images - don't render as webp, keep them as SVG        fetch(value)          .then(res => res.blob())          .then(blob => {            if (blob.type.includes('svg')) {              options.set('noWebp', true);            }          });        if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO)) {          return loadImage(value).then(img => {            const possiblyUpdatedAspectRatio = options.get('aspectRatio');            if (              options.get('image') === value &&              (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)            ) {              if (img.width && img.height) {                options.set('aspectRatio', round(img.height / img.width));                options.set('height', img.height);                options.set('width', img.width);              }            }          });        }"},{name:'backgroundSize',type:'text',defaultValue:'cover',enum:[{label:'contain',value:'contain',helperText:'The image should never get cropped'},{label:'cover',value:'cover',helperText:"The image should fill it's box, cropping when needed"}]},{name:'backgroundPosition',type:'text',defaultValue:'center',enum:['center','top','left','right','bottom','top left','top right','bottom left','bottom right']},{name:'altText',type:'string',helperText:'Text to display when the user has images off'},{name:'height',type:'number',hideFromUI:true},{name:'width',type:'number',hideFromUI:true},{name:'sizes',type:'string',hideFromUI:true},{name:'srcset',type:'string',hideFromUI:true},{name:'lazy',type:'boolean',defaultValue:true,hideFromUI:true},{name:'fitContent',type:'boolean',helperText:"When child blocks are provided, fit to them instead of using the image's aspect ratio",defaultValue:true},{name:'aspectRatio',type:'number',helperText:"This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",advanced:true,defaultValue:0.7041}]});