@zealicsolutions/web-ui 1.0.133 → 1.0.135

package/dist/esm/containers/styles.d.ts

@@ -0,0 +1,44 @@
+import { Interpolation, Theme } from '@emotion/react';
+import { ContainerProperties, ContainerProps } from 'containers/types/types';
+import { MouseEvent } from 'react';
+import { SizesTypes } from 'theme';
+export type ConfigurationItemInfo = {
+    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+    onDoubleClick?: (e: MouseEvent<HTMLDivElement>) => void;
+    className?: string;
+    'data-configuration-id'?: string;
+    css?: Interpolation<Theme>;
+};
+export declare const ContainerWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Pick<ContainerProps, "type"> & {
+    containerProps?: Partial<{
+        position: import("containers/types/types").ContainerPositionType;
+        alignItems: import("containers/types/types").ContainerAlignItemsType;
+        scrollBehaviour: import("containers/types/types").ContainerScrollBehaviourType;
+        cornerRadius: number | SizesTypes;
+        gap: SizesTypes;
+        styles: import("@emotion/react").SerializedStyles;
+        paddingTop: SizesTypes;
+        paddingBottom: SizesTypes;
+        paddingLeft: SizesTypes;
+        paddingRight: SizesTypes;
+        autoplay: boolean;
+        autoplayDuration: number;
+        formProps: import("containers/types/types").FormContainerProps;
+        formStepProps: import("containers/types/types").FormStepContainerProps;
+        border: string;
+        activeChildrenIds: string[];
+        activeOrganismIds: string[];
+        padding: import("containers/types/types").Padding;
+        enableBackgroundImage: boolean;
+        replicatorFieldId?: string | undefined;
+    }> | undefined;
+    properties?: ContainerProperties | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const getConfigurationWrapperStyle: ({ selected, theme, }: {
+    selected?: boolean | undefined;
+    theme: Theme;
+}) => import("@emotion/react").SerializedStyles;
+export declare const slickStyles: import("@emotion/react").SerializedStyles;

package/dist/esm/containers/styles.js

@@ -0,0 +1,2 @@
+import{__makeTemplateObject as n}from"tslib";import{css as o}from"@emotion/react";import e from"@emotion/styled";import{getPadding as r,getScrollBehaviour as i,getBackgroundImageStyles as t}from"containers/helpers";import{defaultTheme as s}from"theme";var a,l,d,c,p,b,f=["slider","form"],g=e.div(l||(l=n(["\n  ","\n"],["\n  ","\n"])),function(e){var s,l=e.type,d=void 0===l?"default":l,c=e.containerProps,p=e.properties,b=e.theme,g=b.sizes,u=b.colors,h=c||{},x=h.border,k=void 0===x?"":x,v=h.alignItems,m=void 0===v?"stretch":v,y=h.position,w=void 0===y?"static":y,z=h.gap,B=void 0===z?0:z,D=h.cornerRadius,S=void 0===D?0:D,I=h.paddingTop,j=void 0===I?0:I,A=h.paddingBottom,R=void 0===A?0:A,X=h.paddingLeft,E=void 0===X?0:X,F=h.paddingRight,L=void 0===F?0:F,P=h.scrollBehaviour,T=h.styles,q=p||{},C=q.enableBackgroundImage,G=q.backgroundImage,H=k.split(" "),J=H[0],K=H[1],M=H[2],N=void 0===M?u.gray3:M,O=u[N]||N,Q=[j,R,E,L].some(Boolean)?r({top:j,bottom:R,left:E,right:L},g):"0px";return o(a||(a=n(["\n      display: flex;\n      align-items: ",";\n      ",";\n      position: ",";\n      gap: ","px;\n      border: "," "," ",";\n      border-radius: ","px;\n      padding: ",";\n      ",";\n      ",";\n      ","\n    "],["\n      display: flex;\n      align-items: ",";\n      ",";\n      position: ",";\n      gap: ","px;\n      border: "," "," ",";\n      border-radius: ","px;\n      padding: ",";\n      ",";\n      ",";\n      ","\n    "])),m,["row","column"].includes(d)?"flex-direction: ".concat(d,";"):"",w,B&&g[B],J,K,O,g[S]||S,Q,i(f.includes(d)?"none":P),T,t(null==C?void 0:C.value,null===(s=null==G?void 0:G.imageFile)||void 0===s?void 0:s.url))}),u=function(e){var r=e.selected,i=e.theme,t=(null==i?void 0:i.colors)||{primary:"#930EB5",deepBlue:"#3704ef"};return o(p||(p=n(["\n    cursor: pointer;\n\n    ","\n  "],["\n    cursor: pointer;\n\n    ","\n  "])),r?o(d||(d=n(["\n          outline: 2px solid ",";\n        "],["\n          outline: 2px solid ",";\n        "])),t.primary):o(c||(c=n(["\n          :hover:not(:has([data-configuration-id] *:hover)):not(:focus-visible) {\n            outline: 1px solid ",";\n          }\n        "],["\n          :hover:not(:has([data-configuration-id] *:hover)):not(:focus-visible) {\n            outline: 1px solid ",";\n          }\n        "])),t.deepBlue||t.primary||"#3704ef"))},h=o(b||(b=n(["\n  width: 100%;\n  display: block;\n  min-height: 64px;\n\n  /* Dots Styles */\n  .slick-dots {\n    position: absolute;\n    bottom: 15px;\n    left: 50%;\n    transform: translateX(-50%);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    display: inline-flex;\n    width: fit-content;\n  }\n\n  .slick-dots li {\n    margin: 0 4px;\n\n    button {\n      background: transparent;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n\n      &:before {\n        font-size: 12px;\n        color: ","; /* unselected gray */\n        opacity: 1;\n        transition: color 0.3s ease, font-size 0.3s ease;\n      }\n\n      &:hover:before {\n        color: ","; /* lighter on hover */\n      }\n    }\n\n    &.slick-active button:before {\n      color: #ffffff; /* selected white */\n      font-size: 14px;\n      text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); /* shadow for visibility on white bg */\n    }\n  }\n\n  /* Arrow Buttons Styles */\n  .slick-prev,\n  .slick-next {\n    position: absolute;\n    top: 50%;\n    width: 20px;\n    height: 20px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    transform: translate(0, -50%);\n    cursor: pointer;\n    border: none;\n    outline: none;\n    background: rgba(0, 0, 0, 0.5);\n    color: white;\n    border-radius: 50%;\n    transition: background-color 0.3s ease, transform 0.3s ease;\n    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);\n\n    &:hover {\n      transform: translate(0, -50%) scale(1.2);\n      background: rgba(0, 0, 0, 0.7);\n    }\n\n    &:active,\n    &:focus {\n      transform: translate(0, -50%);\n      background: rgba(0, 0, 0, 0.5);\n      outline: none;\n    }\n\n    &:before {\n      font-size: 20px;\n      line-height: 1.15;\n      color: white; /* force arrow color to white */\n    }\n  }\n\n  .slick-prev {\n    z-index: 10;\n    left: 10px;\n    &:before {\n      content: '←';\n    }\n  }\n\n  .slick-next {\n    z-index: 10;\n    right: 10px;\n    &:before {\n      content: '→';\n    }\n  }\n\n  /* Disabled state for arrows */\n  .slick-prev.slick-disabled,\n  .slick-next.slick-disabled {\n    background: rgba(0, 0, 0, 0.2);\n    cursor: default;\n  }\n\n  .slick-prev.slick-disabled:hover,\n  .slick-next.slick-disabled:hover {\n    transform: translate(0, -50%);\n    background: rgba(0, 0, 0, 0.2);\n  }\n\n  .slick-prev.slick-disabled:before,\n  .slick-next.slick-disabled:before {\n    color: rgba(255, 255, 255, 0.9);\n    opacity: 1;\n  }\n"],["\n  width: 100%;\n  display: block;\n  min-height: 64px;\n\n  /* Dots Styles */\n  .slick-dots {\n    position: absolute;\n    bottom: 15px;\n    left: 50%;\n    transform: translateX(-50%);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    display: inline-flex;\n    width: fit-content;\n  }\n\n  .slick-dots li {\n    margin: 0 4px;\n\n    button {\n      background: transparent;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n\n      &:before {\n        font-size: 12px;\n        color: ","; /* unselected gray */\n        opacity: 1;\n        transition: color 0.3s ease, font-size 0.3s ease;\n      }\n\n      &:hover:before {\n        color: ","; /* lighter on hover */\n      }\n    }\n\n    &.slick-active button:before {\n      color: #ffffff; /* selected white */\n      font-size: 14px;\n      text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); /* shadow for visibility on white bg */\n    }\n  }\n\n  /* Arrow Buttons Styles */\n  .slick-prev,\n  .slick-next {\n    position: absolute;\n    top: 50%;\n    width: 20px;\n    height: 20px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    transform: translate(0, -50%);\n    cursor: pointer;\n    border: none;\n    outline: none;\n    background: rgba(0, 0, 0, 0.5);\n    color: white;\n    border-radius: 50%;\n    transition: background-color 0.3s ease, transform 0.3s ease;\n    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);\n\n    &:hover {\n      transform: translate(0, -50%) scale(1.2);\n      background: rgba(0, 0, 0, 0.7);\n    }\n\n    &:active,\n    &:focus {\n      transform: translate(0, -50%);\n      background: rgba(0, 0, 0, 0.5);\n      outline: none;\n    }\n\n    &:before {\n      font-size: 20px;\n      line-height: 1.15;\n      color: white; /* force arrow color to white */\n    }\n  }\n\n  .slick-prev {\n    z-index: 10;\n    left: 10px;\n    &:before {\n      content: '←';\n    }\n  }\n\n  .slick-next {\n    z-index: 10;\n    right: 10px;\n    &:before {\n      content: '→';\n    }\n  }\n\n  /* Disabled state for arrows */\n  .slick-prev.slick-disabled,\n  .slick-next.slick-disabled {\n    background: rgba(0, 0, 0, 0.2);\n    cursor: default;\n  }\n\n  .slick-prev.slick-disabled:hover,\n  .slick-next.slick-disabled:hover {\n    transform: translate(0, -50%);\n    background: rgba(0, 0, 0, 0.2);\n  }\n\n  .slick-prev.slick-disabled:before,\n  .slick-next.slick-disabled:before {\n    color: rgba(255, 255, 255, 0.9);\n    opacity: 1;\n  }\n"])),s.colors.gray3,s.colors.gray4);export{g as ContainerWrapper,u as getConfigurationWrapperStyle,h as slickStyles};
+//# sourceMappingURL=styles.js.map

package/dist/esm/containers/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/containers/styles.ts"],"sourcesContent":[null],"names":["excludeScrollBehaviourList","ContainerWrapper","styled","div","templateObject_2","__makeTemplateObject","_a","_c","type","containerProps","properties","_d","theme","sizes","colors","_e","_f","border","_g","alignItems","_h","position","_j","gap","_k","cornerRadius","_l","paddingTop","_m","paddingBottom","_o","paddingLeft","_p","paddingRight","scrollBehaviour","styles","_q","enableBackgroundImage","backgroundImage","_r","split","borderSize","borderVal","_s","color","gray3","borderColor","paddingValue","some","Boolean","getPadding","top","bottom","left","right","css","templateObject_1","includes","getScrollBehaviour","getBackgroundImageStyles","value","_b","imageFile","url","getConfigurationWrapperStyle","selected","primary","deepBlue","templateObject_5","templateObject_3","templateObject_4","slickStyles","defaultTheme","gray4"],"mappings":"4PAoBA,gBAAMA,EAA8C,CAAC,SAAU,QAElDC,EAAmBC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,OAAA,MAAA,CAKzC,OA6CE,QA5CC,SAACC,SAAEC,EAAAD,EAAAE,KAAAA,OAAI,IAAAD,EAAG,UAASA,EAAEE,EAAcH,EAAAG,eAAEC,EAAUJ,EAAAI,WAAEC,EAAwBL,EAAAM,MAAfC,EAAKF,EAAAE,MAAEC,EAAMH,EAAAG,OACjEC,EAYFN,GAAkB,GAXpBO,EAAAD,EAAAE,OAAAA,OAAM,IAAAD,EAAG,GAAEA,EACXE,eAAAC,aAAa,UAASD,EACtBE,EAAAL,EAAAM,SAAAA,OAAW,IAAAD,EAAA,SAAQA,EACnBE,EAAAP,EAAAQ,IAAAA,OAAG,IAAAD,EAAG,EAACA,EACPE,iBAAAC,aAAe,EAACD,EAChBE,EAAcX,EAAAY,WAAdA,OAAa,IAAAD,EAAA,IACbE,EAAAb,EAAAc,cAAAA,OAAa,IAAAD,EAAG,EAACA,EACjBE,gBAAAC,aAAc,EAACD,EACfE,EAAgBjB,EAAAkB,aAAhBA,OAAe,IAAAD,EAAA,IACfE,oBACAC,WAGIC,EAA6C1B,GAAc,CAAA,EAAzD2B,EAAqBD,EAAAC,sBAAEC,EAAeF,EAAAE,gBAExCC,EAAgDtB,EAAOuB,MAAM,KAA5DC,EAAUF,EAAA,GAAEG,EAASH,EAAA,GAAEI,OAAAC,aAAQ9B,EAAO+B,MAAKF,EAC5CG,EAAchC,EAAO8B,IAAyBA,EAC9CG,EAAe,CAACpB,EAAYE,EAAeE,EAAaE,GAAce,KAAKC,SAC7EC,EACE,CACEC,IAAKxB,EACLyB,OAAQvB,EACRwB,KAAMtB,EACNuB,MAAOrB,GAETpB,GAEF,MAEJ,OAAO0C,EAAGC,IAAAA,EAAAnD,EAAA,CAAA,8CAAA,YAAA,sBAAA,iBAAA,sBAAA,IAAA,IAAA,2BAAA,uBAAA,YAAA,YAAA,YAAA,UAAA,CAAA,8CAEiB,YAC2C,sBAChD,iBACI,sBACJ,IAAa,IAAe,2BACkB,uBAC3C,YACmE,YAClF,YACiF,YAT1Ec,EACb,CAAC,MAAO,UAAUsC,SAASjD,GAAQ,0BAAmBA,EAAI,KAAM,GACtDa,EACLE,GAAOV,EAAMU,GACVkB,EAAcC,EAAaI,EACpBjC,EAAMY,IAA+BA,EAC3CsB,EACTW,EAAmB1D,EAA2ByD,SAASjD,GAAQ,OAAS0B,GACxEC,EACAwB,EAAyBtB,aAAqB,EAArBA,EAAuBuB,MAAiC,QAA1BC,EAAAvB,aAAe,EAAfA,EAAiBwB,iBAAS,IAAAD,OAAA,EAAAA,EAAEE,KAEzF,GAGWC,EAA+B,SAAC1D,OAC3C2D,EAAQ3D,EAAA2D,SACRrD,EAAKN,EAAAM,MAMCE,GAASF,aAAK,EAALA,EAAOE,SAAU,CAAEoD,QAAS,UAAWC,SAAU,WAChE,OAAOZ,EAAGa,IAAAA,EAAA/D,EAAA,CAAA,iCAAA,QAAA,CAAA,iCAWH,UARH4D,EACEV,EAAGc,IAAAA,EAAAhE,EAAA,CAAA,kCAAA,eAAA,CAAA,kCACkC,iBAAdS,EAAOoD,SAE9BX,EAAGe,IAAAA,EAAAjE,EAAA,CAAA,uHAAA,4BAAA,CAAA,uHAEoE,8BAA9CS,EAAOqD,UAAYrD,EAAOoD,SAAW,WAItE,EAEaK,EAAchB,w8EAAG,2gBA6BY,8JAMA,qxDANzBiB,EAAa1D,OAAO+B,MAMpB2B,EAAa1D,OAAO2D"}

package/dist/esm/containers/types/moleculeItemTypes.d.ts

@@ -0,0 +1,119 @@
+import { LinkProperties, ObjectStateProperties, StateProperties, TextProperties } from 'containers';
+import { ChecklistItem, CustomStep, TextProps } from 'molecules';
+import { AccordionItem } from '../../molecules/Accordion/Accordion';
+import { DividerProps } from '../../molecules/Divider/Divider';
+import { ImageProps } from '../../molecules/Image/Image';
+import { MenuItemType } from '../../molecules/Menu/Menu';
+import { SimpleTextProps } from '../../molecules/SimpleText/SimpleText';
+import { SpeedDialActionItemType } from '../../molecules/SpeedDial/types';
+import { TabsItemProps } from '../../molecules/Tabs/Tabs';
+import type { StrictUnion } from '../../typescript';
+export type MoleculeItemTypes = 'stepper_item' | 'checklist_item' | 'accordion_item' | 'menu_item' | 'divider_item' | 'text_item' | 'tabs_item' | 'rich_text_item' | 'speed_dial_action_item' | 'image_item';
+export type BaseItem = {
+    id: string;
+    name: string;
+    type: MoleculeItemTypes;
+    instance: 'molecule_item';
+    organismLibraryMoleculeId: string;
+};
+export type StepperItemDTO = BaseItem & {
+    type: 'stepper_item';
+    config: {
+        props: Omit<CustomStep, 'title' | 'subText'>;
+    };
+    properties: {
+        title: TextProperties;
+        subText: TextProperties;
+    };
+};
+export type ChecklistItemDTO = BaseItem & {
+    type: 'checklist_item';
+    config: {
+        props: Omit<ChecklistItem, 'label'>;
+    };
+    properties: {
+        label: TextProperties;
+        objectState: ObjectStateProperties;
+    };
+};
+export type AccordionItemDTO = BaseItem & {
+    type: 'accordion_item';
+    config: {
+        props: Omit<AccordionItem, 'text' | 'subText' | 'bodyText'>;
+    };
+    properties: {
+        text: TextProperties;
+        subText: TextProperties;
+        bodyText: TextProperties;
+    };
+};
+export type MenuItemDTO = BaseItem & {
+    type: 'menu_item';
+    config: {
+        props: Omit<MenuItemType, 'text' | 'link' | 'disabled'>;
+    };
+    properties: {
+        text: TextProperties;
+        link: LinkProperties;
+        disabled: StateProperties;
+    };
+};
+export type TabsItemDTO = BaseItem & {
+    type: 'tabs_item';
+    config: {
+        props: Omit<TabsItemProps, 'label' | 'link'>;
+    };
+    properties: {
+        label: TextProperties;
+        link: LinkProperties;
+    };
+};
+export type DividerItemDTO = BaseItem & {
+    type: 'divider_item';
+    config: {
+        props: DividerProps;
+    };
+    properties: Record<string, never>;
+};
+export type TextItemDTO = BaseItem & {
+    type: 'text_item';
+    config: {
+        props: Omit<SimpleTextProps, 'text'>;
+    };
+    properties: {
+        text: TextProperties;
+    };
+};
+export type RichTextItemDTO = BaseItem & {
+    type: 'rich_text_item';
+    config: {
+        props: Omit<TextProps, 'text' | 'isRichText' | 'htmlElementId' | 'configurationItemInfo'>;
+    };
+};
+export type SpeedDialActionItemDTO = BaseItem & {
+    type: 'speed_dial_action_item';
+    config: {
+        props: Omit<SpeedDialActionItemType, 'id' | 'type' | 'link'>;
+    };
+    properties: {
+        link: LinkProperties;
+        tooltipText: TextProperties;
+    };
+};
+export type ImageItemDTO = BaseItem & {
+    type: 'image_item';
+    config: {
+        props: Omit<ImageProps, 'src' | 'alt' | 'onClick' | 'moleculeId' | 'configurationItemInfo'>;
+    };
+    properties: {
+        image: {
+            imageSource?: string;
+            imageFile?: {
+                url: string;
+            };
+        };
+        alt: TextProperties;
+        link: LinkProperties;
+    };
+};
+export type MoleculeItemDTO = StrictUnion<StepperItemDTO | ChecklistItemDTO | AccordionItemDTO | MenuItemDTO | TabsItemDTO | DividerItemDTO | TextItemDTO | SpeedDialActionItemDTO | ImageItemDTO>;