@sgcloud-sgsistemas/angular-components 0.0.8 → 0.0.9

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.
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Input, Component, EventEmitter, Output, Directive, HostListener, inject, ElementRef, TemplateRef, ContentChild, ContentChildren, NgModule } from '@angular/core';
2
+ import { Input, Component, EventEmitter, Output, Directive, HostListener, inject, ElementRef, TemplateRef, ContentChild, ContentChildren, forwardRef, Inject, NgModule } from '@angular/core';
3
3
  import * as i2 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
5
  import * as i2$2 from '@angular/cdk/scrolling';
@@ -1350,85 +1350,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
1350
1350
  type: Input
1351
1351
  }] } });
1352
1352
 
1353
- class AcList {
1354
- direction = {
1355
- NONE: { icon: "unfold_more", next: "ASC" },
1356
- ASC: { icon: "keyboard_arrow_up", next: "DESC" },
1357
- DESC: { icon: "keyboard_arrow_down", next: "NONE" },
1358
- };
1359
- columns = [];
1360
- list = [];
1361
- rowTemplate;
1362
- sortColumn = '';
1363
- sortDirection = 'NONE';
1364
- constructor() { }
1365
- ngOnInit() { }
1366
- ngOnChanges(changes) { }
1367
- onSortDirection(colIndex) {
1368
- this.sortDirection = this.direction[this.sortDirection].next;
1369
- this.sortColumn = this.columns[colIndex].param;
1370
- }
1371
- getSortDirection(colIndex) {
1372
- if (this.sortColumn === this.columns[colIndex].param) {
1373
- return this.sortDirection;
1374
- }
1375
- return 'NONE';
1376
- }
1377
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcList, deps: [], target: i0.ɵɵFactoryTarget.Component });
1378
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcList, isStandalone: true, selector: "ac-list", inputs: { columns: "columns", list: "list", rowTemplate: "rowTemplate", sortColumn: "sortColumn", sortDirection: "sortDirection" }, providers: [], usesOnChanges: true, ngImport: i0, template: "<div class=\"ac-list\">\n <table class=\"ac-list-table\">\n <thead class=\"ac-list-table-thead\">\n <tr class=\"ac-list-table-thead-tr\">\n <!-- <th *ngIf=\"selectMode != ''\" [width]=\"1\">\n <ac-checkbox \n *ngIf=\"selectMode == 'CHECKBOX'\"\n [(model)]=\"globalCheckbox!\"\n [onToggle]=\"selectAll\">\n </ac-checkbox>\n </th> -->\n <th class=\"ac-list-table-thead-tr-th\" \n attr.style=\"width:{{column.size}}px;\" \n *ngFor=\"let column of columns; let idx = index\"> \n <div class=\"ac-list-column-header\" \n *ngIf=\"!column.hide\">\n <div>\n {{column.label}}\n </div>\n <div *ngIf=\"column.sortable\">\n <mat-icon [fontIcon]=\"direction[getSortDirection(idx)]!.icon\"\n (click)=\"onSortDirection(idx)\"\n class=\"sort-icon\">\n </mat-icon>\n </div>\n </div>\n </th>\n </tr>\n </thead>\n <tbody class=\"ac-list-table-tbody\">\n <tr class=\"ac-list-table-tbody-tr\"\n *ngFor=\"let row of list; let idxRow = index;\"\n tabindex=\"0\"> \n <!-- <td *ngIf=\"selectMode != ''\">\n <ac-checkbox \n *ngIf=\"selectMode == 'CHECKBOX'\"\n [disabled]=\"disabled\"\n [(model)]=\"selectedValues[getRowId(idxRow)]!\"\n [onToggle]=\"onSelectedRow\">\n </ac-checkbox>\n </td> -->\n <td class=\"ac-list-table-tbody-tr-td\" \n *ngFor=\"let column of columns; let idxCol = index\"> \n <div class=\"ac-list-column-body\" \n *ngIf=\"!column.hide\" attr.style=\"width:{{column.size}}px;\">\n <div *ngIf=\"!rowTemplate\">\n {{row[column.param]}}\n </div>\n <ng-template *ngIf=\"rowTemplate\"\n [ngTemplateOutlet]=\"rowTemplate\"\n [ngTemplateOutletContext]=\"{\n row: row, \n idxRow: idxRow, \n column: column.param, \n idxCol: idxCol\n }\">\n </ng-template>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n</div>", styles: [".ac-list{max-height:100%;overflow:auto}.ac-list .ac-list-table{max-height:100%;width:100%;border-collapse:separate;border-spacing:0;overflow:visible}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr{background-color:var(--primary-color, #0747a6)}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th{font-weight:500;font-size:14px;color:#fff;padding-left:5px}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th:last-child{padding-right:5px;border-top-right-radius:5px;border-bottom-right-radius:5px}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th .ac-list-column-header{display:flex;align-items:center;box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th .ac-list-column-header .sort-icon{font-size:20px;display:flex;align-items:center}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr{outline:none}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr:nth-child(2n){background:var(--list-item-even-background-color, #e1e1e1)}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr:hover{background:var(--list-item-hover-background-color, #cacaca)}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr:focus{background:var(--list-item-focus-background-color, rgba(7, 71, 166, .3137254902))}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr .ac-list-table-tbody-tr-td{color:var(--font-color, black);padding-left:5px}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr .ac-list-table-tbody-tr-td:last-child{padding-right:5px}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr .ac-list-table-tbody-tr-td .ac-list-column-body{box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type:
1379
- // AcCheckBox,
1380
- MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
1381
- }
1382
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcList, decorators: [{
1383
- type: Component,
1384
- args: [{ selector: 'ac-list', imports: [
1385
- CommonModule,
1386
- FormsModule,
1387
- // AcCheckBox,
1388
- MatIconModule
1389
- ], providers: [], template: "<div class=\"ac-list\">\n <table class=\"ac-list-table\">\n <thead class=\"ac-list-table-thead\">\n <tr class=\"ac-list-table-thead-tr\">\n <!-- <th *ngIf=\"selectMode != ''\" [width]=\"1\">\n <ac-checkbox \n *ngIf=\"selectMode == 'CHECKBOX'\"\n [(model)]=\"globalCheckbox!\"\n [onToggle]=\"selectAll\">\n </ac-checkbox>\n </th> -->\n <th class=\"ac-list-table-thead-tr-th\" \n attr.style=\"width:{{column.size}}px;\" \n *ngFor=\"let column of columns; let idx = index\"> \n <div class=\"ac-list-column-header\" \n *ngIf=\"!column.hide\">\n <div>\n {{column.label}}\n </div>\n <div *ngIf=\"column.sortable\">\n <mat-icon [fontIcon]=\"direction[getSortDirection(idx)]!.icon\"\n (click)=\"onSortDirection(idx)\"\n class=\"sort-icon\">\n </mat-icon>\n </div>\n </div>\n </th>\n </tr>\n </thead>\n <tbody class=\"ac-list-table-tbody\">\n <tr class=\"ac-list-table-tbody-tr\"\n *ngFor=\"let row of list; let idxRow = index;\"\n tabindex=\"0\"> \n <!-- <td *ngIf=\"selectMode != ''\">\n <ac-checkbox \n *ngIf=\"selectMode == 'CHECKBOX'\"\n [disabled]=\"disabled\"\n [(model)]=\"selectedValues[getRowId(idxRow)]!\"\n [onToggle]=\"onSelectedRow\">\n </ac-checkbox>\n </td> -->\n <td class=\"ac-list-table-tbody-tr-td\" \n *ngFor=\"let column of columns; let idxCol = index\"> \n <div class=\"ac-list-column-body\" \n *ngIf=\"!column.hide\" attr.style=\"width:{{column.size}}px;\">\n <div *ngIf=\"!rowTemplate\">\n {{row[column.param]}}\n </div>\n <ng-template *ngIf=\"rowTemplate\"\n [ngTemplateOutlet]=\"rowTemplate\"\n [ngTemplateOutletContext]=\"{\n row: row, \n idxRow: idxRow, \n column: column.param, \n idxCol: idxCol\n }\">\n </ng-template>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n</div>", styles: [".ac-list{max-height:100%;overflow:auto}.ac-list .ac-list-table{max-height:100%;width:100%;border-collapse:separate;border-spacing:0;overflow:visible}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr{background-color:var(--primary-color, #0747a6)}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th{font-weight:500;font-size:14px;color:#fff;padding-left:5px}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th:last-child{padding-right:5px;border-top-right-radius:5px;border-bottom-right-radius:5px}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th .ac-list-column-header{display:flex;align-items:center;box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th .ac-list-column-header .sort-icon{font-size:20px;display:flex;align-items:center}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr{outline:none}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr:nth-child(2n){background:var(--list-item-even-background-color, #e1e1e1)}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr:hover{background:var(--list-item-hover-background-color, #cacaca)}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr:focus{background:var(--list-item-focus-background-color, rgba(7, 71, 166, .3137254902))}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr .ac-list-table-tbody-tr-td{color:var(--font-color, black);padding-left:5px}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr .ac-list-table-tbody-tr-td:last-child{padding-right:5px}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr .ac-list-table-tbody-tr-td .ac-list-column-body{box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"] }]
1390
- }], ctorParameters: () => [], propDecorators: { columns: [{
1391
- type: Input
1392
- }], list: [{
1393
- type: Input
1394
- }], rowTemplate: [{
1395
- type: Input
1396
- }], sortColumn: [{
1397
- type: Input
1398
- }], sortDirection: [{
1399
- type: Input
1400
- }] } });
1401
-
1402
- class AcListV2Content {
1353
+ class AcListContent {
1403
1354
  template;
1404
1355
  constructor(template) {
1405
1356
  this.template = template;
1406
1357
  }
1407
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListV2Content, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
1408
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: AcListV2Content, isStandalone: true, selector: "[ac-list-v2-content]", ngImport: i0 });
1358
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListContent, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
1359
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: AcListContent, isStandalone: true, selector: "[ac-list-content]", ngImport: i0 });
1409
1360
  }
1410
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListV2Content, decorators: [{
1361
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListContent, decorators: [{
1411
1362
  type: Directive,
1412
1363
  args: [{
1413
- selector: '[ac-list-v2-content]',
1364
+ selector: '[ac-list-content]',
1414
1365
  standalone: true
1415
1366
  }]
1416
1367
  }], ctorParameters: () => [{ type: i0.TemplateRef }] });
1417
1368
 
1418
- class AcListV2Column {
1369
+ class AcListColumn {
1419
1370
  name;
1420
1371
  label;
1421
1372
  sortable = false;
1373
+ sortField;
1422
1374
  alignColumn = 'left';
1423
1375
  alignRow = 'left';
1376
+ width;
1377
+ minWidth;
1378
+ maxWidth;
1379
+ wrap = false;
1380
+ ellipsis = false;
1424
1381
  contentTpl;
1425
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListV2Column, deps: [], target: i0.ɵɵFactoryTarget.Component });
1426
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcListV2Column, isStandalone: true, selector: "ac-list-v2-column", inputs: { name: "name", label: "label", sortable: "sortable", alignColumn: "alignColumn", alignRow: "alignRow" }, queries: [{ propertyName: "contentTpl", first: true, predicate: AcListV2Content, descendants: true, read: TemplateRef }], ngImport: i0, template: '', isInline: true });
1382
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListColumn, deps: [], target: i0.ɵɵFactoryTarget.Component });
1383
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcListColumn, isStandalone: true, selector: "ac-list-column", inputs: { name: "name", label: "label", sortable: "sortable", sortField: "sortField", alignColumn: "alignColumn", alignRow: "alignRow", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", wrap: "wrap", ellipsis: "ellipsis" }, queries: [{ propertyName: "contentTpl", first: true, predicate: AcListContent, descendants: true, read: TemplateRef }], ngImport: i0, template: '', isInline: true });
1427
1384
  }
1428
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListV2Column, decorators: [{
1385
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListColumn, decorators: [{
1429
1386
  type: Component,
1430
1387
  args: [{
1431
- selector: 'ac-list-v2-column',
1388
+ selector: 'ac-list-column',
1432
1389
  standalone: true,
1433
1390
  template: '',
1434
1391
  }]
@@ -1438,22 +1395,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
1438
1395
  type: Input
1439
1396
  }], sortable: [{
1440
1397
  type: Input
1398
+ }], sortField: [{
1399
+ type: Input
1441
1400
  }], alignColumn: [{
1442
1401
  type: Input
1443
1402
  }], alignRow: [{
1444
1403
  type: Input
1404
+ }], width: [{
1405
+ type: Input
1406
+ }], minWidth: [{
1407
+ type: Input
1408
+ }], maxWidth: [{
1409
+ type: Input
1410
+ }], wrap: [{
1411
+ type: Input
1412
+ }], ellipsis: [{
1413
+ type: Input
1445
1414
  }], contentTpl: [{
1446
1415
  type: ContentChild,
1447
- args: [AcListV2Content, { read: TemplateRef }]
1416
+ args: [AcListContent, { read: TemplateRef }]
1448
1417
  }] } });
1449
1418
 
1450
- class AcListV2 {
1419
+ class AcList {
1420
+ elementRef;
1421
+ cdr;
1451
1422
  list = [];
1452
1423
  itemSize = 25;
1424
+ enableVirtualScroll = false;
1453
1425
  columns;
1426
+ onSortEmitter = new EventEmitter();
1454
1427
  columnsArr = [];
1455
1428
  sortColumn = '';
1456
1429
  sortDirection = 'NONE';
1430
+ subList = null;
1431
+ constructor(elementRef, cdr) {
1432
+ this.elementRef = elementRef;
1433
+ this.cdr = cdr;
1434
+ }
1457
1435
  ngAfterContentInit() {
1458
1436
  this.columnsArr = this.columns.toArray();
1459
1437
  }
@@ -1467,40 +1445,114 @@ class AcListV2 {
1467
1445
  this.sortColumn = column.name;
1468
1446
  this.sortDirection = 'ASC';
1469
1447
  }
1448
+ if (this.onSortEmitter) {
1449
+ const sortData = this.sortDirection === 'NONE'
1450
+ ? { sortField: undefined, sortDir: undefined }
1451
+ : { sortField: column.sortField || column.name, sortDir: this.sortDirection };
1452
+ this.onSortEmitter.emit(sortData);
1453
+ }
1470
1454
  }
1471
- getSortedList() {
1472
- if (this.sortDirection === 'NONE' || !this.sortColumn)
1473
- return this.list;
1474
- return [...this.list].sort((a, b) => {
1475
- const valA = a[this.sortColumn];
1476
- const valB = b[this.sortColumn];
1477
- if (valA == null)
1478
- return 1;
1479
- if (valB == null)
1480
- return -1;
1481
- if (valA > valB)
1482
- return this.sortDirection === 'ASC' ? 1 : -1;
1483
- if (valA < valB)
1484
- return this.sortDirection === 'ASC' ? -1 : 1;
1485
- return 0;
1455
+ get shouldUseVirtualScroll() {
1456
+ if (!this.enableVirtualScroll || this.subList) {
1457
+ return false;
1458
+ }
1459
+ return true;
1460
+ }
1461
+ registerSubList(subList) {
1462
+ this.subList = subList;
1463
+ }
1464
+ async renderSubList(position) {
1465
+ if (!this.subList)
1466
+ return;
1467
+ const originalRow = this.list[position];
1468
+ if (!originalRow)
1469
+ return;
1470
+ this.list.forEach((listRow, index) => {
1471
+ if (index !== position && listRow.showSub) {
1472
+ listRow.showSub = false;
1473
+ }
1486
1474
  });
1475
+ originalRow.showSub = !originalRow.showSub;
1476
+ if (originalRow.showSub) {
1477
+ await this.subList.triggerOnOpen({ $row: originalRow, $position: position });
1478
+ }
1479
+ this.cdr.detectChanges();
1487
1480
  }
1488
- get shouldUseVirtualScroll() {
1489
- return this.getSortedList().length > 20;
1481
+ isRowExpanded(index) {
1482
+ const row = this.list[index];
1483
+ return row && row.showSub === true;
1490
1484
  }
1491
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListV2, deps: [], target: i0.ɵɵFactoryTarget.Component });
1492
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcListV2, isStandalone: true, selector: "ac-list-v2", inputs: { list: "list", itemSize: "itemSize" }, queries: [{ propertyName: "columns", predicate: AcListV2Column }], ngImport: i0, template: "<div class=\"ac-list-v2-container\">\n <table class=\"ac-list-v2-table\">\n <thead>\n <tr>\n <th *ngFor=\"let col of columnsArr\"\n [style.text-align]=\"col.alignColumn\"\n [class.left]=\"col.alignColumn === 'left'\"\n [class.center]=\"col.alignColumn === 'center'\"\n [class.right]=\"col.alignColumn === 'right'\"\n (click)=\"onSort(col)\"\n [class.sortable]=\"col.sortable\">\n {{ col.label || col.name }}\n <span *ngIf=\"col.sortable\">\n <ng-container [ngSwitch]=\"sortColumn === col.name ? sortDirection : 'NONE'\">\n <span *ngSwitchCase=\"'ASC'\">\u25B2</span>\n <span *ngSwitchCase=\"'DESC'\">\u25BC</span>\n <span *ngSwitchDefault>\u21C5</span>\n </ng-container>\n </span>\n </th>\n </tr>\n </thead>\n </table>\n\n <ng-template #cellTemplate let-row=\"row\" let-idxRow=\"idxRow\">\n <ng-container *ngFor=\"let col of columnsArr; let idxCol = index\">\n <td [style.text-align]=\"col.alignRow\"\n [class.left]=\"col.alignRow === 'left'\"\n [class.center]=\"col.alignRow === 'center'\"\n [class.right]=\"col.alignRow === 'right'\">\n <ng-container *ngIf=\"col.contentTpl; else defaultCell\">\n <ng-container *ngTemplateOutlet=\"col.contentTpl; context: { $implicit: row, row: row, idxRow: idxRow, column: col.name, idxCol: idxCol }\"></ng-container>\n </ng-container>\n <ng-template #defaultCell>\n {{ row[col.name] }}\n </ng-template>\n </td>\n </ng-container>\n </ng-template>\n\n <div *ngIf=\"!shouldUseVirtualScroll\" class=\"ac-list-v2-body-container\">\n <table class=\"ac-list-v2-table\">\n <tbody>\n <tr *ngFor=\"let row of getSortedList(); let idxRow = index\">\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: {row: row, idxRow: idxRow}\"></ng-container>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div *ngIf=\"shouldUseVirtualScroll\" class=\"ac-list-v2-body-container-virtual-scroll\">\n <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" class=\"ac-list-v2-viewport\">\n <table class=\"ac-list-v2-table ac-list-v2-body\">\n <tbody>\n <tr *cdkVirtualFor=\"let row of getSortedList(); let idxRow = index\">\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: {row: row, idxRow: idxRow}\"></ng-container>\n </tr>\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n </div>\n</div>\n", styles: [".ac-list-v2-container{border-radius:5px;overflow:hidden;width:100%}.ac-list-v2-body-container{position:relative;width:100%}.ac-list-v2-body-container-virtual-scroll{position:relative}.ac-list-v2-viewport{height:400px;width:100%}.ac-list-v2-body thead{display:none}.ac-list-v2-table{width:100%;border-collapse:collapse;border-spacing:0;font-family:inherit;table-layout:fixed}.ac-list-v2-table thead tr{background-color:var(--primary-color, #0747a6)}.ac-list-v2-table th,.ac-list-v2-table td{padding:4px 14px;border:none;font-weight:400;background:none;white-space:nowrap;vertical-align:middle;box-sizing:border-box;margin:0}.ac-list-v2-table tr{height:25px}.ac-list-v2-table th{background-color:var(--primary-color, #0747a6);color:#fff;font-weight:500;position:sticky;top:0;text-align:left;border:none;margin:0}.ac-list-v2-table th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.ac-list-v2-table th.left{text-align:left}.ac-list-v2-table th.center{text-align:center;vertical-align:middle}.ac-list-v2-table th.right{text-align:right}.ac-list-v2-table th:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.ac-list-v2-table th:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}.ac-list-v2-table td{color:var(--font-color, black)}.ac-list-v2-table td.left{text-align:left}.ac-list-v2-table td.center{text-align:center;vertical-align:middle;display:flex;align-items:center;justify-content:center;height:28px;padding:0}.ac-list-v2-table td.right{text-align:right}.ac-list-v2-table td:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.ac-list-v2-table td:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}.ac-list-v2-table td *{color:inherit}.ac-list-v2-table tbody tr:nth-child(2n){background-color:var(--list-item-even-background-color, #e1e1e1)}.ac-list-v2-table tbody tr:nth-child(odd){background-color:var(--background-color, #f5f5f5)}.ac-list-v2-table tbody tr:hover{background-color:var(--list-item-hover-background-color, #cacaca)}.ac-list-v2-table tbody tr:focus{background-color:var(--list-item-focus-background-color, rgba(7, 71, 166, .3137254902))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
1485
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcList, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1486
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcList, isStandalone: true, selector: "ac-list", inputs: { list: "list", itemSize: "itemSize", enableVirtualScroll: "enableVirtualScroll" }, outputs: { onSortEmitter: "onSortEmitter" }, queries: [{ propertyName: "columns", predicate: AcListColumn }], ngImport: i0, template: "<div class=\"ac-list\">\n <div *ngIf=\"!shouldUseVirtualScroll\">\n <table class=\"ac-list-table\">\n <thead class=\"ac-list-table-thead\">\n <tr class=\"ac-list-table-thead-tr\">\n <th class=\"ac-list-table-thead-tr-th\"\n *ngFor=\"let col of columnsArr\"\n attr.style=\"width:{{col.width}}px; min-width:{{col.minWidth}}px; max-width:{{col.maxWidth}}px;\" \n [style.text-align]=\"col.alignColumn\"\n [class.wrap]=\"col.wrap\"\n (click)=\"onSort(col)\"\n [class.sortable]=\"col.sortable\">\n <div class=\"ac-list-column-header\">\n {{ col.label || col.name }}\n <span *ngIf=\"col.sortable\" class=\"sortable-icon\">\n <ng-container [ngSwitch]=\"sortColumn === col.name ? sortDirection : 'NONE'\">\n <span *ngSwitchCase=\"'ASC'\">\u25B2</span>\n <span *ngSwitchCase=\"'DESC'\">\u25BC</span>\n <span *ngSwitchDefault>\u21C5</span>\n </ng-container>\n </span>\n </div>\n </th>\n </tr>\n </thead>\n <tbody class=\"ac-list-table-tbody\">\n <ng-container *ngFor=\"let row of list; let idxRow = index\">\n <tr class=\"ac-list-table-tbody-tr\" tabindex=\"0\">\n <ng-container *ngFor=\"let col of columnsArr; let idxCol = index\">\n <td class=\"ac-list-table-tbody-tr-td\"\n [style.text-align]=\"col.alignRow\"\n [class.wrap]=\"col.wrap\"\n [class.ellipsis]=\"col.ellipsis\">\n <div attr.style=\"width:{{col.width}}px; min-width:{{col.minWidth}}px; max-width:{{col.maxWidth}}px;\">\n <ng-container *ngIf=\"col.contentTpl; else defaultCell\">\n <ng-container *ngTemplateOutlet=\"col.contentTpl; context: { $implicit: row, row: row, idxRow: idxRow, column: col.name, idxCol: idxCol }\"></ng-container>\n </ng-container>\n <ng-template #defaultCell>\n {{ row[col.name] }}\n </ng-template>\n </div>\n </td>\n </ng-container>\n </tr>\n <tr *ngIf=\"isRowExpanded(idxRow)\" class=\"sub-list-row\">\n <td [attr.colspan]=\"columnsArr.length\" class=\"ac-list-sub-container\">\n <div class=\"ac-list-sub-content\">\n <ng-content select=\"ac-list-sub\"></ng-content>\n </div>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n </div>\n\n <div *ngIf=\"shouldUseVirtualScroll\" class=\"ac-list-virtual-scroll\">\n <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" class=\"ac-list-viewport\">\n <table class=\"ac-list-table\">\n <thead class=\"ac-list-table-thead\">\n <tr class=\"ac-list-table-thead-tr\">\n <th class=\"ac-list-table-thead-tr-th\"\n *ngFor=\"let col of columnsArr\"\n attr.style=\"width:{{col.width}}px;\" \n [style.text-align]=\"col.alignColumn\"\n [class.wrap]=\"false\"\n (click)=\"onSort(col)\"\n [class.sortable]=\"col.sortable\">\n <div class=\"ac-list-column-header\">\n {{ col.label || col.name }}\n <span *ngIf=\"col.sortable\">\n <ng-container [ngSwitch]=\"sortColumn === col.name ? sortDirection : 'NONE'\">\n <span *ngSwitchCase=\"'ASC'\">\u25B2</span>\n <span *ngSwitchCase=\"'DESC'\">\u25BC</span>\n <span *ngSwitchDefault>\u21C5</span>\n </ng-container>\n </span>\n </div>\n </th>\n </tr>\n </thead>\n <tbody class=\"ac-list-table-tbody\">\n <ng-container *cdkVirtualFor=\"let row of list; let idxRow = index\">\n <tr class=\"ac-list-table-tbody-tr\" tabindex=\"0\">\n <ng-container *ngFor=\"let col of columnsArr; let idxCol = index\">\n <td class=\"ac-list-table-tbody-tr-td\"\n [style.text-align]=\"col.alignRow\"\n [class.wrap]=\"false\"\n [class.ellipsis]=\"true\">\n <ng-container *ngIf=\"col.contentTpl; else defaultCell\">\n <ng-container *ngTemplateOutlet=\"col.contentTpl; context: { $implicit: row, row: row, idxRow: idxRow, column: col.name, idxCol: idxCol }\"></ng-container>\n </ng-container>\n <ng-template #defaultCell>\n {{ row[col.name] }}\n </ng-template>\n </td>\n </ng-container>\n </tr>\n </ng-container>\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n </div>\n\n <!-- <div class=\"ac-list-body\" *ngIf=\"!(columnsArr.length > 0 && list && list.length > 0)\">\n <div class=\"ac-list-body-container\">\n <ng-content></ng-content>\n </div>\n </div> -->\n</div>\n", styles: [".ac-list{max-height:100%;overflow:auto}.ac-list .ac-list-table{max-height:100%;width:100%;border-collapse:separate;border-spacing:0;overflow:visible}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr{background-color:var(--primary-color, #0747a6)}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th{font-weight:500;font-size:14px;color:#fff;padding-left:10px}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th:first-child{padding-left:5px;border-top-left-radius:5px;border-bottom-left-radius:5px}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th:last-child{padding-right:5px;border-top-right-radius:5px;border-bottom-right-radius:5px}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th .ac-list-column-header{display:flex;align-items:center;box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th .ac-list-column-header .sortable-icon{margin-left:2px;cursor:pointer;-webkit-user-select:none;user-select:none}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr{outline:none}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr:nth-child(2n){background:var(--list-item-even-background-color, #e1e1e1)}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr:hover{background:var(--list-item-hover-background-color, #cacaca)}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr:focus{background:var(--list-item-focus-background-color, rgba(7, 71, 166, .3137254902))}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr .ac-list-table-tbody-tr-td{color:var(--font-color, black);padding-left:10px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:top}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr .ac-list-table-tbody-tr-td:first-child{padding-left:5px}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr .ac-list-table-tbody-tr-td:last-child{padding-right:5px}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr .ac-list-table-tbody-tr-td.wrap{white-space:normal;word-wrap:normal;word-break:normal;-webkit-hyphens:none;hyphens:none}.ac-list .ac-list-virtual-scroll{position:relative}.ac-list .ac-list-virtual-scroll .ac-list-viewport{height:500px;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
1493
1487
  }
1494
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListV2, decorators: [{
1488
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcList, decorators: [{
1495
1489
  type: Component,
1496
- args: [{ selector: 'ac-list-v2', standalone: true, imports: [CommonModule, ScrollingModule], template: "<div class=\"ac-list-v2-container\">\n <table class=\"ac-list-v2-table\">\n <thead>\n <tr>\n <th *ngFor=\"let col of columnsArr\"\n [style.text-align]=\"col.alignColumn\"\n [class.left]=\"col.alignColumn === 'left'\"\n [class.center]=\"col.alignColumn === 'center'\"\n [class.right]=\"col.alignColumn === 'right'\"\n (click)=\"onSort(col)\"\n [class.sortable]=\"col.sortable\">\n {{ col.label || col.name }}\n <span *ngIf=\"col.sortable\">\n <ng-container [ngSwitch]=\"sortColumn === col.name ? sortDirection : 'NONE'\">\n <span *ngSwitchCase=\"'ASC'\">\u25B2</span>\n <span *ngSwitchCase=\"'DESC'\">\u25BC</span>\n <span *ngSwitchDefault>\u21C5</span>\n </ng-container>\n </span>\n </th>\n </tr>\n </thead>\n </table>\n\n <ng-template #cellTemplate let-row=\"row\" let-idxRow=\"idxRow\">\n <ng-container *ngFor=\"let col of columnsArr; let idxCol = index\">\n <td [style.text-align]=\"col.alignRow\"\n [class.left]=\"col.alignRow === 'left'\"\n [class.center]=\"col.alignRow === 'center'\"\n [class.right]=\"col.alignRow === 'right'\">\n <ng-container *ngIf=\"col.contentTpl; else defaultCell\">\n <ng-container *ngTemplateOutlet=\"col.contentTpl; context: { $implicit: row, row: row, idxRow: idxRow, column: col.name, idxCol: idxCol }\"></ng-container>\n </ng-container>\n <ng-template #defaultCell>\n {{ row[col.name] }}\n </ng-template>\n </td>\n </ng-container>\n </ng-template>\n\n <div *ngIf=\"!shouldUseVirtualScroll\" class=\"ac-list-v2-body-container\">\n <table class=\"ac-list-v2-table\">\n <tbody>\n <tr *ngFor=\"let row of getSortedList(); let idxRow = index\">\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: {row: row, idxRow: idxRow}\"></ng-container>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div *ngIf=\"shouldUseVirtualScroll\" class=\"ac-list-v2-body-container-virtual-scroll\">\n <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" class=\"ac-list-v2-viewport\">\n <table class=\"ac-list-v2-table ac-list-v2-body\">\n <tbody>\n <tr *cdkVirtualFor=\"let row of getSortedList(); let idxRow = index\">\n <ng-container *ngTemplateOutlet=\"cellTemplate; context: {row: row, idxRow: idxRow}\"></ng-container>\n </tr>\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n </div>\n</div>\n", styles: [".ac-list-v2-container{border-radius:5px;overflow:hidden;width:100%}.ac-list-v2-body-container{position:relative;width:100%}.ac-list-v2-body-container-virtual-scroll{position:relative}.ac-list-v2-viewport{height:400px;width:100%}.ac-list-v2-body thead{display:none}.ac-list-v2-table{width:100%;border-collapse:collapse;border-spacing:0;font-family:inherit;table-layout:fixed}.ac-list-v2-table thead tr{background-color:var(--primary-color, #0747a6)}.ac-list-v2-table th,.ac-list-v2-table td{padding:4px 14px;border:none;font-weight:400;background:none;white-space:nowrap;vertical-align:middle;box-sizing:border-box;margin:0}.ac-list-v2-table tr{height:25px}.ac-list-v2-table th{background-color:var(--primary-color, #0747a6);color:#fff;font-weight:500;position:sticky;top:0;text-align:left;border:none;margin:0}.ac-list-v2-table th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.ac-list-v2-table th.left{text-align:left}.ac-list-v2-table th.center{text-align:center;vertical-align:middle}.ac-list-v2-table th.right{text-align:right}.ac-list-v2-table th:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.ac-list-v2-table th:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}.ac-list-v2-table td{color:var(--font-color, black)}.ac-list-v2-table td.left{text-align:left}.ac-list-v2-table td.center{text-align:center;vertical-align:middle;display:flex;align-items:center;justify-content:center;height:28px;padding:0}.ac-list-v2-table td.right{text-align:right}.ac-list-v2-table td:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.ac-list-v2-table td:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}.ac-list-v2-table td *{color:inherit}.ac-list-v2-table tbody tr:nth-child(2n){background-color:var(--list-item-even-background-color, #e1e1e1)}.ac-list-v2-table tbody tr:nth-child(odd){background-color:var(--background-color, #f5f5f5)}.ac-list-v2-table tbody tr:hover{background-color:var(--list-item-hover-background-color, #cacaca)}.ac-list-v2-table tbody tr:focus{background-color:var(--list-item-focus-background-color, rgba(7, 71, 166, .3137254902))}\n"] }]
1497
- }], propDecorators: { list: [{
1490
+ args: [{ selector: 'ac-list', standalone: true, imports: [CommonModule, ScrollingModule], template: "<div class=\"ac-list\">\n <div *ngIf=\"!shouldUseVirtualScroll\">\n <table class=\"ac-list-table\">\n <thead class=\"ac-list-table-thead\">\n <tr class=\"ac-list-table-thead-tr\">\n <th class=\"ac-list-table-thead-tr-th\"\n *ngFor=\"let col of columnsArr\"\n attr.style=\"width:{{col.width}}px; min-width:{{col.minWidth}}px; max-width:{{col.maxWidth}}px;\" \n [style.text-align]=\"col.alignColumn\"\n [class.wrap]=\"col.wrap\"\n (click)=\"onSort(col)\"\n [class.sortable]=\"col.sortable\">\n <div class=\"ac-list-column-header\">\n {{ col.label || col.name }}\n <span *ngIf=\"col.sortable\" class=\"sortable-icon\">\n <ng-container [ngSwitch]=\"sortColumn === col.name ? sortDirection : 'NONE'\">\n <span *ngSwitchCase=\"'ASC'\">\u25B2</span>\n <span *ngSwitchCase=\"'DESC'\">\u25BC</span>\n <span *ngSwitchDefault>\u21C5</span>\n </ng-container>\n </span>\n </div>\n </th>\n </tr>\n </thead>\n <tbody class=\"ac-list-table-tbody\">\n <ng-container *ngFor=\"let row of list; let idxRow = index\">\n <tr class=\"ac-list-table-tbody-tr\" tabindex=\"0\">\n <ng-container *ngFor=\"let col of columnsArr; let idxCol = index\">\n <td class=\"ac-list-table-tbody-tr-td\"\n [style.text-align]=\"col.alignRow\"\n [class.wrap]=\"col.wrap\"\n [class.ellipsis]=\"col.ellipsis\">\n <div attr.style=\"width:{{col.width}}px; min-width:{{col.minWidth}}px; max-width:{{col.maxWidth}}px;\">\n <ng-container *ngIf=\"col.contentTpl; else defaultCell\">\n <ng-container *ngTemplateOutlet=\"col.contentTpl; context: { $implicit: row, row: row, idxRow: idxRow, column: col.name, idxCol: idxCol }\"></ng-container>\n </ng-container>\n <ng-template #defaultCell>\n {{ row[col.name] }}\n </ng-template>\n </div>\n </td>\n </ng-container>\n </tr>\n <tr *ngIf=\"isRowExpanded(idxRow)\" class=\"sub-list-row\">\n <td [attr.colspan]=\"columnsArr.length\" class=\"ac-list-sub-container\">\n <div class=\"ac-list-sub-content\">\n <ng-content select=\"ac-list-sub\"></ng-content>\n </div>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n </div>\n\n <div *ngIf=\"shouldUseVirtualScroll\" class=\"ac-list-virtual-scroll\">\n <cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" class=\"ac-list-viewport\">\n <table class=\"ac-list-table\">\n <thead class=\"ac-list-table-thead\">\n <tr class=\"ac-list-table-thead-tr\">\n <th class=\"ac-list-table-thead-tr-th\"\n *ngFor=\"let col of columnsArr\"\n attr.style=\"width:{{col.width}}px;\" \n [style.text-align]=\"col.alignColumn\"\n [class.wrap]=\"false\"\n (click)=\"onSort(col)\"\n [class.sortable]=\"col.sortable\">\n <div class=\"ac-list-column-header\">\n {{ col.label || col.name }}\n <span *ngIf=\"col.sortable\">\n <ng-container [ngSwitch]=\"sortColumn === col.name ? sortDirection : 'NONE'\">\n <span *ngSwitchCase=\"'ASC'\">\u25B2</span>\n <span *ngSwitchCase=\"'DESC'\">\u25BC</span>\n <span *ngSwitchDefault>\u21C5</span>\n </ng-container>\n </span>\n </div>\n </th>\n </tr>\n </thead>\n <tbody class=\"ac-list-table-tbody\">\n <ng-container *cdkVirtualFor=\"let row of list; let idxRow = index\">\n <tr class=\"ac-list-table-tbody-tr\" tabindex=\"0\">\n <ng-container *ngFor=\"let col of columnsArr; let idxCol = index\">\n <td class=\"ac-list-table-tbody-tr-td\"\n [style.text-align]=\"col.alignRow\"\n [class.wrap]=\"false\"\n [class.ellipsis]=\"true\">\n <ng-container *ngIf=\"col.contentTpl; else defaultCell\">\n <ng-container *ngTemplateOutlet=\"col.contentTpl; context: { $implicit: row, row: row, idxRow: idxRow, column: col.name, idxCol: idxCol }\"></ng-container>\n </ng-container>\n <ng-template #defaultCell>\n {{ row[col.name] }}\n </ng-template>\n </td>\n </ng-container>\n </tr>\n </ng-container>\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n </div>\n\n <!-- <div class=\"ac-list-body\" *ngIf=\"!(columnsArr.length > 0 && list && list.length > 0)\">\n <div class=\"ac-list-body-container\">\n <ng-content></ng-content>\n </div>\n </div> -->\n</div>\n", styles: [".ac-list{max-height:100%;overflow:auto}.ac-list .ac-list-table{max-height:100%;width:100%;border-collapse:separate;border-spacing:0;overflow:visible}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr{background-color:var(--primary-color, #0747a6)}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th{font-weight:500;font-size:14px;color:#fff;padding-left:10px}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th:first-child{padding-left:5px;border-top-left-radius:5px;border-bottom-left-radius:5px}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th:last-child{padding-right:5px;border-top-right-radius:5px;border-bottom-right-radius:5px}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th .ac-list-column-header{display:flex;align-items:center;box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ac-list .ac-list-table .ac-list-table-thead .ac-list-table-thead-tr .ac-list-table-thead-tr-th .ac-list-column-header .sortable-icon{margin-left:2px;cursor:pointer;-webkit-user-select:none;user-select:none}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr{outline:none}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr:nth-child(2n){background:var(--list-item-even-background-color, #e1e1e1)}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr:hover{background:var(--list-item-hover-background-color, #cacaca)}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr:focus{background:var(--list-item-focus-background-color, rgba(7, 71, 166, .3137254902))}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr .ac-list-table-tbody-tr-td{color:var(--font-color, black);padding-left:10px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:top}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr .ac-list-table-tbody-tr-td:first-child{padding-left:5px}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr .ac-list-table-tbody-tr-td:last-child{padding-right:5px}.ac-list .ac-list-table .ac-list-table-tbody .ac-list-table-tbody-tr .ac-list-table-tbody-tr-td.wrap{white-space:normal;word-wrap:normal;word-break:normal;-webkit-hyphens:none;hyphens:none}.ac-list .ac-list-virtual-scroll{position:relative}.ac-list .ac-list-virtual-scroll .ac-list-viewport{height:500px;width:100%}\n"] }]
1491
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { list: [{
1498
1492
  type: Input
1499
1493
  }], itemSize: [{
1500
1494
  type: Input
1495
+ }], enableVirtualScroll: [{
1496
+ type: Input
1501
1497
  }], columns: [{
1502
1498
  type: ContentChildren,
1503
- args: [AcListV2Column]
1499
+ args: [AcListColumn]
1500
+ }], onSortEmitter: [{
1501
+ type: Output
1502
+ }] } });
1503
+
1504
+ class AcListSub {
1505
+ elementRef;
1506
+ list;
1507
+ name = '';
1508
+ alignSub = 'left';
1509
+ alignRow = 'left';
1510
+ hidden = false;
1511
+ onOpen = new EventEmitter();
1512
+ subEl;
1513
+ constructor(elementRef, list) {
1514
+ this.elementRef = elementRef;
1515
+ this.list = list;
1516
+ }
1517
+ ngOnInit() {
1518
+ this.__initializeSubList();
1519
+ }
1520
+ __initializeSubList() {
1521
+ this.subEl = this.elementRef.nativeElement;
1522
+ setTimeout(() => {
1523
+ this.list.registerSubList(this);
1524
+ }, 0);
1525
+ }
1526
+ get element() {
1527
+ return this.elementRef.nativeElement;
1528
+ }
1529
+ async triggerOnOpen(data) {
1530
+ this.onOpen.emit(data);
1531
+ }
1532
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListSub, deps: [{ token: i0.ElementRef }, { token: forwardRef(() => AcList) }], target: i0.ɵɵFactoryTarget.Component });
1533
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: AcListSub, isStandalone: true, selector: "ac-list-sub", inputs: { name: "name", alignSub: "alignSub", alignRow: "alignRow", hidden: "hidden" }, outputs: { onOpen: "onOpen" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
1534
+ }
1535
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListSub, decorators: [{
1536
+ type: Component,
1537
+ args: [{
1538
+ selector: 'ac-list-sub',
1539
+ standalone: true,
1540
+ imports: [CommonModule],
1541
+ template: `<ng-content></ng-content>`,
1542
+ }]
1543
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: AcList, decorators: [{
1544
+ type: Inject,
1545
+ args: [forwardRef(() => AcList)]
1546
+ }] }], propDecorators: { name: [{
1547
+ type: Input
1548
+ }], alignSub: [{
1549
+ type: Input
1550
+ }], alignRow: [{
1551
+ type: Input
1552
+ }], hidden: [{
1553
+ type: Input
1554
+ }], onOpen: [{
1555
+ type: Output
1504
1556
  }] } });
1505
1557
 
1506
1558
  class ComponentsModule {
@@ -1527,9 +1579,9 @@ class ComponentsModule {
1527
1579
  AcProgressBar,
1528
1580
  AcSideMenu,
1529
1581
  AcList,
1530
- AcListV2,
1531
- AcListV2Column,
1532
- AcListV2Content,
1582
+ AcListColumn,
1583
+ AcListContent,
1584
+ AcListSub,
1533
1585
  ScrollingModule], exports: [AcButton,
1534
1586
  AcSwitch,
1535
1587
  AcCheckBox,
@@ -1551,9 +1603,9 @@ class ComponentsModule {
1551
1603
  AcProgressBar,
1552
1604
  AcSideMenu,
1553
1605
  AcList,
1554
- AcListV2,
1555
- AcListV2Column,
1556
- AcListV2Content] });
1606
+ AcListColumn,
1607
+ AcListContent,
1608
+ AcListSub] });
1557
1609
  static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ComponentsModule, imports: [CommonModule,
1558
1610
  AcButton,
1559
1611
  AcSwitch,
@@ -1576,7 +1628,7 @@ class ComponentsModule {
1576
1628
  AcProgressBar,
1577
1629
  AcSideMenu,
1578
1630
  AcList,
1579
- AcListV2,
1631
+ AcListSub,
1580
1632
  ScrollingModule] });
1581
1633
  }
1582
1634
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ComponentsModule, decorators: [{
@@ -1606,9 +1658,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
1606
1658
  AcProgressBar,
1607
1659
  AcSideMenu,
1608
1660
  AcList,
1609
- AcListV2,
1610
- AcListV2Column,
1611
- AcListV2Content,
1661
+ AcListColumn,
1662
+ AcListContent,
1663
+ AcListSub,
1612
1664
  ScrollingModule,
1613
1665
  ],
1614
1666
  exports: [
@@ -1633,9 +1685,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
1633
1685
  AcProgressBar,
1634
1686
  AcSideMenu,
1635
1687
  AcList,
1636
- AcListV2,
1637
- AcListV2Column,
1638
- AcListV2Content
1688
+ AcListColumn,
1689
+ AcListContent,
1690
+ AcListSub
1639
1691
  ]
1640
1692
  }]
1641
1693
  }] });
@@ -1768,5 +1820,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
1768
1820
  * Generated bundle index. Do not edit.
1769
1821
  */
1770
1822
 
1771
- export { AcActionLink, AcButton, AcCheckBox, AcInputDate, AcInputDateTime, AcInputDocumentNumber, AcInputFile, AcInputMoney, AcInputNumber, AcInputPassword, AcInputPercentage, AcInputPhoneNumber, AcInputText, AcInputTime, AcList, AcListV2, AcListV2Column, AcListV2Content, AcNotification, AcPagination, AcProgressBar, AcSelect, AcSideMenu, AcSwitch, ComponentsModule };
1823
+ export { AcActionLink, AcButton, AcCheckBox, AcInputDate, AcInputDateTime, AcInputDocumentNumber, AcInputFile, AcInputMoney, AcInputNumber, AcInputPassword, AcInputPercentage, AcInputPhoneNumber, AcInputText, AcInputTime, AcList, AcListColumn, AcListContent, AcListSub, AcNotification, AcPagination, AcProgressBar, AcSelect, AcSideMenu, AcSwitch, ComponentsModule };
1772
1824
  //# sourceMappingURL=sgcloud-sgsistemas-angular-components.mjs.map