@sparrowengg/integrations-templates-frontend 2.0.0 → 2.1.0-beta.2

package/dist/cjs/triggers/components/popovers/DataTypePopover.js

@@ -0,0 +1,182 @@
+'use strict';
+
+var React = require('react');
+var index = require('../../../commons/constants/index.js');
+var index$1 = require('../../constants/index.js');
+var CustomChips = require('../chips/CustomChips.js');
+var popover = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/popover/popover.js');
+var box = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+var text = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+var flex = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var chevronRight = require('../../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-right.js');
+
+const DataTypePopover = ({
+  setCurrentField,
+  currentFilter,
+  filters
+}) => {
+  const [subMenuContent, setSubMenuContent] = React.useState({
+    show: false,
+    type: ""
+  });
+  const handleNoPreference = () => {
+    const noPreferenceOperator = { label: index$1.UI_TEXT.NO_PREFERENCE, value: "NO_PREFERENCE", type: "NO_PREFERENCE" };
+    setCurrentField(noPreferenceOperator, currentFilter.id, filters.id, "operator");
+    setSubMenuContent({ show: false, type: "" });
+  };
+  const handleDataTypeSelect = (dataType, label) => {
+    if (dataType === index$1.DATA_TYPES.BOOLEAN) {
+      const booleanOperator = index.operatorOptions.find((opt) => opt.value === index$1.comparatorConstants.IS && opt.type === index$1.DATA_TYPES.BOOLEAN);
+      if (booleanOperator) {
+        setCurrentField({ label: booleanOperator.label, value: booleanOperator.value, type: dataType }, currentFilter.id, filters.id, "operator");
+      }
+    } else {
+      setSubMenuContent({ show: true, type: dataType });
+    }
+  };
+  const handleOperatorSelect = (operatorValue, operatorLabel, dataType) => {
+    const operatorOption = { label: operatorLabel, value: operatorValue, type: dataType };
+    setCurrentField(operatorOption, currentFilter.id, filters.id, "operator");
+    setSubMenuContent({ show: false, type: "" });
+  };
+  const currentSubMenu = index.subMenuOptions.find((option) => option.value === subMenuContent.type);
+  return /* @__PURE__ */ React.createElement(popover.Popover, { defaultOpen: true }, /* @__PURE__ */ React.createElement(popover.PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(CustomChips.CustomConditonChip, null, index$1.UI_TEXT.CHOOSE_DATA_TYPE))), /* @__PURE__ */ React.createElement(
+    popover.PopoverContent,
+    {
+      sideOffset: 4,
+      align: "start",
+      css: {
+        width: 260,
+        borderRadius: "$xl",
+        border: "0.7px solid $black300",
+        padding: 0
+      }
+    },
+    !subMenuContent.show ? /* @__PURE__ */ React.createElement(box.Box, { css: { paddingTop: "$6" } }, /* @__PURE__ */ React.createElement(
+      text.Text,
+      {
+        size: "sm",
+        onClick: handleNoPreference,
+        css: {
+          padding: "$3 $6",
+          marginBottom: "$4",
+          cursor: "pointer",
+          "&:hover": {
+            background: "$neutral100"
+          }
+        }
+      },
+      index$1.UI_TEXT.NO_PREFERENCE
+    ), /* @__PURE__ */ React.createElement(
+      box.Box,
+      {
+        css: {
+          paddingTop: "$4",
+          borderTop: "$borderWidths$xs solid $neutral100"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        text.Text,
+        {
+          css: {
+            textTransform: "uppercase",
+            color: "$neutral600",
+            padding: "$4 $6"
+          },
+          size: "xs",
+          weight: "bold"
+        },
+        index$1.UI_TEXT.SELECT_DATA_TYPE
+      ),
+      index.subMenuOptions.map((option) => /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          key: option.id,
+          alignItems: "center",
+          justifyContent: "space-between",
+          onClick: () => handleDataTypeSelect(option.value, option.label),
+          css: {
+            cursor: "pointer",
+            padding: "$3 $6",
+            "&:hover": {
+              background: "rgba(100, 116, 139, 0.08)",
+              "#subLabelIcon": {
+                opacity: 1
+              }
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { lineHeight: "$md", color: "$neutral900" } }, option.label), /* @__PURE__ */ React.createElement(text.Text, { size: "xs", css: { lineHeight: "$xs", color: "$neutral700" } }, option.subLabel)),
+        /* @__PURE__ */ React.createElement(box.Box, { css: { opacity: 0 }, id: "subLabelIcon" }, /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, { size: 20 }))
+      ))
+    ), /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        css: {
+          background: "rgba(100, 116, 139, 0.06)",
+          padding: "$6 $8"
+        },
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      /* @__PURE__ */ React.createElement(text.Text, { size: "xs", css: { color: "$neutral600", lineHeight: "$xs" } }, index$1.UI_TEXT.DATA_TYPE_INFO)
+    )) : /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        alignItems: "center",
+        gap: "$4",
+        css: {
+          padding: "$5 $4",
+          borderRadius: "$xl $xl 0 0",
+          backgroundColor: "rgba(100, 116, 139, 0.06)",
+          borderBottom: "$borderWidths$xs solid rgba(100, 116, 139, 0.08)"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        box.Box,
+        {
+          onClick: () => setSubMenuContent({ show: false, type: "" }),
+          css: {
+            borderRight: "$borderWidths$xs solid $secondary100",
+            paddingRight: "$2",
+            cursor: "pointer"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          chevronRight.ChevronRightIcon,
+          {
+            style: { transform: "scaleX(-1)", color: "#76859A" },
+            size: 20
+          }
+        )
+      ),
+      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$secondary400" } }, currentSubMenu == null ? void 0 : currentSubMenu.label), /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, { style: { color: "#76859A" }, size: 16 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "medium", css: { color: "$secondary600" } }, subMenuContent.type === index$1.DATA_TYPES.DATE_TIME ? index$1.UI_TEXT.SELECT : index$1.UI_TEXT.CHOOSE))
+    ), /* @__PURE__ */ React.createElement(box.Box, { css: { paddingBlock: subMenuContent.type === index$1.DATA_TYPES.DATE_TIME ? 0 : "$4" } }, index.operatorOptions.filter((operator) => {
+      if (subMenuContent.type === index$1.DATA_TYPES.DATE_TIME) {
+        return operator.isDateOnly;
+      }
+      if (subMenuContent.type === index$1.DATA_TYPES.BOOLEAN) {
+        return operator.type === index$1.DATA_TYPES.BOOLEAN;
+      }
+      return !operator.isDateOnly;
+    }).map((option) => /* @__PURE__ */ React.createElement(
+      text.Text,
+      {
+        key: option.id,
+        size: "sm",
+        onClick: () => handleOperatorSelect(option.value, option.label, subMenuContent.type),
+        css: {
+          padding: "$3 $6",
+          cursor: "pointer",
+          "&:hover": {
+            background: "rgba(100, 116, 139, 0.08)"
+          }
+        }
+      },
+      option.label
+    ))))
+  ));
+};
+
+exports.DataTypePopover = DataTypePopover;
+//# sourceMappingURL=DataTypePopover.js.map

package/dist/cjs/triggers/components/popovers/DataTypePopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTypePopover.js","sources":["../../../../../src/triggers/components/popovers/DataTypePopover.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n  Box,\n  Flex,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  Text,\n} from '@sparrowengg/twigs-react';\nimport { ChevronRightIcon } from '@sparrowengg/twigs-react-icons';\nimport { subMenuOptions, operatorOptions } from '../../../commons/constants';\nimport { comparatorConstants, UI_TEXT, DATA_TYPES } from '../../constants';\nimport { CustomConditonChip } from '../chips/CustomChips';\nimport { DataTypePopoverProps, SubMenuContent } from '../../types';\n\n/**\n * DataType Popover Component\n * Allows user to select data type and operator\n */\nexport const DataTypePopover: React.FC<DataTypePopoverProps> = ({\n  setCurrentField,\n  currentFilter,\n  filters,\n}) => {\n  const [subMenuContent, setSubMenuContent] = useState<SubMenuContent>({\n    show: false,\n    type: '',\n  });\n\n  const handleNoPreference = () => {\n    // Set operator as SelectOption object\n    const noPreferenceOperator = { label: UI_TEXT.NO_PREFERENCE, value: 'NO_PREFERENCE', type: 'NO_PREFERENCE' };\n    setCurrentField(noPreferenceOperator as any, currentFilter.id, filters.id, 'operator');\n    setSubMenuContent({ show: false, type: '' });\n  };\n\n  const handleDataTypeSelect = (dataType: string, label: string) => {\n    if (dataType === DATA_TYPES.BOOLEAN) {\n      const booleanOperator = operatorOptions.find(opt => opt.value === comparatorConstants.IS && opt.type === DATA_TYPES.BOOLEAN);\n      if (booleanOperator) {\n        setCurrentField({ label: booleanOperator.label, value: booleanOperator.value, type: dataType } as any, currentFilter.id, filters.id, 'operator');\n      }\n    } else {\n      setSubMenuContent({ show: true, type: dataType });\n    }\n  };\n\n  const handleOperatorSelect = (operatorValue: string, operatorLabel: string, dataType: string) => {\n    // Set operator as SelectOption object with type\n    const operatorOption = { label: operatorLabel, value: operatorValue, type: dataType };\n    setCurrentField(operatorOption as any, currentFilter.id, filters.id, 'operator');\n    setSubMenuContent({ show: false, type: '' });\n  };\n\n  const currentSubMenu = subMenuOptions.find((option) => option.value === subMenuContent.type);\n\n  return (\n    <Popover defaultOpen>\n      <PopoverTrigger asChild>\n        <Box>\n          <CustomConditonChip>{UI_TEXT.CHOOSE_DATA_TYPE}</CustomConditonChip>\n        </Box>\n      </PopoverTrigger>\n      <PopoverContent\n        sideOffset={4}\n        align=\"start\"\n        css={{\n          width: 260,\n          borderRadius: '$xl',\n          border: '0.7px solid $black300',\n          padding: 0,\n        }}\n      >\n        {!subMenuContent.show ? (\n          <Box css={{ paddingTop: '$6' }}>\n            {/* No Preference Option */}\n            <Text\n              size=\"sm\"\n              onClick={handleNoPreference}\n              css={{\n                padding: '$3 $6',\n                marginBottom: '$4',\n                cursor: 'pointer',\n                '&:hover': {\n                  background: '$neutral100',\n                },\n              }}\n            >\n              {UI_TEXT.NO_PREFERENCE}\n            </Text>\n\n            {/* Data Type Selection */}\n            <Box\n              css={{\n                paddingTop: '$4',\n                borderTop: '$borderWidths$xs solid $neutral100',\n              }}\n            >\n              <Text\n                css={{\n                  textTransform: 'uppercase',\n                  color: '$neutral600',\n                  padding: '$4 $6',\n                }}\n                size=\"xs\"\n                weight=\"bold\"\n              >\n                {UI_TEXT.SELECT_DATA_TYPE}\n              </Text>\n\n              {subMenuOptions.map((option) => (\n                <Flex\n                  key={option.id}\n                  alignItems=\"center\"\n                  justifyContent=\"space-between\"\n                  onClick={() => handleDataTypeSelect(option.value, option.label)}\n                  css={{\n                    cursor: 'pointer',\n                    padding: '$3 $6',\n                    '&:hover': {\n                      background: 'rgba(100, 116, 139, 0.08)',\n                      '#subLabelIcon': {\n                        opacity: 1,\n                      },\n                    },\n                  }}\n                >\n                  <Box>\n                    <Text size=\"sm\" css={{ lineHeight: '$md', color: '$neutral900' }}>\n                      {option.label}\n                    </Text>\n                    <Text size=\"xs\" css={{ lineHeight: '$xs', color: '$neutral700' }}>\n                      {option.subLabel}\n                    </Text>\n                  </Box>\n                  <Box css={{ opacity: 0 }} id=\"subLabelIcon\">\n                    <ChevronRightIcon size={20} />\n                  </Box>\n                </Flex>\n              ))}\n            </Box>\n\n            {/* Info Footer */}\n            <Flex\n              css={{\n                background: 'rgba(100, 116, 139, 0.06)',\n                padding: '$6 $8',\n              }}\n              alignItems=\"center\"\n              justifyContent=\"center\"\n            >\n              <Text size=\"xs\" css={{ color: '$neutral600', lineHeight: '$xs' }}>\n                {UI_TEXT.DATA_TYPE_INFO}\n              </Text>\n            </Flex>\n          </Box>\n        ) : (\n          <Box>\n            {/* Submenu Header */}\n            <Flex\n              alignItems=\"center\"\n              gap=\"$4\"\n              css={{\n                padding: '$5 $4',\n                borderRadius: '$xl $xl 0 0',\n                backgroundColor: 'rgba(100, 116, 139, 0.06)',\n                borderBottom: '$borderWidths$xs solid rgba(100, 116, 139, 0.08)',\n              }}\n            >\n              <Box\n                onClick={() => setSubMenuContent({ show: false, type: '' })}\n                css={{\n                  borderRight: '$borderWidths$xs solid $secondary100',\n                  paddingRight: '$2',\n                  cursor: 'pointer',\n                }}\n              >\n                <ChevronRightIcon\n                  style={{ transform: 'scaleX(-1)', color: '#76859A' }}\n                  size={20}\n                />\n              </Box>\n              <Flex alignItems=\"center\">\n                <Text size=\"sm\" css={{ color: '$secondary400' }}>\n                  {currentSubMenu?.label}\n                </Text>\n                <ChevronRightIcon style={{ color: '#76859A' }} size={16} />\n                <Text size=\"sm\" weight=\"medium\" css={{ color: '$secondary600' }}>\n                  {subMenuContent.type === DATA_TYPES.DATE_TIME ? UI_TEXT.SELECT : UI_TEXT.CHOOSE}\n                </Text>\n              </Flex>\n            </Flex>\n\n            {/* Operator Options */}\n            <Box css={{ paddingBlock: subMenuContent.type === DATA_TYPES.DATE_TIME ? 0 : '$4' }}>\n              {operatorOptions\n                .filter((operator) => {\n                  if (subMenuContent.type === DATA_TYPES.DATE_TIME) {\n                    return operator.isDateOnly;\n                  }\n                  if (subMenuContent.type === DATA_TYPES.BOOLEAN) {\n                    return operator.type === DATA_TYPES.BOOLEAN;\n                  }\n                  return !operator.isDateOnly;\n                })\n                .map((option) => (\n                  <Text\n                    key={option.id}\n                    size=\"sm\"\n                    onClick={() => handleOperatorSelect(option.value, option.label, subMenuContent.type)}\n                    css={{\n                      padding: '$3 $6',\n                      cursor: 'pointer',\n                      '&:hover': {\n                        background: 'rgba(100, 116, 139, 0.08)',\n                      },\n                    }}\n                  >\n                    {option.label}\n                  </Text>\n                ))}\n            </Box>\n          </Box>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n};\n\n"],"names":["useState","UI_TEXT","DATA_TYPES","operatorOptions","comparatorConstants","subMenuOptions","Popover","PopoverTrigger","Box","CustomConditonChip","PopoverContent","Text","Flex","ChevronRightIcon"],"mappings":"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"}

package/dist/cjs/triggers/components/popovers/FieldPopover.js

@@ -0,0 +1,93 @@
+'use strict';
+
+var React = require('react');
+var CustomChips = require('../chips/CustomChips.js');
+var index = require('../../constants/index.js');
+var popover = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/popover/popover.js');
+var box = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+var input = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/input/input.js');
+var search = require('../../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/search.js');
+var flex = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var text = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+
+const FieldPopover = ({
+  setCurrentField,
+  currentFilter,
+  filters,
+  fieldOptions
+}) => {
+  const [inputSearch, setInputSearch] = React.useState("");
+  const filteredOptions = fieldOptions.filter(
+    (option) => option.label.toLowerCase().includes(inputSearch.toLowerCase())
+  );
+  const handleFieldSelect = (field) => {
+    setCurrentField(field, currentFilter.id, filters.id, "field");
+  };
+  return /* @__PURE__ */ React.createElement(popover.Popover, { defaultOpen: true }, /* @__PURE__ */ React.createElement(popover.PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(CustomChips.CustomConditonChip, null, index.UI_TEXT.CHOOSE_FIELD))), /* @__PURE__ */ React.createElement(
+    popover.PopoverContent,
+    {
+      sideOffset: 4,
+      align: "start",
+      css: {
+        paddingBottom: "12px !important",
+        width: 220,
+        borderRadius: "$xl",
+        border: "0.7px solid $black300",
+        padding: "0"
+      }
+    },
+    /* @__PURE__ */ React.createElement(box.Box, { css: { padding: "$4" } }, /* @__PURE__ */ React.createElement(
+      input.Input,
+      {
+        placeholder: index.PLACEHOLDERS.SEARCH,
+        leftIcon: /* @__PURE__ */ React.createElement(search.SearchIcon, null),
+        variant: "filled",
+        size: "lg",
+        value: inputSearch,
+        onChange: (e) => setInputSearch(e.currentTarget.value)
+      }
+    )),
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        flexDirection: "column",
+        css: {
+          paddingBottom: "$4",
+          maxHeight: 240,
+          height: "100%",
+          overflow: "auto"
+        }
+      },
+      filteredOptions.length > 0 ? filteredOptions.map((field) => /* @__PURE__ */ React.createElement(
+        box.Box,
+        {
+          key: field.id,
+          onClick: () => handleFieldSelect(field),
+          css: {
+            padding: "$3 $6",
+            transition: "all .3s ease",
+            cursor: "pointer",
+            "&:hover": {
+              backgroundColor: "rgba(100, 116, 139, 0.06)"
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, field.label)
+      )) : /* @__PURE__ */ React.createElement(
+        text.Text,
+        {
+          size: "sm",
+          css: {
+            padding: "$3 $6",
+            color: "$neutral800",
+            textAlign: "center"
+          }
+        },
+        index.UI_TEXT.NO_OPTIONS
+      )
+    )
+  ));
+};
+
+exports.FieldPopover = FieldPopover;
+//# sourceMappingURL=FieldPopover.js.map

package/dist/cjs/triggers/components/popovers/FieldPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldPopover.js","sources":["../../../../../src/triggers/components/popovers/FieldPopover.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n  Box,\n  Flex,\n  Input,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  Text,\n} from '@sparrowengg/twigs-react';\nimport { SearchIcon } from '@sparrowengg/twigs-react-icons';\nimport { CustomConditonChip } from '../chips/CustomChips';\nimport { FieldPopoverProps } from '../../types';\nimport { SelectOption } from '../../../commons/types/enhanced';\nimport { UI_TEXT, PLACEHOLDERS } from '../../constants';\n\n/**\n * Field Popover Component\n * Allows user to select a field from available options\n */\nexport const FieldPopover: React.FC<FieldPopoverProps> = ({\n  setCurrentField,\n  currentFilter,\n  filters,\n  fieldOptions,\n}) => {\n  const [inputSearch, setInputSearch] = useState('');\n\n  const filteredOptions = fieldOptions.filter((option) =>\n    option.label.toLowerCase().includes(inputSearch.toLowerCase())\n  );\n\n  const handleFieldSelect = (field: SelectOption) => {\n    // Set the entire field object, not just the value\n    setCurrentField(field as any, currentFilter.id, filters.id, 'field');\n  };\n\n  return (\n    <Popover defaultOpen>\n      <PopoverTrigger asChild>\n        <Box>\n          <CustomConditonChip>{UI_TEXT.CHOOSE_FIELD}</CustomConditonChip>\n        </Box>\n      </PopoverTrigger>\n      <PopoverContent\n        sideOffset={4}\n        align=\"start\"\n        css={{\n          paddingBottom: '12px !important',\n          width: 220,\n          borderRadius: '$xl',\n          border: '0.7px solid $black300',\n          padding: '0',\n        }}\n      >\n        <Box css={{ padding: '$4' }}>\n          <Input\n            placeholder={PLACEHOLDERS.SEARCH}\n            leftIcon={<SearchIcon />}\n            variant=\"filled\"\n            size=\"lg\"\n            value={inputSearch}\n            onChange={(e) => setInputSearch(e.currentTarget.value)}\n          />\n        </Box>\n\n        <Flex\n          flexDirection=\"column\"\n          css={{\n            paddingBottom: '$4',\n            maxHeight: 240,\n            height: '100%',\n            overflow: 'auto',\n          }}\n        >\n          {filteredOptions.length > 0 ? (\n            filteredOptions.map((field) => (\n              <Box\n                key={field.id}\n                onClick={() => handleFieldSelect(field)}\n                css={{\n                  padding: '$3 $6',\n                  transition: 'all .3s ease',\n                  cursor: 'pointer',\n                  '&:hover': {\n                    backgroundColor: 'rgba(100, 116, 139, 0.06)',\n                  },\n                }}\n              >\n                <Text size=\"sm\">{field.label}</Text>\n              </Box>\n            ))\n          ) : (\n            <Text\n              size=\"sm\"\n              css={{\n                padding: '$3 $6',\n                color: '$neutral800',\n                textAlign: 'center',\n              }}\n            >\n              {UI_TEXT.NO_OPTIONS}\n            </Text>\n          )}\n        </Flex>\n      </PopoverContent>\n    </Popover>\n  );\n};\n\n"],"names":["useState","Popover","PopoverTrigger","Box","CustomConditonChip","UI_TEXT","PopoverContent","Input","PLACEHOLDERS","SearchIcon","Flex","Text"],"mappings":"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"}

package/dist/cjs/triggers/components/popovers/FieldValuePopover.js

@@ -0,0 +1,325 @@
+'use strict';
+
+var React = require('react');
+var string = require('../../../node_modules/@internationalized/date/dist/string.js');
+var dayjs_min = require('../../../node_modules/dayjs/dayjs.min.js');
+var index$1 = require('../../../commons/constants/index.js');
+var CustomChips = require('../chips/CustomChips.js');
+var helpers = require('../../utils/helpers.js');
+var index = require('../../constants/index.js');
+var popover = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/popover/popover.js');
+var tooltip = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js');
+var box = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+var text = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+var calendar = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/calendar/calendar.js');
+var input = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/input/input.js');
+var search = require('../../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/search.js');
+var flex = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var checkbox = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/checkbox/checkbox.js');
+var button = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
+var formInput = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/input/form-input.js');
+var formLabel = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/form-label/form-label.js');
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const RenderFieldValuePopover = ({
+  fieldOptions,
+  setCurrentField,
+  currentFilter,
+  filters,
+  resetEditing,
+  setShowPopover
+}) => {
+  var _a, _b, _c;
+  const [date, setDate] = React.useState(string.parseDate(dayjs_min.default().format("YYYY-MM-DD")));
+  const [inputValue, setInputValue] = React.useState("");
+  const [selectedField, setSelectedField] = React.useState([]);
+  const field = (_a = fieldOptions.find(
+    (option) => {
+      var _a2;
+      return option.value === ((_a2 = currentFilter.field) == null ? void 0 : _a2.value);
+    }
+  )) == null ? void 0 : _a.options;
+  const dataType = (_b = currentFilter.operator) == null ? void 0 : _b.value;
+  const comparator = (_c = currentFilter.operator) == null ? void 0 : _c.value;
+  const handleSubmit = (value) => {
+    setCurrentField(value, currentFilter.id, filters.id, "value");
+    setShowPopover(false);
+    resetEditing();
+  };
+  React.useEffect(() => {
+    if (comparator === "NO_VALUE" || comparator === "ANY_VALUE") {
+      handleSubmit(" ");
+    }
+  }, [comparator]);
+  if (dataType === index.DATA_TYPES.BOOLEAN) {
+    return /* @__PURE__ */ React.createElement(box.Box, { css: { paddingBlock: "$5" } }, index$1.booleanOptions.map((option) => /* @__PURE__ */ React.createElement(
+      text.Text,
+      {
+        key: option.id,
+        size: "sm",
+        onClick: () => handleSubmit(String(option.value)),
+        css: {
+          padding: "$3 $6",
+          cursor: "pointer",
+          "&:hover": {
+            background: "$neutral100"
+          }
+        }
+      },
+      option.label
+    )));
+  }
+  if (dataType === index.DATA_TYPES.DATE_TIME) {
+    return /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(
+      calendar.Calendar,
+      {
+        size: "md",
+        footerActionText: index.UI_TEXT.APPLY,
+        value: date,
+        showTimePicker: true,
+        onChange: setDate,
+        footerAction: () => {
+          handleSubmit(dayjs_min.default(date.toString()).format("MMM D YYYY . hh:mm A"));
+        }
+      }
+    ));
+  }
+  if (field == null ? void 0 : field.length) {
+    if (dataType === index.DATA_TYPES.SELECT) {
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(box.Box, { css: { padding: "$4" } }, /* @__PURE__ */ React.createElement(
+        input.Input,
+        {
+          placeholder: index.PLACEHOLDERS.SEARCH,
+          leftIcon: /* @__PURE__ */ React.createElement(search.SearchIcon, null),
+          variant: "filled",
+          size: "lg",
+          value: inputValue,
+          onChange: (e) => setInputValue(e.currentTarget.value)
+        }
+      )), /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          flexDirection: "column",
+          css: {
+            paddingBottom: "$4",
+            maxHeight: 240,
+            height: "100%",
+            overflow: "auto"
+          }
+        },
+        field.filter(
+          (option) => option.label.toLowerCase().includes(inputValue.toLowerCase())
+        ).map((fieldOption) => /* @__PURE__ */ React.createElement(
+          box.Box,
+          {
+            key: fieldOption.id,
+            onClick: () => handleSubmit(fieldOption.value),
+            css: {
+              padding: "$3 $6",
+              transition: "all .3s ease",
+              cursor: "pointer",
+              "&:hover": {
+                backgroundColor: "rgba(100, 116, 139, 0.06)"
+              }
+            }
+          },
+          /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, fieldOption.label)
+        ))
+      ));
+    }
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(box.Box, { css: { padding: "$4" } }, /* @__PURE__ */ React.createElement(
+      input.Input,
+      {
+        placeholder: index.PLACEHOLDERS.SEARCH,
+        leftIcon: /* @__PURE__ */ React.createElement(search.SearchIcon, null),
+        variant: "filled",
+        size: "lg",
+        value: inputValue,
+        onChange: (e) => setInputValue(e.currentTarget.value)
+      }
+    )), /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        flexDirection: "column",
+        css: {
+          paddingBottom: "$4",
+          maxHeight: 240,
+          height: "100%",
+          overflow: "auto"
+        }
+      },
+      /* @__PURE__ */ React.createElement(box.Box, { css: { padding: "$3 $6" } }, /* @__PURE__ */ React.createElement(
+        checkbox.Checkbox,
+        {
+          size: "sm",
+          checked: selectedField.length === field.length,
+          onChange: (checked) => {
+            if (checked) {
+              setSelectedField(field.map((item) => item.value));
+            } else {
+              setSelectedField([]);
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement(text.Text, { css: { cursor: "pointer" }, size: "sm" }, index.UI_TEXT.SELECT_ALL)
+      )),
+      field.filter(
+        (option) => option.label.toLowerCase().includes(inputValue.toLowerCase())
+      ).map((fieldOption) => /* @__PURE__ */ React.createElement(
+        box.Box,
+        {
+          key: fieldOption.id,
+          css: {
+            padding: "$3 $6",
+            transition: "all .3s ease",
+            cursor: "pointer",
+            "&:hover": {
+              backgroundColor: "rgba(100, 116, 139, 0.06)"
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          checkbox.Checkbox,
+          {
+            size: "sm",
+            checked: selectedField.includes(fieldOption.value),
+            onChange: (checked) => {
+              if (checked) {
+                setSelectedField([...selectedField, fieldOption.value]);
+              } else {
+                setSelectedField(
+                  selectedField.filter((item) => item !== fieldOption.value)
+                );
+              }
+            }
+          },
+          /* @__PURE__ */ React.createElement(text.Text, { css: { cursor: "pointer" }, size: "sm" }, fieldOption.label)
+        )
+      )),
+      /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          justifyContent: "flex-end",
+          css: {
+            position: "sticky",
+            bottom: 0,
+            paddingBlock: "$4 !important",
+            marginInlineEnd: "$6 !important"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          button.Button,
+          {
+            size: "sm",
+            variant: "ghost",
+            color: "primary",
+            onClick: () => handleSubmit(selectedField)
+          },
+          index.UI_TEXT.APPLY
+        )
+      )
+    ));
+  }
+  const isNumberField = dataType === index.DATA_TYPES.NUMBER || dataType === index.DATA_TYPES.PHONE_NUMBER;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(box.Box, { css: { padding: "$4" } }, /* @__PURE__ */ React.createElement(
+    formInput.FormInput,
+    __spreadProps(__spreadValues({
+      placeholder: isNumberField ? index.PLACEHOLDERS.ENTER_NUMBER : index.PLACEHOLDERS.ENTER_VALUE,
+      type: "text",
+      variant: "filled",
+      size: "lg"
+    }, isNumberField && { maxLength: 10 }), {
+      value: inputValue,
+      onChange: (e) => {
+        const value = e.target.value;
+        setInputValue(isNumberField ? helpers.formatPhoneNumber(value) : value);
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter" && inputValue.length) {
+          handleSubmit(inputValue);
+        }
+      }
+    })
+  ), dataType === index.DATA_TYPES.PHONE_NUMBER && /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5", marginTop: "$2", marginLeft: "$1" } }, index.UI_TEXT.PHONE_NUMBER_HINT)), /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      alignItems: "center",
+      justifyContent: "space-between",
+      css: {
+        borderTop: "$borderWidths$xs solid $neutral100",
+        padding: "$4 $6",
+        marginTop: "$4"
+      }
+    },
+    /* @__PURE__ */ React.createElement(button.Button, { size: "md", color: "secondary", variant: "ghost", onClick: () => setShowPopover(false) }, index.UI_TEXT.CANCEL),
+    /* @__PURE__ */ React.createElement(
+      button.Button,
+      {
+        size: "md",
+        variant: "ghost",
+        disabled: !inputValue.length,
+        onClick: () => handleSubmit(inputValue)
+      },
+      index.UI_TEXT.SAVE
+    )
+  ));
+};
+const FieldValuePopover = ({ setCurrentField, currentFilter, filters, resetEditing, fieldOptions }) => {
+  var _a;
+  const [showPopover, setShowPopover] = React.useState(true);
+  const hasError = !currentFilter.value && !showPopover;
+  return /* @__PURE__ */ React.createElement(popover.Popover, { defaultOpen: true, open: showPopover }, /* @__PURE__ */ React.createElement(tooltip.TooltipProvider, { delayDuration: 0 }, /* @__PURE__ */ React.createElement(
+    tooltip.Tooltip,
+    {
+      side: "right",
+      content: hasError ? index.UI_TEXT.ENTER_VALUE_TOOLTIP : ""
+    },
+    /* @__PURE__ */ React.createElement(popover.PopoverTrigger, { asChild: true, onClick: () => setShowPopover(!showPopover) }, /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(CustomChips.CustomConditonChip, { hasError }, index.UI_TEXT.TYPE_VALUE)))
+  )), /* @__PURE__ */ React.createElement(
+    popover.PopoverContent,
+    {
+      onPointerDownOutside: () => setShowPopover(false),
+      sideOffset: 4,
+      align: "start",
+      side: ((_a = currentFilter.operator) == null ? void 0 : _a.value) === index.DATA_TYPES.DATE_TIME ? "right" : "bottom",
+      css: {
+        minWidth: 220,
+        borderRadius: "$xl",
+        border: "0.7px solid $black300",
+        padding: 0
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      RenderFieldValuePopover,
+      {
+        fieldOptions,
+        setShowPopover,
+        setCurrentField,
+        currentFilter,
+        filters,
+        resetEditing
+      }
+    )
+  ));
+};
+
+exports.FieldValuePopover = FieldValuePopover;
+//# sourceMappingURL=FieldValuePopover.js.map