@genesislcap/grid-tabulator 14.262.1 → 14.262.2

package/dist/esm/cell-editors/multiselect.editor.js

@@ -0,0 +1,105 @@
+import { __decorate } from "tslib";
+import { css, html, observable, ref, repeat } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+/**
+ * The multiselect editor class for grid-tabulator
+ * @alpha
+ */
+export class MultiselectEditor extends FoundationElement {
+    /**
+     * Initialize the editor with parameters
+     */
+    init(params) {
+        this.params = params;
+    }
+    /**
+     * Get current values
+     */
+    getValues() {
+        if (!this.select)
+            return [];
+        return this.select.selectedValues;
+    }
+    /**
+     * Set focus to the select
+     */
+    focus() {
+        var _a;
+        (_a = this.select) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Check if a value is selected
+     */
+    isSelected(value) {
+        var _a;
+        if (!((_a = this.params) === null || _a === void 0 ? void 0 : _a.value))
+            return false;
+        return this.params.value.includes(value);
+    }
+    /**
+     * Process key down events
+     */
+    handleKeyDown(event) {
+        var _a, _b, _c, _d;
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            (_b = (_a = this.params).success) === null || _b === void 0 ? void 0 : _b.call(_a, this.getValues());
+        }
+        else if (event.key === 'Escape') {
+            (_d = (_c = this.params).cancel) === null || _d === void 0 ? void 0 : _d.call(_c);
+        }
+    }
+    /**
+     * Handle change event to save when selection changes
+     */
+    handleChange() {
+        var _a, _b;
+        (_b = (_a = this.params).success) === null || _b === void 0 ? void 0 : _b.call(_a, this.getValues());
+    }
+}
+__decorate([
+    observable
+], MultiselectEditor.prototype, "params", void 0);
+__decorate([
+    observable
+], MultiselectEditor.prototype, "select", void 0);
+/**
+ * Styles for the multiselect editor
+ * @alpha
+ */
+export const multiselectEditorStyles = css `
+  :host {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;
+/**
+ * Get a Design System prefixed Select template.
+ * @param prefix - The design system prefix to use. Defaults to 'foundation'.
+ * @returns A Select component template prefixed with the correct design system.
+ * @alpha
+ */
+export const getMultiselectEditorTemplate = (prefix = 'foundation') => html `
+  <${prefix}-select
+    ${ref('select')}
+    multiple
+    @keydown="${(x, c) => x.handleKeyDown(c.event)}"
+    @change="${(x) => x.handleChange()}"
+  >
+    ${repeat((x) => { var _a; return ((_a = x.params) === null || _a === void 0 ? void 0 : _a.options) || []; }, html `
+        <${prefix}-option value="${(option) => option.value}" ?selected="${(option, c) => c.parent.isSelected(option.value)}">
+          ${(option) => option.label}
+        </${prefix}-option>
+      `)}
+  </${prefix}-select>
+`;
+/**
+ * Definition for the multiselect editor component
+ * @alpha
+ */
+export const foundationMultiselectEditor = MultiselectEditor.compose({
+    baseName: 'grid-tabulator-multiselect-editor',
+    styles: multiselectEditorStyles,
+    template: getMultiselectEditorTemplate(),
+});

package/dist/esm/cell-editors/number.editor.js

@@ -0,0 +1,84 @@
+import { __decorate } from "tslib";
+import { css, html, observable, ref } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+/**
+ * The number editor class for grid-tabulator
+ * @alpha
+ */
+export class NumberEditor extends FoundationElement {
+    /**
+     * Initialize the editor with parameters
+     */
+    init(params) {
+        this.params = params;
+    }
+    /**
+     * Get current value
+     */
+    getValue() {
+        var _a;
+        const value = parseFloat(((_a = this.numberField) === null || _a === void 0 ? void 0 : _a.value) || '0');
+        return isNaN(value) ? 0 : value;
+    }
+    /**
+     * Set focus to the input
+     */
+    focus() {
+        var _a;
+        (_a = this.numberField) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Process key down events
+     */
+    handleKeyDown(event) {
+        var _a, _b, _c, _d;
+        if (event.key === 'Enter') {
+            (_b = (_a = this.params).success) === null || _b === void 0 ? void 0 : _b.call(_a, this.getValue());
+        }
+        else if (event.key === 'Escape') {
+            (_d = (_c = this.params).cancel) === null || _d === void 0 ? void 0 : _d.call(_c);
+        }
+    }
+}
+__decorate([
+    observable
+], NumberEditor.prototype, "params", void 0);
+__decorate([
+    observable
+], NumberEditor.prototype, "numberField", void 0);
+/**
+ * Styles for the number editor
+ * @alpha
+ */
+export const numberEditorStyles = css `
+  :host {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;
+/**
+ * Get a Design System prefixed number field template.
+ * @param prefix - The design system prefix to use. Defaults to 'foundation'.
+ * @returns A number field component template prefixed with the correct design system.
+ * @alpha
+ */
+export const getNumberEditorTemplate = (prefix = 'foundation') => html `
+  <${prefix}-number-field
+    ${ref('numberField')}
+    :value="${(x) => { var _a, _b; return (_b = (_a = x.params) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ''; }}"
+    :min="${(x) => { var _a, _b; return (_b = (_a = x.params) === null || _a === void 0 ? void 0 : _a.min) !== null && _b !== void 0 ? _b : ''; }}"
+    :max="${(x) => { var _a, _b; return (_b = (_a = x.params) === null || _a === void 0 ? void 0 : _a.max) !== null && _b !== void 0 ? _b : ''; }}"
+    :step="${(x) => { var _a, _b; return (_b = (_a = x.params) === null || _a === void 0 ? void 0 : _a.step) !== null && _b !== void 0 ? _b : 1; }}"
+    @keydown="${(x, c) => x.handleKeyDown(c.event)}"
+  ></${prefix}-number-field>
+`;
+/**
+ * Definition for the number editor component
+ * @alpha
+ */
+export const foundationNumberEditor = NumberEditor.compose({
+    baseName: 'grid-tabulator-number-editor',
+    styles: numberEditorStyles,
+    template: getNumberEditorTemplate(),
+});

package/dist/esm/cell-editors/select.editor.js

@@ -0,0 +1,91 @@
+import { __decorate } from "tslib";
+import { css, html, observable, ref, repeat } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+/**
+ * The select editor class for grid-tabulator
+ * @public
+ */
+export class SelectEditor extends FoundationElement {
+    /**
+     * Initialize the editor with parameters
+     */
+    init(params) {
+        this.params = params;
+    }
+    /**
+     * Get current value
+     */
+    getValue() {
+        var _a;
+        return (_a = this.select) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    /**
+     * Set focus to the select
+     */
+    focus() {
+        var _a;
+        (_a = this.select) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Process key down events
+     */
+    handleKeyDown(event) {
+        var _a, _b, _c, _d;
+        if (event.key === 'Enter') {
+            (_b = (_a = this.params).success) === null || _b === void 0 ? void 0 : _b.call(_a, this.getValue());
+        }
+        else if (event.key === 'Escape') {
+            (_d = (_c = this.params).cancel) === null || _d === void 0 ? void 0 : _d.call(_c);
+        }
+    }
+    /**
+     * Handle change event
+     */
+    handleChange() {
+        var _a, _b;
+        (_b = (_a = this.params).success) === null || _b === void 0 ? void 0 : _b.call(_a, this.getValue());
+    }
+}
+__decorate([
+    observable
+], SelectEditor.prototype, "params", void 0);
+__decorate([
+    observable
+], SelectEditor.prototype, "select", void 0);
+/**
+ * Styles for the select editor
+ */
+export const selectEditorStyles = css `
+  :host {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;
+/**
+ * Get a Design System prefixed Select template.
+ * @param prefix - The design system prefix to use. Defaults to 'foundation'.
+ * @returns A Select component template prefixed with the correct design system.
+ * @public
+ */
+export const getSelectEditorTemplate = (prefix = 'foundation') => html `
+  <${prefix}-select
+    ${ref('select')}
+    @keydown="${(x, c) => x.handleKeyDown(c.event)}"
+    @change="${(x) => x.handleChange()}"
+  >
+    ${repeat((x) => { var _a; return ((_a = x.params) === null || _a === void 0 ? void 0 : _a.options) || []; }, html `
+        <${prefix}-option value="${(option) => option.value}" ?selected="${(option, c) => { var _a; return option.value === ((_a = c.parent.params) === null || _a === void 0 ? void 0 : _a.value); }}">
+          ${(option) => option.label}
+        </${prefix}-option>
+      `)}
+  </${prefix}-select>
+`;
+/**
+ * Definition for the select editor component
+ */
+export const foundationSelectEditor = SelectEditor.compose({
+    baseName: 'grid-tabulator-select-editor',
+    styles: selectEditorStyles,
+    template: getSelectEditorTemplate(),
+});

package/dist/esm/cell-editors/string.editor.js

@@ -0,0 +1,82 @@
+import { __decorate } from "tslib";
+import { sync } from '@genesislcap/foundation-utils';
+import { css, html, observable, ref } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+/**
+ * The string editor class for grid-tabulator
+ * @alpha
+ */
+export class StringEditor extends FoundationElement {
+    /**
+     * Initialize the editor with parameters
+     */
+    init(params) {
+        this.params = params;
+    }
+    /**
+     * Get current value
+     */
+    getValue() {
+        var _a;
+        return (_a = this.textField) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    /**
+     * Set focus to the input
+     */
+    focus() {
+        var _a;
+        (_a = this.textField) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Process key down events
+     */
+    handleKeyDown(event) {
+        var _a, _b, _c, _d;
+        if (event.key === 'Enter') {
+            (_b = (_a = this.params).success) === null || _b === void 0 ? void 0 : _b.call(_a, this.getValue());
+        }
+        else if (event.key === 'Escape') {
+            (_d = (_c = this.params).cancel) === null || _d === void 0 ? void 0 : _d.call(_c);
+        }
+    }
+}
+__decorate([
+    observable
+], StringEditor.prototype, "params", void 0);
+__decorate([
+    observable
+], StringEditor.prototype, "textField", void 0);
+/**
+ * Styles for the string editor
+ * @alpha
+ */
+export const stringEditorStyles = css `
+  :host {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;
+/**
+ * Get a Design System prefixed text field template.
+ * @param prefix - The design system prefix to use. Defaults to 'foundation'.
+ * @returns A text field component template prefixed with the correct design system.
+ * @alpha
+ */
+export const getStringEditorTemplate = (prefix = 'foundation') => html `
+  <${prefix}-text-field
+    ${ref('textField')}
+    type="text"
+    :value="${sync((x) => { var _a; return (_a = x.params) === null || _a === void 0 ? void 0 : _a.value; }) || ''}"
+    @keydown="${(x, c) => x.handleKeyDown(c.event)}"
+  ></${prefix}-text-field>
+`;
+/**
+ * Definition for the string editor component
+ * @alpha
+ */
+export const foundationStringEditor = StringEditor.compose({
+    baseName: 'grid-tabulator-string-editor',
+    styles: stringEditorStyles,
+    template: getStringEditorTemplate(),
+});

package/dist/esm/cell-formatters/action.formatter.js

@@ -0,0 +1,73 @@
+import { DOM } from '@microsoft/fast-element';
+/**
+ * Formatter that displays an action button in the cell.
+ * Styled to match grid-pro action renderer.
+ *
+ * @param cell - The cell component provided by Tabulator
+ * @param formatterParams - Action formatter parameters
+ * @returns HTML content for the action button
+ * @public
+ */
+export function actionFormatter(cell, formatterParams = {}) {
+    const rowData = cell.getData();
+    const { actionName = 'Single Action', appearance = 'secondary-orange', isDisabled, dataTestId, uniqueFieldName, prefix = 'foundation', actionClick, actionButtonStyle = '', } = formatterParams;
+    // The element tagname should be exactly "{prefix}-button"
+    const elementTagName = `${prefix}-button`;
+    // Create container div for centering
+    const containerDiv = document.createElement('div');
+    containerDiv.className = 'action-container';
+    containerDiv.style.alignItems = 'center';
+    containerDiv.style.display = 'flex';
+    containerDiv.style.height = '100%';
+    containerDiv.style.justifyContent = 'center';
+    // Create button element
+    const actionButton = document.createElement(elementTagName);
+    actionButton.className = 'action-renderer';
+    actionButton.style.cssText = `align-self: center; display: flex; ${actionButtonStyle}`;
+    // Set appearance
+    actionButton.setAttribute('appearance', appearance);
+    // Set data-test-id if provided
+    if (dataTestId) {
+        actionButton.setAttribute('data-test-id', dataTestId);
+    }
+    // Set content
+    actionButton.textContent = actionName;
+    // Set disabled state if needed
+    if (isDisabled && typeof isDisabled === 'function') {
+        try {
+            // Make sure rowData exists before calling isDisabled
+            if (rowData) {
+                actionButton.disabled = !!isDisabled(rowData);
+            }
+            else {
+                // Default to enabled if rowData is undefined
+                actionButton.disabled = false;
+            }
+        }
+        catch (error) {
+            console.warn('Error in isDisabled function:', error);
+            actionButton.disabled = false; // Default to enabled on error
+        }
+    }
+    // Add click handler from the parameter
+    if (actionClick && typeof actionClick === 'function') {
+        actionButton.addEventListener('click', () => {
+            try {
+                // Call the action click handler with rowData (may be undefined)
+                actionClick(rowData);
+            }
+            catch (error) {
+                console.warn('Error in actionClick handler:', error);
+            }
+        });
+    }
+    // Get and modify the cell element
+    const cellElement = cell.getElement();
+    // Append button to container
+    containerDiv.appendChild(actionButton);
+    // Using DOM.queueUpdate to ensure the element is appended properly
+    DOM.queueUpdate(() => {
+        cellElement.appendChild(containerDiv);
+    });
+    return '';
+}

package/dist/esm/cell-formatters/actions-menu.formatter.js

@@ -0,0 +1,68 @@
+import { DOM } from '@microsoft/fast-element';
+/**
+ * Formatter that displays a dropdown menu of actions in the cell.
+ * Styled to match grid-pro actions-menu renderer.
+ *
+ * @param cell - The cell component provided by Tabulator
+ * @param formatterParams - Actions menu formatter parameters
+ * @returns HTML content for the actions menu
+ * @public
+ */
+export function actionsMenuFormatter(cell, formatterParams = {}) {
+    const { actions = [], prefix = 'foundation', menuName, isVertical = false, buttonAppearance, } = formatterParams;
+    // Create container for styling (similar to grid-pro implementation)
+    const containerDiv = document.createElement('div');
+    containerDiv.style.cssText =
+        'display: flex; justify-content: center; align-items: center; height: 100%; overflow: visible; border: none;';
+    // The element tagname should be exactly "{prefix}-actions-menu"
+    const elementTagName = `${prefix}-actions-menu`;
+    // Create actions menu element - using 'as any' to match main.ts
+    const actionsMenu = document.createElement(elementTagName);
+    actionsMenu.style.width = '100%';
+    // Set the menu name based on prefix (this exactly matches main.ts)
+    actionsMenu.name = prefix === 'foundation' ? '⋮' : '+';
+    // Override with custom name if provided
+    if (menuName) {
+        actionsMenu.name = menuName;
+    }
+    // Set button appearance if provided
+    if (buttonAppearance) {
+        actionsMenu.buttonAppearance = buttonAppearance;
+    }
+    // Set vertical orientation if needed
+    if (isVertical) {
+        actionsMenu.isVertical = isVertical;
+    }
+    // Set the actions
+    actionsMenu.actions = actions.map((action) => {
+        // Create a safe copy of the action to prevent errors when isDisabled is called
+        const safeAction = Object.assign({}, action);
+        // If the action has an isDisabled function, wrap it in a safe function
+        if (safeAction.isDisabled) {
+            const originalIsDisabled = safeAction.isDisabled;
+            safeAction.isDisabled = (rowData) => {
+                try {
+                    // Make sure rowData exists and the original function is callable
+                    if (!rowData || typeof originalIsDisabled !== 'function') {
+                        return false;
+                    }
+                    return originalIsDisabled(rowData);
+                }
+                catch (error) {
+                    console.warn('Error in isDisabled function:', error);
+                    return false; // Default to enabled on error
+                }
+            };
+        }
+        return safeAction;
+    });
+    // Add the actions menu to the container
+    containerDiv.appendChild(actionsMenu);
+    // Get the cell element
+    const cellElement = cell.getElement();
+    // Use DOM.queueUpdate exactly as in main.ts
+    DOM.queueUpdate(() => {
+        cellElement.appendChild(containerDiv);
+    });
+    return '';
+}

package/dist/esm/cell-formatters/boolean.formatter.js

@@ -0,0 +1,25 @@
+/**
+ * Formatter that displays boolean values using a checkbox component.
+ * Styled to match grid-pro boolean renderer.
+ *
+ * @param cell - The cell component provided by Tabulator
+ * @param formatterParams - Boolean formatter parameters
+ * @returns HTML content for the boolean value
+ * @public
+ */
+export function booleanFormatter(cell, formatterParams = {}) {
+    const value = cell.getValue();
+    const rowData = cell.getData();
+    const boolValue = Boolean(value);
+    const { prefix = 'foundation', dataTestId, isDisabled } = formatterParams;
+    // Determine if the checkbox should be disabled
+    const disabled = isDisabled && isDisabled(rowData);
+    // Generate test ID if needed
+    const testIdAttr = dataTestId ? ` data-test-id="${dataTestId}"` : '';
+    // The element tagname should be exactly "{prefix}-checkbox"
+    const elementTagName = `${prefix}-checkbox`;
+    // Container div with flex styling to match grid-pro
+    return `<div style="align-center: center; display: flex; height: 100%;">
+    <${elementTagName}${testIdAttr}${disabled ? ' disabled' : ''}${boolValue ? ' checked' : ''}></${elementTagName}>
+  </div>`;
+}

package/dist/esm/cell-formatters/constants.js

@@ -0,0 +1,31 @@
+/**
+ * Enumeration of formatter types for grid-tabulator.
+ * @alpha
+ */
+export var FormatterTypes;
+(function (FormatterTypes) {
+    /**
+     * Action button formatter
+     */
+    FormatterTypes["action"] = "action";
+    /**
+     * Actions menu formatter with dropdown options
+     */
+    FormatterTypes["actionsMenu"] = "actionsMenu";
+    /**
+     * Boolean formatter for true/false values
+     */
+    FormatterTypes["boolean"] = "boolean";
+    /**
+     * Editable formatter for cells that can be edited
+     */
+    FormatterTypes["editable"] = "editable";
+    /**
+     * Select formatter for displaying option values
+     */
+    FormatterTypes["select"] = "select";
+    /**
+     * Text formatter for basic text display with optional formatting
+     */
+    FormatterTypes["text"] = "text";
+})(FormatterTypes || (FormatterTypes = {}));

package/dist/esm/cell-formatters/editable.formatter.js

@@ -0,0 +1,21 @@
+/**
+ * Formatter that displays an editable cell with validation state
+ * @param cell - The cell component provided by Tabulator
+ * @param formatterParams - Editable formatter parameters
+ * @returns HTML content for the editable cell
+ * @public
+ */
+export function editableFormatter(cell, formatterParams = {}) {
+    const value = cell.getValue();
+    const { cssClass, nullText = '', dataTestId, icon = 'edit', prefix = 'foundation', } = formatterParams;
+    // Generate test ID if needed
+    const testIdAttr = dataTestId ? ` data-test-id="${dataTestId}"` : '';
+    // Handle null/undefined values
+    const displayValue = value === null || value === undefined ? nullText : value;
+    // Create class with proper prefix
+    const containerClass = `${prefix}-editable-formatter ${cssClass || ''}`;
+    return `<div${testIdAttr} class="${containerClass}" style="display: flex; justify-content: space-between; align-items: center; overflow: hidden;">
+    <span class="${prefix}-editable-formatter-value" style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">${displayValue}</span>
+    <${prefix}-progress-ring class="${prefix}-editable-formatter-indicator" style="margin: 0; width: 20px; height: 20px;"></${prefix}-progress-ring>
+  </div>`;
+}

package/dist/esm/cell-formatters/index.js

@@ -0,0 +1,26 @@
+/**
+ * Cell formatters for the grid-tabulator component.
+ * These formatters match Tabulator's approach of providing formatter functions
+ * and correspond to the cell renderers in grid-tabulator.
+ * @module cell-formatters
+ */
+import { actionFormatter } from './action.formatter';
+import { actionsMenuFormatter } from './actions-menu.formatter';
+import { booleanFormatter } from './boolean.formatter';
+import { editableFormatter } from './editable.formatter';
+import { selectFormatter } from './select.formatter';
+import { textFormatter } from './text.formatter';
+export * from './constants';
+export { actionFormatter, actionsMenuFormatter, booleanFormatter, editableFormatter, selectFormatter, textFormatter, };
+/**
+ * Zero formatters for Tabulator grid
+ * @alpha
+ */
+export const formatters = {
+    action: actionFormatter,
+    actionsMenu: actionsMenuFormatter,
+    boolean: booleanFormatter,
+    editable: editableFormatter,
+    select: selectFormatter,
+    text: textFormatter,
+};

package/dist/esm/cell-formatters/select.formatter.js

@@ -0,0 +1,32 @@
+/**
+ * Formatter that displays a value from a select list of options
+ * Styled to match grid-pro select renderer.
+ *
+ * @param cell - The cell component provided by Tabulator
+ * @param formatterParams - Select formatter parameters
+ * @returns Text content for the selected option
+ * @public
+ */
+export function selectFormatter(cell, formatterParams) {
+    const value = cell.getValue();
+    const { options = [], prefix = 'foundation', nullText = '', dataTestId } = formatterParams;
+    // Generate test ID if needed
+    const testIdAttr = dataTestId ? ` data-test-id="${dataTestId}"` : '';
+    // Handle null/undefined values
+    if (value === null || value === undefined) {
+        return `<div style="display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;">
+      <span${testIdAttr} class="${prefix}-select-formatter ${prefix}-select-formatter--null">${nullText}</span>
+    </div>`;
+    }
+    // If using standard options
+    const matchingOption = options.find((option) => option.value === value);
+    if (matchingOption) {
+        return `<div style="display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;">
+      <span${testIdAttr} class="${prefix}-select-formatter">${matchingOption.label}</span>
+    </div>`;
+    }
+    // If no matching option found, return the original value as string
+    return `<div style="display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;">
+    <span${testIdAttr} class="${prefix}-select-formatter">${String(value)}</span>
+  </div>`;
+}

package/dist/esm/cell-formatters/text.formatter.js

@@ -0,0 +1,30 @@
+/**
+ * Text formatter for customized display of values.
+ * Styled to match grid-pro text renderer.
+ *
+ * @param cell - The cell component provided by Tabulator
+ * @param formatterParams - Text formatter parameters
+ * @returns Text content for the cell
+ * @public
+ */
+export function textFormatter(cell, formatterParams = {}) {
+    const value = cell.getValue();
+    const { specialValue = 2012, specialColor = 'orange', specialFontWeight = 'bold', prefix = 'foundation', dataTestId, nullText = '', } = formatterParams;
+    // Generate test ID if needed
+    const testIdAttr = dataTestId ? ` data-test-id="${dataTestId}"` : '';
+    // Handle null/undefined values
+    if (value === null || value === undefined) {
+        return `<div style="display: flex; width: 100%; height: 100%; align-items: center;">
+      <span${testIdAttr} class="${prefix}-text-formatter ${prefix}-text-formatter--null" style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">${nullText}</span>
+    </div>`;
+    }
+    // Match the exact implementation from main.ts for handling special values (like Year 2012)
+    if (value === specialValue) {
+        return `<div style="display: flex; width: 100%; height: 100%; align-items: center;">
+      <span${testIdAttr} style="color: ${specialColor}; font-weight: ${specialFontWeight}; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">${value}</span>
+    </div>`;
+    }
+    return `<div style="display: flex; width: 100%; height: 100%; align-items: center;">
+    <span${testIdAttr} class="${prefix}-text-formatter" style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">${value}</span>
+  </div>`;
+}