@topconsultnpm/sdkui-react 6.20.0-dev2.9 → 6.20.0-dev3.1

package/lib/components/choosers/TMDataListItemPicker.js

@@ -1,8 +1,12 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import styled, { keyframes } from 'styled-components';
-import { DataListCacheService, SDK_Localizator } from '@topconsultnpm/sdk-ts';
-import { SDKUI_Localizator, TMImageLibrary } from '../../helper';
+import { DataListCacheService, SDK_Localizator, ObjectClasses, JobTypes } from '@topconsultnpm/sdk-ts';
+import { IconDelete, SDKUI_Localizator, TMImageLibrary } from '../../helper';
+import { PlatformObjectService } from '../../services/platform_services';
+import TMDataListItemEditor from './TMDataListItemEditor';
+import { ButtonNames, TMMessageBoxManager } from '../base/TMPopUp';
+import TMSpinner from '../base/TMSpinner';
 const PickerContainer = styled.div `
   display: flex;
   flex-direction: column;
@@ -30,6 +34,11 @@ const slideIn = keyframes `
     transform: translateX(0);
   }
 `;
+const ItemWrapper = styled.div `
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+`;
 const StatusItem = styled.div `
   display: flex;
   flex-direction: column;
@@ -58,39 +67,190 @@ const StatusItem = styled.div `
     background-color: #e6f2ff;
   `}
 `;
+const DeleteButton = styled.button `
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #dc3545;
+  color: white;
+  border: 2px solid white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: bold;
+  opacity: 0;
+  transition: all 0.2s ease-in-out;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  z-index: 10;
+
+  ${ItemWrapper}:hover & {
+    opacity: 1;
+  }
+
+  &:hover {
+    background-color: #c82333;
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+const AddButton = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  text-align: center;
+  font-size: 0.8em;
+  padding: 5px 10px;
+  border-radius: 8px;
+  border: 2px dashed #007bff;
+  background-color: #f8f9fa;
+  transition: all 0.2s ease-in-out;
+  flex-shrink: 0;
+  min-width: 80px;
+  color: #007bff;
+  font-weight: 500;
+
+  &:hover {
+    background-color: #e6f2ff;
+    border-color: #0056b3;
+  }
+`;
 const Label = styled.div `
   font-weight: bold;
   margin-bottom: 5px;
 `;
-const TMDataListItemPicker = ({ dataListID, selectedValue, onItemSelect }) => {
+const TMDataListItemPicker = ({ dataListID, selectedValue, onItemSelect, allowEdit = false }) => {
     const [dataList, setDataList] = useState(undefined);
+    const [items, setItems] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(undefined);
-    useEffect(() => {
-        if (dataListID) {
-            setLoading(true);
+    const [showEditDialog, setShowEditDialog] = useState(false);
+    const [editingItem, setEditingItem] = useState(undefined);
+    const [isCreating, setIsCreating] = useState(false);
+    const loadDataList = async (showLoading = true) => {
+        if (!dataListID)
+            return;
+        try {
+            if (showLoading)
+                setLoading(true);
             setError(undefined);
-            DataListCacheService.GetAsync(dataListID)
-                .then(dl => {
-                setDataList(dl);
-                setLoading(false);
-            })
-                .catch(err => {
-                console.error("Failed to fetch data list:", err);
-                setError("Failed to load statuses.");
+            const dl = await PlatformObjectService.retrieveAdminAsync(ObjectClasses.DataList, JobTypes.None, dataListID);
+            setDataList(dl);
+            setItems(dl?.items ?? []);
+        }
+        catch (err) {
+            console.error("Failed to fetch data list:", err);
+            setError("Failed to load data list.");
+        }
+        finally {
+            if (showLoading)
                 setLoading(false);
-            });
         }
+    };
+    useEffect(() => {
+        loadDataList(true);
     }, [dataListID]);
+    const handleCreateNew = () => {
+        setIsCreating(true);
+        setEditingItem(undefined);
+        setShowEditDialog(true);
+    };
+    const handleEdit = (item) => {
+        setIsCreating(false);
+        setEditingItem(item);
+        setShowEditDialog(true);
+    };
+    const handleSave = async (newItem) => {
+        if (!dataList || !dataListID)
+            return;
+        try {
+            let updatedItems;
+            TMSpinner.show({ description: 'Salvataggio in corso...' });
+            if (isCreating) {
+                // Aggiungi nuovo item
+                updatedItems = [...items, newItem];
+            }
+            else if (editingItem) {
+                // Modifica item esistente
+                updatedItems = items.map(item => item.value === editingItem.value ? newItem : item);
+            }
+            else {
+                return;
+            }
+            // Modifica direttamente la dataList invece di usare spread operator
+            dataList.items = updatedItems;
+            // Salva sul server usando l'API corretta
+            await PlatformObjectService.updateAsync(ObjectClasses.DataList, JobTypes.None, dataList);
+            // Invalida la cache per garantire la sincronizzazione
+            DataListCacheService.Remove();
+            // Ricarica i dati dalla cache (che richiamerà il server)
+            await loadDataList(false);
+            handleCloseDialog();
+        }
+        catch (error) {
+            console.error('Failed to save DataList item:', error);
+            setError('Failed to save changes.');
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    };
+    const handleCloseDialog = () => {
+        setShowEditDialog(false);
+        setEditingItem(undefined);
+        setIsCreating(false);
+    };
+    const handleDelete = async (item, event) => {
+        event.stopPropagation(); // Previeni la selezione dell'item quando si clicca delete
+        const confirmMessage = SDKUI_Localizator.Delete_ConfirmFor1.replaceParams(item.name);
+        TMMessageBoxManager.show({
+            title: SDKUI_Localizator.Delete, message: confirmMessage, buttons: [ButtonNames.YES, ButtonNames.NO],
+            onButtonClick: async (e) => {
+                if (e !== ButtonNames.YES)
+                    return;
+                if (!dataList || !dataListID)
+                    return;
+                try {
+                    TMSpinner.show({ description: 'Eliminazione in corso...' });
+                    // Rimuovi l'item dalla lista
+                    const updatedItems = items.filter(i => i.value !== item.value);
+                    // Modifica direttamente la dataList
+                    dataList.items = updatedItems;
+                    // Salva sul server usando l'API corretta
+                    await PlatformObjectService.updateAsync(ObjectClasses.DataList, JobTypes.None, dataList);
+                    // Invalida la cache per garantire la sincronizzazione
+                    DataListCacheService.Remove();
+                    // Ricarica i dati dalla cache (che richiamerà il server)
+                    await loadDataList(false);
+                }
+                catch (error) {
+                    console.error('Failed to delete DataList item:', error);
+                    setError('Failed to delete item.');
+                }
+                finally {
+                    TMSpinner.hide();
+                }
+            }
+        });
+    };
     if (loading) {
         return _jsxs("p", { children: [SDKUI_Localizator.Loading, "..."] });
     }
     if (error) {
         return _jsx("p", { children: error });
     }
-    if (!dataList || !dataList.items || dataList.items.length === 0) {
-        return _jsx("p", { children: SDKUI_Localizator.NoDataToDisplay });
+    if (!dataList || !items || items.length === 0) {
+        return (_jsxs(PickerContainer, { children: [_jsx(Label, { children: dataList ? `${SDK_Localizator.DataList}: ${dataList.name}` : SDKUI_Localizator.NoDataToDisplay }), _jsx(ItemsContainer, { children: allowEdit && (_jsxs(AddButton, { onClick: handleCreateNew, children: ["+ ", SDKUI_Localizator.NewMale] })) }), !allowEdit && _jsx("p", { children: SDKUI_Localizator.NoDataToDisplay })] }));
     }
-    return (_jsxs(PickerContainer, { children: [_jsx(Label, { children: `${SDK_Localizator.DataList}: ${dataList.name}` }), _jsx(ItemsContainer, { children: dataList.items.map((item, index) => (_jsxs(StatusItem, { "$isSelected": item.value === selectedValue, "$index": index, onClick: () => onItemSelect(item), children: [item.imageID && _jsx(TMImageLibrary, { imageID: item.imageID }), _jsx("span", { children: item.name })] }, item.value))) })] }));
+    return (_jsxs(PickerContainer, { children: [_jsx(Label, { children: `${SDK_Localizator.DataList}: ${dataList.name}` }), _jsxs(ItemsContainer, { children: [items.map((item, index) => (_jsxs(ItemWrapper, { children: [_jsxs(StatusItem, { "$isSelected": item.value === selectedValue, "$index": index, onClick: () => onItemSelect(item), onDoubleClick: () => allowEdit && handleEdit(item), children: [item.imageID && _jsx(TMImageLibrary, { imageID: item.imageID }), _jsx("span", { children: item.name })] }), allowEdit && (_jsx(DeleteButton, { onClick: (e) => handleDelete(item, e), title: SDKUI_Localizator.Delete || 'Delete', "aria-label": "Delete item", children: _jsx(IconDelete, { fontSize: 16 }) }))] }, item.value))), allowEdit && (_jsxs(AddButton, { onClick: handleCreateNew, children: ["+ ", SDKUI_Localizator.NewMale] }))] }), _jsx(TMDataListItemEditor, { isOpen: showEditDialog, item: editingItem, isCreating: isCreating, onClose: handleCloseDialog, onSave: handleSave })] }));
 };
 export default TMDataListItemPicker;

package/lib/components/choosers/TMImageIDChooser.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ITMChooserProps, ITMChooserFormProps } from '../../ts';
+interface ITMImageIDChooserProps extends ITMChooserProps {
+    /** Contiene i values selezionati -> attualmente sempre e solo 1 elemento */
+    value?: string;
+    readOnly?: boolean;
+}
+declare const TMImageIDChooser: React.FunctionComponent<ITMImageIDChooserProps>;
+export default TMImageIDChooser;
+interface ITMImageIDChooserFormProps extends ITMChooserFormProps<Image_Wrap> {
+}
+declare class Image_Wrap {
+    id: number;
+    imageID?: string;
+}
+export declare const TMImageIDChooserForm: React.FunctionComponent<ITMImageIDChooserFormProps>;

package/lib/components/choosers/TMImageIDChooser.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { TMImageLibrary, IconSearch } from '../../helper';
+import { StyledDivHorizontal } from '../base/Styled';
+import TMSummary from '../editors/TMSummary';
+import TMChooserForm from '../forms/TMChooserForm';
+import { ImageIDList } from '../viewers/TMTidViewer';
+const TMImageIDChooser = ({ backgroundColor, elementStyle, value, isModifiedWhen, placeHolder, validationItems = [], readOnly, onValueChanged }) => {
+    const [showChooser, setShowChooser] = useState(false);
+    const renderTemplate = () => {
+        return (_jsx(StyledDivHorizontal, { style: { minWidth: '125px' }, children: placeHolder && (!value || value == '')
+                ? _jsx("p", { children: placeHolder })
+                : _jsx(TMImageLibrary, { imageID: value }) }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { backgroundColor: backgroundColor, showClearButton: true, iconEditButton: _jsx(IconSearch, {}), onEditorClick: () => setShowChooser(true), onClearClick: () => onValueChanged?.(''), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: "Immagine", hasValue: value != undefined && value?.length > 0, template: renderTemplate(), validationItems: validationItems, 
+                // openEditorOnSummaryClick={!readOnly}
+                readOnly: readOnly, disabled: readOnly }), showChooser &&
+                _jsx(TMImageIDChooserForm, { selectedIDs: [value], onClose: () => setShowChooser(false), onChoose: (img) => { onValueChanged?.(img); } })] }));
+};
+export default TMImageIDChooser;
+class Image_Wrap {
+    constructor() {
+        this.id = 0;
+    }
+}
+export const TMImageIDChooserForm = (props) => {
+    const getItems = async () => {
+        let datasource = [];
+        let i = 0;
+        for (let img of Object.values(ImageIDList))
+            datasource.push({ id: i, imageID: img });
+        return datasource;
+    };
+    const cellRenderImageListItemIcon = (data) => {
+        let imageID = data.row.data;
+        return _jsx(TMImageLibrary, { imageID: imageID.imageID });
+    };
+    const cellRenderName = (data) => {
+        let imageID = data.row.data;
+        return _jsxs("p", { children: [imageID.imageID, " "] });
+    };
+    const dataColumns = useMemo(() => {
+        return [
+            { name: 'icon', dataField: 'imageID', caption: '', width: '40px', allowResizing: false, cellRender: cellRenderImageListItemIcon },
+            { name: 'name', dataField: 'imageID', caption: '', cellRender: cellRenderName }
+        ];
+    }, []);
+    return (_jsx(TMChooserForm, { title: "Immagini", hasShowId: false, allowMultipleSelection: false, height: props.height, width: '200px', showDefaultColumns: false, keyName: 'imageID', columns: dataColumns, selectedIDs: props.selectedIDs, dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => {
+            if (IDs && IDs.length > 0) {
+                props.onChoose?.(IDs[0]);
+            }
+        } }));
+};

package/lib/components/choosers/TMMetadataChooser.js

@@ -21,7 +21,7 @@ const TMMetadataChooser = ({ tmSession, dataSource, showEditButton = true, butto
         return undefined;
     };
     const renderTemplate = useMemo(() => {
-        return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && values.length > 0 && values[0].mid && values[0].mid > 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 0 && values[0].mid && values[0].mid < 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], inputMd: getinputMd(), showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` }), (values == undefined || values.length == 0) && _jsx("p", { children: placeHolder })] }));
+        return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && values.length > 0 && values[0].mid && values[0].mid > 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 0 && values[0].mid && values[0].mid < 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], inputMd: getinputMd(), showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` }), (values == undefined || values.length == 0) && _jsx("p", { children: placeHolder ?? SDKUI_Localizator.SelectMetadata })] }));
     }, [values, tmSession, showId, showCompleteMetadataName, placeHolder]);
     return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { label: label, width: width, height: height, disabled: disabled, validationItems: validationItems, backgroundColor: backgroundColor, buttons: buttons, placeHolder: placeHolder, fontSize: fontSize, showBorder: showBorder, borderRadius: borderRadius, hasValue: values && values.length > 0, showClearButton: showClearButton, showEditButton: showEditButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), openEditorOnSummaryClick: openEditorOnSummaryClick, onEditorClick: () => {
                     if (!disabled) {

package/lib/components/editors/TMDateBox.js

@@ -63,7 +63,7 @@ const TMDateBox = (props) => {
             return "datetime";
         return props.dateDisplayType == DateDisplayTypes.Date ? "date" : "time";
     };
-    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', padding: props.padding }, children: [props.icon && (_jsx("span", { style: { marginRight: '8px', marginTop: '8px', display: 'flex', alignItems: 'center' }, children: props.icon })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '5px', width: '100%' }, children: [_jsx(DateBox, { readOnly: props.readOnly, ref: dateBoxRef, showClearButton: props.showClearButton, dateSerializationFormat: props.useDateSerializationFormat ? 'yyyy-MM-ddTHH:mm:ss' : undefined, disabled: props.disabled, displayFormat: props.displayFormat ?? Globalization.getDateDisplayFormat(props.dateDisplayType), dropDownOptions: dropDownOptions, label: props.label, labelMode: 'static', type: getType(), useMaskBehavior: true, height: '28px', value: props.value, width: props.width, valueChangeEvent: 'keyup input change', onValueChange: (e) => { props.onValueChange?.(e); }, onInitialized: (e) => { props.onInitialized?.(e); }, onContentReady: (e) => { props.onContentReady?.(e); }, placeholder: props.placeholder, onKeyUp: (e) => {
+    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', padding: props.padding }, children: [props.icon && (_jsx("span", { style: { marginRight: '8px', marginTop: '8px', display: 'flex', alignItems: 'center' }, children: props.icon })), _jsxs("div", { onContextMenu: (e) => e.stopPropagation(), style: { display: 'flex', flexDirection: 'column', gap: '5px', width: '100%' }, children: [_jsx(DateBox, { readOnly: props.readOnly, ref: dateBoxRef, showClearButton: props.showClearButton, dateSerializationFormat: props.useDateSerializationFormat ? 'yyyy-MM-ddTHH:mm:ss' : undefined, disabled: props.disabled, displayFormat: props.displayFormat ?? Globalization.getDateDisplayFormat(props.dateDisplayType), dropDownOptions: dropDownOptions, label: props.label, labelMode: 'static', type: getType(), useMaskBehavior: true, height: '28px', value: props.value, width: props.width, valueChangeEvent: 'keyup input change', onValueChange: (e) => { props.onValueChange?.(e); }, onInitialized: (e) => { props.onInitialized?.(e); }, onContentReady: (e) => { props.onContentReady?.(e); }, placeholder: props.placeholder, onKeyUp: (e) => {
                             if (e.event?.code == "Space") {
                                 const currentDate = new Date();
                                 currentDate.setHours(0, 0, 0, 0);

package/lib/components/editors/TMHtmlEditor.js

@@ -158,7 +158,7 @@ const TMHtmlEditor = (props) => {
                     borderStyle: 'solid',
                     borderColor: hasValidationErrors ? "red" : "#e0e0e0 #e0e0e0 #616161",
                     width: "100%",
-                    height: `calc(100% - ${showCount ? 15 : 0}px - ${validationItems.length > 0 ? 15 : 0}px)`,
+                    height: `calc(100% - ${showCount ? 15 : 0}px - ${validationItems.length > 0 ? 25 : 0}px)`,
                 }, children: _jsx(HtmlEditor, { ref: editorRef, placeholder: SDKUI_Localizator.TypeAMessage + "...", width: "100%", height: "100%", value: markup, onValueChange: onValueChangeCallback, mentions: mentionsConfig, style: { overflow: 'hidden', outline: "none", fontSize: '1rem' }, children: isEditorEnabled && (toolbarMode === 'compact' ?
                         _jsxs(Toolbar, { multiline: false, children: [_jsx(Item, { name: "undo" }), _jsx(Item, { name: "redo" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "bold" }), _jsx(Item, { name: "italic" }), _jsx(Item, { name: "strike" }), _jsx(Item, { name: "underline" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "orderedList" }), _jsx(Item, { name: "bulletList" })] }) :
                         _jsxs(Toolbar, { children: [_jsx(Item, { name: "undo" }), _jsx(Item, { name: "redo" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "bold" }), _jsx(Item, { name: "italic" }), _jsx(Item, { name: "strike" }), _jsx(Item, { name: "underline" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "alignLeft" }), _jsx(Item, { name: "alignCenter" }), _jsx(Item, { name: "alignRight" }), _jsx(Item, { name: "alignJustify" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "color" }), _jsx(Item, { name: "background" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "link" }), _jsx(Item, { name: "image" }), _jsx(Item, { name: "separator" })] })) }) }), showCount ? ((() => {

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

@@ -15,6 +15,7 @@ interface TMLocalizedTextBoxProps {
     validationItems?: ValidationItem[];
     qd?: QueryDescriptor;
     tid?: number;
+    readOnly?: boolean;
     onValueChanged: (lang: CultureIDs, value: string) => void;
 }
 declare const TMLocalizedTextBox: React.FC<TMLocalizedTextBoxProps>;

package/lib/components/editors/TMLocalizedTextBox.js

@@ -40,7 +40,7 @@ const Popover = styled.div `
   border-radius: 4px;
   background-color: #fff;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  z-index: 1502;
+  z-index: 2000000001;
   padding: 8px;
 `;
 const Badge = styled.span `
@@ -71,7 +71,7 @@ export const getCultureIDImg = (cultureID) => {
         default: return it;
     }
 };
-const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_PT, value_ES, value_DE, isModifiedWhen, validationItems, qd, tid, onValueChanged, }) => {
+const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_PT, value_ES, value_DE, isModifiedWhen, validationItems, qd, tid, readOnly, onValueChanged, }) => {
     const [isPopoverVisible, setIsPopoverVisible] = useState(false);
     const containerRef = useRef(null);
     const popoverRef = useRef(null);
@@ -122,6 +122,6 @@ const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_
         icon: (_jsxs(IconContainer, { children: [_jsx(IconLanguage, {}), localizedCount > 0 && _jsx(Badge, { children: localizedCount })] })),
         onClick: handleTogglePopover,
     };
-    return (_jsxs(LocalizedContainer, { ref: containerRef, children: [(qd || tid) ? (_jsx(TMMetadataTextBox, { type: "text", label: label, value: value, isModifiedWhen: isModifiedWhen, buttons: [localizationButton], validationItems: validationItems, qd: qd, tid: tid, onValueChanged: (e) => onValueChanged(CultureIDs.None, e.target.value) })) : (_jsx(TMTextBox, { type: "text", label: label, value: value, isModifiedWhen: isModifiedWhen, buttons: [localizationButton], validationItems: validationItems, onValueChanged: (e) => onValueChanged(CultureIDs.None, e.target.value) })), isPopoverVisible && (_jsx(Portal, { popoverRef: popoverRef, children: _jsx(Popover, { ref: popoverRef, "$isVisible": isPopoverVisible, "$top": popoverPosition.top, "$left": popoverPosition.left, "$width": popoverPosition.width, onMouseDown: (e) => e.stopPropagation(), children: languages.map((lang) => ((qd || tid) ? (_jsx(TMMetadataTextBox, { label: `${lang.label}`, showClearButton: true, icon: _jsx("img", { src: getCultureIDImg(lang.code), alt: "Lang", width: 18, height: 18 }), value: lang.value || '', qd: qd, tid: tid, onValueChanged: (e) => onValueChanged(lang.code, e.target.value) }, lang.code)) : (_jsx(TMTextBox, { label: `${lang.label}`, showClearButton: true, icon: _jsx("img", { src: getCultureIDImg(lang.code), alt: "Lang", width: 18, height: 18 }), value: lang.value || '', onValueChanged: (e) => onValueChanged(lang.code, e.target.value) }, lang.code)))) }) }))] }));
+    return (_jsxs(LocalizedContainer, { ref: containerRef, children: [(qd || tid) ? (_jsx(TMMetadataTextBox, { type: "text", label: label, value: value, isModifiedWhen: isModifiedWhen, buttons: [localizationButton], validationItems: validationItems, qd: qd, tid: tid, readOnly: readOnly, onValueChanged: (e) => onValueChanged(CultureIDs.None, e.target.value) })) : (_jsx(TMTextBox, { type: "text", label: label, value: value, isModifiedWhen: isModifiedWhen, buttons: [localizationButton], validationItems: validationItems, readOnly: readOnly, onValueChanged: (e) => onValueChanged(CultureIDs.None, e.target.value) })), isPopoverVisible && (_jsx(Portal, { popoverRef: popoverRef, children: _jsx(Popover, { ref: popoverRef, "$isVisible": isPopoverVisible, "$top": popoverPosition.top, "$left": popoverPosition.left, "$width": popoverPosition.width, onMouseDown: (e) => e.stopPropagation(), children: languages.map((lang) => ((qd || tid) ? (_jsx(TMMetadataTextBox, { label: `${lang.label}`, showClearButton: true, icon: _jsx("img", { src: getCultureIDImg(lang.code), alt: "Lang", width: 18, height: 18 }), value: lang.value || '', qd: qd, tid: tid, readOnly: readOnly, onValueChanged: (e) => onValueChanged(lang.code, e.target.value) }, lang.code)) : (_jsx(TMTextBox, { label: `${lang.label}`, showClearButton: true, icon: _jsx("img", { src: getCultureIDImg(lang.code), alt: "Lang", width: 18, height: 18 }), value: lang.value || '', readOnly: readOnly, onValueChanged: (e) => onValueChanged(lang.code, e.target.value) }, lang.code)))) }) }))] }));
 };
 export default TMLocalizedTextBox;

package/lib/components/editors/TMTextBox.js

@@ -81,15 +81,14 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
     }, [maxValue, minValue, currentValue, currentType]);
     // Handle autofocus behavior on mount
     useEffect(() => {
-        if (autoFocus && inputRef.current) {
-            if (fromModal) // utilizzato per i textBox derivanti da una Modal che non riescono a utilizzare l'autofocus
-                setTimeout(() => {
-                    inputRef.current && inputRef.current.focus(); // Focus the input field
-                }, 100);
-            else
-                inputRef.current.focus(); // Focus the input field
-        }
-    }, [autoFocus]); // This effect runs when the autoFocus prop changes
+        if (!autoFocus || !inputRef.current)
+            return;
+        const delay = fromModal ? 100 : 50;
+        const timeoutId = setTimeout(() => {
+            inputRef.current?.focus();
+        }, delay);
+        return () => clearTimeout(timeoutId);
+    }, [autoFocus, fromModal]); // This effect runs when the autoFocus or fromModal prop changes
     useEffect(() => {
         if (formulaItems && formulaItems.length > 0) {
             let menuItems = [];
@@ -278,7 +277,7 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
                 return 6 + (buttonCount * buttonWidth) + 8;
             }
         };
-        return (_jsxs("div", { style: { width: '100%', height: 'fit-content' }, id: `text-${id}`, children: [_jsx(StyledEditor, { ref: inputRef, id: `text-${label}-${id}`, name: label, autoFocus: autoFocus, readOnly: readOnly, type: currentType, disabled: disabled, value: displayedValue, width: width || '100%', placeholder: placeHolder, maxLength: maxLength, autoComplete: 'off', spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
+        return (_jsxs("div", { style: { width: '100%', height: 'fit-content' }, id: `text-${id}`, children: [_jsx(StyledEditor, { ref: inputRef, onContextMenu: (e) => e.stopPropagation(), id: `text-${label}-${id}`, name: label, autoFocus: autoFocus, readOnly: readOnly, type: currentType, disabled: disabled, value: displayedValue, width: width || '100%', placeholder: placeHolder, maxLength: maxLength, autoComplete: 'off', spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
                         onBlur?.(currentValue); }, onChange: handleInputChange, onKeyDown: (e) => {
                         if (currentType === 'number') {
                             if (!scale && (e.key == "." || e.key == ","))

package/lib/components/features/archive/TMArchive.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HomeBlogPost, TaskDescriptor } from '@topconsultnpm/sdk-ts';
+import { DcmtTypeDescriptor, HomeBlogPost, TaskDescriptor } from '@topconsultnpm/sdk-ts';
 interface ITMArchiveProps {
     inputFile?: File | null;
     inputMids?: Array<{
@@ -24,6 +24,7 @@ interface ITMArchiveProps {
     editTaskCallback?: (task: TaskDescriptor) => Promise<void>;
     handleNavigateToWGs?: (value: HomeBlogPost | number) => Promise<void>;
     handleNavigateToDossiers?: (value: HomeBlogPost | number) => Promise<void>;
+    openPdfEditor?: (fromDTD?: DcmtTypeDescriptor, file?: File | null, handleFile?: (file: File) => void) => void;
 }
 declare const TMArchive: React.FunctionComponent<ITMArchiveProps>;
 export default TMArchive;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useState } from 'react';
 import Logo from '../../../assets/Toppy-generico.png';
-import { DcmtTypeListCacheService, LayoutModes, SDK_Localizator } from '@topconsultnpm/sdk-ts';
+import { ArchiveConstraints, DcmtTypeListCacheService, LayoutModes, SDK_Localizator } from '@topconsultnpm/sdk-ts';
 import { IconTree, SDKUI_Globals, SDKUI_Localizator, IconRecentlyViewed, IconPreview, IconShow, IconBoard, IconDcmtTypeSys, removeMruTid, getMoreInfoTasksForDocument } from '../../../helper';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
 import TMLayoutContainer from '../../base/TMLayout';
@@ -12,7 +12,7 @@ import TMTreeSelector from '../search/TMTreeSelector';
 import TMPanel from '../../base/TMPanel';
 import { TMPanelManagerProvider, useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
 import TMPanelManagerContainer from '../../layout/panelManager/TMPanelManagerContainer';
-const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, connectorFileSave = undefined, onSavedAsyncCallback, inputMids = [], enableDragDropOverlay = false, passToSearch, isSharedArchive = false, inputDID = undefined, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers }) => {
+const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, connectorFileSave = undefined, onSavedAsyncCallback, inputMids = [], enableDragDropOverlay = false, passToSearch, isSharedArchive = false, inputDID = undefined, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, openPdfEditor }) => {
     const [currentTID, setCurrentTID] = useState(inputTID ?? 0);
     const [mruTIDs, setMruTIDs] = useState([]);
     const [currentMruTID, setCurrentMruTID] = useState(0);
@@ -77,7 +77,7 @@ const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, c
                 if (onDcmtTypeSelect)
                     onDcmtTypeSelect(tidToUse);
                 passToSearch(tidToUse, outputMids);
-            } : undefined, isSharedDcmt: isSharedArchive, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, moreInfoTasks: getMoreInfoTasksForDocument(allTasks, currentTID, currentTID === inputTID ? inputDID : undefined) }, currentTID)
+            } : undefined, isSharedDcmt: isSharedArchive, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, moreInfoTasks: getMoreInfoTasksForDocument(allTasks, currentTID, currentTID === inputTID ? inputDID : undefined), openPdfEditor: openPdfEditor }, currentTID)
         :
             _jsx(TMPanel, { title: 'Archiviazione', allowMaximize: false, children: _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsx(StyledToppyTextContainer, { children: _jsx(StyledToppyText, { children: SDKUI_Localizator.DcmtTypeSelect }) }), _jsx(StyledToppyImage, { src: Logo, alt: 'Toppy' })] }) }), [currentTID, deviceType, mruTIDs, inputFile, currentInputMids, enableDragDropOverlay, isSharedArchive, allTasks]);
     const allInitialPanelVisibility = {
@@ -145,49 +145,36 @@ const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, c
 export default TMArchive;
 const TMTreeSelectorWrapper = ({ isMobile, isSharedArchive, onSelectedTIDChanged }) => {
     const { setPanelVisibilityById, toggleMaximize, setToolbarButtonVisibility, countVisibleLeafPanels } = useTMPanelManagerContext();
-    return (_jsx(TMTreeSelector, { layoutMode: LayoutModes.Ark, onClosePanel: !isMobile && countVisibleLeafPanels() > 1 ? () => setPanelVisibilityById('tmTreeSelector', false) : undefined, allowMaximize: !isMobile && countVisibleLeafPanels() > 1, onMaximizePanel: !isMobile && countVisibleLeafPanels() > 1 ? () => toggleMaximize("tmTreeSelector") : undefined, onSelectedTIDChanged: (tid) => {
-            onSelectedTIDChanged?.(tid);
-            if (isMobile)
-                setPanelVisibilityById('tmDcmtForm', true);
-            else {
-                setPanelVisibilityById('tmDcmtForm', true);
-                if (!isSharedArchive) {
-                    setPanelVisibilityById('tmDcmtPreview', true);
-                }
-            }
-            if (!isSharedArchive) {
-                setToolbarButtonVisibility('tmDcmtPreview', true);
-            }
-            setToolbarButtonVisibility('tmDcmtForm', true);
-        } }));
+    const updatePanelsVisibility = async (tid) => {
+        if (!tid)
+            return;
+        const dtd = await DcmtTypeListCacheService.GetAsync(tid);
+        const isOnlyMetadata = dtd?.archiveConstraint === ArchiveConstraints.OnlyMetadata;
+        const previewVisible = !isSharedArchive && !isOnlyMetadata;
+        setPanelVisibilityById('tmDcmtPreview', previewVisible);
+        setToolbarButtonVisibility('tmDcmtPreview', previewVisible);
+        setPanelVisibilityById('tmDcmtForm', true);
+        setToolbarButtonVisibility('tmDcmtForm', true);
+    };
+    return (_jsx(TMTreeSelector, { layoutMode: LayoutModes.Ark, onClosePanel: !isMobile && countVisibleLeafPanels() > 1 ? () => setPanelVisibilityById('tmTreeSelector', false) : undefined, allowMaximize: !isMobile && countVisibleLeafPanels() > 1, onMaximizePanel: !isMobile && countVisibleLeafPanels() > 1 ? () => toggleMaximize("tmTreeSelector") : undefined, onSelectedTIDChanged: async (tid) => { updatePanelsVisibility(tid); onSelectedTIDChanged?.(tid); } }));
 };
 const TMRecentsManagerWrapper = ({ mruTIDs, currentTID, currentMruTID, deviceType, isSharedArchive, onSelectedTID, onDeletedTID }) => {
     const { setPanelVisibilityById, setToolbarButtonVisibility } = useTMPanelManagerContext();
+    // This avoids unnecessary re-renders by only recalculating when deviceType changes.
+    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
+    const updatePanelsVisibility = async (tid) => {
+        if (!tid)
+            return;
+        const dtd = await DcmtTypeListCacheService.GetAsync(tid);
+        const isOnlyMetadata = dtd?.archiveConstraint === ArchiveConstraints.OnlyMetadata;
+        const previewVisible = !isSharedArchive && !isOnlyMetadata;
+        setPanelVisibilityById('tmDcmtPreview', previewVisible);
+        setToolbarButtonVisibility('tmDcmtPreview', previewVisible);
+        setPanelVisibilityById('tmDcmtForm', true);
+        setToolbarButtonVisibility('tmDcmtForm', true);
+    };
     useEffect(() => {
-        if (currentTID) {
-            setPanelVisibilityById('tmDcmtForm', true);
-            if (!isSharedArchive) {
-                setToolbarButtonVisibility('tmDcmtPreview', true);
-            }
-            setToolbarButtonVisibility('tmDcmtForm', true);
-        }
-    }, [currentTID, isSharedArchive]);
-    return (_jsx(TMRecentsManager, { accessFilter: 'canArchive', mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => {
-            onSelectedTID?.(tid);
-            if (deviceType === DeviceType.MOBILE) {
-                setPanelVisibilityById('tmDcmtForm', true);
-            }
-            else {
-                setPanelVisibilityById('tmDcmtForm', true);
-                if (!isSharedArchive) {
-                    setPanelVisibilityById('tmDcmtPreview', true);
-                }
-            }
-            if (!isSharedArchive) {
-                setToolbarButtonVisibility('tmDcmtPreview', true);
-            }
-            setToolbarButtonVisibility('tmDcmtForm', true);
-        }, onDeletedTID: (tid) => {
-            onDeletedTID?.(tid);
-        } }));
+        updatePanelsVisibility(currentTID);
+    }, [currentTID, isSharedArchive, isMobile]);
+    return (_jsx(TMRecentsManager, { accessFilter: "canArchive", mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: async (tid) => { await updatePanelsVisibility(tid); onSelectedTID?.(tid); }, onDeletedTID: onDeletedTID }));
 };

package/lib/components/features/blog/TMBlogCommentForm.d.ts

@@ -14,6 +14,9 @@ interface TMBlogCommentFormProps {
     onFilterCreated?: (predicate: (post: BlogPost) => boolean) => void;
     refreshCallback?: () => Promise<void>;
     isCommentRequired?: boolean;
+    maxLength?: number;
+    /** External save handler - when provided, bypasses internal engine logic */
+    onCustomSave?: (blogPost: BlogPost) => Promise<void>;
 }
 declare const TMBlogCommentForm: (props: TMBlogCommentFormProps) => import("react/jsx-runtime").JSX.Element;
 export default TMBlogCommentForm;