@open-rlb/ng-bootstrap 2.4.13 → 2.4.15

package/fesm2022/open-rlb-ng-bootstrap.mjs

@@ -6425,6 +6425,7 @@ class DataTableActionsComponent {
           [disabled]="_disabled"
           type="button"
           data-bs-toggle="dropdown"
+          data-bs-popper-config='{"strategy":"fixed"}'
           aria-expanded="false">
           <i class="bi bi-three-dots"></i>
         </button>
@@ -6448,6 +6449,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           [disabled]="_disabled"
           type="button"
           data-bs-toggle="dropdown"
+          data-bs-popper-config='{"strategy":"fixed"}'
           aria-expanded="false">
           <i class="bi bi-three-dots"></i>
         </button>
@@ -7066,7 +7068,7 @@ class DataTableComponent {
         }
     }
     get cols() {
-        return this.columns.length + (this.showActions !== 'row' ? 1 : 0);
+        return this.columns.length + (this.hasActions ? 1 : 0);
     }
     getTableClasses() {
         const classes = ['table'];
@@ -7093,7 +7095,10 @@ class DataTableComponent {
     selectSize() {
         this.currentPageChange.emit(1);
         this.pageSizeChange.emit(parseInt(this.pageSize));
-        this.pagination.emit({ page: 1, size: this.pageSize ? parseInt(this.pageSize) : 20 });
+        this.pagination.emit({
+            page: 1,
+            size: this.pageSize ? parseInt(this.pageSize) : 20,
+        });
     }
     selectPage(ev, page) {
         ev?.preventDefault();
@@ -7101,7 +7106,10 @@ class DataTableComponent {
         if (typeof page !== 'number' || page === this.currentPage || this.loading)
             return;
         this.currentPageChange.emit(page);
-        this.pagination.emit({ page, size: this.pageSize ? parseInt(this.pageSize) : 20 });
+        this.pagination.emit({
+            page,
+            size: this.pageSize ? parseInt(this.pageSize) : 20,
+        });
     }
     next(ev) {
         ev?.preventDefault();
@@ -7110,8 +7118,8 @@ class DataTableComponent {
             return;
         this.currentPageChange.emit((this.currentPage || 1) + 1);
         this.pagination.emit({
-            page: ((this.currentPage || 1) + 1),
-            size: this.pageSize ? parseInt(this.pageSize) : 20
+            page: (this.currentPage || 1) + 1,
+            size: this.pageSize ? parseInt(this.pageSize) : 20,
         });
     }
     prev(ev) {
@@ -7121,16 +7129,10 @@ class DataTableComponent {
             return;
         this.currentPageChange.emit((this.currentPage || 1) - 1);
         this.pagination.emit({
-            page: ((this.currentPage || 1) - 1),
-            size: this.pageSize ? parseInt(this.pageSize) : 20
+            page: (this.currentPage || 1) - 1,
+            size: this.pageSize ? parseInt(this.pageSize) : 20,
         });
     }
-    onPgWeel(ev) {
-        // ev.preventDefault();
-        // const t = ev.target as HTMLElement;
-        // const c = t.parentElement?.parentElement
-        // c?.scrollBy({ left: ev.deltaY < 0 ? -15 : 15 });
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.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: "@if (creationStrategy !== 'none' || title || showRefresh) {\n  <div class=\"row\">\n    <div class=\"col\">\n      @if (title) {\n        <h3 class=\"float-start\">{{ title }}</h3>\n      }\n      @if (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      }\n      @if (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      }\n      @if (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      }\n    </div>\n  </div>\n}\n<div class=\"table-responsive\">\n  <table [ngClass]=\"getTableClasses()\">\n    <thead>\n      <tr>\n        <ng-container #projectedDisplayColumns></ng-container>\n        @if (hasActions) {\n          <th>\n            <span class=\"float-end pe-2\">\n              Actions\n            </span>\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (!loading) {\n        <ng-content select=\"rlb-dt-row\"/>\n      }\n      @if (!loading && items.length === 0) {\n        <rlb-dt-row class=\"text-center\">\n          <rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n            <ng-content select=\"rlb-dt-noitems\"/>\n          </rlb-dt-cell>\n        </rlb-dt-row>\n      }\n      @if (loading) {\n        <rlb-dt-row class=\"text-center\">\n          <rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n            <ng-content select=\"rlb-dt-loading\"/>\n          </rlb-dt-cell>\n        </rlb-dt-row>\n      }\n    </tbody>\n    @if (pagination && paginationMode !== 'none') {\n      <tfoot>\n        <rlb-dt-row>\n          <rlb-dt-cell [col-span]=\"hasActions ? cols+1: cols\" style=\"border: 0\">\n            @if (paginationMode === 'load-more') {\n              <button type=\"button\" class=\"btn btn-primary float-end btn-sm mt-2\"\n                [disabled]=\"loading\" (click)=\"loadMore.emit()\">\n                {{ loadMoreLabel }}\n              </button>\n            }\n            @if (paginationMode === 'pages') {\n              <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                  @for (page of visiblePages; track page) {\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                  }\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                <ul class=\"ps-0 float-end me-3\">\n                  <rlb-select size=\"small\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"selectSize()\"\n                    [disabled]=\"items.length === 0\">\n                    <rlb-option [value]=\"10\">10</rlb-option>\n                    <rlb-option [value]=\"20\">20</rlb-option>\n                    <rlb-option [value]=\"50\">50</rlb-option>\n                    <rlb-option [value]=\"100\">100</rlb-option>\n                  </rlb-select>\n                </ul>\n              </nav>\n            }\n          </rlb-dt-cell>\n        </rlb-dt-row>\n      </tfoot>\n    }\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] }); }
 }