@webiny/app-website-builder 6.3.0 → 6.4.0-beta.1

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

@@ -1 +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 type { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { StylesBindingsProcessor } from \"@webiny/website-builder-sdk\";\nimport type { IMetadata } from \"~/BaseEditor/metadata/index.js\";\nimport {\n    BreakpointElementMetadata,\n    ElementMetadata,\n    NullMetadata,\n    StylesMetadata\n} from \"~/BaseEditor/metadata/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { Editor } from \"~/editorSdk/Editor.js\";\nimport { autorun, makeAutoObservable, runInAction } from \"mobx\";\nimport { type InheritanceInfo, InheritanceProcessor } from \"@webiny/website-builder-sdk\";\nimport {\n    BindingsProcessor,\n    type DocumentElementBindings,\n    type Document\n} from \"@webiny/website-builder-sdk\";\nimport { $getComponentManifestByElementId } from \"~/editorSdk/utils/index.js\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { BASE_BREAKPOINT } from \"~/constants.js\";\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(breakpointNames);\n        this.inheritanceProcessor = new InheritanceProcessor(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.editor.updateDocument(document => {\n            updatedStyles.applyToDocument(document);\n            this.elementMetadata.applyToDocument(document);\n        });\n\n        this.localPreviewStyles = undefined;\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":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/StylesStore.ts"],"sourcesContent":["import type { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { StylesBindingsProcessor } from \"@webiny/website-builder-sdk\";\nimport type { IMetadata } from \"~/BaseEditor/metadata/index.js\";\nimport {\n    BreakpointElementMetadata,\n    ElementMetadata,\n    NullMetadata,\n    StylesMetadata\n} from \"~/BaseEditor/metadata/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport type { Editor } from \"~/editorSdk/Editor.js\";\nimport { autorun, makeAutoObservable, runInAction } from \"mobx\";\nimport { type InheritanceInfo, InheritanceProcessor } from \"@webiny/website-builder-sdk\";\nimport {\n    BindingsProcessor,\n    type DocumentElementBindings,\n    type Document\n} from \"@webiny/website-builder-sdk\";\nimport { $getComponentManifestByElementId } from \"~/editorSdk/utils/index.js\";\nimport { ComponentManifestToAstConverter } from \"@webiny/website-builder-sdk\";\nimport { BASE_BREAKPOINT } from \"~/constants.js\";\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(breakpointNames);\n        this.inheritanceProcessor = new InheritanceProcessor(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.editor.updateDocument(document => {\n            updatedStyles.applyToDocument(document);\n            this.elementMetadata.applyToDocument(document);\n        });\n\n        this.localPreviewStyles = undefined;\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"],"names":["StylesStore","editor","elementId","breakpointNames","NullMetadata","undefined","cb","styles","StylesValueObject","finalStyles","updatedStyles","document","structuredClone","Commands","manifest","$getComponentManifestByElementId","inputsAst","ComponentManifestToAstConverter","BindingsProcessor","InheritanceProcessor","editorState","breakpoint","BASE_BREAKPOINT","autorun","runInAction","makeAutoObservable","bindings","resolvedBindings","inheritanceMap","StylesBindingsProcessor","StylesMetadata","BreakpointElementMetadata","ElementMetadata","value","key"],"mappings":"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"}

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

@@ -1,41 +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);
-  }
+class UnitValue {
+    constructor(valueWithUnit = ""){
+        this.keywords = [
+            "auto",
+            "unset",
+            "inherit"
+        ];
+        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);
+    }
 }
+export { UnitValue };
 
 //# sourceMappingURL=UnitValue.js.map

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

@@ -1 +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,GAAID,YAAY,IAAI,EAAG;EACpE;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":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValue.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/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"],"names":["UnitValue","valueWithUnit","value","unit","String","defaultValue","str"],"mappings":"AAAO,MAAMA;IAKT,YAAoBC,gBAAwB,EAAE,CAAE;aAFxC,QAAQ,GAAG;YAAC;YAAQ;YAAS;SAAU;QAG3C,MAAM,GAAGC,OAAOC,OAAO,IAAI,CAAC,GAAGF,cAAc,KAAK,CAAC,mBAAmB,EAAE;QACxE,IAAI,IAAI,CAAC,UAAU,CAACE,OAChB,IAAI,CAAC,KAAK,GAAGA;aAEb,IAAI,CAAC,KAAK,GAAGD;QAEjB,IAAI,CAAC,IAAI,GAAGC;IAChB;IAEA,OAAO,KAAKD,KAAa,EAAE;QACvB,OAAO,IAAIF,UAAUE;IACzB;IAEA,OAAO,UAAUC,IAAY,EAAW;QACpC,OAAO,IAAIH,UAAUG,MAAM,SAAS;IACxC;IAEA,YAAY;QACR,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAACC,OAAO,IAAI,CAAC,KAAK;IACnD;IAEA,SAASC,YAAqB,EAAE;QAC5B,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAMA,gBAAgB;IACjE;IAEA,QAAQF,IAAY,EAAE;QAClB,IAAI,IAAI,CAAC,SAAS,IACd,IAAI,CAAC,KAAK,GAAG;QAEjB,IAAI,CAAC,IAAI,GAAGA;IAChB;IAEA,UAAU;QACN,OAAO,IAAI,CAAC,IAAI;IACpB;IAEA,WAAW;QACP,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE;IACtC;IAEQ,WAAWG,GAAW,EAAE;QAC5B,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAACA;IAClC;AACJ"}

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

@@ -1,59 +1,64 @@
-import React, { useState } from "react";
+import react, { useState } from "react";
 import { Input, Select } from "@webiny/admin-ui";
 class Value {
-  static from(value) {
-    return value === "auto" ? 0 : parseInt(value ?? "0");
-  }
-}
-const capTo100 = ["%", "vh", "vw"];
-export const UnitValuePicker = props => {
-  const [editing, setEditing] = useState(false);
-  const defaultValue = editing ? "" : 0;
-  const isAuto = props.value === "auto";
-  const currentValue = Value.from(props.value);
-  const onEnter = () => {
-    setValue(props.value);
-  };
-  const setUnit = unit => {
-    const value = capTo100.includes(unit) && currentValue > 100 ? 100 : currentValue;
-    props.onChange(unit === "auto" ? "auto" : `${value}${unit}`);
-  };
-  const setValue = value => {
-    const parsedValue = Value.from(value);
-    const finalValue = isNaN(parsedValue) ? 0 : parsedValue;
-    props.onChange(`${finalValue}${props.unit}`);
-  };
-  const setPreviewValue = value => {
-    setEditing(true);
-    let finalValue = "";
-    if (value !== "") {
-      const parsedValue = parseInt(value);
-      finalValue = isNaN(parsedValue) ? 0 : parsedValue;
+    static from(value) {
+        return "auto" === value ? 0 : parseInt(value ?? "0");
     }
-    props.onChangePreview(`${finalValue}${props.unit}`);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-row space-x-sm"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex-col"
-  }, /*#__PURE__*/React.createElement(Input, {
-    disabled: isAuto,
-    size: "md",
-    value: isAuto ? "-" : props.value ?? defaultValue,
-    onEnter: onEnter,
-    autoSelect: true,
-    onChange: value => setPreviewValue(value),
-    onBlur: e => setValue(e.target.value),
-    autoFocus: true
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "flex-col"
-  }, /*#__PURE__*/React.createElement(Select, {
-    size: "md",
-    value: props.unit,
-    options: props.units,
-    onChange: setUnit,
-    displayResetAction: false
-  })));
+}
+const capTo100 = [
+    "%",
+    "vh",
+    "vw"
+];
+const UnitValuePicker = (props)=>{
+    const [editing, setEditing] = useState(false);
+    const defaultValue = editing ? "" : 0;
+    const isAuto = "auto" === props.value;
+    const currentValue = Value.from(props.value);
+    const onEnter = ()=>{
+        setValue(props.value);
+    };
+    const setUnit = (unit)=>{
+        const value = capTo100.includes(unit) && currentValue > 100 ? 100 : currentValue;
+        props.onChange("auto" === unit ? "auto" : `${value}${unit}`);
+    };
+    const setValue = (value)=>{
+        const parsedValue = Value.from(value);
+        const finalValue = isNaN(parsedValue) ? 0 : parsedValue;
+        props.onChange(`${finalValue}${props.unit}`);
+    };
+    const setPreviewValue = (value)=>{
+        setEditing(true);
+        let finalValue = "";
+        if ("" !== value) {
+            const parsedValue = parseInt(value);
+            finalValue = isNaN(parsedValue) ? 0 : parsedValue;
+        }
+        props.onChangePreview(`${finalValue}${props.unit}`);
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-row space-x-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex-col"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        disabled: isAuto,
+        size: "md",
+        value: isAuto ? "-" : props.value ?? defaultValue,
+        onEnter: onEnter,
+        autoSelect: true,
+        onChange: (value)=>setPreviewValue(value),
+        onBlur: (e)=>setValue(e.target.value),
+        autoFocus: true
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "flex-col"
+    }, /*#__PURE__*/ react.createElement(Select, {
+        size: "md",
+        value: props.unit,
+        options: props.units,
+        onChange: setUnit,
+        displayResetAction: false
+    })));
 };
+export { UnitValuePicker };
 
 //# sourceMappingURL=UnitValuePicker.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Input","Select","Value","from","value","parseInt","capTo100","UnitValuePicker","props","editing","setEditing","defaultValue","isAuto","currentValue","onEnter","setValue","setUnit","unit","includes","onChange","parsedValue","finalValue","isNaN","setPreviewValue","onChangePreview","createElement","className","disabled","size","autoSelect","onBlur","e","target","autoFocus","options","units","displayResetAction"],"sources":["UnitValuePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Input, Select } from \"@webiny/admin-ui\";\n\nexport type UnitOption = {\n    label: string;\n    value: string;\n};\n\ninterface UnitValueProps {\n    value: string;\n    unit: string;\n    units: UnitOption[];\n    onChange: (value: string) => void;\n    onChangePreview: (value: string) => void;\n}\n\nclass Value {\n    static from(value: string | undefined) {\n        return value === \"auto\" ? 0 : parseInt(value ?? \"0\");\n    }\n}\n\nconst capTo100 = [\"%\", \"vh\", \"vw\"];\n\nexport const UnitValuePicker = (props: UnitValueProps) => {\n    const [editing, setEditing] = useState(false);\n\n    const defaultValue = editing ? \"\" : 0;\n\n    const isAuto = props.value === \"auto\";\n\n    const currentValue = Value.from(props.value);\n\n    const onEnter = () => {\n        setValue(props.value);\n    };\n\n    const setUnit = (unit: string) => {\n        const value = capTo100.includes(unit) && currentValue > 100 ? 100 : currentValue;\n        props.onChange(unit === \"auto\" ? \"auto\" : `${value}${unit}`);\n    };\n\n    const setValue = (value: string) => {\n        const parsedValue = Value.from(value);\n        const finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n        props.onChange(`${finalValue}${props.unit}`);\n    };\n\n    const setPreviewValue = (value: string) => {\n        setEditing(true);\n        let finalValue: string | number = \"\";\n        if (value !== \"\") {\n            const parsedValue = parseInt(value);\n            finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n        }\n        props.onChangePreview(`${finalValue}${props.unit}`);\n    };\n\n    return (\n        <div className={\"flex flex-row space-x-sm\"}>\n            <div className={\"flex-col\"}>\n                <Input\n                    disabled={isAuto}\n                    size={\"md\"}\n                    value={isAuto ? \"-\" : (props.value ?? defaultValue)}\n                    onEnter={onEnter}\n                    autoSelect={true}\n                    onChange={value => setPreviewValue(value)}\n                    onBlur={e => setValue(e.target.value)}\n                    autoFocus={true}\n                />\n            </div>\n            <div className={\"flex-col\"}>\n                <Select\n                    size=\"md\"\n                    value={props.unit}\n                    options={props.units}\n                    onChange={setUnit}\n                    displayResetAction={false}\n                />\n            </div>\n        </div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValuePicker.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitValuePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Input, Select } from \"@webiny/admin-ui\";\n\nexport type UnitOption = {\n    label: string;\n    value: string;\n};\n\ninterface UnitValueProps {\n    value: string;\n    unit: string;\n    units: UnitOption[];\n    onChange: (value: string) => void;\n    onChangePreview: (value: string) => void;\n}\n\nclass Value {\n    static from(value: string | undefined) {\n        return value === \"auto\" ? 0 : parseInt(value ?? \"0\");\n    }\n}\n\nconst capTo100 = [\"%\", \"vh\", \"vw\"];\n\nexport const UnitValuePicker = (props: UnitValueProps) => {\n    const [editing, setEditing] = useState(false);\n\n    const defaultValue = editing ? \"\" : 0;\n\n    const isAuto = props.value === \"auto\";\n\n    const currentValue = Value.from(props.value);\n\n    const onEnter = () => {\n        setValue(props.value);\n    };\n\n    const setUnit = (unit: string) => {\n        const value = capTo100.includes(unit) && currentValue > 100 ? 100 : currentValue;\n        props.onChange(unit === \"auto\" ? \"auto\" : `${value}${unit}`);\n    };\n\n    const setValue = (value: string) => {\n        const parsedValue = Value.from(value);\n        const finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n        props.onChange(`${finalValue}${props.unit}`);\n    };\n\n    const setPreviewValue = (value: string) => {\n        setEditing(true);\n        let finalValue: string | number = \"\";\n        if (value !== \"\") {\n            const parsedValue = parseInt(value);\n            finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n        }\n        props.onChangePreview(`${finalValue}${props.unit}`);\n    };\n\n    return (\n        <div className={\"flex flex-row space-x-sm\"}>\n            <div className={\"flex-col\"}>\n                <Input\n                    disabled={isAuto}\n                    size={\"md\"}\n                    value={isAuto ? \"-\" : (props.value ?? defaultValue)}\n                    onEnter={onEnter}\n                    autoSelect={true}\n                    onChange={value => setPreviewValue(value)}\n                    onBlur={e => setValue(e.target.value)}\n                    autoFocus={true}\n                />\n            </div>\n            <div className={\"flex-col\"}>\n                <Select\n                    size=\"md\"\n                    value={props.unit}\n                    options={props.units}\n                    onChange={setUnit}\n                    displayResetAction={false}\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":["Value","value","parseInt","capTo100","UnitValuePicker","props","editing","setEditing","useState","defaultValue","isAuto","currentValue","onEnter","setValue","setUnit","unit","parsedValue","finalValue","isNaN","setPreviewValue","Input","e","Select"],"mappings":";;AAgBA,MAAMA;IACF,OAAO,KAAKC,KAAyB,EAAE;QACnC,OAAOA,AAAU,WAAVA,QAAmB,IAAIC,SAASD,SAAS;IACpD;AACJ;AAEA,MAAME,WAAW;IAAC;IAAK;IAAM;CAAK;AAE3B,MAAMC,kBAAkB,CAACC;IAC5B,MAAM,CAACC,SAASC,WAAW,GAAGC,SAAS;IAEvC,MAAMC,eAAeH,UAAU,KAAK;IAEpC,MAAMI,SAASL,AAAgB,WAAhBA,MAAM,KAAK;IAE1B,MAAMM,eAAeX,MAAM,IAAI,CAACK,MAAM,KAAK;IAE3C,MAAMO,UAAU;QACZC,SAASR,MAAM,KAAK;IACxB;IAEA,MAAMS,UAAU,CAACC;QACb,MAAMd,QAAQE,SAAS,QAAQ,CAACY,SAASJ,eAAe,MAAM,MAAMA;QACpEN,MAAM,QAAQ,CAACU,AAAS,WAATA,OAAkB,SAAS,GAAGd,QAAQc,MAAM;IAC/D;IAEA,MAAMF,WAAW,CAACZ;QACd,MAAMe,cAAchB,MAAM,IAAI,CAACC;QAC/B,MAAMgB,aAAaC,MAAMF,eAAe,IAAIA;QAC5CX,MAAM,QAAQ,CAAC,GAAGY,aAAaZ,MAAM,IAAI,EAAE;IAC/C;IAEA,MAAMc,kBAAkB,CAAClB;QACrBM,WAAW;QACX,IAAIU,aAA8B;QAClC,IAAIhB,AAAU,OAAVA,OAAc;YACd,MAAMe,cAAcd,SAASD;YAC7BgB,aAAaC,MAAMF,eAAe,IAAIA;QAC1C;QACAX,MAAM,eAAe,CAAC,GAAGY,aAAaZ,MAAM,IAAI,EAAE;IACtD;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACe,OAAKA;QACF,UAAUV;QACV,MAAM;QACN,OAAOA,SAAS,MAAOL,MAAM,KAAK,IAAII;QACtC,SAASG;QACT,YAAY;QACZ,UAAUX,CAAAA,QAASkB,gBAAgBlB;QACnC,QAAQoB,CAAAA,IAAKR,SAASQ,EAAE,MAAM,CAAC,KAAK;QACpC,WAAW;uBAGnB,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QACH,MAAK;QACL,OAAOjB,MAAM,IAAI;QACjB,SAASA,MAAM,KAAK;QACpB,UAAUS;QACV,oBAAoB;;AAKxC"}

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

@@ -1,29 +1,37 @@
-export class UnitsOptions {
-  units = ["px", "%", "em", "rem"];
-  static widthUnits() {
-    const units = new UnitsOptions();
-    units.add("vw");
-    return units;
-  }
-  static heightUnits() {
-    const units = new UnitsOptions();
-    units.add("vh");
-    return units;
-  }
-  add(...args) {
-    this.units.push(...args);
-    return this;
-  }
-  remove(...args) {
-    this.units = this.units.filter(unit => !args.includes(unit));
-    return this;
-  }
-  getOptions() {
-    return this.units.map(unit => ({
-      label: unit,
-      value: unit
-    }));
-  }
+class UnitsOptions {
+    static widthUnits() {
+        const units = new UnitsOptions();
+        units.add("vw");
+        return units;
+    }
+    static heightUnits() {
+        const units = new UnitsOptions();
+        units.add("vh");
+        return units;
+    }
+    add(...args) {
+        this.units.push(...args);
+        return this;
+    }
+    remove(...args) {
+        this.units = this.units.filter((unit)=>!args.includes(unit));
+        return this;
+    }
+    getOptions() {
+        return this.units.map((unit)=>({
+                label: unit,
+                value: unit
+            }));
+    }
+    constructor(){
+        this.units = [
+            "px",
+            "%",
+            "em",
+            "rem"
+        ];
+    }
 }
+export { UnitsOptions };
 
 //# sourceMappingURL=UnitsOptions.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["UnitsOptions","units","widthUnits","add","heightUnits","args","push","remove","filter","unit","includes","getOptions","map","label","value"],"sources":["UnitsOptions.ts"],"sourcesContent":["export class UnitsOptions {\n    private units = [\"px\", \"%\", \"em\", \"rem\"];\n\n    static widthUnits() {\n        const units = new UnitsOptions();\n        units.add(\"vw\");\n        return units;\n    }\n\n    static heightUnits() {\n        const units = new UnitsOptions();\n        units.add(\"vh\");\n        return units;\n    }\n\n    add(...args: string[]) {\n        this.units.push(...args);\n        return this;\n    }\n\n    remove(...args: string[]) {\n        this.units = this.units.filter(unit => !args.includes(unit));\n        return this;\n    }\n\n    getOptions() {\n        return this.units.map(unit => ({\n            label: unit,\n            value: unit\n        }));\n    }\n}\n"],"mappings":"AAAA,OAAO,MAAMA,YAAY,CAAC;EACdC,KAAK,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC;EAExC,OAAOC,UAAUA,CAAA,EAAG;IAChB,MAAMD,KAAK,GAAG,IAAID,YAAY,CAAC,CAAC;IAChCC,KAAK,CAACE,GAAG,CAAC,IAAI,CAAC;IACf,OAAOF,KAAK;EAChB;EAEA,OAAOG,WAAWA,CAAA,EAAG;IACjB,MAAMH,KAAK,GAAG,IAAID,YAAY,CAAC,CAAC;IAChCC,KAAK,CAACE,GAAG,CAAC,IAAI,CAAC;IACf,OAAOF,KAAK;EAChB;EAEAE,GAAGA,CAAC,GAAGE,IAAc,EAAE;IACnB,IAAI,CAACJ,KAAK,CAACK,IAAI,CAAC,GAAGD,IAAI,CAAC;IACxB,OAAO,IAAI;EACf;EAEAE,MAAMA,CAAC,GAAGF,IAAc,EAAE;IACtB,IAAI,CAACJ,KAAK,GAAG,IAAI,CAACA,KAAK,CAACO,MAAM,CAACC,IAAI,IAAI,CAACJ,IAAI,CAACK,QAAQ,CAACD,IAAI,CAAC,CAAC;IAC5D,OAAO,IAAI;EACf;EAEAE,UAAUA,CAAA,EAAG;IACT,OAAO,IAAI,CAACV,KAAK,CAACW,GAAG,CAACH,IAAI,KAAK;MAC3BI,KAAK,EAAEJ,IAAI;MACXK,KAAK,EAAEL;IACX,CAAC,CAAC,CAAC;EACP;AACJ","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitsOptions.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitsOptions.ts"],"sourcesContent":["export class UnitsOptions {\n    private units = [\"px\", \"%\", \"em\", \"rem\"];\n\n    static widthUnits() {\n        const units = new UnitsOptions();\n        units.add(\"vw\");\n        return units;\n    }\n\n    static heightUnits() {\n        const units = new UnitsOptions();\n        units.add(\"vh\");\n        return units;\n    }\n\n    add(...args: string[]) {\n        this.units.push(...args);\n        return this;\n    }\n\n    remove(...args: string[]) {\n        this.units = this.units.filter(unit => !args.includes(unit));\n        return this;\n    }\n\n    getOptions() {\n        return this.units.map(unit => ({\n            label: unit,\n            value: unit\n        }));\n    }\n}\n"],"names":["UnitsOptions","units","args","unit"],"mappings":"AAAO,MAAMA;IAGT,OAAO,aAAa;QAChB,MAAMC,QAAQ,IAAID;QAClBC,MAAM,GAAG,CAAC;QACV,OAAOA;IACX;IAEA,OAAO,cAAc;QACjB,MAAMA,QAAQ,IAAID;QAClBC,MAAM,GAAG,CAAC;QACV,OAAOA;IACX;IAEA,IAAI,GAAGC,IAAc,EAAE;QACnB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAIA;QACnB,OAAO,IAAI;IACf;IAEA,OAAO,GAAGA,IAAc,EAAE;QACtB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAACC,CAAAA,OAAQ,CAACD,KAAK,QAAQ,CAACC;QACtD,OAAO,IAAI;IACf;IAEA,aAAa;QACT,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAACA,CAAAA,OAAS;gBAC3B,OAAOA;gBACP,OAAOA;YACX;IACJ;;aA7BQ,KAAK,GAAG;YAAC;YAAM;YAAK;YAAM;SAAM;;AA8B5C"}