@talxis/base-controls 1.2408.1 → 1.2408.3

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

@@ -1 +1,139 @@
-import{jsx as e,jsxs as t,Fragment as o}from"react/jsx-runtime";import*as r from"react";import{useTheme as a,TooltipHost as s,Icon as n,Checkbox as i,Image as l,Link as c,Text as m}from"@fluentui/react";import{getReadOnlyCellStyles as d}from"./styles.js";import{Commands as p}from"../Commands/Commands.js";import{FileAttribute as O}from"@talxis/client-libraries";import{ReadOnlyOptionSet as u}from"./ReadOnlyOptionSet/ReadOnlyOptionSet.js";import{DataType as f}from"../../../enums/DataType.js";import{useColumnValidationController as g}from"../../../../validation/controllers/useRecordValidationController.js";import{useGridInstance as N}from"../../../hooks/useGridInstance.js";import{useSelectionController as j}from"../../../../selection/controllers/useSelectionController.js";import{RIBBON_COLUMN_KEY as E}from"../../../../constants.js";import{useRerender as b}from"../../../hooks/useRerender.js";import"../Commands/useCommands.js";import"tslib";import"../Commands/Icon.js";import"external-svg-loader";import"../Commands/styles.js";import"@talxis/react-components";import"./ReadOnlyOptionSet/styles.js";import"color";import"../../../../validation/model/ColumnValidation.js";import"validator/es/lib/isEmail";import"validator/es/lib/isURL";import"dayjs";import"../../../model/GridDependency.js";import"../../../../GridContext.js";const C=o=>{const i=N(),l=o.baseColumn,c=o.data,m=a(),p=d(m),O=r.useMemo((()=>Math.random().toString()),[]),[u,f]=g({column:l,record:c});return e(s,Object.assign({id:O,content:u||i.loading?void 0:f},{children:t("div",Object.assign({className:p.root,"data-is-valid":u},{children:[e("div",Object.assign({className:p.cellContent},{children:e(I,Object.assign({},o))})),!u&&e(n,{styles:{root:{color:m.semanticColors.errorIcon}},iconName:"Error"})]}))}))},I=s=>{b();const g=N(),C=s.baseColumn,I=a(),y=d(I),L=j(),h=(()=>{const e=g.recordUpdateService.record(s.data.getRecordId()).get();return null!=e?e:s.data})(),S=h.getFormattedValue(C.key);r.useEffect((()=>{}),[h.getValue(C.key)]);const _=(t,o)=>{switch(C.dataType){case f.LOOKUP_OWNER:case f.LOOKUP_SIMPLE:case f.LOOKUP_CUSTOMER:if(!g.isNavigationEnabled)return k()}return e(c,Object.assign({},t,{className:y.link,title:o},{children:o}))},k=()=>C.isPrimary&&g.isNavigationEnabled?_({onClick:()=>g.openDatasetItem(h.getNamedReference())},S):e(m,Object.assign({className:`${y.text} talxis-cell-text`,title:S},{children:S})),v=()=>{var e;const t=new O(g.pcfContext.webAPI),o=h.getNamedReference();t.downloadFileFromAttribute({entityName:null!==(e=o.etn)&&void 0!==e?e:o.entityName,recordId:h.getRecordId(),fileAttribute:C.key},!0)};switch(C.dataType){case f.SINGLE_LINE_EMAIL:return _({href:`mailto:${S}`},S);case f.SINGLE_LINE_PHONE:return _({href:`tel:${S}`},S);case f.SINGLE_LINE_URL:return _({href:S,target:"_blank",rel:"noopener noreferrer"},S);case f.LOOKUP_SIMPLE:case f.LOOKUP_OWNER:case f.LOOKUP_CUSTOMER:return _({onClick:()=>g.openDatasetItem(h.getValue(C.key))},S);case f.FILE:return S?t("div",Object.assign({className:y.fileWrapper},{children:[e(n,{iconName:"Attach"}),_({onClick:v},g.labels.download())]})):e(o,{});case f.IMAGE:return S?t("div",Object.assign({className:y.fileWrapper},{children:[e(l,{className:y.image,src:`data:image/png;base64,${S}`}),_({onClick:v},"Download")]})):e(o,{});case f.OPTIONSET:case f.MULTI_SELECT_OPTIONSET:case f.TWO_OPTIONS:return g.enableOptionSetColors?e(u,{column:C,record:h,defaultRender:k}):k();default:return"__checkbox"===C.key?e(i,{checked:s.node.isSelected(),onChange:(e,t)=>{null==e||e.stopPropagation(),L.toggle(h,t)}}):C.key===E?e(p,{record:h}):k()}};export{C as ReadOnlyCell};
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useTheme, TooltipHost, Icon, Checkbox, Image, Link, Text } from '@fluentui/react';
+import { getReadOnlyCellStyles } from './styles.js';
+import { Commands } from '../Commands/Commands.js';
+import { FileAttribute } from '@talxis/client-libraries';
+import { ReadOnlyOptionSet } from './ReadOnlyOptionSet/ReadOnlyOptionSet.js';
+import { DataType } from '../../../enums/DataType.js';
+import { useColumnValidationController } from '../../../../validation/controllers/useRecordValidationController.js';
+import { useGridInstance } from '../../../hooks/useGridInstance.js';
+import { useSelectionController } from '../../../../selection/controllers/useSelectionController.js';
+import { RIBBON_COLUMN_KEY } from '../../../../constants.js';
+import { useRerender } from '../../../hooks/useRerender.js';
+
+const ReadOnlyCell = (props) => {
+    const grid = useGridInstance();
+    const column = props.baseColumn;
+    const record = props.data;
+    const theme = useTheme();
+    const styles = getReadOnlyCellStyles(theme);
+    const tooltipId = React.useMemo(() => Math.random().toString(), []);
+    const [isValid, errorMessage] = useColumnValidationController({
+        column: column,
+        record: record,
+    });
+    return (jsx(TooltipHost, { id: tooltipId, content: !isValid && !grid.loading ? errorMessage : undefined, children: jsxs("div", { className: styles.root, "data-is-valid": isValid, children: [jsx("div", { className: styles.cellContent, children: jsx(InternalReadOnlyCell, { ...props }) }), !isValid && jsx(Icon, { styles: {
+                        root: {
+                            color: theme.semanticColors.errorIcon
+                        }
+                    }, iconName: 'Error' })] }) }));
+};
+const InternalReadOnlyCell = (props) => {
+    useRerender();
+    const grid = useGridInstance();
+    const column = props.baseColumn;
+    const theme = useTheme();
+    const styles = getReadOnlyCellStyles(theme);
+    const selection = useSelectionController();
+    const record = (() => {
+        //this is so we can load the updated record values from state
+        const updatedRecord = grid.recordUpdateService.record(props.data.getRecordId()).get();
+        return updatedRecord ?? props.data;
+    })();
+    const formattedValue = record.getFormattedValue(column.key);
+    React.useEffect(() => {
+        //rerender();
+    }, [record.getValue(column.key)]);
+    const renderLink = (props, formattedValue) => {
+        switch (column.dataType) {
+            case DataType.LOOKUP_OWNER:
+            case DataType.LOOKUP_SIMPLE:
+            case DataType.LOOKUP_CUSTOMER: {
+                if (!grid.isNavigationEnabled) {
+                    return renderText();
+                }
+            }
+        }
+        return (jsx(Link, { ...props, className: styles.link, title: formattedValue, children: formattedValue }));
+    };
+    const renderText = () => {
+        if (column.isPrimary && grid.isNavigationEnabled) {
+            return renderLink({
+                onClick: () => grid.openDatasetItem(record.getNamedReference())
+            }, formattedValue);
+        }
+        return jsx(Text, { className: `${styles.text} talxis-cell-text`, title: formattedValue, children: formattedValue });
+    };
+    const downloadFile = () => {
+        const storage = new FileAttribute(grid.pcfContext.webAPI);
+        const namedReference = record.getNamedReference();
+        storage.downloadFileFromAttribute({
+            //@ts-ignore - PowerApps do not follow the typings
+            entityName: namedReference.etn ?? namedReference.entityName,
+            recordId: record.getRecordId(),
+            fileAttribute: column.key,
+        }, true);
+    };
+    switch (column.dataType) {
+        case DataType.SINGLE_LINE_EMAIL: {
+            return renderLink({ href: `mailto:${formattedValue}` }, formattedValue);
+        }
+        case DataType.SINGLE_LINE_PHONE: {
+            return renderLink({ href: `tel:${formattedValue}` }, formattedValue);
+        }
+        case DataType.SINGLE_LINE_URL: {
+            return renderLink({
+                href: formattedValue,
+                target: '_blank',
+                rel: 'noopener noreferrer'
+            }, formattedValue);
+        }
+        case DataType.LOOKUP_SIMPLE:
+        case DataType.LOOKUP_OWNER:
+        case DataType.LOOKUP_CUSTOMER: {
+            return renderLink({
+                onClick: () => grid.openDatasetItem(record.getValue(column.key))
+            }, formattedValue);
+        }
+        case DataType.FILE: {
+            if (!formattedValue) {
+                return jsx(Fragment, {});
+            }
+            return (jsxs("div", { className: styles.fileWrapper, children: [jsx(Icon, { iconName: 'Attach' }), renderLink({
+                        onClick: downloadFile
+                    }, grid.labels.download())] }));
+        }
+        case DataType.IMAGE: {
+            if (!formattedValue) {
+                return jsx(Fragment, {});
+            }
+            return (jsxs("div", { className: styles.fileWrapper, children: [jsx(Image, { className: styles.image, src: `data:image/png;base64,${formattedValue}` }), renderLink({
+                        onClick: downloadFile
+                    }, 'Download')] }));
+        }
+        case DataType.OPTIONSET:
+        case DataType.MULTI_SELECT_OPTIONSET:
+        case DataType.TWO_OPTIONS: {
+            if (grid.enableOptionSetColors) {
+                return jsx(ReadOnlyOptionSet, { column: column, record: record, defaultRender: renderText });
+            }
+            return renderText();
+        }
+        default: {
+            if (column.key === '__checkbox') {
+                return jsx(Checkbox, { checked: props.node.isSelected(), onChange: (e, checked) => {
+                        e?.stopPropagation();
+                        selection.toggle(record, checked);
+                    } });
+            }
+            if (column.key === RIBBON_COLUMN_KEY) {
+                return jsx(Commands, { record: record });
+            }
+            return renderText();
+        }
+    }
+};
+
+export { ReadOnlyCell };
+//# sourceMappingURL=ReadOnlyCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReadOnlyCell.js","sources":["../../../../../../../src/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ILinkProps } from '@fluentui/react';\nimport { Link } from '@fluentui/react';\nimport { Text } from '@fluentui/react';\nimport { getReadOnlyCellStyles } from './styles';\nimport { Commands } from '../Commands/Commands';\nimport { Checkbox, Icon, TooltipHost, useTheme, Image } from '@fluentui/react';\nimport { FileAttribute } from '@talxis/client-libraries';\nimport { ReadOnlyOptionSet } from './ReadOnlyOptionSet/ReadOnlyOptionSet';\nimport { IGridColumn } from '../../../interfaces/IGridColumn';\nimport { DataType } from '../../../enums/DataType';\nimport { useColumnValidationController } from '../../../../validation/controllers/useRecordValidationController';\nimport { useGridInstance } from '../../../hooks/useGridInstance';\nimport { useSelectionController } from '../../../../selection/controllers/useSelectionController';\nimport { IEntityRecord } from '../../../../interfaces';\nimport { ICellRendererParams } from '@ag-grid-community/core';\nimport { RIBBON_COLUMN_KEY } from '../../../../constants';\nimport { useRerender } from '../../../hooks/useRerender';\n\ninterface ICellProps extends ICellRendererParams {\n    baseColumn: IGridColumn;\n    data: IEntityRecord;\n    [key: string]: any;\n}\n\nexport const ReadOnlyCell = (props: ICellProps) => {\n    const grid = useGridInstance();\n    const column = props.baseColumn;\n    const record = props.data; \n    const theme = useTheme();\n    const styles = getReadOnlyCellStyles(theme);\n    const tooltipId = React.useMemo(() => Math.random().toString(), []);\n\n    const [isValid, errorMessage] = useColumnValidationController({\n        column: column,\n        record: record,\n    })\n\n    return (\n        <TooltipHost\n            id={tooltipId}\n            content={!isValid && !grid.loading ? errorMessage : undefined}>\n            <div className={styles.root} data-is-valid={isValid}>\n                <div className={styles.cellContent}>\n                    <InternalReadOnlyCell {...props} />\n                </div>\n                {!isValid && <Icon styles={{\n                    root: {\n                        color: theme.semanticColors.errorIcon\n                    }\n                }} iconName='Error' />}\n            </div>\n        </TooltipHost>\n    )\n};\n\nconst InternalReadOnlyCell = (props: ICellProps) => {\n    const [_, rerender] = useRerender();\n    const grid = useGridInstance();\n    const column = props.baseColumn;\n    const theme = useTheme();\n    const styles = getReadOnlyCellStyles(theme);\n    const selection = useSelectionController();\n    const record: IEntityRecord = (() => {\n        //this is so we can load the updated record values from state\n        const updatedRecord = grid.recordUpdateService.record(props.data.getRecordId()).get() as any;\n        return updatedRecord ?? props.data;\n    })();\n    const formattedValue = record.getFormattedValue(column.key);\n\n    React.useEffect(() => {\n        //rerender();\n    }, [record.getValue(column.key)])\n\n    const renderLink = (props: ILinkProps, formattedValue: string): JSX.Element => {\n        switch(column.dataType) {\n            case DataType.LOOKUP_OWNER:\n            case DataType.LOOKUP_SIMPLE:\n            case DataType.LOOKUP_CUSTOMER: {\n                if(!grid.isNavigationEnabled) {\n                    return renderText();\n                }\n            }\n        }\n        return (\n            <Link {...props} className={styles.link} title={formattedValue}>\n                {formattedValue}\n            </Link>\n        );\n    };\n    const renderText = (): JSX.Element => {\n        if (column.isPrimary && grid.isNavigationEnabled) {\n            return renderLink({\n                onClick: () => grid.openDatasetItem(record.getNamedReference())\n            }, formattedValue);\n        }\n        return <Text className={`${styles.text} talxis-cell-text`} title={formattedValue}>{formattedValue}</Text>\n    }\n    const downloadFile = () => {\n        const storage = new FileAttribute(grid.pcfContext.webAPI);\n        const namedReference = record.getNamedReference();\n        storage.downloadFileFromAttribute({\n            //@ts-ignore - PowerApps do not follow the typings\n            entityName: namedReference.etn ?? namedReference.entityName,\n            recordId: record.getRecordId(),\n            fileAttribute: column.key,\n        }, true)\n    }\n\n    switch (column.dataType) {\n        case DataType.SINGLE_LINE_EMAIL: {\n            return renderLink({ href: `mailto:${formattedValue}` }, formattedValue);\n        }\n        case DataType.SINGLE_LINE_PHONE: {\n            return renderLink({ href: `tel:${formattedValue}` }, formattedValue);\n        }\n        case DataType.SINGLE_LINE_URL: {\n            return renderLink({\n                href: formattedValue,\n                target: '_blank',\n                rel: 'noopener noreferrer'\n            }, formattedValue);\n        }\n        case DataType.LOOKUP_SIMPLE:\n        case DataType.LOOKUP_OWNER:\n        case DataType.LOOKUP_CUSTOMER: {\n            return renderLink({\n                onClick: () => grid.openDatasetItem(record.getValue(column.key) as any)\n            }, formattedValue);\n        }\n        case DataType.FILE: {\n            if (!formattedValue) {\n                return <></>\n            }\n            return (\n                <div className={styles.fileWrapper}>\n                    <Icon iconName='Attach' />\n                    {\n                        renderLink({\n                            onClick: downloadFile\n                        }, grid.labels.download())\n                    }\n                </div>\n            )\n        }\n        case DataType.IMAGE: {\n            if (!formattedValue) {\n                return <></>\n            }\n            return (\n                <div className={styles.fileWrapper}>\n                    <Image className={styles.image} src={`data:image/png;base64,${formattedValue}`} />\n                    {\n                        renderLink({\n                            onClick: downloadFile\n                        }, 'Download')\n                    }\n                </div>\n            )\n        }\n        case DataType.OPTIONSET:\n        case DataType.MULTI_SELECT_OPTIONSET:\n        case DataType.TWO_OPTIONS: {\n            if(grid.enableOptionSetColors) {\n                return <ReadOnlyOptionSet\n                column={column}\n                record={record}\n                defaultRender={renderText} />\n            }\n            return renderText();\n        }\n        default: {\n            if(column.key === '__checkbox') {\n                return <Checkbox\n                checked={props.node.isSelected()}\n                onChange={(e, checked) => {\n                    e?.stopPropagation()\n                    selection.toggle(record, checked!)\n                }} />\n            }\n            if(column.key === RIBBON_COLUMN_KEY) {\n                return <Commands record={record} />\n            }\n            return renderText()\n        }\n\n    }\n}"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyOptionSet/ReadOnlyOptionSet.js

@@ -1 +1,49 @@
-import{__awaiter as t}from"tslib";import{jsx as e,Fragment as o}from"react/jsx-runtime";import{useState as r,useEffect as l}from"react";import{useTheme as i,Text as n}from"@fluentui/react";import{optionSetStyles as a}from"./styles.js";import s from"color";import{useGridInstance as d}from"../../../../hooks/useGridInstance.js";import{DataType as u}from"../../../../enums/DataType.js";import"../../../../../GridContext.js";const c=c=>{const m=d(),{record:p,column:f,defaultRender:v}=Object.assign({},c),[T,O]=r(null),y=i().palette.neutralLight;return l((()=>{t(void 0,void 0,void 0,(function*(){const e=yield t(void 0,void 0,void 0,(function*(){var t;const[e,o]=yield m.metadata.getOptions(f);let r=p.getValue(f.key);return f.dataType===u.OPTIONSET&&(r=r?[parseInt(r)]:null),f.dataType===u.MULTI_SELECT_OPTIONSET&&(r=r?r.split(",").map((t=>parseInt(t))):null),f.dataType===u.TWO_OPTIONS&&(r=[parseInt(r)]),null!==(t=o.filter((t=>null==r?void 0:r.includes(t.Value))))&&void 0!==t?t:[]}));O(e)}))}),[p.getValue(f.key)]),null===T?e(o,{}):0!==T.length&&T.find((t=>t.Color))?e("div",Object.assign({className:a.root},{children:T.map((t=>{var o,r;return e("div",Object.assign({title:t.Label,className:a.option,style:{backgroundColor:null!==(o=t.Color)&&void 0!==o?o:y,color:new s(null!==(r=t.Color)&&void 0!==r?r:y).isDark()?"white":"black"}},{children:e(n,{children:t.Label})}),t.Value)}))})):v()};export{c as ReadOnlyOptionSet};
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { useTheme, Text } from '@fluentui/react';
+import { optionSetStyles } from './styles.js';
+import color from 'color';
+import { useGridInstance } from '../../../../hooks/useGridInstance.js';
+import { DataType } from '../../../../enums/DataType.js';
+
+const ReadOnlyOptionSet = (props) => {
+    const grid = useGridInstance();
+    const { record, column, defaultRender } = { ...props };
+    const [options, setOptions] = useState(null);
+    const theme = useTheme();
+    const defaultColor = theme.palette.neutralLight;
+    useEffect(() => {
+        (async () => {
+            const getOptions = async () => {
+                const [defaultValue, options] = await grid.metadata.getOptions(column);
+                let value = record.getValue(column.key);
+                if (column.dataType === DataType.OPTIONSET) {
+                    value = value ? [parseInt(value)] : null;
+                }
+                if (column.dataType === DataType.MULTI_SELECT_OPTIONSET) {
+                    value = value ? value.split(',').map((value) => parseInt(value)) : null;
+                }
+                if (column.dataType === DataType.TWO_OPTIONS) {
+                    value = [parseInt(value)];
+                }
+                return options.filter(option => value?.includes(option.Value)) ?? [];
+            };
+            const results = await getOptions();
+            setOptions(results);
+        })();
+    }, [record.getValue(column.key)]);
+    //options not loaded yet
+    if (options === null) {
+        return jsx(Fragment, {});
+    }
+    //options loaded but either no value selected or no colors are present
+    if (options.length === 0 || !options.find(x => x.Color)) {
+        return defaultRender();
+    }
+    else {
+        return (jsx("div", { className: optionSetStyles.root, children: options.map(x => jsx("div", { title: x.Label, className: optionSetStyles.option, style: { backgroundColor: x.Color ?? defaultColor, color: new color(x.Color ?? defaultColor).isDark() ? 'white' : 'black' }, children: jsx(Text, { children: x.Label }) }, x.Value)) }));
+    }
+};
+
+export { ReadOnlyOptionSet };
+//# sourceMappingURL=ReadOnlyOptionSet.js.map

package/dist/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyOptionSet/ReadOnlyOptionSet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReadOnlyOptionSet.js","sources":["../../../../../../../../src/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyOptionSet/ReadOnlyOptionSet.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport { useEffect, useState } from \"react\";\nimport { Text } from '@fluentui/react';\nimport { optionSetStyles } from \"./styles\";\nimport color from 'color';\nimport { useTheme } from \"@fluentui/react\";\nimport { IGridColumn } from \"../../../../interfaces/IGridColumn\";\nimport { useGridInstance } from \"../../../../hooks/useGridInstance\";\nimport { DataType } from \"../../../../enums/DataType\";\n\ninterface IReadOnlyOptionSet {\n    column: IGridColumn;\n    record: ComponentFramework.PropertyHelper.DataSetApi.EntityRecord;\n    defaultRender: () => ReactElement\n}\n\nexport const ReadOnlyOptionSet = (props: IReadOnlyOptionSet) => {\n    const grid = useGridInstance();\n    const { record, column, defaultRender } = { ...props }\n    const [options, setOptions] = useState<ComponentFramework.PropertyHelper.OptionMetadata[] | null>(null);\n    const theme = useTheme();\n    const defaultColor = theme.palette.neutralLight;\n\n    useEffect(() => {\n        (async () => {\n            const getOptions = async (): Promise<ComponentFramework.PropertyHelper.OptionMetadata[]> => {\n                const [defaultValue, options] = await grid.metadata.getOptions(column);\n                let value: any = record.getValue(column.key);\n                if (column.dataType === DataType.OPTIONSET) {\n                    value = value ? [parseInt(value)] : null;\n                }\n                if (column.dataType === DataType.MULTI_SELECT_OPTIONSET) {\n                    value = value ? value.split(',').map((value: string) => parseInt(value)) : null;\n                }\n                if (column.dataType === DataType.TWO_OPTIONS) {\n                    value = [parseInt(value)];\n                }\n                return options.filter(option => value?.includes(option.Value)) ?? [];\n            }\n            const results = await getOptions();\n            setOptions(results);\n        })();\n    }, [record.getValue(column.key)]);\n\n    //options not loaded yet\n    if (options === null) {\n        return <></>\n    }\n    //options loaded but either no value selected or no colors are present\n    if (options.length === 0 || !options.find(x => x.Color)) {\n        return defaultRender();\n    }\n    else {\n        return (\n            <div className={optionSetStyles.root}>\n                {options.map(x => <div\n                    key={x.Value}\n                    title={x.Label}\n                    className={optionSetStyles.option}\n                    style={{ backgroundColor: x.Color ?? defaultColor, color: new color(x.Color ?? defaultColor).isDark() ? 'white' : 'black' }}>\n                    <Text>{x.Label}</Text>\n                </div>)}\n            </div>\n        )\n    }\n\n}"],"names":["_jsx"],"mappings":"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"}

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

@@ -1 +1,27 @@
-import{mergeStyleSets as e}from"@fluentui/react";const o=e({root:{display:"flex",gap:5,overflow:"hidden","--light":80,"--threshold":60,flexGrow:1},option:{borderRadius:5,paddingLeft:4,paddingRight:4,overflow:"hidden",textOverflow:"ellipsis",flexGrow:1,textAlign:"center",">span":{color:"inherit"}}});export{o as optionSetStyles};
+import { mergeStyleSets } from '@fluentui/react';
+
+const optionSetStyles = mergeStyleSets({
+    root: {
+        display: 'flex',
+        gap: 5,
+        overflow: 'hidden',
+        '--light': 80,
+        '--threshold': 60,
+        flexGrow: 1
+    },
+    option: {
+        borderRadius: 5,
+        paddingLeft: 4,
+        paddingRight: 4,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        flexGrow: 1,
+        textAlign: 'center',
+        '>span': {
+            color: 'inherit',
+        }
+    }
+});
+
+export { optionSetStyles };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../../src/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyOptionSet/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\";\n\nexport const optionSetStyles = mergeStyleSets({\n    root: {\n        display: 'flex',\n        gap: 5,\n        overflow: 'hidden',\n        '--light': 80,\n        '--threshold': 60,\n        flexGrow: 1\n    },\n    option: {\n        borderRadius: 5,\n        paddingLeft: 4,\n        paddingRight: 4,\n        overflow: 'hidden',\n        textOverflow: 'ellipsis',\n        flexGrow: 1,\n        textAlign: 'center',\n        '>span': {\n            color: 'inherit',\n        }\n    }\n})"],"names":[],"mappings":";;AAEO,MAAM,eAAe,GAAG,cAAc,CAAC;AAC1C,IAAA,IAAI,EAAE;AACF,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,SAAS,EAAE,EAAE;AACb,QAAA,aAAa,EAAE,EAAE;AACjB,QAAA,QAAQ,EAAE,CAAC;AACd,KAAA;AACD,IAAA,MAAM,EAAE;AACJ,QAAA,YAAY,EAAE,CAAC;AACf,QAAA,WAAW,EAAE,CAAC;AACd,QAAA,YAAY,EAAE,CAAC;AACf,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,YAAY,EAAE,UAAU;AACxB,QAAA,QAAQ,EAAE,CAAC;AACX,QAAA,SAAS,EAAE,QAAQ;AACnB,QAAA,OAAO,EAAE;AACL,YAAA,KAAK,EAAE,SAAS;AACnB,SAAA;AACJ,KAAA;AACJ,CAAA;;;;"}

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

@@ -1 +1,58 @@
-import{keyframes as e,mergeStyleSets as i}from"@fluentui/react";const t=e({"100%":{backgroundPosition:"150px 0"}}),l=e=>i({root:{display:"flex",height:"100%",alignItems:"center",gap:10},text:{fontSize:14,overflow:"hidden",textOverflow:"ellipsis"},link:{fontSize:14,overflow:"hidden",textOverflow:"ellipsis"},fileWrapper:{display:"flex",gap:3},image:{marginRight:5,img:{width:32}},cellContent:{display:"flex",height:"100%",alignItems:"center",flexGrow:1,overflow:"hidden",':has([data-align="right"])':{justifyContent:"flex-end"}},loadingLine:{height:7,borderRadius:5,width:"100%",animation:`${t} 2s infinite`,backgroundSize:"1000px 100%",background:`linear-gradient(to right, color-mix(in oklab, ${e.palette.white}, ${e.palette.black} 8%) 4%, color-mix(in oklab, ${e.palette.white}, ${e.palette.black} 5%) 25%, color-mix(in oklab, ${e.palette.white}, ${e.palette.black} 8%) 36%)`}});export{l as getReadOnlyCellStyles};
+import { keyframes, mergeStyleSets } from '@fluentui/react';
+
+const shimmer = keyframes({
+    '100%': {
+        backgroundPosition: '150px 0'
+    },
+});
+const getReadOnlyCellStyles = (theme) => {
+    return mergeStyleSets({
+        root: {
+            display: 'flex',
+            height: '100%',
+            alignItems: 'center',
+            gap: 10
+        },
+        text: {
+            fontSize: 14,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+        },
+        link: {
+            fontSize: 14,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+        },
+        fileWrapper: {
+            display: 'flex',
+            gap: 3
+        },
+        image: {
+            marginRight: 5,
+            'img': {
+                width: 32
+            }
+        },
+        cellContent: {
+            display: 'flex',
+            height: '100%',
+            alignItems: 'center',
+            flexGrow: 1,
+            overflow: 'hidden',
+            ':has([data-align="right"])': {
+                justifyContent: 'flex-end',
+            }
+        },
+        loadingLine: {
+            height: 7,
+            borderRadius: 5,
+            width: '100%',
+            animation: `${shimmer} 2s infinite`,
+            backgroundSize: '1000px 100%',
+            background: `linear-gradient(to right, color-mix(in oklab, ${theme.palette.white}, ${theme.palette.black} 8%) 4%, color-mix(in oklab, ${theme.palette.white}, ${theme.palette.black} 5%) 25%, color-mix(in oklab, ${theme.palette.white}, ${theme.palette.black} 8%) 36%)`
+        }
+    });
+};
+
+export { getReadOnlyCellStyles };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/Grid/core/components/Cell/ReadOnlyCell/styles.ts"],"sourcesContent":["import { ITheme, mergeStyleSets, keyframes } from \"@fluentui/react\";\n\nconst shimmer = keyframes({\n    '100%': {\n      backgroundPosition: '150px 0'\n    },\n  });\n\nexport const getReadOnlyCellStyles = (theme: ITheme) => {\n    return mergeStyleSets({\n        root: {\n            display: 'flex',\n            height: '100%',\n            alignItems: 'center',\n            gap: 10\n        },\n        text: {\n            fontSize: 14,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis'\n        },\n        link: {\n            fontSize: 14,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis'\n        },\n        fileWrapper: {\n            display: 'flex',\n            gap: 3\n        },\n        image: {\n            marginRight: 5,\n            'img': {\n                width: 32\n            }\n        },\n        cellContent: {\n            display: 'flex',\n            height: '100%',\n            alignItems: 'center',\n            flexGrow: 1,\n            overflow: 'hidden',\n            ':has([data-align=\"right\"])': {\n                justifyContent: 'flex-end',\n            }\n        },\n        loadingLine: {\n            height: 7,\n            borderRadius: 5,\n            width: '100%',\n            animation: `${shimmer} 2s infinite`,\n            backgroundSize: '1000px 100%',\n            background: `linear-gradient(to right, color-mix(in oklab, ${theme.palette.white}, ${theme.palette.black} 8%) 4%, color-mix(in oklab, ${theme.palette.white}, ${theme.palette.black} 5%) 25%, color-mix(in oklab, ${theme.palette.white}, ${theme.palette.black} 8%) 36%)`\n        }\n    })\n}"],"names":[],"mappings":";;AAEA,MAAM,OAAO,GAAG,SAAS,CAAC;AACtB,IAAA,MAAM,EAAE;AACN,QAAA,kBAAkB,EAAE,SAAS;AAC9B,KAAA;AACF,CAAA,CAAC,CAAC;AAEQ,MAAA,qBAAqB,GAAG,CAAC,KAAa,KAAI;AACnD,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,IAAI,EAAE;AACF,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,GAAG,EAAE,EAAE;AACV,SAAA;AACD,QAAA,IAAI,EAAE;AACF,YAAA,QAAQ,EAAE,EAAE;AACZ,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,YAAY,EAAE,UAAU;AAC3B,SAAA;AACD,QAAA,IAAI,EAAE;AACF,YAAA,QAAQ,EAAE,EAAE;AACZ,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,YAAY,EAAE,UAAU;AAC3B,SAAA;AACD,QAAA,WAAW,EAAE;AACT,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,GAAG,EAAE,CAAC;AACT,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,WAAW,EAAE,CAAC;AACd,YAAA,KAAK,EAAE;AACH,gBAAA,KAAK,EAAE,EAAE;AACZ,aAAA;AACJ,SAAA;AACD,QAAA,WAAW,EAAE;AACT,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,4BAA4B,EAAE;AAC1B,gBAAA,cAAc,EAAE,UAAU;AAC7B,aAAA;AACJ,SAAA;AACD,QAAA,WAAW,EAAE;AACT,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,YAAY,EAAE,CAAC;AACf,YAAA,KAAK,EAAE,MAAM;YACb,SAAS,EAAE,CAAG,EAAA,OAAO,CAAc,YAAA,CAAA;AACnC,YAAA,cAAc,EAAE,aAAa;AAC7B,YAAA,UAAU,EAAE,CAAiD,8CAAA,EAAA,KAAK,CAAC,OAAO,CAAC,KAAK,CAAA,EAAA,EAAK,KAAK,CAAC,OAAO,CAAC,KAAK,CAAgC,6BAAA,EAAA,KAAK,CAAC,OAAO,CAAC,KAAK,CAAA,EAAA,EAAK,KAAK,CAAC,OAAO,CAAC,KAAK,iCAAiC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAK,EAAA,EAAA,KAAK,CAAC,OAAO,CAAC,KAAK,CAAW,SAAA,CAAA;AAC7Q,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

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

@@ -1 +1,60 @@
-import{jsxs as o,Fragment as t,jsx as i}from"react/jsx-runtime";import{useState as e,useRef as s}from"react";import{useTheme as r,CommandBarButton as n,Icon as l,Label as m}from"@fluentui/react";import{FilterCallout as a}from"../../../filtering/components/FilterCallout/FilterCallout.js";import{SortingContextualMenu as p}from"../../../sorting/components/SortingContextualMenu/SortingContextualMenu.js";import{getColumnHeaderStyles as u}from"./styles.js";import{useGridInstance as c}from"../../hooks/useGridInstance.js";import"tslib";import"../../../filtering/components/FilterCallout/styles.js";import"../../../filtering/controller/useColumnFilterConditionController.js";import"../../hooks/useRefreshCallback.js";import"../../../filtering/utils/FilteringUtilts.js";import"../../enums/ConditionOperator.js";import"../../../filtering/constants.js";import"../../../filtering/components/FilterCallout/components/ConditionOperator/ConditionOperator.js";import"@talxis/react-components";import"../../enums/DataType.js";import"../../../filtering/components/FilterCallout/components/ConditionValue/ConditionValue.js";import"../Component/Component.js";import"../../../../DateTime/DateTime.js";import"../../../../DateTime/styles.js";import"../../../../DateTime/hooks/useDateTime.js";import"../../../../../hooks/useInputBasedControl.js";import"../../../../../hooks/useControl.js";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";import"../../../../../hooks/useControlTheme.js";import"../../../../../utils/Theme.js";import"@fluentui/react-migration-v8-v9";import"../../../../../hooks/useControlSizing.js";import"dayjs";import"dayjs/plugin/utc";import"dayjs/plugin/customParseFormat";import"../../../../DateTime/translations.js";import"../../../../DateTime/components/Calendar.js";import"@fluentui/react/lib/Calendar";import"../../../../Decimal/Decimal.js";import"numeral";import"../../../../../utils/Numeral.js";import"../../../../../constants.js";import"../../../../Decimal/components/ArrowButtons.js";import"../../../../Decimal/components/styles.js";import"../../../../Lookup/Lookup.js";import"../../../../Lookup/hooks/useLookup.js";import"../../../../Lookup/translations.js";import"../../../../Lookup/hooks/useFetchXml.js";import"@talxis/client-libraries";import"../../../../Lookup/components/TargetSelector.js";import"@fluentui/react/lib/Text";import"../../../../Lookup/styles.js";import"../../../../Lookup/hooks/useLoadedEntities.js";import"../../../../../hooks/useMouseOver.js";import"../../../../Lookup/components/RecordCreator.js";import"../../../../../hooks/useFocusIn.js";import"../../../../MultiSelectOptionSet/MultiSelectOptionSet.js";import"../../../../OptionSet/OptionSet.js";import"../../../../TextField/TextField.js";import"../../../../TwoOptions/TwoOptions.js";import"../../../../Duration/Duration.js";import"../../../../Duration/translations.js";import"../Component/controller/useComponentController.js";import"../Component/model/Component.js";import"../../../validation/model/ColumnValidation.js";import"validator/es/lib/isEmail";import"validator/es/lib/isURL";import"../../model/GridDependency.js";import"../../../filtering/components/FilterCallout/components/ConditionValue/model/ConditionComponentValue.js";import"../../../sorting/components/SortingContextualMenu/styles.js";import"../../../sorting/controllers/useColumnSortingController.js";import"../../../GridContext.js";const j=j=>{const d=c(),C=j.baseColumn,[g,b]=e(null),[f,h]=e(null),k=u(r()),v=s(null),D=o=>{var t,i;if("scroll"!==o.type)return!1;const e=o.target;return!(!(null===(t=null==e?void 0:e.classList)||void 0===t?void 0:t.contains("ag-body-viewport"))&&!(null===(i=null==e?void 0:e.classList)||void 0===i?void 0:i.contains("ag-body-vertical-scroll-viewport")))||!!/iPad|iPhone|iPod/.test(navigator.userAgent)};return o(t,{children:[o(n,Object.assign({elementRef:v,title:C.displayName,className:k.root,onClick:()=>{!1===C.isFilterable&&!1===C.isSortable||b({column:C,onDismiss:(o,t,i)=>{b(null),i&&h({column:C,onDismiss:()=>{h(null)}})}})}},{children:[d.isEditable&&!C.isEditable&&i(l,{className:k.editIcon,iconName:"Uneditable"}),o("div",Object.assign({className:k.labelWrapper},{children:[i(m,Object.assign({className:k.label},{children:C.displayName})),C.isRequired&&i("span",Object.assign({className:k.requiredSymbol},{children:"*"}))]})),o("div",Object.assign({className:k.filterSortIcons},{children:[C.isSorted&&i(l,{iconName:C.isSortedDescending?"SortDown":"SortUp"}),C.isFiltered&&i(l,{iconName:"Filter"})]}))]})),g&&i(p,Object.assign({target:v,calloutProps:{preventDismissOnEvent:D}},g)),f&&i(a,Object.assign({preventDismissOnEvent:D,target:v},f))]})};export{j as ColumnHeader};
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, 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 columnHeaderStyles = getColumnHeaderStyles(useTheme());
+    const buttonRef = useRef(null);
+    const onClick = () => {
+        if ((column.isFilterable === false && column.isSortable === false)) {
+            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 && 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 { 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 columnHeaderStyles = getColumnHeaderStyles(useTheme());\n    const buttonRef = useRef<HTMLElement>(null);\n\n    const onClick = () => {\n        if ((column.isFilterable === false && column.isSortable === false)) {\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 && <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.js

@@ -1 +1,26 @@
-import{jsx as e,Fragment as t}from"react/jsx-runtime";import{useTheme as r,Checkbox as o}from"@fluentui/react";import{useSelectionController as s}from"../../../../../selection/controllers/useSelectionController.js";import{useGridInstance as l}from"../../../../hooks/useGridInstance.js";import{getGlobalCheckboxStyles as c}from"./styles.js";import"react";import"../../../../../GridContext.js";const n=()=>{const n=l(),i=r(),d=c(i),m=s();return 0===n.dataset.sortedRecordIds.length?e(t,{}):e("div",Object.assign({className:d.root},{children:"multiple"===m.type&&e(o,{checked:m.allRecordsSelected,indeterminate:m.selectedRecordIds.length>0&&!m.allRecordsSelected,onChange:(e,t)=>{t?m.selectAll():m.clear()}})}))};export{n as GlobalCheckBox};
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useTheme, Checkbox } from '@fluentui/react';
+import { useSelectionController } from '../../../../../selection/controllers/useSelectionController.js';
+import { useGridInstance } from '../../../../hooks/useGridInstance.js';
+import { getGlobalCheckboxStyles } from './styles.js';
+
+const GlobalCheckBox = () => {
+    const grid = useGridInstance();
+    const theme = useTheme();
+    const styles = getGlobalCheckboxStyles(theme);
+    const selection = useSelectionController();
+    if (grid.dataset.sortedRecordIds.length === 0) {
+        return jsx(Fragment, {});
+    }
+    return (jsx("div", { className: styles.root, children: selection.type === 'multiple' &&
+            jsx(Checkbox, { checked: selection.allRecordsSelected, indeterminate: selection.selectedRecordIds.length > 0 && !selection.allRecordsSelected, onChange: (e, checked) => {
+                    if (checked) {
+                        selection.selectAll();
+                        return;
+                    }
+                    selection.clear();
+                } }) }));
+};
+
+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, useTheme } from \"@fluentui/react\";\nimport React from \"react\";\nimport { useSelectionController } from \"../../../../../selection/controllers/useSelectionController\";\nimport { useGridInstance } from \"../../../../hooks/useGridInstance\";\nimport { getGlobalCheckboxStyles } from \"./styles\";\n\nexport const GlobalCheckBox = () => {\n    const grid = useGridInstance();\n    const theme = useTheme();\n    const styles = getGlobalCheckboxStyles(theme);\n    const selection = useSelectionController();\n    if(grid.dataset.sortedRecordIds.length === 0) {\n        return <></>\n    }\n    return (\n        <div className={styles.root}>\n            {selection.type === 'multiple' &&\n                <Checkbox\n                    checked={selection.allRecordsSelected}\n                    indeterminate={selection.selectedRecordIds.length > 0 && !selection.allRecordsSelected}\n                    onChange={(e, checked) => {\n                        if(checked) {\n                            selection.selectAll()\n                            return;\n                        }\n                        selection.clear();\n                    }} />\n            }\n        </div>\n    )\n};"],"names":["_jsx"],"mappings":";;;;;;AAMO,MAAM,cAAc,GAAG,MAAK;AAC/B,IAAA,MAAM,IAAI,GAAG,eAAe,EAAE,CAAC;AAC/B,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;AACzB,IAAA,MAAM,MAAM,GAAG,uBAAuB,CAAC,KAAK,CAAC,CAAC;AAC9C,IAAA,MAAM,SAAS,GAAG,sBAAsB,EAAE,CAAC;IAC3C,IAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE;AAC1C,QAAA,OAAOA,iBAAK,CAAA;AACf,KAAA;AACD,IAAA,QACIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,QAAA,EACtB,SAAS,CAAC,IAAI,KAAK,UAAU;AAC1B,YAAAA,GAAA,CAAC,QAAQ,EAAA,EACL,OAAO,EAAE,SAAS,CAAC,kBAAkB,EACrC,aAAa,EAAE,SAAS,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,kBAAkB,EACtF,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,KAAI;AACrB,oBAAA,IAAG,OAAO,EAAE;wBACR,SAAS,CAAC,SAAS,EAAE,CAAA;wBACrB,OAAO;AACV,qBAAA;oBACD,SAAS,CAAC,KAAK,EAAE,CAAC;iBACrB,EAAA,CAAI,EAEX,CAAA,EACT;AACL;;;;"}

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

@@ -1 +1,19 @@
-import{mergeStyleSets as t}from"@fluentui/react";const e=e=>t({root:{backgroundColor:e.palette.white,flexGrow:1,display:"flex",justifyContent:"center",height:"100%",alignItems:"center",position:"relative",left:1}});export{e as getGlobalCheckboxStyles};
+import { mergeStyleSets } from '@fluentui/react';
+
+const getGlobalCheckboxStyles = (theme) => {
+    return mergeStyleSets({
+        root: {
+            backgroundColor: theme.palette.white,
+            flexGrow: 1,
+            display: 'flex',
+            justifyContent: 'center',
+            height: '100%',
+            alignItems: 'center',
+            position: 'relative',
+            left: 1
+        }
+    });
+};
+
+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.palette.white,\n            flexGrow: 1,\n            display: 'flex',\n            justifyContent: 'center',\n            height: '100%',\n            alignItems: 'center',\n            position: 'relative',\n            left: 1\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,OAAO,CAAC,KAAK;AACpC,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,cAAc,EAAE,QAAQ;AACxB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,IAAI,EAAE,CAAC;AACV,SAAA;AACJ,KAAA,CAAC,CAAC;AACP;;;;"}

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

@@ -1 +1,44 @@
-import{mergeStyleSets as t}from"@fluentui/react";const e=e=>t({root:{width:"100%",textAlign:"left",height:42,paddingLeft:10,paddingRight:10,".ms-Button-flexContainer":{justifyContent:"flex-start",gap:2,pointerEvents:"none"}},labelWrapper:{flex:1,display:"flex",minWidth:0},label:{overflow:"hidden",textOverflow:"ellipsis",cursor:"pointer"},requiredSymbol:{color:e.semanticColors.errorIcon,position:"relative",top:4,left:2},filterSortIcons:{display:"flex",gap:2},editIcon:{marginRight:3}});export{e as getColumnHeaderStyles};
+import { mergeStyleSets } from '@fluentui/react';
+
+const getColumnHeaderStyles = (theme) => {
+    return mergeStyleSets({
+        root: {
+            width: '100%',
+            textAlign: 'left',
+            height: 42,
+            paddingLeft: 10,
+            paddingRight: 10,
+            '.ms-Button-flexContainer': {
+                justifyContent: 'flex-start',
+                gap: 2,
+                pointerEvents: 'none'
+            }
+        },
+        labelWrapper: {
+            flex: 1,
+            display: 'flex',
+            minWidth: 0
+        },
+        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\";\n\nexport const getColumnHeaderStyles = (theme: ITheme) => {\n    return mergeStyleSets({\n        root: {\n            width: '100%',\n            textAlign: 'left',\n            height: 42,\n            paddingLeft: 10,\n            paddingRight: 10,\n            '.ms-Button-flexContainer': {\n                justifyContent: 'flex-start',\n                gap: 2,\n                pointerEvents: 'none'\n            }\n        },\n        labelWrapper: {\n            flex: 1,\n            display: 'flex',\n            minWidth: 0\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":";;AAEa,MAAA,qBAAqB,GAAG,CAAC,KAAa,KAAI;AACnD,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,0BAA0B,EAAE;AACxB,gBAAA,cAAc,EAAE,YAAY;AAC5B,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;AACd,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;;;;"}