@talxis/base-controls 1.2509.6 → 1.2512.1

package/dist/components/GridColumnHeader/GridColumnHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridColumnHeader.js","sources":["../../../src/components/GridColumnHeader/GridColumnHeader.tsx"],"sourcesContent":["import { CommandBarButton, ThemeProvider, Text, Icon } from \"@fluentui/react\";\nimport { useControl } from \"../../hooks\";\nimport { IGridColumnHeader } from \"./interfaces\";\nimport { useMemo, useRef } from \"react\";\nimport { GridColumnHeaderModel } from \"./GridColumnHeaderModel\";\nimport { getGridColumnHeaderStyles } from \"./styles\";\nimport { Autosum20Regular, GroupList20Regular } from \"@fluentui/react-icons\";\nimport { gridColumnHeaderTranslations } from \"./translations\";\n\nexport const GridColumnHeader = (props: IGridColumnHeader) => {\n    const { theme, labels } = useControl('GridColumnHeader', props, gridColumnHeaderTranslations);\n    const propsRef = useRef<IGridColumnHeader>(props);\n    propsRef.current = props;\n\n    const model = useMemo(() => new GridColumnHeaderModel({\n        getLabels: () => labels,\n        getProps: () => propsRef.current\n    }), []);\n    const styles = useMemo(() => getGridColumnHeaderStyles(theme, model.getColumn().alignment!), [\n        theme,\n        model.getColumn().alignment!\n    ]);\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n\n    const componentProps = onOverrideComponentProps({\n        onRender: (props, defaultRender) => defaultRender(props)\n    })\n\n    const getSortIconName = () => {\n        if (model.isSortedAsc()) {\n            return 'SortUp';\n        } else if (model.isSortedDesc()) {\n            return 'SortDown';\n        }\n        return undefined;\n    }\n\n    const getTitle = () => {\n        let title = model.getColumn().displayName;\n        if (model.isAggregated()) {\n            title += ` (${model.getAggregationLabel()})`;\n        }\n        return title;\n    }\n\n    return componentProps.onRender({\n        container: {\n            theme: theme\n        },\n        onRenderCommandBarButton: (props, defaultRender) => defaultRender(props),\n    }, (props) => {\n        return <ThemeProvider {...props.container}>\n            {props.onRenderCommandBarButton({\n                buttonProps: {\n                    styles: {\n                        root: styles.commandBarButtonRoot,\n                        flexContainer: styles.commandBarButtonFlexContainer\n                    },\n                    title: getTitle()\n                },\n                onRenderColumnDisplayNameContainer: (props, defaultRender) => defaultRender(props),\n                onRenderSuffixIconContainer: (props, defaultRender) => defaultRender(props),\n            }, (props) => {\n                return <CommandBarButton {...props.buttonProps}>\n                    {props.onRenderColumnDisplayNameContainer({\n                        container: {\n                            className: styles.columnDisplayNameContainer,\n                        },\n                        onRenderColumnDisplayName: (props, defaultRender) => defaultRender(props),\n                        onRenderRequiredSymbol: (props, defaultRender) => defaultRender(props),\n                        onRenderGroupingIcon: (props, defaultRender) => defaultRender(props),\n\n                    }, (props) => {\n                        return <div {...props.container}>\n                            {props.onRenderGroupingIcon({\n                                className: `${styles.svgIcon}`\n                            }, (props) => {\n                                if (model.isGrouped()) {\n                                    return <GroupList20Regular {...props} />\n                                }\n                                return <></>\n                            })}\n                            {props.onRenderColumnDisplayName({\n                                children: model.getColumn().displayName,\n                                styles: {\n                                    root: styles.columnDisplayNameText\n                                }\n                            }, (props) => {\n                                return <Text {...props} />\n                            })}\n                            {props.onRenderRequiredSymbol({\n                                children: '*',\n                                className: styles.asterix\n                            }, (props) => {\n                                if (model.isRequired()) {\n                                    return <Text {...props} />\n                                }\n                                return <></>\n                            })}\n                        </div>\n                    })}\n                    {props.onRenderSuffixIconContainer({\n                        container: {\n                            className: styles.suffixIconsContainer\n                        },\n                        onRenderFilterIcon: (props, defaultRender) => defaultRender(props),\n                        onRenderSortIcon: (props, defaultRender) => defaultRender(props),\n                        onRenderUneditableIcon: (props, defaultRender) => defaultRender(props),\n                        onRenderSumIcon: (props, defaultRender) => defaultRender(props),\n                    }, (props) => {\n                        return <div {...props.container}>\n                            {props.onRenderSortIcon({\n                                iconName: getSortIconName()\n                            }, (props) => {\n                                if (props.iconName) {\n                                    return <Icon {...props} />\n                                }\n                                return <></>\n                            })}\n                            {props.onRenderFilterIcon({\n                                iconName: 'Filter'\n                            }, (props) => {\n                                if (model.isFiltered()) {\n                                    return <Icon {...props} />\n                                }\n                                return <></>\n                            })}\n                            {props.onRenderUneditableIcon({\n                                iconName: 'Uneditable'\n                            }, (props) => {\n                                if (model.isUneditableIconVisible()) {\n                                    return <Icon {...props} />\n                                }\n                                return <></>\n                            })}\n                            {props.onRenderSumIcon({\n                                className: `${styles.svgIcon} ${styles.aggregationIcon}`\n                            }, (props) => {\n                                if (model.isAggregated()) {\n                                    return <Autosum20Regular {...props} />\n                                }\n                                return <></>\n                            })}\n                        </div>\n                    })}\n                </CommandBarButton>\n            })}\n        </ThemeProvider>\n    })\n\n}"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/GridColumnHeader/GridColumnHeaderModel.d.ts

@@ -0,0 +1,26 @@
+import { ITranslation } from "../../hooks";
+import { IGridColumnHeader } from "./interfaces";
+import { gridColumnHeaderTranslations } from "./translations";
+type Labels = Required<ITranslation<typeof gridColumnHeaderTranslations>>;
+interface IDeps {
+    getProps: () => IGridColumnHeader;
+    getLabels: () => Labels;
+}
+export declare class GridColumnHeaderModel {
+    private _getProps;
+    private _getLabels;
+    constructor(deps: IDeps);
+    getColumn(): import("@talxis/client-libraries").IColumn;
+    isGrouped(): boolean;
+    isSortedAsc(): boolean;
+    isSortedDesc(): boolean;
+    isUneditableIconVisible(): boolean;
+    isFiltered(): boolean;
+    isRequired(): boolean;
+    getAggregationLabel(): string | undefined;
+    isAggregated(): boolean;
+    getDataset(): import("@talxis/client-libraries").IDataset;
+    private _getSorting;
+    private get _labels();
+}
+export {};

package/dist/components/GridColumnHeader/GridColumnHeaderModel.js

@@ -0,0 +1,85 @@
+class GridColumnHeaderModel {
+    constructor(deps) {
+        this._getProps = deps.getProps;
+        this._getLabels = deps.getLabels;
+    }
+    getColumn() {
+        return this._getProps().parameters.Column.raw;
+    }
+    isGrouped() {
+        return !!this.getColumn().grouping?.isGrouped;
+    }
+    isSortedAsc() {
+        return this._getSorting()?.sortDirection === 0;
+    }
+    isSortedDesc() {
+        return this._getSorting()?.sortDirection === 1;
+    }
+    isUneditableIconVisible() {
+        switch (true) {
+            case !this._getProps().parameters.EnableEditing?.raw:
+            case this.getColumn().type === 'action': {
+                return false;
+            }
+        }
+        return !this.getColumn().metadata?.IsValidForUpdate;
+    }
+    isFiltered() {
+        const filtering = this._getProps().parameters.Filtering.raw;
+        return filtering.getColumnFilter(this.getColumn().name).isAppliedToDataset();
+    }
+    isRequired() {
+        if (!this._getProps().parameters.EnableEditing?.raw) {
+            return false;
+        }
+        switch (this.getColumn().metadata?.RequiredLevel) {
+            case 1:
+            case 2: {
+                return true;
+            }
+            default: {
+                return false;
+            }
+        }
+    }
+    getAggregationLabel() {
+        switch (this.getColumn().aggregation?.aggregationFunction) {
+            case 'avg': {
+                return this._labels.avg();
+            }
+            case 'max': {
+                return this._labels.max();
+            }
+            case 'min': {
+                return this._labels.min();
+            }
+            case 'sum': {
+                return this._labels.sum();
+            }
+            case 'count': {
+                return this._labels.count();
+            }
+            case 'countcolumn': {
+                return this._labels.countcolumn();
+            }
+        }
+    }
+    isAggregated() {
+        if (this.getColumn().grouping?.isGrouped) {
+            return false;
+        }
+        return !!this.getColumn().aggregation?.aggregationFunction;
+    }
+    getDataset() {
+        return this._getProps().parameters.Dataset.raw;
+    }
+    _getSorting() {
+        return this.getDataset().sorting.find(sort => sort.name === this.getColumn().name);
+    }
+    get _labels() {
+        return this._getLabels();
+    }
+}
+
+export { GridColumnHeaderModel };
+//# sourceMappingURL=GridColumnHeaderModel.js.map

package/dist/components/GridColumnHeader/GridColumnHeaderModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridColumnHeaderModel.js","sources":["../../../src/components/GridColumnHeader/GridColumnHeaderModel.ts"],"sourcesContent":["import { Attribute } from \"@talxis/client-libraries\";\nimport { ITranslation } from \"../../hooks\";\nimport { IGridColumnHeader } from \"./interfaces\";\nimport { gridColumnHeaderTranslations } from \"./translations\";\n\ntype Labels = Required<ITranslation<typeof gridColumnHeaderTranslations>>;\n\ninterface IDeps {\n    getProps: () => IGridColumnHeader;\n    getLabels: () => Labels;\n}\n\nexport class GridColumnHeaderModel {\n    private _getProps: () => IGridColumnHeader;\n    private _getLabels: () => Labels\n\n    constructor(deps: IDeps) {\n        this._getProps = deps.getProps;\n        this._getLabels = deps.getLabels;\n    }\n\n    public getColumn() {\n        return this._getProps().parameters.Column.raw;\n    }\n\n    public isGrouped() {\n        return !!this.getColumn().grouping?.isGrouped\n    }\n    public isSortedAsc() {\n        return this._getSorting()?.sortDirection === 0;\n    }\n    public isSortedDesc() {\n        return this._getSorting()?.sortDirection === 1;\n    }\n    public isUneditableIconVisible() {\n        switch (true) {\n            case !this._getProps().parameters.EnableEditing?.raw:\n            case this.getColumn().type === 'action': {\n                return false;\n            }\n        }\n        return !this.getColumn().metadata?.IsValidForUpdate\n    }\n    public isFiltered() {\n        const filtering = this._getProps().parameters.Filtering.raw;\n        return filtering.getColumnFilter(this.getColumn().name).isAppliedToDataset()\n    }\n    public isRequired() {\n        if (!this._getProps().parameters.EnableEditing?.raw) {\n            return false;\n        }\n        switch (this.getColumn().metadata?.RequiredLevel) {\n            case 1:\n            case 2: {\n                return true;\n            }\n            default: {\n                return false;\n            }\n        }\n    }\n    public getAggregationLabel() {\n        switch (this.getColumn().aggregation?.aggregationFunction) {\n            case 'avg': {\n                return this._labels.avg();\n            }\n            case 'max': {\n                return this._labels.max();\n            }\n            case 'min': {\n                return this._labels.min();\n            }\n            case 'sum': {\n                return this._labels.sum();\n            }\n            case 'count': {\n                return this._labels.count()\n            }\n            case 'countcolumn': {\n                return this._labels.countcolumn()\n            }\n            default: {\n                undefined;\n            }\n        }\n    }\n    public isAggregated() {\n        if (this.getColumn().grouping?.isGrouped) {\n            return false;\n        }\n        return !!this.getColumn().aggregation?.aggregationFunction;\n    }\n    public getDataset() {\n        return this._getProps().parameters.Dataset.raw;\n    }\n    private _getSorting() {\n        return this.getDataset().sorting.find(sort => sort.name === this.getColumn().name);\n    }\n    private get _labels() {\n        return this._getLabels();\n    }\n}"],"names":[],"mappings":"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"}

package/dist/components/GridColumnHeader/interfaces.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+import { Filtering, IColumn, IDataset } from "@talxis/client-libraries";
+import { IControl, IParameters, ITwoOptionsProperty } from "../../interfaces";
+import { IButtonProps, IIconProps, ITextProps, ThemeProviderProps } from "@fluentui/react";
+import { gridColumnHeaderTranslations } from "./translations";
+export interface IGridColumnHeader extends IControl<IGridColumnHeaderParameters, any, typeof gridColumnHeaderTranslations, IGridColumnHeaderComponentProps> {
+}
+interface IGridColumnHeaderComponentProps {
+    onRender: (props: IComponentProps, defaultRender: (props: IComponentProps) => React.ReactElement) => React.ReactElement;
+}
+interface IComponentProps {
+    container: ThemeProviderProps;
+    onRenderCommandBarButton: (props: ICommandBarButtonProps, defaultRender: (props: ICommandBarButtonProps) => React.ReactElement) => React.ReactElement;
+}
+interface ICommandBarButtonProps {
+    buttonProps: IButtonProps;
+    onRenderColumnDisplayNameContainer: (props: IColumnDisplayNameContainerProps, defaultRender: (props: IColumnDisplayNameContainerProps) => React.ReactElement) => React.ReactElement;
+    onRenderSuffixIconContainer: (props: ISuffixIcons, defaultRender: (props: ISuffixIcons) => React.ReactElement) => React.ReactElement;
+}
+interface IColumnDisplayNameContainerProps {
+    container: React.HTMLAttributes<HTMLDivElement>;
+    onRenderGroupingIcon: (props: React.SVGAttributes<SVGElement>, defaultRender: (props: React.SVGAttributes<SVGElement>) => React.ReactElement) => React.ReactElement;
+    onRenderColumnDisplayName: (props: ITextProps, defaultRender: (props: ITextProps) => React.ReactElement) => React.ReactElement;
+    onRenderRequiredSymbol: (props: ITextProps, defaultRender: (props: ITextProps) => React.ReactElement) => React.ReactElement;
+}
+interface ISuffixIcons {
+    container: React.HTMLAttributes<HTMLDivElement>;
+    onRenderSortIcon: (props: IIconProps, defaultRender: (props: IIconProps) => React.ReactElement) => React.ReactElement;
+    onRenderFilterIcon: (props: IIconProps, defaultRender: (props: IIconProps) => React.ReactElement) => React.ReactElement;
+    onRenderUneditableIcon: (props: IIconProps, defaultRender: (props: IIconProps) => React.ReactElement) => React.ReactElement;
+    onRenderSumIcon: (props: React.SVGAttributes<SVGElement>, defaultRender: (props: React.SVGAttributes<SVGElement>) => React.ReactElement) => React.ReactElement;
+}
+export interface IGridColumnHeaderParameters extends IParameters {
+    Dataset: {
+        raw: IDataset;
+    };
+    Column: {
+        raw: IColumn;
+    };
+    Filtering: {
+        raw: Filtering;
+    };
+    /**
+     * Should correspond to the `EnableEditing` property in the Grid control.
+     */
+    EnableEditing?: Omit<ITwoOptionsProperty, 'attributes'>;
+}
+export {};

package/dist/components/GridColumnHeader/styles.d.ts

@@ -0,0 +1,37 @@
+import { ITheme } from "@fluentui/react";
+import { IColumn } from "@talxis/client-libraries";
+export declare const getGridColumnHeaderStyles: (theme: ITheme, alignment: Required<IColumn['alignment']>) => import("@fluentui/react").IProcessedStyleSet<{
+    commandBarButtonRoot: {
+        width: string;
+        height: number;
+        paddingLeft: number;
+        paddingRight: number;
+        overflow: string;
+    };
+    commandBarButtonFlexContainer: {
+        gap: number;
+    };
+    columnDisplayNameText: {
+        fontWeight: number;
+        textOverflow: string;
+        overflow: string;
+    };
+    asterix: {
+        color: string;
+    };
+    svgIcon: {
+        minWidth: number;
+    };
+    aggregationIcon: {};
+    suffixIconsContainer: {
+        display: string;
+        alignItems: string;
+    };
+    columnDisplayNameContainer: {
+        display: string;
+        flex: number;
+        overflow: string;
+        justifyContent: string | undefined;
+        order: number | undefined;
+    };
+}>;

package/dist/components/GridColumnHeader/styles.js

@@ -0,0 +1,55 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getGridColumnHeaderStyles = (theme, alignment) => {
+    return mergeStyleSets({
+        commandBarButtonRoot: {
+            width: '100%',
+            height: 42,
+            paddingLeft: 10,
+            paddingRight: 10,
+            overflow: 'hidden'
+        },
+        commandBarButtonFlexContainer: {
+            gap: 5
+        },
+        columnDisplayNameText: {
+            fontWeight: 600,
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+        },
+        asterix: {
+            color: theme.semanticColors.errorText
+        },
+        svgIcon: {
+            minWidth: 20
+        },
+        aggregationIcon: {},
+        suffixIconsContainer: {
+            display: 'flex',
+            alignItems: 'center'
+        },
+        columnDisplayNameContainer: {
+            display: 'flex',
+            flex: 1,
+            overflow: 'hidden',
+            justifyContent: getJustifyContent(alignment),
+            order: alignment === 'right' ? 2 : undefined
+        }
+    });
+};
+const getJustifyContent = (alignment) => {
+    switch (alignment) {
+        case 'left': {
+            return 'flex-start';
+        }
+        case 'center': {
+            return 'center';
+        }
+        case 'right': {
+            return 'flex-end';
+        }
+    }
+};
+
+export { getGridColumnHeaderStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/GridColumnHeader/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/GridColumnHeader/styles.ts"],"sourcesContent":["import { ITheme, mergeStyleSets } from \"@fluentui/react\"\nimport { IColumn } from \"@talxis/client-libraries\"\n\nexport const getGridColumnHeaderStyles = (theme: ITheme, alignment: Required<IColumn['alignment']>) => {\n    return mergeStyleSets({\n        commandBarButtonRoot: {\n            width: '100%',\n            height: 42,\n            paddingLeft: 10,\n            paddingRight: 10,\n            overflow: 'hidden'\n        },\n        commandBarButtonFlexContainer: {\n            gap: 5\n        },\n        columnDisplayNameText: {\n            fontWeight: 600,\n            textOverflow: 'ellipsis',\n            overflow: 'hidden',\n        },\n        asterix: {\n            color: theme.semanticColors.errorText\n        },\n        svgIcon: {\n            minWidth: 20\n        },\n        aggregationIcon: {\n        },\n        suffixIconsContainer: {\n            display: 'flex',\n            alignItems: 'center'\n        },\n        columnDisplayNameContainer: {\n            display: 'flex',\n            flex: 1,\n            overflow: 'hidden',\n            justifyContent: getJustifyContent(alignment),\n            order: alignment === 'right' ? 2 : undefined\n        }\n    })\n}\n\nconst getJustifyContent = (alignment: Required<IColumn['alignment']>) => {\n    switch (alignment) {\n        case 'left': {\n            return 'flex-start';\n        }\n        case 'center': {\n            return 'center';\n        }\n        case 'right': {\n            return 'flex-end';\n        }\n        default: {\n            undefined\n        }\n    }\n}"],"names":[],"mappings":";;MAGa,yBAAyB,GAAG,CAAC,KAAa,EAAE,SAAyC,KAAI;AAClG,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,oBAAoB,EAAE;AAClB,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,WAAW,EAAE,EAAE;AACf,YAAA,YAAY,EAAE,EAAE;AAChB,YAAA,QAAQ,EAAE,QAAQ;AACrB,SAAA;AACD,QAAA,6BAA6B,EAAE;AAC3B,YAAA,GAAG,EAAE,CAAC;AACT,SAAA;AACD,QAAA,qBAAqB,EAAE;AACnB,YAAA,UAAU,EAAE,GAAG;AACf,YAAA,YAAY,EAAE,UAAU;AACxB,YAAA,QAAQ,EAAE,QAAQ;AACrB,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS;AACxC,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,QAAQ,EAAE,EAAE;AACf,SAAA;AACD,QAAA,eAAe,EAAE,EAChB;AACD,QAAA,oBAAoB,EAAE;AAClB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,QAAQ;AACvB,SAAA;AACD,QAAA,0BAA0B,EAAE;AACxB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,cAAc,EAAE,iBAAiB,CAAC,SAAS,CAAC;YAC5C,KAAK,EAAE,SAAS,KAAK,OAAO,GAAG,CAAC,GAAG,SAAS;AAC/C,SAAA;AACJ,KAAA,CAAC,CAAA;AACN,EAAC;AAED,MAAM,iBAAiB,GAAG,CAAC,SAAyC,KAAI;AACpE,IAAA,QAAQ,SAAS;QACb,KAAK,MAAM,EAAE;AACT,YAAA,OAAO,YAAY,CAAC;AACvB,SAAA;QACD,KAAK,QAAQ,EAAE;AACX,YAAA,OAAO,QAAQ,CAAC;AACnB,SAAA;QACD,KAAK,OAAO,EAAE;AACV,YAAA,OAAO,UAAU,CAAC;AACrB,SAAA;AAIJ,KAAA;AACL,CAAC;;;;"}

package/dist/components/GridColumnHeader/translations.d.ts

@@ -0,0 +1,26 @@
+export declare const gridColumnHeaderTranslations: {
+    max: {
+        1029: string;
+        1033: string;
+    };
+    min: {
+        1029: string;
+        1033: string;
+    };
+    avg: {
+        1029: string;
+        1033: string;
+    };
+    sum: {
+        1029: string;
+        1033: string;
+    };
+    count: {
+        1029: string;
+        1033: string;
+    };
+    countcolumn: {
+        1029: string;
+        1033: string;
+    };
+};

package/dist/components/GridColumnHeader/translations.js

@@ -0,0 +1,29 @@
+const gridColumnHeaderTranslations = {
+    max: {
+        1029: 'Maximum',
+        1033: 'Maximum'
+    },
+    min: {
+        1029: 'Minimum',
+        1033: 'Minimum'
+    },
+    avg: {
+        1029: 'Průměr',
+        1033: 'Average'
+    },
+    sum: {
+        1029: 'Součet',
+        1033: 'Sum'
+    },
+    count: {
+        1029: 'Počet (včetně prázdných hodnot)',
+        1033: 'Count (including empty values)'
+    },
+    countcolumn: {
+        1029: 'Počet',
+        1033: 'Count'
+    }
+};
+
+export { gridColumnHeaderTranslations };
+//# sourceMappingURL=translations.js.map

package/dist/components/GridColumnHeader/translations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations.js","sources":["../../../src/components/GridColumnHeader/translations.ts"],"sourcesContent":["export const gridColumnHeaderTranslations = {\n    max: {\n        1029: 'Maximum',\n        1033: 'Maximum'\n    },\n    min: {\n        1029: 'Minimum',\n        1033: 'Minimum'\n    },\n    avg: {\n        1029: 'Průměr',\n        1033: 'Average'\n    },\n    sum: {\n        1029: 'Součet',\n        1033: 'Sum'\n    },\n    count: {\n        1029: 'Počet (včetně prázdných hodnot)',\n        1033: 'Count (including empty values)'\n    },\n    countcolumn: {\n        1029: 'Počet',\n        1033: 'Count'\n    }\n}"],"names":[],"mappings":"AAAa,MAAA,4BAA4B,GAAG;AACxC,IAAA,GAAG,EAAE;AACD,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,IAAI,EAAE,SAAS;AAClB,KAAA;AACD,IAAA,GAAG,EAAE;AACD,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,IAAI,EAAE,SAAS;AAClB,KAAA;AACD,IAAA,GAAG,EAAE;AACD,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,IAAI,EAAE,SAAS;AAClB,KAAA;AACD,IAAA,GAAG,EAAE;AACD,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,IAAI,EAAE,KAAK;AACd,KAAA;AACD,IAAA,KAAK,EAAE;AACH,QAAA,IAAI,EAAE,iCAAiC;AACvC,QAAA,IAAI,EAAE,gCAAgC;AACzC,KAAA;AACD,IAAA,WAAW,EAAE;AACT,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,IAAI,EAAE,OAAO;AAChB,KAAA;;;;;"}

package/dist/components/GridInlineRibbon/GridInlineRibbon.d.ts

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

package/dist/components/GridInlineRibbon/GridInlineRibbon.js

@@ -0,0 +1,113 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useMemo, useEffect } from 'react';
+import { Ribbon } from '../Ribbon/Ribbon.js';
+import { GridInlineRibbonModel } from './GridInlineRibbonModel.js';
+import { useEventEmitter } from '../../hooks/useEventEmitter.js';
+import { useRerender, useResizeObserver, getClassNames } from '@talxis/react-components';
+import { getGridInlineRibbonStyles } from './styles.js';
+import { DataProvider } from '@talxis/client-libraries';
+
+const GridInlineRibbon = (props) => {
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    const context = props.context;
+    const model = useMemo(() => new GridInlineRibbonModel({
+        onGetDataset: () => propsRef.current.parameters.Dataset.raw,
+        onGetRecord: () => propsRef.current.parameters.Record.raw,
+        onGetCommandButtonIds: () => propsRef.current.parameters.CommandButtonIds?.raw?.split(',').map(id => id.trim()) ?? []
+    }), []);
+    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);
+    const componentProps = onOverrideComponentProps({
+        onRender: (props, defaultRender) => defaultRender(props)
+    });
+    const commandBarRef = useRef(null);
+    const containerRef = useRef(null);
+    const rerender = useRerender();
+    const styles = useMemo(() => getGridInlineRibbonStyles(props.parameters.Record.raw.getDataProvider().getColumnsMap()[DataProvider.CONST.RIBBON_BUTTONS_COLUMN_NAME].alignment, context.mode.allocatedHeight), [context.mode.allocatedHeight]);
+    useEventEmitter(model, ['onBeforeCommandsRefresh', 'onAfterCommandsRefresh'], () => rerender());
+    const observe = useResizeObserver(() => {
+        commandBarRef.current?.remeasure();
+    });
+    const getRibbonColumn = () => {
+        return props.parameters.Record.raw.getField(DataProvider.CONST.RIBBON_BUTTONS_COLUMN_NAME);
+    };
+    useEffect(() => {
+        getRibbonColumn().setCustomProperty('isRibbonUiMounted', true);
+        model.refreshCommands();
+        if (containerRef.current) {
+            observe(containerRef.current);
+        }
+        return () => {
+            if (!props.parameters.Record.raw.getDataProvider().isDestroyed()) {
+                getRibbonColumn().setCustomProperty('isRibbonUiMounted', false);
+            }
+            model.destroy();
+        };
+    }, []);
+    return componentProps.onRender({
+        container: {
+            className: styles.gridInlineRibbonRoot,
+            ref: containerRef
+        },
+        onRenderRibbon: (props, defaultRender) => defaultRender(props),
+    }, (props) => {
+        return jsx("div", { ...props.container, children: jsx(Ribbon, { context: {
+                    ...context,
+                    mode: {
+                        ...context.mode,
+                        isControlDisabled: false
+                    }
+                }, parameters: {
+                    Commands: {
+                        raw: model.getCommands()
+                    },
+                    Loading: {
+                        raw: model.isLoading()
+                    }
+                }, onOverrideComponentProps: () => {
+                    return {
+                        onRender: (ribbonProps, defaultRender) => {
+                            return props.onRenderRibbon(ribbonProps, (props) => {
+                                return defaultRender({
+                                    ...props,
+                                    container: {
+                                        ...props.container,
+                                        className: getClassNames([props.container.className, styles.ribbonContainer])
+                                    },
+                                    onRenderLoading: (loadingProps, defaultRender) => {
+                                        return props.onRenderLoading(loadingProps, (props) => {
+                                            return defaultRender({
+                                                ...props,
+                                                styles: {
+                                                    ...props.styles,
+                                                    //@ts-ignore - typings
+                                                    root: getClassNames([(props.styles?.root), styles.shimmerRoot]),
+                                                    //@ts-ignore - typings
+                                                    shimmerWrapper: getClassNames([props.styles?.shimmerWrapper, styles.shimmerWrapper])
+                                                }
+                                            });
+                                        });
+                                    },
+                                    onRenderCommandBar: (commandBarProps, defaultRender) => {
+                                        return props.onRenderCommandBar(commandBarProps, (props) => {
+                                            return defaultRender({
+                                                ...props,
+                                                componentRef: commandBarRef,
+                                                styles: {
+                                                    ...props.styles,
+                                                    //@ts-ignore - typings
+                                                    primarySet: getClassNames([props.styles?.primarySet, styles.primarySet])
+                                                },
+                                            });
+                                        });
+                                    }
+                                });
+                            });
+                        }
+                    };
+                } }) });
+    });
+};
+
+export { GridInlineRibbon };
+//# sourceMappingURL=GridInlineRibbon.js.map

package/dist/components/GridInlineRibbon/GridInlineRibbon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridInlineRibbon.js","sources":["../../../src/components/GridInlineRibbon/GridInlineRibbon.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\nimport { Ribbon } from \"../Ribbon/Ribbon\";\nimport { IGridInlineRibbon } from \"./interfaces\"\nimport { GridInlineRibbonModel, IGridInlineRibbonModelEvents } from \"./GridInlineRibbonModel\";\nimport { useEventEmitter } from \"../../hooks/useEventEmitter\";\nimport { getClassNames, useRerender, useResizeObserver } from \"@talxis/react-components\";\nimport { ICommandBar } from \"@fluentui/react\";\nimport { getGridInlineRibbonStyles } from \"./styles\";\nimport { DataProvider } from \"@talxis/client-libraries\";\n\nexport const GridInlineRibbon = (props: IGridInlineRibbon) => {\n    const propsRef = useRef(props);\n    propsRef.current = props;\n    const context = props.context;\n    const model = useMemo(() => new GridInlineRibbonModel({\n        onGetDataset: () => propsRef.current.parameters.Dataset.raw,\n        onGetRecord: () => propsRef.current.parameters.Record.raw,\n        onGetCommandButtonIds: () => propsRef.current.parameters.CommandButtonIds?.raw?.split(',').map(id => id.trim()) ?? []\n    }), []);\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n    const componentProps = onOverrideComponentProps({\n        onRender: (props, defaultRender) => defaultRender(props)\n    })\n    const commandBarRef = useRef<ICommandBar>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const rerender = useRerender();\n    const styles = useMemo(() => getGridInlineRibbonStyles(props.parameters.Record.raw.getDataProvider().getColumnsMap()[DataProvider.CONST.RIBBON_BUTTONS_COLUMN_NAME].alignment, context.mode.allocatedHeight), [context.mode.allocatedHeight]);\n    useEventEmitter<IGridInlineRibbonModelEvents>(model, ['onBeforeCommandsRefresh', 'onAfterCommandsRefresh'], () => rerender());\n\n    const observe = useResizeObserver(() => {\n        commandBarRef.current?.remeasure();\n    })\n\n    const getRibbonColumn = () => {\n        return props.parameters.Record.raw.getField(DataProvider.CONST.RIBBON_BUTTONS_COLUMN_NAME);\n    }\n\n    useEffect(() => {\n        getRibbonColumn().setCustomProperty('isRibbonUiMounted', true);\n        model.refreshCommands();\n        if (containerRef.current) {\n            observe(containerRef.current);\n        }\n        return () => {\n            if (!props.parameters.Record.raw.getDataProvider().isDestroyed()) {\n                getRibbonColumn().setCustomProperty('isRibbonUiMounted', false);\n            }\n            model.destroy();\n        }\n    }, []);\n\n    return componentProps.onRender({\n        container: {\n            className: styles.gridInlineRibbonRoot,\n            ref: containerRef\n        },\n        onRenderRibbon: (props, defaultRender) => defaultRender(props),\n\n    }, (props) => {\n        return <div {...props.container}>\n            <Ribbon\n                context={{\n                    ...context,\n                    mode: {\n                        ...context.mode,\n                        isControlDisabled: false\n                    }\n                }}\n                parameters={{\n                    Commands: {\n                        raw: model.getCommands()\n                    },\n                    Loading: {\n                        raw: model.isLoading()\n                    }\n                }}\n                onOverrideComponentProps={() => {\n                    return {\n                        onRender: (ribbonProps, defaultRender) => {\n                            return props.onRenderRibbon(ribbonProps, (props) => {\n                                return defaultRender({\n                                    ...props,\n                                    container: {\n                                        ...props.container,\n                                        className: getClassNames([props.container.className, styles.ribbonContainer])\n                                    },\n                                    onRenderLoading: (loadingProps, defaultRender) => {\n                                        return props.onRenderLoading(loadingProps, (props) => {\n                                            return defaultRender({\n                                                ...props,\n                                                styles: {\n                                                    ...props.styles,\n                                                    //@ts-ignore - typings\n                                                    root: getClassNames([(props.styles?.root), styles.shimmerRoot]),\n                                                    //@ts-ignore - typings\n                                                    shimmerWrapper: getClassNames([props.styles?.shimmerWrapper, styles.shimmerWrapper])\n                                                }\n                                            })\n                                        })\n                                    },\n                                    onRenderCommandBar: (commandBarProps, defaultRender) => {\n                                        return props.onRenderCommandBar(commandBarProps, (props) => {\n                                            return defaultRender({\n                                                ...props,\n                                                componentRef: commandBarRef,\n                                                styles: {\n                                                    ...props.styles,\n                                                    //@ts-ignore - typings\n                                                    primarySet: getClassNames([props.styles?.primarySet, styles.primarySet])\n                                                },\n                                            })\n                                        })\n                                    }\n                                })\n                            })\n                        }\n                    }\n                }}\n            />\n        </div>\n    })\n}"],"names":["_jsx"],"mappings":"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"}

package/dist/components/GridInlineRibbon/GridInlineRibbonModel.d.ts

@@ -0,0 +1,25 @@
+import { EventEmitter, ICommand, IDataset, IRecord } from "@talxis/client-libraries";
+export interface IGridInlineRibbonModelEvents {
+    onBeforeCommandsRefresh: () => void;
+    onAfterCommandsRefresh: () => void;
+}
+interface IDeps {
+    onGetRecord: () => IRecord;
+    onGetCommandButtonIds: () => string[];
+    onGetDataset: () => IDataset;
+}
+export declare class GridInlineRibbonModel extends EventEmitter<IGridInlineRibbonModelEvents> {
+    private _deps;
+    private _commands;
+    private _loading;
+    constructor(deps: IDeps);
+    getCommands(): ICommand[];
+    destroy(): void;
+    isLoading(): boolean;
+    refreshCommands: () => Promise<void>;
+    private _registerEventListeners;
+    private _unregisterEventListeners;
+    private _getRecord;
+    private _getDataset;
+}
+export {};

package/dist/components/GridInlineRibbon/GridInlineRibbonModel.js

@@ -0,0 +1,49 @@
+import { EventEmitter } from '@talxis/client-libraries';
+
+class GridInlineRibbonModel extends EventEmitter {
+    constructor(deps) {
+        super();
+        this._commands = [];
+        this._loading = true;
+        this.refreshCommands = async () => {
+            this._loading = true;
+            this.dispatchEvent('onBeforeCommandsRefresh');
+            this._commands = await this._getDataset().getDataProvider().retrieveRecordCommand({
+                recordIds: [this._getRecord().getRecordId()],
+                refreshAllRules: true,
+                isInline: true,
+                isGrouped: this._getRecord().getSummarizationType() === 'grouping'
+            });
+            this._loading = false;
+            this.dispatchEvent('onAfterCommandsRefresh');
+        };
+        this._deps = deps;
+        this._registerEventListeners();
+    }
+    getCommands() {
+        return this._commands;
+    }
+    destroy() {
+        this._unregisterEventListeners();
+    }
+    isLoading() {
+        return this._loading;
+    }
+    _registerEventListeners() {
+        this._getRecord().addEventListener('onFieldValueChanged', this.refreshCommands);
+        this._getRecord().addEventListener('onAfterSaved', this.refreshCommands);
+    }
+    _unregisterEventListeners() {
+        this._getRecord().removeEventListener('onFieldValueChanged', this.refreshCommands);
+        this._getRecord().removeEventListener('onAfterSaved', this.refreshCommands);
+    }
+    _getRecord() {
+        return this._deps.onGetRecord();
+    }
+    _getDataset() {
+        return this._deps.onGetDataset();
+    }
+}
+
+export { GridInlineRibbonModel };
+//# sourceMappingURL=GridInlineRibbonModel.js.map

package/dist/components/GridInlineRibbon/GridInlineRibbonModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridInlineRibbonModel.js","sources":["../../../src/components/GridInlineRibbon/GridInlineRibbonModel.ts"],"sourcesContent":["import { EventEmitter, ICommand, IDataset, IRecord } from \"@talxis/client-libraries\";\n\nexport interface IGridInlineRibbonModelEvents {\n    onBeforeCommandsRefresh: () => void;\n    onAfterCommandsRefresh: () => void;\n}\n\ninterface IDeps {\n    onGetRecord: () => IRecord;\n    onGetCommandButtonIds: () => string[];\n    onGetDataset: () => IDataset;\n}\n\nexport class GridInlineRibbonModel extends EventEmitter<IGridInlineRibbonModelEvents> {\n    private _deps: IDeps;\n    private _commands: ICommand[] = [];\n    private _loading: boolean = true;\n    constructor(deps: IDeps) {\n        super();\n        this._deps = deps;\n        this._registerEventListeners();\n    }\n\n    public getCommands(): ICommand[] {\n        return this._commands;\n    }\n    public destroy() {\n        this._unregisterEventListeners();\n    }\n    public isLoading(): boolean {\n        return this._loading;\n    }\n    public refreshCommands = async () => {\n        this._loading = true;\n        this.dispatchEvent('onBeforeCommandsRefresh');\n        this._commands = await this._getDataset().getDataProvider().retrieveRecordCommand({\n            recordIds: [this._getRecord().getRecordId()],\n            refreshAllRules: true,\n            isInline: true,\n            isGrouped: this._getRecord().getSummarizationType() === 'grouping'\n        })\n        this._loading = false;\n        this.dispatchEvent('onAfterCommandsRefresh');\n    }\n\n    private _registerEventListeners() {\n        this._getRecord().addEventListener('onFieldValueChanged', this.refreshCommands);\n        this._getRecord().addEventListener('onAfterSaved', this.refreshCommands);\n    }\n    private _unregisterEventListeners() {\n        this._getRecord().removeEventListener('onFieldValueChanged', this.refreshCommands);\n        this._getRecord().removeEventListener('onAfterSaved', this.refreshCommands);\n    }\n    private _getRecord() {\n        return this._deps.onGetRecord();\n    }\n    private _getDataset() {\n        return this._deps.onGetDataset();\n    }\n}"],"names":[],"mappings":";;AAaM,MAAO,qBAAsB,SAAQ,YAA0C,CAAA;AAIjF,IAAA,WAAA,CAAY,IAAW,EAAA;AACnB,QAAA,KAAK,EAAE,CAAC;QAHJ,IAAS,CAAA,SAAA,GAAe,EAAE,CAAC;QAC3B,IAAQ,CAAA,QAAA,GAAY,IAAI,CAAC;QAgB1B,IAAe,CAAA,eAAA,GAAG,YAAW;AAChC,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;AACrB,YAAA,IAAI,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;AAC9C,YAAA,IAAI,CAAC,SAAS,GAAG,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,eAAe,EAAE,CAAC,qBAAqB,CAAC;gBAC9E,SAAS,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,WAAW,EAAE,CAAC;AAC5C,gBAAA,eAAe,EAAE,IAAI;AACrB,gBAAA,QAAQ,EAAE,IAAI;gBACd,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,oBAAoB,EAAE,KAAK,UAAU;AACrE,aAAA,CAAC,CAAA;AACF,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;AACtB,YAAA,IAAI,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;AACjD,SAAC,CAAA;AAxBG,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAClC;IAEM,WAAW,GAAA;QACd,OAAO,IAAI,CAAC,SAAS,CAAC;KACzB;IACM,OAAO,GAAA;QACV,IAAI,CAAC,yBAAyB,EAAE,CAAC;KACpC;IACM,SAAS,GAAA;QACZ,OAAO,IAAI,CAAC,QAAQ,CAAC;KACxB;IAcO,uBAAuB,GAAA;AAC3B,QAAA,IAAI,CAAC,UAAU,EAAE,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;AAChF,QAAA,IAAI,CAAC,UAAU,EAAE,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;KAC5E;IACO,yBAAyB,GAAA;AAC7B,QAAA,IAAI,CAAC,UAAU,EAAE,CAAC,mBAAmB,CAAC,qBAAqB,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;AACnF,QAAA,IAAI,CAAC,UAAU,EAAE,CAAC,mBAAmB,CAAC,cAAc,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;KAC/E;IACO,UAAU,GAAA;AACd,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;KACnC;IACO,WAAW,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;KACpC;AACJ;;;;"}

package/dist/components/GridInlineRibbon/index.d.ts

@@ -0,0 +1,2 @@
+export * from './GridInlineRibbon';
+export * from './interfaces';

package/dist/components/GridInlineRibbon/index.js

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

package/dist/components/GridInlineRibbon/interfaces.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { IDataset, IRecord } from "@talxis/client-libraries";
+import { IControl } from "../../interfaces/context";
+import { IRibbonComponentProps } from "../Ribbon/interfaces";
+import { IStringProperty } from "../../interfaces";
+export interface IGridInlineRibbon extends IControl<IRibbonParameters, any, any, IGridInlineRibbonComponentProps> {
+}
+export interface IRibbonParameters {
+    Dataset: {
+        raw: IDataset;
+    };
+    Record: {
+        raw: IRecord;
+    };
+    /**
+     * A comma-separated list of command button IDs to display in the ribbon. If specified, only these buttons will be shown.
+     * The button still might not be visible if it's Enable Rules evaluate to false
+     */
+    CommandButtonIds?: IStringProperty;
+}
+interface IGridInlineRibbonComponentProps {
+    onRender: (props: IContainerProps, defaultRender: (props: IContainerProps) => JSX.Element) => JSX.Element;
+}
+interface IContainerProps {
+    container: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    onRenderRibbon: IRibbonComponentProps['onRender'];
+}
+export {};