@biit-solutions/wizardry-theme 1.21.34

package/fesm2015/biit-solutions-wizardry-theme-table.mjs

@@ -0,0 +1,1067 @@
+import * as i0 from '@angular/core';
+import { forwardRef, Component, ViewChild, Pipe, Directive, EventEmitter, Input, ContentChild, Output, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import * as i4 from '@biit-solutions/wizardry-theme/inputs';
+import { BiitMultiselectType, BiitMultiselectModule, BiitInputTextModule, BiitCheckboxModule } from '@biit-solutions/wizardry-theme/inputs';
+import * as i5 from '@ngneat/transloco';
+import { TRANSLOCO_SCOPE, provideTranslocoScope, TranslocoModule } from '@ngneat/transloco';
+import * as i1 from '@angular/common';
+import { CommonModule, NgTemplateOutlet, NgForOf, NgIf } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import * as i1$1 from '@biit-solutions/wizardry-theme/icon';
+import { BiitIconModule } from '@biit-solutions/wizardry-theme/icon';
+import * as i8 from '@biit-solutions/wizardry-theme/button';
+import { BiitIconButtonModule, BiitButtonModule } from '@biit-solutions/wizardry-theme/button';
+import * as i5$1 from '@biit-solutions/wizardry-theme/info';
+import { BiitTooltipModule, BiitProgressBarModule } from '@biit-solutions/wizardry-theme/info';
+import * as i9 from '@biit-solutions/wizardry-theme/navigation';
+import { BiitVerticalMenuModule } from '@biit-solutions/wizardry-theme/navigation';
+import * as i10 from '@biit-solutions/wizardry-theme/utils';
+import { LocalizedDatePipeModule } from '@biit-solutions/wizardry-theme/utils';
+import { TranslocoRootModule } from '@biit-solutions/wizardry-theme/i18n';
+import * as i6 from '@siemens/ngx-datatable';
+import { DataTablePagerComponent, ColumnMode, SelectionType, NgxDatatableModule } from '@siemens/ngx-datatable';
+import { completeIconSet } from '@biit-solutions/biit-icons-collection';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+
+class BiitPaginatorOptions {
+    constructor(currentPage, pageSize, pageSizeOptions, totalItems, hidePageSize, hideFirstLastButtons) {
+        this.currentPage = currentPage;
+        this.pageSize = pageSize;
+        this.pageSizeOptions = pageSizeOptions;
+        this.totalItems = totalItems;
+        this.hidePageSize = hidePageSize || totalItems == undefined;
+        this.hideFirstLastButtons = hideFirstLastButtons;
+    }
+}
+
+class BiitTableColumn {
+    constructor(name, label, width, format, visible) {
+        this.name = name;
+        this.label = label;
+        this.width = width ? width : 0;
+        this.format = format ? format : BiitTableColumnFormat.DEFAULT;
+        this.visible = visible == undefined ? true : visible;
+    }
+}
+var BiitTableColumnFormat;
+(function (BiitTableColumnFormat) {
+    BiitTableColumnFormat["DEFAULT"] = "default";
+    BiitTableColumnFormat["BOOLEAN"] = "boolean";
+    BiitTableColumnFormat["DATE"] = "date";
+    BiitTableColumnFormat["DATETIME"] = "datetime";
+    BiitTableColumnFormat["BUTTON"] = "button";
+    BiitTableColumnFormat["ICON_BUTTON"] = "icon_button";
+    BiitTableColumnFormat["ICON"] = "icon";
+    BiitTableColumnFormat["CUSTOM_HTML"] = "custom_html";
+})(BiitTableColumnFormat || (BiitTableColumnFormat = {}));
+
+class ColumnResizeHandler {
+}
+
+class BiitTableResponse {
+    constructor(currentPage, pageSize, search, sorting) {
+        this.currentPage = currentPage;
+        this.pageSize = pageSize;
+        this.search = search;
+        this.sorting = sorting;
+    }
+}
+
+class BiitTableSorting {
+    constructor(name, order) {
+        this.name = name;
+        this.order = order;
+    }
+}
+var BiitTableSortingOrder;
+(function (BiitTableSortingOrder) {
+    BiitTableSortingOrder["ASC"] = "asc";
+    BiitTableSortingOrder["DESC"] = "desc";
+})(BiitTableSortingOrder || (BiitTableSortingOrder = {}));
+
+class BiitTableActionResponse {
+    constructor(item, column) {
+        this.item = item;
+        this.column = column;
+    }
+}
+
+class BiitPaginatorComponent {
+    constructor() {
+        this.dropdownOpen = false;
+        this.onChange = (value) => { };
+        this.onTouched = () => { };
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(value) {
+        if (value) {
+            this.paginator = value;
+            this.calculateTotalPages();
+        }
+    }
+    onModelChange() {
+        this.closeDropdown();
+        this.onChange(this.paginator);
+    }
+    handleMouseEvents($event) {
+        var _a, _b;
+        if (!((_a = this.selectorList.nativeElement) === null || _a === void 0 ? void 0 : _a.contains($event.target)) &&
+            !((_b = this.selectorBtn.nativeElement) === null || _b === void 0 ? void 0 : _b.contains($event.target)) &&
+            this.dropdownOpen) {
+            this.closeDropdown();
+        }
+    }
+    handleKeyboardEvents($event) {
+        var _a, _b;
+        switch ($event.key) {
+            case 'ArrowUp':
+                if (document.activeElement === this.selectorBtn.nativeElement) {
+                    if (this.paginator.pageSizeOptions.findIndex(i => i == this.paginator.pageSize) > 0) {
+                        this.paginator.pageSize = this.paginator.pageSizeOptions[this.paginator.pageSizeOptions.findIndex(i => i == this.paginator.pageSize) - 1];
+                        this.paginator.currentPage = 1;
+                        this.onChange(this.paginator);
+                    }
+                }
+                else {
+                    (_a = document.activeElement.previousElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+                $event.preventDefault();
+                break;
+            case 'ArrowDown':
+                if (document.activeElement === this.selectorBtn.nativeElement) {
+                    if (this.paginator.pageSizeOptions.findIndex(i => i == this.paginator.pageSize) < this.paginator.pageSizeOptions.length - 1) {
+                        this.paginator.pageSize = this.paginator.pageSizeOptions[this.paginator.pageSizeOptions.findIndex(i => i == this.paginator.pageSize) + 1];
+                        this.paginator.currentPage = 1;
+                        this.onChange(this.paginator);
+                    }
+                }
+                else {
+                    (_b = document.activeElement.nextElementSibling) === null || _b === void 0 ? void 0 : _b.focus();
+                }
+                $event.preventDefault();
+                break;
+            case 'Escape':
+                this.closeDropdown();
+                break;
+            default:
+                break;
+        }
+        $event.stopPropagation();
+    }
+    setTooltipComponentProperties() {
+        let dropdown = this.selectorList.nativeElement;
+        let button = this.selectorBtn.nativeElement;
+        dropdown.style.display = 'block';
+        // Checking available screen space
+        const fitsBottom = bottomCheck();
+        const fitsRight = rightCheck();
+        const fitsLeft = leftCheck();
+        if (!fitsRight && fitsLeft) {
+            dropdown.style.marginLeft = button.offsetWidth - dropdown.offsetWidth + 'px';
+        }
+        else {
+            dropdown.style.marginLeft = null;
+        }
+        dropdown.classList.remove('onwards');
+        dropdown.classList.remove('downwards');
+        if (!fitsBottom) {
+            dropdown.classList.add('onwards');
+            dropdown.style.marginTop = -(dropdown.offsetHeight + button.offsetHeight) + 'px';
+        }
+        else {
+            dropdown.classList.add('downwards');
+            dropdown.style.marginTop = null;
+        }
+        // Support inner functions
+        function bottomCheck() {
+            return button.getBoundingClientRect().bottom + dropdown.offsetHeight <= window.innerHeight ||
+                button.getBoundingClientRect().top - dropdown.offsetHeight <= 0;
+        }
+        function rightCheck() {
+            return button.getBoundingClientRect().right + dropdown.offsetWidth <= window.innerWidth;
+        }
+        function leftCheck() {
+            return button.getBoundingClientRect().right - dropdown.offsetWidth >= 0;
+        }
+    }
+    openDropdown() {
+        this.setTooltipComponentProperties();
+        // Setting a timeout because it doesn't load upwards/downwards css classes on execution time
+        setTimeout(() => {
+            this.dropdownOpen = true;
+            this.selectorList.nativeElement.setAttribute('aria-expanded', "true");
+        }, 100);
+    }
+    closeDropdown() {
+        this.dropdownOpen = false;
+        this.selectorList.nativeElement.setAttribute('aria-expanded', "false");
+    }
+    calculateTotalPages() {
+        var _a, _b, _c, _d;
+        if (!((_a = this.paginator) === null || _a === void 0 ? void 0 : _a.hidePageSize) && !isNaN((_b = this.paginator) === null || _b === void 0 ? void 0 : _b.totalItems)) {
+            const tempTotalPages = this.paginator.totalItems ?
+                this.paginator.totalItems / this.paginator.pageSize : 0;
+            if (Number.isInteger(tempTotalPages) && tempTotalPages > 0) {
+                this.totalPages = tempTotalPages;
+            }
+            else {
+                this.totalPages = Math.trunc(tempTotalPages) + 1;
+            }
+            if ((_c = this.totalPagesLabel) === null || _c === void 0 ? void 0 : _c.nativeElement) {
+                this.totalPagesLabel.nativeElement.innerText = '/' + this.totalPages;
+            }
+            if ((_d = this.pageInput) === null || _d === void 0 ? void 0 : _d.nativeElement) {
+                this.pageInput.nativeElement.style.width =
+                    this.totalPagesLabel.nativeElement.offsetWidth * 2
+                        + 2.1 * parseFloat(getComputedStyle(document.documentElement).fontSize)
+                        + 'px';
+            }
+        }
+        this.refreshCenterStyle();
+    }
+    setInputValue(event) {
+        let selectedPage = parseFloat(event.target.value);
+        if (selectedPage > this.totalPages) {
+            event.target.value = this.totalPages.toString();
+            selectedPage = this.totalPages;
+        }
+        this.paginator.currentPage = selectedPage;
+    }
+    resetInputValue(event) {
+        event.target.value = this.paginator.currentPage.toString();
+    }
+    refreshCenterStyle() {
+        const width = this.pageSelector.nativeElement.offsetWidth;
+        this.pageSelector.nativeElement.style.setProperty("--center-fix", -(width / 2) + 'px');
+    }
+}
+BiitPaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BiitPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitPaginatorComponent, selector: "biit-paginator", host: { listeners: { "document:pointerdown": "handleMouseEvents($event)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            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: i1$1.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "component", type: i8.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: i5$1.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: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BiitPaginatorComponent),
+                            multi: true
+                        }
+                    ], 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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { pageSelector: [{
+                type: ViewChild,
+                args: ['pageSelector']
+            }], selectorBtn: [{
+                type: ViewChild,
+                args: ['pageSizeBtn']
+            }], selectorList: [{
+                type: ViewChild,
+                args: ['pageSizeList']
+            }], pageInput: [{
+                type: ViewChild,
+                args: ['pageInput']
+            }], totalPagesLabel: [{
+                type: ViewChild,
+                args: ['totalPagesLabel']
+            }] } });
+
+class VisibleColumnsPipe {
+    transform(value) {
+        return value.filter(column => column.visible);
+    }
+}
+VisibleColumnsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VisibleColumnsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+VisibleColumnsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: VisibleColumnsPipe, name: "visibleColumns" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VisibleColumnsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'visibleColumns'
+                }]
+        }] });
+
+class ColumnDataPipe {
+    transform(value, columnName) {
+        const dataTree = columnName.split('.');
+        let data = value;
+        dataTree.forEach(variable => {
+            data = data[variable];
+        });
+        return data;
+    }
+}
+ColumnDataPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnDataPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ColumnDataPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ColumnDataPipe, name: "columnData" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnDataPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'columnData'
+                }]
+        }] });
+
+class BiitTableSelectableDirective {
+    constructor(parent) {
+        this.parent = parent;
+        parent.isSelectable = true;
+    }
+}
+BiitTableSelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTableSelectableDirective, deps: [{ token: BiitTableComponent }], target: i0.ɵɵFactoryTarget.Directive });
+BiitTableSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BiitTableSelectableDirective, selector: "[selectable]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTableSelectableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[selectable]'
+                }]
+        }], ctorParameters: function () { return [{ type: BiitTableComponent }]; } });
+class BiitTableSelectableSingleDirective {
+    constructor(parent) {
+        this.parent = parent;
+        parent.isSelectableSingle = true;
+    }
+}
+BiitTableSelectableSingleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTableSelectableSingleDirective, deps: [{ token: BiitTableComponent }], target: i0.ɵɵFactoryTarget.Directive });
+BiitTableSelectableSingleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BiitTableSelectableSingleDirective, selector: "[selectableSingle]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTableSelectableSingleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[selectableSingle]'
+                }]
+        }], ctorParameters: function () { return [{ type: BiitTableComponent }]; } });
+class BiitTableSortableDirective {
+    constructor(parent) {
+        this.parent = parent;
+        parent.isSortable = true;
+    }
+}
+BiitTableSortableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTableSortableDirective, deps: [{ token: BiitTableComponent }], target: i0.ɵɵFactoryTarget.Directive });
+BiitTableSortableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BiitTableSortableDirective, selector: "[sortable]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTableSortableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sortable]'
+                }]
+        }], ctorParameters: function () { return [{ type: BiitTableComponent }]; } });
+class BiitTableHeaderlessDirective {
+    constructor(parent) {
+        this.parent = parent;
+        parent.hideHeader = true;
+    }
+}
+BiitTableHeaderlessDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTableHeaderlessDirective, deps: [{ token: BiitTableComponent }], target: i0.ɵɵFactoryTarget.Directive });
+BiitTableHeaderlessDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BiitTableHeaderlessDirective, selector: "[hideHeader]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTableHeaderlessDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hideHeader]'
+                }]
+        }], ctorParameters: function () { return [{ type: BiitTableComponent }]; } });
+class BiitTableFooterlessDirective {
+    constructor(parent) {
+        this.parent = parent;
+        parent.hideFooter = true;
+    }
+}
+BiitTableFooterlessDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTableFooterlessDirective, deps: [{ token: BiitTableComponent }], target: i0.ɵɵFactoryTarget.Directive });
+BiitTableFooterlessDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BiitTableFooterlessDirective, selector: "[hideFooter]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTableFooterlessDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hideFooter]'
+                }]
+        }], ctorParameters: function () { return [{ type: BiitTableComponent }]; } });
+class BiitTableComponent {
+    set _data(data) {
+        if (data) {
+            this.data = data;
+            this.selectedRows.clear();
+            if (this.paginator) {
+                this.paginator = new BiitPaginatorOptions(this.paginator.currentPage, this.paginator.pageSize, this.pageSizes, data.totalItems);
+            }
+        }
+    }
+    set _loading(loading) {
+        if (loading) {
+            this.loading = loading;
+            this.setLoadingBar();
+        }
+        else {
+            this.loading = false;
+        }
+    }
+    constructor(renderer, elem) {
+        this.renderer = renderer;
+        this.elem = elem;
+        this.columns = [];
+        this.pageSizes = [];
+        this.isSelectable = false;
+        this.isSelectableSingle = false;
+        this.isSortable = false;
+        this.hideHeader = false;
+        this.hideFooter = false;
+        this.onUpdate = new EventEmitter();
+        this.onCellAction = new EventEmitter();
+        this.onRowClick = new EventEmitter();
+        this.selectedRows = new Set();
+        this.columnResize = new ColumnResizeHandler();
+        this.loading = false;
+        this.search = '';
+        this.currentSearch = '';
+        this.BiitMultiselectType = BiitMultiselectType;
+        this.BiitTableColumnFormat = BiitTableColumnFormat;
+    }
+    ngOnInit() {
+        this.paginator = new BiitPaginatorOptions(1, this.defaultPageSize, this.pageSizes, this.data ? this.data.totalItems : 1);
+    }
+    ngAfterViewChecked() {
+        this.setColumnSize();
+    }
+    // Fix for resizable columns
+    setColumnSize() {
+        // Takes scrollbar padding in mind before hardcoding widths
+        this.elem.nativeElement.querySelector('.content').style.paddingRight = '0.7rem';
+        Array.from(this.elem.nativeElement.querySelector('thead').firstChild.children).forEach(ogColumn => {
+            const column = ogColumn;
+            if (column.classList.contains('select')) {
+                return;
+            }
+            if (column.style.width == '' && !column.classList.contains('select')) {
+                column.style.width = column.offsetWidth - 10 + 'px';
+            }
+            this.columnInnerWordFitCheck(column);
+        });
+        this.elem.nativeElement.querySelector('.content').style.paddingRight = null;
+        this.setLoadingBar();
+    }
+    columnInnerWordFitCheck(column) {
+        const minColumnSize = column.firstElementChild.offsetWidth
+            + 2.4 * parseFloat(getComputedStyle(document.documentElement).fontSize) * 2;
+        // If inner text width plus header paddings are less than the current header width (set by user column properties)
+        if (minColumnSize > column.offsetWidth) {
+            column.style.width = minColumnSize + 'px';
+        }
+    }
+    setLoadingBar() {
+        const progressBar = this.elem.nativeElement.querySelector('biit-progress-bar');
+        if (progressBar) {
+            progressBar.style.top =
+                this.elem.nativeElement.querySelector('thead').offsetHeight + 'px';
+        }
+    }
+    onTableUpdate(force = false) {
+        if (this.findTimeout) {
+            clearTimeout(this.findTimeout);
+        }
+        this.findTimeout = setTimeout(() => {
+            this.currentSearch = this.search;
+            this.selectedRows.clear();
+            this.onUpdate.emit(new BiitTableResponse(this.paginator.currentPage, this.paginator.pageSize, this.search, this.sorting));
+            clearTimeout(this.findTimeout);
+            this.findTimeout = null;
+        }, force ? 0 : 500);
+    }
+    onTableSort(column) {
+        if (this.sorting && this.sorting.name == column.name) {
+            switch (this.sorting.order) {
+                case BiitTableSortingOrder.ASC:
+                    this.sorting.order = BiitTableSortingOrder.DESC;
+                    break;
+                case BiitTableSortingOrder.DESC:
+                    this.sorting = undefined;
+                    break;
+            }
+        }
+        else {
+            this.sorting = new BiitTableSorting(column.name, BiitTableSortingOrder.ASC);
+        }
+        this.onTableUpdate();
+    }
+    snakeToCamel(string) {
+        return string.toLowerCase().replace(/[-_][a-z]/g, (group) => group.slice(-1).toUpperCase());
+    }
+    resizeColumn(event, column, index) {
+        this.columnResize.start = event.target;
+        this.columnResize.pressed = true;
+        this.columnResize.startX = event.x;
+        this.columnResize.startWidth = this.columnResize.start.parentNode.offsetWidth;
+        let columnElem = this.elem.nativeElement.querySelector('thead').firstChild.children[this.isSelectable ? index + 1 : index];
+        this.columnResize.minWidth = columnElem.firstElementChild.offsetWidth
+            + 2.4 * parseFloat(getComputedStyle(document.documentElement).fontSize) * 2;
+        this.initResizableColumns(column);
+    }
+    initResizableColumns(column) {
+        const moveListener = this.renderer.listen('window', 'mousemove', (event) => {
+            if (this.columnResize.pressed) {
+                let width = this.columnResize.startWidth + (event.x - this.columnResize.startX);
+                if (width > this.columnResize.minWidth) {
+                    column.width = width;
+                }
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+            return false;
+        });
+        const releaseListener = this.renderer.listen('window', 'mouseup', (event) => {
+            if (this.columnResize.pressed) {
+                this.columnResize.pressed = false;
+                event.preventDefault();
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+                moveListener();
+                releaseListener();
+            }
+            return false;
+        });
+    }
+    setColumnVisibility(response) {
+        this.columns.forEach(c => response.some(e => e.name == c.name) ? c.visible = true : c.visible = false);
+    }
+    selectRow(item, holdCtrl) {
+        if (!holdCtrl || this.isSelectableSingle) {
+            this.selectedRows.clear();
+            this.selectedRows.add(item);
+        }
+        else {
+            if (!this.selectedRows.has(item)) {
+                this.selectedRows.add(item);
+            }
+            else {
+                this.selectedRows.delete(item);
+            }
+        }
+    }
+    getSelectedRows() {
+        return [...this.selectedRows];
+    }
+    emitCellAction(item, column, event) {
+        event.stopPropagation();
+        this.onCellAction.emit(new BiitTableActionResponse(item, column));
+    }
+    emitRowClick(item) {
+        this.onRowClick.emit(item);
+    }
+    resetInputValue() {
+        this.search = this.currentSearch;
+    }
+}
+BiitTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTableComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+BiitTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitTableComponent, selector: "biit-table", inputs: { _data: ["metadata", "_data"], _loading: ["loading", "_loading"], columns: "columns", pageSizes: "pageSizes", defaultPageSize: "defaultPageSize" }, outputs: { onUpdate: "onUpdate", onCellAction: "onCellAction", onRowClick: "onRowClick" }, providers: [{
+            provide: TRANSLOCO_SCOPE,
+            useValue: { scope: 'wizardry-theme/table', alias: "table" }
+        }], queries: [{ propertyName: "actionsTpl", first: true, predicate: ["actions"], descendants: true }], ngImport: i0, template: "<div class=\"canvas\" *transloco=\"let t\">\n  <div class=\"header\" *ngIf=\"!hideHeader\">\n    <div class=\"buttons\" id=\"menu\">\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\">\n        <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n      </div>\n      <div *ngIf=\"!actionsTpl\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"forms\">\n      <biit-input-text id=\"search-field\" [(ngModel)]=\"search\"\n                       (onActionPerformed)=\"\n                         paginator.currentPage = 1;\n                         onTableUpdate(true);\n                       \"\n                       (focusout)=\"resetInputValue()\"\n                       (ngModelChange)=\"onTableUpdate()\"\n                       icon=\"search\"\n                       [placeholder]=\"t('table.search')\"\n      ></biit-input-text>\n      <biit-multiselect id=\"column-selector\" [ngModel]=\"columns | visibleColumns\"\n                        (ngModelChange)=\"setColumnVisibility($event)\"\n                        [data]=\"columns\"\n                        label=\"label\"\n                        value=\"visible\"\n                        [title]=\"t('table.column-selector')\"\n                        [type]=\"BiitMultiselectType.ICON\"\n                        [compact]=\"true\"\n      ></biit-multiselect>\n    </div>\n  </div>\n\n  <div class=\"content\">\n    <div *ngIf=\"loading\" style=\"position: relative\">\n      <biit-progress-bar style=\"position: absolute; top: 2.1rem; left: 0.2rem; width: calc(100% - 0.1rem);\"></biit-progress-bar>\n    </div>\n    <table>\n      <thead>\n        <tr>\n          <th *ngIf=\"isSelectable || isSelectableSingle\" class=\"select\">\n            <biit-checkbox *ngIf=\"isSelectable\"\n                           [ngModel]=\"data?.data.length && selectedRows.size == data?.data.length\"\n                           (ngModelChange)=\"$event ? data?.data.forEach(selectedRows.add, selectedRows) : selectedRows.clear()\"\n            ></biit-checkbox>\n          </th>\n          <th *ngFor=\"let column of columns, index as i\"\n              [class.sortable]=\"isSortable\"\n              [style.display]=\"!column.visible ? 'none' : null\"\n              [style.width]=\"column.width ? column.width + 'px' : ''\"\n              (click)=\"isSortable ? onTableSort(column) : false\"\n          >\n            <div class=\"label\">\n              {{column.label}}\n            </div>\n            <biit-icon *ngIf=\"isSortable\"\n                       [name]=\"sorting?.name == column.name ? 'right_arrow' : 'up_down_arrow'\"\n                       [pathStyle]=\"{fill: '#FFFFFF'}\"\n                       class=\"sort\"\n                       [class.asc]=\"sorting?.name == column.name && sorting?.order == 'asc'\"\n                       [class.desc]=\"sorting?.name == column.name && sorting?.order == 'desc'\"\n            ></biit-icon>\n            <div class=\"column-resizer\"\n                 (mousedown)=\"resizeColumn($event, column, i)\"\n                 (click)=\"$event.preventDefault();\n                          $event.stopPropagation();\n                          $event.stopImmediatePropagation();\"\n            ></div>\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let item of data?.data; index as i\"\n            [class.selectable]=\"isSelectable\"\n            [class.selected]=\"selectedRows.has(item)\"\n            (pointerdown)=\"emitRowClick(item)\"\n        >\n            <td *ngIf=\"isSelectable || isSelectableSingle\" class=\"select\">\n              <biit-checkbox id=\"select{{i}}\"\n                             [ngModel]=\"selectedRows.has(item)\"\n                             (ngModelChange)=\"selectRow(item, true)\"\n              ></biit-checkbox>\n            </td>\n            <td *ngFor=\"let column of columns\"\n                (pointerdown)=\"selectRow(item, $event.ctrlKey)\"\n                [style.display]=\"!column.visible ? 'none' : null\"\n                [style.width]=\"column.width ? column.width + 'px' : null\"\n            >\n              <div *ngIf=\"column.format == BiitTableColumnFormat.DEFAULT\">\n                {{item | columnData: column.name}}\n              </div>\n              <div *ngIf=\"column.format == BiitTableColumnFormat.BOOLEAN\">\n                {{(item | columnData: column.name) ? t('table.yes') : t('table.no') }}\n              </div>\n              <div *ngIf=\"column.format == BiitTableColumnFormat.DATE\">\n                {{(item | columnData: column.name) | localizedDate}}\n              </div>\n              <div *ngIf=\"column.format == BiitTableColumnFormat.BUTTON\"\n                   style=\"width: auto; text-align: -webkit-center; text-align: -moz-center;\">\n                <button biit-button tertiary\n                        (pointerdown)=\"emitCellAction(item, column.name, $event)\">\n                  {{item | columnData: column.name}}\n                </button>\n              </div>\n              <div *ngIf=\"column.format == BiitTableColumnFormat.ICON_BUTTON\"\n                   style=\"width: auto; text-align: -webkit-center; text-align: -moz-center;\">\n                <button biit-icon [icon]=\"item | columnData: column.name\"\n                        (pointerdown)=\"emitCellAction(item, column.name, $event);\"></button>\n              </div>\n              <div *ngIf=\"column.format == BiitTableColumnFormat.ICON\"\n                   style=\"width: auto; height: 1.05rem;\">\n                <biit-icon [name]=\"item | columnData: column.name\"></biit-icon>\n              </div>\n              <div *ngIf=\"column.format == BiitTableColumnFormat.CUSTOM_HTML\"\n                   style=\"width: auto; text-align: -webkit-center; text-align: -moz-center;\">\n                <div [innerHTML]=\"item | columnData: column.name\"></div>\n              </div>\n            </td>\n        </tr>\n      </tbody>\n    </table>\n\n  </div>\n\n  <div class=\"footer\" *ngIf=\"!hideFooter\">\n    <div class=\"selected\">\n      <a style=\"margin-right: 0.7rem\" *ngIf=\"selectedRows.size\">Selected:</a>\n      <a *ngIf=\"selectedRows.size\">{{selectedRows.size}}</a>\n    </div>\n    <biit-paginator *ngIf=\"paginator\"\n      [ngModel]=\"paginator\" (ngModelChange)=\"paginator = $event; onTableUpdate()\"></biit-paginator>\n  </div>\n</div>\n", styles: [".canvas{height:100%;display:flex;flex-direction:column;box-sizing:border-box;row-gap:1.05rem}.canvas>.header{display:flex;flex-direction:row;justify-content:space-between}.canvas>.header>*{display:flex;flex-direction:row}.canvas>.header>.buttons ::ng-deep>*{height:2.1rem;min-width:2.1rem;display:flex;align-items:center;justify-content:center}.canvas>.header>.forms{column-gap:.7rem}.canvas>.header>.forms ::ng-deep biit-input-text .biit-input{min-height:0;padding-top:0}.canvas>.content{overflow:auto;display:flex;flex-grow:1;flex-direction:column;box-sizing:border-box}.canvas>.content *{box-sizing:border-box}.canvas>.content>table{width:100%;height:-moz-fit-content;height:fit-content;margin-top:-.2rem;table-layout:fixed;border-spacing:.2rem}.canvas>.content>table thead{text-transform:uppercase;position:sticky;top:0;background:white;z-index:1}.canvas>.content>table thead th{position:relative;height:2.1rem;color:#fff;font-weight:500;background:#262626;padding:.4rem 2.4rem;text-align:center;text-align:-moz-center;text-align:-webkit-center;cursor:default}.canvas>.content>table thead th.select{width:2.1rem;padding:.3rem .7rem;background:white}.canvas>.content>table thead th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.canvas>.content>table thead th>.column-resizer{position:absolute;right:-.2rem;top:0;height:100%;width:.6rem;cursor:col-resize}.canvas>.content>table thead th>.label{width:-moz-fit-content;width:fit-content}.canvas>.content>table thead th>.sort{position:absolute;width:.7rem;height:.7rem;top:calc(50% - .35rem);right:.7rem;pointer-events:none}.canvas>.content>table thead th>.sort.asc{rotate:-90deg}.canvas>.content>table thead th>.sort.desc{rotate:90deg}.canvas>.content>table tbody tr{cursor:default}.canvas>.content>table tbody tr.selected{background:#D9D9D9}.canvas>.content>table tbody tr:hover{background:#EDEDED}.canvas>.content>table tbody tr:hover.selectable{cursor:pointer}.canvas>.content>table tbody tr>td{height:2.1rem;border-bottom:.2rem solid #262626;padding:.3rem .7rem;overflow:hidden}.canvas>.content>table tbody tr>td.select{width:2.1rem;padding:.3rem .7rem}.canvas>.footer{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.canvas>.footer>biit-paginator{width:50%;display:block}@media screen and (max-width: 600px){.page-size-selector,.horizontal-menu{display:none!important}}@media screen and (min-width: 601px){.vertical-menu{display:none!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BiitPaginatorComponent, selector: "biit-paginator" }, { 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: "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: i4.BiitCheckboxComponent, selector: "biit-checkbox", inputs: ["disabled", "description", "showAlwaysDescription"] }, { kind: "component", type: i5$1.BiitProgressBarComponent, selector: "biit-progress-bar", inputs: ["type", "_value", "value"] }, { kind: "directive", type: i5.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i1$1.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "component", type: i8.BiitButtonComponent, selector: "button[biit-button]" }, { kind: "directive", type: i8.BiitButtonTertiaryDirective, selector: "[tertiary]" }, { kind: "component", type: i8.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }, { kind: "component", type: i9.BiitVerticalMenuComponent, selector: "biit-vertical-menu" }, { kind: "directive", type: BiitTableSelectableDirective, selector: "[selectable]" }, { kind: "directive", type: BiitTableSortableDirective, selector: "[sortable]" }, { kind: "pipe", type: i10.LocalizedDatePipe, name: "localizedDate" }, { kind: "pipe", type: VisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: ColumnDataPipe, name: "columnData" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'biit-table', providers: [{
+                            provide: TRANSLOCO_SCOPE,
+                            useValue: { scope: 'wizardry-theme/table', alias: "table" }
+                        }], template: "<div class=\"canvas\" *transloco=\"let t\">\n  <div class=\"header\" *ngIf=\"!hideHeader\">\n    <div class=\"buttons\" id=\"menu\">\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\">\n        <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n      </div>\n      <div *ngIf=\"!actionsTpl\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"forms\">\n      <biit-input-text id=\"search-field\" [(ngModel)]=\"search\"\n                       (onActionPerformed)=\"\n                         paginator.currentPage = 1;\n                         onTableUpdate(true);\n                       \"\n                       (focusout)=\"resetInputValue()\"\n                       (ngModelChange)=\"onTableUpdate()\"\n                       icon=\"search\"\n                       [placeholder]=\"t('table.search')\"\n      ></biit-input-text>\n      <biit-multiselect id=\"column-selector\" [ngModel]=\"columns | visibleColumns\"\n                        (ngModelChange)=\"setColumnVisibility($event)\"\n                        [data]=\"columns\"\n                        label=\"label\"\n                        value=\"visible\"\n                        [title]=\"t('table.column-selector')\"\n                        [type]=\"BiitMultiselectType.ICON\"\n                        [compact]=\"true\"\n      ></biit-multiselect>\n    </div>\n  </div>\n\n  <div class=\"content\">\n    <div *ngIf=\"loading\" style=\"position: relative\">\n      <biit-progress-bar style=\"position: absolute; top: 2.1rem; left: 0.2rem; width: calc(100% - 0.1rem);\"></biit-progress-bar>\n    </div>\n    <table>\n      <thead>\n        <tr>\n          <th *ngIf=\"isSelectable || isSelectableSingle\" class=\"select\">\n            <biit-checkbox *ngIf=\"isSelectable\"\n                           [ngModel]=\"data?.data.length && selectedRows.size == data?.data.length\"\n                           (ngModelChange)=\"$event ? data?.data.forEach(selectedRows.add, selectedRows) : selectedRows.clear()\"\n            ></biit-checkbox>\n          </th>\n          <th *ngFor=\"let column of columns, index as i\"\n              [class.sortable]=\"isSortable\"\n              [style.display]=\"!column.visible ? 'none' : null\"\n              [style.width]=\"column.width ? column.width + 'px' : ''\"\n              (click)=\"isSortable ? onTableSort(column) : false\"\n          >\n            <div class=\"label\">\n              {{column.label}}\n            </div>\n            <biit-icon *ngIf=\"isSortable\"\n                       [name]=\"sorting?.name == column.name ? 'right_arrow' : 'up_down_arrow'\"\n                       [pathStyle]=\"{fill: '#FFFFFF'}\"\n                       class=\"sort\"\n                       [class.asc]=\"sorting?.name == column.name && sorting?.order == 'asc'\"\n                       [class.desc]=\"sorting?.name == column.name && sorting?.order == 'desc'\"\n            ></biit-icon>\n            <div class=\"column-resizer\"\n                 (mousedown)=\"resizeColumn($event, column, i)\"\n                 (click)=\"$event.preventDefault();\n                          $event.stopPropagation();\n                          $event.stopImmediatePropagation();\"\n            ></div>\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let item of data?.data; index as i\"\n            [class.selectable]=\"isSelectable\"\n            [class.selected]=\"selectedRows.has(item)\"\n            (pointerdown)=\"emitRowClick(item)\"\n        >\n            <td *ngIf=\"isSelectable || isSelectableSingle\" class=\"select\">\n              <biit-checkbox id=\"select{{i}}\"\n                             [ngModel]=\"selectedRows.has(item)\"\n                             (ngModelChange)=\"selectRow(item, true)\"\n              ></biit-checkbox>\n            </td>\n            <td *ngFor=\"let column of columns\"\n                (pointerdown)=\"selectRow(item, $event.ctrlKey)\"\n                [style.display]=\"!column.visible ? 'none' : null\"\n                [style.width]=\"column.width ? column.width + 'px' : null\"\n            >\n              <div *ngIf=\"column.format == BiitTableColumnFormat.DEFAULT\">\n                {{item | columnData: column.name}}\n              </div>\n              <div *ngIf=\"column.format == BiitTableColumnFormat.BOOLEAN\">\n                {{(item | columnData: column.name) ? t('table.yes') : t('table.no') }}\n              </div>\n              <div *ngIf=\"column.format == BiitTableColumnFormat.DATE\">\n                {{(item | columnData: column.name) | localizedDate}}\n              </div>\n              <div *ngIf=\"column.format == BiitTableColumnFormat.BUTTON\"\n                   style=\"width: auto; text-align: -webkit-center; text-align: -moz-center;\">\n                <button biit-button tertiary\n                        (pointerdown)=\"emitCellAction(item, column.name, $event)\">\n                  {{item | columnData: column.name}}\n                </button>\n              </div>\n              <div *ngIf=\"column.format == BiitTableColumnFormat.ICON_BUTTON\"\n                   style=\"width: auto; text-align: -webkit-center; text-align: -moz-center;\">\n                <button biit-icon [icon]=\"item | columnData: column.name\"\n                        (pointerdown)=\"emitCellAction(item, column.name, $event);\"></button>\n              </div>\n              <div *ngIf=\"column.format == BiitTableColumnFormat.ICON\"\n                   style=\"width: auto; height: 1.05rem;\">\n                <biit-icon [name]=\"item | columnData: column.name\"></biit-icon>\n              </div>\n              <div *ngIf=\"column.format == BiitTableColumnFormat.CUSTOM_HTML\"\n                   style=\"width: auto; text-align: -webkit-center; text-align: -moz-center;\">\n                <div [innerHTML]=\"item | columnData: column.name\"></div>\n              </div>\n            </td>\n        </tr>\n      </tbody>\n    </table>\n\n  </div>\n\n  <div class=\"footer\" *ngIf=\"!hideFooter\">\n    <div class=\"selected\">\n      <a style=\"margin-right: 0.7rem\" *ngIf=\"selectedRows.size\">Selected:</a>\n      <a *ngIf=\"selectedRows.size\">{{selectedRows.size}}</a>\n    </div>\n    <biit-paginator *ngIf=\"paginator\"\n      [ngModel]=\"paginator\" (ngModelChange)=\"paginator = $event; onTableUpdate()\"></biit-paginator>\n  </div>\n</div>\n", styles: [".canvas{height:100%;display:flex;flex-direction:column;box-sizing:border-box;row-gap:1.05rem}.canvas>.header{display:flex;flex-direction:row;justify-content:space-between}.canvas>.header>*{display:flex;flex-direction:row}.canvas>.header>.buttons ::ng-deep>*{height:2.1rem;min-width:2.1rem;display:flex;align-items:center;justify-content:center}.canvas>.header>.forms{column-gap:.7rem}.canvas>.header>.forms ::ng-deep biit-input-text .biit-input{min-height:0;padding-top:0}.canvas>.content{overflow:auto;display:flex;flex-grow:1;flex-direction:column;box-sizing:border-box}.canvas>.content *{box-sizing:border-box}.canvas>.content>table{width:100%;height:-moz-fit-content;height:fit-content;margin-top:-.2rem;table-layout:fixed;border-spacing:.2rem}.canvas>.content>table thead{text-transform:uppercase;position:sticky;top:0;background:white;z-index:1}.canvas>.content>table thead th{position:relative;height:2.1rem;color:#fff;font-weight:500;background:#262626;padding:.4rem 2.4rem;text-align:center;text-align:-moz-center;text-align:-webkit-center;cursor:default}.canvas>.content>table thead th.select{width:2.1rem;padding:.3rem .7rem;background:white}.canvas>.content>table thead th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.canvas>.content>table thead th>.column-resizer{position:absolute;right:-.2rem;top:0;height:100%;width:.6rem;cursor:col-resize}.canvas>.content>table thead th>.label{width:-moz-fit-content;width:fit-content}.canvas>.content>table thead th>.sort{position:absolute;width:.7rem;height:.7rem;top:calc(50% - .35rem);right:.7rem;pointer-events:none}.canvas>.content>table thead th>.sort.asc{rotate:-90deg}.canvas>.content>table thead th>.sort.desc{rotate:90deg}.canvas>.content>table tbody tr{cursor:default}.canvas>.content>table tbody tr.selected{background:#D9D9D9}.canvas>.content>table tbody tr:hover{background:#EDEDED}.canvas>.content>table tbody tr:hover.selectable{cursor:pointer}.canvas>.content>table tbody tr>td{height:2.1rem;border-bottom:.2rem solid #262626;padding:.3rem .7rem;overflow:hidden}.canvas>.content>table tbody tr>td.select{width:2.1rem;padding:.3rem .7rem}.canvas>.footer{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.canvas>.footer>biit-paginator{width:50%;display:block}@media screen and (max-width: 600px){.page-size-selector,.horizontal-menu{display:none!important}}@media screen and (min-width: 601px){.vertical-menu{display:none!important}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { _data: [{
+                type: Input,
+                args: ['metadata']
+            }], _loading: [{
+                type: Input,
+                args: ['loading']
+            }], columns: [{
+                type: Input
+            }], pageSizes: [{
+                type: Input
+            }], defaultPageSize: [{
+                type: Input
+            }], actionsTpl: [{
+                type: ContentChild,
+                args: ['actions']
+            }], onUpdate: [{
+                type: Output
+            }], onCellAction: [{
+                type: Output
+            }], onRowClick: [{
+                type: Output
+            }] } });
+
+class BiitPaginatorModule {
+}
+BiitPaginatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitPaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BiitPaginatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BiitPaginatorModule, declarations: [BiitPaginatorComponent], imports: [CommonModule,
+        FormsModule,
+        BiitIconModule,
+        BiitIconButtonModule,
+        TranslocoRootModule,
+        BiitTooltipModule], exports: [BiitPaginatorComponent] });
+BiitPaginatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitPaginatorModule, providers: [{
+            provide: TRANSLOCO_SCOPE,
+            useValue: { scope: 'wizardry-theme/table', alias: "table" }
+        }], imports: [CommonModule,
+        FormsModule,
+        BiitIconModule,
+        BiitIconButtonModule,
+        TranslocoRootModule,
+        BiitTooltipModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitPaginatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [BiitPaginatorComponent],
+                    exports: [BiitPaginatorComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        BiitIconModule,
+                        BiitIconButtonModule,
+                        TranslocoRootModule,
+                        BiitTooltipModule
+                    ],
+                    providers: [{
+                            provide: TRANSLOCO_SCOPE,
+                            useValue: { scope: 'wizardry-theme/table', alias: "table" }
+                        }]
+                }]
+        }] });
+
+class BiitTableModule {
+}
+BiitTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BiitTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BiitTableModule, declarations: [BiitTableComponent,
+        BiitTableSelectableDirective,
+        BiitTableSelectableSingleDirective,
+        BiitTableSortableDirective,
+        BiitTableHeaderlessDirective,
+        BiitTableFooterlessDirective,
+        VisibleColumnsPipe,
+        ColumnDataPipe], imports: [CommonModule,
+        FormsModule,
+        BiitPaginatorModule,
+        BiitMultiselectModule,
+        BiitInputTextModule,
+        BiitCheckboxModule,
+        BiitProgressBarModule,
+        LocalizedDatePipeModule,
+        TranslocoRootModule,
+        BiitIconModule,
+        BiitButtonModule,
+        BiitIconButtonModule,
+        BiitVerticalMenuModule], exports: [BiitTableComponent,
+        BiitTableSelectableDirective,
+        BiitTableSelectableSingleDirective,
+        BiitTableSortableDirective,
+        BiitTableHeaderlessDirective,
+        BiitTableFooterlessDirective] });
+BiitTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTableModule, imports: [CommonModule,
+        FormsModule,
+        BiitPaginatorModule,
+        BiitMultiselectModule,
+        BiitInputTextModule,
+        BiitCheckboxModule,
+        BiitProgressBarModule,
+        LocalizedDatePipeModule,
+        TranslocoRootModule,
+        BiitIconModule,
+        BiitButtonModule,
+        BiitIconButtonModule,
+        BiitVerticalMenuModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BiitTableComponent,
+                        BiitTableSelectableDirective,
+                        BiitTableSelectableSingleDirective,
+                        BiitTableSortableDirective,
+                        BiitTableHeaderlessDirective,
+                        BiitTableFooterlessDirective,
+                        VisibleColumnsPipe,
+                        ColumnDataPipe
+                    ],
+                    exports: [
+                        BiitTableComponent,
+                        BiitTableSelectableDirective,
+                        BiitTableSelectableSingleDirective,
+                        BiitTableSortableDirective,
+                        BiitTableHeaderlessDirective,
+                        BiitTableFooterlessDirective
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        BiitPaginatorModule,
+                        BiitMultiselectModule,
+                        BiitInputTextModule,
+                        BiitCheckboxModule,
+                        BiitProgressBarModule,
+                        LocalizedDatePipeModule,
+                        TranslocoRootModule,
+                        BiitIconModule,
+                        BiitButtonModule,
+                        BiitIconButtonModule,
+                        BiitVerticalMenuModule
+                    ]
+                }]
+        }] });
+
+class BiitTableData {
+    constructor(data, totalItems) {
+        this.data = data;
+        this.totalItems = totalItems;
+    }
+}
+
+class GenericFilter {
+    static filter(object, value, includes = false, caseSensitive = false, params) {
+        const formattedValue = caseSensitive ? value : value === null || value === void 0 ? void 0 : value.toLowerCase();
+        for (let param in object) {
+            if (params && !params.includes(param))
+                continue;
+            let paramValue = object[param];
+            if (paramValue instanceof Array) {
+                if (paramValue.some((item) => {
+                    return GenericFilter.filter(item, value, includes, caseSensitive);
+                })) {
+                    return true;
+                }
+                continue;
+            }
+            if (typeof paramValue === 'string' || typeof paramValue === 'number' || typeof paramValue === 'boolean') {
+                let stringValue = paramValue.toString();
+                if (!caseSensitive) {
+                    stringValue = stringValue.toLowerCase();
+                }
+                if (includes) {
+                    if (stringValue.includes(formattedValue)) {
+                        return true;
+                    }
+                }
+                else {
+                    if (stringValue === formattedValue) {
+                        return true;
+                    }
+                }
+                continue;
+            }
+            if (Object.keys(object).length === 0) {
+                if (object[param] === value) {
+                    return true;
+                }
+            }
+            else {
+                if (GenericFilter.filter(paramValue, value, includes, caseSensitive)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+}
+
+class GenericSort {
+    static sort(data, sorting, columns) {
+        if (sorting) {
+            return data.sort((a, b) => {
+                switch (columns.find(i => i.name == sorting.name).format) {
+                    case BiitTableColumnFormat.BOOLEAN:
+                        if (a[sorting.name] == b[sorting.name])
+                            return 0;
+                        if (sorting.order == 'asc') {
+                            return a[sorting.name] ? -1 : 1;
+                        }
+                        else {
+                            return a[sorting.name] ? 1 : -1;
+                        }
+                    case BiitTableColumnFormat.DATE:
+                        if (new Date(a[sorting.name]).getTime() == new Date(b[sorting.name]).getTime())
+                            return 0;
+                        if (sorting.order == 'asc') {
+                            return (new Date(a[sorting.name]).getTime() > new Date(b[sorting.name]).getTime()) ? 1 : -1;
+                        }
+                        else {
+                            return (new Date(a[sorting.name]).getTime() > new Date(b[sorting.name]).getTime()) ? -1 : 1;
+                        }
+                    default:
+                        if (a[sorting.name] == b[sorting.name])
+                            return 0;
+                        if (sorting.order == 'asc') {
+                            return a[sorting.name] > b[sorting.name] ? 1 : -1;
+                        }
+                        else {
+                            return a[sorting.name] > b[sorting.name] ? -1 : 1;
+                        }
+                }
+            });
+        }
+        else {
+            return data;
+        }
+    }
+}
+
+class Page {
+    constructor(pageNumber, pageSize, totalElements) {
+        this.totalElements = 0;
+        this.pageNumber = 0;
+        this.pageSize = 0;
+        this.pageNumber = pageNumber !== null && pageNumber !== void 0 ? pageNumber : 0;
+        this.pageSize = pageSize !== null && pageSize !== void 0 ? pageSize : 0;
+        this.totalElements = totalElements !== null && totalElements !== void 0 ? totalElements : 0;
+    }
+}
+
+class BiitDatatablePagerComponent extends DataTablePagerComponent {
+    constructor(biitIconService) {
+        super();
+        biitIconService.registerIcons(completeIconSet);
+    }
+    enforceMinMax(el) {
+        if (el.value != "") {
+            if (parseInt(el.value) < parseInt(el.min)) {
+                el.value = el.min;
+            }
+            if (parseInt(el.value) > parseInt(el.max)) {
+                el.value = el.max;
+            }
+        }
+    }
+    log(event) {
+    }
+}
+BiitDatatablePagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDatatablePagerComponent, deps: [{ token: i1$1.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: i8.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: i5$1.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"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.BiitIconService }]; } });
+
+class BiitDatatableComponent {
+    set data(data) {
+        this._data = data !== null && data !== void 0 ? data : [];
+        this.allData = data !== null && data !== void 0 ? data : [];
+        this.selected = [];
+    }
+    get data() {
+        return this._data;
+    }
+    set columns(columns) {
+        this.allColumns = columns !== null && columns !== void 0 ? columns : [];
+        this._columns = columns.filter(c => c.visible);
+    }
+    get columns() {
+        return this._columns;
+    }
+    get selectedRows() {
+        return this.selected;
+    }
+    constructor(biitIconService) {
+        this._data = [];
+        this.allData = [];
+        this._columns = [];
+        this.allColumns = [];
+        this.selected = [];
+        this.pageSizeList = [];
+        this.loading = false;
+        this.search = "";
+        this.onSelection = new EventEmitter();
+        this.onPageChange = new EventEmitter();
+        this.ColumnMode = ColumnMode;
+        this.SelectionType = SelectionType;
+        this.BiitMultiselectType = BiitMultiselectType;
+        biitIconService.registerIcons(completeIconSet);
+    }
+    ngOnInit() {
+        this.selectable = coerceBooleanProperty(this.selectable);
+        this.singleSelection = coerceBooleanProperty(this.singleSelection);
+        this.scrollbarH = coerceBooleanProperty(this.scrollbarH);
+        this.hideHeader = coerceBooleanProperty(this.hideHeader);
+        this.hideFooter = coerceBooleanProperty(this.hideFooter);
+        this.serverSide = coerceBooleanProperty(this.serverSide);
+    }
+    onSelect({ selected }) {
+        this.selected.splice(0, this.selected.length);
+        this.selected.push(...selected);
+        this.onSelection.emit(this.selected);
+    }
+    onActivate(event) {
+        if (event.type == 'click' && event.column.name !== 'chkbox') {
+            this.selected = [event.row];
+            this.onSelection.emit(this.selected);
+        }
+    }
+    onFilter(value, force = false) {
+        if (this.findTimeout) {
+            clearTimeout(this.findTimeout);
+        }
+        this.findTimeout = setTimeout(() => {
+            this.search = value;
+            const val = value.toLowerCase();
+            // filter our data
+            const temp = this.allData.filter(item => GenericFilter.filter(item, val, true));
+            // update the rows
+            this._data = temp;
+            // Whenever the filter changes, always go back to the first page
+            this.table.offset = 0;
+            clearTimeout(this.findTimeout);
+            this.findTimeout = null;
+        }, force ? 0 : 500);
+    }
+    onFooterPageChange(event) {
+        const page = new Page(event.offset, event.pageSize, event.count);
+        this.onPageChange.emit(page);
+    }
+    setColumnVisibility(columns) {
+        this._columns = this.allColumns.filter(c => columns.includes(c));
+    }
+}
+BiitDatatableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDatatableComponent, deps: [{ token: i1$1.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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.BiitCheckboxComponent, selector: "biit-checkbox", inputs: ["disabled", "description", "showAlwaysDescription"] }, { kind: "component", type: BiitDatatablePagerComponent, selector: "biit-datatable-pager" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 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: i5$1.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: i5.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"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.BiitIconService }]; }, propDecorators: { table: [{
+                type: ViewChild,
+                args: ['table']
+            }], data: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], pageSizeList: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], singleSelection: [{
+                type: Input
+            }], scrollbarH: [{
+                type: Input
+            }], hideHeader: [{
+                type: Input
+            }], hideFooter: [{
+                type: Input
+            }], serverSide: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }], onSelection: [{
+                type: Output
+            }], onPageChange: [{
+                type: Output
+            }], actionsTpl: [{
+                type: ContentChild,
+                args: ['actions']
+            }] } });
+
+class BiitDatatablePagerModule {
+}
+BiitDatatablePagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDatatablePagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BiitDatatablePagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BiitDatatablePagerModule, declarations: [BiitDatatablePagerComponent], imports: [CommonModule,
+        FormsModule,
+        BiitIconModule,
+        BiitIconButtonModule,
+        TranslocoRootModule,
+        BiitTooltipModule], exports: [BiitDatatablePagerComponent] });
+BiitDatatablePagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDatatablePagerModule, imports: [CommonModule,
+        FormsModule,
+        BiitIconModule,
+        BiitIconButtonModule,
+        TranslocoRootModule,
+        BiitTooltipModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDatatablePagerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [BiitDatatablePagerComponent],
+                    exports: [BiitDatatablePagerComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        BiitIconModule,
+                        BiitIconButtonModule,
+                        TranslocoRootModule,
+                        BiitTooltipModule
+                    ]
+                }]
+        }] });
+
+class BiitDatatableModule {
+}
+BiitDatatableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDatatableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BiitDatatableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BiitDatatableModule, declarations: [BiitDatatableComponent], imports: [FormsModule,
+        NgTemplateOutlet,
+        BiitCheckboxModule,
+        BiitDatatablePagerModule,
+        NgForOf,
+        NgIf,
+        NgxDatatableModule,
+        BiitProgressBarModule,
+        BiitMultiselectModule,
+        TranslocoModule,
+        BiitInputTextModule,
+        BiitVerticalMenuModule], exports: [BiitDatatableComponent] });
+BiitDatatableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDatatableModule, imports: [FormsModule,
+        BiitCheckboxModule,
+        BiitDatatablePagerModule,
+        NgxDatatableModule,
+        BiitProgressBarModule,
+        BiitMultiselectModule,
+        TranslocoModule,
+        BiitInputTextModule,
+        BiitVerticalMenuModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDatatableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BiitDatatableComponent
+                    ],
+                    exports: [
+                        BiitDatatableComponent
+                    ],
+                    imports: [
+                        FormsModule,
+                        NgTemplateOutlet,
+                        BiitCheckboxModule,
+                        BiitDatatablePagerModule,
+                        NgForOf,
+                        NgIf,
+                        NgxDatatableModule,
+                        BiitProgressBarModule,
+                        BiitMultiselectModule,
+                        TranslocoModule,
+                        BiitInputTextModule,
+                        BiitVerticalMenuModule
+                    ],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                }]
+        }] });
+
+class DatatableColumn {
+    constructor(name, prop, visible, width, sortable, pipe, cellTemplate, cellClass, comparator) {
+        this.name = name;
+        this.prop = prop;
+        this.visible = visible !== null && visible !== void 0 ? visible : true;
+        this.width = width !== null && width !== void 0 ? width : undefined;
+        this.minWidth = width !== null && width !== void 0 ? width : undefined;
+        this.sortable = sortable !== null && sortable !== void 0 ? sortable : true;
+        this.pipe = pipe !== null && pipe !== void 0 ? pipe : undefined;
+        this.cellTemplate = cellTemplate !== null && cellTemplate !== void 0 ? cellTemplate : undefined;
+        this.cellClass = cellClass !== null && cellClass !== void 0 ? cellClass : undefined;
+        this.comparator = comparator !== null && comparator !== void 0 ? comparator : undefined;
+    }
+}
+
+/*
+ * Public API Surface of wizardry-theme/button
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BiitDatatableComponent, BiitDatatableModule, BiitPaginatorComponent, BiitPaginatorModule, BiitPaginatorOptions, BiitTableActionResponse, BiitTableColumn, BiitTableColumnFormat, BiitTableComponent, BiitTableData, BiitTableFooterlessDirective, BiitTableHeaderlessDirective, BiitTableModule, BiitTableResponse, BiitTableSelectableDirective, BiitTableSelectableSingleDirective, BiitTableSortableDirective, BiitTableSorting, BiitTableSortingOrder, DatatableColumn, GenericFilter, GenericSort, Page };
+//# sourceMappingURL=biit-solutions-wizardry-theme-table.mjs.map