@hitachivantara/uikit-react-core 5.5.0 → 5.7.0

package/dist/esm/components/QueryBuilder/Rule/Value/NumericValue/NumericValue.js

@@ -0,0 +1,194 @@
+import { useContext, useCallback, useState, memo } from "react";
+import uniqueId from "lodash/uniqueId";
+import isEmpty from "lodash/isEmpty";
+import { QueryBuilderContext } from "../../../Context.js";
+import { ClassNames } from "@emotion/react";
+import { styles } from "./Numeric.styles.js";
+import { useTheme, useMediaQuery } from "@mui/material";
+import numericValueClasses from "./numericValueClasses.js";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { HvInput } from "../../../../Input/Input.js";
+const NumericValue = ({
+  id,
+  value,
+  operator,
+  initialTouched = false
+}) => {
+  var _a, _b;
+  const isRange = operator === "range";
+  const context = useContext(QueryBuilderContext);
+  const {
+    labels,
+    dispatchAction,
+    readOnly
+  } = context;
+  const theme = useTheme();
+  const isMdDown = useMediaQuery(theme.breakpoints.down("md"));
+  const onSingleValueChange = useCallback((evt, data) => {
+    const numericData = isEmpty(data) ? null : Number(data);
+    dispatchAction({
+      type: "set-value",
+      id,
+      value: Number.isNaN(numericData) ? data : numericData
+    });
+  }, [dispatchAction, id]);
+  const onRangeValueChange = useCallback((evt, data, from = true) => {
+    const numericData = isEmpty(data) ? null : Number(data);
+    const currentValue = value;
+    const numericRange = {
+      from: currentValue == null ? void 0 : currentValue.from,
+      to: currentValue == null ? void 0 : 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] = useState(initialTouched);
+  const [touchedNumericTo, setTouchedNumericTo] = useState(initialTouched);
+  const elementId = uniqueId("numeric");
+  let numericValidation = null;
+  let rightValidation = null;
+  if (touchedNumeric || touchedNumericTo) {
+    if (value === void 0 || (value == null ? 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 == null ? void 0 : rangeValue.from) === void 0 || ((_a = rangeValue == null ? void 0 : rangeValue.from) == null ? void 0 : _a.toString()) === "") {
+        numericValidation = "required";
+      } else if (Number.isNaN(Number(rangeValue == null ? void 0 : rangeValue.from))) {
+        numericValidation = "invalid";
+      }
+      if ((rangeValue == null ? void 0 : rangeValue.to) === void 0 || ((_b = rangeValue == null ? void 0 : rangeValue.to) == null ? void 0 : _b.toString()) === "") {
+        rightValidation = "required";
+      } else if (Number.isNaN(Number(rangeValue == null ? void 0 : rangeValue.to))) {
+        rightValidation = "invalid";
+      } else if (Number(rangeValue == null ? void 0 : rangeValue.from) > Number(rangeValue == null ? void 0 : rangeValue.to)) {
+        rightValidation = "greaterThan";
+      } else if (Number(rangeValue == null ? void 0 : rangeValue.from) === Number(rangeValue == null ? void 0 : rangeValue.to)) {
+        rightValidation = "equal";
+      }
+    }
+  }
+  const numericStatus = numericValidation != null ? "invalid" : "valid";
+  const rightStatus = rightValidation != null ? "invalid" : "valid";
+  const renderRangeInputs = (rangeValue) => /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => {
+      var _a2, _b2;
+      return /* @__PURE__ */ jsxs("div", {
+        className: cx(numericValueClasses.rangeContainer, css(styles.rangeContainer), isMdDown ? cx(numericValueClasses.isMdDown, css(styles.isMdDown)) : ""),
+        children: [/* @__PURE__ */ jsx("div", {
+          className: cx(numericValueClasses.inputContainer, css(styles.inputContainer)),
+          children: /* @__PURE__ */ jsx(HvInput, {
+            label: labels.rule.value.numeric.range.leftLabel,
+            className: cx(numericValueClasses.input, css(styles.input)),
+            id: `${elementId}-numeric-from`,
+            name: `${elementId}-numeric-from`,
+            value: ((_a2 = rangeValue == null ? void 0 : rangeValue.from) == null ? void 0 : _a2.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__ */ jsx("div", {
+          className: cx(numericValueClasses.inputContainer, css(styles.inputContainer)),
+          children: /* @__PURE__ */ jsx(HvInput, {
+            label: labels.rule.value.numeric.range.rightLabel,
+            className: cx(numericValueClasses.input, css(styles.input)),
+            id: `${elementId}-numeric-to`,
+            name: `${elementId}-numeric-to`,
+            value: ((_b2 = rangeValue == null ? void 0 : rangeValue.to) == null ? void 0 : _b2.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__ */ jsx(ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => /* @__PURE__ */ jsxs("div", {
+      className: cx(numericValueClasses.root, css(styles.root)),
+      children: [isRange && renderRangeInputs(value || {}), !isRange && /* @__PURE__ */ jsx("div", {
+        className: cx(numericValueClasses.inputContainer, css(styles.inputContainer)),
+        children: /* @__PURE__ */ jsx(HvInput, {
+          label: labels.rule.value.numeric.label,
+          className: cx(numericValueClasses.input, css(styles.input)),
+          id: `${elementId}-numeric`,
+          name: `${elementId}-numeric`,
+          value: 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
+        })
+      })]
+    })
+  });
+};
+memo(NumericValue);
+export {
+  NumericValue
+};
+//# sourceMappingURL=NumericValue.js.map

package/dist/esm/components/QueryBuilder/Rule/Value/NumericValue/NumericValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumericValue.js","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/NumericValue/NumericValue.tsx"],"sourcesContent":["import { memo, useCallback, useContext, useState } from \"react\";\nimport uniqueId from \"lodash/uniqueId\";\nimport isEmpty from \"lodash/isEmpty\";\nimport { HvInput } from \"../../../..\";\nimport { QueryBuilderContext } from \"../../../Context\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./Numeric.styles\";\nimport { useMediaQuery, useTheme } from \"@mui/material\";\nimport numericValueClasses from \"./numericValueClasses\";\n\nexport interface NumericValueProps {\n  id: number;\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 isRange = operator === \"range\";\n  const context = useContext(QueryBuilderContext);\n  const { labels, dispatchAction, readOnly } = context;\n\n  const theme = useTheme();\n\n  const isMdDown = useMediaQuery(theme.breakpoints.down(\"md\"));\n\n  const onSingleValueChange = useCallback(\n    (evt, data) => {\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    (evt, data, 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) => (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            numericValueClasses.rangeContainer,\n            css(styles.rangeContainer),\n            isMdDown\n              ? cx(numericValueClasses.isMdDown, css(styles.isMdDown))\n              : \"\"\n          )}\n        >\n          <div\n            className={cx(\n              numericValueClasses.inputContainer,\n              css(styles.inputContainer)\n            )}\n          >\n            <HvInput\n              label={labels.rule.value.numeric.range.leftLabel}\n              className={cx(numericValueClasses.input, css(styles.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\n            className={cx(\n              numericValueClasses.inputContainer,\n              css(styles.inputContainer)\n            )}\n          >\n            <HvInput\n              label={labels.rule.value.numeric.range.rightLabel}\n              className={cx(numericValueClasses.input, css(styles.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    </ClassNames>\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div className={cx(numericValueClasses.root, css(styles.root))}>\n          {isRange && renderRangeInputs(value || {})}\n          {!isRange && (\n            <div\n              className={cx(\n                numericValueClasses.inputContainer,\n                css(styles.inputContainer)\n              )}\n            >\n              <HvInput\n                label={labels.rule.value.numeric.label}\n                className={cx(numericValueClasses.input, css(styles.input))}\n                id={`${elementId}-numeric`}\n                name={`${elementId}-numeric`}\n                value={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    </ClassNames>\n  );\n};\n\nexport default memo(NumericValue);\n"],"names":["NumericValue","id","value","operator","initialTouched","isRange","context","useContext","QueryBuilderContext","labels","dispatchAction","readOnly","theme","useTheme","isMdDown","useMediaQuery","breakpoints","down","onSingleValueChange","useCallback","evt","data","numericData","isEmpty","Number","type","isNaN","onRangeValueChange","from","currentValue","numericRange","to","touchedNumeric","setTouchedNumeric","useState","touchedNumericTo","setTouchedNumericTo","elementId","uniqueId","numericValidation","rightValidation","undefined","toString","rangeValue","numericStatus","rightStatus","renderRangeInputs","_jsx","ClassNames","children","css","cx","className","numericValueClasses","rangeContainer","styles","inputContainer","HvInput","label","rule","numeric","range","leftLabel","input","name","onChange","event","onBlur","onKeyDown","e","key","preventDefault","status","statusMessage","validation","required","inputProps","autoComplete","placeholder","rightLabel","root","memo"],"mappings":"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"}

package/dist/esm/components/QueryBuilder/Rule/Value/NumericValue/numericValueClasses.js

@@ -0,0 +1,8 @@
+import { getClasses } from "../../../../../utils/classes.js";
+const classKeys = ["root", "label", "inputContainer", "rangeContainer", "input", "isMdDown"];
+const numericValueClasses = getClasses(classKeys, "HvNumericValue");
+const numericValueClasses$1 = numericValueClasses;
+export {
+  numericValueClasses$1 as default
+};
+//# sourceMappingURL=numericValueClasses.js.map

package/dist/esm/components/QueryBuilder/Rule/Value/NumericValue/numericValueClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"numericValueClasses.js","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/NumericValue/numericValueClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvNumericValueClasses {\n  /** Styles applied to the component root class. */\n  root?: string;\n  /** Styles applied to the label. */\n  label?: string;\n  /** Styles applied to input container. */\n  inputContainer?: string;\n  /** Styles applied to input container. */\n  rangeContainer?: string;\n  /** Styles applied to range container. */\n  input?: string;\n  /** Styles applied when the screen size is lower. */\n  isMdDown?: string;\n}\n\nconst classKeys: (keyof HvNumericValueClasses)[] = [\n  \"root\",\n  \"label\",\n  \"inputContainer\",\n  \"rangeContainer\",\n  \"input\",\n  \"isMdDown\",\n];\n\nconst numericValueClasses = getClasses(classKeys, \"HvNumericValue\");\n\nexport default numericValueClasses;\n"],"names":["classKeys","numericValueClasses","getClasses"],"mappings":";AAiBA,MAAMA,YAA6C,CACjD,QACA,SACA,kBACA,kBACA,SACA,UAAU;AAGZ,MAAMC,sBAAsBC,WAAWF,WAAW,gBAAgB;AAElE,MAAA,wBAAeC;"}

package/dist/esm/components/QueryBuilder/Rule/Value/TextValue/TextValue.js

@@ -0,0 +1,61 @@
+import { ClassNames } from "@emotion/react";
+import { memo, useContext, useState } from "react";
+import { QueryBuilderContext } from "../../../Context.js";
+import { styles } from "./TextValue.styles.js";
+import textValueClasses from "./textValueClasses.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { HvInput } from "../../../../Input/Input.js";
+const TextValue = ({
+  id,
+  value = "",
+  initialTouched = false
+}) => {
+  const context = useContext(QueryBuilderContext);
+  const {
+    labels,
+    dispatchAction,
+    readOnly
+  } = context;
+  const [touched, setTouched] = useState(initialTouched);
+  const isValid = value != null && value.toString().trim() !== "";
+  let status = isValid ? "valid" : "invalid";
+  status = !touched ? "standBy" : status;
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => /* @__PURE__ */ jsx(HvInput, {
+      className: cx(textValueClasses.location, css(styles.location)),
+      label: labels.rule.value.text.label,
+      required: true,
+      status,
+      statusMessage: labels.rule.value.text.validation.required,
+      value,
+      inputProps: {
+        autoComplete: "off"
+      },
+      onChange: (t, v) => {
+        dispatchAction({
+          type: "set-value",
+          id,
+          value: v
+        });
+      },
+      onBlur: () => {
+        setTouched(true);
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+        }
+      },
+      placeholder: "—",
+      readOnly
+    })
+  });
+};
+const TextValue$1 = memo(TextValue);
+export {
+  TextValue$1 as default
+};
+//# sourceMappingURL=TextValue.js.map

package/dist/esm/components/QueryBuilder/Rule/Value/TextValue/TextValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextValue.js","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/TextValue/TextValue.tsx"],"sourcesContent":["import { HvFormStatus, HvInput } from \"@core/components\";\nimport { ClassNames } from \"@emotion/react\";\nimport { memo, useContext, useState } from \"react\";\n\nimport { QueryBuilderContext } from \"../../../Context\";\nimport { styles } from \"./TextValue.styles\";\nimport textValueClasses from \"./textValueClasses\";\n\nexport interface TextValueProps {\n  id?: number;\n  value?: any;\n  initialTouched?: boolean;\n}\n\nconst TextValue = ({\n  id,\n  value = \"\",\n  initialTouched = false,\n}: TextValueProps) => {\n  const context = useContext(QueryBuilderContext);\n  const { labels, dispatchAction, readOnly } = context;\n  const [touched, setTouched] = useState(initialTouched);\n  const isValid = value != null && value.toString().trim() !== \"\";\n\n  let status: HvFormStatus = isValid ? \"valid\" : \"invalid\";\n  status = !touched ? \"standBy\" : status;\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <HvInput\n          className={cx(textValueClasses.location, css(styles.location))}\n          label={labels.rule.value.text.label}\n          required\n          status={status}\n          statusMessage={labels.rule.value.text.validation.required}\n          value={value}\n          inputProps={{\n            autoComplete: \"off\",\n          }}\n          onChange={(t, v) => {\n            dispatchAction({\n              type: \"set-value\",\n              id,\n              value: v,\n            });\n          }}\n          onBlur={() => {\n            setTouched(true);\n          }}\n          onKeyDown={(e: any) => {\n            if (e.key === \"Enter\") {\n              e.preventDefault();\n            }\n          }}\n          placeholder=\"—\"\n          readOnly={readOnly}\n        />\n      )}\n    </ClassNames>\n  );\n};\n\nexport default memo(TextValue);\n"],"names":["TextValue","id","value","initialTouched","context","useContext","QueryBuilderContext","labels","dispatchAction","readOnly","touched","setTouched","useState","isValid","toString","trim","status","ClassNames","children","css","cx","HvInput","className","textValueClasses","location","styles","label","rule","text","required","statusMessage","validation","inputProps","autoComplete","onChange","t","v","type","onBlur","onKeyDown","e","key","preventDefault","placeholder","memo"],"mappings":";;;;;;;AAcA,MAAMA,YAAYA,CAAC;AAAA,EACjBC;AAAAA,EACAC,QAAQ;AAAA,EACRC,iBAAiB;AACH,MAAM;AACdC,QAAAA,UAAUC,WAAWC,mBAAmB;AACxC,QAAA;AAAA,IAAEC;AAAAA,IAAQC;AAAAA,IAAgBC;AAAAA,EAAaL,IAAAA;AAC7C,QAAM,CAACM,SAASC,UAAU,IAAIC,SAAST,cAAc;AACrD,QAAMU,UAAUX,SAAS,QAAQA,MAAMY,WAAWC,KAAW,MAAA;AAEzDC,MAAAA,SAAuBH,UAAU,UAAU;AACtC,WAAA,CAACH,UAAU,YAAYM;AAEhC,6BACGC,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,0BACNC,SAAO;AAAA,MACNC,WAAWF,GAAGG,iBAAiBC,UAAUL,IAAIM,OAAOD,QAAQ,CAAC;AAAA,MAC7DE,OAAOnB,OAAOoB,KAAKzB,MAAM0B,KAAKF;AAAAA,MAC9BG,UAAQ;AAAA,MACRb;AAAAA,MACAc,eAAevB,OAAOoB,KAAKzB,MAAM0B,KAAKG,WAAWF;AAAAA,MACjD3B;AAAAA,MACA8B,YAAY;AAAA,QACVC,cAAc;AAAA,MAChB;AAAA,MACAC,UAAUA,CAACC,GAAGC,MAAM;AACH,uBAAA;AAAA,UACbC,MAAM;AAAA,UACNpC;AAAAA,UACAC,OAAOkC;AAAAA,QAAAA,CACR;AAAA,MACH;AAAA,MACAE,QAAQA,MAAM;AACZ3B,mBAAW,IAAI;AAAA,MACjB;AAAA,MACA4B,WAAWA,CAACC,MAAW;AACjBA,YAAAA,EAAEC,QAAQ,SAAS;AACrBD,YAAEE,eAAgB;AAAA,QACpB;AAAA,MACF;AAAA,MACAC,aAAY;AAAA,MACZlC;AAAAA,IAAAA,CAAmB;AAAA,EAAA,CAGZ;AAEjB;AAEA,MAAemC,cAAAA,KAAK5C,SAAS;"}

package/dist/esm/components/QueryBuilder/Rule/Value/TextValue/TextValue.styles.js

@@ -0,0 +1,9 @@
+const styles = {
+  location: {
+    flexGrow: 1
+  }
+};
+export {
+  styles
+};
+//# sourceMappingURL=TextValue.styles.js.map

package/dist/esm/components/QueryBuilder/Rule/Value/TextValue/TextValue.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextValue.styles.js","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/TextValue/TextValue.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { HvTextValueClasses } from \"./textValueClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvTextValueClasses, CSSInterpolation>\n> = {\n  location: {\n    flexGrow: 1,\n  },\n};\n"],"names":["styles","location","flexGrow"],"mappings":"AAGO,MAAMA,SAET;AAAA,EACFC,UAAU;AAAA,IACRC,UAAU;AAAA,EACZ;AACF;"}

package/dist/esm/components/QueryBuilder/Rule/Value/TextValue/textValueClasses.js

@@ -0,0 +1,8 @@
+import { getClasses } from "../../../../../utils/classes.js";
+const classKeys = ["location"];
+const textValueClasses = getClasses(classKeys, "HvTextValue");
+const textValueClasses$1 = textValueClasses;
+export {
+  textValueClasses$1 as default
+};
+//# sourceMappingURL=textValueClasses.js.map

package/dist/esm/components/QueryBuilder/Rule/Value/TextValue/textValueClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textValueClasses.js","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/TextValue/textValueClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvTextValueClasses {\n  /** Styles applied to the location class. */\n  location?: string;\n}\n\nconst classKeys: (keyof HvTextValueClasses)[] = [\"location\"];\n\nconst textValueClasses = getClasses(classKeys, \"HvTextValue\");\n\nexport default textValueClasses;\n"],"names":["classKeys","textValueClasses","getClasses"],"mappings":";AAOA,MAAMA,YAA0C,CAAC,UAAU;AAE3D,MAAMC,mBAAmBC,WAAWF,WAAW,aAAa;AAE5D,MAAA,qBAAeC;"}

package/dist/esm/components/QueryBuilder/Rule/Value/Value.js

@@ -0,0 +1,62 @@
+import { useContext, memo } from "react";
+import { QueryBuilderContext } from "../../Context.js";
+import TextValue from "./TextValue/TextValue.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { BooleanValue } from "./BooleanValue/BooleanValue.js";
+import { NumericValue } from "./NumericValue/NumericValue.js";
+const Value = ({
+  id,
+  attribute,
+  operator,
+  value: valueProp
+}) => {
+  const context = useContext(QueryBuilderContext);
+  const {
+    attributes,
+    initialTouched
+  } = context;
+  const value = attribute && attributes ? {
+    ...attributes[attribute]
+  } : {
+    type: null
+  };
+  const {
+    type
+  } = value;
+  switch (type) {
+    case "boolean": {
+      return /* @__PURE__ */ jsx(BooleanValue, {
+        id,
+        value: !!valueProp
+      });
+    }
+    case "numeric": {
+      return /* @__PURE__ */ jsx(NumericValue, {
+        id,
+        operator,
+        value: valueProp,
+        initialTouched
+      });
+    }
+    case "text":
+    case "textarea":
+    default: {
+      return /* @__PURE__ */ jsx(TextValue, {
+        id,
+        value: valueProp,
+        initialTouched
+      });
+    }
+    case "dateandtime": {
+      return /* @__PURE__ */ jsx(BooleanValue, {
+        id,
+        value: !!valueProp
+      });
+    }
+  }
+};
+memo(Value);
+export {
+  Value
+};
+//# sourceMappingURL=Value.js.map

package/dist/esm/components/QueryBuilder/Rule/Value/Value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Value.js","sources":["../../../../../../src/components/QueryBuilder/Rule/Value/Value.tsx"],"sourcesContent":["import { memo, useContext } from \"react\";\n\nimport { QueryBuilderContext } from \"../../Context\";\nimport { BooleanValue } from \"./BooleanValue\";\nimport { NumericValue } from \"./NumericValue\";\nimport TextValue from \"./TextValue/TextValue\";\n\n// import DateTimeValue from \"./DateTimeValue\";\n\nexport interface ValueProps {\n  id: number;\n  attribute: string;\n  operator: string;\n  value: any;\n}\n\nexport const Value = ({\n  id,\n  attribute,\n  operator,\n  value: valueProp,\n}: ValueProps) => {\n  const context = useContext(QueryBuilderContext);\n  const { attributes, initialTouched } = context;\n  const value =\n    attribute && attributes ? { ...attributes[attribute] } : { type: null };\n  const { type } = value;\n\n  switch (type) {\n    case \"boolean\": {\n      return <BooleanValue id={id} value={!!valueProp} />;\n    }\n    case \"numeric\": {\n      return (\n        <NumericValue\n          id={id}\n          operator={operator}\n          value={valueProp}\n          initialTouched={initialTouched}\n        />\n      );\n    }\n    case \"text\":\n    case \"textarea\":\n    default: {\n      return (\n        <TextValue id={id} value={valueProp} initialTouched={initialTouched} />\n      );\n    }\n    case \"dateandtime\": {\n      return <BooleanValue id={id} value={!!valueProp} />;\n    }\n  }\n};\n\nexport default memo(Value);\n"],"names":["Value","id","attribute","operator","value","valueProp","context","useContext","QueryBuilderContext","attributes","initialTouched","type","BooleanValue","NumericValue","TextValue","memo"],"mappings":";;;;;;AAgBO,MAAMA,QAAQA,CAAC;AAAA,EACpBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAOC;AACG,MAAM;AACVC,QAAAA,UAAUC,WAAWC,mBAAmB;AACxC,QAAA;AAAA,IAAEC;AAAAA,IAAYC;AAAAA,EAAmBJ,IAAAA;AACjCF,QAAAA,QACJF,aAAaO,aAAa;AAAA,IAAE,GAAGA,WAAWP,SAAS;AAAA,EAAA,IAAM;AAAA,IAAES,MAAM;AAAA,EAAA;AAC7D,QAAA;AAAA,IAAEA;AAAAA,EAASP,IAAAA;AAEjB,UAAQO,MAAI;AAAA,IACV,KAAK,WAAW;AACd,iCAAQC,cAAY;AAAA,QAACX;AAAAA,QAAQG,OAAO,CAAC,CAACC;AAAAA,MAAAA,CAAa;AAAA,IACrD;AAAA,IACA,KAAK,WAAW;AACd,iCACGQ,cAAY;AAAA,QACXZ;AAAAA,QACAE;AAAAA,QACAC,OAAOC;AAAAA,QACPK;AAAAA,MAAAA,CACA;AAAA,IAEN;AAAA,IACA,KAAK;AAAA,IACL,KAAK;AAAA,IACL,SAAS;AACP,iCACGI,WAAS;AAAA,QAACb;AAAAA,QAAQG,OAAOC;AAAAA,QAAWK;AAAAA,MAAAA,CAAkC;AAAA,IAE3E;AAAA,IACA,KAAK,eAAe;AAClB,iCAAQE,cAAY;AAAA,QAACX;AAAAA,QAAQG,OAAO,CAAC,CAACC;AAAAA,MAAAA,CAAa;AAAA,IACrD;AAAA,EAAC;AAEL;AAEeU,KAAKf,KAAK;"}

package/dist/esm/components/QueryBuilder/Rule/ruleClasses.js

@@ -0,0 +1,8 @@
+import { getClasses } from "../../../utils/classes.js";
+const classKeys = ["root", "actionsContainer", "isMdDown"];
+const ruleClasses = getClasses(classKeys, "HvRule");
+const ruleClasses$1 = ruleClasses;
+export {
+  ruleClasses$1 as default
+};
+//# sourceMappingURL=ruleClasses.js.map

package/dist/esm/components/QueryBuilder/Rule/ruleClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ruleClasses.js","sources":["../../../../../src/components/QueryBuilder/Rule/ruleClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvRuleClasses {\n  /** Styles applied to the component root class. */\n  root?: string;\n  /** Styles applied to the actions container. */\n  actionsContainer?: string;\n  /** Styles applied when the screen size is lower. */\n  isMdDown?: string;\n}\n\nconst classKeys: (keyof HvRuleClasses)[] = [\n  \"root\",\n  \"actionsContainer\",\n  \"isMdDown\",\n];\n\nconst ruleClasses = getClasses(classKeys, \"HvRule\");\n\nexport default ruleClasses;\n"],"names":["classKeys","ruleClasses","getClasses"],"mappings":";AAWA,MAAMA,YAAqC,CACzC,QACA,oBACA,UAAU;AAGZ,MAAMC,cAAcC,WAAWF,WAAW,QAAQ;AAElD,MAAA,gBAAeC;"}

package/dist/esm/components/QueryBuilder/RuleGroup/RuleGroup.js

@@ -0,0 +1,212 @@
+import { useContext, useCallback } from "react";
+import { Delete, Info, Add } from "@hitachivantara/uikit-react-icons";
+import queryBuilderClasses from "../queryBuilderClasses.js";
+import { QueryBuilderContext } from "../Context.js";
+import { ClassNames } from "@emotion/react";
+import { styles } from "./RuleGroup.styles.js";
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import withTooltip from "../../../hocs/withTooltip.js";
+import { Rule } from "../Rule/Rule.js";
+import { HvEmptyState } from "../../EmptyState/EmptyState.js";
+import { HvGrid } from "../../Grid/Grid.js";
+import { HvMultiButton } from "../../MultiButton/MultiButton.js";
+import { HvButton } from "../../Button/Button.js";
+import { HvTypography } from "../../Typography/Typography.js";
+const RuleGroup = ({
+  level = 0,
+  id,
+  combinator = "and",
+  rules = [],
+  classes
+}) => {
+  var _a, _b, _c, _d;
+  const context = useContext(QueryBuilderContext);
+  const {
+    dispatchAction,
+    askAction,
+    maxDepth,
+    combinators,
+    labels,
+    readOnly
+  } = context;
+  const normalizedMaxDepth = maxDepth - 1;
+  const actionButtons = /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => {
+      var _a2, _b2, _c2, _d2, _e, _f, _g, _h;
+      return /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx("div", {
+          className: cx(queryBuilderClasses.buttonBackground, css(styles.buttonBackground), classes == null ? void 0 : classes.buttonBackground),
+          children: /* @__PURE__ */ jsx(HvButton, {
+            variant: "secondarySubtle",
+            onClick: () => {
+              dispatchAction({
+                type: "add-rule",
+                id
+              });
+            },
+            disabled: readOnly,
+            startIcon: /* @__PURE__ */ jsx(Add, {}),
+            children: level === 0 && ((_b2 = (_a2 = labels.query) == null ? void 0 : _a2.addRule) == null ? void 0 : _b2.label) != null ? (_d2 = (_c2 = labels.query) == null ? void 0 : _c2.addRule) == null ? void 0 : _d2.label : labels.group.addRule.label
+          })
+        }), level <= normalizedMaxDepth && /* @__PURE__ */ jsx("div", {
+          className: cx(queryBuilderClasses.buttonBackground, css(styles.buttonBackground), classes == null ? void 0 : classes.buttonBackground),
+          children: /* @__PURE__ */ jsx(HvButton, {
+            variant: "secondarySubtle",
+            onClick: () => {
+              dispatchAction({
+                type: "add-group",
+                id
+              });
+            },
+            disabled: readOnly,
+            startIcon: /* @__PURE__ */ jsx(Add, {}),
+            children: level === 0 && ((_f = (_e = labels.query) == null ? void 0 : _e.addGroup) == null ? void 0 : _f.label) != null ? (_h = (_g = labels.query) == null ? void 0 : _g.addGroup) == null ? void 0 : _h.label : labels.group.addGroup.label
+          })
+        })]
+      });
+    }
+  });
+  const DeleteIcon = withTooltip(() => /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => /* @__PURE__ */ jsx(Delete, {
+      className: readOnly ? cx(queryBuilderClasses.topRemoveButtonDisabled, css(styles.topRemoveButtonDisabled), classes == null ? void 0 : classes.topRemoveButtonDisabled) : ""
+    })
+  }), level === 0 && ((_b = (_a = labels.query) == null ? void 0 : _a.delete) == null ? void 0 : _b.tooltip) ? (_d = (_c = labels.query) == null ? void 0 : _c.delete) == null ? void 0 : _d.tooltip : labels.group.delete.tooltip, "top");
+  const onClickCombinator = useCallback((item) => {
+    dispatchAction({
+      type: "set-combinator",
+      id,
+      combinator: item.operand
+    });
+  }, [dispatchAction, id]);
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => {
+      var _a2, _b2, _c2, _d2, _e, _f, _g, _h;
+      return /* @__PURE__ */ jsxs("div", {
+        className: cx(queryBuilderClasses.root, css(styles.root), classes == null ? void 0 : classes.root, level === 0 ? cx(queryBuilderClasses.topGroup, css(styles.topGroup), classes == null ? void 0 : classes.topGroup) : cx(queryBuilderClasses.subGroup, css(styles.subGroup), classes == null ? void 0 : classes.subGroup)),
+        children: [/* @__PURE__ */ jsxs(HvGrid, {
+          container: true,
+          children: [/* @__PURE__ */ jsx(HvGrid, {
+            item: true,
+            children: /* @__PURE__ */ jsx(HvMultiButton, {
+              className: cx(queryBuilderClasses.combinator, css(styles.combinator), classes == null ? void 0 : classes.combinator, queryBuilderClasses.topCombinator, css(styles.topCombinator), classes == null ? void 0 : classes.topCombinator),
+              disabled: readOnly,
+              children: combinators && combinators.map((item) => /* @__PURE__ */ jsx(HvButton, {
+                className: cx(queryBuilderClasses.combinatorButton, css(styles.combinatorButton), classes == null ? void 0 : classes.combinatorButton),
+                selected: item.operand === combinator,
+                onClick: () => item.operand && onClickCombinator(item),
+                disabled: readOnly,
+                size: "xs",
+                children: item.label
+              }, item.operand))
+            })
+          }), /* @__PURE__ */ jsx(HvGrid, {
+            item: true,
+            children: /* @__PURE__ */ jsx("div", {
+              className: cx(queryBuilderClasses.buttonBackground, css(styles.buttonBackground), classes == null ? void 0 : classes.buttonBackground, queryBuilderClasses.topRemoveButton, css(styles.topRemoveButton), classes == null ? void 0 : classes.topRemoveButton),
+              children: /* @__PURE__ */ jsx(HvButton, {
+                icon: true,
+                className: cx(queryBuilderClasses.removeButton, css(styles.removeButton), classes == null ? void 0 : classes.removeButton),
+                onClick: () => {
+                  var _a3;
+                  askAction({
+                    actions: [{
+                      type: "remove-node",
+                      id
+                    }],
+                    dialog: level === 0 && ((_a3 = labels.query) == null ? void 0 : _a3.delete) != null ? labels.query.delete : labels.group.delete
+                  });
+                },
+                "aria-label": level === 0 && ((_b2 = (_a2 = labels.query) == null ? void 0 : _a2.delete) == null ? void 0 : _b2.ariaLabel) ? (_d2 = (_c2 = labels.query) == null ? void 0 : _c2.delete) == null ? void 0 : _d2.ariaLabel : labels.group.delete.ariaLabel,
+                disabled: readOnly,
+                variant: "secondaryGhost",
+                children: /* @__PURE__ */ jsx(DeleteIcon, {})
+              })
+            })
+          })]
+        }), (rules == null ? void 0 : rules.length) > 0 && /* @__PURE__ */ jsx("div", {
+          className: cx(queryBuilderClasses.rulesContainer, css(styles.rulesContainer), classes == null ? void 0 : classes.rulesContainer, level > 0 ? cx(queryBuilderClasses.subRulesContainer, css(styles.subRulesContainer), classes == null ? void 0 : classes.subRulesContainer) : "", level === 0 ? cx(queryBuilderClasses.topRulesContainer, css(styles.topRulesContainer), classes == null ? void 0 : classes.topRulesContainer) : ""),
+          children: rules.map((rule, index) => {
+            if ("combinator" in rule) {
+              return /* @__PURE__ */ jsx(RuleGroup, {
+                level: level + 1,
+                ...rule,
+                id: rule.id,
+                classes
+              }, rule.id ?? index);
+            }
+            const isInvalid = combinator === "and" && rules.some((r, i) => {
+              if ("attribute" in r) {
+                if (r.attribute === rule.attribute && r.id !== rule.id && i < index) {
+                  return true;
+                }
+              }
+              return false;
+            });
+            return /* @__PURE__ */ jsx(Rule, {
+              ...rule,
+              isInvalid,
+              id: rule.id,
+              combinator
+            }, rule.id ?? index);
+          })
+        }), (rules == null ? void 0 : rules.length) === 0 && /* @__PURE__ */ jsx(HvEmptyState, {
+          title: (_e = labels.empty) == null ? void 0 : _e.title,
+          message: /* @__PURE__ */ jsxs(Fragment, {
+            children: [/* @__PURE__ */ jsx(HvTypography, {
+              variant: "link",
+              component: "a",
+              onClick: () => {
+                dispatchAction({
+                  type: "add-rule",
+                  id
+                });
+              },
+              style: {
+                cursor: "pointer",
+                textDecoration: "underline"
+              },
+              children: `${(_f = labels.empty) == null ? void 0 : _f.createCondition}`
+            }), level <= normalizedMaxDepth && /* @__PURE__ */ jsxs(Fragment, {
+              children: [`${(_g = labels.empty) == null ? void 0 : _g.spacer}`, /* @__PURE__ */ jsx(HvTypography, {
+                variant: "link",
+                component: "a",
+                onClick: () => {
+                  dispatchAction({
+                    type: "add-group",
+                    id
+                  });
+                },
+                style: {
+                  cursor: "pointer",
+                  textDecoration: "underline"
+                },
+                children: `${(_h = labels.empty) == null ? void 0 : _h.createGroup}`
+              })]
+            })]
+          }),
+          icon: /* @__PURE__ */ jsx(Info, {})
+        }), /* @__PURE__ */ jsx(HvGrid, {
+          container: true,
+          children: /* @__PURE__ */ jsx(HvGrid, {
+            item: true,
+            className: cx(queryBuilderClasses.actionButtonContainer, css(styles.actionButtonContainer), classes == null ? void 0 : classes.actionButtonContainer, queryBuilderClasses.topActionButtonContainer, css(styles.topActionButtonContainer), classes == null ? void 0 : classes.topActionButtonContainer),
+            children: actionButtons
+          })
+        })]
+      });
+    }
+  });
+};
+export {
+  RuleGroup
+};
+//# sourceMappingURL=RuleGroup.js.map