@talxis/base-controls 0.0.1

package/dist/components/Grid/core/components/Cell/Notifications/Notifications.js

@@ -0,0 +1,112 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useTheme, ThemeProvider, Callout, Text, Link, Icon, PrimaryButton, DefaultButton } from '@fluentui/react';
+import { getNotificationStyles } from './styles.js';
+import { useMemo, useState, useRef, useEffect } from 'react';
+import { useResizeObserver, useThemeGenerator, CommandBar } from '@talxis/react-components';
+import { useGridInstance } from '../../../hooks/useGridInstance.js';
+import { useControlTheme } from '../../../../../../utils/theme/hooks/useControlTheme.js';
+
+const Notifications = (props) => {
+    const { notifications, formatting, farItems, isActionColumn, columnAlignment } = { ...props };
+    const grid = useGridInstance();
+    const theme = useTheme();
+    const styles = getNotificationStyles(isActionColumn, columnAlignment);
+    const iconId = useMemo(() => `icon${crypto.randomUUID()}`, []);
+    const [selectedNotification, setSelectedNotification] = useState(null);
+    const commandBarRef = useRef(null);
+    const containerRef = useRef(null);
+    const observe = useResizeObserver(() => {
+        commandBarRef.current?.remeasure();
+    });
+    const overridenTheme = useThemeGenerator(theme.semanticColors.bodyText, theme.semanticColors.bodyBackground, theme.semanticColors.bodyText, formatting.themeOverride);
+    const renderActionButton = (action, buttonType) => {
+        const Button = buttonType === 'primary' ? PrimaryButton : DefaultButton;
+        return jsx(Button, { text: action.message, iconProps: action?.iconName ? {
+                iconName: action.iconName
+            } : undefined, onClick: () => action.actions.map(callback => callback()) });
+    };
+    const renderActions = (actions) => {
+        if (actions.length === 0) {
+            return jsx(Fragment, {});
+        }
+        //render actions as buttons
+        if (actions.length < 3) {
+            return jsx("div", { className: styles.calloutButtons, children: actions.map((action, i) => renderActionButton(action, i === 0 ? 'primary' : 'default')) });
+        }
+        return jsx(CommandBar, { items: actions.map((action, i) => {
+                return {
+                    key: i.toString(),
+                    text: action.message,
+                    commandBarButtonAs: () => jsxs(Link, { onClick: () => action.actions.map(callback => callback()), className: styles.calloutLink, children: [action.iconName &&
+                                jsx(Icon, { iconName: action.iconName }), action.message] }),
+                    iconProps: {
+                        iconName: action.iconName
+                    },
+                    onClick: () => {
+                        action.actions.map(callback => callback());
+                    }
+                };
+            }) });
+    };
+    const onNotificationClick = (notification) => {
+        if (notification.actions?.length === 1) {
+            notification.actions[0].actions.map(callback => callback());
+            return;
+        }
+        setSelectedNotification(notification);
+    };
+    const getCommandBarItems = () => {
+        const items = [];
+        const overflowItems = [];
+        notifications.map(notification => {
+            const item = {
+                key: notification.uniqueId,
+                text: notification.text,
+                tooltipHostProps: {
+                    ...notification.buttonProps?.tooltipHostProps,
+                    calloutProps: {
+                        theme: contextualMenuTheme
+                    },
+                    tooltipProps: {
+                        theme: contextualMenuTheme
+                    },
+                },
+                iconProps: notification.iconName ? {
+                    iconName: notification.iconName,
+                    ...notification.buttonProps?.iconProps
+                } : undefined,
+                ...notification.buttonProps,
+                onClick: (e) => {
+                    notification.buttonProps?.onClick?.(e);
+                    onNotificationClick(notification);
+                }
+            };
+            if (notification.buttonProps?.renderedInOverflow) {
+                overflowItems.push(item);
+            }
+            else {
+                items.push(item);
+            }
+        });
+        return {
+            items: items,
+            overflowItems: overflowItems
+        };
+    };
+    const contextualMenuTheme = useControlTheme(grid.pcfContext.fluentDesignLanguage);
+    const { items, overflowItems } = getCommandBarItems();
+    useEffect(() => {
+        if (isActionColumn) {
+            observe(containerRef.current);
+        }
+    }, [isActionColumn]);
+    return jsxs("div", { ref: containerRef, className: styles.notificationsRoot, children: [jsx(ThemeProvider, { theme: overridenTheme, children: jsx(CommandBar, { contextualMenuTheme: contextualMenuTheme, id: iconId, componentRef: commandBarRef, styles: {
+                        primarySet: styles.notificationsPrimarySet
+                    }, items: items, overflowItems: overflowItems, farItems: farItems }) }), selectedNotification &&
+                jsx(Callout, { theme: contextualMenuTheme, hidden: !selectedNotification, className: styles.callout, onDismiss: () => setSelectedNotification(null), target: `#${iconId}`, children: jsxs(ThemeProvider, { className: styles.calloutContent, theme: contextualMenuTheme, children: [selectedNotification.text &&
+                                jsx(Text, { title: selectedNotification.text, className: styles.calloutTitle, variant: selectedNotification.messages.length > 0 ? 'xLarge' : undefined, children: selectedNotification.text }), jsx(Text, { children: selectedNotification.messages[0] }), selectedNotification.actions &&
+                                renderActions(selectedNotification.actions)] }) })] });
+};
+
+export { Notifications };
+//# sourceMappingURL=Notifications.js.map

package/dist/components/Grid/core/components/Cell/Notifications/Notifications.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notifications.js","sources":["../../../../../../../src/components/Grid/core/components/Cell/Notifications/Notifications.tsx"],"sourcesContent":["import { Icon, useTheme, Text, Callout, PrimaryButton, DefaultButton, Link, ICommandBar, ThemeProvider, ICommandBarItemProps } from \"@fluentui/react\"\nimport { getNotificationStyles } from \"./styles\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { IAddControlNotificationOptions, IColumn, IControlNotificationAction, ICustomColumnFormatting } from \"@talxis/client-libraries\";\nimport { CommandBar, useResizeObserver, useThemeGenerator } from \"@talxis/react-components\";\nimport { useGridInstance } from \"../../../hooks/useGridInstance\";\nimport { useControlTheme } from \"../../../../../../utils\";\n\ninterface INotifications {\n    notifications: IAddControlNotificationOptions[],\n    formatting: Required<ICustomColumnFormatting>,\n    isActionColumn: boolean;\n    columnAlignment: IColumn['alignment'],\n    farItems?: ICommandBarItemProps[]\n}\n\n\nexport const Notifications = (props: INotifications) => {\n    const { notifications, formatting, farItems, isActionColumn, columnAlignment } = { ...props };\n    const grid = useGridInstance();\n    const theme = useTheme();\n    const styles = getNotificationStyles(isActionColumn, columnAlignment);\n    const iconId = useMemo(() => `icon${crypto.randomUUID()}`, []);\n    const [selectedNotification, setSelectedNotification] = useState<IAddControlNotificationOptions | null>(null);\n    const commandBarRef = useRef<ICommandBar>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const observe = useResizeObserver(() => {\n        commandBarRef.current?.remeasure();\n    })\n    const overridenTheme = useThemeGenerator(theme.semanticColors.bodyText, theme.semanticColors.bodyBackground, theme.semanticColors.bodyText, formatting.themeOverride);\n\n    const renderActionButton = (action: IControlNotificationAction, buttonType: 'primary' | 'default') => {\n        const Button = buttonType === 'primary' ? PrimaryButton : DefaultButton;\n        return <Button\n            text={action.message}\n            iconProps={action?.iconName ? {\n                iconName: action.iconName\n            } : undefined}\n            onClick={() => action.actions.map(callback => callback())} />\n    }\n\n    const renderActions = (actions: IControlNotificationAction[]): JSX.Element => {\n        if (actions.length === 0) {\n            return <></>\n        }\n        //render actions as buttons\n        if (actions.length < 3) {\n            return <div className={styles.calloutButtons}>\n                {actions.map((action, i) => renderActionButton(action, i === 0 ? 'primary' : 'default'))}\n            </div>\n        }\n        return <CommandBar items={actions.map((action, i) => {\n            return {\n                key: i.toString(),\n                text: action.message,\n                commandBarButtonAs: () => <Link onClick={() => action.actions.map(callback => callback())} className={styles.calloutLink}>\n                    {action.iconName &&\n                        <Icon iconName={action.iconName} />\n                    }\n                    {action.message}\n                </Link>,\n                iconProps: {\n                    iconName: action.iconName\n                },\n                onClick: () => {\n                    action.actions.map(callback => callback())\n                }\n            }\n        })} />\n    }\n\n    const onNotificationClick = (notification: IAddControlNotificationOptions) => {\n        if (notification.actions?.length === 1) {\n            notification.actions[0].actions.map(callback => callback());\n            return;\n        }\n        setSelectedNotification(notification);\n    };\n\n\n    const getCommandBarItems = (): { items: ICommandBarItemProps[], overflowItems: ICommandBarItemProps[] } => {\n        const items: ICommandBarItemProps[] = [];\n        const overflowItems: ICommandBarItemProps[] = [];\n\n        notifications.map(notification => {\n            const item: ICommandBarItemProps = {\n                key: notification.uniqueId,\n                text: notification.text,\n                tooltipHostProps: {\n                    ...notification.buttonProps?.tooltipHostProps,\n                    calloutProps: {\n                        theme: contextualMenuTheme\n                    },\n                    tooltipProps: {\n                        theme: contextualMenuTheme\n                    },\n                },\n                iconProps: notification.iconName ? {\n                    iconName: notification.iconName,\n                    ...notification.buttonProps?.iconProps\n                } : undefined,\n                ...notification.buttonProps,\n                onClick: (e) => {\n                    notification.buttonProps?.onClick?.(e);\n                    onNotificationClick(notification);\n                }\n            }\n            if (notification.buttonProps?.renderedInOverflow) {\n                overflowItems.push(item);\n            }\n            else {\n                items.push(item);\n            }\n        })\n        return {\n            items: items,\n            overflowItems: overflowItems\n        }\n    }\n\n    const contextualMenuTheme = useControlTheme(grid.pcfContext.fluentDesignLanguage);\n    const { items, overflowItems } = getCommandBarItems();\n\n    useEffect(() => {\n        if (isActionColumn) {\n            observe(containerRef.current!);\n        }\n    }, [isActionColumn]);\n\n\n    return <div ref={containerRef} className={styles.notificationsRoot}>\n        <ThemeProvider theme={overridenTheme}>\n            <CommandBar\n                contextualMenuTheme={contextualMenuTheme}\n                id={iconId}\n                componentRef={commandBarRef}\n                styles={{\n                    primarySet: styles.notificationsPrimarySet\n                }}\n                items={items}\n                overflowItems={overflowItems}\n                farItems={farItems} />\n        </ThemeProvider>\n        {selectedNotification &&\n            <Callout\n                theme={contextualMenuTheme}\n                hidden={!selectedNotification}\n                className={styles.callout}\n                onDismiss={() => setSelectedNotification(null)}\n                target={`#${iconId}`}>\n                <ThemeProvider className={styles.calloutContent} theme={contextualMenuTheme}>\n                    {selectedNotification.text &&\n                        <Text title={selectedNotification.text} className={styles.calloutTitle} variant={selectedNotification.messages.length > 0 ? 'xLarge' : undefined}>{selectedNotification.text}</Text>\n                    }\n                    <Text>{selectedNotification.messages[0]}</Text>\n                    {selectedNotification.actions &&\n                        renderActions(selectedNotification.actions)\n                    }\n                </ThemeProvider>\n            </Callout>\n        }\n    </div>\n}"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/Grid/core/components/Cell/Notifications/styles.d.ts

@@ -0,0 +1,39 @@
+import { IColumn } from "@talxis/client-libraries";
+export declare const getNotificationStyles: (isActionColumn: boolean, columnAlignment: Required<IColumn['alignment']>) => import("@fluentui/react").IProcessedStyleSet<{
+    callout: {
+        width: number;
+        padding: string;
+    };
+    calloutContent: {
+        display: string;
+        flexDirection: string;
+        gap: number;
+        '.ms-CommandBar-primaryCommand': {
+            gap: number;
+        };
+    };
+    calloutTitle: {
+        overflow: string;
+        textOverflow: string;
+    };
+    calloutLink: {
+        i: {
+            position: string;
+            top: number;
+            marginRight: number;
+        };
+    };
+    calloutButtons: {
+        display: string;
+        justifyContent: string;
+        gap: number;
+    };
+    notificationsRoot: {
+        minWidth: number | undefined;
+        flex: number | undefined;
+    };
+    notificationsPrimarySet: {
+        order: number;
+        justifyContent: string | undefined;
+    };
+}>;

package/dist/components/Grid/core/components/Cell/Notifications/styles.js

@@ -0,0 +1,46 @@
+import { mergeStyleSets } from '@fluentui/react';
+import { getJustifyContent } from '../styles.js';
+
+const getNotificationStyles = (isActionColumn, columnAlignment) => {
+    return mergeStyleSets({
+        callout: {
+            width: 320,
+            padding: '20px 24px',
+        },
+        calloutContent: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 20,
+            '.ms-CommandBar-primaryCommand': {
+                gap: 10
+            }
+        },
+        calloutTitle: {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+        },
+        calloutLink: {
+            'i': {
+                position: 'relative',
+                top: 1,
+                marginRight: 3
+            }
+        },
+        calloutButtons: {
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: 8
+        },
+        notificationsRoot: {
+            minWidth: isActionColumn ? 0 : undefined,
+            flex: isActionColumn ? 1 : undefined,
+        },
+        notificationsPrimarySet: {
+            order: 2,
+            justifyContent: isActionColumn ? getJustifyContent(columnAlignment) : undefined
+        }
+    });
+};
+
+export { getNotificationStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/Grid/core/components/Cell/Notifications/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/Grid/core/components/Cell/Notifications/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\nimport { IColumn } from \"@talxis/client-libraries\"\nimport { getJustifyContent } from \"../styles\"\n\nexport const getNotificationStyles = (isActionColumn: boolean, columnAlignment: Required<IColumn['alignment']>) => {\n    return mergeStyleSets({\n        callout: {\n            width: 320,\n            padding: '20px 24px',\n        },\n        calloutContent: {\n            display: 'flex',\n            flexDirection: 'column',\n            gap: 20,\n            '.ms-CommandBar-primaryCommand': {\n                gap: 10\n            }\n        },\n        calloutTitle: {\n            overflow: 'hidden',\n            textOverflow: 'ellipsis'\n        },\n        calloutLink: {\n            'i': {\n                position: 'relative',\n                top: 1,\n                marginRight: 3\n            }\n        },\n        calloutButtons: {\n            display: 'flex',\n            justifyContent: 'flex-end',\n            gap: 8\n        },\n        notificationsRoot: {\n            minWidth: isActionColumn ? 0 : undefined,\n            flex: isActionColumn ? 1 : undefined,\n        },\n        notificationsPrimarySet: {\n            order: 2,\n            justifyContent: isActionColumn ? getJustifyContent(columnAlignment) : undefined\n        }\n    })\n}"],"names":[],"mappings":";;;MAIa,qBAAqB,GAAG,CAAC,cAAuB,EAAE,eAA+C,KAAI;AAC9G,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,OAAO,EAAE;AACL,YAAA,KAAK,EAAE,GAAG;AACV,YAAA,OAAO,EAAE,WAAW;AACvB,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,GAAG,EAAE,EAAE;AACP,YAAA,+BAA+B,EAAE;AAC7B,gBAAA,GAAG,EAAE,EAAE;AACV,aAAA;AACJ,SAAA;AACD,QAAA,YAAY,EAAE;AACV,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,YAAY,EAAE,UAAU;AAC3B,SAAA;AACD,QAAA,WAAW,EAAE;AACT,YAAA,GAAG,EAAE;AACD,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,GAAG,EAAE,CAAC;AACN,gBAAA,WAAW,EAAE,CAAC;AACjB,aAAA;AACJ,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,cAAc,EAAE,UAAU;AAC1B,YAAA,GAAG,EAAE,CAAC;AACT,SAAA;AACD,QAAA,iBAAiB,EAAE;YACf,QAAQ,EAAE,cAAc,GAAG,CAAC,GAAG,SAAS;YACxC,IAAI,EAAE,cAAc,GAAG,CAAC,GAAG,SAAS;AACvC,SAAA;AACD,QAAA,uBAAuB,EAAE;AACrB,YAAA,KAAK,EAAE,CAAC;AACR,YAAA,cAAc,EAAE,cAAc,GAAG,iBAAiB,CAAC,eAAe,CAAC,GAAG,SAAS;AAClF,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/Grid/core/components/Cell/styles.d.ts

@@ -0,0 +1,40 @@
+import { ITheme } from "@fluentui/react";
+import { IColumn } from "@talxis/client-libraries";
+export declare const getJustifyContent: (columnAlignment: Required<IColumn['alignment']>) => "center" | "flex-start" | "flex-end" | undefined;
+export declare const getCellStyles: () => import("@fluentui/react").IProcessedStyleSet<{
+    cellRoot: {
+        height: string;
+        width: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+    };
+    checkbox: {
+        marginRight: number;
+    };
+}>;
+export declare const getInnerCellStyles: (isEditing: boolean, theme: ITheme, columnAlignment: IColumn['alignment']) => import("@fluentui/react").IProcessedStyleSet<{
+    innerCellRoot: {
+        flex: number;
+        display: string;
+        overflow: string;
+        alignItems: string;
+        height: string;
+        marginLeft: number | undefined;
+        marginRight: number | undefined;
+    };
+    shimmerWrapper: {
+        height: number;
+    };
+    shimmerRoot: {
+        width: string;
+        paddingLeft: number;
+        paddingRight: number;
+    };
+    errorIconRoot: {
+        color: string;
+    };
+    uneditableIconRoot: {
+        color: string;
+    };
+}>;

package/dist/components/Grid/core/components/Cell/styles.js

@@ -0,0 +1,59 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getJustifyContent = (columnAlignment) => {
+    switch (columnAlignment) {
+        case 'left': {
+            return 'flex-start';
+        }
+        case 'center': {
+            return 'center';
+        }
+        case 'right': {
+            return 'flex-end';
+        }
+    }
+};
+const getCellStyles = () => {
+    return mergeStyleSets({
+        cellRoot: {
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        checkbox: {
+            marginRight: 0.5
+        }
+    });
+};
+const getInnerCellStyles = (isEditing, theme, columnAlignment) => {
+    return mergeStyleSets({
+        innerCellRoot: {
+            flex: 1,
+            display: 'flex',
+            overflow: 'hidden',
+            alignItems: 'center',
+            height: '100%',
+            marginLeft: isEditing ? -1 : undefined,
+            marginRight: isEditing ? -1 : undefined,
+        },
+        shimmerWrapper: {
+            height: 10
+        },
+        shimmerRoot: {
+            width: '100%',
+            paddingLeft: 10,
+            paddingRight: 10
+        },
+        errorIconRoot: {
+            color: `${theme.semanticColors.errorIcon} !important`
+        },
+        uneditableIconRoot: {
+            color: `${theme.semanticColors.bodyText} !important`
+        }
+    });
+};
+
+export { getCellStyles, getInnerCellStyles, getJustifyContent };
+//# sourceMappingURL=styles.js.map

package/dist/components/Grid/core/components/Cell/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../src/components/Grid/core/components/Cell/styles.ts"],"sourcesContent":["import { ITheme, mergeStyleSets } from \"@fluentui/react\";\nimport { IColumn } from \"@talxis/client-libraries\";\n\nexport const getJustifyContent = (columnAlignment: Required<IColumn['alignment']>) => {\n    switch(columnAlignment) {\n        case 'left': {\n            return 'flex-start'\n        }\n        case 'center': {\n            return 'center'\n        }\n        case 'right': {\n            return 'flex-end'\n        }\n    }\n}\n\n\nexport const getCellStyles = () => {\n    return mergeStyleSets({\n        cellRoot: {\n            height: '100%',\n            width: '100%',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center'\n        },\n        checkbox: {\n            marginRight: 0.5\n        }\n    })\n}\n\nexport const getInnerCellStyles = (isEditing: boolean, theme: ITheme, columnAlignment: IColumn['alignment']) => {\n    return mergeStyleSets({\n        innerCellRoot: {\n            flex: 1,\n            display: 'flex',\n            overflow: 'hidden',\n            alignItems: 'center',\n            height: '100%',\n            marginLeft: isEditing ? - 1 : undefined,\n            marginRight: isEditing ? - 1 : undefined,\n        },\n\n        shimmerWrapper: {\n            height: 10\n        },\n        shimmerRoot: {\n            width: '100%',\n            paddingLeft: 10,\n            paddingRight: 10\n        },\n        errorIconRoot: {\n            color: `${theme.semanticColors.errorIcon} !important`\n        },\n        uneditableIconRoot: {\n            color: `${theme.semanticColors.bodyText} !important`\n        }\n    })\n}\n\n"],"names":[],"mappings":";;AAGa,MAAA,iBAAiB,GAAG,CAAC,eAA+C,KAAI;AACjF,IAAA,QAAO,eAAe;QAClB,KAAK,MAAM,EAAE;AACT,YAAA,OAAO,YAAY,CAAA;AACtB,SAAA;QACD,KAAK,QAAQ,EAAE;AACX,YAAA,OAAO,QAAQ,CAAA;AAClB,SAAA;QACD,KAAK,OAAO,EAAE;AACV,YAAA,OAAO,UAAU,CAAA;AACpB,SAAA;AACJ,KAAA;AACL,EAAC;AAGM,MAAM,aAAa,GAAG,MAAK;AAC9B,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,QAAQ,EAAE;AACN,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,cAAc,EAAE,QAAQ;AAC3B,SAAA;AACD,QAAA,QAAQ,EAAE;AACN,YAAA,WAAW,EAAE,GAAG;AACnB,SAAA;AACJ,KAAA,CAAC,CAAA;AACN,EAAC;AAEY,MAAA,kBAAkB,GAAG,CAAC,SAAkB,EAAE,KAAa,EAAE,eAAqC,KAAI;AAC3G,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,aAAa,EAAE;AACX,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,MAAM,EAAE,MAAM;YACd,UAAU,EAAE,SAAS,GAAG,CAAE,CAAC,GAAG,SAAS;YACvC,WAAW,EAAE,SAAS,GAAG,CAAE,CAAC,GAAG,SAAS;AAC3C,SAAA;AAED,QAAA,cAAc,EAAE;AACZ,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,WAAW,EAAE;AACT,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,WAAW,EAAE,EAAE;AACf,YAAA,YAAY,EAAE,EAAE;AACnB,SAAA;AACD,QAAA,aAAa,EAAE;AACX,YAAA,KAAK,EAAE,CAAG,EAAA,KAAK,CAAC,cAAc,CAAC,SAAS,CAAa,WAAA,CAAA;AACxD,SAAA;AACD,QAAA,kBAAkB,EAAE;AAChB,YAAA,KAAK,EAAE,CAAG,EAAA,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAa,WAAA,CAAA;AACvD,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/Grid/core/components/ColumnHeader/ColumnHeader.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { IGridColumn } from '../../interfaces/IGridColumn';
+export interface IColumnHeader {
+    baseColumn: IGridColumn;
+}
+export declare const ColumnHeader: (props: IColumnHeader) => JSX.Element;

package/dist/components/Grid/core/components/ColumnHeader/ColumnHeader.js

@@ -0,0 +1,61 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useRef } from 'react';
+import { useTheme, CommandBarButton, Icon, Label } from '@fluentui/react';
+import { FilterCallout } from '../../../filtering/components/FilterCallout/FilterCallout.js';
+import { SortingContextualMenu } from '../../../sorting/components/SortingContextualMenu/SortingContextualMenu.js';
+import { getColumnHeaderStyles } from './styles.js';
+import { useGridInstance } from '../../hooks/useGridInstance.js';
+
+const ColumnHeader = (props) => {
+    const grid = useGridInstance();
+    const column = props.baseColumn;
+    const [columnHeaderContextualMenuProps, setColumnHeaderContextualMenuProps] = useState(null);
+    const [filterCalloutProps, setFilterCalloutProps] = useState(null);
+    const theme = useTheme();
+    const columnHeaderStyles = useMemo(() => getColumnHeaderStyles(theme, column.alignment), [theme, column.alignment]);
+    const buttonRef = useRef(null);
+    const onClick = () => {
+        if ((column.isFilterable === false && column.disableSorting && !column.canBeAggregated)) {
+            return;
+        }
+        setColumnHeaderContextualMenuProps({
+            column: column,
+            onDismiss: (e, dismissAll, showFilterCallout) => {
+                setColumnHeaderContextualMenuProps(null);
+                if (!showFilterCallout) {
+                    return;
+                }
+                setFilterCalloutProps({
+                    column: column,
+                    onDismiss: () => {
+                        setFilterCalloutProps(null);
+                    }
+                });
+            }
+        });
+    };
+    const preventDismissOnEvent = (e) => {
+        if (e.type !== 'scroll') {
+            return false;
+        }
+        const target = e.target;
+        //check for vertical scroll
+        if (target?.classList?.contains('ag-body-viewport') || target?.classList?.contains('ag-body-vertical-scroll-viewport')) {
+            return true;
+        }
+        //ios outputs horizontal scroll if focused in callout btn which would result in dismiss of callout
+        if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
+            return true;
+        }
+        return false;
+    };
+    return (jsxs(Fragment, { children: [jsxs(CommandBarButton, { elementRef: buttonRef, title: column.displayName, className: columnHeaderStyles.root, onClick: onClick, children: [grid.isEditable && !column.isEditable && column.type !== 'action' && jsx(Icon, { className: columnHeaderStyles.editIcon, iconName: 'Uneditable' }), jsxs("div", { className: columnHeaderStyles.labelWrapper, children: [jsx(Label, { className: columnHeaderStyles.label, children: column.displayName }), column.isRequired &&
+                                jsx("span", { className: columnHeaderStyles.requiredSymbol, children: "*" })] }), jsxs("div", { className: columnHeaderStyles.filterSortIcons, children: [column.isSorted && jsx(Icon, { iconName: column.isSortedDescending ? 'SortDown' : 'SortUp' }), column.isFiltered && jsx(Icon, { iconName: 'Filter' })] })] }), columnHeaderContextualMenuProps &&
+                jsx(SortingContextualMenu, { target: buttonRef, calloutProps: {
+                        preventDismissOnEvent: preventDismissOnEvent
+                    }, ...columnHeaderContextualMenuProps }), filterCalloutProps &&
+                jsx(FilterCallout, { preventDismissOnEvent: preventDismissOnEvent, target: buttonRef, ...filterCalloutProps })] }));
+};
+
+export { ColumnHeader };
+//# sourceMappingURL=ColumnHeader.js.map

package/dist/components/Grid/core/components/ColumnHeader/ColumnHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnHeader.js","sources":["../../../../../../src/components/Grid/core/components/ColumnHeader/ColumnHeader.tsx"],"sourcesContent":["import { useMemo, useRef, useState } from 'react';\nimport { CommandBarButton, Icon, Label, useTheme } from '@fluentui/react';\nimport { FilterCallout, IFilterCallout } from '../../../filtering/components/FilterCallout/FilterCallout';\nimport { IGridColumn } from '../../interfaces/IGridColumn';\nimport { ISortingContextualMenu, SortingContextualMenu } from '../../../sorting/components/SortingContextualMenu/SortingContextualMenu';\nimport { getColumnHeaderStyles } from './styles';\nimport { useGridInstance } from '../../hooks/useGridInstance';\nimport React from 'react';\n\nexport interface IColumnHeader {\n    baseColumn: IGridColumn;\n}\n\nexport const ColumnHeader = (props: IColumnHeader) => {\n    const grid = useGridInstance();\n    const column = props.baseColumn;\n    const [columnHeaderContextualMenuProps, setColumnHeaderContextualMenuProps] = useState<ISortingContextualMenu | null>(null);\n    const [filterCalloutProps, setFilterCalloutProps] = useState<IFilterCallout | null>(null);\n    const theme = useTheme();\n    const columnHeaderStyles = useMemo(() => getColumnHeaderStyles(theme, column.alignment), [theme, column.alignment])\n    const buttonRef = useRef<HTMLElement>(null);\n\n    const onClick = () => {\n        if ((column.isFilterable === false && column.disableSorting && !column.canBeAggregated)) {\n            return;\n        }\n        setColumnHeaderContextualMenuProps({\n            column: column,\n            onDismiss: (e, dismissAll, showFilterCallout) => {\n                setColumnHeaderContextualMenuProps(null);\n                if (!showFilterCallout) {\n                    return;\n                }\n                setFilterCalloutProps({\n                    column: column,\n                    onDismiss: () => {\n                        setFilterCalloutProps(null)\n                    }\n                })\n            }\n        });\n    }\n    const preventDismissOnEvent = (e: Event | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element> | React.FocusEvent<Element, Element>) => {\n        if(e.type !== 'scroll') {\n            return false;\n        }\n        const target = e.target  as HTMLElement;\n        //check for vertical scroll\n        if (target?.classList?.contains('ag-body-viewport') || target?.classList?.contains('ag-body-vertical-scroll-viewport')) {\n            return true;\n        }\n        //ios outputs horizontal scroll if focused in callout btn which would result in dismiss of callout\n        if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {\n            return true;\n        }\n        return false;\n    }\n    return (\n        <>\n            <CommandBarButton\n                elementRef={buttonRef}\n                title={column.displayName}\n                className={columnHeaderStyles.root}\n                onClick={onClick}\n            >\n                {grid.isEditable && !column.isEditable && column.type !== 'action' && <Icon className={columnHeaderStyles.editIcon} iconName='Uneditable' />}\n                <div className={columnHeaderStyles.labelWrapper}>\n                    <Label className={columnHeaderStyles.label}>{column.displayName}</Label>\n                    {column.isRequired &&\n                        <span className={columnHeaderStyles.requiredSymbol}>*</span>\n                    }\n                </div>\n                <div className={columnHeaderStyles.filterSortIcons}>\n                    {column.isSorted && <Icon iconName={column.isSortedDescending ? 'SortDown' : 'SortUp'} />}\n                    {column.isFiltered && <Icon iconName='Filter' />}\n                </div>\n            </CommandBarButton>\n            {columnHeaderContextualMenuProps &&\n                <SortingContextualMenu \n                    target={buttonRef}\n                    calloutProps={{\n                        preventDismissOnEvent: preventDismissOnEvent\n                    }} \n                    {...columnHeaderContextualMenuProps} />\n            }\n            {filterCalloutProps &&\n                <FilterCallout preventDismissOnEvent={preventDismissOnEvent} target={buttonRef} {...filterCalloutProps} />\n            }\n        </>\n    )\n};"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

package/dist/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/GlobalCheckbox.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const GlobalCheckBox: () => JSX.Element;

package/dist/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/GlobalCheckbox.js

@@ -0,0 +1,50 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useTheme, ThemeProvider, Checkbox } from '@fluentui/react';
+import { useContext, useEffect } from 'react';
+import { useGridInstance } from '../../../../hooks/useGridInstance.js';
+import { getGlobalCheckboxStyles } from './styles.js';
+import { AgGridContext } from '../../../AgGrid/context.js';
+import { useThemeGenerator, Theming, useRerender } from '@talxis/react-components';
+
+const GlobalCheckBox = () => {
+    const grid = useGridInstance();
+    const baseTheme = useTheme();
+    const theme = useThemeGenerator(baseTheme.palette.themePrimary, baseTheme.semanticColors.bodyBackground, Theming.GetTextColorForBackground(baseTheme.semanticColors.bodyBackground), 
+    //@ts-ignore - typings
+    grid.pcfContext.fluentDesignLanguage?.v8FluentOverrides);
+    const styles = getGlobalCheckboxStyles(theme);
+    const selection = grid.selection;
+    const agGrid = useContext(AgGridContext);
+    const rerender = useRerender();
+    const getCheckBoxState = () => {
+        if (grid.selection.allRecordsSelected) {
+            return 'checked';
+        }
+        if (grid.dataset.getSelectedRecordIds().length > 0) {
+            return 'intermediate';
+        }
+        return 'unchecked';
+    };
+    const onChange = (checked) => {
+        if (checked) {
+            selection.selectAll();
+        }
+        else {
+            selection.clear();
+        }
+    };
+    const checkboxState = getCheckBoxState();
+    useEffect(() => {
+        agGrid.setGlobalCheckBoxRenderer(() => rerender());
+    }, []);
+    if (grid.dataset.sortedRecordIds.length === 0) {
+        return jsx(Fragment, {});
+    }
+    return (jsx(ThemeProvider, { theme: theme, className: styles.root, children: selection.type === 'multiple' &&
+            jsx(Checkbox, { checked: checkboxState === 'checked', styles: {
+                    checkbox: styles.checkbox
+                }, indeterminate: checkboxState === 'intermediate', onChange: (e, checked) => onChange(checked) }) }));
+};
+
+export { GlobalCheckBox };
+//# sourceMappingURL=GlobalCheckbox.js.map

package/dist/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/GlobalCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalCheckbox.js","sources":["../../../../../../../../src/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/GlobalCheckbox.tsx"],"sourcesContent":["import { Checkbox, ThemeProvider, useTheme } from \"@fluentui/react\";\nimport { useContext, useEffect } from \"react\";\nimport { useGridInstance } from \"../../../../hooks/useGridInstance\";\nimport { getGlobalCheckboxStyles } from \"./styles\";\nimport { AgGridContext } from \"../../../AgGrid/context\";\nimport { Theming, useRerender, useThemeGenerator } from \"@talxis/react-components\";\n\n\nexport const GlobalCheckBox = () => {\n    const grid = useGridInstance();\n    const baseTheme = useTheme();\n    const theme = useThemeGenerator(\n        baseTheme.palette.themePrimary,\n        baseTheme.semanticColors.bodyBackground,\n        Theming.GetTextColorForBackground(baseTheme.semanticColors.bodyBackground),\n        //@ts-ignore - typings\n        grid.pcfContext.fluentDesignLanguage?.v8FluentOverrides\n    )\n    const styles = getGlobalCheckboxStyles(theme);\n    const selection = grid.selection;\n    const agGrid = useContext(AgGridContext);\n    const rerender = useRerender();\n\n    const getCheckBoxState = () => {\n        if (grid.selection.allRecordsSelected) {\n            return 'checked';\n        }\n        if (grid.dataset.getSelectedRecordIds().length > 0) {\n            return 'intermediate';\n        }\n        return 'unchecked';\n    }\n\n    const onChange = (checked?: boolean) => {\n        if (checked) {\n            selection.selectAll();\n        }\n        else {\n            selection.clear();\n        }\n    }\n\n    const checkboxState = getCheckBoxState();\n\n    useEffect(() => {\n        agGrid.setGlobalCheckBoxRenderer(() => rerender())\n    }, []);\n\n    if (grid.dataset.sortedRecordIds.length === 0) {\n        return <></>\n    }\n    return (\n        <ThemeProvider theme={theme} className={styles.root}>\n            {selection.type === 'multiple' &&\n                <Checkbox\n                    checked={checkboxState === 'checked'}\n                    styles={{\n                        checkbox: styles.checkbox\n                    }}\n                    indeterminate={checkboxState === 'intermediate'}\n                    onChange={(e, checked) => onChange(checked)} />\n            }\n        </ThemeProvider>\n    )\n};"],"names":["_jsx"],"mappings":";;;;;;;;AAQO,MAAM,cAAc,GAAG,MAAK;AAC/B,IAAA,MAAM,IAAI,GAAG,eAAe,EAAE,CAAC;AAC/B,IAAA,MAAM,SAAS,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,KAAK,GAAG,iBAAiB,CAC3B,SAAS,CAAC,OAAO,CAAC,YAAY,EAC9B,SAAS,CAAC,cAAc,CAAC,cAAc,EACvC,OAAO,CAAC,yBAAyB,CAAC,SAAS,CAAC,cAAc,CAAC,cAAc,CAAC;;AAE1E,IAAA,IAAI,CAAC,UAAU,CAAC,oBAAoB,EAAE,iBAAiB,CAC1D,CAAA;AACD,IAAA,MAAM,MAAM,GAAG,uBAAuB,CAAC,KAAK,CAAC,CAAC;AAC9C,IAAA,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;AACjC,IAAA,MAAM,MAAM,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;AACzC,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,MAAM,gBAAgB,GAAG,MAAK;AAC1B,QAAA,IAAI,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE;AACnC,YAAA,OAAO,SAAS,CAAC;AACpB,SAAA;QACD,IAAI,IAAI,CAAC,OAAO,CAAC,oBAAoB,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE;AAChD,YAAA,OAAO,cAAc,CAAC;AACzB,SAAA;AACD,QAAA,OAAO,WAAW,CAAC;AACvB,KAAC,CAAA;AAED,IAAA,MAAM,QAAQ,GAAG,CAAC,OAAiB,KAAI;AACnC,QAAA,IAAI,OAAO,EAAE;YACT,SAAS,CAAC,SAAS,EAAE,CAAC;AACzB,SAAA;AACI,aAAA;YACD,SAAS,CAAC,KAAK,EAAE,CAAC;AACrB,SAAA;AACL,KAAC,CAAA;AAED,IAAA,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;IAEzC,SAAS,CAAC,MAAK;QACX,MAAM,CAAC,yBAAyB,CAAC,MAAM,QAAQ,EAAE,CAAC,CAAA;KACrD,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE;AAC3C,QAAA,OAAOA,iBAAK,CAAA;AACf,KAAA;AACD,IAAA,QACIA,GAAC,CAAA,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,QAAA,EAC9C,SAAS,CAAC,IAAI,KAAK,UAAU;YAC1BA,GAAC,CAAA,QAAQ,IACL,OAAO,EAAE,aAAa,KAAK,SAAS,EACpC,MAAM,EAAE;oBACJ,QAAQ,EAAE,MAAM,CAAC,QAAQ;iBAC5B,EACD,aAAa,EAAE,aAAa,KAAK,cAAc,EAC/C,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,QAAQ,CAAC,OAAO,CAAC,EAAA,CAAI,EAE3C,CAAA,EACnB;AACL;;;;"}

package/dist/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/styles.d.ts

@@ -0,0 +1,14 @@
+import { ITheme } from "@fluentui/react";
+export declare const getGlobalCheckboxStyles: (theme: ITheme) => import("@fluentui/react").IProcessedStyleSet<{
+    root: {
+        backgroundColor: string;
+        flexGrow: number;
+        display: string;
+        justifyContent: string;
+        height: string;
+        alignItems: string;
+    };
+    checkbox: {
+        marginRight: number;
+    };
+}>;

package/dist/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/styles.js

@@ -0,0 +1,20 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getGlobalCheckboxStyles = (theme) => {
+    return mergeStyleSets({
+        root: {
+            backgroundColor: theme.semanticColors.bodyBackground,
+            flexGrow: 1,
+            display: 'flex',
+            justifyContent: 'center',
+            height: '100%',
+            alignItems: 'center'
+        },
+        checkbox: {
+            marginRight: 0.5
+        }
+    });
+};
+
+export { getGlobalCheckboxStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../../src/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/styles.ts"],"sourcesContent":["import { ITheme, mergeStyleSets } from \"@fluentui/react\"\n\nexport const getGlobalCheckboxStyles = (theme: ITheme) => {\n    return mergeStyleSets({\n        root: {\n            backgroundColor: theme.semanticColors.bodyBackground,\n            flexGrow: 1,\n            display: 'flex',\n            justifyContent: 'center',\n            height: '100%',\n            alignItems: 'center'\n        },\n        checkbox: {\n            marginRight: 0.5\n        }\n    });\n}"],"names":[],"mappings":";;AAEa,MAAA,uBAAuB,GAAG,CAAC,KAAa,KAAI;AACrD,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,IAAI,EAAE;AACF,YAAA,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc;AACpD,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,cAAc,EAAE,QAAQ;AACxB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,UAAU,EAAE,QAAQ;AACvB,SAAA;AACD,QAAA,QAAQ,EAAE;AACN,YAAA,WAAW,EAAE,GAAG;AACnB,SAAA;AACJ,KAAA,CAAC,CAAC;AACP;;;;"}

package/dist/components/Grid/core/components/ColumnHeader/styles.d.ts

@@ -0,0 +1,42 @@
+import { ITheme } from "@fluentui/react";
+import { IColumn } from "@talxis/client-libraries";
+export declare const getColumnHeaderStyles: (theme: ITheme, columnAlignment: Required<IColumn['alignment']>) => import("@fluentui/react").IProcessedStyleSet<{
+    root: {
+        width: string;
+        textAlign: string;
+        height: number;
+        paddingLeft: number;
+        paddingRight: number;
+        justifyContent: string;
+        '.ms-Button-flexContainer': {
+            justifyContent: string;
+            width: string;
+            gap: number;
+            pointerEvents: string;
+        };
+    };
+    labelWrapper: {
+        flex: number;
+        display: string;
+        minWidth: number;
+        justifyContent: string | undefined;
+    };
+    label: {
+        overflow: string;
+        textOverflow: string;
+        cursor: string;
+    };
+    requiredSymbol: {
+        color: string;
+        position: string;
+        top: number;
+        left: number;
+    };
+    filterSortIcons: {
+        display: string;
+        gap: number;
+    };
+    editIcon: {
+        marginRight: number;
+    };
+}>;

package/dist/components/Grid/core/components/ColumnHeader/styles.js

@@ -0,0 +1,48 @@
+import { mergeStyleSets } from '@fluentui/react';
+import { getJustifyContent } from '../Cell/styles.js';
+
+const getColumnHeaderStyles = (theme, columnAlignment) => {
+    return mergeStyleSets({
+        root: {
+            width: '100%',
+            textAlign: 'left',
+            height: 42,
+            paddingLeft: 10,
+            paddingRight: 10,
+            justifyContent: 'flex-start',
+            '.ms-Button-flexContainer': {
+                justifyContent: 'flex-start',
+                width: '100%',
+                gap: 2,
+                pointerEvents: 'none'
+            }
+        },
+        labelWrapper: {
+            flex: 1,
+            display: 'flex',
+            minWidth: 0,
+            justifyContent: getJustifyContent(columnAlignment)
+        },
+        label: {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            cursor: 'pointer',
+        },
+        requiredSymbol: {
+            color: theme.semanticColors.errorIcon,
+            position: 'relative',
+            top: 4,
+            left: 2
+        },
+        filterSortIcons: {
+            display: 'flex',
+            gap: 2
+        },
+        editIcon: {
+            marginRight: 3
+        }
+    });
+};
+
+export { getColumnHeaderStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/Grid/core/components/ColumnHeader/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../src/components/Grid/core/components/ColumnHeader/styles.ts"],"sourcesContent":["import { ITheme, mergeStyleSets } from \"@fluentui/react\";\nimport { IColumn } from \"@talxis/client-libraries\";\nimport { getJustifyContent } from \"../Cell/styles\";\n\nexport const getColumnHeaderStyles = (theme: ITheme, columnAlignment: Required<IColumn['alignment']>) => {\n    return mergeStyleSets({\n        root: {\n            width: '100%',\n            textAlign: 'left',\n            height: 42,\n            paddingLeft: 10,\n            paddingRight: 10,\n            justifyContent: 'flex-start',\n            '.ms-Button-flexContainer': {\n                justifyContent: 'flex-start',\n                width: '100%',\n                gap: 2,\n                pointerEvents: 'none'\n            }\n        },\n        labelWrapper: {\n            flex: 1,\n            display: 'flex',\n            minWidth: 0,\n            justifyContent: getJustifyContent(columnAlignment)\n        },\n        label: {\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            cursor: 'pointer',\n        },\n        requiredSymbol: {\n            color: theme.semanticColors.errorIcon,\n            position: 'relative',\n            top: 4,\n            left: 2\n        },\n        filterSortIcons: {\n            display: 'flex',\n            gap: 2\n        },\n        editIcon: {\n            marginRight: 3\n        }\n    })\n}"],"names":[],"mappings":";;;MAIa,qBAAqB,GAAG,CAAC,KAAa,EAAE,eAA+C,KAAI;AACpG,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,IAAI,EAAE;AACF,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,SAAS,EAAE,MAAM;AACjB,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,WAAW,EAAE,EAAE;AACf,YAAA,YAAY,EAAE,EAAE;AAChB,YAAA,cAAc,EAAE,YAAY;AAC5B,YAAA,0BAA0B,EAAE;AACxB,gBAAA,cAAc,EAAE,YAAY;AAC5B,gBAAA,KAAK,EAAE,MAAM;AACb,gBAAA,GAAG,EAAE,CAAC;AACN,gBAAA,aAAa,EAAE,MAAM;AACxB,aAAA;AACJ,SAAA;AACD,QAAA,YAAY,EAAE;AACV,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,cAAc,EAAE,iBAAiB,CAAC,eAAe,CAAC;AACrD,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,YAAY,EAAE,UAAU;AACxB,YAAA,MAAM,EAAE,SAAS;AACpB,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS;AACrC,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,GAAG,EAAE,CAAC;AACN,YAAA,IAAI,EAAE,CAAC;AACV,SAAA;AACD,QAAA,eAAe,EAAE;AACb,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,GAAG,EAAE,CAAC;AACT,SAAA;AACD,QAAA,QAAQ,EAAE;AACN,YAAA,WAAW,EAAE,CAAC;AACjB,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/Grid/core/components/Dialog/Constants.d.ts

@@ -0,0 +1,2 @@
+import { IDialogProps } from "./interfaces";
+export declare const defaultProps: IDialogProps;