@topconsultnpm/sdkui-react 6.19.0-dev2.1 → 6.19.0-test.1

package/lib/components/sidebar/TMHeader.js

@@ -278,339 +278,339 @@ export function IconHeaderNotifications(props) {
 export function IconHeaderSettings(props) {
     return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48", width: "1em", height: "1em", ...props, children: _jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5px", d: "M39.23 26a17 17 0 0 0 .14-2a17 17 0 0 0-.14-2l4.33-3.39a1 1 0 0 0 .25-1.31l-4.1-7.11a1 1 0 0 0-1.25-.44l-5.11 2.06a15.7 15.7 0 0 0-3.46-2l-.77-5.43a1 1 0 0 0-1-.86H19.9a1 1 0 0 0-1 .86l-.77 5.43a15.4 15.4 0 0 0-3.46 2L9.54 9.75a1 1 0 0 0-1.25.44l-4.1 7.11a1 1 0 0 0 .25 1.31L8.76 22a17 17 0 0 0-.14 2a17 17 0 0 0 .14 2l-4.32 3.39a1 1 0 0 0-.25 1.31l4.1 7.11a1 1 0 0 0 1.25.44l5.11-2.06a15.7 15.7 0 0 0 3.46 2l.77 5.43a1 1 0 0 0 1 .86h8.2a1 1 0 0 0 1-.86l.77-5.43a15.4 15.4 0 0 0 3.46-2l5.11 2.06a1 1 0 0 0 1.25-.44l4.1-7.11a1 1 0 0 0-.25-1.31ZM24 31.18A7.18 7.18 0 1 1 31.17 24A7.17 7.17 0 0 1 24 31.18" }) }));
 }
-const iconPulse = keyframes `
-    0% { transform: scale(1); box-shadow: 0 0 0 0 ${TMColors.primary}20; }
-    50% { transform: scale(1.05); box-shadow: 0 0 0 8px ${TMColors.primary}10; }
-    100% { transform: scale(1); box-shadow: 0 0 0 0 ${TMColors.primary}00; }
+const iconPulse = keyframes `
+    0% { transform: scale(1); box-shadow: 0 0 0 0 ${TMColors.primary}20; }
+    50% { transform: scale(1.05); box-shadow: 0 0 0 8px ${TMColors.primary}10; }
+    100% { transform: scale(1); box-shadow: 0 0 0 0 ${TMColors.primary}00; }
 `;
-const iconBounce = keyframes `
-    0%, 20%, 60%, 100% { transform: translateY(0); }
-    40% { transform: translateY(-3px); }
-    80% { transform: translateY(-1px); }
+const iconBounce = keyframes `
+    0%, 20%, 60%, 100% { transform: translateY(0); }
+    40% { transform: translateY(-3px); }
+    80% { transform: translateY(-1px); }
 `;
-const slideInFromLeft = keyframes `
-    from { opacity: 0; transform: translateX(-20px); }
-    to { opacity: 1; transform: translateX(0); }
+const slideInFromLeft = keyframes `
+    from { opacity: 0; transform: translateX(-20px); }
+    to { opacity: 1; transform: translateX(0); }
 `;
-const fadeIn = keyframes `
-    from { opacity: 0; }
-    to { opacity: 1; }
+const fadeIn = keyframes `
+    from { opacity: 0; }
+    to { opacity: 1; }
 `;
-const StyledLogo = styled.img `
-    image-rendering: auto;
-    shape-rendering: auto;
+const StyledLogo = styled.img `
+    image-rendering: auto;
+    shape-rendering: auto;
 `;
-const StyledHeaderContainer = styled.div ` 
-    position:fixed; 
-    width: 100%; 
-    height: 60px; 
-    background-color:transparent; 
-    opacity: 1; 
-    display: flex; 
-    flex-direction: row; 
-    width: 100%; 
-    justify-content: space-between; 
-    align-items: center; 
-    padding: 0px 10px;
+const StyledHeaderContainer = styled.div ` 
+    position:fixed; 
+    width: 100%; 
+    height: 60px; 
+    background-color:transparent; 
+    opacity: 1; 
+    display: flex; 
+    flex-direction: row; 
+    width: 100%; 
+    justify-content: space-between; 
+    align-items: center; 
+    padding: 0px 10px;
 `;
-const StyledHeaderIcon = styled.div `
-    position: relative;
-    width: 40px;
-    height: 40px;
-    margin-left: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: ${TMColors.primary};
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    cursor: pointer;
-    border-radius: 50%;
-
-    &:before {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 35px;
-        height: 35px;
-        transform: translate(-50%, -50%);
-        border-radius: 50%;
-        background: ${TMColors.primary}20;
-        opacity: 0;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        z-index: -1;
-    }
-
-    &:hover {
-        color: ${TMColors.primary};
-        transform: translateY(-2px);
-        &:before {
-            opacity: 1;
-        }
-        svg {
-            animation: ${iconBounce} 0.6s ease-in-out;
-        }
-    }
-
-    &:active {
-        transform: translateY(0);
-        color: ${TMColors.primary};
-        &:before {
-            opacity: 1;
-            background: ${TMColors.primary}40;
-        }
-    }
-
-    ${props => props.$isSelected && `
-        &:before {
-            opacity: 1;
-            background: ${TMColors.primary}25;
-        }
-    `}
-
-    &.has-notification {
-        animation: ${iconPulse} 2s infinite;
-    }
-
-    &:focus {
-        outline: none;
-    }
-
-    svg {
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
-    }
+const StyledHeaderIcon = styled.div `
+    position: relative;
+    width: 40px;
+    height: 40px;
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${TMColors.primary};
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+    border-radius: 50%;
+
+    &:before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 35px;
+        height: 35px;
+        transform: translate(-50%, -50%);
+        border-radius: 50%;
+        background: ${TMColors.primary}20;
+        opacity: 0;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        z-index: -1;
+    }
+
+    &:hover {
+        color: ${TMColors.primary};
+        transform: translateY(-2px);
+        &:before {
+            opacity: 1;
+        }
+        svg {
+            animation: ${iconBounce} 0.6s ease-in-out;
+        }
+    }
+
+    &:active {
+        transform: translateY(0);
+        color: ${TMColors.primary};
+        &:before {
+            opacity: 1;
+            background: ${TMColors.primary}40;
+        }
+    }
+
+    ${props => props.$isSelected && `
+        &:before {
+            opacity: 1;
+            background: ${TMColors.primary}25;
+        }
+    `}
+
+    &.has-notification {
+        animation: ${iconPulse} 2s infinite;
+    }
+
+    &:focus {
+        outline: none;
+    }
+
+    svg {
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
+    }
 `;
 const StyledSearchBarContainer = styled.div ` position: relative; height:30px; width: 100%; max-width: ${props => props.$isMobile ? '65%' : '650px'}; margin-left: ${props => props.$isMobile ? '10px' : '50px'}; `;
 const StyledSearchBar = styled.input ` background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #dbdbdb; border-radius: 5px; padding: 5px 30px; width:100%; transition: 100ms linear; &:focus{ outline: none; border-bottom: 2px solid ${TMColors.primary}; } `;
 const StyledHeaderAppText = styled.h2 ` text-align: left; letter-spacing: 0px; color: ${TMColors.primary}; opacity: 1; `;
-const AppMenuButton = styled.div `
-  width: 90px;
-  height: 90px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: white;
-  color: #2459A4;
-  font-size: 0.8rem;
-  text-transform: uppercase;
-  border-radius: 10px;
-  margin: 8px 0;
-  cursor: pointer;
-  box-shadow: 0 2px 8px #2459a41a;
-  user-select: none;
-  gap: 5px;
-  transition:
-    transform 0.18s cubic-bezier(.4,0,.2,1),
-    box-shadow 0.18s cubic-bezier(.4,0,.2,1);
-  &:hover {
-    transform: translateY(-2px) scale(1.06);
-    box-shadow: 0 6px 18px #2459a433;
-  }
+const AppMenuButton = styled.div `
+  width: 90px;
+  height: 90px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  color: #2459A4;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  border-radius: 10px;
+  margin: 8px 0;
+  cursor: pointer;
+  box-shadow: 0 2px 8px #2459a41a;
+  user-select: none;
+  gap: 5px;
+  transition:
+    transform 0.18s cubic-bezier(.4,0,.2,1),
+    box-shadow 0.18s cubic-bezier(.4,0,.2,1);
+  &:hover {
+    transform: translateY(-2px) scale(1.06);
+    box-shadow: 0 6px 18px #2459a433;
+  }
 `;
-const UserAvatarContainer = styled.div `
-    position: relative;
-    width: 40px;
-    height: 40px;
-    margin-left: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    border-radius: 50%;
-    transition: all 0.2s ease;
-    padding: 2px;
-
-    ${props => props.$isSelected && `
-        background: ${TMColors.primary}20;
-        transform: scale(1.05);
-    `}
-
-    &:hover {
-        background: ${TMColors.primary}15;
-        transform: scale(1.05);
-    }
+const UserAvatarContainer = styled.div `
+    position: relative;
+    width: 40px;
+    height: 40px;
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 50%;
+    transition: all 0.2s ease;
+    padding: 2px;
+
+    ${props => props.$isSelected && `
+        background: ${TMColors.primary}20;
+        transform: scale(1.05);
+    `}
+
+    &:hover {
+        background: ${TMColors.primary}15;
+        transform: scale(1.05);
+    }
 `;
-const UserAvatar = styled.div `
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    background: ${props => props.$bgColor};
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 14px;
-    font-weight: 600;
-    letter-spacing: 0.5px;
-    user-select: none;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+const UserAvatar = styled.div `
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: ${props => props.$bgColor};
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    user-select: none;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 `;
-const UserAvatarLarge = styled(UserAvatar) `
-    width: 48px;
-    height: 48px;
-    font-size: 18px;
-    flex-shrink: 0;
+const UserAvatarLarge = styled(UserAvatar) `
+    width: 48px;
+    height: 48px;
+    font-size: 18px;
+    flex-shrink: 0;
 `;
-const MenuContainer = styled.div `
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    background: white;
-    border-radius: 8px;
-    overflow: hidden;
-    height: 100%;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+const MenuContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    background: white;
+    border-radius: 8px;
+    overflow: hidden;
+    height: 100%;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
 `;
-const UserProfileSection = styled.div `
-    display: flex;
-    padding: 20px;  
-    background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
-    border-bottom: 1px solid #e1e5e9;
-    gap: 12px;
-    opacity: 0;
-    animation: ${fadeIn} 0.3s ease-out forwards;
-    flex: 1;  
+const UserProfileSection = styled.div `
+    display: flex;
+    padding: 20px;  
+    background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
+    border-bottom: 1px solid #e1e5e9;
+    gap: 12px;
+    opacity: 0;
+    animation: ${fadeIn} 0.3s ease-out forwards;
+    flex: 1;  
 `;
-const UserProfileSectionWithUserName = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 12px;  
+const UserProfileSectionWithUserName = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 12px;  
 `;
-const UserInfo = styled.div `
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    min-width: 0;
-    flex: 1;
+const UserInfo = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    flex: 1;
 `;
-const UserName = styled.div `
-    font-size: 16px;
-    font-weight: 600;
-    color: #242424;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    line-height: 1.2;
+const UserName = styled.div `
+    font-size: 16px;
+    font-weight: 600;
+    color: #242424;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.2;
 `;
-const SessionInfo = styled.div `
-    font-size: 11px;
-    color: #605e5c;
-    font-weight: 400;
-    line-height: 1;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+const SessionInfo = styled.div `
+    font-size: 11px;
+    color: #605e5c;
+    font-weight: 400;
+    line-height: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 `;
-const CultureFlag = styled.img `
-    width: 14px;
-    height: 14px;
-    object-fit: cover;
-    flex-shrink: 0;
+const CultureFlag = styled.img `
+    width: 14px;
+    height: 14px;
+    object-fit: cover;
+    flex-shrink: 0;
 `;
-const LogoutButton = styled.div `
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    margin-left: auto;
-    flex-shrink: 0;
-
-    &:hover {
-        transform: translateY(-1px);
-        color: ${TMColors.primary};
-    }
-
-    &:active {
-        transform: translateY(0);
-    }
+const LogoutButton = styled.div `
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    margin-left: auto;
+    flex-shrink: 0;
+
+    &:hover {
+        transform: translateY(-1px);
+        color: ${TMColors.primary};
+    }
+
+    &:active {
+        transform: translateY(0);
+    }
 `;
-const LogoutText = styled.span `
-    font-size: 13px;
-    color: #605e5c;
-    font-weight: 500;
-    transition: color 0.2s ease;
-    white-space: nowrap;
-
-    &:hover {
-        color: ${TMColors.primary};
-    }
+const LogoutText = styled.span `
+    font-size: 13px;
+    color: #605e5c;
+    font-weight: 500;
+    transition: color 0.2s ease;
+    white-space: nowrap;
+
+    &:hover {
+        color: ${TMColors.primary};
+    }
 `;
-const AvatarContainer = styled.div `
-    position: relative;
-    flex-shrink: 0;
+const AvatarContainer = styled.div `
+    position: relative;
+    flex-shrink: 0;
 `;
-const CopyIcon = styled.div `
-    position: absolute;
-    bottom: 50px;
-    right: 15px;
-    width: 20px;
-    height: 20px;
-    background: white;
-    border: 1px solid #e1e5e9;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    color: #605e5c;
-    transition: all 0.2s ease;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    z-index: 10;
-    opacity: 0.6;
-
-    &:hover {
-        background: #b7b7b7;
-        color: white;
-        opacity: 1;
-    }
-
-    &:active {
-        transform: scale(0.95);
-    }
-
-    svg {
-        transition: all 0.2s ease;
-    }
+const CopyIcon = styled.div `
+    position: absolute;
+    bottom: 50px;
+    right: 15px;
+    width: 20px;
+    height: 20px;
+    background: white;
+    border: 1px solid #e1e5e9;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: #605e5c;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+    opacity: 0.6;
+
+    &:hover {
+        background: #b7b7b7;
+        color: white;
+        opacity: 1;
+    }
+
+    &:active {
+        transform: scale(0.95);
+    }
+
+    svg {
+        transition: all 0.2s ease;
+    }
 `;
-const BottomActionsContainer = styled.div `
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 12px 20px;
-    background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
-    border-top: 1px solid #e1e5e9;
-    gap: 20px;
+const BottomActionsContainer = styled.div `
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 20px;
+    background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
+    border-top: 1px solid #e1e5e9;
+    gap: 20px;
 `;
-const BottomActionButton = styled.div `
-    cursor: pointer;
-    transition: all 0.2s ease;
-
-    &:hover {
-        transform: translateY(-1px);
-        color: ${TMColors.primary};
-    }
-
-    &:active {
-        transform: translateY(0);
-    }
+const BottomActionButton = styled.div `
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+        transform: translateY(-1px);
+        color: ${TMColors.primary};
+    }
+
+    &:active {
+        transform: translateY(0);
+    }
 `;
-const BottomActionText = styled.span `
-    font-size: 13px;
-    color: #605e5c;
-    font-weight: 500;
-    transition: color 0.2s ease;
-    white-space: nowrap;
-
-    &:hover {
-        color: ${TMColors.primary};
-    }
+const BottomActionText = styled.span `
+    font-size: 13px;
+    color: #605e5c;
+    font-weight: 500;
+    transition: color 0.2s ease;
+    white-space: nowrap;
+
+    &:hover {
+        color: ${TMColors.primary};
+    }
 `;
-const UserNameContainer = styled.div `
-    display: flex;
-    align-items: center;
-    gap: 3px;
-    min-width: 0;
+const UserNameContainer = styled.div `
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    min-width: 0;
 `;