@talxis/base-controls 1.2601.4 → 1.2601.6

package/dist/components/DatasetControl/DatasetControl.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IDatasetControlProps } from "./interfaces";
-export declare const DatasetControl: (props: IDatasetControlProps) => JSX.Element;
+export declare const DatasetControl: (props: IDatasetControlProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DatasetControl/EditColumns/ColumnSelector/ColumnSelector.d.ts

@@ -0,0 +1,5 @@
+interface IColumnSelectorProps {
+    openMenuOnMount?: boolean;
+}
+export declare const ColumnSelector: (props: IColumnSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DatasetControl/EditColumns/ColumnSelector/ColumnSelector.js

@@ -0,0 +1,70 @@
+import { jsx } from 'react/jsx-runtime';
+import React, { useMemo, useEffect } from 'react';
+import { getColumnSelectorStyles } from './styles.js';
+import { useModel } from '../../useModel.js';
+import { Selector } from '../Selector/Selector.js';
+import { useEditColumns } from '../useEditColumns.js';
+
+const ColumnSelector = (props) => {
+    const { openMenuOnMount } = props;
+    const editColumnsModel = useEditColumns();
+    const styles = useMemo(() => getColumnSelectorStyles(), []);
+    const model = useModel();
+    const labels = model.getLabels();
+    const ref = React.useRef(null);
+    const [defaultOptions, setDefaultOptions] = React.useState([]);
+    const [inputValue, setInputValue] = React.useState('');
+    const onChange = (columns) => {
+        editColumnsModel.addColumn(columns[columns.length - 1]);
+        setDefaultOptions([...defaultOptions]);
+        setTimeout(() => {
+            ref.current?.focusInput();
+        }, 0);
+    };
+    const onInputChange = (value, actionMeta) => {
+        switch (actionMeta.action) {
+            case 'menu-close':
+            case 'input-blur':
+            case 'set-value': {
+                value = actionMeta.prevInputValue;
+                break;
+            }
+        }
+        setInputValue(value);
+        return value;
+    };
+    useEffect(() => {
+        if (openMenuOnMount) {
+            ref.current?.focus();
+            ref.current?.openMenu('first');
+        }
+        (async () => {
+            const options = await editColumnsModel.getAvailableColumns();
+            //forces refresh of defaultOptions
+            setDefaultOptions(options);
+        })();
+    }, []);
+    return jsx(Selector, { onOverrideComponentProps: (props) => {
+            return {
+                ...props,
+                ref: ref,
+                isMulti: true,
+                inputValue: inputValue,
+                className: styles.root,
+                backspaceRemovesValue: false,
+                value: editColumnsModel.getColumns(),
+                closeMenuOnSelect: false,
+                hideSelectedOptions: true,
+                defaultOptions: defaultOptions,
+                placeholder: `${labels["add-column"]()}...`,
+                controlShouldRenderValue: false,
+                onInputChange: onInputChange,
+                onKeyDown: (ev) => ev.key === 'Enter' && ref.current?.openMenu('first'),
+                loadOptions: (inputValue) => editColumnsModel.getAvailableColumns(inputValue),
+                onChange: (columns) => onChange(columns),
+            };
+        } });
+};
+
+export { ColumnSelector };
+//# sourceMappingURL=ColumnSelector.js.map

package/dist/components/DatasetControl/EditColumns/ColumnSelector/ColumnSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnSelector.js","sources":["../../../../../src/components/DatasetControl/EditColumns/ColumnSelector/ColumnSelector.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { InputActionMeta } from \"react-select\";\nimport { getColumnSelectorStyles } from \"./styles\";\nimport { useModel } from \"../../useModel\";\nimport { Selector } from \"../Selector/Selector\";\nimport { useEditColumns } from \"../useEditColumns\";\nimport { SelectInstance } from 'react-select';\nimport { IColumn } from \"@talxis/client-libraries\";\n\ninterface IColumnSelectorProps {\n    openMenuOnMount?: boolean;\n}\n\n\nexport const ColumnSelector = (props: IColumnSelectorProps) => {\n    const { openMenuOnMount } = props;\n    const editColumnsModel = useEditColumns();\n    const styles = useMemo(() => getColumnSelectorStyles(), []);\n    const model = useModel();\n    const labels = model.getLabels();\n    const ref = React.useRef<SelectInstance>(null);\n    const [defaultOptions, setDefaultOptions] = React.useState<IColumn[]>([]);\n    const [inputValue, setInputValue] = React.useState<string>('');\n\n    const onChange = (columns: IColumn[]) => {\n        editColumnsModel.addColumn(columns[columns.length - 1]);\n        setDefaultOptions([...defaultOptions]);\n        setTimeout(() => {\n            ref.current?.focusInput();\n        }, 0);\n    }\n\n    const onInputChange = (value: string, actionMeta: InputActionMeta) => {\n        switch (actionMeta.action) {\n            case 'menu-close':\n            case 'input-blur':\n            case 'set-value': {\n                value = actionMeta.prevInputValue;\n                break;\n            }\n        }\n        setInputValue(value);\n        return value;\n    }\n\n    useEffect(() => {\n        if (openMenuOnMount) {\n            ref.current?.focus();\n            ref.current?.openMenu('first');\n        }\n        (async () => {\n            const options = await editColumnsModel.getAvailableColumns();\n            //forces refresh of defaultOptions\n            setDefaultOptions(options);\n        })();\n    }, []);\n\n\n    return <Selector<true> onOverrideComponentProps={(props) => {\n        return {\n            ...props,\n            ref: ref,\n            isMulti: true,\n            inputValue: inputValue,\n            className: styles.root,\n            backspaceRemovesValue: false,\n            value: editColumnsModel.getColumns(),\n            closeMenuOnSelect: false,\n            hideSelectedOptions: true,\n            defaultOptions: defaultOptions,\n            placeholder: `${labels[\"add-column\"]()}...`,\n            controlShouldRenderValue: false,\n            onInputChange: onInputChange,\n            onKeyDown: (ev) => ev.key === 'Enter' && ref.current?.openMenu('first'),\n            loadOptions: (inputValue: string) => editColumnsModel.getAvailableColumns(inputValue),\n            onChange: (columns) => onChange(columns as IColumn[]),\n        }\n    }} />\n}"],"names":["_jsx"],"mappings":"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"}

package/dist/components/DatasetControl/EditColumns/ColumnSelector/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const getColumnSelectorStyles: () => import("@fluentui/react").IProcessedStyleSet<{
+    root: {
+        '>div>div>div': {
+            gridTemplateColumns: string;
+        };
+    };
+}>;

package/dist/components/DatasetControl/EditColumns/ColumnSelector/styles.js

@@ -0,0 +1,14 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getColumnSelectorStyles = () => {
+    return mergeStyleSets({
+        root: {
+            '>div>div>div': {
+                gridTemplateColumns: 'min-content'
+            }
+        }
+    });
+};
+
+export { getColumnSelectorStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/DatasetControl/EditColumns/ColumnSelector/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/DatasetControl/EditColumns/ColumnSelector/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getColumnSelectorStyles = () => {\n    return mergeStyleSets({\n        root: {\n            '>div>div>div': {\n                gridTemplateColumns: 'min-content'\n            }\n        }\n    })\n}"],"names":[],"mappings":";;AAEO,MAAM,uBAAuB,GAAG,MAAK;AACxC,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,IAAI,EAAE;AACF,YAAA,cAAc,EAAE;AACZ,gBAAA,mBAAmB,EAAE,aAAa;AACrC,aAAA;AACJ,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/DatasetControl/EditColumns/EditColumns.d.ts

@@ -0,0 +1,5 @@
+interface IEditColumnsProps {
+    onDismiss: () => void;
+}
+export declare const EditColumns: (props: IEditColumnsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DatasetControl/EditColumns/EditColumns.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTheme, Panel, PrimaryButton, DefaultButton, Label } from '@fluentui/react';
+import { useModel } from '../useModel.js';
+import { useMemo, useRef, useState } from 'react';
+import { getEditColumnsStyles } from './styles.js';
+import { useSensor, PointerSensor, DndContext } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { SortableItem } from './SortableItem/SortableItem.js';
+import { useRerender } from '@talxis/react-components';
+import { ColumnSelector } from './ColumnSelector/ColumnSelector.js';
+import { useShouldRemount } from '../../../hooks/useShouldRemount.js';
+import { ScopeSelector } from './ScopeSelector/ScopeSelector.js';
+import { EditColumnsContext } from './useEditColumns.js';
+import { useEventEmitter } from '../../../hooks/useEventEmitter.js';
+
+const EditColumns = (props) => {
+    const model = useModel();
+    const datasetControl = model.getDatasetControl();
+    const dataset = datasetControl.getDataset();
+    const provider = dataset.getDataProvider();
+    const theme = useTheme();
+    const labels = model.getLabels();
+    const styles = useMemo(() => getEditColumnsStyles(theme), []);
+    const editColumnsModel = useMemo(() => datasetControl.editColumns, []);
+    const columns = editColumnsModel.getColumns();
+    const sensor = useSensor(PointerSensor);
+    const scrollableContainerRef = useRef(null);
+    const [shouldRemountColumnSelector, remountColumnSelector] = useShouldRemount();
+    const [openColumnSelectorOnMount, setOpenColumnSelectorOnMount] = useState(false);
+    const rerender = useRerender();
+    useEventEmitter(editColumnsModel, 'onColumnsChanged', rerender);
+    useEventEmitter(editColumnsModel, 'onRelatedEntityColumnChanged', () => {
+        remountColumnSelector();
+        setOpenColumnSelectorOnMount(true);
+    });
+    useEventEmitter(editColumnsModel, 'onColumnAdded', () => scrollableContainerRef.current?.scrollTo({ top: 0 }));
+    const getTitle = () => {
+        const collectionName = provider.getMetadata().DisplayCollectionName;
+        let title = labels["edit-columns"]();
+        if (collectionName) {
+            title += `: ${collectionName}`;
+        }
+        return title;
+    };
+    const onDismiss = (ev) => {
+        return ev?.key === 'Escape' ? ev?.preventDefault() : props.onDismiss();
+    };
+    return jsx(EditColumnsContext.Provider, { value: editColumnsModel, children: jsxs(Panel, { headerText: getTitle(), isOpen: true, onDismiss: onDismiss, styles: {
+                footer: styles.panelFooter,
+                commands: styles.panelCommands,
+                scrollableContent: styles.panelScrollableContent,
+                content: styles.panelContent
+            }, isFooterAtBottom: true, onRenderFooterContent: () => {
+                return jsxs("div", { className: styles.panelFooterButtons, children: [jsx(PrimaryButton, { onClick: () => {
+                                editColumnsModel.save();
+                                props.onDismiss();
+                            }, text: labels['save']() }), jsx(DefaultButton, { text: labels['cancel'](), onClick: props.onDismiss })] });
+            }, children: [jsx("div", { className: styles.header, children: jsxs("div", { className: styles.selectors, children: [jsxs("div", { className: styles.selector, children: [jsx(Label, { children: labels["column-source"]() }), jsx(ScopeSelector, {})] }), !shouldRemountColumnSelector &&
+                                jsx("div", { className: styles.selector, children: jsx(ColumnSelector, { openMenuOnMount: openColumnSelectorOnMount }) })] }) }), jsx("div", { ref: scrollableContainerRef, className: styles.scrollableContainer, children: jsx(DndContext, { sensors: [sensor], onDragEnd: (e) => editColumnsModel.onColumnMoved(e.active.id.toString(), e.over?.id.toString() ?? ''), modifiers: [restrictToVerticalAxis], children: jsx(SortableContext, { strategy: verticalListSortingStrategy, items: editColumnsModel.getColumns(), children: jsx("div", { className: styles.sortableItemsWrapper, children: columns.filter(col => !col.isHidden).map(col => {
+                                    return jsx(SortableItem, { column: col }, col.name);
+                                }) }) }) }) })] }) });
+};
+
+export { EditColumns };
+//# sourceMappingURL=EditColumns.js.map

package/dist/components/DatasetControl/EditColumns/EditColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditColumns.js","sources":["../../../../src/components/DatasetControl/EditColumns/EditColumns.tsx"],"sourcesContent":["import { DefaultButton, Label, Panel, PanelType, PrimaryButton, useTheme } from \"@fluentui/react\";\nimport { useModel } from \"../useModel\";\nimport { Key, useMemo, useRef, useState } from \"react\";\nimport { getEditColumnsStyles } from \"./styles\";\nimport { DndContext, PointerSensor, useSensor } from \"@dnd-kit/core\";\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\";\nimport { SortableContext, verticalListSortingStrategy } from \"@dnd-kit/sortable\";\nimport { SortableItem } from \"./SortableItem/SortableItem\";\nimport { useEventEmitter } from \"../../../hooks\";\nimport { useRerender } from \"@talxis/react-components\";\nimport { ColumnSelector } from \"./ColumnSelector/ColumnSelector\";\nimport { useShouldRemount } from \"../../../hooks/useShouldRemount\";\nimport { ScopeSelector } from \"./ScopeSelector/ScopeSelector\";\nimport { IEditColumnsEvents } from \"../../../utils/dataset-control/EditColumns\";\nimport { EditColumnsContext } from \"./useEditColumns\";\n\ninterface IEditColumnsProps {\n    onDismiss: () => void;\n}\n\nexport const EditColumns = (props: IEditColumnsProps) => {\n    const model = useModel();\n    const datasetControl = model.getDatasetControl();\n    const dataset = datasetControl.getDataset();\n    const provider = dataset.getDataProvider();\n    const theme = useTheme();\n    const labels = model.getLabels();\n    const styles = useMemo(() => getEditColumnsStyles(theme), []);\n    const editColumnsModel = useMemo(() => datasetControl.editColumns, []);\n    const columns = editColumnsModel.getColumns();\n    const sensor = useSensor(PointerSensor);\n    const scrollableContainerRef = useRef<HTMLDivElement>(null);\n    const [shouldRemountColumnSelector, remountColumnSelector] = useShouldRemount();\n    const [openColumnSelectorOnMount, setOpenColumnSelectorOnMount] = useState(false);\n    const rerender = useRerender();\n    useEventEmitter<IEditColumnsEvents>(editColumnsModel, 'onColumnsChanged', rerender);\n    useEventEmitter<IEditColumnsEvents>(editColumnsModel, 'onRelatedEntityColumnChanged', () => {\n        remountColumnSelector();\n        setOpenColumnSelectorOnMount(true);\n    });\n    useEventEmitter<IEditColumnsEvents>(editColumnsModel, 'onColumnAdded', () => scrollableContainerRef.current?.scrollTo({ top: 0 }));\n\n    const getTitle = () => {\n        const collectionName = provider.getMetadata().DisplayCollectionName;\n        let title = labels[\"edit-columns\"]();\n        if (collectionName) {\n            title += `: ${collectionName}`;\n        }\n        return title;\n    }\n\n    const onDismiss = (ev?: React.SyntheticEvent<HTMLElement, Event> | KeyboardEvent | undefined) => {\n        return (ev as KeyboardEvent)?.key === 'Escape' ? ev?.preventDefault() : props.onDismiss();\n    };\n\n    return <EditColumnsContext.Provider value={editColumnsModel}>\n        <Panel\n            headerText={getTitle()}\n            isOpen={true}\n            onDismiss={onDismiss}\n            styles={{\n                footer: styles.panelFooter,\n                commands: styles.panelCommands,\n                scrollableContent: styles.panelScrollableContent,\n                content: styles.panelContent\n            }}\n            isFooterAtBottom\n            onRenderFooterContent={() => {\n                return <div className={styles.panelFooterButtons}>\n                    <PrimaryButton\n                        onClick={() => {\n                            editColumnsModel.save();\n                            props.onDismiss();\n                        }}\n                        text={labels['save']()}\n                    />\n                    <DefaultButton\n                        text={labels['cancel']()}\n                        onClick={props.onDismiss}\n                    />\n                </div>\n            }}\n        >\n            <div className={styles.header}>\n                <div className={styles.selectors}>\n                    <div className={styles.selector}>\n                        <Label>{labels[\"column-source\"]()}</Label>\n                        <ScopeSelector />\n                    </div>\n                    {!shouldRemountColumnSelector &&\n                        <div className={styles.selector}>\n                            <ColumnSelector \n                                openMenuOnMount={openColumnSelectorOnMount} />\n                        </div>\n                    }\n                </div>\n            </div>\n            <div ref={scrollableContainerRef} className={styles.scrollableContainer}>\n                <DndContext\n                    sensors={[sensor]}\n                    onDragEnd={(e) => editColumnsModel.onColumnMoved(e.active.id.toString(), e.over?.id.toString() ?? '')}\n                    modifiers={[restrictToVerticalAxis]}\n                >\n                    <SortableContext\n                        strategy={verticalListSortingStrategy}\n                        items={editColumnsModel.getColumns()}>\n                        <div className={styles.sortableItemsWrapper}>\n                            {columns.filter(col => !col.isHidden).map(col => {\n                                return <SortableItem key={col.name} column={col} />\n                            })}\n                        </div>\n                    </SortableContext>\n                </DndContext>\n            </div>\n        </Panel>\n    </EditColumnsContext.Provider>\n}\n\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;AAoBa,MAAA,WAAW,GAAG,CAAC,KAAwB,KAAI;AACpD,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;AACzB,IAAA,MAAM,cAAc,GAAG,KAAK,CAAC,iBAAiB,EAAE,CAAC;AACjD,IAAA,MAAM,OAAO,GAAG,cAAc,CAAC,UAAU,EAAE,CAAC;AAC5C,IAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,eAAe,EAAE,CAAC;AAC3C,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;AACzB,IAAA,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;AACjC,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,oBAAoB,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;AAC9D,IAAA,MAAM,gBAAgB,GAAG,OAAO,CAAC,MAAM,cAAc,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AACvE,IAAA,MAAM,OAAO,GAAG,gBAAgB,CAAC,UAAU,EAAE,CAAC;AAC9C,IAAA,MAAM,MAAM,GAAG,SAAS,CAAC,aAAa,CAAC,CAAC;AACxC,IAAA,MAAM,sBAAsB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC5D,MAAM,CAAC,2BAA2B,EAAE,qBAAqB,CAAC,GAAG,gBAAgB,EAAE,CAAC;IAChF,MAAM,CAAC,yBAAyB,EAAE,4BAA4B,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAClF,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;AAC/B,IAAA,eAAe,CAAqB,gBAAgB,EAAE,kBAAkB,EAAE,QAAQ,CAAC,CAAC;AACpF,IAAA,eAAe,CAAqB,gBAAgB,EAAE,8BAA8B,EAAE,MAAK;AACvF,QAAA,qBAAqB,EAAE,CAAC;QACxB,4BAA4B,CAAC,IAAI,CAAC,CAAC;AACvC,KAAC,CAAC,CAAC;IACH,eAAe,CAAqB,gBAAgB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC,OAAO,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAEnI,MAAM,QAAQ,GAAG,MAAK;QAClB,MAAM,cAAc,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC,qBAAqB,CAAC;AACpE,QAAA,IAAI,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC,EAAE,CAAC;AACrC,QAAA,IAAI,cAAc,EAAE;AAChB,YAAA,KAAK,IAAI,CAAA,EAAA,EAAK,cAAc,CAAA,CAAE,CAAC;AAClC,SAAA;AACD,QAAA,OAAO,KAAK,CAAC;AACjB,KAAC,CAAA;AAED,IAAA,MAAM,SAAS,GAAG,CAAC,EAAyE,KAAI;AAC5F,QAAA,OAAQ,EAAoB,EAAE,GAAG,KAAK,QAAQ,GAAG,EAAE,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;AAC9F,KAAC,CAAC;IAEF,OAAOA,GAAA,CAAC,kBAAkB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,gBAAgB,EAAA,QAAA,EACvDC,IAAC,CAAA,KAAK,EACF,EAAA,UAAU,EAAE,QAAQ,EAAE,EACtB,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE;gBACJ,MAAM,EAAE,MAAM,CAAC,WAAW;gBAC1B,QAAQ,EAAE,MAAM,CAAC,aAAa;gBAC9B,iBAAiB,EAAE,MAAM,CAAC,sBAAsB;gBAChD,OAAO,EAAE,MAAM,CAAC,YAAY;AAC/B,aAAA,EACD,gBAAgB,EAAA,IAAA,EAChB,qBAAqB,EAAE,MAAK;AACxB,gBAAA,OAAOA,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAC5C,QAAA,EAAA,CAAAD,GAAA,CAAC,aAAa,EAAA,EACV,OAAO,EAAE,MAAK;gCACV,gBAAgB,CAAC,IAAI,EAAE,CAAC;gCACxB,KAAK,CAAC,SAAS,EAAE,CAAC;AACtB,6BAAC,EACD,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EACxB,CAAA,EACFA,GAAC,CAAA,aAAa,EACV,EAAA,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE,EACxB,OAAO,EAAE,KAAK,CAAC,SAAS,EAC1B,CAAA,CAAA,EAAA,CACA,CAAA;AACV,aAAC,aAEDA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,MAAM,EAAA,QAAA,EACzBC,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,SAAS,EAC5B,QAAA,EAAA,CAAAA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,aAC3BD,GAAC,CAAA,KAAK,EAAE,EAAA,QAAA,EAAA,MAAM,CAAC,eAAe,CAAC,EAAE,EAAA,CAAS,EAC1CA,GAAC,CAAA,aAAa,KAAG,CACf,EAAA,CAAA,EACL,CAAC,2BAA2B;gCACzBA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,QAAQ,YAC3BA,GAAC,CAAA,cAAc,EACX,EAAA,eAAe,EAAE,yBAAyB,GAAI,EAChD,CAAA,CAAA,EAAA,CAER,EACJ,CAAA,EACNA,GAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,CAAC,mBAAmB,YACnEA,GAAC,CAAA,UAAU,EACP,EAAA,OAAO,EAAE,CAAC,MAAM,CAAC,EACjB,SAAS,EAAE,CAAC,CAAC,KAAK,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,EACrG,SAAS,EAAE,CAAC,sBAAsB,CAAC,EAEnC,QAAA,EAAAA,GAAA,CAAC,eAAe,EAAA,EACZ,QAAQ,EAAE,2BAA2B,EACrC,KAAK,EAAE,gBAAgB,CAAC,UAAU,EAAE,EAAA,QAAA,EACpCA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,oBAAoB,EACtC,QAAA,EAAA,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,GAAG,IAAG;oCAC5C,OAAOA,GAAA,CAAC,YAAY,EAAA,EAAgB,MAAM,EAAE,GAAG,EAAA,EAArB,GAAG,CAAC,IAAI,CAAiB,CAAA;AACvD,iCAAC,CAAC,EACA,CAAA,EAAA,CACQ,GACT,EACX,CAAA,CAAA,EAAA,CACF,GACkB,CAAA;AAClC;;;;"}

package/dist/components/DatasetControl/EditColumns/ScopeSelector/ScopeSelector.d.ts

@@ -0,0 +1 @@
+export declare const ScopeSelector: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/DatasetControl/EditColumns/ScopeSelector/ScopeSelector.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { Selector } from '../Selector/Selector.js';
+import { useEditColumns } from '../useEditColumns.js';
+import { useState, useEffect } from 'react';
+import { useModel } from '../../useModel.js';
+
+const ScopeSelector = () => {
+    const editColumnsModel = useEditColumns();
+    const [isDisabled, setIsDisabled] = useState(true);
+    const labels = useModel().getLabels();
+    const getOptionLabel = (column) => {
+        const relatedEntityDisplayName = column.relatedEntityDisplayName;
+        return relatedEntityDisplayName ? `${column.displayName} (${relatedEntityDisplayName})` : column.displayName ?? labels['no-name']();
+    };
+    useEffect(() => {
+        (async () => {
+            const options = await editColumnsModel.getAvailableRelatedColumns();
+            setIsDisabled(options.length === 1);
+        })();
+    }, []);
+    return jsx(Selector, { onOverrideComponentProps: (props) => {
+            return {
+                ...props,
+                isMulti: false,
+                isDisabled: isDisabled,
+                defaultValue: editColumnsModel.getMainEntityColumn(),
+                getOptionLabel: (column) => getOptionLabel(column),
+                loadOptions: (inputValue) => editColumnsModel.getAvailableRelatedColumns(inputValue),
+                onChange: (column) => editColumnsModel.selectRelatedEntityColumn(column),
+            };
+        } });
+};
+
+export { ScopeSelector };
+//# sourceMappingURL=ScopeSelector.js.map

package/dist/components/DatasetControl/EditColumns/ScopeSelector/ScopeSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScopeSelector.js","sources":["../../../../../src/components/DatasetControl/EditColumns/ScopeSelector/ScopeSelector.tsx"],"sourcesContent":["import { IAvailableRelatedColumn } from \"@talxis/client-libraries\";\nimport { Selector } from \"../Selector/Selector\";\nimport { useEditColumns } from \"../useEditColumns\";\nimport { useEffect, useState } from \"react\";\nimport { useModel } from \"../../useModel\";\n\n\nexport const ScopeSelector = () => {\n    const editColumnsModel = useEditColumns();\n    const [isDisabled, setIsDisabled] = useState(true);\n    const labels = useModel().getLabels();\n\n    const getOptionLabel = (column: IAvailableRelatedColumn): string => {\n        const relatedEntityDisplayName = column.relatedEntityDisplayName;\n        return relatedEntityDisplayName ? `${column.displayName} (${relatedEntityDisplayName})` : column.displayName ?? labels['no-name']();\n    }\n\n    useEffect(() => {\n        (async () => {\n            const options = await editColumnsModel.getAvailableRelatedColumns();\n            setIsDisabled(options.length === 1);\n        })();\n    }, []);\n\n    return <Selector<false, IAvailableRelatedColumn> onOverrideComponentProps={(props) => {\n        return {\n            ...props,\n            isMulti: false,\n            isDisabled: isDisabled,\n            defaultValue: editColumnsModel.getMainEntityColumn(),\n            getOptionLabel: (column) => getOptionLabel(column),\n            loadOptions: (inputValue: string) => editColumnsModel.getAvailableRelatedColumns(inputValue),\n            onChange: (column) => editColumnsModel.selectRelatedEntityColumn(column!),\n        }\n    }} />\n}"],"names":["_jsx"],"mappings":";;;;;;AAOO,MAAM,aAAa,GAAG,MAAK;AAC9B,IAAA,MAAM,gBAAgB,GAAG,cAAc,EAAE,CAAC;IAC1C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;AACnD,IAAA,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAC,SAAS,EAAE,CAAC;AAEtC,IAAA,MAAM,cAAc,GAAG,CAAC,MAA+B,KAAY;AAC/D,QAAA,MAAM,wBAAwB,GAAG,MAAM,CAAC,wBAAwB,CAAC;QACjE,OAAO,wBAAwB,GAAG,GAAG,MAAM,CAAC,WAAW,CAAA,EAAA,EAAK,wBAAwB,CAAA,CAAA,CAAG,GAAG,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC;AACxI,KAAC,CAAA;IAED,SAAS,CAAC,MAAK;QACX,CAAC,YAAW;AACR,YAAA,MAAM,OAAO,GAAG,MAAM,gBAAgB,CAAC,0BAA0B,EAAE,CAAC;AACpE,YAAA,aAAa,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC;SACvC,GAAG,CAAC;KACR,EAAE,EAAE,CAAC,CAAC;IAEP,OAAOA,GAAA,CAAC,QAAQ,EAAiC,EAAA,wBAAwB,EAAE,CAAC,KAAK,KAAI;YACjF,OAAO;AACH,gBAAA,GAAG,KAAK;AACR,gBAAA,OAAO,EAAE,KAAK;AACd,gBAAA,UAAU,EAAE,UAAU;AACtB,gBAAA,YAAY,EAAE,gBAAgB,CAAC,mBAAmB,EAAE;gBACpD,cAAc,EAAE,CAAC,MAAM,KAAK,cAAc,CAAC,MAAM,CAAC;gBAClD,WAAW,EAAE,CAAC,UAAkB,KAAK,gBAAgB,CAAC,0BAA0B,CAAC,UAAU,CAAC;gBAC5F,QAAQ,EAAE,CAAC,MAAM,KAAK,gBAAgB,CAAC,yBAAyB,CAAC,MAAO,CAAC;aAC5E,CAAA;AACL,SAAC,GAAI,CAAA;AACT;;;;"}

package/dist/components/DatasetControl/EditColumns/Selector/Selector.d.ts

@@ -0,0 +1,9 @@
+import { IColumn } from "@talxis/client-libraries";
+import { GroupBase } from 'react-select';
+import { AsyncProps } from 'react-select/dist/declarations/src/useAsync';
+type ReactSelectProps<IsMulti extends boolean = false, TColumn extends IColumn = IColumn> = AsyncProps<TColumn, IsMulti, GroupBase<TColumn>>;
+interface ISelectorProps<IsMulti extends boolean = false, TColumn extends IColumn = IColumn> {
+    onOverrideComponentProps?: (props: ReactSelectProps<IsMulti, TColumn>) => ReactSelectProps<IsMulti, TColumn>;
+}
+export declare const Selector: <IsMulti extends boolean = false, TColumn extends IColumn = IColumn>(props: ISelectorProps<IsMulti, TColumn>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DatasetControl/EditColumns/Selector/Selector.js

@@ -0,0 +1,58 @@
+import { jsx } from 'react/jsx-runtime';
+import { Attribute } from '@talxis/client-libraries';
+import { useTheme, Callout, DirectionalHint, TooltipHost } from '@fluentui/react';
+import AsyncSelect from 'react-select/async';
+import { useModel } from '../../useModel.js';
+import { components } from 'react-select';
+import React, { useMemo } from 'react';
+
+const Selector = (props) => {
+    const theme = useTheme();
+    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((p) => p);
+    const labels = useModel().getLabels();
+    const id = useMemo(() => `selector-${window.crypto.randomUUID()}`, []);
+    const MemoizedMenu = useMemo(() => React.memo((props) => (jsx(Callout, { directionalHint: DirectionalHint.leftTopEdge, target: `#${id}`, children: jsx(components.Menu, { ...props }) }))), [id]);
+    const componentProps = onOverrideComponentProps({
+        id: id,
+        getOptionValue: (column) => Attribute.GetNameFromAlias(column.name),
+        getOptionLabel: (column) => column.displayName ?? labels['no-name'](),
+        noOptionsMessage: () => labels['no-result-found'](),
+        maxMenuHeight: 600,
+        isClearable: false,
+        defaultOptions: true,
+        styles: {
+            option: (base) => {
+                return {
+                    ...base,
+                    padding: 0,
+                    cursor: 'pointer',
+                };
+            },
+            menu: () => {
+                return {
+                    width: 300
+                };
+            }
+        },
+        theme: (base) => {
+            return {
+                ...base,
+                colors: {
+                    ...base.colors,
+                    primary: theme.palette.themePrimary,
+                    primary75: theme.palette.themeLighterAlt,
+                    primary50: theme.palette.themeLight,
+                    primary25: theme.palette.themeLighter,
+                }
+            };
+        },
+        components: {
+            Option: (props) => jsx(components.Option, { ...props, children: jsx(TooltipHost, { content: props.data.name, children: jsx("div", { style: { padding: '8px 12px' }, children: props.children }) }) }),
+            Menu: MemoizedMenu
+        }
+    });
+    return jsx(AsyncSelect, { ...componentProps });
+};
+
+export { Selector };
+//# sourceMappingURL=Selector.js.map

package/dist/components/DatasetControl/EditColumns/Selector/Selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Selector.js","sources":["../../../../../src/components/DatasetControl/EditColumns/Selector/Selector.tsx"],"sourcesContent":["import { Attribute, IColumn } from \"@talxis/client-libraries\";\nimport { GroupBase, MenuProps } from 'react-select';\nimport { Callout, DirectionalHint, TooltipHost, useTheme } from \"@fluentui/react\";\nimport AsyncSelect from 'react-select/async';\nimport { AsyncProps } from 'react-select/dist/declarations/src/useAsync';\nimport { useModel } from \"../../useModel\";\nimport { components } from 'react-select';\nimport { useMemo } from \"react\";\nimport React from \"react\";\n\ntype ReactSelectProps<IsMulti extends boolean = false, TColumn extends IColumn = IColumn> = AsyncProps<TColumn, IsMulti, GroupBase<TColumn>>;\n\ninterface ISelectorProps<IsMulti extends boolean = false, TColumn extends IColumn = IColumn> {\n    onOverrideComponentProps?: (props: ReactSelectProps<IsMulti, TColumn>) => ReactSelectProps<IsMulti, TColumn>\n}\n\nexport const Selector = <IsMulti extends boolean = false, TColumn extends IColumn = IColumn>(props: ISelectorProps<IsMulti, TColumn>) => {\n    const theme = useTheme();\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((p) => p);\n    const labels = useModel().getLabels();\n    const id = useMemo(() => `selector-${window.crypto.randomUUID()}`, []);\n\n    const MemoizedMenu = useMemo(() =>\n        React.memo((props: any) => (\n            <Callout\n                directionalHint={DirectionalHint.leftTopEdge}\n                target={`#${id}`}>\n                <components.Menu {...props} />\n            </Callout>\n        )),\n        [id]);\n\n    const componentProps = onOverrideComponentProps({\n        id: id,\n        getOptionValue: (column: any) => Attribute.GetNameFromAlias(column.name),\n        getOptionLabel: (column: any) => column.displayName ?? labels['no-name'](),\n        noOptionsMessage: () => labels['no-result-found'](),\n        maxMenuHeight: 600,\n        isClearable: false,\n        defaultOptions: true,\n        styles: {\n            option: (base) => {\n                return {\n                    ...base,\n                    padding: 0,\n                    cursor: 'pointer',\n                }\n            },\n            menu: () => {\n                return {\n                    width: 300\n                }\n            }\n        },\n        theme: (base: any) => {\n            return {\n                ...base,\n                colors: {\n                    ...base.colors,\n                    primary: theme.palette.themePrimary,\n                    primary75: theme.palette.themeLighterAlt,\n                    primary50: theme.palette.themeLight,\n                    primary25: theme.palette.themeLighter,\n                }\n            }\n        },\n        components: {\n            Option: (props) => <components.Option {...props}>\n                <TooltipHost\n                    content={props.data.name}\n                >\n                    <div style={{ padding: '8px 12px' }}>\n                        {props.children}\n                    </div>\n                </TooltipHost>\n            </components.Option>,\n            Menu: MemoizedMenu\n        }\n    })\n\n    return <AsyncSelect {...componentProps} />\n}"],"names":["_jsx"],"mappings":";;;;;;;;AAgBa,MAAA,QAAQ,GAAG,CAAqE,KAAuC,KAAI;AACpI,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;AACzB,IAAA,MAAM,wBAAwB,GAAG,KAAK,CAAC,wBAAwB,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;AAC9E,IAAA,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAC,SAAS,EAAE,CAAC;AACtC,IAAA,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAY,SAAA,EAAA,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAEvE,MAAM,YAAY,GAAG,OAAO,CAAC,MACzB,KAAK,CAAC,IAAI,CAAC,CAAC,KAAU,MAClBA,GAAC,CAAA,OAAO,EACJ,EAAA,eAAe,EAAE,eAAe,CAAC,WAAW,EAC5C,MAAM,EAAE,CAAA,CAAA,EAAI,EAAE,CAAE,CAAA,EAAA,QAAA,EAChBA,GAAC,CAAA,UAAU,CAAC,IAAI,OAAK,KAAK,EAAA,CAAI,GACxB,CACb,CAAC,EACF,CAAC,EAAE,CAAC,CAAC,CAAC;IAEV,MAAM,cAAc,GAAG,wBAAwB,CAAC;AAC5C,QAAA,EAAE,EAAE,EAAE;AACN,QAAA,cAAc,EAAE,CAAC,MAAW,KAAK,SAAS,CAAC,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC;AACxE,QAAA,cAAc,EAAE,CAAC,MAAW,KAAK,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE;QAC1E,gBAAgB,EAAE,MAAM,MAAM,CAAC,iBAAiB,CAAC,EAAE;AACnD,QAAA,aAAa,EAAE,GAAG;AAClB,QAAA,WAAW,EAAE,KAAK;AAClB,QAAA,cAAc,EAAE,IAAI;AACpB,QAAA,MAAM,EAAE;AACJ,YAAA,MAAM,EAAE,CAAC,IAAI,KAAI;gBACb,OAAO;AACH,oBAAA,GAAG,IAAI;AACP,oBAAA,OAAO,EAAE,CAAC;AACV,oBAAA,MAAM,EAAE,SAAS;iBACpB,CAAA;aACJ;YACD,IAAI,EAAE,MAAK;gBACP,OAAO;AACH,oBAAA,KAAK,EAAE,GAAG;iBACb,CAAA;aACJ;AACJ,SAAA;AACD,QAAA,KAAK,EAAE,CAAC,IAAS,KAAI;YACjB,OAAO;AACH,gBAAA,GAAG,IAAI;AACP,gBAAA,MAAM,EAAE;oBACJ,GAAG,IAAI,CAAC,MAAM;AACd,oBAAA,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;AACnC,oBAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe;AACxC,oBAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;AACnC,oBAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;AACxC,iBAAA;aACJ,CAAA;SACJ;AACD,QAAA,UAAU,EAAE;AACR,YAAA,MAAM,EAAE,CAAC,KAAK,KAAKA,GAAC,CAAA,UAAU,CAAC,MAAM,OAAK,KAAK,EAAA,QAAA,EAC3CA,IAAC,WAAW,EAAA,EACR,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAA,QAAA,EAExBA,GAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,EAC9B,QAAA,EAAA,KAAK,CAAC,QAAQ,EAAA,CACb,GACI,EACE,CAAA;AACpB,YAAA,IAAI,EAAE,YAAY;AACrB,SAAA;AACJ,KAAA,CAAC,CAAA;AAEF,IAAA,OAAOA,GAAC,CAAA,WAAW,EAAK,EAAA,GAAA,cAAc,GAAI,CAAA;AAC9C;;;;"}

package/dist/components/DatasetControl/EditColumns/SortableItem/SortableItem.d.ts

@@ -0,0 +1,4 @@
+import { IColumn } from "@talxis/client-libraries";
+export declare const SortableItem: (props: {
+    column: IColumn;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DatasetControl/EditColumns/SortableItem/SortableItem.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { getSortableItemStyles } from './styles.js';
+import { useMemo } from 'react';
+import { useTheme, Text, IconButton } from '@fluentui/react';
+import { useModel } from '../../useModel.js';
+import { useEditColumns } from '../useEditColumns.js';
+
+const SortableItem = (props) => {
+    const { column } = props;
+    const editColumnsModel = useEditColumns();
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: column.name });
+    const theme = useTheme();
+    const styles = useMemo(() => getSortableItemStyles(theme), []);
+    const labels = useModel().getLabels();
+    const displayName = column.displayName ?? labels['no-name']();
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+    return (jsxs("div", { className: styles.sortableItem, ref: setNodeRef, style: style, ...attributes, ...listeners, children: [jsx(Text, { title: displayName, children: displayName }), jsx(IconButton
+            //onClick gets cancelled by dnd kit if placed directly on the button, so we use onMouseUp
+            , { 
+                //onClick gets cancelled by dnd kit if placed directly on the button, so we use onMouseUp
+                onMouseUp: () => editColumnsModel.deleteColumn(column.name), iconProps: {
+                    iconName: 'Delete'
+                } })] }));
+};
+
+export { SortableItem };
+//# sourceMappingURL=SortableItem.js.map

package/dist/components/DatasetControl/EditColumns/SortableItem/SortableItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableItem.js","sources":["../../../../../src/components/DatasetControl/EditColumns/SortableItem/SortableItem.tsx"],"sourcesContent":["import { useSortable } from \"@dnd-kit/sortable\";\nimport { CSS } from '@dnd-kit/utilities';\nimport { IColumn } from \"@talxis/client-libraries\";\nimport { getSortableItemStyles } from \"./styles\";\nimport { useMemo } from \"react\";\nimport { useTheme, Text, IconButton } from \"@fluentui/react\";\nimport { useModel } from \"../../useModel\";\nimport { useEditColumns } from \"../useEditColumns\";\n\nexport const SortableItem = (props: { column: IColumn }) => {\n    const { column} = props;\n    const editColumnsModel = useEditColumns();\n    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: column.name });\n    const theme = useTheme();\n    const styles = useMemo(() => getSortableItemStyles(theme), []);\n    const labels = useModel().getLabels();\n    const displayName = column.displayName ?? labels['no-name']();\n\n    const style = {\n        transform: CSS.Transform.toString(transform),\n        transition,\n    };\n\n    return (\n        <div className={styles.sortableItem} ref={setNodeRef} style={style} {...attributes} {...listeners}>\n            <Text title={displayName}>{displayName}</Text>\n                <IconButton\n                    //onClick gets cancelled by dnd kit if placed directly on the button, so we use onMouseUp\n                    onMouseUp={() => editColumnsModel.deleteColumn(column.name)}\n                    iconProps={{\n                        iconName: 'Delete'\n                    }}\n                />\n        </div>\n    );\n}"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AASa,MAAA,YAAY,GAAG,CAAC,KAA0B,KAAI;AACvD,IAAA,MAAM,EAAE,MAAM,EAAC,GAAG,KAAK,CAAC;AACxB,IAAA,MAAM,gBAAgB,GAAG,cAAc,EAAE,CAAC;IAC1C,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,WAAW,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;AACtG,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;AACzB,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,qBAAqB,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;AAC/D,IAAA,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAC,SAAS,EAAE,CAAC;IACtC,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC;AAE9D,IAAA,MAAM,KAAK,GAAG;QACV,SAAS,EAAE,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;QAC5C,UAAU;KACb,CAAC;AAEF,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,YAAY,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAM,GAAA,UAAU,EAAM,GAAA,SAAS,EAC7F,QAAA,EAAA,CAAAC,GAAA,CAAC,IAAI,EAAC,EAAA,KAAK,EAAE,WAAW,EAAG,QAAA,EAAA,WAAW,EAAQ,CAAA,EAC1CA,IAAC,UAAU;;;;AAEP,gBAAA,SAAS,EAAE,MAAM,gBAAgB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,EAC3D,SAAS,EAAE;AACP,oBAAA,QAAQ,EAAE,QAAQ;iBACrB,EACH,CAAA,CAAA,EAAA,CACJ,EACR;AACN;;;;"}

package/dist/components/DatasetControl/EditColumns/SortableItem/styles.d.ts

@@ -0,0 +1,26 @@
+import { ITheme } from "@fluentui/react";
+export declare const getSortableItemStyles: (theme: ITheme) => import("@fluentui/react").IProcessedStyleSet<{
+    sortableItem: {
+        display: string;
+        padding: number;
+        paddingLeft: number;
+        height: number;
+        cursor: string;
+        alignItems: string;
+        gap: number;
+        borderRadius: number;
+        backgroundColor: string;
+        '&:active': {
+            cursor: string;
+        };
+        '& > span': {
+            flexGrow: number;
+            fontWeight: number;
+            overflow: string;
+            minWidth: number;
+            whiteSpace: string;
+            textOverflow: string;
+            userSelect: string;
+        };
+    };
+}>;

package/dist/components/DatasetControl/EditColumns/SortableItem/styles.js

@@ -0,0 +1,32 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getSortableItemStyles = (theme) => {
+    return mergeStyleSets({
+        sortableItem: {
+            display: 'flex',
+            padding: 5,
+            paddingLeft: 10,
+            height: 26,
+            cursor: 'grab',
+            alignItems: 'center',
+            gap: 5,
+            borderRadius: 5,
+            backgroundColor: theme.semanticColors.buttonBackgroundPressed,
+            '&:active': {
+                cursor: 'grabbing'
+            },
+            '& > span': {
+                flexGrow: 1,
+                fontWeight: 600,
+                overflow: 'hidden',
+                minWidth: 0,
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
+                userSelect: 'none'
+            },
+        },
+    });
+};
+
+export { getSortableItemStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/DatasetControl/EditColumns/SortableItem/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/DatasetControl/EditColumns/SortableItem/styles.ts"],"sourcesContent":["import { ITheme, mergeStyleSets } from \"@fluentui/react\"\n\nexport const getSortableItemStyles = (theme: ITheme) => {\n    return mergeStyleSets({\n        sortableItem: {\n            display: 'flex',\n            padding: 5,\n            paddingLeft: 10,\n            height: 26,\n            cursor: 'grab',\n            alignItems: 'center',\n            gap: 5,\n            borderRadius: 5,\n            backgroundColor: theme.semanticColors.buttonBackgroundPressed,\n            '&:active': {\n                cursor: 'grabbing'\n            },\n            '& > span': {\n                flexGrow: 1,\n                fontWeight: 600,\n                overflow: 'hidden',\n                minWidth: 0,\n                whiteSpace: 'nowrap',\n                textOverflow: 'ellipsis',\n                userSelect: 'none'\n            },\n        },\n    })\n}"],"names":[],"mappings":";;AAEa,MAAA,qBAAqB,GAAG,CAAC,KAAa,KAAI;AACnD,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,YAAY,EAAE;AACV,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,WAAW,EAAE,EAAE;AACf,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,GAAG,EAAE,CAAC;AACN,YAAA,YAAY,EAAE,CAAC;AACf,YAAA,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,uBAAuB;AAC7D,YAAA,UAAU,EAAE;AACR,gBAAA,MAAM,EAAE,UAAU;AACrB,aAAA;AACD,YAAA,UAAU,EAAE;AACR,gBAAA,QAAQ,EAAE,CAAC;AACX,gBAAA,UAAU,EAAE,GAAG;AACf,gBAAA,QAAQ,EAAE,QAAQ;AAClB,gBAAA,QAAQ,EAAE,CAAC;AACX,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,YAAY,EAAE,UAAU;AACxB,gBAAA,UAAU,EAAE,MAAM;AACrB,aAAA;AACJ,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/DatasetControl/EditColumns/styles.d.ts

@@ -0,0 +1,50 @@
+import { ITheme } from "@talxis/react-components";
+export declare const getEditColumnsStyles: (theme: ITheme) => import("@fluentui/react").IProcessedStyleSet<{
+    panelFooter: {
+        borderTop: string;
+    };
+    panelFooterButtons: {
+        display: string;
+        gap: number;
+    };
+    sortableItemsWrapper: {
+        display: string;
+        flexDirection: string;
+        gap: number;
+    };
+    panelCommands: {};
+    panelScrollableContent: {
+        overflowX: string;
+        display: string;
+        flexDirection: string;
+    };
+    panelContent: {
+        display: string;
+        flexDirection: string;
+        minHeight: number;
+        padding: number;
+    };
+    scrollableContainer: {
+        overflow: string;
+        paddingLeft: number;
+        paddingRight: number;
+        paddingTop: number;
+        paddingBottom: number;
+        flex: number;
+        scrollbarWidth: string;
+    };
+    header: {
+        borderBottom: string;
+        paddingBottom: number;
+        paddingTop: number;
+    };
+    selectors: {
+        display: string;
+        flexDirection: string;
+        gap: number;
+    };
+    selector: {
+        marginLeft: number;
+        marginRight: number;
+    };
+}>;

package/dist/components/DatasetControl/EditColumns/styles.js

@@ -0,0 +1,56 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getEditColumnsStyles = (theme) => {
+    return mergeStyleSets({
+        panelFooter: {
+            borderTop: `1px solid ${theme.semanticColors.bodyDivider}`
+        },
+        panelFooterButtons: {
+            display: 'flex',
+            gap: 10
+        },
+        sortableItemsWrapper: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 10
+        },
+        panelCommands: {},
+        panelScrollableContent: {
+            overflowX: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+        },
+        panelContent: {
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: 0,
+            padding: 0
+        },
+        scrollableContainer: {
+            overflow: 'auto',
+            paddingLeft: 15,
+            paddingRight: 15,
+            paddingTop: 12,
+            paddingBottom: 12,
+            flex: 1,
+            scrollbarWidth: 'thin',
+        },
+        header: {
+            borderBottom: `1px solid ${theme.semanticColors.bodyDivider}`,
+            paddingBottom: 15,
+            paddingTop: 15
+        },
+        selectors: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 12
+        },
+        selector: {
+            marginLeft: 15,
+            marginRight: 15
+        }
+    });
+};
+
+export { getEditColumnsStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/DatasetControl/EditColumns/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/DatasetControl/EditColumns/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\nimport { ITheme } from \"@talxis/react-components\";\n\nexport const getEditColumnsStyles = (theme: ITheme) => {\n    return mergeStyleSets({\n        panelFooter: {\n            borderTop: `1px solid ${theme.semanticColors.bodyDivider}`\n        },\n        panelFooterButtons: {\n            display: 'flex',\n            gap: 10\n        },\n        sortableItemsWrapper: {\n            display: 'flex',\n            flexDirection: 'column',\n            gap: 10\n        },\n        panelCommands: {\n        },\n        panelScrollableContent: {\n            overflowX: 'hidden',\n            display: 'flex',\n            flexDirection: 'column',\n        },\n        panelContent: {\n             display: 'flex',\n             flexDirection: 'column',\n             minHeight: 0,\n             padding: 0\n        },\n        scrollableContainer: {\n            overflow: 'auto',\n            paddingLeft: 15,\n            paddingRight: 15,\n            paddingTop: 12,\n            paddingBottom: 12,\n            flex: 1,\n            scrollbarWidth: 'thin',\n        },\n        header: {\n            borderBottom: `1px solid ${theme.semanticColors.bodyDivider}`,\n            paddingBottom: 15,\n            paddingTop: 15\n        },\n        selectors: {\n            display: 'flex',\n            flexDirection: 'column',\n            gap: 12\n        },\n        selector: {\n            marginLeft: 15,\n            marginRight: 15\n        }\n    });\n}"],"names":[],"mappings":";;AAGa,MAAA,oBAAoB,GAAG,CAAC,KAAa,KAAI;AAClD,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,WAAW,EAAE;AACT,YAAA,SAAS,EAAE,CAAa,UAAA,EAAA,KAAK,CAAC,cAAc,CAAC,WAAW,CAAE,CAAA;AAC7D,SAAA;AACD,QAAA,kBAAkB,EAAE;AAChB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,GAAG,EAAE,EAAE;AACV,SAAA;AACD,QAAA,oBAAoB,EAAE;AAClB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,GAAG,EAAE,EAAE;AACV,SAAA;AACD,QAAA,aAAa,EAAE,EACd;AACD,QAAA,sBAAsB,EAAE;AACpB,YAAA,SAAS,EAAE,QAAQ;AACnB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AAC1B,SAAA;AACD,QAAA,YAAY,EAAE;AACT,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,SAAS,EAAE,CAAC;AACZ,YAAA,OAAO,EAAE,CAAC;AACd,SAAA;AACD,QAAA,mBAAmB,EAAE;AACjB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,WAAW,EAAE,EAAE;AACf,YAAA,YAAY,EAAE,EAAE;AAChB,YAAA,UAAU,EAAE,EAAE;AACd,YAAA,aAAa,EAAE,EAAE;AACjB,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,cAAc,EAAE,MAAM;AACzB,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,YAAY,EAAE,CAAa,UAAA,EAAA,KAAK,CAAC,cAAc,CAAC,WAAW,CAAE,CAAA;AAC7D,YAAA,aAAa,EAAE,EAAE;AACjB,YAAA,UAAU,EAAE,EAAE;AACjB,SAAA;AACD,QAAA,SAAS,EAAE;AACP,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,GAAG,EAAE,EAAE;AACV,SAAA;AACD,QAAA,QAAQ,EAAE;AACN,YAAA,UAAU,EAAE,EAAE;AACd,YAAA,WAAW,EAAE,EAAE;AAClB,SAAA;AACJ,KAAA,CAAC,CAAC;AACP;;;;"}

package/dist/components/DatasetControl/EditColumns/useEditColumns.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { IEditColumns } from "../../../utils/dataset-control/EditColumns";
+export declare const EditColumnsContext: React.Context<IEditColumns>;
+export declare const useEditColumns: () => IEditColumns;

package/dist/components/DatasetControl/EditColumns/useEditColumns.js

@@ -0,0 +1,9 @@
+import React, { useContext } from 'react';
+
+const EditColumnsContext = React.createContext(null);
+const useEditColumns = () => {
+    return useContext(EditColumnsContext);
+};
+
+export { EditColumnsContext, useEditColumns };
+//# sourceMappingURL=useEditColumns.js.map

package/dist/components/DatasetControl/EditColumns/useEditColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditColumns.js","sources":["../../../../src/components/DatasetControl/EditColumns/useEditColumns.ts"],"sourcesContent":["import React from \"react\";\nimport { useContext } from \"react\"\nimport { IEditColumns } from \"../../../utils/dataset-control/EditColumns\";\n\nexport const EditColumnsContext = React.createContext<IEditColumns>(null as any);\n\nexport const useEditColumns = () => {\n    return useContext(EditColumnsContext);\n}"],"names":[],"mappings":";;AAIa,MAAA,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAe,IAAW,EAAE;AAE1E,MAAM,cAAc,GAAG,MAAK;AAC/B,IAAA,OAAO,UAAU,CAAC,kBAAkB,CAAC,CAAC;AAC1C;;;;"}

package/dist/components/DatasetControl/Filtering/DatasetColumnFiltering.js

@@ -6,8 +6,8 @@ import { DatasetColumnFilteringModel } from './DatasetColumnFilteringModel.js';
 import { useRerender } from '@talxis/react-components';
 import { getDatasetColumnFilteringStyles } from './styles.js';
 import { useDebouncedCallback } from 'use-debounce';
-import { useEventEmitter } from '../../../hooks/useEventEmitter.js';
 import { useControl } from '../../../hooks/useControl.js';
+import { useEventEmitter } from '../../../hooks/useEventEmitter.js';
 import { OptionSet } from '../../OptionSet/OptionSet.js';
 import { NestedControlRenderer } from '../../NestedControlRenderer/NestedControlRenderer.js';