@skyux/ag-grid 7.5.0 → 7.6.0

package/fesm2020/skyux-ag-grid.mjs

@@ -1147,7 +1147,9 @@ class SkyAgGridHeaderComponent {
         this.params?.showColumnMenu($event.target);
     }
     onSortRequested(event) {
-        this.params?.progressSort(!!event.shiftKey);
+        if (this.params?.enableSorting) {
+            this.params?.progressSort(event.shiftKey);
+        }
     }
     refresh(params) {
         this.agInit(params);
@@ -1197,10 +1199,10 @@ _SkyAgGridHeaderComponent_subscriptions = new WeakMap(), _SkyAgGridHeaderCompone
     }
 };
 SkyAgGridHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyAgGridHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyAgGridHeaderComponent, selector: "sky-ag-grid-header", 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  <div\n    class=\"ag-header-cell-label\"\n    role=\"presentation\"\n    (click)=\"onSortRequested($event)\"\n  >\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  </div>\n</div>\n<span class=\"sky-control-help-container\" #inlineHelpContainer></span>\n", styles: [":host{display:flex;max-width:100%;align-items:center;align-content:center}.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: "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: "14.2.11", type: SkyAgGridHeaderComponent, selector: "sky-ag-grid-header", 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  <div\n    [class.ag-header-cell-label-sortable]=\"params?.enableSorting\"\n    class=\"ag-header-cell-label\"\n    role=\"presentation\"\n    (click)=\"onSortRequested($event)\"\n  >\n    <span class=\"ag-header-cell-text\">\n      <ng-template #notSortingHeaderText>{{ params?.displayName }}</ng-template>\n      <button\n        *ngIf=\"params?.enableSorting; else notSortingHeaderText\"\n        class=\"sky-btn-link-inline\"\n        (click)=\"onSortRequested($event)\"\n      >\n        <ng-container *ngTemplateOutlet=\"notSortingHeaderText\"></ng-container>\n      </button>\n    </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  </div>\n</div>\n<span class=\"sky-control-help-container\" #inlineHelpContainer></span>\n", styles: [":host{display:flex;max-width:100%;align-items:center;align-content:center}.ag-header-cell-label{padding-right:0;padding-left:0}.ag-header-cell-label button{text-transform:inherit}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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", 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  <div\n    class=\"ag-header-cell-label\"\n    role=\"presentation\"\n    (click)=\"onSortRequested($event)\"\n  >\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  </div>\n</div>\n<span class=\"sky-control-help-container\" #inlineHelpContainer></span>\n", styles: [":host{display:flex;max-width:100%;align-items:center;align-content:center}.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=\"menu\"></sky-icon>\n    <sky-icon *skyThemeIf=\"'modern'\" icon=\"menu\" iconType=\"skyux\"></sky-icon>\n  </span>\n  <div\n    [class.ag-header-cell-label-sortable]=\"params?.enableSorting\"\n    class=\"ag-header-cell-label\"\n    role=\"presentation\"\n    (click)=\"onSortRequested($event)\"\n  >\n    <span class=\"ag-header-cell-text\">\n      <ng-template #notSortingHeaderText>{{ params?.displayName }}</ng-template>\n      <button\n        *ngIf=\"params?.enableSorting; else notSortingHeaderText\"\n        class=\"sky-btn-link-inline\"\n        (click)=\"onSortRequested($event)\"\n      >\n        <ng-container *ngTemplateOutlet=\"notSortingHeaderText\"></ng-container>\n      </button>\n    </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  </div>\n</div>\n<span class=\"sky-control-help-container\" #inlineHelpContainer></span>\n", styles: [":host{display:flex;max-width:100%;align-items:center;align-content:center}.ag-header-cell-label{padding-right:0;padding-left:0}.ag-header-cell-label button{text-transform:inherit}button{cursor:pointer;flex-grow:0;flex-shrink:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.SkyDynamicComponentService }]; }, propDecorators: { inlineHelpContainer: [{
                 type: ViewChild,
                 args: ['inlineHelpContainer', { read: ElementRef, static: true }]
@@ -1233,17 +1235,17 @@ var SkyCellType;
     /**
      * **Edit mode**
      * <br/>
-     * Specifies that cells in the column will be edited as  [SKY UX autocomplete components](https://developer.blackbaud.com/skyux/components/autocomplete). You can set any of the autocomplete component's properties by passing `SkyCellEditorAutocompleteParams` in the [column definition's `cellEditorParams` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing). These params can be updated as other cell edits are made or [provided dynamically](https://www.ag-grid.com/javascript-grid-cell-editing/#dynamic-parameters) based on other cell values. See the demo for an example. Text can be entered and a value selected from the provided list.
+     * Cells in the column will be edited as  [SKY UX autocomplete components](https://developer.blackbaud.com/skyux/components/autocomplete). You can set any of the autocomplete component's properties by passing `SkyCellEditorAutocompleteParams` in the [column definition's `cellEditorParams` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing). These params can be updated as other cell edits are made or [provided dynamically](https://www.ag-grid.com/javascript-grid-cell-editing/#dynamic-parameters) based on other cell values. See the demo for an example. Text can be entered and a value selected from the provided list.
      * <br/><br/>
      * **Read-only mode**
      * <br/>
-     * Specifies that cells the column will display the currently selected value's name property by default. If the autocomplete needs to show a different property or needs to be formatted in any way, you can [define a `valueFormatter`](https://www.ag-grid.com/javascript-grid-value-formatters/) on the column definition.
+     * Cells the column will display the currently selected value's name property by default. If the autocomplete needs to show a different property or needs to be formatted in any way, you can [define a `valueFormatter`](https://www.ag-grid.com/javascript-grid-value-formatters/) on the column definition.
      */
     SkyCellType["Autocomplete"] = "skyCellAutocomplete";
     /**
      * **Edit mode**
      * <br/>
-     * Specifies that cells in the column will be edited as a currency amount.
+     * Cells in the column will be edited as a currency amount.
      * <br/><br/>
      * **Read-only mode**
      * <br/>
@@ -1259,31 +1261,31 @@ var SkyCellType;
     /**
      * **Edit mode**
      * <br/>
-     * Specifies that cells in the column will be edited as [SKY UX datepicker components](https://developer.blackbaud.com/skyux/components/datepicker). You can set any of the datepicker component's properties by passing `SkyCellEditorDatepickerParams` in the [column definition's `cellEditorParams` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing). These params can be updated as other cell edits are made or [provided dynamically](https://www.ag-grid.com/javascript-grid-cell-editing/#dynamic-parameters) based on other cell values. See the demo for an example. Date values can be entered.
+     * Cells in the column will be edited as [SKY UX datepicker components](https://developer.blackbaud.com/skyux/components/datepicker). You can set any of the datepicker component's properties by passing `SkyCellEditorDatepickerParams` in the [column definition's `cellEditorParams` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing). These params can be updated as other cell edits are made or [provided dynamically](https://www.ag-grid.com/javascript-grid-cell-editing/#dynamic-parameters) based on other cell values. See the demo for an example. Date values can be entered.
      * <br/><br/>
      * **Read-only mode**
      * <br/>
-     * Specifies that cells in the column will display the currently selected date formatted as `MM-DD-YYYY`, or the date format of the locale passed to `getGridOptions()`. If you would like to overwrite this format, you can [define a `valueFormatter`](https://www.ag-grid.com/javascript-grid-value-formatters/) on the column definition. See the demo for an example.
+     * Cells in the column will display the currently selected date formatted as `MM-DD-YYYY`, or the date format of the locale passed to `getGridOptions()`. If you would like to overwrite this format, you can [define a `valueFormatter`](https://www.ag-grid.com/javascript-grid-value-formatters/) on the column definition. See the demo for an example.
      */
     SkyCellType["Date"] = "skyCellDate";
     /**
      * **Edit mode**
      * <br/>
-     * Specifies that cells in the column will be edited as [SKY UX lookup components](https://developer.blackbaud.com/skyux-v5/components/lookup). You can set any of the lookup component's properties by passing `SkyCellEditorLookupParams` in the [column definition's `cellEditorParams` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing). These params can be updated as other cell edits are made or [provided dynamically](https://www.ag-grid.com/javascript-grid-cell-editing/#dynamic-parameters) based on other cell values. See the demo for an example. Text can be entered and a value selected from the provided list.
+     * Cells in the column will be edited as [SKY UX lookup components](https://developer.blackbaud.com/skyux-v5/components/lookup). You can set any of the lookup component's properties by passing `SkyCellEditorLookupParams` in the [column definition's `cellEditorParams` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing). These params can be updated as other cell edits are made or [provided dynamically](https://www.ag-grid.com/javascript-grid-cell-editing/#dynamic-parameters) based on other cell values. See the demo for an example. Text can be entered and a value selected from the provided list.
      * <br/><br/>
      * **Read-only mode**
      * <br/>
-     * Specifies that cells the column will display, by default, either: the name(s) of the selected value(s) if there are less than 6, or a summary count of the values if there are more than 5. If the lookup needs to show a different property or needs to be formatted in any way, you can [define a `valueFormatter`](https://www.ag-grid.com/javascript-grid-value-formatters/) on the column definition.
+     * Cells the column will display, by default, either: the name(s) of the selected value(s) if there are less than 6, or a summary count of the values if there are more than 5. If the lookup needs to show a different property or needs to be formatted in any way, you can [define a `valueFormatter`](https://www.ag-grid.com/javascript-grid-value-formatters/) on the column definition.
      */
     SkyCellType["Lookup"] = "skyCellLookup";
     /**
      * **Edit mode**
      * <br/>
-     * Specifies that cells in the column will be edited as HTML number `inputs`. Only numbers can be entered.
+     * Cells in the column will be edited as HTML number `inputs`. Only numbers can be entered.
      * <br/><br/>
      * **Read-only mode**
      * <br/>
-     * Specifies that cells in the column will render as the number value.
+     * Cells in the column will render as the number value.
      */
     SkyCellType["Number"] = "skyCellNumber";
     /**
@@ -1295,23 +1297,23 @@ var SkyCellType;
     /**
      * **Edit and read-only modes**
      * <br/>
-     * Specifies that cells in the column will render as [SKY UX checkbox components](https://developer.blackbaud.com/skyux/components/checkbox). It allows the user to select multiple rows, and adds a highlight to selected rows. The [Ag Grid `rowNode`](https://www.ag-grid.com/javascript-grid-row-node/) will be updated to reflect the selected state.
+     * Cells in the column will render as [SKY UX checkbox components](https://developer.blackbaud.com/skyux/components/checkbox). It allows the user to select multiple rows, and adds a highlight to selected rows. The [Ag Grid `rowNode`](https://www.ag-grid.com/javascript-grid-row-node/) will be updated to reflect the selected state.
      */
     SkyCellType["RowSelector"] = "skyCellRowSelector";
     /**
      * **Edit mode**
      * <br/>
-     * Specifies that cells in the column will be edited as HTML text `inputs`. Any characters can be entered.
+     * Cells in the column will be edited as HTML text `inputs`. Any characters can be entered.
      * <br/><br/>
      * **Read-only mode**
      * <br/>
-     * Specifies cells in the column will render as their string value.
+     * Cells in the column will render as their string value.
      */
     SkyCellType["Text"] = "skyCellText";
     /**
      * **Edit and read-only modes**
      * <br/>
-     * Specifies cell in the column will be passed to a validator function which flags erroneous entries. You can set the validator function and message by passing them to [column definition's `cellRendererParams` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing) as `skyComponentProperties.validator` and `skyComponentProperties.validatorMessage`. SkyCellType.Validator can be combined with other cell types, such as SkyCellType.Autocomplete or SkyCellType.Date, by using the array syntax for the [column definition's `type` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing).
+     * Cells in the column will be passed to a validator function that flags erroneous entries. You can set the validator function and message by passing them to [column definition's `cellRendererParams` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing) as `skyComponentProperties.validator` and `skyComponentProperties.validatorMessage`. SkyCellType.Validator can be combined with other cell types, such as SkyCellType.Autocomplete or SkyCellType.Date, by using the array syntax for the [column definition's `type` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing).
      */
     SkyCellType["Validator"] = "skyCellValidator";
 })(SkyCellType || (SkyCellType = {}));
@@ -2283,7 +2285,7 @@ class SkyAgGridRowDeleteDirective {
         __classPrivateFieldSet(this, _SkyAgGridRowDeleteDirective_viewContainerRef, viewContainerRef, "f");
     }
     /**
-     * Specifies the ids of the data in the rows on which inline delete's should be shown.
+     * The IDs of the data in the rows where the inline delete appears.
      */
     set rowDeleteIds(value) {
         __classPrivateFieldSet(this, _SkyAgGridRowDeleteDirective_rowDeleteIdsInternal, value, "f");