intelicoreact 2.0.17 → 2.0.19

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

@@ -0,0 +1,67 @@
+import '../../../styles/base.css';
+import './Text.styles.css';/* empty css          */
+import cn from "classnames";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/Atomic/FormElements/Text/Text.tsx
+var RC = "text";
+/**
+*
+* @param value
+* @param className
+* @param classesObj
+* @param icon
+* @param link
+* @param align
+* @param testId
+* @return {JSX.Element|null}
+* @constructor
+*/
+var Text = ({ value, className, classesObj, icon, link, align = "left", testId = "text-lib-component" }) => {
+	if (!value) return null;
+	const isLinkAsObj = link instanceof Object && !Array.isArray(link);
+	const isLink = isLinkAsObj || typeof link === "string";
+	const { path = "", target, redirect, onClick: onClickInner, isNoPreventDefault, isNoStopPropagation } = isLinkAsObj ? link : {};
+	const preparedPath = (() => {
+		if (!isLink) return "";
+		return isLinkAsObj ? path : link;
+	})();
+	const atributes = {};
+	if (typeof onClickInner === "function" || typeof redirect === "function") atributes.onClick = function onClick(ev) {
+		if (!isNoPreventDefault) ev.preventDefault();
+		if (!isNoStopPropagation) ev.stopPropagation();
+		if (onClickInner) {
+			onClickInner({
+				ev,
+				...isLinkAsObj ? link : { path: link }
+			});
+			return;
+		}
+		if (redirect) redirect(preparedPath);
+	};
+	const mainInner = /* @__PURE__ */ jsxs(Fragment, { children: [icon && /* @__PURE__ */ jsx("div", {
+		className: `${RC}__icon-container`,
+		children: icon
+	}), value] });
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": testId,
+		className: cn(RC, className, {
+			[`${RC}-left`]: align === "left",
+			[`${RC}-center`]: align === "center",
+			[`${RC}-right`]: align === "right",
+			[`${RC}-justify`]: align === "justify",
+			...classesObj
+		}),
+		children: isLink ? /* @__PURE__ */ jsx("a", {
+			...atributes,
+			href: preparedPath,
+			target: target ?? "_self",
+			rel: "noreferrer",
+			children: mainInner
+		}) : mainInner
+	});
+};
+//#endregion
+export { Text as default };
+
+//# sourceMappingURL=Text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","names":[],"sources":["../../../../../src/Atomic/FormElements/Text/Text.tsx"],"sourcesContent":["import type { ITextLink, ITextProps } from './Text.interface';\nimport cn from 'classnames';\n\nimport React from 'react';\n\nimport './Text.scss';\n\nconst RC = 'text';\n\n/**\n *\n * @param value\n * @param className\n * @param classesObj\n * @param icon\n * @param link\n * @param align\n * @param testId\n * @return {JSX.Element|null}\n * @constructor\n */\n\n// ? Прототип лежит на проекте кабинета src\\JS\\Components\\Atomic\\FormElements\\Text\\Text.js\n// ? Что поменял?\n// ?   - в верстке убрал дополнительную вложенность\n// ?     (теперь только 1 внешний контейнер, доп. классы назначаются рядом с className)\n// ?   - убрал пропы as и isTitle, они были для работы с предзаданными классами связанными с токенизацией\n// ?     возможность прокинуть доп. классы объектом с условиями оставил через пропу classesObj\n// ?   - заменил пропу text на value\n// ?   - заменил пропу iconMain на icon\n// ?   - переработал пропу link, может быть строкой или объектом\n// ?     если это объект, то у него могут быть свойства\n// ?       - path - значение для href\n\n// ?       - target - значение для атрибута target, имеет смысл передавать, если не передаются onClick или redirect\n\n// ?       - onClick - альтернативный обработчик нажатия, если он есть то он будет ипользован в приоритете,\n// ?         ф-я будет вызвана с 1 аргументом - props, в объекте props будет свойство ev (event) и все содержание link,\n// ?         по умолчанию до использования onClick будут вызваны e.preventDefault() и e.stopPropagation\n\n// ?       - redirect - альтернативный исполнитель редиректа (например history.push),\n// ?         если есть и нет onClick - будет вызван с одним аргументом (link.path)\n\n// ?       - isNoPreventDefault - отключает вызов e.preventDefault перед вызовом onClick или redirect\n\n// ?       - isNoStopPropagation - отключает вызов e.preventDefault перед вызовом onClick или redirect\n\nconst Text: React.FC<ITextProps> = ({\n  value,\n  className,\n  classesObj,\n  icon,\n  link,\n  align = 'left',\n  testId = 'text-lib-component',\n}) => {\n  if (!value) return null;\n\n  const isLinkAsObj = link instanceof Object && !Array.isArray(link);\n  const isLinkAsString = typeof link === 'string';\n  const isLink = isLinkAsObj || isLinkAsString;\n\n  const linkObj = isLinkAsObj ? link as ITextLink : {};\n  const {\n    path = '',\n    target,\n    redirect,\n    onClick: onClickInner,\n    isNoPreventDefault,\n    isNoStopPropagation,\n  } = linkObj;\n\n  const preparedPath = (() => {\n    if (!isLink) return '';\n    return isLinkAsObj ? path : link as string;\n  })();\n\n  const atributes: React.AnchorHTMLAttributes<HTMLAnchorElement> = {};\n\n  if (typeof onClickInner === 'function' || typeof redirect === 'function') {\n    atributes.onClick = function onClick(ev: React.MouseEvent<HTMLAnchorElement>) {\n      if (!isNoPreventDefault) ev.preventDefault();\n      if (!isNoStopPropagation) ev.stopPropagation();\n\n      // ? если переданы и onClick, и redirect, то onClick считается приоритетнее redirect\n      if (onClickInner) {\n        onClickInner({\n          ev,\n          ...(isLinkAsObj ? link as ITextLink : { path: link as string }),\n        });\n        return;\n      }\n      if (redirect) {\n        redirect(preparedPath);\n      }\n    };\n  }\n\n  const mainInner = (\n    <>\n      {icon && <div className={`${RC}__icon-container`}>{icon}</div>}\n      {value}\n    </>\n  );\n\n  return (\n    <div\n      data-testid={testId}\n      className={cn(RC, className, {\n        [`${RC}-left`]: align === 'left',\n        [`${RC}-center`]: align === 'center',\n        [`${RC}-right`]: align === 'right',\n        [`${RC}-justify`]: align === 'justify',\n        ...classesObj,\n      })}\n    >\n      {isLink\n        ? (\n            <a\n              {...atributes}\n              href={preparedPath}\n              target={target ?? '_self'}\n              rel=\"noreferrer\"\n            >\n              {mainInner}\n            </a>\n          )\n        : (\n            mainInner\n          )}\n    </div>\n  );\n};\n\nexport default Text;\n"],"mappings":";;;;;AAOA,IAAM,KAAK;;;;;;;;;;;;;AAwCX,IAAM,QAA8B,EAClC,OACA,WACA,YACA,MACA,MACA,QAAQ,QACR,SAAS,2BACL;CACJ,IAAI,CAAC,OAAO,OAAO;CAEnB,MAAM,cAAc,gBAAgB,UAAU,CAAC,MAAM,QAAQ,IAAI;CAEjE,MAAM,SAAS,eADQ,OAAO,SAAS;CAIvC,MAAM,EACJ,OAAO,IACP,QACA,UACA,SAAS,cACT,oBACA,wBAPc,cAAc,OAAoB,CAAC;CAUnD,MAAM,sBAAsB;EAC1B,IAAI,CAAC,QAAQ,OAAO;EACpB,OAAO,cAAc,OAAO;CAC9B,EAAA,CAAG;CAEH,MAAM,YAA2D,CAAC;CAElE,IAAI,OAAO,iBAAiB,cAAc,OAAO,aAAa,YAC5D,UAAU,UAAU,SAAS,QAAQ,IAAyC;EAC5E,IAAI,CAAC,oBAAoB,GAAG,eAAe;EAC3C,IAAI,CAAC,qBAAqB,GAAG,gBAAgB;EAG7C,IAAI,cAAc;GAChB,aAAa;IACX;IACA,GAAI,cAAc,OAAoB,EAAE,MAAM,KAAe;GAC/D,CAAC;GACD;EACF;EACA,IAAI,UACF,SAAS,YAAY;CAEzB;CAGF,MAAM,YACJ,qBAAA,UAAA,EAAA,UAAA,CACG,QAAQ,oBAAC,OAAD;EAAK,WAAW,GAAG,GAAG;YAAoB;CAAU,CAAA,GAC5D,KACD,EAAA,CAAA;CAGJ,OACE,oBAAC,OAAD;EACE,eAAa;EACb,WAAW,GAAG,IAAI,WAAW;IAC1B,GAAG,GAAG,SAAS,UAAU;IACzB,GAAG,GAAG,WAAW,UAAU;IAC3B,GAAG,GAAG,UAAU,UAAU;IAC1B,GAAG,GAAG,YAAY,UAAU;GAC7B,GAAG;EACL,CAAC;YAEA,SAEK,oBAAC,KAAD;GACE,GAAI;GACJ,MAAM;GACN,QAAQ,UAAU;GAClB,KAAI;aAEH;EACA,CAAA,IAGH;CAEH,CAAA;AAET"}

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

@@ -0,0 +1,12 @@
+.text-left {
+  text-align: left;
+}
+.text-center {
+  text-align: center;
+}
+.text-right {
+  text-align: right;
+}
+.text-justify {
+  text-align: justify;
+}

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

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

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

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

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

@@ -0,0 +1,35 @@
+import '../../../styles/base.css';
+import './TextSwitcher.styles.css';/* empty css                  */
+import cn from "classnames";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Atomic/FormElements/TextSwitcher/TextSwitcher.tsx
+var RC = "text-switcher";
+var TextSwitcher = ({ isActive, onChange, className, disabled, activeText = "is", inactiveText = "is not", testId = RC }) => {
+	const isUndefined = isActive === void 0 || isActive === null;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"data-testid": testId,
+		className: cn(RC, {
+			[`${RC}_active`]: isActive,
+			[`${RC}_disabled`]: disabled
+		}, className),
+		onClick: () => onChange(!isActive),
+		disabled,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: `${RC}__btn`,
+				children: activeText
+			}),
+			inactiveText && /* @__PURE__ */ jsx("span", {
+				className: cn(`${RC}__btn`, `${RC}__btn_off`),
+				children: inactiveText
+			}),
+			!isUndefined && /* @__PURE__ */ jsx("div", { className: cn(`${RC}__slider`, { [`${RC}__slider_inactive`]: !isActive }) })
+		]
+	});
+};
+//#endregion
+export { TextSwitcher as default };
+
+//# sourceMappingURL=TextSwitcher.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextSwitcher.js","names":[],"sources":["../../../../../src/Atomic/FormElements/TextSwitcher/TextSwitcher.tsx"],"sourcesContent":["import type { IUniProps } from '../../../types/base.interface';\nimport cn from 'classnames';\n\nimport React from 'react';\n\nimport './TextSwitcher.scss';\n\ninterface IProps extends IUniProps {\n  isActive?: boolean;\n  onChange: (isActive: boolean) => void;\n  disabled?: boolean;\n  activeText?: string;\n  inactiveText?: string;\n}\n\nconst RC = 'text-switcher';\n\nconst TextSwitcher: React.FC<IProps> = ({\n  isActive,\n  onChange,\n  className,\n  disabled,\n  activeText = 'is',\n  inactiveText = 'is not',\n  testId = RC,\n}) => {\n  const isUndefined = isActive === undefined || isActive === null;\n\n  return (\n    <button\n      type=\"button\"\n      data-testid={testId}\n      className={cn(RC, { [`${RC}_active`]: isActive, [`${RC}_disabled`]: disabled }, className)}\n      onClick={() => onChange(!isActive)}\n      disabled={disabled}\n    >\n      <span className={`${RC}__btn`}>{activeText}</span>\n      {inactiveText && <span className={cn(`${RC}__btn`, `${RC}__btn_off`)}>{inactiveText}</span>}\n      {!isUndefined && (\n        <div\n          className={cn(`${RC}__slider`, {\n            [`${RC}__slider_inactive`]: !isActive,\n          })}\n        />\n      )}\n    </button>\n  );\n};\n\nexport default TextSwitcher;\n"],"mappings":";;;;;AAeA,IAAM,KAAK;AAEX,IAAM,gBAAkC,EACtC,UACA,UACA,WACA,UACA,aAAa,MACb,eAAe,UACf,SAAS,SACL;CACJ,MAAM,cAAc,aAAa,KAAA,KAAa,aAAa;CAE3D,OACE,qBAAC,UAAD;EACE,MAAK;EACL,eAAa;EACb,WAAW,GAAG,IAAI;IAAG,GAAG,GAAG,WAAW;IAAW,GAAG,GAAG,aAAa;EAAS,GAAG,SAAS;EACzF,eAAe,SAAS,CAAC,QAAQ;EACvB;YALZ;GAOE,oBAAC,QAAD;IAAM,WAAW,GAAG,GAAG;cAAS;GAAiB,CAAA;GAChD,gBAAgB,oBAAC,QAAD;IAAM,WAAW,GAAG,GAAG,GAAG,QAAQ,GAAG,GAAG,UAAU;cAAI;GAAmB,CAAA;GACzF,CAAC,eACA,oBAAC,OAAD,EACE,WAAW,GAAG,GAAG,GAAG,WAAW,GAC5B,GAAG,GAAG,qBAAqB,CAAC,SAC/B,CAAC,EACF,CAAA;EAEG;;AAEZ"}

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

@@ -0,0 +1,84 @@
+/* COLORS*/
+/*GRID*/
+/*FONTS*/
+/*Z-INDEX*/
+/*OTHER*/
+/* THEME COLORS */
+/* COLORS */
+/* GRID */
+/* FONTS */
+:export {
+  primaryColor: #3f51b5;
+  secondaryColor: #f50057;
+  successColor: #4caf50;
+  warningColor: #ff9800;
+  errorColor: #f44336;
+  infoColor: #2196f3;
+  backgroundColor: #ffffff;
+  textColor: #212121;
+  textSecondaryColor: #757575;
+}
+
+.text-switcher {
+  position: relative;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  grid-template-columns: repeat(2, 1fr);
+  box-sizing: border-box;
+  padding: 2px;
+  font-size: 12px;
+  font-weight: 300;
+  font-style: normal;
+  border: 2px solid #fce2e8;
+  border-radius: 26px;
+  background: #fff;
+}
+.text-switcher__btn {
+  position: relative;
+  z-index: 2;
+  min-width: 58px;
+  height: 100%;
+  padding: 0 14px;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  font-style: inherit;
+  line-height: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+  text-transform: uppercase;
+  color: #00b031;
+}
+.text-switcher__btn_off {
+  color: #f06d8d;
+}
+.text-switcher__slider {
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 50%;
+  border-radius: 28px;
+  background-color: #e4f3e8;
+  transition: left 0.3s ease, background-color 0.3s ease;
+}
+.text-switcher__slider_inactive {
+  left: 50%;
+  background-color: #fce2e8;
+}
+.text-switcher_active {
+  border-color: #e4f3e8;
+}
+.text-switcher_disabled {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+.text-switcher_unsetted {
+  filter: grayscale(1);
+}
+.text-switcher_unsetted .text-switcher__btn {
+  color: #a6acb1 !important;
+}

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

@@ -0,0 +1,73 @@
+import '../../../styles/base.css';
+import { getIsOnlyAnObject } from "../../../Functions/utils.js";
+import { formatToOnlyASCIICodeText } from "../../../Functions/fieldValueFormatters.js";
+import './Textarea.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/Textarea/Textarea.tsx
+var RC = "textarea";
+function getDefaultSymbolsLimit(symbolsLimit) {
+	if (typeof symbolsLimit === "number") return { limit: symbolsLimit };
+	return { limit: null };
+}
+function Textarea({ ref, id, value, onChange, onFocus, onBlur, onKeyDown, placeholder, disabled, className, isNotValidateASCII = false, testId = RC, withAutoGrow, symbolsLimit }) {
+	const internalRef = useRef(null);
+	const textareaRef = ref || internalRef;
+	const symbolsLimitSafely = useMemo(() => {
+		const sourse = getIsOnlyAnObject(symbolsLimit) ? symbolsLimit : getDefaultSymbolsLimit(symbolsLimit);
+		const limit = typeof sourse.limit === "number" ? sourse.limit : null;
+		return {
+			limit,
+			isShowLimit: typeof sourse.isShowLimit === "boolean" ? sourse.isShowLimit && typeof limit === "number" && limit >= 0 : typeof limit === "number" && limit >= 0
+		};
+	}, [symbolsLimit]);
+	const handle = {
+		change: (val) => {
+			if (typeof symbolsLimitSafely.limit === "number" && val.length > symbolsLimitSafely.limit) return;
+			let inputValue = val;
+			if (!isNotValidateASCII) inputValue = formatToOnlyASCIICodeText(inputValue);
+			onChange(inputValue);
+		},
+		focus: (e) => onFocus?.(e),
+		blur: (e) => onBlur?.(e)
+	};
+	const autoGrow = (el) => {
+		if (!el) return;
+		el.style.height = "5px";
+		el.style.height = `${el.scrollHeight}px`;
+	};
+	useEffect(() => {
+		if (withAutoGrow) autoGrow(textareaRef?.current);
+	}, [value, withAutoGrow]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": testId,
+		className: cn(RC, className),
+		children: [/* @__PURE__ */ jsx("textarea", {
+			id: id ?? Math.random().toString(16).slice(2),
+			"data-testid": `${testId}-textarea`,
+			className: `${RC}__textarea`,
+			value,
+			onChange: (e) => handle.change(e.target.value),
+			placeholder,
+			disabled,
+			onKeyDown,
+			ref: textareaRef,
+			onFocus: handle.focus,
+			onBlur: handle.blur
+		}), symbolsLimitSafely.isShowLimit && /* @__PURE__ */ jsxs("div", {
+			className: `${RC}__symbols-limit`,
+			children: [
+				value.length,
+				" ",
+				"/",
+				" ",
+				symbolsLimitSafely.limit
+			]
+		})]
+	});
+}
+//#endregion
+export { Textarea as default };
+
+//# sourceMappingURL=Textarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","names":[],"sources":["../../../../../src/Atomic/FormElements/Textarea/Textarea.tsx"],"sourcesContent":["import type {\n  ChangeEvent,\n  FocusEvent,\n} from 'react';\nimport type { ISymbolsLimit, ITextareaProps } from './Textarea.interface';\n\nimport cn from 'classnames';\nimport React, {\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { formatToOnlyASCIICodeText } from '../../../Functions/fieldValueFormatters';\nimport { getIsOnlyAnObject } from '../../../Functions/utils';\n\nimport './Textarea.scss';\n\nconst RC = 'textarea';\n\nfunction getDefaultSymbolsLimit(symbolsLimit: unknown): ISymbolsLimit {\n  if (typeof symbolsLimit === 'number') return { limit: symbolsLimit } as ISymbolsLimit;\n  return { limit: null } as ISymbolsLimit;\n}\n\nfunction Textarea({\n  ref,\n  id,\n  value,\n  onChange,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  placeholder,\n  disabled,\n  className,\n  isNotValidateASCII = false,\n  testId = RC,\n  withAutoGrow,\n  symbolsLimit,\n}: ITextareaProps & { ref?: React.RefObject<HTMLTextAreaElement | null> }): JSX.Element {\n  const internalRef = useRef<HTMLTextAreaElement>(null);\n  const textareaRef = (ref as React.RefObject<HTMLTextAreaElement>) || internalRef;\n\n  const symbolsLimitSafely = useMemo(() => {\n    const sourse = getIsOnlyAnObject(symbolsLimit) ? (symbolsLimit as ISymbolsLimit) : getDefaultSymbolsLimit(symbolsLimit);\n\n    const limit = typeof sourse.limit === 'number' ? sourse.limit : null;\n    const isShowLimit = typeof sourse.isShowLimit === 'boolean'\n      ? sourse.isShowLimit && typeof limit === 'number' && limit >= 0\n      : typeof limit === 'number' && limit >= 0;\n\n    return { limit, isShowLimit };\n  }, [symbolsLimit]);\n\n  const handle = {\n    change: (val: string) => {\n      if (typeof symbolsLimitSafely.limit === 'number' && val.length > symbolsLimitSafely.limit) return;\n\n      let inputValue = val;\n      if (!isNotValidateASCII) {\n        inputValue = formatToOnlyASCIICodeText(inputValue);\n      }\n      onChange(inputValue);\n    },\n    focus: (e: FocusEvent<HTMLTextAreaElement>) => onFocus?.(e),\n    blur: (e: FocusEvent<HTMLTextAreaElement>) => onBlur?.(e),\n  };\n\n  const autoGrow = (el: HTMLTextAreaElement | null): void => {\n    if (!el) return;\n    el.style.height = '5px';\n    el.style.height = `${el.scrollHeight}px`;\n  };\n\n  useEffect(() => {\n    if (withAutoGrow) {\n      autoGrow(textareaRef?.current);\n    }\n  }, [value, withAutoGrow]);\n\n  return (\n    <div data-testid={testId} className={cn(RC, className)}>\n      <textarea\n        id={id ?? Math.random().toString(16).slice(2)}\n        data-testid={`${testId}-textarea`}\n        className={`${RC}__textarea`}\n        value={value}\n        onChange={(e: ChangeEvent<HTMLTextAreaElement>) => handle.change(e.target.value)}\n        placeholder={placeholder}\n        disabled={disabled}\n        onKeyDown={onKeyDown}\n        ref={textareaRef}\n        onFocus={handle.focus}\n        onBlur={handle.blur}\n      />\n\n      {symbolsLimitSafely.isShowLimit && (\n        <div className={`${RC}__symbols-limit`}>\n          {value.length}\n          {' '}\n          /\n          {' '}\n          {symbolsLimitSafely.limit}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default Textarea;\n"],"mappings":";;;;;;;AAkBA,IAAM,KAAK;AAEX,SAAS,uBAAuB,cAAsC;CACpE,IAAI,OAAO,iBAAiB,UAAU,OAAO,EAAE,OAAO,aAAa;CACnE,OAAO,EAAE,OAAO,KAAK;AACvB;AAEA,SAAS,SAAS,EAChB,KACA,IACA,OACA,UACA,SACA,QACA,WACA,aACA,UACA,WACA,qBAAqB,OACrB,SAAS,IACT,cACA,gBACsF;CACtF,MAAM,cAAc,OAA4B,IAAI;CACpD,MAAM,cAAe,OAAgD;CAErE,MAAM,qBAAqB,cAAc;EACvC,MAAM,SAAS,kBAAkB,YAAY,IAAK,eAAiC,uBAAuB,YAAY;EAEtH,MAAM,QAAQ,OAAO,OAAO,UAAU,WAAW,OAAO,QAAQ;EAKhE,OAAO;GAAE;GAAO,aAJI,OAAO,OAAO,gBAAgB,YAC9C,OAAO,eAAe,OAAO,UAAU,YAAY,SAAS,IAC5D,OAAO,UAAU,YAAY,SAAS;EAEd;CAC9B,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,SAAS;EACb,SAAS,QAAgB;GACvB,IAAI,OAAO,mBAAmB,UAAU,YAAY,IAAI,SAAS,mBAAmB,OAAO;GAE3F,IAAI,aAAa;GACjB,IAAI,CAAC,oBACH,aAAa,0BAA0B,UAAU;GAEnD,SAAS,UAAU;EACrB;EACA,QAAQ,MAAuC,UAAU,CAAC;EAC1D,OAAO,MAAuC,SAAS,CAAC;CAC1D;CAEA,MAAM,YAAY,OAAyC;EACzD,IAAI,CAAC,IAAI;EACT,GAAG,MAAM,SAAS;EAClB,GAAG,MAAM,SAAS,GAAG,GAAG,aAAa;CACvC;CAEA,gBAAgB;EACd,IAAI,cACF,SAAS,aAAa,OAAO;CAEjC,GAAG,CAAC,OAAO,YAAY,CAAC;CAExB,OACE,qBAAC,OAAD;EAAK,eAAa;EAAQ,WAAW,GAAG,IAAI,SAAS;YAArD,CACE,oBAAC,YAAD;GACE,IAAI,MAAM,KAAK,OAAO,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC;GAC5C,eAAa,GAAG,OAAO;GACvB,WAAW,GAAG,GAAG;GACV;GACP,WAAW,MAAwC,OAAO,OAAO,EAAE,OAAO,KAAK;GAClE;GACH;GACC;GACX,KAAK;GACL,SAAS,OAAO;GAChB,QAAQ,OAAO;EAChB,CAAA,GAEA,mBAAmB,eAClB,qBAAC,OAAD;GAAK,WAAW,GAAG,GAAG;aAAtB;IACG,MAAM;IACN;IAAI;IAEJ;IACA,mBAAmB;GACjB;IAEJ;;AAET"}

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

@@ -0,0 +1,102 @@
+/* COLORS*/
+/*GRID*/
+/*FONTS*/
+/*Z-INDEX*/
+/*OTHER*/
+/* THEME COLORS */
+/* COLORS */
+/* GRID */
+/* FONTS */
+:export {
+  primaryColor: #3f51b5;
+  secondaryColor: #f50057;
+  successColor: #4caf50;
+  warningColor: #ff9800;
+  errorColor: #f44336;
+  infoColor: #2196f3;
+  backgroundColor: #ffffff;
+  textColor: #212121;
+  textSecondaryColor: #757575;
+}
+
+.textarea {
+  --symbols-limit-right-padding: 8px;
+  --symbols-limit-bottom-padding: -12px;
+  --symbols-limit-font-size: 10px;
+  --symbols-limit-color: var(--color-text-muted, #757f8c);
+  position: relative;
+}
+.textarea__textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 224px;
+  min-height: 100px;
+  padding: 4px 8px;
+  font-family: Roboto, sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  resize: none;
+  border: 1px solid #e2e5ec;
+  outline: none;
+  background-color: #fff;
+}
+.textarea__textarea scrollbar {
+  -moz-appearance: none !important;
+}
+.textarea__textarea scrollbarbutton {
+  -moz-appearance: none !important;
+}
+.textarea__textarea thumb {
+  -moz-appearance: none !important;
+}
+.textarea__textarea scrollcorner {
+  -moz-appearance: none !important;
+  resize: both;
+}
+.textarea__textarea::-webkit-scrollbar {
+  width: 4px;
+}
+.textarea__textarea::-webkit-scrollbar-thumb {
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  background: #BAC2C9;
+}
+.textarea__textarea::-webkit-scrollbar-thumb:hover {
+  background: #9AA0B9;
+}
+.textarea__textarea::-webkit-scrollbar:horizontal {
+  height: 8px;
+}
+.textarea__textarea::-webkit-scrollbar-track:horizontal {
+  background: inherit;
+}
+.textarea__textarea::-webkit-scrollbar-thumb:horizontal {
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+  background: #BAC2C9;
+  background-clip: padding-box;
+  border: 2px solid rgba(0, 0, 0, 0);
+}
+.textarea__textarea::-webkit-scrollbar-thumb:horizontal:hover {
+  background: #9AA0B9;
+  border: 1px solid rgba(0, 0, 0, 0);
+  background-clip: padding-box;
+}
+.textarea__textarea:focus {
+  border-color: #6b81dd;
+  box-shadow: none;
+  filter: none;
+}
+.textarea__textarea:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  border-color: #a6acb1;
+  background: #f7f8fa;
+}
+.textarea__symbols-limit {
+  position: absolute;
+  right: var(--symbols-limit-right-padding);
+  bottom: var(--symbols-limit-bottom-padding);
+  font-size: var(--symbols-limit-font-size);
+  color: var(--symbols-limit-color);
+}

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

@@ -0,0 +1,124 @@
+import '../../../styles/base.css';
+import CheckboxInput from "../CheckboxInput/CheckboxInput.js";
+import { compareAlphabetical } from "../../../Functions/utils.js";
+import './TieredCheckboxes.styles.css';/* empty css                      */
+import AccordionWithCheckbox from "./partial/AccordionWithCheckbox.js";
+import cn from "classnames";
+import { createElement, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.tsx
+var RC = "tiered-checkboxes";
+var TieredCheckboxes = ({ items = [], className, onChange, isUseParentsClassesAsDataset, isUseAccordionForGroup, accordionIcons, isOnlyOne = false, sortGroups = false, sortGroupItems = false, labelFor }) => {
+	const handle = {
+		changeParent: (value, key, prop) => {
+			const parent = items.find((item) => item.key === key);
+			if (!parent) return;
+			if (prop) parent[prop] = value;
+			else {
+				parent.value = value;
+				if (!prop) if (value) parent.children.filter(({ disabled }) => !disabled).forEach((item) => item.value = true);
+				else parent.children.filter(({ disabled }) => !disabled).forEach((item) => item.value = false);
+			}
+			onChange([...items]);
+		},
+		changeChild: (value, key, parentKey) => {
+			if (isOnlyOne) {
+				const parent = items.find((item) => item.key === parentKey);
+				if (!parent) return;
+				const child = parent.children.find((item) => item.key === key);
+				if (child) {
+					child.value = value;
+					parent.children = parent.children.map((item) => {
+						if (item.key !== key && value === true) {
+							item.disabled = true;
+							parent.disabled = true;
+						} else if (item.key !== key && value === false) {
+							item.disabled = false;
+							parent.disabled = false;
+						} else item.disabled = false;
+						return item;
+					});
+					parent.disabled = true;
+				}
+			} else {
+				const parent = items.find((item) => item.key === parentKey);
+				if (!parent) return;
+				const child = parent.children.find((item) => item.key === key);
+				if (child) {
+					child.value = value;
+					if (parent.children.every((item) => item.value)) parent.value = true;
+					else parent.value = false;
+				}
+			}
+			onChange([...items]);
+		},
+		isAllChecked: (item) => {
+			return item?.children.some((child) => child.value) && !item?.children.every((child) => child.value);
+		}
+	};
+	const preparedItems = useMemo(() => {
+		let newItems = [...items];
+		if (sortGroups) newItems = newItems?.sort(compareAlphabetical);
+		if (sortGroupItems) newItems = newItems?.map((parent) => {
+			if (parent?.children) parent.children = parent?.children?.sort(compareAlphabetical);
+			return parent;
+		});
+		return newItems;
+	}, [
+		items,
+		sortGroups,
+		sortGroupItems
+	]);
+	const renderInner = (parent) => {
+		return parent.children ? /* @__PURE__ */ jsx("div", {
+			className: `${RC}__children-wrapper`,
+			children: parent.children.map((child) => /* @__PURE__ */ jsx("div", {
+				className: `${RC}__children`,
+				children: /* @__PURE__ */ jsx(CheckboxInput, {
+					id: labelFor ? `${labelFor}_${child.key}` : child.key,
+					testId: child.key,
+					label: child.label,
+					value: child.value,
+					disabled: child?.disabled,
+					onChange: (value) => handle.changeChild(value, child.key, parent.key)
+				})
+			}, child.key))
+		}) : null;
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(RC, className),
+		children: preparedItems.map((parent) => {
+			const datasetProp = isUseParentsClassesAsDataset && parent?.className ? { "data-key": parent?.className } : {};
+			if (isUseAccordionForGroup) return /* @__PURE__ */ jsx(AccordionWithCheckbox, {
+				RC,
+				parent,
+				datasetProp,
+				isUseParentsClassesAsDataset,
+				className: `${RC}__mono-accordion`,
+				setIsOpen: () => handle.changeParent(!parent.isOpen, parent.key, "isOpen"),
+				onChange: (value) => handle.changeParent(value, parent.key),
+				icon: !parent.isOpen ? accordionIcons?.[0] || null : accordionIcons?.[1] || null,
+				children: renderInner(parent)
+			}, parent.key);
+			return /* @__PURE__ */ createElement("div", {
+				...datasetProp,
+				key: parent.key,
+				className: cn(`${RC}__parents`, { [`${parent.className}`]: !isUseParentsClassesAsDataset })
+			}, /* @__PURE__ */ jsx(CheckboxInput, {
+				id: labelFor ? `${labelFor}_${parent.key}` : parent.key,
+				isStark: handle.isAllChecked(parent),
+				label: parent.label,
+				value: parent.value,
+				onChange: (value) => handle.changeParent(value, parent.key),
+				disabled: parent.children.every(({ disabled }) => disabled === true) || parent.disabled
+			}), /* @__PURE__ */ jsx("div", {
+				className: cn(`${RC}__parent__children`),
+				children: renderInner(parent)
+			}));
+		})
+	});
+};
+//#endregion
+export { TieredCheckboxes as default };
+
+//# sourceMappingURL=TieredCheckboxes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TieredCheckboxes.js","names":[],"sources":["../../../../../src/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.tsx"],"sourcesContent":["import type { ITieredCheckboxesProps, ITieredCheckboxItem } from './TieredCheckboxes.interface';\n\nimport cn from 'classnames';\nimport React, { useMemo } from 'react';\n\nimport { compareAlphabetical } from '../../../Functions/utils';\nimport CheckboxInput from '../CheckboxInput/CheckboxInput';\n\nimport AccordionWithCheckbox from './partial/AccordionWithCheckbox';\n\nimport './TieredCheckboxes.scss';\n\nconst RC = 'tiered-checkboxes';\n\nconst TieredCheckboxes: React.FC<ITieredCheckboxesProps> = ({\n  items = [],\n  className,\n  onChange,\n  isUseParentsClassesAsDataset,\n  isUseAccordionForGroup,\n  accordionIcons,\n  isOnlyOne = false,\n  sortGroups = false,\n  sortGroupItems = false,\n  labelFor,\n}) => {\n  const handle = {\n    changeParent: (value: boolean, key: string, prop?: string) => {\n      const parent = items.find(item => item.key === key);\n      if (!parent) return;\n\n      if (prop) {\n        (parent as any)[prop] = value;\n      }\n      else {\n        parent.value = value;\n\n        if (!prop) {\n          if (value) {\n            parent.children\n              .filter(({ disabled }) => !disabled)\n              .forEach(item => (item.value = true));\n          }\n          else {\n            parent.children\n              .filter(({ disabled }) => !disabled)\n              .forEach(item => (item.value = false));\n          }\n        }\n      }\n      onChange([...items]);\n    },\n    changeChild: (value: boolean, key: string, parentKey: string) => {\n      if (isOnlyOne) {\n        const parent = items.find(item => item.key === parentKey);\n        if (!parent) return;\n\n        const child = parent.children.find(item => item.key === key);\n        if (child) {\n          child.value = value;\n\n          parent.children = parent.children.map((item) => {\n            if (item.key !== key && value === true) {\n              item.disabled = true;\n              parent.disabled = true;\n            }\n            else if (item.key !== key && value === false) {\n              item.disabled = false;\n              parent.disabled = false;\n            }\n            else {\n              item.disabled = false;\n            }\n            return item;\n          });\n\n          parent.disabled = true;\n        }\n      }\n      else {\n        const parent = items.find(item => item.key === parentKey);\n        if (!parent) return;\n\n        const child = parent.children.find(item => item.key === key);\n        if (child) {\n          child.value = value;\n\n          if (parent.children.every(item => item.value)) {\n            parent.value = true;\n          }\n          else {\n            parent.value = false;\n          }\n        }\n      }\n\n      onChange([...items]);\n    },\n    isAllChecked: (item: ITieredCheckboxItem) => {\n      return (\n        item?.children.some(child => child.value)\n        && !item?.children.every(child => child.value)\n      );\n    },\n  };\n\n  const preparedItems = useMemo(() => {\n    let newItems = [...items];\n\n    if (sortGroups) {\n      newItems = newItems?.sort(compareAlphabetical);\n    }\n\n    if (sortGroupItems) {\n      newItems = newItems?.map((parent) => {\n        if (parent?.children) {\n          parent.children = parent?.children?.sort(compareAlphabetical);\n        }\n\n        return parent;\n      });\n    }\n\n    return newItems;\n  }, [items, sortGroups, sortGroupItems]);\n\n  const renderInner = (parent: ITieredCheckboxItem): JSX.Element | null => {\n    return parent.children\n      ? (\n          <div className={`${RC}__children-wrapper`}>\n            {parent.children.map(child => (\n              <div key={child.key} className={`${RC}__children`}>\n                <CheckboxInput\n                  id={labelFor ? `${labelFor}_${child.key}` : child.key}\n                  testId={child.key}\n                  label={child.label}\n                  value={child.value}\n                  disabled={child?.disabled}\n                  onChange={(value: boolean) =>\n                    handle.changeChild(value, child.key, parent.key)}\n                />\n              </div>\n            ))}\n          </div>\n        )\n      : null;\n  };\n\n  return (\n    <div className={cn(RC, className)}>\n      {preparedItems.map((parent) => {\n        const datasetProp\n          = isUseParentsClassesAsDataset && parent?.className\n            ? { 'data-key': parent?.className }\n            : {};\n        if (isUseAccordionForGroup) {\n          return (\n            <AccordionWithCheckbox\n              key={parent.key}\n              RC={RC}\n              parent={parent}\n              datasetProp={datasetProp}\n              isUseParentsClassesAsDataset={isUseParentsClassesAsDataset}\n              className={`${RC}__mono-accordion`}\n              setIsOpen={() =>\n                handle.changeParent(!parent.isOpen, parent.key, 'isOpen')}\n              onChange={(value: boolean) => handle.changeParent(value, parent.key)}\n              icon={\n                !parent.isOpen\n                  ? accordionIcons?.[0] || null\n                  : accordionIcons?.[1] || null\n              }\n            >\n              {renderInner(parent)}\n            </AccordionWithCheckbox>\n          );\n        }\n        return (\n          <div\n            {...datasetProp}\n            key={parent.key}\n            className={cn(`${RC}__parents`, {\n              [`${parent.className}`]: !isUseParentsClassesAsDataset,\n            })}\n          >\n            <CheckboxInput\n              id={labelFor ? `${labelFor}_${parent.key}` : parent.key}\n              isStark={handle.isAllChecked(parent)}\n              label={parent.label}\n              value={parent.value}\n              onChange={(value: boolean) => handle.changeParent(value, parent.key)}\n              disabled={\n                parent.children.every(({ disabled }) => disabled === true)\n                || parent.disabled\n              }\n            />\n            <div className={cn(`${RC}__parent__children`)}>\n              {renderInner(parent)}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default TieredCheckboxes;\n"],"mappings":"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"}

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

@@ -0,0 +1,46 @@
+.tiered-checkboxes__parents {
+  margin-bottom: 25px;
+}
+.tiered-checkboxes__parents > label {
+  display: inline-flex;
+}
+.tiered-checkboxes__children {
+  margin-top: 10px;
+  margin-left: 10px;
+}
+.tiered-checkboxes__description-checked {
+  padding-left: 21px;
+  font-size: 10px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 18px;
+  letter-spacing: 0.2px;
+  color: #757f8c;
+}
+.tiered-checkboxes .mono-accordion {
+  box-shadow: inset 0 -1px 0 #ebeff2;
+}
+.tiered-checkboxes .mono-accordion_is-open {
+  border-bottom: 1px solid #ebeff2;
+}
+.tiered-checkboxes .mono-accordion__head {
+  padding: 8px 4px 0;
+}
+.tiered-checkboxes .mono-accordion__icon-container {
+  width: 20px;
+  height: 20px;
+  margin-top: -8px;
+}
+.tiered-checkboxes .mono-accordion__content-wrapper {
+  margin-top: 8px;
+  padding: 0;
+}
+.tiered-checkboxes .mono-accordion .tiered-checkboxes__children {
+  margin: 0 0 14px 20px;
+}
+.tiered-checkboxes .mono-accordion .checkbox-input_disabled + .tiered-checkboxes__description-checked {
+  opacity: 0.5;
+}
+.tiered-checkboxes .mono-accordion .checkbox-input {
+  width: fit-content;
+}

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

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

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

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

package/dist/es/Atomic/FormElements/TieredCheckboxes/partial/AccordionWithCheckbox.js

@@ -0,0 +1,36 @@
+import '../../../../styles/base.css';
+import CheckboxInput from "../../CheckboxInput/CheckboxInput.js";
+import MonoAccordion from "../../../UI/MonoAccordion/MonoAccordion.js";
+import '../TieredCheckboxes.styles.css';/* empty css                       */
+import cn from "classnames";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/Atomic/FormElements/TieredCheckboxes/partial/AccordionWithCheckbox.tsx
+var AccordionWithCheckbox = ({ children, parent, onChange, className, RC, setIsOpen, icon, disabled, datasetProp, isUseParentsClassesAsDataset }) => {
+	return /* @__PURE__ */ jsx(MonoAccordion, {
+		datasetProp,
+		className: cn(className, { [`${parent.className}`]: !isUseParentsClassesAsDataset }),
+		isOpen: parent.isOpen,
+		onClick: setIsOpen,
+		icon,
+		disabled,
+		titleJSX: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CheckboxInput, {
+			id: `${parent.key}_checkbox-input`,
+			className: `${RC}__checkbox-input`,
+			isStark: parent?.children?.some?.((item) => item.value) && !parent?.children?.every?.((item) => item.value),
+			label: parent.label,
+			value: parent.value,
+			onChange,
+			disabled: parent.children.every(({ disabled }) => disabled === true) || parent.disabled
+		}), /* @__PURE__ */ jsx("span", {
+			onClick: setIsOpen,
+			className: `${RC}__description-checked`,
+			children: parent?.children?.length ? `Selected ${parent.children.filter((child) => child.value).length} from ${parent.children?.length}` : null
+		})] }),
+		children
+	});
+};
+//#endregion
+export { AccordionWithCheckbox as default };
+
+//# sourceMappingURL=AccordionWithCheckbox.js.map