ods-component-lib 1.18.217 → 1.18.221

package/dist/index.modern.js

@@ -1893,6 +1893,377 @@ var OdsFilter = function OdsFilter(props) {
   }, props.buttonApplyName)))))));
 };
 
+var _templateObject$q, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17, _templateObject18;
+var useStyles$1 = createStyles(function (_ref, props) {
+  var css = _ref.css,
+    cx = _ref.cx,
+    token = _ref.token;
+  var flex = css(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n      display: flex;\n    "])));
+  var grid = css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n      display: grid;\n    "])));
+  return {
+    filterWrapper: css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n        width: 100%;\n        padding: ", "px;\n        border-radius: ", "px;\n        margin-bottom: ", "px;\n        z-index: 1;\n      "])), token.padding, token.borderRadiusLG * 2, token.margin),
+    filterInner: cx(grid, css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n          grid-template-columns: repeat(1, minmax(0, 1fr));\n          transition: gap 0.1s;\n          gap: ", "px;\n        "])), props.open ? token.sizeXS : 0)),
+    filterTopWrapper: cx(grid, css(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n          grid-template-columns: 1fr auto;\n          gap: ", "px;\n        "])), token.sizeSM)),
+    filterTopInfo: cx(grid, css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n          grid-template-columns: auto 1fr;\n          gap: ", "px;\n        "])), token.sizeXS)),
+    filterTopTitle: cx(flex, css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n          align-items: center;\n        "])))),
+    filterTopActions: cx(flex, css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n          justify-content: flex-end;\n          gap: ", "px;\n        "])), token.sizeSM)),
+    filterBodyWrapper: cx(grid, css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n          transition: grid-template-rows 0.3s;\n          grid-template-rows: ", ";\n        "])), props.open ? "1fr" : "0fr")),
+    filterBody: cx(css(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n          overflow: hidden;\n          width: 100%;\n        "])))),
+    filterActionButtonsWrapper: cx(flex, css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n          justify-content: flex-end;\n          margin-top: 16px;\n        "])))),
+    filterActionButtons: cx(flex, css(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n          justify-content: flex-end;\n          gap: ", "px;\n          align-items: flex-end;\n        "])), token.sizeSM)),
+    filterTagsWrapper: cx(flex, css(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n          align-items: center;\n          justify-content: center;\n          width: 85%;\n          max-width: 85%;\n          min-width: 85%;\n          transition: opacity 0.3s;\n          opacity: ", ";\n        "])), props.open ? 0 : 1)),
+    filterInlineDisplayWrapper: props.isDisplayInline ? cx(css(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n            display: grid;\n            grid-template-columns: 1fr auto;\n            width: 100%;\n          "])))) : "",
+    toggleButton: cx(flex),
+    clearButton: cx(flex)
+  };
+});
+var useAdvancedFilterButtonStyles$1 = createStyles(function (_ref2, props) {
+  var css = _ref2.css,
+    cx = _ref2.cx,
+    token = _ref2.token;
+  return {
+    advancedFilterButton: cx(css(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n        display: flex;\n        color: ", ";\n        align-items: center;\n        justify-content: center;\n        padding-left: ", "px;\n        padding-right: ", "px;\n      "])), token.colorPrimary, token.padding, token.padding)),
+    advancedFilterRowWrapper: cx(css(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n        margin-top: 16px;\n        margin-bottom: 16px;\n        display: grid;\n        transition: grid-template-rows 0.3s;\n        grid-template-rows: ", ";\n      "])), props.open ? "1fr" : "0fr")),
+    advancedFilterRow: cx(css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n        display: grid;\n        overflow: hidden;\n        width: 100%;\n      "]))))
+  };
+});
+var useFilterTagsStyles$1 = createStyles(function (_ref3) {
+  var css = _ref3.css,
+    token = _ref3.token;
+  return {
+    menu: css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n    width: 100%;\n    border: 0;\n    gap: ", "px;\n    position: relative;\n\n    &::after,\n    &::before {\n      display: none;\n    }\n\n    &.ant-menu-light.ant-menu-horizontal {\n      & > .ant-menu-item {\n        cursor: default;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin: 0;\n        top: unset;\n      }\n\n      & > .ant-menu-submenu {\n        &:hover {\n          &::after {\n            display: none;\n          }\n        }\n      }\n    }\n\n    &.ant-menu-light.ant-menu-horizontal > .ant-menu-submenu-selected::after {\n      display: none;\n    }\n\n    &.ant-menu-light.ant-menu-horizontal > .ant-menu-item::after,\n    &.ant-menu-light.ant-menu-horizontal > .ant-menu-item:hover::after {\n      display: none;\n    }\n\n    &.ant-menu-light.ant-menu-horizontal\n      > .ant-menu-submenu\n      &.ant-menu-light.ant-menu-horizontal\n      > .ant-menu-item::after {\n      display: none;\n    }\n  "])), token.sizeXS)
+  };
+});
+
+var Title$1 = Typography.Title;
+var OdsFilterPlus = function OdsFilterPlus(props) {
+  var _props$filterRow, _props$filterRow2;
+  var _props$isAdvancedSear = props.isAdvancedSearchEnabled,
+    isAdvancedSearchEnabled = _props$isAdvancedSear === void 0 ? true : _props$isAdvancedSear;
+  var _useState = useState("1"),
+    activeTabKey = _useState[0],
+    setActiveTabKey = _useState[1];
+  var advancedRef = React.createRef();
+  var advanceFilterTabsRows = useRef([]);
+  var _useState2 = useState(true),
+    showFilter = _useState2[0],
+    setShowFilter = _useState2[1];
+  var _useState3 = useState(),
+    hasAdvancedFilters = _useState3[0],
+    setHasAdvancedFilters = _useState3[1];
+  var filterRow = isAdvancedSearchEnabled ? (_props$filterRow = props.filterRow) === null || _props$filterRow === void 0 ? void 0 : _props$filterRow.slice(0, 6) : props.filterRow;
+  var advanceFilterRow = isAdvancedSearchEnabled ? (_props$filterRow2 = props.filterRow) === null || _props$filterRow2 === void 0 ? void 0 : _props$filterRow2.slice(6) : null;
+  var shouldDisplayButtonsInline = (filterRow === null || filterRow === void 0 ? void 0 : filterRow.length) <= 4;
+  var _useStyles = useStyles$1({
+      open: showFilter,
+      isDisplayInline: shouldDisplayButtonsInline
+    }),
+    styles = _useStyles.styles;
+  var _useState4 = useState(!props.advancedFilterClosed),
+    showAdvanceFilter = _useState4[0],
+    setShowAdvanceFilter = _useState4[1];
+  var _useAdvancedFilterBut = useAdvancedFilterButtonStyles$1({
+      open: showAdvanceFilter
+    }),
+    advancedFilterStyles = _useAdvancedFilterBut.styles;
+  var defaultColSize = useCallback(function (_ref) {
+    var isDisplayInline = _ref.isDisplayInline;
+    return isDisplayInline ? {
+      xs: 12,
+      md: 6
+    } : {
+      xs: 24,
+      sm: 12,
+      md: 8,
+      lg: 4
+    };
+  }, []);
+  var hasTabFilter = props.tabs !== undefined;
+  var hasFilterRow = props.filterRow !== undefined;
+  useEffect(function () {
+    setHasAdvancedFilters(advanceFilterRow !== undefined && (advanceFilterRow === null || advanceFilterRow === void 0 ? void 0 : advanceFilterRow.length) > 0);
+  }, []);
+  useEffect(function () {
+    var _props$filterTag;
+    if (props.filterTag && ((_props$filterTag = props.filterTag) === null || _props$filterTag === void 0 ? void 0 : _props$filterTag.length) > 0) handleHideShowFilter();
+  }, [props.filterTag]);
+  var handleHideShowAdvancedFilter = function handleHideShowAdvancedFilter() {
+    if (!showFilter) {
+      setShowFilter(true);
+      setTimeout(function () {
+        setShowAdvanceFilter(!showAdvanceFilter);
+      }, 200);
+    } else {
+      setShowAdvanceFilter(!showAdvanceFilter);
+    }
+  };
+  var handleHideShowFilter = function handleHideShowFilter() {
+    setShowAdvanceFilter(false);
+    setShowFilter(!showFilter);
+  };
+  var onClearSearch = function onClearSearch() {
+    if (props.onClickClear) {
+      props.onClickClear();
+    }
+  };
+  var checkFilterValues = function checkFilterValues() {
+    return Promise.resolve(_catch(function () {
+      return Promise.resolve(props.form.validateFields());
+    }, function () {
+      return null;
+    }));
+  };
+  var findErrorIfAdvancedFilterHasError = function findErrorIfAdvancedFilterHasError() {
+    try {
+      if (advancedRef.current) {
+        var errorItems = advancedRef.current.querySelectorAll(".ant-form-item-has-error");
+        if ((errorItems === null || errorItems === void 0 ? void 0 : errorItems.length) > 0) {
+          setShowAdvanceFilter(true);
+        }
+      }
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var handleOnClickApply = function handleOnClickApply() {
+    return Promise.resolve(checkFilterValues()).then(function (values) {
+      function _temp2() {
+        if (values) {
+          if (props.onFinish) {
+            props.onFinish(values);
+          }
+        } else {
+          props.onFinishFailed && props.onFinishFailed();
+        }
+      }
+      var _temp = function () {
+        if (hasAdvancedFilters) {
+          return Promise.resolve(findErrorIfAdvancedFilterHasError()).then(function () {});
+        }
+      }();
+      return _temp && _temp.then ? _temp.then(_temp2) : _temp2();
+    });
+  };
+  var addAdditionalRowsToAdvanceFilterTabs = function addAdditionalRowsToAdvanceFilterTabs(children) {
+    if (children.length > 6) {
+      var _advanceFilterTabsRow;
+      var additionalRows = children.slice(6).map(function (filterRow) {
+        return {
+          colSize: filterRow.colSize,
+          element: filterRow.element
+        };
+      });
+      (_advanceFilterTabsRow = advanceFilterTabsRows.current).push.apply(_advanceFilterTabsRow, additionalRows);
+    }
+  };
+  var FilterList = function FilterList(_ref2) {
+    var isDisplayInline = _ref2.isDisplayInline;
+    return React.createElement(Row, {
+      gutter: 12
+    }, filterRow.map(function (item, index) {
+      return React.createElement(Col, Object.assign({
+        key: index
+      }, item.colSize || defaultColSize({
+        isDisplayInline: isDisplayInline
+      }), {
+        className: (filterRow === null || filterRow === void 0 ? void 0 : filterRow.length) > 6 ? "mb-4" : ""
+      }), item.element);
+    }));
+  };
+  var FilterTabsList = function FilterTabsList(_ref3) {
+    var tabs = _ref3.tabs,
+      isDisplayInline = _ref3.isDisplayInline;
+    advanceFilterTabsRows.current = [];
+    tabs.forEach(function (tab) {
+      if (tab.children && tab.children.length > 6) {
+        addAdditionalRowsToAdvanceFilterTabs(tab.children);
+      }
+    });
+    return React.createElement(React.Fragment, null, tabs.map(function (tab) {
+      return tab.children ? React.createElement(Row, {
+        gutter: 12,
+        key: tab.key
+      }, tab.children.slice(0, 6).map(function (filterRow, index) {
+        return React.createElement(Col, Object.assign({
+          key: index,
+          xs: 24,
+          sm: 12,
+          md: 8,
+          lg: 4
+        }, filterRow.colSize || defaultColSize({
+          isDisplayInline: isDisplayInline
+        }), {
+          className: tab.children.length > 6 ? "mb-4" : ""
+        }), filterRow.element);
+      })) : null;
+    }));
+  };
+  useEffect(function () {
+    var _props$tabs;
+    var selectedTab = (_props$tabs = props.tabs) === null || _props$tabs === void 0 ? void 0 : _props$tabs.find(function (tab) {
+      return tab.key === activeTabKey;
+    });
+    if (selectedTab) {
+      setHasAdvancedFilters(selectedTab.isAdvanceSearchEnable !== false && selectedTab.children.length > 5);
+    }
+  }, [activeTabKey, props.tabs]);
+  var FilterTabsContainer = function FilterTabsContainer() {
+    return React.createElement(OdsTab, {
+      activeKey: activeTabKey,
+      onChange: onTabChange,
+      items: props.tabs.map(function (tab) {
+        return {
+          key: tab.key,
+          label: tab.label,
+          children: React.createElement(FilterTabsList, {
+            tabs: [tab],
+            isDisplayInline: true
+          }),
+          icon: tab.icon
+        };
+      })
+    });
+  };
+  var onTabChange = function onTabChange(key) {
+    setActiveTabKey(key);
+    advanceFilterTabsRows.current = [];
+    var selectedTab = props.tabs.find(function (tab) {
+      return tab.key === key;
+    });
+    if (selectedTab && selectedTab.children) {
+      if (selectedTab.children.length > 6) {
+        addAdditionalRowsToAdvanceFilterTabs(selectedTab.children);
+      }
+    }
+  };
+  var ActionButtons = function ActionButtons() {
+    return React.createElement("div", {
+      className: styles.filterActionButtons
+    }, React.createElement(OdsButton, {
+      type: "text",
+      onClick: onClearSearch,
+      icon: React.createElement(Loop1Icon, {
+        width: 16,
+        height: 16,
+        viewBox: "0 0 24 24"
+      }),
+      className: styles.clearButton
+    }, props.buttonClearAllName), React.createElement(OdsButton, {
+      type: "primary",
+      onClick: handleOnClickApply
+    }, props.buttonApplyName));
+  };
+  return React.createElement(OdsCard, {
+    className: styles.filterWrapper
+  }, React.createElement(ConfigProvider, {
+    theme: {
+      components: {
+        Form: {
+          itemMarginBottom: 0,
+          verticalLabelPadding: "0 0 4px 0"
+        },
+        Typography: {
+          titleMarginBottom: 0
+        }
+      }
+    }
+  }, React.createElement(Form$1, {
+    form: props.form,
+    layout: "vertical",
+    className: styles.filterInner
+  }, React.createElement(Row, {
+    gutter: [12, 12],
+    align: "middle"
+  }, React.createElement(Col, {
+    span: 24,
+    className: styles.filterTopWrapper
+  }, React.createElement("div", {
+    className: styles.filterTopInfo
+  }, React.createElement("div", {
+    className: styles.filterTopTitle
+  }, React.createElement(Title$1, {
+    level: 5
+  }, props.title)), React.createElement("div", {
+    className: styles.filterTagsWrapper
+  }, props.filterTag && props.filterTag.length > 0 && React.createElement(OdsFilterTagView, {
+    preparedFilterTextViewJson: props.filterTag
+  }))), React.createElement(ConfigProvider, {
+    theme: {
+      components: {
+        Button: {
+          borderRadiusLG: 6
+        }
+      }
+    }
+  }, React.createElement("div", {
+    className: styles.filterTopActions
+  }, hasAdvancedFilters && React.createElement(OdsButton, {
+    title: "Advanced Search",
+    className: advancedFilterStyles.advancedFilterButton,
+    size: "medium",
+    type: "link",
+    icon: showAdvanceFilter ? React.createElement(UpArrow5Icon, {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 24 24"
+    }) : React.createElement(DownArrow5Icon, {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 24 24"
+    }),
+    onClick: handleHideShowAdvancedFilter
+  }, props.buttonAdvancedSearchName), props.savedFilter, React.createElement(OdsButton, {
+    className: styles.toggleButton,
+    size: "large",
+    type: "default",
+    icon: showFilter ? React.createElement(UpArrow5Icon, {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 24 24"
+    }) : React.createElement(DownArrow5Icon, {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 24 24"
+    }),
+    onClick: handleHideShowFilter
+  }))))), React.createElement("div", {
+    className: styles.filterBodyWrapper
+  }, React.createElement("div", {
+    className: styles.filterBody
+  }, hasTabFilter && React.createElement("div", {
+    className: styles.filterInlineDisplayWrapper
+  }, React.createElement(FilterTabsContainer, null), React.createElement("div", {
+    className: advancedFilterStyles.advancedFilterRowWrapper,
+    ref: advancedRef
+  }, React.createElement("div", {
+    className: advancedFilterStyles.advancedFilterRow
+  }, React.createElement(Row, {
+    gutter: [12, 16]
+  }, advanceFilterTabsRows.current.map(function (item, index) {
+    return React.createElement(Col, Object.assign({
+      key: index
+    }, item.colSize || defaultColSize({})), item.element);
+  })))), shouldDisplayButtonsInline && React.createElement(ActionButtons, null)), hasFilterRow && !hasTabFilter && React.createElement("div", {
+    className: styles.filterInlineDisplayWrapper
+  }, React.createElement(FilterList, {
+    isDisplayInline: shouldDisplayButtonsInline
+  }), shouldDisplayButtonsInline && React.createElement(ActionButtons, null)), hasAdvancedFilters && !hasTabFilter && React.createElement("div", {
+    className: advancedFilterStyles.advancedFilterRowWrapper,
+    ref: advancedRef
+  }, React.createElement("div", {
+    className: advancedFilterStyles.advancedFilterRow
+  }, React.createElement(Row, {
+    gutter: [12, 16]
+  }, advanceFilterRow === null || advanceFilterRow === void 0 ? void 0 : advanceFilterRow.map(function (item, index) {
+    return React.createElement(Col, Object.assign({
+      key: index
+    }, item.colSize || defaultColSize({})), item.element);
+  })))), !shouldDisplayButtonsInline && React.createElement("div", {
+    className: styles.filterActionButtonsWrapper
+  }, React.createElement(ActionButtons, null)))))));
+};
+
 var Text = Typography.Text;
 function OdsFileUpload(props) {
   var image = props.image,
@@ -33070,12 +33441,12 @@ var OdsDataGrdiRowButton = function OdsDataGrdiRowButton(_ref) {
   }), children)));
 };
 
-var _templateObject$q, _templateObject2$2;
-var useStyles$1 = createStyles(function (_ref) {
+var _templateObject$r, _templateObject2$3;
+var useStyles$2 = createStyles(function (_ref) {
   var css = _ref.css;
   return {
-    grid: css(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n    & .grid-cell-selected {\n      background-color: lightgreen;\n    }\n    & .grid-cell-disable-text-selection {\n      -webkit-touch-callout: none;\n      -webkit-user-select: none;\n      -khtml-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n    & .grid-cell-disable-colored {\n      background-color: lightgray;\n    }\n    & .grid-summary-row-label {\n      font-weight: 900;\n      /* border-bottom: 1px solid lightgray; */\n    }\n    & .grid-summary-row-data {\n      /* border-bottom: 1px solid lightgray; */\n    }\n    & .grid-toolbar-button-item {\n      padding: 0 !important;\n    }\n  "]))),
-    gridCustomSummary: css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n  background-color: rgb(255, 255, 255);\n  border-radius: 0px 0px 16px 16px;\n  font-size: 13px;\n  text-align: unset;\n  padding: 17px 16px 3px 15px;\n  font-weight: 600;\n  border-top: 1px solid #ededed;\n"])))
+    grid: css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n    & .grid-cell-selected {\n      background-color: lightgreen;\n    }\n    & .grid-cell-disable-text-selection {\n      -webkit-touch-callout: none;\n      -webkit-user-select: none;\n      -khtml-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n    & .grid-cell-disable-colored {\n      background-color: lightgray;\n    }\n    & .grid-summary-row-label {\n      font-weight: 900;\n      /* border-bottom: 1px solid lightgray; */\n    }\n    & .grid-summary-row-data {\n      /* border-bottom: 1px solid lightgray; */\n    }\n    & .grid-toolbar-button-item {\n      padding: 0 !important;\n    }\n  "]))),
+    gridCustomSummary: css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  background-color: rgb(255, 255, 255);\n  border-radius: 0px 0px 16px 16px;\n  font-size: 13px;\n  text-align: unset;\n  padding: 17px 16px 3px 15px;\n  font-weight: 600;\n  border-top: 1px solid #ededed;\n"])))
   };
 });
 
@@ -33452,7 +33823,7 @@ var OdsBasicDataGrid = function OdsBasicDataGrid(props) {
   var _useState12 = useState(false),
     searchPanelApplied = _useState12[0],
     setSearchPanelApplied = _useState12[1];
-  var _useStyles = useStyles$1(),
+  var _useStyles = useStyles$2(),
     gridStyle = _useStyles.styles;
   useEffect(function () {
     constants.totalPageCount = 1;
@@ -34824,12 +35195,12 @@ var OdsTransfer = function OdsTransfer(props) {
   }));
 };
 
-var _templateObject$r, _templateObject2$3;
-var useStyles$2 = createStyles(function (_ref) {
+var _templateObject$s, _templateObject2$4;
+var useStyles$3 = createStyles(function (_ref) {
   var css = _ref.css;
   return {
-    grid: css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n    & .grid-cell-selected {\n      background-color: lightgreen;\n    }\n    & .grid-cell-disable-text-selection {\n      -webkit-touch-callout: none;\n      -webkit-user-select: none;\n      -khtml-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n    & .grid-cell-disable-colored {\n      background-color: lightgray;\n    }\n    & .grid-summary-row-label {\n      font-weight: 900;\n    }\n\n    & .grid-toolbar-button-item {\n      padding: 0 !important;\n    }\n\n    & .dx-datagrid.dx-gridbase-container.dx-datagrid-borders {\n      border: none !important;\n      border-radius: 16px 16px 0 0;\n    }\n    & .dx-datagrid-borders > .dx-datagrid-filter-panel,\n    & .dx-datagrid-borders > .dx-datagrid-headers {\n      border: 0 !important;\n    }\n    & .dx-datagrid-search-panel {\n      margin-left: 0;\n    }\n    & .dx-toolbar-after .dx-toolbar-item,\n    & .dx-toolbar-after .dx-toolbar-item:last-child {\n      padding: 0;\n    }\n    & .dx-toolbar .dx-toolbar-after {\n      display: inline-flex;\n      flex-flow: row-reverse;\n      gap: 5px;\n    }\n  "]))),
-    gridCustomSummary: css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n    background-color: rgb(255, 255, 255);\n    border-radius: 0px 0px 16px 16px;\n    font-size: 13px;\n    text-align: unset;\n    padding: 17px 16px 3px 15px;\n    font-weight: 600;\n    border-top: 1px solid #ededed;\n  "])))
+    grid: css(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n    & .grid-cell-selected {\n      background-color: lightgreen;\n    }\n    & .grid-cell-disable-text-selection {\n      -webkit-touch-callout: none;\n      -webkit-user-select: none;\n      -khtml-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n    & .grid-cell-disable-colored {\n      background-color: lightgray;\n    }\n    & .grid-summary-row-label {\n      font-weight: 900;\n    }\n\n    & .grid-toolbar-button-item {\n      padding: 0 !important;\n    }\n\n    & .dx-datagrid.dx-gridbase-container.dx-datagrid-borders {\n      border: none !important;\n      border-radius: 16px 16px 0 0;\n    }\n    & .dx-datagrid-borders > .dx-datagrid-filter-panel,\n    & .dx-datagrid-borders > .dx-datagrid-headers {\n      border: 0 !important;\n    }\n    & .dx-datagrid-search-panel {\n      margin-left: 0;\n    }\n    & .dx-toolbar-after .dx-toolbar-item,\n    & .dx-toolbar-after .dx-toolbar-item:last-child {\n      padding: 0;\n    }\n    & .dx-toolbar .dx-toolbar-after {\n      display: inline-flex;\n      flex-flow: row-reverse;\n      gap: 5px;\n    }\n  "]))),
+    gridCustomSummary: css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n    background-color: rgb(255, 255, 255);\n    border-radius: 0px 0px 16px 16px;\n    font-size: 13px;\n    text-align: unset;\n    padding: 17px 16px 3px 15px;\n    font-weight: 600;\n    border-top: 1px solid #ededed;\n  "])))
   };
 });
 
@@ -34855,7 +35226,7 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
     updateTrigger = _useState6[0],
     setUpdateTrigger = _useState6[1];
   var lastPageIndexRef = useRef(null);
-  var _useStyles = useStyles$2(),
+  var _useStyles = useStyles$3(),
     gridStyle = _useStyles.styles;
   useEffect(function () {}, [updateTrigger, totalUnfilteredCount, totalFilteredCount, filterApplied]);
   var renderTotal = useCallback(function () {
@@ -35210,20 +35581,20 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
   }, React.createElement("p", null, renderTotal())));
 };
 
-var _templateObject$s, _templateObject2$4, _templateObject3$2, _templateObject4$1, _templateObject5$1;
-var useStyles$3 = createStyles(function (_ref) {
+var _templateObject$t, _templateObject2$5, _templateObject3$3, _templateObject4$2, _templateObject5$2;
+var useStyles$4 = createStyles(function (_ref) {
   var css = _ref.css;
   return {
-    grid: css(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n    & .grid-cell-selected {\n      background-color: lightgreen;\n    }\n    & .grid-cell-disable-text-selection {\n      -webkit-touch-callout: none;\n      -webkit-user-select: none;\n      -khtml-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n    & .grid-cell-disable-colored {\n      background-color: lightgray;\n    }\n    & .grid-summary-row-label {\n      font-weight: 900;\n    }\n\n    & .grid-toolbar-button-item {\n      padding: 0 !important;\n    }\n\n    & .dx-datagrid.dx-gridbase-container.dx-datagrid-borders {\n      border: none !important;\n      border-radius: 16px 16px 0 0;\n    }\n    & .dx-datagrid-borders > .dx-datagrid-filter-panel,\n    & .dx-datagrid-borders > .dx-datagrid-headers {\n      border: 0 !important;\n    }\n    & .dx-datagrid-search-panel {\n      margin-left: 0;\n    }\n    & .dx-toolbar-after .dx-toolbar-item,\n    & .dx-toolbar-after .dx-toolbar-item:last-child {\n      padding: 0;\n    }\n    & .dx-toolbar .dx-toolbar-after {\n      display: inline-flex;\n      gap: 5px;\n    }\n    .dx-datagrid-borders > .dx-datagrid-headers,\n    .dx-datagrid-borders > .dx-datagrid-rowsview,\n    .dx-datagrid-borders > .dx-datagrid-total-footer {\n      border-radius: 0;\n    }\n\n    .dx-datagrid-headers .dx-datagrid-table .dx-row > td:not(.dx-command-select) {\n      text-align: start !important;\n    }\n\n    & .dx-column-indicators {\n      float: right !important;\n    }\n\n    .dx-header-row .dx-header-filter-indicator.dx-text-content-alignment-right, .dx-header-row .dx-sort-indicator.dx-text-content-alignment-right {\n      margin-right: 3px;\n      margin-left: unset;\n    }\n  "]))),
-    gridCustomSummary: css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n    background-color: rgb(255, 255, 255);\n    border-radius: 0px 0px 16px 16px;\n    font-size: 13px;\n    text-align: unset;\n    padding: 17px 16px 3px 15px;\n    font-weight: 600;\n    border-top: 1px solid #ededed;\n  "])))
+    grid: css(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n    & .grid-cell-selected {\n      background-color: lightgreen;\n    }\n    & .grid-cell-disable-text-selection {\n      -webkit-touch-callout: none;\n      -webkit-user-select: none;\n      -khtml-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n    & .grid-cell-disable-colored {\n      background-color: lightgray;\n    }\n    & .grid-summary-row-label {\n      font-weight: 900;\n    }\n\n    & .grid-toolbar-button-item {\n      padding: 0 !important;\n    }\n\n    & .dx-datagrid.dx-gridbase-container.dx-datagrid-borders {\n      border: none !important;\n      border-radius: 16px 16px 0 0;\n    }\n    & .dx-datagrid-borders > .dx-datagrid-filter-panel,\n    & .dx-datagrid-borders > .dx-datagrid-headers {\n      border: 0 !important;\n    }\n    & .dx-datagrid-search-panel {\n      margin-left: 0;\n    }\n    & .dx-toolbar-after .dx-toolbar-item,\n    & .dx-toolbar-after .dx-toolbar-item:last-child {\n      padding: 0;\n    }\n    & .dx-toolbar .dx-toolbar-after {\n      display: inline-flex;\n      gap: 5px;\n    }\n    .dx-datagrid-borders > .dx-datagrid-headers,\n    .dx-datagrid-borders > .dx-datagrid-rowsview,\n    .dx-datagrid-borders > .dx-datagrid-total-footer {\n      border-radius: 0;\n    }\n\n    .dx-datagrid-headers .dx-datagrid-table .dx-row > td:not(.dx-command-select) {\n      text-align: start !important;\n    }\n\n    & .dx-column-indicators {\n      float: right !important;\n    }\n\n    .dx-header-row .dx-header-filter-indicator.dx-text-content-alignment-right, .dx-header-row .dx-sort-indicator.dx-text-content-alignment-right {\n      margin-right: 3px;\n      margin-left: unset;\n    }\n  "]))),
+    gridCustomSummary: css(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n    background-color: rgb(255, 255, 255);\n    border-radius: 0px 0px 16px 16px;\n    font-size: 13px;\n    text-align: unset;\n    padding: 17px 16px 3px 15px;\n    font-weight: 600;\n    border-top: 1px solid #ededed;\n  "])))
   };
 });
 var usePageTitleAndToolbarStyles = createStyles(function (_ref2) {
   var css = _ref2.css;
   return {
-    gridPageTitleWrapper: css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 10px;\n  "]))),
-    gridToolbarButtonGroupWrapper: css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n    display: flex;\n    align-items: center;\n  "]))),
-    gridToolbarButton: css(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n    margin-left: 10px;\n  "])))
+    gridPageTitleWrapper: css(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 10px;\n  "]))),
+    gridToolbarButtonGroupWrapper: css(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n    display: flex;\n    align-items: center;\n  "]))),
+    gridToolbarButton: css(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n    margin-left: 10px;\n  "])))
   };
 });
 
@@ -35496,7 +35867,7 @@ var OdsInlineEditDataGrid = function OdsInlineEditDataGrid(props) {
     onOptionChangedFromProps = props.onOptionChanged,
     onExportingFromProps = props.onExporting,
     AllGridOptions = _objectWithoutPropertiesLoose(props, _excluded$5);
-  var _useStyles = useStyles$3(),
+  var _useStyles = useStyles$4(),
     gridStyle = _useStyles.styles;
   var _useState = useState(0),
     currentPage = _useState[0],
@@ -35653,15 +36024,15 @@ var OdsInlineEditDataGrid = function OdsInlineEditDataGrid(props) {
   }, React.createElement("p", null, renderTotal())));
 };
 
-var _templateObject$t, _templateObject2$5;
-var useStyles$4 = createStyles(function (_ref) {
+var _templateObject$u, _templateObject2$6;
+var useStyles$5 = createStyles(function (_ref) {
   var token = _ref.token,
     css = _ref.css,
     cx = _ref.cx;
   return {
-    Wrapper: cx('relative', css(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n            & .ant-card {\n                border-radius: ", "px;\n                & > .ant-card-body {\n                        padding: ", "px;\n                    }\n            }\n        "])), token.borderRadiusLG * 2, token.padding)),
+    Wrapper: cx('relative', css(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n            & .ant-card {\n                border-radius: ", "px;\n                & > .ant-card-body {\n                        padding: ", "px;\n                    }\n            }\n        "])), token.borderRadiusLG * 2, token.padding)),
     Colls: cx('relative z-10'),
-    ButtonWrapper: cx('absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 flex justify-center items-center bg-white', css(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n                border-radius: ", "px;\n            "])), token.borderRadius))
+    ButtonWrapper: cx('absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 flex justify-center items-center bg-white', css(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n                border-radius: ", "px;\n            "])), token.borderRadius))
   };
 });
 
@@ -35673,7 +36044,7 @@ var OdsChange = function OdsChange(props) {
   var _useState2 = useState(null),
     selectedItemsRight = _useState2[0],
     setSelectedItemsRight = _useState2[1];
-  var _useStyles = useStyles$4(),
+  var _useStyles = useStyles$5(),
     styles = _useStyles.styles;
   var addOrUpdateSelectedItem = useCallback(function (newItem, key, section, type) {
     var updateItem = function updateItem(prevItems) {
@@ -35901,8 +36272,8 @@ var OdsChange = function OdsChange(props) {
 };
 var OdsChange$1 = React.memo(OdsChange);
 
-var _templateObject$u;
-var StyledProgress = styled(Progress)(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n //\n .ant-progress-bg {\n    ", "\n  }\n"])), function (props) {
+var _templateObject$v;
+var StyledProgress = styled(Progress)(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n //\n .ant-progress-bg {\n    ", "\n  }\n"])), function (props) {
   return props.strokeLinecap === 'square' && 'border-radius: 8px 0px 0px 8px !important;';
 });
 
@@ -36263,15 +36634,15 @@ function OdsFileUploadv2(props) {
   }, renderPreviewContent(previewFileName, previewImage))));
 }
 
-var _templateObject$v;
-var useStyles$5 = createStyles(function (_ref) {
+var _templateObject$w;
+var useStyles$6 = createStyles(function (_ref) {
   var css = _ref.css;
   return {
-    Wrapper: css(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n        width: 100%;\n    "])))
+    Wrapper: css(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n        width: 100%;\n    "])))
   };
 });
 function OdsTreeSelect(props) {
-  var _useStyles = useStyles$5(),
+  var _useStyles = useStyles$6(),
     styles = _useStyles.styles;
   return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
     theme: lightTheme
@@ -36310,11 +36681,11 @@ var CurrencySelect = function CurrencySelect(_ref) {
 };
 
 var _excluded$7 = ["currencySelectProps", "defaultValue", "locale", "dontFormatValue", "min"];
-var _templateObject$w;
-var useStyles$6 = createStyles(function (_ref) {
+var _templateObject$x;
+var useStyles$7 = createStyles(function (_ref) {
   var css = _ref.css;
   return {
-    Wrapper: css(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n        width: 100%;\n    "])))
+    Wrapper: css(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n        width: 100%;\n    "])))
   };
 });
 var OdsCurrencyInput = function OdsCurrencyInput(_ref2) {
@@ -36327,7 +36698,7 @@ var OdsCurrencyInput = function OdsCurrencyInput(_ref2) {
     _ref2$min = _ref2.min,
     min = _ref2$min === void 0 ? 0 : _ref2$min,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded$7);
-  var _useStyles = useStyles$6(),
+  var _useStyles = useStyles$7(),
     styles = _useStyles.styles;
   var defaultCurrency = useMemo(function () {
     var _currencySelectProps$;
@@ -38028,5 +38399,5 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   })));
 };
 
-export { DxTreeList, OdsAlert, OdsAutoComplete, OdsBadge, OdsBadgeRibbon, OdsBannerAlert, OdsBasicDataGrid, OdsBasicTable, OdsButton, OdsCalendar, OdsCard, OdsChange$1 as OdsChange, OdsCheckbox, OdsCheckboxGroup, OdsCollapse, OdsCurrencyInput, OdsDataGrid, OdsDateRangePicker, OdsDatepicker, OdsDisplayGrid, OdsDivider, OdsDropdown, OdsDropdownButton, OdsFileUpload, OdsFileUploadv2, OdsFilter, OdsFilter as OdsFilterPlus, OdsFilterTagView, OdsImage, OdsInlineEditDataGrid, OdsInput, OdsInputNumber, OdsLink, OdsList, MasterDetailDataGrid as OdsMasterDetailDataGrid, OdsModal, OdsModalOld, OdsMultiSelect, OdsNotification, OdsParagraph, OdsPassword, OdsPhoneInput, OdsProgress, OdsRadio, OdsRadioGroup, OdsRangeTimepicker, OdsRate, OdsRemoteDataGrid, OdsSearch, OdsSelect, OdsSelectableTable, OdsServerSideDatagrid, OdsSpin, OdsSwitch, OdsTab, OdsBasicTable as OdsTable, OdsTag, OdsText, OdsTextArea, OdsTimeline, OdsTimepicker, OdsTitle, OdsTransfer, OdsTreeSelect };
+export { DxTreeList, OdsAlert, OdsAutoComplete, OdsBadge, OdsBadgeRibbon, OdsBannerAlert, OdsBasicDataGrid, OdsBasicTable, OdsButton, OdsCalendar, OdsCard, OdsChange$1 as OdsChange, OdsCheckbox, OdsCheckboxGroup, OdsCollapse, OdsCurrencyInput, OdsDataGrid, OdsDateRangePicker, OdsDatepicker, OdsDisplayGrid, OdsDivider, OdsDropdown, OdsDropdownButton, OdsFileUpload, OdsFileUploadv2, OdsFilter, OdsFilterPlus, OdsFilterTagView, OdsImage, OdsInlineEditDataGrid, OdsInput, OdsInputNumber, OdsLink, OdsList, MasterDetailDataGrid as OdsMasterDetailDataGrid, OdsModal, OdsModalOld, OdsMultiSelect, OdsNotification, OdsParagraph, OdsPassword, OdsPhoneInput, OdsProgress, OdsRadio, OdsRadioGroup, OdsRangeTimepicker, OdsRate, OdsRemoteDataGrid, OdsSearch, OdsSelect, OdsSelectableTable, OdsServerSideDatagrid, OdsSpin, OdsSwitch, OdsTab, OdsBasicTable as OdsTable, OdsTag, OdsText, OdsTextArea, OdsTimeline, OdsTimepicker, OdsTitle, OdsTransfer, OdsTreeSelect };
 //# sourceMappingURL=index.modern.js.map