@pega/cosmos-react-demos 5.0.0-dev.4.8 → 5.0.0-dev.5.0

package/lib/condition-builder/ConditionBuilder/ConditionBuilder.stories.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/no-unescaped-entities */
+import { useRef, useState } from 'react';
+import { Card, CardContent, Text, Button, Popover, useElement, useOuterEvent, Flex, useI18n } from '@pega/cosmos-react-core';
+import { ConditionBuilder, FieldCondition, AtomicCondition, getInitConditionForLhs, isValidCondition, formatCondition } from '@pega/cosmos-react-condition-builder';
+import { demoFields, demoCondition, demoComparators, demoDateFunctions } from './props.mock';
+import { StyledCodeBlock, StyledGrid, StyledList } from './ConditionBuilder.styles';
+import { convertRhsTypes } from './ConditionBuilder.mocks';
+export default {
+    title: 'Condition Builder/ConditionBuilder',
+    component: ConditionBuilder
+};
+export const DefaultBuilder = (args) => {
+    const translate = useI18n();
+    const [condition, setCondition] = useState(() => {
+        // If a previous condition exists on the session, use it
+        const prevCondition = sessionStorage.getItem('CBDemoCondition');
+        if (prevCondition !== null) {
+            // If an empty condition was submitted previously, start with an empty one
+            if (prevCondition === 'undefined') {
+                return undefined;
+            }
+            return JSON.parse(prevCondition);
+        }
+        return demoCondition;
+    });
+    // Set up content for rendering inside a Popover
+    const buttonRef = useRef(null); // Ref for the opener button
+    const [isOpen, setIsOpen] = useState(false);
+    const [popoverEl, setPopoverEl] = useElement(null);
+    const hidePopover = () => {
+        if (isOpen) {
+            setIsOpen(false);
+        }
+    };
+    useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements
+    const hideOnEscape = (e) => {
+        if (e.key === 'Escape')
+            hidePopover(); // Call the method when Escape key is pressed
+    };
+    const handle = useRef(null);
+    const builderJsx = (_jsxs(_Fragment, { children: [_jsx(ConditionBuilder, { fields: demoFields, condition: condition, validComparators: args.validComparators ? demoComparators : undefined, validRhsTypes: new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE', 'PARAMETER']), dateFunctions: args.dateFunctions ? demoDateFunctions : undefined, disallowNOT: args.disallowNOT, handle: handle }), _jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { variant: 'primary', onClick: () => {
+                        if (handle?.current) {
+                            const [valid, newCondition] = handle.current.getCondition();
+                            if (valid) {
+                                setCondition(newCondition);
+                                hidePopover();
+                                sessionStorage.setItem('CBDemoCondition', JSON.stringify(newCondition)); // Persist on sessionStorage for the next time
+                            }
+                        }
+                    }, children: "Submit" }) })] }));
+    return (_jsxs(StyledGrid, { container: {
+            cols: '1fr',
+            rowGap: 3
+        }, children: [!args.renderInPopover && builderJsx, args.renderInPopover && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, "aria-haspopup": true, "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: hideOnEscape, children: "Open Condition builder" }), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonRef.current, placement: 'bottom-start', children: _jsx(Flex, { container: { pad: 1, direction: 'column' }, children: builderJsx }) })] })), _jsxs("div", { children: [_jsx(Text, { variant: 'h4', children: "Output:" }), _jsx(StyledCodeBlock, { children: condition ? JSON.stringify(condition, null, 2) : '(No condition)' })] }), _jsxs("div", { children: [_jsx(Text, { variant: 'h4', children: "Formatted Output:" }), _jsx(StyledCodeBlock, { children: condition ? formatCondition(condition, demoFields, translate) : '(No condition)' })] })] }));
+};
+DefaultBuilder.args = {
+    validComparators: false,
+    disallowNOT: false,
+    renderInPopover: false,
+    dateFunctions: true
+};
+DefaultBuilder.argTypes = {
+    validComparators: { control: { type: 'boolean' } },
+    disallowNOT: { control: { type: 'boolean' } },
+    renderInPopover: { control: { type: 'boolean' } },
+    dateFunctions: { control: { type: 'boolean' } }
+};
+export const FieldConditionDemo = (args) => {
+    const translate = useI18n();
+    const [condition, setCondition] = useState(undefined);
+    // Set up content for rendering inside a Popover
+    const buttonRef = useRef(null); // Ref for the opener button
+    const [isOpen, setIsOpen] = useState(false);
+    const [popoverEl, setPopoverEl] = useElement(null);
+    const hidePopover = () => {
+        if (isOpen) {
+            setIsOpen(false);
+        }
+    };
+    useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements
+    const hideOnEscape = (e) => {
+        if (e.key === 'Escape')
+            hidePopover(); // Call the method when Escape key is pressed
+    };
+    const handle = useRef(null);
+    const builderJsx = (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(FieldCondition, { targetField: 'technicalDetails.lastActivityAt', fields: demoFields, condition: condition, validComparators: args.validComparators ? demoComparators : undefined, validRhsTypes: new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE']), dateFunctions: args.dateFunctions ? demoDateFunctions : undefined, handle: handle }), _jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { name: 'field-condition-submit', variant: 'primary', onClick: () => {
+                        if (!handle.current)
+                            return;
+                        const [isValid, c] = handle.current.getCondition();
+                        if (!isValid)
+                            return;
+                        hidePopover();
+                        setCondition(c);
+                    }, children: "Submit" }) })] }));
+    return (_jsxs(StyledGrid, { container: {
+            cols: 'repeat(2, minmax(0, 1fr))',
+            justifyItems: 'stretch',
+            alignItems: 'start',
+            colGap: 4
+        }, children: [!args.renderInPopover && builderJsx, args.renderInPopover && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, "aria-haspopup": true, "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: hideOnEscape, children: "Open Condition builder" }), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonRef.current, placement: 'bottom-start', children: _jsx(Flex, { container: { pad: 1 }, children: builderJsx }) })] })), _jsxs("div", { children: [_jsx(Text, { variant: 'h4', children: "Output:" }), _jsx(StyledCodeBlock, { children: condition ? JSON.stringify(condition, null, 2) : '(No condition)' }), _jsx(Text, { variant: 'h4', children: "Formatted Output:" }), _jsx(StyledCodeBlock, { children: condition ? formatCondition({ condition }, demoFields, translate) : '(No condition)' })] })] }));
+};
+FieldConditionDemo.args = {
+    validComparators: false,
+    renderInPopover: false,
+    dateFunctions: true
+};
+FieldConditionDemo.argTypes = {
+    validComparators: { control: { type: 'boolean' } },
+    renderInPopover: { control: { type: 'boolean' } },
+    dateFunctions: { control: { type: 'boolean' } }
+};
+export const AtomicConditionDemo = (args) => {
+    const translate = useI18n();
+    const validRHSTypes = convertRhsTypes(!!args.useLiteralRHSType, !!args.useFieldRHSType, !!args.useRelativeDatesRHSType, !!args.useParameterRHSType, args.dateFunctions ? demoDateFunctions : undefined);
+    // Story State object to simulate "submitting"
+    const [submitCondition, setSubmitCondition] = useState(undefined);
+    // State needed to use Popover in Story
+    const buttonRef = useRef(null); // Ref for the opener button
+    const [isOpen, setIsOpen] = useState(false);
+    const [popoverEl, setPopoverEl] = useElement(null);
+    const hidePopover = () => {
+        if (isOpen) {
+            setIsOpen(false);
+        }
+    };
+    useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements
+    const hideOnEscape = (e) => {
+        if (e.key === 'Escape')
+            hidePopover(); // Call the method when Escape key is pressed
+    };
+    // State handling needed to manage/use the AtomicCondition component
+    const [showErrorIndicators, setShowErrorIndicators] = useState(false);
+    const [condition, setCondition] = useState(
+    // If editing use the seedCondition, otherwise, determine an initial condition based on the targetField
+    () => submitCondition ||
+        getInitConditionForLhs({ field: 'details.age' }, demoFields, validRHSTypes, args.validComparators ? demoComparators : undefined, args.dateFunctions ? demoDateFunctions : undefined));
+    const handleSubmission = () => {
+        setShowErrorIndicators(false);
+        if (isValidCondition(condition, demoFields, true)) {
+            // Insert all "submit" logic to use the valid condition that you've created.
+            if (args.renderInPopover)
+                setIsOpen(false);
+            setSubmitCondition(condition);
+        }
+        else {
+            setShowErrorIndicators(true);
+        }
+    };
+    const atomicConditionJSX = (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(AtomicCondition, { condition: condition, fields: demoFields, indicateErrors: showErrorIndicators, validComparators: args.validComparators ? demoComparators : undefined, dateFunctions: args.dateFunctions ? demoDateFunctions : undefined, onChange: c => setCondition(c), itemDirection: args.itemDirection, lhsMode: args.lhsMode, validRhsTypes: validRHSTypes }), _jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { variant: 'primary', onClick: handleSubmission, children: "Submit" }) })] }));
+    return (_jsxs(StyledGrid, { container: {
+            cols: 'repeat(2, minmax(0, 1fr))',
+            justifyItems: 'stretch',
+            alignItems: 'start',
+            colGap: 4
+        }, children: [!args.renderInPopover && atomicConditionJSX, args.renderInPopover && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, "aria-haspopup": true, "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: hideOnEscape, children: `${isOpen ? 'Close' : 'Open'} Atomic Condition` }), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonRef.current, placement: 'bottom-start', children: _jsx(Flex, { container: { pad: 1 }, children: atomicConditionJSX }) })] })), _jsx(Card, { children: _jsxs(CardContent, { children: [_jsx(Text, { variant: 'h4', children: "Output:" }), _jsx(StyledCodeBlock, { children: submitCondition ? JSON.stringify(submitCondition, null, 2) : '(No condition)' }), _jsx(Text, { variant: 'h4', children: "Formatted Output:" }), _jsx(StyledCodeBlock, { children: submitCondition
+                                ? formatCondition({ condition: submitCondition }, demoFields, translate)
+                                : '(No condition)' }), _jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h2', status: 'error', children: "validRhsTypes Prop Warning" }), _jsxs(Text, { children: ["There are LHS(Left Hand Side Field)/Comparator pairings that ", _jsx("u", { children: "require" }), " specific RHS(Right Hand Side Value) types. Please be mindful of these incompatibilities when limiting RHS value types using this prop. We ", _jsx("b", { children: "do not" }), " support limiting RHS field types to incompatible types and it will result in a validation error if you do so. The pairings referred to here are as follows:"] })] }), _jsxs(StyledList, { children: [_jsxs("li", { children: ["BOOLEAN LHS Fields coupled with \"EQ\" or \"NEQ\" comparators, will ", _jsx("u", { children: "always yield" }), ' ', "a Field RHS"] }), _jsxs("li", { children: ["Any LHS Fields coupled with \"IN\" or \"NOT_IN\" comparators, will ", _jsx("u", { children: "always yield" }), " a Literal RHS (Comma separated list)"] })] }), _jsx(Flex, { container: { direction: 'column' }, children: _jsxs(Text, { children: ["If you would like to limit RHS value types and avoid these incompatibilities, you will need to exclude these comparators using the ", _jsx("b", { children: "validComparators" }), " prop."] }) })] })] }) })] }));
+};
+AtomicConditionDemo.args = {
+    validComparators: false,
+    renderInPopover: false,
+    dateFunctions: true,
+    itemDirection: 'column',
+    useLiteralRHSType: true,
+    useParameterRHSType: true,
+    useFieldRHSType: true,
+    useRelativeDatesRHSType: true,
+    lhsMode: 'input'
+};
+AtomicConditionDemo.argTypes = {
+    validComparators: { control: { type: 'boolean' } },
+    renderInPopover: { control: { type: 'boolean' } },
+    dateFunctions: { control: { type: 'boolean' } },
+    itemDirection: { options: ['column', 'row'], control: { type: 'select' } },
+    useLiteralRHSType: { control: { type: 'boolean' } },
+    useParameterRHSType: { control: { type: 'boolean' } },
+    useFieldRHSType: { control: { type: 'boolean' } },
+    useRelativeDatesRHSType: { control: { type: 'boolean' } },
+    lhsMode: { options: ['input', 'label', 'hidden'], control: { type: 'select' } }
+};
+//# sourceMappingURL=ConditionBuilder.stories.js.map

package/lib/condition-builder/ConditionBuilder/ConditionBuilder.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionBuilder.stories.js","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/ConditionBuilder.stories.tsx"],"names":[],"mappings":";AAAA,gDAAgD;AAChD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,EACL,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,MAAM,EACN,OAAO,EACP,UAAU,EACV,aAAa,EACb,IAAI,EACJ,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,sBAAsB,EACtB,gBAAgB,EAChB,eAAe,EAChB,MAAM,sCAAsC,CAAC;AAK9C,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAC7F,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACpF,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,eAAe;IACb,KAAK,EAAE,oCAAoC;IAC3C,SAAS,EAAE,gBAAgB;CACpB,CAAC;AAeV,MAAM,CAAC,MAAM,cAAc,GAAwC,CACjE,IAAgC,EAChC,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,EAAE,CAAC;IAC5B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAwB,GAAG,EAAE;QACrE,wDAAwD;QACxD,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAChE,IAAI,aAAa,KAAK,IAAI,EAAE;YAC1B,0EAA0E;YAC1E,IAAI,aAAa,KAAK,WAAW,EAAE;gBACjC,OAAO,SAAS,CAAC;aAClB;YACD,OAAO,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;SAClC;QACD,OAAO,aAAa,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,gDAAgD;IAChD,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,4BAA4B;IAC5D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,CAAc,IAAI,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,MAAM,EAAE;YACV,SAAS,CAAC,KAAK,CAAC,CAAC;SAClB;IACH,CAAC,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,qDAAqD;IAC9H,MAAM,YAAY,GAAG,CAAC,CAAgB,EAAE,EAAE;QACxC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;YAAE,WAAW,EAAE,CAAC,CAAC,6CAA6C;IACtF,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,MAAM,CAA8B,IAAI,CAAC,CAAC;IAEzD,MAAM,UAAU,GAAG,CACjB,8BACE,KAAC,gBAAgB,IACf,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,EACrE,aAAa,EAAE,IAAI,GAAG,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,WAAW,CAAC,CAAC,EAC3F,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,EACjE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,MAAM,EAAE,MAAM,GACd,EACF,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACjC,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,MAAM,EAAE,OAAO,EAAE;4BACnB,MAAM,CAAC,KAAK,EAAE,YAAY,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC;4BAC5D,IAAI,KAAK,EAAE;gCACT,YAAY,CAAC,YAAY,CAAC,CAAC;gCAC3B,WAAW,EAAE,CAAC;gCACd,cAAc,CAAC,OAAO,CAAC,iBAAiB,EAAE,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,8CAA8C;6BACxH;yBACF;oBACH,CAAC,uBAGM,GACJ,IACN,CACJ,CAAC;IAEF,OAAO,CACL,MAAC,UAAU,IACT,SAAS,EAAE;YACT,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,CAAC;SACV,aAEA,CAAC,IAAI,CAAC,eAAe,IAAI,UAAU,EAEnC,IAAI,CAAC,eAAe,IAAI,CACvB,8BACE,KAAC,MAAM,IACL,GAAG,EAAE,SAAS,0CAEC,MAAM,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,EACjC,SAAS,EAAE,YAAY,uCAGhB,EAET,KAAC,OAAO,IACN,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,YAAY,EACjB,MAAM,EAAE,SAAS,CAAC,OAAO,EACzB,SAAS,EAAC,cAAc,YAExB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAG,UAAU,GAAQ,GAC7D,IACT,CACJ,EAED,0BACE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,wBAAe,EACjC,KAAC,eAAe,cACb,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,GAClD,IACd,EAEN,0BACE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,kCAAyB,EAC3C,KAAC,eAAe,cACb,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,gBAAgB,GACjE,IACd,IACK,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,gBAAgB,EAAE,KAAK;IACvB,WAAW,EAAE,KAAK;IAClB,eAAe,EAAE,KAAK;IACtB,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAClD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAChD,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAwC,CACrE,IAAgC,EAChC,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,EAAE,CAAC;IAC5B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAA4B,SAAS,CAAC,CAAC;IAEjF,gDAAgD;IAChD,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,4BAA4B;IAC5D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,CAAc,IAAI,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,MAAM,EAAE;YACV,SAAS,CAAC,KAAK,CAAC,CAAC;SAClB;IACH,CAAC,CAAC;IACF,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,qDAAqD;IAC9H,MAAM,YAAY,GAAG,CAAC,CAAgB,EAAE,EAAE;QACxC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;YAAE,WAAW,EAAE,CAAC,CAAC,6CAA6C;IACtF,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,MAAM,CAA4B,IAAI,CAAC,CAAC;IAEvD,MAAM,UAAU,GAAG,CACjB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,cAAc,IACb,WAAW,EAAC,iCAAiC,EAC7C,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,EACrE,aAAa,EAAE,IAAI,GAAG,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,EAC9E,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,EACjE,MAAM,EAAE,MAAM,GACd,EAEF,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACjC,KAAC,MAAM,IACL,IAAI,EAAC,wBAAwB,EAC7B,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,CAAC,MAAM,CAAC,OAAO;4BAAE,OAAO;wBAE5B,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC;wBACnD,IAAI,CAAC,OAAO;4BAAE,OAAO;wBAErB,WAAW,EAAE,CAAC;wBACd,YAAY,CAAC,CAAC,CAAC,CAAC;oBAClB,CAAC,uBAGM,GACJ,IACF,CACR,CAAC;IAEF,OAAO,CACL,MAAC,UAAU,IACT,SAAS,EAAE;YACT,IAAI,EAAE,2BAA2B;YACjC,YAAY,EAAE,SAAS;YACvB,UAAU,EAAE,OAAO;YACnB,MAAM,EAAE,CAAC;SACV,aAEA,CAAC,IAAI,CAAC,eAAe,IAAI,UAAU,EAEnC,IAAI,CAAC,eAAe,IAAI,CACvB,8BACE,KAAC,MAAM,IACL,GAAG,EAAE,SAAS,0CAEC,MAAM,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,EACjC,SAAS,EAAE,YAAY,uCAGhB,EAET,KAAC,OAAO,IACN,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,YAAY,EACjB,MAAM,EAAE,SAAS,CAAC,OAAO,EACzB,SAAS,EAAC,cAAc,YAExB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,YAAG,UAAU,GAAQ,GACxC,IACT,CACJ,EAED,0BACE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,wBAAe,EACjC,KAAC,eAAe,cACb,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,GAClD,EAElB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,kCAAyB,EAC3C,KAAC,eAAe,cACb,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,gBAAgB,GACrE,IACd,IACK,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,gBAAgB,EAAE,KAAK;IACvB,eAAe,EAAE,KAAK;IACtB,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAClD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAChD,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAwC,CACtE,IAAgC,EAChC,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,EAAE,CAAC;IAE5B,MAAM,aAAa,GAAiB,eAAe,CACjD,CAAC,CAAC,IAAI,CAAC,iBAAiB,EACxB,CAAC,CAAC,IAAI,CAAC,eAAe,EACtB,CAAC,CAAC,IAAI,CAAC,uBAAuB,EAC9B,CAAC,CAAC,IAAI,CAAC,mBAAmB,EAC1B,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CACnD,CAAC;IAEF,8CAA8C;IAC9C,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAA4B,SAAS,CAAC,CAAC;IAC7F,uCAAuC;IACvC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,4BAA4B;IAC5D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,CAAc,IAAI,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,MAAM,EAAE;YACV,SAAS,CAAC,KAAK,CAAC,CAAC;SAClB;IACH,CAAC,CAAC;IACF,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,qDAAqD;IAC9H,MAAM,YAAY,GAAG,CAAC,CAAgB,EAAE,EAAE;QACxC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;YAAE,WAAW,EAAE,CAAC,CAAC,6CAA6C;IACtF,CAAC,CAAC;IAEF,oEAAoE;IACpE,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ;IACxC,uGAAuG;IACvG,GAAG,EAAE,CACH,eAAe;QACf,sBAAsB,CACpB,EAAE,KAAK,EAAE,aAAa,EAAE,EACxB,UAAU,EACV,aAAa,EACb,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,EACnD,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CACnD,CACJ,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,sBAAsB,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,gBAAgB,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE;YACjD,4EAA4E;YAC5E,IAAI,IAAI,CAAC,eAAe;gBAAE,SAAS,CAAC,KAAK,CAAC,CAAC;YAC3C,kBAAkB,CAAC,SAAS,CAAC,CAAC;SAC/B;aAAM;YACL,sBAAsB,CAAC,IAAI,CAAC,CAAC;SAC9B;IACH,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CACzB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,eAAe,IACd,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,UAAU,EAClB,cAAc,EAAE,mBAAmB,EACnC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,EACrE,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,EACjE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,EAC9B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,aAAa,EAAE,aAAa,GAC5B,EACF,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACjC,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,gBAAgB,uBAE1C,GACJ,IACF,CACR,CAAC;IAEF,OAAO,CACL,MAAC,UAAU,IACT,SAAS,EAAE;YACT,IAAI,EAAE,2BAA2B;YACjC,YAAY,EAAE,SAAS;YACvB,UAAU,EAAE,OAAO;YACnB,MAAM,EAAE,CAAC;SACV,aAEA,CAAC,IAAI,CAAC,eAAe,IAAI,kBAAkB,EAE3C,IAAI,CAAC,eAAe,IAAI,CACvB,8BACE,KAAC,MAAM,IACL,GAAG,EAAE,SAAS,0CAEC,MAAM,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,EACjC,SAAS,EAAE,YAAY,YAEtB,GAAG,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,mBAAmB,GACzC,EAET,KAAC,OAAO,IACN,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,YAAY,EACjB,MAAM,EAAE,SAAS,CAAC,OAAO,EACzB,SAAS,EAAC,cAAc,YAExB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,YAAG,kBAAkB,GAAQ,GAChD,IACT,CACJ,EACD,KAAC,IAAI,cACH,MAAC,WAAW,eACV,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,wBAAe,EACjC,KAAC,eAAe,cACb,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,eAAe,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,GAC9D,EAElB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,kCAAyB,EAC3C,KAAC,eAAe,cACb,eAAe;gCACd,CAAC,CAAC,eAAe,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,EAAE,UAAU,EAAE,SAAS,CAAC;gCACxE,CAAC,CAAC,gBAAgB,GACJ,EAClB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,2CAE1B,EACP,MAAC,IAAI,gFAC0D,kCAAc,iJAE9B,iCAAa,oKAGrD,IACF,EACP,MAAC,UAAU,eACT,iGACkE,uCAAmB,EAAC,GAAG,mBAEpF,EACL,gGACiE,uCAAmB,6CAE/E,IACM,EACb,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,YACtC,MAAC,IAAI,sJAE8C,2CAAuB,cACnE,GACF,IACF,IACK,GACT,IACI,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,gBAAgB,EAAE,KAAK;IACvB,eAAe,EAAE,KAAK;IACtB,aAAa,EAAE,IAAI;IACnB,aAAa,EAAE,QAAQ;IACvB,iBAAiB,EAAE,IAAI;IACvB,mBAAmB,EAAE,IAAI;IACzB,eAAe,EAAE,IAAI;IACrB,uBAAuB,EAAE,IAAI;IAC7B,OAAO,EAAE,OAAO;CACjB,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAClD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC/C,aAAa,EAAE,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1E,iBAAiB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACnD,mBAAmB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACrD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,uBAAuB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACzD,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAChF,CAAC","sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport { useRef, useState } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport {\n  Card,\n  CardContent,\n  Text,\n  Button,\n  Popover,\n  useElement,\n  useOuterEvent,\n  Flex,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport {\n  ConditionBuilder,\n  FieldCondition,\n  AtomicCondition,\n  getInitConditionForLhs,\n  isValidCondition,\n  formatCondition\n} from '@pega/cosmos-react-condition-builder';\nimport type { Condition, LeafCondition, RHSType } from '@pega/cosmos-react-condition-builder';\nimport type { HandleValue as ConditionBuilderHandleValue } from '@pega/cosmos-react-condition-builder/lib/components/ConditionBuilder/ConditionBuilder.types';\nimport type { HandleValue as FieldConditionHandleValue } from '@pega/cosmos-react-condition-builder/lib/components/ConditionBuilder/FieldCondition.types';\n\nimport { demoFields, demoCondition, demoComparators, demoDateFunctions } from './props.mock';\nimport { StyledCodeBlock, StyledGrid, StyledList } from './ConditionBuilder.styles';\nimport { convertRhsTypes } from './ConditionBuilder.mocks';\n\nexport default {\n  title: 'Condition Builder/ConditionBuilder',\n  component: ConditionBuilder\n} as Meta;\n\ninterface ConditionBuilderStoryProps {\n  validComparators?: boolean;\n  disallowNOT?: boolean;\n  renderInPopover?: boolean;\n  dateFunctions?: boolean;\n  itemDirection?: 'column' | 'row';\n  useLiteralRHSType?: boolean;\n  useParameterRHSType?: boolean;\n  useFieldRHSType?: boolean;\n  useRelativeDatesRHSType?: boolean;\n  lhsMode?: 'input' | 'label' | 'hidden';\n}\n\nexport const DefaultBuilder: StoryFn<ConditionBuilderStoryProps> = (\n  args: ConditionBuilderStoryProps\n) => {\n  const translate = useI18n();\n  const [condition, setCondition] = useState<Condition | undefined>(() => {\n    // If a previous condition exists on the session, use it\n    const prevCondition = sessionStorage.getItem('CBDemoCondition');\n    if (prevCondition !== null) {\n      // If an empty condition was submitted previously, start with an empty one\n      if (prevCondition === 'undefined') {\n        return undefined;\n      }\n      return JSON.parse(prevCondition);\n    }\n    return demoCondition;\n  });\n\n  // Set up content for rendering inside a Popover\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  const handle = useRef<ConditionBuilderHandleValue>(null);\n\n  const builderJsx = (\n    <>\n      <ConditionBuilder\n        fields={demoFields}\n        condition={condition}\n        validComparators={args.validComparators ? demoComparators : undefined}\n        validRhsTypes={new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE', 'PARAMETER'])}\n        dateFunctions={args.dateFunctions ? demoDateFunctions : undefined}\n        disallowNOT={args.disallowNOT}\n        handle={handle}\n      />\n      <Flex container={{ justify: 'end' }}>\n        <Button\n          variant='primary'\n          onClick={() => {\n            if (handle?.current) {\n              const [valid, newCondition] = handle.current.getCondition();\n              if (valid) {\n                setCondition(newCondition);\n                hidePopover();\n                sessionStorage.setItem('CBDemoCondition', JSON.stringify(newCondition)); // Persist on sessionStorage for the next time\n              }\n            }\n          }}\n        >\n          Submit\n        </Button>\n      </Flex>\n    </>\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: '1fr',\n        rowGap: 3\n      }}\n    >\n      {!args.renderInPopover && builderJsx}\n\n      {args.renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            Open Condition builder\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1, direction: 'column' }}>{builderJsx}</Flex>\n          </Popover>\n        </>\n      )}\n\n      <div>\n        <Text variant='h4'>Output:</Text>\n        <StyledCodeBlock>\n          {condition ? JSON.stringify(condition, null, 2) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n\n      <div>\n        <Text variant='h4'>Formatted Output:</Text>\n        <StyledCodeBlock>\n          {condition ? formatCondition(condition, demoFields, translate) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n    </StyledGrid>\n  );\n};\n\nDefaultBuilder.args = {\n  validComparators: false,\n  disallowNOT: false,\n  renderInPopover: false,\n  dateFunctions: true\n};\n\nDefaultBuilder.argTypes = {\n  validComparators: { control: { type: 'boolean' } },\n  disallowNOT: { control: { type: 'boolean' } },\n  renderInPopover: { control: { type: 'boolean' } },\n  dateFunctions: { control: { type: 'boolean' } }\n};\n\nexport const FieldConditionDemo: StoryFn<ConditionBuilderStoryProps> = (\n  args: ConditionBuilderStoryProps\n) => {\n  const translate = useI18n();\n  const [condition, setCondition] = useState<LeafCondition | undefined>(undefined);\n\n  // Set up content for rendering inside a Popover\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  const handle = useRef<FieldConditionHandleValue>(null);\n\n  const builderJsx = (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <FieldCondition\n        targetField='technicalDetails.lastActivityAt'\n        fields={demoFields}\n        condition={condition}\n        validComparators={args.validComparators ? demoComparators : undefined}\n        validRhsTypes={new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE'])}\n        dateFunctions={args.dateFunctions ? demoDateFunctions : undefined}\n        handle={handle}\n      />\n\n      <Flex container={{ justify: 'end' }}>\n        <Button\n          name='field-condition-submit'\n          variant='primary'\n          onClick={() => {\n            if (!handle.current) return;\n\n            const [isValid, c] = handle.current.getCondition();\n            if (!isValid) return;\n\n            hidePopover();\n            setCondition(c);\n          }}\n        >\n          Submit\n        </Button>\n      </Flex>\n    </Flex>\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: 'repeat(2, minmax(0, 1fr))',\n        justifyItems: 'stretch',\n        alignItems: 'start',\n        colGap: 4\n      }}\n    >\n      {!args.renderInPopover && builderJsx}\n\n      {args.renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            Open Condition builder\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1 }}>{builderJsx}</Flex>\n          </Popover>\n        </>\n      )}\n\n      <div>\n        <Text variant='h4'>Output:</Text>\n        <StyledCodeBlock>\n          {condition ? JSON.stringify(condition, null, 2) : '(No condition)'}\n        </StyledCodeBlock>\n\n        <Text variant='h4'>Formatted Output:</Text>\n        <StyledCodeBlock>\n          {condition ? formatCondition({ condition }, demoFields, translate) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n    </StyledGrid>\n  );\n};\n\nFieldConditionDemo.args = {\n  validComparators: false,\n  renderInPopover: false,\n  dateFunctions: true\n};\n\nFieldConditionDemo.argTypes = {\n  validComparators: { control: { type: 'boolean' } },\n  renderInPopover: { control: { type: 'boolean' } },\n  dateFunctions: { control: { type: 'boolean' } }\n};\n\nexport const AtomicConditionDemo: StoryFn<ConditionBuilderStoryProps> = (\n  args: ConditionBuilderStoryProps\n) => {\n  const translate = useI18n();\n\n  const validRHSTypes: Set<RHSType> = convertRhsTypes(\n    !!args.useLiteralRHSType,\n    !!args.useFieldRHSType,\n    !!args.useRelativeDatesRHSType,\n    !!args.useParameterRHSType,\n    args.dateFunctions ? demoDateFunctions : undefined\n  );\n\n  // Story State object to simulate \"submitting\"\n  const [submitCondition, setSubmitCondition] = useState<LeafCondition | undefined>(undefined);\n  // State needed to use Popover in Story\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  // State handling needed to manage/use the AtomicCondition component\n  const [showErrorIndicators, setShowErrorIndicators] = useState(false);\n  const [condition, setCondition] = useState(\n    // If editing use the seedCondition, otherwise, determine an initial condition based on the targetField\n    () =>\n      submitCondition ||\n      getInitConditionForLhs(\n        { field: 'details.age' },\n        demoFields,\n        validRHSTypes,\n        args.validComparators ? demoComparators : undefined,\n        args.dateFunctions ? demoDateFunctions : undefined\n      )\n  );\n\n  const handleSubmission = () => {\n    setShowErrorIndicators(false);\n    if (isValidCondition(condition, demoFields, true)) {\n      // Insert all \"submit\" logic to use the valid condition that you've created.\n      if (args.renderInPopover) setIsOpen(false);\n      setSubmitCondition(condition);\n    } else {\n      setShowErrorIndicators(true);\n    }\n  };\n\n  const atomicConditionJSX = (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <AtomicCondition\n        condition={condition}\n        fields={demoFields}\n        indicateErrors={showErrorIndicators}\n        validComparators={args.validComparators ? demoComparators : undefined}\n        dateFunctions={args.dateFunctions ? demoDateFunctions : undefined}\n        onChange={c => setCondition(c)}\n        itemDirection={args.itemDirection}\n        lhsMode={args.lhsMode}\n        validRhsTypes={validRHSTypes}\n      />\n      <Flex container={{ justify: 'end' }}>\n        <Button variant='primary' onClick={handleSubmission}>\n          Submit\n        </Button>\n      </Flex>\n    </Flex>\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: 'repeat(2, minmax(0, 1fr))',\n        justifyItems: 'stretch',\n        alignItems: 'start',\n        colGap: 4\n      }}\n    >\n      {!args.renderInPopover && atomicConditionJSX}\n\n      {args.renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            {`${isOpen ? 'Close' : 'Open'} Atomic Condition`}\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1 }}>{atomicConditionJSX}</Flex>\n          </Popover>\n        </>\n      )}\n      <Card>\n        <CardContent>\n          <Text variant='h4'>Output:</Text>\n          <StyledCodeBlock>\n            {submitCondition ? JSON.stringify(submitCondition, null, 2) : '(No condition)'}\n          </StyledCodeBlock>\n\n          <Text variant='h4'>Formatted Output:</Text>\n          <StyledCodeBlock>\n            {submitCondition\n              ? formatCondition({ condition: submitCondition }, demoFields, translate)\n              : '(No condition)'}\n          </StyledCodeBlock>\n          <Flex container={{ gap: 1, direction: 'column' }}>\n            <Flex container={{ gap: 1, direction: 'column' }}>\n              <Text variant='h2' status='error'>\n                validRhsTypes Prop Warning\n              </Text>\n              <Text>\n                There are LHS(Left Hand Side Field)/Comparator pairings that <u>require</u> specific\n                RHS(Right Hand Side Value) types. Please be mindful of these incompatibilities when\n                limiting RHS value types using this prop. We <b>do not</b> support limiting RHS\n                field types to incompatible types and it will result in a validation error if you do\n                so. The pairings referred to here are as follows:\n              </Text>\n            </Flex>\n            <StyledList>\n              <li>\n                BOOLEAN LHS Fields coupled with \"EQ\" or \"NEQ\" comparators, will <u>always yield</u>{' '}\n                a Field RHS\n              </li>\n              <li>\n                Any LHS Fields coupled with \"IN\" or \"NOT_IN\" comparators, will <u>always yield</u> a\n                Literal RHS (Comma separated list)\n              </li>\n            </StyledList>\n            <Flex container={{ direction: 'column' }}>\n              <Text>\n                If you would like to limit RHS value types and avoid these incompatibilities, you\n                will need to exclude these comparators using the <b>validComparators</b> prop.\n              </Text>\n            </Flex>\n          </Flex>\n        </CardContent>\n      </Card>\n    </StyledGrid>\n  );\n};\n\nAtomicConditionDemo.args = {\n  validComparators: false,\n  renderInPopover: false,\n  dateFunctions: true,\n  itemDirection: 'column',\n  useLiteralRHSType: true,\n  useParameterRHSType: true,\n  useFieldRHSType: true,\n  useRelativeDatesRHSType: true,\n  lhsMode: 'input'\n};\n\nAtomicConditionDemo.argTypes = {\n  validComparators: { control: { type: 'boolean' } },\n  renderInPopover: { control: { type: 'boolean' } },\n  dateFunctions: { control: { type: 'boolean' } },\n  itemDirection: { options: ['column', 'row'], control: { type: 'select' } },\n  useLiteralRHSType: { control: { type: 'boolean' } },\n  useParameterRHSType: { control: { type: 'boolean' } },\n  useFieldRHSType: { control: { type: 'boolean' } },\n  useRelativeDatesRHSType: { control: { type: 'boolean' } },\n  lhsMode: { options: ['input', 'label', 'hidden'], control: { type: 'select' } }\n};\n"]}

package/lib/condition-builder/ConditionBuilder/ConditionBuilder.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const StyledGrid: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core/lib/components/Grid/Grid.types").default & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCodeBlock: import("styled-components").StyledComponent<"pre", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=ConditionBuilder.styles.d.ts.map

package/lib/condition-builder/ConditionBuilder/ConditionBuilder.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionBuilder.styles.d.ts","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/ConditionBuilder.styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,UAAU,gQAEtB,CAAC;AAEF,eAAO,MAAM,eAAe,yGAG3B,CAAC;AAGF,eAAO,MAAM,UAAU,wGAEtB,CAAC"}

package/lib/condition-builder/ConditionBuilder/ConditionBuilder.styles.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { Grid, defaultThemeProp } from '@pega/cosmos-react-core';
+export const StyledGrid = styled(Grid) `
+  max-width: 60rem;
+`;
+export const StyledCodeBlock = styled.pre `
+  padding: ${props => props.theme.base.spacing};
+  margin-bottom: ${props => props.theme.base.spacing};
+`;
+StyledCodeBlock.defaultProps = defaultThemeProp;
+export const StyledList = styled.ul `
+  padding-left: calc(4 * ${props => props.theme.base.spacing});
+`;
+StyledList.defaultProps = defaultThemeProp;
+//# sourceMappingURL=ConditionBuilder.styles.js.map

package/lib/condition-builder/ConditionBuilder/ConditionBuilder.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionBuilder.styles.js","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/ConditionBuilder.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAErC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;aAC5B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;mBAC3B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;CACnD,CAAC;AACF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAAA;2BACR,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;CAC3D,CAAC;AACF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled from 'styled-components';\n\nimport { Grid, defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledGrid = styled(Grid)`\n  max-width: 60rem;\n`;\n\nexport const StyledCodeBlock = styled.pre`\n  padding: ${props => props.theme.base.spacing};\n  margin-bottom: ${props => props.theme.base.spacing};\n`;\nStyledCodeBlock.defaultProps = defaultThemeProp;\n\nexport const StyledList = styled.ul`\n  padding-left: calc(4 * ${props => props.theme.base.spacing});\n`;\nStyledList.defaultProps = defaultThemeProp;\n"]}

package/lib/condition-builder/ConditionBuilder/props.mock.d.ts

@@ -0,0 +1,6 @@
+import { ComparatorsByType, Condition, DateFunctionsByType, Field } from '@pega/cosmos-react-condition-builder';
+export declare const demoFields: Field[];
+export declare const demoCondition: Condition;
+export declare const demoComparators: ComparatorsByType[];
+export declare const demoDateFunctions: DateFunctionsByType;
+//# sourceMappingURL=props.mock.d.ts.map

package/lib/condition-builder/ConditionBuilder/props.mock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.mock.d.ts","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/props.mock.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,mBAAmB,EACnB,KAAK,EACN,MAAM,sCAAsC,CAAC;AAE9C,eAAO,MAAM,UAAU,EAAE,KAAK,EAmK7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAiC3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,iBAAiB,EAI9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,mBAwB/B,CAAC"}

package/lib/condition-builder/ConditionBuilder/props.mock.js

@@ -0,0 +1,229 @@
+export const demoFields = [
+    {
+        id: 'employeeId',
+        primary: 'Employee ID',
+        type: 'TEXT',
+        possibleValues: [
+            'Customer Service',
+            'Engineering',
+            'Facilities',
+            'Finance',
+            'HR',
+            'IT',
+            ' Sales '
+        ]
+    },
+    {
+        id: 'details',
+        primary: 'Details',
+        items: [
+            {
+                id: 'details.firstName',
+                primary: 'First Name',
+                type: 'TEXT'
+            },
+            {
+                id: 'details.lastName',
+                primary: 'Last Name',
+                type: 'TEXT',
+                possibleValues: () => {
+                    return new Promise(resolve => {
+                        setTimeout(() => {
+                            resolve([
+                                'Value 1',
+                                'Value 2',
+                                'Value 3',
+                                'Value 4',
+                                'Value 5',
+                                'Value 6',
+                                'Value 7'
+                            ]);
+                        }, 5000);
+                    });
+                }
+            },
+            { id: 'details.gender', primary: 'Gender', type: 'TEXT' },
+            {
+                id: 'details.age',
+                primary: 'Age',
+                type: 'NUMBER'
+            },
+            {
+                id: 'details.profileDetails',
+                primary: 'Profile Details',
+                items: [
+                    {
+                        id: 'details.profileDetails.experience',
+                        primary: 'Experience (yrs)',
+                        type: 'NUMBER'
+                    },
+                    {
+                        id: 'details.profileDetails.department',
+                        primary: 'Department',
+                        type: 'TEXT',
+                        possibleValues: [
+                            'Customer Service',
+                            'Engineering',
+                            'Facilities',
+                            'Finance',
+                            'HR',
+                            'IT',
+                            'Sales'
+                        ]
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        id: 'salary',
+        primary: 'Salary',
+        type: 'NUMBER'
+    },
+    { id: 'hireDate', primary: 'Hire Date', type: 'DATE_ONLY' },
+    { id: 'dateOfBirth', primary: 'Date of Birth', type: 'DATE_ONLY' },
+    {
+        id: 'technicalDetails',
+        primary: 'Technical details',
+        items: [
+            {
+                id: 'technicalDetails.shiftStartTime',
+                primary: 'Shift start time',
+                type: 'TIME_ONLY'
+            },
+            {
+                id: 'technicalDetails.shiftEndTime',
+                primary: 'Shift end time',
+                type: 'TIME_ONLY'
+            },
+            {
+                id: 'technicalDetails.lastActivityAt',
+                primary: 'Last activity at',
+                type: 'DATE_TIME'
+            },
+            {
+                id: 'technicalDetails.nextPasswordReset',
+                primary: 'Next password reset',
+                type: 'DATE_TIME'
+            }
+        ]
+    },
+    { id: 'isSeniorCitizen', primary: 'Is Senior Citizen', type: 'BOOLEAN' },
+    { id: 'isRemoteEmployee', primary: 'Is Remote Employee', type: 'BOOLEAN' },
+    {
+        id: 'createOperator',
+        primary: 'Create operator',
+        type: 'TEXT',
+        parameters: [
+            {
+                id: 'currentOperator',
+                primary: 'Current operator'
+            },
+            {
+                id: 'manager',
+                primary: 'Manager'
+            }
+        ],
+        possibleValues: ['Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6', 'Value 7']
+    },
+    {
+        id: 'organization',
+        primary: 'Organization',
+        type: 'TEXT',
+        parameters: [
+            {
+                id: 'currentOrganization',
+                primary: 'Current organization'
+            }
+        ]
+    },
+    {
+        id: 'workgroup',
+        primary: 'Workgroup',
+        type: 'TEXT',
+        parameters: [
+            {
+                id: 'currentWorkgroup',
+                primary: 'Current workgroup'
+            }
+        ],
+        possibleValues: ['Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6', 'Value 7']
+    },
+    {
+        id: 'invalidField',
+        primary: 'Invalid Field',
+        type: 'TEXT',
+        possibleValues: () => {
+            return new Promise((_, reject) => {
+                setTimeout(() => {
+                    reject(new Error());
+                }, 5000);
+            });
+        }
+    }
+];
+export const demoCondition = {
+    AND: [
+        {
+            condition: {
+                lhs: {
+                    field: 'technicalDetails.lastActivityAt'
+                },
+                comparator: 'EQ',
+                rhs: {
+                    value: '2021-08-13T14:30'
+                }
+            }
+        },
+        {
+            NOT: {
+                OR: [
+                    {
+                        condition: {
+                            lhs: { field: 'details.profileDetails.experience' },
+                            comparator: 'GTE',
+                            rhs: { value: 10 }
+                        }
+                    },
+                    {
+                        condition: {
+                            lhs: { field: 'isRemoteEmployee' },
+                            comparator: 'IS_TRUE'
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+};
+export const demoComparators = [
+    { type: 'TEXT', comparators: ['EQ', 'NEQ'] },
+    { type: 'NUMBER', comparators: ['GT', 'GTE', 'LT', 'LTE'] },
+    { type: 'BOOLEAN', comparators: ['IS_TRUE', 'IS_FALSE'] }
+];
+export const demoDateFunctions = {
+    DATE_TIME: [
+        'YEARS',
+        'QUARTERS',
+        'MONTHS',
+        'WEEKS',
+        'DAYS',
+        'HOURS',
+        'MINUTES',
+        'SECONDS',
+        'MONTHS_OF_YEAR',
+        'DAYS_OF_MONTH',
+        'DAYS_OF_WEEK',
+        'HOURS_OF_DAY'
+    ],
+    DATE_ONLY: [
+        'YEARS',
+        'QUARTERS',
+        'MONTHS',
+        'WEEKS',
+        'MONTHS_OF_YEAR',
+        'DAYS_OF_MONTH',
+        'DAYS_OF_WEEK'
+    ]
+};
+//# sourceMappingURL=props.mock.js.map

package/lib/condition-builder/ConditionBuilder/props.mock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.mock.js","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/props.mock.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,UAAU,GAAY;IACjC;QACE,EAAE,EAAE,YAAY;QAChB,OAAO,EAAE,aAAa;QACtB,IAAI,EAAE,MAAM;QACZ,cAAc,EAAE;YACd,kBAAkB;YAClB,aAAa;YACb,YAAY;YACZ,SAAS;YACT,IAAI;YACJ,IAAI;YACJ,SAAS;SACV;KACF;IACD;QACE,EAAE,EAAE,SAAS;QACb,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,mBAAmB;gBACvB,OAAO,EAAE,YAAY;gBACrB,IAAI,EAAE,MAAM;aACb;YACD;gBACE,EAAE,EAAE,kBAAkB;gBACtB,OAAO,EAAE,WAAW;gBACpB,IAAI,EAAE,MAAM;gBACZ,cAAc,EAAE,GAAG,EAAE;oBACnB,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;wBAC3B,UAAU,CAAC,GAAG,EAAE;4BACd,OAAO,CAAC;gCACN,SAAS;gCACT,SAAS;gCACT,SAAS;gCACT,SAAS;gCACT,SAAS;gCACT,SAAS;gCACT,SAAS;6BACV,CAAC,CAAC;wBACL,CAAC,EAAE,IAAI,CAAC,CAAC;oBACX,CAAC,CAAC,CAAC;gBACL,CAAC;aACF;YACD,EAAE,EAAE,EAAE,gBAAgB,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE;YACzD;gBACE,EAAE,EAAE,aAAa;gBACjB,OAAO,EAAE,KAAK;gBACd,IAAI,EAAE,QAAQ;aACf;YACD;gBACE,EAAE,EAAE,wBAAwB;gBAC5B,OAAO,EAAE,iBAAiB;gBAC1B,KAAK,EAAE;oBACL;wBACE,EAAE,EAAE,mCAAmC;wBACvC,OAAO,EAAE,kBAAkB;wBAC3B,IAAI,EAAE,QAAQ;qBACf;oBACD;wBACE,EAAE,EAAE,mCAAmC;wBACvC,OAAO,EAAE,YAAY;wBACrB,IAAI,EAAE,MAAM;wBACZ,cAAc,EAAE;4BACd,kBAAkB;4BAClB,aAAa;4BACb,YAAY;4BACZ,SAAS;4BACT,IAAI;4BACJ,IAAI;4BACJ,OAAO;yBACR;qBACF;iBACF;aACF;SACF;KACF;IACD;QACE,EAAE,EAAE,QAAQ;QACZ,OAAO,EAAE,QAAQ;QACjB,IAAI,EAAE,QAAQ;KACf;IACD,EAAE,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE;IAC3D,EAAE,EAAE,EAAE,aAAa,EAAE,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,WAAW,EAAE;IAClE;QACE,EAAE,EAAE,kBAAkB;QACtB,OAAO,EAAE,mBAAmB;QAC5B,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,iCAAiC;gBACrC,OAAO,EAAE,kBAAkB;gBAC3B,IAAI,EAAE,WAAW;aAClB;YACD;gBACE,EAAE,EAAE,+BAA+B;gBACnC,OAAO,EAAE,gBAAgB;gBACzB,IAAI,EAAE,WAAW;aAClB;YACD;gBACE,EAAE,EAAE,iCAAiC;gBACrC,OAAO,EAAE,kBAAkB;gBAC3B,IAAI,EAAE,WAAW;aAClB;YACD;gBACE,EAAE,EAAE,oCAAoC;gBACxC,OAAO,EAAE,qBAAqB;gBAC9B,IAAI,EAAE,WAAW;aAClB;SACF;KACF;IACD,EAAE,EAAE,EAAE,iBAAiB,EAAE,OAAO,EAAE,mBAAmB,EAAE,IAAI,EAAE,SAAS,EAAE;IACxE,EAAE,EAAE,EAAE,kBAAkB,EAAE,OAAO,EAAE,oBAAoB,EAAE,IAAI,EAAE,SAAS,EAAE;IAC1E;QACE,EAAE,EAAE,gBAAgB;QACpB,OAAO,EAAE,iBAAiB;QAC1B,IAAI,EAAE,MAAM;QACZ,UAAU,EAAE;YACV;gBACE,EAAE,EAAE,iBAAiB;gBACrB,OAAO,EAAE,kBAAkB;aAC5B;YACD;gBACE,EAAE,EAAE,SAAS;gBACb,OAAO,EAAE,SAAS;aACnB;SACF;QACD,cAAc,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;KAC9F;IACD;QACE,EAAE,EAAE,cAAc;QAClB,OAAO,EAAE,cAAc;QACvB,IAAI,EAAE,MAAM;QACZ,UAAU,EAAE;YACV;gBACE,EAAE,EAAE,qBAAqB;gBACzB,OAAO,EAAE,sBAAsB;aAChC;SACF;KACF;IACD;QACE,EAAE,EAAE,WAAW;QACf,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,MAAM;QACZ,UAAU,EAAE;YACV;gBACE,EAAE,EAAE,kBAAkB;gBACtB,OAAO,EAAE,mBAAmB;aAC7B;SACF;QACD,cAAc,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;KAC9F;IACD;QACE,EAAE,EAAE,cAAc;QAClB,OAAO,EAAE,eAAe;QACxB,IAAI,EAAE,MAAM;QACZ,cAAc,EAAE,GAAG,EAAE;YACnB,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE;gBAC/B,UAAU,CAAC,GAAG,EAAE;oBACd,MAAM,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC;gBACtB,CAAC,EAAE,IAAI,CAAC,CAAC;YACX,CAAC,CAAC,CAAC;QACL,CAAC;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,GAAG,EAAE;QACH;YACE,SAAS,EAAE;gBACT,GAAG,EAAE;oBACH,KAAK,EAAE,iCAAiC;iBACzC;gBACD,UAAU,EAAE,IAAI;gBAChB,GAAG,EAAE;oBACH,KAAK,EAAE,kBAAkB;iBAC1B;aACF;SACF;QACD;YACE,GAAG,EAAE;gBACH,EAAE,EAAE;oBACF;wBACE,SAAS,EAAE;4BACT,GAAG,EAAE,EAAE,KAAK,EAAE,mCAAmC,EAAE;4BACnD,UAAU,EAAE,KAAK;4BACjB,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;yBACnB;qBACF;oBACD;wBACE,SAAS,EAAE;4BACT,GAAG,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE;4BAClC,UAAU,EAAE,SAAS;yBACtB;qBACF;iBACF;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAwB;IAClD,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE;IAC5C,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,EAAE;IAC3D,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE;CAC1D,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAwB;IACpD,SAAS,EAAE;QACT,OAAO;QACP,UAAU;QACV,QAAQ;QACR,OAAO;QACP,MAAM;QACN,OAAO;QACP,SAAS;QACT,SAAS;QACT,gBAAgB;QAChB,eAAe;QACf,cAAc;QACd,cAAc;KACf;IACD,SAAS,EAAE;QACT,OAAO;QACP,UAAU;QACV,QAAQ;QACR,OAAO;QACP,gBAAgB;QAChB,eAAe;QACf,cAAc;KACf;CACF,CAAC","sourcesContent":["import {\n  ComparatorsByType,\n  Condition,\n  DateFunctionsByType,\n  Field\n} from '@pega/cosmos-react-condition-builder';\n\nexport const demoFields: Field[] = [\n  {\n    id: 'employeeId',\n    primary: 'Employee ID',\n    type: 'TEXT',\n    possibleValues: [\n      'Customer Service',\n      'Engineering',\n      'Facilities',\n      'Finance',\n      'HR',\n      'IT',\n      ' Sales '\n    ]\n  },\n  {\n    id: 'details',\n    primary: 'Details',\n    items: [\n      {\n        id: 'details.firstName',\n        primary: 'First Name',\n        type: 'TEXT'\n      },\n      {\n        id: 'details.lastName',\n        primary: 'Last Name',\n        type: 'TEXT',\n        possibleValues: () => {\n          return new Promise(resolve => {\n            setTimeout(() => {\n              resolve([\n                'Value 1',\n                'Value 2',\n                'Value 3',\n                'Value 4',\n                'Value 5',\n                'Value 6',\n                'Value 7'\n              ]);\n            }, 5000);\n          });\n        }\n      },\n      { id: 'details.gender', primary: 'Gender', type: 'TEXT' },\n      {\n        id: 'details.age',\n        primary: 'Age',\n        type: 'NUMBER'\n      },\n      {\n        id: 'details.profileDetails',\n        primary: 'Profile Details',\n        items: [\n          {\n            id: 'details.profileDetails.experience',\n            primary: 'Experience (yrs)',\n            type: 'NUMBER'\n          },\n          {\n            id: 'details.profileDetails.department',\n            primary: 'Department',\n            type: 'TEXT',\n            possibleValues: [\n              'Customer Service',\n              'Engineering',\n              'Facilities',\n              'Finance',\n              'HR',\n              'IT',\n              'Sales'\n            ]\n          }\n        ]\n      }\n    ]\n  },\n  {\n    id: 'salary',\n    primary: 'Salary',\n    type: 'NUMBER'\n  },\n  { id: 'hireDate', primary: 'Hire Date', type: 'DATE_ONLY' },\n  { id: 'dateOfBirth', primary: 'Date of Birth', type: 'DATE_ONLY' },\n  {\n    id: 'technicalDetails',\n    primary: 'Technical details',\n    items: [\n      {\n        id: 'technicalDetails.shiftStartTime',\n        primary: 'Shift start time',\n        type: 'TIME_ONLY'\n      },\n      {\n        id: 'technicalDetails.shiftEndTime',\n        primary: 'Shift end time',\n        type: 'TIME_ONLY'\n      },\n      {\n        id: 'technicalDetails.lastActivityAt',\n        primary: 'Last activity at',\n        type: 'DATE_TIME'\n      },\n      {\n        id: 'technicalDetails.nextPasswordReset',\n        primary: 'Next password reset',\n        type: 'DATE_TIME'\n      }\n    ]\n  },\n  { id: 'isSeniorCitizen', primary: 'Is Senior Citizen', type: 'BOOLEAN' },\n  { id: 'isRemoteEmployee', primary: 'Is Remote Employee', type: 'BOOLEAN' },\n  {\n    id: 'createOperator',\n    primary: 'Create operator',\n    type: 'TEXT',\n    parameters: [\n      {\n        id: 'currentOperator',\n        primary: 'Current operator'\n      },\n      {\n        id: 'manager',\n        primary: 'Manager'\n      }\n    ],\n    possibleValues: ['Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6', 'Value 7']\n  },\n  {\n    id: 'organization',\n    primary: 'Organization',\n    type: 'TEXT',\n    parameters: [\n      {\n        id: 'currentOrganization',\n        primary: 'Current organization'\n      }\n    ]\n  },\n  {\n    id: 'workgroup',\n    primary: 'Workgroup',\n    type: 'TEXT',\n    parameters: [\n      {\n        id: 'currentWorkgroup',\n        primary: 'Current workgroup'\n      }\n    ],\n    possibleValues: ['Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6', 'Value 7']\n  },\n  {\n    id: 'invalidField',\n    primary: 'Invalid Field',\n    type: 'TEXT',\n    possibleValues: () => {\n      return new Promise((_, reject) => {\n        setTimeout(() => {\n          reject(new Error());\n        }, 5000);\n      });\n    }\n  }\n];\n\nexport const demoCondition: Condition = {\n  AND: [\n    {\n      condition: {\n        lhs: {\n          field: 'technicalDetails.lastActivityAt'\n        },\n        comparator: 'EQ',\n        rhs: {\n          value: '2021-08-13T14:30'\n        }\n      }\n    },\n    {\n      NOT: {\n        OR: [\n          {\n            condition: {\n              lhs: { field: 'details.profileDetails.experience' },\n              comparator: 'GTE',\n              rhs: { value: 10 }\n            }\n          },\n          {\n            condition: {\n              lhs: { field: 'isRemoteEmployee' },\n              comparator: 'IS_TRUE'\n            }\n          }\n        ]\n      }\n    }\n  ]\n};\n\nexport const demoComparators: ComparatorsByType[] = [\n  { type: 'TEXT', comparators: ['EQ', 'NEQ'] },\n  { type: 'NUMBER', comparators: ['GT', 'GTE', 'LT', 'LTE'] },\n  { type: 'BOOLEAN', comparators: ['IS_TRUE', 'IS_FALSE'] }\n];\n\nexport const demoDateFunctions: DateFunctionsByType = {\n  DATE_TIME: [\n    'YEARS',\n    'QUARTERS',\n    'MONTHS',\n    'WEEKS',\n    'DAYS',\n    'HOURS',\n    'MINUTES',\n    'SECONDS',\n    'MONTHS_OF_YEAR',\n    'DAYS_OF_MONTH',\n    'DAYS_OF_WEEK',\n    'HOURS_OF_DAY'\n  ],\n  DATE_ONLY: [\n    'YEARS',\n    'QUARTERS',\n    'MONTHS',\n    'WEEKS',\n    'MONTHS_OF_YEAR',\n    'DAYS_OF_MONTH',\n    'DAYS_OF_WEEK'\n  ]\n};\n"]}

package/lib/condition-builder/ConditionInput/ConditionInput.stories.d.ts

@@ -0,0 +1,10 @@
+import type { StoryFn } from '@storybook/react';
+import type { ConditionInputMode, ConditionFieldType } from '@pega/cosmos-react-condition-builder';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+interface ConditionInputStoryProps {
+    fieldType: ConditionFieldType;
+    mode: ConditionInputMode;
+}
+export declare const ConditionInputDemo: StoryFn<ConditionInputStoryProps>;
+//# sourceMappingURL=ConditionInput.stories.d.ts.map

package/lib/condition-builder/ConditionInput/ConditionInput.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionInput.stories.d.ts","sourceRoot":"","sources":["../../../src/condition-builder/ConditionInput/ConditionInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EACV,kBAAkB,EAElB,kBAAkB,EACnB,MAAM,sCAAsC,CAAC;;AAE9C,wBAGU;AAEV,UAAU,wBAAwB;IAChC,SAAS,EAAE,kBAAkB,CAAC;IAC9B,IAAI,EAAE,kBAAkB,CAAC;CAC1B;AAED,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,wBAAwB,CAYhE,CAAC"}

package/lib/condition-builder/ConditionInput/ConditionInput.stories.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ConditionInput } from '@pega/cosmos-react-condition-builder';
+export default {
+    title: 'Condition Builder/ConditionInput',
+    component: ConditionInput
+};
+export const ConditionInputDemo = (args) => {
+    const [condition, setCondition] = useState();
+    const field = {
+        name: 'Field Value',
+        type: args.fieldType
+    };
+    return (_jsx(ConditionInput, { field: field, mode: args.mode, condition: condition, onChange: setCondition }));
+};
+ConditionInputDemo.args = {
+    fieldType: 'TEXT',
+    mode: 'advanced'
+};
+ConditionInputDemo.argTypes = {
+    fieldType: {
+        options: [
+            'TEXT',
+            'INTEGER',
+            'BOOLEAN',
+            'DECIMAL',
+            'EMAIL',
+            'URL',
+            'PERCENTAGE',
+            'CURRENCY',
+            'PHONE',
+            'DATE_ONLY',
+            'TIME_ONLY',
+            'DATE_TIME',
+            'PICKLIST'
+        ],
+        control: { type: 'select' }
+    },
+    mode: { options: ['default', 'advanced'], control: { type: 'select' } }
+};
+//# sourceMappingURL=ConditionInput.stories.js.map

package/lib/condition-builder/ConditionInput/ConditionInput.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionInput.stories.js","sourceRoot":"","sources":["../../../src/condition-builder/ConditionInput/ConditionInput.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAOtE,eAAe;IACb,KAAK,EAAE,kCAAkC;IACzC,SAAS,EAAE,cAAc;CAClB,CAAC;AAOV,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CACnE,IAA8B,EAC9B,EAAE;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAA6B,CAAC;IACxE,MAAM,KAAK,GAAG;QACZ,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,IAAI,CAAC,SAAS;KACrB,CAAC;IAEF,OAAO,CACL,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,GAAI,CAChG,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,UAAU;CACjB,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,SAAS,EAAE;QACT,OAAO,EAAE;YACP,MAAM;YACN,SAAS;YACT,SAAS;YACT,SAAS;YACT,OAAO;YACP,KAAK;YACL,YAAY;YACZ,UAAU;YACV,OAAO;YACP,WAAW;YACX,WAAW;YACX,WAAW;YACX,UAAU;SACX;QACD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACxE,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { ConditionInput } from '@pega/cosmos-react-condition-builder';\nimport type {\n  ConditionInputMode,\n  LeafCondition,\n  ConditionFieldType\n} from '@pega/cosmos-react-condition-builder';\n\nexport default {\n  title: 'Condition Builder/ConditionInput',\n  component: ConditionInput\n} as Meta;\n\ninterface ConditionInputStoryProps {\n  fieldType: ConditionFieldType;\n  mode: ConditionInputMode;\n}\n\nexport const ConditionInputDemo: StoryFn<ConditionInputStoryProps> = (\n  args: ConditionInputStoryProps\n) => {\n  const [condition, setCondition] = useState<LeafCondition | undefined>();\n  const field = {\n    name: 'Field Value',\n    type: args.fieldType\n  };\n\n  return (\n    <ConditionInput field={field} mode={args.mode} condition={condition} onChange={setCondition} />\n  );\n};\n\nConditionInputDemo.args = {\n  fieldType: 'TEXT',\n  mode: 'advanced'\n};\n\nConditionInputDemo.argTypes = {\n  fieldType: {\n    options: [\n      'TEXT',\n      'INTEGER',\n      'BOOLEAN',\n      'DECIMAL',\n      'EMAIL',\n      'URL',\n      'PERCENTAGE',\n      'CURRENCY',\n      'PHONE',\n      'DATE_ONLY',\n      'TIME_ONLY',\n      'DATE_TIME',\n      'PICKLIST'\n    ],\n    control: { type: 'select' }\n  },\n  mode: { options: ['default', 'advanced'], control: { type: 'select' } }\n};\n"]}

package/lib/condition-builder/PromotedFilters/PromotedFilters.mocks.d.ts

@@ -0,0 +1,4 @@
+import { Condition, PromotedFiltersProps } from '@pega/cosmos-react-condition-builder';
+export declare const demoCondition: Condition;
+export declare const demoFilters: PromotedFiltersProps['filters'];
+//# sourceMappingURL=PromotedFilters.mocks.d.ts.map

package/lib/condition-builder/PromotedFilters/PromotedFilters.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromotedFilters.mocks.d.ts","sourceRoot":"","sources":["../../../src/condition-builder/PromotedFilters/PromotedFilters.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAEvF,eAAO,MAAM,aAAa,EAAE,SAoB3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,oBAAoB,CAAC,SAAS,CAmNvD,CAAC"}