lib-portal-angular 0.0.34 → 0.0.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/components.module.mjs +20 -14
- package/esm2022/lib/components/custom-pagination/custom-pagination.component.mjs +61 -0
- package/esm2022/lib/components/tables/data-table.component.mjs +173 -0
- package/esm2022/lib/components/tree-node/Itree-node.mjs +2 -0
- package/esm2022/lib/components/tree-node/tree-node.component.mjs +63 -0
- package/esm2022/public-api.mjs +4 -2
- package/fesm2022/lib-portal-angular.mjs +218 -39
- package/fesm2022/lib-portal-angular.mjs.map +1 -1
- package/lib/components/components.module.d.ts +7 -6
- package/lib/components/custom-pagination/custom-pagination.component.d.ts +17 -0
- package/lib/components/tables/data-table.component.d.ts +56 -0
- package/lib/components/tree-node/Itree-node.d.ts +7 -0
- package/lib/components/tree-node/tree-node.component.d.ts +17 -0
- package/package.json +1 -1
- package/public-api.d.ts +3 -1
- package/esm2022/lib/components/tables/bootstrap-table.component.mjs +0 -115
- package/lib/components/tables/bootstrap-table.component.d.ts +0 -33
@@ -9,8 +9,6 @@ import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
|
|
9
9
|
import { of, Subject } from 'rxjs';
|
10
10
|
import * as i3 from '@ng-select/ng-select';
|
11
11
|
import { NgSelectModule } from '@ng-select/ng-select';
|
12
|
-
import * as i3$1 from 'ngx-pagination';
|
13
|
-
import { NgxPaginationModule } from 'ngx-pagination';
|
14
12
|
|
15
13
|
class AlertComponent {
|
16
14
|
constructor() {
|
@@ -694,6 +692,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
694
692
|
type: Input
|
695
693
|
}] } });
|
696
694
|
|
695
|
+
class CustomPaginationComponent {
|
696
|
+
constructor() {
|
697
|
+
this.totalItems = 0;
|
698
|
+
this.itemsPerPage = 10;
|
699
|
+
this.currentPage = 1;
|
700
|
+
this.maxSize = 5; // Número máximo de botões de página visíveis
|
701
|
+
this.pageText = 'Page'; // Texto para "Page"
|
702
|
+
this.ofText = 'of'; // Texto para "of"
|
703
|
+
this.showPageInfo = true; // Mostrar ou esconder a informação da página
|
704
|
+
this.pageChange = new EventEmitter();
|
705
|
+
}
|
706
|
+
get totalPages() {
|
707
|
+
return Math.ceil(this.totalItems / this.itemsPerPage);
|
708
|
+
}
|
709
|
+
changePage(page) {
|
710
|
+
if (page >= 1 && page <= this.totalPages) {
|
711
|
+
this.currentPage = page;
|
712
|
+
this.pageChange.emit(this.currentPage);
|
713
|
+
}
|
714
|
+
}
|
715
|
+
get pages() {
|
716
|
+
const pages = [];
|
717
|
+
const half = Math.floor(this.maxSize / 2);
|
718
|
+
let start = Math.max(this.currentPage - half, 1);
|
719
|
+
let end = start + this.maxSize - 1;
|
720
|
+
if (end > this.totalPages) {
|
721
|
+
end = this.totalPages;
|
722
|
+
start = Math.max(end - this.maxSize + 1, 1);
|
723
|
+
}
|
724
|
+
for (let i = start; i <= end; i++) {
|
725
|
+
pages.push(i);
|
726
|
+
}
|
727
|
+
return pages;
|
728
|
+
}
|
729
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
730
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomPaginationComponent, selector: "custom-pagination", inputs: { totalItems: "totalItems", itemsPerPage: "itemsPerPage", currentPage: "currentPage", maxSize: "maxSize", pageText: "pageText", ofText: "ofText", showPageInfo: "showPageInfo" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<nav *ngIf=\"totalPages > 0\">\n <ul class=\"pagination\">\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\n <a class=\"page-link\" (click)=\"changePage(1)\">««</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\n <a class=\"page-link\" (click)=\"changePage(currentPage - 1)\">«</a>\n </li>\n <li class=\"page-item\" *ngFor=\"let page of pages\" [class.active]=\"page === currentPage\">\n <a class=\"page-link\" (click)=\"changePage(page)\">{{ page }}</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === totalPages\">\n <a class=\"page-link\" (click)=\"changePage(currentPage + 1)\">»</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === totalPages\">\n <a class=\"page-link\" (click)=\"changePage(totalPages)\">»»</a>\n </li>\n </ul>\n <div class=\"page-info\" *ngIf=\"showPageInfo\" style=\"font-size: 0.8rem;\">\n {{ pageText }} {{ currentPage }} {{ ofText }} {{ totalPages }}\n </div>\n</nav>\n", styles: [".pagination{display:flex;list-style:none;padding:0;margin:1rem 0;justify-content:center;align-items:center}.page-item{margin:0 .25rem}.page-item.disabled .page-link{cursor:not-allowed;opacity:.5}.page-item.active .page-link{background-color:#00444c;color:#fff}.page-item .page-link{padding:.5rem .75rem;border:1px solid #dee2e6;border-radius:.25rem;text-decoration:none;color:#00444c;cursor:pointer;transition:background-color .2s}.page-item .page-link:hover{background-color:#2ca58d}.page-info{margin-left:1rem;font-size:1rem;color:#00444c;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
731
|
+
}
|
732
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomPaginationComponent, decorators: [{
|
733
|
+
type: Component,
|
734
|
+
args: [{ selector: 'custom-pagination', template: "<nav *ngIf=\"totalPages > 0\">\n <ul class=\"pagination\">\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\n <a class=\"page-link\" (click)=\"changePage(1)\">««</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\n <a class=\"page-link\" (click)=\"changePage(currentPage - 1)\">«</a>\n </li>\n <li class=\"page-item\" *ngFor=\"let page of pages\" [class.active]=\"page === currentPage\">\n <a class=\"page-link\" (click)=\"changePage(page)\">{{ page }}</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === totalPages\">\n <a class=\"page-link\" (click)=\"changePage(currentPage + 1)\">»</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === totalPages\">\n <a class=\"page-link\" (click)=\"changePage(totalPages)\">»»</a>\n </li>\n </ul>\n <div class=\"page-info\" *ngIf=\"showPageInfo\" style=\"font-size: 0.8rem;\">\n {{ pageText }} {{ currentPage }} {{ ofText }} {{ totalPages }}\n </div>\n</nav>\n", styles: [".pagination{display:flex;list-style:none;padding:0;margin:1rem 0;justify-content:center;align-items:center}.page-item{margin:0 .25rem}.page-item.disabled .page-link{cursor:not-allowed;opacity:.5}.page-item.active .page-link{background-color:#00444c;color:#fff}.page-item .page-link{padding:.5rem .75rem;border:1px solid #dee2e6;border-radius:.25rem;text-decoration:none;color:#00444c;cursor:pointer;transition:background-color .2s}.page-item .page-link:hover{background-color:#2ca58d}.page-info{margin-left:1rem;font-size:1rem;color:#00444c;font-weight:700}\n"] }]
|
735
|
+
}], propDecorators: { totalItems: [{
|
736
|
+
type: Input
|
737
|
+
}], itemsPerPage: [{
|
738
|
+
type: Input
|
739
|
+
}], currentPage: [{
|
740
|
+
type: Input
|
741
|
+
}], maxSize: [{
|
742
|
+
type: Input
|
743
|
+
}], pageText: [{
|
744
|
+
type: Input
|
745
|
+
}], ofText: [{
|
746
|
+
type: Input
|
747
|
+
}], showPageInfo: [{
|
748
|
+
type: Input
|
749
|
+
}], pageChange: [{
|
750
|
+
type: Output
|
751
|
+
}] } });
|
752
|
+
|
697
753
|
class FormComponent {
|
698
754
|
constructor() {
|
699
755
|
this.cardTitle = 'Default Form Title';
|
@@ -1330,18 +1386,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
1330
1386
|
type: Output
|
1331
1387
|
}] } });
|
1332
1388
|
|
1333
|
-
class
|
1334
|
-
constructor() {
|
1389
|
+
class DataTableComponent {
|
1390
|
+
constructor(cdr) {
|
1391
|
+
this.cdr = cdr;
|
1335
1392
|
this.columns = [];
|
1336
1393
|
this.data = [];
|
1337
1394
|
this.itemsPerPageOptions = [5, 10, 15, 20];
|
1338
1395
|
this.defaultItemsPerPage = 10;
|
1396
|
+
this.itemsPerPageLabel = 'Items per page:';
|
1339
1397
|
this.marginTop = 0;
|
1340
1398
|
this.marginBottom = 0;
|
1341
1399
|
this.marginLeft = 0;
|
1342
1400
|
this.marginRight = 0;
|
1343
1401
|
this.showActionColumn = false;
|
1344
1402
|
this.actionColumnLabel = 'Actions';
|
1403
|
+
this.totalItems = 0;
|
1404
|
+
this.tableFontColor = '#000';
|
1405
|
+
this.tableFontSize = '14px';
|
1406
|
+
this.fetchDataFunction = () => {
|
1407
|
+
return Promise.reject('Implement the fetchDataFunction to fetch paginated data from the back-end.');
|
1408
|
+
}; // Função de busca de dados
|
1409
|
+
this.editPermissions = [];
|
1410
|
+
this.deletePermissions = [];
|
1411
|
+
this.viewPermissions = [];
|
1412
|
+
this.userPermissions = [];
|
1413
|
+
this.showPageInfo = true; // Controle de exibição da informação da página
|
1414
|
+
this.pageText = 'Page'; // Texto para "Page"
|
1415
|
+
this.ofText = 'of'; // Texto para "of"
|
1345
1416
|
this.sortChange = new EventEmitter();
|
1346
1417
|
this.pageChange = new EventEmitter();
|
1347
1418
|
this.itemsPerPageChange = new EventEmitter();
|
@@ -1349,43 +1420,56 @@ class BootstrapTableComponent {
|
|
1349
1420
|
this.onDeleteTable = new EventEmitter();
|
1350
1421
|
this.onViewTable = new EventEmitter();
|
1351
1422
|
this.currentPage = 1;
|
1352
|
-
this.
|
1353
|
-
this.
|
1354
|
-
|
1355
|
-
|
1356
|
-
|
1357
|
-
|
1423
|
+
this.pagedData = [];
|
1424
|
+
this.isLoading = false;
|
1425
|
+
this.labelStyle = {
|
1426
|
+
'font-family': 'Inter, Arial, sans-serif',
|
1427
|
+
'font-size': '14px',
|
1428
|
+
'color': '#000'
|
1358
1429
|
};
|
1359
1430
|
}
|
1360
1431
|
ngOnInit() {
|
1361
|
-
this.
|
1362
|
-
this.
|
1432
|
+
this.fetchData();
|
1433
|
+
this.setDefaultPermissions();
|
1363
1434
|
}
|
1364
1435
|
ngOnChanges(changes) {
|
1365
|
-
if (changes['data']) {
|
1366
|
-
this.
|
1367
|
-
this.updateConfig();
|
1436
|
+
if (changes['totalItems'] || changes['defaultItemsPerPage'] || changes['currentPage'] || changes['data']) {
|
1437
|
+
this.fetchData();
|
1368
1438
|
}
|
1369
1439
|
}
|
1370
|
-
|
1371
|
-
this.
|
1372
|
-
|
1373
|
-
|
1440
|
+
setDefaultPermissions() {
|
1441
|
+
if (!this.userPermissions || this.userPermissions.length === 0) {
|
1442
|
+
this.userPermissions = ['edit', 'delete', 'view'];
|
1443
|
+
}
|
1444
|
+
}
|
1445
|
+
async fetchData() {
|
1446
|
+
if (this.fetchDataFunction) {
|
1447
|
+
this.isLoading = true;
|
1448
|
+
try {
|
1449
|
+
const data = await this.fetchDataFunction(this.currentPage, this.defaultItemsPerPage);
|
1450
|
+
this.pagedData = data.items;
|
1451
|
+
this.totalItems = data.totalItems;
|
1452
|
+
}
|
1453
|
+
finally {
|
1454
|
+
this.isLoading = false;
|
1455
|
+
this.cdr.markForCheck(); // Força a detecção de mudanças
|
1456
|
+
}
|
1457
|
+
}
|
1374
1458
|
}
|
1375
1459
|
onSort(column) {
|
1376
1460
|
this.sortChange.emit(column);
|
1377
1461
|
}
|
1378
1462
|
onPageChange(page) {
|
1379
1463
|
this.currentPage = page;
|
1380
|
-
this.config.currentPage = page;
|
1381
1464
|
this.pageChange.emit(page);
|
1465
|
+
this.fetchData();
|
1382
1466
|
}
|
1383
1467
|
onItemsPerPageChange(event) {
|
1384
1468
|
const itemsPerPage = parseInt(event, 10);
|
1385
1469
|
this.defaultItemsPerPage = itemsPerPage;
|
1386
|
-
this.
|
1470
|
+
this.currentPage = 1;
|
1387
1471
|
this.itemsPerPageChange.emit(itemsPerPage);
|
1388
|
-
this.
|
1472
|
+
this.fetchData();
|
1389
1473
|
}
|
1390
1474
|
handleAction(action, item, index) {
|
1391
1475
|
switch (action) {
|
@@ -1400,13 +1484,19 @@ class BootstrapTableComponent {
|
|
1400
1484
|
break;
|
1401
1485
|
}
|
1402
1486
|
}
|
1403
|
-
|
1404
|
-
|
1487
|
+
hasPermission(requiredPermissions) {
|
1488
|
+
if (!this.userPermissions || this.userPermissions.length === 0) {
|
1489
|
+
return true;
|
1490
|
+
}
|
1491
|
+
return requiredPermissions.every(permission => this.userPermissions.includes(permission));
|
1492
|
+
}
|
1493
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
1494
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DataTableComponent, selector: "sim-data-table", inputs: { columns: "columns", data: "data", itemsPerPageOptions: "itemsPerPageOptions", defaultItemsPerPage: "defaultItemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", marginTop: "marginTop", marginBottom: "marginBottom", marginLeft: "marginLeft", marginRight: "marginRight", showActionColumn: "showActionColumn", actionColumnLabel: "actionColumnLabel", totalItems: "totalItems", tableFontColor: "tableFontColor", tableFontSize: "tableFontSize", fetchDataFunction: "fetchDataFunction", editPermissions: "editPermissions", deletePermissions: "deletePermissions", viewPermissions: "viewPermissions", userPermissions: "userPermissions", showPageInfo: "showPageInfo", pageText: "pageText", ofText: "ofText" }, outputs: { sortChange: "sortChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", onEditTable: "onEditTable", onDeleteTable: "onDeleteTable", onViewTable: "onViewTable" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group\" [ngStyle]=\"{\n 'margin-top': marginTop + 'rem',\n 'margin-bottom': marginBottom + 'rem',\n 'margin-left': marginLeft + 'rem',\n 'margin-right': marginRight + 'rem'\n}\" style=\"text-align: right;\">\n <label for=\"itemsPerPageSelect\" style=\"margin-right: 0.5rem; margin-bottom: 0.7rem;\" [ngStyle]=\"labelStyle\">{{ itemsPerPageLabel }}</label>\n <select\n id=\"itemsPerPageSelect\"\n class=\"form-control form-control-sm d-inline-block w-auto\"\n [(ngModel)]=\"defaultItemsPerPage\"\n (ngModelChange)=\"onItemsPerPageChange($event)\">\n <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">{{ option }}</option>\n </select>\n</div>\n\n<div class=\"table-responsive\">\n <table class=\"table table-hover\" [ngStyle]=\"{ 'color': tableFontColor, 'font-size': tableFontSize }\">\n <thead>\n <tr>\n <ng-container *ngFor=\"let column of columns\">\n <th *ngIf=\"hasPermission(column.permissions || [])\" (click)=\"onSort(column.prop)\">\n {{ column.label }}\n </th>\n </ng-container>\n <th *ngIf=\"showActionColumn\">{{ actionColumnLabel }}</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of pagedData; let i = index\">\n <ng-container *ngFor=\"let column of columns\">\n <td *ngIf=\"hasPermission(column.permissions || [])\">\n {{ item[column.prop] }}\n </td>\n </ng-container>\n <td *ngIf=\"showActionColumn\">\n <div class=\"d-flex justify-content-center\">\n <div *ngIf=\"hasPermission(editPermissions)\" (click)=\"handleAction('edit', item, i)\" class=\"btn-icon edit mx-1\"></div>\n <div *ngIf=\"hasPermission(deletePermissions)\" (click)=\"handleAction('delete', item, i)\" class=\"btn-icon delete mx-1\"></div>\n <div *ngIf=\"hasPermission(viewPermissions)\" (click)=\"handleAction('view', item, i)\" class=\"btn-icon view mx-1\"></div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"text-center pagination-controls\">\n <custom-pagination\n [totalItems]=\"totalItems\"\n [itemsPerPage]=\"defaultItemsPerPage\"\n [currentPage]=\"currentPage\"\n [showPageInfo]=\"showPageInfo\"\n [pageText]=\"pageText\"\n [ofText]=\"ofText\"\n (pageChange)=\"onPageChange($event)\">\n </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\";:host{font-family:Inter,Arial,sans-serif}.label-style{font-family:Inter,Arial,sans-serif;font-size:14px;color:#000}.table{font-family:Inter,Arial,sans-serif;color:var(--table-font-color, #000);font-size:var(--table-font-size, 14px);border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden;border:.13rem solid #00444C}.table thead th{background-color:#00444c;color:#fff;padding:10px;border-bottom:1rem solid rgba(0,68,76,.8);border-right:1rem solid rgba(0,68,76,.8);border-radius:0}.table thead th:last-child{border-right:none}.table tbody td{padding:10px;border-bottom:.1rem solid rgba(0,68,76,.8);border-right:.1rem solid rgba(0,68,76,.8)}.table tbody tr:last-child td{border-bottom:none}.table tbody td:last-child{border-right:none}.table thead th:first-child{border-top-left-radius:0}.table thead th:last-child{border-top-right-radius:0}.table tbody tr:last-child td:first-child{border-bottom-left-radius:8px}.table tbody tr:last-child td:last-child{border-bottom-right-radius:8px}.btn-icon{width:24px;height:24px;background-size:cover;display:inline-block;cursor:pointer;margin-right:16px}.btn-icon.edit{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAABrUlEQVR4nGNgoDI44+PD9b++nona5jLsSC4UupOauvpVVdXLJ4WF128mJkZSzfCdxfViG5dueHtswcr/3/v7wfhxYeF1qvikuLtbbMXG/WduPPvy/+K9t/8PLVwFtuBlZeVLUHBRZHhMdzF3Wk//7XN3Xv27+fzrfxC+dPfNf5BP7qanr6DYcL2CxF2MLj7/oxp7/1+4+wZsCcgnm5Zuersls0KQIsP185N2gwxngOLw+p7/IJ8s37Tv4sbWVnGquJwBCYP4qb199/ImTKDQ8MKEndgM1y9MPOjXWcpLkeFGxYl7GF3pbLjBkHW5/sg1vL47Q8y6JOE0zQwPqEl8h244g6vPf928hH0UGQ4CU2akHbLOjcN0eX7intApWTwUGb6221vn0d7KD5s2VP93LEyAG+5UGn+bYsNBYM/chFlfz7X+B+Etm6r/OxQm/A+oTnpXPyVegmLDMzJcxULDgn883F8PtuDR3oqPs2enHaickEx+wYUMcpKDNps5+P4PDQv+uW9e8sIVfYFGDNQC/xkYGIOD/Z8nxwfujIvzlqaawTBQz8DABMJUNxgKAOk7VoIIOJGlAAAAAElFTkSuQmCC)}.btn-icon.delete{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 viewBox%3D%220%2C0%2C256%2C256%22 width%3D%2224px%22 height%3D%2224px%22%3E%3Cg fill%3D%22%23fb0909%22 fill-rule%3D%22nonzero%22 stroke%3D%22none%22 stroke-width%3D%221%22 stroke-linecap%3D%22butt%22 stroke-linejoin%3D%22miter%22 stroke-miterlimit%3D%2210%22 stroke-dasharray%3D%22%22 stroke-dashoffset%3D%220%22 font-family%3D%22none%22 font-weight%3D%22none%22 font-size%3D%22none%22 text-anchor%3D%22none%22 style%3D%22mix-blend-mode%3A normal%22%3E%3Cg transform%3D%22scale(2%2C2)%22%3E%3Cpath d%3D%22M49%2C1c-1.66%2C0 -3%2C1.34 -3%2C3c0%2C1.66 1.34%2C3 3%2C3h30c1.66%2C0 3%2C-1.34 3%2C-3c0%2C-1.66 -1.34%2C-3 -3%2C-3zM24%2C15c-7.17%2C0 -13%2C5.83 -13%2C13c0%2C7.17 5.83%2C13 13%2C13h77v63c0%2C9.37 -7.63%2C17 -17%2C17h-40c-9.37%2C0 -17%2C-7.63 -17%2C-17v-52c0%2C-1.66 -1.34%2C-3 -3%2C-3c-1.66%2C0 -3%2C1.34 -3%2C3v52c0%2C12.68 10.32%2C23 23%2C23h40c12.68%2C0 23%2C-10.32 23%2C-23v-63.35937c5.72%2C-1.36 10%2C-6.50062 10%2C-12.64062c0%2C-7.17 -5.83%2C-13 -13%2C-13zM24%2C21h80c3.86%2C0 7%2C3.14 7%2C7c0%2C3.86 -3.14%2C7 -7%2C7h-80c-3.86%2C0 -7%2C-3.14 -7%2C-7c0%2C-3.86 3.14%2C-7 7%2C-7zM50%2C55c-1.66%2C0 -3%2C1.34 -3%2C3v46c0%2C1.66 1.34%2C3 3%2C3c1.66%2C0 3%2C-1.34 3%2C-3v-46c0%2C-1.66 -1.34%2C-3 -3%2C-3zM78%2C55c-1.66%2C0 -3%2C1.34 -3%2C3v46c0%2C1.66 1.34%2C3 3%2C3c1.66%2C0 3%2C-1.34 3%2C-3v-46c0%2C-1.66 -1.34%2C-3 -3%2C-3z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\")}.btn-icon.view{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAQHQAAEB0B0blUQwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAcrSURBVHja7Zt5TBRXHMc1aZu09Y8mbdI/G5NqatukTUysu4iuSgHxrLYeKOsRrfGIpsa2aluDWiM0aivWgyogKDvDSjhEsevOsOCCCyjKjZy6FLmP5XC5+fW9gdnssos7CzM4u/CSbzhmMrOf73vv997v7XtTAGCKLblRhLsbpTgspYibEoqoQD/BCWSQUookKUWeltCKDZ6qiHdH4mNl9Y85VPj76EGkkwDbU7mUjprP2QCpmliKar7GReBZ9Uto4uxnSuVbrzRgXhL5Bbq5x8XgzUQGjmjA7EfBb6Kbsl0XfrAloPggsWmAlCZOuDg8qxLJA+Xb1gZQROMEMQAkFLnMwoD5KuX0iQKP5UaRRy0McFMr1vL9ksO5WshqroNtmSrxmaAm4i0MwNGRzxfse5wEvQP9gMuV8lwxtgK9ZQugyMt8PdxXdwfae3sY+JrODlh2P1aUs0VBDFiKYKsRNC7YhI26RNFOl3k3YGGSEgpaGxn4voEB2I+6gZjzBYcM2PWIglOFmbAgKWqEqEqApq4S2ILv5fJB5tEkyJBxfGo+HcW/AU3dnQxYYWsTrEm7ZXU98nmRCf7680JO8Nsz74Ghpwv4Lrj1/V36hF8DIp4VmF7Q3tsNh3K0pmt/FD00XaNRK3Dj2Ax/zUsDocrdmmf8xwD//Adg7Os1vYTUP4Ufs1MYx3HJNzQyTdCRvrgl41848CSZV+3NokfsqmMOgusf3IbS9hYrx6uNHeBzP8aZZoOjHwVwLcdXlVl0CTz2O9l0eOzD4G+oDyfX/8cEMyfMBwyCzQQnDZg0YNKASQOw1qTeggul2UyCNOEMWKmNg/ouo5jXA4QzYLHmJpS0NTPweFFEpMOkMAbg7C614YVpkvR7QfrEigHKymIT/DWUQLlMEMTN2l4wO1ucZYJX1+o5Z4VOYQBOgPpR1hdakc808+HXD6KssH8oK8xpaeCSjcEKFCixUY+b63hVemM1l9UoxwzIaak31e6j5lqLhc7NKKVl0+QqYzssSeGWFeJVI6FKCspReDXg6+RooGv1phc0dncyefcKs+GuDWWF61C6zLUZ4mdeLc+D2KpSXhWF4tCm9ERhgiBe/enu72OAcZOv7XzJ/N7T3w97kCETYiYoT78L+pdtFk3ueL5O9NCbFOdhfdQFfobBRWhUSKyuYFrDRTTdFTP4koRQuLvPD4p8fRjFHNwGHonhrbzMAzguQb82eSeEQdLuDSZ4VnEHtvYqZbJpLp0Net8OA9oGfO6m5XB+83d9171kWtYElzPAC8Pv8bUJH7RlLSD4IS1IQfhTXcqAJaqrEB0gtwG/DIK2msMPKsJ7oY/LGIDhcyPmQkPITEg++o1deEaesoOCGTCeQZKFb7s6nRFrgh14o2K57ANBDCD0T5kJ0tG8tHGHZ1UTOgsuH1lvG95L1oXkLUgQxF9OsgVniULC+6iuQF64NXxzyMeguSSD0rOfQtj+5Rbw13wWM31fkGHwSG4qDAzBZzbVgruN7HG84PWnZzAyNyHcZxFsDA7oEGRBBC9/dQ3lCs86WsETJTyvAz7ZDN7chJAfVoJvcIAwK0J4Fbh5aB8B3k+A/7YXIPHXa+eKHzus4HwNVCrcreANITMgO8TLCh6r/MwnsDfGf3S5wF+oHye8KIdVqfE2r+OaxjWOC24BXBZCTxSkjyrXHzA2QEe0pxV8W+hMqItczQXecQMah2q2taeb2RMwvCYfor7OfDgkHAO4tJgNujvMniK8k4yralv0YLjpYRO+6sYqrvCOG4A3PbKrPhhSoS8yjfG4ZbCFw9aU0e9AQ30+P/wrK/gm1OyTLy1wBN7aAClNXOSyOaLMbHMErj1sBFviqsqcBR6refhO0QNct8KZb45gS0ZTjWDD3VLVP6OC3xNz7FXPfTisCxDujnwo8/1C5e0GZn1PqJovCJ/jEHzZmVn24LGCLQyQaZTTBg8TcP9wa9MS4E80OnBdBR6NgjJiITtykUPwu+3Dg4RS7LR1XiBTbNldekEyVBXRJhMwfMoY4ZEGpCrycysDJHTkHHSxTzSLGklR0FimgyakF8iErEhPO/DHuT2bJoNGPDSFbjgpFgN+0t1i4LFqStLgTooS7l/2GBu8miidnZDwzogG4GNl6EadGAwgs9UmeBWagRYiZQ8zAcPv4ggvoYgOCU1I7Z4bZE6PqQn/1318rvip1gK+cJgJjsDjk6T4WBDnk6NMd7gX+eXgEVTCON7w6xKvwwn/I3Ay8JgFPFYOEqEhYXt8oP1gRxEliGE3Aprq0NFZc8k0mjcYM9TEDjdacQo9NEBILSSDL+7YtdMol8vh+x3bIV8bB2na2HpFSkzGL5pocjFFnn7lM2ji57lUlIdME/aevTPDnAwYT/n6+n6EwCsw/Ga5fCAo8Pi5vPT4D4V+r2gMQODxGB6pF+nb8XqvmAw4hFTp5+e3ejzf+z+xmopYfAdAyAAAAABJRU5ErkJggg==)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CustomPaginationComponent, selector: "custom-pagination", inputs: ["totalItems", "itemsPerPage", "currentPage", "maxSize", "pageText", "ofText", "showPageInfo"], outputs: ["pageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
1405
1495
|
}
|
1406
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type:
|
1496
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataTableComponent, decorators: [{
|
1407
1497
|
type: Component,
|
1408
|
-
args: [{ selector: 'sim-
|
1409
|
-
}], propDecorators: { columns: [{
|
1498
|
+
args: [{ selector: 'sim-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\" [ngStyle]=\"{\n 'margin-top': marginTop + 'rem',\n 'margin-bottom': marginBottom + 'rem',\n 'margin-left': marginLeft + 'rem',\n 'margin-right': marginRight + 'rem'\n}\" style=\"text-align: right;\">\n <label for=\"itemsPerPageSelect\" style=\"margin-right: 0.5rem; margin-bottom: 0.7rem;\" [ngStyle]=\"labelStyle\">{{ itemsPerPageLabel }}</label>\n <select\n id=\"itemsPerPageSelect\"\n class=\"form-control form-control-sm d-inline-block w-auto\"\n [(ngModel)]=\"defaultItemsPerPage\"\n (ngModelChange)=\"onItemsPerPageChange($event)\">\n <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">{{ option }}</option>\n </select>\n</div>\n\n<div class=\"table-responsive\">\n <table class=\"table table-hover\" [ngStyle]=\"{ 'color': tableFontColor, 'font-size': tableFontSize }\">\n <thead>\n <tr>\n <ng-container *ngFor=\"let column of columns\">\n <th *ngIf=\"hasPermission(column.permissions || [])\" (click)=\"onSort(column.prop)\">\n {{ column.label }}\n </th>\n </ng-container>\n <th *ngIf=\"showActionColumn\">{{ actionColumnLabel }}</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of pagedData; let i = index\">\n <ng-container *ngFor=\"let column of columns\">\n <td *ngIf=\"hasPermission(column.permissions || [])\">\n {{ item[column.prop] }}\n </td>\n </ng-container>\n <td *ngIf=\"showActionColumn\">\n <div class=\"d-flex justify-content-center\">\n <div *ngIf=\"hasPermission(editPermissions)\" (click)=\"handleAction('edit', item, i)\" class=\"btn-icon edit mx-1\"></div>\n <div *ngIf=\"hasPermission(deletePermissions)\" (click)=\"handleAction('delete', item, i)\" class=\"btn-icon delete mx-1\"></div>\n <div *ngIf=\"hasPermission(viewPermissions)\" (click)=\"handleAction('view', item, i)\" class=\"btn-icon view mx-1\"></div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"text-center pagination-controls\">\n <custom-pagination\n [totalItems]=\"totalItems\"\n [itemsPerPage]=\"defaultItemsPerPage\"\n [currentPage]=\"currentPage\"\n [showPageInfo]=\"showPageInfo\"\n [pageText]=\"pageText\"\n [ofText]=\"ofText\"\n (pageChange)=\"onPageChange($event)\">\n </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\";:host{font-family:Inter,Arial,sans-serif}.label-style{font-family:Inter,Arial,sans-serif;font-size:14px;color:#000}.table{font-family:Inter,Arial,sans-serif;color:var(--table-font-color, #000);font-size:var(--table-font-size, 14px);border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden;border:.13rem solid #00444C}.table thead th{background-color:#00444c;color:#fff;padding:10px;border-bottom:1rem solid rgba(0,68,76,.8);border-right:1rem solid rgba(0,68,76,.8);border-radius:0}.table thead th:last-child{border-right:none}.table tbody td{padding:10px;border-bottom:.1rem solid rgba(0,68,76,.8);border-right:.1rem solid rgba(0,68,76,.8)}.table tbody tr:last-child td{border-bottom:none}.table tbody td:last-child{border-right:none}.table thead th:first-child{border-top-left-radius:0}.table thead th:last-child{border-top-right-radius:0}.table tbody tr:last-child td:first-child{border-bottom-left-radius:8px}.table tbody tr:last-child td:last-child{border-bottom-right-radius:8px}.btn-icon{width:24px;height:24px;background-size:cover;display:inline-block;cursor:pointer;margin-right:16px}.btn-icon.edit{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAABrUlEQVR4nGNgoDI44+PD9b++nona5jLsSC4UupOauvpVVdXLJ4WF128mJkZSzfCdxfViG5dueHtswcr/3/v7wfhxYeF1qvikuLtbbMXG/WduPPvy/+K9t/8PLVwFtuBlZeVLUHBRZHhMdzF3Wk//7XN3Xv27+fzrfxC+dPfNf5BP7qanr6DYcL2CxF2MLj7/oxp7/1+4+wZsCcgnm5Zuersls0KQIsP185N2gwxngOLw+p7/IJ8s37Tv4sbWVnGquJwBCYP4qb199/ImTKDQ8MKEndgM1y9MPOjXWcpLkeFGxYl7GF3pbLjBkHW5/sg1vL47Q8y6JOE0zQwPqEl8h244g6vPf928hH0UGQ4CU2akHbLOjcN0eX7intApWTwUGb6221vn0d7KD5s2VP93LEyAG+5UGn+bYsNBYM/chFlfz7X+B+Etm6r/OxQm/A+oTnpXPyVegmLDMzJcxULDgn883F8PtuDR3oqPs2enHaickEx+wYUMcpKDNps5+P4PDQv+uW9e8sIVfYFGDNQC/xkYGIOD/Z8nxwfujIvzlqaawTBQz8DABMJUNxgKAOk7VoIIOJGlAAAAAElFTkSuQmCC)}.btn-icon.delete{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 viewBox%3D%220%2C0%2C256%2C256%22 width%3D%2224px%22 height%3D%2224px%22%3E%3Cg fill%3D%22%23fb0909%22 fill-rule%3D%22nonzero%22 stroke%3D%22none%22 stroke-width%3D%221%22 stroke-linecap%3D%22butt%22 stroke-linejoin%3D%22miter%22 stroke-miterlimit%3D%2210%22 stroke-dasharray%3D%22%22 stroke-dashoffset%3D%220%22 font-family%3D%22none%22 font-weight%3D%22none%22 font-size%3D%22none%22 text-anchor%3D%22none%22 style%3D%22mix-blend-mode%3A normal%22%3E%3Cg transform%3D%22scale(2%2C2)%22%3E%3Cpath d%3D%22M49%2C1c-1.66%2C0 -3%2C1.34 -3%2C3c0%2C1.66 1.34%2C3 3%2C3h30c1.66%2C0 3%2C-1.34 3%2C-3c0%2C-1.66 -1.34%2C-3 -3%2C-3zM24%2C15c-7.17%2C0 -13%2C5.83 -13%2C13c0%2C7.17 5.83%2C13 13%2C13h77v63c0%2C9.37 -7.63%2C17 -17%2C17h-40c-9.37%2C0 -17%2C-7.63 -17%2C-17v-52c0%2C-1.66 -1.34%2C-3 -3%2C-3c-1.66%2C0 -3%2C1.34 -3%2C3v52c0%2C12.68 10.32%2C23 23%2C23h40c12.68%2C0 23%2C-10.32 23%2C-23v-63.35937c5.72%2C-1.36 10%2C-6.50062 10%2C-12.64062c0%2C-7.17 -5.83%2C-13 -13%2C-13zM24%2C21h80c3.86%2C0 7%2C3.14 7%2C7c0%2C3.86 -3.14%2C7 -7%2C7h-80c-3.86%2C0 -7%2C-3.14 -7%2C-7c0%2C-3.86 3.14%2C-7 7%2C-7zM50%2C55c-1.66%2C0 -3%2C1.34 -3%2C3v46c0%2C1.66 1.34%2C3 3%2C3c1.66%2C0 3%2C-1.34 3%2C-3v-46c0%2C-1.66 -1.34%2C-3 -3%2C-3zM78%2C55c-1.66%2C0 -3%2C1.34 -3%2C3v46c0%2C1.66 1.34%2C3 3%2C3c1.66%2C0 3%2C-1.34 3%2C-3v-46c0%2C-1.66 -1.34%2C-3 -3%2C-3z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\")}.btn-icon.view{background-image:url(data:image/png;base64,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)}\n"] }]
|
1499
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { columns: [{
|
1410
1500
|
type: Input
|
1411
1501
|
}], data: [{
|
1412
1502
|
type: Input
|
@@ -1414,6 +1504,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
1414
1504
|
type: Input
|
1415
1505
|
}], defaultItemsPerPage: [{
|
1416
1506
|
type: Input
|
1507
|
+
}], itemsPerPageLabel: [{
|
1508
|
+
type: Input
|
1417
1509
|
}], marginTop: [{
|
1418
1510
|
type: Input
|
1419
1511
|
}], marginBottom: [{
|
@@ -1426,6 +1518,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
1426
1518
|
type: Input
|
1427
1519
|
}], actionColumnLabel: [{
|
1428
1520
|
type: Input
|
1521
|
+
}], totalItems: [{
|
1522
|
+
type: Input
|
1523
|
+
}], tableFontColor: [{
|
1524
|
+
type: Input
|
1525
|
+
}], tableFontSize: [{
|
1526
|
+
type: Input
|
1527
|
+
}], fetchDataFunction: [{
|
1528
|
+
type: Input
|
1529
|
+
}], editPermissions: [{
|
1530
|
+
type: Input
|
1531
|
+
}], deletePermissions: [{
|
1532
|
+
type: Input
|
1533
|
+
}], viewPermissions: [{
|
1534
|
+
type: Input
|
1535
|
+
}], userPermissions: [{
|
1536
|
+
type: Input
|
1537
|
+
}], showPageInfo: [{
|
1538
|
+
type: Input
|
1539
|
+
}], pageText: [{
|
1540
|
+
type: Input
|
1541
|
+
}], ofText: [{
|
1542
|
+
type: Input
|
1429
1543
|
}], sortChange: [{
|
1430
1544
|
type: Output
|
1431
1545
|
}], pageChange: [{
|
@@ -1620,6 +1734,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
1620
1734
|
type: Output
|
1621
1735
|
}] } });
|
1622
1736
|
|
1737
|
+
class TreeNodeComponent {
|
1738
|
+
constructor() {
|
1739
|
+
this.title = '';
|
1740
|
+
this.nodes = [];
|
1741
|
+
this.isRoot = true;
|
1742
|
+
this.nodeSelected = new EventEmitter();
|
1743
|
+
}
|
1744
|
+
ngOnInit() {
|
1745
|
+
if (this.isRoot && !this.title) {
|
1746
|
+
this.title = 'Tree Node';
|
1747
|
+
}
|
1748
|
+
}
|
1749
|
+
onNodeSelected(node, event) {
|
1750
|
+
node.selected = event.target.checked;
|
1751
|
+
if (node.children) {
|
1752
|
+
this.toggleChildren(node.children, node.selected);
|
1753
|
+
}
|
1754
|
+
this.nodeSelected.emit(node);
|
1755
|
+
}
|
1756
|
+
toggleChildren(children, selected) {
|
1757
|
+
children.forEach(child => {
|
1758
|
+
child.selected = selected;
|
1759
|
+
if (child.children) {
|
1760
|
+
this.toggleChildren(child.children, selected);
|
1761
|
+
}
|
1762
|
+
});
|
1763
|
+
}
|
1764
|
+
onChildNodeSelected(node) {
|
1765
|
+
this.updateParentSelection(this.nodes);
|
1766
|
+
this.nodeSelected.emit(node);
|
1767
|
+
}
|
1768
|
+
updateParentSelection(nodes) {
|
1769
|
+
nodes.forEach(node => {
|
1770
|
+
if (node.children) {
|
1771
|
+
const allChildrenDeselected = node.children.every(child => !child.selected);
|
1772
|
+
node.selected = !allChildrenDeselected;
|
1773
|
+
// Recursive call for nested parents
|
1774
|
+
this.updateParentSelection(node.children);
|
1775
|
+
}
|
1776
|
+
});
|
1777
|
+
}
|
1778
|
+
toggleCollapse(node) {
|
1779
|
+
node.collapsed = !node.collapsed;
|
1780
|
+
}
|
1781
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
1782
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeNodeComponent, selector: "sim-tree-node", inputs: { title: "title", nodes: "nodes", isRoot: "isRoot" }, outputs: { nodeSelected: "nodeSelected" }, ngImport: i0, template: "<div *ngIf=\"isRoot\" class=\"tree-title\">{{ title || 'Tree Node' }}</div>\n<ul class=\"tree\">\n <li *ngFor=\"let node of nodes\">\n <div class=\"node-content\">\n <span *ngIf=\"node.children\" class=\"toggle-icon\" (click)=\"toggleCollapse(node)\"\n [ngClass]=\"{'collapsed-icon': node.collapsed, 'expanded-icon': !node.collapsed}\">\n {{ node.collapsed ? '\u25B6' : '\u25BC' }}\n </span>\n <label class=\"custom-checkbox\">\n <input type=\"checkbox\" [checked]=\"node.selected\" (change)=\"onNodeSelected(node, $event)\" />\n <span class=\"checkmark\"></span>\n </label>\n <label class=\"node-label\">{{ node.name }}</label>\n </div>\n <sim-tree-node *ngIf=\"node.children && !node.collapsed\" [nodes]=\"node.children\" [isRoot]=\"false\" (nodeSelected)=\"onChildNodeSelected(node)\"></sim-tree-node>\n </li>\n</ul>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\";.tree{list-style-type:none;margin:0;padding:0;position:relative;font-family:Inter,sans-serif}.tree li{margin:0;padding:0 0 0 2em;line-height:2em;position:relative;font-size:14px;transition:all .3s ease}.tree li:before{content:\"\";position:absolute;top:0;left:0;border-left:1px solid #ccc;bottom:.75em;transition:border-color .3s ease}.tree li:after{content:\"\";position:absolute;top:1em;left:0;border-top:1px solid #ccc;width:1em;transition:border-color .3s ease}.tree li:last-child:before{height:1em}.node-content{display:flex;align-items:center;color:#333;transition:color .3s ease}.node-content:hover .node-label{color:#00444c;box-shadow:0 4px 8px #0000001a}.toggle-icon{cursor:pointer;margin-right:.5em;font-size:1em;transition:transform .3s ease,color .3s ease}.collapsed-icon{color:orange}.expanded-icon{color:green}.node-content input[type=checkbox]{display:none}.custom-checkbox{position:relative;display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.checkmark{position:relative;height:14px;width:14px;background-color:#fff;border:2px solid #00444C;border-radius:3px;transition:background-color .3s ease,border-color .3s ease}.custom-checkbox input:checked+.checkmark{background-color:#00444c;border-color:#00444c;transition:background-color .3s ease,border-color .3s ease}.custom-checkbox .checkmark:after{content:\"\";position:absolute;display:none;left:4px;top:1px;width:3px;height:8px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .3s ease}.custom-checkbox input:checked+.checkmark:after{display:block}.node-label{margin-left:.5em;transition:color .3s ease,box-shadow .3s ease}.node-content input{margin-right:.5em;transition:transform .3s ease}.tree-title{font-weight:600;margin-bottom:10px;font-size:18px;color:#00444c;transition:color .3s ease}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TreeNodeComponent, selector: "sim-tree-node", inputs: ["title", "nodes", "isRoot"], outputs: ["nodeSelected"] }] }); }
|
1783
|
+
}
|
1784
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeNodeComponent, decorators: [{
|
1785
|
+
type: Component,
|
1786
|
+
args: [{ selector: 'sim-tree-node', template: "<div *ngIf=\"isRoot\" class=\"tree-title\">{{ title || 'Tree Node' }}</div>\n<ul class=\"tree\">\n <li *ngFor=\"let node of nodes\">\n <div class=\"node-content\">\n <span *ngIf=\"node.children\" class=\"toggle-icon\" (click)=\"toggleCollapse(node)\"\n [ngClass]=\"{'collapsed-icon': node.collapsed, 'expanded-icon': !node.collapsed}\">\n {{ node.collapsed ? '\u25B6' : '\u25BC' }}\n </span>\n <label class=\"custom-checkbox\">\n <input type=\"checkbox\" [checked]=\"node.selected\" (change)=\"onNodeSelected(node, $event)\" />\n <span class=\"checkmark\"></span>\n </label>\n <label class=\"node-label\">{{ node.name }}</label>\n </div>\n <sim-tree-node *ngIf=\"node.children && !node.collapsed\" [nodes]=\"node.children\" [isRoot]=\"false\" (nodeSelected)=\"onChildNodeSelected(node)\"></sim-tree-node>\n </li>\n</ul>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\";.tree{list-style-type:none;margin:0;padding:0;position:relative;font-family:Inter,sans-serif}.tree li{margin:0;padding:0 0 0 2em;line-height:2em;position:relative;font-size:14px;transition:all .3s ease}.tree li:before{content:\"\";position:absolute;top:0;left:0;border-left:1px solid #ccc;bottom:.75em;transition:border-color .3s ease}.tree li:after{content:\"\";position:absolute;top:1em;left:0;border-top:1px solid #ccc;width:1em;transition:border-color .3s ease}.tree li:last-child:before{height:1em}.node-content{display:flex;align-items:center;color:#333;transition:color .3s ease}.node-content:hover .node-label{color:#00444c;box-shadow:0 4px 8px #0000001a}.toggle-icon{cursor:pointer;margin-right:.5em;font-size:1em;transition:transform .3s ease,color .3s ease}.collapsed-icon{color:orange}.expanded-icon{color:green}.node-content input[type=checkbox]{display:none}.custom-checkbox{position:relative;display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.checkmark{position:relative;height:14px;width:14px;background-color:#fff;border:2px solid #00444C;border-radius:3px;transition:background-color .3s ease,border-color .3s ease}.custom-checkbox input:checked+.checkmark{background-color:#00444c;border-color:#00444c;transition:background-color .3s ease,border-color .3s ease}.custom-checkbox .checkmark:after{content:\"\";position:absolute;display:none;left:4px;top:1px;width:3px;height:8px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .3s ease}.custom-checkbox input:checked+.checkmark:after{display:block}.node-label{margin-left:.5em;transition:color .3s ease,box-shadow .3s ease}.node-content input{margin-right:.5em;transition:transform .3s ease}.tree-title{font-weight:600;margin-bottom:10px;font-size:18px;color:#00444c;transition:color .3s ease}\n"] }]
|
1787
|
+
}], propDecorators: { title: [{
|
1788
|
+
type: Input
|
1789
|
+
}], nodes: [{
|
1790
|
+
type: Input
|
1791
|
+
}], isRoot: [{
|
1792
|
+
type: Input
|
1793
|
+
}], nodeSelected: [{
|
1794
|
+
type: Output
|
1795
|
+
}] } });
|
1796
|
+
|
1623
1797
|
class ComponentsModule {
|
1624
1798
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
1625
1799
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ComponentsModule, declarations: [ButtonComponent,
|
@@ -1631,16 +1805,17 @@ class ComponentsModule {
|
|
1631
1805
|
SelectComponent,
|
1632
1806
|
RadioComponent,
|
1633
1807
|
MultiSelectComponent,
|
1634
|
-
|
1808
|
+
DataTableComponent,
|
1635
1809
|
CodeHighlightComponent,
|
1636
1810
|
BadgeComponent,
|
1637
1811
|
AlertComponent,
|
1638
1812
|
ConfirmationComponent,
|
1639
|
-
AutofocusDirective
|
1813
|
+
AutofocusDirective,
|
1814
|
+
CustomPaginationComponent,
|
1815
|
+
TreeNodeComponent], imports: [CommonModule,
|
1640
1816
|
FormsModule,
|
1641
1817
|
ReactiveFormsModule,
|
1642
|
-
NgSelectModule,
|
1643
|
-
NgxPaginationModule], exports: [ButtonComponent,
|
1818
|
+
NgSelectModule], exports: [ButtonComponent,
|
1644
1819
|
CardComponent,
|
1645
1820
|
FormComponent,
|
1646
1821
|
InputComponent,
|
@@ -1652,16 +1827,17 @@ class ComponentsModule {
|
|
1652
1827
|
FormsModule,
|
1653
1828
|
ReactiveFormsModule,
|
1654
1829
|
NgSelectModule,
|
1655
|
-
|
1830
|
+
DataTableComponent,
|
1656
1831
|
CodeHighlightComponent,
|
1657
1832
|
BadgeComponent,
|
1658
1833
|
AlertComponent,
|
1659
|
-
ConfirmationComponent
|
1834
|
+
ConfirmationComponent,
|
1835
|
+
CustomPaginationComponent,
|
1836
|
+
TreeNodeComponent] }); }
|
1660
1837
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentsModule, imports: [CommonModule,
|
1661
1838
|
FormsModule,
|
1662
1839
|
ReactiveFormsModule,
|
1663
|
-
NgSelectModule,
|
1664
|
-
NgxPaginationModule, FormsModule,
|
1840
|
+
NgSelectModule, FormsModule,
|
1665
1841
|
ReactiveFormsModule,
|
1666
1842
|
NgSelectModule] }); }
|
1667
1843
|
}
|
@@ -1678,19 +1854,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
1678
1854
|
SelectComponent,
|
1679
1855
|
RadioComponent,
|
1680
1856
|
MultiSelectComponent,
|
1681
|
-
|
1857
|
+
DataTableComponent,
|
1682
1858
|
CodeHighlightComponent,
|
1683
1859
|
BadgeComponent,
|
1684
1860
|
AlertComponent,
|
1685
1861
|
ConfirmationComponent,
|
1686
1862
|
AutofocusDirective,
|
1863
|
+
CustomPaginationComponent,
|
1864
|
+
TreeNodeComponent,
|
1687
1865
|
],
|
1688
1866
|
imports: [
|
1689
1867
|
CommonModule,
|
1690
1868
|
FormsModule,
|
1691
1869
|
ReactiveFormsModule,
|
1692
1870
|
NgSelectModule,
|
1693
|
-
NgxPaginationModule,
|
1694
1871
|
],
|
1695
1872
|
exports: [
|
1696
1873
|
ButtonComponent,
|
@@ -1705,11 +1882,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
1705
1882
|
FormsModule,
|
1706
1883
|
ReactiveFormsModule,
|
1707
1884
|
NgSelectModule,
|
1708
|
-
|
1885
|
+
DataTableComponent,
|
1709
1886
|
CodeHighlightComponent,
|
1710
1887
|
BadgeComponent,
|
1711
1888
|
AlertComponent,
|
1712
1889
|
ConfirmationComponent,
|
1890
|
+
CustomPaginationComponent,
|
1891
|
+
TreeNodeComponent,
|
1713
1892
|
],
|
1714
1893
|
}]
|
1715
1894
|
}] });
|
@@ -1803,5 +1982,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
1803
1982
|
* Generated bundle index. Do not edit.
|
1804
1983
|
*/
|
1805
1984
|
|
1806
|
-
export { AlertComponent, BadgeComponent,
|
1985
|
+
export { AlertComponent, BadgeComponent, ButtonClasses, ButtonComponent, CardComponent, CheckboxComponent, CodeHighlightComponent, ComponentsModule, ConfirmationComponent, ConfirmationService, CustomPaginationComponent, DataTableComponent, FormComponent, InputComponent, LibPortalAngularModule, MultiSelectComponent, NotificationService, RadioComponent, SelectComponent, TextareaComponent, TreeNodeComponent };
|
1807
1986
|
//# sourceMappingURL=lib-portal-angular.mjs.map
|