@zealicsolutions/web-ui 0.3.192 → 0.3.194

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

@@ -1,10 +1,12 @@
 import { LinkVariant, SelectOption } from 'atoms';
-import { AdditionalTabContainerProps, AvatarDropdownMenuConfigType, AvatarDropdownProps, ButtonProps, CheckboxFieldProps, ConsentType, ImageProps, InputFieldProps, LinkProps, RadioButtonFieldProps, SelectFieldProps, TabGroupProps, TextMoleculeProps } from 'molecules';
+import { AdditionalTabContainerProps, AvatarDropdownMenuConfigType, AvatarDropdownProps, ButtonProps, CheckboxFieldProps, ChecklistItem, ConsentType, ImageProps, InputFieldProps, LinkProps, RadioButtonFieldProps, SelectFieldProps, TabGroupProps, TextMoleculeProps } from 'molecules';
 import { Dispatch, SetStateAction } from 'react';
 import { UseFormReturn } from 'react-hook-form';
 import type { AnyObject, Nullable, StrictUnion, StylesType } from 'typescript';
+import { SizesTypes } from 'theme';
 import { ConditionConfig, ContainerComponentProps, MetadataType } from './types';
 import { MaskConfig } from '../../atoms/Input/helpers';
+import { CheckboxInternalConfigProps } from '../../atoms/Checkbox/types';
 export declare type ActionTypes = 'link' | 'popup' | 'drawer' | 'download' | 'submit' | 'reset' | 'destroy';
 export declare type DataModelFieldFormatCodeTypes = 'date' | 'email' | 'string' | 'integer' | 'boolean' | 'numeric' | 'zip_code' | 'phone_number';
 export declare type DataModelFieldFormatValueTypes = 'any' | 'text' | 'email' | 'integer' | 'numerical' | 'us_zip_code' | 'phone_number' | 'month_year_date' | 'day_month_year_date' | 'month_day_year_date' | 'year_month_day_date';
@@ -126,13 +128,20 @@ export interface ProcessStepsAttributes {
         steps: ProcessStep[];
     };
 }
-export declare type MoleculeTypes = 'image' | 'text' | 'button' | 'video' | 'header_tab_group' | 'input_field' | 'select_field' | 'radio_button_field' | 'checkbox_field' | 'consent' | 'link' | 'password_setup_field' | 'account_button' | 'process_steps';
+export interface ChecklistAttributes {
+    checklist: {
+        attributeType: 'checklist';
+        items: ChecklistItem[];
+    };
+}
+export declare type MoleculeTypes = 'image' | 'text' | 'button' | 'video' | 'header_tab_group' | 'input_field' | 'select_field' | 'radio_button_field' | 'checkbox_field' | 'consent' | 'link' | 'password_setup_field' | 'account_button' | 'process_steps' | 'checklist';
 export interface BaseMolecule {
     id: string;
-    moleculeLibraryId: string;
-    instance: 'molecule';
     type: MoleculeTypes;
-    metadata?: MetadataType;
+    instance: 'molecule';
+    metadata: MetadataType;
+    moleculeLibraryId: string;
+    organismLibraryMoleculeId: string;
 }
 export interface ImageMolecule extends BaseMolecule {
     type: 'image';
@@ -185,6 +194,16 @@ export interface VideoMolecule extends BaseMolecule {
 }
 export interface TabGroupMolecule extends BaseMolecule {
     type: 'header_tab_group';
+    attributes: Partial<{
+        tabs: {
+            tabKey: string;
+            text: string;
+            disabled: boolean;
+            divider: boolean;
+        }[];
+        activeTabKey: string;
+        attributeType: 'tab_group';
+    }>;
     config: {
         props: TabGroupProps;
         wide: AdditionalTabContainerProps;
@@ -300,7 +319,16 @@ export interface ProcessStepsMoleculeType extends BaseMolecule {
     organismMoleculeLibraryId: string;
     attributes: ProcessStepsAttributes;
 }
-export declare type Molecule = StrictUnion<ImageMolecule | TextMoleculeType | ButtonMolecule | VideoMolecule | TabGroupMolecule | TextInputMolecule | SelectFieldMolecule | RadioButtonFieldMolecule | CheckboxFieldMolecule | ConsentFieldMolecule | LinkMolecule | PasswordSetupMolecule | AccountButtonMolecule | ProcessStepsMoleculeType> & Partial<{
+export interface ChecklistsMolecule extends BaseMolecule {
+    type: 'checklist';
+    config: {
+        props: {
+            gap: SizesTypes;
+        } & CheckboxInternalConfigProps;
+    };
+    attributes: ChecklistAttributes;
+}
+export declare type Molecule = StrictUnion<ImageMolecule | TextMoleculeType | ButtonMolecule | VideoMolecule | TabGroupMolecule | TextInputMolecule | SelectFieldMolecule | RadioButtonFieldMolecule | CheckboxFieldMolecule | ConsentFieldMolecule | LinkMolecule | PasswordSetupMolecule | AccountButtonMolecule | ProcessStepsMoleculeType | ChecklistsMolecule> & Partial<{
     form: UseFormReturn<any>;
     formData: AnyObject;
     setFormData: Dispatch<SetStateAction<AnyObject>>;

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

@@ -75,13 +75,14 @@ export declare type AdditionalContainerProps = Partial<{
     containerStyle: CSSProperties;
     containerProps: ContainerPropsType;
 }>;
-export declare type ContainerProps = PropsWithChildren<Partial<{
+export declare type ContainerProps = PropsWithChildren<{
     type: ContainerType;
+    metadata: MetadataType;
+} & Partial<{
     containerTemplateType: ContainerTemplateType;
     wide: AdditionalContainerProps;
     compact: AdditionalContainerProps;
     props: ContainerPropsType;
-    metadata: MetadataType;
     isMobile: boolean;
 }>>;
 export declare type ContainerComponentProps = {

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

@@ -1,4 +1,4 @@
-import { ContainerComponentProps, Molecule } from 'containers';
+import { ContainerComponentProps, MetadataType, Molecule } from 'containers';
 import { InputFieldTypes } from 'fieldsConfiguration';
 import { PasswordRuleValidation } from 'molecules/PasswordSetup/PasswordSetup';
 import { Dispatch, SetStateAction } from 'react';
@@ -25,9 +25,7 @@ export declare type OrganismContextType = {
     editable?: boolean;
     isFormInEditMode?: boolean;
     isConfigurationMode?: boolean;
-    organismMetadata?: {
-        stateListenerId?: string;
-    } & AnyObject;
+    organismMetadata?: MetadataType;
     onConfigurationItemClicked: (itemInfo?: Omit<ConfigurationItem, 'organismId'>) => void;
     selectedConfigurationItemId?: string;
 };

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

@@ -1,11 +1,14 @@
 import { PropsWithChildren } from 'react';
-import { ContainerComponentProps, Molecule } from 'containers';
+import { ContainerComponentProps, ContainerType, MetadataType, Molecule, MoleculeTypes } from 'containers';
 import type { AnyObject } from 'typescript';
 import { PasswordRuleValidation } from 'molecules/PasswordSetup/PasswordSetup';
 export declare type ConfigurationItem = {
     entity: 'container' | 'molecule';
     entityId: string;
     organismId: string;
+    entityType: MoleculeTypes | ContainerType;
+    entityMetadata: MetadataType;
+    organismLibraryMoleculeId?: string;
 };
 export declare type OrganismContextProviderProps = PropsWithChildren<{
     organismId: string;

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

@@ -0,0 +1,32 @@
+import type { StoryFn } from '@storybook/react';
+import { CheckboxGroup as CheckboxGroupComponent } from 'molecules';
+declare const _default: {
+    title: string;
+    component: ({ ref, onBlur, onChange, checkboxesProps }: Partial<{
+        ref: import("react-hook-form").RefCallBack;
+        onBlur: import("../../typescript").Callback;
+        onChange: (checkedIds: string[]) => void;
+        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>>;
+            onChange: (id: string) => void;
+            disabled: boolean;
+            options?: import("../..").SelectOption[] | undefined;
+            selectedIds?: string[] | undefined;
+            isError?: boolean | undefined;
+            isEditMode?: boolean | undefined;
+            isRichText: boolean;
+            internalConfig: Partial<{
+                selectedCheckboxBackgroundColor: string;
+                selectedCheckboxIconColor: string;
+                buttonPadding: number;
+                textPadding: number;
+                styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+                wrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+                buttonOptionSpacing?: import("theme").SizesTypes | undefined;
+            }>;
+        }>;
+    }>) => JSX.Element;
+};
+export default _default;
+export declare const CheckboxGroup: StoryFn<typeof CheckboxGroupComponent>;

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

@@ -0,0 +1,23 @@
+import { SizesTypes } from 'theme';
+import { CheckboxInternalConfigProps } from 'atoms/Checkbox/types';
+import type { Nullable } from 'typescript';
+export declare type ChecklistItem = {
+    id: string;
+    isChecked: boolean;
+    eventId: Nullable<string>;
+    type: 'user_interactive' | 'system_controlled';
+    label: {
+        text: string;
+        isRichText: boolean;
+    };
+};
+export declare type ChecklistProps = {
+    items: ChecklistItem[];
+    props: {
+        gap: SizesTypes;
+    } & CheckboxInternalConfigProps;
+};
+export declare const Checklist: ({ items, props: { gap, ...checkboxProps } }: ChecklistProps) => JSX.Element;
+export declare const ChecklistWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $gap: SizesTypes;
+}, never>;

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

@@ -0,0 +1,8 @@
+import type { StoryFn } from '@storybook/react';
+import { Checklist as ChecklistComponent } from 'molecules';
+declare const _default: {
+    title: string;
+    component: ({ items, props: { gap, ...checkboxProps } }: import("molecules").ChecklistProps) => JSX.Element;
+};
+export default _default;
+export declare const Checklist: StoryFn<typeof ChecklistComponent>;

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

@@ -15,5 +15,6 @@ export declare type ImageProps = {
     styles: StylesType;
     metadata: MetadataType;
     htmlElementId: string;
+    isOnClickDisabled: boolean;
 }>;
-export declare const Image: ({ src, onClick, link, altText, styles, width, height, id, behaveAs, cornerRadius, htmlElementId, metadata, }: ImageProps) => JSX.Element | null;
+export declare const Image: ({ src, onClick, link, altText, styles, width, height, id, behaveAs, cornerRadius, htmlElementId, metadata, isOnClickDisabled, }: ImageProps) => JSX.Element | null;

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

@@ -2,7 +2,7 @@ import type { StoryFn } from '@storybook/react';
 import { Image as ImageComponent } from './Image';
 declare const _default: {
     title: string;
-    component: ({ src, onClick, link, altText, styles, width, height, id, behaveAs, cornerRadius, htmlElementId, metadata, }: import("./Image").ImageProps) => JSX.Element | null;
+    component: ({ src, onClick, link, altText, styles, width, height, id, behaveAs, cornerRadius, htmlElementId, metadata, isOnClickDisabled, }: import("./Image").ImageProps) => JSX.Element | null;
 };
 export default _default;
 export declare const Image: StoryFn<typeof ImageComponent>;

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

@@ -6,5 +6,6 @@ export declare type StepperProps = {
     htmlElementId?: string;
     metadata: MetadataType;
     isMobile?: boolean;
+    isOnClickDisabled?: boolean;
 };
-export declare const Stepper: ({ steps, orientation, htmlElementId, metadata, isMobile, }: StepperProps) => JSX.Element | null;
+export declare const Stepper: ({ steps, orientation, htmlElementId, metadata, isMobile, isOnClickDisabled, }: StepperProps) => JSX.Element | null;

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

@@ -2,7 +2,7 @@ import { StoryFn } from '@storybook/react';
 import { StepperProps } from './Stepper';
 declare const _default: {
     title: string;
-    component: ({ steps, orientation, htmlElementId, metadata, isMobile, }: StepperProps) => JSX.Element | null;
+    component: ({ steps, orientation, htmlElementId, metadata, isMobile, isOnClickDisabled, }: StepperProps) => JSX.Element | null;
 };
 export default _default;
 export declare const Stepper: StoryFn<StepperProps>;

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

@@ -15,5 +15,6 @@ export declare type VideoProps = {
     htmlElementId: string;
     moleculeId: string;
     isTrigger: boolean;
+    isOnClickDisabled: boolean;
 }>;
-export declare const Video: ({ style, src, width, height, template, autoplay, enableCoverImage, coverImageSrc, styles, htmlElementId, isTrigger, moleculeId, }: VideoProps) => JSX.Element | null;
+export declare const Video: ({ style, src, width, height, template, autoplay, enableCoverImage, coverImageSrc, styles, htmlElementId, isTrigger, moleculeId, isOnClickDisabled, }: VideoProps) => JSX.Element | null;

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

@@ -2,7 +2,7 @@ import type { StoryFn } from '@storybook/react';
 import { Video as VideoComponent } from './Video';
 declare const _default: {
     title: string;
-    component: ({ style, src, width, height, template, autoplay, enableCoverImage, coverImageSrc, styles, htmlElementId, isTrigger, moleculeId, }: import("./Video").VideoProps) => JSX.Element | null;
+    component: ({ style, src, width, height, template, autoplay, enableCoverImage, coverImageSrc, styles, htmlElementId, isTrigger, moleculeId, isOnClickDisabled, }: import("./Video").VideoProps) => JSX.Element | null;
 };
 export default _default;
 export declare const Video: StoryFn<typeof VideoComponent>;

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

@@ -30,3 +30,4 @@ export * from './Button/Button';
 export * from './ZealUIModal/ZealUIModal';
 export * from './Consent/Consent';
 export * from './Link/Link';
+export * from './Checklist/Checklist';