@cellaware/utils 8.11.19 → 8.11.20

package/dist/chatwms/datagrid.js

@@ -0,0 +1,1454 @@
+import { isDateString, truncateValue } from "../util.js";
+import { CHATWMS_DEFAULT_LANGUAGE } from "./user.js";
+export const DATAGRID_HTML_ROWS = 1000;
+export const DATAGRID_HTML_COLS = 8;
+export const DATAGRID_TEAMS_ROWS = 24;
+export function initDatagridState() {
+    return {
+        adjRows: []
+    };
+}
+export function initVisualDatagridState() {
+    return {
+        ...initDatagridState(),
+        chartRows: [],
+        html: '',
+        teamsRows: [],
+        htmlTranspose: '',
+        teamsTranspose: []
+    };
+}
+export const DEFAULT_VALUE_FORMAT_VALUE = 'none';
+export function evaluateValueFormat(colFmt, value, locale) {
+    // NOTE: this syntax checks for both undefined and null.
+    if (value == null) {
+        return value;
+    }
+    const fmt = colFmt.valueFormat;
+    if (!fmt) {
+        return value;
+    }
+    try {
+        switch (colFmt.type) {
+            case 'text':
+                return formatText(value, fmt);
+            case 'number':
+                return formatNumber(value, fmt);
+            case 'date':
+                return formatDate(value, fmt, locale);
+            default:
+                return value;
+        }
+    }
+    catch {
+        return value;
+    }
+}
+function formatTextEnabled(fmt) {
+    return fmt.txtCaseVal !== DEFAULT_VALUE_FORMAT_VALUE;
+}
+function formatText(value, fmt) {
+    if (!formatTextEnabled(fmt)) {
+        return value;
+    }
+    const str = String(value);
+    switch (fmt.txtCaseVal) {
+        case 'lower': return str.toLowerCase();
+        case 'upper': return str.toUpperCase();
+        case 'title':
+            return str
+                .toLowerCase()
+                .split(' ')
+                .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+                .join(' ');
+        default:
+            return value;
+    }
+}
+export function formatNumberEnabled(fmt) {
+    return fmt.numCommaVal !== DEFAULT_VALUE_FORMAT_VALUE ||
+        fmt.numCurrencyVal !== DEFAULT_VALUE_FORMAT_VALUE ||
+        fmt.numPercentVal !== DEFAULT_VALUE_FORMAT_VALUE ||
+        fmt.numRoundVal !== DEFAULT_VALUE_FORMAT_VALUE;
+}
+function formatNumber(value, fmt) {
+    if (!formatNumberEnabled(fmt)) {
+        return value;
+    }
+    let num = parseFloat(value);
+    if (isNaN(num)) {
+        return value;
+    }
+    /*
+        We need to be intentional about the order of operations for number formatting.
+        For example, some formatting operations will transform the number to a string.
+        If we need to perform some arithmetic or round it, we need to do so first before
+        number is transformed into a string.
+    */
+    if (fmt.numPercentVal === '100') {
+        num *= 100;
+    }
+    const decimals = parseInt(fmt.numRoundVal ?? '', 10);
+    if (!isNaN(decimals)) {
+        num = parseFloat(num.toFixed(decimals));
+    }
+    let formatted = num;
+    if (fmt.numCommaVal === 'on') {
+        formatted = num.toLocaleString();
+    }
+    if (fmt.numCurrencyVal === 'dollar') {
+        formatted = `$${formatted}`;
+    }
+    if (fmt.numPercentVal === '1' || fmt.numPercentVal === '100') {
+        formatted = `${formatted}%`;
+    }
+    return formatted;
+}
+function formatDate(value, fmt, locale) {
+    let valueStr;
+    if (value instanceof Date) {
+        valueStr = value.toISOString();
+    }
+    else {
+        valueStr = String(value);
+    }
+    // Make sure we are dealing with a valid date string before we go any further.
+    if (!isDateString(valueStr)) {
+        return value;
+    }
+    // Remove time zone and milliseconds from date string.
+    valueStr = valueStr.replace(/Z/i, '');
+    valueStr = valueStr.replace(/\.\d+$/, '');
+    // Initialize date options and functionality.
+    const options = { hourCycle: 'h23' };
+    let formatDateEnabled = false;
+    const setOpt = (k, v) => {
+        if (v !== DEFAULT_VALUE_FORMAT_VALUE) {
+            options[k] = v;
+            formatDateEnabled = true;
+        }
+    };
+    setOpt('year', fmt.dteYearVal);
+    setOpt('month', fmt.dteMonthVal);
+    setOpt('day', fmt.dteDayVal);
+    setOpt('weekday', fmt.dteWeekdayVal);
+    setOpt('hour', fmt.dteHourVal);
+    setOpt('minute', fmt.dteMinuteVal);
+    setOpt('second', fmt.dteSecondVal);
+    setOpt('hourCycle', fmt.dteHourcycleVal === 'h24' ? 'h23' : fmt.dteHourcycleVal);
+    // Handle simple date edge cases.
+    if (valueStr.length === 10) {
+        // Special handling for ISO-ish short date string (YYYY-AA-BB or AA-BB-YYYY).
+        const c4 = valueStr.at(4);
+        const c5 = valueStr.at(5);
+        if (c4 === '-' || c4 === '/' || c5 === '-' || c5 === '/') {
+            valueStr += ' 00:00:00'; // Make sure time is zero'd out.
+            if (!formatDateEnabled) {
+                setOpt('day', '2-digit');
+                setOpt('month', '2-digit');
+                setOpt('year', 'numeric');
+            }
+        }
+    }
+    else if (valueStr.length === 8) {
+        // Special handling for ISO-ish shorter date string (YY-MM-DD in any order).
+        const c2 = valueStr.at(2);
+        const c5 = valueStr.at(5);
+        if ((c2 === '-' && c5 === '-') || (c2 === '/' && c5 === '/')) {
+            valueStr += ' 00:00:00'; // Make sure time is zero'd out.
+            if (!formatDateEnabled) {
+                setOpt('day', '2-digit');
+                setOpt('month', '2-digit');
+                setOpt('year', '2-digit');
+            }
+        }
+    }
+    let dteStr = new Date(valueStr).toLocaleString(locale, options);
+    // NOTE: by default, we should use slash as separator.
+    if (fmt.dteSeparatorVal === DEFAULT_VALUE_FORMAT_VALUE) {
+        dteStr = dteStr.replaceAll('-', '/');
+    }
+    else if (fmt.dteSeparatorVal === 'dash') {
+        dteStr = dteStr.replaceAll('/', '-');
+    }
+    else if (fmt.dteSeparatorVal === 'slash') {
+        dteStr = dteStr.replaceAll('-', '/');
+    }
+    dteStr = dteStr.replaceAll(',', '');
+    // We want to preserve simple dates.
+    // If no is formatting detected, the date's length should not be greater than the original value's.
+    if (!formatDateEnabled) {
+        dteStr = dteStr.substring(0, value.length);
+        dteStr = dteStr.trim();
+        // Trim any separator characters off.
+        if (dteStr.endsWith('-') || dteStr.endsWith('/') || dteStr.endsWith(':') || dteStr.endsWith('.') || dteStr.endsWith('T')) {
+            dteStr = dteStr.substring(0, dteStr.length - 1).trim();
+        }
+    }
+    return dteStr;
+}
+export var ConditionalFormatRule;
+(function (ConditionalFormatRule) {
+    // TEXT:
+    ConditionalFormatRule["CONTAINS"] = "conditional-format-rule-contains";
+    ConditionalFormatRule["DOES_NOT_CONTAIN"] = "conditional-format-rule-does-not-contain";
+    ConditionalFormatRule["BEGINS_WITH"] = "conditional-format-rule-begins-with";
+    ConditionalFormatRule["ENDS_WITH"] = "conditional-format-rule-ends-with";
+    // NUMBER:
+    ConditionalFormatRule["GREATER_THAN"] = "conditional-format-rule-greater-than";
+    ConditionalFormatRule["GREATER_THAN_OR_EQUAL_TO"] = "conditional-format-rule-greater-than-or-equal-to";
+    ConditionalFormatRule["LESS_THAN"] = "conditional-format-rule-less-than";
+    ConditionalFormatRule["LESS_THAN_OR_EQUAL_TO"] = "conditional-format-rule-less-than-or-equal-to";
+    ConditionalFormatRule["BETWEEN"] = "conditional-format-rule-between";
+    // ANY:
+    ConditionalFormatRule["EQUALS"] = "conditional-format-rule-equals";
+    ConditionalFormatRule["DOES_NOT_EQUAL"] = "conditional-format-rule-does-not-equal";
+    ConditionalFormatRule["BLANK"] = "conditional-format-rule-blank";
+    ConditionalFormatRule["NOT_BLANK"] = "conditional-format-rule-not-blank";
+})(ConditionalFormatRule || (ConditionalFormatRule = {}));
+export const CONDITIONAL_FORMAT_RULES = [
+    ConditionalFormatRule.EQUALS,
+    ConditionalFormatRule.DOES_NOT_EQUAL,
+    ConditionalFormatRule.BLANK,
+    ConditionalFormatRule.NOT_BLANK,
+    ConditionalFormatRule.CONTAINS,
+    ConditionalFormatRule.DOES_NOT_CONTAIN,
+    ConditionalFormatRule.BEGINS_WITH,
+    ConditionalFormatRule.ENDS_WITH,
+    ConditionalFormatRule.GREATER_THAN,
+    ConditionalFormatRule.GREATER_THAN_OR_EQUAL_TO,
+    ConditionalFormatRule.LESS_THAN,
+    ConditionalFormatRule.LESS_THAN_OR_EQUAL_TO,
+    ConditionalFormatRule.BETWEEN
+];
+export const CONDITIONAL_FORMAT_RULES_TEXT = [
+    ConditionalFormatRule.EQUALS,
+    ConditionalFormatRule.DOES_NOT_EQUAL,
+    ConditionalFormatRule.BLANK,
+    ConditionalFormatRule.NOT_BLANK,
+    ConditionalFormatRule.CONTAINS,
+    ConditionalFormatRule.DOES_NOT_CONTAIN,
+    ConditionalFormatRule.BEGINS_WITH,
+    ConditionalFormatRule.ENDS_WITH
+];
+export const CONDITIONAL_FORMAT_RULES_NUMBER = [
+    ConditionalFormatRule.EQUALS,
+    ConditionalFormatRule.DOES_NOT_EQUAL,
+    ConditionalFormatRule.BLANK,
+    ConditionalFormatRule.NOT_BLANK,
+    ConditionalFormatRule.GREATER_THAN,
+    ConditionalFormatRule.GREATER_THAN_OR_EQUAL_TO,
+    ConditionalFormatRule.LESS_THAN,
+    ConditionalFormatRule.LESS_THAN_OR_EQUAL_TO,
+    ConditionalFormatRule.BETWEEN
+];
+export const CONDITIONAL_FORMAT_RULES_BOOLEAN = [
+    ConditionalFormatRule.EQUALS,
+    ConditionalFormatRule.DOES_NOT_EQUAL,
+    ConditionalFormatRule.BLANK,
+    ConditionalFormatRule.NOT_BLANK
+];
+export var ConditionalFormatStyle;
+(function (ConditionalFormatStyle) {
+    ConditionalFormatStyle["NONE"] = "conditional-format-style-none";
+    ConditionalFormatStyle["GREEN_BACKGROUND"] = "conditional-format-style-green-background";
+    ConditionalFormatStyle["YELLOW_BACKGROUND"] = "conditional-format-style-yellow-background";
+    ConditionalFormatStyle["RED_BACKGROUND"] = "conditional-format-style-red-background";
+    ConditionalFormatStyle["BLUE_BACKGROUND"] = "conditional-format-style-blue-background";
+    ConditionalFormatStyle["PURPLE_BACKGROUND"] = "conditional-format-style-purple-background";
+    ConditionalFormatStyle["BOLD"] = "conditional-format-style-bold";
+    ConditionalFormatStyle["GREEN_BOLD"] = "conditional-format-style-green-bold";
+    ConditionalFormatStyle["YELLOW_BOLD"] = "conditional-format-style-yellow-bold";
+    ConditionalFormatStyle["RED_BOLD"] = "conditional-format-style-red-bold";
+    ConditionalFormatStyle["BLUE_BOLD"] = "conditional-format-style-blue-bold";
+    ConditionalFormatStyle["PURPLE_BOLD"] = "conditional-format-style-purple-bold";
+    ConditionalFormatStyle["NOT_IMPORTANT"] = "conditional-format-style-not-important";
+})(ConditionalFormatStyle || (ConditionalFormatStyle = {}));
+export function evaluateConditionalFormat(condFmt, dataType, value) {
+    const isBlank = (v) => v === null || v === undefined || (dataType !== 'number' && dataType !== 'boolean' && v === '');
+    const v1 = condFmt.value;
+    const v2 = condFmt.value2;
+    const ruleHandlers = {
+        [ConditionalFormatRule.EQUALS]: () => value == v1,
+        [ConditionalFormatRule.DOES_NOT_EQUAL]: () => value != v1,
+        [ConditionalFormatRule.GREATER_THAN]: () => value > v1,
+        [ConditionalFormatRule.GREATER_THAN_OR_EQUAL_TO]: () => value >= v1,
+        [ConditionalFormatRule.LESS_THAN]: () => value < v1,
+        [ConditionalFormatRule.LESS_THAN_OR_EQUAL_TO]: () => value <= v1,
+        [ConditionalFormatRule.BETWEEN]: () => value >= v1 && value <= (v2 ?? 0),
+        [ConditionalFormatRule.CONTAINS]: () => String(value).includes(v1),
+        [ConditionalFormatRule.DOES_NOT_CONTAIN]: () => !String(value).includes(v1),
+        [ConditionalFormatRule.BEGINS_WITH]: () => String(value).startsWith(v1),
+        [ConditionalFormatRule.ENDS_WITH]: () => String(value).endsWith(v1),
+        [ConditionalFormatRule.BLANK]: () => isBlank(value),
+        [ConditionalFormatRule.NOT_BLANK]: () => !isBlank(value)
+    };
+    try {
+        const fn = ruleHandlers[condFmt.rule];
+        return fn ? fn() : false;
+    }
+    catch {
+        return false;
+    }
+}
+export function evaluateValueStyles(datagridState, columnName, value) {
+    const styles = [];
+    // Reminder: Value Formatting is performed **before** Conditional Formatting.
+    // https://chatwms.io/user-manual/concepts/column-formatting#conditional-formatting
+    const colFmt = datagridState.columnFormats?.find(colFmt => colFmt.displayName === columnName);
+    if (!!colFmt) {
+        for (const condFmt of colFmt.conditionalFormats.slice().reverse()) {
+            // `conditionalFormats` has already been sorted by `sequence`.
+            // NOTE: need to reverse the array for sequence to be correctly applied.
+            // NOTE: using `slice` to make shallow copy of array since `reverse` does so in place.
+            if (evaluateConditionalFormat(condFmt, colFmt.type, formatNumberEnabled(colFmt.valueFormat) ? stripNumericValueFormat(value) : value)) {
+                styles.push(condFmt.style);
+            }
+        }
+    }
+    return styles;
+}
+export function initDatagridCondition() {
+    return {
+        columnName: '',
+        dataType: '',
+        rule: '',
+        value: ''
+    };
+}
+export async function summarizeCondition(condition, localeMessageFn) {
+    let ruleStr = '';
+    switch (condition.rule) {
+        case ConditionalFormatRule.BETWEEN:
+            ruleStr = `${await localeMessageFn(CHATWMS_DEFAULT_LANGUAGE, condition.rule)} ${condition.value} ${await localeMessageFn(CHATWMS_DEFAULT_LANGUAGE, 'conditional-format-rule-and')} ${condition.value2}`;
+            break;
+        case ConditionalFormatRule.BLANK:
+        case ConditionalFormatRule.NOT_BLANK:
+            ruleStr = `${await localeMessageFn(CHATWMS_DEFAULT_LANGUAGE, condition.rule)}`;
+            break;
+        default:
+            if (condition.dataType === 'text') {
+                ruleStr = `${await localeMessageFn(CHATWMS_DEFAULT_LANGUAGE, condition.rule)} '${condition.value}'`;
+            }
+            else {
+                ruleStr = `${await localeMessageFn(CHATWMS_DEFAULT_LANGUAGE, condition.rule)} ${condition.value}`;
+            }
+            break;
+    }
+    return `${condition.columnName} ${ruleStr}`;
+}
+export async function summarizeConditionMarkdown(condition, localeMessageFn) {
+    let ruleStr = '';
+    switch (condition.rule) {
+        case ConditionalFormatRule.BETWEEN:
+            ruleStr = `${await localeMessageFn(CHATWMS_DEFAULT_LANGUAGE, condition.rule)} ${condition.value} ${await localeMessageFn(CHATWMS_DEFAULT_LANGUAGE, 'conditional-format-rule-and')} ${condition.value2}`;
+            break;
+        case ConditionalFormatRule.BLANK:
+        case ConditionalFormatRule.NOT_BLANK:
+            ruleStr = `${await localeMessageFn(CHATWMS_DEFAULT_LANGUAGE, condition.rule)}`;
+            break;
+        default:
+            if (condition.dataType === 'text') {
+                ruleStr = `${await localeMessageFn(CHATWMS_DEFAULT_LANGUAGE, condition.rule)} '${condition.value}'`;
+            }
+            else {
+                ruleStr = `${await localeMessageFn(CHATWMS_DEFAULT_LANGUAGE, condition.rule)} ${condition.value}`;
+            }
+            break;
+    }
+    return `\`${condition.columnName}\` ${ruleStr}`;
+}
+export async function summarizeConditionHtml(condition, localeMessageFn) {
+    let ruleStr = '';
+    switch (condition.rule) {
+        case ConditionalFormatRule.BETWEEN:
+            ruleStr = `${await localeMessageFn(CHATWMS_DEFAULT_LANGUAGE, condition.rule)} ${condition.value} ${await localeMessageFn(CHATWMS_DEFAULT_LANGUAGE, 'conditional-format-rule-and')} ${condition.value2}`;
+            break;
+        case ConditionalFormatRule.BLANK:
+        case ConditionalFormatRule.NOT_BLANK:
+            ruleStr = `${await localeMessageFn(CHATWMS_DEFAULT_LANGUAGE, condition.rule)}`;
+            break;
+        default:
+            if (condition.dataType === 'text') {
+                ruleStr = `${await localeMessageFn(CHATWMS_DEFAULT_LANGUAGE, condition.rule)} '${condition.value}'`;
+            }
+            else {
+                ruleStr = `${await localeMessageFn(CHATWMS_DEFAULT_LANGUAGE, condition.rule)} ${condition.value}`;
+            }
+            break;
+    }
+    return `<code>${condition.columnName}</code> ${ruleStr}`;
+}
+export function codifyCondition(condition) {
+    // NOTE: since we check for action/unsafe SQL with every query, we do not need to check for SQL injection here.
+    if (condition.dataType === 'number') {
+        const v1 = !condition.value || condition.value == '' ? 0 : condition.value;
+        const v2 = !condition.value2 || condition.value2 == '' ? 0 : condition.value2;
+        // Need to wrap in quotes due to how ChatWMS will alias columns (ex: location_id -> Location ID).
+        const quotedColumnName = `"${condition.columnName}"`;
+        switch (condition.rule) {
+            case ConditionalFormatRule.EQUALS:
+                return `${quotedColumnName} = ${v1}`;
+            case ConditionalFormatRule.DOES_NOT_EQUAL:
+                return `${quotedColumnName} != ${v1}`;
+            case ConditionalFormatRule.GREATER_THAN:
+                return `${quotedColumnName} > ${v1}`;
+            case ConditionalFormatRule.GREATER_THAN_OR_EQUAL_TO:
+                return `${quotedColumnName} >= ${v1}`;
+            case ConditionalFormatRule.LESS_THAN:
+                return `${quotedColumnName} < ${v1}`;
+            case ConditionalFormatRule.LESS_THAN_OR_EQUAL_TO:
+                return `${quotedColumnName} <= ${v1}`;
+            case ConditionalFormatRule.BETWEEN:
+                return `${quotedColumnName} BETWEEN ${v1} AND ${v2}`;
+            case ConditionalFormatRule.BLANK:
+                return `${quotedColumnName} IS NULL`;
+            case ConditionalFormatRule.NOT_BLANK:
+                return `${quotedColumnName} IS NOT NULL`;
+            default:
+                return '1 = 2'; // Fail if we get here.
+        }
+    }
+    else if (condition.dataType === 'date') {
+        const v1 = !condition.value || condition.value == '' ? 0 : condition.value;
+        const v2 = !condition.value2 || condition.value2 == '' ? 0 : condition.value2;
+        // Need to wrap in quotes due to how ChatWMS will alias columns (ex: location_id -> Location ID).
+        const quotedColumnName = `"${condition.columnName}"`;
+        switch (condition.rule) {
+            case ConditionalFormatRule.EQUALS:
+                return `${quotedColumnName} = '${v1}'`;
+            case ConditionalFormatRule.DOES_NOT_EQUAL:
+                return `${quotedColumnName} != '${v1}'`;
+            case ConditionalFormatRule.GREATER_THAN:
+                return `${quotedColumnName} > '${v1}'`;
+            case ConditionalFormatRule.GREATER_THAN_OR_EQUAL_TO:
+                return `${quotedColumnName} >= '${v1}'`;
+            case ConditionalFormatRule.LESS_THAN:
+                return `${quotedColumnName} < '${v1}'`;
+            case ConditionalFormatRule.LESS_THAN_OR_EQUAL_TO:
+                return `${quotedColumnName} <= '${v1}'`;
+            case ConditionalFormatRule.BETWEEN:
+                return `${quotedColumnName} BETWEEN '${v1}' AND '${v2}'`;
+            case ConditionalFormatRule.BLANK:
+                return `${quotedColumnName} IS NULL`;
+            case ConditionalFormatRule.NOT_BLANK:
+                return `${quotedColumnName} IS NOT NULL`;
+            default:
+                return '1 = 2'; // Fail if we get here.
+        }
+    }
+    else {
+        // NOTE: it is a safe assumption to trim any whitespace off the value.
+        const v1 = (condition.value ?? '__DUMMY__').trim();
+        // Need to wrap in quotes due to how ChatWMS will alias columns (ex: location_id -> Location ID).
+        // NOTE: wrapping column and values in `UPPER` to support case insensitivity.
+        const quotedColumnName = `UPPER("${condition.columnName}")`;
+        switch (condition.rule) {
+            case ConditionalFormatRule.EQUALS:
+                return `${quotedColumnName} = UPPER('${v1}')`;
+            case ConditionalFormatRule.DOES_NOT_EQUAL:
+                return `${quotedColumnName} != UPPER('${v1}')`;
+            case ConditionalFormatRule.CONTAINS:
+                return `${quotedColumnName} LIKE UPPER('%${v1}%')`;
+            case ConditionalFormatRule.DOES_NOT_CONTAIN:
+                return `${quotedColumnName} NOT LIKE UPPER('%${v1}%')`;
+            case ConditionalFormatRule.BEGINS_WITH:
+                return `${quotedColumnName} LIKE UPPER('${v1}%')`;
+            case ConditionalFormatRule.ENDS_WITH:
+                return `${quotedColumnName} LIKE UPPER('%${v1}')`;
+            case ConditionalFormatRule.BLANK:
+                return `${quotedColumnName} IS NULL`;
+            case ConditionalFormatRule.NOT_BLANK:
+                return `${quotedColumnName} IS NOT NULL`;
+            default:
+                return '1 = 2'; // Fail if we get here.
+        }
+    }
+}
+/**
+ * Equivalent of `parseNumeric` in front end
+ *
+ * https://github.com/cellaware/chatwms-az-swa-ng/blob/development/src/app/utils/data.ts#L126
+ */
+export function stripNumericValueFormat(value) {
+    // NOTE: this syntax checks for both undefined and null.
+    if (value == null) {
+        return null;
+    }
+    if (typeof value === 'number') {
+        return value;
+    }
+    // Remove commas, dollar signs, percent signs
+    const cleaned = value.replace(/[$,%]/g, '').replace(/,/g, '');
+    // NOTE: not sure we need this based on how this function is used in these contexts...
+    // const number = parseFloat(cleaned);
+    // return isNaN(number) ? null : number;
+    return cleaned;
+}
+function buildDatagridConditionEvaluator(condition) {
+    const v1 = condition.value;
+    const v2 = condition.value2;
+    const isBlank = (v) => v === null || v === undefined || (condition.dataType !== 'number' && condition.dataType !== 'boolean' && v === '');
+    if (condition.dataType === 'number') {
+        switch (condition.rule) {
+            case ConditionalFormatRule.EQUALS:
+                return v => stripNumericValueFormat(v) == v1;
+            case ConditionalFormatRule.DOES_NOT_EQUAL:
+                return v => stripNumericValueFormat(v) != v1;
+            case ConditionalFormatRule.GREATER_THAN:
+                return v => stripNumericValueFormat(v) > v1;
+            case ConditionalFormatRule.GREATER_THAN_OR_EQUAL_TO:
+                return v => stripNumericValueFormat(v) >= v1;
+            case ConditionalFormatRule.LESS_THAN:
+                return v => stripNumericValueFormat(v) < v1;
+            case ConditionalFormatRule.LESS_THAN_OR_EQUAL_TO:
+                return v => stripNumericValueFormat(v) <= v1;
+            case ConditionalFormatRule.BETWEEN:
+                return v => stripNumericValueFormat(v) >= v1 && stripNumericValueFormat(v) <= (v2 ?? v1); // fallback to v1 if v2 missing
+            case ConditionalFormatRule.BLANK:
+                return v => isBlank(v);
+            case ConditionalFormatRule.NOT_BLANK:
+                return v => !isBlank(v);
+            default:
+                return () => false;
+        }
+    }
+    else {
+        switch (condition.rule) {
+            case ConditionalFormatRule.EQUALS:
+                return v => v == v1;
+            case ConditionalFormatRule.DOES_NOT_EQUAL:
+                return v => v != v1;
+            case ConditionalFormatRule.CONTAINS:
+                return v => typeof v === 'string' && v.includes(v1);
+            case ConditionalFormatRule.DOES_NOT_CONTAIN:
+                return v => typeof v === 'string' && !v.includes(v1);
+            case ConditionalFormatRule.BEGINS_WITH:
+                return v => typeof v === 'string' && v.startsWith(v1);
+            case ConditionalFormatRule.ENDS_WITH:
+                return v => typeof v === 'string' && v.endsWith(v1);
+            case ConditionalFormatRule.BLANK:
+                return v => isBlank(v);
+            case ConditionalFormatRule.NOT_BLANK:
+                return v => !isBlank(v);
+            default:
+                return () => false;
+        }
+    }
+}
+function buildPivotDatagridConditionEvaluator(condition, columnNames) {
+    const fn = buildDatagridConditionEvaluator(condition);
+    return row => columnNames.some(columnName => fn(row[columnName]));
+}
+function evaluateDatagridCondition(rows, condition) {
+    const fn = buildDatagridConditionEvaluator(condition);
+    return rows.filter(row => fn(row[condition.columnName]));
+}
+function evaluatePivotDatagridCondition(rows, condition, mappedColumnNames) {
+    let columnNames = [condition.columnName];
+    const mappedColumnNamesSet = mappedColumnNames.get(condition.columnName);
+    if (!!mappedColumnNamesSet) {
+        columnNames = Array.from(mappedColumnNamesSet);
+    }
+    const fn = buildPivotDatagridConditionEvaluator(condition, columnNames);
+    return rows.filter(row => fn(row));
+}
+function parseColumnState(columnState) {
+    const rowGroupCols = [];
+    const pivotCols = [];
+    const valueCols = [];
+    const sortModel = [];
+    for (const col of columnState) {
+        // Row Group Columns:
+        // NOTE: we only want the highest level data.
+        if (col.rowGroup && col.rowGroupIndex === 0) {
+            rowGroupCols.push({
+                field: col.colId
+            });
+        }
+        // Pivot Columns:
+        // NOTE: we only want the highest level data.
+        if (col.pivot && col.pivotIndex === 0) {
+            pivotCols.push({
+                field: col.colId
+            });
+        }
+        // Value Columns (Aggregations):
+        if (col.aggFunc) {
+            valueCols.push({
+                field: col.colId,
+                aggFunc: col.aggFunc
+            });
+        }
+        // Sorting:
+        if (col.sort) {
+            sortModel.push({
+                colId: col.colId,
+                sort: col.sort
+            });
+        }
+    }
+    // NOTE: commenting this out since we only care about the highest level data.
+    // rowGroupCols.sort((a, b) => {
+    //     const iA = columnState.find(c => c.colId === a.field)?.rowGroupIndex ?? 0;
+    //     const iB = columnState.find(c => c.colId === b.field)?.rowGroupIndex ?? 0;
+    //     return iA - iB;
+    // });
+    // pivotCols.sort((a, b) => {
+    //     const iA = columnState.find(c => c.colId === a.field)?.pivotIndex ?? 0;
+    //     const iB = columnState.find(c => c.colId === b.field)?.pivotIndex ?? 0;
+    //     return iA - iB;
+    // });
+    sortModel.sort((a, b) => {
+        const iA = columnState.find(c => c.colId === a.colId)?.sortIndex ?? 0;
+        const iB = columnState.find(c => c.colId === b.colId)?.sortIndex ?? 0;
+        return iA - iB;
+    });
+    return {
+        rowGroupCols,
+        pivotCols,
+        valueCols,
+        sortModel
+    };
+}
+function filterRows(data, filterModel) {
+    const textOps = {
+        equals: (v, f) => (v ?? '').toLowerCase() === f.toLowerCase(),
+        notEqual: (v, f) => (v ?? '').toLowerCase() !== f.toLowerCase(),
+        contains: (v, f) => (v ?? '').toLowerCase().includes(f.toLowerCase()),
+        notContains: (v, f) => !(v ?? '').toLowerCase().includes(f.toLowerCase()),
+        startsWith: (v, f) => (v ?? '').toLowerCase().startsWith(f.toLowerCase()),
+        endsWith: (v, f) => (v ?? '').toLowerCase().endsWith(f.toLowerCase()),
+        blank: (v) => v == null || v === '',
+        notBlank: (v) => !(v == null || v === '')
+    };
+    const numberOps = {
+        equals: (v, f) => v == f,
+        notEqual: (v, f) => v != f,
+        lessThan: (v, f) => v < f,
+        lessThanOrEqual: (v, f) => v <= f,
+        greaterThan: (v, f) => v > f,
+        greaterThanOrEqual: (v, f) => v >= f,
+        inRange: (v, f, t) => v >= f && v <= t,
+        blank: (v) => v == null,
+        notBlank: (v) => v != null
+    };
+    function checkCondition(value, cond) {
+        const { filterType, type, filter, filterTo, values } = cond;
+        if (filterType === 'text') {
+            const fn = textOps[type ?? 'contains'];
+            return fn?.(value, filter);
+        }
+        if (filterType === 'number') {
+            const fn = numberOps[type ?? 'equals'];
+            return type === 'inRange'
+                ? fn?.(value, filter, filterTo)
+                : fn?.(value, filter);
+        }
+        if (filterType === 'set') {
+            // Only boolean types are supported by set filter -- need to represent as string for comparison.
+            return (values ?? []).includes(`${value}`);
+        }
+        return true;
+    }
+    function compilePredicate(model) {
+        return (row) => {
+            return Object.entries(model).every(([field, filter]) => {
+                const value = row[field];
+                if ('conditions' in filter && Array.isArray(filter.conditions)) {
+                    const logicFn = filter.operator === 'OR' ? 'some' : 'every';
+                    return filter.conditions[logicFn](cond => checkCondition(value, cond));
+                }
+                else {
+                    return checkCondition(value, filter);
+                }
+            });
+        };
+    }
+    const predicate = compilePredicate(filterModel);
+    return data.filter(predicate);
+}
+function pivotData(data, rowGroupCols, pivotCols, valueCols) {
+    const groupBy = (row) => Object.fromEntries(rowGroupCols.map(col => [col.field, row[col.field]]));
+    const pivotBy = (row) => pivotCols.map(col => row[col.field]).join('_');
+    const grouped = new Map();
+    for (const row of data) {
+        const groupKey = JSON.stringify(groupBy(row));
+        if (!grouped.has(groupKey)) {
+            grouped.set(groupKey, []);
+        }
+        grouped.get(groupKey).push(row);
+    }
+    const rows = [];
+    const mappedColumnNames = new Map();
+    for (const [groupKey, groupRows] of grouped.entries()) {
+        const groupObj = JSON.parse(groupKey);
+        const pivotBuckets = new Map();
+        for (const row of groupRows) {
+            const pivotKey = pivotBy(row);
+            if (!pivotBuckets.has(pivotKey)) {
+                pivotBuckets.set(pivotKey, []);
+            }
+            pivotBuckets.get(pivotKey).push(row);
+        }
+        for (const [pivotKey, rows] of pivotBuckets.entries()) {
+            for (const { field, aggFunc } of valueCols) {
+                const values = rows.map(r => r[field] ?? 0);
+                const key = `${pivotKey} ${field}`;
+                let columnNames = mappedColumnNames.get(field);
+                if (!!columnNames) {
+                    columnNames.add(key);
+                }
+                else {
+                    columnNames = new Set([key]);
+                    mappedColumnNames.set(field, columnNames);
+                }
+                switch (aggFunc) {
+                    case 'sum':
+                        groupObj[key] = values.map(Number).reduce((a, b) => a + b, 0);
+                        if (!groupObj[key]) {
+                            groupObj[key] = 0;
+                        }
+                        break;
+                    case 'count':
+                        groupObj[key] = values.length;
+                        if (!groupObj[key]) {
+                            groupObj[key] = 0;
+                        }
+                        break;
+                    case 'min':
+                        groupObj[key] = values.reduce((a, b) => (a < b ? a : b), values[0]);
+                        if (!groupObj[key]) {
+                            groupObj[key] = 0;
+                        }
+                        break;
+                    case 'max':
+                        groupObj[key] = values.reduce((a, b) => (a > b ? a : b), values[0]);
+                        if (!groupObj[key]) {
+                            groupObj[key] = 0;
+                        }
+                        break;
+                    case 'avg': {
+                        const nums = values.map(Number).filter(n => !isNaN(n));
+                        groupObj[key] = nums.length ? nums.reduce((a, b) => a + b, 0) / nums.length : null;
+                        if (!groupObj[key]) {
+                            groupObj[key] = 0;
+                        }
+                        break;
+                    }
+                    case 'first':
+                        groupObj[key] = values[0];
+                        if (!groupObj[key]) {
+                            groupObj[key] = '';
+                        }
+                        break;
+                    case 'last':
+                        groupObj[key] = values[values.length - 1];
+                        if (!groupObj[key]) {
+                            groupObj[key] = '';
+                        }
+                        break;
+                    default:
+                        groupObj[key] = '';
+                }
+            }
+        }
+        rows.push(groupObj);
+    }
+    return { rows, mappedColumnNames };
+}
+function groupAndAggregate(data, rowGroupCols, groupKeys, valueCols) {
+    const level = groupKeys.length;
+    const groupField = rowGroupCols[level]?.field;
+    if (!groupField) {
+        return data;
+    }
+    const grouped = new Map();
+    for (const row of data) {
+        const key = row[groupField];
+        if (!grouped.has(key))
+            grouped.set(key, []);
+        grouped.get(key).push(row);
+    }
+    const output = [];
+    for (const [key, rows] of grouped.entries()) {
+        if (level < rowGroupCols.length - 1) {
+            output.push({
+                group: true,
+                key,
+                children: groupAndAggregate(rows, rowGroupCols, [...groupKeys, key], valueCols)
+            });
+        }
+        else {
+            const aggData = {};
+            for (const { field, aggFunc } of valueCols) {
+                const rawValues = rows.map(r => r[field]).filter(v => v != null);
+                switch (aggFunc) {
+                    case 'sum': {
+                        const nums = rawValues.map(Number).filter(v => !isNaN(v));
+                        aggData[field] = nums.reduce((a, b) => a + b, 0);
+                        break;
+                    }
+                    case 'avg': {
+                        const nums = rawValues.map(Number).filter(v => !isNaN(v));
+                        const total = nums.reduce((a, b) => a + b, 0);
+                        aggData[field] = nums.length > 0 ? total / nums.length : null;
+                        break;
+                    }
+                    case 'min':
+                        aggData[field] = rawValues.reduce((a, b) => (a < b ? a : b), rawValues[0]);
+                        break;
+                    case 'max':
+                        aggData[field] = rawValues.reduce((a, b) => (a > b ? a : b), rawValues[0]);
+                        break;
+                    case 'count':
+                        aggData[field] = rawValues.length;
+                        break;
+                    case 'first':
+                        aggData[field] = rawValues[0];
+                        break;
+                    case 'last':
+                        aggData[field] = rawValues[rawValues.length - 1];
+                        break;
+                    default:
+                        aggData[field] = null;
+                }
+            }
+            // NOTE: we only want the highest level data -- we don't care about child rows.
+            output.push({
+                [groupField]: key,
+                ...aggData,
+                // children: rows
+            });
+        }
+    }
+    return output;
+}
+function sortRows(data, sortModel) {
+    return [...data].sort((a, b) => {
+        for (const { colId, sort } of sortModel) {
+            const valA = a[colId];
+            const valB = b[colId];
+            if (valA === valB)
+                continue;
+            const cmp = valA > valB ? 1 : -1;
+            return sort === 'asc' ? cmp : -cmp;
+        }
+        return 0;
+    });
+}
+function processHtmlStyles(value, columnName, columnFormat, rowStyles, columnStyles) {
+    let columnStyle = {
+        columnName,
+        styles: []
+    };
+    // Reminder: Value Formatting is performed **before** Conditional Formatting.
+    // https://chatwms.io/user-manual/concepts/column-formatting#conditional-formatting
+    for (const condFmt of columnFormat.conditionalFormats.slice().reverse()) {
+        // `conditionalFormats` has already been sorted by `sequence`.
+        // NOTE: need to reverse the array for sequence to be correctly applied.
+        // NOTE: using `slice` to make shallow copy of array since `reverse` does so in place.
+        if (evaluateConditionalFormat(condFmt, columnFormat.type, formatNumberEnabled(columnFormat.valueFormat) ? stripNumericValueFormat(value) : value)) {
+            if (condFmt.row) {
+                rowStyles.push(condFmt.style);
+            }
+            else {
+                columnStyle.styles.push(condFmt.style);
+            }
+        }
+    }
+    columnStyles.push(columnStyle);
+    return [rowStyles, columnStyles];
+}
+function processHtmlTransposeStyles(value, columnName, columnFormat, columnStyles) {
+    let columnStyle = {
+        columnName,
+        styles: []
+    };
+    // Everything is the same as ^^^ except for row styles -- we will consolidate those into columns styles.
+    for (const condFmt of columnFormat.conditionalFormats.slice().reverse()) {
+        if (evaluateConditionalFormat(condFmt, columnFormat.type, formatNumberEnabled(columnFormat.valueFormat) ? stripNumericValueFormat(value) : value)) {
+            columnStyle.styles.push(condFmt.style);
+        }
+    }
+    columnStyles.push(columnStyle);
+    return columnStyles;
+}
+export function mapTeamsStyles(columnNames, htmlRowStyles, htmlColumnStyles, teamsRowStyles, teamsColumnStyles) {
+    // IMPORTANT: both column/row style sorting have **already** been reversed (line 1170).
+    // We can simply iterate over all the matched styles and accumulate them.
+    const getColumnStyle = (style) => {
+        switch (style) {
+            case ConditionalFormatStyle.GREEN_BACKGROUND:
+                return {
+                    color: 'Good',
+                    style: 'good'
+                };
+            case ConditionalFormatStyle.YELLOW_BACKGROUND:
+                return {
+                    color: 'Warning',
+                    style: 'warning'
+                };
+            case ConditionalFormatStyle.RED_BACKGROUND:
+                return {
+                    color: 'Attention',
+                    style: 'attention'
+                };
+            case ConditionalFormatStyle.BLUE_BACKGROUND:
+            case ConditionalFormatStyle.PURPLE_BACKGROUND:
+                return {
+                    color: 'Accent',
+                    style: 'accent'
+                };
+            case ConditionalFormatStyle.BOLD:
+                return {
+                    weight: 'Bolder'
+                };
+            case ConditionalFormatStyle.GREEN_BOLD:
+                return {
+                    color: 'Good',
+                    weight: 'Bolder'
+                };
+            case ConditionalFormatStyle.YELLOW_BOLD:
+                return {
+                    color: 'Warning',
+                    weight: 'Bolder'
+                };
+            case ConditionalFormatStyle.RED_BOLD:
+                return {
+                    color: 'Attention',
+                    weight: 'Bolder'
+                };
+            case ConditionalFormatStyle.BLUE_BOLD:
+            case ConditionalFormatStyle.PURPLE_BOLD:
+                return {
+                    color: 'Accent',
+                    weight: 'Bolder'
+                };
+            case ConditionalFormatStyle.NOT_IMPORTANT:
+                return {
+                    isSubtle: true,
+                    italic: true,
+                    weight: 'Lighter'
+                };
+            default:
+                return {};
+        }
+    };
+    for (const htmlColumnStyle of htmlColumnStyles) {
+        teamsColumnStyles.push({
+            columnName: htmlColumnStyle.columnName,
+            styles: htmlColumnStyle.styles.map(style => getColumnStyle(style))
+        });
+    }
+    const applyRowStyleToColumns = (style) => {
+        for (const columnName of columnNames) {
+            const columnStyle = getColumnStyle(style);
+            const teamsColumnStyle = teamsColumnStyles.find(c => c.columnName === columnName);
+            if (!!teamsColumnStyle) {
+                teamsColumnStyle.styles.push(columnStyle);
+            }
+            else {
+                teamsColumnStyles.push({
+                    columnName,
+                    styles: [columnStyle]
+                });
+            }
+        }
+    };
+    for (const htmlRowStyle of htmlRowStyles) {
+        switch (htmlRowStyle) {
+            case ConditionalFormatStyle.GREEN_BACKGROUND:
+                teamsRowStyles.push('good');
+                applyRowStyleToColumns(htmlRowStyle);
+                break;
+            case ConditionalFormatStyle.YELLOW_BACKGROUND:
+                teamsRowStyles.push('warning');
+                applyRowStyleToColumns(htmlRowStyle);
+                break;
+            case ConditionalFormatStyle.RED_BACKGROUND:
+                teamsRowStyles.push('attention');
+                applyRowStyleToColumns(htmlRowStyle);
+                break;
+            case ConditionalFormatStyle.BLUE_BACKGROUND:
+            case ConditionalFormatStyle.PURPLE_BACKGROUND:
+                teamsRowStyles.push('accent');
+                applyRowStyleToColumns(htmlRowStyle);
+                break;
+            case ConditionalFormatStyle.BOLD:
+                applyRowStyleToColumns(htmlRowStyle);
+                break;
+            case ConditionalFormatStyle.GREEN_BOLD:
+                applyRowStyleToColumns(htmlRowStyle);
+                break;
+            case ConditionalFormatStyle.YELLOW_BOLD:
+                applyRowStyleToColumns(htmlRowStyle);
+                break;
+            case ConditionalFormatStyle.RED_BOLD:
+                applyRowStyleToColumns(htmlRowStyle);
+                break;
+            case ConditionalFormatStyle.BLUE_BOLD:
+            case ConditionalFormatStyle.PURPLE_BOLD:
+                applyRowStyleToColumns(htmlRowStyle);
+                break;
+            case ConditionalFormatStyle.NOT_IMPORTANT:
+                applyRowStyleToColumns(htmlRowStyle);
+                break;
+            default:
+                break;
+        }
+    }
+    return [teamsRowStyles, teamsColumnStyles];
+}
+export function mapTeamsTransposeStyles(htmlColumnStyle) {
+    // Generally the same logic as ^^^, just handling a few things differently for transpose.
+    const getColumnStyle = (style) => {
+        switch (style) {
+            case ConditionalFormatStyle.GREEN_BACKGROUND:
+                return {
+                    color: 'Good',
+                    style: 'good'
+                };
+            case ConditionalFormatStyle.YELLOW_BACKGROUND:
+                return {
+                    color: 'Warning',
+                    style: 'warning'
+                };
+            case ConditionalFormatStyle.RED_BACKGROUND:
+                return {
+                    color: 'Attention',
+                    style: 'attention'
+                };
+            case ConditionalFormatStyle.BLUE_BACKGROUND:
+            case ConditionalFormatStyle.PURPLE_BACKGROUND:
+                return {
+                    color: 'Accent',
+                    style: 'accent'
+                };
+            case ConditionalFormatStyle.BOLD:
+                return {
+                    weight: 'Bolder'
+                };
+            case ConditionalFormatStyle.GREEN_BOLD:
+                return {
+                    color: 'Good',
+                    weight: 'Bolder'
+                };
+            case ConditionalFormatStyle.YELLOW_BOLD:
+                return {
+                    color: 'Warning',
+                    weight: 'Bolder'
+                };
+            case ConditionalFormatStyle.RED_BOLD:
+                return {
+                    color: 'Attention',
+                    weight: 'Bolder'
+                };
+            case ConditionalFormatStyle.BLUE_BOLD:
+            case ConditionalFormatStyle.PURPLE_BOLD:
+                return {
+                    color: 'Accent',
+                    weight: 'Bolder'
+                };
+            case ConditionalFormatStyle.NOT_IMPORTANT:
+                return {
+                    isSubtle: true,
+                    italic: true,
+                    weight: 'Lighter'
+                };
+            default:
+                return {};
+        }
+    };
+    return {
+        columnName: htmlColumnStyle.columnName,
+        styles: htmlColumnStyle.styles.map(style => getColumnStyle(style))
+    };
+}
+function buildHtmlTableHeader(columnNames) {
+    let buf = '<table>\n\t<thead>\n\t\t<tr>';
+    for (const columnName of columnNames) {
+        buf += `\n\t\t\t<th>${truncateValue(columnName, 24)}</th>`;
+    }
+    buf += '\n\t\t</tr>\n\t</thead>';
+    buf += '\n\t<tbody>';
+    return buf;
+}
+function buildHtmlTableTransposeHeader() {
+    return '<table>\n\t<thead></thead>\n\t<tbody>';
+}
+function buildHtmlTableFooter() {
+    return '\n\t</tbody>\n</table>';
+}
+function buildHtmlRow(rowValues, rowStyles, columnStyles, columnCount) {
+    let buf = '';
+    // Apply row styles.
+    if (rowStyles.length > 0) {
+        buf += `\n\t\t<tr class="${rowStyles.join(' ')}">`;
+    }
+    else {
+        buf += '\n\t\t<tr>';
+    }
+    // Write cell values with styles.
+    let colIdx = 0;
+    for (const rowValue of rowValues) {
+        if (colIdx >= columnCount) {
+            break;
+        }
+        const truncValue = truncateValue(rowValue, 24);
+        if (columnStyles[colIdx].styles.length > 0) {
+            buf += `\n\t\t\t<td class="${columnStyles[colIdx].styles.join(' ')}">${truncValue}</td>`;
+        }
+        else {
+            buf += `\n\t\t\t<td>${truncValue}</td>`;
+        }
+        colIdx++;
+    }
+    buf += '\n\t\t</tr>';
+    return buf;
+}
+function buildHtmlTransposeRow(row, columnStyle) {
+    let buf = '';
+    buf += `\n\t\t\t<td style="font-size: 13px; font-weight: 600; padding: 15px 14px; background: white; justify-items: end; align-items: center; width: 33%;"><span style="display: grid;">${truncateValue(row.key, 24)}</span></td>`;
+    const truncValue = truncateValue(row.value, 42);
+    if (columnStyle.styles.length > 0) {
+        buf += `\n\t\t\t<td style="font-size: 16px; padding: 15px 14px; background: white;" class="${columnStyle.styles.join(' ')}">${truncValue}</td>`;
+    }
+    else {
+        buf += `\n\t\t\t<td style="font-size: 16px; padding: 15px 14px; background: white;">${truncValue}</td>`;
+    }
+    buf += '\n\t\t</tr>';
+    return buf;
+}
+function createTeamsTableColumnText(columnName) {
+    return {
+        type: "TextBlock",
+        text: truncateValue(columnName, 16),
+        size: "Small",
+        weight: "Bolder"
+    };
+}
+export function createTeamsTableColumns(columnNames) {
+    return {
+        type: "TableRow",
+        cells: columnNames.map((columnName) => ({
+            type: "TableCell",
+            items: [createTeamsTableColumnText(columnName)]
+        }))
+    };
+}
+function createTeamsTableCellText(value, columnStyle) {
+    let color = undefined;
+    let weight = undefined;
+    let isSubtle = undefined;
+    let italic = undefined;
+    for (const styles of columnStyle?.styles ?? []) {
+        if (!!styles.color) {
+            color = styles.color;
+        }
+        if (!!styles.weight) {
+            weight = styles.weight;
+        }
+        if (!!styles.isSubtle) {
+            isSubtle = styles.isSubtle;
+        }
+        if (!!styles.italic) {
+            italic = styles.italic;
+        }
+    }
+    const truncValue = truncateValue(value, 16);
+    return {
+        type: "TextBlock",
+        text: italic ? `*${truncValue}*` : truncValue,
+        size: "Small",
+        color,
+        weight,
+        isSubtle
+    };
+}
+function createTeamsTransposeTableCellText(value, key, columnStyle) {
+    // Same as ^^^, just a couple minor tweaks.
+    let color = undefined;
+    let weight = undefined;
+    let isSubtle = undefined;
+    let italic = undefined;
+    for (const styles of columnStyle?.styles ?? []) {
+        if (!!styles.color) {
+            color = styles.color;
+        }
+        if (!!styles.weight) {
+            weight = styles.weight;
+        }
+        if (!!styles.isSubtle) {
+            isSubtle = styles.isSubtle;
+        }
+        if (!!styles.italic) {
+            italic = styles.italic;
+        }
+    }
+    const truncValue = truncateValue(value, 16);
+    return {
+        type: "TextBlock",
+        text: italic ? `*${truncValue}*` : truncValue,
+        size: key ? "Small" : "Medium",
+        horizontalAlignment: key ? "Right" : "Left",
+        color,
+        weight,
+        isSubtle
+    };
+}
+export function createTeamsTableRow(columnNames, values, rowStyles, columnStyles) {
+    let rowStyle = undefined;
+    for (const style of rowStyles ?? []) {
+        rowStyle = style;
+    }
+    return {
+        type: "TableRow",
+        style: rowStyle,
+        cells: values.map((value, idx) => {
+            const columnName = columnNames[idx];
+            const columnStyle = columnStyles?.find(cs => cs.columnName === columnName);
+            let style = undefined;
+            for (const styles of columnStyle?.styles ?? []) {
+                if (!!styles.style) {
+                    style = styles.style;
+                }
+            }
+            return {
+                type: "TableCell",
+                style,
+                items: [createTeamsTableCellText(value, columnStyle)]
+            };
+        })
+    };
+}
+export function createTeamsTransposeTableRow(row, columnStyle) {
+    const keyCell = {
+        type: "TableCell",
+        items: [createTeamsTransposeTableCellText(row.key, true, {
+                columnName: 'key',
+                styles: [{ weight: 'Bolder' }]
+            })]
+    };
+    let style = undefined;
+    for (const styles of columnStyle?.styles ?? []) {
+        if (!!styles.style) {
+            style = styles.style;
+        }
+    }
+    const valueCell = {
+        type: "TableCell",
+        style,
+        items: [createTeamsTransposeTableCellText(row.value, false, columnStyle)]
+    };
+    return {
+        type: "TableRow",
+        cells: [keyCell, valueCell]
+    };
+}
+function getColumnSequenceRank(column, pivot) {
+    let seq = 2;
+    // Check pin state first.
+    // Important: we do not care about pinning if the grid is pivoted.
+    if (!pivot) {
+        if (column.pinned === 'left') {
+            seq = 0;
+        }
+        else if (column.pinned === 'right') {
+            seq = 3;
+        }
+    }
+    // Row group second.
+    if (!!column.rowGroup && column.rowGroupIndex === 0) {
+        seq = 1;
+    }
+    // Nothing else to check.
+    return seq;
+}
+/**
+ * **Important:** `html` and `teamsRows` output will be limited to **1,000 rows/24 rows** and **8 columns**, respectively.
+ *
+ * ~All outputs respect and will be filtered by optional `condition` argument.~
+ */
+export function transformDatagrid(rows, datagridState, locale, condition) {
+    const columnState = datagridState.columnState ?? [];
+    const filterModel = datagridState.filterModel ?? {};
+    const isPivotMode = !!datagridState.isPivotMode;
+    const columnFormats = datagridState.columnFormats ?? [];
+    const { rowGroupCols, pivotCols, valueCols, sortModel } = parseColumnState(columnState);
+    rows = filterRows(rows, filterModel);
+    let adjRows = [];
+    const chartRows = [];
+    let htmlBuf = '';
+    let htmlTransposeBuf = '';
+    const htmlColumnNames = [];
+    const teamsRows = [];
+    const teamsTranspose = [];
+    // IMPORTANT: we evaluate the datagrid condition AFTER we are done with all transformations.
+    // NOTE: we do not need any pivot columns for pivot mode to be valid.
+    // https://chatwms.io/user-manual/chatwms/faq#q-do-i-have-to-have-a-group-column-to-just-display-a-count-in-the-datagrid
+    if (isPivotMode && valueCols.length > 0) {
+        const pivotOutput = pivotData(rows, rowGroupCols, pivotCols, valueCols);
+        rows = pivotOutput.rows;
+        rows = sortModel.length > 0 ? sortRows(rows, sortModel) : rows;
+        let mappedDisplayColumnNames = new Map();
+        // For pivots, we cannot trust the `hide` field.
+        // Visibility will depend on `rowGroup`, `pivot`, and `aggFunc`.
+        const visibleColumnState = columnState.filter(column => (!!column.rowGroup && column.rowGroupIndex === 0) || // We only display the **first** row group.
+            (!!column.pivot) ||
+            (!!column.aggFunc)).sort((a, b) => getColumnSequenceRank(a, true) - getColumnSequenceRank(b, true));
+        let rowIdx = 0;
+        rows.forEach((row) => {
+            let adjRow = {};
+            let chartRow = {};
+            let htmlRowValues = [];
+            let htmlRowStyles = [];
+            let htmlColumnStyles = [];
+            let htmlTransposeColumnStyles = [];
+            let teamsRowStyles = [];
+            let teamsColumnStyles = [];
+            // Important: anchoring to ColumnState will ensure we add columns in the correct sequence.
+            visibleColumnState.forEach(column => {
+                const columnFormat = columnFormats.find(columnFormat => columnFormat.name === column.colId);
+                if (!!columnFormat) {
+                    if (columnFormat.name in row) {
+                        const value = row[columnFormat.name];
+                        const formattedValue = evaluateValueFormat(columnFormat, value, locale);
+                        adjRow[columnFormat.displayName] = formattedValue;
+                        chartRow[columnFormat.displayName] = formatNumberEnabled(columnFormat.valueFormat) ? value : formattedValue;
+                        htmlRowValues.push(formattedValue);
+                        [htmlRowStyles, htmlColumnStyles] = processHtmlStyles(formattedValue, columnFormat.displayName, columnFormat, htmlRowStyles, htmlColumnStyles);
+                        htmlTransposeColumnStyles = processHtmlTransposeStyles(formattedValue, columnFormat.displayName, columnFormat, htmlTransposeColumnStyles);
+                        if (rowIdx === 0) {
+                            htmlColumnNames.push(columnFormat.displayName);
+                        }
+                    }
+                    else {
+                        const mappedColumnNamesSet = pivotOutput.mappedColumnNames.get(columnFormat.name);
+                        if (!!mappedColumnNamesSet) {
+                            const mappedColumnNamesArr = Array.from(mappedColumnNamesSet);
+                            for (const mappedColumnName of mappedColumnNamesArr) {
+                                if (mappedColumnName in row) {
+                                    const adjDisplayName = mappedColumnName.replace(columnFormat.name, columnFormat.displayName);
+                                    const value = row[mappedColumnName];
+                                    const formattedValue = evaluateValueFormat(columnFormat, value, locale);
+                                    adjRow[adjDisplayName] = formattedValue;
+                                    chartRow[adjDisplayName] = formatNumberEnabled(columnFormat.valueFormat) ? value : formattedValue;
+                                    htmlRowValues.push(formattedValue);
+                                    [htmlRowStyles, htmlColumnStyles] = processHtmlStyles(formattedValue, adjDisplayName, columnFormat, htmlRowStyles, htmlColumnStyles);
+                                    htmlTransposeColumnStyles = processHtmlTransposeStyles(formattedValue, adjDisplayName, columnFormat, htmlTransposeColumnStyles);
+                                    if (rowIdx === 0) {
+                                        htmlColumnNames.push(adjDisplayName);
+                                    }
+                                    let displayColumnNames = mappedDisplayColumnNames.get(columnFormat.displayName);
+                                    if (!!displayColumnNames) {
+                                        displayColumnNames.add(adjDisplayName);
+                                    }
+                                    else {
+                                        displayColumnNames = new Set([adjDisplayName]);
+                                        mappedDisplayColumnNames.set(columnFormat.displayName, displayColumnNames);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+            adjRows.push(adjRow);
+            chartRows.push(chartRow);
+            if (rowIdx < DATAGRID_HTML_ROWS) {
+                htmlBuf += buildHtmlRow(htmlRowValues, htmlRowStyles, htmlColumnStyles, DATAGRID_HTML_COLS);
+                if (rowIdx < DATAGRID_TEAMS_ROWS) {
+                    [teamsRowStyles, teamsColumnStyles] = mapTeamsStyles(htmlColumnNames, htmlRowStyles, htmlColumnStyles, teamsRowStyles, teamsColumnStyles);
+                    teamsRows.push(createTeamsTableRow(htmlColumnNames, htmlRowValues, teamsRowStyles, teamsColumnStyles));
+                }
+            }
+            if (rowIdx === 0) {
+                const transposedRows = htmlColumnNames.map((key, index) => ({
+                    key,
+                    value: htmlRowValues[index],
+                }));
+                for (let i = 0; i < transposedRows.length; i++) {
+                    htmlTransposeBuf += buildHtmlTransposeRow(transposedRows[i], htmlTransposeColumnStyles[i]);
+                    teamsTranspose.push(createTeamsTransposeTableRow(transposedRows[i], mapTeamsTransposeStyles(htmlTransposeColumnStyles[i])));
+                }
+            }
+            rowIdx++;
+        });
+        if (!!condition) {
+            rows = evaluatePivotDatagridCondition(rows, condition, mappedDisplayColumnNames);
+        }
+    }
+    else {
+        if (rowGroupCols.length > 0) {
+            rows = groupAndAggregate(rows, rowGroupCols, [], valueCols);
+        }
+        rows = sortModel.length > 0 ? sortRows(rows, sortModel) : rows;
+        // We cannot always trust the `hide` field -- we need to look at the row group configuration.
+        const visibleColumnState = columnState.filter(column => !column.hide || // Important: `hide` will be true if we are dealing with a row group.
+            (!!column.rowGroup && column.rowGroupIndex === 0) // We only display the **first** row group.
+        ).sort((a, b) => getColumnSequenceRank(a) - getColumnSequenceRank(b));
+        let rowIdx = 0;
+        rows.forEach((row) => {
+            let adjRow = {};
+            let chartRow = {};
+            let htmlRowValues = [];
+            let htmlRowStyles = [];
+            let htmlColumnStyles = [];
+            let htmlTransposeColumnStyles = [];
+            let teamsRowStyles = [];
+            let teamsColumnStyles = [];
+            // Important: anchoring to ColumnState will ensure we add columns in the correct sequence.
+            visibleColumnState.forEach(column => {
+                const columnFormat = columnFormats.find(columnFormat => columnFormat.name === column.colId);
+                if (!!columnFormat) {
+                    const value = row[columnFormat.name];
+                    const formattedValue = evaluateValueFormat(columnFormat, value, locale);
+                    adjRow[columnFormat.displayName] = formattedValue;
+                    chartRow[columnFormat.displayName] = formatNumberEnabled(columnFormat.valueFormat) ? value : formattedValue;
+                    htmlRowValues.push(formattedValue);
+                    [htmlRowStyles, htmlColumnStyles] = processHtmlStyles(formattedValue, columnFormat.displayName, columnFormat, htmlRowStyles, htmlColumnStyles);
+                    htmlTransposeColumnStyles = processHtmlTransposeStyles(formattedValue, columnFormat.displayName, columnFormat, htmlTransposeColumnStyles);
+                    if (rowIdx === 0) {
+                        htmlColumnNames.push(columnFormat.displayName);
+                    }
+                }
+            });
+            adjRows.push(adjRow);
+            chartRows.push(chartRow);
+            if (rowIdx < DATAGRID_HTML_ROWS) {
+                htmlBuf += buildHtmlRow(htmlRowValues, htmlRowStyles, htmlColumnStyles, DATAGRID_HTML_COLS);
+                if (rowIdx < DATAGRID_TEAMS_ROWS) {
+                    [teamsRowStyles, teamsColumnStyles] = mapTeamsStyles(htmlColumnNames, htmlRowStyles, htmlColumnStyles, teamsRowStyles, teamsColumnStyles);
+                    teamsRows.push(createTeamsTableRow(htmlColumnNames, htmlRowValues, teamsRowStyles, teamsColumnStyles));
+                }
+            }
+            if (rowIdx === 0) {
+                const transposedRows = htmlColumnNames.map((key, index) => ({
+                    key,
+                    value: htmlRowValues[index],
+                }));
+                for (let i = 0; i < transposedRows.length; i++) {
+                    htmlTransposeBuf += buildHtmlTransposeRow(transposedRows[i], htmlTransposeColumnStyles[i]);
+                    teamsTranspose.push(createTeamsTransposeTableRow(transposedRows[i], mapTeamsTransposeStyles(htmlTransposeColumnStyles[i])));
+                }
+            }
+            rowIdx++;
+        });
+        if (!!condition) {
+            adjRows = evaluateDatagridCondition(rows, condition);
+        }
+    }
+    return {
+        ...datagridState,
+        adjRows,
+        chartRows,
+        html: `<p style="font-size: 12px;">Displaying first <b>${DATAGRID_HTML_ROWS} rows</b> and <b>${DATAGRID_HTML_COLS} columns</b></p>\n\n${buildHtmlTableHeader(htmlColumnNames.slice(0, DATAGRID_HTML_COLS))}${htmlBuf}${buildHtmlTableFooter()}`,
+        teamsRows: [
+            createTeamsTableColumns(htmlColumnNames),
+            ...teamsRows
+        ],
+        htmlTranspose: `${buildHtmlTableTransposeHeader()}${htmlTransposeBuf}${buildHtmlTableFooter()}`,
+        teamsTranspose
+    };
+}