@sphereon/ui-components.ssi-react 0.4.1-unstable.6 → 0.4.1-unstable.61
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/dist/components/assets/badges/SSICheckmarkBadge/index.js +2 -2
- package/dist/components/assets/badges/SSIExclamationMarkBadge/index.js +2 -2
- package/dist/components/assets/icons/ActivityIcon/index.d.ts +8 -0
- package/dist/components/assets/icons/ActivityIcon/index.js +10 -0
- package/dist/components/assets/icons/AddContact/index.d.ts +8 -0
- package/dist/components/assets/icons/AddContact/index.js +10 -0
- package/dist/components/assets/icons/BellIcon/index.d.ts +8 -0
- package/dist/components/assets/icons/BellIcon/index.js +10 -0
- package/dist/components/assets/icons/CapitolIcon/index.js +3 -2
- package/dist/components/assets/icons/ChevronIcon/index.js +2 -2
- package/dist/components/assets/icons/ContactIcon/index.d.ts +8 -0
- package/dist/components/assets/icons/ContactIcon/index.js +10 -0
- package/dist/components/assets/icons/ContactOverview/index.d.ts +8 -0
- package/dist/components/assets/icons/ContactOverview/index.js +10 -0
- package/dist/components/assets/icons/CopyIcon/index.js +2 -2
- package/dist/components/assets/icons/CredentialIcon/index.d.ts +8 -0
- package/dist/components/assets/icons/CredentialIcon/index.js +10 -0
- package/dist/components/assets/icons/CrossIcon/index.js +2 -2
- package/dist/components/assets/icons/DeleteIcon/index.js +2 -2
- package/dist/components/assets/icons/DocumentIcon/index.js +2 -2
- package/dist/components/assets/icons/Identifier/index.d.ts +8 -0
- package/dist/components/assets/icons/Identifier/index.js +10 -0
- package/dist/components/assets/icons/ImageIcon/index.js +2 -2
- package/dist/components/assets/icons/IssueCredential/index.d.ts +8 -0
- package/dist/components/assets/icons/IssueCredential/index.js +10 -0
- package/dist/components/assets/icons/IssuedCredential/index.d.ts +8 -0
- package/dist/components/assets/icons/IssuedCredential/index.js +10 -0
- package/dist/components/assets/icons/Key/index.d.ts +8 -0
- package/dist/components/assets/icons/Key/index.js +10 -0
- package/dist/components/assets/icons/LaptopIcon/index.js +3 -2
- package/dist/components/assets/icons/ManIcon/index.js +2 -2
- package/dist/components/assets/icons/Management/index.d.ts +8 -0
- package/dist/components/assets/icons/Management/index.js +10 -0
- package/dist/components/assets/icons/MeatBallsIcon/index.js +3 -2
- package/dist/components/assets/icons/PencilIcon/index.js +2 -2
- package/dist/components/assets/icons/SSIAddIcon/index.js +2 -2
- package/dist/components/assets/icons/SSIArrowDownIcon/index.js +2 -2
- package/dist/components/assets/icons/SSIFilterIcon/index.js +2 -2
- package/dist/components/assets/icons/StoreIcon/index.js +3 -2
- package/dist/components/assets/icons/ViewIcon/index.js +2 -2
- package/dist/components/assets/logos/SSIPlaceholderLogo/index.js +3 -2
- package/dist/components/assets/placeholders/PersonPlaceholder/index.js +2 -2
- package/dist/components/fields/JSONForms/CustomArrayControl/index.d.ts +5 -0
- package/dist/components/fields/JSONForms/CustomArrayControl/index.js +59 -0
- package/dist/components/fields/JSONForms/PassportPhotoControl/index.js +2 -2
- package/dist/components/indicators/ProgressStepIndicator/index.js +4 -3
- package/dist/components/lists/DropDownList/index.js +38 -2
- package/dist/components/lists/Listbox/index.js +0 -2
- package/dist/components/views/ContactViewItem/index.d.ts +2 -1
- package/dist/components/views/FormView/index.js +10 -18
- package/dist/components/views/RoleViewItem/index.d.ts +1 -1
- package/dist/components/views/RoleViewItem/index.js +14 -14
- package/dist/index.d.ts +6 -1
- package/dist/index.js +6 -1
- package/dist/renders/jsonFormsRenders.js +2 -0
- package/dist/styles/components/components/ContactViewItem/index.d.ts +8 -9
- package/dist/styles/components/components/CredentialIssuanceWizardView/index.d.ts +11 -13
- package/dist/styles/components/components/CredentialViewItem/index.d.ts +8 -13
- package/dist/styles/components/components/DragAndDropBox/index.d.ts +6 -6
- package/dist/styles/components/components/DropDownList/index.d.ts +5 -5
- package/dist/styles/components/components/DropDownListItem/index.d.ts +6 -7
- package/dist/styles/components/components/FileSelectionField/index.d.ts +12 -14
- package/dist/styles/components/components/IconButton/index.d.ts +2 -1
- package/dist/styles/components/components/InformationRequestView/index.d.ts +18 -30
- package/dist/styles/components/components/JSONDataView/index.d.ts +8 -7
- package/dist/styles/components/components/PassportPhotoControl/index.d.ts +5 -4
- package/dist/styles/components/components/PrimaryButton/index.d.ts +2 -4
- package/dist/styles/components/components/ProgressStepIndicator/index.d.ts +11 -13
- package/dist/styles/components/components/SSICheckbox/index.d.ts +7 -8
- package/dist/styles/components/components/SSICredentialCardView/index.d.ts +16 -27
- package/dist/styles/components/components/SSICredentialMiniCardView/index.d.ts +4 -4
- package/dist/styles/components/components/SSIHoverText/index.d.ts +4 -3
- package/dist/styles/components/components/SSIProfileIcon/index.d.ts +2 -1
- package/dist/styles/components/components/SSIStatusLabel/index.d.ts +6 -7
- package/dist/styles/components/components/SSITabView/index.d.ts +2 -1
- package/dist/styles/components/components/SSITabViewHeader/index.d.ts +5 -5
- package/dist/styles/components/components/SSITableView/index.d.ts +12 -11
- package/dist/styles/components/components/SSITableViewHeader/index.d.ts +8 -10
- package/dist/styles/components/components/SSIToast/index.d.ts +7 -10
- package/dist/styles/components/components/SSIToastContainer/index.d.ts +2 -4
- package/dist/styles/components/components/SSITypeLabel/index.d.ts +2 -4
- package/dist/styles/components/components/SecondaryButton/index.d.ts +4 -7
- package/dist/styles/components/components/StepMarker/index.d.ts +5 -4
- package/dist/styles/components/components/TextInputField/index.d.ts +3 -2
- package/dist/styles/components/components/TextInputField/index.js +1 -1
- package/dist/styles/components/components/buttons/index.d.ts +2 -3
- package/dist/styles/components/containers/index.d.ts +5 -6
- package/dist/styles/css/index.d.ts +13 -12
- package/dist/styles/css/tailwind.css +13 -1
- package/dist/styles/fonts/index.d.ts +17 -28
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.js +1 -0
- package/dist/types/jsonForms/index.d.ts +4 -0
- package/dist/types/jsonForms/index.js +5 -0
- package/package.json +14 -7
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { parseColor } from '@sphereon/ui-components.core';
|
|
3
|
+
const ManagementIcon = (props) => {
|
|
4
|
+
const { size = 24, color = '--color-grey-800', style } = props;
|
|
5
|
+
const iconAspectRatio = 1;
|
|
6
|
+
const height = size / 16;
|
|
7
|
+
const width = iconAspectRatio * height;
|
|
8
|
+
return (_jsx("div", { style: { ...style, width: `${width}rem`, height: `${height}rem`, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("svg", { width: "26", height: "26", viewBox: "0 0 26 26", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M19.8408 1.37402C20.1344 0.808372 20.9495 0.808474 21.2432 1.37402L21.2441 1.37598L21.2705 1.43066V1.43262C21.8097 2.69772 22.733 3.7619 23.9082 4.46973L24.6455 4.91309L24.6465 4.91406L24.6934 4.94434L24.6953 4.94531C25.1681 5.27543 25.1679 5.98407 24.6953 6.31543L24.6943 6.31641L24.667 6.27441L24.6934 6.31641L24.6465 6.3457L24.6455 6.34668L23.9082 6.79102C23.5166 7.02786 23.1521 7.30304 22.8213 7.6123C22.8965 7.98655 22.9375 8.37475 22.9375 8.77148V19.2412C22.9375 22.4489 20.3481 25.0498 17.1543 25.0498H6.73242C3.53882 25.0498 0.950195 22.4491 0.950195 19.2412V8.77148C0.950195 5.56378 3.53865 2.96193 6.73242 2.96191H17.1543C17.6944 2.96191 18.2185 3.03746 18.7148 3.17676C19.1674 2.66002 19.5408 2.07268 19.8135 1.43262L19.8145 1.43066L19.8408 1.37598V1.37402ZM6.73242 4.10938C4.17047 4.10939 2.09302 6.19646 2.09277 8.77051V19.2412C2.09283 21.8156 4.17052 23.9023 6.73242 23.9023H17.1543C19.7164 23.9023 21.7949 21.8154 21.7949 19.2412V8.84082C21.6165 9.11728 21.4575 9.40719 21.3223 9.70898L21.2705 9.82715L21.2695 9.8291L21.2432 9.88379V9.88574C20.959 10.4343 20.1848 10.4515 19.8701 9.9375L19.8135 9.82715L19.7617 9.70898L19.6582 9.49121C19.1248 8.41223 18.3035 7.5001 17.2842 6.8584L17.1748 6.79004V6.78906L16.4385 6.34668C15.8994 6.0223 15.8994 5.23744 16.4385 4.91309L17.1758 4.46973C17.3443 4.36748 17.5067 4.25578 17.665 4.13965C17.4973 4.12128 17.3265 4.10938 17.1543 4.10938H6.73242ZM11.1621 7.15039C11.7658 7.15039 12.2549 7.64216 12.2549 8.24805V12.959C12.2549 13.5649 11.7658 14.0557 11.1621 14.0557H9.67676C9.70003 14.0857 9.72244 14.1174 9.74316 14.1514L12.3496 18.3408C12.2231 17.9662 12.1543 17.5649 12.1543 17.1475C12.1543 15.0965 13.8104 13.4326 15.8525 13.4326C17.8943 13.4329 19.5498 15.0967 19.5498 17.1475C19.5498 19.1982 17.8944 20.862 15.8525 20.8623C14.6266 20.8623 13.54 20.2619 12.8672 19.3389C12.9628 19.9682 12.4863 20.5995 11.7852 20.5996H5.84961C4.99076 20.5996 4.4681 19.6523 4.92188 18.9219L7.8916 14.1514V14.1504L7.93066 14.0898L7.93262 14.0879C7.94077 14.0767 7.95042 14.0666 7.95898 14.0557H6.47168C5.86821 14.0554 5.37988 13.5647 5.37988 12.959V8.24805C5.37988 7.64231 5.86821 7.15063 6.47168 7.15039H11.1621ZM15.8525 14.5801C14.4408 14.5801 13.2969 15.73 13.2969 17.1475C13.297 18.5661 14.4409 19.7148 15.8525 19.7148C17.264 19.7146 18.4071 18.566 18.4072 17.1475C18.4072 15.7301 17.2641 14.5803 15.8525 14.5801ZM5.93945 19.4531H11.6943L8.81641 14.8262L5.93945 19.4531ZM6.52246 12.9092H11.1123V8.29785H6.52246V12.9092ZM20.542 2.5459C19.8909 3.74179 18.9345 4.74838 17.7637 5.45312L17.4688 5.62988L17.7637 5.80762C18.9342 6.51228 19.8909 7.51818 20.542 8.71387C21.1931 7.51801 22.1505 6.51234 23.3213 5.80762L23.6152 5.62988L23.3213 5.45312C22.1503 4.74832 21.1932 3.74202 20.542 2.5459Z", fill: parseColor(color), stroke: parseColor(color), "stroke-width": "0.1" }) }) }) }));
|
|
9
|
+
};
|
|
10
|
+
export default ManagementIcon;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { fontColors } from '@sphereon/ui-components.core';
|
|
2
|
+
import { fontColors, parseColor } from '@sphereon/ui-components.core';
|
|
3
3
|
const MeatBallsIcon = (props) => {
|
|
4
4
|
const { width = 20, height = 5, color = fontColors.dark, style } = props;
|
|
5
|
-
|
|
5
|
+
const parsedColor = parseColor(color);
|
|
6
|
+
return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 20 5", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "2", cy: "2.5", r: "2", fill: parsedColor }), _jsx("circle", { cx: "10", cy: "2.5", r: "2", fill: parsedColor }), _jsx("circle", { cx: "18", cy: "2.5", r: "2", fill: parsedColor })] }) }));
|
|
6
7
|
};
|
|
7
8
|
export default MeatBallsIcon;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { fontColors } from '@sphereon/ui-components.core';
|
|
2
|
+
import { fontColors, parseColor } from '@sphereon/ui-components.core';
|
|
3
3
|
const PencilIcon = (props) => {
|
|
4
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 }) }) }));
|
|
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: parseColor(color) }) }) }));
|
|
6
6
|
};
|
|
7
7
|
export default PencilIcon;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { fontColors } from '@sphereon/ui-components.core';
|
|
2
|
+
import { fontColors, parseColor } from '@sphereon/ui-components.core';
|
|
3
3
|
const SSIAddIcon = (props) => {
|
|
4
4
|
const { size = 16, 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 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8 0.5C7.65483 0.5 7.375 0.779833 7.375 1.125V7.37503H1.125C0.779812 7.37503 0.5 7.65484 0.5 8.00003C0.5 8.34519 0.779812 8.62502 1.125 8.62502H7.375V14.875C7.375 15.2202 7.65483 15.5 8 15.5C8.34519 15.5 8.625 15.2202 8.625 14.875V8.62502H14.875C15.2202 8.62502 15.5 8.34519 15.5 8.00003C15.5 7.65484 15.2202 7.37503 14.875 7.37503H8.625V1.125C8.625 0.779833 8.34519 0.5 8 0.5Z", fill: color }) }) }));
|
|
5
|
+
return (_jsx("div", { style: { ...style, width: size, height: size, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8 0.5C7.65483 0.5 7.375 0.779833 7.375 1.125V7.37503H1.125C0.779812 7.37503 0.5 7.65484 0.5 8.00003C0.5 8.34519 0.779812 8.62502 1.125 8.62502H7.375V14.875C7.375 15.2202 7.65483 15.5 8 15.5C8.34519 15.5 8.625 15.2202 8.625 14.875V8.62502H14.875C15.2202 8.62502 15.5 8.34519 15.5 8.00003C15.5 7.65484 15.2202 7.37503 14.875 7.37503H8.625V1.125C8.625 0.779833 8.34519 0.5 8 0.5Z", fill: parseColor(color) }) }) }));
|
|
6
6
|
};
|
|
7
7
|
export default SSIAddIcon;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { fontColors } from '@sphereon/ui-components.core';
|
|
2
|
+
import { fontColors, parseColor } from '@sphereon/ui-components.core';
|
|
3
3
|
const SSIArrowDownIcon = (props) => {
|
|
4
4
|
const { width = 16, height = 8, 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 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8.03265 7.74886C8.14951 7.74175 8.26065 7.69465 8.34825 7.61511L15.3133 1.19499C15.367 1.1489 15.411 1.09224 15.4429 1.02837C15.4747 0.964504 15.4937 0.894731 15.4987 0.823204C15.5037 0.751676 15.4946 0.67985 15.4719 0.611995C15.4493 0.54414 15.4135 0.481647 15.3668 0.428216C15.3201 0.374784 15.2634 0.331504 15.2001 0.300961C15.1367 0.270419 15.068 0.253238 14.9981 0.250423C14.9281 0.247608 14.8583 0.259221 14.7928 0.28458C14.7273 0.309939 14.6675 0.348517 14.6168 0.398032L8 6.49492L1.38317 0.398032C1.33252 0.348517 1.27268 0.309939 1.20718 0.28458C1.14169 0.259221 1.07189 0.247597 1.00193 0.250412C0.931963 0.253227 0.863266 0.270419 0.799918 0.300961C0.736569 0.331504 0.679861 0.374784 0.633164 0.428216C0.586466 0.481647 0.550732 0.54414 0.528085 0.611995C0.505437 0.67985 0.496338 0.751676 0.501329 0.823204C0.506319 0.894731 0.525297 0.964504 0.557135 1.02837C0.588973 1.09224 0.633022 1.1489 0.686663 1.19499L7.65174 7.61511C7.70344 7.6621 7.76372 7.69811 7.82911 7.72107C7.89449 7.74403 7.96367 7.75348 8.03265 7.74886Z", fill: color }) }) }));
|
|
5
|
+
return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8.03265 7.74886C8.14951 7.74175 8.26065 7.69465 8.34825 7.61511L15.3133 1.19499C15.367 1.1489 15.411 1.09224 15.4429 1.02837C15.4747 0.964504 15.4937 0.894731 15.4987 0.823204C15.5037 0.751676 15.4946 0.67985 15.4719 0.611995C15.4493 0.54414 15.4135 0.481647 15.3668 0.428216C15.3201 0.374784 15.2634 0.331504 15.2001 0.300961C15.1367 0.270419 15.068 0.253238 14.9981 0.250423C14.9281 0.247608 14.8583 0.259221 14.7928 0.28458C14.7273 0.309939 14.6675 0.348517 14.6168 0.398032L8 6.49492L1.38317 0.398032C1.33252 0.348517 1.27268 0.309939 1.20718 0.28458C1.14169 0.259221 1.07189 0.247597 1.00193 0.250412C0.931963 0.253227 0.863266 0.270419 0.799918 0.300961C0.736569 0.331504 0.679861 0.374784 0.633164 0.428216C0.586466 0.481647 0.550732 0.54414 0.528085 0.611995C0.505437 0.67985 0.496338 0.751676 0.501329 0.823204C0.506319 0.894731 0.525297 0.964504 0.557135 1.02837C0.588973 1.09224 0.633022 1.1489 0.686663 1.19499L7.65174 7.61511C7.70344 7.6621 7.76372 7.69811 7.82911 7.72107C7.89449 7.74403 7.96367 7.75348 8.03265 7.74886Z", fill: parseColor(color) }) }) }));
|
|
6
6
|
};
|
|
7
7
|
export default SSIArrowDownIcon;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { fontColors } from '@sphereon/ui-components.core';
|
|
2
|
+
import { fontColors, parseColor } from '@sphereon/ui-components.core';
|
|
3
3
|
const SSIFilterIcon = (props) => {
|
|
4
4
|
const { height = 16, width = 18, 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 18 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M16.5 1.5H1.5L7.5 8.33222V13.0556L10.5 14.5V8.33222L16.5 1.5Z", stroke: color, strokeOpacity: "0.8", strokeWidth: "1.29412", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
|
|
5
|
+
return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 18 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M16.5 1.5H1.5L7.5 8.33222V13.0556L10.5 14.5V8.33222L16.5 1.5Z", stroke: parseColor(color), strokeOpacity: "0.8", strokeWidth: "1.29412", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
|
|
6
6
|
};
|
|
7
7
|
export default SSIFilterIcon;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { fontColors } from '@sphereon/ui-components.core';
|
|
2
|
+
import { fontColors, parseColor } from '@sphereon/ui-components.core';
|
|
3
3
|
const StoreIcon = (props) => {
|
|
4
4
|
const { width = 18, height = 20, color = fontColors.dark, style } = props;
|
|
5
|
-
|
|
5
|
+
const parsedColor = parseColor(color);
|
|
6
|
+
return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 18 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("mask", { id: "path-1-inside-1_1397_24", fill: parsedColor, children: _jsx("path", { d: "M15.9705 17.1621H2.02961C1.87104 17.1621 1.74292 17.032 1.74292 16.8721V8.59922C1.74292 8.43925 1.87105 8.31 2.02961 8.31C2.18817 8.31 2.3163 8.43926 2.3163 8.59922V16.5829H15.6838V8.59922C15.6838 8.43925 15.8119 8.31 15.9704 8.31C16.129 8.31 16.2571 8.43926 16.2571 8.59922V16.8721C16.2571 16.9488 16.2275 17.0223 16.173 17.0773C16.1194 17.1314 16.0466 17.1621 15.9705 17.1621Z" }) }), _jsx("path", { d: "M15.9705 17.1621H2.02961C1.87104 17.1621 1.74292 17.032 1.74292 16.8721V8.59922C1.74292 8.43925 1.87105 8.31 2.02961 8.31C2.18817 8.31 2.3163 8.43926 2.3163 8.59922V16.5829H15.6838V8.59922C15.6838 8.43925 15.8119 8.31 15.9704 8.31C16.129 8.31 16.2571 8.43926 16.2571 8.59922V16.8721C16.2571 16.9488 16.2275 17.0223 16.173 17.0773C16.1194 17.1314 16.0466 17.1621 15.9705 17.1621Z", fill: parsedColor }), _jsx("path", { d: "M2.3163 16.5829H1.3163V17.5829H2.3163V16.5829ZM15.6838 16.5829V17.5829H16.6838V16.5829H15.6838ZM16.173 17.0773L16.8833 17.7813L16.173 17.0773ZM15.9705 17.1621V16.1621H2.02961V17.1621V18.1621H15.9705V17.1621ZM2.02961 17.1621V16.1621C2.43522 16.1621 2.74292 16.4917 2.74292 16.8721H1.74292H0.74292C0.74292 17.5723 1.30687 18.1621 2.02961 18.1621V17.1621ZM1.74292 16.8721H2.74292V8.59922H1.74292H0.74292V16.8721H1.74292ZM1.74292 8.59922H2.74292C2.74292 8.98326 2.43158 9.31 2.02961 9.31V8.31V7.31C1.31053 7.31 0.74292 7.89524 0.74292 8.59922H1.74292ZM2.02961 8.31V9.31C1.62762 9.31 1.3163 8.98325 1.3163 8.59922H2.3163H3.3163C3.3163 7.89527 2.74871 7.31 2.02961 7.31V8.31ZM2.3163 8.59922H1.3163V16.5829H2.3163H3.3163V8.59922H2.3163ZM2.3163 16.5829V17.5829H15.6838V16.5829V15.5829H2.3163V16.5829ZM15.6838 16.5829H16.6838V8.59922H15.6838H14.6838V16.5829H15.6838ZM15.6838 8.59922H16.6838C16.6838 8.98326 16.3724 9.31 15.9704 9.31V8.31V7.31C15.2514 7.31 14.6838 7.89525 14.6838 8.59922H15.6838ZM15.9704 8.31V9.31C15.5685 9.31 15.2571 8.98325 15.2571 8.59922H16.2571H17.2571C17.2571 7.89527 16.6895 7.31 15.9704 7.31V8.31ZM16.2571 8.59922H15.2571V16.8721H16.2571H17.2571V8.59922H16.2571ZM16.2571 16.8721H15.2571C15.2571 16.6896 15.3285 16.5088 15.4628 16.3733L16.173 17.0773L16.8833 17.7813C17.1265 17.5359 17.2571 17.208 17.2571 16.8721H16.2571ZM16.173 17.0773L15.4628 16.3733C15.5947 16.2403 15.7766 16.1621 15.9705 16.1621V17.1621V18.1621C16.3166 18.1621 16.6441 18.0225 16.8833 17.7813L16.173 17.0773Z", fill: parsedColor, mask: "url(#path-1-inside-1_1397_24)" }), _jsx("path", { d: "M17.713 6.65146H0.286859C0.188356 6.65146 0.0962602 6.60057 0.0442054 6.51574C-0.00864901 6.43172 -0.0142561 6.32588 0.0281887 6.2362L1.56179 3.04019H1.56259C1.61064 2.94001 1.71074 2.87619 1.82045 2.87619H16.1793C16.2891 2.87619 16.3892 2.94001 16.4372 3.04019L17.9716 6.2362C18.0141 6.32587 18.0085 6.43171 17.9564 6.51574C17.9035 6.60057 17.8115 6.65146 17.713 6.65146ZM0.744857 6.0722H17.2548L15.999 3.4555H2.00056L0.744857 6.0722Z", fill: parsedColor }), _jsx("path", { d: "M14.2281 6.65142C14.1007 6.65142 13.9878 6.56659 13.9526 6.44298L13.0324 3.24698L13.0316 3.24617C12.9876 3.09267 13.0757 2.93191 13.2278 2.88746C13.38 2.84303 13.5393 2.93109 13.5834 3.08459L14.5035 6.28059V6.2814C14.5476 6.4349 14.4603 6.59566 14.3081 6.64011C14.2825 6.64738 14.2553 6.65142 14.2281 6.65142Z", fill: parsedColor }), _jsx("path", { d: "M10.7429 6.65146C10.5955 6.65146 10.4714 6.53836 10.4578 6.38971L10.1503 3.19371C10.1351 3.03455 10.2504 2.89237 10.4081 2.87702C10.5667 2.86167 10.7068 2.97882 10.7221 3.13797L11.0296 6.33397C11.0368 6.41072 11.0136 6.48667 10.9655 6.54644C10.9167 6.60542 10.8462 6.64258 10.7709 6.64985C10.7613 6.65147 10.7517 6.65146 10.7429 6.65146Z", fill: parsedColor }), _jsx("path", { d: "M7.25718 6.65144C7.24757 6.65144 7.23876 6.65144 7.22915 6.64982V6.65063C7.15307 6.64255 7.08339 6.60539 7.03535 6.54641C6.98649 6.48663 6.96327 6.41068 6.97128 6.33394L7.278 3.13794C7.28521 3.06119 7.32204 2.9909 7.38131 2.94243C7.43977 2.89315 7.51504 2.87053 7.59112 2.8778C7.74888 2.89315 7.86419 3.03453 7.84898 3.19368L7.54146 6.38968C7.52705 6.53752 7.40452 6.65063 7.25718 6.65144Z", fill: parsedColor }), _jsx("path", { d: "M3.77205 6.65147C3.74482 6.65147 3.7176 6.64743 3.69197 6.64016C3.53981 6.59572 3.45171 6.43495 3.49657 6.28145L4.41673 3.08544V3.08463C4.43755 3.01112 4.4872 2.94891 4.55367 2.91174C4.62094 2.87458 4.69942 2.8665 4.77229 2.88751C4.92445 2.93194 5.01175 3.09271 4.9677 3.24622L4.04754 6.44305C4.0123 6.56666 3.89939 6.65147 3.77205 6.65147Z", fill: parsedColor }), _jsx("path", { d: "M9.00025 8.88922C7.87989 8.88761 6.97175 7.97145 6.97095 6.84122V6.36214C6.97095 6.20217 7.09908 6.07211 7.25764 6.07211H10.7429C10.9014 6.07211 11.0295 6.20219 11.0295 6.36214V6.84122C11.0287 7.97145 10.1206 8.88761 9.00025 8.88922ZM7.54433 6.65142V6.84127C7.54433 7.65241 8.19621 8.31003 9.00025 8.31003C9.80429 8.31003 10.4562 7.65241 10.4562 6.84127V6.65142H7.54433Z", fill: parsedColor }), _jsx("path", { d: "M5.51465 8.88922C4.3943 8.88761 3.48615 7.97145 3.48535 6.84122V6.36214C3.48535 6.20217 3.61348 6.07211 3.77204 6.07211H7.25726C7.41583 6.07211 7.54395 6.20219 7.54395 6.36214V6.84122C7.54315 7.97145 6.63501 8.88761 5.51465 8.88922ZM4.05873 6.65142V6.84127C4.05873 7.65241 4.71061 8.31003 5.51465 8.31003C6.31869 8.31003 6.97057 7.65241 6.97057 6.84127V6.65142H4.05873Z", fill: parsedColor }), _jsx("path", { d: "M2.02979 8.88922C0.909433 8.88761 0.00128783 7.97145 0.000488281 6.84122V6.36214C0.000488281 6.20217 0.128621 6.07211 0.287178 6.07211H3.7724C3.93096 6.07211 4.05909 6.20219 4.05909 6.36214V6.84122C4.05829 7.97145 3.15014 8.88761 2.02979 8.88922ZM0.573868 6.65142V6.84127C0.573868 7.65241 1.22575 8.31003 2.02979 8.31003C2.83383 8.31003 3.48571 7.65241 3.48571 6.84127V6.65142H0.573868Z", fill: parsedColor }), _jsx("path", { d: "M12.4856 8.88922C11.3652 8.88761 10.4571 7.97145 10.4563 6.84122V6.36214C10.4563 6.20217 10.5844 6.07211 10.743 6.07211H14.2282C14.3868 6.07211 14.5149 6.20219 14.5149 6.36214V6.84122C14.5141 7.97145 13.606 8.88761 12.4856 8.88922ZM11.0297 6.65142V6.84127C11.0297 7.65241 11.6816 8.31003 12.4856 8.31003C13.2896 8.31003 13.9415 7.65241 13.9415 6.84127V6.65142H11.0297Z", fill: parsedColor }), _jsx("path", { d: "M15.9705 8.88922C14.8501 8.88761 13.942 7.97145 13.9412 6.84122V6.36214C13.9412 6.20217 14.0693 6.07211 14.2279 6.07211H17.7131C17.8716 6.07211 17.9998 6.20219 17.9998 6.36214V6.84122C17.999 7.97145 17.0908 8.88761 15.9705 8.88922ZM14.5145 6.65142V6.84127C14.5145 7.65241 15.1664 8.31003 15.9705 8.31003C16.7745 8.31003 17.4264 7.65241 17.4264 6.84127V6.65142H14.5145Z", fill: parsedColor }), _jsx("path", { d: "M17.7133 19.0791H0.287178C0.128613 19.0791 0.000488281 18.9498 0.000488281 18.7899V16.872C0.000488281 16.712 0.128621 16.5827 0.287178 16.5827H17.7133C17.8718 16.5827 18 16.712 18 16.872V18.7899C18 18.8666 17.9703 18.9402 17.9159 18.9943C17.8622 19.0492 17.7894 19.0791 17.7133 19.0791ZM0.573786 18.5006H17.4265V17.162H0.573786V18.5006Z", fill: parsedColor }), _jsx("path", { d: "M14.0574 17.1621H9.95717C9.7986 17.1621 9.66968 17.032 9.66968 16.8721V10.6674C9.66968 10.5075 9.79861 10.3782 9.95717 10.3782H14.0574C14.216 10.3782 14.3441 10.5075 14.3441 10.6674V16.8721C14.3441 16.9488 14.3137 17.0223 14.26 17.0773C14.2064 17.1314 14.1335 17.1621 14.0574 17.1621ZM10.2438 16.5828H13.7698V10.9575H10.2438V16.5828Z", fill: parsedColor }), _jsx("path", { d: "M8.0432 15.0939H3.94294C3.78438 15.0939 3.65625 14.9638 3.65625 14.8038V10.6674C3.65625 10.5075 3.78438 10.3782 3.94294 10.3782H8.0432C8.20176 10.3782 8.33069 10.5075 8.33069 10.6674V14.8038C8.33069 14.8806 8.30026 14.9541 8.2466 15.009C8.19214 15.0632 8.11928 15.0939 8.0432 15.0939ZM4.22955 14.5146H7.75557V10.9575H4.22955V14.5146Z", fill: parsedColor }), _jsx("path", { d: "M10.9478 14.4242C10.7893 14.4242 10.6611 14.2941 10.6611 14.1342V13.4055C10.6611 13.2455 10.7893 13.1162 10.9478 13.1162C11.1064 13.1162 11.2345 13.2455 11.2345 13.4055V14.1342C11.2345 14.2109 11.2049 14.2844 11.1504 14.3394C11.0968 14.3935 11.0239 14.4242 10.9478 14.4242Z", fill: parsedColor }), _jsx("path", { d: "M16.1793 3.45524H1.82038C1.66182 3.45524 1.53369 3.32517 1.53369 3.16522V1.21012C1.53369 1.05015 1.66182 0.920898 1.82038 0.920898H16.1793C16.3378 0.920898 16.466 1.05016 16.466 1.21012V3.16522C16.466 3.24277 16.4355 3.31629 16.3819 3.37042C16.3282 3.42455 16.2554 3.45524 16.1793 3.45524ZM2.10781 2.87598H15.8916V1.49934H2.10781V2.87598Z", fill: parsedColor })] }) }));
|
|
6
7
|
};
|
|
7
8
|
export default StoreIcon;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { fontColors } from '@sphereon/ui-components.core';
|
|
2
|
+
import { fontColors, parseColor } from '@sphereon/ui-components.core';
|
|
3
3
|
const ViewIcon = (props) => {
|
|
4
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 }) }) }));
|
|
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: parseColor(color) }) }) }));
|
|
6
6
|
};
|
|
7
7
|
export default ViewIcon;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { logoColors } from '@sphereon/ui-components.core';
|
|
2
|
+
import { logoColors, parseColor } from '@sphereon/ui-components.core';
|
|
3
3
|
const SSIPlaceholderLogo = (props) => {
|
|
4
4
|
const { color = logoColors.default, size = 32, style } = props;
|
|
5
|
-
|
|
5
|
+
const parsedColor = parseColor(color);
|
|
6
|
+
return (_jsx("div", { style: { ...style, width: size, height: size }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 32 32", fill: "none", children: [_jsx("path", { d: "M15.9997 31.9999C11.7563 31.9999 7.68645 30.3141 4.68603 27.3136C1.68548 24.313 0 20.2435 0 15.9999C0 11.7563 1.68548 7.68669 4.68603 4.68627C7.68657 1.68572 11.7561 0 15.9997 0C20.2433 0 24.3129 1.68572 27.3133 4.68627C30.3139 7.68657 31.9994 11.7563 31.9994 15.9999C31.9947 20.2419 30.3075 24.3089 27.3079 27.3082C24.3083 30.3077 20.2415 31.9949 15.9997 31.9999ZM15.9997 0.914927V0.914691C11.9987 0.914691 8.16186 2.50412 5.33238 5.33317C2.50339 8.1624 0.9139 11.9997 0.9139 16.0005C0.9139 20.0015 2.50333 23.8383 5.33238 26.6678C8.16137 29.4968 11.9983 31.0863 15.9997 31.0863C20.0011 31.0863 23.8375 29.4968 26.667 26.6678C29.496 23.8388 31.0855 20.0018 31.0855 16.0005C31.081 12.0009 29.4901 8.16627 26.662 5.33861C23.834 2.51059 19.9997 0.919705 16.0002 0.915174L15.9997 0.914927Z", fill: parsedColor }), _jsx("path", { d: "M30.1659 10.0545C30.0927 10.0545 30.0205 10.0368 29.9556 10.0028C26.3647 8.13584 21.2781 7.06476 15.9997 7.06476C10.7214 7.06476 5.63448 8.13578 2.04387 10.0028C1.93604 10.0625 1.80862 10.0762 1.6904 10.0405C1.57241 10.0049 1.47355 9.92327 1.41668 9.81378C1.35981 9.70429 1.34966 9.5764 1.38836 9.45936C1.42706 9.34232 1.51154 9.24581 1.62244 9.19177C5.39433 7.23065 10.4993 6.15039 16 6.15039C21.5006 6.15039 26.6056 7.23065 30.3775 9.19177C30.5643 9.28899 30.6604 9.50136 30.6104 9.70594C30.5603 9.91052 30.377 10.0545 30.1663 10.0545L30.1659 10.0545Z", fill: parsedColor }), _jsx("path", { d: "M15.9996 25.848C10.4929 25.848 5.38486 24.7664 1.61726 22.8022C1.39333 22.6856 1.30626 22.4095 1.42282 22.1856C1.53963 21.9617 1.8157 21.8746 2.03964 21.9912C5.62728 23.8614 10.7147 24.9339 15.9997 24.9339C21.2848 24.9339 26.3722 23.8614 29.9598 21.9914V21.9912C30.1838 21.8746 30.4598 21.9617 30.5766 22.1856C30.6932 22.4096 30.6061 22.6856 30.3822 22.8022C26.6146 24.7666 21.5066 25.8481 15.9999 25.8481L15.9996 25.848Z", fill: parsedColor }), _jsx("path", { d: "M15.9995 32.0001C11.3852 32.0001 7.77148 24.9717 7.77148 16.0007C7.77148 7.02959 11.3855 0.0012207 15.9995 0.0012207C20.6136 0.0012207 24.2276 7.02899 24.2276 16.0007C24.2276 24.9723 20.6136 32.0001 15.9995 32.0001ZM15.9995 0.915181C11.9666 0.915181 8.68545 7.68078 8.68545 16.0007C8.68545 24.3205 11.9668 31.0861 15.9995 31.0861C20.0323 31.0861 23.3136 24.3205 23.3136 16.0007C23.3136 7.68078 20.0323 0.915181 15.9995 0.915181Z", fill: parsedColor }), _jsx("path", { d: "M16 31.9998C15.7476 31.9998 15.543 31.795 15.543 31.5425V0.457553C15.543 0.205069 15.7476 0.000488281 16 0.000488281C16.2525 0.000488281 16.4571 0.205069 16.4571 0.457553V31.5425C16.4571 31.6638 16.409 31.7801 16.3233 31.8658C16.2377 31.9514 16.1213 31.9998 16 31.9998V31.9998Z", fill: parsedColor }), _jsx("path", { d: "M31.542 16.4571H0.457065C0.204581 16.4571 0 16.2525 0 16C0 15.7476 0.204581 15.543 0.457065 15.543H31.542C31.7945 15.543 31.9991 15.7476 31.9991 16C31.9991 16.2525 31.7945 16.4571 31.542 16.4571Z", fill: parsedColor })] }) }));
|
|
6
7
|
};
|
|
7
8
|
export default SSIPlaceholderLogo;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { elementColors } from '@sphereon/ui-components.core';
|
|
2
|
+
import { elementColors, parseColor } from '@sphereon/ui-components.core';
|
|
3
3
|
const PersonPlaceholder = (props) => {
|
|
4
4
|
const { width = 79, height = 77, color = elementColors[300], style } = props;
|
|
5
|
-
return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 79 77", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M22.8136 19.3766C22.8136 10.2672 30.2594 2.85265 39.4999 2.85265C48.7404 2.85265 56.1862 10.2672 56.1862 19.3766C56.1862 28.486 48.7404 35.9005 39.4999 35.9005C30.2594 35.9005 22.8136 28.486 22.8136 19.3766ZM3.52788 62.4042C3.52788 60.1881 4.62672 58.0491 6.89989 55.9687C9.18981 53.873 12.4868 52.0225 16.3463 50.4894C24.0686 47.4219 33.3853 45.8802 39.4999 45.8802C45.6144 45.8802 54.9312 47.4219 62.6534 50.4894C66.513 52.0225 69.81 53.873 72.0999 55.9687C74.3731 58.0491 75.4719 60.1881 75.4719 62.4042V74.1473H3.52788V62.4042Z", stroke: color, strokeWidth: "5.19882" }) }) }));
|
|
5
|
+
return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 79 77", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M22.8136 19.3766C22.8136 10.2672 30.2594 2.85265 39.4999 2.85265C48.7404 2.85265 56.1862 10.2672 56.1862 19.3766C56.1862 28.486 48.7404 35.9005 39.4999 35.9005C30.2594 35.9005 22.8136 28.486 22.8136 19.3766ZM3.52788 62.4042C3.52788 60.1881 4.62672 58.0491 6.89989 55.9687C9.18981 53.873 12.4868 52.0225 16.3463 50.4894C24.0686 47.4219 33.3853 45.8802 39.4999 45.8802C45.6144 45.8802 54.9312 47.4219 62.6534 50.4894C66.513 52.0225 69.81 53.873 72.0999 55.9687C74.3731 58.0491 75.4719 60.1881 75.4719 62.4042V74.1473H3.52788V62.4042Z", stroke: parseColor(color), strokeWidth: "5.19882" }) }) }));
|
|
6
6
|
};
|
|
7
7
|
export default PersonPlaceholder;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { JsonFormsDispatch, withJsonFormsControlProps } from '@jsonforms/react';
|
|
3
|
+
import { and, isArrayObjectControl, optionIs, rankWith } from '@jsonforms/core';
|
|
4
|
+
import { ButtonIcon } from '@sphereon/ui-components.core';
|
|
5
|
+
import IconButton from '../../../buttons/IconButton';
|
|
6
|
+
import PrimaryButton from '../../../buttons/PrimaryButton';
|
|
7
|
+
import { JsonFormsCustomControlKey } from '../../../../types';
|
|
8
|
+
const CustomArrayControl = (props) => {
|
|
9
|
+
const { data = [], handleChange, path, schema, uischema, label } = props;
|
|
10
|
+
const elements = uischema.options?.detail?.elements || [];
|
|
11
|
+
const itemSchema = schema.items && !Array.isArray(schema.items) ? schema.items : {};
|
|
12
|
+
const handleAdd = async () => {
|
|
13
|
+
handleChange(path, [...data, {}]);
|
|
14
|
+
};
|
|
15
|
+
const handleRemove = async (index) => {
|
|
16
|
+
const newData = data.filter((_, i) => i !== index);
|
|
17
|
+
handleChange(path, newData);
|
|
18
|
+
};
|
|
19
|
+
const getItemElements = () => {
|
|
20
|
+
return data.map((item, index) => _jsx("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: _jsx("div", { style: { display: 'flex', flexDirection: 'row', borderRadius: 8, overflow: 'hidden', width: '100%' }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 24, width: '100%' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 12 }, children: [_jsx("div", { style: { display: 'flex', flexDirection: 'row', gap: 24, padding: 24, border: '1px solid #C4C4C4', borderRadius: 8, flexGrow: 1, alignItems: 'center' }, children: getFieldElements(elements, `${path}.${index}`) }), _jsx(IconButton, { icon: ButtonIcon.DELETE, onClick: () => handleRemove(index) })] }), item?.type === 'object' &&
|
|
21
|
+
_jsx("div", { style: { marginLeft: 24, display: 'flex', flexDirection: 'row' }, children: getChildFieldElements(elements, `${path}.${index}`) })] }) }) }, index));
|
|
22
|
+
};
|
|
23
|
+
const getFieldElements = (elements, path) => {
|
|
24
|
+
return elements
|
|
25
|
+
.filter(element => element?.options?.type !== JsonFormsCustomControlKey.ARRAY)
|
|
26
|
+
.map((element, i) => _jsx(JsonFormsDispatch, { uischema: element, schema: itemSchema, path: path }, i));
|
|
27
|
+
};
|
|
28
|
+
const getChildFieldElements = (elements, path) => {
|
|
29
|
+
return elements
|
|
30
|
+
.filter(element => element?.options?.type === JsonFormsCustomControlKey.ARRAY)
|
|
31
|
+
.map((element, i) => {
|
|
32
|
+
const childrenArraySchema = itemSchema.properties?.children;
|
|
33
|
+
const resolvedChildrenSchema = {
|
|
34
|
+
...childrenArraySchema,
|
|
35
|
+
items: itemSchema
|
|
36
|
+
};
|
|
37
|
+
const childrenUiSchema = {
|
|
38
|
+
...element,
|
|
39
|
+
type: "Control",
|
|
40
|
+
scope: "#",
|
|
41
|
+
options: {
|
|
42
|
+
...uischema.options,
|
|
43
|
+
type: JsonFormsCustomControlKey.ARRAY,
|
|
44
|
+
detail: {
|
|
45
|
+
elements
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
return (_jsx(JsonFormsDispatch, { uischema: childrenUiSchema, schema: resolvedChildrenSchema, path: path }, i));
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 28, width: '100%' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [_jsx("div", { style: { color: 'black', fontSize: 16, fontWeight: '400' }, children: label }), _jsx(PrimaryButton, { caption: uischema.options?.addLabel || '+', onClick: handleAdd, style: {
|
|
53
|
+
marginLeft: 'auto',
|
|
54
|
+
height: 33,
|
|
55
|
+
width: 120
|
|
56
|
+
} })] }), getItemElements()] }));
|
|
57
|
+
};
|
|
58
|
+
export const customArrayControlTester = rankWith(5, and(isArrayObjectControl, optionIs('type', JsonFormsCustomControlKey.ARRAY)));
|
|
59
|
+
export default withJsonFormsControlProps(CustomArrayControl);
|
|
@@ -8,7 +8,7 @@ import PersonPlaceholder from '../../../assets/placeholders/PersonPlaceholder';
|
|
|
8
8
|
import FileSelection from '../../FileSelection';
|
|
9
9
|
import { base64UriToFile } from '../../../../utils';
|
|
10
10
|
import { PassportPhotoControlContainerStyled as Container, PassportPhotoControlDragAndDropBoxContainerStyled as DragAndDropBoxContainer, PassportPhotoControlPassportPhotoContainerStyled as PassportPhotoContainer, PassportPhotoControlPassportPhotoImageStyled as PassportPhotoImage, } from '../../../../styles';
|
|
11
|
-
import { FileSelectionFieldType } from '../../../../types';
|
|
11
|
+
import { FileSelectionFieldType, JsonFormsCustomControlKey } from '../../../../types';
|
|
12
12
|
const PassportPhotoControl = (props) => {
|
|
13
13
|
const { data, handleChange, path } = props;
|
|
14
14
|
const [image, setImage] = useState(data && { file: base64UriToFile(data.base64Uri, data.fileName, data.mimeType), base64Uri: data.base64Uri });
|
|
@@ -30,5 +30,5 @@ const PassportPhotoControl = (props) => {
|
|
|
30
30
|
};
|
|
31
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 })] }));
|
|
32
32
|
};
|
|
33
|
-
export const passportPhotoControlTester = rankWith(3, and(isObjectControl, optionIs('type',
|
|
33
|
+
export const passportPhotoControlTester = rankWith(3, and(isObjectControl, optionIs('type', JsonFormsCustomControlKey.PASSPORT_PHOTO)));
|
|
34
34
|
export default withJsonFormsControlProps(PassportPhotoControl);
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Fragment } from 'react';
|
|
2
3
|
import { elementColors, fontColors, Localization } from '@sphereon/ui-components.core';
|
|
3
4
|
import StepMarker from '../../assets/markers/StepMarker';
|
|
4
5
|
import { gradientColors } from '../../../styles/colors';
|
|
@@ -7,7 +8,7 @@ import { StepStatus } from '../../../types';
|
|
|
7
8
|
const getStepRowElement = (stepNumber, status, step, maxSteps) => {
|
|
8
9
|
const { title, description, required = true } = step;
|
|
9
10
|
const gridRowNumber = stepNumber * 2 - 1;
|
|
10
|
-
return (_jsxs(
|
|
11
|
+
return (_jsxs(Fragment, { children: [_jsxs(StepMarkerCell, { style: { gridRow: gridRowNumber }, children: [_jsx(StepMarker, { stepNumber: stepNumber, status: status }), stepNumber < maxSteps && (_jsx(StepLine, { style: {
|
|
11
12
|
...(status === StepStatus.COMPLETED && {
|
|
12
13
|
backgroundColor: elementColors.purple,
|
|
13
14
|
}),
|
|
@@ -24,7 +25,7 @@ const getStepRowElement = (stepNumber, status, step, maxSteps) => {
|
|
|
24
25
|
...(status === StepStatus.COMPLETED && {
|
|
25
26
|
backgroundColor: elementColors.purple,
|
|
26
27
|
}),
|
|
27
|
-
} }) }))] }));
|
|
28
|
+
} }) }))] }, stepNumber));
|
|
28
29
|
};
|
|
29
30
|
const getStepStatus = (stepNumber, activeStep) => {
|
|
30
31
|
if (stepNumber < activeStep) {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState, useRef, useEffect } from 'react';
|
|
3
|
+
import { createPortal } from 'react-dom';
|
|
3
4
|
import { borderColors } from '@sphereon/ui-components.core';
|
|
4
5
|
import DropDownListItem from '../DropDownListItem';
|
|
5
6
|
import IconButton from '../../buttons/IconButton';
|
|
@@ -7,14 +8,43 @@ import { DropDownListContainerStyled as Container, DropDownContainerStyled as Dr
|
|
|
7
8
|
const DropDownList = (props) => {
|
|
8
9
|
const { icon, buttons, showBorder = false } = props;
|
|
9
10
|
const [showActionsMenu, setShowActionsMenu] = useState(false);
|
|
11
|
+
const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0, position: 'bottom' });
|
|
10
12
|
const dropdownRef = useRef(null);
|
|
13
|
+
const menuRef = useRef(null);
|
|
11
14
|
const onMore = (event) => {
|
|
12
15
|
setShowActionsMenu(!showActionsMenu);
|
|
13
16
|
event.stopPropagation();
|
|
14
17
|
};
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
if (showActionsMenu && dropdownRef.current) {
|
|
20
|
+
const updatePosition = () => {
|
|
21
|
+
if (!dropdownRef.current || !menuRef.current) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
const buttonRect = dropdownRef.current.getBoundingClientRect();
|
|
25
|
+
const menuHeight = menuRef.current.offsetHeight;
|
|
26
|
+
const viewportHeight = window.innerHeight;
|
|
27
|
+
const spaceBelow = viewportHeight - buttonRect.bottom;
|
|
28
|
+
const shouldFlipUp = spaceBelow < menuHeight && buttonRect.top > menuHeight;
|
|
29
|
+
setMenuPosition({
|
|
30
|
+
top: shouldFlipUp ? buttonRect.top - menuHeight : buttonRect.bottom,
|
|
31
|
+
left: buttonRect.right - menuRef.current.offsetWidth,
|
|
32
|
+
position: shouldFlipUp ? 'top' : 'bottom'
|
|
33
|
+
});
|
|
34
|
+
};
|
|
35
|
+
updatePosition();
|
|
36
|
+
window.addEventListener('scroll', updatePosition, true);
|
|
37
|
+
window.addEventListener('resize', updatePosition);
|
|
38
|
+
return () => {
|
|
39
|
+
window.removeEventListener('scroll', updatePosition, true);
|
|
40
|
+
window.removeEventListener('resize', updatePosition);
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
}, [showActionsMenu]);
|
|
15
44
|
useEffect(() => {
|
|
16
45
|
const onClickOutside = (event) => {
|
|
17
|
-
if (dropdownRef.current && !dropdownRef.current.contains(event.target)
|
|
46
|
+
if (dropdownRef.current && !dropdownRef.current.contains(event.target) &&
|
|
47
|
+
menuRef.current && !menuRef.current.contains(event.target)) {
|
|
18
48
|
setShowActionsMenu(false);
|
|
19
49
|
}
|
|
20
50
|
};
|
|
@@ -29,6 +59,12 @@ const DropDownList = (props) => {
|
|
|
29
59
|
return (_jsx(DropDownListItem, { showBorder: showBorder, label: item.caption, onClick: item.onClick, icon: item.icon, fontColor: item.fontColor }, index));
|
|
30
60
|
});
|
|
31
61
|
};
|
|
32
|
-
return (_jsxs(Container, { ref: dropdownRef, children: [_jsx(ListButton, { children: _jsx(IconButton, { icon: icon, onClick: onMore }) }), showActionsMenu && (_jsx(DropDownContainer, {
|
|
62
|
+
return (_jsxs(Container, { ref: dropdownRef, children: [_jsx(ListButton, { children: _jsx(IconButton, { icon: icon, onClick: onMore }) }), showActionsMenu && createPortal(_jsx(DropDownContainer, { ref: menuRef, style: {
|
|
63
|
+
position: 'fixed',
|
|
64
|
+
top: menuPosition.top,
|
|
65
|
+
left: menuPosition.left,
|
|
66
|
+
zIndex: 9999,
|
|
67
|
+
...(showBorder && { borderWidth: 2, borderColor: borderColors.lightGrey, borderStyle: 'solid' })
|
|
68
|
+
}, children: getItems() }), document.body)] }));
|
|
33
69
|
};
|
|
34
70
|
export default DropDownList;
|
|
@@ -17,8 +17,6 @@ const Listbox = (props) => {
|
|
|
17
17
|
flex
|
|
18
18
|
flex-1
|
|
19
19
|
outline-none
|
|
20
|
-
rounded-[var(--border-radius-4)]
|
|
21
|
-
bg-[var(--color-grey-50)]
|
|
22
20
|
overflow-hidden
|
|
23
21
|
`, children: selected && renderItem(selected, open) }), _jsx(ListboxOptions, { anchor: anchor, transition: true, className: `
|
|
24
22
|
w-[var(--button-width)]
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import type { IImageAttributes } from '@sphereon/ssi-sdk.data-store';
|
|
3
|
+
import { CredentialRole } from '@sphereon/ssi-types';
|
|
3
4
|
export interface Props {
|
|
4
5
|
name: string;
|
|
5
6
|
uri?: string;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { useState } from 'react';
|
|
3
3
|
import { JsonForms } from '@jsonforms/react';
|
|
4
4
|
import { materialCells } from '@jsonforms/material-renderers';
|
|
5
5
|
import { jsonFormsMaterialRenderers } from '../../../renders/jsonFormsRenders';
|
|
@@ -14,10 +14,15 @@ const initializeDefaultValues = (schema, currentData = {}) => {
|
|
|
14
14
|
if (property.const && (!(key in result) || !result[key])) {
|
|
15
15
|
result[key] = property.const;
|
|
16
16
|
}
|
|
17
|
-
if (property.default &&
|
|
17
|
+
if (property.default !== undefined && !(key in result)) {
|
|
18
18
|
if (property.format?.startsWith('date') || property.format?.startsWith('time')) {
|
|
19
19
|
result[key] = formatDateToISO(property.default, property.format);
|
|
20
20
|
}
|
|
21
|
+
else if (typeof property.default === 'object') {
|
|
22
|
+
result[key] = Array.isArray(property.default)
|
|
23
|
+
? [...property.default]
|
|
24
|
+
: { ...property.default };
|
|
25
|
+
}
|
|
21
26
|
else {
|
|
22
27
|
result[key] = property.default;
|
|
23
28
|
}
|
|
@@ -35,23 +40,10 @@ const initializeDefaultValues = (schema, currentData = {}) => {
|
|
|
35
40
|
const FormView = (props) => {
|
|
36
41
|
const { data, schema, uiSchema, validationMode = 'ValidateAndShow', renderers = jsonFormsMaterialRenderers, cells = materialCells, style, middleware, ajv, onFormStateChange, readonly = false, config, } = props;
|
|
37
42
|
const [formData, setFormData] = useState(data ?? {});
|
|
38
|
-
|
|
39
|
-
const initializedData = initializeDefaultValues(schema, formData);
|
|
40
|
-
setFormData(initializedData);
|
|
41
|
-
}, [schema]);
|
|
43
|
+
const [initialized, setInitialized] = useState(false);
|
|
42
44
|
const onFormStateChanged = (state) => {
|
|
43
|
-
|
|
44
|
-
if (JSON.stringify(updatedData) !== JSON.stringify(state.data)) {
|
|
45
|
-
setFormData(updatedData);
|
|
46
|
-
void onFormStateChange?.({
|
|
47
|
-
...state,
|
|
48
|
-
data: updatedData,
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
else {
|
|
52
|
-
void onFormStateChange?.(state);
|
|
53
|
-
}
|
|
45
|
+
void onFormStateChange?.(state);
|
|
54
46
|
};
|
|
55
|
-
return (_jsx("div", { style: style, children: _jsx(JsonForms, { schema: schema, uischema: uiSchema, data: formData, renderers: renderers,
|
|
47
|
+
return (_jsx("div", { style: style, children: _jsx(JsonForms, { schema: schema, uischema: uiSchema, data: formData, renderers: renderers, onChange: onFormStateChanged }) }));
|
|
56
48
|
};
|
|
57
49
|
export default FormView;
|
|
@@ -13,35 +13,35 @@ const RoleViewItem = (props) => {
|
|
|
13
13
|
flex-row
|
|
14
14
|
px-[var(--spacing-1_5)]
|
|
15
15
|
py-[var(--spacing-1)]
|
|
16
|
-
gap-[var(--spacing-
|
|
16
|
+
gap-[var(--spacing-2)]
|
|
17
17
|
`, children: [getRoleIconElement(role), _jsxs("div", { className: `
|
|
18
18
|
flex
|
|
19
19
|
flex-col
|
|
20
20
|
flex-grow
|
|
21
21
|
gap-[var(--spacing-0_5)]
|
|
22
|
-
items-start
|
|
23
|
-
`, children: [_jsx("div", { className: `
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
22
|
+
${accountName ? 'items-start' : 'items-start justify-center'}
|
|
23
|
+
`, children: [accountName && (_jsx("div", { className: `
|
|
24
|
+
font-1
|
|
25
|
+
text-left
|
|
26
|
+
pr-[var(--spacing-4)]
|
|
27
|
+
break-words
|
|
28
|
+
text-[var(--color-grey-600)]
|
|
29
|
+
`, children: accountName })), _jsx("div", { className: `
|
|
30
30
|
font-2
|
|
31
|
-
mt-auto
|
|
31
|
+
${accountName ? 'mt-auto' : ''}
|
|
32
32
|
text-[var(--color-grey-900)]
|
|
33
33
|
`, children: formatRole(role) })] })] }));
|
|
34
34
|
};
|
|
35
35
|
const getRoleIconElement = (role) => {
|
|
36
36
|
switch (role) {
|
|
37
37
|
case RoleType.HOLDER:
|
|
38
|
-
return _jsx(RoleIconView, { icon: _jsx(ManIcon, { color: 'var(--color-grey-50)' }), backgroundColor: 'var(--color-
|
|
38
|
+
return _jsx(RoleIconView, { icon: _jsx(ManIcon, { color: 'var(--color-grey-50)' }), backgroundColor: 'var(--color-holder)' });
|
|
39
39
|
case RoleType.ISSUER:
|
|
40
|
-
return _jsx(RoleIconView, { icon: _jsx(CapitolIcon, { color: 'var(--color-grey-50)' }), backgroundColor: 'var(--color-
|
|
40
|
+
return _jsx(RoleIconView, { icon: _jsx(CapitolIcon, { color: 'var(--color-grey-50)' }), backgroundColor: 'var(--color-issuer)' });
|
|
41
41
|
case RoleType.RELYING_PARTY:
|
|
42
|
-
return _jsx(RoleIconView, { icon: _jsx(StoreIcon, { color: 'var(--color-grey-50)' }), backgroundColor: 'var(--color-
|
|
42
|
+
return _jsx(RoleIconView, { icon: _jsx(StoreIcon, { color: 'var(--color-grey-50)' }), backgroundColor: 'var(--color-relying-party)' });
|
|
43
43
|
case RoleType.ADMIN:
|
|
44
|
-
return _jsx(RoleIconView, { icon: _jsx(LaptopIcon, { color: 'var(--color-grey-50)' }), backgroundColor: 'var(--color-
|
|
44
|
+
return _jsx(RoleIconView, { icon: _jsx(LaptopIcon, { color: 'var(--color-grey-50)' }), backgroundColor: 'var(--color-admin)' });
|
|
45
45
|
default:
|
|
46
46
|
return _jsx("div", {});
|
|
47
47
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -37,6 +37,7 @@ import ComboBox from './components/fields/ComboBox';
|
|
|
37
37
|
import DragAndDropBox from './components/fields/DragAndDropBox';
|
|
38
38
|
import PersonPlaceholder from './components/assets/placeholders/PersonPlaceholder';
|
|
39
39
|
import PassportPhotoControl, { passportPhotoControlTester } from './components/fields/JSONForms/PassportPhotoControl';
|
|
40
|
+
import CustomArrayControl, { customArrayControlTester } from './components/fields/JSONForms/CustomArrayControl';
|
|
40
41
|
import CredentialIssuanceWizardView from './components/views/CredentialIssuanceWizardView';
|
|
41
42
|
import PaginationControls from './components/views/SSITableView/PaginationControls';
|
|
42
43
|
import PaginationControlsProps from './components/views/SSITableView/PaginationControls';
|
|
@@ -55,6 +56,10 @@ import StoreIcon from './components/assets/icons/StoreIcon';
|
|
|
55
56
|
import RoleIconView from './components/views/RoleIconView';
|
|
56
57
|
import RoleViewItem from './components/views/RoleViewItem';
|
|
57
58
|
import Listbox from './components/lists/Listbox';
|
|
59
|
+
import ActivityIcon from './components/assets/icons/ActivityIcon';
|
|
60
|
+
import ContactIcon from './components/assets/icons/ContactIcon';
|
|
61
|
+
import BellIcon from './components/assets/icons/BellIcon';
|
|
62
|
+
import CredentialIcon from './components/assets/icons/CredentialIcon';
|
|
58
63
|
import { Row } from '@tanstack/react-table';
|
|
59
64
|
import './styles/css/tailwind.css';
|
|
60
65
|
import './components/views/FormView/styles.css';
|
|
@@ -63,4 +68,4 @@ export * from './styles/fonts';
|
|
|
63
68
|
export * from './types';
|
|
64
69
|
export * from './helpers';
|
|
65
70
|
export * from './utils';
|
|
66
|
-
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, ContactViewItem, CapitolIcon, ChevronIcon, ManIcon, LaptopIcon, StoreIcon, RoleIconView, RoleViewItem, Listbox };
|
|
71
|
+
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, CustomArrayControl, customArrayControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem, CapitolIcon, ChevronIcon, ManIcon, LaptopIcon, StoreIcon, RoleIconView, RoleViewItem, Listbox, ActivityIcon, ContactIcon, BellIcon, CredentialIcon };
|
package/dist/index.js
CHANGED
|
@@ -37,6 +37,7 @@ import ComboBox from './components/fields/ComboBox';
|
|
|
37
37
|
import DragAndDropBox from './components/fields/DragAndDropBox';
|
|
38
38
|
import PersonPlaceholder from './components/assets/placeholders/PersonPlaceholder';
|
|
39
39
|
import PassportPhotoControl, { passportPhotoControlTester } from './components/fields/JSONForms/PassportPhotoControl';
|
|
40
|
+
import CustomArrayControl, { customArrayControlTester } from './components/fields/JSONForms/CustomArrayControl';
|
|
40
41
|
import CredentialIssuanceWizardView from './components/views/CredentialIssuanceWizardView';
|
|
41
42
|
import PaginationControls from './components/views/SSITableView/PaginationControls';
|
|
42
43
|
import PaginationControlsProps from './components/views/SSITableView/PaginationControls';
|
|
@@ -55,6 +56,10 @@ import StoreIcon from './components/assets/icons/StoreIcon';
|
|
|
55
56
|
import RoleIconView from './components/views/RoleIconView';
|
|
56
57
|
import RoleViewItem from './components/views/RoleViewItem';
|
|
57
58
|
import Listbox from './components/lists/Listbox';
|
|
59
|
+
import ActivityIcon from './components/assets/icons/ActivityIcon';
|
|
60
|
+
import ContactIcon from './components/assets/icons/ContactIcon';
|
|
61
|
+
import BellIcon from './components/assets/icons/BellIcon';
|
|
62
|
+
import CredentialIcon from './components/assets/icons/CredentialIcon';
|
|
58
63
|
import './styles/css/tailwind.css';
|
|
59
64
|
import './components/views/FormView/styles.css';
|
|
60
65
|
import '@sphereon/ui-components.core/dist/styles/tokens.css';
|
|
@@ -62,4 +67,4 @@ export * from './styles/fonts';
|
|
|
62
67
|
export * from './types';
|
|
63
68
|
export * from './helpers';
|
|
64
69
|
export * from './utils';
|
|
65
|
-
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, ContactViewItem, CapitolIcon, ChevronIcon, ManIcon, LaptopIcon, StoreIcon, RoleIconView, RoleViewItem, Listbox };
|
|
70
|
+
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, CustomArrayControl, customArrayControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem, CapitolIcon, ChevronIcon, ManIcon, LaptopIcon, StoreIcon, RoleIconView, RoleViewItem, Listbox, ActivityIcon, ContactIcon, BellIcon, CredentialIcon };
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { materialRenderers } from '@jsonforms/material-renderers';
|
|
2
2
|
import PassportPhotoControl, { passportPhotoControlTester } from '../components/fields/JSONForms/PassportPhotoControl';
|
|
3
|
+
import CustomArrayControl, { customArrayControlTester } from '../components/fields/JSONForms/CustomArrayControl';
|
|
3
4
|
export const jsonFormsMaterialRenderers = [
|
|
4
5
|
...materialRenderers,
|
|
5
6
|
{ tester: passportPhotoControlTester, renderer: PassportPhotoControl },
|
|
7
|
+
{ tester: customArrayControlTester, renderer: CustomArrayControl },
|
|
6
8
|
];
|