@ngx-custom-code/ngx-table-custom-sort
Version:
Angular easy table
369 lines (360 loc) • 132 kB
JavaScript
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, ViewChild, Input, Output, HostListener, ViewChildren, Pipe, TemplateRef, ContentChild, NgModule } from '@angular/core';
import * as i3$1 from '@angular/cdk/drag-drop';
import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
import { from, Subject } from 'rxjs';
import { groupBy, mergeMap, reduce, takeUntil, throttleTime, filter } from 'rxjs/operators';
import * as i1 from '@angular/cdk/scrolling';
import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
import * as i2 from 'ngx-pagination';
import { NgxPaginationModule } from 'ngx-pagination';
var STYLE;
(function (STYLE) {
STYLE["TINY"] = "tiny";
STYLE["BIG"] = "big";
STYLE["NORMAL"] = "normal";
})(STYLE || (STYLE = {}));
var THEME;
(function (THEME) {
THEME["LIGHT"] = "light";
THEME["DARK"] = "dark";
})(THEME || (THEME = {}));
var Event;
(function (Event) {
Event["onPagination"] = "onPagination";
Event["onOrder"] = "onOrder";
Event["onGlobalSearch"] = "onGlobalSearch";
Event["onSearch"] = "onSearch";
Event["onClick"] = "onClick";
Event["onDoubleClick"] = "onDoubleClick";
Event["onCheckboxSelect"] = "onCheckboxSelect";
Event["onRadioSelect"] = "onRadioSelect";
Event["onCheckboxToggle"] = "onCheckboxToggle";
Event["onSelectAll"] = "onSelectAll";
Event["onInfiniteScrollEnd"] = "onInfiniteScrollEnd";
Event["onColumnResizeMouseDown"] = "onColumnResizeMouseDown";
Event["onColumnResizeMouseUp"] = "onColumnResizeMouseUp";
/* @deprecated Will be removed in the next version */
Event["onRowDrop"] = "onRowDrop";
/* @deprecated Will be removed in the next version */
Event["onReorderStart"] = "onReorderStart";
Event["onRowCollapsedShow"] = "onRowCollapsedShow";
Event["onRowCollapsedHide"] = "onRowCollapsedHide";
Event["onRowContextMenu"] = "onRowContextMenu";
})(Event || (Event = {}));
var API;
(function (API) {
API["rowContextMenuClicked"] = "rowContextMenuClicked";
API["setInputValue"] = "setInputValue";
API["toggleRowIndex"] = "toggleRowIndex";
API["toggleCheckbox"] = "toggleCheckbox";
API["onGlobalSearch"] = "onGlobalSearch";
API["setPaginationCurrentPage"] = "setPaginationCurrentPage";
API["getPaginationCurrentPage"] = "getPaginationCurrentPage";
API["getPaginationTotalItems"] = "getPaginationTotalItems";
API["getNumberOfRowsPerPage"] = "getNumberOfRowsPerPage";
API["getPaginationLastPage"] = "getPaginationLastPage";
API["setPaginationRange"] = "setPaginationRange";
API["setPaginationPreviousLabel"] = "setPaginationPreviousLabel";
API["setPaginationNextLabel"] = "setPaginationNextLabel";
API["setPaginationDisplayLimit"] = "setPaginationDisplayLimit";
API["setTableClass"] = "setTableClass";
API["setRowClass"] = "setRowClass";
API["setCellClass"] = "setCellClass";
API["setRowStyle"] = "setRowStyle";
API["setCellStyle"] = "setCellStyle";
API["sortBy"] = "sortBy";
})(API || (API = {}));
// eslint-disable-next-line, no-underscore-dangle, id-blacklist, id-match
const DefaultConfig = {
searchEnabled: false,
headerEnabled: true,
orderEnabled: true,
orderEventOnly: false,
paginationEnabled: true,
clickEvent: true,
selectRow: false,
selectCol: false,
selectCell: false,
rows: 10,
additionalActions: false,
serverPagination: false,
isLoading: false,
detailsTemplate: false,
groupRows: false,
paginationRangeEnabled: true,
collapseAllRows: false,
checkboxes: false,
radio: false,
resizeColumn: false,
fixedColumnWidth: true,
horizontalScroll: false,
logger: false,
showDetailsArrow: false,
showContextMenu: false,
persistState: false,
paginationMaxSize: 5,
threeWaySort: false,
onDragOver: false,
tableLayout: {
style: STYLE.NORMAL,
theme: THEME.LIGHT,
borderless: false,
hover: true,
striped: false,
},
};
class DefaultConfigService {
static { this.config = DefaultConfig; }
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DefaultConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DefaultConfigService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DefaultConfigService, decorators: [{
type: Injectable
}] });
class GroupRowsService {
static doGroupRows(data, groupRowsBy) {
const grouped = [];
from(data)
.pipe(groupBy((row) => row[groupRowsBy]), mergeMap((group) => group.pipe(reduce((acc, curr) => [...acc, curr], []))))
.subscribe((row) => grouped.push(row));
return grouped;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GroupRowsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GroupRowsService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GroupRowsService, decorators: [{
type: Injectable
}] });
/* eslint-disable */
class StyleService {
setRowClass(val) {
const selector = `#table > tbody > tr:nth-child(${val.row})`;
const row = document.querySelector(selector);
if (row) {
row.classList.add(val.className);
}
}
setCellClass(val) {
const selector = `#table > tbody > tr:nth-child(${val.row}) > td:nth-child(${val.cell})`;
const cell = document.querySelector(selector);
if (cell) {
cell.classList.add(val.className);
}
}
setRowStyle(val) {
const selector = `#table > tbody > tr:nth-child(${val.row})`;
const row = document.querySelector(selector);
if (row) {
// eslint-disable-next-line @typescript-eslint/dot-notation
row.style[val.attr] = val.value;
}
}
setCellStyle(val) {
const selector = `#table > tbody > tr:nth-child(${val.row}) > td:nth-child(${val.cell})`;
const cell = document.querySelector(selector);
if (cell) {
// eslint-disable-next-line @typescript-eslint/dot-notation
cell.style[val.attr] = val.value;
}
}
pinnedWidth(pinned, column) {
if (pinned) {
return 150 * column + 'px';
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: StyleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: StyleService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: StyleService, decorators: [{
type: Injectable
}] });
class PaginationComponent {
constructor() {
this.updateRange = new EventEmitter();
this.ranges = [5, 10, 25, 50, 100];
this.showRange = false;
this.screenReaderPaginationLabel = 'Pagination';
this.screenReaderPageLabel = 'page';
this.screenReaderCurrentLabel = 'You are on page';
this.previousLabel = '';
this.nextLabel = '';
this.directionLinks = true;
}
onClick(targetElement) {
if (this.paginationRange && !this.paginationRange.nativeElement.contains(targetElement)) {
this.showRange = false;
}
}
ngOnChanges(changes) {
const { config } = changes;
if (config && config.currentValue) {
this.selectedLimit = this.config.rows;
}
}
onPageChange(page) {
this.updateRange.emit({
page,
limit: this.selectedLimit,
});
}
changeLimit(limit, callFromAPI) {
if (!callFromAPI) {
this.showRange = !this.showRange;
}
this.selectedLimit = limit;
this.updateRange.emit({
page: 1,
limit,
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: PaginationComponent, selector: "pagination", inputs: { pagination: "pagination", config: "config", id: "id" }, outputs: { updateRange: "updateRange" }, host: { listeners: { "document:click": "onClick($event.target)" } }, viewQueries: [{ propertyName: "paginationDirective", first: true, predicate: ["paginationDirective"], descendants: true }, { propertyName: "paginationRange", first: true, predicate: ["paginationRange"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"ngx-pagination-wrapper\"\r\n [style.display]=\"config.paginationEnabled ? '' : 'none'\"\r\n [class.ngx-table__table--dark-pagination-wrapper]=\"config.tableLayout.theme === 'dark'\"\r\n>\r\n <div class=\"ngx-pagination-steps\">\r\n <pagination-template\r\n #paginationDirective=\"paginationApi\"\r\n id=\"pagination-controls\"\r\n [id]=\"id\"\r\n [class.ngx-table__table--dark-pagination]=\"config.tableLayout.theme === 'dark'\"\r\n [maxSize]=\"config.paginationMaxSize || 5\"\r\n (pageChange)=\"onPageChange($event)\"\r\n >\r\n <ul\r\n class=\"ngx-pagination\"\r\n role=\"navigation\"\r\n [attr.aria-label]=\"screenReaderPaginationLabel\"\r\n [class.responsive]=\"true\"\r\n >\r\n <li\r\n class=\"pagination-previous\"\r\n [class.disabled]=\"paginationDirective.isFirstPage()\"\r\n *ngIf=\"directionLinks\"\r\n >\r\n <a\r\n tabindex=\"0\"\r\n *ngIf=\"1 < paginationDirective.getCurrent()\"\r\n (keyup.enter)=\"paginationDirective.previous()\"\r\n (click)=\"paginationDirective.previous()\"\r\n [attr.aria-label]=\"previousLabel + ' ' + screenReaderPageLabel\"\r\n >\r\n {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\r\n </a>\r\n <span *ngIf=\"paginationDirective.isFirstPage()\">\r\n {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\r\n </span>\r\n </li>\r\n <li class=\"small-screen\">\r\n {{ paginationDirective.getCurrent() }} / {{ paginationDirective.getLastPage() }}\r\n </li>\r\n <li\r\n [class.current]=\"paginationDirective.getCurrent() === page.value\"\r\n [class.ellipsis]=\"page.label === '...'\"\r\n *ngFor=\"let page of paginationDirective.pages\"\r\n >\r\n <a\r\n tabindex=\"0\"\r\n (keyup.enter)=\"paginationDirective.setCurrent(page.value)\"\r\n (click)=\"paginationDirective.setCurrent(page.value)\"\r\n *ngIf=\"paginationDirective.getCurrent() !== page.value\"\r\n >\r\n <span class=\"show-for-sr\">{{ screenReaderPageLabel }} </span>\r\n <span>{{ page.label }}</span>\r\n </a>\r\n <ng-container *ngIf=\"paginationDirective.getCurrent() === page.value\">\r\n <span class=\"show-for-sr\">{{ screenReaderCurrentLabel }} </span>\r\n <span>{{ page.label }}</span>\r\n </ng-container>\r\n </li>\r\n <li\r\n class=\"pagination-next\"\r\n [class.disabled]=\"paginationDirective.isLastPage()\"\r\n *ngIf=\"directionLinks\"\r\n >\r\n <a\r\n tabindex=\"0\"\r\n *ngIf=\"!paginationDirective.isLastPage()\"\r\n (keyup.enter)=\"paginationDirective.next()\"\r\n (click)=\"paginationDirective.next()\"\r\n [attr.aria-label]=\"nextLabel + ' ' + screenReaderPageLabel\"\r\n >\r\n {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\r\n </a>\r\n <span *ngIf=\"paginationDirective.isLastPage()\">\r\n {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\r\n </span>\r\n </li>\r\n </ul>\r\n </pagination-template>\r\n </div>\r\n <div\r\n class=\"ngx-pagination-range\"\r\n #paginationRange\r\n [class.ngx-table__table--dark-pagination-range]=\"config.tableLayout.theme === 'dark'\"\r\n *ngIf=\"config.paginationRangeEnabled\"\r\n >\r\n <div class=\"ngx-dropdown ngx-pagination-range-dropdown\" id=\"rowAmount\">\r\n <div class=\"ngx-btn-group\">\r\n <div class=\"ngx-pagination-range-dropdown-button\" (click)=\"showRange = !showRange\">\r\n {{selectedLimit}} <i class=\"ngx-icon ngx-icon-arrow-down\"></i>\r\n </div>\r\n <ul class=\"ngx-menu\" *ngIf=\"showRange\">\r\n <li\r\n class=\"ngx-pagination-range-dropdown-button-item\"\r\n [class.ngx-pagination-range--selected]=\"limit === selectedLimit\"\r\n (click)=\"changeLimit(limit, false)\"\r\n *ngFor=\"let limit of ranges\"\r\n >\r\n <span>{{limit}}</span>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.PaginationControlsDirective, selector: "pagination-template,[pagination-template]", inputs: ["id", "maxSize"], outputs: ["pageChange", "pageBoundsCorrection"], exportAs: ["paginationApi"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PaginationComponent, decorators: [{
type: Component,
args: [{ selector: 'pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ngx-pagination-wrapper\"\r\n [style.display]=\"config.paginationEnabled ? '' : 'none'\"\r\n [class.ngx-table__table--dark-pagination-wrapper]=\"config.tableLayout.theme === 'dark'\"\r\n>\r\n <div class=\"ngx-pagination-steps\">\r\n <pagination-template\r\n #paginationDirective=\"paginationApi\"\r\n id=\"pagination-controls\"\r\n [id]=\"id\"\r\n [class.ngx-table__table--dark-pagination]=\"config.tableLayout.theme === 'dark'\"\r\n [maxSize]=\"config.paginationMaxSize || 5\"\r\n (pageChange)=\"onPageChange($event)\"\r\n >\r\n <ul\r\n class=\"ngx-pagination\"\r\n role=\"navigation\"\r\n [attr.aria-label]=\"screenReaderPaginationLabel\"\r\n [class.responsive]=\"true\"\r\n >\r\n <li\r\n class=\"pagination-previous\"\r\n [class.disabled]=\"paginationDirective.isFirstPage()\"\r\n *ngIf=\"directionLinks\"\r\n >\r\n <a\r\n tabindex=\"0\"\r\n *ngIf=\"1 < paginationDirective.getCurrent()\"\r\n (keyup.enter)=\"paginationDirective.previous()\"\r\n (click)=\"paginationDirective.previous()\"\r\n [attr.aria-label]=\"previousLabel + ' ' + screenReaderPageLabel\"\r\n >\r\n {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\r\n </a>\r\n <span *ngIf=\"paginationDirective.isFirstPage()\">\r\n {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\r\n </span>\r\n </li>\r\n <li class=\"small-screen\">\r\n {{ paginationDirective.getCurrent() }} / {{ paginationDirective.getLastPage() }}\r\n </li>\r\n <li\r\n [class.current]=\"paginationDirective.getCurrent() === page.value\"\r\n [class.ellipsis]=\"page.label === '...'\"\r\n *ngFor=\"let page of paginationDirective.pages\"\r\n >\r\n <a\r\n tabindex=\"0\"\r\n (keyup.enter)=\"paginationDirective.setCurrent(page.value)\"\r\n (click)=\"paginationDirective.setCurrent(page.value)\"\r\n *ngIf=\"paginationDirective.getCurrent() !== page.value\"\r\n >\r\n <span class=\"show-for-sr\">{{ screenReaderPageLabel }} </span>\r\n <span>{{ page.label }}</span>\r\n </a>\r\n <ng-container *ngIf=\"paginationDirective.getCurrent() === page.value\">\r\n <span class=\"show-for-sr\">{{ screenReaderCurrentLabel }} </span>\r\n <span>{{ page.label }}</span>\r\n </ng-container>\r\n </li>\r\n <li\r\n class=\"pagination-next\"\r\n [class.disabled]=\"paginationDirective.isLastPage()\"\r\n *ngIf=\"directionLinks\"\r\n >\r\n <a\r\n tabindex=\"0\"\r\n *ngIf=\"!paginationDirective.isLastPage()\"\r\n (keyup.enter)=\"paginationDirective.next()\"\r\n (click)=\"paginationDirective.next()\"\r\n [attr.aria-label]=\"nextLabel + ' ' + screenReaderPageLabel\"\r\n >\r\n {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\r\n </a>\r\n <span *ngIf=\"paginationDirective.isLastPage()\">\r\n {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\r\n </span>\r\n </li>\r\n </ul>\r\n </pagination-template>\r\n </div>\r\n <div\r\n class=\"ngx-pagination-range\"\r\n #paginationRange\r\n [class.ngx-table__table--dark-pagination-range]=\"config.tableLayout.theme === 'dark'\"\r\n *ngIf=\"config.paginationRangeEnabled\"\r\n >\r\n <div class=\"ngx-dropdown ngx-pagination-range-dropdown\" id=\"rowAmount\">\r\n <div class=\"ngx-btn-group\">\r\n <div class=\"ngx-pagination-range-dropdown-button\" (click)=\"showRange = !showRange\">\r\n {{selectedLimit}} <i class=\"ngx-icon ngx-icon-arrow-down\"></i>\r\n </div>\r\n <ul class=\"ngx-menu\" *ngIf=\"showRange\">\r\n <li\r\n class=\"ngx-pagination-range-dropdown-button-item\"\r\n [class.ngx-pagination-range--selected]=\"limit === selectedLimit\"\r\n (click)=\"changeLimit(limit, false)\"\r\n *ngFor=\"let limit of ranges\"\r\n >\r\n <span>{{limit}}</span>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n" }]
}], propDecorators: { paginationDirective: [{
type: ViewChild,
args: ['paginationDirective']
}], paginationRange: [{
type: ViewChild,
args: ['paginationRange']
}], pagination: [{
type: Input
}], config: [{
type: Input
}], id: [{
type: Input
}], updateRange: [{
type: Output
}], onClick: [{
type: HostListener,
args: ['document:click', ['$event.target']]
}] } });
class HeaderComponent {
constructor() {
this.update = new EventEmitter();
}
unifyKey(key) {
return key.replace('.', '_');
}
onSearch(input) {
this.update.emit([{ value: input.value, key: this.column.key }]);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: HeaderComponent, selector: "table-header", inputs: { column: "column" }, outputs: { update: "update" }, ngImport: i0, template: "<label for=\"search_{{ unifyKey(column.key) }}\">\r\n <input\r\n type=\"text\"\r\n id=\"search_{{ unifyKey(column.key) }}\"\r\n aria-label=\"Search\"\r\n placeholder=\"{{ column.placeholder ? column.placeholder : column.title }}\"\r\n class=\"ngx-table__header-search\"\r\n #input\r\n (input)=\"onSearch(input)\"\r\n />\r\n</label>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: HeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'table-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label for=\"search_{{ unifyKey(column.key) }}\">\r\n <input\r\n type=\"text\"\r\n id=\"search_{{ unifyKey(column.key) }}\"\r\n aria-label=\"Search\"\r\n placeholder=\"{{ column.placeholder ? column.placeholder : column.title }}\"\r\n class=\"ngx-table__header-search\"\r\n #input\r\n (input)=\"onSearch(input)\"\r\n />\r\n</label>\r\n" }]
}], propDecorators: { column: [{
type: Input
}], update: [{
type: Output
}] } });
class TableTHeadComponent {
onClick(targetElement) {
if (this.additionalActionMenu &&
!this.additionalActionMenu.nativeElement.contains(targetElement)) {
this.menuActive = false;
}
// if click outside the header then close opened Header Action Template
if (this.openedHeaderActionTemplate &&
// if no header have the clicked point
!this.headerDropdown.toArray().some((ref) => ref.nativeElement.contains(targetElement))) {
this.openedHeaderActionTemplate = null;
}
}
constructor(styleService) {
this.styleService = styleService;
this.menuActive = false;
this.openedHeaderActionTemplate = null;
this.onSelectAllBinded = this.onSelectAll.bind(this);
this.isAllSortEnabled = true;
this.filter = new EventEmitter();
this.order = new EventEmitter();
this.selectAll = new EventEmitter();
this.event = new EventEmitter();
}
getColumnDefinition(column) {
return column.searchEnabled || typeof column.searchEnabled === 'undefined';
}
orderBy(column) {
this.order.emit(column);
}
isOrderEnabled(column) {
const columnOrderEnabled = column.orderEnabled === undefined ? true : !!column.orderEnabled;
return this.config.orderEnabled && columnOrderEnabled;
}
columnDrop(event) {
moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
}
onSearch($event) {
this.filter.emit($event);
}
getColumnWidth(column) {
if (column.width) {
return column.width;
}
return this.config.fixedColumnWidth ? 100 / this.columns.length + '%' : null;
}
onSelectAll() {
this.selectAll.emit();
}
onMouseDown(event, th) {
if (!this.config.resizeColumn) {
return;
}
this.th = th;
this.startOffset = th.offsetWidth - event.pageX;
this.event.emit({
event: Event.onColumnResizeMouseDown,
value: event,
});
}
onMouseMove(event) {
if (!this.config.resizeColumn) {
return;
}
if (this.th && this.th.style) {
this.th.style.width = this.startOffset + event.pageX + 'px';
this.th.style.cursor = 'col-resize';
this.th.style['user-select'] = 'none';
}
}
onMouseUp(event) {
if (!this.config.resizeColumn) {
return;
}
this.event.emit({
event: Event.onColumnResizeMouseUp,
value: event,
});
this.th.style.cursor = 'default';
this.th = undefined;
}
showHeaderActionTemplateMenu(column) {
if (!column.headerActionTemplate) {
console.error('Column [headerActionTemplate] property not defined');
}
if (this.openedHeaderActionTemplate === column.key) {
this.openedHeaderActionTemplate = null;
return;
}
this.openedHeaderActionTemplate = column.key;
}
showMenu() {
if (!this.additionalActionsTemplate) {
console.error('[additionalActionsTemplate] property not defined');
}
this.menuActive = !this.menuActive;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: TableTHeadComponent, deps: [{ token: StyleService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: TableTHeadComponent, selector: "[table-thead]", inputs: { config: "config", columns: "columns", sortKey: "sortKey", sortState: "sortState", selectAllTemplate: "selectAllTemplate", filtersTemplate: "filtersTemplate", additionalActionsTemplate: "additionalActionsTemplate", isAllSortEnabled: "isAllSortEnabled" }, outputs: { filter: "filter", order: "order", selectAll: "selectAll", event: "event" }, host: { listeners: { "document:click": "onClick($event.target)" } }, providers: [StyleService], viewQueries: [{ propertyName: "th", first: true, predicate: ["th"], descendants: true }, { propertyName: "additionalActionMenu", first: true, predicate: ["additionalActionMenu"], descendants: true }, { propertyName: "headerDropdown", predicate: ["headerDropdown"], descendants: true }], ngImport: i0, template: "<tr class=\"ngx-table__header\" *ngIf=\"config.headerEnabled && !config.columnReorder\">\r\n <th *ngIf=\"config.checkboxes || config.radio\" [style.width]=\"'3%'\">\r\n <ng-container\r\n *ngIf=\"selectAllTemplate && config.checkboxes\"\r\n [ngTemplateOutlet]=\"selectAllTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: onSelectAllBinded }\"\r\n >\r\n </ng-container>\r\n <label\r\n class=\"ngx-form-checkbox\"\r\n for=\"selectAllCheckboxes\"\r\n *ngIf=\"!selectAllTemplate && config.checkboxes\"\r\n >\r\n <input type=\"checkbox\" id=\"selectAllCheckboxes\" (change)=\"onSelectAll()\" />\r\n <em class=\"ngx-form-icon\" id=\"selectAllCheckbox\"></em>\r\n </label>\r\n </th>\r\n <ng-container *ngFor=\"let column of columns; let colIndex = index; let last = last\">\r\n <th\r\n class=\"ngx-table__header-cell\"\r\n [class.pinned-left]=\"column.pinned\"\r\n [ngClass]=\"column.cssClass && column.cssClass.includeHeader ? column.cssClass.name : ''\"\r\n [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\r\n #th\r\n [style.width]=\"getColumnWidth(column)\"\r\n (mousedown)=\"onMouseDown($event, th)\"\r\n (mouseup)=\"onMouseUp($event)\"\r\n (mousemove)=\"onMouseMove($event)\"\r\n >\r\n <div\r\n (click)=\"orderBy(column)\"\r\n style=\"display: inline\"\r\n [class.pointer]=\"isOrderEnabled(column)\"\r\n >\r\n <div class=\"ngx-table__header-title\">\r\n {{ column.title }}<span> </span>\r\n <em class=\"ngx-icon ngx-icon-pin\" *ngIf=\"column.pinned\"></em>\r\n <div [style.display]=\"config.orderEnabled ? 'inline' : 'none'\">\r\n <svg\r\n *ngIf=\"(column.isAllSortEnabled ?? true) && sortKey !== column.key && column.key !== ''\"\r\n width=\"20\"\r\n height=\"20\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <!-- Down arrow -->\r\n <path\r\n d=\"M10 17.4987L6.25 13.7487L7.45833 12.5404L10 15.082L12.5417 12.5404L13.75 13.7487L10 17.4987Z\"\r\n fill=\"#8486B9\"\r\n />\r\n <!-- Up arrow -->\r\n <path\r\n d=\"M7.45833 7.54036L6.25 6.33203L10 2.58203L13.75 6.33203L12.5417 7.54036L10 4.9987L7.45833 7.54036Z\"\r\n fill=\"#8486B9\"\r\n />\r\n </svg>\r\n \r\n \r\n <svg\r\n *ngIf=\"sortKey === column.key\"\r\n width=\"20\"\r\n height=\"20\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <!-- Down arrow -->\r\n <path\r\n d=\"M10 17.4987L6.25 13.7487L7.45833 12.5404L10 15.082L12.5417 12.5404L13.75 13.7487L10 17.4987Z\"\r\n [attr.fill]=\"sortState.get(sortKey) === 'asc' ? '#FCFCFF' : '#8486B9'\"\r\n />\r\n <!-- Up arrow -->\r\n <path\r\n d=\"M7.45833 7.54036L6.25 6.33203L10 2.58203L13.75 6.33203L12.5417 7.54036L10 4.9987L7.45833 7.54036Z\"\r\n [attr.fill]=\"sortState.get(sortKey) === 'desc' ? '#FCFCFF' : '#8486B9'\"\r\n />\r\n </svg>\r\n \r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"ngx-dropdown\" *ngIf=\"!!column.headerActionTemplate\" #headerDropdown>\r\n <a class=\"ngx-btn ngx-btn-link\" (click)=\"showHeaderActionTemplateMenu(column)\">\r\n <span class=\"ngx-icon ngx-icon-more\"></span>\r\n </a>\r\n <div\r\n class=\"ngx-menu ngx-table__table-menu\"\r\n *ngIf=\"column.key === openedHeaderActionTemplate\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"column.headerActionTemplate\"> </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"ngx-table__column-resizer\" *ngIf=\"config.resizeColumn && !last\"></div>\r\n </th>\r\n </ng-container>\r\n <th\r\n *ngIf=\"\r\n config.additionalActions ||\r\n config.detailsTemplate ||\r\n config.collapseAllRows ||\r\n config.groupRows\r\n \"\r\n class=\"ngx-table__header-cell-additional-actions\"\r\n >\r\n <div class=\"ngx-dropdown\" #additionalActionMenu *ngIf=\"config.additionalActions\">\r\n <a class=\"ngx-btn ngx-btn-link\" (click)=\"showMenu()\">\r\n <span class=\"ngx-icon ngx-icon-menu\"></span>\r\n </a>\r\n <ul class=\"ngx-menu ngx-table__table-menu\" *ngIf=\"menuActive\">\r\n <ng-container\r\n *ngIf=\"additionalActionsTemplate\"\r\n [ngTemplateOutlet]=\"additionalActionsTemplate\"\r\n >\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </th>\r\n</tr>\r\n<tr\r\n class=\"ngx-table__header ngx-table__header--draggable\"\r\n *ngIf=\"config.headerEnabled && config.columnReorder\"\r\n cdkDropList\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListDropped)=\"columnDrop($event)\"\r\n>\r\n <th *ngIf=\"config.checkboxes || config.radio\" [style.width]=\"'3%'\">\r\n <ng-container\r\n *ngIf=\"selectAllTemplate && config.checkboxes\"\r\n [ngTemplateOutlet]=\"selectAllTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: onSelectAllBinded }\"\r\n >\r\n </ng-container>\r\n <label\r\n class=\"ngx-form-checkbox\"\r\n for=\"selectAllCheckboxes\"\r\n *ngIf=\"!selectAllTemplate && config.checkboxes\"\r\n >\r\n <input type=\"checkbox\" id=\"selectAllCheckboxesDrag\" (change)=\"onSelectAll()\" />\r\n <em class=\"ngx-form-icon\" id=\"selectAllCheckboxDrag\"></em>\r\n </label>\r\n </th>\r\n <ng-container *ngFor=\"let column of columns; let colIndex = index; let last = last\">\r\n <th\r\n class=\"ngx-table__header-cell ngx-table__header-cell--draggable\"\r\n cdkDragLockAxis=\"x\"\r\n cdkDrag\r\n [cdkDragStartDelay]=\"config.reorderDelay || 0\"\r\n [class.pinned-left]=\"column.pinned\"\r\n [ngClass]=\"column.cssClass && column.cssClass.includeHeader ? column.cssClass.name : ''\"\r\n [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\r\n #th\r\n [style.width]=\"getColumnWidth(column)\"\r\n (mousedown)=\"onMouseDown($event, th)\"\r\n (mouseup)=\"onMouseUp($event)\"\r\n (mousemove)=\"onMouseMove($event)\"\r\n >\r\n <div\r\n (click)=\"orderBy(column)\"\r\n style=\"display: inline\"\r\n cdkDragHandle\r\n [class.pointer]=\"isOrderEnabled(column)\"\r\n >\r\n <div class=\"ngx-table__header-title\">\r\n {{ column.title }}<span> </span>\r\n <em class=\"ngx-icon ngx-icon-pin\" *ngIf=\"column.pinned\"></em>\r\n <!-- <div [style.display]=\"isAllSortEnabled ||config.orderEnabled ? 'inline' : 'none'\">\r\n <em\r\n *ngIf=\"isAllSortEnabled\"\r\n class=\"ngx-icon ngx-icon-arrow-down\"\r\n >\r\n </em>\r\n <em\r\n *ngIf=\"sortKey === column.key && this.sortState.get(sortKey) === 'asc'\"\r\n class=\"ngx-icon ngx-icon-arrow-up\"\r\n >\r\n </em>\r\n <em\r\n *ngIf=\"sortKey === column.key && this.sortState.get(sortKey) === 'desc'\"\r\n class=\"ngx-icon ngx-icon-arrow-down\"\r\n >\r\n </em>\r\n </div> -->\r\n<div [style.display]=\"config.orderEnabled ? 'inline' : 'none'\">\r\n <svg\r\n *ngIf=\"sortKey === column.key\"\r\n width=\"20\"\r\n height=\"20\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n>\r\n <!-- Down arrow -->\r\n <path\r\n d=\"M10 17.4987L6.25 13.7487L7.45833 12.5404L10 15.082L12.5417 12.5404L13.75 13.7487L10 17.4987Z\"\r\n [attr.fill]=\"sortState.get(sortKey) === 'asc' ? '#FCFCFF' : '#8486B9'\"\r\n />\r\n <!-- Up arrow -->\r\n <path\r\n d=\"M7.45833 7.54036L6.25 6.33203L10 2.58203L13.75 6.33203L12.5417 7.54036L10 4.9987L7.45833 7.54036Z\"\r\n [attr.fill]=\"sortState.get(sortKey) === 'desc' ? '#FCFCFF' : '#8486B9'\"\r\n />\r\n</svg>\r\n\r\n\r\n\r\n<svg\r\n *ngIf=\"(column.isAllSortEnabled ?? true) && sortKey !== column.key && column.key !== ''\"\r\n width=\"20\"\r\n height=\"20\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n>\r\n <!-- Down arrow -->\r\n <path\r\n d=\"M10 17.4987L6.25 13.7487L7.45833 12.5404L10 15.082L12.5417 12.5404L13.75 13.7487L10 17.4987Z\"\r\n fill=\"#8486B9\"\r\n />\r\n <!-- Up arrow -->\r\n <path\r\n d=\"M7.45833 7.54036L6.25 6.33203L10 2.58203L13.75 6.33203L12.5417 7.54036L10 4.9987L7.45833 7.54036Z\"\r\n fill=\"#8486B9\"\r\n />\r\n</svg>\r\n\r\n\r\n</div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"ngx-dropdown\" *ngIf=\"!!column.headerActionTemplate\" #headerDropdown>\r\n <a class=\"ngx-btn ngx-btn-link\" (click)=\"showHeaderActionTemplateMenu(column)\">\r\n <span class=\"ngx-icon ngx-icon-more\"></span>\r\n </a>\r\n <div\r\n class=\"ngx-menu ngx-table__table-menu\"\r\n *ngIf=\"column.key === openedHeaderActionTemplate\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"column.headerActionTemplate\"> </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"ngx-table__column-resizer\" *ngIf=\"config.resizeColumn && !last\"></div>\r\n </th>\r\n </ng-container>\r\n <th\r\n *ngIf=\"\r\n config.additionalActions ||\r\n config.detailsTemplate ||\r\n config.collapseAllRows ||\r\n config.groupRows\r\n \"\r\n class=\"ngx-table__header-cell-additional-actions\"\r\n >\r\n <div class=\"ngx-dropdown\" #additionalActionMenu *ngIf=\"config.additionalActions\">\r\n <a class=\"ngx-btn ngx-btn-link\" (click)=\"showMenu()\">\r\n <span class=\"ngx-icon ngx-icon-menu\"></span>\r\n </a>\r\n <ul class=\"ngx-menu ngx-table__table-menu\" *ngIf=\"menuActive\">\r\n <ng-container\r\n *ngIf=\"additionalActionsTemplate\"\r\n [ngTemplateOutlet]=\"additionalActionsTemplate\"\r\n >\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </th>\r\n</tr>\r\n<tr\r\n [style.display]=\"config.searchEnabled && !filtersTemplate ? 'table-row' : 'none'\"\r\n class=\"ngx-table__search-header\"\r\n>\r\n <th *ngIf=\"config.checkboxes || config.radio\"></th>\r\n <ng-container *ngFor=\"let column of columns; let colIndex = index\">\r\n <th\r\n [ngClass]=\"column.cssClass && column.cssClass.includeHeader ? column.cssClass.name : ''\"\r\n [class.pinned-left]=\"column.pinned\"\r\n [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\r\n >\r\n <table-header\r\n *ngIf=\"getColumnDefinition(column)\"\r\n (update)=\"onSearch($event)\"\r\n [column]=\"column\"\r\n >\r\n </table-header>\r\n </th>\r\n </ng-container>\r\n <th *ngIf=\"config.additionalActions || config.detailsTemplate\"></th>\r\n</tr>\r\n<ng-container *ngIf=\"filtersTemplate\">\r\n <tr>\r\n <ng-container [ngTemplateOutlet]=\"filtersTemplate\"> </ng-container>\r\n </tr>\r\n</ng-container>\r\n", styles: [".cdk-drag-preview{text-align:left;padding-top:9px;padding-left:4px;color:#50596c;border:1px solid #e7e9ed}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: HeaderComponent, selector: "table-header", inputs: ["column"], outputs: ["update"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: TableTHeadComponent, decorators: [{
type: Component,
args: [{ selector: '[table-thead]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [StyleService], template: "<tr class=\"ngx-table__header\" *ngIf=\"config.headerEnabled && !config.columnReorder\">\r\n <th *ngIf=\"config.checkboxes || config.radio\" [style.width]=\"'3%'\">\r\n <ng-container\r\n *ngIf=\"selectAllTemplate && config.checkboxes\"\r\n [ngTemplateOutlet]=\"selectAllTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: onSelectAllBinded }\"\r\n >\r\n </ng-container>\r\n <label\r\n class=\"ngx-form-checkbox\"\r\n for=\"selectAllCheckboxes\"\r\n *ngIf=\"!selectAllTemplate && config.checkboxes\"\r\n >\r\n <input type=\"checkbox\" id=\"selectAllCheckboxes\" (change)=\"onSelectAll()\" />\r\n <em class=\"ngx-form-icon\" id=\"selectAllCheckbox\"></em>\r\n </label>\r\n </th>\r\n <ng-container *ngFor=\"let column of columns; let colIndex = index; let last = last\">\r\n <th\r\n class=\"ngx-table__header-cell\"\r\n [class.pinned-left]=\"column.pinned\"\r\n [ngClass]=\"column.cssClass && column.cssClass.includeHeader ? column.cssClass.name : ''\"\r\n [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\r\n #th\r\n [style.width]=\"getColumnWidth(column)\"\r\n (mousedown)=\"onMouseDown($event, th)\"\r\n (mouseup)=\"onMouseUp($event)\"\r\n (mousemove)=\"onMouseMove($event)\"\r\n >\r\n <div\r\n (click)=\"orderBy(column)\"\r\n style=\"display: inline\"\r\n [class.pointer]=\"isOrderEnabled(column)\"\r\n >\r\n <div class=\"ngx-table__header-title\">\r\n {{ column.title }}<span> </span>\r\n <em class=\"ngx-icon ngx-icon-pin\" *ngIf=\"column.pinned\"></em>\r\n <div [style.display]=\"config.orderEnabled ? 'inline' : 'none'\">\r\n <svg\r\n *ngIf=\"(column.isAllSortEnabled ?? true) && sortKey !== column.key && column.key !== ''\"\r\n width=\"20\"\r\n height=\"20\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <!-- Down arrow -->\r\n <path\r\n d=\"M10 17.4987L6.25 13.7487L7.45833 12.5404L10 15.082L12.5417 12.5404L13.75 13.7487L10 17.4987Z\"\r\n fill=\"#8486B9\"\r\n />\r\n <!-- Up arrow -->\r\n <path\r\n d=\"M7.45833 7.54036L6.25 6.33203L10 2.58203L13.75 6.33203L12.5417 7.54036L10 4.9987L7.45833 7.54036Z\"\r\n fill=\"#8486B9\"\r\n />\r\n </svg>\r\n \r\n \r\n <svg\r\n *ngIf=\"sortKey === column.key\"\r\n width=\"20\"\r\n height=\"20\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <!-- Down arrow -->\r\n <path\r\n d=\"M10 17.4987L6.25 13.7487L7.45833 12.5404L10 15.082L12.5417 12.5404L13.75 13.7487L10 17.4987Z\"\r\n [attr.fill]=\"sortState.get(sortKey) === 'asc' ? '#FCFCFF' : '#8486B9'\"\r\n />\r\n <!-- Up arrow -->\r\n <path\r\n d=\"M7.45833 7.54036L6.25 6.33203L10 2.58203L13.75 6.33203L12.5417 7.54036L10 4.9987L7.45833 7.54036Z\"\r\n [attr.fill]=\"sortState.get(sortKey) === 'desc' ? '#FCFCFF' : '#8486B9'\"\r\n />\r\n </svg>\r\n \r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"ngx-dropdown\" *ngIf=\"!!column.headerActionTemplate\" #headerDropdown>\r\n <a class=\"ngx-btn ngx-btn-link\" (click)=\"showHeaderActionTemplateMenu(column)\">\r\n <span class=\"ngx-icon ngx-icon-more\"></span>\r\n </a>\r\n <div\r\n class=\"ngx-menu ngx-table__table-menu\"\r\n *ngIf=\"column.key === openedHeaderActionTemplate\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"column.headerActionTemplate\"> </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"ngx-table__column-resizer\" *ngIf=\"config.resizeColumn && !last\"></div>\r\n </th>\r\n </ng-container>\r\n <th\r\n *ngIf=\"\r\n config.additionalActions ||\r\n config.detailsTemplate ||\r\n config.collapseAllRows ||\r\n config.groupRows\r\n \"\r\n class=\"ngx-table__header-cell-additional-actions\"\r\n >\r\n <div class=\"ngx-dropdown\" #additionalActionMenu *ngIf=\"config.additionalActions\">\r\n <a class=\"ngx-btn ngx-btn-link\" (click)=\"showMenu()\">\r\n <span class=\"ngx-icon ngx-icon-menu\"></span>\r\n </a>\r\n <ul class=\"ngx-menu ngx-table__table-menu\" *ngIf=\"menuActive\">\r\n <ng-container\r\n *ngIf=\"additionalActionsTemplate\"\r\n [ngTemplateOutlet]=\"additionalActionsTemplate\"\r\n >\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </th>\r\n</tr>\r\n<tr\r\n class=\"ngx-table__header ngx-table__header--draggable\"\r\n *ngIf=\"config.headerEnabled && config.columnReorder\"\r\n cdkDropList\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListDropped)=\"columnDrop($event)\"\r\n>\r\n <th *ngIf=\"config.checkboxes || config.radio\" [style.width]=\"'3%'\">\r\n <ng-container\r\n *ngIf=\"selectAllTemplate && config.checkboxes\"\r\n [ngTemplateOutlet]=\"selectAllTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: onSelectAllBinded }\"\r\n >\r\n </ng-container>\r\n <label\r\n class=\"ngx-form-checkbox\"\r\n for=\"selectAllCheckboxes\"\r\n *ngIf=\"!selectAllTemplate && config.checkboxes\"\r\n >\r\n <input type=\"checkbox\" id=\"selectAllCheckboxesDrag\" (change)=\"onSelectAll()\" />\r\n <em class=\"ngx-form-icon\" id=\"selectAllCheckboxDrag\"></em>\r\n </label>\r\n </th>\r\n <ng-container *ngFor=\"let column of columns; let colIndex = index; let last = last\">\r\n <th\r\n class=\"ngx-table__header-cell ngx-table__header-cell--draggable\"\r\n cdkDragLockAxis=\"x\"\r\n cdkDrag\r\n [cdkDragStartDelay]=\"config.reorderDelay || 0\"\r\n [class.pinned-left]=\"column.pinned\"\r\n [ngClass]=\"column.cssClass && column.cssClass.includeHeader ? column.cssClass.name : ''\"\r\n [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\r\n #th\r\n [style.width]=\"getColumnWidth(column)\"\r\n (mousedown)=\"onMouseDown($event, th)\"\r\n (mouseup)=\"onMouseUp($event)\"\r\n (mousemove)=\"onMouseMove($event)\"\r\n >\r\n <div\r\n (click)=\"orderBy(column)\"\r\n style=\"display: inline\"\r\n cdkDragHandle\r\n [class.pointer]=\"isOrderEnabled(column)\"\r\n >\r\n <div class=\"ngx-table__header-title\">\r\n {{ column.title }}<span> </span>\r\n <em class=\"ngx-icon ngx-icon-pin\" *ngIf=\"column.pinned\"></em>\r\n <!-- <div [style.display]=\"isAllSortEnabled ||config.orderEnabled ? 'inline' : 'none'\">\r\n <em\r\n *ngIf=\"isAllSortEnabled\"\r\n class=\"ngx-icon ngx-icon-arrow-down\"\r\n >\r\n </em>\r\n <em\r\n *ngIf=\"sortKey === column.key && this.sortState.get(sortKey) === 'asc'\"\r\n class=\"ngx-icon ngx-icon-arrow-up\"\r\n >\r\n </em>\r\n <em\r\n *ngIf=\"sortKey === column.key && this.sortState.get(sortKey) === 'desc'\"\r\n class=\"ngx-icon ngx-icon-arrow-down\"\r\n >\r\n </em>\r\n </div> -->\r\n<div [style.display]=\"config.orderEnabled ? 'inline' : 'none'\">\r\n <svg\r\n *ngIf=\"sortKey === column.key\"\r\n width=\"20\"\r\n height=\"20\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n>\r\n <!-- Down arrow -->\r\n <path\r\n d=\"M10 17.4987L6.25 13.7487L7.45833 12.5404L10 15.082L12.5417 12.5404L13.75 13.7487L10 17.4987Z\"\r\n [attr.fill]=\"sortState.get(sortKey) === 'asc' ? '#FCFCFF' : '#8486B9'\"\r\n />\r\n <!-- Up arrow -->\r\n <path\r\n d=\"M7.45833 7.54036L6.25 6.33203L10 2.58203L13.75 6.33203L12.5417 7.54036L10 4.9987L7.45833 7.54036Z\"\r\n [attr.fill]=\"sortState.get(sortKey) === 'desc' ? '#FCFCFF' : '#8486B9'\"\r\n />\r\n</svg>\r\n\r\n\r\n\r\n<svg\r\n *ngIf=\"(column.isAllSortEnabled ?? true) && sortKey !== column.key && column.key !== ''\"\r\n width=\"20\"\r\n height=\"20\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n>\r\n <!-- Down arrow -->\r\n <path\r\n d=\"M10 17.4987L6.25 13.7487L7.45833 12.5404L10 15.082L12.5417 12.5404L13.75 13.7487L10 17.4987Z\"\r\n fill=\"#8486B9\"\r\n />\r\n <!-- Up arrow -->\r\n <path\r\n d=\"M7.45833 7.54036L6.25 6.33203L10 2.58203L13.75 6.33203L12.5417 7.54036L10 4.9987L7.45833 7.54036Z\"\r\n fill=\"#8486B9\"\r\n />\r\n</svg>\r\n\r\n\r\n</div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"ngx-dropdown\" *ngIf=\"!!column.headerActionTemplate\" #headerDropdown>\r\n <a class=\"ngx-btn ngx-btn-link\" (click)=\"showHeaderActionTemplateMenu(column)\">\r\n <span class=\"ngx-icon ngx-icon-more\"></span>\r\n </a>\r\n <div\r\n class=\"ngx-menu ngx-table__table-menu\"\r\n *ngIf=\"column.key === openedHeaderActionTemplate\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"column.headerActionTemplate\"> </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"ngx-table__column-resizer\" *ngIf=\"config.resizeColumn && !last\"></div>\r\n </th>\r\n </ng-container>\r\n <th\r\n *ngIf=\"\r\n config.additionalActions ||\r\n config.detailsTemplate ||\r\n config.collapseAllRows ||\r\n config.groupRows\r\n \"\r\n class=\"ngx-table__header-cell-additional-actions\"\r\n >\r\n <div class=\"ngx-dropdown\" #additionalActionMenu *ngIf=\"config.additionalActions\">\r\n <a class=\"ngx-btn ngx-btn-link\" (click)=\"showMenu()\">\r\n <span class=\"ngx-icon ngx-icon-menu\"></span>\r\n </a>\r\n <ul class=\"ngx-menu ngx-table__table-menu\" *ngIf=\"menuActive\">\r\n <ng-container\r\n *ngIf=\"additionalActionsTemplate\"\r\n [ngTemplateOutlet]=\"additionalActionsTemplate\"\r\n >\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </th>\r\n</tr>\r\n<tr\r\n [style.display]=\"config.searchEnabled && !filtersTemplate ? 'table-row' : 'none'\"\r\n class=\"ngx-table__search-header\"\r\n>\r\n <th *ngIf=\"config.checkboxes || config.radio\"></th>\r\n <ng-container *ngFor=\"let column of columns; let colIndex = index\">\r\n <th\r\n [ngClass]=\"column.cssClass && column.cssClass.includeHeader ? column.cssClass.name : ''\"\r\n [class.pinned-left]=\"column.pinned\"\r\n [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\r\n >\r\n <table-header\r\n *ng