@topconsultnpm/sdkui-react 6.19.0-dev1.10

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

@@ -0,0 +1,7 @@
+interface IHtmlContentDisplay {
+    markup: string;
+    isSelected: boolean;
+    searchText?: string;
+}
+declare const TMHtmlContentDisplay: (props: IHtmlContentDisplay) => import("react/jsx-runtime").JSX.Element;
+export default TMHtmlContentDisplay;

package/lib/components/editors/TMHtmlContentDisplay.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { UserListCacheService } from '@topconsultnpm/sdk-ts';
+import styled from 'styled-components';
+import { TMColors } from '../../utils/theme';
+const Wrapper = styled.div `
+    * {
+        color: ${(props) => props.$isSelected && '#fff !important'};
+    }
+    ul li {
+        list-style-position: inside;
+    }
+    ol li {
+        list-style-position: inside;
+    }
+    .highlight {
+        background-color: ${(props) => props.$isSelected ? '#6c9023' : 'yellow'};
+    }
+    a {
+        color: ${(props) => (props.$isSelected ? '#fff' : 'rgb(26, 13, 171)')};
+    }
+`;
+const convertLinksToAnchors = (markup) => {
+    const urlRegex = /(?<!href=["'])(https?:\/\/[^\s"'<>]+[^\s"'<>.,;:!?)])/g;
+    return markup.replace(urlRegex, (url) => {
+        return `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`;
+    });
+};
+const addMentionStyling = (input, usersName) => {
+    if (typeof input !== 'string' || input.trim().length === 0)
+        return input;
+    const mentionRegex = /@(\w+)/g;
+    return input.replace(mentionRegex, (_match, username) => {
+        if (usersName.includes(username)) {
+            return `<span style="color: ${TMColors.primary}; font-weight: bold;">${username}</span>`;
+        }
+        else {
+            return `@${username}`;
+        }
+    });
+};
+const highlightText = (input, searchText) => {
+    if (!searchText)
+        return input;
+    const escapedSearch = searchText.trim().replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // Escape regex
+    const regex = new RegExp(escapedSearch, 'gi');
+    // Regex to split text into HTML tags and text nodes
+    const parts = input.split(/(<[^>]+>)/g); // Captures tags as separate elements
+    const highlighted = parts
+        .map(part => {
+        // Skip HTML tags
+        if (part.startsWith('<') && part.endsWith('>')) {
+            return part;
+        }
+        // Highlight search term in text
+        return part.replace(regex, match => `<span class="highlight">${match}</span>`);
+    })
+        .join('');
+    return highlighted;
+};
+const TMHtmlContentDisplay = (props) => {
+    const { markup, searchText, isSelected } = props;
+    const [usersName, setUsersName] = useState([]);
+    useEffect(() => {
+        const getUserNames = async () => {
+            const userDescriptorList = await UserListCacheService.GetAllAsync();
+            const names = userDescriptorList.map(userDescriptor => userDescriptor.name).filter((name) => name !== undefined);
+            setUsersName(names);
+        };
+        getUserNames();
+    }, []);
+    let updatedMarkup = markup.replace(/(\r\n|\n|\r)/g, '</br>');
+    updatedMarkup = convertLinksToAnchors(updatedMarkup);
+    updatedMarkup = addMentionStyling(updatedMarkup, usersName);
+    updatedMarkup = highlightText(updatedMarkup, searchText);
+    return (_jsx(Wrapper, { "$isSelected": isSelected, children: _jsx("div", { dangerouslySetInnerHTML: { __html: updatedMarkup } }) }));
+};
+export default TMHtmlContentDisplay;

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

@@ -0,0 +1,33 @@
+import { ValidationItem } from '@topconsultnpm/sdk-ts';
+export interface ITMHtmlEditor {
+    /** Width of the editor (e.g., '100%', '500px') */
+    width?: string;
+    /** Height of the editor (e.g., '300px') */
+    height?: string;
+    /** Initial value markup */
+    initialMarkup?: string;
+    /** Callback function triggered when the content value changes */
+    onValueChanged?: (e: {
+        value: string;
+    }) => void;
+    /** Configuration for mention functionality (e.g., @mentions) */
+    mentionsConfig?: Array<{
+        dataSource: Array<{
+            text: string;
+            icon?: string;
+        }>;
+        searchExpr: string;
+        displayExpr: string;
+        valueExpr: string;
+    }>;
+    /** List of validation rules or checks to apply to the editor content */
+    validationItems?: Array<ValidationItem>;
+    /** If true, enables rich text editing mode */
+    isEditorEnabled?: boolean;
+    /** Defines the toolbar layout mode (compact: Shows a minimal toolbar, expanded: Displays the full toolbar */
+    toolbarMode?: 'compact' | 'expanded';
+    /** If true, the editor will be focused on mount */
+    autoFocus?: boolean;
+}
+declare const TMHtmlEditor: (props: ITMHtmlEditor) => import("react/jsx-runtime").JSX.Element;
+export default TMHtmlEditor;

package/lib/components/editors/TMHtmlEditor.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import HtmlEditor, { Toolbar, Item } from 'devextreme-react/html-editor';
+import ReactDOM from 'react-dom';
+import { SDKUI_Localizator } from '../../helper';
+import TMVilViewer from '../base/TMVilViewer';
+const TMHtmlEditor = (props) => {
+    const { width = "100%", height = "100%", initialMarkup = "", mentionsConfig, onValueChanged, validationItems = [], isEditorEnabled: isEditorEnabledProp = false, toolbarMode = 'compact', autoFocus = false } = props;
+    // Ref for HtmlEditor instance
+    const editorRef = useRef(null);
+    // State for editor enable/disable
+    const [isEditorEnabled, setIsEditorEnabled] = useState(false);
+    // State to hold HTML markup
+    const [markup, setMarkup] = useState(initialMarkup);
+    // State to track the position (x, y coordinates) where the custom context menu should be displayed.
+    const [contextMenuPos, setContextMenuPos] = useState(null);
+    // State to indicate whether a paste operation is currently in progress
+    const [isPasting, setIsPasting] = useState(false);
+    // Function to read text from the clipboard, format it, and paste into the Quill editor
+    const pasteFromClipboard = async () => {
+        try {
+            // Set flag to indicate paste operation is in progress
+            setIsPasting(true);
+            // Read plain text from the clipboard asynchronously
+            let text = await navigator.clipboard.readText();
+            text = '<p>' + text.replace(/\r\n/g, '</p><p>') + '</p>';
+            // Removes potentially dangerous HTML tags (script, iframe, embed, etc.) from the pasted content
+            text = text.replace(/<(script|iframe|embed|object|link|style|img|video|audio|svg|form|input|button|textarea|select|pre|function)[^>]*>/gi, '');
+            // Access the Quill editor instance from the HtmlEditor component reference
+            const quill = editorRef.current?.instance()?.getQuillInstance();
+            if (quill) {
+                // Get the current cursor position or selection range in the editor
+                const range = quill.getSelection(true);
+                if (range) {
+                    if (range.length > 0) {
+                        // If there is a text selection, delete the selected text from the editor
+                        quill.deleteText(range.index, range.length);
+                        // Use a short delay before pasting the new content, this ensures the deletion is fully processed before inserting HTML
+                        setTimeout(() => {
+                            // Paste the sanitized HTML content at the cursor's original position
+                            quill.clipboard.dangerouslyPasteHTML(range.index, text);
+                        }, 100);
+                    }
+                    else {
+                        // Paste the formatted HTML content at the current cursor position
+                        setTimeout(() => quill.clipboard.dangerouslyPasteHTML(range.index, text), 100);
+                    }
+                }
+            }
+        }
+        catch (err) {
+            // Log any errors that might occur during clipboard access or pasting
+            console.warn('Clipboard paste failed:', err);
+        }
+        finally {
+            // Reset paste state after a short delay to restore UI state
+            setTimeout(() => setIsPasting(false), 500);
+        }
+    };
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            // Check if the pressed keys correspond to paste (Ctrl or Cmd + V)
+            const isPaste = (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'v';
+            if (isPaste) {
+                // Prevent the default paste action to handle custom pasting
+                e.preventDefault();
+                // Call the custom paste function to handle clipboard text
+                pasteFromClipboard();
+            }
+        };
+        // Add event listener on component mount
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            // Cleanup event listener on component unmount
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, []);
+    const handleContextMenu = (e) => {
+        e.preventDefault();
+        setContextMenuPos({ x: e.clientX, y: e.clientY });
+    };
+    const handleClickOutside = () => {
+        if (contextMenuPos)
+            setContextMenuPos(null);
+    };
+    useEffect(() => {
+        document.addEventListener('click', handleClickOutside);
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, [contextMenuPos]);
+    useEffect(() => {
+        if (markup === initialMarkup)
+            return;
+        setMarkup(initialMarkup);
+    }, [initialMarkup]);
+    // Update isEditorEnabled when prop changes
+    useEffect(() => {
+        setIsEditorEnabled(isEditorEnabledProp);
+    }, [isEditorEnabledProp]);
+    // Handler for value change
+    const onValueChangeCallback = (text) => {
+        setMarkup(text);
+        if (onValueChanged) {
+            onValueChanged({ value: text });
+        }
+    };
+    // Focuses the HtmlEditor when the component mounts, if autoFocus is enabled
+    useEffect(() => {
+        if (autoFocus && editorRef.current?.instance) {
+            // Delay to ensure DOM is ready
+            setTimeout(() => {
+                editorRef.current?.instance().focus();
+            }, 500);
+        }
+    }, [autoFocus]);
+    // Memoized check for validation errors
+    const hasValidationErrors = useMemo(() => {
+        return !isPasting && validationItems && validationItems.length > 0;
+    }, [validationItems]);
+    // Handler function triggered by the context menu's "Paste" action
+    const handlePaste = async () => {
+        // Use the same clipboard reading and pasting logic as in keyboard shortcut
+        await pasteFromClipboard();
+        // Close the custom context menu after pasting
+        setContextMenuPos(null);
+    };
+    return (_jsxs("div", { style: { height: hasValidationErrors ? `calc(${height} - 30px)` : "100%", width: width }, onContextMenu: handleContextMenu, children: [_jsx("div", { className: "custom-mentions-wrapper", style: { borderWidth: '1px', borderStyle: 'solid', borderColor: hasValidationErrors ? "red" : "#e0e0e0 #e0e0e0 #616161", width: "100%", height: "100%" }, 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" })] })) }) }), !isPasting && validationItems.length > 0 && (_jsx("div", { style: { width: "100%", height: "30px" }, children: _jsx(TMVilViewer, { vil: validationItems }) })), contextMenuPos &&
+                ReactDOM.createPortal(_jsxs("div", { style: {
+                        position: 'fixed',
+                        top: contextMenuPos.y,
+                        left: contextMenuPos.x,
+                        background: 'white',
+                        border: '1px solid #ccc',
+                        boxShadow: '0 2px 6px rgba(0,0,0,0.2)',
+                        zIndex: 9999,
+                        padding: '5px 10px',
+                        cursor: 'pointer'
+                    }, onClick: handlePaste, children: [_jsx("i", { className: 'dx-icon-paste' }), " ", SDKUI_Localizator.PasteFromClipboard] }), document.body)] }));
+};
+export default TMHtmlEditor;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CultureIDs } from '@topconsultnpm/sdk-ts';
+import { ValidationItem } from '@topconsultnpm/sdk-ts';
+export declare const getCultureIDImg: (cultureID: CultureIDs) => any;
+interface TMLocalizedTextBoxProps {
+    label: string;
+    value?: string;
+    isModifiedWhen?: boolean;
+    value_IT?: string;
+    value_EN?: string;
+    value_FR?: string;
+    value_PT?: string;
+    value_ES?: string;
+    value_DE?: string;
+    validationItems?: ValidationItem[];
+    onValueChanged: (lang: CultureIDs, value: string) => void;
+}
+declare const TMLocalizedTextBox: React.FC<TMLocalizedTextBoxProps>;
+export default TMLocalizedTextBox;

package/lib/components/editors/TMLocalizedTextBox.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import TMTextBox from './TMTextBox';
+import { IconLanguage, SDKUI_Localizator } from '../../helper';
+import { CultureIDs } from '@topconsultnpm/sdk-ts';
+import it from '../../assets/italy.svg';
+import en from '../../assets/united-kingdom.svg';
+import es from '../../assets/spain.svg';
+import fr from '../../assets/france.svg';
+import de from '../../assets/german.svg';
+import pt from '../../assets/portugal.svg';
+import { createPortal } from 'react-dom';
+const Portal = ({ children, popoverRef }) => {
+    const mount = document.body;
+    // Usa un ref per l'elemento del portale per evitare di ricrearlo ad ogni render
+    const elRef = useRef(document.createElement('div'));
+    useEffect(() => {
+        const el = elRef.current;
+        // Assegna il ref al div del portale
+        el.ref = popoverRef;
+        mount.appendChild(el);
+        return () => {
+            mount.removeChild(el);
+        };
+    }, [popoverRef]);
+    return createPortal(children, elRef.current);
+};
+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 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;
+`;
+// Helper function to get image path
+export const getCultureIDImg = (cultureID) => {
+    switch (cultureID) {
+        case CultureIDs.En_US: return en;
+        case CultureIDs.De_DE: return de;
+        case CultureIDs.Es_ES: return es;
+        case CultureIDs.Fr_FR: return fr;
+        case CultureIDs.Pt_PT: return pt;
+        default: return it;
+    }
+};
+const TMLocalizedTextBox = ({ label, value, value_IT, value_EN, value_FR, value_PT, value_ES, value_DE, isModifiedWhen, validationItems, onValueChanged, }) => {
+    const [isPopoverVisible, setIsPopoverVisible] = useState(false);
+    const containerRef = useRef(null); // Riferimento al contenitore principale
+    const popoverRef = useRef(null); // Riferimento per il Popover
+    const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0, width: 0 });
+    const languages = [
+        { code: CultureIDs.It_IT, label: 'Italiano', value: value_IT },
+        { code: CultureIDs.En_US, label: 'English', value: value_EN },
+        { code: CultureIDs.Fr_FR, label: 'Français', value: value_FR },
+        { code: CultureIDs.Pt_PT, label: 'Português', value: value_PT },
+        { code: CultureIDs.Es_ES, label: 'Español', value: value_ES },
+        { code: CultureIDs.De_DE, label: 'Deutsch', value: value_DE },
+    ];
+    // Calcola il numero di lingue con valori non nulli o vuoti
+    const localizedCount = languages.filter(lang => lang.value && lang.value.trim() !== '').length;
+    const handleTogglePopover = () => {
+        if (containerRef.current) {
+            const rect = containerRef.current.getBoundingClientRect();
+            setPopoverPosition({
+                top: rect.bottom, // Posiziona sotto l'input
+                left: rect.left,
+                width: rect.width
+            });
+        }
+        setIsPopoverVisible(prev => !prev);
+    };
+    const handleClosePopover = () => setIsPopoverVisible(false);
+    // Close popover when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (isPopoverVisible &&
+                containerRef.current &&
+                !containerRef.current.contains(event.target) &&
+                popoverRef.current &&
+                !popoverRef.current.contains(event.target)) {
+                handleClosePopover();
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isPopoverVisible]);
+    const localizationButton = {
+        text: SDKUI_Localizator.Localization,
+        icon: (_jsxs(IconContainer, { children: [_jsx(IconLanguage, {}), localizedCount > 0 && _jsx(Badge, { children: localizedCount })] })),
+        onClick: handleTogglePopover,
+    };
+    return (_jsxs(LocalizedContainer, { ref: containerRef, children: [_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) => (_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))) }) }))] }));
+};
+export default TMLocalizedTextBox;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ValidationItem, LayoutModes, QueryOperators } from '@topconsultnpm/sdk-ts';
+import { DynDataListsToBeRefreshed, MIDsToBeUpdated } from '../choosers/TMDynDataListItemChooser';
+interface ITMMetadataEditorProps {
+    tid: number | undefined;
+    mid?: number;
+    value: string | undefined;
+    queryParamsDynDataList?: string[];
+    autoFocus?: boolean;
+    containerElement?: Element;
+    disabled?: boolean;
+    validationItems?: ValidationItem[];
+    isLexProt?: number;
+    isReadOnly?: boolean;
+    layoutMode?: LayoutModes;
+    queryOperator?: QueryOperators;
+    isModifiedWhen?: boolean;
+    isEditable?: boolean;
+    openChooserBySingleClick?: boolean;
+    customLabel?: string;
+    isSelected?: boolean;
+    onValueChanged?: (value: any) => void;
+    onValueChange?: (value: any) => void;
+    onCascadeRefreshDynDataLists?: (dynDataListsToBeRefreshed: DynDataListsToBeRefreshed[]) => void;
+    onCascadeUpdateMIDs?: (midsToBeUpdated: MIDsToBeUpdated[]) => void;
+}
+declare const TMMetadataEditor: React.FC<ITMMetadataEditorProps>;
+export default TMMetadataEditor;
+export declare const useMetadataEditableList: () => [(mid: number | undefined) => boolean, (mid: number | undefined) => void];

package/lib/components/editors/TMMetadataEditor.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { MetadataDataDomains, MetadataDataTypes, DcmtTypeListCacheService, LayoutModes, AccessLevels, PlatformObjectValidator, QueryOperators, SDK_Globals, AppModules, MetadataFormats } from '@topconsultnpm/sdk-ts';
+import { TMColors } from '../../utils/theme';
+import TMDataListItemChooser from '../choosers/TMDataListItemChooser';
+import TMDynDataListItemChooser from '../choosers/TMDynDataListItemChooser';
+import TMUserChooser from '../choosers/TMUserChooser';
+import TMDateBox from './TMDateBox';
+import TMTextBox from './TMTextBox';
+import { TMMetadataIcon } from '../viewers/TMMidViewer';
+import TMTextArea from './TMTextArea';
+import { DateDisplayTypes } from '../../helper/Globalization';
+const renderMetadataIcon = (tid, md, layoutMode, isMetadataSelected, showLabel) => {
+    return (_jsx(TMMetadataIcon, { isMetadataSelected: isMetadataSelected, layoutMode: layoutMode, md: md, tid: tid, elementStyle: showLabel ? { position: 'relative', top: '4px' } : undefined }));
+};
+const getDateDisplayFormat = (format) => {
+    format = format ?? MetadataFormats.None;
+    switch (format) {
+        case MetadataFormats.LongTime: return "longTime";
+        case MetadataFormats.ShortTime: return "shortTime";
+        case MetadataFormats.ShortDateLongTime:
+        case MetadataFormats.ShortDateShortTime:
+        case MetadataFormats.LongDateLongTime:
+        case MetadataFormats.LongDateShortTime: return "shortDateShortTime";
+        default: return "shortDate";
+    }
+};
+const getDateDisplayType = (format) => {
+    format = format ?? MetadataFormats.None;
+    switch (format) {
+        case MetadataFormats.LongTime:
+        case MetadataFormats.ShortTime: return DateDisplayTypes.Time;
+        case MetadataFormats.ShortDateLongTime:
+        case MetadataFormats.ShortDateShortTime:
+        case MetadataFormats.LongDateLongTime:
+        case MetadataFormats.LongDateShortTime: return DateDisplayTypes.DateTime;
+        default: return DateDisplayTypes.Date;
+    }
+};
+const TMMetadataEditor = ({ isSelected = false, customLabel, isReadOnly, isLexProt, layoutMode, queryOperator, isEditable, isModifiedWhen = false, tid, mid, value, queryParamsDynDataList, containerElement, autoFocus, validationItems = [], disabled = false, openChooserBySingleClick = true, onValueChanged, onValueChange, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs }) => {
+    const [md, setMd] = useState();
+    useEffect(() => {
+        // Passiamo did = undefined, perché è già in cache
+        DcmtTypeListCacheService.GetWithNotGrantedAsync(tid, undefined).then((dtd) => {
+            setMd(dtd?.metadata?.find(o => o.id == mid));
+        });
+    }, [tid, mid]);
+    const isReadOnlyInternal = () => {
+        if (!md)
+            return false;
+        if (md?.isSystem === 1 && layoutMode !== LayoutModes.None)
+            return true;
+        switch (layoutMode) {
+            case LayoutModes.Update: return md?.dataDomain === MetadataDataDomains.Computed || md?.perm?.canUpdate !== AccessLevels.Yes || (isLexProt === 1 && (md?.isLexProt === 1 || md?.isLexProt === 3));
+            default: return false;
+        }
+    };
+    const isModifiedWhenInternal = () => { return isModifiedWhen && !md?.isSystem; };
+    let operands = PlatformObjectValidator.GetNumberOfOperands(queryOperator);
+    const modulesWithLabelTop = useMemo(() => {
+        if (SDK_Globals.appModule === AppModules.SURFER
+            || SDK_Globals.appModule === AppModules.EXCEL_CONNECTOR
+            || SDK_Globals.appModule === AppModules.OUTLOOK_CONNECTOR
+            || SDK_Globals.appModule === AppModules.POWERPOINT_CONNECTOR
+            || SDK_Globals.appModule === AppModules.WORD_CONNECTOR)
+            return false;
+        return true;
+    }, [SDK_Globals.appModule]);
+    const showLabelTop = (layoutMode === LayoutModes.Update) || (layoutMode === LayoutModes.Ark);
+    const showByTextarea = showLabelTop && md && md?.dataType === MetadataDataTypes.Varchar && md.length && md.length > 80;
+    const showAsText = operands == 11 || operands == 99;
+    const showAsNumber = operands == 12;
+    const multipleSelectionIsenabled = operands == 11;
+    let maxLength = md?.length;
+    if (layoutMode === LayoutModes.None && showAsText)
+        maxLength = 1000;
+    let isReadOnlyResult = isReadOnly ?? isReadOnlyInternal();
+    let icon = renderMetadataIcon(tid, md, layoutMode, isSelected, showLabelTop);
+    if (value?.startsWith("{@QueryParam") || value == "{@UserName}" || value == "{@UserID}" || queryOperator == QueryOperators.Custom || isEditable)
+        return _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'text', maxLength: isEditable ? undefined : maxLength, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
+    if (md?.dataDomain == MetadataDataDomains.DynamicDataList)
+        return _jsx(TMDynDataListItemChooser, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', titleForm: md.nameLoc, readOnly: isReadOnlyResult, layoutMode: layoutMode, isModifiedWhen: isModifiedWhenInternal(), label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, md: md, tid: tid, openChooserBySingleClick: openChooserBySingleClick, queryParamsDynDataList: queryParamsDynDataList, onCascadeRefreshDynDataLists: onCascadeRefreshDynDataLists, onCascadeUpdateMIDs: onCascadeUpdateMIDs, elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, allowMultipleSelection: multipleSelectionIsenabled, values: value ? [value] : [], showClearButton: !isReadOnlyResult, onValueChanged: (IDs) => {
+                if (!IDs || IDs.length <= 0)
+                    onValueChanged?.(undefined);
+                else
+                    onValueChanged?.(IDs[0]);
+            } });
+    if (md?.dataDomain == MetadataDataDomains.DataList)
+        return _jsx(TMDataListItemChooser, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', titleForm: md.nameLoc, readOnly: isReadOnlyResult, isModifiedWhen: isModifiedWhenInternal(), label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, dataListId: md.dataListID, openChooserBySingleClick: openChooserBySingleClick, allowMultipleSelection: multipleSelectionIsenabled, values: value?.split(',').map((item) => !item.startsWith("'") ? item : item.slice(1, -1)) ?? [], showClearButton: !isReadOnlyResult, onValueChanged: (IDs) => {
+                if (!IDs || IDs.length <= 0)
+                    onValueChanged?.(undefined);
+                else
+                    onValueChanged?.(IDs.join(","));
+            } });
+    if (md?.dataDomain == MetadataDataDomains.UserID)
+        return _jsx(TMUserChooser, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', titleForm: md.nameLoc, readOnly: isReadOnlyResult, isModifiedWhen: isModifiedWhenInternal(), label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, openChooserBySingleClick: openChooserBySingleClick, backgroundColor: TMColors.default_background, showClearButton: !isReadOnlyResult, allowMultipleSelection: multipleSelectionIsenabled, values: value?.split(',').map((item) => !item.startsWith("'") ? Number(item) : Number(item.slice(1, -1))) ?? [], onValueChanged: (IDs) => {
+                if (!IDs || IDs.length <= 0)
+                    onValueChanged?.(undefined);
+                else
+                    onValueChanged?.(IDs.join(","));
+            } });
+    if (showAsText)
+        return _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'text', showClearButton: !isReadOnlyResult, maxLength: maxLength, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
+    if (showAsNumber)
+        return _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'number', showClearButton: !isReadOnlyResult, precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
+    switch (md?.dataType) {
+        case MetadataDataTypes.DateTime:
+            return _jsx(TMDateBox, { placeholder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', dateDisplayType: getDateDisplayType(md.format?.format), displayFormat: getDateDisplayFormat(md.format?.format), isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, icon: showLabelTop ? icon : undefined, label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, validationItems: validationItems, disabled: disabled, width: '100%', value: value, showClearButton: !isReadOnlyResult, useDateSerializationFormat: true, containerElement: containerElement, onValueChange: (newValue) => {
+                    onValueChange?.(newValue ? newValue.toString() : undefined);
+                    onValueChanged?.(newValue ? newValue.toString() : undefined);
+                } });
+        case MetadataDataTypes.Number: return _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'number', showClearButton: !isReadOnlyResult, precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
+        default:
+            if (showByTextarea) {
+                return _jsx(TMTextArea, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', rows: 1, readOnly: isReadOnlyResult, label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, isModifiedWhen: isModifiedWhenInternal(), validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, showClearButton: !isReadOnlyResult, autoFocus: autoFocus, maxLength: maxLength, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => { onValueChanged?.(newValue); }, resize: false });
+            }
+            else {
+                return _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, disabled: disabled, validationItems: validationItems, type: 'text', elementStyle: { width: '100%' }, showClearButton: !isReadOnlyResult, autoFocus: autoFocus, maxLength: maxLength, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => { onValueChanged?.(newValue); } });
+            }
+    }
+};
+export default TMMetadataEditor;
+export const useMetadataEditableList = () => {
+    const [editableList, setEditableList] = useState([]);
+    const addOrRemoveEditableList = (mid) => {
+        if (!mid)
+            return;
+        let newEditableList = editableList.slice();
+        if (newEditableList.includes(mid)) {
+            let index = newEditableList.indexOf(mid);
+            newEditableList.splice(index, 1);
+        }
+        else {
+            newEditableList.push(mid);
+        }
+        setEditableList(newEditableList);
+    };
+    const isEditableList = (mid) => mid ? editableList.includes(mid) : false;
+    return [isEditableList, addOrRemoveEditableList];
+};

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { LayoutDescriptor, LayoutModes, ValidationItem } from '@topconsultnpm/sdk-ts';
+import { DeviceContextProps } from "../base/TMDeviceProvider";
+import { MetadataValueDescriptorEx } from "../../ts";
+export declare enum ShowCheckBoxesMode {
+    Never = 0,
+    Always = 1,
+    AlwaysReadOnly = 2
+}
+export declare enum AdvancedMenuButtons {
+    None = 0,
+    MakeEditable = 1,
+    FormulaEditor = 2,
+    DistinctValues = 3
+}
+export type AdvancedMenuClickEventArgs = {
+    tid: number | undefined;
+    mid: number | undefined;
+    button: AdvancedMenuButtons;
+};
+interface ITMMetadataValuesProps extends DeviceContextProps {
+    TID: number | undefined;
+    metadataValues: MetadataValueDescriptorEx[];
+    metadataValuesOrig?: MetadataValueDescriptorEx[];
+    customMenuItems?: any[];
+    isExpertMode?: boolean;
+    isReadOnly?: boolean;
+    showCheckBoxes?: ShowCheckBoxesMode;
+    showNullValueCheckBoxes?: boolean;
+    validationItems: ValidationItem[];
+    layoutMode?: LayoutModes;
+    selectedMID?: number;
+    openChooserBySingleClick?: boolean;
+    isOpenDistinctValues?: boolean;
+    checkPerms?: boolean;
+    inputMids?: Array<{
+        mid: number;
+        value: string;
+    }>;
+    layout?: LayoutDescriptor;
+    onAdvancedMenuClick?: (e: AdvancedMenuClickEventArgs) => void;
+    onValueChanged?: (mid: MetadataValueDescriptorEx[]) => void;
+    onFocusedItemChanged?: (mid: MetadataValueDescriptorEx | undefined) => void;
+}
+declare const TMMetadataValues: React.FC<ITMMetadataValuesProps>;
+export default TMMetadataValues;