@agilemotion/oui-react-js 1.8.48 → 1.8.50

package/dist/components/form/ImageEditor_bck.js

@@ -0,0 +1,466 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ImageEditorComponent = exports.ImageEditor = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _BaseField = require("./BaseField");
+var _styles = require("@mui/styles");
+var _Utils = _interopRequireDefault(require("../../Utils"));
+var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _reactPromiseTracker = require("react-promise-tracker");
+var _Event = _interopRequireDefault(require("../../event/Event"));
+var _Observable = _interopRequireDefault(require("../../event/Observable"));
+var _EventType = _interopRequireDefault(require("../../event/EventType"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const useStyles = (0, _styles.makeStyles)(theme => ({
+  button: {
+    margin: theme.spacing(1)
+  },
+  input: {
+    display: 'none'
+  },
+  errorMessageDisplay: {
+    color: 'red'
+  }
+}));
+const status = response => {
+  if (response.ok) {
+    return Promise.resolve(response);
+  } else {
+    let error = new Error(response.statusText);
+    error.code = response.status;
+    return Promise.reject(error);
+  }
+};
+const json = response => {
+  return response.text();
+};
+const location = window.location.protocol + "//" + window.location.hostname;
+const ImageEditorComponent = exports.ImageEditorComponent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const [multiple] = _react.default.useState(props.multiple === true);
+  const [angle, setAngle] = _react.default.useState(0);
+  const [zoomDepth, setZoomDepth] = _react.default.useState(null);
+  const [originalImageWidth, setOriginalImageWidth] = _react.default.useState(null);
+  const [originalImageHeight, setOriginalImageHeight] = _react.default.useState(null);
+  const [payloadStorageMode] = _react.default.useState(props.config.payloadStorageMode || 'base64');
+  const classes = useStyles();
+  const width = _Utils.default.getComponentAttribute(props.config, 'width', '320px');
+  const height = _Utils.default.getComponentAttribute(props.config, 'height', '320px');
+  const cacheId = _react.default.useRef(!_Utils.default.isNull(props.base.value) ? props.base.value.documentRepositoryCacheId : null);
+  const base = props.base;
+  _react.default.useEffect(() => {}, [props.initialFile]);
+  function getFetchConfig(data) {
+    const accessToken = sessionStorage.getItem("accessToken");
+    const idToken = sessionStorage.getItem("idToken");
+    return {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Authorization': 'Bearer ' + accessToken,
+        'idToken': idToken
+      },
+      body: data
+    };
+  }
+  function getRotateAngle(action) {
+    let rotateAngle = null;
+    if ("rotateLeft" === action) {
+      rotateAngle = -90;
+    } else if ("rotateRight" === action) {
+      rotateAngle = 90;
+    }
+    return rotateAngle;
+  }
+  function process(callback, data, action) {
+    let fetchConfig = getFetchConfig(data);
+    let url = location + _ApplicationManager.default.getContextRoot() + _Utils.default.getComponentAttribute(props.config, 'processingUrl', null) + "/" + action + "/" + _Utils.default.getComponentAttribute(props.config, "mode", "DOC");
+    let rotateAngle = getRotateAngle(action);
+    if (rotateAngle) {
+      url += "?" + rotateAngle;
+    }
+    (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
+      callback(data);
+    }).catch(e => {
+      if (e.code === 401) {
+        _ApplicationManager.default.clear();
+        _ApplicationManager.default.getApplicationHistory().push('/login');
+      }
+    }));
+  }
+  const handleChange = () => event => {
+    if (cacheId.current) {
+      remove().then(() => cacheId.current = null).catch(e => {});
+    }
+    let files = event.target.files;
+    let file = files[0];
+    let reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => {
+      if (!_Utils.default.isNull(file)) {
+        let fileMetaData = {};
+        fileMetaData.name = file.name;
+        fileMetaData.type = file.type;
+        fileMetaData.size = file.size;
+        if (base.value) {
+          fileMetaData.id = base.value.id;
+        }
+        if ('base64' === payloadStorageMode) {
+          if (_Utils.default.getComponentAttribute(props.config, 'autoRemoveBackground', false)) {
+            process(data => {
+              fileMetaData.url = data;
+              base.handleValueChange(fileMetaData);
+            }, reader.result, 'removeBackground');
+          } else {
+            fileMetaData.url = file.base64;
+            base.handleValueChange(fileMetaData);
+          }
+        } else {
+          if (_Utils.default.getComponentAttribute(props.config, 'autoRemoveBackground', false)) {
+            process(data => {
+              setCacheModeValue(fileMetaData, file);
+            }, reader.result, 'removeBackground');
+          } else {
+            setCacheModeValue(fileMetaData, file);
+          }
+        }
+      }
+    };
+    reader.onloadend = () => {};
+  };
+  const setCacheModeValue = (fileMetaData, file) => {
+    fileMetaData.correlationId = props.config.id;
+    fileMetaData.domain = props.viewId;
+    if (cacheId.current) {
+      remove().then(() => {
+        cacheId.current = null;
+        upload(fileMetaData, file, reader);
+      }).catch(e => {});
+    } else {
+      upload(fileMetaData, file, reader);
+    }
+  };
+  const upload = (metadata, file, reader) => {
+    let uploadUrl = _Utils.default.getComponentAttribute(props.config, 'uploadUrl', null);
+    if (uploadUrl === null) {
+      uploadUrl = _ApplicationManager.default.getContextRoot() + "/docs/api/v1/manager/upload/save";
+    }
+    let payloadStorageMode = props.config.payloadStorageMode;
+    if (payloadStorageMode === 'post') {
+      const accessToken = sessionStorage.getItem("accessToken");
+      const idToken = sessionStorage.getItem("idToken");
+      let data = new FormData();
+      metadata.correlationId = props.viewId + "." + props.config.id;
+      data.append("metadata", JSON.stringify(metadata));
+      data.append("file", file);
+      let fetchConfig = {
+        method: 'POST',
+        headers: {
+          'Accept': 'application/json',
+          'Authorization': 'Bearer ' + accessToken,
+          'idToken': idToken,
+          'tenant': _ApplicationManager.default.getActiveTenant()
+        },
+        body: data
+      };
+      let url = location + uploadUrl;
+      (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
+        metadata.documentRepositoryId = !_Utils.default.isNull(base.value) ? base.value.documentRepositoryId : null;
+        metadata.documentRepositoryCacheId = data;
+        cacheId.current = data;
+        base.handleValueChange(metadata);
+      }).catch(e => {
+        if (e.code === 401) {
+          _ApplicationManager.default.clear();
+          _ApplicationManager.default.getApplicationHistory().push('/login');
+        }
+        let message = {
+          messageType: 'ERROR',
+          message: 'An error has accurred while uploading file'
+        };
+        let event = new _Event.default(_ApplicationManager.default, props.viewId, message);
+        _Observable.default.fireEvent(_EventType.default.MESSAGE_ARRIVED, event);
+      }));
+    } else {
+      metadata.payload = reader.result;
+      base.handleValueChange(metadata);
+    }
+  };
+  const remove = () => {
+    return new Promise((resolve, reject) => {
+      const accessToken = sessionStorage.getItem("accessToken");
+      const idToken = sessionStorage.getItem("idToken");
+      let fetchConfig = {
+        method: 'GET',
+        headers: {
+          'Accept': 'application/json',
+          'Authorization': 'Bearer ' + accessToken,
+          'idToken': idToken,
+          'tenant': _ApplicationManager.default.getActiveTenant()
+        }
+      };
+      let url = location + _ApplicationManager.default.getContextRoot() + '/docs/api/v1/manager/upload/remove/' + cacheId.current;
+      (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(() => {
+        resolve();
+      }).catch(e => {
+        if (e.code === 401) {
+          _ApplicationManager.default.clear();
+          _ApplicationManager.default.getApplicationHistory().push('/login');
+        } else {
+          reject(e);
+        }
+      }));
+    });
+  };
+  _react.default.useEffect(() => {
+    let container = document.getElementById("__image_container");
+    let image = document.getElementById("__image");
+    if (container) {
+      let ratio = 10 * zoomDepth / 100;
+      container.style.width = originalImageWidth + originalImageWidth * ratio + "px";
+      container.style.height = originalImageHeight + originalImageHeight * ratio + "px";
+      image.style.width = container.style.width;
+      image.style.height = container.style.height;
+    }
+  }, [zoomDepth]);
+  const zoom = direction => {
+    if (originalImageWidth === null) {
+      setOriginalImageWidth(document.getElementById("__image").width);
+      setOriginalImageHeight(document.getElementById("__image").height);
+    }
+    let depth = direction === "In" ? zoomDepth + 1 : zoomDepth - 1;
+    if (depth <= 0) {
+      depth = 1;
+    }
+    setZoomDepth(depth);
+  };
+  const rotate = direction => {
+    let rotateMode = _Utils.default.getComponentAttribute(props.config, "rotateMode", null);
+    if (rotateMode === null || rotateMode === 'SERVER') {
+      process(data => {
+        base.handleValueChange({
+          ...base.value,
+          url: data
+        });
+      }, base.value.url, 'rotate' + direction);
+    } else {
+      let rotateAngle = angle + getRotateAngle("rotate" + direction);
+      document.getElementById("__image_container").style.transform = "rotate(" + rotateAngle + "deg)";
+      setAngle(rotateAngle);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: _Utils.default.mergeStyles({
+      width: width
+    }, props.config)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row",
+    style: {
+      marginLeft: '0',
+      marginRight: '0'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*"
+  }, /*#__PURE__*/_react.default.createElement("label", null, _Utils.default.getComponentAttribute(props.config, 'label', '')))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "row",
+    style: {
+      marginLeft: '0',
+      marginRight: '0'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    accept: "image/jpeg,image/gif,image/png,image/x-eps",
+    className: classes.input,
+    id: `contained-button-file-${props.config.id}`,
+    disabled: base.disabled,
+    required: base.required,
+    multiple: multiple,
+    onChange: handleChange(),
+    type: "file"
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: `contained-button-file-${props.config.id}`
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    component: "span",
+    variant: 'contained',
+    size: "large",
+    style: {
+      width: '120px',
+      height: '40px',
+      border: base.hasError ? "1px solid #f44336" : null,
+      color: base.hasError ? "#f44336" : null
+    },
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'UPLOAD'
+    })
+  }, "UPLOAD")), base.hasError ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      color: "#f44336",
+      padding: "8px 0"
+    }
+  }, base.errorMessage)) : null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*",
+    style: {
+      marginLeft: '4px'
+    }
+  }, base.value ? /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: 'contained',
+    size: "large",
+    style: {
+      width: '40px',
+      height: '40px'
+    },
+    onClick: () => rotate('Left'),
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'ROTATE_LEFT'
+    })
+  }) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*",
+    style: {
+      marginLeft: '4px'
+    }
+  }, base.value ? /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: 'contained',
+    size: "large",
+    style: {
+      width: '40px',
+      height: '40px'
+    },
+    onClick: () => rotate('Right'),
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'ROTATE_RIGHT'
+    })
+  }) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*",
+    style: {
+      marginLeft: '4px'
+    }
+  }, base.value ? /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: 'contained',
+    size: "large",
+    style: {
+      width: '40px',
+      height: '40px'
+    },
+    onClick: () => zoom('Out'),
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'ZOOM_OUT'
+    })
+  }) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*",
+    style: {
+      marginLeft: '4px'
+    }
+  }, base.value ? /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: 'contained',
+    size: "large",
+    style: {
+      width: '40px',
+      height: '40px'
+    },
+    onClick: () => zoom('In'),
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'ZOOM_IN'
+    })
+  }) : null)), !_Utils.default.isNull(base.value) ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "row",
+    style: {
+      padding: "8px 0",
+      marginLeft: '0',
+      marginRight: '0'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "__image_parent",
+    style: {
+      width: "100%",
+      height: height,
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+      backgroundColor: 'transparent',
+      backgroundImage: `url(${require('./transparent.jpeg')})`,
+      border: '4px solid #e1e1e1',
+      borderRadius: '4px'
+    },
+    className: "col-*-*"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.button,
+    style: {
+      width: 'auto',
+      height: parseFloat(height.replace('px', '')) - 20 + 'px',
+      maxHeight: parseFloat(height.replace('px', '')) - 20 + 'px',
+      textAlign: 'center',
+      overflow: 'auto',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "__image_container"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    id: "__image",
+    src: base.value.url,
+    alt: '',
+    style: {
+      maxHeight: parseFloat(height.replace('px', '')) - 20 + 'px'
+    }
+  }))))) : null);
+}));
+const ImageEditor = exports.ImageEditor = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const [file, setFile] = _react.default.useState(null);
+  const clearTrigger = _react.default.useRef(false);
+  return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
+    handle: props.handle,
+    valueParser: (value, inbound) => {
+      if (inbound) {
+        clearTrigger.current = !clearTrigger.current;
+        if (!_Utils.default.isNull(value)) {
+          let val = value;
+
+          // TODO : Support multiple file upload
+          if (_Utils.default.getComponentAttribute(props.config, 'multiple', false)) {
+            if (typeof value.length !== 'undefined' && value.length > 0) {
+              val = value[0];
+            } else {
+              if (value.documentRepositoryId) {
+                return value;
+              }
+              return null;
+            }
+          }
+          if (val.map) {
+            val = val.map;
+          }
+          let fileMetaData = {};
+          fileMetaData.name = !_Utils.default.isNull(val.label) ? val.label : val.name;
+          fileMetaData.id = val.id;
+          fileMetaData.type = val.type;
+          fileMetaData.size = val.size;
+          fileMetaData.documentRepositoryId = !_Utils.default.isNull(val.key) ? val.key : val.documentRepositoryId;
+          fileMetaData.documentRepositoryCacheId = val.documentRepositoryCacheId;
+          fileMetaData.url = val.url;
+          if (!_Utils.default.isNull(val.url)) {
+            let file = {};
+            file.base64 = val.url;
+            setFile(file);
+          }
+          return fileMetaData;
+        }
+      }
+      return value;
+    },
+    valueChangeCallback: value => {
+      if (_Utils.default.isNull(value)) {
+        clearTrigger.current = !clearTrigger.current;
+      }
+    }
+  }), base => /*#__PURE__*/_react.default.createElement(ImageEditorComponent, _extends({
+    base: base,
+    initialFile: file,
+    clearTrigger: clearTrigger.current
+  }, props)));
+}));
+var _default = exports.default = ImageEditor;

package/dist/components/layout/CollapsiblePanel.css

@@ -1,9 +1,9 @@
-.coll-panel-container {
-    font-family: sans-serif;
-    text-align: center;
-}
-
-.coll-panel-btn:focus {
-    outline: 0;
-    box-shadow: none;
-}
+.coll-panel-container {
+    font-family: sans-serif;
+    text-align: center;
+}
+
+.coll-panel-btn:focus {
+    outline: 0;
+    box-shadow: none;
+}

package/dist/components/layout/Layout.css

@@ -1,8 +1,8 @@
-.parent-layout {
-    overflow: hidden;
-    block-size: 100dvh;
-    display: flex;
-    flex-direction: column;
-    height: auto !important;
-    padding: 16px !important;
-}
+.parent-layout {
+    overflow: hidden;
+    block-size: 100dvh;
+    display: flex;
+    flex-direction: column;
+    height: auto !important;
+    padding: 16px !important;
+}

package/dist/components/layout/View.css

@@ -1,9 +1,24 @@
 :root { --header-h: 72px; --view-header-h: 112px; --view-header-min: 112px}
 
 .view {
-    padding: 0 32px;
+    padding: 16px 8px 16px 32px;
     background-color: #ffffff;
     border-radius: 4px;
+    width: 100%;
+}
+
+.alert {
+    padding: 12px 4px !important;
+}
+
+.alert p {
+    margin-bottom: 0 !important;
+    color: #4a1117 !important;
+}
+
+.alert-danger {
+    background-color: rgb(235, 63, 33);
+    border-color: #f0737c;
 }
 
 .success-green-text,
@@ -96,7 +111,7 @@
 
     .default-oui-layout {
         margin: 8px;
-        padding: 0 !important;
+        padding: 0;
     }
 
     .oui-form-item {

package/dist/components/layout/ViewPort.js

@@ -14,6 +14,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const ViewPort = props => {
   const navigate = (0, _reactRouterDom.useNavigate)();
   const [loading, setLoading] = _react.default.useState(true);
+  const [width, setWidth] = _react.default.useState('100%');
   const confirmationDialogController = _react.default.useRef({});
   const popupViewController = _react.default.useRef({});
   const openPopupView = view => {
@@ -43,10 +44,10 @@ const ViewPort = props => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "viewport",
     style: {
-      height: 'calc(100vh - 96px)',
-      maxHeight: 'calc(100vh - 96px)',
+      height: 'calc(100vh - 72px)',
+      maxHeight: 'calc(100vh - 72px)',
       position: 'fixed',
-      width: props.windowPinned ? 'calc(100% - 664px)' : 'calc(100% - 348px)',
+      width: props.windowPinned ? `calc(100% - ${props.menuOffset}px - 328px - 12px)` : `calc(100% - ${props.menuOffset}px - 12px)`,
       borderRadius: '4px'
     }
   }, /*#__PURE__*/_react.default.createElement(_PopupView.default, {

package/dist/components/layout/Window.js

@@ -121,7 +121,7 @@ const Window = props => {
       width: 'calc(100% - ' + props.leftOffset + ' )',
       maxWidth: 'unset',
       height: 'calc(100% - 88px)',
-      margin: '8px'
+      margin: '0 8px'
     };
   };
   const getPinnedStyle = () => {
@@ -130,7 +130,7 @@ const Window = props => {
       backgroundColor: '#FFFFFF',
       width: '320px',
       height: 'calc(100% - 88px)',
-      margin: '8px'
+      margin: '0 8px'
     };
   };
   const pinView = function (e) {
@@ -142,13 +142,13 @@ const Window = props => {
           paper.style.transform = windowTransformValue;
         }
         paper.style.width = '320px';
-        paper.style.height = 'calc(100% - 96px)';
+        paper.style.height = 'calc(100% - 80px)';
         paper.style.boxShadow = 'unset';
         paper.style.borderRadius = '4px';
         paper.style.left = 'unset';
-        paper.style.right = '0';
+        paper.style.right = '4px';
         paper.style.position = 'absolute';
-        paper.style.top = '52px';
+        paper.style.top = '44px';
         paper.style.margin = '32px 0';
         paper.style.maxWidth = 'unset';
         let header = document.getElementsByClassName('dialogHeader')[0];
@@ -213,7 +213,7 @@ const Window = props => {
       paper.style.maxWidth = 'unset';
       paper.style.height = 'calc(100% - 88px)';
       paper.style.margin = '8px';
-      paper.style.right = '0';
+      paper.style.right = '4px';
       paper.style.position = 'absolute';
       paper.style.top = '72px';
       paper.style.left = (isNaN(getLeftOffset()) ? '328' : getLeftOffset()) + 'px';

package/dist/components/loader.css

@@ -1,36 +1,36 @@
-.loaderModal {
-	display: block; /* Hidden by default */
-	position: fixed; /* Stay in place */
-	z-index: 3000; /* Sit on top */
-	left: 0;
-	top: 0;
-	width: 100vw; /* Full width */
-	height: 100vh; /* Full height */
-	overflow: hidden; /* Enable scroll if needed */
-	background-color: rgb(0,0,0); /* Fallback color */
-	background-color: rgba(0,0,0,0.1); /* Black w/ opacity */
-}
-
-/* Modal Content/Box */
-.modal-content {
-	background-color: transparent;
-	margin: 30% auto; /* 15% from the top and centered */
-	padding: 20px;
-	border: 1px solid #888;
-	width: 10%; /* Could be more or less, depending on screen size */
-}
-
-/* The Close Button */
-.close {
-	color: #aaa;
-	float: right;
-	font-size: 28px;
-	font-weight: bold;
-}
-
-.close:hover,
-.close:focus {
-	color: black;
-	text-decoration: none;
-	cursor: pointer;
-}
+.loaderModal {
+	display: block; /* Hidden by default */
+	position: fixed; /* Stay in place */
+	z-index: 3000; /* Sit on top */
+	left: 0;
+	top: 0;
+	width: 100vw; /* Full width */
+	height: 100vh; /* Full height */
+	overflow: hidden; /* Enable scroll if needed */
+	background-color: rgb(0,0,0); /* Fallback color */
+	background-color: rgba(0,0,0,0.1); /* Black w/ opacity */
+}
+
+/* Modal Content/Box */
+.modal-content {
+	background-color: transparent;
+	margin: 30% auto; /* 15% from the top and centered */
+	padding: 20px;
+	border: 1px solid #888;
+	width: 10%; /* Could be more or less, depending on screen size */
+}
+
+/* The Close Button */
+.close {
+	color: #aaa;
+	float: right;
+	font-size: 28px;
+	font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+	color: black;
+	text-decoration: none;
+	cursor: pointer;
+}

package/dist/components/media/ClosablePanel.css

@@ -8,7 +8,7 @@
   height: 64px;
   text-align: right;
   padding: 8px;
-  display: inline-block;
+  display: flex;
   width: 100%;
   font-size: 24px;
   font-weight: 500;