udp-stencil-component-library 26.3.0-beta.22 → 26.3.0-beta.24

package/dist/cjs/ag-grid-base_63.cjs.entry.js

@@ -226,6 +226,22 @@ class AgGridExport {
     }
 }
 
+class AgGridExcelExport {
+    constructor(fileName = 'export.xlsx') {
+        this.fileName = fileName;
+    }
+    init(gridApi) {
+        this.gridApi = gridApi;
+    }
+    onAction(name) {
+        if (name === 'agGridExcelExport') {
+            // The udp-col-* preset styling is applied via `excelStyles` in
+            // ag-grid-base (excelStyles is an @initial option, set at grid creation).
+            this.gridApi.exportDataAsExcel({ fileName: this.fileName });
+        }
+    }
+}
+
 function getUserId() {
     return sessionStorage.getItem('user-id');
 }
@@ -1380,6 +1396,7 @@ class AgGridExpandCollapseAll {
 
 const gridFunctionRegistry = {
     agGridExport: AgGridExport,
+    agGridExcelExport: AgGridExcelExport,
     openSavedViews: SavedViews,
     agGridSizeColumnsToFit: AgGridSizeColumnsToFit,
     agGridAutoSizeColumns: AgGridAutoSizeColumns,
@@ -1551,6 +1568,119 @@ const dateTimeValueFormatter = params => {
     return `${dateObject.getFullYear()}-${String(dateObject.getMonth() + 1).padStart(2, '0')}-${String(dateObject.getDate()).padStart(2, '0')} ${String(dateObject.getHours()).padStart(2, '0')}:${String(dateObject.getMinutes()).padStart(2, '0')}`;
 };
 
+// UDP column style presets (see ag-grid-base.css). Each maps to a cell class
+// `udp-col-<name>` and a header class `udp-col-<name>-header`.
+const UDP_COL_PRESETS = [
+    'brand',
+    'danger',
+    'important',
+    'informative',
+    'severe',
+    'subtle',
+    'success',
+    'warning',
+];
+let probeCtx;
+function getProbeCtx() {
+    var _a;
+    if (probeCtx !== undefined)
+        return probeCtx;
+    const canvas = document.createElement('canvas');
+    canvas.width = 1;
+    canvas.height = 1;
+    probeCtx = (_a = canvas.getContext('2d', { willReadFrequently: true })) !== null && _a !== void 0 ? _a : null;
+    return probeCtx;
+}
+/** Paint `cssColor` over an opaque background and read the resulting RGB pixel. */
+function paintOver(ctx, cssColor, bg) {
+    ctx.clearRect(0, 0, 1, 1);
+    ctx.fillStyle = `rgb(${bg[0]}, ${bg[1]}, ${bg[2]})`;
+    ctx.fillRect(0, 0, 1, 1);
+    // If the browser can't parse cssColor, fillStyle keeps the bg we just set, so
+    // the color resolves to the background (treated as "no tint" below).
+    ctx.fillStyle = cssColor;
+    ctx.fillRect(0, 0, 1, 1);
+    const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+    return [r, g, b];
+}
+/**
+ * Resolve any computed CSS color to an opaque `#RRGGBB`, flattened over white
+ * (the Excel sheet background). Uses a canvas so it handles every serialization
+ * `getComputedStyle` can return — `rgb()/rgba()`, `color(srgb …)`, `color-mix`,
+ * named colors. Returns null when the color is fully transparent (no tint to
+ * export) or the canvas is unavailable.
+ */
+function resolveColor(cssColor) {
+    if (!cssColor)
+        return null;
+    const ctx = getProbeCtx();
+    if (!ctx)
+        return null;
+    const overWhite = paintOver(ctx, cssColor, [255, 255, 255]);
+    const overBlack = paintOver(ctx, cssColor, [0, 0, 0]);
+    // Fully transparent ⇒ matches whatever it's painted over ⇒ nothing to export.
+    if (overWhite[0] === 255 && overWhite[1] === 255 && overWhite[2] === 255 &&
+        overBlack[0] === 0 && overBlack[1] === 0 && overBlack[2] === 0) {
+        return null;
+    }
+    const hex = (n) => Math.max(0, Math.min(255, n)).toString(16).padStart(2, '0');
+    return `#${hex(overWhite[0])}${hex(overWhite[1])}${hex(overWhite[2])}`.toUpperCase();
+}
+/**
+ * Excel never sees the grid's CSS, so the udp-col-* column tints don't carry over
+ * to a `.xlsx` by default. This resolves each preset to its *live themed* color
+ * (honoring the active theme and any `color-mix`) and returns matching ExcelStyle
+ * entries keyed by the same class name, so cellClass / headerClass tints export.
+ *
+ * Must run after the grid's stylesheet is in the DOM (ag-grid-base.css is global
+ * since the component is `shadow: false`). Resolved at grid creation because
+ * `excelStyles` is an `@initial` grid option and cannot be updated at runtime.
+ */
+function buildUdpPresetExcelStyles() {
+    if (typeof document === 'undefined' || typeof getComputedStyle === 'undefined') {
+        return [];
+    }
+    // Offscreen probes resolving the same global rules AG Grid's real cells/headers
+    // do. Header text color lives on a nested `.ag-header-cell-text`.
+    const host = document.createElement('div');
+    host.setAttribute('aria-hidden', 'true');
+    host.style.cssText = 'position:fixed;left:-9999px;top:0;visibility:hidden;pointer-events:none;';
+    const cell = document.createElement('div');
+    const headerCell = document.createElement('div');
+    const headerText = document.createElement('span');
+    headerText.className = 'ag-header-cell-text';
+    headerCell.appendChild(headerText);
+    host.appendChild(cell);
+    host.appendChild(headerCell);
+    document.body.appendChild(host);
+    const styles = [];
+    try {
+        for (const name of UDP_COL_PRESETS) {
+            cell.className = `ag-cell udp-col-${name}`;
+            const cellStyle = getComputedStyle(cell);
+            const cellBg = resolveColor(cellStyle.backgroundColor);
+            if (cellBg) {
+                const cellFg = resolveColor(cellStyle.color);
+                styles.push(Object.assign({ id: `udp-col-${name}`, interior: { color: cellBg, pattern: 'Solid' } }, (cellFg ? { font: { color: cellFg } } : {})));
+            }
+            headerCell.className = `ag-header-cell udp-col-${name}-header`;
+            const headerBg = resolveColor(getComputedStyle(headerCell).backgroundColor);
+            if (headerBg) {
+                const headerFg = resolveColor(getComputedStyle(headerText).color);
+                styles.push({
+                    id: `udp-col-${name}-header`,
+                    interior: { color: headerBg, pattern: 'Solid' },
+                    font: Object.assign({ bold: true }, (headerFg ? { color: headerFg } : {})),
+                });
+            }
+        }
+    }
+    finally {
+        host.remove();
+    }
+    return styles;
+}
+
 const agGridBaseCss = () => `.variant-dark{--udp-grid-column-header-bg:#F8F9FA;--udp-grid-column-header-bg-hover:#dce6f2;--udp-grid-column-header-text:var(--primary-color-dark)}.variant-light{--udp-grid-column-header-bg:#f2f4f5;--udp-grid-column-header-bg-hover:#eef3f9;--udp-grid-column-header-text:var(--primary-color-dark)}::view-transition-group(*){animation-duration:0.2s}.grid-wrapper{display:flex;flex-direction:column;height:100%}#myNewGrid{flex:1}.ag-cell.udp-col-brand{background-color:var(--colorBrandBackground2) !important;color:var(--colorBrandForeground2)}.ag-header-cell.udp-col-brand-header{background-color:var(--colorBrandBackground2) !important}.ag-header-cell.udp-col-brand-header .ag-header-cell-text{color:var(--colorBrandForeground2)}.ag-cell.udp-col-danger{background-color:var(--colorPaletteRedBackground1) !important;color:var(--colorPaletteRedForeground1)}.ag-header-cell.udp-col-danger-header{background-color:var(--colorPaletteRedBackground1) !important}.ag-header-cell.udp-col-danger-header .ag-header-cell-text{color:var(--colorPaletteRedForeground1)}.ag-cell.udp-col-important{background-color:color-mix(in srgb, var(--colorNeutralForeground1) 20%, transparent) !important;color:var(--colorNeutralForeground1)}.ag-header-cell.udp-col-important-header{background-color:color-mix(in srgb, var(--colorNeutralForeground1) 20%, transparent) !important}.ag-header-cell.udp-col-important-header .ag-header-cell-text{color:var(--colorNeutralForeground1)}.ag-cell.udp-col-informative{background-color:color-mix(in srgb, var(--colorPaletteBlueBackground2) 20%, transparent) !important;color:color-mix(in srgb, var(--colorPaletteBlueForeground2) 85%, transparent)}.ag-header-cell.udp-col-informative-header{background-color:color-mix(in srgb, var(--colorPaletteBlueBackground2) 20%, transparent) !important}.ag-header-cell.udp-col-informative-header .ag-header-cell-text{color:color-mix(in srgb, var(--colorPaletteBlueForeground2) 85%, transparent)}.ag-cell.udp-col-severe{background-color:var(--colorPaletteDarkOrangeBackground1) !important;color:var(--colorPaletteDarkOrangeForeground1)}.ag-header-cell.udp-col-severe-header{background-color:var(--colorPaletteDarkOrangeBackground1) !important}.ag-header-cell.udp-col-severe-header .ag-header-cell-text{color:var(--colorPaletteDarkOrangeForeground1)}.ag-cell.udp-col-subtle{background-color:var(--colorNeutralBackground1) !important;color:var(--colorNeutralForeground3)}.ag-header-cell.udp-col-subtle-header{background-color:var(--colorNeutralBackground1) !important}.ag-header-cell.udp-col-subtle-header .ag-header-cell-text{color:var(--colorNeutralForeground3)}.ag-cell.udp-col-success{background-color:var(--colorPaletteGreenBackground1) !important;color:var(--colorPaletteGreenForeground1)}.ag-header-cell.udp-col-success-header{background-color:var(--colorPaletteGreenBackground1) !important}.ag-header-cell.udp-col-success-header .ag-header-cell-text{color:var(--colorPaletteGreenForeground1)}.ag-cell.udp-col-warning{background-color:var(--colorPaletteYellowBackground1) !important;color:var(--colorPaletteYellowForeground2)}.ag-header-cell.udp-col-warning-header{background-color:var(--colorPaletteYellowBackground1) !important}.ag-header-cell.udp-col-warning-header .ag-header-cell-text{color:var(--colorPaletteYellowForeground2)}`;
 
 const AgGridBase = class {
@@ -1670,7 +1800,7 @@ const AgGridBase = class {
         agGridEnterpriseV33.LicenseManager.setLicenseKey('Using_this_{AG_Grid}_Enterprise_key_{AG-080613}_in_excess_of_the_licence_granted_is_not_permitted___Please_report_misuse_to_legal@ag-grid.com___For_help_with_changing_this_key_please_contact_info@ag-grid.com___{Univerus_Software_Inc}_is_granted_a_{Single_Application}_Developer_License_for_the_application_{MAIS_eRec}_only_for_{1}_Front-End_JavaScript_developer___All_Front-End_JavaScript_developers_working_on_{MAIS_eRec}_need_to_be_licensed___{MAIS_eRec}_has_not_been_granted_a_Deployment_License_Add-on___This_key_works_with_{AG_Grid}_Enterprise_versions_released_before_{28_June_2026}____[v3]_[01]_MTc4MjYwMTIwMDAwMA==5c7d1487ecb13b28e75415d34b7cf694');
     }
     componentDidLoad() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         const gridOptions = Object.assign(Object.assign({ tooltipShowMode: 'whenTruncated', tooltipShowDelay: 500 }, this.gridOptions), { columnTypes: {
                 booleanChip: {
                     cellRenderer: 'iconRenderer',
@@ -1692,7 +1822,14 @@ const AgGridBase = class {
                     extendsDataType: 'boolean',
                     columnTypes: 'booleanChip',
                 },
-            }, gridId: this.gridId, onGridReady: e => void this.onGridReady(e), theme: getAgGridTheme(), components: Object.assign({ actionsRenderer: statusRenderer.ActionsRenderer, avatarRenderer: AvatarRenderer, iconRenderer: statusRenderer.IconRenderer, imageRenderer: ImageRenderer, linkRenderer: LinkRenderer, statusRenderer: statusRenderer.StatusRenderer, subtitleRenderer: AgGridSubtitleCellRenderer }, (_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.components), domLayout: 'normal', defaultColDef: Object.assign(Object.assign({ cellDataType: false, sortable: true, filter: true, flex: 1, minWidth: 150, suppressHeaderMenuButton: true }, (_b = this.gridOptions) === null || _b === void 0 ? void 0 : _b.defaultColDef), { filterParams: Object.assign({ buttons: ['reset', 'apply'], closeOnApply: true, maxNumConditions: 10 }, (_d = (_c = this.gridOptions) === null || _c === void 0 ? void 0 : _c.defaultColDef) === null || _d === void 0 ? void 0 : _d.filterParams) }) });
+            }, gridId: this.gridId, onGridReady: e => void this.onGridReady(e), theme: getAgGridTheme(),
+            // Carry the udp-col-* column tints into Excel exports. excelStyles is an
+            // @initial option (cannot be set at runtime), so it's resolved here at grid
+            // creation. Consumer-provided excelStyles win over the generated presets.
+            excelStyles: [
+                ...buildUdpPresetExcelStyles().filter(preset => { var _a, _b; return !((_b = (_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.excelStyles) !== null && _b !== void 0 ? _b : []).some(s => s.id === preset.id); }),
+                ...((_b = (_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.excelStyles) !== null && _b !== void 0 ? _b : []),
+            ], components: Object.assign({ actionsRenderer: statusRenderer.ActionsRenderer, avatarRenderer: AvatarRenderer, iconRenderer: statusRenderer.IconRenderer, imageRenderer: ImageRenderer, linkRenderer: LinkRenderer, statusRenderer: statusRenderer.StatusRenderer, subtitleRenderer: AgGridSubtitleCellRenderer }, (_c = this.gridOptions) === null || _c === void 0 ? void 0 : _c.components), domLayout: 'normal', defaultColDef: Object.assign(Object.assign({ cellDataType: false, sortable: true, filter: true, flex: 1, minWidth: 150, suppressHeaderMenuButton: true }, (_d = this.gridOptions) === null || _d === void 0 ? void 0 : _d.defaultColDef), { filterParams: Object.assign({ buttons: ['reset', 'apply'], closeOnApply: true, maxNumConditions: 10 }, (_f = (_e = this.gridOptions) === null || _e === void 0 ? void 0 : _e.defaultColDef) === null || _f === void 0 ? void 0 : _f.filterParams) }) });
         agGridEnterpriseV33.createGrid(this.gridEl, gridOptions);
         window.addEventListener('theme-changed', this.themeChangedHandler);
         if (this.gridHeight) {
@@ -1743,7 +1880,7 @@ const AgGridBase = class {
         this.updateGridContextValues();
     }
     render() {
-        return (index.h("div", { key: '104459ae3bbc35124905c375284deea7fd4a18e2', ref: el => (this.gridContainerEl = el) }, index.h("ghost-render", { key: '9246393a0abf0f32551fc7783747328dbba99ec7' }, index.h("div", { key: 'b8e6d1fdb1ff7884e6723a0ff9421bd12ad63740' }, index.h("udp-dialog", { key: '4e2de434c26d11fa47104e6c8f06d76d3e617500' }), index.h("udp-list-item", { key: 'c46d7dec91a2bae694631f095c9904f85d607ba6' }), index.h("hint-panel", { key: '4177e50ac5fedda3f15de57153de46201f104454' }), index.h("udp-side-sheet", { key: '2e8914c6d8ea1bb83e48cce4489fd2d636884498' }), index.h("udp-fluent-dialog", { key: '482719dc0f89bdbe4749d28aa1d2509343de1ca7' }), index.h("udp-fluent-text", { key: '03a30ea4a724b2d003befd88f4fa8eba27685411' }), index.h("udp-fluent-text-input", { key: 'a6e25454b5bd17db8ed441363c81b66902987323' }), index.h("udp-fluent-switch", { key: 'b547bd01dda86ba3b1c94a5973de9b562cf7cb59' }), index.h("udp-fluent-button", { key: '9d5b809d46caaedf783b42598adb23f2d181a8b8' }), index.h("udp-text", { key: 'f4ce740ea9998d756f4e9518a1c304dd5e4208a3' }), index.h("udp-search-input", { key: '8192e2ac08b3ee6052578677c3361e9dc7648ec5' }), index.h("udp-fluent-avatar", { key: '8e7f9bb0c6e9dee5d50b5740a9599a7a1271f677' }), index.h("udp-fluent-icon-button", { key: '059f897ae01e52266e938f77c70dd848efd12f43' }), index.h("udp-fluent-icon", { key: '33b02e8a98bb6fee997ac180942dbb2545ea2c21' }), index.h("udp-fluent-badge", { key: '5b0ca3ac9944d662c9593602fe8adfd13da4a2b8' }))), index.h("grid-header", { key: '5a1a52b5e07dd84dbc5f7b0c8d6ac3cca3faa2d9', headerConfig: this.headerConfig, gridFunctions: this.gridFunctions, gridFunctionInstances: this.gridFunctionInstances, refreshKey: this.refreshKey, onHeaderAction: this.onHeaderAction }), index.h("div", { key: 'ea69fb43b9a875f35ef7851662af90474321ef81', ref: el => (this.gridEl = el) })));
+        return (index.h("div", { key: 'd390a4e4472211df84c8431dce95448861bd7cf8', ref: el => (this.gridContainerEl = el) }, index.h("ghost-render", { key: '6598aa469fbd486c45a1251185e46e163254ca74' }, index.h("div", { key: '8b4a74033bcbfee121ab2108a4312b8a0feb651b' }, index.h("udp-dialog", { key: '8bace417eb116aff9cbae2e76d340ea478c02eb0' }), index.h("udp-list-item", { key: '02fa2c8ab83e5a9296178366517d8cfb28779745' }), index.h("hint-panel", { key: '6e29b193c52c292e2d6dac6b4e64025e027148bf' }), index.h("udp-side-sheet", { key: 'daa39be7c760daa21244b6d7ad57217503ca9ec2' }), index.h("udp-fluent-dialog", { key: '9a703f20309d94629f3bd0dfcada241a826fea82' }), index.h("udp-fluent-text", { key: '7ae20805172f8bc59bd7d3427421144eb13f6ded' }), index.h("udp-fluent-text-input", { key: '77a58d878d712e247cc7f1e835def85df325dd70' }), index.h("udp-fluent-switch", { key: '47b13c7be1563969da9cad7850b6a9bc5b7c4a45' }), index.h("udp-fluent-button", { key: '3f8b1d78694b7bee699f0800c1d31a61d78ebf97' }), index.h("udp-text", { key: 'eaab0e6b5949f42619cc171fdc7c5cb32abcb1d9' }), index.h("udp-search-input", { key: 'a44cb53fca08b1c9e829789501efb339a501d8f5' }), index.h("udp-fluent-avatar", { key: '6ba0c2bd921f244c6f9c70566714fd2cbe0c2e80' }), index.h("udp-fluent-icon-button", { key: '67aea24100272ef7ba9936afcdbd1cde8db5647e' }), index.h("udp-fluent-icon", { key: '665398531aaa7c8acc52ec16cbb736fb92c4fe22' }), index.h("udp-fluent-badge", { key: '3a08b41829ad68400d93da40c45c506a06e6099b' }))), index.h("grid-header", { key: '795ec194aecacf9d43fb731b7a1390b6faab1965', headerConfig: this.headerConfig, gridFunctions: this.gridFunctions, gridFunctionInstances: this.gridFunctionInstances, refreshKey: this.refreshKey, onHeaderAction: this.onHeaderAction }), index.h("div", { key: 'fdce74fba0821732e808b266f1a2ecb694254490', ref: el => (this.gridEl = el) })));
     }
     static get watchers() { return {
         "gridFunctions": [{
@@ -1996,6 +2133,11 @@ const GridHeader = class {
                 startIconName: 'export',
                 onClick: () => this.action('agGridExport'),
             },
+            enabledFunctionNames.has('agGridExcelExport') && {
+                text: 'Export to Excel',
+                startIconName: 'table',
+                onClick: () => this.action('agGridExcelExport'),
+            },
         ].filter(Boolean);
         const hasUdpExport = enabledFunctionNames.has('udpExport');
         const hasExpandCollapse = enabledFunctionNames.has('agGridExpandCollapseAll');

package/dist/collection/components/grid/new-grid/ag-grid-base.js

@@ -11,6 +11,7 @@ import StatusRenderer from "../renderers/status-renderer";
 import SubtitleRenderer from "../renderers/subtitle-cell-renderer";
 import { configureUdpColumnMods } from "./helperFunctions/configureUdpColumnMods";
 import { dateTimeValueFormatter } from "./helperFunctions/valueFormatters";
+import { buildUdpPresetExcelStyles } from "./helperFunctions/udpColumnExcelStyles";
 import { isEqual } from "lodash-es";
 export class AgGridBase {
     constructor() {
@@ -127,7 +128,7 @@ export class AgGridBase {
         LicenseManager.setLicenseKey('Using_this_{AG_Grid}_Enterprise_key_{AG-080613}_in_excess_of_the_licence_granted_is_not_permitted___Please_report_misuse_to_legal@ag-grid.com___For_help_with_changing_this_key_please_contact_info@ag-grid.com___{Univerus_Software_Inc}_is_granted_a_{Single_Application}_Developer_License_for_the_application_{MAIS_eRec}_only_for_{1}_Front-End_JavaScript_developer___All_Front-End_JavaScript_developers_working_on_{MAIS_eRec}_need_to_be_licensed___{MAIS_eRec}_has_not_been_granted_a_Deployment_License_Add-on___This_key_works_with_{AG_Grid}_Enterprise_versions_released_before_{28_June_2026}____[v3]_[01]_MTc4MjYwMTIwMDAwMA==5c7d1487ecb13b28e75415d34b7cf694');
     }
     componentDidLoad() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         const gridOptions = Object.assign(Object.assign({ tooltipShowMode: 'whenTruncated', tooltipShowDelay: 500 }, this.gridOptions), { columnTypes: {
                 booleanChip: {
                     cellRenderer: 'iconRenderer',
@@ -149,7 +150,14 @@ export class AgGridBase {
                     extendsDataType: 'boolean',
                     columnTypes: 'booleanChip',
                 },
-            }, gridId: this.gridId, onGridReady: e => void this.onGridReady(e), theme: getAgGridTheme(), components: Object.assign({ actionsRenderer: ActionsRenderer, avatarRenderer: AvatarRenderer, iconRenderer: IconRenderer, imageRenderer: ImageRenderer, linkRenderer: LinkRenderer, statusRenderer: StatusRenderer, subtitleRenderer: SubtitleRenderer }, (_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.components), domLayout: 'normal', defaultColDef: Object.assign(Object.assign({ cellDataType: false, sortable: true, filter: true, flex: 1, minWidth: 150, suppressHeaderMenuButton: true }, (_b = this.gridOptions) === null || _b === void 0 ? void 0 : _b.defaultColDef), { filterParams: Object.assign({ buttons: ['reset', 'apply'], closeOnApply: true, maxNumConditions: 10 }, (_d = (_c = this.gridOptions) === null || _c === void 0 ? void 0 : _c.defaultColDef) === null || _d === void 0 ? void 0 : _d.filterParams) }) });
+            }, gridId: this.gridId, onGridReady: e => void this.onGridReady(e), theme: getAgGridTheme(),
+            // Carry the udp-col-* column tints into Excel exports. excelStyles is an
+            // @initial option (cannot be set at runtime), so it's resolved here at grid
+            // creation. Consumer-provided excelStyles win over the generated presets.
+            excelStyles: [
+                ...buildUdpPresetExcelStyles().filter(preset => { var _a, _b; return !((_b = (_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.excelStyles) !== null && _b !== void 0 ? _b : []).some(s => s.id === preset.id); }),
+                ...((_b = (_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.excelStyles) !== null && _b !== void 0 ? _b : []),
+            ], components: Object.assign({ actionsRenderer: ActionsRenderer, avatarRenderer: AvatarRenderer, iconRenderer: IconRenderer, imageRenderer: ImageRenderer, linkRenderer: LinkRenderer, statusRenderer: StatusRenderer, subtitleRenderer: SubtitleRenderer }, (_c = this.gridOptions) === null || _c === void 0 ? void 0 : _c.components), domLayout: 'normal', defaultColDef: Object.assign(Object.assign({ cellDataType: false, sortable: true, filter: true, flex: 1, minWidth: 150, suppressHeaderMenuButton: true }, (_d = this.gridOptions) === null || _d === void 0 ? void 0 : _d.defaultColDef), { filterParams: Object.assign({ buttons: ['reset', 'apply'], closeOnApply: true, maxNumConditions: 10 }, (_f = (_e = this.gridOptions) === null || _e === void 0 ? void 0 : _e.defaultColDef) === null || _f === void 0 ? void 0 : _f.filterParams) }) });
         createGrid(this.gridEl, gridOptions);
         window.addEventListener('theme-changed', this.themeChangedHandler);
         if (this.gridHeight) {
@@ -200,7 +208,7 @@ export class AgGridBase {
         this.updateGridContextValues();
     }
     render() {
-        return (h("div", { key: '104459ae3bbc35124905c375284deea7fd4a18e2', ref: el => (this.gridContainerEl = el) }, h("ghost-render", { key: '9246393a0abf0f32551fc7783747328dbba99ec7' }, h("div", { key: 'b8e6d1fdb1ff7884e6723a0ff9421bd12ad63740' }, h("udp-dialog", { key: '4e2de434c26d11fa47104e6c8f06d76d3e617500' }), h("udp-list-item", { key: 'c46d7dec91a2bae694631f095c9904f85d607ba6' }), h("hint-panel", { key: '4177e50ac5fedda3f15de57153de46201f104454' }), h("udp-side-sheet", { key: '2e8914c6d8ea1bb83e48cce4489fd2d636884498' }), h("udp-fluent-dialog", { key: '482719dc0f89bdbe4749d28aa1d2509343de1ca7' }), h("udp-fluent-text", { key: '03a30ea4a724b2d003befd88f4fa8eba27685411' }), h("udp-fluent-text-input", { key: 'a6e25454b5bd17db8ed441363c81b66902987323' }), h("udp-fluent-switch", { key: 'b547bd01dda86ba3b1c94a5973de9b562cf7cb59' }), h("udp-fluent-button", { key: '9d5b809d46caaedf783b42598adb23f2d181a8b8' }), h("udp-text", { key: 'f4ce740ea9998d756f4e9518a1c304dd5e4208a3' }), h("udp-search-input", { key: '8192e2ac08b3ee6052578677c3361e9dc7648ec5' }), h("udp-fluent-avatar", { key: '8e7f9bb0c6e9dee5d50b5740a9599a7a1271f677' }), h("udp-fluent-icon-button", { key: '059f897ae01e52266e938f77c70dd848efd12f43' }), h("udp-fluent-icon", { key: '33b02e8a98bb6fee997ac180942dbb2545ea2c21' }), h("udp-fluent-badge", { key: '5b0ca3ac9944d662c9593602fe8adfd13da4a2b8' }))), h("grid-header", { key: '5a1a52b5e07dd84dbc5f7b0c8d6ac3cca3faa2d9', headerConfig: this.headerConfig, gridFunctions: this.gridFunctions, gridFunctionInstances: this.gridFunctionInstances, refreshKey: this.refreshKey, onHeaderAction: this.onHeaderAction }), h("div", { key: 'ea69fb43b9a875f35ef7851662af90474321ef81', ref: el => (this.gridEl = el) })));
+        return (h("div", { key: 'd390a4e4472211df84c8431dce95448861bd7cf8', ref: el => (this.gridContainerEl = el) }, h("ghost-render", { key: '6598aa469fbd486c45a1251185e46e163254ca74' }, h("div", { key: '8b4a74033bcbfee121ab2108a4312b8a0feb651b' }, h("udp-dialog", { key: '8bace417eb116aff9cbae2e76d340ea478c02eb0' }), h("udp-list-item", { key: '02fa2c8ab83e5a9296178366517d8cfb28779745' }), h("hint-panel", { key: '6e29b193c52c292e2d6dac6b4e64025e027148bf' }), h("udp-side-sheet", { key: 'daa39be7c760daa21244b6d7ad57217503ca9ec2' }), h("udp-fluent-dialog", { key: '9a703f20309d94629f3bd0dfcada241a826fea82' }), h("udp-fluent-text", { key: '7ae20805172f8bc59bd7d3427421144eb13f6ded' }), h("udp-fluent-text-input", { key: '77a58d878d712e247cc7f1e835def85df325dd70' }), h("udp-fluent-switch", { key: '47b13c7be1563969da9cad7850b6a9bc5b7c4a45' }), h("udp-fluent-button", { key: '3f8b1d78694b7bee699f0800c1d31a61d78ebf97' }), h("udp-text", { key: 'eaab0e6b5949f42619cc171fdc7c5cb32abcb1d9' }), h("udp-search-input", { key: 'a44cb53fca08b1c9e829789501efb339a501d8f5' }), h("udp-fluent-avatar", { key: '6ba0c2bd921f244c6f9c70566714fd2cbe0c2e80' }), h("udp-fluent-icon-button", { key: '67aea24100272ef7ba9936afcdbd1cde8db5647e' }), h("udp-fluent-icon", { key: '665398531aaa7c8acc52ec16cbb736fb92c4fe22' }), h("udp-fluent-badge", { key: '3a08b41829ad68400d93da40c45c506a06e6099b' }))), h("grid-header", { key: '795ec194aecacf9d43fb731b7a1390b6faab1965', headerConfig: this.headerConfig, gridFunctions: this.gridFunctions, gridFunctionInstances: this.gridFunctionInstances, refreshKey: this.refreshKey, onHeaderAction: this.onHeaderAction }), h("div", { key: 'fdce74fba0821732e808b266f1a2ecb694254490', ref: el => (this.gridEl = el) })));
     }
     static get is() { return "ag-grid-base"; }
     static get originalStyleUrls() {

package/dist/collection/components/grid/new-grid/grid-header.js

@@ -80,6 +80,11 @@ export class GridHeader {
                 startIconName: 'export',
                 onClick: () => this.action('agGridExport'),
             },
+            enabledFunctionNames.has('agGridExcelExport') && {
+                text: 'Export to Excel',
+                startIconName: 'table',
+                onClick: () => this.action('agGridExcelExport'),
+            },
         ].filter(Boolean);
         const hasUdpExport = enabledFunctionNames.has('udpExport');
         const hasExpandCollapse = enabledFunctionNames.has('agGridExpandCollapseAll');

package/dist/collection/components/grid/new-grid/gridFunctionRegistry.js

@@ -1,4 +1,5 @@
 import { AgGridExport } from "./gridFunctions/agGridExport";
+import { AgGridExcelExport } from "./gridFunctions/agGridExcelExport";
 import { SavedViews } from "./gridFunctions/savedViews";
 import { AgGridSizeColumnsToFit } from "./gridFunctions/agGridSizeColumnsToFit";
 import { AgGridAutoSizeColumns } from "./gridFunctions/agGridAutoSizeColumns";
@@ -12,6 +13,7 @@ import { agGridRefreshData } from "./gridFunctions/agGridRefreshData";
 import { AgGridExpandCollapseAll } from "./gridFunctions/agGridExpandCollapseAll";
 export const gridFunctionRegistry = {
     agGridExport: AgGridExport,
+    agGridExcelExport: AgGridExcelExport,
     openSavedViews: SavedViews,
     agGridSizeColumnsToFit: AgGridSizeColumnsToFit,
     agGridAutoSizeColumns: AgGridAutoSizeColumns,

package/dist/collection/components/grid/new-grid/gridFunctions/agGridExcelExport.js

@@ -0,0 +1,15 @@
+export class AgGridExcelExport {
+    constructor(fileName = 'export.xlsx') {
+        this.fileName = fileName;
+    }
+    init(gridApi) {
+        this.gridApi = gridApi;
+    }
+    onAction(name) {
+        if (name === 'agGridExcelExport') {
+            // The udp-col-* preset styling is applied via `excelStyles` in
+            // ag-grid-base (excelStyles is an @initial option, set at grid creation).
+            this.gridApi.exportDataAsExcel({ fileName: this.fileName });
+        }
+    }
+}

package/dist/collection/components/grid/new-grid/helperFunctions/udpColumnExcelStyles.js

@@ -0,0 +1,112 @@
+// UDP column style presets (see ag-grid-base.css). Each maps to a cell class
+// `udp-col-<name>` and a header class `udp-col-<name>-header`.
+const UDP_COL_PRESETS = [
+    'brand',
+    'danger',
+    'important',
+    'informative',
+    'severe',
+    'subtle',
+    'success',
+    'warning',
+];
+let probeCtx;
+function getProbeCtx() {
+    var _a;
+    if (probeCtx !== undefined)
+        return probeCtx;
+    const canvas = document.createElement('canvas');
+    canvas.width = 1;
+    canvas.height = 1;
+    probeCtx = (_a = canvas.getContext('2d', { willReadFrequently: true })) !== null && _a !== void 0 ? _a : null;
+    return probeCtx;
+}
+/** Paint `cssColor` over an opaque background and read the resulting RGB pixel. */
+function paintOver(ctx, cssColor, bg) {
+    ctx.clearRect(0, 0, 1, 1);
+    ctx.fillStyle = `rgb(${bg[0]}, ${bg[1]}, ${bg[2]})`;
+    ctx.fillRect(0, 0, 1, 1);
+    // If the browser can't parse cssColor, fillStyle keeps the bg we just set, so
+    // the color resolves to the background (treated as "no tint" below).
+    ctx.fillStyle = cssColor;
+    ctx.fillRect(0, 0, 1, 1);
+    const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+    return [r, g, b];
+}
+/**
+ * Resolve any computed CSS color to an opaque `#RRGGBB`, flattened over white
+ * (the Excel sheet background). Uses a canvas so it handles every serialization
+ * `getComputedStyle` can return — `rgb()/rgba()`, `color(srgb …)`, `color-mix`,
+ * named colors. Returns null when the color is fully transparent (no tint to
+ * export) or the canvas is unavailable.
+ */
+function resolveColor(cssColor) {
+    if (!cssColor)
+        return null;
+    const ctx = getProbeCtx();
+    if (!ctx)
+        return null;
+    const overWhite = paintOver(ctx, cssColor, [255, 255, 255]);
+    const overBlack = paintOver(ctx, cssColor, [0, 0, 0]);
+    // Fully transparent ⇒ matches whatever it's painted over ⇒ nothing to export.
+    if (overWhite[0] === 255 && overWhite[1] === 255 && overWhite[2] === 255 &&
+        overBlack[0] === 0 && overBlack[1] === 0 && overBlack[2] === 0) {
+        return null;
+    }
+    const hex = (n) => Math.max(0, Math.min(255, n)).toString(16).padStart(2, '0');
+    return `#${hex(overWhite[0])}${hex(overWhite[1])}${hex(overWhite[2])}`.toUpperCase();
+}
+/**
+ * Excel never sees the grid's CSS, so the udp-col-* column tints don't carry over
+ * to a `.xlsx` by default. This resolves each preset to its *live themed* color
+ * (honoring the active theme and any `color-mix`) and returns matching ExcelStyle
+ * entries keyed by the same class name, so cellClass / headerClass tints export.
+ *
+ * Must run after the grid's stylesheet is in the DOM (ag-grid-base.css is global
+ * since the component is `shadow: false`). Resolved at grid creation because
+ * `excelStyles` is an `@initial` grid option and cannot be updated at runtime.
+ */
+export function buildUdpPresetExcelStyles() {
+    if (typeof document === 'undefined' || typeof getComputedStyle === 'undefined') {
+        return [];
+    }
+    // Offscreen probes resolving the same global rules AG Grid's real cells/headers
+    // do. Header text color lives on a nested `.ag-header-cell-text`.
+    const host = document.createElement('div');
+    host.setAttribute('aria-hidden', 'true');
+    host.style.cssText = 'position:fixed;left:-9999px;top:0;visibility:hidden;pointer-events:none;';
+    const cell = document.createElement('div');
+    const headerCell = document.createElement('div');
+    const headerText = document.createElement('span');
+    headerText.className = 'ag-header-cell-text';
+    headerCell.appendChild(headerText);
+    host.appendChild(cell);
+    host.appendChild(headerCell);
+    document.body.appendChild(host);
+    const styles = [];
+    try {
+        for (const name of UDP_COL_PRESETS) {
+            cell.className = `ag-cell udp-col-${name}`;
+            const cellStyle = getComputedStyle(cell);
+            const cellBg = resolveColor(cellStyle.backgroundColor);
+            if (cellBg) {
+                const cellFg = resolveColor(cellStyle.color);
+                styles.push(Object.assign({ id: `udp-col-${name}`, interior: { color: cellBg, pattern: 'Solid' } }, (cellFg ? { font: { color: cellFg } } : {})));
+            }
+            headerCell.className = `ag-header-cell udp-col-${name}-header`;
+            const headerBg = resolveColor(getComputedStyle(headerCell).backgroundColor);
+            if (headerBg) {
+                const headerFg = resolveColor(getComputedStyle(headerText).color);
+                styles.push({
+                    id: `udp-col-${name}-header`,
+                    interior: { color: headerBg, pattern: 'Solid' },
+                    font: Object.assign({ bold: true }, (headerFg ? { color: headerFg } : {})),
+                });
+            }
+        }
+    }
+    finally {
+        host.remove();
+    }
+    return styles;
+}