@progress/kendo-angular-grid 17.0.0-develop.37 → 17.0.0-develop.39

package/esm2022/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1730722859,
-    version: '17.0.0-develop.37',
+    publishDate: 1730797199,
+    version: '17.0.0-develop.39',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/rendering/cell.component.mjs

@@ -19,7 +19,7 @@ import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { SelectionCheckboxDirective } from '../selection/selection-checkbox.directive';
 import { FocusableDirective } from '../navigation/focusable.directive';
 import { NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet, NgFor, NgSwitchDefault } from '@angular/common';
-import { NumericTextBoxComponent } from '@progress/kendo-angular-inputs';
+import { CheckBoxComponent, NumericTextBoxComponent, TextBoxComponent } from '@progress/kendo-angular-inputs';
 import { DatePickerComponent } from '@progress/kendo-angular-dateinputs';
 import * as i0 from "@angular/core";
 import * as i1 from "../editing/edit.service";
@@ -183,23 +183,19 @@ export class CellComponent {
                     <ng-container *ngIf="isBoundColumn">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
                     <ng-container *ngIf="isCheckboxColumn && !isNew">
                         <ng-container *ngIf="isRowSelectable; else nonSelectableRow">
-                            <span class="k-checkbox-wrap">
-                                <input
-                                    class="k-checkbox k-checkbox-md k-rounded-md"
-                                    [kendoGridSelectionCheckbox]="rowIndex"
-                                    [attr.id]="selectionCheckboxId"
-                                    [attr.aria-label]="selectionCheckboxLabel" />
-                            </span>
+                            <kendo-checkbox
+                                [kendoGridSelectionCheckbox]="rowIndex"
+                                [attr.id]="selectionCheckboxId"
+                                [inputAttributes]="{'aria-label': selectionCheckboxLabel}">
+                            </kendo-checkbox>
                         </ng-container>
                         <ng-template #nonSelectableRow>
-                            <span class="k-checkbox-wrap" *ngIf="column.showDisabledCheckbox">
-                                <input
-                                    class="k-checkbox k-checkbox-md k-rounded-md k-disabled"
-                                    [kendoGridSelectionCheckbox]="rowIndex"
-                                    [attr.id]="selectionCheckboxId"
-                                    [attr.aria-label]="selectionCheckboxLabel"
-                                    [disabled]="true" />
-                            </span>
+                            <kendo-checkbox *ngIf="column.showDisabledCheckbox"
+                                [kendoGridSelectionCheckbox]="rowIndex"
+                                [attr.id]="selectionCheckboxId"
+                                [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
+                                [disabled]="true"
+                            ></kendo-checkbox>
                         </ng-template>
                     </ng-container>
                     <ng-container *ngIf="isRowReorderColumn && !isNew">
@@ -239,27 +235,21 @@ export class CellComponent {
                         kendoGridFocusable
                     ></kendo-datepicker>
 
-                    <span class="k-checkbox-wrap">
-                        <input
-                            *ngSwitchCase="'boolean'"
-                            type="checkbox"
-                            class="k-checkbox k-checkbox-md k-rounded-md"
-                            [formControl]="$any(formGroup.get(column.field))"
-                            kendoGridFocusable
-                        />
-                    </span>
+                    <kendo-checkbox
+                        *ngSwitchCase="'boolean'"
+                        [formControl]="$any(formGroup.get(column.field))"
+                        kendoGridFocusable
+                    ></kendo-checkbox>
 
-                    <input
+                    <kendo-textbox
                         *ngSwitchDefault
-                        type="text"
-                        class="k-textbox k-input k-input-md k-input-solid k-rounded-md"
                         [formControl]="$any(formGroup.get(column.field))"
                         kendoGridFocusable
-                    />
+                    ></kendo-textbox>
                 </ng-container>
             </ng-container>
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: FieldAccessorPipe, name: "valueOf" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: FieldAccessorPipe, name: "valueOf" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
@@ -281,23 +271,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     <ng-container *ngIf="isBoundColumn">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
                     <ng-container *ngIf="isCheckboxColumn && !isNew">
                         <ng-container *ngIf="isRowSelectable; else nonSelectableRow">
-                            <span class="k-checkbox-wrap">
-                                <input
-                                    class="k-checkbox k-checkbox-md k-rounded-md"
-                                    [kendoGridSelectionCheckbox]="rowIndex"
-                                    [attr.id]="selectionCheckboxId"
-                                    [attr.aria-label]="selectionCheckboxLabel" />
-                            </span>
+                            <kendo-checkbox
+                                [kendoGridSelectionCheckbox]="rowIndex"
+                                [attr.id]="selectionCheckboxId"
+                                [inputAttributes]="{'aria-label': selectionCheckboxLabel}">
+                            </kendo-checkbox>
                         </ng-container>
                         <ng-template #nonSelectableRow>
-                            <span class="k-checkbox-wrap" *ngIf="column.showDisabledCheckbox">
-                                <input
-                                    class="k-checkbox k-checkbox-md k-rounded-md k-disabled"
-                                    [kendoGridSelectionCheckbox]="rowIndex"
-                                    [attr.id]="selectionCheckboxId"
-                                    [attr.aria-label]="selectionCheckboxLabel"
-                                    [disabled]="true" />
-                            </span>
+                            <kendo-checkbox *ngIf="column.showDisabledCheckbox"
+                                [kendoGridSelectionCheckbox]="rowIndex"
+                                [attr.id]="selectionCheckboxId"
+                                [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
+                                [disabled]="true"
+                            ></kendo-checkbox>
                         </ng-template>
                     </ng-container>
                     <ng-container *ngIf="isRowReorderColumn && !isNew">
@@ -337,30 +323,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         kendoGridFocusable
                     ></kendo-datepicker>
 
-                    <span class="k-checkbox-wrap">
-                        <input
-                            *ngSwitchCase="'boolean'"
-                            type="checkbox"
-                            class="k-checkbox k-checkbox-md k-rounded-md"
-                            [formControl]="$any(formGroup.get(column.field))"
-                            kendoGridFocusable
-                        />
-                    </span>
+                    <kendo-checkbox
+                        *ngSwitchCase="'boolean'"
+                        [formControl]="$any(formGroup.get(column.field))"
+                        kendoGridFocusable
+                    ></kendo-checkbox>
 
-                    <input
+                    <kendo-textbox
                         *ngSwitchDefault
-                        type="text"
-                        class="k-textbox k-input k-input-md k-input-solid k-rounded-md"
                         [formControl]="$any(formGroup.get(column.field))"
                         kendoGridFocusable
-                    />
+                    ></kendo-textbox>
                 </ng-container>
             </ng-container>
         </ng-container>
     `,
                     standalone: true,
                     imports: [NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet, NgFor, FocusableDirective, SelectionCheckboxDirective,
-                        IconWrapperComponent, NumericTextBoxComponent, DatePickerComponent, NgSwitchDefault, FieldAccessorPipe, ReactiveFormsModule]
+                        IconWrapperComponent, NumericTextBoxComponent, DatePickerComponent, NgSwitchDefault, FieldAccessorPipe, ReactiveFormsModule, CheckBoxComponent, TextBoxComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1.EditService }, { type: i2.IdService }, { type: i3.ContextService }, { type: undefined, decorators: [{
                     type: Optional

package/esm2022/rendering/footer/footer.component.mjs

@@ -68,7 +68,7 @@ export class FooterComponent {
                 [totalColumns]="totalColumns"
             >
             <td
-                class="k-table-td k-group-cell"
+                class="k-table-td k-group-cell k-table-group-td"
                 role="presentation"
                 *ngFor="let g of groups">
             </td>
@@ -118,7 +118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [totalColumns]="totalColumns"
             >
             <td
-                class="k-table-td k-group-cell"
+                class="k-table-td k-group-cell k-table-group-td"
                 role="presentation"
                 *ngFor="let g of groups">
             </td>

package/esm2022/rendering/header/header.component.mjs

@@ -41,6 +41,7 @@ import { LogicalCellDirective } from '../../navigation/logical-cell.directive';
 import { LogicalRowDirective } from '../../navigation/logical-row.directive';
 import { NgFor, NgIf, NgClass, NgStyle } from '@angular/common';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
+import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
 import * as i0 from "@angular/core";
 import * as i1 from "../../common/single-popup.service";
 import * as i2 from "../../dragdrop/drag-hint.service";
@@ -595,7 +596,7 @@ export class HeaderComponent {
                                 <ng-container *ngIf="!column.headerTemplateRef">
                                     <span class="k-column-title">{{column.displayTitle}}</span>
                                 </ng-container>
-                                <span class="k-sort-icon">
+                                <span [class.k-sort-icon]="sortDescriptor(getColumnComponent(column).field).dir">
                                     <kendo-icon-wrapper
                                         *ngIf="sortDescriptor(getColumnComponent(column).field).dir"
                                         role="note" [attr.aria-label]="sortableLabel"
@@ -625,14 +626,12 @@ export class HeaderComponent {
                     </ng-container>
 
                     <ng-container *ngIf="isCheckboxColumn(column) && !column.headerTemplateRef && $any(column).showSelectAll">
-                        <span class="k-checkbox-wrap">
-                            <input
-                                class="k-checkbox k-checkbox-md k-rounded-md"
-                                [attr.id]="selectAllCheckboxId()"
-                                [attr.aria-label]="selectAllCheckboxLabel"
-                                kendoGridSelectAllCheckbox
-                                kendoGridFocusable>
-                        </span>
+                        <kendo-checkbox
+                            [attr.id]="selectAllCheckboxId()"
+                            [inputAttributes]="{'aria-label': selectAllCheckboxLabel}"
+                            kendoGridSelectAllCheckbox
+                            kendoGridFocusable
+                        ></kendo-checkbox>
                     </ng-container>
                     <span kendoGridColumnHandle
                         kendoDraggable
@@ -713,7 +712,7 @@ export class HeaderComponent {
                 [totalColumns]="totalColumns"
         ></tr>
     </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -822,7 +821,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 <ng-container *ngIf="!column.headerTemplateRef">
                                     <span class="k-column-title">{{column.displayTitle}}</span>
                                 </ng-container>
-                                <span class="k-sort-icon">
+                                <span [class.k-sort-icon]="sortDescriptor(getColumnComponent(column).field).dir">
                                     <kendo-icon-wrapper
                                         *ngIf="sortDescriptor(getColumnComponent(column).field).dir"
                                         role="note" [attr.aria-label]="sortableLabel"
@@ -852,14 +851,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     </ng-container>
 
                     <ng-container *ngIf="isCheckboxColumn(column) && !column.headerTemplateRef && $any(column).showSelectAll">
-                        <span class="k-checkbox-wrap">
-                            <input
-                                class="k-checkbox k-checkbox-md k-rounded-md"
-                                [attr.id]="selectAllCheckboxId()"
-                                [attr.aria-label]="selectAllCheckboxLabel"
-                                kendoGridSelectAllCheckbox
-                                kendoGridFocusable>
-                        </span>
+                        <kendo-checkbox
+                            [attr.id]="selectAllCheckboxId()"
+                            [inputAttributes]="{'aria-label': selectAllCheckboxLabel}"
+                            kendoGridSelectAllCheckbox
+                            kendoGridFocusable
+                        ></kendo-checkbox>
                     </ng-container>
                     <span kendoGridColumnHandle
                         kendoDraggable
@@ -945,7 +942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     imports: [
                         NgFor, LogicalRowDirective, NgIf, LogicalCellDirective, DropTargetDirective, DraggableDirective, DraggableColumnDirective,
                         NgClass, NgStyle, TemplateContextDirective, FilterMenuComponent, ColumnMenuComponent, IconWrapperComponent, SelectAllCheckboxDirective,
-                        FocusableDirective, ColumnHandleDirective, FilterRowComponent
+                        FocusableDirective, ColumnHandleDirective, FilterRowComponent, CheckBoxComponent
                     ]
                 }]
         }], ctorParameters: function () { return [{ type: i1.SinglePopupService }, { type: i2.DragHintService }, { type: i3.DropCueService }, { type: i4.ColumnReorderService }, { type: i5.IdService }, { type: i6.SortService }, { type: i7.ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: i8.ContextService }, { type: i9.NavigationService }, { type: i0.NgZone }]; }, propDecorators: { totalColumnLevels: [{

package/esm2022/rendering/header/header.module.mjs

@@ -126,7 +126,7 @@ export class HeaderModule {
             MonthViewService,
             YearViewService,
             NavigationService
-        ], imports: [i4.GroupHeaderComponent, i5.GroupPanelComponent, i9.StringFilterCellComponent, i10.NumericFilterCellComponent, i11.AutoCompleteFilterCellComponent, i12.BooleanFilterCellComponent, i14.FilterCellWrapperComponent, i15.DateFilterCellComponent, i30.FilterCellOperatorsComponent, i30.FilterCellOperatorsComponent, i50.FilterMenuComponent, i51.FilterMenuContainerComponent, i52.FilterMenuInputWrapperComponent, i53.StringFilterMenuInputComponent, i54.StringFilterMenuComponent, i56.NumericFilterMenuComponent, i57.NumericFilterMenuInputComponent, i58.DateFilterMenuInputComponent, i59.DateFilterMenuComponent, i68.ColumnChooserComponent, i69.ColumnMenuChooserComponent, i70.ColumnMenuFilterComponent, i71.ColumnMenuItemComponent, i73.ColumnMenuSortComponent, i74.ColumnMenuComponent, i75.ColumnMenuLockComponent, i79.ColumnMenuStickComponent, i80.ColumnMenuPositionComponent, i81.ColumnMenuAutoSizeColumnComponent, i82.ColumnMenuAutoSizeAllColumnsComponent, i83.HeaderComponent] });
+        ], imports: [i4.GroupHeaderComponent, i5.GroupPanelComponent, i9.StringFilterCellComponent, i10.NumericFilterCellComponent, i11.AutoCompleteFilterCellComponent, i12.BooleanFilterCellComponent, i14.FilterCellWrapperComponent, i15.DateFilterCellComponent, i30.FilterCellOperatorsComponent, i30.FilterCellOperatorsComponent, i50.FilterMenuComponent, i51.FilterMenuContainerComponent, i52.FilterMenuInputWrapperComponent, i53.StringFilterMenuInputComponent, i54.StringFilterMenuComponent, i56.NumericFilterMenuComponent, i57.NumericFilterMenuInputComponent, i58.DateFilterMenuInputComponent, i59.DateFilterMenuComponent, i61.BooleanFilterMenuComponent, i67.ColumnListComponent, i68.ColumnChooserComponent, i69.ColumnMenuChooserComponent, i70.ColumnMenuFilterComponent, i71.ColumnMenuItemComponent, i73.ColumnMenuSortComponent, i74.ColumnMenuComponent, i75.ColumnMenuLockComponent, i79.ColumnMenuStickComponent, i80.ColumnMenuPositionComponent, i81.ColumnMenuAutoSizeColumnComponent, i82.ColumnMenuAutoSizeAllColumnsComponent, i83.HeaderComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderModule, decorators: [{
             type: NgModule,

package/esm2022/rendering/list.component.mjs

@@ -669,7 +669,7 @@ export class ListComponent {
         }"
         [scope]="this"
         >
-        <div role="presentation" class="k-grid-table-wrap">
+        <div role="presentation">
             <table
                 kendoGridResizableTable
                 [locked]="true"
@@ -718,7 +718,7 @@ export class ListComponent {
         [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
         [lockedWidth]="lockedWidth + 1"
     >
-        <div role="presentation" class="k-grid-table-wrap">
+        <div role="presentation">
             <table
                 [style.width.px]="nonLockedWidth"
                 #table
@@ -792,7 +792,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }"
         [scope]="this"
         >
-        <div role="presentation" class="k-grid-table-wrap">
+        <div role="presentation">
             <table
                 kendoGridResizableTable
                 [locked]="true"
@@ -841,7 +841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
         [lockedWidth]="lockedWidth + 1"
     >
-        <div role="presentation" class="k-grid-table-wrap">
+        <div role="presentation">
             <table
                 [style.width.px]="nonLockedWidth"
                 #table

package/esm2022/rendering/table-body.component.mjs

@@ -453,7 +453,7 @@ export class TableBodyComponent {
                 [logicalSlaveCellsCount]="unlockedColumnsCount()"
                 [totalColumns]="totalColumns">
             <ng-container *ngIf="!skipGroupDecoration">
-                <td class="k-group-cell k-table-td" *ngFor="let g of groups" role="presentation"></td>
+                <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups" role="presentation"></td>
             </ng-container>
             <td class="k-hierarchy-cell k-table-td"
                 *ngIf="detailTemplate?.templateRef"
@@ -530,12 +530,13 @@ export class TableBodyComponent {
             [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-master-row]="true"
+            [class.k-expanded]="isDataItem(item) && isExpanded(item)"
             [class.k-grid-edit-row]="isEditingRow($any(item).index)"
             [attr.aria-selected]="lockedColumnsCount < 1 ? isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item) : undefined"
             [attr.data-kendo-grid-item-index]="$any(item).index"
             [class.k-selected]="isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item)">
             <ng-container *ngIf="!skipGroupDecoration">
-                <td class="k-group-cell k-table-td" *ngFor="let g of groups" role="presentation"></td>
+                <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups" role="presentation"></td>
             </ng-container>
             <td class="k-hierarchy-cell k-table-td"
                 *ngIf="detailTemplate?.templateRef"
@@ -579,7 +580,6 @@ export class TableBodyComponent {
                     [attr.aria-selected]="lockedColumnsCount < 1 && isSelectable({ dataItem: item.data, index: $any(item).index }) ? isAriaSelected(item, column) : undefined"
                     [class.k-grid-content-sticky]="column.sticky"
                     [class.k-touch-action-none]="isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag"
-                    [class.k-touch-action-auto]="!(isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag)"
                 [ngClass]="column.cssClass"
                 [class.k-grid-edit-cell]="isEditingCell($any(item).index, column)"
                 [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
@@ -594,7 +594,6 @@ export class TableBodyComponent {
                 detailTemplate.showIf(item.data, $any(item).index) &&
                 isExpanded(item)"
             class="k-detail-row"
-            [class.k-alt]="isOdd(item)"
             kendoGridLogicalRow
                 [dataRowIndex]="$any(item).index"
                 [dataItem]="item.data"
@@ -602,7 +601,7 @@ export class TableBodyComponent {
                 [logicalSlaveRow]="false"
                 [logicalCellsCount]="1"
             >
-            <td class="k-group-cell k-table-td" *ngFor="let g of groups"></td>
+            <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups"></td>
             <td class="k-hierarchy-cell k-table-td"></td>
             <td class="k-detail-cell k-table-td"
                 [attr.colspan]="columnsSpan"
@@ -637,7 +636,7 @@ export class TableBodyComponent {
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount(item)">
             <ng-container *ngIf="!skipGroupDecoration">
-                <td class="k-group-cell k-table-td" *ngFor="let g of groups"></td>
+                <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups"></td>
             </ng-container>
             <td class="k-hierarchy-cell k-table-td"
                 *ngIf="detailTemplate?.templateRef"
@@ -683,7 +682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [logicalSlaveCellsCount]="unlockedColumnsCount()"
                 [totalColumns]="totalColumns">
             <ng-container *ngIf="!skipGroupDecoration">
-                <td class="k-group-cell k-table-td" *ngFor="let g of groups" role="presentation"></td>
+                <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups" role="presentation"></td>
             </ng-container>
             <td class="k-hierarchy-cell k-table-td"
                 *ngIf="detailTemplate?.templateRef"
@@ -760,12 +759,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-master-row]="true"
+            [class.k-expanded]="isDataItem(item) && isExpanded(item)"
             [class.k-grid-edit-row]="isEditingRow($any(item).index)"
             [attr.aria-selected]="lockedColumnsCount < 1 ? isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item) : undefined"
             [attr.data-kendo-grid-item-index]="$any(item).index"
             [class.k-selected]="isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item)">
             <ng-container *ngIf="!skipGroupDecoration">
-                <td class="k-group-cell k-table-td" *ngFor="let g of groups" role="presentation"></td>
+                <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups" role="presentation"></td>
             </ng-container>
             <td class="k-hierarchy-cell k-table-td"
                 *ngIf="detailTemplate?.templateRef"
@@ -809,7 +809,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [attr.aria-selected]="lockedColumnsCount < 1 && isSelectable({ dataItem: item.data, index: $any(item).index }) ? isAriaSelected(item, column) : undefined"
                     [class.k-grid-content-sticky]="column.sticky"
                     [class.k-touch-action-none]="isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag"
-                    [class.k-touch-action-auto]="!(isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag)"
                 [ngClass]="column.cssClass"
                 [class.k-grid-edit-cell]="isEditingCell($any(item).index, column)"
                 [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
@@ -824,7 +823,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 detailTemplate.showIf(item.data, $any(item).index) &&
                 isExpanded(item)"
             class="k-detail-row"
-            [class.k-alt]="isOdd(item)"
             kendoGridLogicalRow
                 [dataRowIndex]="$any(item).index"
                 [dataItem]="item.data"
@@ -832,7 +830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [logicalSlaveRow]="false"
                 [logicalCellsCount]="1"
             >
-            <td class="k-group-cell k-table-td" *ngFor="let g of groups"></td>
+            <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups"></td>
             <td class="k-hierarchy-cell k-table-td"></td>
             <td class="k-detail-cell k-table-td"
                 [attr.colspan]="columnsSpan"
@@ -867,7 +865,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount(item)">
             <ng-container *ngIf="!skipGroupDecoration">
-                <td class="k-group-cell k-table-td" *ngFor="let g of groups"></td>
+                <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups"></td>
             </ng-container>
             <td class="k-hierarchy-cell k-table-td"
                 *ngIf="detailTemplate?.templateRef"

package/esm2022/selection/selectall-checkbox.directive.mjs

@@ -2,14 +2,16 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive, HostBinding, Renderer2, ElementRef, Input, Output, EventEmitter, NgZone } from '@angular/core';
+import { Directive, Input, Output, EventEmitter, NgZone, Host, Optional } from '@angular/core';
 import { SelectionService } from './selection.service';
 import { isPresent } from '../utils';
 import { hasObservers } from '@progress/kendo-angular-common';
 import { CellSelectionService } from './cell-selection.service';
+import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
 import * as i0 from "@angular/core";
 import * as i1 from "./selection.service";
 import * as i2 from "./cell-selection.service";
+import * as i3 from "@progress/kendo-angular-inputs";
 /**
  * Represents the select-all checkbox feature of the Grid ([see example](slug:grid_selection_persistence#toc-selecting-all-items)).
  *
@@ -27,9 +29,8 @@ import * as i2 from "./cell-selection.service";
 export class SelectAllCheckboxDirective {
     selectionService;
     cellSelectionService;
-    el;
-    renderer;
     ngZone;
+    checkbox;
     /**
      * Explicitly overrides the state of the select-all checkbox.
      */
@@ -39,7 +40,6 @@ export class SelectAllCheckboxDirective {
      * ([see example](slug:grid_row_selection#toc-select-all-checkbox)).
      */
     selectAllChange = new EventEmitter();
-    type = 'checkbox';
     destroyClick;
     stateSet = false;
     ngAfterContentChecked() {
@@ -48,28 +48,27 @@ export class SelectAllCheckboxDirective {
     ngOnChanges() {
         this.stateSet = true;
     }
-    constructor(selectionService, cellSelectionService, el, renderer, ngZone) {
+    constructor(selectionService, cellSelectionService, ngZone, checkbox) {
         this.selectionService = selectionService;
         this.cellSelectionService = cellSelectionService;
-        this.el = el;
-        this.renderer = renderer;
         this.ngZone = ngZone;
+        this.checkbox = checkbox;
         this.ngZone.runOutsideAngular(() => {
-            this.destroyClick = this.renderer.listen(this.el.nativeElement, 'click', this.onClick.bind(this));
+            this.destroyClick = this.checkbox.checkedStateChange.subscribe(this.onClick.bind(this));
         });
     }
     ngOnDestroy() {
         if (this.destroyClick) {
-            this.destroyClick();
+            this.destroyClick.unsubscribe();
         }
     }
     /**
      * @hidden
      */
     onClick() {
-        const uncheckedState = this.el.nativeElement.indeterminate ? 'indeterminate' : 'unchecked';
-        const checkboxState = this.el.nativeElement.checked ? 'checked' : uncheckedState;
-        const isChecked = this.selectionService.hasNonSelectable ? !this.selectionService.selectAllChecked : this.el.nativeElement.checked;
+        const uncheckedState = this.checkbox.checkedState === 'indeterminate' ? 'indeterminate' : 'unchecked';
+        const checkboxState = this.checkbox.checkedState ? 'checked' : uncheckedState;
+        const isChecked = this.selectionService.hasNonSelectable ? !this.selectionService.selectAllChecked : this.checkbox.checkedState === true;
         const options = this.selectionService.options;
         const enabledAndMultiple = options.enabled && options.mode === 'multiple' && !this.cellSelectionService.active;
         const shouldEmitSelectAll = hasObservers(this.selectAllChange);
@@ -89,9 +88,7 @@ export class SelectAllCheckboxDirective {
      */
     setState() {
         const state = this.stateSet ? this.stateToBool() : this.selectionService.selectAllState;
-        const elem = this.el.nativeElement;
-        this.renderer.setProperty(elem, 'indeterminate', !isPresent(state));
-        this.renderer.setProperty(elem, 'checked', isPresent(state) ? state : false);
+        this.checkbox.checkedState = isPresent(state) ? state : 'indeterminate';
     }
     /**
      * @hidden
@@ -106,8 +103,8 @@ export class SelectAllCheckboxDirective {
                 return undefined;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllCheckboxDirective, deps: [{ token: i1.SelectionService }, { token: i2.CellSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectAllCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectAllCheckbox]", inputs: { state: "state" }, outputs: { selectAllChange: "selectAllChange" }, host: { properties: { "attr.type": "this.type" } }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllCheckboxDirective, deps: [{ token: i1.SelectionService }, { token: i2.CellSelectionService }, { token: i0.NgZone }, { token: i3.CheckBoxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectAllCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectAllCheckbox]", inputs: { state: "state" }, outputs: { selectAllChange: "selectAllChange" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllCheckboxDirective, decorators: [{
             type: Directive,
@@ -115,11 +112,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridSelectAllCheckbox]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.SelectionService }, { type: i2.CellSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { state: [{
+        }], ctorParameters: function () { return [{ type: i1.SelectionService }, { type: i2.CellSelectionService }, { type: i0.NgZone }, { type: i3.CheckBoxComponent, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }]; }, propDecorators: { state: [{
                 type: Input
             }], selectAllChange: [{
                 type: Output
-            }], type: [{
-                type: HostBinding,
-                args: ['attr.type']
             }] } });