@sphereon/ui-components.ssi-react 0.1.3-unstable.14 → 0.1.3-unstable.145

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,19 @@
 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;
     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,16 @@
 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, SSITableViewRowContainerStyled as RowContainer, SSITableViewTableContainerStyled as TableContainer, TableViewRowSelectionCheckboxContainerStyled as RowSelectionCheckboxContainer, } from '../../../styles';
+import { TableCellType } from '../../../types';
+import PaginationControls from './PaginationControls';
 function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -16,26 +20,52 @@ 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, opts) => {
     switch (type) {
-        case TableCellTypeEnum.TEXT:
-            return _jsx(SSIText, { value: value, ...(truncationLength && { truncationLength }) });
-        case TableCellTypeEnum.LABEL: {
+        case TableCellType.TEXT:
+            const { truncationLength, enableHover = false } = opts ?? {};
+            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.ACTION_GROUP: {
+            const { actionGroup = { actions: [] } } = opts ?? { actions: [] };
+            const actions = actionGroup.actions.map((action) => ({
+                ...action,
+                onClick: () => action.onClick(row),
+            }));
+            return _jsx(DropDownList, { icon: ButtonIcon.MEATBALLS, buttons: actions, showBorder: true });
+        }
         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, 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.opts),
+        minSize: header.opts?.columnMinWidth,
+        maxSize: header.opts?.columnMaxWidth,
+        size: header.opts?.columnWidth,
     }));
     if (enableRowSelection) {
         availableColumns = [
@@ -46,41 +76,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(RowContainer, { 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, { 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,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 { 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, };

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,31 @@ 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';
+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, };

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 { SSITextH1SemiBoldDarkStyled, SSITextH2DarkStyled } 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(SSITextH1SemiBoldDarkStyled) `
+  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(SSITextH2DarkStyled) `
+  font-style: italic;
+`;
+export const CredentialIssuanceWizardViewEvidenceFilesContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;

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>;

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

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { SSIFlexDirectionRowViewStyled } from '../../containers';
+import { backgroundColors } from '@sphereon/ui-components.core';
+export const DropDownListContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  position: relative;
+  display: inline-block;
+  text-align: left;
+  align-items: center;
+  gap: 2px;
+`;
+export const DropDownListButtonStyled = styled.div `
+  display: inline-block !important;
+`;
+export const DropDownContainerStyled = styled.div `
+  position: absolute;
+  top: 100%;
+  right: 0;
+  width: 250px;
+  background-color: ${backgroundColors.primaryLight};
+  z-index: 1000;
+`;

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

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

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

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { SSIFlexDirectionRowViewStyled } from '../../containers';
+import { SSITextH2DarkStyled } from '../../../fonts';
+import { backgroundColors } from '@sphereon/ui-components.core';
+export const DropDownListItemContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  flex-direction: row;
+  align-items: center;
+  background-color: ${backgroundColors.primaryLight};
+  padding: 10px 16px;
+`;
+export const DropDownListItemCaptionContainerStyled = styled(SSITextH2DarkStyled) `
+  flex: 1;
+  margin-right: 8px;
+`;
+export const DropDownListItemIconContainerStyled = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 4px;
+  margin-right: 12px;
+`;

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

@@ -0,0 +1,10 @@
+export declare const FileSelectionFieldContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldContentContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldRemoveContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldRemoveButtonStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldRemoveButtonCircleIconStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldIconContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldFileDataContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldFileNameCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldFileSizeCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FileSelectionFieldPermissionSelectionContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+import { borderColors, fontColors } from '@sphereon/ui-components.core';
+import { SSITextH2SemiBoldDarkStyled, SSITextH7RegularStyled } from '../../../fonts';
+export const FileSelectionFieldContainerStyled = styled.div `
+  display: flex;
+  flex-grow: 1;
+  flex-direction: row;
+  border-radius: 6px;
+  border: 1px solid ${borderColors.lightGrey};
+  overflow: hidden;
+`;
+export const FileSelectionFieldContentContainerStyled = styled.div `
+  display: flex;
+  flex-direction: row;
+  padding: 5px 0 5px 8px;
+`;
+export const FileSelectionFieldRemoveContainerStyled = styled.div `
+  margin-left: auto;
+  border-left: 1px solid ${borderColors.lightGrey};
+  display: flex;
+  align-items: center;
+`;
+export const FileSelectionFieldRemoveButtonStyled = styled.div `
+  width: 42px;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`;
+export const FileSelectionFieldRemoveButtonCircleIconStyled = styled.div `
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${borderColors.darkGrey};
+  border-radius: 50%;
+`;
+export const FileSelectionFieldIconContainerStyled = styled.div `
+  margin-right: 12px;
+  width: 42px;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const FileSelectionFieldFileDataContainerStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+`;
+export const FileSelectionFieldFileNameCaptionStyled = styled(SSITextH2SemiBoldDarkStyled) `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 350px;
+`;
+export const FileSelectionFieldFileSizeCaptionStyled = styled(SSITextH7RegularStyled) `
+  color: ${fontColors.lightGrey};
+`;
+export const FileSelectionFieldPermissionSelectionContainerStyled = styled.div `
+  width: 152px;
+  margin-left: auto;
+  margin-right: 5px;
+`;