@mittwald/flow-react-components 1.6.0-next.3 → 1.6.0-next.31

package/dist/js/packages/components/src/components/Label/Label.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Label.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Label.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport {\n  overlayTriggersTunneledTo,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface LabelProps\n  extends\n    PropsWithChildren<Omit<Aria.LabelProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {\n  /** Whether the label should show an \"optional\" indicator. */\n  optional?: boolean;\n  /** Whether the label should be displayed as disabled. */\n  isDisabled?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Label = flowComponent(\"Label\", (props) => {\n  const {\n    children,\n    className,\n    optional,\n    isDisabled,\n    ref,\n    unstyled = false,\n    ...rest\n  } = props;\n\n  const [labelProps, labelRef] = Aria.useContextProps(\n    rest,\n    ref,\n    Aria.LabelContext,\n  );\n  const { id, ...rootProps } = labelProps;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Label\");\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(styles.label, isDisabled && styles.disabled, className);\n\n  const optionalMarker = (\n    <span className={styles.optional}>\n      {stringFormatter.format(\"optional\")}\n    </span>\n  );\n\n  const rightTunnel = {\n    id: \"right\",\n    component: \"Label\",\n  } as const;\n\n  const propsContext: PropsContext = {\n    ...overlayTriggersTunneledTo(rightTunnel),\n    // The contextual help sits next to the label text, not with the actions.\n    ContextualHelpTrigger: {\n      tunnel: {\n        id: \"contextualHelp\",\n        component: \"Label\",\n      },\n    },\n    Button: {\n      tunnel: rightTunnel,\n      size: \"s\",\n    },\n    Action: {\n      tunnel: rightTunnel,\n      Button: {\n        tunnel: null,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      {/* The context is already merged into `labelProps` above. */}\n      <Aria.LabelContext.Provider value={null}>\n        <Aria.Label\n          {...rootProps}\n          className={rootClassName}\n          ref={labelRef}\n          inert={isSkeleton || undefined}\n        >\n          {/*\n           * Fields point `aria-labelledby` at the label's id, and the name\n           * computation takes every descendant's name, buttons included. The\n           * id sits on this span so the tunnelled buttons stay out of it.\n           */}\n          <span id={id} className={styles.text}>\n            <SkeletonTextContent defaultWidth=\"6em\">\n              {children}\n              {optional && optionalMarker}\n            </SkeletonTextContent>\n          </span>\n          <UiComponentTunnelExit id=\"contextualHelp\" component=\"Label\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return children;\n              }\n\n              return undefined;\n            }}\n          </UiComponentTunnelExit>\n          <UiComponentTunnelExit id=\"right\" component=\"Label\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return <div className={styles.right}>{children}</div>;\n              }\n\n              return undefined;\n            }}\n          </UiComponentTunnelExit>\n        </Aria.Label>\n      </Aria.LabelContext.Provider>\n    </PropsContextProvider>\n  );\n});\n\nexport default Label;\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,UACA,WACA,UACA,YACA,KACA,WAAW,OACX,GAAG,SACD;CAEJ,MAAM,CAAC,YAAY,YAAY,KAAK,gBAClC,MACA,KACA,KAAK,YACP;CACA,MAAM,EAAE,IAAI,GAAG,cAAc;CAE7B,MAAM,kBAAkB,4BAA4BA,kBAAS,OAAO;CACpE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,WAClB,YACA,KAAKC,qBAAO,OAAO,cAAcA,qBAAO,UAAU,SAAS;CAE/D,MAAM,iBACJ,oBAAC,QAAD;EAAM,WAAWA,qBAAO;EACrB,UAAA,gBAAgB,OAAO,UAAU;CAC9B,CAAA;CAGR,MAAM,cAAc;EAClB,IAAI;EACJ,WAAW;CACb;CAEA,MAAM,eAA6B;EACjC,GAAG,0BAA0B,WAAW;EAExC,uBAAuB,EACrB,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;GACR,MAAM;EACR;EACA,QAAQ;GACN,QAAQ;GACR,QAAQ,EACN,QAAQ,KACV;EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAE3B,UAAA,oBAAC,KAAK,aAAa,UAAnB;GAA4B,OAAO;GACjC,UAAA,qBAAC,KAAK,OAAN;IACE,GAAI;IACJ,WAAW;IACX,KAAK;IACL,OAAO,cAAc,KAAA;IAJvB,UAAA;KAWE,oBAAC,QAAD;MAAU;MAAI,WAAWA,qBAAO;MAC9B,UAAA,qBAAC,qBAAD;OAAqB,cAAa;OAAlC,UAAA,CACG,UACA,YAAY,cACM;;KACjB,CAAA;KACN,oBAAC,uBAAD;MAAuB,IAAG;MAAiB,WAAU;MACjD,WAAA,aAAa;OACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO;MAIX;KACqB,CAAA;KACvB,oBAAC,uBAAD;MAAuB,IAAG;MAAQ,WAAU;MACxC,WAAA,aAAa;OACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO,oBAAC,OAAD;QAAK,WAAWA,qBAAO;QAAQ;OAAc,CAAA;MAIxD;KACqB,CAAA;IACb;;EACc,CAAA;CACR,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"Label.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Label.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport {\n  overlayTriggersTunneledTo,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./locales/*.locale.json\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface LabelProps\n  extends\n    PropsWithChildren<Omit<Aria.LabelProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {\n  /** Whether the label should show an \"optional\" indicator. */\n  optional?: boolean;\n  /** Whether the label should be displayed as disabled. */\n  isDisabled?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Label = flowComponent(\"Label\", (props) => {\n  const {\n    children,\n    className,\n    optional,\n    isDisabled,\n    ref,\n    unstyled = false,\n    ...rest\n  } = props;\n\n  const [labelProps, labelRef] = Aria.useContextProps(\n    rest,\n    ref,\n    Aria.LabelContext,\n  );\n  const { id, ...rootProps } = labelProps;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Label\");\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(styles.label, isDisabled && styles.disabled, className);\n\n  const optionalMarker = (\n    <span className={styles.optional}>\n      {stringFormatter.format(\"optional\")}\n    </span>\n  );\n\n  const rightTunnel = {\n    id: \"right\",\n    component: \"Label\",\n  } as const;\n\n  const propsContext: PropsContext = {\n    ...overlayTriggersTunneledTo(rightTunnel),\n    // The contextual help sits next to the label text, not with the actions.\n    ContextualHelpTrigger: {\n      tunnel: {\n        id: \"contextualHelp\",\n        component: \"Label\",\n      },\n    },\n    Button: {\n      tunnel: rightTunnel,\n      size: \"s\",\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      {/* The context is already merged into `labelProps` above. */}\n      <Aria.LabelContext.Provider value={null}>\n        <Aria.Label\n          {...rootProps}\n          className={rootClassName}\n          ref={labelRef}\n          inert={isSkeleton || undefined}\n        >\n          {/*\n           * Fields point `aria-labelledby` at the label's id, and the name\n           * computation takes every descendant's name, buttons included. The\n           * id sits on this span so the tunnelled buttons stay out of it.\n           */}\n          <span id={id} className={styles.text}>\n            <SkeletonTextContent defaultWidth=\"6em\">\n              {children}\n              {optional && optionalMarker}\n            </SkeletonTextContent>\n          </span>\n          <UiComponentTunnelExit id=\"contextualHelp\" component=\"Label\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return children;\n              }\n\n              return undefined;\n            }}\n          </UiComponentTunnelExit>\n          <UiComponentTunnelExit id=\"right\" component=\"Label\">\n            {(children) => {\n              if (React.Children.count(children) >= 1) {\n                return <div className={styles.right}>{children}</div>;\n              }\n\n              return undefined;\n            }}\n          </UiComponentTunnelExit>\n        </Aria.Label>\n      </Aria.LabelContext.Provider>\n    </PropsContextProvider>\n  );\n});\n\nexport default Label;\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,UACA,WACA,UACA,YACA,KACA,WAAW,OACX,GAAG,SACD;CAEJ,MAAM,CAAC,YAAY,YAAY,KAAK,gBAClC,MACA,KACA,KAAK,YACP;CACA,MAAM,EAAE,IAAI,GAAG,cAAc;CAE7B,MAAM,kBAAkB,4BAA4BA,kBAAS,OAAO;CACpE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,WAClB,YACA,KAAKC,qBAAO,OAAO,cAAcA,qBAAO,UAAU,SAAS;CAE/D,MAAM,iBACJ,oBAAC,QAAD;EAAM,WAAWA,qBAAO;EACrB,UAAA,gBAAgB,OAAO,UAAU;CAC9B,CAAA;CAGR,MAAM,cAAc;EAClB,IAAI;EACJ,WAAW;CACb;CAEA,MAAM,eAA6B;EACjC,GAAG,0BAA0B,WAAW;EAExC,uBAAuB,EACrB,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,QAAQ;GACN,QAAQ;GACR,MAAM;EACR;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAE3B,UAAA,oBAAC,KAAK,aAAa,UAAnB;GAA4B,OAAO;GACjC,UAAA,qBAAC,KAAK,OAAN;IACE,GAAI;IACJ,WAAW;IACX,KAAK;IACL,OAAO,cAAc,KAAA;IAJvB,UAAA;KAWE,oBAAC,QAAD;MAAU;MAAI,WAAWA,qBAAO;MAC9B,UAAA,qBAAC,qBAAD;OAAqB,cAAa;OAAlC,UAAA,CACG,UACA,YAAY,cACM;;KACjB,CAAA;KACN,oBAAC,uBAAD;MAAuB,IAAG;MAAiB,WAAU;MACjD,WAAA,aAAa;OACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO;MAIX;KACqB,CAAA;KACvB,oBAAC,uBAAD;MAAuB,IAAG;MAAQ,WAAU;MACxC,WAAA,aAAa;OACb,IAAI,MAAM,SAAS,MAAM,QAAQ,KAAK,GACpC,OAAO,oBAAC,OAAD;QAAK,WAAWA,qBAAO;QAAQ;OAAc,CAAA;MAIxD;KACqB,CAAA;IACb;;EACc,CAAA;CACR,CAAA;AAE1B,CAAC"}

package/dist/js/packages/components/src/components/LightBox/LightBox.mjs

@@ -7,7 +7,7 @@ import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExi
 import { useOverlayController } from "../../lib/controller/overlay/useOverlayController.mjs";
 import ButtonView from "../../views/ButtonView.mjs";
 import DivView from "../../views/DivView.mjs";
-import __locale_default from "../../../../../_virtual/_21.locale.mjs";
+import __locale_default from "../../../../../_virtual/_22.locale.mjs";
 import { Overlay } from "../Overlay/Overlay.mjs";
 import LightBox_module_default from "./LightBox.module.mjs";
 import clsx from "clsx";

package/dist/js/packages/components/src/components/LightBox/components/LightBoxGallery/Controls.mjs

@@ -2,7 +2,7 @@
 /* */
 import { useLocalizedStringFormatter } from "../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import LightBoxGallery_module_default from "./LightBoxGallery.module.mjs";
-import __locale_default from "../../../../../../../_virtual/_21.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_22.locale.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/LightBox/components/LightBoxGallery/Controls.tsx

package/dist/js/packages/components/src/components/LightBox/components/LightBoxGallery/LightBoxGallery.mjs

@@ -5,7 +5,7 @@ import { IconChevronLeft } from "../../../Icon/components/icons/IconChevronLeft.
 import { IconChevronRight } from "../../../Icon/components/icons/IconChevronRight.mjs";
 import { Button } from "../../../Button/Button.mjs";
 import LightBoxGallery_module_default from "./LightBoxGallery.module.mjs";
-import __locale_default from "../../../../../../../_virtual/_21.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_22.locale.mjs";
 import { Controls } from "./Controls.mjs";
 import clsx from "clsx";
 import React, { useEffect, useRef, useState } from "react";

package/dist/js/packages/components/src/components/LightBox/components/LightBoxGalleryItem/LightBoxGalleryItem.mjs

@@ -7,7 +7,7 @@ import { Button } from "../../../Button/Button.mjs";
 import { UiComponentTunnelExit } from "../../../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import { useOverlayController } from "../../../../lib/controller/overlay/useOverlayController.mjs";
 import LightBoxGallery_module_default from "../LightBoxGallery/LightBoxGallery.module.mjs";
-import __locale_default from "../../../../../../../_virtual/_21.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_22.locale.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocalizedStringFormatter } from "react-aria";
 //#region src/components/LightBox/components/LightBoxGalleryItem/LightBoxGalleryItem.tsx

package/dist/js/packages/components/src/components/Link/components/LinkIcon/LinkIcon.mjs

@@ -3,7 +3,7 @@
 import { IconDownload } from "../../../Icon/components/icons/IconDownload.mjs";
 import { IconExternalLink } from "../../../Icon/components/icons/IconExternalLink.mjs";
 import { useLocalizedStringFormatter } from "../../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../../../_virtual/_15.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_16.locale.mjs";
 import LinkIcon_module_default from "./LinkIcon.module.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Link/components/LinkIcon/LinkIcon.tsx

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

@@ -2,7 +2,7 @@
 /* */
 import { IconSearch } from "../../../Icon/components/icons/IconSearch.mjs";
 import { useLocalizedStringFormatter } from "../../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../../../_virtual/_17.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_18.locale.mjs";
 import IllustratedMessageView from "../../../../views/IllustratedMessageView.mjs";
 import HeadingView from "../../../../views/HeadingView.mjs";
 import TextView from "../../../../views/TextView.mjs";

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

@@ -2,7 +2,7 @@
 /* */
 import { IconUnorderedList } from "../../../Icon/components/icons/IconUnorderedList.mjs";
 import { useLocalizedStringFormatter } from "../../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../../../_virtual/_17.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_18.locale.mjs";
 import IllustratedMessageView from "../../../../views/IllustratedMessageView.mjs";
 import HeadingView from "../../../../views/HeadingView.mjs";
 import TextView from "../../../../views/TextView.mjs";

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

@@ -3,7 +3,7 @@
 import { useLocalizedStringFormatter } from "../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import DivView from "../../../../views/DivView.mjs";
 import LoadingSpinnerView from "../../../../views/LoadingSpinnerView.mjs";
-import __locale_default from "../../../../../../../_virtual/_17.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_18.locale.mjs";
 import { useList } from "../../hooks/useList.mjs";
 import Footer_module_default from "./Footer.module.mjs";
 import { PaginationInfos } from "./components/PaginationInfos/PaginationInfos.mjs";

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

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../../../../../_virtual/_17.locale.mjs";
+import __locale_default from "../../../../../../../../../_virtual/_18.locale.mjs";
 import TextView from "../../../../../../views/TextView.mjs";
 import { useList } from "../../../../hooks/useList.mjs";
 import SkeletonView from "../../../../../../views/SkeletonView.mjs";

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

@@ -2,7 +2,7 @@
 /* */
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import ButtonView from "../../../../../../views/ButtonView.mjs";
-import __locale_default from "../../../../../../../../../_virtual/_17.locale.mjs";
+import __locale_default from "../../../../../../../../../_virtual/_18.locale.mjs";
 import { useList } from "../../../../hooks/useList.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/List/components/Footer/components/ShowNextBatchButton/ShowNextBatchButton.tsx

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

@@ -3,10 +3,13 @@
 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 { useLanguage } from "../../../../../../lib/hooks/useLanguage.mjs";
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
+import { formatListDateRange } from "../../../../../../../../components-base/src/list/filter/formatDateRange.mjs";
+import "../../../../../../../../components-base/src/index.mjs";
 import ButtonView from "../../../../../../views/ButtonView.mjs";
 import DivView from "../../../../../../views/DivView.mjs";
-import __locale_default from "../../../../../../../../../_virtual/_17.locale.mjs";
+import __locale_default from "../../../../../../../../../_virtual/_18.locale.mjs";
 import TextView from "../../../../../../views/TextView.mjs";
 import { useList } from "../../../../hooks/useList.mjs";
 import ActiveFilters_module_default from "./ActiveFilters.module.mjs";
@@ -14,7 +17,6 @@ import TooltipView from "../../../../../../views/TooltipView.mjs";
 import BadgeView from "../../../../../../views/BadgeView.mjs";
 import TooltipTriggerView from "../../../../../../views/TooltipTriggerView.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 { observer } from "mobx-react-lite";
@@ -23,13 +25,14 @@ var ActiveFilters = observer((props) => {
 	const { isDisabled } = props;
 	const list = useList();
 	const formatter = useLocalizedStringFormatter(__locale_default, "List");
+	const locale = useLanguage();
 	const activeFilters = list.filters.flatMap((f) => {
 		if (f instanceof DateRangeFilter) {
 			const value = f.getValue();
 			if (value) return [/* @__PURE__ */ jsx(BadgeView, {
 				onClose: () => f.clear(),
 				isDisabled,
-				children: /* @__PURE__ */ jsx(TextView, { children: `${transformDateValueToFormattedDate(value.start)} - ${transformDateValueToFormattedDate(value.end)}` })
+				children: /* @__PURE__ */ jsx(TextView, { children: formatListDateRange(value, locale, formatter.format) })
 			}, f.name)];
 		}
 		return f.values.filter((v) => v.isActive).map((v) => /* @__PURE__ */ jsx(BadgeView, {
@@ -72,6 +75,7 @@ var ActiveFilters = observer((props) => {
 			variant: "plain",
 			color: "secondary",
 			onPress: () => list.clearFilters(),
+			"aria-label": formatter.format("filters.clear"),
 			children: /* @__PURE__ */ jsx(IconClose, {})
 		})]
 	}) : void 0;

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

@@ -1 +1 @@
-{"version":3,"file":"ActiveFilters.mjs","names":["locales","styles"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/ActiveFilters/ActiveFilters.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport styles from \"./ActiveFilters.module.scss\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { observer } from \"mobx-react-lite\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport {\n  IconClose,\n  IconSave,\n  IconUndo,\n} from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport TooltipView from \"@/views/TooltipView\";\nimport DivView from \"@/views/DivView\";\nimport BadgeView from \"@/views/BadgeView\";\nimport TooltipTriggerView from \"@/views/TooltipTriggerView\";\nimport TextView from \"@/views/TextView\";\nimport { Filter } from \"@/components/List/model/filter/Filter\";\nimport { transformDateValueToFormattedDate } from \"@/lib/date/transformDateValueToFormattedDate\";\nimport { DateRangeFilter } from \"@/components/List/model/filter/DateRangeFilter\";\n\ninterface Props {\n  isDisabled?: boolean;\n}\n\nexport const ActiveFilters: FC<Props> = observer((props) => {\n  const { isDisabled } = props;\n  const list = useList();\n  const formatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const activeFilters = list.filters.flatMap((f) => {\n    if (f instanceof DateRangeFilter) {\n      const value = f.getValue();\n      if (value) {\n        return [\n          <BadgeView\n            key={f.name}\n            onClose={() => f.clear()}\n            isDisabled={isDisabled}\n          >\n            <TextView>\n              {`${transformDateValueToFormattedDate(value.start)} - ${transformDateValueToFormattedDate(value.end)}`}\n            </TextView>\n          </BadgeView>,\n        ];\n      }\n    }\n\n    return f.values\n      .filter((v) => v.isActive)\n      .map((v) => (\n        <BadgeView\n          key={v.id}\n          onClose={() => v.deactivate()}\n          isDisabled={isDisabled}\n        >\n          <TextView>{v.render()}</TextView>\n        </BadgeView>\n      ));\n  });\n\n  const storingAvailable = list.filters.some((f) => f.isStoringAvailable());\n  const hasChanges = list.filters.some((f) => f.hasChanges());\n\n  const storeFiltersButton = storingAvailable && hasChanges && (\n    <TooltipTriggerView isDisabled={isDisabled}>\n      <TooltipView>{formatter.format(\"filters.store\")}</TooltipView>\n      <ButtonView\n        size=\"s\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={() =>\n          Filter.storeFilters(list, list.filters, {\n            autosave: false,\n            manualSave: true,\n          })\n        }\n        aria-label={formatter.format(\"filters.store\")}\n      >\n        <IconSave />\n      </ButtonView>\n    </TooltipTriggerView>\n  );\n\n  const resetFiltersButton = hasChanges ? (\n    <TooltipTriggerView isDisabled={isDisabled}>\n      <TooltipView>{formatter.format(\"filters.reset\")}</TooltipView>\n      <ButtonView\n        size=\"s\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={() => list.resetFilters()}\n        aria-label={formatter.format(\"filters.reset\")}\n      >\n        <IconUndo />\n      </ButtonView>\n    </TooltipTriggerView>\n  ) : undefined;\n\n  const removeAllFiltersButton =\n    activeFilters.length > 1 ? (\n      <TooltipTriggerView isDisabled={isDisabled}>\n        <TooltipView>{formatter.format(\"filters.clear\")}</TooltipView>\n        <ButtonView\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n          onPress={() => list.clearFilters()}\n        >\n          <IconClose />\n        </ButtonView>\n      </TooltipTriggerView>\n    ) : undefined;\n\n  if (\n    activeFilters.length === 0 &&\n    !storeFiltersButton &&\n    !resetFiltersButton\n  ) {\n    return null;\n  }\n\n  return (\n    <DivView className={styles.activeFilters}>\n      {activeFilters}\n      {storeFiltersButton}\n      {resetFiltersButton}\n      {removeAllFiltersButton}\n    </DivView>\n  );\n});\n\nexport default ActiveFilters;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyBA,IAAa,gBAA2B,UAAU,UAAU;CAC1D,MAAM,EAAE,eAAe;CACvB,MAAM,OAAO,QAAQ;CACrB,MAAM,YAAY,4BAA4BA,kBAAS,MAAM;CAE7D,MAAM,gBAAgB,KAAK,QAAQ,SAAS,MAAM;EAChD,IAAI,aAAa,iBAAiB;GAChC,MAAM,QAAQ,EAAE,SAAS;GACzB,IAAI,OACF,OAAO,CACL,oBAAC,WAAD;IAEE,eAAe,EAAE,MAAM;IACX;IAEZ,UAAA,oBAAC,UAAD,EAAA,UACG,GAAG,kCAAkC,MAAM,KAAK,EAAE,KAAK,kCAAkC,MAAM,GAAG,IAC3F,CAAA;GACD,GAPJ,EAAE,IAOE,CACb;EAEJ;EAEA,OAAO,EAAE,OACN,QAAQ,MAAM,EAAE,QAAQ,CAAC,CACzB,KAAK,MACJ,oBAAC,WAAD;GAEE,eAAe,EAAE,WAAW;GAChB;GAEZ,UAAA,oBAAC,UAAD,EAAA,UAAW,EAAE,OAAO,EAAY,CAAA;EACvB,GALJ,EAAE,EAKE,CACZ;CACL,CAAC;CAED,MAAM,mBAAmB,KAAK,QAAQ,MAAM,MAAM,EAAE,mBAAmB,CAAC;CACxE,MAAM,aAAa,KAAK,QAAQ,MAAM,MAAM,EAAE,WAAW,CAAC;CAE1D,MAAM,qBAAqB,oBAAoB,cAC7C,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eACE,OAAO,aAAa,MAAM,KAAK,SAAS;IACtC,UAAU;IACV,YAAY;GACd,CAAC;GAEH,cAAY,UAAU,OAAO,eAAe;GAE5C,UAAA,oBAAC,UAAD,CAAW,CAAA;EACD,CAAA,CACM;;CAGtB,MAAM,qBAAqB,aACzB,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eAAe,KAAK,aAAa;GACjC,cAAY,UAAU,OAAO,eAAe;GAE5C,UAAA,oBAAC,UAAD,CAAW,CAAA;EACD,CAAA,CACM;CAClB,CAAA,IAAA,KAAA;CAEJ,MAAM,yBACJ,cAAc,SAAS,IACrB,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eAAe,KAAK,aAAa;GAEjC,UAAA,oBAAC,WAAD,CAAY,CAAA;EACF,CAAA,CACM;CAClB,CAAA,IAAA,KAAA;CAEN,IACE,cAAc,WAAW,KACzB,CAAC,sBACD,CAAC,oBAED,OAAO;CAGT,OACE,qBAAC,SAAD;EAAS,WAAWC,6BAAO;EAA3B,UAAA;GACG;GACA;GACA;GACA;EACM;;AAEb,CAAC"}
+{"version":3,"file":"ActiveFilters.mjs","names":["locales","styles"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/ActiveFilters/ActiveFilters.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport styles from \"./ActiveFilters.module.scss\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { observer } from \"mobx-react-lite\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport {\n  IconClose,\n  IconSave,\n  IconUndo,\n} from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport TooltipView from \"@/views/TooltipView\";\nimport DivView from \"@/views/DivView\";\nimport BadgeView from \"@/views/BadgeView\";\nimport TooltipTriggerView from \"@/views/TooltipTriggerView\";\nimport TextView from \"@/views/TextView\";\nimport { Filter } from \"@/components/List/model/filter/Filter\";\nimport { DateRangeFilter } from \"@/components/List/model/filter/DateRangeFilter\";\nimport { useLanguage } from \"@/lib/hooks/useLanguage\";\nimport { formatListDateRange } from \"@mittwald/flow-components-base\";\n\ninterface Props {\n  isDisabled?: boolean;\n}\n\nexport const ActiveFilters: FC<Props> = observer((props) => {\n  const { isDisabled } = props;\n  const list = useList();\n  const formatter = useLocalizedStringFormatter(locales, \"List\");\n  const locale = useLanguage();\n\n  const activeFilters = list.filters.flatMap((f) => {\n    if (f instanceof DateRangeFilter) {\n      const value = f.getValue();\n      if (value) {\n        return [\n          <BadgeView\n            key={f.name}\n            onClose={() => f.clear()}\n            isDisabled={isDisabled}\n          >\n            <TextView>\n              {formatListDateRange(value, locale, formatter.format)}\n            </TextView>\n          </BadgeView>,\n        ];\n      }\n    }\n\n    return f.values\n      .filter((v) => v.isActive)\n      .map((v) => (\n        <BadgeView\n          key={v.id}\n          onClose={() => v.deactivate()}\n          isDisabled={isDisabled}\n        >\n          <TextView>{v.render()}</TextView>\n        </BadgeView>\n      ));\n  });\n\n  const storingAvailable = list.filters.some((f) => f.isStoringAvailable());\n  const hasChanges = list.filters.some((f) => f.hasChanges());\n\n  const storeFiltersButton = storingAvailable && hasChanges && (\n    <TooltipTriggerView isDisabled={isDisabled}>\n      <TooltipView>{formatter.format(\"filters.store\")}</TooltipView>\n      <ButtonView\n        size=\"s\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={() =>\n          Filter.storeFilters(list, list.filters, {\n            autosave: false,\n            manualSave: true,\n          })\n        }\n        aria-label={formatter.format(\"filters.store\")}\n      >\n        <IconSave />\n      </ButtonView>\n    </TooltipTriggerView>\n  );\n\n  const resetFiltersButton = hasChanges ? (\n    <TooltipTriggerView isDisabled={isDisabled}>\n      <TooltipView>{formatter.format(\"filters.reset\")}</TooltipView>\n      <ButtonView\n        size=\"s\"\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={() => list.resetFilters()}\n        aria-label={formatter.format(\"filters.reset\")}\n      >\n        <IconUndo />\n      </ButtonView>\n    </TooltipTriggerView>\n  ) : undefined;\n\n  const removeAllFiltersButton =\n    activeFilters.length > 1 ? (\n      <TooltipTriggerView isDisabled={isDisabled}>\n        <TooltipView>{formatter.format(\"filters.clear\")}</TooltipView>\n        <ButtonView\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n          onPress={() => list.clearFilters()}\n          aria-label={formatter.format(\"filters.clear\")}\n        >\n          <IconClose />\n        </ButtonView>\n      </TooltipTriggerView>\n    ) : undefined;\n\n  if (\n    activeFilters.length === 0 &&\n    !storeFiltersButton &&\n    !resetFiltersButton\n  ) {\n    return null;\n  }\n\n  return (\n    <DivView className={styles.activeFilters}>\n      {activeFilters}\n      {storeFiltersButton}\n      {resetFiltersButton}\n      {removeAllFiltersButton}\n    </DivView>\n  );\n});\n\nexport default ActiveFilters;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAa,gBAA2B,UAAU,UAAU;CAC1D,MAAM,EAAE,eAAe;CACvB,MAAM,OAAO,QAAQ;CACrB,MAAM,YAAY,4BAA4BA,kBAAS,MAAM;CAC7D,MAAM,SAAS,YAAY;CAE3B,MAAM,gBAAgB,KAAK,QAAQ,SAAS,MAAM;EAChD,IAAI,aAAa,iBAAiB;GAChC,MAAM,QAAQ,EAAE,SAAS;GACzB,IAAI,OACF,OAAO,CACL,oBAAC,WAAD;IAEE,eAAe,EAAE,MAAM;IACX;IAEZ,UAAA,oBAAC,UAAD,EAAA,UACG,oBAAoB,OAAO,QAAQ,UAAU,MAAM,EAC5C,CAAA;GACD,GAPJ,EAAE,IAOE,CACb;EAEJ;EAEA,OAAO,EAAE,OACN,QAAQ,MAAM,EAAE,QAAQ,CAAC,CACzB,KAAK,MACJ,oBAAC,WAAD;GAEE,eAAe,EAAE,WAAW;GAChB;GAEZ,UAAA,oBAAC,UAAD,EAAA,UAAW,EAAE,OAAO,EAAY,CAAA;EACvB,GALJ,EAAE,EAKE,CACZ;CACL,CAAC;CAED,MAAM,mBAAmB,KAAK,QAAQ,MAAM,MAAM,EAAE,mBAAmB,CAAC;CACxE,MAAM,aAAa,KAAK,QAAQ,MAAM,MAAM,EAAE,WAAW,CAAC;CAE1D,MAAM,qBAAqB,oBAAoB,cAC7C,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eACE,OAAO,aAAa,MAAM,KAAK,SAAS;IACtC,UAAU;IACV,YAAY;GACd,CAAC;GAEH,cAAY,UAAU,OAAO,eAAe;GAE5C,UAAA,oBAAC,UAAD,CAAW,CAAA;EACD,CAAA,CACM;;CAGtB,MAAM,qBAAqB,aACzB,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eAAe,KAAK,aAAa;GACjC,cAAY,UAAU,OAAO,eAAe;GAE5C,UAAA,oBAAC,UAAD,CAAW,CAAA;EACD,CAAA,CACM;CAClB,CAAA,IAAA,KAAA;CAEJ,MAAM,yBACJ,cAAc,SAAS,IACrB,qBAAC,oBAAD;EAAgC;EAAhC,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,UAAU,OAAO,eAAe,EAAe,CAAA,GAC7D,oBAAC,YAAD;GACE,MAAK;GACL,SAAQ;GACR,OAAM;GACN,eAAe,KAAK,aAAa;GACjC,cAAY,UAAU,OAAO,eAAe;GAE5C,UAAA,oBAAC,WAAD,CAAY,CAAA;EACF,CAAA,CACM;CAClB,CAAA,IAAA,KAAA;CAEN,IACE,cAAc,WAAW,KACzB,CAAC,sBACD,CAAC,oBAED,OAAO;CAGT,OACE,qBAAC,SAAD;EAAS,WAAWC,6BAAO;EAA3B,UAAA;GACG;GACA;GACA;GACA;EACM;;AAEb,CAAC"}

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

@@ -5,7 +5,7 @@ import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/
 import { useOverlayController } from "../../../../../../lib/controller/overlay/useOverlayController.mjs";
 import ButtonView from "../../../../../../views/ButtonView.mjs";
 import SkeletonTextView from "../../../../../../views/SkeletonTextView.mjs";
-import __locale_default from "../../../../../../../../../_virtual/_17.locale.mjs";
+import __locale_default from "../../../../../../../../../_virtual/_18.locale.mjs";
 import HeadingView from "../../../../../../views/HeadingView.mjs";
 import TextView from "../../../../../../views/TextView.mjs";
 import { useList } from "../../../../hooks/useList.mjs";

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

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../../../../../_virtual/_17.locale.mjs";
+import __locale_default from "../../../../../../../../../_virtual/_18.locale.mjs";
 import CheckboxGroupView from "../../../../../../views/CheckboxGroupView.mjs";
 import CheckboxView from "../../../../../../views/CheckboxView.mjs";
 import FilterAccordionCheckboxGroup_module_default from "./FilterAccordionCheckboxGroup.module.mjs";

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

@@ -2,8 +2,10 @@
 /* */
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import ButtonView from "../../../../../../views/ButtonView.mjs";
-import __locale_default from "../../../../../../../../../_virtual/_17.locale.mjs";
+import { isDateRangeValue } from "../../../../../Calendar/components/RangeCalendar/types.mjs";
+import __locale_default from "../../../../../../../../../_virtual/_18.locale.mjs";
 import RangeCalendarView from "../../../../../../views/RangeCalendarView.mjs";
+import { DateTimeRangeFields } from "../DateTimeRangeFields/DateTimeRangeFields.mjs";
 import FlexView from "../../../../../../views/FlexView.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -15,9 +17,9 @@ var FilterAccordionDateRange = (props) => {
 	return /* @__PURE__ */ jsxs(FlexView, {
 		direction: "column",
 		gap: "m",
-		children: [/* @__PURE__ */ jsx(RangeCalendarView, {
-			...filter.dateRangeOptions,
-			value: currentValue,
+		children: [filter.granularity === "minute" ? /* @__PURE__ */ jsx(DateTimeRangeFields, { filter }) : /* @__PURE__ */ jsx(RangeCalendarView, {
+			...filter.rangeCalendarProps,
+			value: isDateRangeValue(currentValue) ? currentValue : null,
 			onChange: (range) => {
 				filter.setValue(range);
 			}

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

@@ -1 +1 @@
-{"version":3,"file":"FilterAccordionDateRange.mjs","names":["locales"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/FilterAccordionDateRange.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport ButtonView from \"@/views/ButtonView\";\nimport FlexView from \"@/views/FlexView\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport RangeCalendarView from \"@/views/RangeCalendarView\";\nimport type { AnyDateRangeFilter } from \"@/components/List/model/filter/types\";\n\ninterface Props {\n  filter: AnyDateRangeFilter;\n}\n\nexport const FilterAccordionDateRange: FC<Props> = (props) => {\n  const { filter } = props;\n\n  const currentValue = filter.getValue();\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  return (\n    <FlexView direction=\"column\" gap=\"m\">\n      <RangeCalendarView\n        {...filter.dateRangeOptions}\n        value={currentValue}\n        onChange={(range) => {\n          filter.setValue(range);\n        }}\n      />\n      {currentValue && (\n        <ButtonView\n          size=\"s\"\n          color=\"secondary\"\n          variant=\"soft\"\n          onPress={() => filter.clear()}\n        >\n          {stringFormatter.format(\"filters.clearSelection\")}\n        </ButtonView>\n      )}\n    </FlexView>\n  );\n};\n"],"mappings":";;;;;;;;;;AAYA,IAAa,4BAAuC,UAAU;CAC5D,MAAM,EAAE,WAAW;CAEnB,MAAM,eAAe,OAAO,SAAS;CAErC,MAAM,kBAAkB,4BAA4BA,kBAAS,MAAM;CAEnE,OACE,qBAAC,UAAD;EAAU,WAAU;EAAS,KAAI;EAAjC,UAAA,CACE,oBAAC,mBAAD;GACE,GAAI,OAAO;GACX,OAAO;GACP,WAAW,UAAU;IACnB,OAAO,SAAS,KAAK;GACvB;EACD,CAAA,GACA,gBACC,oBAAC,YAAD;GACE,MAAK;GACL,OAAM;GACN,SAAQ;GACR,eAAe,OAAO,MAAM;GAE3B,UAAA,gBAAgB,OAAO,wBAAwB;EACtC,CAAA,CAEN;;AAEd"}
+{"version":3,"file":"FilterAccordionDateRange.mjs","names":["locales"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/FilterAccordionDateRange.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport ButtonView from \"@/views/ButtonView\";\nimport FlexView from \"@/views/FlexView\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport RangeCalendarView from \"@/views/RangeCalendarView\";\nimport type { AnyDateRangeFilter } from \"@/components/List/model/filter/types\";\nimport { isDateRangeValue } from \"@/components/Calendar\";\nimport { DateTimeRangeFields } from \"@/components/List/components/Header/components/DateTimeRangeFields/DateTimeRangeFields\";\n\ninterface Props {\n  filter: AnyDateRangeFilter;\n}\n\nexport const FilterAccordionDateRange: FC<Props> = (props) => {\n  const { filter } = props;\n\n  const currentValue = filter.getValue();\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  return (\n    <FlexView direction=\"column\" gap=\"m\">\n      {filter.granularity === \"minute\" ? (\n        <DateTimeRangeFields filter={filter} />\n      ) : (\n        <RangeCalendarView\n          {...filter.rangeCalendarProps}\n          value={isDateRangeValue(currentValue) ? currentValue : null}\n          onChange={(range) => {\n            filter.setValue(range);\n          }}\n        />\n      )}\n      {currentValue && (\n        <ButtonView\n          size=\"s\"\n          color=\"secondary\"\n          variant=\"soft\"\n          onPress={() => filter.clear()}\n        >\n          {stringFormatter.format(\"filters.clearSelection\")}\n        </ButtonView>\n      )}\n    </FlexView>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAcA,IAAa,4BAAuC,UAAU;CAC5D,MAAM,EAAE,WAAW;CAEnB,MAAM,eAAe,OAAO,SAAS;CAErC,MAAM,kBAAkB,4BAA4BA,kBAAS,MAAM;CAEnE,OACE,qBAAC,UAAD;EAAU,WAAU;EAAS,KAAI;EAAjC,UAAA,CACG,OAAO,gBAAgB,WACtB,oBAAC,qBAAD,EAA6B,OAAS,CAAA,IAEtC,oBAAC,mBAAD;GACE,GAAI,OAAO;GACX,OAAO,iBAAiB,YAAY,IAAI,eAAe;GACvD,WAAW,UAAU;IACnB,OAAO,SAAS,KAAK;GACvB;EACD,CAAA,GAEF,gBACC,oBAAC,YAAD;GACE,MAAK;GACL,OAAM;GACN,SAAQ;GACR,eAAe,OAAO,MAAM;GAE3B,UAAA,gBAAgB,OAAO,wBAAwB;EACtC,CAAA,CAEN;;AAEd"}

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

@@ -2,7 +2,7 @@
 /* */
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import ButtonView from "../../../../../../views/ButtonView.mjs";
-import __locale_default from "../../../../../../../../../_virtual/_17.locale.mjs";
+import __locale_default from "../../../../../../../../../_virtual/_18.locale.mjs";
 import RadioGroupView from "../../../../../../views/RadioGroupView.mjs";
 import RadioView from "../../../../../../views/RadioView.mjs";
 import FlexView from "../../../../../../views/FlexView.mjs";

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

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../../../../../_virtual/_17.locale.mjs";
+import __locale_default from "../../../../../../../../../_virtual/_18.locale.mjs";
 import HeadingView from "../../../../../../views/HeadingView.mjs";
 import { useList } from "../../../../hooks/useList.mjs";
 import ContentView from "../../../../../../views/ContentView.mjs";

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

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../../../../../_virtual/_17.locale.mjs";
+import __locale_default from "../../../../../../../../../_virtual/_18.locale.mjs";
 import HeadingView from "../../../../../../views/HeadingView.mjs";
 import { useList } from "../../../../hooks/useList.mjs";
 import { useAvailableViewModes } from "../../lib.mjs";

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

@@ -0,0 +1,101 @@
+"use client"
+/* */
+import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
+import { getListDateTimeRangeUpdate, isListDateTimeRangeEndBeforeStart, listDateTimeRangeFieldsFromValue, toListCalendarDate, toListTime } from "../../../../../../../../components-base/src/list/filter/dateTimeRangeFields.mjs";
+import "../../../../../../../../components-base/src/index.mjs";
+import DivView from "../../../../../../views/DivView.mjs";
+import __locale_default from "../../../../../../../../../_virtual/_18.locale.mjs";
+import DatePickerView from "../../../../../../views/DatePickerView.mjs";
+import TimeFieldView from "../../../../../../views/TimeFieldView.mjs";
+import LabelView from "../../../../../../views/LabelView.mjs";
+import FieldErrorView from "../../../../../../views/FieldErrorView.mjs";
+import DateTimeRangeFields_module_default from "./DateTimeRangeFields.module.mjs";
+import clsx from "clsx";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/List/components/Header/components/DateTimeRangeFields/DateTimeRangeFields.tsx
+var DateTimeRangeFields = (props) => {
+	const { filter, className } = props;
+	const stringFormatter = useLocalizedStringFormatter(__locale_default, "List");
+	const value = filter.getValue();
+	const [appliedValue, setAppliedValue] = useState(value);
+	const [fields, setFields] = useState(() => listDateTimeRangeFieldsFromValue(value));
+	if (value !== appliedValue) {
+		setAppliedValue(value);
+		setFields(listDateTimeRangeFieldsFromValue(value));
+	}
+	const options = filter.dateTimeRangeOptions;
+	const minValue = toListCalendarDate(options?.minValue);
+	const maxValue = toListCalendarDate(options?.maxValue);
+	const update = (change) => {
+		const next = {
+			...fields,
+			...change
+		};
+		setFields(next);
+		const newValue = getListDateTimeRangeUpdate(next, appliedValue, options);
+		if (newValue === void 0) return;
+		setAppliedValue(newValue);
+		if (newValue) filter.setValue(newValue);
+		else filter.clear();
+	};
+	const rangeErrorId = useId();
+	const hasRangeError = isListDateTimeRangeEndBeforeStart(fields);
+	const describedBy = hasRangeError ? rangeErrorId : void 0;
+	return /* @__PURE__ */ jsxs(DivView, {
+		className: clsx(DateTimeRangeFields_module_default.dateTimeRangeFields, className),
+		children: [
+			/* @__PURE__ */ jsxs(DatePickerView, {
+				value: fields.startDate,
+				onChange: (date) => update({ startDate: toListCalendarDate(date) }),
+				minValue,
+				maxValue,
+				"aria-describedby": describedBy,
+				isDateUnavailable: options?.isDateUnavailable,
+				children: [/* @__PURE__ */ jsx(LabelView, {
+					optional: false,
+					children: stringFormatter.format("dateRange.startDate")
+				}), /* @__PURE__ */ jsx(FieldErrorView, {})]
+			}),
+			/* @__PURE__ */ jsx(TimeFieldView, {
+				value: fields.startTime,
+				onChange: (time) => update({ startTime: toListTime(time) }),
+				"aria-describedby": describedBy,
+				children: /* @__PURE__ */ jsx(LabelView, {
+					optional: false,
+					children: stringFormatter.format("dateRange.startTime")
+				})
+			}),
+			/* @__PURE__ */ jsxs(DatePickerView, {
+				value: fields.endDate,
+				onChange: (date) => update({ endDate: toListCalendarDate(date) }),
+				minValue,
+				maxValue,
+				"aria-describedby": describedBy,
+				isDateUnavailable: options?.isDateUnavailable,
+				children: [/* @__PURE__ */ jsx(LabelView, {
+					optional: false,
+					children: stringFormatter.format("dateRange.endDate")
+				}), /* @__PURE__ */ jsx(FieldErrorView, {})]
+			}),
+			/* @__PURE__ */ jsx(TimeFieldView, {
+				value: fields.endTime,
+				onChange: (time) => update({ endTime: toListTime(time) }),
+				"aria-describedby": describedBy,
+				children: /* @__PURE__ */ jsx(LabelView, {
+					optional: false,
+					children: stringFormatter.format("dateRange.endTime")
+				})
+			}),
+			hasRangeError && /* @__PURE__ */ jsx(FieldErrorView, {
+				id: rangeErrorId,
+				className: DateTimeRangeFields_module_default.rangeError,
+				children: stringFormatter.format("dateRange.endBeforeStart")
+			})
+		]
+	});
+};
+//#endregion
+export { DateTimeRangeFields, DateTimeRangeFields as default };
+
+//# sourceMappingURL=DateTimeRangeFields.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeRangeFields.mjs","names":["locales","styles"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/DateTimeRangeFields/DateTimeRangeFields.tsx"],"sourcesContent":["import { type FC, useId, useState } from \"react\";\nimport {\n  getListDateTimeRangeUpdate,\n  isListDateTimeRangeEndBeforeStart,\n  listDateTimeRangeFieldsFromValue,\n  toListCalendarDate,\n  toListTime,\n  type ListDateTimeRangeFields,\n} from \"@mittwald/flow-components-base\";\nimport clsx from \"clsx\";\nimport DatePickerView from \"@/views/DatePickerView\";\nimport TimeFieldView from \"@/views/TimeFieldView\";\nimport LabelView from \"@/views/LabelView\";\nimport FieldErrorView from \"@/views/FieldErrorView\";\nimport DivView from \"@/views/DivView\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport type { AnyDateRangeFilter } from \"@/components/List/model/filter/types\";\nimport styles from \"./DateTimeRangeFields.module.scss\";\n\ninterface Props {\n  filter: AnyDateRangeFilter;\n  className?: string;\n}\n\nexport const DateTimeRangeFields: FC<Props> = (props) => {\n  const { filter, className } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const value = filter.getValue();\n  const [appliedValue, setAppliedValue] = useState(value);\n  const [fields, setFields] = useState(() =>\n    listDateTimeRangeFieldsFromValue(value),\n  );\n\n  if (value !== appliedValue) {\n    setAppliedValue(value);\n    setFields(listDateTimeRangeFieldsFromValue(value));\n  }\n\n  const options = filter.dateTimeRangeOptions;\n  const minValue = toListCalendarDate(options?.minValue);\n  const maxValue = toListCalendarDate(options?.maxValue);\n\n  const update = (change: Partial<ListDateTimeRangeFields>) => {\n    const next = { ...fields, ...change };\n    setFields(next);\n\n    const newValue = getListDateTimeRangeUpdate(next, appliedValue, options);\n    if (newValue === undefined) {\n      return;\n    }\n\n    setAppliedValue(newValue);\n\n    if (newValue) {\n      filter.setValue(newValue);\n    } else {\n      filter.clear();\n    }\n  };\n\n  const rangeErrorId = useId();\n  const hasRangeError = isListDateTimeRangeEndBeforeStart(fields);\n  const describedBy = hasRangeError ? rangeErrorId : undefined;\n\n  return (\n    <DivView className={clsx(styles.dateTimeRangeFields, className)}>\n      <DatePickerView\n        value={fields.startDate}\n        onChange={(date) => update({ startDate: toListCalendarDate(date) })}\n        minValue={minValue}\n        maxValue={maxValue}\n        aria-describedby={describedBy}\n        isDateUnavailable={options?.isDateUnavailable}\n      >\n        <LabelView optional={false}>\n          {stringFormatter.format(\"dateRange.startDate\")}\n        </LabelView>\n        <FieldErrorView />\n      </DatePickerView>\n      <TimeFieldView\n        value={fields.startTime}\n        onChange={(time) => update({ startTime: toListTime(time) })}\n        aria-describedby={describedBy}\n      >\n        <LabelView optional={false}>\n          {stringFormatter.format(\"dateRange.startTime\")}\n        </LabelView>\n      </TimeFieldView>\n      <DatePickerView\n        value={fields.endDate}\n        onChange={(date) => update({ endDate: toListCalendarDate(date) })}\n        minValue={minValue}\n        maxValue={maxValue}\n        aria-describedby={describedBy}\n        isDateUnavailable={options?.isDateUnavailable}\n      >\n        <LabelView optional={false}>\n          {stringFormatter.format(\"dateRange.endDate\")}\n        </LabelView>\n        <FieldErrorView />\n      </DatePickerView>\n      <TimeFieldView\n        value={fields.endTime}\n        onChange={(time) => update({ endTime: toListTime(time) })}\n        aria-describedby={describedBy}\n      >\n        <LabelView optional={false}>\n          {stringFormatter.format(\"dateRange.endTime\")}\n        </LabelView>\n      </TimeFieldView>\n      {hasRangeError && (\n        <FieldErrorView id={rangeErrorId} className={styles.rangeError}>\n          {stringFormatter.format(\"dateRange.endBeforeStart\")}\n        </FieldErrorView>\n      )}\n    </DivView>\n  );\n};\n\nexport default DateTimeRangeFields;\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,IAAa,uBAAkC,UAAU;CACvD,MAAM,EAAE,QAAQ,cAAc;CAE9B,MAAM,kBAAkB,4BAA4BA,kBAAS,MAAM;CAEnE,MAAM,QAAQ,OAAO,SAAS;CAC9B,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CACtD,MAAM,CAAC,QAAQ,aAAa,eAC1B,iCAAiC,KAAK,CACxC;CAEA,IAAI,UAAU,cAAc;EAC1B,gBAAgB,KAAK;EACrB,UAAU,iCAAiC,KAAK,CAAC;CACnD;CAEA,MAAM,UAAU,OAAO;CACvB,MAAM,WAAW,mBAAmB,SAAS,QAAQ;CACrD,MAAM,WAAW,mBAAmB,SAAS,QAAQ;CAErD,MAAM,UAAU,WAA6C;EAC3D,MAAM,OAAO;GAAE,GAAG;GAAQ,GAAG;EAAO;EACpC,UAAU,IAAI;EAEd,MAAM,WAAW,2BAA2B,MAAM,cAAc,OAAO;EACvE,IAAI,aAAa,KAAA,GACf;EAGF,gBAAgB,QAAQ;EAExB,IAAI,UACF,OAAO,SAAS,QAAQ;OAExB,OAAO,MAAM;CAEjB;CAEA,MAAM,eAAe,MAAM;CAC3B,MAAM,gBAAgB,kCAAkC,MAAM;CAC9D,MAAM,cAAc,gBAAgB,eAAe,KAAA;CAEnD,OACE,qBAAC,SAAD;EAAS,WAAW,KAAKC,mCAAO,qBAAqB,SAAS;EAA9D,UAAA;GACE,qBAAC,gBAAD;IACE,OAAO,OAAO;IACd,WAAW,SAAS,OAAO,EAAE,WAAW,mBAAmB,IAAI,EAAE,CAAC;IACxD;IACA;IACV,oBAAkB;IAClB,mBAAmB,SAAS;IAN9B,UAAA,CAQE,oBAAC,WAAD;KAAW,UAAU;KAClB,UAAA,gBAAgB,OAAO,qBAAqB;IACpC,CAAA,GACX,oBAAC,gBAAD,CAAiB,CAAA,CACH;;GAChB,oBAAC,eAAD;IACE,OAAO,OAAO;IACd,WAAW,SAAS,OAAO,EAAE,WAAW,WAAW,IAAI,EAAE,CAAC;IAC1D,oBAAkB;IAElB,UAAA,oBAAC,WAAD;KAAW,UAAU;KAClB,UAAA,gBAAgB,OAAO,qBAAqB;IACpC,CAAA;GACE,CAAA;GACf,qBAAC,gBAAD;IACE,OAAO,OAAO;IACd,WAAW,SAAS,OAAO,EAAE,SAAS,mBAAmB,IAAI,EAAE,CAAC;IACtD;IACA;IACV,oBAAkB;IAClB,mBAAmB,SAAS;IAN9B,UAAA,CAQE,oBAAC,WAAD;KAAW,UAAU;KAClB,UAAA,gBAAgB,OAAO,mBAAmB;IAClC,CAAA,GACX,oBAAC,gBAAD,CAAiB,CAAA,CACH;;GAChB,oBAAC,eAAD;IACE,OAAO,OAAO;IACd,WAAW,SAAS,OAAO,EAAE,SAAS,WAAW,IAAI,EAAE,CAAC;IACxD,oBAAkB;IAElB,UAAA,oBAAC,WAAD;KAAW,UAAU;KAClB,UAAA,gBAAgB,OAAO,mBAAmB;IAClC,CAAA;GACE,CAAA;GACd,iBACC,oBAAC,gBAAD;IAAgB,IAAI;IAAc,WAAWA,mCAAO;IACjD,UAAA,gBAAgB,OAAO,0BAA0B;GACpC,CAAA;EAEX;;AAEb"}

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

@@ -0,0 +1,13 @@
+"use client"
+/* */
+//#region src/components/List/components/Header/components/DateTimeRangeFields/DateTimeRangeFields.module.scss
+var dateTimeRangeFields = "flow--list--header--date-time-range-fields";
+var rangeError = "flow--list--header--date-time-range-fields--range-error";
+var DateTimeRangeFields_module_default = {
+	dateTimeRangeFields,
+	rangeError
+};
+//#endregion
+export { dateTimeRangeFields, DateTimeRangeFields_module_default as default, rangeError };
+
+//# sourceMappingURL=DateTimeRangeFields.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeRangeFields.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/DateTimeRangeFields/DateTimeRangeFields.module.scss"],"sourcesContent":[".dateTimeRangeFields {\n  display: grid;\n\n  /* Fixed widths that fit the widest value or placeholder (en-US date, 24h\n     time), so typing does not resize the popover */\n  grid-template-columns: minmax(0, 9.25rem) minmax(0, 6.25rem);\n  gap: var(--column-layout--gap--m);\n\n  /* An error wraps instead of widening the popover */\n  :global(.flow--field-error) {\n    contain: inline-size;\n  }\n}\n\n.rangeError {\n  grid-column: 1 / -1;\n}\n"],"mappings":""}

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

@@ -5,12 +5,14 @@ import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/
 import { useOverlayController } from "../../../../../../lib/controller/overlay/useOverlayController.mjs";
 import { Popover } from "../../../../../Popover/Popover.mjs";
 import ButtonView from "../../../../../../views/ButtonView.mjs";
+import { isDateRangeValue } from "../../../../../Calendar/components/RangeCalendar/types.mjs";
 import { PopoverTrigger } from "../../../../../Popover/components/PopoverTrigger/PopoverTrigger.mjs";
-import __locale_default from "../../../../../../../../../_virtual/_17.locale.mjs";
+import __locale_default from "../../../../../../../../../_virtual/_18.locale.mjs";
 import TextView from "../../../../../../views/TextView.mjs";
 import Header_module_default from "../../Header.module.mjs";
 import FilterContextMenus_module_default from "./FilterContextMenus.module.mjs";
 import RangeCalendarView from "../../../../../../views/RangeCalendarView.mjs";
+import { DateTimeRangeFields } from "../DateTimeRangeFields/DateTimeRangeFields.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/List/components/Header/components/FilterContextMenu/DateRangeFilterPopover.tsx
 var DateRangeFilterPopover = (props) => {
@@ -18,6 +20,19 @@ var DateRangeFilterPopover = (props) => {
 	const { name, property } = filter;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "List");
 	const controller = useOverlayController("Popover");
+	const value = filter.getValue();
+	const fields = filter.granularity === "minute" ? /* @__PURE__ */ jsx(DateTimeRangeFields, {
+		filter,
+		className: FilterContextMenus_module_default.dateTimeRange
+	}) : /* @__PURE__ */ jsx(RangeCalendarView, {
+		...filter.rangeCalendarProps,
+		value: isDateRangeValue(value) ? value : null,
+		onChange: (range) => {
+			filter.setValue(range);
+			controller.close();
+		},
+		className: FilterContextMenus_module_default.calendar
+	});
 	return /* @__PURE__ */ jsxs(PopoverTrigger, {
 		controller,
 		children: [/* @__PURE__ */ jsxs(ButtonView, {
@@ -30,15 +45,7 @@ var DateRangeFilterPopover = (props) => {
 			placement: "bottom end",
 			isDialogContent: true,
 			"aria-label": stringFormatter.format("dateRange"),
-			children: /* @__PURE__ */ jsx(RangeCalendarView, {
-				...filter.dateRangeOptions,
-				value: filter.getValue(),
-				onChange: (range) => {
-					filter.setValue(range);
-					controller.close();
-				},
-				className: FilterContextMenus_module_default.calendar
-			})
+			children: fields
 		})]
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangeFilterPopover.mjs","names":["locales","headerStyles","styles"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/FilterContextMenu/DateRangeFilterPopover.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport ButtonView from \"@/views/ButtonView\";\nimport headerStyles from \"@/components/List/components/Header/Header.module.scss\";\nimport TextView from \"@/views/TextView\";\nimport { IconFilter } from \"@/components/Icon/components/icons\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { Popover, PopoverTrigger } from \"@/components/Popover\";\nimport styles from \"./FilterContextMenus.module.scss\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport RangeCalendarView from \"@/views/RangeCalendarView\";\nimport type { AnyDateRangeFilter } from \"@/components/List/model/filter/types\";\n\ninterface Props {\n  filter: AnyDateRangeFilter;\n  isDisabled?: boolean;\n}\n\nexport const DateRangeFilterPopover: FC<Props> = (props) => {\n  const { filter, isDisabled } = props;\n\n  const { name, property } = filter;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const controller = useOverlayController(\"Popover\");\n\n  return (\n    <PopoverTrigger controller={controller}>\n      <ButtonView\n        className={headerStyles.hideOnMobile}\n        variant=\"outline\"\n        color=\"secondary\"\n        isDisabled={isDisabled}\n      >\n        <TextView>{name ?? property}</TextView>\n        <IconFilter />\n      </ButtonView>\n      <Popover\n        placement=\"bottom end\"\n        isDialogContent\n        aria-label={stringFormatter.format(\"dateRange\")}\n      >\n        <RangeCalendarView\n          {...filter.dateRangeOptions}\n          value={filter.getValue()}\n          onChange={(range) => {\n            filter.setValue(range);\n            controller.close();\n          }}\n          className={styles.calendar}\n        />\n      </Popover>\n    </PopoverTrigger>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,IAAa,0BAAqC,UAAU;CAC1D,MAAM,EAAE,QAAQ,eAAe;CAE/B,MAAM,EAAE,MAAM,aAAa;CAE3B,MAAM,kBAAkB,4BAA4BA,kBAAS,MAAM;CAEnE,MAAM,aAAa,qBAAqB,SAAS;CAEjD,OACE,qBAAC,gBAAD;EAA4B;EAA5B,UAAA,CACE,qBAAC,YAAD;GACE,WAAWC,sBAAa;GACxB,SAAQ;GACR,OAAM;GACM;GAJd,UAAA,CAME,oBAAC,UAAD,EAAA,UAAW,QAAQ,SAAmB,CAAA,GACtC,oBAAC,YAAD,CAAa,CAAA,CACH;EACZ,CAAA,GAAA,oBAAC,SAAD;GACE,WAAU;GACV,iBAAA;GACA,cAAY,gBAAgB,OAAO,WAAW;GAE9C,UAAA,oBAAC,mBAAD;IACE,GAAI,OAAO;IACX,OAAO,OAAO,SAAS;IACvB,WAAW,UAAU;KACnB,OAAO,SAAS,KAAK;KACrB,WAAW,MAAM;IACnB;IACA,WAAWC,kCAAO;GACnB,CAAA;EACM,CAAA,CACK;;AAEpB"}
+{"version":3,"file":"DateRangeFilterPopover.mjs","names":["locales","styles","headerStyles"],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/FilterContextMenu/DateRangeFilterPopover.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport ButtonView from \"@/views/ButtonView\";\nimport headerStyles from \"@/components/List/components/Header/Header.module.scss\";\nimport TextView from \"@/views/TextView\";\nimport { IconFilter } from \"@/components/Icon/components/icons\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { Popover, PopoverTrigger } from \"@/components/Popover\";\nimport styles from \"./FilterContextMenus.module.scss\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport RangeCalendarView from \"@/views/RangeCalendarView\";\nimport type { AnyDateRangeFilter } from \"@/components/List/model/filter/types\";\nimport { isDateRangeValue } from \"@/components/Calendar\";\nimport { DateTimeRangeFields } from \"@/components/List/components/Header/components/DateTimeRangeFields/DateTimeRangeFields\";\n\ninterface Props {\n  filter: AnyDateRangeFilter;\n  isDisabled?: boolean;\n}\n\nexport const DateRangeFilterPopover: FC<Props> = (props) => {\n  const { filter, isDisabled } = props;\n\n  const { name, property } = filter;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  const controller = useOverlayController(\"Popover\");\n\n  const value = filter.getValue();\n\n  const fields =\n    filter.granularity === \"minute\" ? (\n      <DateTimeRangeFields filter={filter} className={styles.dateTimeRange} />\n    ) : (\n      <RangeCalendarView\n        {...filter.rangeCalendarProps}\n        value={isDateRangeValue(value) ? value : null}\n        onChange={(range) => {\n          filter.setValue(range);\n          controller.close();\n        }}\n        className={styles.calendar}\n      />\n    );\n\n  return (\n    <PopoverTrigger controller={controller}>\n      <ButtonView\n        className={headerStyles.hideOnMobile}\n        variant=\"outline\"\n        color=\"secondary\"\n        isDisabled={isDisabled}\n      >\n        <TextView>{name ?? property}</TextView>\n        <IconFilter />\n      </ButtonView>\n      <Popover\n        placement=\"bottom end\"\n        isDialogContent\n        aria-label={stringFormatter.format(\"dateRange\")}\n      >\n        {fields}\n      </Popover>\n    </PopoverTrigger>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,IAAa,0BAAqC,UAAU;CAC1D,MAAM,EAAE,QAAQ,eAAe;CAE/B,MAAM,EAAE,MAAM,aAAa;CAE3B,MAAM,kBAAkB,4BAA4BA,kBAAS,MAAM;CAEnE,MAAM,aAAa,qBAAqB,SAAS;CAEjD,MAAM,QAAQ,OAAO,SAAS;CAE9B,MAAM,SACJ,OAAO,gBAAgB,WACrB,oBAAC,qBAAD;EAA6B;EAAQ,WAAWC,kCAAO;CAAgB,CAAA,IAEvE,oBAAC,mBAAD;EACE,GAAI,OAAO;EACX,OAAO,iBAAiB,KAAK,IAAI,QAAQ;EACzC,WAAW,UAAU;GACnB,OAAO,SAAS,KAAK;GACrB,WAAW,MAAM;EACnB;EACA,WAAWA,kCAAO;CACnB,CAAA;CAGL,OACE,qBAAC,gBAAD;EAA4B;EAA5B,UAAA,CACE,qBAAC,YAAD;GACE,WAAWC,sBAAa;GACxB,SAAQ;GACR,OAAM;GACM;GAJd,UAAA,CAME,oBAAC,UAAD,EAAA,UAAW,QAAQ,SAAmB,CAAA,GACtC,oBAAC,YAAD,CAAa,CAAA,CACH;EACZ,CAAA,GAAA,oBAAC,SAAD;GACE,WAAU;GACV,iBAAA;GACA,cAAY,gBAAgB,OAAO,WAAW;GAE7C,UAAA;EACM,CAAA,CACK;;AAEpB"}

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

@@ -2,8 +2,12 @@
 /* */
 //#region src/components/List/components/Header/components/FilterContextMenu/FilterContextMenus.module.scss
 var calendar = "flow--list--header--filter-context-menu--calendar";
-var FilterContextMenus_module_default = { calendar };
+var dateTimeRange = "flow--list--header--filter-context-menu--date-time-range";
+var FilterContextMenus_module_default = {
+	calendar,
+	dateTimeRange
+};
 //#endregion
-export { calendar, FilterContextMenus_module_default as default };
+export { calendar, dateTimeRange, FilterContextMenus_module_default as default };
 
 //# sourceMappingURL=FilterContextMenus.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilterContextMenus.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/FilterContextMenu/FilterContextMenus.module.scss"],"sourcesContent":[".calendar {\n  padding: var(--popover--padding--m);\n}\n"],"mappings":""}
+{"version":3,"file":"FilterContextMenus.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/FilterContextMenu/FilterContextMenus.module.scss"],"sourcesContent":[".calendar {\n  padding: var(--popover--padding--m);\n}\n\n.dateTimeRange {\n  padding: var(--popover--padding--m);\n}\n"],"mappings":""}

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

@@ -5,7 +5,7 @@ import { IconDescending } from "../../../../../Icon/components/icons/IconDescend
 import { IconSorting } from "../../../../../Icon/components/icons/IconSorting.mjs";
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import ButtonView from "../../../../../../views/ButtonView.mjs";
-import __locale_default from "../../../../../../../../../_virtual/_17.locale.mjs";
+import __locale_default from "../../../../../../../../../_virtual/_18.locale.mjs";
 import ContextMenuTriggerView from "../../../../../../views/ContextMenuTriggerView.mjs";
 import ContextMenuView from "../../../../../../views/ContextMenuView.mjs";
 import TextView from "../../../../../../views/TextView.mjs";

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

@@ -3,7 +3,7 @@
 import { IconView } from "../../../../../Icon/components/icons/IconView.mjs";
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import ButtonView from "../../../../../../views/ButtonView.mjs";
-import __locale_default from "../../../../../../../../../_virtual/_17.locale.mjs";
+import __locale_default from "../../../../../../../../../_virtual/_18.locale.mjs";
 import ContextMenuTriggerView from "../../../../../../views/ContextMenuTriggerView.mjs";
 import ContextMenuView from "../../../../../../views/ContextMenuView.mjs";
 import TextView from "../../../../../../views/TextView.mjs";

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

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../../../../../_virtual/_17.locale.mjs";
+import __locale_default from "../../../../../../../../../_virtual/_18.locale.mjs";
 import { useList } from "../../../../hooks/useList.mjs";
 import MenuItemView from "../../../../../../views/MenuItemView.mjs";
 import "react";