@hitachivantara/uikit-react-core 5.39.3 → 5.40.0

package/dist/cjs/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.cjs

@@ -0,0 +1,285 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const uniqueId = require("lodash/uniqueId");
+const dayjs = require("dayjs");
+const styles = require("@mui/material/styles");
+const useMediaQuery = require("@mui/material/useMediaQuery");
+const Context = require("../../../Context.cjs");
+const utils = require("./utils.cjs");
+const DateTimeValue_styles = require("./DateTimeValue.styles.cjs");
+const DatePicker = require("../../../../DatePicker/DatePicker.cjs");
+const TimePicker = require("../../../../TimePicker/TimePicker.cjs");
+const WarningText = require("../../../../Forms/WarningText/WarningText.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const uniqueId__default = /* @__PURE__ */ _interopDefault(uniqueId);
+const dayjs__default = /* @__PURE__ */ _interopDefault(dayjs);
+const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
+function valueIsRange(operator) {
+  return operator === "range";
+}
+const DateTimeValue = ({
+  id,
+  operator,
+  value: valueProp = {},
+  initialTouched = false
+}) => {
+  const { classes, cx } = DateTimeValue_styles.useClasses();
+  const theme = styles.useTheme();
+  const isMdDown = useMediaQuery__default.default(theme.breakpoints.down("md"));
+  const isRange = valueIsRange(operator);
+  const { labels, dispatchAction, readOnly } = Context.useQueryBuilderContext();
+  const elementId = uniqueId__default.default(`datetime${id}`);
+  const [touchedDate, setTouchedDate] = React.useState(initialTouched);
+  const [touchedTime, setTouchedTime] = React.useState(initialTouched);
+  const [touchedEndDate, setTouchedEndDate] = React.useState(initialTouched);
+  const [touchedEndTime, setTouchedEndTime] = React.useState(initialTouched);
+  const onDateChange = React.useCallback(
+    (data) => {
+      setTouchedDate(true);
+      let date;
+      if (data != null) {
+        date = dayjs__default.default(data).format("YYYY-MM-DD");
+      }
+      const oldValue = !isRange ? valueProp?.date : valueProp?.start?.date;
+      if (date !== oldValue) {
+        let value;
+        if (!isRange) {
+          value = {
+            date,
+            time: valueProp?.time
+          };
+        } else {
+          value = {
+            start: {
+              date,
+              time: valueProp?.start?.time
+            },
+            end: valueProp?.end
+          };
+        }
+        dispatchAction({
+          type: "set-value",
+          id,
+          value
+        });
+      }
+    },
+    [dispatchAction, id, isRange, valueProp]
+  );
+  const onTimeChange = React.useCallback(
+    (data) => {
+      setTouchedTime(true);
+      let time;
+      if (data != null) {
+        time = `${utils.padTime(data.hours)}:${utils.padTime(data.minutes)}:${utils.padTime(
+          data.seconds
+        )}`;
+      }
+      const oldValue = !isRange ? valueProp?.time : valueProp?.start?.time;
+      if (time !== oldValue) {
+        let value;
+        if (!isRange) {
+          value = {
+            date: valueProp?.date,
+            time
+          };
+        } else {
+          value = {
+            start: {
+              date: valueProp?.start?.date,
+              time
+            },
+            end: valueProp?.end
+          };
+        }
+        dispatchAction({
+          type: "set-value",
+          id,
+          value
+        });
+      }
+    },
+    [dispatchAction, id, isRange, valueProp]
+  );
+  const onEndDateChange = React.useCallback(
+    (data) => {
+      setTouchedEndDate(true);
+      let date;
+      if (data != null) {
+        date = dayjs__default.default(data).format("YYYY-MM-DD");
+      }
+      if (date !== valueProp?.end?.date) {
+        const value = {
+          start: valueProp?.start,
+          end: {
+            date,
+            time: valueProp?.end?.time
+          }
+        };
+        dispatchAction({
+          type: "set-value",
+          id,
+          value
+        });
+      }
+    },
+    [dispatchAction, id, valueProp]
+  );
+  const onEndTimeChange = React.useCallback(
+    (data) => {
+      setTouchedEndTime(true);
+      let time;
+      if (data != null) {
+        time = `${utils.padTime(data.hours)}:${utils.padTime(data.minutes)}:${utils.padTime(
+          data.seconds
+        )}`;
+      }
+      if (time !== valueProp?.end?.time) {
+        const value = {
+          start: valueProp?.start,
+          end: {
+            date: valueProp?.end?.date,
+            time
+          }
+        };
+        dispatchAction({
+          type: "set-value",
+          id,
+          value
+        });
+      }
+    },
+    [dispatchAction, id, valueProp]
+  );
+  const startDate = isRange ? valueProp?.start?.date : valueProp?.date;
+  const datePickerValue = React.useMemo(() => utils.parseDate(startDate), [startDate]);
+  const datePickerStatus = datePickerValue != null ? "valid" : "invalid";
+  const startTime = (isRange ? valueProp?.start?.time : valueProp?.time) ?? "";
+  const timePickerValue = React.useMemo(() => utils.parseTime(startTime), [startTime]);
+  const timePickerStatus = timePickerValue != null ? "valid" : "invalid";
+  const endDate = isRange ? valueProp?.end?.date : null;
+  const endDatePickerValue = React.useMemo(() => utils.parseDate(endDate), [endDate]);
+  const endTime = isRange ? valueProp?.end?.time : null;
+  const endTimePickerValue = React.useMemo(() => utils.parseTime(endTime), [endTime]);
+  const dateStatus = !touchedDate ? "standBy" : datePickerStatus;
+  const timeStatus = !touchedTime ? "standBy" : timePickerStatus;
+  const endDateIsBefore = startDate != null && endDate != null && endDate < startDate;
+  const endTimeIsBeforeOrSame = startDate != null && endDate != null && endDate === startDate && startTime != null && endTime != null && endTime <= startTime;
+  const endDateTimeIsBefore = endDateIsBefore || endTimeIsBeforeOrSame;
+  const endDatePickerStatus = endDatePickerValue == null || endDateTimeIsBefore ? "invalid" : "valid";
+  const endDateStatus = !touchedEndDate ? "standBy" : endDatePickerStatus;
+  const endTimePickerStatus = endTimePickerValue == null || endDateTimeIsBefore ? "invalid" : "valid";
+  const endTimeStatus = !touchedEndTime ? "standBy" : endTimePickerStatus;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.root, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cx(classes.row, classes.horizontal, {
+          [classes.isMdDown]: isMdDown
+        }),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DatePicker.HvDatePicker,
+            {
+              className: classes.datePicker,
+              name: `${elementId}-date`,
+              required: true,
+              status: dateStatus,
+              statusMessage: labels.rule.value.datetime.validation.required,
+              label: isRange ? labels.rule.value.datetime.startDateLabel : labels.rule.value.datetime.dateLabel,
+              placeholder: isRange ? labels.rule.value.datetime.startDatePlaceholder : labels.rule.value.datetime.datePlaceholder,
+              value: datePickerValue,
+              onChange: onDateChange,
+              readOnly
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TimePicker.HvTimePicker,
+            {
+              className: classes.timePicker,
+              timeFormat: "24",
+              name: `${elementId}-time`,
+              required: true,
+              status: timeStatus,
+              statusMessage: labels.rule.value.datetime.validation.required,
+              label: isRange ? labels.rule.value.datetime.startTimeLabel : labels.rule.value.datetime.timeLabel,
+              placeholder: isRange ? labels.rule.value.datetime.startTimePlaceholder : labels.rule.value.datetime.timePlaceholder,
+              value: timePickerValue || void 0,
+              onChange: onTimeChange,
+              onToggle: (_evt, open) => {
+                if (!open && !touchedTime) {
+                  setTouchedTime(true);
+                }
+              },
+              readOnly
+            }
+          )
+        ]
+      }
+    ),
+    isRange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.row, classes.vertical), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cx(classes.horizontal, {
+            [classes.isMdDown]: isMdDown
+          }),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DatePicker.HvDatePicker,
+              {
+                className: classes.datePicker,
+                name: `${elementId}-endDate`,
+                required: true,
+                status: endDateStatus,
+                statusMessage: labels.rule.value.datetime.validation.required,
+                "aria-errormessage": endDateTimeIsBefore ? `${elementId}-combined-error` : void 0,
+                label: labels.rule.value.datetime.endDateLabel,
+                placeholder: labels.rule.value.datetime.endDatePlaceholder,
+                value: endDatePickerValue,
+                onChange: onEndDateChange,
+                readOnly
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TimePicker.HvTimePicker,
+              {
+                className: classes.timePicker,
+                timeFormat: "24",
+                name: `${elementId}-endTime`,
+                required: true,
+                status: endTimeStatus,
+                statusMessage: labels.rule.value.datetime.validation.required,
+                "aria-errormessage": endDateTimeIsBefore ? `${elementId}-combined-error` : void 0,
+                label: labels.rule.value.datetime.endTimeLabel,
+                placeholder: labels.rule.value.datetime.endTimePlaceholder,
+                value: endTimePickerValue || void 0,
+                onChange: onEndTimeChange,
+                onToggle: (_evt, open) => {
+                  if (!open && !touchedEndTime) {
+                    setTouchedEndTime(true);
+                  }
+                },
+                readOnly
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        WarningText.HvWarningText,
+        {
+          disableBorder: true,
+          id: `${elementId}-combined-error`,
+          isVisible: endDateTimeIsBefore,
+          children: labels.rule.value.datetime.validation.invalidInterval
+        }
+      )
+    ] })
+  ] });
+};
+React.memo(DateTimeValue);
+exports.DateTimeValue = DateTimeValue;
+//# sourceMappingURL=DateTimeValue.cjs.map

package/dist/cjs/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeValue.cjs","sources":["../../../../../../src/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.tsx"],"sourcesContent":["import { memo, useCallback, useMemo, useState } from \"react\";\nimport uniqueId from \"lodash/uniqueId\";\nimport dayjs from \"dayjs\";\nimport { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { HvWarningText } from \"../../../../Forms\";\nimport { HvTimePicker, HvTimePickerValue } from \"../../../../TimePicker\";\nimport { HvDatePicker } from \"../../../../DatePicker\";\n\nimport { useQueryBuilderContext } from \"../../../Context\";\nimport { padTime, parseDate, parseTime } from \"./utils\";\nimport { useClasses } from \"./DateTimeValue.styles\";\n\nfunction valueIsRange(operator) {\n  return operator === \"range\";\n}\n\nexport interface DateTimeValueProps {\n  id: React.Key;\n  operator?: string;\n  value?: any;\n  initialTouched?: boolean;\n}\n\nexport const DateTimeValue = ({\n  id,\n  operator,\n  value: valueProp = {},\n  initialTouched = false,\n}: DateTimeValueProps) => {\n  const { classes, cx } = useClasses();\n\n  const theme = useTheme();\n  const isMdDown = useMediaQuery(theme.breakpoints.down(\"md\"));\n\n  const isRange = valueIsRange(operator);\n\n  const { labels, dispatchAction, readOnly } = useQueryBuilderContext();\n\n  const elementId = uniqueId(`datetime${id}`);\n\n  const [touchedDate, setTouchedDate] = useState(initialTouched);\n  const [touchedTime, setTouchedTime] = useState(initialTouched);\n  const [touchedEndDate, setTouchedEndDate] = useState(initialTouched);\n  const [touchedEndTime, setTouchedEndTime] = useState(initialTouched);\n\n  const onDateChange = useCallback(\n    (data?: Date) => {\n      setTouchedDate(true);\n\n      let date;\n      if (data != null) {\n        date = dayjs(data).format(\"YYYY-MM-DD\");\n      }\n\n      const oldValue = !isRange ? valueProp?.date : valueProp?.start?.date;\n\n      if (date !== oldValue) {\n        let value;\n        if (!isRange) {\n          value = {\n            date,\n            time: valueProp?.time,\n          };\n        } else {\n          value = {\n            start: {\n              date,\n              time: valueProp?.start?.time,\n            },\n            end: valueProp?.end,\n          };\n        }\n\n        dispatchAction({\n          type: \"set-value\",\n          id,\n          value,\n        });\n      }\n    },\n    [dispatchAction, id, isRange, valueProp]\n  );\n\n  const onTimeChange = useCallback(\n    (data: HvTimePickerValue) => {\n      setTouchedTime(true);\n\n      let time;\n      if (data != null) {\n        time = `${padTime(data.hours)}:${padTime(data.minutes)}:${padTime(\n          data.seconds\n        )}`;\n      }\n\n      const oldValue = !isRange ? valueProp?.time : valueProp?.start?.time;\n\n      if (time !== oldValue) {\n        let value;\n        if (!isRange) {\n          value = {\n            date: valueProp?.date,\n            time,\n          };\n        } else {\n          value = {\n            start: {\n              date: valueProp?.start?.date,\n              time,\n            },\n            end: valueProp?.end,\n          };\n        }\n\n        dispatchAction({\n          type: \"set-value\",\n          id,\n          value,\n        });\n      }\n    },\n    [dispatchAction, id, isRange, valueProp]\n  );\n\n  const onEndDateChange = useCallback(\n    (data?: Date) => {\n      setTouchedEndDate(true);\n\n      let date;\n      if (data != null) {\n        date = dayjs(data).format(\"YYYY-MM-DD\");\n      }\n\n      if (date !== valueProp?.end?.date) {\n        const value = {\n          start: valueProp?.start,\n          end: {\n            date,\n            time: valueProp?.end?.time,\n          },\n        };\n\n        dispatchAction({\n          type: \"set-value\",\n          id,\n          value,\n        });\n      }\n    },\n    [dispatchAction, id, valueProp]\n  );\n\n  const onEndTimeChange = useCallback(\n    (data: HvTimePickerValue) => {\n      setTouchedEndTime(true);\n\n      let time;\n      if (data != null) {\n        time = `${padTime(data.hours)}:${padTime(data.minutes)}:${padTime(\n          data.seconds\n        )}`;\n      }\n\n      if (time !== valueProp?.end?.time) {\n        const value = {\n          start: valueProp?.start,\n          end: {\n            date: valueProp?.end?.date,\n            time,\n          },\n        };\n\n        dispatchAction({\n          type: \"set-value\",\n          id,\n          value,\n        });\n      }\n    },\n    [dispatchAction, id, valueProp]\n  );\n\n  const startDate = isRange ? valueProp?.start?.date : valueProp?.date;\n  const datePickerValue = useMemo(() => parseDate(startDate), [startDate]);\n  const datePickerStatus = datePickerValue != null ? \"valid\" : \"invalid\";\n\n  const startTime = (isRange ? valueProp?.start?.time : valueProp?.time) ?? \"\";\n  const timePickerValue = useMemo(() => parseTime(startTime), [startTime]);\n  const timePickerStatus = timePickerValue != null ? \"valid\" : \"invalid\";\n\n  const endDate = isRange ? valueProp?.end?.date : null;\n  const endDatePickerValue = useMemo(() => parseDate(endDate), [endDate]);\n\n  const endTime = isRange ? valueProp?.end?.time : null;\n  const endTimePickerValue = useMemo(() => parseTime(endTime), [endTime]);\n\n  const dateStatus = !touchedDate ? \"standBy\" : datePickerStatus;\n  const timeStatus = !touchedTime ? \"standBy\" : timePickerStatus;\n\n  const endDateIsBefore =\n    startDate != null && endDate != null && endDate < startDate;\n\n  const endTimeIsBeforeOrSame =\n    startDate != null &&\n    endDate != null &&\n    endDate === startDate &&\n    startTime != null &&\n    endTime != null &&\n    endTime <= startTime;\n\n  const endDateTimeIsBefore = endDateIsBefore || endTimeIsBeforeOrSame;\n\n  const endDatePickerStatus =\n    endDatePickerValue == null || endDateTimeIsBefore ? \"invalid\" : \"valid\";\n  const endDateStatus = !touchedEndDate ? \"standBy\" : endDatePickerStatus;\n\n  const endTimePickerStatus =\n    endTimePickerValue == null || endDateTimeIsBefore ? \"invalid\" : \"valid\";\n  const endTimeStatus = !touchedEndTime ? \"standBy\" : endTimePickerStatus;\n\n  return (\n    <div className={classes.root}>\n      <div\n        className={cx(classes.row, classes.horizontal, {\n          [classes.isMdDown]: isMdDown,\n        })}\n      >\n        <HvDatePicker\n          className={classes.datePicker}\n          name={`${elementId}-date`}\n          required\n          status={dateStatus}\n          statusMessage={labels.rule.value.datetime.validation.required}\n          label={\n            isRange\n              ? labels.rule.value.datetime.startDateLabel\n              : labels.rule.value.datetime.dateLabel\n          }\n          placeholder={\n            isRange\n              ? labels.rule.value.datetime.startDatePlaceholder\n              : labels.rule.value.datetime.datePlaceholder\n          }\n          value={datePickerValue}\n          onChange={onDateChange}\n          readOnly={readOnly}\n        />\n        <HvTimePicker\n          className={classes.timePicker}\n          timeFormat=\"24\"\n          name={`${elementId}-time`}\n          required\n          status={timeStatus}\n          statusMessage={labels.rule.value.datetime.validation.required}\n          label={\n            isRange\n              ? labels.rule.value.datetime.startTimeLabel\n              : labels.rule.value.datetime.timeLabel\n          }\n          placeholder={\n            isRange\n              ? labels.rule.value.datetime.startTimePlaceholder\n              : labels.rule.value.datetime.timePlaceholder\n          }\n          value={timePickerValue || undefined}\n          onChange={onTimeChange}\n          onToggle={(_evt, open) => {\n            if (!open && !touchedTime) {\n              setTouchedTime(true);\n            }\n          }}\n          readOnly={readOnly}\n        />\n      </div>\n      {isRange && (\n        <div className={cx(classes.row, classes.vertical)}>\n          <div\n            className={cx(classes.horizontal, {\n              [classes.isMdDown]: isMdDown,\n            })}\n          >\n            <HvDatePicker\n              className={classes.datePicker}\n              name={`${elementId}-endDate`}\n              required\n              status={endDateStatus}\n              statusMessage={labels.rule.value.datetime.validation.required}\n              aria-errormessage={\n                endDateTimeIsBefore ? `${elementId}-combined-error` : undefined\n              }\n              label={labels.rule.value.datetime.endDateLabel}\n              placeholder={labels.rule.value.datetime.endDatePlaceholder}\n              value={endDatePickerValue}\n              onChange={onEndDateChange}\n              readOnly={readOnly}\n            />\n            <HvTimePicker\n              className={classes.timePicker}\n              timeFormat=\"24\"\n              name={`${elementId}-endTime`}\n              required\n              status={endTimeStatus}\n              statusMessage={labels.rule.value.datetime.validation.required}\n              aria-errormessage={\n                endDateTimeIsBefore ? `${elementId}-combined-error` : undefined\n              }\n              label={labels.rule.value.datetime.endTimeLabel}\n              placeholder={labels.rule.value.datetime.endTimePlaceholder}\n              value={endTimePickerValue || undefined}\n              onChange={onEndTimeChange}\n              onToggle={(_evt, open) => {\n                if (!open && !touchedEndTime) {\n                  setTouchedEndTime(true);\n                }\n              }}\n              readOnly={readOnly}\n            />\n          </div>\n          <HvWarningText\n            disableBorder\n            id={`${elementId}-combined-error`}\n            isVisible={endDateTimeIsBefore}\n          >\n            {labels.rule.value.datetime.validation.invalidInterval}\n          </HvWarningText>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default memo(DateTimeValue);\n"],"names":["useClasses","useTheme","useMediaQuery","useQueryBuilderContext","uniqueId","useState","useCallback","dayjs","padTime","useMemo","parseDate","parseTime","jsxs","jsx","HvDatePicker","HvTimePicker","HvWarningText","memo"],"mappings":"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"}

package/dist/cjs/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.styles.cjs

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const classes = require("../../../../utils/classes.cjs");
+const { useClasses, staticClasses } = classes.createClasses(
+  "HvQueryBuilder-DateTimeValue",
+  {
+    root: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    row: {},
+    vertical: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    horizontal: {
+      display: "flex",
+      "& > div:not(:last-child)": {
+        marginRight: uikitStyles.theme.space.md
+      }
+    },
+    isMdDown: {
+      "& > div:not(:last-child)": {
+        marginRight: `calc(${uikitStyles.theme.space.md} / 2)`
+      }
+    },
+    datePicker: {
+      flex: 1
+    },
+    timePicker: {
+      flex: 1
+    }
+  }
+);
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=DateTimeValue.styles.cjs.map

package/dist/cjs/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeValue.styles.cjs","sources":["../../../../../../src/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../../../utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-DateTimeValue\",\n  {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    row: {},\n    vertical: {\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    horizontal: {\n      display: \"flex\",\n\n      \"& > div:not(:last-child)\": {\n        marginRight: theme.space.md,\n      },\n    },\n    isMdDown: {\n      \"& > div:not(:last-child)\": {\n        marginRight: `calc(${theme.space.md} / 2)`,\n      },\n    },\n    datePicker: {\n      flex: 1,\n    },\n    timePicker: {\n      flex: 1,\n    },\n  }\n);\n"],"names":["createClasses","theme"],"mappings":";;;;AAIa,MAAA,EAAE,YAAY,cAAA,IAAkBA,QAAA;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,eAAe;AAAA,IACjB;AAAA,IACA,KAAK,CAAC;AAAA,IACN,UAAU;AAAA,MACR,SAAS;AAAA,MACT,eAAe;AAAA,IACjB;AAAA,IACA,YAAY;AAAA,MACV,SAAS;AAAA,MAET,4BAA4B;AAAA,QAC1B,aAAaC,YAAAA,MAAM,MAAM;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,UAAU;AAAA,MACR,4BAA4B;AAAA,QAC1B,aAAa,QAAQA,YAAAA,MAAM,MAAM,EAAE;AAAA,MACrC;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,EACF;AACF;;;"}

package/dist/cjs/QueryBuilder/Rule/Value/DateTimeValue/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","sources":["../../../../../../src/QueryBuilder/Rule/Value/DateTimeValue/utils.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\n\n/**\n * Pads the unit time values so that they always have two digits\n * @param {Number} value - unit time value\n * @returns The unit time value with two digits\n */\nexport const padTime = (value: number) => {\n  if (!value || value < 0) {\n    return \"00\";\n  }\n  if (value < 10 && value.toString().length === 1) {\n    return `0${value.toString()}`;\n  }\n\n  return value.toString();\n};\n\nexport const parseDate = (date: string) => {\n  if (date != null) {\n    return dayjs(date).toDate();\n  }\n\n  return undefined;\n};\n\nexport const parseTime = (time: string) => {\n  if (time != null) {\n    const parts = time.split(\":\");\n\n    if (parts.length === 3) {\n      return {\n        hours: Number.parseInt(parts[0], 10),\n        minutes: Number.parseInt(parts[1], 10),\n        seconds: Number.parseInt(parts[2], 10),\n      };\n    }\n  }\n\n  return null;\n};\n"],"names":["dayjs"],"mappings":";;;;;AAOa,MAAA,UAAU,CAAC,UAAkB;AACpC,MAAA,CAAC,SAAS,QAAQ,GAAG;AAChB,WAAA;AAAA,EACT;AACA,MAAI,QAAQ,MAAM,MAAM,SAAS,EAAE,WAAW,GAAG;AACxC,WAAA,IAAI,MAAM,SAAA,CAAU;AAAA,EAC7B;AAEA,SAAO,MAAM;AACf;AAEa,MAAA,YAAY,CAAC,SAAiB;AACzC,MAAI,QAAQ,MAAM;AACT,WAAAA,uBAAM,IAAI,EAAE;EACrB;AAEO,SAAA;AACT;AAEa,MAAA,YAAY,CAAC,SAAiB;AACzC,MAAI,QAAQ,MAAM;AACV,UAAA,QAAQ,KAAK,MAAM,GAAG;AAExB,QAAA,MAAM,WAAW,GAAG;AACf,aAAA;AAAA,QACL,OAAO,OAAO,SAAS,MAAM,CAAC,GAAG,EAAE;AAAA,QACnC,SAAS,OAAO,SAAS,MAAM,CAAC,GAAG,EAAE;AAAA,QACrC,SAAS,OAAO,SAAS,MAAM,CAAC,GAAG,EAAE;AAAA,MAAA;AAAA,IAEzC;AAAA,EACF;AAEO,SAAA;AACT;;;;"}

package/dist/cjs/QueryBuilder/Rule/Value/EmptyValue/EmptyValue.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const Context = require("../../../Context.cjs");
+const EmptyValue = ({ id }) => {
+  const { dispatchAction } = Context.useQueryBuilderContext();
+  React.useEffect(() => {
+    dispatchAction({
+      type: "set-value",
+      id,
+      value: null
+    });
+  }, [dispatchAction, id]);
+  return null;
+};
+exports.EmptyValue = EmptyValue;
+//# sourceMappingURL=EmptyValue.cjs.map

package/dist/cjs/QueryBuilder/Rule/Value/EmptyValue/EmptyValue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyValue.cjs","sources":["../../../../../../src/QueryBuilder/Rule/Value/EmptyValue/EmptyValue.tsx"],"sourcesContent":["import { useEffect } from \"react\";\n\nimport { useQueryBuilderContext } from \"../../../Context\";\n\nexport interface EmptyValueProps {\n  id: React.Key;\n}\n\nexport const EmptyValue = ({ id }: EmptyValueProps) => {\n  const { dispatchAction } = useQueryBuilderContext();\n\n  // Clear value on first render\n  useEffect(() => {\n    dispatchAction({\n      type: \"set-value\",\n      id,\n      value: null,\n    });\n  }, [dispatchAction, id]);\n\n  return null;\n};\n"],"names":["useQueryBuilderContext","useEffect"],"mappings":";;;;AAQO,MAAM,aAAa,CAAC,EAAE,SAA0B;AAC/C,QAAA,EAAE,mBAAmBA,QAAAA;AAG3BC,QAAAA,UAAU,MAAM;AACC,mBAAA;AAAA,MACb,MAAM;AAAA,MACN;AAAA,MACA,OAAO;AAAA,IAAA,CACR;AAAA,EAAA,GACA,CAAC,gBAAgB,EAAE,CAAC;AAEhB,SAAA;AACT;;"}

package/dist/cjs/QueryBuilder/Rule/Value/NumericValue/Numeric.styles.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const classes = require("../../../../utils/classes.cjs");
+const { useClasses, staticClasses } = classes.createClasses(
+  "HvQueryBuilder-NumericValue",
+  {
+    root: {},
+    label: {
+      paddingBottom: "6px"
+    },
+    inputContainer: {},
+    rangeContainer: {
+      display: "flex",
+      "& $inputContainer": {
+        flexGrow: 1,
+        overflow: "auto"
+      },
+      "& > $inputContainer:not(:last-child)": {
+        marginRight: uikitStyles.theme.space.md
+      }
+    },
+    input: {
+      flexGrow: 1
+    },
+    isMdDown: {
+      "& > $inputContainer:not(:last-child)": {
+        marginRight: `calc(${uikitStyles.theme.space.md} / 2)`
+      }
+    }
+  }
+);
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=Numeric.styles.cjs.map

package/dist/cjs/QueryBuilder/Rule/Value/NumericValue/Numeric.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Numeric.styles.cjs","sources":["../../../../../../src/QueryBuilder/Rule/Value/NumericValue/Numeric.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../../../utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-NumericValue\",\n  {\n    root: {},\n    label: {\n      paddingBottom: \"6px\",\n    },\n    inputContainer: {},\n    rangeContainer: {\n      display: \"flex\",\n\n      \"& $inputContainer\": {\n        flexGrow: 1,\n        overflow: \"auto\",\n      },\n\n      \"& > $inputContainer:not(:last-child)\": {\n        marginRight: theme.space.md,\n      },\n    },\n    input: {\n      flexGrow: 1,\n    },\n    isMdDown: {\n      \"& > $inputContainer:not(:last-child)\": {\n        marginRight: `calc(${theme.space.md} / 2)`,\n      },\n    },\n  }\n);\n"],"names":["createClasses","theme"],"mappings":";;;;AAIa,MAAA,EAAE,YAAY,cAAA,IAAkBA,QAAA;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM,CAAC;AAAA,IACP,OAAO;AAAA,MACL,eAAe;AAAA,IACjB;AAAA,IACA,gBAAgB,CAAC;AAAA,IACjB,gBAAgB;AAAA,MACd,SAAS;AAAA,MAET,qBAAqB;AAAA,QACnB,UAAU;AAAA,QACV,UAAU;AAAA,MACZ;AAAA,MAEA,wCAAwC;AAAA,QACtC,aAAaC,YAAAA,MAAM,MAAM;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,IACA,UAAU;AAAA,MACR,wCAAwC;AAAA,QACtC,aAAa,QAAQA,YAAAA,MAAM,MAAM,EAAE;AAAA,MACrC;AAAA,IACF;AAAA,EACF;AACF;;;"}

package/dist/cjs/QueryBuilder/Rule/Value/NumericValue/NumericValue.cjs

@@ -0,0 +1,191 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const uniqueId = require("lodash/uniqueId");
+const isEmpty = require("lodash/isEmpty");
+const styles = require("@mui/material/styles");
+const useMediaQuery = require("@mui/material/useMediaQuery");
+const Context = require("../../../Context.cjs");
+const Numeric_styles = require("./Numeric.styles.cjs");
+const Input = require("../../../../Input/Input.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const uniqueId__default = /* @__PURE__ */ _interopDefault(uniqueId);
+const isEmpty__default = /* @__PURE__ */ _interopDefault(isEmpty);
+const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
+const NumericValue = ({
+  id,
+  value,
+  operator,
+  initialTouched = false
+}) => {
+  const { classes, cx } = Numeric_styles.useClasses();
+  const isRange = operator === "range";
+  const { labels, dispatchAction, readOnly } = Context.useQueryBuilderContext();
+  const theme = styles.useTheme();
+  const isMdDown = useMediaQuery__default.default(theme.breakpoints.down("md"));
+  const onSingleValueChange = React.useCallback(
+    (_, data) => {
+      const numericData = isEmpty__default.default(data) ? null : Number(data);
+      dispatchAction({
+        type: "set-value",
+        id,
+        value: Number.isNaN(numericData) ? data : numericData
+      });
+    },
+    [dispatchAction, id]
+  );
+  const onRangeValueChange = React.useCallback(
+    (_, data, from = true) => {
+      const numericData = isEmpty__default.default(data) ? null : Number(data);
+      const currentValue = value;
+      const numericRange = {
+        from: currentValue?.from,
+        to: currentValue?.to
+      };
+      if (from) {
+        numericRange.from = Number.isNaN(numericData) ? data : numericData;
+      } else {
+        numericRange.to = Number.isNaN(numericData) ? data : numericData;
+      }
+      dispatchAction({
+        type: "set-value",
+        id,
+        value: numericRange
+      });
+    },
+    [dispatchAction, id, value]
+  );
+  const [touchedNumeric, setTouchedNumeric] = React.useState(initialTouched);
+  const [touchedNumericTo, setTouchedNumericTo] = React.useState(initialTouched);
+  const elementId = uniqueId__default.default("numeric");
+  let numericValidation = null;
+  let rightValidation = null;
+  if (touchedNumeric || touchedNumericTo) {
+    if (value === void 0 || value?.toString() === "") {
+      if (touchedNumeric) {
+        numericValidation = "required";
+      }
+      if (touchedNumericTo) {
+        rightValidation = "required";
+      }
+    } else if (!isRange) {
+      if (Number.isNaN(Number(value))) {
+        numericValidation = "invalid";
+      }
+    } else if (isRange) {
+      const rangeValue = value;
+      if (rangeValue?.from === void 0 || rangeValue?.from?.toString() === "") {
+        numericValidation = "required";
+      } else if (Number.isNaN(Number(rangeValue?.from))) {
+        numericValidation = "invalid";
+      }
+      if (rangeValue?.to === void 0 || rangeValue?.to?.toString() === "") {
+        rightValidation = "required";
+      } else if (Number.isNaN(Number(rangeValue?.to))) {
+        rightValidation = "invalid";
+      } else if (Number(rangeValue?.from) > Number(rangeValue?.to)) {
+        rightValidation = "greaterThan";
+      } else if (Number(rangeValue?.from) === Number(rangeValue?.to)) {
+        rightValidation = "equal";
+      }
+    }
+  }
+  const numericStatus = numericValidation != null ? "invalid" : "valid";
+  const rightStatus = rightValidation != null ? "invalid" : "valid";
+  const renderRangeInputs = (rangeValue) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cx(classes.rangeContainer, { [classes.isMdDown]: isMdDown }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Input.HvInput,
+          {
+            label: labels.rule.value.numeric.range.leftLabel,
+            className: classes.input,
+            id: `${elementId}-numeric-from`,
+            name: `${elementId}-numeric-from`,
+            value: rangeValue?.from?.toString() || "",
+            onChange: (event, data) => onRangeValueChange(event, data),
+            onBlur: () => {
+              setTouchedNumeric(true);
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+              }
+            },
+            status: !touchedNumeric ? "standBy" : numericStatus,
+            statusMessage: numericValidation ? labels.rule.value.numeric.validation[numericValidation] : "",
+            required: true,
+            inputProps: {
+              autoComplete: "off"
+            },
+            placeholder: labels.rule.value.numeric.placeholder,
+            readOnly
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Input.HvInput,
+          {
+            label: labels.rule.value.numeric.range.rightLabel,
+            className: classes.input,
+            id: `${elementId}-numeric-to`,
+            name: `${elementId}-numeric-to`,
+            value: rangeValue?.to?.toString() || "",
+            onChange: (event, data) => onRangeValueChange(event, data, false),
+            onBlur: () => {
+              setTouchedNumericTo(true);
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+              }
+            },
+            status: !touchedNumericTo ? "standBy" : rightStatus,
+            statusMessage: rightValidation ? labels.rule.value.numeric.validation[rightValidation] : "",
+            required: true,
+            inputProps: {
+              autoComplete: "off"
+            },
+            placeholder: labels.rule.value.numeric.placeholder,
+            readOnly
+          }
+        ) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.root, children: [
+    isRange && renderRangeInputs(value || {}),
+    !isRange && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.inputContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Input.HvInput,
+      {
+        label: labels.rule.value.numeric.label,
+        className: classes.input,
+        id: `${elementId}-numeric`,
+        name: `${elementId}-numeric`,
+        value: value?.toString() || "",
+        onChange: onSingleValueChange,
+        onBlur: () => {
+          setTouchedNumeric(true);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+          }
+        },
+        status: !touchedNumeric ? "standBy" : numericStatus,
+        required: true,
+        inputProps: {
+          autoComplete: "off"
+        },
+        placeholder: labels.rule.value.numeric.placeholder,
+        statusMessage: numericValidation ? labels.rule.value.numeric.validation[numericValidation] : "",
+        readOnly
+      }
+    ) })
+  ] });
+};
+React.memo(NumericValue);
+exports.NumericValue = NumericValue;
+//# sourceMappingURL=NumericValue.cjs.map

package/dist/cjs/QueryBuilder/Rule/Value/NumericValue/NumericValue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumericValue.cjs","sources":["../../../../../../src/QueryBuilder/Rule/Value/NumericValue/NumericValue.tsx"],"sourcesContent":["import { memo, useCallback, useState } from \"react\";\nimport uniqueId from \"lodash/uniqueId\";\nimport isEmpty from \"lodash/isEmpty\";\nimport { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\n\nimport { HvInput } from \"../../../../Input\";\n\nimport { useQueryBuilderContext } from \"../../../Context\";\nimport { useClasses } from \"./Numeric.styles\";\nimport { HvQueryBuilderNumericRange } from \"../../../types\";\n\nexport interface NumericValueProps {\n  id: React.Key;\n  value?: any;\n  operator?: string;\n  initialTouched?: boolean;\n}\n\nexport const NumericValue = ({\n  id,\n  value,\n  operator,\n  initialTouched = false,\n}: NumericValueProps) => {\n  const { classes, cx } = useClasses();\n\n  const isRange = operator === \"range\";\n  const { labels, dispatchAction, readOnly } = useQueryBuilderContext();\n\n  const theme = useTheme();\n\n  const isMdDown = useMediaQuery(theme.breakpoints.down(\"md\"));\n\n  const onSingleValueChange = useCallback(\n    (_, data: string) => {\n      const numericData = isEmpty(data) ? null : Number(data);\n      dispatchAction({\n        type: \"set-value\",\n        id,\n        value: Number.isNaN(numericData) ? data : numericData,\n      });\n    },\n    [dispatchAction, id]\n  );\n\n  const onRangeValueChange = useCallback(\n    (_, data: string, from = true) => {\n      const numericData = isEmpty(data) ? null : Number(data);\n      const currentValue = value;\n      const numericRange = {\n        from: currentValue?.from,\n        to: currentValue?.to,\n      };\n      if (from) {\n        numericRange.from = Number.isNaN(numericData) ? data : numericData;\n      } else {\n        numericRange.to = Number.isNaN(numericData) ? data : numericData;\n      }\n      dispatchAction({\n        type: \"set-value\",\n        id,\n        value: numericRange,\n      });\n    },\n    [dispatchAction, id, value]\n  );\n\n  const [touchedNumeric, setTouchedNumeric] = useState(initialTouched);\n  const [touchedNumericTo, setTouchedNumericTo] = useState(initialTouched);\n\n  const elementId = uniqueId(\"numeric\");\n\n  let numericValidation: \"required\" | \"invalid\" | null = null;\n  let rightValidation: \"required\" | \"invalid\" | \"greaterThan\" | \"equal\" | null =\n    null;\n\n  if (touchedNumeric || touchedNumericTo) {\n    if (value === undefined || value?.toString() === \"\") {\n      if (touchedNumeric) {\n        numericValidation = \"required\";\n      }\n      if (touchedNumericTo) {\n        rightValidation = \"required\";\n      }\n    } else if (!isRange) {\n      if (Number.isNaN(Number(value))) {\n        numericValidation = \"invalid\";\n      }\n    } else if (isRange) {\n      const rangeValue = value;\n      if (\n        rangeValue?.from === undefined ||\n        rangeValue?.from?.toString() === \"\"\n      ) {\n        numericValidation = \"required\";\n      } else if (Number.isNaN(Number(rangeValue?.from))) {\n        numericValidation = \"invalid\";\n      }\n\n      if (rangeValue?.to === undefined || rangeValue?.to?.toString() === \"\") {\n        rightValidation = \"required\";\n      } else if (Number.isNaN(Number(rangeValue?.to))) {\n        rightValidation = \"invalid\";\n      } else if (Number(rangeValue?.from) > Number(rangeValue?.to)) {\n        rightValidation = \"greaterThan\";\n      } else if (Number(rangeValue?.from) === Number(rangeValue?.to)) {\n        rightValidation = \"equal\";\n      }\n    }\n  }\n\n  const numericStatus = numericValidation != null ? \"invalid\" : \"valid\";\n  const rightStatus = rightValidation != null ? \"invalid\" : \"valid\";\n\n  const renderRangeInputs = (rangeValue: HvQueryBuilderNumericRange) => (\n    <div\n      className={cx(classes.rangeContainer, { [classes.isMdDown]: isMdDown })}\n    >\n      <div className={classes.inputContainer}>\n        <HvInput\n          label={labels.rule.value.numeric.range.leftLabel}\n          className={classes.input}\n          id={`${elementId}-numeric-from`}\n          name={`${elementId}-numeric-from`}\n          value={rangeValue?.from?.toString() || \"\"}\n          onChange={(event, data) => onRangeValueChange(event, data)}\n          onBlur={() => {\n            setTouchedNumeric(true);\n          }}\n          onKeyDown={(e: any) => {\n            if (e.key === \"Enter\") {\n              e.preventDefault();\n            }\n          }}\n          status={!touchedNumeric ? \"standBy\" : numericStatus}\n          statusMessage={\n            numericValidation\n              ? labels.rule.value.numeric.validation[numericValidation]\n              : \"\"\n          }\n          required\n          inputProps={{\n            autoComplete: \"off\",\n          }}\n          placeholder={labels.rule.value.numeric.placeholder}\n          readOnly={readOnly}\n        />\n      </div>\n      <div className={classes.inputContainer}>\n        <HvInput\n          label={labels.rule.value.numeric.range.rightLabel}\n          className={classes.input}\n          id={`${elementId}-numeric-to`}\n          name={`${elementId}-numeric-to`}\n          value={rangeValue?.to?.toString() || \"\"}\n          onChange={(event, data) => onRangeValueChange(event, data, false)}\n          onBlur={() => {\n            setTouchedNumericTo(true);\n          }}\n          onKeyDown={(e: any) => {\n            if (e.key === \"Enter\") {\n              e.preventDefault();\n            }\n          }}\n          status={!touchedNumericTo ? \"standBy\" : rightStatus}\n          statusMessage={\n            rightValidation\n              ? labels.rule.value.numeric.validation[rightValidation]\n              : \"\"\n          }\n          required\n          inputProps={{\n            autoComplete: \"off\",\n          }}\n          placeholder={labels.rule.value.numeric.placeholder}\n          readOnly={readOnly}\n        />\n      </div>\n    </div>\n  );\n\n  return (\n    <div className={classes.root}>\n      {isRange && renderRangeInputs(value || {})}\n      {!isRange && (\n        <div className={classes.inputContainer}>\n          <HvInput\n            label={labels.rule.value.numeric.label}\n            className={classes.input}\n            id={`${elementId}-numeric`}\n            name={`${elementId}-numeric`}\n            value={value?.toString() || \"\"}\n            onChange={onSingleValueChange}\n            onBlur={() => {\n              setTouchedNumeric(true);\n            }}\n            onKeyDown={(e: any) => {\n              if (e.key === \"Enter\") {\n                e.preventDefault();\n              }\n            }}\n            status={!touchedNumeric ? \"standBy\" : numericStatus}\n            required\n            inputProps={{\n              autoComplete: \"off\",\n            }}\n            placeholder={labels.rule.value.numeric.placeholder}\n            statusMessage={\n              numericValidation\n                ? labels.rule.value.numeric.validation[numericValidation]\n                : \"\"\n            }\n            readOnly={readOnly}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default memo(NumericValue);\n"],"names":["useClasses","useQueryBuilderContext","useTheme","useMediaQuery","useCallback","isEmpty","useState","uniqueId","jsxs","jsx","HvInput","memo"],"mappings":"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"}