@sgcloud-sgsistemas/angular-components 0.0.8 → 0.0.10

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';
@@ -379,8 +379,12 @@ class AcInputDateTimeDefault {
379
379
  }
380
380
  }
381
381
  onChangeDate(event) {
382
- this.date = event;
383
- this.updateNgModel();
382
+ const dateObj = new Date(event);
383
+ const year = dateObj.getFullYear();
384
+ if (!isNaN(dateObj.getTime()) && year > 999) {
385
+ this.date = event;
386
+ this.updateNgModel();
387
+ }
384
388
  }
385
389
  onChangeTime(event) {
386
390
  this.time = event;
@@ -393,7 +397,11 @@ class AcInputDateTimeDefault {
393
397
  this.inputSubject.next(this.model);
394
398
  }
395
399
  else if (this.date) {
396
- const dateOnly = new Date(this.date);
400
+ const dateParts = this.date.split('-');
401
+ const year = parseInt(dateParts[0]);
402
+ const month = parseInt(dateParts[1]) - 1; // Mês é base 0 no JavaScript
403
+ const day = parseInt(dateParts[2]);
404
+ const dateOnly = new Date(year, month, day);
397
405
  this.model = dateOnly;
398
406
  this.inputSubject.next(this.model);
399
407
  }
@@ -1350,85 +1358,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
1350
1358
  type: Input
1351
1359
  }] } });
1352
1360
 
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 {
1361
+ class AcListContent {
1403
1362
  template;
1404
1363
  constructor(template) {
1405
1364
  this.template = template;
1406
1365
  }
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 });
1366
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListContent, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
1367
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: AcListContent, isStandalone: true, selector: "[ac-list-content]", ngImport: i0 });
1409
1368
  }
1410
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListV2Content, decorators: [{
1369
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListContent, decorators: [{
1411
1370
  type: Directive,
1412
1371
  args: [{
1413
- selector: '[ac-list-v2-content]',
1372
+ selector: '[ac-list-content]',
1414
1373
  standalone: true
1415
1374
  }]
1416
1375
  }], ctorParameters: () => [{ type: i0.TemplateRef }] });
1417
1376
 
1418
- class AcListV2Column {
1377
+ class AcListColumn {
1419
1378
  name;
1420
1379
  label;
1421
1380
  sortable = false;
1381
+ sortField;
1422
1382
  alignColumn = 'left';
1423
1383
  alignRow = 'left';
1384
+ width;
1385
+ minWidth;
1386
+ maxWidth;
1387
+ wrap = false;
1388
+ ellipsis = false;
1424
1389
  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 });
1390
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListColumn, deps: [], target: i0.ɵɵFactoryTarget.Component });
1391
+ 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
1392
  }
1428
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListV2Column, decorators: [{
1393
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListColumn, decorators: [{
1429
1394
  type: Component,
1430
1395
  args: [{
1431
- selector: 'ac-list-v2-column',
1396
+ selector: 'ac-list-column',
1432
1397
  standalone: true,
1433
1398
  template: '',
1434
1399
  }]
@@ -1438,22 +1403,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
1438
1403
  type: Input
1439
1404
  }], sortable: [{
1440
1405
  type: Input
1406
+ }], sortField: [{
1407
+ type: Input
1441
1408
  }], alignColumn: [{
1442
1409
  type: Input
1443
1410
  }], alignRow: [{
1444
1411
  type: Input
1412
+ }], width: [{
1413
+ type: Input
1414
+ }], minWidth: [{
1415
+ type: Input
1416
+ }], maxWidth: [{
1417
+ type: Input
1418
+ }], wrap: [{
1419
+ type: Input
1420
+ }], ellipsis: [{
1421
+ type: Input
1445
1422
  }], contentTpl: [{
1446
1423
  type: ContentChild,
1447
- args: [AcListV2Content, { read: TemplateRef }]
1424
+ args: [AcListContent, { read: TemplateRef }]
1448
1425
  }] } });
1449
1426
 
1450
- class AcListV2 {
1427
+ class AcList {
1428
+ elementRef;
1429
+ cdr;
1451
1430
  list = [];
1452
1431
  itemSize = 25;
1432
+ enableVirtualScroll = false;
1453
1433
  columns;
1434
+ onSortEmitter = new EventEmitter();
1454
1435
  columnsArr = [];
1455
1436
  sortColumn = '';
1456
1437
  sortDirection = 'NONE';
1438
+ subList = null;
1439
+ constructor(elementRef, cdr) {
1440
+ this.elementRef = elementRef;
1441
+ this.cdr = cdr;
1442
+ }
1457
1443
  ngAfterContentInit() {
1458
1444
  this.columnsArr = this.columns.toArray();
1459
1445
  }
@@ -1467,40 +1453,114 @@ class AcListV2 {
1467
1453
  this.sortColumn = column.name;
1468
1454
  this.sortDirection = 'ASC';
1469
1455
  }
1456
+ if (this.onSortEmitter) {
1457
+ const sortData = this.sortDirection === 'NONE'
1458
+ ? { sortField: undefined, sortDir: undefined }
1459
+ : { sortField: column.sortField || column.name, sortDir: this.sortDirection };
1460
+ this.onSortEmitter.emit(sortData);
1461
+ }
1470
1462
  }
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;
1463
+ get shouldUseVirtualScroll() {
1464
+ if (!this.enableVirtualScroll || this.subList) {
1465
+ return false;
1466
+ }
1467
+ return true;
1468
+ }
1469
+ registerSubList(subList) {
1470
+ this.subList = subList;
1471
+ }
1472
+ async renderSubList(position) {
1473
+ if (!this.subList)
1474
+ return;
1475
+ const originalRow = this.list[position];
1476
+ if (!originalRow)
1477
+ return;
1478
+ this.list.forEach((listRow, index) => {
1479
+ if (index !== position && listRow.showSub) {
1480
+ listRow.showSub = false;
1481
+ }
1486
1482
  });
1483
+ originalRow.showSub = !originalRow.showSub;
1484
+ if (originalRow.showSub) {
1485
+ await this.subList.triggerOnOpen({ $row: originalRow, $position: position });
1486
+ }
1487
+ this.cdr.detectChanges();
1487
1488
  }
1488
- get shouldUseVirtualScroll() {
1489
- return this.getSortedList().length > 20;
1489
+ isRowExpanded(index) {
1490
+ const row = this.list[index];
1491
+ return row && row.showSub === true;
1490
1492
  }
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"] }] });
1493
+ 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 });
1494
+ 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
1495
  }
1494
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListV2, decorators: [{
1496
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcList, decorators: [{
1495
1497
  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: [{
1498
+ 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"] }]
1499
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { list: [{
1498
1500
  type: Input
1499
1501
  }], itemSize: [{
1500
1502
  type: Input
1503
+ }], enableVirtualScroll: [{
1504
+ type: Input
1501
1505
  }], columns: [{
1502
1506
  type: ContentChildren,
1503
- args: [AcListV2Column]
1507
+ args: [AcListColumn]
1508
+ }], onSortEmitter: [{
1509
+ type: Output
1510
+ }] } });
1511
+
1512
+ class AcListSub {
1513
+ elementRef;
1514
+ list;
1515
+ name = '';
1516
+ alignSub = 'left';
1517
+ alignRow = 'left';
1518
+ hidden = false;
1519
+ onOpen = new EventEmitter();
1520
+ subEl;
1521
+ constructor(elementRef, list) {
1522
+ this.elementRef = elementRef;
1523
+ this.list = list;
1524
+ }
1525
+ ngOnInit() {
1526
+ this.__initializeSubList();
1527
+ }
1528
+ __initializeSubList() {
1529
+ this.subEl = this.elementRef.nativeElement;
1530
+ setTimeout(() => {
1531
+ this.list.registerSubList(this);
1532
+ }, 0);
1533
+ }
1534
+ get element() {
1535
+ return this.elementRef.nativeElement;
1536
+ }
1537
+ async triggerOnOpen(data) {
1538
+ this.onOpen.emit(data);
1539
+ }
1540
+ 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 });
1541
+ 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 }] });
1542
+ }
1543
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListSub, decorators: [{
1544
+ type: Component,
1545
+ args: [{
1546
+ selector: 'ac-list-sub',
1547
+ standalone: true,
1548
+ imports: [CommonModule],
1549
+ template: `<ng-content></ng-content>`,
1550
+ }]
1551
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: AcList, decorators: [{
1552
+ type: Inject,
1553
+ args: [forwardRef(() => AcList)]
1554
+ }] }], propDecorators: { name: [{
1555
+ type: Input
1556
+ }], alignSub: [{
1557
+ type: Input
1558
+ }], alignRow: [{
1559
+ type: Input
1560
+ }], hidden: [{
1561
+ type: Input
1562
+ }], onOpen: [{
1563
+ type: Output
1504
1564
  }] } });
1505
1565
 
1506
1566
  class ComponentsModule {
@@ -1527,9 +1587,9 @@ class ComponentsModule {
1527
1587
  AcProgressBar,
1528
1588
  AcSideMenu,
1529
1589
  AcList,
1530
- AcListV2,
1531
- AcListV2Column,
1532
- AcListV2Content,
1590
+ AcListColumn,
1591
+ AcListContent,
1592
+ AcListSub,
1533
1593
  ScrollingModule], exports: [AcButton,
1534
1594
  AcSwitch,
1535
1595
  AcCheckBox,
@@ -1551,9 +1611,9 @@ class ComponentsModule {
1551
1611
  AcProgressBar,
1552
1612
  AcSideMenu,
1553
1613
  AcList,
1554
- AcListV2,
1555
- AcListV2Column,
1556
- AcListV2Content] });
1614
+ AcListColumn,
1615
+ AcListContent,
1616
+ AcListSub] });
1557
1617
  static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ComponentsModule, imports: [CommonModule,
1558
1618
  AcButton,
1559
1619
  AcSwitch,
@@ -1576,7 +1636,7 @@ class ComponentsModule {
1576
1636
  AcProgressBar,
1577
1637
  AcSideMenu,
1578
1638
  AcList,
1579
- AcListV2,
1639
+ AcListSub,
1580
1640
  ScrollingModule] });
1581
1641
  }
1582
1642
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ComponentsModule, decorators: [{
@@ -1606,9 +1666,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
1606
1666
  AcProgressBar,
1607
1667
  AcSideMenu,
1608
1668
  AcList,
1609
- AcListV2,
1610
- AcListV2Column,
1611
- AcListV2Content,
1669
+ AcListColumn,
1670
+ AcListContent,
1671
+ AcListSub,
1612
1672
  ScrollingModule,
1613
1673
  ],
1614
1674
  exports: [
@@ -1633,9 +1693,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
1633
1693
  AcProgressBar,
1634
1694
  AcSideMenu,
1635
1695
  AcList,
1636
- AcListV2,
1637
- AcListV2Column,
1638
- AcListV2Content
1696
+ AcListColumn,
1697
+ AcListContent,
1698
+ AcListSub
1639
1699
  ]
1640
1700
  }]
1641
1701
  }] });
@@ -1768,5 +1828,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
1768
1828
  * Generated bundle index. Do not edit.
1769
1829
  */
1770
1830
 
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 };
1831
+ 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
1832
  //# sourceMappingURL=sgcloud-sgsistemas-angular-components.mjs.map