@hitachivantara/uikit-react-core 5.5.0 → 5.6.0

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

@@ -0,0 +1,67 @@
+import { useContext, useMemo, memo } from "react";
+import { QueryBuilderContext } from "../../Context.js";
+import { isBigList } from "../../utils/index.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { HvDropdown } from "../../../Dropdown/Dropdown.js";
+const Operator = ({
+  id,
+  combinator,
+  attribute,
+  operator
+}) => {
+  const context = useContext(QueryBuilderContext);
+  const {
+    dispatchAction,
+    attributes,
+    operators,
+    labels,
+    readOnly
+  } = context;
+  const value = operator ?? null;
+  const values = useMemo(() => {
+    const attributeSpec = attribute && attributes ? attributes[attribute] : null;
+    const options = attributeSpec ? operators[attributeSpec.type].filter((o) => o.combinators.includes(combinator)) ?? [] : [];
+    return options.map((key) => ({
+      id: key.operator,
+      label: key.label,
+      selected: key.operator === value
+    }));
+  }, [attribute, attributes, operators, combinator, value]);
+  return /* @__PURE__ */ jsx(HvDropdown, {
+    required: true,
+    status: "valid",
+    singleSelectionToggle: false,
+    label: labels.rule.operator.label,
+    placeholder: labels.rule.operator.placeholder,
+    values,
+    disabled: values.length === 0,
+    readOnly,
+    onChange: (selected) => {
+      if (selected && !Array.isArray(selected) && selected.id) {
+        dispatchAction({
+          type: "set-operator",
+          id,
+          operator: selected.id.toString(),
+          value: value === "range" || selected.id === "range" ? null : void 0
+        });
+      } else {
+        dispatchAction({
+          type: "set-operator",
+          id,
+          operator: null,
+          value: null
+        });
+      }
+    },
+    showSearch: isBigList(values),
+    ...isBigList(values) && {
+      virtualized: true,
+      height: 300
+    }
+  });
+};
+memo(Operator);
+export {
+  Operator
+};
+//# sourceMappingURL=Operator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Operator.js","sources":["../../../../../../src/components/QueryBuilder/Rule/Operator/Operator.tsx"],"sourcesContent":["import { HvDropdown } from \"@core/components\";\nimport { memo, useContext, useMemo } from \"react\";\nimport { QueryBuilderContext } from \"../../Context\";\nimport { isBigList } from \"../../utils/index\";\n\nexport interface OperatorProps {\n  id: number;\n  combinator: string;\n  attribute: string;\n  operator: string;\n}\n\nexport const Operator = ({ id, combinator, attribute, operator }) => {\n  const context = useContext(QueryBuilderContext);\n\n  const { dispatchAction, attributes, operators, labels, readOnly } = context;\n\n  const value = operator ?? null;\n\n  const values = useMemo(() => {\n    const attributeSpec =\n      attribute && attributes ? attributes[attribute] : null;\n    const options = attributeSpec\n      ? operators[attributeSpec.type].filter((o) =>\n          o.combinators.includes(combinator)\n        ) ?? []\n      : [];\n    return options.map((key) => ({\n      id: key.operator,\n      label: key.label,\n      selected: key.operator === value,\n    }));\n  }, [attribute, attributes, operators, combinator, value]);\n\n  return (\n    <HvDropdown\n      required\n      status=\"valid\"\n      singleSelectionToggle={false}\n      label={labels.rule.operator.label}\n      placeholder={labels.rule.operator.placeholder}\n      values={values}\n      disabled={values.length === 0}\n      readOnly={readOnly}\n      onChange={(selected) => {\n        if (selected && !Array.isArray(selected) && selected.id) {\n          dispatchAction({\n            type: \"set-operator\",\n            id,\n            operator: selected.id.toString(),\n            value:\n              value === \"range\" || selected.id === \"range\" ? null : undefined,\n          });\n        } else {\n          dispatchAction({\n            type: \"set-operator\",\n            id,\n            operator: null,\n            value: null,\n          });\n        }\n      }}\n      showSearch={isBigList(values)}\n      {...(isBigList(values) && { virtualized: true, height: 300 })}\n    />\n  );\n};\n\nexport default memo(Operator);\n"],"names":["Operator","id","combinator","attribute","operator","context","useContext","QueryBuilderContext","dispatchAction","attributes","operators","labels","readOnly","value","values","useMemo","attributeSpec","options","type","filter","o","combinators","includes","map","key","label","selected","HvDropdown","required","status","singleSelectionToggle","rule","placeholder","disabled","length","onChange","Array","isArray","toString","undefined","showSearch","isBigList","virtualized","height","memo"],"mappings":";;;;;AAYO,MAAMA,WAAWA,CAAC;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAAYC;AAAAA,EAAWC;AAAS,MAAM;AAC7DC,QAAAA,UAAUC,WAAWC,mBAAmB;AAExC,QAAA;AAAA,IAAEC;AAAAA,IAAgBC;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,IAAQC;AAAAA,EAAaP,IAAAA;AAEpE,QAAMQ,QAAQT,YAAY;AAEpBU,QAAAA,SAASC,QAAQ,MAAM;AAC3B,UAAMC,gBACJb,aAAaM,aAAaA,WAAWN,SAAS,IAAI;AACpD,UAAMc,UAAUD,gBACZN,UAAUM,cAAcE,IAAI,EAAEC,OAAQC,CAAAA,MACpCA,EAAEC,YAAYC,SAASpB,UAAU,CAAC,KAC/B,KACL;AACGe,WAAAA,QAAQM,IAAKC,CAAS,SAAA;AAAA,MAC3BvB,IAAIuB,IAAIpB;AAAAA,MACRqB,OAAOD,IAAIC;AAAAA,MACXC,UAAUF,IAAIpB,aAAaS;AAAAA,IAC3B,EAAA;AAAA,EAAA,GACD,CAACV,WAAWM,YAAYC,WAAWR,YAAYW,KAAK,CAAC;AAExD,6BACGc,YAAU;AAAA,IACTC,UAAQ;AAAA,IACRC,QAAO;AAAA,IACPC,uBAAuB;AAAA,IACvBL,OAAOd,OAAOoB,KAAK3B,SAASqB;AAAAA,IAC5BO,aAAarB,OAAOoB,KAAK3B,SAAS4B;AAAAA,IAClClB;AAAAA,IACAmB,UAAUnB,OAAOoB,WAAW;AAAA,IAC5BtB;AAAAA,IACAuB,UAAWT,CAAa,aAAA;AACtB,UAAIA,YAAY,CAACU,MAAMC,QAAQX,QAAQ,KAAKA,SAASzB,IAAI;AACxC,uBAAA;AAAA,UACbiB,MAAM;AAAA,UACNjB;AAAAA,UACAG,UAAUsB,SAASzB,GAAGqC,SAAU;AAAA,UAChCzB,OACEA,UAAU,WAAWa,SAASzB,OAAO,UAAU,OAAOsC;AAAAA,QAAAA,CACzD;AAAA,MAAA,OACI;AACU,uBAAA;AAAA,UACbrB,MAAM;AAAA,UACNjB;AAAAA,UACAG,UAAU;AAAA,UACVS,OAAO;AAAA,QAAA,CACR;AAAA,MACH;AAAA,IACF;AAAA,IACA2B,YAAYC,UAAU3B,MAAM;AAAA,IAAE,GACzB2B,UAAU3B,MAAM,KAAK;AAAA,MAAE4B,aAAa;AAAA,MAAMC,QAAQ;AAAA,IAAI;AAAA,EAAA,CAC3D;AAEN;AAEeC,KAAK5C,QAAQ;"}

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

@@ -0,0 +1,110 @@
+import { ClassNames } from "@emotion/react";
+import { Delete } from "@hitachivantara/uikit-react-icons";
+import { useTheme, useMediaQuery } from "@mui/material";
+import { useContext, useMemo } from "react";
+import { QueryBuilderContext } from "../Context.js";
+import { styles } from "./Rule.styles.js";
+import ruleClasses from "./ruleClasses.js";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import withTooltip from "../../../hocs/withTooltip.js";
+import { HvGrid } from "../../Grid/Grid.js";
+import { Attribute } from "./Attribute/Attribute.js";
+import { Operator } from "./Operator/Operator.js";
+import { Value } from "./Value/Value.js";
+import { HvButton } from "../../Button/Button.js";
+const Rule = ({
+  id,
+  combinator,
+  attribute,
+  operator,
+  value,
+  disabled,
+  isInvalid
+}) => {
+  const context = useContext(QueryBuilderContext);
+  const theme = useTheme();
+  const isMdDown = useMediaQuery(theme.breakpoints.down("md"));
+  const {
+    askAction,
+    attributes,
+    operators,
+    labels,
+    readOnly
+  } = context;
+  const availableOperators = useMemo(() => {
+    const attributeSpec = attribute != null && attributes ? attributes[attribute] : null;
+    if (attributeSpec != null) {
+      const typeOperators = operators[attributeSpec.type];
+      if (typeOperators != null) {
+        return typeOperators.reduce((count, item) => count + (item.combinators.includes(combinator) ? 1 : 0), 0);
+      }
+    }
+    return -1;
+  }, [attribute, attributes, combinator, operators]);
+  const shouldShowValueInput = operator !== "Empty" && operator !== "IsNotEmpty";
+  const DeleteIcon = withTooltip(() => /* @__PURE__ */ jsx(Delete, {}), labels.rule.delete.tooltip, "bottom");
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => /* @__PURE__ */ jsxs(HvGrid, {
+      container: true,
+      className: cx(ruleClasses.root, css(styles.root), isMdDown ? cx(ruleClasses.isMdDown, css(styles.isMdDown)) : ""),
+      spacing: 0,
+      wrap: "nowrap",
+      children: [/* @__PURE__ */ jsx(HvGrid, {
+        item: true,
+        xs: 2,
+        lg: 3,
+        children: /* @__PURE__ */ jsx(Attribute, {
+          attribute,
+          id,
+          disabled,
+          isInvalid
+        })
+      }), attribute != null && availableOperators > 0 && /* @__PURE__ */ jsx(HvGrid, {
+        item: true,
+        xs: 2,
+        lg: 3,
+        children: /* @__PURE__ */ jsx(Operator, {
+          id,
+          combinator,
+          attribute,
+          operator
+        })
+      }), attribute != null && (operator != null || availableOperators === 0) && /* @__PURE__ */ jsx(HvGrid, {
+        item: true,
+        xs: true,
+        children: shouldShowValueInput && /* @__PURE__ */ jsx(Value, {
+          attribute,
+          id,
+          operator,
+          value
+        })
+      }), /* @__PURE__ */ jsx(HvGrid, {
+        item: true,
+        className: cx(ruleClasses.actionsContainer, css(styles.actionsContainer)),
+        children: /* @__PURE__ */ jsx(HvButton, {
+          icon: true,
+          "aria-label": labels.rule.delete.ariaLabel,
+          onClick: () => {
+            askAction({
+              actions: [{
+                type: "remove-node",
+                id
+              }],
+              dialog: labels.rule.delete
+            });
+          },
+          disabled: readOnly,
+          variant: "secondaryGhost",
+          children: /* @__PURE__ */ jsx(DeleteIcon, {})
+        })
+      })]
+    })
+  });
+};
+export {
+  Rule
+};
+//# sourceMappingURL=Rule.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Rule.js","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.tsx"],"sourcesContent":["import { HvButton, HvGrid } from \"@core/components\";\nimport { withTooltip } from \"@core/hocs\";\nimport { ClassNames } from \"@emotion/react\";\nimport { Delete } from \"@hitachivantara/uikit-react-icons\";\nimport { useMediaQuery, useTheme } from \"@mui/material\";\nimport { useContext, useMemo } from \"react\";\nimport { QueryBuilderContext } from \"../Context\";\nimport { Attribute } from \"./Attribute\";\nimport { Operator } from \"./Operator\";\nimport { styles } from \"./Rule.styles\";\nimport ruleClasses from \"./ruleClasses\";\nimport { Value } from \"./Value\";\n\nexport interface RuleProps {\n  id: number;\n  combinator: string;\n  attribute: string;\n  operator: string;\n  value: any;\n  disabled: boolean;\n  isInvalid: boolean;\n}\n\nexport const Rule = ({\n  id,\n  combinator,\n  attribute,\n  operator,\n  value,\n  disabled,\n  isInvalid,\n}: RuleProps) => {\n  const context = useContext(QueryBuilderContext);\n\n  const theme = useTheme();\n\n  const isMdDown = useMediaQuery(theme.breakpoints.down(\"md\"));\n\n  const { askAction, attributes, operators, labels, readOnly } = context;\n\n  const availableOperators = useMemo(() => {\n    const attributeSpec =\n      attribute != null && attributes ? attributes[attribute] : null;\n    if (attributeSpec != null) {\n      const typeOperators = operators[attributeSpec.type];\n      if (typeOperators != null) {\n        return typeOperators.reduce(\n          (count, item) =>\n            count + (item.combinators.includes(combinator) ? 1 : 0),\n          0\n        );\n      }\n    }\n\n    return -1;\n  }, [attribute, attributes, combinator, operators]);\n\n  const shouldShowValueInput =\n    operator !== \"Empty\" && operator !== \"IsNotEmpty\";\n\n  const DeleteIcon = withTooltip(\n    () => <Delete />,\n    labels.rule.delete.tooltip,\n    \"bottom\"\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <HvGrid\n          container\n          className={cx(\n            ruleClasses.root,\n            css(styles.root),\n            isMdDown ? cx(ruleClasses.isMdDown, css(styles.isMdDown)) : \"\"\n          )}\n          spacing={0}\n          wrap=\"nowrap\"\n        >\n          <HvGrid item xs={2} lg={3}>\n            <Attribute\n              attribute={attribute}\n              id={id}\n              disabled={disabled}\n              isInvalid={isInvalid}\n            />\n          </HvGrid>\n          {attribute != null && availableOperators > 0 && (\n            <HvGrid item xs={2} lg={3}>\n              <Operator\n                id={id}\n                combinator={combinator}\n                attribute={attribute}\n                operator={operator}\n              />\n            </HvGrid>\n          )}\n          {attribute != null &&\n            (operator != null || availableOperators === 0) && (\n              <HvGrid item xs>\n                {shouldShowValueInput && (\n                  <Value\n                    attribute={attribute}\n                    id={id}\n                    operator={operator}\n                    value={value}\n                  />\n                )}\n              </HvGrid>\n            )}\n          <HvGrid\n            item\n            className={cx(\n              ruleClasses.actionsContainer,\n              css(styles.actionsContainer)\n            )}\n          >\n            <HvButton\n              icon\n              aria-label={labels.rule.delete.ariaLabel}\n              onClick={() => {\n                askAction({\n                  actions: [{ type: \"remove-node\", id }],\n                  dialog: labels.rule.delete,\n                });\n              }}\n              disabled={readOnly}\n              variant=\"secondaryGhost\"\n            >\n              <DeleteIcon />\n            </HvButton>\n          </HvGrid>\n        </HvGrid>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["Rule","id","combinator","attribute","operator","value","disabled","isInvalid","context","useContext","QueryBuilderContext","theme","useTheme","isMdDown","useMediaQuery","breakpoints","down","askAction","attributes","operators","labels","readOnly","availableOperators","useMemo","attributeSpec","typeOperators","type","reduce","count","item","combinators","includes","shouldShowValueInput","DeleteIcon","withTooltip","_jsx","Delete","rule","delete","tooltip","ClassNames","children","css","cx","HvGrid","container","className","ruleClasses","root","styles","spacing","wrap","xs","lg","Attribute","Operator","Value","actionsContainer","HvButton","icon","ariaLabel","onClick","actions","dialog","variant"],"mappings":"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"}

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

@@ -0,0 +1,53 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import queryBuilderClasses from "../queryBuilderClasses.js";
+const styles = {
+  root: {
+    position: "relative",
+    marginTop: theme.space.xs,
+    minHeight: 94,
+    "&>div:not(:last-child)": {
+      marginRight: theme.space.md
+    },
+    // hide required * as all fields are required
+    "& label>span[aria-hidden]": {
+      visibility: "hidden"
+    },
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      zIndex: 2,
+      width: theme.queryBuilder.ruleConnectorHorizontalSize,
+      height: theme.queryBuilder.ruleConnectorHeight,
+      borderBottom: theme.queryBuilder.border,
+      borderLeft: theme.queryBuilder.border,
+      top: 0,
+      left: theme.queryBuilder.ruleLeftConnectorPosition
+    },
+    [`:not(.${queryBuilderClasses.topRulesContainer})>&:last-child::after`]: {
+      content: '""',
+      position: "absolute",
+      zIndex: 1,
+      width: theme.queryBuilder.ruleConnectorHorizontalSize,
+      height: "100%",
+      borderLeft: theme.queryBuilder.border,
+      top: 0,
+      left: theme.queryBuilder.ruleLeftConnectorPosition
+    }
+  },
+  actionsContainer: {
+    marginLeft: "auto",
+    marginTop: theme.queryBuilder.actionsContainerMarginTop,
+    "&>:not(:last-child)": {
+      marginRight: theme.space.xs
+    }
+  },
+  isMdDown: {
+    "&>div:not(:last-child)": {
+      marginRight: `calc(${theme.space.md} / 2)`
+    }
+  }
+};
+export {
+  styles
+};
+//# sourceMappingURL=Rule.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Rule.styles.js","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport queryBuilderClasses from \"../queryBuilderClasses\";\n\nexport const styles: {\n  [key: string]: CSSInterpolation;\n} = {\n  root: {\n    position: \"relative\",\n    marginTop: theme.space.xs,\n\n    minHeight: 94,\n\n    \"&>div:not(:last-child)\": {\n      marginRight: theme.space.md,\n    },\n\n    // hide required * as all fields are required\n    \"& label>span[aria-hidden]\": {\n      visibility: \"hidden\",\n    },\n    \"&::before\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 2,\n\n      width: theme.queryBuilder.ruleConnectorHorizontalSize,\n      height: theme.queryBuilder.ruleConnectorHeight,\n\n      borderBottom: theme.queryBuilder.border,\n      borderLeft: theme.queryBuilder.border,\n\n      top: 0,\n      left: theme.queryBuilder.ruleLeftConnectorPosition,\n    },\n    [`:not(.${queryBuilderClasses.topRulesContainer})>&:last-child::after`]: {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 1,\n\n      width: theme.queryBuilder.ruleConnectorHorizontalSize,\n      height: \"100%\",\n\n      borderLeft: theme.queryBuilder.border,\n\n      top: 0,\n      left: theme.queryBuilder.ruleLeftConnectorPosition,\n    },\n  },\n  actionsContainer: {\n    marginLeft: \"auto\",\n    marginTop: theme.queryBuilder.actionsContainerMarginTop,\n\n    \"&>:not(:last-child)\": {\n      marginRight: theme.space.xs,\n    },\n  },\n  isMdDown: {\n    \"&>div:not(:last-child)\": {\n      marginRight: `calc(${theme.space.md} / 2)`,\n    },\n  },\n};\n"],"names":["styles","root","position","marginTop","theme","space","xs","minHeight","marginRight","md","visibility","content","zIndex","width","queryBuilder","ruleConnectorHorizontalSize","height","ruleConnectorHeight","borderBottom","border","borderLeft","top","left","ruleLeftConnectorPosition","queryBuilderClasses","topRulesContainer","actionsContainer","marginLeft","actionsContainerMarginTop","isMdDown"],"mappings":";;AAIO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,WAAWC,MAAMC,MAAMC;AAAAA,IAEvBC,WAAW;AAAA,IAEX,0BAA0B;AAAA,MACxBC,aAAaJ,MAAMC,MAAMI;AAAAA,IAC3B;AAAA;AAAA,IAGA,6BAA6B;AAAA,MAC3BC,YAAY;AAAA,IACd;AAAA,IACA,aAAa;AAAA,MACXC,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAOT,MAAMU,aAAaC;AAAAA,MAC1BC,QAAQZ,MAAMU,aAAaG;AAAAA,MAE3BC,cAAcd,MAAMU,aAAaK;AAAAA,MACjCC,YAAYhB,MAAMU,aAAaK;AAAAA,MAE/BE,KAAK;AAAA,MACLC,MAAMlB,MAAMU,aAAaS;AAAAA,IAC3B;AAAA,IACA,CAAE,SAAQC,oBAAoBC,wCAAwC,GAAG;AAAA,MACvEd,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAOT,MAAMU,aAAaC;AAAAA,MAC1BC,QAAQ;AAAA,MAERI,YAAYhB,MAAMU,aAAaK;AAAAA,MAE/BE,KAAK;AAAA,MACLC,MAAMlB,MAAMU,aAAaS;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAG,kBAAkB;AAAA,IAChBC,YAAY;AAAA,IACZxB,WAAWC,MAAMU,aAAac;AAAAA,IAE9B,uBAAuB;AAAA,MACrBpB,aAAaJ,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAuB,UAAU;AAAA,IACR,0BAA0B;AAAA,MACxBrB,aAAc,QAAOJ,MAAMC,MAAMI;AAAAA,IACnC;AAAA,EACF;AACF;"}

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

@@ -0,0 +1,55 @@
+import { useContext, memo } from "react";
+import { QueryBuilderContext } from "../../../Context.js";
+import { isBigList } from "../../../utils/index.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { HvDropdown } from "../../../../Dropdown/Dropdown.js";
+const BooleanValue = ({
+  id,
+  value = true
+}) => {
+  const context = useContext(QueryBuilderContext);
+  const {
+    labels,
+    dispatchAction,
+    readOnly
+  } = context;
+  const values = ["true", "false"].map((v) => ({
+    id: v,
+    label: labels.rule.value.boolean.options[v],
+    selected: value === (v === "true")
+  }));
+  return /* @__PURE__ */ jsx(HvDropdown, {
+    required: true,
+    status: "valid",
+    singleSelectionToggle: false,
+    label: labels.rule.value.boolean.label,
+    placeholder: labels.rule.value.boolean.placeholder,
+    values,
+    readOnly,
+    onChange: (selected) => {
+      if (selected && !Array.isArray(selected) && selected.id) {
+        dispatchAction({
+          type: "set-value",
+          id,
+          value: selected.id === "true"
+        });
+      } else {
+        dispatchAction({
+          type: "set-value",
+          id,
+          value: null
+        });
+      }
+    },
+    showSearch: isBigList(values),
+    ...isBigList(values) && {
+      virtualized: true,
+      height: 300
+    }
+  });
+};
+memo(BooleanValue);
+export {
+  BooleanValue
+};
+//# sourceMappingURL=BooleanValue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BooleanValue.js","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/BooleanValue/BooleanValue.tsx"],"sourcesContent":["import { memo, useContext } from \"react\";\nimport { HvDropdown } from \"@core/components\";\nimport { QueryBuilderContext } from \"../../../Context\";\nimport { isBigList } from \"../../../utils\";\n\nexport interface BooleanValueProps {\n  id: number;\n  value: boolean;\n}\n\nexport const BooleanValue = ({ id, value = true }: BooleanValueProps) => {\n  const context = useContext(QueryBuilderContext);\n  const { labels, dispatchAction, readOnly } = context;\n\n  const values = [\"true\", \"false\"].map((v) => ({\n    id: v,\n    label: labels.rule.value.boolean.options[v],\n    selected: value === (v === \"true\"),\n  }));\n\n  return (\n    <HvDropdown\n      required\n      status=\"valid\"\n      singleSelectionToggle={false}\n      label={labels.rule.value.boolean.label}\n      placeholder={labels.rule.value.boolean.placeholder}\n      values={values}\n      readOnly={readOnly}\n      onChange={(selected) => {\n        if (selected && !Array.isArray(selected) && selected.id) {\n          dispatchAction({\n            type: \"set-value\",\n            id,\n            value: selected.id === \"true\",\n          });\n        } else {\n          dispatchAction({ type: \"set-value\", id, value: null });\n        }\n      }}\n      showSearch={isBigList(values)}\n      {...(isBigList(values) && { virtualized: true, height: 300 })}\n    />\n  );\n};\n\nexport default memo(BooleanValue);\n"],"names":["BooleanValue","id","value","context","useContext","QueryBuilderContext","labels","dispatchAction","readOnly","values","map","v","label","rule","boolean","options","selected","HvDropdown","required","status","singleSelectionToggle","placeholder","onChange","Array","isArray","type","showSearch","isBigList","virtualized","height","memo"],"mappings":";;;;;AAUO,MAAMA,eAAeA,CAAC;AAAA,EAAEC;AAAAA,EAAIC,QAAQ;AAAwB,MAAM;AACjEC,QAAAA,UAAUC,WAAWC,mBAAmB;AACxC,QAAA;AAAA,IAAEC;AAAAA,IAAQC;AAAAA,IAAgBC;AAAAA,EAAaL,IAAAA;AAE7C,QAAMM,SAAS,CAAC,QAAQ,OAAO,EAAEC,IAAKC,CAAO,OAAA;AAAA,IAC3CV,IAAIU;AAAAA,IACJC,OAAON,OAAOO,KAAKX,MAAMY,QAAQC,QAAQJ,CAAC;AAAA,IAC1CK,UAAUd,WAAWS,MAAM;AAAA,EAC3B,EAAA;AAEF,6BACGM,YAAU;AAAA,IACTC,UAAQ;AAAA,IACRC,QAAO;AAAA,IACPC,uBAAuB;AAAA,IACvBR,OAAON,OAAOO,KAAKX,MAAMY,QAAQF;AAAAA,IACjCS,aAAaf,OAAOO,KAAKX,MAAMY,QAAQO;AAAAA,IACvCZ;AAAAA,IACAD;AAAAA,IACAc,UAAWN,CAAa,aAAA;AACtB,UAAIA,YAAY,CAACO,MAAMC,QAAQR,QAAQ,KAAKA,SAASf,IAAI;AACxC,uBAAA;AAAA,UACbwB,MAAM;AAAA,UACNxB;AAAAA,UACAC,OAAOc,SAASf,OAAO;AAAA,QAAA,CACxB;AAAA,MAAA,OACI;AACU,uBAAA;AAAA,UAAEwB,MAAM;AAAA,UAAaxB;AAAAA,UAAIC,OAAO;AAAA,QAAA,CAAM;AAAA,MACvD;AAAA,IACF;AAAA,IACAwB,YAAYC,UAAUlB,MAAM;AAAA,IAAE,GACzBkB,UAAUlB,MAAM,KAAK;AAAA,MAAEmB,aAAa;AAAA,MAAMC,QAAQ;AAAA,IAAI;AAAA,EAAA,CAC3D;AAEN;AAEeC,KAAK9B,YAAY;"}

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

@@ -0,0 +1,35 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import numericValueClasses from "./numericValueClasses.js";
+const styles = {
+  root: {
+    display: "flex",
+    flexGrow: 1
+  },
+  label: {
+    paddingBottom: "6px"
+  },
+  inputContainer: {
+    display: "flex",
+    alignItems: "baseline",
+    flexGrow: 1
+  },
+  rangeContainer: {
+    display: "flex",
+    flexGrow: 1,
+    [`& > .${numericValueClasses.inputContainer}:not(:last-child)`]: {
+      marginRight: theme.space.md
+    }
+  },
+  input: {
+    flexGrow: 1
+  },
+  isMdDown: {
+    [`& > .${numericValueClasses.inputContainer}:not(:last-child)`]: {
+      marginRight: `calc(${theme.space.md} / 2)`
+    }
+  }
+};
+export {
+  styles
+};
+//# sourceMappingURL=Numeric.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Numeric.styles.js","sources":["../../../../../../../src/components/QueryBuilder/Rule/Value/NumericValue/Numeric.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/css\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport numericValueClasses from \"./numericValueClasses\";\n\nexport const styles: { [key: string]: CSSInterpolation } = {\n  root: {\n    display: \"flex\",\n    flexGrow: 1,\n  },\n  label: {\n    paddingBottom: \"6px\",\n  },\n  inputContainer: {\n    display: \"flex\",\n    alignItems: \"baseline\",\n    flexGrow: 1,\n  },\n  rangeContainer: {\n    display: \"flex\",\n    flexGrow: 1,\n\n    [`& > .${numericValueClasses.inputContainer}:not(:last-child)`]: {\n      marginRight: theme.space.md,\n    },\n  },\n  input: {\n    flexGrow: 1,\n  },\n  isMdDown: {\n    [`& > .${numericValueClasses.inputContainer}:not(:last-child)`]: {\n      marginRight: `calc(${theme.space.md} / 2)`,\n    },\n  },\n};\n"],"names":["styles","root","display","flexGrow","label","paddingBottom","inputContainer","alignItems","rangeContainer","numericValueClasses","marginRight","theme","space","md","input","isMdDown"],"mappings":";;AAIO,MAAMA,SAA8C;AAAA,EACzDC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,UAAU;AAAA,EACZ;AAAA,EACAC,OAAO;AAAA,IACLC,eAAe;AAAA,EACjB;AAAA,EACAC,gBAAgB;AAAA,IACdJ,SAAS;AAAA,IACTK,YAAY;AAAA,IACZJ,UAAU;AAAA,EACZ;AAAA,EACAK,gBAAgB;AAAA,IACdN,SAAS;AAAA,IACTC,UAAU;AAAA,IAEV,CAAE,QAAOM,oBAAoBH,iCAAiC,GAAG;AAAA,MAC/DI,aAAaC,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IACLX,UAAU;AAAA,EACZ;AAAA,EACAY,UAAU;AAAA,IACR,CAAE,QAAON,oBAAoBH,iCAAiC,GAAG;AAAA,MAC/DI,aAAc,QAAOC,MAAMC,MAAMC;AAAAA,IACnC;AAAA,EACF;AACF;"}

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: 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 className={css(styles.inputContainer)}>\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;"}