@skyux/ag-grid 13.0.0-alpha.0 → 13.0.0-alpha.2

package/css/sky-ag-grid.css

@@ -3080,6 +3080,7 @@ sky-ag-grid-wrapper + sky-infinite-scroll .sky-infinite-scroll {
   --sky-override-ag-grid-checkbox-selected-background-color: var(
     --sky-background-color-input-selected
   );
+  --sky-override-ag-grid-checkbox-unchecked-background-color: transparent;
   --sky-override-ag-grid-checkbox-unchecked-border-color: var(
     --sky-border-color-neutral-medium
   );
@@ -3098,6 +3099,9 @@ sky-ag-grid-wrapper + sky-infinite-scroll .sky-infinite-scroll {
   --sky-override-ag-grid-header-resize-height: 100%;
   --sky-override-ag-grid-header-row-border-style: solid;
   --sky-override-ag-grid-invalid-color: var(--sky-background-color-danger-dark);
+  --sky-override-ag-grid-odd-row-background-color: var(
+    --sky-background-color-page-default
+  );
   --sky-override-ag-grid-popup-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
   --sky-override-ag-grid-range-selection-border-color: var(
     --sky-highlight-color-info
@@ -3122,6 +3126,9 @@ sky-ag-grid-wrapper + sky-infinite-scroll .sky-infinite-scroll {
 }
 
 .sky-theme-modern:not(.sky-theme-brand-base) .sky-ag-grid {
+  --sky-override-ag-grid-background-color: var(
+    --sky-background-color-page-default
+  );
   --sky-override-ag-grid-cell-focus-horizontal-padding: 10px;
   --sky-override-ag-grid-cell-horizontal-padding: 12px;
   --sky-override-ag-grid-cell-padding-vertical: 16px;
@@ -3131,6 +3138,9 @@ sky-ag-grid-wrapper + sky-infinite-scroll .sky-infinite-scroll {
   --sky-override-ag-grid-header-height: 60px;
   --sky-override-ag-grid-header-icon-spacing: 10px;
   --sky-override-ag-grid-header-resize-height: 16px;
+  --sky-override-ag-grid-odd-row-background-color: var(
+    --sky-background-color-page-default
+  );
   --sky-override-ag-grid-popup-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
   --sky-override-ag-grid-resize-handle-color: #1870b8;
   --sky-override-ag-grid-row-height: 60px;

package/fesm2022/skyux-ag-grid.mjs

@@ -152,7 +152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 const defaultsForAllThemes = {
-    backgroundColor: 'var(--sky-override-ag-grid-background-color, var(--sky-background-color-page-default))',
+    backgroundColor: 'var(--sky-override-ag-grid-background-color, var(--sky-color-background-row-base))',
     borderColor: 'var(--sky-override-ag-grid-border-color, var(--sky-color-border-separator-row))',
     borderRadius: 'var(--sky-override-ag-grid-border-radius, var(--sky-border-radius-s))',
     cardShadow: 'none',
@@ -162,10 +162,10 @@ const defaultsForAllThemes = {
     checkboxCheckedBorderColor: { ref: 'checkboxCheckedShapeColor' },
     checkboxCheckedShapeColor: 'var(--sky-override-switch-checked-color, var(--sky-color-icon-inverse, var(--sky-text-color-default)))',
     checkboxIndeterminateBackgroundColor: 'var(--sky-override-switch-checked-color, var(--sky-color-icon-inverse, transparent))',
-    checkboxUncheckedBackgroundColor: 'transparent',
+    checkboxUncheckedBackgroundColor: 'var(--sky-override-ag-grid-checkbox-unchecked-background-color, var(--sky-color-background-input-base))',
     checkboxUncheckedBorderColor: `var(
     --sky-override-ag-grid-checkbox-unchecked-border-color,
-    var(--sky-color-border-input-base)
+    var(--sky-color-border-switch-base)
   )`,
     checkboxCheckedShapeImage: {
         svg: `<svg width="16" height="16" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M13.9884 3.54756C13.6244 3.16685 13.0164 3.1491 12.6302 3.50792L5.62682 10.0157L3.64517 8.03282C3.27275 7.66016 2.66443 7.65572 2.28646 8.0229C1.90848 8.39007 1.90397 8.98983 2.2764 9.36248L4.85162 11.9393C5.25487 12.3428 5.91121 12.3548 6.32932 11.9663L13.9482 4.88659C14.3343 4.52777 14.3523 3.92827 13.9884 3.54756Z" fill="#212121"/></svg>`,
@@ -188,7 +188,7 @@ const defaultsForAllThemes = {
     inputFocusShadow: 'none',
     invalidColor: 'var(--sky-override-ag-grid-invalid-color, var(--sky-color-background-action-danger-base))',
     listItemHeight: { ref: 'rowHeight' },
-    oddRowBackgroundColor: 'var(--sky-background-color-page-default)',
+    oddRowBackgroundColor: 'var(--sky-override-ag-grid-odd-row-background-color, var(--sky-color-background-row-base))',
     pickerListBackgroundColor: { ref: 'backgroundColor' },
     popupShadow: 'var(--sky-override-ag-grid-popup-shadow, var(--sky-elevation-overlay-300))',
     rangeSelectionBorderColor: 'var(--sky-override-ag-grid-range-selection-border-color, var(--sky-color-border-input-focus))',
@@ -2806,7 +2806,7 @@ class SkyAgGridHeaderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyAgGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyAgGridHeaderComponent, isStandalone: true, selector: "sky-ag-grid-header", host: { properties: { "attr.title": "accessibleHeaderText()", "attr.aria-label": "displayName() || accessibleHeaderText()", "attr.role": "\"note\"" } }, viewQueries: [{ propertyName: "inlineHelpContainer", first: true, predicate: ["inlineHelpContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"ag-cell-label-container\" role=\"presentation\">\n  @if (params()?.enableMenu) {\n    <span\n      class=\"ag-header-icon ag-header-cell-menu-button\"\n      aria-hidden=\"true\"\n      (click)=\"onMenuClick($event)\"\n    >\n      <sky-icon iconName=\"more-actions\" />\n    </span>\n  }\n  <div class=\"ag-header-cell-label\" role=\"presentation\">\n    <span class=\"ag-header-cell-label-and-icons\">\n      @if (params()?.enableSorting) {\n        <button\n          aria-hidden=\"true\"\n          class=\"ag-header-cell-text ag-header-cell-label-sortable sky-btn-link-inline\"\n          tabindex=\"-1\"\n          type=\"button\"\n          [attr.aria-label]=\"accessibleHeaderText()\"\n          [innerText]=\"displayName() ?? ''\"\n          [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n          (click)=\"onSortRequested($event)\"\n        ></button>\n      } @else if (displayName()) {\n        <span\n          aria-hidden=\"true\"\n          class=\"ag-header-cell-text\"\n          [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n          >{{ displayName() }}</span\n        >\n      }\n      @if (filterEnabled$ | async) {\n        <span\n          aria-hidden=\"true\"\n          class=\"ag-header-icon ag-header-label-icon ag-filter-icon\"\n          ><sky-icon iconName=\"filter\"\n        /></span>\n      }\n      @if (params()?.enableSorting) {\n        @if (sortOrder$ | async; as sortDirection) {\n          <button\n            class=\"ag-sort-indicator-container sky-btn sky-btn-icon-borderless\"\n            type=\"button\"\n            (click)=\"onSortRequested($event)\"\n          >\n            @if (sortDirection === 'desc') {\n              <span class=\"ag-header-icon ag-header-label-icon\">\n                <sky-icon iconName=\"chevron-down\" />\n                <span class=\"sky-screen-reader-only\">{{\n                  'sky_ag_grid_column_header_sort_button_aria_label_currently_desc'\n                    | skyLibResources: displayName() ?? accessibleHeaderText()\n                }}</span></span\n              >\n            }\n            @if (sortDirection === 'asc') {\n              <span class=\"ag-header-icon ag-header-label-icon\">\n                <sky-icon iconName=\"chevron-up\" />\n                <span class=\"sky-screen-reader-only\">{{\n                  'sky_ag_grid_column_header_sort_button_aria_label_currently_asc'\n                    | skyLibResources: displayName() ?? accessibleHeaderText()\n                }}</span></span\n              >\n            }\n\n            @if (sortIndexDisplay$ | async; as sortIndexDisplay) {\n              <span\n                aria-hidden=\"true\"\n                class=\"ag-sort-indicator-icon ag-sort-order\"\n                >{{ sortIndexDisplay }}</span\n              >\n            }\n          </button>\n        } @else {\n          <span class=\"sky-screen-reader-only\">{{\n            'sky_ag_grid_column_header_sort_button_aria_label_currently_not_sorted'\n              | skyLibResources: displayName() ?? accessibleHeaderText()\n          }}</span>\n        }\n      }\n    </span>\n    <span #inlineHelpContainer class=\"sky-control-help-container\"></span>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;max-width:100%;height:100%;align-items:center;align-content:center}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned){flex-direction:row-reverse}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned) .ag-header-cell-label .sky-control-help-container{order:0}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned) .ag-header-cell-label .ag-header-cell-label-and-icons{order:1}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-label-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-menu-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-icon{line-height:0;margin-left:var(--sky-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless{margin-left:var(--sky-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-label-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-menu-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-icon{margin-left:0}button.ag-header-cell-label{max-width:100%}.ag-cell-label-container{padding:0;gap:var(--sky-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label{padding-right:0;padding-left:0}.ag-header-cell-label .ag-header-cell-label-and-icons{display:flex;flex-wrap:nowrap;flex-direction:row;overflow:hidden;align-items:center}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-cell-text{flex-grow:0;flex-shrink:1}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container{color:var(--sky-override-ag-grid-sort-color, var(--sky-color-text-deemphasized));width:initial;height:initial}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container:hover{border:none}button{cursor:pointer;flex-grow:0;flex-shrink:1}\n"], dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2$5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i2$4.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyAgGridHeaderComponent, isStandalone: true, selector: "sky-ag-grid-header", host: { properties: { "attr.title": "accessibleHeaderText()", "attr.aria-label": "displayName() || accessibleHeaderText()", "attr.role": "\"note\"" } }, viewQueries: [{ propertyName: "inlineHelpContainer", first: true, predicate: ["inlineHelpContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"ag-cell-label-container\" role=\"presentation\">\n  @if (params()?.enableMenu) {\n    <span\n      class=\"ag-header-icon ag-header-cell-menu-button\"\n      aria-hidden=\"true\"\n      (click)=\"onMenuClick($event)\"\n    >\n      <sky-icon iconName=\"more-actions\" />\n    </span>\n  }\n  <div class=\"ag-header-cell-label\" role=\"presentation\">\n    <span class=\"ag-header-cell-label-and-icons\">\n      @if (params()?.enableSorting) {\n        <button\n          aria-hidden=\"true\"\n          class=\"ag-header-cell-text ag-header-cell-label-sortable sky-btn-link-inline\"\n          tabindex=\"-1\"\n          type=\"button\"\n          [attr.aria-label]=\"accessibleHeaderText()\"\n          [innerText]=\"displayName() ?? ''\"\n          [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n          (click)=\"onSortRequested($event)\"\n        ></button>\n      } @else if (displayName()) {\n        <span\n          aria-hidden=\"true\"\n          class=\"ag-header-cell-text\"\n          [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n          >{{ displayName() }}</span\n        >\n      }\n      @if (filterEnabled$ | async) {\n        <span\n          aria-hidden=\"true\"\n          class=\"ag-header-icon ag-header-label-icon ag-filter-icon\"\n          ><sky-icon iconName=\"filter\"\n        /></span>\n      }\n      @if (params()?.enableSorting) {\n        @if (sortOrder$ | async; as sortDirection) {\n          <button\n            class=\"ag-sort-indicator-container sky-btn sky-btn-icon-borderless\"\n            type=\"button\"\n            (click)=\"onSortRequested($event)\"\n          >\n            @if (sortDirection === 'desc') {\n              <span class=\"ag-header-icon ag-header-label-icon\">\n                <sky-icon iconName=\"chevron-down\" iconSize=\"s\" />\n                <span class=\"sky-screen-reader-only\">{{\n                  'sky_ag_grid_column_header_sort_button_aria_label_currently_desc'\n                    | skyLibResources: displayName() ?? accessibleHeaderText()\n                }}</span></span\n              >\n            }\n            @if (sortDirection === 'asc') {\n              <span class=\"ag-header-icon ag-header-label-icon\">\n                <sky-icon iconName=\"chevron-up\" iconSize=\"s\" />\n                <span class=\"sky-screen-reader-only\">{{\n                  'sky_ag_grid_column_header_sort_button_aria_label_currently_asc'\n                    | skyLibResources: displayName() ?? accessibleHeaderText()\n                }}</span></span\n              >\n            }\n\n            @if (sortIndexDisplay$ | async; as sortIndexDisplay) {\n              <span\n                aria-hidden=\"true\"\n                class=\"ag-sort-indicator-icon ag-sort-order\"\n                >{{ sortIndexDisplay }}</span\n              >\n            }\n          </button>\n        } @else {\n          <span class=\"sky-screen-reader-only\">{{\n            'sky_ag_grid_column_header_sort_button_aria_label_currently_not_sorted'\n              | skyLibResources: displayName() ?? accessibleHeaderText()\n          }}</span>\n        }\n      }\n    </span>\n    <span #inlineHelpContainer class=\"sky-control-help-container\"></span>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;max-width:100%;height:100%;align-items:center;align-content:center}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned){flex-direction:row-reverse}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned) .ag-header-cell-label .sky-control-help-container{order:0}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned) .ag-header-cell-label .ag-header-cell-label-and-icons{order:1}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-label-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-menu-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-icon{line-height:0;margin-left:var(--sky-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless{margin-left:var(--sky-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-label-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-menu-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-icon{margin-left:0}button.ag-header-cell-label{max-width:100%}.ag-cell-label-container{padding:0;gap:var(--sky-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label{padding-right:0;padding-left:0}.ag-header-cell-label .ag-header-cell-label-and-icons{display:flex;flex-wrap:nowrap;flex-direction:row;overflow:hidden;align-items:center}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-cell-text{flex-grow:0;flex-shrink:1}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container{color:var(--sky-override-ag-grid-sort-color, var(--sky-color-text-deemphasized));width:initial;height:initial}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container:hover{border:none}button{cursor:pointer;flex-grow:0;flex-shrink:1}\n"], dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2$5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i2$4.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyAgGridHeaderComponent, decorators: [{
             type: Component,
@@ -2814,7 +2814,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
                         '[attr.title]': 'accessibleHeaderText()',
                         '[attr.aria-label]': 'displayName() || accessibleHeaderText()',
                         '[attr.role]': '"note"',
-                    }, imports: [SkyIconModule, SkyThemeModule, AsyncPipe, SkyI18nModule], template: "<div class=\"ag-cell-label-container\" role=\"presentation\">\n  @if (params()?.enableMenu) {\n    <span\n      class=\"ag-header-icon ag-header-cell-menu-button\"\n      aria-hidden=\"true\"\n      (click)=\"onMenuClick($event)\"\n    >\n      <sky-icon iconName=\"more-actions\" />\n    </span>\n  }\n  <div class=\"ag-header-cell-label\" role=\"presentation\">\n    <span class=\"ag-header-cell-label-and-icons\">\n      @if (params()?.enableSorting) {\n        <button\n          aria-hidden=\"true\"\n          class=\"ag-header-cell-text ag-header-cell-label-sortable sky-btn-link-inline\"\n          tabindex=\"-1\"\n          type=\"button\"\n          [attr.aria-label]=\"accessibleHeaderText()\"\n          [innerText]=\"displayName() ?? ''\"\n          [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n          (click)=\"onSortRequested($event)\"\n        ></button>\n      } @else if (displayName()) {\n        <span\n          aria-hidden=\"true\"\n          class=\"ag-header-cell-text\"\n          [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n          >{{ displayName() }}</span\n        >\n      }\n      @if (filterEnabled$ | async) {\n        <span\n          aria-hidden=\"true\"\n          class=\"ag-header-icon ag-header-label-icon ag-filter-icon\"\n          ><sky-icon iconName=\"filter\"\n        /></span>\n      }\n      @if (params()?.enableSorting) {\n        @if (sortOrder$ | async; as sortDirection) {\n          <button\n            class=\"ag-sort-indicator-container sky-btn sky-btn-icon-borderless\"\n            type=\"button\"\n            (click)=\"onSortRequested($event)\"\n          >\n            @if (sortDirection === 'desc') {\n              <span class=\"ag-header-icon ag-header-label-icon\">\n                <sky-icon iconName=\"chevron-down\" />\n                <span class=\"sky-screen-reader-only\">{{\n                  'sky_ag_grid_column_header_sort_button_aria_label_currently_desc'\n                    | skyLibResources: displayName() ?? accessibleHeaderText()\n                }}</span></span\n              >\n            }\n            @if (sortDirection === 'asc') {\n              <span class=\"ag-header-icon ag-header-label-icon\">\n                <sky-icon iconName=\"chevron-up\" />\n                <span class=\"sky-screen-reader-only\">{{\n                  'sky_ag_grid_column_header_sort_button_aria_label_currently_asc'\n                    | skyLibResources: displayName() ?? accessibleHeaderText()\n                }}</span></span\n              >\n            }\n\n            @if (sortIndexDisplay$ | async; as sortIndexDisplay) {\n              <span\n                aria-hidden=\"true\"\n                class=\"ag-sort-indicator-icon ag-sort-order\"\n                >{{ sortIndexDisplay }}</span\n              >\n            }\n          </button>\n        } @else {\n          <span class=\"sky-screen-reader-only\">{{\n            'sky_ag_grid_column_header_sort_button_aria_label_currently_not_sorted'\n              | skyLibResources: displayName() ?? accessibleHeaderText()\n          }}</span>\n        }\n      }\n    </span>\n    <span #inlineHelpContainer class=\"sky-control-help-container\"></span>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;max-width:100%;height:100%;align-items:center;align-content:center}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned){flex-direction:row-reverse}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned) .ag-header-cell-label .sky-control-help-container{order:0}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned) .ag-header-cell-label .ag-header-cell-label-and-icons{order:1}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-label-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-menu-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-icon{line-height:0;margin-left:var(--sky-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless{margin-left:var(--sky-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-label-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-menu-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-icon{margin-left:0}button.ag-header-cell-label{max-width:100%}.ag-cell-label-container{padding:0;gap:var(--sky-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label{padding-right:0;padding-left:0}.ag-header-cell-label .ag-header-cell-label-and-icons{display:flex;flex-wrap:nowrap;flex-direction:row;overflow:hidden;align-items:center}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-cell-text{flex-grow:0;flex-shrink:1}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container{color:var(--sky-override-ag-grid-sort-color, var(--sky-color-text-deemphasized));width:initial;height:initial}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container:hover{border:none}button{cursor:pointer;flex-grow:0;flex-shrink:1}\n"] }]
+                    }, imports: [SkyIconModule, SkyThemeModule, AsyncPipe, SkyI18nModule], template: "<div class=\"ag-cell-label-container\" role=\"presentation\">\n  @if (params()?.enableMenu) {\n    <span\n      class=\"ag-header-icon ag-header-cell-menu-button\"\n      aria-hidden=\"true\"\n      (click)=\"onMenuClick($event)\"\n    >\n      <sky-icon iconName=\"more-actions\" />\n    </span>\n  }\n  <div class=\"ag-header-cell-label\" role=\"presentation\">\n    <span class=\"ag-header-cell-label-and-icons\">\n      @if (params()?.enableSorting) {\n        <button\n          aria-hidden=\"true\"\n          class=\"ag-header-cell-text ag-header-cell-label-sortable sky-btn-link-inline\"\n          tabindex=\"-1\"\n          type=\"button\"\n          [attr.aria-label]=\"accessibleHeaderText()\"\n          [innerText]=\"displayName() ?? ''\"\n          [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n          (click)=\"onSortRequested($event)\"\n        ></button>\n      } @else if (displayName()) {\n        <span\n          aria-hidden=\"true\"\n          class=\"ag-header-cell-text\"\n          [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n          >{{ displayName() }}</span\n        >\n      }\n      @if (filterEnabled$ | async) {\n        <span\n          aria-hidden=\"true\"\n          class=\"ag-header-icon ag-header-label-icon ag-filter-icon\"\n          ><sky-icon iconName=\"filter\"\n        /></span>\n      }\n      @if (params()?.enableSorting) {\n        @if (sortOrder$ | async; as sortDirection) {\n          <button\n            class=\"ag-sort-indicator-container sky-btn sky-btn-icon-borderless\"\n            type=\"button\"\n            (click)=\"onSortRequested($event)\"\n          >\n            @if (sortDirection === 'desc') {\n              <span class=\"ag-header-icon ag-header-label-icon\">\n                <sky-icon iconName=\"chevron-down\" iconSize=\"s\" />\n                <span class=\"sky-screen-reader-only\">{{\n                  'sky_ag_grid_column_header_sort_button_aria_label_currently_desc'\n                    | skyLibResources: displayName() ?? accessibleHeaderText()\n                }}</span></span\n              >\n            }\n            @if (sortDirection === 'asc') {\n              <span class=\"ag-header-icon ag-header-label-icon\">\n                <sky-icon iconName=\"chevron-up\" iconSize=\"s\" />\n                <span class=\"sky-screen-reader-only\">{{\n                  'sky_ag_grid_column_header_sort_button_aria_label_currently_asc'\n                    | skyLibResources: displayName() ?? accessibleHeaderText()\n                }}</span></span\n              >\n            }\n\n            @if (sortIndexDisplay$ | async; as sortIndexDisplay) {\n              <span\n                aria-hidden=\"true\"\n                class=\"ag-sort-indicator-icon ag-sort-order\"\n                >{{ sortIndexDisplay }}</span\n              >\n            }\n          </button>\n        } @else {\n          <span class=\"sky-screen-reader-only\">{{\n            'sky_ag_grid_column_header_sort_button_aria_label_currently_not_sorted'\n              | skyLibResources: displayName() ?? accessibleHeaderText()\n          }}</span>\n        }\n      }\n    </span>\n    <span #inlineHelpContainer class=\"sky-control-help-container\"></span>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;max-width:100%;height:100%;align-items:center;align-content:center}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned){flex-direction:row-reverse}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned) .ag-header-cell-label .sky-control-help-container{order:0}:host-context(.ag-header-cell.ag-right-aligned-header,.ag-header-cell.sky-ag-grid-header-right-aligned) .ag-header-cell-label .ag-header-cell-label-and-icons{order:1}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-label-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-menu-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-icon{line-height:0;margin-left:var(--sky-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless{margin-left:var(--sky-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-label-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-menu-icon,.ag-header-cell-label .ag-header-cell-label-and-icons .sky-btn.sky-btn-icon-borderless .ag-header-icon{margin-left:0}button.ag-header-cell-label{max-width:100%}.ag-cell-label-container{padding:0;gap:var(--sky-override-ag-grid-header-icon-spacing, var(--sky-space-gap-text_action-xs))}.ag-header-cell-label{padding-right:0;padding-left:0}.ag-header-cell-label .ag-header-cell-label-and-icons{display:flex;flex-wrap:nowrap;flex-direction:row;overflow:hidden;align-items:center}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-header-cell-text{flex-grow:0;flex-shrink:1}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container{color:var(--sky-override-ag-grid-sort-color, var(--sky-color-text-deemphasized));width:initial;height:initial}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container:hover{border:none}button{cursor:pointer;flex-grow:0;flex-shrink:1}\n"] }]
         }], propDecorators: { inlineHelpContainer: [{
                 type: ViewChild,
                 args: ['inlineHelpContainer', { read: ElementRef, static: true }]
@@ -3178,12 +3178,12 @@ const iconMap = {
     // show on column header when column is sorted ascending
     sortAscending: {
         name: 'chevron-up',
-        size: 24,
+        size: 16,
     },
     // show on column header when column is sorted descending
     sortDescending: {
         name: 'chevron-down',
-        size: 24,
+        size: 16,
     },
     // show on column header when column has no sort, only when
     // enabled with colDef.unSortIcon=true