ngx-aur-mat-table 19.1.0 → 19.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ngx-aur-mat-table.mjs +248 -198
- package/fesm2022/ngx-aur-mat-table.mjs.map +1 -1
- package/lib/drag-drop/aur-drag-drop.manager.d.ts +23 -23
- package/lib/drag-drop/model/aur-drag-drop-mapping.d.ts +15 -15
- package/lib/factories/ActionViewFactory.d.ts +8 -8
- package/lib/factories/MatTableDataSourceFactory.d.ts +3 -3
- package/lib/factories/TableRowsFactory.d.ts +4 -4
- package/lib/filters/NgxAurFilters.d.ts +54 -54
- package/lib/model/AurPage.d.ts +5 -5
- package/lib/model/ColumnConfig.d.ts +78 -54
- 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 +40 -23
- package/lib/providers/DragDropProvider.d.ts +5 -5
- package/lib/providers/HeaderButtonProvider.d.ts +2 -2
- package/lib/providers/IndexProvider.d.ts +14 -14
- package/lib/providers/PaginationProvider.d.ts +1 -1
- package/lib/providers/RowActionProvider.d.ts +4 -4
- package/lib/providers/SelectionProvider.d.ts +2 -2
- package/lib/style-builder/style-builder.d.ts +1 -1
- package/lib/utils/feature-enabled.util.d.ts +10 -0
- package/lib/utils/ngx-aur-table-config.util.d.ts +1 -1
- package/lib/utils/ngx-aur-table-page-event.utils.d.ts +2 -2
- package/package.json +1 -1
|
@@ -36,7 +36,7 @@ class NgxAurTableConfigUtil {
|
|
|
36
36
|
return config.columnsCfg;
|
|
37
37
|
}
|
|
38
38
|
/**
|
|
39
|
-
* @return Map
|
|
39
|
+
* @return Map, где ключ — это 'key', а значение — это 'name'
|
|
40
40
|
*/
|
|
41
41
|
static keyNameMap(config) {
|
|
42
42
|
return new Map(this.columnCfgs(config).map(cfg => [cfg.key, cfg.name]));
|
|
@@ -45,12 +45,12 @@ class NgxAurTableConfigUtil {
|
|
|
45
45
|
|
|
46
46
|
class NgxAurTablePageEventUtils {
|
|
47
47
|
/**
|
|
48
|
-
* @deprecated
|
|
49
|
-
*
|
|
48
|
+
* @deprecated Не нужно с API `pageSource` — таблица сама выполняет начальную
|
|
49
|
+
* загрузку. Сохранено для устаревшего пути ручной серверной пагинации.
|
|
50
50
|
*/
|
|
51
51
|
static createEmpty(tableConfig) {
|
|
52
52
|
return {
|
|
53
|
-
pageSize: tableConfig.
|
|
53
|
+
pageSize: tableConfig.paginationCfg.size,
|
|
54
54
|
pageIndex: 0,
|
|
55
55
|
previousPageIndex: 0,
|
|
56
56
|
length: 0
|
|
@@ -87,7 +87,7 @@ var StyleBuilder;
|
|
|
87
87
|
this._fontWeight = weight;
|
|
88
88
|
return this;
|
|
89
89
|
}
|
|
90
|
-
/**
|
|
90
|
+
/** настроенный цвет текста ('' если не задан) — используется для переключения `.new-color` */
|
|
91
91
|
get colorValue() {
|
|
92
92
|
return this._color;
|
|
93
93
|
}
|
|
@@ -206,7 +206,7 @@ class EmptyValue {
|
|
|
206
206
|
selectionCfg: EmptyValue.SELECTION_CONFIG,
|
|
207
207
|
actionCfg: EmptyValue.ACTION_CONFIG,
|
|
208
208
|
indexCfg: EmptyValue.INDEX_CONFIG,
|
|
209
|
-
|
|
209
|
+
paginationCfg: EmptyValue.PAGINATION_CONFIG
|
|
210
210
|
}; }
|
|
211
211
|
static { this.TIMELINE_CONFIG = {
|
|
212
212
|
enable: false
|
|
@@ -225,6 +225,17 @@ class AbstractProvider {
|
|
|
225
225
|
}
|
|
226
226
|
}
|
|
227
227
|
|
|
228
|
+
/**
|
|
229
|
+
* Функция включена, когда её объект конфигурации присутствует, если только не `enable: false`.
|
|
230
|
+
*
|
|
231
|
+
* Используется функциями, сигналом включения которых является «конфигурация присутствует» (Группа 1).
|
|
232
|
+
* Функции, сигналом включения которых является что-то иное (Hover → взаимодействие, TotalRow → колонки
|
|
233
|
+
* totalConverter), НЕ должны использовать этот помощник — отсутствующая конфигурация не выключает их.
|
|
234
|
+
*/
|
|
235
|
+
function isFeatureEnabled(cfg) {
|
|
236
|
+
return !!cfg && cfg.enable !== false;
|
|
237
|
+
}
|
|
238
|
+
|
|
228
239
|
class SelectionProvider extends AbstractProvider {
|
|
229
240
|
static { this.COLUMN_NAME = 'tbl_selects'; }
|
|
230
241
|
constructor(tableConfig, tableDataSource, initSelection) {
|
|
@@ -253,15 +264,15 @@ class SelectionProvider extends AbstractProvider {
|
|
|
253
264
|
}
|
|
254
265
|
return this;
|
|
255
266
|
}
|
|
256
|
-
bindEventEmitters(
|
|
267
|
+
bindEventEmitters(selectChange, selectAdded, selectRemoved, selectionModel) {
|
|
257
268
|
this.selection.changed.subscribe(event => {
|
|
258
269
|
if (event.added) {
|
|
259
|
-
|
|
270
|
+
selectAdded.emit(event.added);
|
|
260
271
|
}
|
|
261
272
|
if (event.removed) {
|
|
262
|
-
|
|
273
|
+
selectRemoved.emit(event.removed);
|
|
263
274
|
}
|
|
264
|
-
|
|
275
|
+
selectChange.emit(this.selection.selected);
|
|
265
276
|
});
|
|
266
277
|
selectionModel.emit(this.selection);
|
|
267
278
|
return this;
|
|
@@ -281,7 +292,7 @@ class SelectionProvider extends AbstractProvider {
|
|
|
281
292
|
return this.tableDataSource.filteredData.filter(row => this.selection.isSelected(row.rowSrc));
|
|
282
293
|
}
|
|
283
294
|
static canEnable(tableConfig) {
|
|
284
|
-
return (tableConfig.selectionCfg
|
|
295
|
+
return isFeatureEnabled(tableConfig.selectionCfg);
|
|
285
296
|
}
|
|
286
297
|
static create(tableConfig, tableDataSource, initSelection) {
|
|
287
298
|
if (SelectionProvider.canEnable(tableConfig)) {
|
|
@@ -298,17 +309,17 @@ class SelectionProviderDummy extends SelectionProvider {
|
|
|
298
309
|
addCheckboxColumn(columns) {
|
|
299
310
|
return this;
|
|
300
311
|
}
|
|
301
|
-
bindEventEmitters(
|
|
312
|
+
bindEventEmitters(selectChange, selectAdded, selectRemoved) {
|
|
302
313
|
return this;
|
|
303
314
|
}
|
|
304
315
|
}
|
|
305
316
|
|
|
306
317
|
class ActionViewFactory {
|
|
307
318
|
/**
|
|
308
|
-
*
|
|
309
|
-
* @param rows -
|
|
310
|
-
* @param actionConfig -
|
|
311
|
-
* @return Map
|
|
319
|
+
* Преобразует строки и действия в формат представления.
|
|
320
|
+
* @param rows - Строки данных для преобразования.
|
|
321
|
+
* @param actionConfig - Конфигурация действий над строками.
|
|
322
|
+
* @return Map идентификаторов строк к связанным с ними представлениям действий.
|
|
312
323
|
*/
|
|
313
324
|
static create(rows, actionConfig) {
|
|
314
325
|
const result = new Map();
|
|
@@ -318,16 +329,16 @@ class ActionViewFactory {
|
|
|
318
329
|
return result;
|
|
319
330
|
}
|
|
320
331
|
/**
|
|
321
|
-
*
|
|
322
|
-
* @param row -
|
|
323
|
-
* @param actionConfig -
|
|
324
|
-
* @return
|
|
332
|
+
* Подготавливает действия для конкретной строки на основе конфигурации действий.
|
|
333
|
+
* @param row - Строка данных, для которой нужно подготовить действия.
|
|
334
|
+
* @param actionConfig - Конфигурация действий над строками.
|
|
335
|
+
* @return Массив действий для строки.
|
|
325
336
|
*/
|
|
326
337
|
static prepareActionsForRow(row, actionConfig) {
|
|
327
338
|
return actionConfig.actions.map(action => ({
|
|
328
339
|
action: action.action(row.rowSrc),
|
|
329
340
|
icon: this.prepareIconConfig(action.icon, row.rowSrc),
|
|
330
|
-
|
|
341
|
+
visible: action.visible ? action.visible(row.rowSrc) : true,
|
|
331
342
|
menu: action.menu ? action.menu.map(item => this.prepareMenuItem(item, row.rowSrc)) : undefined
|
|
332
343
|
}));
|
|
333
344
|
}
|
|
@@ -336,8 +347,8 @@ class ActionViewFactory {
|
|
|
336
347
|
action: item.action(value),
|
|
337
348
|
text: item.text(value),
|
|
338
349
|
icon: item.icon ? this.prepareIconConfig(item.icon, value) : undefined,
|
|
339
|
-
|
|
340
|
-
disabled: item.disabled ? item.disabled(value) :
|
|
350
|
+
visible: item.visible ? item.visible(value) : true,
|
|
351
|
+
disabled: item.disabled ? item.disabled(value) : false
|
|
341
352
|
};
|
|
342
353
|
}
|
|
343
354
|
static prepareIconConfig(iconSource, value) {
|
|
@@ -345,7 +356,6 @@ class ActionViewFactory {
|
|
|
345
356
|
name: iconSource.name(value),
|
|
346
357
|
color: iconSource.color ? iconSource.color(value) : undefined,
|
|
347
358
|
tooltip: iconSource.tooltip ? iconSource.tooltip(value) : undefined,
|
|
348
|
-
position: iconSource.position,
|
|
349
359
|
wrapper: iconSource.wrapper ? { color: iconSource.wrapper.color(value) } : undefined
|
|
350
360
|
};
|
|
351
361
|
}
|
|
@@ -356,7 +366,7 @@ class RowActionProvider extends AbstractProvider {
|
|
|
356
366
|
constructor(tableConfig) {
|
|
357
367
|
super();
|
|
358
368
|
this.isEnabled = true;
|
|
359
|
-
//
|
|
369
|
+
// ключ — это rowId
|
|
360
370
|
this.actionView = new Map();
|
|
361
371
|
if (!tableConfig.actionCfg) {
|
|
362
372
|
throw new Error("Actions is undefined");
|
|
@@ -380,10 +390,10 @@ class RowActionProvider extends AbstractProvider {
|
|
|
380
390
|
return this;
|
|
381
391
|
}
|
|
382
392
|
/**
|
|
383
|
-
*
|
|
384
|
-
* @param rows -
|
|
385
|
-
* @param actionConfig -
|
|
386
|
-
* @return
|
|
393
|
+
* Преобразует строки и действия в формат представления.
|
|
394
|
+
* @param rows - Строки данных для преобразования.
|
|
395
|
+
* @param actionConfig - Настройка действий над строками.
|
|
396
|
+
* @return Соответствие идентификаторов строк связанным с ними представлениям действий.
|
|
387
397
|
*/
|
|
388
398
|
setView(rows) {
|
|
389
399
|
if (!this.config) {
|
|
@@ -393,7 +403,7 @@ class RowActionProvider extends AbstractProvider {
|
|
|
393
403
|
return this;
|
|
394
404
|
}
|
|
395
405
|
static canEnabled(tableConfig) {
|
|
396
|
-
return (tableConfig.actionCfg
|
|
406
|
+
return isFeatureEnabled(tableConfig.actionCfg);
|
|
397
407
|
}
|
|
398
408
|
static create(tableConfig) {
|
|
399
409
|
if (RowActionProvider.canEnabled(tableConfig)) {
|
|
@@ -417,10 +427,10 @@ class RowActionProviderDummy extends RowActionProvider {
|
|
|
417
427
|
|
|
418
428
|
class TableViewFactory {
|
|
419
429
|
/**
|
|
420
|
-
*
|
|
421
|
-
* @param rows
|
|
422
|
-
* @param tableConfig
|
|
423
|
-
* @returns
|
|
430
|
+
* Преобразует строки в формат представления на основе конфигурации таблицы.
|
|
431
|
+
* @param rows Строки таблицы.
|
|
432
|
+
* @param tableConfig Конфигурация таблицы.
|
|
433
|
+
* @returns Массив map, представляющих представление для каждой строки.
|
|
424
434
|
*/
|
|
425
435
|
static toView(rows, tableConfig) {
|
|
426
436
|
const columnViewMap = new Map();
|
|
@@ -452,9 +462,8 @@ class TableViewFactory {
|
|
|
452
462
|
name: iconSource.name(row),
|
|
453
463
|
color: iconSource.color ? iconSource.color(row) : undefined,
|
|
454
464
|
tooltip: iconSource.tooltip ? iconSource.tooltip(row) : undefined,
|
|
455
|
-
position: iconSource.position,
|
|
456
465
|
wrapper: iconSource.wrapper ? { color: iconSource.wrapper.color(row) } : undefined,
|
|
457
|
-
|
|
466
|
+
visible: iconSource.visible ? iconSource.visible(row) : true
|
|
458
467
|
};
|
|
459
468
|
}
|
|
460
469
|
static configureText(textSource, row) {
|
|
@@ -479,9 +488,9 @@ class TableViewFactory {
|
|
|
479
488
|
|
|
480
489
|
class RowStyleFactory {
|
|
481
490
|
/**
|
|
482
|
-
*
|
|
483
|
-
*
|
|
484
|
-
* (
|
|
491
|
+
* Разрешает `bodyRowCfg.styleCfg` в массив по строкам, индексированный по `row.id`.
|
|
492
|
+
* Возвращает пустой массив, когда хук не сконфигурирован. Стили хранятся в сыром виде
|
|
493
|
+
* (не собранные `StyleBuilder.Row | string`), чтобы компонент мог вызвать `overrideWith()`/`build()` во время отрисовки.
|
|
485
494
|
*/
|
|
486
495
|
static toRowStyles(rows, tableConfig) {
|
|
487
496
|
const cfg = tableConfig.bodyRowCfg?.styleCfg;
|
|
@@ -496,8 +505,8 @@ class RowStyleFactory {
|
|
|
496
505
|
}
|
|
497
506
|
|
|
498
507
|
/**
|
|
499
|
-
*
|
|
500
|
-
*
|
|
508
|
+
* Предоставляет функциональность для управления колонкой индекса в таблице.
|
|
509
|
+
* Класс может обрабатывать настройки индекса и изменять массив колонок, добавляя в него колонку индекса.
|
|
501
510
|
*/
|
|
502
511
|
class IndexProvider extends AbstractProvider {
|
|
503
512
|
static { this.COLUMN_NAME = 'tbl_index'; }
|
|
@@ -514,9 +523,9 @@ class IndexProvider extends AbstractProvider {
|
|
|
514
523
|
return IndexProvider.COLUMN_NAME;
|
|
515
524
|
}
|
|
516
525
|
/**
|
|
517
|
-
*
|
|
518
|
-
* @param columns
|
|
519
|
-
* @returns
|
|
526
|
+
* Добавляет колонку индекса в начало массива колонок.
|
|
527
|
+
* @param columns Массив имён колонок, в который должна быть добавлена колонка индекса.
|
|
528
|
+
* @returns Экземпляр IndexProvider для цепочки вызовов.
|
|
520
529
|
*/
|
|
521
530
|
addIndexColumn(columns) {
|
|
522
531
|
if (this.notHasKey(this.COLUMN_NAME, columns)) {
|
|
@@ -525,10 +534,10 @@ class IndexProvider extends AbstractProvider {
|
|
|
525
534
|
return this;
|
|
526
535
|
}
|
|
527
536
|
/**
|
|
528
|
-
*
|
|
529
|
-
*
|
|
530
|
-
* @param tableConfig
|
|
531
|
-
* @returns
|
|
537
|
+
* Фабричный метод для создания экземпляра IndexProvider на основе настройки таблицы.
|
|
538
|
+
* Возвращает заглушку-провайдер, если индекс не включён в настройке.
|
|
539
|
+
* @param tableConfig Настройка таблицы.
|
|
540
|
+
* @returns Экземпляр IndexProvider или IndexProviderDummy.
|
|
532
541
|
*/
|
|
533
542
|
static create(tableConfig) {
|
|
534
543
|
if (IndexProvider.canCreate(tableConfig)) {
|
|
@@ -537,12 +546,12 @@ class IndexProvider extends AbstractProvider {
|
|
|
537
546
|
return new IndexProviderDummy();
|
|
538
547
|
}
|
|
539
548
|
static canCreate(tableConfig) {
|
|
540
|
-
return (tableConfig.indexCfg
|
|
549
|
+
return isFeatureEnabled(tableConfig.indexCfg);
|
|
541
550
|
}
|
|
542
551
|
}
|
|
543
552
|
/**
|
|
544
|
-
*
|
|
545
|
-
*
|
|
553
|
+
* Заглушка-реализация IndexProvider, которая используется, когда функциональность индекса не включена.
|
|
554
|
+
* Этот класс переопределяет некоторые методы, предоставляя пустые реализации.
|
|
546
555
|
*/
|
|
547
556
|
class IndexProviderDummy extends IndexProvider {
|
|
548
557
|
constructor() {
|
|
@@ -550,12 +559,12 @@ class IndexProviderDummy extends IndexProvider {
|
|
|
550
559
|
this.isEnabled = false;
|
|
551
560
|
}
|
|
552
561
|
/**
|
|
553
|
-
*
|
|
554
|
-
* @param columns
|
|
555
|
-
* @returns
|
|
562
|
+
* Переопределяет метод addIndexColumn, возвращая себя без изменения массива колонок.
|
|
563
|
+
* @param columns Массив имён колонок.
|
|
564
|
+
* @returns Экземпляр IndexProviderDummy для цепочки вызовов.
|
|
556
565
|
*/
|
|
557
566
|
addIndexColumn(columns) {
|
|
558
|
-
//
|
|
567
|
+
// Операция не выполняется, так как индекс не включён.
|
|
559
568
|
return this;
|
|
560
569
|
}
|
|
561
570
|
}
|
|
@@ -566,14 +575,14 @@ class PaginationProvider extends AbstractProvider {
|
|
|
566
575
|
this.isEnabled = true;
|
|
567
576
|
this.sizes = config.sizes || [5, 10, 15, 25, 50];
|
|
568
577
|
this.size = config.size || this.sizes[1];
|
|
569
|
-
this.position = config.position || '
|
|
578
|
+
this.position = config.position || 'sticky';
|
|
570
579
|
}
|
|
571
580
|
static canEnable(tableConfig) {
|
|
572
|
-
return (tableConfig.
|
|
581
|
+
return isFeatureEnabled(tableConfig.paginationCfg);
|
|
573
582
|
}
|
|
574
583
|
static create(tableConfig) {
|
|
575
|
-
if (this.canEnable(tableConfig) && tableConfig.
|
|
576
|
-
return new PaginationProvider(tableConfig.
|
|
584
|
+
if (this.canEnable(tableConfig) && tableConfig.paginationCfg) {
|
|
585
|
+
return new PaginationProvider(tableConfig.paginationCfg);
|
|
577
586
|
}
|
|
578
587
|
return new PaginationProviderDummy();
|
|
579
588
|
}
|
|
@@ -594,10 +603,10 @@ class TableRow {
|
|
|
594
603
|
|
|
595
604
|
class TableRowsFactory {
|
|
596
605
|
/**
|
|
597
|
-
*
|
|
598
|
-
* @param data
|
|
599
|
-
* @param config
|
|
600
|
-
* @returns
|
|
606
|
+
* Преобразует массив объектов данных в массив объектов TableRow.
|
|
607
|
+
* @param data Массив объектов данных для преобразования.
|
|
608
|
+
* @param config Настройки конфигурации для каждой колонки.
|
|
609
|
+
* @returns Массив объектов TableRow.
|
|
601
610
|
*/
|
|
602
611
|
static convert(data, config) {
|
|
603
612
|
return data.map((obj, index) => this.createTableRow(index, obj, config));
|
|
@@ -611,9 +620,9 @@ class TableRowsFactory {
|
|
|
611
620
|
|
|
612
621
|
class MatTableDataSourceFactory {
|
|
613
622
|
/**
|
|
614
|
-
*
|
|
615
|
-
* @param data
|
|
616
|
-
* @param config
|
|
623
|
+
* Преобразует массив объектов данных в MatTableDataSource.
|
|
624
|
+
* @param data Массив объектов данных для преобразования.
|
|
625
|
+
* @param config Настройки конфигурации для каждой колонки.
|
|
617
626
|
* @returns MatTableDataSource.
|
|
618
627
|
*/
|
|
619
628
|
static convert(data, config) {
|
|
@@ -693,7 +702,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
693
702
|
class HeaderButtonProvider extends AbstractProvider {
|
|
694
703
|
constructor(cfg) {
|
|
695
704
|
super();
|
|
696
|
-
this.isEnabled = cfg
|
|
705
|
+
this.isEnabled = isFeatureEnabled(cfg);
|
|
697
706
|
this.icon = cfg?.icon ?? 'more_vert';
|
|
698
707
|
this.color = cfg?.color ?? 'black';
|
|
699
708
|
this.background = cfg?.background ?? 'white';
|
|
@@ -707,7 +716,7 @@ class HeaderButtonProviderDummy extends HeaderButtonProvider {
|
|
|
707
716
|
|
|
708
717
|
class CanDropManager {
|
|
709
718
|
constructor(mappings) {
|
|
710
|
-
|
|
719
|
+
//можно сбросить [ключ из таблицы-источника, значение - имя таблицы-цели]
|
|
711
720
|
this.canDropStorage = new Map();
|
|
712
721
|
this.fillStorage(mappings);
|
|
713
722
|
}
|
|
@@ -803,13 +812,13 @@ class DragDropMappingManager {
|
|
|
803
812
|
}
|
|
804
813
|
|
|
805
814
|
/**
|
|
806
|
-
*
|
|
807
|
-
*
|
|
815
|
+
* Управляет процессом drag & drop, включая события начала, сброса и завершения.
|
|
816
|
+
* Обрабатывает превью перетаскивания, проверку возможности сброса и обновление набора данных после успешного сброса.
|
|
808
817
|
*/
|
|
809
818
|
class AurDragDropManager {
|
|
810
819
|
/**
|
|
811
|
-
*
|
|
812
|
-
* @returns {AurDragDropManager} -
|
|
820
|
+
* Создаёт пустой экземпляр AurDragDropManager.
|
|
821
|
+
* @returns {AurDragDropManager} - Пустой менеджер без инициализированных ссылок.
|
|
813
822
|
*/
|
|
814
823
|
static empty() {
|
|
815
824
|
return new AurDragDropManager(undefined, [], []);
|
|
@@ -822,27 +831,27 @@ class AurDragDropManager {
|
|
|
822
831
|
this.mappingManager = new DragDropMappingManager(mappings);
|
|
823
832
|
}
|
|
824
833
|
/**
|
|
825
|
-
*
|
|
826
|
-
* @returns {string[]} -
|
|
834
|
+
* Возвращает список всех доступных имён источников перетаскивания.
|
|
835
|
+
* @returns {string[]} - Массив имён источников.
|
|
827
836
|
*/
|
|
828
837
|
get draggableSourceNames() {
|
|
829
838
|
return this.mappings?.map(mapping => mapping.sourceName) || [];
|
|
830
839
|
}
|
|
831
840
|
/**
|
|
832
|
-
*
|
|
833
|
-
* @param {string} sourceName -
|
|
834
|
-
* @param {unknown[]} draggedData -
|
|
835
|
-
* @param {DragEvent} event -
|
|
836
|
-
* @throws Error
|
|
841
|
+
* Инициирует операцию перетаскивания, сохраняя контекст и показывая превью перетаскивания.
|
|
842
|
+
* @param {string} sourceName - Имя источника перетаскивания.
|
|
843
|
+
* @param {unknown[]} draggedData - Перетаскиваемые данные.
|
|
844
|
+
* @param {DragEvent} event - Событие перетаскивания.
|
|
845
|
+
* @throws Error если перетаскивание уже выполняется.
|
|
837
846
|
*/
|
|
838
847
|
startDrag(sourceName, draggedData, event) {
|
|
839
848
|
this.startDragEvent = { sourceName, draggedData };
|
|
840
849
|
this.previewManager.showPreview(sourceName, event, draggedData);
|
|
841
850
|
}
|
|
842
851
|
/**
|
|
843
|
-
*
|
|
844
|
-
* @param {string} targetName -
|
|
845
|
-
* @param {DragEvent} event -
|
|
852
|
+
* Проверяет, разрешён ли сброс на целевой элемент, вызывая preventDefault.
|
|
853
|
+
* @param {string} targetName - Имя целевого элемента.
|
|
854
|
+
* @param {DragEvent} event - Событие перетаскивания.
|
|
846
855
|
*/
|
|
847
856
|
canDropPreventDefault(targetName, event) {
|
|
848
857
|
if (!this.startDragEvent) {
|
|
@@ -852,15 +861,15 @@ class AurDragDropManager {
|
|
|
852
861
|
this.canDropManager.dropPreventDefault(this.startDragEvent.sourceName, targetName, event);
|
|
853
862
|
}
|
|
854
863
|
/**
|
|
855
|
-
*
|
|
856
|
-
* @param {string} targetName -
|
|
857
|
-
* @param {any} targetData -
|
|
864
|
+
* Выполняет операцию сброса на указанную цель.
|
|
865
|
+
* @param {string} targetName - Имя целевого элемента.
|
|
866
|
+
* @param {any} targetData - Данные для целевого элемента.
|
|
858
867
|
*/
|
|
859
868
|
drop(targetName, targetData) {
|
|
860
869
|
this.dropEvent = { targetName, targetData };
|
|
861
870
|
}
|
|
862
871
|
/**
|
|
863
|
-
*
|
|
872
|
+
* Завершает операцию перетаскивания и обновляет набор данных, если сброс был успешным.
|
|
864
873
|
*/
|
|
865
874
|
endDrag() {
|
|
866
875
|
this.previewManager.removePreview();
|
|
@@ -891,7 +900,7 @@ class DragDropProvider extends AbstractProvider {
|
|
|
891
900
|
static { this.DEFAULT_ICON_VIEW = {
|
|
892
901
|
name: 'drag_handle'
|
|
893
902
|
}; }
|
|
894
|
-
constructor(viewContainerRef, tableName,
|
|
903
|
+
constructor(viewContainerRef, tableName, dragDropCfg) {
|
|
895
904
|
super();
|
|
896
905
|
this.viewContainerRef = viewContainerRef;
|
|
897
906
|
this.tableName = tableName;
|
|
@@ -901,11 +910,11 @@ class DragDropProvider extends AbstractProvider {
|
|
|
901
910
|
this.dragIconView = DragDropProvider.DEFAULT_ICON_VIEW;
|
|
902
911
|
this.multiple = false;
|
|
903
912
|
// здесь заполнить конфиг значениями по умолчанию если такие появятся
|
|
904
|
-
this.manager =
|
|
905
|
-
this.multiple =
|
|
913
|
+
this.manager = dragDropCfg?.manager ?? AurDragDropManager.empty();
|
|
914
|
+
this.multiple = dragDropCfg?.multiple ?? false;
|
|
906
915
|
this.draggable = (new Set(this.manager.draggableSourceNames)).has(tableName);
|
|
907
|
-
this.dragIconView =
|
|
908
|
-
this.size =
|
|
916
|
+
this.dragIconView = dragDropCfg?.dragIcon ?? DragDropProvider.DEFAULT_ICON_VIEW;
|
|
917
|
+
this.size = dragDropCfg?.size;
|
|
909
918
|
}
|
|
910
919
|
addColumn(columns) {
|
|
911
920
|
if (this.notHasKey(this.COLUMN_NAME, columns) && this.draggable) {
|
|
@@ -914,20 +923,20 @@ class DragDropProvider extends AbstractProvider {
|
|
|
914
923
|
return this;
|
|
915
924
|
}
|
|
916
925
|
/**
|
|
917
|
-
*
|
|
918
|
-
*
|
|
919
|
-
* @param tableConfig
|
|
920
|
-
* @returns
|
|
926
|
+
* Фабричный метод для создания экземпляра IndexProvider на основе настройки таблицы.
|
|
927
|
+
* Возвращает заглушку-провайдер, если индекс не включён в настройке.
|
|
928
|
+
* @param tableConfig Настройка таблицы.
|
|
929
|
+
* @returns Экземпляр IndexProvider или IndexProviderDummy.
|
|
921
930
|
*/
|
|
922
931
|
static create(viewContainerRef, tableConfig) {
|
|
923
932
|
if (DragDropProvider.canCreate(tableConfig)) {
|
|
924
933
|
// @ts-ignore
|
|
925
|
-
return new DragDropProvider(viewContainerRef, tableConfig.name ?? 'unknown-table', tableConfig.
|
|
934
|
+
return new DragDropProvider(viewContainerRef, tableConfig.name ?? 'unknown-table', tableConfig.dragDropCfg);
|
|
926
935
|
}
|
|
927
936
|
return new DragProviderDummy();
|
|
928
937
|
}
|
|
929
938
|
static canCreate(tableConfig) {
|
|
930
|
-
return tableConfig?.
|
|
939
|
+
return isFeatureEnabled(tableConfig?.dragDropCfg);
|
|
931
940
|
}
|
|
932
941
|
}
|
|
933
942
|
class DragProviderDummy extends DragDropProvider {
|
|
@@ -937,7 +946,7 @@ class DragProviderDummy extends DragDropProvider {
|
|
|
937
946
|
this.isEnabled = false;
|
|
938
947
|
}
|
|
939
948
|
addColumn(columns) {
|
|
940
|
-
//
|
|
949
|
+
// Операция не выполняется, так как индекс не включён.
|
|
941
950
|
return this;
|
|
942
951
|
}
|
|
943
952
|
}
|
|
@@ -974,7 +983,7 @@ class TimelineProvider extends AbstractProvider {
|
|
|
974
983
|
return new TimelineProviderDummy();
|
|
975
984
|
}
|
|
976
985
|
static canCreate(tableConfig) {
|
|
977
|
-
return tableConfig.timelineCfg
|
|
986
|
+
return isFeatureEnabled(tableConfig.timelineCfg);
|
|
978
987
|
}
|
|
979
988
|
}
|
|
980
989
|
class TimelineProviderDummy extends TimelineProvider {
|
|
@@ -1063,11 +1072,11 @@ class ServerPageController {
|
|
|
1063
1072
|
|
|
1064
1073
|
class IconViewComponent {
|
|
1065
1074
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: IconViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1066
|
-
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?.wrapper}\"\n [style.background-color]=\"view?.wrapper?.color\">\n <mat-icon *ngIf=\"view && view?.
|
|
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?.wrapper}\"\n [style.background-color]=\"view?.wrapper?.color\">\n <mat-icon *ngIf=\"view && view?.visible !== false\"\n [matTooltip]=\"view?.tooltip?.toString() || ''\"\n [style.color]=\"view?.color\">\n {{ view?.name }}\n </mat-icon>\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"] }] }); }
|
|
1067
1076
|
}
|
|
1068
1077
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: IconViewComponent, decorators: [{
|
|
1069
1078
|
type: Component,
|
|
1070
|
-
args: [{ selector: 'lib-icon-view', standalone: false, template: "<div [ngClass]=\"{'circle': view?.wrapper}\"\n [style.background-color]=\"view?.wrapper?.color\">\n <mat-icon *ngIf=\"view && view?.
|
|
1079
|
+
args: [{ selector: 'lib-icon-view', standalone: false, template: "<div [ngClass]=\"{'circle': view?.wrapper}\"\n [style.background-color]=\"view?.wrapper?.color\">\n <mat-icon *ngIf=\"view && view?.visible !== false\"\n [matTooltip]=\"view?.tooltip?.toString() || ''\"\n [style.color]=\"view?.color\">\n {{ view?.name }}\n </mat-icon>\n</div>\n" }]
|
|
1071
1080
|
}], propDecorators: { view: [{
|
|
1072
1081
|
type: Input
|
|
1073
1082
|
}] } });
|
|
@@ -1139,28 +1148,28 @@ class NgxAurMatTableComponent {
|
|
|
1139
1148
|
this.isTableBodyHide = false;
|
|
1140
1149
|
this.sort = new EventEmitter();
|
|
1141
1150
|
this.pageChange = new EventEmitter();
|
|
1142
|
-
//
|
|
1143
|
-
this.
|
|
1151
|
+
// события, если действия включены
|
|
1152
|
+
this.rowAction = new EventEmitter();
|
|
1144
1153
|
// -----------------------
|
|
1145
|
-
//
|
|
1146
|
-
this.
|
|
1147
|
-
this.
|
|
1148
|
-
this.
|
|
1149
|
-
this.
|
|
1154
|
+
// события, если включено событие выделения
|
|
1155
|
+
this.selectChange = new EventEmitter();
|
|
1156
|
+
this.selectAdded = new EventEmitter();
|
|
1157
|
+
this.selectRemoved = new EventEmitter();
|
|
1158
|
+
this.selectedRowsAction = new EventEmitter();
|
|
1150
1159
|
this.selectionModel = new EventEmitter();
|
|
1151
1160
|
//------------------------
|
|
1152
|
-
this.
|
|
1161
|
+
this.rowClick = new EventEmitter();
|
|
1153
1162
|
this.loadingChange = new EventEmitter();
|
|
1154
1163
|
this.pageError = new EventEmitter();
|
|
1155
1164
|
/**
|
|
1156
|
-
*
|
|
1165
|
+
* возвращает отфильтрованные строки
|
|
1157
1166
|
*/
|
|
1158
|
-
this.
|
|
1159
|
-
/** @deprecated
|
|
1167
|
+
this.filterChange = new EventEmitter();
|
|
1168
|
+
/** @deprecated используйте extraHeaderCellTopTemplate или extraHeaderCellBottomTemplate */
|
|
1160
1169
|
this.columnOffsets = new EventEmitter();
|
|
1161
1170
|
this.prevColumnOffsets = [];
|
|
1162
1171
|
this.headerButtonProvider = new HeaderButtonProviderDummy();
|
|
1163
|
-
this.
|
|
1172
|
+
this.headerButton = new EventEmitter();
|
|
1164
1173
|
// @ts-ignore
|
|
1165
1174
|
this.resizeColumnOffsetsObserver = EmptyValue.RESIZE_OBSERVER;
|
|
1166
1175
|
this.dragDropProvider = new DragProviderDummy();
|
|
@@ -1173,6 +1182,8 @@ class NgxAurMatTableComponent {
|
|
|
1173
1182
|
this.indexProvider = new IndexProviderDummy();
|
|
1174
1183
|
this.paginationProvider = new PaginationProviderDummy();
|
|
1175
1184
|
this.totalRowProvider = new TotalRowProviderDummy();
|
|
1185
|
+
// Состояние наведения. Сравнивает идентичность объекта TableRow (тот же экземпляр, по которому итерирует шаблон),
|
|
1186
|
+
// в отличие от `highlighted`, который сравнивает row.rowSrc (внешнее @Input-значение, а не TableRow).
|
|
1176
1187
|
this.hovered = null;
|
|
1177
1188
|
this.customSortFunctions = new Map();
|
|
1178
1189
|
this.filterStorage = new Map();
|
|
@@ -1188,9 +1199,9 @@ class NgxAurMatTableComponent {
|
|
|
1188
1199
|
if (changes['externalPaginator']) {
|
|
1189
1200
|
if (this.externalPaginator) {
|
|
1190
1201
|
if (this.isServerMode()) {
|
|
1191
|
-
//
|
|
1192
|
-
//
|
|
1193
|
-
// ngAfterViewInit
|
|
1202
|
+
// Серверный режим: НЕ привязываем dataSource.paginator (он порезал бы загруженную страницу).
|
|
1203
|
+
// (Пере)подключаем только после того, как контроллер создан; первое изменение, пришедшее до
|
|
1204
|
+
// ngAfterViewInit, обрабатывается в startServerController().
|
|
1194
1205
|
if (this.serverPageController) {
|
|
1195
1206
|
this.subscribeExternalPaginator();
|
|
1196
1207
|
if (this.paginatorState) {
|
|
@@ -1199,16 +1210,16 @@ class NgxAurMatTableComponent {
|
|
|
1199
1210
|
}
|
|
1200
1211
|
}
|
|
1201
1212
|
else if (!changes['externalPaginator'].firstChange) {
|
|
1202
|
-
//
|
|
1203
|
-
//
|
|
1213
|
+
// Клиентский режим: привязываем внешний пагинатор, чтобы MatTableDataSource резал данные через него.
|
|
1214
|
+
// Защищаемся от firstChange, чтобы не вызвать initPaginator() до ngAfterViewInit.
|
|
1204
1215
|
this.initPaginator();
|
|
1205
1216
|
}
|
|
1206
1217
|
}
|
|
1207
1218
|
else {
|
|
1208
|
-
//
|
|
1219
|
+
// Внешний пагинатор удалён: отписываемся от его событий страницы, чтобы избежать утечки.
|
|
1209
1220
|
this.externalPaginatorSub?.unsubscribe();
|
|
1210
1221
|
this.externalPaginatorSub = undefined;
|
|
1211
|
-
//
|
|
1222
|
+
// Клиентский режим откатывается к (теперь отрисованному) встроенному пагинатору.
|
|
1212
1223
|
if (!this.isServerMode() && !changes['externalPaginator'].firstChange) {
|
|
1213
1224
|
this.initPaginator();
|
|
1214
1225
|
}
|
|
@@ -1250,10 +1261,10 @@ class NgxAurMatTableComponent {
|
|
|
1250
1261
|
this.paginatorState = PaginatorState.empty();
|
|
1251
1262
|
}
|
|
1252
1263
|
}
|
|
1253
|
-
//
|
|
1264
|
+
// нам это нужно, чтобы пагинация работала с *ngIf
|
|
1254
1265
|
ngAfterViewInit() {
|
|
1255
|
-
//
|
|
1256
|
-
//
|
|
1266
|
+
// Должно оставаться безусловным — также покрывает случай первого изменения externalPaginator
|
|
1267
|
+
// для клиентского режима (ngOnChanges откладывает initPaginator() при firstChange).
|
|
1257
1268
|
this.initPaginator();
|
|
1258
1269
|
this.initSortingDataAccessor();
|
|
1259
1270
|
this.resizeColumnOffsetsObserver = new ResizeObserver(() => this.updateColumnOffsets());
|
|
@@ -1264,9 +1275,9 @@ class NgxAurMatTableComponent {
|
|
|
1264
1275
|
}
|
|
1265
1276
|
initPaginator() {
|
|
1266
1277
|
if (this.tableDataSource) {
|
|
1267
|
-
//
|
|
1268
|
-
//
|
|
1269
|
-
//
|
|
1278
|
+
// В серверном режиме НЕ привязываем пагинатор к источнику данных — MatTableDataSource
|
|
1279
|
+
// вызвал бы _updatePaginator(filteredDataLength) и перезаписал бы переданную сервером длину.
|
|
1280
|
+
// Вместо этого пагинацией управляет ServerPageController.
|
|
1270
1281
|
if (this.isServerMode()) {
|
|
1271
1282
|
this.tableDataSource.paginator = null;
|
|
1272
1283
|
}
|
|
@@ -1305,7 +1316,7 @@ class NgxAurMatTableComponent {
|
|
|
1305
1316
|
this.initCustomSortFunctionsMap();
|
|
1306
1317
|
this.removeWrongKeysFromDisplayColumns();
|
|
1307
1318
|
if (!this.paginatorState) {
|
|
1308
|
-
//
|
|
1319
|
+
// Если пагинатор не серверный, то я инициализирую его здесь, иначе при обновлении данных пагинатор ломается и отображаются все элементы
|
|
1309
1320
|
this.initPaginator();
|
|
1310
1321
|
}
|
|
1311
1322
|
this.initSortingDataAccessor();
|
|
@@ -1316,7 +1327,7 @@ class NgxAurMatTableComponent {
|
|
|
1316
1327
|
.setView(this.tableDataSource.data);
|
|
1317
1328
|
this.selectionProvider = SelectionProvider.create(this.tableConfig, this.tableDataSource, initSelection)
|
|
1318
1329
|
.addCheckboxColumn(this._displayColumns)
|
|
1319
|
-
.bindEventEmitters(this.
|
|
1330
|
+
.bindEventEmitters(this.selectChange, this.selectAdded, this.selectRemoved, this.selectionModel);
|
|
1320
1331
|
this.paginationProvider = PaginationProvider.create(this.tableConfig);
|
|
1321
1332
|
this.totalRowProvider = TotalRowProvider.create(this.tableConfig, this.tableDataSource)
|
|
1322
1333
|
.setTotalRow();
|
|
@@ -1325,7 +1336,7 @@ class NgxAurMatTableComponent {
|
|
|
1325
1336
|
const _sc = this.tableConfig.totalRowCfg?.styleCfg;
|
|
1326
1337
|
this._totalStyle = this.toCss(this.resolveTotal(_sc?.style, _totals, _data) ?? null);
|
|
1327
1338
|
this._totalClass = this.resolveTotal(_sc?.class, _totals, _data) ?? null;
|
|
1328
|
-
this.headerButtonProvider = new HeaderButtonProvider(this.tableConfig.
|
|
1339
|
+
this.headerButtonProvider = new HeaderButtonProvider(this.tableConfig.headerButtonCfg);
|
|
1329
1340
|
this.dragDropProvider = DragDropProvider.create(this.viewContainerRef, this.tableConfig)
|
|
1330
1341
|
.addColumn(this._displayColumns);
|
|
1331
1342
|
// Timeline ПОСЛЕДНИМ — unshift гарантирует позицию 0 после всех остальных провайдеров
|
|
@@ -1341,7 +1352,7 @@ class NgxAurMatTableComponent {
|
|
|
1341
1352
|
}
|
|
1342
1353
|
initCustomSortFunctionsMap() {
|
|
1343
1354
|
this.tableConfig.columnsCfg
|
|
1344
|
-
.filter(c => c.sort && c.sort
|
|
1355
|
+
.filter(c => c.sort != null && isFeatureEnabled(c.sort) && c.sort.customSort)
|
|
1345
1356
|
.forEach(c => this.customSortFunctions.set(c.key, c.sort.customSort));
|
|
1346
1357
|
}
|
|
1347
1358
|
initTable() {
|
|
@@ -1393,7 +1404,7 @@ class NgxAurMatTableComponent {
|
|
|
1393
1404
|
this.emitFilteredValues();
|
|
1394
1405
|
}
|
|
1395
1406
|
emitFilteredValues() {
|
|
1396
|
-
this.
|
|
1407
|
+
this.filterChange.emit(this.tableDataSource.filteredData.map(f => f.rowSrc));
|
|
1397
1408
|
this.updateTimelineBounds();
|
|
1398
1409
|
}
|
|
1399
1410
|
sortTable(sortParameters) {
|
|
@@ -1414,6 +1425,7 @@ class NgxAurMatTableComponent {
|
|
|
1414
1425
|
if (this.isServerMode() && this.serverPageController) {
|
|
1415
1426
|
this.serverPageController.onPage({ pageIndex: event.pageIndex, pageSize: event.pageSize });
|
|
1416
1427
|
}
|
|
1428
|
+
this.cdr.markForCheck();
|
|
1417
1429
|
}
|
|
1418
1430
|
updateTimelineBounds() {
|
|
1419
1431
|
if (!this.timelineProvider.isEnabled)
|
|
@@ -1458,23 +1470,23 @@ class NgxAurMatTableComponent {
|
|
|
1458
1470
|
return data;
|
|
1459
1471
|
}
|
|
1460
1472
|
emitSelectedRowsAction(action, rows) {
|
|
1461
|
-
this.
|
|
1473
|
+
this.selectedRowsAction.emit({ action, value: rows });
|
|
1462
1474
|
}
|
|
1463
1475
|
emitRowAction(action, row, $event) {
|
|
1464
1476
|
$event.stopPropagation();
|
|
1465
|
-
this.
|
|
1477
|
+
this.rowAction.emit({ action, value: row });
|
|
1466
1478
|
}
|
|
1467
1479
|
/**
|
|
1468
|
-
*
|
|
1480
|
+
* Отправляет действие, инициированное элементом mat-menu.
|
|
1469
1481
|
*
|
|
1470
|
-
*
|
|
1471
|
-
* mat-menu
|
|
1472
|
-
* ((click)="closed.emit('click')"),
|
|
1473
|
-
*
|
|
1474
|
-
*
|
|
1482
|
+
* В отличие от {@link emitRowAction}, здесь НЕ нужно вызывать $event.stopPropagation():
|
|
1483
|
+
* mat-menu закрывается, когда клик всплывает до его панели
|
|
1484
|
+
* ((click)="closed.emit('click')"), поэтому остановка всплытия оставила бы
|
|
1485
|
+
* меню открытым. Меню рендерится в overlay вне строки, так что здесь нет
|
|
1486
|
+
* клика по строке, который нужно подавлять.
|
|
1475
1487
|
*/
|
|
1476
1488
|
emitMenuAction(action, row) {
|
|
1477
|
-
this.
|
|
1489
|
+
this.rowAction.emit({ action, value: row });
|
|
1478
1490
|
}
|
|
1479
1491
|
masterToggle() {
|
|
1480
1492
|
this.selectionProvider.masterToggle();
|
|
@@ -1485,13 +1497,13 @@ class NgxAurMatTableComponent {
|
|
|
1485
1497
|
castSrc(row) {
|
|
1486
1498
|
return row;
|
|
1487
1499
|
}
|
|
1488
|
-
/** StyleBuilder.Row | string | null -> CSS
|
|
1500
|
+
/** StyleBuilder.Row | string | null -> CSS-строка | null. */
|
|
1489
1501
|
toCss(s) {
|
|
1490
1502
|
if (s == null)
|
|
1491
1503
|
return null;
|
|
1492
1504
|
return typeof s === 'string' ? s : s.build();
|
|
1493
1505
|
}
|
|
1494
|
-
/** base
|
|
1506
|
+
/** `base` с `overlay` поверх. Builder-ы -> переопределение полей; любая строка -> конкатенация (в CSS побеждает последнее). */
|
|
1495
1507
|
mergeStyle(base, overlay) {
|
|
1496
1508
|
if (base == null)
|
|
1497
1509
|
return this.toCss(overlay);
|
|
@@ -1502,10 +1514,48 @@ class NgxAurMatTableComponent {
|
|
|
1502
1514
|
}
|
|
1503
1515
|
return `${this.toCss(base) ?? ''} ${this.toCss(overlay) ?? ''}`.trim();
|
|
1504
1516
|
}
|
|
1505
|
-
/**
|
|
1517
|
+
/** хук итога: статическое значение или (totals, data) => значение. */
|
|
1506
1518
|
resolveTotal(v, totals, data) {
|
|
1507
1519
|
return typeof v === 'function' ? v(totals, data) : v;
|
|
1508
1520
|
}
|
|
1521
|
+
/** Хелпер для шаблона: функция активна, когда её конфигурация присутствует, если только не задано `enable: false`. */
|
|
1522
|
+
isFeatureEnabled(cfg) {
|
|
1523
|
+
return isFeatureEnabled(cfg);
|
|
1524
|
+
}
|
|
1525
|
+
/**
|
|
1526
|
+
* Видна ли строка итогов на текущей странице.
|
|
1527
|
+
* По умолчанию итоги показываются только на последней странице пагинации;
|
|
1528
|
+
* `totalRowCfg.showOnEveryPage: true` возвращает показ на каждой странице.
|
|
1529
|
+
* Когда пагинация выключена — итоги показываются всегда.
|
|
1530
|
+
*/
|
|
1531
|
+
isTotalRowVisible() {
|
|
1532
|
+
if (this.tableConfig.totalRowCfg?.showOnEveryPage)
|
|
1533
|
+
return true;
|
|
1534
|
+
if (!this.paginationProvider.isEnabled)
|
|
1535
|
+
return true;
|
|
1536
|
+
const { pageIndex, lastPageIndex } = this.currentPaging();
|
|
1537
|
+
return pageIndex >= lastPageIndex;
|
|
1538
|
+
}
|
|
1539
|
+
/**
|
|
1540
|
+
* Текущий индекс страницы и индекс последней страницы.
|
|
1541
|
+
* Серверный режим читает их из paginatorState (как getTimelineVisibleData),
|
|
1542
|
+
* клиентский — из активного пагинатора и числа отфильтрованных строк.
|
|
1543
|
+
*/
|
|
1544
|
+
currentPaging() {
|
|
1545
|
+
let total, pageIndex, pageSize;
|
|
1546
|
+
if (this.paginatorState) {
|
|
1547
|
+
total = this.paginatorState.length;
|
|
1548
|
+
pageIndex = this.paginatorState.pageIndex;
|
|
1549
|
+
pageSize = this.activePaginator?.pageSize ?? this.paginationProvider.size;
|
|
1550
|
+
}
|
|
1551
|
+
else {
|
|
1552
|
+
total = this.tableDataSource.filteredData.length;
|
|
1553
|
+
pageIndex = this.activePaginator?.pageIndex ?? 0;
|
|
1554
|
+
pageSize = this.activePaginator?.pageSize ?? this.paginationProvider.size;
|
|
1555
|
+
}
|
|
1556
|
+
const lastPageIndex = pageSize > 0 ? Math.max(0, Math.ceil(total / pageSize) - 1) : 0;
|
|
1557
|
+
return { pageIndex, lastPageIndex };
|
|
1558
|
+
}
|
|
1509
1559
|
hoverActive(row) {
|
|
1510
1560
|
const h = this.tableConfig.bodyRowCfg?.hoverCfg;
|
|
1511
1561
|
return this.hovered === row && h?.enable !== false;
|
|
@@ -1513,7 +1563,7 @@ class NgxAurMatTableComponent {
|
|
|
1513
1563
|
onRowEnter(row) { this.hovered = row; }
|
|
1514
1564
|
onRowLeave(row) { if (this.hovered === row)
|
|
1515
1565
|
this.hovered = null; }
|
|
1516
|
-
/** [style]
|
|
1566
|
+
/** [style] для <tr> тела: base -> overlay наведения -> overlay подсветки (побеждает подсветка). */
|
|
1517
1567
|
rowStyle(row) {
|
|
1518
1568
|
let acc = this.rowStyles[row.id]?.style ?? null;
|
|
1519
1569
|
if (this.hoverActive(row)) {
|
|
@@ -1540,13 +1590,13 @@ class NgxAurMatTableComponent {
|
|
|
1540
1590
|
cls[hcls] = true;
|
|
1541
1591
|
return cls;
|
|
1542
1592
|
}
|
|
1543
|
-
|
|
1593
|
+
handleRowClick(row) {
|
|
1544
1594
|
if (row.rowSrc !== this.highlighted || (row.rowSrc === this.highlighted && !this.tableConfig.bodyRowCfg?.clickCfg?.cancelable)) {
|
|
1545
|
-
this.
|
|
1595
|
+
this.rowClick.emit(row.rowSrc);
|
|
1546
1596
|
this.highlighted = row.rowSrc;
|
|
1547
1597
|
}
|
|
1548
1598
|
else {
|
|
1549
|
-
this.
|
|
1599
|
+
this.rowClick.emit(undefined);
|
|
1550
1600
|
this.highlighted = undefined;
|
|
1551
1601
|
}
|
|
1552
1602
|
}
|
|
@@ -1557,7 +1607,7 @@ class NgxAurMatTableComponent {
|
|
|
1557
1607
|
return !!this.pageSource;
|
|
1558
1608
|
}
|
|
1559
1609
|
isServerWiring() {
|
|
1560
|
-
return !!this.pageSource || this.tableConfig?.
|
|
1610
|
+
return !!this.pageSource || this.tableConfig?.paginationCfg?.mode === 'server';
|
|
1561
1611
|
}
|
|
1562
1612
|
startServerController() {
|
|
1563
1613
|
if (!this.pageSource) {
|
|
@@ -1580,8 +1630,8 @@ class NgxAurMatTableComponent {
|
|
|
1580
1630
|
this.subscribeExternalPaginator();
|
|
1581
1631
|
const initialSort = this.matSort?.active ? { active: this.matSort.active, direction: this.matSort.direction } : undefined;
|
|
1582
1632
|
this.serverPageController.start({
|
|
1583
|
-
//
|
|
1584
|
-
pageSize: this.tableConfig.
|
|
1633
|
+
// провайдер может быть ещё не инициализирован (в серверном режиме нет привязки tableData) — читаем из конфигурации
|
|
1634
|
+
pageSize: this.tableConfig.paginationCfg?.size ?? 20,
|
|
1585
1635
|
sort: initialSort,
|
|
1586
1636
|
});
|
|
1587
1637
|
}
|
|
@@ -1593,19 +1643,19 @@ class NgxAurMatTableComponent {
|
|
|
1593
1643
|
}
|
|
1594
1644
|
applyExternalPaginatorState(state) {
|
|
1595
1645
|
if (this.externalPaginator) {
|
|
1596
|
-
//
|
|
1646
|
+
// РИСК (подход C из спецификации): OnPush MatPaginator требует CD, чтобы отразить императивные изменения.
|
|
1597
1647
|
this.externalPaginator.length = state.length;
|
|
1598
1648
|
this.externalPaginator.pageIndex = state.pageIndex;
|
|
1599
1649
|
this.cdr.markForCheck();
|
|
1600
1650
|
}
|
|
1601
1651
|
}
|
|
1602
|
-
/**
|
|
1652
|
+
/** Повторно вызывает pageSource (серверный режим). resetPageIndex по умолчанию true (например, изменился внешний фильтр). */
|
|
1603
1653
|
reload(opts) {
|
|
1604
1654
|
if (this.isServerMode() && this.serverPageController) {
|
|
1605
1655
|
this.serverPageController.reload(opts);
|
|
1606
1656
|
}
|
|
1607
1657
|
else {
|
|
1608
|
-
//
|
|
1658
|
+
// Клиентский режим: повторно применяем текущие данные/фильтры.
|
|
1609
1659
|
this.refreshTable();
|
|
1610
1660
|
}
|
|
1611
1661
|
}
|
|
@@ -1634,7 +1684,7 @@ class NgxAurMatTableComponent {
|
|
|
1634
1684
|
this.dragDropProvider.manager.endDrag();
|
|
1635
1685
|
}
|
|
1636
1686
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: NgxAurMatTableComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1637
|
-
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", onRowAction: "onRowAction", selected: "selected", onSelect: "onSelect", onDeselect: "onDeselect", onSelectedRowsAction: "onSelectedRowsAction", selectionModel: "selectionModel", onRowClick: "onRowClick", loadingChange: "loadingChange", pageError: "pageError", onFilter: "onFilter", columnOffsets: "columnOffsets", onHeaderButton: "onHeaderButton" }, 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]=\"{'bottom-pagination': paginationProvider.isEnabled && !externalPaginator && paginationProvider.position === 'bottom'}\">\n <ng-container>\n <!-- Filter -->\n <ng-container *ngIf=\"tableConfig.filterCfg?.enable ?? false\">\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]=\"{'bottom-pagination': paginationProvider.isEnabled && !externalPaginator && paginationProvider.position === 'bottom'}\">\n <mat-icon *ngIf=\"headerButtonProvider.isEnabled\"\n class=\"table-settings-button\"\n [style.color]=\"headerButtonProvider.color\"\n [style.background-color]=\"headerButtonProvider.background\"\n (click)=\"onHeaderButton.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.tableView?.height\"\n [style.max-height]=\"tableConfig.tableView?.maxHeight\"\n [style.min-height]=\"tableConfig.tableView?.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.display !== 'none'\">\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.display !== 'none'\">\n <mat-menu #actionMenu=\"matMenu\">\n <ng-container *ngFor=\"let item of action.menu\">\n <button mat-menu-item\n *ngIf=\"item.display !== 'none'\"\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.display !== 'none'\">\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=\"columnConfig.sort && columnConfig.sort.enable; else notSortable\">\n <th mat-header-cell *matHeaderCellDef [mat-sort-header]=\"columnConfig.key\"\n [arrowPosition]=\"columnConfig.sort.position === 'right' ? '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)=\"rowClick(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?.pageableCfg?.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.bottom-pagination{height:100%}.aur-mat-table table{border-collapse:collapse}.aur-mat-table .table-container{position:relative}.aur-mat-table .table-container.bottom-pagination{flex-grow:1;overflow:auto}.aur-mat-table th,td{padding-right:4px!important;padding-left:4px!important}.aur-mat-table .new-color td.mat-mdc-cell,.aur-mat-table .new-color td.mat-mdc-footer-cell{color:inherit}.aur-mat-table mat-form-field{width:100%}.aur-mat-table .text-right{text-align:right!important}.aur-mat-table .pointer{cursor:pointer}.aur-mat-table .flex-container{display:flex;align-items:center}.aur-mat-table .expanded-row{height:0}.aur-mat-table .expanded-row .expanded-cell{padding-right:0!important;padding-left:0!important}.aur-mat-table .row-detail{overflow:hidden;display:flex}.aur-mat-table .clear-bottom-border{border-bottom:none}.aur-mat-table .table-settings-button{position:absolute;right:4px;top:12px;cursor:pointer;border-radius:4px;padding-bottom:2px;padding-top:2px;z-index:9999999999}.mat-mdc-header-row th:last-child{padding-right:25px!important}.aur-mat-table .search-container{display:flex;gap:8px;align-items:center}.aur-mat-table .extra-header-top-row th{border-bottom:none}.aur-mat-table .drag-icon{cursor:grab}.hide-table-body tr:not(.mat-mdc-header-row){display:none!important}.hidePaginator{display:none}.aur-mat-table .drag-column{padding-left:8px;padding-right:8px;width:35px}.aur-mat-table .aur-timeline-cell{width:40px;min-width:40px;max-width:40px;padding:0!important}.aur-mat-table .aur-timeline-marker-container{display:flex;flex-direction:column;align-items:center;height:100%;min-height:48px}.aur-mat-table .aur-timeline-line{flex:1;min-height:8px}.aur-mat-table .aur-timeline-marker-default{width:12px;height:12px;border-radius:50%;flex-shrink:0}.aur-mat-table .aur-timeline-continuation{border-left-style:solid;align-self:stretch;margin-left:20px;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i3$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i3$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i8.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: ColumnViewComponent, selector: "lib-column-view", inputs: ["config", "value"] }, { kind: "component", type: IconViewComponent, selector: "lib-icon-view", inputs: ["view"] }, { kind: "pipe", type: DataPropertyGetterPipe, name: "dataPropertyGetter" }], animations: [
|
|
1687
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: NgxAurMatTableComponent, isStandalone: false, selector: "aur-mat-table", inputs: { displayColumns: "displayColumns", extraHeaderCellTopTemplate: "extraHeaderCellTopTemplate", extraHeaderCellBottomTemplate: "extraHeaderCellBottomTemplate", tableConfig: "tableConfig", tableData: "tableData", extendedRowTemplate: "extendedRowTemplate", timelineMarkerTemplate: "timelineMarkerTemplate", paginatorState: "paginatorState", pageSource: "pageSource", externalPaginator: "externalPaginator", isTableBodyHide: "isTableBodyHide", highlight: "highlight" }, outputs: { sort: "sort", pageChange: "pageChange", rowAction: "rowAction", selectChange: "selectChange", selectAdded: "selectAdded", selectRemoved: "selectRemoved", selectedRowsAction: "selectedRowsAction", selectionModel: "selectionModel", rowClick: "rowClick", loadingChange: "loadingChange", pageError: "pageError", filterChange: "filterChange", columnOffsets: "columnOffsets", headerButton: "headerButton" }, queries: [{ propertyName: "subFooterRowTemplate", first: true, predicate: NgxTableSubFooterRowDirective, descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "rows", predicate: ["rowLink"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"aur-mat-table\"\n [ngClass]=\"{'sticky-pagination': paginationProvider.isEnabled && !externalPaginator && paginationProvider.position === 'sticky'}\">\n <ng-container>\n <!-- Filter -->\n <ng-container *ngIf=\"isFeatureEnabled(tableConfig.filterCfg)\">\n <div class=\"search-container\">\n <ng-container>\n <ng-content select=\"[ngxAurTableSearchPrefix]\"></ng-content>\n </ng-container>\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ tableConfig.filterCfg?.label }}</mat-label>\n <input matInput (keyup)=\"applySearchFilter($event)\"\n placeholder=\"{{tableConfig.filterCfg?.placeholder}}\"\n style=\"font-size: 18px;\">\n <mat-icon matPrefix>search</mat-icon>\n </mat-form-field>\n <ng-container>\n <ng-content select=\"[ngxAurTableSearchSuffix]\"></ng-content>\n </ng-container>\n </div>\n </ng-container>\n\n\n <div class=\"table-container\"\n [ngClass]=\"{'sticky-pagination': paginationProvider.isEnabled && !externalPaginator && paginationProvider.position === 'sticky'}\">\n <mat-icon *ngIf=\"headerButtonProvider.isEnabled\"\n class=\"table-settings-button\"\n [style.color]=\"headerButtonProvider.color\"\n [style.background-color]=\"headerButtonProvider.background\"\n (click)=\"headerButton.emit($event)\">\n {{ headerButtonProvider.icon }}\n </mat-icon>\n\n <!-- Table -->\n <table #table mat-table matSort\n [multiTemplateDataRows]=\"extendedRowTemplate !== null\"\n [dataSource]=\"tableDataSource\"\n (matSortChange)=\"sortTable($event)\"\n [style.height]=\"tableConfig.tableViewCfg?.height\"\n [style.max-height]=\"tableConfig.tableViewCfg?.maxHeight\"\n [style.min-height]=\"tableConfig.tableViewCfg?.minHeight\"\n [ngClass]=\"{'hide-table-body': isTableBodyHide}\">\n\n\n <!-- timeline-column-->\n <ng-container *ngIf=\"timelineProvider.isEnabled\" [matColumnDef]=\"timelineProvider.COLUMN_NAME\">\n <th mat-header-cell *matHeaderCellDef class=\"aur-timeline-cell\"\n [style.width]=\"timelineProvider.size?.width\"\n [style.min-width]=\"timelineProvider.size?.minWidth\"\n [style.max-width]=\"timelineProvider.size?.maxWidth\"></th>\n <td mat-cell *matCellDef=\"let element\" class=\"aur-timeline-cell\"\n [style.width]=\"timelineProvider.size?.width\"\n [style.min-width]=\"timelineProvider.size?.minWidth\"\n [style.max-width]=\"timelineProvider.size?.maxWidth\">\n <div class=\"aur-timeline-marker-container\">\n\n <div class=\"aur-timeline-line\"\n *ngIf=\"element.id !== _timelineFirstId\"\n [style.border-left-width.px]=\"timelineProvider.line.width\"\n [style.border-left-color]=\"_timelineGaps.get(element.id)?.topColor ?? timelineProvider.line.color\"\n [style.border-left-style]=\"_timelineGaps.get(element.id)?.topGap ? timelineProvider.line.gapStyle : timelineProvider.line.style\">\n </div>\n\n <ng-container *ngIf=\"timelineMarkerTemplate; else defaultMarker\">\n <ng-container *ngTemplateOutlet=\"timelineMarkerTemplate; context: {$implicit: element}\"></ng-container>\n </ng-container>\n <ng-template #defaultMarker>\n <div class=\"aur-timeline-marker-default\"\n [style.background-color]=\"timelineProvider.markerColor\">\n </div>\n </ng-template>\n\n <div class=\"aur-timeline-line\"\n *ngIf=\"element.id !== _timelineLastId\"\n [style.border-left-width.px]=\"timelineProvider.line.width\"\n [style.border-left-color]=\"_timelineGaps.get(element.id)?.bottomColor ?? timelineProvider.line.color\"\n [style.border-left-style]=\"_timelineGaps.get(element.id)?.bottomGap ? timelineProvider.line.gapStyle : timelineProvider.line.style\">\n </div>\n\n </div>\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"aur-timeline-cell\"\n [style.width]=\"timelineProvider.size?.width\"\n [style.min-width]=\"timelineProvider.size?.minWidth\"\n [style.max-width]=\"timelineProvider.size?.maxWidth\"></td>\n </ng-container>\n\n <!-- drag-column-->\n <ng-container *ngIf=\"dragDropProvider.isEnabled && dragDropProvider.draggable\" [matColumnDef]=\"dragDropProvider.COLUMN_NAME\">\n\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"dragDropProvider.size?.width\"\n [style.min-width]=\"dragDropProvider.size?.minWidth\"\n [style.max-width]=\"dragDropProvider.size?.maxWidth\">\n </th>\n\n <td mat-cell *matCellDef=\"let element;\" class=\"drag-column\"\n [style.width]=\"dragDropProvider.size?.width\"\n [style.min-width]=\"dragDropProvider.size?.minWidth\"\n [style.max-width]=\"dragDropProvider.size?.maxWidth\">\n <lib-icon-view draggable=\"true\"\n class=\"drag-icon\"\n [view]=\"dragDropProvider.dragIconView\"\n (dragstart)=\"onDragStart($event, element)\"\n (dragend)=\"onDragEnd($event, element)\">\n </lib-icon-view>\n\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"dragDropProvider.size?.width\"\n [style.min-width]=\"dragDropProvider.size?.minWidth\"\n [style.max-width]=\"dragDropProvider.size?.maxWidth\">\n </td>\n </ng-container>\n\n <!-- index-column-->\n <ng-container *ngIf=\"indexProvider.isEnabled\" [matColumnDef]=\"indexProvider.COLUMN_NAME\">\n\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"indexProvider.size?.width\"\n [style.min-width]=\"indexProvider.size?.minWidth\"\n [style.max-width]=\"indexProvider.size?.maxWidth\">\n <lib-column-view [config]=\"indexProvider.headerView\">\n {{ indexProvider.name }}\n </lib-column-view>\n </th>\n\n <td mat-cell *matCellDef=\"let element;\"\n [style.width]=\"indexProvider.size?.width\"\n [style.min-width]=\"indexProvider.size?.minWidth\"\n [style.max-width]=\"indexProvider.size?.maxWidth\">\n {{ element.id + indexProvider.offset }}\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"indexProvider.size?.width\"\n [style.min-width]=\"indexProvider.size?.minWidth\"\n [style.max-width]=\"indexProvider.size?.maxWidth\">\n {{ totalRowProvider.totals.get(indexProvider.COLUMN_NAME) ?? '' }}\n </td>\n </ng-container>\n\n <!-- selection-column-->\n <ng-container [matColumnDef]=\"selectionProvider.COLUMN_NAME\" *ngIf=\"selectionProvider.isEnabled\">\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"selectionProvider.size?.width\"\n [style.min-width]=\"selectionProvider.size?.minWidth\"\n [style.max-width]=\"selectionProvider.size?.maxWidth\">\n <div class=\"flex-container\">\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n [checked]=\"selectionProvider.selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selectionProvider.selection.hasValue() && !isAllSelected()\">\n </mat-checkbox>\n <div\n *ngIf=\"tableConfig.selectionCfg?.showSelectedCount && selectionProvider.selection.hasValue()\">\n {{ selectionProvider.selection.selected.length }}\n <span\n *ngIf=\"tableConfig.selectionCfg?.showTotalCount !== false\">/{{ paginatorState?.length ? paginatorState?.length : tableDataSource.filteredData.length }}</span>\n </div>\n\n <div *ngIf=\"selectionProvider.selection.hasValue() && tableConfig?.selectionCfg?.actions\">\n <ng-container *ngFor=\"let action of tableConfig.selectionCfg!.actions\">\n <button mat-icon-button\n (click)=\"emitSelectedRowsAction(action.action, selectionProvider.selection.selected)\"\n [matTooltip]=\"action.icon.tooltip || ''\"\n *ngIf=\"action.visible !== false\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n\n </th>\n <td mat-cell *matCellDef=\"let row\"\n (click)=\"$event.stopPropagation(); selectionProvider.selection.toggle(castSrc(row).rowSrc)\"\n [style.width]=\"selectionProvider.size?.width\"\n [style.min-width]=\"selectionProvider.size?.minWidth\"\n [style.max-width]=\"selectionProvider.size?.maxWidth\">\n <mat-checkbox (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selectionProvider.selection.toggle(castSrc(row).rowSrc) : null\"\n [checked]=\"selectionProvider.selection.isSelected(castSrc(row).rowSrc)\">\n </mat-checkbox>\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"selectionProvider.size?.width\"\n [style.min-width]=\"selectionProvider.size?.minWidth\"\n [style.max-width]=\"selectionProvider.size?.maxWidth\">\n </td>\n </ng-container>\n\n <!-- action column -->\n <ng-container *ngIf=\"rowActionsProvider.isEnabled\" [matColumnDef]=\"rowActionsProvider.COLUMN_NAME\">\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"rowActionsProvider.size?.width\"\n [style.min-width]=\"rowActionsProvider.size?.minWidth\"\n [style.max-width]=\"rowActionsProvider.size?.maxWidth\"></th>\n <td mat-cell *matCellDef=\"let element\" (click)=\"$event.stopPropagation()\" style=\"cursor: default\"\n [style.width]=\"rowActionsProvider.size?.width\"\n [style.min-width]=\"rowActionsProvider.size?.minWidth\"\n [style.max-width]=\"rowActionsProvider.size?.maxWidth\">\n <ng-container *ngFor=\"let action of rowActionsProvider.actionView.get(element.id)\">\n <!-- action with dropdown menu -->\n <ng-container *ngIf=\"action.menu; else directAction\">\n <ng-container *ngIf=\"action.visible !== false\">\n <mat-menu #actionMenu=\"matMenu\">\n <ng-container *ngFor=\"let item of action.menu\">\n <button mat-menu-item\n *ngIf=\"item.visible !== false\"\n [disabled]=\"item.disabled === true\"\n (click)=\"emitMenuAction(item.action, element.rowSrc)\">\n <mat-icon *ngIf=\"item.icon\" [style.color]=\"item.icon.color\">\n {{ item.icon.name }}\n </mat-icon>\n <span>{{ item.text }}</span>\n </button>\n </ng-container>\n </mat-menu>\n <button mat-icon-button\n [matMenuTriggerFor]=\"actionMenu\"\n [matTooltip]=\"action.icon.tooltip || ''\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n </ng-container>\n </ng-container>\n\n <!-- direct action (existing behavior) -->\n <ng-template #directAction>\n <button mat-icon-button\n (click)=\"emitRowAction(action.action, element.rowSrc, $event)\"\n [matTooltip]=\"action.icon.tooltip || ''\"\n *ngIf=\"action.visible !== false\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n </ng-template>\n </ng-container>\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"rowActionsProvider.size?.width\"\n [style.min-width]=\"rowActionsProvider.size?.minWidth\"\n [style.max-width]=\"rowActionsProvider.size?.maxWidth\">\n {{ totalRowProvider.totals.get(rowActionsProvider.COLUMN_NAME) ?? '' }}\n </td>\n </ng-container>\n\n <!-- value-icon-->\n <ng-container *ngFor=\"let columnConfig of tableConfig.columnsCfg\" [matColumnDef]=\"columnConfig.key\">\n\n <!-- if sortable column header -->\n <ng-container *ngIf=\"isFeatureEnabled(columnConfig.sort); else notSortable\">\n <th mat-header-cell *matHeaderCellDef [mat-sort-header]=\"columnConfig.key\"\n [arrowPosition]=\"columnConfig.sort?.position === 'start' ? 'before' : 'after'\"\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n <ng-container *ngTemplateOutlet=\"headerValue\"></ng-container>\n </th>\n </ng-container>\n\n <!-- else not sortable -->\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n <ng-container *ngTemplateOutlet=\"headerValue\"></ng-container>\n </th>\n </ng-template>\n\n <!-- header value-->\n <ng-template #headerValue>\n <lib-column-view [config]=\"columnConfig.headerView\"\n [value]=\"columnConfig.name\">\n </lib-column-view>\n </ng-template>\n\n <!-- column value \u043F\u043E\u043B\u0443\u0447\u0430\u0442\u044C \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u043A\u043E\u043B\u043E\u043D\u043E\u043A \u043D\u0443\u0436\u043D\u043E \u0447\u0435\u0440\u0435\u0437 getView(rowIndex, columnConfig.key) \u0442\u0430\u043C \u043D\u0430\u0445\u043E\u0434\u044F\u0442\u0441\u044F \u0443\u0436\u0435\n \u043F\u043E\u0434\u0433\u043E\u0442\u043E\u0432\u043B\u0435\u043D\u043D\u044B\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F \u0434\u043B\u044F \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F-->\n <td mat-cell *matCellDef=\"let element;\"\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n <lib-column-view\n [config]=\"tableView[element.id]?.get(columnConfig.key)\"\n [value]=\"element | dataPropertyGetter: columnConfig.key\">\n </lib-column-view>\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n {{ totalRowProvider.totals.get(columnConfig.key) ?? '' }}\n </td>\n\n </ng-container>\n\n <!-- extra header top cell-->\n <ng-container *ngFor=\"let extraTopCell of _displayExtraHeaderTopCell; let index = index\"\n [matColumnDef]=\"extraTopCell\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"extraHeaderCellTopTemplate; context: {key: extraTopCell.replace(EXTRA_HEADER_CELL_TOP_SUFFIX, ''), index: index}\"></ng-container>\n </th>\n </ng-container>\n\n\n <!-- extra header bottom cell-->\n <ng-container *ngFor=\"let extraBottomCell of _displayExtraHeaderBottomCell; let index = index\"\n [matColumnDef]=\"extraBottomCell\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"extraHeaderCellBottomTemplate; context: {key: extraBottomCell.replace(EXTRA_HEADER_CELL_BOTTOM_SUFFIX, ''), index: index}\"></ng-container>\n </th>\n </ng-container>\n\n <!-- extra header top row-->\n <ng-container *ngIf=\"extraHeaderCellTopTemplate\">\n <tr mat-header-row *matHeaderRowDef=\"_displayExtraHeaderTopCell; sticky: this.tableConfig.stickyCfg?.header\"\n class=\"extra-header-top-row\">\n </tr>\n </ng-container>\n\n <!-- header row-->\n <tr mat-header-row *matHeaderRowDef=\"_displayColumns; sticky: this.tableConfig.stickyCfg?.header\"\n [style]=\"_headerStyle\" [ngClass]=\"_headerClass\">\n </tr>\n\n <!-- extra header bottom row -->\n <ng-container *ngIf=\"extraHeaderCellBottomTemplate\">\n <tr mat-header-row\n *matHeaderRowDef=\"_displayExtraHeaderBottomCell; sticky: this.tableConfig.stickyCfg?.header\">\n </tr>\n </ng-container>\n\n <tr mat-row #rowLink\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop($event, row)\"\n *matRowDef=\"let row; columns: _displayColumns;\"\n (click)=\"handleRowClick(row)\"\n (mouseenter)=\"onRowEnter(row)\"\n (mouseleave)=\"onRowLeave(row)\"\n [ngClass]=\"rowNgClass(row)\"\n [style]=\"rowStyle(row)\">\n </tr>\n\n <!--expanded-row-->\n <ng-container matColumnDef=\"expandedRow\">\n <td mat-cell class=\"expanded-cell\" *matCellDef=\"let element\" [attr.colspan]=\"_displayColumns.length\"\n style=\"padding-right: 0!important;\">\n <div class=\"row-detail\"\n [@detailExpand]=\"element.rowSrc === highlighted ? expandedStateEnum.EXPANDED : expandedStateEnum.COLLAPSED\">\n <!-- timeline continuation -->\n <div *ngIf=\"timelineProvider.isEnabled\"\n class=\"aur-timeline-continuation\"\n [style.border-left-width.px]=\"timelineProvider.line.width\"\n [style.border-left-color]=\"_timelineGaps.get(element.id)?.bottomColor ?? timelineProvider.line.color\"\n [style.border-left-style]=\"_timelineGaps.get(element.id)?.bottomGap ? timelineProvider.line.gapStyle : timelineProvider.line.style\">\n </div>\n <!-- lazy-load of details -->\n <ng-container *ngIf=\"element.rowSrc === highlighted\">\n <ng-container *ngTemplateOutlet=\"extendedRowTemplate; context: {$implicit: element}\"></ng-container>\n </ng-container>\n </div>\n </td>\n </ng-container>\n\n <ng-container *ngIf=\"extendedRowTemplate\">\n <tr mat-row class=\"expanded-row\" *matRowDef=\"let row; columns: ['expandedRow']\"></tr>\n </ng-container>\n <!--expanded-row-->\n\n <ng-container *ngIf=\"totalRowProvider.isEnabled\">\n <tr mat-footer-row *matFooterRowDef=\"_displayColumns; sticky: this.tableConfig.stickyCfg?.total\"\n [style]=\"_totalStyle\" [ngClass]=\"_totalClass\"\n [style.display]=\"isTotalRowVisible() ? null : 'none'\"></tr>\n </ng-container>\n\n <!--sub-footer-row-->\n <ng-container matColumnDef=\"subFooterRow\">\n <td mat-footer-cell *matFooterCellDef [attr.colspan]=\"_displayColumns.length\">\n <ng-container>\n <ng-content select=\"[ngxAurTableSubFooterRow]\"></ng-content>\n </ng-container>\n </td>\n </ng-container>\n\n <ng-container *ngIf=\"subFooterRowTemplate\">\n <tr mat-footer-row *matFooterRowDef=\"['subFooterRow']; sticky: this.tableConfig.stickyCfg?.subFooter\"></tr>\n </ng-container>\n <!-- sub-footer-row END-->\n </table>\n </div>\n </ng-container>\n\n <!-- Pagination -->\n @if (this.paginationProvider.isEnabled && !externalPaginator) {\n <mat-paginator [ngClass]=\"{'hidePaginator': isTableBodyHide}\"\n [pageSizeOptions]=\"paginationProvider.sizes\"\n [pageSize]=\"paginationProvider.size\"\n [style]=\"tableConfig?.paginationCfg?.style\"\n [length]=\"paginatorState?.length\"\n [pageIndex]=\"paginatorState?.pageIndex\"\n (page)=\"onPageChangeInternal($event)\"\n showFirstLastButtons>\n </mat-paginator>\n }\n</div>\n", styles: [".aur-mat-table{display:flex;flex-direction:column}.aur-mat-table.sticky-pagination{height:100%}.aur-mat-table table{border-collapse:collapse}.aur-mat-table .table-container{position:relative}.aur-mat-table .table-container.sticky-pagination{flex-grow:1;overflow:auto}.aur-mat-table th,td{padding-right:4px!important;padding-left:4px!important}.aur-mat-table .new-color td.mat-mdc-cell,.aur-mat-table .new-color td.mat-mdc-footer-cell{color:inherit}.aur-mat-table mat-form-field{width:100%}.aur-mat-table .text-right{text-align:right!important}.aur-mat-table .pointer{cursor:pointer}.aur-mat-table .flex-container{display:flex;align-items:center}.aur-mat-table .expanded-row{height:0}.aur-mat-table .expanded-row .expanded-cell{padding-right:0!important;padding-left:0!important}.aur-mat-table .row-detail{overflow:hidden;display:flex}.aur-mat-table .clear-bottom-border{border-bottom:none}.aur-mat-table .table-settings-button{position:absolute;right:4px;top:12px;cursor:pointer;border-radius:4px;padding-bottom:2px;padding-top:2px;z-index:9999999999}.mat-mdc-header-row th:last-child{padding-right:25px!important}.aur-mat-table .search-container{display:flex;gap:8px;align-items:center}.aur-mat-table .extra-header-top-row th{border-bottom:none}.aur-mat-table .drag-icon{cursor:grab}.hide-table-body tr:not(.mat-mdc-header-row){display:none!important}.hidePaginator{display:none}.aur-mat-table .drag-column{padding-left:8px;padding-right:8px;width:35px}.aur-mat-table .aur-timeline-cell{width:40px;min-width:40px;max-width:40px;padding:0!important}.aur-mat-table .aur-timeline-marker-container{display:flex;flex-direction:column;align-items:center;height:100%;min-height:48px}.aur-mat-table .aur-timeline-line{flex:1;min-height:8px}.aur-mat-table .aur-timeline-marker-default{width:12px;height:12px;border-radius:50%;flex-shrink:0}.aur-mat-table .aur-timeline-continuation{border-left-style:solid;align-self:stretch;margin-left:20px;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i3$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i3$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i8.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: ColumnViewComponent, selector: "lib-column-view", inputs: ["config", "value"] }, { kind: "component", type: IconViewComponent, selector: "lib-icon-view", inputs: ["view"] }, { kind: "pipe", type: DataPropertyGetterPipe, name: "dataPropertyGetter" }], animations: [
|
|
1638
1688
|
trigger('detailExpand', [
|
|
1639
1689
|
state(ExpandState.COLLAPSED, style({ height: '0px', minHeight: '0' })),
|
|
1640
1690
|
state(ExpandState.EXPANDED, style({ height: '*' })),
|
|
@@ -1650,7 +1700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
1650
1700
|
state(ExpandState.EXPANDED, style({ height: '*' })),
|
|
1651
1701
|
transition(`${ExpandState.EXPANDED} <=> ${ExpandState.COLLAPSED}`, animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
1652
1702
|
]),
|
|
1653
|
-
], standalone: false, template: "<div class=\"aur-mat-table\"\n [ngClass]=\"{'bottom-pagination': paginationProvider.isEnabled && !externalPaginator && paginationProvider.position === 'bottom'}\">\n <ng-container>\n <!-- Filter -->\n <ng-container *ngIf=\"tableConfig.filterCfg?.enable ?? false\">\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]=\"{'bottom-pagination': paginationProvider.isEnabled && !externalPaginator && paginationProvider.position === 'bottom'}\">\n <mat-icon *ngIf=\"headerButtonProvider.isEnabled\"\n class=\"table-settings-button\"\n [style.color]=\"headerButtonProvider.color\"\n [style.background-color]=\"headerButtonProvider.background\"\n (click)=\"onHeaderButton.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.tableView?.height\"\n [style.max-height]=\"tableConfig.tableView?.maxHeight\"\n [style.min-height]=\"tableConfig.tableView?.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.display !== 'none'\">\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.display !== 'none'\">\n <mat-menu #actionMenu=\"matMenu\">\n <ng-container *ngFor=\"let item of action.menu\">\n <button mat-menu-item\n *ngIf=\"item.display !== 'none'\"\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.display !== 'none'\">\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=\"columnConfig.sort && columnConfig.sort.enable; else notSortable\">\n <th mat-header-cell *matHeaderCellDef [mat-sort-header]=\"columnConfig.key\"\n [arrowPosition]=\"columnConfig.sort.position === 'right' ? '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)=\"rowClick(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?.pageableCfg?.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.bottom-pagination{height:100%}.aur-mat-table table{border-collapse:collapse}.aur-mat-table .table-container{position:relative}.aur-mat-table .table-container.bottom-pagination{flex-grow:1;overflow:auto}.aur-mat-table th,td{padding-right:4px!important;padding-left:4px!important}.aur-mat-table .new-color td.mat-mdc-cell,.aur-mat-table .new-color td.mat-mdc-footer-cell{color:inherit}.aur-mat-table mat-form-field{width:100%}.aur-mat-table .text-right{text-align:right!important}.aur-mat-table .pointer{cursor:pointer}.aur-mat-table .flex-container{display:flex;align-items:center}.aur-mat-table .expanded-row{height:0}.aur-mat-table .expanded-row .expanded-cell{padding-right:0!important;padding-left:0!important}.aur-mat-table .row-detail{overflow:hidden;display:flex}.aur-mat-table .clear-bottom-border{border-bottom:none}.aur-mat-table .table-settings-button{position:absolute;right:4px;top:12px;cursor:pointer;border-radius:4px;padding-bottom:2px;padding-top:2px;z-index:9999999999}.mat-mdc-header-row th:last-child{padding-right:25px!important}.aur-mat-table .search-container{display:flex;gap:8px;align-items:center}.aur-mat-table .extra-header-top-row th{border-bottom:none}.aur-mat-table .drag-icon{cursor:grab}.hide-table-body tr:not(.mat-mdc-header-row){display:none!important}.hidePaginator{display:none}.aur-mat-table .drag-column{padding-left:8px;padding-right:8px;width:35px}.aur-mat-table .aur-timeline-cell{width:40px;min-width:40px;max-width:40px;padding:0!important}.aur-mat-table .aur-timeline-marker-container{display:flex;flex-direction:column;align-items:center;height:100%;min-height:48px}.aur-mat-table .aur-timeline-line{flex:1;min-height:8px}.aur-mat-table .aur-timeline-marker-default{width:12px;height:12px;border-radius:50%;flex-shrink:0}.aur-mat-table .aur-timeline-continuation{border-left-style:solid;align-self:stretch;margin-left:20px;flex-shrink:0}\n"] }]
|
|
1703
|
+
], standalone: false, template: "<div class=\"aur-mat-table\"\n [ngClass]=\"{'sticky-pagination': paginationProvider.isEnabled && !externalPaginator && paginationProvider.position === 'sticky'}\">\n <ng-container>\n <!-- Filter -->\n <ng-container *ngIf=\"isFeatureEnabled(tableConfig.filterCfg)\">\n <div class=\"search-container\">\n <ng-container>\n <ng-content select=\"[ngxAurTableSearchPrefix]\"></ng-content>\n </ng-container>\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n <mat-label>{{ tableConfig.filterCfg?.label }}</mat-label>\n <input matInput (keyup)=\"applySearchFilter($event)\"\n placeholder=\"{{tableConfig.filterCfg?.placeholder}}\"\n style=\"font-size: 18px;\">\n <mat-icon matPrefix>search</mat-icon>\n </mat-form-field>\n <ng-container>\n <ng-content select=\"[ngxAurTableSearchSuffix]\"></ng-content>\n </ng-container>\n </div>\n </ng-container>\n\n\n <div class=\"table-container\"\n [ngClass]=\"{'sticky-pagination': paginationProvider.isEnabled && !externalPaginator && paginationProvider.position === 'sticky'}\">\n <mat-icon *ngIf=\"headerButtonProvider.isEnabled\"\n class=\"table-settings-button\"\n [style.color]=\"headerButtonProvider.color\"\n [style.background-color]=\"headerButtonProvider.background\"\n (click)=\"headerButton.emit($event)\">\n {{ headerButtonProvider.icon }}\n </mat-icon>\n\n <!-- Table -->\n <table #table mat-table matSort\n [multiTemplateDataRows]=\"extendedRowTemplate !== null\"\n [dataSource]=\"tableDataSource\"\n (matSortChange)=\"sortTable($event)\"\n [style.height]=\"tableConfig.tableViewCfg?.height\"\n [style.max-height]=\"tableConfig.tableViewCfg?.maxHeight\"\n [style.min-height]=\"tableConfig.tableViewCfg?.minHeight\"\n [ngClass]=\"{'hide-table-body': isTableBodyHide}\">\n\n\n <!-- timeline-column-->\n <ng-container *ngIf=\"timelineProvider.isEnabled\" [matColumnDef]=\"timelineProvider.COLUMN_NAME\">\n <th mat-header-cell *matHeaderCellDef class=\"aur-timeline-cell\"\n [style.width]=\"timelineProvider.size?.width\"\n [style.min-width]=\"timelineProvider.size?.minWidth\"\n [style.max-width]=\"timelineProvider.size?.maxWidth\"></th>\n <td mat-cell *matCellDef=\"let element\" class=\"aur-timeline-cell\"\n [style.width]=\"timelineProvider.size?.width\"\n [style.min-width]=\"timelineProvider.size?.minWidth\"\n [style.max-width]=\"timelineProvider.size?.maxWidth\">\n <div class=\"aur-timeline-marker-container\">\n\n <div class=\"aur-timeline-line\"\n *ngIf=\"element.id !== _timelineFirstId\"\n [style.border-left-width.px]=\"timelineProvider.line.width\"\n [style.border-left-color]=\"_timelineGaps.get(element.id)?.topColor ?? timelineProvider.line.color\"\n [style.border-left-style]=\"_timelineGaps.get(element.id)?.topGap ? timelineProvider.line.gapStyle : timelineProvider.line.style\">\n </div>\n\n <ng-container *ngIf=\"timelineMarkerTemplate; else defaultMarker\">\n <ng-container *ngTemplateOutlet=\"timelineMarkerTemplate; context: {$implicit: element}\"></ng-container>\n </ng-container>\n <ng-template #defaultMarker>\n <div class=\"aur-timeline-marker-default\"\n [style.background-color]=\"timelineProvider.markerColor\">\n </div>\n </ng-template>\n\n <div class=\"aur-timeline-line\"\n *ngIf=\"element.id !== _timelineLastId\"\n [style.border-left-width.px]=\"timelineProvider.line.width\"\n [style.border-left-color]=\"_timelineGaps.get(element.id)?.bottomColor ?? timelineProvider.line.color\"\n [style.border-left-style]=\"_timelineGaps.get(element.id)?.bottomGap ? timelineProvider.line.gapStyle : timelineProvider.line.style\">\n </div>\n\n </div>\n </td>\n <td mat-footer-cell *matFooterCellDef class=\"aur-timeline-cell\"\n [style.width]=\"timelineProvider.size?.width\"\n [style.min-width]=\"timelineProvider.size?.minWidth\"\n [style.max-width]=\"timelineProvider.size?.maxWidth\"></td>\n </ng-container>\n\n <!-- drag-column-->\n <ng-container *ngIf=\"dragDropProvider.isEnabled && dragDropProvider.draggable\" [matColumnDef]=\"dragDropProvider.COLUMN_NAME\">\n\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"dragDropProvider.size?.width\"\n [style.min-width]=\"dragDropProvider.size?.minWidth\"\n [style.max-width]=\"dragDropProvider.size?.maxWidth\">\n </th>\n\n <td mat-cell *matCellDef=\"let element;\" class=\"drag-column\"\n [style.width]=\"dragDropProvider.size?.width\"\n [style.min-width]=\"dragDropProvider.size?.minWidth\"\n [style.max-width]=\"dragDropProvider.size?.maxWidth\">\n <lib-icon-view draggable=\"true\"\n class=\"drag-icon\"\n [view]=\"dragDropProvider.dragIconView\"\n (dragstart)=\"onDragStart($event, element)\"\n (dragend)=\"onDragEnd($event, element)\">\n </lib-icon-view>\n\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"dragDropProvider.size?.width\"\n [style.min-width]=\"dragDropProvider.size?.minWidth\"\n [style.max-width]=\"dragDropProvider.size?.maxWidth\">\n </td>\n </ng-container>\n\n <!-- index-column-->\n <ng-container *ngIf=\"indexProvider.isEnabled\" [matColumnDef]=\"indexProvider.COLUMN_NAME\">\n\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"indexProvider.size?.width\"\n [style.min-width]=\"indexProvider.size?.minWidth\"\n [style.max-width]=\"indexProvider.size?.maxWidth\">\n <lib-column-view [config]=\"indexProvider.headerView\">\n {{ indexProvider.name }}\n </lib-column-view>\n </th>\n\n <td mat-cell *matCellDef=\"let element;\"\n [style.width]=\"indexProvider.size?.width\"\n [style.min-width]=\"indexProvider.size?.minWidth\"\n [style.max-width]=\"indexProvider.size?.maxWidth\">\n {{ element.id + indexProvider.offset }}\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"indexProvider.size?.width\"\n [style.min-width]=\"indexProvider.size?.minWidth\"\n [style.max-width]=\"indexProvider.size?.maxWidth\">\n {{ totalRowProvider.totals.get(indexProvider.COLUMN_NAME) ?? '' }}\n </td>\n </ng-container>\n\n <!-- selection-column-->\n <ng-container [matColumnDef]=\"selectionProvider.COLUMN_NAME\" *ngIf=\"selectionProvider.isEnabled\">\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"selectionProvider.size?.width\"\n [style.min-width]=\"selectionProvider.size?.minWidth\"\n [style.max-width]=\"selectionProvider.size?.maxWidth\">\n <div class=\"flex-container\">\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n [checked]=\"selectionProvider.selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selectionProvider.selection.hasValue() && !isAllSelected()\">\n </mat-checkbox>\n <div\n *ngIf=\"tableConfig.selectionCfg?.showSelectedCount && selectionProvider.selection.hasValue()\">\n {{ selectionProvider.selection.selected.length }}\n <span\n *ngIf=\"tableConfig.selectionCfg?.showTotalCount !== false\">/{{ paginatorState?.length ? paginatorState?.length : tableDataSource.filteredData.length }}</span>\n </div>\n\n <div *ngIf=\"selectionProvider.selection.hasValue() && tableConfig?.selectionCfg?.actions\">\n <ng-container *ngFor=\"let action of tableConfig.selectionCfg!.actions\">\n <button mat-icon-button\n (click)=\"emitSelectedRowsAction(action.action, selectionProvider.selection.selected)\"\n [matTooltip]=\"action.icon.tooltip || ''\"\n *ngIf=\"action.visible !== false\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n </ng-container>\n </div>\n </div>\n\n </th>\n <td mat-cell *matCellDef=\"let row\"\n (click)=\"$event.stopPropagation(); selectionProvider.selection.toggle(castSrc(row).rowSrc)\"\n [style.width]=\"selectionProvider.size?.width\"\n [style.min-width]=\"selectionProvider.size?.minWidth\"\n [style.max-width]=\"selectionProvider.size?.maxWidth\">\n <mat-checkbox (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selectionProvider.selection.toggle(castSrc(row).rowSrc) : null\"\n [checked]=\"selectionProvider.selection.isSelected(castSrc(row).rowSrc)\">\n </mat-checkbox>\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"selectionProvider.size?.width\"\n [style.min-width]=\"selectionProvider.size?.minWidth\"\n [style.max-width]=\"selectionProvider.size?.maxWidth\">\n </td>\n </ng-container>\n\n <!-- action column -->\n <ng-container *ngIf=\"rowActionsProvider.isEnabled\" [matColumnDef]=\"rowActionsProvider.COLUMN_NAME\">\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"rowActionsProvider.size?.width\"\n [style.min-width]=\"rowActionsProvider.size?.minWidth\"\n [style.max-width]=\"rowActionsProvider.size?.maxWidth\"></th>\n <td mat-cell *matCellDef=\"let element\" (click)=\"$event.stopPropagation()\" style=\"cursor: default\"\n [style.width]=\"rowActionsProvider.size?.width\"\n [style.min-width]=\"rowActionsProvider.size?.minWidth\"\n [style.max-width]=\"rowActionsProvider.size?.maxWidth\">\n <ng-container *ngFor=\"let action of rowActionsProvider.actionView.get(element.id)\">\n <!-- action with dropdown menu -->\n <ng-container *ngIf=\"action.menu; else directAction\">\n <ng-container *ngIf=\"action.visible !== false\">\n <mat-menu #actionMenu=\"matMenu\">\n <ng-container *ngFor=\"let item of action.menu\">\n <button mat-menu-item\n *ngIf=\"item.visible !== false\"\n [disabled]=\"item.disabled === true\"\n (click)=\"emitMenuAction(item.action, element.rowSrc)\">\n <mat-icon *ngIf=\"item.icon\" [style.color]=\"item.icon.color\">\n {{ item.icon.name }}\n </mat-icon>\n <span>{{ item.text }}</span>\n </button>\n </ng-container>\n </mat-menu>\n <button mat-icon-button\n [matMenuTriggerFor]=\"actionMenu\"\n [matTooltip]=\"action.icon.tooltip || ''\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n </ng-container>\n </ng-container>\n\n <!-- direct action (existing behavior) -->\n <ng-template #directAction>\n <button mat-icon-button\n (click)=\"emitRowAction(action.action, element.rowSrc, $event)\"\n [matTooltip]=\"action.icon.tooltip || ''\"\n *ngIf=\"action.visible !== false\">\n <mat-icon [style.color]=\"action.icon.color\">\n {{ action.icon.name }}\n </mat-icon>\n </button>\n </ng-template>\n </ng-container>\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"rowActionsProvider.size?.width\"\n [style.min-width]=\"rowActionsProvider.size?.minWidth\"\n [style.max-width]=\"rowActionsProvider.size?.maxWidth\">\n {{ totalRowProvider.totals.get(rowActionsProvider.COLUMN_NAME) ?? '' }}\n </td>\n </ng-container>\n\n <!-- value-icon-->\n <ng-container *ngFor=\"let columnConfig of tableConfig.columnsCfg\" [matColumnDef]=\"columnConfig.key\">\n\n <!-- if sortable column header -->\n <ng-container *ngIf=\"isFeatureEnabled(columnConfig.sort); else notSortable\">\n <th mat-header-cell *matHeaderCellDef [mat-sort-header]=\"columnConfig.key\"\n [arrowPosition]=\"columnConfig.sort?.position === 'start' ? 'before' : 'after'\"\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n <ng-container *ngTemplateOutlet=\"headerValue\"></ng-container>\n </th>\n </ng-container>\n\n <!-- else not sortable -->\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n <ng-container *ngTemplateOutlet=\"headerValue\"></ng-container>\n </th>\n </ng-template>\n\n <!-- header value-->\n <ng-template #headerValue>\n <lib-column-view [config]=\"columnConfig.headerView\"\n [value]=\"columnConfig.name\">\n </lib-column-view>\n </ng-template>\n\n <!-- column value \u043F\u043E\u043B\u0443\u0447\u0430\u0442\u044C \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u043A\u043E\u043B\u043E\u043D\u043E\u043A \u043D\u0443\u0436\u043D\u043E \u0447\u0435\u0440\u0435\u0437 getView(rowIndex, columnConfig.key) \u0442\u0430\u043C \u043D\u0430\u0445\u043E\u0434\u044F\u0442\u0441\u044F \u0443\u0436\u0435\n \u043F\u043E\u0434\u0433\u043E\u0442\u043E\u0432\u043B\u0435\u043D\u043D\u044B\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F \u0434\u043B\u044F \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F-->\n <td mat-cell *matCellDef=\"let element;\"\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n <lib-column-view\n [config]=\"tableView[element.id]?.get(columnConfig.key)\"\n [value]=\"element | dataPropertyGetter: columnConfig.key\">\n </lib-column-view>\n </td>\n\n <td mat-footer-cell *matFooterCellDef\n [style.width]=\"columnConfig.size?.width\"\n [style.min-width]=\"columnConfig.size?.minWidth\"\n [style.max-width]=\"columnConfig.size?.maxWidth\">\n {{ totalRowProvider.totals.get(columnConfig.key) ?? '' }}\n </td>\n\n </ng-container>\n\n <!-- extra header top cell-->\n <ng-container *ngFor=\"let extraTopCell of _displayExtraHeaderTopCell; let index = index\"\n [matColumnDef]=\"extraTopCell\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"extraHeaderCellTopTemplate; context: {key: extraTopCell.replace(EXTRA_HEADER_CELL_TOP_SUFFIX, ''), index: index}\"></ng-container>\n </th>\n </ng-container>\n\n\n <!-- extra header bottom cell-->\n <ng-container *ngFor=\"let extraBottomCell of _displayExtraHeaderBottomCell; let index = index\"\n [matColumnDef]=\"extraBottomCell\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container\n *ngTemplateOutlet=\"extraHeaderCellBottomTemplate; context: {key: extraBottomCell.replace(EXTRA_HEADER_CELL_BOTTOM_SUFFIX, ''), index: index}\"></ng-container>\n </th>\n </ng-container>\n\n <!-- extra header top row-->\n <ng-container *ngIf=\"extraHeaderCellTopTemplate\">\n <tr mat-header-row *matHeaderRowDef=\"_displayExtraHeaderTopCell; sticky: this.tableConfig.stickyCfg?.header\"\n class=\"extra-header-top-row\">\n </tr>\n </ng-container>\n\n <!-- header row-->\n <tr mat-header-row *matHeaderRowDef=\"_displayColumns; sticky: this.tableConfig.stickyCfg?.header\"\n [style]=\"_headerStyle\" [ngClass]=\"_headerClass\">\n </tr>\n\n <!-- extra header bottom row -->\n <ng-container *ngIf=\"extraHeaderCellBottomTemplate\">\n <tr mat-header-row\n *matHeaderRowDef=\"_displayExtraHeaderBottomCell; sticky: this.tableConfig.stickyCfg?.header\">\n </tr>\n </ng-container>\n\n <tr mat-row #rowLink\n (dragover)=\"onDragOver($event)\"\n (drop)=\"onDrop($event, row)\"\n *matRowDef=\"let row; columns: _displayColumns;\"\n (click)=\"handleRowClick(row)\"\n (mouseenter)=\"onRowEnter(row)\"\n (mouseleave)=\"onRowLeave(row)\"\n [ngClass]=\"rowNgClass(row)\"\n [style]=\"rowStyle(row)\">\n </tr>\n\n <!--expanded-row-->\n <ng-container matColumnDef=\"expandedRow\">\n <td mat-cell class=\"expanded-cell\" *matCellDef=\"let element\" [attr.colspan]=\"_displayColumns.length\"\n style=\"padding-right: 0!important;\">\n <div class=\"row-detail\"\n [@detailExpand]=\"element.rowSrc === highlighted ? expandedStateEnum.EXPANDED : expandedStateEnum.COLLAPSED\">\n <!-- timeline continuation -->\n <div *ngIf=\"timelineProvider.isEnabled\"\n class=\"aur-timeline-continuation\"\n [style.border-left-width.px]=\"timelineProvider.line.width\"\n [style.border-left-color]=\"_timelineGaps.get(element.id)?.bottomColor ?? timelineProvider.line.color\"\n [style.border-left-style]=\"_timelineGaps.get(element.id)?.bottomGap ? timelineProvider.line.gapStyle : timelineProvider.line.style\">\n </div>\n <!-- lazy-load of details -->\n <ng-container *ngIf=\"element.rowSrc === highlighted\">\n <ng-container *ngTemplateOutlet=\"extendedRowTemplate; context: {$implicit: element}\"></ng-container>\n </ng-container>\n </div>\n </td>\n </ng-container>\n\n <ng-container *ngIf=\"extendedRowTemplate\">\n <tr mat-row class=\"expanded-row\" *matRowDef=\"let row; columns: ['expandedRow']\"></tr>\n </ng-container>\n <!--expanded-row-->\n\n <ng-container *ngIf=\"totalRowProvider.isEnabled\">\n <tr mat-footer-row *matFooterRowDef=\"_displayColumns; sticky: this.tableConfig.stickyCfg?.total\"\n [style]=\"_totalStyle\" [ngClass]=\"_totalClass\"\n [style.display]=\"isTotalRowVisible() ? null : 'none'\"></tr>\n </ng-container>\n\n <!--sub-footer-row-->\n <ng-container matColumnDef=\"subFooterRow\">\n <td mat-footer-cell *matFooterCellDef [attr.colspan]=\"_displayColumns.length\">\n <ng-container>\n <ng-content select=\"[ngxAurTableSubFooterRow]\"></ng-content>\n </ng-container>\n </td>\n </ng-container>\n\n <ng-container *ngIf=\"subFooterRowTemplate\">\n <tr mat-footer-row *matFooterRowDef=\"['subFooterRow']; sticky: this.tableConfig.stickyCfg?.subFooter\"></tr>\n </ng-container>\n <!-- sub-footer-row END-->\n </table>\n </div>\n </ng-container>\n\n <!-- Pagination -->\n @if (this.paginationProvider.isEnabled && !externalPaginator) {\n <mat-paginator [ngClass]=\"{'hidePaginator': isTableBodyHide}\"\n [pageSizeOptions]=\"paginationProvider.sizes\"\n [pageSize]=\"paginationProvider.size\"\n [style]=\"tableConfig?.paginationCfg?.style\"\n [length]=\"paginatorState?.length\"\n [pageIndex]=\"paginatorState?.pageIndex\"\n (page)=\"onPageChangeInternal($event)\"\n showFirstLastButtons>\n </mat-paginator>\n }\n</div>\n", styles: [".aur-mat-table{display:flex;flex-direction:column}.aur-mat-table.sticky-pagination{height:100%}.aur-mat-table table{border-collapse:collapse}.aur-mat-table .table-container{position:relative}.aur-mat-table .table-container.sticky-pagination{flex-grow:1;overflow:auto}.aur-mat-table th,td{padding-right:4px!important;padding-left:4px!important}.aur-mat-table .new-color td.mat-mdc-cell,.aur-mat-table .new-color td.mat-mdc-footer-cell{color:inherit}.aur-mat-table mat-form-field{width:100%}.aur-mat-table .text-right{text-align:right!important}.aur-mat-table .pointer{cursor:pointer}.aur-mat-table .flex-container{display:flex;align-items:center}.aur-mat-table .expanded-row{height:0}.aur-mat-table .expanded-row .expanded-cell{padding-right:0!important;padding-left:0!important}.aur-mat-table .row-detail{overflow:hidden;display:flex}.aur-mat-table .clear-bottom-border{border-bottom:none}.aur-mat-table .table-settings-button{position:absolute;right:4px;top:12px;cursor:pointer;border-radius:4px;padding-bottom:2px;padding-top:2px;z-index:9999999999}.mat-mdc-header-row th:last-child{padding-right:25px!important}.aur-mat-table .search-container{display:flex;gap:8px;align-items:center}.aur-mat-table .extra-header-top-row th{border-bottom:none}.aur-mat-table .drag-icon{cursor:grab}.hide-table-body tr:not(.mat-mdc-header-row){display:none!important}.hidePaginator{display:none}.aur-mat-table .drag-column{padding-left:8px;padding-right:8px;width:35px}.aur-mat-table .aur-timeline-cell{width:40px;min-width:40px;max-width:40px;padding:0!important}.aur-mat-table .aur-timeline-marker-container{display:flex;flex-direction:column;align-items:center;height:100%;min-height:48px}.aur-mat-table .aur-timeline-line{flex:1;min-height:8px}.aur-mat-table .aur-timeline-marker-default{width:12px;height:12px;border-radius:50%;flex-shrink:0}.aur-mat-table .aur-timeline-continuation{border-left-style:solid;align-self:stretch;margin-left:20px;flex-shrink:0}\n"] }]
|
|
1654
1704
|
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }], propDecorators: { displayColumns: [{
|
|
1655
1705
|
type: Input
|
|
1656
1706
|
}], subFooterRowTemplate: [{
|
|
@@ -1692,29 +1742,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
1692
1742
|
type: Output
|
|
1693
1743
|
}], pageChange: [{
|
|
1694
1744
|
type: Output
|
|
1695
|
-
}],
|
|
1745
|
+
}], rowAction: [{
|
|
1696
1746
|
type: Output
|
|
1697
|
-
}],
|
|
1747
|
+
}], selectChange: [{
|
|
1698
1748
|
type: Output
|
|
1699
|
-
}],
|
|
1749
|
+
}], selectAdded: [{
|
|
1700
1750
|
type: Output
|
|
1701
|
-
}],
|
|
1751
|
+
}], selectRemoved: [{
|
|
1702
1752
|
type: Output
|
|
1703
|
-
}],
|
|
1753
|
+
}], selectedRowsAction: [{
|
|
1704
1754
|
type: Output
|
|
1705
1755
|
}], selectionModel: [{
|
|
1706
1756
|
type: Output
|
|
1707
|
-
}],
|
|
1757
|
+
}], rowClick: [{
|
|
1708
1758
|
type: Output
|
|
1709
1759
|
}], loadingChange: [{
|
|
1710
1760
|
type: Output
|
|
1711
1761
|
}], pageError: [{
|
|
1712
1762
|
type: Output
|
|
1713
|
-
}],
|
|
1763
|
+
}], filterChange: [{
|
|
1714
1764
|
type: Output
|
|
1715
1765
|
}], columnOffsets: [{
|
|
1716
1766
|
type: Output
|
|
1717
|
-
}],
|
|
1767
|
+
}], headerButton: [{
|
|
1718
1768
|
type: Output
|
|
1719
1769
|
}], highlight: [{
|
|
1720
1770
|
type: Input
|
|
@@ -1822,9 +1872,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
1822
1872
|
var NgxAurFilters;
|
|
1823
1873
|
(function (NgxAurFilters) {
|
|
1824
1874
|
/**
|
|
1825
|
-
*
|
|
1826
|
-
*
|
|
1827
|
-
* @template T
|
|
1875
|
+
* Базовый абстрактный класс фильтра.
|
|
1876
|
+
* Определяет общий интерфейс для всех фильтров.
|
|
1877
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
1828
1878
|
*/
|
|
1829
1879
|
class Base {
|
|
1830
1880
|
constructor() {
|
|
@@ -1835,9 +1885,9 @@ var NgxAurFilters;
|
|
|
1835
1885
|
}
|
|
1836
1886
|
NgxAurFilters.ExtractableProperty = ExtractableProperty;
|
|
1837
1887
|
/**
|
|
1838
|
-
*
|
|
1839
|
-
* @template T
|
|
1840
|
-
* @template V
|
|
1888
|
+
* Класс для фильтрации данных на основе одного значения.
|
|
1889
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
1890
|
+
* @template V Тип значения, используемого для фильтрации.
|
|
1841
1891
|
*/
|
|
1842
1892
|
class ValueSingle extends ExtractableProperty {
|
|
1843
1893
|
constructor(value) {
|
|
@@ -1850,9 +1900,9 @@ var NgxAurFilters;
|
|
|
1850
1900
|
}
|
|
1851
1901
|
NgxAurFilters.ValueSingle = ValueSingle;
|
|
1852
1902
|
/**
|
|
1853
|
-
*
|
|
1854
|
-
* @template T
|
|
1855
|
-
* @template V
|
|
1903
|
+
* Класс для фильтрации данных на основе массива значений.
|
|
1904
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
1905
|
+
* @template V Тип значений, используемых для фильтрации.
|
|
1856
1906
|
*/
|
|
1857
1907
|
class ValueArray extends ExtractableProperty {
|
|
1858
1908
|
constructor(values) {
|
|
@@ -1862,9 +1912,9 @@ var NgxAurFilters;
|
|
|
1862
1912
|
}
|
|
1863
1913
|
NgxAurFilters.ValueArray = ValueArray;
|
|
1864
1914
|
/**
|
|
1865
|
-
*
|
|
1866
|
-
* @template T
|
|
1867
|
-
* @template V
|
|
1915
|
+
* Класс для фильтрации данных на основе множества значений.
|
|
1916
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
1917
|
+
* @template V Тип значений, используемых для фильтрации.
|
|
1868
1918
|
*/
|
|
1869
1919
|
class ValueSet extends ExtractableProperty {
|
|
1870
1920
|
constructor(values) {
|
|
@@ -1874,9 +1924,9 @@ var NgxAurFilters;
|
|
|
1874
1924
|
}
|
|
1875
1925
|
NgxAurFilters.ValueSet = ValueSet;
|
|
1876
1926
|
/**
|
|
1877
|
-
*
|
|
1878
|
-
* @template T
|
|
1879
|
-
* @template V
|
|
1927
|
+
* Класс для фильтрации данных в диапазоне min-max.
|
|
1928
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
1929
|
+
* @template V Тип значений, определяющих диапазон.
|
|
1880
1930
|
*/
|
|
1881
1931
|
class ValueMinMax extends ExtractableProperty {
|
|
1882
1932
|
constructor(_min, _max) {
|
|
@@ -1896,9 +1946,9 @@ var NgxAurFilters;
|
|
|
1896
1946
|
}
|
|
1897
1947
|
NgxAurFilters.ValueMinMax = ValueMinMax;
|
|
1898
1948
|
/**
|
|
1899
|
-
*
|
|
1900
|
-
* @template T
|
|
1901
|
-
* @template V
|
|
1949
|
+
* Класс для фильтрации данных в диапазоне min-max.
|
|
1950
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
1951
|
+
* @template V Тип значений, определяющих диапазон.
|
|
1902
1952
|
*/
|
|
1903
1953
|
class ValueMinMaxNumber extends ValueMinMax {
|
|
1904
1954
|
constructor(min, max) {
|
|
@@ -1913,10 +1963,10 @@ var NgxAurFilters;
|
|
|
1913
1963
|
}
|
|
1914
1964
|
NgxAurFilters.ValueMinMaxNumber = ValueMinMaxNumber;
|
|
1915
1965
|
/**
|
|
1916
|
-
*
|
|
1917
|
-
*
|
|
1918
|
-
*
|
|
1919
|
-
* @template T
|
|
1966
|
+
* Абстрактный класс для фильтрации данных по тому, содержит ли определённое свойство
|
|
1967
|
+
* данных, после обрезки и приведения к нижнему регистру, заданную
|
|
1968
|
+
* подстроку, также обрезанную и приведённую к нижнему регистру.
|
|
1969
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
1920
1970
|
*/
|
|
1921
1971
|
class ContainsStringIgnoreCase extends ValueSingle {
|
|
1922
1972
|
filterFn() {
|
|
@@ -2038,8 +2088,8 @@ var NgxAurFilters;
|
|
|
2038
2088
|
}
|
|
2039
2089
|
NgxAurFilters.notHasInSet = notHasInSet;
|
|
2040
2090
|
/**
|
|
2041
|
-
*
|
|
2042
|
-
* @template T
|
|
2091
|
+
* Класс составного фильтра, объединяющий несколько фильтров с помощью логического AND.
|
|
2092
|
+
* @template T Тип данных, подлежащих фильтрации.
|
|
2043
2093
|
*/
|
|
2044
2094
|
class CompositeAndFilter extends Base {
|
|
2045
2095
|
constructor(filters) {
|
|
@@ -2047,15 +2097,15 @@ var NgxAurFilters;
|
|
|
2047
2097
|
this.filters = filters || [];
|
|
2048
2098
|
}
|
|
2049
2099
|
/**
|
|
2050
|
-
*
|
|
2051
|
-
*
|
|
2100
|
+
* Создаёт функцию фильтрации, объединяющую функции фильтрации всех
|
|
2101
|
+
* фильтров составного фильтра с помощью логического AND.
|
|
2052
2102
|
*
|
|
2053
|
-
* @returns
|
|
2054
|
-
* - `data`:
|
|
2055
|
-
*
|
|
2103
|
+
* @returns Функция фильтрации, принимающая единственный параметр:
|
|
2104
|
+
* - `data`: Отдельный элемент данных из источника данных MatTable.
|
|
2105
|
+
* Тип `data` определяется обобщённым параметром типа 'T'.
|
|
2056
2106
|
*
|
|
2057
|
-
*
|
|
2058
|
-
*
|
|
2107
|
+
* Функция возвращает `true`, если все фильтры составного фильтра возвращают `true`
|
|
2108
|
+
* для элемента `data`, иначе `false`.
|
|
2059
2109
|
*/
|
|
2060
2110
|
filterFn() {
|
|
2061
2111
|
return (data) => {
|
|
@@ -2063,11 +2113,11 @@ var NgxAurFilters;
|
|
|
2063
2113
|
};
|
|
2064
2114
|
}
|
|
2065
2115
|
/**
|
|
2066
|
-
*
|
|
2067
|
-
*
|
|
2116
|
+
* Определяет, эквивалентен ли текущий составной фильтр другому фильтру.
|
|
2117
|
+
* Этот метод используется для сравнения текущего применённого составного фильтра с новым фильтром.
|
|
2068
2118
|
*
|
|
2069
|
-
* @param other
|
|
2070
|
-
* @returns `true
|
|
2119
|
+
* @param other Фильтр для сравнения с текущим фильтром.
|
|
2120
|
+
* @returns `true`, если текущий фильтр и фильтр `other` эквивалентны, иначе `false`.
|
|
2071
2121
|
*/
|
|
2072
2122
|
equals(other) {
|
|
2073
2123
|
if (!(other instanceof CompositeAndFilter)) {
|