logitude-dashboard-library 3.2.56 → 3.2.58

package/dist/assets/styles/dl-dashboard.scss

@@ -1274,4 +1274,139 @@ $dark-grey: #717585;
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
+}
+
+// Widget Copy Dropdown (Duplicate / Copy)
+.widget-copy-dropdown-container {
+    &-content {
+        padding: 0 !important;
+        border-radius: 4px !important;
+        box-shadow: 0px 8px 16px 0px #0000001A !important;
+        border: 1px solid #F3F4F5 !important;
+    }
+}
+
+.widget-copy-dropdown-menu {
+    background: #FFFFFF;
+    border-radius: 4px;
+    width: 168px;
+    height: 72px;
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .widget-copy-dropdown-item {
+        padding: 6px 10px;
+        font-family: "Manrope", sans-serif;
+        font-weight: 500;
+        font-size: 12px;
+        line-height: 16px;
+        color: #404040;
+        cursor: pointer;
+        white-space: nowrap;
+
+        &:hover {
+            background-color: #F3F4F5;
+            border-radius: 4px;
+        }
+    }
+}
+
+// Widget Copied Notification
+.widget-copied-notification {
+    position: absolute;
+    top: 32px;
+    left: 8px;
+    background: #19395C;
+    color: #FFFFFF;
+    padding: 6px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    z-index: 1000;
+    white-space: nowrap;
+    width: calc(100% - 16px);
+    max-width: calc(100% - 16px);
+    animation: widgetCopiedFadeIn 0.2s ease;
+
+    .widget-copied-notification-check {
+        font-size: 12px;
+        line-height: 16px;
+    }
+
+    .widget-copied-notification-title {
+        font-family: "Manrope", sans-serif;
+        font-weight: 600;
+        font-size: 12px;
+        line-height: 16px;
+        max-width: calc(100% - 50px);
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .widget-copied-notification-text {
+        font-family: "Manrope", sans-serif;
+        font-weight: 500;
+        font-size: 12px;
+        line-height: 16px;
+    }
+}
+
+@keyframes widgetCopiedFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.dl-views-chart-container {
+    overflow: auto;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+    padding: 8px 12px 12px;
+}
+
+.dl-views-widget-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.dl-views-widget-row {
+    text-align: left;
+}
+
+.dl-views-widget-link {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    color: #0c64c0;
+    font-size: 13px;
+    line-height: 18px;
+    text-align: left;
+    font-family: "Manrope", sans-serif;
+}
+
+.dl-views-widget-link:hover {
+    text-decoration: underline;
+}
+
+.dl-views-widget-empty {
+    padding: 12px;
+    color: #6e7072;
+    font-size: 13px;
+    font-family: "Manrope", sans-serif;
 }

package/dist/features/Dashboard/ChartsComponents/CustomCharts/ViewsChart.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { CustomChartProps } from "./CustomChart";
+declare const ViewsChart: (props: {
+    customChartProps: CustomChartProps;
+}) => React.JSX.Element;
+export default ViewsChart;

package/dist/features/Dashboard/DashboardDesigner.d.ts

@@ -19,6 +19,7 @@ declare type DashboardDesignerProps = {
     onLayoutChange: (layouts: Layouts) => void;
     onWidgetDelete: (deleteProps: DeleteWidgetProps) => void;
     onCopyWidget?: (id: string) => void;
+    onCopyWidgetToClipboard?: (key: string, widget: ReactWidgetPM) => void;
     dataBinding: DashboardDataBinding;
     onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
 };

package/dist/features/Dashboard/WidgetCard.d.ts

@@ -5,6 +5,8 @@ import { DashboardDataBinding } from '../../types/DashboardDataBinding';
 declare type WidgetCardProps = {
     editBtnClicked(widget: any): any;
     copyBtnClicked?(id: any): any;
+    duplicateBtnClicked?(id: any): any;
+    copyToClipboardBtnClicked?(key: any, widget: ReactWidgetPM): any;
     deleteBtnClicked(i: any): any;
     widget: ReactWidgetPM | undefined;
     widgetRef: ReactWidgetPM | undefined;

package/dist/index.d.ts

@@ -19,6 +19,7 @@ declare type DashboardProps = {
     }) => void;
     openEditWidget: (Widget: ReactWidgetPM) => void;
     onCopyWidget?: (key: string) => void;
+    onCopyWidgetToClipboard?: (key: string, widget: ReactWidgetPM) => void;
     openDeleteWidgetConfirmWindow: (deleteProps: DeleteWidgetProps) => void;
     onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
 };

package/dist/index.js

@@ -1845,7 +1845,7 @@ var TableChart = function TableChart(props) {
       rowDate = null;
     }
 
-    return fieldCode == "ShipmentNumber" && objectTableName == "Shipment" || IsShipmentMasterFieldClickable(fieldCode, rowDate) || fieldCode == "InvoiceNumber" && objectTableName == "APInvoice" || fieldCode == "InvoiceNumber" && objectTableName == "ARInvoice" || fieldCode == "ContainerNumber" && objectTableName == "Container" || fieldCode == "QuoteNumber" && objectTableName == "Quote" || fieldCode == "Subject" && objectTableName == "Opportunity" || fieldCode == "EnglishName" && objectTableName == "Customer" || fieldCode == "TaskNumber" && objectTableName == "Task" || fieldCode == "Subject" && objectTableName == "Activity" || fieldCode == "TicketNumber" && objectTableName == "Ticket";
+    return fieldCode == "ShipmentNumber" && objectTableName == "Shipment" || IsShipmentMasterFieldClickable(fieldCode, rowDate) || fieldCode == "InvoiceNumber" && objectTableName == "APInvoice" || fieldCode == "InvoiceNumber" && objectTableName == "ARInvoice" || fieldCode == "ContainerNumber" && objectTableName == "Container" || fieldCode == "QuoteNumber" && objectTableName == "Quote" || fieldCode == "Subject" && objectTableName == "Opportunity" || fieldCode == "EnglishName" && objectTableName == "Customer" || fieldCode == "TaskNumber" && objectTableName == "Task" || fieldCode == "Subject" && objectTableName == "Activity" || fieldCode == "TicketNumber" && objectTableName == "Ticket" || fieldCode == "ReleaseNumber" && objectTableName == "WarehouseRelease";
   };
 
   var IsShipmentMasterFieldClickable = function IsShipmentMasterFieldClickable(fieldCode, rowData) {
@@ -2348,8 +2348,70 @@ var PivotTable = React.forwardRef(function (props, comRef) {
   })));
 });
 
+var parseSelectedQueries = function parseSelectedQueries(widgetJson) {
+  if (!widgetJson) {
+    return [];
+  }
+
+  try {
+    var parsed = JSON.parse(widgetJson);
+
+    if (parsed && Array.isArray(parsed.SelectedQueries)) {
+      return parsed.SelectedQueries;
+    }
+  } catch (_unused) {}
+
+  return [];
+};
+
+var ViewsChart = function ViewsChart(props) {
+  var widget = props.customChartProps.widget;
+  var objectTableName = widget === null || widget === void 0 ? void 0 : widget.ViewsWidgetObjectTableName;
+  var entries = React.useMemo(function () {
+    return parseSelectedQueries(widget === null || widget === void 0 ? void 0 : widget.WidgetJson);
+  }, [widget]);
+
+  var handleClick = function handleClick(uniqueCode) {
+    if (!objectTableName || !uniqueCode) {
+      return;
+    }
+
+    var selection = {
+      Widget: widget,
+      ViewsNavigation: {
+        ObjectTableName: objectTableName,
+        QueryUniqueCode: uniqueCode
+      }
+    };
+    props.customChartProps.onSelectDataPoint(selection);
+  };
+
+  if (!entries.length) {
+    return React__default.createElement("div", {
+      className: "dl-views-widget-empty"
+    }, React__default.createElement("span", {
+      className: "dl-views-widget-empty-text"
+    }, "No views configured"));
+  }
+
+  return React__default.createElement("div", {
+    className: "dl-views-widget-list"
+  }, entries.map(function (row) {
+    return React__default.createElement("div", {
+      key: row.UniqueCode,
+      className: "dl-views-widget-row"
+    }, React__default.createElement("button", {
+      type: "button",
+      className: "dl-views-widget-link",
+      onClick: function onClick() {
+        return handleClick(row.UniqueCode);
+      }
+    }, row.DisplayLabel || row.UniqueCode));
+  }));
+};
+
 var CustomChart = function CustomChart(props) {
-  var _props$widget2, _props$widget3;
+  var _props$widget2, _props$widget3, _props$widget4;
 
   var project = function project() {
     var _props$widget;
@@ -2370,13 +2432,18 @@ var CustomChart = function CustomChart(props) {
           customChartProps: props
         });
 
+      case "views":
+        return React__default.createElement(ViewsChart, {
+          customChartProps: props
+        });
+
       default:
         return React__default.createElement("div", null, "Invalid Type");
     }
   };
 
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: "dl-custom-chart-container " + (props.widget && ((_props$widget2 = props.widget) === null || _props$widget2 === void 0 ? void 0 : _props$widget2.TypeCode) == 'table' ? 'dl-table-chart-container' : '') + " " + (props.widget && ((_props$widget3 = props.widget) === null || _props$widget3 === void 0 ? void 0 : _props$widget3.TypeCode) == 'pivot' ? 'dl-pivot-chart-container' : '')
+    className: "dl-custom-chart-container " + (props.widget && ((_props$widget2 = props.widget) === null || _props$widget2 === void 0 ? void 0 : _props$widget2.TypeCode) == 'table' ? 'dl-table-chart-container' : '') + " " + (props.widget && ((_props$widget3 = props.widget) === null || _props$widget3 === void 0 ? void 0 : _props$widget3.TypeCode) == 'pivot' ? 'dl-pivot-chart-container' : '') + " " + (props.widget && ((_props$widget4 = props.widget) === null || _props$widget4 === void 0 ? void 0 : _props$widget4.TypeCode) == 'views' ? 'dl-views-chart-container' : '')
   }, project()));
 };
 
@@ -2602,12 +2669,10 @@ function getMaxMeasureValue(seriesMeasures, widget) {
       var _seriesMeasure$Values;
 
       seriesMeasure === null || seriesMeasure === void 0 ? void 0 : (_seriesMeasure$Values = seriesMeasure.Values) === null || _seriesMeasure$Values === void 0 ? void 0 : _seriesMeasure$Values.forEach(function (valueItem) {
-        var _stackedTotalsByGroup;
-
         var numericValue = toNumericValue(valueItem === null || valueItem === void 0 ? void 0 : valueItem.Value);
         if (numericValue === null) return;
         var groupId = valueItem === null || valueItem === void 0 ? void 0 : valueItem.GroupById;
-        var currentTotal = (_stackedTotalsByGroup = stackedTotalsByGroupId.get(groupId)) != null ? _stackedTotalsByGroup : 0;
+        var currentTotal = stackedTotalsByGroupId.get(groupId) || 0;
         stackedTotalsByGroupId.set(groupId, currentTotal + numericValue);
       });
     });
@@ -4096,7 +4161,7 @@ var FusionChart$1 = React.forwardRef(function (props, comRef) {
 });
 
 var WidgetCard = React.forwardRef(function (props, comRef) {
-  var _widget$current13, _widget$current14, _widget$current15;
+  var _widget$current16, _widget$current17, _widget$current18, _widget$current19;
 
   var widget = React.useRef();
 
@@ -4118,15 +4183,39 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
       headerErrorMessages = _useState4[0],
       setHeaderErrorMessages = _useState4[1];
 
+  var _useState5 = React.useState(false),
+      showCopiedNotification = _useState5[0],
+      setShowCopiedNotification = _useState5[1];
+
+  var copyPopupRef = React.useRef(null);
+  var copiedNotificationTimer = React.useRef(null);
+
   var editWidget = function editWidget() {
     props.editBtnClicked(widget.current);
   };
 
-  var copyWidget = function copyWidget() {
-    if (props && props.copyBtnClicked) {
+  var duplicateWidget = function duplicateWidget() {
+    if (props && props.duplicateBtnClicked) {
       var _widget$current;
 
-      props.copyBtnClicked((_widget$current = widget.current) === null || _widget$current === void 0 ? void 0 : _widget$current.key);
+      props.duplicateBtnClicked((_widget$current = widget.current) === null || _widget$current === void 0 ? void 0 : _widget$current.key);
+    } else if (props && props.copyBtnClicked) {
+      var _widget$current2;
+
+      props.copyBtnClicked((_widget$current2 = widget.current) === null || _widget$current2 === void 0 ? void 0 : _widget$current2.key);
+    }
+  };
+
+  var copyWidgetToClipboard = function copyWidgetToClipboard() {
+    if (props && props.copyToClipboardBtnClicked && widget.current) {
+      var _widget$current3;
+
+      props.copyToClipboardBtnClicked((_widget$current3 = widget.current) === null || _widget$current3 === void 0 ? void 0 : _widget$current3.key, widget.current);
+      setShowCopiedNotification(true);
+      if (copiedNotificationTimer.current) clearTimeout(copiedNotificationTimer.current);
+      copiedNotificationTimer.current = setTimeout(function () {
+        setShowCopiedNotification(false);
+      }, 700);
     }
   };
 
@@ -4135,20 +4224,23 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
 
     widget.current = props.widget;
     (_props$dataBinding = props.dataBinding) === null || _props$dataBinding === void 0 ? void 0 : _props$dataBinding.onEditWidget.subscribe(function (e) {
-      var _widget$current2;
+      var _widget$current4;
 
-      if ((e === null || e === void 0 ? void 0 : e.key) != ((_widget$current2 = widget.current) === null || _widget$current2 === void 0 ? void 0 : _widget$current2.key)) return;
+      if ((e === null || e === void 0 ? void 0 : e.key) != ((_widget$current4 = widget.current) === null || _widget$current4 === void 0 ? void 0 : _widget$current4.key)) return;
       setIsLoading(true);
       widget.current = _extends({}, e);
       setIsLoading(false);
     });
     (_props$dataBinding2 = props.dataBinding) === null || _props$dataBinding2 === void 0 ? void 0 : _props$dataBinding2.widgetUpdated.subscribe(function (updatedWidget) {
-      var _widget$current3;
+      var _widget$current5;
 
-      if ((updatedWidget === null || updatedWidget === void 0 ? void 0 : updatedWidget.key) != ((_widget$current3 = widget.current) === null || _widget$current3 === void 0 ? void 0 : _widget$current3.key)) return;
+      if ((updatedWidget === null || updatedWidget === void 0 ? void 0 : updatedWidget.key) != ((_widget$current5 = widget.current) === null || _widget$current5 === void 0 ? void 0 : _widget$current5.key)) return;
       widget.current = _extends({}, updatedWidget);
       setTriggerId(uuid.v4());
     });
+    return function () {
+      if (copiedNotificationTimer.current) clearTimeout(copiedNotificationTimer.current);
+    };
   }, []);
   React.useImperativeHandle(comRef, function () {
     return {
@@ -4173,10 +4265,10 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
   };
 
   var GetChartComponent = function GetChartComponent() {
-    var _widget$current4, _widget$current5, _widget$current6, _widget$current7, _widget$current8;
+    var _widget$current6, _widget$current7, _widget$current8, _widget$current9, _widget$current10, _widget$current11;
 
-    if (isLoading || !((_widget$current4 = widget.current) !== null && _widget$current4 !== void 0 && _widget$current4.TypeCode)) return "";
-    if (((_widget$current5 = widget.current) === null || _widget$current5 === void 0 ? void 0 : _widget$current5.TypeCode) == "kpi") return React__default.createElement(CustomChart, {
+    if (isLoading || !((_widget$current6 = widget.current) !== null && _widget$current6 !== void 0 && _widget$current6.TypeCode)) return "";
+    if (((_widget$current7 = widget.current) === null || _widget$current7 === void 0 ? void 0 : _widget$current7.TypeCode) == "kpi") return React__default.createElement(CustomChart, {
       isInEditMode: props.isInEditMode,
       isPreviewModeActive: props.isPreviewModeActive,
       dataBinding: props.dataBinding,
@@ -4187,7 +4279,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
         return showErrorMsg(errorMsg);
       }
     });
-    if (((_widget$current6 = widget.current) === null || _widget$current6 === void 0 ? void 0 : _widget$current6.TypeCode) == "table" || ((_widget$current7 = widget.current) === null || _widget$current7 === void 0 ? void 0 : _widget$current7.TypeCode) == "pivot") return React__default.createElement(CustomChart, {
+    if (((_widget$current8 = widget.current) === null || _widget$current8 === void 0 ? void 0 : _widget$current8.TypeCode) == "table" || ((_widget$current9 = widget.current) === null || _widget$current9 === void 0 ? void 0 : _widget$current9.TypeCode) == "pivot" || ((_widget$current10 = widget.current) === null || _widget$current10 === void 0 ? void 0 : _widget$current10.TypeCode) == "views") return React__default.createElement(CustomChart, {
       isInEditMode: props.isInEditMode,
       isPreviewModeActive: props.isPreviewModeActive,
       dataBinding: props.dataBinding,
@@ -4195,7 +4287,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
       widgetRef: props.widgetRef,
       onSelectDataPoint: props.onSelectDataPoint
     });
-    if (((_widget$current8 = widget.current) === null || _widget$current8 === void 0 ? void 0 : _widget$current8.TypeCode) == "gauge") return React__default.createElement(FusionChart$1, {
+    if (((_widget$current11 = widget.current) === null || _widget$current11 === void 0 ? void 0 : _widget$current11.TypeCode) == "gauge") return React__default.createElement(FusionChart$1, {
       ref: fusionChartRef,
       dataBinding: props.dataBinding,
       widget: widget.current,
@@ -4254,15 +4346,15 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
   };
 
   var isThereTitle = function isThereTitle() {
-    var _widget$current9, _widget$current10;
+    var _widget$current12, _widget$current13;
 
-    return ((_widget$current9 = widget.current) === null || _widget$current9 === void 0 ? void 0 : _widget$current9.Title) && ((_widget$current10 = widget.current) === null || _widget$current10 === void 0 ? void 0 : _widget$current10.Title.length) > 0;
+    return ((_widget$current12 = widget.current) === null || _widget$current12 === void 0 ? void 0 : _widget$current12.Title) && ((_widget$current13 = widget.current) === null || _widget$current13 === void 0 ? void 0 : _widget$current13.Title.length) > 0;
   };
 
   var isThereSubtitle = function isThereSubtitle() {
-    var _widget$current11, _widget$current12;
+    var _widget$current14, _widget$current15;
 
-    return ((_widget$current11 = widget.current) === null || _widget$current11 === void 0 ? void 0 : _widget$current11.Subtitle) && ((_widget$current12 = widget.current) === null || _widget$current12 === void 0 ? void 0 : _widget$current12.Subtitle.length) > 0;
+    return ((_widget$current14 = widget.current) === null || _widget$current14 === void 0 ? void 0 : _widget$current14.Subtitle) && ((_widget$current15 = widget.current) === null || _widget$current15 === void 0 ? void 0 : _widget$current15.Subtitle.length) > 0;
   };
 
   var tableHintMessage = function tableHintMessage() {
@@ -4311,7 +4403,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
         color: getCSSPropertyValue(widget.current, 'TitleFontColor', ''),
         textAlign: getCSSPropertyValue(widget === null || widget === void 0 ? void 0 : widget.current, 'TitleAlignment', '', undefined)
       }
-    }, (_widget$current13 = widget.current) === null || _widget$current13 === void 0 ? void 0 : _widget$current13.Title),
+    }, (_widget$current16 = widget.current) === null || _widget$current16 === void 0 ? void 0 : _widget$current16.Title),
     position: ['top center'],
     arrowStyle: {
       color: '#19395C'
@@ -4320,7 +4412,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     on: ['hover', 'focus']
   }, React__default.createElement("span", {
     className: "widget-title-tooltip-text"
-  }, (_widget$current14 = widget.current) === null || _widget$current14 === void 0 ? void 0 : _widget$current14.Title))), isTableOrPivotWidget() && isThereTitle() && isThereSubtitle() && React__default.createElement("div", {
+  }, (_widget$current17 = widget.current) === null || _widget$current17 === void 0 ? void 0 : _widget$current17.Title))), isTableOrPivotWidget() && isThereTitle() && isThereSubtitle() && React__default.createElement("div", {
     className: "titles-vertical-seeparator"
   }), React__default.createElement("div", {
     className: isThereSubtitle() ? "subtitle" : "subtitle margin-top-4",
@@ -4330,25 +4422,57 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
       color: getCSSPropertyValue(widget.current, 'SubtitleFontColor', ''),
       minWidth: isThereSubtitle() && isTableOrPivotWidget() ? '5%' : undefined
     }
-  }, (_widget$current15 = widget.current) === null || _widget$current15 === void 0 ? void 0 : _widget$current15.Subtitle)), !isTitleAligmentRight() && isTableOrPivotWidget() && tableHintMessage(), props.isInEditMode && React__default.createElement("div", {
+  }, (_widget$current18 = widget.current) === null || _widget$current18 === void 0 ? void 0 : _widget$current18.Subtitle)), !isTitleAligmentRight() && isTableOrPivotWidget() && tableHintMessage(), props.isInEditMode && React__default.createElement("div", {
     className: isThereTitle() ? "widget-options-container" : "widget-options-container margin-top-6"
   }, React__default.createElement("div", null, " ", React__default.createElement(SvgEditIcon, {
     className: "widget-card-edit-icon",
     onClick: function onClick() {
       return editWidget();
     }
-  }), " "), React__default.createElement("div", null, " ", React__default.createElement(SvgCopyIcon, {
-    className: "widget-card-copy-icon",
+  }), " "), React__default.createElement(Popup, {
+    ref: copyPopupRef,
+    className: "widget-copy-dropdown-container",
+    trigger: React__default.createElement("div", null, React__default.createElement(SvgCopyIcon, {
+      className: "widget-card-copy-icon"
+    })),
+    position: ['bottom left', 'bottom center'],
+    closeOnDocumentClick: true,
+    closeOnEscape: true,
+    arrow: false,
+    offsetY: 2
+  }, React__default.createElement("div", {
+    className: "widget-copy-dropdown-menu"
+  }, React__default.createElement("div", {
+    className: "widget-copy-dropdown-item",
     onClick: function onClick() {
-      return copyWidget();
+      var _copyPopupRef$current;
+
+      (_copyPopupRef$current = copyPopupRef.current) === null || _copyPopupRef$current === void 0 ? void 0 : _copyPopupRef$current.close();
+      duplicateWidget();
+    }
+  }, "Duplicate"), React__default.createElement("div", {
+    className: "widget-copy-dropdown-item",
+    onClick: function onClick() {
+      var _copyPopupRef$current2;
+
+      (_copyPopupRef$current2 = copyPopupRef.current) === null || _copyPopupRef$current2 === void 0 ? void 0 : _copyPopupRef$current2.close();
+      copyWidgetToClipboard();
     }
-  }), " "), React__default.createElement("div", null, " ", React__default.createElement(SvgDeleteIcon, {
+  }, "Copy"))), React__default.createElement("div", null, " ", React__default.createElement(SvgDeleteIcon, {
     onClick: function onClick() {
       var _props$widget;
 
       return props.deleteBtnClicked((_props$widget = props.widget) === null || _props$widget === void 0 ? void 0 : _props$widget.key);
     }
-  }), " ")), !props.isInEditMode && showHeaderErrorMessages && React__default.createElement("div", {
+  }), " ")), showCopiedNotification && React__default.createElement("div", {
+    className: "widget-copied-notification"
+  }, React__default.createElement("span", {
+    className: "widget-copied-notification-check"
+  }, "\u2713"), React__default.createElement("span", {
+    className: "widget-copied-notification-title"
+  }, (_widget$current19 = widget.current) === null || _widget$current19 === void 0 ? void 0 : _widget$current19.Title), React__default.createElement("span", {
+    className: "widget-copied-notification-text"
+  }, "widget copied")), !props.isInEditMode && showHeaderErrorMessages && React__default.createElement("div", {
     className: "header-message-error"
   }, React__default.createElement(Popup, {
     className: "header-message-error-tooltip-container",
@@ -4524,6 +4648,12 @@ var DashboardDesigner = function DashboardDesigner(props) {
     }
   }
 
+  function copyWidgetToClipboard(key, widget) {
+    if (props && props.onCopyWidgetToClipboard) {
+      props.onCopyWidgetToClipboard(key, widget);
+    }
+  }
+
   function UpdatePlaceholderDimensions(layouts) {
     if (!layouts) return;
     var max = minimumPlaceholderRowsCount;
@@ -4596,7 +4726,8 @@ var DashboardDesigner = function DashboardDesigner(props) {
       editBtnClicked: editWidget,
       deleteBtnClicked: confirmDeleteWidget,
       onSelectDataPoint: props.onSelectDataPoint,
-      copyBtnClicked: copyWidget,
+      duplicateBtnClicked: copyWidget,
+      copyToClipboardBtnClicked: copyWidgetToClipboard,
       ref: function ref(el) {
         var _widget$Layout3;
 
@@ -4678,6 +4809,12 @@ var Dashboard = function Dashboard(props) {
     }
   };
 
+  var copyWidgetToClipboard = function copyWidgetToClipboard(key, widget) {
+    if (props && props.onCopyWidgetToClipboard) {
+      props.onCopyWidgetToClipboard(key, widget);
+    }
+  };
+
   var updateWidgets = function updateWidgets(layouts) {
     var layoutsDic = {};
     Object.keys(layouts).forEach(function (sizeType) {
@@ -4745,6 +4882,7 @@ var Dashboard = function Dashboard(props) {
       return props.openDeleteWidgetConfirmWindow(deleteProps);
     },
     onCopyWidget: copyWidget,
+    onCopyWidgetToClipboard: copyWidgetToClipboard,
     openEditWidget: function openEditWidget(widget) {
       return props.openEditWidget(widget);
     }