@webiny/app-admin 5.34.8 → 5.35.0-beta.0

package/ui/views/FormView/FormContainerElement.js

@@ -1,34 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FormContainerElement = void 0;
-
 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 = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Elevation = require("@webiny/ui/Elevation");
-
 var _UIElement2 = require("../../UIElement");
-
 var FormContainerWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "eyimbyl0",
   label: "FormContainerWrapper"
@@ -36,23 +23,16 @@ var FormContainerWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   position: "relative",
   margin: "17px 50px"
 });
-
 var FormContainerElement = /*#__PURE__*/function (_UIElement) {
   (0, _inherits2.default)(FormContainerElement, _UIElement);
-
   var _super = (0, _createSuper2.default)(FormContainerElement);
-
   function FormContainerElement(id, config) {
     var _this;
-
     (0, _classCallCheck2.default)(this, FormContainerElement);
     _this = _super.call(this, id, config);
-
     _this.useGrid(false);
-
     return _this;
   }
-
   (0, _createClass2.default)(FormContainerElement, [{
     key: "render",
     value: function render(props) {
@@ -67,5 +47,4 @@ var FormContainerElement = /*#__PURE__*/function (_UIElement) {
   }]);
   return FormContainerElement;
 }(_UIElement2.UIElement);
-
 exports.FormContainerElement = FormContainerElement;

package/ui/views/FormView/FormContainerElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["FormContainerWrapper","styled","position","margin","FormContainerElement","id","config","useGrid","props","children","classNames","className","testId","noElevation","UIElement"],"sources":["FormContainerElement.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport styled from \"@emotion/styled\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { UIElement, UIElementConfig, UiElementRenderProps } from \"~/ui/UIElement\";\n\nconst FormContainerWrapper = styled(\"div\")({\n    position: \"relative\",\n    margin: \"17px 50px\"\n});\n\ninterface FormContainerConfig extends UIElementConfig {\n    testId?: string;\n    noElevation?: boolean;\n    className?: string;\n}\n\nexport class FormContainerElement extends UIElement<FormContainerConfig> {\n    public constructor(id: string, config: FormContainerConfig) {\n        super(id, config);\n        this.useGrid(false);\n    }\n\n    public override render(props: UiElementRenderProps) {\n        const children = super.render(props);\n\n        return (\n            <FormContainerWrapper\n                className={classNames(\"webiny-data-list\", this.config.className)}\n                data-testid={this.config.testId}\n            >\n                {this.config.noElevation ? children : <Elevation z={1}>{children}</Elevation>}\n            </FormContainerWrapper>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,oBAAoB,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACvCC,QAAQ,EAAE,UAD6B;EAEvCC,MAAM,EAAE;AAF+B,CAAjB,CAA1B;;IAWaC,oB;;;;;EACT,8BAAmBC,EAAnB,EAA+BC,MAA/B,EAA4D;IAAA;;IAAA;IACxD,0BAAMD,EAAN,EAAUC,MAAV;;IACA,MAAKC,OAAL,CAAa,KAAb;;IAFwD;EAG3D;;;;WAED,gBAAuBC,KAAvB,EAAoD;MAChD,IAAMC,QAAQ,gHAAgBD,KAAhB,CAAd;MAEA,oBACI,6BAAC,oBAAD;QACI,SAAS,EAAE,IAAAE,mBAAA,EAAW,kBAAX,EAA+B,KAAKJ,MAAL,CAAYK,SAA3C,CADf;QAEI,eAAa,KAAKL,MAAL,CAAYM;MAF7B,GAIK,KAAKN,MAAL,CAAYO,WAAZ,GAA0BJ,QAA1B,gBAAqC,6BAAC,oBAAD;QAAW,CAAC,EAAE;MAAd,GAAkBA,QAAlB,CAJ1C,CADJ;IAQH;;;EAjBqCK,qB"}
+{"version":3,"names":["FormContainerWrapper","styled","position","margin","FormContainerElement","id","config","useGrid","props","children","classNames","className","testId","noElevation","UIElement"],"sources":["FormContainerElement.tsx"],"sourcesContent":["import React from \"react\";\nimport classNames from \"classnames\";\nimport styled from \"@emotion/styled\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { UIElement, UIElementConfig, UiElementRenderProps } from \"~/ui/UIElement\";\n\nconst FormContainerWrapper = styled(\"div\")({\n    position: \"relative\",\n    margin: \"17px 50px\"\n});\n\ninterface FormContainerConfig extends UIElementConfig {\n    testId?: string;\n    noElevation?: boolean;\n    className?: string;\n}\n\nexport class FormContainerElement extends UIElement<FormContainerConfig> {\n    public constructor(id: string, config: FormContainerConfig) {\n        super(id, config);\n        this.useGrid(false);\n    }\n\n    public override render(props: UiElementRenderProps) {\n        const children = super.render(props);\n\n        return (\n            <FormContainerWrapper\n                className={classNames(\"webiny-data-list\", this.config.className)}\n                data-testid={this.config.testId}\n            >\n                {this.config.noElevation ? children : <Elevation z={1}>{children}</Elevation>}\n            </FormContainerWrapper>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA,IAAMA,oBAAoB,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACvCC,QAAQ,EAAE,UAAU;EACpBC,MAAM,EAAE;AACZ,CAAC,CAAC;AAAC,IAQUC,oBAAoB;EAAA;EAAA;EAC7B,8BAAmBC,EAAU,EAAEC,MAA2B,EAAE;IAAA;IAAA;IACxD,0BAAMD,EAAE,EAAEC,MAAM;IAChB,MAAKC,OAAO,CAAC,KAAK,CAAC;IAAC;EACxB;EAAC;IAAA;IAAA,OAED,gBAAuBC,KAA2B,EAAE;MAChD,IAAMC,QAAQ,gHAAgBD,KAAK,CAAC;MAEpC,oBACI,6BAAC,oBAAoB;QACjB,SAAS,EAAE,IAAAE,mBAAU,EAAC,kBAAkB,EAAE,IAAI,CAACJ,MAAM,CAACK,SAAS,CAAE;QACjE,eAAa,IAAI,CAACL,MAAM,CAACM;MAAO,GAE/B,IAAI,CAACN,MAAM,CAACO,WAAW,GAAGJ,QAAQ,gBAAG,6BAAC,oBAAS;QAAC,CAAC,EAAE;MAAE,GAAEA,QAAQ,CAAa,CAC1D;IAE/B;EAAC;EAAA;AAAA,EAjBqCK,qBAAS;AAAA"}

package/ui/views/FormView/FormContentElement.js

@@ -1,33 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FormContentElement = void 0;
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
 var _UIElement2 = require("../../UIElement");
-
 var FormContentElement = /*#__PURE__*/function (_UIElement) {
   (0, _inherits2.default)(FormContentElement, _UIElement);
-
   var _super = (0, _createSuper2.default)(FormContentElement);
-
   function FormContentElement() {
     (0, _classCallCheck2.default)(this, FormContentElement);
     return _super.apply(this, arguments);
   }
-
   return (0, _createClass2.default)(FormContentElement);
 }(_UIElement2.UIElement);
-
 exports.FormContentElement = FormContentElement;

package/ui/views/FormView/FormContentElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["FormContentElement","UIElement"],"sources":["FormContentElement.tsx"],"sourcesContent":["import { UIElement } from \"~/ui/UIElement\";\n\nexport class FormContentElement extends UIElement {}\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;IAEaA,kB;;;;;;;;;;;EAA2BC,qB"}
+{"version":3,"names":["FormContentElement","UIElement"],"sources":["FormContentElement.tsx"],"sourcesContent":["import { UIElement } from \"~/ui/UIElement\";\n\nexport class FormContentElement extends UIElement {}\n"],"mappings":";;;;;;;;;;;AAAA;AAA2C,IAE9BA,kBAAkB;EAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;AAAA,EAASC,qBAAS;AAAA"}

package/ui/views/FormView/FormFooterElement.js

@@ -1,30 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FormFooterElement = void 0;
-
 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 = _interopRequireDefault(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _UIElement2 = require("../../UIElement");
-
 var ButtonWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "es96np90",
   label: "ButtonWrapper"
@@ -39,23 +28,16 @@ var ButtonWrapper = /*#__PURE__*/(0, _styled.default)("div", {
     marginLeft: "auto"
   }
 });
-
 var FormFooterElement = /*#__PURE__*/function (_UIElement) {
   (0, _inherits2.default)(FormFooterElement, _UIElement);
-
   var _super = (0, _createSuper2.default)(FormFooterElement);
-
   function FormFooterElement(id) {
     var _this;
-
     (0, _classCallCheck2.default)(this, FormFooterElement);
     _this = _super.call(this, id);
-
     _this.useGrid(false);
-
     return _this;
   }
-
   (0, _createClass2.default)(FormFooterElement, [{
     key: "render",
     value: function render(props) {
@@ -64,5 +46,4 @@ var FormFooterElement = /*#__PURE__*/function (_UIElement) {
   }]);
   return FormFooterElement;
 }(_UIElement2.UIElement);
-
 exports.FormFooterElement = FormFooterElement;

package/ui/views/FormView/FormFooterElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["ButtonWrapper","styled","display","justifyContent","borderTop","color","textAlign","padding","marginLeft","FormFooterElement","id","useGrid","props","UIElement"],"sources":["FormFooterElement.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { UIElement, UiElementRenderProps } from \"~/ui/UIElement\";\n\nconst ButtonWrapper = styled(\"div\")({\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    borderTop: \"1px solid var(--mdc-theme-on-background)\",\n    color: \"var(--mdc-theme-text-primary-on-background)\",\n    textAlign: \"right\",\n    padding: 25,\n    \">:last-child\": {\n        marginLeft: \"auto\"\n    }\n});\n\nexport class FormFooterElement extends UIElement {\n    public constructor(id: string) {\n        super(id);\n\n        this.useGrid(false);\n    }\n\n    public override render(props: UiElementRenderProps) {\n        return <ButtonWrapper>{super.render(props)}</ButtonWrapper>;\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,aAAa,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EAChCC,OAAO,EAAE,MADuB;EAEhCC,cAAc,EAAE,eAFgB;EAGhCC,SAAS,EAAE,0CAHqB;EAIhCC,KAAK,EAAE,6CAJyB;EAKhCC,SAAS,EAAE,OALqB;EAMhCC,OAAO,EAAE,EANuB;EAOhC,gBAAgB;IACZC,UAAU,EAAE;EADA;AAPgB,CAAjB,CAAnB;;IAYaC,iB;;;;;EACT,2BAAmBC,EAAnB,EAA+B;IAAA;;IAAA;IAC3B,0BAAMA,EAAN;;IAEA,MAAKC,OAAL,CAAa,KAAb;;IAH2B;EAI9B;;;;WAED,gBAAuBC,KAAvB,EAAoD;MAChD,oBAAO,6BAAC,aAAD,kHAA6BA,KAA7B,EAAP;IACH;;;EATkCC,qB"}
+{"version":3,"names":["ButtonWrapper","styled","display","justifyContent","borderTop","color","textAlign","padding","marginLeft","FormFooterElement","id","useGrid","props","UIElement"],"sources":["FormFooterElement.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { UIElement, UiElementRenderProps } from \"~/ui/UIElement\";\n\nconst ButtonWrapper = styled(\"div\")({\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    borderTop: \"1px solid var(--mdc-theme-on-background)\",\n    color: \"var(--mdc-theme-text-primary-on-background)\",\n    textAlign: \"right\",\n    padding: 25,\n    \">:last-child\": {\n        marginLeft: \"auto\"\n    }\n});\n\nexport class FormFooterElement extends UIElement {\n    public constructor(id: string) {\n        super(id);\n\n        this.useGrid(false);\n    }\n\n    public override render(props: UiElementRenderProps) {\n        return <ButtonWrapper>{super.render(props)}</ButtonWrapper>;\n    }\n}\n"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AAEA,IAAMA,aAAa,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAChCC,OAAO,EAAE,MAAM;EACfC,cAAc,EAAE,eAAe;EAC/BC,SAAS,EAAE,0CAA0C;EACrDC,KAAK,EAAE,6CAA6C;EACpDC,SAAS,EAAE,OAAO;EAClBC,OAAO,EAAE,EAAE;EACX,cAAc,EAAE;IACZC,UAAU,EAAE;EAChB;AACJ,CAAC,CAAC;AAAC,IAEUC,iBAAiB;EAAA;EAAA;EAC1B,2BAAmBC,EAAU,EAAE;IAAA;IAAA;IAC3B,0BAAMA,EAAE;IAER,MAAKC,OAAO,CAAC,KAAK,CAAC;IAAC;EACxB;EAAC;IAAA;IAAA,OAED,gBAAuBC,KAA2B,EAAE;MAChD,oBAAO,6BAAC,aAAa,kHAAeA,KAAK,EAAkB;IAC/D;EAAC;EAAA;AAAA,EATkCC,qBAAS;AAAA"}

package/ui/views/FormView/FormHeaderElement.js

@@ -1,36 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FormHeaderElement = void 0;
-
 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 = _interopRequireDefault(require("react"));
-
 var _emotion = require("emotion");
-
 var _Grid = require("@webiny/ui/Grid");
-
 var _Typography = require("@webiny/ui/Typography");
-
 var _UIElement2 = require("../../UIElement");
-
 var _Icon = require("@webiny/ui/Icon");
-
 var iconClass = /*#__PURE__*/(0, _emotion.css)({
   marginRight: 15,
   color: "var(--mdc-theme-text-primary-on-background)"
@@ -48,23 +34,16 @@ var actionsClass = /*#__PURE__*/(0, _emotion.css)({
   justifyContent: "flex-end",
   alignItems: "center"
 }, "label:actionsClass;");
-
 var FormHeaderElement = /*#__PURE__*/function (_UIElement) {
   (0, _inherits2.default)(FormHeaderElement, _UIElement);
-
   var _super = (0, _createSuper2.default)(FormHeaderElement);
-
   function FormHeaderElement(id, config) {
     var _this;
-
     (0, _classCallCheck2.default)(this, FormHeaderElement);
     _this = _super.call(this, id, config);
-
     _this.useGrid(false);
-
     return _this;
   }
-
   (0, _createClass2.default)(FormHeaderElement, [{
     key: "setIcon",
     value: function setIcon(icon) {
@@ -79,8 +58,8 @@ var FormHeaderElement = /*#__PURE__*/function (_UIElement) {
     key: "render",
     value: function render(props) {
       var _this$config = this.config,
-          icon = _this$config.icon,
-          getTitle = _this$config.getTitle;
+        icon = _this$config.icon,
+        getTitle = _this$config.getTitle;
       return /*#__PURE__*/_react.default.createElement(_Grid.Grid, {
         className: headerClass
       }, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
@@ -99,5 +78,4 @@ var FormHeaderElement = /*#__PURE__*/function (_UIElement) {
   }]);
   return FormHeaderElement;
 }(_UIElement2.UIElement);
-
 exports.FormHeaderElement = FormHeaderElement;

package/ui/views/FormView/FormHeaderElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["iconClass","css","marginRight","color","headerClass","borderBottom","titleClass","display","alignItems","actionsClass","justifyContent","FormHeaderElement","id","config","useGrid","icon","element","addElement","props","getTitle","UIElement"],"sources":["FormHeaderElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { UIElement, UIElementConfig } from \"~/ui/UIElement\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { FormElementRenderProps } from \"~/ui/elements/form/FormElement\";\n\nconst iconClass = css({\n    marginRight: 15,\n    color: \"var(--mdc-theme-text-primary-on-background)\"\n});\n\nconst headerClass = css({\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    color: \"var(--mdc-theme-text-primary-on-background)\"\n});\n\nconst titleClass = css({\n    display: \"flex\",\n    alignItems: \"center\"\n});\n\nconst actionsClass = css({\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    alignItems: \"center\"\n});\n\ninterface FormHeaderConfig extends UIElementConfig {\n    getTitle(props: FormElementRenderProps): string;\n    icon?: React.ReactElement;\n}\n\nexport class FormHeaderElement extends UIElement<FormHeaderConfig> {\n    public constructor(id: string, config: FormHeaderConfig) {\n        super(id, config);\n\n        this.useGrid(false);\n    }\n\n    public setIcon(icon: React.ReactElement) {\n        this.config.icon = icon;\n    }\n\n    public addAction(element: UIElement) {\n        this.addElement(element);\n    }\n\n    public override render(props: FormElementRenderProps): React.ReactNode {\n        const { icon, getTitle } = this.config;\n\n        return (\n            <Grid className={headerClass}>\n                <Cell span={6} className={titleClass}>\n                    <React.Fragment>\n                        {icon && <Icon className={iconClass} icon={icon} />}\n                        <Typography use=\"headline5\">{getTitle(props)}</Typography>\n                    </React.Fragment>\n                </Cell>\n                <Cell span={6} className={actionsClass}>\n                    {super.render(props)}\n                </Cell>\n            </Grid>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAGA,IAAMA,SAAS,gBAAG,IAAAC,YAAA,EAAI;EAClBC,WAAW,EAAE,EADK;EAElBC,KAAK,EAAE;AAFW,CAAJ,qBAAlB;AAKA,IAAMC,WAAW,gBAAG,IAAAH,YAAA,EAAI;EACpBI,YAAY,EAAE,0CADM;EAEpBF,KAAK,EAAE;AAFa,CAAJ,uBAApB;AAKA,IAAMG,UAAU,gBAAG,IAAAL,YAAA,EAAI;EACnBM,OAAO,EAAE,MADU;EAEnBC,UAAU,EAAE;AAFO,CAAJ,sBAAnB;AAKA,IAAMC,YAAY,gBAAG,IAAAR,YAAA,EAAI;EACrBM,OAAO,EAAE,MADY;EAErBG,cAAc,EAAE,UAFK;EAGrBF,UAAU,EAAE;AAHS,CAAJ,wBAArB;;IAWaG,iB;;;;;EACT,2BAAmBC,EAAnB,EAA+BC,MAA/B,EAAyD;IAAA;;IAAA;IACrD,0BAAMD,EAAN,EAAUC,MAAV;;IAEA,MAAKC,OAAL,CAAa,KAAb;;IAHqD;EAIxD;;;;WAED,iBAAeC,IAAf,EAAyC;MACrC,KAAKF,MAAL,CAAYE,IAAZ,GAAmBA,IAAnB;IACH;;;WAED,mBAAiBC,OAAjB,EAAqC;MACjC,KAAKC,UAAL,CAAgBD,OAAhB;IACH;;;WAED,gBAAuBE,KAAvB,EAAuE;MACnE,mBAA2B,KAAKL,MAAhC;MAAA,IAAQE,IAAR,gBAAQA,IAAR;MAAA,IAAcI,QAAd,gBAAcA,QAAd;MAEA,oBACI,6BAAC,UAAD;QAAM,SAAS,EAAEf;MAAjB,gBACI,6BAAC,UAAD;QAAM,IAAI,EAAE,CAAZ;QAAe,SAAS,EAAEE;MAA1B,gBACI,6BAAC,cAAD,CAAO,QAAP,QACKS,IAAI,iBAAI,6BAAC,UAAD;QAAM,SAAS,EAAEf,SAAjB;QAA4B,IAAI,EAAEe;MAAlC,EADb,eAEI,6BAAC,sBAAD;QAAY,GAAG,EAAC;MAAhB,GAA6BI,QAAQ,CAACD,KAAD,CAArC,CAFJ,CADJ,CADJ,eAOI,6BAAC,UAAD;QAAM,IAAI,EAAE,CAAZ;QAAe,SAAS,EAAET;MAA1B,6GACkBS,KADlB,EAPJ,CADJ;IAaH;;;EA/BkCE,qB"}
+{"version":3,"names":["iconClass","css","marginRight","color","headerClass","borderBottom","titleClass","display","alignItems","actionsClass","justifyContent","FormHeaderElement","id","config","useGrid","icon","element","addElement","props","getTitle","UIElement"],"sources":["FormHeaderElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { UIElement, UIElementConfig } from \"~/ui/UIElement\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { FormElementRenderProps } from \"~/ui/elements/form/FormElement\";\n\nconst iconClass = css({\n    marginRight: 15,\n    color: \"var(--mdc-theme-text-primary-on-background)\"\n});\n\nconst headerClass = css({\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    color: \"var(--mdc-theme-text-primary-on-background)\"\n});\n\nconst titleClass = css({\n    display: \"flex\",\n    alignItems: \"center\"\n});\n\nconst actionsClass = css({\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    alignItems: \"center\"\n});\n\ninterface FormHeaderConfig extends UIElementConfig {\n    getTitle(props: FormElementRenderProps): string;\n    icon?: React.ReactElement;\n}\n\nexport class FormHeaderElement extends UIElement<FormHeaderConfig> {\n    public constructor(id: string, config: FormHeaderConfig) {\n        super(id, config);\n\n        this.useGrid(false);\n    }\n\n    public setIcon(icon: React.ReactElement) {\n        this.config.icon = icon;\n    }\n\n    public addAction(element: UIElement) {\n        this.addElement(element);\n    }\n\n    public override render(props: FormElementRenderProps): React.ReactNode {\n        const { icon, getTitle } = this.config;\n\n        return (\n            <Grid className={headerClass}>\n                <Cell span={6} className={titleClass}>\n                    <React.Fragment>\n                        {icon && <Icon className={iconClass} icon={icon} />}\n                        <Typography use=\"headline5\">{getTitle(props)}</Typography>\n                    </React.Fragment>\n                </Cell>\n                <Cell span={6} className={actionsClass}>\n                    {super.render(props)}\n                </Cell>\n            </Grid>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAGA,IAAMA,SAAS,gBAAG,IAAAC,YAAG,EAAC;EAClBC,WAAW,EAAE,EAAE;EACfC,KAAK,EAAE;AACX,CAAC,qBAAC;AAEF,IAAMC,WAAW,gBAAG,IAAAH,YAAG,EAAC;EACpBI,YAAY,EAAE,0CAA0C;EACxDF,KAAK,EAAE;AACX,CAAC,uBAAC;AAEF,IAAMG,UAAU,gBAAG,IAAAL,YAAG,EAAC;EACnBM,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE;AAChB,CAAC,sBAAC;AAEF,IAAMC,YAAY,gBAAG,IAAAR,YAAG,EAAC;EACrBM,OAAO,EAAE,MAAM;EACfG,cAAc,EAAE,UAAU;EAC1BF,UAAU,EAAE;AAChB,CAAC,wBAAC;AAAC,IAOUG,iBAAiB;EAAA;EAAA;EAC1B,2BAAmBC,EAAU,EAAEC,MAAwB,EAAE;IAAA;IAAA;IACrD,0BAAMD,EAAE,EAAEC,MAAM;IAEhB,MAAKC,OAAO,CAAC,KAAK,CAAC;IAAC;EACxB;EAAC;IAAA;IAAA,OAED,iBAAeC,IAAwB,EAAE;MACrC,IAAI,CAACF,MAAM,CAACE,IAAI,GAAGA,IAAI;IAC3B;EAAC;IAAA;IAAA,OAED,mBAAiBC,OAAkB,EAAE;MACjC,IAAI,CAACC,UAAU,CAACD,OAAO,CAAC;IAC5B;EAAC;IAAA;IAAA,OAED,gBAAuBE,KAA6B,EAAmB;MACnE,mBAA2B,IAAI,CAACL,MAAM;QAA9BE,IAAI,gBAAJA,IAAI;QAAEI,QAAQ,gBAARA,QAAQ;MAEtB,oBACI,6BAAC,UAAI;QAAC,SAAS,EAAEf;MAAY,gBACzB,6BAAC,UAAI;QAAC,IAAI,EAAE,CAAE;QAAC,SAAS,EAAEE;MAAW,gBACjC,6BAAC,cAAK,CAAC,QAAQ,QACVS,IAAI,iBAAI,6BAAC,UAAI;QAAC,SAAS,EAAEf,SAAU;QAAC,IAAI,EAAEe;MAAK,EAAG,eACnD,6BAAC,sBAAU;QAAC,GAAG,EAAC;MAAW,GAAEI,QAAQ,CAACD,KAAK,CAAC,CAAc,CAC7C,CACd,eACP,6BAAC,UAAI;QAAC,IAAI,EAAE,CAAE;QAAC,SAAS,EAAET;MAAa,6GACrBS,KAAK,EAChB,CACJ;IAEf;EAAC;EAAA;AAAA,EA/BkCE,qBAAS;AAAA"}

package/ui/views/FormView.js

@@ -1,80 +1,50 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FormView = void 0;
-
 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 = _interopRequireDefault(require("react"));
-
 var _Progress = require("@webiny/ui/Progress");
-
 var _FormElement = require("../elements/form/FormElement");
-
 var _ButtonElement = require("../elements/ButtonElement");
-
 var _GenericElement = require("../elements/GenericElement");
-
 var _FormContentElement = require("./FormView/FormContentElement");
-
 var _FormHeaderElement = require("./FormView/FormHeaderElement");
-
 var _FormFooterElement = require("./FormView/FormFooterElement");
-
 var _FormContainerElement = require("./FormView/FormContainerElement");
-
 var _UIView2 = require("../UIView");
-
 var FormView = /*#__PURE__*/function (_UIView) {
   (0, _inherits2.default)(FormView, _UIView);
-
   var _super = (0, _createSuper2.default)(FormView);
-
   function FormView(id, config) {
     var _this;
-
     (0, _classCallCheck2.default)(this, FormView);
-
     if (!config) {
       config = {};
     }
-
     if (!("setupForm" in config)) {
       config.setupForm = true;
     }
-
     _this = _super.call(this, id, config);
-
     _this.addElements();
-
     _this.useGrid(false);
-
     _this.applyPlugins(FormView);
-
     return _this;
   }
-
   (0, _createClass2.default)(FormView, [{
     key: "addElement",
     value: function addElement(element) {
       if (element.id === "form" || element.id === "formContainer") {
         return (0, _get2.default)((0, _getPrototypeOf2.default)(FormView.prototype), "addElement", this).call(this, element);
       }
-
       return this.getFormContainer().addElement(element);
     }
   }, {
@@ -84,10 +54,8 @@ var FormView = /*#__PURE__*/function (_UIView) {
         this.config.getTitle = function () {
           return title;
         };
-
         return;
       }
-
       this.config.getTitle = title;
     }
   }, {
@@ -129,27 +97,23 @@ var FormView = /*#__PURE__*/function (_UIView) {
     key: "addElements",
     value: function addElements() {
       var _this2 = this;
-
       var formContainer = new _FormContainerElement.FormContainerElement("formContainer", {
         testId: this.config.testId,
         className: this.config.className,
         noElevation: this.config.noElevation
       });
-
       if (this.config.setupForm) {
         var form = this.addElement(new _FormElement.FormElement("form", {
           onSubmit: function onSubmit(data, form) {
             if (!_this2.config.onSubmit) {
               return;
             }
-
             return _this2.config.onSubmit(data, form);
           },
           getData: function getData() {
             if (!_this2.config.getFormData) {
               return {};
             }
-
             return _this2.config.getFormData();
           }
         }));
@@ -157,12 +121,10 @@ var FormView = /*#__PURE__*/function (_UIView) {
       } else {
         this.addElement(formContainer);
       }
-
       this.addElement(new _GenericElement.GenericElement("loading", function () {
         if (typeof _this2.config.isLoading !== "function") {
           return null;
         }
-
         return _this2.config.isLoading() ? /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, null) : null;
       }));
       this.addElement(new _FormHeaderElement.FormHeaderElement("formHeader", {
@@ -170,7 +132,6 @@ var FormView = /*#__PURE__*/function (_UIView) {
           if (!_this2.config.getTitle) {
             return "";
           }
-
           return _this2.config.getTitle(props);
         }
       }));
@@ -192,7 +153,6 @@ var FormView = /*#__PURE__*/function (_UIView) {
           if (!_this2.config.onCancel) {
             return;
           }
-
           _this2.config.onCancel();
         },
         shouldRender: function shouldRender() {
@@ -204,5 +164,4 @@ var FormView = /*#__PURE__*/function (_UIView) {
   }]);
   return FormView;
 }(_UIView2.UIView);
-
 exports.FormView = FormView;

package/ui/views/FormView.js.map

@@ -1 +1 @@
-{"version":3,"names":["FormView","id","config","setupForm","addElements","useGrid","applyPlugins","element","getFormContainer","addElement","title","getTitle","onSubmit","getter","getFormData","getElement","getFormFooterElement","formContainer","FormContainerElement","testId","className","noElevation","form","FormElement","data","getData","GenericElement","isLoading","FormHeaderElement","props","FormContentElement","footer","FormFooterElement","submitButton","ButtonElement","type","label","onClick","formProps","submit","moveToTheEndOf","cancelButton","onCancel","shouldRender","moveToTheBeginningOf","UIView"],"sources":["FormView.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormOnSubmit } from \"@webiny/form\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { UIElement, UIElementConfig } from \"~/ui/UIElement\";\nimport { FormElement, FormElementRenderProps } from \"~/ui/elements/form/FormElement\";\nimport { ButtonElement } from \"~/ui/elements/ButtonElement\";\nimport { GenericElement } from \"~/ui/elements/GenericElement\";\nimport { FormContentElement } from \"./FormView/FormContentElement\";\nimport { FormHeaderElement } from \"./FormView/FormHeaderElement\";\nimport { FormFooterElement } from \"./FormView/FormFooterElement\";\nimport { FormContainerElement } from \"./FormView/FormContainerElement\";\nimport { UIView } from \"~/ui/UIView\";\n\nexport interface FormViewConfig extends UIElementConfig {\n    setupForm?: boolean;\n    onSubmit?: FormOnSubmit;\n    getTitle?: (props: FormElementRenderProps) => string;\n    getFormData?: () => Record<string, any>;\n    isLoading?: () => boolean;\n    onCancel?: () => void;\n    testId?: string;\n    noElevation?: boolean;\n    className?: string;\n}\n\ninterface GetterWithProps<T> {\n    (props: FormElementRenderProps): T;\n}\n\ninterface GetterWithoutProps<T> {\n    (): T;\n}\n\nexport class FormView extends UIView<FormViewConfig> {\n    public constructor(id: string, config?: FormViewConfig) {\n        if (!config) {\n            config = {};\n        }\n        if (!(\"setupForm\" in config)) {\n            config.setupForm = true;\n        }\n\n        super(id, config);\n\n        this.addElements();\n        this.useGrid(false);\n\n        this.applyPlugins(FormView);\n    }\n\n    public override addElement<TElement extends UIElement = UIElement>(\n        element: TElement\n    ): TElement {\n        if (element.id === \"form\" || element.id === \"formContainer\") {\n            return super.addElement(element);\n        }\n\n        return this.getFormContainer().addElement(element);\n    }\n\n    public setTitle(title: string | GetterWithProps<string>): void {\n        if (typeof title === \"string\") {\n            this.config.getTitle = () => title;\n            return;\n        }\n        this.config.getTitle = title;\n    }\n\n    public setOnSubmit(onSubmit: FormOnSubmit): void {\n        this.config.onSubmit = onSubmit;\n    }\n\n    public setFormData(getter: GetterWithoutProps<Record<string, any>>): void {\n        this.config.getFormData = getter;\n    }\n\n    public getFormContainer(): FormContainerElement {\n        return this.getElement(\"formContainer\") as FormContainerElement;\n    }\n\n    public getFormContentElement(): FormContentElement {\n        return this.getElement(\"formContent\") as FormContentElement;\n    }\n\n    public getFormHeaderElement(): FormHeaderElement {\n        return this.getElement(\"formHeader\") as FormHeaderElement;\n    }\n\n    public getFormFooterElement(): FormFooterElement {\n        return this.getElement(\"formFooter\") as FormFooterElement;\n    }\n\n    public getSubmitButtonElement(): ButtonElement {\n        return this.getFormFooterElement().getElement(\"submit\") as ButtonElement;\n    }\n\n    private addElements(): void {\n        const formContainer = new FormContainerElement(\"formContainer\", {\n            testId: this.config.testId,\n            className: this.config.className,\n            noElevation: this.config.noElevation\n        });\n\n        if (this.config.setupForm) {\n            const form = this.addElement(\n                new FormElement(\"form\", {\n                    onSubmit: (data, form) => {\n                        if (!this.config.onSubmit) {\n                            return;\n                        }\n                        return this.config.onSubmit(data, form);\n                    },\n                    getData: () => {\n                        if (!this.config.getFormData) {\n                            return {};\n                        }\n                        return this.config.getFormData();\n                    }\n                })\n            ) as FormElement;\n\n            form.addElement(formContainer);\n        } else {\n            this.addElement(formContainer);\n        }\n\n        this.addElement(\n            new GenericElement(\"loading\", () => {\n                if (typeof this.config.isLoading !== \"function\") {\n                    return null;\n                }\n\n                return this.config.isLoading() ? <CircularProgress /> : null;\n            })\n        );\n\n        this.addElement(\n            new FormHeaderElement(\"formHeader\", {\n                getTitle: props => {\n                    if (!this.config.getTitle) {\n                        return \"\";\n                    }\n                    return this.config.getTitle(props);\n                }\n            })\n        );\n\n        this.addElement(new FormContentElement(\"formContent\"));\n\n        const footer = new FormFooterElement(\"formFooter\");\n        this.addElement(footer);\n\n        const submitButton = new ButtonElement<FormElementRenderProps>(\"submit\", {\n            type: \"primary\",\n            label: \"Save\",\n            onClick: props => props.formProps.submit()\n        });\n\n        submitButton.moveToTheEndOf(footer);\n\n        const cancelButton = footer.addElement(\n            new ButtonElement(\"cancel\", {\n                type: \"default\",\n                label: \"Cancel\",\n                onClick: () => {\n                    if (!this.config.onCancel) {\n                        return;\n                    }\n                    this.config.onCancel();\n                },\n                shouldRender: () => typeof this.config.onCancel === \"function\"\n            })\n        );\n\n        cancelButton.moveToTheBeginningOf(footer);\n    }\n}\n"],"mappings":"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"}
+{"version":3,"names":["FormView","id","config","setupForm","addElements","useGrid","applyPlugins","element","getFormContainer","addElement","title","getTitle","onSubmit","getter","getFormData","getElement","getFormFooterElement","formContainer","FormContainerElement","testId","className","noElevation","form","FormElement","data","getData","GenericElement","isLoading","FormHeaderElement","props","FormContentElement","footer","FormFooterElement","submitButton","ButtonElement","type","label","onClick","formProps","submit","moveToTheEndOf","cancelButton","onCancel","shouldRender","moveToTheBeginningOf","UIView"],"sources":["FormView.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormOnSubmit } from \"@webiny/form\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { UIElement, UIElementConfig } from \"~/ui/UIElement\";\nimport { FormElement, FormElementRenderProps } from \"~/ui/elements/form/FormElement\";\nimport { ButtonElement } from \"~/ui/elements/ButtonElement\";\nimport { GenericElement } from \"~/ui/elements/GenericElement\";\nimport { FormContentElement } from \"./FormView/FormContentElement\";\nimport { FormHeaderElement } from \"./FormView/FormHeaderElement\";\nimport { FormFooterElement } from \"./FormView/FormFooterElement\";\nimport { FormContainerElement } from \"./FormView/FormContainerElement\";\nimport { UIView } from \"~/ui/UIView\";\n\nexport interface FormViewConfig extends UIElementConfig {\n    setupForm?: boolean;\n    onSubmit?: FormOnSubmit;\n    getTitle?: (props: FormElementRenderProps) => string;\n    getFormData?: () => Record<string, any>;\n    isLoading?: () => boolean;\n    onCancel?: () => void;\n    testId?: string;\n    noElevation?: boolean;\n    className?: string;\n}\n\ninterface GetterWithProps<T> {\n    (props: FormElementRenderProps): T;\n}\n\ninterface GetterWithoutProps<T> {\n    (): T;\n}\n\nexport class FormView extends UIView<FormViewConfig> {\n    public constructor(id: string, config?: FormViewConfig) {\n        if (!config) {\n            config = {};\n        }\n        if (!(\"setupForm\" in config)) {\n            config.setupForm = true;\n        }\n\n        super(id, config);\n\n        this.addElements();\n        this.useGrid(false);\n\n        this.applyPlugins(FormView);\n    }\n\n    public override addElement<TElement extends UIElement = UIElement>(\n        element: TElement\n    ): TElement {\n        if (element.id === \"form\" || element.id === \"formContainer\") {\n            return super.addElement(element);\n        }\n\n        return this.getFormContainer().addElement(element);\n    }\n\n    public setTitle(title: string | GetterWithProps<string>): void {\n        if (typeof title === \"string\") {\n            this.config.getTitle = () => title;\n            return;\n        }\n        this.config.getTitle = title;\n    }\n\n    public setOnSubmit(onSubmit: FormOnSubmit): void {\n        this.config.onSubmit = onSubmit;\n    }\n\n    public setFormData(getter: GetterWithoutProps<Record<string, any>>): void {\n        this.config.getFormData = getter;\n    }\n\n    public getFormContainer(): FormContainerElement {\n        return this.getElement(\"formContainer\") as FormContainerElement;\n    }\n\n    public getFormContentElement(): FormContentElement {\n        return this.getElement(\"formContent\") as FormContentElement;\n    }\n\n    public getFormHeaderElement(): FormHeaderElement {\n        return this.getElement(\"formHeader\") as FormHeaderElement;\n    }\n\n    public getFormFooterElement(): FormFooterElement {\n        return this.getElement(\"formFooter\") as FormFooterElement;\n    }\n\n    public getSubmitButtonElement(): ButtonElement {\n        return this.getFormFooterElement().getElement(\"submit\") as ButtonElement;\n    }\n\n    private addElements(): void {\n        const formContainer = new FormContainerElement(\"formContainer\", {\n            testId: this.config.testId,\n            className: this.config.className,\n            noElevation: this.config.noElevation\n        });\n\n        if (this.config.setupForm) {\n            const form = this.addElement(\n                new FormElement(\"form\", {\n                    onSubmit: (data, form) => {\n                        if (!this.config.onSubmit) {\n                            return;\n                        }\n                        return this.config.onSubmit(data, form);\n                    },\n                    getData: () => {\n                        if (!this.config.getFormData) {\n                            return {};\n                        }\n                        return this.config.getFormData();\n                    }\n                })\n            ) as FormElement;\n\n            form.addElement(formContainer);\n        } else {\n            this.addElement(formContainer);\n        }\n\n        this.addElement(\n            new GenericElement(\"loading\", () => {\n                if (typeof this.config.isLoading !== \"function\") {\n                    return null;\n                }\n\n                return this.config.isLoading() ? <CircularProgress /> : null;\n            })\n        );\n\n        this.addElement(\n            new FormHeaderElement(\"formHeader\", {\n                getTitle: props => {\n                    if (!this.config.getTitle) {\n                        return \"\";\n                    }\n                    return this.config.getTitle(props);\n                }\n            })\n        );\n\n        this.addElement(new FormContentElement(\"formContent\"));\n\n        const footer = new FormFooterElement(\"formFooter\");\n        this.addElement(footer);\n\n        const submitButton = new ButtonElement<FormElementRenderProps>(\"submit\", {\n            type: \"primary\",\n            label: \"Save\",\n            onClick: props => props.formProps.submit()\n        });\n\n        submitButton.moveToTheEndOf(footer);\n\n        const cancelButton = footer.addElement(\n            new ButtonElement(\"cancel\", {\n                type: \"default\",\n                label: \"Cancel\",\n                onClick: () => {\n                    if (!this.config.onCancel) {\n                        return;\n                    }\n                    this.config.onCancel();\n                },\n                shouldRender: () => typeof this.config.onCancel === \"function\"\n            })\n        );\n\n        cancelButton.moveToTheBeginningOf(footer);\n    }\n}\n"],"mappings":"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"}

package/ui/views/OverlayView/ContentElement.js

@@ -1,30 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ContentElement = void 0;
-
 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 = _interopRequireDefault(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _UIElement2 = require("../../UIElement");
-
 var ContentWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "exqtwog0",
   label: "ContentWrapper"
@@ -32,23 +21,16 @@ var ContentWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   width: "100%",
   paddingTop: 65
 });
-
 var ContentElement = /*#__PURE__*/function (_UIElement) {
   (0, _inherits2.default)(ContentElement, _UIElement);
-
   var _super = (0, _createSuper2.default)(ContentElement);
-
   function ContentElement(id) {
     var _this;
-
     (0, _classCallCheck2.default)(this, ContentElement);
     _this = _super.call(this, id);
-
     _this.useGrid(false);
-
     return _this;
   }
-
   (0, _createClass2.default)(ContentElement, [{
     key: "render",
     value: function render(props) {
@@ -57,5 +39,4 @@ var ContentElement = /*#__PURE__*/function (_UIElement) {
   }]);
   return ContentElement;
 }(_UIElement2.UIElement);
-
 exports.ContentElement = ContentElement;

package/ui/views/OverlayView/ContentElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["ContentWrapper","styled","width","paddingTop","ContentElement","id","useGrid","props","UIElement"],"sources":["ContentElement.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { UIElement, UiElementRenderProps } from \"~/ui/UIElement\";\n\nconst ContentWrapper = styled(\"div\")({\n    width: \"100%\",\n    paddingTop: 65\n});\n\nexport class ContentElement extends UIElement {\n    constructor(id: string) {\n        super(id);\n        this.useGrid(false);\n    }\n\n    public override render(props: UiElementRenderProps): React.ReactNode {\n        return <ContentWrapper>{super.render(props)}</ContentWrapper>;\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,cAAc,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACjCC,KAAK,EAAE,MAD0B;EAEjCC,UAAU,EAAE;AAFqB,CAAjB,CAApB;;IAKaC,c;;;;;EACT,wBAAYC,EAAZ,EAAwB;IAAA;;IAAA;IACpB,0BAAMA,EAAN;;IACA,MAAKC,OAAL,CAAa,KAAb;;IAFoB;EAGvB;;;;WAED,gBAAuBC,KAAvB,EAAqE;MACjE,oBAAO,6BAAC,cAAD,+GAA8BA,KAA9B,EAAP;IACH;;;EAR+BC,qB"}
+{"version":3,"names":["ContentWrapper","styled","width","paddingTop","ContentElement","id","useGrid","props","UIElement"],"sources":["ContentElement.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { UIElement, UiElementRenderProps } from \"~/ui/UIElement\";\n\nconst ContentWrapper = styled(\"div\")({\n    width: \"100%\",\n    paddingTop: 65\n});\n\nexport class ContentElement extends UIElement {\n    constructor(id: string) {\n        super(id);\n        this.useGrid(false);\n    }\n\n    public override render(props: UiElementRenderProps): React.ReactNode {\n        return <ContentWrapper>{super.render(props)}</ContentWrapper>;\n    }\n}\n"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AAEA,IAAMA,cAAc,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACjCC,KAAK,EAAE,MAAM;EACbC,UAAU,EAAE;AAChB,CAAC,CAAC;AAAC,IAEUC,cAAc;EAAA;EAAA;EACvB,wBAAYC,EAAU,EAAE;IAAA;IAAA;IACpB,0BAAMA,EAAE;IACR,MAAKC,OAAO,CAAC,KAAK,CAAC;IAAC;EACxB;EAAC;IAAA;IAAA,OAED,gBAAuBC,KAA2B,EAAmB;MACjE,oBAAO,6BAAC,cAAc,+GAAeA,KAAK,EAAmB;IACjE;EAAC;EAAA;AAAA,EAR+BC,qBAAS;AAAA"}