@topconsultnpm/sdkui-react-beta 6.12.127 → 6.12.129
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.
|
@@ -11,6 +11,12 @@ export declare const StyledPanelPage: import("styled-components/dist/types").ISt
|
|
|
11
11
|
$isOpen?: boolean;
|
|
12
12
|
$padding?: string;
|
|
13
13
|
}>> & string;
|
|
14
|
+
export declare const StyledOffCanvasPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
15
|
+
$isOpen: boolean;
|
|
16
|
+
}>> & string;
|
|
17
|
+
export declare const StyledOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
18
|
+
$isOpen: boolean;
|
|
19
|
+
}>> & string;
|
|
14
20
|
export declare const StyledModalContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
15
21
|
export declare const StyledResultTypeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
16
22
|
$resultType: ResultTypes;
|
|
@@ -49,6 +49,51 @@ export const StyledPanelPage = styled.div `
|
|
|
49
49
|
overflow: hidden;
|
|
50
50
|
padding: ${props => props.$padding ?? '10px'};
|
|
51
51
|
`;
|
|
52
|
+
export const StyledOffCanvasPanel = styled.div `
|
|
53
|
+
position: fixed;
|
|
54
|
+
background-color: ${TMColors.default_background};
|
|
55
|
+
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
|
|
56
|
+
transition: transform 0.3s ease;
|
|
57
|
+
z-index: 1502;
|
|
58
|
+
display: flex;
|
|
59
|
+
flex-direction: column;
|
|
60
|
+
border-top-left-radius: 10px;
|
|
61
|
+
border-bottom-left-radius: 10px;
|
|
62
|
+
|
|
63
|
+
/* Default: Open from the right */
|
|
64
|
+
top: 0;
|
|
65
|
+
right: 0;
|
|
66
|
+
width: 550px;
|
|
67
|
+
max-width: 100%;
|
|
68
|
+
height: 100%;
|
|
69
|
+
transform: ${({ $isOpen }) => ($isOpen ? 'translateX(0)' : 'translateX(100%)')};
|
|
70
|
+
|
|
71
|
+
/* Mobile: Open from the bottom */
|
|
72
|
+
@media (max-width: 768px) {
|
|
73
|
+
top: auto;
|
|
74
|
+
bottom: 0;
|
|
75
|
+
right: 0;
|
|
76
|
+
width: 100%;
|
|
77
|
+
height: 94%;
|
|
78
|
+
transform: ${({ $isOpen }) => ($isOpen ? 'translateY(0)' : 'translateY(100%)')};
|
|
79
|
+
border-top-left-radius: 10px;
|
|
80
|
+
border-top-right-radius: 10px;
|
|
81
|
+
border-bottom-left-radius: 0;
|
|
82
|
+
border-bottom-right-radius: 0;
|
|
83
|
+
}
|
|
84
|
+
`;
|
|
85
|
+
export const StyledOverlay = styled.div `
|
|
86
|
+
position: fixed;
|
|
87
|
+
top: 0;
|
|
88
|
+
left: 0;
|
|
89
|
+
width: 100%;
|
|
90
|
+
height: 100%;
|
|
91
|
+
background-color: rgba(0, 0, 0, 0.4);
|
|
92
|
+
opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
|
|
93
|
+
visibility: ${({ $isOpen }) => ($isOpen ? 'visible' : 'hidden')};
|
|
94
|
+
transition: opacity 0.3s ease, visibility 0.3s ease;
|
|
95
|
+
z-index: 1501;
|
|
96
|
+
`;
|
|
52
97
|
export const StyledModalContainer = styled.div `
|
|
53
98
|
position: absolute;
|
|
54
99
|
width: 100%;
|
|
@@ -347,11 +347,11 @@ export const StyledHeaderIcon = styled.div ` color: ${props => props.$color}; c
|
|
|
347
347
|
export const StyledPanelStatusContainer = styled.div ` width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; `;
|
|
348
348
|
const StyledPreviewNotAvailable = styled.div ` display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; `;
|
|
349
349
|
const ImageContainer = styled.div ` width: 100%; height: 100%; position: absolute; top:50px; overflow: hidden; background: #f5f5f5; touch-action: none; user-select: none; cursor: ${({ $cursor }) => $cursor ?? 'default'}; `;
|
|
350
|
-
const ResetButton = styled.button ` display: flex; align-items: center; justify-content: center; background: #
|
|
351
|
-
const TopToolbar = styled.div ` position: absolute; top: 0; width: 100%; height: 50px; background-color: #
|
|
350
|
+
const ResetButton = styled.button ` display: flex; align-items: center; justify-content: center; background: #707070; color: #f1f1f1; border: none; padding: 6px; border-radius: 4px; cursor: pointer; font-size: 14px; &:disabled { background: #ccc; cursor: not-allowed; } `;
|
|
351
|
+
const TopToolbar = styled.div ` position: absolute; top: 0; width: 100%; height: 50px; background-color: #e4e4e4; display: flex; justify-content: center; align-items: center; z-index: 10; `;
|
|
352
352
|
const ToolbarCenter = styled.div ` display: flex; align-items: center; gap: 12px;`;
|
|
353
|
-
const ToolbarIconButton = styled.button ` background: none; border: none; color:
|
|
354
|
-
const ZoomDisplay = styled.div ` color:
|
|
353
|
+
const ToolbarIconButton = styled.button ` background: none; border: none; color: #313131; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; height: 32px; width: 32px; padding: 0; border-radius: 50px; &:hover{ background-color: #c4c4c4; } &:disabled { color: #c2c2c2; cursor: not-allowed; } `;
|
|
354
|
+
const ZoomDisplay = styled.div ` color: #535353; font-size: 14px; min-width: 40px; text-align: center; background-color: #f8f8f8; border: 1px solid lightgray; padding: 0 3px; border-radius: 1px; `;
|
|
355
355
|
const Divider = styled.div `width:1px; height: 20px; background-color: darkgray; `;
|
|
356
356
|
const StyledImage = styled.img.attrs(props => ({
|
|
357
357
|
style: {
|
|
@@ -561,6 +561,7 @@ const TMBlogs = (props) => {
|
|
|
561
561
|
};
|
|
562
562
|
// Function to handle changes in the search text
|
|
563
563
|
const handleSearchChange = (value) => {
|
|
564
|
+
handleFocusedBlog(undefined);
|
|
564
565
|
setSearchText(value); // Update the search text state with the new value
|
|
565
566
|
};
|
|
566
567
|
// Function to handle changes in the filter (number of posts to show)
|