ods-component-lib 1.18.241 → 1.18.243

package/dist/index.modern.js

@@ -1,4 +1,4 @@
-import { Alert, AutoComplete, Button, Dropdown, Calendar, Card as Card$1, Checkbox, DatePicker, Divider, Collapse, Image, Input, InputNumber, List, Modal, notification, Radio, Rate, Select, Space, Spin, Switch, Tabs, Table, Tag, Timeline, TimePicker, Typography, theme, Badge, ConfigProvider, Menu, Form as Form$1, Row, Col, Upload, Tooltip as Tooltip$1, Transfer, Progress, Tree, TreeSelect } from 'antd';
+import { Alert, AutoComplete, Button, Dropdown, Calendar, Card as Card$1, Checkbox, DatePicker, Divider, Collapse, Image, Input, InputNumber, List, Modal, notification, Radio, Rate, Select, Space, Spin, Switch, Tabs, Table, Tag, Timeline, TimePicker, Typography, theme, Badge, ConfigProvider, Menu, Form as Form$1, Row, Col, Upload, Tooltip as Tooltip$1, Transfer, Progress, Tree, TreeSelect, Popover } from 'antd';
 import styled, { ThemeProvider } from 'styled-components';
 import React, { useState, useRef, useEffect, useCallback, Suspense, useMemo, forwardRef, useImperativeHandle } from 'react';
 import Marquee from 'react-fast-marquee';
@@ -16,13 +16,14 @@ import jsPDF, { jsPDF as jsPDF$1 } from 'jspdf';
 import { Workbook } from 'exceljs';
 import { saveAs } from 'file-saver-es';
 import moment, { isDate } from 'moment';
-import { GridIcon, UpArrow5Icon, DownArrow5Icon, Loop1Icon, EditIcon, Trash1Icon, CopyIcon, DiscountIcon, KebabMenuIcon, RefreshIcon, LinkBreakIcon, FloppyDiskIcon, Discount2Icon, Slide1Icon, BabyIcon, BabyBottleIcon, UsersIcon, Search1Icon, UpArrow2Icon, DownArrow2Icon } from 'ods-icon/react/24/outline';
+import { GridIcon, UpArrow5Icon, DownArrow5Icon, Loop1Icon, EditIcon, Trash1Icon, CopyIcon, DiscountIcon, KebabMenuIcon, RefreshIcon, LinkBreakIcon, FloppyDiskIcon, Discount2Icon, Slide1Icon, BabyIcon, BabyBottleIcon, UsersIcon, Search1Icon, CrossIcon, UpArrow2Icon, DownArrow2Icon } from 'ods-icon/react/24/outline';
 import { TreeList, Lookup, DataGrid as DataGrid$2, Toolbar as Toolbar$1 } from 'devextreme-react';
 import { createStyles } from 'antd-style';
 import { saveAs as saveAs$1 } from 'file-saver';
 import 'devextreme/dist/css/dx.light.css';
 import { Gantt, Toolbar as Toolbar$2, Item as Item$2, ContextMenu, Column as Column$1, Tasks, Sorting as Sorting$1 } from 'devextreme-react/gantt';
 import 'jspdf-autotable';
+import { Button as Button$2 } from 'devextreme-react/button';
 
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
@@ -37940,7 +37941,7 @@ var OdsMergeCellDataGridHelper = /*#__PURE__*/function () {
             });
           } else {
             mergedCells.filter(function (x) {
-              return x.FieldName == dataFieldCurrent && x.Type != "OutOfScope";
+              return x.FieldName == dataFieldCurrent && x.Type != "OutOfScope" && x.Type != "Dirty";
             }).map(function (item) {
               mergedCells.filter(function (x) {
                 return x.FieldName == dataFieldNext && x.Type != "New" && x.Type != "Placed";
@@ -38488,19 +38489,6 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   })));
 };
 
-var currentYear = new Date().getFullYear();
-var Constants = {
-  timelineDefaultStartDate: new Date(currentYear, 0, 1),
-  timelineDefaultEndDate: new Date(currentYear + 1, 0, 1)
-};
-var actionColumnProps = {
-  dataField: "Actions",
-  allowExporting: false,
-  allowFiltering: false,
-  allowSorting: false,
-  dataType: "object"
-};
-
 var lodash = createCommonjsModule(function (module, exports) {
 (function() {
 
@@ -55691,6 +55679,23 @@ var lodash = createCommonjsModule(function (module, exports) {
 }.call(commonjsGlobal));
 });
 
+var uniqueRecords = function uniqueRecords(value, index, array) {
+  return array.indexOf(value) === index;
+};
+
+var currentYear = new Date().getFullYear();
+var Constants = {
+  timelineDefaultStartDate: new Date(currentYear, 0, 1),
+  timelineDefaultEndDate: new Date(currentYear + 1, 0, 1)
+};
+var actionColumnProps = {
+  dataField: "Actions",
+  allowExporting: false,
+  allowFiltering: false,
+  allowSorting: false,
+  dataType: "object"
+};
+
 var checkboxCellComponent = function checkboxCellComponent(props) {
   var isChecked = props.data.value;
   var onChange = function onChange(e) {
@@ -55923,6 +55928,7 @@ var OdsTimelineSelectionColumn = function OdsTimelineSelectionColumn(selectionEv
     minWidth: 50,
     width: 50,
     dataField: "isSelected",
+    name: "selection",
     allowExporting: false,
     cellComponent: function cellComponent(props) {
       var onChange = function onChange(e) {
@@ -55944,19 +55950,26 @@ var OdsTimelineSelectionColumn = function OdsTimelineSelectionColumn(selectionEv
   return selectionColumn;
 };
 
-var _templateObject$B, _templateObject2$9, _templateObject3$6, _templateObject4$5, _templateObject5$4;
+var _templateObject$B, _templateObject2$9, _templateObject3$6, _templateObject4$5, _templateObject5$4, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$3, _templateObject10$3, _templateObject11$3;
 var useStyles$b = createStyles(function (_ref, props) {
   var _props$taskWidth, _props$progressPerc, _props$progressColor;
   var css = _ref.css;
   var _taskWidth = (_props$taskWidth = props === null || props === void 0 ? void 0 : props.taskWidth) != null ? _props$taskWidth : 0;
   var _progressPerc = (_props$progressPerc = props === null || props === void 0 ? void 0 : props.progressPerc) != null ? _props$progressPerc : 100;
   var _progressColor = (_props$progressColor = props === null || props === void 0 ? void 0 : props.progressColor) != null ? _props$progressColor : "unset";
+  var searchBox = "\n      padding-left: 5px;\n    ";
   return {
     taskBar: css(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n        min-height: 22px;\n        display: block;\n        overflow: hidden;\n        width: ", "px;\n        border: 1px solid #f0f0f0;\n        border-radius: 5px;\n        background-color: #f0f0f0;\n      "])), _taskWidth != null ? _taskWidth : 0),
     taskProgress: css(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n        height: 100%;\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        width: ", "%;\n        border: 1px solid ", ";\n        border-radius: 5px;\n        background-color: ", ";\n      "])), _progressPerc, _progressColor, _progressColor),
     taskBarTitle: css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n        z-index: 1;\n        padding-left: 4px;\n        position: absolute;\n      "]))),
     searchBoxIcon: css(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n        color: #999;\n        font-size: 17px;\n        line-height: 18px;\n      "]))),
-    searchBox: css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n        padding-left: 5px;\n      "])))
+    searchBox: css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), searchBox),
+    columnChooserPopup: css(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n        min-width: 250px;\n      "]))),
+    columnChooserHeader: css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n        display: flex;\n        align-items: center;\n      "]))),
+    columnChooserCloseButton: css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n        flex: 1;\n        text-align: end;\n      "]))),
+    columnChooserDivider: css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n        margin-top: 10px;\n        margin-bottom: 10px;\n      "]))),
+    columnChooserCheckbox: css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n        margin-top: 4px;\n        margin-bottom: 4px;\n      "]))),
+    columnChooserSearchbox: css(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n        ", "\n        margin-top: 4px;\n        margin-bottom: 4px;\n      "])), searchBox)
   };
 });
 
@@ -56015,8 +56028,154 @@ var OdsTimelineTableSearchBox = function OdsTimelineTableSearchBox(props) {
   }));
 };
 
+var OdsTimelineTableColumnChooser = function OdsTimelineTableColumnChooser(props) {
+  var _useStyles = useStyles$b(),
+    timelineTableStyles = _useStyles.styles;
+  var initialSelectedColumns = props.items.filter(function (item) {
+    return item.visible !== false;
+  });
+  var _useState = useState(false),
+    open = _useState[0],
+    setOpen = _useState[1];
+  var _useState2 = useState(props.items),
+    columns = _useState2[0],
+    setColumns = _useState2[1];
+  var _useState3 = useState(initialSelectedColumns),
+    selectedColumns = _useState3[0],
+    setSelectedColumns = _useState3[1];
+  var filterColumns = function filterColumns(searchValue) {
+    var _columns = [];
+    if (searchValue !== undefined && searchValue !== null && searchValue !== "") {
+      _columns = columns.filter(function (item) {
+        return item.columnCaption.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase());
+      });
+    } else {
+      _columns = props.items;
+    }
+    setColumns(_columns);
+    updateSelectAll({
+      columnList: _columns
+    });
+  };
+  var selectAllChanged = function selectAllChanged(isSelected) {
+    setSelectAll(isSelected);
+    var newSelectedColumns = [];
+    if (isSelected) {
+      newSelectedColumns = [].concat(selectedColumns, columns).filter(uniqueRecords);
+    } else {
+      newSelectedColumns = selectedColumns.filter(function (item) {
+        return !columns.some(function (x) {
+          return x.columnName === item.columnName;
+        });
+      });
+    }
+    setSelectedColumns(newSelectedColumns);
+    props.onSelection && props.onSelection(columns.map(function (item) {
+      return item.columnName;
+    }), isSelected);
+  };
+  var selectChanged = function selectChanged(isSelected, column) {
+    var newSelectedColumns = [];
+    if (isSelected) {
+      newSelectedColumns = [].concat(selectedColumns, [column]).filter(uniqueRecords);
+    } else {
+      newSelectedColumns = selectedColumns.filter(function (item) {
+        return item.columnName !== column.columnName;
+      });
+    }
+    setSelectedColumns(newSelectedColumns);
+    updateSelectAll({
+      selectedColumnList: newSelectedColumns
+    });
+    props.onSelection && props.onSelection([column.columnName], isSelected);
+  };
+  var updateSelectAll = function updateSelectAll(params) {
+    var columnList = params.columnList,
+      selectedColumnList = params.selectedColumnList;
+    setSelectAll(isAllSelected({
+      columnList: columnList,
+      selectedColumnList: selectedColumnList
+    }));
+  };
+  var isSelected = function isSelected(columnName) {
+    return selectedColumns.some(function (item) {
+      return item.columnName === columnName;
+    });
+  };
+  var isAllSelected = function isAllSelected(params) {
+    var _params$columnList, _params$selectedColum;
+    var _columns = (_params$columnList = params === null || params === void 0 ? void 0 : params.columnList) != null ? _params$columnList : columns;
+    var _selectedColumns = (_params$selectedColum = params === null || params === void 0 ? void 0 : params.selectedColumnList) != null ? _params$selectedColum : selectedColumns;
+    var _result = true;
+    lodash.forEach(_columns, function (_column) {
+      if (!_selectedColumns.some(function (_selectedColumn) {
+        return _selectedColumn.columnName === _column.columnName;
+      })) {
+        _result = false;
+        return;
+      }
+    });
+    return _result;
+  };
+  var _useState4 = useState(isAllSelected({
+      columnList: props.items,
+      selectedColumnList: initialSelectedColumns
+    })),
+    selectAll = _useState4[0],
+    setSelectAll = _useState4[1];
+  var content = React.createElement("div", {
+    className: timelineTableStyles.columnChooserPopup
+  }, React.createElement("div", {
+    className: timelineTableStyles.columnChooserHeader
+  }, React.createElement("span", null, props.title), React.createElement("span", {
+    className: timelineTableStyles.columnChooserCloseButton
+  }, React.createElement(CrossIcon, {
+    style: {
+      cursor: "pointer"
+    },
+    onClick: function onClick() {
+      return setOpen(false);
+    }
+  }))), React.createElement(OdsInput, {
+    key: "OdsTimelineTableColumnChooser_OdsSearch",
+    prefix: React.createElement("span", {
+      className: "dx-icon-search " + timelineTableStyles.searchBoxIcon
+    }),
+    className: timelineTableStyles.columnChooserSearchbox,
+    onChange: function onChange(e) {
+      return filterColumns(e.target.value);
+    }
+  }), React.createElement(OdsCheckbox, {
+    className: timelineTableStyles.columnChooserCheckbox,
+    checked: selectAll,
+    onChange: function onChange(e) {
+      return selectAllChanged(e.target.checked);
+    }
+  }, props.selectAllText), React.createElement(Divider, {
+    className: timelineTableStyles.columnChooserDivider
+  }), columns.map(function (_column, index) {
+    return React.createElement("div", null, React.createElement(OdsCheckbox, {
+      key: "OdsTimelineTableColumnChooser_OdsCheckbox_" + index,
+      className: timelineTableStyles.columnChooserCheckbox,
+      checked: isSelected(_column.columnName),
+      onChange: function onChange(e) {
+        return selectChanged(e.target.checked, _column);
+      }
+    }, _column.columnCaption));
+  }));
+  return React.createElement(React.Fragment, null, React.createElement(Popover, {
+    open: open,
+    content: content
+  }, React.createElement(Button$2, {
+    icon: "columnchooser",
+    onClick: function onClick() {
+      return setOpen(true);
+    }
+  })));
+};
+
 var OdsTimelineTable = forwardRef(function (props, ref) {
-  var _toolbarSettings$sear, _toolbarSettings$sear5, _toolbarSettings$expo6, _toolbarSettings$expo7;
+  var _toolbarSettings$sear, _toolbarSettings$sear5, _toolbarSettings$expo6, _toolbarSettings$expo7, _toolbarSettings$colu;
   var customColumns = props.customColumns,
     customTasks = props.customTasks,
     customTaskKey = props.customTaskKey,
@@ -56058,6 +56217,15 @@ var OdsTimelineTable = forwardRef(function (props, ref) {
     }),
     sortingChangeEventProps = _useState7[0],
     setSortingChangeEventProps = _useState7[1];
+  var _useState8 = useState(customColumns),
+    columnList = _useState8[0],
+    setColumnList = _useState8[1];
+  var _useState9 = useState(customColumns.filter(function (item) {
+      return item.visible === false;
+    }).map(function (item) {
+      return item.name;
+    })),
+    unvisibleColumnNames = _useState9[0];
   var originalSortingMode = sorting.mode === undefined || sorting.mode === "" ? "none" : sorting.mode;
   var sortingMode = sortingProcess == "ServerSideSorting" ? "none" : originalSortingMode;
   var showSortIndexes = sortingProcess == "ServerSideSorting" ? false : sorting.showSortIndexes;
@@ -56138,7 +56306,7 @@ var OdsTimelineTable = forwardRef(function (props, ref) {
     updateSelectionData(e.data[props.customTaskKey].toString(), e.isSelected);
     onCustomSelectionChanged && onCustomSelectionChanged(e);
   };
-  var timelineColumns = multiSelectionEnabled ? [OdsTimelineSelectionColumn(onTimelineCheckboxSelectionChange)].concat(customColumns) : customColumns;
+  var timelineColumns = multiSelectionEnabled ? [OdsTimelineSelectionColumn(onTimelineCheckboxSelectionChange)].concat(columnList) : columnList;
   var minimalHeaderCellComponent = function minimalHeaderCellComponent(data) {
     return customHeaderCellComponent(data, true);
   };
@@ -56243,6 +56411,33 @@ var OdsTimelineTable = forwardRef(function (props, ref) {
       endDate: e.endDate
     });
   };
+  var onColumnChooserSelection = function onColumnChooserSelection(items, isSelected) {
+    var _props$toolbarSetting, _props$toolbarSetting2, _props$toolbarSetting3, _props$toolbarSetting4;
+    var _visibleColumns = columnList.filter(function (item) {
+      return item.visible !== false;
+    });
+    if (isSelected) {
+      _visibleColumns = [].concat(_visibleColumns, customColumns.filter(function (item) {
+        return items.includes(item.name);
+      })).filter(uniqueRecords);
+    } else {
+      _visibleColumns = _visibleColumns.filter(function (item) {
+        return !items.includes(item.name);
+      });
+    }
+    _visibleColumns = _visibleColumns.filter(function (x) {
+      return !unvisibleColumnNames.includes(x.name);
+    });
+    setColumnList(function (prev) {
+      return prev.map(function (item) {
+        item.visible = _visibleColumns.some(function (x) {
+          return x.name === item.name;
+        });
+        return item;
+      });
+    });
+    ((_props$toolbarSetting = props.toolbarSettings) === null || _props$toolbarSetting === void 0 ? void 0 : (_props$toolbarSetting2 = _props$toolbarSetting.columnChooser) === null || _props$toolbarSetting2 === void 0 ? void 0 : _props$toolbarSetting2.onSelection) && ((_props$toolbarSetting3 = props.toolbarSettings) === null || _props$toolbarSetting3 === void 0 ? void 0 : (_props$toolbarSetting4 = _props$toolbarSetting3.columnChooser) === null || _props$toolbarSetting4 === void 0 ? void 0 : _props$toolbarSetting4.onSelection(items, isSelected));
+  };
   var searchBoxComponent = function searchBoxComponent(props) {
     var _toolbarSettings$sear4;
     var filterInAllFields = function filterInAllFields(item, searchValue) {
@@ -56297,13 +56492,13 @@ var OdsTimelineTable = forwardRef(function (props, ref) {
   var getExportFileName = function getExportFileName() {
     var _toolbarSettings$expo4, _toolbarSettings$expo5;
     var now = new Date();
-    var datePart = ('0' + now.getDate()).slice(-2) + "-" + ('0' + (now.getMonth() + 1)).slice(-2) + "-" + now.getFullYear();
-    var timePart = ('0' + now.getHours()).slice(-2) + ":" + ('0' + now.getMinutes()).slice(-2);
+    var datePart = ("0" + now.getDate()).slice(-2) + "-" + ("0" + (now.getMonth() + 1)).slice(-2) + "-" + now.getFullYear();
+    var timePart = ("0" + now.getHours()).slice(-2) + ":" + ("0" + now.getMinutes()).slice(-2);
     return ((_toolbarSettings$expo4 = toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$expo5 = toolbarSettings["export"]) === null || _toolbarSettings$expo5 === void 0 ? void 0 : _toolbarSettings$expo5.fileName) != null ? _toolbarSettings$expo4 : "Timeline") + "-" + datePart + "-" + timePart + ".pdf";
   };
   var exportedColumns = useMemo(function () {
     var newExportedColumns = [];
-    var exportableColumns = customColumns.filter(function (item) {
+    var exportableColumns = columnList.filter(function (item) {
       return item.visible != false && item.allowExporting != false;
     });
     var isResizableColumn = function isResizableColumn(item) {
@@ -56324,7 +56519,7 @@ var OdsTimelineTable = forwardRef(function (props, ref) {
       newExportedColumns.push(col);
     });
     return newExportedColumns;
-  }, [exportableTasks]);
+  }, [exportableTasks, columnList]);
   useImperativeHandle(ref, function () {
     return {
       getSelectedRowsData: getSelectedRowsData,
@@ -56383,6 +56578,27 @@ var OdsTimelineTable = forwardRef(function (props, ref) {
       stylingMode: "text",
       onClick: exportToPdf
     }
+  }), React.createElement(Item$2, {
+    key: "OdsTimelineTable_ToolbarItem_ColumChooser",
+    visible: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$colu = toolbarSettings.columnChooser) === null || _toolbarSettings$colu === void 0 ? void 0 : _toolbarSettings$colu.visible,
+    location: toolbarSettings === null || toolbarSettings === void 0 ? void 0 : toolbarSettings.location,
+    component: function component(props) {
+      var _toolbarSettings$colu2, _toolbarSettings$colu3, _toolbarSettings$colu4, _toolbarSettings$colu5;
+      return OdsTimelineTableColumnChooser(_extends({}, props, {
+        title: (_toolbarSettings$colu2 = toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$colu3 = toolbarSettings.columnChooser) === null || _toolbarSettings$colu3 === void 0 ? void 0 : _toolbarSettings$colu3.title) != null ? _toolbarSettings$colu2 : "Column Chooser",
+        selectAllText: (_toolbarSettings$colu4 = toolbarSettings === null || toolbarSettings === void 0 ? void 0 : (_toolbarSettings$colu5 = toolbarSettings.columnChooser) === null || _toolbarSettings$colu5 === void 0 ? void 0 : _toolbarSettings$colu5.selectAllText) != null ? _toolbarSettings$colu4 : "Select All",
+        items: columnList.filter(function (item) {
+          return item.caption !== undefined && item.caption !== "";
+        }).map(function (item) {
+          return {
+            columnCaption: item.caption,
+            columnName: item.name,
+            visible: item.visible
+          };
+        }),
+        onSelection: onColumnChooserSelection
+      }));
+    }
   })) : "", React.createElement(ContextMenu, {
     enabled: false
   }), timelineColumns === null || timelineColumns === void 0 ? void 0 : timelineColumns.map(function (columnProps) {