@talxis/base-controls 1.2507.2 → 1.2509.1-alpha.0

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,32 @@
+/// <reference types="@types/powerapps-component-framework" />
+/// <reference 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;
+    };
+}>;

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

@@ -0,0 +1,23 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getDatasetColumnFilteringStyles = () => {
+    return mergeStyleSets({
+        datasetColumnFilteringRoot: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 10
+        },
+        valueControlsContainer: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 5
+        },
+        buttons: {
+            display: 'flex',
+            gap: 5
+        }
+    });
+};
+
+export { getDatasetColumnFilteringStyles };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/DatasetControl/Filtering/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getDatasetColumnFilteringStyles = () => {\n    return mergeStyleSets({\n        datasetColumnFilteringRoot: {\n            display: 'flex',\n            flexDirection: 'column', \n            gap: 10\n        },\n        valueControlsContainer: {\n            display: 'flex',\n            flexDirection: 'column',\n            gap: 5\n        },\n        buttons: {\n            display: 'flex',\n            gap: 5\n        }\n    })\n}"],"names":[],"mappings":";;AAEO,MAAM,+BAA+B,GAAG,MAAK;AAChD,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,0BAA0B,EAAE;AACxB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,GAAG,EAAE,EAAE;AACV,SAAA;AACD,QAAA,sBAAsB,EAAE;AACpB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,GAAG,EAAE,CAAC;AACT,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,GAAG,EAAE,CAAC;AACT,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

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

@@ -0,0 +1,154 @@
+export declare const datasetColumnFilteringTranslations: {
+    "operator-6": {
+        1029: string;
+        1033: string;
+    };
+    "operator-7": {
+        1029: string;
+        1033: string;
+    };
+    "operator-0": {
+        1029: string;
+        1033: string;
+    };
+    "operator-1": {
+        1029: string;
+        1033: string;
+    };
+    "operator-13": {
+        1029: string;
+        1033: string;
+    };
+    "operator-12": {
+        1029: string;
+        1033: string;
+    };
+    "operator-14": {
+        1029: string;
+        1033: string;
+    };
+    "operator-15": {
+        1029: string;
+        1033: string;
+    };
+    "operator-16": {
+        1029: string;
+        1033: string;
+    };
+    "operator-17": {
+        1029: string;
+        1033: string;
+    };
+    "operator-18": {
+        1029: string;
+        1033: string;
+    };
+    "operator-19": {
+        1029: string;
+        1033: string;
+    };
+    "operator-20": {
+        1029: string;
+        1033: string;
+    };
+    "operator-22": {
+        1029: string;
+        1033: string;
+    };
+    "operator-23": {
+        1029: string;
+        1033: string;
+    };
+    "operator-25": {
+        1029: string;
+        1033: string;
+    };
+    "operator-26": {
+        1029: string;
+        1033: string;
+    };
+    "operator-27": {
+        1029: string;
+        1033: string;
+    };
+    "operator-28": {
+        1029: string;
+        1033: string;
+    };
+    "operator-29": {
+        1029: string;
+        1033: string;
+    };
+    "operator-33": {
+        1029: string;
+        1033: string;
+    };
+    "operator-34": {
+        1029: string;
+        1033: string;
+    };
+    "operator-37": {
+        1029: string;
+        1033: string;
+    };
+    "operator-38": {
+        1029: string;
+        1033: string;
+    };
+    "operator-2": {
+        1029: string;
+        1033: string;
+    };
+    "operator-4": {
+        1029: string;
+        1033: string;
+    };
+    "operator-5": {
+        1029: string;
+        1033: string;
+    };
+    "operator-3": {
+        1029: string;
+        1033: string;
+    };
+    "operator-87": {
+        1029: string;
+        1033: string;
+    };
+    "operator-88": {
+        1029: string;
+        1033: string;
+    };
+    "operator-54": {
+        1029: string;
+        1033: string;
+    };
+    "operator-55": {
+        1029: string;
+        1033: string;
+    };
+    "operator-56": {
+        1029: string;
+        1033: string;
+    };
+    "operator-57": {
+        1029: string;
+        1033: string;
+    };
+    "operator-8": {
+        1029: string;
+        1033: string;
+    };
+    "operator-9": {
+        1029: string;
+        1033: string;
+    };
+    "operator-10": {
+        1029: string;
+        1033: string;
+    };
+    "operator-11": {
+        1029: string;
+        1033: string;
+    };
+};

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

@@ -0,0 +1,43 @@
+const datasetColumnFilteringTranslations = {
+    "operator-6": { 1029: "Obsahuje", 1033: "Contains" },
+    "operator-7": { 1029: "Neobsahuje", 1033: "Does not contain" },
+    "operator-0": { 1029: "Je rovno", 1033: "Equals" },
+    "operator-1": { 1029: "Není rovno", 1033: "Does not equal" },
+    "operator-13": { 1029: "Obsahuje data", 1033: "Contains data" },
+    "operator-12": { 1029: "Neobsahuje data", 1033: "Does not contain data" },
+    "operator-14": { 1029: "Včera", 1033: "Yesterday" },
+    "operator-15": { 1029: "Dneska", 1033: "Today" },
+    "operator-16": { 1029: "Zítra", 1033: "Tomorrow" },
+    "operator-17": { 1029: "Posledních 7 dnů", 1033: "Last 7 days" },
+    "operator-18": { 1029: "Příštích 7 dnů", 1033: "Next 7 days" },
+    "operator-19": { 1029: "Minulý týden", 1033: "Last week" },
+    "operator-20": { 1029: "Tento týden", 1033: "This week" },
+    "operator-22": { 1029: "Minulý měsíc", 1033: "Last month" },
+    "operator-23": { 1029: "Tento měsíc", 1033: "This month" },
+    "operator-25": { 1029: "V den", 1033: "On" },
+    "operator-26": { 1029: "Před dnem (včetně)", 1033: "On or before" },
+    "operator-27": { 1029: "Po dni (včetně)", 1033: "On or after" },
+    "operator-28": { 1029: "Poslední rok", 1033: "Last year" },
+    "operator-29": { 1029: "Tento rok", 1033: "This year" },
+    "operator-33": { 1029: "Posledních X dnů", 1033: "Last X days" },
+    "operator-34": { 1029: "Příštích X dnů", 1033: "Next X days" },
+    "operator-37": { 1029: "Posledních X měsíců", 1033: "Last X months" },
+    "operator-38": { 1029: "Příštích X měsíců", 1033: "Next X months" },
+    "operator-2": { 1029: "Větší než", 1033: "Greater than" },
+    "operator-4": { 1029: "Větší než nebo rovno", 1033: "Greater than or equal to" },
+    "operator-5": { 1029: "Menší než nebo rovno", 1033: "Less than or equal to" },
+    "operator-3": { 1029: "Menší než", 1033: "Less than" },
+    "operator-87": { 1029: "Obsahuje hodnoty", 1033: "Contain values" },
+    "operator-88": { 1029: "Neobsahuje hodnoty", 1033: "Does not contain values" },
+    "operator-54": { 1029: "Začíná na", 1033: "Begins with" },
+    "operator-55": { 1029: "Nezačíná na", 1033: "Does not begin with" },
+    "operator-56": { 1029: "Končí na", 1033: "Ends with" },
+    "operator-57": { 1029: "Nekončí na", 1033: "Does not end with" },
+    "operator-8": { 1029: "Mezi", 1033: "In" },
+    "operator-9": { 1029: "Není mezi", 1033: "Not in" },
+    "operator-10": { 1029: "Mezi", 1033: "Between" },
+    "operator-11": { 1029: "Není mezi", 1033: "Not between" } // not-between
+};
+
+export { datasetColumnFilteringTranslations };
+//# sourceMappingURL=translations.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"translations.js","sources":["../../../../src/components/DatasetControl/Filtering/translations.ts"],"sourcesContent":["export const datasetColumnFilteringTranslations = {\n    \"operator-6\": { 1029: \"Obsahuje\", 1033: \"Contains\" }, // like\n    \"operator-7\": { 1029: \"Neobsahuje\", 1033: \"Does not contain\" }, // not-like\n    \"operator-0\": { 1029: \"Je rovno\", 1033: \"Equals\" }, // eq\n    \"operator-1\": { 1029: \"Není rovno\", 1033: \"Does not equal\" }, // ne\n    \"operator-13\": { 1029: \"Obsahuje data\", 1033: \"Contains data\" }, // not-null\n    \"operator-12\": { 1029: \"Neobsahuje data\", 1033: \"Does not contain data\" }, // null\n    \"operator-14\": { 1029: \"Včera\", 1033: \"Yesterday\" }, // yesterday\n    \"operator-15\": { 1029: \"Dneska\", 1033: \"Today\" }, // today\n    \"operator-16\": { 1029: \"Zítra\", 1033: \"Tomorrow\" }, // tomorrow\n    \"operator-17\": { 1029: \"Posledních 7 dnů\", 1033: \"Last 7 days\" }, // last-seven-days\n    \"operator-18\": { 1029: \"Příštích 7 dnů\", 1033: \"Next 7 days\" }, // next-seven-days\n    \"operator-19\": { 1029: \"Minulý týden\", 1033: \"Last week\" }, // last-week\n    \"operator-20\": { 1029: \"Tento týden\", 1033: \"This week\" }, // this-week\n    \"operator-22\": { 1029: \"Minulý měsíc\", 1033: \"Last month\" }, // last-month\n    \"operator-23\": { 1029: \"Tento měsíc\", 1033: \"This month\" }, // this-month\n    \"operator-25\": { 1029: \"V den\", 1033: \"On\" }, // on\n    \"operator-26\": { 1029: \"Před dnem (včetně)\", 1033: \"On or before\" }, // on-or-before\n    \"operator-27\": { 1029: \"Po dni (včetně)\", 1033: \"On or after\" }, // on-or-after\n    \"operator-28\": { 1029: \"Poslední rok\", 1033: \"Last year\" }, // last-year\n    \"operator-29\": { 1029: \"Tento rok\", 1033: \"This year\" }, // this-year\n    \"operator-33\": { 1029: \"Posledních X dnů\", 1033: \"Last X days\" }, // last-x-days\n    \"operator-34\": { 1029: \"Příštích X dnů\", 1033: \"Next X days\" }, // next-x-days\n    \"operator-37\": { 1029: \"Posledních X měsíců\", 1033: \"Last X months\" }, // last-x-months\n    \"operator-38\": { 1029: \"Příštích X měsíců\", 1033: \"Next X months\" }, // next-x-months\n    \"operator-2\": { 1029: \"Větší než\", 1033: \"Greater than\" }, // gt\n    \"operator-4\": { 1029: \"Větší než nebo rovno\", 1033: \"Greater than or equal to\" }, // ge\n    \"operator-5\": { 1029: \"Menší než nebo rovno\", 1033: \"Less than or equal to\" }, // le\n    \"operator-3\": { 1029: \"Menší než\", 1033: \"Less than\" }, // lt\n    \"operator-87\": { 1029: \"Obsahuje hodnoty\", 1033: \"Contain values\" }, // contain-values\n    \"operator-88\": { 1029: \"Neobsahuje hodnoty\", 1033: \"Does not contain values\" }, // not-contain-values\n    \"operator-54\": { 1029: \"Začíná na\", 1033: \"Begins with\" }, // begins-with\n    \"operator-55\": { 1029: \"Nezačíná na\", 1033: \"Does not begin with\" }, // not-begin-with\n    \"operator-56\": { 1029: \"Končí na\", 1033: \"Ends with\" }, // ends-with\n    \"operator-57\": { 1029: \"Nekončí na\", 1033: \"Does not end with\" }, // not-end-with\n    \"operator-8\": { 1029: \"Mezi\", 1033: \"In\" }, // in\n    \"operator-9\": { 1029: \"Není mezi\", 1033: \"Not in\" }, // not-in\n    \"operator-10\": { 1029: \"Mezi\", 1033: \"Between\" }, // between\n    \"operator-11\": { 1029: \"Není mezi\", 1033: \"Not between\" } // not-between\n};"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { IComponentProps } from "../interfaces";
+export declare const Header: (props: {
+    onRenderHeader: IComponentProps['onRenderHeader'];
+}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/components/DatasetControl/Header/Header.js

@@ -0,0 +1,89 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { MessageBarType, MessageBar } from '@fluentui/react';
+import { useModel } from '../useModel.js';
+import { useMemo } from 'react';
+import { getHeaderStyles } from './styles.js';
+import { useRerender } from '@talxis/react-components';
+import { QuickFind } from '../QuickFind/QuickFind.js';
+import { Ribbon } from '../../Ribbon/Ribbon.js';
+import { useEventEmitter } from '../../../hooks/useEventEmitter.js';
+
+const Header = (props) => {
+    const model = useModel();
+    const dataset = model.getDataset();
+    const rerender = useRerender();
+    const styles = useMemo(() => getHeaderStyles(), []);
+    useEventEmitter(dataset, 'onLoading', rerender);
+    useEventEmitter(model, 'onRecordCommandsLoaded', rerender);
+    const isHeaderVisible = () => {
+        switch (true) {
+            case model.isQuickFindVisible():
+            case dataset.error:
+            case model.isRibbonVisible():
+                {
+                    return true;
+                }
+            default: {
+                return false;
+            }
+        }
+    };
+    return props.onRenderHeader({
+        headerContainerProps: {
+            className: styles.header
+        },
+        onRenderErrorMessageBar: (props, defaultRender) => defaultRender(props),
+        onRenderRibbonQuickFindWrapper: (props, defaultRender) => defaultRender(props),
+        onRenderUnsavedChangesMessageBar: (props, defaultRender) => defaultRender(props)
+    }, (props) => {
+        if (!isHeaderVisible()) {
+            return jsx(Fragment, {});
+        }
+        return jsxs("div", { ...props.headerContainerProps, children: [props.onRenderRibbonQuickFindWrapper({
+                    ribbonQuickFindContainerProps: {
+                        className: styles.ribbonQuickFindContainer
+                    },
+                    onRenderQuickFind: (props, defaultRender) => defaultRender(props),
+                    onRenderRibbon: (props, defaultRender) => defaultRender(props)
+                }, (props) => {
+                    return jsxs("div", { ...props.ribbonQuickFindContainerProps, children: [model.isRibbonVisible() &&
+                                props.onRenderRibbon({
+                                    onRenderCommandBar: (props, defaultRender) => defaultRender(props),
+                                    onRenderLoading: (props, defaultRender) => defaultRender(props),
+                                }, (props) => {
+                                    return jsx(Ribbon, { context: {
+                                            ...model.getPcfContext(),
+                                            mode: {
+                                                ...model.getPcfContext().mode,
+                                                isControlDisabled: dataset.loading
+                                            }
+                                        }, parameters: {
+                                            Commands: {
+                                                raw: model.retrieveRecordCommands(),
+                                            },
+                                            Loading: {
+                                                raw: !model.areCommandsLoaded()
+                                            }
+                                        }, onOverrideComponentProps: (ribbonProps) => {
+                                            return {
+                                                ...ribbonProps,
+                                                onRenderLoading: (shimmerProps, defaultRender) => props.onRenderLoading(shimmerProps, (props) => defaultRender(props)),
+                                                onRenderCommandBar: (commandBarProps, defaultRender) => props.onRenderCommandBar(commandBarProps, (props) => defaultRender(props)),
+                                            };
+                                        } });
+                                }), model.isQuickFindVisible() &&
+                                jsx(QuickFind, { onRenderQuickFind: props.onRenderQuickFind })] });
+                }), dataset.error &&
+                    props.onRenderErrorMessageBar({
+                        messageBarProps: {
+                            messageBarType: MessageBarType.error
+                        },
+                        onRenderMessageBar: (props, defaultRender) => defaultRender(props)
+                    }, (props) => {
+                        return jsx(MessageBar, { ...props.messageBarProps, children: dataset.errorMessage });
+                    })] });
+    });
+};
+
+export { Header };
+//# sourceMappingURL=Header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../../src/components/DatasetControl/Header/Header.tsx"],"sourcesContent":["import { MessageBar, MessageBarType } from \"@fluentui/react\";\nimport { IComponentProps } from \"../interfaces\";\nimport { useModel } from \"../useModel\";\nimport { useMemo } from \"react\";\nimport { getHeaderStyles } from \"./styles\";\nimport { useRerender } from \"@talxis/react-components\";\nimport { QuickFind } from \"../QuickFind/QuickFind\";\nimport { Ribbon } from \"../../Ribbon/Ribbon\";\nimport { useEventEmitter } from \"../../../hooks/useEventEmitter\";\nimport { IDataProviderEventListeners } from \"@talxis/client-libraries\";\nimport { IDatasetControlModelEvents } from \"../DatasetControlModel\";\n\nexport const Header = (props: { onRenderHeader: IComponentProps['onRenderHeader'] }) => {\n    const model = useModel();\n    const dataset = model.getDataset();\n    const rerender = useRerender();\n    const styles = useMemo(() => getHeaderStyles(), []);\n    useEventEmitter<IDataProviderEventListeners>(dataset, 'onLoading', rerender);\n    useEventEmitter<IDatasetControlModelEvents>(model, 'onRecordCommandsLoaded', rerender);\n\n    const isHeaderVisible = () => {\n        switch (true) {\n            case model.isQuickFindVisible():\n            case dataset.error:\n            case model.isRibbonVisible():\n            {\n                return true;\n            }\n            default: {\n                return false;\n            }\n        }\n    }\n\n    return props.onRenderHeader({\n        headerContainerProps: {\n            className: styles.header\n        },\n        onRenderErrorMessageBar: (props, defaultRender) => defaultRender(props),\n        onRenderRibbonQuickFindWrapper: (props, defaultRender) => defaultRender(props),\n        onRenderUnsavedChangesMessageBar: (props, defaultRender) => defaultRender(props)\n    }, (props) => {\n        if (!isHeaderVisible()) {\n            return <></>\n        }\n        return <div {...props.headerContainerProps}>\n            {props.onRenderRibbonQuickFindWrapper({\n                ribbonQuickFindContainerProps: {\n                    className: styles.ribbonQuickFindContainer\n                },\n                onRenderQuickFind: (props, defaultRender) => defaultRender(props),\n                onRenderRibbon: (props, defaultRender) => defaultRender(props)\n            }, (props) => {\n                return <div {...props.ribbonQuickFindContainerProps}>\n                    {model.isRibbonVisible() &&\n                        props.onRenderRibbon({\n                            onRenderCommandBar: (props, defaultRender) => defaultRender(props),\n                            onRenderLoading: (props, defaultRender) => defaultRender(props),\n                        }, (props) => {\n                            return <Ribbon\n                                context={{\n                                    ...model.getPcfContext(),\n                                    mode: {\n                                        ...model.getPcfContext().mode,\n                                        isControlDisabled: dataset.loading\n                                    }\n                                }}\n                                parameters={{\n                                    Commands: {\n                                        raw: model.retrieveRecordCommands(),\n                                    },\n                                    Loading: {\n                                        raw: !model.areCommandsLoaded()\n                                    }\n                                }}\n                                onOverrideComponentProps={(ribbonProps) => {\n                                    return {\n                                        ...ribbonProps,\n                                        onRenderLoading: (shimmerProps, defaultRender) => props.onRenderLoading(shimmerProps, (props) => defaultRender(props)),\n                                        onRenderCommandBar: (commandBarProps, defaultRender) => props.onRenderCommandBar(commandBarProps, (props) => defaultRender(props)),\n                                    }\n                                }}\n                            />\n                        })\n                    }\n                    {model.isQuickFindVisible() &&\n                        <QuickFind\n                            onRenderQuickFind={props.onRenderQuickFind} />\n                    }\n                </div>\n            })}\n            {dataset.error &&\n                props.onRenderErrorMessageBar({\n                    messageBarProps: {\n                        messageBarType: MessageBarType.error\n                    },\n                    onRenderMessageBar: (props, defaultRender) => defaultRender(props)\n\n                }, (props) => {\n                    return <MessageBar {...props.messageBarProps}>\n                        {dataset.errorMessage}\n                    </MessageBar>\n                })\n            }\n            {/* {model.isUnsavedChangesMessageBarVisible() &&\n                props.onRenderUnsavedChangesMessageBar({\n                    messageBarProps: {\n                        messageBarType: dataset.isValid() ? MessageBarType.info : MessageBarType.error,\n                        isMultiline: false\n                    },\n                    onRenderSaveBtn: (props, defaultRender) => defaultRender(props),\n                    onRenderDiscardBtn: (props, defaultRender) => defaultRender(props)\n                }, (props) => {\n                    return <MessageBar actions={\n                        <>\n                            {props.onRenderDiscardBtn({\n                                text: 'Discard changes',\n                                iconProps: {\n                                    iconName: 'Cancel'\n                                },\n                                disabled: dataset.loading,\n                                styles: {\n                                    root: styles.unsavedChangesMessageBarBtn\n                                },\n                                onClick: () => dataset.refresh(),\n                            }, (props) => {\n                                return <ActionButton {...props} />\n                            })}\n                            {props.onRenderSaveBtn({\n                                text: 'Save',\n                                disabled: dataset.loading || !dataset.isValid(),\n                                iconProps: {\n                                    iconName: 'Save'\n                                },\n                                styles: {\n                                    root: styles.unsavedChangesMessageBarBtn\n                                },\n                                onClick: saveChanges,\n                            }, (props) => {\n                                return <ActionButton {...props} />\n                            })}\n                        </>\n                    } {...props.messageBarProps}>\n                        <div dangerouslySetInnerHTML={{\n                            __html: labels[\"unsaved-changes\"]({\n                                numOfChanges: dataset.getDataProvider().getDirtyRecordIds().length\n                            })\n                        }} />\n                    </MessageBar>\n                })\n            } */}\n        </div>\n    })\n}"],"names":["_jsx","_jsxs"],"mappings":"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"}

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

@@ -0,0 +1,22 @@
+export declare const getHeaderStyles: () => import("@fluentui/react").IProcessedStyleSet<{
+    ribbonQuickFindContainer: {
+        display: string;
+        alignItems: string;
+        gap: number;
+    };
+    ribbon: {
+        flex: number;
+    };
+    header: {
+        paddingLeft: number;
+        paddingTop: number;
+        paddingRight: number;
+        marginBottom: number;
+        display: string;
+        flexDirection: string;
+        gap: number;
+    };
+    unsavedChangesMessageBarBtn: {
+        height: number;
+    };
+}>;

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

@@ -0,0 +1,29 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getHeaderStyles = () => {
+    return mergeStyleSets({
+        ribbonQuickFindContainer: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8
+        },
+        ribbon: {
+            flex: 1
+        },
+        header: {
+            paddingLeft: 15,
+            paddingTop: 15,
+            paddingRight: 15,
+            marginBottom: 15,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 8
+        },
+        unsavedChangesMessageBarBtn: {
+            height: 32
+        }
+    });
+};
+
+export { getHeaderStyles };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/DatasetControl/Header/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\";\n\nexport const getHeaderStyles = () => {\n    return mergeStyleSets({\n        ribbonQuickFindContainer: {\n            display: 'flex',\n            alignItems: 'center',\n            gap: 8\n        },\n        ribbon: {\n            flex: 1\n        },\n        header: {\n            paddingLeft: 15,\n            paddingTop: 15,\n            paddingRight: 15,\n            marginBottom: 15,\n            display: 'flex',\n            flexDirection: 'column',\n            gap: 8\n        },\n        unsavedChangesMessageBarBtn: {\n            height: 32\n        }\n    });\n}"],"names":[],"mappings":";;AAEO,MAAM,eAAe,GAAG,MAAK;AAChC,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,wBAAwB,EAAE;AACtB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,GAAG,EAAE,CAAC;AACT,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,IAAI,EAAE,CAAC;AACV,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,WAAW,EAAE,EAAE;AACf,YAAA,UAAU,EAAE,EAAE;AACd,YAAA,YAAY,EAAE,EAAE;AAChB,YAAA,YAAY,EAAE,EAAE;AAChB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,GAAG,EAAE,CAAC;AACT,SAAA;AACD,QAAA,2BAA2B,EAAE;AACzB,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACJ,KAAA,CAAC,CAAC;AACP;;;;"}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { IFooterProps } from "../interfaces";
+export declare const Pagination: (props: {
+    onRenderPagination: IFooterProps['onRenderPagination'];
+}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/components/DatasetControl/Pagination/Pagination.js

@@ -0,0 +1,91 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTheme, ContextualMenuItemType, CommandBarButton } from '@fluentui/react';
+import { useModel } from '../useModel.js';
+import { getPaginationStyles } from './styles.js';
+import { useMemo } from 'react';
+import { CommandBar } from '@talxis/react-components';
+import { PaginationModel } from './PaginationModel.js';
+
+const PAGE_SIZE_OPTIONS = ['25', '50', '75', '100', '250'];
+const Pagination = (props) => {
+    const model = useModel();
+    const paginationModel = useMemo(() => new PaginationModel(model), []);
+    const dataset = model.getDataset();
+    const labels = model.getLabels();
+    const paging = dataset.paging;
+    const theme = useTheme();
+    const styles = useMemo(() => getPaginationStyles(theme), [theme]);
+    const onSetPageSize = (pageSize) => {
+        paging.setPageSize(pageSize);
+        dataset.refresh();
+    };
+    return props.onRenderPagination({
+        pageSizeSwitcherProps: {
+            disabled: !model.isPageSizeSwitcherVisible() || dataset.loading,
+            text: paginationModel.toString(),
+            styles: {
+                root: styles.pageSizeSwitcherRoot,
+            },
+            menuProps: {
+                items: [
+                    {
+                        key: 'header',
+                        itemType: ContextualMenuItemType.Header,
+                        text: labels['page-record-count'](),
+                    },
+                    {
+                        key: 'divider',
+                        itemType: ContextualMenuItemType.Divider,
+                    },
+                    ...PAGE_SIZE_OPTIONS.map((size) => ({
+                        key: size,
+                        text: size,
+                        checked: parseInt(size) === paging.pageSize,
+                        className: 'pageSizeOption',
+                        onClick: () => dataset.getDataProvider().executeWithUnsavedChangesBlocker(() => onSetPageSize(parseInt(size)))
+                    }))
+                ]
+            }
+        },
+        paginationContainerProps: {
+            className: styles.paginationRoot
+        },
+        commandBarProps: {
+            className: styles.commandBarRoot,
+            items: [],
+            farItems: [{
+                    key: 'FirstPage',
+                    iconOnly: true,
+                    iconProps: { iconName: 'DoubleChevronLeft' },
+                    disabled: !paging.hasPreviousPage || dataset.loading,
+                    onClick: () => dataset.getDataProvider().executeWithUnsavedChangesBlocker(() => paging.reset())
+                }, {
+                    key: 'PreviousPage',
+                    iconOnly: true,
+                    iconProps: { iconName: 'Back' },
+                    disabled: !paging.hasPreviousPage || dataset.loading,
+                    onClick: () => dataset.getDataProvider().executeWithUnsavedChangesBlocker(() => paging.loadExactPage(paging.pageNumber - 1))
+                }, {
+                    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: () => dataset.getDataProvider().executeWithUnsavedChangesBlocker(() => paging.loadExactPage(paging.pageNumber + 1))
+                }]
+        },
+        onRenderCommandBar: (props, defaultRender) => defaultRender(props),
+        onRenderPageSizeSwitcher: (props, defaultRender) => defaultRender(props),
+    }, (props) => {
+        return jsxs("div", { ...props.paginationContainerProps, children: [(model.isPageSizeSwitcherVisible() || model.isRecordCountVisible()) &&
+                    jsx(CommandBarButton, { ...props.pageSizeSwitcherProps }), model.isPaginationVisible() &&
+                    jsx(CommandBar, { ...props.commandBarProps })] });
+    });
+};
+
+export { Pagination };
+//# sourceMappingURL=Pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":["../../../../src/components/DatasetControl/Pagination/Pagination.tsx"],"sourcesContent":["import { CommandBarButton, ContextualMenuItemType, useTheme } from \"@fluentui/react\";\nimport { IFooterProps } from \"../interfaces\";\nimport { useModel } from \"../useModel\";\nimport { getPaginationStyles } from \"./styles\";\nimport { useMemo } from \"react\";\nimport { CommandBar } from \"@talxis/react-components\";\nimport { PaginationModel } from \"./PaginationModel\";\n\nconst PAGE_SIZE_OPTIONS = ['25', '50', '75', '100', '250'];\n\nexport const Pagination = (props: { onRenderPagination: IFooterProps['onRenderPagination'] }) => {\n  const model = useModel();\n  const paginationModel = useMemo(() => new PaginationModel(model), []);\n  const dataset = model.getDataset();\n  const labels = model.getLabels();\n  const paging = dataset.paging;\n  const theme = useTheme();\n  const styles = useMemo(() => getPaginationStyles(theme), [theme]);\n\n  const onSetPageSize = (pageSize: number) => {\n    paging.setPageSize(pageSize);\n    dataset.refresh();\n  }\n\n\n  return props.onRenderPagination({\n    pageSizeSwitcherProps: {\n      disabled: !model.isPageSizeSwitcherVisible() || dataset.loading,\n      text: paginationModel.toString(),\n      styles: {\n        root: styles.pageSizeSwitcherRoot,\n      },\n      menuProps: {\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          ...PAGE_SIZE_OPTIONS.map((size) => ({\n            key: size,\n            text: size,\n            checked: parseInt(size) === paging.pageSize,\n            className: 'pageSizeOption',\n            onClick: () => dataset.getDataProvider().executeWithUnsavedChangesBlocker(() => onSetPageSize(parseInt(size)))\n          }))\n\n        ]\n      }\n    },\n    paginationContainerProps: {\n      className: styles.paginationRoot\n    },\n    commandBarProps: {\n      className: styles.commandBarRoot,\n      items: [],\n      farItems: [{\n        key: 'FirstPage',\n        iconOnly: true,\n        iconProps: { iconName: 'DoubleChevronLeft' },\n        disabled: !paging.hasPreviousPage || dataset.loading,\n        onClick: () => dataset.getDataProvider().executeWithUnsavedChangesBlocker(() => paging.reset())\n      }, {\n        key: 'PreviousPage',\n        iconOnly: true,\n        iconProps: { iconName: 'Back' },\n        disabled: !paging.hasPreviousPage || dataset.loading,\n        onClick: () => dataset.getDataProvider().executeWithUnsavedChangesBlocker(() => paging.loadExactPage(paging.pageNumber - 1))\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: () => dataset.getDataProvider().executeWithUnsavedChangesBlocker(() => paging.loadExactPage(paging.pageNumber + 1))\n      }]\n    },\n    onRenderCommandBar: (props, defaultRender) => defaultRender(props),\n    onRenderPageSizeSwitcher: (props, defaultRender) => defaultRender(props),\n  }, (props) => {\n    return <div {...props.paginationContainerProps}>\n      {(model.isPageSizeSwitcherVisible() || model.isRecordCountVisible()) &&\n        <CommandBarButton {...props.pageSizeSwitcherProps} />\n      }\n      {model.isPaginationVisible() &&\n        <CommandBar {...props.commandBarProps} />\n      }\n    </div>\n  })\n}"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+import { DatasetControlModel } from "../DatasetControlModel";
+export declare class PaginationModel {
+    private _model;
+    constructor(model: DatasetControlModel);
+    toString(): string;
+    private _getPageFirstRecordOrder;
+    private _getFormattedTotalResultCount;
+    private _getPageLastRecordOrder;
+    private get _paging();
+}