npm - @mittwald/flow-react-components - Versions diffs - 0.2.0-alpha.185 → 0.2.0-alpha.187 - Mend

@mittwald/flow-react-components 0.2.0-alpha.185 → 0.2.0-alpha.187

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/dist/js/components/src/components/ChartTooltip/components/TooltipContent.mjs CHANGED Viewed

@@ -22,7 +22,7 @@ const TooltipContent = (props) => {
     return /* @__PURE__ */ jsxs("div", { className, children: [
       /* @__PURE__ */ jsx(PopoverTip, { className: styles$1.tip }),
       /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
-        /* @__PURE__ */ jsx(Heading, { level: 3, children: headingFormatter ? headingFormatter(label) : label }),
+        /* @__PURE__ */ jsx(Heading, { level: 3, children: headingFormatter && typeof label === "string" ? headingFormatter(label) : label }),
         payload.filter((i) => i.fill !== "none").map((i, index) => /* @__PURE__ */ jsx(LegendItem, { color: i.fill, children: formatter ? formatter(i.value, i.dataKey, index, i.unit) : `${i.dataKey} ${i.value}${i.unit ? ` ${i.unit}` : ""}` }, i.dataKey))
       ] })
     ] });

package/dist/js/components/src/components/ChartTooltip/components/TooltipContent.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipContent.mjs","sources":["../../../../../../../src/components/ChartTooltip/components/TooltipContent.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport styles from \"../ChartTooltip.module.scss\";\nimport popoverStyles from \"../../Popover/Popover.module.scss\";\nimport { PopoverTip } from \"@/components/Popover/components/PopoverTip\";\nimport Heading from \"@/components/Heading\";\nimport { LegendItem } from \"@/components/Legend/components/LegendItem\";\nimport type * as Recharts from \"recharts\";\nimport type {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport type { WithTooltipFormatters } from \"../ChartTooltip\";\n\ninterface TooltipContentProps\n extends Pick<\n Recharts.TooltipContentProps<ValueType, NameType>,\n \"active\" \| \"payload\" \| \"label\" \| \"wrapperClassName\"\n >,\n WithTooltipFormatters {}\n\nexport const TooltipContent = (props: TooltipContentProps) => {\n const {\n active,\n payload,\n formatter,\n headingFormatter,\n label,\n wrapperClassName,\n } = props;\n const className = clsx(wrapperClassName, popoverStyles.popover);\n\n if (active && payload && payload.length) {\n return (\n <div className={className}>\n <PopoverTip className={styles.tip} />\n <div className={popoverStyles.content}>\n <Heading level={3}>\n {headingFormatter ? headingFormatter(label) : label}\n </Heading>\n {payload\n .filter((i) => i.fill !== \"none\")\n .map((i, index) => (\n <LegendItem color={i.fill} key={i.dataKey}>\n {formatter\n ? formatter(i.value, i.dataKey, index, i.unit)\n : `${i.dataKey} ${i.value}${i.unit ? ` ${i.unit}` : \"\"}`}\n </LegendItem>\n ))}\n </div>\n </div>\n );\n }\n\n return null;\n};\n"],"names":["popoverStyles","styles"],"mappings":";;;;;;;;AAoBa,MAAA,cAAA,GAAiB,CAAC,KAA+B,KAAA;AAC5D,EAAM,MAAA;AAAA,IACJ,MAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,KAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AACJ,EAAA,MAAM,SAAY,GAAA,IAAA,CAAK,gBAAkB,EAAAA,MAAA,CAAc,OAAO,CAAA;AAE9D,EAAI,IAAA,MAAA,IAAU,OAAW,IAAA,OAAA,CAAQ,MAAQ,EAAA;AACvC,IACE,uBAAA,IAAA,CAAC,SAAI,SACH,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,SAAW,EAAAC,QAAA,CAAO,GAAK,EAAA,CAAA;AAAA,sBAClC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAAD,MAAA,CAAc,OAC5B,EAAA,QAAA,EAAA;AAAA,~~wBAAA~~,GAAA,~~CAAC~~,~~WAAQ~~,KAAO,EAAA,CAAA,EACb,~~6BAAmB~~,~~gBAAiB~~,~~CAAA~~,KAAK,~~IAAI~~,~~KAChD~~,EAAA,CAAA;AAAA,QACC,OAAA,CACE,OAAO,CAAC,CAAA,KAAM,EAAE,IAAS,KAAA,MAAM,EAC/B,GAAI,CAAA,CAAC,GAAG,KACP,qBAAA,GAAA,CAAC,cAAW,KAAO,EAAA,CAAA,CAAE,MAClB,QACG,EAAA,SAAA,GAAA,SAAA,CAAU,EAAE,KAAO,EAAA,CAAA,CAAE,SAAS,KAAO,EAAA,CAAA,CAAE,IAAI,CAC3C,GAAA,CAAA,EAAG,EAAE,OAAO,CAAA,CAAA,EAAI,EAAE,KAAK,CAAA,EAAG,EAAE,IAAO,GAAA,CAAA,CAAA,EAAI,EAAE,IAAI,CAAA,CAAA,GAAK,EAAE,CAH1B,CAAA,EAAA,EAAA,CAAA,CAAE,OAIlC,CACD;AAAA,OACL,EAAA;AAAA,KACF,EAAA,CAAA;AAAA;AAIJ,EAAO,OAAA,IAAA;AACT;;;;"}
1	+ {"version":3,"file":"TooltipContent.mjs","sources":["../../../../../../../src/components/ChartTooltip/components/TooltipContent.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport styles from \"../ChartTooltip.module.scss\";\nimport popoverStyles from \"../../Popover/Popover.module.scss\";\nimport { PopoverTip } from \"@/components/Popover/components/PopoverTip\";\nimport Heading from \"@/components/Heading\";\nimport { LegendItem } from \"@/components/Legend/components/LegendItem\";\nimport type * as Recharts from \"recharts\";\nimport type {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport type { WithTooltipFormatters } from \"../ChartTooltip\";\n\ninterface TooltipContentProps\n extends Pick<\n Recharts.TooltipContentProps<ValueType, NameType>,\n \"active\" \| \"payload\" \| \"label\" \| \"wrapperClassName\"\n >,\n WithTooltipFormatters {}\n\nexport const TooltipContent = (props: TooltipContentProps) => {\n const {\n active,\n payload,\n formatter,\n headingFormatter,\n label,\n wrapperClassName,\n } = props;\n const className = clsx(wrapperClassName, popoverStyles.popover);\n\n if (active && payload && payload.length) {\n return (\n <div className={className}>\n <PopoverTip className={styles.tip} />\n <div className={popoverStyles.content}>\n <Heading level={3}>\n {headingFormatter && typeof label === \"string\"\n ? headingFormatter(label)\n : label}\n </Heading>\n {payload\n .filter((i) => i.fill !== \"none\")\n .map((i, index) => (\n <LegendItem color={i.fill} key={i.dataKey}>\n {formatter\n ? formatter(i.value, i.dataKey, index, i.unit)\n : `${i.dataKey} ${i.value}${i.unit ? ` ${i.unit}` : \"\"}`}\n </LegendItem>\n ))}\n </div>\n </div>\n );\n }\n\n return null;\n};\n"],"names":["popoverStyles","styles"],"mappings":";;;;;;;;AAoBa,MAAA,cAAA,GAAiB,CAAC,KAA+B,KAAA;AAC5D,EAAM,MAAA;AAAA,IACJ,MAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,KAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AACJ,EAAA,MAAM,SAAY,GAAA,IAAA,CAAK,gBAAkB,EAAAA,MAAA,CAAc,OAAO,CAAA;AAE9D,EAAI,IAAA,MAAA,IAAU,OAAW,IAAA,OAAA,CAAQ,MAAQ,EAAA;AACvC,IACE,uBAAA,IAAA,CAAC,SAAI,SACH,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,SAAW,EAAAC,QAAA,CAAO,GAAK,EAAA,CAAA;AAAA,sBAClC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAAD,MAAA,CAAc,OAC5B,EAAA,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,CAAA,EACb,QAAoB,EAAA,gBAAA,IAAA,OAAO,UAAU,QAClC,GAAA,gBAAA,CAAiB,KAAK,CAAA,GACtB,KACN,EAAA,CAAA;AAAA,QACC,OAAA,CACE,OAAO,CAAC,CAAA,KAAM,EAAE,IAAS,KAAA,MAAM,EAC/B,GAAI,CAAA,CAAC,GAAG,KACP,qBAAA,GAAA,CAAC,cAAW,KAAO,EAAA,CAAA,CAAE,MAClB,QACG,EAAA,SAAA,GAAA,SAAA,CAAU,EAAE,KAAO,EAAA,CAAA,CAAE,SAAS,KAAO,EAAA,CAAA,CAAE,IAAI,CAC3C,GAAA,CAAA,EAAG,EAAE,OAAO,CAAA,CAAA,EAAI,EAAE,KAAK,CAAA,EAAG,EAAE,IAAO,GAAA,CAAA,CAAA,EAAI,EAAE,IAAI,CAAA,CAAA,GAAK,EAAE,CAH1B,CAAA,EAAA,EAAA,CAAA,CAAE,OAIlC,CACD;AAAA,OACL,EAAA;AAAA,KACF,EAAA,CAAA;AAAA;AAIJ,EAAO,OAAA,IAAA;AACT;;;;"}

package/dist/js/components/src/components/ColumnLayout/ColumnLayout.mjs CHANGED Viewed

@@ -22,8 +22,25 @@ const ColumnLayout = flowComponent("ColumnLayout", (props) => {
     columnGap = gap,
     elementType = "div",
     "aria-label": ariaLabel,
-    ref
+    ref,
+    mergeInParentContext
   } = props;
+  let elementClassName = styles.columnLayout;
+  s?.map((v, i) => {
+    if (v === null) {
+      elementClassName = clsx(elementClassName, styles[`hide-s-${i + 1}`]);
+    }
+  });
+  m?.map((v, i) => {
+    if (v === null) {
+      elementClassName = clsx(elementClassName, styles[`hide-m-${i + 1}`]);
+    }
+  });
+  l?.map((v, i) => {
+    if (v === null) {
+      elementClassName = clsx(elementClassName, styles[`hide-l-${i + 1}`]);
+    }
+  });
   const columnsS = s ? getColumns(s) : "1fr";
   const columnsM = m ? getColumns(m) : s ? columnsS : "1fr 1fr";
   const columnsL = l ? getColumns(l) : m || s ? columnsM : "1fr 1fr 1fr";
@@ -46,8 +63,15 @@ const ColumnLayout = flowComponent("ColumnLayout", (props) => {
     {
       ref,
       "aria-label": ariaLabel,
-      className: styles.columnLayout,
-      children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children })
+      className: elementClassName,
+      children: /* @__PURE__ */ jsx(
+        PropsContextProvider,
+        {
+          props: propsContext,
+          mergeInParentContext,
+          children
+        }
+      )
     }
   ) });
 });

package/dist/js/components/src/components/ColumnLayout/ColumnLayout.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColumnLayout.mjs","sources":["../../../../../../src/components/ColumnLayout/ColumnLayout.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./ColumnLayout.module.scss\";\nimport { getColumns } from \"./lib/getColumns\";\nimport clsx from \"clsx\";\nimport type {\n PropsWithClassName,\n PropsWithElementType,\n} from \"@/lib/types/props\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\ntype GapSize = \"s\" \| \"m\" \| \"l\" \| \"xl\";\n\nexport interface ColumnLayoutProps<\n T extends keyof HTMLElementTagNameMap = \"div\" \| \"ul\",\n> extends PropsWithChildren,\n PropsWithElementType<T>,\n PropsWithClassName,\n FlowComponentProps<HTMLElementTagNameMap[T]> {\n /** Column layout for container size s. /\n s?: number[];\n /* Column layout for container size m. /\n m?: number[];\n /* Column layout for container size l. /\n l?: number[];\n /\n Size of the row and column gap between the content blocks inside the column\n * layout.\n \n @default \"m\"\n /\n gap?: GapSize;\n /* Size of the row gap between the content blocks inside the column layout. /\n rowGap?: GapSize;\n /* Size of the column gap between the content blocks inside the column layout. /\n columnGap?: GapSize;\n}\n\n/\n @flr-generate all\n * @flr-clear-props-context\n */\nexport const ColumnLayout = flowComponent(\"ColumnLayout\", (props) => {\n const {\n children,\n className,\n s,\n m,\n l,\n gap = \"m\",\n rowGap = gap,\n columnGap = gap,\n elementType = \"div\",\n \"aria-label\": ariaLabel,\n ref,\n } = props;\n\n const columnsS = s ? getColumns(s) : \"1fr\";\n const columnsM = m ? getColumns(m) : s ? columnsS : \"1fr 1fr\";\n const columnsL = l ? getColumns(l) : m \|\| s ? columnsM : \"1fr 1fr 1fr\";\n\n const style = {\n \"--column-layout--columns-s\": columnsS,\n \"--column-layout--columns-m\": columnsM,\n \"--column-layout--columns-l\": columnsL,\n \"--column-layout--row-gap\": `var(--column-layout--gap--${rowGap})`,\n \"--column-layout--column-gap\": `var(--column-layout--gap--${columnGap})`,\n } as CSSProperties;\n\n const rootClassName = clsx(styles.columnLayoutContainer, className);\n\n const Element = elementType;\n\n const propsContext: PropsContext = {\n Section: {\n hideSeparator: true,\n },\n };\n\n return (\n <div className={rootClassName} style={style}>\n <Element\n ref={ref as never}\n aria-label={ariaLabel}\n className={~~styles.columnLayout~~}\n >\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </Element>\n </div>\n );\n});\n\nexport default ColumnLayout;\n"],"names":[],"mappings":";;;;;;;;;;~~AA+CO~~,MAAM,YAAe,GAAA,aAAA,CAAc,cAAgB,EAAA,CAAC,KAAU,KAAA;AACnE,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,IACA,GAAM,GAAA,GAAA;AAAA,IACN,MAAS,GAAA,GAAA;AAAA,IACT,SAAY,GAAA,GAAA;AAAA,IACZ,WAAc,GAAA,KAAA;AAAA,IACd,YAAc,EAAA,SAAA;AAAA,IACd;AAAA,GACE,GAAA,KAAA;AAEJ,EAAA,MAAM,QAAW,GAAA,CAAA,GAAI,UAAW,CAAA,CAAC,CAAI,GAAA,KAAA;AACrC,EAAA,MAAM,WAAW,CAAI,GAAA,UAAA,CAAW,CAAC,CAAA,GAAI,IAAI,QAAW,GAAA,SAAA;AACpD,EAAA,MAAM,WAAW,CAAI,GAAA,UAAA,CAAW,CAAC,CAAI,GAAA,CAAA,IAAK,IAAI,QAAW,GAAA,aAAA;AAEzD,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,4BAA8B,EAAA,QAAA;AAAA,IAC9B,4BAA8B,EAAA,QAAA;AAAA,IAC9B,4BAA8B,EAAA,QAAA;AAAA,IAC9B,0BAAA,EAA4B,6BAA6B,MAAM,CAAA,CAAA,CAAA;AAAA,IAC/D,6BAAA,EAA+B,6BAA6B,SAAS,CAAA,CAAA;AAAA,GACvE;AAEA,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,qBAAA,EAAuB,SAAS,CAAA;AAElE,EAAA,MAAM,OAAU,GAAA,WAAA;AAEhB,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,OAAS,EAAA;AAAA,MACP,aAAe,EAAA;AAAA;AACjB,GACF;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,aAAA,EAAe,KAC7B,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,YAAY,EAAA,SAAA;AAAA,MACZ,~~WAAW~~,~~MAAO~~,~~CAAA,YAAA~~;AAAA,~~MAElB~~,~~QAAC~~,kBAAA,GAAA,~~CAAA~~,oBAAA,~~EAAA~~,~~EAAqB~~,KAAO,EAAA,YAAA,~~EAC1B~~,~~QACH~~,~~EAAA~~;AAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"ColumnLayout.mjs","sources":["../../../../../../src/components/ColumnLayout/ColumnLayout.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./ColumnLayout.module.scss\";\nimport { getColumns } from \"./lib/getColumns\";\nimport clsx from \"clsx\";\nimport type {\n PropsWithClassName,\n PropsWithElementType,\n} from \"@/lib/types/props\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\ntype GapSize = \"s\" \| \"m\" \| \"l\" \| \"xl\";\n\nexport interface ColumnLayoutProps<\n T extends keyof HTMLElementTagNameMap = \"div\" \| \"ul\",\n> extends PropsWithChildren,\n PropsWithElementType<T>,\n PropsWithClassName,\n FlowComponentProps<HTMLElementTagNameMap[T]> {\n /** Column layout for container size s. /\n s?: (number \| null)[];\n /* Column layout for container size m. /\n m?: (number \| null)[];\n /* Column layout for container size l. /\n l?: (number \| null)[];\n /\n Size of the row and column gap between the content blocks inside the column\n * layout.\n \n @default \"m\"\n /\n gap?: GapSize;\n /* Size of the row gap between the content blocks inside the column layout. /\n rowGap?: GapSize;\n /* Size of the column gap between the content blocks inside the column layout. /\n columnGap?: GapSize;\n / @internal /\n mergeInParentContext?: boolean;\n}\n\n/\n @flr-generate all\n * @flr-clear-props-context\n */\nexport const ColumnLayout = flowComponent(\"ColumnLayout\", (props) => {\n const {\n children,\n className,\n s,\n m,\n l,\n gap = \"m\",\n rowGap = gap,\n columnGap = gap,\n elementType = \"div\",\n \"aria-label\": ariaLabel,\n ref,\n mergeInParentContext,\n } = props;\n\n let elementClassName = styles.columnLayout;\n\n s?.map((v, i) => {\n if (v === null) {\n elementClassName = clsx(elementClassName, styles[`hide-s-${i + 1}`]);\n }\n });\n m?.map((v, i) => {\n if (v === null) {\n elementClassName = clsx(elementClassName, styles[`hide-m-${i + 1}`]);\n }\n });\n l?.map((v, i) => {\n if (v === null) {\n elementClassName = clsx(elementClassName, styles[`hide-l-${i + 1}`]);\n }\n });\n\n const columnsS = s ? getColumns(s) : \"1fr\";\n const columnsM = m ? getColumns(m) : s ? columnsS : \"1fr 1fr\";\n const columnsL = l ? getColumns(l) : m \|\| s ? columnsM : \"1fr 1fr 1fr\";\n\n const style = {\n \"--column-layout--columns-s\": columnsS,\n \"--column-layout--columns-m\": columnsM,\n \"--column-layout--columns-l\": columnsL,\n \"--column-layout--row-gap\": `var(--column-layout--gap--${rowGap})`,\n \"--column-layout--column-gap\": `var(--column-layout--gap--${columnGap})`,\n } as CSSProperties;\n\n const rootClassName = clsx(styles.columnLayoutContainer, className);\n\n const Element = elementType;\n\n const propsContext: PropsContext = {\n Section: {\n hideSeparator: true,\n },\n };\n\n return (\n <div className={rootClassName} style={style}>\n <Element\n ref={ref as never}\n aria-label={ariaLabel}\n className={elementClassName}\n >\n <PropsContextProvider\n props={propsContext}\n mergeInParentContext={mergeInParentContext}\n >\n {children}\n </PropsContextProvider>\n </Element>\n </div>\n );\n});\n\nexport default ColumnLayout;\n"],"names":[],"mappings":";;;;;;;;;;AAiDO,MAAM,YAAe,GAAA,aAAA,CAAc,cAAgB,EAAA,CAAC,KAAU,KAAA;AACnE,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,IACA,GAAM,GAAA,GAAA;AAAA,IACN,MAAS,GAAA,GAAA;AAAA,IACT,SAAY,GAAA,GAAA;AAAA,IACZ,WAAc,GAAA,KAAA;AAAA,IACd,YAAc,EAAA,SAAA;AAAA,IACd,GAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AAEJ,EAAA,IAAI,mBAAmB,MAAO,CAAA,YAAA;AAE9B,EAAG,CAAA,EAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAAM,KAAA;AACf,IAAA,IAAI,MAAM,IAAM,EAAA;AACd,MAAA,gBAAA,GAAmB,KAAK,gBAAkB,EAAA,MAAA,CAAO,UAAU,CAAI,GAAA,CAAC,EAAE,CAAC,CAAA;AAAA;AACrE,GACD,CAAA;AACD,EAAG,CAAA,EAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAAM,KAAA;AACf,IAAA,IAAI,MAAM,IAAM,EAAA;AACd,MAAA,gBAAA,GAAmB,KAAK,gBAAkB,EAAA,MAAA,CAAO,UAAU,CAAI,GAAA,CAAC,EAAE,CAAC,CAAA;AAAA;AACrE,GACD,CAAA;AACD,EAAG,CAAA,EAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAAM,KAAA;AACf,IAAA,IAAI,MAAM,IAAM,EAAA;AACd,MAAA,gBAAA,GAAmB,KAAK,gBAAkB,EAAA,MAAA,CAAO,UAAU,CAAI,GAAA,CAAC,EAAE,CAAC,CAAA;AAAA;AACrE,GACD,CAAA;AAED,EAAA,MAAM,QAAW,GAAA,CAAA,GAAI,UAAW,CAAA,CAAC,CAAI,GAAA,KAAA;AACrC,EAAA,MAAM,WAAW,CAAI,GAAA,UAAA,CAAW,CAAC,CAAA,GAAI,IAAI,QAAW,GAAA,SAAA;AACpD,EAAA,MAAM,WAAW,CAAI,GAAA,UAAA,CAAW,CAAC,CAAI,GAAA,CAAA,IAAK,IAAI,QAAW,GAAA,aAAA;AAEzD,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,4BAA8B,EAAA,QAAA;AAAA,IAC9B,4BAA8B,EAAA,QAAA;AAAA,IAC9B,4BAA8B,EAAA,QAAA;AAAA,IAC9B,0BAAA,EAA4B,6BAA6B,MAAM,CAAA,CAAA,CAAA;AAAA,IAC/D,6BAAA,EAA+B,6BAA6B,SAAS,CAAA,CAAA;AAAA,GACvE;AAEA,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,qBAAA,EAAuB,SAAS,CAAA;AAElE,EAAA,MAAM,OAAU,GAAA,WAAA;AAEhB,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,OAAS,EAAA;AAAA,MACP,aAAe,EAAA;AAAA;AACjB,GACF;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,aAAA,EAAe,KAC7B,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,YAAY,EAAA,SAAA;AAAA,MACZ,SAAW,EAAA,gBAAA;AAAA,MAEX,QAAA,kBAAA,GAAA;AAAA,QAAC,oBAAA;AAAA,QAAA;AAAA,UACC,KAAO,EAAA,YAAA;AAAA,UACP,oBAAA;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GAEJ,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/ColumnLayout/ColumnLayout.module.scss.mjs CHANGED Viewed

@@ -4,7 +4,22 @@ const columnLayoutContainer = "flow--column-layout--column-layout-container";
 const columnLayout = "flow--column-layout";
 const styles = {
 	columnLayoutContainer: columnLayoutContainer,
-	columnLayout: columnLayout
+	columnLayout: columnLayout,
+	"hide-l-1": "flow--column-layout--hide-l-1",
+	"hide-l-2": "flow--column-layout--hide-l-2",
+	"hide-l-3": "flow--column-layout--hide-l-3",
+	"hide-l-4": "flow--column-layout--hide-l-4",
+	"hide-l-5": "flow--column-layout--hide-l-5",
+	"hide-m-1": "flow--column-layout--hide-m-1",
+	"hide-m-2": "flow--column-layout--hide-m-2",
+	"hide-m-3": "flow--column-layout--hide-m-3",
+	"hide-m-4": "flow--column-layout--hide-m-4",
+	"hide-m-5": "flow--column-layout--hide-m-5",
+	"hide-s-1": "flow--column-layout--hide-s-1",
+	"hide-s-2": "flow--column-layout--hide-s-2",
+	"hide-s-3": "flow--column-layout--hide-s-3",
+	"hide-s-4": "flow--column-layout--hide-s-4",
+	"hide-s-5": "flow--column-layout--hide-s-5"
 };
 export { columnLayout, columnLayoutContainer, styles as default };

package/dist/js/components/src/components/ColumnLayout/ColumnLayout.module.scss.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColumnLayout.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;~~"}
1	+ {"version":3,"file":"ColumnLayout.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/js/components/src/components/ColumnLayout/lib/getColumns.mjs CHANGED Viewed

@@ -1,10 +1,7 @@
 "use client"
 /* */
 const getColumns = (values) => {
-  if (values.length < 1) {
-    throw new Error("Column layout array is empty");
-  }
-  const fractionValues = values.map((value) => `${value}fr`);
+  const fractionValues = values.filter((v) => v !== null).map((value) => `${value}fr`);
   return fractionValues.join(" ");
 };

package/dist/js/components/src/components/ColumnLayout/lib/getColumns.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"getColumns.mjs","sources":["../../../../../../../src/components/ColumnLayout/lib/getColumns.ts"],"sourcesContent":["export const getColumns = (values: number[]): string => {\n if ~~(values.length~~ < ~~1) {~~\n ~~throw new Error~~(~~\"Column~~ ~~layout~~ ~~array~~ is ~~empty\"~~)~~;\n }~~\n~~\n const fractionValues = values~~.map((value) => `${value}fr`);\n\n return fractionValues.join(\" \");\n};\n"],"names":[],"mappings":"AAAa,MAAA,UAAA,GAAa,CAAC,~~MAA6B~~,KAAA;~~AACtD~~,~~EAAI~~,~~IAAA~~,MAAA,~~CAAO~~,~~SAAS~~,~~CAAG~~,~~EAAA;AACrB~~,~~IAAM~~,~~MAAA~~,~~IAAI~~,~~MAAM~~,~~8BAA8B~~,CAAA~~;AAAA;AAGhD~~,~~EAAA~~,~~MAAM~~,~~iBAAiB,MAAO,~~CAAA,~~GAAA,CAAI,~~CAAC,KAAU,KAAA,CAAA,EAAG,KAAK,CAAI,EAAA,CAAA,CAAA;~~AAEzD~~,EAAO,OAAA,cAAA,CAAe,KAAK,GAAG,CAAA;AAChC;;;;"}
1	+ {"version":3,"file":"getColumns.mjs","sources":["../../../../../../../src/components/ColumnLayout/lib/getColumns.ts"],"sourcesContent":["export const getColumns = (values: (number \| null)[]): string => {\n const fractionValues = values\n .filter((v) => v !== null)\n .map((value) => `${value}fr`);\n\n return fractionValues.join(\" \");\n};\n"],"names":[],"mappings":"AAAa,MAAA,UAAA,GAAa,CAAC,MAAsC,KAAA;AAC/D,EAAA,MAAM,cAAiB,GAAA,MAAA,CACpB,MAAO,CAAA,CAAC,CAAM,KAAA,CAAA,KAAM,IAAI,CAAA,CACxB,GAAI,CAAA,CAAC,KAAU,KAAA,CAAA,EAAG,KAAK,CAAI,EAAA,CAAA,CAAA;AAE9B,EAAO,OAAA,cAAA,CAAe,KAAK,GAAG,CAAA;AAChC;;;;"}

package/dist/js/components/src/components/List/components/Header/components/ViewModeMenu/ViewModeMenu.mjs CHANGED Viewed

@@ -25,6 +25,7 @@ import { ContextMenu } from '../../../../../ContextMenu/ContextMenu.mjs';
 import '../../../../../MenuItem/MenuItem.mjs';
 import { ContextMenuTrigger } from '../../../../../ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.mjs';
 import '../../../../../ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs';
+import '../../../../../ColumnLayout/ColumnLayout.mjs';
 import '../../../ListSummary/ListSummary.mjs';
 import { useList } from '../../../../hooks/useList.mjs';
 import '../../../../List.mjs';

package/dist/js/components/src/components/List/components/Header/components/ViewModeMenu/ViewModeMenu.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ViewModeMenu.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/ViewModeMenu/ViewModeMenu.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { useList } from \"@/components/List\";\nimport type { ListViewMode } from \"@/components/List/model/types\";\nimport { IconView } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport TextView from \"@/views/TextView\";\nimport SectionView from \"@/views/SectionView\";\nimport MenuItemView from \"@/views/MenuItemView\";\nimport HeadingView from \"@/views/HeadingView\";\nimport ContextMenu, { ContextMenuTrigger } from \"@/components/ContextMenu\";\n\nexport const ViewModeMenu: FC = () => {\n const stringFormatter = useLocalizedStringFormatter(locales);\n const list = useList();\n const selectedViewMode = list.viewMode;\n\n const availableViewModes: ListViewMode[] = [];\n if (list.itemView?.showList) {\n availableViewModes.push(\"list\");\n }\n if (list.table) {\n availableViewModes.push(\"table\");\n }\n if (list.itemView?.showTiles) {\n availableViewModes.push(\"tiles\");\n }\n\n if (availableViewModes.length <= 1) {\n return null;\n }\n\n return (\n <ContextMenuTrigger>\n <ButtonView\n variant=\"outline\"\n color=\"secondary\"\n aria-label={stringFormatter.format(\"list.settings\")}\n >\n <TextView>\n {stringFormatter.format(`list.settings.viewMode.${selectedViewMode}`)}\n </TextView>\n <IconView />\n </ButtonView>\n <ContextMenu selectionMode=\"single\" selectedKeys={[selectedViewMode]}>\n <SectionView>\n <HeadingView>\n {stringFormatter.format(\"list.settings.viewMode\")}\n </HeadingView>\n {availableViewModes.map((viewMode) => (\n <MenuItemView\n id={viewMode}\n key={viewMode}\n onAction={() => {\n list.setViewMode(viewMode);\n }}\n >\n {stringFormatter.format(`list.settings.viewMode.${viewMode}`)}\n </MenuItemView>\n ))}\n </SectionView>\n </ContextMenu>\n </ContextMenuTrigger>\n );\n};\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAcO,MAAM,eAAmB,MAAM;AACpC,EAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAC3D,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAA,MAAM,mBAAmB,IAAK,CAAA,QAAA;AAE9B,EAAA,MAAM,qBAAqC,EAAC;AAC5C,EAAI,IAAA,IAAA,CAAK,UAAU,QAAU,EAAA;AAC3B,IAAA,kBAAA,CAAmB,KAAK,MAAM,CAAA;AAAA;AAEhC,EAAA,IAAI,KAAK,KAAO,EAAA;AACd,IAAA,kBAAA,CAAmB,KAAK,OAAO,CAAA;AAAA;AAEjC,EAAI,IAAA,IAAA,CAAK,UAAU,SAAW,EAAA;AAC5B,IAAA,kBAAA,CAAmB,KAAK,OAAO,CAAA;AAAA;AAGjC,EAAI,IAAA,kBAAA,CAAmB,UAAU,CAAG,EAAA;AAClC,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,4BACG,kBACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,SAAA;AAAA,QACR,KAAM,EAAA,WAAA;AAAA,QACN,YAAA,EAAY,eAAgB,CAAA,MAAA,CAAO,eAAe,CAAA;AAAA,QAElD,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YACE,QAAgB,EAAA,eAAA,CAAA,MAAA,CAAO,CAA0B,uBAAA,EAAA,gBAAgB,EAAE,CACtE,EAAA,CAAA;AAAA,8BACC,QAAS,EAAA,EAAA;AAAA;AAAA;AAAA,KACZ;AAAA,oBACA,GAAA,CAAC,eAAY,aAAc,EAAA,QAAA,EAAS,cAAc,CAAC,gBAAgB,CACjE,EAAA,QAAA,kBAAA,IAAA,CAAC,WACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,WACE,EAAA,EAAA,QAAA,EAAA,eAAA,CAAgB,MAAO,CAAA,wBAAwB,CAClD,EAAA,CAAA;AAAA,MACC,kBAAA,CAAmB,GAAI,CAAA,CAAC,QACvB,qBAAA,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA,QAAA;AAAA,UAEJ,UAAU,MAAM;AACd,YAAA,IAAA,CAAK,YAAY,QAAQ,CAAA;AAAA,WAC3B;AAAA,UAEC,QAAgB,EAAA,eAAA,CAAA,MAAA,CAAO,CAA0B,uBAAA,EAAA,QAAQ,CAAE,CAAA;AAAA,SAAA;AAAA,QALvD;AAAA,OAOR;AAAA,KAAA,EACH,CACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"ViewModeMenu.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/ViewModeMenu/ViewModeMenu.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { useList } from \"@/components/List\";\nimport type { ListViewMode } from \"@/components/List/model/types\";\nimport { IconView } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport TextView from \"@/views/TextView\";\nimport SectionView from \"@/views/SectionView\";\nimport MenuItemView from \"@/views/MenuItemView\";\nimport HeadingView from \"@/views/HeadingView\";\nimport ContextMenu, { ContextMenuTrigger } from \"@/components/ContextMenu\";\n\nexport const ViewModeMenu: FC = () => {\n const stringFormatter = useLocalizedStringFormatter(locales);\n const list = useList();\n const selectedViewMode = list.viewMode;\n\n const availableViewModes: ListViewMode[] = [];\n if (list.itemView?.showList) {\n availableViewModes.push(\"list\");\n }\n if (list.table) {\n availableViewModes.push(\"table\");\n }\n if (list.itemView?.showTiles) {\n availableViewModes.push(\"tiles\");\n }\n\n if (availableViewModes.length <= 1) {\n return null;\n }\n\n return (\n <ContextMenuTrigger>\n <ButtonView\n variant=\"outline\"\n color=\"secondary\"\n aria-label={stringFormatter.format(\"list.settings\")}\n >\n <TextView>\n {stringFormatter.format(`list.settings.viewMode.${selectedViewMode}`)}\n </TextView>\n <IconView />\n </ButtonView>\n <ContextMenu selectionMode=\"single\" selectedKeys={[selectedViewMode]}>\n <SectionView>\n <HeadingView>\n {stringFormatter.format(\"list.settings.viewMode\")}\n </HeadingView>\n {availableViewModes.map((viewMode) => (\n <MenuItemView\n id={viewMode}\n key={viewMode}\n onAction={() => {\n list.setViewMode(viewMode);\n }}\n >\n {stringFormatter.format(`list.settings.viewMode.${viewMode}`)}\n </MenuItemView>\n ))}\n </SectionView>\n </ContextMenu>\n </ContextMenuTrigger>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,eAAmB,MAAM;AACpC,EAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAC3D,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAA,MAAM,mBAAmB,IAAK,CAAA,QAAA;AAE9B,EAAA,MAAM,qBAAqC,EAAC;AAC5C,EAAI,IAAA,IAAA,CAAK,UAAU,QAAU,EAAA;AAC3B,IAAA,kBAAA,CAAmB,KAAK,MAAM,CAAA;AAAA;AAEhC,EAAA,IAAI,KAAK,KAAO,EAAA;AACd,IAAA,kBAAA,CAAmB,KAAK,OAAO,CAAA;AAAA;AAEjC,EAAI,IAAA,IAAA,CAAK,UAAU,SAAW,EAAA;AAC5B,IAAA,kBAAA,CAAmB,KAAK,OAAO,CAAA;AAAA;AAGjC,EAAI,IAAA,kBAAA,CAAmB,UAAU,CAAG,EAAA;AAClC,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,4BACG,kBACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,SAAA;AAAA,QACR,KAAM,EAAA,WAAA;AAAA,QACN,YAAA,EAAY,eAAgB,CAAA,MAAA,CAAO,eAAe,CAAA;AAAA,QAElD,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YACE,QAAgB,EAAA,eAAA,CAAA,MAAA,CAAO,CAA0B,uBAAA,EAAA,gBAAgB,EAAE,CACtE,EAAA,CAAA;AAAA,8BACC,QAAS,EAAA,EAAA;AAAA;AAAA;AAAA,KACZ;AAAA,oBACA,GAAA,CAAC,eAAY,aAAc,EAAA,QAAA,EAAS,cAAc,CAAC,gBAAgB,CACjE,EAAA,QAAA,kBAAA,IAAA,CAAC,WACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,WACE,EAAA,EAAA,QAAA,EAAA,eAAA,CAAgB,MAAO,CAAA,wBAAwB,CAClD,EAAA,CAAA;AAAA,MACC,kBAAA,CAAmB,GAAI,CAAA,CAAC,QACvB,qBAAA,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA,QAAA;AAAA,UAEJ,UAAU,MAAM;AACd,YAAA,IAAA,CAAK,YAAY,QAAQ,CAAA;AAAA,WAC3B;AAAA,UAEC,QAAgB,EAAA,eAAA,CAAA,MAAA,CAAO,CAA0B,uBAAA,EAAA,QAAQ,CAAE,CAAA;AAAA,SAAA;AAAA,QALvD;AAAA,OAOR;AAAA,KAAA,EACH,CACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/List/components/Items/Items.mjs CHANGED Viewed

@@ -22,6 +22,7 @@ import '../../../ContextMenu/ContextMenu.mjs';
 import '../../../MenuItem/MenuItem.mjs';
 import '../../../ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.mjs';
 import '../../../ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs';
+import '../../../ColumnLayout/ColumnLayout.mjs';
 import '../ListSummary/ListSummary.mjs';
 import { useList } from '../../hooks/useList.mjs';
 import '../../List.mjs';

package/dist/js/components/src/components/List/components/Items/Items.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Items.mjs","sources":["../../../../../../../../src/components/List/components/Items/Items.tsx"],"sourcesContent":["import { EmptyView } from \"@/components/List\";\nimport Item from \"@/components/List/components/Items/components/Item/Item\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport DivView from \"@/views/DivView\";\nimport ItemsGridListView from \"@/views/ItemsGridListView\";\nimport clsx from \"clsx\";\nimport type { FC } from \"react\";\nimport styles from \"./Items.module.scss\";\nimport { FallbackItems } from \"./components/FallbackItems\";\n\nexport const Items: FC = () => {\n const list = useList();\n const tiles = list.viewMode === \"tiles\";\n const isLoading = list.loader.useIsLoading();\n const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n\n if (!list.itemView) {\n return null;\n }\n\n const items = list.items.entries.map((item) => (\n <Item key={item.id} data={item.data} id={item.id} />\n ));\n\n const rootClassName = clsx(\n styles.items,\n isLoading && styles.isLoading,\n tiles && styles.tiles,\n );\n\n return (\n <DivView aria-hidden={isInitiallyLoading} aria-busy={isLoading}>\n <ItemsGridListView\n className={rootClassName}\n {...list.componentProps}\n renderEmptyState={() => <EmptyView />}\n style={{\n gridTemplateColumns: `repeat(auto-fill, minmax(${list.itemView.tileMaxWidth}px, 1fr))`,\n }}\n layout={list.viewMode === \"tiles\" ? \"grid\" : \"stack\"}\n >\n {isInitiallyLoading ? <FallbackItems /> : items}\n </ItemsGridListView>\n </DivView>\n );\n};\n\nexport default Items;\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAUO,MAAM,QAAY,MAAM;AAC7B,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAM,MAAA,KAAA,GAAQ,KAAK,QAAa,KAAA,OAAA;AAChC,EAAM,MAAA,SAAA,GAAY,IAAK,CAAA,MAAA,CAAO,YAAa,EAAA;AAC3C,EAAM,MAAA,kBAAA,GAAqB,IAAK,CAAA,MAAA,CAAO,qBAAsB,EAAA;AAE7D,EAAI,IAAA,CAAC,KAAK,QAAU,EAAA;AAClB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,QAAQ,IAAK,CAAA,KAAA,CAAM,OAAQ,CAAA,GAAA,CAAI,CAAC,IACpC,qBAAA,GAAA,CAAC,IAAmB,EAAA,EAAA,IAAA,EAAM,KAAK,IAAM,EAAA,EAAA,EAAI,KAAK,EAAnC,EAAA,EAAA,IAAA,CAAK,EAAkC,CACnD,CAAA;AAED,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,KAAA;AAAA,IACP,aAAa,MAAO,CAAA,SAAA;AAAA,IACpB,SAAS,MAAO,CAAA;AAAA,GAClB;AAEA,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA,EAAQ,aAAa,EAAA,kBAAA,EAAoB,aAAW,SACnD,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,aAAA;AAAA,MACV,GAAG,IAAK,CAAA,cAAA;AAAA,MACT,gBAAA,EAAkB,sBAAM,GAAA,CAAC,SAAU,EAAA,EAAA,CAAA;AAAA,MACnC,KAAO,EAAA;AAAA,QACL,mBAAqB,EAAA,CAAA,yBAAA,EAA4B,IAAK,CAAA,QAAA,CAAS,YAAY,CAAA,SAAA;AAAA,OAC7E;AAAA,MACA,MAAQ,EAAA,IAAA,CAAK,QAAa,KAAA,OAAA,GAAU,MAAS,GAAA,OAAA;AAAA,MAE5C,QAAA,EAAA,kBAAA,mBAAsB,GAAA,CAAA,aAAA,EAAA,EAAc,CAAK,GAAA;AAAA;AAAA,GAE9C,EAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"Items.mjs","sources":["../../../../../../../../src/components/List/components/Items/Items.tsx"],"sourcesContent":["import { EmptyView } from \"@/components/List\";\nimport Item from \"@/components/List/components/Items/components/Item/Item\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport DivView from \"@/views/DivView\";\nimport ItemsGridListView from \"@/views/ItemsGridListView\";\nimport clsx from \"clsx\";\nimport type { FC } from \"react\";\nimport styles from \"./Items.module.scss\";\nimport { FallbackItems } from \"./components/FallbackItems\";\n\nexport const Items: FC = () => {\n const list = useList();\n const tiles = list.viewMode === \"tiles\";\n const isLoading = list.loader.useIsLoading();\n const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n\n if (!list.itemView) {\n return null;\n }\n\n const items = list.items.entries.map((item) => (\n <Item key={item.id} data={item.data} id={item.id} />\n ));\n\n const rootClassName = clsx(\n styles.items,\n isLoading && styles.isLoading,\n tiles && styles.tiles,\n );\n\n return (\n <DivView aria-hidden={isInitiallyLoading} aria-busy={isLoading}>\n <ItemsGridListView\n className={rootClassName}\n {...list.componentProps}\n renderEmptyState={() => <EmptyView />}\n style={{\n gridTemplateColumns: `repeat(auto-fill, minmax(${list.itemView.tileMaxWidth}px, 1fr))`,\n }}\n layout={list.viewMode === \"tiles\" ? \"grid\" : \"stack\"}\n >\n {isInitiallyLoading ? <FallbackItems /> : items}\n </ItemsGridListView>\n </DivView>\n );\n};\n\nexport default Items;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,QAAY,MAAM;AAC7B,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAM,MAAA,KAAA,GAAQ,KAAK,QAAa,KAAA,OAAA;AAChC,EAAM,MAAA,SAAA,GAAY,IAAK,CAAA,MAAA,CAAO,YAAa,EAAA;AAC3C,EAAM,MAAA,kBAAA,GAAqB,IAAK,CAAA,MAAA,CAAO,qBAAsB,EAAA;AAE7D,EAAI,IAAA,CAAC,KAAK,QAAU,EAAA;AAClB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,QAAQ,IAAK,CAAA,KAAA,CAAM,OAAQ,CAAA,GAAA,CAAI,CAAC,IACpC,qBAAA,GAAA,CAAC,IAAmB,EAAA,EAAA,IAAA,EAAM,KAAK,IAAM,EAAA,EAAA,EAAI,KAAK,EAAnC,EAAA,EAAA,IAAA,CAAK,EAAkC,CACnD,CAAA;AAED,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,KAAA;AAAA,IACP,aAAa,MAAO,CAAA,SAAA;AAAA,IACpB,SAAS,MAAO,CAAA;AAAA,GAClB;AAEA,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA,EAAQ,aAAa,EAAA,kBAAA,EAAoB,aAAW,SACnD,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,aAAA;AAAA,MACV,GAAG,IAAK,CAAA,cAAA;AAAA,MACT,gBAAA,EAAkB,sBAAM,GAAA,CAAC,SAAU,EAAA,EAAA,CAAA;AAAA,MACnC,KAAO,EAAA;AAAA,QACL,mBAAqB,EAAA,CAAA,yBAAA,EAA4B,IAAK,CAAA,QAAA,CAAS,YAAY,CAAA,SAAA;AAAA,OAC7E;AAAA,MACA,MAAQ,EAAA,IAAA,CAAK,QAAa,KAAA,OAAA,GAAU,MAAS,GAAA,OAAA;AAAA,MAE5C,QAAA,EAAA,kBAAA,mBAAsB,GAAA,CAAA,aAAA,EAAA,EAAc,CAAK,GAAA;AAAA;AAAA,GAE9C,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/List/components/Items/components/Item/hooks/useGridItemProps.mjs CHANGED Viewed

@@ -21,6 +21,7 @@ import '../../../../../../ContextMenu/ContextMenu.mjs';
 import '../../../../../../MenuItem/MenuItem.mjs';
 import '../../../../../../ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.mjs';
 import '../../../../../../ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs';
+import '../../../../../../ColumnLayout/ColumnLayout.mjs';
 import '../../../../ListSummary/ListSummary.mjs';
 import { useList } from '../../../../../hooks/useList.mjs';
 import '../../../../../List.mjs';

package/dist/js/components/src/components/List/components/Items/components/Item/hooks/useGridItemProps.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useGridItemProps.mjs","sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/hooks/useGridItemProps.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React, { useEffect, useId, useRef, useState } from \"react\";\nimport { useList } from \"@/components/List\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { AccordionButton } from \"@/components/List/components/Items/components/Item/components/AccordionButton\";\n\ninterface P extends PropsWithChildren {\n data: never;\n}\n\nexport const useGridItemProps = (props: P) => {\n const { data, children: childrenFromProps } = props;\n const list = useList();\n const itemView = list.itemView;\n const onAction = list.onAction;\n\n const [isExpanded, setIsExpanded] = useState(\n itemView?.defaultExpanded?.(data) ?? false,\n );\n const contentElementId = useId();\n const itemRef = useRef<HTMLDivElement>(null);\n\n const accordion = list.accordion;\n const children = childrenFromProps ?? itemView?.render(data);\n\n useEffect(() => {\n if (accordion) {\n itemRef.current?.setAttribute(\"aria-expanded\", String(isExpanded));\n itemRef.current?.setAttribute(\"aria-controls\", contentElementId);\n }\n }, [isExpanded, contentElementId, itemRef.current, accordion]);\n\n if (!accordion) {\n return {\n gridItemProps: {\n onAction: onAction\n ? () => {\n onAction?.(data);\n }\n : undefined,\n },\n children,\n };\n }\n\n const toggleAccordion = () => {\n setIsExpanded((current) => !current);\n onAction?.(data);\n };\n\n const propsContext: PropsContext = {\n Content: {\n id: dynamic((p) => (p.slot === \"bottom\" ? contentElementId : undefined)),\n wrapWith: dynamic((p) =>\n p.slot === \"bottom\" ? (\n <AccordionButton\n contentElementId={contentElementId}\n toggle={toggleAccordion}\n isExpanded={isExpanded}\n />\n ) : undefined,\n ),\n },\n };\n\n return {\n gridItemProps: {\n ref: itemRef,\n onAction: toggleAccordion,\n },\n children: (\n <PropsContextProvider\n props={propsContext}\n dependencies={[contentElementId, isExpanded]}\n >\n {children}\n </PropsContextProvider>\n ),\n };\n};\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAWa,MAAA,gBAAA,GAAmB,CAAC,KAAa,KAAA;AAC5C,EAAA,MAAM,EAAE,IAAA,EAAM,QAAU,EAAA,iBAAA,EAAsB,GAAA,KAAA;AAC9C,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAA,MAAM,WAAW,IAAK,CAAA,QAAA;AACtB,EAAA,MAAM,WAAW,IAAK,CAAA,QAAA;AAEtB,EAAM,MAAA,CAAC,UAAY,EAAA,aAAa,CAAI,GAAA,QAAA;AAAA,IAClC,QAAA,EAAU,eAAkB,GAAA,IAAI,CAAK,IAAA;AAAA,GACvC;AACA,EAAA,MAAM,mBAAmB,KAAM,EAAA;AAC/B,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA;AAE3C,EAAA,MAAM,YAAY,IAAK,CAAA,SAAA;AACvB,EAAA,MAAM,QAAW,GAAA,iBAAA,IAAqB,QAAU,EAAA,MAAA,CAAO,IAAI,CAAA;AAE3D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAW,EAAA;AACb,MAAA,OAAA,CAAQ,OAAS,EAAA,YAAA,CAAa,eAAiB,EAAA,MAAA,CAAO,UAAU,CAAC,CAAA;AACjE,MAAQ,OAAA,CAAA,OAAA,EAAS,YAAa,CAAA,eAAA,EAAiB,gBAAgB,CAAA;AAAA;AACjE,KACC,CAAC,UAAA,EAAY,kBAAkB,OAAQ,CAAA,OAAA,EAAS,SAAS,CAAC,CAAA;AAE7D,EAAA,IAAI,CAAC,SAAW,EAAA;AACd,IAAO,OAAA;AAAA,MACL,aAAe,EAAA;AAAA,QACb,QAAA,EAAU,WACN,MAAM;AACJ,UAAA,QAAA,GAAW,IAAI,CAAA;AAAA,SAEjB,GAAA;AAAA,OACN;AAAA,MACA;AAAA,KACF;AAAA;AAGF,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAc,aAAA,CAAA,CAAC,OAAY,KAAA,CAAC,OAAO,CAAA;AACnC,IAAA,QAAA,GAAW,IAAI,CAAA;AAAA,GACjB;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,OAAS,EAAA;AAAA,MACP,EAAA,EAAI,QAAQ,CAAC,CAAA,KAAO,EAAE,IAAS,KAAA,QAAA,GAAW,mBAAmB,MAAU,CAAA;AAAA,MACvE,QAAU,EAAA,OAAA;AAAA,QAAQ,CAAC,CAAA,KACjB,CAAE,CAAA,IAAA,KAAS,QACT,mBAAA,GAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,gBAAA;AAAA,YACA,MAAQ,EAAA,eAAA;AAAA,YACR;AAAA;AAAA,SAEA,GAAA;AAAA;AACN;AACF,GACF;AAEA,EAAO,OAAA;AAAA,IACL,aAAe,EAAA;AAAA,MACb,GAAK,EAAA,OAAA;AAAA,MACL,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,QACE,kBAAA,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA,YAAA;AAAA,QACP,YAAA,EAAc,CAAC,gBAAA,EAAkB,UAAU,CAAA;AAAA,QAE1C;AAAA;AAAA;AACH,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"useGridItemProps.mjs","sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/hooks/useGridItemProps.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React, { useEffect, useId, useRef, useState } from \"react\";\nimport { useList } from \"@/components/List\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { AccordionButton } from \"@/components/List/components/Items/components/Item/components/AccordionButton\";\n\ninterface P extends PropsWithChildren {\n data: never;\n}\n\nexport const useGridItemProps = (props: P) => {\n const { data, children: childrenFromProps } = props;\n const list = useList();\n const itemView = list.itemView;\n const onAction = list.onAction;\n\n const [isExpanded, setIsExpanded] = useState(\n itemView?.defaultExpanded?.(data) ?? false,\n );\n const contentElementId = useId();\n const itemRef = useRef<HTMLDivElement>(null);\n\n const accordion = list.accordion;\n const children = childrenFromProps ?? itemView?.render(data);\n\n useEffect(() => {\n if (accordion) {\n itemRef.current?.setAttribute(\"aria-expanded\", String(isExpanded));\n itemRef.current?.setAttribute(\"aria-controls\", contentElementId);\n }\n }, [isExpanded, contentElementId, itemRef.current, accordion]);\n\n if (!accordion) {\n return {\n gridItemProps: {\n onAction: onAction\n ? () => {\n onAction?.(data);\n }\n : undefined,\n },\n children,\n };\n }\n\n const toggleAccordion = () => {\n setIsExpanded((current) => !current);\n onAction?.(data);\n };\n\n const propsContext: PropsContext = {\n Content: {\n id: dynamic((p) => (p.slot === \"bottom\" ? contentElementId : undefined)),\n wrapWith: dynamic((p) =>\n p.slot === \"bottom\" ? (\n <AccordionButton\n contentElementId={contentElementId}\n toggle={toggleAccordion}\n isExpanded={isExpanded}\n />\n ) : undefined,\n ),\n },\n };\n\n return {\n gridItemProps: {\n ref: itemRef,\n onAction: toggleAccordion,\n },\n children: (\n <PropsContextProvider\n props={propsContext}\n dependencies={[contentElementId, isExpanded]}\n >\n {children}\n </PropsContextProvider>\n ),\n };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAWa,MAAA,gBAAA,GAAmB,CAAC,KAAa,KAAA;AAC5C,EAAA,MAAM,EAAE,IAAA,EAAM,QAAU,EAAA,iBAAA,EAAsB,GAAA,KAAA;AAC9C,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAA,MAAM,WAAW,IAAK,CAAA,QAAA;AACtB,EAAA,MAAM,WAAW,IAAK,CAAA,QAAA;AAEtB,EAAM,MAAA,CAAC,UAAY,EAAA,aAAa,CAAI,GAAA,QAAA;AAAA,IAClC,QAAA,EAAU,eAAkB,GAAA,IAAI,CAAK,IAAA;AAAA,GACvC;AACA,EAAA,MAAM,mBAAmB,KAAM,EAAA;AAC/B,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA;AAE3C,EAAA,MAAM,YAAY,IAAK,CAAA,SAAA;AACvB,EAAA,MAAM,QAAW,GAAA,iBAAA,IAAqB,QAAU,EAAA,MAAA,CAAO,IAAI,CAAA;AAE3D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAW,EAAA;AACb,MAAA,OAAA,CAAQ,OAAS,EAAA,YAAA,CAAa,eAAiB,EAAA,MAAA,CAAO,UAAU,CAAC,CAAA;AACjE,MAAQ,OAAA,CAAA,OAAA,EAAS,YAAa,CAAA,eAAA,EAAiB,gBAAgB,CAAA;AAAA;AACjE,KACC,CAAC,UAAA,EAAY,kBAAkB,OAAQ,CAAA,OAAA,EAAS,SAAS,CAAC,CAAA;AAE7D,EAAA,IAAI,CAAC,SAAW,EAAA;AACd,IAAO,OAAA;AAAA,MACL,aAAe,EAAA;AAAA,QACb,QAAA,EAAU,WACN,MAAM;AACJ,UAAA,QAAA,GAAW,IAAI,CAAA;AAAA,SAEjB,GAAA;AAAA,OACN;AAAA,MACA;AAAA,KACF;AAAA;AAGF,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAc,aAAA,CAAA,CAAC,OAAY,KAAA,CAAC,OAAO,CAAA;AACnC,IAAA,QAAA,GAAW,IAAI,CAAA;AAAA,GACjB;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,OAAS,EAAA;AAAA,MACP,EAAA,EAAI,QAAQ,CAAC,CAAA,KAAO,EAAE,IAAS,KAAA,QAAA,GAAW,mBAAmB,MAAU,CAAA;AAAA,MACvE,QAAU,EAAA,OAAA;AAAA,QAAQ,CAAC,CAAA,KACjB,CAAE,CAAA,IAAA,KAAS,QACT,mBAAA,GAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,gBAAA;AAAA,YACA,MAAQ,EAAA,eAAA;AAAA,YACR;AAAA;AAAA,SAEA,GAAA;AAAA;AACN;AACF,GACF;AAEA,EAAO,OAAA;AAAA,IACL,aAAe,EAAA;AAAA,MACb,GAAK,EAAA,OAAA;AAAA,MACL,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,QACE,kBAAA,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA,YAAA;AAAA,QACP,YAAA,EAAc,CAAC,gBAAA,EAAkB,UAAU,CAAA;AAAA,QAE1C;AAAA;AAAA;AACH,GAEJ;AACF;;;;"}

package/dist/js/components/src/components/List/components/ListItemView/ListItemView.mjs CHANGED Viewed

@@ -19,12 +19,13 @@ import '../../../Icon/Icon.mjs';
 import '../../../Heading/Heading.mjs';
 import '../../../Text/Text.mjs';
 import 'react-aria';
+import '../../../ColumnLayout/ColumnLayout.mjs';
 import '../ListSummary/ListSummary.mjs';
 import { useList } from '../../hooks/useList.mjs';
 import '../../List.mjs';
 const ListItemView = (props) => {
-  const { children } = props;
+  const { children, s, m, l } = props;
   const list = useList();
   const propsContext = {
     ContextMenu: {
@@ -66,6 +67,9 @@ const ListItemView = (props) => {
       subTitle: /* @__PURE__ */ jsx(TunnelExit, { id: "text" }),
       bottom: /* @__PURE__ */ jsx(TunnelExit, { id: "bottom" }),
       checkbox: /* @__PURE__ */ jsx(TunnelExit, { id: "checkbox" }),
+      s,
+      m,
+      l,
       children
     }
   ) }) });

package/dist/js/components/src/components/List/components/ListItemView/ListItemView.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemView.mjs","sources":["../../../../../../../../src/components/List/components/ListItemView/ListItemView.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./ListItemView.module.scss\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport ListItemViewContentView from \"@/views/ListItemViewContentView\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { OptionsButton } from \"@/components/List/components/Items/components/Item/components/OptionsButton\";\nimport { useList } from \"@/components/List\";\n\nexport type ListItemViewProps = PropsWithChildren;\n\nexport const ListItemView = (props: ListItemViewProps) => {\n const { children } = props;\n const list = useList();\n\n const propsContext: PropsContext = {\n ContextMenu: {\n tunnelId: \"button\",\n wrapWith: <OptionsButton className={styles.action} />,\n },\n Button: {\n tunnelId: \"button\",\n },\n ActionGroup: {\n tunnelId: \"button\",\n Button: {\n tunnelId: null,\n },\n },\n Avatar: {\n tunnelId: \"avatar\",\n },\n Heading: {\n tunnelId: \"title\",\n },\n Text: {\n tunnelId: \"text\",\n },\n Content: {\n tunnelId: dynamic((p) => (p.slot === \"bottom\" ? \"bottom\" : undefined)),\n },\n Checkbox: {\n tunnelId: \"checkbox\",\n },\n };\n\n return (\n <PropsContextProvider props={propsContext} mergeInParentContext>\n <TunnelProvider>\n <ListItemViewContentView\n viewMode={list.viewMode}\n title={<TunnelExit id=\"title\" />}\n avatar={<TunnelExit id=\"avatar\" />}\n button={<TunnelExit id=\"button\" />}\n subTitle={<TunnelExit id=\"text\" />}\n bottom={<TunnelExit id=\"bottom\" />}\n checkbox={<TunnelExit id=\"checkbox\" />}\n >\n {children}\n </ListItemViewContentView>\n </TunnelProvider>\n </PropsContextProvider>\n );\n};\n\nexport default ListItemView;\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;AAea~~,MAAA,YAAA,GAAe,CAAC,KAA6B,KAAA;AACxD,~~EAAM~~,~~MAAA~~,EAAE,~~UAAa~~,GAAA,KAAA;~~AACrB~~,EAAA,MAAM,OAAO,OAAQ,EAAA;AAErB,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,WAAa,EAAA;AAAA,MACX,QAAU,EAAA,QAAA;AAAA,MACV,QAAU,kBAAA,GAAA,CAAC,aAAc,EAAA,EAAA,SAAA,EAAW,OAAO,MAAQ,EAAA;AAAA,KACrD;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,WAAa,EAAA;AAAA,MACX,QAAU,EAAA,QAAA;AAAA,MACV,MAAQ,EAAA;AAAA,QACN,QAAU,EAAA;AAAA;AACZ,KACF;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,OAAS,EAAA;AAAA,MACP,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,OAAS,EAAA;AAAA,MACP,QAAA,EAAU,QAAQ,CAAC,CAAA,KAAO,EAAE,IAAS,KAAA,QAAA,GAAW,WAAW,MAAU;AAAA,KACvE;AAAA,IACA,QAAU,EAAA;AAAA,MACR,QAAU,EAAA;AAAA;AACZ,GACF;AAEA,EAAA,2BACG,oBAAqB,EAAA,EAAA,KAAA,EAAO,cAAc,oBAAoB,EAAA,IAAA,EAC7D,8BAAC,cACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,UAAU,IAAK,CAAA,QAAA;AAAA,MACf,KAAO,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,OAAQ,EAAA,CAAA;AAAA,MAC9B,MAAQ,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,QAAS,EAAA,CAAA;AAAA,MAChC,MAAQ,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,QAAS,EAAA,CAAA;AAAA,MAChC,QAAU,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,MAAO,EAAA,CAAA;AAAA,MAChC,MAAQ,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,QAAS,EAAA,CAAA;AAAA,MAChC,QAAU,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,UAAW,EAAA,CAAA;AAAA,~~MAEnC~~;AAAA;AAAA,KAEL,CACF,EAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"ListItemView.mjs","sources":["../../../../../../../../src/components/List/components/ListItemView/ListItemView.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./ListItemView.module.scss\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport ListItemViewContentView from \"@/views/ListItemViewContentView\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { OptionsButton } from \"@/components/List/components/Items/components/Item/components/OptionsButton\";\nimport { useList } from \"@/components/List\";\nimport type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\n\nexport type ListItemViewProps = PropsWithChildren &\n Pick<ColumnLayoutProps, \"s\" \| \"m\" \| \"l\">;\n\nexport const ListItemView = (props: ListItemViewProps) => {\n const { children, s, m, l } = props;\n const list = useList();\n\n const propsContext: PropsContext = {\n ContextMenu: {\n tunnelId: \"button\",\n wrapWith: <OptionsButton className={styles.action} />,\n },\n Button: {\n tunnelId: \"button\",\n },\n ActionGroup: {\n tunnelId: \"button\",\n Button: {\n tunnelId: null,\n },\n },\n Avatar: {\n tunnelId: \"avatar\",\n },\n Heading: {\n tunnelId: \"title\",\n },\n Text: {\n tunnelId: \"text\",\n },\n Content: {\n tunnelId: dynamic((p) => (p.slot === \"bottom\" ? \"bottom\" : undefined)),\n },\n Checkbox: {\n tunnelId: \"checkbox\",\n },\n };\n\n return (\n <PropsContextProvider props={propsContext} mergeInParentContext>\n <TunnelProvider>\n <ListItemViewContentView\n viewMode={list.viewMode}\n title={<TunnelExit id=\"title\" />}\n avatar={<TunnelExit id=\"avatar\" />}\n button={<TunnelExit id=\"button\" />}\n subTitle={<TunnelExit id=\"text\" />}\n bottom={<TunnelExit id=\"bottom\" />}\n checkbox={<TunnelExit id=\"checkbox\" />}\n s={s}\n m={m}\n l={l}\n >\n {children}\n </ListItemViewContentView>\n </TunnelProvider>\n </PropsContextProvider>\n );\n};\n\nexport default ListItemView;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiBa,MAAA,YAAA,GAAe,CAAC,KAA6B,KAAA;AACxD,EAAA,MAAM,EAAE,QAAA,EAAU,CAAG,EAAA,CAAA,EAAG,GAAM,GAAA,KAAA;AAC9B,EAAA,MAAM,OAAO,OAAQ,EAAA;AAErB,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,WAAa,EAAA;AAAA,MACX,QAAU,EAAA,QAAA;AAAA,MACV,QAAU,kBAAA,GAAA,CAAC,aAAc,EAAA,EAAA,SAAA,EAAW,OAAO,MAAQ,EAAA;AAAA,KACrD;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,WAAa,EAAA;AAAA,MACX,QAAU,EAAA,QAAA;AAAA,MACV,MAAQ,EAAA;AAAA,QACN,QAAU,EAAA;AAAA;AACZ,KACF;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,OAAS,EAAA;AAAA,MACP,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,OAAS,EAAA;AAAA,MACP,QAAA,EAAU,QAAQ,CAAC,CAAA,KAAO,EAAE,IAAS,KAAA,QAAA,GAAW,WAAW,MAAU;AAAA,KACvE;AAAA,IACA,QAAU,EAAA;AAAA,MACR,QAAU,EAAA;AAAA;AACZ,GACF;AAEA,EAAA,2BACG,oBAAqB,EAAA,EAAA,KAAA,EAAO,cAAc,oBAAoB,EAAA,IAAA,EAC7D,8BAAC,cACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,UAAU,IAAK,CAAA,QAAA;AAAA,MACf,KAAO,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,OAAQ,EAAA,CAAA;AAAA,MAC9B,MAAQ,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,QAAS,EAAA,CAAA;AAAA,MAChC,MAAQ,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,QAAS,EAAA,CAAA;AAAA,MAChC,QAAU,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,MAAO,EAAA,CAAA;AAAA,MAChC,MAAQ,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,QAAS,EAAA,CAAA;AAAA,MAChC,QAAU,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,UAAW,EAAA,CAAA;AAAA,MACpC,CAAA;AAAA,MACA,CAAA;AAAA,MACA,CAAA;AAAA,MAEC;AAAA;AAAA,KAEL,CACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/List/components/ListItemView/ListItemView.module.scss.mjs CHANGED Viewed

@@ -11,6 +11,7 @@ const subTitle = "flow--list--list-item-view--sub-title";
 const text = "flow--list--list-item-view--text";
 const badge = "flow--list--list-item-view--badge";
 const listView = "flow--list--list-item-view--list-view";
+const columnLayout = "flow--list--list-item-view--column-layout";
 const contentWrapper = "flow--list--list-item-view--content-wrapper";
 const title = "flow--list--list-item-view--title";
 const action = "flow--list--list-item-view--action";
@@ -29,6 +30,7 @@ const styles = {
 	text: text,
 	badge: badge,
 	listView: listView,
+	columnLayout: columnLayout,
 	contentWrapper: contentWrapper,
 	title: title,
 	action: action,
@@ -37,5 +39,5 @@ const styles = {
 	avatarContainer: avatarContainer
 };
-export { action, avatar, avatarContainer, badge, bottomContent, checkboxContainer, content, contentWrapper, styles as default, header, heading, listView, subTitle, text, tileView, title, topContent, view };
+export { action, avatar, avatarContainer, badge, bottomContent, checkboxContainer, columnLayout, content, contentWrapper, styles as default, header, heading, listView, subTitle, text, tileView, title, topContent, view };
 //# sourceMappingURL=ListItemView.module.scss.mjs.map

package/dist/js/components/src/components/List/components/ListItemView/ListItemView.module.scss.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemView.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"ListItemView.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/js/components/src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.mjs CHANGED Viewed

@@ -8,6 +8,7 @@ import '../../../../../../lib/viewComponentContext/viewComponentContext.mjs';
 import { dynamic } from '../../../../../../lib/propsContext/dynamicProps/dynamic.mjs';
 import { PropsContextProvider } from '../../../../../../lib/propsContext/PropsContextProvider.mjs';
 import clsx from 'clsx';
+import { ColumnLayout } from '../../../../../ColumnLayout/ColumnLayout.mjs';
 const getStyleForContentSlot = (slot) => slot === "top" ? styles.topContent : slot === "bottom" ? styles.bottomContent : styles.topContent;
 const ListItemViewContent = (props) => {
@@ -19,7 +20,10 @@ const ListItemViewContent = (props) => {
     button,
     bottom,
     checkbox,
-    viewMode
+    viewMode,
+    s,
+    m,
+    l
   } = props;
   const contentProps = {
     bottom: {
@@ -68,19 +72,33 @@ const ListItemViewContent = (props) => {
     styles.view,
     viewMode === "tiles" ? styles.tileView : styles.listView
   );
+  const header = /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.checkboxContainer, children: checkbox }),
+    avatar,
+    /* @__PURE__ */ jsxs("div", { className: styles.title, children: [
+      title,
+      /* @__PURE__ */ jsx("div", { className: styles.subTitle, children: subTitle })
+    ] })
+  ] });
   return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, mergeInParentContext: true, children: /* @__PURE__ */ jsxs("div", { className, children: [
     viewMode === "list" && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("div", { className: styles.contentWrapper, children: [
-        /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
-          children,
-          /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
-            /* @__PURE__ */ jsx("div", { className: styles.checkboxContainer, children: checkbox }),
-            avatar,
-            /* @__PURE__ */ jsxs("div", { className: styles.title, children: [
-              title,
-              /* @__PURE__ */ jsx("div", { className: styles.subTitle, children: subTitle })
-            ] })
-          ] })
+        s || m || l ? /* @__PURE__ */ jsxs(
+          ColumnLayout,
+          {
+            s,
+            m,
+            l,
+            className: clsx(styles.content, styles.columnLayout),
+            mergeInParentContext: true,
+            children: [
+              header,
+              children
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
+          header,
+          children
         ] }),
         button
       ] }),

package/dist/js/components/src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemViewContent.mjs","sources":["../../../../../../../../../../src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\nimport React from \"react\";\nimport styles from \"../../ListItemView.module.scss\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { ListViewMode } from \"@/components/List/model/types\";\nimport clsx from \"clsx\";\n\nexport type ListItemViewContentProps = PropsWithChildren & {\n title?: ReactNode;\n subTitle?: ReactNode;\n avatar?: ReactNode;\n button?: ReactNode;\n bottom?: ReactNode;\n checkbox?: ReactNode;\n viewMode?: ListViewMode;\n};\n\nconst getStyleForContentSlot = (slot?: string) =>\n slot === \"top\"\n ? styles.topContent\n : slot === \"bottom\"\n ? styles.bottomContent\n : styles.topContent;\n\n/** @flr-generate all */\nexport const ListItemViewContent = (props: ListItemViewContentProps) => {\n const {\n children,\n avatar,\n title,\n subTitle,\n button,\n bottom,\n checkbox,\n viewMode,\n } = props;\n\n const contentProps: Record<string, ComponentProps<\"div\">> = {\n bottom: {\n onMouseDown: (e) => e.stopPropagation(),\n onPointerDown: (e) => e.stopPropagation(),\n className: styles.bottomContent,\n },\n top: {\n className: styles.topContent,\n },\n };\n\n const propsContext: PropsContext = {\n ContextMenu: {\n placement: \"bottom end\",\n },\n Button: {\n className: styles.action,\n },\n ActionGroup: {\n className: styles.action,\n },\n Content: {\n className: dynamic((p) => getStyleForContentSlot(p.slot)),\n onMouseDown: dynamic((p) => contentProps[p.slot ?? \"top\"]?.onMouseDown),\n onPointerDown: dynamic(\n (p) => contentProps[p.slot ?? \"top\"]?.onPointerDown,\n ),\n },\n Avatar: {\n className: styles.avatar,\n },\n Heading: {\n className: styles.heading,\n level: 5,\n Badge: { className: styles.badge },\n AlertBadge: { className: styles.badge },\n },\n Text: {\n className: styles.text,\n },\n Link: {\n unstyled: true,\n },\n };\n\n const className = clsx(\n styles.view,\n viewMode === \"tiles\" ? styles.tileView : styles.listView,\n );\n\n return (\n <PropsContextProvider props={propsContext} mergeInParentContext>\n <div className={className}>\n {viewMode === \"list\" && (\n <>\n <div className={styles.contentWrapper}>\n <~~div className~~={~~styles.content~~}>\n {~~children~~}\n ~~<div className~~={~~styles.header~~}>\n ~~<div~~ className={styles.~~checkboxContainer~~}~~>{checkbox}</div~~>\n {~~avatar~~}\n ~~<div className=~~{~~styles.title~~}>\n ~~{title}~~\n <div className={styles.~~subTitle~~}>{~~subTitle~~}~~</div>\~~n ~~</div>\~~n </div>\n ~~</div>\~~n {button}\n </div>\n {bottom}\n </>\n )}\n\n {viewMode === \"tiles\" && (\n <>\n <div className={styles.avatarContainer}>{avatar}</div>\n <div className={styles.content}>\n <div className={styles.header}>\n <div className={styles.checkboxContainer}>{checkbox}</div>\n <div className={styles.title}>\n {title}\n <div className={styles.subTitle}>{subTitle}</div>\n </div>\n </div>\n {button}\n {children}\n {bottom}\n </div>\n </>\n )}\n </div>\n </PropsContextProvider>\n );\n};\n\nexport default ListItemViewContent;\n"],"names":[],"mappings":"~~;;;;;;;;;AAqBA~~,MAAM,sBAAA,GAAyB,CAAC,IAAA,KAC9B,IAAS,KAAA,KAAA,GACL,MAAO,CAAA,UAAA,GACP,IAAS,KAAA,QAAA,GACP,MAAO,CAAA,aAAA,GACP,MAAO,CAAA,UAAA;AAGF,MAAA,mBAAA,GAAsB,CAAC,KAAoC,KAAA;AACtE,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AAEJ,EAAA,MAAM,YAAsD,GAAA;AAAA,IAC1D,MAAQ,EAAA;AAAA,MACN,WAAa,EAAA,CAAC,CAAM,KAAA,CAAA,CAAE,eAAgB,EAAA;AAAA,MACtC,aAAe,EAAA,CAAC,CAAM,KAAA,CAAA,CAAE,eAAgB,EAAA;AAAA,MACxC,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,GAAK,EAAA;AAAA,MACH,WAAW,MAAO,CAAA;AAAA;AACpB,GACF;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,WAAa,EAAA;AAAA,MACX,SAAW,EAAA;AAAA,KACb;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,WAAa,EAAA;AAAA,MACX,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,OAAS,EAAA;AAAA,MACP,WAAW,OAAQ,CAAA,CAAC,MAAM,sBAAuB,CAAA,CAAA,CAAE,IAAI,CAAC,CAAA;AAAA,MACxD,WAAA,EAAa,QAAQ,CAAC,CAAA,KAAM,aAAa,CAAE,CAAA,IAAA,IAAQ,KAAK,CAAA,EAAG,WAAW,CAAA;AAAA,MACtE,aAAe,EAAA,OAAA;AAAA,QACb,CAAC,CAAM,KAAA,YAAA,CAAa,CAAE,CAAA,IAAA,IAAQ,KAAK,CAAG,EAAA;AAAA;AACxC,KACF;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,OAAS,EAAA;AAAA,MACP,WAAW,MAAO,CAAA,OAAA;AAAA,MAClB,KAAO,EAAA,CAAA;AAAA,MACP,KAAO,EAAA,EAAE,SAAW,EAAA,MAAA,CAAO,KAAM,EAAA;AAAA,MACjC,UAAY,EAAA,EAAE,SAAW,EAAA,MAAA,CAAO,KAAM;AAAA,KACxC;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,QAAU,EAAA;AAAA;AACZ,GACF;AAEA,EAAA,MAAM,SAAY,GAAA,IAAA;AAAA,IAChB,MAAO,CAAA,IAAA;AAAA,IACP,QAAa,KAAA,OAAA,GAAU,MAAO,CAAA,QAAA,GAAW,MAAO,CAAA;AAAA,GAClD;AAEA,~~EACE~~,~~uBAAA~~,~~GAAA~~,CAAC,~~wBAAqB~~,~~KAAO~~,EAAA,~~YAAA~~,~~EAAc~~,~~sBAAoB~~,~~IAC7D~~,EAAA,QAAA,~~kBAAA~~,~~IAAA~~,CAAC,~~SAAI~~,~~SACF~~,EAAA,~~QAAA~~,~~EAAA;AAAA~~,~~IAAA~~,~~QAAA~~,~~KAAa~~,~~0BAEV~~,~~IAAA~~,~~CAAA~~,QAAA,EAAA,~~EAAA~~,~~QAAA~~,~~EAAA~~;AAAA,~~sBAAC~~,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,~~cACrB~~,EAAA,QAAA,EAAA;AAAA,~~wBAAC~~,~~IAAA~~,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,~~OACpB~~,EAAA,QAAA,EAAA;AAAA,~~UAAA~~,~~QAAA~~;AAAA,~~0BACA~~,~~IAAA~~,CAAA,~~KAAA~~,EAAA,~~EAAI~~,~~SAAW~~,EAAA,~~MAAA~~,~~CAAO~~,~~MACrB~~,EAAA,QAAA,EAAA;AAAA,~~4BAAA~~,~~GAAA~~,~~CAAC~~,~~KAAI~~,EAAA,EAAA,~~SAAA~~,~~EAAW~~,~~MAAO~~,CAAA,~~iBAAA~~,~~EAAoB~~,~~QAAS~~,EAAA,QAAA,EAAA,CAAA;AAAA,~~YACnD~~,~~MAAA~~;AAAA,~~4BACA~~,~~IAAA~~,CAAA,~~KAAA~~,~~EAAA~~,~~EAAI~~,SAAW,EAAA,~~MAAA~~,~~CAAO~~,~~KACpB~~,EAAA,QAAA,EAAA;AAAA,cAAA,~~KAAA~~;AAAA,~~8BACA~~,~~GAAA~~,~~CAAA~~,~~KAAA~~,~~EAAA~~,~~EAAI~~,~~SAAW~~,EAAA,~~MAAA~~,~~CAAO~~,~~UAAW~~,~~QAAS~~,EAAA,QAAA,EAAA;AAAA,~~aAC7C~~,~~EAAA~~;AAAA,~~WACF,EAAA~~;AAAA,~~SACF~~,EAAA,CAAA;AAAA,~~QACC~~;AAAA,OACH,EAAA,CAAA;AAAA,MACC;AAAA,KACH,EAAA,CAAA;AAAA,IAGD,QAAA,KAAa,2BAEV,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,eAAA,EAAkB,QAAO,EAAA,MAAA,EAAA,CAAA;AAAA,sBAC/C,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,OACrB,EAAA,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,MACrB,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,iBAAA,EAAoB,QAAS,EAAA,QAAA,EAAA,CAAA;AAAA,0BACnD,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,KACpB,EAAA,QAAA,EAAA;AAAA,YAAA,KAAA;AAAA,4BACA,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,UAAW,QAAS,EAAA,QAAA,EAAA;AAAA,WAC7C,EAAA;AAAA,SACF,EAAA,CAAA;AAAA,QACC,MAAA;AAAA,QACA,QAAA;AAAA,QACA;AAAA,OACH,EAAA;AAAA,KACF,EAAA;AAAA,GAAA,EAEJ,CACF,EAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"ListItemViewContent.mjs","sources":["../../../../../../../../../../src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\nimport React from \"react\";\nimport styles from \"../../ListItemView.module.scss\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { ListViewMode } from \"@/components/List/model/types\";\nimport clsx from \"clsx\";\nimport {\n ColumnLayout,\n type ColumnLayoutProps,\n} from \"@/components/ColumnLayout\";\n\nexport type ListItemViewContentProps = PropsWithChildren &\n Pick<ColumnLayoutProps, \"s\" \| \"m\" \| \"l\"> & {\n title?: ReactNode;\n subTitle?: ReactNode;\n avatar?: ReactNode;\n button?: ReactNode;\n bottom?: ReactNode;\n checkbox?: ReactNode;\n viewMode?: ListViewMode;\n };\n\nconst getStyleForContentSlot = (slot?: string) =>\n slot === \"top\"\n ? styles.topContent\n : slot === \"bottom\"\n ? styles.bottomContent\n : styles.topContent;\n\n/** @flr-generate all */\nexport const ListItemViewContent = (props: ListItemViewContentProps) => {\n const {\n children,\n avatar,\n title,\n subTitle,\n button,\n bottom,\n checkbox,\n viewMode,\n s,\n m,\n l,\n } = props;\n\n const contentProps: Record<string, ComponentProps<\"div\">> = {\n bottom: {\n onMouseDown: (e) => e.stopPropagation(),\n onPointerDown: (e) => e.stopPropagation(),\n className: styles.bottomContent,\n },\n top: {\n className: styles.topContent,\n },\n };\n\n const propsContext: PropsContext = {\n ContextMenu: {\n placement: \"bottom end\",\n },\n Button: {\n className: styles.action,\n },\n ActionGroup: {\n className: styles.action,\n },\n Content: {\n className: dynamic((p) => getStyleForContentSlot(p.slot)),\n onMouseDown: dynamic((p) => contentProps[p.slot ?? \"top\"]?.onMouseDown),\n onPointerDown: dynamic(\n (p) => contentProps[p.slot ?? \"top\"]?.onPointerDown,\n ),\n },\n Avatar: {\n className: styles.avatar,\n },\n Heading: {\n className: styles.heading,\n level: 5,\n Badge: { className: styles.badge },\n AlertBadge: { className: styles.badge },\n },\n Text: {\n className: styles.text,\n },\n Link: {\n unstyled: true,\n },\n };\n\n const className = clsx(\n styles.view,\n viewMode === \"tiles\" ? styles.tileView : styles.listView,\n );\n\n const header = (\n <div className={styles.header}>\n <div className={styles.checkboxContainer}>{checkbox}</div>\n {avatar}\n <div className={styles.title}>\n {title}\n <div className={styles.subTitle}>{subTitle}</div>\n </div>\n </div>\n );\n\n return (\n <PropsContextProvider props={propsContext} mergeInParentContext>\n <div className={className}>\n {viewMode === \"list\" && (\n <>\n <div className={styles.contentWrapper}>\n {s \|\| m \|\| l ? (\n <ColumnLayout\n s={s}\n m={m}\n l={l}\n className={clsx(styles.content, styles.columnLayout)}\n mergeInParentContext\n >\n {header}\n {children}\n </ColumnLayout>\n ) : (\n <div className={styles.content}>\n {header}\n {children}\n </div>\n )}\n {button}\n </div>\n {bottom}\n </>\n )}\n\n {viewMode === \"tiles\" && (\n <>\n <div className={styles.avatarContainer}>{avatar}</div>\n <div className={styles.content}>\n <div className={styles.header}>\n <div className={styles.checkboxContainer}>{checkbox}</div>\n <div className={styles.title}>\n {title}\n <div className={styles.subTitle}>{subTitle}</div>\n </div>\n </div>\n {button}\n {children}\n {bottom}\n </div>\n </>\n )}\n </div>\n </PropsContextProvider>\n );\n};\n\nexport default ListItemViewContent;\n"],"names":[],"mappings":";;;;;;;;;;AA0BA,MAAM,sBAAA,GAAyB,CAAC,IAAA,KAC9B,IAAS,KAAA,KAAA,GACL,MAAO,CAAA,UAAA,GACP,IAAS,KAAA,QAAA,GACP,MAAO,CAAA,aAAA,GACP,MAAO,CAAA,UAAA;AAGF,MAAA,mBAAA,GAAsB,CAAC,KAAoC,KAAA;AACtE,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AAEJ,EAAA,MAAM,YAAsD,GAAA;AAAA,IAC1D,MAAQ,EAAA;AAAA,MACN,WAAa,EAAA,CAAC,CAAM,KAAA,CAAA,CAAE,eAAgB,EAAA;AAAA,MACtC,aAAe,EAAA,CAAC,CAAM,KAAA,CAAA,CAAE,eAAgB,EAAA;AAAA,MACxC,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,GAAK,EAAA;AAAA,MACH,WAAW,MAAO,CAAA;AAAA;AACpB,GACF;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,WAAa,EAAA;AAAA,MACX,SAAW,EAAA;AAAA,KACb;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,WAAa,EAAA;AAAA,MACX,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,OAAS,EAAA;AAAA,MACP,WAAW,OAAQ,CAAA,CAAC,MAAM,sBAAuB,CAAA,CAAA,CAAE,IAAI,CAAC,CAAA;AAAA,MACxD,WAAA,EAAa,QAAQ,CAAC,CAAA,KAAM,aAAa,CAAE,CAAA,IAAA,IAAQ,KAAK,CAAA,EAAG,WAAW,CAAA;AAAA,MACtE,aAAe,EAAA,OAAA;AAAA,QACb,CAAC,CAAM,KAAA,YAAA,CAAa,CAAE,CAAA,IAAA,IAAQ,KAAK,CAAG,EAAA;AAAA;AACxC,KACF;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,OAAS,EAAA;AAAA,MACP,WAAW,MAAO,CAAA,OAAA;AAAA,MAClB,KAAO,EAAA,CAAA;AAAA,MACP,KAAO,EAAA,EAAE,SAAW,EAAA,MAAA,CAAO,KAAM,EAAA;AAAA,MACjC,UAAY,EAAA,EAAE,SAAW,EAAA,MAAA,CAAO,KAAM;AAAA,KACxC;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,QAAU,EAAA;AAAA;AACZ,GACF;AAEA,EAAA,MAAM,SAAY,GAAA,IAAA;AAAA,IAChB,MAAO,CAAA,IAAA;AAAA,IACP,QAAa,KAAA,OAAA,GAAU,MAAO,CAAA,QAAA,GAAW,MAAO,CAAA;AAAA,GAClD;AAEA,EAAA,MAAM,MACJ,mBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,OAAO,MACrB,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,iBAAA,EAAoB,QAAS,EAAA,QAAA,EAAA,CAAA;AAAA,IACnD,MAAA;AAAA,oBACA,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,KACpB,EAAA,QAAA,EAAA;AAAA,MAAA,KAAA;AAAA,sBACA,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,UAAW,QAAS,EAAA,QAAA,EAAA;AAAA,KAC7C,EAAA;AAAA,GACF,EAAA,CAAA;AAGF,EACE,uBAAA,GAAA,CAAC,wBAAqB,KAAO,EAAA,YAAA,EAAc,sBAAoB,IAC7D,EAAA,QAAA,kBAAA,IAAA,CAAC,SAAI,SACF,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA,KAAa,0BAEV,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,cACpB,EAAA,QAAA,EAAA;AAAA,QAAA,CAAA,IAAK,KAAK,CACT,mBAAA,IAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,CAAA;AAAA,YACA,CAAA;AAAA,YACA,CAAA;AAAA,YACA,SAAW,EAAA,IAAA,CAAK,MAAO,CAAA,OAAA,EAAS,OAAO,YAAY,CAAA;AAAA,YACnD,oBAAoB,EAAA,IAAA;AAAA,YAEnB,QAAA,EAAA;AAAA,cAAA,MAAA;AAAA,cACA;AAAA;AAAA;AAAA,SAGH,mBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,OAAO,OACpB,EAAA,QAAA,EAAA;AAAA,UAAA,MAAA;AAAA,UACA;AAAA,SACH,EAAA,CAAA;AAAA,QAED;AAAA,OACH,EAAA,CAAA;AAAA,MACC;AAAA,KACH,EAAA,CAAA;AAAA,IAGD,QAAA,KAAa,2BAEV,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,eAAA,EAAkB,QAAO,EAAA,MAAA,EAAA,CAAA;AAAA,sBAC/C,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,OACrB,EAAA,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,MACrB,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,iBAAA,EAAoB,QAAS,EAAA,QAAA,EAAA,CAAA;AAAA,0BACnD,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,KACpB,EAAA,QAAA,EAAA;AAAA,YAAA,KAAA;AAAA,4BACA,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,UAAW,QAAS,EAAA,QAAA,EAAA;AAAA,WAC7C,EAAA;AAAA,SACF,EAAA,CAAA;AAAA,QACC,MAAA;AAAA,QACA,QAAA;AAAA,QACA;AAAA,OACH,EAAA;AAAA,KACF,EAAA;AAAA,GAAA,EAEJ,CACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/List/components/Table/Table.mjs CHANGED Viewed

@@ -23,6 +23,7 @@ import '../../../ContextMenu/ContextMenu.mjs';
 import '../../../MenuItem/MenuItem.mjs';
 import '../../../ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.mjs';
 import '../../../ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs';
+import '../../../ColumnLayout/ColumnLayout.mjs';
 import '../ListSummary/ListSummary.mjs';
 import { useList } from '../../hooks/useList.mjs';
 import '../../List.mjs';

package/dist/js/components/src/components/List/components/Table/Table.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.mjs","sources":["../../../../../../../../src/components/List/components/Table/Table.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { useList } from \"@/components/List\";\nimport { TableLoadingView } from \"@/components/List/components/Table/components/TableLoadingView\";\nimport styles from \"./Table.module.css\";\nimport clsx from \"clsx\";\nimport ListEmptyViewView from \"@/views/ListEmptyViewView\";\nimport TableView from \"@/views/TableView\";\nimport TableHeaderView from \"@/views/TableHeaderView\";\nimport TableBodyView from \"@/views/TableBodyView\";\nimport TableRowView from \"@/views/TableRowView\";\nimport TableCellView from \"@/views/TableCellView\";\nimport TableColumnView from \"@/views/TableColumnView\";\n\nexport const Table: FC = () => {\n const list = useList();\n const table = list.table;\n const listIsEmpty = list.useIsEmpty();\n\n const isLoading = list.loader.useIsLoading();\n const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n\n if (!table) {\n return null;\n }\n\n if (isInitiallyLoading) {\n return <TableLoadingView {...table.componentProps} />;\n }\n\n if (listIsEmpty) {\n return <ListEmptyViewView />;\n }\n\n const rowAction = table.list.onAction;\n\n const tableClassName = clsx(\n styles.table,\n isLoading && styles.isLoading,\n table.componentProps.className,\n );\n\n return (\n <TableView\n {...list.componentProps}\n {...table.componentProps}\n className={tableClassName}\n >\n <TableHeaderView {...table.header.componentProps}>\n {table.header.columns.map((col, i) => (\n <TableColumnView key={i} {...col.componentProps} />\n ))}\n </TableHeaderView>\n <TableBodyView {...table.body.componentProps}>\n {list.items.entries.map((item) => (\n <TableRowView\n className={(props) =>\n clsx(\n styles.row,\n rowAction && styles.hasAction,\n table.body.row.componentProps.className,\n props.isSelected && styles.isSelected,\n )\n }\n key={item.id}\n id={item.id}\n onAction={rowAction ? () => rowAction(item.data) : undefined}\n {...table.body.row.componentProps}\n >\n {table.body.row?.cells.map((cell, i) => (\n <TableCellView key={i} {...cell.componentProps}>\n {cell.renderFn ? cell.renderFn(item.data, list) : undefined}\n </TableCellView>\n ))}\n </TableRowView>\n ))}\n </TableBodyView>\n </TableView>\n );\n};\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAcO,MAAM,QAAY,MAAM;AAC7B,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAA,MAAM,QAAQ,IAAK,CAAA,KAAA;AACnB,EAAM,MAAA,WAAA,GAAc,KAAK,UAAW,EAAA;AAEpC,EAAM,MAAA,SAAA,GAAY,IAAK,CAAA,MAAA,CAAO,YAAa,EAAA;AAC3C,EAAM,MAAA,kBAAA,GAAqB,IAAK,CAAA,MAAA,CAAO,qBAAsB,EAAA;AAE7D,EAAA,IAAI,CAAC,KAAO,EAAA;AACV,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,IAAI,kBAAoB,EAAA;AACtB,IAAA,uBAAQ,GAAA,CAAA,gBAAA,EAAA,EAAkB,GAAG,KAAA,CAAM,cAAgB,EAAA,CAAA;AAAA;AAGrD,EAAA,IAAI,WAAa,EAAA;AACf,IAAA,2BAAQ,iBAAkB,EAAA,EAAA,CAAA;AAAA;AAG5B,EAAM,MAAA,SAAA,GAAY,MAAM,IAAK,CAAA,QAAA;AAE7B,EAAA,MAAM,cAAiB,GAAA,IAAA;AAAA,IACrB,MAAO,CAAA,KAAA;AAAA,IACP,aAAa,MAAO,CAAA,SAAA;AAAA,IACpB,MAAM,cAAe,CAAA;AAAA,GACvB;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAK,CAAA,cAAA;AAAA,MACR,GAAG,KAAM,CAAA,cAAA;AAAA,MACV,SAAW,EAAA,cAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,mBAAiB,GAAG,KAAA,CAAM,OAAO,cAC/B,EAAA,QAAA,EAAA,KAAA,CAAM,OAAO,OAAQ,CAAA,GAAA,CAAI,CAAC,GAAK,EAAA,CAAA,yBAC7B,eAAyB,EAAA,EAAA,GAAG,IAAI,cAAX,EAAA,EAAA,CAA2B,CAClD,CACH,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,aAAe,EAAA,EAAA,GAAG,KAAM,CAAA,IAAA,CAAK,cAC3B,EAAA,QAAA,EAAA,IAAA,CAAK,KAAM,CAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,IACvB,qBAAA,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,CAAC,KACV,KAAA,IAAA;AAAA,cACE,MAAO,CAAA,GAAA;AAAA,cACP,aAAa,MAAO,CAAA,SAAA;AAAA,cACpB,KAAA,CAAM,IAAK,CAAA,GAAA,CAAI,cAAe,CAAA,SAAA;AAAA,cAC9B,KAAA,CAAM,cAAc,MAAO,CAAA;AAAA,aAC7B;AAAA,YAGF,IAAI,IAAK,CAAA,EAAA;AAAA,YACT,UAAU,SAAY,GAAA,MAAM,SAAU,CAAA,IAAA,CAAK,IAAI,CAAI,GAAA,MAAA;AAAA,YAClD,GAAG,KAAM,CAAA,IAAA,CAAK,GAAI,CAAA,cAAA;AAAA,YAElB,QAAA,EAAA,KAAA,CAAM,KAAK,GAAK,EAAA,KAAA,CAAM,IAAI,CAAC,IAAA,EAAM,CAChC,qBAAA,GAAA,CAAC,aAAuB,EAAA,EAAA,GAAG,KAAK,cAC7B,EAAA,QAAA,EAAA,IAAA,CAAK,QAAW,GAAA,IAAA,CAAK,QAAS,CAAA,IAAA,CAAK,MAAM,IAAI,CAAA,GAAI,MADhC,EAAA,EAAA,CAEpB,CACD;AAAA,WAAA;AAAA,UATI,IAAK,CAAA;AAAA,SAWb,CACH,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
1	+ {"version":3,"file":"Table.mjs","sources":["../../../../../../../../src/components/List/components/Table/Table.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { useList } from \"@/components/List\";\nimport { TableLoadingView } from \"@/components/List/components/Table/components/TableLoadingView\";\nimport styles from \"./Table.module.css\";\nimport clsx from \"clsx\";\nimport ListEmptyViewView from \"@/views/ListEmptyViewView\";\nimport TableView from \"@/views/TableView\";\nimport TableHeaderView from \"@/views/TableHeaderView\";\nimport TableBodyView from \"@/views/TableBodyView\";\nimport TableRowView from \"@/views/TableRowView\";\nimport TableCellView from \"@/views/TableCellView\";\nimport TableColumnView from \"@/views/TableColumnView\";\n\nexport const Table: FC = () => {\n const list = useList();\n const table = list.table;\n const listIsEmpty = list.useIsEmpty();\n\n const isLoading = list.loader.useIsLoading();\n const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n\n if (!table) {\n return null;\n }\n\n if (isInitiallyLoading) {\n return <TableLoadingView {...table.componentProps} />;\n }\n\n if (listIsEmpty) {\n return <ListEmptyViewView />;\n }\n\n const rowAction = table.list.onAction;\n\n const tableClassName = clsx(\n styles.table,\n isLoading && styles.isLoading,\n table.componentProps.className,\n );\n\n return (\n <TableView\n {...list.componentProps}\n {...table.componentProps}\n className={tableClassName}\n >\n <TableHeaderView {...table.header.componentProps}>\n {table.header.columns.map((col, i) => (\n <TableColumnView key={i} {...col.componentProps} />\n ))}\n </TableHeaderView>\n <TableBodyView {...table.body.componentProps}>\n {list.items.entries.map((item) => (\n <TableRowView\n className={(props) =>\n clsx(\n styles.row,\n rowAction && styles.hasAction,\n table.body.row.componentProps.className,\n props.isSelected && styles.isSelected,\n )\n }\n key={item.id}\n id={item.id}\n onAction={rowAction ? () => rowAction(item.data) : undefined}\n {...table.body.row.componentProps}\n >\n {table.body.row?.cells.map((cell, i) => (\n <TableCellView key={i} {...cell.componentProps}>\n {cell.renderFn ? cell.renderFn(item.data, list) : undefined}\n </TableCellView>\n ))}\n </TableRowView>\n ))}\n </TableBodyView>\n </TableView>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,QAAY,MAAM;AAC7B,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAA,MAAM,QAAQ,IAAK,CAAA,KAAA;AACnB,EAAM,MAAA,WAAA,GAAc,KAAK,UAAW,EAAA;AAEpC,EAAM,MAAA,SAAA,GAAY,IAAK,CAAA,MAAA,CAAO,YAAa,EAAA;AAC3C,EAAM,MAAA,kBAAA,GAAqB,IAAK,CAAA,MAAA,CAAO,qBAAsB,EAAA;AAE7D,EAAA,IAAI,CAAC,KAAO,EAAA;AACV,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,IAAI,kBAAoB,EAAA;AACtB,IAAA,uBAAQ,GAAA,CAAA,gBAAA,EAAA,EAAkB,GAAG,KAAA,CAAM,cAAgB,EAAA,CAAA;AAAA;AAGrD,EAAA,IAAI,WAAa,EAAA;AACf,IAAA,2BAAQ,iBAAkB,EAAA,EAAA,CAAA;AAAA;AAG5B,EAAM,MAAA,SAAA,GAAY,MAAM,IAAK,CAAA,QAAA;AAE7B,EAAA,MAAM,cAAiB,GAAA,IAAA;AAAA,IACrB,MAAO,CAAA,KAAA;AAAA,IACP,aAAa,MAAO,CAAA,SAAA;AAAA,IACpB,MAAM,cAAe,CAAA;AAAA,GACvB;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAK,CAAA,cAAA;AAAA,MACR,GAAG,KAAM,CAAA,cAAA;AAAA,MACV,SAAW,EAAA,cAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,mBAAiB,GAAG,KAAA,CAAM,OAAO,cAC/B,EAAA,QAAA,EAAA,KAAA,CAAM,OAAO,OAAQ,CAAA,GAAA,CAAI,CAAC,GAAK,EAAA,CAAA,yBAC7B,eAAyB,EAAA,EAAA,GAAG,IAAI,cAAX,EAAA,EAAA,CAA2B,CAClD,CACH,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,aAAe,EAAA,EAAA,GAAG,KAAM,CAAA,IAAA,CAAK,cAC3B,EAAA,QAAA,EAAA,IAAA,CAAK,KAAM,CAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,IACvB,qBAAA,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,CAAC,KACV,KAAA,IAAA;AAAA,cACE,MAAO,CAAA,GAAA;AAAA,cACP,aAAa,MAAO,CAAA,SAAA;AAAA,cACpB,KAAA,CAAM,IAAK,CAAA,GAAA,CAAI,cAAe,CAAA,SAAA;AAAA,cAC9B,KAAA,CAAM,cAAc,MAAO,CAAA;AAAA,aAC7B;AAAA,YAGF,IAAI,IAAK,CAAA,EAAA;AAAA,YACT,UAAU,SAAY,GAAA,MAAM,SAAU,CAAA,IAAA,CAAK,IAAI,CAAI,GAAA,MAAA;AAAA,YAClD,GAAG,KAAM,CAAA,IAAA,CAAK,GAAI,CAAA,cAAA;AAAA,YAElB,QAAA,EAAA,KAAA,CAAM,KAAK,GAAK,EAAA,KAAA,CAAM,IAAI,CAAC,IAAA,EAAM,CAChC,qBAAA,GAAA,CAAC,aAAuB,EAAA,EAAA,GAAG,KAAK,cAC7B,EAAA,QAAA,EAAA,IAAA,CAAK,QAAW,GAAA,IAAA,CAAK,QAAS,CAAA,IAAA,CAAK,MAAM,IAAI,CAAA,GAAI,MADhC,EAAA,EAAA,CAEpB,CACD;AAAA,WAAA;AAAA,UATI,IAAK,CAAA;AAAA,SAWb,CACH,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/js/components/src/views/ItemsGridListItemView.mjs CHANGED Viewed

@@ -24,6 +24,7 @@ import '../components/ContextMenu/ContextMenu.mjs';
 import '../components/MenuItem/MenuItem.mjs';
 import '../components/ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.mjs';
 import '../components/ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs';
+import '../components/ColumnLayout/ColumnLayout.mjs';
 import '../components/List/components/ListSummary/ListSummary.mjs';
 import '../components/List/listContext.mjs';
 import '../components/List/List.mjs';

package/dist/js/components/src/views/ItemsGridListItemView.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ItemsGridListItemView.mjs","sources":["../../../../../src/views/ItemsGridListItemView.tsx"],"sourcesContent":["/* prettier-ignore /\n/ This file is auto-generated with the remote-components-generator */\nimport React, { type FC, useContext } from \"react\";\nimport { GridListItem, type GridListItemProps } from \"@/components/List\";\nimport { viewComponentContext } from \"@/lib/viewComponentContext/viewComponentContext\";\n\nconst ItemsGridListItemView: FC<GridListItemProps> = (props) => {\n const View =\n useContext(viewComponentContext)[\"ItemsGridListItem\"] ?? GridListItem;\n return <View {...props} />;\n};\n\nexport default ItemsGridListItemView;\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAMM,MAAA,qBAAA,GAA+C,CAAC,KAAU,KAAA;AAC9D,EAAA,MAAM,IACJ,GAAA,UAAA,CAAW,oBAAoB,CAAA,CAAE,mBAAmB,CAAK,IAAA,YAAA;AAC3D,EAAO,uBAAA,GAAA,CAAC,IAAM,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA;AAC1B;;;;"}
1	+ {"version":3,"file":"ItemsGridListItemView.mjs","sources":["../../../../../src/views/ItemsGridListItemView.tsx"],"sourcesContent":["/* prettier-ignore /\n/ This file is auto-generated with the remote-components-generator */\nimport React, { type FC, useContext } from \"react\";\nimport { GridListItem, type GridListItemProps } from \"@/components/List\";\nimport { viewComponentContext } from \"@/lib/viewComponentContext/viewComponentContext\";\n\nconst ItemsGridListItemView: FC<GridListItemProps> = (props) => {\n const View =\n useContext(viewComponentContext)[\"ItemsGridListItem\"] ?? GridListItem;\n return <View {...props} />;\n};\n\nexport default ItemsGridListItemView;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMM,MAAA,qBAAA,GAA+C,CAAC,KAAU,KAAA;AAC9D,EAAA,MAAM,IACJ,GAAA,UAAA,CAAW,oBAAoB,CAAA,CAAE,mBAAmB,CAAK,IAAA,YAAA;AAC3D,EAAO,uBAAA,GAAA,CAAC,IAAM,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA;AAC1B;;;;"}

package/dist/js/components/src/views/ItemsGridListView.mjs CHANGED Viewed

@@ -22,6 +22,7 @@ import '../components/ContextMenu/ContextMenu.mjs';
 import '../components/MenuItem/MenuItem.mjs';
 import '../components/ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.mjs';
 import '../components/ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs';
+import '../components/ColumnLayout/ColumnLayout.mjs';
 import '../components/List/components/ListSummary/ListSummary.mjs';
 import '../components/Heading/Heading.mjs';
 import '../components/Text/Text.mjs';

package/dist/js/components/src/views/ItemsGridListView.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ItemsGridListView.mjs","sources":["../../../../../src/views/ItemsGridListView.tsx"],"sourcesContent":["/* prettier-ignore /\n/ This file is auto-generated with the remote-components-generator */\nimport React, { type FC, useContext } from \"react\";\nimport { GridList, type GridListProps } from \"@/components/List\";\nimport { viewComponentContext } from \"@/lib/viewComponentContext/viewComponentContext\";\n\nconst ItemsGridListView: FC<GridListProps> = (props) => {\n const View = useContext(viewComponentContext)[\"ItemsGridList\"] ?? GridList;\n return <View {...props} />;\n};\n\nexport default ItemsGridListView;\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAMM,MAAA,iBAAA,GAAuC,CAAC,KAAU,KAAA;AACtD,EAAA,MAAM,IAAO,GAAA,UAAA,CAAW,oBAAoB,CAAA,CAAE,eAAe,CAAK,IAAA,QAAA;AAClE,EAAO,uBAAA,GAAA,CAAC,IAAM,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA;AAC1B;;;;"}
1	+ {"version":3,"file":"ItemsGridListView.mjs","sources":["../../../../../src/views/ItemsGridListView.tsx"],"sourcesContent":["/* prettier-ignore /\n/ This file is auto-generated with the remote-components-generator */\nimport React, { type FC, useContext } from \"react\";\nimport { GridList, type GridListProps } from \"@/components/List\";\nimport { viewComponentContext } from \"@/lib/viewComponentContext/viewComponentContext\";\n\nconst ItemsGridListView: FC<GridListProps> = (props) => {\n const View = useContext(viewComponentContext)[\"ItemsGridList\"] ?? GridList;\n return <View {...props} />;\n};\n\nexport default ItemsGridListView;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMM,MAAA,iBAAA,GAAuC,CAAC,KAAU,KAAA;AACtD,EAAA,MAAM,IAAO,GAAA,UAAA,CAAW,oBAAoB,CAAA,CAAE,eAAe,CAAK,IAAA,QAAA;AAClE,EAAO,uBAAA,GAAA,CAAC,IAAM,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA;AAC1B;;;;"}

package/dist/js/components/src/views/ListEmptyViewView.mjs CHANGED Viewed

@@ -22,6 +22,7 @@ import '../components/ContextMenu/ContextMenu.mjs';
 import '../components/MenuItem/MenuItem.mjs';
 import '../components/ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.mjs';
 import '../components/ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs';
+import '../components/ColumnLayout/ColumnLayout.mjs';
 import '../components/List/components/ListSummary/ListSummary.mjs';
 import '../components/List/listContext.mjs';
 import '../components/List/List.mjs';

package/dist/js/components/src/views/ListEmptyViewView.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListEmptyViewView.mjs","sources":["../../../../../src/views/ListEmptyViewView.tsx"],"sourcesContent":["/* prettier-ignore /\n/ This file is auto-generated with the remote-components-generator */\nimport React, { type FC, useContext } from \"react\";\nimport { EmptyView, type EmptyViewProps } from \"@/components/List\";\nimport { viewComponentContext } from \"@/lib/viewComponentContext/viewComponentContext\";\n\nconst ListEmptyViewView: FC<EmptyViewProps> = (props) => {\n const View = useContext(viewComponentContext)[\"ListEmptyView\"] ?? EmptyView;\n return <View {...props} />;\n};\n\nexport default ListEmptyViewView;\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAMM,MAAA,iBAAA,GAAwC,CAAC,KAAU,KAAA;AACvD,EAAA,MAAM,IAAO,GAAA,UAAA,CAAW,oBAAoB,CAAA,CAAE,eAAe,CAAK,IAAA,SAAA;AAClE,EAAO,uBAAA,GAAA,CAAC,IAAM,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA;AAC1B;;;;"}
1	+ {"version":3,"file":"ListEmptyViewView.mjs","sources":["../../../../../src/views/ListEmptyViewView.tsx"],"sourcesContent":["/* prettier-ignore /\n/ This file is auto-generated with the remote-components-generator */\nimport React, { type FC, useContext } from \"react\";\nimport { EmptyView, type EmptyViewProps } from \"@/components/List\";\nimport { viewComponentContext } from \"@/lib/viewComponentContext/viewComponentContext\";\n\nconst ListEmptyViewView: FC<EmptyViewProps> = (props) => {\n const View = useContext(viewComponentContext)[\"ListEmptyView\"] ?? EmptyView;\n return <View {...props} />;\n};\n\nexport default ListEmptyViewView;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAMM,MAAA,iBAAA,GAAwC,CAAC,KAAU,KAAA;AACvD,EAAA,MAAM,IAAO,GAAA,UAAA,CAAW,oBAAoB,CAAA,CAAE,eAAe,CAAK,IAAA,SAAA;AAClE,EAAO,uBAAA,GAAA,CAAC,IAAM,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA;AAC1B;;;;"}

package/dist/types/components/ChartTooltip/components/TooltipContent.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/ChartTooltip/components/TooltipContent.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,QAAQ,MAAM,UAAU,CAAC;AAC1C,OAAO,KAAK,EACV,QAAQ,EACR,SAAS,EACV,MAAM,gDAAgD,CAAC;AACxD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAE7D,UAAU,mBACR,SAAQ,IAAI,CACR,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,EACjD,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,kBAAkB,CACpD,EACD,qBAAqB;CAAG;AAE5B,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,~~mDAkCxD~~,CAAC"}
1	+ {"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/ChartTooltip/components/TooltipContent.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,QAAQ,MAAM,UAAU,CAAC;AAC1C,OAAO,KAAK,EACV,QAAQ,EACR,SAAS,EACV,MAAM,gDAAgD,CAAC;AACxD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAE7D,UAAU,mBACR,SAAQ,IAAI,CACR,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,EACjD,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,kBAAkB,CACpD,EACD,qBAAqB;CAAG;AAE5B,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,mDAoCxD,CAAC"}

package/dist/types/components/ColumnLayout/ColumnLayout.d.ts CHANGED Viewed

@@ -4,11 +4,11 @@ import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
 type GapSize = "s" | "m" | "l" | "xl";
 export interface ColumnLayoutProps<T extends keyof HTMLElementTagNameMap = "div" | "ul"> extends PropsWithChildren, PropsWithElementType<T>, PropsWithClassName, FlowComponentProps<HTMLElementTagNameMap[T]> {
     /** Column layout for container size s. */
-    s?: number[];
+    s?: (number | null)[];
     /** Column layout for container size m. */
-    m?: number[];
+    m?: (number | null)[];
     /** Column layout for container size l. */
-    l?: number[];
+    l?: (number | null)[];
     /**
      * Size of the row and column gap between the content blocks inside the column
      * layout.

package/dist/types/components/ColumnLayout/ColumnLayout.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColumnLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnLayout/ColumnLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAE9C,KAAK,OAAO,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEtC,MAAM,WAAW,iBAAiB,CAChC,CAAC,SAAS,MAAM,qBAAqB,GAAG,KAAK,GAAG,IAAI,CACpD,SAAQ,iBAAiB,EACvB,oBAAoB,CAAC,CAAC,CAAC,EACvB,kBAAkB,EAClB,kBAAkB,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;IAC9C,0CAA0C;IAC1C,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC;~~IACb~~,0CAA0C;IAC1C,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC;~~IACb~~,0CAA0C;IAC1C,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC;~~IACb~~;;;;;OAKG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kFAAkF;IAClF,SAAS,CAAC,EAAE,OAAO,CAAC;~~CACrB~~;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,~~mHAkDvB~~,CAAC;AAEH,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"ColumnLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnLayout/ColumnLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAE9C,KAAK,OAAO,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEtC,MAAM,WAAW,iBAAiB,CAChC,CAAC,SAAS,MAAM,qBAAqB,GAAG,KAAK,GAAG,IAAI,CACpD,SAAQ,iBAAiB,EACvB,oBAAoB,CAAC,CAAC,CAAC,EACvB,kBAAkB,EAClB,kBAAkB,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;IAC9C,0CAA0C;IAC1C,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IACtB,0CAA0C;IAC1C,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IACtB,0CAA0C;IAC1C,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IACtB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kFAAkF;IAClF,SAAS,CAAC,EAAE,OAAO,CAAC;CAGrB;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,mHAwEvB,CAAC;AAEH,eAAe,YAAY,CAAC"}

package/dist/types/components/ColumnLayout/lib/getColumns.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-export declare const getColumns: (values: number[]) => string;
+export declare const getColumns: (values: (number | null)[]) => string;
 //# sourceMappingURL=getColumns.d.ts.map

package/dist/types/components/ColumnLayout/lib/getColumns.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"getColumns.d.ts","sourceRoot":"","sources":["../../../../../src/components/ColumnLayout/lib/getColumns.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,GAAI,QAAQ,MAAM,EAAE,KAAG,~~MAQ7C~~,CAAC"}
1	+ {"version":3,"file":"getColumns.d.ts","sourceRoot":"","sources":["../../../../../src/components/ColumnLayout/lib/getColumns.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,GAAI,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,KAAG,MAMtD,CAAC"}

package/dist/types/components/ColumnLayout/stories/Default.stories.d.ts CHANGED Viewed

@@ -8,4 +8,5 @@ export declare const CustomValueM: Story;
 export declare const AllCustomValues: Story;
 export declare const Gaps: Story;
 export declare const Nested: Story;
+export declare const HiddenColumns: Story;
 //# sourceMappingURL=Default.stories.d.ts.map

package/dist/types/components/ColumnLayout/stories/Default.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ColumnLayout/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,YAAY,MAAM,iBAAiB,CAAC;~~AAQ3C~~,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CA6BnC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAE3C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAmB7B,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAwDlB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAmBpB,CAAC"}
1	+ {"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ColumnLayout/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAW3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CA6BnC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAE3C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAmB7B,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAwDlB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAmBpB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC"}

package/dist/types/components/List/components/ListItemView/ListItemView.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
-export type ListItemViewProps = PropsWithChildren;
+import { ColumnLayoutProps } from '../../../ColumnLayout';
+export type ListItemViewProps = PropsWithChildren & Pick<ColumnLayoutProps, "s" | "m" | "l">;
 export declare const ListItemView: (props: ListItemViewProps) => import("react/jsx-runtime").JSX.Element;
 export default ListItemView;
 //# sourceMappingURL=ListItemView.d.ts.map