intelicoreact 2.0.17 → 2.0.19

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

@@ -0,0 +1,30 @@
+.label {
+  --label-margin-bottom: 5px;
+  --label-font-size: 13px;
+  --label-color: #1e1e2d;
+  --label-asterisk-color: red;
+  --label-bold-font-weight: 500;
+  --label-note-hint-margin-left: 4px;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  margin-bottom: var(--label-margin-bottom);
+  font-size: var(--label-font-size);
+  color: var(--label-color);
+}
+.label .label_text {
+  width: 100%;
+  vertical-align: middle;
+  white-space: normal;
+  word-wrap: break-word;
+}
+.label.isRequired .label_asterisk {
+  color: var(--label-asterisk-color);
+}
+.label_bold {
+  font-weight: var(--label-bold-font-weight);
+}
+.label_note, .label-hint {
+  margin-left: var(--label-note-hint-margin-left);
+}

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

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

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

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

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

@@ -0,0 +1,339 @@
+import '../../../styles/base.css';
+import './MobileCalendar.styles.css';/* empty css                    */
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import moment from "moment";
+import { ChevronDown, ChevronUp } from "react-feather";
+//#region src/Atomic/FormElements/MobileCalendar/MobileCalendar.tsx
+var defaultClasses = {
+	wrapper: "",
+	label: "",
+	body: "",
+	yearsBlock: "",
+	yearsList: "",
+	yearsListItem: "",
+	monthsBlock: "",
+	monthsList: "",
+	monthsListItem: "",
+	daysBlock: "",
+	daysList: "",
+	daysListItem: "",
+	prevItem: "",
+	nextItem: "",
+	activeItem: ""
+};
+function MobileCalendar({ min = moment().subtract("10", "years"), max = moment().add("10", "years"), value = moment(), rows = 5, label = "", timeout = 75, isMobile = true, showSelectedDate = false, listItemHeight = 32, classes = defaultClasses, onChange = () => {}, onMinDateReached = () => {}, onMaxDateReached = () => {} }) {
+	const [date, setDate] = useState(value ? moment.isMoment(value) ? value.clone() : moment(value) : moment());
+	const [minDate, _setMinDate] = useState(moment.isMoment(min) ? min.clone() : moment(min));
+	const [maxDate, _setMaxDate] = useState(moment.isMoment(max) ? max.clone() : moment(max));
+	const [_isMouseDown, setIsMouseDown] = useState(false);
+	const [_mouseDownOn, setMouseDownOn] = useState(null);
+	const [touchY, setTouchY] = useState(null);
+	const [touchType, setTouchType] = useState(null);
+	const [_touchTimestamp, setTouchTimestamp] = useState(null);
+	const [scrollDirection, setScrollDirection] = useState(0);
+	const monthsListRef = useRef(null);
+	const daysListRef = useRef(null);
+	const yearsListRef = useRef(null);
+	const dateRef = useRef(null);
+	const intervalRef = useRef(null);
+	const changeItem = (type, value) => {
+		setScrollDirection(value);
+		setDate((date) => {
+			const newDate = moment(date).add(value, type);
+			if (moment(newDate).isBefore(minDate)) return minDate;
+			if (moment(newDate).isAfter(maxDate)) return maxDate;
+			return newDate;
+		});
+		setTimeout(() => {
+			setScrollDirection(0);
+		}, 50);
+	};
+	const checkAvailability = (type, value) => {
+		if (!dateRef?.current) return false;
+		const newDate = moment(dateRef?.current).add(value, type);
+		if (moment(newDate).isBefore(minDate)) return false;
+		if (moment(newDate).isAfter(maxDate)) return false;
+		return true;
+	};
+	const onArrowMouseDown = (type, value) => {
+		setIsMouseDown(true);
+		setMouseDownOn({
+			type,
+			value
+		});
+	};
+	const onArrowMouseUp = () => {
+		setIsMouseDown(false);
+		setMouseDownOn(null);
+	};
+	const onWheel = (e, type) => {
+		e.preventDefault();
+		const { deltaY } = e;
+		const top = window.scrollX;
+		const left = window.scrollY;
+		window.scrollTo({
+			top,
+			left
+		});
+		if (type) changeItem(type, deltaY < 0 ? -1 : 1);
+	};
+	const onTouchEnd = (e, startY, startTime, touchType) => {
+		const { timeStamp, changedTouches } = e;
+		const { pageY } = changedTouches[0];
+		if (Math.abs(startY - pageY) / (timeStamp - startTime) > .65) innertionScroll({
+			startY,
+			pageY,
+			timeStamp,
+			startTime,
+			touchType
+		});
+		else setTouchType(null);
+		setTouchY(null);
+	};
+	const onTouchStart = (e, type) => {
+		e.preventDefault();
+		if (intervalRef?.current) {
+			clearInterval(intervalRef?.current);
+			intervalRef.current = null;
+		}
+		const { timeStamp, changedTouches } = e;
+		const { pageY } = changedTouches[0];
+		setTouchY(pageY);
+		setTouchTimestamp(timeStamp);
+		setTouchType(type);
+		window.addEventListener("touchend", (e) => onTouchEnd(e, pageY, timeStamp, type), { once: true });
+	};
+	const onTouchMove = (e) => {
+		if (!touchY || !touchType) return;
+		const { timeStamp, changedTouches } = e;
+		const { pageY } = changedTouches[0];
+		const deltaY = Number(touchY) - pageY;
+		if (Math.abs(deltaY) < listItemHeight) return;
+		const direction = deltaY < 0 ? -1 : 1;
+		setScrollDirection(direction);
+		changeItem(String(touchType), direction);
+		setTouchY(pageY);
+		setTouchTimestamp(timeStamp);
+	};
+	function innertionScroll({ startY, pageY, timeStamp, startTime, touchType }) {
+		const path = Math.abs(startY - pageY);
+		const time = timeStamp - startTime;
+		const pxPerMs = Math.ceil(path / time);
+		const S = pxPerMs / 2 * time;
+		const blocks = Math.ceil(S / listItemHeight * pxPerMs);
+		let i = 1;
+		intervalRef.current = setInterval(() => {
+			if (checkAvailability(touchType, startY - pageY < 0 ? -1 : 1) && i <= blocks) changeItem(touchType, startY - pageY < 0 ? -1 : 1);
+			else {
+				setTouchType(null);
+				if (intervalRef?.current) {
+					clearInterval(intervalRef.current);
+					intervalRef.current = null;
+				}
+				intervalRef.current = null;
+			}
+			++i;
+		}, timeout);
+	}
+	const getList = (type, format) => {
+		const list = [];
+		const renderRows = rows;
+		for (let i = (renderRows - 1) / 2; i >= (renderRows - 1) / 2 * -1; --i) list.push(moment(date).subtract(i, type).format(format));
+		return list;
+	};
+	const getMonthList = () => getList("months", "MMMM");
+	const getDaysList = () => getList("days", "D");
+	const getYearsList = () => getList("years", "YYYY");
+	useEffect(() => {
+		if (moment(date.format("L"), "L", true).isBefore(minDate.format("L"), "day")) setDate(minDate);
+		if (moment(date.format("L"), "L", true).isAfter(maxDate.format("L"), "day")) setDate(maxDate);
+	}, []);
+	useEffect(() => {
+		document.addEventListener("mouseup", onArrowMouseUp);
+		return () => {
+			document.removeEventListener("mouseup", onArrowMouseUp);
+		};
+	}, []);
+	useEffect(() => {
+		onChange(date);
+		dateRef.current = date;
+		if (moment(date.format("L"), "L", true).isSame(minDate.format("L"), "day")) onMinDateReached(minDate);
+		if (moment(date.format("L"), "L", true).isSame(maxDate.format("L"), "day")) onMaxDateReached(maxDate);
+	}, [date]);
+	useEffect(() => {
+		if (!monthsListRef?.current) return;
+		const handleWheel = (e) => onWheel(e, "months");
+		const handleTouchStart = (e) => onTouchStart(e, "months");
+		monthsListRef.current.addEventListener("wheel", handleWheel, { passive: false });
+		monthsListRef.current.addEventListener("touchstart", handleTouchStart, { passive: false });
+		return () => {
+			monthsListRef.current?.removeEventListener("wheel", handleWheel);
+			monthsListRef.current?.removeEventListener("touchstart", handleTouchStart);
+		};
+	}, [monthsListRef]);
+	useEffect(() => {
+		if (!daysListRef?.current) return;
+		const handleWheel = (e) => onWheel(e, "days");
+		const handleTouchStart = (e) => onTouchStart(e, "days");
+		const el = daysListRef.current;
+		el.addEventListener("wheel", handleWheel, { passive: false });
+		el.addEventListener("touchstart", handleTouchStart, { passive: false });
+		return () => {
+			el.removeEventListener("wheel", handleWheel);
+			el.removeEventListener("touchstart", handleTouchStart);
+		};
+	}, [daysListRef]);
+	useEffect(() => {
+		if (!yearsListRef?.current) return;
+		const handleWheel = (e) => onWheel(e, "years");
+		const handleTouchStart = (e) => onTouchStart(e, "years");
+		const el = yearsListRef.current;
+		el.addEventListener("wheel", handleWheel, { passive: false });
+		el.addEventListener("touchstart", handleTouchStart, { passive: false });
+		return () => {
+			el.removeEventListener("wheel", handleWheel);
+			el.removeEventListener("touchstart", handleTouchStart);
+		};
+	}, [yearsListRef]);
+	const renderMonthsList = () => {
+		const half = (rows - 1) / 2;
+		return getMonthList().map((month, i) => /* @__PURE__ */ jsx("div", {
+			className: `mobile-calendar_wrapper_body_months-list--item ${i === half ? "active" : ""} ${i === 0 || i === rows - 1 ? "transparent" : ""} ${classes?.monthsListItem} ${i === half ? classes?.activeItem : ""}`,
+			onClick: touchY ? void 0 : () => i - half === 0 ? {} : changeItem("months", i - half),
+			"attr-scroll-direction": touchType === "months" ? scrollDirection : 0,
+			"attr-is-scrolling": touchType === "months" ? 1 : 0,
+			children: month
+		}, `month-${month}`));
+	};
+	const renderDaysList = () => {
+		const half = (rows - 1) / 2;
+		return getDaysList().map((day, i) => /* @__PURE__ */ jsx("div", {
+			className: `mobile-calendar_wrapper_body_days-list--item ${i === half ? "active" : ""} ${i === 0 || i === rows - 1 ? "transparent" : ""} ${classes?.daysListItem} ${i === half ? classes?.activeItem : ""}`,
+			onClick: () => i - half === 0 ? {} : changeItem("days", i - half),
+			"attr-scroll-direction": touchType === "days" ? scrollDirection : 0,
+			"attr-is-scrolling": touchType === "days" ? 1 : 0,
+			children: day
+		}, `day-${day}`));
+	};
+	const renderYearsList = () => {
+		const half = (rows - 1) / 2;
+		return getYearsList().map((year, i) => /* @__PURE__ */ jsx("div", {
+			className: `mobile-calendar_wrapper_body_years-list--item ${i === half ? "active" : ""} ${i === 0 || i === rows - 1 ? "transparent" : ""} ${classes?.yearsListItem} ${i === half ? classes?.activeItem : ""}`,
+			onClick: () => i - half === 0 ? {} : changeItem("years", i - half),
+			"attr-scroll-direction": touchType === "years" ? scrollDirection : 0,
+			"attr-is-scrolling": touchType === "years" ? 1 : 0,
+			children: year
+		}, `year-${year}`));
+	};
+	const renderMonthsBlock = () => {
+		return /* @__PURE__ */ jsxs("div", {
+			className: `mobile-calendar_wrapper_body_months ${classes?.monthsBlock}`,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: `mobile-calendar_wrapper_body_months--prev ${classes?.prevItem}`,
+					children: /* @__PURE__ */ jsx(ChevronUp, {
+						onClick: () => changeItem("months", -1),
+						onMouseDown: () => onArrowMouseDown("months", -1),
+						onMouseUp: onArrowMouseUp
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: `mobile-calendar_wrapper_body_months-list ${classes?.monthsList}`,
+					ref: monthsListRef,
+					children: [renderMonthsList(), isMobile && /* @__PURE__ */ jsx("div", { className: "mobile-calendar_wrapper_body_months-list_touch-zone" })]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: `mobile-calendar_wrapper_body_months--next ${classes?.nextItem}`,
+					children: /* @__PURE__ */ jsx(ChevronDown, {
+						onClick: () => changeItem("months", 1),
+						onMouseDown: () => onArrowMouseDown("months", 1),
+						onMouseUp: onArrowMouseUp
+					})
+				})
+			]
+		});
+	};
+	const renderDaysBlock = () => {
+		return /* @__PURE__ */ jsxs("div", {
+			className: `mobile-calendar_wrapper_body_days ${classes?.daysBlock}`,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: `mobile-calendar_wrapper_body_days--prev ${classes?.prevItem}`,
+					children: /* @__PURE__ */ jsx(ChevronUp, {
+						onClick: () => changeItem("days", -1),
+						onMouseDown: () => onArrowMouseDown("days", -1),
+						onMouseUp: onArrowMouseUp
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: `mobile-calendar_wrapper_body_days-list ${classes?.daysList}`,
+					ref: daysListRef,
+					children: [renderDaysList(), isMobile && /* @__PURE__ */ jsx("div", { className: "mobile-calendar_wrapper_body_days-list_touch-zone" })]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: `mobile-calendar_wrapper_body_days--next ${classes?.nextItem}`,
+					children: /* @__PURE__ */ jsx(ChevronDown, {
+						onClick: () => changeItem("days", 1),
+						onMouseDown: () => onArrowMouseDown("days", 1),
+						onMouseUp: onArrowMouseUp
+					})
+				})
+			]
+		});
+	};
+	const renderYearsBlock = () => {
+		return /* @__PURE__ */ jsxs("div", {
+			className: `mobile-calendar_wrapper_body_years ${classes?.yearsBlock}`,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: `mobile-calendar_wrapper_body_years--prev ${classes?.prevItem}`,
+					children: /* @__PURE__ */ jsx(ChevronUp, {
+						onClick: () => changeItem("years", -1),
+						onMouseDown: () => onArrowMouseDown("years", -1),
+						onMouseUp: onArrowMouseUp
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: `mobile-calendar_wrapper_body_years-list ${classes?.yearsList}`,
+					ref: yearsListRef,
+					children: [renderYearsList(), isMobile && /* @__PURE__ */ jsx("div", { className: "mobile-calendar_wrapper_body_years-list_touch-zone" })]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: `mobile-calendar_wrapper_body_years--next ${classes?.nextItem}`,
+					children: /* @__PURE__ */ jsx(ChevronDown, {
+						onClick: () => changeItem("years", 1),
+						onMouseDown: () => onArrowMouseDown("years", 1),
+						onMouseUp: onArrowMouseUp
+					})
+				})
+			]
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: `mobile-calendar_wrapper ${classes?.wrapper}`,
+		onTouchMove: (e) => onTouchMove(e),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: `mobile-calendar_wrapper_label ${classes?.label}`,
+				children: label
+			}),
+			showSelectedDate && /* @__PURE__ */ jsx("div", {
+				className: `mobile-calendar_wrapper_label  ${classes?.label}`,
+				children: moment(date).format("LL")
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: `mobile-calendar_wrapper_body  ${classes?.body}`,
+				children: [
+					renderMonthsBlock(),
+					renderDaysBlock(),
+					renderYearsBlock()
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { MobileCalendar as default };
+
+//# sourceMappingURL=MobileCalendar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MobileCalendar.js","names":[],"sources":["../../../../../src/Atomic/FormElements/MobileCalendar/MobileCalendar.tsx"],"sourcesContent":["import type { DurationInputArg2, Moment } from 'moment';\n\nimport type { ReactElement, ReactNode, SetStateAction } from 'react';\nimport type { IMobileCalendarProps } from './MobileCalendar.interface';\nimport moment from 'moment';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { ChevronDown, ChevronUp } from 'react-feather';\nimport './MobileCalendar.scss';\n\nconst defaultClasses = {\n  wrapper: '',\n  label: '',\n  body: '',\n\n  yearsBlock: '',\n  yearsList: '',\n  yearsListItem: '',\n\n  monthsBlock: '',\n  monthsList: '',\n  monthsListItem: '',\n\n  daysBlock: '',\n  daysList: '',\n  daysListItem: '',\n\n  prevItem: '',\n  nextItem: '',\n  activeItem: '',\n};\n\nfunction MobileCalendar({\n  min = moment().subtract('10', 'years'),\n  max = moment().add('10', 'years'),\n  value = moment(),\n  rows = 5,\n  label = '',\n  timeout = 75,\n  isMobile = true,\n  showSelectedDate = false,\n  listItemHeight = 32,\n\n  classes = defaultClasses,\n  onChange = () => {},\n  onMinDateReached = () => {},\n  onMaxDateReached = () => {},\n}: IMobileCalendarProps): ReactElement {\n  const [date, setDate] = useState(value ? (moment.isMoment(value) ? value.clone() : moment(value)) : moment());\n  const [minDate, _setMinDate] = useState(moment.isMoment(min) ? min.clone() : moment(min));\n  const [maxDate, _setMaxDate] = useState(moment.isMoment(max) ? max.clone() : moment(max));\n\n  const [_isMouseDown, setIsMouseDown] = useState(false);\n  const [_mouseDownOn, setMouseDownOn] = useState<SetStateAction<{ type: string; value: number } | null>>(null);\n\n  const [touchY, setTouchY] = useState<SetStateAction<number | null>>(null);\n  const [touchType, setTouchType] = useState<SetStateAction<string | null>>(null);\n  const [_touchTimestamp, setTouchTimestamp] = useState<SetStateAction<number | null>>(null);\n\n  const [scrollDirection, setScrollDirection] = useState(0);\n\n  const monthsListRef = useRef<HTMLDivElement | null>(null);\n  const daysListRef = useRef<HTMLDivElement | null>(null);\n  const yearsListRef = useRef(null);\n\n  const dateRef = useRef<Moment | null>(null);\n  const intervalRef = useRef<null | ReturnType<typeof setInterval>>(null);\n\n  // --HANDLERS--//\n  const changeItem = (type: string, value: number): void => {\n    setScrollDirection(value);\n    setDate((date) => {\n      const newDate = moment(date).add(value, (type as DurationInputArg2));\n\n      if (moment(newDate).isBefore(minDate)) return minDate;\n      if (moment(newDate).isAfter(maxDate)) return maxDate;\n\n      return newDate;\n    });\n    setTimeout(() => {\n      setScrollDirection(0);\n    }, 50);\n  };\n\n  const checkAvailability = (type: string, value: number): boolean => {\n    if (!dateRef?.current) return false;\n\n    const newDate = moment(dateRef?.current).add(value, (type as DurationInputArg2));\n\n    if (moment(newDate).isBefore(minDate)) return false;\n    if (moment(newDate).isAfter(maxDate)) return false;\n\n    return true;\n  };\n  const onArrowMouseDown = (type: string, value: number): void => {\n    setIsMouseDown(true);\n\n    setMouseDownOn({ type, value });\n  };\n  const onArrowMouseUp = (): void => {\n    setIsMouseDown(false);\n    setMouseDownOn(null);\n  };\n  const onWheel = (e: WheelEvent, type?: string): void => {\n    e.preventDefault();\n\n    const { deltaY } = e;\n    const top = window.scrollX;\n    const left = window.scrollY;\n\n    window.scrollTo({ top, left });\n    if (type) {\n      changeItem(type, deltaY < 0 ? -1 : 1);\n    }\n  };\n\n  const onTouchEnd = (e: TouchEvent, startY: number, startTime: number, touchType: string): void => {\n    const { timeStamp, changedTouches } = e;\n    const { pageY } = changedTouches[0];\n\n    const path = Math.abs(startY - pageY); // in px\n    const time = timeStamp - startTime; // ms\n    const pxPerMs = path / time;\n\n    if (pxPerMs > 0.65)\n      innertionScroll({ startY, pageY, timeStamp, startTime, touchType });\n    else setTouchType(null);\n\n    setTouchY(null);\n  };\n\n  const onTouchStart = (e: TouchEvent, type: string): void => {\n    e.preventDefault();\n\n    if (intervalRef?.current) {\n      clearInterval(intervalRef?.current);\n      intervalRef.current = null;\n    }\n\n    const { timeStamp, changedTouches } = e;\n    const { pageY } = changedTouches[0];\n\n    setTouchY(pageY);\n    setTouchTimestamp(timeStamp);\n    setTouchType(type);\n\n    window.addEventListener(\n      'touchend',\n      e => onTouchEnd(e, pageY, timeStamp, type),\n      { once: true },\n    );\n  };\n  const onTouchMove = (e: React.TouchEvent<HTMLDivElement>): void => {\n    if (!touchY || !touchType) return;\n\n    const { timeStamp, changedTouches } = e;\n    const { pageY } = changedTouches[0];\n\n    const deltaY = Number(touchY) - pageY;\n\n    if (Math.abs(deltaY) < listItemHeight) return;\n\n    const direction = deltaY < 0 ? -1 : 1;\n\n    setScrollDirection(direction);\n\n    changeItem(String(touchType), direction);\n    setTouchY(pageY);\n    setTouchTimestamp(timeStamp);\n  };\n\n  function innertionScroll({\n    startY,\n    pageY,\n    timeStamp,\n    startTime,\n    touchType,\n  }: {\n    startY: number;\n    pageY: number;\n    timeStamp: number;\n    startTime: number;\n    touchType: string;\n  }): void {\n    const path = Math.abs(startY - pageY); // in px\n    const time = timeStamp - startTime; // ms\n    const pxPerMs = Math.ceil(path / time); // speed\n\n    const S = (pxPerMs / 2) * time;\n    const blocks = Math.ceil((S / listItemHeight) * pxPerMs);\n\n    let i = 1;\n\n    intervalRef.current = setInterval(() => {\n      if (\n        checkAvailability(touchType, startY - pageY < 0 ? -1 : 1)\n        && i <= blocks\n      ) {\n        changeItem(touchType, startY - pageY < 0 ? -1 : 1);\n      }\n      else {\n        setTouchType(null);\n        if (intervalRef?.current) {\n          clearInterval(intervalRef.current);\n          intervalRef.current = null;\n        }\n        intervalRef.current = null;\n      }\n\n      ++i;\n    }, timeout);\n\n    // for(let i = 1; i <= blocks; ++i){\n    //   // timeout = i*pxPerMs+Math.pow(i,2)*10;\n    //   timeout += 80;\n    //   if(checkAvailability(touchType, startY-pageY < 0 ? -1 : 1, date)){\n    //     setTimeout(() => {\n    //       console.log({timeout})\n    //       changeItem(touchType, startY-pageY < 0 ? -1 : 1);\n    //     }, timeout)\n    //   }\n\n    // }\n  };\n\n  // --FUNCTIONS--//\n  // const intervalWorker = (): void => {\n  //   if (!mouseDownOn) return;\n\n  //   const { type, value } = mouseDownOn;\n  //   changeItem(type, value);\n  // };\n  const getList = (type: string, format: string): string[] => {\n    const list: string[] = [];\n\n    const renderRows = rows;\n\n    for (let i = (renderRows - 1) / 2; i >= ((renderRows - 1) / 2) * -1; --i) {\n      list.push(moment(date).subtract(i, (type as DurationInputArg2)).format(format));\n    }\n\n    return list;\n  };\n  const getMonthList = (): string[] => getList('months', 'MMMM');\n  const getDaysList = (): string[] => getList('days', 'D');\n  const getYearsList = (): string[] => getList('years', 'YYYY');\n\n  // --OBSERVERS--//\n  useEffect(() => {\n    if (moment(date.format('L'), 'L', true).isBefore(minDate.format('L'), 'day'))\n      setDate(minDate);\n    if (moment(date.format('L'), 'L', true).isAfter(maxDate.format('L'), 'day')) setDate(maxDate);\n  }, []);\n\n  // Events Observer\n  useEffect(() => {\n    document.addEventListener('mouseup', onArrowMouseUp);\n    return () => {\n      document.removeEventListener('mouseup', onArrowMouseUp);\n    };\n  }, []);\n\n  useEffect(() => {\n    onChange(date);\n    dateRef.current = date;\n\n    if (moment(date.format('L'), 'L', true).isSame(minDate.format('L'), 'day'))\n      onMinDateReached(minDate);\n    if (moment(date.format('L'), 'L', true).isSame(maxDate.format('L'), 'day'))\n      onMaxDateReached(maxDate);\n  }, [date]);\n\n  // monthList Events\n  useEffect(() => {\n    if (!monthsListRef?.current) return;\n\n    const handleWheel = (e: Event): void => onWheel(e as WheelEvent, 'months');\n    const handleTouchStart = (e: Event): void => onTouchStart(e as TouchEvent, 'months');\n\n    monthsListRef.current.addEventListener('wheel', handleWheel, { passive: false });\n    monthsListRef.current.addEventListener('touchstart', handleTouchStart, { passive: false });\n\n    return () => {\n      monthsListRef.current?.removeEventListener('wheel', handleWheel);\n      monthsListRef.current?.removeEventListener('touchstart', handleTouchStart);\n    };\n  }, [monthsListRef]);\n\n  // daysList Events\n  useEffect(() => {\n    if (!daysListRef?.current) return;\n\n    const handleWheel = (e: Event): void => onWheel(e as WheelEvent, 'days');\n    const handleTouchStart = (e: Event): void => onTouchStart(e as TouchEvent, 'days');\n\n    const el = daysListRef.current;\n\n    el.addEventListener('wheel', handleWheel, { passive: false });\n    el.addEventListener('touchstart', handleTouchStart, { passive: false });\n\n    return () => {\n      el.removeEventListener('wheel', handleWheel);\n      el.removeEventListener('touchstart', handleTouchStart);\n    };\n  }, [daysListRef]);\n\n  // yearsList Events\n  useEffect(() => {\n    if (!yearsListRef?.current) return;\n\n    const handleWheel = (e: Event): void => onWheel(e as WheelEvent, 'years');\n    const handleTouchStart = (e: Event): void => onTouchStart(e as TouchEvent, 'years');\n\n    const el = yearsListRef.current as HTMLElement;\n\n    el.addEventListener('wheel', handleWheel, { passive: false });\n    el.addEventListener('touchstart', handleTouchStart, { passive: false });\n\n    return () => {\n      el.removeEventListener('wheel', handleWheel);\n      el.removeEventListener('touchstart', handleTouchStart);\n    };\n  }, [yearsListRef]);\n\n  // --RENDER--//\n  const renderMonthsList = (): ReactNode => {\n    const half = (rows - 1) / 2;\n    return getMonthList().map((month, i) => (\n      <div\n        className={`mobile-calendar_wrapper_body_months-list--item ${i === half ? 'active' : ''} ${\n          i === 0 || i === rows - 1 ? 'transparent' : ''\n        } ${classes?.monthsListItem} ${i === half ? classes?.activeItem : ''}`}\n        key={`month-${month}`}\n        onClick={\n          touchY\n            ? undefined\n            : () => (i - half === 0 ? {} : changeItem('months', i - half))\n        }\n        attr-scroll-direction={touchType === 'months' ? scrollDirection : 0}\n        attr-is-scrolling={touchType === 'months' ? 1 : 0}\n      >\n        {month}\n      </div>\n    ));\n  };\n  const renderDaysList = (): ReactNode => {\n    const half = (rows - 1) / 2;\n    return getDaysList().map((day, i) => (\n      <div\n        className={`mobile-calendar_wrapper_body_days-list--item ${i === half ? 'active' : ''} ${\n          i === 0 || i === rows - 1 ? 'transparent' : ''\n        } ${classes?.daysListItem} ${i === half ? classes?.activeItem : ''}`}\n        key={`day-${day}`}\n        onClick={() => (i - half === 0 ? {} : changeItem('days', i - half))}\n        attr-scroll-direction={touchType === 'days' ? scrollDirection : 0}\n        attr-is-scrolling={touchType === 'days' ? 1 : 0}\n      >\n        {day}\n      </div>\n    ));\n  };\n  const renderYearsList = (): ReactNode => {\n    const half = (rows - 1) / 2;\n    return getYearsList().map((year, i) => (\n      <div\n        className={`mobile-calendar_wrapper_body_years-list--item ${i === half ? 'active' : ''} ${\n          i === 0 || i === rows - 1 ? 'transparent' : ''\n        } ${classes?.yearsListItem} ${i === half ? classes?.activeItem : ''}`}\n        key={`year-${year}`}\n        onClick={() => (i - half === 0 ? {} : changeItem('years', i - half))}\n        attr-scroll-direction={touchType === 'years' ? scrollDirection : 0}\n        attr-is-scrolling={touchType === 'years' ? 1 : 0}\n      >\n        {year}\n      </div>\n    ));\n  };\n\n  const renderMonthsBlock = (): ReactNode => {\n    return (\n      <div\n        className={`mobile-calendar_wrapper_body_months ${classes?.monthsBlock}`}\n      >\n        <div\n          className={`mobile-calendar_wrapper_body_months--prev ${classes?.prevItem}`}\n        >\n          <ChevronUp\n            onClick={() => changeItem('months', -1)}\n            onMouseDown={() => onArrowMouseDown('months', -1)}\n            onMouseUp={onArrowMouseUp}\n          />\n        </div>\n        <div\n          className={`mobile-calendar_wrapper_body_months-list ${classes?.monthsList}`}\n          ref={monthsListRef}\n        >\n          {renderMonthsList()}\n          {isMobile && (\n            <div className=\"mobile-calendar_wrapper_body_months-list_touch-zone\"></div>\n          )}\n        </div>\n        <div\n          className={`mobile-calendar_wrapper_body_months--next ${classes?.nextItem}`}\n        >\n          <ChevronDown\n            onClick={() => changeItem('months', 1)}\n            onMouseDown={() => onArrowMouseDown('months', 1)}\n            onMouseUp={onArrowMouseUp}\n          />\n        </div>\n      </div>\n    );\n  };\n  const renderDaysBlock = (): ReactNode => {\n    return (\n      <div\n        className={`mobile-calendar_wrapper_body_days ${classes?.daysBlock}`}\n      >\n        <div\n          className={`mobile-calendar_wrapper_body_days--prev ${classes?.prevItem}`}\n        >\n          <ChevronUp\n            onClick={() => changeItem('days', -1)}\n            onMouseDown={() => onArrowMouseDown('days', -1)}\n            onMouseUp={onArrowMouseUp}\n          />\n        </div>\n        <div\n          className={`mobile-calendar_wrapper_body_days-list ${classes?.daysList}`}\n          ref={daysListRef}\n        >\n          {renderDaysList()}\n          {isMobile && (\n            <div className=\"mobile-calendar_wrapper_body_days-list_touch-zone\"></div>\n          )}\n        </div>\n        <div\n          className={`mobile-calendar_wrapper_body_days--next ${classes?.nextItem}`}\n        >\n          <ChevronDown\n            onClick={() => changeItem('days', 1)}\n            onMouseDown={() => onArrowMouseDown('days', 1)}\n            onMouseUp={onArrowMouseUp}\n          />\n        </div>\n      </div>\n    );\n  };\n  const renderYearsBlock = (): ReactNode => {\n    return (\n      <div\n        className={`mobile-calendar_wrapper_body_years ${classes?.yearsBlock}`}\n      >\n        <div\n          className={`mobile-calendar_wrapper_body_years--prev ${classes?.prevItem}`}\n        >\n          <ChevronUp\n            onClick={() => changeItem('years', -1)}\n            onMouseDown={() => onArrowMouseDown('years', -1)}\n            onMouseUp={onArrowMouseUp}\n          />\n        </div>\n        <div\n          className={`mobile-calendar_wrapper_body_years-list ${classes?.yearsList}`}\n          ref={yearsListRef}\n        >\n          {renderYearsList()}\n          {isMobile && (\n            <div className=\"mobile-calendar_wrapper_body_years-list_touch-zone\"></div>\n          )}\n        </div>\n        <div\n          className={`mobile-calendar_wrapper_body_years--next ${classes?.nextItem}`}\n        >\n          <ChevronDown\n            onClick={() => changeItem('years', 1)}\n            onMouseDown={() => onArrowMouseDown('years', 1)}\n            onMouseUp={onArrowMouseUp}\n          />\n        </div>\n      </div>\n    );\n  };\n\n  return (\n    <div\n      className={`mobile-calendar_wrapper ${classes?.wrapper}`}\n      onTouchMove={(e: React.TouchEvent<HTMLDivElement>) => onTouchMove(e)}\n    >\n      <div className={`mobile-calendar_wrapper_label ${classes?.label}`}>\n        {label}\n      </div>\n      {showSelectedDate && (\n        <div className={`mobile-calendar_wrapper_label  ${classes?.label}`}>\n          {moment(date).format('LL')}\n        </div>\n      )}\n      <div className={`mobile-calendar_wrapper_body  ${classes?.body}`}>\n        {renderMonthsBlock()}\n        {renderDaysBlock()}\n        {renderYearsBlock()}\n      </div>\n    </div>\n  );\n}\n\nexport default MobileCalendar;\n"],"mappings":"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"}

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

@@ -0,0 +1,74 @@
+.unselectable, .mobile-calendar_wrapper {
+  -webkit-touch-callout: none;
+  user-select: none;
+}
+
+.mobile-calendar_wrapper {
+  max-width: 350px;
+  padding: 10px;
+  border-radius: 16px;
+  background: #f8fbff;
+  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.0784313725);
+}
+.mobile-calendar_wrapper_label {
+  margin: 16px 0;
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center;
+}
+.mobile-calendar_wrapper_body {
+  display: flex;
+  justify-content: space-between;
+}
+.mobile-calendar_wrapper_body_months, .mobile-calendar_wrapper_body_days, .mobile-calendar_wrapper_body_years {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.mobile-calendar_wrapper_body_months--prev, .mobile-calendar_wrapper_body_months--next, .mobile-calendar_wrapper_body_days--prev, .mobile-calendar_wrapper_body_days--next, .mobile-calendar_wrapper_body_years--prev, .mobile-calendar_wrapper_body_years--next {
+  cursor: pointer;
+  color: #a6aab4;
+}
+.mobile-calendar_wrapper_body_months-list, .mobile-calendar_wrapper_body_days-list, .mobile-calendar_wrapper_body_years-list {
+  position: relative;
+  overflow: hidden;
+}
+.mobile-calendar_wrapper_body_months-list--item, .mobile-calendar_wrapper_body_days-list--item, .mobile-calendar_wrapper_body_years-list--item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 90px;
+  height: 32px;
+  cursor: pointer;
+  color: #3b414b;
+}
+.mobile-calendar_wrapper_body_months-list--item:not(.active), .mobile-calendar_wrapper_body_days-list--item:not(.active), .mobile-calendar_wrapper_body_years-list--item:not(.active) {
+  transition: transform 1s;
+}
+.mobile-calendar_wrapper_body_months-list--item:not(.active)[attr-scroll-direction="1"], .mobile-calendar_wrapper_body_days-list--item:not(.active)[attr-scroll-direction="1"], .mobile-calendar_wrapper_body_years-list--item:not(.active)[attr-scroll-direction="1"] {
+  transform: translateY(25%);
+}
+.mobile-calendar_wrapper_body_months-list--item:not(.active)[attr-scroll-direction="-1"], .mobile-calendar_wrapper_body_days-list--item:not(.active)[attr-scroll-direction="-1"], .mobile-calendar_wrapper_body_years-list--item:not(.active)[attr-scroll-direction="-1"] {
+  transform: translateY(-25%);
+}
+.mobile-calendar_wrapper_body_months-list--item:not(.active)[attr-is-scrolling="1"], .mobile-calendar_wrapper_body_days-list--item:not(.active)[attr-is-scrolling="1"], .mobile-calendar_wrapper_body_years-list--item:not(.active)[attr-is-scrolling="1"] {
+  opacity: 0.3;
+}
+.mobile-calendar_wrapper_body_months-list--item.active, .mobile-calendar_wrapper_body_days-list--item.active, .mobile-calendar_wrapper_body_years-list--item.active {
+  box-sizing: border-box;
+  border: 1px solid #fff;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 4px 26px rgba(0, 67, 96, 0.1);
+}
+.mobile-calendar_wrapper_body_months-list--item.transparent, .mobile-calendar_wrapper_body_days-list--item.transparent, .mobile-calendar_wrapper_body_years-list--item.transparent {
+  opacity: 0.5;
+}
+.mobile-calendar_wrapper_body_months-list_touch-zone, .mobile-calendar_wrapper_body_days-list_touch-zone, .mobile-calendar_wrapper_body_years-list_touch-zone {
+  position: absolute;
+  z-index: 5;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}

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

@@ -0,0 +1,40 @@
+import '../../../styles/base.css';
+import CheckboxInput from "../CheckboxInput/CheckboxInput.js";
+import Input from "../Input/Input.js";
+import './MultiSelect.styles.css';/* empty css                 */
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Atomic/FormElements/MultiSelect/MultiSelect.tsx
+var MultiSelect = ({ options, chosenOptions, onChange }) => {
+	const [searchValue, setSearchValue] = useState("");
+	const checkHandler = (state, value) => {
+		if (state) onChange([...chosenOptions, value]);
+		else onChange(chosenOptions.filter((item) => item !== value));
+	};
+	const filteredOptions = options.filter(({ label }) => label.toLowerCase().includes(searchValue.toLowerCase()));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "multiselect",
+		"data-testid": "multiselect-root",
+		children: [/* @__PURE__ */ jsx(Input, {
+			value: searchValue,
+			onChange: (value) => setSearchValue(value),
+			placeholder: "Search",
+			testId: "multiselect-search"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "multiselect__list",
+			"data-testid": "multiselect-list",
+			children: filteredOptions.map(({ label, value, id }) => /* @__PURE__ */ jsx(CheckboxInput, {
+				id,
+				value: chosenOptions.includes(value),
+				label,
+				onChange: (state) => checkHandler(state, value),
+				className: "multiselect__item",
+				testId: `multiselect-item-${id}`
+			}, id))
+		})]
+	});
+};
+//#endregion
+export { MultiSelect as default };
+
+//# sourceMappingURL=MultiSelect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.js","names":[],"sources":["../../../../../src/Atomic/FormElements/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport CheckboxInput from '../CheckboxInput/CheckboxInput';\nimport Input from '../Input/Input';\nimport './MultiSelect.scss';\n\nexport interface MultiSelectOption {\n  label: string;\n  value: string;\n  id: string | number;\n}\n\nexport interface MultiSelectProps {\n  options: MultiSelectOption[];\n  chosenOptions: string[];\n  onChange: (values: string[]) => void;\n}\n\nconst MultiSelect: React.FC<MultiSelectProps> = ({ options, chosenOptions, onChange }) => {\n  const [searchValue, setSearchValue] = useState('');\n\n  const checkHandler = (state: boolean, value: string): void => {\n    if (state) {\n      onChange([...chosenOptions, value]);\n    }\n    else {\n      onChange(chosenOptions.filter(item => item !== value));\n    }\n  };\n\n  const filteredOptions = options.filter(({ label }) =>\n    label.toLowerCase().includes(searchValue.toLowerCase()),\n  );\n\n  return (\n    <div className=\"multiselect\" data-testid=\"multiselect-root\">\n      <Input\n        value={searchValue}\n        onChange={(value: string) => setSearchValue(value)}\n        placeholder=\"Search\"\n        testId=\"multiselect-search\"\n      />\n      <div className=\"multiselect__list\" data-testid=\"multiselect-list\">\n        {filteredOptions.map(({ label, value, id }) => (\n          <CheckboxInput\n            key={id}\n            id={id}\n            value={chosenOptions.includes(value)}\n            label={label}\n            onChange={(state: boolean) => checkHandler(state, value)}\n            className=\"multiselect__item\"\n            testId={`multiselect-item-${id}`}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default MultiSelect;\n"],"mappings":";;;;;;AAiBA,IAAM,eAA2C,EAAE,SAAS,eAAe,eAAe;CACxF,MAAM,CAAC,aAAa,kBAAkB,SAAS,EAAE;CAEjD,MAAM,gBAAgB,OAAgB,UAAwB;EAC5D,IAAI,OACF,SAAS,CAAC,GAAG,eAAe,KAAK,CAAC;OAGlC,SAAS,cAAc,QAAO,SAAQ,SAAS,KAAK,CAAC;CAEzD;CAEA,MAAM,kBAAkB,QAAQ,QAAQ,EAAE,YACxC,MAAM,YAAY,CAAC,CAAC,SAAS,YAAY,YAAY,CAAC,CACxD;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAc,eAAY;YAAzC,CACE,oBAAC,OAAD;GACE,OAAO;GACP,WAAW,UAAkB,eAAe,KAAK;GACjD,aAAY;GACZ,QAAO;EACR,CAAA,GACD,oBAAC,OAAD;GAAK,WAAU;GAAoB,eAAY;aAC5C,gBAAgB,KAAK,EAAE,OAAO,OAAO,SACpC,oBAAC,eAAD;IAEM;IACJ,OAAO,cAAc,SAAS,KAAK;IAC5B;IACP,WAAW,UAAmB,aAAa,OAAO,KAAK;IACvD,WAAU;IACV,QAAQ,oBAAoB;GAC7B,GAPM,EAON,CACF;EACE,CAAA,CACF;;AAET"}

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

@@ -0,0 +1,14 @@
+.multiselect {
+  display: inline-flex;
+  flex-direction: column;
+  padding: 8px 10px;
+  border: 1px solid #e2e5ec;
+  border-radius: 4px;
+  background-color: #fff;
+}
+.multiselect__item {
+  height: 24px;
+}
+.multiselect__list {
+  margin-top: 4px;
+}