@webiny/app-admin 0.0.0-unstable.e3f4727c56 → 0.0.0-unstable.eb196ccd2f

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

@@ -1 +1 @@
-{"version":3,"names":["AddImageIconWrapper","styled","color","width","height","maxWidth","maxHeight","display","opacity","margin","AddImageWrapper","minHeight","minWidth","textAlign","backgroundColor","borderRadius","borderBottom","alignItems","justifyContent","flexDirection","transition","cursor","padding","boxSizing","AddImageWrapperRound","RemoveImage","position","top","right","FilePreviewWrapper","zIndex","left","transform"],"sources":["styled.ts"],"sourcesContent":["// @ts-nocheck\nimport 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    [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        [AddImageIconWrapper]: {\n            top: \"50%\",\n            left: \"50%\",\n            transform: \"translateY(-50%) translateX(-50%)\",\n            position: \"absolute\",\n            color: \"white\"\n        }\n    },\n    \"&:hover\": {\n        [AddImageWrapper]: {\n            display: \"block\"\n        },\n        [RemoveImage]: {\n            display: \"block\",\n            zIndex: 2\n        }\n    }\n});\n"],"mappings":";;;;;;;;AACA;AAAqC;AAE9B,IAAMA,mBAAmB,oBAAGC,gBAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC7CC,KAAK,EAAE,+CAA+C;EACtD,MAAM,EAAE;IACJC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,QAAQ,EAAE,EAAE;IACZC,SAAS,EAAE,EAAE;IACbC,OAAO,EAAE,OAAO;IAChBC,OAAO,EAAE,GAAG;IACZC,MAAM,EAAE;EACZ;AACJ,CAAC,CAAC;AAAC;AAEI,IAAMC,eAAe,oBAAGT,gBAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACzCE,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,MAAM;EACdO,SAAS,EAAE,EAAE;EACbC,QAAQ,EAAE,EAAE;EACZC,SAAS,EAAE,QAAQ;EACnBC,eAAe,EAAE,gCAAgC;EACjDC,YAAY,EAAE,CAAC;EACfC,YAAY,EAAE,oDAAoD;EAClET,OAAO,EAAE,MAAM;EACfU,UAAU,EAAE,QAAQ;EACpBC,cAAc,EAAE,cAAc;EAC9BC,aAAa,EAAE,QAAQ;EACvBC,UAAU,EAAE,YAAY;EACxBC,MAAM,EAAE,SAAS;EACjBC,OAAO,EAAE,EAAE;EACXC,SAAS,EAAE,YAAY;EACvB,SAAS,EAAE;IACPT,eAAe,EAAE,kBAAkB;IACnCE,YAAY,EAAE;EAClB;AACJ,CAAC,CAAC;AAAC;AAEI,IAAMQ,oBAAoB,oBAAGvB,gBAAM,EAACS,eAAe;EAAA;EAAA;AAAA,GAAE;EACxDD,MAAM,EAAE,MAAM;EACdN,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE,OAAO;EACfW,YAAY,EAAE;AAClB,CAAC,CAAC;AAAC;AAEI,IAAMU,WAAW,oBAAGxB,gBAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACrCyB,QAAQ,EAAE,UAAU;EACpBL,MAAM,EAAE,SAAS;EACjBM,GAAG,EAAE,EAAE;EACPC,KAAK,EAAE,EAAE;EACTrB,OAAO,EAAE,MAAM;EACfL,KAAK,EAAE,OAAO;EACdM,OAAO,EAAE,GAAG;EACZ,SAAS,EAAE;IACPA,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAAC;AAEI,IAAMqB,kBAAkB,oBAAG5B,gBAAM,EAAC,KAAK;EAAA;EAAA;AAAA;EAC1CE,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,MAAM;EACdO,SAAS,EAAE,EAAE;EACbC,QAAQ,EAAE,EAAE;EACZL,OAAO,EAAE,MAAM;EACfU,UAAU,EAAE,QAAQ;EACpBC,cAAc,EAAE,cAAc;EAC9BC,aAAa,EAAE,QAAQ;EACvBI,SAAS,EAAE,YAAY;EACvBG,QAAQ,EAAE,UAAU;EACpBZ,eAAe,EAAE,gCAAgC;EACjDC,YAAY,EAAE,CAAC;EACfC,YAAY,EAAE;AAAoD,0CACjEN,eAAe;EACZgB,QAAQ,EAAE,UAAU;EACpBnB,OAAO,EAAE,MAAM;EACfoB,GAAG,EAAE,CAAC;EACNvB,MAAM,EAAE,MAAM;EACd0B,MAAM,EAAE,CAAC;EACThB,eAAe,EAAE;AAAmB,GACnCd,mBAAmB,EAAG;EACnB2B,GAAG,EAAE,KAAK;EACVI,IAAI,EAAE,KAAK;EACXC,SAAS,EAAE,mCAAmC;EAC9CN,QAAQ,EAAE,UAAU;EACpBxB,KAAK,EAAE;AACX,CAAC,2CAEL,SAAS,sDACJQ,eAAe,EAAG;EACfH,OAAO,EAAE;AACb,CAAC,yCACAkB,WAAW,EAAG;EACXlB,OAAO,EAAE,OAAO;EAChBuB,MAAM,EAAE;AACZ,CAAC,sBAEP;AAAC"}
+{"version":3,"names":["AddImageIconWrapper","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","AddImageWrapper","AddImageWrapperRound","RemoveImage","FilePreviewWrapper","width","height","minHeight","minWidth","display","alignItems","justifyContent","flexDirection","boxSizing","position","backgroundColor","borderRadius","borderBottom","top","zIndex","left","transform","color"],"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":";;AAEA,OAAO,MAAMA,mBAAmB,gBAAGC,OAAA,CAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAW/C,CAAC;AAEF,OAAO,MAAMC,eAAe,gBAAGX,OAAA,CAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAqB3C,CAAC;AAEF,OAAO,MAAME,oBAAoB,gBAAGZ,OAAA,CAAOW,eAAe,EAAAV,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAK1D,CAAC;AAEF,OAAO,MAAMG,WAAW,gBAAGb,OAAA,CAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAWvC,CAAC;AAEF,OAAO,MAAMI,kBAAkB,gBAAGd,OAAA,CAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAC;EAC5CU,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,MAAM;EACdC,SAAS,EAAE,EAAE;EACbC,QAAQ,EAAE,EAAE;EACZC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,cAAc,EAAE,cAAc;EAC9BC,aAAa,EAAE,QAAQ;EACvBC,SAAS,EAAE,YAAY;EACvBC,QAAQ,EAAE,UAAU;EACpBC,eAAe,EAAE,gCAAgC;EACjDC,YAAY,EAAE,CAAC;EACfC,YAAY,EAAE,oDAAoD;EAClE;EACA,CAAChB,eAAe,GAAG;IACfa,QAAQ,EAAE,UAAU;IACpBL,OAAO,EAAE,MAAM;IACfS,GAAG,EAAE,CAAC;IACNZ,MAAM,EAAE,MAAM;IACda,MAAM,EAAE,CAAC;IACTJ,eAAe,EAAE,mBAAmB;IACpC;IACA,CAAC1B,mBAAmB,GAAG;MACnB6B,GAAG,EAAE,KAAK;MACVE,IAAI,EAAE,KAAK;MACXC,SAAS,EAAE,mCAAmC;MAC9CP,QAAQ,EAAE,UAAU;MACpBQ,KAAK,EAAE;IACX;EACJ,CAAC;EACD,SAAS,EAAE;IACP;IACA,CAACrB,eAAe,GAAG;MACfQ,OAAO,EAAE;IACb,CAAC;IACD;IACA,CAACN,WAAW,GAAG;MACXM,OAAO,EAAE,OAAO;MAChBU,MAAM,EAAE;IACZ;EACJ;AACJ,CAAC,EAAA5B,OAAA,CAAAC,GAAA,CAAAC,QAAA,uxHAAC","ignoreList":[]}

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

@@ -1,5 +1,6 @@
-import { UIElement } from "../../UIElement";
-import { FormFieldElement, FormFieldElementConfig } from "./FormFieldElement";
+import type { UIElement } from "../../UIElement";
+import type { FormFieldElementConfig } from "./FormFieldElement";
+import { FormFieldElement } from "./FormFieldElement";
 export interface FileManagerElementConfig extends FormFieldElementConfig {
     accept?: string[];
     maxSize?: number | string;

package/ui/elements/form/FileManagerElement.js

@@ -1,88 +1,46 @@
-"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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-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);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_emptyStateElement", void 0);
-    _this.addRenderer(new _FileManagerElementRenderer.FileManagerElementRenderer());
-    _this._emptyStateElement = new _EmptyStateElement.EmptyStateElement("emptyState");
-    _this.applyPlugins(FileManagerElement);
-    return _this;
+import { FormFieldElement } from "./FormFieldElement";
+import { FileManagerElementRenderer } from "./FileManagerElement/FileManagerElementRenderer";
+import { EmptyStateElement } from "./FileManagerElement/EmptyStateElement";
+export class FileManagerElement extends FormFieldElement {
+  constructor(id, config) {
+    super(id, config);
+    this.addRenderer(new FileManagerElementRenderer());
+    this._emptyStateElement = new EmptyStateElement("emptyState");
+    this.applyPlugins(FileManagerElement);
+  }
+  getEmptyStateElement() {
+    return this._emptyStateElement;
+  }
+  getAccept() {
+    return this.config.accept;
+  }
+  setAccept(accept) {
+    this.config.accept = accept;
+  }
+  getMaxSize() {
+    return this.config.maxSize;
+  }
+  setMaxSize(maxSize) {
+    this.config.maxSize = maxSize;
+  }
+  getMultipleMaxCount() {
+    return this.config.multipleMaxCount;
   }
-  (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;
+  setMultipleMaxCount(multipleMaxCount) {
+    this.config.multipleMaxCount = multipleMaxCount;
+  }
+  getMultipleMaxSize() {
+    return this.config.multipleMaxSize;
+  }
+  setMultipleMaxSize(multipleMaxSize) {
+    this.config.multipleMaxSize = multipleMaxSize;
+  }
+  getOnChangePickAttributes() {
+    return this.config.onChangePickAttributes;
+  }
+  setOnChangePickAttributes(attributes) {
+    this.config.onChangePickAttributes = attributes;
+  }
+}
+
+//# sourceMappingURL=FileManagerElement.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["FileManagerElement","id","config","addRenderer","FileManagerElementRenderer","_emptyStateElement","EmptyStateElement","applyPlugins","accept","maxSize","multipleMaxCount","multipleMaxSize","onChangePickAttributes","attributes","FormFieldElement"],"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;AACA;AACA;AAA2E,IAwB9DA,kBAAkB;EAAA;EAAA;EAG3B,4BAAmBC,EAAU,EAAEC,MAAgC,EAAE;IAAA;IAAA;IAC7D,0BAAMD,EAAE,EAAEC,MAAM;IAAE;IAElB,MAAKC,WAAW,CAAC,IAAIC,sDAA0B,EAAE,CAAC;IAElD,MAAKC,kBAAkB,GAAG,IAAIC,oCAAiB,CAAC,YAAY,CAAC;IAE7D,MAAKC,YAAY,CAACP,kBAAkB,CAAC;IAAC;EAC1C;EAAC;IAAA;IAAA,OAED,gCAA8B;MAC1B,OAAO,IAAI,CAACK,kBAAkB;IAClC;EAAC;IAAA;IAAA,OAED,qBAAmB;MACf,OAAO,IAAI,CAACH,MAAM,CAACM,MAAM;IAC7B;EAAC;IAAA;IAAA,OAED,mBAAiBA,MAAgB,EAAE;MAC/B,IAAI,CAACN,MAAM,CAACM,MAAM,GAAGA,MAAM;IAC/B;EAAC;IAAA;IAAA,OAED,sBAAoB;MAChB,OAAO,IAAI,CAACN,MAAM,CAACO,OAAO;IAC9B;EAAC;IAAA;IAAA,OAED,oBAAkBA,OAAwB,EAAE;MACxC,IAAI,CAACP,MAAM,CAACO,OAAO,GAAGA,OAAO;IACjC;EAAC;IAAA;IAAA,OAED,+BAA6B;MACzB,OAAO,IAAI,CAACP,MAAM,CAACQ,gBAAgB;IACvC;EAAC;IAAA;IAAA,OAED,6BAA2BA,gBAAwB,EAAE;MACjD,IAAI,CAACR,MAAM,CAACQ,gBAAgB,GAAGA,gBAAgB;IACnD;EAAC;IAAA;IAAA,OAED,8BAA4B;MACxB,OAAO,IAAI,CAACR,MAAM,CAACS,eAAe;IACtC;EAAC;IAAA;IAAA,OAED,4BAA0BA,eAAgC,EAAE;MACxD,IAAI,CAACT,MAAM,CAACS,eAAe,GAAGA,eAAe;IACjD;EAAC;IAAA;IAAA,OAED,qCAAmC;MAC/B,OAAO,IAAI,CAACT,MAAM,CAACU,sBAAsB;IAC7C;EAAC;IAAA;IAAA,OAED,mCAAiCC,UAAoB,EAAE;MACnD,IAAI,CAACX,MAAM,CAACU,sBAAsB,GAAGC,UAAU;IACnD;EAAC;EAAA;AAAA,EAvDmCC,mCAAgB;AAAA"}
+{"version":3,"names":["FormFieldElement","FileManagerElementRenderer","EmptyStateElement","FileManagerElement","constructor","id","config","addRenderer","_emptyStateElement","applyPlugins","getEmptyStateElement","getAccept","accept","setAccept","getMaxSize","maxSize","setMaxSize","getMultipleMaxCount","multipleMaxCount","setMultipleMaxCount","getMultipleMaxSize","multipleMaxSize","setMultipleMaxSize","getOnChangePickAttributes","onChangePickAttributes","setOnChangePickAttributes","attributes"],"sources":["FileManagerElement.tsx"],"sourcesContent":["import type { UIElement } from \"~/ui/UIElement\";\nimport type { FormFieldElementConfig } from \"./FormFieldElement\";\nimport { FormFieldElement } 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":"AAEA,SAASA,gBAAgB;AACzB,SAASC,0BAA0B;AACnC,SAASC,iBAAiB;AAwB1B,OAAO,MAAMC,kBAAkB,SAASH,gBAAgB,CAA2B;EAGxEI,WAAWA,CAACC,EAAU,EAAEC,MAAgC,EAAE;IAC7D,KAAK,CAACD,EAAE,EAAEC,MAAM,CAAC;IAEjB,IAAI,CAACC,WAAW,CAAC,IAAIN,0BAA0B,CAAC,CAAC,CAAC;IAElD,IAAI,CAACO,kBAAkB,GAAG,IAAIN,iBAAiB,CAAC,YAAY,CAAC;IAE7D,IAAI,CAACO,YAAY,CAACN,kBAAkB,CAAC;EACzC;EAEOO,oBAAoBA,CAAA,EAAG;IAC1B,OAAO,IAAI,CAACF,kBAAkB;EAClC;EAEOG,SAASA,CAAA,EAAG;IACf,OAAO,IAAI,CAACL,MAAM,CAACM,MAAM;EAC7B;EAEOC,SAASA,CAACD,MAAgB,EAAE;IAC/B,IAAI,CAACN,MAAM,CAACM,MAAM,GAAGA,MAAM;EAC/B;EAEOE,UAAUA,CAAA,EAAG;IAChB,OAAO,IAAI,CAACR,MAAM,CAACS,OAAO;EAC9B;EAEOC,UAAUA,CAACD,OAAwB,EAAE;IACxC,IAAI,CAACT,MAAM,CAACS,OAAO,GAAGA,OAAO;EACjC;EAEOE,mBAAmBA,CAAA,EAAG;IACzB,OAAO,IAAI,CAACX,MAAM,CAACY,gBAAgB;EACvC;EAEOC,mBAAmBA,CAACD,gBAAwB,EAAE;IACjD,IAAI,CAACZ,MAAM,CAACY,gBAAgB,GAAGA,gBAAgB;EACnD;EAEOE,kBAAkBA,CAAA,EAAG;IACxB,OAAO,IAAI,CAACd,MAAM,CAACe,eAAe;EACtC;EAEOC,kBAAkBA,CAACD,eAAgC,EAAE;IACxD,IAAI,CAACf,MAAM,CAACe,eAAe,GAAGA,eAAe;EACjD;EAEOE,yBAAyBA,CAAA,EAAG;IAC/B,OAAO,IAAI,CAACjB,MAAM,CAACkB,sBAAsB;EAC7C;EAEOC,yBAAyBA,CAACC,UAAoB,EAAE;IACnD,IAAI,CAACpB,MAAM,CAACkB,sBAAsB,GAAGE,UAAU;EACnD;AACJ","ignoreList":[]}

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

@@ -1,6 +1,7 @@
 import React from "react";
-import { FormOnSubmit, FormRenderPropParams } from "@webiny/form";
-import { UIElement, UIElementConfig, UiElementRenderProps } from "../../UIElement";
+import type { FormOnSubmit, FormRenderPropParams } from "@webiny/form";
+import type { UIElementConfig, UiElementRenderProps } from "../../UIElement";
+import { UIElement } from "../../UIElement";
 interface FormElementConfig extends UIElementConfig {
     onSubmit: FormOnSubmit;
     getData(): Record<string, any>;

package/ui/elements/form/FormElement.js

@@ -1,45 +1,20 @@
-"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;
+import React, { Fragment } from "react";
+import { Form } from "@webiny/form";
+import { UIElement } from "../../UIElement";
+export class FormElement extends UIElement {
+  constructor(id, config) {
+    super(id, config);
+    this.useGrid(false);
+  }
+  render(props) {
+    return /*#__PURE__*/React.createElement(Form, {
+      onSubmit: this.config.onSubmit,
+      data: this.config.getData()
+    }, formProps => /*#__PURE__*/React.createElement(Fragment, null, super.render({
+      ...props,
+      formProps
+    })));
   }
-  (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 +1 @@
-{"version":3,"names":["FormElement","id","config","useGrid","props","onSubmit","getData","formProps","UIElement"],"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;AACA;AACA;AAAkF,IAiBrEA,WAAW;EAAA;EAAA;EACpB,qBAAmBC,EAAU,EAAEC,MAAyB,EAAE;IAAA;IAAA;IACtD,0BAAMD,EAAE,EAAEC,MAAM;IAEhB,MAAKC,OAAO,CAAC,KAAK,CAAC;IAAC;EACxB;EAAC;IAAA;IAAA,OAED,gBAAuBC,KAA6B,EAAmB;MAAA;MACnE,oBACI,6BAAC,UAAI;QAAC,QAAQ,EAAE,IAAI,CAACF,MAAM,CAACG,QAAS;QAAC,IAAI,EAAE,IAAI,CAACH,MAAM,CAACI,OAAO;MAAG,GAC7D,UAAAC,SAAS;QAAA,oBAAI,6BAAC,eAAQ,4KAAoBH,KAAK;UAAEG,SAAS,EAATA;QAAS,IAAe;MAAA,EACvE;IAEf;EAAC;EAAA;AAAA,EAb4BC,qBAAS;AAAA"}
+{"version":3,"names":["React","Fragment","Form","UIElement","FormElement","constructor","id","config","useGrid","render","props","createElement","onSubmit","data","getData","formProps"],"sources":["FormElement.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport type { FormOnSubmit, FormRenderPropParams } from \"@webiny/form\";\nimport { Form } from \"@webiny/form\";\nimport type { UIElementConfig, UiElementRenderProps } from \"~/ui/UIElement\";\nimport { UIElement } 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,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAEvC,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,SAAS;AAiBlB,OAAO,MAAMC,WAAW,SAASD,SAAS,CAAoB;EACnDE,WAAWA,CAACC,EAAU,EAAEC,MAAyB,EAAE;IACtD,KAAK,CAACD,EAAE,EAAEC,MAAM,CAAC;IAEjB,IAAI,CAACC,OAAO,CAAC,KAAK,CAAC;EACvB;EAEgBC,MAAMA,CAACC,KAA6B,EAAmB;IACnE,oBACIV,KAAA,CAAAW,aAAA,CAACT,IAAI;MAACU,QAAQ,EAAE,IAAI,CAACL,MAAM,CAACK,QAAS;MAACC,IAAI,EAAE,IAAI,CAACN,MAAM,CAACO,OAAO,CAAC;IAAE,GAC7DC,SAAS,iBAAIf,KAAA,CAAAW,aAAA,CAACV,QAAQ,QAAE,KAAK,CAACQ,MAAM,CAAC;MAAE,GAAGC,KAAK;MAAEK;IAAU,CAAC,CAAY,CACvE,CAAC;EAEf;AACJ","ignoreList":[]}

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

@@ -1,8 +1,9 @@
-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";
+import type React from "react";
+import type { FormRenderPropParams, FormAPI } from "@webiny/form";
+import type { UIElementConfig } from "../../UIElement";
+import { UIElement } from "../../UIElement";
+import type { FormElementRenderProps } from "./FormElement";
+import type { Validator } from "@webiny/validation/types";
 export interface FormFieldElementConfig<TRenderProps = FormRenderPropParams> extends UIElementConfig<TRenderProps> {
     name: string;
     validators?: GetterWithProps<Validator | Validator[]>;

package/ui/elements/form/FormFieldElement.js

@@ -1,173 +1,113 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FormFieldElement = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _UIElement2 = require("../../UIElement");
-var FormFieldElement = /*#__PURE__*/function (_UIElement) {
-  (0, _inherits2.default)(FormFieldElement, _UIElement);
-  var _super = (0, _createSuper2.default)(FormFieldElement);
-  function FormFieldElement(id, config) {
-    var _this;
-    (0, _classCallCheck2.default)(this, FormFieldElement);
-    _this = _super.call(this, id, config);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_beforeChange", []);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_afterChange", []);
+import { UIElement } from "../../UIElement";
+export class FormFieldElement extends UIElement {
+  _beforeChange = [];
+  _afterChange = [];
+  constructor(id, config) {
+    super(id, config);
     if (config.beforeChange) {
-      _this._beforeChange.push(config.beforeChange);
+      this._beforeChange.push(config.beforeChange);
     }
     if (config.afterChange) {
-      _this._afterChange.push(config.afterChange);
+      this._afterChange.push(config.afterChange);
     }
-    _this.applyPlugins(FormFieldElement);
-    return _this;
+    this.applyPlugins(FormFieldElement);
   }
-  (0, _createClass2.default)(FormFieldElement, [{
-    key: "getName",
-    value: function getName() {
-      return this.config.name;
-    }
-  }, {
-    key: "getValidators",
-    value: function getValidators(props) {
-      if (!this.config.validators || typeof this.config.validators !== "function") {
-        return function () {
-          return true;
-        };
-      }
-      return this.config.validators(props);
-    }
-  }, {
-    key: "getDefaultValue",
-    value: function getDefaultValue(props) {
-      if (typeof this.config.defaultValue === "function") {
-        return this.config.defaultValue(props);
-      }
-      return this.config.defaultValue;
-    }
-  }, {
-    key: "getLabel",
-    value: function getLabel(props) {
-      if (typeof this.config.label === "function") {
-        return this.config.label(props);
-      }
-      return this.config.label;
-    }
-  }, {
-    key: "getDescription",
-    value: function getDescription(props) {
-      if (typeof this.config.description === "function") {
-        return this.config.description(props);
-      }
-      return this.config.description;
+  getName() {
+    return this.config.name;
+  }
+  getValidators(props) {
+    if (!this.config.validators || typeof this.config.validators !== "function") {
+      return () => true;
     }
-  }, {
-    key: "getPlaceholder",
-    value: function getPlaceholder(props) {
-      if (typeof this.config.placeholder === "function") {
-        return this.config.placeholder(props);
-      }
-      return this.config.placeholder;
+    return this.config.validators(props);
+  }
+  getDefaultValue(props) {
+    if (typeof this.config.defaultValue === "function") {
+      return this.config.defaultValue(props);
     }
-  }, {
-    key: "setLabel",
-    value: function setLabel(label) {
-      this.config.label = label;
+    return this.config.defaultValue;
+  }
+  getLabel(props) {
+    if (typeof this.config.label === "function") {
+      return this.config.label(props);
     }
-  }, {
-    key: "setDescription",
-    value: function setDescription(description) {
-      this.config.description = description;
+    return this.config.label;
+  }
+  getDescription(props) {
+    if (typeof this.config.description === "function") {
+      return this.config.description(props);
     }
-  }, {
-    key: "setPlaceholder",
-    value: function setPlaceholder(placeholder) {
-      this.config.placeholder = placeholder;
+    return this.config.description;
+  }
+  getPlaceholder(props) {
+    if (typeof this.config.placeholder === "function") {
+      return this.config.placeholder(props);
     }
-  }, {
-    key: "setDefaultValue",
-    value: function setDefaultValue(value) {
-      this.config.defaultValue = value;
+    return this.config.placeholder;
+  }
+  setLabel(label) {
+    this.config.label = label;
+  }
+  setDescription(description) {
+    this.config.description = description;
+  }
+  setPlaceholder(placeholder) {
+    this.config.placeholder = placeholder;
+  }
+  setDefaultValue(value) {
+    this.config.defaultValue = value;
+  }
+  getIsDisabled(props) {
+    if (typeof this.config.isDisabled === "function") {
+      return this.config.isDisabled(props);
     }
-  }, {
-    key: "getIsDisabled",
-    value: function getIsDisabled(props) {
-      if (typeof this.config.isDisabled === "function") {
-        return this.config.isDisabled(props);
+    return this.config.isDisabled;
+  }
+  setIsDisabled(isDisabled) {
+    this.config.isDisabled = isDisabled;
+  }
+  setValidators(validators) {
+    this.config.validators = validators;
+  }
+  onBeforeChange(value, cb) {
+    const callbacks = [...this._beforeChange];
+    const next = val => {
+      const callbackCallable = callbacks.pop();
+      if (!callbackCallable) {
+        cb(val);
+        return;
       }
-      return this.config.isDisabled;
-    }
-  }, {
-    key: "setIsDisabled",
-    value: function setIsDisabled(isDisabled) {
-      this.config.isDisabled = isDisabled;
-    }
-  }, {
-    key: "setValidators",
-    value: function setValidators(validators) {
-      this.config.validators = validators;
-    }
-  }, {
-    key: "onBeforeChange",
-    value: function onBeforeChange(value, cb) {
-      var callbacks = (0, _toConsumableArray2.default)(this._beforeChange);
-      var next = function next(val) {
-        var callbackCallable = callbacks.pop();
-        if (!callbackCallable) {
-          cb(val);
-          return;
-        }
-        callbackCallable(val, next);
-      };
-      next(value);
-    }
-  }, {
-    key: "onAfterChange",
-    value: function onAfterChange(value, form) {
-      var callbacks = (0, _toConsumableArray2.default)(this._afterChange);
-      var next = function next(val) {
-        var callbackCallable = callbacks.pop();
-        if (!callbackCallable) {
-          return;
-        }
-        callbackCallable(val, form);
-      };
-      next(value);
-    }
-  }, {
-    key: "addBeforeChange",
-    value: function addBeforeChange(cb) {
-      this._beforeChange.push(cb);
-    }
-  }, {
-    key: "addAfterChange",
-    value: function addAfterChange(cb) {
-      /**
-       * TODO @ts-refactor possibly different subtype. Or so TS complains.
-       */
-      // @ts-ignore
-      this._afterChange.push(cb);
-    }
-  }, {
-    key: "setBeforeChange",
-    value: function setBeforeChange(cb) {
-      this._beforeChange = [cb];
-    }
-  }, {
-    key: "setAfterChange",
-    value: function setAfterChange(cb) {
-      this._afterChange = [cb];
-    }
-  }]);
-  return FormFieldElement;
-}(_UIElement2.UIElement);
-exports.FormFieldElement = FormFieldElement;
+      callbackCallable(val, next);
+    };
+    next(value);
+  }
+  onAfterChange(value, form) {
+    const callbacks = [...this._afterChange];
+    const next = val => {
+      const callbackCallable = callbacks.pop();
+      if (!callbackCallable) {
+        return;
+      }
+      callbackCallable(val, form);
+    };
+    next(value);
+  }
+  addBeforeChange(cb) {
+    this._beforeChange.push(cb);
+  }
+  addAfterChange(cb) {
+    /**
+     * TODO @ts-refactor possibly different subtype. Or so TS complains.
+     */
+    // @ts-expect-error
+    this._afterChange.push(cb);
+  }
+  setBeforeChange(cb) {
+    this._beforeChange = [cb];
+  }
+  setAfterChange(cb) {
+    this._afterChange = [cb];
+  }
+}
+
+//# sourceMappingURL=FormFieldElement.js.map