@webiny/app-website-builder 6.0.0-alpha.0

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Padding.js

@@ -0,0 +1,138 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { LinkedEditing } from "./LinkedEditing";
+import { useStyles } from "../../useStyles";
+import { ValueSelector } from "../../ValueSelector";
+import { useStyleValue } from "../../useStyleValue";
+import { UnitsOptions } from "../../UnitsOptions";
+const widthOptions = UnitsOptions.widthUnits().getOptions();
+const heightOptions = UnitsOptions.heightUnits().getOptions();
+export const Padding = observer(({
+  elementId
+}) => {
+  const {
+    onChange,
+    onPreviewChange,
+    metadata
+  } = useStyles(elementId);
+  const paddingTop = useStyleValue(elementId, "paddingTop");
+  const paddingRight = useStyleValue(elementId, "paddingRight");
+  const paddingBottom = useStyleValue(elementId, "paddingBottom");
+  const paddingLeft = useStyleValue(elementId, "paddingLeft");
+  const linked = metadata.get("paddingLinkedEditing") ?? true;
+  const onToggleLinkedEditing = linked => {
+    onChange(({
+      styles,
+      metadata
+    }) => {
+      if (linked) {
+        const value = `${paddingTop.value ?? 0}${paddingTop.unit}`;
+        styles.set("paddingRight", value);
+        styles.set("paddingBottom", value);
+        styles.set("paddingLeft", value);
+      }
+      metadata.set("paddingLinkedEditing", linked);
+    });
+  };
+  const onPaddingTopChange = value => {
+    if (linked) {
+      onChange(({
+        styles
+      }) => {
+        styles.set("paddingTop", value);
+        styles.set("paddingRight", value);
+        styles.set("paddingBottom", value);
+        styles.set("paddingLeft", value);
+      });
+    } else {
+      paddingTop.onChange(value);
+    }
+  };
+  const onPaddingTopPreviewChange = value => {
+    if (linked) {
+      onPreviewChange(({
+        styles
+      }) => {
+        styles.set("paddingTop", value);
+        styles.set("paddingRight", value);
+        styles.set("paddingBottom", value);
+        styles.set("paddingLeft", value);
+      });
+    } else {
+      paddingTop.onChangePreview(value);
+    }
+  };
+  const onReset = () => {
+    if (linked) {
+      onChange(({
+        styles
+      }) => {
+        styles.unset("paddingTop");
+        styles.unset("paddingRight");
+        styles.unset("paddingBottom");
+        styles.unset("paddingLeft");
+      });
+    } else {
+      paddingTop.onReset();
+    }
+  };
+  const rowClassname = "wby-flex wby-flex-row wby-w-full wby-justify-center wby-items-center wby-py-[4px]";
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-flex-col wby-items-center wby-bg-neutral-muted wby-border-sm wby-border-neutral-muted wby-relative wby-rounded-md"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "wby-absolute wby-text-sm",
+    style: {
+      top: 3,
+      left: 5
+    }
+  }, "Padding"), /*#__PURE__*/React.createElement(LinkedEditing, {
+    linked: linked,
+    onToggle: onToggleLinkedEditing
+  }), /*#__PURE__*/React.createElement("div", {
+    className: rowClassname,
+    style: {
+      paddingTop: "8px"
+    }
+  }, /*#__PURE__*/React.createElement(ValueSelector, Object.assign({
+    label: "Top padding"
+  }, paddingTop, {
+    onReset: onReset,
+    units: heightOptions,
+    onChange: onPaddingTopChange,
+    onChangePreview: onPaddingTopPreviewChange
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: rowClassname,
+    style: {
+      width: 168,
+      paddingTop: "8px"
+    }
+  }, /*#__PURE__*/React.createElement(ValueSelector, Object.assign({
+    label: "Left padding"
+  }, paddingLeft, {
+    units: widthOptions,
+    disabled: linked
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-border-sm wby-border-neutral-muted wby-bg-neutral-light wby-rounded-md wby-items-center wby-justify-center",
+    style: {
+      width: 170,
+      height: 30
+    }
+  }, "-"), /*#__PURE__*/React.createElement(ValueSelector, Object.assign({
+    label: "Right padding"
+  }, paddingRight, {
+    units: widthOptions,
+    disabled: linked
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: rowClassname,
+    style: {
+      padding: "8px 0"
+    }
+  }, /*#__PURE__*/React.createElement(ValueSelector, Object.assign({
+    label: "Bottom padding"
+  }, paddingBottom, {
+    units: heightOptions,
+    disabled: linked
+  }))));
+});
+
+//# sourceMappingURL=Padding.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding/Padding.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","observer","LinkedEditing","useStyles","ValueSelector","useStyleValue","UnitsOptions","widthOptions","widthUnits","getOptions","heightOptions","heightUnits","Padding","elementId","onChange","onPreviewChange","metadata","paddingTop","paddingRight","paddingBottom","paddingLeft","linked","get","onToggleLinkedEditing","styles","value","unit","set","onPaddingTopChange","onPaddingTopPreviewChange","onChangePreview","onReset","unset","rowClassname","createElement","className","style","top","left","onToggle","Object","assign","label","units","width","disabled","height","padding"],"sources":["Padding.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { LinkedEditing } from \"./LinkedEditing\";\nimport { useStyles } from \"../../useStyles\";\nimport { ValueSelector } from \"../../ValueSelector\";\nimport { useStyleValue } from \"../../useStyleValue\";\nimport { UnitsOptions } from \"../../UnitsOptions\";\n\nconst widthOptions = UnitsOptions.widthUnits().getOptions();\nconst heightOptions = UnitsOptions.heightUnits().getOptions();\n\ninterface PaddingProps {\n    elementId: string;\n}\n\nexport const Padding = observer(({ elementId }: PaddingProps) => {\n    const { onChange, onPreviewChange, metadata } = useStyles(elementId);\n\n    const paddingTop = useStyleValue(elementId, \"paddingTop\");\n    const paddingRight = useStyleValue(elementId, \"paddingRight\");\n    const paddingBottom = useStyleValue(elementId, \"paddingBottom\");\n    const paddingLeft = useStyleValue(elementId, \"paddingLeft\");\n\n    const linked = metadata.get<boolean>(\"paddingLinkedEditing\") ?? true;\n\n    const onToggleLinkedEditing = (linked: boolean) => {\n        onChange(({ styles, metadata }) => {\n            if (linked) {\n                const value = `${paddingTop.value ?? 0}${paddingTop.unit}`;\n                styles.set(\"paddingRight\", value);\n                styles.set(\"paddingBottom\", value);\n                styles.set(\"paddingLeft\", value);\n            }\n            metadata.set(\"paddingLinkedEditing\", linked);\n        });\n    };\n\n    const onPaddingTopChange = (value: string) => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.set(\"paddingTop\", value);\n                styles.set(\"paddingRight\", value);\n                styles.set(\"paddingBottom\", value);\n                styles.set(\"paddingLeft\", value);\n            });\n        } else {\n            paddingTop.onChange(value);\n        }\n    };\n\n    const onPaddingTopPreviewChange = (value: string) => {\n        if (linked) {\n            onPreviewChange(({ styles }) => {\n                styles.set(\"paddingTop\", value);\n                styles.set(\"paddingRight\", value);\n                styles.set(\"paddingBottom\", value);\n                styles.set(\"paddingLeft\", value);\n            });\n        } else {\n            paddingTop.onChangePreview(value);\n        }\n    };\n\n    const onReset = () => {\n        if (linked) {\n            onChange(({ styles }) => {\n                styles.unset(\"paddingTop\");\n                styles.unset(\"paddingRight\");\n                styles.unset(\"paddingBottom\");\n                styles.unset(\"paddingLeft\");\n            });\n        } else {\n            paddingTop.onReset();\n        }\n    };\n\n    const rowClassname =\n        \"wby-flex wby-flex-row wby-w-full wby-justify-center wby-items-center wby-py-[4px]\";\n\n    return (\n        <div className=\"wby-flex wby-flex-col wby-items-center wby-bg-neutral-muted wby-border-sm wby-border-neutral-muted wby-relative wby-rounded-md\">\n            <span className=\"wby-absolute wby-text-sm\" style={{ top: 3, left: 5 }}>\n                Padding\n            </span>\n\n            <LinkedEditing linked={linked} onToggle={onToggleLinkedEditing} />\n\n            {/* Top Padding */}\n            <div className={rowClassname} style={{ paddingTop: \"8px\" }}>\n                <ValueSelector\n                    label={\"Top padding\"}\n                    {...paddingTop}\n                    onReset={onReset}\n                    units={heightOptions}\n                    onChange={onPaddingTopChange}\n                    onChangePreview={onPaddingTopPreviewChange}\n                />\n            </div>\n\n            {/* Center Row (Left Padding + Content + Right Padding) */}\n            <div className={rowClassname} style={{ width: 168, paddingTop: \"8px\" }}>\n                <ValueSelector\n                    label={\"Left padding\"}\n                    {...paddingLeft}\n                    units={widthOptions}\n                    disabled={linked}\n                />\n                <div\n                    className=\"wby-flex wby-border-sm wby-border-neutral-muted wby-bg-neutral-light wby-rounded-md wby-items-center wby-justify-center\"\n                    style={{ width: 170, height: 30 }}\n                >\n                    -\n                </div>\n                <ValueSelector\n                    label={\"Right padding\"}\n                    {...paddingRight}\n                    units={widthOptions}\n                    disabled={linked}\n                />\n            </div>\n\n            {/* Bottom Padding */}\n            <div className={rowClassname} style={{ padding: \"8px 0\" }}>\n                <ValueSelector\n                    label={\"Bottom padding\"}\n                    {...paddingBottom}\n                    units={heightOptions}\n                    disabled={linked}\n                />\n            </div>\n        </div>\n    );\n});\n"],"mappings":"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","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface MarginPaddingProps {
+    elementId: string;
+}
+export declare const MarginPadding: ({ elementId }: MarginPaddingProps) => React.JSX.Element;
+export {};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { MarginPaddingControl } from "./MarginPadding/MarginPadding";
+export const MarginPadding = ({
+  elementId
+}) => {
+  return /*#__PURE__*/React.createElement(Accordion.Item, {
+    title: "Margin & Padding",
+    description: "Set spacing in and around the element"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 280,
+      marginLeft: -8
+    }
+  }, /*#__PURE__*/React.createElement(MarginPaddingControl, {
+    elementId: elementId
+  })));
+};
+
+//# sourceMappingURL=MarginPadding.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/MarginPadding.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Accordion","MarginPaddingControl","MarginPadding","elementId","createElement","Item","title","description","style","width","marginLeft"],"sources":["MarginPadding.tsx"],"sourcesContent":["import React from \"react\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport { MarginPaddingControl } from \"./MarginPadding/MarginPadding\";\n\ninterface MarginPaddingProps {\n    elementId: string;\n}\n\nexport const MarginPadding = ({ elementId }: MarginPaddingProps) => {\n    return (\n        <Accordion.Item title={\"Margin & Padding\"} description={\"Set spacing in and around the element\"}>\n            <div style={{ width: 280, marginLeft: -8 }}>\n                <MarginPaddingControl elementId={elementId} />\n            </div>\n        </Accordion.Item>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,oBAAoB;AAM7B,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC;AAA8B,CAAC,KAAK;EAChE,oBACIJ,KAAA,CAAAK,aAAA,CAACJ,SAAS,CAACK,IAAI;IAACC,KAAK,EAAE,kBAAmB;IAACC,WAAW,EAAE;EAAwC,gBAC5FR,KAAA,CAAAK,aAAA;IAAKI,KAAK,EAAE;MAAEC,KAAK,EAAE,GAAG;MAAEC,UAAU,EAAE,CAAC;IAAE;EAAE,gBACvCX,KAAA,CAAAK,aAAA,CAACH,oBAAoB;IAACE,SAAS,EAAEA;EAAU,CAAE,CAC5C,CACO,CAAC;AAEzB,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Visibility/Visibility.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface VisibilityProps {
+    elementId: string;
+}
+export declare const Visibility: (({ elementId }: VisibilityProps) => React.JSX.Element) & {
+    displayName: string;
+};

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Visibility/Visibility.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { Switch } from "@webiny/admin-ui";
+import { useStyles } from "../../useStyles";
+import { InheritanceLabel } from "../../../InheritanceLabel";
+export const Visibility = observer(({
+  elementId
+}) => {
+  const {
+    styles,
+    onChange,
+    inheritanceMap
+  } = useStyles(elementId);
+  const isVisible = styles.display !== "none";
+  const toggleVisibility = isHidden => {
+    onChange(({
+      styles
+    }) => {
+      styles.set("display", isHidden ? "none" : "flex");
+    });
+  };
+  const onReset = () => {
+    onChange(({
+      styles
+    }) => {
+      styles.unset("display");
+    });
+  };
+  const inheritance = inheritanceMap.display ?? {};
+  return /*#__PURE__*/React.createElement(Switch, {
+    label: /*#__PURE__*/React.createElement(InheritanceLabel, {
+      onReset: onReset,
+      isOverridden: inheritance?.overridden ?? false,
+      inheritedFrom: inheritance?.inheritedFrom,
+      text: "Hide element"
+    }),
+    checked: !isVisible,
+    onChange: toggleVisibility
+  });
+});
+
+//# sourceMappingURL=Visibility.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Visibility/Visibility.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","observer","Switch","useStyles","InheritanceLabel","Visibility","elementId","styles","onChange","inheritanceMap","isVisible","display","toggleVisibility","isHidden","set","onReset","unset","inheritance","createElement","label","isOverridden","overridden","inheritedFrom","text","checked"],"sources":["Visibility.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Switch } from \"@webiny/admin-ui\";\nimport { useStyles } from \"~/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles\";\nimport { InheritanceLabel } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel\";\n\nexport interface VisibilityProps {\n    elementId: string;\n}\n\nexport const Visibility = observer(({ elementId }: VisibilityProps) => {\n    const { styles, onChange, inheritanceMap } = useStyles(elementId);\n\n    const isVisible = styles.display !== \"none\";\n\n    const toggleVisibility = (isHidden: boolean) => {\n        onChange(({ styles }) => {\n            styles.set(\"display\", isHidden ? \"none\" : \"flex\");\n        });\n    };\n\n    const onReset = () => {\n        onChange(({ styles }) => {\n            styles.unset(\"display\");\n        });\n    };\n\n    const inheritance = inheritanceMap.display ?? {};\n\n    return (\n        <Switch\n            label={\n                <InheritanceLabel\n                    onReset={onReset}\n                    isOverridden={inheritance?.overridden ?? false}\n                    inheritedFrom={inheritance?.inheritedFrom}\n                    text={\"Hide element\"}\n                />\n            }\n            checked={!isVisible}\n            onChange={toggleVisibility}\n        />\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,SAAS;AAClB,SAASC,gBAAgB;AAMzB,OAAO,MAAMC,UAAU,GAAGJ,QAAQ,CAAC,CAAC;EAAEK;AAA2B,CAAC,KAAK;EACnE,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC;EAAe,CAAC,GAAGN,SAAS,CAACG,SAAS,CAAC;EAEjE,MAAMI,SAAS,GAAGH,MAAM,CAACI,OAAO,KAAK,MAAM;EAE3C,MAAMC,gBAAgB,GAAIC,QAAiB,IAAK;IAC5CL,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACO,GAAG,CAAC,SAAS,EAAED,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACrD,CAAC,CAAC;EACN,CAAC;EAED,MAAME,OAAO,GAAGA,CAAA,KAAM;IAClBP,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACS,KAAK,CAAC,SAAS,CAAC;IAC3B,CAAC,CAAC;EACN,CAAC;EAED,MAAMC,WAAW,GAAGR,cAAc,CAACE,OAAO,IAAI,CAAC,CAAC;EAEhD,oBACIX,KAAA,CAAAkB,aAAA,CAAChB,MAAM;IACHiB,KAAK,eACDnB,KAAA,CAAAkB,aAAA,CAACd,gBAAgB;MACbW,OAAO,EAAEA,OAAQ;MACjBK,YAAY,EAAEH,WAAW,EAAEI,UAAU,IAAI,KAAM;MAC/CC,aAAa,EAAEL,WAAW,EAAEK,aAAc;MAC1CC,IAAI,EAAE;IAAe,CACxB,CACJ;IACDC,OAAO,EAAE,CAACd,SAAU;IACpBF,QAAQ,EAAEI;EAAiB,CAC9B,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Visibility/index.d.ts

@@ -0,0 +1 @@
+export * from "./Visibility.js";

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Visibility/index.js

@@ -0,0 +1,3 @@
+export * from "./Visibility.js";
+
+//# sourceMappingURL=index.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/Visibility/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Visibility.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/VisibilityGroup.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { type VisibilityProps } from "./Visibility/index";
+export declare const VisibilityGroup: ({ elementId }: VisibilityProps) => React.JSX.Element;

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/VisibilityGroup.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { Visibility } from "./Visibility/index";
+export const VisibilityGroup = ({
+  elementId
+}) => {
+  return /*#__PURE__*/React.createElement(Accordion.Item, {
+    title: "Visibility",
+    description: "Set element visibility"
+  }, /*#__PURE__*/React.createElement(Visibility, {
+    elementId: elementId
+  }));
+};
+
+//# sourceMappingURL=VisibilityGroup.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/Groups/VisibilityGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Accordion","Visibility","VisibilityGroup","elementId","createElement","Item","title","description"],"sources":["VisibilityGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport { Visibility, type VisibilityProps } from \"./Visibility/index\";\n\nexport const VisibilityGroup = ({ elementId }: VisibilityProps) => {\n    return (\n        <Accordion.Item title={\"Visibility\"} description={\"Set element visibility\"}>\n            <Visibility elementId={elementId} />\n        </Accordion.Item>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,UAAU;AAEnB,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAAEC;AAA2B,CAAC,KAAK;EAC/D,oBACIJ,KAAA,CAAAK,aAAA,CAACJ,SAAS,CAACK,IAAI;IAACC,KAAK,EAAE,YAAa;IAACC,WAAW,EAAE;EAAyB,gBACvER,KAAA,CAAAK,aAAA,CAACH,UAAU;IAACE,SAAS,EAAEA;EAAU,CAAE,CACvB,CAAC;AAEzB,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const StyleProperties: () => React.JSX.Element | null;

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.js

@@ -0,0 +1,39 @@
+import React, { useCallback } from "react";
+import { Accordion } from "@webiny/admin-ui";
+import { useActiveElement } from "../../../hooks/useActiveElement";
+import { Background } from "./Groups/Background";
+import { MarginPadding } from "./Groups/MarginPadding";
+import { VisibilityGroup } from "./Groups/VisibilityGroup";
+import { useElementComponentManifest } from "../../Content/Preview/useElementComponentManifest";
+import { StyleSettings } from "../../../../constants";
+import { Layout } from "./Groups/Layout";
+export const StyleProperties = () => {
+  const [element] = useActiveElement();
+  if (!element) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ElementStyleProperties, {
+    element: element
+  });
+};
+const defaultHidden = [];
+const ElementStyleProperties = ({
+  element
+}) => {
+  const componentManifest = useElementComponentManifest(element.id);
+  const hideStyles = componentManifest?.hideStyleSettings ?? defaultHidden;
+  const isHidden = useCallback(name => {
+    return hideStyles.includes(name);
+  }, [hideStyles]);
+  return /*#__PURE__*/React.createElement(Accordion, null, isHidden(StyleSettings.Layout) ? null : /*#__PURE__*/React.createElement(Layout, {
+    elementId: element.id
+  }), isHidden(StyleSettings.MarginPadding) ? null : /*#__PURE__*/React.createElement(MarginPadding, {
+    elementId: element.id
+  }), isHidden(StyleSettings.Background) ? null : /*#__PURE__*/React.createElement(Background, {
+    elementId: element.id
+  }), isHidden(StyleSettings.Visibility) ? null : /*#__PURE__*/React.createElement(VisibilityGroup, {
+    elementId: element.id
+  }));
+};
+
+//# sourceMappingURL=StyleProperties.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleProperties.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","Accordion","useActiveElement","Background","MarginPadding","VisibilityGroup","useElementComponentManifest","StyleSettings","Layout","StyleProperties","element","createElement","ElementStyleProperties","defaultHidden","componentManifest","id","hideStyles","hideStyleSettings","isHidden","name","includes","elementId","Visibility"],"sources":["StyleProperties.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement\";\nimport { DocumentElement } from \"~/sdk/types\";\nimport { Background } from \"./Groups/Background\";\nimport { MarginPadding } from \"./Groups/MarginPadding\";\nimport { VisibilityGroup } from \"./Groups/VisibilityGroup\";\nimport { useElementComponentManifest } from \"~/BaseEditor/defaultConfig/Content/Preview/useElementComponentManifest\";\nimport { StyleSettings } from \"~/constants\";\nimport { Layout } from \"./Groups/Layout\";\n\nexport const StyleProperties = () => {\n    const [element] = useActiveElement();\n    if (!element) {\n        return null;\n    }\n\n    return <ElementStyleProperties element={element} />;\n};\n\nconst defaultHidden: string[] = [];\n\nconst ElementStyleProperties = ({ element }: { element: DocumentElement }) => {\n    const componentManifest = useElementComponentManifest(element.id);\n    const hideStyles = componentManifest?.hideStyleSettings ?? defaultHidden;\n\n    const isHidden = useCallback(\n        (name: string) => {\n            return hideStyles.includes(name);\n        },\n        [hideStyles]\n    );\n\n    return (\n        <Accordion>\n            {isHidden(StyleSettings.Layout) ? null : <Layout elementId={element.id} />}\n            {isHidden(StyleSettings.MarginPadding) ? null : (\n                <MarginPadding elementId={element.id} />\n            )}\n            {isHidden(StyleSettings.Background) ? null : <Background elementId={element.id} />}\n            {isHidden(StyleSettings.Visibility) ? null : <VisibilityGroup elementId={element.id} />}\n        </Accordion>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,gBAAgB;AAEzB,SAASC,UAAU;AACnB,SAASC,aAAa;AACtB,SAASC,eAAe;AACxB,SAASC,2BAA2B;AACpC,SAASC,aAAa;AACtB,SAASC,MAAM;AAEf,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAM;EACjC,MAAM,CAACC,OAAO,CAAC,GAAGR,gBAAgB,CAAC,CAAC;EACpC,IAAI,CAACQ,OAAO,EAAE;IACV,OAAO,IAAI;EACf;EAEA,oBAAOX,KAAA,CAAAY,aAAA,CAACC,sBAAsB;IAACF,OAAO,EAAEA;EAAQ,CAAE,CAAC;AACvD,CAAC;AAED,MAAMG,aAAuB,GAAG,EAAE;AAElC,MAAMD,sBAAsB,GAAGA,CAAC;EAAEF;AAAsC,CAAC,KAAK;EAC1E,MAAMI,iBAAiB,GAAGR,2BAA2B,CAACI,OAAO,CAACK,EAAE,CAAC;EACjE,MAAMC,UAAU,GAAGF,iBAAiB,EAAEG,iBAAiB,IAAIJ,aAAa;EAExE,MAAMK,QAAQ,GAAGlB,WAAW,CACvBmB,IAAY,IAAK;IACd,OAAOH,UAAU,CAACI,QAAQ,CAACD,IAAI,CAAC;EACpC,CAAC,EACD,CAACH,UAAU,CACf,CAAC;EAED,oBACIjB,KAAA,CAAAY,aAAA,CAACV,SAAS,QACLiB,QAAQ,CAACX,aAAa,CAACC,MAAM,CAAC,GAAG,IAAI,gBAAGT,KAAA,CAAAY,aAAA,CAACH,MAAM;IAACa,SAAS,EAAEX,OAAO,CAACK;EAAG,CAAE,CAAC,EACzEG,QAAQ,CAACX,aAAa,CAACH,aAAa,CAAC,GAAG,IAAI,gBACzCL,KAAA,CAAAY,aAAA,CAACP,aAAa;IAACiB,SAAS,EAAEX,OAAO,CAACK;EAAG,CAAE,CAC1C,EACAG,QAAQ,CAACX,aAAa,CAACJ,UAAU,CAAC,GAAG,IAAI,gBAAGJ,KAAA,CAAAY,aAAA,CAACR,UAAU;IAACkB,SAAS,EAAEX,OAAO,CAACK;EAAG,CAAE,CAAC,EACjFG,QAAQ,CAACX,aAAa,CAACe,UAAU,CAAC,GAAG,IAAI,gBAAGvB,KAAA,CAAAY,aAAA,CAACN,eAAe;IAACgB,SAAS,EAAEX,OAAO,CAACK;EAAG,CAAE,CAC/E,CAAC;AAEpB,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const StyleSettingsGroup: () => React.JSX.Element;

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Sidebar } from "../../../config/Sidebar/Sidebar";
+import { ScrollableContainer } from "../../../config/Sidebar/ScrollableContainer";
+import { useActiveElement } from "../../../hooks/useActiveElement";
+export const StyleSettingsGroup = () => {
+  const [element] = useActiveElement();
+  return /*#__PURE__*/React.createElement(ScrollableContainer, {
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(Sidebar.Group.Tab, {
+    name: "style",
+    label: "Style",
+    element: /*#__PURE__*/React.createElement(Sidebar.Elements, {
+      group: "style"
+    }),
+    noPadding: element ? true : false
+  }));
+};
+
+//# sourceMappingURL=StyleSettingsGroup.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StyleSettingsGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Sidebar","ScrollableContainer","useActiveElement","StyleSettingsGroup","element","createElement","tabIndex","Group","Tab","name","label","Elements","group","noPadding"],"sources":["StyleSettingsGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Sidebar } from \"~/BaseEditor/config/Sidebar/Sidebar\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement\";\n\nexport const StyleSettingsGroup = () => {\n    const [element] = useActiveElement();\n\n    return (\n        <ScrollableContainer tabIndex={-1}>\n            <Sidebar.Group.Tab\n                name={\"style\"}\n                label={\"Style\"}\n                element={<Sidebar.Elements group={\"style\"} />}\n                noPadding={element ? true : false}\n            />\n        </ScrollableContainer>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO;AAChB,SAASC,mBAAmB;AAC5B,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAM,CAACC,OAAO,CAAC,GAAGF,gBAAgB,CAAC,CAAC;EAEpC,oBACIH,KAAA,CAAAM,aAAA,CAACJ,mBAAmB;IAACK,QAAQ,EAAE,CAAC;EAAE,gBAC9BP,KAAA,CAAAM,aAAA,CAACL,OAAO,CAACO,KAAK,CAACC,GAAG;IACdC,IAAI,EAAE,OAAQ;IACdC,KAAK,EAAE,OAAQ;IACfN,OAAO,eAAEL,KAAA,CAAAM,aAAA,CAACL,OAAO,CAACW,QAAQ;MAACC,KAAK,EAAE;IAAQ,CAAE,CAAE;IAC9CC,SAAS,EAAET,OAAO,GAAG,IAAI,GAAG;EAAM,CACrC,CACgB,CAAC;AAE9B,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.d.ts

@@ -0,0 +1,41 @@
+import { IMetadata } from "../../../metadata";
+import { Editor } from "../../../../editorSdk/Editor";
+import { type InheritanceInfo } from "../../../../sdk/InheritanceProcessor";
+export type ElementBreakpointStyles = {
+    styles: Record<string, any>;
+    metadata: IMetadata;
+    inheritanceMap: InheritanceInfo["styles"];
+};
+export declare class StylesStore {
+    private editor;
+    private elementId;
+    private breakpointNames;
+    private stylesProcessor;
+    private elementMetadata;
+    private devFriendlyStyles;
+    private localPreviewStyles;
+    private currentBreakpoint;
+    private inheritanceMap;
+    private rawBindings;
+    private bindingsProcessor;
+    private inheritanceProcessor;
+    constructor(editor: Editor, elementId: string, breakpointNames: string[]);
+    get vm(): ElementBreakpointStyles;
+    onChange: (cb: (params: {
+        styles: StylesValueObject;
+        metadata: IMetadata;
+    }) => void) => void;
+    onPreviewChange: (cb: (params: {
+        styles: StylesValueObject;
+        metadata: IMetadata;
+    }) => void) => void;
+    private calculateStuff;
+}
+export declare class StylesValueObject {
+    private readonly value;
+    constructor(value?: any);
+    set(key: string, value: any): void;
+    get(key: string): any;
+    getAll(): Record<string, any>;
+    unset(key: string): void;
+}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.js

@@ -0,0 +1,112 @@
+import { StylesBindingsProcessor } from "../../../../sdk/StylesBindingsProcessor";
+import { BreakpointElementMetadata, ElementMetadata, NullMetadata, StylesMetadata } from "../../../metadata";
+import { Commands } from "../../..";
+import { autorun, makeAutoObservable, runInAction } from "mobx";
+import { InheritanceProcessor } from "../../../../sdk/InheritanceProcessor";
+import { BindingsProcessor } from "../../../../sdk";
+import { $getComponentManifestByElementId } from "../../../../editorSdk/utils";
+import { ComponentManifestToAstConverter } from "../../../../sdk/ComponentManifestToAstConverter";
+import { BASE_BREAKPOINT } from "../../../../constants";
+export class StylesStore {
+  elementMetadata = new NullMetadata();
+  devFriendlyStyles = {};
+  localPreviewStyles = undefined;
+  inheritanceMap = {};
+  rawBindings = {};
+  constructor(editor, elementId, breakpointNames) {
+    this.editor = editor;
+    this.elementId = elementId;
+    this.breakpointNames = breakpointNames;
+    const manifest = $getComponentManifestByElementId(editor, elementId ?? "");
+    const inputsAst = ComponentManifestToAstConverter.convert(manifest?.inputs ?? []);
+    this.bindingsProcessor = new BindingsProcessor(this.breakpointNames);
+    this.inheritanceProcessor = new InheritanceProcessor(this.breakpointNames, inputsAst);
+    const document = this.editor.getDocumentState().read();
+    const editorState = this.editor.getEditorState().read();
+    const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;
+    this.currentBreakpoint = breakpoint;
+
+    // Initial setup.
+    this.calculateStuff(document, breakpoint);
+    autorun(() => {
+      const document = this.editor.getDocumentState().read();
+      const editorState = this.editor.getEditorState().read();
+      const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;
+      runInAction(() => {
+        this.currentBreakpoint = breakpoint;
+        this.calculateStuff(document, breakpoint);
+      });
+    });
+    makeAutoObservable(this);
+  }
+  get vm() {
+    return {
+      styles: this.localPreviewStyles ?? this.devFriendlyStyles,
+      metadata: this.elementMetadata,
+      inheritanceMap: this.inheritanceMap
+    };
+  }
+  onChange = cb => {
+    if (!this.stylesProcessor) {
+      return;
+    }
+    const styles = new StylesValueObject(this.devFriendlyStyles);
+    cb({
+      styles,
+      metadata: this.elementMetadata
+    });
+    const finalStyles = styles.getAll();
+    const updatedStyles = this.stylesProcessor.createUpdate(finalStyles, this.currentBreakpoint);
+    this.localPreviewStyles = undefined;
+    this.editor.updateDocument(document => {
+      updatedStyles.applyToDocument(document);
+      this.elementMetadata.applyToDocument(document);
+    });
+  };
+  onPreviewChange = cb => {
+    if (!this.stylesProcessor) {
+      return;
+    }
+    const styles = new StylesValueObject(structuredClone(this.devFriendlyStyles));
+    cb({
+      styles,
+      metadata: this.elementMetadata
+    });
+    const finalStyles = styles.getAll();
+    this.localPreviewStyles = finalStyles;
+    const updatedStyles = this.stylesProcessor.createUpdate(finalStyles, this.currentBreakpoint);
+    this.editor.executeCommand(Commands.PreviewPatchElement, {
+      elementId: this.elementId,
+      patch: updatedStyles.createJsonPatch(this.rawBindings)
+    });
+  };
+  calculateStuff(document, breakpoint) {
+    const bindings = document.bindings[this.elementId] ?? {};
+    this.rawBindings = bindings;
+    const resolvedBindings = this.bindingsProcessor.getBindings(bindings, breakpoint);
+    const inheritanceMap = this.inheritanceProcessor.getInheritanceMap(bindings, breakpoint);
+    this.inheritanceMap = inheritanceMap.styles;
+    this.stylesProcessor = new StylesBindingsProcessor(this.elementId, this.breakpointNames, bindings);
+    this.elementMetadata = new StylesMetadata(new BreakpointElementMetadata(this.breakpointNames, breakpoint, new ElementMetadata(this.elementId, bindings.metadata)));
+    this.devFriendlyStyles = this.stylesProcessor.toDeepStyles(resolvedBindings.styles);
+  }
+}
+export class StylesValueObject {
+  constructor(value = {}) {
+    this.value = value;
+  }
+  set(key, value) {
+    this.value[key] = value;
+  }
+  get(key) {
+    return this.value[key];
+  }
+  getAll() {
+    return this.value;
+  }
+  unset(key) {
+    delete this.value[key];
+  }
+}
+
+//# sourceMappingURL=StylesStore.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StylesBindingsProcessor","BreakpointElementMetadata","ElementMetadata","NullMetadata","StylesMetadata","Commands","autorun","makeAutoObservable","runInAction","InheritanceProcessor","BindingsProcessor","$getComponentManifestByElementId","ComponentManifestToAstConverter","BASE_BREAKPOINT","StylesStore","elementMetadata","devFriendlyStyles","localPreviewStyles","undefined","inheritanceMap","rawBindings","constructor","editor","elementId","breakpointNames","manifest","inputsAst","convert","inputs","bindingsProcessor","inheritanceProcessor","document","getDocumentState","read","editorState","getEditorState","breakpoint","currentBreakpoint","calculateStuff","vm","styles","metadata","onChange","cb","stylesProcessor","StylesValueObject","finalStyles","getAll","updatedStyles","createUpdate","updateDocument","applyToDocument","onPreviewChange","structuredClone","executeCommand","PreviewPatchElement","patch","createJsonPatch","bindings","resolvedBindings","getBindings","getInheritanceMap","toDeepStyles","value","set","key","get","unset"],"sources":["StylesStore.ts"],"sourcesContent":["import { useDocumentEditor } from \"~/DocumentEditor\";\nimport { StylesBindingsProcessor } from \"~/sdk/StylesBindingsProcessor\";\nimport {\n    BreakpointElementMetadata,\n    ElementMetadata,\n    IMetadata,\n    NullMetadata,\n    StylesMetadata\n} from \"~/BaseEditor/metadata\";\nimport { Commands } from \"~/BaseEditor\";\nimport { Editor } from \"~/editorSdk/Editor\";\nimport { autorun, makeAutoObservable, runInAction } from \"mobx\";\nimport { type InheritanceInfo, InheritanceProcessor } from \"~/sdk/InheritanceProcessor\";\nimport { BindingsProcessor, type DocumentElementBindings, type Document } from \"~/sdk\";\nimport { $getComponentManifestByElementId } from \"~/editorSdk/utils\";\nimport { ComponentManifestToAstConverter } from \"~/sdk/ComponentManifestToAstConverter\";\nimport { BASE_BREAKPOINT } from \"~/constants\";\n\nexport type ElementBreakpointStyles = {\n    styles: Record<string, any>;\n    metadata: IMetadata;\n    inheritanceMap: InheritanceInfo[\"styles\"];\n};\n\nexport class StylesStore {\n    private editor: ReturnType<typeof useDocumentEditor>;\n    private elementId: string;\n    private breakpointNames: string[];\n    private stylesProcessor: StylesBindingsProcessor | undefined;\n    private elementMetadata: IMetadata = new NullMetadata();\n    private devFriendlyStyles: Record<string, any> = {};\n    private localPreviewStyles: Record<string, any> | undefined = undefined;\n    private currentBreakpoint: string;\n    private inheritanceMap: InheritanceInfo[\"styles\"] = {};\n    private rawBindings: DocumentElementBindings = {};\n    private bindingsProcessor: BindingsProcessor;\n    private inheritanceProcessor: InheritanceProcessor;\n    constructor(editor: Editor, elementId: string, breakpointNames: string[]) {\n        this.editor = editor;\n        this.elementId = elementId;\n        this.breakpointNames = breakpointNames;\n\n        const manifest = $getComponentManifestByElementId(editor, elementId ?? \"\");\n        const inputsAst = ComponentManifestToAstConverter.convert(manifest?.inputs ?? []);\n\n        this.bindingsProcessor = new BindingsProcessor(this.breakpointNames);\n        this.inheritanceProcessor = new InheritanceProcessor(this.breakpointNames, inputsAst);\n\n        const document = this.editor.getDocumentState().read();\n        const editorState = this.editor.getEditorState().read();\n        const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;\n        this.currentBreakpoint = breakpoint;\n\n        // Initial setup.\n        this.calculateStuff(document, breakpoint);\n\n        autorun(() => {\n            const document = this.editor.getDocumentState().read();\n            const editorState = this.editor.getEditorState().read();\n            const breakpoint = editorState.breakpoint ?? BASE_BREAKPOINT;\n\n            runInAction(() => {\n                this.currentBreakpoint = breakpoint;\n                this.calculateStuff(document, breakpoint);\n            });\n        });\n\n        makeAutoObservable(this);\n    }\n\n    get vm(): ElementBreakpointStyles {\n        return {\n            styles: this.localPreviewStyles ?? this.devFriendlyStyles,\n            metadata: this.elementMetadata,\n            inheritanceMap: this.inheritanceMap\n        };\n    }\n\n    onChange = (cb: (params: { styles: StylesValueObject; metadata: IMetadata }) => void) => {\n        if (!this.stylesProcessor) {\n            return;\n        }\n\n        const styles = new StylesValueObject(this.devFriendlyStyles);\n        cb({ styles, metadata: this.elementMetadata });\n\n        const finalStyles = styles.getAll();\n\n        const updatedStyles = this.stylesProcessor.createUpdate(\n            finalStyles,\n            this.currentBreakpoint\n        );\n\n        this.localPreviewStyles = undefined;\n\n        this.editor.updateDocument(document => {\n            updatedStyles.applyToDocument(document);\n            this.elementMetadata.applyToDocument(document);\n        });\n    };\n\n    onPreviewChange = (\n        cb: (params: { styles: StylesValueObject; metadata: IMetadata }) => void\n    ) => {\n        if (!this.stylesProcessor) {\n            return;\n        }\n\n        const styles = new StylesValueObject(structuredClone(this.devFriendlyStyles));\n\n        cb({ styles, metadata: this.elementMetadata });\n\n        const finalStyles = styles.getAll();\n\n        this.localPreviewStyles = finalStyles;\n\n        const updatedStyles = this.stylesProcessor.createUpdate(\n            finalStyles,\n            this.currentBreakpoint\n        );\n\n        this.editor.executeCommand(Commands.PreviewPatchElement, {\n            elementId: this.elementId,\n            patch: updatedStyles.createJsonPatch(this.rawBindings)\n        });\n    };\n\n    private calculateStuff(document: Document, breakpoint: string) {\n        const bindings = document.bindings[this.elementId] ?? {};\n\n        this.rawBindings = bindings;\n        const resolvedBindings = this.bindingsProcessor.getBindings(bindings, breakpoint);\n\n        const inheritanceMap = this.inheritanceProcessor.getInheritanceMap(bindings, breakpoint);\n\n            this.inheritanceMap = inheritanceMap.styles;\n\n        this.stylesProcessor = new StylesBindingsProcessor(\n            this.elementId,\n            this.breakpointNames,\n            bindings\n        );\n\n        this.elementMetadata = new StylesMetadata(\n            new BreakpointElementMetadata(\n                this.breakpointNames,\n                breakpoint,\n                new ElementMetadata(this.elementId, bindings.metadata)\n            )\n        );\n\n        this.devFriendlyStyles = this.stylesProcessor.toDeepStyles(resolvedBindings.styles);\n    }\n}\n\nexport class StylesValueObject {\n    private readonly value: Record<string, any>;\n\n    constructor(value: any = {}) {\n        this.value = value;\n    }\n\n    set(key: string, value: any) {\n        this.value[key] = value;\n    }\n\n    get(key: string) {\n        return this.value[key];\n    }\n\n    getAll() {\n        return this.value;\n    }\n\n    unset(key: string) {\n        delete this.value[key];\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValue.d.ts

@@ -0,0 +1,14 @@
+export declare class UnitValue {
+    private value;
+    private unit;
+    private keywords;
+    private constructor();
+    static from(value: string): UnitValue;
+    static isKeyword(unit: string): boolean;
+    isKeyword(): boolean;
+    getValue(defaultValue?: string): string;
+    setUnit(unit: string): void;
+    getUnit(): string;
+    toString(): string;
+    private isAKeyword;
+}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValue.js

@@ -0,0 +1,41 @@
+export class UnitValue {
+  keywords = ["auto", "unset", "inherit"];
+  constructor(valueWithUnit = "") {
+    const [, value, unit = "px"] = valueWithUnit.match(/(\d+)?(\S+)?/) ?? [];
+    if (this.isAKeyword(unit)) {
+      this.value = unit;
+    } else {
+      this.value = value;
+    }
+    this.unit = unit;
+  }
+  static from(value) {
+    return new UnitValue(value);
+  }
+  static isKeyword(unit) {
+    return new UnitValue(unit).isKeyword();
+  }
+  isKeyword() {
+    return this.keywords.includes(String(this.value));
+  }
+  getValue(defaultValue) {
+    return this.value ? this.value.toString() : defaultValue ?? "";
+  }
+  setUnit(unit) {
+    if (this.isKeyword()) {
+      this.value = "0";
+    }
+    this.unit = unit;
+  }
+  getUnit() {
+    return this.unit;
+  }
+  toString() {
+    return `${this.value}${this.unit}`;
+  }
+  isAKeyword(str) {
+    return this.keywords.includes(str);
+  }
+}
+
+//# sourceMappingURL=UnitValue.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValue.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["UnitValue","keywords","constructor","valueWithUnit","value","unit","match","isAKeyword","from","isKeyword","includes","String","getValue","defaultValue","toString","setUnit","getUnit","str"],"sources":["UnitValue.ts"],"sourcesContent":["export class UnitValue {\n    private value: string;\n    private unit: string;\n    private keywords = [\"auto\", \"unset\", \"inherit\"];\n\n    private constructor(valueWithUnit: string = \"\") {\n        const [, value, unit = \"px\"] = valueWithUnit.match(/(\\d+)?(\\S+)?/) ?? [];\n        if (this.isAKeyword(unit)) {\n            this.value = unit;\n        } else {\n            this.value = value;\n        }\n        this.unit = unit;\n    }\n\n    static from(value: string) {\n        return new UnitValue(value);\n    }\n\n    static isKeyword(unit: string): boolean {\n        return new UnitValue(unit).isKeyword();\n    }\n\n    isKeyword() {\n        return this.keywords.includes(String(this.value));\n    }\n\n    getValue(defaultValue?: string) {\n        return this.value ? this.value.toString() : defaultValue ?? \"\";\n    }\n\n    setUnit(unit: string) {\n        if (this.isKeyword()) {\n            this.value = \"0\";\n        }\n        this.unit = unit;\n    }\n\n    getUnit() {\n        return this.unit;\n    }\n\n    toString() {\n        return `${this.value}${this.unit}`;\n    }\n\n    private isAKeyword(str: string) {\n        return this.keywords.includes(str);\n    }\n}\n"],"mappings":"AAAA,OAAO,MAAMA,SAAS,CAAC;EAGXC,QAAQ,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,CAAC;EAEvCC,WAAWA,CAACC,aAAqB,GAAG,EAAE,EAAE;IAC5C,MAAM,GAAGC,KAAK,EAAEC,IAAI,GAAG,IAAI,CAAC,GAAGF,aAAa,CAACG,KAAK,CAAC,cAAc,CAAC,IAAI,EAAE;IACxE,IAAI,IAAI,CAACC,UAAU,CAACF,IAAI,CAAC,EAAE;MACvB,IAAI,CAACD,KAAK,GAAGC,IAAI;IACrB,CAAC,MAAM;MACH,IAAI,CAACD,KAAK,GAAGA,KAAK;IACtB;IACA,IAAI,CAACC,IAAI,GAAGA,IAAI;EACpB;EAEA,OAAOG,IAAIA,CAACJ,KAAa,EAAE;IACvB,OAAO,IAAIJ,SAAS,CAACI,KAAK,CAAC;EAC/B;EAEA,OAAOK,SAASA,CAACJ,IAAY,EAAW;IACpC,OAAO,IAAIL,SAAS,CAACK,IAAI,CAAC,CAACI,SAAS,CAAC,CAAC;EAC1C;EAEAA,SAASA,CAAA,EAAG;IACR,OAAO,IAAI,CAACR,QAAQ,CAACS,QAAQ,CAACC,MAAM,CAAC,IAAI,CAACP,KAAK,CAAC,CAAC;EACrD;EAEAQ,QAAQA,CAACC,YAAqB,EAAE;IAC5B,OAAO,IAAI,CAACT,KAAK,GAAG,IAAI,CAACA,KAAK,CAACU,QAAQ,CAAC,CAAC,GAAGD,YAAY,IAAI,EAAE;EAClE;EAEAE,OAAOA,CAACV,IAAY,EAAE;IAClB,IAAI,IAAI,CAACI,SAAS,CAAC,CAAC,EAAE;MAClB,IAAI,CAACL,KAAK,GAAG,GAAG;IACpB;IACA,IAAI,CAACC,IAAI,GAAGA,IAAI;EACpB;EAEAW,OAAOA,CAAA,EAAG;IACN,OAAO,IAAI,CAACX,IAAI;EACpB;EAEAS,QAAQA,CAAA,EAAG;IACP,OAAO,GAAG,IAAI,CAACV,KAAK,GAAG,IAAI,CAACC,IAAI,EAAE;EACtC;EAEQE,UAAUA,CAACU,GAAW,EAAE;IAC5B,OAAO,IAAI,CAAChB,QAAQ,CAACS,QAAQ,CAACO,GAAG,CAAC;EACtC;AACJ","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValuePicker.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export type UnitOption = {
+    label: string;
+    value: string;
+};
+interface UnitValueProps {
+    value: string;
+    unit: string;
+    units: UnitOption[];
+    onChange: (value: string) => void;
+    onChangePreview: (value: string) => void;
+}
+export declare const UnitValuePicker: (props: UnitValueProps) => React.JSX.Element;
+export {};