@zealicsolutions/web-ui 0.3.16 → 0.3.18

package/dist/cjs/src/containers/FormStepContainer.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+import { FormStepContainerProps } from 'containers';
+export declare type StepContainerProps = PropsWithChildren<Partial<FormStepContainerProps>>;
+export declare const FormStepContainer: ({ formStepName, order, conditionConfig, children, }: StepContainerProps) => JSX.Element;

package/dist/cjs/src/containers/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useCheckCondition } from './useCheckCondition';

package/dist/cjs/src/containers/hooks/useCheckCondition.d.ts

@@ -0,0 +1,6 @@
+import { ConditionConfig } from 'containers/types/types';
+import { AnyObject } from 'typescript';
+/**
+ * @attention This hook needs to be used inside of the form container for the form fields
+ */
+export declare const useCheckCondition: (config?: ConditionConfig, formData?: AnyObject) => boolean;

package/dist/cjs/src/containers/hooks/useCheckCondition.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/src/containers/mock-data.d.ts

@@ -2,3 +2,4 @@ import { ContainerComponentProps } from 'containers';
 export declare const sliderContainerProps: ContainerComponentProps;
 export declare const formContainerProps: ContainerComponentProps;
 export declare const columnContainerProps: ContainerComponentProps;
+export declare const formBuilderData: ContainerComponentProps;

package/dist/cjs/src/containers/styles.d.ts

@@ -5,8 +5,7 @@ export declare const ContainerWrapper: import("styled-components").StyledCompone
         scrollBehaviour: import("containers/types/types").ContainerScrollBehaviourType;
         cornerRadius: number;
         styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
-        formProps: {
-            mode: keyof import("react-hook-form").ValidationMode;
-        };
+        formProps: import("containers/types/types").FormContainerProps;
+        formStepProps: import("containers/types/types").FormStepContainerProps;
     }> | undefined;
 }, never>;

package/dist/cjs/src/containers/types/moleculeTypes.d.ts

@@ -1,9 +1,9 @@
 import { SelectOption } from 'atoms';
 import { AdditionalTabContainerProps, ButtonProps, CheckboxFieldProps, ImageProps, InputFieldProps, RadioButtonFieldProps, SelectFieldProps, TabGroupProps, TextMoleculeProps } from 'molecules';
-import { UseFormReturn } from 'react-hook-form';
 import { CSSProperties } from 'styled-components';
 import type { AnyObject, Nullable, StrictUnion } from 'typescript';
-import { ContainerComponentProps } from './types';
+import { ConditionConfig, ContainerComponentProps } from './types';
+import { UseFormReturn } from 'react-hook-form';
 export declare type ActionTypes = 'link' | 'popup' | 'drawer' | 'download' | 'submit' | 'reset' | 'destroy';
 export declare type DownloadFile = {
     url: string;
@@ -35,7 +35,7 @@ export declare type ImageAttributes = {
 export interface TextAttributes {
     id?: string;
     attributeType: 'text';
-    isRichText: boolean;
+    isRichText?: boolean;
     text: string;
 }
 export interface VideoAttributes {
@@ -68,6 +68,19 @@ export interface IterableAttributes {
     attributeType: 'iterable';
     options: SelectOption[];
 }
+export interface DataConnectionAttributes {
+    id: string;
+    attributeType: 'data_model_field';
+    dataModelField: {
+        id: string;
+        fieldName: string;
+    };
+}
+export interface ConditionConfigAttributes {
+    id: string;
+    attributeType: 'condition_config';
+    conditionConfig: ConditionConfig;
+}
 export declare type MoleculeTypes = 'image' | 'text' | 'button' | 'video' | 'header_tab_group' | 'input_field' | 'select_field' | 'radio_button_field' | 'checkbox_field';
 export interface BaseMolecule {
     id: string;
@@ -83,7 +96,7 @@ export interface ImageMolecule extends BaseMolecule {
         link: LinkAttributes;
     };
     config: {
-        props: Omit<ImageProps, 'src' | 'link' | 'altText'>;
+        props?: Omit<ImageProps, 'src' | 'link' | 'altText'>;
     };
 }
 export interface TextMoleculeType extends BaseMolecule {
@@ -91,9 +104,10 @@ export interface TextMoleculeType extends BaseMolecule {
     attributes: {
         text: TextAttributes;
         seoStyle: SelectAttributes;
+        fontVariant: SelectAttributes;
     };
     config: {
-        props: TextMoleculeProps;
+        props?: TextMoleculeProps;
     };
 }
 export interface ButtonMolecule extends BaseMolecule {
@@ -103,7 +117,7 @@ export interface ButtonMolecule extends BaseMolecule {
         action: ActionAttributes;
     };
     config: {
-        props: Partial<Omit<ButtonProps, 'disabled' | 'children' | 'link' | 'text' | 'onClick' | 'elementId'>>;
+        props?: Partial<Omit<ButtonProps, 'disabled' | 'children' | 'link' | 'text' | 'onClick' | 'elementId'>>;
     };
 }
 export interface VideoMolecule extends BaseMolecule {
@@ -136,9 +150,11 @@ export interface TextInputMolecule extends BaseMolecule {
         label: TextAttributes;
         required: BooleanAttributes;
         inputType: SelectAttributes;
+        dataModelField: DataConnectionAttributes;
+        conditionConfig: ConditionConfigAttributes;
     };
     config: {
-        props: Partial<{
+        props?: Partial<{
             state: 'default' | 'error';
         } & InputFieldProps>;
     };
@@ -149,9 +165,11 @@ export interface SelectFieldMolecule extends BaseMolecule {
         label: TextAttributes;
         required: BooleanAttributes;
         options: IterableAttributes;
+        dataModelField: DataConnectionAttributes;
+        conditionConfig: ConditionConfigAttributes;
     };
     config: {
-        props: Partial<{
+        props?: Partial<{
             state: 'default' | 'error';
         } & SelectFieldProps>;
     };
@@ -162,9 +180,11 @@ export interface RadioButtonFieldMolecule extends BaseMolecule {
         label: TextAttributes;
         required: BooleanAttributes;
         options: IterableAttributes;
+        dataModelField: DataConnectionAttributes;
+        conditionConfig: ConditionConfigAttributes;
     };
     config: {
-        props: Partial<{
+        props?: Partial<{
             state: 'default' | 'error';
         } & RadioButtonFieldProps<string>>;
     };
@@ -175,9 +195,11 @@ export interface CheckboxFieldMolecule extends BaseMolecule {
         label: TextAttributes;
         required: BooleanAttributes;
         options: IterableAttributes;
+        dataModelField: DataConnectionAttributes;
+        conditionConfig: ConditionConfigAttributes;
     };
     config: {
-        props: Partial<{
+        props?: Partial<{
             state: 'default' | 'error';
         } & CheckboxFieldProps>;
     };

package/dist/cjs/src/containers/types/types.d.ts

@@ -2,19 +2,26 @@ import { TabGroupProps } from 'molecules';
 import { PropsWithChildren } from 'react';
 import { CSSProperties } from 'styled-components';
 import { ValidationMode } from 'react-hook-form';
-import type { AnyObject, StylesType } from 'typescript';
+import type { AnyObject, Nullable, StylesType } from 'typescript';
 import { Molecule } from './moleculeTypes';
-export declare type ContainerType = 'row' | 'column' | 'slider' | 'form';
+export declare type ContainerType = 'row' | 'column' | 'slider' | 'form' | 'form_step';
 export declare type ContainerPositionType = 'fixed' | 'sticky' | 'static' | 'relative';
 export declare type ContainerScrollBehaviourType = 'vertical' | 'horizontal' | 'auto' | 'none';
+export declare type FormStepContainerProps = {
+    formStepName: string;
+    order: number;
+    conditionConfig: ConditionConfig;
+};
+export declare type FormContainerProps = {
+    mode: keyof ValidationMode;
+};
 export declare type ContainerPropsType = Partial<{
     position: ContainerPositionType;
     scrollBehaviour: ContainerScrollBehaviourType;
     cornerRadius: number;
     styles: StylesType;
-    formProps: {
-        mode: keyof ValidationMode;
-    };
+    formProps: FormContainerProps;
+    formStepProps: FormStepContainerProps;
 }>;
 export declare type AdditionalContainerProps = Partial<{
     containerStyle: CSSProperties;
@@ -41,3 +48,19 @@ export declare type ContainerComponentProps = {
     attributes?: AnyObject;
     containerLibraryId?: string;
 };
+export declare type CriteriaType = 'operator' | 'condition';
+export declare type ConditionCriteria = {
+    id: string;
+    type: CriteriaType;
+    operator: string;
+    dataFieldId: Nullable<string>;
+    dataFieldName: Nullable<string>;
+    dataValue: Nullable<string>;
+    connectedTo: Nullable<string>;
+};
+export declare type SegmentationType = 'simple' | 'advanced';
+export declare type ConditionConfig = Nullable<{
+    id: string;
+    segmentationType: SegmentationType;
+    criteriaList: ConditionCriteria[];
+}>;

package/dist/cjs/src/molecules/CheckboxField/CheckboxField.d.ts

@@ -4,6 +4,7 @@ import { SelectOption } from 'atoms';
 import type { StylesType } from 'typescript';
 import { CheckboxInternalConfigProps } from 'atoms/Checkbox/types';
 import { FieldLabelsProps } from '../FieldLabels/FieldLabels';
+import { ConditionConfig } from 'containers';
 export declare type CheckboxesProps = Partial<{
     checkboxGroupWrapperStyles: StylesType;
     checkboxFieldWrapperStyles: StylesType;
@@ -25,5 +26,6 @@ export declare type CheckboxFieldProps = Partial<{
     required: boolean;
     optional: boolean;
     wrapperStyles: StylesType;
+    conditionConfig?: ConditionConfig;
 }>;
-export declare const CheckboxField: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, }: CheckboxFieldProps) => JSX.Element;
+export declare const CheckboxField: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, conditionConfig, }: CheckboxFieldProps) => JSX.Element | null;

package/dist/cjs/src/molecules/CheckboxField/CheckboxField.stories.d.ts

@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/react';
 import { CheckboxField as CheckboxFieldComponent } from 'molecules';
 declare const _default: {
     title: string;
-    component: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, }: Partial<{
+    component: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, conditionConfig, }: Partial<{
         checkboxesProps: Partial<{
             checkboxGroupWrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
             checkboxFieldWrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
@@ -48,7 +48,8 @@ declare const _default: {
         required: boolean;
         optional: boolean;
         wrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
-    }>) => JSX.Element;
+        conditionConfig?: import("../..").ConditionConfig | undefined;
+    }>) => JSX.Element | null;
 };
 export default _default;
 export declare const CheckboxField: StoryFn<typeof CheckboxFieldComponent>;

package/dist/cjs/src/molecules/InputField/InputField.d.ts

@@ -3,6 +3,7 @@ import { Control, ControllerProps } from 'react-hook-form/dist/types';
 import { InputProps } from 'atoms';
 import type { StylesType } from 'typescript';
 import { FieldLabelsProps } from '../FieldLabels/FieldLabels';
+import { ConditionConfig } from 'containers';
 export declare type InputFieldProps = Partial<{
     name: string;
     control: Control<any>;
@@ -13,5 +14,6 @@ export declare type InputFieldProps = Partial<{
     inputProps: InputProps;
     styles: StylesType;
     labelsProps: FieldLabelsProps;
+    conditionConfig?: ConditionConfig;
 }>;
-export declare const InputField: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, }: InputFieldProps) => JSX.Element;
+export declare const InputField: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, conditionConfig, }: InputFieldProps) => JSX.Element | null;

package/dist/cjs/src/molecules/InputField/InputField.stories.d.ts

@@ -3,7 +3,7 @@ import { StoryFn } from '@storybook/react';
 import { InputFieldProps } from './InputField';
 declare const _default: {
     title: string;
-    component: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, }: Partial<{
+    component: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, conditionConfig, }: Partial<{
         name: string;
         control: import("react-hook-form").Control<any, any>;
         rules: Omit<Partial<{
@@ -30,7 +30,8 @@ declare const _default: {
         inputProps: import("../..").InputProps;
         styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
         labelsProps: import("..").FieldLabelsProps;
-    }>) => JSX.Element;
+        conditionConfig?: import("../..").ConditionConfig | undefined;
+    }>) => JSX.Element | null;
 };
 export default _default;
 export declare const InputField: StoryFn<InputFieldProps>;

package/dist/cjs/src/molecules/RadioButtonField/RadioButtonField.d.ts

@@ -3,6 +3,7 @@ import { RadioButtonInternalConfigProps, RadioButtonsProps } from 'atoms';
 import { Control, ControllerProps } from 'react-hook-form/dist/types';
 import type { StylesType } from 'typescript';
 import { FieldLabelsProps } from '../FieldLabels/FieldLabels';
+import { ConditionConfig } from 'containers';
 export declare type RadioButtonFieldProps<T extends string> = Partial<{
     name: string;
     rules: ControllerProps['rules'];
@@ -14,8 +15,9 @@ export declare type RadioButtonFieldProps<T extends string> = Partial<{
     defaultValue: string;
     radioButtonsProps: RadioButtonsProps<T>;
     internalConfig: RadioButtonInternalConfigProps;
+    conditionConfig?: ConditionConfig;
 }>;
-export declare const RadioButtonField: <T extends string>({ name, rules, styles, control, optional, required, labelsProps, defaultValue, radioButtonsProps, }: Partial<{
+export declare const RadioButtonField: <T extends string>({ name, rules, styles, control, optional, required, labelsProps, defaultValue, radioButtonsProps, conditionConfig, }: Partial<{
     name: string;
     rules: ControllerProps['rules'];
     styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
@@ -57,4 +59,5 @@ export declare const RadioButtonField: <T extends string>({ name, rules, styles,
         buttonOptionSpacing: import("../..").SizesTypes;
         radioGroupWrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
     }>;
-}>) => JSX.Element;
+    conditionConfig?: ConditionConfig | undefined;
+}>) => JSX.Element | null;

package/dist/cjs/src/molecules/RadioButtonField/RadioButtonField.stories.d.ts

@@ -3,7 +3,7 @@ import type { ComponentStory } from '@storybook/react';
 import { RadioButtonField as RadioButtonFieldComponent } from './RadioButtonField';
 declare const _default: {
     title: string;
-    component: <T extends string>({ name, rules, styles, control, optional, required, labelsProps, defaultValue, radioButtonsProps, }: Partial<{
+    component: <T extends string>({ name, rules, styles, control, optional, required, labelsProps, defaultValue, radioButtonsProps, conditionConfig, }: Partial<{
         name: string;
         rules: Omit<Partial<{
             required: string | import("react-hook-form").ValidationRule<boolean>;
@@ -62,7 +62,8 @@ declare const _default: {
             buttonOptionSpacing: import("theme").SizesTypes;
             radioGroupWrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
         }>;
-    }>) => JSX.Element;
+        conditionConfig?: import("../..").ConditionConfig | undefined;
+    }>) => JSX.Element | null;
 };
 export default _default;
 export declare const RadioButtonField: ComponentStory<typeof RadioButtonFieldComponent>;

package/dist/cjs/src/molecules/SelectField/SelectField.d.ts

@@ -3,6 +3,7 @@ import { SelectProps } from 'atoms';
 import { Control, ControllerProps } from 'react-hook-form/dist/types';
 import type { StylesType } from 'typescript';
 import { FieldLabelsProps } from '../FieldLabels/FieldLabels';
+import { ConditionConfig } from 'containers';
 export declare type SelectFieldProps = Partial<{
     selectProps: SelectProps;
     labelsProps: FieldLabelsProps;
@@ -13,5 +14,6 @@ export declare type SelectFieldProps = Partial<{
     optional: boolean;
     defaultValue: string;
     styles: StylesType;
+    conditionConfig?: ConditionConfig;
 }>;
-export declare const SelectField: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, rules, }: SelectFieldProps) => JSX.Element;
+export declare const SelectField: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, rules, conditionConfig, }: SelectFieldProps) => JSX.Element | null;

package/dist/cjs/src/molecules/SelectField/SelectField.stories.d.ts

@@ -3,7 +3,7 @@ import { StoryFn } from '@storybook/react';
 import { SelectFieldProps } from './SelectField';
 declare const _default: {
     title: string;
-    component: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, rules, }: Partial<{
+    component: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, rules, conditionConfig, }: Partial<{
         selectProps: Partial<{
             ref: import("react-hook-form").RefCallBack;
             onBlur: import("typescript").Callback;
@@ -43,7 +43,8 @@ declare const _default: {
         optional: boolean;
         defaultValue: string;
         styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
-    }>) => JSX.Element;
+        conditionConfig?: import("../..").ConditionConfig | undefined;
+    }>) => JSX.Element | null;
 };
 export default _default;
 export declare const SelectField: StoryFn<SelectFieldProps>;