logitude-dashboard-library 1.4.51 → 1.4.53

package/dist/Utils/General.d.ts

@@ -0,0 +1,2 @@
+declare const isNullOrUndefined: (val: any) => boolean;
+export { isNullOrUndefined };

package/dist/assets/images/delete-icon.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.99983 3.51152H11.9998V4.7757H10.7998V12.9929C10.7998 13.1605 10.7366 13.3213 10.6241 13.4398C10.5116 13.5584 10.359 13.625 10.1998 13.625H1.79983C1.6407 13.625 1.48809 13.5584 1.37557 13.4398C1.26305 13.3213 1.19983 13.1605 1.19983 12.9929V4.7757H-0.000167847V3.51152H2.99983V1.61525C2.99983 1.4476 3.06305 1.28683 3.17557 1.16829C3.28809 1.04975 3.4407 0.983154 3.59983 0.983154H8.39983C8.55896 0.983154 8.71158 1.04975 8.8241 1.16829C8.93662 1.28683 8.99983 1.4476 8.99983 1.61525V3.51152ZM9.59983 4.7757H2.39983V12.3608H9.59983V4.7757ZM4.19983 6.67197H5.39983V10.4645H4.19983V6.67197ZM6.59983 6.67197H7.79983V10.4645H6.59983V6.67197ZM4.19983 2.24734V3.51152H7.79983V2.24734H4.19983Z" fill="#5FAFDA"/>
+</svg>

package/dist/assets/images/edit-icon.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.48527 5.38322L7.54247 4.4404L1.33333 10.6496V11.5924H2.27614L8.48527 5.38322ZM9.42807 4.4404L10.3709 3.4976L9.42807 2.55479L8.48527 3.4976L9.42807 4.4404ZM2.82843 12.9257H0V10.0973L8.95667 1.14058C9.21707 0.880224 9.63913 0.880224 9.89947 1.14058L11.7851 3.02619C12.0455 3.28654 12.0455 3.70865 11.7851 3.969L2.82843 12.9257Z" fill="#5FAFDA"/>
+</svg>

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

@@ -271,22 +271,78 @@ $dark-grey: #717585;
         }
     }
 
-    h1 {
-        text-transform: capitalize;
-        font-family: 'Manrope', sans-serif;
-        font-style: normal;
-        color: #292D30;
-        margin-top: 0;
-        margin-bottom: 0;
-        padding: 12px;
-        font-size: 12px;
-        font-weight: 600;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+    .widget-titles-container {
+        display: flex;
+        flex-wrap: wrap;
+        width: calc(100% - 4rem);
+        padding: 0px 12px 12px 12px;
+
+        .title-container {
+            display: flex;
+            align-items: center;
+            justify-content: left;
+            flex: 1;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            min-width: 1px;
+    
+            .title {
+                text-transform: capitalize;
+                font-family: 'Manrope', sans-serif;
+                font-style: normal;
+                color: #292D30;
+                padding-top: 12px;
+                margin-top: 0;
+                margin-bottom: 0;
+                font-size: 12px;
+                font-weight: 600;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: auto;
+            }
+        }
+    
+        .subtitle {
+            font-family: 'Manrope', sans-serif;
+            font-style: normal;
+            color: #292D30;
+            margin-top: 4px;
+            font-size: 12px;
+            font-weight: 600;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            width: 100%;
+        }
+    }
+
+    .widget-options-container {
+        display: flex;
+        align-items: center;
+        width: 60px;
+        column-gap: 6px;
+
+        svg {
+            width: 20px;
+            height: 20px;
+            transform: scale(1.2);
+
+            &:hover {
+                cursor: pointer;
+            }
+        }
     }
 }
 
+.margin-top-6 {
+    margin-top: 6px;
+}
+
+.margin-top-4 {
+    margin-top: 4px;
+}
 
 #container {
     width: 100%;
@@ -313,7 +369,6 @@ $dark-grey: #717585;
     align-items: flex-start;
 }
 
-
 .filter-label {
     font-size: 12px;
     color: $dark-grey;

package/dist/delete-icon~HsiaSdfs.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.99983 3.51152H11.9998V4.7757H10.7998V12.9929C10.7998 13.1605 10.7366 13.3213 10.6241 13.4398C10.5116 13.5584 10.359 13.625 10.1998 13.625H1.79983C1.6407 13.625 1.48809 13.5584 1.37557 13.4398C1.26305 13.3213 1.19983 13.1605 1.19983 12.9929V4.7757H-0.000167847V3.51152H2.99983V1.61525C2.99983 1.4476 3.06305 1.28683 3.17557 1.16829C3.28809 1.04975 3.4407 0.983154 3.59983 0.983154H8.39983C8.55896 0.983154 8.71158 1.04975 8.8241 1.16829C8.93662 1.28683 8.99983 1.4476 8.99983 1.61525V3.51152ZM9.59983 4.7757H2.39983V12.3608H9.59983V4.7757ZM4.19983 6.67197H5.39983V10.4645H4.19983V6.67197ZM6.59983 6.67197H7.79983V10.4645H6.59983V6.67197ZM4.19983 2.24734V3.51152H7.79983V2.24734H4.19983Z" fill="#5FAFDA"/>
+</svg>

package/dist/delete-icon~eciVlkBl.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.99983 3.51152H11.9998V4.7757H10.7998V12.9929C10.7998 13.1605 10.7366 13.3213 10.6241 13.4398C10.5116 13.5584 10.359 13.625 10.1998 13.625H1.79983C1.6407 13.625 1.48809 13.5584 1.37557 13.4398C1.26305 13.3213 1.19983 13.1605 1.19983 12.9929V4.7757H-0.000167847V3.51152H2.99983V1.61525C2.99983 1.4476 3.06305 1.28683 3.17557 1.16829C3.28809 1.04975 3.4407 0.983154 3.59983 0.983154H8.39983C8.55896 0.983154 8.71158 1.04975 8.8241 1.16829C8.93662 1.28683 8.99983 1.4476 8.99983 1.61525V3.51152ZM9.59983 4.7757H2.39983V12.3608H9.59983V4.7757ZM4.19983 6.67197H5.39983V10.4645H4.19983V6.67197ZM6.59983 6.67197H7.79983V10.4645H6.59983V6.67197ZM4.19983 2.24734V3.51152H7.79983V2.24734H4.19983Z" fill="#5FAFDA"/>
+</svg>

package/dist/delete-icon~fYbwNrdz.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.99983 3.51152H11.9998V4.7757H10.7998V12.9929C10.7998 13.1605 10.7366 13.3213 10.6241 13.4398C10.5116 13.5584 10.359 13.625 10.1998 13.625H1.79983C1.6407 13.625 1.48809 13.5584 1.37557 13.4398C1.26305 13.3213 1.19983 13.1605 1.19983 12.9929V4.7757H-0.000167847V3.51152H2.99983V1.61525C2.99983 1.4476 3.06305 1.28683 3.17557 1.16829C3.28809 1.04975 3.4407 0.983154 3.59983 0.983154H8.39983C8.55896 0.983154 8.71158 1.04975 8.8241 1.16829C8.93662 1.28683 8.99983 1.4476 8.99983 1.61525V3.51152ZM9.59983 4.7757H2.39983V12.3608H9.59983V4.7757ZM4.19983 6.67197H5.39983V10.4645H4.19983V6.67197ZM6.59983 6.67197H7.79983V10.4645H6.59983V6.67197ZM4.19983 2.24734V3.51152H7.79983V2.24734H4.19983Z" fill="#5FAFDA"/>
+</svg>

package/dist/edit-icon~binDxVAt.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.48527 5.38322L7.54247 4.4404L1.33333 10.6496V11.5924H2.27614L8.48527 5.38322ZM9.42807 4.4404L10.3709 3.4976L9.42807 2.55479L8.48527 3.4976L9.42807 4.4404ZM2.82843 12.9257H0V10.0973L8.95667 1.14058C9.21707 0.880224 9.63913 0.880224 9.89947 1.14058L11.7851 3.02619C12.0455 3.28654 12.0455 3.70865 11.7851 3.969L2.82843 12.9257Z" fill="#5FAFDA"/>
+</svg>

package/dist/edit-icon~roheEGno.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.48527 5.38322L7.54247 4.4404L1.33333 10.6496V11.5924H2.27614L8.48527 5.38322ZM9.42807 4.4404L10.3709 3.4976L9.42807 2.55479L8.48527 3.4976L9.42807 4.4404ZM2.82843 12.9257H0V10.0973L8.95667 1.14058C9.21707 0.880224 9.63913 0.880224 9.89947 1.14058L11.7851 3.02619C12.0455 3.28654 12.0455 3.70865 11.7851 3.969L2.82843 12.9257Z" fill="#5FAFDA"/>
+</svg>

package/dist/edit-icon~xptiVoWp.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.48527 5.38322L7.54247 4.4404L1.33333 10.6496V11.5924H2.27614L8.48527 5.38322ZM9.42807 4.4404L10.3709 3.4976L9.42807 2.55479L8.48527 3.4976L9.42807 4.4404ZM2.82843 12.9257H0V10.0973L8.95667 1.14058C9.21707 0.880224 9.63913 0.880224 9.89947 1.14058L11.7851 3.02619C12.0455 3.28654 12.0455 3.70865 11.7851 3.969L2.82843 12.9257Z" fill="#5FAFDA"/>
+</svg>

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

@@ -3,6 +3,13 @@ import React from "react";
 import { ReactWidgetPM } from "../../types/widget";
 import { DataPointSelection } from "../../types/SeriesMeasure";
 import { DashboardDataBinding } from "../../types/DashboardDataBinding";
+export declare type DeleteWidgetProps = {
+    id: string;
+    layouts: any;
+    widgets: {
+        lg: ReactWidgetPM[];
+    };
+};
 declare type DashboardDesignerProps = {
     editMode: boolean;
     Widgetlayouts: {
@@ -10,6 +17,7 @@ declare type DashboardDesignerProps = {
     };
     openEditWidget: (widget: ReactWidgetPM) => void;
     onLayoutChange: (layouts: Layouts) => void;
+    onWidgetDelete: (deleteProps: DeleteWidgetProps) => void;
     dataBinding: DashboardDataBinding;
     onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
 };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { DeleteWidgetProps } from './features/Dashboard/DashboardDesigner';
 import "./styles.module.css";
 import { ReactWidgetPM } from './types/widget';
 import { DashboardDataBinding } from './types/DashboardDataBinding';
@@ -14,6 +15,7 @@ declare type DashboardProps = {
         lg: ReactWidgetPM[];
     }) => void;
     openEditWidget: (Widget: ReactWidgetPM) => void;
+    openDeleteWidgetConfirmWindow: (deleteProps: DeleteWidgetProps) => void;
     onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
 };
 declare const Dashboard: (props: DashboardProps) => React.JSX.Element;

package/dist/index.js

@@ -3,8 +3,6 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var React = require('react');
 var React__default = _interopDefault(React);
 var reactGridLayout = require('react-grid-layout');
-var button = require('primereact/button');
-var overlaypanel = require('primereact/overlaypanel');
 var progressspinner = require('primereact/progressspinner');
 var axios = _interopDefault(require('axios'));
 var tooltip = require('primereact/tooltip');
@@ -661,11 +659,11 @@ function getBarObject(seriesMeasures, widget) {
   chartInfo.scrollPadding = "8";
   chartInfo.flatScrollBars = "1";
   chartInfo.showPercentValues = "1";
-  chartInfo.showLegend = (seriesMeasures === null || seriesMeasures === void 0 ? void 0 : seriesMeasures.length) > 1 ? "1" : "0";
+  chartInfo.showLegend = widget.ShowLegend ? '1' : '0';
   setLineDash(chartInfo);
   chartInfo.chartTopMargin = "10";
   chartInfo.chartBottomMargin = "10";
-  chartInfo.legendPosition = widget.LegendPosition ? widget.LegendPosition : "bottom";
+  chartInfo.legendPosition = getWidgetLegendPosition(widget);
   chart.dataSource = getCategoriesBasedDataSource(chartInfo, seriesMeasures, widget);
   return chart;
 }
@@ -676,12 +674,11 @@ function getStackedBarObject(seriesMeasures, widget) {
   chartInfo.scrollPadding = "8";
   chartInfo.flatScrollBars = "1";
   chartInfo.showPercentValues = "1";
-  chartInfo.showLegend = (seriesMeasures === null || seriesMeasures === void 0 ? void 0 : seriesMeasures.length) > 1 ? "1" : "0";
+  chartInfo.showLegend = widget.ShowLegend ? '1' : '0';
   setLineDash(chartInfo);
   chartInfo.chartTopMargin = "10";
   chartInfo.chartBottomMargin = "10";
-  chartInfo.showLegend = "1";
-  chartInfo.legendPosition = widget.LegendPosition ? widget.LegendPosition : "bottom";
+  chartInfo.legendPosition = getWidgetLegendPosition(widget);
   chart.dataSource = getStackedDataSource(chartInfo, seriesMeasures, widget);
   return chart;
 }
@@ -692,12 +689,11 @@ function getClusteredColumnObject(seriesMeasures, widget) {
   chartInfo.scrollPadding = "8";
   chartInfo.flatScrollBars = "1";
   chartInfo.showPercentValues = "1";
-  chartInfo.showLegend = (seriesMeasures === null || seriesMeasures === void 0 ? void 0 : seriesMeasures.length) > 1 ? "1" : "0";
+  chartInfo.showLegend = widget.ShowLegend ? '1' : '0';
   setLineDash(chartInfo);
   chartInfo.chartTopMargin = "10";
   chartInfo.chartBottomMargin = "10";
-  chartInfo.showLegend = "1";
-  chartInfo.legendPosition = widget.LegendPosition ? widget.LegendPosition : "bottom";
+  chartInfo.legendPosition = getWidgetLegendPosition(widget);
   chart.dataSource = getStackedDataSource(chartInfo, seriesMeasures, widget);
   return chart;
 }
@@ -708,12 +704,11 @@ function getClusteredLineObject(seriesMeasures, widget) {
   chartInfo.scrollPadding = "8";
   chartInfo.flatScrollBars = "1";
   chartInfo.showPercentValues = "1";
-  chartInfo.showLegend = (seriesMeasures === null || seriesMeasures === void 0 ? void 0 : seriesMeasures.length) > 1 ? "1" : "0";
+  chartInfo.showLegend = widget.ShowLegend ? '1' : '0';
   setLineDash(chartInfo);
   chartInfo.chartTopMargin = "10";
   chartInfo.chartBottomMargin = "10";
-  chartInfo.showLegend = "1";
-  chartInfo.legendPosition = widget.LegendPosition ? widget.LegendPosition : "bottom";
+  chartInfo.legendPosition = getWidgetLegendPosition(widget);
   chart.dataSource = getStackedDataSource(chartInfo, seriesMeasures, widget);
   return chart;
 }
@@ -724,7 +719,7 @@ function getLineObject(seriesMeasures, widget) {
   chartInfo.scrollPadding = "8";
   chartInfo.flatScrollBars = "1";
   chartInfo.showPercentValues = "1";
-  chartInfo.showLegend = (seriesMeasures === null || seriesMeasures === void 0 ? void 0 : seriesMeasures.length) > 1 ? "1" : "0";
+  chartInfo.showLegend = widget.ShowLegend ? '1' : '0';
   setLineDash(chartInfo);
   chartInfo.chartTopMargin = "20";
   chartInfo.chartBottomMargin = "10";
@@ -733,7 +728,7 @@ function getLineObject(seriesMeasures, widget) {
   chartInfo.anchorradius = "5";
   chartInfo.canvasBottomPadding = "10";
   chartInfo.canvasTopPadding = "10";
-  chartInfo.legendPosition = widget.LegendPosition ? widget.LegendPosition : "bottom";
+  chartInfo.legendPosition = getWidgetLegendPosition(widget);
   chart.dataSource = getCategoriesBasedDataSource(chartInfo, seriesMeasures, widget);
   return chart;
 }
@@ -746,7 +741,7 @@ function getDonutObject(seriesMeasures, widget) {
   chartInfo.manageLabelOverflow = "1";
   chartInfo.useEllipsesWhenOverflow = "1";
   chartInfo.enableSmartLabels = "1";
-  chartInfo.legendPosition = widget.LegendPosition ? widget.LegendPosition : "right";
+  chartInfo.legendPosition = getWidgetLegendPosition(widget);
   setPieDonutLegends(chartInfo, widget);
   chart.dataSource = getSimpleDataSource(chartInfo, seriesMeasures, widget);
   return chart;
@@ -762,7 +757,7 @@ function getPieObject(seriesMeasures, widget) {
   chartInfo.enableSmartLabels = "1";
   setPieDonutLegends(chartInfo, widget);
   chart.dataSource = getSimpleDataSource(chartInfo, seriesMeasures, widget);
-  chartInfo.legendPosition = widget.LegendPosition ? widget.LegendPosition : "right";
+  chartInfo.legendPosition = getWidgetLegendPosition(widget);
   return chart;
 }
 function getColumnObject(seriesMeasures, widget) {
@@ -772,7 +767,7 @@ function getColumnObject(seriesMeasures, widget) {
   chartInfo.scrollPadding = "8";
   chartInfo.flatScrollBars = "1";
   chartInfo.showPercentValues = "1";
-  chartInfo.showLegend = (seriesMeasures === null || seriesMeasures === void 0 ? void 0 : seriesMeasures.length) > 1 ? "1" : "0";
+  chartInfo.showLegend = widget.ShowLegend ? '1' : '0';
   setLineDash(chartInfo);
   chartInfo.chartTopMargin = "20";
   chartInfo.chartBottomMargin = "10";
@@ -781,7 +776,7 @@ function getColumnObject(seriesMeasures, widget) {
   chartInfo.canvasBottomPadding = "10";
   setDualyAxis(chartInfo, widget, seriesMeasures);
   chart.dataSource = getCategoriesBasedDataSource(chartInfo, seriesMeasures, widget);
-  chartInfo.legendPosition = widget.LegendPosition ? widget.LegendPosition : "bottom";
+  chartInfo.legendPosition = getWidgetLegendPosition(widget);
   return chart;
 }
 function setLineDash(chartInfo) {
@@ -800,6 +795,18 @@ function getDefaultChartobject() {
   chart.dataFormat = "json";
   return chart;
 }
+var getXaxisTitle = function getXaxisTitle(widget) {
+  if (widget.TypeCode == 'bar') {
+    return widget.ShowYAxisTitle ? widget.YAxisTitle || "" : "";
+  }
+  return widget.XAxisTitle || "";
+};
+var getYaxisTitle = function getYaxisTitle(widget) {
+  if (widget.TypeCode == 'bar') {
+    return widget.ShowXAxisTitle ? widget.XAxisTitle || "" : "";
+  }
+  return widget.YAxisTitle || "";
+};
 function getDefaultChartInfo(widget) {
   var chart = {};
   chart.theme = "fusion";
@@ -825,8 +832,8 @@ function getDefaultChartInfo(widget) {
   chart.yAxisNameFont = defautFont;
   chart.yAxisNameFontSize = defautFontSize;
   chart.yAxisNameFontColor = defautColor;
-  chart.xAxisName = widget.ShowXAxisTitle && widget.XAxisTitle ? widget.XAxisTitle : "";
-  chart.yAxisName = widget.ShowYAxisTitle && widget.YAxisTitle ? widget.YAxisTitle : "";
+  chart.xAxisName = widget.ShowXAxisTitle && widget.XAxisTitle ? getXaxisTitle(widget) : "";
+  chart.yAxisName = widget.ShowYAxisTitle && widget.YAxisTitle ? getYaxisTitle(widget) : "";
   chart.labelDisplay = widget.XAxisLabelsDisplay ? widget.XAxisLabelsDisplay : "Auto";
   chart.slantLabel = "1";
   chart.labelFontSize = widget.XAxisLabelsFontSize ? widget.XAxisLabelsFontSize + "" : "10";
@@ -846,16 +853,17 @@ function getDefaultChartInfo(widget) {
 function setPieDonutLegends(chart, widget) {
   chart.showValues = "0";
   chart.showLabels = widget.LabelsPosition == 'InLegend' ? '0' : '1';
-  chart.showLegend = widget.LabelsPosition == 'InLegend' ? '1' : '0';
+  chart.showLegend = widget.ShowLegend ? '1' : '0';
   setOnChartLegend(chart, widget);
   setChartInLegend(chart, widget);
 }
-function getDefaultChartLegendPosition(widget) {
+function getWidgetLegendPosition(widget) {
+  if (widget.LegendPosition) return widget.LegendPosition;
   return widget.TypeCode == 'pie' || widget.TypeCode == 'donut' ? "right" : "bottom";
 }
 function setOnChartLegend(chart, widget) {
   if (widget.LabelsPosition != 'InLegend') return;
-  chart.legendPosition = widget.LegendPosition ? widget.LegendPosition : getDefaultChartLegendPosition(widget);
+  chart.legendPosition = getWidgetLegendPosition(widget);
   chart.legendScrollBgColor = "#ffffff";
   chart.legendIconScale = 0.75;
   chart.scrollShowButtons = "0";
@@ -1088,19 +1096,75 @@ var FusionChart = React.forwardRef(function (props, comRef) {
   }, error)));
 });
 
+var isNullOrUndefined = function isNullOrUndefined(val) {
+  return val == null || val == undefined;
+};
+
+var _path$1;
+function _extends$2() {
+  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$2.apply(this, arguments);
+}
+function SvgDeleteIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    d: "M9 3.512h3v1.264h-1.2v8.217a.65.65 0 01-.176.447.585.585 0 01-.424.185H1.8a.585.585 0 01-.424-.185.65.65 0 01-.176-.447V4.776H0V3.512h3V1.615a.65.65 0 01.176-.447A.585.585 0 013.6.983h4.8c.159 0 .312.067.424.185A.65.65 0 019 1.615v1.897zm.6 1.264H2.4v7.585h7.2V4.776zM4.2 6.672h1.2v3.792H4.2V6.672zm2.4 0h1.2v3.792H6.6V6.672zM4.2 2.247v1.265h3.6V2.247H4.2z",
+    fill: "#5FAFDA"
+  })));
+}
+
+var _path$2;
+function _extends$3() {
+  _extends$3 = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$3.apply(this, arguments);
+}
+function SvgEditIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+    d: "M8.485 5.383l-.943-.943-6.209 6.21v.942h.943l6.21-6.209zm.943-.943l.943-.942-.943-.943-.943.943.943.942zm-6.6 8.486H0v-2.829l8.957-8.956c.26-.26.682-.26.942 0l1.886 1.885c.26.26.26.683 0 .943l-8.957 8.957z",
+    fill: "#5FAFDA"
+  })));
+}
+
 var WidgetCard = React.forwardRef(function (props, comRef) {
-  var _widget$current2, _widget$current3;
-  var moreBtnToggle = React.useRef(null);
+  var _widget$current2, _widget$current3, _widget$current4, _widget$current5, _widget$current6, _widget$current7, _widget$current8;
   var widget = React.useRef();
   var _useState = React.useState(false),
     isLoading = _useState[0],
     setIsLoading = _useState[1];
   var _useState2 = React.useState(false),
-    showTooltip = _useState2[1];
+    isWidgetHovered = _useState2[0],
+    setIsWidgetHovered = _useState2[1];
+  var _useState3 = React.useState(false),
+    showTooltip = _useState3[1];
   var fusionChartRef = React.useRef(null);
   var editWidget = function editWidget() {
-    var _moreBtnToggle$curren;
-    (_moreBtnToggle$curren = moreBtnToggle.current) === null || _moreBtnToggle$curren === void 0 ? void 0 : _moreBtnToggle$curren.hide();
     props.editBtnClicked(widget.current);
   };
   React.useEffect(function () {
@@ -1122,23 +1186,45 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
       }
     };
   });
+  var getCSSPropertyValue = function getCSSPropertyValue(widgetData, propName, propUnit, propDefaultVal) {
+    if (propUnit === void 0) {
+      propUnit = "";
+    }
+    if (propDefaultVal === void 0) {
+      propDefaultVal = "";
+    }
+    return widgetData && propName && !isNullOrUndefined(widgetData[propName]) ? widgetData[propName] + propUnit : propDefaultVal || "";
+  };
   return React__default.createElement("div", {
     className: "dl-panel",
     key: props.el.i,
     style: {
       cursor: props.isInEditMode ? 'move' : 'default'
+    },
+    onMouseEnter: function onMouseEnter() {
+      return setIsWidgetHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      setIsWidgetHovered(false);
     }
   }, React__default.createElement("header", null, React__default.createElement("div", {
+    className: "widget-titles-container"
+  }, React__default.createElement("div", {
+    className: "title-container",
     style: {
-      display: 'flex',
-      width: 'calc(100% - 3rem)'
+      justifyContent: getCSSPropertyValue(widget === null || widget === void 0 ? void 0 : widget.current, 'TitleAlignment', '', undefined)
     }
   }, React__default.createElement(tooltip.Tooltip, {
-    target: ".h-tool-tip"
-  }), React__default.createElement("h1", {
+    target: ".title"
+  }), React__default.createElement("div", {
+    className: "title",
+    style: {
+      fontSize: getCSSPropertyValue(widget.current, 'TitleFontSize', 'px'),
+      color: getCSSPropertyValue(widget.current, 'TitleFontColor', ''),
+      textAlign: getCSSPropertyValue(widget === null || widget === void 0 ? void 0 : widget.current, 'TitleAlignment', '', undefined)
+    },
     "data-pr-tooltip": (_widget$current2 = widget.current) === null || _widget$current2 === void 0 ? void 0 : _widget$current2.Title,
     "data-pr-position": "top",
-    className: "h-tool-tip",
     onMouseEnter: function onMouseEnter() {
       return showTooltip(true);
     },
@@ -1148,29 +1234,25 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
         return showTooltip(true);
       }, 50);
     }
-  }, (_widget$current3 = widget.current) === null || _widget$current3 === void 0 ? void 0 : _widget$current3.Title)), props.isInEditMode ? React__default.createElement(button.Button, {
-    icon: "pi pi-ellipsis-v",
-    className: "p-button-rounded p-button-text",
-    onClick: function onClick(e) {
-      var _moreBtnToggle$curren2;
-      return (_moreBtnToggle$curren2 = moreBtnToggle.current) === null || _moreBtnToggle$curren2 === void 0 ? void 0 : _moreBtnToggle$curren2.toggle(e);
-    },
+  }, (_widget$current3 = widget.current) === null || _widget$current3 === void 0 ? void 0 : _widget$current3.Title)), React__default.createElement("div", {
+    className: (_widget$current4 = widget.current) !== null && _widget$current4 !== void 0 && _widget$current4.Subtitle && ((_widget$current5 = widget.current) === null || _widget$current5 === void 0 ? void 0 : _widget$current5.Subtitle.length) > 0 ? "subtitle" : "subtitle margin-top-4",
     style: {
-      color: "#292D30"
+      fontSize: getCSSPropertyValue(widget.current, 'SubtitleFontSize', 'px'),
+      textAlign: getCSSPropertyValue(widget === null || widget === void 0 ? void 0 : widget.current, 'TitleAlignment', '', undefined),
+      color: getCSSPropertyValue(widget.current, 'TitleFontColor', '')
     }
-  }) : null, React__default.createElement(overlaypanel.OverlayPanel, {
-    ref: moreBtnToggle,
-    className: "buttons-overlay"
-  }, React__default.createElement("div", {
-    className: "buttons-list"
-  }, React__default.createElement("div", {
-    onClick: editWidget
-  }, " Edit "), React__default.createElement("div", {
+  }, (_widget$current6 = widget.current) === null || _widget$current6 === void 0 ? void 0 : _widget$current6.Subtitle)), props.isInEditMode && isWidgetHovered ? React__default.createElement("div", {
+    className: (_widget$current7 = widget.current) !== null && _widget$current7 !== void 0 && _widget$current7.Title && ((_widget$current8 = widget.current) === null || _widget$current8 === void 0 ? void 0 : _widget$current8.Title.length) > 0 ? "widget-options-container" : "widget-options-container margin-top-6"
+  }, React__default.createElement(SvgEditIcon, {
+    onClick: function onClick() {
+      return editWidget();
+    }
+  }), 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);
     }
-  }, "Remove")))), React__default.createElement("div", {
+  })) : null), React__default.createElement("div", {
     style: {
       width: '100%'
     }
@@ -1180,9 +1262,9 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     className: "dl-dashboard-widget"
   }, " ", GetChartComponent(), " "));
   function GetChartComponent() {
-    var _widget$current4, _widget$current5;
-    if (isLoading || !((_widget$current4 = widget.current) !== null && _widget$current4 !== void 0 && _widget$current4.TypeCode)) return null;
-    if (((_widget$current5 = widget.current) === null || _widget$current5 === void 0 ? void 0 : _widget$current5.TypeCode) == "kpi") return React__default.createElement(CustomChart, {
+    var _widget$current9, _widget$current10;
+    if (isLoading || !((_widget$current9 = widget.current) !== null && _widget$current9 !== void 0 && _widget$current9.TypeCode)) return null;
+    if (((_widget$current10 = widget.current) === null || _widget$current10 === void 0 ? void 0 : _widget$current10.TypeCode) == "kpi") return React__default.createElement(CustomChart, {
       dataBinding: props.dataBinding,
       widget: widget.current,
       widgetRef: props.widgetRef,
@@ -1235,6 +1317,14 @@ var DashboardDesigner = function DashboardDesigner(props) {
   React.useEffect(function () {
     FillLayout(props.Widgetlayouts);
   }, [props.Widgetlayouts]);
+  React.useEffect(function () {
+    var _props$dataBinding;
+    (_props$dataBinding = props.dataBinding) === null || _props$dataBinding === void 0 ? void 0 : _props$dataBinding.onDeleteWidgetConfirmed.subscribe(function (deleteProps) {
+      if (deleteProps) {
+        deletePanel(deleteProps);
+      }
+    });
+  }, []);
   var FillLayout = function FillLayout(dashboardLayouts) {
     var clone = deepClone(dashboardLayouts);
     var layout = createLayout(clone);
@@ -1287,16 +1377,24 @@ var DashboardDesigner = function DashboardDesigner(props) {
       }
     }
   }
-  function deletePanel(id) {
+  var confirmDeleteWidget = function confirmDeleteWidget(id) {
+    var deleteWidgetProps = {
+      id: id,
+      layouts: layouts,
+      widgets: widgets
+    };
+    props.onWidgetDelete(deleteWidgetProps);
+  };
+  function deletePanel(deleteProps) {
     var newLayouts = {
-      lg: layouts.lg.filter(function (e) {
-        return e.i != id;
+      lg: deleteProps.layouts.lg.filter(function (e) {
+        return e.i != deleteProps.id;
       })
     };
     setLayouts(newLayouts);
     var newWidgets = {
-      lg: widgets.lg.filter(function (e) {
-        return e.key != id;
+      lg: deleteProps.widgets.lg.filter(function (e) {
+        return e.key != deleteProps.id;
       })
     };
     FillWidgetDictionary(newWidgets);
@@ -1363,7 +1461,7 @@ var DashboardDesigner = function DashboardDesigner(props) {
       dataBinding: props.dataBinding,
       dateFilter: dateFilter,
       editBtnClicked: editWidget,
-      deleteBtnClicked: deletePanel,
+      deleteBtnClicked: confirmDeleteWidget,
       onSelectDataPoint: props.onSelectDataPoint,
       ref: function ref(el) {
         var _widget$Layout3;
@@ -1490,6 +1588,9 @@ var Dashboard = function Dashboard(props) {
     dataBinding: props.dataBinding,
     editMode: isInEditMode,
     onLayoutChange: updateWidgets,
+    onWidgetDelete: function onWidgetDelete(deleteProps) {
+      return props.openDeleteWidgetConfirmWindow(deleteProps);
+    },
     openEditWidget: function openEditWidget(widget) {
       return props.openEditWidget(widget);
     }