@topconsultnpm/sdkui-react-beta 6.5.51

package/lib/components/base/TMTab.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import TabPanel, { Item } from "devextreme-react/tab-panel";
+import { StyledDivHorizontal } from './Styled';
+import { editorColorManager } from '../editors/TMEditorStyled';
+import { TMCard } from './TMLayout';
+const StyledTabItemResultType = styled.div `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${(props) => props.$backgroundColor};
+    color: #fff;
+    font-size: 0.8rem;
+    padding: 0 5px;
+    border-radius: 999em;
+    line-height: 16px;
+    margin-left: 5px;
+`;
+export const TMTab = ({ label = '', propsToBeValidated = [], children }) => { return (_jsx("div", { children: children })); };
+const renderTabItems = (tabItemProps, tabs, vil) => {
+    return (_jsxs(StyledDivHorizontal, { style: { fontSize: '1rem', fontWeight: '600' }, children: [_jsx("span", { children: tabItemProps.title }), tabs.map((tab, index) => { return (_jsx("div", { style: { display: 'flex' }, children: tabItemProps.title == tab.title && _jsx(TMTabItemBadge, { vil: vil?.filter(o => tab.propsToBeValidated?.some((s) => o.PropertyName == s || o.PropertyScopes.includes(s))) ?? [] }) }, index)); })] }));
+};
+export const TMTabItemBadge = ({ vil }) => {
+    return (_jsxs(_Fragment, { children: [" ", vil.length > 0 && _jsx(StyledTabItemResultType, { "$backgroundColor": editorColorManager(vil), children: vil.length }), " "] }));
+};
+const TMTabGroup = ({ children, fontSize, validationItems = [], onTabIndexChanged }) => {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [tabs, setTabs] = useState(React.Children.toArray(children));
+    const [tabsTitle, setTabsTitle] = useState([]);
+    useEffect(() => { onTabIndexChanged && onTabIndexChanged(selectedIndex); }, [selectedIndex]);
+    useEffect(() => {
+        let arr = [];
+        setTabs(React.Children.toArray(children));
+        for (let child of children) {
+            arr.push({ title: child.props.label, propsToBeValidated: child.props.propsToBeValidated });
+        }
+        setTabsTitle(arr);
+    }, [children]);
+    return (_jsx(TabPanel, { onSelectedIndexChange: (e) => setSelectedIndex(e), height: '100%', width: '100%', itemTitleRender: (tabItemProps) => renderTabItems(tabItemProps, tabsTitle, validationItems), showNavButtons: true, stylingMode: "primary", children: tabs.map((tab, index) => (_jsxs(Item, { title: tab.props.label, children: [" ", _jsx(TMCard, { showBorder: false, padding: true, scrollY: true, children: tab.props.children ? tab.props.children : _jsx("div", {}) }), " "] }, index))) }));
+};
+export default TMTabGroup;

package/lib/components/base/TMToggleButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ITMEditorBase } from './TMEditorBase';
+import { Colors } from '../../utils/theme';
+interface ITMToggleButton extends ITMEditorBase {
+    color?: Colors;
+    showTooltip?: boolean;
+    onValueChanged?: VoidFunction;
+}
+declare const TMToggleButton: React.FunctionComponent<ITMToggleButton>;
+export default TMToggleButton;

package/lib/components/base/TMToggleButton.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Colors, FontSize } from '../../utils/theme';
+import { getColor } from '../../helper';
+import styled from 'styled-components';
+import TMTooltip from './TMTooltip';
+// #region Style
+const StyledToggleButtonWrapper = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+`;
+const StyledToggleButtonContainer = styled.div `
+  width: 36px;
+  height: 20px;
+  background-color: ${props => !props.$value ? 'rgb(194, 194, 194)' : getColor(props.$color)};
+  border-radius: 3px;
+  transition: all 100ms ease;
+  padding: 3px;
+  cursor: pointer;
+  position: relative;
+`;
+const StyledToggleButtonSwitch = styled.div `
+  width: 50%;
+  height: 100%;
+  border-radius: 2px;
+  background-color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  float: right;
+  transition: all 100ms ease;
+  z-index: 100;
+  ${props => props.$value ? '' : 'float: left;'}
+`;
+const StyledToggleValue = styled.p `
+    font-size: 0.5rem;
+    color: black;
+    font-weight: bold;
+`;
+const StyledToggleButtonLabel = styled.div `
+    font-size: ${FontSize.defaultFontSize};
+    margin-left: 5px;
+    width: max-content;
+    color: ${props => getColor(props.$color)};
+`;
+const TMToggleButton = ({ color = 'primary', value, label, elementStyle, fontSize = FontSize.defaultFontSize, isModifiedWhen, showTooltip = false, onValueChanged }) => {
+    const [currentColor, setCurrentColor] = useState(color);
+    useEffect(() => {
+        setCurrentColor(isModifiedWhen ? 'tertiary' : color);
+    }, [isModifiedWhen, color]);
+    const renderTooltip = () => { return (showTooltip && _jsx("div", { children: label })); };
+    return (_jsx(TMTooltip, { hideAfterDelay: true, content: renderTooltip(), children: _jsxs(StyledToggleButtonWrapper, { children: [_jsx(StyledToggleButtonContainer, { "$value": value, "$color": currentColor, style: elementStyle, onClick: onValueChanged, children: _jsx(StyledToggleButtonSwitch, { "$value": value, children: _jsx(StyledToggleValue, { children: value ? 'ON' : 'OFF' }) }) }), !showTooltip && label &&
+                    _jsx(StyledToggleButtonLabel, { "$color": isModifiedWhen ? Colors.tertiary : Colors.primary, children: label })] }) }));
+};
+export default TMToggleButton;

package/lib/components/base/TMTooltip.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ITooltipOptions } from 'devextreme-react/cjs/tooltip';
+interface ITMTooltipProps extends ITooltipOptions {
+    children?: React.ReactNode;
+    content?: React.ReactNode;
+    hideAfterDelay?: boolean;
+}
+declare const TMTooltip: ({ children, content, hideAfterDelay }: ITMTooltipProps) => import("react/jsx-runtime").JSX.Element;
+export default TMTooltip;

package/lib/components/base/TMTooltip.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Tooltip } from 'devextreme-react/cjs/tooltip';
+import { TABLET_WIDTH, genUniqueId, useWindowWidth } from '../../helper';
+const TMTooltip = ({ children, content, hideAfterDelay }) => {
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [id, setID] = useState('');
+    useEffect(() => { setID(genUniqueId()); }, [children]);
+    useEffect(() => {
+        window.addEventListener('click', () => setShowTooltip(false));
+        return () => window.removeEventListener('click', () => setShowTooltip(false));
+    }, []);
+    const width = useWindowWidth();
+    let isDesktop = width > TABLET_WIDTH;
+    return (_jsxs("div", { children: [_jsx("div", { id: `idContainerTooltip${id}`, style: { display: 'flex', alignItems: 'center', height: 'max-content', width: 'max-content' }, onMouseEnter: () => { setShowTooltip(true); }, onMouseLeave: () => { setShowTooltip(false); }, onClick: () => { if (isDesktop || !hideAfterDelay)
+                    return; setTimeout(() => { setShowTooltip(false); }, 1500); }, children: children }), content &&
+                _jsx(Tooltip, { target: `#idContainerTooltip${id}`, hideOnOutsideClick: true, visible: showTooltip, onHidden: () => setShowTooltip(false), children: content })] }));
+};
+export default TMTooltip;

package/lib/components/base/TMVilViewer.d.ts

@@ -0,0 +1,5 @@
+import { ValidationItem } from '@topconsultnpm/sdk-ts-beta';
+declare const TMVilViewer: ({ vil }: {
+    vil?: ValidationItem[];
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default TMVilViewer;

package/lib/components/base/TMVilViewer.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ResultTypes } from '@topconsultnpm/sdk-ts-beta';
+import { TMColors } from '../../utils/theme';
+import TMClosableList from './TMClosableList';
+const TMVilViewer = ({ vil = [] }) => {
+    const renderVil = () => {
+        if (!vil)
+            return [];
+        let errItems = [];
+        let sortedVil = vil.sort((a, b) => a.ResultType.localeCompare(b.ResultType));
+        for (let i = 0; i < sortedVil.length; i++) {
+            let viColor = sortedVil[i].ResultType == ResultTypes.ERROR ? TMColors.error : sortedVil[i].ResultType == ResultTypes.INFO ? TMColors.info : TMColors.warning;
+            let msg_prefix = sortedVil.length > 1 ? `${i + 1}) ` : '';
+            errItems.push(_jsx("div", { style: { color: viColor }, children: `${msg_prefix}${sortedVil[i].Message}` }, i));
+        }
+        return errItems;
+    };
+    if (!vil || vil.length <= 0)
+        return null;
+    return (_jsx(TMClosableList, { inline: true, dataSource: renderVil(), hasPadding: false }));
+};
+export default TMVilViewer;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { DataListItemDescriptor } from '@topconsultnpm/sdk-ts-beta';
+import { ITMChooserFormProps, ITMChooserProps } from '../../ts';
+interface ITMDataListItemChooserProps extends ITMChooserProps {
+    /** id della lista dati da gestire  */
+    dataListId: number | undefined;
+    /** Contiene i values selezionati  */
+    values?: string[];
+    /** Visualizza il bordo  */
+    showBorder?: boolean;
+    /** Se presente, visualizza il bottone Pulisci ed esegue  */
+    hasClear?: boolean;
+}
+declare const TMDataListItemChooser: React.FunctionComponent<ITMDataListItemChooserProps>;
+export default TMDataListItemChooser;
+interface ITMDataListItemChooserFormProps extends ITMChooserFormProps<DataListItemDescriptor> {
+    dataListId: number | undefined;
+}
+export declare const TMDataListItemChooserForm: React.FunctionComponent<ITMDataListItemChooserFormProps>;

package/lib/components/choosers/TMDataListItemChooser.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { SDK_Localizator, DataListCacheService } from '@topconsultnpm/sdk-ts-beta';
+import { Column } from 'devextreme-react/cjs/data-grid';
+import { StyledDivHorizontal } from '../base/Styled';
+import { IconSearch, SDKUI_Localizator, TMImageLibrary } from '../../helper';
+import TMSpinner from '../base/TMSpinner';
+import TMSummary from '../editors/TMSummary';
+import TMChooserForm from '../forms/TMChooserForm';
+import TMDataListItemViewer from '../viewers/TMDataListItemViewer';
+const TMDataListItemChooser = ({ dataListId, backgroundColor, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged, hasClear }) => {
+    const [showChooser, setShowChooser] = useState(false);
+    const renderTemplate = () => {
+        return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px' }, children: [placeHolder && (!values || values.length <= 0) && _jsx("p", { children: placeHolder }), values && values.length > 0 && _jsx(TMDataListItemViewer, { dataListId: dataListId, value: values?.[0] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { backgroundColor: backgroundColor, showBorder: showBorder, iconEditButton: _jsx(IconSearch, {}), onEditorClick: () => setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: hasClear ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
+                _jsx(TMDataListItemChooserForm, { allowMultipleSelection: allowMultipleSelection, dataListId: dataListId, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
+};
+export default TMDataListItemChooser;
+const cellRenderIcon = (data) => _jsx(TMImageLibrary, { imageID: data.data?.imageID });
+export const TMDataListItemChooserForm = (props) => {
+    const renderDataGridColumns = [
+        _jsx(Column, { dataField: "value", caption: SDKUI_Localizator.Value }, 0),
+        _jsx(Column, { dataField: "name", caption: SDKUI_Localizator.Description }, 1)
+    ];
+    const getItems = async (refreshCache) => {
+        if (!props.dataListId)
+            return [];
+        if (refreshCache)
+            DataListCacheService.RemoveAll();
+        TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.DataList} ...` });
+        let dataList = await DataListCacheService.GetAsync(props.dataListId);
+        TMSpinner.hide();
+        return dataList ? dataList.items ?? [] : [];
+    };
+    return (_jsx(TMChooserForm, { title: SDK_Localizator.DataLists, allowMultipleSelection: props.allowMultipleSelection, width: props.width, height: props.height, keyName: 'value', showDefaultColumns: false, hasShowId: false, columns: renderDataGridColumns, selectedIDs: props.selectedIDs, cellRenderIcon: cellRenderIcon, dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => props.onChoose?.(IDs) }));
+};

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { DcmtTypeDescriptor, ITopMediaSession, TemplateTIDs } from '@topconsultnpm/sdk-ts-beta';
+import { ITMChooserFormProps, ITMChooserProps } from '../../ts';
+interface ITMDcmtTypeChooser extends ITMChooserProps {
+    ShowOnlyDcmtTypes?: boolean;
+    ShowOnlySAP?: boolean;
+    filterTemplateTID?: TemplateTIDs[];
+    /** Contiene i TID selezionati  */
+    values?: number[];
+    /** Visualizza il bordo  */
+    showBorder?: boolean;
+    borderRadius?: string;
+    /** Se presente, visualizza il bottone ed esegue  */
+    hasClear?: boolean;
+    openEditorOnSummaryClick?: boolean;
+}
+declare const TMDcmtTypeChooser: React.FunctionComponent<ITMDcmtTypeChooser>;
+export default TMDcmtTypeChooser;
+interface ITMDcmtTypeChooserFormProps extends ITMChooserFormProps<DcmtTypeDescriptor> {
+    ShowOnlyDcmtTypes?: boolean;
+    ShowOnlySAP?: boolean;
+    filterTemplateTID?: TemplateTIDs[];
+    tmSession?: ITopMediaSession;
+}
+export declare const TMDcmtTypeChooserForm: React.FunctionComponent<ITMDcmtTypeChooserFormProps>;

package/lib/components/choosers/TMDcmtTypeChooser.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { DcmtTypeListCacheService, SDK_Globals, SDK_Localizator } from '@topconsultnpm/sdk-ts-beta';
+import TMSpinner from '../base/TMSpinner';
+import { IconSearch, SDKUI_Localizator } from '../../helper';
+import { StyledDivHorizontal } from '../base/Styled';
+import TMTidViewer, { TMDcmtTypeIcon } from '../viewers/TMTidViewer';
+import TMSummary from '../editors/TMSummary';
+import TMChooserForm from '../forms/TMChooserForm';
+const TMDcmtTypeChooser = ({ tmSession, dataSource, disabled, backgroundColor, borderRadius = '4px', placeHolder = `<${SDKUI_Localizator.NoneSelection}>`, openEditorOnSummaryClick, showBorder = true, showId = false, elementStyle, allowMultipleSelection, ShowOnlyDcmtTypes, ShowOnlySAP, filterTemplateTID, values, isModifiedWhen, label, width, height, validationItems = [], onValueChanged, hasClear }) => {
+    const [showChooser, setShowChooser] = useState(false);
+    useEffect(() => {
+        TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.ListDcmtTypeOrView} ...` });
+        let tms = tmSession ?? SDK_Globals.tmSession;
+        DcmtTypeListCacheService.GetFromTIDsAsync(values, false, tms).then(() => { TMSpinner.hide(); });
+    }, [values]);
+    const renderTemplate = () => {
+        return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && _jsx(TMTidViewer, { tmSession: tmSession, tid: values[0], showIcon: true, showId: showId, noneSelectionText: placeHolder }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { backgroundColor: backgroundColor, showBorder: showBorder, borderRadius: borderRadius, iconEditButton: _jsx(IconSearch, {}), onEditorClick: () => !disabled && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, width: width, height: showBorder ? height : '24px', template: renderTemplate(), openEditorOnSummaryClick: openEditorOnSummaryClick, onClearClick: hasClear ? () => { !disabled && onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
+                _jsx(TMDcmtTypeChooserForm, { tmSession: tmSession, allowMultipleSelection: allowMultipleSelection, dataSource: dataSource, selectedIDs: values, ShowOnlyDcmtTypes: ShowOnlyDcmtTypes, ShowOnlySAP: ShowOnlySAP, filterTemplateTID: filterTemplateTID, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
+};
+export default TMDcmtTypeChooser;
+const cellRenderIcon = (data) => _jsx(TMDcmtTypeIcon, { dtd: data.data });
+const cellRenderNameAndDesc = (data) => _jsx("p", { style: { textAlign: 'left', color: data.data.isView ? 'red' : '' }, children: data.value });
+export const TMDcmtTypeChooserForm = (props) => {
+    const getItems = async (refreshCache) => {
+        let tms = props.tmSession ?? SDK_Globals.tmSession;
+        if (refreshCache)
+            DcmtTypeListCacheService.RemoveAllWithoutMetadata(tms);
+        let count = DcmtTypeListCacheService.CacheCount(true, tms);
+        if (count <= 0)
+            TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.ListDcmtTypeOrView} ...` });
+        let dtdList = await DcmtTypeListCacheService.GetAllWithoutMetadataAsync(tms);
+        if (count <= 0)
+            TMSpinner.hide();
+        if (props.ShowOnlyDcmtTypes)
+            return dtdList?.filter(d => d.isView === false);
+        else if (props.ShowOnlySAP)
+            return dtdList?.filter(d => d.name?.startsWith('SAP'));
+        if (props.filterTemplateTID)
+            return dtdList?.filter(d => d.templateTID && props.filterTemplateTID?.includes(d.templateTID));
+        return dtdList;
+    };
+    return (_jsx(TMChooserForm, { title: SDK_Localizator.ListDcmtTypeOrView, allowMultipleSelection: props.allowMultipleSelection, hasShowOnlySelectedItems: true, width: props.width, height: props.height, selectedIDs: props.selectedIDs, cellRenderIcon: cellRenderIcon, cellRenderNameAndDesc: cellRenderNameAndDesc, dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => props.onChoose?.(IDs) }));
+};

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { DcmtTypeDescriptor, MetadataDescriptor, QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts-beta';
+import { ITMChooserFormProps, ITMChooserProps, TID_MID } from '../../ts';
+import { TID_Alias } from '../../helper/queryHelper';
+interface ITMMetadataChooserProps extends ITMChooserProps {
+    /** Consente di visualizzare anche i metadati di sistema  */
+    allowSysMetadata?: boolean;
+    /** TIDs dei tipi documento da cui recuperare i metadati */
+    tids?: number[];
+    /** Lista dei tipi documento da cui recuperare i metadati */
+    inputDcmtTypesList?: DcmtTypeDescriptor[];
+    /** Qd da cui recuperare i metadati */
+    qd?: QueryDescriptor;
+    /** Contiene i TID / MID selezionati  */
+    values?: TID_MID[];
+    /** Visualizza anche il nome del tipo documento  */
+    showCompleteMetadataName?: boolean;
+    /** Se input è qd, visualizza solo i metadati presenti nella clausola Select */
+    qdShowOnlySelectItems?: boolean;
+    getColorIndex?: (tid: TID_Alias) => string;
+    showBorder?: boolean;
+    borderRadius?: string;
+    hasClear?: boolean;
+    openEditorOnSummaryClick?: boolean;
+    validationItems?: ValidationItem[];
+}
+declare const TMMetadataChooser: React.FunctionComponent<ITMMetadataChooserProps>;
+export default TMMetadataChooser;
+interface ITMMetadataChooserFormProps extends ITMChooserFormProps<MetadataDescriptor> {
+    allowSysMetadata?: boolean;
+    /** Lista dei tipi documento da cui recuperare i metadati */
+    inputDcmtTypesList?: DcmtTypeDescriptor[];
+    /** TIDs dei tipi documento da cui recuperare i metadati */
+    tids?: number[];
+    /** Qd da cui recuperare i metadati */
+    qd?: QueryDescriptor;
+    /** Se input è qd, visualizza solo i metadati presenti nella clausola Select */
+    qdShowOnlySelectItems?: boolean;
+    getColorIndex?: (tid: TID_Alias) => string;
+}
+export declare const TMMetadataChooserForm: React.FunctionComponent<ITMMetadataChooserFormProps>;

package/lib/components/choosers/TMMetadataChooser.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DcmtTypeDescriptor, DcmtTypeListCacheService, SDK_Globals, SDK_Localizator } from '@topconsultnpm/sdk-ts-beta';
+import { Column, GroupItem } from 'devextreme-react/cjs/data-grid';
+import { TMMetadataIcon, TMMidViewer, getDisplayAlias } from '../viewers/TMMidViewer';
+import { getTIDsByQd } from '../../helper/queryHelper';
+import { TMDcmtTypeIcon } from '../viewers/TMTidViewer';
+import { IconSearch, SDKUI_Localizator, IconSettings } from '../../helper';
+import { FontSize, TMColors } from '../../utils/theme';
+import { StyledBadge, StyledDivHorizontal, StyledDxGridGroupHeader } from '../base/Styled';
+import TMButton from '../base/TMButton';
+import TMSummary from '../editors/TMSummary';
+import TMChooserForm from '../forms/TMChooserForm';
+const TMMetadataChooser = ({ tmSession, dataSource, inputDcmtTypesList, disabled, validationItems, getColorIndex, showCompleteMetadataName, qdShowOnlySelectItems, borderRadius = '4px', fontSize = FontSize.defaultFontSize, backgroundColor, openEditorOnSummaryClick, showBorder = true, showId = false, elementStyle, allowMultipleSelection, allowSysMetadata, value, values, isModifiedWhen, tids, label, width, height, onValueChanged, hasClear, qd, placeHolder }) => {
+    const [showChooser, setShowChooser] = useState(false);
+    const renderTemplate = () => {
+        return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], 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(_Fragment, { children: [_jsx(TMSummary, { label: label, width: width, height: showBorder ? height : '24px', validationItems: validationItems, backgroundColor: backgroundColor, placeHolder: placeHolder, fontSize: fontSize, showBorder: showBorder, borderRadius: borderRadius, iconEditButton: _jsx(IconSearch, {}), openEditorOnSummaryClick: openEditorOnSummaryClick, onEditorClick: () => !disabled && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, template: renderTemplate(), onClearClick: hasClear ? () => { onValueChanged?.([]); } : undefined }), showChooser &&
+                _jsx(TMMetadataChooserForm, { tmSession: tmSession, allowMultipleSelection: allowMultipleSelection, height: '500px', width: '600px', allowSysMetadata: allowSysMetadata, getColorIndex: getColorIndex, dataSource: dataSource, inputDcmtTypesList: inputDcmtTypesList, tids: tids, qd: qd, qdShowOnlySelectItems: qdShowOnlySelectItems, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (tid_mids) => { onValueChanged?.(tid_mids); } })] }));
+};
+export default TMMetadataChooser;
+export const TMMetadataChooserForm = ({ tmSession, tids, inputDcmtTypesList, qd, qdShowOnlySelectItems, selectedIDs, dataSource, allowMultipleSelection, allowSysMetadata = true, width, height, getColorIndex, onClose, onChoose }) => {
+    const [showSysMetadata, setShowSysMetadata] = useState(false);
+    const [hasSysMetadata, setHasSysMetadata] = useState(false);
+    const [dcmtTypes, setDcmtTypes] = useState([]);
+    const getItems = async (refreshCache) => {
+        let dtdList = [];
+        let metadata = [];
+        let checkProps = qd != undefined ? dataSource != undefined || tids != undefined : dataSource != undefined && tids != undefined;
+        if (checkProps)
+            throw Error('Le props qd | tids | dataSource devono essere in alternativa');
+        if (qd) {
+            let tids = getTIDsByQd(qd);
+            if (refreshCache)
+                DcmtTypeListCacheService.RemoveWithMetadata(tids.map((item) => item.tid));
+            let dtds = await DcmtTypeListCacheService.GetFromTIDsAsync(tids.map((item) => item.tid), true, tmSession);
+            for (let i = 0; i < dtds.length; i++) {
+                const dtd = new DcmtTypeDescriptor();
+                dtd.init({ ...dtds[i] });
+                const alias = tids?.[i].alias;
+                dtd.customData2 = alias;
+                if (!qdShowOnlySelectItems) {
+                    dtd.metadata?.forEach((md) => {
+                        md.customData1 = dtd.id;
+                        md.customData2 = alias;
+                    }); //getDisplayAlias(SDK_Globals.useLocalizedName ? dtd.nameLoc : dtd.name, alias)
+                }
+                else {
+                    let newMetadata = dtd.metadata?.filter(o => qd.select?.some(s => s.tid == dtd.id && s.mid == o.id && s.alias == alias));
+                    newMetadata?.forEach((md) => {
+                        md.customData1 = dtd.id;
+                        md.customData2 = alias;
+                    });
+                    dtd.metadata = newMetadata;
+                }
+                dtdList.push(dtd);
+            }
+        }
+        else if (inputDcmtTypesList) {
+            for (let i = 0; i < inputDcmtTypesList.length; i++) {
+                const dtd = new DcmtTypeDescriptor();
+                dtd.init({ ...inputDcmtTypesList[i] });
+                dtd.metadata?.forEach((md) => { md.customData1 = dtd.id; });
+                dtdList.push(dtd);
+            }
+        }
+        else if (tids) {
+            if (tids.length <= 0)
+                return [];
+            if (refreshCache)
+                DcmtTypeListCacheService.RemoveWithMetadata(tids);
+            for (let i = 0; i < tids.length; i++) {
+                if (!tids[i])
+                    continue;
+                let dtd = await DcmtTypeListCacheService.GetAsync(tids[i], true, tmSession);
+                if (!dtd)
+                    throw new Error(`TID sconosciuto (${tids[i]})`);
+                dtd?.metadata?.forEach((md) => { md.customData1 = dtd?.id; });
+                dtdList.push(dtd);
+            }
+        }
+        for (const dtd of dtdList) {
+            if (!dtd.metadata)
+                continue;
+            for (const md of dtd.metadata)
+                metadata.push(md);
+        }
+        setDcmtTypes(dtdList);
+        setHasSysMetadata(allowSysMetadata && metadata.findIndex(md => md.isSystem == 1) >= 0);
+        return metadata;
+    };
+    const cellRenderIcon = (data) => {
+        let md = data.data;
+        return (_jsx(TMMetadataIcon, { tid: md.customData1 ?? 0, md: md }));
+    };
+    const groupCellRender = (data) => {
+        let tid_alias = JSON.parse(data.value);
+        let dtd = dcmtTypes?.find(o => o.id == tid_alias.tid);
+        return _jsxs(StyledDxGridGroupHeader, { "$backgroundColor": getColorIndex?.(tid_alias), children: [_jsx(TMDcmtTypeIcon, { dtd: dtd }), _jsx("p", { children: getDisplayAlias(SDK_Globals.useLocalizedName ? dtd?.nameLoc : dtd?.name, tid_alias.alias) }), data.summaryItems && data.summaryItems.length > 0 && _jsx(StyledBadge, { "$backgroundColor": TMColors.info, children: data.summaryItems[0].value })] });
+    };
+    const renderDataGridColumns = [
+        _jsx(Column, { dataField: 'isSystem', visible: false, width: 30 }, 0),
+        _jsx(Column, { dataField: 'customData2', visible: false, groupIndex: dcmtTypes.length > 1 ? 0 : undefined, calculateCellValue: (rowData) => {
+                let tid_alias = { tid: rowData.customData1, alias: rowData.customData2 };
+                return JSON.stringify(tid_alias);
+            }, groupCellRender: groupCellRender }, 1)
+    ];
+    const renderSummaryItems = [
+        _jsx(GroupItem, { column: "id", summaryType: "count" }, 2)
+    ];
+    const renderCustomButtons = () => {
+        return (_jsx(StyledDivHorizontal, { children: hasSysMetadata && _jsx(TMButton, { caption: SDKUI_Localizator.ShowHideMetadataSystemDesc, icon: _jsx(IconSettings, {}), btnStyle: 'toolbar', fontSize: '1.3rem', onClick: () => setShowSysMetadata(!showSysMetadata) }) }));
+    };
+    const convertID = (md) => { return { tid: md.customData1, mid: md.id, aliasTID: md.customData2 }; };
+    const customFilter = (items) => { return showSysMetadata ? items : items.filter(o => o.isSystem != 1); };
+    return (_jsx(TMChooserForm, { title: SDK_Localizator.Metadatas, allowMultipleSelection: allowMultipleSelection, allowSorting: false, allowGrouping: dcmtTypes.length > 1, width: width, height: height, selectedIDs: selectedIDs?.map((item) => item.mid), convertID: convertID, customFilter: customFilter, cellRenderIcon: cellRenderIcon, cellRenderNameAndDesc: (data) => { return _jsx("p", { style: { textAlign: 'left', color: data.data.isRequired == 1 ? 'red' : '' }, children: data.value }); }, dataSource: dataSource, getItems: getItems, customButtons: renderCustomButtons(), columns: renderDataGridColumns, summaryItems: renderSummaryItems, onClose: onClose, onChoose: (IDs) => onChoose?.(IDs) }));
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { UserDescriptor } from '@topconsultnpm/sdk-ts-beta';
+import { ITMChooserFormProps, ITMChooserProps } from '../../ts';
+interface ITMUserChooserProps extends ITMChooserProps {
+    /** Contiene i values selezionati  */
+    values?: number[];
+    /** Visualizza il bordo  */
+    showBorder?: boolean;
+    /** Se presente, visualizza il bottone Pulisci ed esegue  */
+    hasClear?: boolean;
+}
+declare const TMUserChooser: React.FunctionComponent<ITMUserChooserProps>;
+export default TMUserChooser;
+export declare const TMUserChooserForm: React.FunctionComponent<ITMChooserFormProps<UserDescriptor>>;
+export declare const TMUserIdViewer: ({ userId, showIcon, noneSelectionText }: {
+    userId?: number;
+    showIcon?: boolean;
+    noneSelectionText?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const TMUserIcon: ({ ud }: {
+    ud?: UserDescriptor;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export declare const TMUserTooltip: ({ ud, children }: {
+    ud?: UserDescriptor;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/components/choosers/TMUserChooser.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { SDK_Localizator, UserLevels, UserListCacheService } from '@topconsultnpm/sdk-ts-beta';
+import { Column } from 'devextreme-react/cjs/data-grid';
+import { SDKUI_Localizator, IconSearch, IconUserLevelMember, IconUserLevelAdministrator, IconUserLevelSystemAdministrator, IconUserLevelAutonomousAdministrator } from '../../helper';
+import { StyledDivHorizontal, StyledTooltipContainer, StyledTooltipItem, StyledTooltipSeparatorItem } from '../base/Styled';
+import TMSpinner from '../base/TMSpinner';
+import TMTooltip from '../base/TMTooltip';
+import TMSummary from '../editors/TMSummary';
+import TMChooserForm from '../forms/TMChooserForm';
+const TMUserChooser = ({ dataSource, backgroundColor, disabled = false, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged, hasClear }) => {
+    const [showChooser, setShowChooser] = useState(false);
+    useEffect(() => {
+        if (!values || values.length <= 0)
+            return;
+        TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.Users} ...` });
+        UserListCacheService.GetAsync(values[0]).then(() => { TMSpinner.hide(); });
+    }, [values]);
+    const renderTemplate = () => {
+        return (_jsx(StyledDivHorizontal, { style: { minWidth: '125px' }, children: placeHolder && (!values || values.length <= 0)
+                ? _jsx("p", { children: placeHolder })
+                : _jsxs(_Fragment, { children: [_jsx(TMUserIdViewer, { userId: values?.[0], showIcon: true }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }) }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { disabled: disabled, backgroundColor: backgroundColor, showBorder: showBorder, iconEditButton: _jsx(IconSearch, {}), onEditorClick: () => setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: hasClear ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
+                _jsx(TMUserChooserForm, { allowMultipleSelection: allowMultipleSelection, dataSource: dataSource, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
+};
+export default TMUserChooser;
+export const TMUserChooserForm = (props) => {
+    const renderDataGridColumns = [
+        _jsx(Column, { dataField: "domain", visibleIndex: 2, caption: SDKUI_Localizator.Domain, dataType: 'string' }, 3)
+    ];
+    const getItems = async (refreshCache) => {
+        TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.Users} ...` });
+        if (refreshCache)
+            UserListCacheService.RemoveAll();
+        let users = await UserListCacheService.GetAllAsync();
+        TMSpinner.hide();
+        return users;
+    };
+    return (_jsx(TMChooserForm, { title: SDK_Localizator.Users, allowMultipleSelection: props.allowMultipleSelection, hasShowOnlySelectedItems: true, width: props.width, height: props.height, manageUseLocalizedName: false, columns: renderDataGridColumns, selectedIDs: props.selectedIDs, cellRenderIcon: (data) => { return _jsx(TMUserIcon, { ud: data.data }); }, dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => props.onChoose?.(IDs) }));
+};
+export const TMUserIdViewer = ({ userId, showIcon = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
+    const [ud, setUd] = useState();
+    useEffect(() => {
+        if (!userId || userId <= 0) {
+            setUd(undefined);
+            return;
+        }
+        TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.Users} ...` });
+        UserListCacheService.GetAsync(userId).then((ud) => { setUd(ud); TMSpinner.hide(); });
+    }, [userId]);
+    return (_jsxs(StyledDivHorizontal, { children: [showIcon && _jsx(TMUserIcon, { ud: ud }), _jsx("p", { style: { textAlign: 'left', marginLeft: showIcon ? '5px' : '' }, children: ud ? getCompleteUserName(ud.domain, ud.name) : noneSelectionText })] }));
+};
+export const TMUserIcon = ({ ud }) => {
+    if (!ud)
+        return null;
+    let icon = getUserIcon(ud.level);
+    return (_jsx(TMUserTooltip, { ud: ud, children: icon }));
+};
+export const TMUserTooltip = ({ ud, children }) => {
+    const renderTooltipContent = (ud) => {
+        return (!ud ? null
+            : _jsxs(StyledTooltipContainer, { children: [_jsx(StyledTooltipItem, { children: `${getCompleteUserName(ud.domain, ud.name)} (UserId: ${ud.id})` }), ud.level && _jsx(StyledTooltipItem, { children: ud.level }), _jsx(StyledTooltipSeparatorItem, {}), ud.description && _jsx(StyledTooltipItem, { children: ud.description }), ud.type && _jsx(StyledTooltipItem, { children: ud.type })] }));
+    };
+    return (_jsx(TMTooltip, { content: renderTooltipContent(ud), children: children }));
+};
+const getCompleteUserName = (domain, name) => {
+    if (!name)
+        return undefined;
+    if (!domain)
+        return name;
+    return domain + "\\" + name;
+};
+const getUserIcon = (userLevel) => {
+    switch (userLevel) {
+        case UserLevels.Member: return _jsx(IconUserLevelMember, {});
+        case UserLevels.Administrator: return _jsx(IconUserLevelAdministrator, {});
+        case UserLevels.SystemAdministrator: return _jsx(IconUserLevelSystemAdministrator, {});
+        case UserLevels.AutonomousAdministrator: return _jsx(IconUserLevelAutonomousAdministrator, {});
+        default: return null;
+    }
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ITMEditorBase } from '../base/TMEditorBase';
+export interface ITMCheckBox extends ITMEditorBase {
+    label?: string;
+    value?: boolean | number | undefined;
+    onValueChanged?: (e: any) => void;
+}
+declare const TMCheckBox: React.FunctionComponent<ITMCheckBox>;
+export default TMCheckBox;