ngx-aur-mat-table 19.2.0 → 19.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ngx-aur-mat-table.mjs +181 -146
- package/fesm2022/ngx-aur-mat-table.mjs.map +1 -1
- package/lib/drag-drop/aur-drag-drop.manager.d.ts +23 -23
- package/lib/drag-drop/model/aur-drag-drop-mapping.d.ts +15 -15
- package/lib/factories/ActionViewFactory.d.ts +8 -8
- package/lib/factories/MatTableDataSourceFactory.d.ts +3 -3
- package/lib/factories/TableRowsFactory.d.ts +4 -4
- package/lib/filters/NgxAurFilters.d.ts +54 -54
- package/lib/model/AurPage.d.ts +5 -5
- package/lib/model/ColumnConfig.d.ts +54 -47
- package/lib/model/RowStyleFactory.d.ts +3 -3
- package/lib/model/TableViewFactory.d.ts +4 -4
- package/lib/ngx-aur-mat-table.component.d.ts +27 -14
- package/lib/providers/DragDropProvider.d.ts +4 -4
- package/lib/providers/IndexProvider.d.ts +14 -14
- package/lib/providers/RowActionProvider.d.ts +4 -4
- package/lib/style-builder/style-builder.d.ts +1 -1
- package/lib/utils/feature-enabled.util.d.ts +4 -4
- package/lib/utils/ngx-aur-table-config.util.d.ts +1 -1
- package/lib/utils/ngx-aur-table-page-event.utils.d.ts +2 -2
- package/package.json +1 -1
|
@@ -36,7 +36,7 @@ class NgxAurTableConfigUtil {
|
|
|
36
36
|
return config.columnsCfg;
|
|
37
37
|
}
|
|
38
38
|
/**
|
|
39
|
-
* @return Map
|
|
39
|
+
* @return Map, где ключ — это 'key', а значение — это 'name'
|
|
40
40
|
*/
|
|
41
41
|
static keyNameMap(config) {
|
|
42
42
|
return new Map(this.columnCfgs(config).map(cfg => [cfg.key, cfg.name]));
|
|
@@ -45,8 +45,8 @@ class NgxAurTableConfigUtil {
|
|
|
45
45
|
|
|
46
46
|
class NgxAurTablePageEventUtils {
|
|
47
47
|
/**
|
|
48
|
-
* @deprecated
|
|
49
|
-
*
|
|
48
|
+
* @deprecated Не нужно с API `pageSource` — таблица сама выполняет начальную
|
|
49
|
+
* загрузку. Сохранено для устаревшего пути ручной серверной пагинации.
|
|
50
50
|
*/
|
|
51
51
|
static createEmpty(tableConfig) {
|
|
52
52
|
return {
|
|
@@ -87,7 +87,7 @@ var StyleBuilder;
|
|
|
87
87
|
this._fontWeight = weight;
|
|
88
88
|
return this;
|
|
89
89
|
}
|
|
90
|
-
/**
|
|
90
|
+
/** настроенный цвет текста ('' если не задан) — используется для переключения `.new-color` */
|
|
91
91
|
get colorValue() {
|
|
92
92
|
return this._color;
|
|
93
93
|
}
|
|
@@ -226,11 +226,11 @@ class AbstractProvider {
|
|
|
226
226
|
}
|
|
227
227
|
|
|
228
228
|
/**
|
|
229
|
-
*
|
|
229
|
+
* Функция включена, когда её объект конфигурации присутствует, если только не `enable: false`.
|
|
230
230
|
*
|
|
231
|
-
*
|
|
232
|
-
*
|
|
233
|
-
*
|
|
231
|
+
* Используется функциями, сигналом включения которых является «конфигурация присутствует» (Группа 1).
|
|
232
|
+
* Функции, сигналом включения которых является что-то иное (Hover → взаимодействие, TotalRow → колонки
|
|
233
|
+
* totalConverter), НЕ должны использовать этот помощник — отсутствующая конфигурация не выключает их.
|
|
234
234
|
*/
|
|
235
235
|
function isFeatureEnabled(cfg) {
|
|
236
236
|
return !!cfg && cfg.enable !== false;
|
|
@@ -316,10 +316,10 @@ class SelectionProviderDummy extends SelectionProvider {
|
|
|
316
316
|
|
|
317
317
|
class ActionViewFactory {
|
|
318
318
|
/**
|
|
319
|
-
*
|
|
320
|
-
* @param rows -
|
|
321
|
-
* @param actionConfig -
|
|
322
|
-
* @return Map
|
|
319
|
+
* Преобразует строки и действия в формат представления.
|
|
320
|
+
* @param rows - Строки данных для преобразования.
|
|
321
|
+
* @param actionConfig - Конфигурация действий над строками.
|
|
322
|
+
* @return Map идентификаторов строк к связанным с ними представлениям действий.
|
|
323
323
|
*/
|
|
324
324
|
static create(rows, actionConfig) {
|
|
325
325
|
const result = new Map();
|
|
@@ -329,10 +329,10 @@ class ActionViewFactory {
|
|
|
329
329
|
return result;
|
|
330
330
|
}
|
|
331
331
|
/**
|
|
332
|
-
*
|
|
333
|
-
* @param row -
|
|
334
|
-
* @param actionConfig -
|
|
335
|
-
* @return
|
|
332
|
+
* Подготавливает действия для конкретной строки на основе конфигурации действий.
|
|
333
|
+
* @param row - Строка данных, для которой нужно подготовить действия.
|
|
334
|
+
* @param actionConfig - Конфигурация действий над строками.
|
|
335
|
+
* @return Массив действий для строки.
|
|
336
336
|
*/
|
|
337
337
|
static prepareActionsForRow(row, actionConfig) {
|
|
338
338
|
return actionConfig.actions.map(action => ({
|
|
@@ -366,7 +366,7 @@ class RowActionProvider extends AbstractProvider {
|
|
|
366
366
|
constructor(tableConfig) {
|
|
367
367
|
super();
|
|
368
368
|
this.isEnabled = true;
|
|
369
|
-
//
|
|
369
|
+
// ключ — это rowId
|
|
370
370
|
this.actionView = new Map();
|
|
371
371
|
if (!tableConfig.actionCfg) {
|
|
372
372
|
throw new Error("Actions is undefined");
|
|
@@ -390,10 +390,10 @@ class RowActionProvider extends AbstractProvider {
|
|
|
390
390
|
return this;
|
|
391
391
|
}
|
|
392
392
|
/**
|
|
393
|
-
*
|
|
394
|
-
* @param rows -
|
|
395
|
-
* @param actionConfig -
|
|
396
|
-
* @return
|
|
393
|
+
* Преобразует строки и действия в формат представления.
|
|
394
|
+
* @param rows - Строки данных для преобразования.
|
|
395
|
+
* @param actionConfig - Настройка действий над строками.
|
|
396
|
+
* @return Соответствие идентификаторов строк связанным с ними представлениям действий.
|
|
397
397
|
*/
|
|
398
398
|
setView(rows) {
|
|
399
399
|
if (!this.config) {
|
|
@@ -427,10 +427,10 @@ class RowActionProviderDummy extends RowActionProvider {
|
|
|
427
427
|
|
|
428
428
|
class TableViewFactory {
|
|
429
429
|
/**
|
|
430
|
-
*
|
|
431
|
-
* @param rows
|
|
432
|
-
* @param tableConfig
|
|
433
|
-
* @returns
|
|
430
|
+
* Преобразует строки в формат представления на основе конфигурации таблицы.
|
|
431
|
+
* @param rows Строки таблицы.
|
|
432
|
+
* @param tableConfig Конфигурация таблицы.
|
|
433
|
+
* @returns Массив map, представляющих представление для каждой строки.
|
|
434
434
|
*/
|
|
435
435
|
static toView(rows, tableConfig) {
|
|
436
436
|
const columnViewMap = new Map();
|
|
@@ -488,9 +488,9 @@ class TableViewFactory {
|
|
|
488
488
|
|
|
489
489
|
class RowStyleFactory {
|
|
490
490
|
/**
|
|
491
|
-
*
|
|
492
|
-
*
|
|
493
|
-
* (
|
|
491
|
+
* Разрешает `bodyRowCfg.styleCfg` в массив по строкам, индексированный по `row.id`.
|
|
492
|
+
* Возвращает пустой массив, когда хук не сконфигурирован. Стили хранятся в сыром виде
|
|
493
|
+
* (не собранные `StyleBuilder.Row | string`), чтобы компонент мог вызвать `overrideWith()`/`build()` во время отрисовки.
|
|
494
494
|
*/
|
|
495
495
|
static toRowStyles(rows, tableConfig) {
|
|
496
496
|
const cfg = tableConfig.bodyRowCfg?.styleCfg;
|
|
@@ -505,8 +505,8 @@ class RowStyleFactory {
|
|
|
505
505
|
}
|
|
506
506
|
|
|
507
507
|
/**
|
|
508
|
-
*
|
|
509
|
-
*
|
|
508
|
+
* Предоставляет функциональность для управления колонкой индекса в таблице.
|
|
509
|
+
* Класс может обрабатывать настройки индекса и изменять массив колонок, добавляя в него колонку индекса.
|
|
510
510
|
*/
|
|
511
511
|
class IndexProvider extends AbstractProvider {
|
|
512
512
|
static { this.COLUMN_NAME = 'tbl_index'; }
|
|
@@ -523,9 +523,9 @@ class IndexProvider extends AbstractProvider {
|
|
|
523
523
|
return IndexProvider.COLUMN_NAME;
|
|
524
524
|
}
|
|
525
525
|
/**
|
|
526
|
-
*
|
|
527
|
-
* @param columns
|
|
528
|
-
* @returns
|
|
526
|
+
* Добавляет колонку индекса в начало массива колонок.
|
|
527
|
+
* @param columns Массив имён колонок, в который должна быть добавлена колонка индекса.
|
|
528
|
+
* @returns Экземпляр IndexProvider для цепочки вызовов.
|
|
529
529
|
*/
|
|
530
530
|
addIndexColumn(columns) {
|
|
531
531
|
if (this.notHasKey(this.COLUMN_NAME, columns)) {
|
|
@@ -534,10 +534,10 @@ class IndexProvider extends AbstractProvider {
|
|
|
534
534
|
return this;
|
|
535
535
|
}
|
|
536
536
|
/**
|
|
537
|
-
*
|
|
538
|
-
*
|
|
539
|
-
* @param tableConfig
|
|
540
|
-
* @returns
|
|
537
|
+
* Фабричный метод для создания экземпляра IndexProvider на основе настройки таблицы.
|
|
538
|
+
* Возвращает заглушку-провайдер, если индекс не включён в настройке.
|
|
539
|
+
* @param tableConfig Настройка таблицы.
|
|
540
|
+
* @returns Экземпляр IndexProvider или IndexProviderDummy.
|
|
541
541
|
*/
|
|
542
542
|
static create(tableConfig) {
|
|
543
543
|
if (IndexProvider.canCreate(tableConfig)) {
|
|
@@ -550,8 +550,8 @@ class IndexProvider extends AbstractProvider {
|
|
|
550
550
|
}
|
|
551
551
|
}
|
|
552
552
|
/**
|
|
553
|
-
*
|
|
554
|
-
*
|
|
553
|
+
* Заглушка-реализация IndexProvider, которая используется, когда функциональность индекса не включена.
|
|
554
|
+
* Этот класс переопределяет некоторые методы, предоставляя пустые реализации.
|
|
555
555
|
*/
|
|
556
556
|
class IndexProviderDummy extends IndexProvider {
|
|
557
557
|
constructor() {
|
|
@@ -559,12 +559,12 @@ class IndexProviderDummy extends IndexProvider {
|
|
|
559
559
|
this.isEnabled = false;
|
|
560
560
|
}
|
|
561
561
|
/**
|
|
562
|
-
*
|
|
563
|
-
* @param columns
|
|
564
|
-
* @returns
|
|
562
|
+
* Переопределяет метод addIndexColumn, возвращая себя без изменения массива колонок.
|
|
563
|
+
* @param columns Массив имён колонок.
|
|
564
|
+
* @returns Экземпляр IndexProviderDummy для цепочки вызовов.
|
|
565
565
|
*/
|
|
566
566
|
addIndexColumn(columns) {
|
|
567
|
-
//
|
|
567
|
+
// Операция не выполняется, так как индекс не включён.
|
|
568
568
|
return this;
|
|
569
569
|
}
|
|
570
570
|
}
|
|
@@ -603,10 +603,10 @@ class TableRow {
|
|
|
603
603
|
|
|
604
604
|
class TableRowsFactory {
|
|
605
605
|
/**
|
|
606
|
-
*
|
|
607
|
-
* @param data
|
|
608
|
-
* @param config
|
|
609
|
-
* @returns
|
|
606
|
+
* Преобразует массив объектов данных в массив объектов TableRow.
|
|
607
|
+
* @param data Массив объектов данных для преобразования.
|
|
608
|
+
* @param config Настройки конфигурации для каждой колонки.
|
|
609
|
+
* @returns Массив объектов TableRow.
|
|
610
610
|
*/
|
|
611
611
|
static convert(data, config) {
|
|
612
612
|
return data.map((obj, index) => this.createTableRow(index, obj, config));
|
|
@@ -620,9 +620,9 @@ class TableRowsFactory {
|
|
|
620
620
|
|
|
621
621
|
class MatTableDataSourceFactory {
|
|
622
622
|
/**
|
|
623
|
-
*
|
|
624
|
-
* @param data
|
|
625
|
-
* @param config
|
|
623
|
+
* Преобразует массив объектов данных в MatTableDataSource.
|
|
624
|
+
* @param data Массив объектов данных для преобразования.
|
|
625
|
+
* @param config Настройки конфигурации для каждой колонки.
|
|
626
626
|
* @returns MatTableDataSource.
|
|
627
627
|
*/
|
|
628
628
|
static convert(data, config) {
|
|
@@ -716,7 +716,7 @@ class HeaderButtonProviderDummy extends HeaderButtonProvider {
|
|
|
716
716
|
|
|
717
717
|
class CanDropManager {
|
|
718
718
|
constructor(mappings) {
|
|
719
|
-
|
|
719
|
+
//можно сбросить [ключ из таблицы-источника, значение - имя таблицы-цели]
|
|
720
720
|
this.canDropStorage = new Map();
|
|
721
721
|
this.fillStorage(mappings);
|
|
722
722
|
}
|
|
@@ -812,13 +812,13 @@ class DragDropMappingManager {
|
|
|
812
812
|
}
|
|
813
813
|
|
|
814
814
|
/**
|
|
815
|
-
*
|
|
816
|
-
*
|
|
815
|
+
* Управляет процессом drag & drop, включая события начала, сброса и завершения.
|
|
816
|
+
* Обрабатывает превью перетаскивания, проверку возможности сброса и обновление набора данных после успешного сброса.
|
|
817
817
|
*/
|
|
818
818
|
class AurDragDropManager {
|
|
819
819
|
/**
|
|
820
|
-
*
|
|
821
|
-
* @returns {AurDragDropManager} -
|
|
820
|
+
* Создаёт пустой экземпляр AurDragDropManager.
|
|
821
|
+
* @returns {AurDragDropManager} - Пустой менеджер без инициализированных ссылок.
|
|
822
822
|
*/
|
|
823
823
|
static empty() {
|
|
824
824
|
return new AurDragDropManager(undefined, [], []);
|
|
@@ -831,27 +831,27 @@ class AurDragDropManager {
|
|
|
831
831
|
this.mappingManager = new DragDropMappingManager(mappings);
|
|
832
832
|
}
|
|
833
833
|
/**
|
|
834
|
-
*
|
|
835
|
-
* @returns {string[]} -
|
|
834
|
+
* Возвращает список всех доступных имён источников перетаскивания.
|
|
835
|
+
* @returns {string[]} - Массив имён источников.
|
|
836
836
|
*/
|
|
837
837
|
get draggableSourceNames() {
|
|
838
838
|
return this.mappings?.map(mapping => mapping.sourceName) || [];
|
|
839
839
|
}
|
|
840
840
|
/**
|
|
841
|
-
*
|
|
842
|
-
* @param {string} sourceName -
|
|
843
|
-
* @param {unknown[]} draggedData -
|
|
844
|
-
* @param {DragEvent} event -
|
|
845
|
-
* @throws Error
|
|
841
|
+
* Инициирует операцию перетаскивания, сохраняя контекст и показывая превью перетаскивания.
|
|
842
|
+
* @param {string} sourceName - Имя источника перетаскивания.
|
|
843
|
+
* @param {unknown[]} draggedData - Перетаскиваемые данные.
|
|
844
|
+
* @param {DragEvent} event - Событие перетаскивания.
|
|
845
|
+
* @throws Error если перетаскивание уже выполняется.
|
|
846
846
|
*/
|
|
847
847
|
startDrag(sourceName, draggedData, event) {
|
|
848
848
|
this.startDragEvent = { sourceName, draggedData };
|
|
849
849
|
this.previewManager.showPreview(sourceName, event, draggedData);
|
|
850
850
|
}
|
|
851
851
|
/**
|
|
852
|
-
*
|
|
853
|
-
* @param {string} targetName -
|
|
854
|
-
* @param {DragEvent} event -
|
|
852
|
+
* Проверяет, разрешён ли сброс на целевой элемент, вызывая preventDefault.
|
|
853
|
+
* @param {string} targetName - Имя целевого элемента.
|
|
854
|
+
* @param {DragEvent} event - Событие перетаскивания.
|
|
855
855
|
*/
|
|
856
856
|
canDropPreventDefault(targetName, event) {
|
|
857
857
|
if (!this.startDragEvent) {
|
|
@@ -861,15 +861,15 @@ class AurDragDropManager {
|
|
|
861
861
|
this.canDropManager.dropPreventDefault(this.startDragEvent.sourceName, targetName, event);
|
|
862
862
|
}
|
|
863
863
|
/**
|
|
864
|
-
*
|
|
865
|
-
* @param {string} targetName -
|
|
866
|
-
* @param {any} targetData -
|
|
864
|
+
* Выполняет операцию сброса на указанную цель.
|
|
865
|
+
* @param {string} targetName - Имя целевого элемента.
|
|
866
|
+
* @param {any} targetData - Данные для целевого элемента.
|
|
867
867
|
*/
|
|
868
868
|
drop(targetName, targetData) {
|
|
869
869
|
this.dropEvent = { targetName, targetData };
|
|
870
870
|
}
|
|
871
871
|
/**
|
|
872
|
-
*
|
|
872
|
+
* Завершает операцию перетаскивания и обновляет набор данных, если сброс был успешным.
|
|
873
873
|
*/
|
|
874
874
|
endDrag() {
|
|
875
875
|
this.previewManager.removePreview();
|
|
@@ -923,10 +923,10 @@ class DragDropProvider extends AbstractProvider {
|
|
|
923
923
|
return this;
|
|
924
924
|
}
|
|
925
925
|
/**
|
|
926
|
-
*
|
|
927
|
-
*
|
|
928
|
-
* @param tableConfig
|
|
929
|
-
* @returns
|
|
926
|
+
* Фабричный метод для создания экземпляра IndexProvider на основе настройки таблицы.
|
|
927
|
+
* Возвращает заглушку-провайдер, если индекс не включён в настройке.
|
|
928
|
+
* @param tableConfig Настройка таблицы.
|
|
929
|
+
* @returns Экземпляр IndexProvider или IndexProviderDummy.
|
|
930
930
|
*/
|
|
931
931
|
static create(viewContainerRef, tableConfig) {
|
|
932
932
|
if (DragDropProvider.canCreate(tableConfig)) {
|
|
@@ -946,7 +946,7 @@ class DragProviderDummy extends DragDropProvider {
|
|
|
946
946
|
this.isEnabled = false;
|
|
947
947
|
}
|
|
948
948
|
addColumn(columns) {
|
|
949
|
-
//
|
|
949
|
+
// Операция не выполняется, так как индекс не включён.
|
|
950
950
|
return this;
|
|
951
951
|
}
|
|
952
952
|
}
|
|
@@ -1148,10 +1148,10 @@ class NgxAurMatTableComponent {
|
|
|
1148
1148
|
this.isTableBodyHide = false;
|
|
1149
1149
|
this.sort = new EventEmitter();
|
|
1150
1150
|
this.pageChange = new EventEmitter();
|
|
1151
|
-
//
|
|
1151
|
+
// события, если действия включены
|
|
1152
1152
|
this.rowAction = new EventEmitter();
|
|
1153
1153
|
// -----------------------
|
|
1154
|
-
//
|
|
1154
|
+
// события, если включено событие выделения
|
|
1155
1155
|
this.selectChange = new EventEmitter();
|
|
1156
1156
|
this.selectAdded = new EventEmitter();
|
|
1157
1157
|
this.selectRemoved = new EventEmitter();
|
|
@@ -1162,10 +1162,10 @@ class NgxAurMatTableComponent {
|
|
|
1162
1162
|
this.loadingChange = new EventEmitter();
|
|
1163
1163
|
this.pageError = new EventEmitter();
|
|
1164
1164
|
/**
|
|
1165
|
-
*
|
|
1165
|
+
* возвращает отфильтрованные строки
|
|
1166
1166
|
*/
|
|
1167
1167
|
this.filterChange = new EventEmitter();
|
|
1168
|
-
/** @deprecated
|
|
1168
|
+
/** @deprecated используйте extraHeaderCellTopTemplate или extraHeaderCellBottomTemplate */
|
|
1169
1169
|
this.columnOffsets = new EventEmitter();
|
|
1170
1170
|
this.prevColumnOffsets = [];
|
|
1171
1171
|
this.headerButtonProvider = new HeaderButtonProviderDummy();
|
|
@@ -1182,8 +1182,8 @@ class NgxAurMatTableComponent {
|
|
|
1182
1182
|
this.indexProvider = new IndexProviderDummy();
|
|
1183
1183
|
this.paginationProvider = new PaginationProviderDummy();
|
|
1184
1184
|
this.totalRowProvider = new TotalRowProviderDummy();
|
|
1185
|
-
//
|
|
1186
|
-
//
|
|
1185
|
+
// Состояние наведения. Сравнивает идентичность объекта TableRow (тот же экземпляр, по которому итерирует шаблон),
|
|
1186
|
+
// в отличие от `highlighted`, который сравнивает row.rowSrc (внешнее @Input-значение, а не TableRow).
|
|
1187
1187
|
this.hovered = null;
|
|
1188
1188
|
this.customSortFunctions = new Map();
|
|
1189
1189
|
this.filterStorage = new Map();
|
|
@@ -1199,9 +1199,9 @@ class NgxAurMatTableComponent {
|
|
|
1199
1199
|
if (changes['externalPaginator']) {
|
|
1200
1200
|
if (this.externalPaginator) {
|
|
1201
1201
|
if (this.isServerMode()) {
|
|
1202
|
-
//
|
|
1203
|
-
//
|
|
1204
|
-
// ngAfterViewInit
|
|
1202
|
+
// Серверный режим: НЕ привязываем dataSource.paginator (он порезал бы загруженную страницу).
|
|
1203
|
+
// (Пере)подключаем только после того, как контроллер создан; первое изменение, пришедшее до
|
|
1204
|
+
// ngAfterViewInit, обрабатывается в startServerController().
|
|
1205
1205
|
if (this.serverPageController) {
|
|
1206
1206
|
this.subscribeExternalPaginator();
|
|
1207
1207
|
if (this.paginatorState) {
|
|
@@ -1210,16 +1210,16 @@ class NgxAurMatTableComponent {
|
|
|
1210
1210
|
}
|
|
1211
1211
|
}
|
|
1212
1212
|
else if (!changes['externalPaginator'].firstChange) {
|
|
1213
|
-
//
|
|
1214
|
-
//
|
|
1213
|
+
// Клиентский режим: привязываем внешний пагинатор, чтобы MatTableDataSource резал данные через него.
|
|
1214
|
+
// Защищаемся от firstChange, чтобы не вызвать initPaginator() до ngAfterViewInit.
|
|
1215
1215
|
this.initPaginator();
|
|
1216
1216
|
}
|
|
1217
1217
|
}
|
|
1218
1218
|
else {
|
|
1219
|
-
//
|
|
1219
|
+
// Внешний пагинатор удалён: отписываемся от его событий страницы, чтобы избежать утечки.
|
|
1220
1220
|
this.externalPaginatorSub?.unsubscribe();
|
|
1221
1221
|
this.externalPaginatorSub = undefined;
|
|
1222
|
-
//
|
|
1222
|
+
// Клиентский режим откатывается к (теперь отрисованному) встроенному пагинатору.
|
|
1223
1223
|
if (!this.isServerMode() && !changes['externalPaginator'].firstChange) {
|
|
1224
1224
|
this.initPaginator();
|
|
1225
1225
|
}
|
|
@@ -1261,10 +1261,10 @@ class NgxAurMatTableComponent {
|
|
|
1261
1261
|
this.paginatorState = PaginatorState.empty();
|
|
1262
1262
|
}
|
|
1263
1263
|
}
|
|
1264
|
-
//
|
|
1264
|
+
// нам это нужно, чтобы пагинация работала с *ngIf
|
|
1265
1265
|
ngAfterViewInit() {
|
|
1266
|
-
//
|
|
1267
|
-
//
|
|
1266
|
+
// Должно оставаться безусловным — также покрывает случай первого изменения externalPaginator
|
|
1267
|
+
// для клиентского режима (ngOnChanges откладывает initPaginator() при firstChange).
|
|
1268
1268
|
this.initPaginator();
|
|
1269
1269
|
this.initSortingDataAccessor();
|
|
1270
1270
|
this.resizeColumnOffsetsObserver = new ResizeObserver(() => this.updateColumnOffsets());
|
|
@@ -1275,9 +1275,9 @@ class NgxAurMatTableComponent {
|
|
|
1275
1275
|
}
|
|
1276
1276
|
initPaginator() {
|
|
1277
1277
|
if (this.tableDataSource) {
|
|
1278
|
-
//
|
|
1279
|
-
//
|
|
1280
|
-
//
|
|
1278
|
+
// В серверном режиме НЕ привязываем пагинатор к источнику данных — MatTableDataSource
|
|
1279
|
+
// вызвал бы _updatePaginator(filteredDataLength) и перезаписал бы переданную сервером длину.
|
|
1280
|
+
// Вместо этого пагинацией управляет ServerPageController.
|
|
1281
1281
|
if (this.isServerMode()) {
|
|
1282
1282
|
this.tableDataSource.paginator = null;
|
|
1283
1283
|
}
|
|
@@ -1316,7 +1316,7 @@ class NgxAurMatTableComponent {
|
|
|
1316
1316
|
this.initCustomSortFunctionsMap();
|
|
1317
1317
|
this.removeWrongKeysFromDisplayColumns();
|
|
1318
1318
|
if (!this.paginatorState) {
|
|
1319
|
-
//
|
|
1319
|
+
// Если пагинатор не серверный, то я инициализирую его здесь, иначе при обновлении данных пагинатор ломается и отображаются все элементы
|
|
1320
1320
|
this.initPaginator();
|
|
1321
1321
|
}
|
|
1322
1322
|
this.initSortingDataAccessor();
|
|
@@ -1425,6 +1425,7 @@ class NgxAurMatTableComponent {
|
|
|
1425
1425
|
if (this.isServerMode() && this.serverPageController) {
|
|
1426
1426
|
this.serverPageController.onPage({ pageIndex: event.pageIndex, pageSize: event.pageSize });
|
|
1427
1427
|
}
|
|
1428
|
+
this.cdr.markForCheck();
|
|
1428
1429
|
}
|
|
1429
1430
|
updateTimelineBounds() {
|
|
1430
1431
|
if (!this.timelineProvider.isEnabled)
|
|
@@ -1476,13 +1477,13 @@ class NgxAurMatTableComponent {
|
|
|
1476
1477
|
this.rowAction.emit({ action, value: row });
|
|
1477
1478
|
}
|
|
1478
1479
|
/**
|
|
1479
|
-
*
|
|
1480
|
+
* Отправляет действие, инициированное элементом mat-menu.
|
|
1480
1481
|
*
|
|
1481
|
-
*
|
|
1482
|
-
* mat-menu
|
|
1483
|
-
* ((click)="closed.emit('click')"),
|
|
1484
|
-
*
|
|
1485
|
-
*
|
|
1482
|
+
* В отличие от {@link emitRowAction}, здесь НЕ нужно вызывать $event.stopPropagation():
|
|
1483
|
+
* mat-menu закрывается, когда клик всплывает до его панели
|
|
1484
|
+
* ((click)="closed.emit('click')"), поэтому остановка всплытия оставила бы
|
|
1485
|
+
* меню открытым. Меню рендерится в overlay вне строки, так что здесь нет
|
|
1486
|
+
* клика по строке, который нужно подавлять.
|
|
1486
1487
|
*/
|
|
1487
1488
|
emitMenuAction(action, row) {
|
|
1488
1489
|
this.rowAction.emit({ action, value: row });
|
|
@@ -1496,13 +1497,13 @@ class NgxAurMatTableComponent {
|
|
|
1496
1497
|
castSrc(row) {
|
|
1497
1498
|
return row;
|
|
1498
1499
|
}
|
|
1499
|
-
/** StyleBuilder.Row | string | null -> CSS
|
|
1500
|
+
/** StyleBuilder.Row | string | null -> CSS-строка | null. */
|
|
1500
1501
|
toCss(s) {
|
|
1501
1502
|
if (s == null)
|
|
1502
1503
|
return null;
|
|
1503
1504
|
return typeof s === 'string' ? s : s.build();
|
|
1504
1505
|
}
|
|
1505
|
-
/** base
|
|
1506
|
+
/** `base` с `overlay` поверх. Builder-ы -> переопределение полей; любая строка -> конкатенация (в CSS побеждает последнее). */
|
|
1506
1507
|
mergeStyle(base, overlay) {
|
|
1507
1508
|
if (base == null)
|
|
1508
1509
|
return this.toCss(overlay);
|
|
@@ -1513,14 +1514,48 @@ class NgxAurMatTableComponent {
|
|
|
1513
1514
|
}
|
|
1514
1515
|
return `${this.toCss(base) ?? ''} ${this.toCss(overlay) ?? ''}`.trim();
|
|
1515
1516
|
}
|
|
1516
|
-
/**
|
|
1517
|
+
/** хук итога: статическое значение или (totals, data) => значение. */
|
|
1517
1518
|
resolveTotal(v, totals, data) {
|
|
1518
1519
|
return typeof v === 'function' ? v(totals, data) : v;
|
|
1519
1520
|
}
|
|
1520
|
-
/**
|
|
1521
|
+
/** Хелпер для шаблона: функция активна, когда её конфигурация присутствует, если только не задано `enable: false`. */
|
|
1521
1522
|
isFeatureEnabled(cfg) {
|
|
1522
1523
|
return isFeatureEnabled(cfg);
|
|
1523
1524
|
}
|
|
1525
|
+
/**
|
|
1526
|
+
* Видна ли строка итогов на текущей странице.
|
|
1527
|
+
* По умолчанию итоги показываются только на последней странице пагинации;
|
|
1528
|
+
* `totalRowCfg.showOnEveryPage: true` возвращает показ на каждой странице.
|
|
1529
|
+
* Когда пагинация выключена — итоги показываются всегда.
|
|
1530
|
+
*/
|
|
1531
|
+
isTotalRowVisible() {
|
|
1532
|
+
if (this.tableConfig.totalRowCfg?.showOnEveryPage)
|
|
1533
|
+
return true;
|
|
1534
|
+
if (!this.paginationProvider.isEnabled)
|
|
1535
|
+
return true;
|
|
1536
|
+
const { pageIndex, lastPageIndex } = this.currentPaging();
|
|
1537
|
+
return pageIndex >= lastPageIndex;
|
|
1538
|
+
}
|
|
1539
|
+
/**
|
|
1540
|
+
* Текущий индекс страницы и индекс последней страницы.
|
|
1541
|
+
* Серверный режим читает их из paginatorState (как getTimelineVisibleData),
|
|
1542
|
+
* клиентский — из активного пагинатора и числа отфильтрованных строк.
|
|
1543
|
+
*/
|
|
1544
|
+
currentPaging() {
|
|
1545
|
+
let total, pageIndex, pageSize;
|
|
1546
|
+
if (this.paginatorState) {
|
|
1547
|
+
total = this.paginatorState.length;
|
|
1548
|
+
pageIndex = this.paginatorState.pageIndex;
|
|
1549
|
+
pageSize = this.activePaginator?.pageSize ?? this.paginationProvider.size;
|
|
1550
|
+
}
|
|
1551
|
+
else {
|
|
1552
|
+
total = this.tableDataSource.filteredData.length;
|
|
1553
|
+
pageIndex = this.activePaginator?.pageIndex ?? 0;
|
|
1554
|
+
pageSize = this.activePaginator?.pageSize ?? this.paginationProvider.size;
|
|
1555
|
+
}
|
|
1556
|
+
const lastPageIndex = pageSize > 0 ? Math.max(0, Math.ceil(total / pageSize) - 1) : 0;
|
|
1557
|
+
return { pageIndex, lastPageIndex };
|
|
1558
|
+
}
|
|
1524
1559
|
hoverActive(row) {
|
|
1525
1560
|
const h = this.tableConfig.bodyRowCfg?.hoverCfg;
|
|
1526
1561
|
return this.hovered === row && h?.enable !== false;
|
|
@@ -1528,7 +1563,7 @@ class NgxAurMatTableComponent {
|
|
|
1528
1563
|
onRowEnter(row) { this.hovered = row; }
|
|
1529
1564
|
onRowLeave(row) { if (this.hovered === row)
|
|
1530
1565
|
this.hovered = null; }
|
|
1531
|
-
/** [style]
|
|
1566
|
+
/** [style] для <tr> тела: base -> overlay наведения -> overlay подсветки (побеждает подсветка). */
|
|
1532
1567
|
rowStyle(row) {
|
|
1533
1568
|
let acc = this.rowStyles[row.id]?.style ?? null;
|
|
1534
1569
|
if (this.hoverActive(row)) {
|
|
@@ -1595,7 +1630,7 @@ class NgxAurMatTableComponent {
|
|
|
1595
1630
|
this.subscribeExternalPaginator();
|
|
1596
1631
|
const initialSort = this.matSort?.active ? { active: this.matSort.active, direction: this.matSort.direction } : undefined;
|
|
1597
1632
|
this.serverPageController.start({
|
|
1598
|
-
//
|
|
1633
|
+
// провайдер может быть ещё не инициализирован (в серверном режиме нет привязки tableData) — читаем из конфигурации
|
|
1599
1634
|
pageSize: this.tableConfig.paginationCfg?.size ?? 20,
|
|
1600
1635
|
sort: initialSort,
|
|
1601
1636
|
});
|
|
@@ -1608,19 +1643,19 @@ class NgxAurMatTableComponent {
|
|
|
1608
1643
|
}
|
|
1609
1644
|
applyExternalPaginatorState(state) {
|
|
1610
1645
|
if (this.externalPaginator) {
|
|
1611
|
-
//
|
|
1646
|
+
// РИСК (подход C из спецификации): OnPush MatPaginator требует CD, чтобы отразить императивные изменения.
|
|
1612
1647
|
this.externalPaginator.length = state.length;
|
|
1613
1648
|
this.externalPaginator.pageIndex = state.pageIndex;
|
|
1614
1649
|
this.cdr.markForCheck();
|
|
1615
1650
|
}
|
|
1616
1651
|
}
|
|
1617
|
-
/**
|
|
1652
|
+
/** Повторно вызывает pageSource (серверный режим). resetPageIndex по умолчанию true (например, изменился внешний фильтр). */
|
|
1618
1653
|
reload(opts) {
|
|
1619
1654
|
if (this.isServerMode() && this.serverPageController) {
|
|
1620
1655
|
this.serverPageController.reload(opts);
|
|
1621
1656
|
}
|
|
1622
1657
|
else {
|
|
1623
|
-
//
|
|
1658
|
+
// Клиентский режим: повторно применяем текущие данные/фильтры.
|
|
1624
1659
|
this.refreshTable();
|
|
1625
1660
|
}
|
|
1626
1661
|
}
|
|
@@ -1649,7 +1684,7 @@ class NgxAurMatTableComponent {
|
|
|
1649
1684
|
this.dragDropProvider.manager.endDrag();
|
|
1650
1685
|
}
|
|
1651
1686
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NgxAurMatTableComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1652
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: NgxAurMatTableComponent, isStandalone: false, selector: "aur-mat-table", inputs: { displayColumns: "displayColumns", extraHeaderCellTopTemplate: "extraHeaderCellTopTemplate", extraHeaderCellBottomTemplate: "extraHeaderCellBottomTemplate", tableConfig: "tableConfig", tableData: "tableData", extendedRowTemplate: "extendedRowTemplate", timelineMarkerTemplate: "timelineMarkerTemplate", paginatorState: "paginatorState", pageSource: "pageSource", externalPaginator: "externalPaginator", isTableBodyHide: "isTableBodyHide", highlight: "highlight" }, outputs: { sort: "sort", pageChange: "pageChange", rowAction: "rowAction", selectChange: "selectChange", selectAdded: "selectAdded", selectRemoved: "selectRemoved", selectedRowsAction: "selectedRowsAction", selectionModel: "selectionModel", rowClick: "rowClick", loadingChange: "loadingChange", pageError: "pageError", filterChange: "filterChange", columnOffsets: "columnOffsets", headerButton: "headerButton" }, queries: [{ propertyName: "subFooterRowTemplate", first: true, predicate: NgxTableSubFooterRowDirective, descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "rows", predicate: ["rowLink"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"aur-mat-table\"\n [ngClass]=\"{'sticky-pagination': paginationProvider.isEnabled && !externalPaginator && paginationProvider.position === 'sticky'}\">\n <ng-container>\n <!-- Filter -->\n <ng-container *ngIf=\"isFeatureEnabled(tableConfig.filterCfg)\">\n <div class=\"search-container\">\n <ng-container>\n <ng-content select=\"[ngxAurTableSearchPrefix]\"></ng-content>\n </ng-container>\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ tableConfig.filterCfg?.label }}</mat-label>\n <input matInput (keyup)=\"applySearchFilter($event)\"\n placeholder=\"{{tableConfig.filterCfg?.placeholder}}\"\n style=\"font-size: 18px;\">\n <mat-icon matPrefix>search</mat-icon>\n </mat-form-field>\n <ng-container>\n <ng-content select=\"[ngxAurTableSearchSuffix]\"></ng-content>\n </ng-container>\n </div>\n </ng-container>\n\n\n <div class=\"table-container\"\n [ngClass]=\"{'sticky-pagination': paginationProvider.isEnabled && !externalPaginator && paginationProvider.position === 'sticky'}\">\n <mat-icon *ngIf=\"headerButtonProvider.isEnabled\"\n class=\"table-settings-button\"\n [style.color]=\"headerButtonProvider.color\"\n [style.background-color]=\"headerButtonProvider.background\"\n (click)=\"headerButton.emit($event)\">\n {{ headerButtonProvider.icon }}\n </mat-icon>\n\n <!-- Table -->\n <table #table mat-table matSort\n [multiTemplateDataRows]=\"extendedRowTemplate !== null\"\n [dataSource]=\"tableDataSource\"\n (matSortChange)=\"sortTable($event)\"\n [style.height]=\"tableConfig.tableViewCfg?.height\"\n [style.max-height]=\"tableConfig.tableViewCfg?.maxHeight\"\n [style.min-height]=\"tableConfig.tableViewCfg?.minHeight\"\n [ngClass]=\"{'hide-table-body': isTableBodyHide}\">\n\n\n <!-- timeline-column-->\n <ng-container *ngIf=\"timelineProvider.isEnabled\" [matColumnDef]=\"timelineProvider.COLUMN_NAME\">\n <th mat-header-cell *matHeaderCellDef class=\"aur-timeline-cell\"\n [style.width]=\"timelineProvider.size?.width\"\n [style.min-width]=\"timelineProvider.size?.minWidth\"\n [style.max-width]=\"timelineProvider.size?.maxWidth\"></th>\n <td mat-cell *matCellDef=\"let element\" class=\"aur-timeline-cell\"\n [style.width]=\"timelineProvider.size?.width\"\n [style.min-width]=\"timelineProvider.size?.minWidth\"\n [style.max-width]=\"timelineProvider.size?.maxWidth\">\n <div class=\"aur-timeline-marker-container\">\n\n <div class=\"aur-timeline-line\"\n *ngIf=\"element.id !== _timelineFirstId\"\n [style.border-left-width.px]=\"timelineProvider.line.width\"\n [style.border-left-color]=\"_timelineGaps.get(element.id)?.topColor ?? timelineProvider.line.color\"\n [style.border-left-style]=\"_timelineGaps.get(element.id)?.topGap ? timelineProvider.line.gapStyle : timelineProvider.line.style\">\n </div>\n\n <ng-container *ngIf=\"timelineMarkerTemplate; else defaultMarker\">\n <ng-container *ngTemplateOutlet=\"timelineMarkerTemplate; context: {$implicit: element}\"></ng-container>\n </ng-container>\n <ng-template #defaultMarker>\n <div class=\"aur-timeline-marker-default\"\n [style.background-color]=\"timelineProvider.markerColor\">\n </div>\n </ng-template>\n\n <div class=\"aur-timeline-line\"\n *ngIf=\"element.id !== _timelineLastId\"\n [style.border-left-width.px]=\"timelineProvider.line.width\"\n [style.border-left-color]=\"_timelineGaps.get(element.id)?.bottomColor ?? timelineProvider.line.color\"\n [style.border-left-style]=\"_timelineGaps.get(element.id)?.bottomGap ? timelineProvider.line.gapStyle : timelineProvider.line.style\">\n </div>\n\n </div>\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"aur-timeline-cell\"\n [style.width]=\"timelineProvider.size?.width\"\n [style.min-width]=\"timelineProvider.size?.minWidth\"\n [style.max-width]=\"timelineProvider.size?.maxWidth\"></td>\n </ng-container>\n\n <!-- drag-column-->\n <ng-container *ngIf=\"dragDropProvider.isEnabled && dragDropProvider.draggable\" [matColumnDef]=\"dragDropProvider.COLUMN_NAME\">\n\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"dragDropProvider.size?.width\"\n [style.min-width]=\"dragDropProvider.size?.minWidth\"\n [style.max-width]=\"dragDropProvider.size?.maxWidth\">\n </th>\n\n <td mat-cell *matCellDef=\"let element;\" class=\"drag-column\"\n [style.width]=\"dragDropProvider.size?.width\"\n [style.min-width]=\"dragDropProvider.size?.minWidth\"\n [style.max-width]=\"dragDropProvider.size?.maxWidth\">\n <lib-icon-view draggable=\"true\"\n class=\"drag-icon\"\n [view]=\"dragDropProvider.dragIconView\"\n (dragstart)=\"onDragStart($event, element)\"\n (dragend)=\"onDragEnd($event, element)\">\n </lib-icon-view>\n\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"dragDropProvider.size?.width\"\n [style.min-width]=\"dragDropProvider.size?.minWidth\"\n [style.max-width]=\"dragDropProvider.size?.maxWidth\">\n </td>\n </ng-container>\n\n <!-- index-column-->\n <ng-container *ngIf=\"indexProvider.isEnabled\" [matColumnDef]=\"indexProvider.COLUMN_NAME\">\n\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"indexProvider.size?.width\"\n [style.min-width]=\"indexProvider.size?.minWidth\"\n [style.max-width]=\"indexProvider.size?.maxWidth\">\n <lib-column-view [config]=\"indexProvider.headerView\">\n {{ indexProvider.name }}\n </lib-column-view>\n </th>\n\n <td mat-cell *matCellDef=\"let element;\"\n [style.width]=\"indexProvider.size?.width\"\n [style.min-width]=\"indexProvider.size?.minWidth\"\n [style.max-width]=\"indexProvider.size?.maxWidth\">\n {{ element.id + indexProvider.offset }}\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"indexProvider.size?.width\"\n [style.min-width]=\"indexProvider.size?.minWidth\"\n [style.max-width]=\"indexProvider.size?.maxWidth\">\n {{ totalRowProvider.totals.get(indexProvider.COLUMN_NAME) ?? '' }}\n </td>\n </ng-container>\n\n <!-- selection-column-->\n <ng-container [matColumnDef]=\"selectionProvider.COLUMN_NAME\" *ngIf=\"selectionProvider.isEnabled\">\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"selectionProvider.size?.width\"\n [style.min-width]=\"selectionProvider.size?.minWidth\"\n [style.max-width]=\"selectionProvider.size?.maxWidth\">\n <div class=\"flex-container\">\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n [checked]=\"selectionProvider.selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selectionProvider.selection.hasValue() && !isAllSelected()\">\n </mat-checkbox>\n <div\n *ngIf=\"tableConfig.selectionCfg?.showSelectedCount && selectionProvider.selection.hasValue()\">\n {{ selectionProvider.selection.selected.length }}\n <span\n *ngIf=\"tableConfig.selectionCfg?.showTotalCount !== false\">/{{ paginatorState?.length ? paginatorState?.length : tableDataSource.filteredData.length }}</span>\n </div>\n\n <div *ngIf=\"selectionProvider.selection.hasValue() && tableConfig?.selectionCfg?.actions\">\n <ng-container *ngFor=\"let action of tableConfig.selectionCfg!.actions\">\n <button mat-icon-button\n (click)=\"emitSelectedRowsAction(action.action, selectionProvider.selection.selected)\"\n [matTooltip]=\"action.icon.tooltip || ''\"\n *ngIf=\"action.visible !== false\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n\n </th>\n <td mat-cell *matCellDef=\"let row\"\n (click)=\"$event.stopPropagation(); selectionProvider.selection.toggle(castSrc(row).rowSrc)\"\n [style.width]=\"selectionProvider.size?.width\"\n [style.min-width]=\"selectionProvider.size?.minWidth\"\n [style.max-width]=\"selectionProvider.size?.maxWidth\">\n <mat-checkbox (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selectionProvider.selection.toggle(castSrc(row).rowSrc) : null\"\n [checked]=\"selectionProvider.selection.isSelected(castSrc(row).rowSrc)\">\n </mat-checkbox>\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"selectionProvider.size?.width\"\n [style.min-width]=\"selectionProvider.size?.minWidth\"\n [style.max-width]=\"selectionProvider.size?.maxWidth\">\n </td>\n </ng-container>\n\n <!-- action column -->\n <ng-container *ngIf=\"rowActionsProvider.isEnabled\" [matColumnDef]=\"rowActionsProvider.COLUMN_NAME\">\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"rowActionsProvider.size?.width\"\n [style.min-width]=\"rowActionsProvider.size?.minWidth\"\n [style.max-width]=\"rowActionsProvider.size?.maxWidth\"></th>\n <td mat-cell *matCellDef=\"let element\" (click)=\"$event.stopPropagation()\" style=\"cursor: default\"\n [style.width]=\"rowActionsProvider.size?.width\"\n [style.min-width]=\"rowActionsProvider.size?.minWidth\"\n [style.max-width]=\"rowActionsProvider.size?.maxWidth\">\n <ng-container *ngFor=\"let action of rowActionsProvider.actionView.get(element.id)\">\n <!-- action with dropdown menu -->\n <ng-container *ngIf=\"action.menu; else directAction\">\n <ng-container *ngIf=\"action.visible !== false\">\n <mat-menu #actionMenu=\"matMenu\">\n <ng-container *ngFor=\"let item of action.menu\">\n <button mat-menu-item\n *ngIf=\"item.visible !== false\"\n [disabled]=\"item.disabled === true\"\n (click)=\"emitMenuAction(item.action, element.rowSrc)\">\n <mat-icon *ngIf=\"item.icon\" [style.color]=\"item.icon.color\">\n {{ item.icon.name }}\n </mat-icon>\n <span>{{ item.text }}</span>\n </button>\n </ng-container>\n </mat-menu>\n <button mat-icon-button\n [matMenuTriggerFor]=\"actionMenu\"\n [matTooltip]=\"action.icon.tooltip || ''\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n </ng-container>\n </ng-container>\n\n <!-- direct action (existing behavior) -->\n <ng-template #directAction>\n <button mat-icon-button\n (click)=\"emitRowAction(action.action, element.rowSrc, $event)\"\n [matTooltip]=\"action.icon.tooltip || ''\"\n *ngIf=\"action.visible !== false\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n </ng-template>\n </ng-container>\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"rowActionsProvider.size?.width\"\n [style.min-width]=\"rowActionsProvider.size?.minWidth\"\n [style.max-width]=\"rowActionsProvider.size?.maxWidth\">\n {{ totalRowProvider.totals.get(rowActionsProvider.COLUMN_NAME) ?? '' }}\n </td>\n </ng-container>\n\n <!-- value-icon-->\n <ng-container *ngFor=\"let columnConfig of tableConfig.columnsCfg\" [matColumnDef]=\"columnConfig.key\">\n\n <!-- if sortable column header -->\n <ng-container *ngIf=\"isFeatureEnabled(columnConfig.sort); else notSortable\">\n <th mat-header-cell *matHeaderCellDef [mat-sort-header]=\"columnConfig.key\"\n [arrowPosition]=\"columnConfig.sort?.position === 'start' ? 'before' : 'after'\"\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n <ng-container *ngTemplateOutlet=\"headerValue\"></ng-container>\n </th>\n </ng-container>\n\n <!-- else not sortable -->\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n <ng-container *ngTemplateOutlet=\"headerValue\"></ng-container>\n </th>\n </ng-template>\n\n <!-- header value-->\n <ng-template #headerValue>\n <lib-column-view [config]=\"columnConfig.headerView\"\n [value]=\"columnConfig.name\">\n </lib-column-view>\n </ng-template>\n\n <!-- column value \u043F\u043E\u043B\u0443\u0447\u0430\u0442\u044C \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u043A\u043E\u043B\u043E\u043D\u043E\u043A \u043D\u0443\u0436\u043D\u043E \u0447\u0435\u0440\u0435\u0437 getView(rowIndex, columnConfig.key) \u0442\u0430\u043C \u043D\u0430\u0445\u043E\u0434\u044F\u0442\u0441\u044F \u0443\u0436\u0435\n \u043F\u043E\u0434\u0433\u043E\u0442\u043E\u0432\u043B\u0435\u043D\u043D\u044B\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F \u0434\u043B\u044F \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F-->\n <td mat-cell *matCellDef=\"let element;\"\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n <lib-column-view\n [config]=\"tableView[element.id]?.get(columnConfig.key)\"\n [value]=\"element | dataPropertyGetter: columnConfig.key\">\n </lib-column-view>\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n {{ totalRowProvider.totals.get(columnConfig.key) ?? '' }}\n </td>\n\n </ng-container>\n\n <!-- extra header top cell-->\n <ng-container *ngFor=\"let extraTopCell of _displayExtraHeaderTopCell; let index = index\"\n [matColumnDef]=\"extraTopCell\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"extraHeaderCellTopTemplate; context: {key: extraTopCell.replace(EXTRA_HEADER_CELL_TOP_SUFFIX, ''), index: index}\"></ng-container>\n </th>\n </ng-container>\n\n\n <!-- extra header bottom cell-->\n <ng-container *ngFor=\"let extraBottomCell of _displayExtraHeaderBottomCell; let index = index\"\n [matColumnDef]=\"extraBottomCell\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"extraHeaderCellBottomTemplate; context: {key: extraBottomCell.replace(EXTRA_HEADER_CELL_BOTTOM_SUFFIX, ''), index: index}\"></ng-container>\n </th>\n </ng-container>\n\n <!-- extra header top row-->\n <ng-container *ngIf=\"extraHeaderCellTopTemplate\">\n <tr mat-header-row *matHeaderRowDef=\"_displayExtraHeaderTopCell; sticky: this.tableConfig.stickyCfg?.header\"\n class=\"extra-header-top-row\">\n </tr>\n </ng-container>\n\n <!-- header row-->\n <tr mat-header-row *matHeaderRowDef=\"_displayColumns; sticky: this.tableConfig.stickyCfg?.header\"\n [style]=\"_headerStyle\" [ngClass]=\"_headerClass\">\n </tr>\n\n <!-- extra header bottom row -->\n <ng-container *ngIf=\"extraHeaderCellBottomTemplate\">\n <tr mat-header-row\n *matHeaderRowDef=\"_displayExtraHeaderBottomCell; sticky: this.tableConfig.stickyCfg?.header\">\n </tr>\n </ng-container>\n\n <tr mat-row #rowLink\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop($event, row)\"\n *matRowDef=\"let row; columns: _displayColumns;\"\n (click)=\"handleRowClick(row)\"\n (mouseenter)=\"onRowEnter(row)\"\n (mouseleave)=\"onRowLeave(row)\"\n [ngClass]=\"rowNgClass(row)\"\n [style]=\"rowStyle(row)\">\n </tr>\n\n <!--expanded-row-->\n <ng-container matColumnDef=\"expandedRow\">\n <td mat-cell class=\"expanded-cell\" *matCellDef=\"let element\" [attr.colspan]=\"_displayColumns.length\"\n style=\"padding-right: 0!important;\">\n <div class=\"row-detail\"\n [@detailExpand]=\"element.rowSrc === highlighted ? expandedStateEnum.EXPANDED : expandedStateEnum.COLLAPSED\">\n <!-- timeline continuation -->\n <div *ngIf=\"timelineProvider.isEnabled\"\n class=\"aur-timeline-continuation\"\n [style.border-left-width.px]=\"timelineProvider.line.width\"\n [style.border-left-color]=\"_timelineGaps.get(element.id)?.bottomColor ?? timelineProvider.line.color\"\n [style.border-left-style]=\"_timelineGaps.get(element.id)?.bottomGap ? timelineProvider.line.gapStyle : timelineProvider.line.style\">\n </div>\n <!-- lazy-load of details -->\n <ng-container *ngIf=\"element.rowSrc === highlighted\">\n <ng-container *ngTemplateOutlet=\"extendedRowTemplate; context: {$implicit: element}\"></ng-container>\n </ng-container>\n </div>\n </td>\n </ng-container>\n\n <ng-container *ngIf=\"extendedRowTemplate\">\n <tr mat-row class=\"expanded-row\" *matRowDef=\"let row; columns: ['expandedRow']\"></tr>\n </ng-container>\n <!--expanded-row-->\n\n <ng-container *ngIf=\"totalRowProvider.isEnabled\">\n <tr mat-footer-row *matFooterRowDef=\"_displayColumns; sticky: this.tableConfig.stickyCfg?.total\"\n [style]=\"_totalStyle\" [ngClass]=\"_totalClass\"></tr>\n </ng-container>\n\n <!--sub-footer-row-->\n <ng-container matColumnDef=\"subFooterRow\">\n <td mat-footer-cell *matFooterCellDef [attr.colspan]=\"_displayColumns.length\">\n <ng-container>\n <ng-content select=\"[ngxAurTableSubFooterRow]\"></ng-content>\n </ng-container>\n </td>\n </ng-container>\n\n <ng-container *ngIf=\"subFooterRowTemplate\">\n <tr mat-footer-row *matFooterRowDef=\"['subFooterRow']; sticky: this.tableConfig.stickyCfg?.subFooter\"></tr>\n </ng-container>\n <!-- sub-footer-row END-->\n </table>\n </div>\n </ng-container>\n\n <!-- Pagination -->\n @if (this.paginationProvider.isEnabled && !externalPaginator) {\n <mat-paginator [ngClass]=\"{'hidePaginator': isTableBodyHide}\"\n [pageSizeOptions]=\"paginationProvider.sizes\"\n [pageSize]=\"paginationProvider.size\"\n [style]=\"tableConfig?.paginationCfg?.style\"\n [length]=\"paginatorState?.length\"\n [pageIndex]=\"paginatorState?.pageIndex\"\n (page)=\"onPageChangeInternal($event)\"\n showFirstLastButtons>\n </mat-paginator>\n }\n</div>\n", styles: [".aur-mat-table{display:flex;flex-direction:column}.aur-mat-table.sticky-pagination{height:100%}.aur-mat-table table{border-collapse:collapse}.aur-mat-table .table-container{position:relative}.aur-mat-table .table-container.sticky-pagination{flex-grow:1;overflow:auto}.aur-mat-table th,td{padding-right:4px!important;padding-left:4px!important}.aur-mat-table .new-color td.mat-mdc-cell,.aur-mat-table .new-color td.mat-mdc-footer-cell{color:inherit}.aur-mat-table mat-form-field{width:100%}.aur-mat-table .text-right{text-align:right!important}.aur-mat-table .pointer{cursor:pointer}.aur-mat-table .flex-container{display:flex;align-items:center}.aur-mat-table .expanded-row{height:0}.aur-mat-table .expanded-row .expanded-cell{padding-right:0!important;padding-left:0!important}.aur-mat-table .row-detail{overflow:hidden;display:flex}.aur-mat-table .clear-bottom-border{border-bottom:none}.aur-mat-table .table-settings-button{position:absolute;right:4px;top:12px;cursor:pointer;border-radius:4px;padding-bottom:2px;padding-top:2px;z-index:9999999999}.mat-mdc-header-row th:last-child{padding-right:25px!important}.aur-mat-table .search-container{display:flex;gap:8px;align-items:center}.aur-mat-table .extra-header-top-row th{border-bottom:none}.aur-mat-table .drag-icon{cursor:grab}.hide-table-body tr:not(.mat-mdc-header-row){display:none!important}.hidePaginator{display:none}.aur-mat-table .drag-column{padding-left:8px;padding-right:8px;width:35px}.aur-mat-table .aur-timeline-cell{width:40px;min-width:40px;max-width:40px;padding:0!important}.aur-mat-table .aur-timeline-marker-container{display:flex;flex-direction:column;align-items:center;height:100%;min-height:48px}.aur-mat-table .aur-timeline-line{flex:1;min-height:8px}.aur-mat-table .aur-timeline-marker-default{width:12px;height:12px;border-radius:50%;flex-shrink:0}.aur-mat-table .aur-timeline-continuation{border-left-style:solid;align-self:stretch;margin-left:20px;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i3$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i3$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i8.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: ColumnViewComponent, selector: "lib-column-view", inputs: ["config", "value"] }, { kind: "component", type: IconViewComponent, selector: "lib-icon-view", inputs: ["view"] }, { kind: "pipe", type: DataPropertyGetterPipe, name: "dataPropertyGetter" }], animations: [
|
|
1687
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: NgxAurMatTableComponent, isStandalone: false, selector: "aur-mat-table", inputs: { displayColumns: "displayColumns", extraHeaderCellTopTemplate: "extraHeaderCellTopTemplate", extraHeaderCellBottomTemplate: "extraHeaderCellBottomTemplate", tableConfig: "tableConfig", tableData: "tableData", extendedRowTemplate: "extendedRowTemplate", timelineMarkerTemplate: "timelineMarkerTemplate", paginatorState: "paginatorState", pageSource: "pageSource", externalPaginator: "externalPaginator", isTableBodyHide: "isTableBodyHide", highlight: "highlight" }, outputs: { sort: "sort", pageChange: "pageChange", rowAction: "rowAction", selectChange: "selectChange", selectAdded: "selectAdded", selectRemoved: "selectRemoved", selectedRowsAction: "selectedRowsAction", selectionModel: "selectionModel", rowClick: "rowClick", loadingChange: "loadingChange", pageError: "pageError", filterChange: "filterChange", columnOffsets: "columnOffsets", headerButton: "headerButton" }, queries: [{ propertyName: "subFooterRowTemplate", first: true, predicate: NgxTableSubFooterRowDirective, descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "rows", predicate: ["rowLink"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"aur-mat-table\"\n [ngClass]=\"{'sticky-pagination': paginationProvider.isEnabled && !externalPaginator && paginationProvider.position === 'sticky'}\">\n <ng-container>\n <!-- Filter -->\n <ng-container *ngIf=\"isFeatureEnabled(tableConfig.filterCfg)\">\n <div class=\"search-container\">\n <ng-container>\n <ng-content select=\"[ngxAurTableSearchPrefix]\"></ng-content>\n </ng-container>\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ tableConfig.filterCfg?.label }}</mat-label>\n <input matInput (keyup)=\"applySearchFilter($event)\"\n placeholder=\"{{tableConfig.filterCfg?.placeholder}}\"\n style=\"font-size: 18px;\">\n <mat-icon matPrefix>search</mat-icon>\n </mat-form-field>\n <ng-container>\n <ng-content select=\"[ngxAurTableSearchSuffix]\"></ng-content>\n </ng-container>\n </div>\n </ng-container>\n\n\n <div class=\"table-container\"\n [ngClass]=\"{'sticky-pagination': paginationProvider.isEnabled && !externalPaginator && paginationProvider.position === 'sticky'}\">\n <mat-icon *ngIf=\"headerButtonProvider.isEnabled\"\n class=\"table-settings-button\"\n [style.color]=\"headerButtonProvider.color\"\n [style.background-color]=\"headerButtonProvider.background\"\n (click)=\"headerButton.emit($event)\">\n {{ headerButtonProvider.icon }}\n </mat-icon>\n\n <!-- Table -->\n <table #table mat-table matSort\n [multiTemplateDataRows]=\"extendedRowTemplate !== null\"\n [dataSource]=\"tableDataSource\"\n (matSortChange)=\"sortTable($event)\"\n [style.height]=\"tableConfig.tableViewCfg?.height\"\n [style.max-height]=\"tableConfig.tableViewCfg?.maxHeight\"\n [style.min-height]=\"tableConfig.tableViewCfg?.minHeight\"\n [ngClass]=\"{'hide-table-body': isTableBodyHide}\">\n\n\n <!-- timeline-column-->\n <ng-container *ngIf=\"timelineProvider.isEnabled\" [matColumnDef]=\"timelineProvider.COLUMN_NAME\">\n <th mat-header-cell *matHeaderCellDef class=\"aur-timeline-cell\"\n [style.width]=\"timelineProvider.size?.width\"\n [style.min-width]=\"timelineProvider.size?.minWidth\"\n [style.max-width]=\"timelineProvider.size?.maxWidth\"></th>\n <td mat-cell *matCellDef=\"let element\" class=\"aur-timeline-cell\"\n [style.width]=\"timelineProvider.size?.width\"\n [style.min-width]=\"timelineProvider.size?.minWidth\"\n [style.max-width]=\"timelineProvider.size?.maxWidth\">\n <div class=\"aur-timeline-marker-container\">\n\n <div class=\"aur-timeline-line\"\n *ngIf=\"element.id !== _timelineFirstId\"\n [style.border-left-width.px]=\"timelineProvider.line.width\"\n [style.border-left-color]=\"_timelineGaps.get(element.id)?.topColor ?? timelineProvider.line.color\"\n [style.border-left-style]=\"_timelineGaps.get(element.id)?.topGap ? timelineProvider.line.gapStyle : timelineProvider.line.style\">\n </div>\n\n <ng-container *ngIf=\"timelineMarkerTemplate; else defaultMarker\">\n <ng-container *ngTemplateOutlet=\"timelineMarkerTemplate; context: {$implicit: element}\"></ng-container>\n </ng-container>\n <ng-template #defaultMarker>\n <div class=\"aur-timeline-marker-default\"\n [style.background-color]=\"timelineProvider.markerColor\">\n </div>\n </ng-template>\n\n <div class=\"aur-timeline-line\"\n *ngIf=\"element.id !== _timelineLastId\"\n [style.border-left-width.px]=\"timelineProvider.line.width\"\n [style.border-left-color]=\"_timelineGaps.get(element.id)?.bottomColor ?? timelineProvider.line.color\"\n [style.border-left-style]=\"_timelineGaps.get(element.id)?.bottomGap ? timelineProvider.line.gapStyle : timelineProvider.line.style\">\n </div>\n\n </div>\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"aur-timeline-cell\"\n [style.width]=\"timelineProvider.size?.width\"\n [style.min-width]=\"timelineProvider.size?.minWidth\"\n [style.max-width]=\"timelineProvider.size?.maxWidth\"></td>\n </ng-container>\n\n <!-- drag-column-->\n <ng-container *ngIf=\"dragDropProvider.isEnabled && dragDropProvider.draggable\" [matColumnDef]=\"dragDropProvider.COLUMN_NAME\">\n\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"dragDropProvider.size?.width\"\n [style.min-width]=\"dragDropProvider.size?.minWidth\"\n [style.max-width]=\"dragDropProvider.size?.maxWidth\">\n </th>\n\n <td mat-cell *matCellDef=\"let element;\" class=\"drag-column\"\n [style.width]=\"dragDropProvider.size?.width\"\n [style.min-width]=\"dragDropProvider.size?.minWidth\"\n [style.max-width]=\"dragDropProvider.size?.maxWidth\">\n <lib-icon-view draggable=\"true\"\n class=\"drag-icon\"\n [view]=\"dragDropProvider.dragIconView\"\n (dragstart)=\"onDragStart($event, element)\"\n (dragend)=\"onDragEnd($event, element)\">\n </lib-icon-view>\n\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"dragDropProvider.size?.width\"\n [style.min-width]=\"dragDropProvider.size?.minWidth\"\n [style.max-width]=\"dragDropProvider.size?.maxWidth\">\n </td>\n </ng-container>\n\n <!-- index-column-->\n <ng-container *ngIf=\"indexProvider.isEnabled\" [matColumnDef]=\"indexProvider.COLUMN_NAME\">\n\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"indexProvider.size?.width\"\n [style.min-width]=\"indexProvider.size?.minWidth\"\n [style.max-width]=\"indexProvider.size?.maxWidth\">\n <lib-column-view [config]=\"indexProvider.headerView\">\n {{ indexProvider.name }}\n </lib-column-view>\n </th>\n\n <td mat-cell *matCellDef=\"let element;\"\n [style.width]=\"indexProvider.size?.width\"\n [style.min-width]=\"indexProvider.size?.minWidth\"\n [style.max-width]=\"indexProvider.size?.maxWidth\">\n {{ element.id + indexProvider.offset }}\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"indexProvider.size?.width\"\n [style.min-width]=\"indexProvider.size?.minWidth\"\n [style.max-width]=\"indexProvider.size?.maxWidth\">\n {{ totalRowProvider.totals.get(indexProvider.COLUMN_NAME) ?? '' }}\n </td>\n </ng-container>\n\n <!-- selection-column-->\n <ng-container [matColumnDef]=\"selectionProvider.COLUMN_NAME\" *ngIf=\"selectionProvider.isEnabled\">\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"selectionProvider.size?.width\"\n [style.min-width]=\"selectionProvider.size?.minWidth\"\n [style.max-width]=\"selectionProvider.size?.maxWidth\">\n <div class=\"flex-container\">\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n [checked]=\"selectionProvider.selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selectionProvider.selection.hasValue() && !isAllSelected()\">\n </mat-checkbox>\n <div\n *ngIf=\"tableConfig.selectionCfg?.showSelectedCount && selectionProvider.selection.hasValue()\">\n {{ selectionProvider.selection.selected.length }}\n <span\n *ngIf=\"tableConfig.selectionCfg?.showTotalCount !== false\">/{{ paginatorState?.length ? paginatorState?.length : tableDataSource.filteredData.length }}</span>\n </div>\n\n <div *ngIf=\"selectionProvider.selection.hasValue() && tableConfig?.selectionCfg?.actions\">\n <ng-container *ngFor=\"let action of tableConfig.selectionCfg!.actions\">\n <button mat-icon-button\n (click)=\"emitSelectedRowsAction(action.action, selectionProvider.selection.selected)\"\n [matTooltip]=\"action.icon.tooltip || ''\"\n *ngIf=\"action.visible !== false\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n\n </th>\n <td mat-cell *matCellDef=\"let row\"\n (click)=\"$event.stopPropagation(); selectionProvider.selection.toggle(castSrc(row).rowSrc)\"\n [style.width]=\"selectionProvider.size?.width\"\n [style.min-width]=\"selectionProvider.size?.minWidth\"\n [style.max-width]=\"selectionProvider.size?.maxWidth\">\n <mat-checkbox (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selectionProvider.selection.toggle(castSrc(row).rowSrc) : null\"\n [checked]=\"selectionProvider.selection.isSelected(castSrc(row).rowSrc)\">\n </mat-checkbox>\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"selectionProvider.size?.width\"\n [style.min-width]=\"selectionProvider.size?.minWidth\"\n [style.max-width]=\"selectionProvider.size?.maxWidth\">\n </td>\n </ng-container>\n\n <!-- action column -->\n <ng-container *ngIf=\"rowActionsProvider.isEnabled\" [matColumnDef]=\"rowActionsProvider.COLUMN_NAME\">\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"rowActionsProvider.size?.width\"\n [style.min-width]=\"rowActionsProvider.size?.minWidth\"\n [style.max-width]=\"rowActionsProvider.size?.maxWidth\"></th>\n <td mat-cell *matCellDef=\"let element\" (click)=\"$event.stopPropagation()\" style=\"cursor: default\"\n [style.width]=\"rowActionsProvider.size?.width\"\n [style.min-width]=\"rowActionsProvider.size?.minWidth\"\n [style.max-width]=\"rowActionsProvider.size?.maxWidth\">\n <ng-container *ngFor=\"let action of rowActionsProvider.actionView.get(element.id)\">\n <!-- action with dropdown menu -->\n <ng-container *ngIf=\"action.menu; else directAction\">\n <ng-container *ngIf=\"action.visible !== false\">\n <mat-menu #actionMenu=\"matMenu\">\n <ng-container *ngFor=\"let item of action.menu\">\n <button mat-menu-item\n *ngIf=\"item.visible !== false\"\n [disabled]=\"item.disabled === true\"\n (click)=\"emitMenuAction(item.action, element.rowSrc)\">\n <mat-icon *ngIf=\"item.icon\" [style.color]=\"item.icon.color\">\n {{ item.icon.name }}\n </mat-icon>\n <span>{{ item.text }}</span>\n </button>\n </ng-container>\n </mat-menu>\n <button mat-icon-button\n [matMenuTriggerFor]=\"actionMenu\"\n [matTooltip]=\"action.icon.tooltip || ''\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n </ng-container>\n </ng-container>\n\n <!-- direct action (existing behavior) -->\n <ng-template #directAction>\n <button mat-icon-button\n (click)=\"emitRowAction(action.action, element.rowSrc, $event)\"\n [matTooltip]=\"action.icon.tooltip || ''\"\n *ngIf=\"action.visible !== false\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n </ng-template>\n </ng-container>\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"rowActionsProvider.size?.width\"\n [style.min-width]=\"rowActionsProvider.size?.minWidth\"\n [style.max-width]=\"rowActionsProvider.size?.maxWidth\">\n {{ totalRowProvider.totals.get(rowActionsProvider.COLUMN_NAME) ?? '' }}\n </td>\n </ng-container>\n\n <!-- value-icon-->\n <ng-container *ngFor=\"let columnConfig of tableConfig.columnsCfg\" [matColumnDef]=\"columnConfig.key\">\n\n <!-- if sortable column header -->\n <ng-container *ngIf=\"isFeatureEnabled(columnConfig.sort); else notSortable\">\n <th mat-header-cell *matHeaderCellDef [mat-sort-header]=\"columnConfig.key\"\n [arrowPosition]=\"columnConfig.sort?.position === 'start' ? 'before' : 'after'\"\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n <ng-container *ngTemplateOutlet=\"headerValue\"></ng-container>\n </th>\n </ng-container>\n\n <!-- else not sortable -->\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n <ng-container *ngTemplateOutlet=\"headerValue\"></ng-container>\n </th>\n </ng-template>\n\n <!-- header value-->\n <ng-template #headerValue>\n <lib-column-view [config]=\"columnConfig.headerView\"\n [value]=\"columnConfig.name\">\n </lib-column-view>\n </ng-template>\n\n <!-- column value \u043F\u043E\u043B\u0443\u0447\u0430\u0442\u044C \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u043A\u043E\u043B\u043E\u043D\u043E\u043A \u043D\u0443\u0436\u043D\u043E \u0447\u0435\u0440\u0435\u0437 getView(rowIndex, columnConfig.key) \u0442\u0430\u043C \u043D\u0430\u0445\u043E\u0434\u044F\u0442\u0441\u044F \u0443\u0436\u0435\n \u043F\u043E\u0434\u0433\u043E\u0442\u043E\u0432\u043B\u0435\u043D\u043D\u044B\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F \u0434\u043B\u044F \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F-->\n <td mat-cell *matCellDef=\"let element;\"\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n <lib-column-view\n [config]=\"tableView[element.id]?.get(columnConfig.key)\"\n [value]=\"element | dataPropertyGetter: columnConfig.key\">\n </lib-column-view>\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n {{ totalRowProvider.totals.get(columnConfig.key) ?? '' }}\n </td>\n\n </ng-container>\n\n <!-- extra header top cell-->\n <ng-container *ngFor=\"let extraTopCell of _displayExtraHeaderTopCell; let index = index\"\n [matColumnDef]=\"extraTopCell\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"extraHeaderCellTopTemplate; context: {key: extraTopCell.replace(EXTRA_HEADER_CELL_TOP_SUFFIX, ''), index: index}\"></ng-container>\n </th>\n </ng-container>\n\n\n <!-- extra header bottom cell-->\n <ng-container *ngFor=\"let extraBottomCell of _displayExtraHeaderBottomCell; let index = index\"\n [matColumnDef]=\"extraBottomCell\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"extraHeaderCellBottomTemplate; context: {key: extraBottomCell.replace(EXTRA_HEADER_CELL_BOTTOM_SUFFIX, ''), index: index}\"></ng-container>\n </th>\n </ng-container>\n\n <!-- extra header top row-->\n <ng-container *ngIf=\"extraHeaderCellTopTemplate\">\n <tr mat-header-row *matHeaderRowDef=\"_displayExtraHeaderTopCell; sticky: this.tableConfig.stickyCfg?.header\"\n class=\"extra-header-top-row\">\n </tr>\n </ng-container>\n\n <!-- header row-->\n <tr mat-header-row *matHeaderRowDef=\"_displayColumns; sticky: this.tableConfig.stickyCfg?.header\"\n [style]=\"_headerStyle\" [ngClass]=\"_headerClass\">\n </tr>\n\n <!-- extra header bottom row -->\n <ng-container *ngIf=\"extraHeaderCellBottomTemplate\">\n <tr mat-header-row\n *matHeaderRowDef=\"_displayExtraHeaderBottomCell; sticky: this.tableConfig.stickyCfg?.header\">\n </tr>\n </ng-container>\n\n <tr mat-row #rowLink\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop($event, row)\"\n *matRowDef=\"let row; columns: _displayColumns;\"\n (click)=\"handleRowClick(row)\"\n (mouseenter)=\"onRowEnter(row)\"\n (mouseleave)=\"onRowLeave(row)\"\n [ngClass]=\"rowNgClass(row)\"\n [style]=\"rowStyle(row)\">\n </tr>\n\n <!--expanded-row-->\n <ng-container matColumnDef=\"expandedRow\">\n <td mat-cell class=\"expanded-cell\" *matCellDef=\"let element\" [attr.colspan]=\"_displayColumns.length\"\n style=\"padding-right: 0!important;\">\n <div class=\"row-detail\"\n [@detailExpand]=\"element.rowSrc === highlighted ? expandedStateEnum.EXPANDED : expandedStateEnum.COLLAPSED\">\n <!-- timeline continuation -->\n <div *ngIf=\"timelineProvider.isEnabled\"\n class=\"aur-timeline-continuation\"\n [style.border-left-width.px]=\"timelineProvider.line.width\"\n [style.border-left-color]=\"_timelineGaps.get(element.id)?.bottomColor ?? timelineProvider.line.color\"\n [style.border-left-style]=\"_timelineGaps.get(element.id)?.bottomGap ? timelineProvider.line.gapStyle : timelineProvider.line.style\">\n </div>\n <!-- lazy-load of details -->\n <ng-container *ngIf=\"element.rowSrc === highlighted\">\n <ng-container *ngTemplateOutlet=\"extendedRowTemplate; context: {$implicit: element}\"></ng-container>\n </ng-container>\n </div>\n </td>\n </ng-container>\n\n <ng-container *ngIf=\"extendedRowTemplate\">\n <tr mat-row class=\"expanded-row\" *matRowDef=\"let row; columns: ['expandedRow']\"></tr>\n </ng-container>\n <!--expanded-row-->\n\n <ng-container *ngIf=\"totalRowProvider.isEnabled\">\n <tr mat-footer-row *matFooterRowDef=\"_displayColumns; sticky: this.tableConfig.stickyCfg?.total\"\n [style]=\"_totalStyle\" [ngClass]=\"_totalClass\"\n [style.display]=\"isTotalRowVisible() ? null : 'none'\"></tr>\n </ng-container>\n\n <!--sub-footer-row-->\n <ng-container matColumnDef=\"subFooterRow\">\n <td mat-footer-cell *matFooterCellDef [attr.colspan]=\"_displayColumns.length\">\n <ng-container>\n <ng-content select=\"[ngxAurTableSubFooterRow]\"></ng-content>\n </ng-container>\n </td>\n </ng-container>\n\n <ng-container *ngIf=\"subFooterRowTemplate\">\n <tr mat-footer-row *matFooterRowDef=\"['subFooterRow']; sticky: this.tableConfig.stickyCfg?.subFooter\"></tr>\n </ng-container>\n <!-- sub-footer-row END-->\n </table>\n </div>\n </ng-container>\n\n <!-- Pagination -->\n @if (this.paginationProvider.isEnabled && !externalPaginator) {\n <mat-paginator [ngClass]=\"{'hidePaginator': isTableBodyHide}\"\n [pageSizeOptions]=\"paginationProvider.sizes\"\n [pageSize]=\"paginationProvider.size\"\n [style]=\"tableConfig?.paginationCfg?.style\"\n [length]=\"paginatorState?.length\"\n [pageIndex]=\"paginatorState?.pageIndex\"\n (page)=\"onPageChangeInternal($event)\"\n showFirstLastButtons>\n </mat-paginator>\n }\n</div>\n", styles: [".aur-mat-table{display:flex;flex-direction:column}.aur-mat-table.sticky-pagination{height:100%}.aur-mat-table table{border-collapse:collapse}.aur-mat-table .table-container{position:relative}.aur-mat-table .table-container.sticky-pagination{flex-grow:1;overflow:auto}.aur-mat-table th,td{padding-right:4px!important;padding-left:4px!important}.aur-mat-table .new-color td.mat-mdc-cell,.aur-mat-table .new-color td.mat-mdc-footer-cell{color:inherit}.aur-mat-table mat-form-field{width:100%}.aur-mat-table .text-right{text-align:right!important}.aur-mat-table .pointer{cursor:pointer}.aur-mat-table .flex-container{display:flex;align-items:center}.aur-mat-table .expanded-row{height:0}.aur-mat-table .expanded-row .expanded-cell{padding-right:0!important;padding-left:0!important}.aur-mat-table .row-detail{overflow:hidden;display:flex}.aur-mat-table .clear-bottom-border{border-bottom:none}.aur-mat-table .table-settings-button{position:absolute;right:4px;top:12px;cursor:pointer;border-radius:4px;padding-bottom:2px;padding-top:2px;z-index:9999999999}.mat-mdc-header-row th:last-child{padding-right:25px!important}.aur-mat-table .search-container{display:flex;gap:8px;align-items:center}.aur-mat-table .extra-header-top-row th{border-bottom:none}.aur-mat-table .drag-icon{cursor:grab}.hide-table-body tr:not(.mat-mdc-header-row){display:none!important}.hidePaginator{display:none}.aur-mat-table .drag-column{padding-left:8px;padding-right:8px;width:35px}.aur-mat-table .aur-timeline-cell{width:40px;min-width:40px;max-width:40px;padding:0!important}.aur-mat-table .aur-timeline-marker-container{display:flex;flex-direction:column;align-items:center;height:100%;min-height:48px}.aur-mat-table .aur-timeline-line{flex:1;min-height:8px}.aur-mat-table .aur-timeline-marker-default{width:12px;height:12px;border-radius:50%;flex-shrink:0}.aur-mat-table .aur-timeline-continuation{border-left-style:solid;align-self:stretch;margin-left:20px;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i3$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i3$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i8.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: ColumnViewComponent, selector: "lib-column-view", inputs: ["config", "value"] }, { kind: "component", type: IconViewComponent, selector: "lib-icon-view", inputs: ["view"] }, { kind: "pipe", type: DataPropertyGetterPipe, name: "dataPropertyGetter" }], animations: [
|
|
1653
1688
|
trigger('detailExpand', [
|
|
1654
1689
|
state(ExpandState.COLLAPSED, style({ height: '0px', minHeight: '0' })),
|
|
1655
1690
|
state(ExpandState.EXPANDED, style({ height: '*' })),
|
|
@@ -1665,7 +1700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
1665
1700
|
state(ExpandState.EXPANDED, style({ height: '*' })),
|
|
1666
1701
|
transition(`${ExpandState.EXPANDED} <=> ${ExpandState.COLLAPSED}`, animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
1667
1702
|
]),
|
|
1668
|
-
], standalone: false, template: "<div class=\"aur-mat-table\"\n [ngClass]=\"{'sticky-pagination': paginationProvider.isEnabled && !externalPaginator && paginationProvider.position === 'sticky'}\">\n <ng-container>\n <!-- Filter -->\n <ng-container *ngIf=\"isFeatureEnabled(tableConfig.filterCfg)\">\n <div class=\"search-container\">\n <ng-container>\n <ng-content select=\"[ngxAurTableSearchPrefix]\"></ng-content>\n </ng-container>\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ tableConfig.filterCfg?.label }}</mat-label>\n <input matInput (keyup)=\"applySearchFilter($event)\"\n placeholder=\"{{tableConfig.filterCfg?.placeholder}}\"\n style=\"font-size: 18px;\">\n <mat-icon matPrefix>search</mat-icon>\n </mat-form-field>\n <ng-container>\n <ng-content select=\"[ngxAurTableSearchSuffix]\"></ng-content>\n </ng-container>\n </div>\n </ng-container>\n\n\n <div class=\"table-container\"\n [ngClass]=\"{'sticky-pagination': paginationProvider.isEnabled && !externalPaginator && paginationProvider.position === 'sticky'}\">\n <mat-icon *ngIf=\"headerButtonProvider.isEnabled\"\n class=\"table-settings-button\"\n [style.color]=\"headerButtonProvider.color\"\n [style.background-color]=\"headerButtonProvider.background\"\n (click)=\"headerButton.emit($event)\">\n {{ headerButtonProvider.icon }}\n </mat-icon>\n\n <!-- Table -->\n <table #table mat-table matSort\n [multiTemplateDataRows]=\"extendedRowTemplate !== null\"\n [dataSource]=\"tableDataSource\"\n (matSortChange)=\"sortTable($event)\"\n [style.height]=\"tableConfig.tableViewCfg?.height\"\n [style.max-height]=\"tableConfig.tableViewCfg?.maxHeight\"\n [style.min-height]=\"tableConfig.tableViewCfg?.minHeight\"\n [ngClass]=\"{'hide-table-body': isTableBodyHide}\">\n\n\n <!-- timeline-column-->\n <ng-container *ngIf=\"timelineProvider.isEnabled\" [matColumnDef]=\"timelineProvider.COLUMN_NAME\">\n <th mat-header-cell *matHeaderCellDef class=\"aur-timeline-cell\"\n [style.width]=\"timelineProvider.size?.width\"\n [style.min-width]=\"timelineProvider.size?.minWidth\"\n [style.max-width]=\"timelineProvider.size?.maxWidth\"></th>\n <td mat-cell *matCellDef=\"let element\" class=\"aur-timeline-cell\"\n [style.width]=\"timelineProvider.size?.width\"\n [style.min-width]=\"timelineProvider.size?.minWidth\"\n [style.max-width]=\"timelineProvider.size?.maxWidth\">\n <div class=\"aur-timeline-marker-container\">\n\n <div class=\"aur-timeline-line\"\n *ngIf=\"element.id !== _timelineFirstId\"\n [style.border-left-width.px]=\"timelineProvider.line.width\"\n [style.border-left-color]=\"_timelineGaps.get(element.id)?.topColor ?? timelineProvider.line.color\"\n [style.border-left-style]=\"_timelineGaps.get(element.id)?.topGap ? timelineProvider.line.gapStyle : timelineProvider.line.style\">\n </div>\n\n <ng-container *ngIf=\"timelineMarkerTemplate; else defaultMarker\">\n <ng-container *ngTemplateOutlet=\"timelineMarkerTemplate; context: {$implicit: element}\"></ng-container>\n </ng-container>\n <ng-template #defaultMarker>\n <div class=\"aur-timeline-marker-default\"\n [style.background-color]=\"timelineProvider.markerColor\">\n </div>\n </ng-template>\n\n <div class=\"aur-timeline-line\"\n *ngIf=\"element.id !== _timelineLastId\"\n [style.border-left-width.px]=\"timelineProvider.line.width\"\n [style.border-left-color]=\"_timelineGaps.get(element.id)?.bottomColor ?? timelineProvider.line.color\"\n [style.border-left-style]=\"_timelineGaps.get(element.id)?.bottomGap ? timelineProvider.line.gapStyle : timelineProvider.line.style\">\n </div>\n\n </div>\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"aur-timeline-cell\"\n [style.width]=\"timelineProvider.size?.width\"\n [style.min-width]=\"timelineProvider.size?.minWidth\"\n [style.max-width]=\"timelineProvider.size?.maxWidth\"></td>\n </ng-container>\n\n <!-- drag-column-->\n <ng-container *ngIf=\"dragDropProvider.isEnabled && dragDropProvider.draggable\" [matColumnDef]=\"dragDropProvider.COLUMN_NAME\">\n\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"dragDropProvider.size?.width\"\n [style.min-width]=\"dragDropProvider.size?.minWidth\"\n [style.max-width]=\"dragDropProvider.size?.maxWidth\">\n </th>\n\n <td mat-cell *matCellDef=\"let element;\" class=\"drag-column\"\n [style.width]=\"dragDropProvider.size?.width\"\n [style.min-width]=\"dragDropProvider.size?.minWidth\"\n [style.max-width]=\"dragDropProvider.size?.maxWidth\">\n <lib-icon-view draggable=\"true\"\n class=\"drag-icon\"\n [view]=\"dragDropProvider.dragIconView\"\n (dragstart)=\"onDragStart($event, element)\"\n (dragend)=\"onDragEnd($event, element)\">\n </lib-icon-view>\n\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"dragDropProvider.size?.width\"\n [style.min-width]=\"dragDropProvider.size?.minWidth\"\n [style.max-width]=\"dragDropProvider.size?.maxWidth\">\n </td>\n </ng-container>\n\n <!-- index-column-->\n <ng-container *ngIf=\"indexProvider.isEnabled\" [matColumnDef]=\"indexProvider.COLUMN_NAME\">\n\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"indexProvider.size?.width\"\n [style.min-width]=\"indexProvider.size?.minWidth\"\n [style.max-width]=\"indexProvider.size?.maxWidth\">\n <lib-column-view [config]=\"indexProvider.headerView\">\n {{ indexProvider.name }}\n </lib-column-view>\n </th>\n\n <td mat-cell *matCellDef=\"let element;\"\n [style.width]=\"indexProvider.size?.width\"\n [style.min-width]=\"indexProvider.size?.minWidth\"\n [style.max-width]=\"indexProvider.size?.maxWidth\">\n {{ element.id + indexProvider.offset }}\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"indexProvider.size?.width\"\n [style.min-width]=\"indexProvider.size?.minWidth\"\n [style.max-width]=\"indexProvider.size?.maxWidth\">\n {{ totalRowProvider.totals.get(indexProvider.COLUMN_NAME) ?? '' }}\n </td>\n </ng-container>\n\n <!-- selection-column-->\n <ng-container [matColumnDef]=\"selectionProvider.COLUMN_NAME\" *ngIf=\"selectionProvider.isEnabled\">\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"selectionProvider.size?.width\"\n [style.min-width]=\"selectionProvider.size?.minWidth\"\n [style.max-width]=\"selectionProvider.size?.maxWidth\">\n <div class=\"flex-container\">\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n [checked]=\"selectionProvider.selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selectionProvider.selection.hasValue() && !isAllSelected()\">\n </mat-checkbox>\n <div\n *ngIf=\"tableConfig.selectionCfg?.showSelectedCount && selectionProvider.selection.hasValue()\">\n {{ selectionProvider.selection.selected.length }}\n <span\n *ngIf=\"tableConfig.selectionCfg?.showTotalCount !== false\">/{{ paginatorState?.length ? paginatorState?.length : tableDataSource.filteredData.length }}</span>\n </div>\n\n <div *ngIf=\"selectionProvider.selection.hasValue() && tableConfig?.selectionCfg?.actions\">\n <ng-container *ngFor=\"let action of tableConfig.selectionCfg!.actions\">\n <button mat-icon-button\n (click)=\"emitSelectedRowsAction(action.action, selectionProvider.selection.selected)\"\n [matTooltip]=\"action.icon.tooltip || ''\"\n *ngIf=\"action.visible !== false\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n\n </th>\n <td mat-cell *matCellDef=\"let row\"\n (click)=\"$event.stopPropagation(); selectionProvider.selection.toggle(castSrc(row).rowSrc)\"\n [style.width]=\"selectionProvider.size?.width\"\n [style.min-width]=\"selectionProvider.size?.minWidth\"\n [style.max-width]=\"selectionProvider.size?.maxWidth\">\n <mat-checkbox (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selectionProvider.selection.toggle(castSrc(row).rowSrc) : null\"\n [checked]=\"selectionProvider.selection.isSelected(castSrc(row).rowSrc)\">\n </mat-checkbox>\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"selectionProvider.size?.width\"\n [style.min-width]=\"selectionProvider.size?.minWidth\"\n [style.max-width]=\"selectionProvider.size?.maxWidth\">\n </td>\n </ng-container>\n\n <!-- action column -->\n <ng-container *ngIf=\"rowActionsProvider.isEnabled\" [matColumnDef]=\"rowActionsProvider.COLUMN_NAME\">\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"rowActionsProvider.size?.width\"\n [style.min-width]=\"rowActionsProvider.size?.minWidth\"\n [style.max-width]=\"rowActionsProvider.size?.maxWidth\"></th>\n <td mat-cell *matCellDef=\"let element\" (click)=\"$event.stopPropagation()\" style=\"cursor: default\"\n [style.width]=\"rowActionsProvider.size?.width\"\n [style.min-width]=\"rowActionsProvider.size?.minWidth\"\n [style.max-width]=\"rowActionsProvider.size?.maxWidth\">\n <ng-container *ngFor=\"let action of rowActionsProvider.actionView.get(element.id)\">\n <!-- action with dropdown menu -->\n <ng-container *ngIf=\"action.menu; else directAction\">\n <ng-container *ngIf=\"action.visible !== false\">\n <mat-menu #actionMenu=\"matMenu\">\n <ng-container *ngFor=\"let item of action.menu\">\n <button mat-menu-item\n *ngIf=\"item.visible !== false\"\n [disabled]=\"item.disabled === true\"\n (click)=\"emitMenuAction(item.action, element.rowSrc)\">\n <mat-icon *ngIf=\"item.icon\" [style.color]=\"item.icon.color\">\n {{ item.icon.name }}\n </mat-icon>\n <span>{{ item.text }}</span>\n </button>\n </ng-container>\n </mat-menu>\n <button mat-icon-button\n [matMenuTriggerFor]=\"actionMenu\"\n [matTooltip]=\"action.icon.tooltip || ''\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n </ng-container>\n </ng-container>\n\n <!-- direct action (existing behavior) -->\n <ng-template #directAction>\n <button mat-icon-button\n (click)=\"emitRowAction(action.action, element.rowSrc, $event)\"\n [matTooltip]=\"action.icon.tooltip || ''\"\n *ngIf=\"action.visible !== false\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n </ng-template>\n </ng-container>\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"rowActionsProvider.size?.width\"\n [style.min-width]=\"rowActionsProvider.size?.minWidth\"\n [style.max-width]=\"rowActionsProvider.size?.maxWidth\">\n {{ totalRowProvider.totals.get(rowActionsProvider.COLUMN_NAME) ?? '' }}\n </td>\n </ng-container>\n\n <!-- value-icon-->\n <ng-container *ngFor=\"let columnConfig of tableConfig.columnsCfg\" [matColumnDef]=\"columnConfig.key\">\n\n <!-- if sortable column header -->\n <ng-container *ngIf=\"isFeatureEnabled(columnConfig.sort); else notSortable\">\n <th mat-header-cell *matHeaderCellDef [mat-sort-header]=\"columnConfig.key\"\n [arrowPosition]=\"columnConfig.sort?.position === 'start' ? 'before' : 'after'\"\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n <ng-container *ngTemplateOutlet=\"headerValue\"></ng-container>\n </th>\n </ng-container>\n\n <!-- else not sortable -->\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n <ng-container *ngTemplateOutlet=\"headerValue\"></ng-container>\n </th>\n </ng-template>\n\n <!-- header value-->\n <ng-template #headerValue>\n <lib-column-view [config]=\"columnConfig.headerView\"\n [value]=\"columnConfig.name\">\n </lib-column-view>\n </ng-template>\n\n <!-- column value \u043F\u043E\u043B\u0443\u0447\u0430\u0442\u044C \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u043A\u043E\u043B\u043E\u043D\u043E\u043A \u043D\u0443\u0436\u043D\u043E \u0447\u0435\u0440\u0435\u0437 getView(rowIndex, columnConfig.key) \u0442\u0430\u043C \u043D\u0430\u0445\u043E\u0434\u044F\u0442\u0441\u044F \u0443\u0436\u0435\n \u043F\u043E\u0434\u0433\u043E\u0442\u043E\u0432\u043B\u0435\u043D\u043D\u044B\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F \u0434\u043B\u044F \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F-->\n <td mat-cell *matCellDef=\"let element;\"\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n <lib-column-view\n [config]=\"tableView[element.id]?.get(columnConfig.key)\"\n [value]=\"element | dataPropertyGetter: columnConfig.key\">\n </lib-column-view>\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n {{ totalRowProvider.totals.get(columnConfig.key) ?? '' }}\n </td>\n\n </ng-container>\n\n <!-- extra header top cell-->\n <ng-container *ngFor=\"let extraTopCell of _displayExtraHeaderTopCell; let index = index\"\n [matColumnDef]=\"extraTopCell\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"extraHeaderCellTopTemplate; context: {key: extraTopCell.replace(EXTRA_HEADER_CELL_TOP_SUFFIX, ''), index: index}\"></ng-container>\n </th>\n </ng-container>\n\n\n <!-- extra header bottom cell-->\n <ng-container *ngFor=\"let extraBottomCell of _displayExtraHeaderBottomCell; let index = index\"\n [matColumnDef]=\"extraBottomCell\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"extraHeaderCellBottomTemplate; context: {key: extraBottomCell.replace(EXTRA_HEADER_CELL_BOTTOM_SUFFIX, ''), index: index}\"></ng-container>\n </th>\n </ng-container>\n\n <!-- extra header top row-->\n <ng-container *ngIf=\"extraHeaderCellTopTemplate\">\n <tr mat-header-row *matHeaderRowDef=\"_displayExtraHeaderTopCell; sticky: this.tableConfig.stickyCfg?.header\"\n class=\"extra-header-top-row\">\n </tr>\n </ng-container>\n\n <!-- header row-->\n <tr mat-header-row *matHeaderRowDef=\"_displayColumns; sticky: this.tableConfig.stickyCfg?.header\"\n [style]=\"_headerStyle\" [ngClass]=\"_headerClass\">\n </tr>\n\n <!-- extra header bottom row -->\n <ng-container *ngIf=\"extraHeaderCellBottomTemplate\">\n <tr mat-header-row\n *matHeaderRowDef=\"_displayExtraHeaderBottomCell; sticky: this.tableConfig.stickyCfg?.header\">\n </tr>\n </ng-container>\n\n <tr mat-row #rowLink\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop($event, row)\"\n *matRowDef=\"let row; columns: _displayColumns;\"\n (click)=\"handleRowClick(row)\"\n (mouseenter)=\"onRowEnter(row)\"\n (mouseleave)=\"onRowLeave(row)\"\n [ngClass]=\"rowNgClass(row)\"\n [style]=\"rowStyle(row)\">\n </tr>\n\n <!--expanded-row-->\n <ng-container matColumnDef=\"expandedRow\">\n <td mat-cell class=\"expanded-cell\" *matCellDef=\"let element\" [attr.colspan]=\"_displayColumns.length\"\n style=\"padding-right: 0!important;\">\n <div class=\"row-detail\"\n [@detailExpand]=\"element.rowSrc === highlighted ? expandedStateEnum.EXPANDED : expandedStateEnum.COLLAPSED\">\n <!-- timeline continuation -->\n <div *ngIf=\"timelineProvider.isEnabled\"\n class=\"aur-timeline-continuation\"\n [style.border-left-width.px]=\"timelineProvider.line.width\"\n [style.border-left-color]=\"_timelineGaps.get(element.id)?.bottomColor ?? timelineProvider.line.color\"\n [style.border-left-style]=\"_timelineGaps.get(element.id)?.bottomGap ? timelineProvider.line.gapStyle : timelineProvider.line.style\">\n </div>\n <!-- lazy-load of details -->\n <ng-container *ngIf=\"element.rowSrc === highlighted\">\n <ng-container *ngTemplateOutlet=\"extendedRowTemplate; context: {$implicit: element}\"></ng-container>\n </ng-container>\n </div>\n </td>\n </ng-container>\n\n <ng-container *ngIf=\"extendedRowTemplate\">\n <tr mat-row class=\"expanded-row\" *matRowDef=\"let row; columns: ['expandedRow']\"></tr>\n </ng-container>\n <!--expanded-row-->\n\n <ng-container *ngIf=\"totalRowProvider.isEnabled\">\n <tr mat-footer-row *matFooterRowDef=\"_displayColumns; sticky: this.tableConfig.stickyCfg?.total\"\n [style]=\"_totalStyle\" [ngClass]=\"_totalClass\"></tr>\n </ng-container>\n\n <!--sub-footer-row-->\n <ng-container matColumnDef=\"subFooterRow\">\n <td mat-footer-cell *matFooterCellDef [attr.colspan]=\"_displayColumns.length\">\n <ng-container>\n <ng-content select=\"[ngxAurTableSubFooterRow]\"></ng-content>\n </ng-container>\n </td>\n </ng-container>\n\n <ng-container *ngIf=\"subFooterRowTemplate\">\n <tr mat-footer-row *matFooterRowDef=\"['subFooterRow']; sticky: this.tableConfig.stickyCfg?.subFooter\"></tr>\n </ng-container>\n <!-- sub-footer-row END-->\n </table>\n </div>\n </ng-container>\n\n <!-- Pagination -->\n @if (this.paginationProvider.isEnabled && !externalPaginator) {\n <mat-paginator [ngClass]=\"{'hidePaginator': isTableBodyHide}\"\n [pageSizeOptions]=\"paginationProvider.sizes\"\n [pageSize]=\"paginationProvider.size\"\n [style]=\"tableConfig?.paginationCfg?.style\"\n [length]=\"paginatorState?.length\"\n [pageIndex]=\"paginatorState?.pageIndex\"\n (page)=\"onPageChangeInternal($event)\"\n showFirstLastButtons>\n </mat-paginator>\n }\n</div>\n", styles: [".aur-mat-table{display:flex;flex-direction:column}.aur-mat-table.sticky-pagination{height:100%}.aur-mat-table table{border-collapse:collapse}.aur-mat-table .table-container{position:relative}.aur-mat-table .table-container.sticky-pagination{flex-grow:1;overflow:auto}.aur-mat-table th,td{padding-right:4px!important;padding-left:4px!important}.aur-mat-table .new-color td.mat-mdc-cell,.aur-mat-table .new-color td.mat-mdc-footer-cell{color:inherit}.aur-mat-table mat-form-field{width:100%}.aur-mat-table .text-right{text-align:right!important}.aur-mat-table .pointer{cursor:pointer}.aur-mat-table .flex-container{display:flex;align-items:center}.aur-mat-table .expanded-row{height:0}.aur-mat-table .expanded-row .expanded-cell{padding-right:0!important;padding-left:0!important}.aur-mat-table .row-detail{overflow:hidden;display:flex}.aur-mat-table .clear-bottom-border{border-bottom:none}.aur-mat-table .table-settings-button{position:absolute;right:4px;top:12px;cursor:pointer;border-radius:4px;padding-bottom:2px;padding-top:2px;z-index:9999999999}.mat-mdc-header-row th:last-child{padding-right:25px!important}.aur-mat-table .search-container{display:flex;gap:8px;align-items:center}.aur-mat-table .extra-header-top-row th{border-bottom:none}.aur-mat-table .drag-icon{cursor:grab}.hide-table-body tr:not(.mat-mdc-header-row){display:none!important}.hidePaginator{display:none}.aur-mat-table .drag-column{padding-left:8px;padding-right:8px;width:35px}.aur-mat-table .aur-timeline-cell{width:40px;min-width:40px;max-width:40px;padding:0!important}.aur-mat-table .aur-timeline-marker-container{display:flex;flex-direction:column;align-items:center;height:100%;min-height:48px}.aur-mat-table .aur-timeline-line{flex:1;min-height:8px}.aur-mat-table .aur-timeline-marker-default{width:12px;height:12px;border-radius:50%;flex-shrink:0}.aur-mat-table .aur-timeline-continuation{border-left-style:solid;align-self:stretch;margin-left:20px;flex-shrink:0}\n"] }]
|
|
1703
|
+
], standalone: false, template: "<div class=\"aur-mat-table\"\n [ngClass]=\"{'sticky-pagination': paginationProvider.isEnabled && !externalPaginator && paginationProvider.position === 'sticky'}\">\n <ng-container>\n <!-- Filter -->\n <ng-container *ngIf=\"isFeatureEnabled(tableConfig.filterCfg)\">\n <div class=\"search-container\">\n <ng-container>\n <ng-content select=\"[ngxAurTableSearchPrefix]\"></ng-content>\n </ng-container>\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ tableConfig.filterCfg?.label }}</mat-label>\n <input matInput (keyup)=\"applySearchFilter($event)\"\n placeholder=\"{{tableConfig.filterCfg?.placeholder}}\"\n style=\"font-size: 18px;\">\n <mat-icon matPrefix>search</mat-icon>\n </mat-form-field>\n <ng-container>\n <ng-content select=\"[ngxAurTableSearchSuffix]\"></ng-content>\n </ng-container>\n </div>\n </ng-container>\n\n\n <div class=\"table-container\"\n [ngClass]=\"{'sticky-pagination': paginationProvider.isEnabled && !externalPaginator && paginationProvider.position === 'sticky'}\">\n <mat-icon *ngIf=\"headerButtonProvider.isEnabled\"\n class=\"table-settings-button\"\n [style.color]=\"headerButtonProvider.color\"\n [style.background-color]=\"headerButtonProvider.background\"\n (click)=\"headerButton.emit($event)\">\n {{ headerButtonProvider.icon }}\n </mat-icon>\n\n <!-- Table -->\n <table #table mat-table matSort\n [multiTemplateDataRows]=\"extendedRowTemplate !== null\"\n [dataSource]=\"tableDataSource\"\n (matSortChange)=\"sortTable($event)\"\n [style.height]=\"tableConfig.tableViewCfg?.height\"\n [style.max-height]=\"tableConfig.tableViewCfg?.maxHeight\"\n [style.min-height]=\"tableConfig.tableViewCfg?.minHeight\"\n [ngClass]=\"{'hide-table-body': isTableBodyHide}\">\n\n\n <!-- timeline-column-->\n <ng-container *ngIf=\"timelineProvider.isEnabled\" [matColumnDef]=\"timelineProvider.COLUMN_NAME\">\n <th mat-header-cell *matHeaderCellDef class=\"aur-timeline-cell\"\n [style.width]=\"timelineProvider.size?.width\"\n [style.min-width]=\"timelineProvider.size?.minWidth\"\n [style.max-width]=\"timelineProvider.size?.maxWidth\"></th>\n <td mat-cell *matCellDef=\"let element\" class=\"aur-timeline-cell\"\n [style.width]=\"timelineProvider.size?.width\"\n [style.min-width]=\"timelineProvider.size?.minWidth\"\n [style.max-width]=\"timelineProvider.size?.maxWidth\">\n <div class=\"aur-timeline-marker-container\">\n\n <div class=\"aur-timeline-line\"\n *ngIf=\"element.id !== _timelineFirstId\"\n [style.border-left-width.px]=\"timelineProvider.line.width\"\n [style.border-left-color]=\"_timelineGaps.get(element.id)?.topColor ?? timelineProvider.line.color\"\n [style.border-left-style]=\"_timelineGaps.get(element.id)?.topGap ? timelineProvider.line.gapStyle : timelineProvider.line.style\">\n </div>\n\n <ng-container *ngIf=\"timelineMarkerTemplate; else defaultMarker\">\n <ng-container *ngTemplateOutlet=\"timelineMarkerTemplate; context: {$implicit: element}\"></ng-container>\n </ng-container>\n <ng-template #defaultMarker>\n <div class=\"aur-timeline-marker-default\"\n [style.background-color]=\"timelineProvider.markerColor\">\n </div>\n </ng-template>\n\n <div class=\"aur-timeline-line\"\n *ngIf=\"element.id !== _timelineLastId\"\n [style.border-left-width.px]=\"timelineProvider.line.width\"\n [style.border-left-color]=\"_timelineGaps.get(element.id)?.bottomColor ?? timelineProvider.line.color\"\n [style.border-left-style]=\"_timelineGaps.get(element.id)?.bottomGap ? timelineProvider.line.gapStyle : timelineProvider.line.style\">\n </div>\n\n </div>\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"aur-timeline-cell\"\n [style.width]=\"timelineProvider.size?.width\"\n [style.min-width]=\"timelineProvider.size?.minWidth\"\n [style.max-width]=\"timelineProvider.size?.maxWidth\"></td>\n </ng-container>\n\n <!-- drag-column-->\n <ng-container *ngIf=\"dragDropProvider.isEnabled && dragDropProvider.draggable\" [matColumnDef]=\"dragDropProvider.COLUMN_NAME\">\n\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"dragDropProvider.size?.width\"\n [style.min-width]=\"dragDropProvider.size?.minWidth\"\n [style.max-width]=\"dragDropProvider.size?.maxWidth\">\n </th>\n\n <td mat-cell *matCellDef=\"let element;\" class=\"drag-column\"\n [style.width]=\"dragDropProvider.size?.width\"\n [style.min-width]=\"dragDropProvider.size?.minWidth\"\n [style.max-width]=\"dragDropProvider.size?.maxWidth\">\n <lib-icon-view draggable=\"true\"\n class=\"drag-icon\"\n [view]=\"dragDropProvider.dragIconView\"\n (dragstart)=\"onDragStart($event, element)\"\n (dragend)=\"onDragEnd($event, element)\">\n </lib-icon-view>\n\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"dragDropProvider.size?.width\"\n [style.min-width]=\"dragDropProvider.size?.minWidth\"\n [style.max-width]=\"dragDropProvider.size?.maxWidth\">\n </td>\n </ng-container>\n\n <!-- index-column-->\n <ng-container *ngIf=\"indexProvider.isEnabled\" [matColumnDef]=\"indexProvider.COLUMN_NAME\">\n\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"indexProvider.size?.width\"\n [style.min-width]=\"indexProvider.size?.minWidth\"\n [style.max-width]=\"indexProvider.size?.maxWidth\">\n <lib-column-view [config]=\"indexProvider.headerView\">\n {{ indexProvider.name }}\n </lib-column-view>\n </th>\n\n <td mat-cell *matCellDef=\"let element;\"\n [style.width]=\"indexProvider.size?.width\"\n [style.min-width]=\"indexProvider.size?.minWidth\"\n [style.max-width]=\"indexProvider.size?.maxWidth\">\n {{ element.id + indexProvider.offset }}\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"indexProvider.size?.width\"\n [style.min-width]=\"indexProvider.size?.minWidth\"\n [style.max-width]=\"indexProvider.size?.maxWidth\">\n {{ totalRowProvider.totals.get(indexProvider.COLUMN_NAME) ?? '' }}\n </td>\n </ng-container>\n\n <!-- selection-column-->\n <ng-container [matColumnDef]=\"selectionProvider.COLUMN_NAME\" *ngIf=\"selectionProvider.isEnabled\">\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"selectionProvider.size?.width\"\n [style.min-width]=\"selectionProvider.size?.minWidth\"\n [style.max-width]=\"selectionProvider.size?.maxWidth\">\n <div class=\"flex-container\">\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n [checked]=\"selectionProvider.selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selectionProvider.selection.hasValue() && !isAllSelected()\">\n </mat-checkbox>\n <div\n *ngIf=\"tableConfig.selectionCfg?.showSelectedCount && selectionProvider.selection.hasValue()\">\n {{ selectionProvider.selection.selected.length }}\n <span\n *ngIf=\"tableConfig.selectionCfg?.showTotalCount !== false\">/{{ paginatorState?.length ? paginatorState?.length : tableDataSource.filteredData.length }}</span>\n </div>\n\n <div *ngIf=\"selectionProvider.selection.hasValue() && tableConfig?.selectionCfg?.actions\">\n <ng-container *ngFor=\"let action of tableConfig.selectionCfg!.actions\">\n <button mat-icon-button\n (click)=\"emitSelectedRowsAction(action.action, selectionProvider.selection.selected)\"\n [matTooltip]=\"action.icon.tooltip || ''\"\n *ngIf=\"action.visible !== false\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n\n </th>\n <td mat-cell *matCellDef=\"let row\"\n (click)=\"$event.stopPropagation(); selectionProvider.selection.toggle(castSrc(row).rowSrc)\"\n [style.width]=\"selectionProvider.size?.width\"\n [style.min-width]=\"selectionProvider.size?.minWidth\"\n [style.max-width]=\"selectionProvider.size?.maxWidth\">\n <mat-checkbox (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selectionProvider.selection.toggle(castSrc(row).rowSrc) : null\"\n [checked]=\"selectionProvider.selection.isSelected(castSrc(row).rowSrc)\">\n </mat-checkbox>\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"selectionProvider.size?.width\"\n [style.min-width]=\"selectionProvider.size?.minWidth\"\n [style.max-width]=\"selectionProvider.size?.maxWidth\">\n </td>\n </ng-container>\n\n <!-- action column -->\n <ng-container *ngIf=\"rowActionsProvider.isEnabled\" [matColumnDef]=\"rowActionsProvider.COLUMN_NAME\">\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"rowActionsProvider.size?.width\"\n [style.min-width]=\"rowActionsProvider.size?.minWidth\"\n [style.max-width]=\"rowActionsProvider.size?.maxWidth\"></th>\n <td mat-cell *matCellDef=\"let element\" (click)=\"$event.stopPropagation()\" style=\"cursor: default\"\n [style.width]=\"rowActionsProvider.size?.width\"\n [style.min-width]=\"rowActionsProvider.size?.minWidth\"\n [style.max-width]=\"rowActionsProvider.size?.maxWidth\">\n <ng-container *ngFor=\"let action of rowActionsProvider.actionView.get(element.id)\">\n <!-- action with dropdown menu -->\n <ng-container *ngIf=\"action.menu; else directAction\">\n <ng-container *ngIf=\"action.visible !== false\">\n <mat-menu #actionMenu=\"matMenu\">\n <ng-container *ngFor=\"let item of action.menu\">\n <button mat-menu-item\n *ngIf=\"item.visible !== false\"\n [disabled]=\"item.disabled === true\"\n (click)=\"emitMenuAction(item.action, element.rowSrc)\">\n <mat-icon *ngIf=\"item.icon\" [style.color]=\"item.icon.color\">\n {{ item.icon.name }}\n </mat-icon>\n <span>{{ item.text }}</span>\n </button>\n </ng-container>\n </mat-menu>\n <button mat-icon-button\n [matMenuTriggerFor]=\"actionMenu\"\n [matTooltip]=\"action.icon.tooltip || ''\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n </ng-container>\n </ng-container>\n\n <!-- direct action (existing behavior) -->\n <ng-template #directAction>\n <button mat-icon-button\n (click)=\"emitRowAction(action.action, element.rowSrc, $event)\"\n [matTooltip]=\"action.icon.tooltip || ''\"\n *ngIf=\"action.visible !== false\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n </ng-template>\n </ng-container>\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"rowActionsProvider.size?.width\"\n [style.min-width]=\"rowActionsProvider.size?.minWidth\"\n [style.max-width]=\"rowActionsProvider.size?.maxWidth\">\n {{ totalRowProvider.totals.get(rowActionsProvider.COLUMN_NAME) ?? '' }}\n </td>\n </ng-container>\n\n <!-- value-icon-->\n <ng-container *ngFor=\"let columnConfig of tableConfig.columnsCfg\" [matColumnDef]=\"columnConfig.key\">\n\n <!-- if sortable column header -->\n <ng-container *ngIf=\"isFeatureEnabled(columnConfig.sort); else notSortable\">\n <th mat-header-cell *matHeaderCellDef [mat-sort-header]=\"columnConfig.key\"\n [arrowPosition]=\"columnConfig.sort?.position === 'start' ? 'before' : 'after'\"\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n <ng-container *ngTemplateOutlet=\"headerValue\"></ng-container>\n </th>\n </ng-container>\n\n <!-- else not sortable -->\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n <ng-container *ngTemplateOutlet=\"headerValue\"></ng-container>\n </th>\n </ng-template>\n\n <!-- header value-->\n <ng-template #headerValue>\n <lib-column-view [config]=\"columnConfig.headerView\"\n [value]=\"columnConfig.name\">\n </lib-column-view>\n </ng-template>\n\n <!-- column value \u043F\u043E\u043B\u0443\u0447\u0430\u0442\u044C \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u043A\u043E\u043B\u043E\u043D\u043E\u043A \u043D\u0443\u0436\u043D\u043E \u0447\u0435\u0440\u0435\u0437 getView(rowIndex, columnConfig.key) \u0442\u0430\u043C \u043D\u0430\u0445\u043E\u0434\u044F\u0442\u0441\u044F \u0443\u0436\u0435\n \u043F\u043E\u0434\u0433\u043E\u0442\u043E\u0432\u043B\u0435\u043D\u043D\u044B\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F \u0434\u043B\u044F \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F-->\n <td mat-cell *matCellDef=\"let element;\"\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n <lib-column-view\n [config]=\"tableView[element.id]?.get(columnConfig.key)\"\n [value]=\"element | dataPropertyGetter: columnConfig.key\">\n </lib-column-view>\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n {{ totalRowProvider.totals.get(columnConfig.key) ?? '' }}\n </td>\n\n </ng-container>\n\n <!-- extra header top cell-->\n <ng-container *ngFor=\"let extraTopCell of _displayExtraHeaderTopCell; let index = index\"\n [matColumnDef]=\"extraTopCell\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"extraHeaderCellTopTemplate; context: {key: extraTopCell.replace(EXTRA_HEADER_CELL_TOP_SUFFIX, ''), index: index}\"></ng-container>\n </th>\n </ng-container>\n\n\n <!-- extra header bottom cell-->\n <ng-container *ngFor=\"let extraBottomCell of _displayExtraHeaderBottomCell; let index = index\"\n [matColumnDef]=\"extraBottomCell\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"extraHeaderCellBottomTemplate; context: {key: extraBottomCell.replace(EXTRA_HEADER_CELL_BOTTOM_SUFFIX, ''), index: index}\"></ng-container>\n </th>\n </ng-container>\n\n <!-- extra header top row-->\n <ng-container *ngIf=\"extraHeaderCellTopTemplate\">\n <tr mat-header-row *matHeaderRowDef=\"_displayExtraHeaderTopCell; sticky: this.tableConfig.stickyCfg?.header\"\n class=\"extra-header-top-row\">\n </tr>\n </ng-container>\n\n <!-- header row-->\n <tr mat-header-row *matHeaderRowDef=\"_displayColumns; sticky: this.tableConfig.stickyCfg?.header\"\n [style]=\"_headerStyle\" [ngClass]=\"_headerClass\">\n </tr>\n\n <!-- extra header bottom row -->\n <ng-container *ngIf=\"extraHeaderCellBottomTemplate\">\n <tr mat-header-row\n *matHeaderRowDef=\"_displayExtraHeaderBottomCell; sticky: this.tableConfig.stickyCfg?.header\">\n </tr>\n </ng-container>\n\n <tr mat-row #rowLink\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop($event, row)\"\n *matRowDef=\"let row; columns: _displayColumns;\"\n (click)=\"handleRowClick(row)\"\n (mouseenter)=\"onRowEnter(row)\"\n (mouseleave)=\"onRowLeave(row)\"\n [ngClass]=\"rowNgClass(row)\"\n [style]=\"rowStyle(row)\">\n </tr>\n\n <!--expanded-row-->\n <ng-container matColumnDef=\"expandedRow\">\n <td mat-cell class=\"expanded-cell\" *matCellDef=\"let element\" [attr.colspan]=\"_displayColumns.length\"\n style=\"padding-right: 0!important;\">\n <div class=\"row-detail\"\n [@detailExpand]=\"element.rowSrc === highlighted ? expandedStateEnum.EXPANDED : expandedStateEnum.COLLAPSED\">\n <!-- timeline continuation -->\n <div *ngIf=\"timelineProvider.isEnabled\"\n class=\"aur-timeline-continuation\"\n [style.border-left-width.px]=\"timelineProvider.line.width\"\n [style.border-left-color]=\"_timelineGaps.get(element.id)?.bottomColor ?? timelineProvider.line.color\"\n [style.border-left-style]=\"_timelineGaps.get(element.id)?.bottomGap ? timelineProvider.line.gapStyle : timelineProvider.line.style\">\n </div>\n <!-- lazy-load of details -->\n <ng-container *ngIf=\"element.rowSrc === highlighted\">\n <ng-container *ngTemplateOutlet=\"extendedRowTemplate; context: {$implicit: element}\"></ng-container>\n </ng-container>\n </div>\n </td>\n </ng-container>\n\n <ng-container *ngIf=\"extendedRowTemplate\">\n <tr mat-row class=\"expanded-row\" *matRowDef=\"let row; columns: ['expandedRow']\"></tr>\n </ng-container>\n <!--expanded-row-->\n\n <ng-container *ngIf=\"totalRowProvider.isEnabled\">\n <tr mat-footer-row *matFooterRowDef=\"_displayColumns; sticky: this.tableConfig.stickyCfg?.total\"\n [style]=\"_totalStyle\" [ngClass]=\"_totalClass\"\n [style.display]=\"isTotalRowVisible() ? null : 'none'\"></tr>\n </ng-container>\n\n <!--sub-footer-row-->\n <ng-container matColumnDef=\"subFooterRow\">\n <td mat-footer-cell *matFooterCellDef [attr.colspan]=\"_displayColumns.length\">\n <ng-container>\n <ng-content select=\"[ngxAurTableSubFooterRow]\"></ng-content>\n </ng-container>\n </td>\n </ng-container>\n\n <ng-container *ngIf=\"subFooterRowTemplate\">\n <tr mat-footer-row *matFooterRowDef=\"['subFooterRow']; sticky: this.tableConfig.stickyCfg?.subFooter\"></tr>\n </ng-container>\n <!-- sub-footer-row END-->\n </table>\n </div>\n </ng-container>\n\n <!-- Pagination -->\n @if (this.paginationProvider.isEnabled && !externalPaginator) {\n <mat-paginator [ngClass]=\"{'hidePaginator': isTableBodyHide}\"\n [pageSizeOptions]=\"paginationProvider.sizes\"\n [pageSize]=\"paginationProvider.size\"\n [style]=\"tableConfig?.paginationCfg?.style\"\n [length]=\"paginatorState?.length\"\n [pageIndex]=\"paginatorState?.pageIndex\"\n (page)=\"onPageChangeInternal($event)\"\n showFirstLastButtons>\n </mat-paginator>\n }\n</div>\n", styles: [".aur-mat-table{display:flex;flex-direction:column}.aur-mat-table.sticky-pagination{height:100%}.aur-mat-table table{border-collapse:collapse}.aur-mat-table .table-container{position:relative}.aur-mat-table .table-container.sticky-pagination{flex-grow:1;overflow:auto}.aur-mat-table th,td{padding-right:4px!important;padding-left:4px!important}.aur-mat-table .new-color td.mat-mdc-cell,.aur-mat-table .new-color td.mat-mdc-footer-cell{color:inherit}.aur-mat-table mat-form-field{width:100%}.aur-mat-table .text-right{text-align:right!important}.aur-mat-table .pointer{cursor:pointer}.aur-mat-table .flex-container{display:flex;align-items:center}.aur-mat-table .expanded-row{height:0}.aur-mat-table .expanded-row .expanded-cell{padding-right:0!important;padding-left:0!important}.aur-mat-table .row-detail{overflow:hidden;display:flex}.aur-mat-table .clear-bottom-border{border-bottom:none}.aur-mat-table .table-settings-button{position:absolute;right:4px;top:12px;cursor:pointer;border-radius:4px;padding-bottom:2px;padding-top:2px;z-index:9999999999}.mat-mdc-header-row th:last-child{padding-right:25px!important}.aur-mat-table .search-container{display:flex;gap:8px;align-items:center}.aur-mat-table .extra-header-top-row th{border-bottom:none}.aur-mat-table .drag-icon{cursor:grab}.hide-table-body tr:not(.mat-mdc-header-row){display:none!important}.hidePaginator{display:none}.aur-mat-table .drag-column{padding-left:8px;padding-right:8px;width:35px}.aur-mat-table .aur-timeline-cell{width:40px;min-width:40px;max-width:40px;padding:0!important}.aur-mat-table .aur-timeline-marker-container{display:flex;flex-direction:column;align-items:center;height:100%;min-height:48px}.aur-mat-table .aur-timeline-line{flex:1;min-height:8px}.aur-mat-table .aur-timeline-marker-default{width:12px;height:12px;border-radius:50%;flex-shrink:0}.aur-mat-table .aur-timeline-continuation{border-left-style:solid;align-self:stretch;margin-left:20px;flex-shrink:0}\n"] }]
|
|
1669
1704
|
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }], propDecorators: { displayColumns: [{
|
|
1670
1705
|
type: Input
|
|
1671
1706
|
}], subFooterRowTemplate: [{
|
|
@@ -1837,9 +1872,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
1837
1872
|
var NgxAurFilters;
|
|
1838
1873
|
(function (NgxAurFilters) {
|
|
1839
1874
|
/**
|
|
1840
|
-
*
|
|
1841
|
-
*
|
|
1842
|
-
* @template T
|
|
1875
|
+
* Базовый абстрактный класс фильтра.
|
|
1876
|
+
* Определяет общий интерфейс для всех фильтров.
|
|
1877
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
1843
1878
|
*/
|
|
1844
1879
|
class Base {
|
|
1845
1880
|
constructor() {
|
|
@@ -1850,9 +1885,9 @@ var NgxAurFilters;
|
|
|
1850
1885
|
}
|
|
1851
1886
|
NgxAurFilters.ExtractableProperty = ExtractableProperty;
|
|
1852
1887
|
/**
|
|
1853
|
-
*
|
|
1854
|
-
* @template T
|
|
1855
|
-
* @template V
|
|
1888
|
+
* Класс для фильтрации данных на основе одного значения.
|
|
1889
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
1890
|
+
* @template V Тип значения, используемого для фильтрации.
|
|
1856
1891
|
*/
|
|
1857
1892
|
class ValueSingle extends ExtractableProperty {
|
|
1858
1893
|
constructor(value) {
|
|
@@ -1865,9 +1900,9 @@ var NgxAurFilters;
|
|
|
1865
1900
|
}
|
|
1866
1901
|
NgxAurFilters.ValueSingle = ValueSingle;
|
|
1867
1902
|
/**
|
|
1868
|
-
*
|
|
1869
|
-
* @template T
|
|
1870
|
-
* @template V
|
|
1903
|
+
* Класс для фильтрации данных на основе массива значений.
|
|
1904
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
1905
|
+
* @template V Тип значений, используемых для фильтрации.
|
|
1871
1906
|
*/
|
|
1872
1907
|
class ValueArray extends ExtractableProperty {
|
|
1873
1908
|
constructor(values) {
|
|
@@ -1877,9 +1912,9 @@ var NgxAurFilters;
|
|
|
1877
1912
|
}
|
|
1878
1913
|
NgxAurFilters.ValueArray = ValueArray;
|
|
1879
1914
|
/**
|
|
1880
|
-
*
|
|
1881
|
-
* @template T
|
|
1882
|
-
* @template V
|
|
1915
|
+
* Класс для фильтрации данных на основе множества значений.
|
|
1916
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
1917
|
+
* @template V Тип значений, используемых для фильтрации.
|
|
1883
1918
|
*/
|
|
1884
1919
|
class ValueSet extends ExtractableProperty {
|
|
1885
1920
|
constructor(values) {
|
|
@@ -1889,9 +1924,9 @@ var NgxAurFilters;
|
|
|
1889
1924
|
}
|
|
1890
1925
|
NgxAurFilters.ValueSet = ValueSet;
|
|
1891
1926
|
/**
|
|
1892
|
-
*
|
|
1893
|
-
* @template T
|
|
1894
|
-
* @template V
|
|
1927
|
+
* Класс для фильтрации данных в диапазоне min-max.
|
|
1928
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
1929
|
+
* @template V Тип значений, определяющих диапазон.
|
|
1895
1930
|
*/
|
|
1896
1931
|
class ValueMinMax extends ExtractableProperty {
|
|
1897
1932
|
constructor(_min, _max) {
|
|
@@ -1911,9 +1946,9 @@ var NgxAurFilters;
|
|
|
1911
1946
|
}
|
|
1912
1947
|
NgxAurFilters.ValueMinMax = ValueMinMax;
|
|
1913
1948
|
/**
|
|
1914
|
-
*
|
|
1915
|
-
* @template T
|
|
1916
|
-
* @template V
|
|
1949
|
+
* Класс для фильтрации данных в диапазоне min-max.
|
|
1950
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
1951
|
+
* @template V Тип значений, определяющих диапазон.
|
|
1917
1952
|
*/
|
|
1918
1953
|
class ValueMinMaxNumber extends ValueMinMax {
|
|
1919
1954
|
constructor(min, max) {
|
|
@@ -1928,10 +1963,10 @@ var NgxAurFilters;
|
|
|
1928
1963
|
}
|
|
1929
1964
|
NgxAurFilters.ValueMinMaxNumber = ValueMinMaxNumber;
|
|
1930
1965
|
/**
|
|
1931
|
-
*
|
|
1932
|
-
*
|
|
1933
|
-
*
|
|
1934
|
-
* @template T
|
|
1966
|
+
* Абстрактный класс для фильтрации данных по тому, содержит ли определённое свойство
|
|
1967
|
+
* данных, после обрезки и приведения к нижнему регистру, заданную
|
|
1968
|
+
* подстроку, также обрезанную и приведённую к нижнему регистру.
|
|
1969
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
1935
1970
|
*/
|
|
1936
1971
|
class ContainsStringIgnoreCase extends ValueSingle {
|
|
1937
1972
|
filterFn() {
|
|
@@ -2053,8 +2088,8 @@ var NgxAurFilters;
|
|
|
2053
2088
|
}
|
|
2054
2089
|
NgxAurFilters.notHasInSet = notHasInSet;
|
|
2055
2090
|
/**
|
|
2056
|
-
*
|
|
2057
|
-
* @template T
|
|
2091
|
+
* Класс составного фильтра, объединяющий несколько фильтров с помощью логического AND.
|
|
2092
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
2058
2093
|
*/
|
|
2059
2094
|
class CompositeAndFilter extends Base {
|
|
2060
2095
|
constructor(filters) {
|
|
@@ -2062,15 +2097,15 @@ var NgxAurFilters;
|
|
|
2062
2097
|
this.filters = filters || [];
|
|
2063
2098
|
}
|
|
2064
2099
|
/**
|
|
2065
|
-
*
|
|
2066
|
-
*
|
|
2100
|
+
* Создаёт функцию фильтрации, объединяющую функции фильтрации всех
|
|
2101
|
+
* фильтров составного фильтра с помощью логического AND.
|
|
2067
2102
|
*
|
|
2068
|
-
* @returns
|
|
2069
|
-
* - `data`:
|
|
2070
|
-
*
|
|
2103
|
+
* @returns Функция фильтрации, принимающая единственный параметр:
|
|
2104
|
+
* - `data`: Отдельный элемент данных из источника данных MatTable.
|
|
2105
|
+
* Тип `data` определяется обобщённым параметром типа 'T'.
|
|
2071
2106
|
*
|
|
2072
|
-
*
|
|
2073
|
-
*
|
|
2107
|
+
* Функция возвращает `true`, если все фильтры составного фильтра возвращают `true`
|
|
2108
|
+
* для элемента `data`, иначе `false`.
|
|
2074
2109
|
*/
|
|
2075
2110
|
filterFn() {
|
|
2076
2111
|
return (data) => {
|
|
@@ -2078,11 +2113,11 @@ var NgxAurFilters;
|
|
|
2078
2113
|
};
|
|
2079
2114
|
}
|
|
2080
2115
|
/**
|
|
2081
|
-
*
|
|
2082
|
-
*
|
|
2116
|
+
* Определяет, эквивалентен ли текущий составной фильтр другому фильтру.
|
|
2117
|
+
* Этот метод используется для сравнения текущего применённого составного фильтра с новым фильтром.
|
|
2083
2118
|
*
|
|
2084
|
-
* @param other
|
|
2085
|
-
* @returns `true
|
|
2119
|
+
* @param other Фильтр для сравнения с текущим фильтром.
|
|
2120
|
+
* @returns `true`, если текущий фильтр и фильтр `other` эквивалентны, иначе `false`.
|
|
2086
2121
|
*/
|
|
2087
2122
|
equals(other) {
|
|
2088
2123
|
if (!(other instanceof CompositeAndFilter)) {
|