@e1011/es-kit 1.0.175 → 1.0.178

package/dist/hooks/esm/index.css

@@ -52,6 +52,25 @@
   min-height: 0;
   border-radius: initial;
 }
+.divider-module_divider-line__6CesR {
+  position: relative;
+  display: block;
+  transition: opacity, width, height 250ms ease-in-out;
+  background-color: var(--color);
+  opacity: var(--opacity);
+}
+.divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
+  height: var(--length);
+  left: var(--left);
+  width: var(--width);
+  margin: var(--margin);
+}
+.divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
+  width: var(--length);
+  left: var(--left);
+  height: var(--height);
+  margin: var(--margin);
+}
 .CollapsibleContainer-module_collapsible-container__u0Jmm {
   transform-origin: 0% 0%;
   opacity: 0;
@@ -85,22 +104,16 @@
   max-width: var(--prop-value);
   opacity: 1;
 }
-.divider-module_divider-line__6CesR {
-  position: relative;
-  display: block;
-  transition: opacity, width, height 250ms ease-in-out;
-  background-color: var(--color);
-  opacity: var(--opacity);
+.flowLayout-module_flowLayout__VHpnY {
+  overflow: auto;
 }
-.divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
-  height: var(--length);
-  left: var(--left);
-  width: var(--width);
-  margin: var(--margin);
+.flowLayout-module_flowLayout__VHpnY .flowLayout-module_beforeContent__rY-mW {
+  display: flex;
+  width: 100%;
+  min-width: 0;
 }
-.divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
-  width: var(--length);
-  left: var(--left);
-  height: var(--height);
-  margin: var(--margin);
+.flowLayout-module_flowLayout__VHpnY .flowLayout-module_afterContent__Hlh8v {
+  display: flex;
+  width: 100%;
+  min-width: 0;
 }

package/dist/hooks/index.css

@@ -52,6 +52,25 @@
   min-height: 0;
   border-radius: initial;
 }
+.divider-module_divider-line__6CesR {
+  position: relative;
+  display: block;
+  transition: opacity, width, height 250ms ease-in-out;
+  background-color: var(--color);
+  opacity: var(--opacity);
+}
+.divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
+  height: var(--length);
+  left: var(--left);
+  width: var(--width);
+  margin: var(--margin);
+}
+.divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
+  width: var(--length);
+  left: var(--left);
+  height: var(--height);
+  margin: var(--margin);
+}
 .CollapsibleContainer-module_collapsible-container__u0Jmm {
   transform-origin: 0% 0%;
   opacity: 0;
@@ -85,22 +104,16 @@
   max-width: var(--prop-value);
   opacity: 1;
 }
-.divider-module_divider-line__6CesR {
-  position: relative;
-  display: block;
-  transition: opacity, width, height 250ms ease-in-out;
-  background-color: var(--color);
-  opacity: var(--opacity);
+.flowLayout-module_flowLayout__VHpnY {
+  overflow: auto;
 }
-.divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
-  height: var(--length);
-  left: var(--left);
-  width: var(--width);
-  margin: var(--margin);
+.flowLayout-module_flowLayout__VHpnY .flowLayout-module_beforeContent__rY-mW {
+  display: flex;
+  width: 100%;
+  min-width: 0;
 }
-.divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
-  width: var(--length);
-  left: var(--left);
-  height: var(--height);
-  margin: var(--margin);
+.flowLayout-module_flowLayout__VHpnY .flowLayout-module_afterContent__Hlh8v {
+  display: flex;
+  width: 100%;
+  min-width: 0;
 }

package/dist/lib/cjs/index.css

@@ -103,4 +103,17 @@
   fill: var(--icon-content-color);
   width: var(--height);
   height: var(--width);
+}
+.flowLayout-module_flowLayout__VHpnY {
+  overflow: auto;
+}
+.flowLayout-module_flowLayout__VHpnY .flowLayout-module_beforeContent__rY-mW {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+}
+.flowLayout-module_flowLayout__VHpnY .flowLayout-module_afterContent__Hlh8v {
+  display: flex;
+  width: 100%;
+  min-width: 0;
 }

package/dist/lib/cjs/src/core/ui/components/container/CollapsibleContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleContainer.js","sources":["../../../../../../../../src/core/ui/components/container/CollapsibleContainer.tsx"],"sourcesContent":["import { FC, useRef, useState, memo, ReactNode,\n  useEffect, useLayoutEffect, useMemo, CSSProperties, PropsWithChildren } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport classes from './CollapsibleContainer.module.scss'\nimport { LayoutBoxProps } from './layoutBox.types'\n\n\n/**\n * Mapping of element property names for calculating dimensions.\n */\nconst elementPropNameMap: Record<string, string> = {\n  width: 'scrollWidth',\n  height: 'scrollHeight',\n}\n\n/**\n * Props for the CollapsibleContainer component.\n */\nexport type CollapsibleContainerProps = PropsWithChildren & LayoutBoxProps & {\n  collapsed?: boolean\n  collapseHandler?: (collapsed: boolean) => void\n  children?: ReactNode\n  className?: string\n  horizontal?: boolean\n} & CSSProperties\n\n/**\n * CollapsibleContainer component.\n *\n * @type {React.FC<CollapsibleContainerProps>}\n * @returns {React.ReactElement} The CollapsibleContainer.\n */\nexport const CollapsibleContainer: FC<CollapsibleContainerProps> = memo(({\n  collapsed = false, collapseHandler, children, horizontal = false, className = '', id, ...props\n}: CollapsibleContainerProps) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [contentProp, setContentProp] = useState(0)\n\n  const { dataProps, restProps: style } = useParseProps(props)\n\n  const vertical = !horizontal\n\n  useEffect(() => {\n    collapseHandler?.(collapsed)\n  }, [collapseHandler, collapsed])\n\n  useLayoutEffect(() => {\n    if (containerRef?.current) {\n      const propName = vertical ? 'height' : 'width'\n\n      // TODO test with requestAnimationFrame\n      setTimeout(() => {\n        if (containerRef?.current) {\n          setContentProp((containerRef.current as any)[elementPropNameMap[propName]])\n        }\n      }, 100)\n    }\n  }, [containerRef, vertical])\n\n  const styleProps: CSSProperties = useMemo(() => ({\n    '--prop-name': vertical ? 'height' : 'width',\n    '--prop-max-name': vertical ? 'max-height' : 'max-width',\n    '--prop-value': `${contentProp}px`,\n    ...style,\n  } as CSSProperties), [vertical, style, contentProp])\n\n  const classNames = useMemo(() => {\n    const classNames = [vertical ? classes.vertical : classes.horizontal]\n\n    if (collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.collapsed)\n    }\n    if (!collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.expanded)\n    }\n    return classNames.join(' ')\n  }, [collapsed, contentProp, vertical])\n\n  return (\n    <div\n      id={`${(typeof id !== 'undefined' && id) || id}`}\n      className={`${classes['collapsible-container']} ${classNames} ${className} `}\n      ref={containerRef}\n      style={styleProps}\n      {...dataProps}\n      data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n    >\n      {children}\n    </div>\n  )\n})\n\nCollapsibleContainer.displayName = 'CollapsibleContainer'\n"],"names":["elementPropNameMap","width","height","CollapsibleContainer","memo","_ref","collapsed","collapseHandler","children","horizontal","className","id","props","containerRef","useRef","contentProp","setContentProp","useState","dataProps","restProps","style","useParseProps","vertical","useEffect","useLayoutEffect","current","propName","setTimeout","styleProps","useMemo","concat","classNames","classes","push","expanded","join","React","createElement","_extends","ref","dataTestId","displayName"],"mappings":"wVAYA,MAAMA,EAA6C,CACjDC,MAAO,cACPC,OAAQ,gBAoBGC,EAAsDC,EAAIA,MAACC,IAEvC,IAFwCC,UACvEA,GAAY,EAAKC,gBAAEA,EAAeC,SAAEA,EAAQC,WAAEA,GAAa,EAAKC,UAAEA,EAAY,GAAEC,GAAEA,KAAOC,GAC/DP,EAC1B,MAAMQ,EAAeC,SAAuB,OACrCC,EAAaC,GAAkBC,EAAQA,SAAC,IAEzCC,UAAEA,EAAWC,UAAWC,GAAUC,EAAAA,cAAcT,GAEhDU,GAAYb,EAElBc,EAAAA,WAAU,KACRhB,SAAAA,EAAkBD,EAAU,GAC3B,CAACC,EAAiBD,IAErBkB,EAAAA,iBAAgB,KACd,GAAIX,SAAAA,EAAcY,QAAS,CACzB,MAAMC,EAAWJ,EAAW,SAAW,QAGvCK,YAAW,KACLd,SAAAA,EAAcY,SAChBT,EAAgBH,EAAaY,QAAgBzB,EAAmB0B,IAClE,GACC,IACL,IACC,CAACb,EAAcS,IAElB,MAAMM,EAA4BC,EAAAA,SAAQ,KAAO,CAC/C,cAAeP,EAAW,SAAW,QACrC,kBAAmBA,EAAW,aAAe,YAC7C,eAAcQ,GAAAA,OAAKf,EAAe,SAC/BK,KACgB,CAACE,EAAUF,EAAOL,IAEjCgB,EAAaF,EAAAA,SAAQ,KACzB,MAAME,EAAa,CAACT,EAAWU,EAAAA,QAAQV,SAAWU,EAAAA,QAAQvB,YAQ1D,OANIH,GAAaS,GAAbT,MAA4BS,GAC9BgB,EAAWE,KAAKD,UAAQ1B,YAErBA,GAAaS,GAAd,MAA6BA,GAC/BgB,EAAWE,KAAKD,UAAQE,UAEnBH,EAAWI,KAAK,IAAI,GAC1B,CAAC7B,EAAWS,EAAaO,IAE5B,OACEc,MAAAC,cAAA,MAAAC,UAAA,CACE3B,GAAE,GAAAmB,YAAoB,IAAPnB,GAAsBA,GAAOA,GAC5CD,UAASoB,GAAAA,OAAKE,EAAAA,QAAQ,yBAAwBF,KAAAA,OAAIC,EAAU,KAAAD,OAAIpB,EAAa,KAC7E6B,IAAK1B,EACLO,MAAOQ,GACHV,EAAS,CACb,cAAaA,EAAUsB,YAActB,EAAU,gBAAkBP,IAEhEH,EACG,IAIVL,EAAqBsC,YAAc"}
+{"version":3,"file":"CollapsibleContainer.js","sources":["../../../../../../../../src/core/ui/components/container/CollapsibleContainer.tsx"],"sourcesContent":["import { FC, useRef, useState, memo, ReactNode,\n  useEffect, useLayoutEffect, useMemo, CSSProperties, PropsWithChildren } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport classes from './CollapsibleContainer.module.scss'\nimport { LayoutBoxProps } from './layoutBox.types'\n\n\n/**\n * Mapping of element property names for calculating dimensions.\n */\nconst elementPropNameMap: Record<string, string> = {\n  width: 'scrollWidth',\n  height: 'scrollHeight',\n}\n\n/**\n * Props for the CollapsibleContainer component.\n */\nexport type CollapsibleContainerProps = PropsWithChildren & Omit<LayoutBoxProps, 'ref'> & {\n  collapsed?: boolean\n  collapseHandler?: (collapsed: boolean) => void\n  children?: ReactNode\n  className?: string\n  horizontal?: boolean\n} & CSSProperties\n\n/**\n * CollapsibleContainer component.\n *\n * @type {React.FC<CollapsibleContainerProps>}\n * @returns {React.ReactElement} The CollapsibleContainer.\n */\nexport const CollapsibleContainer: FC<CollapsibleContainerProps> = memo(({\n  collapsed = false, collapseHandler, children, horizontal = false, className = '', id, ...props\n}: CollapsibleContainerProps) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [contentProp, setContentProp] = useState(0)\n\n  const { dataProps, restProps: style } = useParseProps(props)\n\n  const vertical = !horizontal\n\n  useEffect(() => {\n    collapseHandler?.(collapsed)\n  }, [collapseHandler, collapsed])\n\n  useLayoutEffect(() => {\n    if (containerRef?.current) {\n      const propName = vertical ? 'height' : 'width'\n\n      // TODO test with requestAnimationFrame\n      setTimeout(() => {\n        if (containerRef?.current) {\n          setContentProp((containerRef.current as any)[elementPropNameMap[propName]])\n        }\n      }, 100)\n    }\n  }, [containerRef, vertical])\n\n  const styleProps: CSSProperties = useMemo(() => ({\n    '--prop-name': vertical ? 'height' : 'width',\n    '--prop-max-name': vertical ? 'max-height' : 'max-width',\n    '--prop-value': `${contentProp}px`,\n    ...style,\n  } as CSSProperties), [vertical, style, contentProp])\n\n  const classNames = useMemo(() => {\n    const classNames = [vertical ? classes.vertical : classes.horizontal]\n\n    if (collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.collapsed)\n    }\n    if (!collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.expanded)\n    }\n    return classNames.join(' ')\n  }, [collapsed, contentProp, vertical])\n\n  return (\n    <div\n      id={`${(typeof id !== 'undefined' && id) || id}`}\n      className={`${classes['collapsible-container']} ${classNames} ${className} `}\n      ref={containerRef}\n      style={styleProps}\n      {...dataProps}\n      data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n    >\n      {children}\n    </div>\n  )\n})\n\nCollapsibleContainer.displayName = 'CollapsibleContainer'\n"],"names":["elementPropNameMap","width","height","CollapsibleContainer","memo","_ref","collapsed","collapseHandler","children","horizontal","className","id","props","containerRef","useRef","contentProp","setContentProp","useState","dataProps","restProps","style","useParseProps","vertical","useEffect","useLayoutEffect","current","propName","setTimeout","styleProps","useMemo","concat","classNames","classes","push","expanded","join","React","createElement","_extends","ref","dataTestId","displayName"],"mappings":"wVAYA,MAAMA,EAA6C,CACjDC,MAAO,cACPC,OAAQ,gBAoBGC,EAAsDC,EAAIA,MAACC,IAEvC,IAFwCC,UACvEA,GAAY,EAAKC,gBAAEA,EAAeC,SAAEA,EAAQC,WAAEA,GAAa,EAAKC,UAAEA,EAAY,GAAEC,GAAEA,KAAOC,GAC/DP,EAC1B,MAAMQ,EAAeC,SAAuB,OACrCC,EAAaC,GAAkBC,EAAQA,SAAC,IAEzCC,UAAEA,EAAWC,UAAWC,GAAUC,EAAAA,cAAcT,GAEhDU,GAAYb,EAElBc,EAAAA,WAAU,KACRhB,SAAAA,EAAkBD,EAAU,GAC3B,CAACC,EAAiBD,IAErBkB,EAAAA,iBAAgB,KACd,GAAIX,SAAAA,EAAcY,QAAS,CACzB,MAAMC,EAAWJ,EAAW,SAAW,QAGvCK,YAAW,KACLd,SAAAA,EAAcY,SAChBT,EAAgBH,EAAaY,QAAgBzB,EAAmB0B,IAClE,GACC,IACL,IACC,CAACb,EAAcS,IAElB,MAAMM,EAA4BC,EAAAA,SAAQ,KAAO,CAC/C,cAAeP,EAAW,SAAW,QACrC,kBAAmBA,EAAW,aAAe,YAC7C,eAAcQ,GAAAA,OAAKf,EAAe,SAC/BK,KACgB,CAACE,EAAUF,EAAOL,IAEjCgB,EAAaF,EAAAA,SAAQ,KACzB,MAAME,EAAa,CAACT,EAAWU,EAAAA,QAAQV,SAAWU,EAAAA,QAAQvB,YAQ1D,OANIH,GAAaS,GAAbT,MAA4BS,GAC9BgB,EAAWE,KAAKD,UAAQ1B,YAErBA,GAAaS,GAAd,MAA6BA,GAC/BgB,EAAWE,KAAKD,UAAQE,UAEnBH,EAAWI,KAAK,IAAI,GAC1B,CAAC7B,EAAWS,EAAaO,IAE5B,OACEc,MAAAC,cAAA,MAAAC,UAAA,CACE3B,GAAE,GAAAmB,YAAoB,IAAPnB,GAAsBA,GAAOA,GAC5CD,UAASoB,GAAAA,OAAKE,EAAAA,QAAQ,yBAAwBF,KAAAA,OAAIC,EAAU,KAAAD,OAAIpB,EAAa,KAC7E6B,IAAK1B,EACLO,MAAOQ,GACHV,EAAS,CACb,cAAaA,EAAUsB,YAActB,EAAU,gBAAkBP,IAEhEH,EACG,IAIVL,EAAqBsC,YAAc"}

package/dist/lib/cjs/src/core/ui/components/container/LayoutBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutBox.js","sources":["../../../../../../../../src/core/ui/components/container/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\nimport classes from './layoutBox.module.scss'\n\n\n/**\n * Map of flex values for resolving flex alignment and justification.\n * @type {Record<string, string>}\n */\nconst flexValueMap: Record<string, string> = {\n  start: 'flex-start',\n  'flex-start': 'flex-start',\n  end: 'flex-end',\n  'flex-end': 'flex-end',\n}\n\n/**\n * Resolves flex alignment and justification properties based on the provided value.\n * @param {string | undefined} value - The value to resolve.\n * @returns {string | undefined} - Resolved flex property value.\n */\nconst resolveFlexProps = (value?: string): string | undefined => (value ? (flexValueMap[value] || value) : value)\n\n/**\n * Forwarded ref version of the LayoutBox component.\n * @param {LayoutBoxProps} props - Props for the LayoutBox component.\n * @param {LegacyRef<HTMLDivElement> | undefined} ref - Ref for accessing the underlying DOM element.\n * @returns {JSX.Element} - Rendered LayoutBox component.\n */\nconst LayoutBoxRefForwarded = forwardRef(({\n  id, style, children, tabIndex, className = '', onClick, column, ...props\n}: LayoutBoxProps, ref: LegacyRef<HTMLDivElement> | undefined) => {\n  const { dataProps, restProps } = useParseProps(props)\n\n  /**\n   * Memoized onClick event properties.\n   * @type {{ onClick?: () => void; onKeyDown?: () => void; role?: string; tabIndex?: number }}\n   */\n  const onClickProps = useMemo(() => (onClick ? ({\n    onClick,\n    onKeyDown: onClick,\n    role: 'button',\n    tabIndex: -1,\n  }) : {}), [onClick])\n\n  /**\n   * Memoized resolved direction based on the column prop.\n   * @type {LayoutDirection}\n   */\n  const resolvedColumn = useMemo(() => ((\n    column !== undefined && column === true)\n    ? LayoutDirection.COLUMN\n    : null), [column])\n\n  /**\n   * Memoized styles combining parsed props and additional styles.\n   * @type {CSSProperties}\n   */\n  const styles = useMemo(() => (\n    {\n      ...restProps,\n      ...(restProps.align ? { alignItems: resolveFlexProps(restProps.align as string) } : {}),\n      ...(restProps.justify ? { justifyContent: resolveFlexProps(restProps.justify as string) } : {}),\n      ...(restProps.direction || resolvedColumn ? { flexDirection: restProps.direction || resolvedColumn } : {}),\n      ...style,\n    }\n  ), [resolvedColumn, restProps, style])\n\n  return (\n    <div\n      {...(id ? { id: `${id}` } : {})}\n      ref={ref}\n      tabIndex={tabIndex}\n      className={`${(classes as any)['layout-box']} ${className}`}\n      style={styles as CSSProperties}\n      {...dataProps}\n      data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n      {...onClickProps}\n    >\n      {children}\n    </div>\n  )\n})\n\nLayoutBoxRefForwarded.displayName = 'LayoutBoxRefForwarded'\n\n/**\n * Memoized and memoized LayoutBox component.\n * @type {FC<LayoutBoxProps>}\n */\nexport const LayoutBox: FC<LayoutBoxProps> = memo<LayoutBoxProps>(LayoutBoxRefForwarded)\n\nLayoutBox.displayName = 'LayoutBox'\n"],"names":["flexValueMap","start","end","resolveFlexProps","value","LayoutBoxRefForwarded","forwardRef","_ref","ref","id","style","children","tabIndex","className","onClick","column","props","dataProps","restProps","useParseProps","onClickProps","useMemo","onKeyDown","role","resolvedColumn","undefined","LayoutDirection","COLUMN","styles","align","alignItems","justify","justifyContent","direction","flexDirection","React","createElement","_extends","concat","classes","dataTestId","displayName","LayoutBox","memo"],"mappings":"oRAYA,MAAMA,EAAuC,CAC3CC,MAAO,aACP,aAAc,aACdC,IAAK,WACL,WAAY,YAQRC,EAAoBC,GAAwCA,GAASJ,EAAaI,IAAmBA,EAQrGC,EAAwBC,EAAUA,YAAC,CAAAC,EAEtBC,KAA+C,IAFxBC,GACxCA,EAAEC,MAAEA,EAAKC,SAAEA,EAAQC,SAAEA,EAAQC,UAAEA,EAAY,GAAEC,QAAEA,EAAOC,OAAEA,KAAWC,GACpDT,EACf,MAAMU,UAAEA,EAASC,UAAEA,GAAcC,EAAAA,cAAcH,GAMzCI,EAAeC,WAAQ,IAAOP,EAAW,CAC7CA,UACAQ,UAAWR,EACXS,KAAM,SACNX,UAAW,GACR,CAAG,GAAE,CAACE,IAMLU,EAAiBH,EAAOA,SAAC,SAClBI,IAAXV,IAAmC,IAAXA,EACtBW,EAAAA,gBAAgBC,OAChB,MAAO,CAACZ,IAMNa,EAASP,EAAAA,SAAQ,KACrB,IACKH,KACCA,EAAUW,MAAQ,CAAEC,WAAY3B,EAAiBe,EAAUW,QAAqB,MAChFX,EAAUa,QAAU,CAAEC,eAAgB7B,EAAiBe,EAAUa,UAAuB,MACxFb,EAAUe,WAAaT,EAAiB,CAAEU,cAAehB,EAAUe,WAAaT,GAAmB,MACpGd,KAEJ,CAACc,EAAgBN,EAAWR,IAE/B,OACEyB,MAAAC,oBAAAC,EAAAA,QAAA,CAAA,EACO5B,EAAK,CAAEA,GAAE,GAAA6B,OAAK7B,IAAS,GAAE,CAC9BD,IAAKA,EACLI,SAAUA,EACVC,UAAS,GAAAyB,OAAMC,EAAO,QAAS,cAAaD,KAAAA,OAAIzB,GAChDH,MAAOkB,GACHX,EAAS,CACb,cAAaA,EAAUuB,YAAcvB,EAAU,gBAAkBR,GAC7DW,GAEHT,EACG,IAIVN,EAAsBoC,YAAc,8BAMvBC,EAAgCC,EAAIA,KAAiBtC,GAElEqC,EAAUD,YAAc"}
+{"version":3,"file":"LayoutBox.js","sources":["../../../../../../../../src/core/ui/components/container/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\nimport classes from './layoutBox.module.scss'\n\n\n/**\n * Map of flex values for resolving flex alignment and justification.\n * @type {Record<string, string>}\n */\nconst flexValueMap: Record<string, string> = {\n  start: 'flex-start',\n  'flex-start': 'flex-start',\n  end: 'flex-end',\n  'flex-end': 'flex-end',\n}\n\n/**\n * Resolves flex alignment and justification properties based on the provided value.\n * @param {string | undefined} value - The value to resolve.\n * @returns {string | undefined} - Resolved flex property value.\n */\nconst resolveFlexProps = (value?: string): string | undefined => (value ? (flexValueMap[value] || value) : value)\n\n/**\n * Forwarded ref version of the LayoutBox component.\n * @param {LayoutBoxProps} props - Props for the LayoutBox component.\n * @param {LegacyRef<HTMLDivElement> | undefined} ref - Ref for accessing the underlying DOM element.\n * @returns {JSX.Element} - Rendered LayoutBox component.\n */\nconst LayoutBoxRefForwarded = forwardRef(({\n  id, style, children, tabIndex, className = '', onClick, column, ...props\n}: LayoutBoxProps, ref: LegacyRef<HTMLDivElement> | undefined | null) => {\n  const { dataProps, restProps } = useParseProps(props)\n\n  /**\n   * Memoized onClick event properties.\n   * @type {{ onClick?: () => void; onKeyDown?: () => void; role?: string; tabIndex?: number }}\n   */\n  const onClickProps = useMemo(() => (onClick ? ({\n    onClick,\n    onKeyDown: onClick,\n    role: 'button',\n    tabIndex: -1,\n  }) : {}), [onClick])\n\n  /**\n   * Memoized resolved direction based on the column prop.\n   * @type {LayoutDirection}\n   */\n  const resolvedColumn = useMemo(() => ((\n    column !== undefined && column === true)\n    ? LayoutDirection.COLUMN\n    : null), [column])\n\n  /**\n   * Memoized styles combining parsed props and additional styles.\n   * @type {CSSProperties}\n   */\n  const styles = useMemo(() => (\n    {\n      ...restProps,\n      ...(restProps.align ? { alignItems: resolveFlexProps(restProps.align as string) } : {}),\n      ...(restProps.justify ? { justifyContent: resolveFlexProps(restProps.justify as string) } : {}),\n      ...(restProps.direction || resolvedColumn ? { flexDirection: restProps.direction || resolvedColumn } : {}),\n      ...style,\n    }\n  ), [resolvedColumn, restProps, style])\n\n  return (\n    <div\n      {...(id ? { id: `${id}` } : {})}\n      ref={ref}\n      tabIndex={tabIndex}\n      className={`${(classes as any)['layout-box']} ${className}`}\n      style={styles as CSSProperties}\n      {...dataProps}\n      data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n      {...onClickProps}\n    >\n      {children}\n    </div>\n  )\n})\n\nLayoutBoxRefForwarded.displayName = 'LayoutBoxRefForwarded'\n\n/**\n * Memoized and memoized LayoutBox component.\n * @type {FC<LayoutBoxProps>}\n */\nexport const LayoutBox: FC<LayoutBoxProps> = memo<LayoutBoxProps>(LayoutBoxRefForwarded)\n\nLayoutBox.displayName = 'LayoutBox'\n"],"names":["flexValueMap","start","end","resolveFlexProps","value","LayoutBoxRefForwarded","forwardRef","_ref","ref","id","style","children","tabIndex","className","onClick","column","props","dataProps","restProps","useParseProps","onClickProps","useMemo","onKeyDown","role","resolvedColumn","undefined","LayoutDirection","COLUMN","styles","align","alignItems","justify","justifyContent","direction","flexDirection","React","createElement","_extends","concat","classes","dataTestId","displayName","LayoutBox","memo"],"mappings":"oRAYA,MAAMA,EAAuC,CAC3CC,MAAO,aACP,aAAc,aACdC,IAAK,WACL,WAAY,YAQRC,EAAoBC,GAAwCA,GAASJ,EAAaI,IAAmBA,EAQrGC,EAAwBC,EAAUA,YAAC,CAAAC,EAEtBC,KAAsD,IAF/BC,GACxCA,EAAEC,MAAEA,EAAKC,SAAEA,EAAQC,SAAEA,EAAQC,UAAEA,EAAY,GAAEC,QAAEA,EAAOC,OAAEA,KAAWC,GACpDT,EACf,MAAMU,UAAEA,EAASC,UAAEA,GAAcC,EAAAA,cAAcH,GAMzCI,EAAeC,WAAQ,IAAOP,EAAW,CAC7CA,UACAQ,UAAWR,EACXS,KAAM,SACNX,UAAW,GACR,CAAG,GAAE,CAACE,IAMLU,EAAiBH,EAAOA,SAAC,SAClBI,IAAXV,IAAmC,IAAXA,EACtBW,EAAAA,gBAAgBC,OAChB,MAAO,CAACZ,IAMNa,EAASP,EAAAA,SAAQ,KACrB,IACKH,KACCA,EAAUW,MAAQ,CAAEC,WAAY3B,EAAiBe,EAAUW,QAAqB,MAChFX,EAAUa,QAAU,CAAEC,eAAgB7B,EAAiBe,EAAUa,UAAuB,MACxFb,EAAUe,WAAaT,EAAiB,CAAEU,cAAehB,EAAUe,WAAaT,GAAmB,MACpGd,KAEJ,CAACc,EAAgBN,EAAWR,IAE/B,OACEyB,MAAAC,oBAAAC,EAAAA,QAAA,CAAA,EACO5B,EAAK,CAAEA,GAAE,GAAA6B,OAAK7B,IAAS,GAAE,CAC9BD,IAAKA,EACLI,SAAUA,EACVC,UAAS,GAAAyB,OAAMC,EAAO,QAAS,cAAaD,KAAAA,OAAIzB,GAChDH,MAAOkB,GACHX,EAAS,CACb,cAAaA,EAAUuB,YAAcvB,EAAU,gBAAkBR,GAC7DW,GAEHT,EACG,IAIVN,EAAsBoC,YAAc,8BAMvBC,EAAgCC,EAAIA,KAAiBtC,GAElEqC,EAAUD,YAAc"}

package/dist/lib/cjs/src/core/ui/components/container/layoutBox.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"layoutBox.types.js","sources":["../../../../../../../../src/core/ui/components/container/layoutBox.types.ts"],"sourcesContent":["import { CSSProperties, PropsWithChildren, Ref } from 'react'\n\n/**\n * Enum representing the possible layout directions.\n */\nexport enum LayoutDirection {\n  ROW = 'row',\n  COLUMN = 'column',\n}\n\n/**\n * Props for the LayoutBox component.\n */\nexport type LayoutBoxProps = PropsWithChildren & {\n  /** Unique identifier for the component. */\n  id?: string | number\n  /** CSS flex property. */\n  flex?: string\n  /** CSS flexGrow property. */\n  flexGrow?: string | number\n  /** Text alignment within the box. */\n  alignText?: 'center' | 'right' | 'left'\n  /** Direction of the layout (row or column). */\n  direction?: LayoutDirection | string\n  /** CSS flexShrink property. */\n  flexShrink?: string | number\n  /** CSS flexBasis property. */\n  flexBasis?: string\n  /** CSS flexWrap property. */\n  flexWrap?: string\n  /** CSS justify-content property. */\n  justify?: string\n  /** CSS align-items property. */\n  align?: string\n  /** CSS align-self property. */\n  alignSelf?: string\n  /** CSS margin property. */\n  margin?: string\n  /** CSS padding property. */\n  padding?: string\n  /** CSS width property. */\n  width?: string\n  /** CSS height property. */\n  height?: string\n  /** CSS maxWidth property. */\n  maxWidth?: string\n  /** CSS maxHeight property. */\n  maxHeight?: string\n  /** CSS minWidth property. */\n  minWidth?: string\n  /** CSS minHeight property. */\n  minHeight?: string\n  /** Gap between child elements. */\n  gap?: string\n  /** CSS borderRadius property. */\n  borderRadius?: string\n  /** Additional inline styles for the component. */\n  style?: Record<string, unknown> | null\n  /** Additional class name(s) for the component. */\n  className?: string\n  /** Tab index for keyboard navigation. */\n  tabIndex?: number\n  /** Ref for accessing the underlying DOM element. */\n  ref?: Ref<HTMLDivElement> | undefined\n  /** Callback function for click event. */\n  onClick?: () => void\n  /** If true, sets the layout direction to column. */\n  column?: boolean\n} & Omit<CSSProperties, 'direction'>;\n"],"names":["LayoutDirection"],"mappings":"oEAKYA,IAAAA,WAAAA,GAAe,OAAfA,EAAe,IAAA,MAAfA,EAAe,OAAA,SAAfA,CAAe,EAAA"}
+{"version":3,"file":"layoutBox.types.js","sources":["../../../../../../../../src/core/ui/components/container/layoutBox.types.ts"],"sourcesContent":["import { CSSProperties, LegacyRef, PropsWithChildren } from 'react'\n\n/**\n * Enum representing the possible layout directions.\n */\nexport enum LayoutDirection {\n  ROW = 'row',\n  COLUMN = 'column',\n}\n\n/**\n * Props for the LayoutBox component.\n */\nexport type LayoutBoxProps = PropsWithChildren & {\n  /** Unique identifier for the component. */\n  id?: string | number\n  /** CSS flex property. */\n  flex?: string\n  /** CSS flexGrow property. */\n  flexGrow?: string | number\n  /** Text alignment within the box. */\n  alignText?: 'center' | 'right' | 'left'\n  /** Direction of the layout (row or column). */\n  direction?: LayoutDirection | string\n  /** CSS flexShrink property. */\n  flexShrink?: string | number\n  /** CSS flexBasis property. */\n  flexBasis?: string\n  /** CSS flexWrap property. */\n  flexWrap?: string\n  /** CSS justify-content property. */\n  justify?: string\n  /** CSS align-items property. */\n  align?: string\n  /** CSS align-self property. */\n  alignSelf?: string\n  /** CSS margin property. */\n  margin?: string\n  /** CSS padding property. */\n  padding?: string\n  /** CSS width property. */\n  width?: string\n  /** CSS height property. */\n  height?: string\n  /** CSS maxWidth property. */\n  maxWidth?: string\n  /** CSS maxHeight property. */\n  maxHeight?: string\n  /** CSS minWidth property. */\n  minWidth?: string\n  /** CSS minHeight property. */\n  minHeight?: string\n  /** Gap between child elements. */\n  gap?: string\n  /** CSS borderRadius property. */\n  borderRadius?: string\n  /** Additional inline styles for the component. */\n  style?: Record<string, unknown> | null\n  /** Additional class name(s) for the component. */\n  className?: string\n  /** Tab index for keyboard navigation. */\n  tabIndex?: number\n  /** Ref for accessing the underlying DOM element. */\n  ref?: LegacyRef<HTMLDivElement> | undefined | null\n  /** Callback function for click event. */\n  onClick?: () => void\n  /** If true, sets the layout direction to column. */\n  column?: boolean\n} & Omit<CSSProperties, 'direction'>;\n"],"names":["LayoutDirection"],"mappings":"oEAKYA,IAAAA,WAAAA,GAAe,OAAfA,EAAe,IAAA,MAAfA,EAAe,OAAA,SAAfA,CAAe,EAAA"}

package/dist/lib/cjs/src/core/ui/components/molecules/layouts/FlowLayout.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=require("./flowLayout.module.scss.js"),o=require("../../container/LayoutBox.js"),r=require("../../../../utils/helpers/ui.js");const s=t.memo((s=>{let{itemDTOs:l,containerProps:n={},defaultItemLayoutProps:u={},numColumns:c=1,className:m="",beforeContent:i,afterContent:d,...p}=s;const y=t.useMemo((()=>c>0?{display:"grid",gridTemplateColumns:"".concat("1fr ".repeat(c)),width:"100%",height:"unset"}:{display:"flex"}),[c]);return React.createElement(o.LayoutBox,e.extends({width:"100%",column:!0,className:r.classNames(a.default.flowLayout,m)},p),i&&React.createElement("span",{className:a.default.beforeContent,tabIndex:-1},i),React.createElement(o.LayoutBox,e.extends({flexWrap:"wrap",gap:"1rem",style:y,width:"100%"},n),l.map((t=>{let{id:a,spanColumn:r,Component:s,layoutProps:l,...n}=t;return React.createElement(o.LayoutBox,e.extends({key:a},u,l,r?{style:{width:"calc(".concat(Math.round(100*r),"% - ").concat(16*r,"px)")}}:{}),React.createElement(s,n))}))),d&&React.createElement("span",{className:a.default.afterContent,tabIndex:-1},d))}));s.displayName="FlowLayout",exports.FlowLayout=s;
+//# sourceMappingURL=FlowLayout.js.map

package/dist/lib/cjs/src/core/ui/components/molecules/layouts/FlowLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowLayout.js","sources":["../../../../../../../../../src/core/ui/components/molecules/layouts/FlowLayout.tsx"],"sourcesContent":["import { memo, FC, useMemo } from 'react'\n\nimport { LayoutBox } from '../../container'\nimport { classNames } from '../../../../utils'\n\nimport type { FlowLayoutProps, ItemDTOType } from './flowLayout.types'\nimport classes from './flowLayout.module.scss'\n\n\n/**\n * Renders a flexible flow layout that automatically arranges child components based on specified columns and spacing.\n * This component is highly customizable through its props,\n * allowing for dynamic layouts responsive to the content and screen size.\n *\n * Utilizes a grid layout by default, falling back to flex layout\n * if `numColumns` is not greater than 0. Each item's width\n * and placement can be controlled via `spanColumn` on\n * individual items, with additional layout props provided for fine-tuning.\n *\n * @param {FlowLayoutProps} props The properties to configure the FlowLayout.\n * @param {ItemDTOType[]} props.itemDTOs Array of item DTOs defining the\n * components to render and their layout properties.\n * @param {Partial<LayoutBoxProps>} [props.containerProps={}] Optional.\n * Props to be spread onto the container `LayoutBox`, allowing for custom styles and behaviors.\n * @param {Partial<LayoutBoxProps>} [props.defaultItemLayoutProps={}] Optional.\n * Default layout properties applied to each item, unless overridden by item-specific props.\n * @param {number} [props.numColumns=1] Optional.\n *  Defines the number of columns in the grid. Affects item distribution and layout.\n * @param {string} [props.className=''] Optional.\n * Additional CSS class names to apply to the layout container for custom styling.\n * @param {ReactNode} [props.beforeContent] Optional.\n * Content to render before the main items. Useful for titles, descriptions, or custom components.\n * @param {ReactNode} [props.afterContent] Optional.\n Content to render after the main items. Can be used for additional information or actions related to the items.\n * @returns {React.ReactElement} The rendered FlowLayout component.\n */\nexport const FlowLayout: FC<FlowLayoutProps> = memo<FlowLayoutProps>(({\n  itemDTOs,\n  containerProps = {},\n  defaultItemLayoutProps = {},\n  numColumns = 1,\n  className = '',\n  beforeContent,\n  afterContent,\n  ...props\n}: FlowLayoutProps) => {\n  // Calculation for column styles based on the number of columns specified.\n  const columnStyles = useMemo(() => (numColumns > 0\n    ? {\n      display: 'grid',\n      gridTemplateColumns: `${'1fr '.repeat(numColumns)}`,\n      width: '100%',\n      height: 'unset',\n    }\n    : {\n      display: 'flex',\n    }\n  ), [numColumns])\n\n  return (\n    <LayoutBox\n      width='100%'\n      column\n      className={classNames(classes.flowLayout, className)}\n      {...props}\n    >\n      {beforeContent && (\n        <span className={classes.beforeContent} tabIndex={-1}>\n          {beforeContent}\n        </span>\n      )}\n      <LayoutBox\n        flexWrap='wrap'\n        gap='1rem'\n        style={columnStyles}\n        width='100%'\n        {...containerProps}\n      >\n        {itemDTOs.map(({ id, spanColumn, Component, layoutProps, ...props }: ItemDTOType) => (\n          <LayoutBox\n            key={id}\n            {...defaultItemLayoutProps}\n            {...layoutProps}\n            {...(spanColumn\n              ? { style: { width: `calc(${Math.round(spanColumn * 100)}% - ${spanColumn * 16}px)` } }\n              : {})}\n          >\n            <Component {...props} />\n          </LayoutBox>\n        ))}\n      </LayoutBox>\n      {afterContent && (\n        <span className={classes.afterContent} tabIndex={-1}>\n          {afterContent}\n        </span>\n      )}\n    </LayoutBox>\n  )\n})\n\nexport type FlowLayoutType = typeof FlowLayout;\n\n// Set display name for the component.\nFlowLayout.displayName = 'FlowLayout'\n"],"names":["FlowLayout","memo","_ref","itemDTOs","containerProps","defaultItemLayoutProps","numColumns","className","beforeContent","afterContent","props","columnStyles","useMemo","display","gridTemplateColumns","concat","repeat","width","height","React","createElement","LayoutBox","_extends","column","classNames","classes","flowLayout","tabIndex","flexWrap","gap","style","map","_ref2","id","spanColumn","Component","layoutProps","key","Math","round","displayName"],"mappings":"sSAoCaA,EAAkCC,EAAIA,MAAkBC,IAS9C,IAT+CC,SACpEA,EAAQC,eACRA,EAAiB,CAAE,EAAAC,uBACnBA,EAAyB,CAAE,EAAAC,WAC3BA,EAAa,EAACC,UACdA,EAAY,GAAEC,cACdA,EAAaC,aACbA,KACGC,GACaR,EAEhB,MAAMS,EAAeC,EAAAA,SAAQ,IAAON,EAAa,EAC7C,CACAO,QAAS,OACTC,oBAAmB,GAAAC,OAAK,OAAOC,OAAOV,IACtCW,MAAO,OACPC,OAAQ,SAER,CACAL,QAAS,SAEV,CAACP,IAEJ,OACEa,MAAAC,cAACC,EAASA,UAAAC,UAAA,CACRL,MAAM,OACNM,QAAM,EACNhB,UAAWiB,EAAUA,WAACC,UAAQC,WAAYnB,IACtCG,GAEHF,GACCW,MAAAC,cAAA,OAAA,CAAMb,UAAWkB,EAAO,QAACjB,cAAemB,UAAW,GAChDnB,GAGLW,MAAAC,cAACC,EAAAA,UAASC,EAAAA,QAAA,CACRM,SAAS,OACTC,IAAI,OACJC,MAAOnB,EACPM,MAAM,QACFb,GAEHD,EAAS4B,KAAIC,IAAA,IAACC,GAAEA,EAAEC,WAAEA,EAAUC,UAAEA,EAASC,YAAEA,KAAgB1B,GAAoBsB,EAAA,OAC9Eb,MAAAC,cAACC,EAASA,UAAAC,UAAA,CACRe,IAAKJ,GACD5B,EACA+B,EACCF,EACD,CAAEJ,MAAO,CAAEb,cAAKF,OAAUuB,KAAKC,MAAmB,IAAbL,GAAiBnB,QAAAA,OAAoB,GAAbmB,EAAe,SAC5E,CAAA,GAEJf,MAAAC,cAACe,EAAczB,GACL,KAGfD,GACCU,MAAAC,cAAA,OAAA,CAAMb,UAAWkB,EAAO,QAAChB,aAAckB,UAAW,GAC/ClB,GAGK,IAOhBT,EAAWwC,YAAc"}

package/dist/lib/cjs/src/core/ui/components/molecules/layouts/flowLayout.module.scss.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.default={flowLayout:"flowLayout-module_flowLayout__VHpnY",beforeContent:"flowLayout-module_beforeContent__rY-mW",afterContent:"flowLayout-module_afterContent__Hlh8v"};
+//# sourceMappingURL=flowLayout.module.scss.js.map

package/dist/lib/cjs/src/core/ui/components/molecules/layouts/flowLayout.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flowLayout.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/lib/cjs/src/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./core/hooks/useApi.js"),r=require("./core/hooks/useToggle.js"),t=require("./core/hooks/useTranslations.js"),o=require("./core/hooks/useOutsideClick.js"),s=require("./core/hooks/useResize.js"),i=require("./core/hooks/useClassNames.js"),a=require("./core/hooks/useParseProps.js"),l=require("./core/hooks/useThemePreference.js"),p=require("./core/utils/helpers/birthnumber.validator.js"),n=require("./core/utils/helpers/birthnumberCZSKvalidator.js"),c=require("./core/utils/helpers/fileValidator.js"),u=require("./core/utils/helpers/date.js"),x=require("./core/utils/helpers/deviceInfo.js"),m=require("./core/utils/helpers/emailMatcher.js"),d=require("./core/utils/helpers/file.js"),h=require("./core/utils/helpers/objectOperations.js"),T=require("./core/utils/helpers/other.js"),j=require("./core/utils/helpers/textValueOperations.js"),C=require("./core/utils/helpers/valueOperations.js"),S=require("./core/utils/helpers/cancelableDelayedFunction.js"),v=require("./core/utils/helpers/ui.js"),b=require("./core/utils/keyExtractor.js"),g=require("./core/utils/date.js"),F=require("./core/utils/webComponents/webComponent.utils.js"),q=require("./core/utils/appState/store/store.vanillajs.js"),f=require("./core/utils/appState/store/store.vanillajs.templates.js"),y=require("./core/utils/appState/store/useStore.react.js"),D=require("./core/constants/ui.constants.js"),I=require("./core/ui/utils/style.js"),z=require("./core/ui/components/container/LayoutBox.js"),O=require("./core/ui/components/container/layoutBox.types.js"),P=require("./core/ui/components/container/Flex.js"),V=require("./core/ui/components/container/Placeholder.js"),N=require("./core/ui/components/container/CollapsibleContainer.js"),k=require("./core/ui/components/container/ResizableContainer.js"),R=require("./core/ui/components/field/Field.js"),E=require("./core/ui/components/dividers/DividerLine.js"),L=require("./core/ui/components/icon/IconBase.js"),A=require("./core/ui/components/icon/Icon.js"),B=require("./core/ui/components/icon/IconWC.js");exports.useApi=e.useApi,exports.useToggle=r.useToggle,exports.createSafeT=t.createSafeT,exports.setUseTranslation=t.setUseTranslation,exports.useTranslations=t.useTranslations,exports.outsideClickHandler=o.outsideClickHandler,exports.useOutsideClick=o.useOutsideClick,exports.useResize=s.useResize,exports.useClassNames=i.useClassNames,exports.useParseProps=a.useParseProps,exports.baseThemes=l.baseThemes,exports.observeThemePreference=l.observeThemePreference,exports.switchColorTheme=l.switchColorTheme,exports.updateColorTheme=l.updateColorTheme,exports.useThemePreference=l.useThemePreference,exports.isBirthNumberValid=p.isBirthNumberValid,exports.getMatch=n.getMatch,exports.isValidFormat=n.isValidFormat,exports.isValidModulo11=n.isValidModulo11,exports.parse=n.parse,exports.regex=n.regex,exports.parseCSVdata=c.parseCSVdata,exports.validateCSVFile=c.validateCSVFile,exports.validateCSVlines=c.validateCSVlines,exports.validateJSONFile=c.validateJSONFile,exports.validateLineCellTrimmed=c.validateLineCellTrimmed,exports.validateLineNumColumns=c.validateLineNumColumns,exports.validateSDFFile=c.validateSDFFile,exports.DATE_FORMAT=u.DATE_FORMAT,exports.formatDateToTimestamp=u.formatDateToTimestamp,exports.getDate=u.getDate,exports.getDeviceId=x.getDeviceId,exports.emailMatch=m.emailMatch,exports.emailMatcher=m.emailMatcher,exports.regexBuilder=m.regexBuilder,exports.cleanCsvLines=d.cleanCsvLines,exports.formatFilePath=d.formatFilePath,exports.arrayToObjectTree=h.arrayToObjectTree,exports.chunkArray=h.chunkArray,exports.duplicatesInArray=h.duplicatesInArray,exports.formatJsonString=h.formatJsonString,exports.formatObj=h.formatObj,exports.formatObj2=h.formatObj2,exports.debounce=T.debounce,exports.delay=T.delay,exports.memoize=T.memoize,exports.memoizeComplex=T.memoizeComplex,exports.memoizer=T.memoizer,exports.nestedTernary=T.nestedTernary,exports.escapeRegExp=j.escapeRegExp,exports.fileNameExt=j.fileNameExt,exports.findStringInText=j.findStringInText,exports.normalizeString=j.normalizeString,exports.removeWhitespaces=j.removeWhitespaces,exports.sanitizeId=j.sanitizeId,exports.sanitizePathId=j.sanitizePathId,exports.toLowerCase=j.toLowerCase,exports.toUpperCase=j.toUpperCase,exports.truncateText=j.truncateText,exports.Operation=C.Operation,exports.decrementValue=C.decrementValue,exports.incerementValue=C.incerementValue,exports.numberDefined=C.numberDefined,exports.numberOperation=C.numberOperation,exports.restrictNumberInLimits=C.restrictNumberInLimits,exports.setValue=C.setValue,exports.cancelableSetInterval=S.cancelableSetInterval,exports.cancelableSetTimeout=S.cancelableSetTimeout,exports.classNames=v.classNames,exports.mapSerReplacer=v.mapSerReplacer,exports.noop=v.noop,exports.parseProps=v.parseProps,exports.keyExtractor=b.keyExtractor,exports.keyExtractorFunction=b.keyExtractorFunction,exports.dateRangeFormat=g.dateRangeFormat,exports.getDateTime=g.getDateTime,exports.getTimeFromNow=g.getTimeFromNow,exports.getTimeFromNowOriginal=g.getTimeFromNowOriginal,exports.getTimeTo=g.getTimeTo,exports.ced=F.ced,exports.createResolveAttribute=F.createResolveAttribute,exports.customElementDefine=F.customElementDefine,exports.resolveAttributes=F.resolveAttributes,exports.createStore=q.createStore,exports.createDataStore=f.createDataStore,exports.useStore=y.useStore,exports.useStoreApi=y.useStoreApi,exports.EventName=D.EventName,exports.calculateColors=I.calculateColors,exports.calculatePercColor=I.calculatePercColor,exports.convertHex=I.convertHex,exports.convertRGB=I.convertRGB,Object.defineProperty(exports,"defaultFontSize",{enumerable:!0,get:function(){return I.defaultFontSize}}),exports.pxToRem=I.pxToRem,exports.resolveStyleValue=I.resolveStyleValue,exports.setDefaultFontSize=I.setDefaultFontSize,exports.toHex=I.toHex,exports.LayoutBox=z.LayoutBox,exports.LayoutDirection=O.LayoutDirection,exports.Flex=P.Flex,exports.FlexTight=P.FlexTight,exports.FlexTightStyled=P.FlexTightStyled,exports.FlexWrapper=P.FlexWrapper,exports.Placeholder=V.Placeholder,exports.CollapsibleContainer=N.CollapsibleContainer,exports.ResizableContainer=k.ResizableContainer,exports.Field=R.Field,exports.FieldWrapper=R.FieldWrapper,exports.Select=R.Select,exports.setIconColor=R.setIconColor,exports.setIconComponent=R.setIconComponent,exports.DividerHorizontal=E.DividerHorizontal,exports.DividerLine=E.DividerLine,exports.DividerVertical=E.DividerVertical,exports.IconBase=L.IconBase,exports.Icon=A.Icon,exports.ESIcon=B.ESIcon,exports.ESIconBase=B.ESIconBase;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./core/hooks/useApi.js"),r=require("./core/hooks/useToggle.js"),t=require("./core/hooks/useTranslations.js"),o=require("./core/hooks/useOutsideClick.js"),s=require("./core/hooks/useResize.js"),i=require("./core/hooks/useClassNames.js"),a=require("./core/hooks/useParseProps.js"),l=require("./core/hooks/useThemePreference.js"),p=require("./core/utils/helpers/birthnumber.validator.js"),n=require("./core/utils/helpers/birthnumberCZSKvalidator.js"),c=require("./core/utils/helpers/fileValidator.js"),u=require("./core/utils/helpers/date.js"),x=require("./core/utils/helpers/deviceInfo.js"),m=require("./core/utils/helpers/emailMatcher.js"),d=require("./core/utils/helpers/file.js"),h=require("./core/utils/helpers/objectOperations.js"),T=require("./core/utils/helpers/other.js"),j=require("./core/utils/helpers/textValueOperations.js"),C=require("./core/utils/helpers/valueOperations.js"),S=require("./core/utils/helpers/cancelableDelayedFunction.js"),v=require("./core/utils/helpers/ui.js"),b=require("./core/utils/keyExtractor.js"),F=require("./core/utils/date.js"),g=require("./core/utils/webComponents/webComponent.utils.js"),q=require("./core/utils/appState/store/store.vanillajs.js"),f=require("./core/utils/appState/store/store.vanillajs.templates.js"),y=require("./core/utils/appState/store/useStore.react.js"),D=require("./core/constants/ui.constants.js"),I=require("./core/ui/utils/style.js"),z=require("./core/ui/components/container/LayoutBox.js"),O=require("./core/ui/components/container/layoutBox.types.js"),P=require("./core/ui/components/container/Flex.js"),V=require("./core/ui/components/container/Placeholder.js"),L=require("./core/ui/components/container/CollapsibleContainer.js"),N=require("./core/ui/components/container/ResizableContainer.js"),k=require("./core/ui/components/field/Field.js"),R=require("./core/ui/components/dividers/DividerLine.js"),E=require("./core/ui/components/icon/IconBase.js"),A=require("./core/ui/components/icon/Icon.js"),B=require("./core/ui/components/icon/IconWC.js"),w=require("./core/ui/components/molecules/layouts/FlowLayout.js");exports.useApi=e.useApi,exports.useToggle=r.useToggle,exports.createSafeT=t.createSafeT,exports.setUseTranslation=t.setUseTranslation,exports.useTranslations=t.useTranslations,exports.outsideClickHandler=o.outsideClickHandler,exports.useOutsideClick=o.useOutsideClick,exports.useResize=s.useResize,exports.useClassNames=i.useClassNames,exports.useParseProps=a.useParseProps,exports.baseThemes=l.baseThemes,exports.observeThemePreference=l.observeThemePreference,exports.switchColorTheme=l.switchColorTheme,exports.updateColorTheme=l.updateColorTheme,exports.useThemePreference=l.useThemePreference,exports.isBirthNumberValid=p.isBirthNumberValid,exports.getMatch=n.getMatch,exports.isValidFormat=n.isValidFormat,exports.isValidModulo11=n.isValidModulo11,exports.parse=n.parse,exports.regex=n.regex,exports.parseCSVdata=c.parseCSVdata,exports.validateCSVFile=c.validateCSVFile,exports.validateCSVlines=c.validateCSVlines,exports.validateJSONFile=c.validateJSONFile,exports.validateLineCellTrimmed=c.validateLineCellTrimmed,exports.validateLineNumColumns=c.validateLineNumColumns,exports.validateSDFFile=c.validateSDFFile,exports.DATE_FORMAT=u.DATE_FORMAT,exports.formatDateToTimestamp=u.formatDateToTimestamp,exports.getDate=u.getDate,exports.getDeviceId=x.getDeviceId,exports.emailMatch=m.emailMatch,exports.emailMatcher=m.emailMatcher,exports.regexBuilder=m.regexBuilder,exports.cleanCsvLines=d.cleanCsvLines,exports.formatFilePath=d.formatFilePath,exports.arrayToObjectTree=h.arrayToObjectTree,exports.chunkArray=h.chunkArray,exports.duplicatesInArray=h.duplicatesInArray,exports.formatJsonString=h.formatJsonString,exports.formatObj=h.formatObj,exports.formatObj2=h.formatObj2,exports.debounce=T.debounce,exports.delay=T.delay,exports.memoize=T.memoize,exports.memoizeComplex=T.memoizeComplex,exports.memoizer=T.memoizer,exports.nestedTernary=T.nestedTernary,exports.escapeRegExp=j.escapeRegExp,exports.fileNameExt=j.fileNameExt,exports.findStringInText=j.findStringInText,exports.normalizeString=j.normalizeString,exports.removeWhitespaces=j.removeWhitespaces,exports.sanitizeId=j.sanitizeId,exports.sanitizePathId=j.sanitizePathId,exports.toLowerCase=j.toLowerCase,exports.toUpperCase=j.toUpperCase,exports.truncateText=j.truncateText,exports.Operation=C.Operation,exports.decrementValue=C.decrementValue,exports.incerementValue=C.incerementValue,exports.numberDefined=C.numberDefined,exports.numberOperation=C.numberOperation,exports.restrictNumberInLimits=C.restrictNumberInLimits,exports.setValue=C.setValue,exports.cancelableSetInterval=S.cancelableSetInterval,exports.cancelableSetTimeout=S.cancelableSetTimeout,exports.classNames=v.classNames,exports.mapSerReplacer=v.mapSerReplacer,exports.noop=v.noop,exports.parseProps=v.parseProps,exports.keyExtractor=b.keyExtractor,exports.keyExtractorFunction=b.keyExtractorFunction,exports.dateRangeFormat=F.dateRangeFormat,exports.getDateTime=F.getDateTime,exports.getTimeFromNow=F.getTimeFromNow,exports.getTimeFromNowOriginal=F.getTimeFromNowOriginal,exports.getTimeTo=F.getTimeTo,exports.ced=g.ced,exports.createResolveAttribute=g.createResolveAttribute,exports.customElementDefine=g.customElementDefine,exports.resolveAttributes=g.resolveAttributes,exports.createStore=q.createStore,exports.createDataStore=f.createDataStore,exports.useStore=y.useStore,exports.useStoreApi=y.useStoreApi,exports.EventName=D.EventName,exports.calculateColors=I.calculateColors,exports.calculatePercColor=I.calculatePercColor,exports.convertHex=I.convertHex,exports.convertRGB=I.convertRGB,Object.defineProperty(exports,"defaultFontSize",{enumerable:!0,get:function(){return I.defaultFontSize}}),exports.pxToRem=I.pxToRem,exports.resolveStyleValue=I.resolveStyleValue,exports.setDefaultFontSize=I.setDefaultFontSize,exports.toHex=I.toHex,exports.LayoutBox=z.LayoutBox,exports.LayoutDirection=O.LayoutDirection,exports.Flex=P.Flex,exports.FlexTight=P.FlexTight,exports.FlexTightStyled=P.FlexTightStyled,exports.FlexWrapper=P.FlexWrapper,exports.Placeholder=V.Placeholder,exports.CollapsibleContainer=L.CollapsibleContainer,exports.ResizableContainer=N.ResizableContainer,exports.Field=k.Field,exports.FieldWrapper=k.FieldWrapper,exports.Select=k.Select,exports.setIconColor=k.setIconColor,exports.setIconComponent=k.setIconComponent,exports.DividerHorizontal=R.DividerHorizontal,exports.DividerLine=R.DividerLine,exports.DividerVertical=R.DividerVertical,exports.IconBase=E.IconBase,exports.Icon=A.Icon,exports.ESIcon=B.ESIcon,exports.ESIconBase=B.ESIconBase,exports.FlowLayout=w.FlowLayout;
 //# sourceMappingURL=index.js.map

package/dist/lib/esm/index.css

@@ -103,4 +103,17 @@
   fill: var(--icon-content-color);
   width: var(--height);
   height: var(--width);
+}
+.flowLayout-module_flowLayout__VHpnY {
+  overflow: auto;
+}
+.flowLayout-module_flowLayout__VHpnY .flowLayout-module_beforeContent__rY-mW {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+}
+.flowLayout-module_flowLayout__VHpnY .flowLayout-module_afterContent__Hlh8v {
+  display: flex;
+  width: 100%;
+  min-width: 0;
 }

package/dist/lib/esm/src/core/ui/components/container/CollapsibleContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleContainer.js","sources":["../../../../../../../../src/core/ui/components/container/CollapsibleContainer.tsx"],"sourcesContent":["import { FC, useRef, useState, memo, ReactNode,\n  useEffect, useLayoutEffect, useMemo, CSSProperties, PropsWithChildren } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport classes from './CollapsibleContainer.module.scss'\nimport { LayoutBoxProps } from './layoutBox.types'\n\n\n/**\n * Mapping of element property names for calculating dimensions.\n */\nconst elementPropNameMap: Record<string, string> = {\n  width: 'scrollWidth',\n  height: 'scrollHeight',\n}\n\n/**\n * Props for the CollapsibleContainer component.\n */\nexport type CollapsibleContainerProps = PropsWithChildren & LayoutBoxProps & {\n  collapsed?: boolean\n  collapseHandler?: (collapsed: boolean) => void\n  children?: ReactNode\n  className?: string\n  horizontal?: boolean\n} & CSSProperties\n\n/**\n * CollapsibleContainer component.\n *\n * @type {React.FC<CollapsibleContainerProps>}\n * @returns {React.ReactElement} The CollapsibleContainer.\n */\nexport const CollapsibleContainer: FC<CollapsibleContainerProps> = memo(({\n  collapsed = false, collapseHandler, children, horizontal = false, className = '', id, ...props\n}: CollapsibleContainerProps) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [contentProp, setContentProp] = useState(0)\n\n  const { dataProps, restProps: style } = useParseProps(props)\n\n  const vertical = !horizontal\n\n  useEffect(() => {\n    collapseHandler?.(collapsed)\n  }, [collapseHandler, collapsed])\n\n  useLayoutEffect(() => {\n    if (containerRef?.current) {\n      const propName = vertical ? 'height' : 'width'\n\n      // TODO test with requestAnimationFrame\n      setTimeout(() => {\n        if (containerRef?.current) {\n          setContentProp((containerRef.current as any)[elementPropNameMap[propName]])\n        }\n      }, 100)\n    }\n  }, [containerRef, vertical])\n\n  const styleProps: CSSProperties = useMemo(() => ({\n    '--prop-name': vertical ? 'height' : 'width',\n    '--prop-max-name': vertical ? 'max-height' : 'max-width',\n    '--prop-value': `${contentProp}px`,\n    ...style,\n  } as CSSProperties), [vertical, style, contentProp])\n\n  const classNames = useMemo(() => {\n    const classNames = [vertical ? classes.vertical : classes.horizontal]\n\n    if (collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.collapsed)\n    }\n    if (!collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.expanded)\n    }\n    return classNames.join(' ')\n  }, [collapsed, contentProp, vertical])\n\n  return (\n    <div\n      id={`${(typeof id !== 'undefined' && id) || id}`}\n      className={`${classes['collapsible-container']} ${classNames} ${className} `}\n      ref={containerRef}\n      style={styleProps}\n      {...dataProps}\n      data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n    >\n      {children}\n    </div>\n  )\n})\n\nCollapsibleContainer.displayName = 'CollapsibleContainer'\n"],"names":["elementPropNameMap","width","height","CollapsibleContainer","memo","_ref","collapsed","collapseHandler","children","horizontal","className","id","props","containerRef","useRef","contentProp","setContentProp","useState","dataProps","restProps","style","useParseProps","vertical","useEffect","useLayoutEffect","current","propName","setTimeout","styleProps","useMemo","concat","classNames","classes","push","expanded","join","React","createElement","_extends","ref","dataTestId","displayName"],"mappings":"gYAYA,MAAMA,EAA6C,CACjDC,MAAO,cACPC,OAAQ,gBAoBGC,EAAsDC,GAAKC,IAEvC,IAFwCC,UACvEA,GAAY,EAAKC,gBAAEA,EAAeC,SAAEA,EAAQC,WAAEA,GAAa,EAAKC,UAAEA,EAAY,GAAEC,GAAEA,KAAOC,GAC/DP,EAC1B,MAAMQ,EAAeC,EAAuB,OACrCC,EAAaC,GAAkBC,EAAS,IAEzCC,UAAEA,EAAWC,UAAWC,GAAUC,EAAcT,GAEhDU,GAAYb,EAElBc,GAAU,KACRhB,SAAAA,EAAkBD,EAAU,GAC3B,CAACC,EAAiBD,IAErBkB,GAAgB,KACd,GAAIX,SAAAA,EAAcY,QAAS,CACzB,MAAMC,EAAWJ,EAAW,SAAW,QAGvCK,YAAW,KACLd,SAAAA,EAAcY,SAChBT,EAAgBH,EAAaY,QAAgBzB,EAAmB0B,IAClE,GACC,IACL,IACC,CAACb,EAAcS,IAElB,MAAMM,EAA4BC,GAAQ,KAAO,CAC/C,cAAeP,EAAW,SAAW,QACrC,kBAAmBA,EAAW,aAAe,YAC7C,eAAcQ,GAAAA,OAAKf,EAAe,SAC/BK,KACgB,CAACE,EAAUF,EAAOL,IAEjCgB,EAAaF,GAAQ,KACzB,MAAME,EAAa,CAACT,EAAWU,EAAQV,SAAWU,EAAQvB,YAQ1D,OANIH,GAAaS,GAAbT,MAA4BS,GAC9BgB,EAAWE,KAAKD,EAAQ1B,YAErBA,GAAaS,GAAd,MAA6BA,GAC/BgB,EAAWE,KAAKD,EAAQE,UAEnBH,EAAWI,KAAK,IAAI,GAC1B,CAAC7B,EAAWS,EAAaO,IAE5B,OACEc,MAAAC,cAAA,MAAAC,EAAA,CACE3B,GAAE,GAAAmB,YAAoB,IAAPnB,GAAsBA,GAAOA,GAC5CD,UAASoB,GAAAA,OAAKE,EAAQ,yBAAwBF,KAAAA,OAAIC,EAAU,KAAAD,OAAIpB,EAAa,KAC7E6B,IAAK1B,EACLO,MAAOQ,GACHV,EAAS,CACb,cAAaA,EAAUsB,YAActB,EAAU,gBAAkBP,IAEhEH,EACG,IAIVL,EAAqBsC,YAAc"}
+{"version":3,"file":"CollapsibleContainer.js","sources":["../../../../../../../../src/core/ui/components/container/CollapsibleContainer.tsx"],"sourcesContent":["import { FC, useRef, useState, memo, ReactNode,\n  useEffect, useLayoutEffect, useMemo, CSSProperties, PropsWithChildren } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport classes from './CollapsibleContainer.module.scss'\nimport { LayoutBoxProps } from './layoutBox.types'\n\n\n/**\n * Mapping of element property names for calculating dimensions.\n */\nconst elementPropNameMap: Record<string, string> = {\n  width: 'scrollWidth',\n  height: 'scrollHeight',\n}\n\n/**\n * Props for the CollapsibleContainer component.\n */\nexport type CollapsibleContainerProps = PropsWithChildren & Omit<LayoutBoxProps, 'ref'> & {\n  collapsed?: boolean\n  collapseHandler?: (collapsed: boolean) => void\n  children?: ReactNode\n  className?: string\n  horizontal?: boolean\n} & CSSProperties\n\n/**\n * CollapsibleContainer component.\n *\n * @type {React.FC<CollapsibleContainerProps>}\n * @returns {React.ReactElement} The CollapsibleContainer.\n */\nexport const CollapsibleContainer: FC<CollapsibleContainerProps> = memo(({\n  collapsed = false, collapseHandler, children, horizontal = false, className = '', id, ...props\n}: CollapsibleContainerProps) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [contentProp, setContentProp] = useState(0)\n\n  const { dataProps, restProps: style } = useParseProps(props)\n\n  const vertical = !horizontal\n\n  useEffect(() => {\n    collapseHandler?.(collapsed)\n  }, [collapseHandler, collapsed])\n\n  useLayoutEffect(() => {\n    if (containerRef?.current) {\n      const propName = vertical ? 'height' : 'width'\n\n      // TODO test with requestAnimationFrame\n      setTimeout(() => {\n        if (containerRef?.current) {\n          setContentProp((containerRef.current as any)[elementPropNameMap[propName]])\n        }\n      }, 100)\n    }\n  }, [containerRef, vertical])\n\n  const styleProps: CSSProperties = useMemo(() => ({\n    '--prop-name': vertical ? 'height' : 'width',\n    '--prop-max-name': vertical ? 'max-height' : 'max-width',\n    '--prop-value': `${contentProp}px`,\n    ...style,\n  } as CSSProperties), [vertical, style, contentProp])\n\n  const classNames = useMemo(() => {\n    const classNames = [vertical ? classes.vertical : classes.horizontal]\n\n    if (collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.collapsed)\n    }\n    if (!collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n      classNames.push(classes.expanded)\n    }\n    return classNames.join(' ')\n  }, [collapsed, contentProp, vertical])\n\n  return (\n    <div\n      id={`${(typeof id !== 'undefined' && id) || id}`}\n      className={`${classes['collapsible-container']} ${classNames} ${className} `}\n      ref={containerRef}\n      style={styleProps}\n      {...dataProps}\n      data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n    >\n      {children}\n    </div>\n  )\n})\n\nCollapsibleContainer.displayName = 'CollapsibleContainer'\n"],"names":["elementPropNameMap","width","height","CollapsibleContainer","memo","_ref","collapsed","collapseHandler","children","horizontal","className","id","props","containerRef","useRef","contentProp","setContentProp","useState","dataProps","restProps","style","useParseProps","vertical","useEffect","useLayoutEffect","current","propName","setTimeout","styleProps","useMemo","concat","classNames","classes","push","expanded","join","React","createElement","_extends","ref","dataTestId","displayName"],"mappings":"gYAYA,MAAMA,EAA6C,CACjDC,MAAO,cACPC,OAAQ,gBAoBGC,EAAsDC,GAAKC,IAEvC,IAFwCC,UACvEA,GAAY,EAAKC,gBAAEA,EAAeC,SAAEA,EAAQC,WAAEA,GAAa,EAAKC,UAAEA,EAAY,GAAEC,GAAEA,KAAOC,GAC/DP,EAC1B,MAAMQ,EAAeC,EAAuB,OACrCC,EAAaC,GAAkBC,EAAS,IAEzCC,UAAEA,EAAWC,UAAWC,GAAUC,EAAcT,GAEhDU,GAAYb,EAElBc,GAAU,KACRhB,SAAAA,EAAkBD,EAAU,GAC3B,CAACC,EAAiBD,IAErBkB,GAAgB,KACd,GAAIX,SAAAA,EAAcY,QAAS,CACzB,MAAMC,EAAWJ,EAAW,SAAW,QAGvCK,YAAW,KACLd,SAAAA,EAAcY,SAChBT,EAAgBH,EAAaY,QAAgBzB,EAAmB0B,IAClE,GACC,IACL,IACC,CAACb,EAAcS,IAElB,MAAMM,EAA4BC,GAAQ,KAAO,CAC/C,cAAeP,EAAW,SAAW,QACrC,kBAAmBA,EAAW,aAAe,YAC7C,eAAcQ,GAAAA,OAAKf,EAAe,SAC/BK,KACgB,CAACE,EAAUF,EAAOL,IAEjCgB,EAAaF,GAAQ,KACzB,MAAME,EAAa,CAACT,EAAWU,EAAQV,SAAWU,EAAQvB,YAQ1D,OANIH,GAAaS,GAAbT,MAA4BS,GAC9BgB,EAAWE,KAAKD,EAAQ1B,YAErBA,GAAaS,GAAd,MAA6BA,GAC/BgB,EAAWE,KAAKD,EAAQE,UAEnBH,EAAWI,KAAK,IAAI,GAC1B,CAAC7B,EAAWS,EAAaO,IAE5B,OACEc,MAAAC,cAAA,MAAAC,EAAA,CACE3B,GAAE,GAAAmB,YAAoB,IAAPnB,GAAsBA,GAAOA,GAC5CD,UAASoB,GAAAA,OAAKE,EAAQ,yBAAwBF,KAAAA,OAAIC,EAAU,KAAAD,OAAIpB,EAAa,KAC7E6B,IAAK1B,EACLO,MAAOQ,GACHV,EAAS,CACb,cAAaA,EAAUsB,YAActB,EAAU,gBAAkBP,IAEhEH,EACG,IAIVL,EAAqBsC,YAAc"}

package/dist/lib/esm/src/core/ui/components/container/LayoutBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutBox.js","sources":["../../../../../../../../src/core/ui/components/container/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\nimport classes from './layoutBox.module.scss'\n\n\n/**\n * Map of flex values for resolving flex alignment and justification.\n * @type {Record<string, string>}\n */\nconst flexValueMap: Record<string, string> = {\n  start: 'flex-start',\n  'flex-start': 'flex-start',\n  end: 'flex-end',\n  'flex-end': 'flex-end',\n}\n\n/**\n * Resolves flex alignment and justification properties based on the provided value.\n * @param {string | undefined} value - The value to resolve.\n * @returns {string | undefined} - Resolved flex property value.\n */\nconst resolveFlexProps = (value?: string): string | undefined => (value ? (flexValueMap[value] || value) : value)\n\n/**\n * Forwarded ref version of the LayoutBox component.\n * @param {LayoutBoxProps} props - Props for the LayoutBox component.\n * @param {LegacyRef<HTMLDivElement> | undefined} ref - Ref for accessing the underlying DOM element.\n * @returns {JSX.Element} - Rendered LayoutBox component.\n */\nconst LayoutBoxRefForwarded = forwardRef(({\n  id, style, children, tabIndex, className = '', onClick, column, ...props\n}: LayoutBoxProps, ref: LegacyRef<HTMLDivElement> | undefined) => {\n  const { dataProps, restProps } = useParseProps(props)\n\n  /**\n   * Memoized onClick event properties.\n   * @type {{ onClick?: () => void; onKeyDown?: () => void; role?: string; tabIndex?: number }}\n   */\n  const onClickProps = useMemo(() => (onClick ? ({\n    onClick,\n    onKeyDown: onClick,\n    role: 'button',\n    tabIndex: -1,\n  }) : {}), [onClick])\n\n  /**\n   * Memoized resolved direction based on the column prop.\n   * @type {LayoutDirection}\n   */\n  const resolvedColumn = useMemo(() => ((\n    column !== undefined && column === true)\n    ? LayoutDirection.COLUMN\n    : null), [column])\n\n  /**\n   * Memoized styles combining parsed props and additional styles.\n   * @type {CSSProperties}\n   */\n  const styles = useMemo(() => (\n    {\n      ...restProps,\n      ...(restProps.align ? { alignItems: resolveFlexProps(restProps.align as string) } : {}),\n      ...(restProps.justify ? { justifyContent: resolveFlexProps(restProps.justify as string) } : {}),\n      ...(restProps.direction || resolvedColumn ? { flexDirection: restProps.direction || resolvedColumn } : {}),\n      ...style,\n    }\n  ), [resolvedColumn, restProps, style])\n\n  return (\n    <div\n      {...(id ? { id: `${id}` } : {})}\n      ref={ref}\n      tabIndex={tabIndex}\n      className={`${(classes as any)['layout-box']} ${className}`}\n      style={styles as CSSProperties}\n      {...dataProps}\n      data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n      {...onClickProps}\n    >\n      {children}\n    </div>\n  )\n})\n\nLayoutBoxRefForwarded.displayName = 'LayoutBoxRefForwarded'\n\n/**\n * Memoized and memoized LayoutBox component.\n * @type {FC<LayoutBoxProps>}\n */\nexport const LayoutBox: FC<LayoutBoxProps> = memo<LayoutBoxProps>(LayoutBoxRefForwarded)\n\nLayoutBox.displayName = 'LayoutBox'\n"],"names":["flexValueMap","start","end","resolveFlexProps","value","LayoutBoxRefForwarded","forwardRef","_ref","ref","id","style","children","tabIndex","className","onClick","column","props","dataProps","restProps","useParseProps","onClickProps","useMemo","onKeyDown","role","resolvedColumn","undefined","LayoutDirection","COLUMN","styles","align","alignItems","justify","justifyContent","direction","flexDirection","React","createElement","_extends","concat","classes","dataTestId","displayName","LayoutBox","memo"],"mappings":"0SAYA,MAAMA,EAAuC,CAC3CC,MAAO,aACP,aAAc,aACdC,IAAK,WACL,WAAY,YAQRC,EAAoBC,GAAwCA,GAASJ,EAAaI,IAAmBA,EAQrGC,EAAwBC,GAAW,CAAAC,EAEtBC,KAA+C,IAFxBC,GACxCA,EAAEC,MAAEA,EAAKC,SAAEA,EAAQC,SAAEA,EAAQC,UAAEA,EAAY,GAAEC,QAAEA,EAAOC,OAAEA,KAAWC,GACpDT,EACf,MAAMU,UAAEA,EAASC,UAAEA,GAAcC,EAAcH,GAMzCI,EAAeC,GAAQ,IAAOP,EAAW,CAC7CA,UACAQ,UAAWR,EACXS,KAAM,SACNX,UAAW,GACR,CAAG,GAAE,CAACE,IAMLU,EAAiBH,GAAQ,SAClBI,IAAXV,IAAmC,IAAXA,EACtBW,EAAgBC,OAChB,MAAO,CAACZ,IAMNa,EAASP,GAAQ,KACrB,IACKH,KACCA,EAAUW,MAAQ,CAAEC,WAAY3B,EAAiBe,EAAUW,QAAqB,MAChFX,EAAUa,QAAU,CAAEC,eAAgB7B,EAAiBe,EAAUa,UAAuB,MACxFb,EAAUe,WAAaT,EAAiB,CAAEU,cAAehB,EAAUe,WAAaT,GAAmB,MACpGd,KAEJ,CAACc,EAAgBN,EAAWR,IAE/B,OACEyB,MAAAC,oBAAAC,EAAA,CAAA,EACO5B,EAAK,CAAEA,GAAE,GAAA6B,OAAK7B,IAAS,GAAE,CAC9BD,IAAKA,EACLI,SAAUA,EACVC,UAAS,GAAAyB,OAAMC,EAAgB,cAAaD,KAAAA,OAAIzB,GAChDH,MAAOkB,GACHX,EAAS,CACb,cAAaA,EAAUuB,YAAcvB,EAAU,gBAAkBR,GAC7DW,GAEHT,EACG,IAIVN,EAAsBoC,YAAc,8BAMvBC,EAAgCC,EAAqBtC,GAElEqC,EAAUD,YAAc"}
+{"version":3,"file":"LayoutBox.js","sources":["../../../../../../../../src/core/ui/components/container/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\nimport classes from './layoutBox.module.scss'\n\n\n/**\n * Map of flex values for resolving flex alignment and justification.\n * @type {Record<string, string>}\n */\nconst flexValueMap: Record<string, string> = {\n  start: 'flex-start',\n  'flex-start': 'flex-start',\n  end: 'flex-end',\n  'flex-end': 'flex-end',\n}\n\n/**\n * Resolves flex alignment and justification properties based on the provided value.\n * @param {string | undefined} value - The value to resolve.\n * @returns {string | undefined} - Resolved flex property value.\n */\nconst resolveFlexProps = (value?: string): string | undefined => (value ? (flexValueMap[value] || value) : value)\n\n/**\n * Forwarded ref version of the LayoutBox component.\n * @param {LayoutBoxProps} props - Props for the LayoutBox component.\n * @param {LegacyRef<HTMLDivElement> | undefined} ref - Ref for accessing the underlying DOM element.\n * @returns {JSX.Element} - Rendered LayoutBox component.\n */\nconst LayoutBoxRefForwarded = forwardRef(({\n  id, style, children, tabIndex, className = '', onClick, column, ...props\n}: LayoutBoxProps, ref: LegacyRef<HTMLDivElement> | undefined | null) => {\n  const { dataProps, restProps } = useParseProps(props)\n\n  /**\n   * Memoized onClick event properties.\n   * @type {{ onClick?: () => void; onKeyDown?: () => void; role?: string; tabIndex?: number }}\n   */\n  const onClickProps = useMemo(() => (onClick ? ({\n    onClick,\n    onKeyDown: onClick,\n    role: 'button',\n    tabIndex: -1,\n  }) : {}), [onClick])\n\n  /**\n   * Memoized resolved direction based on the column prop.\n   * @type {LayoutDirection}\n   */\n  const resolvedColumn = useMemo(() => ((\n    column !== undefined && column === true)\n    ? LayoutDirection.COLUMN\n    : null), [column])\n\n  /**\n   * Memoized styles combining parsed props and additional styles.\n   * @type {CSSProperties}\n   */\n  const styles = useMemo(() => (\n    {\n      ...restProps,\n      ...(restProps.align ? { alignItems: resolveFlexProps(restProps.align as string) } : {}),\n      ...(restProps.justify ? { justifyContent: resolveFlexProps(restProps.justify as string) } : {}),\n      ...(restProps.direction || resolvedColumn ? { flexDirection: restProps.direction || resolvedColumn } : {}),\n      ...style,\n    }\n  ), [resolvedColumn, restProps, style])\n\n  return (\n    <div\n      {...(id ? { id: `${id}` } : {})}\n      ref={ref}\n      tabIndex={tabIndex}\n      className={`${(classes as any)['layout-box']} ${className}`}\n      style={styles as CSSProperties}\n      {...dataProps}\n      data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n      {...onClickProps}\n    >\n      {children}\n    </div>\n  )\n})\n\nLayoutBoxRefForwarded.displayName = 'LayoutBoxRefForwarded'\n\n/**\n * Memoized and memoized LayoutBox component.\n * @type {FC<LayoutBoxProps>}\n */\nexport const LayoutBox: FC<LayoutBoxProps> = memo<LayoutBoxProps>(LayoutBoxRefForwarded)\n\nLayoutBox.displayName = 'LayoutBox'\n"],"names":["flexValueMap","start","end","resolveFlexProps","value","LayoutBoxRefForwarded","forwardRef","_ref","ref","id","style","children","tabIndex","className","onClick","column","props","dataProps","restProps","useParseProps","onClickProps","useMemo","onKeyDown","role","resolvedColumn","undefined","LayoutDirection","COLUMN","styles","align","alignItems","justify","justifyContent","direction","flexDirection","React","createElement","_extends","concat","classes","dataTestId","displayName","LayoutBox","memo"],"mappings":"0SAYA,MAAMA,EAAuC,CAC3CC,MAAO,aACP,aAAc,aACdC,IAAK,WACL,WAAY,YAQRC,EAAoBC,GAAwCA,GAASJ,EAAaI,IAAmBA,EAQrGC,EAAwBC,GAAW,CAAAC,EAEtBC,KAAsD,IAF/BC,GACxCA,EAAEC,MAAEA,EAAKC,SAAEA,EAAQC,SAAEA,EAAQC,UAAEA,EAAY,GAAEC,QAAEA,EAAOC,OAAEA,KAAWC,GACpDT,EACf,MAAMU,UAAEA,EAASC,UAAEA,GAAcC,EAAcH,GAMzCI,EAAeC,GAAQ,IAAOP,EAAW,CAC7CA,UACAQ,UAAWR,EACXS,KAAM,SACNX,UAAW,GACR,CAAG,GAAE,CAACE,IAMLU,EAAiBH,GAAQ,SAClBI,IAAXV,IAAmC,IAAXA,EACtBW,EAAgBC,OAChB,MAAO,CAACZ,IAMNa,EAASP,GAAQ,KACrB,IACKH,KACCA,EAAUW,MAAQ,CAAEC,WAAY3B,EAAiBe,EAAUW,QAAqB,MAChFX,EAAUa,QAAU,CAAEC,eAAgB7B,EAAiBe,EAAUa,UAAuB,MACxFb,EAAUe,WAAaT,EAAiB,CAAEU,cAAehB,EAAUe,WAAaT,GAAmB,MACpGd,KAEJ,CAACc,EAAgBN,EAAWR,IAE/B,OACEyB,MAAAC,oBAAAC,EAAA,CAAA,EACO5B,EAAK,CAAEA,GAAE,GAAA6B,OAAK7B,IAAS,GAAE,CAC9BD,IAAKA,EACLI,SAAUA,EACVC,UAAS,GAAAyB,OAAMC,EAAgB,cAAaD,KAAAA,OAAIzB,GAChDH,MAAOkB,GACHX,EAAS,CACb,cAAaA,EAAUuB,YAAcvB,EAAU,gBAAkBR,GAC7DW,GAEHT,EACG,IAIVN,EAAsBoC,YAAc,8BAMvBC,EAAgCC,EAAqBtC,GAElEqC,EAAUD,YAAc"}

package/dist/lib/esm/src/core/ui/components/container/layoutBox.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"layoutBox.types.js","sources":["../../../../../../../../src/core/ui/components/container/layoutBox.types.ts"],"sourcesContent":["import { CSSProperties, PropsWithChildren, Ref } from 'react'\n\n/**\n * Enum representing the possible layout directions.\n */\nexport enum LayoutDirection {\n  ROW = 'row',\n  COLUMN = 'column',\n}\n\n/**\n * Props for the LayoutBox component.\n */\nexport type LayoutBoxProps = PropsWithChildren & {\n  /** Unique identifier for the component. */\n  id?: string | number\n  /** CSS flex property. */\n  flex?: string\n  /** CSS flexGrow property. */\n  flexGrow?: string | number\n  /** Text alignment within the box. */\n  alignText?: 'center' | 'right' | 'left'\n  /** Direction of the layout (row or column). */\n  direction?: LayoutDirection | string\n  /** CSS flexShrink property. */\n  flexShrink?: string | number\n  /** CSS flexBasis property. */\n  flexBasis?: string\n  /** CSS flexWrap property. */\n  flexWrap?: string\n  /** CSS justify-content property. */\n  justify?: string\n  /** CSS align-items property. */\n  align?: string\n  /** CSS align-self property. */\n  alignSelf?: string\n  /** CSS margin property. */\n  margin?: string\n  /** CSS padding property. */\n  padding?: string\n  /** CSS width property. */\n  width?: string\n  /** CSS height property. */\n  height?: string\n  /** CSS maxWidth property. */\n  maxWidth?: string\n  /** CSS maxHeight property. */\n  maxHeight?: string\n  /** CSS minWidth property. */\n  minWidth?: string\n  /** CSS minHeight property. */\n  minHeight?: string\n  /** Gap between child elements. */\n  gap?: string\n  /** CSS borderRadius property. */\n  borderRadius?: string\n  /** Additional inline styles for the component. */\n  style?: Record<string, unknown> | null\n  /** Additional class name(s) for the component. */\n  className?: string\n  /** Tab index for keyboard navigation. */\n  tabIndex?: number\n  /** Ref for accessing the underlying DOM element. */\n  ref?: Ref<HTMLDivElement> | undefined\n  /** Callback function for click event. */\n  onClick?: () => void\n  /** If true, sets the layout direction to column. */\n  column?: boolean\n} & Omit<CSSProperties, 'direction'>;\n"],"names":["LayoutDirection"],"mappings":"AAKYA,IAAAA,WAAAA,GAAe,OAAfA,EAAe,IAAA,MAAfA,EAAe,OAAA,SAAfA,CAAe,EAAA"}
+{"version":3,"file":"layoutBox.types.js","sources":["../../../../../../../../src/core/ui/components/container/layoutBox.types.ts"],"sourcesContent":["import { CSSProperties, LegacyRef, PropsWithChildren } from 'react'\n\n/**\n * Enum representing the possible layout directions.\n */\nexport enum LayoutDirection {\n  ROW = 'row',\n  COLUMN = 'column',\n}\n\n/**\n * Props for the LayoutBox component.\n */\nexport type LayoutBoxProps = PropsWithChildren & {\n  /** Unique identifier for the component. */\n  id?: string | number\n  /** CSS flex property. */\n  flex?: string\n  /** CSS flexGrow property. */\n  flexGrow?: string | number\n  /** Text alignment within the box. */\n  alignText?: 'center' | 'right' | 'left'\n  /** Direction of the layout (row or column). */\n  direction?: LayoutDirection | string\n  /** CSS flexShrink property. */\n  flexShrink?: string | number\n  /** CSS flexBasis property. */\n  flexBasis?: string\n  /** CSS flexWrap property. */\n  flexWrap?: string\n  /** CSS justify-content property. */\n  justify?: string\n  /** CSS align-items property. */\n  align?: string\n  /** CSS align-self property. */\n  alignSelf?: string\n  /** CSS margin property. */\n  margin?: string\n  /** CSS padding property. */\n  padding?: string\n  /** CSS width property. */\n  width?: string\n  /** CSS height property. */\n  height?: string\n  /** CSS maxWidth property. */\n  maxWidth?: string\n  /** CSS maxHeight property. */\n  maxHeight?: string\n  /** CSS minWidth property. */\n  minWidth?: string\n  /** CSS minHeight property. */\n  minHeight?: string\n  /** Gap between child elements. */\n  gap?: string\n  /** CSS borderRadius property. */\n  borderRadius?: string\n  /** Additional inline styles for the component. */\n  style?: Record<string, unknown> | null\n  /** Additional class name(s) for the component. */\n  className?: string\n  /** Tab index for keyboard navigation. */\n  tabIndex?: number\n  /** Ref for accessing the underlying DOM element. */\n  ref?: LegacyRef<HTMLDivElement> | undefined | null\n  /** Callback function for click event. */\n  onClick?: () => void\n  /** If true, sets the layout direction to column. */\n  column?: boolean\n} & Omit<CSSProperties, 'direction'>;\n"],"names":["LayoutDirection"],"mappings":"AAKYA,IAAAA,WAAAA,GAAe,OAAfA,EAAe,IAAA,MAAfA,EAAe,OAAA,SAAfA,CAAe,EAAA"}

package/dist/lib/esm/src/core/ui/components/molecules/layouts/FlowLayout.js

@@ -0,0 +1,2 @@
+import{extends as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import{memo as t,useMemo as a}from"react";import o from"./flowLayout.module.scss.js";import{LayoutBox as r}from"../../container/LayoutBox.js";import{classNames as n}from"../../../../utils/helpers/ui.js";const l=t((t=>{let{itemDTOs:l,containerProps:s={},defaultItemLayoutProps:m={},numColumns:c=1,className:p="",beforeContent:i,afterContent:u,...d}=t;const f=a((()=>c>0?{display:"grid",gridTemplateColumns:"".concat("1fr ".repeat(c)),width:"100%",height:"unset"}:{display:"flex"}),[c]);return React.createElement(r,e({width:"100%",column:!0,className:n(o.flowLayout,p)},d),i&&React.createElement("span",{className:o.beforeContent,tabIndex:-1},i),React.createElement(r,e({flexWrap:"wrap",gap:"1rem",style:f,width:"100%"},s),l.map((t=>{let{id:a,spanColumn:o,Component:n,layoutProps:l,...s}=t;return React.createElement(r,e({key:a},m,l,o?{style:{width:"calc(".concat(Math.round(100*o),"% - ").concat(16*o,"px)")}}:{}),React.createElement(n,s))}))),u&&React.createElement("span",{className:o.afterContent,tabIndex:-1},u))}));l.displayName="FlowLayout";export{l as FlowLayout};
+//# sourceMappingURL=FlowLayout.js.map

package/dist/lib/esm/src/core/ui/components/molecules/layouts/FlowLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowLayout.js","sources":["../../../../../../../../../src/core/ui/components/molecules/layouts/FlowLayout.tsx"],"sourcesContent":["import { memo, FC, useMemo } from 'react'\n\nimport { LayoutBox } from '../../container'\nimport { classNames } from '../../../../utils'\n\nimport type { FlowLayoutProps, ItemDTOType } from './flowLayout.types'\nimport classes from './flowLayout.module.scss'\n\n\n/**\n * Renders a flexible flow layout that automatically arranges child components based on specified columns and spacing.\n * This component is highly customizable through its props,\n * allowing for dynamic layouts responsive to the content and screen size.\n *\n * Utilizes a grid layout by default, falling back to flex layout\n * if `numColumns` is not greater than 0. Each item's width\n * and placement can be controlled via `spanColumn` on\n * individual items, with additional layout props provided for fine-tuning.\n *\n * @param {FlowLayoutProps} props The properties to configure the FlowLayout.\n * @param {ItemDTOType[]} props.itemDTOs Array of item DTOs defining the\n * components to render and their layout properties.\n * @param {Partial<LayoutBoxProps>} [props.containerProps={}] Optional.\n * Props to be spread onto the container `LayoutBox`, allowing for custom styles and behaviors.\n * @param {Partial<LayoutBoxProps>} [props.defaultItemLayoutProps={}] Optional.\n * Default layout properties applied to each item, unless overridden by item-specific props.\n * @param {number} [props.numColumns=1] Optional.\n *  Defines the number of columns in the grid. Affects item distribution and layout.\n * @param {string} [props.className=''] Optional.\n * Additional CSS class names to apply to the layout container for custom styling.\n * @param {ReactNode} [props.beforeContent] Optional.\n * Content to render before the main items. Useful for titles, descriptions, or custom components.\n * @param {ReactNode} [props.afterContent] Optional.\n Content to render after the main items. Can be used for additional information or actions related to the items.\n * @returns {React.ReactElement} The rendered FlowLayout component.\n */\nexport const FlowLayout: FC<FlowLayoutProps> = memo<FlowLayoutProps>(({\n  itemDTOs,\n  containerProps = {},\n  defaultItemLayoutProps = {},\n  numColumns = 1,\n  className = '',\n  beforeContent,\n  afterContent,\n  ...props\n}: FlowLayoutProps) => {\n  // Calculation for column styles based on the number of columns specified.\n  const columnStyles = useMemo(() => (numColumns > 0\n    ? {\n      display: 'grid',\n      gridTemplateColumns: `${'1fr '.repeat(numColumns)}`,\n      width: '100%',\n      height: 'unset',\n    }\n    : {\n      display: 'flex',\n    }\n  ), [numColumns])\n\n  return (\n    <LayoutBox\n      width='100%'\n      column\n      className={classNames(classes.flowLayout, className)}\n      {...props}\n    >\n      {beforeContent && (\n        <span className={classes.beforeContent} tabIndex={-1}>\n          {beforeContent}\n        </span>\n      )}\n      <LayoutBox\n        flexWrap='wrap'\n        gap='1rem'\n        style={columnStyles}\n        width='100%'\n        {...containerProps}\n      >\n        {itemDTOs.map(({ id, spanColumn, Component, layoutProps, ...props }: ItemDTOType) => (\n          <LayoutBox\n            key={id}\n            {...defaultItemLayoutProps}\n            {...layoutProps}\n            {...(spanColumn\n              ? { style: { width: `calc(${Math.round(spanColumn * 100)}% - ${spanColumn * 16}px)` } }\n              : {})}\n          >\n            <Component {...props} />\n          </LayoutBox>\n        ))}\n      </LayoutBox>\n      {afterContent && (\n        <span className={classes.afterContent} tabIndex={-1}>\n          {afterContent}\n        </span>\n      )}\n    </LayoutBox>\n  )\n})\n\nexport type FlowLayoutType = typeof FlowLayout;\n\n// Set display name for the component.\nFlowLayout.displayName = 'FlowLayout'\n"],"names":["FlowLayout","memo","_ref","itemDTOs","containerProps","defaultItemLayoutProps","numColumns","className","beforeContent","afterContent","props","columnStyles","useMemo","display","gridTemplateColumns","concat","repeat","width","height","React","createElement","LayoutBox","_extends","column","classNames","classes","flowLayout","tabIndex","flexWrap","gap","style","map","_ref2","id","spanColumn","Component","layoutProps","key","Math","round","displayName"],"mappings":"mSAoCaA,EAAkCC,GAAsBC,IAS9C,IAT+CC,SACpEA,EAAQC,eACRA,EAAiB,CAAE,EAAAC,uBACnBA,EAAyB,CAAE,EAAAC,WAC3BA,EAAa,EAACC,UACdA,EAAY,GAAEC,cACdA,EAAaC,aACbA,KACGC,GACaR,EAEhB,MAAMS,EAAeC,GAAQ,IAAON,EAAa,EAC7C,CACAO,QAAS,OACTC,oBAAmB,GAAAC,OAAK,OAAOC,OAAOV,IACtCW,MAAO,OACPC,OAAQ,SAER,CACAL,QAAS,SAEV,CAACP,IAEJ,OACEa,MAAAC,cAACC,EAASC,EAAA,CACRL,MAAM,OACNM,QAAM,EACNhB,UAAWiB,EAAWC,EAAQC,WAAYnB,IACtCG,GAEHF,GACCW,MAAAC,cAAA,OAAA,CAAMb,UAAWkB,EAAQjB,cAAemB,UAAW,GAChDnB,GAGLW,MAAAC,cAACC,EAASC,EAAA,CACRM,SAAS,OACTC,IAAI,OACJC,MAAOnB,EACPM,MAAM,QACFb,GAEHD,EAAS4B,KAAIC,IAAA,IAACC,GAAEA,EAAEC,WAAEA,EAAUC,UAAEA,EAASC,YAAEA,KAAgB1B,GAAoBsB,EAAA,OAC9Eb,MAAAC,cAACC,EAASC,EAAA,CACRe,IAAKJ,GACD5B,EACA+B,EACCF,EACD,CAAEJ,MAAO,CAAEb,cAAKF,OAAUuB,KAAKC,MAAmB,IAAbL,GAAiBnB,QAAAA,OAAoB,GAAbmB,EAAe,SAC5E,CAAA,GAEJf,MAAAC,cAACe,EAAczB,GACL,KAGfD,GACCU,MAAAC,cAAA,OAAA,CAAMb,UAAWkB,EAAQhB,aAAckB,UAAW,GAC/ClB,GAGK,IAOhBT,EAAWwC,YAAc"}

package/dist/lib/esm/src/core/ui/components/molecules/layouts/flowLayout.module.scss.js

@@ -0,0 +1,2 @@
+var o={flowLayout:"flowLayout-module_flowLayout__VHpnY",beforeContent:"flowLayout-module_beforeContent__rY-mW",afterContent:"flowLayout-module_afterContent__Hlh8v"};export{o as default};
+//# sourceMappingURL=flowLayout.module.scss.js.map

package/dist/lib/esm/src/core/ui/components/molecules/layouts/flowLayout.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flowLayout.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/lib/esm/src/index.js

@@ -1,2 +1,2 @@
-export{useApi}from"./core/hooks/useApi.js";export{useToggle}from"./core/hooks/useToggle.js";export{createSafeT,setUseTranslation,useTranslations}from"./core/hooks/useTranslations.js";export{outsideClickHandler,useOutsideClick}from"./core/hooks/useOutsideClick.js";export{useResize}from"./core/hooks/useResize.js";export{useClassNames}from"./core/hooks/useClassNames.js";export{useParseProps}from"./core/hooks/useParseProps.js";export{baseThemes,observeThemePreference,switchColorTheme,updateColorTheme,useThemePreference}from"./core/hooks/useThemePreference.js";export{isBirthNumberValid}from"./core/utils/helpers/birthnumber.validator.js";export{getMatch,isValidFormat,isValidModulo11,parse,regex}from"./core/utils/helpers/birthnumberCZSKvalidator.js";export{parseCSVdata,validateCSVFile,validateCSVlines,validateJSONFile,validateLineCellTrimmed,validateLineNumColumns,validateSDFFile}from"./core/utils/helpers/fileValidator.js";export{DATE_FORMAT,formatDateToTimestamp,getDate}from"./core/utils/helpers/date.js";export{getDeviceId}from"./core/utils/helpers/deviceInfo.js";export{emailMatch,emailMatcher,regexBuilder}from"./core/utils/helpers/emailMatcher.js";export{cleanCsvLines,formatFilePath}from"./core/utils/helpers/file.js";export{arrayToObjectTree,chunkArray,duplicatesInArray,formatJsonString,formatObj,formatObj2}from"./core/utils/helpers/objectOperations.js";export{debounce,delay,memoize,memoizeComplex,memoizer,nestedTernary}from"./core/utils/helpers/other.js";export{escapeRegExp,fileNameExt,findStringInText,normalizeString,removeWhitespaces,sanitizeId,sanitizePathId,toLowerCase,toUpperCase,truncateText}from"./core/utils/helpers/textValueOperations.js";export{Operation,decrementValue,incerementValue,numberDefined,numberOperation,restrictNumberInLimits,setValue}from"./core/utils/helpers/valueOperations.js";export{cancelableSetInterval,cancelableSetTimeout}from"./core/utils/helpers/cancelableDelayedFunction.js";export{classNames,mapSerReplacer,noop,parseProps}from"./core/utils/helpers/ui.js";export{keyExtractor,keyExtractorFunction}from"./core/utils/keyExtractor.js";export{dateRangeFormat,getDateTime,getTimeFromNow,getTimeFromNowOriginal,getTimeTo}from"./core/utils/date.js";export{ced,createResolveAttribute,customElementDefine,resolveAttributes}from"./core/utils/webComponents/webComponent.utils.js";export{createStore}from"./core/utils/appState/store/store.vanillajs.js";export{createDataStore}from"./core/utils/appState/store/store.vanillajs.templates.js";export{useStore,useStoreApi}from"./core/utils/appState/store/useStore.react.js";export{EventName}from"./core/constants/ui.constants.js";export{calculateColors,calculatePercColor,convertHex,convertRGB,defaultFontSize,pxToRem,resolveStyleValue,setDefaultFontSize,toHex}from"./core/ui/utils/style.js";export{LayoutBox}from"./core/ui/components/container/LayoutBox.js";export{LayoutDirection}from"./core/ui/components/container/layoutBox.types.js";export{Flex,FlexTight,FlexTightStyled,FlexWrapper}from"./core/ui/components/container/Flex.js";export{Placeholder}from"./core/ui/components/container/Placeholder.js";export{CollapsibleContainer}from"./core/ui/components/container/CollapsibleContainer.js";export{ResizableContainer}from"./core/ui/components/container/ResizableContainer.js";export{Field,FieldWrapper,Select,setIconColor,setIconComponent}from"./core/ui/components/field/Field.js";export{DividerHorizontal,DividerLine,DividerVertical}from"./core/ui/components/dividers/DividerLine.js";export{IconBase}from"./core/ui/components/icon/IconBase.js";export{Icon}from"./core/ui/components/icon/Icon.js";export{ESIcon,ESIconBase}from"./core/ui/components/icon/IconWC.js";
+export{useApi}from"./core/hooks/useApi.js";export{useToggle}from"./core/hooks/useToggle.js";export{createSafeT,setUseTranslation,useTranslations}from"./core/hooks/useTranslations.js";export{outsideClickHandler,useOutsideClick}from"./core/hooks/useOutsideClick.js";export{useResize}from"./core/hooks/useResize.js";export{useClassNames}from"./core/hooks/useClassNames.js";export{useParseProps}from"./core/hooks/useParseProps.js";export{baseThemes,observeThemePreference,switchColorTheme,updateColorTheme,useThemePreference}from"./core/hooks/useThemePreference.js";export{isBirthNumberValid}from"./core/utils/helpers/birthnumber.validator.js";export{getMatch,isValidFormat,isValidModulo11,parse,regex}from"./core/utils/helpers/birthnumberCZSKvalidator.js";export{parseCSVdata,validateCSVFile,validateCSVlines,validateJSONFile,validateLineCellTrimmed,validateLineNumColumns,validateSDFFile}from"./core/utils/helpers/fileValidator.js";export{DATE_FORMAT,formatDateToTimestamp,getDate}from"./core/utils/helpers/date.js";export{getDeviceId}from"./core/utils/helpers/deviceInfo.js";export{emailMatch,emailMatcher,regexBuilder}from"./core/utils/helpers/emailMatcher.js";export{cleanCsvLines,formatFilePath}from"./core/utils/helpers/file.js";export{arrayToObjectTree,chunkArray,duplicatesInArray,formatJsonString,formatObj,formatObj2}from"./core/utils/helpers/objectOperations.js";export{debounce,delay,memoize,memoizeComplex,memoizer,nestedTernary}from"./core/utils/helpers/other.js";export{escapeRegExp,fileNameExt,findStringInText,normalizeString,removeWhitespaces,sanitizeId,sanitizePathId,toLowerCase,toUpperCase,truncateText}from"./core/utils/helpers/textValueOperations.js";export{Operation,decrementValue,incerementValue,numberDefined,numberOperation,restrictNumberInLimits,setValue}from"./core/utils/helpers/valueOperations.js";export{cancelableSetInterval,cancelableSetTimeout}from"./core/utils/helpers/cancelableDelayedFunction.js";export{classNames,mapSerReplacer,noop,parseProps}from"./core/utils/helpers/ui.js";export{keyExtractor,keyExtractorFunction}from"./core/utils/keyExtractor.js";export{dateRangeFormat,getDateTime,getTimeFromNow,getTimeFromNowOriginal,getTimeTo}from"./core/utils/date.js";export{ced,createResolveAttribute,customElementDefine,resolveAttributes}from"./core/utils/webComponents/webComponent.utils.js";export{createStore}from"./core/utils/appState/store/store.vanillajs.js";export{createDataStore}from"./core/utils/appState/store/store.vanillajs.templates.js";export{useStore,useStoreApi}from"./core/utils/appState/store/useStore.react.js";export{EventName}from"./core/constants/ui.constants.js";export{calculateColors,calculatePercColor,convertHex,convertRGB,defaultFontSize,pxToRem,resolveStyleValue,setDefaultFontSize,toHex}from"./core/ui/utils/style.js";export{LayoutBox}from"./core/ui/components/container/LayoutBox.js";export{LayoutDirection}from"./core/ui/components/container/layoutBox.types.js";export{Flex,FlexTight,FlexTightStyled,FlexWrapper}from"./core/ui/components/container/Flex.js";export{Placeholder}from"./core/ui/components/container/Placeholder.js";export{CollapsibleContainer}from"./core/ui/components/container/CollapsibleContainer.js";export{ResizableContainer}from"./core/ui/components/container/ResizableContainer.js";export{Field,FieldWrapper,Select,setIconColor,setIconComponent}from"./core/ui/components/field/Field.js";export{DividerHorizontal,DividerLine,DividerVertical}from"./core/ui/components/dividers/DividerLine.js";export{IconBase}from"./core/ui/components/icon/IconBase.js";export{Icon}from"./core/ui/components/icon/Icon.js";export{ESIcon,ESIconBase}from"./core/ui/components/icon/IconWC.js";export{FlowLayout}from"./core/ui/components/molecules/layouts/FlowLayout.js";
 //# sourceMappingURL=index.js.map

package/dist/lib/src/core/ui/components/container/LayoutBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutBox.js","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/container/LayoutBox.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"LayoutBox.js","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/container/LayoutBox.tsx"],"names":[],"mappings":"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"}

package/dist/lib/src/core/ui/components/index.js

@@ -2,4 +2,5 @@ export * from './container';
 export * from './field';
 export * from './dividers';
 export * from './icon';
+export * from './molecules';
 //# sourceMappingURL=index.js.map

package/dist/lib/src/core/ui/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/core/ui/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/core/ui/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA"}

package/dist/lib/src/core/ui/components/molecules/index.js

@@ -0,0 +1,2 @@
+export * from './layouts';
+//# sourceMappingURL=index.js.map

package/dist/lib/src/core/ui/components/molecules/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/molecules/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}

package/dist/lib/src/core/ui/components/molecules/layouts/FlowLayout.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { LayoutBox } from '../../container';
+import { classNames } from '../../../../utils';
+import classes from './flowLayout.module.scss';
+/**
+ * Renders a flexible flow layout that automatically arranges child components based on specified columns and spacing.
+ * This component is highly customizable through its props,
+ * allowing for dynamic layouts responsive to the content and screen size.
+ *
+ * Utilizes a grid layout by default, falling back to flex layout
+ * if `numColumns` is not greater than 0. Each item's width
+ * and placement can be controlled via `spanColumn` on
+ * individual items, with additional layout props provided for fine-tuning.
+ *
+ * @param {FlowLayoutProps} props The properties to configure the FlowLayout.
+ * @param {ItemDTOType[]} props.itemDTOs Array of item DTOs defining the
+ * components to render and their layout properties.
+ * @param {Partial<LayoutBoxProps>} [props.containerProps={}] Optional.
+ * Props to be spread onto the container `LayoutBox`, allowing for custom styles and behaviors.
+ * @param {Partial<LayoutBoxProps>} [props.defaultItemLayoutProps={}] Optional.
+ * Default layout properties applied to each item, unless overridden by item-specific props.
+ * @param {number} [props.numColumns=1] Optional.
+ *  Defines the number of columns in the grid. Affects item distribution and layout.
+ * @param {string} [props.className=''] Optional.
+ * Additional CSS class names to apply to the layout container for custom styling.
+ * @param {ReactNode} [props.beforeContent] Optional.
+ * Content to render before the main items. Useful for titles, descriptions, or custom components.
+ * @param {ReactNode} [props.afterContent] Optional.
+ Content to render after the main items. Can be used for additional information or actions related to the items.
+ * @returns {React.ReactElement} The rendered FlowLayout component.
+ */
+export const FlowLayout = memo(({ itemDTOs, containerProps = {}, defaultItemLayoutProps = {}, numColumns = 1, className = '', beforeContent, afterContent, ...props }) => {
+    // Calculation for column styles based on the number of columns specified.
+    const columnStyles = useMemo(() => (numColumns > 0
+        ? {
+            display: 'grid',
+            gridTemplateColumns: `${'1fr '.repeat(numColumns)}`,
+            width: '100%',
+            height: 'unset',
+        }
+        : {
+            display: 'flex',
+        }), [numColumns]);
+    return (_jsxs(LayoutBox, { width: '100%', column: true, className: classNames(classes.flowLayout, className), ...props, children: [beforeContent && (_jsx("span", { className: classes.beforeContent, tabIndex: -1, children: beforeContent })), _jsx(LayoutBox, { flexWrap: 'wrap', gap: '1rem', style: columnStyles, width: '100%', ...containerProps, children: itemDTOs.map(({ id, spanColumn, Component, layoutProps, ...props }) => (_jsx(LayoutBox, { ...defaultItemLayoutProps, ...layoutProps, ...(spanColumn
+                        ? { style: { width: `calc(${Math.round(spanColumn * 100)}% - ${spanColumn * 16}px)` } }
+                        : {}), children: _jsx(Component, { ...props }) }, id))) }), afterContent && (_jsx("span", { className: classes.afterContent, tabIndex: -1, children: afterContent }))] }));
+});
+// Set display name for the component.
+FlowLayout.displayName = 'FlowLayout';
+//# sourceMappingURL=FlowLayout.js.map

package/dist/lib/src/core/ui/components/molecules/layouts/FlowLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowLayout.js","sourceRoot":"","sources":["../../../../../../../../src/core/ui/components/molecules/layouts/FlowLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAM,OAAO,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAG9C,OAAO,OAAO,MAAM,0BAA0B,CAAA;AAG9C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,UAAU,GAAwB,IAAI,CAAkB,CAAC,EACpE,QAAQ,EACR,cAAc,GAAG,EAAE,EACnB,sBAAsB,GAAG,EAAE,EAC3B,UAAU,GAAG,CAAC,EACd,SAAS,GAAG,EAAE,EACd,aAAa,EACb,YAAY,EACZ,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,0EAA0E;IAC1E,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,UAAU,GAAG,CAAC;QAChD,CAAC,CAAC;YACA,OAAO,EAAE,MAAM;YACf,mBAAmB,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE;YACnD,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,OAAO;SAChB;QACD,CAAC,CAAC;YACA,OAAO,EAAE,MAAM;SAChB,CACF,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,OAAO,CACL,MAAC,SAAS,IACR,KAAK,EAAC,MAAM,EACZ,MAAM,QACN,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,UAAU,EAAE,SAAS,CAAC,KAChD,KAAK,aAER,aAAa,IAAI,CAChB,eAAM,SAAS,EAAE,OAAO,CAAC,aAAa,EAAE,QAAQ,EAAE,CAAC,CAAC,YACjD,aAAa,GACT,CACR,EACD,KAAC,SAAS,IACR,QAAQ,EAAC,MAAM,EACf,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,YAAY,EACnB,KAAK,EAAC,MAAM,KACR,cAAc,YAEjB,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE,CAAC,CACnF,KAAC,SAAS,OAEJ,sBAAsB,KACtB,WAAW,KACX,CAAC,UAAU;wBACb,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,GAAG,CAAC,OAAO,UAAU,GAAG,EAAE,KAAK,EAAE,EAAE;wBACvF,CAAC,CAAC,EAAE,CAAC,YAEP,KAAC,SAAS,OAAK,KAAK,GAAI,IAPnB,EAAE,CAQG,CACb,CAAC,GACQ,EACX,YAAY,IAAI,CACf,eAAM,SAAS,EAAE,OAAO,CAAC,YAAY,EAAE,QAAQ,EAAE,CAAC,CAAC,YAChD,YAAY,GACR,CACR,IACS,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAIF,sCAAsC;AACtC,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA"}

package/dist/lib/src/core/ui/components/molecules/layouts/flowLayout.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=flowLayout.types.js.map

package/dist/lib/src/core/ui/components/molecules/layouts/flowLayout.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flowLayout.types.js","sourceRoot":"","sources":["../../../../../../../../src/core/ui/components/molecules/layouts/flowLayout.types.ts"],"names":[],"mappings":""}

package/dist/lib/src/core/ui/components/molecules/layouts/index.js

@@ -0,0 +1,3 @@
+export * from './FlowLayout';
+export * from './flowLayout.types';
+//# sourceMappingURL=index.js.map

package/dist/lib/src/core/ui/components/molecules/layouts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../src/core/ui/components/molecules/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA"}

package/dist/lib/src/core/ui/types/CommonProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CommonProps.js.map

package/dist/lib/src/core/ui/types/CommonProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommonProps.js","sourceRoot":"","sources":["../../../../../../src/core/ui/types/CommonProps.ts"],"names":[],"mappings":""}