@sgcloud-sgsistemas/angular-components 0.0.7 → 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';
@@ -1229,6 +1229,7 @@ class AcSideMenu {
1229
1229
  routes = {
1230
1230
  title: '',
1231
1231
  icon: '',
1232
+ show: false,
1232
1233
  modulesType: []
1233
1234
  };
1234
1235
  goTo = null;
@@ -1250,7 +1251,10 @@ class AcSideMenu {
1250
1251
  this.elementRef.nativeElement.removeEventListener('mouseleave', this.mouseLeaveDetected);
1251
1252
  }
1252
1253
  setModules() {
1253
- this.modules = this.getModules();
1254
+ this.modules = this.getModules().filter(m => m.show);
1255
+ for (const module of this.modules) {
1256
+ module.modules = module.modules.filter(sm => sm.show);
1257
+ }
1254
1258
  }
1255
1259
  getModules() {
1256
1260
  return this.showModulesNumber
@@ -1259,7 +1263,8 @@ class AcSideMenu {
1259
1263
  title: this.routes.modulesType[this.showModulesNumber - 1].title,
1260
1264
  icon: this.routes.modulesType[this.showModulesNumber - 1].icon,
1261
1265
  path: '',
1262
- modules: []
1266
+ modules: [],
1267
+ show: true
1263
1268
  },
1264
1269
  ...this.routes.modulesType[this.showModulesNumber - 1].modules
1265
1270
  ]
@@ -1268,7 +1273,8 @@ class AcSideMenu {
1268
1273
  title: this.routes.title,
1269
1274
  icon: this.routes.icon,
1270
1275
  path: '',
1271
- modules: []
1276
+ modules: [],
1277
+ show: true
1272
1278
  },
1273
1279
  ...this.routes.modulesType
1274
1280
  ];
@@ -1344,85 +1350,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
1344
1350
  type: Input
1345
1351
  }] } });
1346
1352
 
1347
- class AcList {
1348
- direction = {
1349
- NONE: { icon: "unfold_more", next: "ASC" },
1350
- ASC: { icon: "keyboard_arrow_up", next: "DESC" },
1351
- DESC: { icon: "keyboard_arrow_down", next: "NONE" },
1352
- };
1353
- columns = [];
1354
- list = [];
1355
- rowTemplate;
1356
- sortColumn = '';
1357
- sortDirection = 'NONE';
1358
- constructor() { }
1359
- ngOnInit() { }
1360
- ngOnChanges(changes) { }
1361
- onSortDirection(colIndex) {
1362
- this.sortDirection = this.direction[this.sortDirection].next;
1363
- this.sortColumn = this.columns[colIndex].param;
1364
- }
1365
- getSortDirection(colIndex) {
1366
- if (this.sortColumn === this.columns[colIndex].param) {
1367
- return this.sortDirection;
1368
- }
1369
- return 'NONE';
1370
- }
1371
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcList, deps: [], target: i0.ɵɵFactoryTarget.Component });
1372
- 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:
1373
- // AcCheckBox,
1374
- MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
1375
- }
1376
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcList, decorators: [{
1377
- type: Component,
1378
- args: [{ selector: 'ac-list', imports: [
1379
- CommonModule,
1380
- FormsModule,
1381
- // AcCheckBox,
1382
- MatIconModule
1383
- ], 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"] }]
1384
- }], ctorParameters: () => [], propDecorators: { columns: [{
1385
- type: Input
1386
- }], list: [{
1387
- type: Input
1388
- }], rowTemplate: [{
1389
- type: Input
1390
- }], sortColumn: [{
1391
- type: Input
1392
- }], sortDirection: [{
1393
- type: Input
1394
- }] } });
1395
-
1396
- class AcListV2Content {
1353
+ class AcListContent {
1397
1354
  template;
1398
1355
  constructor(template) {
1399
1356
  this.template = template;
1400
1357
  }
1401
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListV2Content, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
1402
- 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 });
1403
1360
  }
1404
- 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: [{
1405
1362
  type: Directive,
1406
1363
  args: [{
1407
- selector: '[ac-list-v2-content]',
1364
+ selector: '[ac-list-content]',
1408
1365
  standalone: true
1409
1366
  }]
1410
1367
  }], ctorParameters: () => [{ type: i0.TemplateRef }] });
1411
1368
 
1412
- class AcListV2Column {
1369
+ class AcListColumn {
1413
1370
  name;
1414
1371
  label;
1415
1372
  sortable = false;
1373
+ sortField;
1416
1374
  alignColumn = 'left';
1417
1375
  alignRow = 'left';
1376
+ width;
1377
+ minWidth;
1378
+ maxWidth;
1379
+ wrap = false;
1380
+ ellipsis = false;
1418
1381
  contentTpl;
1419
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListV2Column, deps: [], target: i0.ɵɵFactoryTarget.Component });
1420
- 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 });
1421
1384
  }
1422
- 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: [{
1423
1386
  type: Component,
1424
1387
  args: [{
1425
- selector: 'ac-list-v2-column',
1388
+ selector: 'ac-list-column',
1426
1389
  standalone: true,
1427
1390
  template: '',
1428
1391
  }]
@@ -1432,22 +1395,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
1432
1395
  type: Input
1433
1396
  }], sortable: [{
1434
1397
  type: Input
1398
+ }], sortField: [{
1399
+ type: Input
1435
1400
  }], alignColumn: [{
1436
1401
  type: Input
1437
1402
  }], alignRow: [{
1438
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
1439
1414
  }], contentTpl: [{
1440
1415
  type: ContentChild,
1441
- args: [AcListV2Content, { read: TemplateRef }]
1416
+ args: [AcListContent, { read: TemplateRef }]
1442
1417
  }] } });
1443
1418
 
1444
- class AcListV2 {
1419
+ class AcList {
1420
+ elementRef;
1421
+ cdr;
1445
1422
  list = [];
1446
1423
  itemSize = 25;
1424
+ enableVirtualScroll = false;
1447
1425
  columns;
1426
+ onSortEmitter = new EventEmitter();
1448
1427
  columnsArr = [];
1449
1428
  sortColumn = '';
1450
1429
  sortDirection = 'NONE';
1430
+ subList = null;
1431
+ constructor(elementRef, cdr) {
1432
+ this.elementRef = elementRef;
1433
+ this.cdr = cdr;
1434
+ }
1451
1435
  ngAfterContentInit() {
1452
1436
  this.columnsArr = this.columns.toArray();
1453
1437
  }
@@ -1461,40 +1445,114 @@ class AcListV2 {
1461
1445
  this.sortColumn = column.name;
1462
1446
  this.sortDirection = 'ASC';
1463
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
+ }
1464
1454
  }
1465
- getSortedList() {
1466
- if (this.sortDirection === 'NONE' || !this.sortColumn)
1467
- return this.list;
1468
- return [...this.list].sort((a, b) => {
1469
- const valA = a[this.sortColumn];
1470
- const valB = b[this.sortColumn];
1471
- if (valA == null)
1472
- return 1;
1473
- if (valB == null)
1474
- return -1;
1475
- if (valA > valB)
1476
- return this.sortDirection === 'ASC' ? 1 : -1;
1477
- if (valA < valB)
1478
- return this.sortDirection === 'ASC' ? -1 : 1;
1479
- 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
+ }
1480
1474
  });
1475
+ originalRow.showSub = !originalRow.showSub;
1476
+ if (originalRow.showSub) {
1477
+ await this.subList.triggerOnOpen({ $row: originalRow, $position: position });
1478
+ }
1479
+ this.cdr.detectChanges();
1481
1480
  }
1482
- get shouldUseVirtualScroll() {
1483
- return this.getSortedList().length > 20;
1481
+ isRowExpanded(index) {
1482
+ const row = this.list[index];
1483
+ return row && row.showSub === true;
1484
1484
  }
1485
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: AcListV2, deps: [], target: i0.ɵɵFactoryTarget.Component });
1486
- 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"] }] });
1487
1487
  }
1488
- 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: [{
1489
1489
  type: Component,
1490
- 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"] }]
1491
- }], 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: [{
1492
1492
  type: Input
1493
1493
  }], itemSize: [{
1494
1494
  type: Input
1495
+ }], enableVirtualScroll: [{
1496
+ type: Input
1495
1497
  }], columns: [{
1496
1498
  type: ContentChildren,
1497
- 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
1498
1556
  }] } });
1499
1557
 
1500
1558
  class ComponentsModule {
@@ -1521,9 +1579,9 @@ class ComponentsModule {
1521
1579
  AcProgressBar,
1522
1580
  AcSideMenu,
1523
1581
  AcList,
1524
- AcListV2,
1525
- AcListV2Column,
1526
- AcListV2Content,
1582
+ AcListColumn,
1583
+ AcListContent,
1584
+ AcListSub,
1527
1585
  ScrollingModule], exports: [AcButton,
1528
1586
  AcSwitch,
1529
1587
  AcCheckBox,
@@ -1545,9 +1603,9 @@ class ComponentsModule {
1545
1603
  AcProgressBar,
1546
1604
  AcSideMenu,
1547
1605
  AcList,
1548
- AcListV2,
1549
- AcListV2Column,
1550
- AcListV2Content] });
1606
+ AcListColumn,
1607
+ AcListContent,
1608
+ AcListSub] });
1551
1609
  static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ComponentsModule, imports: [CommonModule,
1552
1610
  AcButton,
1553
1611
  AcSwitch,
@@ -1570,7 +1628,7 @@ class ComponentsModule {
1570
1628
  AcProgressBar,
1571
1629
  AcSideMenu,
1572
1630
  AcList,
1573
- AcListV2,
1631
+ AcListSub,
1574
1632
  ScrollingModule] });
1575
1633
  }
1576
1634
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ComponentsModule, decorators: [{
@@ -1600,9 +1658,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
1600
1658
  AcProgressBar,
1601
1659
  AcSideMenu,
1602
1660
  AcList,
1603
- AcListV2,
1604
- AcListV2Column,
1605
- AcListV2Content,
1661
+ AcListColumn,
1662
+ AcListContent,
1663
+ AcListSub,
1606
1664
  ScrollingModule,
1607
1665
  ],
1608
1666
  exports: [
@@ -1627,9 +1685,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
1627
1685
  AcProgressBar,
1628
1686
  AcSideMenu,
1629
1687
  AcList,
1630
- AcListV2,
1631
- AcListV2Column,
1632
- AcListV2Content
1688
+ AcListColumn,
1689
+ AcListContent,
1690
+ AcListSub
1633
1691
  ]
1634
1692
  }]
1635
1693
  }] });
@@ -1762,5 +1820,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
1762
1820
  * Generated bundle index. Do not edit.
1763
1821
  */
1764
1822
 
1765
- 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 };
1766
1824
  //# sourceMappingURL=sgcloud-sgsistemas-angular-components.mjs.map