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

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/assistant/ToppyHelpCenter.js

@@ -4,138 +4,138 @@ import ReactDOM from 'react-dom';
 import styled, { keyframes, css } from 'styled-components';
 import Toppy from '../../../assets/Toppy-generico.png';
 import { DeviceType } from '../../base/TMDeviceProvider';
-const toppyEntrance = keyframes `
-  0% { right: -200px; opacity: 0; }
-  60% { opacity: 1; }
-  100% { right: 10px; opacity: 1; }
+const toppyEntrance = keyframes `
+  0% { right: -200px; opacity: 0; }
+  60% { opacity: 1; }
+  100% { right: 10px; opacity: 1; }
 `;
-const pulseAnimation = keyframes `
-  0% { transform: scale(1); }
-  50% { transform: scale(1.05); }
-  100% { transform: scale(1); }
+const pulseAnimation = keyframes `
+  0% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+  100% { transform: scale(1); }
 `;
-const bounceAnimation = keyframes `
-  0%, 20%, 50%, 80%, 100% {
-    transform: translateY(0);
-  }
-  40% {
-    transform: translateY(-10px);
-  }
-  60% {
-    transform: translateY(-5px);
-  }
+const bounceAnimation = keyframes `
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-10px);
+  }
+  60% {
+    transform: translateY(-5px);
+  }
 `;
-const wiggle = keyframes `
-  0% { transform: rotate(-5deg) scale(1.1); }
-  10% { transform: rotate(5deg) scale(0.95); }
-  20% { transform: rotate(-5deg) scale(1.1); }
-  30% { transform: rotate(5deg) scale(1.05); }
-  40% { transform: rotate(-5deg) scale(1); }
-  50% { transform: rotate(5deg) scale(0.96); }
-  60% { transform: rotate(-5deg) scale(1.15); }
-  70% { transform: rotate(5deg) scale(0.99); }
-  80% { transform: rotate(-5deg) scale(1.05); }
-  90% { transform: rotate(5deg) scale(1); }
-  100% { transform: rotate(-5deg) scale(1.08); }
+const wiggle = keyframes `
+  0% { transform: rotate(-5deg) scale(1.1); }
+  10% { transform: rotate(5deg) scale(0.95); }
+  20% { transform: rotate(-5deg) scale(1.1); }
+  30% { transform: rotate(5deg) scale(1.05); }
+  40% { transform: rotate(-5deg) scale(1); }
+  50% { transform: rotate(5deg) scale(0.96); }
+  60% { transform: rotate(-5deg) scale(1.15); }
+  70% { transform: rotate(5deg) scale(0.99); }
+  80% { transform: rotate(-5deg) scale(1.05); }
+  90% { transform: rotate(5deg) scale(1); }
+  100% { transform: rotate(-5deg) scale(1.08); }
 `;
-const ToppyContainer = styled.div `
-  position: ${({ $fixed }) => ($fixed ? 'fixed' : 'absolute')};
-  bottom: ${({ $isCollapsed, $isMobile }) => $isMobile ? '5px' : $isCollapsed ? '5px' : '-20px'};
+const ToppyContainer = styled.div `
+  position: ${({ $fixed }) => ($fixed ? 'fixed' : 'absolute')};
+  bottom: ${({ $isCollapsed, $isMobile }) => $isMobile ? '5px' : $isCollapsed ? '5px' : '-20px'};
   ${({ $align, $isCollapsed }) => $align === 'left'
     ? `left: ${$isCollapsed ? '5px' : '10px'}; right: auto;`
-    : `right: ${$isCollapsed ? '5px' : '10px'}; left: auto;`}
-  display: flex;
-  flex-direction: column-reverse; /* Il contenuto è sopra l'immagine */
-  align-items: ${({ $align }) => $align === 'left' ? 'flex-start' : 'flex-end'};
-  animation: ${({ $fixed }) => $fixed && css `${toppyEntrance} 0.5s cubic-bezier(0.23, 1, 0.32, 1)`};
-  z-index: ${({ $fixed }) => ($fixed ? 2147483647 : 10)};
+    : `right: ${$isCollapsed ? '5px' : '10px'}; left: auto;`}
+  display: flex;
+  flex-direction: column-reverse; /* Il contenuto è sopra l'immagine */
+  align-items: ${({ $align }) => $align === 'left' ? 'flex-start' : 'flex-end'};
+  animation: ${({ $fixed }) => $fixed && css `${toppyEntrance} 0.5s cubic-bezier(0.23, 1, 0.32, 1)`};
+  z-index: ${({ $fixed }) => ($fixed ? 2147483647 : 10)};
 `;
-const ToppyImage = styled.img `
-  width: ${({ $isMobile, $isCollapsed }) => $isCollapsed ? '60px' : $isMobile ? '90px' : '120px'};
-  height: ${({ $isMobile, $isCollapsed }) => $isCollapsed ? '70px' : $isMobile ? '105px' : '140px'};
-  cursor: pointer;
-  object-fit: cover;
-  object-position: top center;
-  clip-path: inset(0 0 22% 0 round 10px);
+const ToppyImage = styled.img `
+  width: ${({ $isMobile, $isCollapsed }) => $isCollapsed ? '60px' : $isMobile ? '90px' : '120px'};
+  height: ${({ $isMobile, $isCollapsed }) => $isCollapsed ? '70px' : $isMobile ? '105px' : '140px'};
+  cursor: pointer;
+  object-fit: cover;
+  object-position: top center;
+  clip-path: inset(0 0 22% 0 round 10px);
   transform: ${({ $isCollapsed, $align }) => $isCollapsed
     ? 'none'
     : $align === 'left'
         ? 'rotate(20deg)'
-        : 'rotate(-20deg)'};
-
+        : 'rotate(-20deg)'};
+
   ${({ $isCollapsed }) => $isCollapsed &&
-    css `
-      /* animation: ${bounceAnimation} 2s infinite; */
-      /* animation: ${pulseAnimation} 2s infinite; */
-      animation: ${wiggle} 4s infinite;
-    `}
+    css `
+      /* animation: ${bounceAnimation} 2s infinite; */
+      /* animation: ${pulseAnimation} 2s infinite; */
+      animation: ${wiggle} 4s infinite;
+    `}
 `;
-const ToppyContent = styled.div `
+const ToppyContent = styled.div `
   margin-bottom: ${({ $isMobile, $align }) => $align === 'left'
     ? '30px' // Spazio tra ToppyContent e ToppyImage
     : $isMobile
         ? '30px'
-        : '20px'};
-
-
-  display: ${props => (props.$isCollapsed ? 'none' : 'block')};
-  width: max-content;
-  max-width: 250px;
-  background: linear-gradient(
-    180deg,
-    rgba(0, 113, 188, 0.45) 0%,
-    rgba(27, 20, 100, 0.65) 100%
-  );
-  color: white;
-  padding: 10px;
-  border-radius: 10px;
-  border: 1px solid #FFFFFF;
-  opacity: ${props => (props.$isCollapsed ? 0 : 1)};
-  transform: ${props => (props.$isCollapsed ? 'translateY(20px)' : 'translateY(0)')};
-  transition: opacity 0.3s ease, transform 0.3s ease;
-  pointer-events: ${props => (props.$isCollapsed ? 'none' : 'auto')};
-  position: relative; 
-
+        : '20px'};
+
+
+  display: ${props => (props.$isCollapsed ? 'none' : 'block')};
+  width: max-content;
+  max-width: 250px;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 113, 188, 0.45) 0%,
+    rgba(27, 20, 100, 0.65) 100%
+  );
+  color: white;
+  padding: 10px;
+  border-radius: 10px;
+  border: 1px solid #FFFFFF;
+  opacity: ${props => (props.$isCollapsed ? 0 : 1)};
+  transform: ${props => (props.$isCollapsed ? 'translateY(20px)' : 'translateY(0)')};
+  transition: opacity 0.3s ease, transform 0.3s ease;
+  pointer-events: ${props => (props.$isCollapsed ? 'none' : 'auto')};
+  position: relative; 
+
  ${({ $align, $isMobile }) => $align === 'left' &&
-    css `
-      position: absolute;
-      left: 50px;
-      right: auto;
-      bottom: 100%;
-      transform: translateY(-${$isMobile ? '10px' : '20px'}); 
-    `}
-
-  &::after {
-    transform: ${({ $align }) => $align === 'left' ? 'skewX(15deg)' : 'skewX(-15deg)'};
-    content: "";
-    position: absolute;
-    top: 100%;
-
-    ${({ $align }) => $align === 'left' ? 'left: 20px; right: auto;' : 'right: 15px; left: auto;'} 
-    border-width: 32px 32px 0 0;
-    border-style: solid;
-    border-color: #FFFFFF transparent; 
-    display: block;
-    width: 0;
-    height: 0;
-    z-index: 1;
-  }
-  
-  &::before {
-    transform: ${({ $align }) => $align === 'left' ? 'skewX(15deg)' : 'skewX(-15deg)'};
-    content: "";
-    position: absolute;
-    top: 100%;
-
-    ${({ $align }) => $align === 'left' ? 'left: 20px; right: auto;' : 'right: 15px; left: auto;'} 
-    border-width: 32px 32px 0 0;
-    border-style: solid;
-    border-color: rgba(27, 20, 100, 0.65) transparent; 
-    display: block;
-    width: 0;
-    height: 0;
-    z-index: 2;
-  }
+    css `
+      position: absolute;
+      left: 50px;
+      right: auto;
+      bottom: 100%;
+      transform: translateY(-${$isMobile ? '10px' : '20px'}); 
+    `}
+
+  &::after {
+    transform: ${({ $align }) => $align === 'left' ? 'skewX(15deg)' : 'skewX(-15deg)'};
+    content: "";
+    position: absolute;
+    top: 100%;
+
+    ${({ $align }) => $align === 'left' ? 'left: 20px; right: auto;' : 'right: 15px; left: auto;'} 
+    border-width: 32px 32px 0 0;
+    border-style: solid;
+    border-color: #FFFFFF transparent; 
+    display: block;
+    width: 0;
+    height: 0;
+    z-index: 1;
+  }
+  
+  &::before {
+    transform: ${({ $align }) => $align === 'left' ? 'skewX(15deg)' : 'skewX(-15deg)'};
+    content: "";
+    position: absolute;
+    top: 100%;
+
+    ${({ $align }) => $align === 'left' ? 'left: 20px; right: auto;' : 'right: 15px; left: auto;'} 
+    border-width: 32px 32px 0 0;
+    border-style: solid;
+    border-color: rgba(27, 20, 100, 0.65) transparent; 
+    display: block;
+    width: 0;
+    height: 0;
+    z-index: 2;
+  }
 `;
 const ToppyHelpCenter = ({ content, deviceType, usePortal = true, align = 'right', initialIsCollapsed, onToppyImageClick }) => {
     const [isCollapsed, setIsCollapsed] = useState(initialIsCollapsed ?? false);

package/lib/components/features/blog/TMBlogCommentForm.js

@@ -89,9 +89,9 @@ const TMBlogCommentForm = (props) => {
                 displayExpr: 'text',
                 valueExpr: 'text',
                 itemTemplate: function (itemData) {
-                    return `<div style="display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%;">
-                            ${itemData.icon}
-                            <span>${itemData.text}</span>
+                    return `<div style="display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%;">
+                            ${itemData.icon}
+                            <span>${itemData.text}</span>
                         </div>`;
                 },
             }];

package/lib/components/features/documents/TMDcmtIcon.js

@@ -7,13 +7,13 @@ import { DownloadTypes } from '../../../ts';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
 import { TMWaitPanel } from '../../base/TMWaitPanel';
-const StyledCellRenderDcmtIcon = styled.div `
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    overflow: visible;
-    position: relative;
+const StyledCellRenderDcmtIcon = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    overflow: visible;
+    position: relative;
 `;
 const TMDcmtIcon = ({ fileExtension, fileCount, isLexProt, isSigned, isMail, isShared, tid, did, downloadMode = "none", tooltipContent, openInOffice, onDownloadDcmtsAsync }) => {
     const { downloadDcmtsAsync, showWaitPanel, waitPanelTitle, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, abortController } = useDcmtOperations();
@@ -56,7 +56,7 @@ const TMDcmtIcon = ({ fileExtension, fileCount, isLexProt, isSigned, isMail, isS
 };
 export default TMDcmtIcon;
 function IconLexProtLock(props) {
-    return (_jsxs("svg", { viewBox: "0 0 512 512", height: "1em", width: "1em", ...props, children: [_jsx("path", { fill: "#455A64", d: "M256,0c-76.544,0.094-138.573,62.122-138.667,138.667V224c0,5.891,4.776,10.667,10.667,10.667h42.667\r\n        c5.891,0,10.667-4.776,10.667-10.667v-85.333C181.333,97.429,214.763,64,256,64s74.667,33.429,74.667,74.667V224\r\n        c0,5.891,4.776,10.667,10.667,10.667H384c5.891,0,10.667-4.776,10.667-10.667v-85.333C394.573,62.122,332.544,0.094,256,0z" }), _jsx("path", { fill: "#FFC107", d: "M128,213.333h256c29.455,0,53.333,23.878,53.333,53.333v192C437.333,488.122,413.455,512,384,512H128\r\n        c-29.455,0-53.333-23.878-53.333-53.333v-192C74.667,237.211,98.545,213.333,128,213.333z" }), _jsx("path", { fill: "#455A64", d: "M309.333,330.667c0.124-29.455-23.653-53.434-53.108-53.558\r\n        c-29.455-0.124-53.434,23.653-53.558,53.108c-0.086,20.36,11.427,38.992,29.674,48.023l-8.235,57.6\r\n        c-0.825,5.833,3.235,11.23,9.068,12.055c0.494,0.07,0.993,0.105,1.492,0.105h42.667c5.891,0.06,10.715-4.667,10.774-10.558\r\n        c0.005-0.543-0.03-1.086-0.108-1.623l-8.235-57.6C297.788,369.199,309.216,350.82,309.333,330.667z" }), _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " })] })
+    return (_jsxs("svg", { viewBox: "0 0 512 512", height: "1em", width: "1em", ...props, children: [_jsx("path", { fill: "#455A64", d: "M256,0c-76.544,0.094-138.573,62.122-138.667,138.667V224c0,5.891,4.776,10.667,10.667,10.667h42.667\n        c5.891,0,10.667-4.776,10.667-10.667v-85.333C181.333,97.429,214.763,64,256,64s74.667,33.429,74.667,74.667V224\n        c0,5.891,4.776,10.667,10.667,10.667H384c5.891,0,10.667-4.776,10.667-10.667v-85.333C394.573,62.122,332.544,0.094,256,0z" }), _jsx("path", { fill: "#FFC107", d: "M128,213.333h256c29.455,0,53.333,23.878,53.333,53.333v192C437.333,488.122,413.455,512,384,512H128\n        c-29.455,0-53.333-23.878-53.333-53.333v-192C74.667,237.211,98.545,213.333,128,213.333z" }), _jsx("path", { fill: "#455A64", d: "M309.333,330.667c0.124-29.455-23.653-53.434-53.108-53.558\n        c-29.455-0.124-53.434,23.653-53.558,53.108c-0.086,20.36,11.427,38.992,29.674,48.023l-8.235,57.6\n        c-0.825,5.833,3.235,11.23,9.068,12.055c0.494,0.07,0.993,0.105,1.492,0.105h42.667c5.891,0.06,10.715-4.667,10.774-10.558\n        c0.005-0.543-0.03-1.086-0.108-1.623l-8.235-57.6C297.788,369.199,309.216,350.82,309.333,330.667z" }), _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " }), " ", _jsx("g", { children: " " })] })
     // <svg
     //     viewBox="0 0 24 24"
     //     fill="currentColor"

package/lib/components/features/documents/TMDcmtPreview.js

@@ -364,29 +364,29 @@ const ImageViewer = ({ fileBlob, alt = 'Image', className }) => {
         if (!doc)
             return;
         doc.open();
-        doc.write(`
-            <html>
-                <head>
-                    <title>Print Image</title>
-                    <style>
-                        body, html {
-                            margin: 0;
-                            padding: 0;
-                            height: 100%;
-                            display: flex;
-                            justify-content: center;
-                            align-items: center;
-                        }
-                        img {
-                            max-width: 100%;
-                            max-height: 100%;
-                        }
-                    </style>
-                </head>
-                <body>
-                    <img src="${dataUrl}" onload="setTimeout(() => { window.print(); window.close(); }, 100);" />
-                </body>
-            </html>
+        doc.write(`
+            <html>
+                <head>
+                    <title>Print Image</title>
+                    <style>
+                        body, html {
+                            margin: 0;
+                            padding: 0;
+                            height: 100%;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                        }
+                        img {
+                            max-width: 100%;
+                            max-height: 100%;
+                        }
+                    </style>
+                </head>
+                <body>
+                    <img src="${dataUrl}" onload="setTimeout(() => { window.print(); window.close(); }, 100);" />
+                </body>
+            </html>
         `);
         doc.close();
         iframe.contentWindow?.addEventListener('afterprint', () => {
@@ -436,11 +436,11 @@ const StyledImage = styled.img.attrs(props => ({
     style: {
         transform: `translate(${props.$tx}px, ${props.$ty}px) scale(${props.$scale}) rotate(${props.$rotate}deg)`,
     },
-})) `
-  display: block;
-  max-width: none;
-  max-height: none;
-  transform-origin: top left;
-  pointer-events: none;
-  position: absolute;
+})) `
+  display: block;
+  max-width: none;
+  max-height: none;
+  transform-origin: top left;
+  pointer-events: none;
+  position: absolute;
 `;