@topconsultnpm/sdkui-react-beta 6.17.0 → 6.17.1

package/lib/components/layout/panelManager/TMPanelManagerContainer.js

@@ -8,20 +8,20 @@ import { IconInfo, SDKUI_Localizator } from '../../../helper';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { Gutters } from '../../../utils/theme';
 // Styled Component per il contenitore principale di PanelContainer
-const StyledPanelContainerWrapper = styled.div `
-  display: ${props => (props.$hasVisiblePanels ? 'flex' : 'none')};
-  flex-direction: ${props => (props.$direction === 'vertical' ? 'column' : 'row')};
-  height: 100%;
-  width: 100%;
-  // overflow: hidden;
+const StyledPanelContainerWrapper = styled.div `
+  display: ${props => (props.$hasVisiblePanels ? 'flex' : 'none')};
+  flex-direction: ${props => (props.$direction === 'vertical' ? 'column' : 'row')};
+  height: 100%;
+  width: 100%;
+  // overflow: hidden;
 `;
 // Styled Component per il gutter (separatore)
-const StyledResizerGutter = styled.div `
-  cursor: ${props => (props.$direction === 'horizontal' ? 'col-resize' : 'row-resize')};
-  ${props => (props.$direction === 'horizontal' ? `width: ${Gutters.getGutters()}px;` : `height: ${Gutters.getGutters()}px;`)}
-  flex-shrink: 0;
-  background-color: "transparent";
-  z-index: 10;
+const StyledResizerGutter = styled.div `
+  cursor: ${props => (props.$direction === 'horizontal' ? 'col-resize' : 'row-resize')};
+  ${props => (props.$direction === 'horizontal' ? `width: ${Gutters.getGutters()}px;` : `height: ${Gutters.getGutters()}px;`)}
+  flex-shrink: 0;
+  background-color: "transparent";
+  z-index: 10;
 `;
 const TMPanelManagerContainer = (props) => {
     const { panels, showToolbar, direction, parentId } = props;

package/lib/components/layout/panelManager/TMPanelManagerToolbar.js

@@ -5,41 +5,41 @@ import { useTMPanelManagerContext } from './TMPanelManagerContext';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { flattenPanels } from './utils';
 import TMTooltip from '../../base/TMTooltip';
-export const StyledToolbarButton = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 32px;
-  width: 32px;
-  border: none;
-  border-radius: 8px;
-  font-size: 18px;
-  padding: 0px;
-  color: #fff;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-  cursor: ${({ $isDisabled }) => ($isDisabled ? 'not-allowed' : 'pointer')};
-  opacity: ${({ $isDisabled }) => ($isDisabled ? 0.6 : 1)};
-  background: ${({ $isActive }) => $isActive ? 'rgba(255,255,255,0.35)' : 'transparent'};
-  position: relative;
-  &:hover {
-    background: ${({ $isDisabled }) => !$isDisabled ? 'rgba(255,255,255,0.35)' : undefined};
-  }
+export const StyledToolbarButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  width: 32px;
+  border: none;
+  border-radius: 8px;
+  font-size: 18px;
+  padding: 0px;
+  color: #fff;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  cursor: ${({ $isDisabled }) => ($isDisabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ $isDisabled }) => ($isDisabled ? 0.6 : 1)};
+  background: ${({ $isActive }) => $isActive ? 'rgba(255,255,255,0.35)' : 'transparent'};
+  position: relative;
+  &:hover {
+    background: ${({ $isDisabled }) => !$isDisabled ? 'rgba(255,255,255,0.35)' : undefined};
+  }
 `;
-const Badge = styled.span `
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  background: ${(props) => props.$background || "#ff5252"};
-  color: white;
-  font-size: 10px;
-  min-width: 14px;
-  height: 14px;
-  padding: 0 4px;
-  border-radius: 999px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
+const Badge = styled.span `
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  background: ${(props) => props.$background || "#ff5252"};
+  color: white;
+  font-size: 10px;
+  min-width: 14px;
+  height: 14px;
+  padding: 0 4px;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
 `;
 const TMPanelManagerToolbar = (props) => {
     const { panels } = props;

package/lib/components/query/TMQueryEditor.js

@@ -976,23 +976,23 @@ const TMQdWhereItemValue = ({ whereItem, index, queryParamsDynDataList, onlyEdit
                                 ? _jsx(_Fragment, { children: whereItem.value1 ?? mdValueEmptyDescr })
                                 : _jsxs(_Fragment, { children: [displayMetadataValue(md, whereItem.value1, mdValueEmptyDescr), numberOfOperands == 2 && (whereItem.value2 && whereItem.value2 != '' ? ` - ${displayMetadataValue(md, whereItem.value2, mdValueEmptyDescr)}` : ' - ?')] }) })] })] }));
 };
-const StyledContent = styled.div `
-    cursor: pointer;
-    border-radius: ${props => props.$borderRadius};
-    color: ${props => props.$color};
-    /* background-color: ${props => props.$backgroundColor}; */
-    background-color: transparent;
-    opacity: ${props => props.$disabled ? 0.4 : 1};
-    pointer-events: ${props => props.$disabled ? 'none' : ''};
-    user-select: none;
-    display: flex;
-    align-items: center;
-
-    &:focus {
-        outline: none;
-        border-bottom: ${props => props.$disabled ? '' : '2px solid'};
-        border-bottom-color: ${TMColors.primary};
-    }
+const StyledContent = styled.div `
+    cursor: pointer;
+    border-radius: ${props => props.$borderRadius};
+    color: ${props => props.$color};
+    /* background-color: ${props => props.$backgroundColor}; */
+    background-color: transparent;
+    opacity: ${props => props.$disabled ? 0.4 : 1};
+    pointer-events: ${props => props.$disabled ? 'none' : ''};
+    user-select: none;
+    display: flex;
+    align-items: center;
+
+    &:focus {
+        outline: none;
+        border-bottom: ${props => props.$disabled ? '' : '2px solid'};
+        border-bottom-color: ${TMColors.primary};
+    }
 `;
 const TMQdDropDownMenu = ({ content, items, disabled = false, color = TMColors.text_normal, backgroundColor = TMColors.default_background, borderRadius }) => {
     const [id, setID] = useState('');

package/lib/components/query/TMQuerySummary.js

@@ -10,19 +10,19 @@ import TMVilViewer from '../base/TMVilViewer';
 import { FormModes } from '../../ts';
 import TMModal from '../base/TMModal';
 // #region Style
-const StyledWrapper = styled.div `
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: flex-start;
-    width: 100%;
-    font-size: ${FontSize.defaultFontSize};
+const StyledWrapper = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+    width: 100%;
+    font-size: ${FontSize.defaultFontSize};
 `;
-const StyledQueryToolbar = styled.div `
-    display: flex;
-    flex-direction: column;
-    width: max-content;
-    gap: 8px;
+const StyledQueryToolbar = styled.div `
+    display: flex;
+    flex-direction: column;
+    width: max-content;
+    gap: 8px;
 `;
 const TMQuerySummary = ({ children, qd, validateSelect = true, validateOrderBy = true, raiseWarningForOnlyMetadataDcmtTypes = false, validationItems = [], onValueChanged, onEditClick, onClose }) => {
     const [showEditor, setShowEditor] = useState(false);

package/lib/components/sidebar/TMCommandsPanel.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
-export const StyledCommandsPanel = styled.div `
-    display: flex;
-    flex-direction: ${({ $isMobile }) => ($isMobile ? 'row' : 'column')};
-    align-items: center;
-    width: ${({ $isMobile }) => ($isMobile ? '100%' : '50px')};
-    height: ${({ $isMobile }) => ($isMobile ? '50px' : 'max-content')};
-    background: transparent linear-gradient(90deg, #CCE0F4 0%, #7EC1E7 14%, #39A6DB 28%, #1E9CD7 35%, #0075BE 78%, #005B97 99%) 0% 0% no-repeat padding-box;
-    border-radius: ${({ $isMobile }) => ($isMobile ? '10px' : '10px 0px 0px 10px')};
-    padding: 10px;
-    gap: 10px;
+export const StyledCommandsPanel = styled.div `
+    display: flex;
+    flex-direction: ${({ $isMobile }) => ($isMobile ? 'row' : 'column')};
+    align-items: center;
+    width: ${({ $isMobile }) => ($isMobile ? '100%' : '50px')};
+    height: ${({ $isMobile }) => ($isMobile ? '50px' : 'max-content')};
+    background: transparent linear-gradient(90deg, #CCE0F4 0%, #7EC1E7 14%, #39A6DB 28%, #1E9CD7 35%, #0075BE 78%, #005B97 99%) 0% 0% no-repeat padding-box;
+    border-radius: ${({ $isMobile }) => ($isMobile ? '10px' : '10px 0px 0px 10px')};
+    padding: 10px;
+    gap: 10px;
 `;
 const TMCommandsPanel = ({ isMobile, items }) => (_jsx(StyledCommandsPanel, { "$isMobile": isMobile, children: items.map((iconProps, idx) => (_jsx("span", { style: {
             background: iconProps.selected ? 'white' : 'transparent',