armtek-uikit-react 1.0.267 → 1.0.268

package/lib/cjs/ui/Form/DateField/DateField.cjs

@@ -0,0 +1,158 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const ui_Form_TextField_TextField = require("../TextField/TextField.cjs");
+const React = require("react");
+const ui_Card_Card = require("../../Card/Card.cjs");
+const ui_Form_DatePicker_DatePicker = require("../DatePicker/DatePicker.cjs");
+const ui_ButtonIcon_ButtonIcon = require("../../ButtonIcon/ButtonIcon.cjs");
+const ui_BackDrop_BackDrop = require("../../BackDrop/BackDrop.cjs");
+const ui_Popper_PopperBase = require("../../Popper/PopperBase.cjs");
+const lib_services_DateService = require("../../../lib/services/DateService.cjs");
+const getDateFormat = (format) => {
+  let out = {};
+  if (!format) return out;
+  if (format.includes("dd")) out.day = "2-digit";
+  if (format.includes("MM")) out.month = "2-digit";
+  if (format.includes("yyyy")) out.year = "numeric";
+  if (format.includes("HH")) out.hour = "2-digit";
+  if (format.includes("mm")) out.minute = "2-digit";
+  return out;
+};
+const dateToText = (d, format) => {
+  if (!d) return "";
+  if (typeof d === "string") d = new Date(d);
+  return d.toLocaleString("ru-RU", getDateFormat(format));
+};
+const DateField = React.forwardRef((props, ref) => {
+  let {
+    onChange,
+    inputProps,
+    onInput,
+    label,
+    placeholder,
+    className,
+    showTime,
+    error,
+    helperText,
+    showTimeOnly,
+    disabled,
+    value,
+    ...datepickerProps
+  } = props;
+  let format = "dd.MM.yyyy";
+  if (showTime && !showTimeOnly) format = "dd.MM.yyyy HH:mm";
+  else if (showTimeOnly) format = "HH:mm";
+  const [date, setDate] = React.useState(null);
+  const [open, setOpen] = React.useState(false);
+  const [text, setText] = React.useState(dateToText(value, format));
+  React.useEffect(() => {
+    if (value) setText(dateToText(value, format));
+  }, [value]);
+  const handleChange = (d) => {
+    setDate(d);
+    if (!showTime || showTime && d && d.getHours() > 0) setOpen(false);
+    if (onChange) {
+      const e = new Event("input", {
+        bubbles: true
+      });
+      Object.defineProperty(e, "target", {
+        writable: false,
+        value: {
+          name: props.name,
+          value: d
+        }
+      });
+      onChange(e);
+    }
+  };
+  const handleClick = (e) => {
+    setOpen((prev) => !prev);
+    if (props.onClick) props.onClick(e);
+  };
+  const btnRef = React.useRef();
+  const inputIcon = showTime && showTimeOnly ? "schedule" : "calendar_today";
+  const handleSelectDate = (date2) => {
+    setText(dateToText(date2, format));
+    handleChange(date2);
+  };
+  const processChange = (value2) => {
+    if (disabled) return;
+    const bs = (text.endsWith(".") || text.endsWith(" ") || text.endsWith(":")) && text.length > value2.length;
+    let matcher = /^\d{2}\.\d{2}\.\d{4}$/;
+    if (!bs) {
+      value2 = value2.replace(/[^\d ]/g, "");
+      if (showTimeOnly) {
+        matcher = /^\d{2}:\d{2}$/;
+        value2 = value2.replace(/^(\d{2})/, "$1:").replace(/^(\d{2}):(\d{2})(\d)$/, "$1:$2");
+      } else {
+        value2 = value2.replace(/[^\d ]/g, "").replace(/^(\d{2})/, "$1.").replace(/^(\d{2})\.(\d{2})/, "$1.$2.").replace(/^(\d{2})\.(\d{2})\.(\d{4})/, "$1.$2.$3");
+        if (showTime) {
+          value2 = value2.replace(/^(\d{2})\.(\d{2})\.(\d{4})(\d)/, "$1.$2.$3 $4").replace(/^(\d{2})\.(\d{2})\.(\d{4}) (\d{2})/, "$1.$2.$3 $4:").replace(/^(\d{2})\.(\d{2})\.(\d{4})(\d{2})/, "$1.$2.$3 $4:").replace(/^(\d{2})\.(\d{2})\.(\d{4}) (\d{2}):(\d{2})/, "$1.$2.$3 $4:$5").replace(/^(\d{2})\.(\d{2})\.(\d{4}) (\d{2}):(\d{2})(\d)/, "$1.$2.$3 $4:$5");
+          matcher = /\d{2}\.\d{2}\.\d{4} \d{2}:\d{2}/;
+        } else value2 = value2.replace(/^(\d{2})\.(\d{2})\.(\d{4})(\d)/, "$1.$2.$3");
+      }
+    }
+    setText(value2);
+    setDate(null);
+    if (!bs && value2.match(new RegExp(matcher))) {
+      const dateAndTimeParts = value2.split(" ");
+      const dateParts = dateAndTimeParts[0].split(".");
+      let parseString = "";
+      let timestamp;
+      if (showTimeOnly) {
+        const today = /* @__PURE__ */ new Date();
+        const hourParts = value2.split(":").map(Number);
+        today.setHours(hourParts[0], hourParts[1], hourParts[2] || 0, 0);
+        timestamp = today.getTime();
+      } else {
+        parseString = `${dateParts[2]}-${dateParts[1]}-${dateParts[0]}`;
+        if (showTime) parseString = parseString + ` ${dateAndTimeParts[1]}`;
+        timestamp = Date.parse(parseString);
+      }
+      if (isNaN(timestamp) === false) {
+        const d = new Date(timestamp);
+        if (datepickerProps.minDate && lib_services_DateService.isDateBigger(datepickerProps.minDate, d)) {
+          setText("");
+          handleChange(null);
+        } else if (datepickerProps.maxDate && lib_services_DateService.isDateBigger(d, datepickerProps.maxDate)) {
+          setText("");
+          handleChange(null);
+        } else {
+          setText(d.toLocaleString("ru-RU", getDateFormat(format)));
+          handleChange(d);
+        }
+      } else {
+        setText("");
+        handleChange(null);
+      }
+    } else {
+      handleChange(null);
+    }
+  };
+  const handleChangeText = (e) => {
+    processChange(e.target.value);
+  };
+  const handlePaste = (e) => {
+    processChange(e.currentTarget.value);
+  };
+  let realValue = value !== void 0 ? value : date;
+  let dateValue = typeof realValue === "string" ? new Date(realValue) : realValue;
+  if (!(dateValue instanceof Date && !isNaN(dateValue.getDate()))) dateValue = null;
+  const calendarBtn = /* @__PURE__ */ jsxRuntime.jsx(ui_ButtonIcon_ButtonIcon.default, { disabled, size: "medium", variant: "transparent", onClick: handleClick, color: "neutral", "data-testid": "datefield-btn", children: /* @__PURE__ */ jsxRuntime.jsx("span", { ref: btnRef, className: "material_icon", children: inputIcon }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui_Form_TextField_TextField.TextField, { ref, label, placeholder, className, error, helperText, ...inputProps, value: text || "", disabled, onChange: handleChangeText, onPaste: handlePaste, endAdornment: calendarBtn }),
+    open && /* @__PURE__ */ jsxRuntime.jsx(ui_BackDrop_BackDrop.default, { onClick: () => setOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(ui_Popper_PopperBase.PopperBase, { anchorEl: btnRef.current, className: "arm-datefield-popper", open, placement: "bottom-end", children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      backgroundColor: "#fff",
+      width: "100%"
+    }, children: /* @__PURE__ */ jsxRuntime.jsx(ui_Form_DatePicker_DatePicker.default, { timeIntervals: 15, calendarContainer: PickerCard, popperPlacement: "top-end", dateFormat: format, ...datepickerProps, onChange: handleSelectDate, selected: dateValue, showTimeSelect: !!showTime, showTimeSelectOnly: !!showTimeOnly && !!showTime, disabled, inline: true }) }) }) })
+  ] });
+});
+const PickerCard = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui_Card_Card.default, { style: {
+    zIndex: 6
+  }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: props.className, children: props.children }) });
+};
+exports.DateField = DateField;
+exports.default = DateField;
+exports.getDateFormat = getDateFormat;

package/lib/cjs/ui/Form/DateField/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const ui_Form_DateField_DateField = require("./DateField.cjs");
+exports.default = ui_Form_DateField_DateField.DateField;

package/lib/cjs/ui/Form/DateField.cjs

@@ -0,0 +1,2 @@
+'use strict'
+module.exports = require('./DateField/index.cjs')

package/lib/cjs/ui/Form/DatePicker/DatePicker.cjs

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const ReactDatePicker = require("react-datepicker");
+;/* empty css             */
+const ru = require("date-fns/locale/ru");
+const format = require("date-fns/format");
+const ui_ButtonIcon_ButtonIcon = require("../../ButtonIcon/ButtonIcon.cjs");
+const ui_Stack_Stack = require("../../Stack/Stack.cjs");
+const ui_Form_Select_Select = require("../Select/Select.cjs");
+const clsx = require("clsx");
+require("../../Button/Button.cjs");
+const renderDayContents = (day) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "customDay", children: day });
+};
+const DatePicker = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ui-datepicker", children: /* @__PURE__ */ jsxRuntime.jsx(
+    ReactDatePicker,
+    {
+      ref,
+      locale: ru.ru,
+      inline: true,
+      renderDayContents,
+      ...props,
+      renderCustomHeader: (headerProps) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(PickerHeader, { ...headerProps, ...props });
+      }
+    }
+  ) }) });
+});
+function range(end, start) {
+  const numbers = [];
+  for (let i = end; i <= start; i++) {
+    numbers.push(i);
+  }
+  numbers.reverse();
+  return numbers;
+}
+function getYear(date) {
+  return date.getFullYear();
+}
+function getMonth(date) {
+  return date.getMonth();
+}
+const getMonthNames = () => {
+  const months2 = [];
+  for (let i = 0; i < 12; i++) {
+    const date = /* @__PURE__ */ new Date();
+    date.setMonth(i);
+    months2.push(format.format(date, "LLLL", {
+      locale: ru.ru
+    }));
+  }
+  return months2;
+};
+const getYears = (minYear, maxYear) => {
+  return range(minYear, maxYear);
+};
+const months = getMonthNames();
+const PickerHeader = (props) => {
+  const {
+    decreaseMonth,
+    prevMonthButtonDisabled,
+    date,
+    changeYear,
+    changeMonth,
+    increaseMonth,
+    nextMonthButtonDisabled,
+    maxDate,
+    minDate
+  } = props;
+  const years = getYears(minDate ? minDate.getFullYear() : 1920, maxDate ? maxDate.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear() + 5);
+  const showMonthPickerProp = props.showMonthDropdown !== false && "showMonthDropdown" in props;
+  const showYearPickerProp = props.showYearDropdown !== false && "showYearDropdown" in props;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui_Stack_Stack.default, { spacing: "small", center: true, className: "justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui_ButtonIcon_ButtonIcon.default, { size: "small", mi: "keyboard_arrow_left", onClick: decreaseMonth, disabled: prevMonthButtonDisabled }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "react-datepicker__current-month", children: format.format(date, "LLLL yyyy", {
+        locale: ru.ru
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui_ButtonIcon_ButtonIcon.default, { size: "small", mi: "keyboard_arrow_right", onClick: increaseMonth, disabled: nextMonthButtonDisabled })
+    ] }),
+    (showMonthPickerProp || showYearPickerProp) && /* @__PURE__ */ jsxRuntime.jsxs(ui_Stack_Stack.default, { spacing: "small", center: true, className: "justify-center", children: [
+      showYearPickerProp && /* @__PURE__ */ jsxRuntime.jsx(ui_Form_Select_Select.default, { className: "arm-datepicker__select", size: "small", classes: {
+        root: "arm-datepicker__select_root",
+        wrapper: "arm-datepicker__select-wrapper"
+      }, variant: "outlined", value: String(getYear(date)), onChange: ({
+        target: {
+          value
+        }
+      }) => changeYear(value), options: years.map((item) => ({
+        value: String(item),
+        text: String(item)
+      })), optionClassName: "arm-datepicker__select-option" }),
+      showMonthPickerProp && /* @__PURE__ */ jsxRuntime.jsx(ui_Form_Select_Select.default, { className: clsx("arm-datepicker__select", "arm-datepicker__select_month"), classes: {
+        root: "arm-datepicker__select_root",
+        wrapper: "arm-datepicker__select-wrapper"
+      }, size: "small", variant: "outlined", value: String(months[getMonth(date)]), onChange: ({
+        target: {
+          value
+        }
+      }) => changeMonth(months.indexOf(value)), options: months.map((item) => ({
+        value: String(item),
+        text: String(item)
+      })), optionClassName: "arm-datepicker__select-option" })
+    ] })
+  ] });
+};
+exports.default = DatePicker;

package/lib/cjs/ui/Form/DatePicker/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const ui_Form_DatePicker_DatePicker = require("./DatePicker.cjs");
+exports.default = ui_Form_DatePicker_DatePicker.default;

package/lib/cjs/ui/Form/DatePicker.cjs

@@ -0,0 +1,2 @@
+'use strict'
+module.exports = require('./DatePicker/index.cjs')

package/lib/cjs/ui/Form/FormControls/FormControls.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const clsx = require("clsx");
+const ui_Button_Button = require("../../Button/Button.cjs");
+const ui_Form_FormControls_const = require("./const.cjs");
+const FormControls = (props) => {
+  const {
+    onSubmit,
+    onCancel,
+    submitProps,
+    cancelProps,
+    className,
+    classes,
+    ...divProps
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx(ui_Form_FormControls_const.FORM_CONTROLS_CLASSNAME), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "form-controls", ...divProps, className: clsx(className, "arm-form-controls__stack"), children: [
+    (onSubmit || (submitProps == null ? void 0 : submitProps.type) === "submit") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "arm-form-controls__button", children: /* @__PURE__ */ jsxRuntime.jsx(ui_Button_Button.default, { "data-testid": "form-controls-submit", variant: "contained", color: "primary", onClick: onSubmit, ...submitProps, className: clsx("arm-form-controls__btn", classes == null ? void 0 : classes.submitBtn), children: submitProps == null ? void 0 : submitProps.text }) }),
+    onCancel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "arm-form-controls__button", children: /* @__PURE__ */ jsxRuntime.jsx(ui_Button_Button.default, { "data-testid": "form-controls-cancel", variant: "outlined", color: "primary", onClick: onCancel, ...cancelProps, className: clsx("arm-form-controls__btn", classes == null ? void 0 : classes.cancelBtn), children: cancelProps == null ? void 0 : cancelProps.text }) })
+  ] }) });
+};
+exports.default = FormControls;

package/lib/cjs/ui/Form/FormControls/const.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const FORM_CONTROLS_CLASSNAME = "arm-form-controls";
+const FORM_CONTROLS_SKIP_REPLACE_CLASSNAME = "_skip_replace";
+exports.FORM_CONTROLS_CLASSNAME = FORM_CONTROLS_CLASSNAME;
+exports.FORM_CONTROLS_SKIP_REPLACE_CLASSNAME = FORM_CONTROLS_SKIP_REPLACE_CLASSNAME;

package/lib/cjs/ui/Form/FormControls/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const ui_Form_FormControls_FormControls = require("./FormControls.cjs");
+exports.default = ui_Form_FormControls_FormControls.default;

package/lib/cjs/ui/Form/FormControls.cjs

@@ -0,0 +1,2 @@
+'use strict'
+module.exports = require('./FormControls/index.cjs')

package/lib/cjs/ui/Form/Interval/Interval.cjs

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const ui_Form_TextField_TextField = require("../TextField/TextField.cjs");
+const ui_HelperText_HelperText = require("../../HelperText/HelperText.cjs");
+function Interval(props) {
+  const {
+    value,
+    defaultValue,
+    labelStart,
+    labelEnd,
+    onChange,
+    helperText,
+    error,
+    disabled,
+    min = 0,
+    max = 0,
+    range,
+    ...inputProps
+  } = props;
+  const [focused, setFocused] = React.useState(false);
+  const [currentMin, setCurrentMin] = React.useState(min);
+  const [currentMax, setCurrentMax] = React.useState(!range ? min : max);
+  const handleChange = (v, type) => {
+    if (type === "max") {
+      setCurrentMax(v);
+      onChange == null ? void 0 : onChange([Array.isArray(value) && value.length === 2 ? value[0] : min, v]);
+      return;
+    }
+    if (!range) {
+      setCurrentMax(v);
+      if (onChange) onChange(v);
+    } else {
+      v = v < min ? min : v;
+      setCurrentMin(v);
+      if (onChange) {
+        const changeValue = [v, Array.isArray(value) && value.length === 2 ? value[1] : max];
+        onChange(changeValue);
+      }
+    }
+  };
+  const handleFocus = () => {
+    setFocused(true);
+  };
+  const handleBlur = () => {
+    setFocused(false);
+  };
+  const handleMin = (e) => {
+    let val = 0;
+    if (e.target.value) val = parseInt(e.target.value);
+    if (val > max) return;
+    handleChange(val, "min");
+  };
+  const handleMax = (e) => {
+    let val = max;
+    if (e.target.value) val = parseInt(e.target.value);
+    val = val > max ? max : val;
+    handleChange(val, "max");
+  };
+  let realMin = currentMin;
+  let realMax = currentMax;
+  if (value !== void 0 && Array.isArray(value) && value.length === 2) {
+    realMin = value[0];
+    realMax = value[1];
+  }
+  if (!range) realMin = value !== void 0 ? value : currentMax;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "interval", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui_Form_TextField_TextField.TextFieldContainer, { focused, error, disabled, size: inputProps.size, variant: inputProps.variant, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "arm-interval", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "arm-interval__item", children: /* @__PURE__ */ jsxRuntime.jsx(ui_Form_TextField_TextField.TextFieldInput, { ...inputProps, "data-testid": "interval-input-min", value: realMin, label: labelStart, type: "text", onFocus: handleFocus, onBlur: handleBlur, focused: true, onChange: handleMin }) }),
+      range && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "arm-interval__item", children: /* @__PURE__ */ jsxRuntime.jsx(ui_Form_TextField_TextField.TextFieldInput, { ...inputProps, "data-testid": "interval-input-max", value: realMax, label: labelEnd, type: "text", onFocus: handleFocus, onBlur: handleBlur, className: "arm-interval__end", focused: true, onChange: handleMax }) })
+    ] }) }),
+    helperText && /* @__PURE__ */ jsxRuntime.jsx(ui_HelperText_HelperText.default, { className: "arm-interval__helper", error, children: helperText })
+  ] }) });
+}
+exports.default = Interval;

package/lib/cjs/ui/Form/Interval/IntervalSlide.cjs

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const ui_Form_Interval_Interval = require("./Interval.cjs");
+const React = require("react");
+const ui_Slider_Slider = require("../../Slider/Slider.cjs");
+function IntervalSlide(props) {
+  const {
+    onChange,
+    color,
+    step,
+    ...restProps
+  } = props;
+  const defaultValue = restProps.defaultValue || (restProps.range ? [restProps.min, restProps.max] : restProps.min !== void 0 ? restProps.min : 0);
+  const [currentValue, setCurrentValue] = React.useState(defaultValue);
+  const handleChange = (value) => {
+    let newValue = value;
+    if (onChange) onChange(newValue);
+  };
+  const handleSlide = (value) => {
+    handleChange(value);
+    setCurrentValue(value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui_Form_Interval_Interval.default, { value: currentValue, ...restProps, onChange: handleSlide }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "arm-intervalslide__slider", children: /* @__PURE__ */ jsxRuntime.jsx(ui_Slider_Slider.default, { min: props.min, max: props.max, disabled: props.disabled, color, value: restProps.value !== void 0 ? restProps.value : currentValue, size: props.size, onChange: handleSlide, range: props.range, step }) })
+  ] }) });
+}
+exports.default = IntervalSlide;

package/lib/cjs/ui/Form/Interval/index.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const ui_Form_Interval_Interval = require("./Interval.cjs");
+const ui_Form_Interval_IntervalSlide = require("./IntervalSlide.cjs");
+exports.default = ui_Form_Interval_Interval.default;
+exports.IntervalSlide = ui_Form_Interval_IntervalSlide.default;

package/lib/cjs/ui/Form/Interval.cjs

@@ -0,0 +1,2 @@
+'use strict'
+module.exports = require('./Interval/index.cjs')

package/lib/cjs/ui/Form/Password/Password.cjs

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const ui_Form_TextField_TextField = require("../TextField/TextField.cjs");
+const React = require("react");
+const ui_ButtonIcon_ButtonIcon = require("../../ButtonIcon/ButtonIcon.cjs");
+const Password = React.forwardRef((props, ref) => {
+  let {
+    onChange,
+    ...restProps
+  } = props;
+  let [value, setValue] = React.useState("");
+  let [isPassword, setIsPassword] = React.useState(true);
+  const inputRef = React.useRef(ref);
+  const handleChange = (e) => {
+    setValue(e.target.value);
+    if (onChange) onChange(e);
+  };
+  const handleClick = () => {
+    setIsPassword((prev) => !prev);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(ui_Form_TextField_TextField.TextField, { value, ref: inputRef, ...restProps, type: isPassword ? "password" : "text", onChange: handleChange, endAdornment: /* @__PURE__ */ jsxRuntime.jsx(ui_ButtonIcon_ButtonIcon.default, { size: "medium", variant: "transparent", color: "neutral", onClick: handleClick, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material_icon", children: isPassword ? "visibility_off" : "visibility" }) }) }) });
+});
+exports.Password = Password;
+exports.default = Password;

package/lib/cjs/ui/Form/Password/Password.d.ts

@@ -0,0 +1,20 @@
+export declare const Password: import("react").ForwardRefExoticComponent<{
+    label?: string;
+    size?: Exclude<import("../../../types/theme").SizeType, "extraLarge" | "medium">;
+    variant?: import("../../../types/theme").VariantType;
+    error?: boolean;
+    errorTooltip?: string;
+    success?: boolean;
+    helperText?: string | import("react").ReactNode;
+    endAdornment?: string | import("react").ReactNode;
+    multiline?: boolean;
+    focused?: boolean;
+    editable?: boolean;
+    classes?: Partial<{
+        input: string;
+        root: string;
+        wrapper: string;
+    }>;
+    WrapperProps?: import("react").ComponentPropsWithoutRef<"div">;
+} & Omit<import("react").InputHTMLAttributes<any>, "size"> & import("react").RefAttributes<unknown>>;
+export default Password;

package/lib/cjs/ui/Form/Password/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const ui_Form_Password_Password = require("./Password.cjs");
+exports.default = ui_Form_Password_Password.Password;

package/lib/cjs/ui/Form/Password.cjs

@@ -0,0 +1,2 @@
+'use strict'
+module.exports = require('./Password/index.cjs')

package/lib/cjs/ui/Form/Period/Period.cjs

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const ui_Form_TextField_TextField = require("../TextField/TextField.cjs");
+const React = require("react");
+const ui_ButtonIcon_ButtonIcon = require("../../ButtonIcon/ButtonIcon.cjs");
+const ui_Card_Card = require("../../Card/Card.cjs");
+const ui_Form_DatePicker_DatePicker = require("../DatePicker/DatePicker.cjs");
+const lib_services_DateService = require("../../../lib/services/DateService.cjs");
+const ui_Adornment_Adornment = require("../../Adornment/Adornment.cjs");
+const ui_Popper_Popper = require("../../Popper/Popper.cjs");
+require("@popperjs/core");
+require("clsx");
+const DELIMITER = " - ";
+const format = "dd.MM.yyyy";
+function getPeriodDisplay(date1, date2) {
+  if (date1 && date2) return lib_services_DateService.DateService(date1).format(format) + DELIMITER + lib_services_DateService.DateService(date2).format(format);
+  return "";
+}
+function validateDate(date, minDate, maxDate) {
+  const startParts = date.split(".");
+  const startTimeStamp = Date.parse(`${startParts[2]}-${startParts[1]}-${startParts[0]}`);
+  if (isNaN(startTimeStamp) === false) {
+    const startDate = new Date(startTimeStamp);
+    if (minDate && lib_services_DateService.isDateBigger(minDate, startDate)) return null;
+    else if (maxDate && lib_services_DateService.isDateBigger(startDate, maxDate)) return null;
+    return startDate;
+  }
+  return null;
+}
+const Period = React.forwardRef((props, ref) => {
+  const {
+    onChange,
+    onInput,
+    maxDate,
+    minDate,
+    disableSameDate,
+    value,
+    defaultValue,
+    showYearDropdown,
+    showMonthDropdown,
+    datePickerProps,
+    disabled,
+    ...restProps
+  } = props;
+  const [active, setActive] = React.useState(false);
+  const [currentValue, setCurrentValue] = React.useState(defaultValue || [null, null]);
+  const displayText = defaultValue ? getPeriodDisplay(defaultValue[0], defaultValue[1]) : "";
+  const [textValue, setTextValue] = React.useState(displayText);
+  const btnRef = React.useRef();
+  const [startValue, endValue] = value || [];
+  React.useEffect(() => {
+    if (startValue && endValue) setTextValue(getPeriodDisplay(startValue, endValue));
+    else if (startValue === null && endValue === null) setTextValue("");
+  }, [startValue, endValue]);
+  const handleClick = (e) => {
+    e.stopPropagation();
+    setActive((prev) => !prev);
+  };
+  const handleSelect = (date) => {
+    if (disabled) return;
+    if (date[0] && date[1] && disableSameDate && lib_services_DateService.isDateEqual(date[0], date[1])) {
+      setTextValue("");
+      return;
+    }
+    setCurrentValue(date);
+    if (date[0] && date[1]) setTextValue(getPeriodDisplay(date[0], date[1]));
+    if (date[0] && date[1]) setActive(false);
+    if (onChange) {
+      const e = new Event("input", {
+        bubbles: true
+      });
+      Object.defineProperty(e, "target", {
+        writable: false,
+        value: {
+          name: props.name,
+          value: date
+        }
+      });
+      onChange(e);
+    }
+  };
+  const handleChange = (e) => {
+    if (disabled) return;
+    let value2 = e.target.value;
+    const bs = (textValue.endsWith(".") || textValue.endsWith(" ") || textValue.endsWith("-")) && textValue.length > value2.length;
+    if (!bs) {
+      value2 = value2.replace(/[^\d -.]/g, "").replace(/^(\d{2})$/, "$1.").replace(/^(\d{2})(\d)$/, "$1.$2").replace(/^(\d{2})\.(\d{2})$/, "$1.$2.").replace(/^(\d{2})\.(\d{2})(\d)$/, "$1.$2.$3").replace(/^(\d{2})\.(\d{2})\.(\d{4})$/, "$1.$2.$3" + DELIMITER).replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2})$`), `$1.$2.$3${DELIMITER}$4.`).replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2})(d)$`), `$1.$2.$3${DELIMITER}$4.$5`).replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2}).(\\d{2})$`), "$1.$2.$3 - $4.$5.").replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2}).(\\d{2})(d)$`), "$1.$2.$3 - $4.$5.$6").replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2}).(\\d{2}).(\\d{4})$`), "$1.$2.$3 - $4.$5.$6").replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2}).(\\d{2}).(\\d{4})(\\d)$`), "$1.$2.$3 - $4.$5.$6");
+    }
+    let startDateValid = null;
+    let endDateValid = null;
+    const valueParts = value2.split(DELIMITER);
+    if (valueParts[0].match(/^\d{2}\.\d{2}\.\d{4}$/)) {
+      startDateValid = validateDate(valueParts[0], minDate, maxDate);
+      if (!startDateValid) {
+        setTextValue("");
+        handleSelect([null, null]);
+        return;
+      }
+    }
+    setTextValue(value2);
+    setCurrentValue([null, null]);
+    if (value2.match(new RegExp(`\\d{2}\\.\\d{2}\\.\\d{4}${DELIMITER}\\d{2}\\.\\d{2}\\.\\d{4}`))) {
+      if (valueParts.length === 2) {
+        endDateValid = validateDate(valueParts[1], minDate, maxDate);
+        if (!endDateValid) {
+          setTextValue("");
+        }
+      }
+    }
+    if (startDateValid && endDateValid && startDateValid.getTime() <= endDateValid.getTime()) {
+      handleSelect([startDateValid, endDateValid]);
+    }
+  };
+  const handleBlur = (e) => {
+    setActive(false);
+    const value2 = e.target.value;
+    const valueParts = value2.split(DELIMITER);
+    const startDateValid = valueParts[0] ? validateDate(valueParts[0], minDate, maxDate) : null;
+    const endDateValid = valueParts[1] ? validateDate(valueParts[1], minDate, maxDate) : null;
+    if (!startDateValid || !endDateValid || startDateValid && endDateValid && endDateValid.getTime() < startDateValid.getTime()) {
+      setTextValue("");
+      handleSelect([null, null]);
+    }
+  };
+  const handleClickOutside = (e) => {
+    if (!e.target.closest("[data-calendar-btn]") && !e.target.closest(".arm-datepicker__select-option")) setActive(false);
+  };
+  let realValue = Array.isArray(props.value) ? props.value : currentValue;
+  const endAdornment = /* @__PURE__ */ jsxRuntime.jsxs(ui_Adornment_Adornment.AdornmentContainer, { children: [
+    restProps.endAdornment,
+    /* @__PURE__ */ jsxRuntime.jsx(ui_ButtonIcon_ButtonIcon.default, { "data-calendar-btn": true, size: "medium", "data-testid": "period-btn", variant: "transparent", color: "neutral", disabled, onClick: handleClick, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material_icon", ref: btnRef, children: "calendar_today" }) })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "arm-period", "data-testid": "period", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui_Form_TextField_TextField.TextField, { ref, placeholder: "дд.мм.гггг - дд.мм.гггг", ...restProps, disabled, value: textValue, onBlur: handleBlur, onChange: handleChange, onFocus: () => setActive(false), autoComplete: "off", endAdornment }),
+    active && /* @__PURE__ */ jsxRuntime.jsx(ui_Popper_Popper.Popper, { anchorEl: btnRef.current, open: active, placement: "bottom-end", children: /* @__PURE__ */ jsxRuntime.jsx(ui_Card_Card.default, { className: "arm-period__picker", "data-testid": "period_card", children: /* @__PURE__ */ jsxRuntime.jsx(ui_Form_DatePicker_DatePicker.default, { onClickOutside: handleClickOutside, onChange: handleSelect, selectsRange: true, selected: realValue[0], startDate: realValue[0], endDate: realValue[1], minDate: minDate || void 0, maxDate: maxDate || void 0, showMonthDropdown, showYearDropdown, ...datePickerProps }) }) })
+  ] }) });
+});
+exports.default = Period;
+exports.getPeriodDisplay = getPeriodDisplay;