@progress/kendo-angular-grid 6.1.3 → 7.0.0-next.202203311511

package/dist/es2015/rendering/header/header.component.js

@@ -1,721 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
-import { ColumnInfoService } from './../../common/column-info.service';
-import { Component, ChangeDetectorRef, HostBinding, Input, QueryList, ViewChildren, TemplateRef } from '@angular/core';
-import { Subscription, of, merge } from "rxjs";
-import { filter, map, switchMap, tap, takeUntil } from 'rxjs/operators';
-import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { isColumnComponent } from '../../columns/column.component';
-import { isColumnGroupComponent } from '../../columns/column-group.component';
-import { isCheckboxColumn } from '../../columns/column-base';
-import { DetailTemplateDirective } from '../details/detail-template.directive';
-import { normalize } from '../../columns/sort-settings';
-import { and, isNullOrEmptyString, isPresent, isTruthy, not, observe } from '../../utils';
-import { columnsToRender, sortColumns, isInSpanColumn } from "../../columns/column-common";
-import { SinglePopupService } from '../../common/single-popup.service';
-import { hasFilterMenu, hasFilterRow } from '../../filtering/filterable';
-import { IdService } from '../../common/id.service';
-import { Keys } from '@progress/kendo-angular-common';
-import { DropTargetDirective } from '../../dragdrop/drop-target.directive';
-import { DragHintService } from '../../dragdrop/drag-hint.service';
-import { DropCueService } from '../../dragdrop/drop-cue.service';
-import { ColumnReorderService } from '../../dragdrop/column-reorder.service';
-import { position, isTargetBefore, offset } from '../../dragdrop/common';
-import { SortService } from '../../common/sort.service';
-import { hasItems } from '../../column-menu/utils';
-import { closestInScope, isFocusable } from '../common/dom-queries';
-import { FilterMenuComponent } from '../../filtering/menu/filter-menu.component';
-import { ColumnMenuComponent } from '../../column-menu/column-menu.component';
-const mergeObjects = (...args) => Object.assign.apply(null, [{}].concat(args));
-const ɵ0 = mergeObjects;
-const directions = initialDirection => initialDirection === "asc" ? ["asc", "desc"] : ["desc", "asc"];
-const ɵ1 = directions;
-/**
- * @hidden
- */
-const isRootLevel = ({ parent }) => !isTruthy(parent);
-const ɵ2 = isRootLevel;
-const ofColumnType = ({ draggable }) => ['column', 'columnGroup']
-    .indexOf(draggable.context.type) >= 0;
-const ɵ3 = ofColumnType;
-const notSameElement = ({ draggable, target }) => draggable.element.nativeElement !== target.element.nativeElement;
-const ɵ4 = notSameElement;
-const inSameParent = (x, y) => x.parent === y.parent ||
-    (isInSpanColumn(y) && inSameParent(x, y.parent));
-const ɵ5 = inSameParent;
-const sameParent = ({ draggable, target }) => inSameParent(draggable.context.column, target.context.column);
-const ɵ6 = sameParent;
-const lastNonLocked = ({ draggable }) => !isTruthy(draggable.context.column.locked) &&
-    isRootLevel(draggable.context.column) &&
-    draggable.context.lastColumn;
-const ɵ7 = lastNonLocked;
-const notInSpanColumn = ({ draggable }) => !isInSpanColumn(draggable.context.column);
-const ɵ8 = notInSpanColumn;
-const reorderable = ({ draggable }) => draggable.context.column.reorderable;
-const ɵ9 = reorderable;
-const lockable = ({ draggable, target }) => draggable.context.column.lockable !== false ||
-    draggable.context.column.isLocked === target.context.column.isLocked;
-const ɵ10 = lockable;
-const rules = and(ofColumnType, reorderable, notInSpanColumn, notSameElement, sameParent, not(lastNonLocked), lockable);
-const modifierKeys = ['alt', 'ctrl', 'shift', 'meta'];
-/**
- * @hidden
- */
-let HeaderComponent = class HeaderComponent {
-    constructor(popupService, hint, cue, reorderService, idService, sortService, localization, columnInfoService, cd) {
-        this.popupService = popupService;
-        this.hint = hint;
-        this.cue = cue;
-        this.reorderService = reorderService;
-        this.idService = idService;
-        this.sortService = sortService;
-        this.localization = localization;
-        this.columnInfoService = columnInfoService;
-        this.cd = cd;
-        this.columns = [];
-        this.groups = [];
-        this.sort = new Array();
-        this.sortable = false;
-        this.groupable = false;
-        this.lockedColumnsCount = 0;
-        this.resizable = false;
-        this.reorderable = false;
-        this.columnMenu = false;
-        this.totalColumnsCount = 0;
-        this.sortedFields = {};
-        this.dropTargets = new QueryList();
-        this.subscription = new Subscription();
-    }
-    get headerClass() {
-        return !this.scrollable;
-    }
-    get sortableLabel() {
-        return this.localization.get('sortable');
-    }
-    // Number of unlocked columns in the next table, if any
-    get unlockedColumnsCount() {
-        return this.totalColumnsCount - this.lockedColumnsCount - this.columns.length;
-    }
-    sortColumn(descriptor) {
-        this.sortService.sort(descriptor);
-    }
-    onSortClick(column, event, link) {
-        const target = event.target;
-        if (column.headerTemplateRef && target !== link) {
-            const hasFocusableParent = Boolean(closestInScope(target, isFocusable, link));
-            if (hasFocusableParent) {
-                // Do not sort when clicking focusable template elements.
-                return;
-            }
-        }
-        const modifier = this.matchModifier(event);
-        const toggledColumn = this.toggleSort(column, modifier);
-        this.sortColumn(toggledColumn);
-    }
-    onHeaderKeydown(column, args) {
-        if (args.keyCode === Keys.ArrowDown && args.altKey && this.showFilterMenu) {
-            args.preventDefault();
-            args.stopImmediatePropagation();
-            const filterMenu = this.filterMenus.find(fm => fm.column === column);
-            filterMenu.toggle(filterMenu.anchor.nativeElement, filterMenu.template);
-        }
-        if (args.keyCode === Keys.ArrowDown && args.altKey && this.showColumnMenu(column)) {
-            args.preventDefault();
-            args.stopImmediatePropagation();
-            const columnMenu = this.columnMenus.find(cm => cm.column === column);
-            columnMenu.toggle(null, columnMenu.anchor.nativeElement, columnMenu.template);
-        }
-        if (!this.sortable || args.defaultPrevented || column.sortable === false) {
-            return;
-        }
-        if (args.keyCode === Keys.Enter && isPresent(column.field)) {
-            const modifier = this.matchModifier(args);
-            this.sortService.sort(this.toggleSort(column, modifier));
-        }
-    }
-    showSortNumbering(column) {
-        const { showIndexes } = normalize(this.sortable);
-        return showIndexes
-            && this.sort
-            && this.sort.filter(({ dir }) => isPresent(dir)).length > 1
-            && this.sortOrder(column.field) > 0;
-    }
-    sortOrder(field) {
-        return this.sort
-            .filter(({ dir }) => isPresent(dir))
-            .findIndex(x => x.field === field)
-            + 1;
-    }
-    sortIcon(field) {
-        const state = this.sortDescriptor(field);
-        return {
-            'k-icon': isPresent(state.dir),
-            'k-i-sort-desc-sm': state.dir === "desc",
-            'k-i-sort-asc-sm': state.dir === "asc"
-        };
-    }
-    sortState(column) {
-        if (!this.isSortable(column)) {
-            return;
-        }
-        const state = this.sortDescriptor(column.field);
-        if (state.dir === 'asc') {
-            return 'ascending';
-        }
-        if (state.dir === 'desc') {
-            return 'descending';
-        }
-    }
-    sortStatus(column) {
-        if (!this.sortedFields[column.field] || !this.isSortable(column)) {
-            return;
-        }
-        let msg = 'sortedDefault';
-        const state = this.sortDescriptor(column.field);
-        if (state.dir === 'asc') {
-            msg = 'sortedAscending';
-        }
-        else if (state.dir === 'desc') {
-            msg = 'sortedDescending';
-        }
-        return this.localization.get(msg);
-    }
-    /**
-     *
-     * @param column
-     * @param modifier - Indicates whether the client-defined `multiSortKey` modifier is met. Defaults to `true`.
-     * @returns - SortDescriptor[]
-     */
-    toggleSort(column, modifier = true) {
-        const { allowUnsort, mode, initialDirection } = normalize(this.sortable, column.sortable);
-        const descriptor = this.toggleDirection(column.field, allowUnsort, initialDirection);
-        if (mode === 'single' || !modifier) {
-            return [descriptor];
-        }
-        return [...this.sort.filter(desc => desc.field !== column.field), descriptor];
-    }
-    /**
-     *
-     * Determines whether the modifier key (if any) passed
-     * with a click/keyboard event matches the user-defined multiSortKey.
-     */
-    matchModifier(event) {
-        const { multiSortKey } = normalize(this.sortable);
-        if (multiSortKey === 'none') {
-            return modifierKeys.every(key => !event[`${key}Key`]);
-        }
-        return multiSortKey === 'ctrl'
-            ? event.ctrlKey || event.metaKey
-            : event[`${multiSortKey}Key`];
-    }
-    ngAfterViewInit() {
-        this.subscription.add(observe(this.dropTargets)
-            .subscribe(this.attachTargets.bind(this)));
-    }
-    ngDoCheck() {
-        this._leafColumns = columnsToRender(this.columns || []).filter(x => !isColumnGroupComponent(x));
-    }
-    ngOnChanges(changes) {
-        const sortChange = changes.sort;
-        if (sortChange && !sortChange.isFirstChange()) {
-            sortChange.currentValue.forEach(change => {
-                this.sortedFields[change.field] = true;
-            });
-        }
-    }
-    ngOnInit() {
-        this.subscription.add(this.localization.changes
-            .subscribe(() => this.cd.markForCheck()));
-    }
-    ngOnDestroy() {
-        if (this.targetSubscription) {
-            this.targetSubscription.unsubscribe();
-        }
-        if (this.popupService) {
-            this.popupService.destroy();
-        }
-        this.subscription.unsubscribe();
-    }
-    selectAllCheckboxId() {
-        return this.idService.selectAllCheckboxId();
-    }
-    get selectAllCheckboxLabel() {
-        return this.localization.get('selectAllCheckboxLabel');
-    }
-    isFirstOnRow(column, index) {
-        const isTailing = (c) => c &&
-            (this.columnsForLevel(c.level).indexOf(c) > 0 || isTailing(c.parent));
-        return index === 0 && !this.groups.length && !this.detailTemplate && isTailing(column.parent);
-    }
-    logicalColumnIndex(column) {
-        const index = column.leafIndex;
-        if (isPresent(index)) {
-            return index + (isPresent(this.detailTemplate) ? 1 : 0);
-        }
-        return -1;
-    }
-    get showFilterMenu() {
-        return !this.columnMenu && hasFilterMenu(this.filterable);
-    }
-    get showFilterRow() {
-        return hasFilterRow(this.filterable);
-    }
-    showColumnMenu(column) {
-        return this.columnMenu && column.columnMenu &&
-            (this.columnMenuTemplate || column.columnMenuTemplates.length || hasItems(this.columnMenu, column));
-    }
-    isFilterable(column) {
-        return !isNullOrEmptyString(column.field) && column.filterable === true;
-    }
-    canDrop(draggable, target) {
-        return this.reorderable && rules({ draggable, target });
-    }
-    shouldActivate(column) {
-        const canReorder = this.reorderable && column.reorderable;
-        if (!canReorder && !isColumnComponent(column)) {
-            return false;
-        }
-        const groupable = this.groupable && isColumnComponent(column) && column.groupable !== false;
-        return groupable || canReorder;
-    }
-    isSortable(column) {
-        return !isNullOrEmptyString(column.field)
-            && isTruthy(this.sortable) && isTruthy(column.sortable);
-    }
-    isCheckboxColumn(column) {
-        return isCheckboxColumn(column) && !column.templateRef;
-    }
-    trackByIndex(index, _item) {
-        return index;
-    }
-    addStickyStyles(column) {
-        const stickyStyles = this.columnInfoService.stickyColumnsStyles(column);
-        return Object.assign({}, column.style, stickyStyles);
-    }
-    toggleDirection(field, allowUnsort, initialDirection) {
-        const descriptor = this.sortDescriptor(field);
-        const [first, second] = directions(initialDirection);
-        let dir = first;
-        if (descriptor.dir === first) {
-            dir = second;
-        }
-        else if (descriptor.dir === second && allowUnsort) {
-            dir = undefined;
-        }
-        return { dir, field };
-    }
-    columnsForLevel(level) {
-        const columns = this.columns ? this.columns.filter(column => column.level === level) : [];
-        return sortColumns(columnsToRender(columns));
-    }
-    isColumnGroupComponent(column) {
-        return isColumnGroupComponent(column);
-    }
-    get columnLevels() {
-        return new Array((this.totalColumnLevels || 0) + 1);
-    }
-    sortDescriptor(field) {
-        return this.sort.find(item => item.field === field) || { field };
-    }
-    get leafColumns() {
-        return this._leafColumns;
-    }
-    attachTargets() {
-        if (this.targetSubscription) {
-            this.targetSubscription.unsubscribe();
-        }
-        this.targetSubscription = new Subscription();
-        const enterStream = merge(...this.dropTargets.map(target => target.enter));
-        const leaveStream = merge(...this.dropTargets.map(target => target.leave));
-        const dropStream = merge(...this.dropTargets.map(target => target.drop));
-        this.targetSubscription.add(enterStream.pipe(tap(({ target, draggable }) => {
-            if (draggable.context.type === 'groupIndicator') {
-                return;
-            }
-            const targetLocked = isTruthy(target.context.column.isLocked);
-            const draggableLocked = isTruthy(draggable.context.column.isLocked);
-            if (this.lockedColumnsCount > 0 || targetLocked || draggableLocked) {
-                this.hint.toggleLock(targetLocked);
-            }
-        }), filter(({ draggable, target }) => this.canDrop(draggable, target)), switchMap(this.trackMove.bind(this, leaveStream, dropStream)), map((e) => mergeObjects(e, { before: this.calculateBefore(e), changeContainer: e.changeContainer })), map(this.normalizeTarget.bind(this)), tap(this.enter.bind(this)), switchMap((args) => dropStream.pipe(map(() => args), takeUntil(leaveStream.pipe(tap(this.leave.bind(this)))))))
-            .subscribe(this.drop.bind(this)));
-    }
-    normalizeTarget(e) {
-        let target = e.target;
-        const parent = target.context.column.parent;
-        if (parent && parent.isSpanColumn) {
-            const arr = this.dropTargets.toArray();
-            const firstSpan = arr.find(t => t.context.column.parent === parent);
-            const index = arr.indexOf(firstSpan);
-            const adjust = e.before ? 0 : parent.childColumns.length - 1;
-            target = arr[index + adjust];
-        }
-        return mergeObjects(e, { target });
-    }
-    trackMove(leaveStream, dropStream, e) {
-        const column = e.target.context.column;
-        const levelColumns = this.columnsForLevel(column.level);
-        const index = levelColumns.indexOf(column);
-        const isFirst = (column.locked ? index === levelColumns.length - 1 : index === 0);
-        const changed = e.draggable.context.column.isLocked !== column.isLocked;
-        if (changed && isFirst) {
-            return e.draggable.drag
-                .pipe(takeUntil(leaveStream), takeUntil(dropStream), map(({ mouseEvent }) => mergeObjects({ changeContainer: true }, e, { mouseEvent })));
-        }
-        return of(mergeObjects({ changeContainer: changed }, e));
-    }
-    calculateBefore({ draggable, target, mouseEvent, changeContainer = false }) {
-        const targetElement = target.element.nativeElement;
-        let before = false;
-        if (changeContainer) {
-            const { left } = offset(targetElement);
-            const halfWidth = targetElement.offsetWidth / 2;
-            const middle = left + halfWidth;
-            before = middle > mouseEvent.pageX;
-            if (this.localization.rtl) {
-                before = !before;
-            }
-        }
-        else {
-            before = isTargetBefore(draggable.element.nativeElement, targetElement);
-        }
-        return before;
-    }
-    enter({ target, before }) {
-        this.hint.enable();
-        if (this.localization.rtl) {
-            before = !before;
-        }
-        this.cue.position(position(target.element.nativeElement, before));
-    }
-    leave() {
-        this.hint.disable();
-        this.cue.hide();
-    }
-    drop({ draggable, target, before, changeContainer }) {
-        this.reorderService.reorder({
-            before,
-            changeContainer,
-            source: draggable.context.column,
-            target: target.context.column
-        });
-    }
-};
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], HeaderComponent.prototype, "totalColumnLevels", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Array)
-], HeaderComponent.prototype, "columns", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Array)
-], HeaderComponent.prototype, "groups", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", DetailTemplateDirective)
-], HeaderComponent.prototype, "detailTemplate", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], HeaderComponent.prototype, "scrollable", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], HeaderComponent.prototype, "filterable", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Array)
-], HeaderComponent.prototype, "sort", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], HeaderComponent.prototype, "filter", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], HeaderComponent.prototype, "sortable", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], HeaderComponent.prototype, "groupable", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], HeaderComponent.prototype, "lockedColumnsCount", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], HeaderComponent.prototype, "resizable", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], HeaderComponent.prototype, "reorderable", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], HeaderComponent.prototype, "columnMenu", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", TemplateRef)
-], HeaderComponent.prototype, "columnMenuTemplate", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], HeaderComponent.prototype, "totalColumnsCount", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], HeaderComponent.prototype, "tabIndex", void 0);
-tslib_1.__decorate([
-    HostBinding('class.k-grid-header'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], HeaderComponent.prototype, "headerClass", null);
-tslib_1.__decorate([
-    ViewChildren(DropTargetDirective),
-    tslib_1.__metadata("design:type", QueryList)
-], HeaderComponent.prototype, "dropTargets", void 0);
-tslib_1.__decorate([
-    ViewChildren(FilterMenuComponent),
-    tslib_1.__metadata("design:type", QueryList)
-], HeaderComponent.prototype, "filterMenus", void 0);
-tslib_1.__decorate([
-    ViewChildren(ColumnMenuComponent),
-    tslib_1.__metadata("design:type", QueryList)
-], HeaderComponent.prototype, "columnMenus", void 0);
-HeaderComponent = tslib_1.__decorate([
-    Component({
-        selector: '[kendoGridHeader]',
-        styles: [`
-        .k-column-resizer {
-            cursor: col-resize;
-            display: block;
-            height: 1000%;
-            position: absolute;
-            top: 0;
-            width: .5em;
-        }
-    `],
-        template: `
-    <ng-template [ngIf]="true">
-        <tr *ngFor="let i of columnLevels; let levelIndex = index"
-            kendoGridLogicalRow
-                [logicalRowIndex]="levelIndex"
-                [logicalSlaveRow]="lockedColumnsCount > 0"
-                [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount">
-            <th
-                class="k-group-cell k-header"
-                role="presentation"
-                *ngFor="let g of groups">
-            </th>
-            <th class="k-hierarchy-cell k-header"
-                role="presentation"
-                *ngIf="detailTemplate?.templateRef"
-                kendoGridLogicalCell
-                    [logicalRowIndex]="levelIndex"
-                    [logicalColIndex]="0"
-                    aria-selected="false"
-            >
-            </th>
-            <ng-template ngFor let-column [ngForOf]="columnsForLevel(levelIndex)" [ngForTrackBy]="trackByIndex" let-columnIndex="index" let-last="last">
-                <th *ngIf="!isColumnGroupComponent(column)"
-                    kendoGridLogicalCell
-                    [logicalRowIndex]="levelIndex"
-                    [logicalColIndex]="logicalColumnIndex(column)"
-                    [headerLabelText]="column.title || column.field"
-                    [colSpan]="column.colspan"
-                    [rowSpan]="column.rowspan(totalColumnLevels)"
-                    role="columnheader"
-                    aria-selected="false"
-                    [attr.aria-sort]="sortState(column)"
-                    (keydown)="onHeaderKeydown(column, $event)"
-                    kendoDropTarget
-                    kendoDraggable
-                    kendoDraggableColumn
-                    [enableDrag]="shouldActivate(column)"
-                    [context]="{
-                        field: column.field,
-                        type: 'column',
-                        column: column,
-                        hint: column.title || column.field,
-                        lastColumn: last && columnIndex === 0
-                    }"
-                    class="k-header"
-                    [class.k-filterable]="(showFilterMenu && isFilterable(column)) || showColumnMenu(column)"
-                    [class.k-first]="isFirstOnRow(column, columnIndex)"
-                    [class.k-grid-header-sticky]="column.sticky"
-                    [ngClass]="column.headerClass"
-                    [ngStyle]="column.sticky ? addStickyStyles(column) : column.headerStyle"
-                    [attr.rowspan]="column.rowspan(totalColumnLevels)"
-                    [attr.colspan]="column.colspan">
-
-                    <ng-template [ngIf]="!isSortable(column)">
-                        <kendo-grid-filter-menu
-                            *ngIf="showFilterMenu && isFilterable(column)"
-                            [column]="column"
-                            [filter]="filter"
-                            [tabIndex]="tabIndex">
-                        </kendo-grid-filter-menu>
-                        <kendo-grid-column-menu *ngIf="showColumnMenu(column)"
-                            [standalone]="false"
-                            [settings]="columnMenu"
-                            [column]="column"
-                            [columnMenuTemplate]="columnMenuTemplate"
-                            [sort]="sort"
-                            [filter]="filter"
-                            [sortable]="sortable"
-                            [tabIndex]="tabIndex">
-                        </kendo-grid-column-menu>
-                        <ng-template
-                            [templateContext]="{
-                                templateRef: column.headerTemplateRef,
-                                columnIndex: column.leafIndex,
-                                column: column,
-                                $implicit: column
-                            }">
-                        </ng-template>
-                        <ng-template [ngIf]="!column.headerTemplateRef">{{column.displayTitle}}</ng-template>
-                    </ng-template>
-
-                    <ng-template [ngIf]="isSortable(column)">
-                        <span class="k-cell-inner">
-                            <span #link class="k-link" (click)="onSortClick(column, $event, link)">
-                                <ng-template
-                                    [templateContext]="{
-                                        templateRef: column.headerTemplateRef,
-                                        columnIndex: column.leafIndex,
-                                        column: column,
-                                        $implicit: column
-                                    }">
-                                </ng-template>
-                                <ng-template [ngIf]="!column.headerTemplateRef">
-                                    <span class="k-column-title">{{column.displayTitle}}</span>
-                                </ng-template>
-                                <span role="note" [attr.aria-label]="sortableLabel" [ngClass]="sortIcon(column.field)"></span>
-                                <span *ngIf="showSortNumbering(column)" class="k-sort-order">{{sortOrder(column.field)}}</span>
-                            </span>
-                            <span role="status"
-                                class="k-sort-status"
-                                style="position: absolute; left: -10000px;"
-                                [innerHtml]="sortStatus(column)">
-                            </span>
-                            <kendo-grid-filter-menu
-                                *ngIf="showFilterMenu && isFilterable(column)"
-                                [column]="column"
-                                [filter]="filter"
-                                [tabIndex]="tabIndex">
-                            </kendo-grid-filter-menu>
-                            <kendo-grid-column-menu *ngIf="showColumnMenu(column)"
-                                [standalone]="false"
-                                [settings]="columnMenu"
-                                [column]="column"
-                                [columnMenuTemplate]="columnMenuTemplate"
-                                [sort]="sort"
-                                [filter]="filter"
-                                [sortable]="sortable"
-                                [tabIndex]="tabIndex">
-                            </kendo-grid-column-menu>
-                        </span>
-                    </ng-template>
-
-                    <ng-template [ngIf]="isCheckboxColumn(column) && !column.headerTemplateRef && column.showSelectAll">
-                        <input
-                            class="k-checkbox k-checkbox-md k-rounded-md"
-                            [attr.id]="selectAllCheckboxId()"
-                            [attr.aria-label]="selectAllCheckboxLabel"
-                            kendoGridSelectAllCheckbox
-                            kendoGridFocusable>
-                    </ng-template>
-                    <span kendoGridColumnHandle
-                        kendoDraggable
-                        class="k-column-resizer"
-                        *ngIf="resizable"
-                        [column]="column"
-                        [columns]="columns">
-                    </span>
-                </th>
-                <th *ngIf="isColumnGroupComponent(column)"
-                    kendoGridLogicalCell
-                    [logicalRowIndex]="levelIndex"
-                    [logicalColIndex]="logicalColumnIndex(column)"
-                    [rowSpan]="column.rowspan(totalColumnLevels)"
-                    [colSpan]="column.colspan"
-                    [headerLabelText]="column.title || column.field"
-                    kendoDropTarget
-                    kendoDraggable
-                    kendoDraggableColumn
-                    [enableDrag]="shouldActivate(column)"
-                    [context]="{
-                        type: 'columnGroup',
-                        column: column,
-                        hint: column.title,
-                        lastColumn: last && columnIndex === 0
-                    }"
-                    class="k-header"
-                    [class.k-first]="isFirstOnRow(column, columnIndex)"
-                    [class.k-filterable]="showColumnMenu(column)"
-                    [class.k-grid-content-sticky]="column.sticky"
-                    [ngClass]="column.headerClass"
-                    [ngStyle]="column.headerStyle"
-                    [attr.rowspan]="column.rowspan(totalColumnLevels)"
-                    [attr.colspan]="column.colspan">
-                        <kendo-grid-column-menu *ngIf="showColumnMenu(column)"
-                            [standalone]="false"
-                            [settings]="columnMenu"
-                            [column]="column"
-                            [columnMenuTemplate]="columnMenuTemplate">
-                        </kendo-grid-column-menu>
-                        <ng-template
-                            [templateContext]="{
-                                templateRef: column.headerTemplateRef,
-                                columnIndex: lockedColumnsCount + columnIndex,
-                                column: column,
-                                $implicit: column
-                            }">
-                        </ng-template>
-                        <ng-template [ngIf]="!column.headerTemplateRef">{{column.displayTitle}}</ng-template>
-                        <span kendoGridColumnHandle
-                            kendoDraggable
-                            class="k-column-resizer"
-                            *ngIf="resizable"
-                            [column]="column"
-                            [columns]="columns">
-                        </span>
-                </th>
-            </ng-template>
-        </tr>
-        <tr *ngIf="showFilterRow"
-            kendoGridFilterRow
-                [columns]="leafColumns"
-                [filter]="filter"
-                [groups]="groups"
-                [detailTemplate]="detailTemplate"
-                [lockedColumnsCount]="lockedColumnsCount"
-            kendoGridLogicalRow
-                [logicalRowIndex]="totalColumnLevels + 1"
-                [logicalSlaveRow]="lockedColumnsCount > 0"
-                [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount"
-        ></tr>
-    </ng-template>
-    `
-    }),
-    tslib_1.__metadata("design:paramtypes", [SinglePopupService,
-        DragHintService,
-        DropCueService,
-        ColumnReorderService,
-        IdService,
-        SortService,
-        LocalizationService,
-        ColumnInfoService,
-        ChangeDetectorRef])
-], HeaderComponent);
-export { HeaderComponent };
-export { ɵ0, ɵ1, ɵ2, ɵ3, ɵ4, ɵ5, ɵ6, ɵ7, ɵ8, ɵ9, ɵ10 };