logitude-dashboard-library 3.1.29 → 3.1.30

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

@@ -385,6 +385,7 @@ $dark-grey: #717585;
         }
 
         .table-hint-container {
+            font-family: "Manrope";
             width: auto;
             max-width: 300px;
             text-overflow: ellipsis;
@@ -748,6 +749,7 @@ $dark-grey: #717585;
 }
 
 .table-cell {
+    font-family: 'Manrope';
     padding: 0px 6px;
     border-radius: 4px;
     white-space: nowrap;
@@ -847,27 +849,27 @@ $dark-grey: #717585;
         overflow-x: inherit;
     }
 
-
-    td,
-    th {
-        border-bottom: 1px solid #E7E7E6 !important;
-        padding: 8px;
-    }
-
     th {
         text-align: left;
         font-weight: bold;
         font-size: 14px;
         white-space: nowrap;
         padding: 0px !important;
+        position: sticky;
+        top: 0px;
+        z-index: 1;
+        border: 0px !important;
 
         .p-column-header-content {
             padding: 0;
+            border: 1px solid #E7E7E6;
+            border-width: 0 0 1px 0;
         }
 
         .p-column-title {
-            font-weight: bold !important;
-            font-size: 14px;
+            font-family: 'Manrope';
+            font-weight: 600 !important;
+            font-size: 13px;
             flex: 1;
         }
 
@@ -884,7 +886,8 @@ $dark-grey: #717585;
     }
 
     td {
-        border: 1px solid #ddd;
+        border: 1px solid #E7E7E6 !important;
+        border-width: 0 0 1px 0 !important;
         padding: 0px 6px !important;
         max-width: 1px;
         height: 36px;
@@ -998,4 +1001,8 @@ $dark-grey: #717585;
 
 .border-bottom-light-white {
     border-bottom: 1px solid #E7E7E6;
+}
+
+.padding-left-12 {
+    padding-left: 12px !important;
 }

package/dist/index.js

@@ -862,24 +862,26 @@ var TableChart = function TableChart(props) {
   };
 
   var cellTemplateBody = function cellTemplateBody(data, column) {
-    var _data$column$FieldCod, _data$column$FieldCod2, _data$column$FieldCod3;
+    var _data$column$FieldCod, _data$column$FieldCod2, _data$column$FieldCod3, _data$column$FieldCod4, _data$column$FieldCod5;
 
     if (!column || !column.FieldCode) return "";
     return column.DataTypeCode == "DateTime" || column.DataTypeCode == "Date" ? React__default.createElement("span", {
+      title: getDateTimeValue((_data$column$FieldCod = data[column.FieldCode]) === null || _data$column$FieldCod === void 0 ? void 0 : _data$column$FieldCod.Label),
       className: "table-cell",
       style: {
         color: getTableFormattingPropertyValue("TableCellFontColor"),
         fontSize: getTableFormattingPropertyValue("TableCellFontSize", "px")
       }
-    }, getDateTimeValue((_data$column$FieldCod = data[column.FieldCode]) === null || _data$column$FieldCod === void 0 ? void 0 : _data$column$FieldCod.Label)) : React__default.createElement("span", {
+    }, getDateTimeValue((_data$column$FieldCod2 = data[column.FieldCode]) === null || _data$column$FieldCod2 === void 0 ? void 0 : _data$column$FieldCod2.Label)) : React__default.createElement("span", {
+      title: (_data$column$FieldCod3 = data[column.FieldCode]) === null || _data$column$FieldCod3 === void 0 ? void 0 : _data$column$FieldCod3.Label,
       className: "table-cell",
       style: {
         color: getTableFormattingPropertyValue("TableCellFontColor"),
-        backgroundColor: getCellPropertyByRule(column, (_data$column$FieldCod2 = data[column.FieldCode]) === null || _data$column$FieldCod2 === void 0 ? void 0 : _data$column$FieldCod2.Value, 'RuleBackgroundColor'),
+        backgroundColor: getCellPropertyByRule(column, (_data$column$FieldCod4 = data[column.FieldCode]) === null || _data$column$FieldCod4 === void 0 ? void 0 : _data$column$FieldCod4.Value, 'RuleBackgroundColor'),
         fontSize: getTableFormattingPropertyValue("TableCellFontSize", "px"),
         "float": getCellFloatAlignment(column)
       }
-    }, (_data$column$FieldCod3 = data[column.FieldCode]) === null || _data$column$FieldCod3 === void 0 ? void 0 : _data$column$FieldCod3.Label);
+    }, (_data$column$FieldCod5 = data[column.FieldCode]) === null || _data$column$FieldCod5 === void 0 ? void 0 : _data$column$FieldCod5.Label);
   };
 
   var headerTemplate = function headerTemplate(column) {
@@ -2244,6 +2246,19 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     return ((_widget$current9 = widget.current) === null || _widget$current9 === void 0 ? void 0 : _widget$current9.Subtitle) && ((_widget$current10 = widget.current) === null || _widget$current10 === void 0 ? void 0 : _widget$current10.Subtitle.length) > 0;
   };
 
+  var tableHintMessage = function tableHintMessage() {
+    return React__default.createElement("span", {
+      className: "table-hint-container " + (isTitleAligmentRight() ? "padding-left-12" : "")
+    }, React__default.createElement("span", null, "Showing the first 100 rows"), !props.isInEditMode && !props.isPreviewModeActive && React__default.createElement(React__default.Fragment, null, React__default.createElement("span", null, "("), React__default.createElement("span", {
+      onClick: drilldownToTableData,
+      className: "show-more-records"
+    }, " Show More Records "), React__default.createElement("span", null, ")")));
+  };
+
+  var isTitleAligmentRight = function isTitleAligmentRight() {
+    return widget && widget.current && widget.current.TitleAlignment && widget.current.TitleAlignment.toLowerCase() == 'right';
+  };
+
   return React__default.createElement("div", {
     className: "dl-panel",
     key: props.el.i
@@ -2252,10 +2267,11 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     className: "widget-header"
   }, React__default.createElement("div", {
     className: "header-contents " + (isTableWidget() ? "border-bottom-light-white" : "")
-  }, React__default.createElement("div", {
+  }, isTitleAligmentRight() && isTableWidget() && tableHintMessage(), React__default.createElement("div", {
     style: {
       cursor: props.isInEditMode ? "move" : "default",
-      justifyContent: isTableWidget() ? getCSSPropertyValue(widget === null || widget === void 0 ? void 0 : widget.current, 'TitleAlignment', '', undefined) : undefined
+      justifyContent: isTableWidget() ? getCSSPropertyValue(widget === null || widget === void 0 ? void 0 : widget.current, 'TitleAlignment', '', undefined) : undefined,
+      flexDirection: isTitleAligmentRight() ? "row-reverse" : "row"
     },
     className: getwidgetTitlesContainer()
   }, React__default.createElement("div", {
@@ -2291,12 +2307,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
       color: getCSSPropertyValue(widget.current, 'SubtitleFontColor', ''),
       minWidth: isThereSubtitle() && isTableWidget() ? '5%' : undefined
     }
-  }, (_widget$current13 = widget.current) === null || _widget$current13 === void 0 ? void 0 : _widget$current13.Subtitle)), isTableWidget() && React__default.createElement("span", {
-    className: "table-hint-container"
-  }, React__default.createElement("span", null, "Showing the first 100 rows"), !props.isInEditMode && !props.isPreviewModeActive && React__default.createElement(React__default.Fragment, null, React__default.createElement("span", null, "("), React__default.createElement("span", {
-    onClick: drilldownToTableData,
-    className: "show-more-records"
-  }, " Show More Records "), React__default.createElement("span", null, ")"))), props.isInEditMode && React__default.createElement("div", {
+  }, (_widget$current13 = widget.current) === null || _widget$current13 === void 0 ? void 0 : _widget$current13.Subtitle)), !isTitleAligmentRight() && isTableWidget() && tableHintMessage(), props.isInEditMode && React__default.createElement("div", {
     className: isThereTitle() ? "widget-options-container" : "widget-options-container margin-top-6"
   }, React__default.createElement(SvgEditIcon, {
     onClick: function onClick() {