@progress/kendo-angular-grid 6.0.1 → 6.0.3-dev.202202141635

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.
@@ -45,7 +45,7 @@ var PagerPrevButtonsComponent = /** @class */ (function (_super) {
45
45
  core_1.Component({
46
46
  changeDetection: core_1.ChangeDetectionStrategy.OnPush,
47
47
  selector: 'kendo-pager-prev-buttons',
48
- template: "\n <span\n [kendoGridFocusable]=\"!disabled\"\n [title]=\"textFor('pagerFirstPage')\"\n (click)=\"currentPage !== 1 ? changePage(0) : false\"\n (keydown.enter)=\"currentPage !== 1 ? changePage(0) : false\"\n [ngClass]=\"{\n 'k-link': true,\n 'k-pager-nav': true,\n 'k-state-disabled': disabled,\n 'k-pager-first': true\n }\">\n <span [attr.aria-label]=\"textFor('pagerFirstPage')\"\n [ngClass]=\"{\n 'k-icon': true,\n 'k-i-seek-w': true\n }\">\n </span>\n </span>\n <span\n [kendoGridFocusable]=\"!disabled\"\n [title]=\"textFor('pagerPreviousPage')\"\n (click)=\"currentPage !== 1 ? changePage(currentPage-2) : false\"\n (keydown.enter)=\"currentPage !== 1 ? changePage(currentPage-2) : false\"\n [ngClass]=\"{\n 'k-link': true,\n 'k-pager-nav': true,\n 'k-state-disabled': disabled,\n '': true\n }\">\n <span [attr.aria-label]=\"textFor('pagerPreviousPage')\"\n [ngClass]=\"{\n 'k-icon': true,\n 'k-i-arrow-w': true\n }\">\n </span>\n </span>\n "
48
+ template: "\n <span\n [kendoGridFocusable]=\"!disabled\"\n [title]=\"textFor('pagerFirstPage')\"\n (click)=\"currentPage !== 1 ? changePage(0) : false\"\n (keydown.enter)=\"currentPage !== 1 ? changePage(0) : false\"\n role=\"button\"\n [ngClass]=\"{\n 'k-link': true,\n 'k-pager-nav': true,\n 'k-state-disabled': disabled,\n 'k-pager-first': true\n }\">\n <span role=\"note\"\n [attr.aria-label]=\"textFor('pagerFirstPage')\"\n [ngClass]=\"{\n 'k-icon': true,\n 'k-i-seek-w': true\n }\">\n </span>\n </span>\n <span\n [kendoGridFocusable]=\"!disabled\"\n [title]=\"textFor('pagerPreviousPage')\"\n role=\"button\"\n (click)=\"currentPage !== 1 ? changePage(currentPage-2) : false\"\n (keydown.enter)=\"currentPage !== 1 ? changePage(currentPage-2) : false\"\n [ngClass]=\"{\n 'k-link': true,\n 'k-pager-nav': true,\n 'k-state-disabled': disabled,\n '': true\n }\">\n <span role=\"note\"\n [attr.aria-label]=\"textFor('pagerPreviousPage')\"\n [ngClass]=\"{\n 'k-icon': true,\n 'k-i-arrow-w': true\n }\">\n </span>\n </span>\n "
49
49
  }),
50
50
  tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
51
51
  pager_context_service_1.PagerContextService,
@@ -565,7 +565,7 @@ var HeaderComponent = /** @class */ (function () {
565
565
  core_1.Component({
566
566
  selector: '[kendoGridHeader]',
567
567
  styles: ["\n .k-column-resizer {\n cursor: col-resize;\n display: block;\n height: 1000%;\n position: absolute;\n top: 0;\n width: .5em;\n }\n "],
568
- template: "\n <ng-template [ngIf]=\"true\">\n <tr *ngFor=\"let i of columnLevels; let levelIndex = index\"\n kendoGridLogicalRow\n [logicalRowIndex]=\"levelIndex\"\n [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n [logicalCellsCount]=\"columns.length\"\n [logicalSlaveCellsCount]=\"unlockedColumnsCount\">\n <th\n class=\"k-group-cell k-header\"\n role=\"presentation\"\n *ngFor=\"let g of groups\">\n </th>\n <th class=\"k-hierarchy-cell k-header\"\n role=\"presentation\"\n *ngIf=\"detailTemplate?.templateRef\"\n kendoGridLogicalCell\n [logicalRowIndex]=\"levelIndex\"\n [logicalColIndex]=\"0\"\n aria-selected=\"false\"\n >\n </th>\n <ng-template ngFor let-column [ngForOf]=\"columnsForLevel(levelIndex)\" [ngForTrackBy]=\"trackByIndex\" let-columnIndex=\"index\" let-last=\"last\">\n <th *ngIf=\"!isColumnGroupComponent(column)\"\n kendoGridLogicalCell\n [logicalRowIndex]=\"levelIndex\"\n [logicalColIndex]=\"logicalColumnIndex(column)\"\n [headerLabelText]=\"column.title || column.field\"\n [colSpan]=\"column.colspan\"\n [rowSpan]=\"column.rowspan(totalColumnLevels)\"\n role=\"columnheader\"\n aria-selected=\"false\"\n [attr.aria-sort]=\"sortState(column)\"\n (keydown)=\"onHeaderKeydown(column, $event)\"\n kendoDropTarget\n kendoDraggable\n kendoDraggableColumn\n [enableDrag]=\"shouldActivate(column)\"\n [context]=\"{\n field: column.field,\n type: 'column',\n column: column,\n hint: column.title || column.field,\n lastColumn: last && columnIndex === 0\n }\"\n class=\"k-header\"\n [class.k-filterable]=\"(showFilterMenu && isFilterable(column)) || showColumnMenu(column)\"\n [class.k-first]=\"isFirstOnRow(column, columnIndex)\"\n [class.k-grid-header-sticky]=\"column.sticky\"\n [ngClass]=\"column.headerClass\"\n [ngStyle]=\"column.sticky ? addStickyStyles(column) : column.headerStyle\"\n [attr.rowspan]=\"column.rowspan(totalColumnLevels)\"\n [attr.colspan]=\"column.colspan\">\n\n <ng-template [ngIf]=\"!isSortable(column)\">\n <kendo-grid-filter-menu\n *ngIf=\"showFilterMenu && isFilterable(column)\"\n [column]=\"column\"\n [filter]=\"filter\"\n [tabIndex]=\"tabIndex\">\n </kendo-grid-filter-menu>\n <kendo-grid-column-menu *ngIf=\"showColumnMenu(column)\"\n [standalone]=\"false\"\n [settings]=\"columnMenu\"\n [column]=\"column\"\n [columnMenuTemplate]=\"columnMenuTemplate\"\n [sort]=\"sort\"\n [filter]=\"filter\"\n [sortable]=\"sortable\"\n [tabIndex]=\"tabIndex\">\n </kendo-grid-column-menu>\n <ng-template\n [templateContext]=\"{\n templateRef: column.headerTemplateRef,\n columnIndex: column.leafIndex,\n column: column,\n $implicit: column\n }\">\n </ng-template>\n <ng-template [ngIf]=\"!column.headerTemplateRef\">{{column.displayTitle}}</ng-template>\n </ng-template>\n\n <ng-template [ngIf]=\"isSortable(column)\">\n <span class=\"k-cell-inner\">\n <span #link class=\"k-link\" (click)=\"onSortClick(column, $event, link)\">\n <ng-template\n [templateContext]=\"{\n templateRef: column.headerTemplateRef,\n columnIndex: column.leafIndex,\n column: column,\n $implicit: column\n }\">\n </ng-template>\n <ng-template [ngIf]=\"!column.headerTemplateRef\">\n <span class=\"k-column-title\">{{column.displayTitle}}</span>\n </ng-template>\n <span [attr.aria-label]=\"sortableLabel\" [ngClass]=\"sortIcon(column.field)\"></span>\n <span *ngIf=\"showSortNumbering(column)\" class=\"k-sort-order\">{{sortOrder(column.field)}}</span>\n </span>\n <span role=\"status\"\n class=\"k-sort-status\"\n style=\"position: absolute; left: -10000px;\"\n [innerHtml]=\"sortStatus(column)\">\n </span>\n <kendo-grid-filter-menu\n *ngIf=\"showFilterMenu && isFilterable(column)\"\n [column]=\"column\"\n [filter]=\"filter\"\n [tabIndex]=\"tabIndex\">\n </kendo-grid-filter-menu>\n <kendo-grid-column-menu *ngIf=\"showColumnMenu(column)\"\n [standalone]=\"false\"\n [settings]=\"columnMenu\"\n [column]=\"column\"\n [columnMenuTemplate]=\"columnMenuTemplate\"\n [sort]=\"sort\"\n [filter]=\"filter\"\n [sortable]=\"sortable\"\n [tabIndex]=\"tabIndex\">\n </kendo-grid-column-menu>\n </span>\n </ng-template>\n\n <ng-template [ngIf]=\"isCheckboxColumn(column) && !column.headerTemplateRef && column.showSelectAll\">\n <input\n class=\"k-checkbox k-checkbox-md k-rounded-md\"\n [attr.id]=\"selectAllCheckboxId()\"\n [attr.aria-label]=\"selectAllCheckboxLabel\"\n kendoGridSelectAllCheckbox\n kendoGridFocusable>\n </ng-template>\n <span kendoGridColumnHandle\n kendoDraggable\n class=\"k-column-resizer\"\n *ngIf=\"resizable\"\n [column]=\"column\"\n [columns]=\"columns\">\n </span>\n </th>\n <th *ngIf=\"isColumnGroupComponent(column)\"\n kendoGridLogicalCell\n [logicalRowIndex]=\"levelIndex\"\n [logicalColIndex]=\"logicalColumnIndex(column)\"\n [rowSpan]=\"column.rowspan(totalColumnLevels)\"\n [colSpan]=\"column.colspan\"\n [headerLabelText]=\"column.title || column.field\"\n kendoDropTarget\n kendoDraggable\n kendoDraggableColumn\n [enableDrag]=\"shouldActivate(column)\"\n [context]=\"{\n type: 'columnGroup',\n column: column,\n hint: column.title,\n lastColumn: last && columnIndex === 0\n }\"\n class=\"k-header\"\n [class.k-first]=\"isFirstOnRow(column, columnIndex)\"\n [class.k-filterable]=\"showColumnMenu(column)\"\n [class.k-grid-content-sticky]=\"column.sticky\"\n [ngClass]=\"column.headerClass\"\n [ngStyle]=\"column.headerStyle\"\n [attr.rowspan]=\"column.rowspan(totalColumnLevels)\"\n [attr.colspan]=\"column.colspan\">\n <kendo-grid-column-menu *ngIf=\"showColumnMenu(column)\"\n [standalone]=\"false\"\n [settings]=\"columnMenu\"\n [column]=\"column\"\n [columnMenuTemplate]=\"columnMenuTemplate\">\n </kendo-grid-column-menu>\n <ng-template\n [templateContext]=\"{\n templateRef: column.headerTemplateRef,\n columnIndex: lockedColumnsCount + columnIndex,\n column: column,\n $implicit: column\n }\">\n </ng-template>\n <ng-template [ngIf]=\"!column.headerTemplateRef\">{{column.displayTitle}}</ng-template>\n <span kendoGridColumnHandle\n kendoDraggable\n class=\"k-column-resizer\"\n *ngIf=\"resizable\"\n [column]=\"column\"\n [columns]=\"columns\">\n </span>\n </th>\n </ng-template>\n </tr>\n <tr *ngIf=\"showFilterRow\"\n kendoGridFilterRow\n [columns]=\"leafColumns\"\n [filter]=\"filter\"\n [groups]=\"groups\"\n [detailTemplate]=\"detailTemplate\"\n [lockedColumnsCount]=\"lockedColumnsCount\"\n kendoGridLogicalRow\n [logicalRowIndex]=\"totalColumnLevels + 1\"\n [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n [logicalCellsCount]=\"columns.length\"\n [logicalSlaveCellsCount]=\"unlockedColumnsCount\"\n ></tr>\n </ng-template>\n "
568
+ template: "\n <ng-template [ngIf]=\"true\">\n <tr *ngFor=\"let i of columnLevels; let levelIndex = index\"\n kendoGridLogicalRow\n [logicalRowIndex]=\"levelIndex\"\n [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n [logicalCellsCount]=\"columns.length\"\n [logicalSlaveCellsCount]=\"unlockedColumnsCount\">\n <th\n class=\"k-group-cell k-header\"\n role=\"presentation\"\n *ngFor=\"let g of groups\">\n </th>\n <th class=\"k-hierarchy-cell k-header\"\n role=\"presentation\"\n *ngIf=\"detailTemplate?.templateRef\"\n kendoGridLogicalCell\n [logicalRowIndex]=\"levelIndex\"\n [logicalColIndex]=\"0\"\n aria-selected=\"false\"\n >\n </th>\n <ng-template ngFor let-column [ngForOf]=\"columnsForLevel(levelIndex)\" [ngForTrackBy]=\"trackByIndex\" let-columnIndex=\"index\" let-last=\"last\">\n <th *ngIf=\"!isColumnGroupComponent(column)\"\n kendoGridLogicalCell\n [logicalRowIndex]=\"levelIndex\"\n [logicalColIndex]=\"logicalColumnIndex(column)\"\n [headerLabelText]=\"column.title || column.field\"\n [colSpan]=\"column.colspan\"\n [rowSpan]=\"column.rowspan(totalColumnLevels)\"\n role=\"columnheader\"\n aria-selected=\"false\"\n [attr.aria-sort]=\"sortState(column)\"\n (keydown)=\"onHeaderKeydown(column, $event)\"\n kendoDropTarget\n kendoDraggable\n kendoDraggableColumn\n [enableDrag]=\"shouldActivate(column)\"\n [context]=\"{\n field: column.field,\n type: 'column',\n column: column,\n hint: column.title || column.field,\n lastColumn: last && columnIndex === 0\n }\"\n class=\"k-header\"\n [class.k-filterable]=\"(showFilterMenu && isFilterable(column)) || showColumnMenu(column)\"\n [class.k-first]=\"isFirstOnRow(column, columnIndex)\"\n [class.k-grid-header-sticky]=\"column.sticky\"\n [ngClass]=\"column.headerClass\"\n [ngStyle]=\"column.sticky ? addStickyStyles(column) : column.headerStyle\"\n [attr.rowspan]=\"column.rowspan(totalColumnLevels)\"\n [attr.colspan]=\"column.colspan\">\n\n <ng-template [ngIf]=\"!isSortable(column)\">\n <kendo-grid-filter-menu\n *ngIf=\"showFilterMenu && isFilterable(column)\"\n [column]=\"column\"\n [filter]=\"filter\"\n [tabIndex]=\"tabIndex\">\n </kendo-grid-filter-menu>\n <kendo-grid-column-menu *ngIf=\"showColumnMenu(column)\"\n [standalone]=\"false\"\n [settings]=\"columnMenu\"\n [column]=\"column\"\n [columnMenuTemplate]=\"columnMenuTemplate\"\n [sort]=\"sort\"\n [filter]=\"filter\"\n [sortable]=\"sortable\"\n [tabIndex]=\"tabIndex\">\n </kendo-grid-column-menu>\n <ng-template\n [templateContext]=\"{\n templateRef: column.headerTemplateRef,\n columnIndex: column.leafIndex,\n column: column,\n $implicit: column\n }\">\n </ng-template>\n <ng-template [ngIf]=\"!column.headerTemplateRef\">{{column.displayTitle}}</ng-template>\n </ng-template>\n\n <ng-template [ngIf]=\"isSortable(column)\">\n <span class=\"k-cell-inner\">\n <span #link class=\"k-link\" (click)=\"onSortClick(column, $event, link)\">\n <ng-template\n [templateContext]=\"{\n templateRef: column.headerTemplateRef,\n columnIndex: column.leafIndex,\n column: column,\n $implicit: column\n }\">\n </ng-template>\n <ng-template [ngIf]=\"!column.headerTemplateRef\">\n <span class=\"k-column-title\">{{column.displayTitle}}</span>\n </ng-template>\n <span role=\"note\" [attr.aria-label]=\"sortableLabel\" [ngClass]=\"sortIcon(column.field)\"></span>\n <span *ngIf=\"showSortNumbering(column)\" class=\"k-sort-order\">{{sortOrder(column.field)}}</span>\n </span>\n <span role=\"status\"\n class=\"k-sort-status\"\n style=\"position: absolute; left: -10000px;\"\n [innerHtml]=\"sortStatus(column)\">\n </span>\n <kendo-grid-filter-menu\n *ngIf=\"showFilterMenu && isFilterable(column)\"\n [column]=\"column\"\n [filter]=\"filter\"\n [tabIndex]=\"tabIndex\">\n </kendo-grid-filter-menu>\n <kendo-grid-column-menu *ngIf=\"showColumnMenu(column)\"\n [standalone]=\"false\"\n [settings]=\"columnMenu\"\n [column]=\"column\"\n [columnMenuTemplate]=\"columnMenuTemplate\"\n [sort]=\"sort\"\n [filter]=\"filter\"\n [sortable]=\"sortable\"\n [tabIndex]=\"tabIndex\">\n </kendo-grid-column-menu>\n </span>\n </ng-template>\n\n <ng-template [ngIf]=\"isCheckboxColumn(column) && !column.headerTemplateRef && column.showSelectAll\">\n <input\n class=\"k-checkbox k-checkbox-md k-rounded-md\"\n [attr.id]=\"selectAllCheckboxId()\"\n [attr.aria-label]=\"selectAllCheckboxLabel\"\n kendoGridSelectAllCheckbox\n kendoGridFocusable>\n </ng-template>\n <span kendoGridColumnHandle\n kendoDraggable\n class=\"k-column-resizer\"\n *ngIf=\"resizable\"\n [column]=\"column\"\n [columns]=\"columns\">\n </span>\n </th>\n <th *ngIf=\"isColumnGroupComponent(column)\"\n kendoGridLogicalCell\n [logicalRowIndex]=\"levelIndex\"\n [logicalColIndex]=\"logicalColumnIndex(column)\"\n [rowSpan]=\"column.rowspan(totalColumnLevels)\"\n [colSpan]=\"column.colspan\"\n [headerLabelText]=\"column.title || column.field\"\n kendoDropTarget\n kendoDraggable\n kendoDraggableColumn\n [enableDrag]=\"shouldActivate(column)\"\n [context]=\"{\n type: 'columnGroup',\n column: column,\n hint: column.title,\n lastColumn: last && columnIndex === 0\n }\"\n class=\"k-header\"\n [class.k-first]=\"isFirstOnRow(column, columnIndex)\"\n [class.k-filterable]=\"showColumnMenu(column)\"\n [class.k-grid-content-sticky]=\"column.sticky\"\n [ngClass]=\"column.headerClass\"\n [ngStyle]=\"column.headerStyle\"\n [attr.rowspan]=\"column.rowspan(totalColumnLevels)\"\n [attr.colspan]=\"column.colspan\">\n <kendo-grid-column-menu *ngIf=\"showColumnMenu(column)\"\n [standalone]=\"false\"\n [settings]=\"columnMenu\"\n [column]=\"column\"\n [columnMenuTemplate]=\"columnMenuTemplate\">\n </kendo-grid-column-menu>\n <ng-template\n [templateContext]=\"{\n templateRef: column.headerTemplateRef,\n columnIndex: lockedColumnsCount + columnIndex,\n column: column,\n $implicit: column\n }\">\n </ng-template>\n <ng-template [ngIf]=\"!column.headerTemplateRef\">{{column.displayTitle}}</ng-template>\n <span kendoGridColumnHandle\n kendoDraggable\n class=\"k-column-resizer\"\n *ngIf=\"resizable\"\n [column]=\"column\"\n [columns]=\"columns\">\n </span>\n </th>\n </ng-template>\n </tr>\n <tr *ngIf=\"showFilterRow\"\n kendoGridFilterRow\n [columns]=\"leafColumns\"\n [filter]=\"filter\"\n [groups]=\"groups\"\n [detailTemplate]=\"detailTemplate\"\n [lockedColumnsCount]=\"lockedColumnsCount\"\n kendoGridLogicalRow\n [logicalRowIndex]=\"totalColumnLevels + 1\"\n [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n [logicalCellsCount]=\"columns.length\"\n [logicalSlaveCellsCount]=\"unlockedColumnsCount\"\n ></tr>\n </ng-template>\n "
569
569
  }),
570
570
  tslib_1.__metadata("design:paramtypes", [single_popup_service_1.SinglePopupService,
571
571
  drag_hint_service_1.DragHintService,
@@ -9,6 +9,7 @@ var utils_1 = require("./../utils");
9
9
  var core_1 = require("@angular/core");
10
10
  var selection_service_1 = require("./selection.service");
11
11
  var utils_2 = require("../utils");
12
+ var kendo_angular_common_1 = require("@progress/kendo-angular-common");
12
13
  /**
13
14
  * Represents the select-all checkbox feature of the Grid ([see example]({% slug selection_grid %}#toc-select-all-feature)).
14
15
  */
@@ -24,10 +25,10 @@ var SelectAllCheckboxDirective = /** @class */ (function () {
24
25
  * ([see example]({% slug selection_grid %}#toc-select-all-feature)).
25
26
  */
26
27
  this.selectAllChange = new core_1.EventEmitter();
27
- this.type = "checkbox";
28
+ this.type = 'checkbox';
28
29
  this.stateSet = false;
29
30
  this.ngZone.runOutsideAngular(function () {
30
- _this.destroyClick = _this.renderer.listen(_this.el.nativeElement, "click", _this.onClick.bind(_this));
31
+ _this.destroyClick = _this.renderer.listen(_this.el.nativeElement, 'click', _this.onClick.bind(_this));
31
32
  });
32
33
  }
33
34
  SelectAllCheckboxDirective.prototype.ngAfterContentChecked = function () {
@@ -46,14 +47,20 @@ var SelectAllCheckboxDirective = /** @class */ (function () {
46
47
  */
47
48
  SelectAllCheckboxDirective.prototype.onClick = function () {
48
49
  var _this = this;
49
- // yields consistent cross-browser behavior when clicking an "indeterminate" checkbox
50
+ // yields consistent cross-browser behavior when clicking an indeterminate checkbox
50
51
  var undefinedCheckedStateInIE = utils_1.detectIE() && this.selectionService.selectAllState === undefined;
51
52
  var isChecked = undefinedCheckedStateInIE ? true : this.el.nativeElement.checked;
52
53
  var options = this.selectionService.options;
53
- this.selectAllChange.emit(isChecked ? "checked" : "unchecked");
54
- if (options.enabled && options.mode === "multiple") {
54
+ var enabledAndMultiple = options.enabled && options.mode === 'multiple';
55
+ var shouldEmitSelectAll = kendo_angular_common_1.hasObservers(this.selectAllChange);
56
+ if (enabledAndMultiple || shouldEmitSelectAll) {
55
57
  this.ngZone.run(function () {
56
- _this.selectionService.updateAll(isChecked);
58
+ if (enabledAndMultiple) {
59
+ _this.selectionService.updateAll(isChecked);
60
+ }
61
+ if (shouldEmitSelectAll) {
62
+ _this.selectAllChange.emit(isChecked ? 'checked' : 'unchecked');
63
+ }
57
64
  });
58
65
  }
59
66
  };
@@ -63,17 +70,17 @@ var SelectAllCheckboxDirective = /** @class */ (function () {
63
70
  SelectAllCheckboxDirective.prototype.setState = function () {
64
71
  var state = this.stateSet ? this.stateToBool() : this.selectionService.selectAllState;
65
72
  var elem = this.el.nativeElement;
66
- this.renderer.setProperty(elem, "indeterminate", !utils_2.isPresent(state));
67
- this.renderer.setProperty(elem, "checked", utils_2.isPresent(state) ? state : false);
73
+ this.renderer.setProperty(elem, 'indeterminate', !utils_2.isPresent(state));
74
+ this.renderer.setProperty(elem, 'checked', utils_2.isPresent(state) ? state : false);
68
75
  };
69
76
  /**
70
77
  * @hidden
71
78
  */
72
79
  SelectAllCheckboxDirective.prototype.stateToBool = function () {
73
80
  switch (this.state) {
74
- case "checked":
81
+ case 'checked':
75
82
  return true;
76
- case "unchecked":
83
+ case 'unchecked':
77
84
  return false;
78
85
  default:
79
86
  return undefined;