@mittwald/flow-react-components 0.2.0-alpha.782 → 0.2.0-alpha.784

package/dist/js/packages/components/src/components/List/components/Footer/Footer.mjs

@@ -1,21 +1,18 @@
 "use client"
 /* */
-import DivView from "../../../../views/DivView.mjs";
-import Footer_module_default from "./Footer.module.mjs";
-import PaginationInfos from "./components/PaginationInfos/PaginationInfos.mjs";
-import "./components/PaginationInfos/index.mjs";
-import ShowNextBatchButton from "./components/ShowNextBatchButton/ShowNextBatchButton.mjs";
-import "./components/ShowNextBatchButton/index.mjs";
-import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/List/components/Footer/Footer.tsx
-var Footer = () => {
-	return /* @__PURE__ */ jsxs(DivView, {
-		className: Footer_module_default.footer,
-		children: [/* @__PURE__ */ jsx(PaginationInfos, {}), /* @__PURE__ */ jsx(ShowNextBatchButton, {})]
-	});
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import styles from './Footer.module.scss.mjs';
+import { PaginationInfos } from './components/PaginationInfos/PaginationInfos.mjs';
+import { ShowNextBatchButton } from './components/ShowNextBatchButton/ShowNextBatchButton.mjs';
+import DivView from '../../../../views/DivView.mjs';
+
+const Footer = () => {
+  return /* @__PURE__ */ jsxs(DivView, { className: styles.footer, children: [
+    /* @__PURE__ */ jsx(PaginationInfos, {}),
+    /* @__PURE__ */ jsx(ShowNextBatchButton, {})
+  ] });
 };
-//#endregion
-export { Footer as default };
 
-//# sourceMappingURL=Footer.mjs.map
+export { Footer, Footer as default };
+//# sourceMappingURL=Footer.mjs.map

package/dist/js/packages/components/src/components/List/components/Footer/Footer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/Footer/Footer.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport styles from \"./Footer.module.scss\";\nimport { PaginationInfos } from \"@/components/List/components/Footer/components/PaginationInfos\";\nimport { ShowNextBatchButton } from \"@/components/List/components/Footer/components/ShowNextBatchButton\";\nimport DivView from \"@/views/DivView\";\n\nexport const Footer: FC = () => {\n  return (\n    <DivView className={styles.footer}>\n      <PaginationInfos />\n      <ShowNextBatchButton />\n    </DivView>\n  );\n};\n\nexport default Footer;\n"],"mappings":";;;;;;;;;AAOA,IAAa,eAAmB;AAC9B,QACE,qBAAC,SAAD;EAAS,WAAW,sBAAO;YAA3B,CACE,oBAAC,iBAAD,EAAmB,CAAA,EACnB,oBAAC,qBAAD,EAAuB,CAAA,CACf"}
+{"version":3,"file":"Footer.mjs","sources":["../../../../../../../../../src/components/List/components/Footer/Footer.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport styles from \"./Footer.module.scss\";\nimport { PaginationInfos } from \"@/components/List/components/Footer/components/PaginationInfos\";\nimport { ShowNextBatchButton } from \"@/components/List/components/Footer/components/ShowNextBatchButton\";\nimport DivView from \"@/views/DivView\";\n\nexport const Footer: FC = () => {\n  return (\n    <DivView className={styles.footer}>\n      <PaginationInfos />\n      <ShowNextBatchButton />\n    </DivView>\n  );\n};\n\nexport default Footer;\n"],"names":[],"mappings":";;;;;;;AAOO,MAAM,SAAa,MAAM;AAC9B,EAAA,uBACE,IAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAW,MAAA,CAAO,MAAA,EACzB,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,CAAA;AAAA,wBAChB,mBAAA,EAAA,EAAoB;AAAA,GAAA,EACvB,CAAA;AAEJ;;;;"}

package/dist/js/packages/components/src/components/List/components/Footer/Footer.module.scss.mjs

@@ -0,0 +1,9 @@
+"use client"
+/* */
+const footer = "flow--list--footer";
+const styles = {
+	footer: footer
+};
+
+export { styles as default, footer };
+//# sourceMappingURL=Footer.module.scss.mjs.map

package/dist/js/packages/components/src/components/List/components/Footer/Footer.module.scss.mjs.map

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

package/dist/js/packages/components/src/components/List/components/Footer/components/PaginationInfos/PaginationInfos.mjs

@@ -1,31 +1,29 @@
 "use client"
 /* */
-import __locale_default from "../../../../../../../../../_virtual/_14.locale.mjs";
-import { useList } from "../../../../hooks/useList.mjs";
-import TextView from "../../../../../../views/TextView.mjs";
-import SkeletonView from "../../../../../../views/SkeletonView.mjs";
-import { jsx } from "react/jsx-runtime";
-import { useLocalizedStringFormatter } from "react-aria";
-//#region src/components/List/components/Footer/components/PaginationInfos/PaginationInfos.tsx
-var PaginationInfos = (props) => {
-	const stringFormatter = useLocalizedStringFormatter(__locale_default);
-	const list = useList();
-	const pagination = list.batches;
-	const isInitiallyLoading = list.loader.useIsInitiallyLoading();
-	const isEmpty = list.useIsEmpty();
-	const totalItemsCount = pagination.getTotalItemsCount();
-	const visibleItemsCount = pagination.getVisibleItemsCount();
-	if (isEmpty) return null;
-	const text = isInitiallyLoading ? /* @__PURE__ */ jsx(SkeletonView, { width: "200px" }) : stringFormatter.format("list.paginationInfo", {
-		visibleItemsCount,
-		totalItemsCount
-	});
-	return /* @__PURE__ */ jsx(TextView, {
-		...props,
-		children: text
-	});
+import { jsx } from 'react/jsx-runtime';
+import { useList } from '../../../../hooks/useList.mjs';
+import SkeletonView from '../../../../../../views/SkeletonView.mjs';
+import TextView from '../../../../../../views/TextView.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+import locales from '../../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
+
+const PaginationInfos = (props) => {
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  const list = useList();
+  const pagination = list.batches;
+  const isInitiallyLoading = list.loader.useIsInitiallyLoading();
+  const isEmpty = list.useIsEmpty();
+  const totalItemsCount = pagination.getTotalItemsCount();
+  const visibleItemsCount = pagination.getVisibleItemsCount();
+  if (isEmpty) {
+    return null;
+  }
+  const text = isInitiallyLoading ? /* @__PURE__ */ jsx(SkeletonView, { width: "200px" }) : stringFormatter.format("list.paginationInfo", {
+    visibleItemsCount,
+    totalItemsCount
+  });
+  return /* @__PURE__ */ jsx(TextView, { ...props, children: text });
 };
-//#endregion
-export { PaginationInfos as default };
 
-//# sourceMappingURL=PaginationInfos.mjs.map
+export { PaginationInfos };
+//# sourceMappingURL=PaginationInfos.mjs.map

package/dist/js/packages/components/src/components/List/components/Footer/components/PaginationInfos/PaginationInfos.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationInfos.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Footer/components/PaginationInfos/PaginationInfos.tsx"],"sourcesContent":["import { useList } from \"@/components/List/hooks/useList\";\nimport type { TextProps } from \"@/components/Text\";\nimport SkeletonView from \"@/views/SkeletonView\";\nimport TextView from \"@/views/TextView\";\nimport type { FC } from \"react\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../../../locales/*.locale.json\";\n\nexport const PaginationInfos: FC<TextProps> = (props) => {\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const list = useList();\n  const pagination = list.batches;\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const isEmpty = list.useIsEmpty();\n\n  const totalItemsCount = pagination.getTotalItemsCount();\n  const visibleItemsCount = pagination.getVisibleItemsCount();\n\n  if (isEmpty) {\n    return null;\n  }\n\n  const text = isInitiallyLoading ? (\n    <SkeletonView width=\"200px\" />\n  ) : (\n    stringFormatter.format(\"list.paginationInfo\", {\n      visibleItemsCount,\n      totalItemsCount,\n    })\n  );\n\n  return <TextView {...props}>{text}</TextView>;\n};\n\nexport default PaginationInfos;\n"],"mappings":";;;;;;;AAQA,IAAa,mBAAkC,UAAU;CACvD,MAAM,kBAAkB,4BAA4B,iBAAQ;CAE5D,MAAM,OAAO,SAAS;CACtB,MAAM,aAAa,KAAK;CACxB,MAAM,qBAAqB,KAAK,OAAO,uBAAuB;CAC9D,MAAM,UAAU,KAAK,YAAY;CAEjC,MAAM,kBAAkB,WAAW,oBAAoB;CACvD,MAAM,oBAAoB,WAAW,sBAAsB;AAE3D,KAAI,QACF,QAAO;CAGT,MAAM,OAAO,qBACX,oBAAC,cAAD,EAAc,OAAM,SAAU,CAAA,GAE9B,gBAAgB,OAAO,uBAAuB;EAC5C;EACA;EACD,CAAC;AAGJ,QAAO,oBAAC,UAAD;EAAU,GAAI;YAAQ;EAAgB,CAAA"}
+{"version":3,"file":"PaginationInfos.mjs","sources":["../../../../../../../../../../../src/components/List/components/Footer/components/PaginationInfos/PaginationInfos.tsx"],"sourcesContent":["import { useList } from \"@/components/List/hooks/useList\";\nimport type { TextProps } from \"@/components/Text\";\nimport SkeletonView from \"@/views/SkeletonView\";\nimport TextView from \"@/views/TextView\";\nimport type { FC } from \"react\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../../../locales/*.locale.json\";\n\nexport const PaginationInfos: FC<TextProps> = (props) => {\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const list = useList();\n  const pagination = list.batches;\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const isEmpty = list.useIsEmpty();\n\n  const totalItemsCount = pagination.getTotalItemsCount();\n  const visibleItemsCount = pagination.getVisibleItemsCount();\n\n  if (isEmpty) {\n    return null;\n  }\n\n  const text = isInitiallyLoading ? (\n    <SkeletonView width=\"200px\" />\n  ) : (\n    stringFormatter.format(\"list.paginationInfo\", {\n      visibleItemsCount,\n      totalItemsCount,\n    })\n  );\n\n  return <TextView {...props}>{text}</TextView>;\n};\n\nexport default PaginationInfos;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,eAAA,GAAiC,CAAC,KAAA,KAAU;AACvD,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,aAAa,IAAA,CAAK,OAAA;AACxB,EAAA,MAAM,kBAAA,GAAqB,IAAA,CAAK,MAAA,CAAO,qBAAA,EAAsB;AAC7D,EAAA,MAAM,OAAA,GAAU,KAAK,UAAA,EAAW;AAEhC,EAAA,MAAM,eAAA,GAAkB,WAAW,kBAAA,EAAmB;AACtD,EAAA,MAAM,iBAAA,GAAoB,WAAW,oBAAA,EAAqB;AAE1D,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,IAAA,GAAO,qCACX,GAAA,CAAC,YAAA,EAAA,EAAa,OAAM,OAAA,EAAQ,CAAA,GAE5B,eAAA,CAAgB,MAAA,CAAO,qBAAA,EAAuB;AAAA,IAC5C,iBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAGH,EAAA,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAU,GAAG,KAAA,EAAQ,QAAA,EAAA,IAAA,EAAK,CAAA;AACpC;;;;"}

package/dist/js/packages/components/src/components/List/components/Footer/components/ShowNextBatchButton/ShowNextBatchButton.mjs

@@ -1,29 +1,35 @@
 "use client"
 /* */
-import __locale_default from "../../../../../../../../../_virtual/_14.locale.mjs";
-import ButtonView from "../../../../../../views/ButtonView.mjs";
-import { useList } from "../../../../hooks/useList.mjs";
-import "react";
-import { jsx } from "react/jsx-runtime";
-import { useLocalizedStringFormatter } from "react-aria";
-//#region src/components/List/components/Footer/components/ShowNextBatchButton/ShowNextBatchButton.tsx
-var ShowNextBatchButton = (props) => {
-	const stringFormatter = useLocalizedStringFormatter(__locale_default);
-	const list = useList();
-	const isLoading = list.loader.useIsLoading();
-	const isInitiallyLoading = list.loader.useIsInitiallyLoading();
-	if (!list.batches.hasNextBatch() && !isLoading) return null;
-	return /* @__PURE__ */ jsx(ButtonView, {
-		isPending: isLoading && !isInitiallyLoading,
-		isDisabled: isInitiallyLoading,
-		...props,
-		onPress: () => list.batches.nextBatch(),
-		variant: "plain",
-		size: "s",
-		children: stringFormatter.format("list.showMore")
-	});
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { useList } from '../../../../hooks/useList.mjs';
+import locales from '../../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+import ButtonView from '../../../../../../views/ButtonView.mjs';
+
+const ShowNextBatchButton = (props) => {
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  const list = useList();
+  const isLoading = list.loader.useIsLoading();
+  const isInitiallyLoading = list.loader.useIsInitiallyLoading();
+  const pagination = list.batches;
+  const canLoadMore = pagination.hasNextBatch();
+  if (!canLoadMore && !isLoading) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    ButtonView,
+    {
+      isPending: isLoading && !isInitiallyLoading,
+      isDisabled: isInitiallyLoading,
+      ...props,
+      onPress: () => list.batches.nextBatch(),
+      variant: "plain",
+      size: "s",
+      children: stringFormatter.format("list.showMore")
+    }
+  );
 };
-//#endregion
-export { ShowNextBatchButton as default };
 
-//# sourceMappingURL=ShowNextBatchButton.mjs.map
+export { ShowNextBatchButton };
+//# sourceMappingURL=ShowNextBatchButton.mjs.map

package/dist/js/packages/components/src/components/List/components/Footer/components/ShowNextBatchButton/ShowNextBatchButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ShowNextBatchButton.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Footer/components/ShowNextBatchButton/ShowNextBatchButton.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport type { ButtonProps } from \"@/components/Button\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport ButtonView from \"@/views/ButtonView\";\n\nexport const ShowNextBatchButton: FC<ButtonProps> = (props) => {\n  const stringFormatter = useLocalizedStringFormatter(locales);\n  const list = useList();\n  const isLoading = list.loader.useIsLoading();\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const pagination = list.batches;\n  const canLoadMore = pagination.hasNextBatch();\n\n  if (!canLoadMore && !isLoading) {\n    return null;\n  }\n\n  return (\n    <ButtonView\n      isPending={isLoading && !isInitiallyLoading}\n      isDisabled={isInitiallyLoading}\n      {...props}\n      onPress={() => list.batches.nextBatch()}\n      variant=\"plain\"\n      size=\"s\"\n    >\n      {stringFormatter.format(\"list.showMore\")}\n    </ButtonView>\n  );\n};\n\nexport default ShowNextBatchButton;\n"],"mappings":";;;;;;;AAQA,IAAa,uBAAwC,UAAU;CAC7D,MAAM,kBAAkB,4BAA4B,iBAAQ;CAC5D,MAAM,OAAO,SAAS;CACtB,MAAM,YAAY,KAAK,OAAO,cAAc;CAC5C,MAAM,qBAAqB,KAAK,OAAO,uBAAuB;AAI9D,KAAI,CAHe,KAAK,QACO,cAAc,IAEzB,CAAC,UACnB,QAAO;AAGT,QACE,oBAAC,YAAD;EACE,WAAW,aAAa,CAAC;EACzB,YAAY;EACZ,GAAI;EACJ,eAAe,KAAK,QAAQ,WAAW;EACvC,SAAQ;EACR,MAAK;YAEJ,gBAAgB,OAAO,gBAAgB;EAC7B,CAAA"}
+{"version":3,"file":"ShowNextBatchButton.mjs","sources":["../../../../../../../../../../../src/components/List/components/Footer/components/ShowNextBatchButton/ShowNextBatchButton.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport type { ButtonProps } from \"@/components/Button\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport ButtonView from \"@/views/ButtonView\";\n\nexport const ShowNextBatchButton: FC<ButtonProps> = (props) => {\n  const stringFormatter = useLocalizedStringFormatter(locales);\n  const list = useList();\n  const isLoading = list.loader.useIsLoading();\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const pagination = list.batches;\n  const canLoadMore = pagination.hasNextBatch();\n\n  if (!canLoadMore && !isLoading) {\n    return null;\n  }\n\n  return (\n    <ButtonView\n      isPending={isLoading && !isInitiallyLoading}\n      isDisabled={isInitiallyLoading}\n      {...props}\n      onPress={() => list.batches.nextBatch()}\n      variant=\"plain\"\n      size=\"s\"\n    >\n      {stringFormatter.format(\"list.showMore\")}\n    </ButtonView>\n  );\n};\n\nexport default ShowNextBatchButton;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,mBAAA,GAAuC,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAC3D,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,SAAA,GAAY,IAAA,CAAK,MAAA,CAAO,YAAA,EAAa;AAC3C,EAAA,MAAM,kBAAA,GAAqB,IAAA,CAAK,MAAA,CAAO,qBAAA,EAAsB;AAC7D,EAAA,MAAM,aAAa,IAAA,CAAK,OAAA;AACxB,EAAA,MAAM,WAAA,GAAc,WAAW,YAAA,EAAa;AAE5C,EAAA,IAAI,CAAC,WAAA,IAAe,CAAC,SAAA,EAAW;AAC9B,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,aAAa,CAAC,kBAAA;AAAA,MACzB,UAAA,EAAY,kBAAA;AAAA,MACX,GAAG,KAAA;AAAA,MACJ,OAAA,EAAS,MAAM,IAAA,CAAK,OAAA,CAAQ,SAAA,EAAU;AAAA,MACtC,OAAA,EAAQ,OAAA;AAAA,MACR,IAAA,EAAK,GAAA;AAAA,MAEJ,QAAA,EAAA,eAAA,CAAgB,OAAO,eAAe;AAAA;AAAA,GACzC;AAEJ;;;;"}

package/dist/js/packages/components/src/components/List/components/Header/Header.mjs

@@ -1,44 +1,49 @@
 "use client"
 /* */
-import DivView from "../../../../views/DivView.mjs";
-import { useList } from "../../hooks/useList.mjs";
-import Header_module_default from "./Header.module.mjs";
-import ActiveFilters from "./components/ActiveFilters/ActiveFilters.mjs";
-import "./components/ActiveFilters/index.mjs";
-import SearchField from "./components/SearchField/SearchField.mjs";
-import { useAvailableViewModes } from "./lib.mjs";
-import { ViewModeContextMenu } from "./components/ViewModeContextMenu/ViewModeContextMenu.mjs";
-import { SortingContextMenu } from "./components/SortingContextMenu/SortingContextMenu.mjs";
-import { FilterContextMenus } from "./components/FilterContextMenu/FilterContextMenus.mjs";
-import { AllFiltersModal } from "./components/AllFiltersModal/AllFiltersModal.mjs";
-import clsx from "clsx";
-import "react";
-import { TunnelExit } from "@mittwald/react-tunnel";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/List/components/Header/Header.tsx
-var Header = (props) => {
-	const { className } = props;
-	const list = useList();
-	const availableViewModes = useAvailableViewModes();
-	const hasOptions = list.filters.length > 0 || list.visibleSorting.length > 0 || list.search || availableViewModes.length > 1;
-	return /* @__PURE__ */ jsxs(DivView, {
-		className: clsx(className, Header_module_default.header, list.search && Header_module_default.withSearch),
-		children: [/* @__PURE__ */ jsxs(DivView, {
-			className: Header_module_default.headerContent,
-			children: [/* @__PURE__ */ jsx(TunnelExit, { id: "actions" }), hasOptions && /* @__PURE__ */ jsxs(DivView, {
-				className: Header_module_default.options,
-				children: [
-					/* @__PURE__ */ jsx(ViewModeContextMenu, {}),
-					/* @__PURE__ */ jsx(SortingContextMenu, {}),
-					/* @__PURE__ */ jsx(FilterContextMenus, {}),
-					/* @__PURE__ */ jsx(AllFiltersModal, {}),
-					list.search && /* @__PURE__ */ jsx(SearchField, { search: list.search })
-				]
-			})]
-		}), /* @__PURE__ */ jsx(ActiveFilters, {})]
-	});
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import headerStyles from './Header.module.css.mjs';
+import clsx from 'clsx';
+import { ActiveFilters } from './components/ActiveFilters/ActiveFilters.mjs';
+import { useList } from '../../hooks/useList.mjs';
+import { SearchField } from './components/SearchField/SearchField.mjs';
+import { ViewModeContextMenu } from './components/ViewModeContextMenu/ViewModeContextMenu.mjs';
+import { TunnelExit } from '@mittwald/react-tunnel';
+import DivView from '../../../../views/DivView.mjs';
+import { SortingContextMenu } from './components/SortingContextMenu/SortingContextMenu.mjs';
+import { FilterContextMenus } from './components/FilterContextMenu/FilterContextMenus.mjs';
+import { AllFiltersModal } from './components/AllFiltersModal/AllFiltersModal.mjs';
+import { useAvailableViewModes } from './lib.mjs';
+
+const Header = (props) => {
+  const { className } = props;
+  const list = useList();
+  const availableViewModes = useAvailableViewModes();
+  const hasOptions = list.filters.length > 0 || list.visibleSorting.length > 0 || list.search || availableViewModes.length > 1;
+  return /* @__PURE__ */ jsxs(
+    DivView,
+    {
+      className: clsx(
+        className,
+        headerStyles.header,
+        list.search && headerStyles.withSearch
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(DivView, { className: headerStyles.headerContent, children: [
+          /* @__PURE__ */ jsx(TunnelExit, { id: "actions" }),
+          hasOptions && /* @__PURE__ */ jsxs(DivView, { className: headerStyles.options, children: [
+            /* @__PURE__ */ jsx(ViewModeContextMenu, {}),
+            /* @__PURE__ */ jsx(SortingContextMenu, {}),
+            /* @__PURE__ */ jsx(FilterContextMenus, {}),
+            /* @__PURE__ */ jsx(AllFiltersModal, {}),
+            list.search && /* @__PURE__ */ jsx(SearchField, { search: list.search })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(ActiveFilters, {})
+      ]
+    }
+  );
 };
-//#endregion
-export { Header as default };
 
-//# sourceMappingURL=Header.mjs.map
+export { Header };
+//# sourceMappingURL=Header.mjs.map

package/dist/js/packages/components/src/components/List/components/Header/Header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/Header/Header.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport styles from \"./Header.module.css\";\nimport clsx from \"clsx\";\nimport { ActiveFilters } from \"@/components/List/components/Header/components/ActiveFilters\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { SearchField } from \"@/components/List/components/Header/components/SearchField/SearchField\";\nimport { ViewModeContextMenu } from \"@/components/List/components/Header/components/ViewModeContextMenu/ViewModeContextMenu\";\nimport { TunnelExit } from \"@mittwald/react-tunnel\";\nimport DivView from \"@/views/DivView\";\nimport { SortingContextMenu } from \"@/components/List/components/Header/components/SortingContextMenu/SortingContextMenu\";\nimport { FilterContextMenus } from \"@/components/List/components/Header/components/FilterContextMenu/FilterContextMenus\";\nimport { AllFiltersModal } from \"@/components/List/components/Header/components/AllFiltersModal/AllFiltersModal\";\nimport { useAvailableViewModes } from \"@/components/List/components/Header/lib\";\n\nexport const Header: FC<PropsWithClassName> = (props) => {\n  const { className } = props;\n  const list = useList();\n\n  const availableViewModes = useAvailableViewModes();\n\n  const hasOptions =\n    list.filters.length > 0 ||\n    list.visibleSorting.length > 0 ||\n    list.search ||\n    availableViewModes.length > 1;\n\n  return (\n    <DivView\n      className={clsx(\n        className,\n        styles.header,\n        list.search && styles.withSearch,\n      )}\n    >\n      <DivView className={styles.headerContent}>\n        <TunnelExit id=\"actions\" />\n        {hasOptions && (\n          <DivView className={styles.options}>\n            <ViewModeContextMenu />\n            <SortingContextMenu />\n            <FilterContextMenus />\n            <AllFiltersModal />\n\n            {list.search && <SearchField search={list.search} />}\n          </DivView>\n        )}\n      </DivView>\n      <ActiveFilters />\n    </DivView>\n  );\n};\n\nexport default Header;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,IAAa,UAAkC,UAAU;CACvD,MAAM,EAAE,cAAc;CACtB,MAAM,OAAO,SAAS;CAEtB,MAAM,qBAAqB,uBAAuB;CAElD,MAAM,aACJ,KAAK,QAAQ,SAAS,KACtB,KAAK,eAAe,SAAS,KAC7B,KAAK,UACL,mBAAmB,SAAS;AAE9B,QACE,qBAAC,SAAD;EACE,WAAW,KACT,WACA,sBAAO,QACP,KAAK,UAAU,sBAAO,WACvB;YALH,CAOE,qBAAC,SAAD;GAAS,WAAW,sBAAO;aAA3B,CACE,oBAAC,YAAD,EAAY,IAAG,WAAY,CAAA,EAC1B,cACC,qBAAC,SAAD;IAAS,WAAW,sBAAO;cAA3B;KACE,oBAAC,qBAAD,EAAuB,CAAA;KACvB,oBAAC,oBAAD,EAAsB,CAAA;KACtB,oBAAC,oBAAD,EAAsB,CAAA;KACtB,oBAAC,iBAAD,EAAmB,CAAA;KAElB,KAAK,UAAU,oBAAC,aAAD,EAAa,QAAQ,KAAK,QAAU,CAAA;KAC5C;MAEJ;MACV,oBAAC,eAAD,EAAiB,CAAA,CACT"}
+{"version":3,"file":"Header.mjs","sources":["../../../../../../../../../src/components/List/components/Header/Header.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport styles from \"./Header.module.css\";\nimport clsx from \"clsx\";\nimport { ActiveFilters } from \"@/components/List/components/Header/components/ActiveFilters\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { SearchField } from \"@/components/List/components/Header/components/SearchField/SearchField\";\nimport { ViewModeContextMenu } from \"@/components/List/components/Header/components/ViewModeContextMenu/ViewModeContextMenu\";\nimport { TunnelExit } from \"@mittwald/react-tunnel\";\nimport DivView from \"@/views/DivView\";\nimport { SortingContextMenu } from \"@/components/List/components/Header/components/SortingContextMenu/SortingContextMenu\";\nimport { FilterContextMenus } from \"@/components/List/components/Header/components/FilterContextMenu/FilterContextMenus\";\nimport { AllFiltersModal } from \"@/components/List/components/Header/components/AllFiltersModal/AllFiltersModal\";\nimport { useAvailableViewModes } from \"@/components/List/components/Header/lib\";\n\nexport const Header: FC<PropsWithClassName> = (props) => {\n  const { className } = props;\n  const list = useList();\n\n  const availableViewModes = useAvailableViewModes();\n\n  const hasOptions =\n    list.filters.length > 0 ||\n    list.visibleSorting.length > 0 ||\n    list.search ||\n    availableViewModes.length > 1;\n\n  return (\n    <DivView\n      className={clsx(\n        className,\n        styles.header,\n        list.search && styles.withSearch,\n      )}\n    >\n      <DivView className={styles.headerContent}>\n        <TunnelExit id=\"actions\" />\n        {hasOptions && (\n          <DivView className={styles.options}>\n            <ViewModeContextMenu />\n            <SortingContextMenu />\n            <FilterContextMenus />\n            <AllFiltersModal />\n\n            {list.search && <SearchField search={list.search} />}\n          </DivView>\n        )}\n      </DivView>\n      <ActiveFilters />\n    </DivView>\n  );\n};\n\nexport default Header;\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;AAgBO,MAAM,MAAA,GAAiC,CAAC,KAAA,KAAU;AACvD,EAAA,MAAM,EAAE,WAAU,GAAI,KAAA;AACtB,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,MAAM,qBAAqB,qBAAA,EAAsB;AAEjD,EAAA,MAAM,UAAA,GACJ,IAAA,CAAK,OAAA,CAAQ,MAAA,GAAS,CAAA,IACtB,IAAA,CAAK,cAAA,CAAe,MAAA,GAAS,CAAA,IAC7B,IAAA,CAAK,MAAA,IACL,kBAAA,CAAmB,MAAA,GAAS,CAAA;AAE9B,EAAA,uBACE,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,SAAA;AAAA,QACAA,YAAA,CAAO,MAAA;AAAA,QACP,IAAA,CAAK,UAAUA,YAAA,CAAO;AAAA,OACxB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAWA,YAAA,CAAO,aAAA,EACzB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAG,SAAA,EAAU,CAAA;AAAA,UACxB,UAAA,oBACC,IAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAWA,aAAO,OAAA,EACzB,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,mBAAA,EAAA,EAAoB,CAAA;AAAA,gCACpB,kBAAA,EAAA,EAAmB,CAAA;AAAA,gCACnB,kBAAA,EAAA,EAAmB,CAAA;AAAA,gCACnB,eAAA,EAAA,EAAgB,CAAA;AAAA,YAEhB,KAAK,MAAA,oBAAU,GAAA,CAAC,WAAA,EAAA,EAAY,MAAA,EAAQ,KAAK,MAAA,EAAQ;AAAA,WAAA,EACpD;AAAA,SAAA,EAEJ,CAAA;AAAA,4BACC,aAAA,EAAA,EAAc;AAAA;AAAA;AAAA,GACjB;AAEJ;;;;"}

package/dist/js/packages/components/src/components/List/components/Header/Header.module.css.mjs

@@ -0,0 +1,23 @@
+"use client"
+/* */
+const header = "flow--list--header";
+const headerContent = "flow--list--header--header-content";
+const actions = "flow--list--header--actions";
+const options = "flow--list--header--options";
+const withSearch = "flow--list--header--with-search";
+const hideOnDesktop = "flow--list--header--hide-on-desktop";
+const hideOnMobile = "flow--list--header--hide-on-mobile";
+const action = "flow--list--header--action";
+const headerStyles = {
+	header: header,
+	headerContent: headerContent,
+	actions: actions,
+	options: options,
+	withSearch: withSearch,
+	hideOnDesktop: hideOnDesktop,
+	hideOnMobile: hideOnMobile,
+	action: action
+};
+
+export { action, actions, headerStyles as default, header, headerContent, hideOnDesktop, hideOnMobile, options, withSearch };
+//# sourceMappingURL=Header.module.css.mjs.map

package/dist/js/packages/components/src/components/List/components/Header/Header.module.css.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.module.css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/js/packages/components/src/components/List/components/Header/components/ActiveFilters/ActiveFilters.mjs

@@ -1,94 +1,101 @@
 "use client"
 /* */
-import IconClose from "../../../../../Icon/components/icons/IconClose.mjs";
-import IconSave from "../../../../../Icon/components/icons/IconSave.mjs";
-import IconUndo from "../../../../../Icon/components/icons/IconUndo.mjs";
-import "../../../../../Icon/components/icons/index.mjs";
-import DivView from "../../../../../../views/DivView.mjs";
-import TooltipTrigger from "../../../../../Tooltip/components/TooltipTrigger/TooltipTrigger.mjs";
-import "../../../../../Tooltip/index.mjs";
-import __locale_default from "../../../../../../../../../_virtual/_14.locale.mjs";
-import ButtonView from "../../../../../../views/ButtonView.mjs";
-import { useList } from "../../../../hooks/useList.mjs";
-import ActiveFilters_module_default from "./ActiveFilters.module.mjs";
-import Translate from "../../../../../../lib/react/components/Translate/Translate.mjs";
-import "../../../../../../lib/react/components/Translate/index.mjs";
-import TooltipView from "../../../../../../views/TooltipView.mjs";
-import BadgeView from "../../../../../../views/BadgeView.mjs";
-import TooltipTriggerView from "../../../../../../views/TooltipTriggerView.mjs";
-import TextView from "../../../../../../views/TextView.mjs";
-import { Filter } from "../../../../model/filter/Filter.mjs";
-import { transformDateValueToFormattedDate } from "../../../../../../lib/date/transformDateValueToFormattedDate.mjs";
-import { DateRangeFilter } from "../../../../model/filter/DateRangeFilter.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useLocalizedStringFormatter } from "react-aria";
-import { observer } from "mobx-react-lite";
-//#region src/components/List/components/Header/components/ActiveFilters/ActiveFilters.tsx
-var ActiveFilters = observer(() => {
-	const list = useList();
-	const formatter = useLocalizedStringFormatter(__locale_default);
-	const activeFilters = list.filters.flatMap((f) => {
-		if (f instanceof DateRangeFilter) {
-			const value = f.getValue();
-			if (value) return [/* @__PURE__ */ jsx(BadgeView, {
-				onClose: () => f.clear(),
-				children: /* @__PURE__ */ jsx(TextView, { children: `${transformDateValueToFormattedDate(value.start)} - ${transformDateValueToFormattedDate(value.end)}` })
-			}, f.name)];
-		}
-		return f.values.filter((v) => v.isActive).map((v) => /* @__PURE__ */ jsx(BadgeView, {
-			onClose: () => v.deactivate(),
-			children: /* @__PURE__ */ jsx(TextView, { children: v.render() })
-		}, v.id));
-	});
-	const storingAvailable = list.filters.some((f) => f.isStoringAvailable());
-	const hasChanges = list.filters.some((f) => f.hasChanges());
-	const storeFiltersButton = storingAvailable && hasChanges && /* @__PURE__ */ jsxs(TooltipTriggerView, { children: [/* @__PURE__ */ jsx(TooltipView, { children: /* @__PURE__ */ jsx(Translate, {
-		locales: __locale_default,
-		children: "list.filters.store"
-	}) }), /* @__PURE__ */ jsx(ButtonView, {
-		size: "s",
-		variant: "plain",
-		color: "secondary",
-		onPress: () => Filter.storeFilters(list, {
-			autosave: false,
-			manualSave: true
-		}),
-		"aria-label": formatter.format("list.filters.store"),
-		children: /* @__PURE__ */ jsx(IconSave, {})
-	})] });
-	const resetFiltersButton = hasChanges ? /* @__PURE__ */ jsxs(TooltipTrigger, { children: [/* @__PURE__ */ jsx(TooltipView, { children: /* @__PURE__ */ jsx(Translate, {
-		locales: __locale_default,
-		children: "list.filters.reset"
-	}) }), /* @__PURE__ */ jsx(ButtonView, {
-		size: "s",
-		variant: "plain",
-		color: "secondary",
-		onPress: () => list.resetFilters(),
-		"aria-label": formatter.format("list.filters.reset"),
-		children: /* @__PURE__ */ jsx(IconUndo, {})
-	})] }) : void 0;
-	const removeAllFiltersButton = activeFilters.length > 1 ? /* @__PURE__ */ jsxs(TooltipTrigger, { children: [/* @__PURE__ */ jsx(TooltipView, { children: /* @__PURE__ */ jsx(Translate, {
-		locales: __locale_default,
-		children: "list.filters.clear"
-	}) }), /* @__PURE__ */ jsx(ButtonView, {
-		size: "s",
-		variant: "plain",
-		color: "secondary",
-		onPress: () => list.clearFilters(),
-		children: /* @__PURE__ */ jsx(IconClose, {})
-	})] }) : void 0;
-	if (activeFilters.length === 0 && !storeFiltersButton && !resetFiltersButton) return null;
-	return /* @__PURE__ */ jsxs(DivView, {
-		className: ActiveFilters_module_default.activeFilters,
-		children: [
-			activeFilters,
-			storeFiltersButton,
-			resetFiltersButton,
-			removeAllFiltersButton
-		]
-	});
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useList } from '../../../../hooks/useList.mjs';
+import styles from './ActiveFilters.module.scss.mjs';
+import locales from '../../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
+import { Translate } from '../../../../../../lib/react/components/Translate/Translate.mjs';
+import { observer } from 'mobx-react-lite';
+import { useLocalizedStringFormatter } from 'react-aria';
+import { TooltipTrigger } from '../../../../../Tooltip/components/TooltipTrigger/TooltipTrigger.mjs';
+import 'react-aria-components';
+import 'clsx';
+import '../../../../../../lib/propsContext/propsContext.mjs';
+import 'react';
+import '@mittwald/flow-icons';
+import '../../../../../Icon/components/IconSetProvider.mjs';
+import '../../../../../Icon/Icon.mjs';
+import '../../../../../../views/IconView.mjs';
+import { IconClose } from '../../../../../Icon/components/icons/IconClose.mjs';
+import { IconSave } from '../../../../../Icon/components/icons/IconSave.mjs';
+import { IconUndo } from '../../../../../Icon/components/icons/IconUndo.mjs';
+import ButtonView from '../../../../../../views/ButtonView.mjs';
+import TooltipView from '../../../../../../views/TooltipView.mjs';
+import DivView from '../../../../../../views/DivView.mjs';
+import BadgeView from '../../../../../../views/BadgeView.mjs';
+import TooltipTriggerView from '../../../../../../views/TooltipTriggerView.mjs';
+import TextView from '../../../../../../views/TextView.mjs';
+import { Filter } from '../../../../model/filter/Filter.mjs';
+import { transformDateValueToFormattedDate } from '../../../../../../lib/date/transformDateValueToFormattedDate.mjs';
+import { DateRangeFilter } from '../../../../model/filter/DateRangeFilter.mjs';
+
+const ActiveFilters = observer(() => {
+  const list = useList();
+  const formatter = useLocalizedStringFormatter(locales);
+  const activeFilters = list.filters.flatMap((f) => {
+    if (f instanceof DateRangeFilter) {
+      const value = f.getValue();
+      if (value) {
+        return [
+          /* @__PURE__ */ jsx(BadgeView, { onClose: () => f.clear(), children: /* @__PURE__ */ jsx(TextView, { children: `${transformDateValueToFormattedDate(value.start)} - ${transformDateValueToFormattedDate(value.end)}` }) }, f.name)
+        ];
+      }
+    }
+    return f.values.filter((v) => v.isActive).map((v) => /* @__PURE__ */ jsx(BadgeView, { onClose: () => v.deactivate(), children: /* @__PURE__ */ jsx(TextView, { children: v.render() }) }, v.id));
+  });
+  const storingAvailable = list.filters.some((f) => f.isStoringAvailable());
+  const hasChanges = list.filters.some((f) => f.hasChanges());
+  const storeFiltersButton = storingAvailable && hasChanges && /* @__PURE__ */ jsxs(TooltipTriggerView, { children: [
+    /* @__PURE__ */ jsx(TooltipView, { children: /* @__PURE__ */ jsx(Translate, { locales, children: "list.filters.store" }) }),
+    /* @__PURE__ */ jsx(
+      ButtonView,
+      {
+        size: "s",
+        variant: "plain",
+        color: "secondary",
+        onPress: () => Filter.storeFilters(list, { autosave: false, manualSave: true }),
+        "aria-label": formatter.format("list.filters.store"),
+        children: /* @__PURE__ */ jsx(IconSave, {})
+      }
+    )
+  ] });
+  const resetFiltersButton = hasChanges ? /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+    /* @__PURE__ */ jsx(TooltipView, { children: /* @__PURE__ */ jsx(Translate, { locales, children: "list.filters.reset" }) }),
+    /* @__PURE__ */ jsx(
+      ButtonView,
+      {
+        size: "s",
+        variant: "plain",
+        color: "secondary",
+        onPress: () => list.resetFilters(),
+        "aria-label": formatter.format("list.filters.reset"),
+        children: /* @__PURE__ */ jsx(IconUndo, {})
+      }
+    )
+  ] }) : void 0;
+  const removeAllFiltersButton = activeFilters.length > 1 ? /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+    /* @__PURE__ */ jsx(TooltipView, { children: /* @__PURE__ */ jsx(Translate, { locales, children: "list.filters.clear" }) }),
+    /* @__PURE__ */ jsx(
+      ButtonView,
+      {
+        size: "s",
+        variant: "plain",
+        color: "secondary",
+        onPress: () => list.clearFilters(),
+        children: /* @__PURE__ */ jsx(IconClose, {})
+      }
+    )
+  ] }) : void 0;
+  if (activeFilters.length === 0 && !storeFiltersButton && !resetFiltersButton) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(DivView, { className: styles.activeFilters, children: [
+    activeFilters,
+    storeFiltersButton,
+    resetFiltersButton,
+    removeAllFiltersButton
+  ] });
 });
-//#endregion
-export { ActiveFilters as default };
 
-//# sourceMappingURL=ActiveFilters.mjs.map
+export { ActiveFilters };
+//# sourceMappingURL=ActiveFilters.mjs.map