@sphereon/ui-components.ssi-react 0.1.3-unstable.40 → 0.1.3-unstable.42

package/dist/@config/toasts/index.js

@@ -9,5 +9,5 @@ export const toastConfig = {
     ssiToastError: (params) => {
         const { title, message, onClick, props } = params;
         return _jsx(SSIToast, { type: ToastType.ERROR, title: title, message: message, showBadge: props?.showBadge, onClick: onClick });
-    }
+    },
 };

package/dist/components/assets/loaders/SSILoader/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+interface SSILoaderProps {
+    ariaLabel?: string;
+    width?: string | number;
+    height?: string | number;
+    color?: string;
+    secondaryColor?: string;
+    strokeWidth?: string | number;
+    strokeWidthSecondary?: string | number;
+    visible?: boolean;
+    wrapperStyle?: {
+        [key: string]: string;
+    };
+    wrapperClass?: string;
+    timeout?: number;
+    callback: (state?: any) => Promise<void>;
+}
+export default class SSILoader extends React.Component<SSILoaderProps, any> {
+    componentDidMount(): void;
+    render(): JSX.Element;
+}
+export {};

package/dist/components/assets/loaders/SSILoader/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Oval } from 'react-loader-spinner';
+export default class SSILoader extends React.Component {
+    componentDidMount() {
+        setTimeout(async (state) => {
+            await this.props.callback(state);
+        }, this.props.timeout ?? 0);
+    }
+    render() {
+        return _jsx(Oval, { ...this.props });
+    }
+}

package/dist/components/fields/SSICheckbox/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { OpacityStyleEnum, fontColors, selectionElements } from '@sphereon/ui-components.core';
 import { SSICheckboxContainerStyled as Container, SSICheckboxLabelContainerStyled as LabelCaption, SSICheckboxSelectedContainerStyled as SelectedContainer, SSICheckboxUnselectedContainerStyled as UnselectedContainer, } from '../../../styles/components';
 const SSICheckbox = (props) => {
-    const { backgroundColor, borderColor = selectionElements.primaryBorderDark, disabled = false, initialValue = false, label, selectedColor = selectionElements.primaryDark, labelColor = fontColors.light, checkmarkColor = fontColors.dark } = props;
+    const { backgroundColor, borderColor = selectionElements.primaryBorderDark, disabled = false, initialValue = false, label, selectedColor = selectionElements.primaryDark, labelColor = fontColors.light, checkmarkColor = fontColors.dark, } = props;
     const [isChecked, setChecked] = React.useState(initialValue);
     const value = props.isChecked !== undefined ? props.isChecked : isChecked;
     const onValueChange = async () => {
@@ -16,9 +16,6 @@ const SSICheckbox = (props) => {
         }
         setChecked(!isChecked);
     };
-    return (_jsxs(Container, { onClick: onValueChange, style: { ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, children: [value ? (_jsx(SelectedContainer, { style: { backgroundColor: selectedColor, border: `1px solid ${borderColor}` } })) : (_jsx(UnselectedContainer, { style: { backgroundColor, border: `1px solid ${borderColor}` } })), label &&
-                (typeof label === 'string'
-                    ? _jsx(LabelCaption, { style: { color: labelColor }, children: label })
-                    : label)] }));
+    return (_jsxs(Container, { onClick: onValueChange, style: { ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, children: [value ? (_jsx(SelectedContainer, { style: { backgroundColor: selectedColor, border: `1px solid ${borderColor}` } })) : (_jsx(UnselectedContainer, { style: { backgroundColor, border: `1px solid ${borderColor}` } })), label && (typeof label === 'string' ? _jsx(LabelCaption, { style: { color: labelColor }, children: label }) : label)] }));
 };
 export default SSICheckbox;

package/dist/components/fields/SSIHoverText/index.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SSIHoverTextTextStyled as Text, SSIHoverTextContainerStyled as Container, SSIHoverTextTextHoverStyled as TextHover } from '../../../styles/components';
+import { SSIHoverTextTextStyled as Text, SSIHoverTextContainerStyled as Container, SSIHoverTextTextHoverStyled as TextHover, } from '../../../styles/components';
 const SSIHoverText = (props) => {
     const { text, truncationLength, enableHover = false } = props;
     const value = truncationLength ? text.substring(0, truncationLength) : text;
-    return (_jsxs(Container, { children: [_jsx(Text, { children: value }), enableHover &&
-                _jsx(TextHover, { children: text })] }));
+    return (_jsxs(Container, { children: [_jsx(Text, { children: value }), enableHover && _jsx(TextHover, { children: text })] }));
 };
 export default SSIHoverText;

package/dist/components/messageBoxes/toasts/SSIToast/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ToastType } from '@sphereon/ui-components.core';
 import SSICheckmarkBadge from '../../../assets/badges/SSICheckmarkBadge';
 import SSIExclamationMarkBadge from '../../../assets/badges/SSIExclamationMarkBadge';
-import { SSIToastContainerStyled as Container, SSIToastMessageTextStyled as MessageText, SSIFlexDirectionRowViewStyled as MessageContainer, SSITextH2SemiBoldStyled as TitleText, SSIToastTitleContainerStyled as TitleContainer, SSIToastBadgeContainerStyled as ToastBadgeContainer } from '../../../../styles';
+import { SSIToastContainerStyled as Container, SSIToastMessageTextStyled as MessageText, SSIFlexDirectionRowViewStyled as MessageContainer, SSITextH2SemiBoldStyled as TitleText, SSIToastTitleContainerStyled as TitleContainer, SSIToastBadgeContainerStyled as ToastBadgeContainer, } from '../../../../styles';
 const getBadge = (type) => {
     switch (type) {
         case ToastType.SUCCESS:
@@ -15,6 +15,6 @@ const getBadge = (type) => {
 };
 const SSIToast = (props) => {
     const { type, title, message, showBadge = true, onClick } = props;
-    return (_jsxs(Container, { onClick: onClick, children: [title && (_jsxs(TitleContainer, { children: [showBadge && _jsx(ToastBadgeContainer, { children: getBadge(type) }), _jsx(TitleText, { children: title })] })), _jsxs(MessageContainer, { children: [(!title && showBadge) && _jsx(ToastBadgeContainer, { children: getBadge(type) }), message && _jsx(MessageText, { style: { ...(showBadge && { textAlign: 'center' }) }, children: message })] })] }));
+    return (_jsxs(Container, { onClick: onClick, children: [title && (_jsxs(TitleContainer, { children: [showBadge && _jsx(ToastBadgeContainer, { children: getBadge(type) }), _jsx(TitleText, { children: title })] })), _jsxs(MessageContainer, { children: [!title && showBadge && _jsx(ToastBadgeContainer, { children: getBadge(type) }), message && _jsx(MessageText, { style: { ...(showBadge && { textAlign: 'center' }) }, children: message })] })] }));
 };
 export default SSIToast;

package/dist/components/messageBoxes/toasts/SSIToastContainer/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SSIToastContainerContainerStyled as Container } from '../../../../styles';
 const SSIToastContainer = (props) => {
-    const { position = 'top-right', autoHide = true, visibilityTimeMs = 6000, pauseOnHover = true, } = props;
+    const { position = 'top-right', autoHide = true, visibilityTimeMs = 6000, pauseOnHover = true } = props;
     return (_jsx(Container, { position: position, autoClose: !autoHide ? autoHide : visibilityTimeMs, hideProgressBar: true, closeButton: false, pauseOnHover: pauseOnHover }));
 };
 export default SSIToastContainer;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { credentialCardColors } from '@sphereon/ui-components.core';
 import SSILogo from '../../assets/logos/SSILogo';
-import { SSICredentialMiniCardViewContainerStyled as Container, SSICredentialMiniCardViewBackgroundImageStyled as BackgroundImage } from '../../../styles';
+import { SSICredentialMiniCardViewContainerStyled as Container, SSICredentialMiniCardViewBackgroundImageStyled as BackgroundImage, } from '../../../styles';
 const SSICredentialMiniCardView = (props) => {
     const { backgroundColor = credentialCardColors.default, backgroundImage, logo, logoColor, style } = props;
     return (_jsx(Container, { style: { ...style, backgroundColor }, children: _jsx(BackgroundImage, { style: {

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

@@ -7,7 +7,6 @@ import SSITypeLabel from '../../labels/SSITypeLabel';
 import SSIHoverText from '../../fields/SSIHoverText';
 import { SSITableViewCellContainerStyled as CellContainer, SSITableViewContainerStyled as Container, SSITableViewHeaderCellContainerStyled as HeaderCellContainer, SSITableViewLabelCellStyled as LabelCell, SSITableViewResultCountCaptionStyled as ResultCountCaption, SSITableViewRowContainerStyled as RowContainer, SSITableViewTableContainerStyled as TableContainer, } from '../../../styles';
 import { TableCellType } from '../../../types';
-import { SSIStatusLabel } from "../../../index";
 function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -25,9 +24,6 @@ const getCellFormatting = (type, value, truncationLength) => {
             const labels = Array.isArray(value) ? value.map((label) => _jsx(SSITypeLabel, { type: label })) : _jsx(SSITypeLabel, { type: value });
             return _jsx(LabelCell, { children: labels });
         }
-        case TableCellType.STATUS: {
-            return _jsx(SSIStatusLabel, { status: value });
-        }
         default:
             return _jsx("div", {});
     }

package/dist/index.d.ts

@@ -20,8 +20,9 @@ import SSITabViewHeader from './components/views/SSITabView/SSITabViewHeader';
 import SSIProfileIcon from './components/assets/icons/SSIProfileIcon';
 import SSISecondaryButton from './components/buttons/SSISecondaryButton';
 import SSICheckbox from './components/fields/SSICheckbox';
+import SSILoader from './components/assets/loaders/SSILoader';
 import SSIHoverText from './components/fields/SSIHoverText';
 export * from './styles/components/fonts';
 export * from './types';
 export * from './helpers';
-export { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIHoverText };
+export { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSILoader, SSIHoverText, };

package/dist/index.js

@@ -20,8 +20,9 @@ import SSITabViewHeader from './components/views/SSITabView/SSITabViewHeader';
 import SSIProfileIcon from './components/assets/icons/SSIProfileIcon';
 import SSISecondaryButton from './components/buttons/SSISecondaryButton';
 import SSICheckbox from './components/fields/SSICheckbox';
+import SSILoader from './components/assets/loaders/SSILoader';
 import SSIHoverText from './components/fields/SSIHoverText';
 export * from './styles/components/fonts';
 export * from './types';
 export * from './helpers';
-export { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIHoverText };
+export { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSILoader, SSIHoverText, };

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

@@ -13,7 +13,7 @@ export const SSICheckboxUnselectedContainerStyled = styled.div `
   border-width: 1px;
 `;
 export const SSICheckboxSelectedContainerStyled = styled.div `
-  width: 18px; 
+  width: 18px;
   aspect-ratio: 1;
   border-radius: 4px;
   align-items: center;

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

@@ -4,7 +4,6 @@ import { SSITextH5LightStyled } from '../../fonts';
 export const SSIStatusLabelContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
   border-radius: 9px;
   border: 1px solid #000;
-  width: fit-content;
 `;
 export const SSIStatusLabelStatusCaptionStyled = styled(SSITextH5LightStyled) `
   margin-left: 7px;

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

@@ -7,7 +7,7 @@ export const SSIToastContainerContainerStyled = styled(ToastContainer) `
     position: fixed;
     box-sizing: border-box;
   }
-  
+
   &.Toastify__toast-container--top-left {
     top: 1em;
     left: 1em;
@@ -35,18 +35,22 @@ export const SSIToastContainerContainerStyled = styled(ToastContainer) `
     right: 1em;
   }
 
-  @media only screen and (max-width : 480px) {
+  @media only screen and (max-width: 480px) {
     .Toastify__toast-container {
       width: 100vw;
       padding: 0;
       left: 0;
       margin: 0;
     }
-    .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
+    .Toastify__toast-container--top-left,
+    .Toastify__toast-container--top-center,
+    .Toastify__toast-container--top-right {
       top: 0;
       transform: translateX(0);
     }
-    .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
+    .Toastify__toast-container--bottom-left,
+    .Toastify__toast-container--bottom-center,
+    .Toastify__toast-container--bottom-right {
       bottom: 0;
       transform: translateX(0);
     }
@@ -55,7 +59,7 @@ export const SSIToastContainerContainerStyled = styled(ToastContainer) `
       left: initial;
     }
   }
-  
+
   .Toastify__toast {
     position: relative;
     box-sizing: border-box;
@@ -68,7 +72,7 @@ export const SSIToastContainerContainerStyled = styled(ToastContainer) `
     direction: ltr;
     z-index: 0;
   }
-  
+
   .Toastify__toast--rtl {
     direction: rtl;
   }
@@ -98,7 +102,7 @@ export const SSIToastContainerContainerStyled = styled(ToastContainer) `
     animation-duration: 0.7s;
   }
 
-  @media only screen and (max-width : 480px) {
+  @media only screen and (max-width: 480px) {
     .Toastify__toast {
       margin-bottom: 0;
       border-radius: 0;
@@ -127,7 +131,11 @@ export const SSIToastContainerContainerStyled = styled(ToastContainer) `
   }
 
   @keyframes Toastify__bounceInRight {
-    from, 60%, 75%, 90%, to {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
       animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     }
     from {
@@ -159,7 +167,11 @@ export const SSIToastContainerContainerStyled = styled(ToastContainer) `
     }
   }
   @keyframes Toastify__bounceInLeft {
-    from, 60%, 75%, 90%, to {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
       animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     }
     0% {
@@ -191,7 +203,11 @@ export const SSIToastContainerContainerStyled = styled(ToastContainer) `
     }
   }
   @keyframes Toastify__bounceInUp {
-    from, 60%, 75%, 90%, to {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
       animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     }
     from {
@@ -216,7 +232,8 @@ export const SSIToastContainerContainerStyled = styled(ToastContainer) `
     20% {
       transform: translate3d(0, -10px, 0);
     }
-    40%, 45% {
+    40%,
+    45% {
       opacity: 1;
       transform: translate3d(0, 20px, 0);
     }
@@ -226,7 +243,11 @@ export const SSIToastContainerContainerStyled = styled(ToastContainer) `
     }
   }
   @keyframes Toastify__bounceInDown {
-    from, 60%, 75%, 90%, to {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
       animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     }
     0% {
@@ -251,7 +272,8 @@ export const SSIToastContainerContainerStyled = styled(ToastContainer) `
     20% {
       transform: translate3d(0, 10px, 0);
     }
-    40%, 45% {
+    40%,
+    45% {
       opacity: 1;
       transform: translate3d(0, -20px, 0);
     }
@@ -260,10 +282,12 @@ export const SSIToastContainerContainerStyled = styled(ToastContainer) `
       transform: translate3d(0, 2000px, 0);
     }
   }
-  .Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
+  .Toastify__bounce-enter--top-left,
+  .Toastify__bounce-enter--bottom-left {
     animation-name: Toastify__bounceInLeft;
   }
-  .Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
+  .Toastify__bounce-enter--top-right,
+  .Toastify__bounce-enter--bottom-right {
     animation-name: Toastify__bounceInRight;
   }
   .Toastify__bounce-enter--top-center {
@@ -273,10 +297,12 @@ export const SSIToastContainerContainerStyled = styled(ToastContainer) `
     animation-name: Toastify__bounceInUp;
   }
 
-  .Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
+  .Toastify__bounce-exit--top-left,
+  .Toastify__bounce-exit--bottom-left {
     animation-name: Toastify__bounceOutLeft;
   }
-  .Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
+  .Toastify__bounce-exit--top-right,
+  .Toastify__bounce-exit--bottom-right {
     animation-name: Toastify__bounceOutRight;
   }
   .Toastify__bounce-exit--top-center {

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { fontColors } from '@sphereon/ui-components.core';
-import { SSITextH1Css, SSITextH2Css, SSITextH2SemiBoldStyledCss, SSITextH3Css, SSITextH4Css, SSITextH4SemiBoldCss, SSITextH5Css, SSITextH6Css } from '../../css';
+import { SSITextH1Css, SSITextH2Css, SSITextH2SemiBoldStyledCss, SSITextH3Css, SSITextH4Css, SSITextH4SemiBoldCss, SSITextH5Css, SSITextH6Css, } from '../../css';
 export const SSITextH1Styled = styled.span `
   ${SSITextH1Css}
 `;

package/dist/types/table/index.d.ts

@@ -1,8 +1,7 @@
 import { AccessorFn, DeepKeys } from '@tanstack/react-table';
 export declare enum TableCellType {
     TEXT = "text",
-    LABEL = "label",
-    STATUS = "status"
+    LABEL = "label"
 }
 export type ColumnHeader<T> = {
     accessor: AccessorFn<T> | DeepKeys<T>;

package/dist/types/table/index.js

@@ -2,5 +2,4 @@ export var TableCellType;
 (function (TableCellType) {
     TableCellType["TEXT"] = "text";
     TableCellType["LABEL"] = "label";
-    TableCellType["STATUS"] = "status";
 })(TableCellType || (TableCellType = {}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.1.3-unstable.40+5045248",
+  "version": "0.1.3-unstable.42+0b192df",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -28,8 +28,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@sphereon/ui-components.core": "0.1.3-unstable.40+5045248",
+    "@sphereon/ui-components.core": "0.1.3-unstable.42+0b192df",
     "@tanstack/react-table": "^8.9.3",
+    "react-loader-spinner": "^5.4.5",
     "react-toastify": "^9.1.3",
     "styled-components": "^5.3.3"
   },
@@ -41,5 +42,5 @@
   "peerDependencies": {
     "react": ">= 16.8.0"
   },
-  "gitHead": "5045248918930f27e749ef80b78bde21691fc92b"
+  "gitHead": "0b192df82e83d188d3e2f9501733b277efcd64d7"
 }

package/dist/types/component/index.js

@@ -1 +0,0 @@
-"use strict";