@topconsultnpm/sdkui-react 6.20.0-dev1.14 → 6.20.0-dev1.15

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

@@ -1,7 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,38 +0,0 @@
-import { ValidationItem } from '@topconsultnpm/sdk-ts';
-export declare const sanitizeAndFormatComment: (raw?: string) => string;
-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;
-    /** Maximum number of characters allowed in the editor */
-    maxLength?: number;
-    /** If true, displays a character count below the editor */
-    showCount?: boolean;
-}
-declare const TMHtmlEditor: (props: ITMHtmlEditor) => import("react/jsx-runtime").JSX.Element;
-export default TMHtmlEditor;

package/lib/components/editors/TMHtmlEditor.js

@@ -1,203 +0,0 @@
-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';
-import { TMMessageBoxManager, ButtonNames } from '../base/TMPopUp';
-import TMTooltip from '../base/TMTooltip';
-import { useDeviceType, DeviceType } from '../base/TMDeviceProvider';
-export const sanitizeAndFormatComment = (raw = "") => {
-    if (!raw)
-        return "";
-    let cleanComment = raw
-        // Simplify dx-mention markup - replace with just @username
-        .replace(/<span class="dx-mention"[^>]*>\uFEFF?<span[^>]*><span>@<\/span>([^<]+)<\/span>\uFEFF?<\/span>/gi, '@$1')
-        // Replace </p> with '' only if followed by <ol> or <ul>
-        .replace(/<\/p>(?=\s*<(ol|ul)>)/gi, '')
-        // Replace all other </p> with '\r\n'
-        .replace(/<\/p>/gi, '\r\n')
-        // Remove all <p> tags
-        .replace(/<p>/gi, '')
-        // Remove all <br> tags
-        .replace(/<br>/gi, '')
-        // Trim whitespace
-        .trim();
-    // Remove dangerous HTML elements
-    cleanComment = cleanComment.replace(/<(script|iframe|embed|object|link|style|img|video|audio|svg|form|input|button|textarea|select|pre|function)[^>]*>/gi, '');
-    return cleanComment;
-};
-const TMHtmlEditor = (props) => {
-    const { width = "100%", height = "100%", initialMarkup = "", mentionsConfig, onValueChanged, validationItems = [], isEditorEnabled: isEditorEnabledProp = false, toolbarMode = 'compact', autoFocus = false, maxLength = 1000, showCount = true, } = props;
-    // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
-    const deviceType = useDeviceType();
-    // This avoids unnecessary re-renders by only recalculating when deviceType changes.
-    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
-    // 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 track remaining characters
-    const [charactersRemaining, setCharactersRemaining] = useState(maxLength - initialMarkup.length);
-    useEffect(() => {
-        const cleanedMarkup = sanitizeAndFormatComment(markup);
-        setCharactersRemaining(maxLength - cleanedMarkup.length);
-    }, [markup, maxLength]);
-    // Function to read text from the clipboard, format it, and paste into the Quill editor
-    const pasteFromClipboard = async () => {
-        try {
-            // 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);
-        }
-    };
-    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 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: height,
-            width: width
-        }, children: [_jsx("div", { className: "custom-mentions-wrapper", onContextMenu: handleContextMenu, style: {
-                    borderWidth: '1px',
-                    borderStyle: 'solid',
-                    borderColor: hasValidationErrors ? "red" : "#e0e0e0 #e0e0e0 #616161",
-                    width: "100%",
-                    height: `calc(100% - ${showCount ? 15 : 0}px - ${validationItems.length > 0 ? 15 : 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 ? ((() => {
-                const cleanedMarkup = sanitizeAndFormatComment(markup);
-                const showInfoIcon = charactersRemaining !== maxLength;
-                return (_jsxs("div", { style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'flex-end',
-                        fontSize: 12,
-                        color: '#6c757d',
-                        marginTop: showInfoIcon ? 0 : 4,
-                        gap: 4,
-                    }, children: [`${Math.max(charactersRemaining, 0)} ${SDKUI_Localizator.CharactersRemaining}`, showInfoIcon && (_jsx(TMTooltip, { content: 'Markup HTML', children: _jsx("span", { className: "dx-icon-codeblock", style: { fontSize: 22, cursor: 'pointer' }, onClick: () => {
-                                    TMMessageBoxManager.show({
-                                        title: 'Markup HTML',
-                                        initialWidth: !isMobile ? '700px' : undefined,
-                                        message: (_jsx("pre", { style: {
-                                                whiteSpace: 'pre-wrap',
-                                                background: '#f5f5f5',
-                                                padding: '12px',
-                                                borderRadius: '6px',
-                                            }, children: cleanedMarkup })),
-                                        resizable: true,
-                                        showToppy: false,
-                                        buttons: [ButtonNames.OK],
-                                    });
-                                } }) }))] }));
-            })()) : null, validationItems.length > 0 && _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

@@ -1,19 +0,0 @@
-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

@@ -1,125 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,140 +0,0 @@
-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];
-};