@mittwald/flow-react-components 1.6.0-next.24 → 1.6.0-next.26

package/dist/js/_virtual/_18.locale.mjs

@@ -4,6 +4,13 @@
 var __locale_default = {
 	"de-DE": {
 		"dateRange": "Zeitraum",
+		"dateRange.endBeforeStart": "Das Ende darf nicht vor dem Start liegen.",
+		"dateRange.endDate": "Enddatum",
+		"dateRange.endTime": "Endzeit",
+		"dateRange.from": "ab {date}",
+		"dateRange.startDate": "Startdatum",
+		"dateRange.startTime": "Startzeit",
+		"dateRange.until": "bis {date}",
 		"filters": "Filter",
 		"filters.all": "Alle Filter",
 		"filters.clear": "Filter entfernen",
@@ -35,6 +42,13 @@ var __locale_default = {
 	},
 	"en-US": {
 		"dateRange": "Date range",
+		"dateRange.endBeforeStart": "The end must not be before the start.",
+		"dateRange.endDate": "End date",
+		"dateRange.endTime": "End time",
+		"dateRange.from": "from {date}",
+		"dateRange.startDate": "Start date",
+		"dateRange.startTime": "Start time",
+		"dateRange.until": "until {date}",
 		"filters": "Filters",
 		"filters.all": "All filters",
 		"filters.clear": "Clear filters",

package/dist/js/default.mjs

@@ -278,6 +278,7 @@ import { LightBoxGalleryItem } from "./packages/components/src/components/LightB
 import { OverlayContent } from "./packages/components/src/components/Overlay/components/OverlayContent.mjs";
 import { Overlay } from "./packages/components/src/components/Overlay/Overlay.mjs";
 import { LightBox } from "./packages/components/src/components/LightBox/LightBox.mjs";
+import { resolveDateRangeFilterValue } from "./packages/components/src/components/List/model/filter/resolveDateRangeFilterValue.mjs";
 import { SortingFunctions } from "./packages/components/src/components/List/model/sorting/SortingFunctions.mjs";
 import { GridList } from "./packages/components/src/components/List/components/Items/views/GridList/GridList.mjs";
 import { GridListItem } from "./packages/components/src/components/List/components/Items/views/GridListItem/GridListItem.mjs";
@@ -290,6 +291,7 @@ import { useList } from "./packages/components/src/components/List/hooks/useList
 import { useListMetadata } from "./packages/components/src/components/List/hooks/useListMetadata.mjs";
 import { Render } from "./packages/components/src/lib/react/components/Render/Render.mjs";
 import { SearchField } from "./packages/components/src/components/SearchField/SearchField.mjs";
+import { TimeField } from "./packages/components/src/components/TimeField/TimeField.mjs";
 import { Section } from "./packages/components/src/components/Section/Section.mjs";
 import { RadioGroup } from "./packages/components/src/components/RadioGroup/RadioGroup.mjs";
 import { Radio } from "./packages/components/src/components/RadioGroup/components/Radio/Radio.mjs";
@@ -337,7 +339,6 @@ import { Tabs } from "./packages/components/src/components/Tabs/Tabs.mjs";
 import { TabTitle } from "./packages/components/src/components/Tabs/components/TabTitle/TabTitle.mjs";
 import { Tab } from "./packages/components/src/components/Tabs/components/Tab/Tab.mjs";
 import { TextField } from "./packages/components/src/components/TextField/TextField.mjs";
-import { TimeField } from "./packages/components/src/components/TimeField/TimeField.mjs";
 import { Truncate } from "./packages/components/src/components/Truncate/Truncate.mjs";
 import { TunnelEntry } from "./packages/components/src/components/TunnelEntry/TunnelEntry.mjs";
-export { AbortActionError, AccentBox, Accordion, AccordionGroup, Action, ActionBatch, ActionGroup, Activity, Alert, AlertBadge, AlertIcon, AlertText, Align, Area, AreaDot, Autocomplete, Avatar, AvatarStack, Badge, Bar, BigNumber, Breadcrumb, BrowserOnly, Button, CartesianChart, CartesianGrid, ChartGrid, ChartLegend, ChartTooltip, Chat, Checkbox, CheckboxButton, CheckboxGroup, ClearPropsContext, CoachMark, CodeBlock, CodeEditor, Color, ColumnLayout, Combine, ComboBox, ComponentDefaultsContext, ComponentDefaultsProvider, ComponentPropsContextProvider, Content, ContextMenu, ContextMenuContent, ContextMenuSection, ContextMenuTrigger, ContextualHelp, ContextualHelpTrigger, CopyButton, CounterBadge, CountryOptions, DatePicker, DateRangePicker, DeprecationWarningContext, DeprecationWarningProvider, DialogTrigger, Div, DonutChart, EmptyView, EmptyViewContainer, FieldDescription, FieldError, FileCard, FileCardList, FileDropZone, FileField, Flex, GridList, GridListItem, Header, HeaderNavigation, Heading, Icon, IconAI, IconAIHosting, IconAnalytics, IconApp, IconAscending, IconAttachment, IconAutoresponder, IconBackLink, IconBackup, IconBold, IconCamera, IconCertificate, IconChangelog, IconCheck, IconCheckboxChecked, IconCheckboxEmpty, IconCheckboxIndeterminate, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClose, IconCode, IconContainer, IconContextMenu, IconContextMenuVertical, IconContract, IconContractPartner, IconContributor, IconCopy, IconCronjob, IconCustomer, IconDanger, IconDashboard, IconDatabase, IconDate, IconDelete, IconDeliveryBox, IconDescending, IconDesktop, IconDirectory, IconDnsSubZone, IconDnsZone, IconDomain, IconDownload, IconEdit, IconEmail, IconEmailArchive, IconExtension, IconExternalLink, IconFailed, IconFeedback, IconFile, IconFilter, IconForwardAddress, IconForwardLink, IconHide, IconHome, IconImage, IconInfo, IconInvite, IconInvoice, IconItalic, IconKnowledgeHint, IconLanguage, IconLeadFyndr, IconLink, IconLock, IconLockOpen, IconLogout, IconMainUser, IconMarketplace, IconMaximize, IconMember, IconMenu, IconMinimize, IconMinus, IconMittwald, IconMobile, IconMonitoring, IconMove, IconNewsletter, IconNotification, IconNumber, IconOrder, IconOrderedList, IconPassword, IconPath, IconPause, IconPayment, IconPending, IconPicture, IconPlus, IconProject, IconQuote, IconRadioOff, IconRadioOn, IconRedo, IconRefresh, IconRegistry, IconSave, IconSearch, IconSecurity, IconSend, IconServer, IconSetProvider, IconSettings, IconShare, IconShow, IconSorting, IconSsh, IconSshKey, IconSshSftp, IconStack, IconStar, IconStarFilled, IconStart, IconStrikeThrough, IconSubdomain, IconSucceeded, IconSuccess, IconSupport, IconTerminate, IconTicket, IconTime, IconUnavailable, IconUndo, IconUnorderedList, IconUpload, IconUser, IconVhost, IconView, IconVolume, IconWarning, IllustratedMessage, Image, ImageCropper, Initials, InlineCode, IntlProvider, Kbd, Label, LabeledValue, LayoutCard, Legend, LegendItem, LightBox, LightBoxGallery, LightBoxGalleryItem, LightBoxTrigger, Line, Link, List, ListFilter, ListItem, ListItemView, ListItemViewContent, ListLoaderAsync, ListSorting, ListStaticData, ListSummary, LoadingSpinner, Markdown, MarkdownEditor, MenuItem, MenuTrigger, Message, MessageSeparator, MessageThread, Modal, ModalTrigger, Navigation, NavigationGroup, Notification, NotificationController, NotificationProvider, NumberField, Option, Overlay, OverlayContent, OverlayController, OverlayTrigger, PasswordCreationField, Popover, PopoverContent, PopoverTrigger, ProgressBar, PropsContextProvider, Radio, RadioButton, RadioGroup, RangeCalendar, Rating, RatingSegment, Render, RouterProvider, SearchField, Section, Segment, SegmentedControl, Select, Separator, SettingsProvider, Skeleton, SkeletonMode, SkeletonText, Slider, SortingFunctions, SuspenseTrigger, Switch, Tab, TabNavigation, TabTitle, Table, TableBody, TableCell, TableColumn, TableFooterRow, TableHeader, TableRow, Tabs, Text, TextArea, TextField, ThemedHtml, TimeField, Tooltip, TooltipTrigger, TranslationProvider, Truncate, TunnelEntry, TypedArea, TypedBar, TypedChartGrid, TypedChartLegend, TypedChartTooltip, TypedLine, TypedList, TypedListFilter, TypedListItem, TypedListLoaderAsync, TypedListSorting, TypedListStaticData, TypedXAxis, TypedYAxis, Wrap, XAxis, YAxis, abortAction, builtInComponentDefaults, dynamic, eventHandlerContext, flags, getRemoteEvent, getResolvedTheme, getTheme, iconCategories, isDateRangeValue, overlayTriggersTunneledTo, propsContext, setTheme, sortByDachFirst, themeHtmlAttribute, typedCartesianChart, typedList, useAriaAnnounceSuspense, useComponentDefaults, useControlledRemoteValueProps, useDesignTokens, useIsMounted, useLanguage, useList, useListMetadata, useLocalizedStringFormatter, useModalController, useNotificationController, useOnChange, useOverlayController, useProps, useTheme as useStoredTheme, useResolvedTheme as useTheme, useTranslationProvider, useWarnDeprecation };
+export { AbortActionError, AccentBox, Accordion, AccordionGroup, Action, ActionBatch, ActionGroup, Activity, Alert, AlertBadge, AlertIcon, AlertText, Align, Area, AreaDot, Autocomplete, Avatar, AvatarStack, Badge, Bar, BigNumber, Breadcrumb, BrowserOnly, Button, CartesianChart, CartesianGrid, ChartGrid, ChartLegend, ChartTooltip, Chat, Checkbox, CheckboxButton, CheckboxGroup, ClearPropsContext, CoachMark, CodeBlock, CodeEditor, Color, ColumnLayout, Combine, ComboBox, ComponentDefaultsContext, ComponentDefaultsProvider, ComponentPropsContextProvider, Content, ContextMenu, ContextMenuContent, ContextMenuSection, ContextMenuTrigger, ContextualHelp, ContextualHelpTrigger, CopyButton, CounterBadge, CountryOptions, DatePicker, DateRangePicker, DeprecationWarningContext, DeprecationWarningProvider, DialogTrigger, Div, DonutChart, EmptyView, EmptyViewContainer, FieldDescription, FieldError, FileCard, FileCardList, FileDropZone, FileField, Flex, GridList, GridListItem, Header, HeaderNavigation, Heading, Icon, IconAI, IconAIHosting, IconAnalytics, IconApp, IconAscending, IconAttachment, IconAutoresponder, IconBackLink, IconBackup, IconBold, IconCamera, IconCertificate, IconChangelog, IconCheck, IconCheckboxChecked, IconCheckboxEmpty, IconCheckboxIndeterminate, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClose, IconCode, IconContainer, IconContextMenu, IconContextMenuVertical, IconContract, IconContractPartner, IconContributor, IconCopy, IconCronjob, IconCustomer, IconDanger, IconDashboard, IconDatabase, IconDate, IconDelete, IconDeliveryBox, IconDescending, IconDesktop, IconDirectory, IconDnsSubZone, IconDnsZone, IconDomain, IconDownload, IconEdit, IconEmail, IconEmailArchive, IconExtension, IconExternalLink, IconFailed, IconFeedback, IconFile, IconFilter, IconForwardAddress, IconForwardLink, IconHide, IconHome, IconImage, IconInfo, IconInvite, IconInvoice, IconItalic, IconKnowledgeHint, IconLanguage, IconLeadFyndr, IconLink, IconLock, IconLockOpen, IconLogout, IconMainUser, IconMarketplace, IconMaximize, IconMember, IconMenu, IconMinimize, IconMinus, IconMittwald, IconMobile, IconMonitoring, IconMove, IconNewsletter, IconNotification, IconNumber, IconOrder, IconOrderedList, IconPassword, IconPath, IconPause, IconPayment, IconPending, IconPicture, IconPlus, IconProject, IconQuote, IconRadioOff, IconRadioOn, IconRedo, IconRefresh, IconRegistry, IconSave, IconSearch, IconSecurity, IconSend, IconServer, IconSetProvider, IconSettings, IconShare, IconShow, IconSorting, IconSsh, IconSshKey, IconSshSftp, IconStack, IconStar, IconStarFilled, IconStart, IconStrikeThrough, IconSubdomain, IconSucceeded, IconSuccess, IconSupport, IconTerminate, IconTicket, IconTime, IconUnavailable, IconUndo, IconUnorderedList, IconUpload, IconUser, IconVhost, IconView, IconVolume, IconWarning, IllustratedMessage, Image, ImageCropper, Initials, InlineCode, IntlProvider, Kbd, Label, LabeledValue, LayoutCard, Legend, LegendItem, LightBox, LightBoxGallery, LightBoxGalleryItem, LightBoxTrigger, Line, Link, List, ListFilter, ListItem, ListItemView, ListItemViewContent, ListLoaderAsync, ListSorting, ListStaticData, ListSummary, LoadingSpinner, Markdown, MarkdownEditor, MenuItem, MenuTrigger, Message, MessageSeparator, MessageThread, Modal, ModalTrigger, Navigation, NavigationGroup, Notification, NotificationController, NotificationProvider, NumberField, Option, Overlay, OverlayContent, OverlayController, OverlayTrigger, PasswordCreationField, Popover, PopoverContent, PopoverTrigger, ProgressBar, PropsContextProvider, Radio, RadioButton, RadioGroup, RangeCalendar, Rating, RatingSegment, Render, RouterProvider, SearchField, Section, Segment, SegmentedControl, Select, Separator, SettingsProvider, Skeleton, SkeletonMode, SkeletonText, Slider, SortingFunctions, SuspenseTrigger, Switch, Tab, TabNavigation, TabTitle, Table, TableBody, TableCell, TableColumn, TableFooterRow, TableHeader, TableRow, Tabs, Text, TextArea, TextField, ThemedHtml, TimeField, Tooltip, TooltipTrigger, TranslationProvider, Truncate, TunnelEntry, TypedArea, TypedBar, TypedChartGrid, TypedChartLegend, TypedChartTooltip, TypedLine, TypedList, TypedListFilter, TypedListItem, TypedListLoaderAsync, TypedListSorting, TypedListStaticData, TypedXAxis, TypedYAxis, Wrap, XAxis, YAxis, abortAction, builtInComponentDefaults, dynamic, eventHandlerContext, flags, getRemoteEvent, getResolvedTheme, getTheme, iconCategories, isDateRangeValue, overlayTriggersTunneledTo, propsContext, resolveDateRangeFilterValue, setTheme, sortByDachFirst, themeHtmlAttribute, typedCartesianChart, typedList, useAriaAnnounceSuspense, useComponentDefaults, useControlledRemoteValueProps, useDesignTokens, useIsMounted, useLanguage, useList, useListMetadata, useLocalizedStringFormatter, useModalController, useNotificationController, useOnChange, useOverlayController, useProps, useTheme as useStoredTheme, useResolvedTheme as useTheme, useTranslationProvider, useWarnDeprecation };

package/dist/js/flr-universal.mjs

@@ -153,6 +153,7 @@ import { PopoverTrigger } from "./packages/components/src/components/Popover/com
 import { IntlProvider } from "./packages/components/src/components/IntlProvider/IntlProvider.mjs";
 import { LightBoxTrigger } from "./packages/components/src/components/LightBox/components/LightBoxTrigger/LightBoxTrigger.mjs";
 import { LightBox } from "./packages/components/src/components/LightBox/LightBox.mjs";
+import { resolveDateRangeFilterValue } from "./packages/components/src/components/List/model/filter/resolveDateRangeFilterValue.mjs";
 import { ListItemView } from "./packages/components/src/components/List/components/ListItemView/ListItemView.mjs";
 import { ModalTrigger } from "./packages/components/src/components/Modal/components/ModalTrigger/ModalTrigger.mjs";
 import { Modal } from "./packages/components/src/components/Modal/Modal.mjs";
@@ -160,4 +161,4 @@ import { SettingsProvider } from "./packages/components/src/components/SettingsP
 import { List } from "./packages/components/src/components/List/List.mjs";
 import { typedList } from "./packages/components/src/components/List/typedList.mjs";
 import { NotificationProvider, useNotificationController } from "./packages/components/src/components/NotificationProvider/NotificationProvider.mjs";
-export { Action, ActionBatch, BrowserOnly, ComponentDefaultsProvider, CountryOptions, DeprecationWarningProvider, IconAI, IconAIHosting, IconAnalytics, IconApp, IconAscending, IconAttachment, IconAutoresponder, IconBackLink, IconBackup, IconBold, IconCamera, IconCertificate, IconChangelog, IconCheck, IconCheckboxChecked, IconCheckboxEmpty, IconCheckboxIndeterminate, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClose, IconCode, IconContainer, IconContextMenu, IconContextMenuVertical, IconContract, IconContractPartner, IconContributor, IconCopy, IconCronjob, IconCustomer, IconDanger, IconDashboard, IconDatabase, IconDate, IconDelete, IconDeliveryBox, IconDescending, IconDesktop, IconDirectory, IconDnsSubZone, IconDnsZone, IconDomain, IconDownload, IconEdit, IconEmail, IconEmailArchive, IconExtension, IconExternalLink, IconFailed, IconFeedback, IconFile, IconFilter, IconForwardAddress, IconForwardLink, IconHide, IconHome, IconImage, IconInfo, IconInvite, IconInvoice, IconItalic, IconKnowledgeHint, IconLanguage, IconLeadFyndr, IconLink, IconLock, IconLockOpen, IconLogout, IconMainUser, IconMarketplace, IconMaximize, IconMember, IconMenu, IconMinimize, IconMinus, IconMittwald, IconMobile, IconMonitoring, IconMove, IconNewsletter, IconNotification, IconNumber, IconOrder, IconOrderedList, IconPassword, IconPath, IconPause, IconPayment, IconPending, IconPicture, IconPlus, IconProject, IconQuote, IconRadioOff, IconRadioOn, IconRedo, IconRefresh, IconRegistry, IconSave, IconSearch, IconSecurity, IconSend, IconServer, IconSettings, IconShare, IconShow, IconSorting, IconSsh, IconSshKey, IconSshSftp, IconStack, IconStar, IconStarFilled, IconStart, IconStrikeThrough, IconSubdomain, IconSucceeded, IconSuccess, IconSupport, IconTerminate, IconTicket, IconTime, IconUnavailable, IconUndo, IconUnorderedList, IconUpload, IconUser, IconVhost, IconView, IconVolume, IconWarning, IntlProvider, LightBox, LightBoxTrigger, List, ListItemView, Modal, ModalTrigger, NotificationProvider, OverlayController, Popover, PopoverTrigger, SettingsProvider, Wrap, typedList, useControlledRemoteValueProps, useIsMounted, useLanguage, useModalController, useNotificationController, useOnChange, useOverlayController, useProps };
+export { Action, ActionBatch, BrowserOnly, ComponentDefaultsProvider, CountryOptions, DeprecationWarningProvider, IconAI, IconAIHosting, IconAnalytics, IconApp, IconAscending, IconAttachment, IconAutoresponder, IconBackLink, IconBackup, IconBold, IconCamera, IconCertificate, IconChangelog, IconCheck, IconCheckboxChecked, IconCheckboxEmpty, IconCheckboxIndeterminate, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClose, IconCode, IconContainer, IconContextMenu, IconContextMenuVertical, IconContract, IconContractPartner, IconContributor, IconCopy, IconCronjob, IconCustomer, IconDanger, IconDashboard, IconDatabase, IconDate, IconDelete, IconDeliveryBox, IconDescending, IconDesktop, IconDirectory, IconDnsSubZone, IconDnsZone, IconDomain, IconDownload, IconEdit, IconEmail, IconEmailArchive, IconExtension, IconExternalLink, IconFailed, IconFeedback, IconFile, IconFilter, IconForwardAddress, IconForwardLink, IconHide, IconHome, IconImage, IconInfo, IconInvite, IconInvoice, IconItalic, IconKnowledgeHint, IconLanguage, IconLeadFyndr, IconLink, IconLock, IconLockOpen, IconLogout, IconMainUser, IconMarketplace, IconMaximize, IconMember, IconMenu, IconMinimize, IconMinus, IconMittwald, IconMobile, IconMonitoring, IconMove, IconNewsletter, IconNotification, IconNumber, IconOrder, IconOrderedList, IconPassword, IconPath, IconPause, IconPayment, IconPending, IconPicture, IconPlus, IconProject, IconQuote, IconRadioOff, IconRadioOn, IconRedo, IconRefresh, IconRegistry, IconSave, IconSearch, IconSecurity, IconSend, IconServer, IconSettings, IconShare, IconShow, IconSorting, IconSsh, IconSshKey, IconSshSftp, IconStack, IconStar, IconStarFilled, IconStart, IconStrikeThrough, IconSubdomain, IconSucceeded, IconSuccess, IconSupport, IconTerminate, IconTicket, IconTime, IconUnavailable, IconUndo, IconUnorderedList, IconUpload, IconUser, IconVhost, IconView, IconVolume, IconWarning, IntlProvider, LightBox, LightBoxTrigger, List, ListItemView, Modal, ModalTrigger, NotificationProvider, OverlayController, Popover, PopoverTrigger, SettingsProvider, Wrap, resolveDateRangeFilterValue, typedList, useControlledRemoteValueProps, useIsMounted, useLanguage, useModalController, useNotificationController, useOnChange, useOverlayController, useProps };

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

@@ -3,7 +3,10 @@
 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/_18.locale.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, {

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          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":";;;;;;;;;;;;;;;;;;;;;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;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"}
+{"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/FilterAccordionDateRange.mjs

@@ -2,8 +2,10 @@
 /* */
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import ButtonView from "../../../../../../views/ButtonView.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/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/_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/model/filter/DateRangeFilter.mjs

@@ -2,14 +2,16 @@
 /* */
 import { ListDateRangeFilter } from "../../../../../../components-base/src/list/filter/ListDateRangeFilter.mjs";
 import "../../../../../../components-base/src/index.mjs";
+import { omit } from "remeda";
 //#region src/components/List/model/filter/DateRangeFilter.tsx
 /**
 * React's date-range filter.
 *
 * The column, the comparison and the stored value are `ListDateRangeFilter` in
 * `@mittwald/flow-components-base`, so the Vue binding filters the same dates
-* the same way. What is left here is the calendar's own options, which are
-* Flow's `RangeCalendar` props.
+* the same way. What is left here are the options of the fields that pick the
+* range: Flow's `RangeCalendar` props, or with `granularity: "minute"` those of
+* the date and time fields.
 */
 var DateRangeFilter = class extends ListDateRangeFilter {
 	dateRangeOptions;
@@ -17,6 +19,17 @@ var DateRangeFilter = class extends ListDateRangeFilter {
 		super(context, shape);
 		this.dateRangeOptions = shape.dateRangeOptions;
 	}
+	get granularity() {
+		return this.dateRangeOptions?.granularity ?? "day";
+	}
+	get rangeCalendarProps() {
+		const options = this.dateRangeOptions ?? {};
+		return options.granularity === "minute" ? {} : omit(options, ["granularity"]);
+	}
+	get dateTimeRangeOptions() {
+		const options = this.dateRangeOptions;
+		return options?.granularity === "minute" ? options : void 0;
+	}
 	getValue() {
 		return super.getValue();
 	}

package/dist/js/packages/components/src/components/List/model/filter/DateRangeFilter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeFilter.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/filter/DateRangeFilter.tsx"],"sourcesContent":["import { ListDateRangeFilter } from \"@mittwald/flow-components-base\";\nimport type { ListModelContext } from \"@mittwald/flow-components-base\";\nimport type { FilterShape } from \"@/components/List/model/filter/types\";\nimport type { PropertyName } from \"@/components/List/model/types\";\nimport type { RangeCalendarProps } from \"@/components/Calendar\";\nimport type { DateValue } from \"@internationalized/date\";\nimport type { DateRange, RangeValue } from \"react-aria-components\";\nimport type { ReactNode } from \"react\";\nimport type { List } from \"@/components/List/model/List\";\nimport type { FilterValue } from \"@/components/List/model/filter/FilterValue\";\n\n/**\n * React's date-range filter.\n *\n * The column, the comparison and the stored value are `ListDateRangeFilter` in\n * `@mittwald/flow-components-base`, so the Vue binding filters the same dates\n * the same way. What is left here is the calendar's own options, which are\n * Flow's `RangeCalendar` props.\n */\nexport class DateRangeFilter<\n  T = never,\n  TProp extends PropertyName<T> = never,\n> extends ListDateRangeFilter<T, TProp, ReactNode> {\n  public readonly dateRangeOptions?: RangeCalendarProps;\n\n  public constructor(\n    context: ListModelContext<T>,\n    shape: FilterShape<T, TProp, never>,\n  ) {\n    super(context, shape as never);\n    this.dateRangeOptions = shape.dateRangeOptions;\n  }\n\n  /*\n   * Narrowed back to react-aria's own types, because that is what the calendar\n   * takes and what this filter's consumers already have. The shared class is\n   * typed on the three numbers a date is made of, which every date library\n   * agrees on and nothing else does.\n   */\n  public override getValue(): DateRange | null {\n    return super.getValue() as DateRange | null;\n  }\n\n  public override setValue(range: RangeValue<DateValue> | null): void {\n    super.setValue(range as never);\n  }\n\n  /** The list this filter belongs to — `context`, typed as React's `List`. */\n  public get list(): List<T> {\n    return this.context as List<T>;\n  }\n\n  /* As in `Filter`: created by this filter, so each one's `filter` is React's. */\n  public override get values(): FilterValue[] {\n    return super.values as FilterValue[];\n  }\n\n  public override getArrayValue(): FilterValue[] {\n    return super.getArrayValue() as FilterValue[];\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAa,kBAAb,cAGU,oBAAyC;CACjD;CAEA,YACE,SACA,OACA;EACA,MAAM,SAAS,KAAc;EAC7B,KAAK,mBAAmB,MAAM;CAChC;CAQA,WAA6C;EAC3C,OAAO,MAAM,SAAS;CACxB;CAEA,SAAyB,OAA2C;EAClE,MAAM,SAAS,KAAc;CAC/B;;CAGA,IAAW,OAAgB;EACzB,OAAO,KAAK;CACd;CAGA,IAAoB,SAAwB;EAC1C,OAAO,MAAM;CACf;CAEA,gBAA+C;EAC7C,OAAO,MAAM,cAAc;CAC7B;AACF"}
+{"version":3,"file":"DateRangeFilter.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/filter/DateRangeFilter.tsx"],"sourcesContent":["import { ListDateRangeFilter } from \"@mittwald/flow-components-base\";\nimport type { ListModelContext } from \"@mittwald/flow-components-base\";\nimport type {\n  DateRangeFilterOptions,\n  DateRangeFilterValue,\n  FilterShape,\n} from \"@/components/List/model/filter/types\";\nimport type { PropertyName } from \"@/components/List/model/types\";\nimport type { RangeCalendarProps } from \"@/components/Calendar\";\nimport type { ReactNode } from \"react\";\nimport { omit } from \"remeda\";\nimport type { List } from \"@/components/List/model/List\";\nimport type { FilterValue } from \"@/components/List/model/filter/FilterValue\";\n\n/**\n * React's date-range filter.\n *\n * The column, the comparison and the stored value are `ListDateRangeFilter` in\n * `@mittwald/flow-components-base`, so the Vue binding filters the same dates\n * the same way. What is left here are the options of the fields that pick the\n * range: Flow's `RangeCalendar` props, or with `granularity: \"minute\"` those of\n * the date and time fields.\n */\nexport class DateRangeFilter<\n  T = never,\n  TProp extends PropertyName<T> = never,\n> extends ListDateRangeFilter<T, TProp, ReactNode> {\n  public readonly dateRangeOptions?: DateRangeFilterOptions;\n\n  public constructor(\n    context: ListModelContext<T>,\n    shape: FilterShape<T, TProp, never>,\n  ) {\n    super(context, shape as never);\n    this.dateRangeOptions = shape.dateRangeOptions;\n  }\n\n  public get granularity(): \"day\" | \"minute\" {\n    return this.dateRangeOptions?.granularity ?? \"day\";\n  }\n\n  public get rangeCalendarProps(): RangeCalendarProps {\n    const options = this.dateRangeOptions ?? {};\n    return options.granularity === \"minute\"\n      ? {}\n      : omit(options, [\"granularity\"]);\n  }\n\n  public get dateTimeRangeOptions() {\n    const options = this.dateRangeOptions;\n    return options?.granularity === \"minute\" ? options : undefined;\n  }\n\n  /*\n   * Narrowed back to `@internationalized/date`'s types, because that is what\n   * the calendar and the date fields take. The shared class is typed on the\n   * numbers a date is made of, which every date library agrees on and nothing\n   * else does.\n   */\n  public override getValue(): DateRangeFilterValue | null {\n    return super.getValue() as DateRangeFilterValue | null;\n  }\n\n  public override setValue(range: DateRangeFilterValue | null): void {\n    super.setValue(range);\n  }\n\n  /** The list this filter belongs to — `context`, typed as React's `List`. */\n  public get list(): List<T> {\n    return this.context as List<T>;\n  }\n\n  /* As in `Filter`: created by this filter, so each one's `filter` is React's. */\n  public override get values(): FilterValue[] {\n    return super.values as FilterValue[];\n  }\n\n  public override getArrayValue(): FilterValue[] {\n    return super.getArrayValue() as FilterValue[];\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,IAAa,kBAAb,cAGU,oBAAyC;CACjD;CAEA,YACE,SACA,OACA;EACA,MAAM,SAAS,KAAc;EAC7B,KAAK,mBAAmB,MAAM;CAChC;CAEA,IAAW,cAAgC;EACzC,OAAO,KAAK,kBAAkB,eAAe;CAC/C;CAEA,IAAW,qBAAyC;EAClD,MAAM,UAAU,KAAK,oBAAoB,CAAC;EAC1C,OAAO,QAAQ,gBAAgB,WAC3B,CAAC,IACD,KAAK,SAAS,CAAC,aAAa,CAAC;CACnC;CAEA,IAAW,uBAAuB;EAChC,MAAM,UAAU,KAAK;EACrB,OAAO,SAAS,gBAAgB,WAAW,UAAU,KAAA;CACvD;CAQA,WAAwD;EACtD,OAAO,MAAM,SAAS;CACxB;CAEA,SAAyB,OAA0C;EACjE,MAAM,SAAS,KAAK;CACtB;;CAGA,IAAW,OAAgB;EACzB,OAAO,KAAK;CACd;CAGA,IAAoB,SAAwB;EAC1C,OAAO,MAAM;CACf;CAEA,gBAA+C;EAC7C,OAAO,MAAM,cAAc;CAC7B;AACF"}

package/dist/js/packages/components/src/components/List/model/filter/resolveDateRangeFilterValue.mjs

@@ -0,0 +1,16 @@
+"use client"
+/* */
+import { resolveListDateRange } from "../../../../../../components-base/src/list/filter/dateRange.mjs";
+import "../../../../../../components-base/src/index.mjs";
+//#region src/components/List/model/filter/resolveDateRangeFilterValue.ts
+/**
+* Resolves the value of a date range filter to the instants it spans, for
+* filtering on the server side. Both bounds are inclusive: a date covers its
+* whole day and a date with time its whole minute, in the user's local time
+* zone. A missing side has no bound.
+*/
+var resolveDateRangeFilterValue = (range) => resolveListDateRange(range);
+//#endregion
+export { resolveDateRangeFilterValue };
+
+//# sourceMappingURL=resolveDateRangeFilterValue.mjs.map

package/dist/js/packages/components/src/components/List/model/filter/resolveDateRangeFilterValue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveDateRangeFilterValue.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/filter/resolveDateRangeFilterValue.ts"],"sourcesContent":["import { resolveListDateRange } from \"@mittwald/flow-components-base\";\nimport type { DateRangeFilterValue } from \"@/components/List/model/filter/types\";\n\n/**\n * Resolves the value of a date range filter to the instants it spans, for\n * filtering on the server side. Both bounds are inclusive: a date covers its\n * whole day and a date with time its whole minute, in the user's local time\n * zone. A missing side has no bound.\n */\nexport const resolveDateRangeFilterValue = (\n  range: DateRangeFilterValue,\n): { start?: Date; end?: Date } => resolveListDateRange(range);\n"],"mappings":";;;;;;;;;;;AASA,IAAa,+BACX,UACiC,qBAAqB,KAAK"}

package/dist/js/packages/components/src/integrations/react-hook-form/components/Field/Field.mjs

@@ -3,9 +3,9 @@
 import { PropsContextProvider } from "../../../../lib/propsContext/components/PropsContextProvider.mjs";
 import dynamic from "../../../../lib/propsContext/dynamicProps/dynamic.mjs";
 import { useLocalizedStringFormatter } from "../../../../components/TranslationProvider/useLocalizedStringFormatter.mjs";
+import FieldErrorView from "../../../../views/FieldErrorView.mjs";
 import { useFormContext } from "../FormContextProvider/FormContextProvider.mjs";
 import __locale_default from "../../../../../../../_virtual/_36.locale.mjs";
-import FieldErrorView from "../../../../views/FieldErrorView.mjs";
 import { useUpdateFormDefaultValue } from "./hooks/useUpdateFormDefaultValue.mjs";
 import "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/js/packages/components/src/integrations/react-hook-form/components/FormRootError/FormRootError.mjs

@@ -1,7 +1,7 @@
 "use client"
 /* */
-import { useFormContext } from "../FormContextProvider/FormContextProvider.mjs";
 import FieldErrorView from "../../../../views/FieldErrorView.mjs";
+import { useFormContext } from "../FormContextProvider/FormContextProvider.mjs";
 import { useMountedFormRootErrorComponent } from "./useMountedFormRootErrorComponent.mjs";
 import { Fragment, jsx } from "react/jsx-runtime";
 //#region src/integrations/react-hook-form/components/FormRootError/FormRootError.tsx

package/dist/js/packages/components/src/views/DatePickerView.mjs

@@ -0,0 +1,16 @@
+"use client"
+/* */
+import { viewComponentContext } from "../lib/viewComponentContext/viewComponentContext.mjs";
+import { DatePicker } from "../components/DatePicker/DatePicker.mjs";
+import { memo, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/views/DatePickerView.tsx
+var DatePickerView = memo((props) => {
+	const View = useContext(viewComponentContext)["DatePicker"] ?? DatePicker;
+	return /* @__PURE__ */ jsx(View, { ...props });
+});
+DatePickerView.displayName = "DatePickerView";
+//#endregion
+export { DatePickerView as default };
+
+//# sourceMappingURL=DatePickerView.mjs.map

package/dist/js/packages/components/src/views/DatePickerView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerView.mjs","names":[],"sources":["../../../../../../src/views/DatePickerView.tsx"],"sourcesContent":["/* prettier-ignore */\n/* This file is auto-generated with the remote-components-generator */\nimport React, { memo, type FC, useContext } from \"react\";\nimport {\n  DatePicker,\n  type DatePickerProps,\n} from \"@/components/DatePicker/DatePicker\";\nimport { viewComponentContext } from \"@/lib/viewComponentContext/viewComponentContext\";\n\nconst DatePickerView: FC<DatePickerProps> = memo((props) => {\n  const View = useContext(viewComponentContext)[\"DatePicker\"] ?? DatePicker;\n  return <View {...props} />;\n});\nDatePickerView.displayName = \"DatePickerView\";\n\nexport default DatePickerView;\n"],"mappings":";;;;;;;AASA,IAAM,iBAAsC,MAAM,UAAU;CAC1D,MAAM,OAAO,WAAW,oBAAoB,CAAC,CAAC,iBAAiB;CAC/D,OAAO,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;AAC3B,CAAC;AACD,eAAe,cAAc"}

package/dist/js/packages/components/src/views/LabelView.mjs

@@ -0,0 +1,16 @@
+"use client"
+/* */
+import { viewComponentContext } from "../lib/viewComponentContext/viewComponentContext.mjs";
+import { Label } from "../components/Label/Label.mjs";
+import { memo, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/views/LabelView.tsx
+var LabelView = memo((props) => {
+	const View = useContext(viewComponentContext)["Label"] ?? Label;
+	return /* @__PURE__ */ jsx(View, { ...props });
+});
+LabelView.displayName = "LabelView";
+//#endregion
+export { LabelView as default };
+
+//# sourceMappingURL=LabelView.mjs.map

package/dist/js/packages/components/src/views/LabelView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelView.mjs","names":[],"sources":["../../../../../../src/views/LabelView.tsx"],"sourcesContent":["/* prettier-ignore */\n/* This file is auto-generated with the remote-components-generator */\nimport React, { memo, type FC, useContext } from \"react\";\nimport { Label, type LabelProps } from \"@/components/Label/Label\";\nimport { viewComponentContext } from \"@/lib/viewComponentContext/viewComponentContext\";\n\nconst LabelView: FC<LabelProps> = memo((props) => {\n  const View = useContext(viewComponentContext)[\"Label\"] ?? Label;\n  return <View {...props} />;\n});\nLabelView.displayName = \"LabelView\";\n\nexport default LabelView;\n"],"mappings":";;;;;;;AAMA,IAAM,YAA4B,MAAM,UAAU;CAChD,MAAM,OAAO,WAAW,oBAAoB,CAAC,CAAC,YAAY;CAC1D,OAAO,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;AAC3B,CAAC;AACD,UAAU,cAAc"}