@topconsultnpm/sdkui-react-beta 6.17.0 → 6.17.2

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-beta';
 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

@@ -405,17 +405,17 @@ 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; 
 `;

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.js

@@ -10,18 +10,18 @@ import TMTooltip from '../base/TMTooltip';
 import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
 import { IconClearButton } from '../../helper';
 import styled from 'styled-components';
-const StyledTextAreaEditorButton = 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 StyledTextAreaEditorButton = 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};
+     }
 `;
 // Define the TMTextArea component
 const TMTextArea = (props) => {

package/lib/components/editors/TMTextBox.js

@@ -11,26 +11,26 @@ import TMVilViewer from '../base/TMVilViewer';
 import TMTooltip from '../base/TMTooltip';
 import { ContextMenu } from 'devextreme-react';
 import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
-const StyledShowPasswordIcon = styled.div `
-    color: ${props => !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? TMColors.text_normal : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
-    position: absolute;
-    right: 10px;
-    font-size: 18px;
-    transform: translateY(-25px);
-    cursor: pointer;
+const StyledShowPasswordIcon = styled.div `
+    color: ${props => !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? TMColors.text_normal : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
+    position: absolute;
+    right: 10px;
+    font-size: 18px;
+    transform: translateY(-25px);
+    cursor: pointer;
 `;
-const StyledTextBoxEditorButton = 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 StyledTextBoxEditorButton = 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 TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = false, scale, showClearButton, validationItems = [], label = '', readOnly = false, formulaItems = [], buttons = [], isModifiedWhen, placeHolder, elementStyle, width = '100%', maxValue, minValue, fontSize = FontSize.defaultFontSize, icon, labelPosition = 'left', value, disabled = false, type = 'text', onValueChanged, onBlur, borderRadius, allowedPattern }) => {
     const [initialType, setInitialType] = useState(type);

package/lib/components/features/archive/TMArchive.js

@@ -23,6 +23,7 @@ const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, c
         if (!inputTID)
             return;
         setCurrentTID(inputTID);
+        setCurrentMruTID(mruTIDs.includes(inputTID) ? inputTID : 0);
     }, [inputTID]);
     useEffect(() => {
         if (!currentTID || currentTID <= 0) {