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

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

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

package/dist/es/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":["React"],"mappings":"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"}

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

@@ -0,0 +1,91 @@
+import React__default, { useState } from 'react';
+import { CustomConditonChip } from '../chips/CustomChips.js';
+import { UI_TEXT, PLACEHOLDERS } from '../../constants/index.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/popover/popover.js';
+import { Box } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js';
+import { Input } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/input/input.js';
+import { SearchIcon } from '../../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/search.js';
+import { Flex } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js';
+import { Text } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js';
+
+const FieldPopover = ({
+  setCurrentField,
+  currentFilter,
+  filters,
+  fieldOptions
+}) => {
+  const [inputSearch, setInputSearch] = 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__default.createElement(Popover, { defaultOpen: true }, /* @__PURE__ */ React__default.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(CustomConditonChip, null, UI_TEXT.CHOOSE_FIELD))), /* @__PURE__ */ React__default.createElement(
+    PopoverContent,
+    {
+      sideOffset: 4,
+      align: "start",
+      css: {
+        paddingBottom: "12px !important",
+        width: 220,
+        borderRadius: "$xl",
+        border: "0.7px solid $black300",
+        padding: "0"
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(Box, { css: { padding: "$4" } }, /* @__PURE__ */ React__default.createElement(
+      Input,
+      {
+        placeholder: PLACEHOLDERS.SEARCH,
+        leftIcon: /* @__PURE__ */ React__default.createElement(SearchIcon, null),
+        variant: "filled",
+        size: "lg",
+        value: inputSearch,
+        onChange: (e) => setInputSearch(e.currentTarget.value)
+      }
+    )),
+    /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        flexDirection: "column",
+        css: {
+          paddingBottom: "$4",
+          maxHeight: 240,
+          height: "100%",
+          overflow: "auto"
+        }
+      },
+      filteredOptions.length > 0 ? filteredOptions.map((field) => /* @__PURE__ */ React__default.createElement(
+        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__default.createElement(Text, { size: "sm" }, field.label)
+      )) : /* @__PURE__ */ React__default.createElement(
+        Text,
+        {
+          size: "sm",
+          css: {
+            padding: "$3 $6",
+            color: "$neutral800",
+            textAlign: "center"
+          }
+        },
+        UI_TEXT.NO_OPTIONS
+      )
+    )
+  ));
+};
+
+export { FieldPopover };
+//# sourceMappingURL=FieldPopover.js.map

package/dist/es/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":["React"],"mappings":"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"}

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

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