@webiny/app-admin 0.0.0-unstable.de38392959 → 0.0.0-unstable.df7a8bb475

package/ui/elements/form/FileManagerElement/FileManagerElementRenderer.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-import { UIRenderer, UIRenderParams } from "../../../UIRenderer";
-import { FileManagerElement } from "../FileManagerElement";
-import { FormFieldElementRenderProps } from "../FormFieldElement";
-export interface FileManagerElementRenderProps extends FormFieldElementRenderProps {
-    fileManagerElement: FileManagerElement;
-    value: any;
-    showFileManager: () => void;
-    onChange: (value: any) => void;
-}
-export declare class FileManagerElementRenderer extends UIRenderer<FileManagerElement, FormFieldElementRenderProps> {
-    render({ element, props }: UIRenderParams<FileManagerElement, FormFieldElementRenderProps>): React.ReactNode;
-}

package/ui/elements/form/FileManagerElement/FileManagerElementRenderer.js

@@ -1,106 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FileManagerElementRenderer = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-var _react = _interopRequireDefault(require("react"));
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _UIRenderer2 = require("../../../UIRenderer");
-var _FormElementMessage = require("@webiny/ui/FormElementMessage");
-var _FileManager = require("../../../../base/ui/FileManager");
-var ImageUploadWrapper = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "e1g56mwy0",
-  label: "ImageUploadWrapper"
-})({
-  position: "relative",
-  ".disabled": {
-    opacity: 0.75,
-    pointerEvents: "none"
-  },
-  ".mdc-floating-label--float-above": {
-    transform: "scale(0.75)",
-    top: 10,
-    left: 10,
-    color: "var(--mdc-theme-text-secondary-on-background)"
-  },
-  ".mdc-text-field-helper-text": {
-    color: "var(--mdc-theme-text-secondary-on-background)"
-  }
-});
-var FileManagerElementRenderer = /*#__PURE__*/function (_UIRenderer) {
-  (0, _inherits2.default)(FileManagerElementRenderer, _UIRenderer);
-  var _super = (0, _createSuper2.default)(FileManagerElementRenderer);
-  function FileManagerElementRenderer() {
-    (0, _classCallCheck2.default)(this, FileManagerElementRenderer);
-    return _super.apply(this, arguments);
-  }
-  (0, _createClass2.default)(FileManagerElementRenderer, [{
-    key: "render",
-    value: function render(_ref) {
-      var element = _ref.element,
-        props = _ref.props;
-      if (!props.formProps) {
-        throw Error("FileManagerElement must be placed inside of a FormElement.");
-      }
-      var Bind = props.formProps.Bind;
-      var accept = element.getAccept();
-      var label = element.getLabel(props);
-      var description = element.getDescription(props);
-      return /*#__PURE__*/_react.default.createElement(Bind, {
-        name: element.getName(),
-        validators: element.getValidators(props),
-        defaultValue: element.getDefaultValue(props),
-        beforeChange: function beforeChange(value, cb) {
-          return element.onBeforeChange(value, cb);
-        },
-        afterChange: function afterChange(value, form) {
-          return element.onAfterChange(value, form);
-        }
-      }, function (_ref2) {
-        var value = _ref2.value,
-          _onChange = _ref2.onChange,
-          validation = _ref2.validation;
-        return /*#__PURE__*/_react.default.createElement(ImageUploadWrapper, null, label && /*#__PURE__*/_react.default.createElement("div", {
-          className: "mdc-floating-label mdc-floating-label--float-above"
-        }, label), /*#__PURE__*/_react.default.createElement(_FileManager.FileManager, {
-          onChange: function onChange(value) {
-            return _onChange(value ? {
-              id: value.id,
-              src: value.src
-            } : null);
-          },
-          accept: accept,
-          images: !accept,
-          maxSize: element.getMaxSize(),
-          render: function render(_ref3) {
-            var showFileManager = _ref3.showFileManager;
-            return element.getEmptyStateElement().render((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-              fileManagerElement: element,
-              showFileManager: showFileManager,
-              value: value,
-              onChange: function onChange(value) {
-                return _onChange(value ? {
-                  id: value.id,
-                  src: value.src
-                } : null);
-              }
-            }));
-          }
-        }), validation.isValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-          error: true
-        }, validation.message), validation.isValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
-      });
-    }
-  }]);
-  return FileManagerElementRenderer;
-}(_UIRenderer2.UIRenderer);
-exports.FileManagerElementRenderer = FileManagerElementRenderer;
-
-//# sourceMappingURL=FileManagerElementRenderer.js.map

package/ui/elements/form/FileManagerElement/FileManagerElementRenderer.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_styled","_UIRenderer2","_FormElementMessage","_FileManager","ImageUploadWrapper","styled","target","label","position","opacity","pointerEvents","transform","top","left","color","FileManagerElementRenderer","_UIRenderer","_inherits2","default","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","value","render","_ref","element","props","formProps","Error","Bind","accept","getAccept","getLabel","description","getDescription","createElement","name","getName","validators","getValidators","defaultValue","getDefaultValue","beforeChange","cb","onBeforeChange","afterChange","form","onAfterChange","_ref2","onChange","validation","className","FileManager","id","src","images","maxSize","getMaxSize","_ref3","showFileManager","getEmptyStateElement","_objectSpread2","fileManagerElement","isValid","FormElementMessage","error","message","UIRenderer","exports"],"sources":["FileManagerElementRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { UIRenderer, UIRenderParams } from \"~/ui/UIRenderer\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { FileManagerElement } from \"~/ui/elements/form/FileManagerElement\";\nimport { FileManager, FileManagerFileItem } from \"~/base/ui/FileManager\";\nimport { FormFieldElementRenderProps } from \"~/ui/elements/form/FormFieldElement\";\n\nconst ImageUploadWrapper = styled(\"div\")({\n    position: \"relative\",\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \".mdc-floating-label--float-above\": {\n        transform: \"scale(0.75)\",\n        top: 10,\n        left: 10,\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    },\n    \".mdc-text-field-helper-text\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    }\n});\n\nexport interface FileManagerElementRenderProps extends FormFieldElementRenderProps {\n    fileManagerElement: FileManagerElement;\n    value: any;\n    showFileManager: () => void;\n    onChange: (value: any) => void;\n}\n\nexport class FileManagerElementRenderer extends UIRenderer<\n    FileManagerElement,\n    FormFieldElementRenderProps\n> {\n    public override render({\n        element,\n        props\n    }: UIRenderParams<FileManagerElement, FormFieldElementRenderProps>): React.ReactNode {\n        if (!props.formProps) {\n            throw Error(`FileManagerElement must be placed inside of a FormElement.`);\n        }\n\n        const { Bind } = props.formProps;\n\n        const accept = element.getAccept();\n        const label = element.getLabel(props);\n        const description = element.getDescription(props);\n\n        return (\n            <Bind\n                name={element.getName()}\n                validators={element.getValidators(props)}\n                defaultValue={element.getDefaultValue(props)}\n                beforeChange={(value: string, cb) => element.onBeforeChange(value, cb)}\n                afterChange={(value: string, form) => element.onAfterChange(value, form)}\n            >\n                {({ value, onChange, validation }) => (\n                    <ImageUploadWrapper>\n                        {label && (\n                            <div className=\"mdc-floating-label mdc-floating-label--float-above\">\n                                {label}\n                            </div>\n                        )}\n\n                        <FileManager\n                            onChange={(value: FileManagerFileItem | null) =>\n                                onChange(value ? { id: value.id, src: value.src } : null)\n                            }\n                            accept={accept}\n                            images={!accept}\n                            maxSize={element.getMaxSize()}\n                            render={({ showFileManager }) =>\n                                element.getEmptyStateElement().render({\n                                    ...props,\n                                    fileManagerElement: element,\n                                    showFileManager,\n                                    value,\n                                    onChange: (value: FileManagerFileItem | null) =>\n                                        onChange(value ? { id: value.id, src: value.src } : null)\n                                })\n                            }\n                        />\n\n                        {validation.isValid === false && (\n                            <FormElementMessage error>{validation.message}</FormElementMessage>\n                        )}\n                        {validation.isValid !== false && description && (\n                            <FormElementMessage>{description}</FormElementMessage>\n                        )}\n                    </ImageUploadWrapper>\n                )}\n            </Bind>\n        );\n    }\n}\n"],"mappings":"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"}

package/ui/elements/form/FileManagerElement/styled.d.ts

@@ -1,25 +0,0 @@
-/// <reference types="react" />
-export declare const AddImageIconWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AddImageWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AddImageWrapperRound: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const RemoveImage: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const FilePreviewWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/ui/elements/form/FileManagerElement/styled.js

@@ -1,117 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RemoveImage = exports.FilePreviewWrapper = exports.AddImageWrapperRound = exports.AddImageWrapper = exports.AddImageIconWrapper = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _styled2 = _interopRequireDefault(require("@emotion/styled"));
-var _hover, _styled;
-var AddImageIconWrapper = /*#__PURE__*/(0, _styled2.default)("div", {
-  target: "e185ja7p0",
-  label: "AddImageIconWrapper"
-})({
-  color: "var(--mdc-theme-text-secondary-on-background)",
-  ">svg": {
-    width: "100%",
-    height: "100%",
-    maxWidth: 50,
-    maxHeight: 50,
-    display: "block",
-    opacity: 0.5,
-    margin: "0 auto"
-  }
-});
-exports.AddImageIconWrapper = AddImageIconWrapper;
-var AddImageWrapper = /*#__PURE__*/(0, _styled2.default)("div", {
-  target: "e185ja7p1",
-  label: "AddImageWrapper"
-})({
-  width: "100%",
-  height: "100%",
-  minHeight: 50,
-  minWidth: 50,
-  textAlign: "center",
-  backgroundColor: "var(--mdc-theme-on-background)",
-  borderRadius: 0,
-  borderBottom: "1px solid var(--mdc-theme-text-hint-on-background)",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-around",
-  flexDirection: "column",
-  transition: "color 0.2s",
-  cursor: "pointer",
-  padding: 10,
-  boxSizing: "border-box",
-  "&:hover": {
-    backgroundColor: "rgba(0,0,0, 0.5)",
-    borderBottom: "1px solid var(--mdc-theme-on-surface)"
-  }
-});
-exports.AddImageWrapper = AddImageWrapper;
-var AddImageWrapperRound = /*#__PURE__*/(0, _styled2.default)(AddImageWrapper, {
-  target: "e185ja7p2",
-  label: "AddImageWrapperRound"
-})({
-  margin: "auto",
-  width: "150px",
-  height: "150px",
-  borderRadius: "50%"
-});
-exports.AddImageWrapperRound = AddImageWrapperRound;
-var RemoveImage = /*#__PURE__*/(0, _styled2.default)("div", {
-  target: "e185ja7p3",
-  label: "RemoveImage"
-})({
-  position: "absolute",
-  cursor: "pointer",
-  top: 10,
-  right: 10,
-  display: "none",
-  color: "white",
-  opacity: 0.5,
-  "&:hover": {
-    opacity: 0.75
-  }
-});
-exports.RemoveImage = RemoveImage;
-var FilePreviewWrapper = /*#__PURE__*/(0, _styled2.default)("div", {
-  target: "e185ja7p4",
-  label: "FilePreviewWrapper"
-})((_styled = {
-  width: "100%",
-  height: "100%",
-  minHeight: 90,
-  minWidth: 50,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-around",
-  flexDirection: "column",
-  boxSizing: "border-box",
-  position: "relative",
-  backgroundColor: "var(--mdc-theme-on-background)",
-  borderRadius: 0,
-  borderBottom: "1px solid var(--mdc-theme-text-hint-on-background)"
-}, (0, _defineProperty2.default)(_styled, AddImageWrapper, (0, _defineProperty2.default)({
-  position: "absolute",
-  display: "none",
-  top: 0,
-  height: "100%",
-  zIndex: 1,
-  backgroundColor: "rgba(0,0,0, 0.75)"
-}, AddImageIconWrapper, {
-  top: "50%",
-  left: "50%",
-  transform: "translateY(-50%) translateX(-50%)",
-  position: "absolute",
-  color: "white"
-})), (0, _defineProperty2.default)(_styled, "&:hover", (_hover = {}, (0, _defineProperty2.default)(_hover, AddImageWrapper, {
-  display: "block"
-}), (0, _defineProperty2.default)(_hover, RemoveImage, {
-  display: "block",
-  zIndex: 2
-}), _hover)), _styled));
-exports.FilePreviewWrapper = FilePreviewWrapper;
-
-//# sourceMappingURL=styled.js.map

package/ui/elements/form/FileManagerElement/styled.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_styled2","_interopRequireDefault","require","_hover","_styled","AddImageIconWrapper","styled","target","label","color","width","height","maxWidth","maxHeight","display","opacity","margin","exports","AddImageWrapper","minHeight","minWidth","textAlign","backgroundColor","borderRadius","borderBottom","alignItems","justifyContent","flexDirection","transition","cursor","padding","boxSizing","AddImageWrapperRound","RemoveImage","position","top","right","FilePreviewWrapper","_defineProperty2","default","zIndex","left","transform"],"sources":["styled.ts"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const AddImageIconWrapper = styled(\"div\")({\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    \">svg\": {\n        width: \"100%\",\n        height: \"100%\",\n        maxWidth: 50,\n        maxHeight: 50,\n        display: \"block\",\n        opacity: 0.5,\n        margin: \"0 auto\"\n    }\n});\n\nexport const AddImageWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    minHeight: 50,\n    minWidth: 50,\n    textAlign: \"center\",\n    backgroundColor: \"var(--mdc-theme-on-background)\",\n    borderRadius: 0,\n    borderBottom: \"1px solid var(--mdc-theme-text-hint-on-background)\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n    flexDirection: \"column\",\n    transition: \"color 0.2s\",\n    cursor: \"pointer\",\n    padding: 10,\n    boxSizing: \"border-box\",\n    \"&:hover\": {\n        backgroundColor: \"rgba(0,0,0, 0.5)\",\n        borderBottom: \"1px solid var(--mdc-theme-on-surface)\"\n    }\n});\n\nexport const AddImageWrapperRound = styled(AddImageWrapper)({\n    margin: \"auto\",\n    width: \"150px\",\n    height: \"150px\",\n    borderRadius: \"50%\"\n});\n\nexport const RemoveImage = styled(\"div\")({\n    position: \"absolute\",\n    cursor: \"pointer\",\n    top: 10,\n    right: 10,\n    display: \"none\",\n    color: \"white\",\n    opacity: 0.5,\n    \"&:hover\": {\n        opacity: 0.75\n    }\n});\n\nexport const FilePreviewWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    minHeight: 90,\n    minWidth: 50,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n    flexDirection: \"column\",\n    boxSizing: \"border-box\",\n    position: \"relative\",\n    backgroundColor: \"var(--mdc-theme-on-background)\",\n    borderRadius: 0,\n    borderBottom: \"1px solid var(--mdc-theme-text-hint-on-background)\",\n    // @ts-expect-error\n    [AddImageWrapper]: {\n        position: \"absolute\",\n        display: \"none\",\n        top: 0,\n        height: \"100%\",\n        zIndex: 1,\n        backgroundColor: \"rgba(0,0,0, 0.75)\",\n        // @ts-expect-error\n        [AddImageIconWrapper]: {\n            top: \"50%\",\n            left: \"50%\",\n            transform: \"translateY(-50%) translateX(-50%)\",\n            position: \"absolute\",\n            color: \"white\"\n        }\n    },\n    \"&:hover\": {\n        // @ts-expect-error\n        [AddImageWrapper]: {\n            display: \"block\"\n        },\n        // @ts-expect-error\n        [RemoveImage]: {\n            display: \"block\",\n            zIndex: 2\n        }\n    }\n});\n"],"mappings":"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"}

package/ui/elements/form/FileManagerElement.d.ts

@@ -1,24 +0,0 @@
-import { UIElement } from "../../UIElement";
-import { FormFieldElement, FormFieldElementConfig } from "./FormFieldElement";
-export interface FileManagerElementConfig extends FormFieldElementConfig {
-    accept?: string[];
-    maxSize?: number | string;
-    multipleMaxCount?: number;
-    multipleMaxSize?: number | string;
-    onChangePickAttributes?: string[];
-}
-export declare class FileManagerElement extends FormFieldElement<FileManagerElementConfig> {
-    private readonly _emptyStateElement;
-    constructor(id: string, config: FileManagerElementConfig);
-    getEmptyStateElement(): UIElement<import("@webiny/ui-composer/UIElement").UIElementConfig<any>>;
-    getAccept(): string[] | undefined;
-    setAccept(accept: string[]): void;
-    getMaxSize(): string | number | undefined;
-    setMaxSize(maxSize: number | string): void;
-    getMultipleMaxCount(): number | undefined;
-    setMultipleMaxCount(multipleMaxCount: number): void;
-    getMultipleMaxSize(): string | number | undefined;
-    setMultipleMaxSize(multipleMaxSize: number | string): void;
-    getOnChangePickAttributes(): string[] | undefined;
-    setOnChangePickAttributes(attributes: string[]): void;
-}

package/ui/elements/form/FileManagerElement.js

@@ -1,87 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FileManagerElement = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-var _FormFieldElement2 = require("./FormFieldElement");
-var _FileManagerElementRenderer = require("./FileManagerElement/FileManagerElementRenderer");
-var _EmptyStateElement = require("./FileManagerElement/EmptyStateElement");
-var FileManagerElement = /*#__PURE__*/function (_FormFieldElement) {
-  (0, _inherits2.default)(FileManagerElement, _FormFieldElement);
-  var _super = (0, _createSuper2.default)(FileManagerElement);
-  function FileManagerElement(id, config) {
-    var _this;
-    (0, _classCallCheck2.default)(this, FileManagerElement);
-    _this = _super.call(this, id, config);
-    _this.addRenderer(new _FileManagerElementRenderer.FileManagerElementRenderer());
-    _this._emptyStateElement = new _EmptyStateElement.EmptyStateElement("emptyState");
-    _this.applyPlugins(FileManagerElement);
-    return _this;
-  }
-  (0, _createClass2.default)(FileManagerElement, [{
-    key: "getEmptyStateElement",
-    value: function getEmptyStateElement() {
-      return this._emptyStateElement;
-    }
-  }, {
-    key: "getAccept",
-    value: function getAccept() {
-      return this.config.accept;
-    }
-  }, {
-    key: "setAccept",
-    value: function setAccept(accept) {
-      this.config.accept = accept;
-    }
-  }, {
-    key: "getMaxSize",
-    value: function getMaxSize() {
-      return this.config.maxSize;
-    }
-  }, {
-    key: "setMaxSize",
-    value: function setMaxSize(maxSize) {
-      this.config.maxSize = maxSize;
-    }
-  }, {
-    key: "getMultipleMaxCount",
-    value: function getMultipleMaxCount() {
-      return this.config.multipleMaxCount;
-    }
-  }, {
-    key: "setMultipleMaxCount",
-    value: function setMultipleMaxCount(multipleMaxCount) {
-      this.config.multipleMaxCount = multipleMaxCount;
-    }
-  }, {
-    key: "getMultipleMaxSize",
-    value: function getMultipleMaxSize() {
-      return this.config.multipleMaxSize;
-    }
-  }, {
-    key: "setMultipleMaxSize",
-    value: function setMultipleMaxSize(multipleMaxSize) {
-      this.config.multipleMaxSize = multipleMaxSize;
-    }
-  }, {
-    key: "getOnChangePickAttributes",
-    value: function getOnChangePickAttributes() {
-      return this.config.onChangePickAttributes;
-    }
-  }, {
-    key: "setOnChangePickAttributes",
-    value: function setOnChangePickAttributes(attributes) {
-      this.config.onChangePickAttributes = attributes;
-    }
-  }]);
-  return FileManagerElement;
-}(_FormFieldElement2.FormFieldElement);
-exports.FileManagerElement = FileManagerElement;
-
-//# sourceMappingURL=FileManagerElement.js.map

package/ui/elements/form/FileManagerElement.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_FormFieldElement2","require","_FileManagerElementRenderer","_EmptyStateElement","FileManagerElement","_FormFieldElement","_inherits2","default","_super","_createSuper2","id","config","_this","_classCallCheck2","call","addRenderer","FileManagerElementRenderer","_emptyStateElement","EmptyStateElement","applyPlugins","_createClass2","key","value","getEmptyStateElement","getAccept","accept","setAccept","getMaxSize","maxSize","setMaxSize","getMultipleMaxCount","multipleMaxCount","setMultipleMaxCount","getMultipleMaxSize","multipleMaxSize","setMultipleMaxSize","getOnChangePickAttributes","onChangePickAttributes","setOnChangePickAttributes","attributes","FormFieldElement","exports"],"sources":["FileManagerElement.tsx"],"sourcesContent":["import { UIElement } from \"~/ui/UIElement\";\nimport { FormFieldElement, FormFieldElementConfig } from \"./FormFieldElement\";\nimport { FileManagerElementRenderer } from \"./FileManagerElement/FileManagerElementRenderer\";\nimport { EmptyStateElement } from \"./FileManagerElement/EmptyStateElement\";\n\nexport interface FileManagerElementConfig extends FormFieldElementConfig {\n    // Define mime types that will be shown and accepted by FileManager\n    accept?: string[];\n\n    // Define file's max allowed size (default is \"10mb\").\n    // Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n    maxSize?: number | string;\n\n    // Max number of files in a single batch.\n    multipleMaxCount?: number;\n\n    // Max size of files in a single batch.\n    multipleMaxSize?: number | string;\n\n    // Define properties that are returned on file(s) selection.\n    onChangePickAttributes?: string[];\n\n    // Define whether multiple files can be selected1.\n    // TODO: multiple?: boolean; - create a new renderer for \"multiple=true\" to render multiple files\n    // It should work as in Headless CMS content entry form, see that for an example.\n}\n\nexport class FileManagerElement extends FormFieldElement<FileManagerElementConfig> {\n    private readonly _emptyStateElement: UIElement;\n\n    public constructor(id: string, config: FileManagerElementConfig) {\n        super(id, config);\n\n        this.addRenderer(new FileManagerElementRenderer());\n\n        this._emptyStateElement = new EmptyStateElement(\"emptyState\");\n\n        this.applyPlugins(FileManagerElement);\n    }\n\n    public getEmptyStateElement() {\n        return this._emptyStateElement;\n    }\n\n    public getAccept() {\n        return this.config.accept;\n    }\n\n    public setAccept(accept: string[]) {\n        this.config.accept = accept;\n    }\n\n    public getMaxSize() {\n        return this.config.maxSize;\n    }\n\n    public setMaxSize(maxSize: number | string) {\n        this.config.maxSize = maxSize;\n    }\n\n    public getMultipleMaxCount() {\n        return this.config.multipleMaxCount;\n    }\n\n    public setMultipleMaxCount(multipleMaxCount: number) {\n        this.config.multipleMaxCount = multipleMaxCount;\n    }\n\n    public getMultipleMaxSize() {\n        return this.config.multipleMaxSize;\n    }\n\n    public setMultipleMaxSize(multipleMaxSize: number | string) {\n        this.config.multipleMaxSize = multipleMaxSize;\n    }\n\n    public getOnChangePickAttributes() {\n        return this.config.onChangePickAttributes;\n    }\n\n    public setOnChangePickAttributes(attributes: string[]) {\n        this.config.onChangePickAttributes = attributes;\n    }\n}\n"],"mappings":";;;;;;;;;;;AACA,IAAAA,kBAAA,GAAAC,OAAA;AACA,IAAAC,2BAAA,GAAAD,OAAA;AACA,IAAAE,kBAAA,GAAAF,OAAA;AAA2E,IAwB9DG,kBAAkB,0BAAAC,iBAAA;EAAA,IAAAC,UAAA,CAAAC,OAAA,EAAAH,kBAAA,EAAAC,iBAAA;EAAA,IAAAG,MAAA,OAAAC,aAAA,CAAAF,OAAA,EAAAH,kBAAA;EAG3B,SAAAA,mBAAmBM,EAAU,EAAEC,MAAgC,EAAE;IAAA,IAAAC,KAAA;IAAA,IAAAC,gBAAA,CAAAN,OAAA,QAAAH,kBAAA;IAC7DQ,KAAA,GAAAJ,MAAA,CAAAM,IAAA,OAAMJ,EAAE,EAAEC,MAAM;IAEhBC,KAAA,CAAKG,WAAW,CAAC,IAAIC,sDAA0B,CAAC,CAAC,CAAC;IAElDJ,KAAA,CAAKK,kBAAkB,GAAG,IAAIC,oCAAiB,CAAC,YAAY,CAAC;IAE7DN,KAAA,CAAKO,YAAY,CAACf,kBAAkB,CAAC;IAAC,OAAAQ,KAAA;EAC1C;EAAC,IAAAQ,aAAA,CAAAb,OAAA,EAAAH,kBAAA;IAAAiB,GAAA;IAAAC,KAAA,EAED,SAAAC,qBAAA,EAA8B;MAC1B,OAAO,IAAI,CAACN,kBAAkB;IAClC;EAAC;IAAAI,GAAA;IAAAC,KAAA,EAED,SAAAE,UAAA,EAAmB;MACf,OAAO,IAAI,CAACb,MAAM,CAACc,MAAM;IAC7B;EAAC;IAAAJ,GAAA;IAAAC,KAAA,EAED,SAAAI,UAAiBD,MAAgB,EAAE;MAC/B,IAAI,CAACd,MAAM,CAACc,MAAM,GAAGA,MAAM;IAC/B;EAAC;IAAAJ,GAAA;IAAAC,KAAA,EAED,SAAAK,WAAA,EAAoB;MAChB,OAAO,IAAI,CAAChB,MAAM,CAACiB,OAAO;IAC9B;EAAC;IAAAP,GAAA;IAAAC,KAAA,EAED,SAAAO,WAAkBD,OAAwB,EAAE;MACxC,IAAI,CAACjB,MAAM,CAACiB,OAAO,GAAGA,OAAO;IACjC;EAAC;IAAAP,GAAA;IAAAC,KAAA,EAED,SAAAQ,oBAAA,EAA6B;MACzB,OAAO,IAAI,CAACnB,MAAM,CAACoB,gBAAgB;IACvC;EAAC;IAAAV,GAAA;IAAAC,KAAA,EAED,SAAAU,oBAA2BD,gBAAwB,EAAE;MACjD,IAAI,CAACpB,MAAM,CAACoB,gBAAgB,GAAGA,gBAAgB;IACnD;EAAC;IAAAV,GAAA;IAAAC,KAAA,EAED,SAAAW,mBAAA,EAA4B;MACxB,OAAO,IAAI,CAACtB,MAAM,CAACuB,eAAe;IACtC;EAAC;IAAAb,GAAA;IAAAC,KAAA,EAED,SAAAa,mBAA0BD,eAAgC,EAAE;MACxD,IAAI,CAACvB,MAAM,CAACuB,eAAe,GAAGA,eAAe;IACjD;EAAC;IAAAb,GAAA;IAAAC,KAAA,EAED,SAAAc,0BAAA,EAAmC;MAC/B,OAAO,IAAI,CAACzB,MAAM,CAAC0B,sBAAsB;IAC7C;EAAC;IAAAhB,GAAA;IAAAC,KAAA,EAED,SAAAgB,0BAAiCC,UAAoB,EAAE;MACnD,IAAI,CAAC5B,MAAM,CAAC0B,sBAAsB,GAAGE,UAAU;IACnD;EAAC;EAAA,OAAAnC,kBAAA;AAAA,EAvDmCoC,mCAAgB;AAAAC,OAAA,CAAArC,kBAAA,GAAAA,kBAAA"}

package/ui/elements/form/FormElement.d.ts

@@ -1,21 +0,0 @@
-import React from "react";
-import { FormOnSubmit, FormRenderPropParams } from "@webiny/form";
-import { UIElement, UIElementConfig, UiElementRenderProps } from "../../UIElement";
-interface FormElementConfig extends UIElementConfig {
-    onSubmit: FormOnSubmit;
-    getData(): Record<string, any>;
-    getInvalidFields?(): Record<string, any>;
-    isDisabled?(): boolean;
-    onChange?: FormOnSubmit;
-    onInvalid?: () => void;
-    submitOnEnter?: boolean;
-    validateOnFirstSubmit?: boolean;
-}
-export interface FormElementRenderProps extends UiElementRenderProps {
-    formProps: FormRenderPropParams;
-}
-export declare class FormElement extends UIElement<FormElementConfig> {
-    constructor(id: string, config: FormElementConfig);
-    render(props: FormElementRenderProps): React.ReactNode;
-}
-export {};

package/ui/elements/form/FormElement.js

@@ -1,47 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FormElement = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-var _react = _interopRequireWildcard(require("react"));
-var _form = require("@webiny/form");
-var _UIElement2 = require("../../UIElement");
-var FormElement = /*#__PURE__*/function (_UIElement) {
-  (0, _inherits2.default)(FormElement, _UIElement);
-  var _super = (0, _createSuper2.default)(FormElement);
-  function FormElement(id, config) {
-    var _this;
-    (0, _classCallCheck2.default)(this, FormElement);
-    _this = _super.call(this, id, config);
-    _this.useGrid(false);
-    return _this;
-  }
-  (0, _createClass2.default)(FormElement, [{
-    key: "render",
-    value: function render(props) {
-      var _this2 = this;
-      return /*#__PURE__*/_react.default.createElement(_form.Form, {
-        onSubmit: this.config.onSubmit,
-        data: this.config.getData()
-      }, function (formProps) {
-        return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, (0, _get2.default)((0, _getPrototypeOf2.default)(FormElement.prototype), "render", _this2).call(_this2, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-          formProps: formProps
-        })));
-      });
-    }
-  }]);
-  return FormElement;
-}(_UIElement2.UIElement);
-exports.FormElement = FormElement;
-
-//# sourceMappingURL=FormElement.js.map

package/ui/elements/form/FormElement.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_form","_UIElement2","FormElement","_UIElement","_inherits2","default","_super","_createSuper2","id","config","_this","_classCallCheck2","call","useGrid","_createClass2","key","value","render","props","_this2","createElement","Form","onSubmit","data","getData","formProps","Fragment","_get2","_getPrototypeOf2","prototype","_objectSpread2","UIElement","exports"],"sources":["FormElement.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport { Form, FormOnSubmit, FormRenderPropParams } from \"@webiny/form\";\nimport { UIElement, UIElementConfig, UiElementRenderProps } from \"~/ui/UIElement\";\n\ninterface FormElementConfig extends UIElementConfig {\n    onSubmit: FormOnSubmit;\n    getData(): Record<string, any>;\n    getInvalidFields?(): Record<string, any>;\n    isDisabled?(): boolean;\n    onChange?: FormOnSubmit;\n    onInvalid?: () => void;\n    submitOnEnter?: boolean;\n    validateOnFirstSubmit?: boolean;\n}\n\nexport interface FormElementRenderProps extends UiElementRenderProps {\n    formProps: FormRenderPropParams;\n}\n\nexport class FormElement extends UIElement<FormElementConfig> {\n    public constructor(id: string, config: FormElementConfig) {\n        super(id, config);\n\n        this.useGrid(false);\n    }\n\n    public override render(props: FormElementRenderProps): React.ReactNode {\n        return (\n            <Form onSubmit={this.config.onSubmit} data={this.config.getData()}>\n                {formProps => <Fragment>{super.render({ ...props, formProps })}</Fragment>}\n            </Form>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAAkF,IAiBrEG,WAAW,0BAAAC,UAAA;EAAA,IAAAC,UAAA,CAAAC,OAAA,EAAAH,WAAA,EAAAC,UAAA;EAAA,IAAAG,MAAA,OAAAC,aAAA,CAAAF,OAAA,EAAAH,WAAA;EACpB,SAAAA,YAAmBM,EAAU,EAAEC,MAAyB,EAAE;IAAA,IAAAC,KAAA;IAAA,IAAAC,gBAAA,CAAAN,OAAA,QAAAH,WAAA;IACtDQ,KAAA,GAAAJ,MAAA,CAAAM,IAAA,OAAMJ,EAAE,EAAEC,MAAM;IAEhBC,KAAA,CAAKG,OAAO,CAAC,KAAK,CAAC;IAAC,OAAAH,KAAA;EACxB;EAAC,IAAAI,aAAA,CAAAT,OAAA,EAAAH,WAAA;IAAAa,GAAA;IAAAC,KAAA,EAED,SAAAC,OAAuBC,KAA6B,EAAmB;MAAA,IAAAC,MAAA;MACnE,oBACItB,MAAA,CAAAQ,OAAA,CAAAe,aAAA,CAACpB,KAAA,CAAAqB,IAAI;QAACC,QAAQ,EAAE,IAAI,CAACb,MAAM,CAACa,QAAS;QAACC,IAAI,EAAE,IAAI,CAACd,MAAM,CAACe,OAAO,CAAC;MAAE,GAC7D,UAAAC,SAAS;QAAA,oBAAI5B,MAAA,CAAAQ,OAAA,CAAAe,aAAA,CAACvB,MAAA,CAAA6B,QAAQ,YAAAC,KAAA,CAAAtB,OAAA,MAAAuB,gBAAA,CAAAvB,OAAA,EAAAH,WAAA,CAAA2B,SAAA,aAAAV,MAAA,EAAAP,IAAA,CAAAO,MAAA,MAAAW,cAAA,CAAAzB,OAAA,MAAAyB,cAAA,CAAAzB,OAAA,MAAoBa,KAAK;UAAEO,SAAS,EAATA;QAAS,GAAc,CAAC;MAAA,CACxE,CAAC;IAEf;EAAC;EAAA,OAAAvB,WAAA;AAAA,EAb4B6B,qBAAS;AAAAC,OAAA,CAAA9B,WAAA,GAAAA,WAAA"}

package/ui/elements/form/FormFieldElement.d.ts

@@ -1,56 +0,0 @@
-import React from "react";
-import { FormRenderPropParams, FormAPI } from "@webiny/form";
-import { UIElement, UIElementConfig } from "../../UIElement";
-import { FormElementRenderProps } from "./FormElement";
-import { Validator } from "@webiny/validation/types";
-export interface FormFieldElementConfig<TRenderProps = FormRenderPropParams> extends UIElementConfig<TRenderProps> {
-    name: string;
-    validators?: GetterWithProps<Validator | Validator[]>;
-    beforeChange?: BeforeChange;
-    afterChange?: AfterChange;
-    defaultValue?: any | GetterWithProps<any>;
-    isDisabled?: boolean | GetterWithProps<boolean>;
-    label?: string | GetterWithProps<string>;
-    description?: string | React.ReactElement | GetterWithProps<string | React.ReactElement>;
-    placeholder?: string | GetterWithProps<string>;
-}
-export interface FormFieldElementRenderProps {
-    formProps: FormRenderPropParams;
-}
-interface BeforeChange {
-    (value: any, callback: BeforeChangeCallback): void;
-}
-interface BeforeChangeCallback {
-    (value: any): void;
-}
-interface AfterChange<T = any, D extends Record<string, any> = Record<string, any>> {
-    (value: T, form: FormAPI<D>): void;
-}
-interface GetterWithProps<T> {
-    (props: FormElementRenderProps): T;
-}
-export declare class FormFieldElement<TConfig extends FormFieldElementConfig = FormFieldElementConfig> extends UIElement<TConfig> {
-    private _beforeChange;
-    private _afterChange;
-    constructor(id: string, config: TConfig);
-    getName(): string;
-    getValidators(props?: FormFieldElementRenderProps): Validator | Validator[];
-    getDefaultValue(props?: FormFieldElementRenderProps): any;
-    getLabel(props?: FormFieldElementRenderProps): string;
-    getDescription(props?: FormFieldElementRenderProps): string | React.ReactElement;
-    getPlaceholder(props?: FormFieldElementRenderProps): string;
-    setLabel(label: string | GetterWithProps<string>): void;
-    setDescription(description: string | React.ReactElement | GetterWithProps<string | React.ReactElement>): void;
-    setPlaceholder(placeholder: string | GetterWithProps<string>): void;
-    setDefaultValue(value: any | GetterWithProps<any>): void;
-    getIsDisabled(props?: FormFieldElementRenderProps): boolean;
-    setIsDisabled(isDisabled: boolean | GetterWithProps<boolean>): void;
-    setValidators(validators: GetterWithProps<Validator>): void;
-    onBeforeChange(value: string, cb: (value: string) => void): void;
-    onAfterChange(value: string, form: FormAPI): void;
-    addBeforeChange(cb: BeforeChange): void;
-    addAfterChange<T = any, D extends Record<string, any> = Record<string, any>>(cb: AfterChange<T, D>): void;
-    setBeforeChange(cb: BeforeChange): void;
-    setAfterChange(cb: AfterChange): void;
-}
-export {};