@vanillabp/bc-shared 0.0.3 → 0.0.4

package/dist/components/DefaultListCell.d.ts

@@ -1,14 +1,12 @@
 import { BoxExtendedProps, TextExtendedProps } from 'grommet';
-import { ColorType } from 'grommet/utils/index.js';
+import { ColorType, BackgroundType } from 'grommet/utils/index.js';
 import React, { PropsWithChildren, FC } from 'react';
-import { BackgroundType } from 'grommet/utils';
 import { ListItem, Column } from '../types/ListCell.js';
 import { TranslationFunction } from '../types/translate.js';
 
-declare const ENDED_FONT_COLOR = "light-4";
 declare const ENDED_FONT_COLOR_ODD = "#b4b4b4";
 declare type Alignment = 'left' | 'center' | 'right';
-declare const colorForEndedItemsOrUndefined: (item: ListItem<any>) => ColorType;
+declare const textColorAccordingToStatus: (item: ListItem<any>) => ColorType | undefined;
 interface ListCellProps extends BoxExtendedProps {
     background?: BackgroundType;
     align?: Alignment;
@@ -17,6 +15,7 @@ declare const ListCell: React.FC<PropsWithChildren<ListCellProps>>;
 interface TextListCellProps extends TextExtendedProps {
     item: ListItem<any>;
     value?: string | String;
+    column: string;
     tip?: string;
     showUnreadAsBold?: boolean;
     background?: BackgroundType;
@@ -28,7 +27,6 @@ interface DefaultListCellProps<D> {
     item: ListItem<D>;
     column: Column;
     showUnreadAsBold?: boolean;
-    defaultLanguage?: string;
     currentLanguage: string;
     nameOfList?: string;
     selectItem: (select: boolean) => void;
@@ -38,7 +36,7 @@ interface DefaultListCellProps<D> {
 interface DefaultListCellAwareProps<T> extends DefaultListCellProps<T> {
     defaultCell: FC<DefaultListCellProps<T>>;
 }
-declare const colorRowAccordingToUpdateStatus: <T extends ListItem<any>>(item: T) => BackgroundType | undefined;
+declare const backgroundColorAccordingToStatus: <T extends ListItem<any>>(item: T) => BackgroundType | undefined;
 declare const DefaultListCell: FC<DefaultListCellProps<any>>;
 
-export { Alignment, DefaultListCell, DefaultListCellAwareProps, DefaultListCellProps, ENDED_FONT_COLOR, ENDED_FONT_COLOR_ODD, ListCell, TextListCell, colorForEndedItemsOrUndefined, colorRowAccordingToUpdateStatus };
+export { Alignment, DefaultListCell, DefaultListCellAwareProps, DefaultListCellProps, ENDED_FONT_COLOR_ODD, ListCell, TextListCell, backgroundColorAccordingToStatus, textColorAccordingToStatus };

package/dist/components/DefaultListCell.js

@@ -5,6 +5,7 @@ import {
 } from "../chunk-YH4NJHER.js";
 import { jsx } from "react/jsx-runtime";
 import { Box, Text } from "grommet";
+import { memo } from "react";
 import { ListItemStatus } from "../types/index.js";
 import {
   getObjectProperty,
@@ -12,11 +13,11 @@ import {
   toLocaleStringWithoutSeconds,
   toLocaleTimeStringWithoutSeconds
 } from "../utils/index.js";
+import { UserDetailsBox } from "./index.js";
 const DATE_REGEXP = /^(\d{4})-(\d{2})-(\d{2})/;
-const ENDED_FONT_COLOR = "light-4";
 const ENDED_FONT_COLOR_ODD = "#b4b4b4";
-const colorForEndedItemsOrUndefined = (item) => {
-  return item.status !== ListItemStatus.ENDED ? void 0 : ENDED_FONT_COLOR;
+const textColorAccordingToStatus = (item) => {
+  return item.status === ListItemStatus.NEW ? "list-text-new" : item.status === ListItemStatus.UPDATED ? "list-text-updated" : item.status === ListItemStatus.ENDED ? "list-text-ended" : item.status === ListItemStatus.REMOVED_FROM_LIST ? "list-text-removed_from_list" : void 0;
 };
 const ListCell = (_a) => {
   var _b = _a, {
@@ -43,7 +44,7 @@ const ListCell = (_a) => {
     })
   );
 };
-const TextListCell = (_c) => {
+const TextListCell = memo((_c) => {
   var _d = _c, {
     item,
     value = "",
@@ -59,7 +60,7 @@ const TextListCell = (_c) => {
     "showUnreadAsBold",
     "background"
   ]);
-  const color = colorForEndedItemsOrUndefined(item);
+  const color = textColorAccordingToStatus(item);
   return /* @__PURE__ */ jsx(
     ListCell,
     {
@@ -87,28 +88,67 @@ const TextListCell = (_c) => {
       )
     }
   );
-};
-const render = (t, propertyValue, currentLanguage, defaultLanguage) => {
+}, (prevProps, nextProps) => {
+  if (prevProps.item.id !== nextProps.item.id)
+    return false;
+  if (prevProps.column !== nextProps.column)
+    return false;
+  return Object.is(prevProps.value, nextProps.value);
+});
+const PersonListCell = memo((_e) => {
+  var _f = _e, {
+    t,
+    item,
+    column,
+    value,
+    showUnreadAsBold = false,
+    background
+  } = _f, props = __objRest(_f, [
+    "t",
+    "item",
+    "column",
+    "value",
+    "showUnreadAsBold",
+    "background"
+  ]);
+  var _a, _b;
+  const color = textColorAccordingToStatus(item);
+  return /* @__PURE__ */ jsx(
+    ListCell,
+    {
+      background,
+      align: "left",
+      children: /* @__PURE__ */ jsx(
+        Text,
+        __spreadProps(__spreadValues({
+          truncate: true,
+          color,
+          weight: showUnreadAsBold && item.read === void 0 ? "bold" : "normal",
+          tip: { content: /* @__PURE__ */ jsx(UserDetailsBox, { user: value, t }) }
+        }, props), {
+          children: value === void 0 ? void 0 : (_b = (_a = value.displayShort) != null ? _a : value.email) != null ? _b : value.id
+        })
+      )
+    }
+  );
+}, (prevProps, nextProps) => {
+  if (prevProps.item.id !== nextProps.item.id)
+    return false;
+  if (prevProps.column !== nextProps.column)
+    return false;
+  return Object.is(prevProps.value, nextProps.value);
+});
+const render = (t, propertyValue, currentLanguage) => {
   let align = "left";
   let value;
-  let tip;
   if (typeof propertyValue === "object") {
-    let langValue = propertyValue[currentLanguage];
-    if (langValue !== void 0) {
-      propertyValue = langValue;
-    } else if (defaultLanguage !== void 0) {
-      langValue = propertyValue[defaultLanguage];
-      if (langValue !== void 0) {
-        propertyValue = langValue;
-      }
-    }
-  }
-  if (propertyValue === void 0) {
+    value = "[object - define custom cell to render content]";
+  } else if (propertyValue === void 0) {
     value = "";
   } else if (propertyValue instanceof Date) {
-    value = toLocaleTimeStringWithoutSeconds(propertyValue);
+    value = toLocaleTimeStringWithoutSeconds(propertyValue, currentLanguage);
   } else if (typeof propertyValue === "number") {
-    value = propertyValue.toLocaleString(window.navigator.language);
+    value = propertyValue.toLocaleString(currentLanguage != null ? currentLanguage : window.navigator.language);
     align = "right";
   } else if (typeof propertyValue === "boolean") {
     if (propertyValue) {
@@ -120,11 +160,11 @@ const render = (t, propertyValue, currentLanguage, defaultLanguage) => {
     const dateMatch = DATE_REGEXP.exec(propertyValue);
     if (dateMatch) {
       if (propertyValue.length === 10) {
-        value = toLocaleDateString(new Date(Date.parse(propertyValue)));
+        value = toLocaleDateString(new Date(Date.parse(propertyValue)), currentLanguage);
         align = "right";
       } else {
         const tmpDate = new Date(Date.parse(propertyValue));
-        value = toLocaleStringWithoutSeconds(tmpDate);
+        value = toLocaleStringWithoutSeconds(tmpDate, currentLanguage);
       }
     } else {
       value = propertyValue;
@@ -132,35 +172,61 @@ const render = (t, propertyValue, currentLanguage, defaultLanguage) => {
   }
   return { value, align };
 };
-const colorRowAccordingToUpdateStatus = (item) => item.status === ListItemStatus.NEW ? { color: "accent-3", opacity: 0.1 } : item.status === ListItemStatus.UPDATED ? { color: "accent-1", opacity: 0.15 } : item.status === ListItemStatus.ENDED ? { color: "light-2", opacity: 0.5 } : item.status === ListItemStatus.REMOVED_FROM_LIST ? { color: "light-2", opacity: 0.5 } : void 0;
+const backgroundColorAccordingToStatus = (item) => item.status === ListItemStatus.NEW ? "list-new" : item.status === ListItemStatus.UPDATED ? "list-updated" : item.status === ListItemStatus.ENDED ? "list-ended" : item.status === ListItemStatus.REMOVED_FROM_LIST ? "list-removed_from_list" : void 0;
 const DefaultListCell = ({
   item,
   column,
   showUnreadAsBold,
   currentLanguage,
-  defaultLanguage,
   t,
   selectItem
 }) => {
-  let propertyValue = getObjectProperty(item.data, column.path);
   let align = "left";
   let value;
   let tip;
-  if (column.path === "dueDate") {
-    value = toLocaleDateString(item.data.dueDate);
-    tip = toLocaleStringWithoutSeconds(item.data.dueDate);
+  let path = column.path;
+  if (column.type === "i18n") {
+    path = `${path}.${currentLanguage}`;
+  }
+  const background = backgroundColorAccordingToStatus(item);
+  let propertyValue = getObjectProperty(item.data, path);
+  if (column.type === "date" && Boolean(propertyValue)) {
+    const date = Object.prototype.toString.call(propertyValue) === "[object Date]" ? propertyValue : new Date(propertyValue.toString());
+    value = toLocaleDateString(date, currentLanguage);
+    tip = toLocaleStringWithoutSeconds(date, currentLanguage);
     align = "right";
+  } else if (column.type === "time" && Boolean(propertyValue)) {
+    const date = Object.prototype.toString.call(propertyValue) === "[object Date]" ? propertyValue : new Date(propertyValue.toString());
+    value = date.toLocaleTimeString(currentLanguage);
+    align = "right";
+  } else if (column.type === "date-time" && Boolean(propertyValue)) {
+    const date = Object.prototype.toString.call(propertyValue) === "[object Date]" ? propertyValue : new Date(propertyValue.toString());
+    value = date.toLocaleDateString() + " " + toLocaleTimeStringWithoutSeconds(date, currentLanguage);
+    tip = date.toLocaleTimeString(currentLanguage);
+    align = "right";
+  } else if (column.type === "person" && Boolean(propertyValue)) {
+    return /* @__PURE__ */ jsx(
+      PersonListCell,
+      {
+        t,
+        item,
+        value: propertyValue,
+        column: column.path,
+        showUnreadAsBold,
+        background
+      }
+    );
   } else {
-    const { value: v, align: a } = render(t, propertyValue, currentLanguage, defaultLanguage);
+    const { value: v, align: a } = render(t, propertyValue, currentLanguage);
     value = v;
     align = a;
   }
-  const background = colorRowAccordingToUpdateStatus(item);
   return /* @__PURE__ */ jsx(
     TextListCell,
     {
       item,
       value,
+      column: column.path,
       tip,
       showUnreadAsBold,
       background,
@@ -170,10 +236,9 @@ const DefaultListCell = ({
 };
 export {
   DefaultListCell,
-  ENDED_FONT_COLOR,
   ENDED_FONT_COLOR_ODD,
   ListCell,
   TextListCell,
-  colorForEndedItemsOrUndefined,
-  colorRowAccordingToUpdateStatus
+  backgroundColorAccordingToStatus,
+  textColorAccordingToStatus
 };

package/dist/components/DefaultListHeader.d.ts

@@ -10,7 +10,9 @@ interface DefaultListHeaderProps<D> {
     selectAll: (select: boolean) => void;
     allSelected: boolean;
     sort?: boolean;
+    isDefaultSort: boolean;
     sortAscending?: boolean;
+    defaultSortAscending: boolean;
     setSort: (column?: Column) => void;
     setSortAscending: (ascending: boolean) => void;
 }

package/dist/components/DefaultListHeader.js

@@ -6,12 +6,32 @@ const DefaultListHeader = ({
   column,
   currentLanguage,
   sort,
+  isDefaultSort,
   sortAscending,
+  defaultSortAscending,
   setSort,
   setSortAscending,
   allSelected,
   selectAll
 }) => {
+  const language = currentLanguage != null ? currentLanguage : window.navigator.language.replace(
+    /* exclude country */
+    /-.*$/,
+    ""
+  );
+  const setNewSortAscending = () => {
+    if (isDefaultSort) {
+      if (sortAscending === defaultSortAscending) {
+        setSortAscending(!defaultSortAscending);
+      } else {
+        setSort(void 0);
+      }
+    } else if (sortAscending) {
+      setSortAscending(false);
+    } else {
+      setSort(void 0);
+    }
+  };
   if (column.path === "id") {
     return /* @__PURE__ */ jsx(
       Box,
@@ -39,7 +59,7 @@ const DefaultListHeader = ({
         children: /* @__PURE__ */ jsx(
           Tip,
           {
-            content: column.title[currentLanguage] || column.title["en"],
+            content: column.title[language],
             children: /* @__PURE__ */ jsx(ContactInfo, {})
           }
         )
@@ -58,7 +78,7 @@ const DefaultListHeader = ({
           Text,
           {
             truncate: "tip",
-            children: column.title[currentLanguage] || column.title["en"]
+            children: column.title[language]
           }
         ),
         /* @__PURE__ */ jsx(
@@ -68,36 +88,49 @@ const DefaultListHeader = ({
             direction: "row",
             justify: "end",
             style: { maxHeight: "1.5rem", minWidth: "2rem" },
-            children: !column.sortable ? void 0 : !Boolean(sort) ? /* @__PURE__ */ jsx(
+            children: !column.sortable ? void 0 : /* @__PURE__ */ jsx(
               Box,
               {
-                overflow: "hidden",
-                focusIndicator: false,
+                style: { position: "relative" },
                 width: "1.6rem",
-                onClick: (event) => setSort(column),
-                children: /* @__PURE__ */ jsx(
-                  Unsorted,
+                height: "2rem",
+                align: "center",
+                children: !Boolean(sort) ? /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    style: { position: "relative", top: "-1px" },
+                    focusIndicator: false,
+                    onClick: (event) => setSort(column),
+                    direction: "column",
+                    justify: "around",
+                    children: /* @__PURE__ */ jsx(Unsorted, { size: "34px" })
+                  }
+                ) : sortAscending ? /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    focusIndicator: false,
+                    style: { marginRight: "-0.5rem" },
+                    width: "1.2rem",
+                    height: "2rem",
+                    direction: "column",
+                    justify: "around",
+                    onClick: (event) => setNewSortAscending(),
+                    children: /* @__PURE__ */ jsx(Ascend, { size: "18px" })
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  Box,
                   {
-                    size: "32rem"
+                    focusIndicator: false,
+                    style: { marginRight: "-0.5rem" },
+                    width: "1.2rem",
+                    height: "2rem",
+                    direction: "column",
+                    justify: "around",
+                    onClick: (event) => setNewSortAscending(),
+                    children: /* @__PURE__ */ jsx(Descend, { size: "18px" })
                   }
                 )
               }
-            ) : sortAscending ? /* @__PURE__ */ jsx(
-              Box,
-              {
-                focusIndicator: false,
-                onClick: (event) => setSortAscending(false),
-                pad: { right: "0.5rem" },
-                children: /* @__PURE__ */ jsx(Ascend, { size: "16rem" })
-              }
-            ) : /* @__PURE__ */ jsx(
-              Box,
-              {
-                focusIndicator: false,
-                onClick: (event) => setSort(void 0),
-                pad: { right: "0.5rem" },
-                children: /* @__PURE__ */ jsx(Descend, { size: "16rem" })
-              }
             )
           }
         )

package/dist/components/Link.js

@@ -5,19 +5,20 @@ import {
 import { jsx } from "react/jsx-runtime";
 import { Text } from "grommet";
 import styled from "styled-components";
+import { normalizeColor } from "grommet/utils/index.js";
 ;
 const StyledLink = styled(Text)`
   text-decoration: none;
-  color: ${(props) => props.theme.global.colors["accent-3"]};
+  color: ${(props) => props.color ? normalizeColor(props.color, props.theme) : normalizeColor(props.theme.global.colors["link"], props.theme)};
   cursor: pointer;
 
   &:hover {
     text-decoration: underline;
-    color: black;
+    color: ${(props) => props.color ? normalizeColor(props.color, props.theme) : normalizeColor(props.theme.global.colors["link"], props.theme)};
   }
 
   &:visited {
-    color: ${(props) => props.theme.global.colors["accent-3"]};
+    color: ${(props) => props.color ? normalizeColor(props.color, props.theme) : normalizeColor(props.theme.global.colors["link"], props.theme)};
   }
 `;
 const Link = (_a) => {

package/dist/components/UserDetailsBox.d.ts

@@ -0,0 +1,10 @@
+import { Person } from '@vanillabp/bc-official-gui-client';
+import { Person as Person$1 } from '../types/ListCell.js';
+import { TranslationFunction } from '../types/translate.js';
+
+declare const UserDetailsBox: ({ t, user }: {
+    t: TranslationFunction;
+    user: Person | Person$1;
+}) => JSX.Element;
+
+export { UserDetailsBox };

package/dist/components/UserDetailsBox.js

@@ -0,0 +1,42 @@
+import "../chunk-YH4NJHER.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Grid, Text } from "grommet";
+const UserDetailsBox = ({
+  t,
+  user
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Grid,
+    {
+      columns: ["auto", "auto"],
+      rows: ["auto", "auto", "auto"],
+      areas: [{ name: "person", start: [0, 0], end: [1, 0] }],
+      gap: "xsmall",
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            gridArea: "person",
+            style: { fontStyle: "italic" },
+            children: user.display
+          }
+        ),
+        /* @__PURE__ */ jsxs(Text, { children: [
+          t("person-id"),
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx(Text, { weight: "bold", children: user.id }),
+        user.email !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(Text, { children: [
+            t("person-email"),
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx(Text, { weight: "bold", children: user.email })
+        ] }) : void 0
+      ]
+    }
+  );
+};
+export {
+  UserDetailsBox
+};

package/dist/components/UserTaskAppLayout.js

@@ -25,6 +25,7 @@ const UserTaskAppLayout = ({
         /* @__PURE__ */ jsx(
           Box,
           {
+            overflow: { vertical: "auto" },
             fill: true,
             children
           }

package/dist/components/index.d.ts

@@ -7,9 +7,10 @@ export { Link } from './Link.js';
 export { Modal } from './ModalDialog.js';
 export { UserTaskAppLayout } from './UserTaskAppLayout.js';
 export { WarningListCell } from './WarningListCell.js';
-export { Alignment, DefaultListCell, DefaultListCellAwareProps, DefaultListCellProps, ENDED_FONT_COLOR, ENDED_FONT_COLOR_ODD, ListCell, TextListCell, colorForEndedItemsOrUndefined, colorRowAccordingToUpdateStatus } from './DefaultListCell.js';
+export { Alignment, DefaultListCell, DefaultListCellAwareProps, DefaultListCellProps, ENDED_FONT_COLOR_ODD, ListCell, TextListCell, backgroundColorAccordingToStatus, textColorAccordingToStatus } from './DefaultListCell.js';
 export { DefaultListHeader, DefaultListHeaderAwareProps, DefaultListHeaderProps } from './DefaultListHeader.js';
 export { CopyClipboard, CopyClipboardButton } from './CopyClipboard.js';
+export { UserDetailsBox } from './UserDetailsBox.js';
 import '@microsoft/fetch-event-source';
 import 'react';
 import 'grommet';
@@ -18,3 +19,4 @@ import 'i18next';
 import 'grommet/utils/index.js';
 import '../types/ListCell.js';
 import '../types/translate.js';
+import '@vanillabp/bc-official-gui-client';

package/dist/components/index.js

@@ -10,3 +10,4 @@ export * from "./WarningListCell.js";
 export * from "./DefaultListCell.js";
 export * from "./DefaultListHeader.js";
 export * from "./CopyClipboard.js";
+export * from "./UserDetailsBox.js";

package/dist/index.d.ts

@@ -7,9 +7,10 @@ export { Link } from './components/Link.js';
 export { Modal } from './components/ModalDialog.js';
 export { UserTaskAppLayout } from './components/UserTaskAppLayout.js';
 export { WarningListCell } from './components/WarningListCell.js';
-export { Alignment, DefaultListCell, DefaultListCellAwareProps, DefaultListCellProps, ENDED_FONT_COLOR, ENDED_FONT_COLOR_ODD, ListCell, TextListCell, colorForEndedItemsOrUndefined, colorRowAccordingToUpdateStatus } from './components/DefaultListCell.js';
+export { Alignment, DefaultListCell, DefaultListCellAwareProps, DefaultListCellProps, ENDED_FONT_COLOR_ODD, ListCell, TextListCell, backgroundColorAccordingToStatus, textColorAccordingToStatus } from './components/DefaultListCell.js';
 export { DefaultListHeader, DefaultListHeaderAwareProps, DefaultListHeaderProps } from './components/DefaultListHeader.js';
 export { CopyClipboard, CopyClipboardButton } from './components/CopyClipboard.js';
+export { UserDetailsBox } from './components/UserDetailsBox.js';
 export { useOnClickOutside } from './utils/clickOutside.js';
 export { debounce, debounceByKey } from './utils/debounce.js';
 export { REFRESH_TOKEN_HEADER, buildFetchApi } from './utils/fetchApi.js';
@@ -21,11 +22,13 @@ export { i18n } from './utils/i18n.js';
 export { theme } from './theme/index.js';
 export { UserTaskForm } from './types/UserTaskForm.js';
 export { ColumnsOfUserTaskFunction, UserTaskListCell } from './types/UserTaskListCell.js';
-export { Column, ListItem, ListItemStatus } from './types/ListCell.js';
+export { Column, ListItem, ListItemStatus, Person } from './types/ListCell.js';
 export { WorkflowPage } from './types/WorkflowPage.js';
 export { ColumnsOfWorkflowFunction, WorkflowListCell } from './types/WorkflowListCell.js';
 export { BcWorkflow, GetUserTasksFunction, NavigateToWorkflowFunction } from './types/BcWorkflow.js';
-export { BcUserTask, OpenUserTaskFunction, OpenWorkflowFunction, UnassignFunction } from './types/BcUserTask.js';
+export { AssignFunction, BcUserTask, ClaimFunction, OpenUserTaskFunction, OpenWorkflowFunction, UnassignFunction, UnclaimFunction } from './types/BcUserTask.js';
+export { BcWorkflowModule } from './types/BcWorkflowModule.js';
+export { WorkflowModule, WorkflowModuleComponent, WorkflowModuleComponentProps } from './types/WorkflowModuleComponent.js';
 export { TranslationFunction } from './types/translate.js';
 import '@microsoft/fetch-event-source';
 import 'react';

package/dist/theme/index.js

@@ -10,7 +10,17 @@ const theme = {
       "accent-4": "#333333",
       "placeholder": "#bbbbbb",
       "light-5": "#c7c7c7",
-      "light-6": "#b4b4b4"
+      "light-6": "#b4b4b4",
+      "link": "#663300",
+      "list-new": "rgba(102, 51, 0, 0.1)",
+      "list-text-new": "dark-1",
+      "list-updated": "rgba(255, 230, 153, 0.15)",
+      "list-text-updated": "dark-1",
+      "list-ended": "rgba(242, 242, 242, 0.25)",
+      "list-text-ended": "dark-4",
+      "list-removed_from_list": "rgba(242, 242, 242, 0.25)",
+      "list-text-removed_from_list": "dark-1",
+      "list-refresh": "#ffe699"
     },
     font: {
       family: "Roboto",
@@ -24,6 +34,9 @@ const theme = {
       outline: {
         color: "#e0a244"
       }
+    },
+    drop: {
+      zIndex: 99
     }
   },
   table: {

package/dist/types/BcUserTask.d.ts

@@ -2,11 +2,17 @@ import { UserTask } from '@vanillabp/bc-official-gui-client';
 
 declare type OpenUserTaskFunction = () => void;
 declare type OpenWorkflowFunction = () => void;
+declare type AssignFunction = (userId: string) => void;
 declare type UnassignFunction = (userId: string) => void;
+declare type ClaimFunction = () => void;
+declare type UnclaimFunction = () => void;
 interface BcUserTask extends UserTask {
     open: OpenUserTaskFunction;
     navigateToWorkflow: OpenWorkflowFunction;
+    assign: AssignFunction;
     unassign: UnassignFunction;
+    claim: ClaimFunction;
+    unclaim: UnclaimFunction;
 }
 
-export { BcUserTask, OpenUserTaskFunction, OpenWorkflowFunction, UnassignFunction };
+export { AssignFunction, BcUserTask, ClaimFunction, OpenUserTaskFunction, OpenWorkflowFunction, UnassignFunction, UnclaimFunction };

package/dist/types/BcWorkflowModule.d.ts

@@ -0,0 +1,30 @@
+import { UiUriType } from '@vanillabp/bc-official-gui-client';
+
+interface BcWorkflowModule {
+    /**
+     * The workflow module of this usertask
+     * @type {string}
+     * @memberof UserTask
+     */
+    workflowModuleId: string;
+    /**
+     * An URI as an entrypoint URI for UI components. Maybe a technical URL (e.g. for WEBPACK) or an URL targeting a human readable form (e.g. EXTERNAL)
+     * @type {string}
+     * @memberof UserTask
+     */
+    uiUri: string;
+    /**
+     *
+     * @type {UiUriType}
+     * @memberof UserTask
+     */
+    uiUriType: UiUriType;
+    /**
+     * An URI pointing to the workflow-module's own API (maybe used by user-task forms)
+     * @type {string}
+     * @memberof UserTask
+     */
+    workflowModuleUri: string;
+}
+
+export { BcWorkflowModule };

package/dist/types/ListCell.d.ts

@@ -4,6 +4,7 @@ interface Title {
 interface Column {
     title: Title;
     path: string;
+    type?: 'value' | 'i18n' | 'person' | 'date' | 'date-time' | 'time';
     priority: number;
     width: string;
     show: boolean;
@@ -11,6 +12,16 @@ interface Column {
     filterable: boolean;
     resizeable: boolean;
 }
+interface Person {
+    id: string;
+    display?: string;
+    displayShort?: string;
+    email?: string;
+    avatar?: number;
+    details?: {
+        [key: string]: any;
+    };
+}
 declare enum ListItemStatus {
     INITIAL = 0,
     NEW = 1,
@@ -27,4 +38,4 @@ interface ListItem<D> {
     read?: Date;
 }
 
-export { Column, ListItem, ListItemStatus };
+export { Column, ListItem, ListItemStatus, Person };

package/dist/types/ListCell.js

@@ -1,5 +1,4 @@
 import "../chunk-YH4NJHER.js";
-;
 var ListItemStatus = /* @__PURE__ */ ((ListItemStatus2) => {
   ListItemStatus2[ListItemStatus2["INITIAL"] = 0] = "INITIAL";
   ListItemStatus2[ListItemStatus2["NEW"] = 1] = "NEW";

package/dist/types/UserTaskListCell.d.ts

@@ -5,7 +5,6 @@ import { Column } from './ListCell.js';
 import { DefaultListCellAwareProps } from '../components/DefaultListCell.js';
 import 'grommet';
 import 'grommet/utils/index.js';
-import 'grommet/utils';
 import './translate.js';
 
 interface UserTaskListCellProps extends DefaultListCellAwareProps<BcUserTask> {

package/dist/types/WorkflowListCell.d.ts

@@ -5,7 +5,6 @@ import { Column } from './ListCell.js';
 import { BcWorkflow } from './BcWorkflow.js';
 import 'grommet';
 import 'grommet/utils/index.js';
-import 'grommet/utils';
 import './translate.js';
 import './BcUserTask.js';
 

package/dist/types/WorkflowModuleComponent.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { ToastFunction } from '../components/Toast.js';
+import 'grommet';
+
+interface WorkflowModule {
+    id: string;
+    version: number;
+    uri: string;
+}
+interface WorkflowModuleComponentProps {
+    workflowModule: WorkflowModule;
+    toast: ToastFunction;
+}
+declare type WorkflowModuleComponent = FC<WorkflowModuleComponentProps>;
+
+export { WorkflowModule, WorkflowModuleComponent, WorkflowModuleComponentProps };

package/dist/types/index.d.ts

@@ -1,14 +1,16 @@
 export { UserTaskForm } from './UserTaskForm.js';
 export { ColumnsOfUserTaskFunction, UserTaskListCell } from './UserTaskListCell.js';
-export { Column, ListItem, ListItemStatus } from './ListCell.js';
+export { Column, ListItem, ListItemStatus, Person } from './ListCell.js';
 export { WorkflowPage } from './WorkflowPage.js';
 export { ColumnsOfWorkflowFunction, WorkflowListCell } from './WorkflowListCell.js';
 export { BcWorkflow, GetUserTasksFunction, NavigateToWorkflowFunction } from './BcWorkflow.js';
-export { BcUserTask, OpenUserTaskFunction, OpenWorkflowFunction, UnassignFunction } from './BcUserTask.js';
+export { AssignFunction, BcUserTask, ClaimFunction, OpenUserTaskFunction, OpenWorkflowFunction, UnassignFunction, UnclaimFunction } from './BcUserTask.js';
+export { BcWorkflowModule } from './BcWorkflowModule.js';
+export { WorkflowModule, WorkflowModuleComponent, WorkflowModuleComponentProps } from './WorkflowModuleComponent.js';
 export { TranslationFunction } from './translate.js';
 import 'react';
 import '@vanillabp/bc-official-gui-client';
 import '../components/DefaultListCell.js';
 import 'grommet';
 import 'grommet/utils/index.js';
-import 'grommet/utils';
+import '../components/Toast.js';

package/dist/types/index.js

@@ -5,4 +5,6 @@ export * from "./WorkflowPage.js";
 export * from "./WorkflowListCell.js";
 export * from "./BcWorkflow.js";
 export * from "./BcUserTask.js";
+export * from "./BcWorkflowModule.js";
+export * from "./WorkflowModuleComponent.js";
 export * from "./translate.js";

package/dist/utils/fetchApi.d.ts

@@ -1,10 +1,10 @@
-import { Dispatch } from 'react';
 import { WakeupSseCallback } from '../components/SseProvider.js';
-import { ToastAction } from '../components/Toast.js';
+import { ToastFunction } from '../components/Toast.js';
 import '@microsoft/fetch-event-source';
+import 'react';
 import 'grommet';
 
 declare const REFRESH_TOKEN_HEADER = "x-refresh-token";
-declare const buildFetchApi: (dispatch: Dispatch<ToastAction>, wakeupSeeCallback?: WakeupSseCallback) => WindowOrWorkerGlobalScope['fetch'];
+declare const buildFetchApi: (toast: ToastFunction, wakeupSeeCallback?: WakeupSseCallback) => WindowOrWorkerGlobalScope['fetch'];
 
 export { REFRESH_TOKEN_HEADER, buildFetchApi };

package/dist/utils/fetchApi.js

@@ -4,7 +4,7 @@ import {
   __spreadValues
 } from "../chunk-YH4NJHER.js";
 const REFRESH_TOKEN_HEADER = "x-refresh-token";
-const doRequest = (dispatch, resolve, reject, input, init, refreshToken) => {
+const doRequest = (toast, resolve, reject, input, init, refreshToken) => {
   navigator.locks.request(
     "bc-webapp",
     {
@@ -32,41 +32,41 @@ const doRequest = (dispatch, resolve, reject, input, init, refreshToken) => {
           if (isRefresh && !Boolean(responseRefreshToken)) {
             window.localStorage.removeItem(REFRESH_TOKEN_HEADER);
           } else if (Boolean(storedRefreshToken)) {
-            doRequest(dispatch, resolve, reject, input, init, storedRefreshToken);
+            doRequest(toast, resolve, reject, input, init, storedRefreshToken);
             return;
           }
         } else if (response.status >= 500) {
-          dispatch({ type: "toast", toast: {
+          toast({
             namespace: "app",
             title: "error",
             message: "unexpected"
-          } });
+          });
         } else if (response.status === 403) {
-          dispatch({ type: "toast", toast: {
+          toast({
             namespace: "app",
             title: "error",
             message: "forbidden"
-          } });
+          });
         }
         resolve(response);
       } catch (error) {
-        dispatch({ type: "toast", toast: {
+        toast({
           namespace: "app",
           title: "error",
           message: "unexpected"
-        } });
+        });
         reject(error);
       }
     })
   );
 };
-const buildFetchApi = (dispatch, wakeupSeeCallback) => {
+const buildFetchApi = (toast, wakeupSeeCallback) => {
   return (input, init) => {
     return new Promise((resolve, reject) => {
       if (wakeupSeeCallback !== void 0) {
         wakeupSeeCallback();
       }
-      doRequest(dispatch, resolve, reject, input, init);
+      doRequest(toast, resolve, reject, input, init);
     });
   };
 };

package/dist/utils/timeUtils.d.ts

@@ -2,9 +2,9 @@ declare const isValidLocalDate: (localDate: string) => boolean;
 declare const parseLocalDate: (localDate: string | undefined) => Date | undefined;
 declare const parseLocalDateToIsoString: (localDate: string | undefined | null) => string | undefined;
 declare const toLocalDateString: (date?: Date) => string | undefined;
-declare const toLocaleTimeStringWithoutSeconds: (date?: Date) => string | undefined;
-declare const toLocaleDateString: (date?: Date) => string | undefined;
-declare const toLocaleStringWithoutSeconds: (date?: Date) => string | undefined;
+declare const toLocaleTimeStringWithoutSeconds: (date?: Date | string, language?: string) => string | undefined;
+declare const toLocaleDateString: (date?: Date | string, language?: string) => string | undefined;
+declare const toLocaleStringWithoutSeconds: (date?: Date | string, language?: string) => string | undefined;
 declare const currentHour: () => Date;
 declare const nextHours: (from: Date, hours: number, history: boolean) => Date;
 declare const hoursBetween: (from: Date, to: Date) => Array<Date>;

package/dist/utils/timeUtils.js

@@ -33,23 +33,29 @@ const toLocalDateString = (date) => {
   }
   return String(date.getFullYear()).padStart(4, "0") + "-" + String(date.getMonth() + 1).padStart(2, "0") + "-" + String(date.getDate()).padStart(2, "0");
 };
-const toLocaleTimeStringWithoutSeconds = (date) => {
+const toLocaleTimeStringWithoutSeconds = (date, language) => {
   if (!Boolean(date)) {
     return void 0;
   }
-  return date.toLocaleTimeString(window.navigator.language).replace(/:[0-9]{2}(?: |$)/, "");
+  if (typeof date === "string") {
+    date = new Date(date);
+  }
+  return date.toLocaleTimeString(language != null ? language : window.navigator.language).replace(/:[0-9]{2}(?: |$)/, "");
 };
-const toLocaleDateString = (date) => {
+const toLocaleDateString = (date, language) => {
   if (!Boolean(date)) {
     return void 0;
   }
-  return date.toLocaleDateString(window.navigator.language);
+  if (typeof date === "string") {
+    date = new Date(date);
+  }
+  return date.toLocaleDateString(language != null ? language : window.navigator.language);
 };
-const toLocaleStringWithoutSeconds = (date) => {
+const toLocaleStringWithoutSeconds = (date, language) => {
   if (!Boolean(date)) {
     return void 0;
   }
-  return `${toLocaleDateString(date)} ${toLocaleTimeStringWithoutSeconds(date)}`;
+  return `${toLocaleDateString(date, language)} ${toLocaleTimeStringWithoutSeconds(date, language)}`;
 };
 const currentHour = () => {
   const now = /* @__PURE__ */ new Date();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanillabp/bc-shared",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/vanillabp/business-cockpit.git"
@@ -17,7 +17,7 @@
   ],
   "dependencies": {
     "@microsoft/fetch-event-source": "2.0.1",
-    "@vanillabp/bc-official-gui-client": "0.0.3",
+    "@vanillabp/bc-official-gui-client": "0.0.4",
     "react-cookie": "4.1.1",
     "usehooks-ts": "2.7.1"
   },