@talxis/base-controls 1.2509.1-alpha.6 → 1.2509.2

package/LICENSE.md

@@ -0,0 +1,49 @@
+# TALXIS License
+
+## Definitions
+
+“**Software**” means the source code and all related materials provided under this license.
+
+“**Commercial Use**” means any use of the software for the purpose of generating revenue or economic benefit.
+
+“**Licensor**” is NETWORG, the copyright holder and provider of the Software.
+
+## Non-Commercial Use
+
+The Software may be used free of charge for any non-Commercial Use, whether in open-source or closed-source applications.
+
+## Commercial Use
+
+1. Organizations with an annual revenue below 1,000,000 CZK may use the Software for Commercial Use free of charge, provided that all modifications to the Software remain open-source as specified in Section 4.
+2. For determining the revenue threshold, the total revenue of a group of affiliated entities shall be considered.
+3. Organizations with an annual revenue of 1,000,000 CZK or more must obtain a paid license from Licensor before any Commercial Use.
+
+## Modifications and Redistribution
+
+Any modification of the Software must be made publicly available under this license or a compatible open source license.
+
+Distribution of the Software or modified versions of the Software is permitted only if:
+
+1. this licence remains intact
+2. a clear link to the original source code is provided with a link to the Licensor GitHub repository.
+3. all terms of this license are complied with
+
+## Commercial Closed-Source Use
+
+Using the Software in closed-source Commercial Use (where modifications to the Software are not made publicly available) is permitted only under a separate licensing agreement with Licensor, regardless of the organization's revenue.
+
+## Liability Limitation
+
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT, THE SOFTWARE IS PROVIDED "AS IS" WITHOUT ANY KIND OF WARRANTY, EXPRESS OR IMPLIED.  In any case, whether in a contract, tort, or other action, the authors, Licensor or copyright holders will not be held accountable for any claims, damages, or other liabilities resulting from, out of, or connected to the Software or the use or other dealings in the Software.
+
+## Area of Cover
+
+This licence applies worldwide.
+
+## Termination
+
+Any breach of this license's terms immediately terminate your right to use the Software and could lead to legal action.
+
+## Contribution
+
+By contributing to the Software, you agree that your contributions will be licensed under the same terms as this license.

package/README.md

@@ -1,41 +1,4 @@
-# Running locally build package in PCF
-
-1. Run `npm install` inside the root directory.
-1. Run `npm run build`.
-1. Run `pnpm link --global`
-1. Navigate to the PCF root directory
-1. Run `pnpm link --global @talxis/base-controls`
-1. Run `npm start watch`.
-
-If you make any changes in the package and re-build it with `npm run build`, it will automatically re-build the PCF and show your changes.
-
-# Running locally build package in Portal
-
-1. Run `npm install` inside the root directory.
-1. Run `npm run build`.
-1. Run `npm link`.
-1. Navigate to the `Portal.Web.Frontend` directory.
-1. Add the following prop in the `vite.config.mts` file under `defineConfig`:
-
-```typescript
-optimizeDeps: {
-    exclude: ['@talxis/base-controls']
-}
-```
-8. Run `npm install`
-9. Run `npm link @talxis/base-controls`
-10. Run `npm start`
-
-These steps only need to be done once. If you want to see any future changes you made in the package, you need to run `npm run build` in package root directory and Portal will automatically reload with your changes applied.
-
-**Don't forget to revert the `vite.config.mts` file to the original version before pushing any changes to the Portal repo!**
-
-## Troubleshooting
-
-If your PCF/Portal builds, but you get an `Hooks can only be called inside of the body of a function component` error during runtime, you need to link the version of React from your PCF/Portal to the package:
-
-1. Navigate to the root directory.
-2. Run `npm` link `<path-to-react> <path-to-react-dom>`
-
-Easiest way to do this is drag the `react` and `react-dom` folders from your PCF/Portal `node_modules` folder into the terminal window where you write the `npm link` command.
+# @talxis/base-controls
 
+## Developing
+Refer to [Developing](./docs/developing.md) for more information.

package/dist/components/DatasetControl/DatasetControl.js

@@ -1,75 +1,71 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useRef, useMemo } from 'react';
 import { ThemeProvider } from '@fluentui/react';
 import { datasetControlTranslations } from './translations.js';
-import { useRerender } from '@talxis/react-components';
-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 { QuickFind } from './QuickFind/QuickFind.js';
+import { useRerender } from '@talxis/react-components';
+import { Client } from '@talxis/client-libraries';
+import { DatasetPaging } from './Paging/DatasetPaging.js';
 import { useControl } from '../../hooks/useControl.js';
 
+const client = new Client();
 const DatasetControl = (props) => {
     const { labels, theme } = useControl('DatasetControl', props, datasetControlTranslations);
-    const propsRef = useRef(props);
-    propsRef.current = props;
-    const model = useMemo(() => new DatasetControlModel({
-        getProps: () => propsRef.current,
-        getLabels: () => labels,
-    }), []);
-    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);
     const rerender = useRerender();
-    const styles = useMemo(() => getDatasetControlStyles(props.parameters.Height?.raw), [props.parameters.Height?.raw]);
-    const dataset = model.getDataset();
-    useEventEmitter(dataset, 'onNewDataLoaded', rerender);
-    useEventEmitter(dataset, 'onRenderRequested', rerender);
-    useEventEmitter(dataset, 'onBeforeNewDataLoaded', rerender);
+    const dataset = props.parameters.Grid;
+    const injectedContextRef = useRef(props.context);
+    const styles = useMemo(() => getDatasetControlStyles(theme, props.parameters.Height?.raw), []);
+    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 componentProps = onOverrideComponentProps({
-        onRender: (props, defaultRender) => defaultRender(props),
+        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)
     });
-    const isFooterVisible = () => {
-        switch (true) {
-            case model.isPaginationVisible():
-            case model.isRecordCountVisible():
-            case model.isPageSizeSwitcherVisible():
-                return true;
-            default:
-                return false;
+    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;
         }
+        return false;
     };
-    const isPaginationVisible = () => {
-        return isFooterVisible();
-    };
-    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) => {
-                        return jsx("div", { ...props.controlContainerProps, children: propsRef.current.onGetControlComponent(propsRef.current) });
-                    }), 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 }) });
-                    })] });
-        }) });
+    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 }))] }));
 };
 
 export { DatasetControl };

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

@@ -1 +1 @@
-{"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 { IDatasetControl } from \"./interfaces\";\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\";\n\nexport const DatasetControl = (props: IDatasetControl) => {\n  const { labels, theme } = useControl('DatasetControl', props, datasetControlTranslations);\n  const propsRef = useRef<IDatasetControl>(props);\n  propsRef.current = props;\n  const model = useMemo(() => new DatasetControlModel({\n    getProps: () => propsRef.current,\n    getLabels: () => labels,\n  }), []);\n  const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n  const rerender = useRerender();\n  const styles = useMemo(() => getDatasetControlStyles(props.parameters.Height?.raw), [props.parameters.Height?.raw]);\n  const dataset = model.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 model.isPaginationVisible():\n      case model.isRecordCountVisible():\n      case model.isPageSizeSwitcherVisible():\n        return true;\n      default:\n        return false;\n    }\n  }\n\n  const isPaginationVisible = () => {\n    return isFooterVisible();\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          return <div {...props.controlContainerProps}>\n            {propsRef.current.onGetControlComponent(propsRef.current)}\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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"}
+{"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":"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"}

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

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

package/dist/components/DatasetControl/Paging/DatasetPaging.js

@@ -0,0 +1,69 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ThemeProvider, CommandBarButton, ContextualMenuItemType } from '@fluentui/react';
+import { getPagingStyles } from './styles.js';
+import { useMemo } from 'react';
+import { Paging } from './Paging.js';
+import { CommandBar } from '@talxis/react-components';
+import { datasetPagingTranslations } from './translations.js';
+import { useControl } from '../../../hooks/useControl.js';
+
+const PAGE_SIZE_OPTIONS = ['25', '50', '75', '100', '250'];
+const DatasetPaging = (props) => {
+    const { labels, theme } = useControl('DatasetPaging', props, datasetPagingTranslations);
+    const styles = useMemo(() => getPagingStyles(theme), [theme]);
+    const paging = useMemo(() => new Paging(() => props.parameters, () => labels), []);
+    const parameters = props.parameters;
+    const dataset = parameters.Dataset;
+    const getPageSizeOptions = () => {
+        return PAGE_SIZE_OPTIONS.map(size => {
+            return {
+                key: size,
+                text: size,
+                checked: parseInt(size) === paging.pageSize,
+                className: styles.pageSizeOption,
+                onClick: () => paging.setPageSize(parseInt(size))
+            };
+        });
+    };
+    return (jsxs(ThemeProvider, { theme: theme, className: styles.datasetPagingRoot, children: [jsx("div", { className: styles.pageSizeBtnWrapper, children: jsx(CommandBarButton, { disabled: dataset.loading || !paging.isEnabled, text: paging.toString(), menuProps: parameters.EnablePageSizeSwitcher?.raw !== false ? {
+                        items: [
+                            {
+                                key: 'header',
+                                itemType: ContextualMenuItemType.Header,
+                                text: labels['page-record-count'](),
+                            },
+                            {
+                                key: 'divider',
+                                itemType: ContextualMenuItemType.Divider,
+                            },
+                            ...getPageSizeOptions()
+                        ]
+                    } : undefined }) }), paging.isEnabled &&
+                jsx(CommandBar, { className: styles.pagination, items: [], farItems: [{
+                            key: 'FirstPage',
+                            iconOnly: true,
+                            iconProps: { iconName: 'DoubleChevronLeft' },
+                            disabled: !paging.hasPreviousPage || dataset.loading,
+                            onClick: () => paging.reset()
+                        }, {
+                            key: 'PreviousPage',
+                            iconOnly: true,
+                            iconProps: { iconName: 'Back' },
+                            disabled: !paging.hasPreviousPage || dataset.loading,
+                            onClick: () => paging.loadPreviousPage()
+                        }, {
+                            key: 'CurrentPage',
+                            text: `${labels['paging-page']()} ${paging.pageNumber.toString()}`,
+                            className: styles.currentPageBtn,
+                            disabled: true,
+                        }, {
+                            key: 'NextPage',
+                            iconOnly: true,
+                            iconProps: { iconName: 'Forward' },
+                            disabled: !paging.hasNextPage || dataset.loading,
+                            onClick: () => paging.loadNextPage()
+                        }] })] }));
+};
+
+export { DatasetPaging };
+//# sourceMappingURL=DatasetPaging.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatasetPaging.js","sources":["../../../../src/components/DatasetControl/Paging/DatasetPaging.tsx"],"sourcesContent":["import { CommandBarButton, ContextualMenuItemType, IContextualMenuItem, ThemeProvider } from \"@fluentui/react\";\nimport { useControl } from \"../../../hooks\";\nimport { IDatasetPaging } from \"./interfaces\";\nimport { getPagingStyles } from \"./styles\";\nimport { useMemo } from \"react\";\nimport { Paging } from \"./Paging\";\nimport { CommandBar } from \"@talxis/react-components\";\nimport { datasetPagingTranslations } from \"./translations\";\n\nconst PAGE_SIZE_OPTIONS = ['25', '50', '75', '100', '250'];\n\nexport const DatasetPaging = (props: IDatasetPaging) => {\n    const { labels, theme } = useControl('DatasetPaging', props, datasetPagingTranslations);\n    const styles = useMemo(() => getPagingStyles(theme), [theme]);\n    const paging = useMemo(() => new Paging(() => props.parameters, () => labels), []);\n    const parameters = props.parameters;\n    const dataset = parameters.Dataset;\n\n    const getPageSizeOptions = (): IContextualMenuItem[] => {\n        return PAGE_SIZE_OPTIONS.map(size => {\n            return {\n                key: size,\n                text: size,\n                checked: parseInt(size) === paging.pageSize,\n                className: styles.pageSizeOption,\n                onClick: () => paging.setPageSize(parseInt(size))\n            }\n        })\n    }\n    return (\n        <ThemeProvider theme={theme} className={styles.datasetPagingRoot}>\n            <div className={styles.pageSizeBtnWrapper}>\n                <CommandBarButton\n                    disabled={dataset.loading || !paging.isEnabled}\n                    text={paging.toString()}\n                    menuProps={parameters.EnablePageSizeSwitcher?.raw !== false ? {\n                        items: [\n                            {\n                                key: 'header',\n                                itemType: ContextualMenuItemType.Header,\n                                text: labels['page-record-count'](),\n                            },\n                            {\n                                key: 'divider',\n                                itemType: ContextualMenuItemType.Divider,\n                            },\n                            ...getPageSizeOptions()\n                        ]\n                    } : undefined}\n                />\n            </div>\n            {paging.isEnabled &&\n                <CommandBar\n                    className={styles.pagination}\n                    items={[]}\n                    farItems={[{\n                        key: 'FirstPage',\n                        iconOnly: true,\n                        iconProps: { iconName: 'DoubleChevronLeft' },\n                        disabled: !paging.hasPreviousPage || dataset.loading,\n                        onClick: () => paging.reset()\n                    }, {\n                        key: 'PreviousPage',\n                        iconOnly: true,\n                        iconProps: { iconName: 'Back' },\n                        disabled: !paging.hasPreviousPage || dataset.loading,\n                        onClick: () => paging.loadPreviousPage()\n                    }, {\n                        key: 'CurrentPage',\n                        text: `${labels['paging-page']()} ${paging.pageNumber.toString()}`,\n                        className: styles.currentPageBtn,\n                        disabled: true,\n                    }, {\n                        key: 'NextPage',\n                        iconOnly: true,\n                        iconProps: { iconName: 'Forward' },\n                        disabled: !paging.hasNextPage || dataset.loading,\n                        onClick: () => paging.loadNextPage()\n                    }]}\n                />\n            }\n        </ThemeProvider>\n    )\n\n\n\n}"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,26 @@
+import { IDatasetPagingParameters } from "./interfaces";
+import { ITranslation } from "../../../hooks";
+import { datasetPagingTranslations } from "./translations";
+type ILabels = Required<ITranslation<typeof datasetPagingTranslations>>;
+export declare class Paging {
+    private _getParameters;
+    private _getLabels;
+    constructor(getParameters: () => IDatasetPagingParameters, getLabels: () => ILabels);
+    get pageNumber(): number;
+    get pageSize(): number;
+    get totalResultCount(): number;
+    get hasPreviousPage(): boolean;
+    get hasNextPage(): boolean;
+    get pageFirstRecordOrder(): number;
+    get formattedTotalResultCount(): string;
+    get pageLastRecordOrder(): string;
+    get isEnabled(): boolean;
+    loadNextPage(): void;
+    loadPreviousPage(): void;
+    loadExactPage(pageNumber: number): void;
+    setPageSize(pageSize: number): void;
+    reset(): void;
+    toString(): string;
+    private _getDataset;
+}
+export {};

package/dist/components/DatasetControl/Paging/Paging.js

@@ -0,0 +1,80 @@
+class Paging {
+    constructor(getParameters, getLabels) {
+        this._getParameters = getParameters;
+        this._getLabels = getLabels;
+    }
+    get pageNumber() {
+        return this._getDataset().paging.pageNumber;
+    }
+    get pageSize() {
+        return this._getDataset().paging.pageSize;
+    }
+    get totalResultCount() {
+        return this._getDataset().paging.totalResultCount;
+    }
+    get hasPreviousPage() {
+        return this._getDataset().paging.hasPreviousPage;
+    }
+    get hasNextPage() {
+        return this._getDataset().paging.hasNextPage;
+    }
+    get pageFirstRecordOrder() {
+        if (this._getDataset().sortedRecordIds.length === 0) {
+            return 0;
+        }
+        return (this.pageNumber - 1) * this.pageSize + (this.totalResultCount === 0 ? 0 : 1);
+    }
+    get formattedTotalResultCount() {
+        if (this.totalResultCount === undefined) {
+            return '';
+        }
+        if (this.totalResultCount === -1) {
+            return '5000+';
+        }
+        return this.totalResultCount.toString();
+    }
+    get pageLastRecordOrder() {
+        const count = this.pageNumber * this.pageSize;
+        if (this.totalResultCount === undefined) {
+            if (this.hasNextPage) {
+                return `${count}+`;
+            }
+            return `${count - this.pageSize + this._getDataset().sortedRecordIds.length}`;
+        }
+        if (count > this.totalResultCount && this.totalResultCount !== -1) {
+            return this.totalResultCount.toString();
+        }
+        return count.toString();
+    }
+    get isEnabled() {
+        return this._getParameters()?.EnablePagination?.raw !== false;
+    }
+    loadNextPage() {
+        this.loadExactPage(this.pageNumber + 1);
+    }
+    loadPreviousPage() {
+        this.loadExactPage(this.pageNumber - 1);
+    }
+    loadExactPage(pageNumber) {
+        this._getDataset().paging.loadExactPage(pageNumber);
+    }
+    setPageSize(pageSize) {
+        this._getDataset().paging.setPageSize(pageSize);
+        this._getDataset().refresh();
+    }
+    reset() {
+        this._getDataset().paging.reset();
+    }
+    toString() {
+        if (this.totalResultCount === undefined) {
+            return this._getLabels()['paging-pages']({ start: this.pageFirstRecordOrder, end: this.pageLastRecordOrder });
+        }
+        return `${this._getLabels()['paging-pages']({ start: this.pageFirstRecordOrder, end: this.pageLastRecordOrder })} ${this._getLabels()['paging-pages-totalcount']({ recordcount: this.formattedTotalResultCount })}`;
+    }
+    _getDataset() {
+        return this._getParameters().Dataset;
+    }
+}
+
+export { Paging };
+//# sourceMappingURL=Paging.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Paging.js","sources":["../../../../src/components/DatasetControl/Paging/Paging.ts"],"sourcesContent":["import { IDataset } from \"@talxis/client-libraries\";\nimport { IDatasetPagingParameters } from \"./interfaces\";\nimport { ITranslation } from \"../../../hooks\";\nimport { datasetPagingTranslations } from \"./translations\";\n\ntype ILabels = Required<ITranslation<typeof datasetPagingTranslations>>;\n\nexport class Paging {\n    private _getParameters: () => IDatasetPagingParameters;\n    private _getLabels: () => ILabels\n\n    constructor(getParameters: () => IDatasetPagingParameters, getLabels: () => ILabels) {\n        this._getParameters = getParameters;\n        this._getLabels = getLabels;\n    }\n\n    public get pageNumber() {\n        return this._getDataset().paging.pageNumber\n    }\n    public get pageSize() {\n        return this._getDataset().paging.pageSize\n    }\n    public get totalResultCount() {\n        return this._getDataset().paging.totalResultCount\n    }\n    public get hasPreviousPage() {\n        return this._getDataset().paging.hasPreviousPage\n    }\n    public get hasNextPage() {\n        return this._getDataset().paging.hasNextPage\n    }\n    public get pageFirstRecordOrder() {\n        if (this._getDataset().sortedRecordIds.length === 0) {\n            return 0;\n        }\n        return (this.pageNumber - 1) * this.pageSize + (this.totalResultCount === 0 ? 0 : 1);\n    }\n    public get formattedTotalResultCount(): string {\n        if (this.totalResultCount === undefined) {\n            return '';\n        }\n        if (this.totalResultCount === -1) {\n            return '5000+';\n        }\n        return this.totalResultCount.toString();\n    }\n    public get pageLastRecordOrder(): string {\n        const count = this.pageNumber * this.pageSize;\n        if (this.totalResultCount === undefined) {\n            if (this.hasNextPage) {\n                return `${count}+`;\n            }\n            return `${count - this.pageSize + this._getDataset().sortedRecordIds.length}`\n\n        }\n        if (count > this.totalResultCount && this.totalResultCount !== -1) {\n            return this.totalResultCount.toString();\n        }\n        return count.toString();\n    }\n\n    public get isEnabled() {\n        return this._getParameters()?.EnablePagination?.raw !== false;\n    }\n\n    public loadNextPage() {\n        this.loadExactPage(this.pageNumber + 1)\n    }\n    public loadPreviousPage() {\n        this.loadExactPage(this.pageNumber - 1);\n    }\n    public loadExactPage(pageNumber: number) {\n        this._getDataset().paging.loadExactPage(pageNumber);\n    }\n    public setPageSize(pageSize: number) {\n        this._getDataset().paging.setPageSize(pageSize);\n        this._getDataset().refresh();\n    }\n    public reset() {\n        this._getDataset().paging.reset();\n    }\n\n    public toString(): string {\n        if (this.totalResultCount === undefined) {\n            return this._getLabels()['paging-pages']({ start: this.pageFirstRecordOrder, end: this.pageLastRecordOrder })\n        }\n        return `${this._getLabels()['paging-pages']({ start: this.pageFirstRecordOrder, end: this.pageLastRecordOrder })} ${this._getLabels()['paging-pages-totalcount']({ recordcount: this.formattedTotalResultCount })}`\n    }\n\n    private _getDataset(): IDataset {\n        return this._getParameters().Dataset;\n    }\n}"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+export * from './DatasetPaging';
+export * from './Paging';
+export * from './interfaces';

package/dist/components/DatasetControl/Paging/index.js

@@ -0,0 +1,3 @@
+export { DatasetPaging } from './DatasetPaging.js';
+export { Paging } from './Paging.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1,16 @@
+import { IControl, IParameters, ITranslations, ITwoOptionsProperty } from "../../../interfaces";
+import { IDataset } from "@talxis/client-libraries";
+import { datasetPagingTranslations } from "./translations";
+export interface IDatasetPaging extends IControl<IDatasetPagingParameters, any, Partial<ITranslations<typeof datasetPagingTranslations>>, any> {
+}
+export interface IDatasetPagingParameters extends IParameters {
+    Dataset: IDataset;
+    /**
+     * If set to false, the user will not be able to navigate through pages. The component will still display the total number of records and the current page.
+     */
+    EnablePagination?: Omit<ITwoOptionsProperty, 'attributes'>;
+    /**
+     * If set to false, the user will not be able to change the page size.
+     */
+    EnablePageSizeSwitcher?: Omit<ITwoOptionsProperty, 'attributes'>;
+}

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

@@ -0,0 +1,35 @@
+import { ITheme } from "@fluentui/react";
+export declare const getPagingStyles: (theme: ITheme) => import("@fluentui/react").IProcessedStyleSet<{
+    datasetPagingRoot: {
+        display: string;
+        flexWrap: string;
+        justifyContent: string;
+    };
+    pagination: {
+        '.ms-CommandBar': {
+            paddingLeft: number;
+            paddingRight: number;
+        };
+    };
+    currentPageBtn: {
+        '.ms-Button-label': {
+            color: string;
+        };
+    };
+    pageSizeBtnWrapper: {
+        flexGrow: number;
+        display: string;
+        '.ms-Button-label': {
+            whiteSpace: string;
+        };
+        '.ms-Button': {
+            height: number;
+        };
+    };
+    pageSizeOption: {
+        '& .is-checked': {
+            backgroundColor: string;
+            fontWeight: number;
+        };
+    };
+}>;

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

@@ -0,0 +1,41 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getPagingStyles = (theme) => {
+    return mergeStyleSets({
+        datasetPagingRoot: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'center'
+        },
+        pagination: {
+            '.ms-CommandBar': {
+                paddingLeft: 0,
+                paddingRight: 0,
+            }
+        },
+        currentPageBtn: {
+            '.ms-Button-label': {
+                color: theme.semanticColors.bodyText
+            }
+        },
+        pageSizeBtnWrapper: {
+            flexGrow: 1,
+            display: 'flex',
+            '.ms-Button-label': {
+                whiteSpace: 'nowrap',
+            },
+            '.ms-Button': {
+                height: 44
+            }
+        },
+        pageSizeOption: {
+            '& .is-checked': {
+                backgroundColor: theme.semanticColors.buttonBackgroundHovered,
+                fontWeight: 600
+            }
+        }
+    });
+};
+
+export { getPagingStyles };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/DatasetControl/Paging/styles.ts"],"sourcesContent":["import { mergeStyleSets, ITheme } from \"@fluentui/react\";\n\nexport const getPagingStyles = (theme: ITheme) => {\n    return mergeStyleSets({\n        datasetPagingRoot: {\n            display: 'flex',\n            flexWrap: 'wrap',\n            justifyContent: 'center'\n        },\n        pagination: {\n            '.ms-CommandBar': {\n                paddingLeft: 0,\n                paddingRight: 0,\n            }\n        },\n        currentPageBtn: {\n            '.ms-Button-label': {\n                color: theme.semanticColors.bodyText\n            }\n        },\n        pageSizeBtnWrapper: {\n            flexGrow: 1,\n            display: 'flex',\n            '.ms-Button-label': {\n                whiteSpace: 'nowrap',\n            },\n            '.ms-Button': {\n                height: 44\n            }\n        },\n        pageSizeOption: {\n            '& .is-checked': {\n                backgroundColor: theme.semanticColors.buttonBackgroundHovered,\n                fontWeight: 600\n            }\n        }\n    });\n};"],"names":[],"mappings":";;AAEa,MAAA,eAAe,GAAG,CAAC,KAAa,KAAI;AAC7C,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,iBAAiB,EAAE;AACf,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,cAAc,EAAE,QAAQ;AAC3B,SAAA;AACD,QAAA,UAAU,EAAE;AACR,YAAA,gBAAgB,EAAE;AACd,gBAAA,WAAW,EAAE,CAAC;AACd,gBAAA,YAAY,EAAE,CAAC;AAClB,aAAA;AACJ,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,kBAAkB,EAAE;AAChB,gBAAA,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;AACvC,aAAA;AACJ,SAAA;AACD,QAAA,kBAAkB,EAAE;AAChB,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,kBAAkB,EAAE;AAChB,gBAAA,UAAU,EAAE,QAAQ;AACvB,aAAA;AACD,YAAA,YAAY,EAAE;AACV,gBAAA,MAAM,EAAE,EAAE;AACb,aAAA;AACJ,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,eAAe,EAAE;AACb,gBAAA,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,uBAAuB;AAC7D,gBAAA,UAAU,EAAE,GAAG;AAClB,aAAA;AACJ,SAAA;AACJ,KAAA,CAAC,CAAC;AACP;;;;"}