@mittwald/flow-react-components 0.2.0-alpha.61 → 0.2.0-alpha.611

package/dist/js/components/src/components/List/components/Header/components/Filters/CombinedFilterMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CombinedFilterMenu.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/Filters/CombinedFilterMenu.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { IconFilter } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { useList } from \"@/components/List\";\nimport HeadingView from \"@/views/HeadingView\";\nimport { FilterMenuItem } from \"@/components/List/components/Header/components/Filters/FilterMenuItem\";\nimport styles from \"@/components/List/components/Header/Header.module.css\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport ContextMenuSectionView from \"@/views/ContextMenuSectionView\";\nimport SeparatorView from \"@/views/SeparatorView\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\n\nexport const CombinedFilterMenu: FC = () => {\n  const list = useList();\n\n  const filters = list.filters;\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  if (filters.length === 0) {\n    return null;\n  }\n\n  return (\n    <ContextMenuTriggerView>\n      <ButtonView\n        className={styles.mobile}\n        variant=\"outline\"\n        color=\"secondary\"\n        aria-label={stringFormatter.format(\"list.filters\")}\n      >\n        <IconFilter />\n      </ButtonView>\n      <ContextMenuView>\n        {filters.map((f, i) => {\n          const activeFilterKeys = f.values\n            .filter((v) => v.isActive)\n            .map((v) => v.id);\n\n          return (\n            <React.Fragment key={f.property}>\n              <ContextMenuSectionView\n                selectionMode={f.mode === \"one\" ? \"single\" : \"multiple\"}\n                selectedKeys={activeFilterKeys}\n              >\n                <HeadingView>{f.name ?? f.property}</HeadingView>\n                {f.values.map((v) => (\n                  <FilterMenuItem key={v.id} filterValue={v} />\n                ))}\n              </ContextMenuSectionView>\n              {i + 1 < filters.length && <SeparatorView />}\n            </React.Fragment>\n          );\n        })}\n      </ContextMenuView>\n    </ContextMenuTriggerView>\n  );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeO,MAAM,qBAAyB,MAAM;AAC1C,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,MAAM,UAAU,IAAA,CAAK,OAAA;AAErB,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,IAAI,OAAA,CAAQ,WAAW,CAAA,EAAG;AACxB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,4BACG,sBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,WAAWA,YAAA,CAAO,MAAA;AAAA,QAClB,OAAA,EAAQ,SAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QACN,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,cAAc,CAAA;AAAA,QAEjD,8BAAC,UAAA,EAAA,EAAW;AAAA;AAAA,KACd;AAAA,wBACC,eAAA,EAAA,EACE,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,GAAG,CAAA,KAAM;AACrB,MAAA,MAAM,gBAAA,GAAmB,CAAA,CAAE,MAAA,CACxB,MAAA,CAAO,CAAC,CAAA,KAAM,CAAA,CAAE,QAAQ,CAAA,CACxB,GAAA,CAAI,CAAC,CAAA,KAAM,EAAE,EAAE,CAAA;AAElB,MAAA,uBACE,IAAA,CAAC,KAAA,CAAM,QAAA,EAAN,EACC,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,sBAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAe,CAAA,CAAE,IAAA,KAAS,KAAA,GAAQ,QAAA,GAAW,UAAA;AAAA,YAC7C,YAAA,EAAc,gBAAA;AAAA,YAEd,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,WAAA,EAAA,EAAa,QAAA,EAAA,CAAA,CAAE,IAAA,IAAQ,CAAA,CAAE,QAAA,EAAS,CAAA;AAAA,cAClC,CAAA,CAAE,MAAA,CAAO,GAAA,CAAI,CAAC,CAAA,qBACb,GAAA,CAAC,cAAA,EAAA,EAA0B,WAAA,EAAa,CAAA,EAAA,EAAnB,CAAA,CAAE,EAAoB,CAC5C;AAAA;AAAA;AAAA,SACH;AAAA,QACC,CAAA,GAAI,CAAA,GAAI,OAAA,CAAQ,MAAA,wBAAW,aAAA,EAAA,EAAc;AAAA,OAAA,EAAA,EAVvB,EAAE,QAWvB,CAAA;AAAA,IAEJ,CAAC,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/List/components/Header/components/Filters/FilterMenu.mjs

@@ -0,0 +1,46 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import '@tabler/icons-react';
+import '../../../../../Icon/Icon.mjs';
+import '../../../../../../views/IconView.mjs';
+import { IconFilter } from '../../../../../Icon/components/icons/IconFilter.mjs';
+import TextView from '../../../../../../views/TextView.mjs';
+import ButtonView from '../../../../../../views/ButtonView.mjs';
+import { FilterMenuItem } from './FilterMenuItem.mjs';
+import headerStyles from '../../Header.module.css.mjs';
+import ContextMenuTriggerView from '../../../../../../views/ContextMenuTriggerView.mjs';
+import ContextMenuView from '../../../../../../views/ContextMenuView.mjs';
+
+const FilterMenu = (props) => {
+  const { filter } = props;
+  const { values, mode, name, property } = filter;
+  const filterItems = values.map((v) => /* @__PURE__ */ jsx(FilterMenuItem, { filterValue: v }, v.id));
+  const activeFilterKeys = values.filter((v) => v.isActive).map((v) => v.id);
+  return /* @__PURE__ */ jsxs(ContextMenuTriggerView, { children: [
+    /* @__PURE__ */ jsxs(
+      ButtonView,
+      {
+        className: headerStyles.desktop,
+        variant: "outline",
+        color: "secondary",
+        children: [
+          /* @__PURE__ */ jsx(TextView, { children: name ?? property }),
+          /* @__PURE__ */ jsx(IconFilter, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ContextMenuView,
+      {
+        selectionMode: mode === "one" ? "single" : "multiple",
+        selectedKeys: activeFilterKeys,
+        children: filterItems
+      }
+    )
+  ] });
+};
+
+export { FilterMenu };
+//# sourceMappingURL=FilterMenu.mjs.map

package/dist/js/components/src/components/List/components/Header/components/Filters/FilterMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterMenu.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/Filters/FilterMenu.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type { Filter } from \"@/components/List/model/filter/Filter\";\nimport { IconFilter } from \"@/components/Icon/components/icons\";\nimport TextView from \"@/views/TextView\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { FilterMenuItem } from \"@/components/List/components/Header/components/Filters/FilterMenuItem\";\nimport styles from \"@/components/List/components/Header/Header.module.css\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\n\ninterface Props {\n  filter: Filter<never, never, never>;\n}\n\nexport const FilterMenu: FC<Props> = (props) => {\n  const { filter } = props;\n\n  const { values, mode, name, property } = filter;\n\n  const filterItems = values.map((v) => (\n    <FilterMenuItem filterValue={v} key={v.id} />\n  ));\n\n  const activeFilterKeys = values.filter((v) => v.isActive).map((v) => v.id);\n\n  return (\n    <ContextMenuTriggerView>\n      <ButtonView\n        className={styles.desktop}\n        variant=\"outline\"\n        color=\"secondary\"\n      >\n        <TextView>{name ?? property}</TextView>\n        <IconFilter />\n      </ButtonView>\n      <ContextMenuView\n        selectionMode={mode === \"one\" ? \"single\" : \"multiple\"}\n        selectedKeys={activeFilterKeys}\n      >\n        {filterItems}\n      </ContextMenuView>\n    </ContextMenuTriggerView>\n  );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;AAcO,MAAM,UAAA,GAAwB,CAAC,KAAA,KAAU;AAC9C,EAAA,MAAM,EAAE,QAAO,GAAI,KAAA;AAEnB,EAAA,MAAM,EAAE,MAAA,EAAQ,IAAA,EAAM,IAAA,EAAM,UAAS,GAAI,MAAA;AAEzC,EAAA,MAAM,WAAA,GAAc,MAAA,CAAO,GAAA,CAAI,CAAC,CAAA,qBAC9B,GAAA,CAAC,cAAA,EAAA,EAAe,WAAA,EAAa,CAAA,EAAA,EAAQ,CAAA,CAAE,EAAI,CAC5C,CAAA;AAED,EAAA,MAAM,gBAAA,GAAmB,MAAA,CAAO,MAAA,CAAO,CAAC,CAAA,KAAM,CAAA,CAAE,QAAQ,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,EAAE,CAAA;AAEzE,EAAA,4BACG,sBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,WAAWA,YAAA,CAAO,OAAA;AAAA,QAClB,OAAA,EAAQ,SAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QAEN,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAU,kBAAQ,QAAA,EAAS,CAAA;AAAA,8BAC3B,UAAA,EAAA,EAAW;AAAA;AAAA;AAAA,KACd;AAAA,oBACA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAe,IAAA,KAAS,KAAA,GAAQ,QAAA,GAAW,UAAA;AAAA,QAC3C,YAAA,EAAc,gBAAA;AAAA,QAEb,QAAA,EAAA;AAAA;AAAA;AACH,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/List/components/Header/components/Filters/FilterMenuItem.mjs

@@ -0,0 +1,22 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import MenuItemView from '../../../../../../views/MenuItemView.mjs';
+import 'react';
+
+const FilterMenuItem = (props) => {
+  const { filterValue } = props;
+  return /* @__PURE__ */ jsx(
+    MenuItemView,
+    {
+      id: filterValue.id,
+      onAction: () => {
+        filterValue.toggle();
+      },
+      children: filterValue.render()
+    }
+  );
+};
+
+export { FilterMenuItem };
+//# sourceMappingURL=FilterMenuItem.mjs.map

package/dist/js/components/src/components/List/components/Header/components/Filters/FilterMenuItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterMenuItem.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/Filters/FilterMenuItem.tsx"],"sourcesContent":["import MenuItemView from \"@/views/MenuItemView\";\nimport { type FC } from \"react\";\nimport type { FilterValue } from \"@/components/List/model/filter/FilterValue\";\n\ninterface Props {\n  filterValue: FilterValue;\n}\n\nexport const FilterMenuItem: FC<Props> = (props) => {\n  const { filterValue } = props;\n\n  return (\n    <MenuItemView\n      id={filterValue.id}\n      onAction={() => {\n        filterValue.toggle();\n      }}\n    >\n      {filterValue.render()}\n    </MenuItemView>\n  );\n};\n"],"names":[],"mappings":";;;;AAQO,MAAM,cAAA,GAA4B,CAAC,KAAA,KAAU;AAClD,EAAA,MAAM,EAAE,aAAY,GAAI,KAAA;AAExB,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,IAAI,WAAA,CAAY,EAAA;AAAA,MAChB,UAAU,MAAM;AACd,QAAA,WAAA,CAAY,MAAA,EAAO;AAAA,MACrB,CAAA;AAAA,MAEC,sBAAY,MAAA;AAAO;AAAA,GACtB;AAEJ;;;;"}

package/dist/js/components/src/components/List/components/Header/components/Filters/FilterMenuList.mjs

@@ -0,0 +1,34 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import 'invariant';
+import 'react-aria-components';
+import 'clsx';
+import '../../../../../../lib/propsContext/propsContext.mjs';
+import '../../../../../../lib/propsContext/components/PropsContextProvider.mjs';
+import '@tabler/icons-react';
+import '../../../../../Icon/Icon.mjs';
+import '../../../../../../views/IconView.mjs';
+import '../../../../../Heading/Heading.mjs';
+import '../../../../../Text/Text.mjs';
+import 'react-aria';
+import '@mittwald/react-tunnel';
+import '../../../../../../views/ListItemViewContentView.mjs';
+import '../../../../../../views/ButtonView.mjs';
+import '../../../../../../views/ContextMenuTriggerView.mjs';
+import '../../../../../ColumnLayout/ColumnLayout.mjs';
+import '../../../ListSummary/ListSummary.mjs';
+import { useList } from '../../../../hooks/useList.mjs';
+import '../../../../listContext.mjs';
+import 'mobx';
+import '../../../../List.mjs';
+import { FilterMenu } from './FilterMenu.mjs';
+
+const FilterMenuList = () => {
+  const list = useList();
+  return list.filters.map((filter) => /* @__PURE__ */ jsx(FilterMenu, { filter }, filter.property));
+};
+
+export { FilterMenuList };
+//# sourceMappingURL=FilterMenuList.mjs.map

package/dist/js/components/src/components/List/components/Header/components/Filters/FilterMenuList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterMenuList.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/Filters/FilterMenuList.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { useList } from \"@/components/List\";\nimport { FilterMenu } from \"@/components/List/components/Header/components/Filters/FilterMenu\";\n\nexport const FilterMenuList: FC = () => {\n  const list = useList();\n\n  return list.filters.map((filter) => (\n    <FilterMenu key={filter.property} filter={filter} />\n  ));\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAKO,MAAM,iBAAqB,MAAM;AACtC,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,OAAO,IAAA,CAAK,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,yBACtB,UAAA,EAAA,EAAiC,MAAA,EAAA,EAAjB,MAAA,CAAO,QAA0B,CACnD,CAAA;AACH;;;;"}

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

@@ -0,0 +1,73 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { createElement, useState, useEffect } from 'react';
+import 'mobx';
+import '../../../../../../lib/controller/overlay/context.mjs';
+import { useOnChange } from '../../../../../../lib/hooks/useOnChange.mjs';
+import '../../../../../../lib/propsContext/propsContext.mjs';
+import 'remeda';
+import '@react-aria/utils';
+import 'dot-prop';
+import SearchFieldView from '../../../../../../views/SearchFieldView.mjs';
+import styles from './SearchField.module.scss.mjs';
+import { useAriaAnnounceSearchState } from '../../../../hooks/useAriaAnnounceSearchState.mjs';
+
+const autoSubmitTimeout = 800;
+const DefaultSearchFieldRender = (props) => {
+  const { onChange, value, autoSubmit = true, ...searchFieldProps } = props;
+  const [searchString, setSearchString] = useState(value ?? "");
+  const [previousSearchString, setPreviousSearchString] = useState("");
+  const submitSearch = () => {
+    if (searchString.trim() === "") {
+      onChange(void 0);
+    } else if (previousSearchString !== searchString) {
+      setPreviousSearchString(searchString);
+      onChange(searchString);
+    }
+  };
+  useEffect(() => {
+    if (autoSubmit) {
+      const timeout = setTimeout(() => submitSearch(), autoSubmitTimeout);
+      return () => clearTimeout(timeout);
+    }
+  }, [searchString, autoSubmit]);
+  useAriaAnnounceSearchState();
+  useOnChange(value, () => {
+    setSearchString(value ?? "");
+  }, [searchString]);
+  const clearSearch = () => {
+    onChange(void 0);
+    setSearchString("");
+  };
+  const handleKeyPress = (e) => {
+    if (e.key === "Enter" && !autoSubmit) {
+      submitSearch();
+    } else if (e.key === "Escape") {
+      clearSearch();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    SearchFieldView,
+    {
+      className: styles.searchField,
+      value: searchString,
+      onKeyUp: handleKeyPress,
+      onChange: (value2) => setSearchString(value2),
+      onClear: clearSearch,
+      ...searchFieldProps
+    }
+  );
+};
+const SearchField = (props) => {
+  const { search } = props;
+  const render = search.render ?? DefaultSearchFieldRender;
+  return createElement(render, {
+    value: search.value,
+    onChange: search.setValue.bind(search),
+    ...search.textFieldProps
+  });
+};
+
+export { SearchField, SearchField as default };
+//# sourceMappingURL=SearchField.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/SearchField/SearchField.tsx"],"sourcesContent":["import type { FC, KeyboardEvent } from \"react\";\nimport { createElement, useEffect, useState } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport type { Search } from \"@/components/List/model/search/Search\";\nimport type { SearchFieldRenderComponent } from \"@/components/List/model/search/types\";\nimport { useOnChange } from \"@/lib/hooks\";\nimport SearchFieldView from \"@/views/SearchFieldView\";\nimport styles from \"./SearchField.module.scss\";\nimport { useAriaAnnounceSearchState } from \"@/components/List/hooks/useAriaAnnounceSearchState\";\n\ninterface Props extends PropsWithClassName {\n  search: Search<never>;\n}\n\nconst autoSubmitTimeout = 800;\n\nconst DefaultSearchFieldRender: SearchFieldRenderComponent = (props) => {\n  const { onChange, value, autoSubmit = true, ...searchFieldProps } = props;\n\n  const [searchString, setSearchString] = useState(value ?? \"\");\n  const [previousSearchString, setPreviousSearchString] = useState(\"\");\n\n  const submitSearch = () => {\n    if (searchString.trim() === \"\") {\n      onChange(undefined);\n    } else if (previousSearchString !== searchString) {\n      setPreviousSearchString(searchString);\n      onChange(searchString);\n    }\n  };\n\n  useEffect(() => {\n    if (autoSubmit) {\n      const timeout = setTimeout(() => submitSearch(), autoSubmitTimeout);\n      return () => clearTimeout(timeout);\n    }\n  }, [searchString, autoSubmit]);\n\n  useAriaAnnounceSearchState();\n\n  useOnChange(value, () => {\n    setSearchString(value ?? \"\");\n  }, [searchString]);\n\n  const clearSearch = () => {\n    onChange(undefined);\n    setSearchString(\"\");\n  };\n\n  const handleKeyPress = (e: KeyboardEvent) => {\n    if (e.key === \"Enter\" && !autoSubmit) {\n      submitSearch();\n    } else if (e.key === \"Escape\") {\n      clearSearch();\n    }\n  };\n\n  return (\n    <SearchFieldView\n      className={styles.searchField}\n      value={searchString}\n      onKeyUp={handleKeyPress}\n      onChange={(value) => setSearchString(value)}\n      onClear={clearSearch}\n      {...searchFieldProps}\n    />\n  );\n};\n\nexport const SearchField: FC<Props> = (props) => {\n  const { search } = props;\n  const render = search.render ?? DefaultSearchFieldRender;\n\n  return createElement(render, {\n    value: search.value,\n    onChange: search.setValue.bind(search),\n    ...search.textFieldProps,\n  });\n};\n\nexport default SearchField;\n"],"names":["value"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,iBAAA,GAAoB,GAAA;AAE1B,MAAM,wBAAA,GAAuD,CAAC,KAAA,KAAU;AACtE,EAAA,MAAM,EAAE,QAAA,EAAU,KAAA,EAAO,aAAa,IAAA,EAAM,GAAG,kBAAiB,GAAI,KAAA;AAEpE,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,QAAA,CAAS,SAAS,EAAE,CAAA;AAC5D,EAAA,MAAM,CAAC,oBAAA,EAAsB,uBAAuB,CAAA,GAAI,SAAS,EAAE,CAAA;AAEnE,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,IAAI,YAAA,CAAa,IAAA,EAAK,KAAM,EAAA,EAAI;AAC9B,MAAA,QAAA,CAAS,MAAS,CAAA;AAAA,IACpB,CAAA,MAAA,IAAW,yBAAyB,YAAA,EAAc;AAChD,MAAA,uBAAA,CAAwB,YAAY,CAAA;AACpC,MAAA,QAAA,CAAS,YAAY,CAAA;AAAA,IACvB;AAAA,EACF,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,UAAA,EAAY;AACd,MAAA,MAAM,OAAA,GAAU,UAAA,CAAW,MAAM,YAAA,IAAgB,iBAAiB,CAAA;AAClE,MAAA,OAAO,MAAM,aAAa,OAAO,CAAA;AAAA,IACnC;AAAA,EACF,CAAA,EAAG,CAAC,YAAA,EAAc,UAAU,CAAC,CAAA;AAE7B,EAAA,0BAAA,EAA2B;AAE3B,EAAA,WAAA,CAAY,OAAO,MAAM;AACvB,IAAA,eAAA,CAAgB,SAAS,EAAE,CAAA;AAAA,EAC7B,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,QAAA,CAAS,MAAS,CAAA;AAClB,IAAA,eAAA,CAAgB,EAAE,CAAA;AAAA,EACpB,CAAA;AAEA,EAAA,MAAM,cAAA,GAAiB,CAAC,CAAA,KAAqB;AAC3C,IAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,OAAA,IAAW,CAAC,UAAA,EAAY;AACpC,MAAA,YAAA,EAAa;AAAA,IACf,CAAA,MAAA,IAAW,CAAA,CAAE,GAAA,KAAQ,QAAA,EAAU;AAC7B,MAAA,WAAA,EAAY;AAAA,IACd;AAAA,EACF,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAA,CAAO,WAAA;AAAA,MAClB,KAAA,EAAO,YAAA;AAAA,MACP,OAAA,EAAS,cAAA;AAAA,MACT,QAAA,EAAU,CAACA,MAAAA,KAAU,eAAA,CAAgBA,MAAK,CAAA;AAAA,MAC1C,OAAA,EAAS,WAAA;AAAA,MACR,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEO,MAAM,WAAA,GAAyB,CAAC,KAAA,KAAU;AAC/C,EAAA,MAAM,EAAE,QAAO,GAAI,KAAA;AACnB,EAAA,MAAM,MAAA,GAAS,OAAO,MAAA,IAAU,wBAAA;AAEhC,EAAA,OAAO,cAAc,MAAA,EAAQ;AAAA,IAC3B,OAAO,MAAA,CAAO,KAAA;AAAA,IACd,QAAA,EAAU,MAAA,CAAO,QAAA,CAAS,IAAA,CAAK,MAAM,CAAA;AAAA,IACrC,GAAG,MAAA,CAAO;AAAA,GACX,CAAA;AACH;;;;"}

package/dist/js/components/src/components/List/components/Header/components/SearchField/SearchField.module.scss.mjs

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

package/dist/js/components/src/components/List/components/Header/components/SearchField/SearchField.module.scss.mjs.map

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

package/dist/js/components/src/components/List/components/Header/components/Settings/SettingsMenu.mjs

@@ -0,0 +1,74 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useList } from '../../../../hooks/useList.mjs';
+import locales from '../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
+import ButtonView from '../../../../../../views/ButtonView.mjs';
+import 'react';
+import '@tabler/icons-react';
+import '../../../../../Icon/Icon.mjs';
+import '../../../../../../views/IconView.mjs';
+import { IconSettings } from '../../../../../Icon/components/icons/IconSettings.mjs';
+import HeadingView from '../../../../../../views/HeadingView.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+import headerStyles from '../../Header.module.css.mjs';
+import { ViewModeMenuItem } from './ViewModeMenuItem.mjs';
+import { useAvailableViewModes } from '../../lib.mjs';
+import { SortingMenuItem } from './SortingMenuItem.mjs';
+import SeparatorView from '../../../../../../views/SeparatorView.mjs';
+import ContextMenuSectionView from '../../../../../../views/ContextMenuSectionView.mjs';
+import ContextMenuTriggerView from '../../../../../../views/ContextMenuTriggerView.mjs';
+import ContextMenuView from '../../../../../../views/ContextMenuView.mjs';
+
+const SettingsMenu = () => {
+  const list = useList();
+  const selectedViewMode = list.viewMode;
+  const availableViewModes = useAvailableViewModes();
+  const viewModeItems = availableViewModes.map((viewMode) => /* @__PURE__ */ jsx(ViewModeMenuItem, { viewMode }, viewMode));
+  const sortingItems = list.visibleSorting.map((s) => /* @__PURE__ */ jsx(SortingMenuItem, { sorting: s }, s.id));
+  const labelSorting = list.visibleSorting.find((s) => s.isSorted());
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  if (sortingItems.length === 0 && viewModeItems.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(ContextMenuTriggerView, { children: [
+    /* @__PURE__ */ jsx(
+      ButtonView,
+      {
+        className: headerStyles.mobile,
+        variant: "outline",
+        color: "secondary",
+        "aria-label": stringFormatter.format("list.settings"),
+        children: /* @__PURE__ */ jsx(IconSettings, {})
+      }
+    ),
+    /* @__PURE__ */ jsxs(ContextMenuView, { children: [
+      viewModeItems.length > 1 && /* @__PURE__ */ jsxs(
+        ContextMenuSectionView,
+        {
+          selectionMode: "single",
+          selectedKeys: [selectedViewMode],
+          children: [
+            /* @__PURE__ */ jsx(HeadingView, { children: stringFormatter.format("list.settings.viewMode") }),
+            viewModeItems
+          ]
+        }
+      ),
+      sortingItems.length > 0 && viewModeItems.length > 1 && /* @__PURE__ */ jsx(SeparatorView, {}),
+      sortingItems.length > 0 && /* @__PURE__ */ jsxs(
+        ContextMenuSectionView,
+        {
+          selectionMode: "single",
+          selectedKeys: labelSorting ? [labelSorting.id] : [],
+          children: [
+            /* @__PURE__ */ jsx(HeadingView, { children: stringFormatter.format("list.sorting") }),
+            sortingItems
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+
+export { SettingsMenu };
+//# sourceMappingURL=SettingsMenu.mjs.map

package/dist/js/components/src/components/List/components/Header/components/Settings/SettingsMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsMenu.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/Settings/SettingsMenu.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { IconSettings } from \"@/components/Icon/components/icons\";\nimport HeadingView from \"@/views/HeadingView\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport styles from \"../../Header.module.css\";\nimport { ViewModeMenuItem } from \"@/components/List/components/Header/components/Settings/ViewModeMenuItem\";\nimport { useAvailableViewModes } from \"@/components/List/components/Header/lib\";\nimport { SortingMenuItem } from \"@/components/List/components/Header/components/Settings/SortingMenuItem\";\nimport SeparatorView from \"@/views/SeparatorView\";\nimport ContextMenuSectionView from \"@/views/ContextMenuSectionView\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\n\nexport const SettingsMenu: FC = () => {\n  const list = useList();\n\n  const selectedViewMode = list.viewMode;\n  const availableViewModes = useAvailableViewModes();\n  const viewModeItems = availableViewModes.map((viewMode) => (\n    <ViewModeMenuItem viewMode={viewMode} key={viewMode} />\n  ));\n\n  const sortingItems = list.visibleSorting.map((s) => (\n    <SortingMenuItem sorting={s} key={s.id} />\n  ));\n  const labelSorting = list.visibleSorting.find((s) => s.isSorted());\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  if (sortingItems.length === 0 && viewModeItems.length <= 1) {\n    return null;\n  }\n\n  return (\n    <ContextMenuTriggerView>\n      <ButtonView\n        className={styles.mobile}\n        variant=\"outline\"\n        color=\"secondary\"\n        aria-label={stringFormatter.format(\"list.settings\")}\n      >\n        <IconSettings />\n      </ButtonView>\n\n      <ContextMenuView>\n        {viewModeItems.length > 1 && (\n          <ContextMenuSectionView\n            selectionMode=\"single\"\n            selectedKeys={[selectedViewMode]}\n          >\n            <HeadingView>\n              {stringFormatter.format(\"list.settings.viewMode\")}\n            </HeadingView>\n            {viewModeItems}\n          </ContextMenuSectionView>\n        )}\n\n        {sortingItems.length > 0 && viewModeItems.length > 1 && (\n          <SeparatorView />\n        )}\n\n        {sortingItems.length > 0 && (\n          <ContextMenuSectionView\n            selectionMode=\"single\"\n            selectedKeys={labelSorting ? [labelSorting.id] : []}\n          >\n            <HeadingView>{stringFormatter.format(\"list.sorting\")}</HeadingView>\n            {sortingItems}\n          </ContextMenuSectionView>\n        )}\n      </ContextMenuView>\n    </ContextMenuTriggerView>\n  );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,eAAmB,MAAM;AACpC,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,MAAM,mBAAmB,IAAA,CAAK,QAAA;AAC9B,EAAA,MAAM,qBAAqB,qBAAA,EAAsB;AACjD,EAAA,MAAM,aAAA,GAAgB,mBAAmB,GAAA,CAAI,CAAC,6BAC5C,GAAA,CAAC,gBAAA,EAAA,EAAiB,QAAA,EAAA,EAAyB,QAAU,CACtD,CAAA;AAED,EAAA,MAAM,YAAA,GAAe,IAAA,CAAK,cAAA,CAAe,GAAA,CAAI,CAAC,CAAA,qBAC5C,GAAA,CAAC,eAAA,EAAA,EAAgB,OAAA,EAAS,CAAA,EAAA,EAAQ,CAAA,CAAE,EAAI,CACzC,CAAA;AACD,EAAA,MAAM,YAAA,GAAe,KAAK,cAAA,CAAe,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,UAAU,CAAA;AAEjE,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,IAAI,YAAA,CAAa,MAAA,KAAW,CAAA,IAAK,aAAA,CAAc,UAAU,CAAA,EAAG;AAC1D,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,4BACG,sBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,WAAWA,YAAA,CAAO,MAAA;AAAA,QAClB,OAAA,EAAQ,SAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QACN,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,eAAe,CAAA;AAAA,QAElD,8BAAC,YAAA,EAAA,EAAa;AAAA;AAAA,KAChB;AAAA,yBAEC,eAAA,EAAA,EACE,QAAA,EAAA;AAAA,MAAA,aAAA,CAAc,SAAS,CAAA,oBACtB,IAAA;AAAA,QAAC,sBAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAc,QAAA;AAAA,UACd,YAAA,EAAc,CAAC,gBAAgB,CAAA;AAAA,UAE/B,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,WAAA,EAAA,EACE,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,wBAAwB,CAAA,EAClD,CAAA;AAAA,YACC;AAAA;AAAA;AAAA,OACH;AAAA,MAGD,aAAa,MAAA,GAAS,CAAA,IAAK,cAAc,MAAA,GAAS,CAAA,wBAChD,aAAA,EAAA,EAAc,CAAA;AAAA,MAGhB,YAAA,CAAa,SAAS,CAAA,oBACrB,IAAA;AAAA,QAAC,sBAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAc,QAAA;AAAA,UACd,cAAc,YAAA,GAAe,CAAC,YAAA,CAAa,EAAE,IAAI,EAAC;AAAA,UAElD,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,WAAA,EAAA,EAAa,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,cAAc,CAAA,EAAE,CAAA;AAAA,YACpD;AAAA;AAAA;AAAA;AACH,KAAA,EAEJ;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/List/components/Header/components/Settings/SortingMenu.mjs

@@ -0,0 +1,52 @@
+"use client"
+/* */
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useList } from '../../../../hooks/useList.mjs';
+import locales from '../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
+import { Translate } from '../../../../../../lib/react/components/Translate/Translate.mjs';
+import TextView from '../../../../../../views/TextView.mjs';
+import ButtonView from '../../../../../../views/ButtonView.mjs';
+import 'react';
+import '@tabler/icons-react';
+import '../../../../../Icon/Icon.mjs';
+import '../../../../../../views/IconView.mjs';
+import { IconSorting } from '../../../../../Icon/components/icons/IconSorting.mjs';
+import headerStyles from '../../Header.module.css.mjs';
+import { SortingMenuItem } from './SortingMenuItem.mjs';
+import ContextMenuTriggerView from '../../../../../../views/ContextMenuTriggerView.mjs';
+import ContextMenuView from '../../../../../../views/ContextMenuView.mjs';
+
+const SortingMenu = () => {
+  const list = useList();
+  const sortingItems = list.visibleSorting.map((s) => /* @__PURE__ */ jsx(SortingMenuItem, { sorting: s }, s.id));
+  if (sortingItems.length === 0) {
+    return null;
+  }
+  const labelSorting = list.visibleSorting.find((s) => s.isSorted());
+  const text = /* @__PURE__ */ jsx(TextView, { children: labelSorting ? /* @__PURE__ */ jsx(Fragment, { children: labelSorting.name ?? labelSorting.property }) : /* @__PURE__ */ jsx(Translate, { locales, children: "list.sorting" }) });
+  return /* @__PURE__ */ jsxs(ContextMenuTriggerView, { children: [
+    /* @__PURE__ */ jsxs(
+      ButtonView,
+      {
+        variant: "outline",
+        color: "secondary",
+        className: headerStyles.desktop,
+        children: [
+          text,
+          /* @__PURE__ */ jsx(IconSorting, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ContextMenuView,
+      {
+        selectionMode: "single",
+        selectedKeys: labelSorting ? [labelSorting.id] : [],
+        children: sortingItems
+      }
+    )
+  ] });
+};
+
+export { SortingMenu };
+//# sourceMappingURL=SortingMenu.mjs.map

package/dist/js/components/src/components/List/components/Header/components/Settings/SortingMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortingMenu.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/Settings/SortingMenu.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { Translate } from \"@/lib/react/components/Translate\";\nimport TextView from \"@/views/TextView\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { IconSorting } from \"@/components/Icon/components/icons\";\nimport styles from \"@/components/List/components/Header/Header.module.css\";\nimport { SortingMenuItem } from \"@/components/List/components/Header/components/Settings/SortingMenuItem\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\n\nexport const SortingMenu: FC = () => {\n  const list = useList();\n\n  const sortingItems = list.visibleSorting.map((s) => (\n    <SortingMenuItem sorting={s} key={s.id} />\n  ));\n\n  if (sortingItems.length === 0) {\n    return null;\n  }\n\n  const labelSorting = list.visibleSorting.find((s) => s.isSorted());\n\n  const text = (\n    <TextView>\n      {labelSorting ? (\n        <>{labelSorting.name ?? labelSorting.property}</>\n      ) : (\n        <Translate locales={locales}>list.sorting</Translate>\n      )}\n    </TextView>\n  );\n\n  return (\n    <ContextMenuTriggerView>\n      <ButtonView\n        variant=\"outline\"\n        color=\"secondary\"\n        className={styles.desktop}\n      >\n        {text}\n        <IconSorting />\n      </ButtonView>\n      <ContextMenuView\n        selectionMode=\"single\"\n        selectedKeys={labelSorting ? [labelSorting.id] : []}\n      >\n        {sortingItems}\n      </ContextMenuView>\n    </ContextMenuTriggerView>\n  );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;AAYO,MAAM,cAAkB,MAAM;AACnC,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,MAAM,YAAA,GAAe,IAAA,CAAK,cAAA,CAAe,GAAA,CAAI,CAAC,CAAA,qBAC5C,GAAA,CAAC,eAAA,EAAA,EAAgB,OAAA,EAAS,CAAA,EAAA,EAAQ,CAAA,CAAE,EAAI,CACzC,CAAA;AAED,EAAA,IAAI,YAAA,CAAa,WAAW,CAAA,EAAG;AAC7B,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,YAAA,GAAe,KAAK,cAAA,CAAe,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,UAAU,CAAA;AAEjE,EAAA,MAAM,IAAA,mBACJ,GAAA,CAAC,QAAA,EAAA,EACE,QAAA,EAAA,YAAA,mCACI,QAAA,EAAA,YAAA,CAAa,IAAA,IAAQ,YAAA,CAAa,QAAA,EAAS,CAAA,mBAE9C,GAAA,CAAC,SAAA,EAAA,EAAU,OAAA,EAAkB,0BAAY,CAAA,EAE7C,CAAA;AAGF,EAAA,4BACG,sBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,SAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QACN,WAAWA,YAAA,CAAO,OAAA;AAAA,QAEjB,QAAA,EAAA;AAAA,UAAA,IAAA;AAAA,8BACA,WAAA,EAAA,EAAY;AAAA;AAAA;AAAA,KACf;AAAA,oBACA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAc,QAAA;AAAA,QACd,cAAc,YAAA,GAAe,CAAC,YAAA,CAAa,EAAE,IAAI,EAAC;AAAA,QAEjD,QAAA,EAAA;AAAA;AAAA;AACH,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/List/components/Header/components/Settings/SortingMenuItem.mjs

@@ -0,0 +1,44 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import MenuItemView from '../../../../../../views/MenuItemView.mjs';
+import 'invariant';
+import 'react-aria-components';
+import 'clsx';
+import '../../../../../../lib/propsContext/propsContext.mjs';
+import '../../../../../../lib/propsContext/components/PropsContextProvider.mjs';
+import '@tabler/icons-react';
+import '../../../../../Icon/Icon.mjs';
+import '../../../../../../views/IconView.mjs';
+import '../../../../../Heading/Heading.mjs';
+import '../../../../../Text/Text.mjs';
+import 'react-aria';
+import '@mittwald/react-tunnel';
+import '../../../../../../views/ListItemViewContentView.mjs';
+import '../../../../../../views/ButtonView.mjs';
+import '../../../../../../views/ContextMenuTriggerView.mjs';
+import '../../../../../ColumnLayout/ColumnLayout.mjs';
+import '../../../ListSummary/ListSummary.mjs';
+import { useList } from '../../../../hooks/useList.mjs';
+import '../../../../listContext.mjs';
+import 'mobx';
+import '../../../../List.mjs';
+
+const SortingMenuItem = (props) => {
+  const { sorting } = props;
+  const list = useList();
+  return /* @__PURE__ */ jsx(
+    MenuItemView,
+    {
+      id: sorting.id,
+      onAction: () => {
+        list.getSorting(sorting.id).enable();
+      },
+      children: sorting.name ?? sorting.property
+    }
+  );
+};
+
+export { SortingMenuItem };
+//# sourceMappingURL=SortingMenuItem.mjs.map

package/dist/js/components/src/components/List/components/Header/components/Settings/SortingMenuItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortingMenuItem.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/Settings/SortingMenuItem.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport type { Sorting } from \"@/components/List/model/sorting/Sorting\";\nimport MenuItemView from \"@/views/MenuItemView\";\nimport { useList } from \"@/components/List\";\n\ninterface Props {\n  sorting: Sorting<never>;\n}\n\nexport const SortingMenuItem: FC<Props> = (props) => {\n  const { sorting } = props;\n\n  const list = useList();\n\n  return (\n    <MenuItemView\n      id={sorting.id}\n      onAction={() => {\n        list.getSorting(sorting.id).enable();\n      }}\n    >\n      {sorting.name ?? sorting.property}\n    </MenuItemView>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,eAAA,GAA6B,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM,EAAE,SAAQ,GAAI,KAAA;AAEpB,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,IAAI,OAAA,CAAQ,EAAA;AAAA,MACZ,UAAU,MAAM;AACd,QAAA,IAAA,CAAK,UAAA,CAAW,OAAA,CAAQ,EAAE,CAAA,CAAE,MAAA,EAAO;AAAA,MACrC,CAAA;AAAA,MAEC,QAAA,EAAA,OAAA,CAAQ,QAAQ,OAAA,CAAQ;AAAA;AAAA,GAC3B;AAEJ;;;;"}

package/dist/js/components/src/components/List/components/Header/components/Settings/ViewModeMenu.mjs

@@ -0,0 +1,61 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import locales from '../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+import 'invariant';
+import 'react-aria-components';
+import 'react';
+import 'clsx';
+import '../../../../../../lib/propsContext/propsContext.mjs';
+import '../../../../../../lib/propsContext/components/PropsContextProvider.mjs';
+import '@tabler/icons-react';
+import '../../../../../Icon/Icon.mjs';
+import '../../../../../../views/IconView.mjs';
+import { IconView } from '../../../../../Icon/components/icons/IconView.mjs';
+import '../../../../../Heading/Heading.mjs';
+import '../../../../../Text/Text.mjs';
+import '@mittwald/react-tunnel';
+import '../../../../../../views/ListItemViewContentView.mjs';
+import ButtonView from '../../../../../../views/ButtonView.mjs';
+import ContextMenuTriggerView from '../../../../../../views/ContextMenuTriggerView.mjs';
+import '../../../../../ColumnLayout/ColumnLayout.mjs';
+import '../../../ListSummary/ListSummary.mjs';
+import { useList } from '../../../../hooks/useList.mjs';
+import '../../../../listContext.mjs';
+import 'mobx';
+import '../../../../List.mjs';
+import TextView from '../../../../../../views/TextView.mjs';
+import { ViewModeMenuItem } from './ViewModeMenuItem.mjs';
+import { useAvailableViewModes } from '../../lib.mjs';
+import headerStyles from '../../Header.module.css.mjs';
+import ContextMenuView from '../../../../../../views/ContextMenuView.mjs';
+
+const ViewModeMenu = () => {
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  const list = useList();
+  const selectedViewMode = list.viewMode;
+  const availableViewModes = useAvailableViewModes();
+  if (availableViewModes.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(ContextMenuTriggerView, { children: [
+    /* @__PURE__ */ jsxs(
+      ButtonView,
+      {
+        variant: "outline",
+        color: "secondary",
+        "aria-label": stringFormatter.format("list.settings"),
+        className: headerStyles.desktop,
+        children: [
+          /* @__PURE__ */ jsx(TextView, { children: stringFormatter.format(`list.settings.viewMode.${selectedViewMode}`) }),
+          /* @__PURE__ */ jsx(IconView, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(ContextMenuView, { selectionMode: "single", selectedKeys: [selectedViewMode], children: availableViewModes.map((viewMode) => /* @__PURE__ */ jsx(ViewModeMenuItem, { viewMode }, viewMode)) })
+  ] });
+};
+
+export { ViewModeMenu };
+//# sourceMappingURL=ViewModeMenu.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ViewModeMenu.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/Settings/ViewModeMenu.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport locales from \"../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { useList } from \"@/components/List\";\nimport { IconView } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport TextView from \"@/views/TextView\";\nimport { ViewModeMenuItem } from \"@/components/List/components/Header/components/Settings/ViewModeMenuItem\";\nimport { useAvailableViewModes } from \"@/components/List/components/Header/lib\";\nimport styles from \"@/components/List/components/Header/Header.module.css\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\n\nexport const ViewModeMenu: FC = () => {\n  const stringFormatter = useLocalizedStringFormatter(locales);\n  const list = useList();\n  const selectedViewMode = list.viewMode;\n\n  const availableViewModes = useAvailableViewModes();\n\n  if (availableViewModes.length <= 1) {\n    return null;\n  }\n\n  return (\n    <ContextMenuTriggerView>\n      <ButtonView\n        variant=\"outline\"\n        color=\"secondary\"\n        aria-label={stringFormatter.format(\"list.settings\")}\n        className={styles.desktop}\n      >\n        <TextView>\n          {stringFormatter.format(`list.settings.viewMode.${selectedViewMode}`)}\n        </TextView>\n        <IconView />\n      </ButtonView>\n      <ContextMenuView selectionMode=\"single\" selectedKeys={[selectedViewMode]}>\n        {availableViewModes.map((viewMode) => (\n          <ViewModeMenuItem viewMode={viewMode} key={viewMode} />\n        ))}\n      </ContextMenuView>\n    </ContextMenuTriggerView>\n  );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAM,eAAmB,MAAM;AACpC,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAC3D,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,mBAAmB,IAAA,CAAK,QAAA;AAE9B,EAAA,MAAM,qBAAqB,qBAAA,EAAsB;AAEjD,EAAA,IAAI,kBAAA,CAAmB,UAAU,CAAA,EAAG;AAClC,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,4BACG,sBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,SAAA;AAAA,QACR,KAAA,EAAM,WAAA;AAAA,QACN,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,eAAe,CAAA;AAAA,QAClD,WAAWA,YAAA,CAAO,OAAA;AAAA,QAElB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YACE,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,CAAA,uBAAA,EAA0B,gBAAgB,EAAE,CAAA,EACtE,CAAA;AAAA,8BACC,QAAA,EAAA,EAAS;AAAA;AAAA;AAAA,KACZ;AAAA,wBACC,eAAA,EAAA,EAAgB,aAAA,EAAc,QAAA,EAAS,YAAA,EAAc,CAAC,gBAAgB,CAAA,EACpE,QAAA,EAAA,kBAAA,CAAmB,GAAA,CAAI,CAAC,QAAA,qBACvB,GAAA,CAAC,oBAAiB,QAAA,EAAA,EAAyB,QAAU,CACtD,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/List/components/Header/components/Settings/ViewModeMenuItem.mjs

@@ -0,0 +1,46 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import MenuItemView from '../../../../../../views/MenuItemView.mjs';
+import 'invariant';
+import 'react-aria-components';
+import 'clsx';
+import '../../../../../../lib/propsContext/propsContext.mjs';
+import '../../../../../../lib/propsContext/components/PropsContextProvider.mjs';
+import '@tabler/icons-react';
+import '../../../../../Icon/Icon.mjs';
+import '../../../../../../views/IconView.mjs';
+import '../../../../../Heading/Heading.mjs';
+import '../../../../../Text/Text.mjs';
+import locales from '../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+import '@mittwald/react-tunnel';
+import '../../../../../../views/ListItemViewContentView.mjs';
+import '../../../../../../views/ButtonView.mjs';
+import '../../../../../../views/ContextMenuTriggerView.mjs';
+import '../../../../../ColumnLayout/ColumnLayout.mjs';
+import '../../../ListSummary/ListSummary.mjs';
+import { useList } from '../../../../hooks/useList.mjs';
+import '../../../../listContext.mjs';
+import 'mobx';
+import '../../../../List.mjs';
+
+const ViewModeMenuItem = (props) => {
+  const { viewMode } = props;
+  const list = useList();
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  return /* @__PURE__ */ jsx(
+    MenuItemView,
+    {
+      id: viewMode,
+      onAction: () => {
+        list.setViewMode(viewMode);
+      },
+      children: stringFormatter.format(`list.settings.viewMode.${viewMode}`)
+    }
+  );
+};
+
+export { ViewModeMenuItem };
+//# sourceMappingURL=ViewModeMenuItem.mjs.map

package/dist/js/components/src/components/List/components/Header/components/Settings/ViewModeMenuItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewModeMenuItem.mjs","sources":["../../../../../../../../../../src/components/List/components/Header/components/Settings/ViewModeMenuItem.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport MenuItemView from \"@/views/MenuItemView\";\nimport type { ListViewMode } from \"@/components/List/model/types\";\nimport { useList } from \"@/components/List\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../../../locales/*.locale.json\";\n\ninterface Props {\n  viewMode: ListViewMode;\n}\n\nexport const ViewModeMenuItem: FC<Props> = (props) => {\n  const { viewMode } = props;\n  const list = useList();\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  return (\n    <MenuItemView\n      id={viewMode}\n      onAction={() => {\n        list.setViewMode(viewMode);\n      }}\n    >\n      {stringFormatter.format(`list.settings.viewMode.${viewMode}`)}\n    </MenuItemView>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,gBAAA,GAA8B,CAAC,KAAA,KAAU;AACpD,EAAA,MAAM,EAAE,UAAS,GAAI,KAAA;AACrB,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,QAAA;AAAA,MACJ,UAAU,MAAM;AACd,QAAA,IAAA,CAAK,YAAY,QAAQ,CAAA;AAAA,MAC3B,CAAA;AAAA,MAEC,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,CAAA,uBAAA,EAA0B,QAAQ,CAAA,CAAE;AAAA;AAAA,GAC9D;AAEJ;;;;"}

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

@@ -0,0 +1,43 @@
+"use client"
+/* */
+import 'invariant';
+import 'react/jsx-runtime';
+import 'react-aria-components';
+import 'react';
+import 'clsx';
+import '../../../../lib/propsContext/propsContext.mjs';
+import '../../../../lib/propsContext/components/PropsContextProvider.mjs';
+import '@tabler/icons-react';
+import '../../../Icon/Icon.mjs';
+import '../../../../views/IconView.mjs';
+import '../../../Heading/Heading.mjs';
+import '../../../Text/Text.mjs';
+import 'react-aria';
+import '@mittwald/react-tunnel';
+import '../../../../views/ListItemViewContentView.mjs';
+import '../../../../views/ButtonView.mjs';
+import '../../../../views/ContextMenuTriggerView.mjs';
+import '../../../ColumnLayout/ColumnLayout.mjs';
+import '../ListSummary/ListSummary.mjs';
+import { useList } from '../../hooks/useList.mjs';
+import '../../listContext.mjs';
+import 'mobx';
+import '../../List.mjs';
+
+const useAvailableViewModes = () => {
+  const list = useList();
+  const availableViewModes = [];
+  if (list.itemView?.showList) {
+    availableViewModes.push("list");
+  }
+  if (list.table) {
+    availableViewModes.push("table");
+  }
+  if (list.itemView?.showTiles) {
+    availableViewModes.push("tiles");
+  }
+  return availableViewModes;
+};
+
+export { useAvailableViewModes };
+//# sourceMappingURL=lib.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lib.mjs","sources":["../../../../../../../../src/components/List/components/Header/lib.ts"],"sourcesContent":["import type { ListViewMode } from \"@/components/List/model/types\";\nimport { useList } from \"@/components/List\";\n\nexport const useAvailableViewModes = () => {\n  const list = useList();\n\n  const availableViewModes: ListViewMode[] = [];\n\n  if (list.itemView?.showList) {\n    availableViewModes.push(\"list\");\n  }\n  if (list.table) {\n    availableViewModes.push(\"table\");\n  }\n  if (list.itemView?.showTiles) {\n    availableViewModes.push(\"tiles\");\n  }\n\n  return availableViewModes;\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,wBAAwB,MAAM;AACzC,EAAA,MAAM,OAAO,OAAA,EAAQ;AAErB,EAAA,MAAM,qBAAqC,EAAC;AAE5C,EAAA,IAAI,IAAA,CAAK,UAAU,QAAA,EAAU;AAC3B,IAAA,kBAAA,CAAmB,KAAK,MAAM,CAAA;AAAA,EAChC;AACA,EAAA,IAAI,KAAK,KAAA,EAAO;AACd,IAAA,kBAAA,CAAmB,KAAK,OAAO,CAAA;AAAA,EACjC;AACA,EAAA,IAAI,IAAA,CAAK,UAAU,SAAA,EAAW;AAC5B,IAAA,kBAAA,CAAmB,KAAK,OAAO,CAAA;AAAA,EACjC;AAEA,EAAA,OAAO,kBAAA;AACT;;;;"}