npm - @biit-solutions/wizardry-theme - Versions diffs - 1.21.35 → 1.22.1 - Mend

@biit-solutions/wizardry-theme 1.21.35 → 1.22.1

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.

Files changed (78) hide show

package/esm2020/table/biit-datatable/biit-datatable.component.mjs CHANGED Viewed

@@ -96,10 +96,10 @@ export class BiitDatatableComponent {
     }
 }
 BiitDatatableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDatatableComponent, deps: [{ token: i1.BiitIconService }], target: i0.ɵɵFactoryTarget.Component });
-BiitDatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitDatatableComponent, selector: "biit-datatable", inputs: { data: "data", columns: "columns", pageSize: "pageSize", pageSizeList: "pageSizeList", loading: "loading", selectable: "selectable", singleSelection: "singleSelection", scrollbarH: "scrollbarH", hideHeader: "hideHeader", hideFooter: "hideFooter", serverSide: "serverSide", page: "page" }, outputs: { onSelection: "onSelection", onPageChange: "onPageChange" }, providers: [provideTranslocoScope({ scope: 'wizardry-theme/table', alias: 't' })], queries: [{ propertyName: "actionsTpl", first: true, predicate: ["actions"], descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }], ngImport: i0, template: "<div id=\"biit-table\" class=\"table-canvas\" *transloco=\"let t\">\n  <div class=\"top\" *ngIf=\"!hideHeader\">\n    <div id=\"menu\" class=\"action-bar\">\n      <biit-vertical-menu *ngIf=\"actionsTpl\" class=\"vertical-menu\">\n        <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n      </biit-vertical-menu>\n      <div *ngIf=\"actionsTpl\" class=\"horizontal-menu default-menu\">\n        <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n      </div>\n      <div class=\"default-menu\" *ngIf=\"!actionsTpl\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div id=\"options\" class=\"options\">\n      <biit-input-text id=\"search\" #searchInput\n                       [ngModel]=\"search\"\n                       (onActionPerformed)=\"\n                         onFilter($event, true);\n                       \"\n                       (ngModelChange)=\"onFilter($event)\"\n                       (focusout)=\"searchInput.value = search\"\n                       icon=\"search\"\n                       [placeholder]=\"t('t.search')\"\n      ></biit-input-text>\n      <biit-multiselect id=\"column-selector\" [ngModel]=\"_columns\"\n                        (ngModelChange)=\"setColumnVisibility($event)\"\n                        [data]=\"allColumns\"\n                        label=\"name\"\n                        value=\"visible\"\n                        [type]=\"BiitMultiselectType.ICON\"\n                        [title]=\"t('t.column-selector')\"\n                        [compact]=\"true\"\n      ></biit-multiselect>\n    </div>\n  </div>\n  <div id=\"content\" class=\"table\">\n    <biit-progress-bar *ngIf=\"loading\"></biit-progress-bar>\n    <ng-container *ngIf=\"!serverSide\">\n      <ngx-datatable #table\n                     [rows]=\"data\"\n                     [columns]=\"_columns\"\n                     [columnMode]=\"'force'\"\n                     [headerHeight]=\"42\"\n                     [footerHeight]=\"hideFooter ? 0 : 34\"\n                     [rowHeight]=\"'auto'\"\n                     [reorderable]=\"false\"\n                     [selectionType]=\"SelectionType.checkbox\"\n                     [selected]=\"selected\"\n                     (select)=\"onSelect($event)\"\n                     (activate)=\"onActivate($event)\"\n                     [virtualization]=\"false\"\n                     [scrollbarVDynamic]=\"true\"\n                     [limit]=\"pageSize\"\n                     [scrollbarH]=\"scrollbarH\"\n                     [messages]=\"{emptyMessage: t('t.empty-message')}\"\n      >\n        <ngx-datatable-column *ngIf=\"selectable && !singleSelection\"\n                              #chkbox\n                              [width]=\"42\"\n                              [sortable]=\"false\"\n                              [canAutoResize]=\"false\"\n                              [draggable]=\"false\"\n                              [resizeable]=\"false\"\n                              [name]=\"'chkbox'\"\n        >\n          <ng-template\n            ngx-datatable-header-template\n            let-value=\"value\"\n            let-allRowsSelected=\"allRowsSelected\"\n            let-selectFn=\"selectFn\"\n          >\n            <biit-checkbox [ngModel]=\"allRowsSelected\" (ngModelChange)=\"selectFn(!allRowsSelected)\"></biit-checkbox>\n          </ng-template>\n          <ng-template\n            ngx-datatable-cell-template\n            let-value=\"value\"\n            let-isSelected=\"isSelected\"\n            let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\n          >\n            <biit-checkbox [ngModel]=\"isSelected\" (ngModelChange)=\"onCheckboxChangeFn($event)\"></biit-checkbox>\n          </ng-template>\n        </ngx-datatable-column>\n\n        <ngx-datatable-column *ngFor=\"let column of _columns\"\n                              [name]=\"column.name\"\n                              [prop]=\"column.prop\"\n                              [checkboxable]=\"column.checkboxable\"\n                              [frozenLeft]=\"column.frozenLeft\"\n                              [frozenRight]=\"column.frozenRight\"\n                              [flexGrow]=\"column.flexGrow\"\n                              [minWidth]=\"column.minWidth\"\n                              [maxWidth]=\"column.maxWidth\"\n                              [width]=\"column.width\"\n                              [resizeable]=\"column.resizeable\"\n                              [comparator]=\"column.comparator\"\n                              [pipe]=\"column.pipe\"\n                              [sortable]=\"column.sortable\"\n                              [draggable]=\"column.draggable\"\n                              [canAutoResize]=\"column.canAutoResize\"\n                              [cellTemplate]=\"column.cellTemplate\"\n                              [ghostCellTemplate]=\"column.ghostCellTemplate\"\n                              [treeToggleTemplate]=\"column.treeToggleTemplate\"\n                              [cellClass]=\"column.cellClass\"\n                              [headerTemplate]=\"column.headerTemplate\"\n                              [headerClass]=\"column.headerClass\"\n                              [headerCheckboxable]=\"column.headerCheckboxable\"\n                              [isTreeColumn]=\"column.isTreeColumn\"\n                              [treeLevelIndent]=\"column.treeLevelIndent\"\n                              [summaryFunc]=\"column.summaryFunc\"\n                              [summaryTemplate]=\"column.summaryTemplate\"\n        ></ngx-datatable-column>\n\n        <ngx-datatable-footer id=\"datatable-footer\">\n          <ng-template\n            ngx-datatable-footer-template\n            let-rowCount=\"rowCount\"\n            let-pageSizeCurrent=\"pageSize\"\n            let-selectedCount=\"selectedCount\"\n            let-curPage=\"curPage\"\n            let-offset=\"offset\"\n          >\n            <div class=\"label\">\n              <span>{{ t('t.total') }}: </span><span id=\"total-number-of-items\">{{rowCount}}</span>\n              <span *ngIf=\"selectedCount\">&nbsp;&nbsp;|&nbsp;&nbsp;{{ t('t.selected') }}: </span><span *ngIf=\"selectedCount\" id=\"number-of-items-selected\">{{selectedCount}}</span>\n            </div>\n            <div class=\"pagination\" [style.display]=\"!((rowCount / pageSize) > 1) ? 'none' : null\">\n              <biit-datatable-pager #pager\n                                    [page]=\"curPage\"\n                                    [size]=\"pageSizeCurrent\"\n                                    [count]=\"rowCount\"\n                                    [hidden]=\"!((rowCount / pageSize) > 1)\"\n                                    (change)=\"table.onFooterPage($event)\">\n              </biit-datatable-pager>\n            </div>\n            <div class=\"page-items\" *ngIf=\"pageSizeList\">\n              <div *ngIf=\"pageSizeList?.length\">\n                <span>{{ t('t.rows-per-page') }}:</span>\n                <select [(ngModel)]=\"pageSize\"\n                        (ngModelChange)=\"pager.size = $event\">\n                  <option *ngFor=\"let size of pageSizeList\"\n                          [ngValue]=\"size\"\n                  >\n                    {{size}}\n                  </option>\n                </select>\n              </div>\n            </div>\n          </ng-template>\n        </ngx-datatable-footer>\n      </ngx-datatable>\n    </ng-container>\n\n    <ng-container *ngIf=\"serverSide\">\n      <ngx-datatable #table\n                     [rows]=\"data\"\n                     [columns]=\"_columns\"\n                     [columnMode]=\"'force'\"\n                     [headerHeight]=\"42\"\n                     [footerHeight]=\"hideFooter ? 0 : 34\"\n                     [rowHeight]=\"'auto'\"\n                     [reorderable]=\"false\"\n                     [selectionType]=\"SelectionType.checkbox\"\n                     [selected]=\"selected\"\n                     (select)=\"onSelect($event)\"\n                     (activate)=\"onActivate($event)\"\n                     [virtualization]=\"false\"\n                     [scrollbarVDynamic]=\"true\"\n                     [scrollbarH]=\"scrollbarH\"\n                     [messages]=\"{emptyMessage: t('t.empty-message')}\"\n                     [externalPaging]=\"true\"\n                     [count]=\"page.totalElements\"\n                     [offset]=\"page.pageNumber\"\n                     [limit]=\"page.pageSize\"\n                     (page)=\"onFooterPageChange($event)\"\n      >\n        <ngx-datatable-column *ngIf=\"selectable && !singleSelection\"\n                              #chkbox\n                              [width]=\"42\"\n                              [sortable]=\"false\"\n                              [canAutoResize]=\"false\"\n                              [draggable]=\"false\"\n                              [resizeable]=\"false\"\n                              [name]=\"'chkbox'\"\n        >\n          <ng-template\n            ngx-datatable-header-template\n            let-value=\"value\"\n            let-allRowsSelected=\"allRowsSelected\"\n            let-selectFn=\"selectFn\"\n          >\n            <biit-checkbox [ngModel]=\"allRowsSelected\" (ngModelChange)=\"selectFn(!allRowsSelected)\"></biit-checkbox>\n          </ng-template>\n          <ng-template\n            ngx-datatable-cell-template\n            let-value=\"value\"\n            let-isSelected=\"isSelected\"\n            let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\n          >\n            <biit-checkbox [ngModel]=\"isSelected\" (ngModelChange)=\"onCheckboxChangeFn($event)\"></biit-checkbox>\n          </ng-template>\n        </ngx-datatable-column>\n\n        <ngx-datatable-column *ngFor=\"let column of _columns\"\n                              [name]=\"column.name\"\n                              [prop]=\"column.prop\"\n                              [checkboxable]=\"column.checkboxable\"\n                              [frozenLeft]=\"column.frozenLeft\"\n                              [frozenRight]=\"column.frozenRight\"\n                              [flexGrow]=\"column.flexGrow\"\n                              [minWidth]=\"column.minWidth\"\n                              [maxWidth]=\"column.maxWidth\"\n                              [width]=\"column.width\"\n                              [resizeable]=\"column.resizeable\"\n                              [comparator]=\"column.comparator\"\n                              [pipe]=\"column.pipe\"\n                              [sortable]=\"column.sortable\"\n                              [draggable]=\"column.draggable\"\n                              [canAutoResize]=\"column.canAutoResize\"\n                              [cellTemplate]=\"column.cellTemplate\"\n                              [ghostCellTemplate]=\"column.ghostCellTemplate\"\n                              [treeToggleTemplate]=\"column.treeToggleTemplate\"\n                              [cellClass]=\"column.cellClass\"\n                              [headerTemplate]=\"column.headerTemplate\"\n                              [headerClass]=\"column.headerClass\"\n                              [headerCheckboxable]=\"column.headerCheckboxable\"\n                              [isTreeColumn]=\"column.isTreeColumn\"\n                              [treeLevelIndent]=\"column.treeLevelIndent\"\n                              [summaryFunc]=\"column.summaryFunc\"\n                              [summaryTemplate]=\"column.summaryTemplate\"\n        ></ngx-datatable-column>\n\n        <ngx-datatable-footer>\n          <ng-template\n            ngx-datatable-footer-template\n            let-rowCount=\"rowCount\"\n            let-pageSizeCurrent=\"pageSize\"\n            let-selectedCount=\"selectedCount\"\n            let-curPage=\"curPage\"\n            let-offset=\"offset\"\n          >\n            <div class=\"label\" id=\"total-elements\">\n              <span>{{ t('t.total') }}: {{rowCount}}</span>\n              <span *ngIf=\"selectedCount\">&nbsp;&nbsp;|&nbsp;&nbsp;{{ t('t.selected') }}: {{selectedCount}}</span>\n            </div>\n            <div class=\"pagination\" [style.display]=\"!((rowCount / pageSize) > 1) ? 'none' : null\">\n              <biit-datatable-pager #pager\n                                    [page]=\"curPage\"\n                                    [size]=\"pageSizeCurrent\"\n                                    [count]=\"rowCount\"\n                                    [hidden]=\"!((rowCount / pageSize) > 1)\"\n                                    (change)=\"table.onFooterPage($event)\">\n              </biit-datatable-pager>\n            </div>\n            <div class=\"page-items\" *ngIf=\"pageSizeList\">\n              <div *ngIf=\"pageSizeList?.length\">\n                <span>{{ t('t.rows-per-page') }}:</span>\n                <select [(ngModel)]=\"pageSize\"\n                        (ngModelChange)=\"pager.size = $event\">\n                  <option *ngFor=\"let size of pageSizeList\"\n                          [ngValue]=\"size\"\n                  >\n                    {{size}}\n                  </option>\n                </select>\n              </div>\n            </div>\n          </ng-template>\n        </ngx-datatable-footer>\n      </ngx-datatable>\n    </ng-container>\n  </div>\n</div>\n", styles: [".table-canvas{height:100%;display:flex;flex-direction:column;gap:14px;background:white}.table-canvas .top{display:flex;flex:0}.table-canvas .top .action-bar{display:flex;flex:1}.table-canvas .top .options{display:flex;flex:0}.table-canvas .table{position:relative;flex:1;min-height:0;min-width:0}.table-canvas .table biit-progress-bar{position:absolute;z-index:1;left:0;right:3px;top:42px}.table-canvas .table ::ng-deep ngx-datatable{height:100%;position:absolute;inset:0}.table-canvas .table ::ng-deep ngx-datatable>div{height:calc(100% - 42px)}.table-canvas .table ::ng-deep ngx-datatable>div>div{height:100%}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner{height:inherit}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap{height:100%!important;width:calc(100% - 3px);display:flex;align-items:center;justify-content:center;background:#262626}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap span{color:#ededed;font-size:16px;line-height:100%;font-weight:700;text-transform:uppercase}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap .sort-btn{position:absolute;right:14px}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap:has(biit-checkbox){background:white}.table-canvas .table ::ng-deep ngx-datatable datatable-body{height:100%!important;overflow-y:auto!important}.table-canvas .table ::ng-deep ngx-datatable datatable-body .empty-row{height:100%;display:flex;align-items:center;justify-content:center}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row .datatable-body-cell-label{display:flex;align-items:center;min-height:42px;border-bottom:3px solid #262626;width:calc(100% - 3px);padding:9px 14px;line-height:120%;height:100%}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row:hover .datatable-body-cell-label{background:#EDEDED}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row.active .datatable-body-cell-label{background:#D9D9D9}.table-canvas .table ::ng-deep ngx-datatable datatable-footer{position:absolute;bottom:0;background:white;z-index:10}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .label{flex:1 0}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .pagination{display:flex;margin:auto;flex:0;justify-content:center}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .pagination biit-datatable-pager{flex:none!important}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items{flex:1 0;display:flex;justify-content:flex-end;align-items:center}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select{appearance:none;border:none;height:34px;min-width:34px;padding:8px 14px;text-align:end;font-size:14px;font-family:Montserrat,serif;cursor:pointer;background:white}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select:focus-visible{outline:none;background:#D9D9D9}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select:hover{background:#D9D9D9}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select *{background:white;padding:5px}.table-canvas .table ::ng-deep ngx-datatable:has(datatable-footer) datatable-body{height:calc(100% - 48px)!important}::ng-deep ngx-datatable .auto-details-height .datatable-row-wrapper{height:unset!important}::ng-deep ngx-datatable .auto-details-height .datatable-row-wrapper .datatable-row-detail{height:unset!important}.default-menu{display:flex;flex-direction:row}@media screen and (max-width: 600px){.page-items,.page-size-selector,.horizontal-menu{display:none!important}}@media screen and (min-width: 601px){.vertical-menu{display:none!important}}\n"], dependencies: [{ 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: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.BiitCheckboxComponent, selector: "biit-checkbox", inputs: ["disabled", "description", "showAlwaysDescription"] }, { kind: "component", type: i5.BiitDatatablePagerComponent, selector: "biit-datatable-pager" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarVDynamic", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "ghostLoadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "disableRowCheck", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { kind: "directive", type: i6.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate", "ghostCellTemplate"] }, { kind: "directive", type: i6.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i6.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "directive", type: i6.DataTableFooterTemplateDirective, selector: "[ngx-datatable-footer-template]" }, { kind: "directive", type: i6.DatatableFooterDirective, selector: "ngx-datatable-footer", inputs: ["footerHeight", "totalMessage", "selectedMessage", "pagerLeftArrowIcon", "pagerRightArrowIcon", "pagerPreviousIcon", "pagerNextIcon", "template"] }, { kind: "component", type: i7.BiitProgressBarComponent, selector: "biit-progress-bar", inputs: ["type", "_value", "value"] }, { kind: "component", type: i4.BiitMultiselectComponent, selector: "biit-multiselect", inputs: ["title", "type", "icon", "label", "value", "descriptionField", "description", "data", "primitive", "compact", "disabled", "required", "sort-asc", "sort-desc"], outputs: ["onCreate"] }, { kind: "directive", type: i8.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i4.BiitInputTextComponent, selector: "biit-input-text", inputs: ["placeholder", "error", "description", "info", "type", "icon", "fieldName", "disabled", "required", "readonly", "min", "max", "minLength", "maxLength", "regEx"], outputs: ["onActionPerformed"] }, { kind: "component", type: i9.BiitVerticalMenuComponent, selector: "biit-vertical-menu" }] });
+BiitDatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitDatatableComponent, selector: "biit-datatable", inputs: { data: "data", columns: "columns", pageSize: "pageSize", pageSizeList: "pageSizeList", loading: "loading", selectable: "selectable", singleSelection: "singleSelection", scrollbarH: "scrollbarH", hideHeader: "hideHeader", hideFooter: "hideFooter", serverSide: "serverSide", page: "page" }, outputs: { onSelection: "onSelection", onPageChange: "onPageChange" }, providers: [provideTranslocoScope({ scope: 'wizardry-theme/table', alias: 't' })], queries: [{ propertyName: "actionsTpl", first: true, predicate: ["actions"], descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }], ngImport: i0, template: "<div id=\"biit-table\" class=\"table-canvas\" *transloco=\"let t\">\n  <div class=\"top\" *ngIf=\"!hideHeader\">\n    <div id=\"menu\" class=\"action-bar\">\n      <biit-vertical-menu *ngIf=\"actionsTpl\" class=\"vertical-menu\">\n        <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n      </biit-vertical-menu>\n      <div *ngIf=\"actionsTpl\" class=\"horizontal-menu default-menu\">\n        <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n      </div>\n      <div class=\"default-menu\" *ngIf=\"!actionsTpl\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div id=\"options\" class=\"options\">\n      <biit-input-text id=\"search\" #searchInput\n                       [ngModel]=\"search\"\n                       (onActionPerformed)=\"\n                         onFilter($event, true);\n                       \"\n                       (ngModelChange)=\"onFilter($event)\"\n                       (focusout)=\"searchInput.value = search\"\n                       icon=\"search\"\n                       [placeholder]=\"t('t.search')\"\n      ></biit-input-text>\n      <biit-multiselect id=\"column-selector\" [ngModel]=\"_columns\"\n                        (ngModelChange)=\"setColumnVisibility($event)\"\n                        [data]=\"allColumns\"\n                        label=\"name\"\n                        value=\"visible\"\n                        [type]=\"BiitMultiselectType.ICON\"\n                        [title]=\"t('t.column-selector')\"\n                        [compact]=\"true\"\n      ></biit-multiselect>\n    </div>\n  </div>\n  <div id=\"content\" class=\"table\">\n    <biit-progress-bar *ngIf=\"loading\"></biit-progress-bar>\n    <ng-container *ngIf=\"!serverSide\">\n      <ngx-datatable #table\n                     [rows]=\"data\"\n                     [columns]=\"_columns\"\n                     [columnMode]=\"'force'\"\n                     [headerHeight]=\"42\"\n                     [footerHeight]=\"hideFooter ? 0 : 34\"\n                     [rowHeight]=\"'auto'\"\n                     [reorderable]=\"false\"\n                     [selectionType]=\"SelectionType.checkbox\"\n                     [selected]=\"selected\"\n                     (select)=\"onSelect($event)\"\n                     (activate)=\"onActivate($event)\"\n                     [virtualization]=\"false\"\n                     [scrollbarVDynamic]=\"true\"\n                     [limit]=\"pageSize\"\n                     [scrollbarH]=\"scrollbarH\"\n                     [messages]=\"{emptyMessage: t('t.empty-message')}\"\n      >\n        <ngx-datatable-column *ngIf=\"selectable && !singleSelection\"\n                              #chkbox\n                              [width]=\"42\"\n                              [sortable]=\"false\"\n                              [canAutoResize]=\"false\"\n                              [draggable]=\"false\"\n                              [resizeable]=\"false\"\n                              [name]=\"'chkbox'\"\n        >\n          <ng-template\n            ngx-datatable-header-template\n            let-value=\"value\"\n            let-allRowsSelected=\"allRowsSelected\"\n            let-selectFn=\"selectFn\"\n          >\n            <biit-checkbox [ngModel]=\"allRowsSelected\" (ngModelChange)=\"selectFn(!allRowsSelected)\"></biit-checkbox>\n          </ng-template>\n          <ng-template\n            ngx-datatable-cell-template\n            let-value=\"value\"\n            let-isSelected=\"isSelected\"\n            let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\n          >\n            <biit-checkbox [ngModel]=\"isSelected\" (ngModelChange)=\"onCheckboxChangeFn($event)\"></biit-checkbox>\n          </ng-template>\n        </ngx-datatable-column>\n\n        <ngx-datatable-column *ngFor=\"let column of _columns\"\n                              [name]=\"column.name\"\n                              [prop]=\"column.prop\"\n                              [checkboxable]=\"column.checkboxable\"\n                              [frozenLeft]=\"column.frozenLeft\"\n                              [frozenRight]=\"column.frozenRight\"\n                              [flexGrow]=\"column.flexGrow\"\n                              [minWidth]=\"column.minWidth\"\n                              [maxWidth]=\"column.maxWidth\"\n                              [width]=\"column.width\"\n                              [resizeable]=\"column.resizeable\"\n                              [comparator]=\"column.comparator\"\n                              [pipe]=\"column.pipe\"\n                              [sortable]=\"column.sortable\"\n                              [draggable]=\"column.draggable\"\n                              [canAutoResize]=\"column.canAutoResize\"\n                              [cellTemplate]=\"column.cellTemplate\"\n                              [ghostCellTemplate]=\"column.ghostCellTemplate\"\n                              [treeToggleTemplate]=\"column.treeToggleTemplate\"\n                              [cellClass]=\"column.cellClass\"\n                              [headerTemplate]=\"column.headerTemplate\"\n                              [headerClass]=\"column.headerClass\"\n                              [headerCheckboxable]=\"column.headerCheckboxable\"\n                              [isTreeColumn]=\"column.isTreeColumn\"\n                              [treeLevelIndent]=\"column.treeLevelIndent\"\n                              [summaryFunc]=\"column.summaryFunc\"\n                              [summaryTemplate]=\"column.summaryTemplate\"\n        ></ngx-datatable-column>\n\n        <ngx-datatable-footer id=\"datatable-footer\">\n          <ng-template\n            ngx-datatable-footer-template\n            let-rowCount=\"rowCount\"\n            let-pageSizeCurrent=\"pageSize\"\n            let-selectedCount=\"selectedCount\"\n            let-curPage=\"curPage\"\n            let-offset=\"offset\"\n          >\n            <div class=\"label\">\n              <span>{{ t('t.total') }}: </span><span id=\"total-number-of-items\">{{rowCount}}</span>\n              <span *ngIf=\"selectedCount\">&nbsp;&nbsp;|&nbsp;&nbsp;{{ t('t.selected') }}: </span><span *ngIf=\"selectedCount\" id=\"number-of-items-selected\">{{selectedCount}}</span>\n            </div>\n            <div class=\"pagination\" [style.display]=\"!((rowCount / pageSize) > 1) ? 'none' : null\">\n              <biit-datatable-pager #pager\n                                    [page]=\"curPage\"\n                                    [size]=\"pageSizeCurrent\"\n                                    [count]=\"rowCount\"\n                                    [hidden]=\"!((rowCount / pageSize) > 1)\"\n                                    (change)=\"table.onFooterPage($event)\">\n              </biit-datatable-pager>\n            </div>\n            <div class=\"page-items\" *ngIf=\"pageSizeList\">\n              <div *ngIf=\"pageSizeList?.length\">\n                <span>{{ t('t.rows-per-page') }}:</span>\n                <select [(ngModel)]=\"pageSize\"\n                        (ngModelChange)=\"pager.size = $event\">\n                  <option *ngFor=\"let size of pageSizeList\"\n                          [ngValue]=\"size\"\n                  >\n                    {{size}}\n                  </option>\n                </select>\n              </div>\n            </div>\n          </ng-template>\n        </ngx-datatable-footer>\n      </ngx-datatable>\n    </ng-container>\n\n    <ng-container *ngIf=\"serverSide\">\n      <ngx-datatable #table\n                     [rows]=\"data\"\n                     [columns]=\"_columns\"\n                     [columnMode]=\"'force'\"\n                     [headerHeight]=\"42\"\n                     [footerHeight]=\"hideFooter ? 0 : 34\"\n                     [rowHeight]=\"'auto'\"\n                     [reorderable]=\"false\"\n                     [selectionType]=\"SelectionType.checkbox\"\n                     [selected]=\"selected\"\n                     (select)=\"onSelect($event)\"\n                     (activate)=\"onActivate($event)\"\n                     [virtualization]=\"false\"\n                     [scrollbarVDynamic]=\"true\"\n                     [scrollbarH]=\"scrollbarH\"\n                     [messages]=\"{emptyMessage: t('t.empty-message')}\"\n                     [externalPaging]=\"true\"\n                     [count]=\"page.totalElements\"\n                     [offset]=\"page.pageNumber\"\n                     [limit]=\"page.pageSize\"\n                     (page)=\"onFooterPageChange($event)\"\n      >\n        <ngx-datatable-column *ngIf=\"selectable && !singleSelection\"\n                              #chkbox\n                              [width]=\"42\"\n                              [sortable]=\"false\"\n                              [canAutoResize]=\"false\"\n                              [draggable]=\"false\"\n                              [resizeable]=\"false\"\n                              [name]=\"'chkbox'\"\n        >\n          <ng-template\n            ngx-datatable-header-template\n            let-value=\"value\"\n            let-allRowsSelected=\"allRowsSelected\"\n            let-selectFn=\"selectFn\"\n          >\n            <biit-checkbox [ngModel]=\"allRowsSelected\" (ngModelChange)=\"selectFn(!allRowsSelected)\"></biit-checkbox>\n          </ng-template>\n          <ng-template\n            ngx-datatable-cell-template\n            let-value=\"value\"\n            let-isSelected=\"isSelected\"\n            let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\n          >\n            <biit-checkbox [ngModel]=\"isSelected\" (ngModelChange)=\"onCheckboxChangeFn($event)\"></biit-checkbox>\n          </ng-template>\n        </ngx-datatable-column>\n\n        <ngx-datatable-column *ngFor=\"let column of _columns\"\n                              [name]=\"column.name\"\n                              [prop]=\"column.prop\"\n                              [checkboxable]=\"column.checkboxable\"\n                              [frozenLeft]=\"column.frozenLeft\"\n                              [frozenRight]=\"column.frozenRight\"\n                              [flexGrow]=\"column.flexGrow\"\n                              [minWidth]=\"column.minWidth\"\n                              [maxWidth]=\"column.maxWidth\"\n                              [width]=\"column.width\"\n                              [resizeable]=\"column.resizeable\"\n                              [comparator]=\"column.comparator\"\n                              [pipe]=\"column.pipe\"\n                              [sortable]=\"column.sortable\"\n                              [draggable]=\"column.draggable\"\n                              [canAutoResize]=\"column.canAutoResize\"\n                              [cellTemplate]=\"column.cellTemplate\"\n                              [ghostCellTemplate]=\"column.ghostCellTemplate\"\n                              [treeToggleTemplate]=\"column.treeToggleTemplate\"\n                              [cellClass]=\"column.cellClass\"\n                              [headerTemplate]=\"column.headerTemplate\"\n                              [headerClass]=\"column.headerClass\"\n                              [headerCheckboxable]=\"column.headerCheckboxable\"\n                              [isTreeColumn]=\"column.isTreeColumn\"\n                              [treeLevelIndent]=\"column.treeLevelIndent\"\n                              [summaryFunc]=\"column.summaryFunc\"\n                              [summaryTemplate]=\"column.summaryTemplate\"\n        ></ngx-datatable-column>\n\n        <ngx-datatable-footer>\n          <ng-template\n            ngx-datatable-footer-template\n            let-rowCount=\"rowCount\"\n            let-pageSizeCurrent=\"pageSize\"\n            let-selectedCount=\"selectedCount\"\n            let-curPage=\"curPage\"\n            let-offset=\"offset\"\n          >\n            <div class=\"label\" id=\"total-elements\">\n              <span>{{ t('t.total') }}: {{rowCount}}</span>\n              <span *ngIf=\"selectedCount\">&nbsp;&nbsp;|&nbsp;&nbsp;{{ t('t.selected') }}: {{selectedCount}}</span>\n            </div>\n            <div class=\"pagination\" [style.display]=\"!((rowCount / pageSize) > 1) ? 'none' : null\">\n              <biit-datatable-pager #pager\n                                    [page]=\"curPage\"\n                                    [size]=\"pageSizeCurrent\"\n                                    [count]=\"rowCount\"\n                                    [hidden]=\"!((rowCount / pageSize) > 1)\"\n                                    (change)=\"table.onFooterPage($event)\">\n              </biit-datatable-pager>\n            </div>\n            <div class=\"page-items\" *ngIf=\"pageSizeList\">\n              <div *ngIf=\"pageSizeList?.length\">\n                <span>{{ t('t.rows-per-page') }}:</span>\n                <select [(ngModel)]=\"pageSize\"\n                        (ngModelChange)=\"pager.size = $event\">\n                  <option *ngFor=\"let size of pageSizeList\"\n                          [ngValue]=\"size\"\n                  >\n                    {{size}}\n                  </option>\n                </select>\n              </div>\n            </div>\n          </ng-template>\n        </ngx-datatable-footer>\n      </ngx-datatable>\n    </ng-container>\n  </div>\n</div>\n", styles: [".table-canvas{height:100%;display:flex;flex-direction:column;gap:14px;background:var(--popup-background)}.table-canvas .top{display:flex;flex:0}.table-canvas .top .action-bar{display:flex;flex:1}.table-canvas .top .options{display:flex;flex:0}.table-canvas .table{position:relative;flex:1;min-height:0;min-width:0}.table-canvas .table biit-progress-bar{position:absolute;z-index:1;left:0;right:3px;top:42px}.table-canvas .table ::ng-deep ngx-datatable{height:100%;position:absolute;inset:0}.table-canvas .table ::ng-deep ngx-datatable>div{height:calc(100% - 42px)}.table-canvas .table ::ng-deep ngx-datatable>div>div{height:100%}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner{height:inherit}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap{height:100%!important;width:calc(100% - 3px);display:flex;align-items:center;justify-content:center;background:var(--component-color)}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap span{color:var(--secondary-text-color);font-size:16px;line-height:100%;font-weight:700;text-transform:uppercase}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap .sort-btn{position:absolute;right:14px}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap:has(biit-checkbox){background:var(--popup-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-body{height:100%!important;overflow-y:auto!important}.table-canvas .table ::ng-deep ngx-datatable datatable-body .empty-row{height:100%;display:flex;align-items:center;justify-content:center}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row .datatable-body-cell-label{display:flex;align-items:center;min-height:42px;border-bottom:3px solid var(--component-color);width:calc(100% - 3px);padding:9px 14px;line-height:120%;height:100%}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row:hover .datatable-body-cell-label{background:var(--secondary-text-color)}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row.active .datatable-body-cell-label{background:var(--main-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer{position:absolute;bottom:0;background:var(--popup-background);z-index:10}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .label{flex:1 0}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .pagination{display:flex;margin:auto;flex:0;justify-content:center}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .pagination biit-datatable-pager{flex:none!important}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items{flex:1 0;display:flex;justify-content:flex-end;align-items:center}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select{appearance:none;border:none;height:34px;min-width:34px;padding:8px 14px;text-align:end;font-size:14px;font-family:Montserrat,serif;cursor:pointer;background:var(--popup-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select:focus-visible{outline:none;background:var(--main-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select:hover{background:var(--main-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select *{background:var(--popup-background);padding:5px}.table-canvas .table ::ng-deep ngx-datatable:has(datatable-footer) datatable-body{height:calc(100% - 48px)!important}::ng-deep ngx-datatable .auto-details-height .datatable-row-wrapper{height:unset!important}::ng-deep ngx-datatable .auto-details-height .datatable-row-wrapper .datatable-row-detail{height:unset!important}.default-menu{display:flex;flex-direction:row}@media screen and (max-width: 600px){.page-items,.page-size-selector,.horizontal-menu{display:none!important}}@media screen and (min-width: 601px){.vertical-menu{display:none!important}}\n"], dependencies: [{ 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: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.BiitCheckboxComponent, selector: "biit-checkbox", inputs: ["disabled", "description", "showAlwaysDescription"] }, { kind: "component", type: i5.BiitDatatablePagerComponent, selector: "biit-datatable-pager" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarVDynamic", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "ghostLoadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "disableRowCheck", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { kind: "directive", type: i6.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate", "ghostCellTemplate"] }, { kind: "directive", type: i6.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i6.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "directive", type: i6.DataTableFooterTemplateDirective, selector: "[ngx-datatable-footer-template]" }, { kind: "directive", type: i6.DatatableFooterDirective, selector: "ngx-datatable-footer", inputs: ["footerHeight", "totalMessage", "selectedMessage", "pagerLeftArrowIcon", "pagerRightArrowIcon", "pagerPreviousIcon", "pagerNextIcon", "template"] }, { kind: "component", type: i7.BiitProgressBarComponent, selector: "biit-progress-bar", inputs: ["type", "_value", "value"] }, { kind: "component", type: i4.BiitMultiselectComponent, selector: "biit-multiselect", inputs: ["title", "type", "icon", "label", "value", "descriptionField", "description", "data", "primitive", "compact", "disabled", "required", "sort-asc", "sort-desc"], outputs: ["onCreate"] }, { kind: "directive", type: i8.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i4.BiitInputTextComponent, selector: "biit-input-text", inputs: ["placeholder", "error", "description", "info", "type", "icon", "fieldName", "disabled", "required", "readonly", "min", "max", "minLength", "maxLength", "regEx"], outputs: ["onActionPerformed"] }, { kind: "component", type: i9.BiitVerticalMenuComponent, selector: "biit-vertical-menu" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDatatableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'biit-datatable', providers: [provideTranslocoScope({ scope: 'wizardry-theme/table', alias: 't' })], template: "<div id=\"biit-table\" class=\"table-canvas\" *transloco=\"let t\">\n  <div class=\"top\" *ngIf=\"!hideHeader\">\n    <div id=\"menu\" class=\"action-bar\">\n      <biit-vertical-menu *ngIf=\"actionsTpl\" class=\"vertical-menu\">\n        <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n      </biit-vertical-menu>\n      <div *ngIf=\"actionsTpl\" class=\"horizontal-menu default-menu\">\n        <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n      </div>\n      <div class=\"default-menu\" *ngIf=\"!actionsTpl\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div id=\"options\" class=\"options\">\n      <biit-input-text id=\"search\" #searchInput\n                       [ngModel]=\"search\"\n                       (onActionPerformed)=\"\n                         onFilter($event, true);\n                       \"\n                       (ngModelChange)=\"onFilter($event)\"\n                       (focusout)=\"searchInput.value = search\"\n                       icon=\"search\"\n                       [placeholder]=\"t('t.search')\"\n      ></biit-input-text>\n      <biit-multiselect id=\"column-selector\" [ngModel]=\"_columns\"\n                        (ngModelChange)=\"setColumnVisibility($event)\"\n                        [data]=\"allColumns\"\n                        label=\"name\"\n                        value=\"visible\"\n                        [type]=\"BiitMultiselectType.ICON\"\n                        [title]=\"t('t.column-selector')\"\n                        [compact]=\"true\"\n      ></biit-multiselect>\n    </div>\n  </div>\n  <div id=\"content\" class=\"table\">\n    <biit-progress-bar *ngIf=\"loading\"></biit-progress-bar>\n    <ng-container *ngIf=\"!serverSide\">\n      <ngx-datatable #table\n                     [rows]=\"data\"\n                     [columns]=\"_columns\"\n                     [columnMode]=\"'force'\"\n                     [headerHeight]=\"42\"\n                     [footerHeight]=\"hideFooter ? 0 : 34\"\n                     [rowHeight]=\"'auto'\"\n                     [reorderable]=\"false\"\n                     [selectionType]=\"SelectionType.checkbox\"\n                     [selected]=\"selected\"\n                     (select)=\"onSelect($event)\"\n                     (activate)=\"onActivate($event)\"\n                     [virtualization]=\"false\"\n                     [scrollbarVDynamic]=\"true\"\n                     [limit]=\"pageSize\"\n                     [scrollbarH]=\"scrollbarH\"\n                     [messages]=\"{emptyMessage: t('t.empty-message')}\"\n      >\n        <ngx-datatable-column *ngIf=\"selectable && !singleSelection\"\n                              #chkbox\n                              [width]=\"42\"\n                              [sortable]=\"false\"\n                              [canAutoResize]=\"false\"\n                              [draggable]=\"false\"\n                              [resizeable]=\"false\"\n                              [name]=\"'chkbox'\"\n        >\n          <ng-template\n            ngx-datatable-header-template\n            let-value=\"value\"\n            let-allRowsSelected=\"allRowsSelected\"\n            let-selectFn=\"selectFn\"\n          >\n            <biit-checkbox [ngModel]=\"allRowsSelected\" (ngModelChange)=\"selectFn(!allRowsSelected)\"></biit-checkbox>\n          </ng-template>\n          <ng-template\n            ngx-datatable-cell-template\n            let-value=\"value\"\n            let-isSelected=\"isSelected\"\n            let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\n          >\n            <biit-checkbox [ngModel]=\"isSelected\" (ngModelChange)=\"onCheckboxChangeFn($event)\"></biit-checkbox>\n          </ng-template>\n        </ngx-datatable-column>\n\n        <ngx-datatable-column *ngFor=\"let column of _columns\"\n                              [name]=\"column.name\"\n                              [prop]=\"column.prop\"\n                              [checkboxable]=\"column.checkboxable\"\n                              [frozenLeft]=\"column.frozenLeft\"\n                              [frozenRight]=\"column.frozenRight\"\n                              [flexGrow]=\"column.flexGrow\"\n                              [minWidth]=\"column.minWidth\"\n                              [maxWidth]=\"column.maxWidth\"\n                              [width]=\"column.width\"\n                              [resizeable]=\"column.resizeable\"\n                              [comparator]=\"column.comparator\"\n                              [pipe]=\"column.pipe\"\n                              [sortable]=\"column.sortable\"\n                              [draggable]=\"column.draggable\"\n                              [canAutoResize]=\"column.canAutoResize\"\n                              [cellTemplate]=\"column.cellTemplate\"\n                              [ghostCellTemplate]=\"column.ghostCellTemplate\"\n                              [treeToggleTemplate]=\"column.treeToggleTemplate\"\n                              [cellClass]=\"column.cellClass\"\n                              [headerTemplate]=\"column.headerTemplate\"\n                              [headerClass]=\"column.headerClass\"\n                              [headerCheckboxable]=\"column.headerCheckboxable\"\n                              [isTreeColumn]=\"column.isTreeColumn\"\n                              [treeLevelIndent]=\"column.treeLevelIndent\"\n                              [summaryFunc]=\"column.summaryFunc\"\n                              [summaryTemplate]=\"column.summaryTemplate\"\n        ></ngx-datatable-column>\n\n        <ngx-datatable-footer id=\"datatable-footer\">\n          <ng-template\n            ngx-datatable-footer-template\n            let-rowCount=\"rowCount\"\n            let-pageSizeCurrent=\"pageSize\"\n            let-selectedCount=\"selectedCount\"\n            let-curPage=\"curPage\"\n            let-offset=\"offset\"\n          >\n            <div class=\"label\">\n              <span>{{ t('t.total') }}: </span><span id=\"total-number-of-items\">{{rowCount}}</span>\n              <span *ngIf=\"selectedCount\">&nbsp;&nbsp;|&nbsp;&nbsp;{{ t('t.selected') }}: </span><span *ngIf=\"selectedCount\" id=\"number-of-items-selected\">{{selectedCount}}</span>\n            </div>\n            <div class=\"pagination\" [style.display]=\"!((rowCount / pageSize) > 1) ? 'none' : null\">\n              <biit-datatable-pager #pager\n                                    [page]=\"curPage\"\n                                    [size]=\"pageSizeCurrent\"\n                                    [count]=\"rowCount\"\n                                    [hidden]=\"!((rowCount / pageSize) > 1)\"\n                                    (change)=\"table.onFooterPage($event)\">\n              </biit-datatable-pager>\n            </div>\n            <div class=\"page-items\" *ngIf=\"pageSizeList\">\n              <div *ngIf=\"pageSizeList?.length\">\n                <span>{{ t('t.rows-per-page') }}:</span>\n                <select [(ngModel)]=\"pageSize\"\n                        (ngModelChange)=\"pager.size = $event\">\n                  <option *ngFor=\"let size of pageSizeList\"\n                          [ngValue]=\"size\"\n                  >\n                    {{size}}\n                  </option>\n                </select>\n              </div>\n            </div>\n          </ng-template>\n        </ngx-datatable-footer>\n      </ngx-datatable>\n    </ng-container>\n\n    <ng-container *ngIf=\"serverSide\">\n      <ngx-datatable #table\n                     [rows]=\"data\"\n                     [columns]=\"_columns\"\n                     [columnMode]=\"'force'\"\n                     [headerHeight]=\"42\"\n                     [footerHeight]=\"hideFooter ? 0 : 34\"\n                     [rowHeight]=\"'auto'\"\n                     [reorderable]=\"false\"\n                     [selectionType]=\"SelectionType.checkbox\"\n                     [selected]=\"selected\"\n                     (select)=\"onSelect($event)\"\n                     (activate)=\"onActivate($event)\"\n                     [virtualization]=\"false\"\n                     [scrollbarVDynamic]=\"true\"\n                     [scrollbarH]=\"scrollbarH\"\n                     [messages]=\"{emptyMessage: t('t.empty-message')}\"\n                     [externalPaging]=\"true\"\n                     [count]=\"page.totalElements\"\n                     [offset]=\"page.pageNumber\"\n                     [limit]=\"page.pageSize\"\n                     (page)=\"onFooterPageChange($event)\"\n      >\n        <ngx-datatable-column *ngIf=\"selectable && !singleSelection\"\n                              #chkbox\n                              [width]=\"42\"\n                              [sortable]=\"false\"\n                              [canAutoResize]=\"false\"\n                              [draggable]=\"false\"\n                              [resizeable]=\"false\"\n                              [name]=\"'chkbox'\"\n        >\n          <ng-template\n            ngx-datatable-header-template\n            let-value=\"value\"\n            let-allRowsSelected=\"allRowsSelected\"\n            let-selectFn=\"selectFn\"\n          >\n            <biit-checkbox [ngModel]=\"allRowsSelected\" (ngModelChange)=\"selectFn(!allRowsSelected)\"></biit-checkbox>\n          </ng-template>\n          <ng-template\n            ngx-datatable-cell-template\n            let-value=\"value\"\n            let-isSelected=\"isSelected\"\n            let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\n          >\n            <biit-checkbox [ngModel]=\"isSelected\" (ngModelChange)=\"onCheckboxChangeFn($event)\"></biit-checkbox>\n          </ng-template>\n        </ngx-datatable-column>\n\n        <ngx-datatable-column *ngFor=\"let column of _columns\"\n                              [name]=\"column.name\"\n                              [prop]=\"column.prop\"\n                              [checkboxable]=\"column.checkboxable\"\n                              [frozenLeft]=\"column.frozenLeft\"\n                              [frozenRight]=\"column.frozenRight\"\n                              [flexGrow]=\"column.flexGrow\"\n                              [minWidth]=\"column.minWidth\"\n                              [maxWidth]=\"column.maxWidth\"\n                              [width]=\"column.width\"\n                              [resizeable]=\"column.resizeable\"\n                              [comparator]=\"column.comparator\"\n                              [pipe]=\"column.pipe\"\n                              [sortable]=\"column.sortable\"\n                              [draggable]=\"column.draggable\"\n                              [canAutoResize]=\"column.canAutoResize\"\n                              [cellTemplate]=\"column.cellTemplate\"\n                              [ghostCellTemplate]=\"column.ghostCellTemplate\"\n                              [treeToggleTemplate]=\"column.treeToggleTemplate\"\n                              [cellClass]=\"column.cellClass\"\n                              [headerTemplate]=\"column.headerTemplate\"\n                              [headerClass]=\"column.headerClass\"\n                              [headerCheckboxable]=\"column.headerCheckboxable\"\n                              [isTreeColumn]=\"column.isTreeColumn\"\n                              [treeLevelIndent]=\"column.treeLevelIndent\"\n                              [summaryFunc]=\"column.summaryFunc\"\n                              [summaryTemplate]=\"column.summaryTemplate\"\n        ></ngx-datatable-column>\n\n        <ngx-datatable-footer>\n          <ng-template\n            ngx-datatable-footer-template\n            let-rowCount=\"rowCount\"\n            let-pageSizeCurrent=\"pageSize\"\n            let-selectedCount=\"selectedCount\"\n            let-curPage=\"curPage\"\n            let-offset=\"offset\"\n          >\n            <div class=\"label\" id=\"total-elements\">\n              <span>{{ t('t.total') }}: {{rowCount}}</span>\n              <span *ngIf=\"selectedCount\">&nbsp;&nbsp;|&nbsp;&nbsp;{{ t('t.selected') }}: {{selectedCount}}</span>\n            </div>\n            <div class=\"pagination\" [style.display]=\"!((rowCount / pageSize) > 1) ? 'none' : null\">\n              <biit-datatable-pager #pager\n                                    [page]=\"curPage\"\n                                    [size]=\"pageSizeCurrent\"\n                                    [count]=\"rowCount\"\n                                    [hidden]=\"!((rowCount / pageSize) > 1)\"\n                                    (change)=\"table.onFooterPage($event)\">\n              </biit-datatable-pager>\n            </div>\n            <div class=\"page-items\" *ngIf=\"pageSizeList\">\n              <div *ngIf=\"pageSizeList?.length\">\n                <span>{{ t('t.rows-per-page') }}:</span>\n                <select [(ngModel)]=\"pageSize\"\n                        (ngModelChange)=\"pager.size = $event\">\n                  <option *ngFor=\"let size of pageSizeList\"\n                          [ngValue]=\"size\"\n                  >\n                    {{size}}\n                  </option>\n                </select>\n              </div>\n            </div>\n          </ng-template>\n        </ngx-datatable-footer>\n      </ngx-datatable>\n    </ng-container>\n  </div>\n</div>\n", styles: [".table-canvas{height:100%;display:flex;flex-direction:column;gap:14px;background:white}.table-canvas .top{display:flex;flex:0}.table-canvas .top .action-bar{display:flex;flex:1}.table-canvas .top .options{display:flex;flex:0}.table-canvas .table{position:relative;flex:1;min-height:0;min-width:0}.table-canvas .table biit-progress-bar{position:absolute;z-index:1;left:0;right:3px;top:42px}.table-canvas .table ::ng-deep ngx-datatable{height:100%;position:absolute;inset:0}.table-canvas .table ::ng-deep ngx-datatable>div{height:calc(100% - 42px)}.table-canvas .table ::ng-deep ngx-datatable>div>div{height:100%}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner{height:inherit}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap{height:100%!important;width:calc(100% - 3px);display:flex;align-items:center;justify-content:center;background:#262626}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap span{color:#ededed;font-size:16px;line-height:100%;font-weight:700;text-transform:uppercase}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap .sort-btn{position:absolute;right:14px}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap:has(biit-checkbox){background:white}.table-canvas .table ::ng-deep ngx-datatable datatable-body{height:100%!important;overflow-y:auto!important}.table-canvas .table ::ng-deep ngx-datatable datatable-body .empty-row{height:100%;display:flex;align-items:center;justify-content:center}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row .datatable-body-cell-label{display:flex;align-items:center;min-height:42px;border-bottom:3px solid #262626;width:calc(100% - 3px);padding:9px 14px;line-height:120%;height:100%}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row:hover .datatable-body-cell-label{background:#EDEDED}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row.active .datatable-body-cell-label{background:#D9D9D9}.table-canvas .table ::ng-deep ngx-datatable datatable-footer{position:absolute;bottom:0;background:white;z-index:10}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .label{flex:1 0}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .pagination{display:flex;margin:auto;flex:0;justify-content:center}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .pagination biit-datatable-pager{flex:none!important}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items{flex:1 0;display:flex;justify-content:flex-end;align-items:center}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select{appearance:none;border:none;height:34px;min-width:34px;padding:8px 14px;text-align:end;font-size:14px;font-family:Montserrat,serif;cursor:pointer;background:white}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select:focus-visible{outline:none;background:#D9D9D9}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select:hover{background:#D9D9D9}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select *{background:white;padding:5px}.table-canvas .table ::ng-deep ngx-datatable:has(datatable-footer) datatable-body{height:calc(100% - 48px)!important}::ng-deep ngx-datatable .auto-details-height .datatable-row-wrapper{height:unset!important}::ng-deep ngx-datatable .auto-details-height .datatable-row-wrapper .datatable-row-detail{height:unset!important}.default-menu{display:flex;flex-direction:row}@media screen and (max-width: 600px){.page-items,.page-size-selector,.horizontal-menu{display:none!important}}@media screen and (min-width: 601px){.vertical-menu{display:none!important}}\n"] }]
+            args: [{ selector: 'biit-datatable', providers: [provideTranslocoScope({ scope: 'wizardry-theme/table', alias: 't' })], template: "<div id=\"biit-table\" class=\"table-canvas\" *transloco=\"let t\">\n  <div class=\"top\" *ngIf=\"!hideHeader\">\n    <div id=\"menu\" class=\"action-bar\">\n      <biit-vertical-menu *ngIf=\"actionsTpl\" class=\"vertical-menu\">\n        <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n      </biit-vertical-menu>\n      <div *ngIf=\"actionsTpl\" class=\"horizontal-menu default-menu\">\n        <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n      </div>\n      <div class=\"default-menu\" *ngIf=\"!actionsTpl\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div id=\"options\" class=\"options\">\n      <biit-input-text id=\"search\" #searchInput\n                       [ngModel]=\"search\"\n                       (onActionPerformed)=\"\n                         onFilter($event, true);\n                       \"\n                       (ngModelChange)=\"onFilter($event)\"\n                       (focusout)=\"searchInput.value = search\"\n                       icon=\"search\"\n                       [placeholder]=\"t('t.search')\"\n      ></biit-input-text>\n      <biit-multiselect id=\"column-selector\" [ngModel]=\"_columns\"\n                        (ngModelChange)=\"setColumnVisibility($event)\"\n                        [data]=\"allColumns\"\n                        label=\"name\"\n                        value=\"visible\"\n                        [type]=\"BiitMultiselectType.ICON\"\n                        [title]=\"t('t.column-selector')\"\n                        [compact]=\"true\"\n      ></biit-multiselect>\n    </div>\n  </div>\n  <div id=\"content\" class=\"table\">\n    <biit-progress-bar *ngIf=\"loading\"></biit-progress-bar>\n    <ng-container *ngIf=\"!serverSide\">\n      <ngx-datatable #table\n                     [rows]=\"data\"\n                     [columns]=\"_columns\"\n                     [columnMode]=\"'force'\"\n                     [headerHeight]=\"42\"\n                     [footerHeight]=\"hideFooter ? 0 : 34\"\n                     [rowHeight]=\"'auto'\"\n                     [reorderable]=\"false\"\n                     [selectionType]=\"SelectionType.checkbox\"\n                     [selected]=\"selected\"\n                     (select)=\"onSelect($event)\"\n                     (activate)=\"onActivate($event)\"\n                     [virtualization]=\"false\"\n                     [scrollbarVDynamic]=\"true\"\n                     [limit]=\"pageSize\"\n                     [scrollbarH]=\"scrollbarH\"\n                     [messages]=\"{emptyMessage: t('t.empty-message')}\"\n      >\n        <ngx-datatable-column *ngIf=\"selectable && !singleSelection\"\n                              #chkbox\n                              [width]=\"42\"\n                              [sortable]=\"false\"\n                              [canAutoResize]=\"false\"\n                              [draggable]=\"false\"\n                              [resizeable]=\"false\"\n                              [name]=\"'chkbox'\"\n        >\n          <ng-template\n            ngx-datatable-header-template\n            let-value=\"value\"\n            let-allRowsSelected=\"allRowsSelected\"\n            let-selectFn=\"selectFn\"\n          >\n            <biit-checkbox [ngModel]=\"allRowsSelected\" (ngModelChange)=\"selectFn(!allRowsSelected)\"></biit-checkbox>\n          </ng-template>\n          <ng-template\n            ngx-datatable-cell-template\n            let-value=\"value\"\n            let-isSelected=\"isSelected\"\n            let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\n          >\n            <biit-checkbox [ngModel]=\"isSelected\" (ngModelChange)=\"onCheckboxChangeFn($event)\"></biit-checkbox>\n          </ng-template>\n        </ngx-datatable-column>\n\n        <ngx-datatable-column *ngFor=\"let column of _columns\"\n                              [name]=\"column.name\"\n                              [prop]=\"column.prop\"\n                              [checkboxable]=\"column.checkboxable\"\n                              [frozenLeft]=\"column.frozenLeft\"\n                              [frozenRight]=\"column.frozenRight\"\n                              [flexGrow]=\"column.flexGrow\"\n                              [minWidth]=\"column.minWidth\"\n                              [maxWidth]=\"column.maxWidth\"\n                              [width]=\"column.width\"\n                              [resizeable]=\"column.resizeable\"\n                              [comparator]=\"column.comparator\"\n                              [pipe]=\"column.pipe\"\n                              [sortable]=\"column.sortable\"\n                              [draggable]=\"column.draggable\"\n                              [canAutoResize]=\"column.canAutoResize\"\n                              [cellTemplate]=\"column.cellTemplate\"\n                              [ghostCellTemplate]=\"column.ghostCellTemplate\"\n                              [treeToggleTemplate]=\"column.treeToggleTemplate\"\n                              [cellClass]=\"column.cellClass\"\n                              [headerTemplate]=\"column.headerTemplate\"\n                              [headerClass]=\"column.headerClass\"\n                              [headerCheckboxable]=\"column.headerCheckboxable\"\n                              [isTreeColumn]=\"column.isTreeColumn\"\n                              [treeLevelIndent]=\"column.treeLevelIndent\"\n                              [summaryFunc]=\"column.summaryFunc\"\n                              [summaryTemplate]=\"column.summaryTemplate\"\n        ></ngx-datatable-column>\n\n        <ngx-datatable-footer id=\"datatable-footer\">\n          <ng-template\n            ngx-datatable-footer-template\n            let-rowCount=\"rowCount\"\n            let-pageSizeCurrent=\"pageSize\"\n            let-selectedCount=\"selectedCount\"\n            let-curPage=\"curPage\"\n            let-offset=\"offset\"\n          >\n            <div class=\"label\">\n              <span>{{ t('t.total') }}: </span><span id=\"total-number-of-items\">{{rowCount}}</span>\n              <span *ngIf=\"selectedCount\">&nbsp;&nbsp;|&nbsp;&nbsp;{{ t('t.selected') }}: </span><span *ngIf=\"selectedCount\" id=\"number-of-items-selected\">{{selectedCount}}</span>\n            </div>\n            <div class=\"pagination\" [style.display]=\"!((rowCount / pageSize) > 1) ? 'none' : null\">\n              <biit-datatable-pager #pager\n                                    [page]=\"curPage\"\n                                    [size]=\"pageSizeCurrent\"\n                                    [count]=\"rowCount\"\n                                    [hidden]=\"!((rowCount / pageSize) > 1)\"\n                                    (change)=\"table.onFooterPage($event)\">\n              </biit-datatable-pager>\n            </div>\n            <div class=\"page-items\" *ngIf=\"pageSizeList\">\n              <div *ngIf=\"pageSizeList?.length\">\n                <span>{{ t('t.rows-per-page') }}:</span>\n                <select [(ngModel)]=\"pageSize\"\n                        (ngModelChange)=\"pager.size = $event\">\n                  <option *ngFor=\"let size of pageSizeList\"\n                          [ngValue]=\"size\"\n                  >\n                    {{size}}\n                  </option>\n                </select>\n              </div>\n            </div>\n          </ng-template>\n        </ngx-datatable-footer>\n      </ngx-datatable>\n    </ng-container>\n\n    <ng-container *ngIf=\"serverSide\">\n      <ngx-datatable #table\n                     [rows]=\"data\"\n                     [columns]=\"_columns\"\n                     [columnMode]=\"'force'\"\n                     [headerHeight]=\"42\"\n                     [footerHeight]=\"hideFooter ? 0 : 34\"\n                     [rowHeight]=\"'auto'\"\n                     [reorderable]=\"false\"\n                     [selectionType]=\"SelectionType.checkbox\"\n                     [selected]=\"selected\"\n                     (select)=\"onSelect($event)\"\n                     (activate)=\"onActivate($event)\"\n                     [virtualization]=\"false\"\n                     [scrollbarVDynamic]=\"true\"\n                     [scrollbarH]=\"scrollbarH\"\n                     [messages]=\"{emptyMessage: t('t.empty-message')}\"\n                     [externalPaging]=\"true\"\n                     [count]=\"page.totalElements\"\n                     [offset]=\"page.pageNumber\"\n                     [limit]=\"page.pageSize\"\n                     (page)=\"onFooterPageChange($event)\"\n      >\n        <ngx-datatable-column *ngIf=\"selectable && !singleSelection\"\n                              #chkbox\n                              [width]=\"42\"\n                              [sortable]=\"false\"\n                              [canAutoResize]=\"false\"\n                              [draggable]=\"false\"\n                              [resizeable]=\"false\"\n                              [name]=\"'chkbox'\"\n        >\n          <ng-template\n            ngx-datatable-header-template\n            let-value=\"value\"\n            let-allRowsSelected=\"allRowsSelected\"\n            let-selectFn=\"selectFn\"\n          >\n            <biit-checkbox [ngModel]=\"allRowsSelected\" (ngModelChange)=\"selectFn(!allRowsSelected)\"></biit-checkbox>\n          </ng-template>\n          <ng-template\n            ngx-datatable-cell-template\n            let-value=\"value\"\n            let-isSelected=\"isSelected\"\n            let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\n          >\n            <biit-checkbox [ngModel]=\"isSelected\" (ngModelChange)=\"onCheckboxChangeFn($event)\"></biit-checkbox>\n          </ng-template>\n        </ngx-datatable-column>\n\n        <ngx-datatable-column *ngFor=\"let column of _columns\"\n                              [name]=\"column.name\"\n                              [prop]=\"column.prop\"\n                              [checkboxable]=\"column.checkboxable\"\n                              [frozenLeft]=\"column.frozenLeft\"\n                              [frozenRight]=\"column.frozenRight\"\n                              [flexGrow]=\"column.flexGrow\"\n                              [minWidth]=\"column.minWidth\"\n                              [maxWidth]=\"column.maxWidth\"\n                              [width]=\"column.width\"\n                              [resizeable]=\"column.resizeable\"\n                              [comparator]=\"column.comparator\"\n                              [pipe]=\"column.pipe\"\n                              [sortable]=\"column.sortable\"\n                              [draggable]=\"column.draggable\"\n                              [canAutoResize]=\"column.canAutoResize\"\n                              [cellTemplate]=\"column.cellTemplate\"\n                              [ghostCellTemplate]=\"column.ghostCellTemplate\"\n                              [treeToggleTemplate]=\"column.treeToggleTemplate\"\n                              [cellClass]=\"column.cellClass\"\n                              [headerTemplate]=\"column.headerTemplate\"\n                              [headerClass]=\"column.headerClass\"\n                              [headerCheckboxable]=\"column.headerCheckboxable\"\n                              [isTreeColumn]=\"column.isTreeColumn\"\n                              [treeLevelIndent]=\"column.treeLevelIndent\"\n                              [summaryFunc]=\"column.summaryFunc\"\n                              [summaryTemplate]=\"column.summaryTemplate\"\n        ></ngx-datatable-column>\n\n        <ngx-datatable-footer>\n          <ng-template\n            ngx-datatable-footer-template\n            let-rowCount=\"rowCount\"\n            let-pageSizeCurrent=\"pageSize\"\n            let-selectedCount=\"selectedCount\"\n            let-curPage=\"curPage\"\n            let-offset=\"offset\"\n          >\n            <div class=\"label\" id=\"total-elements\">\n              <span>{{ t('t.total') }}: {{rowCount}}</span>\n              <span *ngIf=\"selectedCount\">&nbsp;&nbsp;|&nbsp;&nbsp;{{ t('t.selected') }}: {{selectedCount}}</span>\n            </div>\n            <div class=\"pagination\" [style.display]=\"!((rowCount / pageSize) > 1) ? 'none' : null\">\n              <biit-datatable-pager #pager\n                                    [page]=\"curPage\"\n                                    [size]=\"pageSizeCurrent\"\n                                    [count]=\"rowCount\"\n                                    [hidden]=\"!((rowCount / pageSize) > 1)\"\n                                    (change)=\"table.onFooterPage($event)\">\n              </biit-datatable-pager>\n            </div>\n            <div class=\"page-items\" *ngIf=\"pageSizeList\">\n              <div *ngIf=\"pageSizeList?.length\">\n                <span>{{ t('t.rows-per-page') }}:</span>\n                <select [(ngModel)]=\"pageSize\"\n                        (ngModelChange)=\"pager.size = $event\">\n                  <option *ngFor=\"let size of pageSizeList\"\n                          [ngValue]=\"size\"\n                  >\n                    {{size}}\n                  </option>\n                </select>\n              </div>\n            </div>\n          </ng-template>\n        </ngx-datatable-footer>\n      </ngx-datatable>\n    </ng-container>\n  </div>\n</div>\n", styles: [".table-canvas{height:100%;display:flex;flex-direction:column;gap:14px;background:var(--popup-background)}.table-canvas .top{display:flex;flex:0}.table-canvas .top .action-bar{display:flex;flex:1}.table-canvas .top .options{display:flex;flex:0}.table-canvas .table{position:relative;flex:1;min-height:0;min-width:0}.table-canvas .table biit-progress-bar{position:absolute;z-index:1;left:0;right:3px;top:42px}.table-canvas .table ::ng-deep ngx-datatable{height:100%;position:absolute;inset:0}.table-canvas .table ::ng-deep ngx-datatable>div{height:calc(100% - 42px)}.table-canvas .table ::ng-deep ngx-datatable>div>div{height:100%}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner{height:inherit}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap{height:100%!important;width:calc(100% - 3px);display:flex;align-items:center;justify-content:center;background:var(--component-color)}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap span{color:var(--secondary-text-color);font-size:16px;line-height:100%;font-weight:700;text-transform:uppercase}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap .sort-btn{position:absolute;right:14px}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap:has(biit-checkbox){background:var(--popup-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-body{height:100%!important;overflow-y:auto!important}.table-canvas .table ::ng-deep ngx-datatable datatable-body .empty-row{height:100%;display:flex;align-items:center;justify-content:center}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row .datatable-body-cell-label{display:flex;align-items:center;min-height:42px;border-bottom:3px solid var(--component-color);width:calc(100% - 3px);padding:9px 14px;line-height:120%;height:100%}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row:hover .datatable-body-cell-label{background:var(--secondary-text-color)}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row.active .datatable-body-cell-label{background:var(--main-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer{position:absolute;bottom:0;background:var(--popup-background);z-index:10}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .label{flex:1 0}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .pagination{display:flex;margin:auto;flex:0;justify-content:center}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .pagination biit-datatable-pager{flex:none!important}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items{flex:1 0;display:flex;justify-content:flex-end;align-items:center}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select{appearance:none;border:none;height:34px;min-width:34px;padding:8px 14px;text-align:end;font-size:14px;font-family:Montserrat,serif;cursor:pointer;background:var(--popup-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select:focus-visible{outline:none;background:var(--main-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select:hover{background:var(--main-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select *{background:var(--popup-background);padding:5px}.table-canvas .table ::ng-deep ngx-datatable:has(datatable-footer) datatable-body{height:calc(100% - 48px)!important}::ng-deep ngx-datatable .auto-details-height .datatable-row-wrapper{height:unset!important}::ng-deep ngx-datatable .auto-details-height .datatable-row-wrapper .datatable-row-detail{height:unset!important}.default-menu{display:flex;flex-direction:row}@media screen and (max-width: 600px){.page-items,.page-size-selector,.horizontal-menu{display:none!important}}@media screen and (min-width: 601px){.vertical-menu{display:none!important}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.BiitIconService }]; }, propDecorators: { table: [{
                 type: ViewChild,
                 args: ['table']

package/esm2020/table/biit-datatable-pager/biit-datatable-pager.component.mjs CHANGED Viewed

@@ -27,9 +27,9 @@ export class BiitDatatablePagerComponent extends DataTablePagerComponent {
     }
 }
 BiitDatatablePagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDatatablePagerComponent, deps: [{ token: i1.BiitIconService }], target: i0.ɵɵFactoryTarget.Component });
-BiitDatatablePagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitDatatablePagerComponent, selector: "biit-datatable-pager", providers: [provideTranslocoScope({ scope: 'wizardry-theme/table', alias: 't' })], usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div id=\"page-selector\" class=\"page-selector\">\n    <button biit-icon id=\"arrow-first\"\n            icon='right_double_arrow'\n            class=\"horizontal-flip\"\n            (click)=\"selectPage(1)\"\n            [disabled]=\"!canPrevious()\"\n            tooltip=\"{{t('t.first-page')}}\"\n    ></button>\n    <button biit-icon id=\"arrow-previous\"\n            icon='right_arrow'\n            class=\"compact horizontal-flip\"\n            (click)=\"prevPage()\"\n            [disabled]=\"!canPrevious()\"\n            tooltip=\"{{t('t.previous-page')}}\"\n    ></button>\n    <div class=\"page-display\" (click)=\"input.focus()\">\n      <input id=\"current-page\" #input\n             [ngModel]=\"page\"\n             readonly\n             (keydown.arrowUp)=\"nextPage(); $event.stopPropagation(); $event.preventDefault();\"\n             (keydown.arrowRight)=\"nextPage(); $event.stopPropagation(); $event.preventDefault();\"\n             (keydown.arrowDown)=\"prevPage(); $event.stopPropagation(); $event.preventDefault();\"\n             (keydown.arrowLeft)=\"prevPage(); $event.stopPropagation(); $event.preventDefault();\"\n             type=\"number\"\n             [min]=\"1\"\n             [max]=\"totalPages\"\n             style=\"width: 2.5rem\">\n      <span #label id=\"total-pages\">/{{ totalPages }}</span>\n    </div>\n    <button biit-icon id=\"arrow-next\"\n            icon='right_arrow'\n            class=\"compact\"\n            (click)=\"nextPage()\"\n            [disabled]=\"!canNext()\"\n            tooltip=\"{{t('t.next-page')}}\"\n    ></button>\n    <button biit-icon id=\"arrow-last\"\n            icon='right_double_arrow'\n            (click)=\"selectPage(totalPages)\"\n            [disabled]=\"!canNext()\"\n            tooltip=\"{{t('t.last-page')}}\"\n    ></button>\n  </div>\n</ng-container>\n", styles: [".page-selector{display:flex;position:relative;align-items:center}.page-selector button[biit-icon].horizontal-flip{rotate:-180deg}.page-selector button[biit-icon].compact ::ng-deep .icon-button-svg{width:10px}.page-selector .page-display{position:relative;display:flex;align-items:baseline;padding:6px 14px;gap:14px;line-height:100%;font-weight:700;border-bottom:3px #262626 solid}.page-selector .page-display:hover{background:#D9D9D9}.page-selector .page-display:has(input:focus-visible){background:#D9D9D9}.page-selector .page-display input{all:unset;min-width:14px}.page-selector .page-display input[type=number]::-webkit-inner-spin-button,.page-selector .page-display input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.page-selector .page-display input[type=number]{-moz-appearance:textfield}.page-selector .page-display span{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }, { kind: "directive", type: i4.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i5.BiitTooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "ignorePadding"] }] });
+BiitDatatablePagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitDatatablePagerComponent, selector: "biit-datatable-pager", providers: [provideTranslocoScope({ scope: 'wizardry-theme/table', alias: 't' })], usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div id=\"page-selector\" class=\"page-selector\">\n    <button biit-icon id=\"arrow-first\"\n            icon='right_double_arrow'\n            class=\"horizontal-flip\"\n            (click)=\"selectPage(1)\"\n            [disabled]=\"!canPrevious()\"\n            tooltip=\"{{t('t.first-page')}}\"\n    ></button>\n    <button biit-icon id=\"arrow-previous\"\n            icon='right_arrow'\n            class=\"compact horizontal-flip\"\n            (click)=\"prevPage()\"\n            [disabled]=\"!canPrevious()\"\n            tooltip=\"{{t('t.previous-page')}}\"\n    ></button>\n    <div class=\"page-display\" (click)=\"input.focus()\">\n      <input id=\"current-page\" #input\n             [ngModel]=\"page\"\n             readonly\n             (keydown.arrowUp)=\"nextPage(); $event.stopPropagation(); $event.preventDefault();\"\n             (keydown.arrowRight)=\"nextPage(); $event.stopPropagation(); $event.preventDefault();\"\n             (keydown.arrowDown)=\"prevPage(); $event.stopPropagation(); $event.preventDefault();\"\n             (keydown.arrowLeft)=\"prevPage(); $event.stopPropagation(); $event.preventDefault();\"\n             type=\"number\"\n             [min]=\"1\"\n             [max]=\"totalPages\"\n             style=\"width: 2.5rem\">\n      <span #label id=\"total-pages\">/{{ totalPages }}</span>\n    </div>\n    <button biit-icon id=\"arrow-next\"\n            icon='right_arrow'\n            class=\"compact\"\n            (click)=\"nextPage()\"\n            [disabled]=\"!canNext()\"\n            tooltip=\"{{t('t.next-page')}}\"\n    ></button>\n    <button biit-icon id=\"arrow-last\"\n            icon='right_double_arrow'\n            (click)=\"selectPage(totalPages)\"\n            [disabled]=\"!canNext()\"\n            tooltip=\"{{t('t.last-page')}}\"\n    ></button>\n  </div>\n</ng-container>\n", styles: [".page-selector{display:flex;position:relative;align-items:center}.page-selector button[biit-icon].horizontal-flip{rotate:-180deg}.page-selector button[biit-icon].compact ::ng-deep .icon-button-svg{width:10px}.page-selector .page-display{position:relative;display:flex;align-items:baseline;padding:6px 14px;gap:14px;line-height:100%;font-weight:700;border-bottom:3px var(--component-color) solid}.page-selector .page-display:hover{background:var(--main-background)}.page-selector .page-display:has(input:focus-visible){background:var(--main-background)}.page-selector .page-display input{all:unset;min-width:14px}.page-selector .page-display input[type=number]::-webkit-inner-spin-button,.page-selector .page-display input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.page-selector .page-display input[type=number]{-moz-appearance:textfield}.page-selector .page-display span{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }, { kind: "directive", type: i4.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i5.BiitTooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "ignorePadding"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDatatablePagerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'biit-datatable-pager', providers: [provideTranslocoScope({ scope: 'wizardry-theme/table', alias: 't' })], template: "<ng-container *transloco=\"let t\">\n  <div id=\"page-selector\" class=\"page-selector\">\n    <button biit-icon id=\"arrow-first\"\n            icon='right_double_arrow'\n            class=\"horizontal-flip\"\n            (click)=\"selectPage(1)\"\n            [disabled]=\"!canPrevious()\"\n            tooltip=\"{{t('t.first-page')}}\"\n    ></button>\n    <button biit-icon id=\"arrow-previous\"\n            icon='right_arrow'\n            class=\"compact horizontal-flip\"\n            (click)=\"prevPage()\"\n            [disabled]=\"!canPrevious()\"\n            tooltip=\"{{t('t.previous-page')}}\"\n    ></button>\n    <div class=\"page-display\" (click)=\"input.focus()\">\n      <input id=\"current-page\" #input\n             [ngModel]=\"page\"\n             readonly\n             (keydown.arrowUp)=\"nextPage(); $event.stopPropagation(); $event.preventDefault();\"\n             (keydown.arrowRight)=\"nextPage(); $event.stopPropagation(); $event.preventDefault();\"\n             (keydown.arrowDown)=\"prevPage(); $event.stopPropagation(); $event.preventDefault();\"\n             (keydown.arrowLeft)=\"prevPage(); $event.stopPropagation(); $event.preventDefault();\"\n             type=\"number\"\n             [min]=\"1\"\n             [max]=\"totalPages\"\n             style=\"width: 2.5rem\">\n      <span #label id=\"total-pages\">/{{ totalPages }}</span>\n    </div>\n    <button biit-icon id=\"arrow-next\"\n            icon='right_arrow'\n            class=\"compact\"\n            (click)=\"nextPage()\"\n            [disabled]=\"!canNext()\"\n            tooltip=\"{{t('t.next-page')}}\"\n    ></button>\n    <button biit-icon id=\"arrow-last\"\n            icon='right_double_arrow'\n            (click)=\"selectPage(totalPages)\"\n            [disabled]=\"!canNext()\"\n            tooltip=\"{{t('t.last-page')}}\"\n    ></button>\n  </div>\n</ng-container>\n", styles: [".page-selector{display:flex;position:relative;align-items:center}.page-selector button[biit-icon].horizontal-flip{rotate:-180deg}.page-selector button[biit-icon].compact ::ng-deep .icon-button-svg{width:10px}.page-selector .page-display{position:relative;display:flex;align-items:baseline;padding:6px 14px;gap:14px;line-height:100%;font-weight:700;border-bottom:3px #262626 solid}.page-selector .page-display:hover{background:#D9D9D9}.page-selector .page-display:has(input:focus-visible){background:#D9D9D9}.page-selector .page-display input{all:unset;min-width:14px}.page-selector .page-display input[type=number]::-webkit-inner-spin-button,.page-selector .page-display input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.page-selector .page-display input[type=number]{-moz-appearance:textfield}.page-selector .page-display span{pointer-events:none}\n"] }]
+            args: [{ selector: 'biit-datatable-pager', providers: [provideTranslocoScope({ scope: 'wizardry-theme/table', alias: 't' })], template: "<ng-container *transloco=\"let t\">\n  <div id=\"page-selector\" class=\"page-selector\">\n    <button biit-icon id=\"arrow-first\"\n            icon='right_double_arrow'\n            class=\"horizontal-flip\"\n            (click)=\"selectPage(1)\"\n            [disabled]=\"!canPrevious()\"\n            tooltip=\"{{t('t.first-page')}}\"\n    ></button>\n    <button biit-icon id=\"arrow-previous\"\n            icon='right_arrow'\n            class=\"compact horizontal-flip\"\n            (click)=\"prevPage()\"\n            [disabled]=\"!canPrevious()\"\n            tooltip=\"{{t('t.previous-page')}}\"\n    ></button>\n    <div class=\"page-display\" (click)=\"input.focus()\">\n      <input id=\"current-page\" #input\n             [ngModel]=\"page\"\n             readonly\n             (keydown.arrowUp)=\"nextPage(); $event.stopPropagation(); $event.preventDefault();\"\n             (keydown.arrowRight)=\"nextPage(); $event.stopPropagation(); $event.preventDefault();\"\n             (keydown.arrowDown)=\"prevPage(); $event.stopPropagation(); $event.preventDefault();\"\n             (keydown.arrowLeft)=\"prevPage(); $event.stopPropagation(); $event.preventDefault();\"\n             type=\"number\"\n             [min]=\"1\"\n             [max]=\"totalPages\"\n             style=\"width: 2.5rem\">\n      <span #label id=\"total-pages\">/{{ totalPages }}</span>\n    </div>\n    <button biit-icon id=\"arrow-next\"\n            icon='right_arrow'\n            class=\"compact\"\n            (click)=\"nextPage()\"\n            [disabled]=\"!canNext()\"\n            tooltip=\"{{t('t.next-page')}}\"\n    ></button>\n    <button biit-icon id=\"arrow-last\"\n            icon='right_double_arrow'\n            (click)=\"selectPage(totalPages)\"\n            [disabled]=\"!canNext()\"\n            tooltip=\"{{t('t.last-page')}}\"\n    ></button>\n  </div>\n</ng-container>\n", styles: [".page-selector{display:flex;position:relative;align-items:center}.page-selector button[biit-icon].horizontal-flip{rotate:-180deg}.page-selector button[biit-icon].compact ::ng-deep .icon-button-svg{width:10px}.page-selector .page-display{position:relative;display:flex;align-items:baseline;padding:6px 14px;gap:14px;line-height:100%;font-weight:700;border-bottom:3px var(--component-color) solid}.page-selector .page-display:hover{background:var(--main-background)}.page-selector .page-display:has(input:focus-visible){background:var(--main-background)}.page-selector .page-display input{all:unset;min-width:14px}.page-selector .page-display input[type=number]::-webkit-inner-spin-button,.page-selector .page-display input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.page-selector .page-display input[type=number]{-moz-appearance:textfield}.page-selector .page-display span{pointer-events:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.BiitIconService }]; } });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmlpdC1kYXRhdGFibGUtcGFnZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvd2l6YXJkcnktdGhlbWUvdGFibGUvc3JjL2JpaXQtZGF0YXRhYmxlLXBhZ2VyL2JpaXQtZGF0YXRhYmxlLXBhZ2VyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3dpemFyZHJ5LXRoZW1lL3RhYmxlL3NyYy9iaWl0LWRhdGF0YWJsZS1wYWdlci9iaWl0LWRhdGF0YWJsZS1wYWdlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3hDLE9BQU8sRUFBQyx1QkFBdUIsRUFBQyxNQUFNLHdCQUF3QixDQUFDO0FBQy9ELE9BQU8sRUFBQyxxQkFBcUIsRUFBQyxNQUFNLG1CQUFtQixDQUFDO0FBRXhELE9BQU8sRUFBQyxlQUFlLEVBQUMsTUFBTSx1Q0FBdUMsQ0FBQzs7Ozs7OztBQVF0RSxNQUFNLE9BQU8sMkJBQTRCLFNBQVEsdUJBQXVCO0lBRXRFLFlBQVksZUFBZ0M7UUFDMUMsS0FBSyxFQUFFLENBQUM7UUFDUixlQUFlLENBQUMsYUFBYSxDQUFDLGVBQWUsQ0FBQyxDQUFDO0lBQ2pELENBQUM7SUFFRCxhQUFhLENBQUMsRUFBRTtRQUNkLElBQUksRUFBRSxDQUFDLEtBQUssSUFBSSxFQUFFLEVBQUU7WUFDbEIsSUFBSSxRQUFRLENBQUMsRUFBRSxDQUFDLEtBQUssQ0FBQyxHQUFHLFFBQVEsQ0FBQyxFQUFFLENBQUMsR0FBRyxDQUFDLEVBQUU7Z0JBQ3pDLEVBQUUsQ0FBQyxLQUFLLEdBQUcsRUFBRSxDQUFDLEdBQUcsQ0FBQzthQUNuQjtZQUNELElBQUksUUFBUSxDQUFDLEVBQUUsQ0FBQyxLQUFLLENBQUMsR0FBRyxRQUFRLENBQUMsRUFBRSxDQUFDLEdBQUcsQ0FBQyxFQUFFO2dCQUN6QyxFQUFFLENBQUMsS0FBSyxHQUFHLEVBQUUsQ0FBQyxHQUFHLENBQUM7YUFDbkI7U0FDRjtJQUNILENBQUM7SUFFRCxHQUFHLENBQUMsS0FBSztJQUNULENBQUM7O3lIQW5CVSwyQkFBMkI7NkdBQTNCLDJCQUEyQiwrQ0FGM0IsQ0FBQyxxQkFBcUIsQ0FBQyxFQUFDLEtBQUssRUFBQyxzQkFBc0IsRUFBRSxLQUFLLEVBQUMsR0FBRyxFQUFDLENBQUMsQ0FBQyxpRENWL0UsazJEQTZDQTs0RkRqQ2EsMkJBQTJCO2tCQU52QyxTQUFTOytCQUNFLHNCQUFzQixhQUdyQixDQUFDLHFCQUFxQixDQUFDLEVBQUMsS0FBSyxFQUFDLHNCQUFzQixFQUFFLEtBQUssRUFBQyxHQUFHLEVBQUMsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtEYXRhVGFibGVQYWdlckNvbXBvbmVudH0gZnJvbSBcIkBzaWVtZW5zL25neC1kYXRhdGFibGVcIjtcbmltcG9ydCB7cHJvdmlkZVRyYW5zbG9jb1Njb3BlfSBmcm9tIFwiQG5nbmVhdC90cmFuc2xvY29cIjtcbmltcG9ydCB7QmlpdEljb25TZXJ2aWNlfSBmcm9tIFwiQGJpaXQtc29sdXRpb25zL3dpemFyZHJ5LXRoZW1lL2ljb25cIjtcbmltcG9ydCB7Y29tcGxldGVJY29uU2V0fSBmcm9tICdAYmlpdC1zb2x1dGlvbnMvYmlpdC1pY29ucy1jb2xsZWN0aW9uJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYmlpdC1kYXRhdGFibGUtcGFnZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vYmlpdC1kYXRhdGFibGUtcGFnZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9iaWl0LWRhdGF0YWJsZS1wYWdlci5jb21wb25lbnQuc2NzcyddLFxuICBwcm92aWRlcnM6IFtwcm92aWRlVHJhbnNsb2NvU2NvcGUoe3Njb3BlOid3aXphcmRyeS10aGVtZS90YWJsZScsIGFsaWFzOid0J30pXVxufSlcbmV4cG9ydCBjbGFzcyBCaWl0RGF0YXRhYmxlUGFnZXJDb21wb25lbnQgZXh0ZW5kcyBEYXRhVGFibGVQYWdlckNvbXBvbmVudCB7XG5cbiAgY29uc3RydWN0b3IoYmlpdEljb25TZXJ2aWNlOiBCaWl0SWNvblNlcnZpY2UpIHtcbiAgICBzdXBlcigpO1xuICAgIGJpaXRJY29uU2VydmljZS5yZWdpc3Rlckljb25zKGNvbXBsZXRlSWNvblNldCk7XG4gIH1cblxuICBlbmZvcmNlTWluTWF4KGVsKSB7XG4gICAgaWYgKGVsLnZhbHVlICE9IFwiXCIpIHtcbiAgICAgIGlmIChwYXJzZUludChlbC52YWx1ZSkgPCBwYXJzZUludChlbC5taW4pKSB7XG4gICAgICAgIGVsLnZhbHVlID0gZWwubWluO1xuICAgICAgfVxuICAgICAgaWYgKHBhcnNlSW50KGVsLnZhbHVlKSA+IHBhcnNlSW50KGVsLm1heCkpIHtcbiAgICAgICAgZWwudmFsdWUgPSBlbC5tYXg7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgbG9nKGV2ZW50KSB7XG4gIH1cbn1cbiIsIjxuZy1jb250YWluZXIgKnRyYW5zbG9jbz1cImxldCB0XCI+XG4gIDxkaXYgaWQ9XCJwYWdlLXNlbGVjdG9yXCIgY2xhc3M9XCJwYWdlLXNlbGVjdG9yXCI+XG4gICAgPGJ1dHRvbiBiaWl0LWljb24gaWQ9XCJhcnJvdy1maXJzdFwiXG4gICAgICAgICAgICBpY29uPSdyaWdodF9kb3VibGVfYXJyb3cnXG4gICAgICAgICAgICBjbGFzcz1cImhvcml6b250YWwtZmxpcFwiXG4gICAgICAgICAgICAoY2xpY2spPVwic2VsZWN0UGFnZSgxKVwiXG4gICAgICAgICAgICBbZGlzYWJsZWRdPVwiIWNhblByZXZpb3VzKClcIlxuICAgICAgICAgICAgdG9vbHRpcD1cInt7dCgndC5maXJzdC1wYWdlJyl9fVwiXG4gICAgPjwvYnV0dG9uPlxuICAgIDxidXR0b24gYmlpdC1pY29uIGlkPVwiYXJyb3ctcHJldmlvdXNcIlxuICAgICAgICAgICAgaWNvbj0ncmlnaHRfYXJyb3cnXG4gICAgICAgICAgICBjbGFzcz1cImNvbXBhY3QgaG9yaXpvbnRhbC1mbGlwXCJcbiAgICAgICAgICAgIChjbGljayk9XCJwcmV2UGFnZSgpXCJcbiAgICAgICAgICAgIFtkaXNhYmxlZF09XCIhY2FuUHJldmlvdXMoKVwiXG4gICAgICAgICAgICB0b29sdGlwPVwie3t0KCd0LnByZXZpb3VzLXBhZ2UnKX19XCJcbiAgICA+PC9idXR0b24+XG4gICAgPGRpdiBjbGFzcz1cInBhZ2UtZGlzcGxheVwiIChjbGljayk9XCJpbnB1dC5mb2N1cygpXCI+XG4gICAgICA8aW5wdXQgaWQ9XCJjdXJyZW50LXBhZ2VcIiAjaW5wdXRcbiAgICAgICAgICAgICBbbmdNb2RlbF09XCJwYWdlXCJcbiAgICAgICAgICAgICByZWFkb25seVxuICAgICAgICAgICAgIChrZXlkb3duLmFycm93VXApPVwibmV4dFBhZ2UoKTsgJGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpOyAkZXZlbnQucHJldmVudERlZmF1bHQoKTtcIlxuICAgICAgICAgICAgIChrZXlkb3duLmFycm93UmlnaHQpPVwibmV4dFBhZ2UoKTsgJGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpOyAkZXZlbnQucHJldmVudERlZmF1bHQoKTtcIlxuICAgICAgICAgICAgIChrZXlkb3duLmFycm93RG93bik9XCJwcmV2UGFnZSgpOyAkZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7ICRldmVudC5wcmV2ZW50RGVmYXVsdCgpO1wiXG4gICAgICAgICAgICAgKGtleWRvd24uYXJyb3dMZWZ0KT1cInByZXZQYWdlKCk7ICRldmVudC5zdG9wUHJvcGFnYXRpb24oKTsgJGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XCJcbiAgICAgICAgICAgICB0eXBlPVwibnVtYmVyXCJcbiAgICAgICAgICAgICBbbWluXT1cIjFcIlxuICAgICAgICAgICAgIFttYXhdPVwidG90YWxQYWdlc1wiXG4gICAgICAgICAgICAgc3R5bGU9XCJ3aWR0aDogMi41cmVtXCI+XG4gICAgICA8c3BhbiAjbGFiZWwgaWQ9XCJ0b3RhbC1wYWdlc1wiPi97eyB0b3RhbFBhZ2VzIH19PC9zcGFuPlxuICAgIDwvZGl2PlxuICAgIDxidXR0b24gYmlpdC1pY29uIGlkPVwiYXJyb3ctbmV4dFwiXG4gICAgICAgICAgICBpY29uPSdyaWdodF9hcnJvdydcbiAgICAgICAgICAgIGNsYXNzPVwiY29tcGFjdFwiXG4gICAgICAgICAgICAoY2xpY2spPVwibmV4dFBhZ2UoKVwiXG4gICAgICAgICAgICBbZGlzYWJsZWRdPVwiIWNhbk5leHQoKVwiXG4gICAgICAgICAgICB0b29sdGlwPVwie3t0KCd0Lm5leHQtcGFnZScpfX1cIlxuICAgID48L2J1dHRvbj5cbiAgICA8YnV0dG9uIGJpaXQtaWNvbiBpZD1cImFycm93LWxhc3RcIlxuICAgICAgICAgICAgaWNvbj0ncmlnaHRfZG91YmxlX2Fycm93J1xuICAgICAgICAgICAgKGNsaWNrKT1cInNlbGVjdFBhZ2UodG90YWxQYWdlcylcIlxuICAgICAgICAgICAgW2Rpc2FibGVkXT1cIiFjYW5OZXh0KClcIlxuICAgICAgICAgICAgdG9vbHRpcD1cInt7dCgndC5sYXN0LXBhZ2UnKX19XCJcbiAgICA+PC9idXR0b24+XG4gIDwvZGl2PlxuPC9uZy1jb250YWluZXI+XG4iXX0=

package/esm2020/table/biit-paginator/biit-paginator.component.mjs CHANGED Viewed

@@ -165,7 +165,7 @@ BiitPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             useExisting: forwardRef(() => BiitPaginatorComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "pageSelector", first: true, predicate: ["pageSelector"], descendants: true }, { propertyName: "selectorBtn", first: true, predicate: ["pageSizeBtn"], descendants: true }, { propertyName: "selectorList", first: true, predicate: ["pageSizeList"], descendants: true }, { propertyName: "pageInput", first: true, predicate: ["pageInput"], descendants: true }, { propertyName: "totalPagesLabel", first: true, predicate: ["totalPagesLabel"], descendants: true }], ngImport: i0, template: "<div style=\"display: flex; justify-content: space-between\" *transloco=\"let t\">\n  <!-- PAGE SELECTOR -->\n  <div #pageSelector class=\"page-selector\" id=\"page-selector\">\n    <button biit-icon id=\"arrow-first\"\n            icon='right_double_arrow'\n            class=\"horizontal-flip\"\n            (click)=\"paginator.currentPage = 1; onModelChange();\"\n            [disabled]=\"paginator?.currentPage <= 1\"\n            tooltip=\"{{t('table.first-page')}}\"\n    ></button>\n    <button biit-icon id=\"arrow-previous\"\n            icon='right_arrow'\n            class=\"compact horizontal-flip\"\n            (click)=\"paginator.currentPage = paginator.currentPage - 1; onModelChange();\"\n            [disabled]=\"paginator?.currentPage <= 1\"\n            tooltip=\"{{t('table.previous-page')}}\"\n    ></button>\n    <div class=\"page-display\" style=\"position: relative\">\n      <input #pageInput id=\"current-page\"\n             [ngModel]=\"paginator?.currentPage\"\n             type=\"number\"\n             [min]=\"1\"\n             [max]=\"totalPages\"\n             (keydown.enter)=\"setInputValue($event); onModelChange()\"\n             (focusout)=\"resetInputValue($event)\"\n             class=\"page-input\"/>\n      <a #totalPagesLabel class=\"total-pages\">/</a>\n      <div class=\"bottom-bar\"></div>\n    </div>\n    <button biit-icon id=\"arrow-next\"\n            icon='right_arrow'\n            class=\"compact\"\n            (click)=\"paginator.currentPage = paginator.currentPage + 1; onModelChange();\"\n            [disabled]=\"paginator?.currentPage >= totalPages\"\n            tooltip=\"{{t('table.next-page')}}\"\n    ></button>\n    <button biit-icon id=\"arrow-last\"\n            icon='right_double_arrow'\n            (click)=\"paginator.currentPage = totalPages; onModelChange();\"\n            [disabled]=\"paginator?.currentPage >= totalPages\"\n            tooltip=\"{{t('table.last-page')}}\"\n    ></button>\n  </div>\n\n  <!-- PAGE SIZE SELECTOR -->\n  <div class=\"page-size-selector\">\n    <a\n      [tooltip]=\"t('table.rows-per-page')\">{{ t('table.rows-per-page') }}</a>\n    <button #pageSizeBtn\n            (click)=\"!dropdownOpen ? openDropdown() : closeDropdown()\"\n            (keydown)=\"handleKeyboardEvents($event)\">\n      <a>{{ paginator?.pageSize }}</a>\n      <biit-icon class=\"icon\"\n                 [name]=\"'right_arrow'\"\n                 [pathStyle]=\"{fill: dropdownOpen ? '#F20D5E' : '#262626'}\"\n                 [class.rotate]=\"dropdownOpen\"\n      ></biit-icon>\n    </button>\n    <div class=\"dropdown\" [style.overflow]=\"dropdownOpen ? 'visible' : 'hidden'\">\n      <div #pageSizeList\n           class=\"list\"\n           [class.dropdown-open]=\"dropdownOpen\">\n        <button *ngFor=\"let pageSize of paginator?.pageSizeOptions; index as i\"\n                (click)=\"paginator.currentPage = 1; paginator.pageSize = pageSize; onModelChange()\"\n                (keydown)=\"handleKeyboardEvents($event)\"\n                [class.selected]=\"paginator.pageSize === pageSize\"\n                class=\"item\"\n                role=\"option\"\n                aria-selected=\"false\"\n                [id]=\"i\"\n                [tabindex]=\"!dropdownOpen? -1 : 0\"\n                [disabled]=\"!dropdownOpen\"\n        >\n          {{ pageSize }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".page-selector{--center-fix: 0px;display:flex;position:relative;left:var(--center-fix)}.page-selector button[biit-icon].horizontal-flip{rotate:-180deg}.page-selector button[biit-icon].compact ::ng-deep .icon-button-svg{width:.6rem}.page-selector .page-display{display:block;position:relative;font-size:1rem;color:#262626;font-weight:700}.page-selector .page-display input{border:none;box-sizing:border-box;padding-left:.7rem;padding-right:calc(50% + .35rem);height:2.1rem;min-width:4.1rem;font-size:1rem;color:#262626;font-weight:700;text-align:right}.page-selector .page-display input:focus,.page-selector .page-display input:active,.page-selector .page-display input:hover{outline:none;background:#D9D9D9}.page-selector .page-display input:disabled{pointer-events:none;color:#d9d9d9}.page-selector .page-display input::-webkit-outer-spin-button,.page-selector .page-display input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.page-selector .page-display input[type=number]{-moz-appearance:textfield}.page-selector .page-display .total-pages{position:absolute;left:calc(50% + .35rem);top:.95rem;transform:translateY(-50%);pointer-events:none}.page-selector .page-display .bottom-bar{position:absolute;bottom:0;width:100%;height:.2rem;background:#262626}.page-size-selector{display:flex;align-items:center;color:#262626}.page-size-selector button{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit;display:flex;align-items:center;justify-content:flex-end;width:3rem;height:2.1rem;cursor:pointer}.page-size-selector button:hover,.page-size-selector button:focus,.page-size-selector button:focus-visible{background:#D9D9D9}.page-size-selector .wh-100{display:inline-flex;width:.3rem;height:.3rem;padding:.2rem;transition:transform .5s ease;transform:rotate(90deg)}.page-size-selector .wh-100.rotate{transform:rotate(-90deg)}.page-size-selector .dropdown{position:relative;right:3rem;top:1.05rem;z-index:1}.page-size-selector .dropdown .list{width:3rem;background:white;position:absolute;display:flex;flex-direction:column;cursor:pointer;transform-origin:top;opacity:0;pointer-events:none;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease}.page-size-selector .dropdown .list.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.page-size-selector .dropdown .list .item{width:100%;height:1.4rem;display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;border-left:.2rem solid black;border-right:.2rem solid black;padding-right:.5rem}.page-size-selector .dropdown .list .item:first-child{border-top:.2rem solid black}.page-size-selector .dropdown .list .item:last-child{border-bottom:.2rem solid black}.page-size-selector .dropdown .list .item.selected{background:#D9D9D9}.page-size-selector .dropdown .list .item:hover,.page-size-selector .dropdown .list .item:focus,.page-size-selector .dropdown .list .item:focus-visible{border-left:none;border-right:none;background:#EDEDED;padding-right:.7rem}.onwards{--origin: 1rem}.downwards{--origin: -1rem}@media screen and (max-width: 600px){.page-size-selector{display:none!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "component", type: i4.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }, { kind: "directive", type: i5.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i6.BiitTooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "ignorePadding"] }] });
+    ], viewQueries: [{ propertyName: "pageSelector", first: true, predicate: ["pageSelector"], descendants: true }, { propertyName: "selectorBtn", first: true, predicate: ["pageSizeBtn"], descendants: true }, { propertyName: "selectorList", first: true, predicate: ["pageSizeList"], descendants: true }, { propertyName: "pageInput", first: true, predicate: ["pageInput"], descendants: true }, { propertyName: "totalPagesLabel", first: true, predicate: ["totalPagesLabel"], descendants: true }], ngImport: i0, template: "<div style=\"display: flex; justify-content: space-between\" *transloco=\"let t\">\n  <!-- PAGE SELECTOR -->\n  <div #pageSelector class=\"page-selector\" id=\"page-selector\">\n    <button biit-icon id=\"arrow-first\"\n            icon='right_double_arrow'\n            class=\"horizontal-flip\"\n            (click)=\"paginator.currentPage = 1; onModelChange();\"\n            [disabled]=\"paginator?.currentPage <= 1\"\n            tooltip=\"{{t('table.first-page')}}\"\n    ></button>\n    <button biit-icon id=\"arrow-previous\"\n            icon='right_arrow'\n            class=\"compact horizontal-flip\"\n            (click)=\"paginator.currentPage = paginator.currentPage - 1; onModelChange();\"\n            [disabled]=\"paginator?.currentPage <= 1\"\n            tooltip=\"{{t('table.previous-page')}}\"\n    ></button>\n    <div class=\"page-display\" style=\"position: relative\">\n      <input #pageInput id=\"current-page\"\n             [ngModel]=\"paginator?.currentPage\"\n             type=\"number\"\n             [min]=\"1\"\n             [max]=\"totalPages\"\n             (keydown.enter)=\"setInputValue($event); onModelChange()\"\n             (focusout)=\"resetInputValue($event)\"\n             class=\"page-input\"/>\n      <a #totalPagesLabel class=\"total-pages\">/</a>\n      <div class=\"bottom-bar\"></div>\n    </div>\n    <button biit-icon id=\"arrow-next\"\n            icon='right_arrow'\n            class=\"compact\"\n            (click)=\"paginator.currentPage = paginator.currentPage + 1; onModelChange();\"\n            [disabled]=\"paginator?.currentPage >= totalPages\"\n            tooltip=\"{{t('table.next-page')}}\"\n    ></button>\n    <button biit-icon id=\"arrow-last\"\n            icon='right_double_arrow'\n            (click)=\"paginator.currentPage = totalPages; onModelChange();\"\n            [disabled]=\"paginator?.currentPage >= totalPages\"\n            tooltip=\"{{t('table.last-page')}}\"\n    ></button>\n  </div>\n\n  <!-- PAGE SIZE SELECTOR -->\n  <div class=\"page-size-selector\">\n    <a\n      [tooltip]=\"t('table.rows-per-page')\">{{ t('table.rows-per-page') }}</a>\n    <button #pageSizeBtn\n            (click)=\"!dropdownOpen ? openDropdown() : closeDropdown()\"\n            (keydown)=\"handleKeyboardEvents($event)\">\n      <a>{{ paginator?.pageSize }}</a>\n      <biit-icon class=\"icon\"\n                 [name]=\"'right_arrow'\"\n                 [pathStyle]=\"{fill: dropdownOpen ? '#F20D5E' : '#262626'}\"\n                 [class.rotate]=\"dropdownOpen\"\n      ></biit-icon>\n    </button>\n    <div class=\"dropdown\" [style.overflow]=\"dropdownOpen ? 'visible' : 'hidden'\">\n      <div #pageSizeList\n           class=\"list\"\n           [class.dropdown-open]=\"dropdownOpen\">\n        <button *ngFor=\"let pageSize of paginator?.pageSizeOptions; index as i\"\n                (click)=\"paginator.currentPage = 1; paginator.pageSize = pageSize; onModelChange()\"\n                (keydown)=\"handleKeyboardEvents($event)\"\n                [class.selected]=\"paginator.pageSize === pageSize\"\n                class=\"item\"\n                role=\"option\"\n                aria-selected=\"false\"\n                [id]=\"i\"\n                [tabindex]=\"!dropdownOpen? -1 : 0\"\n                [disabled]=\"!dropdownOpen\"\n        >\n          {{ pageSize }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".page-selector{--center-fix: 0px;display:flex;position:relative;left:var(--center-fix)}.page-selector button[biit-icon].horizontal-flip{rotate:-180deg}.page-selector button[biit-icon].compact ::ng-deep .icon-button-svg{width:.6rem}.page-selector .page-display{display:block;position:relative;font-size:1rem;color:var(--component-color);font-weight:700}.page-selector .page-display input{border:none;box-sizing:border-box;padding-left:.7rem;padding-right:calc(50% + .35rem);height:2.1rem;min-width:4.1rem;font-size:1rem;color:var(--component-color);font-weight:700;text-align:right}.page-selector .page-display input:focus,.page-selector .page-display input:active,.page-selector .page-display input:hover{outline:none;background:var(--main-background)}.page-selector .page-display input:disabled{pointer-events:none;color:var(--main-background)}.page-selector .page-display input::-webkit-outer-spin-button,.page-selector .page-display input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.page-selector .page-display input[type=number]{-moz-appearance:textfield}.page-selector .page-display .total-pages{position:absolute;left:calc(50% + .35rem);top:.95rem;transform:translateY(-50%);pointer-events:none}.page-selector .page-display .bottom-bar{position:absolute;bottom:0;width:100%;height:.2rem;background:var(--component-color)}.page-size-selector{display:flex;align-items:center;color:var(--component-color)}.page-size-selector button{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit;display:flex;align-items:center;justify-content:flex-end;width:3rem;height:2.1rem;cursor:pointer}.page-size-selector button:hover,.page-size-selector button:focus,.page-size-selector button:focus-visible{background:var(--main-background)}.page-size-selector .wh-100{display:inline-flex;width:.3rem;height:.3rem;padding:.2rem;transition:transform .5s ease;transform:rotate(90deg)}.page-size-selector .wh-100.rotate{transform:rotate(-90deg)}.page-size-selector .dropdown{position:relative;right:3rem;top:1.05rem;z-index:1}.page-size-selector .dropdown .list{width:3rem;background:var(--popup-background);position:absolute;display:flex;flex-direction:column;cursor:pointer;transform-origin:top;opacity:0;pointer-events:none;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease}.page-size-selector .dropdown .list.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.page-size-selector .dropdown .list .item{width:100%;height:1.4rem;display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;border-left:.2rem solid var(--component-color);border-right:.2rem solid var(--component-color);padding-right:.5rem}.page-size-selector .dropdown .list .item:first-child{border-top:.2rem solid var(--component-color)}.page-size-selector .dropdown .list .item:last-child{border-bottom:.2rem solid var(--component-color)}.page-size-selector .dropdown .list .item.selected{background:var(--main-background)}.page-size-selector .dropdown .list .item:hover,.page-size-selector .dropdown .list .item:focus,.page-size-selector .dropdown .list .item:focus-visible{border-left:none;border-right:none;background:var(--hover-color);padding-right:.7rem}.onwards{--origin: 1rem}.downwards{--origin: -1rem}@media screen and (max-width: 600px){.page-size-selector{display:none!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "component", type: i4.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }, { kind: "directive", type: i5.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i6.BiitTooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "ignorePadding"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitPaginatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'biit-paginator', providers: [
@@ -176,7 +176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         }
                     ], host: {
                         '(document:pointerdown)': 'handleMouseEvents($event)'
-                    }, template: "<div style=\"display: flex; justify-content: space-between\" *transloco=\"let t\">\n  <!-- PAGE SELECTOR -->\n  <div #pageSelector class=\"page-selector\" id=\"page-selector\">\n    <button biit-icon id=\"arrow-first\"\n            icon='right_double_arrow'\n            class=\"horizontal-flip\"\n            (click)=\"paginator.currentPage = 1; onModelChange();\"\n            [disabled]=\"paginator?.currentPage <= 1\"\n            tooltip=\"{{t('table.first-page')}}\"\n    ></button>\n    <button biit-icon id=\"arrow-previous\"\n            icon='right_arrow'\n            class=\"compact horizontal-flip\"\n            (click)=\"paginator.currentPage = paginator.currentPage - 1; onModelChange();\"\n            [disabled]=\"paginator?.currentPage <= 1\"\n            tooltip=\"{{t('table.previous-page')}}\"\n    ></button>\n    <div class=\"page-display\" style=\"position: relative\">\n      <input #pageInput id=\"current-page\"\n             [ngModel]=\"paginator?.currentPage\"\n             type=\"number\"\n             [min]=\"1\"\n             [max]=\"totalPages\"\n             (keydown.enter)=\"setInputValue($event); onModelChange()\"\n             (focusout)=\"resetInputValue($event)\"\n             class=\"page-input\"/>\n      <a #totalPagesLabel class=\"total-pages\">/</a>\n      <div class=\"bottom-bar\"></div>\n    </div>\n    <button biit-icon id=\"arrow-next\"\n            icon='right_arrow'\n            class=\"compact\"\n            (click)=\"paginator.currentPage = paginator.currentPage + 1; onModelChange();\"\n            [disabled]=\"paginator?.currentPage >= totalPages\"\n            tooltip=\"{{t('table.next-page')}}\"\n    ></button>\n    <button biit-icon id=\"arrow-last\"\n            icon='right_double_arrow'\n            (click)=\"paginator.currentPage = totalPages; onModelChange();\"\n            [disabled]=\"paginator?.currentPage >= totalPages\"\n            tooltip=\"{{t('table.last-page')}}\"\n    ></button>\n  </div>\n\n  <!-- PAGE SIZE SELECTOR -->\n  <div class=\"page-size-selector\">\n    <a\n      [tooltip]=\"t('table.rows-per-page')\">{{ t('table.rows-per-page') }}</a>\n    <button #pageSizeBtn\n            (click)=\"!dropdownOpen ? openDropdown() : closeDropdown()\"\n            (keydown)=\"handleKeyboardEvents($event)\">\n      <a>{{ paginator?.pageSize }}</a>\n      <biit-icon class=\"icon\"\n                 [name]=\"'right_arrow'\"\n                 [pathStyle]=\"{fill: dropdownOpen ? '#F20D5E' : '#262626'}\"\n                 [class.rotate]=\"dropdownOpen\"\n      ></biit-icon>\n    </button>\n    <div class=\"dropdown\" [style.overflow]=\"dropdownOpen ? 'visible' : 'hidden'\">\n      <div #pageSizeList\n           class=\"list\"\n           [class.dropdown-open]=\"dropdownOpen\">\n        <button *ngFor=\"let pageSize of paginator?.pageSizeOptions; index as i\"\n                (click)=\"paginator.currentPage = 1; paginator.pageSize = pageSize; onModelChange()\"\n                (keydown)=\"handleKeyboardEvents($event)\"\n                [class.selected]=\"paginator.pageSize === pageSize\"\n                class=\"item\"\n                role=\"option\"\n                aria-selected=\"false\"\n                [id]=\"i\"\n                [tabindex]=\"!dropdownOpen? -1 : 0\"\n                [disabled]=\"!dropdownOpen\"\n        >\n          {{ pageSize }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".page-selector{--center-fix: 0px;display:flex;position:relative;left:var(--center-fix)}.page-selector button[biit-icon].horizontal-flip{rotate:-180deg}.page-selector button[biit-icon].compact ::ng-deep .icon-button-svg{width:.6rem}.page-selector .page-display{display:block;position:relative;font-size:1rem;color:#262626;font-weight:700}.page-selector .page-display input{border:none;box-sizing:border-box;padding-left:.7rem;padding-right:calc(50% + .35rem);height:2.1rem;min-width:4.1rem;font-size:1rem;color:#262626;font-weight:700;text-align:right}.page-selector .page-display input:focus,.page-selector .page-display input:active,.page-selector .page-display input:hover{outline:none;background:#D9D9D9}.page-selector .page-display input:disabled{pointer-events:none;color:#d9d9d9}.page-selector .page-display input::-webkit-outer-spin-button,.page-selector .page-display input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.page-selector .page-display input[type=number]{-moz-appearance:textfield}.page-selector .page-display .total-pages{position:absolute;left:calc(50% + .35rem);top:.95rem;transform:translateY(-50%);pointer-events:none}.page-selector .page-display .bottom-bar{position:absolute;bottom:0;width:100%;height:.2rem;background:#262626}.page-size-selector{display:flex;align-items:center;color:#262626}.page-size-selector button{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit;display:flex;align-items:center;justify-content:flex-end;width:3rem;height:2.1rem;cursor:pointer}.page-size-selector button:hover,.page-size-selector button:focus,.page-size-selector button:focus-visible{background:#D9D9D9}.page-size-selector .wh-100{display:inline-flex;width:.3rem;height:.3rem;padding:.2rem;transition:transform .5s ease;transform:rotate(90deg)}.page-size-selector .wh-100.rotate{transform:rotate(-90deg)}.page-size-selector .dropdown{position:relative;right:3rem;top:1.05rem;z-index:1}.page-size-selector .dropdown .list{width:3rem;background:white;position:absolute;display:flex;flex-direction:column;cursor:pointer;transform-origin:top;opacity:0;pointer-events:none;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease}.page-size-selector .dropdown .list.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.page-size-selector .dropdown .list .item{width:100%;height:1.4rem;display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;border-left:.2rem solid black;border-right:.2rem solid black;padding-right:.5rem}.page-size-selector .dropdown .list .item:first-child{border-top:.2rem solid black}.page-size-selector .dropdown .list .item:last-child{border-bottom:.2rem solid black}.page-size-selector .dropdown .list .item.selected{background:#D9D9D9}.page-size-selector .dropdown .list .item:hover,.page-size-selector .dropdown .list .item:focus,.page-size-selector .dropdown .list .item:focus-visible{border-left:none;border-right:none;background:#EDEDED;padding-right:.7rem}.onwards{--origin: 1rem}.downwards{--origin: -1rem}@media screen and (max-width: 600px){.page-size-selector{display:none!important}}\n"] }]
+                    }, template: "<div style=\"display: flex; justify-content: space-between\" *transloco=\"let t\">\n  <!-- PAGE SELECTOR -->\n  <div #pageSelector class=\"page-selector\" id=\"page-selector\">\n    <button biit-icon id=\"arrow-first\"\n            icon='right_double_arrow'\n            class=\"horizontal-flip\"\n            (click)=\"paginator.currentPage = 1; onModelChange();\"\n            [disabled]=\"paginator?.currentPage <= 1\"\n            tooltip=\"{{t('table.first-page')}}\"\n    ></button>\n    <button biit-icon id=\"arrow-previous\"\n            icon='right_arrow'\n            class=\"compact horizontal-flip\"\n            (click)=\"paginator.currentPage = paginator.currentPage - 1; onModelChange();\"\n            [disabled]=\"paginator?.currentPage <= 1\"\n            tooltip=\"{{t('table.previous-page')}}\"\n    ></button>\n    <div class=\"page-display\" style=\"position: relative\">\n      <input #pageInput id=\"current-page\"\n             [ngModel]=\"paginator?.currentPage\"\n             type=\"number\"\n             [min]=\"1\"\n             [max]=\"totalPages\"\n             (keydown.enter)=\"setInputValue($event); onModelChange()\"\n             (focusout)=\"resetInputValue($event)\"\n             class=\"page-input\"/>\n      <a #totalPagesLabel class=\"total-pages\">/</a>\n      <div class=\"bottom-bar\"></div>\n    </div>\n    <button biit-icon id=\"arrow-next\"\n            icon='right_arrow'\n            class=\"compact\"\n            (click)=\"paginator.currentPage = paginator.currentPage + 1; onModelChange();\"\n            [disabled]=\"paginator?.currentPage >= totalPages\"\n            tooltip=\"{{t('table.next-page')}}\"\n    ></button>\n    <button biit-icon id=\"arrow-last\"\n            icon='right_double_arrow'\n            (click)=\"paginator.currentPage = totalPages; onModelChange();\"\n            [disabled]=\"paginator?.currentPage >= totalPages\"\n            tooltip=\"{{t('table.last-page')}}\"\n    ></button>\n  </div>\n\n  <!-- PAGE SIZE SELECTOR -->\n  <div class=\"page-size-selector\">\n    <a\n      [tooltip]=\"t('table.rows-per-page')\">{{ t('table.rows-per-page') }}</a>\n    <button #pageSizeBtn\n            (click)=\"!dropdownOpen ? openDropdown() : closeDropdown()\"\n            (keydown)=\"handleKeyboardEvents($event)\">\n      <a>{{ paginator?.pageSize }}</a>\n      <biit-icon class=\"icon\"\n                 [name]=\"'right_arrow'\"\n                 [pathStyle]=\"{fill: dropdownOpen ? '#F20D5E' : '#262626'}\"\n                 [class.rotate]=\"dropdownOpen\"\n      ></biit-icon>\n    </button>\n    <div class=\"dropdown\" [style.overflow]=\"dropdownOpen ? 'visible' : 'hidden'\">\n      <div #pageSizeList\n           class=\"list\"\n           [class.dropdown-open]=\"dropdownOpen\">\n        <button *ngFor=\"let pageSize of paginator?.pageSizeOptions; index as i\"\n                (click)=\"paginator.currentPage = 1; paginator.pageSize = pageSize; onModelChange()\"\n                (keydown)=\"handleKeyboardEvents($event)\"\n                [class.selected]=\"paginator.pageSize === pageSize\"\n                class=\"item\"\n                role=\"option\"\n                aria-selected=\"false\"\n                [id]=\"i\"\n                [tabindex]=\"!dropdownOpen? -1 : 0\"\n                [disabled]=\"!dropdownOpen\"\n        >\n          {{ pageSize }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".page-selector{--center-fix: 0px;display:flex;position:relative;left:var(--center-fix)}.page-selector button[biit-icon].horizontal-flip{rotate:-180deg}.page-selector button[biit-icon].compact ::ng-deep .icon-button-svg{width:.6rem}.page-selector .page-display{display:block;position:relative;font-size:1rem;color:var(--component-color);font-weight:700}.page-selector .page-display input{border:none;box-sizing:border-box;padding-left:.7rem;padding-right:calc(50% + .35rem);height:2.1rem;min-width:4.1rem;font-size:1rem;color:var(--component-color);font-weight:700;text-align:right}.page-selector .page-display input:focus,.page-selector .page-display input:active,.page-selector .page-display input:hover{outline:none;background:var(--main-background)}.page-selector .page-display input:disabled{pointer-events:none;color:var(--main-background)}.page-selector .page-display input::-webkit-outer-spin-button,.page-selector .page-display input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.page-selector .page-display input[type=number]{-moz-appearance:textfield}.page-selector .page-display .total-pages{position:absolute;left:calc(50% + .35rem);top:.95rem;transform:translateY(-50%);pointer-events:none}.page-selector .page-display .bottom-bar{position:absolute;bottom:0;width:100%;height:.2rem;background:var(--component-color)}.page-size-selector{display:flex;align-items:center;color:var(--component-color)}.page-size-selector button{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit;display:flex;align-items:center;justify-content:flex-end;width:3rem;height:2.1rem;cursor:pointer}.page-size-selector button:hover,.page-size-selector button:focus,.page-size-selector button:focus-visible{background:var(--main-background)}.page-size-selector .wh-100{display:inline-flex;width:.3rem;height:.3rem;padding:.2rem;transition:transform .5s ease;transform:rotate(90deg)}.page-size-selector .wh-100.rotate{transform:rotate(-90deg)}.page-size-selector .dropdown{position:relative;right:3rem;top:1.05rem;z-index:1}.page-size-selector .dropdown .list{width:3rem;background:var(--popup-background);position:absolute;display:flex;flex-direction:column;cursor:pointer;transform-origin:top;opacity:0;pointer-events:none;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease}.page-size-selector .dropdown .list.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.page-size-selector .dropdown .list .item{width:100%;height:1.4rem;display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;border-left:.2rem solid var(--component-color);border-right:.2rem solid var(--component-color);padding-right:.5rem}.page-size-selector .dropdown .list .item:first-child{border-top:.2rem solid var(--component-color)}.page-size-selector .dropdown .list .item:last-child{border-bottom:.2rem solid var(--component-color)}.page-size-selector .dropdown .list .item.selected{background:var(--main-background)}.page-size-selector .dropdown .list .item:hover,.page-size-selector .dropdown .list .item:focus,.page-size-selector .dropdown .list .item:focus-visible{border-left:none;border-right:none;background:var(--hover-color);padding-right:.7rem}.onwards{--origin: 1rem}.downwards{--origin: -1rem}@media screen and (max-width: 600px){.page-size-selector{display:none!important}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { pageSelector: [{
                 type: ViewChild,
                 args: ['pageSelector']