@skyux/ag-grid 7.6.1 → 7.7.0

package/fesm2020/skyux-ag-grid.mjs

@@ -525,10 +525,10 @@ _SkyAgGridCellEditorLookupComponent_params = new WeakMap(), _SkyAgGridCellEditor
     return applySkyLookupPropertiesDefaults(skyLookupProperties);
 };
 SkyAgGridCellEditorLookupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyAgGridCellEditorLookupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyAgGridCellEditorLookupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", 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    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"selection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\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  >\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    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\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  >\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: "14.2.11", 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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", 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    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\n    [enableShowMore]=\"skyComponentProperties?.enableShowMore\"\n    formControlName=\"selection\"\n    [idProperty]=\"skyComponentProperties?.idProperty\"\n    [placeholderText]=\"skyComponentProperties?.placeholderText\"\n    [propertiesToSearch]=\"skyComponentProperties?.propertiesToSearch\"\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  >\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    [autocompleteAttribute]=\"skyComponentProperties?.autocompleteAttribute\"\n    [data]=\"skyComponentProperties?.data\"\n    [debounceTime]=\"skyComponentProperties?.debounceTime\"\n    [descriptorProperty]=\"skyComponentProperties?.descriptorProperty\"\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  >\n  </sky-lookup>\n</sky-input-box>\n", styles: [":host{display:block}\n"] }]
+            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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { width: [{
                 type: HostBinding,
                 args: ['style.width.px']
@@ -1119,6 +1119,9 @@ class SkyAgGridHeaderComponent {
         if (!params) {
             return;
         }
+        this.columnLabel = params.displayName
+            ? undefined
+            : params.column.getColDef().field;
         __classPrivateFieldSet(this, _SkyAgGridHeaderComponent_subscriptions, new Subscription(), "f");
         if (params.column.isFilterAllowed()) {
             __classPrivateFieldGet(this, _SkyAgGridHeaderComponent_subscriptions, "f").add(fromEventPattern((handler) => params.column.addEventListener(Events.EVENT_FILTER_CHANGED, handler), (handler) => params.column.removeEventListener(Events.EVENT_FILTER_CHANGED, handler)).subscribe(() => {
@@ -1199,11 +1202,14 @@ _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  <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: "14.2.11", 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 });
 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  <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"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.SkyDynamicComponentService }]; }, propDecorators: { inlineHelpContainer: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.SkyDynamicComponentService }]; }, propDecorators: { columnLabel: [{
+                type: HostBinding,
+                args: ['attr.title']
+            }], inlineHelpContainer: [{
                 type: ViewChild,
                 args: ['inlineHelpContainer', { read: ElementRef, static: true }]
             }] } });