@skyux/ag-grid 10.33.0 → 10.34.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -88,7 +88,7 @@ export class SkyAgGridHeaderGroupComponent {
88
88
  }
89
89
  }
90
90
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyAgGridHeaderGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
91
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyAgGridHeaderGroupComponent, selector: "sky-header-group", viewQueries: [{ propertyName: "inlineHelpContainer", first: true, predicate: ["inlineHelpContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<span\n class=\"header-group-text\"\n role=\"presentation\"\n [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n >{{ params?.displayName }}</span\n>\n<button\n *ngIf=\"isExpanded$ | async; else openIcons\"\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\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 icon=\"double-chevron-left\" />\n</button>\n<ng-template #openIcons>\n <button\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\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 icon=\"double-chevron-right\" />\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
91
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyAgGridHeaderGroupComponent, selector: "sky-header-group", viewQueries: [{ propertyName: "inlineHelpContainer", first: true, predicate: ["inlineHelpContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<span\n class=\"header-group-text\"\n role=\"presentation\"\n [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n >{{ params?.displayName }}</span\n>\n<button\n *ngIf=\"isExpanded$ | async; else openIcons\"\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\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 icon=\"double-chevron-left\" />\n</button>\n<ng-template #openIcons>\n <button\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\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 icon=\"double-chevron-right\" />\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
92
92
  }
93
93
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyAgGridHeaderGroupComponent, decorators: [{
94
94
  type: Component,
@@ -143,7 +143,7 @@ export class SkyAgGridHeaderComponent {
143
143
  }
144
144
  }
145
145
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyAgGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
146
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", 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 icon=\"ellipsis\" />\n </span>\n <ng-template #notSortingHeader>\n <span\n [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n class=\"ag-header-cell-text\"\n >{{ params?.displayName }}</span\n >\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 [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\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 icon=\"filter\" />\n </span>\n <button\n *ngIf=\"params?.enableSorting\"\n class=\"ag-sort-indicator-container sky-btn sky-btn-icon-borderless\"\n type=\"button\"\n (click)=\"onSortRequested($event)\"\n >\n <ng-container\n *ngIf=\"sortOrder$ | async as sortDirection; else notSorted\"\n >\n <ng-container *ngIf=\"sortDirection === 'desc'\">\n <sky-icon *skyThemeIf=\"'default'\" icon=\"caret-down\" />\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"chevron-down\" />\n <span class=\"sky-screen-reader-only\">{{\n 'sky_ag_grid_column_header_sort_button_aria_label_currently_desc'\n | skyLibResources: params?.displayName\n }}</span>\n </ng-container>\n <ng-container *ngIf=\"sortDirection === 'asc'\">\n <sky-icon *skyThemeIf=\"'default'\" icon=\"caret-up\" />\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"chevron-up\" />\n <span class=\"sky-screen-reader-only\">{{\n 'sky_ag_grid_column_header_sort_button_aria_label_currently_asc'\n | skyLibResources: params?.displayName\n }}</span>\n </ng-container>\n </ng-container>\n <ng-template #notSorted>\n <span class=\"sky-screen-reader-only\">{{\n 'sky_ag_grid_column_header_sort_button_aria_label_currently_not_sorted'\n | skyLibResources: params?.displayName\n }}</span>\n </ng-template>\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 </button>\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{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{color:var(--ag-header-foreground-color);width:initial;height:initial}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container:hover{border:none}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i3.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
146
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", 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 icon=\"ellipsis\" />\n </span>\n <ng-template #notSortingHeader>\n <span\n [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n class=\"ag-header-cell-text\"\n >{{ params?.displayName }}</span\n >\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 [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\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 icon=\"filter\" />\n </span>\n <button\n *ngIf=\"params?.enableSorting\"\n class=\"ag-sort-indicator-container sky-btn sky-btn-icon-borderless\"\n type=\"button\"\n (click)=\"onSortRequested($event)\"\n >\n <ng-container\n *ngIf=\"sortOrder$ | async as sortDirection; else notSorted\"\n >\n <ng-container *ngIf=\"sortDirection === 'desc'\">\n <sky-icon *skyThemeIf=\"'default'\" icon=\"caret-down\" />\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"chevron-down\" />\n <span class=\"sky-screen-reader-only\">{{\n 'sky_ag_grid_column_header_sort_button_aria_label_currently_desc'\n | skyLibResources: params?.displayName\n }}</span>\n </ng-container>\n <ng-container *ngIf=\"sortDirection === 'asc'\">\n <sky-icon *skyThemeIf=\"'default'\" icon=\"caret-up\" />\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"chevron-up\" />\n <span class=\"sky-screen-reader-only\">{{\n 'sky_ag_grid_column_header_sort_button_aria_label_currently_asc'\n | skyLibResources: params?.displayName\n }}</span>\n </ng-container>\n </ng-container>\n <ng-template #notSorted>\n <span class=\"sky-screen-reader-only\">{{\n 'sky_ag_grid_column_header_sort_button_aria_label_currently_not_sorted'\n | skyLibResources: params?.displayName\n }}</span>\n </ng-template>\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 </button>\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{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{color:var(--ag-header-foreground-color);width:initial;height:initial}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container:hover{border:none}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i3.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
147
147
  }
148
148
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyAgGridHeaderComponent, decorators: [{
149
149
  type: Component,
@@ -2349,7 +2349,7 @@ class SkyAgGridHeaderGroupComponent {
2349
2349
  }
2350
2350
  }
2351
2351
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyAgGridHeaderGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2352
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyAgGridHeaderGroupComponent, selector: "sky-header-group", viewQueries: [{ propertyName: "inlineHelpContainer", first: true, predicate: ["inlineHelpContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<span\n class=\"header-group-text\"\n role=\"presentation\"\n [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n >{{ params?.displayName }}</span\n>\n<button\n *ngIf=\"isExpanded$ | async; else openIcons\"\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\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 icon=\"double-chevron-left\" />\n</button>\n<ng-template #openIcons>\n <button\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\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 icon=\"double-chevron-right\" />\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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$4.λ1, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3$2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2352
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyAgGridHeaderGroupComponent, selector: "sky-header-group", viewQueries: [{ propertyName: "inlineHelpContainer", first: true, predicate: ["inlineHelpContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<span\n class=\"header-group-text\"\n role=\"presentation\"\n [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n >{{ params?.displayName }}</span\n>\n<button\n *ngIf=\"isExpanded$ | async; else openIcons\"\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\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 icon=\"double-chevron-left\" />\n</button>\n<ng-template #openIcons>\n <button\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\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 icon=\"double-chevron-right\" />\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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$4.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3$2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2353
2353
  }
2354
2354
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyAgGridHeaderGroupComponent, decorators: [{
2355
2355
  type: Component,
@@ -2508,7 +2508,7 @@ class SkyAgGridHeaderComponent {
2508
2508
  }
2509
2509
  }
2510
2510
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyAgGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2511
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", 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 icon=\"ellipsis\" />\n </span>\n <ng-template #notSortingHeader>\n <span\n [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n class=\"ag-header-cell-text\"\n >{{ params?.displayName }}</span\n >\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 [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\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 icon=\"filter\" />\n </span>\n <button\n *ngIf=\"params?.enableSorting\"\n class=\"ag-sort-indicator-container sky-btn sky-btn-icon-borderless\"\n type=\"button\"\n (click)=\"onSortRequested($event)\"\n >\n <ng-container\n *ngIf=\"sortOrder$ | async as sortDirection; else notSorted\"\n >\n <ng-container *ngIf=\"sortDirection === 'desc'\">\n <sky-icon *skyThemeIf=\"'default'\" icon=\"caret-down\" />\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"chevron-down\" />\n <span class=\"sky-screen-reader-only\">{{\n 'sky_ag_grid_column_header_sort_button_aria_label_currently_desc'\n | skyLibResources: params?.displayName\n }}</span>\n </ng-container>\n <ng-container *ngIf=\"sortDirection === 'asc'\">\n <sky-icon *skyThemeIf=\"'default'\" icon=\"caret-up\" />\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"chevron-up\" />\n <span class=\"sky-screen-reader-only\">{{\n 'sky_ag_grid_column_header_sort_button_aria_label_currently_asc'\n | skyLibResources: params?.displayName\n }}</span>\n </ng-container>\n </ng-container>\n <ng-template #notSorted>\n <span class=\"sky-screen-reader-only\">{{\n 'sky_ag_grid_column_header_sort_button_aria_label_currently_not_sorted'\n | skyLibResources: params?.displayName\n }}</span>\n </ng-template>\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 </button>\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{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{color:var(--ag-header-foreground-color);width:initial;height:initial}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container:hover{border:none}.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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$4.λ1, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3$2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i3$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2511
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", 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 icon=\"ellipsis\" />\n </span>\n <ng-template #notSortingHeader>\n <span\n [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\n class=\"ag-header-cell-text\"\n >{{ params?.displayName }}</span\n >\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 [skyThemeClass]=\"{ 'sky-font-heading-4': 'modern' }\"\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 icon=\"filter\" />\n </span>\n <button\n *ngIf=\"params?.enableSorting\"\n class=\"ag-sort-indicator-container sky-btn sky-btn-icon-borderless\"\n type=\"button\"\n (click)=\"onSortRequested($event)\"\n >\n <ng-container\n *ngIf=\"sortOrder$ | async as sortDirection; else notSorted\"\n >\n <ng-container *ngIf=\"sortDirection === 'desc'\">\n <sky-icon *skyThemeIf=\"'default'\" icon=\"caret-down\" />\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"chevron-down\" />\n <span class=\"sky-screen-reader-only\">{{\n 'sky_ag_grid_column_header_sort_button_aria_label_currently_desc'\n | skyLibResources: params?.displayName\n }}</span>\n </ng-container>\n <ng-container *ngIf=\"sortDirection === 'asc'\">\n <sky-icon *skyThemeIf=\"'default'\" icon=\"caret-up\" />\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"chevron-up\" />\n <span class=\"sky-screen-reader-only\">{{\n 'sky_ag_grid_column_header_sort_button_aria_label_currently_asc'\n | skyLibResources: params?.displayName\n }}</span>\n </ng-container>\n </ng-container>\n <ng-template #notSorted>\n <span class=\"sky-screen-reader-only\">{{\n 'sky_ag_grid_column_header_sort_button_aria_label_currently_not_sorted'\n | skyLibResources: params?.displayName\n }}</span>\n </ng-template>\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 </button>\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{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{color:var(--ag-header-foreground-color);width:initial;height:initial}.ag-header-cell-label .ag-header-cell-label-and-icons .ag-sort-indicator-container:hover{border:none}.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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$4.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3$2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i3$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2512
2512
  }
2513
2513
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyAgGridHeaderComponent, decorators: [{
2514
2514
  type: Component,