@sphereon/ui-components.ssi-react 0.2.1-next.5 → 0.2.1-next.72
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +201 -636
- package/dist/components/assets/icons/CopyIcon/index.d.ts +9 -0
- package/dist/components/assets/icons/CopyIcon/index.js +7 -0
- package/dist/components/assets/icons/PencilIcon/index.d.ts +8 -0
- package/dist/components/assets/icons/PencilIcon/index.js +7 -0
- package/dist/components/assets/icons/ViewIcon/index.d.ts +9 -0
- package/dist/components/assets/icons/ViewIcon/index.js +7 -0
- package/dist/components/buttons/IconButton/index.js +2 -22
- package/dist/components/fields/ComboBox/index.js +1 -1
- package/dist/components/fields/DragAndDropBox/index.js +2 -2
- package/dist/components/fields/FileSelection/index.js +2 -3
- package/dist/components/fields/JSONForms/PassportPhotoControl/index.js +3 -6
- package/dist/components/fields/SSICheckbox/index.js +1 -1
- package/dist/components/fields/SSIHoverText/index.js +1 -1
- package/dist/components/fields/TextInputField/index.js +2 -3
- package/dist/components/indicators/ProgressStepIndicator/index.js +1 -2
- package/dist/components/lists/DropDownListItem/index.js +3 -11
- package/dist/components/views/CredentialIssuanceWizardView/index.js +4 -6
- package/dist/components/views/CredentialViewItem/index.js +2 -5
- package/dist/components/views/FormView/index.js +2 -2
- package/dist/components/views/InformationRequestView/index.d.ts +14 -0
- package/dist/components/views/InformationRequestView/index.js +14 -0
- package/dist/components/views/JSONDataView/index.js +21 -25
- package/dist/components/views/SSITableView/index.js +3 -3
- package/dist/index.d.ts +8 -3
- package/dist/index.js +7 -1
- package/dist/styles/components/components/CredentialIssuanceWizardView/index.js +3 -3
- package/dist/styles/components/components/InformationRequestView/index.d.ts +16 -0
- package/dist/styles/components/components/InformationRequestView/index.js +86 -0
- package/dist/styles/components/components/PassportPhotoControl/index.js +5 -5
- package/dist/styles/components/components/ProgressStepIndicator/index.js +2 -2
- package/dist/styles/components/components/SSITableView/index.js +5 -5
- package/dist/styles/components/components/SecondaryButton/index.js +2 -1
- package/dist/styles/components/components/index.d.ts +1 -0
- package/dist/styles/components/components/index.js +1 -0
- package/dist/utils/IconUtils.d.ts +3 -0
- package/dist/utils/IconUtils.js +32 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.js +1 -0
- package/package.json +3 -3
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { fontColors } from '@sphereon/ui-components.core';
|
|
3
|
+
const CopyIcon = (props) => {
|
|
4
|
+
const { width = 14, height = 19, color = fontColors.dark, style } = props;
|
|
5
|
+
return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 14 19", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M10.8054 0.456417C10.5328 0.161924 10.1706 0 9.78556 0H4.50625C3.71044 0 3.0625 0.700723 3.0625 1.56242V4.26115H1.44375C0.647938 4.26115 0 4.96187 0 5.82357V17.4376C0 18.2988 0.6475 19 1.44375 19H9.49375C10.2896 19 10.9375 18.2993 10.9375 17.4376V14.7403H12.5563C13.3521 14.7403 14 14.0395 14 13.1778V4.55517C14 4.13758 13.8495 3.74508 13.5761 3.44917L10.8054 0.456417ZM10.6461 1.62255L12.5051 3.63003H10.8793C10.7529 3.63003 10.6461 3.5145 10.6461 3.37767V1.62255ZM10.0629 17.4381C10.0629 17.7775 9.80787 18.0536 9.49419 18.0536H1.44375C1.13006 18.0536 0.875 17.7775 0.875 17.4381V5.82405C0.875 5.48458 1.13006 5.20855 1.44375 5.20855H3.0625V13.1783C3.0625 14.0395 3.71 14.7407 4.50625 14.7407H10.0625L10.0629 17.4381ZM12.5567 13.7938H10.5079C10.5053 13.7938 10.5031 13.7924 10.5004 13.7924C10.4978 13.7924 10.4956 13.7938 10.493 13.7938H4.50669C4.193 13.7938 3.93794 13.5178 3.93794 13.1783V1.56242C3.93794 1.22295 4.193 0.946922 4.50669 0.946922H9.77156V3.3772C9.77156 4.03862 10.2686 4.57648 10.8798 4.57648H13.1254V13.1778C13.1254 13.5173 12.8704 13.7938 12.5567 13.7938Z", fill: color }) }) }));
|
|
6
|
+
};
|
|
7
|
+
export default CopyIcon;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { fontColors } from '@sphereon/ui-components.core';
|
|
3
|
+
const PencilIcon = (props) => {
|
|
4
|
+
const { size = 18, color = fontColors.dark, style } = props;
|
|
5
|
+
return (_jsx("div", { style: { ...style, width: size, height: size, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2.31294 17.953L5.45728 17.1188C5.71399 17.0513 5.9485 16.9105 6.13529 16.7119L16.5848 5.62715C17.1708 5.00553 17.5 4.16233 17.5 3.2832C17.5 2.40407 17.1708 1.56087 16.5848 0.939102C15.9896 0.336436 15.1982 0 14.3752 0C13.5522 0 12.7608 0.336436 12.1656 0.939102L1.71247 12.0224C1.5257 12.2205 1.39308 12.4688 1.32888 12.7407L0.543408 16.0762C0.434942 16.5376 0.53224 17.0264 0.807378 17.4019C1.08266 17.7773 1.50519 17.998 1.95343 18C2.0746 18.0001 2.19534 17.9844 2.3129 17.9532L2.31294 17.953ZM11.6618 3.34385L14.3151 6.15839L5.6098 15.3929L2.95655 12.5774L11.6618 3.34385ZM14.3742 1.29089C14.8719 1.29089 15.349 1.50057 15.7009 1.87373C16.0527 2.24704 16.2504 2.75317 16.2504 3.28108C16.2504 3.80884 16.0527 4.3151 15.7009 4.68827L15.2006 5.21899L12.5457 2.40623L13.046 1.87551C13.3971 1.49983 13.8756 1.28926 14.3742 1.29089ZM1.75661 16.4004L2.36287 13.8274L4.43498 16.0263L2.00676 16.6657C1.93543 16.6868 1.85921 16.6643 1.80826 16.6074C1.75758 16.5531 1.7379 16.4743 1.75661 16.4004Z", fill: color }) }) }));
|
|
6
|
+
};
|
|
7
|
+
export default PencilIcon;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { fontColors } from '@sphereon/ui-components.core';
|
|
3
|
+
const ViewIcon = (props) => {
|
|
4
|
+
const { width = 16, height = 17, color = fontColors.dark, style } = props;
|
|
5
|
+
return (_jsx("div", { style: { ...style, width: width, height: height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0 14.7857V2.21429C0 1.26743 0.767429 0.5 1.71429 0.5H14.2857C15.2326 0.5 16 1.26743 16 2.21429V14.7857C16 15.7326 15.2326 16.5 14.2857 16.5C14.2857 16.5 10.2846 16.5 10.2817 16.5H1.71429C0.767429 16.5 0 15.7326 0 14.7857ZM14.8571 13.1566V2.21429C14.8571 1.89886 14.6011 1.64286 14.2857 1.64286H1.71429C1.39886 1.64286 1.14286 1.89886 1.14286 2.21429V10.3863L3.06628 7.08857C3.37714 6.55657 3.94915 6.232 4.56515 6.23829C5.18115 6.24457 5.74628 6.58114 6.04571 7.12L8.60172 11.72L9.52171 10.1869C9.81028 9.70571 10.3166 9.396 10.8766 9.35829C11.4366 9.32057 11.9794 9.55943 12.3303 9.99771L14.8571 13.1566ZM10.6217 15.3571H14.2857C14.5423 15.3571 14.76 15.1874 14.832 14.9543L11.4377 10.712C11.3206 10.5657 11.14 10.4863 10.9531 10.4989C10.7663 10.5114 10.5977 10.6143 10.5017 10.7749L9.24229 12.8737L10.6217 15.3571ZM1.14286 12.6543V14.7857C1.14286 15.1011 1.39886 15.3571 1.71429 15.3571H9.31428L5.04686 7.67486C4.94686 7.49543 4.75828 7.38343 4.55314 7.38114C4.34799 7.37886 4.15714 7.48743 4.05371 7.66457L1.14286 12.6543ZM8 6.21429C7.68457 6.21429 7.42857 5.95829 7.42857 5.64286C7.42857 5.32743 7.68457 5.07143 8 5.07143H10.2857C10.6011 5.07143 10.8571 5.32743 10.8571 5.64286C10.8571 5.95829 10.6011 6.21429 10.2857 6.21429H8ZM3.42857 3.92857C3.11314 3.92857 2.85714 3.67257 2.85714 3.35714C2.85714 3.04171 3.11314 2.78571 3.42857 2.78571H5.71429C6.02971 2.78571 6.28571 3.04171 6.28571 3.35714C6.28571 3.67257 6.02971 3.92857 5.71429 3.92857H3.42857ZM10.8571 3.92857C10.5417 3.92857 10.2857 3.67257 10.2857 3.35714C10.2857 3.04171 10.5417 2.78571 10.8571 2.78571H13.1429C13.4583 2.78571 13.7143 3.04171 13.7143 3.35714C13.7143 3.67257 13.4583 3.92857 13.1429 3.92857H10.8571Z", fill: color }) }) }));
|
|
6
|
+
};
|
|
7
|
+
export default ViewIcon;
|
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import SSIFilterIcon from '../../assets/icons/SSIFilterIcon';
|
|
5
|
-
import SSIArrowDownIcon from '../../assets/icons/SSIArrowDownIcon';
|
|
6
|
-
import MeatBallsIcon from '../../assets/icons/MeatBallsIcon';
|
|
7
|
-
import DeleteIcon from '../../assets/icons/DeleteIcon';
|
|
2
|
+
import { fontColors, OpacityStyleEnum } from '@sphereon/ui-components.core';
|
|
3
|
+
import { getIcon } from '../../../utils';
|
|
8
4
|
import { IconButtonContainerStyled as Container, SSITextH3Styled as Caption } from '../../../styles';
|
|
9
5
|
const IconButton = (props) => {
|
|
10
6
|
const { caption, icon, iconColor = fontColors.dark } = props;
|
|
@@ -18,20 +14,4 @@ const IconButton = (props) => {
|
|
|
18
14
|
...(disabled && { opacity: OpacityStyleEnum.DISABLED }),
|
|
19
15
|
}, onClick: onClick, children: [getIcon(icon, iconColor), caption && _jsx(Caption, { children: caption })] }));
|
|
20
16
|
};
|
|
21
|
-
const getIcon = (icon, color) => {
|
|
22
|
-
switch (icon) {
|
|
23
|
-
case ButtonIcon.ADD:
|
|
24
|
-
return _jsx(SSIAddIcon, { color: color });
|
|
25
|
-
case ButtonIcon.ARROW_DOWN:
|
|
26
|
-
return _jsx(SSIArrowDownIcon, { color: color });
|
|
27
|
-
case ButtonIcon.MEATBALLS:
|
|
28
|
-
return _jsx(MeatBallsIcon, { color: color });
|
|
29
|
-
case ButtonIcon.DELETE:
|
|
30
|
-
return _jsx(DeleteIcon, { color: color, width: 15, height: 16 });
|
|
31
|
-
case ButtonIcon.FILTER:
|
|
32
|
-
return _jsx(SSIFilterIcon, { color: color });
|
|
33
|
-
default:
|
|
34
|
-
return _jsx("div", {});
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
17
|
export default IconButton;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useRef } from 'react';
|
|
3
|
-
import { DragAndDropBoxContainerStyled as Container, DragAndDropBoxHiddenInputStyled as HiddenInput, DragAndDropBoxCaptionContainerStyled as CaptionContainer, SSITextH2Styled as Caption, DragAndDropBoxDescriptionStyled as Description } from '../../../styles';
|
|
3
|
+
import { DragAndDropBoxContainerStyled as Container, DragAndDropBoxHiddenInputStyled as HiddenInput, DragAndDropBoxCaptionContainerStyled as CaptionContainer, SSITextH2Styled as Caption, DragAndDropBoxDescriptionStyled as Description, } from '../../../styles';
|
|
4
4
|
const DragAndDropBox = (props) => {
|
|
5
5
|
const { caption, description, onChangeFile } = props;
|
|
6
6
|
const inputFile = useRef(null);
|
|
@@ -25,6 +25,6 @@ const DragAndDropBox = (props) => {
|
|
|
25
25
|
const onDragOver = async (event) => {
|
|
26
26
|
event.preventDefault();
|
|
27
27
|
};
|
|
28
|
-
return (_jsxs(Container, { onClick: onSelect, onDrop: onDrop, onDragOver: onDragOver, children: [_jsx(HiddenInput, { ref: inputFile, type:
|
|
28
|
+
return (_jsxs(Container, { onClick: onSelect, onDrop: onDrop, onDragOver: onDragOver, children: [_jsx(HiddenInput, { ref: inputFile, type: "file", onChange: onChange }), _jsxs(CaptionContainer, { children: [_jsx(Caption, { children: caption }), _jsx(Description, { children: description })] })] }));
|
|
29
29
|
};
|
|
30
30
|
export default DragAndDropBox;
|
|
@@ -4,7 +4,7 @@ import ComboBox from '../ComboBox';
|
|
|
4
4
|
import DocumentIcon from '../../assets/icons/DocumentIcon';
|
|
5
5
|
import ImageIcon from '../../assets/icons/ImageIcon';
|
|
6
6
|
import CrossIcon from '../../assets/icons/CrossIcon';
|
|
7
|
-
import { FileSelectionFieldContainerStyled as Container, FileSelectionFieldContentContainerStyled as ContentContainer, FileSelectionFieldRemoveContainerStyled as RemoveContainer, FileSelectionFieldRemoveButtonStyled as RemoveButton, FileSelectionFieldRemoveButtonCircleIconStyled as RemoveButtonCircleIcon, FileSelectionFieldIconContainerStyled as IconContainer, FileSelectionFieldFileDataContainerStyled as FileDataContainer, FileSelectionFieldFileNameCaptionStyled as FileNameCaption, FileSelectionFieldFileSizeCaptionStyled as FileSizeCaption, FileSelectionFieldPermissionSelectionContainerStyled as PermissionSelectionContainer } from '../../../styles';
|
|
7
|
+
import { FileSelectionFieldContainerStyled as Container, FileSelectionFieldContentContainerStyled as ContentContainer, FileSelectionFieldRemoveContainerStyled as RemoveContainer, FileSelectionFieldRemoveButtonStyled as RemoveButton, FileSelectionFieldRemoveButtonCircleIconStyled as RemoveButtonCircleIcon, FileSelectionFieldIconContainerStyled as IconContainer, FileSelectionFieldFileDataContainerStyled as FileDataContainer, FileSelectionFieldFileNameCaptionStyled as FileNameCaption, FileSelectionFieldFileSizeCaptionStyled as FileSizeCaption, FileSelectionFieldPermissionSelectionContainerStyled as PermissionSelectionContainer, } from '../../../styles';
|
|
8
8
|
import { FileSelectionFieldType } from '../../../types';
|
|
9
9
|
const filePermissions = [
|
|
10
10
|
{ label: Localization.translate('file_permission_public_label'), value: 'public' },
|
|
@@ -17,8 +17,7 @@ const FileSelection = (props) => {
|
|
|
17
17
|
await onPermissionChange(selection.value);
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
|
-
return (_jsxs(Container, { style: style, children: [_jsxs(ContentContainer, { children: [_jsx(IconContainer, { children: getIcon(fileType) }), _jsxs(FileDataContainer, { children: [_jsx(FileNameCaption, { children: file.name }), file.size && _jsx(FileSizeCaption, { children: getFileSizeDisplay(file.size) })] }), permission && (_jsx(PermissionSelectionContainer, { children: _jsx(ComboBox, { style: { width: 152, marginLeft: 'auto' }, defaultValue: filePermissions.find((selection) => selection.value === permission), onChange: onChange, options: filePermissions }) }))] }), onRemove &&
|
|
21
|
-
_jsx(RemoveContainer, { children: _jsx(RemoveButton, { onClick: onRemove, children: _jsx(RemoveButtonCircleIcon, { children: _jsx(CrossIcon, { size: 10 }) }) }) })] }));
|
|
20
|
+
return (_jsxs(Container, { style: style, children: [_jsxs(ContentContainer, { children: [_jsx(IconContainer, { children: getIcon(fileType) }), _jsxs(FileDataContainer, { children: [_jsx(FileNameCaption, { children: file.name }), file.size && _jsx(FileSizeCaption, { children: getFileSizeDisplay(file.size) })] }), permission && (_jsx(PermissionSelectionContainer, { children: _jsx(ComboBox, { style: { width: 152, marginLeft: 'auto' }, defaultValue: filePermissions.find((selection) => selection.value === permission), onChange: onChange, options: filePermissions }) }))] }), onRemove && (_jsx(RemoveContainer, { children: _jsx(RemoveButton, { onClick: onRemove, children: _jsx(RemoveButtonCircleIcon, { children: _jsx(CrossIcon, { size: 10 }) }) }) }))] }));
|
|
22
21
|
};
|
|
23
22
|
const getIcon = (fileType) => {
|
|
24
23
|
switch (fileType) {
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from 'react';
|
|
3
|
-
import { and, isObjectControl, optionIs, rankWith
|
|
3
|
+
import { and, isObjectControl, optionIs, rankWith } from '@jsonforms/core';
|
|
4
4
|
import { withJsonFormsControlProps } from '@jsonforms/react';
|
|
5
5
|
import { Localization, parseBase64Uri } from '@sphereon/ui-components.core';
|
|
6
6
|
import DragAndDropBox from '../../DragAndDropBox';
|
|
7
7
|
import PersonPlaceholder from '../../../assets/placeholders/PersonPlaceholder';
|
|
8
8
|
import FileSelection from '../../FileSelection';
|
|
9
9
|
import { base64UriToFile } from '../../../../utils';
|
|
10
|
-
import { PassportPhotoControlContainerStyled as Container, PassportPhotoControlDragAndDropBoxContainerStyled as DragAndDropBoxContainer, PassportPhotoControlPassportPhotoContainerStyled as PassportPhotoContainer, PassportPhotoControlPassportPhotoImageStyled as PassportPhotoImage } from '../../../../styles';
|
|
10
|
+
import { PassportPhotoControlContainerStyled as Container, PassportPhotoControlDragAndDropBoxContainerStyled as DragAndDropBoxContainer, PassportPhotoControlPassportPhotoContainerStyled as PassportPhotoContainer, PassportPhotoControlPassportPhotoImageStyled as PassportPhotoImage, } from '../../../../styles';
|
|
11
11
|
import { FileSelectionFieldType } from '../../../../types';
|
|
12
12
|
const PassportPhotoControl = (props) => {
|
|
13
13
|
const { data, handleChange, path } = props;
|
|
@@ -28,10 +28,7 @@ const PassportPhotoControl = (props) => {
|
|
|
28
28
|
setImage(undefined);
|
|
29
29
|
handleChange(path, undefined);
|
|
30
30
|
};
|
|
31
|
-
return (_jsxs(Container, { children: [_jsxs(DragAndDropBoxContainer, { children: [_jsx(DragAndDropBox, { caption: Localization.translate('drag_and_drop_upload_image_caption'), description: Localization.translate('credential_attach_image_description'), onChangeFile: onAddImage }), _jsx(PassportPhotoContainer, { children: image
|
|
32
|
-
? _jsx(PassportPhotoImage, { src: image.base64Uri, alt: Localization.translate('passport_photo_alt') })
|
|
33
|
-
: _jsx(PersonPlaceholder, {}) })] }), image &&
|
|
34
|
-
_jsx(FileSelection, { file: image.file, fileType: FileSelectionFieldType.IMAGE, onRemove: onRemoveImage })] }));
|
|
31
|
+
return (_jsxs(Container, { children: [_jsxs(DragAndDropBoxContainer, { children: [_jsx(DragAndDropBox, { caption: Localization.translate('drag_and_drop_upload_image_caption'), description: Localization.translate('credential_attach_image_description'), onChangeFile: onAddImage }), _jsx(PassportPhotoContainer, { children: image ? _jsx(PassportPhotoImage, { src: image.base64Uri, alt: Localization.translate('passport_photo_alt') }) : _jsx(PersonPlaceholder, {}) })] }), image && _jsx(FileSelection, { file: image.file, fileType: FileSelectionFieldType.IMAGE, onRemove: onRemoveImage })] }));
|
|
35
32
|
};
|
|
36
33
|
export const passportPhotoControlTester = rankWith(3, and(isObjectControl, optionIs('type', 'passportPhoto')));
|
|
37
34
|
export default withJsonFormsControlProps(PassportPhotoControl);
|
|
@@ -3,7 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import { OpacityStyleEnum, fontColors, selectionElementColors } from '@sphereon/ui-components.core';
|
|
4
4
|
import { SSICheckboxContainerStyled as Container, SSICheckboxLabelContainerStyled as LabelCaption, SSICheckboxSelectedContainerStyled as SelectedContainer, SSICheckboxUnselectedContainerStyled as UnselectedContainer, } from '../../../styles/components';
|
|
5
5
|
const SSICheckbox = (props) => {
|
|
6
|
-
const { backgroundColor, borderColor = selectionElementColors.primaryBorderDark, disabled = false, initialValue = false, label, selectedColor = selectionElementColors.primaryDark, labelColor = fontColors.light, checkmarkColor = fontColors.dark, style } = props;
|
|
6
|
+
const { backgroundColor, borderColor = selectionElementColors.primaryBorderDark, disabled = false, initialValue = false, label, selectedColor = selectionElementColors.primaryDark, labelColor = fontColors.light, checkmarkColor = fontColors.dark, style, } = props;
|
|
7
7
|
const [isChecked, setChecked] = React.useState(initialValue);
|
|
8
8
|
const value = props.isChecked !== undefined ? props.isChecked : isChecked;
|
|
9
9
|
const onValueChange = async () => {
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { SSIHoverTextTextStyled as Text, SSIHoverTextContainerStyled as Container, SSIHoverTextTextHoverStyled as TextHover, } from '../../../styles/components';
|
|
3
3
|
const SSIHoverText = (props) => {
|
|
4
4
|
const { text, truncationLength, enableHover = true } = props;
|
|
5
|
-
const value = truncationLength ? text.substring(0, truncationLength) : text;
|
|
5
|
+
const value = truncationLength ? `${text.substring(0, truncationLength)}...` : text;
|
|
6
6
|
return (_jsxs(Container, { children: [_jsx(Text, { children: value }), enableHover && _jsx(TextHover, { children: text })] }));
|
|
7
7
|
};
|
|
8
8
|
export default SSIHoverText;
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import React, { useState } from 'react';
|
|
3
3
|
import { TextFieldInputContainerStyled as Container, TextFieldInputInputStyled as Input, SSITextH2Styled as Label } from '../../../styles';
|
|
4
4
|
const TextInputField = (props) => {
|
|
5
|
-
const { initialValue, label, placeholder, maxLength, onChangeValue, style
|
|
5
|
+
const { initialValue, label, placeholder, maxLength, onChangeValue, style } = props;
|
|
6
6
|
const [value, setValue] = React.useState(initialValue);
|
|
7
7
|
const [isFocused, setIsFocused] = useState(false);
|
|
8
8
|
const onChange = async (event) => {
|
|
@@ -15,7 +15,6 @@ const TextInputField = (props) => {
|
|
|
15
15
|
const onBlur = () => {
|
|
16
16
|
setIsFocused(false);
|
|
17
17
|
};
|
|
18
|
-
return (_jsxs(Container, { style: { ...style }, children: [label &&
|
|
19
|
-
_jsx(Label, { children: label }), _jsx(Input, { onChange: onChange, value: value, placeholder: isFocused ? '' : placeholder, type: 'text', onFocus: onFocus, onBlur: onBlur, maxLength: maxLength })] }));
|
|
18
|
+
return (_jsxs(Container, { style: { ...style }, children: [label && _jsx(Label, { children: label }), _jsx(Input, { onChange: onChange, value: value, placeholder: isFocused ? '' : placeholder, type: 'text', onFocus: onFocus, onBlur: onBlur, maxLength: maxLength })] }));
|
|
20
19
|
};
|
|
21
20
|
export default TextInputField;
|
|
@@ -20,8 +20,7 @@ const getStepRowElement = (stepNumber, status, step, maxSteps) => {
|
|
|
20
20
|
}),
|
|
21
21
|
...(status === StepStatus.COMPLETED && { color: fontColors.dark }),
|
|
22
22
|
...(status === StepStatus.NEXT && { color: fontColors.lightGrey }),
|
|
23
|
-
}, children: [_jsx("div", { children: title }), !required &&
|
|
24
|
-
_jsx(OptionalText, { children: Localization.translate('optional_label') })] })), description && (_jsx(DescriptionText, { style: { ...((status === StepStatus.CURRENT || status === StepStatus.COMPLETED) && { color: fontColors.dark }) }, children: description }))] }), stepNumber < maxSteps && (_jsx(SpacerLineCell, { style: { gridRow: gridRowNumber + 1 }, children: _jsx(StepLine, { style: {
|
|
23
|
+
}, children: [_jsx("div", { children: title }), !required && _jsx(OptionalText, { children: Localization.translate('optional_label') })] })), description && (_jsx(DescriptionText, { style: { ...((status === StepStatus.CURRENT || status === StepStatus.COMPLETED) && { color: fontColors.dark }) }, children: description }))] }), stepNumber < maxSteps && (_jsx(SpacerLineCell, { style: { gridRow: gridRowNumber + 1 }, children: _jsx(StepLine, { style: {
|
|
25
24
|
...(status === StepStatus.COMPLETED && {
|
|
26
25
|
backgroundColor: elementColors.purple,
|
|
27
26
|
}),
|
|
@@ -1,17 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
2
|
+
import { borderColors, fontColors } from '@sphereon/ui-components.core';
|
|
3
|
+
import { getIcon } from '../../../utils';
|
|
4
|
+
import { DropDownListItemCaptionContainerStyled as ListItemCaption, DropDownListItemContainerStyled as Container, DropDownListItemIconContainerStyled as IconContainer, } from '../../../styles/components';
|
|
5
5
|
const DropDownListItem = (props) => {
|
|
6
6
|
const { disabled, label, icon, showBorder = false, fontColor = fontColors.dark, borderColor = borderColors.light, onClick } = props;
|
|
7
|
-
const getIcon = (icon) => {
|
|
8
|
-
switch (icon) {
|
|
9
|
-
case ButtonIcon.DELETE:
|
|
10
|
-
return _jsx(DeleteIcon, { color: fontColors.dark });
|
|
11
|
-
default:
|
|
12
|
-
return _jsx("div", {});
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
7
|
const onContainerClick = async (event) => {
|
|
16
8
|
event.stopPropagation();
|
|
17
9
|
if (onClick) {
|
|
@@ -4,8 +4,8 @@ import { Autocomplete, TextField } from '@mui/material';
|
|
|
4
4
|
import { Localization } from '@sphereon/ui-components.core';
|
|
5
5
|
import FileSelection from '../../fields/FileSelection';
|
|
6
6
|
import DragAndDropBox from '../../fields/DragAndDropBox';
|
|
7
|
-
import { CredentialIssuanceWizardViewContainerStyled as Container, CredentialIssuanceWizardViewCredentialTypeContainerStyled as CredentialTypeContainer, CredentialIssuanceWizardViewCredentialTypeTitleStyled as CredentialTypeTitle, CredentialIssuanceWizardViewFormContainerStyled as FormContainer, CredentialIssuanceWizardViewEvidenceContainerStyled as EvidenceContainer, CredentialIssuanceWizardViewEvidenceContentContainerStyled as EvidenceContentContainer, CredentialIssuanceWizardViewEvidenceTitleContainerStyled as EvidenceTitleContainer, SSITextH2SemiBoldStyled as EvidenceTitle, CredentialIssuanceWizardViewEvidenceTitleOptionalStyled as EvidenceTitleOptional, SSITextH2Styled as EvidenceDescription, CredentialIssuanceWizardViewEvidenceFilesContainerStyled as EvidenceFilesContainer } from '../../../styles';
|
|
8
|
-
import FormView from
|
|
7
|
+
import { CredentialIssuanceWizardViewContainerStyled as Container, CredentialIssuanceWizardViewCredentialTypeContainerStyled as CredentialTypeContainer, CredentialIssuanceWizardViewCredentialTypeTitleStyled as CredentialTypeTitle, CredentialIssuanceWizardViewFormContainerStyled as FormContainer, CredentialIssuanceWizardViewEvidenceContainerStyled as EvidenceContainer, CredentialIssuanceWizardViewEvidenceContentContainerStyled as EvidenceContentContainer, CredentialIssuanceWizardViewEvidenceTitleContainerStyled as EvidenceTitleContainer, SSITextH2SemiBoldStyled as EvidenceTitle, CredentialIssuanceWizardViewEvidenceTitleOptionalStyled as EvidenceTitleOptional, SSITextH2Styled as EvidenceDescription, CredentialIssuanceWizardViewEvidenceFilesContainerStyled as EvidenceFilesContainer, } from '../../../styles';
|
|
8
|
+
import FormView from '../FormView';
|
|
9
9
|
const CredentialIssuanceWizardView = (props) => {
|
|
10
10
|
const { credentialData, credentialTypes, onSelectCredentialTypeChange, onCredentialFormDataChange } = props;
|
|
11
11
|
const [selectedCredentialType, setSelectedCredentialType] = useState(null);
|
|
@@ -33,10 +33,8 @@ const CredentialIssuanceWizardView = (props) => {
|
|
|
33
33
|
onCredentialFormDataChange?.({ ...credentialInput, evidence: evidenceFiles });
|
|
34
34
|
};
|
|
35
35
|
const getEvidenceElements = () => {
|
|
36
|
-
return evidence.map((file, index) => _jsx(FileSelection, { file: file, onRemove: async () => onRemoveEvidence(index) }, index));
|
|
36
|
+
return evidence.map((file, index) => (_jsx(FileSelection, { file: file, onRemove: async () => onRemoveEvidence(index) }, index)));
|
|
37
37
|
};
|
|
38
|
-
return (_jsxs(Container, { children: [_jsxs(CredentialTypeContainer, { children: [_jsx(CredentialTypeTitle, { children: Localization.translate('credential_issuance_wizard_title') }), _jsx(Autocomplete, { options: credentialTypes, sx: { flexGrow: 1 }, renderInput: (params) => _jsx(TextField, { ...params, label: Localization.translate('credential_issuance_wizard_credential_type_label') }), onChange: onCredentialTypeChange })] }), selectedCredentialType &&
|
|
39
|
-
_jsxs(_Fragment, { children: [_jsx(FormContainer, { children: (selectedCredentialType.schema && selectedCredentialType.uiSchema) &&
|
|
40
|
-
_jsx(FormView, { schema: selectedCredentialType.schema, uiSchema: selectedCredentialType.uiSchema, data: credentialData, onFormStateChange: onCredentialFormInputChange }) }), _jsx(EvidenceContainer, { children: _jsxs(EvidenceContentContainer, { children: [_jsxs("div", { children: [_jsxs(EvidenceTitleContainer, { children: [_jsx(EvidenceTitle, { children: Localization.translate('credential_issuance_wizard_evidence_title') }), _jsx(EvidenceTitleOptional, { children: Localization.translate('optional_label') })] }), _jsx(EvidenceDescription, { children: Localization.translate('credential_issuance_wizard_evidence_description') })] }), _jsxs(EvidenceFilesContainer, { children: [_jsx(DragAndDropBox, { caption: Localization.translate('drag_and_drop_upload_evidence_caption'), description: Localization.translate('credential_attach_evidence_description'), onChangeFile: onAddEvidence }), getEvidenceElements()] })] }) })] })] }));
|
|
38
|
+
return (_jsxs(Container, { children: [_jsxs(CredentialTypeContainer, { children: [_jsx(CredentialTypeTitle, { children: Localization.translate('credential_issuance_wizard_title') }), _jsx(Autocomplete, { options: credentialTypes, sx: { flexGrow: 1 }, renderInput: (params) => (_jsx(TextField, { ...params, label: Localization.translate('credential_issuance_wizard_credential_type_label') })), onChange: onCredentialTypeChange })] }), selectedCredentialType && (_jsxs(_Fragment, { children: [_jsx(FormContainer, { children: selectedCredentialType.schema && selectedCredentialType.uiSchema && (_jsx(FormView, { schema: selectedCredentialType.schema, uiSchema: selectedCredentialType.uiSchema, data: credentialData, onFormStateChange: onCredentialFormInputChange })) }), _jsx(EvidenceContainer, { children: _jsxs(EvidenceContentContainer, { children: [_jsxs("div", { children: [_jsxs(EvidenceTitleContainer, { children: [_jsx(EvidenceTitle, { children: Localization.translate('credential_issuance_wizard_evidence_title') }), _jsx(EvidenceTitleOptional, { children: Localization.translate('optional_label') })] }), _jsx(EvidenceDescription, { children: Localization.translate('credential_issuance_wizard_evidence_description') })] }), _jsxs(EvidenceFilesContainer, { children: [_jsx(DragAndDropBox, { caption: Localization.translate('drag_and_drop_upload_evidence_caption'), description: Localization.translate('credential_attach_evidence_description'), onChangeFile: onAddEvidence }), getEvidenceElements()] })] }) })] }))] }));
|
|
41
39
|
};
|
|
42
40
|
export default CredentialIssuanceWizardView;
|
|
@@ -7,11 +7,8 @@ const CredentialViewItem = (props) => {
|
|
|
7
7
|
const { credentialStatus, credentialTitle, issuerName, showTime = false, showCard = true, credentialBranding, style } = props;
|
|
8
8
|
const issueDate = showTime ? toLocalDateTimeString(props.issueDate) : toLocalDateString(props.issueDate);
|
|
9
9
|
const expirationDate = props.expirationDate
|
|
10
|
-
? `${Localization.translate('credentials_view_item_expires_on')} ${showTime
|
|
11
|
-
? toLocalDateTimeString(props.expirationDate)
|
|
12
|
-
: toLocalDateString(props.expirationDate)}`
|
|
10
|
+
? `${Localization.translate('credentials_view_item_expires_on')} ${showTime ? toLocalDateTimeString(props.expirationDate) : toLocalDateString(props.expirationDate)}`
|
|
13
11
|
: Localization.translate('credential_status_never_expires_date_label');
|
|
14
|
-
return (_jsxs(Container, { style: { ...style }, children: [showCard &&
|
|
15
|
-
_jsx(CredentialMiniCardView, { ...credentialBranding }), _jsxs(DetailsContainer, { children: [_jsxs(ContentRowContainer, { children: [_jsxs("div", { children: [_jsx(TitleCaption, { children: credentialTitle }), _jsx(IssuerCaption, { children: issuerName })] }), _jsx(StatusContainer, { children: _jsx(SSIStatusLabel, { status: credentialStatus }) })] }), _jsxs(ContentRowContainer, { children: [_jsx(IssueDateCaption, { children: issueDate }), _jsx(ExpirationDateCaption, { children: expirationDate })] })] })] }));
|
|
12
|
+
return (_jsxs(Container, { style: { ...style }, children: [showCard && _jsx(CredentialMiniCardView, { ...credentialBranding }), _jsxs(DetailsContainer, { children: [_jsxs(ContentRowContainer, { children: [_jsxs("div", { children: [_jsx(TitleCaption, { children: credentialTitle }), _jsx(IssuerCaption, { children: issuerName })] }), _jsx(StatusContainer, { children: _jsx(SSIStatusLabel, { status: credentialStatus }) })] }), _jsxs(ContentRowContainer, { children: [_jsx(IssueDateCaption, { children: issueDate }), _jsx(ExpirationDateCaption, { children: expirationDate })] })] })] }));
|
|
16
13
|
};
|
|
17
14
|
export default CredentialViewItem;
|
|
@@ -3,10 +3,10 @@ import { JsonForms } from '@jsonforms/react';
|
|
|
3
3
|
import { materialCells } from '@jsonforms/material-renderers';
|
|
4
4
|
import { jsonFormsMaterialRenderers } from '../../../renders/jsonFormsRenders';
|
|
5
5
|
const FormView = (props) => {
|
|
6
|
-
const { data, schema, uiSchema, validationMode = 'ValidateAndShow', renderers = jsonFormsMaterialRenderers, cells = materialCells, style, onFormStateChange } = props;
|
|
6
|
+
const { data, schema, uiSchema, validationMode = 'ValidateAndShow', renderers = jsonFormsMaterialRenderers, cells = materialCells, style, onFormStateChange, } = props;
|
|
7
7
|
const onFormStateChanged = (state) => {
|
|
8
8
|
void onFormStateChange?.(state);
|
|
9
9
|
};
|
|
10
|
-
return _jsx("div", { style: style, children: _jsx(JsonForms, { schema: schema, uischema: uiSchema, data: data, renderers: renderers, cells: cells, onChange: onFormStateChanged, validationMode: validationMode }) });
|
|
10
|
+
return (_jsx("div", { style: style, children: _jsx(JsonForms, { schema: schema, uischema: uiSchema, data: data, renderers: renderers, cells: cells, onChange: onFormStateChanged, validationMode: validationMode }) }));
|
|
11
11
|
};
|
|
12
12
|
export default FormView;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { CredentialStatus, ImageAttributes } from '@sphereon/ui-components.core';
|
|
3
|
+
type Props = {
|
|
4
|
+
relyingPartyName: string;
|
|
5
|
+
purpose: string;
|
|
6
|
+
credentialStatus: CredentialStatus;
|
|
7
|
+
credentialTitle?: string;
|
|
8
|
+
credentialSubtitle?: string;
|
|
9
|
+
uri?: string;
|
|
10
|
+
logo?: ImageAttributes;
|
|
11
|
+
textColor?: string;
|
|
12
|
+
};
|
|
13
|
+
declare const InformationRequestView: FC<Props>;
|
|
14
|
+
export default InformationRequestView;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Localization } from '@sphereon/ui-components.core';
|
|
3
|
+
import { InformationRequestViewCardSubtitle as CardSubtitle, InformationRequestViewCardTextContainer as CardTextContainer, InformationRequestViewCardTitle as CardTitle, InformationRequestViewContainerStyled as Container, InformationRequestViewContentContainerStyled as ContentContainer, InformationRequestViewFormContainerStyled as FormContainer, InformationRequestViewFormContainerStyled as PurposeContainer, InformationRequestViewHeaderContainerStyled as HeaderContainer, InformationRequestViewLogoContainerStyled as LogoContainer, InformationRequestViewRPCardContainerStyled as RPCardContainer, InformationRequestViewTitleStyled as HeaderTitle, InformationRequestViewParagraphStyled as PurposeTitle, InformationRequestViewParagraphStyled as FormTitle, InformationRequestViewDescriptionStyled as Description, } from '../../../styles/components';
|
|
4
|
+
import SSIStatusLabel from '../../labels/SSIStatusLabel';
|
|
5
|
+
import SSILogo from '../../assets/logos/SSILogo';
|
|
6
|
+
const InformationRequestView = (args) => {
|
|
7
|
+
const { relyingPartyName, purpose, uri, credentialStatus, logo, textColor } = args;
|
|
8
|
+
return (_jsx(Container, { children: _jsxs(ContentContainer, { children: [_jsxs(HeaderContainer, { children: [_jsx(HeaderTitle, { children: Localization.translate('information_request_title') }), _jsx(Description, { children: Localization.translate('information_request_header_description', {
|
|
9
|
+
partyName: relyingPartyName,
|
|
10
|
+
}) })] }), _jsxs(PurposeContainer, { children: [_jsx(PurposeTitle, { children: Localization.translate('information_request_purpose_label') }), _jsx(Description, { children: purpose })] }), _jsxs(FormContainer, { children: [_jsx(FormTitle, { children: Localization.translate('information_request_form_label') }), _jsx(Description, { children: Localization.translate('information_request_interacting_with', {
|
|
11
|
+
partyName: relyingPartyName,
|
|
12
|
+
}) }), _jsxs(RPCardContainer, { children: [_jsx(LogoContainer, { children: _jsx(SSILogo, { logo: logo, color: textColor ?? '#000' }) }), _jsxs(CardTextContainer, { children: [_jsx(CardTitle, { children: relyingPartyName }), _jsx(CardSubtitle, { children: "Verifier" }), uri && _jsx(CardSubtitle, { children: uri })] }), _jsx(SSIStatusLabel, { status: credentialStatus })] })] })] }) }));
|
|
13
|
+
};
|
|
14
|
+
export default InformationRequestView;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React, { useEffect } from 'react';
|
|
3
3
|
import { JSONTree } from 'react-json-tree';
|
|
4
|
-
import { backgroundColors, calculateAspectRatio, fontColors, isBase64ImageUri, isBoolean, Localization, parseToBoolean } from '@sphereon/ui-components.core';
|
|
4
|
+
import { backgroundColors, calculateAspectRatio, fontColors, isBase64ImageUri, isBoolean, Localization, parseToBoolean, } from '@sphereon/ui-components.core';
|
|
5
5
|
import SSICheckmarkBadge from '../../assets/badges/SSICheckmarkBadge';
|
|
6
6
|
import SSIExclamationMarkBadge from '../../assets/badges/SSIExclamationMarkBadge';
|
|
7
7
|
import { getImageSize } from '../../../utils';
|
|
8
|
-
import { JSONDataViewContainerStyled as Container, JSONDataViewHeaderContainerStyled as HeaderContainer, JSONDataViewColumnHeaderCaptionStyled as ColumnHeaderCaption, JSONDataViewDataContainerCaptionStyled as ContainerCaption, JSONDataViewDataImageValueStyled as ImageValue, JSONDataViewDataTextValueStyled as TextValue, JSONDataViewDataLabelStyled as Label } from '../../../styles';
|
|
8
|
+
import { JSONDataViewContainerStyled as Container, JSONDataViewHeaderContainerStyled as HeaderContainer, JSONDataViewColumnHeaderCaptionStyled as ColumnHeaderCaption, JSONDataViewDataContainerCaptionStyled as ContainerCaption, JSONDataViewDataImageValueStyled as ImageValue, JSONDataViewDataTextValueStyled as TextValue, JSONDataViewDataLabelStyled as Label, } from '../../../styles';
|
|
9
9
|
const JSONDataView = (props) => {
|
|
10
10
|
const { showHeader = true, shouldExpandNodeInitially = () => false } = props;
|
|
11
11
|
const expandNodeInitially = typeof shouldExpandNodeInitially === 'function' ? shouldExpandNodeInitially : () => shouldExpandNodeInitially;
|
|
@@ -28,8 +28,8 @@ const JSONDataView = (props) => {
|
|
|
28
28
|
dimensions: {
|
|
29
29
|
height: dimensions.height,
|
|
30
30
|
width: dimensions.width,
|
|
31
|
-
aspectRatio: calculateAspectRatio(dimensions.width, dimensions.height)
|
|
32
|
-
}
|
|
31
|
+
aspectRatio: calculateAspectRatio(dimensions.width, dimensions.height),
|
|
32
|
+
},
|
|
33
33
|
};
|
|
34
34
|
}
|
|
35
35
|
else {
|
|
@@ -48,14 +48,12 @@ const JSONDataView = (props) => {
|
|
|
48
48
|
if (isBoolean(value)) {
|
|
49
49
|
return parseToBoolean(value) ? _jsx(SSICheckmarkBadge, {}) : _jsx(SSIExclamationMarkBadge, {});
|
|
50
50
|
}
|
|
51
|
-
if (typeof value === 'object'
|
|
52
|
-
&& value !== null
|
|
53
|
-
&& 'uri' in value) {
|
|
51
|
+
if (typeof value === 'object' && value !== null && 'uri' in value) {
|
|
54
52
|
const imageData = value;
|
|
55
|
-
return _jsx(ImageValue, { style: {
|
|
53
|
+
return (_jsx(ImageValue, { style: {
|
|
56
54
|
aspectRatio: imageData.dimensions?.aspectRatio,
|
|
57
55
|
backgroundImage: `url(${imageData.uri})`,
|
|
58
|
-
} });
|
|
56
|
+
} }));
|
|
59
57
|
}
|
|
60
58
|
return _jsx(TextValue, { children: value?.toString() });
|
|
61
59
|
};
|
|
@@ -65,21 +63,19 @@ const JSONDataView = (props) => {
|
|
|
65
63
|
const isCustomNode = (value) => {
|
|
66
64
|
return typeof value === 'object' && value !== null && 'uri' in value && 'dimensions' in value;
|
|
67
65
|
};
|
|
68
|
-
return (_jsxs(Container, { children: [showHeader &&
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
},
|
|
83
|
-
}, hideRoot: true, shouldExpandNodeInitially: expandNodeInitially, getItemString: getItemString, labelRenderer: labelRenderer, valueRenderer: valueRenderer, isCustomNode: isCustomNode, data: data }) })] }));
|
|
66
|
+
return (_jsxs(Container, { children: [showHeader && (_jsxs(HeaderContainer, { children: [_jsx(ColumnHeaderCaption, { children: Localization.translate('json_data_view_attribute_column_label') }), _jsx(ColumnHeaderCaption, { children: Localization.translate('json_data_view_value_column_label') })] })), _jsx(ContainerCaption, { onMouseEnter: () => setFocused(true), onMouseLeave: () => setFocused(false), children: data && (_jsx(JSONTree, { theme: {
|
|
67
|
+
base0D: fontColors.dark,
|
|
68
|
+
tree: {
|
|
69
|
+
margin: 0,
|
|
70
|
+
backgroundColor: backgroundColors.primaryLight,
|
|
71
|
+
},
|
|
72
|
+
arrowContainer: {
|
|
73
|
+
paddingRight: 6,
|
|
74
|
+
},
|
|
75
|
+
arrow: {
|
|
76
|
+
fontSize: 10,
|
|
77
|
+
...(!focused && { display: 'none' }),
|
|
78
|
+
},
|
|
79
|
+
}, hideRoot: true, shouldExpandNodeInitially: expandNodeInitially, getItemString: getItemString, labelRenderer: labelRenderer, valueRenderer: valueRenderer, isCustomNode: isCustomNode, data: data })) })] }));
|
|
84
80
|
};
|
|
85
81
|
export default JSONDataView;
|
|
@@ -9,10 +9,10 @@ import SSIStatusLabel from '../../labels/SSIStatusLabel';
|
|
|
9
9
|
import CredentialMiniCardView from '../CredentialMiniCardView';
|
|
10
10
|
import DropDownList from '../../lists/DropDownList';
|
|
11
11
|
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';
|
|
12
|
-
import { TableCellType } from '../../../types';
|
|
12
|
+
import { TableCellType, } from '../../../types';
|
|
13
13
|
import PaginationControls from './PaginationControls';
|
|
14
|
-
import ComboBox from
|
|
15
|
-
import CredentialDetailsView from
|
|
14
|
+
import ComboBox from '../../fields/ComboBox';
|
|
15
|
+
import CredentialDetailsView from '../CredentialViewItem';
|
|
16
16
|
function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
|
|
17
17
|
const ref = React.useRef(null);
|
|
18
18
|
React.useEffect(() => {
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import SSIToastContainer from './components/messageBoxes/toasts/SSIToastContainer';
|
|
2
2
|
import SSIStatusLabel from './components/labels/SSIStatusLabel';
|
|
3
3
|
import SSICredentialCardView from './components/views/SSICredentialCardView';
|
|
4
|
-
import CredentialMiniCardView from './components/views/CredentialMiniCardView';
|
|
5
|
-
import { CredentialMiniCardViewProps } from './components/views/CredentialMiniCardView';
|
|
4
|
+
import CredentialMiniCardView, { CredentialMiniCardViewProps } from './components/views/CredentialMiniCardView';
|
|
6
5
|
import SSICheckmarkBadge from './components/assets/badges/SSICheckmarkBadge';
|
|
7
6
|
import SSIExclamationMarkBadge from './components/assets/badges/SSIExclamationMarkBadge';
|
|
8
7
|
import SSIPlaceholderLogo from './components/assets/logos/SSIPlaceholderLogo';
|
|
@@ -28,6 +27,11 @@ import StepMarker from './components/assets/markers/StepMarker';
|
|
|
28
27
|
import DocumentIcon from './components/assets/icons/DocumentIcon';
|
|
29
28
|
import CrossIcon from './components/assets/icons/CrossIcon';
|
|
30
29
|
import ImageIcon from './components/assets/icons/ImageIcon';
|
|
30
|
+
import MeatBallsIcon from './components/assets/icons/MeatBallsIcon';
|
|
31
|
+
import PencilIcon from './components/assets/icons/PencilIcon';
|
|
32
|
+
import ViewIcon from './components/assets/icons/ViewIcon';
|
|
33
|
+
import CopyIcon from './components/assets/icons/CopyIcon';
|
|
34
|
+
import DeleteIcon from './components/assets/icons/DeleteIcon';
|
|
31
35
|
import FileSelection from './components/fields/FileSelection';
|
|
32
36
|
import ComboBox from './components/fields/ComboBox';
|
|
33
37
|
import DragAndDropBox from './components/fields/DragAndDropBox';
|
|
@@ -41,9 +45,10 @@ import JSONDataView from './components/views/JSONDataView';
|
|
|
41
45
|
import TextInputField from './components/fields/TextInputField';
|
|
42
46
|
import WarningImage from './components/assets/images/WarningImage';
|
|
43
47
|
import FormView from './components/views/FormView';
|
|
48
|
+
import InformationRequestView from './components/views/InformationRequestView';
|
|
44
49
|
import { Row } from '@tanstack/react-table';
|
|
45
50
|
export * from './styles/fonts';
|
|
46
51
|
export * from './types';
|
|
47
52
|
export * from './helpers';
|
|
48
53
|
export * from './utils';
|
|
49
|
-
export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, 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, JSONDataView, TextInputField, WarningImage, FormView };
|
|
54
|
+
export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, };
|
package/dist/index.js
CHANGED
|
@@ -27,6 +27,11 @@ import StepMarker from './components/assets/markers/StepMarker';
|
|
|
27
27
|
import DocumentIcon from './components/assets/icons/DocumentIcon';
|
|
28
28
|
import CrossIcon from './components/assets/icons/CrossIcon';
|
|
29
29
|
import ImageIcon from './components/assets/icons/ImageIcon';
|
|
30
|
+
import MeatBallsIcon from './components/assets/icons/MeatBallsIcon';
|
|
31
|
+
import PencilIcon from './components/assets/icons/PencilIcon';
|
|
32
|
+
import ViewIcon from './components/assets/icons/ViewIcon';
|
|
33
|
+
import CopyIcon from './components/assets/icons/CopyIcon';
|
|
34
|
+
import DeleteIcon from './components/assets/icons/DeleteIcon';
|
|
30
35
|
import FileSelection from './components/fields/FileSelection';
|
|
31
36
|
import ComboBox from './components/fields/ComboBox';
|
|
32
37
|
import DragAndDropBox from './components/fields/DragAndDropBox';
|
|
@@ -40,8 +45,9 @@ import JSONDataView from './components/views/JSONDataView';
|
|
|
40
45
|
import TextInputField from './components/fields/TextInputField';
|
|
41
46
|
import WarningImage from './components/assets/images/WarningImage';
|
|
42
47
|
import FormView from './components/views/FormView';
|
|
48
|
+
import InformationRequestView from './components/views/InformationRequestView';
|
|
43
49
|
export * from './styles/fonts';
|
|
44
50
|
export * from './types';
|
|
45
51
|
export * from './helpers';
|
|
46
52
|
export * from './utils';
|
|
47
|
-
export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, 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, JSONDataView, TextInputField, WarningImage, FormView };
|
|
53
|
+
export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
|
-
import { backgroundColors, borderColors, SSIRoundedEdgesCss } from
|
|
3
|
-
import { SSITextH1SemiBoldStyled, SSITextH2Styled } from
|
|
2
|
+
import { backgroundColors, borderColors, SSIRoundedEdgesCss } from '@sphereon/ui-components.core';
|
|
3
|
+
import { SSITextH1SemiBoldStyled, SSITextH2Styled } from '../../../fonts';
|
|
4
4
|
export const CredentialIssuanceWizardViewContainerStyled = styled.div `
|
|
5
5
|
display: flex;
|
|
6
6
|
flex-direction: column;
|
|
@@ -41,7 +41,7 @@ export const CredentialIssuanceWizardViewEvidenceContentContainerStyled = styled
|
|
|
41
41
|
gap: 24px;
|
|
42
42
|
`;
|
|
43
43
|
export const CredentialIssuanceWizardViewEvidenceTitleContainerStyled = styled.div `
|
|
44
|
-
display: flex;
|
|
44
|
+
display: flex;
|
|
45
45
|
flex-direction: row;
|
|
46
46
|
gap: 4px;
|
|
47
47
|
`;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export declare const InformationRequestViewContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export declare const InformationRequestViewContentContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
|
+
export declare const InformationRequestViewHeaderContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
+
export declare const InformationRequestViewPurposeContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
|
+
export declare const InformationRequestViewTitleStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
|
+
export declare const InformationRequestViewParagraphStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
|
+
export declare const InformationRequestViewDescriptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
|
+
export declare const InformationRequestViewSubSectionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
|
+
export declare const InformationRequestViewFormContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
|
+
export declare const InformationRequestViewFormTitleStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
11
|
+
export declare const InformationRequestViewFormDetailsContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
12
|
+
export declare const InformationRequestViewLogoContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
13
|
+
export declare const InformationRequestViewRPCardContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
14
|
+
export declare const InformationRequestViewCardTextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
15
|
+
export declare const InformationRequestViewCardTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
16
|
+
export declare const InformationRequestViewCardSubtitle: import("styled-components").StyledComponent<"div", any, {}, never>;
|