@pega/cosmos-react-condition-builder 9.0.0-build.9.8 → 9.0.0

package/lib/components/ConditionBuilder/ConditionBuilder.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionBuilder.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/ConditionBuilder.styles.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,sBAAsB,kNAWjC,CAAC;AAKH,eAAO,MAAM,SAAS,kNAOrB,CAAC;AAIF,eAAO,MAAM,yBAAyB,yGAIpC,CAAC;AAKH,eAAO,MAAM,sBAAsB,kNAgBlC,CAAC;AAKF,eAAO,MAAM,WAAW,yGASvB,CAAC;AAIF,eAAO,MAAM,qBAAqB,wNAkBhC,CAAC"}
+{"version":3,"file":"ConditionBuilder.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/ConditionBuilder.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAKL,IAAI,EAGL,MAAM,yBAAyB,CAAC;AAIjC,eAAO,MAAM,sBAAsB,EAAE,OAAO,IAW1C,CAAC;AAKH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAA4B,OAAO;mBAAiB,OAAO;kLA0B/E,CAAC;AAIH,eAAO,MAAM,yBAAyB,6NAIpC,CAAC;AAKH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAA4B,OAAO;kLAyCpE,CAAC;AAKH,eAAO,MAAM,WAAW,6NAkBvB,CAAC;AAIF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;eA7FG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;4OAmHpC,CAAC;AAIH;;;;GAIG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAAyB,OAAO;cAAY,OAAO;kLAsBnF,CAAC"}

package/lib/components/ConditionBuilder/ConditionBuilder.styles.js

@@ -1,5 +1,7 @@
 import styled, { css } from 'styled-components';
-import { calculateFontSize, defaultThemeProp, FieldGroup, Flex, StyledFieldGroupLegend, StyledPopover } from '@pega/cosmos-react-core';
+import { transparentize } from 'polished';
+import { readableColor, calculateFontSize, defaultThemeProp, FieldGroup, Flex, StyledFieldGroupLegend, StyledPopover } from '@pega/cosmos-react-core';
+import { StyledMenuButton } from '@pega/cosmos-react-core/lib/components/MenuButton/MenuButton';
 export const StyledConditionBuilder = styled(Flex)(({ theme: { base: { 'content-width': contentWidth, spacing } } }) => {
     return css `
     ${StyledPopover}:has(&) {
@@ -10,14 +12,24 @@ export const StyledConditionBuilder = styled(Flex)(({ theme: { base: { 'content-
 });
 StyledConditionBuilder.defaultProps = defaultThemeProp;
 // Styled wrapper for each Condition row
-export const StyledRow = styled(Flex) `
-  padding: 0.25rem;
-  background: ${props => (props.shaded ? 'rgba(0, 0, 0, 0.05)' : 'transparent')};
+export const StyledRow = styled(Flex)(({ theme: { base: { spacing, palette: { 'border-line': borderLine, 'primary-background': background } } }, $nested, $isBasicMode }) => {
+    return css `
+    ${!!$nested &&
+        css `
+      padding: ${spacing};
+      background: ${transparentize(0.9, readableColor(background))};
+    `}
 
-  &:first-of-type {
-    padding-top: 0;
-  }
-`;
+    ${!$isBasicMode &&
+        css `
+      & {
+        border-bottom: 0.0625rem solid ${borderLine};
+        padding-block-end: ${spacing};
+        margin-block-end: ${spacing};
+      }
+    `}
+  `;
+});
 StyledRow.defaultProps = defaultThemeProp;
 export const StyledTimePeriodContainer = styled.div(({ theme }) => {
     return css `
@@ -26,46 +38,88 @@ export const StyledTimePeriodContainer = styled.div(({ theme }) => {
 });
 StyledTimePeriodContainer.defaultProps = defaultThemeProp;
 // Styled row-separators for Basic-mode
-export const StyledRowWithSeparator = styled(StyledRow) `
-  padding: 0 0.25rem;
-  &::after,
-  &::before {
-    content: '';
-    flex-grow: 1;
-    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0) 0%);
-    background-position: left center;
-    background-size: 0.5rem 0.0625rem;
-    background-repeat: repeat-x;
-  }
+export const StyledRowWithSeparator = styled(Flex)(({ $nested, theme: { base: { spacing, palette: { 'primary-background': background } } } }) => {
+    const readable = readableColor(background);
+    return css `
+    ${!!$nested &&
+        css `
+      padding: ${spacing};
+      background: ${transparentize(0.9, readable)};
+    `}
 
-  &::before {
-    width: 1rem;
-    flex-grow: 0;
-  }
-`;
+    &::after,
+    &::before {
+      content: '';
+      flex-grow: 1;
+      background-image: linear-gradient(
+        to right,
+        ${transparentize(0.8, readable)} 60%,
+        ${transparentize(1, readable)} 0%
+      );
+      background-position: left center;
+      background-size: 0.5rem 0.0625rem;
+      background-repeat: repeat-x;
+    }
+
+    &::before {
+      width: 1rem;
+      flex-grow: 0;
+    }
+
+    ${StyledMenuButton} {
+      background: none;
+      padding: 0;
+    }
+  `;
+});
 StyledRowWithSeparator.defaultProps = defaultThemeProp;
 // Styled label for the rows in Advanced-mode
-export const StyledLabel = styled.div `
-  font-weight: bold;
-  line-height: 2rem;
-  height: 2rem;
-  width: 2rem;
-  min-width: 2rem;
-  margin-bottom: calc(0.125rem);
-  text-align: center;
-  background: rgba(0, 0, 0, 0.04);
-`;
+export const StyledLabel = styled.div(({ theme: { base: { palette: { 'primary-background': background } } } }) => {
+    return css `
+      font-weight: bold;
+      line-height: 2rem;
+      height: 2rem;
+      width: 2rem;
+      min-width: 2rem;
+      text-align: center;
+      background: ${transparentize(0.9, readableColor(background))};
+    `;
+});
 StyledLabel.defaultProps = defaultThemeProp;
 export const StyledAtomicCondition = styled(FieldGroup)(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, spacing }, components: { text } }, collapsed }) => {
     const fontSizes = calculateFontSize(fontSize, fontScale);
-    return (!collapsed &&
+    return css `
+    ${!collapsed &&
         css `
       ${StyledFieldGroupLegend} {
         font-size: ${fontSizes[text.secondary['font-size']]};
         font-weight: ${text.secondary['font-weight']};
         margin-block-end: calc(0.5 * ${spacing});
       }
-    `);
+    `}
+
+    fieldset {
+      min-width: unset;
+    }
+  `;
 });
 StyledAtomicCondition.defaultProps = defaultThemeProp;
+/**
+ * Flex wrapper for items that should visually align with the input controls inside AtomicCondition
+ * - $row: applies the top-offset when in row layout (aligns with the top input)
+ * - $bottom: instead of aligning to the top input, sinks the item to the bottom of the row
+ */
+export const StyledInputLevelItem = styled(Flex)(({ theme: { base: { 'hit-area': { 'compact-min': compactMin }, spacing } }, $row, $bottom }) => css `
+    ${$row &&
+    !$bottom &&
+    css `
+      padding-block-start: calc(${compactMin} + 0.25 * ${spacing});
+    `}
+    ${$row &&
+    $bottom &&
+    css `
+      margin-block-start: auto;
+    `}
+  `);
+StyledInputLevelItem.defaultProps = defaultThemeProp;
 //# sourceMappingURL=ConditionBuilder.styles.js.map

package/lib/components/ConditionBuilder/ConditionBuilder.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionBuilder.styles.js","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/ConditionBuilder.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,IAAI,EACJ,sBAAsB,EACtB,aAAa,EACd,MAAM,yBAAyB,CAAC;AAGjC,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAClD,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,OAAO,EAAE,EACjD,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;MACN,aAAa;6BACU,YAAY,CAAC,EAAE,sBAAsB,OAAO;0CAC/B,OAAO;;GAE9C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,wCAAwC;AACxC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;gBAErB,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,aAAa,CAAC;;;;;CAK9E,CAAC;AAEF,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChE,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;GACxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,uCAAuC;AACvC,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA;;;;;;;;;;;;;;;;CAgBtD,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,6CAA6C;AAC7C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CASpC,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EACvD,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,EACjE,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACD,SAAS,EACV,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IACzD,OAAO,CACL,CAAC,SAAS;QACV,GAAG,CAAA;QACC,sBAAsB;qBACT,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAa,CAAC;uBAChD,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;uCACb,OAAO;;KAEzC,CACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  calculateFontSize,\n  defaultThemeProp,\n  FieldGroup,\n  Flex,\n  StyledFieldGroupLegend,\n  StyledPopover\n} from '@pega/cosmos-react-core';\nimport type { FontSize } from '@pega/cosmos-react-core';\n\nexport const StyledConditionBuilder = styled(Flex)(({\n  theme: {\n    base: { 'content-width': contentWidth, spacing }\n  }\n}) => {\n  return css`\n    ${StyledPopover}:has(&) {\n      min-inline-size: min(${contentWidth.lg}, calc(100vw - 4 * ${spacing}));\n      max-inline-size: calc(100vw - 4 * ${spacing});\n    }\n  `;\n});\n\nStyledConditionBuilder.defaultProps = defaultThemeProp;\n\n// Styled wrapper for each Condition row\nexport const StyledRow = styled(Flex)`\n  padding: 0.25rem;\n  background: ${props => (props.shaded ? 'rgba(0, 0, 0, 0.05)' : 'transparent')};\n\n  &:first-of-type {\n    padding-top: 0;\n  }\n`;\n\nStyledRow.defaultProps = defaultThemeProp;\n\nexport const StyledTimePeriodContainer = styled.div(({ theme }) => {\n  return css`\n    width: ${theme.base['content-width'].sm};\n  `;\n});\n\nStyledTimePeriodContainer.defaultProps = defaultThemeProp;\n\n// Styled row-separators for Basic-mode\nexport const StyledRowWithSeparator = styled(StyledRow)`\n  padding: 0 0.25rem;\n  &::after,\n  &::before {\n    content: '';\n    flex-grow: 1;\n    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0) 0%);\n    background-position: left center;\n    background-size: 0.5rem 0.0625rem;\n    background-repeat: repeat-x;\n  }\n\n  &::before {\n    width: 1rem;\n    flex-grow: 0;\n  }\n`;\n\nStyledRowWithSeparator.defaultProps = defaultThemeProp;\n\n// Styled label for the rows in Advanced-mode\nexport const StyledLabel = styled.div`\n  font-weight: bold;\n  line-height: 2rem;\n  height: 2rem;\n  width: 2rem;\n  min-width: 2rem;\n  margin-bottom: calc(0.125rem);\n  text-align: center;\n  background: rgba(0, 0, 0, 0.04);\n`;\n\nStyledLabel.defaultProps = defaultThemeProp;\n\nexport const StyledAtomicCondition = styled(FieldGroup)(({\n  theme: {\n    base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n    components: { text }\n  },\n  collapsed\n}) => {\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n  return (\n    !collapsed &&\n    css`\n      ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.secondary['font-size'] as FontSize]};\n        font-weight: ${text.secondary['font-weight']};\n        margin-block-end: calc(0.5 * ${spacing});\n      }\n    `\n  );\n});\n\nStyledAtomicCondition.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"ConditionBuilder.styles.js","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/ConditionBuilder.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport {\n  readableColor,\n  calculateFontSize,\n  defaultThemeProp,\n  FieldGroup,\n  Flex,\n  StyledFieldGroupLegend,\n  StyledPopover\n} from '@pega/cosmos-react-core';\nimport type { FontSize } from '@pega/cosmos-react-core';\nimport { StyledMenuButton } from '@pega/cosmos-react-core/lib/components/MenuButton/MenuButton';\n\nexport const StyledConditionBuilder: typeof Flex = styled(Flex)(({\n  theme: {\n    base: { 'content-width': contentWidth, spacing }\n  }\n}) => {\n  return css`\n    ${StyledPopover}:has(&) {\n      min-inline-size: min(${contentWidth.lg}, calc(100vw - 4 * ${spacing}));\n      max-inline-size: calc(100vw - 4 * ${spacing});\n    }\n  `;\n});\n\nStyledConditionBuilder.defaultProps = defaultThemeProp;\n\n// Styled wrapper for each Condition row\nexport const StyledRow = styled(Flex)<{ $nested?: boolean; $isBasicMode?: boolean }>(({\n  theme: {\n    base: {\n      spacing,\n      palette: { 'border-line': borderLine, 'primary-background': background }\n    }\n  },\n  $nested,\n  $isBasicMode\n}) => {\n  return css`\n    ${!!$nested &&\n    css`\n      padding: ${spacing};\n      background: ${transparentize(0.9, readableColor(background))};\n    `}\n\n    ${!$isBasicMode &&\n    css`\n      & {\n        border-bottom: 0.0625rem solid ${borderLine};\n        padding-block-end: ${spacing};\n        margin-block-end: ${spacing};\n      }\n    `}\n  `;\n});\n\nStyledRow.defaultProps = defaultThemeProp;\n\nexport const StyledTimePeriodContainer = styled.div(({ theme }) => {\n  return css`\n    width: ${theme.base['content-width'].sm};\n  `;\n});\n\nStyledTimePeriodContainer.defaultProps = defaultThemeProp;\n\n// Styled row-separators for Basic-mode\nexport const StyledRowWithSeparator = styled(Flex)<{ $nested?: boolean }>(({\n  $nested,\n  theme: {\n    base: {\n      spacing,\n      palette: { 'primary-background': background }\n    }\n  }\n}) => {\n  const readable = readableColor(background);\n  return css`\n    ${!!$nested &&\n    css`\n      padding: ${spacing};\n      background: ${transparentize(0.9, readable)};\n    `}\n\n    &::after,\n    &::before {\n      content: '';\n      flex-grow: 1;\n      background-image: linear-gradient(\n        to right,\n        ${transparentize(0.8, readable)} 60%,\n        ${transparentize(1, readable)} 0%\n      );\n      background-position: left center;\n      background-size: 0.5rem 0.0625rem;\n      background-repeat: repeat-x;\n    }\n\n    &::before {\n      width: 1rem;\n      flex-grow: 0;\n    }\n\n    ${StyledMenuButton} {\n      background: none;\n      padding: 0;\n    }\n  `;\n});\n\nStyledRowWithSeparator.defaultProps = defaultThemeProp;\n\n// Styled label for the rows in Advanced-mode\nexport const StyledLabel = styled.div(\n  ({\n    theme: {\n      base: {\n        palette: { 'primary-background': background }\n      }\n    }\n  }) => {\n    return css`\n      font-weight: bold;\n      line-height: 2rem;\n      height: 2rem;\n      width: 2rem;\n      min-width: 2rem;\n      text-align: center;\n      background: ${transparentize(0.9, readableColor(background))};\n    `;\n  }\n);\n\nStyledLabel.defaultProps = defaultThemeProp;\n\nexport const StyledAtomicCondition = styled(FieldGroup)(({\n  theme: {\n    base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n    components: { text }\n  },\n  collapsed\n}) => {\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n  return css`\n    ${!collapsed &&\n    css`\n      ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.secondary['font-size'] as FontSize]};\n        font-weight: ${text.secondary['font-weight']};\n        margin-block-end: calc(0.5 * ${spacing});\n      }\n    `}\n\n    fieldset {\n      min-width: unset;\n    }\n  `;\n});\n\nStyledAtomicCondition.defaultProps = defaultThemeProp;\n\n/**\n * Flex wrapper for items that should visually align with the input controls inside AtomicCondition\n * - $row: applies the top-offset when in row layout (aligns with the top input)\n * - $bottom: instead of aligning to the top input, sinks the item to the bottom of the row\n */\nexport const StyledInputLevelItem = styled(Flex)<{ $row?: boolean; $bottom?: boolean }>(\n  ({\n    theme: {\n      base: {\n        'hit-area': { 'compact-min': compactMin },\n        spacing\n      }\n    },\n    $row,\n    $bottom\n  }) => css`\n    ${$row &&\n    !$bottom &&\n    css`\n      padding-block-start: calc(${compactMin} + 0.25 * ${spacing});\n    `}\n    ${$row &&\n    $bottom &&\n    css`\n      margin-block-start: auto;\n    `}\n  `\n);\n\nStyledInputLevelItem.defaultProps = defaultThemeProp;\n"]}

package/lib/components/ConditionBuilder/ConditionBuilder.types.d.ts

@@ -1,6 +1,7 @@
-import type { Ref } from 'react';
+import type { ReactNode, Ref } from 'react';
 import type { BaseProps, MenuItemProps, NoChildrenProp } from '@pega/cosmos-react-core';
 import type { Comparator, ComparatorsByType, DateFunction, DatePart, FieldType, RHSType, TimePeriod } from './core/types';
+import type { AtomicConditionProps } from './AtomicCondition';
 /** RHS object with a Date function */
 export interface RhsWithDateFunction {
     /**
@@ -49,6 +50,7 @@ export interface LeafCondition {
         start: string | number;
         end: string | number;
     } | RhsWithDateFunction | RhsWithRelativeDate | RhsWithParameter;
+    lhsType?: string;
 }
 /** Type definition for objects representing condition-rows in the builder UI */
 export interface ConditionRow extends LeafCondition {
@@ -99,6 +101,11 @@ export type Field = BasicField & ({
      * e.g. Text(single value)/Picklist/... should be used as `TEXT`
      */
     type: FieldType;
+    /**
+     * Used to handle percentages are stored in the database,
+     * determine whether value is stored in the range of 0 to 1 or 0 to 100
+     */
+    unit?: 'percent_1' | 'percent_100';
 } | {
     /** An array of type Field to represent the child items. */
     items: Field[];
@@ -110,17 +117,28 @@ export interface DateFunctionsByType {
     /** Date functions to enable for DATE_ONLY fields */
     DATE_ONLY: DateFunction[];
 }
+export type ValidationOptions = {
+    /**
+     * Whether to validate individual condition rows for completeness.
+     *
+     * When `true` (default): Validates each row's LHS, comparator, and RHS fields
+     * When `false`: Only validates the overall logic string structure
+     */
+    performRowValidation?: boolean;
+};
 export interface HandleValue {
     /**
      * Returns condition validity and condition or undefined if valid.
      * Undefined indicates no condition.
      */
-    getCondition: () => [valid: false] | [valid: true, condition: Condition | undefined];
+    getCondition: (options?: ValidationOptions) => [valid: false] | [valid: true, condition: Condition | undefined];
+    getLogicError: () => string | null;
 }
 /** Type definition for the input props of ConditionBuilder */
 export default interface ConditionBuilderProps extends BaseProps, NoChildrenProp {
     /** Metadata (data-model) for the Fields to use in the builder */
     fields: Field[];
+    conditionRenderer?: (props: AtomicConditionProps) => ReactNode;
     /** (Optional) A seed condition for the builder. To use when editing an existing condition */
     condition?: Condition;
     /** (Optional) Used to limit the Comparators allowed in the builder. */
@@ -133,10 +151,32 @@ export default interface ConditionBuilderProps extends BaseProps, NoChildrenProp
     validRhsTypes?: Set<RHSType>;
     /** (Optional) When enabling 'DATE_FUNCTION's via `validRhsTypes`, pass this to specify which all date functions are applicable per field type */
     dateFunctions?: DateFunctionsByType;
+    /** (Optional) IANA timezone string used to initialize date/time pickers with the operator's timezone */
+    timeZone?: string;
     /** (Optional) Pass this if the `NOT` operator should be considered as invalid */
     disallowNOT?: boolean;
     /** Imperative handle for the component. */
     handle?: Ref<HandleValue>;
+    /** Callback fired when a row is added */
+    onAddRow?: (rowIndex: number) => void;
+    /** Callback fired when a row is deleted */
+    onDeleteRow?: (rowIndex: number) => void;
+    /**
+     * Callback fired when logic string validation error occurs or clears.
+     */
+    onLogicError?: (error: string | null) => void;
+    /**
+     * Callback fired when condition data changes.
+     */
+    onConditionChange?: () => void;
+    /** Makes the input non editable and non clickable. The browser defaults to false. */
+    readOnly?: boolean;
+    /** Disable the control. The browser defaults to false. */
+    disabled?: boolean;
+    /**
+     * Ref to access the root HTMLDivElement of the ConditionBuilder.
+     */
+    ref?: Ref<HTMLDivElement>;
 }
 export {};
 //# sourceMappingURL=ConditionBuilder.types.d.ts.map

package/lib/components/ConditionBuilder/ConditionBuilder.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionBuilder.types.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/ConditionBuilder.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAExF,OAAO,KAAK,EACV,UAAU,EACV,iBAAiB,EACjB,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,OAAO,EACP,UAAU,EACX,MAAM,cAAc,CAAC;AAEtB,sCAAsC;AACtC,MAAM,WAAW,mBAAmB;IAClC;;;;;;;;;;;;;;OAcG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,sCAAsC;AACtC,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE;QACZ,UAAU,EAAE,UAAU,CAAC;QACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,QAAQ,CAAC;KACpB,CAAC;CACH;AAED,qCAAqC;AACrC,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,oEAAoE;AACpE,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,UAAU,CAAC;IAEvB,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IAGF,GAAG,CAAC,EACA;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,GACjB;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAC1B;QAAE,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;KAAE,GAC/B;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAChD,mBAAmB,GACnB,mBAAmB,GACnB,gBAAgB,CAAC;CACtB;AAED,gFAAgF;AAChF,MAAM,WAAW,YAAa,SAAQ,aAAa;IACjD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,MAAM,SAAS,GACjB;IAAE,GAAG,EAAE,SAAS,EAAE,CAAA;CAAE,GACpB;IAAE,EAAE,EAAE,SAAS,EAAE,CAAA;CAAE,GACnB;IAAE,GAAG,EAAE,SAAS,CAAA;CAAE,GAClB;IAAE,SAAS,EAAE,aAAa,CAAA;CAAE,CAAC;AAEjC,2EAA2E;AAE3E,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,CAAC,CAAC;AAEnE,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,CAAC,CAAC;AAEnE,MAAM,MAAM,sBAAsB,CAAC,CAAC,IAAI,CACtC,IAAI,EACA;IAAE,GAAG,CAAC,EAAE,CAAC,CAAC;IAAC,GAAG,EAAE,MAAM,EAAE,CAAA;CAAE,GAC1B;IACE,GAAG,CAAC,EAAE,CAAC,CAAC;IACR,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,KACF,OAAO,CAAC,MAAM,EAAE,GAAG,cAAc,EAAE,CAAC,CAAC;AAE1C,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,MAAM,EAAE,GAAG,cAAc,EAAE,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAC;AAExF,UAAU,UAAW,SAAQ,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,CAAC;CAAG;AAErE,MAAM,MAAM,KAAK,GAAG,UAAU,GAC5B,CACI;IACE,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;IAE9B;;;;OAIG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAEvC;;;;;OAKG;IACH,IAAI,EAAE,SAAS,CAAC;CACjB,GACD;IACE,2DAA2D;IAC3D,KAAK,EAAE,KAAK,EAAE,CAAC;CAChB,CACJ,CAAC;AAEJ,yCAAyC;AACzC,MAAM,WAAW,mBAAmB;IAClC,oDAAoD;IACpD,SAAS,EAAE,YAAY,EAAE,CAAC;IAC1B,oDAAoD;IACpD,SAAS,EAAE,YAAY,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC;CACtF;AAED,8DAA8D;AAC9D,MAAM,CAAC,OAAO,WAAW,qBAAsB,SAAQ,SAAS,EAAE,cAAc;IAC9E,iEAAiE;IACjE,MAAM,EAAE,KAAK,EAAE,CAAC;IAEhB,6FAA6F;IAC7F,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAEvC;;;;OAIG;IACH,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IAE7B,iJAAiJ;IACjJ,aAAa,CAAC,EAAE,mBAAmB,CAAC;IAEpC,iFAAiF;IACjF,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CAC3B"}
+{"version":3,"file":"ConditionBuilder.types.d.ts","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/ConditionBuilder.types.ts"],"names":[],"mappings":"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"}

package/lib/components/ConditionBuilder/ConditionBuilder.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionBuilder.types.js","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/ConditionBuilder.types.ts"],"names":[],"mappings":"","sourcesContent":["// cspell:words DDTHH\nimport type { Ref } from 'react';\n\nimport type { BaseProps, MenuItemProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport type {\n  Comparator,\n  ComparatorsByType,\n  DateFunction,\n  DatePart,\n  FieldType,\n  RHSType,\n  TimePeriod\n} from './core/types';\n\n/** RHS object with a Date function */\nexport interface RhsWithDateFunction {\n  /**\n   * Output format for the value varies based on the dateFunction:\n   * YEARS: First day of year as YYYY-MM-DD\n   * QUARTERS: First day of quarter as YYYY-MM-DD\n   * MONTHS: First day of month as YYYY-MM-DD\n   * WEEKS: First day of week as YYYY-MM-DD\n   * DAYS: Date as YYYY-MM-DD\n   * HOURS: YYYY-MM-DDTHH:mm:ss\n   * MINUTES: YYYY-MM-DDTHH:mm:ss\n   * SECONDS: YYYY-MM-DDTHH:mm:ss\n   * HOURS_OF_DAY: 0-23\n   * MONTHS_OF_YEAR: 1-12\n   * DAYS_OF_MONTH: 1-31\n   * DAYS_OF_WEEK: 1-7\n   */\n  value: string | number;\n  dateFunction: DateFunction;\n}\n\n/** RHS object with a Relative Date */\nexport interface RhsWithRelativeDate {\n  relativeDate: {\n    timePeriod: TimePeriod;\n    interval?: number;\n    datePart: DatePart;\n  };\n}\n\n/** RHS object with PARAMETER type */\nexport interface RhsWithParameter {\n  parameterId: string;\n}\n\n/** Type definition for the leaf-level nodes in nested conditions */\nexport interface LeafCondition {\n  comparator: Comparator;\n\n  lhs: {\n    field: string;\n  };\n\n  // Optional for some of the comparators like IS_TRUE, IS_NULL, etc.\n  rhs?:\n    | { field: string } // When comparing the LHS with another field\n    | { value: string | number } // When comparing the LHS with a single literal value (for comparators like EQ, GTE etc.)\n    | { values: string[] | number[] } // When comparing the LHS with a list of literal values (for comparators like IN, NOT_IN etc.)\n    | { start: string | number; end: string | number } // When comparing numeric or date field with two values that determine range\n    | RhsWithDateFunction // When comparing a date field with a date function on RHS\n    | RhsWithRelativeDate // When comparing a date field with a symbolic date on RHS\n    | RhsWithParameter; //  When comparing the LHS with PARAMETER type\n}\n\n/** Type definition for objects representing condition-rows in the builder UI */\nexport interface ConditionRow extends LeafCondition {\n  id: string; // To use as `key` prop when rendering a list of rows\n  label: string; // Used to refer the row from a logic-string\n}\n\n/**\n * Type definition for simple/complex conditions\n * At a given node in the condition tree, it can have exactly one of the keys AND/OR/NOT/condition\n */\nexport type Condition =\n  | { AND: Condition[] }\n  | { OR: Condition[] }\n  | { NOT: Condition }\n  | { condition: LeafCondition };\n\n/** Type definition for the input Field objects for the ConditionBuilder */\n\nexport type ParameterValue = Pick<MenuItemProps, 'id' | 'primary'>;\n\nexport type ReferenceValue = Pick<MenuItemProps, 'id' | 'primary'>;\n\nexport type ValueSelectionFunction<F> = (\n  args:\n    | { lhs?: F; ids: string[] }\n    | {\n        lhs?: F;\n        searchString?: string; // If missing, assume empty string\n        comparator?: string; // If missing, assume EQ\n\n        // If the below are missing, fetch maximum possible results\n        pageNumber?: number;\n        pageSize?: number;\n      }\n) => Promise<string[] | ReferenceValue[]>;\n\nexport type ValueSelection<F> = string[] | ReferenceValue[] | ValueSelectionFunction<F>;\n\ninterface BasicField extends Pick<MenuItemProps, 'id' | 'primary'> {}\n\nexport type Field = BasicField &\n  (\n    | {\n        parameters?: ParameterValue[];\n\n        /**\n         * For TEXT fields, if a list of possible values is known ahead of time, they can be passed.\n         * Otherwise we fetch data from api and pass a promise which returns list of values\n         * This enables users to select from those values instead of manually typing them\n         */\n        possibleValues?: ValueSelection<Field>;\n\n        /**\n         * Data-type for the field.\n         * Has to be one of these values. Convert where necessary\n         * e.g. Currency/Percentage... should be used as `DECIMAL`\n         * e.g. Text(single value)/Picklist/... should be used as `TEXT`\n         */\n        type: FieldType;\n      }\n    | {\n        /** An array of type Field to represent the child items. */\n        items: Field[];\n      }\n  );\n\n/** Valid date functions by field type */\nexport interface DateFunctionsByType {\n  /** Date functions to enable for DATE_TIME fields */\n  DATE_TIME: DateFunction[];\n  /** Date functions to enable for DATE_ONLY fields */\n  DATE_ONLY: DateFunction[];\n}\n\nexport interface HandleValue {\n  /**\n   * Returns condition validity and condition or undefined if valid.\n   * Undefined indicates no condition.\n   */\n  getCondition: () => [valid: false] | [valid: true, condition: Condition | undefined];\n}\n\n/** Type definition for the input props of ConditionBuilder */\nexport default interface ConditionBuilderProps extends BaseProps, NoChildrenProp {\n  /** Metadata (data-model) for the Fields to use in the builder */\n  fields: Field[];\n\n  /** (Optional) A seed condition for the builder. To use when editing an existing condition */\n  condition?: Condition;\n\n  /** (Optional) Used to limit the Comparators allowed in the builder. */\n  validComparators?: ComparatorsByType[];\n\n  /**\n   * (Optional) Pass this to control which all types of RHS are enabled in the component\n   * DEFAULT: Set(['LITERAL', 'FIELD'])\n   * NOTE: If enabling `DATE_FUNCTION`s, additionally pass a `dateFunctions` prop to specify which functions are enabled\n   */\n  validRhsTypes?: Set<RHSType>;\n\n  /** (Optional) When enabling 'DATE_FUNCTION's via `validRhsTypes`, pass this to specify which all date functions are applicable per field type */\n  dateFunctions?: DateFunctionsByType;\n\n  /** (Optional) Pass this if the `NOT` operator should be considered as invalid */\n  disallowNOT?: boolean;\n\n  /** Imperative handle for the component. */\n  handle?: Ref<HandleValue>;\n}\n"]}
+{"version":3,"file":"ConditionBuilder.types.js","sourceRoot":"","sources":["../../../src/components/ConditionBuilder/ConditionBuilder.types.ts"],"names":[],"mappings":"","sourcesContent":["// cspell:words DDTHH\nimport type { ReactNode, Ref } from 'react';\n\nimport type { BaseProps, MenuItemProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport type {\n  Comparator,\n  ComparatorsByType,\n  DateFunction,\n  DatePart,\n  FieldType,\n  RHSType,\n  TimePeriod\n} from './core/types';\nimport type { AtomicConditionProps } from './AtomicCondition';\n\n/** RHS object with a Date function */\nexport interface RhsWithDateFunction {\n  /**\n   * Output format for the value varies based on the dateFunction:\n   * YEARS: First day of year as YYYY-MM-DD\n   * QUARTERS: First day of quarter as YYYY-MM-DD\n   * MONTHS: First day of month as YYYY-MM-DD\n   * WEEKS: First day of week as YYYY-MM-DD\n   * DAYS: Date as YYYY-MM-DD\n   * HOURS: YYYY-MM-DDTHH:mm:ss\n   * MINUTES: YYYY-MM-DDTHH:mm:ss\n   * SECONDS: YYYY-MM-DDTHH:mm:ss\n   * HOURS_OF_DAY: 0-23\n   * MONTHS_OF_YEAR: 1-12\n   * DAYS_OF_MONTH: 1-31\n   * DAYS_OF_WEEK: 1-7\n   */\n  value: string | number;\n  dateFunction: DateFunction;\n}\n\n/** RHS object with a Relative Date */\nexport interface RhsWithRelativeDate {\n  relativeDate: {\n    timePeriod: TimePeriod;\n    interval?: number;\n    datePart: DatePart;\n  };\n}\n\n/** RHS object with PARAMETER type */\nexport interface RhsWithParameter {\n  parameterId: string;\n}\n\n/** Type definition for the leaf-level nodes in nested conditions */\nexport interface LeafCondition {\n  comparator: Comparator;\n\n  lhs: {\n    field: string;\n  };\n\n  // Optional for some of the comparators like IS_TRUE, IS_NULL, etc.\n  rhs?:\n    | { field: string } // When comparing the LHS with another field\n    | { value: string | number } // When comparing the LHS with a single literal value (for comparators like EQ, GTE etc.)\n    | { values: string[] | number[] } // When comparing the LHS with a list of literal values (for comparators like IN, NOT_IN etc.)\n    | { start: string | number; end: string | number } // When comparing numeric or date field with two values that determine range\n    | RhsWithDateFunction // When comparing a date field with a date function on RHS\n    | RhsWithRelativeDate // When comparing a date field with a symbolic date on RHS\n    | RhsWithParameter; //  When comparing the LHS with PARAMETER type\n  lhsType?: string;\n}\n\n/** Type definition for objects representing condition-rows in the builder UI */\nexport interface ConditionRow extends LeafCondition {\n  id: string; // To use as `key` prop when rendering a list of rows\n  label: string; // Used to refer the row from a logic-string\n}\n\n/**\n * Type definition for simple/complex conditions\n * At a given node in the condition tree, it can have exactly one of the keys AND/OR/NOT/condition\n */\nexport type Condition =\n  | { AND: Condition[] }\n  | { OR: Condition[] }\n  | { NOT: Condition }\n  | { condition: LeafCondition };\n\n/** Type definition for the input Field objects for the ConditionBuilder */\n\nexport type ParameterValue = Pick<MenuItemProps, 'id' | 'primary'>;\n\nexport type ReferenceValue = Pick<MenuItemProps, 'id' | 'primary'>;\n\nexport type ValueSelectionFunction<F> = (\n  args:\n    | { lhs?: F; ids: string[] }\n    | {\n        lhs?: F;\n        searchString?: string; // If missing, assume empty string\n        comparator?: string; // If missing, assume EQ\n\n        // If the below are missing, fetch maximum possible results\n        pageNumber?: number;\n        pageSize?: number;\n      }\n) => Promise<string[] | ReferenceValue[]>;\n\nexport type ValueSelection<F> = string[] | ReferenceValue[] | ValueSelectionFunction<F>;\n\ninterface BasicField extends Pick<MenuItemProps, 'id' | 'primary'> {}\n\nexport type Field = BasicField &\n  (\n    | {\n        parameters?: ParameterValue[];\n\n        /**\n         * For TEXT fields, if a list of possible values is known ahead of time, they can be passed.\n         * Otherwise we fetch data from api and pass a promise which returns list of values\n         * This enables users to select from those values instead of manually typing them\n         */\n        possibleValues?: ValueSelection<Field>;\n\n        /**\n         * Data-type for the field.\n         * Has to be one of these values. Convert where necessary\n         * e.g. Currency/Percentage... should be used as `DECIMAL`\n         * e.g. Text(single value)/Picklist/... should be used as `TEXT`\n         */\n        type: FieldType;\n\n        /**\n         * Used to handle percentages are stored in the database,\n         * determine whether value is stored in the range of 0 to 1 or 0 to 100\n         */\n        unit?: 'percent_1' | 'percent_100';\n      }\n    | {\n        /** An array of type Field to represent the child items. */\n        items: Field[];\n      }\n  );\n\n/** Valid date functions by field type */\nexport interface DateFunctionsByType {\n  /** Date functions to enable for DATE_TIME fields */\n  DATE_TIME: DateFunction[];\n  /** Date functions to enable for DATE_ONLY fields */\n  DATE_ONLY: DateFunction[];\n}\n\nexport type ValidationOptions = {\n  /**\n   * Whether to validate individual condition rows for completeness.\n   *\n   * When `true` (default): Validates each row's LHS, comparator, and RHS fields\n   * When `false`: Only validates the overall logic string structure\n   */\n  performRowValidation?: boolean;\n};\n\nexport interface HandleValue {\n  /**\n   * Returns condition validity and condition or undefined if valid.\n   * Undefined indicates no condition.\n   */\n  getCondition: (\n    options?: ValidationOptions\n  ) => [valid: false] | [valid: true, condition: Condition | undefined];\n  getLogicError: () => string | null;\n}\n\n/** Type definition for the input props of ConditionBuilder */\nexport default interface ConditionBuilderProps extends BaseProps, NoChildrenProp {\n  /** Metadata (data-model) for the Fields to use in the builder */\n  fields: Field[];\n\n  conditionRenderer?: (props: AtomicConditionProps) => ReactNode;\n\n  /** (Optional) A seed condition for the builder. To use when editing an existing condition */\n  condition?: Condition;\n\n  /** (Optional) Used to limit the Comparators allowed in the builder. */\n  validComparators?: ComparatorsByType[];\n\n  /**\n   * (Optional) Pass this to control which all types of RHS are enabled in the component\n   * DEFAULT: Set(['LITERAL', 'FIELD'])\n   * NOTE: If enabling `DATE_FUNCTION`s, additionally pass a `dateFunctions` prop to specify which functions are enabled\n   */\n  validRhsTypes?: Set<RHSType>;\n\n  /** (Optional) When enabling 'DATE_FUNCTION's via `validRhsTypes`, pass this to specify which all date functions are applicable per field type */\n  dateFunctions?: DateFunctionsByType;\n\n  /** (Optional) IANA timezone string used to initialize date/time pickers with the operator's timezone */\n  timeZone?: string;\n\n  /** (Optional) Pass this if the `NOT` operator should be considered as invalid */\n  disallowNOT?: boolean;\n\n  /** Imperative handle for the component. */\n  handle?: Ref<HandleValue>;\n\n  /** Callback fired when a row is added */\n  onAddRow?: (rowIndex: number) => void;\n\n  /** Callback fired when a row is deleted */\n  onDeleteRow?: (rowIndex: number) => void;\n\n  /**\n   * Callback fired when logic string validation error occurs or clears.\n   */\n  onLogicError?: (error: string | null) => void;\n\n  /**\n   * Callback fired when condition data changes.\n   */\n  onConditionChange?: () => void;\n\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: boolean;\n\n  /** Disable the control. The browser defaults to false. */\n  disabled?: boolean;\n\n  /**\n   * Ref to access the root HTMLDivElement of the ConditionBuilder.\n   */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/components/ConditionBuilder/RhsControls/CSVInput.d.ts

@@ -0,0 +1,18 @@
+import { type FormControlProps } from '@pega/cosmos-react-core';
+import type { Field, LeafCondition } from '../ConditionBuilder.types';
+import type { FieldType } from '../core/types';
+type CSVField = Field & {
+    type: FieldType;
+    unit?: 'percent_1' | 'percent_100';
+};
+export interface CSVInputProps extends FormControlProps {
+    /** Rhs for the condition */
+    rhs?: LeafCondition['rhs'];
+    /** Field associated with the condition */
+    field: CSVField;
+    /** Callback for any modifications to the Rhs */
+    onChange: (rhs: LeafCondition['rhs']) => void;
+}
+export declare const CSVInput: ({ rhs, field, onChange, ...restProps }: CSVInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CSVInput.d.ts.map

package/lib/components/ConditionBuilder/RhsControls/CSVInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSVInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/CSVInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,KAAK,QAAQ,GAAG,KAAK,GAAG;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,IAAI,CAAC,EAAE,WAAW,GAAG,aAAa,CAAA;CAAE,CAAC;AAEhF,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACrD,4BAA4B;IAC5B,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3B,0CAA0C;IAC1C,KAAK,EAAE,QAAQ,CAAC;IAChB,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,QAAQ,GAAI,wCAAwC,aAAa,4CA6D7E,CAAC"}

package/lib/components/ConditionBuilder/RhsControls/CSVInput.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { hasProp, Input, useAfterInitialEffect } from '@pega/cosmos-react-core';
+export const CSVInput = ({ rhs, field, onChange, ...restProps }) => {
+    const fieldType = field.type;
+    const fieldUnit = field.unit;
+    // Set up a CSV input for IN/NOT_IN comparators
+    const [csvInput, setCsvInput] = useState(() => {
+        if (rhs && hasProp(rhs, 'values')) {
+            if ((fieldType === 'DECIMAL' || fieldType === 'INTEGER') && fieldUnit === 'percent_1') {
+                return rhs.values
+                    .map(v => (typeof v === 'number' ? parseFloat((v * 100).toFixed(2)) : v))
+                    .join(', ');
+            }
+            return rhs.values.join(', ');
+        }
+        return '';
+    });
+    useEffect(() => {
+        // If moving away from the CSV-mode, clear the CSV Input.
+        // This ensures that if a different `rhs.values` is passed (a new empty array can be passed when an applicable comparator is selected), the local state matches the new input.
+        if (csvInput && (!rhs || !hasProp(rhs, 'values'))) {
+            setCsvInput('');
+        }
+    }, [rhs]);
+    useAfterInitialEffect(() => {
+        if (rhs && hasProp(rhs, 'values')) {
+            if ((fieldType === 'DECIMAL' || fieldType === 'INTEGER') && fieldUnit === 'percent_1') {
+                setCsvInput(rhs.values
+                    .map(v => (typeof v === 'number' ? parseFloat((v * 100).toFixed(2)) : v))
+                    .join(', '));
+            }
+            else {
+                setCsvInput(rhs.values.join(', '));
+            }
+        }
+    }, [rhs]);
+    const handleChange = (e) => {
+        setCsvInput(e.target.value);
+    };
+    const handleBlur = () => {
+        // Submit a new RHS
+        let newValues = csvInput
+            .split(',')
+            .map(v => v.trim())
+            .filter(v => v.length > 0); // Ignore empty strings
+        if (fieldType === 'DECIMAL' || fieldType === 'INTEGER') {
+            newValues = newValues.map(v => {
+                if (fieldUnit === 'percent_1' && !Number.isNaN(Number(v))) {
+                    return Number(v) / 100;
+                }
+                return Number(v);
+            }); // This can set up some NaN values. Those are used to show an appropriate feedback when the submit button is hit
+        }
+        onChange({ values: newValues });
+    };
+    return _jsx(Input, { ...restProps, value: csvInput, onChange: handleChange, onBlur: handleBlur });
+};
+//# sourceMappingURL=CSVInput.js.map

package/lib/components/ConditionBuilder/RhsControls/CSVInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSVInput.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/CSVInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState, type ChangeEvent } from 'react';\n\nimport {\n  hasProp,\n  Input,\n  useAfterInitialEffect,\n  type FormControlProps\n} from '@pega/cosmos-react-core';\n\nimport type { Field, LeafCondition } from '../ConditionBuilder.types';\nimport type { FieldType } from '../core/types';\n\ntype CSVField = Field & { type: FieldType; unit?: 'percent_1' | 'percent_100' };\n\nexport interface CSVInputProps extends FormControlProps {\n  /** Rhs for the condition */\n  rhs?: LeafCondition['rhs'];\n  /** Field associated with the condition */\n  field: CSVField;\n  /** Callback for any modifications to the Rhs */\n  onChange: (rhs: LeafCondition['rhs']) => void;\n}\n\nexport const CSVInput = ({ rhs, field, onChange, ...restProps }: CSVInputProps) => {\n  const fieldType = field.type;\n  const fieldUnit = field.unit;\n\n  // Set up a CSV input for IN/NOT_IN comparators\n  const [csvInput, setCsvInput] = useState(() => {\n    if (rhs && hasProp(rhs, 'values')) {\n      if ((fieldType === 'DECIMAL' || fieldType === 'INTEGER') && fieldUnit === 'percent_1') {\n        return rhs.values\n          .map(v => (typeof v === 'number' ? parseFloat((v * 100).toFixed(2)) : v))\n          .join(', ');\n      }\n      return rhs.values.join(', ');\n    }\n    return '';\n  });\n\n  useEffect(() => {\n    // If moving away from the CSV-mode, clear the CSV Input.\n    // This ensures that if a different `rhs.values` is passed (a new empty array can be passed when an applicable comparator is selected), the local state matches the new input.\n    if (csvInput && (!rhs || !hasProp(rhs, 'values'))) {\n      setCsvInput('');\n    }\n  }, [rhs]);\n\n  useAfterInitialEffect(() => {\n    if (rhs && hasProp(rhs, 'values')) {\n      if ((fieldType === 'DECIMAL' || fieldType === 'INTEGER') && fieldUnit === 'percent_1') {\n        setCsvInput(\n          rhs.values\n            .map(v => (typeof v === 'number' ? parseFloat((v * 100).toFixed(2)) : v))\n            .join(', ')\n        );\n      } else {\n        setCsvInput(rhs.values.join(', '));\n      }\n    }\n  }, [rhs]);\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    setCsvInput(e.target.value);\n  };\n\n  const handleBlur = () => {\n    // Submit a new RHS\n    let newValues: string[] | number[] = csvInput\n      .split(',')\n      .map(v => v.trim())\n      .filter(v => v.length > 0); // Ignore empty strings\n    if (fieldType === 'DECIMAL' || fieldType === 'INTEGER') {\n      newValues = newValues.map(v => {\n        if (fieldUnit === 'percent_1' && !Number.isNaN(Number(v))) {\n          return Number(v) / 100;\n        }\n        return Number(v);\n      }); // This can set up some NaN values. Those are used to show an appropriate feedback when the submit button is hit\n    }\n    onChange({ values: newValues });\n  };\n\n  return <Input {...restProps} value={csvInput} onChange={handleChange} onBlur={handleBlur} />;\n};\n"]}

package/lib/components/ConditionBuilder/RhsControls/NumericInput.d.ts

@@ -13,6 +13,8 @@ interface NumericInputProps extends BaseProps, NoChildrenProp {
     status?: 'error';
     /** Determines whether decimals can be entered */
     allowDecimal?: boolean;
+    /** Determines whether value is stored in the database in the range of 0 to 1 or 0 to 100 */
+    unit?: 'percent_1' | 'percent_100';
 }
 /** Wrapper over the NumberInput to parse values as Numbers, while still allowing the user to type partial values like `12.`, `12.0`, ... */
 declare const NumericInput: FunctionComponent<NumericInputProps>;

package/lib/components/ConditionBuilder/RhsControls/NumericInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumericInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/NumericInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzE,UAAU,iBAAkB,SAAQ,SAAS,EAAE,cAAc;IAC3D,4BAA4B;IAC5B,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAEhC,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAEpD,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,iDAAiD;IACjD,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,4IAA4I;AAC5I,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CA4BtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"NumericInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/NumericInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzE,UAAU,iBAAkB,SAAQ,SAAS,EAAE,cAAc;IAC3D,4BAA4B;IAC5B,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAChC,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACpD,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iDAAiD;IACjD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4FAA4F;IAC5F,IAAI,CAAC,EAAE,WAAW,GAAG,aAAa,CAAC;CACpC;AAED,4IAA4I;AAC5I,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAgDtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/ConditionBuilder/RhsControls/NumericInput.js

@@ -3,20 +3,36 @@ import { useState } from 'react';
 import { NumberInput, useAfterInitialEffect, useI18n } from '@pega/cosmos-react-core';
 /** Wrapper over the NumberInput to parse values as Numbers, while still allowing the user to type partial values like `12.`, `12.0`, ... */
 const NumericInput = (props) => {
-    const { rhs, onChange, status, allowDecimal = true } = props;
+    const { rhs, onChange, status, allowDecimal = true, unit } = props;
     const t = useI18n();
+    // Formats a value as a percentage and fixes floating point rounding errors in input box
+    const convertPercentToDisplayValue = (value) => {
+        if (unit === 'percent_1' && typeof value === 'number') {
+            return parseFloat((value * 100).toFixed(2));
+        }
+        return value;
+    };
     // Since we want to always call onChange with parsed Numbers,
     // if we parse values like `12.`, `12.0`, etc., the decimals will be lost leading to bad UX
     // Using a local state to avoid that
-    const [localValue, setLocalValue] = useState(rhs.value.toString());
+    const [localValue, setLocalValue] = useState(convertPercentToDisplayValue(rhs.value).toString());
     useAfterInitialEffect(() => {
-        setLocalValue(rhs.value.toString());
+        setLocalValue(convertPercentToDisplayValue(rhs.value).toString());
     }, [rhs.value]);
     const handleInputChange = (newValue) => {
         setLocalValue(newValue);
-        onChange({ value: newValue.trim() ? Number(newValue) : '' }); // Save as a number unless the input is empty
     };
-    return (_jsx(NumberInput, { value: localValue, onChange: handleInputChange, status: status, info: status === 'error' ? t('condition_builder_invalid_number') : undefined, label: t('condition_builder_value_label'), numberOfDecimals: allowDecimal ? undefined : 0 }));
+    const handleBlur = (newValue) => {
+        let outValue = '';
+        if (newValue) {
+            const valueAsNumber = Number(newValue);
+            if (!Number.isNaN(valueAsNumber)) {
+                outValue = unit === 'percent_1' ? valueAsNumber / 100 : valueAsNumber;
+            }
+        }
+        onChange({ value: outValue });
+    };
+    return (_jsx(NumberInput, { value: localValue, onChange: handleInputChange, onBlur: handleBlur, status: status, info: status === 'error' ? t('condition_builder_invalid_number') : undefined, label: t('condition_builder_value_label'), numberOfDecimals: allowDecimal ? undefined : 0, unit: unit === 'percent_1' || unit === 'percent_100' ? 'percent' : undefined }));
 };
 export default NumericInput;
 //# sourceMappingURL=NumericInput.js.map

package/lib/components/ConditionBuilder/RhsControls/NumericInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumericInput.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/NumericInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAiBtF,4IAA4I;AAC5I,MAAM,YAAY,GAAyC,CAAC,KAAwB,EAAE,EAAE;IACtF,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC7D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,6DAA6D;IAC7D,2FAA2F;IAC3F,oCAAoC;IACpC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IAEnE,qBAAqB,CAAC,GAAG,EAAE;QACzB,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;IAEhB,MAAM,iBAAiB,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC7C,aAAa,CAAC,QAAQ,CAAC,CAAC;QACxB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,6CAA6C;IAC7G,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,WAAW,IACV,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,iBAAiB,EAC3B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,CAAC,SAAS,EAC5E,KAAK,EAAE,CAAC,CAAC,+BAA+B,CAAC,EACzC,gBAAgB,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GAC9C,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { useState } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport { NumberInput, useAfterInitialEffect, useI18n } from '@pega/cosmos-react-core';\nimport type { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\ninterface NumericInputProps extends BaseProps, NoChildrenProp {\n  /** Rhs for the condition */\n  rhs: { value: string | number };\n\n  /** Callback for any modifications to the Rhs */\n  onChange: (rhs: { value: string | number }) => void;\n\n  /** Used to indicate any errors on the control */\n  status?: 'error';\n\n  /** Determines whether decimals can be entered */\n  allowDecimal?: boolean;\n}\n\n/** Wrapper over the NumberInput to parse values as Numbers, while still allowing the user to type partial values like `12.`, `12.0`, ... */\nconst NumericInput: FunctionComponent<NumericInputProps> = (props: NumericInputProps) => {\n  const { rhs, onChange, status, allowDecimal = true } = props;\n  const t = useI18n();\n\n  // Since we want to always call onChange with parsed Numbers,\n  // if we parse values like `12.`, `12.0`, etc., the decimals will be lost leading to bad UX\n  // Using a local state to avoid that\n  const [localValue, setLocalValue] = useState(rhs.value.toString());\n\n  useAfterInitialEffect(() => {\n    setLocalValue(rhs.value.toString());\n  }, [rhs.value]);\n\n  const handleInputChange = (newValue: string) => {\n    setLocalValue(newValue);\n    onChange({ value: newValue.trim() ? Number(newValue) : '' }); // Save as a number unless the input is empty\n  };\n\n  return (\n    <NumberInput\n      value={localValue}\n      onChange={handleInputChange}\n      status={status}\n      info={status === 'error' ? t('condition_builder_invalid_number') : undefined}\n      label={t('condition_builder_value_label')}\n      numberOfDecimals={allowDecimal ? undefined : 0}\n    />\n  );\n};\n\nexport default NumericInput;\n"]}
+{"version":3,"file":"NumericInput.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/NumericInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAgBtF,4IAA4I;AAC5I,MAAM,YAAY,GAAyC,CAAC,KAAwB,EAAE,EAAE;IACtF,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,GAAG,IAAI,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IACnE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,wFAAwF;IACxF,MAAM,4BAA4B,GAAG,CAAC,KAAsB,EAAE,EAAE;QAC9D,IAAI,IAAI,KAAK,WAAW,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YACtD,OAAO,UAAU,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9C,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAEF,6DAA6D;IAC7D,2FAA2F;IAC3F,oCAAoC;IACpC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,4BAA4B,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IAEjG,qBAAqB,CAAC,GAAG,EAAE;QACzB,aAAa,CAAC,4BAA4B,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACpE,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;IAEhB,MAAM,iBAAiB,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC7C,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,QAAgB,EAAE,EAAE;QACtC,IAAI,QAAQ,GAAoB,EAAE,CAAC;QACnC,IAAI,QAAQ,EAAE,CAAC;YACb,MAAM,aAAa,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;YACvC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE,CAAC;gBACjC,QAAQ,GAAG,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,aAAa,GAAG,GAAG,CAAC,CAAC,CAAC,aAAa,CAAC;YACxE,CAAC;QACH,CAAC;QACD,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,WAAW,IACV,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,iBAAiB,EAC3B,MAAM,EAAE,UAAU,EAClB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,CAAC,SAAS,EAC5E,KAAK,EAAE,CAAC,CAAC,+BAA+B,CAAC,EACzC,gBAAgB,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAC9C,IAAI,EAAE,IAAI,KAAK,WAAW,IAAI,IAAI,KAAK,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GAC5E,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { useState } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport { NumberInput, useAfterInitialEffect, useI18n } from '@pega/cosmos-react-core';\nimport type { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\ninterface NumericInputProps extends BaseProps, NoChildrenProp {\n  /** Rhs for the condition */\n  rhs: { value: string | number };\n  /** Callback for any modifications to the Rhs */\n  onChange: (rhs: { value: string | number }) => void;\n  /** Used to indicate any errors on the control */\n  status?: 'error';\n  /** Determines whether decimals can be entered */\n  allowDecimal?: boolean;\n  /** Determines whether value is stored in the database in the range of 0 to 1 or 0 to 100 */\n  unit?: 'percent_1' | 'percent_100';\n}\n\n/** Wrapper over the NumberInput to parse values as Numbers, while still allowing the user to type partial values like `12.`, `12.0`, ... */\nconst NumericInput: FunctionComponent<NumericInputProps> = (props: NumericInputProps) => {\n  const { rhs, onChange, status, allowDecimal = true, unit } = props;\n  const t = useI18n();\n\n  // Formats a value as a percentage and fixes floating point rounding errors in input box\n  const convertPercentToDisplayValue = (value: string | number) => {\n    if (unit === 'percent_1' && typeof value === 'number') {\n      return parseFloat((value * 100).toFixed(2));\n    }\n    return value;\n  };\n\n  // Since we want to always call onChange with parsed Numbers,\n  // if we parse values like `12.`, `12.0`, etc., the decimals will be lost leading to bad UX\n  // Using a local state to avoid that\n  const [localValue, setLocalValue] = useState(convertPercentToDisplayValue(rhs.value).toString());\n\n  useAfterInitialEffect(() => {\n    setLocalValue(convertPercentToDisplayValue(rhs.value).toString());\n  }, [rhs.value]);\n\n  const handleInputChange = (newValue: string) => {\n    setLocalValue(newValue);\n  };\n\n  const handleBlur = (newValue: string) => {\n    let outValue: string | number = '';\n    if (newValue) {\n      const valueAsNumber = Number(newValue);\n      if (!Number.isNaN(valueAsNumber)) {\n        outValue = unit === 'percent_1' ? valueAsNumber / 100 : valueAsNumber;\n      }\n    }\n    onChange({ value: outValue });\n  };\n\n  return (\n    <NumberInput\n      value={localValue}\n      onChange={handleInputChange}\n      onBlur={handleBlur}\n      status={status}\n      info={status === 'error' ? t('condition_builder_invalid_number') : undefined}\n      label={t('condition_builder_value_label')}\n      numberOfDecimals={allowDecimal ? undefined : 0}\n      unit={unit === 'percent_1' || unit === 'percent_100' ? 'percent' : undefined}\n    />\n  );\n};\n\nexport default NumericInput;\n"]}

package/lib/components/ConditionBuilder/RhsControls/NumericRangeInput.d.ts

@@ -0,0 +1,31 @@
+import type { Ref } from 'react';
+import type { BaseProps, FormControlProps, NoChildrenProp } from '@pega/cosmos-react-core';
+export interface NumericRangeInputProps extends BaseProps, NoChildrenProp {
+    /** Label for the range input. */
+    label: FormControlProps['label'];
+    /** Determines whether the label is hidden. */
+    labelHidden?: FormControlProps['labelHidden'];
+    /** Rhs for the condition. */
+    rhs?: {
+        start: string | number;
+        end: string | number;
+    };
+    /** Callback for any modifications to the Rhs. */
+    onChange: (rhs: {
+        start: number | undefined;
+        end: number | undefined;
+    }) => void;
+    /** Used to indicate any errors on the control. */
+    status?: 'error';
+    /**
+     * Determines whether decimals can be entered.
+     * @default true
+     */
+    allowDecimal?: boolean;
+    /** Determines whether value is stored in the database in the range of 0 to 1 or 0 to 100. */
+    unit?: 'percent_1' | 'percent_100';
+    /** Ref to the component. */
+    ref?: Ref<HTMLFieldSetElement>;
+}
+export declare const NumericRangeInput: import("react").ForwardRefExoticComponent<Omit<NumericRangeInputProps, "ref"> & import("react").RefAttributes<HTMLFieldSetElement>>;
+//# sourceMappingURL=NumericRangeInput.d.ts.map

package/lib/components/ConditionBuilder/RhsControls/NumericRangeInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumericRangeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/NumericRangeInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE3F,MAAM,WAAW,sBAAuB,SAAQ,SAAS,EAAE,cAAc;IACvE,iCAAiC;IACjC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACjC,8CAA8C;IAC9C,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6BAA6B;IAC7B,GAAG,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACvD,iDAAiD;IACjD,QAAQ,EAAE,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;QAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,KAAK,IAAI,CAAC;IAChF,kDAAkD;IAClD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6FAA6F;IAC7F,IAAI,CAAC,EAAE,WAAW,GAAG,aAAa,CAAC;IACnC,4BAA4B;IAC5B,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC;AAED,eAAO,MAAM,iBAAiB,qIAuE7B,CAAC"}

package/lib/components/ConditionBuilder/RhsControls/NumericRangeInput.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { NumberRangeInput, useAfterInitialEffect, useI18n } from '@pega/cosmos-react-core';
+export const NumericRangeInput = forwardRef(({ rhs, onChange, status, allowDecimal = true, unit, ...props }, ref) => {
+    const t = useI18n();
+    // Formats a value as a percentage and fixes floating point rounding errors in input box
+    const convertPercentToDisplayValue = (value) => {
+        if (unit === 'percent_1') {
+            const num = typeof value === 'number' ? value : Number(value);
+            // Number value of empty string is 0, which we don't want, so we return just value instead
+            if (!Number.isNaN(num) && value !== '') {
+                return parseFloat((num * 100).toFixed(2));
+            }
+        }
+        return value;
+    };
+    const [internalValue, setInternalValue] = useState({
+        start: convertPercentToDisplayValue(rhs?.start)?.toString(),
+        end: convertPercentToDisplayValue(rhs?.end)?.toString()
+    });
+    useAfterInitialEffect(() => {
+        setInternalValue({
+            start: convertPercentToDisplayValue(rhs?.start)?.toString(),
+            end: convertPercentToDisplayValue(rhs?.end)?.toString()
+        });
+    }, [rhs?.start, rhs?.end]);
+    const handleChange = (newValue) => {
+        setInternalValue(newValue);
+    };
+    const handleBlur = (newValue) => {
+        let outStartValue;
+        let outEndValue;
+        if (newValue.start) {
+            const valueAsNumber = Number(newValue.start);
+            if (!Number.isNaN(valueAsNumber)) {
+                outStartValue = unit === 'percent_1' ? valueAsNumber / 100 : valueAsNumber;
+            }
+        }
+        if (newValue.end) {
+            const valueAsNumber = Number(newValue.end);
+            if (!Number.isNaN(valueAsNumber)) {
+                outEndValue = unit === 'percent_1' ? valueAsNumber / 100 : valueAsNumber;
+            }
+        }
+        onChange({
+            start: outStartValue,
+            end: outEndValue
+        });
+    };
+    return (_jsx(NumberRangeInput, { ...props, ref: ref, value: internalValue, onChange: handleChange, onBlur: handleBlur, status: status, info: status === 'error' ? t('condition_builder_invalid_number_range') : undefined, numberOfDecimals: allowDecimal ? undefined : 0, unit: unit === 'percent_1' || unit === 'percent_100' ? 'percent' : undefined, fromPlaceholder: t('range_from_numeric'), toPlaceholder: t('range_to_numeric') }));
+});
+//# sourceMappingURL=NumericRangeInput.js.map