versacall-core-library-react 2.0.70 → 2.0.72

package/dist/components/CoreAppSelector/AppLink.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@material-ui/core/styles");
+var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
+var _ListItemIcon = _interopRequireDefault(require("@material-ui/core/ListItemIcon"));
+var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+var _reactIntl = require("react-intl");
+var _Core = require("../../context/Core");
+var _functions = require("../../functions");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const styles = () => ({
+  listItemRoot: {
+    color: '#ffffff'
+  },
+  activeListItem: {
+    color: '#55b7dc'
+  },
+  svgIcon: {
+    verticalAlign: 'middle',
+    height: 24,
+    width: 24,
+    filter: 'invert(1)'
+  },
+  activeStyle: {
+    backgroundColor: '#3f5c67',
+    color: '#55b7dc',
+    pointerEvents: 'none'
+  }
+});
+const style = {
+  navLink: {
+    textDecoration: 'none',
+    color: '#ffffff'
+  },
+  activeStyle: {
+    backgroundColor: '#3f5c67',
+    pointerEvents: 'none'
+  },
+  normalStyle: {}
+};
+function AppLink(props) {
+  const {
+    core,
+    classes,
+    app,
+    location,
+    intl
+  } = props;
+
+  // console.log(location);
+  // console.log(getUrl(app.metadata));
+  const active = location.pathname === (0, _functions.getUrl)(app.metadata);
+
+  // Look at translation array to get the appropriate name for the component
+  let appName = app.name;
+  if (app.translations) {
+    const translation = app.translations.find(x => x.languageCode === intl.locale);
+    if (translation !== undefined) {
+      appName = translation.name;
+    }
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: active ? style.activeStyle : style.normalStyle
+  }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.NavLink, {
+    to: (0, _functions.getUrl)(app.metadata),
+    key: app.componentID,
+    style: style.navLink,
+    activeStyle: style.activeStyle
+  }, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+    button: true,
+    onClick: () => props.appSelected(app)
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: appName
+  }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement("img", {
+    src: core.formatUrl((0, _functions.getIconUrl)(app.metadata)),
+    className: classes.svgIcon,
+    alt: "icon"
+  }))), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+    classes: {
+      primary: classes.listItemRoot
+    },
+    primary: appName
+  }))));
+}
+AppLink.propTypes = {
+  intl: _propTypes.default.shape().isRequired,
+  core: _propTypes.default.shape().isRequired,
+  location: _propTypes.default.shape().isRequired,
+  classes: _propTypes.default.shape().isRequired,
+  app: _propTypes.default.shape().isRequired,
+  appSelected: _propTypes.default.func.isRequired
+};
+var _default = exports.default = (0, _reactIntl.injectIntl)((0, _reactRouterDom.withRouter)((0, _Core.withCore)((0, _styles.withStyles)(styles)(AppLink))));

package/dist/components/CoreAppSelector/CoreAppSelector.js

@@ -0,0 +1,155 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactRouterDom = require("react-router-dom");
+var _Core = require("../../context/Core");
+var _Authentication = require("../../context/Authentication");
+var _Organization = require("../../context/Organization");
+var _Channels = require("../../context/Channels");
+var _CoreSideBar = _interopRequireDefault(require("../CoreSideBar"));
+var _CoreFrame = _interopRequireDefault(require("../CoreFrame"));
+var _AppLink = _interopRequireDefault(require("./AppLink"));
+var _functions = require("../../functions");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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); } // import { CoreSideBar, CoreFrame } from '..';
+const namespace = 'CoreAppSelector';
+class CoreAppSelector extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      apps: []
+    };
+  }
+  componentDidMount() {
+    this.props.core.log('verbose', namespace, 'componentDidMount()', 'Start');
+    this.updateApps();
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.authentication.didChange(prevProps.authentication) || this.props.organization.didChange(prevProps.organization)) {
+      this.updateApps();
+    }
+  }
+  getAppVersion(routeProps) {
+    const path = routeProps.match.params.app;
+    if (path !== undefined) {
+      const component = this.state.apps.find(_component => (0, _functions.getUrl)(_component.metadata) === "/".concat(path));
+      if (component) {
+        return component.version;
+      }
+    }
+    return null;
+  }
+  selectApp(app) {
+    if (typeof this.props.updateComponentID === 'function') {
+      this.props.updateComponentID(app.componentID);
+    }
+  }
+  updateApps() {
+    if (this.props.authentication.authenticated && this.props.organization.organization !== null && this.props.organization.entity !== null) {
+      this.props.authentication.http({
+        method: 'get',
+        url: "".concat(this.props.core.baseUrl, "/api/components"),
+        params: {
+          type: this.props.componentType,
+          organizationId: this.props.organization.organization.id,
+          entityId: this.props.organization.entity.id
+        }
+      }).then(res => {
+        this.props.core.log('debug', namespace, 'updateApps()', res.data);
+        if (res.data.length > 0 && window.location.hash === '#/') {
+          window.location.hash = "#".concat((0, _functions.getUrl)(res.data[0].metadata));
+        }
+        if (typeof this.props.updateComponentID === 'function') {
+          const component = res.data.find(_component => (0, _functions.getUrl)(_component.metadata) === window.location.hash.substr(1));
+          if (component) {
+            this.props.updateComponentID(component.componentID);
+          }
+        }
+        this.setState({
+          apps: res.data
+        });
+      });
+    }
+  }
+  processMessage(channel, obj) {
+    if (obj.what !== undefined) {
+      if (obj.what === 'package_enabled' || obj.what === 'package_disabled' || obj.what === 'package_added' || obj.what === 'package_updated' || obj.what === 'package_deleted') {
+        this.updateApps();
+      }
+    }
+  }
+
+  /* <NavLink
+  to={getUrl(app.metadata)}
+  key={app.componentID}
+  style={style.navLink}
+  activeStyle={style.activeStyle}
+  >
+  <ListItem
+  button
+  onClick={() => this.selectApp(app)}
+  >
+  <Tooltip title={this.getTranslatedName(app)}>
+  <ListItemIcon>
+  <img src={this.props.core.formatUrl(getIconUrl(app.metadata))} className={classes.svgIcon} alt="icon" />
+  </ListItemIcon>
+  </Tooltip>
+  <ListItemText classes={{ primary: classes.listItemRoot }} primary={this.getTranslatedName(app)} />
+  </ListItem>
+  </NavLink> */
+
+  render() {
+    const {
+      title,
+      componentID,
+      sandbox
+    } = this.props;
+    const {
+      apps
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Channels.ChannelsConsumer, {
+      id: "coreappselector",
+      handler: (channel, obj) => this.processMessage(channel, obj)
+    }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.HashRouter, null, /*#__PURE__*/_react.default.createElement(_CoreSideBar.default, {
+      title: title,
+      componentID: componentID,
+      showEntity: true,
+      apps: apps,
+      updateComponentID: id => this.props.updateComponentID(id),
+      content: apps.map(app => /*#__PURE__*/_react.default.createElement(_AppLink.default, {
+        key: app.componentID,
+        app: app,
+        appSelected: () => this.selectApp(app)
+      }))
+    }, this.props.children, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
+      path: "/:app*",
+      render: routeProps => /*#__PURE__*/_react.default.createElement(_CoreFrame.default, _extends({}, routeProps, {
+        sandbox: sandbox,
+        version: this.getAppVersion(routeProps)
+      }))
+    }))));
+  }
+}
+CoreAppSelector.propTypes = {
+  title: _propTypes.default.string.isRequired,
+  componentID: _propTypes.default.string.isRequired,
+  componentType: _propTypes.default.string.isRequired,
+  sandbox: _propTypes.default.string,
+  updateComponentID: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
+  core: _propTypes.default.shape().isRequired,
+  authentication: _propTypes.default.shape().isRequired,
+  organization: _propTypes.default.shape().isRequired,
+  children: _propTypes.default.node
+};
+CoreAppSelector.defaultProps = {
+  sandbox: '',
+  updateComponentID: false,
+  children: null
+};
+var _default = exports.default = (0, _Core.withCore)((0, _Authentication.withAuthentication)((0, _Organization.withOrganization)(CoreAppSelector)));

package/dist/components/CoreAppSelector/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _CoreAppSelector.default;
+  }
+});
+var _CoreAppSelector = _interopRequireDefault(require("./CoreAppSelector"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/CoreDialogueToolBar/CoreDialogueToolBar.js

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styles = require("@material-ui/core/styles");
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _Print = _interopRequireDefault(require("@material-ui/icons/Print"));
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+var _Toolbar = _interopRequireDefault(require("@material-ui/core/Toolbar"));
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+var _Save = _interopRequireDefault(require("@material-ui/icons/Save"));
+var _AppBar = _interopRequireDefault(require("@material-ui/core/AppBar"));
+var _Badge = _interopRequireDefault(require("@material-ui/core/Badge"));
+var _reactIntl = require("react-intl");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const styles = theme => ({
+  fab: {
+    margin: 0,
+    top: 'auto',
+    right: 20,
+    bottom: 20,
+    left: 'auto',
+    position: 'fixed'
+  },
+  appBar: {
+    position: 'relative'
+  },
+  flex: {
+    flex: 1
+  },
+  root: {
+    flexGrow: 1
+  },
+  separator: {
+    display: 'inline',
+    width: 2,
+    height: 36,
+    background: '#0086b3',
+    margin: 7
+  },
+  paper: {
+    margin: '10px 10px 10px 10px',
+    padding: theme.spacing.unit * 2,
+    textAlign: 'center',
+    color: theme.palette.text.secondary
+  }
+});
+function CoreDialogueToolBar(props) {
+  const {
+    title,
+    warning,
+    intl,
+    classes
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_AppBar.default, {
+    className: classes.appBar,
+    color: "secondary"
+  }, /*#__PURE__*/_react.default.createElement(_Toolbar.default, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    variant: "h6",
+    color: "inherit",
+    className: classes.flex
+  }, title), props.children, props.handlePrint && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: intl.formatMessage({
+      id: '__print'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    color: "inherit",
+    "aria-label": intl.formatMessage({
+      id: '__print'
+    }),
+    onClick: () => props.handlePrint()
+  }, /*#__PURE__*/_react.default.createElement(_Print.default, null))), (props.handlePrint || props.children) && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.separator
+  }), props.handleSave && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: intl.formatMessage({
+      id: '__save'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    color: "inherit",
+    "aria-label": intl.formatMessage({
+      id: '__save'
+    }),
+    onClick: () => props.handleSave()
+  }, /*#__PURE__*/_react.default.createElement(_Badge.default, {
+    badgeContent: "!",
+    color: "error",
+    invisible: !warning
+  }, /*#__PURE__*/_react.default.createElement(_Save.default, null)))), props.handleClose && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: intl.formatMessage({
+      id: '__close'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    color: "inherit",
+    "aria-label": intl.formatMessage({
+      id: '__close'
+    }),
+    onClick: () => props.handleClose()
+  }, /*#__PURE__*/_react.default.createElement(_Close.default, null)))));
+}
+CoreDialogueToolBar.propTypes = {
+  title: _propTypes.default.string,
+  warning: _propTypes.default.bool,
+  handlePrint: _propTypes.default.func,
+  handleSave: _propTypes.default.func,
+  handleClose: _propTypes.default.func,
+  intl: _propTypes.default.shape().isRequired,
+  classes: _propTypes.default.shape().isRequired,
+  children: _propTypes.default.node
+};
+CoreDialogueToolBar.defaultProps = {
+  title: '',
+  warning: false,
+  handlePrint: null,
+  handleSave: null,
+  handleClose: null,
+  children: null
+};
+var _default = exports.default = (0, _reactIntl.injectIntl)((0, _styles.withStyles)(styles)(CoreDialogueToolBar));

package/dist/components/CoreDialogueToolBar/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _CoreDialogueToolBar.default;
+  }
+});
+var _CoreDialogueToolBar = _interopRequireDefault(require("./CoreDialogueToolBar"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/CoreDrawer/CoreDrawer.js

@@ -0,0 +1,236 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _UnfoldMore = _interopRequireDefault(require("@material-ui/icons/UnfoldMore"));
+var _UnfoldLess = _interopRequireDefault(require("@material-ui/icons/UnfoldLess"));
+var _ListItemIcon = _interopRequireDefault(require("@material-ui/core/ListItemIcon"));
+var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));
+var _styles = require("@material-ui/core/styles");
+var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+var _Divider = _interopRequireDefault(require("@material-ui/core/Divider"));
+var _Drawer = _interopRequireDefault(require("@material-ui/core/Drawer"));
+var _reactIntl = require("react-intl");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Authentication = require("../../context/Authentication");
+var _Organization = require("../../context/Organization");
+var _Channels = require("../../context/Channels");
+var _functions = require("../../functions");
+var _Core = require("../../context/Core");
+var _CoreFrame = _interopRequireDefault(require("../CoreFrame"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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 namespace = 'CoreDrawer';
+const styles = theme => ({
+  root: {
+    display: 'flex',
+    height: 'calc(100vh - 64px)',
+    overflow: 'hidden'
+  },
+  drawerPaper: {
+    position: 'relative',
+    whiteSpace: 'nowrap'
+  },
+  drawerPaperClose: {
+    position: 'relative',
+    overflowX: 'hidden',
+    width: theme.spacing.unit * 7,
+    [theme.breakpoints.up('sm')]: {
+      width: theme.spacing.unit * 9
+    }
+  },
+  content: {
+    position: 'relative',
+    width: '100%'
+  },
+  icon: {
+    verticalAlign: 'middle',
+    height: 24,
+    width: 24
+  },
+  rotate: {
+    '-webkit-transform': 'rotate(90deg)',
+    '-moz-transform': 'rotate(90deg)',
+    '-ms-transform': 'rotate(90deg)',
+    '-o-transform': 'rotate(90deg)',
+    transform: 'rotate(90deg)'
+  },
+  dividerRootStart: {
+    height: 2
+  },
+  dividerRoot: {
+    height: 2,
+    marginTop: 8,
+    marginBottom: 8
+  }
+});
+const style = {
+  navLink: {
+    textDecoration: 'none'
+  },
+  activeStyle: {
+    background: '#CFD8DC',
+    pointerEvents: 'none'
+  }
+};
+class CoreDrawer extends _react.Component {
+  constructor() {
+    super();
+    this.state = {
+      apps: [],
+      drawerOpen: true
+    };
+  }
+  componentDidMount() {
+    this.props.core.log('verbose', namespace, 'componentDidMount()', 'Start');
+    this.updateApps();
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.authentication.didChange(prevProps.authentication) || this.props.organization.didChange(prevProps.organization)) {
+      this.updateApps();
+    }
+  }
+  getTranslatedName(app) {
+    // Look at translation array to get the appropriate name for the component
+    const translation = app.translations.find(x => x.languageCode === this.props.intl.locale);
+    if (translation !== undefined) {
+      return translation.name;
+    }
+    return app.name;
+  }
+  getAppVersion(routeProps) {
+    const path = routeProps.match.params.app;
+    if (path !== undefined) {
+      const component = this.state.apps.find(_component => (0, _functions.getUrl)(_component.metadata) === "/".concat(path));
+      if (component) {
+        return component.version;
+      }
+    }
+    return null;
+  }
+  handleClick() {
+    this.setState(prevState => ({
+      drawerOpen: !prevState.drawerOpen
+    }));
+  }
+  updateApps() {
+    if (this.props.authentication.authenticated && this.props.organization.organization !== null && this.props.organization.entity !== null) {
+      this.props.authentication.http({
+        method: 'get',
+        url: "".concat(this.props.core.baseUrl, "/api/components"),
+        params: {
+          type: this.props.componentType,
+          organizationId: this.props.organization.organization.id,
+          entityId: this.props.organization.entity.id
+        }
+      }).then(res => {
+        this.props.core.log('debug', namespace, 'updateApps()', res.data);
+        if (res.data.length > 0 && window.location.hash === '#/') {
+          window.location.hash = "#".concat((0, _functions.getUrl)(res.data[0].metadata));
+        }
+        if (typeof this.props.updateComponentID === 'function') {
+          const component = res.data.find(_component => (0, _functions.getUrl)(_component.metadata) === window.location.hash.substr(1));
+          this.props.updateComponentID(component.componentID);
+        }
+        this.setState({
+          apps: res.data
+        });
+      });
+    }
+  }
+  selectApp(app) {
+    if (typeof this.props.updateComponentID === 'function') {
+      this.props.updateComponentID(app.componentID);
+    }
+  }
+  processMessage(channel, obj) {
+    if (obj.what !== undefined) {
+      if (obj.what === 'package_enabled' || obj.what === 'package_disabled' || obj.what === 'package_added' || obj.what === 'package_updated' || obj.what === 'package_deleted') {
+        this.updateApps();
+      }
+    }
+  }
+  render() {
+    const {
+      sandbox,
+      classes
+    } = this.props;
+    const {
+      apps,
+      drawerOpen
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_reactRouterDom.HashRouter, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.root
+    }, /*#__PURE__*/_react.default.createElement(_Channels.ChannelsConsumer, {
+      id: "coredrawer",
+      handler: (channel, obj) => this.processMessage(channel, obj)
+    }), /*#__PURE__*/_react.default.createElement(_Drawer.default, {
+      variant: "permanent",
+      classes: {
+        paper: drawerOpen ? classes.drawerPaper : classes.drawerPaperClose
+      }
+    }, apps.map(app => /*#__PURE__*/_react.default.createElement(_reactRouterDom.NavLink, {
+      to: (0, _functions.getUrl)(app.metadata),
+      key: app.componentID,
+      style: style.navLink,
+      activeStyle: style.activeStyle
+    }, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+      button: true,
+      onClick: () => this.selectApp(app)
+    }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+      title: this.getTranslatedName(app)
+    }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement("img", {
+      src: this.props.core.formatUrl((0, _functions.getIconUrl)(app.metadata)),
+      className: classes.icon,
+      alt: "icon"
+    }))), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+      primary: this.getTranslatedName(app)
+    })))), /*#__PURE__*/_react.default.createElement(_Divider.default, {
+      classes: {
+        root: apps.length > 0 ? classes.dividerRoot : classes.dividerRootStart
+      }
+    }), /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+      onClick: () => this.handleClick(),
+      button: true
+    }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, drawerOpen ? /*#__PURE__*/_react.default.createElement(_UnfoldLess.default, {
+      className: classes.rotate
+    }) : /*#__PURE__*/_react.default.createElement(_UnfoldMore.default, {
+      className: classes.rotate
+    })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+      primary: "Collapse"
+    }))), /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.content
+    }, this.props.children, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
+      path: "/:app*",
+      render: routeProps => /*#__PURE__*/_react.default.createElement(_CoreFrame.default, _extends({}, routeProps, {
+        sandbox: sandbox,
+        version: this.getAppVersion(routeProps)
+      }))
+    }))));
+  }
+}
+CoreDrawer.propTypes = {
+  componentType: _propTypes.default.string.isRequired,
+  intl: _propTypes.default.shape({
+    locale: _propTypes.default.string
+  }).isRequired,
+  updateComponentID: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
+  sandbox: _propTypes.default.string,
+  core: _propTypes.default.shape().isRequired,
+  authentication: _propTypes.default.shape().isRequired,
+  organization: _propTypes.default.shape().isRequired,
+  classes: _propTypes.default.shape().isRequired,
+  children: _propTypes.default.node
+};
+CoreDrawer.defaultProps = {
+  updateComponentID: false,
+  sandbox: '',
+  children: null
+};
+var _default = exports.default = (0, _reactIntl.injectIntl)((0, _Core.withCore)((0, _Authentication.withAuthentication)((0, _Organization.withOrganization)((0, _styles.withStyles)(styles)(CoreDrawer)))));

package/dist/components/CoreDrawer/README.md

@@ -0,0 +1,36 @@
+# CoreDrawer
+
+This component is used in "main" applications that have "sub" applications.  It makes a call to [components-api](https://github.com/versacall/components-api) to get a list of all components that match the specified type.
+
+Expanded:
+![Expanded](screenshot_expanded.png)
+
+Collapsed:
+![Collaped](screenshot_collapsed.png)
+
+```
+import CoreAppBar from 'core-library-react';
+import CoreDrawer from 'core-library-react';
+
+...
+
+render() {
+  return(
+    <CoreAppBar title="Communications" />
+    <CoreDrawer componentType="communications.ui" />
+  );
+}
+```
+
+## Props
+- componentType : This is the type of component to get.  Defined in the componentDefinition file of a package.  Example: communications.ui
+
+## componentDefinition
+
+This works with componentDefinition elements stored in [packages-api](https://github.com/versacall/packages-api).  Here are a couple of
+key elements:
+- name : This is the name that is shown.
+- type : This is the type that is searched for by the componentType prop.
+- metadata
+  - url : This is the url to open when the item is clicked on.  Can be relative or absolute.
+  - iconUrl : This is the url of the icon to show.