@open-rlb/ng-bootstrap 2.4.7 → 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.
@@ -2069,11 +2069,13 @@ class ModalDirective {
2069
2069
  this.el = el;
2070
2070
  this.renderer = renderer;
2071
2071
  this.innerModalService = innerModalService;
2072
+ this.triggerElement = null;
2072
2073
  this._openChange_f = (e) => {
2073
2074
  this.innerModalService.eventModal(e.type.replace('.bs.modal', ''), this._modalReason, this.id, this.instance?.result);
2074
2075
  };
2075
2076
  }
2076
2077
  ngOnInit() {
2078
+ this.triggerElement = document.activeElement;
2077
2079
  // Check prop existence
2078
2080
  // This approach permits to handle empty string '' case
2079
2081
  const hasContent = Object.prototype.hasOwnProperty.call(this.instance.data, 'content') &&
@@ -2166,6 +2168,7 @@ class ModalDirective {
2166
2168
  this._modalReason = reason;
2167
2169
  }
2168
2170
  this.bsModal?.hide();
2171
+ this.triggerElement?.focus();
2169
2172
  }
2170
2173
  initButtons() {
2171
2174
  this._reasonButtons = this.contentElement.querySelectorAll('[data-modal-reason]');
@@ -2175,10 +2178,12 @@ class ModalDirective {
2175
2178
  this._modalReason = btn.getAttribute('data-modal-reason');
2176
2179
  if (this._modalReason === 'cancel' || this._modalReason === 'close') {
2177
2180
  this.bsModal?.hide();
2181
+ this.triggerElement?.focus();
2178
2182
  }
2179
2183
  if (this._modalReason === 'ok') {
2180
2184
  if (this.instance.valid) {
2181
2185
  this.bsModal?.hide();
2186
+ this.triggerElement?.focus();
2182
2187
  }
2183
2188
  }
2184
2189
  });
@@ -6529,6 +6534,7 @@ class DataTableComponent {
6529
6534
  this.currentPageChange = new EventEmitter();
6530
6535
  this.pageSizeChange = new EventEmitter();
6531
6536
  this.pagination = new EventEmitter();
6537
+ this.MAX_VISIBLE_PAGES = 7;
6532
6538
  }
6533
6539
  ngOnInit() {
6534
6540
  if (this.currentPage == null) {
@@ -6545,6 +6551,27 @@ class DataTableComponent {
6545
6551
  return (this.rows?.toArray()?.some((o) => o.hasActions) ||
6546
6552
  this.showActions !== 'row');
6547
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
+ }
6548
6575
  ngAfterViewInit() {
6549
6576
  this._renderHeaders();
6550
6577
  }
@@ -6599,7 +6626,7 @@ class DataTableComponent {
6599
6626
  selectPage(ev, page) {
6600
6627
  ev?.preventDefault();
6601
6628
  ev?.stopPropagation();
6602
- if (page === this.currentPage || this.loading)
6629
+ if (typeof page !== 'number' || page === this.currentPage || this.loading)
6603
6630
  return;
6604
6631
  this.currentPageChange.emit(page);
6605
6632
  this.pagination.emit({ page, size: this.pageSize ? parseInt(this.pageSize) : 20 });
@@ -6627,17 +6654,17 @@ class DataTableComponent {
6627
6654
  });
6628
6655
  }
6629
6656
  onPgWeel(ev) {
6630
- ev.preventDefault();
6631
- const t = ev.target;
6632
- const c = t.parentElement?.parentElement;
6633
- 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 });
6634
6661
  }
6635
6662
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6636
- 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"] }] }); }
6637
6664
  }
6638
6665
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataTableComponent, decorators: [{
6639
6666
  type: Component,
6640
- 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" }]
6641
6668
  }], propDecorators: { title: [{
6642
6669
  type: Input,
6643
6670
  args: [{ alias: 'title' }]