@sphereon/ui-components.ssi-react 0.1.3-unstable.15 → 0.1.3-unstable.150

package/dist/components/views/SSICredentialCardView/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { backgroundColors, credentialCardColors, Localization, toLocalDateString } from '@sphereon/ui-components.core';
+import { backgroundColors, credentialCardColors, Localization, toLocalDateString, } from '@sphereon/ui-components.core';
 import SSILogo from '../../assets/logos/SSILogo';
 import SSIStatusLabel from '../../labels/SSIStatusLabel';
-import { SSIAlphaContainerStyled as AlphaContainer, SSICredentialCardViewContainerStyled as Container, SSICredentialCardViewBackgroundImageStyled as BackgroundImage, SSICredentialCardViewContentMainContainerStyled as ContentMainContainer, SSICredentialCardViewContentSubContainerStyled as ContentSubContainer, SSICredentialCardViewStatusContainerStyled as StatusContainer, SSICredentialCardViewCredentialSubtitleTextStyled as CredentialSubtitleText, SSICredentialCardViewCredentialTitleTextStyled as CredentialTitleText, SSITextH5LightStyled as ExpirationDateText, SSICredentialCardViewFooterContainerStyled as FooterContainer, SSITextH4LightStyled as H4Text, SSICredentialCardViewHeaderContainerStyled as HeaderContainer, SSICredentialCardViewContentIssueNameContainerStyled as IssueNameContainer, SSICredentialCardViewHeaderLogoContainerStyled as LogoContainer, SSICredentialCardViewContentPropertiesContainerStyled as PropertiesContainer, SSITextH6LightStyled as PropertyValueText, SSICredentialCardViewHeaderTitleContainerStyled as TitleContainer, SSIFlexDirectionColumnViewStyled as PropertyContainer, } from '../../../styles/components';
+import { SSIAlphaContainerStyled as AlphaContainer, SSICredentialCardViewContainerStyled as Container, SSICredentialCardViewBackgroundImageStyled as BackgroundImage, SSICredentialCardViewContentMainContainerStyled as ContentMainContainer, SSICredentialCardViewContentSubContainerStyled as ContentSubContainer, SSICredentialCardViewStatusContainerStyled as StatusContainer, SSICredentialCardViewCredentialSubtitleTextStyled as CredentialSubtitleText, SSICredentialCardViewCredentialTitleTextStyled as CredentialTitleText, SSITextH5LightStyled as ExpirationDateText, SSICredentialCardViewFooterContainerStyled as FooterContainer, SSITextH4LightStyled as H4Text, SSICredentialCardViewHeaderContainerStyled as HeaderContainer, SSICredentialCardViewContentIssueNameContainerStyled as IssueNameContainer, SSICredentialCardViewHeaderLogoContainerStyled as LogoContainer, SSICredentialCardViewContentPropertiesContainerStyled as PropertiesContainer, SSITextH6LightStyled as PropertyValueText, SSICredentialCardViewHeaderTitleContainerStyled as TitleContainer, SSIFlexDirectionColumnViewStyled as PropertyContainer, } from '../../../styles';
 const SSICredentialCardView = (props) => {
     const { header, body, footer } = props;
     const { credentialTitle, credentialSubtitle, logo } = props.header ?? {};
@@ -17,8 +17,7 @@ const SSICredentialCardView = (props) => {
     };
     return (_jsx(Container, { style: { backgroundColor }, children: _jsx(BackgroundImage, { style: {
                 ...(backgroundImage?.uri && { background: `url(${backgroundImage.uri})`, backgroundSize: 'cover' }),
-            }, children: _jsxs(AlphaContainer, { children: [header && (_jsxs(HeaderContainer, { children: [(!backgroundImage || logo) &&
-                                _jsx(LogoContainer, { children: _jsx(SSILogo, { logo: logo, color: textColor }) }), credentialTitle && (_jsxs(TitleContainer, { children: [_jsx(CredentialTitleText, { style: { color: textColor }, children: credentialTitle }), credentialSubtitle && _jsx(CredentialSubtitleText, { style: { color: textColor }, children: credentialSubtitle })] }))] })), body && (_jsx(ContentMainContainer, { children: _jsxs(ContentSubContainer, { children: [issuerName && (_jsx(IssueNameContainer, { children: _jsx(H4Text, { style: { color: textColor }, children: issuerName }) })), properties && _jsx(PropertiesContainer, { children: getPropertyElementsFrom(properties) })] }) })), footer && (_jsxs(FooterContainer, { children: [_jsx(ExpirationDateText, { style: { color: textColor }, children: expirationDate
+            }, children: _jsxs(AlphaContainer, { children: [header && (_jsxs(HeaderContainer, { children: [(!backgroundImage || logo) && (_jsx(LogoContainer, { children: _jsx(SSILogo, { logo: logo, color: textColor }) })), credentialTitle && (_jsxs(TitleContainer, { children: [_jsx(CredentialTitleText, { style: { color: textColor }, children: credentialTitle }), credentialSubtitle && _jsx(CredentialSubtitleText, { style: { color: textColor }, children: credentialSubtitle })] }))] })), body && (_jsx(ContentMainContainer, { children: _jsxs(ContentSubContainer, { children: [issuerName && (_jsx(IssueNameContainer, { children: _jsx(H4Text, { style: { color: textColor }, children: issuerName }) })), properties && _jsx(PropertiesContainer, { children: getPropertyElementsFrom(properties) })] }) })), footer && (_jsxs(FooterContainer, { children: [_jsx(ExpirationDateText, { style: { color: textColor }, children: expirationDate
                                     ? `${Localization.translate('credential_card_expires_message')} ${toLocalDateString(expirationDate)}`
                                     : Localization.translate('credential_status_never_expires_date_label') }), credentialStatus && (_jsx(StatusContainer, { children: credentialStatus && _jsx(SSIStatusLabel, { status: credentialStatus, color: textColor }) }))] }))] }) }) }));
 };

package/dist/components/views/SSITabView/SSITabViewHeader/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TabNavigationState } from '../../../../types';
-export type Props = {
+import { TabNavigationState } from '@sphereon/ui-components.core';
+type Props = {
     navigationState: TabNavigationState;
     onIndexChange: (index: number) => void;
 };

package/dist/components/views/SSITabView/SSITabViewHeader/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTitleContainerStyled as TitleContainer, SSITextH3Styled as TitleCaption, } from '../../../../styles/components';
+import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTitleContainerStyled as TitleContainer, SSITextH3Styled as TitleCaption, } from '../../../../styles';
 const SSITabViewHeader = (props) => {
     const { navigationState, onIndexChange } = props;
     return (_jsx(Container, { children: navigationState.routes.map((value, index) => {

package/dist/components/views/SSITabView/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TabViewRoute } from '../../../types';
-export type Props = {
+import { TabViewRoute } from '@sphereon/ui-components.core';
+type Props = {
     routes: Array<TabViewRoute>;
 };
 declare const SSITabView: React.FC<Props>;

package/dist/components/views/SSITabView/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import SSITabViewHeader from './SSITabViewHeader';
-import { SSITabViewContainerStyled as Container } from '../../../styles/components';
+import { SSITabViewContainerStyled as Container } from '../../../styles';
 const Tab = (props) => {
     return _jsx(React.Fragment, { children: props.children });
 };

package/dist/components/views/SSITableView/PaginationControls/index.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, FC } from 'react';
+import { PaginationProps } from '@mui/material';
+export type PaginationControlsProps = PaginationProps & {
+    goToInputId?: string;
+    containerStyle?: CSSProperties;
+};
+declare const PaginationControls: FC<PaginationControlsProps>;
+export default PaginationControls;

package/dist/components/views/SSITableView/PaginationControls/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack } from '@mui/material';
+import { GoToInputContainer, GoToInputStyled, PaginationContainerStyled, PaginationStyled } from '../../../../styles';
+import { Localization } from '@sphereon/ui-components.core';
+const PaginationControls = (props) => {
+    const { onKeyDown, containerStyle, goToInputId = 'goTo' } = props;
+    return (_jsxs(PaginationContainerStyled, { style: containerStyle, children: [_jsx(Stack, { children: _jsx(PaginationStyled, { ...props }) }), _jsxs(GoToInputContainer, { children: [Localization.translate('table_pagination_input_caption_go_to'), _jsx(GoToInputStyled, { id: goToInputId, onKeyDown: onKeyDown }), Localization.translate('table_pagination_input_caption_page')] })] }));
+};
+export default PaginationControls;

package/dist/components/views/SSITableView/SSITableViewHeader/index.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Button } from '../../../../types';
-export type Props = {
+type Props = {
     enableFiltering?: boolean;
     enableMostRecent?: boolean;
     actions?: Array<Button>;
+    onDelete?: () => Promise<void>;
 };
 declare const SSITableViewHeader: React.FC<Props>;
 export default SSITableViewHeader;

package/dist/components/views/SSITableView/SSITableViewHeader/index.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Localization } from '@sphereon/ui-components.core';
+import { ButtonIcon, Localization, statusColors } from '@sphereon/ui-components.core';
 import SSIIconButton from '../../../buttons/SSIIconButton';
-import { ButtonIconsEnum } from '../../../../types';
-import SSIDropDownList from '../../../lists/SSIDropDownList';
 import SSIPrimaryButton from '../../../buttons/SSIPrimaryButton';
-import { SSITableViewHeaderActionsContainerStyled as ActionsContainer, SSITableViewHeaderContainerStyled as Container, SSITableViewHeaderContentContainerStyled as ContentContainer, SSITextH3Styled as FilterCaption, SSITableViewHeaderFilterContainerStyled as FilterContainer, SSITableViewHeaderShowOptionContainerStyled as ShowOptionContainer, } from '../../../../styles/components';
+import { SSITableViewHeaderActionsContainerStyled as ActionsContainer, SSITableViewHeaderContainerStyled as Container, SSITableViewHeaderContentContainerStyled as ContentContainer, SSITextH3Styled as FilterCaption, SSITableViewHeaderFilterContainerStyled as FilterContainer, TableViewHeaderStaticActionsContainerStyled as StaticActionsContainer, } from '../../../../styles';
 const SSITableViewHeader = (props) => {
-    const { enableFiltering = false, enableMostRecent = false, actions = [] } = props;
-    return (_jsx(Container, { children: _jsx(ContentContainer, { children: _jsxs(ActionsContainer, { children: [enableFiltering && (_jsxs(FilterContainer, { children: [_jsx(SSIIconButton, { icon: ButtonIconsEnum.FILTER, onClick: async () => console.log('add filter clicked') }), _jsx(FilterCaption, { children: Localization.translate('action_filter_caption') })] })), enableMostRecent &&
-                        _jsx(ShowOptionContainer, { children: _jsx(SSIDropDownList, { label: Localization.translate('action_show_caption'), initialValue: 'Most recent' }) }), actions.map((action, index) => (_jsx(SSIPrimaryButton, { caption: action.caption, onClick: action.onClick, icon: action.icon }, index)))] }) }) }));
+    const { enableFiltering = false, enableMostRecent = false, actions = [], onDelete } = props;
+    const onDeleteClick = async () => {
+        await onDelete?.();
+    };
+    return (_jsxs(Container, { children: [_jsx(StaticActionsContainer, { children: onDelete && (_jsx(SSIIconButton, { caption: Localization.translate('action_delete_label'), icon: ButtonIcon.DELETE, iconColor: statusColors.error, onClick: onDeleteClick })) }), _jsx(ContentContainer, { style: { width: 'fit-content' }, children: _jsxs(ActionsContainer, { children: [enableFiltering && (_jsxs(FilterContainer, { children: [_jsx(SSIIconButton, { icon: ButtonIcon.FILTER, onClick: async () => console.log('add filter clicked') }), _jsx(FilterCaption, { children: Localization.translate('action_filter_caption') })] })), actions.map((action, index) => (_jsx(SSIPrimaryButton, { caption: action.caption, onClick: action.onClick, icon: action.icon }, index)))] }) })] }));
 };
 export default SSITableViewHeader;

package/dist/components/views/SSITableView/index.d.ts

@@ -1,16 +1,20 @@
 import { ReactElement } from 'react';
 import { ColumnResizeMode, Row } from '@tanstack/react-table';
 import { Button, ColumnHeader } from '../../../types';
-export type Props<T> = {
+import { PaginationControlsProps } from './PaginationControls';
+type Props<T> = {
     data: Array<T>;
     columns: Array<ColumnHeader<T>>;
     onRowClick?: (data: Row<T>) => Promise<void>;
+    onDelete?: (rows: Array<T>) => Promise<void>;
     enableRowSelection?: boolean;
+    enableRowHover?: boolean;
     enableFiltering?: boolean;
     enableMostRecent?: boolean;
     enableResultCount?: boolean;
     columnResizeMode?: ColumnResizeMode;
     actions?: Array<Button>;
+    pagination?: PaginationControlsProps;
 };
 declare const SSITableView: <T extends {}>(props: Props<T>) => ReactElement;
 export default SSITableView;

package/dist/components/views/SSITableView/index.js

@@ -1,12 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { createColumnHelper, flexRender, getCoreRowModel, useReactTable, } from '@tanstack/react-table';
-import { Localization } from '@sphereon/ui-components.core';
-import { TableCellTypeEnum } from '../../../types';
+import { ButtonIcon, Localization, selectionElementColors } from '@sphereon/ui-components.core';
 import SSITableViewHeader from './SSITableViewHeader';
 import SSITypeLabel from '../../labels/SSITypeLabel';
-import SSIText from '../../labels/SSIText';
-import { SSITableViewCellContainerStyled as CellContainer, SSITableViewContainerStyled as Container, SSITableViewHeaderCellContainerStyled as HeaderCellContainer, SSITableViewLabelCellStyled as LabelCell, SSITableViewResultCountCaptionStyled as ResultCountCaption, SSITableViewRowContainerStyled as RowContainer, SSITableViewTableContainerStyled as TableContainer, } from '../../../styles/components';
+import SSIHoverText from '../../fields/SSIHoverText';
+import SSIStatusLabel from '../../labels/SSIStatusLabel';
+import CredentialMiniCardView from '../CredentialMiniCardView';
+import DropDownList from '../../lists/DropDownList';
+import { SSITableViewCellContainerStyled as CellContainer, SSITableViewContainerStyled as Container, SSITableViewHeaderCellContainerStyled as HeaderCellContainer, SSITableViewLabelCellStyled as LabelCell, SSITableViewResultCountCaptionStyled as ResultCountCaption, SSITableViewHeaderRowContainerStyled as HeaderRowContainer, SSITableViewRowContainerStyled as RowContainer, SSITableViewTableContainerStyled as TableContainer, TableViewRowSelectionCheckboxContainerStyled as RowSelectionCheckboxContainer, } from '../../../styles';
+import { TableCellType } from '../../../types';
+import PaginationControls from './PaginationControls';
+import ComboBox from "../../fields/ComboBox";
+import CredentialDetailsView from "../CredentialViewItem";
 function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -16,26 +22,59 @@ function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     }, [ref, indeterminate]);
     return _jsx("input", { type: "checkbox", ref: ref, className: className + ' cursor-pointer', ...rest });
 }
-const getCellFormatting = (type, value, truncationLength) => {
+const getCellFormatting = (type, value, row, options) => {
     switch (type) {
-        case TableCellTypeEnum.TEXT:
-            return _jsx(SSIText, { value: value, ...(truncationLength && { truncationLength }) });
-        case TableCellTypeEnum.LABEL: {
+        case TableCellType.TEXT:
+            const { truncationLength, enableHover = false } = options ?? {};
+            return _jsx(SSIHoverText, { text: value, truncationLength: truncationLength, enableHover: enableHover });
+        case TableCellType.LABEL: {
             const labels = Array.isArray(value) ? value.map((label) => _jsx(SSITypeLabel, { type: label })) : _jsx(SSITypeLabel, { type: value });
             return _jsx(LabelCell, { children: labels });
         }
+        case TableCellType.STATUS: {
+            return _jsx(SSIStatusLabel, { status: value });
+        }
+        case TableCellType.CREDENTIAL_CARD: {
+            return _jsx(CredentialMiniCardView, { ...value });
+        }
+        case TableCellType.CREDENTIAL_DETAILS: {
+            return _jsx(CredentialDetailsView, { ...value, style: { maxWidth: 261 } });
+        }
+        case TableCellType.ACTIONS: {
+            const { actions = [] } = options ?? {};
+            const buttons = actions.map((action) => ({
+                ...action,
+                onClick: () => action.onClick(row),
+            }));
+            return _jsx(DropDownList, { icon: ButtonIcon.MEATBALLS, buttons: buttons, showBorder: true });
+        }
+        case TableCellType.COMBOBOX: {
+            const { defaultValue, onChange, selectOptions = [] } = options ?? {};
+            return _jsx(ComboBox, { defaultValue: defaultValue, value: value, onChange: onChange, options: selectOptions });
+        }
         default:
             return _jsx("div", {});
     }
 };
+const toRowSelectionObject = (rows) => {
+    const rowSelectionObject = {};
+    rows.forEach((row) => {
+        rowSelectionObject[row.rowId] = true;
+    });
+    return rowSelectionObject;
+};
 const SSITableView = (props) => {
-    const { columns, data, enableRowSelection = false, enableFiltering = false, enableMostRecent = false, enableResultCount = false, columnResizeMode = 'onChange', actions = [], onRowClick } = props;
-    const [rowSelection, setRowSelection] = React.useState({});
+    const { columns, data, enableRowSelection = false, enableRowHover = true, enableFiltering = false, enableMostRecent = false, enableResultCount = false, columnResizeMode = 'onChange', actions = [], onRowClick, onDelete, pagination, } = props;
+    const [rowSelection, setRowSelection] = React.useState([]);
+    const [focusedRowId, setFocusedRowId] = React.useState();
     const columnHelper = createColumnHelper();
     let availableColumns = columns.map((header) => columnHelper.accessor(header.accessor, {
         id: header.accessor,
         header: header.label,
-        cell: (info) => getCellFormatting(header.type, info.getValue(), header.truncationLength),
+        cell: (info) => getCellFormatting(header.type, info.getValue(), info.row, header.columnOptions?.cellOptions),
+        minSize: header.columnOptions?.columnMinWidth,
+        maxSize: header.columnOptions?.columnMaxWidth,
+        size: header.columnOptions?.columnWidth,
     }));
     if (enableRowSelection) {
         availableColumns = [
@@ -46,41 +85,64 @@ const SSITableView = (props) => {
                         indeterminate: table.getIsSomeRowsSelected(),
                         onChange: table.getToggleAllRowsSelectedHandler(),
                     } })),
-                cell: ({ row }) => (_jsx("div", { className: "px-1", children: _jsx(IndeterminateCheckbox, { ...{
+                cell: ({ row }) => (_jsx(RowSelectionCheckboxContainer, { children: (row.id === focusedRowId || rowSelection.length > 0) && (_jsx(IndeterminateCheckbox, { ...{
                             checked: row.getIsSelected(),
                             disabled: !row.getCanSelect(),
                             indeterminate: row.getIsSomeSelected(),
                             onChange: row.getToggleSelectedHandler(),
-                        } }) })),
+                        } })) })),
             },
             ...availableColumns,
         ];
     }
+    const onFocusRow = (rowId) => {
+        setFocusedRowId(rowId);
+    };
+    const onRowSelectionChange = (updatedRowSelection) => {
+        const currentRowSelection = updatedRowSelection(toRowSelectionObject(rowSelection));
+        const selection = Object.keys(currentRowSelection).map((key) => {
+            return {
+                rowId: key,
+                rowData: data[Number(key)],
+            };
+        });
+        setRowSelection(selection);
+    };
     const table = useReactTable({
+        defaultColumn: {
+            size: 0,
+        },
         state: {
-            rowSelection,
+            rowSelection: toRowSelectionObject(rowSelection),
         },
         enableRowSelection,
-        onRowSelectionChange: setRowSelection,
+        onRowSelectionChange: onRowSelectionChange,
         data,
         columns: availableColumns,
         columnResizeMode,
         getCoreRowModel: getCoreRowModel(),
     });
     const onRowClicked = async (row) => {
-        if (onRowClick) {
-            await onRowClick(row);
-        }
+        await onRowClick?.(row);
+    };
+    const onDeleteClicked = async () => {
+        await onDelete?.(rowSelection.map((row) => row.rowData));
     };
-    return (_jsx(Container, { children: _jsxs("div", { className: "overflow-x-auto", children: [enableResultCount &&
-                    _jsx(ResultCountCaption, { children: Localization.translate('result_count_label', {
+    return (_jsxs(Container, { children: [_jsxs("div", { className: "overflow-x-auto", children: [enableResultCount && (_jsx(ResultCountCaption, { children: Localization.translate('result_count_label', {
                             count: data.length,
                             maxCount: data.length,
-                        }) }), (enableFiltering || enableMostRecent || actions.length > 0) &&
-                    _jsx(SSITableViewHeader, { actions: actions, enableFiltering: enableFiltering, enableMostRecent: enableMostRecent }), _jsxs(TableContainer, { children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx(RowContainer, { children: headerGroup.headers.map((header) => (_jsxs(HeaderCellContainer, { colSpan: header.colSpan, style: { width: header.getSize() }, children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), _jsx("div", { className: `resizer ${header.column.getIsResizing() ? 'isResizing' : ''}`, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), style: {
-                                                transform: columnResizeMode === 'onEnd' && header.column.getIsResizing()
-                                                    ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)`
-                                                    : '',
-                                            } })] }, header.id))) }, headerGroup.id))) }), _jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsx(RowContainer, { onClick: () => onRowClicked(row), children: row.getVisibleCells().map((cell) => (_jsx(CellContainer, { style: { width: cell.column.getSize() }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] })] }) }));
+                        }) })), (enableFiltering || enableMostRecent || actions.length > 0) && (_jsx(SSITableViewHeader, { actions: actions, enableFiltering: enableFiltering, enableMostRecent: enableMostRecent, ...(onDelete && { onDelete: onDeleteClicked }) })), _jsxs(TableContainer, { children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx(HeaderRowContainer, { children: headerGroup.headers.map((header) => (_jsxs(HeaderCellContainer, { colSpan: header.colSpan, style: {
+                                            ...(header.column.columnDef.minSize && { minWidth: header.column.columnDef.minSize }),
+                                            ...(header.column.columnDef.maxSize && { maxWidth: header.column.columnDef.maxSize }),
+                                            ...(header.column.columnDef.size !== 0 && { width: header.column.columnDef.size }),
+                                        }, children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), _jsx("div", { className: `resizer ${header.column.getIsResizing() ? 'isResizing' : ''}`, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), style: {
+                                                    transform: columnResizeMode === 'onEnd' && header.column.getIsResizing()
+                                                        ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)`
+                                                        : '',
+                                                } })] }, header.id))) }, headerGroup.id))) }), _jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsx(RowContainer, { enableHover: enableRowHover, onClick: () => onRowClicked(row), onMouseEnter: () => onFocusRow(row.id), onMouseLeave: () => onFocusRow(), style: { ...(row.getIsSelected() && { backgroundColor: selectionElementColors.selectedRow }) }, children: row.getVisibleCells().map((cell) => (_jsx(CellContainer, { style: {
+                                            ...(cell.column.columnDef.minSize && { minWidth: cell.column.columnDef.minSize }),
+                                            ...(cell.column.columnDef.maxSize && { maxWidth: cell.column.columnDef.maxSize }),
+                                            ...(cell.column.columnDef.size !== 0 && { width: cell.column.columnDef.size }),
+                                        }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] })] }), pagination && _jsx(PaginationControls, { ...pagination })] }));
 };
 export default SSITableView;

package/dist/helpers/index.d.ts

@@ -0,0 +1 @@
+export * from './toastHelper';

package/dist/helpers/index.js

@@ -0,0 +1 @@
+export * from './toastHelper';

package/dist/helpers/toastHelper.d.ts

@@ -0,0 +1,3 @@
+import { ToastCustomProps, ToastType } from '@sphereon/ui-components.core';
+import { ToastConfigParams } from '../types';
+export declare const showToast: (type: ToastType, params: ToastConfigParams<ToastCustomProps>) => Promise<void>;

package/dist/helpers/toastHelper.js

@@ -0,0 +1,14 @@
+import { toast } from 'react-toastify';
+import { toastConfig } from '../@config/toasts';
+export const showToast = async (type, params) => {
+    const { title, message, onClick, props } = params;
+    if (!toastConfig.hasOwnProperty(type)) {
+        return Promise.reject('Unknown toast type');
+    }
+    toast(toastConfig[type]({
+        title,
+        message,
+        onClick,
+        props,
+    }));
+};

package/dist/index.d.ts

@@ -1,6 +1,8 @@
+import SSIToastContainer from './components/messageBoxes/toasts/SSIToastContainer';
 import SSIStatusLabel from './components/labels/SSIStatusLabel';
 import SSICredentialCardView from './components/views/SSICredentialCardView';
-import SSICredentialMiniCardView from './components/views/SSICredentialMiniCardView';
+import CredentialMiniCardView from './components/views/CredentialMiniCardView';
+import { CredentialMiniCardViewProps } from './components/views/CredentialMiniCardView';
 import SSICheckmarkBadge from './components/assets/badges/SSICheckmarkBadge';
 import SSIExclamationMarkBadge from './components/assets/badges/SSIExclamationMarkBadge';
 import SSIPlaceholderLogo from './components/assets/logos/SSIPlaceholderLogo';
@@ -11,13 +13,33 @@ import SSIArrowDownIcon from './components/assets/icons/SSIArrowDownIcon';
 import SSITypeLabel from './components/labels/SSITypeLabel';
 import SSIIconButton from './components/buttons/SSIIconButton';
 import SSIPrimaryButton from './components/buttons/SSIPrimaryButton';
-import SSIDropDownList from './components/lists/SSIDropDownList';
+import DropDownList from './components/lists/DropDownList';
 import SSITableView from './components/views/SSITableView';
 import SSITableViewHeader from './components/views/SSITableView/SSITableViewHeader';
 import SSITabView from './components/views/SSITabView';
 import SSITabViewHeader from './components/views/SSITabView/SSITabViewHeader';
 import SSIProfileIcon from './components/assets/icons/SSIProfileIcon';
 import SSISecondaryButton from './components/buttons/SSISecondaryButton';
+import SSICheckbox from './components/fields/SSICheckbox';
+import SSIActivityIndicator from './components/indicators/SSIActivityIndicator';
+import SSIHoverText from './components/fields/SSIHoverText';
+import ProgressStepIndicator from './components/indicators/ProgressStepIndicator';
+import StepMarker from './components/assets/markers/StepMarker';
+import DocumentIcon from './components/assets/icons/DocumentIcon';
+import CrossIcon from './components/assets/icons/CrossIcon';
+import ImageIcon from './components/assets/icons/ImageIcon';
+import FileSelection from './components/fields/FileSelection';
+import ComboBox from './components/fields/ComboBox';
+import DragAndDropBox from './components/fields/DragAndDropBox';
+import PersonPlaceholder from './components/assets/placeholders/PersonPlaceholder';
+import PassportPhotoControl, { passportPhotoControlTester } from './components/fields/JSONForms/PassportPhotoControl';
+import CredentialIssuanceWizardView from './components/views/CredentialIssuanceWizardView';
+import PaginationControls from './components/views/SSITableView/PaginationControls';
+import PaginationControlsProps from './components/views/SSITableView/PaginationControls';
+import CredentialViewItem from './components/views/CredentialViewItem';
+import { Row } from '@tanstack/react-table';
+export * from './styles/fonts';
 export * from './types';
-export * from './styles/components/fonts';
-export { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, };
+export * from './helpers';
+export * from './utils';
+export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem };

package/dist/index.js

@@ -1,6 +1,7 @@
+import SSIToastContainer from './components/messageBoxes/toasts/SSIToastContainer';
 import SSIStatusLabel from './components/labels/SSIStatusLabel';
 import SSICredentialCardView from './components/views/SSICredentialCardView';
-import SSICredentialMiniCardView from './components/views/SSICredentialMiniCardView';
+import CredentialMiniCardView from './components/views/CredentialMiniCardView';
 import SSICheckmarkBadge from './components/assets/badges/SSICheckmarkBadge';
 import SSIExclamationMarkBadge from './components/assets/badges/SSIExclamationMarkBadge';
 import SSIPlaceholderLogo from './components/assets/logos/SSIPlaceholderLogo';
@@ -11,13 +12,32 @@ import SSIArrowDownIcon from './components/assets/icons/SSIArrowDownIcon';
 import SSITypeLabel from './components/labels/SSITypeLabel';
 import SSIIconButton from './components/buttons/SSIIconButton';
 import SSIPrimaryButton from './components/buttons/SSIPrimaryButton';
-import SSIDropDownList from './components/lists/SSIDropDownList';
+import DropDownList from './components/lists/DropDownList';
 import SSITableView from './components/views/SSITableView';
 import SSITableViewHeader from './components/views/SSITableView/SSITableViewHeader';
 import SSITabView from './components/views/SSITabView';
 import SSITabViewHeader from './components/views/SSITabView/SSITabViewHeader';
 import SSIProfileIcon from './components/assets/icons/SSIProfileIcon';
 import SSISecondaryButton from './components/buttons/SSISecondaryButton';
+import SSICheckbox from './components/fields/SSICheckbox';
+import SSIActivityIndicator from './components/indicators/SSIActivityIndicator';
+import SSIHoverText from './components/fields/SSIHoverText';
+import ProgressStepIndicator from './components/indicators/ProgressStepIndicator';
+import StepMarker from './components/assets/markers/StepMarker';
+import DocumentIcon from './components/assets/icons/DocumentIcon';
+import CrossIcon from './components/assets/icons/CrossIcon';
+import ImageIcon from './components/assets/icons/ImageIcon';
+import FileSelection from './components/fields/FileSelection';
+import ComboBox from './components/fields/ComboBox';
+import DragAndDropBox from './components/fields/DragAndDropBox';
+import PersonPlaceholder from './components/assets/placeholders/PersonPlaceholder';
+import PassportPhotoControl, { passportPhotoControlTester } from './components/fields/JSONForms/PassportPhotoControl';
+import CredentialIssuanceWizardView from './components/views/CredentialIssuanceWizardView';
+import PaginationControls from './components/views/SSITableView/PaginationControls';
+import PaginationControlsProps from './components/views/SSITableView/PaginationControls';
+import CredentialViewItem from './components/views/CredentialViewItem';
+export * from './styles/fonts';
 export * from './types';
-export * from './styles/components/fonts';
-export { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, };
+export * from './helpers';
+export * from './utils';
+export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem };

package/dist/renders/jsonFormsRenders.d.ts

@@ -0,0 +1,2 @@
+import { JsonFormsRendererRegistryEntry } from '@jsonforms/core';
+export declare const jsonFormsMaterialRenderers: Array<JsonFormsRendererRegistryEntry>;

package/dist/renders/jsonFormsRenders.js

@@ -0,0 +1,6 @@
+import { materialRenderers } from '@jsonforms/material-renderers';
+import PassportPhotoControl, { passportPhotoControlTester } from '../components/fields/JSONForms/PassportPhotoControl';
+export const jsonFormsMaterialRenderers = [
+    ...materialRenderers,
+    { tester: passportPhotoControlTester, renderer: PassportPhotoControl },
+];

package/dist/styles/colors.d.ts

@@ -0,0 +1,3 @@
+type Gradient = 100 | 200;
+export declare const gradientColors: Record<Gradient, string>;
+export {};

package/dist/styles/colors.js

@@ -0,0 +1,5 @@
+import { gradientsColors } from '@sphereon/ui-components.core';
+export const gradientColors = {
+    100: `linear-gradient(135deg, ${gradientsColors[100].primaryColor} 0%, ${gradientsColors[100].secondaryColor} 100%)`,
+    200: `linear-gradient(135deg, ${gradientsColors[200].primaryColor} 0%, ${gradientsColors[200].secondaryColor} 100%)`,
+};

package/dist/styles/components/components/CredentialIssuanceWizardView/index.d.ts

@@ -0,0 +1,9 @@
+export declare const CredentialIssuanceWizardViewContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewCredentialTypeContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewCredentialTypeTitleStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewFormContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewEvidenceContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewEvidenceContentContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewEvidenceTitleContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewEvidenceTitleOptionalStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialIssuanceWizardViewEvidenceFilesContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/styles/components/components/CredentialIssuanceWizardView/index.js

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+import { backgroundColors, borderColors, SSIRoundedEdgesCss } from "@sphereon/ui-components.core";
+import { SSITextH1SemiBoldStyled, SSITextH2Styled } from "../../../fonts";
+export const CredentialIssuanceWizardViewContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 42px;
+  width: 560px;
+  height: fit-content;
+`;
+export const CredentialIssuanceWizardViewCredentialTypeContainerStyled = styled.div `
+  border: 1px solid ${borderColors.lightGrey};
+  ${SSIRoundedEdgesCss};
+  background-color: ${backgroundColors.primaryLight};
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  flex-grow: 1;
+`;
+export const CredentialIssuanceWizardViewCredentialTypeTitleStyled = styled(SSITextH1SemiBoldStyled) `
+  text-align: left;
+`;
+export const CredentialIssuanceWizardViewFormContainerStyled = styled.div `
+  flex-grow: 1;
+  border: 1px solid ${borderColors.lightGrey};
+  background-color: ${backgroundColors.primaryLight};
+  ${SSIRoundedEdgesCss};
+  padding: 24px;
+`;
+export const CredentialIssuanceWizardViewEvidenceContainerStyled = styled.div `
+  flex-grow: 1;
+  border: 1px solid ${borderColors.lightGrey};
+  background-color: ${backgroundColors.primaryLight};
+  ${SSIRoundedEdgesCss};
+  padding: 24px;
+`;
+export const CredentialIssuanceWizardViewEvidenceContentContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+`;
+export const CredentialIssuanceWizardViewEvidenceTitleContainerStyled = styled.div `
+  display: flex; 
+  flex-direction: row;
+  gap: 4px;
+`;
+export const CredentialIssuanceWizardViewEvidenceTitleOptionalStyled = styled(SSITextH2Styled) `
+  font-style: italic;
+`;
+export const CredentialIssuanceWizardViewEvidenceFilesContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;

package/dist/styles/components/components/CredentialViewItem/index.d.ts

@@ -0,0 +1,4 @@
+export declare const CredentialViewItemContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialViewItemTitleCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialViewItemStatusContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CredentialViewItemExpirationDateCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/styles/components/components/CredentialViewItem/index.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+import { SSIFlexDirectionColumnViewStyled } from '../../containers';
+import { SSITextH3Styled, SSITextH5Styled } from '../../../fonts';
+export const CredentialViewItemContainerStyled = styled(SSIFlexDirectionColumnViewStyled) `
+  gap: 6px;
+`;
+export const CredentialViewItemTitleCaptionStyled = styled(SSITextH3Styled) `
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-all;
+  text-overflow: ellipsis;
+`;
+export const CredentialViewItemStatusContainerStyled = styled.div `
+  margin-top: 3px;
+  margin-left: auto;
+  padding-left: 9px;
+`;
+export const CredentialViewItemExpirationDateCaptionStyled = styled(SSITextH5Styled) `
+  margin-left: auto;
+`;

package/dist/styles/components/components/DragAndDropBox/index.d.ts

@@ -0,0 +1,4 @@
+export declare const DragAndDropBoxContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DragAndDropBoxHiddenInputStyled: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const DragAndDropBoxCaptionContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DragAndDropBoxDescriptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/styles/components/components/DragAndDropBox/index.js

@@ -0,0 +1,25 @@
+import { backgroundColors, borderColors, fontColors } from '@sphereon/ui-components.core';
+import styled from 'styled-components';
+import { SSITextH7RegularStyled } from '../../../fonts';
+export const DragAndDropBoxContainerStyled = styled.div `
+  background-color: ${backgroundColors.lightGrey};
+  flex-grow: 1;
+  height: 138px;
+  cursor: pointer;
+  border: 1px dashed ${borderColors.lightGrey};
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const DragAndDropBoxHiddenInputStyled = styled.input `
+  display: none;
+`;
+export const DragAndDropBoxCaptionContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+export const DragAndDropBoxDescriptionStyled = styled(SSITextH7RegularStyled) `
+  color: ${fontColors.lightGrey};
+`;

package/dist/styles/components/components/DropDownList/index.d.ts

@@ -0,0 +1,3 @@
+export declare const DropDownListContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropDownListButtonStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropDownContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;