@addsign/moje-agenda-shared-lib 0.0.70 → 0.0.72

package/dist/assets/tailwind.css

@@ -777,6 +777,9 @@ video {
 .hidden {
   display: none;
 }
+.h-10 {
+  height: 2.5rem;
+}
 .h-11 {
   height: 2.75rem;
 }
@@ -828,6 +831,9 @@ video {
 .h-\[400px\] {
   height: 400px;
 }
+.h-\[72px\] {
+  height: 72px;
+}
 .h-full {
   height: 100%;
 }
@@ -894,6 +900,9 @@ video {
 .w-96 {
   width: 24rem;
 }
+.w-\[20px\] {
+  width: 20px;
+}
 .w-\[calc\(100\%-40px\)\] {
   width: calc(100% - 40px);
 }
@@ -958,6 +967,9 @@ video {
 .cursor-no-drop {
   cursor: no-drop;
 }
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
 .cursor-pointer {
   cursor: pointer;
 }
@@ -1558,6 +1570,10 @@ video {
   padding-left: 0.375rem;
   padding-right: 0.375rem;
 }
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1578,10 +1594,6 @@ video {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
-.px-8 {
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
 .py-0 {
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1727,6 +1739,9 @@ video {
   font-size: 0.75rem;
   line-height: 1rem;
 }
+.\!font-normal {
+  font-weight: 400 !important;
+}
 .font-bold {
   font-weight: 700;
 }

package/dist/components/Calendar.js

@@ -101,7 +101,7 @@ const Calendar = ({
         "div",
         {
           onClick: goToPreviousMonth,
-          className: "mr-5 px-8 py-4 cursor-pointer hover:bg-gray-100 rounded-xl text-sm",
+          className: "mr-5 px-10 py-4 cursor-pointer hover:bg-gray-150 rounded-lg text-sm",
           children: /* @__PURE__ */ jsx(FaChevronLeft, {})
         }
       ),
@@ -114,7 +114,7 @@ const Calendar = ({
         "div",
         {
           onClick: goToNextMonth,
-          className: "px-8 py-4 cursor-pointer hover:bg-gray-100 rounded-xl text-sm",
+          className: "px-10 py-4 cursor-pointer hover:bg-gray-150 rounded-lg text-sm",
           children: /* @__PURE__ */ jsx(FaChevronRight, {})
         }
       )
@@ -141,7 +141,7 @@ const Calendar = ({
         return /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "p-0 align-middle justify-center text-center  border-t hover:bg-gray-150 " + (dayIndex > 4 ? "bg-gray-100    col-span-1 " : "  col-span-2 ") + (isPublicHoliday ? " bg-gray-150 " : "") + (dayIndex !== 0 ? " border-l " : ""),
+            className: "p-0 align-middle justify-center text-center  border-t cursor-not-allowed " + (dayIndex > 4 ? "bg-gray-100    col-span-1 " : "  col-span-2 ") + (isPublicHoliday ? " bg-gray-150 " : "") + (dayIndex !== 0 ? " border-l " : ""),
             children: [
               day && /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
                 day,

package/dist/components/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../lib/components/Calendar.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from \"react\";\r\nimport { FaChevronLeft, FaChevronRight } from \"react-icons/fa\";\r\n\r\nexport interface ICalendarItem {\r\n  id: number;\r\n  label?: string;\r\n  from: Date;\r\n  to: Date;\r\n  background?: string;\r\n  color?: string;\r\n  tooltip?: string;\r\n}\r\n\r\ntype ICalendarProps = {\r\n  items: ICalendarItem[];\r\n  startingDate?: Date;\r\n  publicHolidays?: string[];\r\n};\r\n\r\n// Check if a day is within any item's date range\r\n\r\nconst Calendar: React.FunctionComponent<ICalendarProps> = ({\r\n  items,\r\n  startingDate,\r\n  publicHolidays,\r\n}) => {\r\n  const [currentMonth, setCurrentMonth] = useState(\r\n    startingDate ? startingDate.getMonth() : new Date().getMonth()\r\n  );\r\n\r\n  const [currentYear, setCurrentYear] = useState(\r\n    startingDate ? startingDate.getFullYear() : new Date().getFullYear()\r\n  );\r\n\r\n  useEffect(() => {\r\n    if (startingDate) {\r\n      setCurrentMonth(startingDate.getMonth());\r\n      setCurrentYear(startingDate.getFullYear());\r\n    }\r\n  }, [startingDate]);\r\n  const [calendarData, setCalendarData] = useState<\r\n    (string | number | JSX.Element)[][]\r\n  >([]);\r\n\r\n  const monthNames: string[] = [\r\n    \"Leden\",\r\n    \"Únor\",\r\n    \"Březen\",\r\n    \"Duben\",\r\n    \"Květen\",\r\n    \"Červen\",\r\n    \"Červenec\",\r\n    \"Srpen\",\r\n    \"Září\",\r\n    \"Říjen\",\r\n    \"Listopad\",\r\n    \"Prosinec\",\r\n  ];\r\n  const dayNames: string[] = [\r\n    \"Pondělí\",\r\n    \"Úterý\",\r\n    \"Středa\",\r\n    \"Čtvrtek\",\r\n    \"Pátek\",\r\n    \"So\",\r\n    \"Ne\",\r\n  ];\r\n\r\n  // Leap year check\r\n  const isLeapYear = (year: number) =>\r\n    (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;\r\n\r\n  // Days in each month\r\n  const daysInMonth = useCallback((month: number, year: number) => {\r\n    if (month === 1) {\r\n      // February\r\n      return isLeapYear(year) ? 29 : 28;\r\n    }\r\n    if ([0, 2, 4, 6, 7, 9, 11].includes(month)) {\r\n      // Months with 31 days\r\n\r\n      return 31;\r\n    }\r\n\r\n    return 30; // Months with 30 days\r\n  }, []);\r\n\r\n  // Generate days for a month\r\n  const generateMonthDays = useCallback(\r\n    (month: number, year: number) => {\r\n      const days = [];\r\n      //  const firstDayOfMonth = new Date(year, month, 1).getDay()\r\n\r\n      // Adjusted to make week start from Monday\r\n      let firstDayOfMonth = new Date(year, month, 1).getDay() - 1;\r\n      if (firstDayOfMonth === -1) firstDayOfMonth = 6; // Sunday becomes 6 instead of -1\r\n\r\n      let dayCounter = 1;\r\n\r\n      for (let week = 0; week < 6; week++) {\r\n        const weekDays = [];\r\n        for (let day = 0; day < 7; day++) {\r\n          if (week === 0 && day < firstDayOfMonth) {\r\n            weekDays.push(\"\");\r\n          } else if (dayCounter > daysInMonth(month, year)) {\r\n            weekDays.push(\"\");\r\n          } else {\r\n            weekDays.push(dayCounter++);\r\n          }\r\n        }\r\n        days.push(weekDays);\r\n      }\r\n      return days;\r\n    },\r\n    [daysInMonth]\r\n  );\r\n\r\n  useEffect(() => {\r\n    setCalendarData(generateMonthDays(currentMonth, currentYear));\r\n  }, [currentMonth, currentYear, generateMonthDays]);\r\n\r\n  // Navigation handlers\r\n  const goToNextMonth = () => {\r\n    setCurrentMonth((prev) => (prev === 11 ? 0 : prev + 1));\r\n    if (currentMonth === 11) {\r\n      setCurrentYear((prev) => prev + 1);\r\n    }\r\n  };\r\n\r\n  const goToPreviousMonth = () => {\r\n    setCurrentMonth((prev) => (prev === 0 ? 11 : prev - 1));\r\n    if (currentMonth === 0) {\r\n      setCurrentYear((prev) => prev - 1);\r\n    }\r\n  };\r\n  const findItemsForDay = (\r\n    day: number,\r\n    month: number,\r\n    year: number\r\n  ): ICalendarItem[] => {\r\n    const date = new Date(year, month, day);\r\n\r\n    return items.filter((item) => date >= item.from && date <= item.to);\r\n  };\r\n  return (\r\n    <div className=\"flex flex-col bg-white  shadow-lg  flex-grow text-xs rounded-lg border  overflow-hidden  \">\r\n      <div className=\"flex justify-between items-center text-black p-2\">\r\n        <div\r\n          onClick={goToPreviousMonth}\r\n          className=\"mr-5 px-8 py-4 cursor-pointer hover:bg-gray-100 rounded-xl text-sm\"\r\n        >\r\n          <FaChevronLeft />\r\n        </div>\r\n        <h2 className=\"font-semibold text-base\">\r\n          {monthNames[currentMonth]} {currentYear}\r\n        </h2>\r\n\r\n        <div\r\n          onClick={goToNextMonth}\r\n          className=\"px-8 py-4 cursor-pointer hover:bg-gray-100 rounded-xl text-sm\"\r\n        >\r\n          <FaChevronRight />\r\n        </div>\r\n      </div>\r\n      <div className=\"grid grid-cols-12 pb-0 \">\r\n        {dayNames.map((day, index) => (\r\n          <div\r\n            key={index}\r\n            className={\r\n              \"py-1 px-4  text-center font-semibold border-t  \" +\r\n              (index > 4 ? \" bg-gray-100   col-span-1 \" : \"  col-span-2 \")\r\n            }\r\n          >\r\n            {day}\r\n          </div>\r\n        ))}\r\n        {calendarData.map((week, weekIndex) => (\r\n          <React.Fragment key={weekIndex}>\r\n            {week.map((day, dayIndex) => {\r\n              const itemsForDay = day\r\n                ? findItemsForDay(day as number, currentMonth, currentYear)\r\n                : [];\r\n\r\n              const date = new Date(\r\n                currentYear,\r\n                currentMonth,\r\n                (day as number) + 1\r\n              );\r\n              const isPublicHoliday = publicHolidays?.includes(\r\n                date.toISOString().split(\"T\")[0]\r\n              );\r\n\r\n              return (\r\n                <div\r\n                  key={dayIndex}\r\n                  className={\r\n                    \"p-0 align-middle justify-center text-center  border-t hover:bg-gray-150 \" +\r\n                    (dayIndex > 4\r\n                      ? \"bg-gray-100    col-span-1 \"\r\n                      : \"  col-span-2 \") +\r\n                    (isPublicHoliday ? \" bg-gray-150 \" : \"\") +\r\n                    (dayIndex !== 0 ? \" border-l \" : \"\")\r\n                  }\r\n                >\r\n                  {day && <div className=\"py-1\">{day} </div>}\r\n                  {itemsForDay.map((item, itemIndex) => (\r\n                    <div\r\n                      key={itemIndex}\r\n                      className={\r\n                        \"dataItem w-full py-1  text-white text-center mt-0 -pr-1 \"\r\n                      }\r\n                      style={{\r\n                        backgroundColor:\r\n                          isPublicHoliday || dayIndex > 4\r\n                            ? \"gray\"\r\n                            : item.background,\r\n                        color:\r\n                          isPublicHoliday || dayIndex > 4\r\n                            ? \"white\"\r\n                            : item.color,\r\n                      }}\r\n                      data-tooltip-target={\"tooltip-\" + item.id}\r\n                      title={item.tooltip}\r\n                    >\r\n                      {item.label}\r\n                    </div>\r\n                  ))}\r\n                </div>\r\n              );\r\n            })}\r\n          </React.Fragment>\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Calendar;\r\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"Calendar.js","sources":["../../lib/components/Calendar.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from \"react\";\r\nimport { FaChevronLeft, FaChevronRight } from \"react-icons/fa\";\r\n\r\nexport interface ICalendarItem {\r\n  id: number;\r\n  label?: string;\r\n  from: Date;\r\n  to: Date;\r\n  background?: string;\r\n  color?: string;\r\n  tooltip?: string;\r\n}\r\n\r\ntype ICalendarProps = {\r\n  items: ICalendarItem[];\r\n  startingDate?: Date;\r\n  publicHolidays?: string[];\r\n};\r\n\r\n// Check if a day is within any item's date range\r\n\r\nconst Calendar: React.FunctionComponent<ICalendarProps> = ({\r\n  items,\r\n  startingDate,\r\n  publicHolidays,\r\n}) => {\r\n  const [currentMonth, setCurrentMonth] = useState(\r\n    startingDate ? startingDate.getMonth() : new Date().getMonth()\r\n  );\r\n\r\n  const [currentYear, setCurrentYear] = useState(\r\n    startingDate ? startingDate.getFullYear() : new Date().getFullYear()\r\n  );\r\n\r\n  useEffect(() => {\r\n    if (startingDate) {\r\n      setCurrentMonth(startingDate.getMonth());\r\n      setCurrentYear(startingDate.getFullYear());\r\n    }\r\n  }, [startingDate]);\r\n  const [calendarData, setCalendarData] = useState<\r\n    (string | number | JSX.Element)[][]\r\n  >([]);\r\n\r\n  const monthNames: string[] = [\r\n    \"Leden\",\r\n    \"Únor\",\r\n    \"Březen\",\r\n    \"Duben\",\r\n    \"Květen\",\r\n    \"Červen\",\r\n    \"Červenec\",\r\n    \"Srpen\",\r\n    \"Září\",\r\n    \"Říjen\",\r\n    \"Listopad\",\r\n    \"Prosinec\",\r\n  ];\r\n  const dayNames: string[] = [\r\n    \"Pondělí\",\r\n    \"Úterý\",\r\n    \"Středa\",\r\n    \"Čtvrtek\",\r\n    \"Pátek\",\r\n    \"So\",\r\n    \"Ne\",\r\n  ];\r\n\r\n  // Leap year check\r\n  const isLeapYear = (year: number) =>\r\n    (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;\r\n\r\n  // Days in each month\r\n  const daysInMonth = useCallback((month: number, year: number) => {\r\n    if (month === 1) {\r\n      // February\r\n      return isLeapYear(year) ? 29 : 28;\r\n    }\r\n    if ([0, 2, 4, 6, 7, 9, 11].includes(month)) {\r\n      // Months with 31 days\r\n\r\n      return 31;\r\n    }\r\n\r\n    return 30; // Months with 30 days\r\n  }, []);\r\n\r\n  // Generate days for a month\r\n  const generateMonthDays = useCallback(\r\n    (month: number, year: number) => {\r\n      const days = [];\r\n      //  const firstDayOfMonth = new Date(year, month, 1).getDay()\r\n\r\n      // Adjusted to make week start from Monday\r\n      let firstDayOfMonth = new Date(year, month, 1).getDay() - 1;\r\n      if (firstDayOfMonth === -1) firstDayOfMonth = 6; // Sunday becomes 6 instead of -1\r\n\r\n      let dayCounter = 1;\r\n\r\n      for (let week = 0; week < 6; week++) {\r\n        const weekDays = [];\r\n        for (let day = 0; day < 7; day++) {\r\n          if (week === 0 && day < firstDayOfMonth) {\r\n            weekDays.push(\"\");\r\n          } else if (dayCounter > daysInMonth(month, year)) {\r\n            weekDays.push(\"\");\r\n          } else {\r\n            weekDays.push(dayCounter++);\r\n          }\r\n        }\r\n        days.push(weekDays);\r\n      }\r\n      return days;\r\n    },\r\n    [daysInMonth]\r\n  );\r\n\r\n  useEffect(() => {\r\n    setCalendarData(generateMonthDays(currentMonth, currentYear));\r\n  }, [currentMonth, currentYear, generateMonthDays]);\r\n\r\n  // Navigation handlers\r\n  const goToNextMonth = () => {\r\n    setCurrentMonth((prev) => (prev === 11 ? 0 : prev + 1));\r\n    if (currentMonth === 11) {\r\n      setCurrentYear((prev) => prev + 1);\r\n    }\r\n  };\r\n\r\n  const goToPreviousMonth = () => {\r\n    setCurrentMonth((prev) => (prev === 0 ? 11 : prev - 1));\r\n    if (currentMonth === 0) {\r\n      setCurrentYear((prev) => prev - 1);\r\n    }\r\n  };\r\n  const findItemsForDay = (\r\n    day: number,\r\n    month: number,\r\n    year: number\r\n  ): ICalendarItem[] => {\r\n    const date = new Date(year, month, day);\r\n\r\n    return items.filter((item) => date >= item.from && date <= item.to);\r\n  };\r\n  return (\r\n    <div className=\"flex flex-col bg-white  shadow-lg  flex-grow text-xs rounded-lg border  overflow-hidden  \">\r\n      <div className=\"flex justify-between items-center text-black p-2\">\r\n        <div\r\n          onClick={goToPreviousMonth}\r\n          className=\"mr-5 px-10 py-4 cursor-pointer hover:bg-gray-150 rounded-lg text-sm\"\r\n        >\r\n          <FaChevronLeft />\r\n        </div>\r\n        <h2 className=\"font-semibold text-base\">\r\n          {monthNames[currentMonth]} {currentYear}\r\n        </h2>\r\n\r\n        <div\r\n          onClick={goToNextMonth}\r\n          className=\"px-10 py-4 cursor-pointer hover:bg-gray-150 rounded-lg text-sm\"\r\n        >\r\n          <FaChevronRight />\r\n        </div>\r\n      </div>\r\n      <div className=\"grid grid-cols-12 pb-0 \">\r\n        {dayNames.map((day, index) => (\r\n          <div\r\n            key={index}\r\n            className={\r\n              \"py-1 px-4  text-center font-semibold border-t  \" +\r\n              (index > 4 ? \" bg-gray-100   col-span-1 \" : \"  col-span-2 \")\r\n            }\r\n          >\r\n            {day}\r\n          </div>\r\n        ))}\r\n        {calendarData.map((week, weekIndex) => (\r\n          <React.Fragment key={weekIndex}>\r\n            {week.map((day, dayIndex) => {\r\n              const itemsForDay = day\r\n                ? findItemsForDay(day as number, currentMonth, currentYear)\r\n                : [];\r\n\r\n              const date = new Date(\r\n                currentYear,\r\n                currentMonth,\r\n                (day as number) + 1\r\n              );\r\n              const isPublicHoliday = publicHolidays?.includes(\r\n                date.toISOString().split(\"T\")[0]\r\n              );\r\n\r\n              return (\r\n                <div\r\n                  key={dayIndex}\r\n                  className={\r\n                    \"p-0 align-middle justify-center text-center  border-t cursor-not-allowed \" +\r\n                    (dayIndex > 4\r\n                      ? \"bg-gray-100    col-span-1 \"\r\n                      : \"  col-span-2 \") +\r\n                    (isPublicHoliday ? \" bg-gray-150 \" : \"\") +\r\n                    (dayIndex !== 0 ? \" border-l \" : \"\")\r\n                  }\r\n                >\r\n                  {day && <div className=\"py-1\">{day} </div>}\r\n                  {itemsForDay.map((item, itemIndex) => (\r\n                    <div\r\n                      key={itemIndex}\r\n                      className={\r\n                        \"dataItem w-full py-1  text-white text-center mt-0 -pr-1 \"\r\n                      }\r\n                      style={{\r\n                        backgroundColor:\r\n                          isPublicHoliday || dayIndex > 4\r\n                            ? \"gray\"\r\n                            : item.background,\r\n                        color:\r\n                          isPublicHoliday || dayIndex > 4\r\n                            ? \"white\"\r\n                            : item.color,\r\n                      }}\r\n                      data-tooltip-target={\"tooltip-\" + item.id}\r\n                      title={item.tooltip}\r\n                    >\r\n                      {item.label}\r\n                    </div>\r\n                  ))}\r\n                </div>\r\n              );\r\n            })}\r\n          </React.Fragment>\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Calendar;\r\n"],"names":["React"],"mappings":"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"}

package/dist/components/datatable/DataTableServer.d.ts

@@ -1,5 +1,10 @@
 import { DataTableColumn } from '../../main';
 
+interface BulkAction<T> {
+    name: string;
+    action: (items: T[]) => void;
+    icon?: any;
+}
 interface DataTableServerProps<T> {
     url: string;
     columns: DataTableColumn<T | "actions">[];
@@ -7,9 +12,12 @@ interface DataTableServerProps<T> {
     title?: string;
     subtitle?: string;
     allowSearch?: boolean;
+    rowAction?: (item: T) => void;
+    bulkActions?: BulkAction<T>[];
 }
 type DataTableInternalItems = {
     _isHighlighted?: boolean;
+    id: string;
 };
-declare function DataTableServer<T extends DataTableInternalItems>({ url, columns, itemsPerPage, title, subtitle, allowSearch, }: DataTableServerProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function DataTableServer<T extends DataTableInternalItems>({ url, columns, itemsPerPage, title, subtitle, allowSearch, rowAction, bulkActions, }: DataTableServerProps<T>): import("react/jsx-runtime").JSX.Element;
 export default DataTableServer;

package/dist/components/datatable/DataTableServer.js

@@ -18,13 +18,16 @@ function DataTableServer({
   itemsPerPage = 10,
   title,
   subtitle,
-  allowSearch = true
+  allowSearch = true,
+  rowAction,
+  bulkActions
 }) {
   var _a;
   const federationContext = useFederationContext();
   const [data, setData] = useState();
   const [isLoading, setIsLoading] = useState(false);
   const [currentPage, setCurrentPage] = useState(0);
+  const [selectedItems, setSelectedItems] = useState([]);
   const [fulltextSearch, setFulltextSearch] = useState("");
   const [filterOptions, setFilterOptions] = useState({});
   const [columnFilters, setColumnFilters] = useState(
@@ -62,20 +65,18 @@ function DataTableServer({
   useEffect(() => {
     const fetchFilterOptions = async (column) => {
       if (column.filterSource) {
-        {
-          try {
-            const response = await federationContext.apiClient.get(
-              column.filterSource
-            );
-            const options = response.data.map((item) => ({
-              value: item[column.filterValueKey],
-              label: item[column.filterLabelKey]
-            }));
-            return options;
-          } catch (error) {
-            console.error("Error fetching filter options:", error);
-            return [];
-          }
+        try {
+          const response = await federationContext.apiClient.get(
+            column.filterSource
+          );
+          const options = response.data.map((item) => ({
+            value: item[column.filterValueKey],
+            label: item[column.filterLabelKey]
+          }));
+          return options;
+        } catch (error) {
+          console.error("Error fetching filter options:", error);
+          return [];
         }
       }
     };
@@ -123,6 +124,27 @@ function DataTableServer({
       }
     );
   };
+  const handleSelectItem = (item) => {
+    setSelectedItems((prevSelectedItems) => {
+      if (prevSelectedItems.find((selectedItem) => selectedItem.id === item.id)) {
+        return prevSelectedItems.filter(
+          (selectedItem) => selectedItem.id !== item.id
+        );
+      } else {
+        return [...prevSelectedItems, item];
+      }
+    });
+  };
+  const handleSelectAll = () => {
+    if (data && selectedItems.length === data.content.length) {
+      setSelectedItems([]);
+    } else if (data) {
+      setSelectedItems(data.content);
+    }
+  };
+  const isSelected = (item) => {
+    return selectedItems.some((selectedItem) => selectedItem.id === item.id);
+  };
   const nextPage = () => {
     setCurrentPage(currentPage + 1);
   };
@@ -153,18 +175,35 @@ function DataTableServer({
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "shadow-lg border border-gray-200 rounded-xl  overflow-x-auto",
+      className: "shadow-lg border border-gray-200 rounded-xl overflow-x-auto",
       style: { overflowY: "visible" },
       children: [
-        (title || subtitle || allowSearch) && /* @__PURE__ */ jsxs("div", { className: "p-5 leading-9 flex ", children: [
+        (title || subtitle || allowSearch) && /* @__PURE__ */ jsxs("div", { className: "p-5 leading-9 flex", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex-grow", children: [
-            title && /* @__PURE__ */ jsx("h1", { className: "font-semibold text-xl leading-[42px] ", children: title }),
+            title && /* @__PURE__ */ jsx("h1", { className: "font-semibold text-xl leading-[42px]", children: title }),
             subtitle && /* @__PURE__ */ jsx("p", { className: "font-normal text-gray-600", children: subtitle })
           ] }),
+          bulkActions && selectedItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end  text-gray-800", children: [
+            "Hromadná akce (",
+            selectedItems.length,
+            " ",
+            selectedItems.length == 1 ? "položka" : selectedItems.length < 5 ? "položky" : "položek",
+            ") :",
+            bulkActions.map((bulkAction) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "primary",
+                className: "ml-2",
+                onClick: () => bulkAction.action(selectedItems),
+                children: bulkAction.name
+              },
+              bulkAction.name
+            ))
+          ] }),
           /* @__PURE__ */ jsxs(
             "div",
             {
-              className: "flex items-center text-xl h-full p-3  cursor-pointer text-gray-500 ",
+              className: "flex items-center text-xl h-full p-3 cursor-pointer text-gray-500",
               onClick: handleToggleShowColFilters,
               children: [
                 !showColFilters && /* @__PURE__ */ jsx(MdOutlineFilterAlt, {}),
@@ -197,8 +236,7 @@ function DataTableServer({
                 "th",
                 {
                   id: String(key) + "_filter",
-                  className: ` font-medium leading-9 text-xs text-left p-0 pb-5 text-gray-600 overflow-ellipsis 
-                          whitespace-nowrap ${!title && !subtitle ? "border-t-0" : ""}`,
+                  className: `font-medium leading-9 text-xs text-left p-0 pb-5 text-gray-600 overflow-ellipsis whitespace-nowrap ${!title && !subtitle ? "border-t-0" : ""}`,
                   style: { width },
                   children: [
                     filterType && filterType === "select" && /* @__PURE__ */ jsx(
@@ -214,7 +252,7 @@ function DataTableServer({
                         options: filterOptions[String(filterParam)] || [],
                         value: columnFilters[String(filterParam)],
                         clearable: true,
-                        className: "pl-3 "
+                        className: "pl-3"
                       }
                     ),
                     filterType && filterType !== "select" && /* @__PURE__ */ jsx(
@@ -229,7 +267,7 @@ function DataTableServer({
                         type: filterType,
                         value: columnFilters[String(filterParam)],
                         clearable: true,
-                        className: "max-w-[300px] min-w-[100px] pl-3 "
+                        className: "max-w-[300px] min-w-[100px] pl-3"
                       }
                     )
                   ]
@@ -237,121 +275,137 @@ function DataTableServer({
                 String(key) + "_filter"
               )
             ) }),
-            /* @__PURE__ */ jsx("tr", { children: columns.map(({ key, header, actions, sortParam, width }) => /* @__PURE__ */ jsx(
-              "th",
-              {
-                className: `group font-medium leading-9 text-xs text-left px-3 text-gray-600 bg bg-gray-50 border-t border-b border-gray-200 ${!title && !subtitle ? "border-t-0" : ""} ${sortParam ? " cursor-pointer " : ""}`,
-                onClick: () => sortParam ? requestSort(sortParam) : () => {
+            /* @__PURE__ */ jsxs("tr", { children: [
+              data && bulkActions && /* @__PURE__ */ jsx("th", { className: "w-[20px] h-10 hover:bg-gray-200 font-medium text-xs text-center text-gray-600 cursor-pointer border-t border-b border-gray-200", children: /* @__PURE__ */ jsx("label", { className: "w-full h-full flex items-center justify-center cursor-pointer px-2", children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: "selectAll",
+                  type: "checkbox",
+                  className: "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-indigo-200 focus:ring-4",
+                  onChange: handleSelectAll,
+                  checked: data && selectedItems.length === data.content.length
+                }
+              ) }) }),
+              columns.map(({ key, header, actions, sortParam, width }) => /* @__PURE__ */ jsx(
+                "th",
+                {
+                  className: `group font-medium leading-9 text-xs text-left px-3 text-gray-600 bg-gray-50 border-t border-b border-gray-200 ${!title && !subtitle ? "border-t-0" : ""} ${sortParam ? " cursor-pointer " : ""}`,
+                  onClick: () => sortParam ? requestSort(sortParam) : void 0,
+                  style: { width },
+                  children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+                    header,
+                    " ",
+                    !actions && sortParam ? getSortIcon(sortParam) : ""
+                  ] })
                 },
-                style: { width },
-                children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
-                  header,
-                  " ",
-                  !actions && sortParam ? getSortIcon(sortParam) : ""
-                ] })
-              },
-              String(key)
-            )) })
+                String(key)
+              ))
+            ] })
           ] }),
           data && (data == null ? void 0 : data.content) && (data == null ? void 0 : data.content.length) > 0 && /* @__PURE__ */ jsxs("tbody", { className: "relative", children: [
             isLoading && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gray-300 opacity-50 z-50", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx(Spinner, {}) }) }) }) }),
-            data.content.map((item, rowIndex) => /* @__PURE__ */ jsx(
+            data.content.map((item, rowIndex) => /* @__PURE__ */ jsxs(
               "tr",
               {
-                className: `${item._isHighlighted ? " bg-gray-200  " : " "} hover:bg-gray-50  border-gray-200 border-b text-sm `,
-                children: columns.map(
-                  ({ render, actions, classes, width }, colIndex) => /* @__PURE__ */ jsxs(
-                    "td",
+                className: `${item._isHighlighted ? "bg-gray-200" : ""} hover:bg-gray-100 border-gray-200 border-b text-sm`,
+                children: [
+                  bulkActions && /* @__PURE__ */ jsx("td", { className: "w-[20px] h-[72px] hover:bg-gray-200 font-medium text-xs text-center text-gray-600 cursor-pointer", children: /* @__PURE__ */ jsx("label", { className: "w-full h-full flex items-center justify-center cursor-pointer px-2", children: /* @__PURE__ */ jsx(
+                    "input",
                     {
-                      style: { width },
-                      className: `px-3 py-2
-                   ${colIndex == 0 ? " font-medium text-gray-900" : " text-gray-700"} ${classes || ""}`,
-                      children: [
-                        render ? render(item) : "",
-                        actions && actions.filter((it) => {
-                          if (it.visible) {
-                            return it.visible(item);
-                          }
-                        }).map((action, actionIndex) => /* @__PURE__ */ jsxs(
-                          "div",
-                          {
-                            className: "flex inline-flex align-middle",
-                            children: [
-                              action.icon && /* @__PURE__ */ jsxs(
-                                Button,
-                                {
-                                  variant: "icon",
-                                  onClick: () => action.onClick(item),
-                                  children: [
-                                    " ",
-                                    action.icon
-                                  ]
-                                }
-                              ),
-                              !action.icon && /* @__PURE__ */ jsxs(
-                                Button,
-                                {
-                                  variant: "transparent",
-                                  onClick: () => action.onClick(item),
-                                  children: [
-                                    " ",
-                                    action.label
-                                  ]
-                                }
-                              )
-                            ]
-                          },
-                          `${rowIndex}-${colIndex}-${actionIndex}`
-                        ))
-                      ]
-                    },
-                    `${rowIndex}-${colIndex}`
+                      type: "checkbox",
+                      className: "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-indigo-200 focus:ring-4",
+                      checked: isSelected(item) || false,
+                      onChange: () => handleSelectItem(item)
+                    }
+                  ) }) }),
+                  columns.map(
+                    ({ render, actions, classes, width }, colIndex) => /* @__PURE__ */ jsxs(
+                      "td",
+                      {
+                        onClick: rowAction ? () => rowAction(item) : void 0,
+                        style: { width },
+                        className: `px-3 py-2 cursor-pointer ${colIndex === 0 ? "font-medium text-gray-900" : "text-gray-700"} ${classes || ""}`,
+                        children: [
+                          render ? render(item) : "",
+                          actions && actions.filter((it) => {
+                            if (it.rowAction)
+                              return false;
+                            if (it.visible) {
+                              return it.visible(item);
+                            } else
+                              return true;
+                          }).map((action, actionIndex) => /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              className: "flex inline-flex align-middle",
+                              children: [
+                                action.icon && /* @__PURE__ */ jsx(
+                                  Button,
+                                  {
+                                    variant: "icon",
+                                    onClick: () => action.onClick(item),
+                                    children: action.icon
+                                  }
+                                ),
+                                !action.icon && /* @__PURE__ */ jsx(
+                                  Button,
+                                  {
+                                    variant: "transparent",
+                                    onClick: () => action.onClick(item),
+                                    children: action.label
+                                  }
+                                )
+                              ]
+                            },
+                            `${rowIndex}-${colIndex}-${actionIndex}`
+                          ))
+                        ]
+                      },
+                      `${rowIndex}-${colIndex}`
+                    )
                   )
-                )
+                ]
               },
               rowIndex
             )),
-            ((_a = data == null ? void 0 : data.content) == null ? void 0 : _a.length) == 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+            ((_a = data == null ? void 0 : data.content) == null ? void 0 : _a.length) === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
               "td",
               {
                 className: "px-5 py-3 border-b border-gray-200 bg-white text-sm items-center justify-center align-middle",
                 colSpan: columns.length,
-                children: "Žádná data"
+                children: "No data"
               },
               "td-nodata"
-            ) }, "tr-nodata   ")
+            ) }, "tr-nodata")
           ] })
         ] }) }),
-        /* @__PURE__ */ jsxs("div", { className: "w-full p-5 grid grid-cols-3", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-left items-start justify-start", children: data && !data.first && /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: "w-full p-5 flex gap-5 justify-between", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-5", children: [
+          data && !data.first && /* @__PURE__ */ jsxs(
             Button,
             {
               variant: "secondary",
               onClick: prevPage,
-              className: "flex items-center float-left",
+              className: "flex items-center",
               children: [
                 /* @__PURE__ */ jsx(MdArrowBack, { className: "mr-1.5" }),
-                " Předchozí"
+                " Previous"
               ]
             }
-          ) }),
-          /* @__PURE__ */ jsxs("div", { className: " text-center text-xs text-gray-800", children: [
-            paginationDisplay,
-            " "
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "text-right items-end justify-end", children: data && !data.last && /* @__PURE__ */ jsxs(
+          ),
+          data && !data.last && /* @__PURE__ */ jsxs(
             Button,
             {
               variant: "secondary",
               onClick: nextPage,
-              className: "flex items-center float-right",
+              className: "flex items-center",
               children: [
-                "Následující ",
+                "Next ",
                 /* @__PURE__ */ jsx(MdArrowForward, { className: "ml-2", size: 20 })
               ]
             }
-          ) })
-        ] })
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end text-xs text-gray-800", children: paginationDisplay })
+        ] }) })
       ]
     }
   ) });

package/dist/components/datatable/DataTableServer.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableServer.js","sources":["../../../lib/components/datatable/DataTableServer.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\r\n\r\nimport {\r\n  Button,\r\n  DataTableColumn,\r\n  FormField,\r\n  IPageable,\r\n  Spinner,\r\n  handleErrors,\r\n  useFederationContext,\r\n} from \"../../main\";\r\nimport {\r\n  MdArrowBack,\r\n  MdArrowDownward,\r\n  MdArrowForward,\r\n  MdArrowUpward,\r\n  MdClose,\r\n  MdOutlineFilterAlt,\r\n  MdOutlineFilterAltOff,\r\n  MdSearch,\r\n} from \"react-icons/md\";\r\nimport SelectField from \"../form/SelectField\";\r\nimport InputField from \"../form/InputField\";\r\n\r\ninterface DataTableServerProps<T> {\r\n  url: string;\r\n  columns: DataTableColumn<T | \"actions\">[];\r\n  itemsPerPage?: number;\r\n  title?: string;\r\n  subtitle?: string;\r\n  allowSearch?: boolean;\r\n}\r\n\r\ntype DataTableInternalItems = {\r\n  _isHighlighted?: boolean;\r\n};\r\n\r\nfunction DataTableServer<T extends DataTableInternalItems>({\r\n  url,\r\n  columns,\r\n  itemsPerPage = 10,\r\n  title,\r\n  subtitle,\r\n  allowSearch = true,\r\n}: DataTableServerProps<T>) {\r\n  const federationContext = useFederationContext();\r\n  const [data, setData] = useState<IPageable<T>>();\r\n  const [isLoading, setIsLoading] = useState(false);\r\n\r\n  const [currentPage, setCurrentPage] = useState(0);\r\n  const [fulltextSearch, setFulltextSearch] = useState(\"\");\r\n  const [filterOptions, setFilterOptions] = useState<Record<string, any[]>>({});\r\n  const [columnFilters, setColumnFilters] = useState<Record<string, string>>(\r\n    {}\r\n  );\r\n\r\n  const [showColFilters, setShowColFilters] = useState(false);\r\n\r\n  const [sortConfig, setSortConfig] = useState<{\r\n    sortParam: string;\r\n    direction: \"asc\" | \"desc\" | null;\r\n  } | null>(null);\r\n  useEffect(() => {\r\n    setIsLoading(true);\r\n    federationContext.apiClient\r\n      .get(url, {\r\n        params: {\r\n          ...columnFilters,\r\n          pageSize: itemsPerPage,\r\n          page: currentPage,\r\n          sortBy: sortConfig?.sortParam,\r\n          sortDirection: sortConfig?.direction,\r\n        },\r\n      })\r\n      .then((response) => {\r\n        setData(response.data);\r\n        setIsLoading(false);\r\n      })\r\n      .catch((error) => {\r\n        console.error(\"Error fetching data:\", error);\r\n        handleErrors(error, federationContext.emitter);\r\n        setIsLoading(false);\r\n      });\r\n  }, [\r\n    url,\r\n    columnFilters,\r\n    itemsPerPage,\r\n    currentPage,\r\n    sortConfig,\r\n    federationContext.apiClient,\r\n    federationContext.emitter,\r\n  ]);\r\n\r\n  useEffect(() => {\r\n    const fetchFilterOptions = async (column: DataTableColumn<T>) => {\r\n      if (column.filterSource) {\r\n        {\r\n          try {\r\n            const response = await federationContext.apiClient.get(\r\n              column.filterSource\r\n            );\r\n\r\n            const options = response.data.map((item: any) => ({\r\n              value: item[column.filterValueKey as keyof typeof item],\r\n              label: item[column.filterLabelKey as keyof typeof item],\r\n            }));\r\n            return options;\r\n          } catch (error) {\r\n            console.error(\"Error fetching filter options:\", error);\r\n            return [];\r\n          }\r\n        }\r\n      }\r\n    };\r\n    const updateFilterOptions = async () => {\r\n      const newFilterOptions: Record<string, any[]> = {};\r\n\r\n      for (const column of columns) {\r\n        if (\r\n          column.filterType &&\r\n          column.filterSource &&\r\n          column.filterValueKey &&\r\n          column.filterLabelKey &&\r\n          column.filterParam\r\n        ) {\r\n          const options = await fetchFilterOptions(column);\r\n\r\n          if (options) {\r\n            newFilterOptions[column.filterParam as string] = [\r\n              { value: \"\", label: \"\" },\r\n              ...options,\r\n            ];\r\n          }\r\n        }\r\n      }\r\n\r\n      setFilterOptions(newFilterOptions);\r\n    };\r\n\r\n    updateFilterOptions();\r\n  }, [columns, federationContext.apiClient]);\r\n\r\n  const requestSort = (sortParam: string) => {\r\n    setSortConfig((prevSortConfig) => {\r\n      if (\r\n        prevSortConfig?.sortParam === sortParam &&\r\n        prevSortConfig.direction !== null\r\n      ) {\r\n        return prevSortConfig.direction === \"asc\"\r\n          ? { sortParam, direction: \"desc\" }\r\n          : null;\r\n      } else {\r\n        return { sortParam, direction: \"asc\" };\r\n      }\r\n    });\r\n  };\r\n\r\n  const getSortIcon = (sortParam: string) => {\r\n    if (sortConfig?.sortParam === sortParam) {\r\n      return sortConfig.direction === \"asc\" ? (\r\n        <MdArrowUpward fontSize=\"small\" />\r\n      ) : sortConfig.direction === \"desc\" ? (\r\n        <MdArrowDownward fontSize=\"small\" />\r\n      ) : (\r\n        <MdArrowUpward\r\n          fontSize=\"small\"\r\n          className=\"text-gray-300 invisible group-hover:visible \"\r\n        />\r\n      );\r\n    }\r\n    return (\r\n      <MdArrowUpward\r\n        fontSize=\"small\"\r\n        className=\"text-gray-300 invisible group-hover:visible \"\r\n      />\r\n    );\r\n  };\r\n\r\n  const nextPage = () => {\r\n    setCurrentPage(currentPage + 1);\r\n  };\r\n\r\n  const prevPage = () => {\r\n    setCurrentPage(currentPage - 1);\r\n  };\r\n  const handleSearchChanged = (\r\n    e: React.ChangeEvent<\r\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\r\n    >\r\n  ) => {\r\n    console.log(\r\n      \"%clibcomponentsdatatableDataTable.tsx:238 e\",\r\n      \"color: #007acc;\",\r\n      e\r\n    );\r\n    setFulltextSearch(e.target?.value);\r\n    setCurrentPage(0);\r\n  };\r\n\r\n  // Pagination display logic\r\n  const paginationDisplay = `Strana ${currentPage + 1} z ${data?.totalPages}`;\r\n\r\n  const filterHandler = (filterParam: keyof T, value: string) => {\r\n    setColumnFilters((prev) => ({ ...prev, [filterParam]: value }));\r\n    setCurrentPage(0);\r\n  };\r\n  const handleToggleShowColFilters = () => {\r\n    if (showColFilters) {\r\n      setColumnFilters({});\r\n    }\r\n    setShowColFilters(!showColFilters);\r\n  };\r\n\r\n  //if (isLoading) return <Spinner />;\r\n  return (\r\n    <>\r\n      <div\r\n        className=\"shadow-lg border border-gray-200 rounded-xl  overflow-x-auto\"\r\n        style={{ overflowY: \"visible\" }}\r\n      >\r\n        {(title || subtitle || allowSearch) && (\r\n          <div className=\"p-5 leading-9 flex \">\r\n            <div className=\"flex-grow\">\r\n              {title && (\r\n                <h1 className=\"font-semibold text-xl leading-[42px] \">\r\n                  {title}\r\n                </h1>\r\n              )}\r\n              {subtitle && (\r\n                <p className=\"font-normal text-gray-600\">{subtitle}</p>\r\n              )}\r\n            </div>\r\n\r\n            <div\r\n              className=\"flex items-center text-xl h-full p-3  cursor-pointer text-gray-500 \"\r\n              onClick={handleToggleShowColFilters}\r\n            >\r\n              {!showColFilters && <MdOutlineFilterAlt />}\r\n              {showColFilters && <MdOutlineFilterAltOff />}\r\n            </div>\r\n            {allowSearch && (\r\n              <div className=\"ml-5\">\r\n                <FormField\r\n                  placeholder=\"Vyhledávání\"\r\n                  name=\"search\"\r\n                  onInputChange={handleSearchChanged}\r\n                  type=\"text\"\r\n                  value={fulltextSearch}\r\n                >\r\n                  {\" \"}\r\n                  <div className=\" text-gray-500 leading-5 flex items-center h-full\">\r\n                    {!fulltextSearch && <MdSearch></MdSearch>}\r\n                    {fulltextSearch && (\r\n                      <MdClose onClick={() => setFulltextSearch(\"\")}></MdClose>\r\n                    )}\r\n                  </div>\r\n                </FormField>\r\n              </div>\r\n            )}\r\n          </div>\r\n        )}\r\n        <div className=\"\">\r\n          <table className=\"w-full leading-normal \">\r\n            <thead>\r\n              {showColFilters &&\r\n                columns.findIndex((it) => it.filterType) > -1 && (\r\n                  <tr>\r\n                    {columns.map(\r\n                      ({ key, header, filterType, filterParam, width }) => (\r\n                        <th\r\n                          key={String(key) + \"_filter\"}\r\n                          id={String(key) + \"_filter\"}\r\n                          className={` font-medium leading-9 text-xs text-left p-0 pb-5 text-gray-600 overflow-ellipsis \r\n                          whitespace-nowrap ${\r\n                            !title && !subtitle ? \"border-t-0\" : \"\"\r\n                          }`}\r\n                          style={{ width: width }}\r\n                        >\r\n                          {filterType && filterType === \"select\" && (\r\n                            <SelectField\r\n                              label={header}\r\n                              name={String(key) + \"_filter\"}\r\n                              onInputChange={(e) =>\r\n                                filterHandler(\r\n                                  filterParam as keyof T,\r\n                                  e.target.value\r\n                                )\r\n                              }\r\n                              type={filterType}\r\n                              options={filterOptions[String(filterParam)] || []}\r\n                              value={columnFilters[String(filterParam)]}\r\n                              clearable\r\n                              className=\"pl-3 \"\r\n                            ></SelectField>\r\n                          )}\r\n                          {filterType && filterType !== \"select\" && (\r\n                            <InputField\r\n                              label={header}\r\n                              name={String(key) + \"_filter\"}\r\n                              onInputChange={(e) =>\r\n                                filterHandler(\r\n                                  filterParam as keyof T,\r\n                                  e.target.value\r\n                                )\r\n                              }\r\n                              type={filterType}\r\n                              value={columnFilters[String(filterParam)]}\r\n                              clearable\r\n                              className=\"max-w-[300px] min-w-[100px] pl-3 \"\r\n                            ></InputField>\r\n                          )}\r\n                        </th>\r\n                      )\r\n                    )}\r\n                  </tr>\r\n                )}\r\n              <tr>\r\n                {columns.map(({ key, header, actions, sortParam, width }) => (\r\n                  <th\r\n                    key={String(key)}\r\n                    className={`group font-medium leading-9 text-xs text-left px-3 text-gray-600 bg bg-gray-50 border-t border-b border-gray-200 ${\r\n                      !title && !subtitle ? \"border-t-0\" : \"\"\r\n                    } ${sortParam ? \" cursor-pointer \" : \"\"}`}\r\n                    onClick={() =>\r\n                      sortParam ? requestSort(sortParam) : () => {}\r\n                    }\r\n                    style={{ width: width }}\r\n                  >\r\n                    <span className=\"inline-flex items-center gap-2\">\r\n                      {header}{\" \"}\r\n                      {!actions && sortParam ? getSortIcon(sortParam) : \"\"}\r\n                    </span>\r\n                  </th>\r\n                ))}\r\n              </tr>\r\n            </thead>\r\n            {data && data?.content && data?.content.length > 0 && (\r\n              <tbody className=\"relative\">\r\n                {isLoading && (\r\n                  <tr>\r\n                    <td>\r\n                      <div className=\"absolute inset-0 bg-gray-300 opacity-50 z-50\">\r\n                        <div className=\"flex items-center justify-center h-full\">\r\n                          <Spinner />\r\n                        </div>\r\n                      </div>\r\n                    </td>\r\n                  </tr>\r\n                )}\r\n                {data.content.map((item, rowIndex) => (\r\n                  <tr\r\n                    key={rowIndex}\r\n                    className={`${\r\n                      item._isHighlighted ? \" bg-gray-200  \" : \" \"\r\n                    } hover:bg-gray-50  border-gray-200 border-b text-sm `}\r\n                  >\r\n                    {columns.map(\r\n                      ({ render, actions, classes, width }, colIndex) => (\r\n                        <td\r\n                          key={`${rowIndex}-${colIndex}`}\r\n                          style={{ width: width }}\r\n                          className={`px-3 py-2\r\n                   ${\r\n                     colIndex == 0\r\n                       ? \" font-medium text-gray-900\"\r\n                       : \" text-gray-700\"\r\n                   } ${classes || \"\"}`}\r\n                        >\r\n                          {render ? render(item) : \"\"}\r\n                          {actions &&\r\n                            actions\r\n                              .filter((it) => {\r\n                                if (it.visible) {\r\n                                  return it.visible(item);\r\n                                } else true;\r\n                              })\r\n                              .map((action, actionIndex) => (\r\n                                <div\r\n                                  key={`${rowIndex}-${colIndex}-${actionIndex}`}\r\n                                  className=\"flex inline-flex align-middle\"\r\n                                >\r\n                                  {action.icon && (\r\n                                    <Button\r\n                                      variant=\"icon\"\r\n                                      onClick={() => action.onClick(item)}\r\n                                    >\r\n                                      {\" \"}\r\n                                      {action.icon}\r\n                                    </Button>\r\n                                  )}\r\n                                  {!action.icon && (\r\n                                    <Button\r\n                                      variant=\"transparent\"\r\n                                      onClick={() => action.onClick(item)}\r\n                                    >\r\n                                      {\" \"}\r\n                                      {action.label}\r\n                                    </Button>\r\n                                  )}\r\n                                </div>\r\n                              ))}\r\n                        </td>\r\n                      )\r\n                    )}\r\n                  </tr>\r\n                ))}\r\n                {data?.content?.length == 0 && (\r\n                  <tr key=\"tr-nodata   \">\r\n                    <td\r\n                      key=\"td-nodata\"\r\n                      className=\"px-5 py-3 border-b border-gray-200 bg-white text-sm items-center justify-center align-middle\"\r\n                      colSpan={columns.length}\r\n                    >\r\n                      Žádná data\r\n                    </td>\r\n                  </tr>\r\n                )}\r\n              </tbody>\r\n            )}\r\n          </table>\r\n        </div>\r\n        <div className=\"w-full p-5 grid grid-cols-3\">\r\n          <div className=\"text-left items-start justify-start\">\r\n            {data && !data.first && (\r\n              <Button\r\n                variant=\"secondary\"\r\n                onClick={prevPage}\r\n                className=\"flex items-center float-left\"\r\n              >\r\n                <MdArrowBack className=\"mr-1.5\" /> Předchozí\r\n              </Button>\r\n            )}\r\n          </div>\r\n          <div className=\" text-center text-xs text-gray-800\">\r\n            {paginationDisplay} {/* Updated to use dynamic page numbers */}\r\n          </div>\r\n          <div className=\"text-right items-end justify-end\">\r\n            {data && !data.last && (\r\n              <Button\r\n                variant=\"secondary\"\r\n                onClick={nextPage}\r\n                className=\"flex items-center float-right\"\r\n              >\r\n                Následující <MdArrowForward className=\"ml-2\" size={20} />\r\n              </Button>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </>\r\n  );\r\n}\r\n\r\nexport default DataTableServer;\r\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"DataTableServer.js","sources":["../../../lib/components/datatable/DataTableServer.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\r\n\r\nimport {\r\n  Button,\r\n  DataTableColumn,\r\n  FormField,\r\n  IPageable,\r\n  Spinner,\r\n  handleErrors,\r\n  useFederationContext,\r\n} from \"../../main\";\r\nimport {\r\n  MdArrowBack,\r\n  MdArrowDownward,\r\n  MdArrowForward,\r\n  MdArrowUpward,\r\n  MdClose,\r\n  MdOutlineFilterAlt,\r\n  MdOutlineFilterAltOff,\r\n  MdSearch,\r\n} from \"react-icons/md\";\r\nimport SelectField from \"../form/SelectField\";\r\nimport InputField from \"../form/InputField\";\r\n\r\ninterface BulkAction<T> {\r\n  name: string;\r\n  action: (items: T[]) => void;\r\n  icon?: any;\r\n}\r\n\r\ninterface DataTableServerProps<T> {\r\n  url: string;\r\n  columns: DataTableColumn<T | \"actions\">[];\r\n  itemsPerPage?: number;\r\n  title?: string;\r\n  subtitle?: string;\r\n  allowSearch?: boolean;\r\n  rowAction?: (item: T) => void;\r\n  bulkActions?: BulkAction<T>[];\r\n}\r\n\r\ntype DataTableInternalItems = {\r\n  _isHighlighted?: boolean;\r\n  id: string; // Assuming items have an `id` field for identification\r\n};\r\n\r\nfunction DataTableServer<T extends DataTableInternalItems>({\r\n  url,\r\n  columns,\r\n  itemsPerPage = 10,\r\n  title,\r\n  subtitle,\r\n  allowSearch = true,\r\n  rowAction,\r\n  bulkActions,\r\n}: DataTableServerProps<T>) {\r\n  const federationContext = useFederationContext();\r\n  const [data, setData] = useState<IPageable<T>>();\r\n  const [isLoading, setIsLoading] = useState(false);\r\n\r\n  const [currentPage, setCurrentPage] = useState(0);\r\n  const [selectedItems, setSelectedItems] = useState<T[]>([]);\r\n  const [fulltextSearch, setFulltextSearch] = useState(\"\");\r\n  const [filterOptions, setFilterOptions] = useState<Record<string, any[]>>({});\r\n  const [columnFilters, setColumnFilters] = useState<Record<string, string>>(\r\n    {}\r\n  );\r\n  const [showColFilters, setShowColFilters] = useState(false);\r\n  const [sortConfig, setSortConfig] = useState<{\r\n    sortParam: string;\r\n    direction: \"asc\" | \"desc\" | null;\r\n  } | null>(null);\r\n\r\n  useEffect(() => {\r\n    setIsLoading(true);\r\n    federationContext.apiClient\r\n      .get(url, {\r\n        params: {\r\n          ...columnFilters,\r\n          pageSize: itemsPerPage,\r\n          page: currentPage,\r\n          sortBy: sortConfig?.sortParam,\r\n          sortDirection: sortConfig?.direction,\r\n        },\r\n      })\r\n      .then((response) => {\r\n        setData(response.data);\r\n        setIsLoading(false);\r\n      })\r\n      .catch((error) => {\r\n        console.error(\"Error fetching data:\", error);\r\n        handleErrors(error, federationContext.emitter);\r\n        setIsLoading(false);\r\n      });\r\n  }, [\r\n    url,\r\n    columnFilters,\r\n    itemsPerPage,\r\n    currentPage,\r\n    sortConfig,\r\n    federationContext.apiClient,\r\n    federationContext.emitter,\r\n  ]);\r\n\r\n  useEffect(() => {\r\n    const fetchFilterOptions = async (column: DataTableColumn<T>) => {\r\n      if (column.filterSource) {\r\n        try {\r\n          const response = await federationContext.apiClient.get(\r\n            column.filterSource\r\n          );\r\n\r\n          const options = response.data.map((item: any) => ({\r\n            value: item[column.filterValueKey as keyof typeof item],\r\n            label: item[column.filterLabelKey as keyof typeof item],\r\n          }));\r\n          return options;\r\n        } catch (error) {\r\n          console.error(\"Error fetching filter options:\", error);\r\n          return [];\r\n        }\r\n      }\r\n    };\r\n    const updateFilterOptions = async () => {\r\n      const newFilterOptions: Record<string, any[]> = {};\r\n\r\n      for (const column of columns) {\r\n        if (\r\n          column.filterType &&\r\n          column.filterSource &&\r\n          column.filterValueKey &&\r\n          column.filterLabelKey &&\r\n          column.filterParam\r\n        ) {\r\n          const options = await fetchFilterOptions(column);\r\n\r\n          if (options) {\r\n            newFilterOptions[column.filterParam as string] = [\r\n              { value: \"\", label: \"\" },\r\n              ...options,\r\n            ];\r\n          }\r\n        }\r\n      }\r\n\r\n      setFilterOptions(newFilterOptions);\r\n    };\r\n\r\n    updateFilterOptions();\r\n  }, [columns, federationContext.apiClient]);\r\n\r\n  const requestSort = (sortParam: string) => {\r\n    setSortConfig((prevSortConfig) => {\r\n      if (\r\n        prevSortConfig?.sortParam === sortParam &&\r\n        prevSortConfig.direction !== null\r\n      ) {\r\n        return prevSortConfig.direction === \"asc\"\r\n          ? { sortParam, direction: \"desc\" }\r\n          : null;\r\n      } else {\r\n        return { sortParam, direction: \"asc\" };\r\n      }\r\n    });\r\n  };\r\n\r\n  const getSortIcon = (sortParam: string) => {\r\n    if (sortConfig?.sortParam === sortParam) {\r\n      return sortConfig.direction === \"asc\" ? (\r\n        <MdArrowUpward fontSize=\"small\" />\r\n      ) : sortConfig.direction === \"desc\" ? (\r\n        <MdArrowDownward fontSize=\"small\" />\r\n      ) : (\r\n        <MdArrowUpward\r\n          fontSize=\"small\"\r\n          className=\"text-gray-300 invisible group-hover:visible \"\r\n        />\r\n      );\r\n    }\r\n    return (\r\n      <MdArrowUpward\r\n        fontSize=\"small\"\r\n        className=\"text-gray-300 invisible group-hover:visible \"\r\n      />\r\n    );\r\n  };\r\n\r\n  const handleSelectItem = (item: T) => {\r\n    setSelectedItems((prevSelectedItems) => {\r\n      if (\r\n        prevSelectedItems.find((selectedItem) => selectedItem.id === item.id)\r\n      ) {\r\n        return prevSelectedItems.filter(\r\n          (selectedItem) => selectedItem.id !== item.id\r\n        );\r\n      } else {\r\n        return [...prevSelectedItems, item];\r\n      }\r\n    });\r\n  };\r\n\r\n  const handleSelectAll = () => {\r\n    if (data && selectedItems.length === data.content.length) {\r\n      setSelectedItems([]);\r\n    } else if (data) {\r\n      setSelectedItems(data.content);\r\n    }\r\n  };\r\n\r\n  const isSelected = (item: T) => {\r\n    return selectedItems.some((selectedItem) => selectedItem.id === item.id);\r\n  };\r\n\r\n  const nextPage = () => {\r\n    setCurrentPage(currentPage + 1);\r\n  };\r\n\r\n  const prevPage = () => {\r\n    setCurrentPage(currentPage - 1);\r\n  };\r\n\r\n  const handleSearchChanged = (\r\n    e: React.ChangeEvent<\r\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\r\n    >\r\n  ) => {\r\n    console.log(\r\n      \"%clibcomponentsdatatableDataTable.tsx:238 e\",\r\n      \"color: #007acc;\",\r\n      e\r\n    );\r\n    setFulltextSearch(e.target?.value);\r\n    setCurrentPage(0);\r\n  };\r\n\r\n  // Pagination display logic\r\n  const paginationDisplay = `Strana ${currentPage + 1} z ${data?.totalPages}`;\r\n\r\n  const filterHandler = (filterParam: keyof T, value: string) => {\r\n    setColumnFilters((prev) => ({ ...prev, [filterParam]: value }));\r\n    setCurrentPage(0);\r\n  };\r\n  const handleToggleShowColFilters = () => {\r\n    if (showColFilters) {\r\n      setColumnFilters({});\r\n    }\r\n    setShowColFilters(!showColFilters);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        className=\"shadow-lg border border-gray-200 rounded-xl overflow-x-auto\"\r\n        style={{ overflowY: \"visible\" }}\r\n      >\r\n        {(title || subtitle || allowSearch) && (\r\n          <div className=\"p-5 leading-9 flex\">\r\n            <div className=\"flex-grow\">\r\n              {title && (\r\n                <h1 className=\"font-semibold text-xl leading-[42px]\">\r\n                  {title}\r\n                </h1>\r\n              )}\r\n              {subtitle && (\r\n                <p className=\"font-normal text-gray-600\">{subtitle}</p>\r\n              )}\r\n            </div>\r\n            {bulkActions && selectedItems.length > 0 && (\r\n              <div className=\"flex items-center justify-end  text-gray-800\">\r\n                Hromadná akce ({selectedItems.length}{\" \"}\r\n                {selectedItems.length == 1\r\n                  ? \"položka\"\r\n                  : selectedItems.length < 5\r\n                    ? \"položky\"\r\n                    : \"položek\"}\r\n                ) :\r\n                {bulkActions.map((bulkAction) => (\r\n                  <Button\r\n                    key={bulkAction.name}\r\n                    variant=\"primary\"\r\n                    className=\"ml-2\"\r\n                    onClick={() => bulkAction.action(selectedItems)}\r\n                  >\r\n                    {bulkAction.name}\r\n                  </Button>\r\n                ))}\r\n              </div>\r\n            )}\r\n            <div\r\n              className=\"flex items-center text-xl h-full p-3 cursor-pointer text-gray-500\"\r\n              onClick={handleToggleShowColFilters}\r\n            >\r\n              {!showColFilters && <MdOutlineFilterAlt />}\r\n              {showColFilters && <MdOutlineFilterAltOff />}\r\n            </div>\r\n            {allowSearch && (\r\n              <div className=\"ml-5\">\r\n                <FormField\r\n                  placeholder=\"Vyhledávání\"\r\n                  name=\"search\"\r\n                  onInputChange={handleSearchChanged}\r\n                  type=\"text\"\r\n                  value={fulltextSearch}\r\n                >\r\n                  {\" \"}\r\n                  <div className=\" text-gray-500 leading-5 flex items-center h-full\">\r\n                    {!fulltextSearch && <MdSearch></MdSearch>}\r\n                    {fulltextSearch && (\r\n                      <MdClose onClick={() => setFulltextSearch(\"\")} />\r\n                    )}\r\n                  </div>\r\n                </FormField>\r\n              </div>\r\n            )}\r\n          </div>\r\n        )}\r\n        <div className=\"\">\r\n          <table className=\"w-full leading-normal \">\r\n            <thead>\r\n              {showColFilters &&\r\n                columns.findIndex((it) => it.filterType) > -1 && (\r\n                  <tr>\r\n                    {columns.map(\r\n                      ({ key, header, filterType, filterParam, width }) => (\r\n                        <th\r\n                          key={String(key) + \"_filter\"}\r\n                          id={String(key) + \"_filter\"}\r\n                          className={`font-medium leading-9 text-xs text-left p-0 pb-5 text-gray-600 overflow-ellipsis whitespace-nowrap ${\r\n                            !title && !subtitle ? \"border-t-0\" : \"\"\r\n                          }`}\r\n                          style={{ width: width }}\r\n                        >\r\n                          {filterType && filterType === \"select\" && (\r\n                            <SelectField\r\n                              label={header}\r\n                              name={String(key) + \"_filter\"}\r\n                              onInputChange={(e) =>\r\n                                filterHandler(\r\n                                  filterParam as keyof T,\r\n                                  e.target.value\r\n                                )\r\n                              }\r\n                              type={filterType}\r\n                              options={filterOptions[String(filterParam)] || []}\r\n                              value={columnFilters[String(filterParam)]}\r\n                              clearable\r\n                              className=\"pl-3\"\r\n                            />\r\n                          )}\r\n                          {filterType && filterType !== \"select\" && (\r\n                            <InputField\r\n                              label={header}\r\n                              name={String(key) + \"_filter\"}\r\n                              onInputChange={(e) =>\r\n                                filterHandler(\r\n                                  filterParam as keyof T,\r\n                                  e.target.value\r\n                                )\r\n                              }\r\n                              type={filterType}\r\n                              value={columnFilters[String(filterParam)]}\r\n                              clearable\r\n                              className=\"max-w-[300px] min-w-[100px] pl-3\"\r\n                            />\r\n                          )}\r\n                        </th>\r\n                      )\r\n                    )}\r\n                  </tr>\r\n                )}\r\n              <tr>\r\n                {data && bulkActions && (\r\n                  <th className=\"w-[20px] h-10 hover:bg-gray-200 font-medium text-xs text-center text-gray-600 cursor-pointer border-t border-b border-gray-200\">\r\n                    <label className=\"w-full h-full flex items-center justify-center cursor-pointer px-2\">\r\n                      <input\r\n                        id=\"selectAll\"\r\n                        type=\"checkbox\"\r\n                        className=\"w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-indigo-200 focus:ring-4\"\r\n                        onChange={handleSelectAll}\r\n                        checked={\r\n                          data && selectedItems.length === data.content.length\r\n                        }\r\n                      />\r\n                    </label>\r\n                  </th>\r\n                )}\r\n                {columns.map(({ key, header, actions, sortParam, width }) => (\r\n                  <th\r\n                    key={String(key)}\r\n                    className={`group font-medium leading-9 text-xs text-left px-3 text-gray-600 bg-gray-50 border-t border-b border-gray-200 ${\r\n                      !title && !subtitle ? \"border-t-0\" : \"\"\r\n                    } ${sortParam ? \" cursor-pointer \" : \"\"}`}\r\n                    onClick={() =>\r\n                      sortParam ? requestSort(sortParam) : undefined\r\n                    }\r\n                    style={{ width: width }}\r\n                  >\r\n                    <span className=\"inline-flex items-center gap-2\">\r\n                      {header}{\" \"}\r\n                      {!actions && sortParam ? getSortIcon(sortParam) : \"\"}\r\n                    </span>\r\n                  </th>\r\n                ))}\r\n              </tr>\r\n            </thead>\r\n            {data && data?.content && data?.content.length > 0 && (\r\n              <tbody className=\"relative\">\r\n                {isLoading && (\r\n                  <tr>\r\n                    <td>\r\n                      <div className=\"absolute inset-0 bg-gray-300 opacity-50 z-50\">\r\n                        <div className=\"flex items-center justify-center h-full\">\r\n                          <Spinner />\r\n                        </div>\r\n                      </div>\r\n                    </td>\r\n                  </tr>\r\n                )}\r\n                {data.content.map((item, rowIndex) => (\r\n                  <tr\r\n                    key={rowIndex}\r\n                    className={`${\r\n                      item._isHighlighted ? \"bg-gray-200\" : \"\"\r\n                    } hover:bg-gray-100 border-gray-200 border-b text-sm`}\r\n                  >\r\n                    {bulkActions && (\r\n                      <td className=\"w-[20px] h-[72px] hover:bg-gray-200 font-medium text-xs text-center text-gray-600 cursor-pointer\">\r\n                        <label className=\"w-full h-full flex items-center justify-center cursor-pointer px-2\">\r\n                          <input\r\n                            type=\"checkbox\"\r\n                            className=\"w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-indigo-200 focus:ring-4\"\r\n                            checked={isSelected(item) || false}\r\n                            onChange={() => handleSelectItem(item)}\r\n                          />\r\n                        </label>\r\n                      </td>\r\n                    )}\r\n                    {columns.map(\r\n                      ({ render, actions, classes, width }, colIndex) => (\r\n                        <td\r\n                          key={`${rowIndex}-${colIndex}`}\r\n                          onClick={\r\n                            rowAction ? () => rowAction(item) : undefined\r\n                          }\r\n                          style={{ width: width }}\r\n                          className={`px-3 py-2 cursor-pointer ${\r\n                            colIndex === 0\r\n                              ? \"font-medium text-gray-900\"\r\n                              : \"text-gray-700\"\r\n                          } ${classes || \"\"}`}\r\n                        >\r\n                          {render ? render(item) : \"\"}\r\n                          {actions &&\r\n                            actions\r\n                              .filter((it) => {\r\n                                if (it.rowAction) return false;\r\n                                if (it.visible) {\r\n                                  return it.visible(item);\r\n                                } else return true;\r\n                              })\r\n                              .map((action, actionIndex) => (\r\n                                <div\r\n                                  key={`${rowIndex}-${colIndex}-${actionIndex}`}\r\n                                  className=\"flex inline-flex align-middle\"\r\n                                >\r\n                                  {action.icon && (\r\n                                    <Button\r\n                                      variant=\"icon\"\r\n                                      onClick={() => action.onClick(item)}\r\n                                    >\r\n                                      {action.icon}\r\n                                    </Button>\r\n                                  )}\r\n                                  {!action.icon && (\r\n                                    <Button\r\n                                      variant=\"transparent\"\r\n                                      onClick={() => action.onClick(item)}\r\n                                    >\r\n                                      {action.label}\r\n                                    </Button>\r\n                                  )}\r\n                                </div>\r\n                              ))}\r\n                        </td>\r\n                      )\r\n                    )}\r\n                  </tr>\r\n                ))}\r\n                {data?.content?.length === 0 && (\r\n                  <tr key=\"tr-nodata\">\r\n                    <td\r\n                      key=\"td-nodata\"\r\n                      className=\"px-5 py-3 border-b border-gray-200 bg-white text-sm items-center justify-center align-middle\"\r\n                      colSpan={columns.length}\r\n                    >\r\n                      No data\r\n                    </td>\r\n                  </tr>\r\n                )}\r\n              </tbody>\r\n            )}\r\n          </table>\r\n        </div>\r\n        <div className=\"w-full p-5 flex gap-5 justify-between\">\r\n          <div className=\"flex gap-5\">\r\n            {data && !data.first && (\r\n              <Button\r\n                variant=\"secondary\"\r\n                onClick={prevPage}\r\n                className=\"flex items-center\"\r\n              >\r\n                <MdArrowBack className=\"mr-1.5\" /> Previous\r\n              </Button>\r\n            )}\r\n            {data && !data.last && (\r\n              <Button\r\n                variant=\"secondary\"\r\n                onClick={nextPage}\r\n                className=\"flex items-center\"\r\n              >\r\n                Next <MdArrowForward className=\"ml-2\" size={20} />\r\n              </Button>\r\n            )}\r\n            <div className=\"flex items-center justify-end text-xs text-gray-800\">\r\n              {paginationDisplay}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </>\r\n  );\r\n}\r\n\r\nexport default DataTableServer;\r\n"],"names":["_a"],"mappings":"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"}

package/dist/components/datatable/types.d.ts

@@ -18,6 +18,7 @@ export interface DataTableColumn<T> {
 }
 export interface DataTableAction<T> {
     label: string;
+    rowAction?: boolean;
     onClick: (item: T) => void;
     visible?: (item: T) => boolean;
     icon?: React.ReactNode;

package/dist/components/form/DateField.d.ts

@@ -0,0 +1,8 @@
+import { IFormFieldGlobalProps } from '../../types';
+
+export interface IDateInputFieldProps extends IFormFieldGlobalProps {
+    minDate?: Date;
+    maxDate?: Date;
+    [key: string]: any;
+}
+export default function DateField({ label, name, value, description, required, onInputChange, placeholder, className, register, disabled, minDate, maxDate, errors, ...rest }: IDateInputFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/DateField.js

@@ -0,0 +1,98 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { D as Datepicker } from "../../index.esm-DjnEVdAW.js";
+function DateField({
+  label,
+  name,
+  value,
+  description,
+  required,
+  onInputChange,
+  placeholder,
+  className,
+  register,
+  disabled,
+  minDate,
+  maxDate,
+  errors = {},
+  ...rest
+}) {
+  var _a;
+  const createMockChangeEvent = (name2, value2) => {
+    return {
+      target: { name: name2, value: value2 },
+      currentTarget: { name: name2, value: value2 },
+      preventDefault: () => {
+      },
+      stopPropagation: () => {
+      },
+      nativeEvent: new Event("change"),
+      bubbles: true,
+      cancelable: true,
+      defaultPrevented: false,
+      eventPhase: 0,
+      isTrusted: true,
+      timeStamp: Date.now(),
+      type: "change",
+      persist: () => {
+      }
+    };
+  };
+  console.log(
+    "%clibcomponents\formDateField.tsx:41 value",
+    "color: #007acc;",
+    value
+  );
+  const handleValueChange = (newValue) => {
+    console.log("newValue:", newValue);
+    const startEvent = createMockChangeEvent(name, newValue.startDate);
+    onInputChange(startEvent);
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "min-h-30 flex-col justify-start items-start gap-1.5  w-full relative " + className,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "self-stretch flex-col justify-start items-start gap-1.5 flex py-1", children: [
+          label && /* @__PURE__ */ jsxs("div", { className: "text-slate-700 text-sm font-medium  leading-tight", children: [
+            label,
+            required ? "*" : ""
+          ] }),
+          JSON.stringify(value),
+          /* @__PURE__ */ jsx(
+            Datepicker,
+            {
+              minDate,
+              maxDate,
+              useRange: false,
+              asSingle: true,
+              primaryColor: "indigo",
+              placeholder,
+              startFrom: value.startDate ? new Date(value.startDate) : void 0,
+              disabled,
+              startWeekOn: "mon",
+              i18n: "cs",
+              value,
+              onChange: handleValueChange,
+              displayFormat: "DD.MM.YYYY",
+              inputClassName: (className2) => {
+                return className2 + " focus:ring-indigo-200  focus:ring-4 border !border-gray-200  !font-normal";
+              },
+              containerClassName: (className2) => {
+                return className2 + "  ";
+              },
+              separator: "-",
+              ...rest
+            }
+          )
+        ] }),
+        description && /* @__PURE__ */ jsx("div", { className: "self-stretch text-slate-600 text-sm font-normal leading-tight", children: description }),
+        " ",
+        errors[name] && /* @__PURE__ */ jsx("div", { className: "HintText self-stretch text-red-600 text-sm font-normal leading-tight", children: (_a = errors[name]) == null ? void 0 : _a.message })
+      ]
+    }
+  ) });
+}
+export {
+  DateField as default
+};
+//# sourceMappingURL=DateField.js.map

package/dist/components/form/DateField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateField.js","sources":["../../../lib/components/form/DateField.tsx"],"sourcesContent":["import Datepicker from \"react-tailwindcss-datepicker\";\r\nimport { ChangeEvent } from \"react\";\r\nimport { IFormFieldGlobalProps } from \"../../types\";\r\n\r\nexport interface IDateInputFieldProps extends IFormFieldGlobalProps {\r\n  minDate?: Date;\r\n  maxDate?: Date;\r\n  [key: string]: any;\r\n}\r\n\r\nexport default function DateField({\r\n  label,\r\n  name,\r\n  value,\r\n  description,\r\n  required,\r\n  onInputChange,\r\n  placeholder,\r\n  className,\r\n  register,\r\n  disabled,\r\n  minDate,\r\n  maxDate,\r\n  errors = {},\r\n  ...rest\r\n}: IDateInputFieldProps) {\r\n  // Utility function to create a mock ChangeEvent\r\n  const createMockChangeEvent = (\r\n    name: string,\r\n    value: any\r\n  ): ChangeEvent<any> => {\r\n    return {\r\n      target: { name, value },\r\n      currentTarget: { name, value },\r\n      preventDefault: () => {},\r\n      stopPropagation: () => {},\r\n      nativeEvent: new Event(\"change\"),\r\n      bubbles: true,\r\n      cancelable: true,\r\n      defaultPrevented: false,\r\n      eventPhase: 0,\r\n      isTrusted: true,\r\n      timeStamp: Date.now(),\r\n      type: \"change\",\r\n      persist: () => {},\r\n    } as ChangeEvent<any>;\r\n  };\r\n\r\n  console.log(\r\n    \"%clibcomponents\\formDateField.tsx:41 value\",\r\n    \"color: #007acc;\",\r\n    value\r\n  );\r\n  const handleValueChange = (newValue: any) => {\r\n    console.log(\"newValue:\", newValue);\r\n\r\n    const startEvent = createMockChangeEvent(name, newValue.startDate);\r\n\r\n    onInputChange(startEvent);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        className={\r\n          \"min-h-30 flex-col justify-start items-start gap-1.5  w-full relative \" +\r\n          className\r\n        }\r\n      >\r\n        <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex py-1\">\r\n          {label && (\r\n            <div className=\"text-slate-700 text-sm font-medium  leading-tight\">\r\n              {label}\r\n              {required ? \"*\" : \"\"}\r\n            </div>\r\n          )}\r\n          {JSON.stringify(value)}\r\n          <Datepicker\r\n            minDate={minDate}\r\n            maxDate={maxDate}\r\n            useRange={false}\r\n            asSingle={true}\r\n            primaryColor={\"indigo\"}\r\n            placeholder={placeholder}\r\n            startFrom={value.startDate ? new Date(value.startDate) : undefined}\r\n            disabled={disabled}\r\n            startWeekOn=\"mon\"\r\n            i18n={\"cs\"}\r\n            value={value}\r\n            onChange={handleValueChange}\r\n            displayFormat={\"DD.MM.YYYY\"}\r\n            inputClassName={(className) => {\r\n              return (\r\n                className +\r\n                \" focus:ring-indigo-200  focus:ring-4 border !border-gray-200  !font-normal\"\r\n              );\r\n            }}\r\n            containerClassName={(className) => {\r\n              return className + \"  \";\r\n            }}\r\n            separator={\"-\"}\r\n            {...rest}\r\n          />\r\n        </div>\r\n        {description && (\r\n          <div className=\"self-stretch text-slate-600 text-sm font-normal leading-tight\">\r\n            {description}\r\n          </div>\r\n        )}{\" \"}\r\n        {errors[name] && (\r\n          <div className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\">\r\n            {errors[name]?.message}\r\n          </div>\r\n        )}\r\n      </div>\r\n    </>\r\n  );\r\n}\r\n"],"names":["name","value","className"],"mappings":";;AAUA,SAAwB,UAAU;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV,GAAG;AACL,GAAyB;;AAEjB,QAAA,wBAAwB,CAC5BA,OACAC,WACqB;AACd,WAAA;AAAA,MACL,QAAQ,EAAE,MAAAD,OAAM,OAAAC,OAAM;AAAA,MACtB,eAAe,EAAE,MAAAD,OAAM,OAAAC,OAAM;AAAA,MAC7B,gBAAgB,MAAM;AAAA,MAAC;AAAA,MACvB,iBAAiB,MAAM;AAAA,MAAC;AAAA,MACxB,aAAa,IAAI,MAAM,QAAQ;AAAA,MAC/B,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,WAAW,KAAK,IAAI;AAAA,MACpB,MAAM;AAAA,MACN,SAAS,MAAM;AAAA,MAAC;AAAA,IAAA;AAAA,EAClB;AAGM,UAAA;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEI,QAAA,oBAAoB,CAAC,aAAkB;AACnC,YAAA,IAAI,aAAa,QAAQ;AAEjC,UAAM,aAAa,sBAAsB,MAAM,SAAS,SAAS;AAEjE,kBAAc,UAAU;AAAA,EAAA;AAG1B,SAEI,oBAAA,UAAA,EAAA,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WACE,0EACA;AAAA,MAGF,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAU,qEACZ,UAAA;AAAA,UACC,SAAA,qBAAC,OAAI,EAAA,WAAU,qDACZ,UAAA;AAAA,YAAA;AAAA,YACA,WAAW,MAAM;AAAA,UAAA,GACpB;AAAA,UAED,KAAK,UAAU,KAAK;AAAA,UACrB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,UAAU;AAAA,cACV,UAAU;AAAA,cACV,cAAc;AAAA,cACd;AAAA,cACA,WAAW,MAAM,YAAY,IAAI,KAAK,MAAM,SAAS,IAAI;AAAA,cACzD;AAAA,cACA,aAAY;AAAA,cACZ,MAAM;AAAA,cACN;AAAA,cACA,UAAU;AAAA,cACV,eAAe;AAAA,cACf,gBAAgB,CAACC,eAAc;AAC7B,uBACEA,aACA;AAAA,cAEJ;AAAA,cACA,oBAAoB,CAACA,eAAc;AACjC,uBAAOA,aAAY;AAAA,cACrB;AAAA,cACA,WAAW;AAAA,cACV,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,QAAA,GACF;AAAA,QACC,eACC,oBAAC,OAAI,EAAA,WAAU,iEACZ,UACH,aAAA;AAAA,QACC;AAAA,QACF,OAAO,IAAI,KACT,oBAAA,OAAA,EAAI,WAAU,wEACZ,WAAA,YAAO,IAAI,MAAX,mBAAc,QACjB,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN,EAAA,CAAA;AAEJ;"}

package/dist/components/form/FormField.d.ts

@@ -20,6 +20,8 @@ export interface FormFieldProps {
     className?: string;
     valueKey?: string;
     labelKey?: string;
+    minDate?: string;
+    maxDate?: string;
     onInputChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | any>) => void;
 }
 declare const FormField: React.FC<FormFieldProps>;

package/dist/components/form/FormField.js

@@ -25,7 +25,9 @@ const FormField = ({
   valueKey,
   labelKey,
   maxLength,
-  className
+  className,
+  minDate,
+  maxDate
 }) => {
   var _a, _b, _c, _d, _e;
   const [isFocused, setIsFocused] = useState(false);
@@ -237,6 +239,8 @@ const FormField = ({
             ref,
             placeholder,
             onChange: onInputChange,
+            min: minDate,
+            max: maxDate,
             onFocus: () => setIsFocused(true),
             onBlur: (e) => {
               formOnBlur(e);

package/dist/components/form/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sources":["../../../lib/components/form/FormField.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\r\n\r\nimport { MdClose } from \"react-icons/md\";\r\nimport { IOptionItem, useFederationContext } from \"../../main\";\r\n\r\nexport interface FormFieldProps {\r\n  label?: string;\r\n  description?: string;\r\n  name: string;\r\n  type: string;\r\n  value?: any;\r\n  register?: any;\r\n\r\n  errors?: any;\r\n  disabled?: boolean;\r\n  required?: boolean;\r\n  clearable?: boolean;\r\n  placeholder?: string;\r\n  options?: IOptionItem[];\r\n  children?: React.ReactNode;\r\n  fetchUrl?: string;\r\n  maxLength?: number;\r\n\r\n  className?: string;\r\n  valueKey?: string;\r\n  labelKey?: string;\r\n  onInputChange: (\r\n    e: React.ChangeEvent<\r\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | any\r\n    >\r\n  ) => void;\r\n}\r\n\r\nconst FormField: React.FC<FormFieldProps> = ({\r\n  label,\r\n  name,\r\n  type,\r\n  register,\r\n  disabled,\r\n  errors = {},\r\n  required,\r\n  clearable,\r\n  value,\r\n  description,\r\n  onInputChange,\r\n  options,\r\n  placeholder,\r\n  children,\r\n  fetchUrl,\r\n  valueKey,\r\n  labelKey,\r\n  maxLength,\r\n  className,\r\n}) => {\r\n  const [isFocused, setIsFocused] = useState(false);\r\n\r\n  const [localOptions, setLocalOptions] = useState(options);\r\n  const fallbackRef = useRef(null); // Create a fallback ref\r\n  const {\r\n    ref: registeredRef = fallbackRef,\r\n    onBlur: formOnBlur = () => {} /* default function */,\r\n    ...rest\r\n  } = register ? register(name) : {};\r\n\r\n  const apiClient = useFederationContext()?.apiClient;\r\n  const ref = registeredRef || fallbackRef;\r\n  const focusInput = () => {\r\n    if (ref.current) {\r\n      ref.current.focus();\r\n    }\r\n  };\r\n  const handleMultiSelectChange = (\r\n    event: React.ChangeEvent<HTMLSelectElement>\r\n  ) => {\r\n    const selectedOptions = Array.from(\r\n      event.target.selectedOptions,\r\n      (option) => option.value\r\n    );\r\n\r\n    onInputChange({\r\n      ...event,\r\n      target: {\r\n        value: selectedOptions,\r\n        name: event.target.name,\r\n      },\r\n    });\r\n  };\r\n\r\n  const handleCheckBoxChange = (\r\n    event: React.ChangeEvent<HTMLSelectElement>\r\n  ) => {\r\n    onInputChange({\r\n      ...event,\r\n      target: {\r\n        value: event.target.value == \"on\" ? true : false,\r\n        name: event.target.name,\r\n      },\r\n    });\r\n  };\r\n\r\n  const handleClear = (e: any) => {\r\n    value;\r\n    onInputChange({\r\n      ...e,\r\n      target: {\r\n        value: \"\",\r\n        name: name,\r\n      },\r\n    });\r\n  };\r\n  useEffect(() => {\r\n    const fetchOptions = async (fetchUrl: string) => {\r\n      const { data } = await apiClient.get(fetchUrl);\r\n\r\n      // Check if the first item in the data array is a number to determine the data type\r\n      const isArrayOfNumbers = typeof data[0] === \"number\";\r\n\r\n      // Transform data based on its type\r\n      const transformedOptions = data.map((item: any) => {\r\n        if (isArrayOfNumbers) {\r\n          // If it's a number, use the number for both value and label\r\n          return { value: item, label: item.toString() };\r\n        } else {\r\n          // Otherwise, extract using predefined keys or defaults\r\n          return {\r\n            value: item[valueKey || \"id\"],\r\n            label: item[labelKey || \"name\"],\r\n          };\r\n        }\r\n      });\r\n\r\n      setLocalOptions([\r\n        { value: null, label: \" \" }, // Add an empty option as the first item\r\n        ...transformedOptions,\r\n      ]);\r\n    };\r\n\r\n    if (fetchUrl) fetchOptions(fetchUrl);\r\n    if (options) setLocalOptions(options);\r\n  }, [fetchUrl, options, apiClient, valueKey, labelKey]); // ensure valueKey and labelKey are also in the dependency array if they are dynamic\r\n\r\n  const renderInput = () => {\r\n    switch (type) {\r\n      case \"select\":\r\n        return (\r\n          <>\r\n            <select\r\n              id={name}\r\n              className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent w-full\"\r\n              disabled={disabled}\r\n              value={value}\r\n              {...rest} // Spread the rest of register's return value\r\n              ref={ref}\r\n              onChange={onInputChange}\r\n              onFocus={() => setIsFocused(true)}\r\n              // Combine custom onBlur with form's onBlur\r\n              onBlur={(e) => {\r\n                formOnBlur(e); // Call React Hook Form's onBlur\r\n                setIsFocused(false); // Then call your custom onBlur logic\r\n              }}\r\n            >\r\n              {placeholder && <option label={placeholder}></option>}\r\n              {localOptions?.map((option, index) => (\r\n                <option\r\n                  key={index}\r\n                  value={\r\n                    option.value !== undefined && option.value !== null\r\n                      ? option.value.toString()\r\n                      : \"\"\r\n                  }\r\n                >\r\n                  {option.label}\r\n                </option>\r\n              ))}\r\n            </select>\r\n          </>\r\n        );\r\n      case \"multiSelect\":\r\n        return (\r\n          <>\r\n            <select\r\n              id={name}\r\n              multiple\r\n              className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent w-max-full \"\r\n              disabled={disabled}\r\n              value={Array.isArray(value) ? value : []} // Ensure value is always an array\r\n              {...rest}\r\n              ref={ref}\r\n              onChange={handleMultiSelectChange} // Use the custom multi-select handler\r\n              onFocus={() => setIsFocused(true)}\r\n              onBlur={(e) => {\r\n                formOnBlur(e);\r\n                setIsFocused(false);\r\n              }}\r\n            >\r\n              {options?.map((option) => (\r\n                <option\r\n                  key={option.value}\r\n                  value={option.value ? option.value : undefined}\r\n                >\r\n                  {option.label}\r\n                </option>\r\n              ))}\r\n            </select>\r\n          </>\r\n        );\r\n      case \"radioGroup\":\r\n        return (\r\n          <div className=\"flex flex-col\">\r\n            {options?.map((option, index) => (\r\n              <label\r\n                key={index}\r\n                className=\"inline-flex items-center space-x-2 my-2\"\r\n              >\r\n                <input\r\n                  type=\"radio\"\r\n                  name={name}\r\n                  value={option.value}\r\n                  checked={value === option.value}\r\n                  disabled={disabled}\r\n                  {...register(name)} // Spread the rest of register's return value\r\n                  onChange={onInputChange}\r\n                  className=\"text-indigo-600 border-gray-300 focus:ring-indigo-500 mr-2\"\r\n                />\r\n                <span className=\"text-gray-900 text-sm font-normal leading-tight\">\r\n                  {option.label}\r\n                </span>\r\n              </label>\r\n            ))}\r\n          </div>\r\n        );\r\n      case \"textarea\":\r\n        return (\r\n          <textarea\r\n            id={name}\r\n            className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none  \"\r\n            disabled={disabled}\r\n            value={value}\r\n            rows={3}\r\n            {...rest} // Spread the rest of register's return value\r\n            ref={ref}\r\n            onChange={onInputChange}\r\n            onFocus={() => setIsFocused(true)}\r\n            maxLength={maxLength || 4000}\r\n            // Combine custom onBlur with form's onBlur\r\n            onBlur={(e) => {\r\n              formOnBlur(e); // Call React Hook Form's onBlur\r\n              setIsFocused(false); // Then call your custom onBlur logic\r\n            }}\r\n          />\r\n        );\r\n      case \"checkbox\":\r\n        return (\r\n          <>\r\n            <input\r\n              type=\"checkbox\"\r\n              id={name}\r\n              className=\"shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none\"\r\n              checked={value}\r\n              disabled={disabled}\r\n              {...rest} // Spread the rest of register's return value\r\n              ref={ref}\r\n              onChange={handleCheckBoxChange}\r\n              onFocus={() => setIsFocused(true)}\r\n              // Combine custom onBlur with form's onBlur\r\n              onBlur={(e) => {\r\n                formOnBlur(e); // Call React Hook Form's onBlur\r\n                setIsFocused(false); // Then call your custom onBlur logic\r\n              }}\r\n            />\r\n            <label htmlFor={name}>{label}</label>\r\n          </>\r\n        );\r\n      default:\r\n        return (\r\n          <>\r\n            <input\r\n              className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent w-full\"\r\n              id={name}\r\n              readOnly={disabled}\r\n              value={value}\r\n              type={type}\r\n              {...rest} // Spread the rest of register's return value\r\n              ref={ref}\r\n              placeholder={placeholder}\r\n              onChange={onInputChange}\r\n              onFocus={() => setIsFocused(true)}\r\n              // Combine custom onBlur with form's onBlur\r\n              onBlur={(e) => {\r\n                formOnBlur(e); // Call React Hook Form's onBlur\r\n                setIsFocused(false); // Then call your custom onBlur logic\r\n              }}\r\n            />\r\n          </>\r\n        );\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div className=\"w-full min-h-30 flex-col justify-start items-start gap-1.5 inline-flex sharedLibrary\">\r\n      <div className=\"self-stretch  flex-col justify-start items-start gap-1.5 flex \">\r\n        {label && (\r\n          <label\r\n            className=\"text-slate-700 text-sm leading-tight font-medium\"\r\n            htmlFor={name}\r\n          >\r\n            {label} {required ? \"*\" : \"\"}\r\n          </label>\r\n        )}\r\n        <div\r\n          className={\r\n            `self-stretch px-3  py-1 rounded-lg justify-start items-center  inline-flex outline-none border  ` +\r\n            ` ${\r\n              isFocused && !errors[name]?.message\r\n                ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300\"\r\n                : \"\"\r\n            }` +\r\n            ` ${\r\n              isFocused && errors[name]?.message\r\n                ? \"outline-4 outline-red-200 outline-offset-0 border-none\"\r\n                : \"\"\r\n            } ` +\r\n            ` ${!isFocused && errors[name]?.message ? \"border-red-200\" : \"\"} ` +\r\n            ` ${disabled ? \"bg-gray-100\" : \"bg-transparent\"}` +\r\n            \" \" +\r\n            className\r\n          }\r\n        >\r\n          <div className=\"flex relative grow shrink basis-0 min-h-5 xl:min-h-[32px] justify-start items-stretch gap-1 w-full  \">\r\n            {renderInput()}\r\n            {children && <div onClick={focusInput}>{children}</div>}\r\n            {clearable && value && (\r\n              <div className=\"flex items-center justify-center\">\r\n                <MdClose onClick={handleClear} size={20}></MdClose>\r\n              </div>\r\n            )}{\" \"}\r\n          </div>\r\n        </div>\r\n      </div>\r\n      {description && (\r\n        <div className=\"HintText self-stretch text-slate-600 text-sm font-normal leading-tight\">\r\n          {description}\r\n        </div>\r\n      )}\r\n      {errors[name] && (\r\n        <div className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\">\r\n          {errors[name]?.message}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default FormField;\r\n"],"names":["fetchUrl"],"mappings":";;;;;;;;AAiCA,MAAM,YAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,OAAO;AAClD,QAAA,cAAc,OAAO,IAAI;AACzB,QAAA;AAAA,IACJ,KAAK,gBAAgB;AAAA,IACrB,QAAQ,aAAa,MAAM;AAAA,IAAC;AAAA,IAC5B,GAAG;AAAA,EACD,IAAA,WAAW,SAAS,IAAI,IAAI,CAAA;AAE1B,QAAA,aAAY,0BAAwB,MAAxB,mBAAwB;AAC1C,QAAM,MAAM,iBAAiB;AAC7B,QAAM,aAAa,MAAM;AACvB,QAAI,IAAI,SAAS;AACf,UAAI,QAAQ;IACd;AAAA,EAAA;AAEI,QAAA,0BAA0B,CAC9B,UACG;AACH,UAAM,kBAAkB,MAAM;AAAA,MAC5B,MAAM,OAAO;AAAA,MACb,CAAC,WAAW,OAAO;AAAA,IAAA;AAGP,kBAAA;AAAA,MACZ,GAAG;AAAA,MACH,QAAQ;AAAA,QACN,OAAO;AAAA,QACP,MAAM,MAAM,OAAO;AAAA,MACrB;AAAA,IAAA,CACD;AAAA,EAAA;AAGG,QAAA,uBAAuB,CAC3B,UACG;AACW,kBAAA;AAAA,MACZ,GAAG;AAAA,MACH,QAAQ;AAAA,QACN,OAAO,MAAM,OAAO,SAAS,OAAO,OAAO;AAAA,QAC3C,MAAM,MAAM,OAAO;AAAA,MACrB;AAAA,IAAA,CACD;AAAA,EAAA;AAGG,QAAA,cAAc,CAAC,MAAW;AAEhB,kBAAA;AAAA,MACZ,GAAG;AAAA,MACH,QAAQ;AAAA,QACN,OAAO;AAAA,QACP;AAAA,MACF;AAAA,IAAA,CACD;AAAA,EAAA;AAEH,YAAU,MAAM;AACR,UAAA,eAAe,OAAOA,cAAqB;AAC/C,YAAM,EAAE,KAAK,IAAI,MAAM,UAAU,IAAIA,SAAQ;AAG7C,YAAM,mBAAmB,OAAO,KAAK,CAAC,MAAM;AAG5C,YAAM,qBAAqB,KAAK,IAAI,CAAC,SAAc;AACjD,YAAI,kBAAkB;AAEpB,iBAAO,EAAE,OAAO,MAAM,OAAO,KAAK;QAAW,OACxC;AAEE,iBAAA;AAAA,YACL,OAAO,KAAK,YAAY,IAAI;AAAA,YAC5B,OAAO,KAAK,YAAY,MAAM;AAAA,UAAA;AAAA,QAElC;AAAA,MAAA,CACD;AAEe,sBAAA;AAAA,QACd,EAAE,OAAO,MAAM,OAAO,IAAI;AAAA;AAAA,QAC1B,GAAG;AAAA,MAAA,CACJ;AAAA,IAAA;AAGC,QAAA;AAAU,mBAAa,QAAQ;AAC/B,QAAA;AAAS,sBAAgB,OAAO;AAAA,EAAA,GACnC,CAAC,UAAU,SAAS,WAAW,UAAU,QAAQ,CAAC;AAErD,QAAM,cAAc,MAAM;AACxB,YAAQ,MAAM;AAAA,MACZ,KAAK;AACH,eAEI,oBAAA,UAAA,EAAA,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,WAAU;AAAA,YACV;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YACJ;AAAA,YACA,UAAU;AAAA,YACV,SAAS,MAAM,aAAa,IAAI;AAAA,YAEhC,QAAQ,CAAC,MAAM;AACb,yBAAW,CAAC;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA,YAEC,UAAA;AAAA,cAAe,eAAA,oBAAC,UAAO,EAAA,OAAO,YAAa,CAAA;AAAA,cAC3C,6CAAc,IAAI,CAAC,QAAQ,UAC1B;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,OACE,OAAO,UAAU,UAAa,OAAO,UAAU,OAC3C,OAAO,MAAM,SACb,IAAA;AAAA,kBAGL,UAAO,OAAA;AAAA,gBAAA;AAAA,gBAPH;AAAA,cAAA;AAAA,YASR;AAAA,UAAA;AAAA,QAEL,EAAA,CAAA;AAAA,MAEJ,KAAK;AACH,eAEI,oBAAA,UAAA,EAAA,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,UAAQ;AAAA,YACR,WAAU;AAAA,YACV;AAAA,YACA,OAAO,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC;AAAA,YACtC,GAAG;AAAA,YACJ;AAAA,YACA,UAAU;AAAA,YACV,SAAS,MAAM,aAAa,IAAI;AAAA,YAChC,QAAQ,CAAC,MAAM;AACb,yBAAW,CAAC;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA,YAEC,UAAA,mCAAS,IAAI,CAAC,WACb;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,OAAO,OAAO,QAAQ,OAAO,QAAQ;AAAA,gBAEpC,UAAO,OAAA;AAAA,cAAA;AAAA,cAHH,OAAO;AAAA,YAAA;AAAA,UAKf;AAAA,QAEL,EAAA,CAAA;AAAA,MAEJ,KAAK;AAED,eAAA,oBAAC,SAAI,WAAU,iBACZ,6CAAS,IAAI,CAAC,QAAQ,UACrB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YAEV,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL;AAAA,kBACA,OAAO,OAAO;AAAA,kBACd,SAAS,UAAU,OAAO;AAAA,kBAC1B;AAAA,kBACC,GAAG,SAAS,IAAI;AAAA,kBACjB,UAAU;AAAA,kBACV,WAAU;AAAA,gBAAA;AAAA,cACZ;AAAA,cACC,oBAAA,QAAA,EAAK,WAAU,mDACb,iBAAO,OACV;AAAA,YAAA;AAAA,UAAA;AAAA,UAfK;AAAA,QAiBR,GACH,CAAA;AAAA,MAEJ,KAAK;AAED,eAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,WAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA,MAAM;AAAA,YACL,GAAG;AAAA,YACJ;AAAA,YACA,UAAU;AAAA,YACV,SAAS,MAAM,aAAa,IAAI;AAAA,YAChC,WAAW,aAAa;AAAA,YAExB,QAAQ,CAAC,MAAM;AACb,yBAAW,CAAC;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA,UAAA;AAAA,QAAA;AAAA,MAGN,KAAK;AACH,eAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAI;AAAA,cACJ,WAAU;AAAA,cACV,SAAS;AAAA,cACT;AAAA,cACC,GAAG;AAAA,cACJ;AAAA,cACA,UAAU;AAAA,cACV,SAAS,MAAM,aAAa,IAAI;AAAA,cAEhC,QAAQ,CAAC,MAAM;AACb,2BAAW,CAAC;AACZ,6BAAa,KAAK;AAAA,cACpB;AAAA,YAAA;AAAA,UACF;AAAA,UACC,oBAAA,SAAA,EAAM,SAAS,MAAO,UAAM,OAAA;AAAA,QAC/B,EAAA,CAAA;AAAA,MAEJ;AACE,eAEI,oBAAA,UAAA,EAAA,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,YACJ,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV,SAAS,MAAM,aAAa,IAAI;AAAA,YAEhC,QAAQ,CAAC,MAAM;AACb,yBAAW,CAAC;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA,UAAA;AAAA,QAEJ,EAAA,CAAA;AAAA,IAEN;AAAA,EAAA;AAIA,SAAA,qBAAC,OAAI,EAAA,WAAU,wFACb,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAU,kEACZ,UAAA;AAAA,MACC,SAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS;AAAA,UAER,UAAA;AAAA,YAAA;AAAA,YAAM;AAAA,YAAE,WAAW,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MAC5B;AAAA,MAEF;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WACE,oGAEE,aAAa,GAAC,YAAO,IAAI,MAAX,mBAAc,WACxB,oEACA,EACN,IAEE,eAAa,YAAO,IAAI,MAAX,mBAAc,WACvB,2DACA,EACN,KACI,CAAC,eAAa,YAAO,IAAI,MAAX,mBAAc,WAAU,mBAAmB,EAAE,KAC3D,WAAW,gBAAgB,gBAAgB,MAE/C;AAAA,UAGF,UAAA,qBAAC,OAAI,EAAA,WAAU,wGACZ,UAAA;AAAA,YAAY,YAAA;AAAA,YACZ,YAAY,oBAAC,OAAI,EAAA,SAAS,YAAa,UAAS;AAAA,YAChD,aAAa,SACX,oBAAA,OAAA,EAAI,WAAU,oCACb,UAAC,oBAAA,SAAA,EAAQ,SAAS,aAAa,MAAM,GAAI,CAAA,GAC3C;AAAA,YACC;AAAA,UAAA,GACL;AAAA,QAAA;AAAA,MACF;AAAA,IAAA,GACF;AAAA,IACC,eACC,oBAAC,OAAI,EAAA,WAAU,0EACZ,UACH,aAAA;AAAA,IAED,OAAO,IAAI,KACT,oBAAA,OAAA,EAAI,WAAU,wEACZ,WAAA,YAAO,IAAI,MAAX,mBAAc,QACjB,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"FormField.js","sources":["../../../lib/components/form/FormField.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\r\n\r\nimport { MdClose } from \"react-icons/md\";\r\nimport { IOptionItem, useFederationContext } from \"../../main\";\r\n\r\nexport interface FormFieldProps {\r\n  label?: string;\r\n  description?: string;\r\n  name: string;\r\n  type: string;\r\n  value?: any;\r\n  register?: any;\r\n\r\n  errors?: any;\r\n  disabled?: boolean;\r\n  required?: boolean;\r\n  clearable?: boolean;\r\n  placeholder?: string;\r\n  options?: IOptionItem[];\r\n  children?: React.ReactNode;\r\n  fetchUrl?: string;\r\n  maxLength?: number;\r\n\r\n  className?: string;\r\n  valueKey?: string;\r\n  labelKey?: string;\r\n  minDate?: string;\r\n  maxDate?: string;\r\n  onInputChange: (\r\n    e: React.ChangeEvent<\r\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | any\r\n    >\r\n  ) => void;\r\n}\r\n\r\nconst FormField: React.FC<FormFieldProps> = ({\r\n  label,\r\n  name,\r\n  type,\r\n  register,\r\n  disabled,\r\n  errors = {},\r\n  required,\r\n  clearable,\r\n  value,\r\n  description,\r\n  onInputChange,\r\n  options,\r\n  placeholder,\r\n  children,\r\n  fetchUrl,\r\n  valueKey,\r\n  labelKey,\r\n  maxLength,\r\n  className,\r\n  minDate,\r\n  maxDate,\r\n}) => {\r\n  const [isFocused, setIsFocused] = useState(false);\r\n\r\n  const [localOptions, setLocalOptions] = useState(options);\r\n  const fallbackRef = useRef(null); // Create a fallback ref\r\n  const {\r\n    ref: registeredRef = fallbackRef,\r\n    onBlur: formOnBlur = () => {} /* default function */,\r\n    ...rest\r\n  } = register ? register(name) : {};\r\n\r\n  const apiClient = useFederationContext()?.apiClient;\r\n  const ref = registeredRef || fallbackRef;\r\n  const focusInput = () => {\r\n    if (ref.current) {\r\n      ref.current.focus();\r\n    }\r\n  };\r\n  const handleMultiSelectChange = (\r\n    event: React.ChangeEvent<HTMLSelectElement>\r\n  ) => {\r\n    const selectedOptions = Array.from(\r\n      event.target.selectedOptions,\r\n      (option) => option.value\r\n    );\r\n\r\n    onInputChange({\r\n      ...event,\r\n      target: {\r\n        value: selectedOptions,\r\n        name: event.target.name,\r\n      },\r\n    });\r\n  };\r\n\r\n  const handleCheckBoxChange = (\r\n    event: React.ChangeEvent<HTMLSelectElement>\r\n  ) => {\r\n    onInputChange({\r\n      ...event,\r\n      target: {\r\n        value: event.target.value == \"on\" ? true : false,\r\n        name: event.target.name,\r\n      },\r\n    });\r\n  };\r\n\r\n  const handleClear = (e: any) => {\r\n    value;\r\n    onInputChange({\r\n      ...e,\r\n      target: {\r\n        value: \"\",\r\n        name: name,\r\n      },\r\n    });\r\n  };\r\n  useEffect(() => {\r\n    const fetchOptions = async (fetchUrl: string) => {\r\n      const { data } = await apiClient.get(fetchUrl);\r\n\r\n      // Check if the first item in the data array is a number to determine the data type\r\n      const isArrayOfNumbers = typeof data[0] === \"number\";\r\n\r\n      // Transform data based on its type\r\n      const transformedOptions = data.map((item: any) => {\r\n        if (isArrayOfNumbers) {\r\n          // If it's a number, use the number for both value and label\r\n          return { value: item, label: item.toString() };\r\n        } else {\r\n          // Otherwise, extract using predefined keys or defaults\r\n          return {\r\n            value: item[valueKey || \"id\"],\r\n            label: item[labelKey || \"name\"],\r\n          };\r\n        }\r\n      });\r\n\r\n      setLocalOptions([\r\n        { value: null, label: \" \" }, // Add an empty option as the first item\r\n        ...transformedOptions,\r\n      ]);\r\n    };\r\n\r\n    if (fetchUrl) fetchOptions(fetchUrl);\r\n    if (options) setLocalOptions(options);\r\n  }, [fetchUrl, options, apiClient, valueKey, labelKey]); // ensure valueKey and labelKey are also in the dependency array if they are dynamic\r\n\r\n  const renderInput = () => {\r\n    switch (type) {\r\n      case \"select\":\r\n        return (\r\n          <>\r\n            <select\r\n              id={name}\r\n              className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent w-full\"\r\n              disabled={disabled}\r\n              value={value}\r\n              {...rest} // Spread the rest of register's return value\r\n              ref={ref}\r\n              onChange={onInputChange}\r\n              onFocus={() => setIsFocused(true)}\r\n              // Combine custom onBlur with form's onBlur\r\n              onBlur={(e) => {\r\n                formOnBlur(e); // Call React Hook Form's onBlur\r\n                setIsFocused(false); // Then call your custom onBlur logic\r\n              }}\r\n            >\r\n              {placeholder && <option label={placeholder}></option>}\r\n              {localOptions?.map((option, index) => (\r\n                <option\r\n                  key={index}\r\n                  value={\r\n                    option.value !== undefined && option.value !== null\r\n                      ? option.value.toString()\r\n                      : \"\"\r\n                  }\r\n                >\r\n                  {option.label}\r\n                </option>\r\n              ))}\r\n            </select>\r\n          </>\r\n        );\r\n      case \"multiSelect\":\r\n        return (\r\n          <>\r\n            <select\r\n              id={name}\r\n              multiple\r\n              className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent w-max-full \"\r\n              disabled={disabled}\r\n              value={Array.isArray(value) ? value : []} // Ensure value is always an array\r\n              {...rest}\r\n              ref={ref}\r\n              onChange={handleMultiSelectChange} // Use the custom multi-select handler\r\n              onFocus={() => setIsFocused(true)}\r\n              onBlur={(e) => {\r\n                formOnBlur(e);\r\n                setIsFocused(false);\r\n              }}\r\n            >\r\n              {options?.map((option) => (\r\n                <option\r\n                  key={option.value}\r\n                  value={option.value ? option.value : undefined}\r\n                >\r\n                  {option.label}\r\n                </option>\r\n              ))}\r\n            </select>\r\n          </>\r\n        );\r\n      case \"radioGroup\":\r\n        return (\r\n          <div className=\"flex flex-col\">\r\n            {options?.map((option, index) => (\r\n              <label\r\n                key={index}\r\n                className=\"inline-flex items-center space-x-2 my-2\"\r\n              >\r\n                <input\r\n                  type=\"radio\"\r\n                  name={name}\r\n                  value={option.value}\r\n                  checked={value === option.value}\r\n                  disabled={disabled}\r\n                  {...register(name)} // Spread the rest of register's return value\r\n                  onChange={onInputChange}\r\n                  className=\"text-indigo-600 border-gray-300 focus:ring-indigo-500 mr-2\"\r\n                />\r\n                <span className=\"text-gray-900 text-sm font-normal leading-tight\">\r\n                  {option.label}\r\n                </span>\r\n              </label>\r\n            ))}\r\n          </div>\r\n        );\r\n      case \"textarea\":\r\n        return (\r\n          <textarea\r\n            id={name}\r\n            className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none  \"\r\n            disabled={disabled}\r\n            value={value}\r\n            rows={3}\r\n            {...rest} // Spread the rest of register's return value\r\n            ref={ref}\r\n            onChange={onInputChange}\r\n            onFocus={() => setIsFocused(true)}\r\n            maxLength={maxLength || 4000}\r\n            // Combine custom onBlur with form's onBlur\r\n            onBlur={(e) => {\r\n              formOnBlur(e); // Call React Hook Form's onBlur\r\n              setIsFocused(false); // Then call your custom onBlur logic\r\n            }}\r\n          />\r\n        );\r\n      case \"checkbox\":\r\n        return (\r\n          <>\r\n            <input\r\n              type=\"checkbox\"\r\n              id={name}\r\n              className=\"shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none\"\r\n              checked={value}\r\n              disabled={disabled}\r\n              {...rest} // Spread the rest of register's return value\r\n              ref={ref}\r\n              onChange={handleCheckBoxChange}\r\n              onFocus={() => setIsFocused(true)}\r\n              // Combine custom onBlur with form's onBlur\r\n              onBlur={(e) => {\r\n                formOnBlur(e); // Call React Hook Form's onBlur\r\n                setIsFocused(false); // Then call your custom onBlur logic\r\n              }}\r\n            />\r\n            <label htmlFor={name}>{label}</label>\r\n          </>\r\n        );\r\n      default:\r\n        return (\r\n          <>\r\n            <input\r\n              className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent w-full\"\r\n              id={name}\r\n              readOnly={disabled}\r\n              value={value}\r\n              type={type}\r\n              {...rest} // Spread the rest of register's return value\r\n              ref={ref}\r\n              placeholder={placeholder}\r\n              onChange={onInputChange}\r\n              min={minDate}\r\n              max={maxDate}\r\n              onFocus={() => setIsFocused(true)}\r\n              // Combine custom onBlur with form's onBlur\r\n              onBlur={(e) => {\r\n                formOnBlur(e); // Call React Hook Form's onBlur\r\n                setIsFocused(false); // Then call your custom onBlur logic\r\n              }}\r\n            />\r\n          </>\r\n        );\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div className=\"w-full min-h-30 flex-col justify-start items-start gap-1.5 inline-flex sharedLibrary\">\r\n      <div className=\"self-stretch  flex-col justify-start items-start gap-1.5 flex \">\r\n        {label && (\r\n          <label\r\n            className=\"text-slate-700 text-sm leading-tight font-medium\"\r\n            htmlFor={name}\r\n          >\r\n            {label} {required ? \"*\" : \"\"}\r\n          </label>\r\n        )}\r\n        <div\r\n          className={\r\n            `self-stretch px-3  py-1 rounded-lg justify-start items-center  inline-flex outline-none border  ` +\r\n            ` ${\r\n              isFocused && !errors[name]?.message\r\n                ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300\"\r\n                : \"\"\r\n            }` +\r\n            ` ${\r\n              isFocused && errors[name]?.message\r\n                ? \"outline-4 outline-red-200 outline-offset-0 border-none\"\r\n                : \"\"\r\n            } ` +\r\n            ` ${!isFocused && errors[name]?.message ? \"border-red-200\" : \"\"} ` +\r\n            ` ${disabled ? \"bg-gray-100\" : \"bg-transparent\"}` +\r\n            \" \" +\r\n            className\r\n          }\r\n        >\r\n          <div className=\"flex relative grow shrink basis-0 min-h-5 xl:min-h-[32px] justify-start items-stretch gap-1 w-full  \">\r\n            {renderInput()}\r\n            {children && <div onClick={focusInput}>{children}</div>}\r\n            {clearable && value && (\r\n              <div className=\"flex items-center justify-center\">\r\n                <MdClose onClick={handleClear} size={20}></MdClose>\r\n              </div>\r\n            )}{\" \"}\r\n          </div>\r\n        </div>\r\n      </div>\r\n      {description && (\r\n        <div className=\"HintText self-stretch text-slate-600 text-sm font-normal leading-tight\">\r\n          {description}\r\n        </div>\r\n      )}\r\n      {errors[name] && (\r\n        <div className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\">\r\n          {errors[name]?.message}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default FormField;\r\n"],"names":["fetchUrl"],"mappings":"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"}

package/dist/main.d.ts

@@ -15,6 +15,7 @@ export { default as DataTable } from './components/datatable/DataTable.tsx';
 export { default as DataTableServer } from './components/datatable/DataTableServer.tsx';
 export { default as ProfileOverview } from './components/profiles/ProfileOverview.tsx';
 export { default as DateRangeField } from './components/form/DateRangeField.tsx';
+export { default as DateField } from './components/form/DateField.tsx';
 export * from './components/datatable/types.ts';
 export * from './contexts/FederationContext.tsx';
 export * from './contexts/useFederationContext.ts';

package/dist/main.js

@@ -15,6 +15,7 @@ import { default as default13 } from "./components/datatable/DataTable.js";
 import { default as default14 } from "./components/datatable/DataTableServer.js";
 import { default as default15 } from "./components/profiles/ProfileOverview.js";
 import { default as default16 } from "./components/form/DateRangeField.js";
+import { default as default17 } from "./components/form/DateField.js";
 import { FederationContext, FederationContextProvider } from "./contexts/FederationContext.js";
 import { useFederationContext } from "./contexts/useFederationContext.js";
 import { getFullName, getFullNameList, getFullNameListPositionWithEmployee, getFullNamePositionWithEmployee } from "./utils/getFullName.js";
@@ -28,6 +29,7 @@ export {
   ConfirmationModalDialog,
   default13 as DataTable,
   default14 as DataTableServer,
+  default17 as DateField,
   default16 as DateRangeField,
   EApproverRoles,
   EApproverTypes,

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"main.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@addsign/moje-agenda-shared-lib",
   "private": false,
-  "version": "0.0.70",
+  "version": "0.0.72",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",