@topconsultnpm/sdkui-react 6.19.0-dev1.10

package/lib/components/sidebar/TMSidebar.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { AccessLevelsEx, DcmtTypeListCacheService, SDK_Globals } from '@topconsultnpm/sdk-ts';
+import { ScrollView } from 'devextreme-react';
+import { TMColors } from '../../utils/theme';
+import TMSpinner from '../base/TMSpinner';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
+const StyledTMSidebarContainer = styled.div `
+    top: ${props => props.$top || '53px'};
+    left: ${props => props.$left || '0px'};
+    width: ${props => props.$width || '50px'};
+    height: ${props => props.$height || 'calc(100% - 88px)'};
+    background: ${() => TMColors.primaryColor} 0% 0% no-repeat padding-box;
+    box-shadow: 0px 3px 6px #00000029;
+    border-radius: 0;
+    opacity: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 0px;
+    position: absolute;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+    overflow: hidden;
+`;
+const FixedBottomContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    bottom: 10px;
+`;
+const TMSidebar = ({ items, height, borderRightRadius, left, top, width }) => {
+    const [canArchive, setCanArhive] = useState(false);
+    const [canSearch, setCanSearch] = useState(false);
+    useEffect(() => {
+        getAllDcmtTypesAsync();
+    }, []);
+    const getAllDcmtTypesAsync = async () => {
+        try {
+            TMSpinner.show();
+            const res = await DcmtTypeListCacheService.GetAllWithoutMetadataAsync();
+            if (!res)
+                return;
+            if (res.some(r => r.perm?.canArchive === AccessLevelsEx.Yes))
+                setCanArhive(true);
+            if (res.some(r => r.perm?.canSearch === AccessLevelsEx.Yes))
+                setCanSearch(true);
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    };
+    return (_jsxs(StyledTMSidebarContainer, { "$borderRightRadius": borderRightRadius, "$left": left, "$top": top, "$width": width, "$appName": SDK_Globals.appModule, "$height": height, children: [_jsx(ScrollView, { height: "100%", width: "100%", style: { padding: "5px 0 0 5px" }, useNative: true, children: items.filter(item => item.props.type !== 'app') }), _jsx(FixedBottomContainer, { children: items.filter(item => item.props.type === 'app') })] }));
+};
+export default TMSidebar;

package/lib/components/sidebar/TMSidebarItem.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { AppRouteType } from './TMSidebar';
+export interface ITMSidebarItem {
+    name: any;
+    path: string;
+    type?: AppRouteType;
+    isSelected: boolean;
+    icon: any;
+    badgeNumber?: number;
+    onClick?: (e: ITMSidebarItem) => void;
+    isAppIcon?: boolean;
+    tooltipContent?: React.ReactNode | string;
+}
+declare const TMSidebarItem: React.FunctionComponent<ITMSidebarItem>;
+export default TMSidebarItem;

package/lib/components/sidebar/TMSidebarItem.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import TMTooltip from '../base/TMTooltip';
+import { SDK_Globals } from '@topconsultnpm/sdk-ts';
+import { TMColors } from '../../utils/theme';
+var ApplicationThemeColor;
+(function (ApplicationThemeColor) {
+    ApplicationThemeColor["SURFER"] = "#1d6f42";
+    ApplicationThemeColor["ORCHESTRATOR"] = "#135596";
+    // DESIGNER = '#6b173e'
+    ApplicationThemeColor["DESIGNER"] = "#482234";
+})(ApplicationThemeColor || (ApplicationThemeColor = {}));
+const StyledTMSidebarItemContainer = styled.div `
+    margin-bottom: 10px;
+    background-color: transparent;
+    padding: 5px 0 0 5px;
+    transition: all 200ms ease;
+    user-select: none;
+    cursor: pointer;
+    color:  ${(props) => props.$isSelected ? TMColors.primaryColor : '#fff'};
+    background-color: ${props => props.$isSelected ? 'white' : 'transparent'} ;
+    border-radius: 3px;
+    width: 32px;
+    height: 32px;
+
+    p {
+        display: none;
+    }
+
+    &:hover {
+        background-color: ${props => !props.$isApp && 'white'};
+        color: ${props => !props.$isApp && TMColors.primaryColor};
+    }
+`;
+const TMSidebarItem = (props) => {
+    let app = SDK_Globals.appModule;
+    return (_jsx(TMTooltip, { hideAfterDelay: true, content: props.tooltipContent ?? props.name, children: _jsxs(StyledTMSidebarItemContainer, { "$app": app, "$isApp": props.isAppIcon, onClick: () => props.onClick?.(props), style: { position: 'relative' }, "$isSelected": props.isSelected, children: [_jsxs("div", { children: [_jsx("i", { children: props.icon }), _jsx("p", { children: props.name })] }), props.badgeNumber > 0 && _jsx("div", { style: { width: '22px', height: '22px', backgroundColor: '#f09c0a', position: 'absolute', borderRadius: '22px', top: -6, right: -6, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1rem', fontWeight: 'bold' }, children: props.badgeNumber })] }) }));
+};
+export default TMSidebarItem;

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

@@ -0,0 +1,10 @@
+import { DataListViewModes } from '@topconsultnpm/sdk-ts';
+import { DataGridTypes } from 'devextreme-react/cjs/data-grid';
+interface ITMDataListItemViewerProps {
+    dataListId?: number;
+    value?: string | Date | number;
+    viewMode?: DataListViewModes;
+}
+declare const TMDataListItemViewer: ({ dataListId, value, viewMode }: ITMDataListItemViewerProps) => import("react/jsx-runtime").JSX.Element;
+export default TMDataListItemViewer;
+export declare const cellRenderDataListItem: (data: DataGridTypes.ColumnCellTemplateData, dataListId?: number, viewMode?: DataListViewModes) => import("react/jsx-runtime").JSX.Element;

package/lib/components/viewers/TMDataListItemViewer.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { DataListCacheService, DataListViewModes } from '@topconsultnpm/sdk-ts';
+import { IconWarning, SDKUI_Localizator, TMImageLibrary } from '../../helper';
+import { StyledDivHorizontal } from '../base/Styled';
+import TMTooltip from '../base/TMTooltip';
+import { TMColors } from '../../utils/theme';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
+import { FormulaHelper } from '../editors/TMFormulaEditor';
+const TMDataListItemViewer = ({ dataListId, value, viewMode = DataListViewModes.ImageAndDescription }) => {
+    const [dataListItem, setDataListItem] = useState();
+    useEffect(() => {
+        if (!dataListId || value === undefined || value === null) {
+            setDataListItem(undefined);
+            return;
+        }
+        let stringValue;
+        if (value instanceof Date) {
+            stringValue = value.toISOString();
+        }
+        else if (typeof value === 'number') {
+            stringValue = value.toString();
+        }
+        else {
+            stringValue = value;
+        }
+        DataListCacheService.GetAsync(dataListId).then((dl) => { setDataListItem(dl?.items?.find(o => o.value == stringValue)); }).catch((err) => { TMExceptionBoxManager.show({ exception: err }); });
+    }, [dataListId, value]);
+    let showIcon = viewMode != DataListViewModes.Description;
+    const getIcon = () => {
+        if (!showIcon)
+            return null;
+        if (value === undefined || value === null)
+            return null;
+        let stringValue;
+        if (value instanceof Date) {
+            stringValue = value.toISOString();
+        }
+        else if (typeof value === 'number') {
+            stringValue = value.toString();
+        }
+        else {
+            stringValue = value;
+        }
+        if (FormulaHelper.isFormula(stringValue))
+            return null;
+        return dataListItem ? _jsx(TMImageLibrary, { imageID: dataListItem.imageID }) : _jsx(IconWarning, { color: TMColors.warning });
+    };
+    const getDescription = () => {
+        if (!dataListId)
+            return undefined;
+        if (value === undefined || value === null)
+            return undefined;
+        let displayValue;
+        if (value instanceof Date) {
+            displayValue = value.toLocaleDateString();
+        }
+        else if (typeof value === 'number') {
+            displayValue = value.toString();
+        }
+        else {
+            displayValue = value;
+        }
+        return dataListItem ? dataListItem.name : displayValue;
+    };
+    return (_jsx(TMTooltip, { content: dataListItem ? dataListItem.value : SDKUI_Localizator.ValueNotPresent, parentStyle: { width: '100%' }, childStyle: { width: '100%' }, children: _jsxs(StyledDivHorizontal, { style: { width: '100%' }, children: [getIcon(), _jsx("p", { style: {
+                        textAlign: 'left',
+                        marginLeft: showIcon ? '5px' : '',
+                        opacity: dataListItem ? 1 : 0.5,
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        flexGrow: 1,
+                        minWidth: 0
+                    }, children: getDescription() })] }) }));
+};
+export default TMDataListItemViewer;
+export const cellRenderDataListItem = (data, dataListId, viewMode) => {
+    return (_jsx(TMDataListItemViewer, { dataListId: dataListId, value: data.value, viewMode: viewMode }));
+};

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ITopMediaSession, LayoutModes, MetadataDescriptor } from '@topconsultnpm/sdk-ts';
+import { TID_MID } from '../../ts';
+import { DataGridTypes } from 'devextreme-react/cjs/data-grid';
+export interface ITMMidViewerProps {
+    tmSession?: ITopMediaSession;
+    tid_mid: TID_MID | undefined;
+    inputMd?: MetadataDescriptor;
+    color?: string;
+    showCompleteName?: boolean;
+    showIcon?: boolean;
+    showId?: boolean;
+    noneSelectionText?: string;
+    isMetadataSelected?: boolean;
+}
+export declare const TMMidViewer: React.FC<ITMMidViewerProps>;
+interface ITMMetadataIcon {
+    tid: number | undefined;
+    md: MetadataDescriptor | undefined;
+    color?: string;
+    layoutMode?: LayoutModes;
+    isMetadataSelected?: boolean;
+    elementStyle?: React.CSSProperties;
+}
+export declare const TMMetadataIcon: ({ tid, md, color, layoutMode, isMetadataSelected, elementStyle }: ITMMetadataIcon) => import("react/jsx-runtime").JSX.Element | null;
+interface ITMMetadataTooltip {
+    tid: number | undefined;
+    md: MetadataDescriptor | undefined;
+    color?: string;
+    children?: React.ReactNode;
+    layoutMode?: LayoutModes;
+}
+export declare const TMMetadataTooltip: React.FC<ITMMetadataTooltip>;
+export declare const cellRenderMID: (data: DataGridTypes.ColumnCellTemplateData, noneSelectionText?: string, tid?: number) => import("react/jsx-runtime").JSX.Element;
+export declare const getDisplayAlias: (dcmtTypeName: string | undefined, alias: string | undefined) => string | undefined;
+export {};

package/lib/components/viewers/TMMidViewer.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { IconLocked, IconMetadata_Computed, IconMetadata_DataList, IconMetadata_Date, IconMetadata_DynamicDataList, IconMetadata_Numerator, IconMetadata_Numeric, IconMetadata_Special, IconMetadata_Text, IconMetadata_User, LocalizeMetadataFormats, SDKUI_Localizator, getCompleteMetadataName, getTIDByMID } from '../../helper';
+import { DcmtTypeListCacheService, LayoutModes, MetadataDataDomains, MetadataDataTypes, MetadataFormats, ObjectClasses, SDK_Globals } from '@topconsultnpm/sdk-ts';
+import { StyledDivHorizontal, StyledTooltipContainer, StyledTooltipItem, StyledTooltipSeparatorItem } from '../base/Styled';
+import TMTooltip from '../base/TMTooltip';
+import { TMColors } from '../../utils/theme';
+export const TMMidViewer = ({ isMetadataSelected = false, color, tmSession, tid_mid, inputMd, showCompleteName, showIcon = false, showId = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
+    const [md, setMd] = useState();
+    const [dcmtTypeName, setDcmtTypeName] = useState();
+    useEffect(() => {
+        if (inputMd) {
+            setMd(inputMd);
+            return;
+        }
+        if (!tid_mid?.tid || tid_mid.tid <= 0) {
+            setMd(undefined);
+            return;
+        }
+        //Passiamo did = undefined, perché è già in cache
+        DcmtTypeListCacheService.GetWithNotGrantedAsync(tid_mid.tid, undefined, undefined, true, tmSession).then((dtd) => {
+            setDcmtTypeName(getDisplayAlias(SDK_Globals.useLocalizedName ? dtd?.nameLoc : dtd?.name, tid_mid.aliasTID));
+            let md = dtd?.metadata?.find(o => o.id == tid_mid.mid);
+            setMd(md);
+        });
+    }, [tid_mid, inputMd]);
+    const displayName = () => {
+        if (!md)
+            return noneSelectionText;
+        if (showCompleteName)
+            return getCompleteMetadataName(dcmtTypeName, SDK_Globals.useLocalizedName ? md.nameLoc : md.name);
+        return SDK_Globals.useLocalizedName ? md.nameLoc : md.name;
+    };
+    return (_jsxs(StyledDivHorizontal, { style: {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            color: md?.isRequired == 1 ? 'red' : color,
+        }, children: [showIcon && _jsx(TMMetadataIcon, { isMetadataSelected: isMetadataSelected, tid: tid_mid?.tid, md: md, color: color }), _jsx("p", { title: displayName(), style: {
+                    textAlign: 'left',
+                    marginLeft: showIcon ? '5px' : '',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis'
+                }, children: displayName() }), showId && _jsx("p", { style: { padding: '0px 3px' }, children: `(MID: ${tid_mid?.mid})` })] }));
+};
+export const TMMetadataIcon = ({ tid, md, color, layoutMode = LayoutModes.Update, isMetadataSelected = false, elementStyle }) => {
+    let selectedMetadataStyle = { borderBottom: isMetadataSelected ? `thick solid ${TMColors.text_normal}` : 'none', height: 'max-content' };
+    if (!md)
+        return null;
+    let isNumeratorInArk = md.dataDomain === MetadataDataDomains.Numerator && layoutMode === LayoutModes.Ark;
+    let iconColor = md.isRequired === 1 && !isNumeratorInArk ? TMColors.error : (color ?? TMColors.text_normal);
+    let icon = null;
+    if (md.objectClass === ObjectClasses.Permission)
+        icon = _jsx(IconLocked, { fontSize: 16 });
+    else {
+        switch (md.dataDomain) {
+            case MetadataDataDomains.Computed:
+                icon = _jsx(IconMetadata_Computed, { style: selectedMetadataStyle, fontSize: 16, color: iconColor });
+                break;
+            case MetadataDataDomains.DataList:
+                icon = _jsx(IconMetadata_DataList, { style: selectedMetadataStyle, fontSize: 16, color: iconColor });
+                break;
+            case MetadataDataDomains.DynamicDataList:
+                icon = _jsx(IconMetadata_DynamicDataList, { style: selectedMetadataStyle, fontSize: 16, color: iconColor });
+                break;
+            case MetadataDataDomains.Numerator:
+                icon = _jsx(IconMetadata_Numerator, { style: selectedMetadataStyle, fontSize: 16, color: TMColors.primaryColor });
+                break;
+            case MetadataDataDomains.Special:
+                icon = _jsx(IconMetadata_Special, { style: selectedMetadataStyle, fontSize: 16, color: iconColor });
+                break;
+            case MetadataDataDomains.UserID:
+                icon = _jsx(IconMetadata_User, { style: selectedMetadataStyle, fontSize: 16, color: iconColor });
+                break;
+            default:
+                switch (md.dataType) {
+                    case MetadataDataTypes.Varchar:
+                        icon = _jsx(IconMetadata_Text, { style: selectedMetadataStyle, fontSize: 16, color: iconColor });
+                        break;
+                    case MetadataDataTypes.Number:
+                        icon = _jsx(IconMetadata_Numeric, { style: selectedMetadataStyle, fontSize: 16, color: iconColor });
+                        break;
+                    case MetadataDataTypes.DateTime:
+                        icon = _jsx(IconMetadata_Date, { style: selectedMetadataStyle, fontSize: 16, color: iconColor });
+                        break;
+                    default:
+                        icon = _jsx(_Fragment, {});
+                        break;
+                }
+                break;
+        }
+    }
+    return (_jsx(_Fragment, { children: icon
+            ? _jsx(TMMetadataTooltip, { tid: tid, md: md, layoutMode: layoutMode, color: color, children: icon })
+            : null }));
+};
+export const TMMetadataTooltip = ({ tid, md, color, children, layoutMode = LayoutModes.Update }) => {
+    const _setDefaultValueForUI = (defaultValue) => {
+        if (!defaultValue)
+            return defaultValue;
+        if (!defaultValue.includes("TM_GetViewLink"))
+            return defaultValue;
+        return "=TM_GetViewLink(...)";
+    };
+    let isNumeratorInArk = md?.dataDomain === MetadataDataDomains.Numerator && layoutMode === LayoutModes.Ark;
+    const renderTooltipContent = (tid, md) => {
+        return (!md ? null
+            : _jsxs(StyledTooltipContainer, { children: [_jsx(StyledTooltipItem, { "$color": color, children: `${SDK_Globals.useLocalizedName ? md.nameLoc : md.name} (TID: ${tid}, MID: ${md.id})` }), md.description && _jsx(StyledTooltipItem, { "$color": color, children: md.description }), _jsx(StyledTooltipSeparatorItem, { color: color }), md.objectClass === ObjectClasses.Permission && _jsx(StyledTooltipItem, { style: { fontWeight: 600 }, children: 'Tipo documento NON autorizzato' }), _jsx(StyledTooltipSeparatorItem, { color: color }), _jsxs(StyledTooltipItem, { "$color": color, children: [md.dataType, " ", md.dataType == MetadataDataTypes.Varchar ? `(${md.length ?? 0})` : md.dataType == MetadataDataTypes.Number ? `(${md.length ?? 0},${md.scale ?? 0})` : '', md.isPrimaryKey === 1 ? ' (PK)' : ''] }), _jsx(StyledTooltipItem, { style: { color: md.isRequired === 1 && !isNumeratorInArk ? TMColors.error : color }, children: md.isRequired === 1 && !isNumeratorInArk ? SDKUI_Localizator.Required : SDKUI_Localizator.RequiredNOT }), md.dataDomain && _jsx(StyledTooltipItem, { "$color": color, children: md.dataDomain }), md.isLexProt == 1 && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.Yes}` }), md.isLexProt == 2 && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.MetadataFlag}` }), md.isLexProt == 3 && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.Yes} (${SDKUI_Localizator.MetadataFlag})` }), md.isFreeSearchInput && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Search_Free}: ${SDKUI_Localizator.Yes}` }), md.isSpecialSearchOutput && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Search_Special}: ${SDKUI_Localizator.Yes}` }), md.format?.format && md.format.format != MetadataFormats.None && _jsx(StyledTooltipItem, { color: color, children: `${SDKUI_Localizator.Format}: ${LocalizeMetadataFormats(md.format.format)}` }), md.defaultValue && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Default}: ${_setDefaultValueForUI(md.defaultValue)}` }), md.fromTID && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.MetadataRoot}: ${md.isRootMID == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No}` }), md.templateMID && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Template}: ${md.templateMID}` }), md.perm && _jsxs(_Fragment, { children: [_jsx(StyledTooltipItem, { "$color": 'primary', "$marginTop": '5px', children: SDKUI_Localizator.Perms }), _jsx(StyledTooltipSeparatorItem, { color: color }), _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Archive}: ${md.perm.canArchive ?? SDKUI_Localizator.No}` }), _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.View_Metadato}: ${md.perm.canView ?? SDKUI_Localizator.No}` }), _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Search}: ${md.perm.canSearch ?? SDKUI_Localizator.No}` }), _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Update}: ${md.perm.canUpdate ?? SDKUI_Localizator.No}` })] })] }));
+    };
+    return (_jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMTooltip, { content: renderTooltipContent(tid, md), children: children }) }));
+};
+export const cellRenderMID = (data, noneSelectionText, tid) => {
+    let mid = data.value;
+    let calcTid = !tid ? getTIDByMID(mid) : tid;
+    return (_jsx(TMMidViewer, { tid_mid: { tid: calcTid, mid: mid }, noneSelectionText: noneSelectionText }));
+};
+export const getDisplayAlias = (dcmtTypeName, alias) => {
+    if (!alias)
+        return dcmtTypeName;
+    let tokens = alias.split('_');
+    if (tokens.length != 2)
+        return dcmtTypeName;
+    let num = tokens[1].replace("A", "");
+    if (!num)
+        return dcmtTypeName;
+    return `${dcmtTypeName}_${num}`;
+};

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

@@ -0,0 +1,256 @@
+import React from 'react';
+import { DcmtTypeDescriptor, ITopMediaSession } from '@topconsultnpm/sdk-ts';
+import { DataGridTypes } from 'devextreme-react/cjs/data-grid';
+export declare enum ImageIDList {
+    arrow_001 = "arrow_001",
+    arrow_002 = "arrow_002",
+    arrow_004 = "arrow_004",
+    arrow_005 = "arrow_005",
+    arrow_006 = "arrow_006",
+    arrow_007 = "arrow_007",
+    arrow_008 = "arrow_008",
+    arrow_009 = "arrow_009",
+    arrow_010 = "arrow_010",
+    arrow_011 = "arrow_011",
+    arrow_012 = "arrow_012",
+    book_001 = "book_001",
+    book_002 = "book_002",
+    book_003 = "book_003",
+    book_004 = "book_004",
+    book_005 = "book_005",
+    book_006 = "book_006",
+    book_007 = "book_007",
+    clock_001 = "clock_001",
+    clock_002 = "clock_002",
+    clock_003 = "clock_003",
+    cube_001 = "cube_001",
+    cube_002 = "cube_002",
+    cube_003 = "cube_003",
+    dcmt_001 = "dcmt_001",
+    dcmt_002 = "dcmt_002",
+    dcmt_003 = "dcmt_003",
+    dcmt_004 = "dcmt_004",
+    dcmt_005 = "dcmt_005",
+    dcmt_006 = "dcmt_006",
+    dcmt_007 = "dcmt_007",
+    dcmt_008 = "dcmt_008",
+    emoticon_001 = "emoticon_001",
+    emoticon_002 = "emoticon_002",
+    emoticon_003 = "emoticon_003",
+    emoticon_004 = "emoticon_004",
+    fld_001 = "fld_001",
+    fld_002 = "fld_002",
+    fld_003 = "fld_003",
+    fld_004 = "fld_004",
+    fld_005 = "fld_005",
+    fld_006 = "fld_006",
+    fld_007 = "fld_007",
+    fld_008 = "fld_008",
+    fld_009 = "fld_009",
+    fld_010 = "fld_010",
+    fld_011 = "fld_011",
+    fld_012 = "fld_012",
+    fld_013 = "fld_013",
+    fld_014 = "fld_014",
+    fld_015 = "fld_015",
+    fld_016 = "fld_016",
+    fld_017 = "fld_017",
+    fld_018 = "fld_018",
+    fld_019 = "fld_019",
+    fld_020 = "fld_020",
+    fld_021 = "fld_021",
+    fld_022 = "fld_022",
+    fld_023 = "fld_023",
+    fld_024 = "fld_024",
+    fld_025 = "fld_025",
+    fld_026 = "fld_026",
+    fld_027 = "fld_027",
+    fld_028 = "fld_028",
+    fld_029 = "fld_029",
+    fld_030 = "fld_030",
+    fld_031 = "fld_031",
+    fld_032 = "fld_032",
+    fld_033 = "fld_033",
+    gen_001 = "gen_001",
+    gen_002 = "gen_002",
+    gen_003 = "gen_003",
+    gen_004 = "gen_004",
+    gen_005 = "gen_005",
+    gen_006 = "gen_006",
+    gen_007 = "gen_007",
+    gen_008 = "gen_008",
+    gen_009 = "gen_009",
+    gen_010 = "gen_010",
+    gen_011 = "gen_011",
+    gen_012 = "gen_012",
+    gen_013 = "gen_013",
+    gen_014 = "gen_014",
+    gen_015 = "gen_015",
+    gen_016 = "gen_016",
+    gen_017 = "gen_017",
+    gen_018 = "gen_018",
+    gen_019 = "gen_019",
+    gen_020 = "gen_020",
+    gen_021 = "gen_021",
+    gen_022 = "gen_022",
+    gen_023 = "gen_023",
+    gen_024 = "gen_024",
+    gen_025 = "gen_025",
+    gen_026 = "gen_026",
+    gen_027 = "gen_027",
+    gen_028 = "gen_028",
+    gen_029 = "gen_029",
+    gen_030 = "gen_030",
+    gen_031 = "gen_031",
+    gen_032 = "gen_032",
+    gen_033 = "gen_033",
+    gen_034 = "gen_034",
+    gen_035 = "gen_035",
+    gen_036 = "gen_036",
+    gen_037 = "gen_037",
+    gen_038 = "gen_038",
+    gen_039 = "gen_039",
+    gen_040 = "gen_040",
+    gen_041 = "gen_041",
+    gen_042 = "gen_042",
+    gen_043 = "gen_043",
+    gen_044 = "gen_044",
+    gen_045 = "gen_045",
+    gen_046 = "gen_046",
+    gen_047 = "gen_047",
+    gen_048 = "gen_048",
+    gen_049 = "gen_049",
+    gen_050 = "gen_050",
+    gen_051 = "gen_051",
+    gen_052 = "gen_052",
+    hand_001 = "hand_001",
+    hand_002 = "hand_002",
+    hand_003 = "hand_003",
+    hand_004 = "hand_004",
+    hand_005 = "hand_005",
+    hand_006 = "hand_006",
+    law_001 = "law_001",
+    law_002 = "law_002",
+    law_003 = "law_003",
+    lock_001 = "lock_001",
+    lock_002 = "lock_002",
+    lock_003 = "lock_003",
+    mail_001 = "mail_001",
+    mail_002 = "mail_002",
+    mail_003 = "mail_003",
+    mail_004 = "mail_004",
+    mail_005 = "mail_005",
+    mail_006 = "mail_006",
+    mail_007 = "mail_007",
+    mail_008 = "mail_008",
+    mail_009 = "mail_009",
+    mail_010 = "mail_010",
+    mail_011 = "mail_011",
+    mail_012 = "mail_012",
+    mail_013 = "mail_013",
+    mail_014 = "mail_014",
+    mail_015 = "mail_015",
+    net_001 = "net_001",
+    net_002 = "net_002",
+    net_003 = "net_003",
+    net_004 = "net_004",
+    nmbr_001 = "nmbr_001",
+    nmbr_002 = "nmbr_002",
+    nmbr_003 = "nmbr_003",
+    nmbr_004 = "nmbr_004",
+    nmbr_005 = "nmbr_005",
+    nmbr_006 = "nmbr_006",
+    nmbr_007 = "nmbr_007",
+    nmbr_008 = "nmbr_008",
+    nmbr_009 = "nmbr_009",
+    note_001 = "note_001",
+    note_002 = "note_002",
+    note_003 = "note_003",
+    note_004 = "note_004",
+    note_005 = "note_005",
+    note_006 = "note_006",
+    note_007 = "note_007",
+    note_008 = "note_008",
+    note_009 = "note_009",
+    note_010 = "note_010",
+    note_011 = "note_011",
+    note_012 = "note_012",
+    note_013 = "note_013",
+    note_014 = "note_014",
+    note_015 = "note_015",
+    note_016 = "note_016",
+    run_001 = "run_001",
+    run_002 = "run_002",
+    run_003 = "run_003",
+    sem_001 = "sem_001",
+    sem_002 = "sem_002",
+    sem_003 = "sem_003",
+    sem_004 = "sem_004",
+    sem_005 = "sem_005",
+    star_001 = "star_001",
+    star_002 = "star_002",
+    star_003 = "star_003",
+    star_004 = "star_004",
+    star_005 = "star_005",
+    star_006 = "star_006",
+    state_001 = "state_001",
+    state_002 = "state_002",
+    state_003 = "state_003",
+    state_004 = "state_004",
+    state_005 = "state_005",
+    study_001 = "study_001",
+    study_002 = "study_002",
+    user_001 = "user_001",
+    user_002 = "user_002",
+    user_003 = "user_003",
+    user_004 = "user_004",
+    user_005 = "user_005",
+    user_006 = "user_006",
+    user_007 = "user_007",
+    user_008 = "user_008",
+    user_009 = "user_009",
+    user_010 = "user_010",
+    user_011 = "user_011",
+    user_012 = "user_012",
+    user_013 = "user_013",
+    user_014 = "user_014",
+    user_015 = "user_015",
+    user_016 = "user_016",
+    user_017 = "user_017",
+    user_018 = "user_018",
+    user_019 = "user_019",
+    user_020 = "user_020",
+    user_021 = "user_021",
+    user_022 = "user_022",
+    user_023 = "user_023",
+    vehicle_001 = "vehicle_001",
+    vehicle_002 = "vehicle_002",
+    vehicle_003 = "vehicle_003",
+    vehicle_004 = "vehicle_004",
+    vehicle_005 = "vehicle_005",
+    vehicle_006 = "vehicle_006",
+    vehicle_007 = "vehicle_007",
+    vehicle_008 = "vehicle_008"
+}
+interface ITMDcmtTypeIcon {
+    dtd: DcmtTypeDescriptor | undefined;
+}
+export declare const TMDcmtTypeIcon: React.FC<ITMDcmtTypeIcon>;
+interface ITMDcmtTypeTooltip {
+    dtd: DcmtTypeDescriptor | undefined;
+    children?: React.ReactNode;
+}
+export declare const TMDcmtTypeTooltip: React.FC<ITMDcmtTypeTooltip>;
+export interface ITMTidViewerProps {
+    tmSession?: ITopMediaSession;
+    tid?: number;
+    did?: number;
+    color?: string;
+    showIcon?: boolean;
+    showId?: boolean;
+    noneSelectionText?: string;
+}
+declare const TMTidViewer: React.FC<ITMTidViewerProps>;
+export default TMTidViewer;
+export declare const cellRenderTID: (data: DataGridTypes.ColumnCellTemplateData, noneSelectionText?: string) => import("react/jsx-runtime").JSX.Element;
+export declare const renderDTDTooltipContent: (dtd: DcmtTypeDescriptor | undefined) => import("react/jsx-runtime").JSX.Element | null;