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

package/lib/components/base/TMSpinner.js

@@ -5,135 +5,135 @@ import styled, { keyframes } from 'styled-components';
 import { FontSize } from '../../utils/theme';
 import six from '../../assets/six.png';
 // Keyframe per l'animazione dello spinner
-const spinnerAnimation = keyframes `
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+const spinnerAnimation = keyframes `
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
 `;
 // Container principale dello spinner - occupa tutto lo spazio e centra il contenuto
-const StyledSpinnerContainer = styled.div `
-    width: 100%;
-    height: calc(100% - 50px);
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 2000000001;
-    background-color: ${props => props.$backgroundColor || 'transparent'};
+const StyledSpinnerContainer = styled.div `
+    width: 100%;
+    height: calc(100% - 50px);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 2000000001;
+    background-color: ${props => props.$backgroundColor || 'transparent'};
 `;
 // Wrapper che contiene lo spinner e la descrizione
-const StyledSpinnerWrapper = styled.div `
-    position: relative;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: ${props => props.$width || 'fit-content'};
-    height: fit-content;
-    max-width: 250px;
-    max-height: 200px;
-    padding: 10px;
-    border-radius: 5px;
-    background-color: ${props => props.$flat ? 'transparent' : '#fcfcfc'};
-    box-shadow: ${props => props.$flat ? 'none' : '2px 2px 2px rgba(0, 0, 0, 0.3)'};
+const StyledSpinnerWrapper = styled.div `
+    position: relative;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: ${props => props.$width || 'fit-content'};
+    height: fit-content;
+    max-width: 250px;
+    max-height: 200px;
+    padding: 10px;
+    border-radius: 5px;
+    background-color: ${props => props.$flat ? 'transparent' : '#fcfcfc'};
+    box-shadow: ${props => props.$flat ? 'none' : '2px 2px 2px rgba(0, 0, 0, 0.3)'};
 `;
 // Container dell'animazione dello spinner (8 pallini colorati)
-const StyledSpinnerAnimation = styled.div `
-    display: inline-block;
-    width: 80px;
-    height: 80px;
-    z-index: 2000000;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    & div {
-        animation: ${spinnerAnimation} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-        transform-origin: 40px 40px;
-    }
-
-    & div:after {
-        content: " ";
-        display: block;
-        position: absolute;
-        width: 7px;
-        height: 7px;
-        border-radius: 50%;
-        background: #0c448e;
-        margin: -4px 0 0 -4px;
-    }
-
-    & div:nth-child(1) {
-        animation-delay: -0.036s;
-    }
-    & div:nth-child(1):after {
-        top: 63px;
-        left: 63px;
-        background: #f7a51f;
-    }
-    & div:nth-child(2) {
-        animation-delay: -0.072s;
-    }
-    & div:nth-child(2):after {
-        top: 68px;
-        left: 56px;
-        background: #f7a51f;
-    }
-    & div:nth-child(3) {
-        animation-delay: -0.108s;
-    }
-    & div:nth-child(3):after {
-        top: 71px;
-        left: 48px;
-        background: #d3237b;
-    }
-    & div:nth-child(4) {
-        animation-delay: -0.144s;
-    }
-    & div:nth-child(4):after {
-        top: 72px;
-        left: 40px;
-        background: #d3237b;
-    }
-    & div:nth-child(5) {
-        animation-delay: -0.18s;
-    }
-    & div:nth-child(5):after {
-        top: 71px;
-        left: 32px;
-        background: #d12a1c;
-    }
-    & div:nth-child(6) {
-        animation-delay: -0.216s;
-    }
-    & div:nth-child(6):after {
-        top: 68px;
-        left: 24px;
-        background: #d12a1c;
-    }
-    & div:nth-child(7) {
-        animation-delay: -0.252s;
-    }
-    & div:nth-child(7):after {
-        top: 63px;
-        left: 17px;
-        background: #782b7d;
-    }
-    & div:nth-child(8) {
-        animation-delay: -0.288s;
-    }
-    & div:nth-child(8):after {
-        top: 56px;
-        left: 12px;
-        background: #782b7d;
-    }
+const StyledSpinnerAnimation = styled.div `
+    display: inline-block;
+    width: 80px;
+    height: 80px;
+    z-index: 2000000;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    & div {
+        animation: ${spinnerAnimation} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+        transform-origin: 40px 40px;
+    }
+
+    & div:after {
+        content: " ";
+        display: block;
+        position: absolute;
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+        background: #0c448e;
+        margin: -4px 0 0 -4px;
+    }
+
+    & div:nth-child(1) {
+        animation-delay: -0.036s;
+    }
+    & div:nth-child(1):after {
+        top: 63px;
+        left: 63px;
+        background: #f7a51f;
+    }
+    & div:nth-child(2) {
+        animation-delay: -0.072s;
+    }
+    & div:nth-child(2):after {
+        top: 68px;
+        left: 56px;
+        background: #f7a51f;
+    }
+    & div:nth-child(3) {
+        animation-delay: -0.108s;
+    }
+    & div:nth-child(3):after {
+        top: 71px;
+        left: 48px;
+        background: #d3237b;
+    }
+    & div:nth-child(4) {
+        animation-delay: -0.144s;
+    }
+    & div:nth-child(4):after {
+        top: 72px;
+        left: 40px;
+        background: #d3237b;
+    }
+    & div:nth-child(5) {
+        animation-delay: -0.18s;
+    }
+    & div:nth-child(5):after {
+        top: 71px;
+        left: 32px;
+        background: #d12a1c;
+    }
+    & div:nth-child(6) {
+        animation-delay: -0.216s;
+    }
+    & div:nth-child(6):after {
+        top: 68px;
+        left: 24px;
+        background: #d12a1c;
+    }
+    & div:nth-child(7) {
+        animation-delay: -0.252s;
+    }
+    & div:nth-child(7):after {
+        top: 63px;
+        left: 17px;
+        background: #782b7d;
+    }
+    & div:nth-child(8) {
+        animation-delay: -0.288s;
+    }
+    & div:nth-child(8):after {
+        top: 56px;
+        left: 12px;
+        background: #782b7d;
+    }
 `;
 // Testo della descrizione sotto lo spinner
-const StyledSpinnerDescription = styled.div `
-    font-size: ${props => props.$fontSize || FontSize.defaultFontSize};
-    text-align: center;
+const StyledSpinnerDescription = styled.div `
+    font-size: ${props => props.$fontSize || FontSize.defaultFontSize};
+    text-align: center;
 `;
 const Spinner = ({ backgroundColor = 'transparent', description = '', fontSize = FontSize.defaultFontSize, width = 'fit-content', flat = false }) => {
     return (_jsx(StyledSpinnerContainer, { "$backgroundColor": backgroundColor, children: _jsxs(StyledSpinnerWrapper, { "$width": width, "$flat": flat, children: [_jsxs("div", { style: { position: 'relative', width: '80px', height: '80px' }, children: [_jsx("img", { style: {

package/lib/components/base/TMTab.js

@@ -5,17 +5,17 @@ import TabPanel, { Item } from "devextreme-react/tab-panel";
 import { StyledDivHorizontal } from './Styled';
 import { editorColorManager } from '../editors/TMEditorStyled';
 import { TMCard } from './TMLayout';
-const StyledTabItemResultType = styled.div `
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background-color: ${(props) => props.$backgroundColor};
-    color: #fff;
-    font-size: 0.8rem;
-    padding: 0 5px;
-    border-radius: 999em;
-    line-height: 16px;
-    margin-left: 5px;
+const StyledTabItemResultType = styled.div `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${(props) => props.$backgroundColor};
+    color: #fff;
+    font-size: 0.8rem;
+    padding: 0 5px;
+    border-radius: 999em;
+    line-height: 16px;
+    margin-left: 5px;
 `;
 export const TMTab = ({ label = '', propsToBeValidated = [], children }) => { return (_jsx("div", { children: children })); };
 const renderTabItems = (tabItemProps, tabs, vil) => {

package/lib/components/base/TMToggleButton.js

@@ -5,46 +5,46 @@ import { getColor } from '../../helper';
 import styled from 'styled-components';
 import TMTooltip from './TMTooltip';
 // #region Style
-const StyledToggleButtonWrapper = styled.div `
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    width: 100%;
+const StyledToggleButtonWrapper = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
 `;
-const StyledToggleButtonContainer = styled.div `
-  width: 36px;
-  height: 20px;
-  background-color: ${props => !props.$value ? 'rgb(194, 194, 194)' : getColor(props.$color)};
-  border-radius: 3px;
-  transition: all 100ms ease;
-  padding: 3px;
-  cursor: pointer;
-  position: relative;
+const StyledToggleButtonContainer = styled.div `
+  width: 36px;
+  height: 20px;
+  background-color: ${props => !props.$value ? 'rgb(194, 194, 194)' : getColor(props.$color)};
+  border-radius: 3px;
+  transition: all 100ms ease;
+  padding: 3px;
+  cursor: pointer;
+  position: relative;
 `;
-const StyledToggleButtonSwitch = styled.div `
-  width: 50%;
-  height: 100%;
-  border-radius: 2px;
-  background-color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  float: right;
-  transition: all 100ms ease;
-  z-index: 100;
-  ${props => props.$value ? '' : 'float: left;'}
+const StyledToggleButtonSwitch = styled.div `
+  width: 50%;
+  height: 100%;
+  border-radius: 2px;
+  background-color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  float: right;
+  transition: all 100ms ease;
+  z-index: 100;
+  ${props => props.$value ? '' : 'float: left;'}
 `;
-const StyledToggleValue = styled.p `
-    font-size: 0.5rem;
-    color: black;
-    font-weight: bold;
+const StyledToggleValue = styled.p `
+    font-size: 0.5rem;
+    color: black;
+    font-weight: bold;
 `;
-const StyledToggleButtonLabel = styled.div `
-    font-size: ${FontSize.defaultFontSize};
-    margin-left: 5px;
-    width: max-content;
-    color: ${props => getColor(props.$color)};
+const StyledToggleButtonLabel = styled.div `
+    font-size: ${FontSize.defaultFontSize};
+    margin-left: 5px;
+    width: max-content;
+    color: ${props => getColor(props.$color)};
 `;
 const TMToggleButton = ({ color = 'primary', value, label, elementStyle, fontSize = FontSize.defaultFontSize, isModifiedWhen, showTooltip = false, onValueChanged }) => {
     const [currentColor, setCurrentColor] = useState(color);

package/lib/components/base/TMToolbarCard.js

@@ -5,43 +5,43 @@ import { IconArrowLeft, SDKUI_Localizator } from '../../helper';
 import { TMColors } from '../../utils/theme';
 import { StyledBadge } from './Styled';
 import TMButton from './TMButton';
-const StyledSearchCard = styled.div `
-    width: 100%;
-    height: 100%;
-    font-size: 1rem;
-    border-radius: 12px;
-    border: 1px solid ${() => TMColors.primaryColor}50 ;
+const StyledSearchCard = styled.div `
+    width: 100%;
+    height: 100%;
+    font-size: 1rem;
+    border-radius: 12px;
+    border: 1px solid ${() => TMColors.primaryColor}50 ;
 `;
-const StyledSearchCardHeader = styled.div `
-    width:100% ;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 4px 10px;
-    background-color: ${props => props.$backgroundColor ?? TMColors.backgroundColorHeader};
-    color: ${props => props.$color ?? TMColors.colorHeader};
-    border-top-right-radius: 10px;
-    border-top-left-radius: 10px;
-    overflow: hidden;
-    position: sticky;
-    top: 0;
-    font-weight: 600;
-    height: 35px;
+const StyledSearchCardHeader = styled.div `
+    width:100% ;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 4px 10px;
+    background-color: ${props => props.$backgroundColor ?? TMColors.backgroundColorHeader};
+    color: ${props => props.$color ?? TMColors.colorHeader};
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+    overflow: hidden;
+    position: sticky;
+    top: 0;
+    font-weight: 600;
+    height: 35px;
 `;
-const StyledSearchCardContent = styled.div `
-    width: 100%;
-    height: ${props => props.$height};
-    overflow: hidden;
-    background-color: ${props => props.$backgroundColor};
-    border-bottom-right-radius: 10px;
-    border-bottom-left-radius: 10px;
-    padding: ${props => props.$padding};
-    display: flex;
-    justify-content: space-between;
-    
-    position: relative;
-    user-select: none;
+const StyledSearchCardContent = styled.div `
+    width: 100%;
+    height: ${props => props.$height};
+    overflow: hidden;
+    background-color: ${props => props.$backgroundColor};
+    border-bottom-right-radius: 10px;
+    border-bottom-left-radius: 10px;
+    padding: ${props => props.$padding};
+    display: flex;
+    justify-content: space-between;
+    
+    position: relative;
+    user-select: none;
 `;
 const TMToolbarCard = ({ items = [], onItemClick, selectedItem, showPanel, color = TMColors.colorHeader, backgroundColor = TMColors.backgroundColorHeader, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '3px', onBack, onClose, onHeaderDoubleClick }) => {
     return (_jsxs(StyledSearchCard, { children: [showHeader && _jsx(StyledSearchCardHeader, { "$backgroundColor": backgroundColor, "$color": color, onDoubleClick: () => { if (onHeaderDoubleClick)

package/lib/components/base/TMTreeView.js

@@ -337,20 +337,20 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
     return (_jsx("div", { style: { height: '100%', width: '100%', overflowY: 'auto', overflowX: 'hidden', padding: '0px 5px 2px 2px' }, children: renderTree(dataSource) }));
 };
 export default TMTreeView;
-export const StyledTreeNode = styled.div `
-	display: flex;
-	flex-direction: row;
-	width: 100%;
-	min-width: 0;
-	min-height: 22px;
-	max-height: 30px;
-	gap: 5px;
-	align-items: center;
-	padding: 0;
-	margin: 0;
-	background: ${(props) => props.$isSelected ? 'oklch(from var(--dx-color-primary) l c h / .2) !important' : 'transparent'};
-
-    &:hover {
-        background: ${() => `oklch(from var(--dx-color-primary) l c h / .1)`};
-    }
+export const StyledTreeNode = styled.div `
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	min-width: 0;
+	min-height: 22px;
+	max-height: 30px;
+	gap: 5px;
+	align-items: center;
+	padding: 0;
+	margin: 0;
+	background: ${(props) => props.$isSelected ? 'oklch(from var(--dx-color-primary) l c h / .2) !important' : 'transparent'};
+
+    &:hover {
+        background: ${() => `oklch(from var(--dx-color-primary) l c h / .1)`};
+    }
 `;

package/lib/components/base/TMUserAvatar.js

@@ -6,13 +6,13 @@ const TMUserAvatar = (props) => {
     const initials = extractInitialsFromName(displayName ?? '-');
     const bgColor = getAvatarColor(nameForColorCalculation ?? '-');
     if (returnType === 'svg') {
-        return `
-            <svg width="30" height="30" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
-                <circle cx="20" cy="20" r="20" fill="${bgColor}" />
-                <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="#fff" font-size="14" font-weight="bold" font-family="sans-serif">
-                    ${initials}
-                </text>
-            </svg>
+        return `
+            <svg width="30" height="30" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="20" cy="20" r="20" fill="${bgColor}" />
+                <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="#fff" font-size="14" font-weight="bold" font-family="sans-serif">
+                    ${initials}
+                </text>
+            </svg>
         `.trim();
     }
     return (_jsx(TMTooltip, { content: tooltipName ?? displayName, children: _jsx("div", { style: {

package/lib/components/base/TMWaitPanel.js

@@ -2,29 +2,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 import TMLayoutContainer from './TMLayout';
 import { SDKUI_Localizator } from '../../helper';
-const StyledWaitPanelOverlay = styled.div `
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 1501;
-    transition: all; 
-    overflow: visible; 
-    background-color: rgba(0, 0, 0, 0.4);
+const StyledWaitPanelOverlay = styled.div `
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1501;
+    transition: all; 
+    overflow: visible; 
+    background-color: rgba(0, 0, 0, 0.4);
 `;
-const StyledWaitPanel = styled.div ` 
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 300px; 
-    height: ${(props) => props.$height};
-    background: white; 
-    border-radius: 8px; 
-    padding: 10px; 
-    text-align: center; 
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
+const StyledWaitPanel = styled.div ` 
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 300px; 
+    height: ${(props) => props.$height};
+    background: white; 
+    border-radius: 8px; 
+    padding: 10px; 
+    text-align: center; 
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
 `;
 const StyledTitle = styled.h2 ` margin: 0; font-size: 1.5em; color: #333; `;
 const StyledProgressBarContainer = styled.div ` width: 100%; height: 20px; background: #e0e0e0; border-radius: 10px; overflow: hidden; margin: 20px 0; `;

package/lib/components/choosers/TMCultureIDPicker.js

@@ -15,44 +15,44 @@ const CULTUREIDs_DATASOURCE = [
     { value: CultureIDs.Es_ES, display: "Español", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.Es_ES), alt: "Lang", width: 16, height: 16 }) },
     { value: CultureIDs.De_DE, display: "Deutsch", icon: _jsx("img", { src: getCultureIDImg(CultureIDs.De_DE), alt: "Lang", width: 16, height: 16 }) },
 ];
-const PickerContainer = styled.div `
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    padding: 20px;
+const PickerContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 20px;
 `;
-const ItemsContainer = styled.div `
-    display: flex;
-    flex-wrap: wrap;
-    gap: 15px;
-    justify-content: center;
+const ItemsContainer = styled.div `
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+    justify-content: center;
 `;
-const CultureItem = styled.div `
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    text-align: center;
-    font-size: 0.9em;
-    padding: 10px 15px;
-    border-radius: 8px;
-    border: 2px solid transparent;
-    transition: all 0.2s ease-in-out;
-    width: 120px;
-
-    &:hover {
-        background-color: #f0f0f0;
-    }
-
-    ${props => props.$isSelected && `
-        border-color: #007bff;
-        background-color: #e6f2ff;
-    `}
+const CultureItem = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    text-align: center;
+    font-size: 0.9em;
+    padding: 10px 15px;
+    border-radius: 8px;
+    border: 2px solid transparent;
+    transition: all 0.2s ease-in-out;
+    width: 120px;
+
+    &:hover {
+        background-color: #f0f0f0;
+    }
+
+    ${props => props.$isSelected && `
+        border-color: #007bff;
+        background-color: #e6f2ff;
+    `}
 `;
-const FlagIcon = styled.div `
-    margin-bottom: 5px;
-    font-size: 2em;
+const FlagIcon = styled.div `
+    margin-bottom: 5px;
+    font-size: 2em;
 `;
 const TMCultureIDPicker = ({ selectedValue, onSelectCultureID, placeHolder, width = '100%', icon, backgroundColor, readOnly = false, openChooserBySingleClick = false, buttons = [], elementStyle, isModifiedWhen, label, showClearButton = false, validationItems = [], onValueChanged }) => {
     const [showPicker, setShowPicker] = useState(false);