@pega/cosmos-react-condition-builder 2.2.1 → 2.2.4

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiValueSelector.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/MultiValueSelector.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EACL,OAAO,EAGP,QAAQ,EACR,mBAAmB,EACnB,qBAAqB,EAEtB,MAAM,yBAAyB,CAAC;AAgBjC,6EAA6E;AAC7E,MAAM,kBAAkB,GAAyD,CAAC,EAChF,MAAM,EACN,OAAO,EACP,QAAQ,EACR,MAAM,EACa,EAAE,EAAE;IACvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;IACrD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,IAAI,GAAG,OAAO,CAAC;QAEnB,IAAI,WAAW,EAAE;YACf,MAAM,OAAO,GAAG,mBAAmB,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;YAC7D,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;SAC9C;QAED,OAAO,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACvB,OAAO;gBACL,EAAE,EAAE,MAAM;gBACV,OAAO,EAAE,MAAM;gBACf,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC;aACtC,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvC,qBAAqB,CAAC,GAAG,EAAE;QACzB,QAAQ,CAAC,UAAU,CAAC,CAAC;IACvB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,KAAC,QAAQ,IACP,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,CAAC,CAAC,yCAAyC,CAAC,EACnD,WAAW,QACX,WAAW,EAAE,CAAC,CAAC,0CAA0C,CAAC,EAC1D,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE;YACZ,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,EACD,IAAI,EAAE;YACJ,KAAK,EAAE,aAAa;YACpB,WAAW,EAAE,MAAM,CAAC,EAAE;gBACpB,aAAa,CAAC,GAAG,CAAC,EAAE,CAClB,GAAG,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,EAAE,MAAM,CAAC,CACxF,CAAC;YACJ,CAAC;SACF,EACD,QAAQ,EACN,UAAU,CAAC,MAAM,GAAG,CAAC;YACnB,CAAC,CAAC;gBACE,KAAK,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;gBAChD,QAAQ,EAAE,KAAK,CAAC,EAAE;oBAChB,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC;gBACrE,CAAC;aACF;YACH,CAAC,CAAC,SAAS,EAEf,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,8CAA8C,CAAC,CAAC,CAAC,CAAC,SAAS,WACxF,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { FunctionComponent, useState, useMemo } from 'react';\n\nimport {\n  useI18n,\n  BaseProps,\n  ForwardProps,\n  ComboBox,\n  createStringMatcher,\n  useAfterInitialEffect,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\ninterface MultiSelectorProps extends BaseProps, NoChildrenProp {\n  /** Previous selection */\n  values: string[];\n\n  /** Options for the selector */\n  options: string[];\n\n  /** Callback for changes */\n  onChange: (selection: string[]) => void;\n\n  /** Used to indicate any errors on the control */\n  status?: 'error';\n}\n\n/** A control for selecting multiple values using checkboxes in an overlay */\nconst MultiValueSelector: FunctionComponent<MultiSelectorProps & ForwardProps> = ({\n  values,\n  options,\n  onChange,\n  status\n}: MultiSelectorProps) => {\n  const t = useI18n();\n\n  const [selections, setSelections] = useState(values);\n  const [filterValue, setFilterValue] = useState('');\n\n  const itemsToRender = useMemo(() => {\n    let opts = options;\n\n    if (filterValue) {\n      const matcher = createStringMatcher(filterValue, 'boundary');\n      opts = opts.filter(opt => matcher.test(opt));\n    }\n\n    return opts.map(option => {\n      return {\n        id: option,\n        primary: option,\n        selected: selections.includes(option)\n      };\n    });\n  }, [options, filterValue, selections]);\n\n  useAfterInitialEffect(() => {\n    onChange(selections);\n  }, [selections]);\n\n  return (\n    <ComboBox\n      mode='multi-select'\n      label={t('condition_builder_possible_values_label')}\n      labelHidden\n      placeholder={t('condition_builder_selection_text_default')}\n      value={filterValue}\n      onChange={e => {\n        setFilterValue(e.target.value);\n      }}\n      menu={{\n        items: itemsToRender,\n        onItemClick: option => {\n          setSelections(cur =>\n            cur.includes(option) ? cur.filter(selection => selection !== option) : [...cur, option]\n          );\n        }\n      }}\n      selected={\n        selections.length > 0\n          ? {\n              items: selections.map(s => ({ id: s, text: s })),\n              onRemove: value => {\n                setSelections(cur => cur.filter(selection => selection !== value));\n              }\n            }\n          : undefined\n      }\n      status={status}\n      info={status === 'error' ? t('condition_builder_empty_selection_error_text') : undefined}\n    />\n  );\n};\n\nexport default MultiValueSelector;\n"]}

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

@@ -0,0 +1,18 @@
+import { FunctionComponent } from 'react';
+import { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
+interface NumericInputProps extends BaseProps, NoChildrenProp {
+    /** Rhs for the condition */
+    rhs: {
+        value: string | number;
+    };
+    /** Callback for any modifications to the Rhs */
+    onChange: (rhs: {
+        value: string | number;
+    }) => void;
+    /** Used to indicate any errors on the control */
+    status?: 'error';
+}
+/** 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>;
+export default NumericInput;
+//# sourceMappingURL=NumericInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumericInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/NumericInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAwB,MAAM,yBAAyB,CAAC;AAE1F,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;CAClB;AAED,4IAA4I;AAC5I,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAwBtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { NumberInput, 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 } = props;
+    const t = useI18n();
+    // 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 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_compare_with_numeric_value'), labelHidden: true }, void 0));
+};
+export default NumericInput;
+//# sourceMappingURL=NumericInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumericInput.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/NumericInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAA6B,WAAW,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAa1F,4IAA4I;AAC5I,MAAM,YAAY,GAAyC,CAAC,KAAwB,EAAE,EAAE;IACtF,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACxC,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,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,8CAA8C,CAAC,EACxD,WAAW,iBACX,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FunctionComponent, useState } from 'react';\n\nimport { BaseProps, NoChildrenProp, NumberInput, useI18n } 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\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 } = 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  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_compare_with_numeric_value')}\n      labelHidden\n    />\n  );\n};\n\nexport default NumericInput;\n"]}

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

@@ -0,0 +1,18 @@
+import { FunctionComponent } from 'react';
+import { BaseProps, ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { RhsWithRelativeDate } from '../ConditionBuilder.types';
+import { FieldType } from '../core/types';
+export interface RelativeDateMenuProps extends BaseProps, NoChildrenProp {
+    /** Rhs for the condition */
+    rhs: RhsWithRelativeDate;
+    /** Callback for any modifications to the Rhs */
+    onChange: (rhs: RhsWithRelativeDate) => void;
+    /** FieldType of the LHS Field. Will only be DATE_TIME or DATE_ONLY */
+    fieldType: FieldType;
+    /** Used to indicate any errors on the control */
+    status?: 'error';
+}
+/** A menu with controls to select a Time period value on RHS */
+declare const RelativeDateMenu: FunctionComponent<RelativeDateMenuProps & ForwardProps>;
+export default RelativeDateMenu;
+//# sourceMappingURL=RelativeDateMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeDateMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/RelativeDateMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAEhE,OAAO,EACL,SAAS,EACT,YAAY,EAOZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAsC,SAAS,EAAE,MAAM,eAAe,CAAC;AAE9E,MAAM,WAAW,qBAAsB,SAAQ,SAAS,EAAE,cAAc;IACtE,4BAA4B;IAC5B,GAAG,EAAE,mBAAmB,CAAC;IAEzB,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAE7C,sEAAsE;IACtE,SAAS,EAAE,SAAS,CAAC;IAErB,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,gEAAgE;AAChE,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAqJ7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// cspell:ignore words DDTHH
+import { useMemo } from 'react';
+import { Flex, Select, Option, NumberInput, useI18n } from '@pega/cosmos-react-core';
+/** A menu with controls to select a Time period value on RHS */
+const RelativeDateMenu = (props) => {
+    const { rhs, onChange, status, fieldType } = props;
+    const t = useI18n();
+    const { relativeDate } = rhs;
+    // Options for the Date Part selector
+    const datePartOptions = useMemo(() => {
+        const allOptions = ['YEARS', 'QUARTERS', 'MONTHS', 'WEEKS', 'DAYS', 'HOURS'];
+        const datePartLabels = {
+            YEARS: t('condition_builder_relative_dates_year'),
+            QUARTERS: t('condition_builder_relative_dates_quarter'),
+            MONTHS: t('condition_builder_relative_dates_month'),
+            WEEKS: t('condition_builder_relative_dates_week'),
+            DAYS: t('condition_builder_relative_dates_day'),
+            HOURS: t('condition_builder_relative_dates_hour'),
+            MINUTES: t('condition_builder_relative_dates_minute')
+        };
+        if (fieldType === 'DATE_TIME') {
+            // TODO: Remove temporary hide MINUTES option
+            return allOptions.map(datePart => ({
+                id: datePart,
+                label: datePartLabels[datePart]
+            }));
+        }
+        // Removes MINUTES and HOURS for DATE_ONLY fields
+        return allOptions.splice(0, allOptions.length - 1).map(datePart => ({
+            id: datePart,
+            label: datePartLabels[datePart]
+        }));
+    }, [t, fieldType]);
+    // Options for the Date-function selector
+    const timePeriodOptions = useMemo(() => {
+        const allOptions = ['CURRENT', 'LAST', 'PREVIOUS', 'NEXT'];
+        const timePeriodLabels = {
+            CURRENT: t('condition_builder_time_period_current'),
+            LAST: t('condition_builder_time_period_last'),
+            PREVIOUS: t('condition_builder_time_period_previous'),
+            NEXT: t('condition_builder_time_period_next')
+        };
+        return allOptions.map(timePeriod => ({
+            id: timePeriod,
+            label: timePeriodLabels[timePeriod]
+        }));
+    }, [t]);
+    const handleTimePeriodChange = (e) => {
+        const selection = e.target.value;
+        if (selection === 'CURRENT') {
+            onChange({
+                relativeDate: {
+                    timePeriod: selection,
+                    datePart: relativeDate.datePart
+                }
+            });
+        }
+        else {
+            onChange({
+                relativeDate: {
+                    ...relativeDate,
+                    timePeriod: selection,
+                    interval: relativeDate.interval ?? undefined
+                }
+            });
+        }
+    };
+    // Handle changes to the Date-function selector
+    const handleDatePartChange = (e) => {
+        const selection = e.target.value;
+        onChange({
+            relativeDate: {
+                ...relativeDate,
+                datePart: selection
+            }
+        });
+    };
+    // Common props for all value controls
+    const valueComponentProps = {
+        value: relativeDate.interval?.toString(),
+        label: t('condition_builder_value_label'),
+        status,
+        info: status ? t('condition_builder_invalid_value') : undefined
+    };
+    const handleIntervalChange = (value) => {
+        let newValue;
+        if (value !== '' && !Number.isNaN(Number(value))) {
+            newValue = Number(value);
+            onChange({
+                relativeDate: {
+                    ...relativeDate,
+                    interval: newValue
+                }
+            });
+        }
+        else {
+            onChange({
+                relativeDate: {
+                    ...relativeDate,
+                    interval: undefined
+                }
+            });
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Select, { label: t('condition_builder_time_period_label'), value: rhs.relativeDate.timePeriod, onChange: handleTimePeriodChange, children: timePeriodOptions.map(o => (_jsx(Option, { value: o.id, children: o.label }, o.id))) }, void 0), _jsxs(Flex, { container: { direction: 'row', colGap: 1 }, children: [relativeDate.timePeriod !== 'CURRENT' && (_jsx(Flex, { item: { basis: '30%' }, children: _jsx(NumberInput, { ...valueComponentProps, min: 1, step: 1, showDecimal: false, onChange: handleIntervalChange }, void 0) }, void 0)), _jsx(Flex, { item: { basis: relativeDate.timePeriod !== 'CURRENT' ? '70%' : '100%' }, children: _jsx(Select, { label: t('condition_builder_date_part'), value: relativeDate.datePart, onChange: handleDatePartChange, children: datePartOptions.map(o => (_jsx(Option, { value: o.id, children: o.label }, o.id))) }, void 0) }, void 0)] }, void 0)] }, void 0));
+};
+export default RelativeDateMenu;
+//# sourceMappingURL=RelativeDateMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeDateMenu.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/RelativeDateMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["// cspell:ignore words DDTHH\nimport { ChangeEvent, FunctionComponent, useMemo } from 'react';\n\nimport {\n  BaseProps,\n  ForwardProps,\n  Flex,\n  Select,\n  Option,\n  NumberInput,\n  FormControlProps,\n  useI18n,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport { RhsWithRelativeDate } from '../ConditionBuilder.types';\nimport { DateFunction, DatePart, TimePeriod, FieldType } from '../core/types';\n\nexport interface RelativeDateMenuProps extends BaseProps, NoChildrenProp {\n  /** Rhs for the condition */\n  rhs: RhsWithRelativeDate;\n\n  /** Callback for any modifications to the Rhs */\n  onChange: (rhs: RhsWithRelativeDate) => void;\n\n  /** FieldType of the LHS Field. Will only be DATE_TIME or DATE_ONLY */\n  fieldType: FieldType;\n\n  /** Used to indicate any errors on the control */\n  status?: 'error';\n}\n\n/** A menu with controls to select a Time period value on RHS */\nconst RelativeDateMenu: FunctionComponent<RelativeDateMenuProps & ForwardProps> = (\n  props: RelativeDateMenuProps\n) => {\n  const { rhs, onChange, status, fieldType } = props;\n  const t = useI18n();\n\n  const { relativeDate } = rhs;\n\n  // Options for the Date Part selector\n  const datePartOptions = useMemo(() => {\n    const allOptions = ['YEARS', 'QUARTERS', 'MONTHS', 'WEEKS', 'DAYS', 'HOURS'];\n    const datePartLabels: Record<DatePart, string> = {\n      YEARS: t('condition_builder_relative_dates_year'),\n      QUARTERS: t('condition_builder_relative_dates_quarter'),\n      MONTHS: t('condition_builder_relative_dates_month'),\n      WEEKS: t('condition_builder_relative_dates_week'),\n      DAYS: t('condition_builder_relative_dates_day'),\n      HOURS: t('condition_builder_relative_dates_hour'),\n      MINUTES: t('condition_builder_relative_dates_minute')\n    };\n    if (fieldType === 'DATE_TIME') {\n      // TODO: Remove temporary hide MINUTES option\n      return allOptions.map(datePart => ({\n        id: datePart,\n        label: datePartLabels[datePart as DatePart]\n      }));\n    }\n    // Removes MINUTES and HOURS for DATE_ONLY fields\n    return allOptions.splice(0, allOptions.length - 1).map(datePart => ({\n      id: datePart,\n      label: datePartLabels[datePart as DatePart]\n    }));\n  }, [t, fieldType]);\n\n  // Options for the Date-function selector\n  const timePeriodOptions = useMemo(() => {\n    const allOptions = ['CURRENT', 'LAST', 'PREVIOUS', 'NEXT'];\n    const timePeriodLabels: Record<TimePeriod, string> = {\n      CURRENT: t('condition_builder_time_period_current'),\n      LAST: t('condition_builder_time_period_last'),\n      PREVIOUS: t('condition_builder_time_period_previous'),\n      NEXT: t('condition_builder_time_period_next')\n    };\n    return allOptions.map(timePeriod => ({\n      id: timePeriod,\n      label: timePeriodLabels[timePeriod as TimePeriod]\n    }));\n  }, [t]);\n\n  const handleTimePeriodChange = (e: ChangeEvent<HTMLSelectElement>) => {\n    const selection = e.target.value;\n    if (selection === 'CURRENT') {\n      onChange({\n        relativeDate: {\n          timePeriod: selection as TimePeriod,\n          datePart: relativeDate.datePart\n        }\n      });\n    } else {\n      onChange({\n        relativeDate: {\n          ...relativeDate,\n          timePeriod: selection as TimePeriod,\n          interval: relativeDate.interval ?? undefined\n        }\n      });\n    }\n  };\n\n  // Handle changes to the Date-function selector\n  const handleDatePartChange = (e: ChangeEvent<HTMLSelectElement>) => {\n    const selection = e.target.value as DateFunction;\n    onChange({\n      relativeDate: {\n        ...relativeDate,\n        datePart: selection as DatePart\n      }\n    });\n  };\n\n  // Common props for all value controls\n  const valueComponentProps: FormControlProps = {\n    value: relativeDate.interval?.toString(),\n    label: t('condition_builder_value_label'),\n    status,\n    info: status ? t('condition_builder_invalid_value') : undefined\n  };\n\n  const handleIntervalChange = (value: string) => {\n    let newValue: number;\n    if (value !== '' && !Number.isNaN(Number(value))) {\n      newValue = Number(value);\n      onChange({\n        relativeDate: {\n          ...relativeDate,\n          interval: newValue\n        }\n      });\n    } else {\n      onChange({\n        relativeDate: {\n          ...relativeDate,\n          interval: undefined\n        }\n      });\n    }\n  };\n\n  return (\n    <>\n      <Select\n        label={t('condition_builder_time_period_label')}\n        value={rhs.relativeDate.timePeriod}\n        onChange={handleTimePeriodChange}\n      >\n        {timePeriodOptions.map(o => (\n          <Option key={o.id} value={o.id}>\n            {o.label}\n          </Option>\n        ))}\n      </Select>\n      <Flex container={{ direction: 'row', colGap: 1 }}>\n        {relativeDate.timePeriod !== 'CURRENT' && (\n          <Flex item={{ basis: '30%' }}>\n            <NumberInput\n              {...valueComponentProps}\n              min={1}\n              step={1}\n              showDecimal={false}\n              onChange={handleIntervalChange}\n            />\n          </Flex>\n        )}\n        <Flex item={{ basis: relativeDate.timePeriod !== 'CURRENT' ? '70%' : '100%' }}>\n          <Select\n            label={t('condition_builder_date_part')}\n            value={relativeDate.datePart}\n            onChange={handleDatePartChange}\n          >\n            {datePartOptions.map(o => (\n              <Option key={o.id} value={o.id}>\n                {o.label}\n              </Option>\n            ))}\n          </Select>\n        </Flex>\n      </Flex>\n    </>\n  );\n};\n\nexport default RelativeDateMenu;\n"]}

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

@@ -0,0 +1,24 @@
+import { FunctionComponent } from 'react';
+import { BaseProps, ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { Comparator, FieldType, RHSType } from '../core/types';
+import { DateFunctionsByType, LeafCondition } from '../ConditionBuilder.types';
+interface RhsMenuButtonProps extends BaseProps, NoChildrenProp {
+    /** Type of field on the LHS */
+    fieldType: FieldType;
+    /** Comparator for the condition */
+    comparator: Comparator;
+    /** Rhs for the condition */
+    rhs: LeafCondition['rhs'];
+    /** Callback for any modifications to the Rhs */
+    onChange: (rhs: LeafCondition['rhs']) => void;
+    /** Display mode */
+    mode: 'combo-box' | 'menu-button';
+    /** Restricts RHS values to only specified RHS types */
+    validRhsTypes: Set<RHSType>;
+    /** Passed to enable additional date controls on the RHS, when a DATE_TIME/DATE_ONLY field is selected on the LHS */
+    dateFunctions?: DateFunctionsByType;
+}
+/** Renders a Gear MenuButton on the RHS (when applicable) */
+declare const RhsModeSwitch: FunctionComponent<RhsMenuButtonProps & ForwardProps>;
+export default RhsModeSwitch;
+//# sourceMappingURL=RhsModeSwitch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RhsModeSwitch.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/RhsModeSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAEnD,OAAO,EACL,SAAS,EAET,YAAY,EAKZ,cAAc,EAGf,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AA6B/E,UAAU,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IAC5D,+BAA+B;IAC/B,SAAS,EAAE,SAAS,CAAC;IAErB,mCAAmC;IACnC,UAAU,EAAE,UAAU,CAAC;IAEvB,4BAA4B;IAC5B,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAE1B,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAE9C,mBAAmB;IACnB,IAAI,EAAE,WAAW,GAAG,aAAa,CAAC;IAElC,uDAAuD;IACvD,aAAa,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IAE5B,oHAAoH;IACpH,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACrC;AAED,6DAA6D;AAC7D,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAqHvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,122 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { ComboBox, hasProp, MenuButton, menuHelpers, useI18n } from '@pega/cosmos-react-core';
+var ItemID;
+(function (ItemID) {
+    ItemID["LITERAL_VALUE"] = "LITERAL_VALUE";
+    ItemID["DATE_PART"] = "DATE_PART";
+    ItemID["RELATIVE_DATE"] = "RELATIVE_DATE";
+    ItemID["ANOTHER_FIELD"] = "ANOTHER_FIELD";
+})(ItemID || (ItemID = {}));
+// Label for the `Enter <value>` option on the gear-menu
+function getValueOptionLabel(fieldType, t) {
+    switch (fieldType) {
+        case 'TEXT':
+            return t('condition_builder_compare_with_text_value');
+        case 'NUMBER':
+            return t('condition_builder_compare_with_numeric_value');
+        case 'DATE_TIME':
+        case 'DATE_ONLY':
+            return t('condition_builder_compare_with_date_value');
+        case 'TIME_ONLY':
+            return t('condition_builder_compare_with_time_value');
+        default:
+            return t('condition_builder_value_label'); // Not needed (BOOLEAN is not expected to be passed to the function)
+    }
+}
+/** Renders a Gear MenuButton on the RHS (when applicable) */
+const RhsModeSwitch = (props) => {
+    const { fieldType, comparator, rhs, onChange, mode, validRhsTypes, dateFunctions } = props;
+    const t = useI18n();
+    // Identify current mode
+    const currentMode = useMemo(() => {
+        // rhs should already be defined if this component is being rendered. Indicating the same to TS using `!`
+        if (hasProp(rhs, 'field'))
+            return ItemID.ANOTHER_FIELD;
+        if (hasProp(rhs, 'value') && hasProp(rhs, 'dateFunction'))
+            return ItemID.DATE_PART;
+        if (hasProp(rhs, 'relativeDate'))
+            return ItemID.RELATIVE_DATE;
+        return ItemID.LITERAL_VALUE;
+    }, [rhs]);
+    // Determine actions for the menu
+    const menu = useMemo(() => {
+        const items = [];
+        // Boolean conditions either don't use an rhs or always use the field-selector
+        // For IN/NOT_IN comparators, only one mode is possible for a given case - CSV Input or a Value-selector
+        if (fieldType !== 'BOOLEAN' && !['IN', 'NOT_IN'].includes(comparator)) {
+            // Literal value input
+            if (validRhsTypes.has('LITERAL')) {
+                // Literal Value inputs
+                items.push({
+                    id: ItemID.LITERAL_VALUE,
+                    primary: getValueOptionLabel(fieldType, t),
+                    onClick: id => {
+                        if (id === currentMode)
+                            return; // Ignore if already in that mode
+                        onChange({ value: '' }); // Submit a new RHS to re-render with the new mode
+                    }
+                });
+            }
+            // Field selector
+            if (validRhsTypes.has('FIELD')) {
+                items.push({
+                    id: ItemID.ANOTHER_FIELD,
+                    primary: t('condition_builder_compare_with_another_field'),
+                    onClick: id => {
+                        if (id === currentMode)
+                            return; // Ignore if already in that mode
+                        onChange({ field: '' }); // Submit a new RHS to re-render with the new mode
+                    }
+                });
+            }
+            // Relative Date value input
+            if (validRhsTypes.has('RELATIVE_DATE') &&
+                (fieldType === 'DATE_TIME' || fieldType === 'DATE_ONLY')) {
+                items.push({
+                    id: ItemID.RELATIVE_DATE,
+                    primary: t('condition_builder_compare_with_relative_date'),
+                    onClick: id => {
+                        if (id === currentMode)
+                            return; // Ignore if already in that mode
+                        onChange({
+                            relativeDate: {
+                                timePeriod: 'CURRENT',
+                                datePart: 'DAYS'
+                            }
+                        });
+                    }
+                });
+            }
+            // Date Part value input
+            if (validRhsTypes.has('DATE_FUNCTION') &&
+                dateFunctions &&
+                (fieldType === 'DATE_TIME' || fieldType === 'DATE_ONLY')) {
+                items.push({
+                    id: ItemID.DATE_PART,
+                    primary: t('condition_builder_date_part'),
+                    onClick: id => {
+                        if (id === currentMode)
+                            return; // Ignore if already in that mode
+                        onChange({ value: '', dateFunction: dateFunctions[fieldType][0] }); // Submit a new RHS to re-render with the new mode. Initializing with the first available date function
+                    }
+                });
+            }
+        }
+        return { items, mode: 'action' };
+    }, [fieldType, comparator, onChange, validRhsTypes, dateFunctions, currentMode, t]);
+    // Identify current selection for ComboBox
+    const selected = useMemo(() => {
+        const selectedItem = menuHelpers.getItem(menu.items, currentMode);
+        return selectedItem ? { id: selectedItem.id, text: selectedItem.primary } : undefined;
+    }, [menu, currentMode]);
+    // Render the button only when there are multiple options in the menu
+    if (menu.items.length < 2)
+        return null;
+    if (mode === 'combo-box') {
+        return (_jsx(ComboBox, { label: t('condition_builder_compare_with'), labelHidden: true, mode: 'single-select', selected: { items: selected }, menu: menu }, void 0));
+    }
+    return (_jsx(MenuButton, { text: t('condition_builder_compare_with'), icon: 'gear', iconOnly: true, variant: 'simple', menu: menu }, void 0));
+};
+export default RhsModeSwitch;
+//# sourceMappingURL=RhsModeSwitch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RhsModeSwitch.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/RhsModeSwitch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,OAAO,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAEL,QAAQ,EAER,OAAO,EACP,UAAU,EACV,WAAW,EAIX,OAAO,EACR,MAAM,yBAAyB,CAAC;AAOjC,IAAK,MAKJ;AALD,WAAK,MAAM;IACT,yCAA+B,CAAA;IAC/B,iCAAuB,CAAA;IACvB,yCAA+B,CAAA;IAC/B,yCAA+B,CAAA;AACjC,CAAC,EALI,MAAM,KAAN,MAAM,QAKV;AAED,wDAAwD;AACxD,SAAS,mBAAmB,CAC1B,SAAoB,EACpB,CAAuC;IAEvC,QAAQ,SAAS,EAAE;QACjB,KAAK,MAAM;YACT,OAAO,CAAC,CAAC,2CAA2C,CAAC,CAAC;QACxD,KAAK,QAAQ;YACX,OAAO,CAAC,CAAC,8CAA8C,CAAC,CAAC;QAC3D,KAAK,WAAW,CAAC;QACjB,KAAK,WAAW;YACd,OAAO,CAAC,CAAC,2CAA2C,CAAC,CAAC;QACxD,KAAK,WAAW;YACd,OAAO,CAAC,CAAC,2CAA2C,CAAC,CAAC;QACxD;YACE,OAAO,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,oEAAoE;KAClH;AACH,CAAC;AAyBD,6DAA6D;AAC7D,MAAM,aAAa,GAAyD,CAC1E,KAAyB,EACzB,EAAE;IACF,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IAC3F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,wBAAwB;IACxB,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,yGAAyG;QACzG,IAAI,OAAO,CAAC,GAAI,EAAE,OAAO,CAAC;YAAE,OAAO,MAAM,CAAC,aAAa,CAAC;QACxD,IAAI,OAAO,CAAC,GAAI,EAAE,OAAO,CAAC,IAAI,OAAO,CAAC,GAAI,EAAE,cAAc,CAAC;YAAE,OAAO,MAAM,CAAC,SAAS,CAAC;QACrF,IAAI,OAAO,CAAC,GAAI,EAAE,cAAc,CAAC;YAAE,OAAO,MAAM,CAAC,aAAa,CAAC;QAC/D,OAAO,MAAM,CAAC,aAAa,CAAC;IAC9B,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,iCAAiC;IACjC,MAAM,IAAI,GAAG,OAAO,CAAY,GAAG,EAAE;QACnC,MAAM,KAAK,GAAuB,EAAE,CAAC;QAErC,8EAA8E;QAC9E,wGAAwG;QACxG,IAAI,SAAS,KAAK,SAAS,IAAI,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;YACrE,sBAAsB;YACtB,IAAI,aAAa,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;gBAChC,uBAAuB;gBACvB,KAAK,CAAC,IAAI,CAAC;oBACT,EAAE,EAAE,MAAM,CAAC,aAAa;oBACxB,OAAO,EAAE,mBAAmB,CAAC,SAAS,EAAE,CAAC,CAAC;oBAC1C,OAAO,EAAE,EAAE,CAAC,EAAE;wBACZ,IAAI,EAAE,KAAK,WAAW;4BAAE,OAAO,CAAC,iCAAiC;wBACjE,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,kDAAkD;oBAC7E,CAAC;iBACF,CAAC,CAAC;aACJ;YAED,iBAAiB;YACjB,IAAI,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;gBAC9B,KAAK,CAAC,IAAI,CAAC;oBACT,EAAE,EAAE,MAAM,CAAC,aAAa;oBACxB,OAAO,EAAE,CAAC,CAAC,8CAA8C,CAAC;oBAC1D,OAAO,EAAE,EAAE,CAAC,EAAE;wBACZ,IAAI,EAAE,KAAK,WAAW;4BAAE,OAAO,CAAC,iCAAiC;wBACjE,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,kDAAkD;oBAC7E,CAAC;iBACF,CAAC,CAAC;aACJ;YAED,4BAA4B;YAC5B,IACE,aAAa,CAAC,GAAG,CAAC,eAAe,CAAC;gBAClC,CAAC,SAAS,KAAK,WAAW,IAAI,SAAS,KAAK,WAAW,CAAC,EACxD;gBACA,KAAK,CAAC,IAAI,CAAC;oBACT,EAAE,EAAE,MAAM,CAAC,aAAa;oBACxB,OAAO,EAAE,CAAC,CAAC,8CAA8C,CAAC;oBAC1D,OAAO,EAAE,EAAE,CAAC,EAAE;wBACZ,IAAI,EAAE,KAAK,WAAW;4BAAE,OAAO,CAAC,iCAAiC;wBACjE,QAAQ,CAAC;4BACP,YAAY,EAAE;gCACZ,UAAU,EAAE,SAAS;gCACrB,QAAQ,EAAE,MAAM;6BACjB;yBACF,CAAC,CAAC;oBACL,CAAC;iBACF,CAAC,CAAC;aACJ;YAED,wBAAwB;YACxB,IACE,aAAa,CAAC,GAAG,CAAC,eAAe,CAAC;gBAClC,aAAa;gBACb,CAAC,SAAS,KAAK,WAAW,IAAI,SAAS,KAAK,WAAW,CAAC,EACxD;gBACA,KAAK,CAAC,IAAI,CAAC;oBACT,EAAE,EAAE,MAAM,CAAC,SAAS;oBACpB,OAAO,EAAE,CAAC,CAAC,6BAA6B,CAAC;oBACzC,OAAO,EAAE,EAAE,CAAC,EAAE;wBACZ,IAAI,EAAE,KAAK,WAAW;4BAAE,OAAO,CAAC,iCAAiC;wBACjE,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,YAAY,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,uGAAuG;oBAC7K,CAAC;iBACF,CAAC,CAAC;aACJ;SACF;QAED,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;IACnC,CAAC,EAAE,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;IAEpF,0CAA0C;IAC1C,MAAM,QAAQ,GAAG,OAAO,CAAuB,GAAG,EAAE;QAClD,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;QAClE,OAAO,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,YAAY,CAAC,EAAE,EAAE,IAAI,EAAE,YAAY,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IACxF,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IAExB,qEAAqE;IACrE,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,IAAI,CAAC;IAEvC,IAAI,IAAI,KAAK,WAAW,EAAE;QACxB,OAAO,CACL,KAAC,QAAQ,IACP,KAAK,EAAE,CAAC,CAAC,gCAAgC,CAAC,EAC1C,WAAW,QACX,IAAI,EAAC,eAAe,EACpB,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAC7B,IAAI,EAAE,IAAI,WACV,CACH,CAAC;KACH;IAED,OAAO,CACL,KAAC,UAAU,IACT,IAAI,EAAE,CAAC,CAAC,gCAAgC,CAAC,EACzC,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,IAAI,WACV,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, useMemo } from 'react';\n\nimport {\n  BaseProps,\n  ComboBox,\n  ForwardProps,\n  hasProp,\n  MenuButton,\n  menuHelpers,\n  MenuProps,\n  NoChildrenProp,\n  TranslationPack,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { TranslationFunction } from '@pega/cosmos-react-core/lib/i18n/translate';\nimport { Selected } from '@pega/cosmos-react-core/lib/components/ComboBox/ComboBox.types';\n\nimport { Comparator, FieldType, RHSType } from '../core/types';\nimport { DateFunctionsByType, LeafCondition } from '../ConditionBuilder.types';\n\nenum ItemID {\n  LITERAL_VALUE = 'LITERAL_VALUE',\n  DATE_PART = 'DATE_PART',\n  RELATIVE_DATE = 'RELATIVE_DATE',\n  ANOTHER_FIELD = 'ANOTHER_FIELD'\n}\n\n// Label for the `Enter <value>` option on the gear-menu\nfunction getValueOptionLabel(\n  fieldType: FieldType,\n  t: TranslationFunction<TranslationPack>\n): string {\n  switch (fieldType) {\n    case 'TEXT':\n      return t('condition_builder_compare_with_text_value');\n    case 'NUMBER':\n      return t('condition_builder_compare_with_numeric_value');\n    case 'DATE_TIME':\n    case 'DATE_ONLY':\n      return t('condition_builder_compare_with_date_value');\n    case 'TIME_ONLY':\n      return t('condition_builder_compare_with_time_value');\n    default:\n      return t('condition_builder_value_label'); // Not needed (BOOLEAN is not expected to be passed to the function)\n  }\n}\n\ninterface RhsMenuButtonProps extends BaseProps, NoChildrenProp {\n  /** Type of field on the LHS */\n  fieldType: FieldType;\n\n  /** Comparator for the condition */\n  comparator: Comparator;\n\n  /** Rhs for the condition */\n  rhs: LeafCondition['rhs'];\n\n  /** Callback for any modifications to the Rhs */\n  onChange: (rhs: LeafCondition['rhs']) => void;\n\n  /** Display mode */\n  mode: 'combo-box' | 'menu-button';\n\n  /** Restricts RHS values to only specified RHS types */\n  validRhsTypes: Set<RHSType>;\n\n  /** Passed to enable additional date controls on the RHS, when a DATE_TIME/DATE_ONLY field is selected on the LHS */\n  dateFunctions?: DateFunctionsByType;\n}\n\n/** Renders a Gear MenuButton on the RHS (when applicable) */\nconst RhsModeSwitch: FunctionComponent<RhsMenuButtonProps & ForwardProps> = (\n  props: RhsMenuButtonProps\n) => {\n  const { fieldType, comparator, rhs, onChange, mode, validRhsTypes, dateFunctions } = props;\n  const t = useI18n();\n\n  // Identify current mode\n  const currentMode = useMemo(() => {\n    // rhs should already be defined if this component is being rendered. Indicating the same to TS using `!`\n    if (hasProp(rhs!, 'field')) return ItemID.ANOTHER_FIELD;\n    if (hasProp(rhs!, 'value') && hasProp(rhs!, 'dateFunction')) return ItemID.DATE_PART;\n    if (hasProp(rhs!, 'relativeDate')) return ItemID.RELATIVE_DATE;\n    return ItemID.LITERAL_VALUE;\n  }, [rhs]);\n\n  // Determine actions for the menu\n  const menu = useMemo<MenuProps>(() => {\n    const items: MenuProps['items'] = [];\n\n    // Boolean conditions either don't use an rhs or always use the field-selector\n    // For IN/NOT_IN comparators, only one mode is possible for a given case - CSV Input or a Value-selector\n    if (fieldType !== 'BOOLEAN' && !['IN', 'NOT_IN'].includes(comparator)) {\n      // Literal value input\n      if (validRhsTypes.has('LITERAL')) {\n        // Literal Value inputs\n        items.push({\n          id: ItemID.LITERAL_VALUE,\n          primary: getValueOptionLabel(fieldType, t),\n          onClick: id => {\n            if (id === currentMode) return; // Ignore if already in that mode\n            onChange({ value: '' }); // Submit a new RHS to re-render with the new mode\n          }\n        });\n      }\n\n      // Field selector\n      if (validRhsTypes.has('FIELD')) {\n        items.push({\n          id: ItemID.ANOTHER_FIELD,\n          primary: t('condition_builder_compare_with_another_field'),\n          onClick: id => {\n            if (id === currentMode) return; // Ignore if already in that mode\n            onChange({ field: '' }); // Submit a new RHS to re-render with the new mode\n          }\n        });\n      }\n\n      // Relative Date value input\n      if (\n        validRhsTypes.has('RELATIVE_DATE') &&\n        (fieldType === 'DATE_TIME' || fieldType === 'DATE_ONLY')\n      ) {\n        items.push({\n          id: ItemID.RELATIVE_DATE,\n          primary: t('condition_builder_compare_with_relative_date'),\n          onClick: id => {\n            if (id === currentMode) return; // Ignore if already in that mode\n            onChange({\n              relativeDate: {\n                timePeriod: 'CURRENT',\n                datePart: 'DAYS'\n              }\n            });\n          }\n        });\n      }\n\n      // Date Part value input\n      if (\n        validRhsTypes.has('DATE_FUNCTION') &&\n        dateFunctions &&\n        (fieldType === 'DATE_TIME' || fieldType === 'DATE_ONLY')\n      ) {\n        items.push({\n          id: ItemID.DATE_PART,\n          primary: t('condition_builder_date_part'),\n          onClick: id => {\n            if (id === currentMode) return; // Ignore if already in that mode\n            onChange({ value: '', dateFunction: dateFunctions[fieldType][0] }); // Submit a new RHS to re-render with the new mode. Initializing with the first available date function\n          }\n        });\n      }\n    }\n\n    return { items, mode: 'action' };\n  }, [fieldType, comparator, onChange, validRhsTypes, dateFunctions, currentMode, t]);\n\n  // Identify current selection for ComboBox\n  const selected = useMemo<Selected | undefined>(() => {\n    const selectedItem = menuHelpers.getItem(menu.items, currentMode);\n    return selectedItem ? { id: selectedItem.id, text: selectedItem.primary } : undefined;\n  }, [menu, currentMode]);\n\n  // Render the button only when there are multiple options in the menu\n  if (menu.items.length < 2) return null;\n\n  if (mode === 'combo-box') {\n    return (\n      <ComboBox\n        label={t('condition_builder_compare_with')}\n        labelHidden\n        mode='single-select'\n        selected={{ items: selected }}\n        menu={menu}\n      />\n    );\n  }\n\n  return (\n    <MenuButton\n      text={t('condition_builder_compare_with')}\n      icon='gear'\n      iconOnly\n      variant='simple'\n      menu={menu}\n    />\n  );\n};\n\nexport default RhsModeSwitch;\n"]}

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

@@ -0,0 +1,8 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { TimePeriodMenuProps } from './TimePeriodMenu';
+export declare const StyledOpenerButton: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+/** Renders a button that opens up TimePeriodMenu in a Popover */
+declare const TimePeriodInput: FunctionComponent<TimePeriodMenuProps & ForwardProps>;
+export default TimePeriodInput;
+//# sourceMappingURL=TimePeriodInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimePeriodInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/TimePeriodInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAG5D,OAAO,EAEL,YAAY,EAWb,MAAM,yBAAyB,CAAC;AAUjC,OAAuB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAGvE,eAAO,MAAM,kBAAkB,mLAa7B,CAAC;AAwEH,iEAAiE;AACjE,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAkE1E,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { Flex, Icon, Popover, Text, useElement, useOuterEvent, useConfiguration, useI18n, hasProp, Button, defaultThemeProp } from '@pega/cosmos-react-core';
+import { StyledFormFieldInfo } from '@pega/cosmos-react-core/lib/components/FormField/FormField';
+import DateTimeDisplay from '@pega/cosmos-react-core/lib/components/DateTime/DateTimeDisplay';
+import { formatRelativeDate } from '../core/formatter';
+import TimePeriodMenu from './TimePeriodMenu';
+// Custom styles for the button to match the designs
+export const StyledOpenerButton = styled(Button)(props => {
+    const { 'border-radius': baseBorderRadius } = props.theme.base;
+    const { 'form-control': formControl } = props.theme.components;
+    const { 'status-color': errorColor } = props.theme.components['form-field'].error;
+    return css `
+    width: 100%;
+    padding: 0 ${formControl.padding};
+    color: ${formControl['foreground-color']};
+    border-radius: calc(${baseBorderRadius} * ${formControl['border-radius']});
+    background-color: ${formControl['background-color']};
+    border-color: ${props.hasError ? errorColor : formControl['border-color']};
+  `;
+});
+StyledOpenerButton.defaultProps = defaultThemeProp;
+const dateDisplayVariants = {
+    YEARS: 'year',
+    QUARTERS: 'quarteryear',
+    MONTHS: 'monthyear',
+    WEEKS: 'week',
+    DAYS: 'date',
+    HOURS: 'datetime'
+};
+const EllipsisLabel = styled.div `
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+/** Display for the selected time period value */
+const TimePeriodDisplay = (props) => {
+    const { locale } = useConfiguration();
+    const t = useI18n();
+    const { rhs } = props;
+    if (hasProp(rhs, 'relativeDate')) {
+        const { relativeDate: { timePeriod, interval, datePart } } = rhs;
+        return _jsx(Text, { children: formatRelativeDate(t, timePeriod, datePart, interval) }, void 0);
+    }
+    const { value, dateFunction } = rhs;
+    if (!value) {
+        return _jsx(Text, { children: t('condition_builder_select_placeholder') }, void 0);
+    }
+    if (dateFunction === 'MONTHS_OF_YEAR') {
+        return (_jsx(Text, { children: new Date(2021, value - 1, 1).toLocaleString(locale, { month: 'long' }) }, void 0));
+    }
+    if (dateFunction === 'DAYS_OF_MONTH') {
+        return (_jsx(Text, { children: t('condition_builder_day_number_of_month', [value], {
+                count: Number(value),
+                pluralType: 'ordinal'
+            }) }, void 0));
+    }
+    if (dateFunction === 'DAYS_OF_WEEK') {
+        return (
+        // Choosing Feb-2021 as it starts on a Monday
+        _jsx(Text, { children: new Date(2021, 1, value).toLocaleString(locale, { weekday: 'long' }) }, void 0));
+    }
+    return _jsx(DateTimeDisplay, { value: value, variant: dateDisplayVariants[dateFunction] }, void 0);
+};
+/** Renders a button that opens up TimePeriodMenu in a Popover */
+const TimePeriodInput = (props) => {
+    const { rhs, onChange, dateFunctionsList, status, fieldType } = props;
+    const t = useI18n();
+    // Ref for the opener button
+    const buttonRef = useRef(null);
+    // Set up a Popover for the controls
+    const [isOpen, setIsOpen] = useState(false);
+    const [popoverEl, setPopoverEl] = useElement(null);
+    const hidePopup = () => {
+        if (isOpen)
+            setIsOpen(false);
+    };
+    useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopup); // Call the method on clicking outside these elements
+    const hideOnEscape = (e) => {
+        if (e.key === 'Escape')
+            hidePopup(); // Call the method when Escape key is pressed
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(StyledOpenerButton, { ref: buttonRef, "aria-haspopup": true, "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: hideOnEscape, hasError: status === 'error', name: 'time-period-button', children: _jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 1 }, item: { grow: 1 }, children: [_jsx(EllipsisLabel, { children: _jsx(TimePeriodDisplay, { rhs: rhs }, void 0) }, void 0), _jsx(Icon, { name: isOpen ? 'times' : 'calendar' }, void 0)] }, void 0) }, void 0), status === 'error' && (_jsx(StyledFormFieldInfo, { status: 'error', children: hasProp(rhs, 'relativeDate')
+                    ? t('condition_builder_invalid_relative_date')
+                    : t('condition_builder_invalid_time_period') }, void 0)), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonRef.current, placement: 'bottom-start', style: { width: '40ch' }, children: _jsx(Flex, { container: { pad: 1 }, children: _jsx(TimePeriodMenu, { rhs: rhs, fieldType: fieldType, onChange: onChange, dateFunctionsList: dateFunctionsList, status: status }, void 0) }, void 0) }, void 0)] }, void 0));
+};
+export default TimePeriodInput;
+//# sourceMappingURL=TimePeriodInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimePeriodInput.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/TimePeriodInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  ForwardProps,\n  Icon,\n  Popover,\n  Text,\n  useElement,\n  useOuterEvent,\n  useConfiguration,\n  useI18n,\n  hasProp,\n  Button,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport { StyledFormFieldInfo } from '@pega/cosmos-react-core/lib/components/FormField/FormField';\nimport DateTimeDisplay, {\n  DateTimeVariant\n} from '@pega/cosmos-react-core/lib/components/DateTime/DateTimeDisplay';\n\nimport { RhsWithDateFunction, RhsWithRelativeDate } from '../ConditionBuilder.types';\nimport { formatRelativeDate } from '../core/formatter';\nimport { DateFunction } from '../core/types';\n\nimport TimePeriodMenu, { TimePeriodMenuProps } from './TimePeriodMenu';\n\n// Custom styles for the button to match the designs\nexport const StyledOpenerButton = styled(Button)(props => {\n  const { 'border-radius': baseBorderRadius } = props.theme.base;\n  const { 'form-control': formControl } = props.theme.components;\n  const { 'status-color': errorColor } = props.theme.components['form-field'].error;\n\n  return css`\n    width: 100%;\n    padding: 0 ${formControl.padding};\n    color: ${formControl['foreground-color']};\n    border-radius: calc(${baseBorderRadius} * ${formControl['border-radius']});\n    background-color: ${formControl['background-color']};\n    border-color: ${props.hasError ? errorColor : formControl['border-color']};\n  `;\n});\nStyledOpenerButton.defaultProps = defaultThemeProp;\n\nconst dateDisplayVariants: Record<\n  Exclude<DateFunction, 'MONTHS_OF_YEAR' | 'DAYS_OF_MONTH' | 'DAYS_OF_WEEK'>,\n  DateTimeVariant\n> = {\n  YEARS: 'year',\n  QUARTERS: 'quarteryear',\n  MONTHS: 'monthyear',\n  WEEKS: 'week',\n  DAYS: 'date',\n  HOURS: 'datetime'\n};\n\nconst EllipsisLabel = styled.div`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\n/** Display for the selected time period value */\nconst TimePeriodDisplay: FunctionComponent<{ rhs: RhsWithDateFunction | RhsWithRelativeDate }> =\n  (props: { rhs: RhsWithDateFunction | RhsWithRelativeDate }) => {\n    const { locale } = useConfiguration();\n    const t = useI18n();\n    const { rhs } = props;\n\n    if (hasProp(rhs, 'relativeDate')) {\n      const {\n        relativeDate: { timePeriod, interval, datePart }\n      } = rhs;\n      return <Text>{formatRelativeDate(t, timePeriod, datePart, interval)}</Text>;\n    }\n\n    const { value, dateFunction } = rhs;\n\n    if (!value) {\n      return <Text>{t('condition_builder_select_placeholder')}</Text>;\n    }\n\n    if (dateFunction === 'MONTHS_OF_YEAR') {\n      return (\n        <Text>\n          {new Date(2021, (value as number) - 1, 1).toLocaleString(locale, { month: 'long' })}\n        </Text>\n      );\n    }\n\n    if (dateFunction === 'DAYS_OF_MONTH') {\n      return (\n        <Text>\n          {t('condition_builder_day_number_of_month', [value], {\n            count: Number(value),\n            pluralType: 'ordinal'\n          })}\n        </Text>\n      );\n    }\n\n    if (dateFunction === 'DAYS_OF_WEEK') {\n      return (\n        // Choosing Feb-2021 as it starts on a Monday\n        <Text>\n          {new Date(2021, 1, value as number).toLocaleString(locale, { weekday: 'long' })}\n        </Text>\n      );\n    }\n\n    return <DateTimeDisplay value={value} variant={dateDisplayVariants[dateFunction]} />;\n  };\n\n/** Renders a button that opens up TimePeriodMenu in a Popover */\nconst TimePeriodInput: FunctionComponent<TimePeriodMenuProps & ForwardProps> = (\n  props: TimePeriodMenuProps\n) => {\n  const { rhs, onChange, dateFunctionsList, status, fieldType } = props;\n  const t = useI18n();\n\n  // Ref for the opener button\n  const buttonRef = useRef(null);\n\n  // Set up a Popover for the controls\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopup = () => {\n    if (isOpen) setIsOpen(false);\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopup); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopup(); // Call the method when Escape key is pressed\n  };\n\n  return (\n    <>\n      <StyledOpenerButton\n        ref={buttonRef}\n        aria-haspopup\n        aria-expanded={isOpen}\n        onClick={() => setIsOpen(!isOpen)}\n        onKeyDown={hideOnEscape}\n        hasError={status === 'error'}\n        name='time-period-button'\n      >\n        <Flex container={{ justify: 'between', alignItems: 'center', gap: 1 }} item={{ grow: 1 }}>\n          <EllipsisLabel>\n            <TimePeriodDisplay rhs={rhs} />\n          </EllipsisLabel>\n          <Icon name={isOpen ? 'times' : 'calendar'} />\n        </Flex>\n      </StyledOpenerButton>\n\n      {status === 'error' && (\n        <StyledFormFieldInfo status='error'>\n          {hasProp(rhs, 'relativeDate')\n            ? t('condition_builder_invalid_relative_date')\n            : t('condition_builder_invalid_time_period')}\n        </StyledFormFieldInfo>\n      )}\n\n      <Popover\n        show={isOpen}\n        ref={setPopoverEl}\n        target={buttonRef.current}\n        placement='bottom-start'\n        style={{ width: '40ch' }}\n      >\n        <Flex container={{ pad: 1 }}>\n          <TimePeriodMenu\n            rhs={rhs}\n            fieldType={fieldType}\n            onChange={onChange}\n            dateFunctionsList={dateFunctionsList}\n            status={status}\n          />\n        </Flex>\n      </Popover>\n    </>\n  );\n};\n\nexport default TimePeriodInput;\n"]}

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

@@ -0,0 +1,20 @@
+import { FunctionComponent } from 'react';
+import { BaseProps, ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { RhsWithDateFunction, RhsWithRelativeDate } from '../ConditionBuilder.types';
+import { DateFunction, FieldType } from '../core/types';
+export interface TimePeriodMenuProps extends BaseProps, NoChildrenProp {
+    /** Rhs for the condition */
+    rhs: RhsWithDateFunction | RhsWithRelativeDate;
+    /** Callback for any modifications to the Rhs */
+    onChange: (rhs: RhsWithDateFunction | RhsWithRelativeDate) => void;
+    /** List of date functions enabled for the current LHS field type */
+    dateFunctionsList: DateFunction[];
+    /** FieldType of the LHS Field. Will only be DATE_TIME or DATE_ONLY */
+    fieldType: FieldType;
+    /** Used to indicate any errors on the control */
+    status?: 'error';
+}
+/** A menu with controls to select a Time period value on RHS */
+declare const TimePeriodMenu: FunctionComponent<TimePeriodMenuProps & ForwardProps>;
+export default TimePeriodMenu;
+//# sourceMappingURL=TimePeriodMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimePeriodMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/TimePeriodMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAQ,YAAY,EAAW,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEjG,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACrF,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAKxD,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,cAAc;IACpE,4BAA4B;IAC5B,GAAG,EAAE,mBAAmB,GAAG,mBAAmB,CAAC;IAE/C,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE,mBAAmB,GAAG,mBAAmB,KAAK,IAAI,CAAC;IAEnE,oEAAoE;IACpE,iBAAiB,EAAE,YAAY,EAAE,CAAC;IAElC,sEAAsE;IACtE,SAAS,EAAE,SAAS,CAAC;IAErB,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,gEAAgE;AAChE,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAmBzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, hasProp } from '@pega/cosmos-react-core';
+import DateFunctionMenu from './DateFunctionMenu';
+import RelativeDateMenu from './RelativeDateMenu';
+/** A menu with controls to select a Time period value on RHS */
+const TimePeriodMenu = (props) => {
+    const { rhs, onChange, dateFunctionsList, status, fieldType } = props;
+    return (_jsxs(Flex, { container: { direction: 'column', rowGap: 0.5 }, item: { grow: 1 }, children: [hasProp(rhs, 'dateFunction') && (_jsx(DateFunctionMenu, { rhs: rhs, onChange: onChange, dateFunctionsList: dateFunctionsList, status: status }, void 0)), hasProp(rhs, 'relativeDate') && (_jsx(RelativeDateMenu, { rhs: rhs, fieldType: fieldType, onChange: onChange, status: status }, void 0))] }, void 0));
+};
+export default TimePeriodMenu;
+//# sourceMappingURL=TimePeriodMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimePeriodMenu.js","sourceRoot":"","sources":["../../../../src/components/ConditionBuilder/RhsControls/TimePeriodMenu.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAa,IAAI,EAAgB,OAAO,EAAkB,MAAM,yBAAyB,CAAC;AAKjG,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAmBlD,gEAAgE;AAChE,MAAM,cAAc,GAA0D,CAC5E,KAA0B,EAC1B,EAAE;IACF,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IACtE,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aACrE,OAAO,CAAC,GAAG,EAAE,cAAc,CAAC,IAAI,CAC/B,KAAC,gBAAgB,IACf,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,iBAAiB,EAAE,iBAAiB,EACpC,MAAM,EAAE,MAAM,WACd,CACH,EACA,OAAO,CAAC,GAAG,EAAE,cAAc,CAAC,IAAI,CAC/B,KAAC,gBAAgB,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,WAAI,CACzF,YACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["// cspell:ignore words DDTHH\nimport { FunctionComponent } from 'react';\n\nimport { BaseProps, Flex, ForwardProps, hasProp, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport { RhsWithDateFunction, RhsWithRelativeDate } from '../ConditionBuilder.types';\nimport { DateFunction, FieldType } from '../core/types';\n\nimport DateFunctionMenu from './DateFunctionMenu';\nimport RelativeDateMenu from './RelativeDateMenu';\n\nexport interface TimePeriodMenuProps extends BaseProps, NoChildrenProp {\n  /** Rhs for the condition */\n  rhs: RhsWithDateFunction | RhsWithRelativeDate;\n\n  /** Callback for any modifications to the Rhs */\n  onChange: (rhs: RhsWithDateFunction | RhsWithRelativeDate) => void;\n\n  /** List of date functions enabled for the current LHS field type */\n  dateFunctionsList: DateFunction[];\n\n  /** FieldType of the LHS Field. Will only be DATE_TIME or DATE_ONLY */\n  fieldType: FieldType;\n\n  /** Used to indicate any errors on the control */\n  status?: 'error';\n}\n\n/** A menu with controls to select a Time period value on RHS */\nconst TimePeriodMenu: FunctionComponent<TimePeriodMenuProps & ForwardProps> = (\n  props: TimePeriodMenuProps\n) => {\n  const { rhs, onChange, dateFunctionsList, status, fieldType } = props;\n  return (\n    <Flex container={{ direction: 'column', rowGap: 0.5 }} item={{ grow: 1 }}>\n      {hasProp(rhs, 'dateFunction') && (\n        <DateFunctionMenu\n          rhs={rhs}\n          onChange={onChange}\n          dateFunctionsList={dateFunctionsList}\n          status={status}\n        />\n      )}\n      {hasProp(rhs, 'relativeDate') && (\n        <RelativeDateMenu rhs={rhs} fieldType={fieldType} onChange={onChange} status={status} />\n      )}\n    </Flex>\n  );\n};\n\nexport default TimePeriodMenu;\n"]}