@sparrowengg/integrations-templates-frontend 1.9.84-beta.9 → 2.1.0-beta.1

package/dist/cjs/dynamic-mapping/index.js

@@ -0,0 +1,157 @@
+'use strict';
+
+var React = require('react');
+var index$1 = require('../commons/constants/index.js');
+var MappingHeader = require('./components/MappingHeader.js');
+var ConfigurationSetup = require('./components/ConfigurationSetup.js');
+var Mapping = require('./components/Mapping.js');
+var mapping = require('../mapping/components/mapping.js');
+var useEditTracking = require('./hooks/useEditTracking.js');
+var index = require('./constants/index.js');
+var themeProvider = require('../node_modules/@sparrowengg/twigs-react/dist/es/theme-provider/theme-provider.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 flex = require('../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+
+const DynamicMapping = ({
+  mappingType,
+  integrationFields,
+  configuration,
+  isMappingPage,
+  navigateMappingPage,
+  setIntegrationFields,
+  token,
+  apiURL = index$1.surveySparrowURL,
+  surveyDetails,
+  importResponse,
+  hasExistingMapping,
+  onSaveHandler,
+  editField,
+  previousMappingHandler,
+  surveyType,
+  havingTypeDropdown,
+  fields,
+  setFields,
+  surveyId,
+  integrationName,
+  customList,
+  oldResponse,
+  hasNamingModal
+}) => {
+  const [ssMappingData, setSSMappingData] = React.useState({
+    questions: [],
+    variables: [],
+    contactProperties: [],
+    expressions: [],
+    property: [],
+    derivedQuestions: []
+  });
+  const [isEditConfirmationOpen, setIsEditConfirmationOpen] = React.useState(false);
+  const {
+    setOriginalMappingData,
+    isInitialLoad,
+    setIsInitialLoad,
+    hasFieldsChanged
+  } = useEditTracking.useEditTracking({
+    editField,
+    ssMappingData,
+    importResponse,
+    configuration
+  });
+  const essentialFields = React.useMemo(
+    () => fields == null ? void 0 : fields.filter((field) => field == null ? void 0 : field.isEssentialField),
+    [fields]
+  );
+  const commonFields = React.useMemo(
+    () => fields == null ? void 0 : fields.filter((field) => !(field == null ? void 0 : field.isEssentialField)),
+    [fields]
+  );
+  return /* @__PURE__ */ React.createElement(
+    themeProvider.ThemeProvider,
+    {
+      theme: {
+        fonts: {
+          body: index.FONT_FAMILIES.DM_SANS,
+          heading: index.FONT_FAMILIES.DM_SANS
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement(tooltip.TooltipProvider, null, /* @__PURE__ */ React.createElement(box.Box, { css: { width: "100%" } }, /* @__PURE__ */ React.createElement(
+      MappingHeader.MappingHeader,
+      {
+        hasNamingModal,
+        mappingType: mappingType != null ? mappingType : "",
+        isEditConfirmationOpen,
+        setIsEditConfirmationOpen,
+        editField,
+        importResponse,
+        ssMappingData,
+        configuration,
+        hasFieldsChanged: hasFieldsChanged(),
+        saveConfiguration: () => {
+          configuration.onSaveHandler();
+        },
+        isMappingPage,
+        hasExistingMapping,
+        navigateConfigPage: () => navigateMappingPage(false),
+        previousMappingHandler,
+        onSaveHandler: () => {
+          onSaveHandler((editField == null ? void 0 : editField.id) ? { id: editField.id, fieldValues: editField.fieldValues } : {});
+        },
+        essentialFields,
+        commonFields
+      }
+    ), !isMappingPage && configuration.hasConfiguration ? /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        justifyContent: "center",
+        alignItems: "center",
+        css: { marginTop: "$40" }
+      },
+      /* @__PURE__ */ React.createElement(
+        ConfigurationSetup.ConfigurationSetup,
+        {
+          configuration,
+          surveyName: surveyDetails.surveyName,
+          editField
+        }
+      )
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, mappingType === index.MAPPING_TYPES.MULTI ? /* @__PURE__ */ React.createElement(
+      mapping.Mapping,
+      {
+        surveyType,
+        havingTypeDropdown,
+        fields,
+        setFields,
+        surveyDetails,
+        integrationFields,
+        setIntegrationFields,
+        surveyId: surveyDetails.surveyId,
+        token,
+        apiURL,
+        integrationName,
+        customList,
+        oldResponse
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      Mapping.default,
+      {
+        setOriginalMappingData,
+        integrationFields,
+        setIntegrationFields,
+        token,
+        setIsInitialLoad,
+        apiURL,
+        surveyId: surveyDetails.surveyId,
+        surveyProperties: surveyDetails.surveyProperties,
+        importResponse,
+        ssMappingData,
+        setSSMappingData,
+        editField
+      }
+    ))))
+  );
+};
+
+exports.DynamicMapping = DynamicMapping;
+//# sourceMappingURL=index.js.map

package/dist/cjs/dynamic-mapping/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/dynamic-mapping/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport {\n  Box,\n  Flex,\n  ThemeProvider,\n  TooltipProvider,\n} from '@sparrowengg/twigs-react';\nimport { surveySparrowURL } from '../commons/constants';\nimport { DynamicMappingProps, MappingData } from './types';\nimport { MappingHeader } from './components/MappingHeader';\nimport { ConfigurationSetup } from './components/ConfigurationSetup';\nimport Mapping from './components/Mapping';\nimport { Mapping as MultiMapping } from '../mapping/components/mapping';\nimport { useEditTracking } from './hooks/useEditTracking';\nimport { MAPPING_TYPES, FONT_FAMILIES } from './constants';\n\nexport const DynamicMapping: React.FC<DynamicMappingProps> = ({\n  mappingType,\n  integrationFields,\n  configuration,\n  isMappingPage,\n  navigateMappingPage,\n  setIntegrationFields,\n  token,\n  apiURL = surveySparrowURL,\n  surveyDetails,\n  importResponse,\n  hasExistingMapping,\n  onSaveHandler,\n  editField,\n  previousMappingHandler,\n  surveyType,\n  havingTypeDropdown,\n  fields,\n  setFields,\n  surveyId,\n  integrationName,\n  customList,\n  oldResponse,\n  hasNamingModal,\n}) => {\n  const [ssMappingData, setSSMappingData] = React.useState<MappingData>({\n    questions: [],\n    variables: [],\n    contactProperties: [],\n    expressions: [],\n    property: [],\n    derivedQuestions: [],\n  });\n  const [isEditConfirmationOpen, setIsEditConfirmationOpen] = React.useState(false);\n\n  const {\n    setOriginalMappingData,\n    isInitialLoad,\n    setIsInitialLoad,\n    hasFieldsChanged,\n  } = useEditTracking({\n    editField,\n    ssMappingData,\n    importResponse,\n    configuration,\n  });\n\n  const essentialFields = useMemo(\n    () => fields?.filter((field) => field?.isEssentialField),\n    [fields]\n  );\n\n  const commonFields = useMemo(\n    () => fields?.filter((field) => !field?.isEssentialField),\n    [fields]\n  );\n\n  return (\n    <ThemeProvider\n      theme={{\n        fonts: {\n          body: FONT_FAMILIES.DM_SANS,\n          heading: FONT_FAMILIES.DM_SANS,\n        },\n      }}\n    >\n      <TooltipProvider>\n        <Box css={{ width: '100%' }}>\n          <MappingHeader\n            hasNamingModal={hasNamingModal}\n            mappingType={mappingType ?? ''}\n            isEditConfirmationOpen={isEditConfirmationOpen}\n            setIsEditConfirmationOpen={setIsEditConfirmationOpen}\n            editField={editField}\n            importResponse={importResponse}\n            ssMappingData={ssMappingData}\n            configuration={configuration}\n            hasFieldsChanged={hasFieldsChanged()}\n            saveConfiguration={() => {\n              configuration.onSaveHandler();\n            }}\n            isMappingPage={isMappingPage}\n            hasExistingMapping={hasExistingMapping}\n            navigateConfigPage={() => navigateMappingPage(false)}\n            previousMappingHandler={previousMappingHandler}\n            onSaveHandler={() => {\n              onSaveHandler(editField?.id ? { id: editField.id, fieldValues: editField.fieldValues } : {});\n            }}\n            essentialFields={essentialFields}\n            commonFields={commonFields}\n          />\n\n          {!isMappingPage && configuration.hasConfiguration ? (\n            <Flex\n              justifyContent=\"center\"\n              alignItems=\"center\"\n              css={{ marginTop: '$40' }}\n            >\n              <ConfigurationSetup\n                configuration={configuration}\n                surveyName={surveyDetails.surveyName}\n                editField={editField}\n              />\n            </Flex>\n          ) : (\n            <>\n              {mappingType === MAPPING_TYPES.MULTI ? (\n                <MultiMapping\n                  surveyType={surveyType}\n                  havingTypeDropdown={havingTypeDropdown}\n                  fields={fields}\n                  setFields={setFields}\n                  surveyDetails={surveyDetails}\n                  integrationFields={integrationFields}\n                  setIntegrationFields={setIntegrationFields}\n                  surveyId={surveyDetails.surveyId}\n                  token={token}\n                  apiURL={apiURL}\n                  integrationName={integrationName}\n                  customList={customList}\n                  oldResponse={oldResponse}\n                />\n              ) : (\n                <Mapping\n                  setOriginalMappingData={setOriginalMappingData}\n                  integrationFields={integrationFields}\n                  setIntegrationFields={setIntegrationFields}\n                  token={token}\n                  setIsInitialLoad={setIsInitialLoad}\n                  apiURL={apiURL}\n                  surveyId={surveyDetails.surveyId}\n                  surveyProperties={surveyDetails.surveyProperties}\n                  importResponse={importResponse}\n                  ssMappingData={ssMappingData}\n                  setSSMappingData={setSSMappingData}\n                  editField={editField}\n                />\n              )}\n            </>\n          )}\n        </Box>\n      </TooltipProvider>\n    </ThemeProvider>\n  );\n};\n"],"names":["surveySparrowURL","useEditTracking","useMemo","ThemeProvider","FONT_FAMILIES","TooltipProvider","Box","MappingHeader","Flex","ConfigurationSetup","MAPPING_TYPES","MultiMapping","Mapping"],"mappings":"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"}

package/dist/cjs/dynamic-mapping/utils/index.js

@@ -0,0 +1,85 @@
+'use strict';
+
+var index = require('../constants/index.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 modifyMappingData = (mappingData, commonLabel, isEnabled = false) => {
+  const fields = mappingData.map((data) => {
+    var _a, _b, _c;
+    return __spreadProps(__spreadValues({}, data), {
+      id: (_a = data == null ? void 0 : data.id) != null ? _a : data == null ? void 0 : data.name,
+      name: (_b = data == null ? void 0 : data.rtxt) != null ? _b : data == null ? void 0 : data.name,
+      isEnabled: (_c = data == null ? void 0 : data.isEnabled) != null ? _c : false
+    });
+  });
+  fields.unshift({
+    id: index.ALL_FIELD_ID,
+    name: commonLabel,
+    isEnabled
+  });
+  return fields;
+};
+const processFieldForEdit = (field, label) => {
+  if (!(field == null ? void 0 : field.length))
+    return [];
+  if (field == null ? void 0 : field.some((item) => item.id === index.ALL_FIELD_ID))
+    return field;
+  return modifyMappingData(field, label, field.every((item) => item.isEnabled));
+};
+const getMappingCount = (mappingField) => {
+  if (!mappingField)
+    return 0;
+  return mappingField.filter((field) => (field == null ? void 0 : field.id) !== index.ALL_FIELD_ID && field.isEnabled).length;
+};
+const getAllMappingCount = (mappingField) => {
+  if (!mappingField)
+    return 0;
+  return mappingField.length;
+};
+const hasAnyEnabledFields = (ssMappingData) => {
+  var _a, _b, _c, _d, _e, _f;
+  return ((_a = ssMappingData == null ? void 0 : ssMappingData.questions) == null ? void 0 : _a.some((question) => question.isEnabled)) || ((_b = ssMappingData == null ? void 0 : ssMappingData.variables) == null ? void 0 : _b.some((variable) => variable.isEnabled)) || ((_c = ssMappingData == null ? void 0 : ssMappingData.contactProperties) == null ? void 0 : _c.some((property) => property.isEnabled)) || ((_d = ssMappingData == null ? void 0 : ssMappingData.expressions) == null ? void 0 : _d.some((expression) => expression.isEnabled)) || ((_e = ssMappingData == null ? void 0 : ssMappingData.derivedQuestions) == null ? void 0 : _e.some((derivedQuestion) => derivedQuestion.isEnabled)) || ((_f = ssMappingData == null ? void 0 : ssMappingData.property) == null ? void 0 : _f.some((property) => property.isEnabled));
+};
+const hasEmptyConfigurationFields = (configurationFields) => {
+  return Object.values(configurationFields || {}).some(
+    (field) => (field == null ? void 0 : field.value) === null || (field == null ? void 0 : field.value) === void 0
+  );
+};
+const hasResponseImportType = (configuredFields) => {
+  return !!(configuredFields == null ? void 0 : configuredFields.responseImportType);
+};
+const deepClone = (obj) => {
+  return JSON.parse(JSON.stringify(obj));
+};
+const areObjectsEqual = (obj1, obj2) => {
+  return JSON.stringify(obj1) === JSON.stringify(obj2);
+};
+
+exports.areObjectsEqual = areObjectsEqual;
+exports.deepClone = deepClone;
+exports.getAllMappingCount = getAllMappingCount;
+exports.getMappingCount = getMappingCount;
+exports.hasAnyEnabledFields = hasAnyEnabledFields;
+exports.hasEmptyConfigurationFields = hasEmptyConfigurationFields;
+exports.hasResponseImportType = hasResponseImportType;
+exports.modifyMappingData = modifyMappingData;
+exports.processFieldForEdit = processFieldForEdit;
+//# sourceMappingURL=index.js.map

package/dist/cjs/dynamic-mapping/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/dynamic-mapping/utils/index.ts"],"sourcesContent":["import { MappingData, SurveyField, ConfigurationField, ConfigurationFieldValue } from '../types';\nimport { ALL_FIELD_ID } from '../constants';\n\n/**\n * Modifies mapping data by adding an \"ALL\" option at the beginning\n * @param mappingData - Array of survey fields\n * @param commonLabel - Label for the \"Select All\" option\n * @param isEnabled - Whether all fields should be enabled by default\n * @returns Modified array with \"ALL\" option prepended\n */\nexport const modifyMappingData = (\n  mappingData: SurveyField[],\n  commonLabel: string,\n  isEnabled: boolean = false\n): SurveyField[] => {\n  const fields = mappingData.map((data) => ({\n    ...data,\n    id: data?.id ?? data?.name,\n    name: data?.rtxt ?? data?.name,\n    isEnabled: data?.isEnabled ?? false,\n  }));\n  \n  fields.unshift({ \n    id: ALL_FIELD_ID, \n    name: commonLabel, \n    isEnabled,\n  });\n  \n  return fields;\n};\n\n/**\n * Processes mapping fields for edit mode\n * @param field - Array of survey fields\n * @param label - Label for the \"Select All\" option\n * @returns Processed field array\n */\nexport const processFieldForEdit = (\n  field: SurveyField[],\n  label: string\n): SurveyField[] => {\n  if (!field?.length) return [];\n  if (field?.some((item) => item.id === ALL_FIELD_ID)) return field;\n  return modifyMappingData(field, label, field.every((item) => item.isEnabled));\n};\n\n/**\n * Counts the number of enabled fields (excluding \"ALL\")\n * @param mappingField - Array of survey fields\n * @returns Count of enabled fields\n */\nexport const getMappingCount = (mappingField: SurveyField[]): number => {\n  if (!mappingField) return 0;\n  return mappingField.filter((field) => field?.id !== ALL_FIELD_ID && field.isEnabled).length;\n};\n\n/**\n * Gets total count of fields (excluding \"ALL\")\n * @param mappingField - Array of survey fields\n * @returns Total count of fields\n */\nexport const getAllMappingCount = (mappingField: SurveyField[]): number => {\n  if (!mappingField) return 0;\n  return mappingField.length;\n};\n\n/**\n * Checks if any mapping data has enabled fields\n * @param ssMappingData - Complete mapping data object\n * @returns True if any field is enabled\n */\nexport const hasAnyEnabledFields = (ssMappingData: MappingData): boolean => {\n  return (\n    ssMappingData?.questions?.some((question) => question.isEnabled) ||\n    ssMappingData?.variables?.some((variable) => variable.isEnabled) ||\n    ssMappingData?.contactProperties?.some((property) => property.isEnabled) ||\n    ssMappingData?.expressions?.some((expression) => expression.isEnabled) ||\n    ssMappingData?.derivedQuestions?.some((derivedQuestion) => derivedQuestion.isEnabled) ||\n    ssMappingData?.property?.some((property) => property.isEnabled)\n  );\n};\n\n/**\n * Checks if all configuration fields are filled\n * @param configurationFields - Array of configuration fields\n * @returns True if any required field is empty\n */\nexport const hasEmptyConfigurationFields = (\n  configurationFields: ConfigurationField[]\n): boolean => {\n  return Object.values(configurationFields || {}).some(\n    (field) => \n      (field as ConfigurationField)?.value === null || \n      (field as ConfigurationField)?.value === undefined\n  );\n};\n\n/**\n * Checks if response import type is configured\n * @param configuredFields - Object containing configured field values\n * @returns True if response import type is set\n */\nexport const hasResponseImportType = (\n  configuredFields: Record<string, ConfigurationFieldValue>\n): boolean => {\n  return !!configuredFields?.responseImportType;\n};\n\n/**\n * Deep clones an object using JSON serialization\n * @param obj - Object to clone\n * @returns Cloned object\n */\nexport const deepClone = <T>(obj: T): T => {\n  return JSON.parse(JSON.stringify(obj));\n};\n\n/**\n * Compares two objects for equality using JSON serialization\n * @param obj1 - First object\n * @param obj2 - Second object\n * @returns True if objects are equal\n */\nexport const areObjectsEqual = <T>(obj1: T, obj2: T): boolean => {\n  return JSON.stringify(obj1) === JSON.stringify(obj2);\n};\n\n/**\n * Truncates text to a specified length\n * @param text - Text to truncate\n * @param maxLength - Maximum length\n * @returns Truncated text with ellipsis if needed\n */\nexport const truncateText = (text: string, maxLength: number): string => {\n  if (text.length <= maxLength) return text;\n  return `${text.substring(0, maxLength)}...`;\n};\n\n/**\n * Validates if a string is a valid URL\n * @param url - String to validate\n * @returns True if valid URL\n */\nexport const isValidURL = (url: string): boolean => {\n  const pattern = /^(https?:\\/\\/)([a-zA-Z0-9-]+(.[a-zA-Z0-9-]+)+)(:[0-9]{1,5})?(\\/[^\\s]*)?$/;\n  return pattern.test(url);\n};\n\n"],"names":["ALL_FIELD_ID"],"mappings":"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"}

package/dist/cjs/filter/filter-pill-value-selector.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var popover = require('../cascader-dropdown/popover/popover.js');
+var StyledItem = require('../cascader-dropdown/styled/StyledItem.js');
+var React$1 = require('react');
+var cascaderDropdownValueSelector = require('../cascader-dropdown/cascader-dropdown-value-selector.js');
+var cascaderDropdownNode = require('../cascader-dropdown/cascader-dropdown-node.js');
+var cascaderDropdownConstants = require('../cascader-dropdown/helpers/cascader-dropdown-constants.js');
+
+const FilterPillValueSelector = ({
+  children,
+  dataType,
+  choices,
+  onApply,
+  selectorValue
+}) => {
+  const id = React$1.useId();
+  const [open, setOpen] = React$1.useState(false);
+  return /* @__PURE__ */ React.createElement(popover.Popover, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(popover.PopoverTrigger, { asChild: true, className: StyledItem.prefixClassName("cascader-dropdown__trigger") }, children), /* @__PURE__ */ React.createElement(
+    popover.PopoverContent,
+    {
+      "data-filter-popover-content": id,
+      className: StyledItem.prefixClassName("cascader-dropdown"),
+      css: {
+        padding: 0,
+        border: "0.5px solid $black300",
+        borderRadius: "$xl",
+        minWidth: "260px",
+        maxWidth: "260px"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      cascaderDropdownValueSelector.default,
+      {
+        hasOperator: false,
+        onApply: (value) => {
+          setOpen(false);
+          onApply(value);
+        },
+        onCancel: () => {
+          setOpen(false);
+        },
+        selectorValue,
+        selectedNode: new cascaderDropdownNode.CascaderDropdownNode("", "", {
+          dataType,
+          choices
+        }, [], 0, "", "", cascaderDropdownConstants.optionTypes.VALUE_SELECTOR)
+      }
+    )
+  ));
+};
+
+exports.default = FilterPillValueSelector;
+//# sourceMappingURL=filter-pill-value-selector.js.map

package/dist/cjs/filter/filter-pill-value-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-pill-value-selector.js","sources":["../../../src/filter/filter-pill-value-selector.tsx"],"sourcesContent":["import { Popover, PopoverContent, PopoverTrigger } from '../cascader-dropdown/popover';\nimport { prefixClassName } from '../cascader-dropdown/styled/StyledItem';\nimport { ReactNode, useId, useState } from 'react';\nimport CascaderDropdownValueSelector from '../cascader-dropdown/cascader-dropdown-value-selector';\nimport { CascaderDropdownNode } from '../cascader-dropdown/cascader-dropdown-node';\nimport {\n  dataTypes, optionTypes, CascaderDropdownDataValueType, CascaderDropdownValueSelectorType\n} from '../cascader-dropdown/helpers/cascader-dropdown-constants';\n\nconst FilterPillValueSelector = ({\n  children,\n  dataType,\n  choices,\n  onApply,\n  selectorValue\n}: {\n  children: ReactNode;\n  dataType: keyof typeof dataTypes;\n  choices?: CascaderDropdownDataValueType[];\n  onApply: (value: CascaderDropdownValueSelectorType[keyof CascaderDropdownValueSelectorType]) => void;\n  selectorValue: CascaderDropdownValueSelectorType;\n}) => {\n  const id = useId();\n\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild className={prefixClassName('cascader-dropdown__trigger')}>\n        {children}\n      </PopoverTrigger>\n      <PopoverContent\n        data-filter-popover-content={id}\n        className={prefixClassName('cascader-dropdown')}\n        css={{\n          padding: 0, border: '0.5px solid $black300', borderRadius: '$xl', minWidth: '260px', maxWidth: '260px'\n        }}\n      >\n        <CascaderDropdownValueSelector\n          hasOperator={false}\n          onApply={(value: CascaderDropdownValueSelectorType[keyof CascaderDropdownValueSelectorType]) => {\n            setOpen(false);\n            onApply(value);\n          }}\n          onCancel={() => {\n            setOpen(false);\n          }}\n          selectorValue={selectorValue}\n          selectedNode={new CascaderDropdownNode('', '', {\n            dataType,\n            choices\n          }, [], 0, '', '', optionTypes.VALUE_SELECTOR)}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport default FilterPillValueSelector;\n"],"names":["useId","useState","Popover","PopoverTrigger","prefixClassName","PopoverContent","CascaderDropdownValueSelector","CascaderDropdownNode","optionTypes"],"mappings":";;;;;;;;;;;AASA,MAAM,0BAA0B,CAAC;AAAA,EAC/B,QAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AACF,CAMM,KAAA;AACJ,EAAA,MAAM,KAAKA,aAAM,EAAA,CAAA;AAEjB,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,iBAAS,KAAK,CAAA,CAAA;AAEtC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAAC,eAAA,EAAA,EAAQ,IAAY,EAAA,YAAA,EAAc,2BAChC,KAAA,CAAA,aAAA,CAAAC,sBAAA,EAAA,EAAe,OAAO,EAAA,IAAA,EAAC,SAAW,EAAAC,0BAAA,CAAgB,4BAA4B,CAAA,EAAA,EAC5E,QACH,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,sBAAA;AAAA,IAAA;AAAA,MACC,6BAA6B,EAAA,EAAA;AAAA,MAC7B,SAAA,EAAWD,2BAAgB,mBAAmB,CAAA;AAAA,MAC9C,GAAK,EAAA;AAAA,QACH,OAAS,EAAA,CAAA;AAAA,QAAG,MAAQ,EAAA,uBAAA;AAAA,QAAyB,YAAc,EAAA,KAAA;AAAA,QAAO,QAAU,EAAA,OAAA;AAAA,QAAS,QAAU,EAAA,OAAA;AAAA,OACjG;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACE,qCAAA;AAAA,MAAA;AAAA,QACC,WAAa,EAAA,KAAA;AAAA,QACb,OAAA,EAAS,CAAC,KAAsF,KAAA;AAC9F,UAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AACb,UAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,SACf;AAAA,QACA,UAAU,MAAM;AACd,UAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,SACf;AAAA,QACA,aAAA;AAAA,QACA,YAAc,EAAA,IAAIC,yCAAqB,CAAA,EAAA,EAAI,EAAI,EAAA;AAAA,UAC7C,QAAA;AAAA,UACA,OAAA;AAAA,WACC,EAAC,EAAG,GAAG,EAAI,EAAA,EAAA,EAAIC,sCAAY,cAAc,CAAA;AAAA,OAAA;AAAA,KAC9C;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist/cjs/filter/filter-pill.js

@@ -0,0 +1,301 @@
+'use strict';
+
+var slitches_config = require('../packages/frontend-templates/slitches.config.js');
+var StyledItem = require('../cascader-dropdown/styled/StyledItem.js');
+var React = require('react');
+var cascaderDropdown = require('../cascader-dropdown/cascader-dropdown.js');
+var cascaderDropdownConstants = require('../cascader-dropdown/helpers/cascader-dropdown-constants.js');
+var filterPillValueSelector = require('./filter-pill-value-selector.js');
+var flex = require('../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var tooltip = require('../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js');
+var text = require('../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+var closeCircleFill = require('../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/close-circle-fill.js');
+var box = require('../node_modules/@sparrowengg/twigs-react/dist/es/box/box.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 getDisplayValue = (value) => {
+  var _a;
+  if (!value.connector)
+    return null;
+  const displayValue = (_a = value.value) == null ? void 0 : _a[value.connector.dataType];
+  if (typeof displayValue === "string")
+    return displayValue;
+  if (Array.isArray(displayValue))
+    return displayValue.join(", ");
+  if (value.connector.dataType === cascaderDropdownConstants.dataTypes.DATE_RANGE && typeof displayValue === "object" && displayValue !== null) {
+    return `${displayValue.start} - ${displayValue.end}`;
+  }
+  return null;
+};
+const FilterPill = ({
+  icon,
+  filterPillData,
+  setFilterPillData,
+  variant = "outline",
+  cascaderDropdownData,
+  onDelete,
+  showError = false
+}) => {
+  var _a, _b, _c, _d, _e;
+  const onChange = ({
+    selectedProperty,
+    selectorValue
+  }) => {
+    if (selectedProperty && "type" in selectedProperty && selectedProperty.type === cascaderDropdownConstants.optionTypes.VALUE_SELECTOR) {
+      if (!("dataType" in selectedProperty))
+        return;
+      const newFilterPillData = __spreadProps(__spreadValues({}, filterPillData), {
+        value: selectorValue != null ? selectorValue : cascaderDropdownConstants.initialFilterValueSelectorValue,
+        connector: {
+          dataType: selectedProperty.dataType,
+          label: `${selectedProperty.label}`,
+          value: `${selectedProperty.value}`,
+          type: selectedProperty.type
+        }
+      });
+      setFilterPillData(newFilterPillData);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(tooltip.TooltipProvider, { delayDuration: 0 }, /* @__PURE__ */ React.createElement(StyledFilterPill, { variant: showError ? "error" : variant }, /* @__PURE__ */ React.createElement(FilterPillLabel, { icon, label: filterPillData.property.label, labelProps: { css: { color: "$neutral900" } } }), /* @__PURE__ */ React.createElement(flex.Flex, null, !((_a = filterPillData.connector) == null ? void 0 : _a.value) && /* @__PURE__ */ React.createElement(
+    cascaderDropdown.CascaderDropdown,
+    {
+      data: cascaderDropdownData,
+      selectorValue: filterPillData.value,
+      onChange,
+      dropdownContentProps: { align: "start" }
+    },
+    /* @__PURE__ */ React.createElement(StyledValueButton, { css: { borderTopRightRadius: "$lg", borderBottomRightRadius: "$lg" } }, /* @__PURE__ */ React.createElement(
+      text.Text,
+      {
+        css: __spreadValues({
+          color: "$neutral700",
+          padding: "3px $4 3px $1"
+        }, showError && {
+          color: "$negative700",
+          fontWeight: "$5"
+        })
+      },
+      "Choose Condition"
+    ))
+  ), ((_b = filterPillData.connector) == null ? void 0 : _b.value) && /* @__PURE__ */ React.createElement(
+    cascaderDropdown.CascaderDropdown,
+    {
+      data: cascaderDropdownData,
+      selectorValue: filterPillData.value,
+      onChange,
+      dropdownContentProps: { align: "start" }
+    },
+    /* @__PURE__ */ React.createElement(StyledValueButton, null, /* @__PURE__ */ React.createElement(text.Text, { css: { color: "$neutral700", padding: "3px $1 3px $1" } }, (_c = filterPillData.connector) == null ? void 0 : _c.label))
+  ), ((_d = filterPillData.connector) == null ? void 0 : _d.value) && /* @__PURE__ */ React.createElement(
+    cascaderDropdown.CascaderDropdown,
+    {
+      data: cascaderDropdownData,
+      selectorValue: filterPillData.value,
+      value: filterPillData.connector,
+      onChange,
+      dropdownContentProps: { align: "start" }
+    },
+    /* @__PURE__ */ React.createElement(StyledValueButton, { css: { borderTopRightRadius: "$lg", borderBottomRightRadius: "$lg" } }, /* @__PURE__ */ React.createElement(
+      text.Text,
+      {
+        css: __spreadValues({
+          color: "$neutral900",
+          padding: "3px $4 3px $2"
+        }, showError && {
+          color: "$negative700"
+        }),
+        weight: "medium"
+      },
+      (_e = getDisplayValue(filterPillData)) != null ? _e : "Choose Value"
+    ))
+  )), /* @__PURE__ */ React.createElement(tooltip.Tooltip, { content: "Remove" }, /* @__PURE__ */ React.createElement(StyledCloseButton, { className: StyledItem.prefixClassName("filter-pill__close-button"), onClick: () => onDelete() }, /* @__PURE__ */ React.createElement(closeCircleFill.CloseCircleFillIcon, { size: 16 })))));
+};
+const FilterPillLabel = ({
+  icon,
+  label,
+  css,
+  labelProps,
+  iconProps
+}) => {
+  return /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2", css: __spreadValues({ padding: "3px $2 3px $4" }, css) }, icon && /* @__PURE__ */ React.createElement(
+    box.Box,
+    __spreadProps(__spreadValues({}, iconProps), {
+      css: __spreadValues({
+        lineHeight: 0,
+        flexShrink: 0,
+        color: "$neutral800",
+        "&, & svg": {
+          minWidth: "$4",
+          minHeight: "$4",
+          height: "$4",
+          width: "$4"
+        }
+      }, iconProps == null ? void 0 : iconProps.css)
+    }),
+    icon
+  ), /* @__PURE__ */ React.createElement(
+    text.Text,
+    __spreadProps(__spreadValues({
+      weight: "medium",
+      truncate: true
+    }, labelProps), {
+      css: __spreadValues({ color: "$neutral700", maxWidth: "$25" }, labelProps == null ? void 0 : labelProps.css)
+    }),
+    label
+  ));
+};
+const FilterPillWithoutOperator = ({
+  icon,
+  filterPillData,
+  setFilterPillData,
+  variant = "outline",
+  data,
+  onDelete,
+  showError = false
+}) => {
+  var _a;
+  const onChange = (value) => {
+    const newFilterPillData = __spreadProps(__spreadValues({}, filterPillData), {
+      value: __spreadProps(__spreadValues({}, filterPillData.value), {
+        [data.dataType]: value
+      }),
+      connector: {
+        dataType: data.dataType,
+        label: `${data.label}`,
+        value: `${data.value}`,
+        type: data.type
+      }
+    });
+    setFilterPillData(newFilterPillData);
+  };
+  return /* @__PURE__ */ React.createElement(tooltip.TooltipProvider, { delayDuration: 0 }, /* @__PURE__ */ React.createElement(StyledFilterPill, { variant: showError ? "error" : variant }, /* @__PURE__ */ React.createElement(FilterPillLabel, { icon, label: `${filterPillData.property.label}:` }), /* @__PURE__ */ React.createElement(filterPillValueSelector.default, { selectorValue: filterPillData.value, dataType: data.dataType, choices: data.choices, onApply: onChange }, /* @__PURE__ */ React.createElement(flex.Flex, null, /* @__PURE__ */ React.createElement(StyledValueButton, { css: { borderTopRightRadius: "$lg", borderBottomRightRadius: "$lg" } }, /* @__PURE__ */ React.createElement(
+    text.Text,
+    {
+      css: __spreadValues({
+        color: "$neutral900",
+        padding: "3px $4 3px $2"
+      }, showError && {
+        color: "$negative700"
+      }),
+      weight: "medium"
+    },
+    (_a = getDisplayValue(filterPillData)) != null ? _a : "Choose Value"
+  )))), /* @__PURE__ */ React.createElement(tooltip.Tooltip, { content: "Remove" }, /* @__PURE__ */ React.createElement(StyledCloseButton, { className: StyledItem.prefixClassName("filter-pill__close-button"), onClick: () => onDelete() }, /* @__PURE__ */ React.createElement(closeCircleFill.CloseCircleFillIcon, { size: 16 })))));
+};
+const StyledFilterPill = slitches_config.styled(flex.Flex, {
+  height: "$7",
+  alignItems: "center",
+  borderWidth: "1px",
+  borderStyle: "solid",
+  borderColor: "$black200",
+  borderRadius: "$lg",
+  transition: "all $transitions$2",
+  cursor: "default",
+  width: "fit-content",
+  position: "relative",
+  flexShrink: 0,
+  "&:hover": {
+    borderColor: "$black400"
+  },
+  [`&:hover .${StyledItem.prefixClassName("filter-pill__close-button")}`]: {
+    opacity: 1
+  },
+  variants: {
+    disabled: {
+      true: {
+        opacity: 0.4,
+        cursor: "not-allowed"
+      }
+    },
+    variant: {
+      outline: {
+        backgroundColor: "transparent"
+      },
+      filled: {
+        backgroundColor: "$secondary50"
+      },
+      error: {
+        backgroundColorOpacity: ["$negative500", 0.05],
+        borderStyle: "dashed",
+        borderColor: "$negative400",
+        "&:hover": {
+          borderColor: "$negative400"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "outline"
+  }
+});
+const StyledValueButton = slitches_config.styled("button", {
+  backgroundColor: "transparent",
+  display: "flex",
+  alignItems: "center",
+  border: "none",
+  cursor: "pointer",
+  height: "100%",
+  transition: "all $transitions$2",
+  outlineWidth: "1px",
+  outlineStyle: "solid",
+  outlineColor: "transparent",
+  flexShrink: 0,
+  "&:focus, &:active": {
+    outlineColor: "transparent"
+  },
+  "&:focus-visible": {
+    outline: "1px solid $primary400"
+  }
+});
+const StyledCloseButton = slitches_config.styled("button", {
+  backgroundColor: "transparent",
+  border: "none",
+  cursor: "pointer",
+  outline: "none",
+  color: "$neutral500",
+  transition: "all $transitions$2",
+  lineHeight: 0,
+  position: "absolute",
+  right: 0,
+  top: 0,
+  transform: "translate(35%, -35%)",
+  opacity: 0,
+  background: "radial-gradient($white900, $white900 50%, transparent 50%, transparent)",
+  "&:hover, &:focus, &:active, &:focus-visible": {
+    opacity: 1
+  },
+  "& path": {
+    outlineWidth: "3px",
+    outlineStyle: "solid",
+    outlineColor: "$white900",
+    borderRadius: "$round"
+  },
+  "&:hover": {
+    color: "$neutral800"
+  },
+  "&:hover path, &:focus path, &:active path, &:focus-visible path": {
+    outlineColor: "#F2F5F8"
+  }
+});
+
+exports.FilterPill = FilterPill;
+exports.FilterPillWithoutOperator = FilterPillWithoutOperator;
+//# sourceMappingURL=filter-pill.js.map