lib-portal-angular 0.0.34 → 0.0.35
Sign up to get free protection for your applications and to get access to all the features.
- 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,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)}\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
|