@mittwald/flow-react-components 0.2.0-alpha.9 → 0.2.0-alpha.90

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

@@ -0,0 +1,69 @@
+"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 '@react-aria/utils';
+import '../../../../../../lib/propsContext/propsContext.mjs';
+import 'remeda';
+import 'dot-prop';
+import SearchFieldView from '../../../../../../views/SearchFieldView.mjs';
+
+const autoSubmitTimeout = 800;
+const DefaultSearchFieldRender = (props) => {
+  const { className, onChange, value, autoSubmit, ...searchFieldProps } = props;
+  const [searchString, setSearchString] = useState(value ?? "");
+  const submitSearch = () => {
+    if (searchString.trim() === "") {
+      onChange(void 0);
+    } else {
+      onChange(searchString);
+    }
+  };
+  useEffect(() => {
+    if (autoSubmit) {
+      const timeout = setTimeout(() => submitSearch(), autoSubmitTimeout);
+      return () => clearTimeout(timeout);
+    }
+  }, [searchString, autoSubmit]);
+  useOnChange(value, () => {
+    setSearchString(value ?? "");
+  }, [searchString]);
+  const clearSearch = () => {
+    onChange(void 0);
+    setSearchString("");
+  };
+  const handleKeyPress = (e) => {
+    if (e.key === "Enter") {
+      submitSearch();
+    } else if (e.key === "Escape") {
+      clearSearch();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    SearchFieldView,
+    {
+      className,
+      value: searchString,
+      onKeyUp: handleKeyPress,
+      onChange: (value2) => setSearchString(value2),
+      onClear: clearSearch,
+      ...searchFieldProps
+    }
+  );
+};
+const SearchField = (props) => {
+  const { className, search } = props;
+  const render = search.render ?? DefaultSearchFieldRender;
+  return createElement(render, {
+    className,
+    value: search.value,
+    onChange: search.setValue.bind(search),
+    ...search.textFieldProps
+  });
+};
+
+export { SearchField };
+//# sourceMappingURL=SearchField.mjs.map

package/dist/js/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 React, { 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\";\n\ninterface Props extends PropsWithClassName {\n  search: Search<never>;\n}\n\nconst autoSubmitTimeout = 800;\n\nconst DefaultSearchFieldRender: SearchFieldRenderComponent = (props) => {\n  const { className, onChange, value, autoSubmit, ...searchFieldProps } = props;\n\n  const [searchString, setSearchString] = useState(value ?? \"\");\n\n  const submitSearch = () => {\n    if (searchString.trim() === \"\") {\n      onChange(undefined);\n    } else {\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  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\") {\n      submitSearch();\n    } else if (e.key === \"Escape\") {\n      clearSearch();\n    }\n  };\n\n  return (\n    <SearchFieldView\n      className={className}\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 { className, search } = props;\n  const render = search.render ?? DefaultSearchFieldRender;\n\n  return createElement(render, {\n    className,\n    value: search.value,\n    onChange: search.setValue.bind(search),\n    ...search.textFieldProps,\n  });\n};\n"],"names":["value"],"mappings":";;;;;;;;;;;AAYA,MAAM,iBAAoB,GAAA,GAAA;AAE1B,MAAM,wBAAA,GAAuD,CAAC,KAAU,KAAA;AACtE,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,OAAO,UAAY,EAAA,GAAG,kBAAqB,GAAA,KAAA;AAExE,EAAA,MAAM,CAAC,YAAc,EAAA,eAAe,CAAI,GAAA,QAAA,CAAS,SAAS,EAAE,CAAA;AAE5D,EAAA,MAAM,eAAe,MAAM;AACzB,IAAI,IAAA,YAAA,CAAa,IAAK,EAAA,KAAM,EAAI,EAAA;AAC9B,MAAA,QAAA,CAAS,MAAS,CAAA;AAAA,KACb,MAAA;AACL,MAAA,QAAA,CAAS,YAAY,CAAA;AAAA;AACvB,GACF;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,MAAM,OAAU,GAAA,UAAA,CAAW,MAAM,YAAA,IAAgB,iBAAiB,CAAA;AAClE,MAAO,OAAA,MAAM,aAAa,OAAO,CAAA;AAAA;AACnC,GACC,EAAA,CAAC,YAAc,EAAA,UAAU,CAAC,CAAA;AAE7B,EAAA,WAAA,CAAY,OAAO,MAAM;AACvB,IAAA,eAAA,CAAgB,SAAS,EAAE,CAAA;AAAA,GAC7B,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,QAAA,CAAS,MAAS,CAAA;AAClB,IAAA,eAAA,CAAgB,EAAE,CAAA;AAAA,GACpB;AAEA,EAAM,MAAA,cAAA,GAAiB,CAAC,CAAqB,KAAA;AAC3C,IAAI,IAAA,CAAA,CAAE,QAAQ,OAAS,EAAA;AACrB,MAAa,YAAA,EAAA;AAAA,KACf,MAAA,IAAW,CAAE,CAAA,GAAA,KAAQ,QAAU,EAAA;AAC7B,MAAY,WAAA,EAAA;AAAA;AACd,GACF;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,KAAO,EAAA,YAAA;AAAA,MACP,OAAS,EAAA,cAAA;AAAA,MACT,QAAU,EAAA,CAACA,MAAU,KAAA,eAAA,CAAgBA,MAAK,CAAA;AAAA,MAC1C,OAAS,EAAA,WAAA;AAAA,MACR,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEa,MAAA,WAAA,GAAyB,CAAC,KAAU,KAAA;AAC/C,EAAM,MAAA,EAAE,SAAW,EAAA,MAAA,EAAW,GAAA,KAAA;AAC9B,EAAM,MAAA,MAAA,GAAS,OAAO,MAAU,IAAA,wBAAA;AAEhC,EAAA,OAAO,cAAc,MAAQ,EAAA;AAAA,IAC3B,SAAA;AAAA,IACA,OAAO,MAAO,CAAA,KAAA;AAAA,IACd,QAAU,EAAA,MAAA,CAAO,QAAS,CAAA,IAAA,CAAK,MAAM,CAAA;AAAA,IACrC,GAAG,MAAO,CAAA;AAAA,GACX,CAAA;AACH;;;;"}

package/dist/js/components/List/components/Header/components/SortingPicker/SortingPicker.mjs

@@ -0,0 +1,59 @@
+"use client"
+/* */
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react';
+import { SortingPickerItem } from '../SortingPickerItem/SortingPickerItem.mjs';
+import { useList } from '../../../../hooks/useList.mjs';
+import { ContextMenu } from '../../../../../ContextMenu/ContextMenu.mjs';
+import 'react-aria-components';
+import 'clsx';
+import '../../../../../../lib/propsContext/propsContext.mjs';
+import '../../../../../../lib/viewComponentContext/viewComponentContext.mjs';
+import '@react-aria/utils';
+import 'remeda';
+import 'dot-prop';
+import '@tabler/icons-react';
+import '@mittwald/react-tunnel';
+import '../../../../../../lib/slotContext/slotContext.mjs';
+import { IconSorting } from '../../../../../Icon/components/icons/IconSorting.mjs';
+import 'react-aria';
+import { ContextMenuTrigger } from '../../../../../ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.mjs';
+import 'mobx';
+import '../../../../../../lib/controller/overlay/context.mjs';
+import 'invariant';
+import '../../../../../Action/context.mjs';
+import '../../../../../Action/models/ActionStateContext.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';
+
+const SortingPicker = () => {
+  const list = useList();
+  const pickerItems = list.visibleSorting.map((s) => /* @__PURE__ */ jsx(SortingPickerItem, { sorting: s }, s.id));
+  if (pickerItems.length === 0) {
+    return null;
+  }
+  const pickerLabelSorting = list.visibleSorting.find((s) => s.isSorted());
+  const text = /* @__PURE__ */ jsx(TextView, { children: pickerLabelSorting ? /* @__PURE__ */ jsx(Fragment, { children: pickerLabelSorting.name ?? pickerLabelSorting.property }) : /* @__PURE__ */ jsx(Translate, { locales, children: "list.sorting" }) });
+  return /* @__PURE__ */ jsxs(ContextMenuTrigger, { children: [
+    /* @__PURE__ */ jsxs(ButtonView, { variant: "outline", color: "secondary", children: [
+      text,
+      /* @__PURE__ */ jsx(IconSorting, {})
+    ] }),
+    /* @__PURE__ */ jsx(
+      ContextMenu,
+      {
+        selectionMode: "single",
+        selectedKeys: pickerLabelSorting ? [pickerLabelSorting.id] : [],
+        onAction: (id) => {
+          list.getSorting(String(id)).enable();
+        },
+        children: pickerItems
+      }
+    )
+  ] });
+};
+
+export { SortingPicker };
+//# sourceMappingURL=SortingPicker.mjs.map

package/dist/js/components/List/components/Header/components/SortingPicker/SortingPicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortingPicker.mjs","sources":["../../../../../../../../src/components/List/components/Header/components/SortingPicker/SortingPicker.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { SortingPickerItem } from \"@/components/List/components/Header/components/SortingPickerItem\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport ContextMenu, { ContextMenuTrigger } from \"@/components/ContextMenu\";\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\";\n\nexport const SortingPicker: FC = () => {\n  const list = useList();\n\n  const pickerItems = list.visibleSorting.map((s) => (\n    <SortingPickerItem sorting={s} key={s.id} />\n  ));\n\n  if (pickerItems.length === 0) {\n    return null;\n  }\n\n  const pickerLabelSorting = list.visibleSorting.find((s) => s.isSorted());\n\n  const text = (\n    <TextView>\n      {pickerLabelSorting ? (\n        <>{pickerLabelSorting.name ?? pickerLabelSorting.property}</>\n      ) : (\n        <Translate locales={locales}>list.sorting</Translate>\n      )}\n    </TextView>\n  );\n\n  return (\n    <ContextMenuTrigger>\n      <ButtonView variant=\"outline\" color=\"secondary\">\n        {text}\n        <IconSorting />\n      </ButtonView>\n      <ContextMenu\n        selectionMode=\"single\"\n        selectedKeys={pickerLabelSorting ? [pickerLabelSorting.id] : []}\n        onAction={(id) => {\n          list.getSorting(String(id)).enable();\n        }}\n      >\n        {pickerItems}\n      </ContextMenu>\n    </ContextMenuTrigger>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,gBAAoB,MAAM;AACrC,EAAA,MAAM,OAAO,OAAQ,EAAA;AAErB,EAAA,MAAM,WAAc,GAAA,IAAA,CAAK,cAAe,CAAA,GAAA,CAAI,CAAC,CAAA,qBAC1C,GAAA,CAAA,iBAAA,EAAA,EAAkB,OAAS,EAAA,CAAA,EAAA,EAAQ,CAAE,CAAA,EAAI,CAC3C,CAAA;AAED,EAAI,IAAA,WAAA,CAAY,WAAW,CAAG,EAAA;AAC5B,IAAO,OAAA,IAAA;AAAA;AAGT,EAAM,MAAA,kBAAA,GAAqB,KAAK,cAAe,CAAA,IAAA,CAAK,CAAC,CAAM,KAAA,CAAA,CAAE,UAAU,CAAA;AAEvE,EAAA,MAAM,IACJ,mBAAA,GAAA,CAAC,QACE,EAAA,EAAA,QAAA,EAAA,kBAAA,mCACI,QAAmB,EAAA,kBAAA,CAAA,IAAA,IAAQ,kBAAmB,CAAA,QAAA,EAAS,CAE1D,mBAAA,GAAA,CAAC,SAAU,EAAA,EAAA,OAAA,EAAkB,0BAAY,CAE7C,EAAA,CAAA;AAGF,EAAA,4BACG,kBACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAU,EAAA,KAAA,EAAM,WACjC,EAAA,QAAA,EAAA;AAAA,MAAA,IAAA;AAAA,0BACA,WAAY,EAAA,EAAA;AAAA,KACf,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,aAAc,EAAA,QAAA;AAAA,QACd,cAAc,kBAAqB,GAAA,CAAC,kBAAmB,CAAA,EAAE,IAAI,EAAC;AAAA,QAC9D,QAAA,EAAU,CAAC,EAAO,KAAA;AAChB,UAAA,IAAA,CAAK,UAAW,CAAA,MAAA,CAAO,EAAE,CAAC,EAAE,MAAO,EAAA;AAAA,SACrC;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA;AACH,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/List/components/Header/components/SortingPickerItem/SortingPickerItem.mjs

@@ -0,0 +1,13 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import MenuItemView from '../../../../../../views/MenuItemView.mjs';
+
+const SortingPickerItem = (props) => {
+  const { sorting } = props;
+  return /* @__PURE__ */ jsx(MenuItemView, { id: sorting.id, children: sorting.name });
+};
+
+export { SortingPickerItem };
+//# sourceMappingURL=SortingPickerItem.mjs.map

package/dist/js/components/List/components/Header/components/SortingPickerItem/SortingPickerItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortingPickerItem.mjs","sources":["../../../../../../../../src/components/List/components/Header/components/SortingPickerItem/SortingPickerItem.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\";\n\ninterface Props {\n  sorting: Sorting<never>;\n}\n\nexport const SortingPickerItem: FC<Props> = (props) => {\n  const { sorting } = props;\n  return <MenuItemView id={sorting.id}>{sorting.name}</MenuItemView>;\n};\n"],"names":[],"mappings":";;;;AASa,MAAA,iBAAA,GAA+B,CAAC,KAAU,KAAA;AACrD,EAAM,MAAA,EAAE,SAAY,GAAA,KAAA;AACpB,EAAA,2BAAQ,YAAa,EAAA,EAAA,EAAA,EAAI,OAAQ,CAAA,EAAA,EAAK,kBAAQ,IAAK,EAAA,CAAA;AACrD;;;;"}

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

@@ -0,0 +1,87 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import locales from '../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+import 'invariant';
+import 'luxon';
+import 'react-aria-components';
+import 'clsx';
+import '../../../../../../lib/propsContext/propsContext.mjs';
+import '../../../../../../lib/viewComponentContext/viewComponentContext.mjs';
+import '@react-aria/utils';
+import 'remeda';
+import 'dot-prop';
+import '@tabler/icons-react';
+import '@mittwald/react-tunnel';
+import '../../../../../../lib/slotContext/slotContext.mjs';
+import { IconView } from '../../../../../Icon/components/icons/IconView.mjs';
+import ButtonView from '../../../../../../views/ButtonView.mjs';
+import { ContextMenu } from '../../../../../ContextMenu/ContextMenu.mjs';
+import { ContextMenuTrigger } from '../../../../../ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.mjs';
+import 'mobx';
+import '../../../../../../lib/controller/overlay/context.mjs';
+import '../../../../../Action/context.mjs';
+import '../../../../../Action/models/ActionStateContext.mjs';
+import { useList } from '../../../../hooks/useList.mjs';
+import MenuItemView from '../../../../../../views/MenuItemView.mjs';
+import TextView from '../../../../../../views/TextView.mjs';
+import '../ActiveFilters/ActiveFilters.mjs';
+import '@chakra-ui/live-region';
+import SectionView from '../../../../../../views/SectionView.mjs';
+import HeadingView from '../../../../../../views/HeadingView.mjs';
+import 'object-code';
+import 'react-children-utilities';
+import '../../../../model/List.mjs';
+import '../../../../listContext.mjs';
+
+const ViewModeMenu = () => {
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  const list = useList();
+  const selectedViewMode = list.viewMode;
+  const availableViewModes = [];
+  if (list.itemView?.showList) {
+    availableViewModes.push("list");
+  }
+  if (list.table) {
+    availableViewModes.push("table");
+  }
+  if (list.itemView?.showTiles) {
+    availableViewModes.push("tiles");
+  }
+  if (availableViewModes.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(ContextMenuTrigger, { children: [
+    /* @__PURE__ */ jsxs(
+      ButtonView,
+      {
+        variant: "outline",
+        color: "secondary",
+        "aria-label": stringFormatter.format("list.settings"),
+        children: [
+          /* @__PURE__ */ jsx(TextView, { children: stringFormatter.format(`list.settings.viewMode.${selectedViewMode}`) }),
+          /* @__PURE__ */ jsx(IconView, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(ContextMenu, { selectionMode: "single", selectedKeys: [selectedViewMode], children: /* @__PURE__ */ jsxs(SectionView, { children: [
+      /* @__PURE__ */ jsx(HeadingView, { children: stringFormatter.format("list.settings.viewMode") }),
+      availableViewModes.map((viewMode) => /* @__PURE__ */ jsx(
+        MenuItemView,
+        {
+          id: viewMode,
+          onAction: () => {
+            list.setViewMode(viewMode);
+          },
+          children: stringFormatter.format(`list.settings.viewMode.${viewMode}`)
+        },
+        viewMode
+      ))
+    ] }) })
+  ] });
+};
+
+export { ViewModeMenu };
+//# sourceMappingURL=ViewModeMenu.mjs.map

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

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

package/dist/js/components/List/components/Items/Items.mjs

@@ -0,0 +1,64 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'invariant';
+import 'luxon';
+import 'react-aria-components';
+import { EmptyView } from '../../views/EmptyView/EmptyView.mjs';
+import clsx from 'clsx';
+import 'react';
+import '@mittwald/react-tunnel';
+import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
+import '../../../../lib/propsContext/propsContext.mjs';
+import '@react-aria/utils';
+import 'remeda';
+import 'dot-prop';
+import 'react-aria';
+import '@tabler/icons-react';
+import '../../../../lib/slotContext/slotContext.mjs';
+import '@chakra-ui/live-region';
+import 'mobx';
+import '../../../../lib/controller/overlay/context.mjs';
+import '../../../Action/context.mjs';
+import '../../../Action/models/ActionStateContext.mjs';
+import { useList } from '../../hooks/useList.mjs';
+import '../Header/components/ActiveFilters/ActiveFilters.mjs';
+import DivView from '../../../../views/DivView.mjs';
+import { Item } from './components/Item/Item.mjs';
+import ItemsGridListView from '../../../../views/ItemsGridListView.mjs';
+import styles from './Items.module.scss.mjs';
+import { FallbackItems } from './components/FallbackItems/FallbackItems.mjs';
+import '../../model/List.mjs';
+import 'react-children-utilities';
+import '../../listContext.mjs';
+
+const Items = () => {
+  const list = useList();
+  const tiles = list.viewMode === "tiles";
+  const isLoading = list.loader.useIsLoading();
+  const isInitiallyLoading = list.loader.useIsInitiallyLoading();
+  if (!list.itemView) {
+    return null;
+  }
+  const items = list.items.entries.map((item) => /* @__PURE__ */ jsx(Item, { data: item.data, id: item.id }, item.id));
+  const rootClassName = clsx(
+    styles.items,
+    isLoading && styles.isLoading,
+    tiles && styles.tiles
+  );
+  return /* @__PURE__ */ jsx(DivView, { "aria-hidden": isInitiallyLoading, "aria-busy": isLoading, children: /* @__PURE__ */ jsx(
+    ItemsGridListView,
+    {
+      className: rootClassName,
+      ...list.componentProps,
+      renderEmptyState: () => /* @__PURE__ */ jsx(EmptyView, {}),
+      style: {
+        gridTemplateColumns: `repeat(auto-fill, minmax(${list.itemView.tileMaxWidth}px, 1fr))`
+      },
+      children: isInitiallyLoading ? /* @__PURE__ */ jsx(FallbackItems, {}) : items
+    }
+  ) });
+};
+
+export { Items, Items as default };
+//# sourceMappingURL=Items.mjs.map

package/dist/js/components/List/components/Items/Items.mjs.map

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

package/dist/js/components/List/components/Items/Items.module.scss.mjs

@@ -0,0 +1,15 @@
+"use client"
+/* */
+const items = "flow--list--items";
+const isLoading = "flow--list--items--is-loading";
+const tiles = "flow--list--items--tiles";
+const emptyView = "flow--list--items--empty-view";
+const styles = {
+	items: items,
+	isLoading: isLoading,
+	tiles: tiles,
+	emptyView: emptyView
+};
+
+export { styles as default, emptyView, isLoading, items, tiles };
+//# sourceMappingURL=Items.module.scss.mjs.map

package/dist/js/components/List/components/Items/Items.module.scss.mjs.map

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

package/dist/js/components/List/components/Items/components/FallbackItems/FallbackItems.mjs

@@ -0,0 +1,16 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { ItemContainer } from '../Item/Item.mjs';
+import { useList } from '../../../../hooks/useList.mjs';
+import { cloneElement } from 'react';
+import { ListItemSkeletonView } from '../Item/components/ListItemSkeletonView/ListItemSkeletonView.mjs';
+
+const FallbackItems = () => {
+  const list = useList();
+  const fallback = list.itemView?.fallback ?? /* @__PURE__ */ jsx(ListItemSkeletonView, { viewMode: list.viewMode });
+  return Array.from(Array(5)).map((_, i) => /* @__PURE__ */ jsx(ItemContainer, { id: i, data: i, children: cloneElement(fallback) }, i));
+};
+
+export { FallbackItems };
+//# sourceMappingURL=FallbackItems.mjs.map

package/dist/js/components/List/components/Items/components/FallbackItems/FallbackItems.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FallbackItems.mjs","sources":["../../../../../../../../src/components/List/components/Items/components/FallbackItems/FallbackItems.tsx"],"sourcesContent":["import { ItemContainer } from \"@/components/List/components/Items/components/Item/Item\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport type { FC } from \"react\";\nimport { cloneElement } from \"react\";\nimport { ListItemSkeletonView } from \"../Item/components/ListItemSkeletonView/ListItemSkeletonView\";\n\nexport type FallbackItemsProps = unknown;\n\nexport const FallbackItems: FC<FallbackItemsProps> = () => {\n  const list = useList();\n  const fallback = list.itemView?.fallback ?? (\n    <ListItemSkeletonView viewMode={list.viewMode} />\n  );\n\n  return Array.from(Array(5)).map((_, i) => (\n    <ItemContainer id={i} data={i as never} key={i}>\n      {cloneElement(fallback)}\n    </ItemContainer>\n  ));\n};\n"],"names":[],"mappings":";;;;;;AAQO,MAAM,gBAAwC,MAAM;AACzD,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAM,MAAA,QAAA,GAAW,KAAK,QAAU,EAAA,QAAA,wBAC7B,oBAAqB,EAAA,EAAA,QAAA,EAAU,KAAK,QAAU,EAAA,CAAA;AAGjD,EAAO,OAAA,KAAA,CAAM,KAAK,KAAM,CAAA,CAAC,CAAC,CAAE,CAAA,GAAA,CAAI,CAAC,CAAG,EAAA,CAAA,yBACjC,aAAc,EAAA,EAAA,EAAA,EAAI,GAAG,IAAM,EAAA,CAAA,EACzB,uBAAa,QAAQ,CAAA,EAAA,EADqB,CAE7C,CACD,CAAA;AACH;;;;"}

package/dist/js/components/List/components/Items/components/Item/Item.mjs

@@ -0,0 +1,49 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { useGridItemProps } from './hooks/useGridItemProps.mjs';
+import { useList } from '../../../../hooks/useList.mjs';
+import ItemsGridListItemView from '../../../../../../views/ItemsGridListItemView.mjs';
+import { Suspense } from 'react';
+import styles from './Item.module.scss.mjs';
+import { ListItemSkeletonView } from './components/ListItemSkeletonView/ListItemSkeletonView.mjs';
+
+const Item = (props) => {
+  const { id, data } = props;
+  const list = useList();
+  const itemView = list.itemView;
+  const { gridItemProps, children } = useGridItemProps(props);
+  if (!itemView) {
+    return null;
+  }
+  const textValue = itemView.textValue ? itemView.textValue(data) : void 0;
+  const href = itemView.href ? itemView.href(data) : void 0;
+  const hasAction = !!gridItemProps.onAction || !!href;
+  return /* @__PURE__ */ jsx(
+    ItemsGridListItemView,
+    {
+      id,
+      textValue,
+      href,
+      hasAction,
+      isTile: list.viewMode === "tiles",
+      ...gridItemProps,
+      children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ListItemSkeletonView, { viewMode: list.viewMode }), children })
+    }
+  );
+};
+const ItemContainer = (props) => {
+  const list = useList();
+  return /* @__PURE__ */ jsx(
+    ItemsGridListItemView,
+    {
+      textValue: "-",
+      className: styles.item,
+      isTile: list.viewMode === "tiles",
+      children: props.children
+    }
+  );
+};
+
+export { Item, ItemContainer, Item as default };
+//# sourceMappingURL=Item.mjs.map

package/dist/js/components/List/components/Items/components/Item/Item.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.mjs","sources":["../../../../../../../../src/components/List/components/Items/components/Item/Item.tsx"],"sourcesContent":["import { useGridItemProps } from \"@/components/List/components/Items/components/Item/hooks/useGridItemProps\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport ItemsGridListItemView from \"@/views/ItemsGridListItemView\";\nimport type { FC, PropsWithChildren } from \"react\";\nimport { Suspense } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport styles from \"./Item.module.scss\";\nimport { ListItemSkeletonView } from \"./components/ListItemSkeletonView/ListItemSkeletonView\";\n\ninterface Props extends PropsWithChildren {\n  id: Key;\n  data: never;\n}\n\nexport const Item = (props: Props) => {\n  const { id, data } = props;\n  const list = useList();\n\n  const itemView = list.itemView;\n\n  const { gridItemProps, children } = useGridItemProps(props);\n\n  if (!itemView) {\n    return null;\n  }\n\n  const textValue = itemView.textValue ? itemView.textValue(data) : undefined;\n  const href = itemView.href ? itemView.href(data) : undefined;\n  const hasAction = !!gridItemProps.onAction || !!href;\n\n  return (\n    <ItemsGridListItemView\n      id={id}\n      textValue={textValue}\n      href={href}\n      hasAction={hasAction}\n      isTile={list.viewMode === \"tiles\"}\n      {...gridItemProps}\n    >\n      <Suspense fallback={<ListItemSkeletonView viewMode={list.viewMode} />}>\n        {children}\n      </Suspense>\n    </ItemsGridListItemView>\n  );\n};\n\nexport const ItemContainer: FC<Props> = (props) => {\n  const list = useList();\n  return (\n    <ItemsGridListItemView\n      textValue=\"-\"\n      className={styles.item}\n      isTile={list.viewMode === \"tiles\"}\n    >\n      {props.children}\n    </ItemsGridListItemView>\n  );\n};\n\nexport default Item;\n"],"names":[],"mappings":";;;;;;;;AAca,MAAA,IAAA,GAAO,CAAC,KAAiB,KAAA;AACpC,EAAM,MAAA,EAAE,EAAI,EAAA,IAAA,EAAS,GAAA,KAAA;AACrB,EAAA,MAAM,OAAO,OAAQ,EAAA;AAErB,EAAA,MAAM,WAAW,IAAK,CAAA,QAAA;AAEtB,EAAA,MAAM,EAAE,aAAA,EAAe,QAAS,EAAA,GAAI,iBAAiB,KAAK,CAAA;AAE1D,EAAA,IAAI,CAAC,QAAU,EAAA;AACb,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,YAAY,QAAS,CAAA,SAAA,GAAY,QAAS,CAAA,SAAA,CAAU,IAAI,CAAI,GAAA,MAAA;AAClE,EAAA,MAAM,OAAO,QAAS,CAAA,IAAA,GAAO,QAAS,CAAA,IAAA,CAAK,IAAI,CAAI,GAAA,MAAA;AACnD,EAAA,MAAM,YAAY,CAAC,CAAC,aAAc,CAAA,QAAA,IAAY,CAAC,CAAC,IAAA;AAEhD,EACE,uBAAA,GAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA,EAAQ,KAAK,QAAa,KAAA,OAAA;AAAA,MACzB,GAAG,aAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,YAAS,QAAU,kBAAA,GAAA,CAAC,wBAAqB,QAAU,EAAA,IAAA,CAAK,QAAU,EAAA,CAAA,EAChE,QACH,EAAA;AAAA;AAAA,GACF;AAEJ;AAEa,MAAA,aAAA,GAA2B,CAAC,KAAU,KAAA;AACjD,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EACE,uBAAA,GAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,GAAA;AAAA,MACV,WAAW,MAAO,CAAA,IAAA;AAAA,MAClB,MAAA,EAAQ,KAAK,QAAa,KAAA,OAAA;AAAA,MAEzB,QAAM,EAAA,KAAA,CAAA;AAAA;AAAA,GACT;AAEJ;;;;"}

package/dist/js/components/List/components/Items/components/Item/Item.module.scss.mjs

@@ -0,0 +1,15 @@
+"use client"
+/* */
+const item = "flow--list--items--item";
+const isSelected = "flow--list--items--item--is-selected";
+const hasAction = "flow--list--items--item--has-action";
+const tile = "flow--list--items--item--tile";
+const styles = {
+	item: item,
+	isSelected: isSelected,
+	hasAction: hasAction,
+	tile: tile
+};
+
+export { styles as default, hasAction, isSelected, item, tile };
+//# sourceMappingURL=Item.module.scss.mjs.map

package/dist/js/components/List/components/Items/components/Item/Item.module.scss.mjs.map

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

package/dist/js/components/List/components/Items/components/Item/components/AccordionButton.mjs

@@ -0,0 +1,43 @@
+"use client"
+/* */
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'react';
+import '@tabler/icons-react';
+import 'clsx';
+import '@mittwald/react-tunnel';
+import '../../../../../../../lib/slotContext/slotContext.mjs';
+import '@react-aria/utils';
+import '../../../../../../../lib/propsContext/propsContext.mjs';
+import 'remeda';
+import 'dot-prop';
+import '../../../../../../../lib/viewComponentContext/viewComponentContext.mjs';
+import { IconChevronDown } from '../../../../../../Icon/components/icons/IconChevronDown.mjs';
+import { IconChevronUp } from '../../../../../../Icon/components/icons/IconChevronUp.mjs';
+import locales from '../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+import ButtonView from '../../../../../../../views/ButtonView.mjs';
+
+const AccordionButton = (props) => {
+  const { isExpanded, toggle, children, contentElementId } = props;
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ButtonView,
+      {
+        variant: "plain",
+        color: "secondary",
+        onPress: toggle,
+        "aria-label": stringFormatter.format(
+          "list.toggleExpandButton." + (isExpanded ? "collapse" : "expand")
+        ),
+        "aria-controls": contentElementId,
+        "aria-expanded": isExpanded,
+        children: isExpanded ? /* @__PURE__ */ jsx(IconChevronUp, {}) : /* @__PURE__ */ jsx(IconChevronDown, {})
+      }
+    ),
+    isExpanded && children
+  ] });
+};
+
+export { AccordionButton };
+//# sourceMappingURL=AccordionButton.mjs.map

package/dist/js/components/List/components/Items/components/Item/components/AccordionButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionButton.mjs","sources":["../../../../../../../../../src/components/List/components/Items/components/Item/components/AccordionButton.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport {\n  IconChevronDown,\n  IconChevronUp,\n} from \"@/components/Icon/components/icons\";\nimport locales from \"../../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport ButtonView from \"@/views/ButtonView\";\n\ninterface Props extends PropsWithChildren {\n  isExpanded: boolean;\n  toggle: () => void;\n  contentElementId: string;\n}\n\nexport const AccordionButton: FC<Props> = (props) => {\n  const { isExpanded, toggle, children, contentElementId } = props;\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  return (\n    <>\n      <ButtonView\n        variant=\"plain\"\n        color=\"secondary\"\n        onPress={toggle}\n        aria-label={stringFormatter.format(\n          \"list.toggleExpandButton.\" + (isExpanded ? \"collapse\" : \"expand\"),\n        )}\n        aria-controls={contentElementId}\n        aria-expanded={isExpanded}\n      >\n        {isExpanded ? <IconChevronUp /> : <IconChevronDown />}\n      </ButtonView>\n      {isExpanded && children}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAgBa,MAAA,eAAA,GAA6B,CAAC,KAAU,KAAA;AACnD,EAAA,MAAM,EAAE,UAAA,EAAY,MAAQ,EAAA,QAAA,EAAU,kBAAqB,GAAA,KAAA;AAC3D,EAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,OAAA;AAAA,QACR,KAAM,EAAA,WAAA;AAAA,QACN,OAAS,EAAA,MAAA;AAAA,QACT,cAAY,eAAgB,CAAA,MAAA;AAAA,UAC1B,0BAAA,IAA8B,aAAa,UAAa,GAAA,QAAA;AAAA,SAC1D;AAAA,QACA,eAAe,EAAA,gBAAA;AAAA,QACf,eAAe,EAAA,UAAA;AAAA,QAEd,QAAa,EAAA,UAAA,mBAAA,GAAA,CAAC,aAAc,EAAA,EAAA,CAAA,uBAAM,eAAgB,EAAA,EAAA;AAAA;AAAA,KACrD;AAAA,IACC,UAAc,IAAA;AAAA,GACjB,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/List/components/Items/components/Item/components/ListItemSkeletonView/ListItemSkeletonView.mjs

@@ -0,0 +1,27 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import AvatarView from '../../../../../../../../views/AvatarView.mjs';
+import FragmentView from '../../../../../../../../views/FragmentView.mjs';
+import HeadingView from '../../../../../../../../views/HeadingView.mjs';
+import ListItemViewContentView from '../../../../../../../../views/ListItemViewContentView.mjs';
+import SkeletonTextView from '../../../../../../../../views/SkeletonTextView.mjs';
+import SkeletonView from '../../../../../../../../views/SkeletonView.mjs';
+import TextView from '../../../../../../../../views/TextView.mjs';
+
+const ListItemSkeletonView = (props) => {
+  const { viewMode } = props;
+  const showTiles = viewMode === "tiles";
+  return /* @__PURE__ */ jsx(
+    ListItemViewContentView,
+    {
+      viewMode,
+      title: /* @__PURE__ */ jsx(FragmentView, { children: /* @__PURE__ */ jsx(HeadingView, { children: /* @__PURE__ */ jsx(SkeletonTextView, { width: "200px" }) }) }),
+      avatar: showTiles && /* @__PURE__ */ jsx(FragmentView, { children: /* @__PURE__ */ jsx(AvatarView, { children: /* @__PURE__ */ jsx(SkeletonView, { style: { aspectRatio: 16 / 9 } }) }) }),
+      subTitle: /* @__PURE__ */ jsx(FragmentView, { children: /* @__PURE__ */ jsx(TextView, { children: /* @__PURE__ */ jsx(SkeletonTextView, { width: "300px" }) }) })
+    }
+  );
+};
+
+export { ListItemSkeletonView };
+//# sourceMappingURL=ListItemSkeletonView.mjs.map

package/dist/js/components/List/components/Items/components/Item/components/ListItemSkeletonView/ListItemSkeletonView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemSkeletonView.mjs","sources":["../../../../../../../../../../src/components/List/components/Items/components/Item/components/ListItemSkeletonView/ListItemSkeletonView.tsx"],"sourcesContent":["import type { ListViewMode } from \"@/components/List/model/types\";\nimport AvatarView from \"@/views/AvatarView\";\nimport FragmentView from \"@/views/FragmentView\";\nimport HeadingView from \"@/views/HeadingView\";\nimport ListItemViewContentView from \"@/views/ListItemViewContentView\";\nimport SkeletonTextView from \"@/views/SkeletonTextView\";\nimport SkeletonView from \"@/views/SkeletonView\";\nimport TextView from \"@/views/TextView\";\nimport type { FC } from \"react\";\n\nexport interface ListItemSkeletonViewProps {\n  viewMode: ListViewMode;\n}\n\nexport const ListItemSkeletonView: FC<ListItemSkeletonViewProps> = (props) => {\n  const { viewMode } = props;\n\n  const showTiles = viewMode === \"tiles\";\n\n  return (\n    <ListItemViewContentView\n      viewMode={viewMode}\n      title={\n        <FragmentView>\n          <HeadingView>\n            <SkeletonTextView width=\"200px\" />\n          </HeadingView>\n        </FragmentView>\n      }\n      avatar={\n        showTiles && (\n          <FragmentView>\n            <AvatarView>\n              <SkeletonView style={{ aspectRatio: 16 / 9 }} />\n            </AvatarView>\n          </FragmentView>\n        )\n      }\n      subTitle={\n        <FragmentView>\n          <TextView>\n            <SkeletonTextView width=\"300px\" />\n          </TextView>\n        </FragmentView>\n      }\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAca,MAAA,oBAAA,GAAsD,CAAC,KAAU,KAAA;AAC5E,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AAErB,EAAA,MAAM,YAAY,QAAa,KAAA,OAAA;AAE/B,EACE,uBAAA,GAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,QAAA;AAAA,MACA,KAAA,kBACG,GAAA,CAAA,YAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA,EACC,8BAAC,gBAAiB,EAAA,EAAA,KAAA,EAAM,OAAQ,EAAA,CAAA,EAClC,CACF,EAAA,CAAA;AAAA,MAEF,MACE,EAAA,SAAA,oBACG,GAAA,CAAA,YAAA,EAAA,EACC,8BAAC,UACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,KAAA,EAAO,EAAE,WAAa,EAAA,EAAA,GAAK,CAAE,EAAA,EAAG,GAChD,CACF,EAAA,CAAA;AAAA,MAGJ,QAAA,kBACG,GAAA,CAAA,YAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EACC,8BAAC,gBAAiB,EAAA,EAAA,KAAA,EAAM,OAAQ,EAAA,CAAA,EAClC,CACF,EAAA;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/js/components/List/components/Items/components/Item/components/OptionsButton/OptionsButton.mjs

@@ -0,0 +1,46 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import locales from '../../../../../../../../_virtual/_.locale.json@8d5024994f97657f895a4e2a188d2d8a.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+import '@tabler/icons-react';
+import 'clsx';
+import '@mittwald/react-tunnel';
+import '../../../../../../../../lib/slotContext/slotContext.mjs';
+import '@react-aria/utils';
+import '../../../../../../../../lib/propsContext/propsContext.mjs';
+import 'remeda';
+import 'dot-prop';
+import '../../../../../../../../lib/viewComponentContext/viewComponentContext.mjs';
+import { IconContextMenu } from '../../../../../../../Icon/components/icons/IconContextMenu.mjs';
+import ButtonView from '../../../../../../../../views/ButtonView.mjs';
+import 'mobx';
+import '../../../../../../../../lib/controller/overlay/context.mjs';
+import 'invariant';
+import '../../../../../../../Action/context.mjs';
+import '../../../../../../../Action/models/ActionStateContext.mjs';
+import 'react-aria-components';
+import { ContextMenuTrigger } from '../../../../../../../ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.mjs';
+
+const OptionsButton = (props) => {
+  const { className, children } = props;
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  return /* @__PURE__ */ jsxs(ContextMenuTrigger, { children: [
+    /* @__PURE__ */ jsx(
+      ButtonView,
+      {
+        variant: "plain",
+        color: "secondary",
+        className,
+        "aria-label": stringFormatter.format("list.options"),
+        tunnelId: null,
+        children: /* @__PURE__ */ jsx(IconContextMenu, {})
+      }
+    ),
+    children
+  ] });
+};
+
+export { OptionsButton, OptionsButton as default };
+//# sourceMappingURL=OptionsButton.mjs.map

package/dist/js/components/List/components/Items/components/Item/components/OptionsButton/OptionsButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsButton.mjs","sources":["../../../../../../../../../../src/components/List/components/Items/components/Item/components/OptionsButton/OptionsButton.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport locales from \"../../../../../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { IconContextMenu } from \"@/components/Icon/components/icons\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { ContextMenuTrigger } from \"@/components/ContextMenu\";\n\ninterface Props extends PropsWithChildren, PropsWithClassName {}\n\nexport const OptionsButton: FC<Props> = (props) => {\n  const { className, children } = props;\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  return (\n    <ContextMenuTrigger>\n      <ButtonView\n        variant=\"plain\"\n        color=\"secondary\"\n        className={className}\n        aria-label={stringFormatter.format(\"list.options\")}\n        tunnelId={null}\n      >\n        <IconContextMenu />\n      </ButtonView>\n      {children}\n    </ContextMenuTrigger>\n  );\n};\n\nexport default OptionsButton;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAWa,MAAA,aAAA,GAA2B,CAAC,KAAU,KAAA;AACjD,EAAM,MAAA,EAAE,SAAW,EAAA,QAAA,EAAa,GAAA,KAAA;AAChC,EAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,4BACG,kBACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,OAAA;AAAA,QACR,KAAM,EAAA,WAAA;AAAA,QACN,SAAA;AAAA,QACA,YAAA,EAAY,eAAgB,CAAA,MAAA,CAAO,cAAc,CAAA;AAAA,QACjD,QAAU,EAAA,IAAA;AAAA,QAEV,8BAAC,eAAgB,EAAA,EAAA;AAAA;AAAA,KACnB;AAAA,IACC;AAAA,GACH,EAAA,CAAA;AAEJ;;;;"}