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

package/dist/components/GridCellRenderer/properties/TwoOptions.js

@@ -0,0 +1,11 @@
+import { OptionSetBase } from './OptionSetBase.js';
+
+class TwoOptions extends OptionSetBase {
+    _getSelectedOptions(optionSet) {
+        const value = this.getValue();
+        return optionSet.filter(option => option.Value == (value ? 1 : 0));
+    }
+}
+
+export { TwoOptions };
+//# sourceMappingURL=TwoOptions.js.map

package/dist/components/GridCellRenderer/properties/TwoOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TwoOptions.js","sources":["../../../../src/components/GridCellRenderer/properties/TwoOptions.ts"],"sourcesContent":["import { OptionSetBase } from \"./OptionSetBase\";\n\nexport class TwoOptions extends OptionSetBase {\n    \n    protected _getSelectedOptions(optionSet: ComponentFramework.PropertyHelper.OptionMetadata[]): ComponentFramework.PropertyHelper.OptionMetadata[] {\n        const value: boolean = this.getValue();\n        return optionSet.filter(option => option.Value == (value ? 1 : 0));\n    }\n}"],"names":[],"mappings":";;AAEM,MAAO,UAAW,SAAQ,aAAa,CAAA;AAE/B,IAAA,mBAAmB,CAAC,SAA6D,EAAA;AACvF,QAAA,MAAM,KAAK,GAAY,IAAI,CAAC,QAAQ,EAAE,CAAC;QACvC,OAAO,SAAS,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;KACtE;AACJ;;;;"}

package/dist/components/GridCellRenderer/properties/Url.d.ts

@@ -0,0 +1,5 @@
+import { ILinkProps } from "@fluentui/react";
+import { Property } from "./Property";
+export declare class Url extends Property {
+    getLinkProps(): ILinkProps;
+}

package/dist/components/GridCellRenderer/properties/Url.js

@@ -0,0 +1,15 @@
+import { Property } from './Property.js';
+
+class Url extends Property {
+    getLinkProps() {
+        return {
+            href: this.getValue(),
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: this.getFormattedValue()
+        };
+    }
+}
+
+export { Url };
+//# sourceMappingURL=Url.js.map

package/dist/components/GridCellRenderer/properties/Url.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Url.js","sources":["../../../../src/components/GridCellRenderer/properties/Url.ts"],"sourcesContent":["import { ILinkProps } from \"@fluentui/react\";\nimport { Property } from \"./Property\";\n\nexport class Url extends Property {\n    public getLinkProps(): ILinkProps {\n        return {\n            href: this.getValue(),\n            target: \"_blank\",\n            rel: \"noopener noreferrer\",\n            children: this.getFormattedValue()\n        };\n    }\n}"],"names":[],"mappings":";;AAGM,MAAO,GAAI,SAAQ,QAAQ,CAAA;IACtB,YAAY,GAAA;QACf,OAAO;AACH,YAAA,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE;AACrB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,qBAAqB;AAC1B,YAAA,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAAE;SACrC,CAAC;KACL;AACJ;;;;"}

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

@@ -1,85 +1,57 @@
-import { DataType, IColumn } from "@talxis/client-libraries";
-import { ITheme } from "@talxis/react-components";
-export declare const getGridCellLabelStyles: (columnAlignment: IColumn['alignment'], dataType: DataType, rowHeight: number, theme: ITheme) => import("@fluentui/react").IProcessedStyleSet<{
-    root: {
-        height: number;
+import { IColumn } from "@talxis/client-libraries";
+import { GridCellRendererModel } from "./GridCellRendererModel";
+export declare const getGridCellRendererStyles: (model: GridCellRendererModel, height?: number) => import("@fluentui/react").IProcessedStyleSet<{
+    gridCellRendererRoot: {
+        height: string;
+        minHeight: number | undefined;
         paddingLeft: number;
         paddingRight: number;
         display: string;
+        alignItems: string;
+        justifyContent: string | undefined;
         flexDirection: string;
-    };
-    aggregationLabel: {
-        lineHeight: number;
-        textAlign: "left" | "right" | "center" | undefined;
-        color: string;
-        fontSize: number;
         overflow: string;
-        textOverflow: string;
+        resize: string | undefined;
     };
-    prefixSuffixContentWrapper: {
+    contentContainer: {
         display: string;
+        minWidth: number;
+        gap: number;
         flexGrow: number;
+        width: string;
         alignItems: string;
-        justifyContent: string | undefined;
-        gap: number;
     };
-    fileWrapper: {
+    innerContentContainer: {
         display: string;
-        gap: number;
         overflow: string;
-        textOverflow: string;
-        alignItems: string;
-    };
-    contentWrapper: {
+        justifyContent: string | undefined;
         flexGrow: number;
-        textAlign: "left" | "right" | "center" | undefined;
+        gap: number;
+    };
+    aggregationLabel: {
+        lineHeight: string;
+        fontSize: string | number | undefined;
+        width: string;
+        textAlign: string;
+        color: string;
         overflow: string;
         textOverflow: string;
     };
-    fileImage: {
-        marginRight: number;
-        flexShrink: number;
-        img: {
-            width: number;
-        };
+    aggregatedValue: {
+        overflow?: string | undefined;
+        textOverflow?: string | undefined;
     };
-    link: {
-        lineHeight?: string | undefined;
-        display?: string | undefined;
-        whiteSpace?: string | undefined;
-        '-webkit-box-orient'?: string | undefined;
-        wordBreak?: string | undefined;
-        '-webkit-line-clamp'?: string | undefined;
-        maxWidth: string;
+    valueContainer: {
+        minWidth: number;
         overflow: string;
         textOverflow: string;
+        flexGrow: number;
+        textAlign: "left" | "right" | "center";
     };
-    icon: {
+    affixIconRoot: {
         img: {
             width: number;
         };
     };
-    fileIcon: {
-        fontSize: number;
-    };
-    loadingSpinnerCircle: {
-        width: number;
-        height: number;
-    };
-}>;
-export declare const getDefaultContentRendererStyles: (theme: ITheme, dataType: DataType, rowHeight: number) => import("@fluentui/react").IProcessedStyleSet<{
-    content: {
-        lineHeight?: string | undefined;
-        display?: string | undefined;
-        whiteSpace?: string | undefined;
-        '-webkit-box-orient'?: string | undefined;
-        wordBreak?: string | undefined;
-        '-webkit-line-clamp'?: string | undefined;
-        overflow: string;
-        textOverflow: string;
-        flexGrow: number;
-    };
-    placeholder: {
-        color: string;
-    };
 }>;
+export declare const getJustifyContent: (columnAlignment: IColumn['alignment']) => "center" | "flex-start" | "flex-end" | undefined;

package/dist/components/GridCellRenderer/styles.js

@@ -1,81 +1,95 @@
 import { mergeStyleSets } from '@fluentui/react';
 
-const getGridCellLabelStyles = (columnAlignment, dataType, rowHeight, theme) => {
+let minHeight = undefined;
+const getGridCellRendererStyles = (model, height) => {
+    const columnAlignment = model.getColumnAlignment();
+    const theme = model.getControlTheme();
+    const isMultiline = model.isMultiline();
+    const autoHeightEnabled = model.isAutoHeightEnabled();
+    const hasAggregationLabel = !!model.getAggregationLabel();
+    const formattedAggregatedValue = model.getFormattedAggregatedValue();
+    const value = model.getValue();
+    if (minHeight === undefined) {
+        minHeight = height;
+    }
     return mergeStyleSets({
-        root: {
-            height: rowHeight,
+        gridCellRendererRoot: {
+            height: '100%',
+            minHeight: autoHeightEnabled ? minHeight : undefined,
             paddingLeft: 8,
             paddingRight: 8,
             display: 'flex',
-            flexDirection: 'column'
-        },
-        aggregationLabel: {
-            lineHeight: 6,
-            textAlign: columnAlignment,
-            color: theme.semanticColors.infoIcon,
-            fontSize: 12,
+            alignItems: getAlignItems(columnAlignment, hasAggregationLabel, isMultiline),
+            justifyContent: hasAggregationLabel ? 'flex-end' : getJustifyContent(columnAlignment),
+            flexDirection: hasAggregationLabel ? 'column' : 'row',
             overflow: 'hidden',
-            textOverflow: 'ellipsis',
+            resize: autoHeightEnabled ? 'vertical' : undefined
         },
-        prefixSuffixContentWrapper: {
+        contentContainer: {
             display: 'flex',
+            minWidth: 0,
+            gap: 5,
             flexGrow: 1,
-            alignItems: 'center',
-            justifyContent: getJustifyContent(columnAlignment),
-            gap: 10,
+            width: '100%',
+            alignItems: 'center'
+            //alignItems: isMultiline ? 'flex-start' : 'flex-end'
         },
-        fileWrapper: {
+        innerContentContainer: {
             display: 'flex',
-            gap: 5,
             overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            alignItems: 'center'
-        },
-        contentWrapper: {
+            justifyContent: getJustifyContent(columnAlignment),
             flexGrow: 1,
-            textAlign: columnAlignment,
+            gap: 3
+        },
+        aggregationLabel: {
+            lineHeight: '1',
+            fontSize: theme.fonts.small.fontSize,
+            width: '100%',
+            textAlign: 'right',
+            color: theme.semanticColors.infoIcon,
             overflow: 'hidden',
-            textOverflow: 'ellipsis'
+            textOverflow: 'ellipsis',
         },
-        fileImage: {
-            marginRight: 5,
-            flexShrink: 0,
-            'img': {
-                width: 32
-            }
+        aggregatedValue: {
+            ...formattedAggregatedValue != null && value == null ? {
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+            } : {}
         },
-        link: {
-            maxWidth: '100%',
+        valueContainer: {
+            minWidth: 0,
             overflow: 'hidden',
             textOverflow: 'ellipsis',
-            ...(isMultiple(dataType) ? getMultilineStyles(rowHeight, theme) : {})
+            flexGrow: 1,
+            textAlign: columnAlignment,
         },
-        icon: {
+        affixIconRoot: {
             'img': {
-                width: 20
+                width: 18
             }
-        },
-        fileIcon: {
-            fontSize: 18
-        },
-        loadingSpinnerCircle: {
-            width: 20,
-            height: 20
         }
     });
 };
-const getDefaultContentRendererStyles = (theme, dataType, rowHeight) => {
-    return mergeStyleSets({
-        content: {
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            flexGrow: 1,
-            ...(isMultiple(dataType) ? getMultilineStyles(rowHeight, theme) : {})
-        },
-        placeholder: {
-            color: theme.semanticColors.inputPlaceholderText
+const getAlignItems = (columnAlignment, hasAggregationLabel, isMultiline) => {
+    if (hasAggregationLabel) {
+        switch (columnAlignment) {
+            case 'left': {
+                return 'flex-start';
+            }
+            case 'center': {
+                return 'center';
+            }
+            case 'right': {
+                return 'flex-end';
+            }
         }
-    });
+    }
+    if (isMultiline) {
+        return 'flex-start';
+    }
+    else {
+        return 'center';
+    }
 };
 const getJustifyContent = (columnAlignment) => {
     switch (columnAlignment) {
@@ -90,30 +104,6 @@ const getJustifyContent = (columnAlignment) => {
         }
     }
 };
-const getMultilineStyles = (rowHeight, theme) => {
-    rowHeight = rowHeight + 1;
-    let fontSize = 20;
-    const themeFontSize = theme.fonts.medium.fontSize;
-    theme.fonts.medium.lineHeight;
-    if (typeof themeFontSize === 'number') {
-        fontSize = themeFontSize;
-    }
-    else if (typeof themeFontSize === 'string' && themeFontSize.endsWith('px')) {
-        fontSize = parseInt(themeFontSize.replace('px', ''));
-    }
-    const clamp = Math.floor(rowHeight / fontSize) - 1;
-    return {
-        lineHeight: '1.2',
-        display: '-webkit-box',
-        whiteSpace: 'normal',
-        '-webkit-box-orient': 'vertical',
-        wordBreak: 'break-all',
-        '-webkit-line-clamp': clamp.toString(),
-    };
-};
-const isMultiple = (dataType) => {
-    return dataType === 'Multiple' || dataType === 'SingleLine.TextArea';
-};
 
-export { getDefaultContentRendererStyles, getGridCellLabelStyles };
+export { getGridCellRendererStyles, getJustifyContent };
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../src/components/GridCellRenderer/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\nimport { DataType, IColumn } from \"@talxis/client-libraries\";\nimport { ITheme } from \"@talxis/react-components\";\n\nexport const getGridCellLabelStyles = (columnAlignment: IColumn['alignment'], dataType: DataType, rowHeight: number, theme: ITheme) => {\n    return mergeStyleSets({\n        root: {\n            height: rowHeight,\n            paddingLeft: 8,\n            paddingRight: 8,\n            display: 'flex',\n            flexDirection: 'column'\n        },\n        aggregationLabel: {\n            lineHeight: 6,\n            textAlign: columnAlignment,\n            color: theme.semanticColors.infoIcon,\n            fontSize: 12,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n        },\n        prefixSuffixContentWrapper: {\n            display: 'flex',\n            flexGrow: 1,\n            alignItems: 'center',\n            justifyContent: getJustifyContent(columnAlignment),\n            gap: 10,\n\n        },\n        fileWrapper: {\n            display: 'flex',\n            gap: 5,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            alignItems: 'center'\n        },\n        contentWrapper: {\n            flexGrow: 1,\n            textAlign: columnAlignment,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis'\n        },\n        fileImage: {\n            marginRight: 5,\n            flexShrink: 0,\n            'img': {\n                width: 32\n            }\n        },\n        link: {\n            maxWidth: '100%',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            ...(isMultiple(dataType) ? getMultilineStyles(rowHeight, theme) : {})\n        },\n        icon: {\n            'img': {\n                width: 20\n            }\n        },\n        fileIcon: {\n            fontSize: 18\n        },\n        loadingSpinnerCircle: {\n            width: 20,\n            height: 20\n        }\n    })\n}\nexport const getDefaultContentRendererStyles = (theme: ITheme, dataType: DataType, rowHeight: number) => {\n    return mergeStyleSets({\n        content: {\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            flexGrow: 1,\n            ...(isMultiple(dataType) ? getMultilineStyles(rowHeight, theme) : {})\n        },\n        placeholder: {\n            color: theme.semanticColors.inputPlaceholderText\n        }\n    });\n}\n\nconst getJustifyContent = (columnAlignment: IColumn['alignment']) => {\n    switch (columnAlignment) {\n        case 'left': {\n            return 'flex-start';\n        }\n        case 'center': {\n            return 'center';\n        }\n        case 'right': {\n            return 'flex-end';\n        }\n    }\n}\n\nconst getMultilineStyles = (rowHeight: number, theme: ITheme) => {\n    rowHeight = rowHeight + 1;\n    let fontSize = 20;\n    const themeFontSize = theme.fonts.medium.fontSize;\n    theme.fonts.medium.lineHeight\n    if (typeof themeFontSize === 'number') {\n        fontSize = themeFontSize;\n    }\n    else if (typeof themeFontSize === 'string' && themeFontSize.endsWith('px')) {\n        fontSize = parseInt(themeFontSize.replace('px', ''));\n    }\n    const clamp = Math.floor(rowHeight / fontSize) - 1;\n    return {\n        lineHeight: '1.2',\n        display: '-webkit-box',\n        whiteSpace: 'normal',\n        '-webkit-box-orient': 'vertical',\n        wordBreak: 'break-all',\n        '-webkit-line-clamp': clamp.toString(),\n    };\n}\n\nconst isMultiple = (dataType: DataType) => {\n    return dataType === 'Multiple' || dataType === 'SingleLine.TextArea';\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"styles.js","sources":["../../../src/components/GridCellRenderer/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\nimport { IColumn } from \"@talxis/client-libraries\";\nimport { GridCellRendererModel } from \"./GridCellRendererModel\";\n\nlet minHeight: number | undefined = undefined;\n\nexport const getGridCellRendererStyles = (model: GridCellRendererModel, height?: number) => {\n    const columnAlignment = model.getColumnAlignment();\n    const theme = model.getControlTheme();\n    const isMultiline = model.isMultiline();\n    const autoHeightEnabled = model.isAutoHeightEnabled()\n    const hasAggregationLabel = !!model.getAggregationLabel();\n    const formattedAggregatedValue = model.getFormattedAggregatedValue();\n    const value = model.getValue();\n\n    if(minHeight === undefined) {\n        minHeight = height;\n    }\n    return mergeStyleSets({\n        gridCellRendererRoot: {\n            height: '100%',\n            minHeight: autoHeightEnabled ? minHeight : undefined,\n            paddingLeft: 8,\n            paddingRight: 8,\n            display: 'flex',\n            alignItems: getAlignItems(columnAlignment, hasAggregationLabel, isMultiline),\n            justifyContent: hasAggregationLabel ? 'flex-end' : getJustifyContent(columnAlignment),\n            flexDirection: hasAggregationLabel ? 'column' : 'row',\n            overflow: 'hidden',\n            resize: autoHeightEnabled ? 'vertical' : undefined\n        },\n        contentContainer: {\n            display: 'flex',\n            minWidth: 0,\n            gap: 5,\n            flexGrow: 1,\n            width: '100%',\n            alignItems: 'center'\n            //alignItems: isMultiline ? 'flex-start' : 'flex-end'\n        },\n        innerContentContainer: {\n            display: 'flex',\n            overflow: 'hidden',\n            justifyContent: getJustifyContent(columnAlignment),\n            flexGrow: 1,\n            gap: 3\n        },\n        aggregationLabel: {\n            lineHeight: '1',\n            fontSize: theme.fonts.small.fontSize,\n            width: '100%',\n            textAlign: 'right',\n            color: theme.semanticColors.infoIcon,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n        },\n        aggregatedValue: {\n            ...formattedAggregatedValue != null && value == null ? {\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n            } : {}\n        },\n        valueContainer: {\n            minWidth: 0,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            flexGrow: 1,\n            textAlign: columnAlignment,\n        },\n        affixIconRoot: {\n            'img': {\n                width: 18\n            }\n        }\n    })\n}\n\nconst getAlignItems = (columnAlignment: IColumn['alignment'], hasAggregationLabel: boolean, isMultiline: boolean) => {\n    if (hasAggregationLabel) {\n        switch (columnAlignment) {\n            case 'left': {\n                return 'flex-start';\n            }\n            case 'center': {\n                return 'center';\n            }\n            case 'right': {\n                return 'flex-end';\n            }\n        }\n    }\n    if(isMultiline) {\n        return 'flex-start'\n    }\n    else {\n        return 'center';\n    }\n}\n\nexport const getJustifyContent = (columnAlignment: IColumn['alignment']) => {\n    switch (columnAlignment) {\n        case 'left': {\n            return 'flex-start';\n        }\n        case 'center': {\n            return 'center';\n        }\n        case 'right': {\n            return 'flex-end';\n        }\n    }\n}"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-export declare const getDefaultGridRendererTranslations: () => {
+export declare const gridGroupCellRendererTranslations: {
     download: {
         1029: string;
         1033: string;

package/dist/components/GridCellRenderer/translations.js

@@ -1,35 +1,33 @@
-const getDefaultGridRendererTranslations = () => {
-    return {
-        download: {
-            1029: 'Stáhnout',
-            1033: 'Download'
-        },
-        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'
-        }
-    };
+const gridGroupCellRendererTranslations = {
+    download: {
+        1029: 'Stáhnout',
+        1033: 'Download'
+    },
+    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 { getDefaultGridRendererTranslations };
+export { gridGroupCellRendererTranslations };
 //# sourceMappingURL=translations.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"translations.js","sources":["../../../src/components/GridCellRenderer/translations.ts"],"sourcesContent":["export const getDefaultGridRendererTranslations = () => {\n    return {\n        download: {\n            1029: 'Stáhnout',\n            1033: 'Download'\n        },\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    }\n};"],"names":[],"mappings":"AAAO,MAAM,kCAAkC,GAAG,MAAK;IACnD,OAAO;AACH,QAAA,QAAQ,EAAE;AACN,YAAA,IAAI,EAAE,UAAU;AAChB,YAAA,IAAI,EAAE,UAAU;AACnB,SAAA;AACD,QAAA,GAAG,EAAE;AACD,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AAClB,SAAA;AACD,QAAA,GAAG,EAAE;AACD,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AAClB,SAAA;AACD,QAAA,GAAG,EAAE;AACD,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,IAAI,EAAE,SAAS;AAClB,SAAA;AACD,QAAA,GAAG,EAAE;AACD,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,IAAI,EAAE,KAAK;AACd,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,IAAI,EAAE,iCAAiC;AACvC,YAAA,IAAI,EAAE,gCAAgC;AACzC,SAAA;AACD,QAAA,WAAW,EAAE;AACT,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,IAAI,EAAE,OAAO;AAChB,SAAA;KACJ,CAAA;AACL;;;;"}
+{"version":3,"file":"translations.js","sources":["../../../src/components/GridCellRenderer/translations.ts"],"sourcesContent":["export const gridGroupCellRendererTranslations = {\n    download: {\n        1029: 'Stáhnout',\n        1033: 'Download'\n    },\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,iCAAiC,GAAG;AAC7C,IAAA,QAAQ,EAAE;AACN,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,IAAI,EAAE,UAAU;AACnB,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,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/GridCellRenderer/useModel.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { GridCellRendererModel } from "./GridCellRendererModel";
+export declare const ModelContext: React.Context<GridCellRendererModel>;
+export declare const useModel: () => GridCellRendererModel;

package/dist/components/GridCellRenderer/useModel.js

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

package/dist/components/GridCellRenderer/useModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModel.js","sources":["../../../src/components/GridCellRenderer/useModel.ts"],"sourcesContent":["import React from \"react\";\nimport { GridCellRendererModel } from \"./GridCellRendererModel\";\n\nexport const ModelContext = React.createContext<GridCellRendererModel>({} as any);\n\nexport const useModel = () => {\n    return React.useContext(ModelContext);\n}"],"names":[],"mappings":";;AAGa,MAAA,YAAY,GAAG,KAAK,CAAC,aAAa,CAAwB,EAAS,EAAE;AAE3E,MAAM,QAAQ,GAAG,MAAK;AACzB,IAAA,OAAO,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;AAC1C;;;;"}

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

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

package/dist/components/GridColumnHeader/GridColumnHeader.js

@@ -0,0 +1,133 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ThemeProvider, CommandBarButton, Text, Icon } from '@fluentui/react';
+import { useRef, useMemo } from 'react';
+import { GridColumnHeaderModel } from './GridColumnHeaderModel.js';
+import { getGridColumnHeaderStyles } from './styles.js';
+import { GroupList20Regular, Autosum20Regular } from '@fluentui/react-icons';
+import { gridColumnHeaderTranslations } from './translations.js';
+import { useControl } from '../../hooks/useControl.js';
+
+const GridColumnHeader = (props) => {
+    const { theme, labels } = useControl('GridColumnHeader', props, gridColumnHeaderTranslations);
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    const model = useMemo(() => new GridColumnHeaderModel({
+        getLabels: () => labels,
+        getProps: () => propsRef.current
+    }), []);
+    const styles = useMemo(() => getGridColumnHeaderStyles(theme, model.getColumn().alignment), [
+        theme,
+        model.getColumn().alignment
+    ]);
+    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);
+    const componentProps = onOverrideComponentProps({
+        onRender: (props, defaultRender) => defaultRender(props)
+    });
+    const getSortIconName = () => {
+        if (model.isSortedAsc()) {
+            return 'SortUp';
+        }
+        else if (model.isSortedDesc()) {
+            return 'SortDown';
+        }
+        return undefined;
+    };
+    const getTitle = () => {
+        let title = model.getColumn().displayName;
+        if (model.isAggregated()) {
+            title += ` (${model.getAggregationLabel()})`;
+        }
+        return title;
+    };
+    return componentProps.onRender({
+        container: {
+            theme: theme
+        },
+        onRenderCommandBarButton: (props, defaultRender) => defaultRender(props),
+    }, (props) => {
+        return jsx(ThemeProvider, { ...props.container, children: props.onRenderCommandBarButton({
+                buttonProps: {
+                    styles: {
+                        root: styles.commandBarButtonRoot,
+                    },
+                    title: getTitle()
+                },
+                onRenderColumnDisplayNameContainer: (props, defaultRender) => defaultRender(props),
+                onRenderSuffixIconContainer: (props, defaultRender) => defaultRender(props),
+            }, (props) => {
+                return jsxs(CommandBarButton, { ...props.buttonProps, children: [props.onRenderColumnDisplayNameContainer({
+                            container: {
+                                className: styles.columnDisplayNameContainer
+                            },
+                            onRenderColumnDisplayName: (props, defaultRender) => defaultRender(props),
+                            onRenderRequiredSymbol: (props, defaultRender) => defaultRender(props),
+                            onRenderGroupingIcon: (props, defaultRender) => defaultRender(props),
+                        }, (props) => {
+                            return jsxs("div", { ...props.container, children: [props.onRenderGroupingIcon({
+                                        className: `${styles.svgIcon}`
+                                    }, (props) => {
+                                        if (model.isGrouped()) {
+                                            return jsx(GroupList20Regular, { ...props });
+                                        }
+                                        return jsx(Fragment, {});
+                                    }), props.onRenderColumnDisplayName({
+                                        children: model.getColumn().displayName,
+                                        styles: {
+                                            root: styles.columnDisplayNameText
+                                        }
+                                    }, (props) => {
+                                        return jsx(Text, { ...props });
+                                    }), props.onRenderRequiredSymbol({
+                                        children: '*',
+                                        className: styles.asterix
+                                    }, (props) => {
+                                        if (model.isRequired()) {
+                                            return jsx(Text, { ...props });
+                                        }
+                                        return jsx(Fragment, {});
+                                    })] });
+                        }), props.onRenderSuffixIconContainer({
+                            container: {
+                                className: styles.suffixIconsContainer
+                            },
+                            onRenderFilterIcon: (props, defaultRender) => defaultRender(props),
+                            onRenderSortIcon: (props, defaultRender) => defaultRender(props),
+                            onRenderUneditableIcon: (props, defaultRender) => defaultRender(props),
+                            onRenderSumIcon: (props, defaultRender) => defaultRender(props),
+                        }, (props) => {
+                            return jsxs("div", { ...props.container, children: [props.onRenderSortIcon({
+                                        iconName: getSortIconName()
+                                    }, (props) => {
+                                        if (props.iconName) {
+                                            return jsx(Icon, { ...props });
+                                        }
+                                        return jsx(Fragment, {});
+                                    }), props.onRenderFilterIcon({
+                                        iconName: 'Filter'
+                                    }, (props) => {
+                                        if (model.isFiltered()) {
+                                            return jsx(Icon, { ...props });
+                                        }
+                                        return jsx(Fragment, {});
+                                    }), props.onRenderUneditableIcon({
+                                        iconName: 'Uneditable'
+                                    }, (props) => {
+                                        if (model.isUneditableIconVisible()) {
+                                            return jsx(Icon, { ...props });
+                                        }
+                                        return jsx(Fragment, {});
+                                    }), props.onRenderSumIcon({
+                                        className: `${styles.svgIcon} ${styles.aggregationIcon}`
+                                    }, (props) => {
+                                        if (model.isAggregated()) {
+                                            return jsx(Autosum20Regular, { ...props });
+                                        }
+                                        return jsx(Fragment, {});
+                                    })] });
+                        })] });
+            }) });
+    });
+};
+
+export { GridColumnHeader };
+//# sourceMappingURL=GridColumnHeader.js.map