@e1011/es-kit 1.0.176 → 1.0.178

package/dist/types/src/core/ui/components/index.d.ts

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

package/dist/types/src/core/ui/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","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.d.ts","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/ui/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/ui/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/ui/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/ui/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/ui/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/ui/esm/src/core/ui/index.js

@@ -1,2 +1,2 @@
-export{calculateColors,calculatePercColor,convertHex,convertRGB,defaultFontSize,pxToRem,resolveStyleValue,setDefaultFontSize,toHex}from"./utils/style.js";export{LayoutBox}from"./components/container/LayoutBox.js";export{LayoutDirection}from"./components/container/layoutBox.types.js";export{Flex,FlexTight,FlexTightStyled,FlexWrapper}from"./components/container/Flex.js";export{Placeholder}from"./components/container/Placeholder.js";export{CollapsibleContainer}from"./components/container/CollapsibleContainer.js";export{ResizableContainer}from"./components/container/ResizableContainer.js";export{Field,FieldWrapper,Select,setIconColor,setIconComponent}from"./components/field/Field.js";export{DividerHorizontal,DividerLine,DividerVertical}from"./components/dividers/DividerLine.js";export{IconBase}from"./components/icon/IconBase.js";export{Icon}from"./components/icon/Icon.js";export{ESIcon,ESIconBase}from"./components/icon/IconWC.js";
+export{calculateColors,calculatePercColor,convertHex,convertRGB,defaultFontSize,pxToRem,resolveStyleValue,setDefaultFontSize,toHex}from"./utils/style.js";export{LayoutBox}from"./components/container/LayoutBox.js";export{LayoutDirection}from"./components/container/layoutBox.types.js";export{Flex,FlexTight,FlexTightStyled,FlexWrapper}from"./components/container/Flex.js";export{Placeholder}from"./components/container/Placeholder.js";export{CollapsibleContainer}from"./components/container/CollapsibleContainer.js";export{ResizableContainer}from"./components/container/ResizableContainer.js";export{Field,FieldWrapper,Select,setIconColor,setIconComponent}from"./components/field/Field.js";export{DividerHorizontal,DividerLine,DividerVertical}from"./components/dividers/DividerLine.js";export{IconBase}from"./components/icon/IconBase.js";export{Icon}from"./components/icon/Icon.js";export{ESIcon,ESIconBase}from"./components/icon/IconWC.js";export{FlowLayout}from"./components/molecules/layouts/FlowLayout.js";
 //# sourceMappingURL=index.js.map

package/dist/ui/esm/src/core/utils/helpers/ui.js

@@ -1,2 +1,2 @@
-import"../../../../node_modules/core-js/modules/web.dom-collections.iterator.js";const t=t=>{const o={},s={};return Object.entries(t).forEach((t=>{let[e,r]=t;"data-"===e.substr(0,5)||"data"===e.substr(0,4)?o[e]=r:s[e]=r})),{dataProps:o,restProps:s}};export{t as parseProps};
+import"../../../../node_modules/core-js/modules/web.dom-collections.iterator.js";const t=function(){for(var t=arguments.length,r=new Array(t),e=0;e<t;e++)r[e]=arguments[e];return r.filter((t=>"string"==typeof t&&null!=t)).filter(Boolean).join(" ")},r=t=>{const r={},e={};return Object.entries(t).forEach((t=>{let[o,s]=t;"data-"===o.substr(0,5)||"data"===o.substr(0,4)?r[o]=s:e[o]=s})),{dataProps:r,restProps:e}};export{t as classNames,r as parseProps};
 //# sourceMappingURL=ui.js.map

package/dist/ui/esm/src/core/utils/helpers/ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui.js","sources":["../../../../../../../src/core/utils/helpers/ui.ts"],"sourcesContent":["export const noop = () => undefined\n\n\nexport const mapSerReplacer = (key: string, value: unknown) => {\n  if (value instanceof Map) {\n    return {\n      dataType: 'Map',\n      value: Array.from(value.entries()), // or with spread: value: [...value]\n    }\n  }\n  return value\n}\n\nexport type TClassName = string | boolean | null | undefined\nexport const classNames = (...classes: TClassName[]) => classes\n  .filter((className: TClassName) => (typeof className === 'string' && className !== undefined && className !== null))\n  .filter(Boolean).join(' ')\n\n\nexport type PropsCategoriesType = {\n  dataProps: Record<string, unknown>\n  restProps: Record<string, unknown>\n};\n\nexport const parseProps = (props: Record<string, unknown>):PropsCategoriesType => {\n  const dataProps: Record<string, unknown> = {}\n  const restProps: Record<string, unknown> = {}\n\n  Object.entries(props).forEach(([key, value]) => {\n    if (key.substr(0, 5) === 'data-' || key.substr(0, 4) === 'data') {\n      dataProps[key] = value\n    } else {\n      restProps[key] = value\n    }\n  })\n  return { dataProps, restProps }\n}\n"],"names":["parseProps","props","dataProps","restProps","Object","entries","forEach","_ref","key","value","substr"],"mappings":"iFAwBaA,MAAAA,EAAcC,IACzB,MAAMC,EAAqC,CAAA,EACrCC,EAAqC,CAAA,EAS3C,OAPAC,OAAOC,QAAQJ,GAAOK,SAAQC,IAAkB,IAAhBC,EAAKC,GAAMF,EAChB,UAArBC,EAAIE,OAAO,EAAG,IAAuC,SAArBF,EAAIE,OAAO,EAAG,GAChDR,EAAUM,GAAOC,EAEjBN,EAAUK,GAAOC,CACnB,IAEK,CAAEP,YAAWC,YAAW"}
+{"version":3,"file":"ui.js","sources":["../../../../../../../src/core/utils/helpers/ui.ts"],"sourcesContent":["export const noop = () => undefined\n\n\nexport const mapSerReplacer = (key: string, value: unknown) => {\n  if (value instanceof Map) {\n    return {\n      dataType: 'Map',\n      value: Array.from(value.entries()), // or with spread: value: [...value]\n    }\n  }\n  return value\n}\n\nexport type TClassName = string | boolean | null | undefined\nexport const classNames = (...classes: TClassName[]) => classes\n  .filter((className: TClassName) => (typeof className === 'string' && className !== undefined && className !== null))\n  .filter(Boolean).join(' ')\n\n\nexport type PropsCategoriesType = {\n  dataProps: Record<string, unknown>\n  restProps: Record<string, unknown>\n};\n\nexport const parseProps = (props: Record<string, unknown>):PropsCategoriesType => {\n  const dataProps: Record<string, unknown> = {}\n  const restProps: Record<string, unknown> = {}\n\n  Object.entries(props).forEach(([key, value]) => {\n    if (key.substr(0, 5) === 'data-' || key.substr(0, 4) === 'data') {\n      dataProps[key] = value\n    } else {\n      restProps[key] = value\n    }\n  })\n  return { dataProps, restProps }\n}\n"],"names":["classNames","_len","arguments","length","classes","Array","_key","filter","className","Boolean","join","parseProps","props","dataProps","restProps","Object","entries","forEach","_ref","key","value","substr"],"mappings":"iFAcaA,MAAAA,EAAa,WAAA,IAAA,IAAAC,EAAAC,UAAAC,OAAIC,EAAOC,IAAAA,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAPF,EAAOE,GAAAJ,UAAAI,GAAA,OAAmBF,EACrDG,QAAQC,GAAgD,iBAAdA,GAAP,MAAiCA,IACpED,OAAOE,SAASC,KAAK,IAAI,EAQfC,EAAcC,IACzB,MAAMC,EAAqC,CAAA,EACrCC,EAAqC,CAAA,EAS3C,OAPAC,OAAOC,QAAQJ,GAAOK,SAAQC,IAAkB,IAAhBC,EAAKC,GAAMF,EAChB,UAArBC,EAAIE,OAAO,EAAG,IAAuC,SAArBF,EAAIE,OAAO,EAAG,GAChDR,EAAUM,GAAOC,EAEjBN,EAAUK,GAAOC,CACnB,IAEK,CAAEP,YAAWC,YAAW"}

package/dist/ui/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/ui/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/ui/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/ui/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/ui/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/ui/src/core/ui/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./utils/style.js"),o=require("./components/container/LayoutBox.js"),r=require("./components/container/layoutBox.types.js"),t=require("./components/container/Flex.js"),n=require("./components/container/Placeholder.js"),s=require("./components/container/CollapsibleContainer.js"),i=require("./components/container/ResizableContainer.js"),l=require("./components/field/Field.js"),c=require("./components/dividers/DividerLine.js"),p=require("./components/icon/IconBase.js"),a=require("./components/icon/Icon.js"),x=require("./components/icon/IconWC.js");exports.calculateColors=e.calculateColors,exports.calculatePercColor=e.calculatePercColor,exports.convertHex=e.convertHex,exports.convertRGB=e.convertRGB,Object.defineProperty(exports,"defaultFontSize",{enumerable:!0,get:function(){return e.defaultFontSize}}),exports.pxToRem=e.pxToRem,exports.resolveStyleValue=e.resolveStyleValue,exports.setDefaultFontSize=e.setDefaultFontSize,exports.toHex=e.toHex,exports.LayoutBox=o.LayoutBox,exports.LayoutDirection=r.LayoutDirection,exports.Flex=t.Flex,exports.FlexTight=t.FlexTight,exports.FlexTightStyled=t.FlexTightStyled,exports.FlexWrapper=t.FlexWrapper,exports.Placeholder=n.Placeholder,exports.CollapsibleContainer=s.CollapsibleContainer,exports.ResizableContainer=i.ResizableContainer,exports.Field=l.Field,exports.FieldWrapper=l.FieldWrapper,exports.Select=l.Select,exports.setIconColor=l.setIconColor,exports.setIconComponent=l.setIconComponent,exports.DividerHorizontal=c.DividerHorizontal,exports.DividerLine=c.DividerLine,exports.DividerVertical=c.DividerVertical,exports.IconBase=p.IconBase,exports.Icon=a.Icon,exports.ESIcon=x.ESIcon,exports.ESIconBase=x.ESIconBase;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./utils/style.js"),o=require("./components/container/LayoutBox.js"),t=require("./components/container/layoutBox.types.js"),r=require("./components/container/Flex.js"),n=require("./components/container/Placeholder.js"),s=require("./components/container/CollapsibleContainer.js"),i=require("./components/container/ResizableContainer.js"),l=require("./components/field/Field.js"),c=require("./components/dividers/DividerLine.js"),p=require("./components/icon/IconBase.js"),a=require("./components/icon/Icon.js"),x=require("./components/icon/IconWC.js"),u=require("./components/molecules/layouts/FlowLayout.js");exports.calculateColors=e.calculateColors,exports.calculatePercColor=e.calculatePercColor,exports.convertHex=e.convertHex,exports.convertRGB=e.convertRGB,Object.defineProperty(exports,"defaultFontSize",{enumerable:!0,get:function(){return e.defaultFontSize}}),exports.pxToRem=e.pxToRem,exports.resolveStyleValue=e.resolveStyleValue,exports.setDefaultFontSize=e.setDefaultFontSize,exports.toHex=e.toHex,exports.LayoutBox=o.LayoutBox,exports.LayoutDirection=t.LayoutDirection,exports.Flex=r.Flex,exports.FlexTight=r.FlexTight,exports.FlexTightStyled=r.FlexTightStyled,exports.FlexWrapper=r.FlexWrapper,exports.Placeholder=n.Placeholder,exports.CollapsibleContainer=s.CollapsibleContainer,exports.ResizableContainer=i.ResizableContainer,exports.Field=l.Field,exports.FieldWrapper=l.FieldWrapper,exports.Select=l.Select,exports.setIconColor=l.setIconColor,exports.setIconComponent=l.setIconComponent,exports.DividerHorizontal=c.DividerHorizontal,exports.DividerLine=c.DividerLine,exports.DividerVertical=c.DividerVertical,exports.IconBase=p.IconBase,exports.Icon=a.Icon,exports.ESIcon=x.ESIcon,exports.ESIconBase=x.ESIconBase,exports.FlowLayout=u.FlowLayout;
 //# sourceMappingURL=index.js.map

package/dist/ui/src/core/utils/helpers/ui.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),require("../../../../node_modules/core-js/modules/web.dom-collections.iterator.js");exports.parseProps=e=>{const r={},s={};return Object.entries(e).forEach((e=>{let[t,o]=e;"data-"===t.substr(0,5)||"data"===t.substr(0,4)?r[t]=o:s[t]=o})),{dataProps:r,restProps:s}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),require("../../../../node_modules/core-js/modules/web.dom-collections.iterator.js");exports.classNames=function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];return r.filter((e=>"string"==typeof e&&null!=e)).filter(Boolean).join(" ")},exports.parseProps=e=>{const r={},t={};return Object.entries(e).forEach((e=>{let[s,o]=e;"data-"===s.substr(0,5)||"data"===s.substr(0,4)?r[s]=o:t[s]=o})),{dataProps:r,restProps:t}};
 //# sourceMappingURL=ui.js.map

package/dist/ui/src/core/utils/helpers/ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui.js","sources":["../../../../../../src/core/utils/helpers/ui.ts"],"sourcesContent":["export const noop = () => undefined\n\n\nexport const mapSerReplacer = (key: string, value: unknown) => {\n  if (value instanceof Map) {\n    return {\n      dataType: 'Map',\n      value: Array.from(value.entries()), // or with spread: value: [...value]\n    }\n  }\n  return value\n}\n\nexport type TClassName = string | boolean | null | undefined\nexport const classNames = (...classes: TClassName[]) => classes\n  .filter((className: TClassName) => (typeof className === 'string' && className !== undefined && className !== null))\n  .filter(Boolean).join(' ')\n\n\nexport type PropsCategoriesType = {\n  dataProps: Record<string, unknown>\n  restProps: Record<string, unknown>\n};\n\nexport const parseProps = (props: Record<string, unknown>):PropsCategoriesType => {\n  const dataProps: Record<string, unknown> = {}\n  const restProps: Record<string, unknown> = {}\n\n  Object.entries(props).forEach(([key, value]) => {\n    if (key.substr(0, 5) === 'data-' || key.substr(0, 4) === 'data') {\n      dataProps[key] = value\n    } else {\n      restProps[key] = value\n    }\n  })\n  return { dataProps, restProps }\n}\n"],"names":["props","dataProps","restProps","Object","entries","forEach","_ref","key","value","substr"],"mappings":"2KAwB2BA,IACzB,MAAMC,EAAqC,CAAA,EACrCC,EAAqC,CAAA,EAS3C,OAPAC,OAAOC,QAAQJ,GAAOK,SAAQC,IAAkB,IAAhBC,EAAKC,GAAMF,EAChB,UAArBC,EAAIE,OAAO,EAAG,IAAuC,SAArBF,EAAIE,OAAO,EAAG,GAChDR,EAAUM,GAAOC,EAEjBN,EAAUK,GAAOC,CACnB,IAEK,CAAEP,YAAWC,YAAW"}
+{"version":3,"file":"ui.js","sources":["../../../../../../src/core/utils/helpers/ui.ts"],"sourcesContent":["export const noop = () => undefined\n\n\nexport const mapSerReplacer = (key: string, value: unknown) => {\n  if (value instanceof Map) {\n    return {\n      dataType: 'Map',\n      value: Array.from(value.entries()), // or with spread: value: [...value]\n    }\n  }\n  return value\n}\n\nexport type TClassName = string | boolean | null | undefined\nexport const classNames = (...classes: TClassName[]) => classes\n  .filter((className: TClassName) => (typeof className === 'string' && className !== undefined && className !== null))\n  .filter(Boolean).join(' ')\n\n\nexport type PropsCategoriesType = {\n  dataProps: Record<string, unknown>\n  restProps: Record<string, unknown>\n};\n\nexport const parseProps = (props: Record<string, unknown>):PropsCategoriesType => {\n  const dataProps: Record<string, unknown> = {}\n  const restProps: Record<string, unknown> = {}\n\n  Object.entries(props).forEach(([key, value]) => {\n    if (key.substr(0, 5) === 'data-' || key.substr(0, 4) === 'data') {\n      dataProps[key] = value\n    } else {\n      restProps[key] = value\n    }\n  })\n  return { dataProps, restProps }\n}\n"],"names":["_len","arguments","length","classes","Array","_key","filter","className","Boolean","join","props","dataProps","restProps","Object","entries","forEach","_ref","key","value","substr"],"mappings":"2KAc0B,WAAA,IAAA,IAAAA,EAAAC,UAAAC,OAAIC,EAAOC,IAAAA,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAPF,EAAOE,GAAAJ,UAAAI,GAAA,OAAmBF,EACrDG,QAAQC,GAAgD,iBAAdA,GAAP,MAAiCA,IACpED,OAAOE,SAASC,KAAK,IAAI,qBAQDC,IACzB,MAAMC,EAAqC,CAAA,EACrCC,EAAqC,CAAA,EAS3C,OAPAC,OAAOC,QAAQJ,GAAOK,SAAQC,IAAkB,IAAhBC,EAAKC,GAAMF,EAChB,UAArBC,EAAIE,OAAO,EAAG,IAAuC,SAArBF,EAAIE,OAAO,EAAG,GAChDR,EAAUM,GAAOC,EAEjBN,EAAUK,GAAOC,CACnB,IAEK,CAAEP,YAAWC,YAAW"}

package/dist/utils/esm/index.css

@@ -28,6 +28,30 @@
   width: var(--height);
   height: var(--width);
 }
+.layoutBox-module_layout-box__faPND {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  flex: 0;
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+  flex-wrap: nowrap;
+  gap: 0;
+  text-align: left;
+  justify-content: flex-start;
+  align-items: flex-start;
+  align-self: auto;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
+  min-width: 0;
+  min-height: 0;
+  border-radius: initial;
+}
 .divider-module_divider-line__6CesR {
   position: relative;
   display: block;
@@ -80,27 +104,16 @@
   max-width: var(--prop-value);
   opacity: 1;
 }
-.layoutBox-module_layout-box__faPND {
+.flowLayout-module_flowLayout__VHpnY {
+  overflow: auto;
+}
+.flowLayout-module_flowLayout__VHpnY .flowLayout-module_beforeContent__rY-mW {
   display: flex;
-  position: relative;
-  flex-direction: row;
-  flex: 0;
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: auto;
-  flex-wrap: nowrap;
-  gap: 0;
-  text-align: left;
-  justify-content: flex-start;
-  align-items: flex-start;
-  align-self: auto;
-  margin: 0;
-  padding: 0;
-  width: auto;
-  height: auto;
-  max-width: none;
-  max-height: none;
+  width: 100%;
+  min-width: 0;
+}
+.flowLayout-module_flowLayout__VHpnY .flowLayout-module_afterContent__Hlh8v {
+  display: flex;
+  width: 100%;
   min-width: 0;
-  min-height: 0;
-  border-radius: initial;
 }

package/dist/utils/index.css

@@ -28,6 +28,30 @@
   width: var(--height);
   height: var(--width);
 }
+.layoutBox-module_layout-box__faPND {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  flex: 0;
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+  flex-wrap: nowrap;
+  gap: 0;
+  text-align: left;
+  justify-content: flex-start;
+  align-items: flex-start;
+  align-self: auto;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
+  min-width: 0;
+  min-height: 0;
+  border-radius: initial;
+}
 .divider-module_divider-line__6CesR {
   position: relative;
   display: block;
@@ -80,27 +104,16 @@
   max-width: var(--prop-value);
   opacity: 1;
 }
-.layoutBox-module_layout-box__faPND {
+.flowLayout-module_flowLayout__VHpnY {
+  overflow: auto;
+}
+.flowLayout-module_flowLayout__VHpnY .flowLayout-module_beforeContent__rY-mW {
   display: flex;
-  position: relative;
-  flex-direction: row;
-  flex: 0;
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: auto;
-  flex-wrap: nowrap;
-  gap: 0;
-  text-align: left;
-  justify-content: flex-start;
-  align-items: flex-start;
-  align-self: auto;
-  margin: 0;
-  padding: 0;
-  width: auto;
-  height: auto;
-  max-width: none;
-  max-height: none;
+  width: 100%;
+  min-width: 0;
+}
+.flowLayout-module_flowLayout__VHpnY .flowLayout-module_afterContent__Hlh8v {
+  display: flex;
+  width: 100%;
   min-width: 0;
-  min-height: 0;
-  border-radius: initial;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@e1011/es-kit",
-  "version": "1.0.176",
+  "version": "1.0.178",
   "main": "dist/lib/cjs/src/index.js",
   "module": "dist/lib/esm/src/index.js",
   "sideEffects": false,