@pega/cosmos-react-demos 3.0.0-dev.3.0 → 3.0.0-dev.30.0

package/jsx/build/DynamicContentEditor/DynamicContentEditor.stories.jsx

@@ -1,4 +1,5 @@
 import { useRef, useState, useCallback } from 'react';
+import { action } from '@storybook/addon-actions';
 import { Button, Card, CardContent, CardFooter, Flex, TextArea, useAutoResize, useConsolidatedRef, useI18n } from '@pega/cosmos-react-core';
 import { DynamicContentEditor } from '@pega/cosmos-react-build';
 import FieldSelector from './FieldSelector';
@@ -6,9 +7,44 @@ export default {
     title: 'Build/DynamicContentEditor',
     component: DynamicContentEditor
 };
-export const DynamicContentEditorDemo = () => {
+export const DynamicContentEditorDemo = (args) => {
     const [html, setHtml] = useState('<p>Hi <pega-reference role="button" contenteditable="false" data-rule-type="field" data-rule-id="CustomerName">CustomerName</pega-reference><p>please check this <a href="https://google.com">link</a></p></p>');
     const rteRef = useRef(null);
+    const fieldItems = [
+        {
+            id: 'CustomerName',
+            primary: 'CustomerName',
+            items: [
+                {
+                    id: '1-2',
+                    primary: 'Locale'
+                },
+                {
+                    id: '1-1',
+                    primary: 'Response Type',
+                    items: [
+                        {
+                            id: 'group-1-1-b',
+                            label: 'B',
+                            items: [{ id: '1-1-1', primary: 'Reply to' }]
+                        },
+                        { id: '1-1-4', primary: 'Forward to' }
+                    ]
+                }
+            ]
+        },
+        { id: 'Address', primary: 'Address' },
+        { id: 'Locality', primary: 'Locality' },
+        { id: 'Country', primary: 'Country' },
+        { id: 'Region', primary: 'Region' },
+        { id: 'Occupation', primary: 'Occupation' },
+        { id: 'City', primary: 'City' },
+        { id: 'Colony', primary: 'Colony' },
+        { id: 'Lastname', primary: 'Lastname' },
+        { id: 'Preference', primary: 'Preference' },
+        { id: 'Currency', primary: 'Currency' },
+        { id: 'Iconname', primary: 'Iconname' }
+    ];
     const onImageAdded = (image, id) => {
         const src = URL.createObjectURL(image);
         rteRef.current?.appendImage({ src, alt: image.name }, id);
@@ -44,6 +80,7 @@ export const DynamicContentEditorDemo = () => {
             { id: 'Occupation', text: 'Occupation' }
         ]} key={selectedField?.id} label='Field' updateSelection={updateSelection} placeholder={t('select')} defaultSelection={selectedField}/>
     </Flex>);
+    const onActiveFieldChange = (field) => setSelectedField(field);
     return (<Flex container={{ direction: 'column', gap: 2 }}>
       <Card>
         <CardContent>
@@ -55,7 +92,7 @@ export const DynamicContentEditorDemo = () => {
           </Button>
         </CardFooter>
       </Card>
-      <DynamicContentEditor defaultValue={html} onImageAdded={onImageAdded} ref={rteRef} label='Dynamic content editor' toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']} form={{ onSubmit, dynamicContentPicker }} onActiveFieldChange={(field) => setSelectedField(field)}/>
+      <DynamicContentEditor defaultValue={args.defaultValue || html} onImageAdded={onImageAdded} ref={rteRef} label='Dynamic content editor' toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']} form={args.form || { onSubmit, dynamicContentPicker }} onActiveFieldChange={args.onActiveFieldChange || onActiveFieldChange} fieldItems={args.fieldItems || fieldItems} onBlur={action('Editor onBlur')}/>
       <Flex container={{ gap: 1 }}>
         <Button onClick={() => handleShowHtml()}>Show HTML</Button>
       </Flex>

package/jsx/build/DynamicContentEditor/DynamicContentEditor.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicContentEditor.stories.jsx","sourceRoot":"","sources":["../../../src/build/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useRef, useState, useCallback } from 'react';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardFooter,\n  Flex,\n  TextArea,\n  useAutoResize,\n  useConsolidatedRef,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { EditorState } from '@pega/cosmos-react-rte';\nimport { DynamicContentEditor, ItemType } from '@pega/cosmos-react-build';\n\nimport FieldSelector, { FieldSelectorProps } from './FieldSelector';\n\nexport default {\n  title: 'Build/DynamicContentEditor',\n  component: DynamicContentEditor\n} as Meta;\n\nexport const DynamicContentEditorDemo = () => {\n  const [html, setHtml] = useState(\n    '<p>Hi <pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=\"CustomerName\">CustomerName</pega-reference><p>please check this <a href=\"https://google.com\">link</a></p></p>'\n  );\n  const rteRef = useRef<EditorState>(null);\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    rteRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n  const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n  const ref = useRef(null);\n  const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n  const handleShowHtml = () => {\n    resizeTextArea();\n    setHtml(rteRef.current?.getHtml() || '');\n  };\n  const t = useI18n();\n  const [selectedField, setSelectedField] = useState<ItemType>({\n    id: '',\n    text: ''\n  });\n\n  const updateSelection: FieldSelectorProps['updateSelection'] = (selectedItem: ItemType) => {\n    setSelectedField(selectedItem);\n  };\n  const onSubmit = useCallback(\n    (insertField: (selectedField: ItemType) => void) => {\n      insertField(selectedField);\n    },\n    [selectedField]\n  );\n\n  const dynamicContentPicker = (\n    <Flex\n      container={{\n        gap: 2,\n        direction: 'column'\n      }}\n    >\n      <FieldSelector\n        itemList={[\n          { id: 'CustomerName', text: 'CustomerName' },\n          { id: 'Address', text: 'Address' },\n          { id: 'Locality', text: 'Locality' },\n          { id: 'Country', text: 'Country' },\n          { id: 'Region', text: 'Region' },\n          { id: 'Occupation', text: 'Occupation' }\n        ]}\n        key={selectedField?.id}\n        label='Field'\n        updateSelection={updateSelection}\n        placeholder={t('select')}\n        defaultSelection={selectedField}\n      />\n    </Flex>\n  );\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Card>\n        <CardContent>\n          <TextArea\n            value={html}\n            onChange={e => setHtml(e.target.value)}\n            autoResize\n            ref={consolidatedRef}\n          />\n        </CardContent>\n        <CardFooter>\n          <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n            Overwrite RTE with new HTML\n          </Button>\n        </CardFooter>\n      </Card>\n      <DynamicContentEditor\n        defaultValue={html}\n        onImageAdded={onImageAdded}\n        ref={rteRef}\n        label='Dynamic content editor'\n        toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n        form={{ onSubmit, dynamicContentPicker }}\n        onActiveFieldChange={(field: ItemType) => setSelectedField(field)}\n      />\n      <Flex container={{ gap: 1 }}>\n        <Button onClick={() => handleShowHtml()}>Show HTML</Button>\n      </Flex>\n    </Flex>\n  );\n};\n"]}
+{"version":3,"file":"DynamicContentEditor.stories.jsx","sourceRoot":"","sources":["../../../src/build/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useRef, useState, useCallback } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardFooter,\n  Flex,\n  TextArea,\n  useAutoResize,\n  useConsolidatedRef,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { EditorState } from '@pega/cosmos-react-rte';\nimport {\n  DynamicContentEditor,\n  DynamicContentEditorProps,\n  ItemType\n} from '@pega/cosmos-react-build';\n\nimport FieldSelector, { FieldSelectorProps } from './FieldSelector';\n\nexport default {\n  title: 'Build/DynamicContentEditor',\n  component: DynamicContentEditor\n} as Meta;\n\nexport interface DynamicContentEditorStoryProps extends DynamicContentEditorProps {}\n\nexport const DynamicContentEditorDemo: Story<DynamicContentEditorStoryProps> = (\n  args: DynamicContentEditorStoryProps\n) => {\n  const [html, setHtml] = useState(\n    '<p>Hi <pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=\"CustomerName\">CustomerName</pega-reference><p>please check this <a href=\"https://google.com\">link</a></p></p>'\n  );\n  const rteRef = useRef<EditorState>(null);\n\n  const fieldItems: DynamicContentEditorProps['fieldItems'] = [\n    {\n      id: 'CustomerName',\n      primary: 'CustomerName',\n      items: [\n        {\n          id: '1-2',\n          primary: 'Locale'\n        },\n        {\n          id: '1-1',\n          primary: 'Response Type',\n          items: [\n            {\n              id: 'group-1-1-b',\n              label: 'B',\n              items: [{ id: '1-1-1', primary: 'Reply to' }]\n            },\n            { id: '1-1-4', primary: 'Forward to' }\n          ]\n        }\n      ]\n    },\n    { id: 'Address', primary: 'Address' },\n    { id: 'Locality', primary: 'Locality' },\n    { id: 'Country', primary: 'Country' },\n    { id: 'Region', primary: 'Region' },\n    { id: 'Occupation', primary: 'Occupation' },\n    { id: 'City', primary: 'City' },\n    { id: 'Colony', primary: 'Colony' },\n    { id: 'Lastname', primary: 'Lastname' },\n    { id: 'Preference', primary: 'Preference' },\n    { id: 'Currency', primary: 'Currency' },\n    { id: 'Iconname', primary: 'Iconname' }\n  ];\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    rteRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n  const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n  const ref = useRef(null);\n  const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n  const handleShowHtml = () => {\n    resizeTextArea();\n    setHtml(rteRef.current?.getHtml() || '');\n  };\n  const t = useI18n();\n  const [selectedField, setSelectedField] = useState<ItemType>({\n    id: '',\n    text: ''\n  });\n\n  const updateSelection: FieldSelectorProps['updateSelection'] = (selectedItem: ItemType) => {\n    setSelectedField(selectedItem);\n  };\n  const onSubmit = useCallback(\n    (insertField: (selectedField: ItemType) => void) => {\n      insertField(selectedField);\n    },\n    [selectedField]\n  );\n\n  const dynamicContentPicker = (\n    <Flex\n      container={{\n        gap: 2,\n        direction: 'column'\n      }}\n    >\n      <FieldSelector\n        itemList={[\n          { id: 'CustomerName', text: 'CustomerName' },\n          { id: 'Address', text: 'Address' },\n          { id: 'Locality', text: 'Locality' },\n          { id: 'Country', text: 'Country' },\n          { id: 'Region', text: 'Region' },\n          { id: 'Occupation', text: 'Occupation' }\n        ]}\n        key={selectedField?.id}\n        label='Field'\n        updateSelection={updateSelection}\n        placeholder={t('select')}\n        defaultSelection={selectedField}\n      />\n    </Flex>\n  );\n  const onActiveFieldChange = (field: ItemType) => setSelectedField(field);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Card>\n        <CardContent>\n          <TextArea\n            value={html}\n            onChange={e => setHtml(e.target.value)}\n            autoResize\n            ref={consolidatedRef}\n          />\n        </CardContent>\n        <CardFooter>\n          <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n            Overwrite RTE with new HTML\n          </Button>\n        </CardFooter>\n      </Card>\n      <DynamicContentEditor\n        defaultValue={args.defaultValue || html}\n        onImageAdded={onImageAdded}\n        ref={rteRef}\n        label='Dynamic content editor'\n        toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n        form={args.form || { onSubmit, dynamicContentPicker }}\n        onActiveFieldChange={args.onActiveFieldChange || onActiveFieldChange}\n        fieldItems={args.fieldItems || fieldItems}\n        onBlur={action('Editor onBlur')}\n      />\n      <Flex container={{ gap: 1 }}>\n        <Button onClick={() => handleShowHtml()}>Show HTML</Button>\n      </Flex>\n    </Flex>\n  );\n};\n"]}

package/jsx/build/ExpressionBuilder/ExpressionBuilder.mocks.d.ts

@@ -0,0 +1,60 @@
+import { MenuProps } from '@pega/cosmos-react-core';
+export declare const getFilterRegex: (inputValue: string) => RegExp;
+export declare const errors = "Error message 1. Some unrealistic error message. Server unreachable. Check your network connection and try again";
+export declare const items: ({
+    id: string;
+    primary: string;
+    type: string;
+    expression: string;
+    details: {
+        primary: {
+            field: string;
+            value: string;
+        }[];
+        output: {
+            field: string;
+            value: string;
+        }[];
+        input: {
+            id: string;
+            field: string;
+            type: string;
+        }[];
+    };
+} | {
+    id: string;
+    primary: string;
+    type: string;
+    expression: string;
+    details: {
+        primary: {
+            field: string;
+            value: string;
+        }[];
+        output: {
+            field: string;
+            value: string;
+        }[];
+        input?: undefined;
+    };
+})[];
+export declare const filterCategories: MenuProps['items'];
+export declare const StyledExpressionBuilderDemo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const primaryDetails: {
+    id: string;
+    name: string;
+    value: string;
+}[];
+export declare const suggestedFields: {
+    label: string;
+    value: string;
+}[];
+export declare const suggestedFunctions: {
+    label: string;
+    value: string;
+}[];
+export declare const mockEmbeddedProperties: {
+    label: string;
+    value: string;
+}[];
+//# sourceMappingURL=ExpressionBuilder.mocks.d.ts.map

package/jsx/build/ExpressionBuilder/ExpressionBuilder.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpressionBuilder.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/ExpressionBuilder/ExpressionBuilder.mocks.ts"],"names":[],"mappings":"AAIA,OAAO,EAAa,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAE/D,eAAO,MAAM,cAAc,eAAgB,MAAM,WAEhD,CAAC;AAEF,eAAO,MAAM,MAAM,qHACiG,CAAC;AAErH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA0ZjB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,SAAS,CAAC,OAAO,CA+B/C,CAAC;AAEF,eAAO,MAAM,2BAA2B,yGAMtC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;GAgB1B,CAAC;AAEF,eAAO,MAAM,eAAe;;;GAyB3B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;GAa9B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;GASlC,CAAC"}

package/jsx/build/ExpressionBuilder/ExpressionBuilder.mocks.js

@@ -0,0 +1,523 @@
+import styled, { css } from 'styled-components';
+import { createUID } from '@pega/cosmos-react-core';
+export const getFilterRegex = (inputValue) => {
+    return new RegExp(`${inputValue.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&')}`, 'i');
+};
+export const errors = 'Error message 1. Some unrealistic error message. Server unreachable. Check your network connection and try again';
+export const items = [
+    {
+        id: createUID(),
+        primary: 'Validate loan value',
+        type: 'Decision',
+        expression: '@validateLoanValue()',
+        details: {
+            primary: [
+                {
+                    field: 'Description',
+                    value: 'Function to validate loan value through simple interest or compound interest based on user choice'
+                },
+                {
+                    field: 'Scope',
+                    value: 'CCDBankLoan'
+                },
+                {
+                    field: 'Namespace',
+                    value: 'px'
+                }
+            ],
+            output: [
+                {
+                    field: 'isValid',
+                    value: 'Boolean'
+                }
+            ],
+            input: [
+                {
+                    id: 'accountNumber',
+                    field: 'Account number',
+                    type: 'text'
+                },
+                {
+                    id: 'term',
+                    field: 'Term in years',
+                    type: 'number'
+                },
+                {
+                    id: 'accountType',
+                    field: 'Account type',
+                    type: 'text'
+                }
+            ]
+        }
+    },
+    {
+        id: createUID(),
+        primary: 'Loan amount under 100k',
+        type: 'When',
+        expression: '@isLoanAmountUnder100k()',
+        details: {
+            primary: [
+                {
+                    field: 'Scope',
+                    value: 'CCDBankLoan'
+                },
+                {
+                    field: 'Namespace',
+                    value: 'px'
+                }
+            ],
+            output: [
+                {
+                    field: 'isUnder100k',
+                    value: 'Boolean'
+                }
+            ],
+            input: [
+                {
+                    id: 'accountNumber',
+                    field: 'Account number',
+                    type: 'text'
+                }
+            ]
+        }
+    },
+    {
+        id: createUID(),
+        primary: 'Loan number',
+        type: 'Field',
+        expression: '.loanNumber',
+        details: {
+            primary: [
+                {
+                    field: 'Description',
+                    value: 'Loan account number of current customer'
+                },
+                {
+                    field: 'Scope',
+                    value: 'CCDBankLoan'
+                },
+                {
+                    field: 'Namespace',
+                    value: 'px'
+                }
+            ],
+            output: []
+        }
+    },
+    {
+        id: createUID(),
+        primary: 'Customer name',
+        type: 'Field',
+        expression: '.customerName',
+        details: {
+            primary: [
+                {
+                    field: 'Description',
+                    value: 'Fullname of current customer'
+                },
+                {
+                    field: 'Scope',
+                    value: 'CCDBankLoan'
+                },
+                {
+                    field: 'Namespace',
+                    value: 'px'
+                }
+            ],
+            output: []
+        }
+    },
+    {
+        id: createUID(),
+        primary: 'Max',
+        type: 'Function',
+        expression: '@max()',
+        details: {
+            primary: [
+                {
+                    field: 'Description',
+                    value: 'Returns max of two numbers'
+                },
+                {
+                    field: 'Scope',
+                    value: 'base'
+                },
+                {
+                    field: 'Namespace',
+                    value: 'py'
+                }
+            ],
+            output: [
+                {
+                    field: 'max',
+                    value: 'Number'
+                }
+            ],
+            input: [
+                {
+                    id: 'param1',
+                    field: 'Param 1',
+                    type: 'number'
+                },
+                {
+                    id: 'param2',
+                    field: 'Param 2',
+                    type: 'number'
+                }
+            ]
+        }
+    },
+    {
+        id: createUID(),
+        primary: 'Min',
+        type: 'Function',
+        expression: '@min()',
+        details: {
+            primary: [
+                {
+                    field: 'Description',
+                    value: 'Return min of two numbers'
+                },
+                {
+                    field: 'Scope',
+                    value: 'base'
+                },
+                {
+                    field: 'Namespace',
+                    value: 'py'
+                }
+            ],
+            output: [
+                {
+                    field: 'min',
+                    value: 'Number'
+                }
+            ],
+            input: [
+                {
+                    id: 'param1',
+                    field: 'Param 1',
+                    type: 'number'
+                },
+                {
+                    id: 'param2',
+                    field: 'Param 2',
+                    type: 'number'
+                }
+            ]
+        }
+    },
+    {
+        id: createUID(),
+        primary: 'Sum',
+        type: 'Function',
+        expression: '@sum()',
+        details: {
+            primary: [
+                {
+                    field: 'Description',
+                    value: 'Return sum of two numbers'
+                },
+                {
+                    field: 'Scope',
+                    value: 'base'
+                },
+                {
+                    field: 'Namespace',
+                    value: 'py'
+                }
+            ],
+            output: [
+                {
+                    field: 'sum',
+                    value: 'Number'
+                }
+            ],
+            input: [
+                {
+                    id: 'param1',
+                    field: 'Param 1',
+                    type: 'number'
+                },
+                {
+                    id: 'param2',
+                    field: 'Param 2',
+                    type: 'number'
+                }
+            ]
+        }
+    },
+    {
+        id: createUID(),
+        primary: 'Absolute',
+        type: 'Function',
+        expression: '@abs()',
+        details: {
+            primary: [
+                {
+                    field: 'Description',
+                    value: 'Return absolute value of a number'
+                },
+                {
+                    field: 'Scope',
+                    value: 'base'
+                },
+                {
+                    field: 'Namespace',
+                    value: 'py'
+                }
+            ],
+            output: [
+                {
+                    field: 'abs',
+                    value: 'Number'
+                }
+            ],
+            input: [
+                {
+                    id: 'param1',
+                    field: 'Param 1',
+                    type: 'number'
+                }
+            ]
+        }
+    },
+    {
+        id: createUID(),
+        primary: 'Square root',
+        type: 'Function',
+        expression: '@sqrt()',
+        details: {
+            primary: [
+                {
+                    field: 'Description',
+                    value: 'Return square root of a number'
+                },
+                {
+                    field: 'Scope',
+                    value: 'base'
+                },
+                {
+                    field: 'Namespace',
+                    value: 'py'
+                }
+            ],
+            output: [
+                {
+                    field: 'squareRoot',
+                    value: 'Number'
+                }
+            ],
+            input: [
+                {
+                    id: 'param1',
+                    field: 'Param 1',
+                    type: 'number'
+                }
+            ]
+        }
+    },
+    {
+        id: createUID(),
+        primary: 'Average',
+        type: 'Function',
+        expression: '@average()',
+        details: {
+            primary: [
+                {
+                    field: 'Description',
+                    value: 'Return average value of two number'
+                },
+                {
+                    field: 'Scope',
+                    value: 'base'
+                },
+                {
+                    field: 'Namespace',
+                    value: 'py'
+                }
+            ],
+            output: [
+                {
+                    field: 'average',
+                    value: 'Number'
+                }
+            ],
+            input: [
+                {
+                    id: 'param1',
+                    field: 'Param 1',
+                    type: 'number'
+                },
+                {
+                    id: 'param2',
+                    field: 'Param 2',
+                    type: 'number'
+                }
+            ]
+        }
+    },
+    {
+        id: createUID(),
+        primary: 'Is the current browser Firefox',
+        type: 'When',
+        expression: '@isFirefox()',
+        details: {
+            primary: [
+                {
+                    field: 'Description',
+                    value: 'Return true if the current browser is Firefox'
+                },
+                {
+                    field: 'Scope',
+                    value: 'base'
+                },
+                {
+                    field: 'Namespace',
+                    value: 'py'
+                }
+            ],
+            output: [
+                {
+                    field: 'isFirefox',
+                    value: 'Boolean'
+                }
+            ]
+        }
+    },
+    {
+        id: createUID(),
+        primary: 'Is the current browser Internet Explorer',
+        type: 'When',
+        expression: '@isIE()',
+        details: {
+            primary: [
+                {
+                    field: 'Description',
+                    value: 'Return true if the current browser is IE'
+                },
+                {
+                    field: 'Scope',
+                    value: 'base'
+                },
+                {
+                    field: 'Namespace',
+                    value: 'py'
+                }
+            ],
+            output: [
+                {
+                    field: 'isIE',
+                    value: 'Boolean'
+                }
+            ]
+        }
+    }
+];
+export const filterCategories = [
+    {
+        id: 'item_0',
+        primary: 'All',
+        selected: true
+    },
+    {
+        id: 'item_1',
+        primary: 'Automation',
+        selected: false
+    },
+    {
+        id: 'item_2',
+        primary: 'Configuration',
+        selected: false
+    },
+    {
+        id: 'item_3',
+        primary: 'Decision',
+        selected: false
+    },
+    {
+        id: 'item_4',
+        primary: 'Data page',
+        selected: false
+    },
+    {
+        id: 'item_5',
+        primary: 'Function',
+        selected: false
+    }
+];
+export const StyledExpressionBuilderDemo = styled.div(() => {
+    return css `
+    max-width: 95%;
+    height: 80vh;
+    position: relative;
+  `;
+});
+export const primaryDetails = [
+    {
+        id: 'desc',
+        name: 'Description',
+        value: 'Send email to recipients'
+    },
+    {
+        id: 'scope',
+        name: 'Scope',
+        value: 'Email'
+    },
+    {
+        id: 'namespace',
+        name: 'Namespace',
+        value: 'px'
+    }
+];
+export const suggestedFields = [
+    {
+        label: 'field1',
+        value: '.field1'
+    },
+    {
+        label: 'field2',
+        value: '.field2'
+    },
+    {
+        label: 'field3',
+        value: '.field3'
+    },
+    {
+        label: 'somepage',
+        value: '.somePage'
+    },
+    {
+        label: 'property1',
+        value: '.property1'
+    },
+    {
+        label: 'property2',
+        value: '.property2'
+    }
+];
+export const suggestedFunctions = [
+    {
+        label: 'validateLoanValue',
+        value: '@validateLoanValue()'
+    },
+    {
+        label: 'max',
+        value: '@max()'
+    },
+    {
+        label: 'min',
+        value: '@min()'
+    }
+];
+export const mockEmbeddedProperties = [
+    {
+        label: 'pagelist1',
+        value: '.pageList1'
+    },
+    {
+        label: 'pagelist2',
+        value: '.pageList2'
+    }
+];
+//# sourceMappingURL=ExpressionBuilder.mocks.js.map