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

package/lib/components/editors/TMEditorStyled.js

@@ -12,79 +12,79 @@ export const editorColorManager = (validationItems) => {
         return TMColors.info;
     return '';
 };
-export const StyledEditorContainer = styled.div `
-    width: ${props => props.$width};
-    position: relative;
+export const StyledEditorContainer = styled.div `
+    width: ${props => props.$width};
+    position: relative;
 `;
-export const StyledEditor = styled.input `
-width: ${props => props.$width};
-padding: ${props => props.$type === 'password' ? '4px 10px 4px 13px' : props.$type === 'number' ? '4px 4px 5px 13px' : '4px 10px 4px 13px'};
-border: 1px solid;
-border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
-border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid ;
-border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
-color: ${props => props.readOnly ? '#525252' : !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'black' : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
-border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius};
-min-width: ${props => props.$isMobile && '70px'};
-background: ${props => props.readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : 'white'};
-&:focus{
-    outline: none;
-    background-image: linear-gradient(white, #E4E9F7);
-    border: ${props => props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
-    border-bottom: 2px solid ;
-    border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.primary : TMColors.isModified : editorColorManager(props.$vil)};
-}
-
-font-size: ${props => props.$fontSize};
-&::placeholder {
-    /* color: ${props => (props.$vil.length === 0) ? 'gray' : editorColorManager(props.$vil)}; */
-    font-size: ${props => props.$fontSize};
-}
+export const StyledEditor = styled.input `
+width: ${props => props.$width};
+padding: ${props => props.$type === 'password' ? '4px 10px 4px 13px' : props.$type === 'number' ? '4px 4px 5px 13px' : '4px 10px 4px 13px'};
+border: 1px solid;
+border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
+border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid ;
+border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
+color: ${props => props.readOnly ? '#525252' : !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'black' : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
+border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius};
+min-width: ${props => props.$isMobile && '70px'};
+background: ${props => props.readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : 'white'};
+&:focus{
+    outline: none;
+    background-image: linear-gradient(white, #E4E9F7);
+    border: ${props => props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
+    border-bottom: 2px solid ;
+    border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.primary : TMColors.isModified : editorColorManager(props.$vil)};
+}
+
+font-size: ${props => props.$fontSize};
+&::placeholder {
+    /* color: ${props => (props.$vil.length === 0) ? 'gray' : editorColorManager(props.$vil)}; */
+    font-size: ${props => props.$fontSize};
+}
 `;
-export const StyledEditorIcon = styled.div `
-    color: ${props => !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'rgb(80,80,80)' : TMColors.tertiary : editorColorManager(props.$vil) : 'rgb(180,180,180)'};
-    width: 25px;
-    height: 25px;
-    margin-right: 2px;
-    font-size: 18px;
-    user-select: none;
-    transform: translateY(18px);
+export const StyledEditorIcon = styled.div `
+    color: ${props => !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'rgb(80,80,80)' : TMColors.tertiary : editorColorManager(props.$vil) : 'rgb(180,180,180)'};
+    width: 25px;
+    height: 25px;
+    margin-right: 2px;
+    font-size: 18px;
+    user-select: none;
+    transform: translateY(18px);
 `;
-export const StyledEditorLabel = styled.div `
-    font-size: ${props => props.$fontSize ?? TMEditorsDefaultLabelFontSize} ;
-    color:${props => !props.$disabled ? props.$isFocused ? TMColors.primary : props.$color ? props.$color : TMColors.label_normal : TMColors.disabled};
-    padding: 0 3px;
-    user-select: none;
-    transform: ${props => props.$labelPosition === 'left' && 'translateY(5px)'};
-    width: max-content;
-    transform: translate(10px, 6px);
-    background-color: ${TMColors.default_background};
-    position: relative;
-    z-index: 1;
+export const StyledEditorLabel = styled.div `
+    font-size: ${props => props.$fontSize ?? TMEditorsDefaultLabelFontSize} ;
+    color:${props => !props.$disabled ? props.$isFocused ? TMColors.primary : props.$color ? props.$color : TMColors.label_normal : TMColors.disabled};
+    padding: 0 3px;
+    user-select: none;
+    transform: ${props => props.$labelPosition === 'left' && 'translateY(5px)'};
+    width: max-content;
+    transform: translate(10px, 6px);
+    background-color: ${TMColors.default_background};
+    position: relative;
+    z-index: 1;
 `;
-export const StyledTextareaEditor = styled.textarea `
-    width: ${props => props.$width};
-    padding: 4px 5px 4px 13px;
-    border: 1px solid;
-    border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
-    border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid;
-    border-bottom-color: ${props => props.$vil.length === 0 ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
-    color: ${props => props.readOnly ? '#525252' : !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'black' : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
-    background: ${props => props.readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : 'white'};
-    border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius}; /* Slightly increased radius for smoother corners */
-    min-width: ${props => (props.$isMobile ? '70px' : '100%')}; /* Adjust for mobile */
-    max-height: ${props => props.$maxHeight ?? 'auto'}; 
-    resize: ${props => (props.$resize === false ? 'none' : 'both')};
-    &:focus {
-        outline: none;
-        background-image: linear-gradient(white, #E4E9F7);
-        border: ${props => props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
-        border-bottom: 2px solid;
-        border-bottom-color: ${props => props.$vil.length === 0 ? !props.$isModified ? TMColors.primary : TMColors.isModified : editorColorManager(props.$vil)};
-    }
-    font-size: ${props => props.$fontSize};
-    &::placeholder {
-      color: ${props => (props.$vil.length === 0) ? 'gray' : editorColorManager(props.$vil)};
-      font-size: ${props => props.$fontSize};
-    }
+export const StyledTextareaEditor = styled.textarea `
+    width: ${props => props.$width};
+    padding: 4px 5px 4px 13px;
+    border: 1px solid;
+    border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
+    border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid;
+    border-bottom-color: ${props => props.$vil.length === 0 ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
+    color: ${props => props.readOnly ? '#525252' : !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'black' : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
+    background: ${props => props.readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : 'white'};
+    border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius}; /* Slightly increased radius for smoother corners */
+    min-width: ${props => (props.$isMobile ? '70px' : '100%')}; /* Adjust for mobile */
+    max-height: ${props => props.$maxHeight ?? 'auto'}; 
+    resize: ${props => (props.$resize === false ? 'none' : 'both')};
+    &:focus {
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border: ${props => props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
+        border-bottom: 2px solid;
+        border-bottom-color: ${props => props.$vil.length === 0 ? !props.$isModified ? TMColors.primary : TMColors.isModified : editorColorManager(props.$vil)};
+    }
+    font-size: ${props => props.$fontSize};
+    &::placeholder {
+      color: ${props => (props.$vil.length === 0) ? 'gray' : editorColorManager(props.$vil)};
+      font-size: ${props => props.$fontSize};
+    }
   `;

package/lib/components/editors/TMHtmlContentDisplay.js

@@ -3,22 +3,22 @@ import { useEffect, useState } from 'react';
 import { UserListCacheService } from '@topconsultnpm/sdk-ts';
 import styled from 'styled-components';
 import { TMColors } from '../../utils/theme';
-const Wrapper = styled.div `
-    * {
-        color: ${(props) => props.$isSelected && '#fff !important'};
-    }
-    ul li {
-        list-style-position: inside;
-    }
-    ol li {
-        list-style-position: inside;
-    }
-    .highlight {
-        background-color: ${(props) => props.$isSelected ? '#6c9023' : 'yellow'};
-    }
-    a {
-        color: ${(props) => (props.$isSelected ? '#fff' : 'rgb(26, 13, 171)')};
-    }
+const Wrapper = styled.div `
+    * {
+        color: ${(props) => props.$isSelected && '#fff !important'};
+    }
+    ul li {
+        list-style-position: inside;
+    }
+    ol li {
+        list-style-position: inside;
+    }
+    .highlight {
+        background-color: ${(props) => props.$isSelected ? '#6c9023' : 'yellow'};
+    }
+    a {
+        color: ${(props) => (props.$isSelected ? '#fff' : 'rgb(26, 13, 171)')};
+    }
 `;
 const convertLinksToAnchors = (markup) => {
     const urlRegex = /(?<!href=["'])(https?:\/\/[^\s"'<>]+[^\s"'<>.,;:!?)])/g;

package/lib/components/editors/TMLocalizedTextBox.js

@@ -26,40 +26,40 @@ const Portal = ({ children, popoverRef }) => {
     }, [popoverRef]);
     return createPortal(children, elRef.current);
 };
-const LocalizedContainer = styled.div `
-  position: relative;
-  width: 100%;
+const LocalizedContainer = styled.div `
+  position: relative;
+  width: 100%;
 `;
-const Popover = styled.div `
-  display: ${props => props.$isVisible ? 'flex' : 'none'};
-  flex-direction: column;
-  position: fixed; /* Usa 'fixed' o 'absolute' a seconda del comportamento desiderato */
-  top: ${props => props.$top}px;
-  left: ${props => props.$left}px;
-  width: ${props => props.$width}px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  background-color: #fff;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  z-index: 2000;
-  padding: 8px;
+const Popover = styled.div `
+  display: ${props => props.$isVisible ? 'flex' : 'none'};
+  flex-direction: column;
+  position: fixed; /* Usa 'fixed' o 'absolute' a seconda del comportamento desiderato */
+  top: ${props => props.$top}px;
+  left: ${props => props.$left}px;
+  width: ${props => props.$width}px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #fff;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  z-index: 2000;
+  padding: 8px;
 `;
-const Badge = styled.span `
-  position: absolute;
-  top: -8px; 
-  right: -8px;
-  background-color: #ff9800;
-  color: white;
-  border-radius: 50%;
-  padding: 2px 6px;
-  font-size: 10px;
-  font-weight: bold;
-  pointer-events: none;
+const Badge = styled.span `
+  position: absolute;
+  top: -8px; 
+  right: -8px;
+  background-color: #ff9800;
+  color: white;
+  border-radius: 50%;
+  padding: 2px 6px;
+  font-size: 10px;
+  font-weight: bold;
+  pointer-events: none;
 `;
-const IconContainer = styled.div `
-  position: relative;
-  display: flex;
-  align-items: center;
+const IconContainer = styled.div `
+  position: relative;
+  display: flex;
+  align-items: center;
 `;
 // Helper function to get image path
 export const getCultureIDImg = (cultureID) => {

package/lib/components/editors/TMMetadataValues.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
-import { AccessLevels, DcmtTypeListCacheService, LayoutItemTypes, LayoutModes, MetadataDataDomains, MetadataDataTypes, SDK_Globals, SystemMIDsAsNumber, SystemTIDs, TemplateTIDs, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
+import { AccessLevels, DcmtTypeListCacheService, LayoutGroupBorderStyles, LayoutGroupOrientations, LayoutItemTypes, LayoutModes, MetadataDataDomains, MetadataDataTypes, SDK_Globals, SystemMIDsAsNumber, SystemTIDs, TemplateTIDs, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
 import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty, deepCompare, SDKUI_Globals, IconDcmtTypeSys } from "../../helper";
 import { TMColors } from "../../utils/theme";
 import TMButton from "../base/TMButton";
@@ -13,6 +13,7 @@ import { FormulaHelper } from "./TMFormulaEditor";
 import { DraftsMIDs, DSAttachsMIDs } from "../../ts";
 import { TMNothingToShow } from "../features/documents/TMDcmtPreview";
 import TMAccordion from "../base/TMAccordion";
+import TabPanel, { Item } from 'devextreme-react/tab-panel';
 export var ShowCheckBoxesMode;
 (function (ShowCheckBoxesMode) {
     ShowCheckBoxesMode[ShowCheckBoxesMode["Never"] = 0] = "Never";
@@ -33,6 +34,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
     const [selectedItem, setSelectedItem] = useState(undefined);
     const [prevMetadataValues, setPrevMetadataValues] = useState([]);
     const [inputMidsApplied, setInputMidsApplied] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(0);
     const onChangeHandler = useCallback((newValue, mid) => {
         let newValues = structuredClone(metadataValues);
         const item = newValues.find(value => value.mid === mid);
@@ -440,17 +442,49 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
             // Check if this is a LayoutRoot - just render its children
             if (layoutItem.type === LayoutItemTypes.LayoutRoot) {
                 const children = getChildren(layoutItem.layoutItemID);
-                return (_jsx(React.Fragment, { children: children.map(child => renderLayoutItem(child, depth, visited)) }, `root-${layoutItem.layoutItemID}`));
+                if (layout.showTab) {
+                    return (_jsx(React.Fragment, { children: _jsx(TabPanel, { width: "100%", height: "100%", children: children.map(child => renderLayoutItem(child, depth, visited)) }) }, `root-${layoutItem.layoutItemID}`));
+                }
+                else {
+                    return (_jsx(React.Fragment, { children: children.map(child => renderLayoutItem(child, depth, visited)) }, `root-${layoutItem.layoutItemID}`));
+                }
             }
             // Check if this is a LayoutGroup
             else if (layoutItem.type === LayoutItemTypes.LayoutGroup && layoutItem.lgd) {
                 const children = getChildren(layoutItem.layoutItemID);
                 const groupDescriptor = layoutItem.lgd;
                 const groupTitle = groupDescriptor.caption || `Group ${layoutItem.layoutItemID}`;
+                const groupIsNoBorder = groupDescriptor.borderStyle == undefined || groupDescriptor.borderStyle == LayoutGroupBorderStyles.NoBorder || groupDescriptor.borderStyle == LayoutGroupBorderStyles.None;
                 const isCollapsed = false; // LayoutGroupDescriptor doesn't have collapsed property
+                //Layout Grou da trasformare in tab
+                if (groupDescriptor.orientation == LayoutGroupOrientations.Vertical && layout.showTab && layoutItem.parentID === 0) {
+                    return (_jsx(Item, { title: groupTitle, children: _jsx("div", { style: { width: '100%' }, children: children.map(child => renderLayoutItem(child, depth + 1, visited)) }) }, `group-tab-${layoutItem.layoutItemID}`));
+                }
+                if (groupIsNoBorder && groupDescriptor.orientation !== LayoutGroupOrientations.Horizontal && children.length == 0) {
+                    return (_jsx("br", {}));
+                }
+                if (groupIsNoBorder && groupDescriptor.orientation === LayoutGroupOrientations.Vertical) {
+                    return (_jsx("div", { style: { width: '100%', border: 'none', padding: 0 }, children: children.map(child => renderLayoutItem(child, depth + 1, visited)) }));
+                }
+                if (!groupIsNoBorder && groupDescriptor.orientation === LayoutGroupOrientations.Vertical) {
+                    if (groupDescriptor.borderStyle == LayoutGroupBorderStyles.Group) {
+                        return (_jsxs("div", { style: { position: 'relative', border: '2px solid #CAD9EB', borderRadius: '3px', padding: '12px 6px 6px', margin: '10px', display: 'flex', flexDirection: 'column', flexWrap: 'wrap', gap: '3px', }, children: [_jsx("div", { style: { position: 'absolute', top: '-10px', left: '10px', padding: '0 8px', backgroundColor: '#fff', fontWeight: 600, fontSize: '1rem', color: TMColors.primaryColor, }, children: groupTitle }), children.map(child => renderLayoutItem(child, depth + 1, visited))] }));
+                    }
+                    if (groupDescriptor.borderStyle == LayoutGroupBorderStyles.GroupBox || groupDescriptor.borderStyle == LayoutGroupBorderStyles.Tabbed) {
+                        return (_jsx(TMAccordion, { title: groupTitle, titleSize: "Small", children: children.map(child => renderLayoutItem(child, depth + 1, visited)) }));
+                    }
+                }
+                if (groupDescriptor.orientation === LayoutGroupOrientations.Horizontal) {
+                    return (_jsx("div", { style: { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: '3px' }, children: groupDescriptor.borderStyle == LayoutGroupBorderStyles.GroupBox || groupDescriptor.borderStyle == LayoutGroupBorderStyles.Tabbed ?
+                            _jsx(TMAccordion, { title: groupTitle, titleSize: "Small", children: children.map(child => renderLayoutItem(child, depth + 1, visited)) }) :
+                            groupDescriptor.borderStyle == LayoutGroupBorderStyles.Group ?
+                                _jsxs("div", { style: { position: 'relative', border: '2px solid #CAD9EB', borderRadius: '3px', padding: '12px 6px 6px', margin: '10px', display: 'flex', flexDirection: 'column', flexWrap: 'wrap', gap: '3px', }, children: [_jsx("div", { style: { position: 'absolute', top: '-10px', left: '10px', padding: '0 8px', backgroundColor: '#fff', fontWeight: 600, fontSize: '1rem', color: TMColors.primaryColor, }, children: groupTitle }), children.map(child => (_jsx("div", { style: { flex: '1 1 0', minWidth: 0 }, children: renderLayoutItem(child, depth + 1, visited) }, child.layoutItemID)))] })
+                                :
+                                    children.map(child => (_jsx("div", { style: { flex: '1 1 0', minWidth: 0 }, children: renderLayoutItem(child, depth + 1, visited) }, child.layoutItemID))) }, `group-horizontal-${layoutItem.layoutItemID}`));
+                }
                 // Apply indentation only to subgroups (depth > 0), not to root groups
                 const indentationPx = depth > 0 ? depth * 10 : 0;
-                return (_jsx("div", { style: { paddingLeft: `${indentationPx}px` }, children: _jsx(TMAccordion, { title: groupTitle, defaultCollapsed: isCollapsed, children: children.map(child => renderLayoutItem(child, depth + 1, visited)) }) }, `group-wrapper-${layoutItem.layoutItemID}`));
+                return (_jsx("div", { style: { paddingLeft: `${indentationPx}px` }, children: _jsx(TMAccordion, { title: groupTitle, defaultCollapsed: isCollapsed, titleSize: "Small", children: children.map(child => renderLayoutItem(child, depth + 1, visited)) }) }, `group-wrapper-${layoutItem.layoutItemID}`));
             }
             // Check if this is a LayoutControlItem (metadata field)
             else if (layoutItem.type === LayoutItemTypes.LayoutControlItem && layoutItem.lcid) {
@@ -458,12 +492,19 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                 const mid = controlDescriptor.mid;
                 if (!mid)
                     return null;
+                let isAccordion = true;
+                const parent = layout.items?.filter(p => p.layoutItemID === layoutItem.parentID);
+                if (parent && parent.length > 0 && parent[0].type === LayoutItemTypes.LayoutGroup && parent[0].lgd) {
+                    const groupDescriptor = parent[0].lgd;
+                    if (groupDescriptor.borderStyle == LayoutGroupBorderStyles.Group)
+                        isAccordion = false;
+                }
                 // Find the metadata value for this MID
                 const metadataItem = metadataValues.find(m => m.mid === mid);
                 if (!metadataItem)
                     return null;
                 // Indent control items based on depth so they align under groups
-                const controlIndentPx = depth > 0 ? depth * 10 : 15;
+                const controlIndentPx = !isAccordion ? 3 : isAccordion && depth > 0 ? depth * 10 : 15;
                 return (_jsx("div", { style: { paddingLeft: `${controlIndentPx}px` }, children: renderMetadataItem(metadataItem) }, `control-${layoutItem.layoutItemID}`));
             }
             // Check if this is a SeparatorItem (horizontal line)
@@ -508,23 +549,23 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
 };
 export default TMMetadataValues;
 //#region  Styled Components
-const StyledMetadataValuesContainer = styled.div ` 
-    display: flex; 
-    flex-direction: column; 
-    width: 100%; 
-    height: 100%; 
-    overflow: auto;
-    padding: 0 10px 10px 10px;
+const StyledMetadataValuesContainer = styled.div ` 
+    display: flex; 
+    flex-direction: column; 
+    width: 100%; 
+    height: 100%; 
+    overflow: auto;
+    padding: 0 10px 10px 10px;
 `;
-const StyledRow = styled.div ` 
-    display: flex; 
-    flex-direction: row; 
-    width: 100%; 
-    gap: 5px; 
+const StyledRow = styled.div ` 
+    display: flex; 
+    flex-direction: row; 
+    width: 100%; 
+    gap: 5px; 
 `;
-const StyledSeparator = styled.hr `
-    width: 100%;
-    margin: 10px 0;
-    border: none;
-    border-top: 1px solid #e0e0e0;
+const StyledSeparator = styled.hr `
+    width: 100%;
+    margin: 10px 0;
+    border: none;
+    border-top: 1px solid #e0e0e0;
 `;

package/lib/components/editors/TMRadioButton.js

@@ -2,51 +2,51 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FontSize, TMColors } from '../../utils/theme';
 import styled from 'styled-components';
 import { makeID } from '../../helper/helpers';
-const StyledWrapper = styled.label `
-    color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : TMColors.text_normal : TMColors.disabled};
-    display: flex;
-    flex-direction: ${props => props.$direction};
-    align-items: ${props => props.$direction === 'row' ? 'center' : 'flex-start'};
-    font-size: ${props => props.$fontSize};
-    gap: ${props => props.$direction === 'row' ? '20px' : "10px"};
+const StyledWrapper = styled.label `
+    color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : TMColors.text_normal : TMColors.disabled};
+    display: flex;
+    flex-direction: ${props => props.$direction};
+    align-items: ${props => props.$direction === 'row' ? 'center' : 'flex-start'};
+    font-size: ${props => props.$fontSize};
+    gap: ${props => props.$direction === 'row' ? '20px' : "10px"};
 `;
-const StyledRadioGroupLabel = styled.div `
-    flex: ${props => props.$flexBase};
+const StyledRadioGroupLabel = styled.div `
+    flex: ${props => props.$flexBase};
 `;
-const StyledRadioGroupContainer = styled.div `
-    flex: ${props => 10 - props.$flexBase};
+const StyledRadioGroupContainer = styled.div `
+    flex: ${props => 10 - props.$flexBase};
 `;
-const StyledRadioButtonWrapper = styled.div `
-    display: flex;
-    flex-direction: ${props => props.$direction};
-    align-items: ${props => props.$direction === 'row' ? 'center' : 'flex-start'};
-    justify-content: flex-start;
-    gap: ${props => props.$direction === 'row' ? '10px' : '5px'};
+const StyledRadioButtonWrapper = styled.div `
+    display: flex;
+    flex-direction: ${props => props.$direction};
+    align-items: ${props => props.$direction === 'row' ? 'center' : 'flex-start'};
+    justify-content: flex-start;
+    gap: ${props => props.$direction === 'row' ? '10px' : '5px'};
 `;
-const StyledRadioButtoncontainer = styled.div `
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 5px;
-    height: 18px;
+const StyledRadioButtoncontainer = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 5px;
+    height: 18px;
 `;
-const StyledRadioButton = styled.input `
-   accent-color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : TMColors.primary : TMColors.disabled}; 
-   cursor: ${props => !props.$disabled && 'pointer'};
+const StyledRadioButton = styled.input `
+   accent-color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : TMColors.primary : TMColors.disabled}; 
+   cursor: ${props => !props.$disabled && 'pointer'};
 `;
-const StyledradioButtonLabel = styled.label `
-    font-size: ${props => props.$fontSize};
-    color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : TMColors.text_normal : TMColors.disabled};
-    user-select: none;
-    width: 100%;
-    cursor: ${props => !props.$disabled && 'pointer'};
-    &:focus{
-        outline: none;
-        background-image: linear-gradient(white, #E4E9F7);
-        border-bottom: 2px solid ;
-        border-bottom-color: ${props => !props.$isModifiedWhen ? TMColors.primary : TMColors.isModified};
-    }
+const StyledradioButtonLabel = styled.label `
+    font-size: ${props => props.$fontSize};
+    color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : TMColors.text_normal : TMColors.disabled};
+    user-select: none;
+    width: 100%;
+    cursor: ${props => !props.$disabled && 'pointer'};
+    &:focus{
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border-bottom: 2px solid ;
+        border-bottom-color: ${props => !props.$isModifiedWhen ? TMColors.primary : TMColors.isModified};
+    }
 `;
 const TMRadioButton = ({ isModifiedWhen, flexBase = 1, elementStyle, label, value, fontSize = FontSize.defaultFontSize, dataSource = [], direction = 'row', onValueChanged, disabled = false }) => {
     const renderedRadioButtons = () => {

package/lib/components/editors/TMSummary.js

@@ -7,46 +7,46 @@ import { IconClearButton, IconPencil, SDKUI_Localizator } from '../../helper';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMVilViewer from '../base/TMVilViewer';
 import TMTooltip from '../base/TMTooltip';
-const StyledSummaryTemplateInput = styled.div `
-    width: ${props => props.$width};
-    height: ${props => props.$height};
-    padding: ${props => !props.$showBorder ? '4px 5px' : '5px 5px 5px 13px'};
-    border: ${props => !props.$showBorder ? '' : '1px solid'};
-    background: ${props => props.$readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : props.$backgroundColor};
-    border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
-    border-bottom: ${props => !props.$showBorder ? '' : (props.$vil.length > 0) ? '3px solid' : '1px solid'} ;
-    border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
-    color: ${props => props.$readOnly ? '#525252' : !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'black' : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
-    border-radius: ${props => !props.$showBorder ? props.$borderRadius : TMEditorsDefaultBorderRadius};
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-
-    &:focus{
-        outline: none;
-        background-image: ${props => !props.$showBorder ? '' : 'linear-gradient(white, #E4E9F7)'};
-        border: ${props => !props.$showBorder ? '' : props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
-        border-bottom:  ${props => !props.$showBorder ? '' : '2px solid'};
-        border-bottom-color: ${props => !props.$showBorder ? '' : (props.$vil.length === 0) ? !props.$isModified ? TMColors.primary : TMColors.isModified : editorColorManager(props.$vil)};
-    }
-    font-size: ${props => props.$fontSize};
-    &::placeholder {
-        /* color: ${props => (props.$vil.length === 0) ? 'gray' : editorColorManager(props.$vil)}; */
-        font-size: ${props => props.$fontSize};
-    }
+const StyledSummaryTemplateInput = styled.div `
+    width: ${props => props.$width};
+    height: ${props => props.$height};
+    padding: ${props => !props.$showBorder ? '4px 5px' : '5px 5px 5px 13px'};
+    border: ${props => !props.$showBorder ? '' : '1px solid'};
+    background: ${props => props.$readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : props.$backgroundColor};
+    border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
+    border-bottom: ${props => !props.$showBorder ? '' : (props.$vil.length > 0) ? '3px solid' : '1px solid'} ;
+    border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
+    color: ${props => props.$readOnly ? '#525252' : !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'black' : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
+    border-radius: ${props => !props.$showBorder ? props.$borderRadius : TMEditorsDefaultBorderRadius};
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+
+    &:focus{
+        outline: none;
+        background-image: ${props => !props.$showBorder ? '' : 'linear-gradient(white, #E4E9F7)'};
+        border: ${props => !props.$showBorder ? '' : props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
+        border-bottom:  ${props => !props.$showBorder ? '' : '2px solid'};
+        border-bottom-color: ${props => !props.$showBorder ? '' : (props.$vil.length === 0) ? !props.$isModified ? TMColors.primary : TMColors.isModified : editorColorManager(props.$vil)};
+    }
+    font-size: ${props => props.$fontSize};
+    &::placeholder {
+        /* color: ${props => (props.$vil.length === 0) ? 'gray' : editorColorManager(props.$vil)}; */
+        font-size: ${props => props.$fontSize};
+    }
 `;
-const StyledEditorButtonIcon2 = styled.div `
-    color: ${TMColors.button_icon};
-    display: flex;
-    align-items: center;
-    position: relative;
-    cursor: pointer;
-    &:focus{
-        outline: none;
-        background-image: linear-gradient(white, #E4E9F7);
-        border-bottom: 2px solid;
-        border-bottom-color: ${TMColors.primary};
-     }
+const StyledEditorButtonIcon2 = styled.div `
+    color: ${TMColors.button_icon};
+    display: flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    &:focus{
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border-bottom: 2px solid;
+        border-bottom-color: ${TMColors.primary};
+     }
 `;
 const TMSummary = forwardRef(({ placeHolder, readOnly, labelColor, hasValue, borderRadius = '4px', validationItems = [], buttons = [], label = '', onClearClick, openEditorOnSummaryClick = true, onEditorClick, backgroundColor = 'transparent', showBorder = true, isModifiedWhen, elementStyle, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, icon, showEditButton = true, showClearButton, iconEditButton, iconeEditTooltip, labelPosition = 'left', template, disabled = false, onValueChanged }, ref) => {
     const summaryElementRef = useRef(null); // Ref all'elemento DOM div principale

package/lib/components/editors/TMTextArea.d.ts

@@ -12,6 +12,7 @@ interface ITMTextArea extends ITMEditorBase {
     rows?: number;
     maxLength?: number;
     resize?: boolean;
+    autoCalculateRows?: boolean;
 }
 declare const TMTextArea: React.FunctionComponent<ITMTextArea>;
 export default TMTextArea;