@skyux/ag-grid 12.9.0 → 12.11.0

package/fesm2022/skyux-ag-grid.mjs

@@ -1,17 +1,17 @@
 import { DOCUMENT, AsyncPipe, NgClass, CommonModule, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, Injectable, input, numberAttribute, computed, inject, ChangeDetectorRef, ElementRef, booleanAttribute, Input, HostBinding, ContentChild, ChangeDetectionStrategy, Component, contentChildren, effect, Directive, InjectionToken, signal, model, output, contentChild, linkedSignal, EnvironmentInjector, HostListener, ViewChild, ViewEncapsulation, Optional } from '@angular/core';
+import { NgModule, Injectable, input, numberAttribute, viewChild, inject, ChangeDetectorRef, ElementRef, effect, booleanAttribute, Input, HostBinding, ContentChild, ChangeDetectionStrategy, Component, contentChildren, Directive, InjectionToken, computed, signal, model, output, contentChild, linkedSignal, EnvironmentInjector, HostListener, ViewChild, ViewEncapsulation, CSP_NONCE, Optional } from '@angular/core';
 import { AgGridAngular } from 'ag-grid-angular';
 import * as i3 from '@skyux/i18n';
 import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
 import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@skyux/core';
-import { SkyMutationObserverService, SkyViewkeeperModule, SkyMediaQueryService, SkyResizeObserverService, SkyAffixModule, SkyOverlayService, SkyScrollableHostService, SKY_STACKING_CONTEXT, SkyIdModule, SkyNumericModule, SkyDynamicComponentService, SkyDynamicComponentLocation, SkyLogService } from '@skyux/core';
+import { SkyMutationObserverService, SkyIdModule, SkyViewkeeperModule, SkyMediaQueryService, SkyResizeObserverService, SkyAffixModule, SkyOverlayService, SkyScrollableHostService, SKY_STACKING_CONTEXT, SkyNumericModule, SkyDynamicComponentService, SkyDynamicComponentLocation, SkyLogService } from '@skyux/core';
 import { Subject, BehaviorSubject, ReplaySubject, takeUntil, combineLatest, of, distinctUntilChanged, take, Subscription, switchMap, merge, fromEvent, startWith, map, scan, filter as filter$1, fromEventPattern, isObservable } from 'rxjs';
 import { takeUntil as takeUntil$1, filter, first } from 'rxjs/operators';
 import * as i2$4 from '@skyux/theme';
 import { SkyThemeService, SkyThemeModule } from '@skyux/theme';
-import { themeQuartz, colorSchemeLight, iconSetQuartz, colorSchemeDark, KeyCode, PopupComponent } from 'ag-grid-community';
+import { themeQuartz, colorSchemeLight, colorSchemeDark, KeyCode, PopupComponent } from 'ag-grid-community';
 import * as i1$1 from '@skyux/data-manager';
 import * as i1$2 from '@skyux/layout';
 import { SkyInlineDeleteModule } from '@skyux/layout';
@@ -242,8 +242,8 @@ const modernThemeDarkBase = {
     rowHeight: 60,
 };
 const SkyAgGridDataGridDefault = themeQuartz
+    .withoutPart('iconSet')
     .withPart(colorSchemeLight)
-    .withPart(iconSetQuartz)
     .withParams(defaultThemeBase);
 const SkyAgGridDataEntryGridDefault = SkyAgGridDataGridDefault.withParams(defaultsForDataEntryGrid).withParams({
     cellHorizontalPadding: '11px',
@@ -254,13 +254,13 @@ const SkyAgGridDataEntryGridDefault = SkyAgGridDataGridDefault.withParams(defaul
     },
 });
 const SkyAgGridDataGridModernLight = themeQuartz
+    .withoutPart('iconSet')
     .withPart(colorSchemeLight)
-    .withPart(iconSetQuartz)
     .withParams(modernThemeBase);
 const SkyAgGridDataGridModernLightCompact = SkyAgGridDataGridModernLight.withParams(modernCompactThemeBase);
 const SkyAgGridDataGridModernDark = themeQuartz
+    .withoutPart('iconSet')
     .withPart(colorSchemeDark)
-    .withPart(iconSetQuartz)
     .withParams(modernThemeDarkBase);
 const SkyAgGridDataGridModernDarkCompact = SkyAgGridDataGridModernDark.withParams(modernCompactThemeBase);
 const SkyAgGridDataEntryGridModernLight = SkyAgGridDataGridModernLight.withParams(defaultsForDataEntryGrid).withParams({
@@ -377,9 +377,9 @@ class SkyAgGridAdapterService {
         return undefined;
     }
     focusOnFocusableChildren(element) {
-        const focusableChildren = this.#skyAdapterService.getFocusableChildren(element);
-        if (focusableChildren.length) {
-            focusableChildren[0].focus();
+        const [focusChild] = this.#skyAdapterService.getFocusableChildren(element);
+        if (focusChild?.offsetParent) {
+            focusChild.focus();
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridAdapterService, deps: [{ token: i1.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -550,9 +550,7 @@ class SkyAgGridWrapperComponent {
         this.minHeight = input(50, {
             transform: numberAttribute,
         });
-        this.minHeightStyle = computed(() => {
-            return `--sky-ag-grid-min-height: ${this.minHeight()}px;`;
-        });
+        this.skyAgGridDiv = viewChild('skyAgGridDiv');
         this.#_viewkeeperClasses = [];
         this.#ngUnsubscribe = new Subject();
         this.#themeSvc = inject(SkyThemeService, {
@@ -577,6 +575,11 @@ class SkyAgGridWrapperComponent {
         this.beforeAnchorId = 'sky-ag-grid-nav-anchor-before-' + idIndex;
         this.gridId = 'sky-ag-grid-' + idIndex;
         this.wrapperClasses$ = this.#wrapperClasses.asObservable();
+        effect(() => {
+            const minHeight = this.minHeight();
+            const skyAgGridDiv = this.skyAgGridDiv()?.nativeElement;
+            skyAgGridDiv?.style.setProperty('--sky-ag-grid-min-height', `${minHeight}px`);
+        });
     }
     ngAfterContentInit() {
         if (this.agGrid) {
@@ -769,11 +772,11 @@ class SkyAgGridWrapperComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: SkyAgGridWrapperComponent, isStandalone: true, selector: "sky-ag-grid-wrapper", inputs: { compact: { classPropertyName: "compact", publicName: "compact", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sky-ag-grid-layout-normal": "this.isNormalLayout" } }, queries: [{ propertyName: "agGrid", first: true, predicate: AgGridAngular, descendants: true, static: true }], ngImport: i0, template: "<span\n  class=\"nav-anchor\"\n  tabindex=\"0\"\n  [id]=\"beforeAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n<div\n  class=\"sky-ag-grid\"\n  tabindex=\"0\"\n  [class.sky-ag-grid-top-scrollbar]=\"\n    agGrid?.gridOptions?.context &&\n    agGrid?.gridOptions?.context['enableTopScroll']\n  \"\n  [ngClass]=\"wrapperClasses$ | async\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses\"\n  [style]=\"minHeightStyle()\"\n  (keydown)=\"onGridKeydown($event)\"\n  (keyup.escape)=\"onKeyUpEscape($event)\"\n>\n  <ng-content />\n</div>\n<span\n  tabindex=\"0\"\n  class=\"nav-anchor\"\n  [id]=\"afterAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: SkyAgGridWrapperComponent, isStandalone: true, selector: "sky-ag-grid-wrapper", inputs: { compact: { classPropertyName: "compact", publicName: "compact", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sky-ag-grid-layout-normal": "this.isNormalLayout" } }, queries: [{ propertyName: "agGrid", first: true, predicate: AgGridAngular, descendants: true, static: true }], viewQueries: [{ propertyName: "skyAgGridDiv", first: true, predicate: ["skyAgGridDiv"], descendants: true, isSignal: true }], ngImport: i0, template: "<span\n  class=\"nav-anchor\"\n  tabindex=\"0\"\n  [id]=\"beforeAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n<div\n  #skyAgGridDiv\n  class=\"sky-ag-grid\"\n  tabindex=\"0\"\n  [class.sky-ag-grid-top-scrollbar]=\"\n    agGrid?.gridOptions?.context &&\n    agGrid?.gridOptions?.context['enableTopScroll']\n  \"\n  [ngClass]=\"wrapperClasses$ | async\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses\"\n  (keydown)=\"onGridKeydown($event)\"\n  (keyup.escape)=\"onKeyUpEscape($event)\"\n>\n  <ng-content />\n</div>\n<span\n  tabindex=\"0\"\n  class=\"nav-anchor\"\n  [id]=\"afterAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyAgGridWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-ag-grid-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, NgClass, SkyViewkeeperModule], template: "<span\n  class=\"nav-anchor\"\n  tabindex=\"0\"\n  [id]=\"beforeAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n<div\n  class=\"sky-ag-grid\"\n  tabindex=\"0\"\n  [class.sky-ag-grid-top-scrollbar]=\"\n    agGrid?.gridOptions?.context &&\n    agGrid?.gridOptions?.context['enableTopScroll']\n  \"\n  [ngClass]=\"wrapperClasses$ | async\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses\"\n  [style]=\"minHeightStyle()\"\n  (keydown)=\"onGridKeydown($event)\"\n  (keyup.escape)=\"onKeyUpEscape($event)\"\n>\n  <ng-content />\n</div>\n<span\n  tabindex=\"0\"\n  class=\"nav-anchor\"\n  [id]=\"afterAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n" }]
+            args: [{ selector: 'sky-ag-grid-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, NgClass, SkyIdModule, SkyViewkeeperModule], template: "<span\n  class=\"nav-anchor\"\n  tabindex=\"0\"\n  [id]=\"beforeAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n<div\n  #skyAgGridDiv\n  class=\"sky-ag-grid\"\n  tabindex=\"0\"\n  [class.sky-ag-grid-top-scrollbar]=\"\n    agGrid?.gridOptions?.context &&\n    agGrid?.gridOptions?.context['enableTopScroll']\n  \"\n  [ngClass]=\"wrapperClasses$ | async\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses\"\n  (keydown)=\"onGridKeydown($event)\"\n  (keyup.escape)=\"onKeyUpEscape($event)\"\n>\n  <ng-content />\n</div>\n<span\n  tabindex=\"0\"\n  class=\"nav-anchor\"\n  [id]=\"afterAnchorId\"\n  (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n" }]
         }], ctorParameters: () => [], propDecorators: { agGrid: [{
                 type: ContentChild,
                 args: [AgGridAngular, {
@@ -2802,34 +2805,456 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
             }] } });
 
 const iconMap = {
-    sortDescending: {
+    // header column group shown when expanded (click to contract)
+    columnGroupOpened: {
+        name: 'chevron-double-left',
+        size: 16,
+    },
+    // header column group shown when contracted (click to expand)
+    columnGroupClosed: {
+        name: 'chevron-double-right',
+        size: 16,
+    },
+    // column tool panel column group contracted (click to expand)
+    columnSelectClosed: {
+        name: 'chevron-right',
+        size: 24,
+    },
+    // column tool panel column group expanded (click to contract)
+    columnSelectOpen: {
         name: 'chevron-down',
+        size: 24,
+    },
+    // column tool panel header expand/collapse all button, shown
+    // when some children are expanded and others are collapsed
+    columnSelectIndeterminate: {
+        name: 'subtract',
         size: 16,
     },
-    sortAscending: {
-        name: 'chevron-up',
+    // accordion open (filter tool panel group, charts group)
+    accordionOpen: {
+        name: 'chevron-down',
+        size: 24,
+    },
+    // accordion closed (filter tool panel group, charts group)
+    accordionClosed: {
+        name: 'chevron-right',
+        size: 24,
+    },
+    // accordion indeterminate - shown when some children are expanded and
+    // others are collapsed (filter tool panel group, charts group)
+    accordionIndeterminate: {
+        name: 'subtract',
         size: 16,
     },
-    columnMoveMove: {
+    // shown on drag and drop image component icon while dragging
+    // column to the side of the grid to pin
+    columnMovePin: {
         name: 'arrow-move',
         size: 20,
     },
+    // shown on drag and drop image component icon while dragging over
+    // part of the page that is not a drop zone
     columnMoveHide: {
         name: 'eye-off',
         size: 16,
     },
+    // shown on drag and drop image component icon while dragging
+    // columns to reorder
+    columnMoveMove: {
+        name: 'arrow-move',
+        size: 20,
+    },
+    // animating icon shown when dragging a column to the right of
+    // the grid causes horizontal scrolling
     columnMoveLeft: {
         name: 'arrow-move',
         size: 20,
     },
+    // animating icon shown when dragging a column to the left of
+    // the grid causes horizontal scrolling
     columnMoveRight: {
         name: 'arrow-move',
         size: 20,
     },
-    columnMovePin: {
-        name: 'arrow-move',
+    // shown on drag and drop image component icon while dragging
+    // over Row Groups drop zone
+    columnMoveGroup: {
+        name: 'group',
+        size: 20,
+    },
+    // shown on drag and drop image component icon while dragging
+    // over Values drop zone
+    columnMoveValue: {
+        name: 'calculator',
+        size: 16,
+    },
+    // shown on drag and drop image component icon while dragging
+    // over pivot drop zone
+    columnMovePivot: {
+        name: 'table-freeze-column',
+        size: 16,
+    },
+    // shown on drag and drop image component icon while dragging
+    // over drop zone that doesn't support it, e.g.
+    // string column over aggregation drop zone
+    dropNotAllowed: {
+        name: 'prohibited',
+        size: 16,
+    },
+    // shown on row group when contracted (click to expand)
+    groupContracted: {
+        name: 'chevron-right',
+        size: 24,
+    },
+    // shown on row group when expanded (click to contract)
+    groupExpanded: {
+        name: 'chevron-down',
+        size: 24,
+    },
+    // set filter tree list group contracted (click to expand)
+    setFilterGroupClosed: {
+        name: 'chevron-right',
+        size: 24,
+    },
+    // set filter tree list group expanded (click to contract)
+    setFilterGroupOpen: {
+        name: 'chevron-down',
+        size: 24,
+    },
+    // set filter tree list expand/collapse all button, shown when
+    // some children are expanded and
+    // others are collapsed
+    setFilterGroupIndeterminate: {
+        name: 'subtract',
+        size: 16,
+    },
+    // set filter async values loading
+    setFilterLoading: {
+        name: 'spinner-ios',
+        size: 16,
+    },
+    // context menu chart item
+    chart: {
+        name: 'data-bar-vertical-ascending',
+        size: 16,
+    },
+    // dialog title bar
+    close: {
+        name: 'close',
+        size: 24,
+    },
+    // X (remove) on column 'pill' after adding it to a drop zone list
+    cancel: {
+        name: 'close',
+        size: 24,
+    },
+    // indicates the currently active pin state in the "Pin column"
+    // sub-menu of the column menu
+    check: {
+        name: 'checkmark',
         size: 20,
     },
+    // "go to first" button in pagination controls
+    first: {
+        name: 'arrow-previous',
+        size: 16,
+    },
+    // "go to previous" button in pagination controls
+    previous: {
+        name: 'chevron-left',
+        size: 24,
+    },
+    // "go to next" button in pagination controls
+    next: {
+        name: 'chevron-right',
+        size: 24,
+    },
+    // "go to last" button in pagination controls
+    last: {
+        name: 'arrow-next',
+        size: 16,
+    },
+    // shown on top right of chart when chart is linked to range
+    // data (click to unlink)
+    linked: {
+        name: 'link-dismiss',
+        size: 16,
+    },
+    // shown on top right of chart when chart is not linked to
+    // range data (click to link)
+    unlinked: {
+        name: 'link',
+        size: 16,
+    },
+    // rotating spinner shown by the loading cell renderer
+    groupLoading: {
+        name: 'spinner-ios',
+        size: 16,
+    },
+    // button to launch legacy column menu
+    menu: {
+        name: 'more-actions',
+        size: 24,
+    },
+    // button to launch new enterprise column menu
+    menuAlt: {
+        name: 'more-actions',
+        size: 24,
+    },
+    // menu tab icon in legacy tabbed enterprise column menu
+    legacyMenu: {
+        name: 'more-actions',
+        size: 24,
+    },
+    // open filter button - header, floating filter, menu
+    filter: {
+        name: 'filter',
+        size: 16,
+    },
+    // filter is applied - header (legacy column menu), filter tool panel
+    filterActive: {
+        name: 'filter',
+        size: 16,
+    },
+    // filter tab icon in legacy tabbed enterprise column menu
+    filterTab: {
+        name: 'filter',
+        size: 16,
+    },
+    // filter tool panel tab
+    filtersToolPanel: {
+        name: 'filter',
+        size: 16,
+    },
+    // columns in menu (column chooser / columns tab)
+    columns: {
+        name: 'layout-column-three',
+        size: 16,
+    },
+    // column tool panel tab
+    columnsToolPanel: {
+        name: 'layout-column-three',
+        size: 16,
+    },
+    // button in chart regular size window title bar (click to maximise)
+    maximize: {
+        name: 'arrow-maximize',
+        size: 16,
+    },
+    // button in chart maximised window title bar (click to make regular size)
+    minimize: {
+        name: 'arrow-minimize',
+        size: 16,
+    },
+    // "Pin column" item in column header menu
+    menuPin: {
+        name: 'pin',
+        size: 16,
+    },
+    // "Value aggregation" column menu item (shown on numeric
+    // columns when grouping is active)"
+    menuValue: {
+        name: 'calculator',
+        size: 16,
+    },
+    // "Group by {column-name}" item in column header menu
+    menuAddRowGroup: {
+        name: 'arrow-collapse-all',
+        size: 16,
+    },
+    // "Un-Group by {column-name}" item in column header menu
+    menuRemoveRowGroup: {
+        name: 'arrow-collapse-all',
+        size: 16,
+    },
+    // context menu copy item
+    clipboardCopy: {
+        name: 'copy',
+        size: 16,
+    },
+    // context menu cut item
+    clipboardCut: {
+        name: 'cut',
+        size: 16,
+    },
+    // context menu paste item
+    clipboardPaste: {
+        name: 'clipboard-arrow-right',
+        size: 16,
+    },
+    // identifies the pivot drop zone
+    pivotPanel: {
+        name: 'pivot',
+        size: 16,
+    },
+    // "Row groups" drop zone in column tool panel
+    rowGroupPanel: {
+        name: 'group',
+        size: 20,
+    },
+    // columns tool panel Values drop zone
+    valuePanel: {
+        name: 'calculator',
+        size: 16,
+    },
+    // drag handle used to pick up draggable columns
+    columnDrag: {
+        name: 're-order-dots-vertical',
+        size: 16,
+    },
+    // drag handle used to pick up draggable rows
+    rowDrag: {
+        name: 'arrow-bidirectional-up-down',
+        size: 16,
+    },
+    // context menu export item
+    save: {
+        name: 'arrow-download',
+        size: 16,
+    },
+    // csv export
+    csvExport: {
+        name: 'document-text',
+        size: 16,
+    },
+    // excel export
+    excelExport: {
+        name: 'document-xls',
+        size: 16,
+    },
+    // icon on select dropdowns (select cell editor, charts tool panels)
+    selectOpen: {
+        name: 'chevron-down',
+        size: 24,
+    },
+    // open icon for rich select editor
+    richSelectOpen: {
+        name: 'chevron-down',
+        size: 24,
+    },
+    // remove for rich select editor pills
+    richSelectRemove: {
+        name: 'close',
+        size: 24,
+    },
+    // icon for sub menu item
+    subMenuOpen: {
+        name: 'arrow-right',
+        size: 16,
+    },
+    // version of subMenuOpen used in RTL mode
+    subMenuOpenRtl: {
+        name: 'arrow-left',
+        size: 16,
+    },
+    // separator between column 'pills' when you add multiple
+    // columns to the header drop zone
+    panelDelimiter: {
+        name: 'chevron-right',
+        size: 16,
+    },
+    // version of panelDelimiter used in RTL mode
+    panelDelimiterRtl: {
+        name: 'arrow-left',
+        size: 16,
+    },
+    // show on column header when column is sorted ascending
+    sortAscending: {
+        name: 'chevron-up',
+        size: 24,
+    },
+    // show on column header when column is sorted descending
+    sortDescending: {
+        name: 'chevron-down',
+        size: 24,
+    },
+    // show on column header when column has no sort, only when
+    // enabled with colDef.unSortIcon=true
+    sortUnSort: {
+        name: 'subtract',
+        size: 16,
+    },
+    // Builder button in Advanced Filter
+    advancedFilterBuilder: {
+        name: 'group',
+        size: 20,
+    },
+    // drag handle used to pick up Advanced Filter Builder rows
+    advancedFilterBuilderDrag: {
+        name: 're-order-dots-vertical',
+        size: 16,
+    },
+    // Advanced Filter Builder row validation error
+    advancedFilterBuilderInvalid: {
+        name: 'prohibited',
+        size: 16,
+    },
+    // shown on Advanced Filter Builder rows to move them up
+    advancedFilterBuilderMoveUp: {
+        name: 'chevron-up',
+        size: 24,
+    },
+    // shown on Advanced Filter Builder rows to move them down
+    advancedFilterBuilderMoveDown: {
+        name: 'chevron-down',
+        size: 24,
+    },
+    // shown on Advanced Filter Builder rows to add new rows
+    advancedFilterBuilderAdd: {
+        name: 'add-circle',
+        size: 24,
+    },
+    // shown on Advanced Filter Builder rows to remove row
+    advancedFilterBuilderRemove: {
+        name: 'subtract-circle',
+        size: 16,
+    },
+    // shown on Advanced Filter Builder selection pills
+    advancedFilterBuilderSelect: {
+        name: 'chevron-down',
+        size: 24,
+    },
+    // icon to open charts menu
+    chartsMenu: {
+        name: 'more-actions',
+        size: 24,
+    },
+    // Edit Chart menu item shown in Integrated Charts menu
+    chartsMenuEdit: {
+        name: 'data-bar-vertical-ascending',
+        size: 16,
+    },
+    // Advanced Settings menu item shown in Integrated Charts menu
+    chartsMenuAdvancedSettings: {
+        name: 'settings',
+        size: 16,
+    },
+    // shown in Integrated Charts menu add fields
+    chartsMenuAdd: {
+        name: 'add',
+        size: 24,
+    },
+    // shown in Integrated Charts tool panel color picker
+    chartsColorPicker: {
+        name: 'chevron-down',
+        size: 24,
+    },
+    // previous in Integrated Charts settings tool panel theme switcher
+    chartsThemePrevious: {
+        name: 'chevron-left',
+        size: 24,
+    },
+    // next in Integrated Charts settings tool panel theme switcher
+    chartsThemeNext: {
+        name: 'chevron-right',
+        size: 24,
+    },
+    // download chart
+    chartsDownload: {
+        name: 'arrow-download',
+        size: 16,
+    },
 };
 
 class SkyAgGridLoadingComponent {
@@ -2942,6 +3367,7 @@ class SkyAgGridService {
     #resources;
     #dateService = inject(SkyDateService);
     #logService = inject(SkyLogService);
+    #cspNonce = inject(CSP_NONCE, { optional: true });
     constructor(agGridAdapterService, themeSvc, resources) {
         this.#agGridAdapterService = agGridAdapterService;
         this.#resources = resources;
@@ -3284,17 +3710,12 @@ class SkyAgGridService {
                     return [];
                 }
             },
-            icons: {
-                sortDescending: this.#getIconTemplate('sortDescending'),
-                sortAscending: this.#getIconTemplate('sortAscending'),
-                columnMoveMove: this.#getIconTemplate('columnMoveMove'),
-                columnMoveHide: this.#getIconTemplate('columnMoveHide'),
-                columnMoveLeft: this.#getIconTemplate('columnMoveLeft'),
-                columnMoveRight: this.#getIconTemplate('columnMoveRight'),
-                columnMovePin: this.#getIconTemplate('columnMovePin'),
-            },
+            icons: Object.fromEntries(Object.keys(iconMap).map((iconKey) => [
+                iconKey,
+                this.#getIconTemplate(iconKey),
+            ])),
             loadingOverlayComponent: SkyAgGridLoadingComponent,
-            onCellFocused: () => this.#onCellFocused(),
+            onCellFocused: (event) => this.#onCellFocused(event),
             rowModelType: 'clientSide',
             rowSelection: {
                 mode: 'multiRow',
@@ -3304,6 +3725,7 @@ class SkyAgGridService {
                 headerCheckbox: false,
             },
             singleClickEdit: true,
+            styleNonce: this.#cspNonce ?? undefined,
             suppressDragLeaveHidesColumns: true,
             theme: getSkyAgGridTheme('data-grid', this.#currentTheme?.theme?.name, this.#currentTheme?.mode?.name, this.#currentTheme?.spacing?.name),
         };
@@ -3361,9 +3783,25 @@ class SkyAgGridService {
         }
         return defaultSkyGridOptions;
     }
-    #onCellFocused() {
-        const currentElement = this.#agGridAdapterService.getFocusedElement();
-        this.#agGridAdapterService.focusOnFocusableChildren(currentElement);
+    #onCellFocused(event) {
+        const shouldFocus = this.#shouldFocusChildren(event);
+        if (shouldFocus) {
+            const currentElement = this.#agGridAdapterService.getFocusedElement();
+            this.#agGridAdapterService.focusOnFocusableChildren(currentElement);
+        }
+    }
+    #shouldFocusChildren(event) {
+        let shouldFocus = true;
+        // The API says the column can be string or null, but should be an object.
+        shouldFocus &&= typeof event.column === 'object';
+        // Row index can be number or null.
+        const rowNode = Number.isInteger(event.rowIndex) &&
+            event.api.getDisplayedRowAtIndex(event.rowIndex);
+        shouldFocus &&= !!rowNode;
+        // Do not change focus if the cell is a row drag or dnd source.
+        shouldFocus &&= !event.column.isRowDrag(rowNode);
+        shouldFocus &&= !event.column.isDndSource(rowNode);
+        return shouldFocus;
     }
     #getDefaultEditableGridOptions(args) {
         const defaultGridOptions = this.#getDefaultGridOptions(args);