@talxis/base-controls 1.2510.1 → 1.2512.1

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

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

package/dist/components/DatasetControl/DatasetControl.js

@@ -1,71 +1,92 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useRef, useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRef, useMemo, useEffect } from 'react';
 import { ThemeProvider } from '@fluentui/react';
 import { datasetControlTranslations } from './translations.js';
-import { getDatasetControlStyles } from './styles.js';
-import { QuickFind } from './QuickFind/QuickFind.js';
 import { useRerender } from '@talxis/react-components';
-import { Client } from '@talxis/client-libraries';
-import { DatasetPaging } from './Paging/DatasetPaging.js';
+import { DatasetControlModel } from './DatasetControlModel.js';
+import { ModelContext } from './useModel.js';
+import { Pagination } from './Pagination/Pagination.js';
+import { getDatasetControlStyles } from './styles.js';
+import { Header } from './Header/Header.js';
+import { useEventEmitter } from '../../hooks/useEventEmitter.js';
 import { useControl } from '../../hooks/useControl.js';
 
-const client = new Client();
 const DatasetControl = (props) => {
-    const { labels, theme } = useControl('DatasetControl', props, datasetControlTranslations);
-    const rerender = useRerender();
-    const dataset = props.parameters.Grid;
-    const injectedContextRef = useRef(props.context);
-    const styles = useMemo(() => getDatasetControlStyles(theme, props.parameters.Height?.raw), []);
+    const { labels, theme } = useControl('DatasetControl', {
+        ...props,
+        context: props.onGetDatasetControlInstance().getPcfContext(),
+        parameters: props.onGetDatasetControlInstance().getParameters(),
+    }, datasetControlTranslations);
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    const datasetControl = propsRef.current.onGetDatasetControlInstance();
+    const model = useMemo(() => new DatasetControlModel({
+        datasetControl: datasetControl,
+        getLabels: () => labels,
+    }), []);
+    useMemo(() => props.onGetDatasetControlInstance().init(), []);
     const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);
-    useMemo(() => {
-        if (dataset.isVirtual() || !client.isTalxisPortal()) {
-            dataset.setInterceptor('__onRequestRender', () => rerender());
-        }
-    }, []);
-    //we need to have a way to customize the init behavior from above
+    const rerender = useRerender();
+    const styles = useMemo(() => getDatasetControlStyles(datasetControl.getHeight()), [datasetControl.getHeight()]);
+    const dataset = datasetControl.getDataset();
+    useEventEmitter(dataset, 'onNewDataLoaded', rerender);
+    useEventEmitter(dataset, 'onRenderRequested', rerender);
+    useEventEmitter(dataset, 'onBeforeNewDataLoaded', rerender);
     const componentProps = onOverrideComponentProps({
-        onDatasetInit: () => {
-            if (dataset.isVirtual()) {
-                dataset.paging.loadExactPage(dataset.paging.pageNumber);
-            }
-        },
-        containerProps: {
-            theme: theme,
-            className: styles.datasetControlRoot,
-        },
-        headerProps: {
-            headerContainerProps: {
-                className: styles.headerRoot
-            },
-            onRender: (renderQuickFind) => renderQuickFind(),
-            onGetQuickFindProps: (props) => props
-        },
-        onRenderPagination: (props, renderPagination) => renderPagination(props)
+        onRender: (props, defaultRender) => defaultRender(props),
     });
-    useMemo(() => {
-        //@ts-ignore - private property
-        injectedContextRef.current = dataset._patchContext(props.context);
-    }, [props.context]);
-    useMemo(() => {
-        componentProps.onDatasetInit();
-    }, []);
-    const isQuickFindEnabled = () => {
-        if (dataset.isVirtual() && props.parameters.EnableQuickFind?.raw) {
-            return true;
+    const isFooterVisible = () => {
+        switch (true) {
+            case datasetControl.isPaginationVisible():
+            case datasetControl.isRecordCountVisible():
+            case datasetControl.isPageSizeSwitcherVisible():
+                return true;
+            default:
+                return false;
         }
-        return false;
     };
-    return (jsxs(ThemeProvider, { ...componentProps.containerProps, children: [isQuickFindEnabled() &&
-                jsx("div", { ...componentProps.headerProps.headerContainerProps, children: componentProps.headerProps.onRender(() => {
-                        return jsx(Fragment, { children: isQuickFindEnabled() &&
-                                jsx(QuickFind, { dataset: dataset, labels: labels, theme: theme, onGetQuickFindComponentProps: (props) => componentProps.headerProps.onGetQuickFindProps(props) }) });
-                    }) }), props.onGetControlComponent({ ...props, context: injectedContextRef.current }), componentProps.onRenderPagination({
-                context: injectedContextRef.current, parameters: {
-                    Dataset: dataset,
-                    EnablePagination: props.parameters.EnablePagination,
-                    EnablePageSizeSwitcher: props.parameters.EnablePageSizeSwitcher
-                }
-            }, (paginationProps) => jsx(DatasetPaging, { ...paginationProps }))] }));
+    const isPaginationVisible = () => {
+        return isFooterVisible();
+    };
+    useEffect(() => {
+        return () => {
+            datasetControl.destroy();
+        };
+    }, []);
+    return jsx(ModelContext.Provider, { value: model, children: componentProps.onRender({
+            container: {
+                theme: theme,
+                className: styles.datasetControlRoot
+            },
+            onRenderHeader: (props, defaultRender) => defaultRender(props),
+            onRenderFooter: (props, defaultRender) => defaultRender(props),
+            onRenderControlContainer: (props, defaultRender) => defaultRender(props)
+        }, (props) => {
+            return jsxs(ThemeProvider, { ...props.container, children: [jsx(Header, { onRenderHeader: props.onRenderHeader }), props.onRenderControlContainer({
+                        controlContainerProps: {
+                            className: styles.controlContainer
+                        },
+                    }, (props) => {
+                        const { onOverrideComponentProps, ...filteredProps } = propsRef.current;
+                        return jsx("div", { ...props.controlContainerProps, children: propsRef.current.onGetControlComponent({
+                                ...filteredProps,
+                                parameters: datasetControl.getParameters(),
+                                context: datasetControl.getPcfContext(),
+                                state: datasetControl.getState()
+                            }) });
+                    }), props.onRenderFooter({
+                        footerContainerProps: {
+                            className: styles.footer
+                        },
+                        onRenderPagination: (props, defaultRender) => defaultRender(props)
+                    }, (props) => {
+                        if (!isFooterVisible()) {
+                            return jsx(Fragment, {});
+                        }
+                        return jsx("div", { ...props.footerContainerProps, children: isPaginationVisible() &&
+                                jsx(Pagination, { onRenderPagination: props.onRenderPagination }) });
+                    })] });
+        }) });
 };
 
 export { DatasetControl };

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

@@ -1 +1 @@
-{"version":3,"file":"DatasetControl.js","sources":["../../../src/components/DatasetControl/DatasetControl.tsx"],"sourcesContent":["import { useMemo, useRef } from \"react\";\nimport { useControl } from \"../../hooks\";\nimport { ThemeProvider } from \"@fluentui/react\";\nimport { datasetControlTranslations } from \"./translations\";\nimport { getDatasetControlStyles } from \"./styles\";\nimport { IDatasetControl } from \"./interfaces\";\nimport { QuickFind } from \"./QuickFind/QuickFind\";\nimport { useRerender } from \"@talxis/react-components\";\nimport { Client } from \"@talxis/client-libraries\";\nimport { DatasetPaging } from \"./Paging\";\n\nconst client = new Client();\n\nexport const DatasetControl = (props: IDatasetControl) => {\n  const { labels, theme } = useControl('DatasetControl', props, datasetControlTranslations);\n  const rerender = useRerender();\n  const dataset = props.parameters.Grid;\n  const injectedContextRef = useRef(props.context);\n  const styles = useMemo(() => getDatasetControlStyles(theme, props.parameters.Height?.raw), []);\n  const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n  useMemo(() => {\n    if (dataset.isVirtual() || !client.isTalxisPortal()) {\n      dataset.setInterceptor('__onRequestRender', () => rerender());\n    }\n  }, []);\n\n  //we need to have a way to customize the init behavior from above\n  const componentProps = onOverrideComponentProps({\n    onDatasetInit: () => {\n      if (dataset.isVirtual()) {\n        dataset.paging.loadExactPage(dataset.paging.pageNumber);\n      }\n    },\n    containerProps: {\n      theme: theme,\n      className: styles.datasetControlRoot,\n    },\n\n    headerProps: {\n      headerContainerProps: {\n        className: styles.headerRoot\n      },\n      onRender: (renderQuickFind) => renderQuickFind(),\n      onGetQuickFindProps: (props) => props\n    },\n    onRenderPagination: (props, renderPagination) => renderPagination(props)\n  });\n\n  useMemo(() => {\n    //@ts-ignore - private property\n    injectedContextRef.current = dataset._patchContext(props.context);\n  }, [props.context]);\n\n  useMemo(() => {\n    componentProps.onDatasetInit();\n  }, []);\n\n  const isQuickFindEnabled = () => {\n    if (dataset.isVirtual() && props.parameters.EnableQuickFind?.raw) {\n      return true;\n    }\n    return false;\n  }\n\n\n  return (\n    <ThemeProvider {...componentProps.containerProps}>\n      {isQuickFindEnabled() &&\n        <div {...componentProps.headerProps.headerContainerProps}>\n          {componentProps.headerProps.onRender(() => {\n            return <>\n              {isQuickFindEnabled() &&\n                <QuickFind\n                  dataset={dataset}\n                  labels={labels}\n                  theme={theme}\n                  onGetQuickFindComponentProps={(props) => componentProps.headerProps.onGetQuickFindProps(props)} />\n              }\n            </>\n          })}\n        </div>\n      }\n      {props.onGetControlComponent({ ...props, context: injectedContextRef.current })}\n      {componentProps.onRenderPagination({\n        context: injectedContextRef.current, parameters: {\n          Dataset: dataset,\n          EnablePagination: props.parameters.EnablePagination,\n          EnablePageSizeSwitcher: props.parameters.EnablePageSizeSwitcher\n        }\n      }, (paginationProps) => <DatasetPaging {...paginationProps} />)}\n    </ThemeProvider>\n  )\n}"],"names":["_jsxs","_jsx","_Fragment"],"mappings":";;;;;;;;;;;AAWA,MAAM,MAAM,GAAG,IAAI,MAAM,EAAE,CAAC;AAEf,MAAA,cAAc,GAAG,CAAC,KAAsB,KAAI;AACvD,IAAA,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,gBAAgB,EAAE,KAAK,EAAE,0BAA0B,CAAC,CAAC;AAC1F,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;AAC/B,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IACtC,MAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACjD,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,uBAAuB,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC;AAC/F,IAAA,MAAM,wBAAwB,GAAG,KAAK,CAAC,wBAAwB,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IACtF,OAAO,CAAC,MAAK;QACX,IAAI,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,EAAE,EAAE;YACnD,OAAO,CAAC,cAAc,CAAC,mBAAmB,EAAE,MAAM,QAAQ,EAAE,CAAC,CAAC;AAC/D,SAAA;KACF,EAAE,EAAE,CAAC,CAAC;;IAGP,MAAM,cAAc,GAAG,wBAAwB,CAAC;QAC9C,aAAa,EAAE,MAAK;AAClB,YAAA,IAAI,OAAO,CAAC,SAAS,EAAE,EAAE;gBACvB,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;AACzD,aAAA;SACF;AACD,QAAA,cAAc,EAAE;AACd,YAAA,KAAK,EAAE,KAAK;YACZ,SAAS,EAAE,MAAM,CAAC,kBAAkB;AACrC,SAAA;AAED,QAAA,WAAW,EAAE;AACX,YAAA,oBAAoB,EAAE;gBACpB,SAAS,EAAE,MAAM,CAAC,UAAU;AAC7B,aAAA;AACD,YAAA,QAAQ,EAAE,CAAC,eAAe,KAAK,eAAe,EAAE;AAChD,YAAA,mBAAmB,EAAE,CAAC,KAAK,KAAK,KAAK;AACtC,SAAA;QACD,kBAAkB,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,gBAAgB,CAAC,KAAK,CAAC;AACzE,KAAA,CAAC,CAAC;IAEH,OAAO,CAAC,MAAK;;QAEX,kBAAkB,CAAC,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AACpE,KAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAEpB,OAAO,CAAC,MAAK;QACX,cAAc,CAAC,aAAa,EAAE,CAAC;KAChC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,kBAAkB,GAAG,MAAK;AAC9B,QAAA,IAAI,OAAO,CAAC,SAAS,EAAE,IAAI,KAAK,CAAC,UAAU,CAAC,eAAe,EAAE,GAAG,EAAE;AAChE,YAAA,OAAO,IAAI,CAAC;AACb,SAAA;AACD,QAAA,OAAO,KAAK,CAAC;AACf,KAAC,CAAA;IAGD,QACEA,KAAC,aAAa,EAAA,EAAA,GAAK,cAAc,CAAC,cAAc,EAC7C,QAAA,EAAA,CAAA,kBAAkB,EAAE;AACnB,gBAAAC,GAAA,CAAA,KAAA,EAAA,EAAA,GAAS,cAAc,CAAC,WAAW,CAAC,oBAAoB,EAAA,QAAA,EACrD,cAAc,CAAC,WAAW,CAAC,QAAQ,CAAC,MAAK;wBACxC,OAAOA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EACJ,kBAAkB,EAAE;AACnB,gCAAAD,GAAA,CAAC,SAAS,EAAA,EACR,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,4BAA4B,EAAE,CAAC,KAAK,KAAK,cAAc,CAAC,WAAW,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAA,CAAI,GAErG,CAAA;qBACJ,CAAC,GACE,EAEP,KAAK,CAAC,qBAAqB,CAAC,EAAE,GAAG,KAAK,EAAE,OAAO,EAAE,kBAAkB,CAAC,OAAO,EAAE,CAAC,EAC9E,cAAc,CAAC,kBAAkB,CAAC;AACjC,gBAAA,OAAO,EAAE,kBAAkB,CAAC,OAAO,EAAE,UAAU,EAAE;AAC/C,oBAAA,OAAO,EAAE,OAAO;AAChB,oBAAA,gBAAgB,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB;AACnD,oBAAA,sBAAsB,EAAE,KAAK,CAAC,UAAU,CAAC,sBAAsB;AAChE,iBAAA;AACF,aAAA,EAAE,CAAC,eAAe,KAAKA,GAAA,CAAC,aAAa,EAAA,EAAA,GAAK,eAAe,EAAA,CAAI,CAAC,CAAA,EAAA,CACjD,EACjB;AACH;;;;"}
+{"version":3,"file":"DatasetControl.js","sources":["../../../src/components/DatasetControl/DatasetControl.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\nimport { useControl } from \"../../hooks\";\nimport { ThemeProvider } from \"@fluentui/react\";\nimport { datasetControlTranslations } from \"./translations\";\nimport { useRerender } from \"@talxis/react-components\";\nimport { DatasetControlModel } from \"./DatasetControlModel\";\nimport { ModelContext } from \"./useModel\";\nimport { Pagination } from \"./Pagination/Pagination\";\nimport { getDatasetControlStyles } from \"./styles\";\nimport { Header } from \"./Header/Header\";\nimport { useEventEmitter } from \"../../hooks/useEventEmitter\";\nimport { IDataProviderEventListeners } from \"@talxis/client-libraries\";\nimport { IDatasetControlProps } from \"./interfaces\";\nimport { IDatasetControlEvents } from \"../../utils/dataset-control\";\n\nexport const DatasetControl = (props: IDatasetControlProps) => {\n  const { labels, theme } = useControl('DatasetControl', {\n    ...props,\n    context: props.onGetDatasetControlInstance().getPcfContext(),\n    parameters: props.onGetDatasetControlInstance().getParameters(),\n  }, datasetControlTranslations);\n  \n  const propsRef = useRef<IDatasetControlProps>(props);\n  propsRef.current = props;\n  const datasetControl = propsRef.current.onGetDatasetControlInstance();\n  const model = useMemo(() => new DatasetControlModel({\n    datasetControl: datasetControl,\n    getLabels: () => labels,\n  }), []);\n  useMemo(() => props.onGetDatasetControlInstance().init(), []);\n  const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n  const rerender = useRerender();\n  const styles = useMemo(() => getDatasetControlStyles(datasetControl.getHeight()), [datasetControl.getHeight()]);\n  const dataset = datasetControl.getDataset();\n\n  useEventEmitter<IDataProviderEventListeners>(dataset, 'onNewDataLoaded', rerender);\n  useEventEmitter<IDataProviderEventListeners>(dataset, 'onRenderRequested', rerender);\n  useEventEmitter<IDataProviderEventListeners>(dataset, 'onBeforeNewDataLoaded', rerender);\n\n\n  const componentProps = onOverrideComponentProps({\n    onRender: (props, defaultRender) => defaultRender(props),\n  })\n\n  const isFooterVisible = () => {\n    switch (true) {\n      case datasetControl.isPaginationVisible():\n      case datasetControl.isRecordCountVisible():\n      case datasetControl.isPageSizeSwitcherVisible():\n        return true;\n      default:\n        return false;\n    }\n  }\n\n  const isPaginationVisible = () => {\n    return isFooterVisible();\n  }\n\n  useEffect(() => {\n    return () => {\n      datasetControl.destroy();\n    }\n  }, []);\n\n  return <ModelContext.Provider value={model}>\n    {componentProps.onRender({\n      container: {\n        theme: theme,\n        className: styles.datasetControlRoot\n      },\n      onRenderHeader: (props, defaultRender) => defaultRender(props),\n      onRenderFooter: (props, defaultRender) => defaultRender(props),\n      onRenderControlContainer: (props, defaultRender) => defaultRender(props)\n    }, (props) => {\n      return <ThemeProvider {...props.container}>\n        <Header onRenderHeader={props.onRenderHeader} />\n        {props.onRenderControlContainer({\n          controlContainerProps: {\n            className: styles.controlContainer\n          },\n\n        }, (props) => {\n          const { onOverrideComponentProps, ...filteredProps } = propsRef.current;\n          return <div {...props.controlContainerProps}>\n            {propsRef.current.onGetControlComponent({\n              ...filteredProps,\n              parameters: datasetControl.getParameters(),\n              context: datasetControl.getPcfContext(),\n              state: datasetControl.getState()\n            })}\n          </div>\n        })}\n        {props.onRenderFooter({\n          footerContainerProps: {\n            className: styles.footer\n          },\n          onRenderPagination: (props, defaultRender) => defaultRender(props)\n        }, (props) => {\n          if (!isFooterVisible()) {\n            return <></>\n          }\n          return <div {...props.footerContainerProps}>\n            {isPaginationVisible() &&\n              <Pagination onRenderPagination={props.onRenderPagination} />\n            }\n          </div>\n        })}\n      </ThemeProvider>\n    })}\n  </ModelContext.Provider>\n}"],"names":["_jsx","_jsxs"],"mappings":"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"}

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

@@ -0,0 +1,16 @@
+import { ITranslation } from "../../hooks";
+import { IDatasetControl } from "../../utils/dataset-control";
+import { datasetControlTranslations } from "./translations";
+type Labels = Required<ITranslation<typeof datasetControlTranslations>>;
+interface IDatasetControlModelOptions {
+    datasetControl: IDatasetControl;
+    getLabels: () => Labels;
+}
+export declare class DatasetControlModel {
+    private _options;
+    constructor(options: IDatasetControlModelOptions);
+    getDatasetControl(): IDatasetControl;
+    getLabels(): Labels;
+    private _registerInterceptors;
+}
+export {};

package/dist/components/DatasetControl/DatasetControlModel.js

@@ -0,0 +1,32 @@
+class DatasetControlModel {
+    constructor(options) {
+        this._options = options;
+        this._registerInterceptors();
+    }
+    getDatasetControl() {
+        return this._options.datasetControl;
+    }
+    getLabels() {
+        return this._options.getLabels();
+    }
+    //here due to translations, should be part of DatasetControl when we have translations settled
+    _registerInterceptors() {
+        const dataset = this._options.datasetControl.getDataset();
+        const dataProvider = dataset.getDataProvider();
+        dataProvider.setInterceptor('__unsavedChangesBlocker', (parameters, defaultAction) => {
+            if (!dataProvider.isDirty()) {
+                return defaultAction(parameters);
+            }
+            else if (window.confirm(this._options.getLabels()['saving-discard-all-confirmation']())) {
+                //@ts-ignore
+                dataProvider['_dirtyRecordIdsSet'].clear();
+                //@ts-ignore
+                dataProvider['_invalidRecordFieldIdsSet'].clear();
+                return defaultAction(parameters);
+            }
+        });
+    }
+}
+
+export { DatasetControlModel };
+//# sourceMappingURL=DatasetControlModel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatasetControlModel.js","sources":["../../../src/components/DatasetControl/DatasetControlModel.ts"],"sourcesContent":["import { IInternalDataProvider } from \"@talxis/client-libraries\";\nimport { ITranslation } from \"../../hooks\";\nimport { IDatasetControl } from \"../../utils/dataset-control\";\nimport { datasetControlTranslations } from \"./translations\";\n\ntype Labels = Required<ITranslation<typeof datasetControlTranslations>>;\n\ninterface IDatasetControlModelOptions {\n    datasetControl: IDatasetControl;\n    getLabels: () => Labels;\n}\n\nexport class DatasetControlModel {\n    private _options: IDatasetControlModelOptions;\n\n    constructor(options: IDatasetControlModelOptions) {\n        this._options = options;\n        this._registerInterceptors();\n    }\n    public getDatasetControl(): IDatasetControl {\n        return this._options.datasetControl;\n    }\n    public getLabels(): Labels {\n        return this._options.getLabels();\n    }\n\n    //here due to translations, should be part of DatasetControl when we have translations settled\n    private _registerInterceptors() {\n        const dataset = this._options.datasetControl.getDataset()\n        const dataProvider = dataset.getDataProvider() as IInternalDataProvider;\n        dataProvider.setInterceptor('__unsavedChangesBlocker', (parameters, defaultAction) => {\n            if (!dataProvider.isDirty()) {\n                return defaultAction(parameters);\n            }\n            else if (window.confirm(this._options.getLabels()['saving-discard-all-confirmation']()) ) {\n                //@ts-ignore\n                dataProvider['_dirtyRecordIdsSet'].clear();\n                //@ts-ignore\n                dataProvider['_invalidRecordFieldIdsSet'].clear();\n                return defaultAction(parameters);\n            }\n        })\n    }\n\n}"],"names":[],"mappings":"MAYa,mBAAmB,CAAA;AAG5B,IAAA,WAAA,CAAY,OAAoC,EAAA;AAC5C,QAAA,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,qBAAqB,EAAE,CAAC;KAChC;IACM,iBAAiB,GAAA;AACpB,QAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC;KACvC;IACM,SAAS,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC;KACpC;;IAGO,qBAAqB,GAAA;QACzB,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,UAAU,EAAE,CAAA;AACzD,QAAA,MAAM,YAAY,GAAG,OAAO,CAAC,eAAe,EAA2B,CAAC;QACxE,YAAY,CAAC,cAAc,CAAC,yBAAyB,EAAE,CAAC,UAAU,EAAE,aAAa,KAAI;AACjF,YAAA,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE;AACzB,gBAAA,OAAO,aAAa,CAAC,UAAU,CAAC,CAAC;AACpC,aAAA;AACI,iBAAA,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC,iCAAiC,CAAC,EAAE,CAAC,EAAG;;AAEtF,gBAAA,YAAY,CAAC,oBAAoB,CAAC,CAAC,KAAK,EAAE,CAAC;;AAE3C,gBAAA,YAAY,CAAC,2BAA2B,CAAC,CAAC,KAAK,EAAE,CAAC;AAClD,gBAAA,OAAO,aAAa,CAAC,UAAU,CAAC,CAAC;AACpC,aAAA;AACL,SAAC,CAAC,CAAA;KACL;AAEJ;;;;"}

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

@@ -0,0 +1,3 @@
+import { IDatasetColumnFiltering } from "./interfaces";
+import React from "react";
+export declare const DatasetColumnFiltering: (props: IDatasetColumnFiltering) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;

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

@@ -0,0 +1,166 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { ThemeProvider, PrimaryButton, DefaultButton } from '@fluentui/react';
+import { datasetColumnFilteringTranslations } from './translations.js';
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
+import { DatasetColumnFilteringModel } from './DatasetColumnFilteringModel.js';
+import { useRerender } from '@talxis/react-components';
+import { getDatasetColumnFilteringStyles } from './styles.js';
+import { useDebouncedCallback } from 'use-debounce';
+import { Type } from '@talxis/client-libraries';
+import { useControl } from '../../../hooks/useControl.js';
+import { OptionSet } from '../../OptionSet/OptionSet.js';
+import { NestedControlRenderer } from '../../NestedControlRenderer/NestedControlRenderer.js';
+
+const DatasetColumnFiltering = (props) => {
+    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);
+    const { labels, theme, onNotifyOutputChanged } = useControl('DatasetFiltering', props, datasetColumnFilteringTranslations);
+    const context = props.context;
+    const filtering = props.parameters.Filtering;
+    const columnFilter = props.parameters.Filtering.getColumnFilter(props.parameters.ColumnName.raw);
+    //automatically create a condition if it's not present
+    if (columnFilter.getConditions().length === 0) {
+        columnFilter.addCondition();
+    }
+    //this is the first condition, we assume that the control is used for a single condition
+    const condition = columnFilter.getConditions()[0];
+    const rerender = useRerender();
+    const [shouldRemountValueControl, setShouldRemountValueControl] = useState(false);
+    const onOperatorChanged = useCallback(() => {
+        setShouldRemountValueControl(true);
+    }, []);
+    const isClearButtonDisabled = () => {
+        if (condition.isValueLoading()) {
+            return true;
+        }
+        return model.getConditionValue().every(value => {
+            return value == null;
+        });
+    };
+    const onSave = () => {
+        condition.setIsValueRequired(true);
+        const result = filtering.getFilterExpression(Type.And.Value);
+        if (!result) {
+            rerender();
+        }
+        else {
+            onNotifyOutputChanged(result);
+        }
+    };
+    const onClear = () => {
+        condition.setValue(null);
+        setShouldRemountValueControl(true);
+    };
+    const debouncedSetConditionControlValue = useDebouncedCallback((value, index) => {
+        model.setConditionValue(value, index);
+    });
+    const model = useMemo(() => {
+        condition.addEventListener('onOperatorChanged', onOperatorChanged);
+        condition.addEventListener('onValueChanged', rerender);
+        return new DatasetColumnFilteringModel(condition, labels);
+    }, []);
+    const conditionValue = model.getConditionValue();
+    const validationResult = condition.getValidationResult();
+    const styles = useMemo(() => getDatasetColumnFilteringStyles(), []);
+    const componentProps = onOverrideComponentProps({
+        onRender: (props, defaultRender) => defaultRender(props),
+    });
+    useEffect(() => {
+        if (shouldRemountValueControl) {
+            setShouldRemountValueControl(false);
+        }
+    }, [shouldRemountValueControl]);
+    return componentProps.onRender({
+        container: {
+            theme: theme,
+            className: styles.datasetColumnFilteringRoot
+        },
+        valueControlsContainer: {
+            className: styles.valueControlsContainer
+        },
+        onRenderConditionOperatorControl: (props, defaultRender) => defaultRender(props),
+        onRenderConditionValueControl: (props, defaultRender) => defaultRender(props),
+        onRenderButtons: (props, defaultRender) => defaultRender(props),
+    }, (props) => {
+        return jsxs(ThemeProvider, { ...props.container, children: [props.onRenderConditionOperatorControl({
+                    context: context,
+                    //@ts-ignore - typings
+                    onNotifyOutputChanged: (outputs) => condition.setOperator(outputs.value),
+                    parameters: {
+                        value: {
+                            raw: condition.getOperator(),
+                            //@ts-ignore - typings
+                            attributes: {
+                                Options: model.getOperatorOptionSet()
+                            }
+                        }
+                    },
+                }, (props) => jsx(OptionSet, { ...props })), jsx("div", { ...props.valueControlsContainer, children: !shouldRemountValueControl &&
+                        jsx(Fragment, { children: conditionValue.map((value, index) => {
+                                return jsx(React.Fragment, { children: props.onRenderConditionValueControl({
+                                        context: context,
+                                        onOverrideComponentProps: (props) => {
+                                            return {
+                                                ...props,
+                                                onOverrideIsLoading: () => condition.isValueLoading()
+                                            };
+                                        },
+                                        parameters: {
+                                            ControlName: model.getControlName(),
+                                            LoadingType: 'shimmer',
+                                            Bindings: {
+                                                value: {
+                                                    isStatic: false,
+                                                    value: value,
+                                                    type: condition.getDataType() ?? 'SingleLine.Text',
+                                                    error: validationResult[index].error,
+                                                    errorMessage: validationResult[index].errorMessage,
+                                                    metadata: {
+                                                        onOverrideMetadata: () => {
+                                                            return {
+                                                                ...condition.getMetadata()
+                                                            };
+                                                        }
+                                                    },
+                                                    onNotifyOutputChanged: (value) => debouncedSetConditionControlValue(value, index)
+                                                },
+                                                AutoFocus: {
+                                                    isStatic: true,
+                                                    value: index === 0 && conditionValue.length === 1,
+                                                    type: 'TwoOptions'
+                                                },
+                                                ShowErrorMessage: {
+                                                    isStatic: true,
+                                                    value: true,
+                                                    type: 'TwoOptions'
+                                                },
+                                                ...condition.getBindings()
+                                            }
+                                        }
+                                    }, (props) => {
+                                        if (!model.getControlName()) {
+                                            return jsx(Fragment, {});
+                                        }
+                                        return jsx(NestedControlRenderer, { ...props });
+                                    }) }, index);
+                            }) }) }), props.onRenderButtons({
+                    container: {
+                        className: styles.buttons
+                    },
+                    onRenderApplyButton: (props, defaultRender) => defaultRender(props),
+                    onRenderClearButton: (props, defaultRender) => defaultRender(props)
+                }, (props) => {
+                    return jsxs("div", { ...props.container, children: [props.onRenderApplyButton({
+                                text: 'Apply',
+                                disabled: condition.isValueLoading(),
+                                onClick: onSave,
+                            }, (props) => jsx(PrimaryButton, { ...props })), props.onRenderClearButton({
+                                text: 'Clear',
+                                disabled: isClearButtonDisabled(),
+                                onClick: onClear
+                            }, (props) => jsx(DefaultButton, { ...props }))] });
+                })] });
+    });
+};
+
+export { DatasetColumnFiltering };
+//# sourceMappingURL=DatasetColumnFiltering.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatasetColumnFiltering.js","sources":["../../../../src/components/DatasetControl/Filtering/DatasetColumnFiltering.tsx"],"sourcesContent":["import { DefaultButton, DirectionalHint, PrimaryButton, ThemeProvider } from \"@fluentui/react\";\nimport { useControl } from \"../../../hooks\"\nimport { OptionSet } from \"../../OptionSet\";\nimport { IDatasetColumnFiltering } from \"./interfaces\";\nimport { datasetColumnFilteringTranslations } from \"./translations\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { DatasetColumnFilteringModel } from \"./DatasetColumnFilteringModel\";\nimport { useRerender } from \"@talxis/react-components\";\nimport { NestedControlRenderer } from \"../../NestedControlRenderer\";\nimport React from \"react\";\nimport { getDatasetColumnFilteringStyles } from \"./styles\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport { Type as FilterType } from \"@talxis/client-libraries\";\n\nexport const DatasetColumnFiltering = (props: IDatasetColumnFiltering) => {\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n    const { labels, theme, onNotifyOutputChanged } = useControl('DatasetFiltering', props, datasetColumnFilteringTranslations);\n    const context = props.context;\n    const filtering = props.parameters.Filtering;\n    const columnFilter = props.parameters.Filtering.getColumnFilter(props.parameters.ColumnName.raw!);\n    //automatically create a condition if it's not present\n    if (columnFilter.getConditions().length === 0) {\n        columnFilter.addCondition();\n    }\n    //this is the first condition, we assume that the control is used for a single condition\n    const condition = columnFilter.getConditions()[0];\n    const rerender = useRerender();\n    const [shouldRemountValueControl, setShouldRemountValueControl] = useState(false);\n\n    const onOperatorChanged = useCallback(() => {\n        setShouldRemountValueControl(true);\n    }, []);\n\n    const isClearButtonDisabled = () => {\n        if (condition.isValueLoading()) {\n            return true;\n        }\n        return model.getConditionValue().every(value => {\n            return value == null;\n        });\n    }\n    const onSave = () => {\n        condition.setIsValueRequired(true);\n        const result = filtering.getFilterExpression(FilterType.And.Value);\n        if (!result) {\n            rerender();\n        }\n        else {\n            onNotifyOutputChanged(result)\n        }\n    }\n\n    const onClear = () => {\n        condition.setValue(null);\n        setShouldRemountValueControl(true);\n    }\n\n    const debouncedSetConditionControlValue = useDebouncedCallback((value, index) => {\n        model.setConditionValue(value, index);\n    })\n\n    const model = useMemo(() => {\n        condition.addEventListener('onOperatorChanged', onOperatorChanged);\n        condition.addEventListener('onValueChanged', rerender);\n        return new DatasetColumnFilteringModel(condition, labels)\n    }, []);\n\n    const conditionValue = model.getConditionValue();\n    const validationResult = condition.getValidationResult();\n    const styles = useMemo(() => getDatasetColumnFilteringStyles(), []);\n\n    const componentProps = onOverrideComponentProps({\n        onRender: (props, defaultRender) => defaultRender(props),\n    })\n\n    useEffect(() => {\n        if (shouldRemountValueControl) {\n            setShouldRemountValueControl(false);\n        }\n    }, [shouldRemountValueControl])\n\n    return componentProps.onRender({\n        container: {\n            theme: theme,\n            className: styles.datasetColumnFilteringRoot\n        },\n        valueControlsContainer: {\n            className: styles.valueControlsContainer\n        },\n        onRenderConditionOperatorControl: (props, defaultRender) => defaultRender(props),\n        onRenderConditionValueControl: (props, defaultRender) => defaultRender(props),\n        onRenderButtons: (props, defaultRender) => defaultRender(props),\n\n    }, (props) => {\n        return <ThemeProvider {...props.container}>\n            {props.onRenderConditionOperatorControl({\n                context: context,\n                //@ts-ignore - typings\n                onNotifyOutputChanged: (outputs) => condition.setOperator(outputs.value),\n                parameters: {\n                    value: {\n                        raw: condition.getOperator(),\n                        //@ts-ignore - typings\n                        attributes: {\n                            Options: model.getOperatorOptionSet()\n                        }\n                    }\n                },\n            }, (props) => <OptionSet {...props} />)}\n            <div {...props.valueControlsContainer}>\n                {!shouldRemountValueControl &&\n                    <>\n                        {\n                            conditionValue.map((value, index) => {\n                                return <React.Fragment key={index}>\n                                    {props.onRenderConditionValueControl({\n                                        context: context,\n                                        onOverrideComponentProps: (props) => {\n                                            return {\n                                                ...props,\n                                                onOverrideIsLoading: () => condition.isValueLoading()\n                                            }\n                                        },\n                                        parameters: {\n                                            ControlName: model.getControlName()!,\n                                            LoadingType: 'shimmer',\n                                            Bindings: {\n                                                value: {\n                                                    isStatic: false,\n                                                    value: value,\n                                                    type: condition.getDataType() ?? 'SingleLine.Text',\n                                                    error: validationResult[index].error,\n                                                    errorMessage: validationResult[index].errorMessage,\n                                                    metadata: {\n                                                        onOverrideMetadata: () => {\n                                                            return {\n                                                                ...condition.getMetadata()\n                                                            }\n                                                        }\n                                                    },\n                                                    onNotifyOutputChanged: (value) => debouncedSetConditionControlValue(value, index)\n                                                },\n                                                AutoFocus: {\n                                                    isStatic: true,\n                                                    value: index === 0 && conditionValue.length === 1,\n                                                    type: 'TwoOptions'\n                                                },\n                                                ShowErrorMessage: {\n                                                    isStatic: true,\n                                                    value: true,\n                                                    type: 'TwoOptions'\n                                                },\n                                                ...condition.getBindings()\n                                            }\n                                        }\n                                    }, (props) => {\n                                        if (!model.getControlName()) {\n                                            return <></>\n                                        }\n                                        return <NestedControlRenderer {...props} />\n                                    })}\n                                </React.Fragment>\n                            })\n                        }\n                    </>\n                }\n            </div>\n            {props.onRenderButtons({\n                container: {\n                    className: styles.buttons\n                },\n                onRenderApplyButton: (props, defaultRender) => defaultRender(props),\n                onRenderClearButton: (props, defaultRender) => defaultRender(props)\n            }, (props) => {\n                return <div {...props.container}>\n                    {props.onRenderApplyButton({\n                        text: 'Apply',\n                        disabled: condition.isValueLoading(),\n                        onClick: onSave,\n                    }, (props) => <PrimaryButton {...props} />)}\n                    {props.onRenderClearButton({\n                        text: 'Clear',\n                        disabled: isClearButtonDisabled(),\n                        onClick: onClear\n                    }, (props) => <DefaultButton\n                        {...props} />)}\n                </div>\n            })}\n        </ThemeProvider>\n    })\n}"],"names":["FilterType","_jsxs","_jsx","_Fragment"],"mappings":"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"}

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

@@ -0,0 +1,15 @@
+/// <reference types="@types/powerapps-component-framework" />
+import { ITranslation } from "../../../hooks";
+import { datasetColumnFilteringTranslations } from "./translations";
+import { Condition } from '@talxis/client-libraries';
+type Labels = Required<ITranslation<typeof datasetColumnFilteringTranslations>>;
+export declare class DatasetColumnFilteringModel {
+    private _condition;
+    private _labels;
+    constructor(condition: Condition, labels: Labels);
+    getOperatorOptionSet(): ComponentFramework.PropertyHelper.OptionMetadata[];
+    setConditionValue(value: any, index: number): void;
+    getConditionValue(): any[];
+    getControlName(): "Decimal" | "TextField" | "OptionSet" | "MultiSelectOptionSet" | "DateTime" | "Duration" | "Lookup" | "TwoOptions" | null;
+}
+export {};

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

@@ -0,0 +1,59 @@
+import { Operators } from '@talxis/client-libraries';
+import { BaseControls } from '../../../utils/BaseControls.js';
+
+class DatasetColumnFilteringModel {
+    constructor(condition, labels) {
+        this._condition = condition;
+        this._labels = labels;
+    }
+    getOperatorOptionSet() {
+        const operators = this._condition.getColumn().metadata?.SupportedFilterConditionOperators ?? [];
+        return operators.map(operator => {
+            return {
+                Value: operator,
+                //@ts-ignore - typings
+                Label: this._labels[`operator-${operator}`](),
+                Color: ''
+            };
+        });
+    }
+    setConditionValue(value, index) {
+        const operator = this._condition.getOperator();
+        if (operator !== Operators.Between.Value && operator !== Operators.NotBetween.Value) {
+            this._condition.setValue(value);
+        }
+        else {
+            const values = [this._condition.getControlValue()?.[0] ?? null, this._condition.getControlValue()?.[1] ?? null];
+            if (index === 0) {
+                values[0] = value;
+            }
+            else {
+                values[1] = value;
+            }
+            this._condition.setValue(values);
+        }
+    }
+    getConditionValue() {
+        const operator = this._condition.getOperator();
+        if (operator !== Operators.Between.Value && operator !== Operators.NotBetween.Value) {
+            return [this._condition.getControlValue()];
+        }
+        const value = this._condition.getControlValue();
+        if (Array.isArray(value)) {
+            return value;
+        }
+        return [null, null];
+    }
+    getControlName() {
+        const dataType = this._condition.getDataType();
+        if (!dataType) {
+            return null;
+        }
+        else {
+            return BaseControls.GetControlNameForDataType(dataType);
+        }
+    }
+}
+
+export { DatasetColumnFilteringModel };
+//# sourceMappingURL=DatasetColumnFilteringModel.js.map

package/dist/components/DatasetControl/Filtering/DatasetColumnFilteringModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatasetColumnFilteringModel.js","sources":["../../../../src/components/DatasetControl/Filtering/DatasetColumnFilteringModel.ts"],"sourcesContent":["import { Operators } from \"@talxis/client-libraries\";\nimport { ITranslation } from \"../../../hooks\";\nimport { datasetColumnFilteringTranslations } from \"./translations\";\nimport { BaseControls } from \"../../../utils\";\nimport { Condition } from '@talxis/client-libraries';\n\ntype Labels = Required<ITranslation<typeof datasetColumnFilteringTranslations>>;\n\nexport class DatasetColumnFilteringModel {\n    private _condition: Condition;\n    private _labels: Labels;\n\n    constructor(condition: Condition, labels: Labels) {\n        this._condition = condition;\n        this._labels = labels;\n    }\n\n    public getOperatorOptionSet(): ComponentFramework.PropertyHelper.OptionMetadata[] {\n        const operators = this._condition.getColumn().metadata?.SupportedFilterConditionOperators ?? []\n        return operators.map(operator => {\n            return {\n                Value: operator,\n                //@ts-ignore - typings\n                Label: this._labels[`operator-${operator}`](),\n                Color: ''\n            }\n        })\n    }\n\n    public setConditionValue(value: any, index: number) {\n        const operator = this._condition.getOperator();\n        if (operator !== Operators.Between.Value && operator !== Operators.NotBetween.Value) {\n            this._condition.setValue(value);\n        }\n        else {\n            const values = [this._condition.getControlValue()?.[0] ?? null, this._condition.getControlValue()?.[1] ?? null];\n            if (index === 0) {\n                values[0] = value;\n            }\n            else {\n                values[1] = value;\n            }\n            this._condition.setValue(values);\n        }\n    }\n\n    public getConditionValue(): any[] {\n        const operator = this._condition.getOperator();\n        if (operator !== Operators.Between.Value && operator !== Operators.NotBetween.Value) {\n            return [this._condition.getControlValue()];\n        }\n        const value = this._condition.getControlValue();\n        if (Array.isArray(value)) {\n            return value;\n        }\n        return [null, null];\n    }\n\n    public getControlName() {\n        const dataType = this._condition.getDataType();\n        if (!dataType) {\n            return null;\n        }\n        else {\n            return BaseControls.GetControlNameForDataType(dataType);\n        }\n    }\n}"],"names":[],"mappings":";;;MAQa,2BAA2B,CAAA;IAIpC,WAAY,CAAA,SAAoB,EAAE,MAAc,EAAA;AAC5C,QAAA,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;AAC5B,QAAA,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;KACzB;IAEM,oBAAoB,GAAA;AACvB,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,CAAC,QAAQ,EAAE,iCAAiC,IAAI,EAAE,CAAA;AAC/F,QAAA,OAAO,SAAS,CAAC,GAAG,CAAC,QAAQ,IAAG;YAC5B,OAAO;AACH,gBAAA,KAAK,EAAE,QAAQ;;gBAEf,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAY,SAAA,EAAA,QAAQ,CAAE,CAAA,CAAC,EAAE;AAC7C,gBAAA,KAAK,EAAE,EAAE;aACZ,CAAA;AACL,SAAC,CAAC,CAAA;KACL;IAEM,iBAAiB,CAAC,KAAU,EAAE,KAAa,EAAA;QAC9C,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;AAC/C,QAAA,IAAI,QAAQ,KAAK,SAAS,CAAC,OAAO,CAAC,KAAK,IAAI,QAAQ,KAAK,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE;AACjF,YAAA,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AACnC,SAAA;AACI,aAAA;AACD,YAAA,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,IAAI,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC;YAChH,IAAI,KAAK,KAAK,CAAC,EAAE;AACb,gBAAA,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;AACrB,aAAA;AACI,iBAAA;AACD,gBAAA,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;AACrB,aAAA;AACD,YAAA,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AACpC,SAAA;KACJ;IAEM,iBAAiB,GAAA;QACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;AAC/C,QAAA,IAAI,QAAQ,KAAK,SAAS,CAAC,OAAO,CAAC,KAAK,IAAI,QAAQ,KAAK,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE;YACjF,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,CAAC,CAAC;AAC9C,SAAA;QACD,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,CAAC;AAChD,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AACtB,YAAA,OAAO,KAAK,CAAC;AAChB,SAAA;AACD,QAAA,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;KACvB;IAEM,cAAc,GAAA;QACjB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;QAC/C,IAAI,CAAC,QAAQ,EAAE;AACX,YAAA,OAAO,IAAI,CAAC;AACf,SAAA;AACI,aAAA;AACD,YAAA,OAAO,YAAY,CAAC,yBAAyB,CAAC,QAAQ,CAAC,CAAC;AAC3D,SAAA;KACJ;AACJ;;;;"}

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

@@ -0,0 +1,31 @@
+/// <reference types="@types/powerapps-component-framework" />
+import { ThemeProviderProps } from "@fluentui/react";
+import { IControl, IParameters, IStringProperty, ITranslations } from "../../../interfaces";
+import { IOptionSet } from "../../OptionSet";
+import { datasetColumnFilteringTranslations } from "./translations";
+import { INestedControlRenderer } from "../../NestedControlRenderer/interfaces";
+import { IButtonProps as IFluentButtonProps } from "@fluentui/react";
+import React from "react";
+import { Filtering } from "@talxis/client-libraries";
+export interface IDatasetColumnFiltering extends IControl<IDatasetColumnFilteringParameters, ComponentFramework.PropertyHelper.DataSetApi.FilterExpression, Partial<ITranslations<typeof datasetColumnFilteringTranslations>>, IDatasetColumnFilteringComponentProps> {
+}
+export interface IDatasetColumnFilteringParameters extends IParameters {
+    ColumnName: IStringProperty;
+    Filtering: Filtering;
+}
+interface IDatasetColumnFilteringComponentProps {
+    onRender: (props: IComponentProps, defaultRender: (props: IComponentProps) => React.ReactElement) => React.ReactElement;
+}
+interface IComponentProps {
+    container: ThemeProviderProps;
+    valueControlsContainer: React.HTMLAttributes<HTMLDivElement>;
+    onRenderConditionOperatorControl: (props: IOptionSet, defaultRender: (props: IOptionSet) => React.ReactElement) => React.ReactElement;
+    onRenderConditionValueControl: (props: INestedControlRenderer, defaultRender: (props: INestedControlRenderer) => React.ReactElement) => React.ReactElement;
+    onRenderButtons: (props: IButtonsProps, defaultRender: (props: IButtonsProps) => React.ReactElement) => React.ReactElement;
+}
+interface IButtonsProps {
+    container: React.HTMLAttributes<HTMLDivElement>;
+    onRenderApplyButton: (props: IFluentButtonProps, defaultRender: (props: IFluentButtonProps) => React.ReactElement) => React.ReactElement;
+    onRenderClearButton: (props: IFluentButtonProps, defaultRender: (props: IFluentButtonProps) => React.ReactElement) => React.ReactElement;
+}
+export {};

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

@@ -0,0 +1,16 @@
+export declare const getDatasetColumnFilteringStyles: () => import("@fluentui/react").IProcessedStyleSet<{
+    datasetColumnFilteringRoot: {
+        display: string;
+        flexDirection: string;
+        gap: number;
+    };
+    valueControlsContainer: {
+        display: string;
+        flexDirection: string;
+        gap: number;
+    };
+    buttons: {
+        display: string;
+        gap: number;
+    };
+}>;