@addsign/moje-agenda-shared-lib 0.0.99 → 1.0.0

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

@@ -12,6 +12,7 @@ export interface DataTableColumn<T> {
     filterValueKey?: string;
     filterLabelKey?: string;
     filterParam?: string;
+    filterParam2?: string;
     sortParam?: string;
     sumarize?: boolean;
     width?: string;

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

@@ -18,5 +18,6 @@ declare const AutocompleteSearchBar: React.FC<{
     initOptions?: IOptionItem[];
     showId?: boolean;
     clearable?: boolean;
+    rounded?: boolean;
 }>;
 export default AutocompleteSearchBar;

package/dist/components/form/AutocompleteSearchBar.js

@@ -23,7 +23,8 @@ const AutocompleteSearchBar = ({
   value,
   initOptions,
   showId,
-  clearable = true
+  clearable = true,
+  rounded = true
 }) => {
   var _a, _b;
   const [query, setQuery] = useState("");
@@ -188,11 +189,12 @@ const AutocompleteSearchBar = ({
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: `self-stretch px-3 py-1.5 rounded-lg justify-start items-center gap-2 inline-flex outline-none border  bg-white
+              className: `self-stretch px-3 py-1.5 justify-start items-center gap-2 inline-flex outline-none border  bg-white
             ${isFocused ? "outline-4 outline-indigo-200 outline-offset-0 border-indigo-300" : ""} 
             ${isFocused && ((_a = errors[name]) == null ? void 0 : _a.message) ? "outline-4 outline-red-200 outline-offset-0 border-none" : ""}  
             ${!isFocused && ((_b = errors[name]) == null ? void 0 : _b.message) ? "border-red-200" : ""}   
-            ${disabled ? "bg-gray-100" : "bg-transparent"}`,
+            ${disabled ? "bg-gray-100" : "bg-transparent"}
+            ${rounded ? " rounded-lg " : " rounded-none "}`,
               children: /* @__PURE__ */ jsx("div", { className: "Content grow shrink basis-0 min-h-5 xl:min-h-7 justify-start items-start gap-2 flex relative  flex-col w-full  mx-auto", children: /* @__PURE__ */ jsx(
                 SearchInput,
                 {
@@ -247,7 +249,9 @@ const OptionList = ({
     "div",
     {
       ref: containerRef,
-      className: `overflow-y-auto resultOptionContainer w-full max-h-96 outline-indigo-200 absolute outline-4 bg-white border border-gray-200 drop-shadow-xl rounded-xl z-50 ${label ? "top-[68px]" : "top-[40px]"}`,
+      className: `overflow-y-auto resultOptionContainer w-full max-h-96 outline-indigo-200 absolute outline-4 bg-white border border-gray-200 drop-shadow-xl  z-50 ${label ? "top-[68px]" : "top-[40px]"}  *:
+         
+            `,
       children: options == null ? void 0 : options.map((option, index) => /* @__PURE__ */ jsx(
         "div",
         {

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

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteSearchBar.js","sources":["../../../lib/components/form/AutocompleteSearchBar.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from \"react\";\r\nimport { useClickAway } from \"react-use\";\r\nimport { IOptionItem, useFederationContext } from \"../../main\";\r\nimport { MdClose, MdExpandLess, MdExpandMore } from \"react-icons/md\";\r\n\r\ninterface OptionListProps {\r\n  options: IOptionItem[];\r\n  selectedOptionIndex: number;\r\n  handleOptionClick: (option: IOptionItem) => void;\r\n  label?: string;\r\n}\r\n\r\ninterface SearchInputProps {\r\n  value: string;\r\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\r\n  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\r\n  onFocus: () => void;\r\n  clearQuery: () => void;\r\n  inputRef: React.RefObject<HTMLInputElement>;\r\n  placeholder?: string;\r\n  isFocused?: boolean;\r\n  onBlur: () => void;\r\n  isLoading?: boolean;\r\n  clearable?: boolean;\r\n}\r\n\r\nconst AutocompleteSearchBar: React.FC<{\r\n  label: string;\r\n  name: string;\r\n  required?: boolean;\r\n  disabled?: boolean;\r\n  description?: string;\r\n  fetchUrl?: string;\r\n  valueKey: string;\r\n  labelKey: string;\r\n  onChange: (value: any) => void;\r\n  onFocus: () => void;\r\n  onBlur: () => void;\r\n  placeholder?: string;\r\n  serverSearch?: boolean;\r\n  value?: string;\r\n  initOptions?: IOptionItem[];\r\n  showId?: boolean;\r\n  clearable?: boolean;\r\n}> = ({\r\n  label,\r\n  name,\r\n  required,\r\n  disabled,\r\n  description,\r\n  fetchUrl,\r\n  valueKey,\r\n  labelKey,\r\n  onChange,\r\n  onFocus,\r\n  onBlur,\r\n  placeholder,\r\n  serverSearch = false,\r\n  value,\r\n  initOptions,\r\n  showId,\r\n  clearable = true,\r\n}) => {\r\n  const [query, setQuery] = useState(\"\");\r\n  const [loading, setLoading] = useState(false);\r\n  const [options, setOptions] = useState<IOptionItem[]>([]);\r\n  const [selectedOptionIndex, setSelectedOptionIndex] = useState(-1);\r\n  const [selectedOption, setSelectedOption] = useState<IOptionItem | null>(\r\n    null\r\n  );\r\n  const [searchResults, setSearchResults] = useState<IOptionItem[]>([]);\r\n  const inputRef = useRef<HTMLInputElement>(null);\r\n  const ref = useRef(null);\r\n  const federationContext = useFederationContext();\r\n\r\n  const [isFocused, setIsFocused] = useState(false);\r\n\r\n  const [errors] = useState<any>({});\r\n\r\n  useEffect(() => {\r\n    const fetchOptions = async () => {\r\n      setLoading(true);\r\n\r\n      const { data } = await federationContext.apiClient.get(fetchUrl || \"\");\r\n      // osetreni obou variant navratu  z BE\r\n      const tmpData = data.content || data;\r\n\r\n      setOptions(\r\n        tmpData.map((item: any) => ({\r\n          value: item[valueKey],\r\n          label: item[labelKey] + (showId ? \" (\" + item[valueKey] + \")\" : \"\"),\r\n        }))\r\n      ); // Adjust map according to actual API response\r\n      setLoading(false);\r\n    };\r\n\r\n    if (fetchUrl) fetchOptions();\r\n  }, [fetchUrl, labelKey, showId, valueKey, federationContext.apiClient]);\r\n\r\n  useEffect(() => {\r\n    if (initOptions) setOptions(initOptions);\r\n  }, [initOptions]);\r\n\r\n  useEffect(() => {\r\n    if (value && options) {\r\n      const initOption = options.find((it) => it.value == value);\r\n\r\n      if (initOption) {\r\n        setQuery(initOption.label);\r\n        setSelectedOption(initOption);\r\n      }\r\n    }\r\n  }, [value, options]);\r\n\r\n  useEffect(() => {\r\n    const fetchOptions = async () => {\r\n      setLoading(true);\r\n      const { data } = await federationContext.apiClient.get(fetchUrl + query);\r\n      setOptions(\r\n        data.map((item: any) => ({\r\n          value: item[valueKey],\r\n          label: item[labelKey] + (showId ? \" (\" + item[valueKey] + \")\" : \"\"),\r\n        }))\r\n      ); // Adjust map according to actual API response\r\n      setSearchResults(\r\n        data.map((item: any) => ({\r\n          value: item[valueKey],\r\n          label: item[labelKey] + (showId ? \" (\" + item[valueKey] + \")\" : \"\"),\r\n        }))\r\n      ); // Adjust map according to actual API response\r\n\r\n      setLoading(false);\r\n    };\r\n\r\n    if (serverSearch) fetchOptions();\r\n  }, [\r\n    query,\r\n    serverSearch,\r\n    valueKey,\r\n    labelKey,\r\n    fetchUrl,\r\n    federationContext.apiClient,\r\n    showId,\r\n  ]);\r\n\r\n  useClickAway(ref, () => {\r\n    setSearchResults([]);\r\n    if (!selectedOption) {\r\n      setQuery(\"\");\r\n      onChange(null);\r\n    }\r\n\r\n    handleBlur();\r\n  });\r\n\r\n  const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    setQuery(event.target.value);\r\n    setSelectedOption(null);\r\n    setSelectedOptionIndex(-1);\r\n    setSearchResults(\r\n      options.filter((option) =>\r\n        option?.label\r\n          ?.toLowerCase()\r\n          .includes(event.target?.value?.toLowerCase())\r\n      )\r\n    );\r\n  };\r\n  const handleFocus = () => {\r\n    setIsFocused(true);\r\n    onFocus();\r\n    setSearchResults(\r\n      options /*.filter((option) =>\r\n        option.label.toLowerCase().includes(query.toLowerCase()),\r\n      ),*/\r\n    );\r\n    inputRef.current?.select(); // Add this line\r\n  };\r\n\r\n  const handleClearQuery = () => {\r\n    setQuery(\"\");\r\n    onChange(null);\r\n    setSelectedOption(null);\r\n    setTimeout(() => {\r\n      setSelectedOptionIndex(-1);\r\n      setSearchResults(options);\r\n    }, 1000);\r\n  };\r\n\r\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n    if (event.key === \"ArrowUp\" && searchResults.length > 0) {\r\n      setSelectedOptionIndex((prevIndex) =>\r\n        prevIndex > 0 ? prevIndex - 1 : searchResults.length - 1\r\n      );\r\n    } else if (event.key === \"ArrowDown\" && searchResults.length > 0) {\r\n      setSelectedOptionIndex((prevIndex) =>\r\n        prevIndex < searchResults.length - 1 ? prevIndex + 1 : 0\r\n      );\r\n    } else if (event.key === \"Enter\" && selectedOptionIndex !== -1) {\r\n      handleOptionClick(searchResults[selectedOptionIndex]);\r\n    } else if (event.key === \"Escape\" && selectedOptionIndex !== -1) {\r\n      handleBlur();\r\n    }\r\n  };\r\n\r\n  const handleOptionClick = (option: IOptionItem) => {\r\n    setQuery(option.label);\r\n    setSelectedOption(option);\r\n    setSelectedOptionIndex(-1);\r\n\r\n    onChange(option.value);\r\n\r\n    handleBlur();\r\n  };\r\n  const handleBlur = () => {\r\n    setSearchResults([]);\r\n    onBlur();\r\n    setIsFocused(false);\r\n  };\r\n\r\n  return (\r\n    <div className=\"w-full  flex-col justify-start items-start gap-1.5 inline-flex\">\r\n      <div\r\n        className=\"self-stretch  flex-col justify-start items-start gap-1.5 flex relative\"\r\n        ref={ref}\r\n      >\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={`self-stretch px-3 py-1.5 rounded-lg justify-start items-center gap-2 inline-flex outline-none border  bg-white\r\n            ${\r\n              isFocused\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          <div className=\"Content grow shrink basis-0 min-h-5 xl:min-h-7 justify-start items-start gap-2 flex relative  flex-col w-full  mx-auto\">\r\n            <SearchInput\r\n              value={query}\r\n              onChange={handleQueryChange}\r\n              onKeyDown={handleKeyDown}\r\n              onFocus={handleFocus} // Pass the onFocus handler\r\n              clearQuery={handleClearQuery} // Pass the onFocus handler\r\n              inputRef={inputRef}\r\n              placeholder={placeholder}\r\n              isFocused={isFocused}\r\n              onBlur={handleBlur}\r\n              isLoading={loading}\r\n              clearable={clearable}\r\n            />\r\n          </div>\r\n        </div>\r\n        {searchResults.length > 0 && (\r\n          <OptionList\r\n            options={searchResults}\r\n            selectedOptionIndex={selectedOptionIndex}\r\n            handleOptionClick={handleOptionClick}\r\n            label={label}\r\n          />\r\n        )}\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    </div>\r\n  );\r\n};\r\n\r\nconst OptionList: React.FC<OptionListProps> = ({\r\n  options,\r\n  selectedOptionIndex,\r\n  handleOptionClick,\r\n  label,\r\n}) => {\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n  useEffect(() => {\r\n    // Ensure the selected option is scrolled into view\r\n    if (selectedOptionIndex >= 0 && selectedOptionIndex < options.length) {\r\n      const selectedElement = containerRef.current?.children[\r\n        selectedOptionIndex\r\n      ] as HTMLDivElement;\r\n      selectedElement?.scrollIntoView({\r\n        behavior: \"instant\",\r\n        block: \"nearest\",\r\n      });\r\n    }\r\n  }, [selectedOptionIndex, options.length]);\r\n\r\n  return (\r\n    <div\r\n      ref={containerRef}\r\n      className={`overflow-y-auto resultOptionContainer w-full max-h-96 outline-indigo-200 absolute outline-4 bg-white border border-gray-200 drop-shadow-xl rounded-xl z-50 ${label ? \"top-[68px]\" : \"top-[40px]\"}`}\r\n    >\r\n      {options?.map((option, index) => (\r\n        <div\r\n          key={option.value as string}\r\n          className={`py-2 px-4 flex items-center justify-between gap-8 hover:bg-gray-200 cursor-pointer text-sm ${\r\n            selectedOptionIndex === index ? \"bg-gray-200\" : \"\"\r\n          }`}\r\n          onClick={() => handleOptionClick(option)}\r\n        >\r\n          <p className=\"font-normal\">{option.label}</p>\r\n        </div>\r\n      ))}\r\n    </div>\r\n  );\r\n};\r\n\r\nconst SearchInput: React.FC<SearchInputProps> = ({\r\n  value,\r\n  onChange,\r\n  onKeyDown,\r\n  onFocus,\r\n  onBlur,\r\n  inputRef,\r\n  placeholder,\r\n  clearQuery,\r\n  isFocused,\r\n  isLoading,\r\n  clearable = true,\r\n}) => {\r\n  const handleExpandMoreClick = () => {\r\n    inputRef.current?.focus();\r\n    onFocus();\r\n  };\r\n\r\n  const handleClearQuery = () => {\r\n    clearQuery();\r\n  };\r\n\r\n  return (\r\n    <div className=\"relative flex items-center w-full sharedResource text-sm bg-white\">\r\n      <input\r\n        type=\"text\"\r\n        className={`pl-1 py-1 border-gray-800  bg-white  w-full ${\r\n          isLoading ? \"pr-10 \" : \"pr-20\"\r\n        }`}\r\n        value={value}\r\n        onChange={onChange}\r\n        onKeyDown={onKeyDown}\r\n        onFocus={onFocus}\r\n        ref={inputRef}\r\n        placeholder={placeholder}\r\n        disabled={isLoading}\r\n      />\r\n      {isLoading && (\r\n        <div className=\"loader absolute right-0 text-gray-500\">\r\n          {/* You can replace this div with an SVG or another icon of your choice */}\r\n          <svg\r\n            className=\"animate-spin h-5 w-5\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            fill=\"none\"\r\n            viewBox=\"0 0 24 24\"\r\n          >\r\n            <circle\r\n              className=\"opacity-25\"\r\n              cx=\"12\"\r\n              cy=\"12\"\r\n              r=\"10\"\r\n              stroke=\"currentColor\"\r\n              strokeWidth=\"4\"\r\n            />\r\n            <path\r\n              className=\"opacity-75\"\r\n              fill=\"currentColor\"\r\n              d=\"M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z\"\r\n            />\r\n          </svg>\r\n        </div>\r\n      )}\r\n      {isFocused && !isLoading && (\r\n        <MdExpandLess\r\n          className=\"material-icons absolute right-0 cursor-pointer text-gray-500\"\r\n          onClick={onBlur}\r\n        />\r\n      )}\r\n      {!isFocused && !isLoading && (\r\n        <MdExpandMore\r\n          className=\"material-icons absolute right-0 cursor-pointer text-gray-500\"\r\n          onClick={handleExpandMoreClick}\r\n        />\r\n      )}\r\n      {value && clearable && !isLoading && (\r\n        <MdClose\r\n          className=\"material-icons absolute right-6 cursor-pointer text-gray-500\"\r\n          onClick={handleClearQuery}\r\n        />\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default AutocompleteSearchBar;\r\n"],"names":["_b","_a"],"mappings":";;;;;;;;AA0BA,MAAM,wBAkBD,CAAC;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,MAAM;;AACJ,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAwB,CAAE,CAAA;AACxD,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS,EAAE;AAC3D,QAAA,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,EAAA;AAEF,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAwB,CAAE,CAAA;AAC9D,QAAA,WAAW,OAAyB,IAAI;AACxC,QAAA,MAAM,OAAO,IAAI;AACvB,QAAM,oBAAoB;AAE1B,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,CAAC,MAAM,IAAI,SAAc,CAAE,CAAA;AAEjC,YAAU,MAAM;AACd,UAAM,eAAe,YAAY;AAC/B,iBAAW,IAAI;AAET,YAAA,EAAE,KAAS,IAAA,MAAM,kBAAkB,UAAU,IAAI,YAAY,EAAE;AAE/D,YAAA,UAAU,KAAK,WAAW;AAEhC;AAAA,QACE,QAAQ,IAAI,CAAC,UAAe;AAAA,UAC1B,OAAO,KAAK,QAAQ;AAAA,UACpB,OAAO,KAAK,QAAQ,KAAK,SAAS,OAAO,KAAK,QAAQ,IAAI,MAAM;AAAA,QAAA,EAChE;AAAA,MAAA;AAEJ,iBAAW,KAAK;AAAA,IAAA;AAGd,QAAA;AAAuB;EAAA,GAC1B,CAAC,UAAU,UAAU,QAAQ,UAAU,kBAAkB,SAAS,CAAC;AAEtE,YAAU,MAAM;AACV,QAAA;AAAa,iBAAW,WAAW;AAAA,EAAA,GACtC,CAAC,WAAW,CAAC;AAEhB,YAAU,MAAM;AACd,QAAI,SAAS,SAAS;AACpB,YAAM,aAAa,QAAQ,KAAK,CAAC,OAAO,GAAG,SAAS,KAAK;AAEzD,UAAI,YAAY;AACd,iBAAS,WAAW,KAAK;AACzB,0BAAkB,UAAU;AAAA,MAC9B;AAAA,IACF;AAAA,EAAA,GACC,CAAC,OAAO,OAAO,CAAC;AAEnB,YAAU,MAAM;AACd,UAAM,eAAe,YAAY;AAC/B,iBAAW,IAAI;AACT,YAAA,EAAE,KAAS,IAAA,MAAM,kBAAkB,UAAU,IAAI,WAAW,KAAK;AACvE;AAAA,QACE,KAAK,IAAI,CAAC,UAAe;AAAA,UACvB,OAAO,KAAK,QAAQ;AAAA,UACpB,OAAO,KAAK,QAAQ,KAAK,SAAS,OAAO,KAAK,QAAQ,IAAI,MAAM;AAAA,QAAA,EAChE;AAAA,MAAA;AAEJ;AAAA,QACE,KAAK,IAAI,CAAC,UAAe;AAAA,UACvB,OAAO,KAAK,QAAQ;AAAA,UACpB,OAAO,KAAK,QAAQ,KAAK,SAAS,OAAO,KAAK,QAAQ,IAAI,MAAM;AAAA,QAAA,EAChE;AAAA,MAAA;AAGJ,iBAAW,KAAK;AAAA,IAAA;AAGd,QAAA;AAA2B;EAAA,GAC9B;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,EAAA,CACD;AAED,eAAa,KAAK,MAAM;AACtB,qBAAiB,CAAE,CAAA;AACnB,QAAI,CAAC,gBAAgB;AACnB,eAAS,EAAE;AACX,eAAS,IAAI;AAAA,IACf;AAEW;EAAA,CACZ;AAEK,QAAA,oBAAoB,CAAC,UAA+C;AAC/D,aAAA,MAAM,OAAO,KAAK;AAC3B,sBAAkB,IAAI;AACtB,2BAAuB,EAAE;AACzB;AAAA,MACE,QAAQ;AAAA,QAAO,CAAC,WACd;;AAAA,wDAAQ,UAAR,mBACI,cACD,UAASA,OAAAC,MAAA,MAAM,WAAN,gBAAAA,IAAc,UAAd,gBAAAD,IAAqB;AAAA;AAAA,MACnC;AAAA,IAAA;AAAA,EACF;AAEF,QAAM,cAAc,MAAM;;AACxB,iBAAa,IAAI;AACT;AACR;AAAA,MACE;AAAA;AAAA;AAAA;AAAA,IAAA;AAIF,KAAAC,MAAA,SAAS,YAAT,gBAAAA,IAAkB;AAAA,EAAO;AAG3B,QAAM,mBAAmB,MAAM;AAC7B,aAAS,EAAE;AACX,aAAS,IAAI;AACb,sBAAkB,IAAI;AACtB,eAAW,MAAM;AACf,6BAAuB,EAAE;AACzB,uBAAiB,OAAO;AAAA,OACvB,GAAI;AAAA,EAAA;AAGH,QAAA,gBAAgB,CAAC,UAAiD;AACtE,QAAI,MAAM,QAAQ,aAAa,cAAc,SAAS,GAAG;AACvD;AAAA,QAAuB,CAAC,cACtB,YAAY,IAAI,YAAY,IAAI,cAAc,SAAS;AAAA,MAAA;AAAA,IACzD,WACS,MAAM,QAAQ,eAAe,cAAc,SAAS,GAAG;AAChE;AAAA,QAAuB,CAAC,cACtB,YAAY,cAAc,SAAS,IAAI,YAAY,IAAI;AAAA,MAAA;AAAA,IACzD,WACS,MAAM,QAAQ,WAAW,wBAAwB,IAAI;AAC5C,wBAAA,cAAc,mBAAmB,CAAC;AAAA,IAAA,WAC3C,MAAM,QAAQ,YAAY,wBAAwB,IAAI;AACpD;IACb;AAAA,EAAA;AAGI,QAAA,oBAAoB,CAAC,WAAwB;AACjD,aAAS,OAAO,KAAK;AACrB,sBAAkB,MAAM;AACxB,2BAAuB,EAAE;AAEzB,aAAS,OAAO,KAAK;AAEV;EAAA;AAEb,QAAM,aAAa,MAAM;AACvB,qBAAiB,CAAE,CAAA;AACZ;AACP,iBAAa,KAAK;AAAA,EAAA;AAIlB,SAAA,qBAAC,OAAI,EAAA,WAAU,kEACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV;AAAA,QAEC,UAAA;AAAA,UACC,SAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAS;AAAA,cAER,UAAA;AAAA,gBAAA;AAAA,gBAAM;AAAA,gBAAE,WAAW,MAAM;AAAA,cAAA;AAAA,YAAA;AAAA,UAC5B;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,cAEP,YACI,oEACA,EACN;AAAA,cAEE,eAAa,YAAO,IAAI,MAAX,mBAAc,WACvB,2DACA,EACN;AAAA,cACE,CAAC,eAAa,YAAO,IAAI,MAAX,mBAAc,WAAU,mBAAmB,EAAE;AAAA,cAC3D,WAAW,gBAAgB,gBAAgB;AAAA,cAE/C,UAAA,oBAAC,OAAI,EAAA,WAAU,0HACb,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,OAAO;AAAA,kBACP,UAAU;AAAA,kBACV,WAAW;AAAA,kBACX,SAAS;AAAA,kBACT,YAAY;AAAA,kBACZ;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,QAAQ;AAAA,kBACR,WAAW;AAAA,kBACX;AAAA,gBAAA;AAAA,cAAA,GAEJ;AAAA,YAAA;AAAA,UACF;AAAA,UACC,cAAc,SAAS,KACtB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,IACC,eACC,oBAAC,OAAI,EAAA,WAAU,0EACZ,UACH,aAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;AAEA,MAAM,aAAwC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACE,QAAA,eAAe,OAAuB,IAAI;AAEhD,YAAU,MAAM;;AAEd,QAAI,uBAAuB,KAAK,sBAAsB,QAAQ,QAAQ;AACpE,YAAM,mBAAkB,kBAAa,YAAb,mBAAsB,SAC5C;AAEF,yDAAiB,eAAe;AAAA,QAC9B,UAAU;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,EACC,GAAA,CAAC,qBAAqB,QAAQ,MAAM,CAAC;AAGtC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,8JAA8J,QAAQ,eAAe,YAAY;AAAA,MAE3M,UAAS,mCAAA,IAAI,CAAC,QAAQ,UACrB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAW,8FACT,wBAAwB,QAAQ,gBAAgB,EAClD;AAAA,UACA,SAAS,MAAM,kBAAkB,MAAM;AAAA,UAEvC,UAAC,oBAAA,KAAA,EAAE,WAAU,eAAe,iBAAO,OAAM;AAAA,QAAA;AAAA,QANpC,OAAO;AAAA,MAAA;AAAA,IAQf;AAAA,EAAA;AAGP;AAEA,MAAM,cAA0C,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,MAAM;AACJ,QAAM,wBAAwB,MAAM;;AAClC,mBAAS,YAAT,mBAAkB;AACV;EAAA;AAGV,QAAM,mBAAmB,MAAM;AAClB;EAAA;AAIX,SAAA,qBAAC,OAAI,EAAA,WAAU,qEACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,+CACT,YAAY,WAAW,OACzB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,KAAK;AAAA,QACL;AAAA,QACA,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,IACC,aACC,oBAAC,OAAI,EAAA,WAAU,yCAEb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAM;AAAA,QACN,MAAK;AAAA,QACL,SAAQ;AAAA,QAER,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,IAAG;AAAA,cACH,IAAG;AAAA,cACH,GAAE;AAAA,cACF,QAAO;AAAA,cACP,aAAY;AAAA,YAAA;AAAA,UACd;AAAA,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cACL,GAAE;AAAA,YAAA;AAAA,UACJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,IAED,aAAa,CAAC,aACb;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAED,CAAC,aAAa,CAAC,aACd;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAED,SAAS,aAAa,CAAC,aACtB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"AutocompleteSearchBar.js","sources":["../../../lib/components/form/AutocompleteSearchBar.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from \"react\";\r\nimport { useClickAway } from \"react-use\";\r\nimport { IOptionItem, useFederationContext } from \"../../main\";\r\nimport { MdClose, MdExpandLess, MdExpandMore } from \"react-icons/md\";\r\n\r\ninterface OptionListProps {\r\n  options: IOptionItem[];\r\n  selectedOptionIndex: number;\r\n  handleOptionClick: (option: IOptionItem) => void;\r\n  label?: string;\r\n}\r\n\r\ninterface SearchInputProps {\r\n  value: string;\r\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\r\n  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\r\n  onFocus: () => void;\r\n  clearQuery: () => void;\r\n  inputRef: React.RefObject<HTMLInputElement>;\r\n  placeholder?: string;\r\n  isFocused?: boolean;\r\n  onBlur: () => void;\r\n  isLoading?: boolean;\r\n  clearable?: boolean;\r\n}\r\n\r\nconst AutocompleteSearchBar: React.FC<{\r\n  label: string;\r\n  name: string;\r\n  required?: boolean;\r\n  disabled?: boolean;\r\n  description?: string;\r\n  fetchUrl?: string;\r\n  valueKey: string;\r\n  labelKey: string;\r\n  onChange: (value: any) => void;\r\n  onFocus: () => void;\r\n  onBlur: () => void;\r\n  placeholder?: string;\r\n  serverSearch?: boolean;\r\n  value?: string;\r\n  initOptions?: IOptionItem[];\r\n  showId?: boolean;\r\n  clearable?: boolean;\r\n  rounded?: boolean;\r\n}> = ({\r\n  label,\r\n  name,\r\n  required,\r\n  disabled,\r\n  description,\r\n  fetchUrl,\r\n  valueKey,\r\n  labelKey,\r\n  onChange,\r\n  onFocus,\r\n  onBlur,\r\n  placeholder,\r\n  serverSearch = false,\r\n  value,\r\n  initOptions,\r\n  showId,\r\n  clearable = true,\r\n  rounded = true,\r\n}) => {\r\n  const [query, setQuery] = useState(\"\");\r\n  const [loading, setLoading] = useState(false);\r\n  const [options, setOptions] = useState<IOptionItem[]>([]);\r\n  const [selectedOptionIndex, setSelectedOptionIndex] = useState(-1);\r\n  const [selectedOption, setSelectedOption] = useState<IOptionItem | null>(\r\n    null\r\n  );\r\n  const [searchResults, setSearchResults] = useState<IOptionItem[]>([]);\r\n  const inputRef = useRef<HTMLInputElement>(null);\r\n  const ref = useRef(null);\r\n  const federationContext = useFederationContext();\r\n\r\n  const [isFocused, setIsFocused] = useState(false);\r\n\r\n  const [errors] = useState<any>({});\r\n\r\n  useEffect(() => {\r\n    const fetchOptions = async () => {\r\n      setLoading(true);\r\n\r\n      const { data } = await federationContext.apiClient.get(fetchUrl || \"\");\r\n      // osetreni obou variant navratu  z BE\r\n      const tmpData = data.content || data;\r\n\r\n      setOptions(\r\n        tmpData.map((item: any) => ({\r\n          value: item[valueKey],\r\n          label: item[labelKey] + (showId ? \" (\" + item[valueKey] + \")\" : \"\"),\r\n        }))\r\n      ); // Adjust map according to actual API response\r\n      setLoading(false);\r\n    };\r\n\r\n    if (fetchUrl) fetchOptions();\r\n  }, [fetchUrl, labelKey, showId, valueKey, federationContext.apiClient]);\r\n\r\n  useEffect(() => {\r\n    if (initOptions) setOptions(initOptions);\r\n  }, [initOptions]);\r\n\r\n  useEffect(() => {\r\n    if (value && options) {\r\n      const initOption = options.find((it) => it.value == value);\r\n\r\n      if (initOption) {\r\n        setQuery(initOption.label);\r\n        setSelectedOption(initOption);\r\n      }\r\n    }\r\n  }, [value, options]);\r\n\r\n  useEffect(() => {\r\n    const fetchOptions = async () => {\r\n      setLoading(true);\r\n      const { data } = await federationContext.apiClient.get(fetchUrl + query);\r\n      setOptions(\r\n        data.map((item: any) => ({\r\n          value: item[valueKey],\r\n          label: item[labelKey] + (showId ? \" (\" + item[valueKey] + \")\" : \"\"),\r\n        }))\r\n      ); // Adjust map according to actual API response\r\n      setSearchResults(\r\n        data.map((item: any) => ({\r\n          value: item[valueKey],\r\n          label: item[labelKey] + (showId ? \" (\" + item[valueKey] + \")\" : \"\"),\r\n        }))\r\n      ); // Adjust map according to actual API response\r\n\r\n      setLoading(false);\r\n    };\r\n\r\n    if (serverSearch) fetchOptions();\r\n  }, [\r\n    query,\r\n    serverSearch,\r\n    valueKey,\r\n    labelKey,\r\n    fetchUrl,\r\n    federationContext.apiClient,\r\n    showId,\r\n  ]);\r\n\r\n  useClickAway(ref, () => {\r\n    setSearchResults([]);\r\n    if (!selectedOption) {\r\n      setQuery(\"\");\r\n      onChange(null);\r\n    }\r\n\r\n    handleBlur();\r\n  });\r\n\r\n  const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    setQuery(event.target.value);\r\n    setSelectedOption(null);\r\n    setSelectedOptionIndex(-1);\r\n    setSearchResults(\r\n      options.filter((option) =>\r\n        option?.label\r\n          ?.toLowerCase()\r\n          .includes(event.target?.value?.toLowerCase())\r\n      )\r\n    );\r\n  };\r\n  const handleFocus = () => {\r\n    setIsFocused(true);\r\n    onFocus();\r\n    setSearchResults(\r\n      options /*.filter((option) =>\r\n        option.label.toLowerCase().includes(query.toLowerCase()),\r\n      ),*/\r\n    );\r\n    inputRef.current?.select(); // Add this line\r\n  };\r\n\r\n  const handleClearQuery = () => {\r\n    setQuery(\"\");\r\n    onChange(null);\r\n    setSelectedOption(null);\r\n    setTimeout(() => {\r\n      setSelectedOptionIndex(-1);\r\n      setSearchResults(options);\r\n    }, 1000);\r\n  };\r\n\r\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n    if (event.key === \"ArrowUp\" && searchResults.length > 0) {\r\n      setSelectedOptionIndex((prevIndex) =>\r\n        prevIndex > 0 ? prevIndex - 1 : searchResults.length - 1\r\n      );\r\n    } else if (event.key === \"ArrowDown\" && searchResults.length > 0) {\r\n      setSelectedOptionIndex((prevIndex) =>\r\n        prevIndex < searchResults.length - 1 ? prevIndex + 1 : 0\r\n      );\r\n    } else if (event.key === \"Enter\" && selectedOptionIndex !== -1) {\r\n      handleOptionClick(searchResults[selectedOptionIndex]);\r\n    } else if (event.key === \"Escape\" && selectedOptionIndex !== -1) {\r\n      handleBlur();\r\n    }\r\n  };\r\n\r\n  const handleOptionClick = (option: IOptionItem) => {\r\n    setQuery(option.label);\r\n    setSelectedOption(option);\r\n    setSelectedOptionIndex(-1);\r\n\r\n    onChange(option.value);\r\n\r\n    handleBlur();\r\n  };\r\n  const handleBlur = () => {\r\n    setSearchResults([]);\r\n    onBlur();\r\n    setIsFocused(false);\r\n  };\r\n\r\n  return (\r\n    <div className=\"w-full  flex-col justify-start items-start gap-1.5 inline-flex\">\r\n      <div\r\n        className=\"self-stretch  flex-col justify-start items-start gap-1.5 flex relative\"\r\n        ref={ref}\r\n      >\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={`self-stretch px-3 py-1.5 justify-start items-center gap-2 inline-flex outline-none border  bg-white\r\n            ${\r\n              isFocused\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            ${rounded ? \" rounded-lg \" : \" rounded-none \"}`}\r\n        >\r\n          <div className=\"Content grow shrink basis-0 min-h-5 xl:min-h-7 justify-start items-start gap-2 flex relative  flex-col w-full  mx-auto\">\r\n            <SearchInput\r\n              value={query}\r\n              onChange={handleQueryChange}\r\n              onKeyDown={handleKeyDown}\r\n              onFocus={handleFocus} // Pass the onFocus handler\r\n              clearQuery={handleClearQuery} // Pass the onFocus handler\r\n              inputRef={inputRef}\r\n              placeholder={placeholder}\r\n              isFocused={isFocused}\r\n              onBlur={handleBlur}\r\n              isLoading={loading}\r\n              clearable={clearable}\r\n            />\r\n          </div>\r\n        </div>\r\n        {searchResults.length > 0 && (\r\n          <OptionList\r\n            options={searchResults}\r\n            selectedOptionIndex={selectedOptionIndex}\r\n            handleOptionClick={handleOptionClick}\r\n            label={label}\r\n          />\r\n        )}\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    </div>\r\n  );\r\n};\r\n\r\nconst OptionList: React.FC<OptionListProps> = ({\r\n  options,\r\n  selectedOptionIndex,\r\n  handleOptionClick,\r\n  label,\r\n}) => {\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n  useEffect(() => {\r\n    // Ensure the selected option is scrolled into view\r\n    if (selectedOptionIndex >= 0 && selectedOptionIndex < options.length) {\r\n      const selectedElement = containerRef.current?.children[\r\n        selectedOptionIndex\r\n      ] as HTMLDivElement;\r\n      selectedElement?.scrollIntoView({\r\n        behavior: \"instant\",\r\n        block: \"nearest\",\r\n      });\r\n    }\r\n  }, [selectedOptionIndex, options.length]);\r\n\r\n  return (\r\n    <div\r\n      ref={containerRef}\r\n      className={`overflow-y-auto resultOptionContainer w-full max-h-96 outline-indigo-200 absolute outline-4 bg-white border border-gray-200 drop-shadow-xl  z-50 ${label ? \"top-[68px]\" : \"top-[40px]\"}  *:\r\n         \r\n            `}\r\n    >\r\n      {options?.map((option, index) => (\r\n        <div\r\n          key={option.value as string}\r\n          className={`py-2 px-4 flex items-center justify-between gap-8 hover:bg-gray-200 cursor-pointer text-sm ${\r\n            selectedOptionIndex === index ? \"bg-gray-200\" : \"\"\r\n          }`}\r\n          onClick={() => handleOptionClick(option)}\r\n        >\r\n          <p className=\"font-normal\">{option.label}</p>\r\n        </div>\r\n      ))}\r\n    </div>\r\n  );\r\n};\r\n\r\nconst SearchInput: React.FC<SearchInputProps> = ({\r\n  value,\r\n  onChange,\r\n  onKeyDown,\r\n  onFocus,\r\n  onBlur,\r\n  inputRef,\r\n  placeholder,\r\n  clearQuery,\r\n  isFocused,\r\n  isLoading,\r\n  clearable = true,\r\n}) => {\r\n  const handleExpandMoreClick = () => {\r\n    inputRef.current?.focus();\r\n    onFocus();\r\n  };\r\n\r\n  const handleClearQuery = () => {\r\n    clearQuery();\r\n  };\r\n\r\n  return (\r\n    <div className=\"relative flex items-center w-full sharedResource text-sm bg-white\">\r\n      <input\r\n        type=\"text\"\r\n        className={`pl-1 py-1 border-gray-800  bg-white  w-full ${\r\n          isLoading ? \"pr-10 \" : \"pr-20\"\r\n        }`}\r\n        value={value}\r\n        onChange={onChange}\r\n        onKeyDown={onKeyDown}\r\n        onFocus={onFocus}\r\n        ref={inputRef}\r\n        placeholder={placeholder}\r\n        disabled={isLoading}\r\n      />\r\n      {isLoading && (\r\n        <div className=\"loader absolute right-0 text-gray-500\">\r\n          {/* You can replace this div with an SVG or another icon of your choice */}\r\n          <svg\r\n            className=\"animate-spin h-5 w-5\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            fill=\"none\"\r\n            viewBox=\"0 0 24 24\"\r\n          >\r\n            <circle\r\n              className=\"opacity-25\"\r\n              cx=\"12\"\r\n              cy=\"12\"\r\n              r=\"10\"\r\n              stroke=\"currentColor\"\r\n              strokeWidth=\"4\"\r\n            />\r\n            <path\r\n              className=\"opacity-75\"\r\n              fill=\"currentColor\"\r\n              d=\"M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z\"\r\n            />\r\n          </svg>\r\n        </div>\r\n      )}\r\n      {isFocused && !isLoading && (\r\n        <MdExpandLess\r\n          className=\"material-icons absolute right-0 cursor-pointer text-gray-500\"\r\n          onClick={onBlur}\r\n        />\r\n      )}\r\n      {!isFocused && !isLoading && (\r\n        <MdExpandMore\r\n          className=\"material-icons absolute right-0 cursor-pointer text-gray-500\"\r\n          onClick={handleExpandMoreClick}\r\n        />\r\n      )}\r\n      {value && clearable && !isLoading && (\r\n        <MdClose\r\n          className=\"material-icons absolute right-6 cursor-pointer text-gray-500\"\r\n          onClick={handleClearQuery}\r\n        />\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default AutocompleteSearchBar;\r\n"],"names":["_b","_a"],"mappings":"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"}

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

@@ -4,4 +4,4 @@ export interface IInputFieldProps extends IFormFieldGlobalProps {
     nameEnd: string;
     [key: string]: any;
 }
-export default function DateRangeField({ label, name, nameEnd, value, description, required, onInputChange, placeholder, className, register, disabled, errors, ...rest }: IInputFieldProps): import("react/jsx-runtime").JSX.Element;
+export default function DateRangeField({ label, name, nameEnd, value, description, required, onInputChange, placeholder, className, register, disabled, errors, rounded, ...rest }: IInputFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/DateRangeField.js

@@ -13,6 +13,7 @@ function DateRangeField({
   register,
   disabled,
   errors = {},
+  rounded = true,
   ...rest
 }) {
   var _a;
@@ -46,9 +47,9 @@ function DateRangeField({
   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,
+      className: "min-h-30 flex-col justify-start items-start gap-1.5  w-full relative min-w-[180px] " + className,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "self-stretch flex-col justify-start items-start gap-1.5 flex py-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "self-stretch flex-col justify-start items-start gap-1.5 flex ", children: [
           label && /* @__PURE__ */ jsxs("div", { className: "text-slate-700 text-sm font-medium  leading-tight", children: [
             label,
             required ? "*" : ""
@@ -66,10 +67,10 @@ function DateRangeField({
               onChange: handleValueChange,
               displayFormat: "DD.MM.YYYY",
               inputClassName: (className2) => {
-                return className2 + " focus:ring-indigo-200  focus:ring-4 border !border-gray-200 ";
+                return className2 + `  focus:!ring-indigo-200 focus:!border-indigo-300  focus:ring-4 border !border-gray-200 !pr-8 !pl-[8px] font-normal ${rounded ? " rounded-lg " : " !rounded-none "}`;
               },
               containerClassName: (className2) => {
-                return className2 + "  ";
+                return className2 + " ";
               },
               separator: "-",
               ...rest

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangeField.js","sources":["../../../lib/components/form/DateRangeField.tsx"],"sourcesContent":["import Datepicker from \"react-tailwindcss-datepicker\";\r\nimport { ChangeEvent } from \"react\";\r\nimport { IFormFieldGlobalProps } from \"../../types\";\r\n\r\nexport interface IInputFieldProps extends IFormFieldGlobalProps {\r\n  nameEnd: string;\r\n  [key: string]: any;\r\n}\r\n\r\nexport default function DateRangeField({\r\n  label,\r\n  name,\r\n  nameEnd,\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  errors = {},\r\n  ...rest\r\n}: IInputFieldProps) {\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  const handleValueChange = (newValue: any) => {\r\n    console.log(\"newValue:\", newValue);\r\n\r\n    const startEvent = createMockChangeEvent(name, newValue.startDate);\r\n    const endEvent = createMockChangeEvent(nameEnd, newValue.endDate);\r\n\r\n    onInputChange(startEvent);\r\n    onInputChange(endEvent);\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          <Datepicker\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 \"\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":";;AASA,SAAwB,eAAe;AAAA,EACrC;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,GAAqB;;AAEb,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;AAEI,QAAA,oBAAoB,CAAC,aAAkB;AACnC,YAAA,IAAI,aAAa,QAAQ;AAEjC,UAAM,aAAa,sBAAsB,MAAM,SAAS,SAAS;AACjE,UAAM,WAAW,sBAAsB,SAAS,SAAS,OAAO;AAEhE,kBAAc,UAAU;AACxB,kBAAc,QAAQ;AAAA,EAAA;AAGxB,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,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,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;"}
+{"version":3,"file":"DateRangeField.js","sources":["../../../lib/components/form/DateRangeField.tsx"],"sourcesContent":["import Datepicker from \"react-tailwindcss-datepicker\";\r\nimport { ChangeEvent } from \"react\";\r\nimport { IFormFieldGlobalProps } from \"../../types\";\r\n\r\nexport interface IInputFieldProps extends IFormFieldGlobalProps {\r\n  nameEnd: string;\r\n  [key: string]: any;\r\n}\r\n\r\nexport default function DateRangeField({\r\n  label,\r\n  name,\r\n  nameEnd,\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  errors = {},\r\n  rounded = true,\r\n  ...rest\r\n}: IInputFieldProps) {\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  const handleValueChange = (newValue: any) => {\r\n    console.log(\"newValue:\", newValue);\r\n\r\n    const startEvent = createMockChangeEvent(name, newValue.startDate);\r\n    const endEvent = createMockChangeEvent(nameEnd, newValue.endDate);\r\n\r\n    onInputChange(startEvent);\r\n    onInputChange(endEvent);\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 min-w-[180px] \" +\r\n          className\r\n        }\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              {required ? \"*\" : \"\"}\r\n            </div>\r\n          )}\r\n          <Datepicker\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:!border-indigo-300  focus:ring-4 border !border-gray-200 !pr-8 !pl-[8px] font-normal ${rounded ? \" rounded-lg \" : \" !rounded-none \"}`\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":";;AASA,SAAwB,eAAe;AAAA,EACrC;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,UAAU;AAAA,EACV,GAAG;AACL,GAAqB;;AAEb,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;AAEI,QAAA,oBAAoB,CAAC,aAAkB;AACnC,YAAA,IAAI,aAAa,QAAQ;AAEjC,UAAM,aAAa,sBAAsB,MAAM,SAAS,SAAS;AACjE,UAAM,WAAW,sBAAsB,SAAS,SAAS,OAAO;AAEhE,kBAAc,UAAU;AACxB,kBAAc,QAAQ;AAAA,EAAA;AAGxB,SAEI,oBAAA,UAAA,EAAA,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WACE,wFACA;AAAA,MAGF,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAU,iEACZ,UAAA;AAAA,UACC,SAAA,qBAAC,OAAI,EAAA,WAAU,qDACZ,UAAA;AAAA,YAAA;AAAA,YACA,WAAW,MAAM;AAAA,UAAA,GACpB;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,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,uHAAuH,UAAU,iBAAiB,iBAAiB;AAAA,cAEvK;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/InputField.d.ts

@@ -2,5 +2,6 @@ import { IFormFieldGlobalProps } from '../../types';
 
 export interface IInputFieldProps extends IFormFieldGlobalProps {
     maxLength?: number;
+    debounceTimeout?: number;
 }
-export default function InputField({ label, name, value, description, onInputChange, placeholder, className, register, type, disabled, maxLength, errors, }: IInputFieldProps): import("react/jsx-runtime").JSX.Element;
+export default function InputField({ label, name, value, description, onInputChange, placeholder, className, register, type, disabled, maxLength, errors, rounded, debounceTimeout, }: IInputFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/InputField.js

@@ -14,12 +14,17 @@ function InputField({
   type,
   disabled,
   maxLength,
-  errors = {}
+  errors = {},
+  rounded = true,
+  debounceTimeout
 }) {
   var _a;
   const wrapperRef = React.useRef(null);
   const [isFocused, setIsFocused] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState(value);
+  const debounceTimeoutRef = React.useRef(null);
   const handleClear = (e) => {
+    setInputValue("");
     onInputChange({
       ...e,
       target: {
@@ -37,25 +42,36 @@ function InputField({
   } = register ? register(name) : {};
   const ref = registeredRef || fallbackRef;
   const handleSetFocus = () => {
-    console.log(
-      "%clibcomponents\formInputField.tsx:44 handleSetFocus",
-      "color: #007acc;"
-    );
     setIsFocused(true);
     ref.current.focus();
   };
   useClickAway(wrapperRef, () => {
     if (isFocused) {
       setIsFocused(false);
-      console.log(
-        "%clibcomponents\formInputField.tsx:54 clickaway",
-        "color: #007acc;"
-      );
     }
   });
-  const hangleChange = (e) => {
-    onInputChange(e);
+  const handleDebouncedChange = React.useCallback(
+    (e) => {
+      const { value: value2 } = e.target;
+      setInputValue(value2);
+      if (debounceTimeout) {
+        if (debounceTimeoutRef.current)
+          clearTimeout(debounceTimeoutRef.current);
+        debounceTimeoutRef.current = setTimeout(() => {
+          onInputChange(e);
+        }, debounceTimeout);
+      } else {
+        onInputChange(e);
+      }
+    },
+    [debounceTimeout, debounceTimeoutRef, onInputChange, setInputValue]
+  );
+  const handleBlur = (e) => {
+    formOnBlur(e);
     setIsFocused(false);
+    if (debounceTimeoutRef.current)
+      clearTimeout(debounceTimeoutRef.current);
+    onInputChange(e);
   };
   const renderInput = () => {
     switch (type) {
@@ -66,17 +82,14 @@ function InputField({
             id: name,
             className: "grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none  ",
             disabled,
-            value: value || "",
+            value: inputValue || "",
             rows: 3,
             ...rest,
             ref,
-            onChange: (e) => hangleChange(e),
+            onChange: (e) => handleDebouncedChange(e),
             onFocus: () => setIsFocused(true),
             maxLength: maxLength || 4e3,
-            onBlur: (e) => {
-              formOnBlur(e);
-              setIsFocused(false);
-            }
+            onBlur: handleBlur
           }
         );
       default:
@@ -86,17 +99,14 @@ function InputField({
             className: "text-gray-900 text-sm font-normal leading-normal text-ellipsis overflow-hidden w-full",
             id: name,
             readOnly: disabled,
-            value: value || "",
+            value: inputValue || "",
             type,
             ...rest,
             ref,
             placeholder,
-            onChange: (e) => hangleChange(e),
+            onChange: (e) => handleDebouncedChange(e),
             onFocus: () => setIsFocused(true),
-            onBlur: (e) => {
-              formOnBlur(e);
-              setIsFocused(false);
-            }
+            onBlur: handleBlur
           }
         ) });
     }
@@ -113,8 +123,9 @@ function InputField({
           /* @__PURE__ */ jsxs(
             "div",
             {
-              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 " : ""}`,
+              className: `self-stretch w-full px-3  py-1 bg-white   border justify-start items-center gap-0 inline-flex outline-none 
+               ${isFocused ? "outline-4 outline-indigo-200 outline-offset-0 border-indigo-300 " : ""}
+               ${rounded ? " rounded-lg " : " rounded-none "}`,
               onClick: handleSetFocus,
               children: [
                 /* @__PURE__ */ jsx("div", { className: "grow shrink basis-0 min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] ", children: renderInput() }),

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

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","sources":["../../../lib/components/form/InputField.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { IFormFieldGlobalProps } from \"../../types\";\r\nimport { MdClose } from \"react-icons/md\";\r\nimport { useClickAway } from \"react-use\";\r\n\r\nexport interface IInputFieldProps extends IFormFieldGlobalProps {\r\n  maxLength?: number;\r\n}\r\n\r\nexport default function InputField({\r\n  label,\r\n  name,\r\n  value,\r\n  description,\r\n  onInputChange,\r\n  placeholder,\r\n  className,\r\n  register,\r\n  type,\r\n  disabled,\r\n  maxLength,\r\n  errors = {},\r\n}: IInputFieldProps) {\r\n  const wrapperRef = React.useRef(null);\r\n  const [isFocused, setIsFocused] = React.useState(false);\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 fallbackRef = React.useRef(null);\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 ref = registeredRef || fallbackRef;\r\n  const handleSetFocus = () => {\r\n    console.log(\r\n      \"%clibcomponents\\formInputField.tsx:44 handleSetFocus\",\r\n      \"color: #007acc;\"\r\n    );\r\n    setIsFocused(true);\r\n    ref.current.focus();\r\n  };\r\n  useClickAway(wrapperRef, () => {\r\n    if (isFocused) {\r\n      setIsFocused(false);\r\n      console.log(\r\n        \"%clibcomponents\\formInputField.tsx:54 clickaway\",\r\n        \"color: #007acc;\"\r\n      );\r\n    }\r\n  });\r\n\r\n  const hangleChange = (e: any) => {\r\n    onInputChange(e);\r\n    setIsFocused(false);\r\n  };\r\n\r\n  const renderInput = () => {\r\n    switch (type) {\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={(e) => hangleChange(e)}\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      default:\r\n        return (\r\n          <>\r\n            <input\r\n              className=\"text-gray-900 text-sm font-normal leading-normal text-ellipsis overflow-hidden 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={(e) => hangleChange(e)}\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    <>\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        ref={wrapperRef}\r\n        id=\"component\"\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={handleSetFocus}\r\n          >\r\n            <div className=\"grow shrink basis-0 min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] \">\r\n              {renderInput()}\r\n            </div>\r\n            {value && (\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>\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      </div>\r\n    </>\r\n  );\r\n}\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"InputField.js","sources":["../../../lib/components/form/InputField.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { IFormFieldGlobalProps } from \"../../types\";\r\nimport { MdClose } from \"react-icons/md\";\r\nimport { useClickAway } from \"react-use\";\r\n\r\nexport interface IInputFieldProps extends IFormFieldGlobalProps {\r\n  maxLength?: number;\r\n  debounceTimeout?: number;\r\n}\r\n\r\nexport default function InputField({\r\n  label,\r\n  name,\r\n  value,\r\n  description,\r\n  onInputChange,\r\n  placeholder,\r\n  className,\r\n  register,\r\n  type,\r\n  disabled,\r\n  maxLength,\r\n  errors = {},\r\n  rounded = true,\r\n  debounceTimeout,\r\n}: IInputFieldProps) {\r\n  const wrapperRef = React.useRef(null);\r\n  const [isFocused, setIsFocused] = React.useState(false);\r\n  const [inputValue, setInputValue] = React.useState(value); // Local state for input value\r\n  const debounceTimeoutRef = React.useRef<NodeJS.Timeout | null>(null); // Ref to hold the debounce timeout\r\n  const handleClear = (e: any) => {\r\n    setInputValue(\"\"); // Clear local state\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 fallbackRef = React.useRef(null);\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 ref = registeredRef || fallbackRef;\r\n  const handleSetFocus = () => {\r\n    setIsFocused(true);\r\n    ref.current.focus();\r\n  };\r\n  useClickAway(wrapperRef, () => {\r\n    if (isFocused) {\r\n      setIsFocused(false);\r\n    }\r\n  });\r\n\r\n  const handleDebouncedChange = React.useCallback(\r\n    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\r\n      const { value } = e.target;\r\n      setInputValue(value); // Update local state\r\n      if (debounceTimeout) {\r\n        // Clear any previous debounce timeout\r\n        if (debounceTimeoutRef.current)\r\n          clearTimeout(debounceTimeoutRef.current);\r\n\r\n        // Set a new debounce timeout\r\n        debounceTimeoutRef.current = setTimeout(() => {\r\n          onInputChange(e); // Trigger onInputChange after debounce period\r\n        }, debounceTimeout); // Delay of 500ms (adjust as needed)\r\n      } else {\r\n        onInputChange(e);\r\n      }\r\n    },\r\n    [debounceTimeout, debounceTimeoutRef, onInputChange, setInputValue]\r\n  );\r\n\r\n  const handleBlur = (\r\n    e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>\r\n  ) => {\r\n    formOnBlur(e); // Call React Hook Form's onBlur\r\n    setIsFocused(false); // Then call your custom onBlur logic\r\n\r\n    // Make sure onInputChange is triggered on blur if not already triggered\r\n    if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);\r\n    onInputChange(e);\r\n  };\r\n\r\n  const renderInput = () => {\r\n    switch (type) {\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={inputValue || \"\"}\r\n            rows={3}\r\n            {...rest} // Spread the rest of register's return value\r\n            ref={ref}\r\n            onChange={(e) => handleDebouncedChange(e)}\r\n            onFocus={() => setIsFocused(true)}\r\n            maxLength={maxLength || 4000}\r\n            onBlur={handleBlur}\r\n          />\r\n        );\r\n      default:\r\n        return (\r\n          <>\r\n            <input\r\n              className=\"text-gray-900 text-sm font-normal leading-normal text-ellipsis overflow-hidden w-full\"\r\n              id={name}\r\n              readOnly={disabled}\r\n              value={inputValue || \"\"}\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={(e) => handleDebouncedChange(e)}\r\n              onFocus={() => setIsFocused(true)}\r\n              onBlur={handleBlur}\r\n            />\r\n          </>\r\n        );\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        ref={wrapperRef}\r\n        id=\"component\"\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   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               ${rounded ? \" rounded-lg \" : \" rounded-none \"}`}\r\n            onClick={handleSetFocus}\r\n          >\r\n            <div className=\"grow shrink basis-0 min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] \">\r\n              {renderInput()}\r\n            </div>\r\n            {value && (\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>\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      </div>\r\n    </>\r\n  );\r\n}\r\n"],"names":["value"],"mappings":";;;;AAUA,SAAwB,WAAW;AAAA,EACjC;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,UAAU;AAAA,EACV;AACF,GAAqB;;AACb,QAAA,aAAa,MAAM,OAAO,IAAI;AACpC,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,KAAK;AACtD,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,KAAK;AAClD,QAAA,qBAAqB,MAAM,OAA8B,IAAI;AAC7D,QAAA,cAAc,CAAC,MAAW;AAC9B,kBAAc,EAAE;AACF,kBAAA;AAAA,MACZ,GAAG;AAAA,MACH,QAAQ;AAAA,QACN,OAAO;AAAA,QACP;AAAA,MACF;AAAA,IAAA,CACD;AAAA,EAAA;AAEG,QAAA,cAAc,MAAM,OAAO,IAAI;AAC/B,QAAA;AAAA,IACJ,KAAK,gBAAgB;AAAA,IACrB,QAAQ,aAAa,MAAM;AAAA,IAAC;AAAA,IAC5B,GAAG;AAAA,EACD,IAAA,WAAW,SAAS,IAAI,IAAI,CAAA;AAEhC,QAAM,MAAM,iBAAiB;AAC7B,QAAM,iBAAiB,MAAM;AAC3B,iBAAa,IAAI;AACjB,QAAI,QAAQ;EAAM;AAEpB,eAAa,YAAY,MAAM;AAC7B,QAAI,WAAW;AACb,mBAAa,KAAK;AAAA,IACpB;AAAA,EAAA,CACD;AAED,QAAM,wBAAwB,MAAM;AAAA,IAClC,CAAC,MAAiE;AAChE,YAAM,EAAE,OAAAA,WAAU,EAAE;AACpB,oBAAcA,MAAK;AACnB,UAAI,iBAAiB;AAEnB,YAAI,mBAAmB;AACrB,uBAAa,mBAAmB,OAAO;AAGtB,2BAAA,UAAU,WAAW,MAAM;AAC5C,wBAAc,CAAC;AAAA,WACd,eAAe;AAAA,MAAA,OACb;AACL,sBAAc,CAAC;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,oBAAoB,eAAe,aAAa;AAAA,EAAA;AAG9D,QAAA,aAAa,CACjB,MACG;AACH,eAAW,CAAC;AACZ,iBAAa,KAAK;AAGlB,QAAI,mBAAmB;AAAS,mBAAa,mBAAmB,OAAO;AACvE,kBAAc,CAAC;AAAA,EAAA;AAGjB,QAAM,cAAc,MAAM;AACxB,YAAQ,MAAM;AAAA,MACZ,KAAK;AAED,eAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,WAAU;AAAA,YACV;AAAA,YACA,OAAO,cAAc;AAAA,YACrB,MAAM;AAAA,YACL,GAAG;AAAA,YACJ;AAAA,YACA,UAAU,CAAC,MAAM,sBAAsB,CAAC;AAAA,YACxC,SAAS,MAAM,aAAa,IAAI;AAAA,YAChC,WAAW,aAAa;AAAA,YACxB,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MAGd;AACE,eAEI,oBAAA,UAAA,EAAA,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,YACJ,UAAU;AAAA,YACV,OAAO,cAAc;AAAA,YACrB;AAAA,YACC,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YACA,UAAU,CAAC,MAAM,sBAAsB,CAAC;AAAA,YACxC,SAAS,MAAM,aAAa,IAAI;AAAA,YAChC,QAAQ;AAAA,UAAA;AAAA,QAEZ,EAAA,CAAA;AAAA,IAEN;AAAA,EAAA;AAGF,SAEI,oBAAA,UAAA,EAAA,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WACE,0EACA;AAAA,MAEF,KAAK;AAAA,MACL,IAAG;AAAA,MAEH,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAU,gEACZ,UAAA;AAAA,UAAA,SACE,oBAAA,OAAA,EAAI,WAAU,qDACZ,UACH,OAAA;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,iBACN,YAAY,qEAAqE,EAAE;AAAA,iBACnF,UAAU,iBAAiB,gBAAgB;AAAA,cAChD,SAAS;AAAA,cAET,UAAA;AAAA,gBAAA,oBAAC,OAAI,EAAA,WAAU,iHACZ,UAAA,YAAA,GACH;AAAA,gBACC,SACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,SAAS;AAAA,oBAET,UAAA;AAAA,sBAAA,oBAAC,OAAI,EAAA,WAAU,gGACb,UAAA,oBAAC,UAAQ,CAAA,GACX;AAAA,sBAAO;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACT;AAAA,cAAA;AAAA,YAAA;AAAA,UAEJ;AAAA,QAAA,GACF;AAAA,QACC,eAAe,CAAC,iCACd,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/SelectField.d.ts

@@ -5,4 +5,4 @@ export interface ISelectFieldProps extends IFormFieldGlobalProps {
     valueKey?: string;
     labelKey?: string;
 }
-export default function SelectField({ label, name, value, description, onInputChange, options, placeholder, className, errors, clearable, required, }: ISelectFieldProps): import("react/jsx-runtime").JSX.Element;
+export default function SelectField({ label, name, value, description, onInputChange, options, placeholder, className, errors, clearable, required, rounded, }: ISelectFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/SelectField.js

@@ -13,7 +13,8 @@ function SelectField({
   className,
   errors = {},
   clearable,
-  required
+  required,
+  rounded = true
 }) {
   var _a;
   const [isFocused, setIsFocused] = React.useState(false);
@@ -111,8 +112,12 @@ function SelectField({
           /* @__PURE__ */ jsxs(
             "div",
             {
-              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 " : ""}`,
+              className: `self-stretch w-full px-3  py-1 bg-white  border justify-start items-center gap-0 inline-flex outline-none 
+               ${isFocused ? "outline-4 outline-indigo-200 outline-offset-0 border-indigo-300 " : ""}
+               
+                  ${rounded ? " rounded-lg " : " rounded-none "}
+                  
+                  `,
               onClick: () => handleToggleFocus(),
               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: [

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 { 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  clearable,\r\n  required,\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    e.stopPropagation(); // Add this line\r\n\r\n    setIsFocused(false);\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  w-full whitespace-nowrap absolute  z-[100000] -top-[1px] mt-[4px] bg-white rounded-lg shadow-xl border\r\n         border-gray-200 justify-start items-start inline-flex  overflow-auto cursor-default\"\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-normal  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            <label\r\n              className=\"text-slate-700 text-sm font-medium  leading-tight\"\r\n              htmlFor={name}\r\n            >\r\n              {label} {required ? \"*\" : \"\"}\r\n            </label>\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-normal 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            {clearable &&\r\n              value !== \"\" &&\r\n              value !== null &&\r\n              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        <div className=\"w-full relative\">{isFocused && listOfOptions()}</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      </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  clearable,\r\n  required,\r\n  rounded = true,\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    e.stopPropagation(); // Add this line\r\n\r\n    setIsFocused(false);\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  w-full whitespace-nowrap absolute  z-[100000] -top-[1px] mt-[4px] bg-white rounded-lg shadow-xl border\r\n         border-gray-200 justify-start items-start inline-flex  overflow-auto cursor-default\"\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-normal  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            <label\r\n              className=\"text-slate-700 text-sm font-medium  leading-tight\"\r\n              htmlFor={name}\r\n            >\r\n              {label} {required ? \"*\" : \"\"}\r\n            </label>\r\n          )}\r\n          <div\r\n            className={`self-stretch w-full px-3  py-1 bg-white  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               \r\n                  ${rounded ? \" rounded-lg \" : \" rounded-none \"}\r\n                  \r\n                  `}\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-normal 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            {clearable &&\r\n              value !== \"\" &&\r\n              value !== null &&\r\n              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        <div className=\"w-full relative\">{isFocused && listOfOptions()}</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      </div>\r\n    </>\r\n  );\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -187,6 +187,7 @@ export interface IFormFieldGlobalProps {
     placeholder?: string;
     children?: React.ReactNode;
     className?: string;
+    rounded?: boolean;
     onInputChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | any>) => void;
 }
 export interface SysConfigHolidayEntityResponse {

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../lib/types.ts"],"sourcesContent":["import { AxiosInstance } from \"axios\";\r\nimport { Emitter } from \"mitt\";\r\n\r\n\r\nimport { UseFormReturn } from \"react-hook-form\";\r\n\r\nexport interface IUserInfo {\r\n  contractGroup: number;\r\n  degreeAfter: string;\r\n  degreeBefore: string;\r\n  departmentId: string;\r\n  departmentName: string;\r\n  departmentNameLong: string;\r\n  email: string;\r\n  employeeId: number;\r\n  firstName: string;\r\n  lastName: string;\r\n  positionName: string;\r\n  positionNumber: string;\r\n  userId: string;\r\n}\r\nexport interface IEmployee extends IUserInfo {\r\n\r\n  deleted: boolean\r\n  hasComputer: string\r\n  language: string\r\n  manager: string\r\n  parentFrId: number\r\n  positionId: number\r\n  validFrom: string\r\n  validTo: string\r\n  contractType: number\r\n  exemption: number\r\n  activatedOn: string\r\n}\r\n\r\nexport interface IAuthApp {\r\n  name: string;\r\n  roles: string[];\r\n}\r\n\r\nexport type IAuthApps = IAuthApp[];\r\n\r\nexport interface IEventMessage {\r\n  title?: string;\r\n  message?: string;\r\n  timeout?: number;\r\n  classes?: string;\r\n}\r\n\r\nexport type Events = {\r\n  message?: IEventMessage;\r\n  loading?: boolean;\r\n};\r\n\r\nexport interface IContextValue {\r\n  userInfo: IUserInfo;\r\n  apiClient: AxiosInstance;\r\n  authApps: IAuthApps;\r\n  emitter: Emitter<Events>;\r\n}\r\nexport interface IOptionItem {\r\n  value: string | number | null;\r\n  label: string;\r\n  description?: string;\r\n}\r\n\r\nexport type IFormProps = {\r\n  formName: string;\r\n  entityId: string;\r\n  entityName: string;\r\n  context: IContextValue;\r\n  onSuccess: (path: string, message?: string) => void;\r\n};\r\nexport type IListProps = {\r\n  id?: string;\r\n  listName: string;\r\n  filters: object; //{ [key: string]: any };\r\n  context: IContextValue;\r\n  title?: string;\r\n};\r\nexport type IPageProps = {\r\n  pageName: string;\r\n  context: IContextValue;\r\n};\r\n\r\nexport type IStartProcessProps = {\r\n  context: IContextValue;\r\n\r\n  onNavigate: (path: string) => void;\r\n};\r\n\r\nexport interface IModuleProcess {\r\n\r\n  key: string;\r\n  name: string;\r\n  description: string;\r\n  disabled?: boolean;\r\n\r\n}\r\nexport interface IModuleReport {\r\n\r\n  pageName: string;\r\n  name: string;\r\n  description: string;\r\n  disabled?: boolean;\r\n  roles?: string[];\r\n  admin?: boolean;\r\n}\r\nexport interface IModuleSettings {\r\n\r\n  key: string;\r\n  name: string;\r\n  description: string;\r\n  disabled?: boolean;\r\n  roles?: string[];\r\n  admin?: boolean;\r\n\r\n}\r\n\r\nexport interface IModuleConstants {\r\n\r\n  key: string\r\n  name: string\r\n  processes: IModuleProcess[],\r\n  reports?: IModuleReport[],\r\n  settings?: IModuleSettings[],\r\n\r\n}\r\n\r\n\r\nexport interface IPosition {\r\n  id: number;\r\n  departmentId: string;\r\n  positionName: string;\r\n  positionNumber: string;\r\n  manager: string;\r\n  virtual: boolean;\r\n  title: string;\r\n}\r\nexport interface IPositionEmployee extends IPosition {\r\n  employee: IEmployee;\r\n}\r\nexport interface IEmployeePosition extends IEmployee {\r\n  position: IPosition;\r\n}\r\nexport type { ICalendarItem } from \"./components/Calendar\";\r\n\r\n\r\nexport interface ITimeOffCategoryDto {\r\n  id?: number;\r\n  name?: string;\r\n}\r\nexport interface ITimeOffData {\r\n  id: number;\r\n  startDate: string;\r\n  endDate: string;\r\n  days?: number;\r\n  year?: number;\r\n  comment?: string;\r\n  applicant?: IEmployee;\r\n  place?: string;\r\n  leaveType?: string;\r\n  initiator?: string;\r\n  dateFromEvidence?: string;\r\n  dateToEvidence?: string;\r\n  status?: number;\r\n  statusText?: string;\r\n  timeOffCategoryDto: ITimeOffCategoryDto;\r\n  applicantContractGroup?: number;\r\n  name?: string;\r\n  daysOfEvidence?: number;\r\n  daysInStartMonth?: number;\r\n  daysInEndMonth?: number;\r\n  lastChange?: string;\r\n  created?: string;\r\n  updated?: string;\r\n  attachment?: IAttachment;\r\n  steps?: IStep[];\r\n}\r\n\r\nexport interface IDepartment {\r\n  departmentId: string;\r\n  nameLong: string;\r\n  parentDepartmentId: string;\r\n  parentLocationId: number;\r\n  nameShort: string;\r\n}\r\n\r\nexport interface IPageable<T> {\r\n  content: T[];\r\n  empty: boolean;\r\n  first: boolean;\r\n  last: boolean;\r\n  number: number;\r\n  numberOfElements: number;\r\n  size: number;\r\n  totalElements: number;\r\n  totalPages: number;\r\n}\r\n\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  errors?: any;\r\n  register?: any;\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\n\r\nexport interface SysConfigHolidayEntityResponse {\r\n  \"id\": number,\r\n  \"date\": string,\r\n  \"day\": number,\r\n  \"month\": number,\r\n  \"year\": number,\r\n  \"dayOfWeek\": number\r\n}\r\n\r\n\r\nexport interface IProfileApprover {\r\n  id: number;\r\n  role: number;\r\n  roleTxt: string;\r\n  approverOrder: number;\r\n  approver: IEmployee;\r\n  position: IPositionEmployee;\r\n  isEmployee: boolean;\r\n  ignore: boolean;\r\n  makePreapprover: boolean;\r\n}\r\n\r\n\r\nexport enum EApproverRoles {\r\n  predschvalovatel = 10,\r\n  zastupce = 20,\r\n  zastupce9 = 30,\r\n  vedouci = 40,\r\n  vyssiSchvalovatel = 60,\r\n  vyssiSchvalovatelZastupce = 61,\r\n  vyssiSchvalovatelZastupce9 = 62,\r\n  dochazkovyVedouci = 90,\r\n}\r\nexport enum EApproverTypes {\r\n  vyssiSchvalovatel = \"vyssiSchvalovatel\",\r\n  vyssiSchvalovatelZastupce = \"vyssiSchvalovatelZastupce\",\r\n  vyssiSchvalovatelZastupce9 = \"vyssiSchvalovatelZastupce9\",\r\n  vedouci = \"vedouci\",\r\n  zastupce9 = \"zastupce9\",\r\n  zastupce = \"zastupce\",\r\n  predschvalovatel1 = \"predschvalovatel1\",\r\n  predschvalovatel2 = \"predschvalovatel2\",\r\n  predschvalovatel3 = \"predschvalovatel3\",\r\n  dochazkovyVedouci = \"dochazkovyVedouci\",\r\n}\r\n\r\nexport interface IAttachment {\r\n\r\n\r\n  id: number;\r\n  created: string;\r\n  createdByEmpId: string;\r\n  updated: string;\r\n  updatedByEmpId: string;\r\n  mimeType: string;\r\n  size: number;\r\n  filename: string;\r\n\r\n}\r\n\r\n\r\n\r\nexport interface IStep {\r\n\r\n\r\n  date: string;\r\n  type: number;\r\n  comment: string;\r\n  decision: string;\r\n  employee: IEmployee;\r\n\r\n}\r\n\r\n\r\nexport enum EDecisionsTranslations {\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\r\nexport interface ProcessDefinitionDto {\r\n  /**\r\n   * The id of the process definition\r\n   *\r\n   * @type {string}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  id?: string | null;\r\n\r\n  /**\r\n   * The key of the process definition, i.e., the id of the BPMN 2.0 XML process definition.\r\n   *\r\n   * @type {string}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  key?: string | null;\r\n\r\n  /**\r\n   * The category of the process definition.\r\n   *\r\n   * @type {string}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  category?: string | null;\r\n\r\n  /**\r\n   * The description of the process definition.\r\n   *\r\n   * @type {string}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  description?: string | null;\r\n\r\n  /**\r\n   * The name of the process definition.\r\n   *\r\n   * @type {string}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  name?: string | null;\r\n\r\n  /**\r\n   * The version of the process definition that the engine assigned to it.\r\n   *\r\n   * @type {number}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  version?: number | null;\r\n\r\n  /**\r\n   * The file name of the process definition.\r\n   *\r\n   * @type {string}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  resource?: string | null;\r\n\r\n  /**\r\n   * The deployment id of the process definition.\r\n   *\r\n   * @type {string}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  deploymentId?: string | null;\r\n\r\n  /**\r\n   * The file name of the process definition diagram, if it exists.\r\n   *\r\n   * @type {string}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  diagram?: string | null;\r\n\r\n  /**\r\n   * A flag indicating whether the definition is suspended or not.\r\n   *\r\n   * @type {boolean}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  suspended?: boolean | null;\r\n\r\n  /**\r\n   * The tenant id of the process definition.\r\n   *\r\n   * @type {string}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  tenantId?: string | null;\r\n\r\n  /**\r\n   * The version tag of the process definition.\r\n   *\r\n   * @type {string}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  versionTag?: string | null;\r\n\r\n  /**\r\n   * History time to live value of the process definition. Is used within [History cleanup](https://docs.camunda.org/manual/7.20/user-guide/process-engine/history/#history-cleanup).\r\n   *\r\n   * @type {number}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  historyTimeToLive?: number | null;\r\n\r\n  /**\r\n   * A flag indicating whether the process definition is startable in Tasklist or not.\r\n   *\r\n   * @type {boolean}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  startableInTasklist?: boolean | null;\r\n}"],"names":["EApproverRoles","EApproverTypes","EDecisionsTranslations"],"mappings":"AA2PY,IAAA,mCAAAA,oBAAL;AACLA,kBAAAA,gBAAA,sBAAmB,EAAnB,IAAA;AACAA,kBAAAA,gBAAA,cAAW,EAAX,IAAA;AACAA,kBAAAA,gBAAA,eAAY,EAAZ,IAAA;AACAA,kBAAAA,gBAAA,aAAU,EAAV,IAAA;AACAA,kBAAAA,gBAAA,uBAAoB,EAApB,IAAA;AACAA,kBAAAA,gBAAA,+BAA4B,EAA5B,IAAA;AACAA,kBAAAA,gBAAA,gCAA6B,EAA7B,IAAA;AACAA,kBAAAA,gBAAA,uBAAoB,EAApB,IAAA;AARUA,SAAAA;AAAA,GAAA,kBAAA,CAAA,CAAA;AAUA,IAAA,mCAAAC,oBAAL;AACLA,kBAAA,mBAAoB,IAAA;AACpBA,kBAAA,2BAA4B,IAAA;AAC5BA,kBAAA,4BAA6B,IAAA;AAC7BA,kBAAA,SAAU,IAAA;AACVA,kBAAA,WAAY,IAAA;AACZA,kBAAA,UAAW,IAAA;AACXA,kBAAA,mBAAoB,IAAA;AACpBA,kBAAA,mBAAoB,IAAA;AACpBA,kBAAA,mBAAoB,IAAA;AACpBA,kBAAA,mBAAoB,IAAA;AAVVA,SAAAA;AAAA,GAAA,kBAAA,CAAA,CAAA;AAyCA,IAAA,2CAAAC,4BAAL;AACLA,0BAAA,UAAW,IAAA;AACXA,0BAAA,UAAW,IAAA;AACXA,0BAAA,WAAY,IAAA;AACZA,0BAAA,QAAS,IAAA;AAJCA,SAAAA;AAAA,GAAA,0BAAA,CAAA,CAAA;"}
+{"version":3,"file":"types.js","sources":["../lib/types.ts"],"sourcesContent":["import { AxiosInstance } from \"axios\";\r\nimport { Emitter } from \"mitt\";\r\n\r\n\r\nimport { UseFormReturn } from \"react-hook-form\";\r\n\r\nexport interface IUserInfo {\r\n  contractGroup: number;\r\n  degreeAfter: string;\r\n  degreeBefore: string;\r\n  departmentId: string;\r\n  departmentName: string;\r\n  departmentNameLong: string;\r\n  email: string;\r\n  employeeId: number;\r\n  firstName: string;\r\n  lastName: string;\r\n  positionName: string;\r\n  positionNumber: string;\r\n  userId: string;\r\n}\r\nexport interface IEmployee extends IUserInfo {\r\n\r\n  deleted: boolean\r\n  hasComputer: string\r\n  language: string\r\n  manager: string\r\n  parentFrId: number\r\n  positionId: number\r\n  validFrom: string\r\n  validTo: string\r\n  contractType: number\r\n  exemption: number\r\n  activatedOn: string\r\n}\r\n\r\nexport interface IAuthApp {\r\n  name: string;\r\n  roles: string[];\r\n}\r\n\r\nexport type IAuthApps = IAuthApp[];\r\n\r\nexport interface IEventMessage {\r\n  title?: string;\r\n  message?: string;\r\n  timeout?: number;\r\n  classes?: string;\r\n}\r\n\r\nexport type Events = {\r\n  message?: IEventMessage;\r\n  loading?: boolean;\r\n};\r\n\r\nexport interface IContextValue {\r\n  userInfo: IUserInfo;\r\n  apiClient: AxiosInstance;\r\n  authApps: IAuthApps;\r\n  emitter: Emitter<Events>;\r\n}\r\nexport interface IOptionItem {\r\n  value: string | number | null;\r\n  label: string;\r\n  description?: string;\r\n}\r\n\r\nexport type IFormProps = {\r\n  formName: string;\r\n  entityId: string;\r\n  entityName: string;\r\n  context: IContextValue;\r\n  onSuccess: (path: string, message?: string) => void;\r\n};\r\nexport type IListProps = {\r\n  id?: string;\r\n  listName: string;\r\n  filters: object; //{ [key: string]: any };\r\n  context: IContextValue;\r\n  title?: string;\r\n};\r\nexport type IPageProps = {\r\n  pageName: string;\r\n  context: IContextValue;\r\n};\r\n\r\nexport type IStartProcessProps = {\r\n  context: IContextValue;\r\n\r\n  onNavigate: (path: string) => void;\r\n};\r\n\r\nexport interface IModuleProcess {\r\n\r\n  key: string;\r\n  name: string;\r\n  description: string;\r\n  disabled?: boolean;\r\n\r\n}\r\nexport interface IModuleReport {\r\n\r\n  pageName: string;\r\n  name: string;\r\n  description: string;\r\n  disabled?: boolean;\r\n  roles?: string[];\r\n  admin?: boolean;\r\n}\r\nexport interface IModuleSettings {\r\n\r\n  key: string;\r\n  name: string;\r\n  description: string;\r\n  disabled?: boolean;\r\n  roles?: string[];\r\n  admin?: boolean;\r\n\r\n}\r\n\r\nexport interface IModuleConstants {\r\n\r\n  key: string\r\n  name: string\r\n  processes: IModuleProcess[],\r\n  reports?: IModuleReport[],\r\n  settings?: IModuleSettings[],\r\n\r\n}\r\n\r\n\r\nexport interface IPosition {\r\n  id: number;\r\n  departmentId: string;\r\n  positionName: string;\r\n  positionNumber: string;\r\n  manager: string;\r\n  virtual: boolean;\r\n  title: string;\r\n}\r\nexport interface IPositionEmployee extends IPosition {\r\n  employee: IEmployee;\r\n}\r\nexport interface IEmployeePosition extends IEmployee {\r\n  position: IPosition;\r\n}\r\nexport type { ICalendarItem } from \"./components/Calendar\";\r\n\r\n\r\nexport interface ITimeOffCategoryDto {\r\n  id?: number;\r\n  name?: string;\r\n}\r\nexport interface ITimeOffData {\r\n  id: number;\r\n  startDate: string;\r\n  endDate: string;\r\n  days?: number;\r\n  year?: number;\r\n  comment?: string;\r\n  applicant?: IEmployee;\r\n  place?: string;\r\n  leaveType?: string;\r\n  initiator?: string;\r\n  dateFromEvidence?: string;\r\n  dateToEvidence?: string;\r\n  status?: number;\r\n  statusText?: string;\r\n  timeOffCategoryDto: ITimeOffCategoryDto;\r\n  applicantContractGroup?: number;\r\n  name?: string;\r\n  daysOfEvidence?: number;\r\n  daysInStartMonth?: number;\r\n  daysInEndMonth?: number;\r\n  lastChange?: string;\r\n  created?: string;\r\n  updated?: string;\r\n  attachment?: IAttachment;\r\n  steps?: IStep[];\r\n}\r\n\r\nexport interface IDepartment {\r\n  departmentId: string;\r\n  nameLong: string;\r\n  parentDepartmentId: string;\r\n  parentLocationId: number;\r\n  nameShort: string;\r\n}\r\n\r\nexport interface IPageable<T> {\r\n  content: T[];\r\n  empty: boolean;\r\n  first: boolean;\r\n  last: boolean;\r\n  number: number;\r\n  numberOfElements: number;\r\n  size: number;\r\n  totalElements: number;\r\n  totalPages: number;\r\n}\r\n\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  errors?: any;\r\n  register?: any;\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  rounded?: boolean;\r\n  onInputChange: (\r\n    e: React.ChangeEvent<\r\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | any\r\n    >\r\n  ) => void;\r\n}\r\n\r\n\r\nexport interface SysConfigHolidayEntityResponse {\r\n  \"id\": number,\r\n  \"date\": string,\r\n  \"day\": number,\r\n  \"month\": number,\r\n  \"year\": number,\r\n  \"dayOfWeek\": number\r\n}\r\n\r\n\r\nexport interface IProfileApprover {\r\n  id: number;\r\n  role: number;\r\n  roleTxt: string;\r\n  approverOrder: number;\r\n  approver: IEmployee;\r\n  position: IPositionEmployee;\r\n  isEmployee: boolean;\r\n  ignore: boolean;\r\n  makePreapprover: boolean;\r\n}\r\n\r\n\r\nexport enum EApproverRoles {\r\n  predschvalovatel = 10,\r\n  zastupce = 20,\r\n  zastupce9 = 30,\r\n  vedouci = 40,\r\n  vyssiSchvalovatel = 60,\r\n  vyssiSchvalovatelZastupce = 61,\r\n  vyssiSchvalovatelZastupce9 = 62,\r\n  dochazkovyVedouci = 90,\r\n}\r\nexport enum EApproverTypes {\r\n  vyssiSchvalovatel = \"vyssiSchvalovatel\",\r\n  vyssiSchvalovatelZastupce = \"vyssiSchvalovatelZastupce\",\r\n  vyssiSchvalovatelZastupce9 = \"vyssiSchvalovatelZastupce9\",\r\n  vedouci = \"vedouci\",\r\n  zastupce9 = \"zastupce9\",\r\n  zastupce = \"zastupce\",\r\n  predschvalovatel1 = \"predschvalovatel1\",\r\n  predschvalovatel2 = \"predschvalovatel2\",\r\n  predschvalovatel3 = \"predschvalovatel3\",\r\n  dochazkovyVedouci = \"dochazkovyVedouci\",\r\n}\r\n\r\nexport interface IAttachment {\r\n\r\n\r\n  id: number;\r\n  created: string;\r\n  createdByEmpId: string;\r\n  updated: string;\r\n  updatedByEmpId: string;\r\n  mimeType: string;\r\n  size: number;\r\n  filename: string;\r\n\r\n}\r\n\r\n\r\n\r\nexport interface IStep {\r\n\r\n\r\n  date: string;\r\n  type: number;\r\n  comment: string;\r\n  decision: string;\r\n  employee: IEmployee;\r\n\r\n}\r\n\r\n\r\nexport enum EDecisionsTranslations {\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\r\nexport interface ProcessDefinitionDto {\r\n  /**\r\n   * The id of the process definition\r\n   *\r\n   * @type {string}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  id?: string | null;\r\n\r\n  /**\r\n   * The key of the process definition, i.e., the id of the BPMN 2.0 XML process definition.\r\n   *\r\n   * @type {string}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  key?: string | null;\r\n\r\n  /**\r\n   * The category of the process definition.\r\n   *\r\n   * @type {string}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  category?: string | null;\r\n\r\n  /**\r\n   * The description of the process definition.\r\n   *\r\n   * @type {string}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  description?: string | null;\r\n\r\n  /**\r\n   * The name of the process definition.\r\n   *\r\n   * @type {string}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  name?: string | null;\r\n\r\n  /**\r\n   * The version of the process definition that the engine assigned to it.\r\n   *\r\n   * @type {number}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  version?: number | null;\r\n\r\n  /**\r\n   * The file name of the process definition.\r\n   *\r\n   * @type {string}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  resource?: string | null;\r\n\r\n  /**\r\n   * The deployment id of the process definition.\r\n   *\r\n   * @type {string}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  deploymentId?: string | null;\r\n\r\n  /**\r\n   * The file name of the process definition diagram, if it exists.\r\n   *\r\n   * @type {string}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  diagram?: string | null;\r\n\r\n  /**\r\n   * A flag indicating whether the definition is suspended or not.\r\n   *\r\n   * @type {boolean}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  suspended?: boolean | null;\r\n\r\n  /**\r\n   * The tenant id of the process definition.\r\n   *\r\n   * @type {string}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  tenantId?: string | null;\r\n\r\n  /**\r\n   * The version tag of the process definition.\r\n   *\r\n   * @type {string}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  versionTag?: string | null;\r\n\r\n  /**\r\n   * History time to live value of the process definition. Is used within [History cleanup](https://docs.camunda.org/manual/7.20/user-guide/process-engine/history/#history-cleanup).\r\n   *\r\n   * @type {number}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  historyTimeToLive?: number | null;\r\n\r\n  /**\r\n   * A flag indicating whether the process definition is startable in Tasklist or not.\r\n   *\r\n   * @type {boolean}\r\n   * @memberof ProcessDefinitionDto\r\n   */\r\n  startableInTasklist?: boolean | null;\r\n}"],"names":["EApproverRoles","EApproverTypes","EDecisionsTranslations"],"mappings":"AA2PY,IAAA,mCAAAA,oBAAL;AACLA,kBAAAA,gBAAA,sBAAmB,EAAnB,IAAA;AACAA,kBAAAA,gBAAA,cAAW,EAAX,IAAA;AACAA,kBAAAA,gBAAA,eAAY,EAAZ,IAAA;AACAA,kBAAAA,gBAAA,aAAU,EAAV,IAAA;AACAA,kBAAAA,gBAAA,uBAAoB,EAApB,IAAA;AACAA,kBAAAA,gBAAA,+BAA4B,EAA5B,IAAA;AACAA,kBAAAA,gBAAA,gCAA6B,EAA7B,IAAA;AACAA,kBAAAA,gBAAA,uBAAoB,EAApB,IAAA;AARUA,SAAAA;AAAA,GAAA,kBAAA,CAAA,CAAA;AAUA,IAAA,mCAAAC,oBAAL;AACLA,kBAAA,mBAAoB,IAAA;AACpBA,kBAAA,2BAA4B,IAAA;AAC5BA,kBAAA,4BAA6B,IAAA;AAC7BA,kBAAA,SAAU,IAAA;AACVA,kBAAA,WAAY,IAAA;AACZA,kBAAA,UAAW,IAAA;AACXA,kBAAA,mBAAoB,IAAA;AACpBA,kBAAA,mBAAoB,IAAA;AACpBA,kBAAA,mBAAoB,IAAA;AACpBA,kBAAA,mBAAoB,IAAA;AAVVA,SAAAA;AAAA,GAAA,kBAAA,CAAA,CAAA;AAyCA,IAAA,2CAAAC,4BAAL;AACLA,0BAAA,UAAW,IAAA;AACXA,0BAAA,UAAW,IAAA;AACXA,0BAAA,WAAY,IAAA;AACZA,0BAAA,QAAS,IAAA;AAJCA,SAAAA;AAAA,GAAA,0BAAA,CAAA,CAAA;"}

package/package.json

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