@unifiedsoftware/react-components 1.0.9 → 1.0.11

package/dist/index.js

@@ -1,10 +1,27 @@
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value2) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value: value2 }) : obj[key] = value2;
+var __spreadValues = (a, b) => {
+  for (var prop2 in b || (b = {}))
+    if (__hasOwnProp.call(b, prop2))
+      __defNormalProp(a, prop2, b[prop2]);
+  if (__getOwnPropSymbols)
+    for (var prop2 of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop2))
+        __defNormalProp(a, prop2, b[prop2]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -51,8 +68,10 @@ __export(src_exports, {
   MenuItems: () => MenuItem,
   MenuOptions: () => MenuOptions,
   MenuTitle: () => MenuTitle,
+  MultiSelect: () => MultiSelect_default,
   NavOptions: () => NavOptions,
   Navbar: () => Navbar,
+  Select: () => Select_default,
   SidebarMainContext: () => SidebarMainContext,
   SidebarMainContextProvider: () => SidebarMainContextProvider,
   SidebarNavigation: () => SidebarNavigation,
@@ -60,10 +79,1063 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/components/DropdownEnumList.tsx
+// ../../../node_modules/@progress/kendo-data-query/dist/es/utils.js
+var isPresent = function(value2) {
+  return value2 !== null && value2 !== void 0;
+};
+var isBlank = function(value2) {
+  return value2 === null || value2 === void 0;
+};
+var isArray = function(value2) {
+  return Array.isArray(value2);
+};
+var isFunction = function(value2) {
+  return typeof value2 === "function";
+};
+var isString = function(value2) {
+  return typeof value2 === "string";
+};
+var isNullOrEmptyString = function(value2) {
+  return isBlank(value2) || value2.trim().length === 0;
+};
+var isNotNullOrEmptyString = function(value2) {
+  return !isNullOrEmptyString(value2);
+};
+var isNumeric = function(value2) {
+  return !isNaN(value2 - parseFloat(value2));
+};
+var isDate = function(value2) {
+  return value2 && value2.getTime;
+};
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/filtering/filter-descriptor.interface.js
+var isCompositeFilterDescriptor = function(source) {
+  return isPresent(source.filters);
+};
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/funcs.js
+var ifElse = function(predicate, right, left) {
+  return function(value2) {
+    return predicate(value2) ? right(value2) : left(value2);
+  };
+};
+var compose = function() {
+  var args = [];
+  for (var _i = 0; _i < arguments.length; _i++) {
+    args[_i] = arguments[_i];
+  }
+  return function(data) {
+    return args.reduceRight(function(acc, curr) {
+      return curr(acc);
+    }, data);
+  };
+};
+var constant = function(x) {
+  return function() {
+    return x;
+  };
+};
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/filter-serialization.common.js
+var toUTC = function(date) {
+  return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
+};
+var isDateValue = function(x) {
+  return isDate(x.value);
+};
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/filtering/filter.operators.js
+var operatorMap = function(key) {
+  return {
+    "!=": "neq",
+    "<": "lt",
+    "<=": "lte",
+    "==": "eq",
+    ">": "gt",
+    ">=": "gte",
+    equal: "eq",
+    equals: "eq",
+    equalto: "eq",
+    ge: "gte",
+    greater: "gt",
+    greaterthan: "gt",
+    greaterthanequal: "gte",
+    isempty: "isempty",
+    isequalto: "eq",
+    isgreaterthan: "gt",
+    isgreaterthanorequalto: "gte",
+    islessthan: "lt",
+    islessthanorequalto: "lte",
+    isnotempty: "isnotempty",
+    isnotequalto: "neq",
+    isnull: "isnull",
+    le: "lte",
+    less: "lt",
+    lessthan: "lt",
+    lessthanequal: "lte",
+    ne: "neq",
+    notequal: "neq",
+    notequals: "neq",
+    notequalto: "neq",
+    notsubstringof: "doesnotcontain"
+  }[key.toLowerCase()] || key;
+};
+var normalizeOperator = function(descriptor) {
+  if (descriptor.filters) {
+    descriptor.filters = descriptor.filters.map(function(filter2) {
+      var result = Object.assign({}, filter2);
+      if (!isCompositeFilterDescriptor(filter2) && isString(filter2.operator)) {
+        result.operator = operatorMap(filter2.operator);
+      }
+      if (isCompositeFilterDescriptor(filter2)) {
+        normalizeOperator(result);
+      }
+      return result;
+    });
+  }
+};
+var normalizeDescriptor = function(descriptor) {
+  if (!isCompositeFilterDescriptor(descriptor)) {
+    return {
+      filters: isArray(descriptor) ? descriptor : [descriptor],
+      logic: "and"
+    };
+  }
+  return Object.assign({}, descriptor);
+};
+var normalizeFilters = function(descriptor) {
+  if (isPresent(descriptor)) {
+    descriptor = normalizeDescriptor(descriptor);
+    normalizeOperator(descriptor);
+  }
+  return descriptor;
+};
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/odata.operators.js
+var emptyString = constant("");
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/accessor.js
+var getterCache = {};
+var FIELD_REGEX = /\[(?:(\d+)|['"](.*?)['"])\]|((?:(?!\[.*?\]|\.).)+)/g;
+getterCache["undefined"] = function(obj) {
+  return obj;
+};
+var getter = function(field, safe) {
+  var key = field + safe;
+  if (getterCache[key]) {
+    return getterCache[key];
+  }
+  var fields = [];
+  field.replace(FIELD_REGEX, function(_, index, indexAccessor, field2) {
+    fields.push(isPresent(index) ? index : indexAccessor || field2);
+    return void 0;
+  });
+  getterCache[key] = function(obj) {
+    var result = obj;
+    for (var idx = 0; idx < fields.length; idx++) {
+      result = result[fields[idx]];
+      if (!isPresent(result) && safe) {
+        return result;
+      }
+    }
+    return result;
+  };
+  return getterCache[key];
+};
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/mvc/operators.js
+var pairwise = function(key) {
+  return function(value2) {
+    return [key, value2];
+  };
+};
+var empty = function() {
+  return null;
+};
+var isNotEmptyArray = function(value2) {
+  return isPresent(value2) && isArray(value2) && value2.length > 0;
+};
+var has = function(accessor) {
+  return function(value2) {
+    return isPresent(accessor(value2));
+  };
+};
+var isNotEmpty = function(accessor) {
+  return function(value2) {
+    return isNotEmptyArray(accessor(value2));
+  };
+};
+var runOrEmpty = function(predicate, fn) {
+  return ifElse(predicate, fn, empty);
+};
+var calcPage = function(_a) {
+  var skip3 = _a.skip, take3 = _a.take;
+  return Math.floor((skip3 || 0) / take3) + 1;
+};
+var formatDescriptors = function(accessor, formatter) {
+  return function(state) {
+    return accessor(state).map(formatter).join("~");
+  };
+};
+var removeAfter = function(what) {
+  return function(str) {
+    return str.slice(0, str.indexOf(what));
+  };
+};
+var replace = function(patterns) {
+  return compose.apply(void 0, patterns.map(function(_a) {
+    var left = _a[0], right = _a[1];
+    return function(s) {
+      return s.replace(new RegExp(left, "g"), right);
+    };
+  }));
+};
+var sanitizeDateLiterals = replace([['"', ""], [":", "-"]]);
+var removeAfterDot = removeAfter(".");
+var directionFormatter = function(_a) {
+  var field = _a.field, _b = _a.dir, dir = _b === void 0 ? "asc" : _b;
+  return field + "-" + dir;
+};
+var aggregateFormatter = function(_a) {
+  var field = _a.field, aggregate = _a.aggregate;
+  return field + "-" + aggregate;
+};
+var take = getter("take");
+var aggregates = getter("aggregates");
+var skip = getter("skip");
+var group = getter("group");
+var sort = getter("sort", true);
+var formatSort = formatDescriptors(sort, directionFormatter);
+var formatGroup = formatDescriptors(group, directionFormatter);
+var formatAggregates = formatDescriptors(aggregates, aggregateFormatter);
+var prefixDateValue = function(value2) {
+  return "datetime'" + value2 + "'";
+};
+var formatDateValue = compose(prefixDateValue, removeAfterDot, sanitizeDateLiterals, JSON.stringify, toUTC);
+var formatDate = function(_a) {
+  var field = _a.field, value2 = _a.value, ignoreCase = _a.ignoreCase, operator = _a.operator;
+  return {
+    value: formatDateValue(value2),
+    field,
+    ignoreCase,
+    operator
+  };
+};
+var normalizeSort = function(state) {
+  return Object.assign({}, state, {
+    sort: (sort(state) || []).filter(function(_a) {
+      var dir = _a.dir;
+      return isNotNullOrEmptyString(dir);
+    })
+  });
+};
+var transformSkip = compose(pairwise("page"), calcPage);
+var transformTake = compose(pairwise("pageSize"), take);
+var transformGroup = compose(pairwise("group"), formatGroup);
+var transformSort = compose(pairwise("sort"), formatSort);
+var transformAggregates = compose(pairwise("aggregate"), formatAggregates);
+var serializePage = runOrEmpty(has(skip), transformSkip);
+var serializePageSize = runOrEmpty(has(take), transformTake);
+var serializeGroup = runOrEmpty(isNotEmpty(group), transformGroup);
+var serializeAggregates = runOrEmpty(has(aggregates), transformAggregates);
+var serializeSort = compose(runOrEmpty(isNotEmpty(sort), transformSort), normalizeSort);
+var filterFormatter = function(_a) {
+  var field = _a.field, operator = _a.operator, value2 = _a.value;
+  return field + "~" + operator + "~" + value2;
+};
+var dateFormatter = ifElse(isDateValue, compose(filterFormatter, formatDate), filterFormatter);
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/mvc/deserialization.js
+var set = function(field, target, value2) {
+  target[field] = value2;
+  return target;
+};
+var toCamelCase = function(str) {
+  return str.replace(/(^[A-Z])/g, function(_, g1) {
+    return g1.toLowerCase();
+  });
+};
+var prop = function(fieldName) {
+  return function(obj) {
+    var value2 = obj[fieldName];
+    if (isPresent(value2)) {
+      return value2;
+    }
+    return obj[toCamelCase(fieldName)];
+  };
+};
+var member = prop("Member");
+var aggregateMethodName = prop("AggregateMethodName");
+var value = prop("Value");
+var convert = function(mapper) {
+  return function(values) {
+    return Object.keys(values).reduce(mapper.bind(null, values), {});
+  };
+};
+var translateAggregate = convert(function(source, acc, field) {
+  return set(field.toLowerCase(), acc, source[field]);
+});
+var translateAggregates = convert(function(source, acc, field) {
+  return set(field, acc, translateAggregate(source[field]));
+});
+var valueOrDefault = function(value2, defaultValue) {
+  return isPresent(value2) ? value2 : defaultValue;
+};
+var normalizeGroup = function(group2) {
+  return {
+    aggregates: group2.Aggregates || group2.aggregates,
+    field: group2.Member || group2.member || group2.field,
+    hasSubgroups: group2.HasSubgroups || group2.hasSubgroups || false,
+    items: group2.Items || group2.items,
+    value: valueOrDefault(group2.Key, valueOrDefault(group2.key, group2.value))
+  };
+};
+var translateGroup = compose(function(_a) {
+  var field = _a.field, hasSubgroups = _a.hasSubgroups, value2 = _a.value, aggregates2 = _a.aggregates, items = _a.items;
+  return {
+    aggregates: translateAggregates(aggregates2),
+    field,
+    items: hasSubgroups ? items.map(translateGroup) : items,
+    value: value2
+  };
+}, normalizeGroup);
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/transducers.js
+var map = function(transform) {
+  return function(reduce) {
+    return function(acc, curr, index) {
+      return reduce(acc, transform(curr, index));
+    };
+  };
+};
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/grouping/aggregate.operators.js
+var identity2 = map(function(x) {
+  return x;
+});
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/filtering/filter-no-eval.js
+var logic = {
+  "or": {
+    concat: function(acc, fn) {
+      return function(a) {
+        return acc(a) || fn(a);
+      };
+    },
+    identity: function() {
+      return false;
+    }
+  },
+  "and": {
+    concat: function(acc, fn) {
+      return function(a) {
+        return acc(a) && fn(a);
+      };
+    },
+    identity: function() {
+      return true;
+    }
+  }
+};
+var operatorsMap = {
+  contains: function(a, b) {
+    return (a || "").indexOf(b) >= 0;
+  },
+  doesnotcontain: function(a, b) {
+    return (a || "").indexOf(b) === -1;
+  },
+  doesnotendwith: function(a, b) {
+    return (a || "").indexOf(b, (a || "").length - (b || "").length) < 0;
+  },
+  doesnotstartwith: function(a, b) {
+    return (a || "").lastIndexOf(b, 0) === -1;
+  },
+  endswith: function(a, b) {
+    return (a || "").indexOf(b, (a || "").length - (b || "").length) >= 0;
+  },
+  eq: function(a, b) {
+    return a === b;
+  },
+  gt: function(a, b) {
+    return a > b;
+  },
+  gte: function(a, b) {
+    return a >= b;
+  },
+  isempty: function(a) {
+    return a === "";
+  },
+  isnotempty: function(a) {
+    return a !== "";
+  },
+  isnotnull: function(a) {
+    return isPresent(a);
+  },
+  isnull: function(a) {
+    return isBlank(a);
+  },
+  lt: function(a, b) {
+    return a < b;
+  },
+  lte: function(a, b) {
+    return a <= b;
+  },
+  neq: function(a, b) {
+    return a != b;
+  },
+  startswith: function(a, b) {
+    return (a || "").lastIndexOf(b, 0) === 0;
+  }
+};
+var dateRegExp = /^\/Date\((.*?)\)\/$/;
+var convertValue = function(value2, ignoreCase) {
+  if (value2 != null && isString(value2)) {
+    var date = dateRegExp.exec(value2);
+    if (date) {
+      return (/* @__PURE__ */ new Date(+date[1])).getTime();
+    } else if (ignoreCase) {
+      return value2.toLowerCase();
+    }
+  } else if (value2 != null && isDate(value2)) {
+    return value2.getTime();
+  }
+  return value2;
+};
+var typedGetter = function(prop2, value2, ignoreCase) {
+  if (!isPresent(value2)) {
+    return prop2;
+  }
+  var acc = prop2;
+  if (isString(value2)) {
+    var date = dateRegExp.exec(value2);
+    if (date) {
+      value2 = /* @__PURE__ */ new Date(+date[1]);
+    } else {
+      acc = function(a) {
+        var x = prop2(a);
+        if (typeof x === "string" && ignoreCase) {
+          return x.toLowerCase();
+        } else {
+          return isNumeric(x) ? x + "" : x;
+        }
+      };
+    }
+  }
+  if (isDate(value2)) {
+    return function(a) {
+      var x = acc(a);
+      return isDate(x) ? x.getTime() : x;
+    };
+  }
+  return acc;
+};
+var transformFilter = function(_a) {
+  var field = _a.field, ignoreCase = _a.ignoreCase, value2 = _a.value, operator = _a.operator;
+  field = !isPresent(field) ? function(a) {
+    return a;
+  } : field;
+  ignoreCase = isPresent(ignoreCase) ? ignoreCase : true;
+  var itemProp = typedGetter(isFunction(field) ? field : getter(field, true), value2, ignoreCase);
+  value2 = convertValue(value2, ignoreCase);
+  var op = isFunction(operator) ? operator : operatorsMap[operator];
+  return function(a) {
+    return op(itemProp(a), value2, ignoreCase);
+  };
+};
+var transformCompositeFilter = function(filter2) {
+  var combiner = logic[filter2.logic];
+  return filter2.filters.filter(isPresent).map(function(x) {
+    return isCompositeFilterDescriptor(x) ? transformCompositeFilter(x) : transformFilter(x);
+  }).reduce(combiner.concat, combiner.identity);
+};
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/filtering/filter-expression.factory.js
+var compileFilter = function(descriptor) {
+  if (!descriptor || descriptor.filters.length === 0) {
+    return function() {
+      return true;
+    };
+  }
+  return transformCompositeFilter(descriptor);
+};
+var filterBy = function(data, descriptor) {
+  if (!isPresent(descriptor) || isCompositeFilterDescriptor(descriptor) && descriptor.filters.length === 0) {
+    return data;
+  }
+  return data.filter(compileFilter(normalizeFilters(descriptor)));
+};
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/grouping/group.operators.js
+var identity3 = map(function(x) {
+  return x;
+});
+
+// ../../../node_modules/@progress/kendo-data-query/dist/es/filtering/operators.enum.js
+var FilterOperator;
+(function(FilterOperator2) {
+  FilterOperator2["Contains"] = "contains";
+  FilterOperator2["DoesNotContain"] = "doesnotcontain";
+  FilterOperator2["DoesNotEndWith"] = "doesnotendwith";
+  FilterOperator2["DoesNotStartWith"] = "doesnotstartwith";
+  FilterOperator2["EndsWith"] = "endswith";
+  FilterOperator2["EqualTo"] = "eq";
+  FilterOperator2["GreaterThan"] = "gt";
+  FilterOperator2["GreaterThanOrEqual"] = "gte";
+  FilterOperator2["IsEmpty"] = "isempty";
+  FilterOperator2["IsNotEmpty"] = "isnotempty";
+  FilterOperator2["IsNotNull"] = "isnotnull";
+  FilterOperator2["IsNull"] = "isnull";
+  FilterOperator2["LessThan"] = "lt";
+  FilterOperator2["LessThanOrEqual"] = "lte";
+  FilterOperator2["NotEqualTo"] = "neq";
+  FilterOperator2["StartsWith"] = "startswith";
+})(FilterOperator || (FilterOperator = {}));
+
+// src/components/Select/SelectClient.tsx
 var import_kendo_react_dropdowns = require("@progress/kendo-react-dropdowns");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
+var SelectClient = ({
+  value: valueProp,
+  data: propData,
+  filter: filterProp,
+  keyField: keyField2 = "key",
+  textField: textField3 = "text",
+  placeholder,
+  virtual,
+  filterable,
+  disabled,
+  loading,
+  className,
+  onChange,
+  onFilterChange
+}) => {
+  const [value2, setValue] = (0, import_react.useState)(valueProp);
+  const [filter2, setFilter] = (0, import_react.useState)(filterProp);
+  const handleChange = (event) => {
+    const value3 = event.target.value || null;
+    if (valueProp !== void 0) {
+      onChange(value3);
+    } else {
+      setValue(value3);
+    }
+  };
+  const pageSize3 = virtual == null ? void 0 : virtual.pageSize;
+  const filteredData = (0, import_react.useRef)([]);
+  const [state, setState] = (0, import_react.useState)({
+    skip: 0,
+    total: propData.total,
+    subsetData: propData.items.slice(0, pageSize3)
+  });
+  const handleFilterChange = (event) => {
+    if (pageSize3) {
+      filteredData.current = filterBy(propData.items.slice(), event.filter);
+      const data = filteredData.current.slice(0, pageSize3);
+      setState({
+        subsetData: data,
+        skip: 0,
+        total: filteredData.current.length
+      });
+    }
+    const filter3 = event.filter.value;
+    if (filterProp !== void 0) {
+      onFilterChange == null ? void 0 : onFilterChange(filter3);
+    } else {
+      setFilter(filter3);
+    }
+  };
+  const handlePageChange = (event) => {
+    if (pageSize3) {
+      const skip3 = event.page.skip;
+      const take3 = event.page.take;
+      const newSubsetData = filteredData.current.slice(skip3, skip3 + take3);
+      setState(__spreadProps(__spreadValues({}, state), { subsetData: newSubsetData, skip: skip3 }));
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    if (valueProp !== void 0) {
+      setValue(valueProp);
+    }
+  }, [valueProp]);
+  (0, import_react.useEffect)(() => {
+    setFilter(filterProp);
+  }, [filterProp]);
+  (0, import_react.useEffect)(() => {
+    if (pageSize3) {
+      filteredData.current = propData.items.slice();
+    }
+  }, [propData]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_kendo_react_dropdowns.ComboBox,
+    {
+      value: value2,
+      data: pageSize3 ? state.subsetData : propData.items,
+      placeholder,
+      dataItemKey: keyField2,
+      textField: textField3,
+      filterable,
+      filter: filter2,
+      virtual: pageSize3 ? {
+        total: state.total,
+        pageSize: pageSize3,
+        skip: state.skip
+      } : void 0,
+      disabled,
+      loading,
+      className,
+      onChange: handleChange,
+      onFilterChange: handleFilterChange,
+      onPageChange: handlePageChange
+    }
+  );
+};
+var SelectClient_default = SelectClient;
+
+// src/components/Select/SelectServer.tsx
+var import_kendo_react_dropdowns2 = require("@progress/kendo-react-dropdowns");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var textField = "ContactName";
+var emptyItem = { [textField]: "loading ...", CustomerID: 0 };
+var pageSize = 10;
+var loadingData = [];
+while (loadingData.length < pageSize) {
+  loadingData.push(__spreadValues({}, emptyItem));
+}
+var SelectServer = ({
+  data: dataProp,
+  value: valueProp,
+  keyField: keyField2 = "key",
+  textField: textField3 = "text",
+  placeholder,
+  virtual,
+  filterable,
+  filter: filterProp = "",
+  disabled,
+  loading,
+  className,
+  onChange,
+  onDataChange,
+  onFilterChange,
+  getData,
+  renderItem
+}) => {
+  var _a;
+  const dataCaching = (0, import_react2.useRef)([]);
+  const pendingRequest = (0, import_react2.useRef)();
+  const requestStarted = (0, import_react2.useRef)(false);
+  const emptyItem3 = { [keyField2]: 0, [textField3]: "loading ..." };
+  const [loadingData3, setLoadingData] = (0, import_react2.useState)([]);
+  const [data, setData] = (0, import_react2.useState)(dataProp.items);
+  const [total, setTotal] = (0, import_react2.useState)(0);
+  const [value2, setValue] = (0, import_react2.useState)(valueProp);
+  const [filter2, setFilter] = (0, import_react2.useState)(filterProp);
+  const pageSize3 = (_a = virtual == null ? void 0 : virtual.pageSize) != null ? _a : 10;
+  const skipRef = (0, import_react2.useRef)(0);
+  const resetCach = () => {
+    dataCaching.current.length = 0;
+  };
+  const requestData = (0, import_react2.useCallback)((state) => {
+    const { skip: skip3 } = state;
+    if (requestStarted.current) {
+      clearTimeout(pendingRequest.current);
+      pendingRequest.current = setTimeout(() => {
+        requestData(state);
+      }, 50);
+      return;
+    }
+    requestStarted.current = true;
+    getData(state).then(({ items, total: total2 }) => {
+      items.forEach((item, index) => {
+        dataCaching.current[index + skip3] = item;
+      });
+      if (skip3 === skipRef.current) {
+        setData(items);
+        setTotal(total2);
+        onDataChange == null ? void 0 : onDataChange({ items, total: total2 });
+      }
+      requestStarted.current = false;
+    }).catch(() => {
+      requestStarted.current = false;
+    });
+  }, []);
+  const handleFilterChange = (0, import_react2.useCallback)((event) => {
+    const filter3 = event.filter.value;
+    if (filterProp !== void 0) {
+      onFilterChange == null ? void 0 : onFilterChange(filter3);
+    } else {
+      setFilter(filter3);
+    }
+    resetCach();
+    requestData({ skip: 0, filter: filter3 });
+    setData(loadingData3);
+    skipRef.current = 0;
+  }, []);
+  const shouldRequestData = (0, import_react2.useCallback)((skip3) => {
+    for (let i = 0; i < pageSize3; i++) {
+      if (!dataCaching.current[skip3 + i]) {
+        return true;
+      }
+    }
+    return false;
+  }, []);
+  const getCachedData = (0, import_react2.useCallback)((skip3) => {
+    const data2 = [];
+    for (let i = 0; i < pageSize3; i++) {
+      data2.push(dataCaching.current[i + skip3] || emptyItem3);
+    }
+    return data2;
+  }, []);
+  const pageChange = (0, import_react2.useCallback)(
+    (event) => {
+      if (filter2 !== void 0) {
+        const newSkip = event.page.skip;
+        if (shouldRequestData(newSkip)) {
+          requestData({ skip: newSkip, filter: filter2 });
+        }
+        const data2 = getCachedData(newSkip);
+        setData(data2);
+        skipRef.current = newSkip;
+      }
+    },
+    [getCachedData, requestData, shouldRequestData, filter2]
+  );
+  const handleChange = (0, import_react2.useCallback)((event) => {
+    const value3 = event.target.value;
+    if (value3 && value3[textField3] === emptyItem3[textField3]) {
+      return;
+    }
+    if (valueProp !== void 0) {
+      onChange(value3);
+    } else {
+      setValue(value3);
+    }
+  }, []);
+  const handleItemRender = (li, itemProps) => {
+    const itemChildren = renderItem == null ? void 0 : renderItem(itemProps.dataItem);
+    if (!itemChildren)
+      return (0, import_react2.cloneElement)(li, li.props);
+    return (0, import_react2.cloneElement)(li, li.props, itemChildren);
+  };
+  (0, import_react2.useEffect)(() => {
+    const pageSize4 = 10;
+    const loadingData4 = [];
+    while (loadingData4.length < pageSize4) {
+      loadingData4.push(emptyItem3);
+    }
+    setLoadingData(loadingData4);
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (valueProp !== void 0) {
+      setValue(valueProp);
+    }
+  }, [valueProp]);
+  (0, import_react2.useEffect)(() => {
+    if (filterProp !== void 0) {
+      setFilter(filterProp);
+    }
+  }, [filterProp]);
+  (0, import_react2.useEffect)(() => {
+    requestData({ skip: 0, filter: filter2 });
+    return () => {
+      resetCach();
+    };
+  }, [filter2, requestData]);
+  (0, import_react2.useEffect)(() => {
+    setData(dataProp.items);
+  }, [dataProp]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_kendo_react_dropdowns2.ComboBox,
+    {
+      data,
+      value: value2,
+      placeholder,
+      dataItemKey: keyField2,
+      textField: textField3,
+      filterable,
+      onFilterChange: handleFilterChange,
+      virtual: {
+        pageSize: pageSize3,
+        skip: skipRef.current,
+        total
+      },
+      disabled,
+      loading,
+      className,
+      onChange: handleChange,
+      onPageChange: pageChange,
+      itemRender: handleItemRender
+    }
+  );
+};
+var SelectServer_default = SelectServer;
+
+// src/components/Select/Select.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Select = (props) => {
+  return props.filterMode === "client" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectClient_default, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectServer_default, __spreadValues({}, props));
+};
+var Select_default = Select;
+
+// src/components/MultiSelect/MultiSelectClient.tsx
+var import_kendo_react_dropdowns3 = require("@progress/kendo-react-dropdowns");
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var textField2 = "text";
+var keyField = "key";
+var emptyItem2 = { [textField2]: "loading ...", [keyField]: 0 };
+var pageSize2 = 10;
+var loadingData2 = [];
+while (loadingData2.length < pageSize2) {
+  loadingData2.push(__spreadValues({}, emptyItem2));
+}
+var SelectClient2 = ({
+  data: dataProp,
+  value: valueProp,
+  keyField: keyField2 = "key",
+  textField: textField3 = "text",
+  placeholder,
+  virtual,
+  filterable,
+  filter: filterProp,
+  disabled,
+  loading,
+  className,
+  onChange,
+  onFilterChange
+}) => {
+  const [value2, setValue] = (0, import_react3.useState)(valueProp);
+  const [filter2, setFilter] = (0, import_react3.useState)(filterProp);
+  const handleChange = (event) => {
+    onChange(event.target.value);
+  };
+  const pageSize3 = virtual == null ? void 0 : virtual.pageSize;
+  const filteredData = (0, import_react3.useRef)([]);
+  const [state, setState] = (0, import_react3.useState)({
+    skip: 0,
+    total: dataProp.total,
+    subsetData: dataProp.items.slice(0, pageSize3)
+  });
+  const handleFilterChange = (event) => {
+    if (pageSize3) {
+      filteredData.current = filterBy(dataProp.items.slice(), event.filter);
+      const data = filteredData.current.slice(0, pageSize3);
+      setState({
+        subsetData: data,
+        skip: 0,
+        total: filteredData.current.length
+      });
+    }
+    onFilterChange == null ? void 0 : onFilterChange(event.filter.value);
+  };
+  const pageChange = (event) => {
+    if (pageSize3) {
+      const skip3 = event.page.skip;
+      const take3 = event.page.take;
+      const newSubsetData = filteredData.current.slice(skip3, skip3 + take3);
+      setState(__spreadProps(__spreadValues({}, state), { subsetData: newSubsetData, skip: skip3 }));
+    }
+  };
+  (0, import_react3.useEffect)(() => {
+    setValue(valueProp);
+  }, [valueProp]);
+  (0, import_react3.useEffect)(() => {
+    setFilter(filterProp);
+  }, [filterProp]);
+  (0, import_react3.useEffect)(() => {
+    if (pageSize3) {
+      filteredData.current = dataProp.items.slice();
+    }
+  }, [dataProp]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_kendo_react_dropdowns3.MultiSelect,
+    {
+      value: value2,
+      data: pageSize3 ? state.subsetData : dataProp.items,
+      placeholder,
+      dataItemKey: keyField2,
+      textField: textField3,
+      filterable,
+      filter: filter2,
+      virtual: pageSize3 ? {
+        total: state.total,
+        pageSize: pageSize3,
+        skip: state.skip
+      } : void 0,
+      disabled,
+      loading,
+      className,
+      onChange: handleChange,
+      onFilterChange: handleFilterChange,
+      onPageChange: pageChange
+    }
+  );
+};
+var MultiSelectClient_default = SelectClient2;
+
+// src/components/MultiSelect/MultiSelectServer.tsx
+var import_kendo_react_dropdowns4 = require("@progress/kendo-react-dropdowns");
+var import_react4 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var MultiSelectServer = ({
+  data: dataProp,
+  value: valueProp,
+  keyField: keyField2 = "key",
+  textField: textField3 = "text",
+  placeholder,
+  virtual,
+  filterable,
+  filter: filterProp = "",
+  disabled,
+  loading,
+  className,
+  onDataChange,
+  onChange,
+  onFilterChange,
+  getData
+}) => {
+  var _a;
+  const dataCaching = (0, import_react4.useRef)([]);
+  const pendingRequest = (0, import_react4.useRef)();
+  const requestStarted = (0, import_react4.useRef)(false);
+  const emptyItem3 = { [keyField2]: 0, [textField3]: "loading ..." };
+  const [loadingData3, setLoadingData] = (0, import_react4.useState)([]);
+  const [data, setData] = (0, import_react4.useState)(dataProp.items);
+  const [total, setTotal] = (0, import_react4.useState)(0);
+  const [value2, setValue] = (0, import_react4.useState)(valueProp);
+  const [filter2, setFilter] = (0, import_react4.useState)(filterProp);
+  const pageSize3 = (_a = virtual == null ? void 0 : virtual.pageSize) != null ? _a : 10;
+  const skipRef = (0, import_react4.useRef)(0);
+  const resetCach = () => {
+    dataCaching.current.length = 0;
+  };
+  const requestData = (0, import_react4.useCallback)((state) => {
+    if (requestStarted.current) {
+      clearTimeout(pendingRequest.current);
+      pendingRequest.current = setTimeout(() => {
+        requestData(state);
+      }, 50);
+      return;
+    }
+    requestStarted.current = true;
+    getData(state).then(({ items, total: total2 }) => {
+      const { skip: skip3 } = state;
+      items.forEach((item, index) => {
+        dataCaching.current[index + skip3] = item;
+      });
+      if (skip3 === skipRef.current) {
+        setData(items);
+        setTotal(total2);
+        onDataChange == null ? void 0 : onDataChange({ items, total: total2 });
+      }
+      requestStarted.current = false;
+    }).catch(() => {
+      requestStarted.current = false;
+    });
+  }, []);
+  const handleFilterChange = (0, import_react4.useCallback)((event) => {
+    const filter3 = event.filter.value;
+    resetCach();
+    requestData({ skip: 0, filter: filter3 });
+    setData(loadingData3);
+    skipRef.current = 0;
+    setFilter(filter3);
+    onFilterChange == null ? void 0 : onFilterChange(filter3);
+  }, []);
+  const shouldRequestData = (0, import_react4.useCallback)((skip3) => {
+    for (let i = 0; i < pageSize3; i++) {
+      if (!dataCaching.current[skip3 + i]) {
+        return true;
+      }
+    }
+    return false;
+  }, []);
+  const getCachedData = (0, import_react4.useCallback)((skip3) => {
+    const data2 = [];
+    for (let i = 0; i < pageSize3; i++) {
+      data2.push(dataCaching.current[i + skip3] || emptyItem3);
+    }
+    return data2;
+  }, []);
+  const pageChange = (0, import_react4.useCallback)(
+    (event) => {
+      const newSkip = event.page.skip;
+      if (shouldRequestData(newSkip)) {
+        requestData({ skip: newSkip, filter: filter2 });
+      }
+      const data2 = getCachedData(newSkip);
+      setData(data2);
+      skipRef.current = newSkip;
+    },
+    [getCachedData, requestData, shouldRequestData, filter2]
+  );
+  const handleChange = (0, import_react4.useCallback)((event) => {
+    const value3 = event.target.value;
+    if (value3 && value3[textField3] === emptyItem3[textField3]) {
+      return;
+    }
+    setValue(value3);
+    onChange(value3);
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    const pageSize4 = 10;
+    const loadingData4 = [];
+    while (loadingData4.length < pageSize4) {
+      loadingData4.push(emptyItem3);
+    }
+    setLoadingData(loadingData4);
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    setData(dataProp.items);
+  }, [dataProp]);
+  (0, import_react4.useEffect)(() => {
+    setValue(valueProp);
+  }, [valueProp]);
+  (0, import_react4.useEffect)(() => {
+    setFilter(filterProp);
+  }, [filterProp]);
+  (0, import_react4.useEffect)(() => {
+    requestData({ skip: 0, filter: filter2 });
+    return () => {
+      resetCach();
+    };
+  }, [filter2, requestData]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_kendo_react_dropdowns4.MultiSelect,
+    {
+      data,
+      value: value2,
+      placeholder,
+      dataItemKey: keyField2,
+      textField: textField3,
+      filterable,
+      onFilterChange: handleFilterChange,
+      virtual: {
+        pageSize: pageSize3,
+        skip: skipRef.current,
+        total
+      },
+      disabled,
+      loading,
+      className,
+      onChange: handleChange,
+      onPageChange: pageChange
+    }
+  );
+};
+var MultiSelectServer_default = MultiSelectServer;
+
+// src/components/MultiSelect/MultiSelect.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var MultiSelect3 = (props) => {
+  return props.filterMode === "client" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MultiSelectClient_default, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MultiSelectServer_default, __spreadValues({}, props));
+};
+var MultiSelect_default = MultiSelect3;
+
+// src/components/DropdownEnumList.tsx
+var import_kendo_react_dropdowns5 = require("@progress/kendo-react-dropdowns");
+var import_react5 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function parsearDataForComboBox(array, key, text, itemAll = false) {
   const dataForComboBox = [];
   if (itemAll)
@@ -98,16 +1170,16 @@ function EnumToArray(typeEnum, replaceGuionForSpace = true, description) {
   return values;
 }
 var DropEnumList = ({ dataEnum, description, onChange, width, defaultValue }) => {
-  const [value, setValue] = (0, import_react.useState)("");
-  const [data, setData] = (0, import_react.useState)([]);
-  (0, import_react.useEffect)(() => {
+  const [value2, setValue] = (0, import_react5.useState)("");
+  const [data, setData] = (0, import_react5.useState)([]);
+  (0, import_react5.useEffect)(() => {
     setData(
       parsearDataForComboBox(EnumToArray(dataEnum, true, description), "value", "label", false).sort(
         (a, b) => Number(a.key) - Number(b.key)
       )
     );
   }, []);
-  (0, import_react.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (data.length > 0) {
       setValue(data.filter((x) => x.key == defaultValue)[0]);
     }
@@ -116,8 +1188,8 @@ var DropEnumList = ({ dataEnum, description, onChange, width, defaultValue }) =>
     onChange(e);
     setValue(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_kendo_react_dropdowns.DropDownList,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_kendo_react_dropdowns5.DropDownList,
     {
       className: "d-inline-block align-middle mr-2",
       data,
@@ -131,23 +1203,23 @@ var DropEnumList = ({ dataEnum, description, onChange, width, defaultValue }) =>
       style: {
         width: `${width}px`
       },
-      defaultValue: value
+      defaultValue: value2
     }
   ) });
 };
 
 // src/contexts/BreadCrumbContext.tsx
 var import_react_ui = require("@unifiedsoftware/react-ui");
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var BreadCrumbContext = (0, import_react2.createContext)({});
+var import_react6 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var BreadCrumbContext = (0, import_react6.createContext)({});
 var BreadCrumbContextProvider = ({ children }) => {
   const [active, setActive] = (0, import_react_ui.useLocalStorage)("@active", "");
   const [path, setPath] = (0, import_react_ui.useLocalStorage)("@path", "/");
   const [goBack, setGoBack] = (0, import_react_ui.useLocalStorage)("@goBack", false);
   const [pathChild, setPathChild] = (0, import_react_ui.useLocalStorage)("@pathChild", "");
-  const [routes, setRoutes] = (0, import_react2.useState)([]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  const [routes, setRoutes] = (0, import_react6.useState)([]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     BreadCrumbContext.Provider,
     {
       value: {
@@ -168,51 +1240,51 @@ var BreadCrumbContextProvider = ({ children }) => {
 };
 
 // src/contexts/DrawerContext.tsx
-var import_react3 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var DrawerContext = (0, import_react3.createContext)({});
+var import_react7 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var DrawerContext = (0, import_react7.createContext)({});
 var DrawerContextProvider = ({ children }) => {
-  const [active, setActive] = (0, import_react3.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DrawerContext.Provider, { value: { active, setActive }, children });
+  const [active, setActive] = (0, import_react7.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DrawerContext.Provider, { value: { active, setActive }, children });
 };
 
 // src/contexts/HistoryContext.tsx
 var import_react_ui2 = require("@unifiedsoftware/react-ui");
-var import_react4 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var HistoryContext = (0, import_react4.createContext)({});
+var import_react8 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var HistoryContext = (0, import_react8.createContext)({});
 var HistoryContextProvider = ({ children }) => {
   const [list, setList] = (0, import_react_ui2.useLocalStorage)("@list_paths", []);
-  const updateList = (value) => {
+  const updateList = (value2) => {
     setList(
       (prev) => prev.concat({
-        path: value.path,
-        name: value.name,
+        path: value2.path,
+        name: value2.name,
         date: /* @__PURE__ */ new Date()
       })
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HistoryContext.Provider, { value: { list, updateList }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(HistoryContext.Provider, { value: { list, updateList }, children });
 };
 
 // src/contexts/SidebarMainContext.tsx
-var import_react5 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var SidebarMainContext = (0, import_react5.createContext)({});
+var import_react9 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var SidebarMainContext = (0, import_react9.createContext)({});
 var SidebarMainContextProvider = ({ children }) => {
-  const [open, setOpen] = (0, import_react5.useState)(true);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SidebarMainContext.Provider, { value: { open, setOpen }, children });
+  const [open, setOpen] = (0, import_react9.useState)(true);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SidebarMainContext.Provider, { value: { open, setOpen }, children });
 };
 
 // src/contexts/GlobalProvider.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function GlobalProvider({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HistoryContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BreadCrumbContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SidebarMainContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DrawerContextProvider, { children }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HistoryContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BreadCrumbContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarMainContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DrawerContextProvider, { children }) }) }) });
 }
 
 // src/layout/AppBreadcrumb.tsx
 var import_react_router3 = require("@unifiedsoftware/react-router");
-var import_react6 = require("react");
+var import_react10 = require("react");
 var import_md = require("react-icons/md");
 var import_vsc = require("react-icons/vsc");
 
@@ -639,46 +1711,46 @@ var CloseIcon = import_styled_components6.default.button`
 `;
 
 // src/layout/AppBreadcrumb.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var AppBreadCrumb = ({ title, paths }) => {
-  const { setRoutes } = (0, import_react6.useContext)(BreadCrumbContext);
-  (0, import_react6.useEffect)(() => {
+  const { setRoutes } = (0, import_react10.useContext)(BreadCrumbContext);
+  (0, import_react10.useEffect)(() => {
     if (!(paths == null ? void 0 : paths.length))
       return;
     setRoutes(paths != null ? paths : []);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BreadCrumbTitle, { children: title != null ? title : "Home" });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BreadCrumbTitle, { children: title != null ? title : "Home" });
 };
 var AppBreadCrumbNav = ({ paths }) => {
   const router = (0, import_react_router3.useRouter)();
-  const { active, path, routes, setRoutes } = (0, import_react6.useContext)(BreadCrumbContext);
-  const { updateList } = (0, import_react6.useContext)(HistoryContext);
-  (0, import_react6.useEffect)(() => {
+  const { active, path, routes, setRoutes } = (0, import_react10.useContext)(BreadCrumbContext);
+  const { updateList } = (0, import_react10.useContext)(HistoryContext);
+  (0, import_react10.useEffect)(() => {
     updateList({ name: active, path });
   }, [path, active]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setRoutes(paths != null ? paths : []);
   }, [paths]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Breadcrumb, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "d-flex align-items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_router3.Link, { href: "/", className: "link", children: "HOME" }),
-      routes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_vsc.VscChevronRight, { color: "black" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Breadcrumb, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "d-flex align-items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_router3.Link, { href: "/", className: "link", children: "HOME" }),
+      routes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_vsc.VscChevronRight, { color: "black" }),
       routes.length > 0 ? routes.map((i, idx, arr) => {
         if (i.route === -1) {
-          return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "link", onClick: () => router.back(), children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "link", onClick: () => router.back(), children: [
             i.title,
             " ",
-            idx + 1 === arr.length ? "" : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_vsc.VscChevronRight, { color: "black" })
+            idx + 1 === arr.length ? "" : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_vsc.VscChevronRight, { color: "black" })
           ] }, idx);
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_router3.Link, { href: i.route, className: "link", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_router3.Link, { href: i.route, className: "link", children: [
           i.title,
           " ",
-          idx + 1 === arr.length ? "" : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_vsc.VscChevronRight, { color: "black" })
+          idx + 1 === arr.length ? "" : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_vsc.VscChevronRight, { color: "black" })
         ] }, idx);
       }) : ""
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       CloseIcon,
       {
         onClick: () => {
@@ -689,21 +1761,21 @@ var AppBreadCrumbNav = ({ paths }) => {
           }
           router.push(`${routes && routes[(routes == null ? void 0 : routes.length) - 2].route}`);
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_md.MdClose, { fontSize: 20 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_md.MdClose, { fontSize: 20 })
       }
     )
   ] });
 };
 
 // src/layout/AppLoader.tsx
-var import_react7 = require("react");
+var import_react11 = require("react");
 var import_react_dom = __toESM(require("react-dom"));
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var LoaderGrid = () => {
-  const Loader = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "k-loading-mask", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "k-loading-text", children: "Loading" }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "k-loading-image" }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "k-loading-color" })
+  const Loader = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "k-loading-mask", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "k-loading-text", children: "Loading" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "k-loading-image" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "k-loading-color" })
   ] });
   const gridContent = document && document.querySelector(".k-grid-content");
   const reportContent = document && document.querySelector(".loading-report");
@@ -712,12 +1784,12 @@ var LoaderGrid = () => {
 var AppLoader = (props) => {
   const { type = "grid", parent, minDuration } = props;
   const parentEl = type === "grid" ? document.querySelector(parent != null ? parent : ".k-grid-container") : parent ? document.querySelector(parent) : null;
-  const Loading = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `${type}-loading k-loading-mask`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "k-loading-text", children: "Loading" }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "k-loading-image" }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "k-loading-color" })
+  const Loading = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `${type}-loading k-loading-mask`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "k-loading-text", children: "Loading" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "k-loading-image" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "k-loading-color" })
   ] });
-  (0, import_react7.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (type === "button") {
       const loadingEl = document.createElement("div");
       loadingEl.className = "icon button-loading k-loading-mask";
@@ -756,7 +1828,7 @@ var AppLoader = (props) => {
 var import_react_bootstrap = require("react-bootstrap");
 var import_bs = require("react-icons/bs");
 var import_fi = require("react-icons/fi");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var NavOptions = ({
   exportExcel,
   customButtons,
@@ -766,27 +1838,27 @@ var NavOptions = ({
   onClear,
   onExpandScreen
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(MenuOptions, { children: [
-    onCreate && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { className: "button-option", onClick: onCreate, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_fi.FiPlusSquare, { className: "icon" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(MenuOptions, { children: [
+    onCreate && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { className: "button-option", onClick: onCreate, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_fi.FiPlusSquare, { className: "icon" }),
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text", children: "New" })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text", children: "New" })
     ] }),
-    onRefresh && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { className: "button-option", onClick: onRefresh, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_fi.FiRefreshCcw, { className: "icon" }),
+    onRefresh && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { className: "button-option", onClick: onRefresh, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_fi.FiRefreshCcw, { className: "icon" }),
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text", children: "Refresh" })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text", children: "Refresh" })
     ] }),
-    exportExcel && exportExcel.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_bootstrap.Dropdown, { className: "button-option", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    exportExcel && exportExcel.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_bootstrap.Dropdown, { className: "button-option", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
         import_react_bootstrap.Dropdown.Toggle,
         {
           id: "btnExport",
           className: "p-2 bg-light text-dark border-0 font-weight-bold",
           title: "Export to Excel",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_fi.FiSave, { className: "icon" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_fi.FiSave, { className: "icon" }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "span",
               {
                 style: {
@@ -800,45 +1872,45 @@ var NavOptions = ({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_bootstrap.Dropdown.Menu, { children: exportExcel.map((item, index) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_bootstrap.Dropdown.Item, { onClick: item.onAction, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("i", { className: `${item.classNameIcon}   mr-2` }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_bootstrap.Dropdown.Menu, { children: exportExcel.map((item, index) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_bootstrap.Dropdown.Item, { onClick: item.onAction, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("i", { className: `${item.classNameIcon}   mr-2` }),
           " ",
           item.title
         ] }, index);
       }) })
     ] }),
-    onSelect && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { className: "button-option", onClick: onSelect, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_fi.FiCheckCircle, { className: "icon" }),
+    onSelect && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { className: "button-option", onClick: onSelect, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_fi.FiCheckCircle, { className: "icon" }),
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text", children: "Select All" })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text", children: "Select All" })
     ] }),
-    onClear && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { className: "button-option", onClick: onClear, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_fi.FiFilter, { className: "icon" }),
+    onClear && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { className: "button-option", onClick: onClear, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_fi.FiFilter, { className: "icon" }),
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text", children: "Clear Filters" })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text", children: "Clear Filters" })
     ] }),
-    onExpandScreen && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { className: "button-option", onClick: onExpandScreen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_bs.BsArrowsFullscreen, { className: "icon" }),
+    onExpandScreen && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { className: "button-option", onClick: onExpandScreen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_bs.BsArrowsFullscreen, { className: "icon" }),
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text", children: "Full Page" })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text", children: "Full Page" })
     ] }),
     customButtons == null ? void 0 : customButtons.map((custom, index) => {
       if (custom.render) {
         return custom.render;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { className: "button-option", onClick: custom.onAction, children: [
-        custom.Icon !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(custom.Icon, { className: "icon" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text", children: custom.title })
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { className: "button-option", onClick: custom.onAction, children: [
+        custom.Icon !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(custom.Icon, { className: "icon" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text", children: custom.title })
       ] }, index);
     })
   ] });
 };
 
 // src/layout/title.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var Title = ({ title }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TitlePage, { children: title != null ? title : "Home" });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TitlePage, { children: title != null ? title : "Home" });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -863,8 +1935,10 @@ var Title = ({ title }) => {
   MenuItems,
   MenuOptions,
   MenuTitle,
+  MultiSelect,
   NavOptions,
   Navbar,
+  Select,
   SidebarMainContext,
   SidebarMainContextProvider,
   SidebarNavigation,