@topconsultnpm/sdkui-react-beta 6.15.102 → 6.15.104
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.
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export declare const StyledConnectorButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
|
|
2
|
+
$isActive?: boolean;
|
|
3
|
+
$isCompact?: boolean;
|
|
4
|
+
$isCurrentDocument?: boolean;
|
|
5
|
+
}>> & string;
|
|
6
|
+
export declare const StyledConnectorContentArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
7
|
+
export declare const StyledConnectorFirstPageContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
|
|
8
|
+
ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
9
|
+
}, never>> & string;
|
|
10
|
+
export declare const StyledConnectorCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
11
|
+
export declare const StyledConnectorToppyImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
|
|
12
|
+
export declare const StyledConnectorSuccessMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
13
|
+
export declare const StyledConnectorPillContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
14
|
+
export declare const StyledConnectorPillRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
15
|
+
export declare const StyledConnectorPill: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
|
|
16
|
+
export declare const StyledConnectorWelcomeMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
17
|
+
export declare const StyledConnectorWelcomeSub: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
|
|
18
|
+
export declare const StyledConnectorCloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
import { TMColors } from "../../utils/theme";
|
|
3
|
+
export const StyledConnectorButton = styled.button `
|
|
4
|
+
display: flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
justify-content: center;
|
|
7
|
+
gap: ${props => props.$isCompact ? '0' : '6px'};
|
|
8
|
+
padding: ${props => props.$isCompact ? '8px' : '8px 16px'};
|
|
9
|
+
min-height: 36px;
|
|
10
|
+
width: ${props => props.$isCompact ? '36px' : 'auto'};
|
|
11
|
+
background-color: ${props => props.$isActive
|
|
12
|
+
? props.$isCurrentDocument
|
|
13
|
+
? TMColors.success
|
|
14
|
+
: '#0078d4'
|
|
15
|
+
: '#ffffff'};
|
|
16
|
+
color: ${props => props.$isActive ? '#ffffff' : '#323130'};
|
|
17
|
+
border: 1px solid ${props => props.$isActive
|
|
18
|
+
? props.$isCurrentDocument
|
|
19
|
+
? TMColors.success
|
|
20
|
+
: '#0078d4'
|
|
21
|
+
: '#d1d1d1'};
|
|
22
|
+
border-radius: 6px;
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
font-size: 13px;
|
|
25
|
+
font-weight: 500;
|
|
26
|
+
transition: all 0.2s ease;
|
|
27
|
+
box-shadow: ${props => props.$isActive
|
|
28
|
+
? props.$isCurrentDocument
|
|
29
|
+
? `0 2px 6px ${TMColors.success}40`
|
|
30
|
+
: '0 2px 6px rgba(0, 120, 212, 0.25)'
|
|
31
|
+
: '0 1px 2px rgba(0, 0, 0, 0.08)'};
|
|
32
|
+
white-space: nowrap;
|
|
33
|
+
position: relative;
|
|
34
|
+
|
|
35
|
+
&:hover {
|
|
36
|
+
background-color: ${props => props.$isActive
|
|
37
|
+
? props.$isCurrentDocument
|
|
38
|
+
? TMColors.success
|
|
39
|
+
: '#106ebe'
|
|
40
|
+
: '#f3f2f1'};
|
|
41
|
+
transform: translateY(-1px);
|
|
42
|
+
box-shadow: ${props => props.$isActive
|
|
43
|
+
? props.$isCurrentDocument
|
|
44
|
+
? `0 3px 8px ${TMColors.success}50`
|
|
45
|
+
: '0 3px 8px rgba(0, 120, 212, 0.3)'
|
|
46
|
+
: '0 2px 4px rgba(0, 0, 0, 0.12)'};
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&:focus {
|
|
50
|
+
outline: 2px solid ${props => props.$isCurrentDocument && props.$isActive ? TMColors.success : '#0078d4'};
|
|
51
|
+
outline-offset: 2px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&:active {
|
|
55
|
+
transform: translateY(0);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
&:disabled {
|
|
59
|
+
background-color: #f3f2f1;
|
|
60
|
+
color: #b3b3b3;
|
|
61
|
+
border-color: #e0e0e0;
|
|
62
|
+
cursor: not-allowed;
|
|
63
|
+
box-shadow: none;
|
|
64
|
+
opacity: 0.7;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
svg {
|
|
68
|
+
width: 16px;
|
|
69
|
+
height: 16px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
span {
|
|
73
|
+
display: ${props => props.$isCompact ? 'none' : 'inline'};
|
|
74
|
+
}
|
|
75
|
+
`;
|
|
76
|
+
export const StyledConnectorContentArea = styled.div `
|
|
77
|
+
position: absolute;
|
|
78
|
+
top: 60px;
|
|
79
|
+
left: 10px;
|
|
80
|
+
width: calc(100% - 20px);
|
|
81
|
+
height: calc(100% - 70px);
|
|
82
|
+
background-color: #efefef;
|
|
83
|
+
border-radius: 10px;
|
|
84
|
+
overflow: hidden;
|
|
85
|
+
`;
|
|
86
|
+
export const StyledConnectorFirstPageContent = styled(StyledConnectorContentArea) `
|
|
87
|
+
display: flex;
|
|
88
|
+
flex-direction: column;
|
|
89
|
+
align-items: center;
|
|
90
|
+
justify-content: center;
|
|
91
|
+
background: linear-gradient(135deg, #f8fafc 0%, #e3e9f3 100%);
|
|
92
|
+
`;
|
|
93
|
+
export const StyledConnectorCard = styled.div `
|
|
94
|
+
background: #fff;
|
|
95
|
+
border-radius: 18px;
|
|
96
|
+
box-shadow: 0 6px 32px 0 rgba(0,0,0,0.10);
|
|
97
|
+
padding: 40px 36px 32px 36px;
|
|
98
|
+
min-width: 420px;
|
|
99
|
+
max-width: 500px;
|
|
100
|
+
display: flex;
|
|
101
|
+
flex-direction: column;
|
|
102
|
+
align-items: center;
|
|
103
|
+
border: 1.5px solid #e3e9f3;
|
|
104
|
+
`;
|
|
105
|
+
export const StyledConnectorToppyImage = styled.img `
|
|
106
|
+
width: 80px;
|
|
107
|
+
filter: drop-shadow(0 2px 8px #e3e9f3);
|
|
108
|
+
`;
|
|
109
|
+
export const StyledConnectorSuccessMessage = styled.div `
|
|
110
|
+
font-size: 13px;
|
|
111
|
+
color: #666;
|
|
112
|
+
font-weight: 600;
|
|
113
|
+
margin-bottom: 10px;
|
|
114
|
+
text-align: center;
|
|
115
|
+
letter-spacing: 0.1px;
|
|
116
|
+
`;
|
|
117
|
+
export const StyledConnectorPillContainer = styled.div `
|
|
118
|
+
width: 100%;
|
|
119
|
+
margin-bottom: 10px;
|
|
120
|
+
`;
|
|
121
|
+
export const StyledConnectorPillRow = styled.div `
|
|
122
|
+
display: flex;
|
|
123
|
+
width: 100%;
|
|
124
|
+
gap: 10px;
|
|
125
|
+
margin-bottom: 6px;
|
|
126
|
+
&:last-child {
|
|
127
|
+
margin-bottom: 0;
|
|
128
|
+
}
|
|
129
|
+
`;
|
|
130
|
+
export const StyledConnectorPill = styled.span `
|
|
131
|
+
background: #e6f0fa;
|
|
132
|
+
color: #0078d4;
|
|
133
|
+
border-radius: 16px;
|
|
134
|
+
padding: 8px 20px;
|
|
135
|
+
font-weight: 600;
|
|
136
|
+
font-size: 13px;
|
|
137
|
+
letter-spacing: 0.1px;
|
|
138
|
+
box-shadow: 0 1px 4px 0 rgba(0,120,212,0.07);
|
|
139
|
+
border: 1px solid #cbe2fa;
|
|
140
|
+
display: inline-block;
|
|
141
|
+
text-align: center;
|
|
142
|
+
line-height: 1.3;
|
|
143
|
+
`;
|
|
144
|
+
export const StyledConnectorWelcomeMessage = styled.div `
|
|
145
|
+
font-size: 19px;
|
|
146
|
+
color: #666;
|
|
147
|
+
text-align: center;
|
|
148
|
+
line-height: 1.5;
|
|
149
|
+
`;
|
|
150
|
+
export const StyledConnectorWelcomeSub = styled.span `
|
|
151
|
+
font-size: 16px;
|
|
152
|
+
color: #888;
|
|
153
|
+
`;
|
|
154
|
+
export const StyledConnectorCloseButton = styled.button `
|
|
155
|
+
position: absolute;
|
|
156
|
+
bottom: 16px;
|
|
157
|
+
right: 16px;
|
|
158
|
+
background: #dc3545;
|
|
159
|
+
color: white;
|
|
160
|
+
border: none;
|
|
161
|
+
border-radius: 8px;
|
|
162
|
+
padding: 8px 16px;
|
|
163
|
+
font-size: 13px;
|
|
164
|
+
font-weight: 500;
|
|
165
|
+
cursor: pointer;
|
|
166
|
+
transition: all 0.2s ease;
|
|
167
|
+
box-shadow: 0 2px 4px rgba(220, 53, 69, 0.25);
|
|
168
|
+
|
|
169
|
+
&:hover {
|
|
170
|
+
background: #c82333;
|
|
171
|
+
transform: translateY(-1px);
|
|
172
|
+
box-shadow: 0 3px 6px rgba(220, 53, 69, 0.35);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
&:active {
|
|
176
|
+
transform: translateY(0);
|
|
177
|
+
}
|
|
178
|
+
`;
|
|
@@ -156,6 +156,10 @@ const TMLoginForm = (props) => {
|
|
|
156
156
|
return (props.endpoints.length === 1 && dcmtArchives.length === 1);
|
|
157
157
|
}, [dcmtArchives, props.endpoints]);
|
|
158
158
|
useEffect(() => {
|
|
159
|
+
if (props.isConnector) {
|
|
160
|
+
setShowDefaultLogo(true);
|
|
161
|
+
return;
|
|
162
|
+
}
|
|
159
163
|
fetch('logo-custom.svg', { method: 'HEAD' })
|
|
160
164
|
.then(res => {
|
|
161
165
|
const isSvg = res.headers.get('Content-Type')?.includes('image/svg');
|
|
@@ -167,7 +171,7 @@ const TMLoginForm = (props) => {
|
|
|
167
171
|
}
|
|
168
172
|
})
|
|
169
173
|
.catch(() => setShowDefaultLogo(true));
|
|
170
|
-
}, []);
|
|
174
|
+
}, [props.isConnector]);
|
|
171
175
|
useEffect(() => {
|
|
172
176
|
const checkRefsReady = () => inputRefs.every(ref => ref?.current);
|
|
173
177
|
if (!checkRefsReady()) {
|
|
@@ -48,6 +48,7 @@ export * from './choosers/TMInvoiceRetrieveFormats';
|
|
|
48
48
|
export * from './choosers/TMMetadataChooser';
|
|
49
49
|
export * from './choosers/TMOrderRetrieveFormats';
|
|
50
50
|
export * from './choosers/TMUserChooser';
|
|
51
|
+
export * from './connectors/connectors.styles';
|
|
51
52
|
export { default as TMValidationItemsList } from './grids/TMValidationItemsList';
|
|
52
53
|
export { default as TMBlogs } from './grids/TMBlogs';
|
|
53
54
|
export { default as TMBlogCommentForm } from './features/blog/TMBlogCommentForm';
|
package/lib/components/index.js
CHANGED
|
@@ -51,6 +51,8 @@ export * from './choosers/TMInvoiceRetrieveFormats';
|
|
|
51
51
|
export * from './choosers/TMMetadataChooser';
|
|
52
52
|
export * from './choosers/TMOrderRetrieveFormats';
|
|
53
53
|
export * from './choosers/TMUserChooser';
|
|
54
|
+
// connectors
|
|
55
|
+
export * from './connectors/connectors.styles';
|
|
54
56
|
//grids
|
|
55
57
|
export { default as TMValidationItemsList } from './grids/TMValidationItemsList';
|
|
56
58
|
// blogs
|