@open-rlb/ng-bootstrap 2.4.8 → 2.4.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.
@@ -6534,6 +6534,7 @@ class DataTableComponent {
6534
6534
  this.currentPageChange = new EventEmitter();
6535
6535
  this.pageSizeChange = new EventEmitter();
6536
6536
  this.pagination = new EventEmitter();
6537
+ this.MAX_VISIBLE_PAGES = 7;
6537
6538
  }
6538
6539
  ngOnInit() {
6539
6540
  if (this.currentPage == null) {
@@ -6550,6 +6551,27 @@ class DataTableComponent {
6550
6551
  return (this.rows?.toArray()?.some((o) => o.hasActions) ||
6551
6552
  this.showActions !== 'row');
6552
6553
  }
6554
+ get visiblePages() {
6555
+ const total = this.pages;
6556
+ const current = this.currentPage || 1;
6557
+ const pages = [];
6558
+ if (total <= this.MAX_VISIBLE_PAGES) {
6559
+ for (let i = 1; i <= total; i++)
6560
+ pages.push(i);
6561
+ }
6562
+ else {
6563
+ if (current <= 4) {
6564
+ pages.push(1, 2, 3, 4, 5, '...', total);
6565
+ }
6566
+ else if (current >= total - 3) {
6567
+ pages.push(1, '...', total - 4, total - 3, total - 2, total - 1, total);
6568
+ }
6569
+ else {
6570
+ pages.push(1, '...', current - 1, current, current + 1, '...', total);
6571
+ }
6572
+ }
6573
+ return pages;
6574
+ }
6553
6575
  ngAfterViewInit() {
6554
6576
  this._renderHeaders();
6555
6577
  }
@@ -6604,7 +6626,7 @@ class DataTableComponent {
6604
6626
  selectPage(ev, page) {
6605
6627
  ev?.preventDefault();
6606
6628
  ev?.stopPropagation();
6607
- if (page === this.currentPage || this.loading)
6629
+ if (typeof page !== 'number' || page === this.currentPage || this.loading)
6608
6630
  return;
6609
6631
  this.currentPageChange.emit(page);
6610
6632
  this.pagination.emit({ page, size: this.pageSize ? parseInt(this.pageSize) : 20 });
@@ -6632,17 +6654,17 @@ class DataTableComponent {
6632
6654
  });
6633
6655
  }
6634
6656
  onPgWeel(ev) {
6635
- ev.preventDefault();
6636
- const t = ev.target;
6637
- const c = t.parentElement?.parentElement;
6638
- c?.scrollBy({ left: ev.deltaY < 0 ? -15 : 15 });
6657
+ // ev.preventDefault();
6658
+ // const t = ev.target as HTMLElement;
6659
+ // const c = t.parentElement?.parentElement
6660
+ // c?.scrollBy({ left: ev.deltaY < 0 ? -15 : 15 });
6639
6661
  }
6640
6662
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6641
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: DataTableComponent, isStandalone: false, selector: "rlb-dt-table", inputs: { title: "title", creationStrategy: ["creation-strategy", "creationStrategy"], creationUrl: ["creation-url", "creationUrl"], items: "items", paginationMode: ["pagination-mode", "paginationMode"], loading: ["loading", "loading", booleanAttribute], tableHover: ["table-hover", "tableHover", booleanAttribute], tableStriped: ["table-striped", "tableStriped", booleanAttribute], tableStripedColumns: ["table-striped-columns", "tableStripedColumns", booleanAttribute], tableBordered: ["table-bordered", "tableBordered", booleanAttribute], tableBorderless: ["table-borderless", "tableBorderless", booleanAttribute], tableSmall: ["table-small", "tableSmall", booleanAttribute], showRefresh: ["show-refresh", "showRefresh", booleanAttribute], totalItems: ["total-items", "totalItems", numberAttribute], currentPage: ["current-page", "currentPage", numberAttribute], pageSize: ["page-size", "pageSize", numberAttribute], showActions: "showActions", loadMoreLabel: "loadMoreLabel" }, outputs: { createItem: "create-item", refreshItem: "refresh-item", loadMore: "load-more", currentPageChange: "current-pageChange", pageSizeChange: "page-sizeChange", pagination: "pagination" }, queries: [{ propertyName: "rows", predicate: DataTableRowComponent }, { propertyName: "columns", predicate: DataTableHeaderComponent }], viewQueries: [{ propertyName: "_projectedDisplayColumns", first: true, predicate: ["projectedDisplayColumns"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"row\" *ngIf=\"creationStrategy !== 'none' || title || showRefresh\">\n <div class=\"col\">\n <h3 *ngIf=\"title\" class=\"float-start\">{{ title }}</h3>\n <ng-container *ngIf=\"showRefresh\">\n <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"refreshItem.emit()\"\n [disabled]=\"loading\">\n <i class=\"fa-solid fa-arrows-rotate\"></i>\n </button>\n </ng-container>\n <ng-container *ngIf=\"creationStrategy === 'page'\">\n <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" [routerLink]=\"creationUrl\">\n <i class=\"fa-solid fa-plus\"></i>\n </button>\n </ng-container>\n <ng-container *ngIf=\"creationStrategy === 'modal'\">\n <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"createItem.emit()\">\n <i class=\"fa-solid fa-plus\"></i>\n </button>\n </ng-container>\n </div>\n</div>\n<div class=\"table-responsive\">\n <table [ngClass]=\"getTableClasses()\">\n\t\t<thead>\n\t\t<tr>\n\t\t\t<ng-container #projectedDisplayColumns></ng-container>\n\t\t\t<th *ngIf=\"hasActions\">\n <span class=\"float-end pe-2\">\n Actions\n </span>\n\t\t\t</th>\n\t\t</tr>\n\t\t</thead>\n\t\t<tbody>\n\t\t<ng-content *ngIf=\"!loading\" select=\"rlb-dt-row\"/>\n\t\t<rlb-dt-row *ngIf=\"!loading && items?.length === 0\" class=\"text-center\">\n\t\t\t<rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n\t\t\t\t<ng-content select=\"rlb-dt-noitems\"/>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t<rlb-dt-row *ngIf=\"loading\" class=\"text-center\">\n\t\t\t<rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n\t\t\t\t<ng-content select=\"rlb-dt-loading\"/>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t</tbody>\n\t\t<tfoot *ngIf=\"pagination && paginationMode !== 'none'\">\n\t\t<rlb-dt-row>\n\t\t\t<rlb-dt-cell [col-span]=\"hasActions ? cols+1: cols\" style=\"border: 0\">\n\t\t\t\t<button *ngIf=\"paginationMode === 'load-more'\" type=\"button\" class=\"btn btn-primary float-end btn-sm mt-2\"\n\t\t\t\t\t\t\t\t[disabled]=\"loading\" (click)=\"loadMore.emit()\">\n\t\t\t\t\t{{ loadMoreLabel }}\n\t\t\t\t</button>\n\t\t\t\t<ng-container *ngIf=\"paginationMode === 'pages'\">\n\t\t\t\t\t<nav aria-label=\"Page navigation example\">\n\t\t\t\t\t\t<ul class=\"pagination float-end pagination-sm\">\n\t\t\t\t\t\t\t<li class=\"page-item\">\n\t\t\t\t\t\t\t\t<a class=\"page-link d-block\" [class.disabled]=\"currentPage === 1\" href=\"#\" aria-label=\"Previous\"\n\t\t\t\t\t\t\t\t\t (click)=\"prev($event)\">\n\t\t\t\t\t\t\t\t\t<span aria-hidden=\"true\">&laquo;</span>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<span class=\"d-flex overflow-x-hidden overflow-y-hidden\" (wheel)=\"onPgWeel($event)\"\n\t\t\t\t\t\t\t\t\t\tstyle=\"max-width: 200px;\">\n <ng-container *ngFor=\"let page of [].constructor(pages); let i = index\">\n <li class=\"page-item\" [class.active]=\"currentPage === i+1\">\n <a class=\"page-link d-block\" href=\"#\" (click)=\"selectPage($event, i+1)\">{{i+1}}</a>\n </li>\n </ng-container>\n </span>\n\t\t\t\t\t\t\t<li class=\"page-item\">\n\t\t\t\t\t\t\t\t<a class=\"page-link d-block\" [class.disabled]=\"currentPage === pages\" href=\"#\" aria-label=\"Next\"\n\t\t\t\t\t\t\t\t\t (click)=\"next($event)\">\n\t\t\t\t\t\t\t\t\t<span aria-hidden=\"true\">&raquo;</span>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t<ul class=\"ps-0 float-end me-3\">\n\t\t\t\t\t\t\t<rlb-select size=\"small\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"selectSize()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[disabled]=\"items.length === 0\">\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"10\">10</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"20\">20</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"50\">50</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"100\">100</rlb-option>\n\t\t\t\t\t\t\t</rlb-select>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</nav>\n\t\t\t\t</ng-container>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t</tfoot>\n\t</table>\n</div>\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: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DataTableCellComponent, selector: "rlb-dt-cell", inputs: ["col-span", "class", "style"] }, { kind: "component", type: DataTableRowComponent, selector: "rlb-dt-row", inputs: ["class", "style"], outputs: ["rowClick"] }, { kind: "component", type: SelectComponent, selector: "rlb-select", inputs: ["placeholder", "size", "disabled", "readonly", "multiple", "display", "id", "enable-validation"] }, { kind: "component", type: OptionComponent, selector: "rlb-option", inputs: ["disabled", "value", "class"] }] }); }
6663
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: DataTableComponent, isStandalone: false, selector: "rlb-dt-table", inputs: { title: "title", creationStrategy: ["creation-strategy", "creationStrategy"], creationUrl: ["creation-url", "creationUrl"], items: "items", paginationMode: ["pagination-mode", "paginationMode"], loading: ["loading", "loading", booleanAttribute], tableHover: ["table-hover", "tableHover", booleanAttribute], tableStriped: ["table-striped", "tableStriped", booleanAttribute], tableStripedColumns: ["table-striped-columns", "tableStripedColumns", booleanAttribute], tableBordered: ["table-bordered", "tableBordered", booleanAttribute], tableBorderless: ["table-borderless", "tableBorderless", booleanAttribute], tableSmall: ["table-small", "tableSmall", booleanAttribute], showRefresh: ["show-refresh", "showRefresh", booleanAttribute], totalItems: ["total-items", "totalItems", numberAttribute], currentPage: ["current-page", "currentPage", numberAttribute], pageSize: ["page-size", "pageSize", numberAttribute], showActions: "showActions", loadMoreLabel: "loadMoreLabel" }, outputs: { createItem: "create-item", refreshItem: "refresh-item", loadMore: "load-more", currentPageChange: "current-pageChange", pageSizeChange: "page-sizeChange", pagination: "pagination" }, queries: [{ propertyName: "rows", predicate: DataTableRowComponent }, { propertyName: "columns", predicate: DataTableHeaderComponent }], viewQueries: [{ propertyName: "_projectedDisplayColumns", first: true, predicate: ["projectedDisplayColumns"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"row\" *ngIf=\"creationStrategy !== 'none' || title || showRefresh\">\n <div class=\"col\">\n <h3 *ngIf=\"title\" class=\"float-start\">{{ title }}</h3>\n <ng-container *ngIf=\"showRefresh\">\n <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"refreshItem.emit()\"\n [disabled]=\"loading\">\n <i class=\"fa-solid fa-arrows-rotate\"></i>\n </button>\n </ng-container>\n <ng-container *ngIf=\"creationStrategy === 'page'\">\n <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" [routerLink]=\"creationUrl\">\n <i class=\"fa-solid fa-plus\"></i>\n </button>\n </ng-container>\n <ng-container *ngIf=\"creationStrategy === 'modal'\">\n <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"createItem.emit()\">\n <i class=\"fa-solid fa-plus\"></i>\n </button>\n </ng-container>\n </div>\n</div>\n<div class=\"table-responsive\">\n <table [ngClass]=\"getTableClasses()\">\n\t\t<thead>\n\t\t<tr>\n\t\t\t<ng-container #projectedDisplayColumns></ng-container>\n\t\t\t<th *ngIf=\"hasActions\">\n <span class=\"float-end pe-2\">\n Actions\n </span>\n\t\t\t</th>\n\t\t</tr>\n\t\t</thead>\n\t\t<tbody>\n\t\t<ng-content *ngIf=\"!loading\" select=\"rlb-dt-row\"/>\n\t\t<rlb-dt-row *ngIf=\"!loading && items?.length === 0\" class=\"text-center\">\n\t\t\t<rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n\t\t\t\t<ng-content select=\"rlb-dt-noitems\"/>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t<rlb-dt-row *ngIf=\"loading\" class=\"text-center\">\n\t\t\t<rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n\t\t\t\t<ng-content select=\"rlb-dt-loading\"/>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t</tbody>\n\t\t<tfoot *ngIf=\"pagination && paginationMode !== 'none'\">\n\t\t<rlb-dt-row>\n\t\t\t<rlb-dt-cell [col-span]=\"hasActions ? cols+1: cols\" style=\"border: 0\">\n\t\t\t\t<button *ngIf=\"paginationMode === 'load-more'\" type=\"button\" class=\"btn btn-primary float-end btn-sm mt-2\"\n\t\t\t\t\t\t\t\t[disabled]=\"loading\" (click)=\"loadMore.emit()\">\n\t\t\t\t\t{{ loadMoreLabel }}\n\t\t\t\t</button>\n\t\t\t\t<ng-container *ngIf=\"paginationMode === 'pages'\">\n\t\t\t\t\t<nav aria-label=\"Page navigation example\">\n <ul class=\"pagination float-end pagination-sm\">\n <li class=\"page-item\">\n <a class=\"page-link d-block\" [class.disabled]=\"currentPage === 1\" href=\"#\" aria-label=\"Previous\"\n (click)=\"prev($event)\">\n <span aria-hidden=\"true\">&laquo;</span>\n </a>\n </li>\n\n <ng-container *ngFor=\"let page of visiblePages\">\n <li class=\"page-item\"\n [class.active]=\"currentPage === page\"\n [class.disabled]=\"page === '...'\">\n <a class=\"page-link d-block\"\n href=\"#\"\n (click)=\"selectPage($event, page)\">\n {{ page }}\n </a>\n </li>\n </ng-container>\n\n <li class=\"page-item\">\n <a class=\"page-link d-block\" [class.disabled]=\"currentPage === pages\" href=\"#\" aria-label=\"Next\"\n (click)=\"next($event)\">\n <span aria-hidden=\"true\">&raquo;</span>\n </a>\n </li>\n </ul>\n\t\t\t\t\t\t<ul class=\"ps-0 float-end me-3\">\n\t\t\t\t\t\t\t<rlb-select size=\"small\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"selectSize()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[disabled]=\"items.length === 0\">\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"10\">10</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"20\">20</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"50\">50</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"100\">100</rlb-option>\n\t\t\t\t\t\t\t</rlb-select>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</nav>\n\t\t\t\t</ng-container>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t</tfoot>\n\t</table>\n</div>\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: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DataTableCellComponent, selector: "rlb-dt-cell", inputs: ["col-span", "class", "style"] }, { kind: "component", type: DataTableRowComponent, selector: "rlb-dt-row", inputs: ["class", "style"], outputs: ["rowClick"] }, { kind: "component", type: SelectComponent, selector: "rlb-select", inputs: ["placeholder", "size", "disabled", "readonly", "multiple", "display", "id", "enable-validation"] }, { kind: "component", type: OptionComponent, selector: "rlb-option", inputs: ["disabled", "value", "class"] }] }); }
6642
6664
  }
6643
6665
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataTableComponent, decorators: [{
6644
6666
  type: Component,
6645
- args: [{ selector: 'rlb-dt-table', standalone: false, template: "<div class=\"row\" *ngIf=\"creationStrategy !== 'none' || title || showRefresh\">\n <div class=\"col\">\n <h3 *ngIf=\"title\" class=\"float-start\">{{ title }}</h3>\n <ng-container *ngIf=\"showRefresh\">\n <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"refreshItem.emit()\"\n [disabled]=\"loading\">\n <i class=\"fa-solid fa-arrows-rotate\"></i>\n </button>\n </ng-container>\n <ng-container *ngIf=\"creationStrategy === 'page'\">\n <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" [routerLink]=\"creationUrl\">\n <i class=\"fa-solid fa-plus\"></i>\n </button>\n </ng-container>\n <ng-container *ngIf=\"creationStrategy === 'modal'\">\n <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"createItem.emit()\">\n <i class=\"fa-solid fa-plus\"></i>\n </button>\n </ng-container>\n </div>\n</div>\n<div class=\"table-responsive\">\n <table [ngClass]=\"getTableClasses()\">\n\t\t<thead>\n\t\t<tr>\n\t\t\t<ng-container #projectedDisplayColumns></ng-container>\n\t\t\t<th *ngIf=\"hasActions\">\n <span class=\"float-end pe-2\">\n Actions\n </span>\n\t\t\t</th>\n\t\t</tr>\n\t\t</thead>\n\t\t<tbody>\n\t\t<ng-content *ngIf=\"!loading\" select=\"rlb-dt-row\"/>\n\t\t<rlb-dt-row *ngIf=\"!loading && items?.length === 0\" class=\"text-center\">\n\t\t\t<rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n\t\t\t\t<ng-content select=\"rlb-dt-noitems\"/>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t<rlb-dt-row *ngIf=\"loading\" class=\"text-center\">\n\t\t\t<rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n\t\t\t\t<ng-content select=\"rlb-dt-loading\"/>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t</tbody>\n\t\t<tfoot *ngIf=\"pagination && paginationMode !== 'none'\">\n\t\t<rlb-dt-row>\n\t\t\t<rlb-dt-cell [col-span]=\"hasActions ? cols+1: cols\" style=\"border: 0\">\n\t\t\t\t<button *ngIf=\"paginationMode === 'load-more'\" type=\"button\" class=\"btn btn-primary float-end btn-sm mt-2\"\n\t\t\t\t\t\t\t\t[disabled]=\"loading\" (click)=\"loadMore.emit()\">\n\t\t\t\t\t{{ loadMoreLabel }}\n\t\t\t\t</button>\n\t\t\t\t<ng-container *ngIf=\"paginationMode === 'pages'\">\n\t\t\t\t\t<nav aria-label=\"Page navigation example\">\n\t\t\t\t\t\t<ul class=\"pagination float-end pagination-sm\">\n\t\t\t\t\t\t\t<li class=\"page-item\">\n\t\t\t\t\t\t\t\t<a class=\"page-link d-block\" [class.disabled]=\"currentPage === 1\" href=\"#\" aria-label=\"Previous\"\n\t\t\t\t\t\t\t\t\t (click)=\"prev($event)\">\n\t\t\t\t\t\t\t\t\t<span aria-hidden=\"true\">&laquo;</span>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<span class=\"d-flex overflow-x-hidden overflow-y-hidden\" (wheel)=\"onPgWeel($event)\"\n\t\t\t\t\t\t\t\t\t\tstyle=\"max-width: 200px;\">\n <ng-container *ngFor=\"let page of [].constructor(pages); let i = index\">\n <li class=\"page-item\" [class.active]=\"currentPage === i+1\">\n <a class=\"page-link d-block\" href=\"#\" (click)=\"selectPage($event, i+1)\">{{i+1}}</a>\n </li>\n </ng-container>\n </span>\n\t\t\t\t\t\t\t<li class=\"page-item\">\n\t\t\t\t\t\t\t\t<a class=\"page-link d-block\" [class.disabled]=\"currentPage === pages\" href=\"#\" aria-label=\"Next\"\n\t\t\t\t\t\t\t\t\t (click)=\"next($event)\">\n\t\t\t\t\t\t\t\t\t<span aria-hidden=\"true\">&raquo;</span>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t<ul class=\"ps-0 float-end me-3\">\n\t\t\t\t\t\t\t<rlb-select size=\"small\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"selectSize()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[disabled]=\"items.length === 0\">\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"10\">10</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"20\">20</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"50\">50</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"100\">100</rlb-option>\n\t\t\t\t\t\t\t</rlb-select>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</nav>\n\t\t\t\t</ng-container>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t</tfoot>\n\t</table>\n</div>\n" }]
6667
+ args: [{ selector: 'rlb-dt-table', standalone: false, template: "<div class=\"row\" *ngIf=\"creationStrategy !== 'none' || title || showRefresh\">\n <div class=\"col\">\n <h3 *ngIf=\"title\" class=\"float-start\">{{ title }}</h3>\n <ng-container *ngIf=\"showRefresh\">\n <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"refreshItem.emit()\"\n [disabled]=\"loading\">\n <i class=\"fa-solid fa-arrows-rotate\"></i>\n </button>\n </ng-container>\n <ng-container *ngIf=\"creationStrategy === 'page'\">\n <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" [routerLink]=\"creationUrl\">\n <i class=\"fa-solid fa-plus\"></i>\n </button>\n </ng-container>\n <ng-container *ngIf=\"creationStrategy === 'modal'\">\n <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"createItem.emit()\">\n <i class=\"fa-solid fa-plus\"></i>\n </button>\n </ng-container>\n </div>\n</div>\n<div class=\"table-responsive\">\n <table [ngClass]=\"getTableClasses()\">\n\t\t<thead>\n\t\t<tr>\n\t\t\t<ng-container #projectedDisplayColumns></ng-container>\n\t\t\t<th *ngIf=\"hasActions\">\n <span class=\"float-end pe-2\">\n Actions\n </span>\n\t\t\t</th>\n\t\t</tr>\n\t\t</thead>\n\t\t<tbody>\n\t\t<ng-content *ngIf=\"!loading\" select=\"rlb-dt-row\"/>\n\t\t<rlb-dt-row *ngIf=\"!loading && items?.length === 0\" class=\"text-center\">\n\t\t\t<rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n\t\t\t\t<ng-content select=\"rlb-dt-noitems\"/>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t<rlb-dt-row *ngIf=\"loading\" class=\"text-center\">\n\t\t\t<rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n\t\t\t\t<ng-content select=\"rlb-dt-loading\"/>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t</tbody>\n\t\t<tfoot *ngIf=\"pagination && paginationMode !== 'none'\">\n\t\t<rlb-dt-row>\n\t\t\t<rlb-dt-cell [col-span]=\"hasActions ? cols+1: cols\" style=\"border: 0\">\n\t\t\t\t<button *ngIf=\"paginationMode === 'load-more'\" type=\"button\" class=\"btn btn-primary float-end btn-sm mt-2\"\n\t\t\t\t\t\t\t\t[disabled]=\"loading\" (click)=\"loadMore.emit()\">\n\t\t\t\t\t{{ loadMoreLabel }}\n\t\t\t\t</button>\n\t\t\t\t<ng-container *ngIf=\"paginationMode === 'pages'\">\n\t\t\t\t\t<nav aria-label=\"Page navigation example\">\n <ul class=\"pagination float-end pagination-sm\">\n <li class=\"page-item\">\n <a class=\"page-link d-block\" [class.disabled]=\"currentPage === 1\" href=\"#\" aria-label=\"Previous\"\n (click)=\"prev($event)\">\n <span aria-hidden=\"true\">&laquo;</span>\n </a>\n </li>\n\n <ng-container *ngFor=\"let page of visiblePages\">\n <li class=\"page-item\"\n [class.active]=\"currentPage === page\"\n [class.disabled]=\"page === '...'\">\n <a class=\"page-link d-block\"\n href=\"#\"\n (click)=\"selectPage($event, page)\">\n {{ page }}\n </a>\n </li>\n </ng-container>\n\n <li class=\"page-item\">\n <a class=\"page-link d-block\" [class.disabled]=\"currentPage === pages\" href=\"#\" aria-label=\"Next\"\n (click)=\"next($event)\">\n <span aria-hidden=\"true\">&raquo;</span>\n </a>\n </li>\n </ul>\n\t\t\t\t\t\t<ul class=\"ps-0 float-end me-3\">\n\t\t\t\t\t\t\t<rlb-select size=\"small\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"selectSize()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[disabled]=\"items.length === 0\">\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"10\">10</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"20\">20</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"50\">50</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"100\">100</rlb-option>\n\t\t\t\t\t\t\t</rlb-select>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</nav>\n\t\t\t\t</ng-container>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t</tfoot>\n\t</table>\n</div>\n" }]
6646
6668
  }], propDecorators: { title: [{
6647
6669
  type: Input,
6648
6670
  args: [{ alias: 'title' }]