intelicoreact 2.0.17 → 2.0.19

package/dist/es/Atomic/FormElements/FileLoader/partial/LoadedContent.js

@@ -0,0 +1,52 @@
+import '../../../../styles/base.css';
+import { downloadFile } from "../../../../Functions/utils.js";
+import '../FileLoader.styles.css';/* empty css                 */
+import cn from "classnames";
+import { useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/Atomic/FormElements/FileLoader/partial/LoadedContent.tsx
+var LoadedContent = ({ RC, value, onDelete, icon, isIconAfter, deleteIcon, isUseLinkTitle, isLinkTypeDownload }) => {
+	const handle = { download: async (e) => {
+		e.stopPropagation();
+		e.preventDefault();
+		const target = e.target;
+		downloadFile({
+			url: (target.tagName === "SPAN" || target.tagName === "svg" ? target.parentNode : target).href,
+			name: value.name
+		});
+	} };
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("a", {
+		...useMemo(() => {
+			const props = {};
+			if (isUseLinkTitle) props.title = isLinkTypeDownload ? `Download ${value.name}` : value.path;
+			if (isLinkTypeDownload) props.onClick = handle.download;
+			else props.target = "_blank";
+			return props;
+		}, [
+			isUseLinkTitle,
+			isLinkTypeDownload,
+			value.name,
+			value.path
+		]),
+		href: value.path,
+		rel: "noreferrer",
+		className: cn(`${RC}__value-link`, { [`${RC}__value-link_icon-after`]: isIconAfter }),
+		children: [
+			!isIconAfter && icon,
+			/* @__PURE__ */ jsx("span", {
+				className: cn(`${RC}__value-name`),
+				children: value.name
+			}),
+			isIconAfter && icon
+		]
+	}, `LoadedContent-isNotUseLinkTitle-${isUseLinkTitle}-isLinkTypeDownload-${isLinkTypeDownload}`), /* @__PURE__ */ jsx("span", {
+		"data-testid": "loaded-content__delete-value-button",
+		className: cn(`${RC}__delete-value-button`),
+		onClick: onDelete,
+		children: deleteIcon || "X"
+	})] });
+};
+//#endregion
+export { LoadedContent as default };
+
+//# sourceMappingURL=LoadedContent.js.map

package/dist/es/Atomic/FormElements/FileLoader/partial/LoadedContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadedContent.js","names":[],"sources":["../../../../../../src/Atomic/FormElements/FileLoader/partial/LoadedContent.tsx"],"sourcesContent":["import type { LoadedContentProps } from './LoadedContent.interface';\nimport cn from 'classnames';\n\nimport React, { useMemo } from 'react';\n\nimport { downloadFile } from '../../../../Functions/utils';\nimport '../FileLoader.scss';\n\nconst LoadedContent: React.FC<LoadedContentProps> = ({\n  RC,\n  value,\n  onDelete,\n  icon,\n  isIconAfter,\n  deleteIcon,\n  isUseLinkTitle,\n  isLinkTypeDownload,\n}) => {\n  const handle = {\n    download: async (e: React.MouseEvent<HTMLElement>) => {\n      e.stopPropagation();\n      e.preventDefault();\n      const target = e.target as HTMLElement;\n      const anchor = target.tagName === 'SPAN' || target.tagName === 'svg'\n        ? (target.parentNode as HTMLAnchorElement)\n        : (target as HTMLAnchorElement);\n      downloadFile({ url: anchor.href, name: value.name });\n    },\n  };\n\n  const additionalProps = useMemo(() => {\n    const props: React.AnchorHTMLAttributes<HTMLAnchorElement> = {};\n\n    if (isUseLinkTitle) {\n      props.title = isLinkTypeDownload\n        ? `Download ${value.name}`\n        : value.path;\n    }\n\n    if (isLinkTypeDownload) {\n      props.onClick = handle.download;\n    }\n    else {\n      props.target = '_blank';\n    }\n\n    return props;\n  }, [isUseLinkTitle, isLinkTypeDownload, value.name, value.path]);\n\n  return (\n    <>\n      <a\n        key={`LoadedContent-isNotUseLinkTitle-${isUseLinkTitle}-isLinkTypeDownload-${isLinkTypeDownload}`}\n        {...additionalProps}\n        href={value.path}\n        rel=\"noreferrer\"\n        className={cn(`${RC}__value-link`, {\n          [`${RC}__value-link_icon-after`]: isIconAfter,\n        })}\n      >\n        {!isIconAfter && icon}\n        <span className={cn(`${RC}__value-name`)}>{value.name}</span>\n        {isIconAfter && icon}\n      </a>\n      <span data-testid=\"loaded-content__delete-value-button\" className={cn(`${RC}__delete-value-button`)} onClick={onDelete}>\n        {deleteIcon || 'X'}\n      </span>\n    </>\n  );\n};\n\nexport default LoadedContent;\n"],"mappings":";;;;;;AAQA,IAAM,iBAA+C,EACnD,IACA,OACA,UACA,MACA,aACA,YACA,gBACA,yBACI;CACJ,MAAM,SAAS,EACb,UAAU,OAAO,MAAqC;EACpD,EAAE,gBAAgB;EAClB,EAAE,eAAe;EACjB,MAAM,SAAS,EAAE;EAIjB,aAAa;GAAE,MAHA,OAAO,YAAY,UAAU,OAAO,YAAY,QAC1D,OAAO,aACP,OAAA,CACsB;GAAM,MAAM,MAAM;EAAK,CAAC;CACrD,EACF;CAqBA,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,KAAD;EAEE,GAvBkB,cAAc;GACpC,MAAM,QAAuD,CAAC;GAE9D,IAAI,gBACF,MAAM,QAAQ,qBACV,YAAY,MAAM,SAClB,MAAM;GAGZ,IAAI,oBACF,MAAM,UAAU,OAAO;QAGvB,MAAM,SAAS;GAGjB,OAAO;EACT,GAAG;GAAC;GAAgB;GAAoB,MAAM;GAAM,MAAM;EAAI,CAMpD;EACJ,MAAM,MAAM;EACZ,KAAI;EACJ,WAAW,GAAG,GAAG,GAAG,eAAe,GAChC,GAAG,GAAG,2BAA2B,YACpC,CAAC;YAPH;GASG,CAAC,eAAe;GACjB,oBAAC,QAAD;IAAM,WAAW,GAAG,GAAG,GAAG,aAAa;cAAI,MAAM;GAAW,CAAA;GAC3D,eAAe;EACf;IAXI,mCAAmC,eAAe,sBAAsB,oBAW5E,GACH,oBAAC,QAAD;EAAM,eAAY;EAAsC,WAAW,GAAG,GAAG,GAAG,sBAAsB;EAAG,SAAS;YAC3G,cAAc;CACX,CAAA,CACN,EAAA,CAAA;AAEN"}

package/dist/es/Atomic/FormElements/FileLoaderDescription/FileLoaderDescription.js

@@ -0,0 +1,174 @@
+import '../../../styles/base.css';
+import { clone, compare, getBase64, uuid } from "../../../Functions/utils.js";
+import AccordionText from "../../UI/AccordionText/AccordionText.js";
+import FileLoaderLocal from "../FileLoaderLocal/FileLoaderLocal.js";
+import './FileLoaderDescription.styles.css';/* empty css                           */
+import cn from "classnames";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Atomic/FormElements/FileLoaderDescription/FileLoaderDescription.tsx
+var RC = "file-loader-description";
+var UPLOAD_TRIGGER_KEY = "uploadTrigger";
+var MAX_FILE_SIZE = 10 * 1024 * 1024;
+var ACCEPT_EXTENSIONS_DEFAULT = ".jpg, .jpeg, .png, .pdf, .JPG, .JPEG, .PNG, .PDF";
+var uploadTriggerStucture = {
+	id: UPLOAD_TRIGGER_KEY,
+	isRequired: true,
+	value: "",
+	base64: "",
+	maxItemSizeBytes: MAX_FILE_SIZE,
+	error: null,
+	accept: ACCEPT_EXTENSIONS_DEFAULT
+};
+function getStructure(data) {
+	return {
+		value: "",
+		base64: "",
+		maxItemSizeBytes: MAX_FILE_SIZE,
+		error: null,
+		isRequired: false,
+		accept: ACCEPT_EXTENSIONS_DEFAULT,
+		...data
+	};
+}
+function accordionData(accordionTitle, accordionListContent) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "accordion",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: `${RC}__accordion-title`,
+			children: accordionTitle
+		}), /* @__PURE__ */ jsx("div", {
+			className: `${RC}__list`,
+			children: accordionListContent?.map((item) => /* @__PURE__ */ jsxs("div", {
+				className: `${RC}__list-row`,
+				children: [/* @__PURE__ */ jsx("div", { className: `${RC}__list-bullet` }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+					className: `${RC}__list-title`,
+					children: item.title
+				}), /* @__PURE__ */ jsx("div", {
+					className: `${RC}__list-descr`,
+					children: item.description
+				})] })]
+			}, item?.title))
+		})]
+	});
+}
+function getSafelyInitFiles(initFiles, maxFilesCount) {
+	if (!Array.isArray(initFiles)) return [];
+	let output = clone(initFiles);
+	if (typeof maxFilesCount === "number" && output.length > maxFilesCount) output = output.slice(0, maxFilesCount);
+	return output.map(getStructure);
+}
+function checkOverflow(files, maxFilesCount, additional) {
+	const { error = null, outerError = null } = additional || {};
+	return typeof maxFilesCount === "number" && files.length < maxFilesCount ? [...files, {
+		...clone(uploadTriggerStucture),
+		error,
+		outerError
+	}] : files;
+}
+var FileLoaderDescription = ({ id, testId = "file-loader-description", fieldKey, files: initFiles, onChange, className, filesDescription = "Documents must be less than 10MB and must be in PDF, JPG, JPEG or PNG format.", documentName = "Document name", accordionTitle = "There is a list of documents that we accept:", accordionListContent = [], listDescription, maxFilesCount = 10, isWithoutAccordion, error: outerError, ...props }) => {
+	const uniqueFileLoaderDescriptionId = id || testId || fieldKey || `component-${uuid?.()}`;
+	const safelyInitFiles = useMemo(() => getSafelyInitFiles(initFiles, maxFilesCount), [initFiles, maxFilesCount]);
+	const [files, setFiles] = useState(() => {
+		if (!safelyInitFiles.length) return [clone(uploadTriggerStucture)];
+		return checkOverflow(safelyInitFiles, maxFilesCount);
+	});
+	const generateUniqueFileName = (files, name) => {
+		let fileName = name;
+		const [nameWithoutExtension, extension] = name.split(/(?=\.[^.]+$)/);
+		let count = 1;
+		while (files.some((file) => file.value === fileName)) {
+			fileName = `${nameWithoutExtension}(${count})${extension}`;
+			count += 1;
+		}
+		return fileName;
+	};
+	const handle = {
+		applyFields: (newFields) => {
+			setFiles(checkOverflow(newFields, maxFilesCount));
+			onChange(newFields);
+		},
+		change: (args) => {
+			const { name, id, error = "", file } = args;
+			let output = clone(files).filter((item) => item.value && item.base64).map((item) => ({
+				...item,
+				error: null
+			}));
+			const changedField = output.find((item) => id === item.id);
+			if (!file) handle.applyFields(output.filter((item) => item.id !== changedField?.id));
+			else if (error) {
+				if (changedField) output = output.map((item) => item.id && id?.toString().includes(item.id?.toString()) ? {
+					...item,
+					error
+				} : item);
+				setFiles(checkOverflow(output, maxFilesCount, { error: !changedField ? error : null }));
+			} else {
+				const uniqueFileName = generateUniqueFileName(output, name ?? id?.toString());
+				const uniqueId = uuid?.();
+				getBase64(file)?.then((result) => {
+					const newItem = getStructure({
+						id: uniqueId,
+						value: uniqueFileName,
+						base64: result,
+						error: null
+					});
+					output = changedField ? output.map((item) => item.id === changedField.id ? newItem : item) : [...output, newItem];
+					handle.applyFields(output);
+				});
+			}
+		}
+	};
+	useEffect(() => {
+		setFiles(checkOverflow(files.filter((item) => item.id !== UPLOAD_TRIGGER_KEY), maxFilesCount, { outerError }));
+	}, [outerError]);
+	useEffect(() => {
+		if (!compare(safelyInitFiles, clone(files).filter((item) => item.id !== UPLOAD_TRIGGER_KEY))) setFiles(checkOverflow(safelyInitFiles, maxFilesCount, { outerError }));
+	}, [initFiles, maxFilesCount]);
+	return /* @__PURE__ */ jsxs("div", {
+		id: uniqueFileLoaderDescriptionId,
+		"data-testid": RC,
+		className: cn(RC, className),
+		role: "combobox",
+		...props,
+		children: [
+			!!documentName && /* @__PURE__ */ jsx("span", {
+				title: documentName,
+				className: `${RC}__title`,
+				children: documentName
+			}),
+			!isWithoutAccordion && /* @__PURE__ */ jsx(AccordionText, {
+				className: cn(`${RC}__accordion`),
+				text: accordionData(accordionTitle, accordionListContent)
+			}),
+			!!filesDescription && /* @__PURE__ */ jsx("span", {
+				className: `${RC}__file-descr`,
+				title: filesDescription,
+				children: filesDescription
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cn(`${RC}__list`, { [`${RC}__list--with-description`]: listDescription }),
+				children: [files.map((field, i) => /* @__PURE__ */ jsx(FileLoaderLocal, {
+					className: `${RC}__list-item`,
+					fieldId: field.id?.toString(),
+					id: `loader-${uniqueFileLoaderDescriptionId}-field-${field.id}`,
+					error: field.error ?? void 0,
+					outerError: field.outerError,
+					label: "Upload document",
+					accept: field.accept,
+					value: field.value,
+					maxItemSizeBytes: field.maxItemSizeBytes,
+					onChange: (value) => handle.change(value),
+					isRequired: files.length <= 1,
+					isNoTrashIcon: false
+				}, `${field.id}-${i}`)), listDescription && /* @__PURE__ */ jsx("div", {
+					className: cn(`${RC}__list-description`),
+					children: listDescription
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { FileLoaderDescription as default };
+
+//# sourceMappingURL=FileLoaderDescription.js.map

package/dist/es/Atomic/FormElements/FileLoaderDescription/FileLoaderDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileLoaderDescription.js","names":[],"sources":["../../../../../src/Atomic/FormElements/FileLoaderDescription/FileLoaderDescription.tsx"],"sourcesContent":["import type {\n  IAccordionItem,\n  IFile,\n  IFileLoaderDescriptionProps,\n} from './FileLoaderDescription.interface';\nimport cn from 'classnames';\n\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { clone, compare, getBase64, uuid } from '../../../Functions/utils';\nimport AccordionText from '../../UI/AccordionText/AccordionText';\n\nimport FileLoaderLocal from '../FileLoaderLocal/FileLoaderLocal';\n\nimport './FileLoaderDescription.scss';\n\nconst RC = 'file-loader-description';\n\nconst UPLOAD_TRIGGER_KEY = 'uploadTrigger';\nconst MAX_FILE_SIZE = 10 * 1024 * 1024;\nconst ACCEPT_EXTENSIONS_DEFAULT\n  = '.jpg, .jpeg, .png, .pdf, .JPG, .JPEG, .PNG, .PDF';\n\nconst uploadTriggerStucture: IFile = {\n  id: UPLOAD_TRIGGER_KEY,\n  isRequired: true,\n  value: '',\n  base64: '',\n  maxItemSizeBytes: MAX_FILE_SIZE,\n  error: null,\n  accept: ACCEPT_EXTENSIONS_DEFAULT,\n};\n\nfunction getStructure(data: Partial<IFile>): IFile {\n  return {\n    value: '',\n    base64: '',\n    maxItemSizeBytes: MAX_FILE_SIZE,\n    error: null,\n    isRequired: false,\n    accept: ACCEPT_EXTENSIONS_DEFAULT,\n    ...data,\n  }\n}\n\nfunction accordionData(accordionTitle: string, accordionListContent: IAccordionItem[]): JSX.Element {\n  return (\n    <div data-testid=\"accordion\">\n      <div className={`${RC}__accordion-title`}>{accordionTitle}</div>\n      <div className={`${RC}__list`}>\n        {accordionListContent?.map(item => (\n          <div key={item?.title} className={`${RC}__list-row`}>\n            <div className={`${RC}__list-bullet`}></div>\n            <div>\n              <div className={`${RC}__list-title`}>{item.title}</div>\n              <div className={`${RC}__list-descr`}>{item.description}</div>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nfunction getSafelyInitFiles(initFiles?: IFile[], maxFilesCount?: number): IFile[] {\n  if (!Array.isArray(initFiles)) return [];\n\n  let output = clone(initFiles);\n  if (typeof maxFilesCount === 'number' && output.length > maxFilesCount) {\n    output = output.slice(0, maxFilesCount);\n  }\n\n  return output.map(getStructure);\n}\n\nfunction checkOverflow(files: IFile[], maxFilesCount?: number, additional?: { error?: string | null; outerError?: string | boolean | null }): IFile[] {\n  const { error = null, outerError = null } = additional || {};\n\n  return typeof maxFilesCount === 'number' && files.length < maxFilesCount\n    ? [...files, { ...clone(uploadTriggerStucture), error, outerError }]\n    : files;\n}\n\nconst FileLoaderDescription: React.FC<IFileLoaderDescriptionProps> = ({\n  id,\n  testId = 'file-loader-description',\n  fieldKey,\n\n  files: initFiles,\n  onChange,\n\n  className,\n  filesDescription = 'Documents must be less than 10MB and must be in PDF, JPG, JPEG or PNG format.',\n  documentName = 'Document name',\n  accordionTitle = 'There is a list of documents that we accept:',\n  accordionListContent = [],\n  listDescription,\n\n  maxFilesCount = 10,\n  isWithoutAccordion,\n\n  error: outerError,\n\n  ...props\n}) => {\n  const uniqueFileLoaderDescriptionId\n    = id || testId || fieldKey || `component-${uuid?.()}`;\n\n  const safelyInitFiles = useMemo(\n    () => getSafelyInitFiles(initFiles, maxFilesCount),\n    [initFiles, maxFilesCount],\n  );\n\n  const [files, setFiles] = useState<IFile[]>(() => {\n    if (!safelyInitFiles.length) return [clone(uploadTriggerStucture)];\n    return checkOverflow(safelyInitFiles, maxFilesCount);\n  });\n\n  const generateUniqueFileName = (files: IFile[], name: string): string => {\n    let fileName = name;\n    const [nameWithoutExtension, extension] = name.split(/(?=\\.[^.]+$)/);\n    let count = 1;\n\n    while (files.some(file => file.value === fileName)) {\n      fileName = `${nameWithoutExtension}(${count})${extension}`;\n      count += 1;\n    }\n\n    return fileName;\n  };\n\n  const handle = {\n    applyFields: (newFields: IFile[]) => {\n      setFiles(checkOverflow(newFields, maxFilesCount));\n      onChange(newFields);\n    },\n\n    change: (args: {\n      name?: string;\n      id: string | number;\n      error?: string;\n      file?: File;\n    }) => {\n      const { name, id, error = '', file } = args;\n\n      let output: IFile[] = clone(files)\n        .filter((item: IFile) => item.value && item.base64)\n        .map((item: IFile) => ({ ...item, error: null }));\n\n      const changedField = output.find((item: IFile) => id === item.id);\n\n      if (!file) {\n        // удаление файла\n        handle.applyFields(output.filter((item: IFile) => item.id !== changedField?.id));\n      }\n      else if (error) {\n        // ошибка - назначаем ошибку локально\n        if (changedField) {\n          output = output.map((item: IFile) =>\n            item.id && id?.toString().includes(item.id?.toString()) ? { ...item, error } : item,\n          );\n        }\n\n        setFiles(\n          checkOverflow(output, maxFilesCount, {\n            error: !changedField ? error : null,\n          }),\n        );\n      }\n      else {\n        // добавление/обновление файла\n        const uniqueFileName = generateUniqueFileName(output, name ?? id?.toString());\n        const uniqueId = uuid?.();\n\n        getBase64(file)?.then((result) => {\n          const newItem = getStructure({\n            id: uniqueId!,\n            value: uniqueFileName,\n            base64: result,\n            error: null,\n          });\n          output = changedField\n            ? output.map((item: IFile) => (item.id === changedField.id ? newItem : item))\n            : [...output, newItem];\n          handle.applyFields(output);\n        });\n      }\n    },\n  };\n\n  useEffect(() => {\n    setFiles(\n      checkOverflow(\n        files.filter(item => item.id !== UPLOAD_TRIGGER_KEY),\n        maxFilesCount,\n        { outerError },\n      ),\n    );\n  }, [outerError]);\n\n  useEffect(() => {\n    if (\n      !compare(\n        safelyInitFiles,\n        clone(files).filter((item: IFile) => item.id !== UPLOAD_TRIGGER_KEY),\n      )\n    ) {\n      setFiles(checkOverflow(safelyInitFiles, maxFilesCount, { outerError }));\n    }\n  }, [initFiles, maxFilesCount]);\n\n  return (\n    <div\n      id={uniqueFileLoaderDescriptionId}\n      data-testid={RC}\n      className={cn(RC, className)}\n      role=\"combobox\"\n      {...props}\n    >\n      {!!documentName && (\n        <span title={documentName} className={`${RC}__title`}>\n          {documentName}\n        </span>\n      )}\n\n      {!isWithoutAccordion && (\n        <AccordionText\n          className={cn(`${RC}__accordion`)}\n          text={accordionData(accordionTitle, accordionListContent)}\n        />\n      )}\n\n      {!!filesDescription && (\n        <span className={`${RC}__file-descr`} title={filesDescription}>\n          {filesDescription}\n        </span>\n      )}\n      <div className={cn(`${RC}__list`, { [`${RC}__list--with-description`]: listDescription })}>\n        {files.map((field, i) => (\n          <FileLoaderLocal\n            className={`${RC}__list-item`}\n            key={`${field.id}-${i}`}\n            fieldId={field.id?.toString()}\n            id={`loader-${uniqueFileLoaderDescriptionId}-field-${field.id}`}\n            error={field.error ?? undefined}\n            outerError={field.outerError}\n            label=\"Upload document\"\n            accept={field.accept}\n            value={field.value}\n            maxItemSizeBytes={field.maxItemSizeBytes}\n            onChange={value => handle.change(value)}\n            isRequired={files.length <= 1}\n            isNoTrashIcon={false}\n          />\n        ))}\n        {listDescription && <div className={cn(`${RC}__list-description`)}>{listDescription}</div>}\n      </div>\n    </div>\n  );\n};\n\nexport default FileLoaderDescription;\n"],"mappings":"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"}

package/dist/es/Atomic/FormElements/FileLoaderDescription/FileLoaderDescription.styles.css

@@ -0,0 +1,88 @@
+.file-loader-description {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  row-gap: 8px;
+}
+.file-loader-description__title {
+  font-family: Sarabun;
+  font-size: 14px;
+  font-weight: 600;
+  font-style: normal;
+  line-height: 20px;
+  letter-spacing: 0.2px;
+  color: var(--color-text-subtle, #171d33);
+}
+.file-loader-description__accordion {
+  overflow: hidden;
+}
+.file-loader-description__file-descr {
+  font-family: Sarabun;
+  font-size: 12px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 18px;
+  letter-spacing: 0.2px;
+  color: var(--color-text-muted, #656e7a);
+}
+.file-loader-description__list-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  column-gap: 8px;
+}
+.file-loader-description__list-bullet {
+  min-width: 6px;
+  min-height: 6px;
+  margin-top: 7px;
+  border-radius: 50%;
+  background: var(--color-text-body, #171d33);
+}
+.file-loader-description__accordion-title {
+  font-family: Sarabun;
+  font-size: 12px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 18px;
+  letter-spacing: 0.2px;
+  text-overflow: ellipsis;
+  color: var(--color-text-body, #171d33);
+}
+.file-loader-description__list {
+  display: flex;
+  flex-direction: column;
+  row-gap: 8px;
+}
+.file-loader-description__list--with-description {
+  padding: 8px;
+  border: 1px solid var(--Black-gray-light-Divider, rgba(58, 72, 122, 0.15));
+  border-radius: 8px;
+}
+.file-loader-description__list-description {
+  font-family: Sarabun;
+  font-size: 12px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 18px; /* 150% */
+  letter-spacing: 0.2px;
+  color: var(--color-text-muted, #656e7a);
+}
+.file-loader-description__list-title {
+  font-family: Sarabun;
+  font-size: 12px;
+  font-weight: 500;
+  font-style: normal;
+  line-height: 18px;
+  letter-spacing: 0.2px;
+  color: #171d33;
+}
+.file-loader-description__list-descr {
+  font-family: Sarabun;
+  font-size: 12px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 18px;
+  letter-spacing: 0.2px;
+  color: var(--color-text-subtle, #171d33);
+}

package/dist/es/Atomic/FormElements/FileLoaderLocal/FileLoaderLocal.js

@@ -0,0 +1,137 @@
+import '../../../styles/base.css';
+import { getUniqueFileExtensions, renderFileSize } from "../../../Functions/utils.js";
+import './FileLoaderLocal.styles.css';/* empty css                     */
+import cn from "classnames";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Download, Paperclip, Trash2 } from "react-feather";
+//#region src/Atomic/FormElements/FileLoaderLocal/FileLoaderLocal.tsx
+var MAX_FILE_SIZE = 10 * 1024 * 1024;
+var FileLoaderLocal = ({ groupId, id, fieldId, fieldKey, label, error, outerError, isRequired, accept, onChange, className, value, isNoTrashIcon = false, maxItemSizeBytes, testId = "file-loader-local", attributesOfNativeInput = {} }) => {
+	const getFileName = (value) => {
+		return value.match(/[^\\]+$/)?.[0];
+	};
+	const renderRequiredLabel = () => {
+		if (!value) if (isRequired) return /* @__PURE__ */ jsx("div", {
+			className: "file-loader-local--required",
+			children: "Required"
+		});
+		else return /* @__PURE__ */ jsx("div", {
+			className: "file-loader-local--optional",
+			children: "Optional"
+		});
+		return null;
+	};
+	const isFileSizeOutOfLimit = (file) => {
+		return file.size > (maxItemSizeBytes ?? MAX_FILE_SIZE);
+	};
+	const checkExtension = (valueExtension) => {
+		return valueExtension && accept ? accept.includes(valueExtension) : false;
+	};
+	const handleChange = (e) => {
+		const name = getFileName(e.target.value);
+		const valueExtension = name?.match(/[^.]+$/)?.[0];
+		const fileName = name?.split(".")?.[0] ?? "";
+		const latinRegex = /^[\w\u00C0-\u00FF!@#$%^&*)(+=.\-\s]+$/;
+		const file = e.target?.files?.[0];
+		if (!file || !name || !valueExtension) return;
+		if (isFileSizeOutOfLimit(file)) onChange({
+			id,
+			name,
+			valueExtension,
+			e,
+			file,
+			groupId,
+			error: maxItemSizeBytes ? `Max file size is ${renderFileSize(maxItemSizeBytes)}` : ""
+		});
+		else if (!checkExtension(valueExtension)) onChange({
+			id,
+			groupId,
+			name,
+			valueExtension,
+			e,
+			file,
+			error: `Only ${getUniqueFileExtensions(accept?.replace(/\./g, "")?.toUpperCase() || "JPG, PNG, PDF")} are allowed`
+		});
+		else if (!latinRegex.test(fileName)) onChange({
+			id,
+			groupId,
+			name,
+			valueExtension,
+			e,
+			file,
+			error: `File name must be Latin characters only.`
+		});
+		else onChange({
+			id,
+			groupId,
+			name,
+			valueExtension,
+			e,
+			file
+		});
+	};
+	const inputId = fieldKey || `file-input-${id}${groupId ? `-${groupId}` : ""}`;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": testId,
+		className: cn("file-loader-local", className, {
+			"file-loader-local_outer-error": Boolean(outerError),
+			"file-loader-local--with-file": value
+		}),
+		children: [(fieldId === "uploadTrigger" || !value) && /* @__PURE__ */ jsx("input", {
+			onChange: handleChange,
+			className: "file-loader-local__file-input",
+			id: inputId,
+			type: "file",
+			name: fieldKey || id?.toString(),
+			required: isRequired,
+			accept,
+			...attributesOfNativeInput
+		}, id), /* @__PURE__ */ jsxs("label", {
+			className: cn("file-loader-local__label-box", { "file-loader-local__label-box--upload-trigger": fieldId === "uploadTrigger" || !value }),
+			htmlFor: inputId,
+			children: [
+				!value && /* @__PURE__ */ jsx(Download, { className: "file-loader-local__upload-icon" }),
+				value && /* @__PURE__ */ jsx(Paperclip, { className: "file-loader-local__upload-icon" }),
+				/* @__PURE__ */ jsx("div", {
+					title: value || label,
+					className: "file-loader-local__label-wrapper",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: cn("file-loader-local__label", { "file-loader-local__label-filled": value }),
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "file-loader-local__label-text",
+								children: value || label
+							}),
+							error && /* @__PURE__ */ jsx("span", {
+								className: "file-loader-local__error",
+								children: error
+							}),
+							typeof outerError === "string" && /* @__PURE__ */ jsx("span", {
+								className: "file-loader-local__error",
+								children: outerError
+							})
+						]
+					})
+				}),
+				value && !isNoTrashIcon && /* @__PURE__ */ jsx(Trash2, {
+					"data-testid": "file-loader-local__trash-icon",
+					className: "file-loader-local__trash-icon",
+					onClick: (e) => {
+						e.preventDefault();
+						e.stopPropagation();
+						onChange({
+							id: fieldId ?? id,
+							groupId
+						});
+					}
+				}),
+				renderRequiredLabel()
+			]
+		})]
+	});
+};
+//#endregion
+export { FileLoaderLocal as default };
+
+//# sourceMappingURL=FileLoaderLocal.js.map

package/dist/es/Atomic/FormElements/FileLoaderLocal/FileLoaderLocal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileLoaderLocal.js","names":[],"sources":["../../../../../src/Atomic/FormElements/FileLoaderLocal/FileLoaderLocal.tsx"],"sourcesContent":["import type { FileLoaderLocalProps } from './FileLoaderLocal.interface';\nimport cn from 'classnames';\nimport React from 'react';\n\nimport { Download, Paperclip, Trash2 } from 'react-feather';\n\nimport { getUniqueFileExtensions, renderFileSize } from '../../../Functions/utils';\nimport './FileLoaderLocal.scss';\n\nconst MAX_FILE_SIZE = 10 * 1024 * 1024;\n\nconst FileLoaderLocal: React.FC<FileLoaderLocalProps> = ({\n  groupId,\n  id,\n  fieldId,\n  fieldKey,\n  label,\n  error,\n  outerError,\n  isRequired,\n  accept,\n  onChange,\n  className,\n  value,\n  isNoTrashIcon = false,\n  maxItemSizeBytes,\n  testId = 'file-loader-local',\n  attributesOfNativeInput = {},\n}) => {\n  const getFileName = (value: string): string | undefined => {\n    return value.match(/[^\\\\]+$/)?.[0];\n  };\n\n  const renderRequiredLabel = (): JSX.Element | null => {\n    if (!value) {\n      if (isRequired) return <div className=\"file-loader-local--required\">Required</div>;\n      else return <div className=\"file-loader-local--optional\">Optional</div>;\n    }\n\n    return null;\n  };\n\n  const isFileSizeOutOfLimit = (file: File): boolean => {\n    return file.size > (maxItemSizeBytes ?? MAX_FILE_SIZE);\n  };\n\n  const checkExtension = (valueExtension: string | undefined): boolean => {\n    return valueExtension && accept ? accept.includes(valueExtension) : false;\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const name = getFileName(e.target.value);\n    const valueExtension = name?.match(/[^.]+$/)?.[0];\n    const fileName = name?.split('.')?.[0] ?? '';\n    const latinRegex = /^[\\w\\u00C0-\\u00FF!@#$%^&*)(+=.\\-\\s]+$/;\n    const file = e.target?.files?.[0];\n\n    if (!file || !name || !valueExtension) return;\n\n    if (isFileSizeOutOfLimit(file)) {\n      onChange({\n        id,\n        name,\n        valueExtension,\n        e,\n        file,\n        groupId,\n        error: maxItemSizeBytes ? `Max file size is ${renderFileSize(maxItemSizeBytes)}` : '',\n      });\n    }\n    else if (!checkExtension(valueExtension)) {\n      const allowedExtensions = accept?.replace(/\\./g, '')?.toUpperCase() || 'JPG, PNG, PDF';\n      const uniqExts = getUniqueFileExtensions(allowedExtensions);\n      onChange({\n        id,\n        groupId,\n        name,\n        valueExtension,\n        e,\n        file,\n        error: `Only ${uniqExts} are allowed`,\n      });\n    }\n    else if (!latinRegex.test(fileName)) {\n      onChange({\n        id,\n        groupId,\n        name,\n        valueExtension,\n        e,\n        file,\n        error: `File name must be Latin characters only.`,\n      });\n    }\n    else {\n      onChange({ id, groupId, name, valueExtension, e, file });\n    }\n  };\n\n  const inputId = fieldKey || `file-input-${id}${groupId ? `-${groupId}` : ''}`;\n\n  return (\n    <div\n      data-testid={testId}\n      className={cn('file-loader-local', className, {\n        'file-loader-local_outer-error': Boolean(outerError),\n        'file-loader-local--with-file': value,\n      })}\n    >\n      {(fieldId === 'uploadTrigger' || !value) && (\n        <input\n          key={id}\n          onChange={handleChange}\n          className=\"file-loader-local__file-input\"\n          id={inputId}\n          type=\"file\"\n          name={fieldKey || id?.toString()}\n          required={isRequired}\n          accept={accept}\n          {...attributesOfNativeInput}\n        />\n      )}\n\n      <label\n        className={cn('file-loader-local__label-box', {\n          'file-loader-local__label-box--upload-trigger': fieldId === 'uploadTrigger' || !value,\n        })}\n        htmlFor={inputId}\n      >\n        {!value && <Download className=\"file-loader-local__upload-icon\" />}\n        {value && <Paperclip className=\"file-loader-local__upload-icon\" />}\n\n        <div title={value || label} className=\"file-loader-local__label-wrapper\">\n          <div\n            className={cn('file-loader-local__label', {\n              'file-loader-local__label-filled': value,\n            })}\n          >\n            <span className=\"file-loader-local__label-text\">{value || label}</span>\n            {error && <span className=\"file-loader-local__error\">{error}</span>}\n            {typeof outerError === 'string' && (\n              <span className=\"file-loader-local__error\">{outerError}</span>\n            )}\n          </div>\n        </div>\n\n        {value && !isNoTrashIcon && (\n          <Trash2\n            data-testid=\"file-loader-local__trash-icon\"\n            className=\"file-loader-local__trash-icon\"\n            onClick={(e) => {\n              e.preventDefault();\n              e.stopPropagation();\n              onChange({ id: fieldId ?? id, groupId });\n            }}\n          />\n        )}\n        {renderRequiredLabel()}\n      </label>\n    </div>\n  );\n};\n\nexport default FileLoaderLocal;\n"],"mappings":"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"}

package/dist/es/Atomic/FormElements/FileLoaderLocal/FileLoaderLocal.styles.css

@@ -0,0 +1,101 @@
+.file-loader-local {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 50px;
+  border: 1px dashed var(--Black-gray-light-Divider, rgba(58, 72, 122, 0.15));
+  border-radius: 8px;
+  background-color: #ffffff;
+}
+.file-loader-local--with-file {
+  border: unset;
+  box-shadow: 0px 2px 8px rgba(39, 73, 113, 0.15);
+}
+.file-loader-local_outer-error {
+  border: 1px solid #fa564c;
+}
+.file-loader-local__top-label {
+  margin-bottom: 16px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0.2px;
+}
+.file-loader-local__top-label-extension {
+  color: #757f8c;
+}
+.file-loader-local__file-input {
+  position: absolute;
+  z-index: -10;
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+}
+.file-loader-local__label-box {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  max-height: 50px;
+  padding: 15px 18px 15px 16px;
+  font-family: Sarabun;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: #1f7499;
+}
+.file-loader-local__label-box--upload-trigger {
+  cursor: pointer;
+}
+.file-loader-local__upload-icon {
+  min-width: 16px;
+  max-width: 16px;
+  min-height: 16px;
+  max-height: 16px;
+  margin-right: 8px;
+  color: #a0a4b0;
+  transform: rotate(180deg);
+  stroke-width: 1.5px;
+}
+.file-loader-local__trash-icon {
+  min-width: 16px;
+  max-width: 16px;
+  min-height: 16px;
+  max-height: 16px;
+  cursor: pointer;
+  color: #f06d8d;
+}
+.file-loader-local__label-wrapper {
+  overflow: hidden;
+  flex-grow: 1;
+  margin-right: 8px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.file-loader-local__label {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.file-loader-local__label-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-word;
+}
+.file-loader-local__label-filled {
+  color: #171d33;
+}
+.file-loader-local__error {
+  font-size: 12px;
+  color: #f06d8d;
+}
+.file-loader-local--required {
+  color: #f06d8d;
+}
+.file-loader-local--optional {
+  color: #757f8c;
+}