ngx-aur-mat-table 19.2.0 → 19.5.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 +231 -202
- 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/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 +65 -47
- package/lib/model/EmptyValue.d.ts +0 -1
- 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 +30 -15
- package/lib/ngx-aur-mat-table.module.d.ts +2 -3
- 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
- package/lib/factories/MatTableDataSourceFactory.d.ts +0 -12
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Directive, Input, Component, Pipe, EventEmitter, ElementRef, Output, ViewChild, ViewChildren, ContentChild,
|
|
2
|
+
import { Directive, Input, ChangeDetectionStrategy, Component, Pipe, EventEmitter, ElementRef, Output, ViewChild, ViewChildren, ContentChild, NgModule } from '@angular/core';
|
|
3
3
|
import * as i8 from '@angular/material/sort';
|
|
4
4
|
import { MatSort, MatSortModule } from '@angular/material/sort';
|
|
5
5
|
import * as i3$1 from '@angular/material/table';
|
|
@@ -26,7 +26,6 @@ import * as i10 from '@angular/material/checkbox';
|
|
|
26
26
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
27
27
|
import * as i11 from '@angular/material/menu';
|
|
28
28
|
import { MatMenuModule } from '@angular/material/menu';
|
|
29
|
-
import { DragDropModule } from '@angular/cdk/drag-drop';
|
|
30
29
|
|
|
31
30
|
class NgxAurTableConfigUtil {
|
|
32
31
|
static keys(config) {
|
|
@@ -36,7 +35,7 @@ class NgxAurTableConfigUtil {
|
|
|
36
35
|
return config.columnsCfg;
|
|
37
36
|
}
|
|
38
37
|
/**
|
|
39
|
-
* @return Map
|
|
38
|
+
* @return Map, где ключ — это 'key', а значение — это 'name'
|
|
40
39
|
*/
|
|
41
40
|
static keyNameMap(config) {
|
|
42
41
|
return new Map(this.columnCfgs(config).map(cfg => [cfg.key, cfg.name]));
|
|
@@ -45,8 +44,8 @@ class NgxAurTableConfigUtil {
|
|
|
45
44
|
|
|
46
45
|
class NgxAurTablePageEventUtils {
|
|
47
46
|
/**
|
|
48
|
-
* @deprecated
|
|
49
|
-
*
|
|
47
|
+
* @deprecated Не нужно с API `pageSource` — таблица сама выполняет начальную
|
|
48
|
+
* загрузку. Сохранено для устаревшего пути ручной серверной пагинации.
|
|
50
49
|
*/
|
|
51
50
|
static createEmpty(tableConfig) {
|
|
52
51
|
return {
|
|
@@ -87,7 +86,7 @@ var StyleBuilder;
|
|
|
87
86
|
this._fontWeight = weight;
|
|
88
87
|
return this;
|
|
89
88
|
}
|
|
90
|
-
/**
|
|
89
|
+
/** настроенный цвет текста ('' если не задан) — используется для переключения `.new-color` */
|
|
91
90
|
get colorValue() {
|
|
92
91
|
return this._color;
|
|
93
92
|
}
|
|
@@ -212,8 +211,6 @@ class EmptyValue {
|
|
|
212
211
|
enable: false
|
|
213
212
|
}; }
|
|
214
213
|
static { this.MAT_TABLE_DATA_SOURCE = new MatTableDataSource(); }
|
|
215
|
-
static { this.RESIZE_OBSERVER = new ResizeObserver(() => {
|
|
216
|
-
}); }
|
|
217
214
|
}
|
|
218
215
|
|
|
219
216
|
class AbstractProvider {
|
|
@@ -226,11 +223,11 @@ class AbstractProvider {
|
|
|
226
223
|
}
|
|
227
224
|
|
|
228
225
|
/**
|
|
229
|
-
*
|
|
226
|
+
* Функция включена, когда её объект конфигурации присутствует, если только не `enable: false`.
|
|
230
227
|
*
|
|
231
|
-
*
|
|
232
|
-
*
|
|
233
|
-
*
|
|
228
|
+
* Используется функциями, сигналом включения которых является «конфигурация присутствует» (Группа 1).
|
|
229
|
+
* Функции, сигналом включения которых является что-то иное (Hover → взаимодействие, TotalRow → колонки
|
|
230
|
+
* totalConverter), НЕ должны использовать этот помощник — отсутствующая конфигурация не выключает их.
|
|
234
231
|
*/
|
|
235
232
|
function isFeatureEnabled(cfg) {
|
|
236
233
|
return !!cfg && cfg.enable !== false;
|
|
@@ -316,10 +313,10 @@ class SelectionProviderDummy extends SelectionProvider {
|
|
|
316
313
|
|
|
317
314
|
class ActionViewFactory {
|
|
318
315
|
/**
|
|
319
|
-
*
|
|
320
|
-
* @param rows -
|
|
321
|
-
* @param actionConfig -
|
|
322
|
-
* @return Map
|
|
316
|
+
* Преобразует строки и действия в формат представления.
|
|
317
|
+
* @param rows - Строки данных для преобразования.
|
|
318
|
+
* @param actionConfig - Конфигурация действий над строками.
|
|
319
|
+
* @return Map идентификаторов строк к связанным с ними представлениям действий.
|
|
323
320
|
*/
|
|
324
321
|
static create(rows, actionConfig) {
|
|
325
322
|
const result = new Map();
|
|
@@ -329,10 +326,10 @@ class ActionViewFactory {
|
|
|
329
326
|
return result;
|
|
330
327
|
}
|
|
331
328
|
/**
|
|
332
|
-
*
|
|
333
|
-
* @param row -
|
|
334
|
-
* @param actionConfig -
|
|
335
|
-
* @return
|
|
329
|
+
* Подготавливает действия для конкретной строки на основе конфигурации действий.
|
|
330
|
+
* @param row - Строка данных, для которой нужно подготовить действия.
|
|
331
|
+
* @param actionConfig - Конфигурация действий над строками.
|
|
332
|
+
* @return Массив действий для строки.
|
|
336
333
|
*/
|
|
337
334
|
static prepareActionsForRow(row, actionConfig) {
|
|
338
335
|
return actionConfig.actions.map(action => ({
|
|
@@ -366,7 +363,7 @@ class RowActionProvider extends AbstractProvider {
|
|
|
366
363
|
constructor(tableConfig) {
|
|
367
364
|
super();
|
|
368
365
|
this.isEnabled = true;
|
|
369
|
-
//
|
|
366
|
+
// ключ — это rowId
|
|
370
367
|
this.actionView = new Map();
|
|
371
368
|
if (!tableConfig.actionCfg) {
|
|
372
369
|
throw new Error("Actions is undefined");
|
|
@@ -390,10 +387,10 @@ class RowActionProvider extends AbstractProvider {
|
|
|
390
387
|
return this;
|
|
391
388
|
}
|
|
392
389
|
/**
|
|
393
|
-
*
|
|
394
|
-
* @param rows -
|
|
395
|
-
* @param actionConfig -
|
|
396
|
-
* @return
|
|
390
|
+
* Преобразует строки и действия в формат представления.
|
|
391
|
+
* @param rows - Строки данных для преобразования.
|
|
392
|
+
* @param actionConfig - Настройка действий над строками.
|
|
393
|
+
* @return Соответствие идентификаторов строк связанным с ними представлениям действий.
|
|
397
394
|
*/
|
|
398
395
|
setView(rows) {
|
|
399
396
|
if (!this.config) {
|
|
@@ -427,10 +424,10 @@ class RowActionProviderDummy extends RowActionProvider {
|
|
|
427
424
|
|
|
428
425
|
class TableViewFactory {
|
|
429
426
|
/**
|
|
430
|
-
*
|
|
431
|
-
* @param rows
|
|
432
|
-
* @param tableConfig
|
|
433
|
-
* @returns
|
|
427
|
+
* Преобразует строки в формат представления на основе конфигурации таблицы.
|
|
428
|
+
* @param rows Строки таблицы.
|
|
429
|
+
* @param tableConfig Конфигурация таблицы.
|
|
430
|
+
* @returns Массив map, представляющих представление для каждой строки.
|
|
434
431
|
*/
|
|
435
432
|
static toView(rows, tableConfig) {
|
|
436
433
|
const columnViewMap = new Map();
|
|
@@ -439,6 +436,10 @@ class TableViewFactory {
|
|
|
439
436
|
columnViewMap.set(c.key, c.valueView);
|
|
440
437
|
}
|
|
441
438
|
});
|
|
439
|
+
// ни одна колонка не определяет valueView — не создаём пустую Map на каждую строку
|
|
440
|
+
if (columnViewMap.size === 0) {
|
|
441
|
+
return [];
|
|
442
|
+
}
|
|
442
443
|
return TableViewFactory.toViewInternal(rows, columnViewMap);
|
|
443
444
|
}
|
|
444
445
|
static toViewInternal(rows, source) {
|
|
@@ -488,9 +489,9 @@ class TableViewFactory {
|
|
|
488
489
|
|
|
489
490
|
class RowStyleFactory {
|
|
490
491
|
/**
|
|
491
|
-
*
|
|
492
|
-
*
|
|
493
|
-
* (
|
|
492
|
+
* Разрешает `bodyRowCfg.styleCfg` в массив по строкам, индексированный по `row.id`.
|
|
493
|
+
* Возвращает пустой массив, когда хук не сконфигурирован. Стили хранятся в сыром виде
|
|
494
|
+
* (не собранные `StyleBuilder.Row | string`), чтобы компонент мог вызвать `overrideWith()`/`build()` во время отрисовки.
|
|
494
495
|
*/
|
|
495
496
|
static toRowStyles(rows, tableConfig) {
|
|
496
497
|
const cfg = tableConfig.bodyRowCfg?.styleCfg;
|
|
@@ -505,8 +506,8 @@ class RowStyleFactory {
|
|
|
505
506
|
}
|
|
506
507
|
|
|
507
508
|
/**
|
|
508
|
-
*
|
|
509
|
-
*
|
|
509
|
+
* Предоставляет функциональность для управления колонкой индекса в таблице.
|
|
510
|
+
* Класс может обрабатывать настройки индекса и изменять массив колонок, добавляя в него колонку индекса.
|
|
510
511
|
*/
|
|
511
512
|
class IndexProvider extends AbstractProvider {
|
|
512
513
|
static { this.COLUMN_NAME = 'tbl_index'; }
|
|
@@ -523,9 +524,9 @@ class IndexProvider extends AbstractProvider {
|
|
|
523
524
|
return IndexProvider.COLUMN_NAME;
|
|
524
525
|
}
|
|
525
526
|
/**
|
|
526
|
-
*
|
|
527
|
-
* @param columns
|
|
528
|
-
* @returns
|
|
527
|
+
* Добавляет колонку индекса в начало массива колонок.
|
|
528
|
+
* @param columns Массив имён колонок, в который должна быть добавлена колонка индекса.
|
|
529
|
+
* @returns Экземпляр IndexProvider для цепочки вызовов.
|
|
529
530
|
*/
|
|
530
531
|
addIndexColumn(columns) {
|
|
531
532
|
if (this.notHasKey(this.COLUMN_NAME, columns)) {
|
|
@@ -534,10 +535,10 @@ class IndexProvider extends AbstractProvider {
|
|
|
534
535
|
return this;
|
|
535
536
|
}
|
|
536
537
|
/**
|
|
537
|
-
*
|
|
538
|
-
*
|
|
539
|
-
* @param tableConfig
|
|
540
|
-
* @returns
|
|
538
|
+
* Фабричный метод для создания экземпляра IndexProvider на основе настройки таблицы.
|
|
539
|
+
* Возвращает заглушку-провайдер, если индекс не включён в настройке.
|
|
540
|
+
* @param tableConfig Настройка таблицы.
|
|
541
|
+
* @returns Экземпляр IndexProvider или IndexProviderDummy.
|
|
541
542
|
*/
|
|
542
543
|
static create(tableConfig) {
|
|
543
544
|
if (IndexProvider.canCreate(tableConfig)) {
|
|
@@ -550,8 +551,8 @@ class IndexProvider extends AbstractProvider {
|
|
|
550
551
|
}
|
|
551
552
|
}
|
|
552
553
|
/**
|
|
553
|
-
*
|
|
554
|
-
*
|
|
554
|
+
* Заглушка-реализация IndexProvider, которая используется, когда функциональность индекса не включена.
|
|
555
|
+
* Этот класс переопределяет некоторые методы, предоставляя пустые реализации.
|
|
555
556
|
*/
|
|
556
557
|
class IndexProviderDummy extends IndexProvider {
|
|
557
558
|
constructor() {
|
|
@@ -559,12 +560,12 @@ class IndexProviderDummy extends IndexProvider {
|
|
|
559
560
|
this.isEnabled = false;
|
|
560
561
|
}
|
|
561
562
|
/**
|
|
562
|
-
*
|
|
563
|
-
* @param columns
|
|
564
|
-
* @returns
|
|
563
|
+
* Переопределяет метод addIndexColumn, возвращая себя без изменения массива колонок.
|
|
564
|
+
* @param columns Массив имён колонок.
|
|
565
|
+
* @returns Экземпляр IndexProviderDummy для цепочки вызовов.
|
|
565
566
|
*/
|
|
566
567
|
addIndexColumn(columns) {
|
|
567
|
-
//
|
|
568
|
+
// Операция не выполняется, так как индекс не включён.
|
|
568
569
|
return this;
|
|
569
570
|
}
|
|
570
571
|
}
|
|
@@ -603,10 +604,10 @@ class TableRow {
|
|
|
603
604
|
|
|
604
605
|
class TableRowsFactory {
|
|
605
606
|
/**
|
|
606
|
-
*
|
|
607
|
-
* @param data
|
|
608
|
-
* @param config
|
|
609
|
-
* @returns
|
|
607
|
+
* Преобразует массив объектов данных в массив объектов TableRow.
|
|
608
|
+
* @param data Массив объектов данных для преобразования.
|
|
609
|
+
* @param config Настройки конфигурации для каждой колонки.
|
|
610
|
+
* @returns Массив объектов TableRow.
|
|
610
611
|
*/
|
|
611
612
|
static convert(data, config) {
|
|
612
613
|
return data.map((obj, index) => this.createTableRow(index, obj, config));
|
|
@@ -618,19 +619,6 @@ class TableRowsFactory {
|
|
|
618
619
|
}
|
|
619
620
|
}
|
|
620
621
|
|
|
621
|
-
class MatTableDataSourceFactory {
|
|
622
|
-
/**
|
|
623
|
-
* Converts an array of data objects into MatTableDataSource.
|
|
624
|
-
* @param data Array of data objects to be converted.
|
|
625
|
-
* @param config Configuration settings for each column.
|
|
626
|
-
* @returns MatTableDataSource.
|
|
627
|
-
*/
|
|
628
|
-
static convert(data, config) {
|
|
629
|
-
let tableRows = TableRowsFactory.convert(data, config);
|
|
630
|
-
return new MatTableDataSource(tableRows);
|
|
631
|
-
}
|
|
632
|
-
}
|
|
633
|
-
|
|
634
622
|
class DisplayColumnsFactory {
|
|
635
623
|
static create(tableConfig) {
|
|
636
624
|
return tableConfig.columnsCfg.map((tableColumn) => tableColumn.key);
|
|
@@ -716,7 +704,7 @@ class HeaderButtonProviderDummy extends HeaderButtonProvider {
|
|
|
716
704
|
|
|
717
705
|
class CanDropManager {
|
|
718
706
|
constructor(mappings) {
|
|
719
|
-
|
|
707
|
+
//можно сбросить [ключ из таблицы-источника, значение - имя таблицы-цели]
|
|
720
708
|
this.canDropStorage = new Map();
|
|
721
709
|
this.fillStorage(mappings);
|
|
722
710
|
}
|
|
@@ -812,13 +800,13 @@ class DragDropMappingManager {
|
|
|
812
800
|
}
|
|
813
801
|
|
|
814
802
|
/**
|
|
815
|
-
*
|
|
816
|
-
*
|
|
803
|
+
* Управляет процессом drag & drop, включая события начала, сброса и завершения.
|
|
804
|
+
* Обрабатывает превью перетаскивания, проверку возможности сброса и обновление набора данных после успешного сброса.
|
|
817
805
|
*/
|
|
818
806
|
class AurDragDropManager {
|
|
819
807
|
/**
|
|
820
|
-
*
|
|
821
|
-
* @returns {AurDragDropManager} -
|
|
808
|
+
* Создаёт пустой экземпляр AurDragDropManager.
|
|
809
|
+
* @returns {AurDragDropManager} - Пустой менеджер без инициализированных ссылок.
|
|
822
810
|
*/
|
|
823
811
|
static empty() {
|
|
824
812
|
return new AurDragDropManager(undefined, [], []);
|
|
@@ -831,27 +819,27 @@ class AurDragDropManager {
|
|
|
831
819
|
this.mappingManager = new DragDropMappingManager(mappings);
|
|
832
820
|
}
|
|
833
821
|
/**
|
|
834
|
-
*
|
|
835
|
-
* @returns {string[]} -
|
|
822
|
+
* Возвращает список всех доступных имён источников перетаскивания.
|
|
823
|
+
* @returns {string[]} - Массив имён источников.
|
|
836
824
|
*/
|
|
837
825
|
get draggableSourceNames() {
|
|
838
826
|
return this.mappings?.map(mapping => mapping.sourceName) || [];
|
|
839
827
|
}
|
|
840
828
|
/**
|
|
841
|
-
*
|
|
842
|
-
* @param {string} sourceName -
|
|
843
|
-
* @param {unknown[]} draggedData -
|
|
844
|
-
* @param {DragEvent} event -
|
|
845
|
-
* @throws Error
|
|
829
|
+
* Инициирует операцию перетаскивания, сохраняя контекст и показывая превью перетаскивания.
|
|
830
|
+
* @param {string} sourceName - Имя источника перетаскивания.
|
|
831
|
+
* @param {unknown[]} draggedData - Перетаскиваемые данные.
|
|
832
|
+
* @param {DragEvent} event - Событие перетаскивания.
|
|
833
|
+
* @throws Error если перетаскивание уже выполняется.
|
|
846
834
|
*/
|
|
847
835
|
startDrag(sourceName, draggedData, event) {
|
|
848
836
|
this.startDragEvent = { sourceName, draggedData };
|
|
849
837
|
this.previewManager.showPreview(sourceName, event, draggedData);
|
|
850
838
|
}
|
|
851
839
|
/**
|
|
852
|
-
*
|
|
853
|
-
* @param {string} targetName -
|
|
854
|
-
* @param {DragEvent} event -
|
|
840
|
+
* Проверяет, разрешён ли сброс на целевой элемент, вызывая preventDefault.
|
|
841
|
+
* @param {string} targetName - Имя целевого элемента.
|
|
842
|
+
* @param {DragEvent} event - Событие перетаскивания.
|
|
855
843
|
*/
|
|
856
844
|
canDropPreventDefault(targetName, event) {
|
|
857
845
|
if (!this.startDragEvent) {
|
|
@@ -861,15 +849,15 @@ class AurDragDropManager {
|
|
|
861
849
|
this.canDropManager.dropPreventDefault(this.startDragEvent.sourceName, targetName, event);
|
|
862
850
|
}
|
|
863
851
|
/**
|
|
864
|
-
*
|
|
865
|
-
* @param {string} targetName -
|
|
866
|
-
* @param {any} targetData -
|
|
852
|
+
* Выполняет операцию сброса на указанную цель.
|
|
853
|
+
* @param {string} targetName - Имя целевого элемента.
|
|
854
|
+
* @param {any} targetData - Данные для целевого элемента.
|
|
867
855
|
*/
|
|
868
856
|
drop(targetName, targetData) {
|
|
869
857
|
this.dropEvent = { targetName, targetData };
|
|
870
858
|
}
|
|
871
859
|
/**
|
|
872
|
-
*
|
|
860
|
+
* Завершает операцию перетаскивания и обновляет набор данных, если сброс был успешным.
|
|
873
861
|
*/
|
|
874
862
|
endDrag() {
|
|
875
863
|
this.previewManager.removePreview();
|
|
@@ -923,10 +911,10 @@ class DragDropProvider extends AbstractProvider {
|
|
|
923
911
|
return this;
|
|
924
912
|
}
|
|
925
913
|
/**
|
|
926
|
-
*
|
|
927
|
-
*
|
|
928
|
-
* @param tableConfig
|
|
929
|
-
* @returns
|
|
914
|
+
* Фабричный метод для создания экземпляра IndexProvider на основе настройки таблицы.
|
|
915
|
+
* Возвращает заглушку-провайдер, если индекс не включён в настройке.
|
|
916
|
+
* @param tableConfig Настройка таблицы.
|
|
917
|
+
* @returns Экземпляр IndexProvider или IndexProviderDummy.
|
|
930
918
|
*/
|
|
931
919
|
static create(viewContainerRef, tableConfig) {
|
|
932
920
|
if (DragDropProvider.canCreate(tableConfig)) {
|
|
@@ -946,7 +934,7 @@ class DragProviderDummy extends DragDropProvider {
|
|
|
946
934
|
this.isEnabled = false;
|
|
947
935
|
}
|
|
948
936
|
addColumn(columns) {
|
|
949
|
-
//
|
|
937
|
+
// Операция не выполняется, так как индекс не включён.
|
|
950
938
|
return this;
|
|
951
939
|
}
|
|
952
940
|
}
|
|
@@ -1072,22 +1060,22 @@ class ServerPageController {
|
|
|
1072
1060
|
|
|
1073
1061
|
class IconViewComponent {
|
|
1074
1062
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: IconViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1075
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: IconViewComponent, isStandalone: false, selector: "lib-icon-view", inputs: { view: "view" }, ngImport: i0, template: "<div [ngClass]=\"{'circle': view
|
|
1063
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: IconViewComponent, isStandalone: false, selector: "lib-icon-view", inputs: { view: "view" }, ngImport: i0, template: "<!-- \u0431\u0435\u0437 view \u043D\u0435 \u0440\u0435\u043D\u0434\u0435\u0440\u0438\u043C \u043D\u0438\u0447\u0435\u0433\u043E \u2014 \u043F\u0443\u0441\u0442\u044B\u0445 div-\u043E\u0431\u0451\u0440\u0442\u043E\u043A \u0432 \u044F\u0447\u0435\u0439\u043A\u0430\u0445 \u0431\u044B\u0442\u044C \u043D\u0435 \u0434\u043E\u043B\u0436\u043D\u043E -->\n<div *ngIf=\"view\"\n [ngClass]=\"{'circle': view.wrapper}\"\n [style.background-color]=\"view.wrapper?.color\">\n <!-- MatTooltip \u0441\u043E\u0437\u0434\u0430\u0451\u0442\u0441\u044F \u0442\u043E\u043B\u044C\u043A\u043E \u043A\u043E\u0433\u0434\u0430 \u0442\u0443\u043B\u0442\u0438\u043F \u0437\u0430\u0434\u0430\u043D -->\n <ng-container *ngIf=\"view.visible !== false\">\n <mat-icon *ngIf=\"view.tooltip as tooltip; else plainIcon\"\n [matTooltip]=\"tooltip\"\n [style.color]=\"view.color\">\n {{ view.name }}\n </mat-icon>\n <ng-template #plainIcon>\n <mat-icon [style.color]=\"view.color\">\n {{ view.name }}\n </mat-icon>\n </ng-template>\n </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1076
1064
|
}
|
|
1077
1065
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: IconViewComponent, decorators: [{
|
|
1078
1066
|
type: Component,
|
|
1079
|
-
args: [{ selector: 'lib-icon-view', standalone: false, template: "<div [ngClass]=\"{'circle': view
|
|
1067
|
+
args: [{ selector: 'lib-icon-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!-- \u0431\u0435\u0437 view \u043D\u0435 \u0440\u0435\u043D\u0434\u0435\u0440\u0438\u043C \u043D\u0438\u0447\u0435\u0433\u043E \u2014 \u043F\u0443\u0441\u0442\u044B\u0445 div-\u043E\u0431\u0451\u0440\u0442\u043E\u043A \u0432 \u044F\u0447\u0435\u0439\u043A\u0430\u0445 \u0431\u044B\u0442\u044C \u043D\u0435 \u0434\u043E\u043B\u0436\u043D\u043E -->\n<div *ngIf=\"view\"\n [ngClass]=\"{'circle': view.wrapper}\"\n [style.background-color]=\"view.wrapper?.color\">\n <!-- MatTooltip \u0441\u043E\u0437\u0434\u0430\u0451\u0442\u0441\u044F \u0442\u043E\u043B\u044C\u043A\u043E \u043A\u043E\u0433\u0434\u0430 \u0442\u0443\u043B\u0442\u0438\u043F \u0437\u0430\u0434\u0430\u043D -->\n <ng-container *ngIf=\"view.visible !== false\">\n <mat-icon *ngIf=\"view.tooltip as tooltip; else plainIcon\"\n [matTooltip]=\"tooltip\"\n [style.color]=\"view.color\">\n {{ view.name }}\n </mat-icon>\n <ng-template #plainIcon>\n <mat-icon [style.color]=\"view.color\">\n {{ view.name }}\n </mat-icon>\n </ng-template>\n </ng-container>\n</div>\n" }]
|
|
1080
1068
|
}], propDecorators: { view: [{
|
|
1081
1069
|
type: Input
|
|
1082
1070
|
}] } });
|
|
1083
1071
|
|
|
1084
1072
|
class ColumnViewComponent {
|
|
1085
1073
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ColumnViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1086
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: ColumnViewComponent, isStandalone: false, selector: "lib-column-view", inputs: { config: "config", value: "value" }, ngImport: i0, template: "<div class=\"align-container\">\n\n <lib-icon-view [view]=\"config?.icon\">\n </lib-icon-view>\n\n <img *ngIf=\"config?.image?.src\"\n [src]=\"config?.image?.src\"\n [style.height]=\"config?.image?.height\"\n [style.width]=\"config?.image?.width\"\n alt=\"img\">\n\n <
|
|
1074
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: ColumnViewComponent, isStandalone: false, selector: "lib-column-view", inputs: { config: "config", value: "value" }, ngImport: i0, template: "<div class=\"align-container\">\n\n <lib-icon-view *ngIf=\"config?.icon\" [view]=\"config?.icon\">\n </lib-icon-view>\n\n <img *ngIf=\"config?.image?.src\"\n [src]=\"config?.image?.src\"\n [style.height]=\"config?.image?.height\"\n [style.width]=\"config?.image?.width\"\n alt=\"img\">\n\n <!-- MatTooltip \u0441\u043E\u0437\u0434\u0430\u0451\u0442\u0441\u044F \u0442\u043E\u043B\u044C\u043A\u043E \u043A\u043E\u0433\u0434\u0430 \u0442\u0443\u043B\u0442\u0438\u043F \u0437\u0430\u0434\u0430\u043D: \u043F\u0443\u0441\u0442\u0430\u044F \u0434\u0438\u0440\u0435\u043A\u0442\u0438\u0432\u0430 \u043D\u0430 \u043A\u0430\u0436\u0434\u043E\u0439 \u044F\u0447\u0435\u0439\u043A\u0435 \u0441\u043B\u0438\u0448\u043A\u043E\u043C \u0434\u043E\u0440\u043E\u0433\u0430 -->\n <ng-container *ngIf=\"config?.text?.show != false\">\n <span *ngIf=\"config?.text?.tooltip as tooltip; else plainText\"\n [matTooltip]=\"tooltip\"\n [style.color]=\"config?.text?.color\">\n {{ value }}\n </span>\n <ng-template #plainText>\n <span [style.color]=\"config?.text?.color\">\n {{ value }}\n </span>\n </ng-template>\n </ng-container>\n</div>\n", styles: [".align-container{display:flex;align-items:center}span{margin-left:4px}.circle{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconViewComponent, selector: "lib-icon-view", inputs: ["view"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1087
1075
|
}
|
|
1088
1076
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ColumnViewComponent, decorators: [{
|
|
1089
1077
|
type: Component,
|
|
1090
|
-
args: [{ selector: 'lib-column-view', standalone: false, template: "<div class=\"align-container\">\n\n <lib-icon-view [view]=\"config?.icon\">\n </lib-icon-view>\n\n <img *ngIf=\"config?.image?.src\"\n [src]=\"config?.image?.src\"\n [style.height]=\"config?.image?.height\"\n [style.width]=\"config?.image?.width\"\n alt=\"img\">\n\n <
|
|
1078
|
+
args: [{ selector: 'lib-column-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"align-container\">\n\n <lib-icon-view *ngIf=\"config?.icon\" [view]=\"config?.icon\">\n </lib-icon-view>\n\n <img *ngIf=\"config?.image?.src\"\n [src]=\"config?.image?.src\"\n [style.height]=\"config?.image?.height\"\n [style.width]=\"config?.image?.width\"\n alt=\"img\">\n\n <!-- MatTooltip \u0441\u043E\u0437\u0434\u0430\u0451\u0442\u0441\u044F \u0442\u043E\u043B\u044C\u043A\u043E \u043A\u043E\u0433\u0434\u0430 \u0442\u0443\u043B\u0442\u0438\u043F \u0437\u0430\u0434\u0430\u043D: \u043F\u0443\u0441\u0442\u0430\u044F \u0434\u0438\u0440\u0435\u043A\u0442\u0438\u0432\u0430 \u043D\u0430 \u043A\u0430\u0436\u0434\u043E\u0439 \u044F\u0447\u0435\u0439\u043A\u0435 \u0441\u043B\u0438\u0448\u043A\u043E\u043C \u0434\u043E\u0440\u043E\u0433\u0430 -->\n <ng-container *ngIf=\"config?.text?.show != false\">\n <span *ngIf=\"config?.text?.tooltip as tooltip; else plainText\"\n [matTooltip]=\"tooltip\"\n [style.color]=\"config?.text?.color\">\n {{ value }}\n </span>\n <ng-template #plainText>\n <span [style.color]=\"config?.text?.color\">\n {{ value }}\n </span>\n </ng-template>\n </ng-container>\n</div>\n", styles: [".align-container{display:flex;align-items:center}span{margin-left:4px}.circle{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%}\n"] }]
|
|
1091
1079
|
}], propDecorators: { config: [{
|
|
1092
1080
|
type: Input
|
|
1093
1081
|
}], value: [{
|
|
@@ -1148,10 +1136,10 @@ class NgxAurMatTableComponent {
|
|
|
1148
1136
|
this.isTableBodyHide = false;
|
|
1149
1137
|
this.sort = new EventEmitter();
|
|
1150
1138
|
this.pageChange = new EventEmitter();
|
|
1151
|
-
//
|
|
1139
|
+
// события, если действия включены
|
|
1152
1140
|
this.rowAction = new EventEmitter();
|
|
1153
1141
|
// -----------------------
|
|
1154
|
-
//
|
|
1142
|
+
// события, если включено событие выделения
|
|
1155
1143
|
this.selectChange = new EventEmitter();
|
|
1156
1144
|
this.selectAdded = new EventEmitter();
|
|
1157
1145
|
this.selectRemoved = new EventEmitter();
|
|
@@ -1162,16 +1150,14 @@ class NgxAurMatTableComponent {
|
|
|
1162
1150
|
this.loadingChange = new EventEmitter();
|
|
1163
1151
|
this.pageError = new EventEmitter();
|
|
1164
1152
|
/**
|
|
1165
|
-
*
|
|
1153
|
+
* возвращает отфильтрованные строки
|
|
1166
1154
|
*/
|
|
1167
1155
|
this.filterChange = new EventEmitter();
|
|
1168
|
-
/** @deprecated
|
|
1156
|
+
/** @deprecated используйте extraHeaderCellTopTemplate или extraHeaderCellBottomTemplate */
|
|
1169
1157
|
this.columnOffsets = new EventEmitter();
|
|
1170
1158
|
this.prevColumnOffsets = [];
|
|
1171
1159
|
this.headerButtonProvider = new HeaderButtonProviderDummy();
|
|
1172
1160
|
this.headerButton = new EventEmitter();
|
|
1173
|
-
// @ts-ignore
|
|
1174
|
-
this.resizeColumnOffsetsObserver = EmptyValue.RESIZE_OBSERVER;
|
|
1175
1161
|
this.dragDropProvider = new DragProviderDummy();
|
|
1176
1162
|
this.timelineProvider = new TimelineProviderDummy();
|
|
1177
1163
|
this._timelineFirstId = -1;
|
|
@@ -1182,12 +1168,16 @@ class NgxAurMatTableComponent {
|
|
|
1182
1168
|
this.indexProvider = new IndexProviderDummy();
|
|
1183
1169
|
this.paginationProvider = new PaginationProviderDummy();
|
|
1184
1170
|
this.totalRowProvider = new TotalRowProviderDummy();
|
|
1185
|
-
//
|
|
1186
|
-
//
|
|
1171
|
+
// Состояние наведения. Сравнивает идентичность объекта TableRow (тот же экземпляр, по которому итерирует шаблон),
|
|
1172
|
+
// в отличие от `highlighted`, который сравнивает row.rowSrc (внешнее @Input-значение, а не TableRow).
|
|
1187
1173
|
this.hovered = null;
|
|
1188
1174
|
this.customSortFunctions = new Map();
|
|
1189
1175
|
this.filterStorage = new Map();
|
|
1190
1176
|
this._searchText = '';
|
|
1177
|
+
/** trackBy для всех дефов строк (row defs) таблицы: бизнес-ключ из конфига или ссылка на rowSrc. */
|
|
1178
|
+
this.trackByRow = (_, row) => this.tableConfig.trackBy ? this.tableConfig.trackBy(row.rowSrc) : row.rowSrc;
|
|
1179
|
+
// дефолтный предикат персистентного инстанса — захватывается один раз на жизнь компонента
|
|
1180
|
+
this._defaultFilterPredicate = this.tableDataSource.filterPredicate;
|
|
1191
1181
|
}
|
|
1192
1182
|
ngOnChanges(changes) {
|
|
1193
1183
|
if ((changes['tableData'] && this.tableData) || (changes['displayColumns'] && this._displayColumns)) {
|
|
@@ -1199,9 +1189,9 @@ class NgxAurMatTableComponent {
|
|
|
1199
1189
|
if (changes['externalPaginator']) {
|
|
1200
1190
|
if (this.externalPaginator) {
|
|
1201
1191
|
if (this.isServerMode()) {
|
|
1202
|
-
//
|
|
1203
|
-
//
|
|
1204
|
-
// ngAfterViewInit
|
|
1192
|
+
// Серверный режим: НЕ привязываем dataSource.paginator (он порезал бы загруженную страницу).
|
|
1193
|
+
// (Пере)подключаем только после того, как контроллер создан; первое изменение, пришедшее до
|
|
1194
|
+
// ngAfterViewInit, обрабатывается в startServerController().
|
|
1205
1195
|
if (this.serverPageController) {
|
|
1206
1196
|
this.subscribeExternalPaginator();
|
|
1207
1197
|
if (this.paginatorState) {
|
|
@@ -1210,16 +1200,16 @@ class NgxAurMatTableComponent {
|
|
|
1210
1200
|
}
|
|
1211
1201
|
}
|
|
1212
1202
|
else if (!changes['externalPaginator'].firstChange) {
|
|
1213
|
-
//
|
|
1214
|
-
//
|
|
1203
|
+
// Клиентский режим: привязываем внешний пагинатор, чтобы MatTableDataSource резал данные через него.
|
|
1204
|
+
// Защищаемся от firstChange, чтобы не вызвать initPaginator() до ngAfterViewInit.
|
|
1215
1205
|
this.initPaginator();
|
|
1216
1206
|
}
|
|
1217
1207
|
}
|
|
1218
1208
|
else {
|
|
1219
|
-
//
|
|
1209
|
+
// Внешний пагинатор удалён: отписываемся от его событий страницы, чтобы избежать утечки.
|
|
1220
1210
|
this.externalPaginatorSub?.unsubscribe();
|
|
1221
1211
|
this.externalPaginatorSub = undefined;
|
|
1222
|
-
//
|
|
1212
|
+
// Клиентский режим откатывается к (теперь отрисованному) встроенному пагинатору.
|
|
1223
1213
|
if (!this.isServerMode() && !changes['externalPaginator'].firstChange) {
|
|
1224
1214
|
this.initPaginator();
|
|
1225
1215
|
}
|
|
@@ -1261,62 +1251,69 @@ class NgxAurMatTableComponent {
|
|
|
1261
1251
|
this.paginatorState = PaginatorState.empty();
|
|
1262
1252
|
}
|
|
1263
1253
|
}
|
|
1264
|
-
//
|
|
1254
|
+
// нам это нужно, чтобы пагинация работала с *ngIf
|
|
1265
1255
|
ngAfterViewInit() {
|
|
1266
|
-
//
|
|
1267
|
-
//
|
|
1256
|
+
// Должно оставаться безусловным — также покрывает случай первого изменения externalPaginator
|
|
1257
|
+
// для клиентского режима (ngOnChanges откладывает initPaginator() при firstChange).
|
|
1268
1258
|
this.initPaginator();
|
|
1269
1259
|
this.initSortingDataAccessor();
|
|
1270
|
-
|
|
1271
|
-
|
|
1260
|
+
// SSR: на сервере ResizeObserver не определён — фича columnOffsets работает только в браузере
|
|
1261
|
+
if (typeof ResizeObserver !== 'undefined') {
|
|
1262
|
+
this.resizeColumnOffsetsObserver = new ResizeObserver(() => this.updateColumnOffsets());
|
|
1263
|
+
this.resizeColumnOffsetsObserver.observe(this.table.nativeElement);
|
|
1264
|
+
}
|
|
1272
1265
|
if (this.isServerMode()) {
|
|
1273
1266
|
this.startServerController();
|
|
1274
1267
|
}
|
|
1275
1268
|
}
|
|
1276
1269
|
initPaginator() {
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
else {
|
|
1285
|
-
this.tableDataSource.paginator = this.activePaginator;
|
|
1286
|
-
}
|
|
1270
|
+
// В серверном режиме держим null — MatTableDataSource вызвал бы
|
|
1271
|
+
// _updatePaginator(filteredDataLength) и перезаписал бы длину, присланную сервером.
|
|
1272
|
+
// ?? null нормализует undefined (пагинатор не отрендерен), чтобы гвард был точным.
|
|
1273
|
+
const target = this.isServerMode() ? null : (this.activePaginator ?? null);
|
|
1274
|
+
if (this.tableDataSource.paginator !== target) {
|
|
1275
|
+
// сеттер пересоздаёт внутреннюю подписку — присваиваем только при реальном изменении
|
|
1276
|
+
this.tableDataSource.paginator = target;
|
|
1287
1277
|
}
|
|
1288
1278
|
}
|
|
1289
1279
|
initSortingDataAccessor() {
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1280
|
+
const sort = this.matSort ?? null;
|
|
1281
|
+
if (this.tableDataSource.sort !== sort) {
|
|
1282
|
+
// тот же гвард: сеттер .sort тоже пересоздаёт подписку
|
|
1283
|
+
this.tableDataSource.sort = sort;
|
|
1284
|
+
}
|
|
1285
|
+
// обычное свойство, подписку не трогает — присваиваем без гварда
|
|
1286
|
+
this.tableDataSource.sortingDataAccessor = (data, key) => {
|
|
1287
|
+
const customSortFunction = this.customSortFunctions.get(key);
|
|
1288
|
+
return customSortFunction ? customSortFunction(data, key) : data[key];
|
|
1289
|
+
};
|
|
1297
1290
|
}
|
|
1298
1291
|
updateColumnOffsets() {
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1292
|
+
const tableEl = this.table?.nativeElement;
|
|
1293
|
+
if (!tableEl) {
|
|
1294
|
+
return;
|
|
1295
|
+
}
|
|
1296
|
+
const offsets = Array.from(tableEl.querySelectorAll('th'))
|
|
1297
|
+
.slice(0, this._displayColumns.length)
|
|
1298
|
+
.map((c) => c)
|
|
1299
|
+
.map((c, index) => ({
|
|
1300
|
+
left: c.offsetLeft,
|
|
1301
|
+
width: c.offsetWidth,
|
|
1302
|
+
key: this._displayColumns[index]
|
|
1303
|
+
}));
|
|
1304
|
+
if (OffsetUtil.areNotEqual(this.prevColumnOffsets, offsets)) {
|
|
1305
|
+
this.prevColumnOffsets = offsets;
|
|
1306
|
+
this.columnOffsets.emit(offsets);
|
|
1312
1307
|
}
|
|
1313
1308
|
}
|
|
1314
1309
|
prepareTableData(initSelection = []) {
|
|
1315
|
-
|
|
1310
|
+
// карту кастомных сортировок обновляем ДО initTable(): sorting accessor читает её
|
|
1311
|
+
// синхронно во время sort-прохода пайплайна, который запускает присваивание .data=
|
|
1316
1312
|
this.initCustomSortFunctionsMap();
|
|
1313
|
+
this.initTable();
|
|
1317
1314
|
this.removeWrongKeysFromDisplayColumns();
|
|
1318
1315
|
if (!this.paginatorState) {
|
|
1319
|
-
//
|
|
1316
|
+
// Если пагинатор не серверный, то я инициализирую его здесь, иначе при обновлении данных пагинатор ломается и отображаются все элементы
|
|
1320
1317
|
this.initPaginator();
|
|
1321
1318
|
}
|
|
1322
1319
|
this.initSortingDataAccessor();
|
|
@@ -1351,14 +1348,14 @@ class NgxAurMatTableComponent {
|
|
|
1351
1348
|
this._displayColumns = this._displayColumns.filter(actual => whiteKeys.has(actual) || actual.startsWith('tbl_'));
|
|
1352
1349
|
}
|
|
1353
1350
|
initCustomSortFunctionsMap() {
|
|
1351
|
+
this.customSortFunctions.clear();
|
|
1354
1352
|
this.tableConfig.columnsCfg
|
|
1355
1353
|
.filter(c => c.sort != null && isFeatureEnabled(c.sort) && c.sort.customSort)
|
|
1356
1354
|
.forEach(c => this.customSortFunctions.set(c.key, c.sort.customSort));
|
|
1357
1355
|
}
|
|
1358
1356
|
initTable() {
|
|
1359
1357
|
this._tableName = this.tableConfig.name ?? 'unknown-table-name';
|
|
1360
|
-
this.tableDataSource =
|
|
1361
|
-
this._defaultFilterPredicate = this.tableDataSource.filterPredicate;
|
|
1358
|
+
this.tableDataSource.data = TableRowsFactory.convert(this.tableData, this.tableConfig.columnsCfg);
|
|
1362
1359
|
this.tableView = TableViewFactory.toView(this.tableDataSource.data, this.tableConfig);
|
|
1363
1360
|
this.rowStyles = RowStyleFactory.toRowStyles(this.tableDataSource.data, this.tableConfig);
|
|
1364
1361
|
this._headerStyle = this.toCss(this.tableConfig.headerRowCfg?.styleCfg?.style);
|
|
@@ -1425,6 +1422,7 @@ class NgxAurMatTableComponent {
|
|
|
1425
1422
|
if (this.isServerMode() && this.serverPageController) {
|
|
1426
1423
|
this.serverPageController.onPage({ pageIndex: event.pageIndex, pageSize: event.pageSize });
|
|
1427
1424
|
}
|
|
1425
|
+
this.cdr.markForCheck();
|
|
1428
1426
|
}
|
|
1429
1427
|
updateTimelineBounds() {
|
|
1430
1428
|
if (!this.timelineProvider.isEnabled)
|
|
@@ -1476,13 +1474,13 @@ class NgxAurMatTableComponent {
|
|
|
1476
1474
|
this.rowAction.emit({ action, value: row });
|
|
1477
1475
|
}
|
|
1478
1476
|
/**
|
|
1479
|
-
*
|
|
1477
|
+
* Отправляет действие, инициированное элементом mat-menu.
|
|
1480
1478
|
*
|
|
1481
|
-
*
|
|
1482
|
-
* mat-menu
|
|
1483
|
-
* ((click)="closed.emit('click')"),
|
|
1484
|
-
*
|
|
1485
|
-
*
|
|
1479
|
+
* В отличие от {@link emitRowAction}, здесь НЕ нужно вызывать $event.stopPropagation():
|
|
1480
|
+
* mat-menu закрывается, когда клик всплывает до его панели
|
|
1481
|
+
* ((click)="closed.emit('click')"), поэтому остановка всплытия оставила бы
|
|
1482
|
+
* меню открытым. Меню рендерится в overlay вне строки, так что здесь нет
|
|
1483
|
+
* клика по строке, который нужно подавлять.
|
|
1486
1484
|
*/
|
|
1487
1485
|
emitMenuAction(action, row) {
|
|
1488
1486
|
this.rowAction.emit({ action, value: row });
|
|
@@ -1496,13 +1494,13 @@ class NgxAurMatTableComponent {
|
|
|
1496
1494
|
castSrc(row) {
|
|
1497
1495
|
return row;
|
|
1498
1496
|
}
|
|
1499
|
-
/** StyleBuilder.Row | string | null -> CSS
|
|
1497
|
+
/** StyleBuilder.Row | string | null -> CSS-строка | null. */
|
|
1500
1498
|
toCss(s) {
|
|
1501
1499
|
if (s == null)
|
|
1502
1500
|
return null;
|
|
1503
1501
|
return typeof s === 'string' ? s : s.build();
|
|
1504
1502
|
}
|
|
1505
|
-
/** base
|
|
1503
|
+
/** `base` с `overlay` поверх. Builder-ы -> переопределение полей; любая строка -> конкатенация (в CSS побеждает последнее). */
|
|
1506
1504
|
mergeStyle(base, overlay) {
|
|
1507
1505
|
if (base == null)
|
|
1508
1506
|
return this.toCss(overlay);
|
|
@@ -1513,14 +1511,48 @@ class NgxAurMatTableComponent {
|
|
|
1513
1511
|
}
|
|
1514
1512
|
return `${this.toCss(base) ?? ''} ${this.toCss(overlay) ?? ''}`.trim();
|
|
1515
1513
|
}
|
|
1516
|
-
/**
|
|
1514
|
+
/** хук итога: статическое значение или (totals, data) => значение. */
|
|
1517
1515
|
resolveTotal(v, totals, data) {
|
|
1518
1516
|
return typeof v === 'function' ? v(totals, data) : v;
|
|
1519
1517
|
}
|
|
1520
|
-
/**
|
|
1518
|
+
/** Хелпер для шаблона: функция активна, когда её конфигурация присутствует, если только не задано `enable: false`. */
|
|
1521
1519
|
isFeatureEnabled(cfg) {
|
|
1522
1520
|
return isFeatureEnabled(cfg);
|
|
1523
1521
|
}
|
|
1522
|
+
/**
|
|
1523
|
+
* Видна ли строка итогов на текущей странице.
|
|
1524
|
+
* По умолчанию итоги показываются только на последней странице пагинации;
|
|
1525
|
+
* `totalRowCfg.showOnEveryPage: true` возвращает показ на каждой странице.
|
|
1526
|
+
* Когда пагинация выключена — итоги показываются всегда.
|
|
1527
|
+
*/
|
|
1528
|
+
isTotalRowVisible() {
|
|
1529
|
+
if (this.tableConfig.totalRowCfg?.showOnEveryPage)
|
|
1530
|
+
return true;
|
|
1531
|
+
if (!this.paginationProvider.isEnabled)
|
|
1532
|
+
return true;
|
|
1533
|
+
const { pageIndex, lastPageIndex } = this.currentPaging();
|
|
1534
|
+
return pageIndex >= lastPageIndex;
|
|
1535
|
+
}
|
|
1536
|
+
/**
|
|
1537
|
+
* Текущий индекс страницы и индекс последней страницы.
|
|
1538
|
+
* Серверный режим читает их из paginatorState (как getTimelineVisibleData),
|
|
1539
|
+
* клиентский — из активного пагинатора и числа отфильтрованных строк.
|
|
1540
|
+
*/
|
|
1541
|
+
currentPaging() {
|
|
1542
|
+
let total, pageIndex, pageSize;
|
|
1543
|
+
if (this.paginatorState) {
|
|
1544
|
+
total = this.paginatorState.length;
|
|
1545
|
+
pageIndex = this.paginatorState.pageIndex;
|
|
1546
|
+
pageSize = this.activePaginator?.pageSize ?? this.paginationProvider.size;
|
|
1547
|
+
}
|
|
1548
|
+
else {
|
|
1549
|
+
total = this.tableDataSource.filteredData.length;
|
|
1550
|
+
pageIndex = this.activePaginator?.pageIndex ?? 0;
|
|
1551
|
+
pageSize = this.activePaginator?.pageSize ?? this.paginationProvider.size;
|
|
1552
|
+
}
|
|
1553
|
+
const lastPageIndex = pageSize > 0 ? Math.max(0, Math.ceil(total / pageSize) - 1) : 0;
|
|
1554
|
+
return { pageIndex, lastPageIndex };
|
|
1555
|
+
}
|
|
1524
1556
|
hoverActive(row) {
|
|
1525
1557
|
const h = this.tableConfig.bodyRowCfg?.hoverCfg;
|
|
1526
1558
|
return this.hovered === row && h?.enable !== false;
|
|
@@ -1528,7 +1560,7 @@ class NgxAurMatTableComponent {
|
|
|
1528
1560
|
onRowEnter(row) { this.hovered = row; }
|
|
1529
1561
|
onRowLeave(row) { if (this.hovered === row)
|
|
1530
1562
|
this.hovered = null; }
|
|
1531
|
-
/** [style]
|
|
1563
|
+
/** [style] для <tr> тела: base -> overlay наведения -> overlay подсветки (побеждает подсветка). */
|
|
1532
1564
|
rowStyle(row) {
|
|
1533
1565
|
let acc = this.rowStyles[row.id]?.style ?? null;
|
|
1534
1566
|
if (this.hoverActive(row)) {
|
|
@@ -1595,7 +1627,7 @@ class NgxAurMatTableComponent {
|
|
|
1595
1627
|
this.subscribeExternalPaginator();
|
|
1596
1628
|
const initialSort = this.matSort?.active ? { active: this.matSort.active, direction: this.matSort.direction } : undefined;
|
|
1597
1629
|
this.serverPageController.start({
|
|
1598
|
-
//
|
|
1630
|
+
// провайдер может быть ещё не инициализирован (в серверном режиме нет привязки tableData) — читаем из конфигурации
|
|
1599
1631
|
pageSize: this.tableConfig.paginationCfg?.size ?? 20,
|
|
1600
1632
|
sort: initialSort,
|
|
1601
1633
|
});
|
|
@@ -1608,24 +1640,24 @@ class NgxAurMatTableComponent {
|
|
|
1608
1640
|
}
|
|
1609
1641
|
applyExternalPaginatorState(state) {
|
|
1610
1642
|
if (this.externalPaginator) {
|
|
1611
|
-
//
|
|
1643
|
+
// РИСК (подход C из спецификации): OnPush MatPaginator требует CD, чтобы отразить императивные изменения.
|
|
1612
1644
|
this.externalPaginator.length = state.length;
|
|
1613
1645
|
this.externalPaginator.pageIndex = state.pageIndex;
|
|
1614
1646
|
this.cdr.markForCheck();
|
|
1615
1647
|
}
|
|
1616
1648
|
}
|
|
1617
|
-
/**
|
|
1649
|
+
/** Повторно вызывает pageSource (серверный режим). resetPageIndex по умолчанию true (например, изменился внешний фильтр). */
|
|
1618
1650
|
reload(opts) {
|
|
1619
1651
|
if (this.isServerMode() && this.serverPageController) {
|
|
1620
1652
|
this.serverPageController.reload(opts);
|
|
1621
1653
|
}
|
|
1622
1654
|
else {
|
|
1623
|
-
//
|
|
1655
|
+
// Клиентский режим: повторно применяем текущие данные/фильтры.
|
|
1624
1656
|
this.refreshTable();
|
|
1625
1657
|
}
|
|
1626
1658
|
}
|
|
1627
1659
|
ngOnDestroy() {
|
|
1628
|
-
this.resizeColumnOffsetsObserver
|
|
1660
|
+
this.resizeColumnOffsetsObserver?.disconnect();
|
|
1629
1661
|
this.serverPageController?.stop();
|
|
1630
1662
|
this.externalPaginatorSub?.unsubscribe();
|
|
1631
1663
|
}
|
|
@@ -1649,7 +1681,7 @@ class NgxAurMatTableComponent {
|
|
|
1649
1681
|
this.dragDropProvider.manager.endDrag();
|
|
1650
1682
|
}
|
|
1651
1683
|
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: [
|
|
1684
|
+
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 [trackBy]=\"trackByRow\"\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 *ngIf=\"action.icon.tooltip; else menuBtnPlain\" 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-template #menuBtnPlain>\n <button mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- direct action (existing behavior) -->\n <ng-template #directAction>\n <ng-container *ngIf=\"action.visible !== false\">\n <button *ngIf=\"action.icon.tooltip; else directBtnPlain\" mat-icon-button\n (click)=\"emitRowAction(action.action, element.rowSrc, $event)\"\n [matTooltip]=\"action.icon.tooltip\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n <ng-template #directBtnPlain>\n <button mat-icon-button\n (click)=\"emitRowAction(action.action, element.rowSrc, $event)\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n </ng-template>\n </ng-container>\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 <!-- \u043A\u043E\u043B\u043E\u043D\u043A\u0438 \u0431\u0435\u0437 valueView \u043C\u0438\u043D\u0443\u044E\u0442 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u044B \u044F\u0447\u0435\u0439\u043A\u0438: \u043B\u0451\u0433\u043A\u0438\u0439 span \u0434\u0435\u0448\u0435\u0432\u043B\u0435 \u043F\u0430\u0440\u044B \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u043E\u0432 \u0441 \u043E\u0431\u0451\u0440\u0442\u043A\u0430\u043C\u0438 -->\n <lib-column-view *ngIf=\"columnConfig.valueView; else plainCell\"\n [config]=\"tableView[element.id]?.get(columnConfig.key)\"\n [value]=\"element | dataPropertyGetter: columnConfig.key\">\n </lib-column-view>\n <ng-template #plainCell>\n <span class=\"aur-plain-cell\">{{ element | dataPropertyGetter: columnConfig.key }}</span>\n </ng-template>\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 (\u0434\u0435\u0444\u044B \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043C \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u0440\u0438 \u043D\u0430\u043B\u0438\u0447\u0438\u0438 \u0448\u0430\u0431\u043B\u043E\u043D\u0430)-->\n <ng-container *ngIf=\"extraHeaderCellTopTemplate\">\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 </ng-container>\n\n\n <!-- extra header bottom cell (\u0434\u0435\u0444\u044B \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043C \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u0440\u0438 \u043D\u0430\u043B\u0438\u0447\u0438\u0438 \u0448\u0430\u0431\u043B\u043E\u043D\u0430)-->\n <ng-container *ngIf=\"extraHeaderCellBottomTemplate\">\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 </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 (\u0434\u0435\u0444 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043C \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u0440\u0438 \u043D\u0430\u043B\u0438\u0447\u0438\u0438 \u0448\u0430\u0431\u043B\u043E\u043D\u0430)-->\n <ng-container *ngIf=\"extendedRowTemplate\">\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 </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 (\u0434\u0435\u0444 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043C \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u0440\u0438 \u043D\u0430\u043B\u0438\u0447\u0438\u0438 \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u0430)-->\n <ng-container *ngIf=\"subFooterRowTemplate\">\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 </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: ["@charset \"UTF-8\";.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 .aur-plain-cell{margin-left:4px}.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
1685
|
trigger('detailExpand', [
|
|
1654
1686
|
state(ExpandState.COLLAPSED, style({ height: '0px', minHeight: '0' })),
|
|
1655
1687
|
state(ExpandState.EXPANDED, style({ height: '*' })),
|
|
@@ -1665,7 +1697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
1665
1697
|
state(ExpandState.EXPANDED, style({ height: '*' })),
|
|
1666
1698
|
transition(`${ExpandState.EXPANDED} <=> ${ExpandState.COLLAPSED}`, animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
1667
1699
|
]),
|
|
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"] }]
|
|
1700
|
+
], 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 [trackBy]=\"trackByRow\"\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 *ngIf=\"action.icon.tooltip; else menuBtnPlain\" 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-template #menuBtnPlain>\n <button mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- direct action (existing behavior) -->\n <ng-template #directAction>\n <ng-container *ngIf=\"action.visible !== false\">\n <button *ngIf=\"action.icon.tooltip; else directBtnPlain\" mat-icon-button\n (click)=\"emitRowAction(action.action, element.rowSrc, $event)\"\n [matTooltip]=\"action.icon.tooltip\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n <ng-template #directBtnPlain>\n <button mat-icon-button\n (click)=\"emitRowAction(action.action, element.rowSrc, $event)\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n </ng-template>\n </ng-container>\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 <!-- \u043A\u043E\u043B\u043E\u043D\u043A\u0438 \u0431\u0435\u0437 valueView \u043C\u0438\u043D\u0443\u044E\u0442 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u044B \u044F\u0447\u0435\u0439\u043A\u0438: \u043B\u0451\u0433\u043A\u0438\u0439 span \u0434\u0435\u0448\u0435\u0432\u043B\u0435 \u043F\u0430\u0440\u044B \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u043E\u0432 \u0441 \u043E\u0431\u0451\u0440\u0442\u043A\u0430\u043C\u0438 -->\n <lib-column-view *ngIf=\"columnConfig.valueView; else plainCell\"\n [config]=\"tableView[element.id]?.get(columnConfig.key)\"\n [value]=\"element | dataPropertyGetter: columnConfig.key\">\n </lib-column-view>\n <ng-template #plainCell>\n <span class=\"aur-plain-cell\">{{ element | dataPropertyGetter: columnConfig.key }}</span>\n </ng-template>\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 (\u0434\u0435\u0444\u044B \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043C \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u0440\u0438 \u043D\u0430\u043B\u0438\u0447\u0438\u0438 \u0448\u0430\u0431\u043B\u043E\u043D\u0430)-->\n <ng-container *ngIf=\"extraHeaderCellTopTemplate\">\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 </ng-container>\n\n\n <!-- extra header bottom cell (\u0434\u0435\u0444\u044B \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043C \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u0440\u0438 \u043D\u0430\u043B\u0438\u0447\u0438\u0438 \u0448\u0430\u0431\u043B\u043E\u043D\u0430)-->\n <ng-container *ngIf=\"extraHeaderCellBottomTemplate\">\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 </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 (\u0434\u0435\u0444 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043C \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u0440\u0438 \u043D\u0430\u043B\u0438\u0447\u0438\u0438 \u0448\u0430\u0431\u043B\u043E\u043D\u0430)-->\n <ng-container *ngIf=\"extendedRowTemplate\">\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 </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 (\u0434\u0435\u0444 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043C \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u0440\u0438 \u043D\u0430\u043B\u0438\u0447\u0438\u0438 \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u0430)-->\n <ng-container *ngIf=\"subFooterRowTemplate\">\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 </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: ["@charset \"UTF-8\";.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 .aur-plain-cell{margin-left:4px}.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
1701
|
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }], propDecorators: { displayColumns: [{
|
|
1670
1702
|
type: Input
|
|
1671
1703
|
}], subFooterRowTemplate: [{
|
|
@@ -1779,7 +1811,6 @@ class NgxAurMatTableModule {
|
|
|
1779
1811
|
MatTooltipModule,
|
|
1780
1812
|
MatCheckboxModule,
|
|
1781
1813
|
MatFormFieldModule,
|
|
1782
|
-
DragDropModule,
|
|
1783
1814
|
MatMenuModule], exports: [NgxAurMatTableComponent,
|
|
1784
1815
|
DataPropertyGetterPipe,
|
|
1785
1816
|
NgxTableSubFooterRowDirective,
|
|
@@ -1795,7 +1826,6 @@ class NgxAurMatTableModule {
|
|
|
1795
1826
|
MatTooltipModule,
|
|
1796
1827
|
MatCheckboxModule,
|
|
1797
1828
|
MatFormFieldModule,
|
|
1798
|
-
DragDropModule,
|
|
1799
1829
|
MatMenuModule] }); }
|
|
1800
1830
|
}
|
|
1801
1831
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NgxAurMatTableModule, decorators: [{
|
|
@@ -1821,7 +1851,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
1821
1851
|
MatTooltipModule,
|
|
1822
1852
|
MatCheckboxModule,
|
|
1823
1853
|
MatFormFieldModule,
|
|
1824
|
-
DragDropModule,
|
|
1825
1854
|
MatMenuModule,
|
|
1826
1855
|
],
|
|
1827
1856
|
exports: [
|
|
@@ -1837,9 +1866,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
1837
1866
|
var NgxAurFilters;
|
|
1838
1867
|
(function (NgxAurFilters) {
|
|
1839
1868
|
/**
|
|
1840
|
-
*
|
|
1841
|
-
*
|
|
1842
|
-
* @template T
|
|
1869
|
+
* Базовый абстрактный класс фильтра.
|
|
1870
|
+
* Определяет общий интерфейс для всех фильтров.
|
|
1871
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
1843
1872
|
*/
|
|
1844
1873
|
class Base {
|
|
1845
1874
|
constructor() {
|
|
@@ -1850,9 +1879,9 @@ var NgxAurFilters;
|
|
|
1850
1879
|
}
|
|
1851
1880
|
NgxAurFilters.ExtractableProperty = ExtractableProperty;
|
|
1852
1881
|
/**
|
|
1853
|
-
*
|
|
1854
|
-
* @template T
|
|
1855
|
-
* @template V
|
|
1882
|
+
* Класс для фильтрации данных на основе одного значения.
|
|
1883
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
1884
|
+
* @template V Тип значения, используемого для фильтрации.
|
|
1856
1885
|
*/
|
|
1857
1886
|
class ValueSingle extends ExtractableProperty {
|
|
1858
1887
|
constructor(value) {
|
|
@@ -1865,9 +1894,9 @@ var NgxAurFilters;
|
|
|
1865
1894
|
}
|
|
1866
1895
|
NgxAurFilters.ValueSingle = ValueSingle;
|
|
1867
1896
|
/**
|
|
1868
|
-
*
|
|
1869
|
-
* @template T
|
|
1870
|
-
* @template V
|
|
1897
|
+
* Класс для фильтрации данных на основе массива значений.
|
|
1898
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
1899
|
+
* @template V Тип значений, используемых для фильтрации.
|
|
1871
1900
|
*/
|
|
1872
1901
|
class ValueArray extends ExtractableProperty {
|
|
1873
1902
|
constructor(values) {
|
|
@@ -1877,9 +1906,9 @@ var NgxAurFilters;
|
|
|
1877
1906
|
}
|
|
1878
1907
|
NgxAurFilters.ValueArray = ValueArray;
|
|
1879
1908
|
/**
|
|
1880
|
-
*
|
|
1881
|
-
* @template T
|
|
1882
|
-
* @template V
|
|
1909
|
+
* Класс для фильтрации данных на основе множества значений.
|
|
1910
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
1911
|
+
* @template V Тип значений, используемых для фильтрации.
|
|
1883
1912
|
*/
|
|
1884
1913
|
class ValueSet extends ExtractableProperty {
|
|
1885
1914
|
constructor(values) {
|
|
@@ -1889,9 +1918,9 @@ var NgxAurFilters;
|
|
|
1889
1918
|
}
|
|
1890
1919
|
NgxAurFilters.ValueSet = ValueSet;
|
|
1891
1920
|
/**
|
|
1892
|
-
*
|
|
1893
|
-
* @template T
|
|
1894
|
-
* @template V
|
|
1921
|
+
* Класс для фильтрации данных в диапазоне min-max.
|
|
1922
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
1923
|
+
* @template V Тип значений, определяющих диапазон.
|
|
1895
1924
|
*/
|
|
1896
1925
|
class ValueMinMax extends ExtractableProperty {
|
|
1897
1926
|
constructor(_min, _max) {
|
|
@@ -1911,9 +1940,9 @@ var NgxAurFilters;
|
|
|
1911
1940
|
}
|
|
1912
1941
|
NgxAurFilters.ValueMinMax = ValueMinMax;
|
|
1913
1942
|
/**
|
|
1914
|
-
*
|
|
1915
|
-
* @template T
|
|
1916
|
-
* @template V
|
|
1943
|
+
* Класс для фильтрации данных в диапазоне min-max.
|
|
1944
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
1945
|
+
* @template V Тип значений, определяющих диапазон.
|
|
1917
1946
|
*/
|
|
1918
1947
|
class ValueMinMaxNumber extends ValueMinMax {
|
|
1919
1948
|
constructor(min, max) {
|
|
@@ -1928,10 +1957,10 @@ var NgxAurFilters;
|
|
|
1928
1957
|
}
|
|
1929
1958
|
NgxAurFilters.ValueMinMaxNumber = ValueMinMaxNumber;
|
|
1930
1959
|
/**
|
|
1931
|
-
*
|
|
1932
|
-
*
|
|
1933
|
-
*
|
|
1934
|
-
* @template T
|
|
1960
|
+
* Абстрактный класс для фильтрации данных по тому, содержит ли определённое свойство
|
|
1961
|
+
* данных, после обрезки и приведения к нижнему регистру, заданную
|
|
1962
|
+
* подстроку, также обрезанную и приведённую к нижнему регистру.
|
|
1963
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
1935
1964
|
*/
|
|
1936
1965
|
class ContainsStringIgnoreCase extends ValueSingle {
|
|
1937
1966
|
filterFn() {
|
|
@@ -2053,8 +2082,8 @@ var NgxAurFilters;
|
|
|
2053
2082
|
}
|
|
2054
2083
|
NgxAurFilters.notHasInSet = notHasInSet;
|
|
2055
2084
|
/**
|
|
2056
|
-
*
|
|
2057
|
-
* @template T
|
|
2085
|
+
* Класс составного фильтра, объединяющий несколько фильтров с помощью логического AND.
|
|
2086
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
2058
2087
|
*/
|
|
2059
2088
|
class CompositeAndFilter extends Base {
|
|
2060
2089
|
constructor(filters) {
|
|
@@ -2062,15 +2091,15 @@ var NgxAurFilters;
|
|
|
2062
2091
|
this.filters = filters || [];
|
|
2063
2092
|
}
|
|
2064
2093
|
/**
|
|
2065
|
-
*
|
|
2066
|
-
*
|
|
2094
|
+
* Создаёт функцию фильтрации, объединяющую функции фильтрации всех
|
|
2095
|
+
* фильтров составного фильтра с помощью логического AND.
|
|
2067
2096
|
*
|
|
2068
|
-
* @returns
|
|
2069
|
-
* - `data`:
|
|
2070
|
-
*
|
|
2097
|
+
* @returns Функция фильтрации, принимающая единственный параметр:
|
|
2098
|
+
* - `data`: Отдельный элемент данных из источника данных MatTable.
|
|
2099
|
+
* Тип `data` определяется обобщённым параметром типа 'T'.
|
|
2071
2100
|
*
|
|
2072
|
-
*
|
|
2073
|
-
*
|
|
2101
|
+
* Функция возвращает `true`, если все фильтры составного фильтра возвращают `true`
|
|
2102
|
+
* для элемента `data`, иначе `false`.
|
|
2074
2103
|
*/
|
|
2075
2104
|
filterFn() {
|
|
2076
2105
|
return (data) => {
|
|
@@ -2078,11 +2107,11 @@ var NgxAurFilters;
|
|
|
2078
2107
|
};
|
|
2079
2108
|
}
|
|
2080
2109
|
/**
|
|
2081
|
-
*
|
|
2082
|
-
*
|
|
2110
|
+
* Определяет, эквивалентен ли текущий составной фильтр другому фильтру.
|
|
2111
|
+
* Этот метод используется для сравнения текущего применённого составного фильтра с новым фильтром.
|
|
2083
2112
|
*
|
|
2084
|
-
* @param other
|
|
2085
|
-
* @returns `true
|
|
2113
|
+
* @param other Фильтр для сравнения с текущим фильтром.
|
|
2114
|
+
* @returns `true`, если текущий фильтр и фильтр `other` эквивалентны, иначе `false`.
|
|
2086
2115
|
*/
|
|
2087
2116
|
equals(other) {
|
|
2088
2117
|
if (!(other instanceof CompositeAndFilter)) {
|