intelicoreact 2.0.18 → 2.0.20

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

@@ -0,0 +1,150 @@
+import '../../../styles/base.css';
+import { clone, getBase64, getUniqueFileExtensions } from "../../../Functions/utils.js";
+import FileLoaderLocal from "../FileLoaderLocal/FileLoaderLocal.js";
+import Alert from "../../UI/Alert/Alert.js";
+import './FileLoaderLocalGroup.styles.css';/* empty css                          */
+import cn from "classnames";
+import { useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Info } from "react-feather";
+//#region src/Atomic/FormElements/FileLoaderLocalGroup/FileLoaderLocalGroup.tsx
+var DEFAULT_LABEL_PREFIX = "Please attach";
+var MAX_FILE_SIZE = 10 * 1024 * 1024;
+var FileLoaderLocalGroup = ({ className, groupsArray = [], isSingleGroup, onChange, labelPrefix = DEFAULT_LABEL_PREFIX, testId = "file-loader-local-group" }) => {
+	const [groups, setGroups] = useState(clone(groupsArray));
+	const getNewFile = (group) => {
+		const newId = group.files.at(-1)?.id ?? 1;
+		return {
+			id: newId,
+			value: "",
+			base64: "",
+			error: "",
+			accept: group.accept || ".jpg, .jpeg, .png, .pdf",
+			maxItemSizeBytes: group.maxItemSizeBytes ?? MAX_FILE_SIZE,
+			isRequired: group?.isRequired || false,
+			fieldKey: newId?.toString()
+		};
+	};
+	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;
+	};
+	useEffect(() => {
+		const mergedGroups = groupsArray?.map((group) => ({
+			...group,
+			files: [getNewFile(group)]
+		}));
+		setGroups(mergedGroups);
+	}, []);
+	const handle = { change: ({ groupId, name, id, error, file }, fileId) => {
+		const currentGroup = groups.find((group) => group.groupId === groupId.toString());
+		if (!currentGroup) return;
+		const files = currentGroup.files;
+		const changedField = files.find((item) => Number(item.id) === Number(fileId));
+		if (!changedField) return;
+		if (error) {
+			changedField.value = name;
+			changedField.error = error;
+			setGroups([...groups]);
+			onChange(groups);
+		} else if (name && !error) {
+			const uniqueFileName = generateUniqueFileName(files, name);
+			getBase64(file)?.then((result) => {
+				changedField.value = uniqueFileName;
+				changedField.base64 = result;
+				changedField.error = "";
+				const updatedGroups = groups.map((group) => {
+					if (group.groupId === groupId.toString()) {
+						const newFiles = isSingleGroup ? [...group.files] : group.files.length < 10 ? [...group.files, {
+							...getNewFile(group),
+							isRequired: group.files.length > 1
+						}] : [...group.files];
+						return {
+							...group,
+							files: newFiles
+						};
+					}
+					return group;
+				});
+				setGroups(updatedGroups);
+				onChange(updatedGroups);
+			}).catch((e) => console.error(e));
+		} else {
+			const updatedGroups = groups.map((group) => {
+				if (group.groupId === groupId.toString()) {
+					const newFiles = isSingleGroup ? [{
+						...getNewFile(group),
+						value: "",
+						base64: ""
+					}] : group.files.filter((item) => item.id !== id);
+					return {
+						...group,
+						files: newFiles
+					};
+				}
+				return group;
+			});
+			setGroups(updatedGroups);
+			onChange(updatedGroups);
+		}
+	} };
+	const getUniqueExts = (acceptExts) => getUniqueFileExtensions(acceptExts?.replace(/\./g, ""));
+	return /* @__PURE__ */ jsx(Fragment, { children: groups?.map((group) => /* @__PURE__ */ jsxs("div", {
+		"data-testid": testId,
+		className: cn("file-loader-local-groups", className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "file-loader-local-groups__label",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "file-loader-local-groups__label-text",
+					children: [
+						labelPrefix,
+						" ",
+						group?.groupTitleDescription,
+						" ",
+						/* @__PURE__ */ jsxs("span", {
+							className: "file-loader-local-groups__label-extension",
+							children: [
+								"(",
+								getUniqueExts(group?.accept),
+								"):"
+							]
+						})
+					]
+				})
+			}),
+			group?.alertText && /* @__PURE__ */ jsx(Alert, {
+				className: "file-loader-local-groups__alert",
+				noDismiss: true,
+				icon: /* @__PURE__ */ jsx(Info, {}),
+				message: group?.alertText
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "file-loader-local-groups__item",
+				children: group?.files?.map((file, index) => /* @__PURE__ */ jsx(FileLoaderLocal, {
+					groupId: group?.groupId,
+					fieldKey: `${file.fieldKey}:${group?.groupId}:${index}`,
+					id: file?.id || index,
+					error: file?.error,
+					label: "Upload document",
+					accept: file?.accept,
+					value: file?.value,
+					maxItemSizeBytes: file?.maxItemSizeBytes,
+					onChange: (value) => handle.change(value, file?.id),
+					isRequired: group.files?.length <= 1 || false,
+					isNoTrashIcon: group.files?.length <= 1 && !isSingleGroup
+				}, file?.id || index))
+			})
+		]
+	}, group.groupId)) });
+};
+//#endregion
+export { FileLoaderLocalGroup as default };
+
+//# sourceMappingURL=FileLoaderLocalGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileLoaderLocalGroup.js","names":[],"sources":["../../../../../src/Atomic/FormElements/FileLoaderLocalGroup/FileLoaderLocalGroup.tsx"],"sourcesContent":["import type { FileGroup, FileItem, FileLoaderLocalGroupProps } from './FileLoaderLocalGroup.interface';\nimport cn from 'classnames';\nimport React, { useEffect, useState } from 'react';\n\nimport { Info } from 'react-feather';\nimport {\n  clone,\n  getBase64,\n  getUniqueFileExtensions,\n} from '../../../Functions/utils';\nimport Alert from '../../UI/Alert/Alert';\n\nimport FileLoaderLocal from '../FileLoaderLocal/FileLoaderLocal';\n\nimport './FileLoaderLocalGroup.scss';\n\nconst DEFAULT_LABEL_PREFIX = 'Please attach';\nconst MAX_FILE_SIZE = 10 * 1024 * 1024;\n\nconst FileLoaderLocalGroup: React.FC<FileLoaderLocalGroupProps> = ({\n  className,\n  groupsArray = [],\n  isSingleGroup,\n  onChange,\n  labelPrefix = DEFAULT_LABEL_PREFIX,\n  testId = 'file-loader-local-group',\n}) => {\n  const [groups, setGroups] = useState<FileGroup[]>(clone(groupsArray));\n\n  const getNewFile = (group: FileGroup): FileItem => {\n    const newId = group.files.at(-1)?.id ?? 0 + 1;\n    return {\n      id: newId,\n      value: '',\n      base64: '',\n      error: '',\n      accept: group.accept || '.jpg, .jpeg, .png, .pdf',\n      maxItemSizeBytes: group.maxItemSizeBytes ?? MAX_FILE_SIZE,\n      isRequired: group?.isRequired || false,\n      fieldKey: newId?.toString(),\n    };\n  };\n\n  const generateUniqueFileName = (files: FileItem[], 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  useEffect(() => {\n    const mergedGroups = groupsArray?.map(group => ({\n      ...group,\n      files: [getNewFile(group)],\n    }));\n    setGroups(mergedGroups);\n  }, []);\n\n  const handle = {\n    change: ({ groupId, name, id, error, file }: any, fileId: number | string) => {\n      const currentGroup = groups.find(group => group.groupId === groupId.toString());\n      if (!currentGroup) return;\n\n      const files = currentGroup.files;\n      const changedField = files.find(item => Number(item.id) === Number(fileId));\n      if (!changedField) return;\n\n      if (error) {\n        changedField.value = name;\n        changedField.error = error;\n        setGroups([...groups]);\n        onChange(groups);\n      }\n      else if (name && !error) {\n        const uniqueFileName = generateUniqueFileName(files, name);\n        getBase64(file)\n          ?.then((result) => {\n            changedField.value = uniqueFileName;\n            changedField.base64 = result;\n            changedField.error = '';\n\n            const updatedGroups = groups.map((group) => {\n              if (group.groupId === groupId.toString()) {\n                const newFiles = isSingleGroup\n                  ? [...group.files]\n                  : group.files.length < 10\n                    ? [\n                        ...group.files,\n                        {\n                          ...getNewFile(group),\n                          isRequired: group.files.length > 1,\n                        },\n                      ]\n                    : [...group.files];\n\n                return {\n                  ...group,\n                  files: newFiles,\n                };\n              }\n              return group;\n            });\n\n            setGroups(updatedGroups);\n            onChange(updatedGroups);\n          })\n          .catch(e => console.error(e));\n      }\n      else {\n        const updatedGroups = groups.map((group) => {\n          if (group.groupId === groupId.toString()) {\n            const newFiles = isSingleGroup\n              ? [{ ...getNewFile(group), value: '', base64: '' }]\n              : group.files.filter(item => item.id !== id);\n            return {\n              ...group,\n              files: newFiles,\n            };\n          }\n          return group;\n        });\n        setGroups(updatedGroups);\n        onChange(updatedGroups);\n      }\n    },\n  };\n\n  const getUniqueExts = (acceptExts: string): string =>\n    getUniqueFileExtensions(acceptExts?.replace(/\\./g, ''));\n\n  return (\n    <>\n      {groups?.map(group => (\n        <div\n          data-testid={testId}\n          key={group.groupId}\n          className={cn('file-loader-local-groups', className)}\n        >\n          <span className=\"file-loader-local-groups__label\">\n            <div className=\"file-loader-local-groups__label-text\">\n              {labelPrefix}\n              {' '}\n              {group?.groupTitleDescription}\n              {' '}\n              <span className=\"file-loader-local-groups__label-extension\">\n                (\n                {getUniqueExts(group?.accept)}\n                ):\n              </span>\n            </div>\n          </span>\n\n          {group?.alertText && (\n            // @ts-ignore\n            <Alert\n              className=\"file-loader-local-groups__alert\"\n              noDismiss\n              icon={<Info />}\n              message={group?.alertText}\n            />\n          )}\n\n          <div className=\"file-loader-local-groups__item\">\n            {group?.files?.map((file, index) => (\n              <FileLoaderLocal\n                groupId={group?.groupId}\n                fieldKey={`${file.fieldKey}:${group?.groupId}:${index}`}\n                key={file?.id || index}\n                id={file?.id || index}\n                error={file?.error}\n                label=\"Upload document\"\n                accept={file?.accept}\n                value={file?.value}\n                maxItemSizeBytes={file?.maxItemSizeBytes}\n                onChange={value => handle.change(value, file?.id)}\n                isRequired={group.files?.length <= 1 || false}\n                isNoTrashIcon={group.files?.length <= 1 && !isSingleGroup}\n              />\n            ))}\n          </div>\n        </div>\n      ))}\n    </>\n  );\n};\n\nexport default FileLoaderLocalGroup;\n"],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+.file-loader-local-groups {
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+}
+.file-loader-local-groups__item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.file-group:not(:first-child) {
+  margin-top: 24px;
+}

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

@@ -0,0 +1,75 @@
+import '../../../styles/base.css';
+import { getLimitedMask } from "../../../Functions/utils/getLimitedMask/getLimitedMask.js";
+import InputMask3 from "../InputMask3/InputMask3.js";
+import './FormattedRawSSN.styles.css';/* empty css                     */
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Eye, EyeOff } from "react-feather";
+//#region src/Atomic/FormElements/FormattedRawSSN/FormattedRawSSN.tsx
+var DEFAULT_SSN_MASK = "DDD-DD-DDDD";
+var SIGNIFICANT_CHARACTERS = ["D"];
+var FormattedRawSSN = ({ value = "", onChange: onChangeProp = () => {}, testId = "formatted-raw-ssn", fullSnnMask = DEFAULT_SSN_MASK, significantChars = SIGNIFICANT_CHARACTERS, maskChar = "*", isHiddenDefault = true, maxLen = 9, countOfFirstDigitsToHide = 5, postfix = "", ...args }) => {
+	const [isHidden, setIsHidden] = useState(isHiddenDefault);
+	const wrapperRef = useRef(null);
+	const onChange = (value) => {
+		onChangeProp(value == null ? "" : value.toString());
+	};
+	const infoAboutMask = getLimitedMask({
+		mask: fullSnnMask,
+		significantChars,
+		limit: maxLen,
+		isOnlyMask: false
+	});
+	const maxHiddenIndex = (() => {
+		if (Number.isNaN(Number(countOfFirstDigitsToHide)) || !Number(countOfFirstDigitsToHide)) return -1;
+		if (countOfFirstDigitsToHide > infoAboutMask.countOfSignificantChars) return infoAboutMask.mask.length;
+		return countOfFirstDigitsToHide + getLimitedMask({
+			mask: infoAboutMask.mask,
+			significantChars,
+			limit: countOfFirstDigitsToHide,
+			isOnlyMask: false
+		}).countOfNotSignificantChars - 1;
+	})();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": testId,
+		className: "formatted-raw-ssn",
+		ref: wrapperRef,
+		children: [
+			/* @__PURE__ */ jsx(InputMask3, {
+				...args,
+				value,
+				onChange,
+				testId: `formattedRawSNN--input--key-${testId}`,
+				maskPattern: infoAboutMask.mask,
+				maskPlaceholder: "X",
+				blinkErrors: true,
+				showErrors: false,
+				withHiddenMode: true,
+				isValueHiddenDefault: isHiddenDefault,
+				hiddenChar: maskChar,
+				maxHiddenIndex,
+				isHide: isHidden
+			}),
+			postfix && /* @__PURE__ */ jsx("span", {
+				className: "formatted-raw-ssn-postfix",
+				onClick: () => wrapperRef?.current?.querySelector("input")?.focus(),
+				children: postfix
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "formatted-raw-ssn-eye-holder",
+				onClick: () => setIsHidden(!isHidden),
+				children: isHidden ? /* @__PURE__ */ jsx(Eye, {
+					strokeWidth: 1,
+					className: "password-icon"
+				}) : /* @__PURE__ */ jsx(EyeOff, {
+					strokeWidth: 1,
+					className: "password-icon"
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { FormattedRawSSN as default };
+
+//# sourceMappingURL=FormattedRawSSN.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormattedRawSSN.js","names":[],"sources":["../../../../../src/Atomic/FormElements/FormattedRawSSN/FormattedRawSSN.tsx"],"sourcesContent":["import type { IFormattedRawSSNProps } from './FormattedRawSSN.interface';\n\nimport React, { useRef, useState } from 'react';\n\nimport { Eye, EyeOff } from 'react-feather';\n\nimport { getLimitedMask } from '../../../Functions/utils/getLimitedMask';\nimport InputMask3 from '../InputMask3/InputMask3';\nimport './FormattedRawSSN.scss';\n\nconst DEFAULT_SSN_MASK = 'DDD-DD-DDDD';\nconst SIGNIFICANT_CHARACTERS = ['D'];\n\nconst FormattedRawSSN: React.FC<IFormattedRawSSNProps> = ({\n  value = '',\n  onChange: onChangeProp = () => {},\n  testId = 'formatted-raw-ssn',\n\n  // ! ВСЕ \"пляшет\" от fullSnnMask и significantChars\n  // Маска для полного snn (технически ограничений нет, НО нужно передавать то, что понимает InputMask3)\n  fullSnnMask = DEFAULT_SSN_MASK,\n  // Значащие символы в fullSnnMask\n  // Технически ограничений нет, НО нужно передавать\n  //    - массив ОДИНОЧНЫХ символов\n  //    - массив тех символов, которые правильно трактуются в InputMask3 (смотри InputMask3/config)\n  significantChars = SIGNIFICANT_CHARACTERS,\n  // Символ для маскировки\n  maskChar = '*',\n  // Инициализационное значение (сразу скрывать или нет)\n  isHiddenDefault = true,\n  // Максимальное значение ВВОДИМЫХ цифр\n  maxLen = 9, // ? Речь о значащих символах\n  // Сколько из ПЕРВЫХ вводимых нужно прятать при включении мода маскировки\n  countOfFirstDigitsToHide = 5, // ? Речь о значащих символах\n  // Статическая часть\n  postfix = '',\n\n  ...args\n}) => {\n  // ? Будем пользоваться своим (верхним относительно InputMask3) стейтом\n  // ? Это потребует отрисовки триггера \"поверх\" InputMask3.\n  const [isHidden, setIsHidden] = useState<boolean>(isHiddenDefault);\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\n\n  const onChange = (value: string | number | undefined | null): void => {\n    const newValue = value == null ? '' : value.toString();\n    onChangeProp(newValue);\n  };\n\n  // ? Пересчитываем маску с учетом переданного maxLen.\n  // ? Если maxLen меньше количества значащих символов в fullSnnMask, то маска корректно обрежется.\n  // ? Передаем опцию isOnlyMask: false, чтобы получить НЕ только новую маску, а еще и статистику.\n  // ? В этом случае приходит объект формата: { mask, countOfSignificantChars, countOfNotSignificantChars }\n  const infoAboutMask = getLimitedMask({\n    mask: fullSnnMask,\n    significantChars,\n    limit: maxLen,\n    isOnlyMask: false,\n  });\n\n  // ? Расчитываем ИНДЕКС крайнего символа части маски, которая подлежит скрытию,\n  // ? исходя из countOfFirstDigitsToHide\n  const maxHiddenIndex = (() => {\n    // если не приводится к числу или ноль (передавать ноль лишено смысла)\n    if (\n      Number.isNaN(Number(countOfFirstDigitsToHide))\n      || !Number(countOfFirstDigitsToHide)\n    ) {\n      return -1;\n    }\n    // если больше чем значимых символов\n    if (countOfFirstDigitsToHide > infoAboutMask.countOfSignificantChars)\n      return infoAboutMask.mask.length;\n\n    // ? Для расчетов получаем дополнительно корректно \"обрезанную\" маску (до уровня скрываемой части)\n    // ? на основе ранее полученной \"обрезанной\" по maxLen. Нам нужна НЕ сама маска, а статистика по ней.\n    // ? В частности - количество \"незначащих\" символов содержащихся в скрываемой части маски.\n    const infoAboutMaskOfHidden = getLimitedMask({\n      mask: infoAboutMask.mask,\n      significantChars,\n      limit: countOfFirstDigitsToHide,\n      isOnlyMask: false,\n    });\n\n    // ? Для InputMask3 maxHiddenIndex должен быть передан относительно длины ВСЕЙ применяемой маски (наша \"обрезанная\" по maxLen).\n    // ? Поэтому к количеству \"скрываемых\" символов добавляем количество \"незначащих\", входящих в скрываемую часть маски.\n    // ? Т.к. расчитываем НЕ длинну, а индекс - отнимаем 1\n    return (\n      countOfFirstDigitsToHide\n      + infoAboutMaskOfHidden.countOfNotSignificantChars\n      - 1\n    );\n  })();\n\n  return (\n    <div data-testid={testId} className=\"formatted-raw-ssn\" ref={wrapperRef}>\n      <InputMask3\n        {...args}\n        value={value}\n        // @ts-ignore\n        onChange={onChange}\n        testId={`formattedRawSNN--input--key-${testId}`}\n        maskPattern={infoAboutMask.mask}\n        maskPlaceholder=\"X\"\n        blinkErrors={true}\n        showErrors={false}\n        withHiddenMode={true}\n        isValueHiddenDefault={isHiddenDefault}\n        hiddenChar={maskChar}\n        maxHiddenIndex={maxHiddenIndex}\n        isHide={isHidden}\n      />\n      {postfix && (\n        <span\n          className=\"formatted-raw-ssn-postfix\"\n          onClick={() => wrapperRef?.current?.querySelector('input')?.focus()}\n        >\n          {postfix}\n        </span>\n      )}\n      <span\n        className=\"formatted-raw-ssn-eye-holder\"\n        onClick={() => setIsHidden(!isHidden)}\n      >\n        {isHidden\n          ? (\n              <Eye strokeWidth={1} className=\"password-icon\" />\n            )\n          : (\n              <EyeOff strokeWidth={1} className=\"password-icon\" />\n            )}\n      </span>\n    </div>\n  );\n};\n\nexport default FormattedRawSSN;\n"],"mappings":";;;;;;;AAUA,IAAM,mBAAmB;AACzB,IAAM,yBAAyB,CAAC,GAAG;AAEnC,IAAM,mBAAoD,EACxD,QAAQ,IACR,UAAU,qBAAqB,CAAC,GAChC,SAAS,qBAIT,cAAc,kBAKd,mBAAmB,wBAEnB,WAAW,KAEX,kBAAkB,MAElB,SAAS,GAET,2BAA2B,GAE3B,UAAU,IAEV,GAAG,WACC;CAGJ,MAAM,CAAC,UAAU,eAAe,SAAkB,eAAe;CACjE,MAAM,aAAa,OAA8B,IAAI;CAErD,MAAM,YAAY,UAAoD;EAEpE,aADiB,SAAS,OAAO,KAAK,MAAM,SAAS,CAChC;CACvB;CAMA,MAAM,gBAAgB,eAAe;EACnC,MAAM;EACN;EACA,OAAO;EACP,YAAY;CACd,CAAC;CAID,MAAM,wBAAwB;EAE5B,IACE,OAAO,MAAM,OAAO,wBAAwB,CAAC,KAC1C,CAAC,OAAO,wBAAwB,GAEnC,OAAO;EAGT,IAAI,2BAA2B,cAAc,yBAC3C,OAAO,cAAc,KAAK;EAe5B,OACE,2BAX4B,eAAe;GAC3C,MAAM,cAAc;GACpB;GACA,OAAO;GACP,YAAY;EACd,CAOI,CAAA,CAAsB,6BACtB;CAEN,EAAA,CAAG;CAEH,OACE,qBAAC,OAAD;EAAK,eAAa;EAAQ,WAAU;EAAoB,KAAK;YAA7D;GACE,oBAAC,YAAD;IACE,GAAI;IACG;IAEG;IACV,QAAQ,+BAA+B;IACvC,aAAa,cAAc;IAC3B,iBAAgB;IAChB,aAAa;IACb,YAAY;IACZ,gBAAgB;IAChB,sBAAsB;IACtB,YAAY;IACI;IAChB,QAAQ;GACT,CAAA;GACA,WACC,oBAAC,QAAD;IACE,WAAU;IACV,eAAe,YAAY,SAAS,cAAc,OAAO,CAAC,EAAE,MAAM;cAEjE;GACG,CAAA;GAER,oBAAC,QAAD;IACE,WAAU;IACV,eAAe,YAAY,CAAC,QAAQ;cAEnC,WAEK,oBAAC,KAAD;KAAK,aAAa;KAAG,WAAU;IAAiB,CAAA,IAGhD,oBAAC,QAAD;KAAQ,aAAa;KAAG,WAAU;IAAiB,CAAA;GAErD,CAAA;EACH;;AAET"}

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

@@ -0,0 +1,54 @@
+.formatted-raw-ssn {
+  position: relative;
+}
+.formatted-raw-ssn .input-classic__wrap input,
+.formatted-raw-ssn .input__wrap input {
+  padding: 0 38px 0 10px;
+  /* LG/Regular 16 (24 px, 0.2 px) */
+  font-family: Sarabun;
+  font-size: 16px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 24px; /* 150% */
+  letter-spacing: 0.2px;
+  color: var(--color-text-body, #171d33);
+}
+.formatted-raw-ssn-postfix {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 80%;
+  height: calc(100% - 2px);
+  padding: 7px;
+  /* LG/Regular 16 (24 px, 0.2 px) */
+  font-family: Sarabun;
+  font-size: 16px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 24px; /* 150% */
+  cursor: text;
+  letter-spacing: 0.2px;
+  color: var(--color-text-body, #171d33);
+  border-left: 1px solid var(--color-border-input, #e1e8f1);
+  border-radius: 0px 5px 5px 0px;
+  background: var(--color-background-form, #f7f8fa);
+}
+.formatted-raw-ssn-eye-holder {
+  position: absolute;
+  top: 25%;
+  right: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  cursor: pointer;
+  transform: translateY(-25%);
+}
+.formatted-raw-ssn-icon {
+  cursor: pointer;
+  color: #a6aab4;
+}

package/dist/es/Atomic/FormElements/FormattedRawSSN/index.js

@@ -0,0 +1,7 @@
+import FormattedRawSSN from "./FormattedRawSSN.js";
+//#region src/Atomic/FormElements/FormattedRawSSN/index.ts
+var FormattedRawSSN_default = FormattedRawSSN;
+//#endregion
+export { FormattedRawSSN_default as default };
+
+//# sourceMappingURL=index.js.map

package/dist/es/Atomic/FormElements/FormattedRawSSN/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/Atomic/FormElements/FormattedRawSSN/index.ts"],"sourcesContent":["import type { IFormattedRawSSNProps } from './FormattedRawSSN.interface';\nimport FormattedRawSSN from './FormattedRawSSN';\n\nexport type { IFormattedRawSSNProps };\nexport default FormattedRawSSN;\n"],"mappings":";;AAIA,IAAA,0BAAe"}

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

@@ -0,0 +1,119 @@
+import '../../../styles/base.css';
+import { getSafelyValue } from "../../../Functions/fieldValueFormatters.js";
+import Spinner from "../../Layout/Spinner/Spinner.js";
+import { useErrorBlink } from "./hooks/useErrorBlink.js";
+import { useInputFocus } from "./hooks/useInputFocus.js";
+import { useInputHover } from "./hooks/useInputHover.js";
+import { useInputValueProcessing } from "./hooks/useInputValueProcessing.js";
+import { useKeyboardHandling } from "./hooks/useKeyboardHandling.js";
+import './Input.styles.css';/* empty css           */
+import cn from "classnames";
+import { useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Atomic/FormElements/Input/Input.tsx
+function defaultCallback() {}
+function Input({ ref, blurTrim, autocomplete = "off", isSelect, onChange = defaultCallback, onBlur = defaultCallback, onFocus = defaultCallback, onKeyUp = defaultCallback, onKeyDown = defaultCallback, isNotBlinkErrors, isPriceInput, onlyNumbers, disabled, withDelete, value, placeholder, className, type = "text", mask, maskChar, formatChars, error, icon, symbolsLimit, blinkTime, isFocusDefault = false, isNotValidateASCII = false, isNumericMobileKeyboard = false, isCropFirstNool = false, testId = "input", action, isUseAutoSelect = true, isReadOnly = false, isLoading = false, name, fieldKey, id, attributesOfNativeInput = {} }) {
+	const inputInnerRef = useRef(null);
+	const inputRef = useMemo(() => ref || inputInnerRef, [ref]);
+	const isUseErrorsBlink = !isNotBlinkErrors && !mask;
+	const inputName = name || fieldKey || id;
+	const { isFocused, isEditing, setIsFocused, setEditing, handleFocus, handleToggleEdit } = useInputFocus({
+		isSelect,
+		isFocusDefault,
+		onFocus
+	});
+	const { isToHighlightError, setPreviousValue, checkValueChange } = useErrorBlink({
+		isUseErrorsBlink,
+		blinkTime
+	});
+	const { keyDownData, handleKeyDown, handleKeyUp } = useKeyboardHandling({
+		onKeyDown,
+		onKeyUp,
+		checkValueChange,
+		setPreviousValue,
+		value
+	});
+	const { formatedValue, handleChange, handleBlur, correctMinMax: _correctMinMax } = useInputValueProcessing({
+		onlyNumbers,
+		isPriceInput,
+		value,
+		isNotValidateASCII,
+		symbolsLimit,
+		isCropFirstNool,
+		type,
+		keyDownData,
+		onChange,
+		blurTrim
+	});
+	const { onInputHover, handleMouseEnter, handleMouseLeave } = useInputHover();
+	const handleToggleWithClear = () => {
+		handleToggleEdit();
+		onChange("");
+	};
+	const handleBlurWithEffects = (e) => {
+		handleBlur(e, onBlur);
+		setIsFocused(false);
+		setEditing(false);
+	};
+	useEffect(() => {
+		if (isEditing) inputRef?.current?.focus?.();
+	}, [isEditing, isFocused]);
+	const getInputType = () => {
+		if (isPriceInput || type === "pseudoPassword") return "text";
+		return type;
+	};
+	const uniProps = {
+		name: inputName,
+		className: cn("input", className, {
+			"input--with-icon": icon,
+			"input--with-delete": withDelete
+		}),
+		placeholder,
+		value: formatedValue,
+		inputMode: isNumericMobileKeyboard ? "decimal" : "text",
+		disabled,
+		onChange: handleChange,
+		onFocus: handleFocus,
+		onBlur: handleBlurWithEffects,
+		onKeyUp: handleKeyUp,
+		onKeyDown: handleKeyDown,
+		...maskChar ? { maskChar } : {},
+		...formatChars ? { formatChars } : {}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": testId,
+		className: cn(`input__wrap`, { [`input__wrap_focus`]: isFocused }, { [`input__wrap_error`]: error || isToHighlightError }, { [`input__wrap--disabled`]: disabled || isLoading }),
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				readOnly: isReadOnly,
+				...uniProps,
+				ref: inputRef,
+				type: getInputType(),
+				autoComplete: type === "pseudoPassword" ? "off" : autocomplete,
+				...attributesOfNativeInput,
+				onFocus: (...params) => {
+					attributesOfNativeInput?.onFocus?.(...params);
+					if (isUseAutoSelect) inputRef.current?.select();
+					if (uniProps.onFocus) uniProps.onFocus(...params);
+				},
+				onBlur: (...params) => {
+					attributesOfNativeInput?.onBlur?.(...params);
+					if (uniProps.onBlur) uniProps.onBlur(...params);
+				}
+			}),
+			icon,
+			action,
+			withDelete && onInputHover && /* @__PURE__ */ jsx("span", {
+				className: cn(`input__close`, { hidden: !getSafelyValue(value) }),
+				onClick: handleToggleWithClear
+			}),
+			isLoading && /* @__PURE__ */ jsx(Spinner, { size: "small" })
+		]
+	});
+}
+//#endregion
+export { Input as default };
+
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":[],"sources":["../../../../../src/Atomic/FormElements/Input/Input.tsx"],"sourcesContent":["import type { HTMLInputTypeAttribute, ReactElement } from 'react';\nimport type { InputProps } from './types';\nimport cn from 'classnames';\nimport React, { useEffect, useMemo, useRef } from 'react';\nimport { getSafelyValue } from '../../../Functions/fieldValueFormatters';\nimport Spinner from '../../Layout/Spinner/Spinner';\n\nimport { useErrorBlink, useInputFocus, useInputHover, useInputValueProcessing, useKeyboardHandling } from './hooks';\nimport './Input.scss';\n\nfunction defaultCallback(): void {}\n\nfunction Input({ ref, blurTrim, autocomplete = 'off', isSelect, onChange = defaultCallback, onBlur = defaultCallback, onFocus = defaultCallback, onKeyUp = defaultCallback, onKeyDown = defaultCallback, isNotBlinkErrors, isPriceInput, onlyNumbers, disabled, withDelete, value, placeholder, className, type = 'text', mask, maskChar, formatChars, error, icon, symbolsLimit, blinkTime, isFocusDefault = false, isNotValidateASCII = false, isNumericMobileKeyboard = false, isCropFirstNool = false, testId = 'input', action, isUseAutoSelect = true, isReadOnly = false, isLoading = false, name, fieldKey, id, attributesOfNativeInput = {} }: InputProps & { ref?: React.RefObject<Omit<HTMLInputElement, 'value'> | null> }): ReactElement {\n  const inputInnerRef = useRef(null);\n  const inputRef = useMemo((): React.RefObject<HTMLInputElement> => (ref || inputInnerRef) as React.RefObject<HTMLInputElement>, [ref]);\n\n  const isUseErrorsBlink = !isNotBlinkErrors && !mask;\n  const inputName = name || fieldKey || id;\n\n  const {\n    isFocused,\n    isEditing,\n    setIsFocused,\n    setEditing,\n    handleFocus,\n    handleToggleEdit,\n  } = useInputFocus({\n    isSelect,\n    isFocusDefault,\n    onFocus,\n  });\n\n  const {\n    isToHighlightError,\n    setPreviousValue,\n    checkValueChange,\n  } = useErrorBlink({\n    isUseErrorsBlink,\n    blinkTime,\n  });\n\n  const {\n    keyDownData,\n    handleKeyDown,\n    handleKeyUp,\n  } = useKeyboardHandling({\n    onKeyDown,\n    onKeyUp,\n    checkValueChange,\n    setPreviousValue,\n    value,\n  });\n\n  const {\n    formatedValue,\n    handleChange,\n    handleBlur,\n    correctMinMax: _correctMinMax,\n  } = useInputValueProcessing({\n    onlyNumbers,\n    isPriceInput,\n    value,\n    isNotValidateASCII,\n    symbolsLimit,\n    isCropFirstNool,\n    type,\n    keyDownData,\n    onChange,\n    blurTrim,\n  });\n\n  const {\n    onInputHover,\n    handleMouseEnter,\n    handleMouseLeave,\n  } = useInputHover();\n\n  // Handlers with side effects\n  const handleToggleWithClear = (): void => {\n    handleToggleEdit();\n    onChange('');\n  };\n\n  const handleBlurWithEffects = (e: React.FocusEvent<HTMLInputElement, Element>): void => {\n    handleBlur(e, onBlur);\n    setIsFocused(false);\n    setEditing(false);\n  };\n\n  // Component effects\n  useEffect(() => {\n    if (isEditing) inputRef?.current?.focus?.();\n  }, [isEditing, isFocused]);\n\n  const getInputType = (): HTMLInputTypeAttribute => {\n    if (isPriceInput || type === 'pseudoPassword') return 'text';\n    return type;\n  };\n\n  const uniProps = {\n    name: inputName,\n    className: cn('input', className, {\n      'input--with-icon': icon,\n      'input--with-delete': withDelete,\n    }),\n    placeholder,\n    value: formatedValue,\n    inputMode: isNumericMobileKeyboard ? 'decimal' as const : 'text' as const,\n    disabled,\n    onChange: handleChange,\n    onFocus: handleFocus,\n    onBlur: handleBlurWithEffects,\n    onKeyUp: handleKeyUp,\n    onKeyDown: handleKeyDown,\n    ...(maskChar ? { maskChar } : {}),\n    ...(formatChars ? { formatChars } : {}),\n  };\n\n  return (\n    <div\n      data-testid={testId}\n      className={cn(\n        `input__wrap`,\n        { [`input__wrap_focus`]: isFocused },\n        { [`input__wrap_error`]: error || isToHighlightError },\n        { [`input__wrap--disabled`]: disabled || isLoading },\n      )}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <input\n        readOnly={isReadOnly}\n        {...uniProps}\n        ref={inputRef}\n        type={getInputType()}\n        autoComplete={type === 'pseudoPassword' ? 'off' : autocomplete}\n        {...attributesOfNativeInput}\n        onFocus={(...params) => {\n          attributesOfNativeInput?.onFocus?.(...params);\n          if (isUseAutoSelect) inputRef.current?.select();\n          if (uniProps.onFocus) uniProps.onFocus(...params);\n        }}\n        onBlur={(...params) => {\n          attributesOfNativeInput?.onBlur?.(...params);\n          if (uniProps.onBlur) uniProps.onBlur(...params);\n        }}\n      />\n      {icon}\n      {action}\n      {withDelete && onInputHover && (\n        <span\n          className={cn(`input__close`, { hidden: !getSafelyValue(value) })}\n          onClick={handleToggleWithClear}\n        />\n      )}\n      {isLoading && <Spinner size=\"small\" />}\n    </div>\n  );\n}\n\nexport default Input;\n"],"mappings":"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"}

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

@@ -0,0 +1,125 @@
+.input {
+  position: relative;
+  width: 100%;
+  padding: 0 10px;
+  word-break: break-all;
+  border: none;
+  background: none;
+}
+.input::-webkit-outer-spin-button, .input::-webkit-inner-spin-button {
+  appearance: none;
+}
+.input__wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 28px;
+  border: 1px solid #e2e5ec;
+  border-radius: 4px;
+  background-color: #fff;
+}
+.input__wrap_focus {
+  border-color: #6b81dd;
+  filter: drop-shadow(0 0 4px rgba(93, 120, 255, 0.5));
+}
+.input__wrap--disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  border-color: #a6acb1;
+  background: #f7f8fa;
+}
+.input__wrap_error {
+  border-color: #f06d8d !important;
+}
+.input__wrap .lds-ring.lds-ring_small {
+  top: calc(50% - 18px);
+}
+.input_disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  border-color: #a6acb1;
+  background: #f7f8fa;
+}
+.input_error {
+  border-color: #f06d8d;
+}
+.input svg {
+  margin-right: 4px;
+}
+.input__input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 0 5px;
+  font-size: 13px;
+  font-weight: 400;
+  color: #1e1e2d;
+  border: none;
+  border-radius: 4px;
+}
+.input__close {
+  position: relative;
+  visibility: hidden;
+  width: 14px;
+  height: 14px;
+  margin-right: 4px;
+  cursor: pointer;
+  pointer-events: none;
+  opacity: 0.6;
+  background: none;
+}
+.input__close:hover {
+  opacity: 1;
+}
+.input__close::before, .input__close::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  width: 2px;
+  height: 14px;
+  margin: auto;
+  content: "";
+  background-color: #9aa0b9;
+}
+.input__close::before {
+  transform: rotate(45deg);
+}
+.input__close::after {
+  transform: rotate(-45deg);
+}
+.input__nums {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.input__num-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 100%;
+  font-size: 20px;
+  cursor: pointer;
+  user-select: none;
+  border-left: 1px solid #e2e5ec;
+  background: none;
+}
+.input__num-btn.disabled {
+  opacity: 0.3;
+}
+.input__num-btn svg {
+  margin-right: 0;
+}
+.input-label {
+  margin-bottom: 5px;
+}
+.input--with-icon {
+  padding: 0 40px 0 10px;
+}
+
+.input__wrap:hover .input__close {
+  visibility: visible;
+  pointer-events: all;
+}

package/dist/es/Atomic/FormElements/Input/hooks/useErrorBlink.js

@@ -0,0 +1,57 @@
+import { KEYBOARD_SERVICE_KEYS } from "../../../../Constants/index.constants.js";
+import { useEffect, useState } from "react";
+//#region src/Atomic/FormElements/Input/hooks/useErrorBlink.ts
+var DEFAULT_BLINK_TIME = 100;
+function useErrorBlink({ isUseErrorsBlink, blinkTime = DEFAULT_BLINK_TIME }) {
+	const [isAttemptToChange, setIsAttemptToChange] = useState(false);
+	const [isToHighlightError, setIsToHighlightError] = useState(false);
+	const [prevValue, setPreviousValue] = useState("");
+	useEffect(() => {
+		if (!isAttemptToChange) return;
+		let timerId = null;
+		setIsToHighlightError(true);
+		timerId = setTimeout(() => {
+			setIsToHighlightError(false);
+			setIsAttemptToChange(false);
+		}, blinkTime);
+		return () => {
+			if (timerId) clearTimeout(timerId);
+		};
+	}, [isAttemptToChange, blinkTime]);
+	const checkValueChange = (e, value) => {
+		if (isUseErrorsBlink) {
+			const changedValue = `${value ?? ""}`;
+			const previousValue = `${prevValue}`;
+			const short = previousValue.length <= changedValue.length ? previousValue : changedValue;
+			const long = previousValue.length > changedValue.length ? previousValue : changedValue;
+			const infoAboutDifferencesSameness = short.split("").reduce((acc, symbol, idx) => {
+				if (acc.countOn && symbol === long[idx]) acc.same.push(symbol);
+				else {
+					acc.countOn = false;
+					acc.differences.push([idx, symbol]);
+				}
+				return acc;
+			}, {
+				same: [],
+				countOn: true,
+				differences: []
+			});
+			const samePart = infoAboutDifferencesSameness.same.join("");
+			const differencesLength = infoAboutDifferencesSameness.differences.length;
+			const currentSet = changedValue?.replace(samePart, "");
+			if (!KEYBOARD_SERVICE_KEYS.includes(e.key) && changedValue === previousValue) {
+				const newAttemptToChange = !(!differencesLength && e.key === currentSet);
+				setIsAttemptToChange(newAttemptToChange);
+			}
+		}
+	};
+	return {
+		isToHighlightError,
+		setPreviousValue,
+		checkValueChange
+	};
+}
+//#endregion
+export { useErrorBlink };
+
+//# sourceMappingURL=useErrorBlink.js.map