@zealicsolutions/web-ui 0.4.52 → 0.4.54

package/dist/cjs/src/atoms/Tab/Tab.d.ts

@@ -39,7 +39,7 @@ export declare const Tab: <T, K>(props: {
     vertical: boolean;
     isActive: boolean;
     onClick: (key: T) => void;
-    options: MenuItem<K>[];
+    options: MenuItem<K_1>[];
     onOptionClick: (optionKey: K) => void;
     tabTheme: TabTheme;
     divider: boolean;

package/dist/cjs/src/atoms/Tab/Tab.stories.d.ts

@@ -11,7 +11,7 @@ declare const _default: {
         vertical: boolean;
         isActive: boolean;
         onClick: (key: T) => void;
-        options: import("../..").MenuItem<K>[];
+        options: MenuItem<K_1>[];
         onOptionClick: (optionKey: K) => void;
         tabTheme: import("atoms").TabTheme;
         divider: boolean;

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

@@ -1,6 +1,11 @@
 import { Molecule } from 'containers';
 import { TabGroupProps } from 'molecules';
+import { ThemeColors } from 'theme';
 export declare const MoleculeItem: ({ type, config, attributes, tabsProps, form, id, formData, setFormData, isMobile, metadata, }: Molecule & {
     tabsProps?: Pick<TabGroupProps<string, string>, "tabs" | "activeTabKey" | "onTabChange"> | undefined;
     isMobile?: boolean | undefined;
 }) => JSX.Element | null;
+export declare const ConfigurationWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $color?: ThemeColors | undefined;
+    $selected?: boolean | undefined;
+}, never>;

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

@@ -8,5 +8,7 @@ export declare type OrganismItemProps = {
     formData?: AnyObject;
     setFormData?: Dispatch<SetStateAction<AnyObject>>;
     isMobile?: boolean;
+    isConfigurationMode?: boolean;
+    onConfigurationItemHandler?: (itemPath: string) => void;
 };
 export declare const OrganismItem: ({ item, tabsProps, formData, setFormData, isMobile, }: OrganismItemProps) => JSX.Element | null;

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

@@ -11,6 +11,463 @@ export declare const rowRepeaterContainerSingle: ContainerComponentProps;
 export declare const columnRepeaterContainer: ContainerComponentProps;
 export declare const outlinedColumnContainer: ContainerComponentProps;
 export declare const headerContainer: ContainerComponentProps;
+export declare const headerWithTabs2: ContainerComponentProps;
+export declare const threeColumnOrganismBody: {
+    type: string;
+    config: {
+        wide: {
+            containerProps: {
+                gap: string;
+                position: string;
+                alignItems: string;
+                paddingTop: string;
+                paddingLeft: string;
+                paddingRight: string;
+                paddingBottom: string;
+            };
+            containerStyle: {
+                width: string;
+                position: string;
+                'flex-direction': string;
+                backgroundColor: string;
+                'justify-content': string;
+                'border-top-left-radius': string;
+                'border-top-right-radius': string;
+                'border-bottom-left-radius': string;
+                'border-bottom-right-radius': string;
+            };
+        };
+        compact: {
+            containerProps: {
+                gap: string;
+                position: string;
+                paddingTop: string;
+                paddingLeft: string;
+                paddingRight: string;
+                paddingBottom: string;
+            };
+            containerStyle: {
+                width: string;
+                position: string;
+                'flex-direction': string;
+                backgroundColor: string;
+                'justify-content': string;
+                'border-top-left-radius': string;
+                'border-top-right-radius': string;
+                'border-bottom-left-radius': string;
+                'border-bottom-right-radius': string;
+            };
+        };
+    };
+    instance: string;
+    metadata: {
+        group: string[];
+    };
+    containerLibraryId: string;
+    id: string;
+    items: {
+        type: string;
+        config: {
+            wide: {
+                containerProps: {
+                    gap: string;
+                    alignItems: string;
+                };
+                containerStyle: {
+                    width: string;
+                    flexDirection: string;
+                    backgroundColor: string;
+                };
+            };
+            compact: {
+                containerProps: {
+                    gap: string;
+                    alignItems: string;
+                };
+                containerStyle: {
+                    width: string;
+                    flexDirection: string;
+                    backgroundColor: string;
+                };
+            };
+        };
+        instance: string;
+        metadata: {
+            group: string[];
+        };
+        ordering: number;
+        containerLibraryId: string;
+        organismLibraryContainerId: string;
+        items: ({
+            type: string;
+            config: {
+                props: {
+                    textColor: string;
+                    textAlign?: undefined;
+                };
+                wide?: undefined;
+                compact?: undefined;
+            };
+            instance: string;
+            metadata: {
+                group: string[];
+            };
+            ordering: number;
+            attributes: {
+                text: {
+                    id: string;
+                    text: string;
+                    required: boolean;
+                    isRichText: boolean;
+                    attributeType: string;
+                    showRichTextToolbar: boolean;
+                };
+                color: {
+                    id: string;
+                    color: string;
+                    required: boolean;
+                    attributeType: string;
+                };
+                seoStyle: {
+                    id: string;
+                    value: string;
+                    options: {
+                        id: string;
+                        label: string;
+                        value: string;
+                        config: {
+                            dataModelFieldType: string;
+                        };
+                    }[];
+                    required: boolean;
+                    attributeType: string;
+                };
+                fontVariant: {
+                    id: string;
+                    value: string;
+                    options: {
+                        id: string;
+                        label: string;
+                        value: string;
+                        config: {
+                            dataModelFieldType: string;
+                        };
+                    }[];
+                    attributeType: string;
+                };
+            };
+            moleculeLibraryId: string;
+            organismLibraryMoleculeId: string;
+            children: never[];
+            idForFrontend: string;
+            id: string;
+            containerLibraryId?: undefined;
+            organismLibraryContainerId?: undefined;
+            items?: undefined;
+        } | {
+            type: string;
+            config: {
+                wide: {
+                    containerProps: {
+                        gap: string;
+                        alignItems: string;
+                        verticalPadding: string;
+                        horizontalPadding: string;
+                    };
+                    containerStyle: {
+                        width: string;
+                        justifyContent: string;
+                        backgroundColor: string;
+                    };
+                };
+                compact: {
+                    containerProps: {
+                        gap: string;
+                        verticalPadding: string;
+                        horizontalPadding: string;
+                    };
+                    containerStyle: {
+                        width: string;
+                        flexDirection: string;
+                        backgroundColor: string;
+                    };
+                };
+                props?: undefined;
+            };
+            instance: string;
+            metadata: {
+                group: string[];
+            };
+            ordering: number;
+            containerLibraryId: string;
+            organismLibraryContainerId: string;
+            items: {
+                type: string;
+                config: {
+                    wide: {
+                        containerProps: {
+                            gap: string;
+                            position: string;
+                            alignItems: string;
+                            paddingTop: string;
+                            paddingLeft: string;
+                            paddingRight: string;
+                            paddingBottom: string;
+                        };
+                        containerStyle: {
+                            width: string;
+                            position: string;
+                            'flex-direction': string;
+                            justifyContent: string;
+                            backgroundColor: string;
+                            'justify-content': string;
+                            'border-top-left-radius': string;
+                            'border-top-right-radius': string;
+                            'border-bottom-left-radius': string;
+                            'border-bottom-right-radius': string;
+                        };
+                    };
+                    compact: {
+                        containerProps: {
+                            gap: string;
+                            position: string;
+                            alignItems: string;
+                            paddingTop: string;
+                            paddingLeft: string;
+                            paddingRight: string;
+                            paddingBottom: string;
+                        };
+                        containerStyle: {
+                            width: string;
+                            position: string;
+                            'flex-direction': string;
+                            backgroundColor: string;
+                            'justify-content': string;
+                            'border-top-left-radius': string;
+                            'border-top-right-radius': string;
+                            'border-bottom-left-radius': string;
+                            'border-bottom-right-radius': string;
+                        };
+                    };
+                };
+                instance: string;
+                metadata: {
+                    group: string[];
+                };
+                ordering: number;
+                containerLibraryId: string;
+                organismLibraryContainerId: string;
+                items: ({
+                    type: string;
+                    config: {
+                        props: {
+                            styles: {
+                                width: string;
+                                display: string;
+                                'max-height': string;
+                            };
+                            textAlign?: undefined;
+                            textColor?: undefined;
+                        };
+                    };
+                    instance: string;
+                    metadata: {
+                        group: string[];
+                    };
+                    ordering: number;
+                    attributes: {
+                        link: {
+                            id: string;
+                            attributeType: string;
+                            externalLink: string;
+                            internalLink: string;
+                            name: string;
+                            type: string;
+                            required: boolean;
+                        };
+                        image: {
+                            id: string;
+                            imageFile: {
+                                type: string;
+                                fileType: string;
+                                id: string;
+                                name: string;
+                                url: string;
+                                description: string;
+                                originalName: string;
+                                size: number;
+                                status: string;
+                                updatedAt: string;
+                                isDefault: boolean;
+                                tags: never[];
+                                brandId: string;
+                                uploadedAt: string;
+                            };
+                            attributeType: string;
+                            imageSource: string;
+                        };
+                        altText: {
+                            id: string;
+                            text: string;
+                            required: boolean;
+                            isRichText: boolean;
+                            attributeType: string;
+                            showRichTextToolbar: boolean;
+                        };
+                        text?: undefined;
+                        color?: undefined;
+                        seoStyle?: undefined;
+                        fontVariant?: undefined;
+                    };
+                    moleculeLibraryId: string;
+                    organismLibraryMoleculeId: string;
+                    children: never[];
+                    idForFrontend: string;
+                    id: string;
+                } | {
+                    type: string;
+                    config: {
+                        props: {
+                            textAlign: string;
+                            textColor: string;
+                            styles?: undefined;
+                        };
+                    };
+                    instance: string;
+                    metadata: {
+                        group: string[];
+                    };
+                    ordering: number;
+                    attributes: {
+                        text: {
+                            id: string;
+                            text: string;
+                            required: boolean;
+                            isRichText: boolean;
+                            attributeType: string;
+                            showRichTextToolbar: boolean;
+                        };
+                        color: {
+                            id: string;
+                            color: string;
+                            required: boolean;
+                            attributeType: string;
+                        };
+                        seoStyle: {
+                            id: string;
+                            value: string;
+                            options: {
+                                id: string;
+                                label: string;
+                                value: string;
+                                config: {
+                                    dataModelFieldType: string;
+                                };
+                            }[];
+                            required: boolean;
+                            attributeType: string;
+                        };
+                        fontVariant: {
+                            id: string;
+                            value: string;
+                            options: {
+                                id: string;
+                                label: string;
+                                value: string;
+                                config: {
+                                    dataModelFieldType: string;
+                                };
+                            }[];
+                            attributeType: string;
+                        };
+                        link?: undefined;
+                        image?: undefined;
+                        altText?: undefined;
+                    };
+                    moleculeLibraryId: string;
+                    organismLibraryMoleculeId: string;
+                    children: never[];
+                    idForFrontend: string;
+                    id: string;
+                })[];
+                id: string;
+            }[];
+            id: string;
+            attributes?: undefined;
+            moleculeLibraryId?: undefined;
+            organismLibraryMoleculeId?: undefined;
+            children?: undefined;
+            idForFrontend?: undefined;
+        } | {
+            type: string;
+            config: {
+                props: {
+                    textAlign: string;
+                    textColor: string;
+                };
+                wide?: undefined;
+                compact?: undefined;
+            };
+            instance: string;
+            metadata: {
+                group: string[];
+            };
+            ordering: number;
+            attributes: {
+                text: {
+                    id: string;
+                    text: string;
+                    required: boolean;
+                    isRichText: boolean;
+                    attributeType: string;
+                    showRichTextToolbar: boolean;
+                };
+                color: {
+                    id: string;
+                    color: string;
+                    required: boolean;
+                    attributeType: string;
+                };
+                seoStyle: {
+                    id: string;
+                    value: string;
+                    options: {
+                        id: string;
+                        label: string;
+                        value: string;
+                        config: {
+                            dataModelFieldType: string;
+                        };
+                    }[];
+                    required: boolean;
+                    attributeType: string;
+                };
+                fontVariant: {
+                    id: string;
+                    value: string;
+                    options: {
+                        id: string;
+                        label: string;
+                        value: string;
+                        config: {
+                            dataModelFieldType: string;
+                        };
+                    }[];
+                    attributeType: string;
+                };
+            };
+            moleculeLibraryId: string;
+            organismLibraryMoleculeId: string;
+            children: never[];
+            idForFrontend: string;
+            id: string;
+            containerLibraryId?: undefined;
+            organismLibraryContainerId?: undefined;
+            items?: undefined;
+        })[];
+        id: string;
+    }[];
+};
 export declare const headerContainerWithTabs: ContainerComponentProps;
 export declare const DataField: ContainerComponentProps;
 export declare const LogInPermanentPage: ContainerComponentProps;

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

@@ -34,6 +34,7 @@ export declare type MetadataType = AnyObject & Partial<{
     notEditable: boolean;
     hasOwnButton: boolean;
     stateListenerId: string;
+    configurationPath: string;
 }>;
 export declare type SliderProps = {
     autoplay?: boolean;

package/dist/cjs/src/contexts/OrganismContext/OrganismContext.d.ts

@@ -23,8 +23,11 @@ export declare type OrganismContextType = {
     validations?: PasswordRuleValidation[];
     editable?: boolean;
     isFormInEditMode?: boolean;
+    isConfigurationMode?: boolean;
     organismMetadata?: {
         stateListenerId?: string;
     } & AnyObject;
+    onConfigurationItemClicked: (itemPath?: string) => void;
+    selectedConfigurationItemPath?: string;
 };
 export declare const OrganismContext: import("react").Context<OrganismContextType>;

package/dist/cjs/src/contexts/OrganismContext/OrganismContextProvider.d.ts

@@ -13,5 +13,7 @@ export declare type FormStepContextProviderProps = PropsWithChildren<Partial<{
     editable: boolean;
     isFormInEditMode?: boolean;
     organismMetadata?: AnyObject;
+    isConfigurationMode?: boolean;
+    onConfigurationItemHandler?: (itemPath?: string) => void;
 }>>;
-export declare const OrganismContextProvider: ({ initItems, children, submitHandler, formId, validations, editable, isFormInEditMode, organismMetadata, }: FormStepContextProviderProps) => JSX.Element;
+export declare const OrganismContextProvider: ({ initItems, children, submitHandler, formId, validations, editable, isFormInEditMode, organismMetadata, isConfigurationMode, onConfigurationItemHandler, }: FormStepContextProviderProps) => JSX.Element;

package/dist/cjs/src/molecules/MenuItems/MenuItem.d.ts

@@ -0,0 +1,20 @@
+export declare type MenuItemType<T> = {
+    id: T;
+    title: string;
+    active?: boolean;
+    onClick: (id: T) => void;
+    options?: MenuItemType<T>[];
+    divider?: boolean;
+    disabled?: boolean;
+    itemColor?: string;
+    activeItemColor?: string;
+};
+export declare type MenuItemProps<T> = {
+    item: MenuItemType<T>;
+    activeKey?: T;
+    itemColor?: string;
+    menuTheme?: 'light' | 'dark';
+    activeItemColor?: string;
+    parentHandleClick?: (id: T) => void;
+};
+export declare const MenuItem: <T extends string | number>({ item, activeKey, menuTheme, itemColor, activeItemColor, parentHandleClick, }: MenuItemProps<T>) => JSX.Element;

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

@@ -1,11 +1,11 @@
-export declare type MenuItem<T> = {
-    id: T;
-    title: string;
-    onClick?: (id: T) => void;
-};
+import { MenuItemType } from './MenuItem';
 export declare type MenuItemsProps<T> = {
     title?: string;
+    options?: MenuItemType<T>[];
+    activeKey?: T;
+    itemColor?: string;
+    menuTheme?: 'light' | 'dark';
     onItemPress?: (id: T) => void;
-    options?: MenuItem<T>[];
+    activeItemColor?: string;
 };
-export declare const MenuItems: <T extends string | number>({ title, onItemPress, options, }: MenuItemsProps<T>) => JSX.Element;
+export declare const MenuItems: <T extends string | number>({ title, options, activeKey, itemColor, menuTheme, onItemPress, activeItemColor, }: MenuItemsProps<T>) => JSX.Element;

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

@@ -2,7 +2,7 @@ import type { ComponentStory } from '@storybook/react';
 import { MenuItems as MenuItemsComponent } from './MenuItems';
 declare const _default: {
     title: string;
-    component: <T extends string | number>({ title, onItemPress, options, }: import("./MenuItems").MenuItemsProps<T>) => JSX.Element;
+    component: <T extends string | number>({ title, options, activeKey, itemColor, menuTheme, onItemPress, activeItemColor, }: import("./MenuItems").MenuItemsProps<T>) => JSX.Element;
 };
 export default _default;
 export declare const MenuItems: ComponentStory<typeof MenuItemsComponent>;

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

@@ -1,8 +1,10 @@
+import { IconNames } from 'atoms';
 import { MenuItemsProps } from '../MenuItems/MenuItems';
 export declare type MenuNavigationProps<T> = {
     menuConfig: MenuItemsProps<T>;
+    customIconType?: IconNames;
 };
-export declare const MenuNavigation: <T extends string | number>({ menuConfig, }: MenuNavigationProps<T>) => JSX.Element;
+export declare const MenuNavigation: <T extends string | number>({ menuConfig, customIconType, }: MenuNavigationProps<T>) => JSX.Element;
 export declare const CaretIconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     isOpen: boolean;
 }, never>;

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

@@ -3,7 +3,7 @@ import { MenuNavigation as MenuNavigationComponent } from 'molecules/MenuNavigat
 import 'rc-dropdown/assets/index.css';
 declare const _default: {
     title: string;
-    component: <T extends string | number>({ menuConfig, }: import("molecules/MenuNavigation/MenuNavigation").MenuNavigationProps<T>) => JSX.Element;
+    component: <T extends string | number>({ menuConfig, customIconType, }: import("molecules/MenuNavigation/MenuNavigation").MenuNavigationProps<T>) => JSX.Element;
 };
 export default _default;
 export declare const MenuNavigation: ComponentStory<typeof MenuNavigationComponent>;

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

@@ -1,6 +1,6 @@
 import { TabProps, TabTheme } from 'atoms';
 import { FontSizesTypes, SizesTypes, ThemeColors } from 'theme/types';
-import { StylesType } from 'typescript';
+import type { StylesType } from 'typescript';
 export declare type TabType<T = string, K = string> = Pick<TabProps<T, K>, 'text' | 'tabKey' | 'disabled' | 'options' | 'divider'>;
 export declare type AdditionalTabContainerProps = {
     containerStyle?: StylesType;

package/dist/cjs/src/molecules/TabGroup/styles.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { TabTheme } from 'atoms/Tab/Tab';
 import { SizesTypes, ThemeColors } from 'theme/types';
-import { OverrideStyles, StyledTransientProps } from 'typescript';
+import type { OverrideStyles, StyledTransientProps } from 'typescript';
 export declare const TabsWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledTransientProps<{
     spacing: SizesTypes;
     vertical: boolean;