@skyux/ag-grid 8.0.0-alpha.13 → 8.0.0-alpha.15

package/fesm2015/skyux-ag-grid.mjs

@@ -1,23 +1,23 @@
-import * as i2$3 from '@angular/common';
+import * as i1$3 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, ElementRef, Component, ChangeDetectionStrategy, ViewChild, ViewEncapsulation, Optional, HostBinding, Input, ChangeDetectorRef, Inject, SkipSelf, ContentChild, Directive, ContentChildren, TemplateRef, ViewChildren, EventEmitter, Output, NgModule } from '@angular/core';
+import { Injectable, ElementRef, Component, ChangeDetectionStrategy, ViewChild, ViewEncapsulation, Optional, HostBinding, Input, inject, ChangeDetectorRef, ContentChild, Directive, ContentChildren, TemplateRef, ViewChildren, EventEmitter, Inject, Output, NgModule } from '@angular/core';
 import * as i1 from '@skyux/core';
-import { SkyDynamicComponentLocation, SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyNumericModule, SkyViewkeeperModule } from '@skyux/core';
-import * as i1$4 from '@skyux/data-manager';
+import { SkyDynamicComponentLocation, SkyMutationObserverService, SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyNumericModule, SkyViewkeeperModule } from '@skyux/core';
+import * as i1$5 from '@skyux/data-manager';
 import { SkyDataManagerModule } from '@skyux/data-manager';
 import * as i3 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
 import * as i3$2 from '@skyux/indicators';
 import { SkyStatusIndicatorModule, SkyIconModule } from '@skyux/indicators';
-import * as i2$4 from '@skyux/layout';
+import * as i2$3 from '@skyux/layout';
 import { SkyInlineDeleteModule } from '@skyux/layout';
 import * as i1$2 from '@skyux/theme';
-import { SkyThemeModule } from '@skyux/theme';
+import { SkyThemeService, SkyThemeModule } from '@skyux/theme';
 import { AgGridAngular, AgGridModule } from 'ag-grid-angular';
 import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import { fromEvent, Subject, BehaviorSubject, Subscription, fromEventPattern } from 'rxjs';
-import { first, takeUntil, filter } from 'rxjs/operators';
+import { first, takeUntil, take, filter } from 'rxjs/operators';
 import * as i1$1 from '@angular/forms';
 import { UntypedFormGroup, UntypedFormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { KeyCode, PopupComponent, Events, Column, RowNode } from 'ag-grid-community';
@@ -29,7 +29,7 @@ import * as i2$2 from '@skyux/datetime';
 import { SkyDatepickerModule } from '@skyux/datetime';
 import * as i3$1 from '@skyux/forms';
 import { SkyInputBoxModule, SkyCheckboxModule } from '@skyux/forms';
-import * as i1$3 from '@skyux/popovers';
+import * as i1$4 from '@skyux/popovers';
 import { SkyPopoverMessageType, SkyPopoverModule } from '@skyux/popovers';
 
 var _SkyAgGridAdapterService_skyAdapterService;
@@ -541,7 +541,7 @@ _SkyAgGridCellEditorLookupComponent_params = new WeakMap(), _SkyAgGridCellEditor
     return applySkyLookupPropertiesDefaults(skyLookupProperties);
 };
 SkyAgGridCellEditorLookupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAgGridCellEditorLookupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellEditorLookupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyAgGridCellEditorLookupComponent, selector: "sky-ag-grid-cell-editor-lookup", host: { properties: { "style.width.px": "this.width" } }, ngImport: i0, template: "<sky-input-box\n  *ngIf=\"isAlive && useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"editorForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [ariaLabelledBy]=\"skyComponentProperties?.ariaLabelledBy\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [disabled]=\"skyComponentProperties?.disabled || false\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"selection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n    [search]=\"skyComponentProperties?.search\"\n    [searchFilters]=\"skyComponentProperties?.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties?.searchTextMinimumCharacters\n    \"\n    (searchAsync)=\"skyComponentProperties?.searchAsync($event)\"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n    (addClick)=\"skyComponentProperties?.addClick($event)\"\n  >\n  </sky-lookup>\n</sky-input-box>\n<sky-input-box\n  *ngIf=\"isAlive && !useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"editorForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [ariaLabelledBy]=\"skyComponentProperties?.ariaLabelledBy\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [disabled]=\"skyComponentProperties?.disabled || false\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"selection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n    [search]=\"skyComponentProperties?.search\"\n    [searchFilters]=\"skyComponentProperties?.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties?.searchTextMinimumCharacters\n    \"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n    (addClick)=\"skyComponentProperties?.addClick($event)\"\n  >\n  </sky-lookup>\n</sky-input-box>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { kind: "component", type: i2.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellEditorLookupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyAgGridCellEditorLookupComponent, selector: "sky-ag-grid-cell-editor-lookup", host: { properties: { "style.width.px": "this.width" } }, ngImport: i0, template: "<sky-input-box\n  *ngIf=\"isAlive && useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"editorForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [ariaLabelledBy]=\"skyComponentProperties?.ariaLabelledBy\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [disabled]=\"skyComponentProperties?.disabled || false\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"selection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n    [search]=\"skyComponentProperties?.search\"\n    [searchFilters]=\"skyComponentProperties?.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties?.searchTextMinimumCharacters\n    \"\n    (searchAsync)=\"skyComponentProperties?.searchAsync($event)\"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n    (addClick)=\"skyComponentProperties?.addClick($event)\"\n  >\n  </sky-lookup>\n</sky-input-box>\n<sky-input-box\n  *ngIf=\"isAlive && !useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"editorForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [ariaLabelledBy]=\"skyComponentProperties?.ariaLabelledBy\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [disabled]=\"skyComponentProperties?.disabled || false\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"selection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n    [search]=\"skyComponentProperties?.search\"\n    [searchFilters]=\"skyComponentProperties?.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties?.searchTextMinimumCharacters\n    \"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n    (addClick)=\"skyComponentProperties?.addClick($event)\"\n  >\n  </sky-lookup>\n</sky-input-box>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { kind: "component", type: i2.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAgGridCellEditorLookupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-editor-lookup', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-input-box\n  *ngIf=\"isAlive && useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"editorForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [ariaLabelledBy]=\"skyComponentProperties?.ariaLabelledBy\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [disabled]=\"skyComponentProperties?.disabled || false\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"selection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n    [search]=\"skyComponentProperties?.search\"\n    [searchFilters]=\"skyComponentProperties?.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties?.searchTextMinimumCharacters\n    \"\n    (searchAsync)=\"skyComponentProperties?.searchAsync($event)\"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n    (addClick)=\"skyComponentProperties?.addClick($event)\"\n  >\n  </sky-lookup>\n</sky-input-box>\n<sky-input-box\n  *ngIf=\"isAlive && !useAsyncSearch\"\n  [disabled]=\"skyComponentProperties?.disabled\"\n  [formGroup]=\"editorForm\"\n>\n  <sky-lookup\n    [ariaLabel]=\"skyComponentProperties?.ariaLabel\"\n    [ariaLabelledBy]=\"skyComponentProperties?.ariaLabelledBy\"\n    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [disabled]=\"skyComponentProperties?.disabled || false\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"selection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\n    [search]=\"skyComponentProperties?.search\"\n    [searchFilters]=\"skyComponentProperties?.searchFilters\"\n    [searchResultsLimit]=\"skyComponentProperties?.searchResultsLimit\"\n    [searchResultTemplate]=\"skyComponentProperties?.searchResultTemplate\"\n    [searchTextMinimumCharacters]=\"\n      skyComponentProperties?.searchTextMinimumCharacters\n    \"\n    [selectMode]=\"skyComponentProperties?.selectMode\"\n    [showAddButton]=\"skyComponentProperties?.showAddButton\"\n    [showMoreConfig]=\"skyComponentProperties?.showMoreConfig\"\n    [wrapperClass]=\"skyComponentProperties?.wrapperClass\"\n    (addClick)=\"skyComponentProperties?.addClick($event)\"\n  >\n  </sky-lookup>\n</sky-input-box>\n", styles: [":host{display:block}\n"] }]
@@ -771,7 +771,7 @@ _SkyAgGridCellValidatorTooltipComponent_hoverTimeout = new WeakMap(), _SkyAgGrid
     }
 };
 SkyAgGridCellValidatorTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAgGridCellValidatorTooltipComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellValidatorTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyAgGridCellValidatorTooltipComponent, selector: "sky-ag-grid-cell-validator-tooltip", inputs: { params: "params" }, ngImport: i0, template: "<div\n  [skyPopover]=\"validatorPopover\"\n  [skyPopoverMessageStream]=\"popoverMessageStream\"\n  class=\"sky-validator-cell\"\n>\n  <ng-content></ng-content>\n  <sky-status-indicator\n    descriptionType=\"none\"\n    indicatorType=\"danger\"\n    class=\"sky-pull-right\"\n  ></sky-status-indicator>\n</div>\n<sky-popover #validatorPopover popoverType=\"danger\">\n  {{ validatorMessage }}\n</sky-popover>\n", styles: [":host div.sky-validator-cell{height:100%;width:100%}:host div.sky-validator-cell:focus{outline:none}\n"], dependencies: [{ kind: "component", type: i1$3.λ6, selector: "sky-popover", inputs: ["alignment", "dismissOnBlur", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i1$3.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { kind: "component", type: i3$2.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellValidatorTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyAgGridCellValidatorTooltipComponent, selector: "sky-ag-grid-cell-validator-tooltip", inputs: { params: "params" }, ngImport: i0, template: "<div\n  [skyPopover]=\"validatorPopover\"\n  [skyPopoverMessageStream]=\"popoverMessageStream\"\n  class=\"sky-validator-cell\"\n>\n  <ng-content></ng-content>\n  <sky-status-indicator\n    descriptionType=\"none\"\n    indicatorType=\"danger\"\n    class=\"sky-pull-right\"\n  ></sky-status-indicator>\n</div>\n<sky-popover #validatorPopover popoverType=\"danger\">\n  {{ validatorMessage }}\n</sky-popover>\n", styles: [":host div.sky-validator-cell{height:100%;width:100%}:host div.sky-validator-cell:focus{outline:none}\n"], dependencies: [{ kind: "component", type: i1$4.λ6, selector: "sky-popover", inputs: ["alignment", "dismissOnBlur", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i1$4.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { kind: "component", type: i3$2.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAgGridCellValidatorTooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-validator-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [skyPopover]=\"validatorPopover\"\n  [skyPopoverMessageStream]=\"popoverMessageStream\"\n  class=\"sky-validator-cell\"\n>\n  <ng-content></ng-content>\n  <sky-status-indicator\n    descriptionType=\"none\"\n    indicatorType=\"danger\"\n    class=\"sky-pull-right\"\n  ></sky-status-indicator>\n</div>\n<sky-popover #validatorPopover popoverType=\"danger\">\n  {{ validatorMessage }}\n</sky-popover>\n", styles: [":host div.sky-validator-cell{height:100%;width:100%}:host div.sky-validator-cell:focus{outline:none}\n"] }]
@@ -859,7 +859,7 @@ class SkyAgGridCellRendererCurrencyValidatorComponent {
 }
 _SkyAgGridCellRendererCurrencyValidatorComponent_changeDetector = new WeakMap();
 SkyAgGridCellRendererCurrencyValidatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAgGridCellRendererCurrencyValidatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellRendererCurrencyValidatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyAgGridCellRendererCurrencyValidatorComponent, selector: "sky-ag-grid-cell-renderer-currency-validator", inputs: { parameters: "parameters" }, ngImport: i0, template: "<sky-ag-grid-cell-validator-tooltip\n  *ngIf=\"cellRendererParams\"\n  [params]=\"cellRendererParams\"\n>\n  <sky-ag-grid-cell-renderer-currency\n    *ngIf=\"isNumeric(cellRendererParams.value); else rawValue\"\n    [params]=\"cellRendererParams\"\n  ></sky-ag-grid-cell-renderer-currency>\n  <ng-template #rawValue>{{ cellRendererParams.value }}</ng-template>\n</sky-ag-grid-cell-validator-tooltip>\n", dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyAgGridCellValidatorTooltipComponent, selector: "sky-ag-grid-cell-validator-tooltip", inputs: ["params"] }, { kind: "component", type: SkyAgGridCellRendererCurrencyComponent, selector: "sky-ag-grid-cell-renderer-currency", inputs: ["params"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellRendererCurrencyValidatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyAgGridCellRendererCurrencyValidatorComponent, selector: "sky-ag-grid-cell-renderer-currency-validator", inputs: { parameters: "parameters" }, ngImport: i0, template: "<sky-ag-grid-cell-validator-tooltip\n  *ngIf=\"cellRendererParams\"\n  [params]=\"cellRendererParams\"\n>\n  <sky-ag-grid-cell-renderer-currency\n    *ngIf=\"isNumeric(cellRendererParams.value); else rawValue\"\n    [params]=\"cellRendererParams\"\n  ></sky-ag-grid-cell-renderer-currency>\n  <ng-template #rawValue>{{ cellRendererParams.value }}</ng-template>\n</sky-ag-grid-cell-validator-tooltip>\n", dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyAgGridCellValidatorTooltipComponent, selector: "sky-ag-grid-cell-validator-tooltip", inputs: ["params"] }, { kind: "component", type: SkyAgGridCellRendererCurrencyComponent, selector: "sky-ag-grid-cell-renderer-currency", inputs: ["params"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAgGridCellRendererCurrencyValidatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-cell-renderer-currency-validator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-ag-grid-cell-validator-tooltip\n  *ngIf=\"cellRendererParams\"\n  [params]=\"cellRendererParams\"\n>\n  <sky-ag-grid-cell-renderer-currency\n    *ngIf=\"isNumeric(cellRendererParams.value); else rawValue\"\n    [params]=\"cellRendererParams\"\n  ></sky-ag-grid-cell-renderer-currency>\n  <ng-template #rawValue>{{ cellRendererParams.value }}</ng-template>\n</sky-ag-grid-cell-validator-tooltip>\n" }]
@@ -891,7 +891,7 @@ class SkyAgGridCellRendererLookupComponent {
 }
 _SkyAgGridCellRendererLookupComponent_changeDetector = new WeakMap();
 SkyAgGridCellRendererLookupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAgGridCellRendererLookupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellRendererLookupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyAgGridCellRendererLookupComponent, selector: "sky-cell-renderer-lookup", ngImport: i0, template: "<ng-container *ngIf=\"summaryCount > 5; else showValue\">\n  {{ 'skyux_lookup_tokens_summary' | skyLibResources : summaryCount }}\n</ng-container>\n<ng-template #showValue>{{ value }}</ng-template>\n", styles: [":host{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridCellRendererLookupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyAgGridCellRendererLookupComponent, selector: "sky-cell-renderer-lookup", ngImport: i0, template: "<ng-container *ngIf=\"summaryCount > 5; else showValue\">\n  {{ 'skyux_lookup_tokens_summary' | skyLibResources : summaryCount }}\n</ng-container>\n<ng-template #showValue>{{ value }}</ng-template>\n", styles: [":host{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAgGridCellRendererLookupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-cell-renderer-lookup', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"summaryCount > 5; else showValue\">\n  {{ 'skyux_lookup_tokens_summary' | skyLibResources : summaryCount }}\n</ng-container>\n<ng-template #showValue>{{ value }}</ng-template>\n", styles: [":host{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
@@ -1100,10 +1100,10 @@ _SkyAgGridHeaderGroupComponent_columnGroup = new WeakMap(), _SkyAgGridHeaderGrou
     }
 };
 SkyAgGridHeaderGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAgGridHeaderGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridHeaderGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyAgGridHeaderGroupComponent, selector: "sky-header-group", viewQueries: [{ propertyName: "inlineHelpContainer", first: true, predicate: ["inlineHelpContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<span class=\"header-group-text\" role=\"presentation\">{{\n  params?.displayName\n}}</span>\n<button\n  *ngIf=\"isExpanded$ | async; else openIcons\"\n  class=\"sky-btn sky-btn-icon-borderless\"\n  (click)=\"setExpanded(false)\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_column_group_header_collapse_aria_label'\n      | skyLibResources : params?.displayName\n  \"\n>\n  <sky-icon *skyThemeIf=\"'default'\" icon=\"angle-double-left\"></sky-icon>\n  <sky-icon\n    *skyThemeIf=\"'modern'\"\n    icon=\"double-chevron-left\"\n    iconType=\"skyux\"\n  ></sky-icon>\n</button>\n<ng-template #openIcons>\n  <button\n    class=\"sky-btn sky-btn-icon-borderless\"\n    (click)=\"setExpanded(true)\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_column_group_header_expand_aria_label'\n        | skyLibResources : params?.displayName\n    \"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"angle-double-right\"></sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"double-chevron-right\"\n      iconType=\"skyux\"\n    ></sky-icon>\n  </button>\n</ng-template>\n<span class=\"sky-control-help-container\" #inlineHelpContainer></span>\n", styles: [":host{display:flex;max-width:100%;padding-right:12px;padding-left:12px;align-items:center;align-content:center}.header-group-text{flex-grow:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}button{cursor:pointer;margin-left:var(--sky-margin-inline-sm);flex-grow:0;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridHeaderGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyAgGridHeaderGroupComponent, selector: "sky-header-group", viewQueries: [{ propertyName: "inlineHelpContainer", first: true, predicate: ["inlineHelpContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<span class=\"header-group-text\" role=\"presentation\">{{\n  params?.displayName\n}}</span>\n<button\n  *ngIf=\"isExpanded$ | async; else openIcons\"\n  class=\"sky-btn sky-btn-icon-borderless\"\n  (click)=\"setExpanded(false)\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_column_group_header_collapse_aria_label'\n      | skyLibResources : params?.displayName\n  \"\n>\n  <sky-icon *skyThemeIf=\"'default'\" icon=\"angle-double-left\"></sky-icon>\n  <sky-icon\n    *skyThemeIf=\"'modern'\"\n    icon=\"double-chevron-left\"\n    iconType=\"skyux\"\n  ></sky-icon>\n</button>\n<ng-template #openIcons>\n  <button\n    class=\"sky-btn sky-btn-icon-borderless\"\n    (click)=\"setExpanded(true)\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_column_group_header_expand_aria_label'\n        | skyLibResources : params?.displayName\n    \"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"angle-double-right\"></sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"double-chevron-right\"\n      iconType=\"skyux\"\n    ></sky-icon>\n  </button>\n</ng-template>\n<span class=\"sky-control-help-container\" #inlineHelpContainer></span>\n", styles: [":host{display:flex;max-width:100%;align-items:center;align-content:center}.header-group-text{flex-grow:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}button{cursor:pointer;margin-left:var(--sky-margin-inline-sm);flex-grow:0;flex-shrink:1}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAgGridHeaderGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-header-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"header-group-text\" role=\"presentation\">{{\n  params?.displayName\n}}</span>\n<button\n  *ngIf=\"isExpanded$ | async; else openIcons\"\n  class=\"sky-btn sky-btn-icon-borderless\"\n  (click)=\"setExpanded(false)\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_column_group_header_collapse_aria_label'\n      | skyLibResources : params?.displayName\n  \"\n>\n  <sky-icon *skyThemeIf=\"'default'\" icon=\"angle-double-left\"></sky-icon>\n  <sky-icon\n    *skyThemeIf=\"'modern'\"\n    icon=\"double-chevron-left\"\n    iconType=\"skyux\"\n  ></sky-icon>\n</button>\n<ng-template #openIcons>\n  <button\n    class=\"sky-btn sky-btn-icon-borderless\"\n    (click)=\"setExpanded(true)\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_column_group_header_expand_aria_label'\n        | skyLibResources : params?.displayName\n    \"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"angle-double-right\"></sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"double-chevron-right\"\n      iconType=\"skyux\"\n    ></sky-icon>\n  </button>\n</ng-template>\n<span class=\"sky-control-help-container\" #inlineHelpContainer></span>\n", styles: [":host{display:flex;max-width:100%;padding-right:12px;padding-left:12px;align-items:center;align-content:center}.header-group-text{flex-grow:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}button{cursor:pointer;margin-left:var(--sky-margin-inline-sm);flex-grow:0;flex-shrink:0}\n"] }]
+            args: [{ selector: 'sky-header-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"header-group-text\" role=\"presentation\">{{\n  params?.displayName\n}}</span>\n<button\n  *ngIf=\"isExpanded$ | async; else openIcons\"\n  class=\"sky-btn sky-btn-icon-borderless\"\n  (click)=\"setExpanded(false)\"\n  [attr.aria-label]=\"\n    'sky_ag_grid_column_group_header_collapse_aria_label'\n      | skyLibResources : params?.displayName\n  \"\n>\n  <sky-icon *skyThemeIf=\"'default'\" icon=\"angle-double-left\"></sky-icon>\n  <sky-icon\n    *skyThemeIf=\"'modern'\"\n    icon=\"double-chevron-left\"\n    iconType=\"skyux\"\n  ></sky-icon>\n</button>\n<ng-template #openIcons>\n  <button\n    class=\"sky-btn sky-btn-icon-borderless\"\n    (click)=\"setExpanded(true)\"\n    [attr.aria-label]=\"\n      'sky_ag_grid_column_group_header_expand_aria_label'\n        | skyLibResources : params?.displayName\n    \"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"angle-double-right\"></sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"double-chevron-right\"\n      iconType=\"skyux\"\n    ></sky-icon>\n  </button>\n</ng-template>\n<span class=\"sky-control-help-container\" #inlineHelpContainer></span>\n", styles: [":host{display:flex;max-width:100%;align-items:center;align-content:center}.header-group-text{flex-grow:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}button{cursor:pointer;margin-left:var(--sky-margin-inline-sm);flex-grow:0;flex-shrink:1}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.SkyDynamicComponentService }]; }, propDecorators: { inlineHelpContainer: [{
                 type: ViewChild,
                 args: ['inlineHelpContainer', { read: ElementRef, static: true }]
@@ -1247,10 +1247,10 @@ _SkyAgGridHeaderComponent_subscriptions = new WeakMap(), _SkyAgGridHeaderCompone
     }
 };
 SkyAgGridHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAgGridHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyAgGridHeaderComponent, selector: "sky-ag-grid-header", host: { properties: { "attr.title": "this.columnLabel" } }, 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  <span\n    *ngIf=\"params?.enableMenu\"\n    class=\"ag-header-icon ag-header-cell-menu-button\"\n    aria-hidden=\"true\"\n    (click)=\"onMenuClick($event)\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"menu\"></sky-icon>\n    <sky-icon *skyThemeIf=\"'modern'\" icon=\"menu\" iconType=\"skyux\"></sky-icon>\n  </span>\n  <ng-template #headerText>\n    <span class=\"ag-header-cell-text\">{{ params?.displayName }}</span>\n    <span\n      *ngIf=\"filterEnabled$ | async\"\n      class=\"ag-header-icon ag-header-label-icon ag-filter-icon\"\n      aria-hidden=\"true\"\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"filter\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        icon=\"filter\"\n        iconType=\"skyux\"\n      ></sky-icon>\n    </span>\n    <span *ngIf=\"params?.enableSorting\" class=\"ag-sort-indicator-container\">\n      <sky-icon\n        *ngIf=\"(sortOrder$ | async) === 'desc'\"\n        icon=\"caret-down\"\n        class=\"ag-header-label-icon\"\n      ></sky-icon>\n      <sky-icon\n        *ngIf=\"(sortOrder$ | async) === 'asc'\"\n        icon=\"caret-up\"\n        class=\"ag-header-label-icon\"\n      ></sky-icon>\n      <span\n        *ngIf=\"sortIndexDisplay$ | async as sortIndexDisplay\"\n        class=\"ag-sort-indicator-icon ag-sort-order\"\n        aria-hidden=\"true\"\n        >{{ sortIndexDisplay }}</span\n      >\n    </span>\n  </ng-template>\n  <ng-template #notSortingHeader>\n    <div class=\"ag-header-cell-label\" role=\"presentation\">\n      <ng-container *ngTemplateOutlet=\"headerText\"></ng-container>\n    </div>\n  </ng-template>\n  <button\n    *ngIf=\"params?.enableSorting; else notSortingHeader\"\n    class=\"ag-header-cell-label ag-header-cell-label-sortable sky-btn-link-inline\"\n    (click)=\"onSortRequested($event)\"\n  >\n    <ng-container *ngTemplateOutlet=\"headerText\"></ng-container>\n  </button>\n</div>\n<span class=\"sky-control-help-container\" #inlineHelpContainer></span>\n", styles: [":host{display:flex;max-width:100%;height:100%;align-items:center;align-content:center}button.ag-header-cell-label{text-transform:inherit;max-width:100%}.ag-cell-label-container{padding:0}.ag-header-cell-label{padding-right:0;padding-left:0}button{cursor:pointer;flex-grow:0;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i2$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyAgGridHeaderComponent, selector: "sky-ag-grid-header", host: { properties: { "attr.title": "this.columnLabel" } }, 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  <span\n    *ngIf=\"params?.enableMenu\"\n    class=\"ag-header-icon ag-header-cell-menu-button\"\n    aria-hidden=\"true\"\n    (click)=\"onMenuClick($event)\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"ellipsis-h\"></sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"ellipsis\"\n      iconType=\"skyux\"\n    ></sky-icon>\n  </span>\n  <ng-template #notSortingHeader>\n    <span class=\"ag-header-cell-text\">{{ params?.displayName }}</span>\n  </ng-template>\n  <div class=\"ag-header-cell-label\" role=\"presentation\">\n    <span class=\"ag-header-cell-label-and-icons\">\n      <button\n        *ngIf=\"params?.enableSorting; else notSortingHeader\"\n        class=\"ag-header-cell-text ag-header-cell-label-sortable sky-btn-link-inline\"\n        type=\"button\"\n        [innerText]=\"params?.displayName\"\n        (click)=\"onSortRequested($event)\"\n      ></button>\n      <span\n        *ngIf=\"filterEnabled$ | async\"\n        class=\"ag-header-icon ag-header-label-icon ag-filter-icon\"\n        aria-hidden=\"true\"\n      >\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"filter\"></sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"filter\"\n          iconType=\"skyux\"\n        ></sky-icon>\n      </span>\n      <span *ngIf=\"params?.enableSorting\" class=\"ag-sort-indicator-container\">\n        <ng-container *skyThemeIf=\"'default'\">\n          <sky-icon\n            *ngIf=\"(sortOrder$ | async) === 'desc'\"\n            icon=\"caret-down\"\n            class=\"ag-header-label-icon\"\n          ></sky-icon>\n          <sky-icon\n            *ngIf=\"(sortOrder$ | async) === 'asc'\"\n            icon=\"caret-up\"\n            class=\"ag-header-label-icon\"\n          ></sky-icon>\n        </ng-container>\n        <ng-container *skyThemeIf=\"'modern'\">\n          <sky-icon\n            *ngIf=\"(sortOrder$ | async) === 'desc'\"\n            icon=\"chevron-down\"\n            iconType=\"skyux\"\n            class=\"ag-header-label-icon\"\n          ></sky-icon>\n          <sky-icon\n            *ngIf=\"(sortOrder$ | async) === 'asc'\"\n            icon=\"chevron-up\"\n            iconType=\"skyux\"\n            class=\"ag-header-label-icon\"\n          ></sky-icon>\n        </ng-container>\n        <span\n          *ngIf=\"sortIndexDisplay$ | async as sortIndexDisplay\"\n          class=\"ag-sort-indicator-icon ag-sort-order\"\n          aria-hidden=\"true\"\n          >{{ sortIndexDisplay }}</span\n        >\n      </span>\n    </span>\n    <span class=\"sky-control-help-container\" #inlineHelpContainer></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}button.ag-header-cell-label{text-transform:inherit;max-width:100%}.ag-cell-label-container{padding:0;gap:var(--sky-margin-inline-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;gap:var(--sky-margin-inline-xs)}.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:empty{display:none}button{cursor:pointer;flex-grow:0;flex-shrink:1;text-transform:inherit}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAgGridHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-ag-grid-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ag-cell-label-container\" role=\"presentation\">\n  <span\n    *ngIf=\"params?.enableMenu\"\n    class=\"ag-header-icon ag-header-cell-menu-button\"\n    aria-hidden=\"true\"\n    (click)=\"onMenuClick($event)\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"menu\"></sky-icon>\n    <sky-icon *skyThemeIf=\"'modern'\" icon=\"menu\" iconType=\"skyux\"></sky-icon>\n  </span>\n  <ng-template #headerText>\n    <span class=\"ag-header-cell-text\">{{ params?.displayName }}</span>\n    <span\n      *ngIf=\"filterEnabled$ | async\"\n      class=\"ag-header-icon ag-header-label-icon ag-filter-icon\"\n      aria-hidden=\"true\"\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"filter\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        icon=\"filter\"\n        iconType=\"skyux\"\n      ></sky-icon>\n    </span>\n    <span *ngIf=\"params?.enableSorting\" class=\"ag-sort-indicator-container\">\n      <sky-icon\n        *ngIf=\"(sortOrder$ | async) === 'desc'\"\n        icon=\"caret-down\"\n        class=\"ag-header-label-icon\"\n      ></sky-icon>\n      <sky-icon\n        *ngIf=\"(sortOrder$ | async) === 'asc'\"\n        icon=\"caret-up\"\n        class=\"ag-header-label-icon\"\n      ></sky-icon>\n      <span\n        *ngIf=\"sortIndexDisplay$ | async as sortIndexDisplay\"\n        class=\"ag-sort-indicator-icon ag-sort-order\"\n        aria-hidden=\"true\"\n        >{{ sortIndexDisplay }}</span\n      >\n    </span>\n  </ng-template>\n  <ng-template #notSortingHeader>\n    <div class=\"ag-header-cell-label\" role=\"presentation\">\n      <ng-container *ngTemplateOutlet=\"headerText\"></ng-container>\n    </div>\n  </ng-template>\n  <button\n    *ngIf=\"params?.enableSorting; else notSortingHeader\"\n    class=\"ag-header-cell-label ag-header-cell-label-sortable sky-btn-link-inline\"\n    (click)=\"onSortRequested($event)\"\n  >\n    <ng-container *ngTemplateOutlet=\"headerText\"></ng-container>\n  </button>\n</div>\n<span class=\"sky-control-help-container\" #inlineHelpContainer></span>\n", styles: [":host{display:flex;max-width:100%;height:100%;align-items:center;align-content:center}button.ag-header-cell-label{text-transform:inherit;max-width:100%}.ag-cell-label-container{padding:0}.ag-header-cell-label{padding-right:0;padding-left:0}button{cursor:pointer;flex-grow:0;flex-shrink:0}\n"] }]
+            args: [{ selector: 'sky-ag-grid-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ag-cell-label-container\" role=\"presentation\">\n  <span\n    *ngIf=\"params?.enableMenu\"\n    class=\"ag-header-icon ag-header-cell-menu-button\"\n    aria-hidden=\"true\"\n    (click)=\"onMenuClick($event)\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"ellipsis-h\"></sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"ellipsis\"\n      iconType=\"skyux\"\n    ></sky-icon>\n  </span>\n  <ng-template #notSortingHeader>\n    <span class=\"ag-header-cell-text\">{{ params?.displayName }}</span>\n  </ng-template>\n  <div class=\"ag-header-cell-label\" role=\"presentation\">\n    <span class=\"ag-header-cell-label-and-icons\">\n      <button\n        *ngIf=\"params?.enableSorting; else notSortingHeader\"\n        class=\"ag-header-cell-text ag-header-cell-label-sortable sky-btn-link-inline\"\n        type=\"button\"\n        [innerText]=\"params?.displayName\"\n        (click)=\"onSortRequested($event)\"\n      ></button>\n      <span\n        *ngIf=\"filterEnabled$ | async\"\n        class=\"ag-header-icon ag-header-label-icon ag-filter-icon\"\n        aria-hidden=\"true\"\n      >\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"filter\"></sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"filter\"\n          iconType=\"skyux\"\n        ></sky-icon>\n      </span>\n      <span *ngIf=\"params?.enableSorting\" class=\"ag-sort-indicator-container\">\n        <ng-container *skyThemeIf=\"'default'\">\n          <sky-icon\n            *ngIf=\"(sortOrder$ | async) === 'desc'\"\n            icon=\"caret-down\"\n            class=\"ag-header-label-icon\"\n          ></sky-icon>\n          <sky-icon\n            *ngIf=\"(sortOrder$ | async) === 'asc'\"\n            icon=\"caret-up\"\n            class=\"ag-header-label-icon\"\n          ></sky-icon>\n        </ng-container>\n        <ng-container *skyThemeIf=\"'modern'\">\n          <sky-icon\n            *ngIf=\"(sortOrder$ | async) === 'desc'\"\n            icon=\"chevron-down\"\n            iconType=\"skyux\"\n            class=\"ag-header-label-icon\"\n          ></sky-icon>\n          <sky-icon\n            *ngIf=\"(sortOrder$ | async) === 'asc'\"\n            icon=\"chevron-up\"\n            iconType=\"skyux\"\n            class=\"ag-header-label-icon\"\n          ></sky-icon>\n        </ng-container>\n        <span\n          *ngIf=\"sortIndexDisplay$ | async as sortIndexDisplay\"\n          class=\"ag-sort-indicator-icon ag-sort-order\"\n          aria-hidden=\"true\"\n          >{{ sortIndexDisplay }}</span\n        >\n      </span>\n    </span>\n    <span class=\"sky-control-help-container\" #inlineHelpContainer></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}button.ag-header-cell-label{text-transform:inherit;max-width:100%}.ag-cell-label-container{padding:0;gap:var(--sky-margin-inline-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;gap:var(--sky-margin-inline-xs)}.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:empty{display:none}button{cursor:pointer;flex-grow:0;flex-shrink:1;text-transform:inherit}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.SkyDynamicComponentService }]; }, propDecorators: { columnLabel: [{
                 type: HostBinding,
                 args: ['attr.title']
@@ -1259,6 +1259,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
                 args: ['inlineHelpContainer', { read: ElementRef, static: true }]
             }] } });
 
+const iconMap = {
+    sortDescending: {
+        faIcon: 'caret-down',
+        skyIcon: 'chevron-down',
+    },
+    sortAscending: {
+        faIcon: 'caret-up',
+        skyIcon: 'chevron-up',
+    },
+    columnMoveMove: {
+        faIcon: 'arrows',
+    },
+    columnMoveHide: {
+        faIcon: 'eye-slash',
+        skyIcon: 'hide',
+    },
+    columnMoveLeft: {
+        faIcon: 'arrows',
+    },
+    columnMoveRight: {
+        faIcon: 'arrows',
+    },
+    columnMoveGroup: {
+        faIcon: 'arrows',
+    },
+    columnMovePin: {
+        faIcon: 'arrows',
+    },
+    columnGroupOpened: {
+        faIcon: 'caret-right',
+        skyIcon: 'double-chevron-right',
+    },
+    columnGroupClosed: {
+        faIcon: 'caret-left',
+        skyIcon: 'double-chevron-left',
+    },
+    dropNotAllowed: {
+        faIcon: 'ban',
+        skyIcon: 'ban',
+    },
+    menu: {
+        faIcon: 'menu',
+        skyIcon: 'bars-2',
+    },
+    filter: {
+        faIcon: 'filter',
+        skyIcon: 'filter',
+    },
+    columns: {
+        faIcon: 'columns',
+        skyIcon: 'columns',
+    },
+    last: {
+        faIcon: 'step-forward',
+        skyIcon: 'double-chevron-right',
+    },
+    next: {
+        faIcon: 'caret-right',
+        skyIcon: 'chevron-right',
+    },
+    previous: {
+        faIcon: 'caret-left',
+        skyIcon: 'chevron-left',
+    },
+    first: {
+        faIcon: 'step-backward',
+        skyIcon: 'double-chevron-left',
+    },
+};
+
 /**
  * @internal
  */
@@ -1628,13 +1698,13 @@ _SkyAgGridService_keyMap = new WeakMap(), _SkyAgGridService_ngUnsubscribe = new
         },
         headerHeight: this.getHeaderHeight(),
         icons: {
-            sortDescending: __classPrivateFieldGet(this, _SkyAgGridService_instances, "m", _SkyAgGridService_getIconTemplate).call(this, 'caret-down'),
-            sortAscending: __classPrivateFieldGet(this, _SkyAgGridService_instances, "m", _SkyAgGridService_getIconTemplate).call(this, 'caret-up'),
-            columnMoveMove: __classPrivateFieldGet(this, _SkyAgGridService_instances, "m", _SkyAgGridService_getIconTemplate).call(this, 'arrows'),
-            columnMoveHide: __classPrivateFieldGet(this, _SkyAgGridService_instances, "m", _SkyAgGridService_getIconTemplate).call(this, 'arrows'),
-            columnMoveLeft: __classPrivateFieldGet(this, _SkyAgGridService_instances, "m", _SkyAgGridService_getIconTemplate).call(this, 'arrows'),
-            columnMoveRight: __classPrivateFieldGet(this, _SkyAgGridService_instances, "m", _SkyAgGridService_getIconTemplate).call(this, 'arrows'),
-            columnMovePin: __classPrivateFieldGet(this, _SkyAgGridService_instances, "m", _SkyAgGridService_getIconTemplate).call(this, 'arrows'),
+            sortDescending: __classPrivateFieldGet(this, _SkyAgGridService_instances, "m", _SkyAgGridService_getIconTemplate).call(this, 'sortDescending'),
+            sortAscending: __classPrivateFieldGet(this, _SkyAgGridService_instances, "m", _SkyAgGridService_getIconTemplate).call(this, 'sortAscending'),
+            columnMoveMove: __classPrivateFieldGet(this, _SkyAgGridService_instances, "m", _SkyAgGridService_getIconTemplate).call(this, 'columnMoveMove'),
+            columnMoveHide: __classPrivateFieldGet(this, _SkyAgGridService_instances, "m", _SkyAgGridService_getIconTemplate).call(this, 'columnMoveHide'),
+            columnMoveLeft: __classPrivateFieldGet(this, _SkyAgGridService_instances, "m", _SkyAgGridService_getIconTemplate).call(this, 'columnMoveLeft'),
+            columnMoveRight: __classPrivateFieldGet(this, _SkyAgGridService_instances, "m", _SkyAgGridService_getIconTemplate).call(this, 'columnMoveRight'),
+            columnMovePin: __classPrivateFieldGet(this, _SkyAgGridService_instances, "m", _SkyAgGridService_getIconTemplate).call(this, 'columnMovePin'),
         },
         onCellFocused: () => __classPrivateFieldGet(this, _SkyAgGridService_instances, "m", _SkyAgGridService_onCellFocused).call(this),
         rowHeight: __classPrivateFieldGet(this, _SkyAgGridService_instances, "m", _SkyAgGridService_getRowHeight).call(this),
@@ -1701,7 +1771,16 @@ _SkyAgGridService_keyMap = new WeakMap(), _SkyAgGridService_ngUnsubscribe = new
     }
     return '';
 }, _SkyAgGridService_getIconTemplate = function _SkyAgGridService_getIconTemplate(iconName) {
-    return `<i class="fa fa-${iconName}"></i>`;
+    return () => {
+        var _a;
+        const icon = iconMap[iconName];
+        if (((_a = __classPrivateFieldGet(this, _SkyAgGridService_currentTheme, "f")) === null || _a === void 0 ? void 0 : _a.theme.name) === 'modern' && icon.skyIcon) {
+            return `<i aria-hidden="true" class="sky-i-${icon.skyIcon}"></i>`;
+        }
+        else {
+            return `<i aria-hidden="true" class="fa fa-${icon.faIcon}"></i>`;
+        }
+    };
 }, _SkyAgGridService_suppressTab = function _SkyAgGridService_suppressTab(params) {
     if (params.event.code === 'Tab') {
         if (params.editing) {
@@ -1735,7 +1814,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
                     }] }];
     } });
 
-var _SkyAgGridWrapperComponent_instances, _SkyAgGridWrapperComponent_isInEditMode_get, _SkyAgGridWrapperComponent__viewkeeperClasses, _SkyAgGridWrapperComponent_agGridService, _SkyAgGridWrapperComponent_ngUnsubscribe, _SkyAgGridWrapperComponent_themeSvc, _SkyAgGridWrapperComponent_wrapperClasses, _SkyAgGridWrapperComponent_currentTheme, _SkyAgGridWrapperComponent_adapterService, _SkyAgGridWrapperComponent_changeDetector, _SkyAgGridWrapperComponent_parentChangeDetector, _SkyAgGridWrapperComponent_elementRef, _SkyAgGridWrapperComponent_document, _SkyAgGridWrapperComponent_moveHorizontalScroll;
+var _SkyAgGridWrapperComponent_instances, _SkyAgGridWrapperComponent_isInEditMode_get, _SkyAgGridWrapperComponent__viewkeeperClasses, _SkyAgGridWrapperComponent_agGridService, _SkyAgGridWrapperComponent_ngUnsubscribe, _SkyAgGridWrapperComponent_themeSvc, _SkyAgGridWrapperComponent_wrapperClasses, _SkyAgGridWrapperComponent_currentTheme, _SkyAgGridWrapperComponent_adapterService, _SkyAgGridWrapperComponent_changeDetector, _SkyAgGridWrapperComponent_parentChangeDetector, _SkyAgGridWrapperComponent_elementRef, _SkyAgGridWrapperComponent_document, _SkyAgGridWrapperComponent_mutationObserverService, _SkyAgGridWrapperComponent_hasEditableClass, _SkyAgGridWrapperComponent_moveHorizontalScroll, _SkyAgGridWrapperComponent_updateGridTheme;
 let idIndex = 0;
 class SkyAgGridWrapperComponent {
     get viewkeeperClasses() {
@@ -1745,31 +1824,33 @@ class SkyAgGridWrapperComponent {
         __classPrivateFieldSet(this, _SkyAgGridWrapperComponent__viewkeeperClasses, value, "f");
         __classPrivateFieldGet(this, _SkyAgGridWrapperComponent_changeDetector, "f").markForCheck();
     }
-    constructor(adapterService, changeDetector, elementRef, document, agGridService, themeSvc, parentChangeDetector) {
+    constructor() {
         _SkyAgGridWrapperComponent_instances.add(this);
         this.isNormalLayout = false;
         _SkyAgGridWrapperComponent__viewkeeperClasses.set(this, []);
-        _SkyAgGridWrapperComponent_agGridService.set(this, void 0);
+        _SkyAgGridWrapperComponent_agGridService.set(this, inject(SkyAgGridService));
         _SkyAgGridWrapperComponent_ngUnsubscribe.set(this, new Subject());
-        _SkyAgGridWrapperComponent_themeSvc.set(this, void 0);
-        _SkyAgGridWrapperComponent_wrapperClasses.set(this, new BehaviorSubject([`ag-theme-sky-default`]));
+        _SkyAgGridWrapperComponent_themeSvc.set(this, inject(SkyThemeService, {
+            optional: true,
+        }));
+        _SkyAgGridWrapperComponent_wrapperClasses.set(this, new BehaviorSubject([
+            `ag-theme-sky-data-grid-default`,
+        ]));
         _SkyAgGridWrapperComponent_currentTheme.set(this, undefined);
-        _SkyAgGridWrapperComponent_adapterService.set(this, void 0);
-        _SkyAgGridWrapperComponent_changeDetector.set(this, void 0);
-        _SkyAgGridWrapperComponent_parentChangeDetector.set(this, void 0);
-        _SkyAgGridWrapperComponent_elementRef.set(this, void 0);
-        _SkyAgGridWrapperComponent_document.set(this, void 0);
-        __classPrivateFieldSet(this, _SkyAgGridWrapperComponent_adapterService, adapterService, "f");
-        __classPrivateFieldSet(this, _SkyAgGridWrapperComponent_changeDetector, changeDetector, "f");
-        __classPrivateFieldSet(this, _SkyAgGridWrapperComponent_parentChangeDetector, parentChangeDetector, "f");
-        __classPrivateFieldSet(this, _SkyAgGridWrapperComponent_elementRef, elementRef, "f");
-        __classPrivateFieldSet(this, _SkyAgGridWrapperComponent_document, document, "f");
+        _SkyAgGridWrapperComponent_adapterService.set(this, inject(SkyAgGridAdapterService));
+        _SkyAgGridWrapperComponent_changeDetector.set(this, inject(ChangeDetectorRef));
+        _SkyAgGridWrapperComponent_parentChangeDetector.set(this, inject(ChangeDetectorRef, {
+            optional: true,
+            skipSelf: true,
+        }));
+        _SkyAgGridWrapperComponent_elementRef.set(this, inject(ElementRef));
+        _SkyAgGridWrapperComponent_document.set(this, inject(DOCUMENT));
+        _SkyAgGridWrapperComponent_mutationObserverService.set(this, inject(SkyMutationObserverService));
+        _SkyAgGridWrapperComponent_hasEditableClass.set(this, false);
         idIndex++;
         this.afterAnchorId = 'sky-ag-grid-nav-anchor-after-' + idIndex;
         this.beforeAnchorId = 'sky-ag-grid-nav-anchor-before-' + idIndex;
         this.gridId = 'sky-ag-grid-' + idIndex;
-        __classPrivateFieldSet(this, _SkyAgGridWrapperComponent_agGridService, agGridService, "f");
-        __classPrivateFieldSet(this, _SkyAgGridWrapperComponent_themeSvc, themeSvc, "f");
         this.wrapperClasses$ = __classPrivateFieldGet(this, _SkyAgGridWrapperComponent_wrapperClasses, "f").asObservable();
     }
     ngAfterContentInit() {
@@ -1834,19 +1915,7 @@ class SkyAgGridWrapperComponent {
         var _a;
         (_a = __classPrivateFieldGet(this, _SkyAgGridWrapperComponent_themeSvc, "f")) === null || _a === void 0 ? void 0 : _a.settingsChange.pipe(takeUntil(__classPrivateFieldGet(this, _SkyAgGridWrapperComponent_ngUnsubscribe, "f"))).subscribe((settings) => {
             var _a;
-            let agThemeClass;
-            if (settings.currentSettings.theme.name === 'modern') {
-                agThemeClass = `ag-theme-sky-modern-${settings.currentSettings.mode.name}`;
-            }
-            else {
-                agThemeClass = `ag-theme-sky-default`;
-            }
-            __classPrivateFieldGet(this, _SkyAgGridWrapperComponent_wrapperClasses, "f").next([
-                ...__classPrivateFieldGet(this, _SkyAgGridWrapperComponent_wrapperClasses, "f")
-                    .getValue()
-                    .filter((c) => !c.startsWith('ag-theme-')),
-                agThemeClass,
-            ]);
+            __classPrivateFieldGet(this, _SkyAgGridWrapperComponent_instances, "m", _SkyAgGridWrapperComponent_updateGridTheme).call(this, settings.currentSettings);
             if (!__classPrivateFieldGet(this, _SkyAgGridWrapperComponent_currentTheme, "f")) {
                 // Initial theme settings.
                 __classPrivateFieldSet(this, _SkyAgGridWrapperComponent_currentTheme, settings.currentSettings, "f");
@@ -1860,6 +1929,23 @@ class SkyAgGridWrapperComponent {
             }
         });
     }
+    ngAfterViewInit() {
+        const agGridElement = __classPrivateFieldGet(this, _SkyAgGridWrapperComponent_elementRef, "f").nativeElement.querySelector('ag-grid-angular');
+        const callback = () => {
+            __classPrivateFieldSet(this, _SkyAgGridWrapperComponent_hasEditableClass, !!(agGridElement === null || agGridElement === void 0 ? void 0 : agGridElement.classList.contains('sky-ag-grid-editable')), "f");
+            __classPrivateFieldGet(this, _SkyAgGridWrapperComponent_instances, "m", _SkyAgGridWrapperComponent_updateGridTheme).call(this, __classPrivateFieldGet(this, _SkyAgGridWrapperComponent_currentTheme, "f"));
+        };
+        if (agGridElement) {
+            const agGridClassObserver = __classPrivateFieldGet(this, _SkyAgGridWrapperComponent_mutationObserverService, "f").create(callback);
+            agGridClassObserver.observe(agGridElement, {
+                attributes: true,
+            });
+            __classPrivateFieldGet(this, _SkyAgGridWrapperComponent_ngUnsubscribe, "f").pipe(take(1)).subscribe(() => {
+                agGridClassObserver.disconnect();
+            });
+        }
+        setTimeout(callback);
+    }
     /**
      * Prevent closing a modal when focused in AG Grid.
      */
@@ -1893,7 +1979,7 @@ class SkyAgGridWrapperComponent {
         }
     }
 }
-_SkyAgGridWrapperComponent__viewkeeperClasses = new WeakMap(), _SkyAgGridWrapperComponent_agGridService = new WeakMap(), _SkyAgGridWrapperComponent_ngUnsubscribe = new WeakMap(), _SkyAgGridWrapperComponent_themeSvc = new WeakMap(), _SkyAgGridWrapperComponent_wrapperClasses = new WeakMap(), _SkyAgGridWrapperComponent_currentTheme = new WeakMap(), _SkyAgGridWrapperComponent_adapterService = new WeakMap(), _SkyAgGridWrapperComponent_changeDetector = new WeakMap(), _SkyAgGridWrapperComponent_parentChangeDetector = new WeakMap(), _SkyAgGridWrapperComponent_elementRef = new WeakMap(), _SkyAgGridWrapperComponent_document = new WeakMap(), _SkyAgGridWrapperComponent_instances = new WeakSet(), _SkyAgGridWrapperComponent_isInEditMode_get = function _SkyAgGridWrapperComponent_isInEditMode_get() {
+_SkyAgGridWrapperComponent__viewkeeperClasses = new WeakMap(), _SkyAgGridWrapperComponent_agGridService = new WeakMap(), _SkyAgGridWrapperComponent_ngUnsubscribe = new WeakMap(), _SkyAgGridWrapperComponent_themeSvc = new WeakMap(), _SkyAgGridWrapperComponent_wrapperClasses = new WeakMap(), _SkyAgGridWrapperComponent_currentTheme = new WeakMap(), _SkyAgGridWrapperComponent_adapterService = new WeakMap(), _SkyAgGridWrapperComponent_changeDetector = new WeakMap(), _SkyAgGridWrapperComponent_parentChangeDetector = new WeakMap(), _SkyAgGridWrapperComponent_elementRef = new WeakMap(), _SkyAgGridWrapperComponent_document = new WeakMap(), _SkyAgGridWrapperComponent_mutationObserverService = new WeakMap(), _SkyAgGridWrapperComponent_hasEditableClass = new WeakMap(), _SkyAgGridWrapperComponent_instances = new WeakSet(), _SkyAgGridWrapperComponent_isInEditMode_get = function _SkyAgGridWrapperComponent_isInEditMode_get() {
     /* istanbul ignore else */
     if (this.agGrid && this.agGrid.api) {
         const primaryGridEditing = this.agGrid.api.getEditingCells().length > 0;
@@ -1939,27 +2025,28 @@ _SkyAgGridWrapperComponent__viewkeeperClasses = new WeakMap(), _SkyAgGridWrapper
             }
         }
     }
+}, _SkyAgGridWrapperComponent_updateGridTheme = function _SkyAgGridWrapperComponent_updateGridTheme(themeSettings) {
+    let agTheme;
+    if ((themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.theme.name) === 'modern') {
+        agTheme = `modern-${themeSettings.mode.name}`;
+    }
+    else {
+        agTheme = `default`;
+    }
+    const variation = __classPrivateFieldGet(this, _SkyAgGridWrapperComponent_hasEditableClass, "f") ? 'data-entry-grid' : 'data-grid';
+    __classPrivateFieldGet(this, _SkyAgGridWrapperComponent_wrapperClasses, "f").next([
+        ...__classPrivateFieldGet(this, _SkyAgGridWrapperComponent_wrapperClasses, "f")
+            .getValue()
+            .filter((c) => !c.startsWith('ag-theme-')),
+        `ag-theme-sky-${variation}-${agTheme}`,
+    ]);
 };
-SkyAgGridWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAgGridWrapperComponent, deps: [{ token: SkyAgGridAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: DOCUMENT }, { token: SkyAgGridService }, { token: i1$2.SkyThemeService, optional: true }, { token: ChangeDetectorRef, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyAgGridWrapperComponent, selector: "sky-ag-grid-wrapper", 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  [class.sky-ag-grid-top-scrollbar]=\"\n    agGrid?.gridOptions?.context &&\n    agGrid?.gridOptions?.context['enableTopScroll']\n  \"\n  [ngClass]=\"wrapperClasses$ | async\"\n  tabindex=\"0\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses\"\n  (keydown)=\"onGridKeydown($event)\"\n  (keyup.escape)=\"onKeyUpEscape($event)\"\n>\n  <ng-content></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: "directive", type: i2$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { kind: "pipe", type: i2$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyAgGridWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAgGridWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyAgGridWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyAgGridWrapperComponent, selector: "sky-ag-grid-wrapper", 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  [class.sky-ag-grid-top-scrollbar]=\"\n    agGrid?.gridOptions?.context &&\n    agGrid?.gridOptions?.context['enableTopScroll']\n  \"\n  [ngClass]=\"wrapperClasses$ | async\"\n  tabindex=\"0\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses\"\n  (keydown)=\"onGridKeydown($event)\"\n  (keyup.escape)=\"onKeyUpEscape($event)\"\n>\n  <ng-content></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: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAgGridWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-ag-grid-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, 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  [class.sky-ag-grid-top-scrollbar]=\"\n    agGrid?.gridOptions?.context &&\n    agGrid?.gridOptions?.context['enableTopScroll']\n  \"\n  [ngClass]=\"wrapperClasses$ | async\"\n  tabindex=\"0\"\n  [id]=\"gridId\"\n  [skyViewkeeper]=\"viewkeeperClasses\"\n  (keydown)=\"onGridKeydown($event)\"\n  (keyup.escape)=\"onKeyUpEscape($event)\"\n>\n  <ng-content></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: function () {
-        return [{ type: SkyAgGridAdapterService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: Document, decorators: [{
-                        type: Inject,
-                        args: [DOCUMENT]
-                    }] }, { type: SkyAgGridService }, { type: i1$2.SkyThemeService, decorators: [{
-                        type: Optional
-                    }] }, { type: i0.ChangeDetectorRef, decorators: [{
-                        type: Optional
-                    }, {
-                        type: SkipSelf
-                    }, {
-                        type: Inject,
-                        args: [ChangeDetectorRef]
-                    }] }];
-    }, propDecorators: { agGrid: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { agGrid: [{
                 type: ContentChild,
                 args: [AgGridAngular, {
                         static: true,
@@ -2179,14 +2266,14 @@ _SkyAgGridDataManagerAdapterDirective_currentAgGrid = new WeakMap(), _SkyAgGridD
     const agGrid = (_a = this.agGridList) === null || _a === void 0 ? void 0 : _a.first;
     agGrid === null || agGrid === void 0 ? void 0 : agGrid.api.deselectAll();
 };
-SkyAgGridDataManagerAdapterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$4.SkyDataManagerService }], target: i0.ɵɵFactoryTarget.Directive });
+SkyAgGridDataManagerAdapterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$5.SkyDataManagerService }], target: i0.ɵɵFactoryTarget.Directive });
 SkyAgGridDataManagerAdapterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: SkyAgGridDataManagerAdapterDirective, selector: "[skyAgGridDataManagerAdapter]", inputs: { viewId: "viewId" }, queries: [{ propertyName: "agGridList", predicate: AgGridAngular, descendants: true }, { propertyName: "skyAgGridWrapperList", predicate: SkyAgGridWrapperComponent, descendants: true }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyAgGridDataManagerAdapter]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.SkyDataManagerService }]; }, propDecorators: { viewId: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$5.SkyDataManagerService }]; }, propDecorators: { viewId: [{
                 type: Input
             }], agGridList: [{
                 type: ContentChildren,
@@ -2229,7 +2316,7 @@ SkyAgGridRowDeleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
         ></sky-inline-delete>
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$4.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAgGridRowDeleteComponent, decorators: [{
             type: Component,
             args: [{