@skyux/ag-grid 10.33.0 → 10.35.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.
- package/css/sky-ag-grid.css +58 -36
- package/documentation.json +507 -492
- package/esm2022/lib/modules/ag-grid/header/header-group.component.mjs +1 -1
- package/esm2022/lib/modules/ag-grid/header/header.component.mjs +1 -1
- package/fesm2022/skyux-ag-grid.mjs +2 -2
- package/fesm2022/skyux-ag-grid.mjs.map +1 -1
- package/package.json +15 -15
|
@@ -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,
|