@progress/kendo-angular-treelist 11.0.0-develop.81 → 11.0.0-develop.82

package/esm2020/pager/pager-numeric-buttons.component.mjs

@@ -9,7 +9,8 @@ import { PagerElementComponent } from './pager-element.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./pager-context.service";
-import * as i3 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-buttons";
+import * as i4 from "@angular/common";
 /**
  * Displays numeric buttons to enable navigation between the pages.
  */
@@ -88,11 +89,12 @@ export class PagerNumericButtonsComponent extends PagerElementComponent {
 }
 PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
 PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerNumericButtonsComponent, selector: "kendo-treelist-pager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, host: { properties: { "class.k-pager-numbers-wrap": "this.numbersWrapClass" } }, usesInheritance: true, ngImport: i0, template: `
-       <select
-            class="k-dropdown"
+        <select
+            class="k-dropdown-list k-dropdown k-picker k-picker-md k-rounded-md k-pager-nav"
+            [attr.title]="textFor('selectPage')"
+            [attr.aria-label]="textFor('selectPage')"
             (change)="onSelectChange($event)">
             <option *ngIf="start > 1"
-                class="k-link"
                 value="previousButtons"
                 [selected]="false"
                 [attr.aria-label]="pageLabel(start - 1)">...
@@ -102,53 +104,67 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 [selected]="num === currentPage"
                 [attr.aria-label]="pageLabel(num)"
                 [attr.aria-current]="currentPage === num ? 'page' : undefined"
-                [ngClass]="{'k-link': true, 'k-selected':currentPage === num}">
+                [ngClass]="{'k-selected':currentPage === num}">
                 {{num}}
             </option>
             <option *ngIf="end < totalPages"
                 value="nextButtons"
-                class="k-link"
                 [selected]="false"
                 [attr.aria-label]="pageLabel(end + 1)">...
             </option>
         </select>
-        <ul [ngClass]="{'k-pager-numbers': true, 'k-reset': true}">
-            <li *ngIf="start > 1">
-                <a  class="k-link"
-                    [attr.aria-label]="pageLabel(start - 1)"
-                    href="#"
-                    tabindex="-1"
-                    (click)="changePage(start - 2)">...</a>
-            </li>
-            <li *ngFor="let num of buttons">
-                <a  href="#"
-                    [attr.aria-label]="pageLabel(num)"
-                    tabindex="-1"
-                    [ngClass]="{'k-link': true, 'k-selected':currentPage === num}"
-                    (click)="changePage(num - 1)">
-                    {{num}}
-                </a>
-            </li>
-            <li *ngIf="end < totalPages">
-                <a  class="k-link"
-                    [attr.aria-label]="pageLabel(end + 1)"
-                    href="#"
-                    tabindex="-1"
-                    (click)="changePage(end)">...</a>
-            </li>
-        </ul>
-    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        <div class="k-pager-numbers">
+            <button *ngIf="start > 1"
+                type="button"
+                [tabIndex]="-1"
+                kendoButton
+                fillMode="flat"
+                themeColor="primary"
+                class="k-pager-nav"
+                rounded="none"
+                [attr.aria-label]="pageLabel(start - 1)"
+                [attr.title]="pageLabel(start - 1)"
+                (click)="changePage(start - 2)">...</button>
+            <button *ngFor="let num of buttons"
+                type="button"
+                [tabIndex]="-1"
+                kendoButton
+                fillMode="flat"
+                themeColor="primary"
+                class="k-pager-nav"
+                rounded="none"
+                [attr.aria-label]="pageLabel(num)"
+                [attr.title]="pageLabel(num)"
+                [attr.aria-current]="currentPage === num ? 'page' : undefined"
+                [selected]="currentPage === num"
+                (click)="changePage(num - 1)">
+                {{num}}
+            </button>
+            <button *ngIf="end < totalPages"
+                type="button"
+                [tabIndex]="-1"
+                kendoButton
+                class="k-pager-nav"
+                fillMode="flat"
+                themeColor="primary"
+                rounded="none"
+                [attr.aria-label]="pageLabel(end + 1)"
+                [attr.title]="pageLabel(end + 1)"
+                (click)="changePage(end)">...</button>
+        </div>
+    `, isInline: true, components: [{ type: i3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-treelist-pager-numeric-buttons',
                     template: `
-       <select
-            class="k-dropdown"
+        <select
+            class="k-dropdown-list k-dropdown k-picker k-picker-md k-rounded-md k-pager-nav"
+            [attr.title]="textFor('selectPage')"
+            [attr.aria-label]="textFor('selectPage')"
             (change)="onSelectChange($event)">
             <option *ngIf="start > 1"
-                class="k-link"
                 value="previousButtons"
                 [selected]="false"
                 [attr.aria-label]="pageLabel(start - 1)">...
@@ -158,41 +174,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [selected]="num === currentPage"
                 [attr.aria-label]="pageLabel(num)"
                 [attr.aria-current]="currentPage === num ? 'page' : undefined"
-                [ngClass]="{'k-link': true, 'k-selected':currentPage === num}">
+                [ngClass]="{'k-selected':currentPage === num}">
                 {{num}}
             </option>
             <option *ngIf="end < totalPages"
                 value="nextButtons"
-                class="k-link"
                 [selected]="false"
                 [attr.aria-label]="pageLabel(end + 1)">...
             </option>
         </select>
-        <ul [ngClass]="{'k-pager-numbers': true, 'k-reset': true}">
-            <li *ngIf="start > 1">
-                <a  class="k-link"
-                    [attr.aria-label]="pageLabel(start - 1)"
-                    href="#"
-                    tabindex="-1"
-                    (click)="changePage(start - 2)">...</a>
-            </li>
-            <li *ngFor="let num of buttons">
-                <a  href="#"
-                    [attr.aria-label]="pageLabel(num)"
-                    tabindex="-1"
-                    [ngClass]="{'k-link': true, 'k-selected':currentPage === num}"
-                    (click)="changePage(num - 1)">
-                    {{num}}
-                </a>
-            </li>
-            <li *ngIf="end < totalPages">
-                <a  class="k-link"
-                    [attr.aria-label]="pageLabel(end + 1)"
-                    href="#"
-                    tabindex="-1"
-                    (click)="changePage(end)">...</a>
-            </li>
-        </ul>
+        <div class="k-pager-numbers">
+            <button *ngIf="start > 1"
+                type="button"
+                [tabIndex]="-1"
+                kendoButton
+                fillMode="flat"
+                themeColor="primary"
+                class="k-pager-nav"
+                rounded="none"
+                [attr.aria-label]="pageLabel(start - 1)"
+                [attr.title]="pageLabel(start - 1)"
+                (click)="changePage(start - 2)">...</button>
+            <button *ngFor="let num of buttons"
+                type="button"
+                [tabIndex]="-1"
+                kendoButton
+                fillMode="flat"
+                themeColor="primary"
+                class="k-pager-nav"
+                rounded="none"
+                [attr.aria-label]="pageLabel(num)"
+                [attr.title]="pageLabel(num)"
+                [attr.aria-current]="currentPage === num ? 'page' : undefined"
+                [selected]="currentPage === num"
+                (click)="changePage(num - 1)">
+                {{num}}
+            </button>
+            <button *ngIf="end < totalPages"
+                type="button"
+                [tabIndex]="-1"
+                kendoButton
+                class="k-pager-nav"
+                fillMode="flat"
+                themeColor="primary"
+                rounded="none"
+                [attr.aria-label]="pageLabel(end + 1)"
+                [attr.title]="pageLabel(end + 1)"
+                (click)="changePage(end)">...</button>
+        </div>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }]; }, propDecorators: { numbersWrapClass: [{

package/esm2020/pager/pager-page-sizes.component.mjs

@@ -93,6 +93,7 @@ PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerPageSizesComponent, selector: "kendo-treelist-pager-page-sizes", inputs: { pageSizes: "pageSizes" }, host: { properties: { "class.k-pager-sizes": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-dropdownlist
             #dropdownlist
+            class="k-dropdown"
             [data]="pageSizes"
             textField="text"
             valueField="value"
@@ -109,6 +110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     template: `
         <kendo-dropdownlist
             #dropdownlist
+            class="k-dropdown"
             [data]="pageSizes"
             textField="text"
             valueField="value"

package/esm2020/pager/pager-prev-buttons.component.mjs

@@ -10,7 +10,7 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./pager-context.service";
-import * as i3 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-buttons";
 /**
  * Displays buttons for navigating to the first and to the previous page ([see example]({% slug paging_treelist %}#toc-pager-templates)).
  */
@@ -37,81 +37,67 @@ export class PagerPrevButtonsComponent extends PagerElementComponent {
 }
 PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerPrevButtonsComponent, selector: "kendo-treelist-pager-prev-buttons", usesInheritance: true, ngImport: i0, template: `
-        <a  href="#"
-            tabindex="-1"
+        <button
+            [tabIndex]="-1"
+            kendoButton
+            type="button"
             [title]="textFor('pagerFirstPage')"
+            [attr.aria-label]="textFor('pagerFirstPage')"
             (click)="currentPage !== 1 ? changePage(0) : false"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                'k-pager-first': true
-            }">
-            <span [attr.aria-label]="textFor('pagerFirstPage')"
-                [ngClass]="{
-                    'k-icon':true,
-                    'k-i-caret-alt-to-left': true
-                }">
-            </span>
-        </a>
-        <a  href="#"
-            tabindex="-1"
+            role="button"
+            icon="caret-alt-to-left"
+            class="k-pager-nav k-pager-first"
+            [disabled]="disabled"
+            fillMode="flat"
+            rounded="none">
+        </button>
+        <button
+            kendoButton
+            [tabIndex]="-1"
+            type="button"
+            class="k-pager-nav"
+            [disabled]="disabled"
+            icon="caret-alt-left"
+            fillMode="flat"
+            rounded="none"
             [title]="textFor('pagerPreviousPage')"
-            (click)="currentPage !== 1 ? changePage(currentPage-2) : false"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                '': true
-            }">
-            <span [attr.aria-label]="textFor('pagerPreviousPage')"
-                [ngClass]="{
-                    'k-icon':true,
-                    'k-i-caret-alt-left': true
-                }">
-            </span>
-        </a>
-    `, isInline: true, directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            [attr.aria-label]="textFor('pagerPreviousPage')"
+            (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
+        </button>
+    `, isInline: true, components: [{ type: i3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-treelist-pager-prev-buttons',
                     template: `
-        <a  href="#"
-            tabindex="-1"
+        <button
+            [tabIndex]="-1"
+            kendoButton
+            type="button"
             [title]="textFor('pagerFirstPage')"
+            [attr.aria-label]="textFor('pagerFirstPage')"
             (click)="currentPage !== 1 ? changePage(0) : false"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                'k-pager-first': true
-            }">
-            <span [attr.aria-label]="textFor('pagerFirstPage')"
-                [ngClass]="{
-                    'k-icon':true,
-                    'k-i-caret-alt-to-left': true
-                }">
-            </span>
-        </a>
-        <a  href="#"
-            tabindex="-1"
+            role="button"
+            icon="caret-alt-to-left"
+            class="k-pager-nav k-pager-first"
+            [disabled]="disabled"
+            fillMode="flat"
+            rounded="none">
+        </button>
+        <button
+            kendoButton
+            [tabIndex]="-1"
+            type="button"
+            class="k-pager-nav"
+            [disabled]="disabled"
+            icon="caret-alt-left"
+            fillMode="flat"
+            rounded="none"
             [title]="textFor('pagerPreviousPage')"
-            (click)="currentPage !== 1 ? changePage(currentPage-2) : false"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                '': true
-            }">
-            <span [attr.aria-label]="textFor('pagerPreviousPage')"
-                [ngClass]="{
-                    'k-icon':true,
-                    'k-i-caret-alt-left': true
-                }">
-            </span>
-        </a>
+            [attr.aria-label]="textFor('pagerPreviousPage')"
+            (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
+        </button>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PagerContextService }, { type: i0.ChangeDetectorRef }]; } });

package/esm2020/pager/pager.component.mjs

@@ -33,7 +33,8 @@ export class PagerComponent {
         this.pageChange = new EventEmitter();
         this.pagerWrapClass = true;
         this.gridPagerClass = true;
-        this.widgetClass = true;
+        this.pagerClass = true;
+        this.pagerSizingClass = true;
         this.settings = normalize({});
         this.subscriptions = new Subscription();
         this._templateContext = {};
@@ -44,12 +45,12 @@ export class PagerComponent {
             }
             const width = element.offsetWidth;
             if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
-                this.renderer.removeClass(element, 'k-pager-md');
-                this.renderer.addClass(element, 'k-pager-sm');
+                this.renderer.removeClass(element, 'k-pager-mobile-md');
+                this.renderer.addClass(element, 'k-pager-mobile-sm');
             }
             else if (width >= RESPONSIVE_BREAKPOINT_MEDIUM && width < RESPONSIVE_BREAKPOINT_LARGE) {
-                this.renderer.addClass(element, 'k-pager-md');
-                this.renderer.removeClass(element, 'k-pager-sm');
+                this.renderer.addClass(element, 'k-pager-mobile-md');
+                this.renderer.removeClass(element, 'k-pager-mobile-sm');
             }
             else {
                 this.clearResponsiveClasses();
@@ -107,12 +108,12 @@ export class PagerComponent {
     }
     clearResponsiveClasses() {
         const element = this.element.nativeElement;
-        this.renderer.removeClass(element, 'k-pager-sm');
-        this.renderer.removeClass(element, 'k-pager-md');
+        this.renderer.removeClass(element, 'k-pager-mobile-sm');
+        this.renderer.removeClass(element, 'k-pager-mobile-md');
     }
 }
 PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerComponent, deps: [{ token: i1.PagerContextService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerComponent, selector: "kendo-treelist-pager", inputs: { allCount: "allCount", total: "total", skip: "skip", pageSize: "pageSize", options: "options", template: "template" }, outputs: { pageChange: "pageChange" }, host: { properties: { "class.k-pager-wrap": "this.pagerWrapClass", "class.k-grid-pager": "this.gridPagerClass", "class.k-widget": "this.widgetClass" } }, usesOnChanges: true, ngImport: i0, template: `
+PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerComponent, selector: "kendo-treelist-pager", inputs: { allCount: "allCount", total: "total", skip: "skip", pageSize: "pageSize", options: "options", template: "template" }, outputs: { pageChange: "pageChange" }, host: { properties: { "class.k-pager-wrap": "this.pagerWrapClass", "class.k-grid-pager": "this.gridPagerClass", "class.k-pager": "this.pagerClass", "class.k-pager-md": "this.pagerSizingClass" } }, usesOnChanges: true, ngImport: i0, template: `
         <ng-container
             *ngIf="template?.templateRef"
             [ngTemplateOutlet]="template.templateRef"
@@ -175,7 +176,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], gridPagerClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-pager']
-            }], widgetClass: [{
+            }], pagerClass: [{
                 type: HostBinding,
-                args: ['class.k-widget']
+                args: ['class.k-pager']
+            }], pagerSizingClass: [{
+                type: HostBinding,
+                args: ['class.k-pager-md']
             }] } });

package/esm2020/pager/pager.module.mjs

@@ -18,11 +18,13 @@ import { EventsModule } from '@progress/kendo-angular-common';
 import { ResizeSensorModule } from '@progress/kendo-angular-common';
 import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
 import { LabelModule } from '@progress/kendo-angular-label';
+import { ButtonModule } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 const importedModules = [
     CommonModule,
     InputsModule,
     LabelModule,
+    ButtonModule,
     DropDownsModule,
     ResizeSensorModule,
     SharedModule,
@@ -66,6 +68,7 @@ PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         PagerTemplateDirective], imports: [CommonModule,
         InputsModule,
         LabelModule,
+        ButtonModule,
         DropDownsModule,
         ResizeSensorModule,
         SharedModule,

package/esm2020/pdf/export-element.mjs

@@ -37,7 +37,7 @@ const wrapTable = (table) => {
         return;
     }
     const wrapper = document.createElement('div');
-    wrapper.className = 'k-widget k-grid';
+    wrapper.className = 'k-grid';
     wrapper.appendChild(table);
     return wrapper;
 };

package/esm2020/rendering/constants.mjs

@@ -21,4 +21,4 @@ export const ICON_CLASS = 'k-icon';
 /**
  * @hidden
  */
-export const IGNORE_CONTAINER_CLASSES = 'k-widget k-treelist-ignore-click';
+export const IGNORE_CONTAINER_CLASSES = 'k-treelist-ignore-click';

package/esm2020/rendering/header/header.component.mjs

@@ -84,6 +84,7 @@ export class HeaderComponent {
         this.columnMenu = false;
         this.totalColumnsCount = 0;
         this.sortedFields = {};
+        this.hostClass = true;
         this.dropTargets = new QueryList();
         this.subscription = new Subscription();
     }
@@ -358,7 +359,7 @@ export class HeaderComponent {
     }
 }
 HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HeaderComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.DragHintService }, { token: i3.DropCueService }, { token: i4.ColumnReorderService }, { token: i5.SortService }, { token: i6.SelectionService }, { token: i7.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: HeaderComponent, selector: "[kendoTreeListHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount" }, host: { properties: { "class.k-grid-header": "this.headerClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: HeaderComponent, selector: "[kendoTreeListHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount" }, host: { properties: { "class.k-grid-header": "this.headerClass", "class.k-table-thead": "this.hostClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <tr *ngFor="let i of columnLevels; let levelIndex = index"
             kendoTreeListLogicalRow
                 [logicalRowIndex]="levelIndex"
@@ -387,7 +388,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                         hint: column.title || getColumnComponent(column).field,
                         lastColumn: last && columnIndex === 0
                     }"
-                    class="k-header"
+                    class="k-header k-table-th"
                     [class.k-filterable]="(showFilterMenu && isFilterable(getColumnComponent(column))) || showColumnMenu(column)"
                     [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
                     [ngClass]="column.headerClass"
@@ -421,7 +422,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                     </ng-template>
                     <ng-template [ngIf]="isSortable(getColumnComponent(column))">
                         <span class="k-cell-inner">
-                            <a #link href="#" tabindex="-1" class="k-link" (click)="sortColumn(getColumnComponent(column), $event, link)">  
+                            <span #link tabindex="-1" class="k-link" (click)="sortColumn(getColumnComponent(column), $event, link)">  
                                 <ng-template
                                     [templateContext]="{
                                         templateRef: column.headerTemplateRef,
@@ -433,9 +434,11 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                                 <ng-container *ngIf="!column.headerTemplateRef">
                                     <span class="k-column-title">{{column.displayTitle}}</span>
                                 </ng-container>
-                                <span [attr.aria-label]="sortableLabel" [ngClass]="sortIcon(getColumnComponent(column).field)"></span>
+                                <span class="k-sort-icon">
+                                    <span role="note" [attr.aria-label]="sortableLabel" [ngClass]="sortIcon(getColumnComponent(column).field)"></span>
+                                </span>
                                 <span *ngIf="showSortNumbering(getColumnComponent(column))" class="k-sort-order">{{sortOrder(getColumnComponent(column).field)}}</span>
-                            </a>
+                            </span>
                             <span role="status"
                                 class="k-sort-status"
                                 [style]="'position: absolute; left: -10000px;'"
@@ -488,7 +491,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                         hint: column.title,
                         lastColumn: last && columnIndex === 0
                     }"
-                    class="k-header"
+                    class="k-header k-table-th"
                     [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
                     [class.k-filterable]="showColumnMenu(column)"
                     [ngClass]="column.headerClass"
@@ -566,7 +569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         hint: column.title || getColumnComponent(column).field,
                         lastColumn: last && columnIndex === 0
                     }"
-                    class="k-header"
+                    class="k-header k-table-th"
                     [class.k-filterable]="(showFilterMenu && isFilterable(getColumnComponent(column))) || showColumnMenu(column)"
                     [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
                     [ngClass]="column.headerClass"
@@ -600,7 +603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     </ng-template>
                     <ng-template [ngIf]="isSortable(getColumnComponent(column))">
                         <span class="k-cell-inner">
-                            <a #link href="#" tabindex="-1" class="k-link" (click)="sortColumn(getColumnComponent(column), $event, link)">  
+                            <span #link tabindex="-1" class="k-link" (click)="sortColumn(getColumnComponent(column), $event, link)">  
                                 <ng-template
                                     [templateContext]="{
                                         templateRef: column.headerTemplateRef,
@@ -612,9 +615,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                                 <ng-container *ngIf="!column.headerTemplateRef">
                                     <span class="k-column-title">{{column.displayTitle}}</span>
                                 </ng-container>
-                                <span [attr.aria-label]="sortableLabel" [ngClass]="sortIcon(getColumnComponent(column).field)"></span>
+                                <span class="k-sort-icon">
+                                    <span role="note" [attr.aria-label]="sortableLabel" [ngClass]="sortIcon(getColumnComponent(column).field)"></span>
+                                </span>
                                 <span *ngIf="showSortNumbering(getColumnComponent(column))" class="k-sort-order">{{sortOrder(getColumnComponent(column).field)}}</span>
-                            </a>
+                            </span>
                             <span role="status"
                                 class="k-sort-status"
                                 [style]="'position: absolute; left: -10000px;'"
@@ -667,7 +672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         hint: column.title,
                         lastColumn: last && columnIndex === 0
                     }"
-                    class="k-header"
+                    class="k-header k-table-th"
                     [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
                     [class.k-filterable]="showColumnMenu(column)"
                     [ngClass]="column.headerClass"
@@ -742,6 +747,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], headerClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-header']
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-table-thead']
             }], dropTargets: [{
                 type: ViewChildren,
                 args: [DropTargetDirective]