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

package/lib/components/sidebar/TMSidebar.js

@@ -6,31 +6,31 @@ import { ScrollView } from 'devextreme-react';
 import { TMColors } from '../../utils/theme';
 import TMSpinner from '../base/TMSpinner';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
-const StyledTMSidebarContainer = styled.div `
-    top: ${props => props.$top || '53px'};
-    left: ${props => props.$left || '0px'};
-    width: ${props => props.$width || '50px'};
-    height: ${props => props.$height || 'calc(100% - 88px)'};
-    background: ${() => TMColors.primaryColor} 0% 0% no-repeat padding-box;
-    box-shadow: 0px 3px 6px #00000029;
-    border-radius: 0;
-    opacity: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 0px;
-    position: absolute;
-    border-top-right-radius: 10px;
-    border-bottom-right-radius: 10px;
-    overflow: hidden;
+const StyledTMSidebarContainer = styled.div `
+    top: ${props => props.$top || '53px'};
+    left: ${props => props.$left || '0px'};
+    width: ${props => props.$width || '50px'};
+    height: ${props => props.$height || 'calc(100% - 88px)'};
+    background: ${() => TMColors.primaryColor} 0% 0% no-repeat padding-box;
+    box-shadow: 0px 3px 6px #00000029;
+    border-radius: 0;
+    opacity: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 0px;
+    position: absolute;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+    overflow: hidden;
 `;
-const FixedBottomContainer = styled.div `
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
-    bottom: 10px;
+const FixedBottomContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    bottom: 10px;
 `;
 const TMSidebar = ({ items, height, borderRightRadius, left, top, width }) => {
     const [canArchive, setCanArhive] = useState(false);

package/lib/components/sidebar/TMSidebarItem.js

@@ -10,27 +10,27 @@ var ApplicationThemeColor;
     // DESIGNER = '#6b173e'
     ApplicationThemeColor["DESIGNER"] = "#482234";
 })(ApplicationThemeColor || (ApplicationThemeColor = {}));
-const StyledTMSidebarItemContainer = styled.div `
-    margin-bottom: 10px;
-    background-color: transparent;
-    padding: 5px 0 0 5px;
-    transition: all 200ms ease;
-    user-select: none;
-    cursor: pointer;
-    color:  ${(props) => props.$isSelected ? TMColors.primaryColor : '#fff'};
-    background-color: ${props => props.$isSelected ? 'white' : 'transparent'} ;
-    border-radius: 3px;
-    width: 32px;
-    height: 32px;
-
-    p {
-        display: none;
-    }
-
-    &:hover {
-        background-color: ${props => !props.$isApp && 'white'};
-        color: ${props => !props.$isApp && TMColors.primaryColor};
-    }
+const StyledTMSidebarItemContainer = styled.div `
+    margin-bottom: 10px;
+    background-color: transparent;
+    padding: 5px 0 0 5px;
+    transition: all 200ms ease;
+    user-select: none;
+    cursor: pointer;
+    color:  ${(props) => props.$isSelected ? TMColors.primaryColor : '#fff'};
+    background-color: ${props => props.$isSelected ? 'white' : 'transparent'} ;
+    border-radius: 3px;
+    width: 32px;
+    height: 32px;
+
+    p {
+        display: none;
+    }
+
+    &:hover {
+        background-color: ${props => !props.$isApp && 'white'};
+        color: ${props => !props.$isApp && TMColors.primaryColor};
+    }
 `;
 const TMSidebarItem = (props) => {
     let app = SDK_Globals.appModule;

package/lib/components/viewers/TMDataListItemViewer.d.ts

@@ -1,5 +1,5 @@
 import { DataListViewModes } from '@topconsultnpm/sdk-ts';
-import { DataGridTypes } from 'devextreme-react/cjs/data-grid';
+import { DataGridTypes } from 'devextreme-react/data-grid';
 interface ITMDataListItemViewerProps {
     dataListId?: number;
     value?: string | Date | number;

package/lib/components/viewers/TMMidViewer.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ITopMediaSession, LayoutModes, MetadataDescriptor } from '@topconsultnpm/sdk-ts';
 import { TID_MID } from '../../ts';
-import { DataGridTypes } from 'devextreme-react/cjs/data-grid';
+import { DataGridTypes } from 'devextreme-react/data-grid';
 export interface ITMMidViewerProps {
     tmSession?: ITopMediaSession;
     tid_mid: TID_MID | undefined;

package/lib/components/viewers/TMTidViewer.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DcmtTypeDescriptor, ITopMediaSession } from '@topconsultnpm/sdk-ts';
-import { DataGridTypes } from 'devextreme-react/cjs/data-grid';
+import { DataGridTypes } from 'devextreme-react/data-grid';
 export declare enum ImageIDList {
     arrow_001 = "arrow_001",
     arrow_002 = "arrow_002",

package/lib/components/wizard/TMStepIndicator.js

@@ -9,130 +9,130 @@ const COLOR_ERROR = '#d32f2f'; // Rosso per l'errore
 const RHOMBUS_SIZE = 35;
 const LINE_HEIGHT = 3;
 // Contenitore principale, centrato orizzontalmente
-const IndicatorContainer = styled.div `
-    display: flex;
-    flex-direction: column;
-    align-items: center; 
-    padding: 20px 0 20px 0;
-    width: 100%;
-    flex-shrink: 0;
+const IndicatorContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: center; 
+    padding: 20px 0 20px 0;
+    width: 100%;
+    flex-shrink: 0;
 `;
 // Titolo dello step corrente sotto la barra
 // AGGIUNGIAMO STILE PER IL TITOLO CON ERRORE
-const StepTitle = styled.div `
-    font-weight: bold;
-    text-align: center;
-    font-size: 1.3em;
-    padding-top: 15px;
-    
-    // Cambia colore del titolo se lo step corrente ha un errore
-    color: ${props => (props.$isError ? COLOR_ERROR : COLOR_PRIMARY)}; 
-    
-    // Styling per l'icona di errore accanto al titolo (se presente)
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    .error-icon {
-        margin-left: 8px;
-        font-size: 1.1em;
-    }
+const StepTitle = styled.div `
+    font-weight: bold;
+    text-align: center;
+    font-size: 1.3em;
+    padding-top: 15px;
+    
+    // Cambia colore del titolo se lo step corrente ha un errore
+    color: ${props => (props.$isError ? COLOR_ERROR : COLOR_PRIMARY)}; 
+    
+    // Styling per l'icona di errore accanto al titolo (se presente)
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    .error-icon {
+        margin-left: 8px;
+        font-size: 1.1em;
+    }
 `;
-const StepBar = styled.div `
-    display: flex;
-    justify-content: space-between; 
-    align-items: center;
-    width: 80%; 
-    max-width: 600px;
-    position: relative;
-    padding: 0;
+const StepBar = styled.div `
+    display: flex;
+    justify-content: space-between; 
+    align-items: center;
+    width: 80%; 
+    max-width: 600px;
+    position: relative;
+    padding: 0;
 `;
 // Contenitore per le linee (omesso per brevità, rimane invariato)
-const LineContainer = styled.div `
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    height: ${LINE_HEIGHT}px;
-    z-index: 1;
-
-    /* Calcoliamo il padding per escludere metà rombo da ogni lato */
-    left: ${RHOMBUS_SIZE / 2}px;
-    right: ${RHOMBUS_SIZE / 2}px;
-    width: ${props => props.$numSteps > 1 ? `calc(100% - ${RHOMBUS_SIZE}px)` : '0'};
+const LineContainer = styled.div `
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    height: ${LINE_HEIGHT}px;
+    z-index: 1;
+
+    /* Calcoliamo il padding per escludere metà rombo da ogni lato */
+    left: ${RHOMBUS_SIZE / 2}px;
+    right: ${RHOMBUS_SIZE / 2}px;
+    width: ${props => props.$numSteps > 1 ? `calc(100% - ${RHOMBUS_SIZE}px)` : '0'};
 `;
 // Linea di connessione grigia (base) (omesso per brevità, rimane invariato)
-const BaseLine = styled.div `
-    height: 100%;
-    background-color: ${COLOR_SECONDARY};
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
+const BaseLine = styled.div `
+    height: 100%;
+    background-color: ${COLOR_SECONDARY};
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
 `;
 // Linea di avanzamento colorata (progress bar) (omesso per brevità, rimane invariato)
-const ProgressLine = styled.div `
-    height: 100%;
-    background-color: ${COLOR_PRIMARY};
-    width: ${props => props.$widthPercentage}%;
-    transition: width 0.3s ease-in-out;
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 2;
+const ProgressLine = styled.div `
+    height: 100%;
+    background-color: ${COLOR_PRIMARY};
+    width: ${props => props.$widthPercentage}%;
+    transition: width 0.3s ease-in-out;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 2;
 `;
 // Stile per ogni singolo step (elemento flex) (omesso per brevità, rimane invariato)
-const StepItem = styled.div `
-    display: flex;
-    justify-content: center; 
-    align-items: center;
-    position: relative;
-    z-index: 2; 
-    flex-basis: auto; 
+const StepItem = styled.div `
+    display: flex;
+    justify-content: center; 
+    align-items: center;
+    position: relative;
+    z-index: 2; 
+    flex-basis: auto; 
 `;
 // Il Rombo (il contenitore esterno ruotato)
 // AGGIUNGIAMO $isError
-const StepRhombusContainer = styled.div `
-    width: ${RHOMBUS_SIZE}px;
-    height: ${RHOMBUS_SIZE}px;
-    transform: rotate(45deg);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
-    
-    // Gestione colore/bordo in base allo stato di errore
-    background-color: ${props => (props.$isCurrent ? (props.$isError ? COLOR_ERROR : COLOR_PRIMARY) : 'white')};
-    
-    // Bordo in caso di errore (se non completato e non corrente)
+const StepRhombusContainer = styled.div `
+    width: ${RHOMBUS_SIZE}px;
+    height: ${RHOMBUS_SIZE}px;
+    transform: rotate(45deg);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    
+    // Gestione colore/bordo in base allo stato di errore
+    background-color: ${props => (props.$isCurrent ? (props.$isError ? COLOR_ERROR : COLOR_PRIMARY) : 'white')};
+    
+    // Bordo in caso di errore (se non completato e non corrente)
     border: 2px solid ${props => (props.$isCurrent ? 'transparent' :
     props.$isError ? COLOR_ERROR :
-        props.$isCompleted ? COLOR_PRIMARY : COLOR_SECONDARY)};
-    
-    box-shadow: ${props => (props.$isCompleted && !props.$isCurrent ? `0 0 0 1px ${COLOR_PRIMARY}` : 'none')};
-    
-    ${props => props.$isCurrent && `
-        border: none; 
-        box-shadow: 0 0 0 1px ${props.$isError ? COLOR_ERROR : COLOR_PRIMARY};
-    `}
+        props.$isCompleted ? COLOR_PRIMARY : COLOR_SECONDARY)};
+    
+    box-shadow: ${props => (props.$isCompleted && !props.$isCurrent ? `0 0 0 1px ${COLOR_PRIMARY}` : 'none')};
+    
+    ${props => props.$isCurrent && `
+        border: none; 
+        box-shadow: 0 0 0 1px ${props.$isError ? COLOR_ERROR : COLOR_PRIMARY};
+    `}
 `;
 // Contenuto interno ruotato
 // AGGIUNGIAMO $isError
-const StepContent = styled.div `
-    transform: rotate(-45deg); 
-    font-weight: bold;
-    font-size: 1em;
-    display: flex;
-    align-items: center;
-    
-    // Colore del testo/icona
+const StepContent = styled.div `
+    transform: rotate(-45deg); 
+    font-weight: bold;
+    font-size: 1em;
+    display: flex;
+    align-items: center;
+    
+    // Colore del testo/icona
     color: ${props => (props.$isCurrent ? 'white' :
     props.$isError ? COLOR_ERROR :
-        props.$isCompleted ? COLOR_PRIMARY : COLOR_SECONDARY)};
-    
-    /* Regola la dimensione dell'icona Check per lo step completato */
-    .MuiSvgIcon-root {
-        font-size: 18px; 
-    }
+        props.$isCompleted ? COLOR_PRIMARY : COLOR_SECONDARY)};
+    
+    /* Regola la dimensione dell'icona Check per lo step completato */
+    .MuiSvgIcon-root {
+        font-size: 18px; 
+    }
 `;
 const StepIndicator = ({ steps, currentStepIndex, stepValidityStatuses }) => {
     const numberOfSections = steps.length - 1;

package/lib/components/wizard/TMWizard.js

@@ -5,40 +5,40 @@ import styled from 'styled-components';
 import { ResultTypes } from '@topconsultnpm/sdk-ts';
 import TMButton from '../base/TMButton';
 import StepIndicator from './TMStepIndicator';
-const WizardContainer = styled.div `
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background-color: white; 
-    padding: 8px;
+const WizardContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: white; 
+    padding: 8px;
 `;
-const WizardHeader = styled.div `
-    flex-shrink: 0;
-    padding: 0 20px 20px 20px;
+const WizardHeader = styled.div `
+    flex-shrink: 0;
+    padding: 0 20px 20px 20px;
 `;
-const WizardTitle = styled.h2 `
-    font-size: 1.3em;
-    font-weight: bold;
-    margin: 0;
-    color: #333;
+const WizardTitle = styled.h2 `
+    font-size: 1.3em;
+    font-weight: bold;
+    margin: 0;
+    color: #333;
 `;
-const WizardDescription = styled.p `
-    font-size: 1em; 
-    margin-top: 5px;
-    color: #666; 
+const WizardDescription = styled.p `
+    font-size: 1em; 
+    margin-top: 5px;
+    color: #666; 
 `;
-const StepContent = styled.div `
-    flex-grow: 1; 
-    overflow-y: auto;
-    padding: 20px;
+const StepContent = styled.div `
+    flex-grow: 1; 
+    overflow-y: auto;
+    padding: 20px;
 `;
-const ControlsContainer = styled.div `
-    flex-shrink: 0;
-    display: flex;
-    justify-content: flex-end;
-    gap: 15px;
-    padding: 15px 20px;
-    border-top: 1px solid #eee; 
+const ControlsContainer = styled.div `
+    flex-shrink: 0;
+    display: flex;
+    justify-content: flex-end;
+    gap: 15px;
+    padding: 15px 20px;
+    border-top: 1px solid #eee; 
 `;
 const TMWizard = ({ steps, validateOnlyCurrentStep = true, onClose, onFinish, initialData, title, description }) => {
     const [currentStep, setCurrentStep] = useState(0);

package/lib/helper/GlobalStyles.d.ts

@@ -0,0 +1,2 @@
+declare const GlobalStyle: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;
+export default GlobalStyle;

package/lib/helper/GlobalStyles.js

@@ -0,0 +1,10 @@
+import { createGlobalStyle } from 'styled-components';
+const GlobalStyle = createGlobalStyle `
+  html,
+  body,
+  #root,
+  * {
+    font-family: var(--base-font-family, "Inter"), sans-serif;
+  }
+`;
+export default GlobalStyle;

package/lib/helper/Globalization.d.ts

@@ -6,6 +6,7 @@ export declare enum DateDisplayTypes {
 }
 export declare class Globalization {
     static getDateTimeDisplayValue(value: Date | string | undefined, displayType?: DateDisplayTypes, metadataFormat?: MetadataFormats): string;
+    static getDateTimeDisplayValueCompact(value: Date | string | undefined, displayType?: DateDisplayTypes, metadataFormat?: MetadataFormats): string;
     static getDateDisplayFormat(displayType?: DateDisplayTypes): string;
     static getNumberDisplayValue(value: Number, withThousandsSeparator?: boolean, numberDisplayFormat?: string): string;
     static metadataFormatToDateDisplayFormat(format: MetadataFormats): "" | "MM/dd/yyyy" | "dd/MM/yyyy" | "EEEE dd MMMM yyyy" | "HH:mm" | "HH:mm:ss" | "MM/dd/yyyy HH:mm:ss" | "dd/MM/yyyy HH:mm:ss" | "MM/dd/yyyy HH:mm" | "dd/MM/yyyy HH:mm" | "EEEE dd MMMM yyyy HH:mm" | "EEEE dd MMMM yyyy HH:mm:ss";

package/lib/helper/Globalization.js

@@ -29,6 +29,36 @@ export class Globalization {
         dateTime = dateTime.replace("ss", dt.getSeconds().toString().padStart(2, '0'));
         return dateTime;
     }
+    static getDateTimeDisplayValueCompact(value, displayType, metadataFormat) {
+        if (!value)
+            return "";
+        let dt = typeof value === "string" ? new Date(value) : value;
+        let dateDisplayFormat = metadataFormat ? this.metadataFormatToDateDisplayFormat(metadataFormat) : this.getDateDisplayFormat(displayType);
+        let dateTime = dateDisplayFormat;
+        dateTime = dateTime.replace("EEEE", dt.toLocaleString(navigator.language, { weekday: "long" }));
+        dateTime = dateTime.replace("dd", dt.toLocaleString(navigator.language, { day: "2-digit" }));
+        dateTime = dateTime.replace("MMMM", dt.toLocaleString(navigator.language, { month: "long" }));
+        dateTime = dateTime.replace("MM", dt.toLocaleString(navigator.language, { month: "2-digit" }));
+        dateTime = dateTime.replace("yyyy", dt.toLocaleString(navigator.language, { year: "numeric" }));
+        // gestione ore, minuti e secondi
+        const hh = dt.getHours().toString().padStart(2, '0');
+        const mm = dt.getMinutes().toString().padStart(2, '0');
+        const ss = dt.getSeconds().toString().padStart(2, '0');
+        if (hh === '00' && mm === '00' && ss === '00') {
+            // nessun tempo
+            dateTime = dateTime.replace(/HH:mm:ss/, '').trim();
+        }
+        else if (ss === '00') {
+            // togli solo i secondi
+            dateTime = dateTime.replace(/ss/, '').replace(/:$/, '');
+            dateTime = dateTime.replace("HH", hh).replace("mm", mm);
+        }
+        else {
+            // mantieni tutto
+            dateTime = dateTime.replace("HH", hh).replace("mm", mm).replace("ss", ss);
+        }
+        return dateTime;
+    }
     static getDateDisplayFormat(displayType = DateDisplayTypes.DateTime) {
         let timeFormat = "HH:mm:ss";
         if (displayType == DateDisplayTypes.Time)

package/lib/helper/SDKUI_Globals.d.ts

@@ -17,6 +17,7 @@ export declare class UserSettings {
     themeSettings: ThemeSettings;
     dcmtFormSettings: DcmtFormSettings[];
     wgDraftCheckoutInfo: WgDraftCheckoutInfo[];
+    dcmtCheckoutInfo: DcmtCheckoutInfo[];
     defaultCheckInOutFolder: string;
     constructor(skipCssUpdate?: boolean);
     /** Load settings from local storage or other sources */
@@ -32,6 +33,7 @@ export declare class DataGridSettings {
 }
 export declare class ThemeSettings {
     fontSize: string;
+    fontFamily: string;
     gridSettings: DataGridSettings;
     constructor(skipCssUpdate?: boolean);
     /**
@@ -40,6 +42,7 @@ export declare class ThemeSettings {
      */
     toJSON(): {
         fontSize: string;
+        fontFamily: string;
         gridSettings: DataGridSettings;
     };
 }
@@ -89,6 +92,12 @@ export interface WgDraftCheckoutInfo {
     checkoutFolder: string;
     checkoutName: string;
 }
+export interface DcmtCheckoutInfo {
+    DID: string;
+    TID: string;
+    checkoutFolder: string;
+    checkoutName: string;
+}
 export declare class SDKUI_Globals {
     static userSettings: UserSettings;
 }

package/lib/helper/SDKUI_Globals.js

@@ -20,6 +20,7 @@ export class UserSettings {
         this.themeSettings = new ThemeSettings(true);
         this.dcmtFormSettings = [];
         this.wgDraftCheckoutInfo = [];
+        this.dcmtCheckoutInfo = [];
         this.defaultCheckInOutFolder = DEFAULT_CHECK_IN_OUT_FOLDER;
         this.themeSettings = new ThemeSettings(skipCssUpdate);
     }
@@ -36,8 +37,9 @@ export class UserSettings {
         // Ensure userID and archiveID are set
         settings.userID = userID;
         settings.archiveID = archiveID;
-        // Update the CSS variable for font size
+        // Update the CSS variables for font size and font family
         document.documentElement.style.setProperty('--base-font-size', settings.themeSettings.fontSize);
+        document.documentElement.style.setProperty('--base-font-family', settings.themeSettings.fontFamily);
         // Wrap the settings object in a Proxy to intercept property updates
         const proxiedSettings = createProxy(settings, UserSettings.SaveSettings);
         // Automatically set the global userSettings
@@ -68,10 +70,12 @@ export class DataGridSettings {
 export class ThemeSettings {
     constructor(skipCssUpdate = false) {
         this.fontSize = FontSize.defaultFontSizeInPixel;
+        this.fontFamily = 'Inter';
         this.gridSettings = new DataGridSettings();
         // Automatically update the CSS variable for font size
         if (!skipCssUpdate) {
             document.documentElement.style.setProperty('--base-font-size', this.fontSize);
+            document.documentElement.style.setProperty('--base-font-family', this.fontFamily);
         }
     }
     /**
@@ -81,6 +85,7 @@ export class ThemeSettings {
     toJSON() {
         return {
             fontSize: this.fontSize,
+            fontFamily: this.fontFamily,
             gridSettings: this.gridSettings,
         };
     }
@@ -148,6 +153,10 @@ function createProxy(obj, saveCallback, rootObj) {
             if (prop === 'fontSize' && root instanceof UserSettings) {
                 document.documentElement.style.setProperty('--base-font-size', value);
             }
+            // Handle specific property (fontFamily) updates
+            if (prop === 'fontFamily' && root instanceof UserSettings) {
+                document.documentElement.style.setProperty('--base-font-family', value);
+            }
             // Handle specific property (invoiceRetrieveFormat, orderRetrieveFormat) updates
             if ((prop === 'invoiceRetrieveFormat' || prop === 'orderRetrieveFormat') && root instanceof UserSettings) {
                 clearDcmtsFileCache();