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

package/dist/components/fields/SSICheckbox/index.d.ts

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from 'react';
+export interface IProps {
+    onValueChange?: (isChecked: boolean) => Promise<void>;
+    initialValue?: boolean;
+    isChecked?: boolean;
+    label?: string | ReactNode;
+    disabled?: boolean;
+    backgroundColor?: string;
+    borderColor?: string;
+    selectedColor?: string;
+    labelColor?: string;
+    checkmarkColor?: string;
+}
+declare const SSICheckbox: FC<IProps>;
+export default SSICheckbox;

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 [isChecked, setChecked] = React.useState(initialValue);
+    const value = props.isChecked !== undefined ? props.isChecked : isChecked;
+    const onValueChange = async () => {
+        const { onValueChange } = props;
+        if (disabled) {
+            return;
+        }
+        if (onValueChange) {
+            await onValueChange(!isChecked);
+        }
+        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)] }));
+};
+export default SSICheckbox;

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { SSIBasicHorizontalCenterContainerStyled as Container, SSILoadingScreenActivityCaptionStyled as ActivityCaption, SSILoadingScreenActivityIndicatorContainerStyled as ActivityIndicatorContainer } from '../../../styles/components';
+import { Oval } from "react-loader-spinner";
+export default class SSILoaderView extends React.Component {
+    componentDidMount() {
+        setTimeout(async (state) => {
+            await this.props.callback(state);
+        }, this.props.timeout ?? 0);
+    }
+    render() {
+        return (_jsx(_Fragment, { children: _jsxs(Container, { children: [_jsx(ActivityIndicatorContainer, { children: _jsx(Oval, { ...this.props }) }), _jsx(ActivityCaption, { children: this.props.message })] }) }));
+    }
+}

package/dist/index.d.ts

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

package/dist/index.js

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

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

@@ -0,0 +1,4 @@
+export declare const SSICheckboxContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICheckboxUnselectedContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICheckboxSelectedContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICheckboxLabelContainerStyled: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { SSITextH4LightStyled } from '../../fonts';
+import { SSIFlexDirectionRowViewStyled } from '../../containers';
+export const SSICheckboxContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+`;
+export const SSICheckboxUnselectedContainerStyled = styled.div `
+  width: 18px;
+  aspect-ratio: 1;
+  border-radius: 4px;
+  border-width: 1px;
+`;
+export const SSICheckboxSelectedContainerStyled = styled.div `
+  width: 18px; 
+  aspect-ratio: 1;
+  border-radius: 4px;
+  align-items: center;
+  justify-content: center;
+`;
+export const SSICheckboxLabelContainerStyled = styled(SSITextH4LightStyled) `
+  display: flex;
+  flex-wrap: wrap;
+`;

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

@@ -0,0 +1,2 @@
+export declare const SSILoadingScreenActivityIndicatorContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSILoadingScreenActivityCaptionStyled: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import { SSITextH2SemiBoldLightStyled } from "../../fonts";
+export const SSILoadingScreenActivityIndicatorContainerStyled = styled.div `
+  margin-top: 282px;
+`;
+export const SSILoadingScreenActivityCaptionStyled = styled(SSITextH2SemiBoldLightStyled) `
+  margin-top: 69px;
+`;

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

@@ -10,3 +10,5 @@ export * from './SSITableViewHeader';
 export * from './SSITableView';
 export * from './SSITabViewHeader';
 export * from './SSITabView';
+export * from './SSICheckbox';
+export * from './SSILoaderView';

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

@@ -10,3 +10,5 @@ export * from './SSITableViewHeader';
 export * from './SSITableView';
 export * from './SSITabViewHeader';
 export * from './SSITabView';
+export * from './SSICheckbox';
+export * from './SSILoaderView';

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

@@ -2,3 +2,5 @@ export declare const SSIFlexDirectionRowViewStyled: import("styled-components").
 export declare const SSIFlexDirectionColumnViewStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSIAlphaContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSIRoundedContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSIBasicContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSIBasicHorizontalCenterContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { SSIRoundedEdgesCss } from '@sphereon/ui-components.core';
+import { SSIBackgroundPrimaryDarkColorCss, SSIRoundedEdgesCss } from '@sphereon/ui-components.core';
 export const SSIFlexDirectionRowViewStyled = styled.div `
   display: flex;
   flex-direction: row;
@@ -16,3 +16,10 @@ export const SSIRoundedContainerStyled = styled.div `
   ${SSIRoundedEdgesCss};
   overflow: hidden;
 `;
+export const SSIBasicContainerStyled = styled.div `
+  flex: 1;
+  ${SSIBackgroundPrimaryDarkColorCss};
+`;
+export const SSIBasicHorizontalCenterContainerStyled = styled(SSIBasicContainerStyled) `
+  align-items: center;
+`;

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

@@ -1,5 +1,6 @@
 export declare const SSITextH1Styled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SSITextH2Styled: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SSITextH2SemiBoldLightStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SSITextH3Styled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SSITextH3LightStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SSITextH4Styled: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -7,6 +7,10 @@ export const SSITextH1Styled = styled.span `
 export const SSITextH2Styled = styled.span `
   ${SSITextH2Css}
 `;
+export const SSITextH2SemiBoldLightStyled = styled(SSITextH2Styled) `
+  font-weight: 600;
+  color: ${fontColors.light}
+`;
 export const SSITextH3Styled = styled.span `
   ${SSITextH3Css}
 `;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.1.3-unstable.15+88a373a",
+  "version": "0.1.3-unstable.23+4405bfe",
   "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.15+88a373a",
+    "@sphereon/ui-components.core": "0.1.3-unstable.23+4405bfe",
     "@tanstack/react-table": "^8.9.3",
+    "react-loader-spinner": "^5.4.5",
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
@@ -40,5 +41,5 @@
   "peerDependencies": {
     "react": ">= 16.8.0"
   },
-  "gitHead": "88a373a5f9fb7b863e412030eedc651350c99187"
+  "gitHead": "4405bfecf4002b54ea2aab365c16a509a5ac3766"
 }