@scaleflex/widget-progress-panel 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 scaleflex
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,242 @@
+# `@scaleflex/widget-progress-panel`
+
+[![Plugins][plugins-image]](#plugins)
+[![Website][filerobot-image]][sfx-url]
+[![Version][filerobot-version]][version-url]
+[![Scaleflex team][made-by-image]][sfx-url]
+[![License][license-image]][license-url]
+[![CodeSandbox][codeSandbox-image]][codeSandbox-url]
+
+<div align='center'>
+<img title="Scaleflex Widget logo" alt="Scaleflex Widget logo" src="https://cdn.scaleflex.com/plugins/filerobot-widget/assets/filerobot_widget_logo_with_fire.png?vh=b2ff09" width="140"/>
+</div>
+
+A panel showing the progress of uploading, downloading, transforming with possibility to cancel/retry/show location in [Scaleflex Media Asset Widget](https://www.npmjs.com/package/@scaleflex/widget-core).
+
+## Usage
+
+### NPM
+
+```bash
+npm install --save @scaleflex/widget-progress-panel
+```
+
+### YARN
+
+```bash
+yarn add @scaleflex/widget-progress-panel
+```
+
+then
+
+```js
+import ProgressPanel from '@scaleflex/widget-progress-panel'
+...
+...
+...
+scaleflexWidget.use(ProgressPanel, propertiesObject)
+```
+
+### From CDN
+
+The plugin from CDN is found inside `Scaleflex` global object `Scaleflex.ProgressPanel`
+
+```js
+const ProgressPanel = window.ScaleflexWidget.ProgressPanel
+...
+...
+...
+scaleflexWidget.use(ProgressPanel, propertiesObject)
+```
+
+> If you are using [`@scaleflex/widget-explorer`](../@scaleflex/widget-explorer/#scaleflexwidgetexplorer) plugin you don't need to manually import this plugin as it is being imported automatically there with its styles and the default id `ProgressPanel`.
+
+### Plugin's styles
+
+```js
+import "@scaleflex/widget-core/dist/style.css";
+```
+
+or if you prefer the minified version
+
+```js
+import "@scaleflex/widget-core/dist/style.min.css";
+```
+
+> The plugin's css file should be imported after the [Core's css file](../@scaleflex/widget-core/#modules-styles) for having the styles shown correctly.
+
+### Example
+
+```js
+  const ScaleflexWidget = window.ScaleflexWidget;
+  const demoContainer = "scaleflex-tests-v5a";
+  const demoSecurityTemplateId = "......";
+
+  const widgetInstance = ScaleflexWidget.Core({
+    securityTemplateId: demoSecurityTemplateId,
+    container: demoContainer,
+    dev: false, // optional, default: false
+   });
+
+  const Explorer = ScaleflexWidget.Explorer;
+  const ProgressPanel = ScaleflexWidget.ProgressPanel
+  const XHRUpload = ScaleflexWidget.XHRUpload
+
+  widgetInstance
+    .use(Explorer, { target: "#scaleflex-widget", inline: true })
+    .use(ProgressPanel, {
+      target: '#scaleflex-widget-progress-panel',
+    });
+    .use(XHRUpload)
+```
+
+## Properties
+
+### `target`
+
+<u>Type:</u> `string`
+
+<u>Default:</u> `undefined`
+
+The selector (ID, Class) of an HTML element or an existed HTML element that would be used for displaying the plugin.
+
+> **NOTE** If no target provided, it wll show inside [Explorer](../@scaleflex/widget-explorer).
+
+### `locale`
+
+<u>Type:</u> `object`.
+
+<u>Default:</u>
+
+```js
+strings: {
+  progressPanelProcessingHeaderLabel: 'Processing',
+  progressPanelProcessedHeaderLabel: 'Processed',
+  progressPanelHeaderItemsText: {
+    0: 'item',
+    1: 'items'
+  },
+  progressPanelEtaLeftText: '%{time} left',
+  progressPanelActivityCompleteLabel: 'Uploaded',
+  progressPanelActivityErrorLabel: 'Uploading failed',
+  progressPanelActivityProgressLabel: 'Uploading',
+  progressPanelCompleteActionTitle: 'Show file location',
+  progressPanelVideoActivityCompleteActionTitle: 'Show link',
+  progressPanelErrorActionTitle: 'Retry',
+  progressPanelProgressActionTitle: 'Cancel',
+  progressPanelPauseActionTitle: 'Pause',
+  progressPanelResumeActionTitle: 'Resume',
+  progressPanelAssetProcessingTitle: 'Asset is being processed',
+  uploadDelayedHint: 'It takes few seconds to complete processing, after you can use your uploaded assets.',
+  progressPanelArchiveCompleteLabel: 'Completed archive',
+  progressPanelArchiveFailedLabel: 'Failed archive',
+  progressPanelPreparingArchiveLabel: 'Preparing archive',
+  progressPanelDownloadingArchiveLabel: 'Downloading archive',
+  progressPanelDownloadingActivityLabel: 'Downloading',
+  progressPanelDownloadingActivityErrorLabel: 'Downloading failed',
+  progressPanelDownloadingActivityCompleteLabel: 'Downloaded',
+  progressPanelTranscodeActivityLabel: 'Transcoding',
+  progressPanelTranscodedActivityLabel: 'Transcoded',
+  progressPanelTranscodeErrorActivityLabel: 'Transcoding failed',
+  progressPanelCompressActivityLabel: 'Compressing',
+  progressPanelCompressedActivityLabel: 'Compressed',
+  progressPanelCompressErrorActivityLabel: 'Compressing failed',
+  progressPanelConvertActivityLabel: 'Converting',
+  progressPanelConvertedActivityLabel: 'Converted',
+  progressPanelConvertErrorActivityLabel: 'Converting failed',
+  progressPanelPreparingCsvActivityLabel: 'Preparing CSV',
+  progressPanelProcessingCsvActivityLabel: 'Processing CSV',
+  progressPanelProcessingCsvActivityErrorLabel: 'Processing CSV failed',
+  progressPanelProcessedCsvActivityLabel: 'Processed CSV'
+}
+```
+
+Customizing some of the translations or the language's strings and replace the default locale.
+
+## Events
+
+The progress panel plugin emits different events that you could subscribe to or add your handler to be called with the provided arguments passed while emitting/firing the event, the events are listed below with examples show the parameters for handler:
+
+### `progressPanel-minimize`
+
+Emitted when progress panel is minimized.
+
+- `value`: minimize value true/false.
+
+### `progressPanel-toggle`
+
+Emitted when progress panel is opened/closed.
+
+- `value`: toggle value true/false.
+
+### `activities-reset`
+
+Emitted when progress panel is closed.
+
+### `activity-progress`
+
+Emitted when activity is on progress.
+
+`params: object`:
+
+- `id`: activity id.
+- `percentage`: activity progress percentage.
+
+### `activity-update`
+
+Emitted when activity is updated.
+
+`params: object`:
+
+- `id`: activity id.
+- `progress`: activity progress details.
+
+### `activity-action`
+
+Emitted when activity action button is clicked.
+
+`params: object`:
+
+- `id`: activity id.
+- `activity`: whole activity details.
+- `activityActionType`: action type(locate, play, pause, embed).
+
+### `activity-error`
+
+Emitted when activity has an error.
+
+`params: object`:
+
+- `id`: activity id.
+- `error`: error details.
+
+### `activity-retry`
+
+Emitted when activity is retried.
+
+`params: object`:
+
+- `id`: activity id.
+
+### `activity-cancel`
+
+Emitted when activity is cancelled.
+
+`params: object`:
+
+- `id`: activity id.
+
+<!-- Variables -->
+
+[npm-url]: https://www.npmjs.com/package/@scaleflex/widget-progress-panel
+[license-url]: https://opensource.org/licenses/MIT
+[sfx-url]: https://www.scaleflex.com/
+[version-url]: https://www.npmjs.com/package/@scaleflex/widget-progress-panel
+[codeSandbox-url]: https://codesandbox.io/s/filerobot-widget-v3-c5l9th
+[npm-image]: https://img.shields.io/npm/v/@telus/remark-config.svg?style=for-the-badge&logo=npm
+[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge
+[made-by-image]: https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg?style=for-the-badge
+[plugins-image]: https://img.shields.io/static/v1?label=Scaleflex&message=Plugins&color=yellow&style=for-the-badge
+[filerobot-image]: https://img.shields.io/static/v1?label=Scaleflex&message=website&color=orange&style=for-the-badge
+[filerobot-version]: https://img.shields.io/npm/v/@scaleflex/widget-progress-panel?label=Version&style=for-the-badge&logo=npm
+[codeSandbox-image]: https://img.shields.io/badge/CodeSandbox-black?style=for-the-badge&logo=CodeSandbox

package/lib/ProgressPanel.constants.js

@@ -0,0 +1,56 @@
+import { Video2, Link, Archieve, Image2, File2, Music, Documentation, Script, Csv, Target, Pause, Play, Font2 } from '@scaleflex/icons';
+import { PC } from '@scaleflex/widget-common';
+export var ACTIVITY_ICONS = {
+  Video: Video2,
+  Archive: Archieve,
+  Font2: Font2,
+  Image: Image2,
+  Csv: Csv
+};
+export var PROGRESS_PANEL_FILE_ICONS = {
+  image: {
+    icon: Image2,
+    iconColor: PC.Green
+  },
+  application: {
+    icon: File2,
+    iconColor: PC.Red
+  },
+  video: {
+    icon: Video2,
+    iconColor: PC.Instagram
+  },
+  audio: {
+    icon: Music,
+    iconColor: PC.Device
+  },
+  text: {
+    icon: Documentation,
+    iconColor: PC.GoogleDrive
+  },
+  archive: {
+    icon: Archieve,
+    iconColor: PC.Orange
+  },
+  script: {
+    icon: Script,
+    iconColor: PC.OneDrive
+  }
+};
+export var PROGRESS_PANEL_FILE_ICON_BY_EXT = {
+  zip: PROGRESS_PANEL_FILE_ICONS.archive,
+  rar: PROGRESS_PANEL_FILE_ICONS.archive,
+  tar: PROGRESS_PANEL_FILE_ICONS.archive,
+  gz: PROGRESS_PANEL_FILE_ICONS.archive,
+  js: PROGRESS_PANEL_FILE_ICONS.script,
+  py: PROGRESS_PANEL_FILE_ICONS.script,
+  jsx: PROGRESS_PANEL_FILE_ICONS.script,
+  tsx: PROGRESS_PANEL_FILE_ICONS.script,
+  php: PROGRESS_PANEL_FILE_ICONS.script
+};
+export var ACTIVITY_BUTTON_ICONS = {
+  Link: Link,
+  Target: Target,
+  Pause: Pause,
+  Play: Play
+};

package/lib/ProgressPanel.styled.js

@@ -0,0 +1,151 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled, { css } from 'styled-components';
+import { FV, PC, PSH, Image } from '@scaleflex/widget-common';
+import { IconButton } from '@scaleflex/ui/core';
+import { Arrow as StyledArrow, Loading } from '@scaleflex/icons';
+var ProgressPanelContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: ", ";\n  right: 20px;\n  bottom: 0;\n  width: 470px;\n  transition: all 300ms ease-out;\n  max-height: 360px;\n  border-radius:", ";\n  background-color: ", ";\n  z-index: ", ";\n  box-shadow: ", ";\n  visibility: ", ";\n  opacity: ", ";\n  transform: ", ";\n"])), function (_ref) {
+  var position = _ref.position;
+  return position;
+}, function (_ref2) {
+  var isMinimized = _ref2.isMinimized;
+  return isMinimized ? '4px' : '0px 0px 4px 4px';
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.palette[PC.BackgroundSecondary];
+}, function (_ref4) {
+  var zIndex = _ref4.zIndex;
+  return zIndex;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.shadows[PSH.ShadowLg];
+}, function (_ref6) {
+  var show = _ref6.show;
+  return show ? 'visible' : 'hidden';
+}, function (_ref7) {
+  var show = _ref7.show;
+  return show ? 1 : 0;
+}, function (_ref8) {
+  var show = _ref8.show;
+  return show ? 'translate3d(0, -24px, 0)' : 'translate3d(0, 74px, 0)';
+});
+var ProgressPanelList = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  overflow: auto;\n  max-height: 233px;\n"])));
+var ActionButtonsWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  column-gap: 12px;\n"])));
+var ActionButton = styled(IconButton)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: none;\n    padding: 4px;\n    width: 22px;\n    height: 22px;\n    background: ", ";\n    border-radius: 50%;\n\n    ", "\n\n    &:hover {\n      background-color:  ", ";\n    }\n\n    &:focus {\n      background-color:  ", ";\n    }\n\n    &:active {\n      background-color:  ", ";\n    }\n"])), function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.palette[PC.IconsPrimary];
+}, function (_ref10) {
+  var isResumeButton = _ref10.isResumeButton;
+  return isResumeButton && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      svg {\n        margin-left: 2px;\n      }\n    "])));
+}, function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.palette[PC.IconsPrimaryHover];
+}, function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.palette[PC.IconsPrimaryHover];
+}, function (_ref13) {
+  var theme = _ref13.theme;
+  return theme.palette[PC.IconsPrimaryHover];
+});
+var ActivityStatus = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: inline-flex;\n"])));
+
+// TODO: remove this container when upload is updated to new implementation
+var ProgressPanelActivityContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 0px 16px;\n\n  ", "\n\n  ", "\n"])), function (_ref14) {
+  var disableAction = _ref14.disableAction;
+  return !disableAction && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    &:hover {\n      ", " {\n        display: inline-flex;\n      }\n      ", " {\n        display: none;\n      }\n    }\n"])), ActionButton, ActivityStatus);
+}, function (_ref15) {
+  var disableAction = _ref15.disableAction;
+  return !disableAction && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n     &:hover {\n      background-color: ", " ;\n     }\n     cursor: pointer;\n  "])), function (_ref16) {
+    var theme = _ref16.theme;
+    return theme.palette[PC.BackgroundHover];
+  });
+});
+// TODO: rename to ProgressPanelActivityContainer upload is updated to new implementation
+var ProgressPanelActivityContainerNew = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  padding: 0px 16px;\n\n  ", "\n"])), function (_ref17) {
+  var disableAction = _ref17.disableAction,
+    showBackgroundHover = _ref17.showBackgroundHover,
+    theme = _ref17.theme,
+    showActivityButton = _ref17.showActivityButton;
+  return !disableAction && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    &:hover {\n      ", " {\n        display: inline-flex;\n      }\n\n      ", " {\n        ", "\n      }\n      background-color: ", ";\n      cursor:", ";\n    }\n"])), ActionButton, ActivityStatus, showActivityButton && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n          display: none\n        "]))), showBackgroundHover && theme.palette[PC.BackgroundHover], showBackgroundHover && 'pointer');
+});
+var ProgressPanelActivityWrapper = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  padding: 12px 0px;\n"])));
+var ProgressPanelActivity = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between ;\n  height: 22px;\n"])));
+var ActivityInfo = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  column-gap: 12px;\n  opacity: ", " ;\n"])), function (_ref18) {
+  var $opacity = _ref18.$opacity;
+  return $opacity;
+});
+var ProgressPanelHeader = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  gap: 10px;\n  height: 48px;\n  border-radius:", ";\n  background:", ";\n  color: ", ";\n"])), function (_ref19) {
+  var isMinimized = _ref19.isMinimized;
+  return isMinimized ? '4px' : '4px 4px 0px 0px';
+}, function (_ref20) {
+  var palette = _ref20.theme.palette;
+  return palette[PC.AccentPrimaryActive];
+}, function (_ref21) {
+  var palette = _ref21.theme.palette;
+  return palette[PC.BackgroundStateless];
+});
+var ProgressPanelInfo = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral([""])));
+var ProgressPanelState = styled.span(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n ", "\n\n"])), function (_ref22) {
+  var hasTotalEta = _ref22.hasTotalEta;
+  return hasTotalEta && css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n &:after {\n    content: '\u2022';\n    margin: 0 8px;\n  }\n"])));
+});
+var ProgressPanelEta = styled.span(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n"])));
+var ProgressPanelActions = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  display: flex;\n  column-gap: 12px;\n"])));
+var Arrow = styled(StyledArrow)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  transform: ", ";\n"])), function (_ref23) {
+  var $isMinimized = _ref23.$isMinimized;
+  return $isMinimized ? 'rotate(270deg)' : 'rotate(-270deg)';
+});
+var ProgressPanelIconButton = styled(IconButton)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n color: ", ";\n\n  &:hover,\n  &:focus,\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (_ref24) {
+  var palette = _ref24.theme.palette;
+  return palette[PC.IconsInvert];
+}, function (_ref25) {
+  var palette = _ref25.theme.palette;
+  return palette[PC.AccentPrimaryHover];
+}, function (_ref26) {
+  var palette = _ref26.theme.palette;
+  return palette[PC.IconsInvert];
+});
+var ActivityInfoMain = styled.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  display: flex;\n  column-gap: 4px;\n  line-height: 1.2;\n"])));
+var ActivityFileState = styled.span(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  font-weight: 500;\n"])));
+var ActivityFileName = styled.span(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  max-width: 230px;\n"])));
+var NotificationContainer = styled.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  padding: 0px 16px;\n  background-color: ", ";\n"])), function (_ref27) {
+  var palette = _ref27.theme.palette;
+  return palette[PC.BackgroundBlue];
+});
+var NotificationWrapper = styled.div(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n   display: flex;\n   justify-content: space-between ;\n"])));
+var NotificationText = styled.span(function (_ref28) {
+  var _ref28$theme = _ref28.theme,
+    palette = _ref28$theme.palette,
+    typography = _ref28$theme.typography;
+  return css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n  max-width: 366px;\n  ", ";\n  color: ", ";\n"])), typography.font[FV.LabelMedium], palette[PC.TextInfo]);
+});
+var LoadingIcon = styled(Loading)(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  animation: rotating-spinner 2s linear infinite;\n"])));
+var FileIcon = styled(Image)(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  height: 22px;\n  width: 22px;\n"])));
+var Styled = {
+  ProgressPanelContainer: ProgressPanelContainer,
+  ProgressPanelList: ProgressPanelList,
+  ProgressPanelActivityContainer: ProgressPanelActivityContainer,
+  ProgressPanelActivityContainerNew: ProgressPanelActivityContainerNew,
+  ProgressPanelActivityWrapper: ProgressPanelActivityWrapper,
+  ProgressPanelActivity: ProgressPanelActivity,
+  ActivityInfo: ActivityInfo,
+  ActivityInfoMain: ActivityInfoMain,
+  ActivityFileState: ActivityFileState,
+  ActivityFileName: ActivityFileName,
+  ActivityStatus: ActivityStatus,
+  ProgressPanelHeader: ProgressPanelHeader,
+  ProgressPanelInfo: ProgressPanelInfo,
+  ProgressPanelState: ProgressPanelState,
+  ProgressPanelEta: ProgressPanelEta,
+  ProgressPanelActions: ProgressPanelActions,
+  ProgressPanelIconButton: ProgressPanelIconButton,
+  Arrow: Arrow,
+  ActionButtonsWrapper: ActionButtonsWrapper,
+  ActionButton: ActionButton,
+  NotificationContainer: NotificationContainer,
+  NotificationWrapper: NotificationWrapper,
+  NotificationText: NotificationText,
+  LoadingIcon: LoadingIcon,
+  FileIcon: FileIcon
+};
+export default Styled;

package/lib/components/Activity.js

@@ -0,0 +1,82 @@
+import { Divider } from '@scaleflex/ui/core';
+import { PROGRESS_PANEL_STATUS } from '@scaleflex/widget-utils/lib/constants';
+import { useCore } from '@scaleflex/widget-core/lib/hooks';
+import { isProgressPanelActive } from '../progressPanel.slice';
+import ActivityActions from './ActivityActions';
+import ActivityStatus from './ActivityStatus';
+import ProgressPanelFileIcon from './common/ProgressPanelFileIcon';
+import Styled from '../ProgressPanel.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Activity = function Activity(_ref) {
+  var _activity$progress, _activity$progress2, _statusData$status, _statusData$PROGRESS_, _statusData$PROGRESS_2, _statusData$status2;
+  var activity = _ref.activity,
+    isLastItem = _ref.isLastItem,
+    i18n = _ref.i18n;
+  var _useCore = useCore(),
+    emit = _useCore.emit;
+  var id = activity.id,
+    _activity$statusData = activity.statusData,
+    statusData = _activity$statusData === void 0 ? {} : _activity$statusData,
+    name = activity.name,
+    _activity$hideRetryBu = activity.hideRetryButton,
+    hideRetryButton = _activity$hideRetryBu === void 0 ? false : _activity$hideRetryBu;
+  var percentage = activity === null || activity === void 0 ? void 0 : (_activity$progress = activity.progress) === null || _activity$progress === void 0 ? void 0 : _activity$progress.percentage;
+  var status = activity === null || activity === void 0 ? void 0 : (_activity$progress2 = activity.progress) === null || _activity$progress2 === void 0 ? void 0 : _activity$progress2.status;
+  var isStatusComplete = status === PROGRESS_PANEL_STATUS.COMPLETE;
+  var actionButtons = (_statusData$status = statusData[status]) === null || _statusData$status === void 0 ? void 0 : _statusData$status.actionButtons;
+  var completeActionButton = (_statusData$PROGRESS_ = statusData[PROGRESS_PANEL_STATUS.COMPLETE]) === null || _statusData$PROGRESS_ === void 0 ? void 0 : (_statusData$PROGRESS_2 = _statusData$PROGRESS_.actionButtons) === null || _statusData$PROGRESS_2 === void 0 ? void 0 : _statusData$PROGRESS_2[0];
+  var hasCompleteActionButtons = isStatusComplete && !!completeActionButton;
+  var almostCompleted = status === PROGRESS_PANEL_STATUS.PROGRESSING && percentage === 100;
+  var isErrorStatus = status === PROGRESS_PANEL_STATUS.ERROR;
+  var hideActivityRetryButton = isErrorStatus && hideRetryButton;
+  var handleAction = function handleAction(event, activityActionType) {
+    event.stopPropagation();
+    emit('activity-action', {
+      id: id,
+      activity: activity,
+      activityActionType: activityActionType
+    });
+  };
+  var activityStatusLabel = i18n((_statusData$status2 = statusData[status]) === null || _statusData$status2 === void 0 ? void 0 : _statusData$status2.labelI18nKey);
+  var activityTitle = name || activityStatusLabel || status;
+  return /*#__PURE__*/_jsxs(Styled.ProgressPanelActivityContainerNew, {
+    showActivityButton: !hideActivityRetryButton,
+    disableAction: isStatusComplete && !actionButtons || almostCompleted,
+    showBackgroundHover: hasCompleteActionButtons,
+    onClick: hasCompleteActionButtons ? function (event) {
+      return handleAction(event, completeActionButton.type);
+    } : undefined,
+    children: [/*#__PURE__*/_jsx(Styled.ProgressPanelActivityWrapper, {
+      children: /*#__PURE__*/_jsxs(Styled.ProgressPanelActivity, {
+        children: [/*#__PURE__*/_jsxs(Styled.ActivityInfo, {
+          $opacity: isProgressPanelActive(status) && 0.7,
+          "aria-label": activityTitle,
+          title: activityTitle,
+          children: [/*#__PURE__*/_jsx(ProgressPanelFileIcon, {
+            activity: activity
+          }), /*#__PURE__*/_jsxs(Styled.ActivityInfoMain, {
+            children: [/*#__PURE__*/_jsx(Styled.ActivityFileState, {
+              children: activityStatusLabel
+            }), name && /*#__PURE__*/_jsx(Styled.ActivityFileName, {
+              children: name
+            })]
+          })]
+        }), !almostCompleted && /*#__PURE__*/_jsx(ActivityActions, {
+          hideRetryButton: hideRetryButton,
+          id: id,
+          status: status,
+          i18n: i18n,
+          actionButtons: actionButtons,
+          handleAction: handleAction
+        }), /*#__PURE__*/_jsx(ActivityStatus, {
+          status: status,
+          statusTitle: activityStatusLabel,
+          percentage: percentage,
+          almostCompleted: almostCompleted,
+          i18n: i18n
+        })]
+      })
+    }), !isLastItem && /*#__PURE__*/_jsx(Divider, {})]
+  });
+};
+export default Activity;

package/lib/components/ActivityActions.js

@@ -0,0 +1,63 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { PROGRESS_PANEL_STATUS } from '@scaleflex/widget-utils/lib/constants';
+import CancelButton from './CancelButton';
+import { ACTIVITY_BUTTON_ICONS } from '../ProgressPanel.constants';
+import RetryButton from './RetryButton';
+import Styled from '../ProgressPanel.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ActivityActions = function ActivityActions(_ref) {
+  var _activityActions$stat;
+  var id = _ref.id,
+    status = _ref.status,
+    actionButtons = _ref.actionButtons,
+    i18n = _ref.i18n,
+    handleAction = _ref.handleAction,
+    hideRetryButton = _ref.hideRetryButton;
+  var activityActions = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, PROGRESS_PANEL_STATUS.PREPARING, function () {
+    return /*#__PURE__*/_jsx(CancelButton, {
+      id: id,
+      i18n: i18n
+    });
+  }), PROGRESS_PANEL_STATUS.PROGRESSING, function () {
+    return /*#__PURE__*/_jsx(CancelButton, {
+      id: id,
+      i18n: i18n
+    });
+  }), PROGRESS_PANEL_STATUS.PAUSED, function () {
+    return /*#__PURE__*/_jsx(CancelButton, {
+      id: id,
+      i18n: i18n
+    });
+  }), PROGRESS_PANEL_STATUS.ERROR, function () {
+    return !hideRetryButton && /*#__PURE__*/_jsx(RetryButton, {
+      id: id,
+      i18n: i18n
+    });
+  });
+  return /*#__PURE__*/_jsxs(Styled.ActionButtonsWrapper, {
+    children: [(_activityActions$stat = activityActions[status]) === null || _activityActions$stat === void 0 ? void 0 : _activityActions$stat.call(activityActions), actionButtons && actionButtons.map(function (button) {
+      var ButtonIcon = ACTIVITY_BUTTON_ICONS[button.icon];
+      return ButtonIcon && /*#__PURE__*/_jsx(Styled.ActionButton, {
+        size: "sm",
+        color: "primary",
+        onClick: function onClick(event) {
+          return handleAction(event, button.type);
+        },
+        "aria-label": i18n(button.titleI18nKey),
+        title: i18n(button.titleI18nKey),
+        isResumeButton: button.type === 'play',
+        children: function children(iconProps) {
+          return /*#__PURE__*/_jsx(ButtonIcon, _objectSpread(_objectSpread({}, iconProps), {}, {
+            size: 12
+          }));
+        }
+      }, i18n(button.titleI18nKey));
+    })]
+  });
+};
+export default ActivityActions;

package/lib/components/ActivityCircularProgress/ActivityCircularProgress.styled.js

@@ -0,0 +1,39 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled, { css, keyframes } from 'styled-components';
+import { PC } from '@scaleflex/widget-common';
+var circulate = keyframes({
+  '0%': {
+    // let the progress start at the top of the ring
+    transform: 'rotate(-90deg)'
+  },
+  '100%': {
+    transform: 'rotate(270deg)'
+  }
+});
+var CircularProgressRoot = styled.span(function (_ref) {
+  var palette = _ref.theme.palette,
+    determinate = _ref.determinate;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: 22px;\n  height: 22px;\n  color: ", ";\n\n  ", "\n\n  ", "\n"])), palette[PC.Success], determinate && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    transform: rotate(-90deg);\n    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  "]))), !determinate && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["animation: 0.5s linear 0s infinite normal none running ", ";"])), circulate));
+});
+var CircularProgressSvg = styled.svg(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: block\n"])));
+var CircularProgressTrack = styled.circle(function (_ref2) {
+  var palette = _ref2.theme.palette,
+    size = _ref2.size,
+    thickness = _ref2.thickness;
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  cx:  ", ";\n  cy:   ", ";\n  r:  ", ";\n  fill: transparent;\n  stroke: ", ";\n  stroke-width: ", " ;\n"])), size, size, (size - thickness) / 2, palette[PC.BackgroundGrey], thickness);
+});
+var CircularProgress = styled.circle(function (_ref3) {
+  var size = _ref3.size,
+    thickness = _ref3.thickness,
+    strokeDasharray = _ref3.strokeDasharray,
+    strokeDashoffset = _ref3.strokeDashoffset;
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  cx:   ", ";\n  cy:   ", ";\n  r:  ", ";\n  fill: none;\n  stroke: currentColor;\n  stroke-dasharray:  ", ";\n  stroke-dashoffset: ", ";\n  stroke-width: ", " ;\n  transition: stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n"])), size, size, (size - thickness) / 2, strokeDasharray, strokeDashoffset, thickness);
+});
+var Styled = {
+  CircularProgressRoot: CircularProgressRoot,
+  CircularProgress: CircularProgress,
+  CircularProgressTrack: CircularProgressTrack,
+  CircularProgressSvg: CircularProgressSvg
+};
+export default Styled;