@addsign/moje-agenda-shared-lib 0.0.55 → 0.0.59

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

@@ -1,24 +1,8 @@
-import { UseFormReturn } from 'react-hook-form';
-import { IOptionItem } from '../../types';
-import * as React from "react";
-export interface IFormFieldGlobalProps {
-    label?: string;
-    description?: string;
-    name: string;
-    type: string;
-    value?: any;
-    methods?: UseFormReturn<any>;
-    disabled?: boolean;
-    required?: boolean;
-    clearable?: boolean;
-    placeholder?: string;
-    children?: React.ReactNode;
-    className?: string;
-    onInputChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | any>) => void;
-}
+import { IFormFieldGlobalProps, IOptionItem } from '../../types';
+
 export interface ISelectFieldProps extends IFormFieldGlobalProps {
     options?: IOptionItem[];
     valueKey?: string;
     labelKey?: string;
 }
-export default function SelectField({ label, name, value, description, onInputChange, options, placeholder, }: ISelectFieldProps): import("react/jsx-runtime").JSX.Element;
+export default function SelectField({ label, name, value, description, onInputChange, options, placeholder, className, errors, }: ISelectFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/SelectField.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { M as MdClose, a as MdExpandLess, b as MdExpandMore, c as MdCheck } from "../../index-qxZYrVct.js";
+import { b as MdClose, M as MdExpandLess, a as MdExpandMore, j as MdCheck } from "../../index-ClXm2PIX.js";
 import { u as useClickAway } from "../../useClickAway-CH9ykBsx.js";
 function SelectField({
   label,
@@ -9,8 +9,11 @@ function SelectField({
   description,
   onInputChange,
   options,
-  placeholder
+  placeholder,
+  className,
+  errors = {}
 }) {
+  var _a;
   const [isFocused, setIsFocused] = React.useState(false);
   const ref = React.useRef(null);
   const handleClear = (e) => {
@@ -39,7 +42,7 @@ function SelectField({
     setIsFocused(false);
   };
   const currentlySelectedOption = React.useMemo(() => {
-    if (!value)
+    if (value === null || value === void 0 || value === "")
       return null;
     return options == null ? void 0 : options.find((option) => option.value === value);
   }, [options, value]);
@@ -50,20 +53,20 @@ function SelectField({
       "div",
       {
         id: "list",
-        className: "max-h-[390px]  bg-white rounded-lg shadow-xl border border-gray-200 justify-start items-start inline-flex  overflow-auto  w-full mt-[1px]",
+        className: "max-h-[390px] min-w-32 whitespace-nowrap fixed  z-[100000] top-auto mt-[4px] bg-white rounded-lg shadow-xl border border-gray-200 justify-start items-start inline-flex  overflow-auto ",
         children: /* @__PURE__ */ jsx("div", { className: "grow shrink basis-0 py-1 flex-col justify-start items-start inline-flex", children: options.map((option, index) => {
           return /* @__PURE__ */ jsxs(
             "div",
             {
-              className: "group self-stretch px-1.5 py-px justify-start items-center inline-flex hover:bg-gray-50",
+              className: "group self-stretch px-1.5 py-px justify-start items-center inline-flex hover:bg-gray-50 ",
               onClick: () => hangleChange(option),
               children: [
-                /* @__PURE__ */ jsx("div", { className: "grow shrink basis-0 pl-2 pr-2.5 py-2.5 rounded-md flex-col justify-start items-start gap-2 inline-flex", children: /* @__PURE__ */ jsxs("div", { className: "self-stretch justify-start items-center gap-2 inline-flex", children: [
-                  /* @__PURE__ */ jsx("div", { className: "text-gray-900 text-base font-medium  leading-normal", children: option.label }),
-                  option.description && /* @__PURE__ */ jsx("div", { className: "text-slate-600 text-base font-normal leading-normal", children: option.description })
+                /* @__PURE__ */ jsx("div", { className: "grow shrink basis-0 px-1  py-2 rounded-md flex-col justify-start items-start gap-2 inline-flex", children: /* @__PURE__ */ jsxs("div", { className: "self-stretch justify-start items-center gap-2 inline-flex", children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-gray-900 text-sm font-medium  leading-normal", children: option.label }),
+                  option.description && /* @__PURE__ */ jsx("div", { className: "text-slate-600 sm-base font-normal leading-normal", children: option.description })
                 ] }) }),
                 /* @__PURE__ */ jsxs("div", { className: "w-5 h-5 relative", children: [
-                  option.value === value && /* @__PURE__ */ jsx(MdCheck, { size: 22, className: "text-primary" }),
+                  option.value === value && value !== "" && /* @__PURE__ */ jsx(MdCheck, { size: 22, className: "text-primary" }),
                   " ",
                   option.value !== value && /* @__PURE__ */ jsx(
                     MdCheck,
@@ -81,34 +84,44 @@ function SelectField({
       }
     );
   };
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "w-[500px] h-[600px] ", id: "parent", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: " flex-col justify-start items-start gap-2 inline-flex  w-full",
+      className: "min-h-30 flex-col justify-start items-start gap-1.5  w-full relative " + className,
       id: "component",
       ref,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "self-stretch h-16 flex-col justify-start items-start gap-1.5 flex", children: [
+        /* @__PURE__ */ jsxs("div", { className: "self-stretch flex-col justify-start items-start gap-1.5 flex", children: [
           label && /* @__PURE__ */ jsx("div", { className: "text-slate-700 text-sm font-medium  leading-tight", children: label }),
           /* @__PURE__ */ jsxs(
             "div",
             {
-              className: `self-stretch px-3.5 py-2.5 bg-white rounded-lg shadow border justify-start items-center gap-2 inline-flex outline-none 
+              className: `self-stretch w-full px-3  py-1 bg-white rounded-lg  border justify-start items-center gap-0 inline-flex outline-none 
                ${isFocused ? "outline-4 outline-indigo-200 outline-offset-0 border-indigo-300 " : ""}`,
               onClick: () => handleToggleFocus(),
               children: [
-                /* @__PURE__ */ jsxs("div", { className: "grow shrink basis-0 h-6 justify-start items-center gap-2 flex", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "text-gray-900 text-base font-medium leading-normal", children: [
+                /* @__PURE__ */ jsxs("div", { className: "grow shrink basis-0 min-h-5 xl:min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] ", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "text-gray-900 text-sm font-medium leading-normal text-ellipsis overflow-hidden w-full", children: [
                     currentlySelectedOption == null ? void 0 : currentlySelectedOption.label,
                     !(currentlySelectedOption == null ? void 0 : currentlySelectedOption.label) && placeholder && /* @__PURE__ */ jsxs("span", { className: "text-slate-400 font-normal", children: [
                       " ",
                       placeholder
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx("div", { className: "text-slate-600 text-base font-normal leading-normal", children: currentlySelectedOption == null ? void 0 : currentlySelectedOption.description }),
-                  value && /* @__PURE__ */ jsx("div", { className: "pl-1.5", onClick: handleClear, children: /* @__PURE__ */ jsx(MdClose, {}) })
+                  /* @__PURE__ */ jsx("div", { className: "text-slate-600 text-base font-normal leading-normal", children: currentlySelectedOption == null ? void 0 : currentlySelectedOption.description })
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: "w-5 h-5 relative", children: /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex items-center justify-center", children: [
+                value !== "" && value !== null && value !== void 0 && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "w-6 h-6 relative  cursor-pointer  ",
+                    onClick: handleClear,
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg", children: /* @__PURE__ */ jsx(MdClose, {}) }),
+                      " "
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "w-6 h-6 relative  cursor-pointer ", children: /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg", children: [
                   isFocused && /* @__PURE__ */ jsx(MdExpandLess, {}),
                   !isFocused && /* @__PURE__ */ jsx(MdExpandMore, {})
                 ] }) })
@@ -117,10 +130,11 @@ function SelectField({
           )
         ] }),
         description && !isFocused && /* @__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 }),
         isFocused && listOfOptions()
       ]
     }
-  ) }) });
+  ) });
 }
 export {
   SelectField as default

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

@@ -1 +1 @@
-{"version":3,"file":"SelectField.js","sources":["../../../lib/components/form/SelectField.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { UseFormReturn } from \"react-hook-form\";\r\nimport { IOptionItem } from \"../../types\";\r\nimport { MdCheck, MdClose, MdExpandLess, MdExpandMore } from \"react-icons/md\";\r\nimport { useClickAway } from \"react-use\";\r\n\r\nexport interface IFormFieldGlobalProps {\r\n  label?: string;\r\n  description?: string;\r\n  name: string;\r\n  type: string;\r\n  value?: any;\r\n\r\n  methods?: UseFormReturn<any>;\r\n\r\n  disabled?: boolean;\r\n  required?: boolean;\r\n  clearable?: boolean;\r\n  placeholder?: string;\r\n  children?: React.ReactNode;\r\n  className?: string;\r\n\r\n  onInputChange: (\r\n    e: React.ChangeEvent<\r\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | any\r\n    >\r\n  ) => void;\r\n}\r\n\r\nexport interface ISelectFieldProps extends IFormFieldGlobalProps {\r\n  options?: IOptionItem[];\r\n  valueKey?: string;\r\n  labelKey?: string;\r\n}\r\n\r\nexport default function SelectField({\r\n  label,\r\n  name,\r\n  value,\r\n  description,\r\n  onInputChange,\r\n  options,\r\n  placeholder,\r\n}: ISelectFieldProps) {\r\n  const [isFocused, setIsFocused] = React.useState(false);\r\n  const ref = React.useRef(null);\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  const handleToggleFocus = () => {\r\n    setIsFocused((prev) => !prev);\r\n  };\r\n\r\n  useClickAway(ref, () => {\r\n    setIsFocused(false);\r\n  });\r\n\r\n  const hangleChange = (option: IOptionItem) => {\r\n    const tmp: any = {\r\n      target: {\r\n        value: option.value,\r\n        name: name,\r\n      },\r\n    };\r\n\r\n    onInputChange(tmp);\r\n    setIsFocused(false);\r\n  };\r\n  const currentlySelectedOption = React.useMemo(() => {\r\n    if (!value) return null;\r\n    return options?.find((option) => option.value === value);\r\n  }, [options, value]);\r\n\r\n  const listOfOptions = () => {\r\n    if (!options) return [];\r\n    return (\r\n      <div\r\n        id=\"list\"\r\n        className=\"max-h-[390px]  bg-white rounded-lg shadow-xl border border-gray-200 justify-start items-start inline-flex  overflow-auto  w-full mt-[1px]\"\r\n      >\r\n        <div className=\"grow shrink basis-0 py-1 flex-col justify-start items-start inline-flex\">\r\n          {options.map((option, index) => {\r\n            return (\r\n              <div\r\n                className=\"group self-stretch px-1.5 py-px justify-start items-center inline-flex hover:bg-gray-50\"\r\n                onClick={() => hangleChange(option)}\r\n                key={index}\r\n              >\r\n                <div className=\"grow shrink basis-0 pl-2 pr-2.5 py-2.5 rounded-md flex-col justify-start items-start gap-2 inline-flex\">\r\n                  <div className=\"self-stretch justify-start items-center gap-2 inline-flex\">\r\n                    <div className=\"text-gray-900 text-base font-medium  leading-normal\">\r\n                      {option.label}\r\n                    </div>\r\n                    {option.description && (\r\n                      <div className=\"text-slate-600 text-base font-normal leading-normal\">\r\n                        {option.description}\r\n                      </div>\r\n                    )}\r\n                  </div>\r\n                </div>\r\n                <div className=\"w-5 h-5 relative\">\r\n                  {option.value === value && (\r\n                    <MdCheck size={22} className=\"text-primary\" />\r\n                  )}{\" \"}\r\n                  {option.value !== value && (\r\n                    <MdCheck\r\n                      size={22}\r\n                      className=\"text-transparent group-hover:text-gray-300\"\r\n                    />\r\n                  )}\r\n                </div>\r\n              </div>\r\n            );\r\n          })}\r\n        </div>\r\n      </div>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <div className=\"w-[500px] h-[600px] \" id=\"parent\">\r\n        <div\r\n          className=\" flex-col justify-start items-start gap-2 inline-flex  w-full\"\r\n          id=\"component\"\r\n          ref={ref}\r\n        >\r\n          <div className=\"self-stretch h-16 flex-col justify-start items-start gap-1.5 flex\">\r\n            {label && (\r\n              <div className=\"text-slate-700 text-sm font-medium  leading-tight\">\r\n                {label}\r\n              </div>\r\n            )}\r\n            <div\r\n              className={`self-stretch px-3.5 py-2.5 bg-white rounded-lg shadow border justify-start items-center gap-2 inline-flex outline-none \r\n               ${isFocused ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300 \" : \"\"}`}\r\n              onClick={() => handleToggleFocus()}\r\n            >\r\n              <div className=\"grow shrink basis-0 h-6 justify-start items-center gap-2 flex\">\r\n                <div className=\"text-gray-900 text-base font-medium leading-normal\">\r\n                  {currentlySelectedOption?.label}\r\n                  {!currentlySelectedOption?.label && placeholder && (\r\n                    <span className=\"text-slate-400 font-normal\">\r\n                      {\" \"}\r\n                      {placeholder}\r\n                    </span>\r\n                  )}\r\n                </div>\r\n                <div className=\"text-slate-600 text-base font-normal leading-normal\">\r\n                  {currentlySelectedOption?.description}\r\n                </div>\r\n                {value && (\r\n                  <div className=\"pl-1.5\" onClick={handleClear}>\r\n                    <MdClose />\r\n                  </div>\r\n                )}\r\n              </div>\r\n              <div className=\"w-5 h-5 relative\">\r\n                <div className=\"absolute inset-0 flex items-center justify-center\">\r\n                  {isFocused && <MdExpandLess />}\r\n                  {!isFocused && <MdExpandMore />}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          {description && !isFocused && (\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          {isFocused && listOfOptions()}\r\n        </div>\r\n      </div>\r\n    </>\r\n  );\r\n}\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectField.js","sources":["../../../lib/components/form/SelectField.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { IFormFieldGlobalProps, IOptionItem } from \"../../types\";\r\nimport { MdCheck, MdClose, MdExpandLess, MdExpandMore } from \"react-icons/md\";\r\nimport { useClickAway } from \"react-use\";\r\n\r\nexport interface ISelectFieldProps extends IFormFieldGlobalProps {\r\n  options?: IOptionItem[];\r\n  valueKey?: string;\r\n  labelKey?: string;\r\n}\r\n\r\nexport default function SelectField({\r\n  label,\r\n  name,\r\n  value,\r\n  description,\r\n  onInputChange,\r\n  options,\r\n  placeholder,\r\n  className,\r\n  errors = {},\r\n}: ISelectFieldProps) {\r\n  const [isFocused, setIsFocused] = React.useState(false);\r\n  const ref = React.useRef(null);\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  const handleToggleFocus = () => {\r\n    setIsFocused((prev) => !prev);\r\n  };\r\n\r\n  useClickAway(ref, () => {\r\n    setIsFocused(false);\r\n  });\r\n\r\n  const hangleChange = (option: IOptionItem) => {\r\n    const tmp: any = {\r\n      target: {\r\n        value: option.value,\r\n        name: name,\r\n      },\r\n    };\r\n\r\n    onInputChange(tmp);\r\n    setIsFocused(false);\r\n  };\r\n  const currentlySelectedOption = React.useMemo(() => {\r\n    if (value === null || value === undefined || value === \"\") return null;\r\n    return options?.find((option) => option.value === value);\r\n  }, [options, value]);\r\n\r\n  const listOfOptions = () => {\r\n    if (!options) return [];\r\n    return (\r\n      <div\r\n        id=\"list\"\r\n        className=\"max-h-[390px] min-w-32 whitespace-nowrap fixed  z-[100000] top-auto mt-[4px] bg-white rounded-lg shadow-xl border border-gray-200 justify-start items-start inline-flex  overflow-auto \"\r\n      >\r\n        <div className=\"grow shrink basis-0 py-1 flex-col justify-start items-start inline-flex\">\r\n          {options.map((option, index) => {\r\n            return (\r\n              <div\r\n                className=\"group self-stretch px-1.5 py-px justify-start items-center inline-flex hover:bg-gray-50 \"\r\n                onClick={() => hangleChange(option)}\r\n                key={index}\r\n              >\r\n                <div className=\"grow shrink basis-0 px-1  py-2 rounded-md flex-col justify-start items-start gap-2 inline-flex\">\r\n                  <div className=\"self-stretch justify-start items-center gap-2 inline-flex\">\r\n                    <div className=\"text-gray-900 text-sm font-medium  leading-normal\">\r\n                      {option.label}\r\n                    </div>\r\n                    {option.description && (\r\n                      <div className=\"text-slate-600 sm-base font-normal leading-normal\">\r\n                        {option.description}\r\n                      </div>\r\n                    )}\r\n                  </div>\r\n                </div>\r\n                <div className=\"w-5 h-5 relative\">\r\n                  {option.value === value && value !== \"\" && (\r\n                    <MdCheck size={22} className=\"text-primary\" />\r\n                  )}{\" \"}\r\n                  {option.value !== value && (\r\n                    <MdCheck\r\n                      size={22}\r\n                      className=\"text-transparent group-hover:text-gray-300\"\r\n                    />\r\n                  )}\r\n                </div>\r\n              </div>\r\n            );\r\n          })}\r\n        </div>\r\n      </div>\r\n    );\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        id=\"component\"\r\n        ref={ref}\r\n      >\r\n        <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex\">\r\n          {label && (\r\n            <div className=\"text-slate-700 text-sm font-medium  leading-tight\">\r\n              {label}\r\n            </div>\r\n          )}\r\n          <div\r\n            className={`self-stretch w-full px-3  py-1 bg-white rounded-lg  border justify-start items-center gap-0 inline-flex outline-none \r\n               ${isFocused ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300 \" : \"\"}`}\r\n            onClick={() => handleToggleFocus()}\r\n          >\r\n            <div className=\"grow shrink basis-0 min-h-5 xl:min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] \">\r\n              <div className=\"text-gray-900 text-sm font-medium leading-normal text-ellipsis overflow-hidden w-full\">\r\n                {currentlySelectedOption?.label}\r\n                {!currentlySelectedOption?.label && placeholder && (\r\n                  <span className=\"text-slate-400 font-normal\">\r\n                    {\" \"}\r\n                    {placeholder}\r\n                  </span>\r\n                )}\r\n              </div>\r\n              <div className=\"text-slate-600 text-base font-normal leading-normal\">\r\n                {currentlySelectedOption?.description}\r\n              </div>\r\n            </div>\r\n            {value !== \"\" && value !== null && value !== undefined && (\r\n              <div\r\n                className=\"w-6 h-6 relative  cursor-pointer  \"\r\n                onClick={handleClear}\r\n              >\r\n                <div className=\"absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg\">\r\n                  <MdClose />\r\n                </div>{\" \"}\r\n              </div>\r\n            )}\r\n            <div className=\"w-6 h-6 relative  cursor-pointer \">\r\n              <div className=\"absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg\">\r\n                {isFocused && <MdExpandLess />}\r\n                {!isFocused && <MdExpandMore />}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        {description && !isFocused && (\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        {isFocused && listOfOptions()}\r\n      </div>\r\n    </>\r\n  );\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/components/layout/IconInCircle.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+
+interface IconInCircleProps {
+    isComplete: boolean;
+    isPending?: boolean;
+    size?: number;
+    title?: string;
+}
+declare const IconInCircle: React.FC<IconInCircleProps>;
+export default IconInCircle;

package/dist/components/layout/IconInCircle.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { k as MdOutlinePending, j as MdCheck } from "../../index-ClXm2PIX.js";
+const IconInCircle = ({
+  isComplete,
+  size = 20,
+  title,
+  isPending
+}) => {
+  if (!isComplete && !isPending)
+    return "";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "p-2 rounded-full border text-success flex items-center justify-center text-2xl ",
+      style: { width: 2 * size, height: 2 * size },
+      title: title || "",
+      children: isPending ? /* @__PURE__ */ jsx(MdOutlinePending, { size }) : /* @__PURE__ */ jsx(MdCheck, { size })
+    }
+  );
+};
+export {
+  IconInCircle as default
+};
+//# sourceMappingURL=IconInCircle.js.map

package/dist/components/layout/IconInCircle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconInCircle.js","sources":["../../../lib/components/layout/IconInCircle.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { MdCheck, MdOutlinePending } from \"react-icons/md\";\r\n\r\ninterface IconInCircleProps {\r\n  isComplete: boolean;\r\n  isPending?: boolean;\r\n  size?: number;\r\n  title?: string;\r\n}\r\n\r\nconst IconInCircle: React.FC<IconInCircleProps> = ({\r\n  isComplete,\r\n  size = 20,\r\n  title,\r\n  isPending,\r\n}) => {\r\n  if (!isComplete && !isPending) return \"\";\r\n  return (\r\n    <div\r\n      className=\"p-2 rounded-full border text-success flex items-center justify-center text-2xl \"\r\n      style={{ width: 2 * size, height: 2 * size }}\r\n      title={title || \"\"}\r\n    >\r\n      {isPending ? <MdOutlinePending size={size} /> : <MdCheck size={size} />}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default IconInCircle;\r\n"],"names":[],"mappings":";;AAUA,MAAM,eAA4C,CAAC;AAAA,EACjD;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,MAAM;AACA,MAAA,CAAC,cAAc,CAAC;AAAkB,WAAA;AAEpC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,IAAI,MAAM,QAAQ,IAAI,KAAK;AAAA,MAC3C,OAAO,SAAS;AAAA,MAEf,sBAAa,oBAAA,kBAAA,EAAiB,MAAY,IAAK,oBAAC,WAAQ,MAAY;AAAA,IAAA;AAAA,EAAA;AAG3E;"}

package/dist/components/profiles/ProfileOverview.d.ts

@@ -0,0 +1,9 @@
+import { IProfileApprover, IStep } from '../../main';
+
+interface ProfileOverviewProps {
+    employeeId?: number;
+    onProfileApproversChange?: (data: IProfileApprover[]) => void;
+    steps: IStep[];
+}
+export default function ProfileOverview({ employeeId, onProfileApproversChange, steps, }: ProfileOverviewProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/profiles/ProfileOverview.js

@@ -0,0 +1,180 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useMemo, useEffect } from "react";
+import SectionTitle from "../layout/SectionTitle.js";
+import '../../assets/tailwind.css';/* empty css                      */
+import "../../contexts/FederationContext.js";
+import { useFederationContext } from "../../contexts/useFederationContext.js";
+import { getFullName } from "../../utils/getFullName.js";
+import { handleErrors } from "../../utils/handleErrors.js";
+import { EApproverRoles } from "../../types.js";
+import IconInCircle from "../layout/IconInCircle.js";
+const approverRoleGroups = [
+  {
+    name: "Předschvalovatelé",
+    roles: [EApproverRoles.predschvalovatel],
+    all: true,
+    parallel: true,
+    stepType: 1
+  },
+  {
+    name: "Schvalovatelé",
+    roles: [
+      EApproverRoles.vedouci,
+      EApproverRoles.zastupce,
+      EApproverRoles.zastupce9,
+      EApproverRoles.vyssiSchvalovatel,
+      EApproverRoles.vyssiSchvalovatelZastupce,
+      EApproverRoles.vyssiSchvalovatelZastupce9
+    ],
+    all: false,
+    parallel: true,
+    stepType: 2
+  },
+  {
+    name: "Docházkový vedoucí",
+    roles: [EApproverRoles.dochazkovyVedouci],
+    all: true,
+    parallel: false,
+    stepType: 3
+  }
+];
+function ProfileOverview({
+  employeeId,
+  onProfileApproversChange,
+  steps
+}) {
+  const [profileApprovers, setProfileApprovers] = useState([]);
+  const context = useFederationContext();
+  const currentApprovers = useMemo(() => {
+    return approverRoleGroups.map((group) => {
+      const groupApprovers = profileApprovers.filter(
+        (approver) => group.roles.includes(approver.role)
+      );
+      const groupApprovedSteps = steps.filter(
+        (step) => step.type == group.stepType && groupApprovers.some(
+          (approver) => {
+            var _a;
+            return step.employee.employeeId == ((_a = approver == null ? void 0 : approver.approver) == null ? void 0 : _a.employeeId);
+          }
+        )
+      );
+      return {
+        ...group,
+        numberOfApprovers: groupApprovers.length,
+        numberOfApprovedSteps: groupApprovedSteps.length,
+        isComplete: group.all && groupApprovers.length == groupApprovedSteps.length || !group.all && groupApprovedSteps.length > 0
+      };
+    });
+  }, [approverRoleGroups, profileApprovers]);
+  useEffect(() => {
+    context.apiClient.get(
+      "/timeoff/approve-profile" + (employeeId ? "/" + employeeId : "")
+    ).then((response) => {
+      setProfileApprovers(response.data);
+    }).catch((error) => {
+      handleErrors(
+        error,
+        context.emitter,
+        "Nepodařilo se dohledat schvalovací profil pro uživatele " + employeeId
+      );
+      console.error("Error submitting form:", error);
+    });
+  }, [employeeId]);
+  const decisionsTranslations = (decision) => {
+    const translations = {
+      approved: "Schváleno",
+      rejected: "Zamítnuto",
+      cancelled: "Stornováno",
+      evided: "Zaevidováno"
+    };
+    return translations[decision] || null;
+  };
+  useEffect(() => {
+    if (onProfileApproversChange)
+      onProfileApproversChange(profileApprovers);
+  }, [profileApprovers, onProfileApproversChange]);
+  const findStep = (steps2, group, row) => {
+    return steps2.find(
+      (step) => {
+        var _a, _b;
+        return step.type == group.stepType && step.employee.employeeId == ((_b = (_a = row.position) == null ? void 0 : _a.employee) == null ? void 0 : _b.employeeId);
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SectionTitle, { children: "Postup schvalování" }),
+    /* @__PURE__ */ jsx("div", { className: "flex gap-4", children: currentApprovers.map((group, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "w-full xl:w-1/3 rounded-lg shadow-xl p-5 border  gap-4 flex flex-col ",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsxs("h3", { className: "text-xl font-bold", children: [
+              group.name,
+              " - ",
+              index
+            ] }),
+            /* @__PURE__ */ jsx(
+              IconInCircle,
+              {
+                isComplete: group.isComplete,
+                title: group.numberOfApprovedSteps + " / " + group.numberOfApprovers,
+                isPending: !group.isComplete
+              }
+            )
+          ] }),
+          profileApprovers.filter((it) => group.roles.includes(it.role)).map((row, index2) => {
+            var _a, _b, _c, _d, _e, _f;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: " border rounded-lg p-4 flex justify-between gap-5",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("h3", { className: "", children: getFullName((_a = row.position) == null ? void 0 : _a.employee, true) }),
+                    /* @__PURE__ */ jsx("p", { className: "text-sm ", children: row.roleTxt }),
+                    findStep(steps, group, row) && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("p", { className: "text-sm " }),
+                      " ",
+                      ((_b = findStep(steps, group, row)) == null ? void 0 : _b.decision) && /* @__PURE__ */ jsxs("p", { className: "text-sm ", children: [
+                        decisionsTranslations(
+                          ((_c = findStep(steps, group, row)) == null ? void 0 : _c.decision) || ""
+                        ),
+                        " ",
+                        "(",
+                        new Date(
+                          ((_d = findStep(steps, group, row)) == null ? void 0 : _d.date) || 0
+                        ).toLocaleString(),
+                        ")"
+                      ] }),
+                      ((_e = findStep(steps, group, row)) == null ? void 0 : _e.comment) && /* @__PURE__ */ jsxs("p", { className: "text-sm ", children: [
+                        /* @__PURE__ */ jsx("b", { children: "Komentář" }),
+                        ":",
+                        " ",
+                        (_f = findStep(steps, group, row)) == null ? void 0 : _f.comment,
+                        " "
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    IconInCircle,
+                    {
+                      isComplete: findStep(steps, group, row) != null,
+                      isPending: !group.isComplete
+                    }
+                  )
+                ]
+              },
+              index2
+            );
+          })
+        ]
+      },
+      group.name
+    )) })
+  ] });
+}
+export {
+  ProfileOverview as default
+};
+//# sourceMappingURL=ProfileOverview.js.map

package/dist/components/profiles/ProfileOverview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileOverview.js","sources":["../../../lib/components/profiles/ProfileOverview.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\r\nimport SectionTitle from \"../layout/SectionTitle\";\r\nimport {\r\n  EApproverRoles,\r\n  IProfileApprover,\r\n  IStep,\r\n  getFullName,\r\n  handleErrors,\r\n  useFederationContext,\r\n} from \"../../main\";\r\nimport { AxiosResponse } from \"axios\";\r\nimport IconInCircle from \"../layout/IconInCircle\";\r\n\r\ninterface ProfileOverviewProps {\r\n  employeeId?: number;\r\n  onProfileApproversChange?: (data: IProfileApprover[]) => void;\r\n  steps: IStep[];\r\n}\r\n\r\ninterface IApproverRoleGroup {\r\n  name: string;\r\n  roles: EApproverRoles[];\r\n  all: boolean;\r\n  parallel: boolean;\r\n  stepType: number;\r\n}\r\n\r\nconst approverRoleGroups: IApproverRoleGroup[] = [\r\n  {\r\n    name: \"Předschvalovatelé\",\r\n    roles: [EApproverRoles.predschvalovatel],\r\n    all: true,\r\n    parallel: true,\r\n    stepType: 1,\r\n  },\r\n  {\r\n    name: \"Schvalovatelé\",\r\n    roles: [\r\n      EApproverRoles.vedouci,\r\n      EApproverRoles.zastupce,\r\n      EApproverRoles.zastupce9,\r\n      EApproverRoles.vyssiSchvalovatel,\r\n      EApproverRoles.vyssiSchvalovatelZastupce,\r\n      EApproverRoles.vyssiSchvalovatelZastupce9,\r\n    ],\r\n    all: false,\r\n    parallel: true,\r\n    stepType: 2,\r\n  },\r\n  {\r\n    name: \"Docházkový vedoucí\",\r\n    roles: [EApproverRoles.dochazkovyVedouci],\r\n    all: true,\r\n    parallel: false,\r\n    stepType: 3,\r\n  },\r\n];\r\n\r\nexport default function ProfileOverview({\r\n  employeeId,\r\n  onProfileApproversChange,\r\n  steps,\r\n}: ProfileOverviewProps) {\r\n  const [profileApprovers, setProfileApprovers] = useState<\r\n    Array<IProfileApprover>\r\n  >([]);\r\n  const context = useFederationContext();\r\n\r\n  const currentApprovers = useMemo(() => {\r\n    return approverRoleGroups.map((group) => {\r\n      const groupApprovers = profileApprovers.filter((approver) =>\r\n        group.roles.includes(approver.role)\r\n      );\r\n\r\n      const groupApprovedSteps = steps.filter(\r\n        (step) =>\r\n          step.type == group.stepType &&\r\n          groupApprovers.some(\r\n            (approver) =>\r\n              step.employee.employeeId == approver?.approver?.employeeId\r\n          )\r\n      );\r\n\r\n      return {\r\n        ...group,\r\n        numberOfApprovers: groupApprovers.length,\r\n        numberOfApprovedSteps: groupApprovedSteps.length,\r\n        isComplete:\r\n          (group.all && groupApprovers.length == groupApprovedSteps.length) ||\r\n          (!group.all && groupApprovedSteps.length > 0),\r\n      };\r\n    });\r\n  }, [approverRoleGroups, profileApprovers]);\r\n\r\n  useEffect(() => {\r\n    context.apiClient\r\n      .get<IProfileApprover[]>(\r\n        \"/timeoff/approve-profile\" + (employeeId ? \"/\" + employeeId : \"\")\r\n      )\r\n      .then((response: AxiosResponse) => {\r\n        setProfileApprovers(response.data);\r\n      })\r\n      .catch((error) => {\r\n        handleErrors(\r\n          error,\r\n          context.emitter,\r\n          \"Nepodařilo se dohledat schvalovací profil pro uživatele \" +\r\n            employeeId\r\n        );\r\n        console.error(\"Error submitting form:\", error);\r\n      });\r\n  }, [employeeId]);\r\n\r\n  const decisionsTranslations = (decision: string): string | null => {\r\n    const translations: { [key: string]: string } = {\r\n      approved: \"Schváleno\",\r\n      rejected: \"Zamítnuto\",\r\n      cancelled: \"Stornováno\",\r\n      evided: \"Zaevidováno\",\r\n    };\r\n\r\n    return translations[decision] || null;\r\n  };\r\n  // pri nacteni profileApprovers se muze dat vedet parent componente inbfo o aktualnich schvalovatelich\r\n  useEffect(() => {\r\n    if (onProfileApproversChange) onProfileApproversChange(profileApprovers);\r\n  }, [profileApprovers, onProfileApproversChange]);\r\n\r\n  const findStep = (\r\n    steps: IStep[],\r\n    group: IApproverRoleGroup,\r\n    row: IProfileApprover\r\n  ) => {\r\n    return steps.find(\r\n      (step) =>\r\n        step.type == group.stepType &&\r\n        step.employee.employeeId == row.position?.employee?.employeeId\r\n    );\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <SectionTitle>Postup schvalování</SectionTitle>\r\n      <div className=\"flex gap-4\">\r\n        {currentApprovers.map((group, index) => (\r\n          <div\r\n            key={group.name}\r\n            className={\r\n              \"w-full xl:w-1/3 rounded-lg shadow-xl p-5 border  gap-4 flex flex-col \"\r\n            }\r\n          >\r\n            <div className=\"flex justify-between\">\r\n              <h3 className=\"text-xl font-bold\">\r\n                {group.name} - {index}\r\n              </h3>\r\n\r\n              <IconInCircle\r\n                isComplete={group.isComplete}\r\n                title={\r\n                  group.numberOfApprovedSteps + \" / \" + group.numberOfApprovers\r\n                }\r\n                isPending={!group.isComplete}\r\n              ></IconInCircle>\r\n            </div>\r\n            {profileApprovers\r\n              .filter((it) => group.roles.includes(it.role))\r\n              .map((row, index) => (\r\n                <div\r\n                  key={index}\r\n                  className=\" border rounded-lg p-4 flex justify-between gap-5\"\r\n                >\r\n                  <div>\r\n                    <h3 className=\"\">\r\n                      {getFullName(row.position?.employee, true)}\r\n                    </h3>\r\n                    <p className=\"text-sm \">{row.roleTxt}</p>\r\n                    {findStep(steps, group, row) && (\r\n                      <>\r\n                        <p className=\"text-sm \"></p>{\" \"}\r\n                        {findStep(steps, group, row)?.decision && (\r\n                          <p className=\"text-sm \">\r\n                            {decisionsTranslations(\r\n                              findStep(steps, group, row)?.decision || \"\"\r\n                            )}{\" \"}\r\n                            (\r\n                            {new Date(\r\n                              findStep(steps, group, row)?.date || 0\r\n                            ).toLocaleString()}\r\n                            )\r\n                          </p>\r\n                        )}\r\n                        {findStep(steps, group, row)?.comment && (\r\n                          <p className=\"text-sm \">\r\n                            <b>Komentář</b>:{\" \"}\r\n                            {findStep(steps, group, row)?.comment}{\" \"}\r\n                          </p>\r\n                        )}\r\n                      </>\r\n                    )}\r\n                  </div>\r\n                  <IconInCircle\r\n                    isComplete={findStep(steps, group, row) != null}\r\n                    isPending={!group.isComplete}\r\n                  />\r\n                </div>\r\n              ))}\r\n          </div>\r\n        ))}\r\n      </div>\r\n    </>\r\n  );\r\n}\r\n"],"names":["steps","index"],"mappings":"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"}

package/dist/{index-qxZYrVct.js → index-ClXm2PIX.js}

@@ -38,19 +38,23 @@ function MdOutlineFilterAltOff(props) {
 function MdOutlineFilterAlt(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24m0 24H0" }, "child": [] }, { "tag": "path", "attr": { "d": "M7 6h10l-5.01 6.3L7 6zm-2.75-.39C6.27 8.2 10 13 10 13v6c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-6s3.72-4.8 5.74-7.39A.998.998 0 0 0 18.95 4H5.04c-.83 0-1.3.95-.79 1.61z" }, "child": [] }, { "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" }, "child": [] }] })(props);
 }
+function MdOutlinePending(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }, "child": [] }, { "tag": "circle", "attr": { "cx": "7", "cy": "12", "r": "1.5" }, "child": [] }, { "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "1.5" }, "child": [] }, { "tag": "circle", "attr": { "cx": "17", "cy": "12", "r": "1.5" }, "child": [] }] })(props);
+}
 export {
-  MdClose as M,
-  MdExpandLess as a,
-  MdExpandMore as b,
-  MdCheck as c,
-  MdOutlineFilterAlt as d,
-  MdOutlineFilterAltOff as e,
-  MdSearch as f,
-  MdArrowBack as g,
-  MdArrowForward as h,
-  MdArrowUpward as i,
-  MdArrowDownward as j,
-  MdInsertDriveFile as k,
-  MdDeleteOutline as l
+  MdExpandLess as M,
+  MdExpandMore as a,
+  MdClose as b,
+  MdOutlineFilterAlt as c,
+  MdOutlineFilterAltOff as d,
+  MdSearch as e,
+  MdArrowBack as f,
+  MdArrowForward as g,
+  MdArrowUpward as h,
+  MdArrowDownward as i,
+  MdCheck as j,
+  MdOutlinePending as k,
+  MdInsertDriveFile as l,
+  MdDeleteOutline as m
 };
-//# sourceMappingURL=index-qxZYrVct.js.map
+//# sourceMappingURL=index-ClXm2PIX.js.map