@zealicsolutions/web-ui 0.3.267 → 0.3.269

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { FontSizesTypes, SizesTypes, ThemeColors } from 'theme';
+import { StylesType } from 'typescript';
+import { MenuItemType } from '../../molecules/MenuItems/MenuItem';
+export declare type TabOption<T = string> = {
+    menuText: string;
+    menuKey: T;
+    onMenuClick?: (key: T) => void;
+    isSelected?: boolean;
+};
+declare type TabElement = HTMLDivElement | null;
+export declare type TabTheme = 'light' | 'dark';
+export declare type TabProps<T = string, K = string> = {
+    tabKey: T;
+    text: string;
+} & Partial<{
+    disabled: boolean;
+    vertical: boolean;
+    isActive: boolean;
+    onClick: (key: T) => void;
+    options: MenuItemType<K>[];
+    onOptionClick: (optionKey: K) => void;
+    tabTheme: TabTheme;
+    divider: boolean;
+    tabFont: FontSizesTypes;
+    textSize: number;
+    tabPadding: SizesTypes | number;
+    defaultTabTextColor: ThemeColors | string;
+    selectedTabTextColor: ThemeColors | string;
+    selectedTabIndicatorColor: ThemeColors | string;
+    styles: StylesType;
+}>;
+declare const ZealTab: <T extends string, K extends string>({ options, onClick, text, tabKey, vertical, onOptionClick, tabTheme, tabFont, tabPadding, selectedTabIndicatorColor, textSize, defaultTabTextColor, ...tabProps }: TabProps<T, K>, ref: React.ForwardedRef<TabElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Tab: <T, K>(props: {
+    tabKey: T;
+    text: string;
+} & Partial<{
+    disabled: boolean;
+    vertical: boolean;
+    isActive: boolean;
+    onClick: (key: T) => void;
+    options: MenuItemType<K>[];
+    onOptionClick: (optionKey: K) => void;
+    tabTheme: TabTheme;
+    divider: boolean;
+    tabFont: FontSizesTypes;
+    textSize: number;
+    tabPadding: SizesTypes | number;
+    defaultTabTextColor: ThemeColors | string;
+    selectedTabTextColor: ThemeColors | string;
+    selectedTabIndicatorColor: ThemeColors | string;
+    styles: StylesType;
+}> & {
+    ref?: React.ForwardedRef<TabElement> | undefined;
+}) => ReturnType<typeof ZealTab>;
+export {};

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { TabProps } from 'atoms/Tab/Tab';
+declare type TabContainerProps = Pick<TabProps, 'isActive' | 'disabled' | 'tabTheme' | 'selectedTabTextColor' | 'styles' | 'defaultTabTextColor'>;
+declare type TabTextProps = Pick<TabProps, 'tabTheme' | 'textSize' | 'defaultTabTextColor' | 'tabPadding' | 'tabFont'>;
+export declare const TabText: import("@emotion/styled").StyledComponent<import("atoms").TextProps & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & TabTextProps, {}, {}>;
+export declare const TabContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TabContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CaretIconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TabContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

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

@@ -0,0 +1,4 @@
+import { TabTheme } from 'atoms/Tab/Tab';
+import { ThemeColors } from 'theme';
+export declare const getColorForCaretDownIcon: (color?: ThemeColors | string, tabTheme?: TabTheme, disabled?: boolean) => string;
+export declare const getSelectionIndicatorColor: (selectedTabIndicatorColor?: ThemeColors | string, isActiveTab?: boolean, tabTheme?: TabTheme) => string;

package/dist/cjs/atoms/TextWrapper/TextWrapper.d.ts

@@ -0,0 +1,23 @@
+import { PropsWithChildren } from 'react';
+import { FontSizesTypes, ThemeColors } from 'theme/types';
+import type { StylesType } from 'typescript';
+export declare type TextTypes = 'primary' | 'secondary' | 'error' | 'success';
+export declare type TextAlign = 'center' | 'right' | 'left';
+export declare type SeoTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
+export declare type TextProps = {
+    variant: FontSizesTypes;
+    layout?: 'div' | 'span';
+    type?: TextTypes;
+    styles?: StylesType;
+    color?: ThemeColors | string;
+    numberOfLines?: number;
+    textAlign?: TextAlign;
+    behaveAs?: 'text' | 'button';
+    seoTag?: SeoTags;
+    htmlElementId?: string;
+};
+export declare type TextWrapperProps = PropsWithChildren<TextProps>;
+export declare const TextWrapper: ({ children, seoTag, ...textProps }: TextWrapperProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ErrorText: ({ text }: {
+    text: string;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/atoms/Toast/ToastContent.d.ts

@@ -0,0 +1,7 @@
+import { ToastType } from './types';
+declare type ToastContentProps = {
+    type: ToastType;
+    message: string;
+};
+export declare const ToastContent: ({ type, message }: ToastContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/atoms/Toast/toast.d.ts

@@ -0,0 +1,3 @@
+import { ToastParams } from './types';
+import 'rc-notification/assets/index.css';
+export declare const toast: ({ message, type, duration }: ToastParams) => void | undefined;

package/dist/cjs/atoms/Toast/types.d.ts

@@ -0,0 +1,6 @@
+export declare type ToastType = 'success' | 'infoTierOne' | 'infoTierTwo' | 'warning' | 'error';
+export declare type ToastParams = {
+    message: string;
+    type?: ToastType;
+    duration?: number;
+};

package/dist/cjs/atoms/Tooltip/Tooltip.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { TooltipProps as TooltipComponentProps } from 'rc-tooltip/lib/Tooltip';
+import { OverrideStyles, StylesType } from 'typescript';
+import 'rc-tooltip/assets/bootstrap.css';
+export declare type TooltipProps = Pick<TooltipComponentProps, 'overlay' | 'placement' | 'trigger' | 'visible' | 'children'> & {
+    styles?: StylesType;
+};
+export declare const StyleWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & OverrideStyles, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Tooltip: ({ trigger, placement, styles, ...props }: TooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/atoms/ValidationTag/ValidationTag.d.ts

@@ -0,0 +1,6 @@
+export declare type ValidationTagStatus = 'DEFAULT' | 'ERROR' | 'SUCCESS';
+export declare type ValidationTagProps = {
+    status: ValidationTagStatus;
+    text: string;
+};
+export declare const ValidationTag: ({ text, status }: ValidationTagProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/atoms/index.d.ts

@@ -0,0 +1,23 @@
+export * from './Buttons/TouchableOpacity';
+export * from './Checkbox/Checkbox';
+export * from './Select/Select';
+export * from './Input/Input';
+export * from './TextWrapper/TextWrapper';
+export * from './Icon/Icon';
+export * from './Spacer/Spacer';
+export * from './Spinner/Spinner';
+export * from './RegularImage/RegularImage';
+export * from './Buttons/TextButton';
+export * from './ValidationTag/ValidationTag';
+export * from './Tooltip/Tooltip';
+export * from './Toast/toast';
+export * from './HorizontalButtons/HorizontalButtons';
+export * from './Avatar/Avatar';
+export * from './Paddings/Paddings';
+export * from './Divider/Divider';
+export * from './RichTextViewer/RichTextViewer';
+export * from './RadioButtons/RadioButtons';
+export * from './Circle/Circle';
+export * from './CircularIndicator/CircularIndicator';
+export * from './Buttons/IconButton';
+export * from './Tab/Tab';

package/dist/cjs/constants/params.d.ts

@@ -0,0 +1,8 @@
+export declare const paramKeys: {
+    internalLinkAlias: string;
+    internalLinkWebpageId: string;
+    internalLinkApplicationId: string;
+    previewApplicationId: string;
+    previewSelectedWebpageId: string;
+    runtimeSelectedWebpageId: string;
+};

package/dist/cjs/containers/Container.d.ts

@@ -0,0 +1,84 @@
+import { ContainerComponentProps, ContainerProps } from 'containers';
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+import type { AnyObject } from 'typescript';
+export declare const Container: ({ id, type, wide, props, compact, children, metadata, isMobile, }: {
+    type: import("containers").ContainerType;
+    metadata: import("containers").MetadataType;
+} & Partial<{
+    containerTemplateType: "row_content_container";
+    wide: Partial<{
+        containerStyle: import("@emotion/serialize").CSSObject;
+        containerProps: Partial<{
+            position: import("containers").ContainerPositionType;
+            alignItems: import("containers").ContainerAlignItemsType;
+            scrollBehaviour: import("containers").ContainerScrollBehaviourType;
+            cornerRadius: number | import("theme").SizesTypes;
+            gap: import("theme").SizesTypes;
+            styles: import("@emotion/utils").SerializedStyles;
+            paddingTop: import("theme").SizesTypes;
+            paddingBottom: import("theme").SizesTypes;
+            paddingLeft: import("theme").SizesTypes;
+            paddingRight: import("theme").SizesTypes;
+            autoplay: boolean;
+            autoplayDuration: number;
+            formProps: import("containers").FormContainerProps;
+            formStepProps: import("containers").FormStepContainerProps;
+            border: string;
+            activeChildrenIds: string[];
+            activeOrganismIds: string[];
+            padding: import("containers").Padding;
+        }>;
+    }>;
+    compact: Partial<{
+        containerStyle: import("@emotion/serialize").CSSObject;
+        containerProps: Partial<{
+            position: import("containers").ContainerPositionType;
+            alignItems: import("containers").ContainerAlignItemsType;
+            scrollBehaviour: import("containers").ContainerScrollBehaviourType;
+            cornerRadius: number | import("theme").SizesTypes;
+            gap: import("theme").SizesTypes;
+            styles: import("@emotion/utils").SerializedStyles;
+            paddingTop: import("theme").SizesTypes;
+            paddingBottom: import("theme").SizesTypes;
+            paddingLeft: import("theme").SizesTypes;
+            paddingRight: import("theme").SizesTypes;
+            autoplay: boolean;
+            autoplayDuration: number;
+            formProps: import("containers").FormContainerProps;
+            formStepProps: import("containers").FormStepContainerProps;
+            border: string;
+            activeChildrenIds: string[];
+            activeOrganismIds: string[];
+            padding: import("containers").Padding;
+        }>;
+    }>;
+    props: Partial<{
+        position: import("containers").ContainerPositionType;
+        alignItems: import("containers").ContainerAlignItemsType;
+        scrollBehaviour: import("containers").ContainerScrollBehaviourType;
+        cornerRadius: number | import("theme").SizesTypes;
+        gap: import("theme").SizesTypes;
+        styles: import("@emotion/utils").SerializedStyles;
+        paddingTop: import("theme").SizesTypes;
+        paddingBottom: import("theme").SizesTypes;
+        paddingLeft: import("theme").SizesTypes;
+        paddingRight: import("theme").SizesTypes;
+        autoplay: boolean;
+        autoplayDuration: number;
+        formProps: import("containers").FormContainerProps;
+        formStepProps: import("containers").FormStepContainerProps;
+        border: string;
+        activeChildrenIds: string[];
+        activeOrganismIds: string[];
+        padding: import("containers").Padding;
+    }>;
+    isMobile: boolean;
+}> & {
+    children?: ReactNode;
+} & {
+    id: string;
+}) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const ContainerComponent: ({ config, tabsProps, id, type, items, metadata, formData, setFormData, isMobile, isConfigurationMode, }: ContainerComponentProps & {
+    formData?: AnyObject | undefined;
+    setFormData?: Dispatch<SetStateAction<AnyObject>> | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/cjs/containers/Container.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { ContainerComponent, ContainerComponentProps, StateConfigType } from 'containers';
+declare const meta: Meta<typeof ContainerComponent>;
+export default meta;
+declare type Story = StoryFn<ContainerComponentProps>;
+export declare const Container: Story;
+export declare const stateObject: StateConfigType;

package/dist/cjs/containers/FormContainer.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { ValidationMode } from 'react-hook-form';
+export declare type FormContainerProps = PropsWithChildren<{
+    mode?: keyof ValidationMode;
+    id?: string;
+    isTrigger?: boolean;
+}>;
+export declare const FormContainer: ({ mode, children, id, isTrigger, }: FormContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/containers/FormOrganismItem.d.ts

@@ -0,0 +1,11 @@
+import { ContainerComponentProps } from 'containers/types/types';
+import { Dispatch, SetStateAction } from 'react';
+import { AnyObject } from 'typescript';
+export declare type FormOrganismItemProps = {
+    item: ContainerComponentProps;
+    activeChildrenIds: string[];
+    formData?: AnyObject;
+    setFormData?: Dispatch<SetStateAction<AnyObject>>;
+    isMobile?: boolean;
+};
+export declare const FormOrganismItem: ({ formData, setFormData, isMobile, ...props }: FormOrganismItemProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,9 @@
+import { FormStepContainerProps, MetadataType } from 'containers';
+import { PropsWithChildren } from 'react';
+import { InputFieldTypes } from '../fieldsConfiguration';
+export declare type StepContainerProps = PropsWithChildren<Partial<FormStepContainerProps>> & {
+    id: string;
+    metadata?: MetadataType;
+};
+export declare const parsedDateValue: (value: string, type: InputFieldTypes) => string;
+export declare const FormStepContainer: ({ order, id, metadata, formStepStyles, }: StepContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,8 @@
+import { Molecule } from 'containers';
+import { TabGroupProps } from 'molecules';
+export declare type InternalLinkAliases = 'account-information' | 'forgot-password' | 'change-password' | 'login' | 'account-creation' | 'landing';
+export declare type RuntimeRoutes = '/account-info' | '/forgot-password' | '/change-password' | '/login' | '/account-creation' | '/landing';
+export declare const MoleculeItem: ({ type, config, attributes, tabsProps, form, id, formData, setFormData, isMobile, metadata, organismLibraryMoleculeId, }: Molecule & {
+    tabsProps?: Pick<TabGroupProps<string, string>, "tabs" | "activeTabKey" | "onTabChange"> | undefined;
+    isMobile?: boolean | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/cjs/containers/helpers.d.ts

@@ -0,0 +1,6 @@
+import { ContainerScrollBehaviourType, Padding } from 'containers/types/types';
+import { ThemeSizesType } from 'theme';
+import { Nullable } from 'typescript';
+export declare const getScrollBehaviour: (scrollBehaviour?: ContainerScrollBehaviourType) => "overflow-y: scroll" | "overflow-x: scroll" | "overflow: visible" | "overflow: unset";
+export declare const getPadding: (padding: Padding, sizes: ThemeSizesType) => string;
+export declare const isInViewport: (element: Nullable<HTMLElement>) => boolean;

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

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

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

@@ -0,0 +1,16 @@
+import { ConditionConfig, ConditionCriteria } from 'containers/types/types';
+import type { 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;
+export declare type FormDataForCheckingCriteria = {
+    [dataFieldId: string]: string | string[] | {
+        [subtypeId: string]: string | string[];
+    };
+};
+export declare type GetEvaluateCriteriaFunctionParams = {
+    criteriaList?: ConditionCriteria[];
+    data?: FormDataForCheckingCriteria;
+};
+export declare const getEvaluateCriteriaFunction: ({ criteriaList, data, }: GetEvaluateCriteriaFunctionParams) => (criteria?: ConditionCriteria) => boolean;

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

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

package/dist/cjs/containers/hooks/useFormOrganismItem.d.ts

@@ -0,0 +1,3 @@
+import { FormOrganismItemProps } from 'containers/FormOrganismItem';
+import { ContainerComponentProps } from 'containers/types/types';
+export declare const useFormOrganismItem: ({ item, activeChildrenIds }: FormOrganismItemProps) => ContainerComponentProps | undefined;

package/dist/cjs/containers/hooks/useSetFormData.d.ts

@@ -0,0 +1,10 @@
+import { DataConnectionValues } from 'containers/types/moleculeTypes';
+import { Dispatch, SetStateAction } from 'react';
+import type { AnyObject } from 'typescript';
+declare type UseSetFormDataProps<DefaultValueType> = {
+    defaultValue?: DefaultValueType;
+    dataModelField?: DataConnectionValues;
+    setFormData?: Dispatch<SetStateAction<AnyObject>>;
+};
+export declare const useSetFormData: <DefaultValueType>({ setFormData, defaultValue, dataModelField, }: UseSetFormDataProps<DefaultValueType>) => void;
+export {};

package/dist/cjs/containers/hooks/useStateListenerValue.d.ts

@@ -0,0 +1,18 @@
+declare type UseStateListenerValueProps = {
+    stateListenerId?: string;
+    isAction?: boolean;
+};
+export declare const useStateListenerValue: ({ stateListenerId, isAction, }: UseStateListenerValueProps) => {
+    isStateDisabled: boolean;
+    isStateVisible: boolean;
+    stateValue?: undefined;
+} | {
+    isStateDisabled: boolean;
+    isStateVisible: boolean;
+    stateValue: (string & Partial<Record<string, never>>) | (true & Partial<Record<string | number | typeof Symbol.iterator, never>>) | ({
+        value?: string | number | undefined;
+    } & Record<string, {
+        value?: string | number | undefined;
+    }> & Partial<Record<number | typeof Symbol.iterator, never>>) | (import("..").ActionEventType & Partial<Record<number | typeof Symbol.iterator, never>>) | (import("..").ProcessTrackerStateValue & Partial<Record<string | number | typeof Symbol.iterator, never>>);
+};
+export {};

package/dist/cjs/containers/hooks/useStateModifierHandler.d.ts

@@ -0,0 +1,7 @@
+declare type ActionTypeType = 'click' | 'start' | 'complete' | 'close';
+interface UseStateModifierHandlerProps {
+    isTrigger?: boolean;
+    id: string;
+}
+export declare const useStateModifierHandler: ({ id, isTrigger, }: UseStateModifierHandlerProps) => (actionType: ActionTypeType) => void;
+export {};

package/dist/cjs/containers/hooks/useStateViewModifierHandler.d.ts

@@ -0,0 +1,2 @@
+import { MetadataStateConfig } from 'containers/types/types';
+export declare const useStateViewModifierHandler: (itemStateConfig?: MetadataStateConfig[]) => string | undefined;

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

@@ -0,0 +1,5 @@
+export * from './Container';
+export * from './types/types';
+export * from './types/moleculeTypes';
+export { ContainerWrapper, ConfigurationItemInfo } from './styles';
+export { FormOrganismItem } from './FormOrganismItem';