@bravobit/bb-foundation 0.45.4 → 0.50.0

package/fesm2022/bravobit-bb-foundation-table.mjs

@@ -221,19 +221,19 @@ class BbTablePager {
             .filter(page => page > 0 && page <= totalPages)
             .map(page => ({ page, active: pageNumber === page }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbTablePager, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: BbTablePager, isStandalone: true, selector: "bb-table-pager", inputs: { amountOfButtons: "amountOfButtons", showArrowButtons: "showArrowButtons", disabled: ["disabled", "disabled", booleanAttribute], pageNumber: "pageNumber", totalPages: "totalPages" }, host: { properties: { "class.disabled": "disabled" }, classAttribute: "bb-table-pager" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: BbTablePager, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: BbTablePager, isStandalone: true, selector: "bb-table-pager", inputs: { amountOfButtons: "amountOfButtons", showArrowButtons: "showArrowButtons", disabled: ["disabled", "disabled", booleanAttribute], pageNumber: "pageNumber", totalPages: "totalPages" }, host: { properties: { "class.disabled": "disabled" }, classAttribute: "bb-table-pager" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbTablePager), multi: true }
         ], ngImport: i0, template: "<ul class=\"bb-pager-list\">\n    <!-- The previous page arrow button. -->\n    @if (showArrowButtons) {\n        <li class=\"bb-pager-list-item\"\n            title=\"Previous page\">\n            <button [disabled]=\"isPreviousDisabled$ | async\"\n                    (click)=\"goToPrevious()\"\n                    class=\"bb-pager-list-button\"\n                    type=\"button\">\n                <bb-icon src=\"material:keyboard_arrow_left\"></bb-icon>\n            </button>\n        </li>\n    }\n\n    <!-- The list of number buttons to navigate through the list. -->\n    @if (list$ | async; as list) {\n        @for (item of list; track $index) {\n            <li [title]=\"'Page ' + item?.page\"\n                class=\"bb-pager-list-item\">\n                <button (click)=\"goToIndex(item?.page)\"\n                        [class.active]=\"item?.active\"\n                        class=\"bb-pager-list-button\"\n                        type=\"button\">\n                    {{ item?.page }}\n                </button>\n            </li>\n        }\n    }\n\n    <!-- The next page arrow button. -->\n    @if (showArrowButtons) {\n        <li class=\"bb-pager-list-item\"\n            title=\"Next page\">\n            <button [disabled]=\"isNextDisabled$ | async\"\n                    (click)=\"goToNext()\"\n                    class=\"bb-pager-list-button\"\n                    type=\"button\">\n                <bb-icon src=\"material:keyboard_arrow_right\"></bb-icon>\n            </button>\n        </li>\n    }\n</ul>\n", styles: [".bb-table-pager{flex:1;display:flex;align-items:center;justify-content:flex-end}.bb-table-pager.disabled{opacity:.5;-webkit-user-select:none;user-select:none;pointer-events:none}.bb-pager-list{display:flex}.bb-pager-list-item{margin-left:.5rem}.bb-pager-list-button{padding:0;color:#3d464d;line-height:1;min-width:2rem;font-size:1rem;appearance:none;font-weight:500;min-height:2rem;-webkit-user-select:none;user-select:none;align-items:center;display:inline-flex;border-radius:.25rem;justify-content:center;border:1px solid #b6bbc1;transition-duration:.2s;background-color:transparent;transition-timing-function:cubic-bezier(0,0,.2,1);box-shadow:0 .375rem .375rem -.375rem #0000001a;transition-property:color,border-color,opacity,background-color}.bb-pager-list-button:hover,.bb-pager-list-button:focus{background-color:#0000000a}.bb-pager-list-button.active,.bb-pager-list-button.active:hover{color:#2196f3;cursor:default;border-color:#2196f3;background-color:transparent}.bb-pager-list-button:disabled{opacity:.35;cursor:default;pointer-events:none}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: BbIcon, selector: "bb-icon", inputs: ["alt", "size", "ariaHidden", "unit", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbTablePager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: BbTablePager, decorators: [{
             type: Component,
             args: [{ selector: 'bb-table-pager', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'bb-table-pager',
                         '[class.disabled]': 'disabled'
-                    }, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, providers: [
+                    }, encapsulation: ViewEncapsulation.None, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BbTablePager), multi: true }
-                    ], standalone: true, imports: [AsyncPipe, BbIcon], template: "<ul class=\"bb-pager-list\">\n    <!-- The previous page arrow button. -->\n    @if (showArrowButtons) {\n        <li class=\"bb-pager-list-item\"\n            title=\"Previous page\">\n            <button [disabled]=\"isPreviousDisabled$ | async\"\n                    (click)=\"goToPrevious()\"\n                    class=\"bb-pager-list-button\"\n                    type=\"button\">\n                <bb-icon src=\"material:keyboard_arrow_left\"></bb-icon>\n            </button>\n        </li>\n    }\n\n    <!-- The list of number buttons to navigate through the list. -->\n    @if (list$ | async; as list) {\n        @for (item of list; track $index) {\n            <li [title]=\"'Page ' + item?.page\"\n                class=\"bb-pager-list-item\">\n                <button (click)=\"goToIndex(item?.page)\"\n                        [class.active]=\"item?.active\"\n                        class=\"bb-pager-list-button\"\n                        type=\"button\">\n                    {{ item?.page }}\n                </button>\n            </li>\n        }\n    }\n\n    <!-- The next page arrow button. -->\n    @if (showArrowButtons) {\n        <li class=\"bb-pager-list-item\"\n            title=\"Next page\">\n            <button [disabled]=\"isNextDisabled$ | async\"\n                    (click)=\"goToNext()\"\n                    class=\"bb-pager-list-button\"\n                    type=\"button\">\n                <bb-icon src=\"material:keyboard_arrow_right\"></bb-icon>\n            </button>\n        </li>\n    }\n</ul>\n", styles: [".bb-table-pager{flex:1;display:flex;align-items:center;justify-content:flex-end}.bb-table-pager.disabled{opacity:.5;-webkit-user-select:none;user-select:none;pointer-events:none}.bb-pager-list{display:flex}.bb-pager-list-item{margin-left:.5rem}.bb-pager-list-button{padding:0;color:#3d464d;line-height:1;min-width:2rem;font-size:1rem;appearance:none;font-weight:500;min-height:2rem;-webkit-user-select:none;user-select:none;align-items:center;display:inline-flex;border-radius:.25rem;justify-content:center;border:1px solid #b6bbc1;transition-duration:.2s;background-color:transparent;transition-timing-function:cubic-bezier(0,0,.2,1);box-shadow:0 .375rem .375rem -.375rem #0000001a;transition-property:color,border-color,opacity,background-color}.bb-pager-list-button:hover,.bb-pager-list-button:focus{background-color:#0000000a}.bb-pager-list-button.active,.bb-pager-list-button.active:hover{color:#2196f3;cursor:default;border-color:#2196f3;background-color:transparent}.bb-pager-list-button:disabled{opacity:.35;cursor:default;pointer-events:none}\n"] }]
+                    ], imports: [AsyncPipe, BbIcon], template: "<ul class=\"bb-pager-list\">\n    <!-- The previous page arrow button. -->\n    @if (showArrowButtons) {\n        <li class=\"bb-pager-list-item\"\n            title=\"Previous page\">\n            <button [disabled]=\"isPreviousDisabled$ | async\"\n                    (click)=\"goToPrevious()\"\n                    class=\"bb-pager-list-button\"\n                    type=\"button\">\n                <bb-icon src=\"material:keyboard_arrow_left\"></bb-icon>\n            </button>\n        </li>\n    }\n\n    <!-- The list of number buttons to navigate through the list. -->\n    @if (list$ | async; as list) {\n        @for (item of list; track $index) {\n            <li [title]=\"'Page ' + item?.page\"\n                class=\"bb-pager-list-item\">\n                <button (click)=\"goToIndex(item?.page)\"\n                        [class.active]=\"item?.active\"\n                        class=\"bb-pager-list-button\"\n                        type=\"button\">\n                    {{ item?.page }}\n                </button>\n            </li>\n        }\n    }\n\n    <!-- The next page arrow button. -->\n    @if (showArrowButtons) {\n        <li class=\"bb-pager-list-item\"\n            title=\"Next page\">\n            <button [disabled]=\"isNextDisabled$ | async\"\n                    (click)=\"goToNext()\"\n                    class=\"bb-pager-list-button\"\n                    type=\"button\">\n                <bb-icon src=\"material:keyboard_arrow_right\"></bb-icon>\n            </button>\n        </li>\n    }\n</ul>\n", styles: [".bb-table-pager{flex:1;display:flex;align-items:center;justify-content:flex-end}.bb-table-pager.disabled{opacity:.5;-webkit-user-select:none;user-select:none;pointer-events:none}.bb-pager-list{display:flex}.bb-pager-list-item{margin-left:.5rem}.bb-pager-list-button{padding:0;color:#3d464d;line-height:1;min-width:2rem;font-size:1rem;appearance:none;font-weight:500;min-height:2rem;-webkit-user-select:none;user-select:none;align-items:center;display:inline-flex;border-radius:.25rem;justify-content:center;border:1px solid #b6bbc1;transition-duration:.2s;background-color:transparent;transition-timing-function:cubic-bezier(0,0,.2,1);box-shadow:0 .375rem .375rem -.375rem #0000001a;transition-property:color,border-color,opacity,background-color}.bb-pager-list-button:hover,.bb-pager-list-button:focus{background-color:#0000000a}.bb-pager-list-button.active,.bb-pager-list-button.active:hover{color:#2196f3;cursor:default;border-color:#2196f3;background-color:transparent}.bb-pager-list-button:disabled{opacity:.35;cursor:default;pointer-events:none}\n"] }]
         }], propDecorators: { amountOfButtons: [{
                 type: Input
             }], showArrowButtons: [{
@@ -248,25 +248,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
             }] } });
 
 class BbTableColumnDef {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbTableColumnDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: BbTableColumnDef, isStandalone: true, selector: "[bbTableColumnDef]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: BbTableColumnDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: BbTableColumnDef, isStandalone: true, selector: "ng-template[bbTableColumnDef]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbTableColumnDef, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: BbTableColumnDef, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[bbTableColumnDef]',
-                    standalone: true
+                    selector: 'ng-template[bbTableColumnDef]'
                 }]
         }] });
 class BbTableRowDef {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbTableRowDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: BbTableRowDef, isStandalone: true, selector: "[bbTableRowDef]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: BbTableRowDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: BbTableRowDef, isStandalone: true, selector: "ng-template[bbTableRowDef]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbTableRowDef, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: BbTableRowDef, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[bbTableRowDef]',
-                    standalone: true
+                    selector: 'ng-template[bbTableRowDef]'
                 }]
         }] });
 class BbTable {
@@ -408,12 +406,12 @@ class BbTable {
     getFormChanges() {
         return merge(this.form.valueChanges, defer(() => of(this.form?.value)));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: BbTable, isStandalone: true, selector: "bb-table", inputs: { identifier: "identifier", dataSource: "dataSource", queryFields: "queryFields", sortingStrategy: "sortingStrategy", header: "header", footer: "footer", sizes: "sizes" }, host: { classAttribute: "bb-table" }, queries: [{ propertyName: "tableRowTemplate", first: true, predicate: BbTableRowDef, descendants: true, read: TemplateRef }, { propertyName: "tableColumnTemplates", predicate: BbTableColumnDef, read: TemplateRef }], ngImport: i0, template: "<!--\n    This is the header of the table. It can be a user\n    defined custom header or just the default header.\n-->\n\n@if ((header === true ? headerTemplate : header); as template) {\n    <header class=\"bb-table-top-actions\">\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n    </header>\n}\n\n<!--\n    This is the table that contains the\n    rows and columns.\n-->\n\n<div class=\"bb-table-wrapper\">\n    @if (isLoading$ | async) {\n        <div class=\"bb-table-progress\">\n            <div class=\"bb-table-indeterminate\"></div>\n        </div>\n    }\n    <table class=\"bb-table-container\">\n        <thead>\n            <tr>\n                <ng-content select=\"bb-table-header-cell\"></ng-content>\n            </tr>\n        </thead>\n        <tbody>\n            @if (data$ | async; as data) {\n                @switch (data?.state) {\n                    @case ('success') {\n                        @if (!!tableRowTemplate) {\n                            <ng-container\n                                *ngTemplateOutlet=\"tableRowTemplate; context: {data: data?.result?.data ?? []}\"></ng-container>\n                        } @else {\n                            @for (item of data?.result?.data; track (identifier ? item[identifier] : $index)) {\n                                <tr>\n                                    @for (template of tableColumnTemplates; track $index) {\n                                        <ng-container\n                                            *ngTemplateOutlet=\"template; context: {item: item}\"></ng-container>\n                                    }\n                                </tr>\n                            }\n                        }\n                    }\n                    @case ('empty') {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                    @case ('error_datasource') {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                    @case ('error_not_found') {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                    @case ('error_server') {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                    @case ('error_down') {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                    @default {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                }\n\n            } @else {\n                <tr>\n                    <td [attr.colspan]=\"headerCount\"\n                        class=\"bb-table-template\">\n                        <div class=\"bb-table-template-content\">\n                            {{ 'tables.loading' | bbLocalize }}\n                        </div>\n                    </td>\n                </tr>\n            }\n        </tbody>\n    </table>\n</div>\n\n@if ((footer === true ? footerTemplate : footer); as template) {\n    <footer class=\"bb-table-bottom-actions\">\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n    </footer>\n}\n\n<!--\n    This is the template that will be used when the user has not\n    supplied a custom header template.\n-->\n\n<ng-template #headerTemplate>\n    <ng-content></ng-content>\n    <bb-form-control>\n        <input [formControl]=\"queryControl\"\n               [placeholder]=\"'tables.search' | bbLocalize\"\n               bbInput\n               autocomplete=\"off\">\n        @if (queryControl?.value?.length <= 0) {\n            <bb-icon bbSuffix\n                     src=\"material:search\">\n            </bb-icon>\n        } @else {\n            <button (click)=\"queryControl?.patchValue('')\"\n                    bbSuffix\n                    type=\"button\"\n                    class=\"bb-table-progress-close-query\">\n                <bb-icon src=\"material:close\"></bb-icon>\n            </button>\n        }\n    </bb-form-control>\n</ng-template>\n\n<!--\n    This is the template that will be used when the user has not\n    supplied a custom footer template.\n-->\n\n<ng-template #footerTemplate>\n    @if (sizes?.length > 1) {\n        <bb-form-control>\n            <select [formControl]=\"pageSizeControl\"\n                    bbInput\n                    title=\"Sizes\">\n                @for (item of sizes; track item) {\n                    <option [ngValue]=\"item\">\n                        {{ item }} / {{ 'tables.page' | bbLocalize }}\n                    </option>\n                }\n            </select>\n        </bb-form-control>\n    }\n\n    <bb-table-pager [totalPages]=\"(data$ | async)?.result?.totalPages\"\n                    [formControl]=\"pageNumberControl\">\n    </bb-table-pager>\n</ng-template>\n\n<ng-template #errorTemplate\n             let-state=\"state\"\n             let-status=\"statusCode\">\n    <tr>\n        <td [attr.colspan]=\"headerCount\"\n            class=\"bb-table-template\">\n            <div class=\"bb-table-template-content\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\"\n                     viewBox=\"0 0 64 41\"\n                     width=\"4rem\"\n                     height=\"2.5625rem\">\n                    <g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(0 1)\">\n                        <ellipse cx=\"32\" cy=\"33\" fill=\"#F5F5F5\" rx=\"32\" ry=\"7\"></ellipse>\n                        <g fill-rule=\"nonzero\" stroke=\"#D9D9D9\">\n                            <path\n                                d=\"M55 12.7605604L44.8543047 1.25739633C44.3674414.47382661 43.6558789 0 42.9067617 0H21.0932383c-.7491172 0-1.4606797.47395025-1.947543 1.25739633L9 12.7605604V22h46v-9.2394396z\"></path>\n                            <path fill=\"#FAFAFA\"\n                                  d=\"M41.6132813 15.9315c0-1.6056489.9936718-2.931266 2.2264179-2.9315H55v18.1371277C55 33.2589574 53.6793867 35 52.0504297 35H11.94957031C10.32052344 35 9 33.2588404 9 31.1371277V13h11.1603008c1.2327461 0 2.226418 1.3228085 2.226418 2.9284574v.0211809c0 1.6056489 1.0049921 2.9015426 2.2377382 2.9015426h14.751086c1.2327461 0 2.2377383-1.3078298 2.2377383-2.9134788V15.9315z\"></path>\n                        </g>\n                    </g>\n                </svg>\n                @if (state; as stateLabel) {\n                    <span>{{ ('tables.' + stateLabel) | bbLocalize }}</span>\n                }\n                @if (status; as statusCode) {\n                    <span class=\"bb-table-template-content-code\">(HTTP {{ statusCode }})</span>\n                }\n            </div>\n        </td>\n    </tr>\n</ng-template>\n", styles: [".bb-table{width:100%;display:block;box-shadow:0 .375rem .375rem -.375rem #0000001a}.bb-table.plain{box-shadow:none}.bb-table.plain>.bb-table-wrapper{border-top-left-radius:0;border-top-right-radius:0}.bb-table-wrapper{overflow-x:auto;position:relative;background-color:#fff;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.bb-table-container{width:100%}.bb-table-container td{border-bottom:1px solid #d8d8d8}.bb-table-top-actions{display:flex;flex-wrap:wrap;flex-direction:column;background-color:#fff;justify-content:flex-end;padding:1.5rem 1.5rem .75rem;border-top-left-radius:.25rem;border-bottom:1px solid #d8d8d8;border-top-right-radius:.25rem}.bb-table-top-actions>*{margin-left:0;margin-bottom:.75rem}.bb-table-top-actions+.bb-table-wrapper{border-radius:0}.bb-table-bottom-actions{height:4rem;display:flex;overflow-x:auto;padding:0 1.5rem;align-items:center;background-color:#fff;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.bb-table-template{border:none;background-color:#f5f5f5;border-bottom:1px solid #d8d8d8}.bb-table-template-content{display:flex;color:#3d464d;padding:1.5rem;line-height:1.2;font-weight:400;text-align:center;font-size:.875rem;min-height:8.75rem;align-items:center;flex-direction:column;justify-content:center}.bb-table-template-content>svg{margin-bottom:.75rem}.bb-table-template-content-code{opacity:.5;margin-top:.25rem;display:inline-block}.bb-table-progress{top:0;left:0;right:0;opacity:0;width:100%;display:block;height:.25rem;overflow:hidden;position:absolute;background-color:#2f408b4d;animation:fadeIn .25s cubic-bezier(0,0,.2,1) .1s forwards}.bb-table-progress .bb-table-indeterminate{background-color:#2f408b}.bb-table-progress .bb-table-indeterminate:before{top:0;left:0;bottom:0;content:\"\";position:absolute;will-change:left,right;background-color:inherit;animation:indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite}.bb-table-progress .bb-table-indeterminate:after{top:0;left:0;bottom:0;content:\"\";position:absolute;animation-delay:1.15s;will-change:left,right;background-color:inherit;animation:indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite}.bb-table-progress-close-query{padding:0;border:none;border-radius:.25rem;background-color:transparent;transition:background-color .25s cubic-bezier(0,0,.2,1)}.bb-table-progress-close-query:hover{background-color:#00000014}.bb-table-progress-close-query:focus{background-color:#0000001f}.bb-table-progress-close-query:active{background-color:#00000029}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}@media only screen and (min-width: 768px){.bb-table-top-actions{flex-direction:row}.bb-table-top-actions>*:not(:first-child){margin-left:.75rem;margin-bottom:.75rem}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: BbLocalize, name: "bbLocalize" }, { kind: "component", type: BbFormControl, selector: "bb-form-control", inputs: ["label", "hint", "grouped", "hideErrors"] }, { kind: "directive", type: BbInput, selector: "input[bbInput],textarea[bbInput],select[bbInput]", inputs: ["required"] }, { kind: "component", type: BbIcon, selector: "bb-icon", inputs: ["alt", "size", "ariaHidden", "unit", "src"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: BbSuffix, selector: "[bbSuffix]" }, { kind: "component", type: BbTablePager, selector: "bb-table-pager", inputs: ["amountOfButtons", "showArrowButtons", "disabled", "pageNumber", "totalPages"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: BbTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: BbTable, isStandalone: true, selector: "bb-table", inputs: { identifier: "identifier", dataSource: "dataSource", queryFields: "queryFields", sortingStrategy: "sortingStrategy", header: "header", footer: "footer", sizes: "sizes" }, host: { classAttribute: "bb-table" }, queries: [{ propertyName: "tableRowTemplate", first: true, predicate: BbTableRowDef, descendants: true, read: TemplateRef }, { propertyName: "tableColumnTemplates", predicate: BbTableColumnDef, read: TemplateRef }], ngImport: i0, template: "<!--\n    This is the header of the table. It can be a user\n    defined custom header or just the default header.\n-->\n\n@if ((header === true ? headerTemplate : header); as template) {\n    <header class=\"bb-table-top-actions\">\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n    </header>\n}\n\n<!--\n    This is the table that contains the\n    rows and columns.\n-->\n\n<div class=\"bb-table-wrapper\">\n    @if (isLoading$ | async) {\n        <div class=\"bb-table-progress\">\n            <div class=\"bb-table-indeterminate\"></div>\n        </div>\n    }\n    <table class=\"bb-table-container\">\n        <thead>\n            <tr>\n                <ng-content select=\"bb-table-header-cell\"></ng-content>\n            </tr>\n        </thead>\n        <tbody>\n            @if (data$ | async; as data) {\n                @switch (data?.state) {\n                    @case ('success') {\n                        @if (!!tableRowTemplate) {\n                            <ng-container\n                                *ngTemplateOutlet=\"tableRowTemplate; context: {data: data?.result?.data ?? []}\"></ng-container>\n                        } @else {\n                            @for (item of data?.result?.data; track (identifier ? item[identifier] : $index)) {\n                                <tr>\n                                    @for (template of tableColumnTemplates; track $index) {\n                                        <ng-container\n                                            *ngTemplateOutlet=\"template; context: {item: item}\"></ng-container>\n                                    }\n                                </tr>\n                            }\n                        }\n                    }\n                    @case ('empty') {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                    @case ('error_datasource') {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                    @case ('error_not_found') {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                    @case ('error_server') {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                    @case ('error_down') {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                    @default {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                }\n\n            } @else {\n                <tr>\n                    <td [attr.colspan]=\"headerCount\"\n                        class=\"bb-table-template\">\n                        <div class=\"bb-table-template-content\">\n                            {{ 'tables.loading' | bbLocalize }}\n                        </div>\n                    </td>\n                </tr>\n            }\n        </tbody>\n    </table>\n</div>\n\n@if ((footer === true ? footerTemplate : footer); as template) {\n    <footer class=\"bb-table-bottom-actions\">\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n    </footer>\n}\n\n<!--\n    This is the template that will be used when the user has not\n    supplied a custom header template.\n-->\n\n<ng-template #headerTemplate>\n    <ng-content></ng-content>\n    <bb-form-control>\n        <input [formControl]=\"queryControl\"\n               [placeholder]=\"'tables.search' | bbLocalize\"\n               bbInput\n               autocomplete=\"off\">\n        @if (queryControl?.value?.length <= 0) {\n            <bb-icon bbSuffix\n                     src=\"material:search\">\n            </bb-icon>\n        } @else {\n            <button (click)=\"queryControl?.patchValue('')\"\n                    bbSuffix\n                    type=\"button\"\n                    class=\"bb-table-progress-close-query\">\n                <bb-icon src=\"material:close\"></bb-icon>\n            </button>\n        }\n    </bb-form-control>\n</ng-template>\n\n<!--\n    This is the template that will be used when the user has not\n    supplied a custom footer template.\n-->\n\n<ng-template #footerTemplate>\n    @if (sizes?.length > 1) {\n        <bb-form-control>\n            <select [formControl]=\"pageSizeControl\"\n                    bbInput\n                    title=\"Sizes\">\n                @for (item of sizes; track item) {\n                    <option [ngValue]=\"item\">\n                        {{ item }} / {{ 'tables.page' | bbLocalize }}\n                    </option>\n                }\n            </select>\n        </bb-form-control>\n    }\n\n    <bb-table-pager [totalPages]=\"(data$ | async)?.result?.totalPages\"\n                    [formControl]=\"pageNumberControl\">\n    </bb-table-pager>\n</ng-template>\n\n<ng-template #errorTemplate\n             let-state=\"state\"\n             let-status=\"statusCode\">\n    <tr>\n        <td [attr.colspan]=\"headerCount\"\n            class=\"bb-table-template\">\n            <div class=\"bb-table-template-content\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\"\n                     viewBox=\"0 0 64 41\"\n                     width=\"4rem\"\n                     height=\"2.5625rem\">\n                    <g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(0 1)\">\n                        <ellipse cx=\"32\" cy=\"33\" fill=\"#F5F5F5\" rx=\"32\" ry=\"7\"></ellipse>\n                        <g fill-rule=\"nonzero\" stroke=\"#D9D9D9\">\n                            <path\n                                d=\"M55 12.7605604L44.8543047 1.25739633C44.3674414.47382661 43.6558789 0 42.9067617 0H21.0932383c-.7491172 0-1.4606797.47395025-1.947543 1.25739633L9 12.7605604V22h46v-9.2394396z\"></path>\n                            <path fill=\"#FAFAFA\"\n                                  d=\"M41.6132813 15.9315c0-1.6056489.9936718-2.931266 2.2264179-2.9315H55v18.1371277C55 33.2589574 53.6793867 35 52.0504297 35H11.94957031C10.32052344 35 9 33.2588404 9 31.1371277V13h11.1603008c1.2327461 0 2.226418 1.3228085 2.226418 2.9284574v.0211809c0 1.6056489 1.0049921 2.9015426 2.2377382 2.9015426h14.751086c1.2327461 0 2.2377383-1.3078298 2.2377383-2.9134788V15.9315z\"></path>\n                        </g>\n                    </g>\n                </svg>\n                @if (state; as stateLabel) {\n                    <span>{{ ('tables.' + stateLabel) | bbLocalize }}</span>\n                }\n                @if (status; as statusCode) {\n                    <span class=\"bb-table-template-content-code\">(HTTP {{ statusCode }})</span>\n                }\n            </div>\n        </td>\n    </tr>\n</ng-template>\n", styles: [".bb-table{width:100%;display:block;box-shadow:0 .375rem .375rem -.375rem #0000001a}.bb-table.plain{box-shadow:none}.bb-table.plain>.bb-table-wrapper{border-top-left-radius:0;border-top-right-radius:0}.bb-table-wrapper{overflow-x:auto;position:relative;background-color:#fff;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.bb-table-container{width:100%}.bb-table-container td{border-bottom:1px solid #d8d8d8}.bb-table-top-actions{display:flex;flex-wrap:wrap;flex-direction:column;background-color:#fff;justify-content:flex-end;padding:1.5rem 1.5rem .75rem;border-top-left-radius:.25rem;border-bottom:1px solid #d8d8d8;border-top-right-radius:.25rem}.bb-table-top-actions>*{margin-left:0;margin-bottom:.75rem}.bb-table-top-actions+.bb-table-wrapper{border-radius:0}.bb-table-bottom-actions{height:4rem;display:flex;overflow-x:auto;padding:0 1.5rem;align-items:center;background-color:#fff;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.bb-table-template{border:none;background-color:#f5f5f5;border-bottom:1px solid #d8d8d8}.bb-table-template-content{display:flex;color:#3d464d;padding:1.5rem;line-height:1.2;font-weight:400;text-align:center;font-size:.875rem;min-height:8.75rem;align-items:center;flex-direction:column;justify-content:center}.bb-table-template-content>svg{margin-bottom:.75rem}.bb-table-template-content-code{opacity:.5;margin-top:.25rem;display:inline-block}.bb-table-progress{top:0;left:0;right:0;opacity:0;width:100%;display:block;height:.25rem;overflow:hidden;position:absolute;background-color:#2f408b4d;animation:fadeIn .25s cubic-bezier(0,0,.2,1) .1s forwards}.bb-table-progress .bb-table-indeterminate{background-color:#2f408b}.bb-table-progress .bb-table-indeterminate:before{top:0;left:0;bottom:0;content:\"\";position:absolute;will-change:left,right;background-color:inherit;animation:indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite}.bb-table-progress .bb-table-indeterminate:after{top:0;left:0;bottom:0;content:\"\";position:absolute;animation-delay:1.15s;will-change:left,right;background-color:inherit;animation:indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite}.bb-table-progress-close-query{padding:0;border:none;border-radius:.25rem;background-color:transparent;transition:background-color .25s cubic-bezier(0,0,.2,1)}.bb-table-progress-close-query:hover{background-color:#00000014}.bb-table-progress-close-query:focus{background-color:#0000001f}.bb-table-progress-close-query:active{background-color:#00000029}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}@media only screen and (min-width: 768px){.bb-table-top-actions{flex-direction:row}.bb-table-top-actions>*:not(:first-child){margin-left:.75rem;margin-bottom:.75rem}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: BbLocalize, name: "bbLocalize" }, { kind: "component", type: BbFormControl, selector: "bb-form-control", inputs: ["label", "hint", "grouped", "hideErrors"] }, { kind: "directive", type: BbInput, selector: "input[bbInput],textarea[bbInput],select[bbInput]", inputs: ["required"] }, { kind: "component", type: BbIcon, selector: "bb-icon", inputs: ["alt", "size", "ariaHidden", "unit", "src"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: BbSuffix, selector: "[bbSuffix]" }, { kind: "component", type: BbTablePager, selector: "bb-table-pager", inputs: ["amountOfButtons", "showArrowButtons", "disabled", "pageNumber", "totalPages"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: BbTable, decorators: [{
             type: Component,
-            args: [{ selector: 'bb-table', host: { 'class': 'bb-table' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, standalone: true, imports: [NgTemplateOutlet, AsyncPipe, BbLocalize, BbFormControl, BbInput, BbIcon, ReactiveFormsModule, BbSuffix, BbTablePager, BbLocalize], template: "<!--\n    This is the header of the table. It can be a user\n    defined custom header or just the default header.\n-->\n\n@if ((header === true ? headerTemplate : header); as template) {\n    <header class=\"bb-table-top-actions\">\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n    </header>\n}\n\n<!--\n    This is the table that contains the\n    rows and columns.\n-->\n\n<div class=\"bb-table-wrapper\">\n    @if (isLoading$ | async) {\n        <div class=\"bb-table-progress\">\n            <div class=\"bb-table-indeterminate\"></div>\n        </div>\n    }\n    <table class=\"bb-table-container\">\n        <thead>\n            <tr>\n                <ng-content select=\"bb-table-header-cell\"></ng-content>\n            </tr>\n        </thead>\n        <tbody>\n            @if (data$ | async; as data) {\n                @switch (data?.state) {\n                    @case ('success') {\n                        @if (!!tableRowTemplate) {\n                            <ng-container\n                                *ngTemplateOutlet=\"tableRowTemplate; context: {data: data?.result?.data ?? []}\"></ng-container>\n                        } @else {\n                            @for (item of data?.result?.data; track (identifier ? item[identifier] : $index)) {\n                                <tr>\n                                    @for (template of tableColumnTemplates; track $index) {\n                                        <ng-container\n                                            *ngTemplateOutlet=\"template; context: {item: item}\"></ng-container>\n                                    }\n                                </tr>\n                            }\n                        }\n                    }\n                    @case ('empty') {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                    @case ('error_datasource') {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                    @case ('error_not_found') {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                    @case ('error_server') {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                    @case ('error_down') {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                    @default {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                }\n\n            } @else {\n                <tr>\n                    <td [attr.colspan]=\"headerCount\"\n                        class=\"bb-table-template\">\n                        <div class=\"bb-table-template-content\">\n                            {{ 'tables.loading' | bbLocalize }}\n                        </div>\n                    </td>\n                </tr>\n            }\n        </tbody>\n    </table>\n</div>\n\n@if ((footer === true ? footerTemplate : footer); as template) {\n    <footer class=\"bb-table-bottom-actions\">\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n    </footer>\n}\n\n<!--\n    This is the template that will be used when the user has not\n    supplied a custom header template.\n-->\n\n<ng-template #headerTemplate>\n    <ng-content></ng-content>\n    <bb-form-control>\n        <input [formControl]=\"queryControl\"\n               [placeholder]=\"'tables.search' | bbLocalize\"\n               bbInput\n               autocomplete=\"off\">\n        @if (queryControl?.value?.length <= 0) {\n            <bb-icon bbSuffix\n                     src=\"material:search\">\n            </bb-icon>\n        } @else {\n            <button (click)=\"queryControl?.patchValue('')\"\n                    bbSuffix\n                    type=\"button\"\n                    class=\"bb-table-progress-close-query\">\n                <bb-icon src=\"material:close\"></bb-icon>\n            </button>\n        }\n    </bb-form-control>\n</ng-template>\n\n<!--\n    This is the template that will be used when the user has not\n    supplied a custom footer template.\n-->\n\n<ng-template #footerTemplate>\n    @if (sizes?.length > 1) {\n        <bb-form-control>\n            <select [formControl]=\"pageSizeControl\"\n                    bbInput\n                    title=\"Sizes\">\n                @for (item of sizes; track item) {\n                    <option [ngValue]=\"item\">\n                        {{ item }} / {{ 'tables.page' | bbLocalize }}\n                    </option>\n                }\n            </select>\n        </bb-form-control>\n    }\n\n    <bb-table-pager [totalPages]=\"(data$ | async)?.result?.totalPages\"\n                    [formControl]=\"pageNumberControl\">\n    </bb-table-pager>\n</ng-template>\n\n<ng-template #errorTemplate\n             let-state=\"state\"\n             let-status=\"statusCode\">\n    <tr>\n        <td [attr.colspan]=\"headerCount\"\n            class=\"bb-table-template\">\n            <div class=\"bb-table-template-content\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\"\n                     viewBox=\"0 0 64 41\"\n                     width=\"4rem\"\n                     height=\"2.5625rem\">\n                    <g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(0 1)\">\n                        <ellipse cx=\"32\" cy=\"33\" fill=\"#F5F5F5\" rx=\"32\" ry=\"7\"></ellipse>\n                        <g fill-rule=\"nonzero\" stroke=\"#D9D9D9\">\n                            <path\n                                d=\"M55 12.7605604L44.8543047 1.25739633C44.3674414.47382661 43.6558789 0 42.9067617 0H21.0932383c-.7491172 0-1.4606797.47395025-1.947543 1.25739633L9 12.7605604V22h46v-9.2394396z\"></path>\n                            <path fill=\"#FAFAFA\"\n                                  d=\"M41.6132813 15.9315c0-1.6056489.9936718-2.931266 2.2264179-2.9315H55v18.1371277C55 33.2589574 53.6793867 35 52.0504297 35H11.94957031C10.32052344 35 9 33.2588404 9 31.1371277V13h11.1603008c1.2327461 0 2.226418 1.3228085 2.226418 2.9284574v.0211809c0 1.6056489 1.0049921 2.9015426 2.2377382 2.9015426h14.751086c1.2327461 0 2.2377383-1.3078298 2.2377383-2.9134788V15.9315z\"></path>\n                        </g>\n                    </g>\n                </svg>\n                @if (state; as stateLabel) {\n                    <span>{{ ('tables.' + stateLabel) | bbLocalize }}</span>\n                }\n                @if (status; as statusCode) {\n                    <span class=\"bb-table-template-content-code\">(HTTP {{ statusCode }})</span>\n                }\n            </div>\n        </td>\n    </tr>\n</ng-template>\n", styles: [".bb-table{width:100%;display:block;box-shadow:0 .375rem .375rem -.375rem #0000001a}.bb-table.plain{box-shadow:none}.bb-table.plain>.bb-table-wrapper{border-top-left-radius:0;border-top-right-radius:0}.bb-table-wrapper{overflow-x:auto;position:relative;background-color:#fff;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.bb-table-container{width:100%}.bb-table-container td{border-bottom:1px solid #d8d8d8}.bb-table-top-actions{display:flex;flex-wrap:wrap;flex-direction:column;background-color:#fff;justify-content:flex-end;padding:1.5rem 1.5rem .75rem;border-top-left-radius:.25rem;border-bottom:1px solid #d8d8d8;border-top-right-radius:.25rem}.bb-table-top-actions>*{margin-left:0;margin-bottom:.75rem}.bb-table-top-actions+.bb-table-wrapper{border-radius:0}.bb-table-bottom-actions{height:4rem;display:flex;overflow-x:auto;padding:0 1.5rem;align-items:center;background-color:#fff;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.bb-table-template{border:none;background-color:#f5f5f5;border-bottom:1px solid #d8d8d8}.bb-table-template-content{display:flex;color:#3d464d;padding:1.5rem;line-height:1.2;font-weight:400;text-align:center;font-size:.875rem;min-height:8.75rem;align-items:center;flex-direction:column;justify-content:center}.bb-table-template-content>svg{margin-bottom:.75rem}.bb-table-template-content-code{opacity:.5;margin-top:.25rem;display:inline-block}.bb-table-progress{top:0;left:0;right:0;opacity:0;width:100%;display:block;height:.25rem;overflow:hidden;position:absolute;background-color:#2f408b4d;animation:fadeIn .25s cubic-bezier(0,0,.2,1) .1s forwards}.bb-table-progress .bb-table-indeterminate{background-color:#2f408b}.bb-table-progress .bb-table-indeterminate:before{top:0;left:0;bottom:0;content:\"\";position:absolute;will-change:left,right;background-color:inherit;animation:indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite}.bb-table-progress .bb-table-indeterminate:after{top:0;left:0;bottom:0;content:\"\";position:absolute;animation-delay:1.15s;will-change:left,right;background-color:inherit;animation:indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite}.bb-table-progress-close-query{padding:0;border:none;border-radius:.25rem;background-color:transparent;transition:background-color .25s cubic-bezier(0,0,.2,1)}.bb-table-progress-close-query:hover{background-color:#00000014}.bb-table-progress-close-query:focus{background-color:#0000001f}.bb-table-progress-close-query:active{background-color:#00000029}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}@media only screen and (min-width: 768px){.bb-table-top-actions{flex-direction:row}.bb-table-top-actions>*:not(:first-child){margin-left:.75rem;margin-bottom:.75rem}}\n"] }]
+            args: [{ selector: 'bb-table', host: { 'class': 'bb-table' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, AsyncPipe, BbLocalize, BbFormControl, BbInput, BbIcon, ReactiveFormsModule, BbSuffix, BbTablePager, BbLocalize], template: "<!--\n    This is the header of the table. It can be a user\n    defined custom header or just the default header.\n-->\n\n@if ((header === true ? headerTemplate : header); as template) {\n    <header class=\"bb-table-top-actions\">\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n    </header>\n}\n\n<!--\n    This is the table that contains the\n    rows and columns.\n-->\n\n<div class=\"bb-table-wrapper\">\n    @if (isLoading$ | async) {\n        <div class=\"bb-table-progress\">\n            <div class=\"bb-table-indeterminate\"></div>\n        </div>\n    }\n    <table class=\"bb-table-container\">\n        <thead>\n            <tr>\n                <ng-content select=\"bb-table-header-cell\"></ng-content>\n            </tr>\n        </thead>\n        <tbody>\n            @if (data$ | async; as data) {\n                @switch (data?.state) {\n                    @case ('success') {\n                        @if (!!tableRowTemplate) {\n                            <ng-container\n                                *ngTemplateOutlet=\"tableRowTemplate; context: {data: data?.result?.data ?? []}\"></ng-container>\n                        } @else {\n                            @for (item of data?.result?.data; track (identifier ? item[identifier] : $index)) {\n                                <tr>\n                                    @for (template of tableColumnTemplates; track $index) {\n                                        <ng-container\n                                            *ngTemplateOutlet=\"template; context: {item: item}\"></ng-container>\n                                    }\n                                </tr>\n                            }\n                        }\n                    }\n                    @case ('empty') {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                    @case ('error_datasource') {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                    @case ('error_not_found') {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                    @case ('error_server') {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                    @case ('error_down') {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                    @default {\n                        <ng-container *ngTemplateOutlet=\"errorTemplate; context: data\"></ng-container>\n                    }\n                }\n\n            } @else {\n                <tr>\n                    <td [attr.colspan]=\"headerCount\"\n                        class=\"bb-table-template\">\n                        <div class=\"bb-table-template-content\">\n                            {{ 'tables.loading' | bbLocalize }}\n                        </div>\n                    </td>\n                </tr>\n            }\n        </tbody>\n    </table>\n</div>\n\n@if ((footer === true ? footerTemplate : footer); as template) {\n    <footer class=\"bb-table-bottom-actions\">\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n    </footer>\n}\n\n<!--\n    This is the template that will be used when the user has not\n    supplied a custom header template.\n-->\n\n<ng-template #headerTemplate>\n    <ng-content></ng-content>\n    <bb-form-control>\n        <input [formControl]=\"queryControl\"\n               [placeholder]=\"'tables.search' | bbLocalize\"\n               bbInput\n               autocomplete=\"off\">\n        @if (queryControl?.value?.length <= 0) {\n            <bb-icon bbSuffix\n                     src=\"material:search\">\n            </bb-icon>\n        } @else {\n            <button (click)=\"queryControl?.patchValue('')\"\n                    bbSuffix\n                    type=\"button\"\n                    class=\"bb-table-progress-close-query\">\n                <bb-icon src=\"material:close\"></bb-icon>\n            </button>\n        }\n    </bb-form-control>\n</ng-template>\n\n<!--\n    This is the template that will be used when the user has not\n    supplied a custom footer template.\n-->\n\n<ng-template #footerTemplate>\n    @if (sizes?.length > 1) {\n        <bb-form-control>\n            <select [formControl]=\"pageSizeControl\"\n                    bbInput\n                    title=\"Sizes\">\n                @for (item of sizes; track item) {\n                    <option [ngValue]=\"item\">\n                        {{ item }} / {{ 'tables.page' | bbLocalize }}\n                    </option>\n                }\n            </select>\n        </bb-form-control>\n    }\n\n    <bb-table-pager [totalPages]=\"(data$ | async)?.result?.totalPages\"\n                    [formControl]=\"pageNumberControl\">\n    </bb-table-pager>\n</ng-template>\n\n<ng-template #errorTemplate\n             let-state=\"state\"\n             let-status=\"statusCode\">\n    <tr>\n        <td [attr.colspan]=\"headerCount\"\n            class=\"bb-table-template\">\n            <div class=\"bb-table-template-content\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\"\n                     viewBox=\"0 0 64 41\"\n                     width=\"4rem\"\n                     height=\"2.5625rem\">\n                    <g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(0 1)\">\n                        <ellipse cx=\"32\" cy=\"33\" fill=\"#F5F5F5\" rx=\"32\" ry=\"7\"></ellipse>\n                        <g fill-rule=\"nonzero\" stroke=\"#D9D9D9\">\n                            <path\n                                d=\"M55 12.7605604L44.8543047 1.25739633C44.3674414.47382661 43.6558789 0 42.9067617 0H21.0932383c-.7491172 0-1.4606797.47395025-1.947543 1.25739633L9 12.7605604V22h46v-9.2394396z\"></path>\n                            <path fill=\"#FAFAFA\"\n                                  d=\"M41.6132813 15.9315c0-1.6056489.9936718-2.931266 2.2264179-2.9315H55v18.1371277C55 33.2589574 53.6793867 35 52.0504297 35H11.94957031C10.32052344 35 9 33.2588404 9 31.1371277V13h11.1603008c1.2327461 0 2.226418 1.3228085 2.226418 2.9284574v.0211809c0 1.6056489 1.0049921 2.9015426 2.2377382 2.9015426h14.751086c1.2327461 0 2.2377383-1.3078298 2.2377383-2.9134788V15.9315z\"></path>\n                        </g>\n                    </g>\n                </svg>\n                @if (state; as stateLabel) {\n                    <span>{{ ('tables.' + stateLabel) | bbLocalize }}</span>\n                }\n                @if (status; as statusCode) {\n                    <span class=\"bb-table-template-content-code\">(HTTP {{ statusCode }})</span>\n                }\n            </div>\n        </td>\n    </tr>\n</ng-template>\n", styles: [".bb-table{width:100%;display:block;box-shadow:0 .375rem .375rem -.375rem #0000001a}.bb-table.plain{box-shadow:none}.bb-table.plain>.bb-table-wrapper{border-top-left-radius:0;border-top-right-radius:0}.bb-table-wrapper{overflow-x:auto;position:relative;background-color:#fff;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.bb-table-container{width:100%}.bb-table-container td{border-bottom:1px solid #d8d8d8}.bb-table-top-actions{display:flex;flex-wrap:wrap;flex-direction:column;background-color:#fff;justify-content:flex-end;padding:1.5rem 1.5rem .75rem;border-top-left-radius:.25rem;border-bottom:1px solid #d8d8d8;border-top-right-radius:.25rem}.bb-table-top-actions>*{margin-left:0;margin-bottom:.75rem}.bb-table-top-actions+.bb-table-wrapper{border-radius:0}.bb-table-bottom-actions{height:4rem;display:flex;overflow-x:auto;padding:0 1.5rem;align-items:center;background-color:#fff;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.bb-table-template{border:none;background-color:#f5f5f5;border-bottom:1px solid #d8d8d8}.bb-table-template-content{display:flex;color:#3d464d;padding:1.5rem;line-height:1.2;font-weight:400;text-align:center;font-size:.875rem;min-height:8.75rem;align-items:center;flex-direction:column;justify-content:center}.bb-table-template-content>svg{margin-bottom:.75rem}.bb-table-template-content-code{opacity:.5;margin-top:.25rem;display:inline-block}.bb-table-progress{top:0;left:0;right:0;opacity:0;width:100%;display:block;height:.25rem;overflow:hidden;position:absolute;background-color:#2f408b4d;animation:fadeIn .25s cubic-bezier(0,0,.2,1) .1s forwards}.bb-table-progress .bb-table-indeterminate{background-color:#2f408b}.bb-table-progress .bb-table-indeterminate:before{top:0;left:0;bottom:0;content:\"\";position:absolute;will-change:left,right;background-color:inherit;animation:indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite}.bb-table-progress .bb-table-indeterminate:after{top:0;left:0;bottom:0;content:\"\";position:absolute;animation-delay:1.15s;will-change:left,right;background-color:inherit;animation:indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite}.bb-table-progress-close-query{padding:0;border:none;border-radius:.25rem;background-color:transparent;transition:background-color .25s cubic-bezier(0,0,.2,1)}.bb-table-progress-close-query:hover{background-color:#00000014}.bb-table-progress-close-query:focus{background-color:#0000001f}.bb-table-progress-close-query:active{background-color:#00000029}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}@media only screen and (min-width: 768px){.bb-table-top-actions{flex-direction:row}.bb-table-top-actions>*:not(:first-child){margin-left:.75rem;margin-bottom:.75rem}}\n"] }]
         }], propDecorators: { tableColumnTemplates: [{
                 type: ContentChildren,
                 args: [BbTableColumnDef, { read: TemplateRef }]
@@ -437,12 +435,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
             }] } });
 
 class BbTableCell {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbTableCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: BbTableCell, isStandalone: true, selector: "bb-table-cell", host: { classAttribute: "bb-table-cell" }, ngImport: i0, template: "<div>\n    <ng-content></ng-content>\n</div>", styles: [".bb-table-cell{color:#848f99;text-align:left;line-height:1.2;font-weight:400;display:table-cell;font-size:.875rem;word-wrap:break-word;vertical-align:middle;padding:.75rem 1.5rem;background-color:#f5f5f5;border-bottom:1px solid #d8d8d8}.bb-table-cell:not(:last-child){border-right:1px solid #d8d8d8}.bb-table-cell.fit{width:1%;white-space:nowrap}.bb-table-cell.left{text-align:left}.bb-table-cell.center{text-align:center}.bb-table-cell.right{text-align:right}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: BbTableCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0", type: BbTableCell, isStandalone: true, selector: "bb-table-cell", host: { classAttribute: "bb-table-cell" }, ngImport: i0, template: "<div>\n    <ng-content></ng-content>\n</div>", styles: [".bb-table-cell{color:#848f99;text-align:left;line-height:1.2;font-weight:400;display:table-cell;font-size:.875rem;word-wrap:break-word;vertical-align:middle;padding:.75rem 1.5rem;background-color:#f5f5f5;border-bottom:1px solid #d8d8d8}.bb-table-cell:not(:last-child){border-right:1px solid #d8d8d8}.bb-table-cell.fit{width:1%;white-space:nowrap}.bb-table-cell.left{text-align:left}.bb-table-cell.center{text-align:center}.bb-table-cell.right{text-align:right}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbTableCell, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: BbTableCell, decorators: [{
             type: Component,
-            args: [{ selector: 'bb-table-cell', changeDetection: ChangeDetectionStrategy.OnPush, host: { 'class': 'bb-table-cell' }, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, standalone: true, template: "<div>\n    <ng-content></ng-content>\n</div>", styles: [".bb-table-cell{color:#848f99;text-align:left;line-height:1.2;font-weight:400;display:table-cell;font-size:.875rem;word-wrap:break-word;vertical-align:middle;padding:.75rem 1.5rem;background-color:#f5f5f5;border-bottom:1px solid #d8d8d8}.bb-table-cell:not(:last-child){border-right:1px solid #d8d8d8}.bb-table-cell.fit{width:1%;white-space:nowrap}.bb-table-cell.left{text-align:left}.bb-table-cell.center{text-align:center}.bb-table-cell.right{text-align:right}\n"] }]
+            args: [{ selector: 'bb-table-cell', changeDetection: ChangeDetectionStrategy.OnPush, host: { 'class': 'bb-table-cell' }, encapsulation: ViewEncapsulation.None, template: "<div>\n    <ng-content></ng-content>\n</div>", styles: [".bb-table-cell{color:#848f99;text-align:left;line-height:1.2;font-weight:400;display:table-cell;font-size:.875rem;word-wrap:break-word;vertical-align:middle;padding:.75rem 1.5rem;background-color:#f5f5f5;border-bottom:1px solid #d8d8d8}.bb-table-cell:not(:last-child){border-right:1px solid #d8d8d8}.bb-table-cell.fit{width:1%;white-space:nowrap}.bb-table-cell.left{text-align:left}.bb-table-cell.center{text-align:center}.bb-table-cell.right{text-align:right}\n"] }]
         }] });
 
 class BbTableHeaderCell {
@@ -546,15 +544,15 @@ class BbTableHeaderCell {
     logWarning = (message) => {
         console && console.warn && console.warn(message);
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbTableHeaderCell, deps: [{ token: BbTable, host: true, optional: true }, { token: 'name', attribute: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: BbTableHeaderCell, isStandalone: true, selector: "bb-table-header-cell", inputs: { disabled: ["disabled", "disabled", booleanAttribute], sort: "sort" }, host: { listeners: { "click": "onClick()" }, properties: { "class.disabled": "isDisabled" }, classAttribute: "bb-table-header-cell" }, ngImport: i0, template: "<!-- The content. -->\n<ng-content></ng-content>\n\n<!-- The indicator for the sort direction. -->\n@if (valueChanges$ | async; as value) {\n    @if (!isDisabled) {\n        <button [class.asc]=\"value === 'asc'\"\n                [class.desc]=\"value === 'desc'\"\n                class=\"bb-table-header-cell-toggle\"\n                type=\"button\"></button>\n    }\n}\n", styles: [".bb-table-header-cell{height:3rem;color:#212529;cursor:pointer;font-size:1rem;font-weight:500;-webkit-user-select:none;user-select:none;position:relative;display:table-cell;vertical-align:middle;padding:.75rem 1.5rem;border-bottom:1px solid #d8d8d8}.bb-table-header-cell:active>.bb-table-header-cell-toggle{background-color:#00000014}.bb-table-header-cell:not(.disabled){padding-right:3.25rem}.bb-table-header-cell.fit{width:1%;white-space:nowrap}.bb-table-header-cell.left{text-align:left}.bb-table-header-cell.center{text-align:center}.bb-table-header-cell.right{text-align:right}.bb-table-header-cell.disabled{cursor:default;pointer-events:none}.bb-table-header-cell-toggle{top:50%;right:1rem;border:none;width:1.5rem;height:1.5rem;margin-left:auto;position:absolute;border-radius:.25rem;transform:translateY(-50%);background-position:center;background-repeat:no-repeat;background-color:transparent;transition:background-color .2s cubic-bezier(0,0,.2,1);background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 9 15\" width=\"9\" height=\"15\"%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 0L0 7h9z\"%3E%3C/path%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 15L9 8H0z\"%3E%3C/path%3E%3C/svg%3E')}.bb-table-header-cell-toggle.desc{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 9 15\" width=\"9\" height=\"15\"%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 0L0 7h9z\"%3E%3C/path%3E%3Cpath fill=\"black\" d=\"M4.5 15L9 8H0z\"%3E%3C/path%3E%3C/svg%3E')}.bb-table-header-cell-toggle.asc{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 9 15\" width=\"9\" height=\"15\"%3E%3Cpath fill=\"black\" d=\"M4.5 0L0 7h9z\"%3E%3C/path%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 15L9 8H0z\"%3E%3C/path%3E%3C/svg%3E')}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: BbTableHeaderCell, deps: [{ token: BbTable, host: true, optional: true }, { token: 'name', attribute: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: BbTableHeaderCell, isStandalone: true, selector: "bb-table-header-cell", inputs: { disabled: ["disabled", "disabled", booleanAttribute], sort: "sort" }, host: { listeners: { "click": "onClick()" }, properties: { "class.disabled": "isDisabled" }, classAttribute: "bb-table-header-cell" }, ngImport: i0, template: "<!-- The content. -->\n<ng-content></ng-content>\n\n<!-- The indicator for the sort direction. -->\n@if (valueChanges$ | async; as value) {\n    @if (!isDisabled) {\n        <button [class.asc]=\"value === 'asc'\"\n                [class.desc]=\"value === 'desc'\"\n                class=\"bb-table-header-cell-toggle\"\n                type=\"button\"></button>\n    }\n}\n", styles: [".bb-table-header-cell{height:3rem;color:#212529;cursor:pointer;font-size:1rem;font-weight:500;-webkit-user-select:none;user-select:none;position:relative;display:table-cell;vertical-align:middle;padding:.75rem 1.5rem;border-bottom:1px solid #d8d8d8}.bb-table-header-cell:active>.bb-table-header-cell-toggle{background-color:#00000014}.bb-table-header-cell:not(.disabled){padding-right:3.25rem}.bb-table-header-cell.fit{width:1%;white-space:nowrap}.bb-table-header-cell.left{text-align:left}.bb-table-header-cell.center{text-align:center}.bb-table-header-cell.right{text-align:right}.bb-table-header-cell.disabled{cursor:default;pointer-events:none}.bb-table-header-cell-toggle{top:50%;right:1rem;border:none;width:1.5rem;height:1.5rem;margin-left:auto;position:absolute;border-radius:.25rem;transform:translateY(-50%);background-position:center;background-repeat:no-repeat;background-color:transparent;transition:background-color .2s cubic-bezier(0,0,.2,1);background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 9 15\" width=\"9\" height=\"15\"%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 0L0 7h9z\"%3E%3C/path%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 15L9 8H0z\"%3E%3C/path%3E%3C/svg%3E')}.bb-table-header-cell-toggle.desc{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 9 15\" width=\"9\" height=\"15\"%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 0L0 7h9z\"%3E%3C/path%3E%3Cpath fill=\"black\" d=\"M4.5 15L9 8H0z\"%3E%3C/path%3E%3C/svg%3E')}.bb-table-header-cell-toggle.asc{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 9 15\" width=\"9\" height=\"15\"%3E%3Cpath fill=\"black\" d=\"M4.5 0L0 7h9z\"%3E%3C/path%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 15L9 8H0z\"%3E%3C/path%3E%3C/svg%3E')}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbTableHeaderCell, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: BbTableHeaderCell, decorators: [{
             type: Component,
             args: [{ selector: 'bb-table-header-cell', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'bb-table-header-cell',
                         '[class.disabled]': 'isDisabled'
-                    }, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, standalone: true, imports: [AsyncPipe], template: "<!-- The content. -->\n<ng-content></ng-content>\n\n<!-- The indicator for the sort direction. -->\n@if (valueChanges$ | async; as value) {\n    @if (!isDisabled) {\n        <button [class.asc]=\"value === 'asc'\"\n                [class.desc]=\"value === 'desc'\"\n                class=\"bb-table-header-cell-toggle\"\n                type=\"button\"></button>\n    }\n}\n", styles: [".bb-table-header-cell{height:3rem;color:#212529;cursor:pointer;font-size:1rem;font-weight:500;-webkit-user-select:none;user-select:none;position:relative;display:table-cell;vertical-align:middle;padding:.75rem 1.5rem;border-bottom:1px solid #d8d8d8}.bb-table-header-cell:active>.bb-table-header-cell-toggle{background-color:#00000014}.bb-table-header-cell:not(.disabled){padding-right:3.25rem}.bb-table-header-cell.fit{width:1%;white-space:nowrap}.bb-table-header-cell.left{text-align:left}.bb-table-header-cell.center{text-align:center}.bb-table-header-cell.right{text-align:right}.bb-table-header-cell.disabled{cursor:default;pointer-events:none}.bb-table-header-cell-toggle{top:50%;right:1rem;border:none;width:1.5rem;height:1.5rem;margin-left:auto;position:absolute;border-radius:.25rem;transform:translateY(-50%);background-position:center;background-repeat:no-repeat;background-color:transparent;transition:background-color .2s cubic-bezier(0,0,.2,1);background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 9 15\" width=\"9\" height=\"15\"%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 0L0 7h9z\"%3E%3C/path%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 15L9 8H0z\"%3E%3C/path%3E%3C/svg%3E')}.bb-table-header-cell-toggle.desc{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 9 15\" width=\"9\" height=\"15\"%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 0L0 7h9z\"%3E%3C/path%3E%3Cpath fill=\"black\" d=\"M4.5 15L9 8H0z\"%3E%3C/path%3E%3C/svg%3E')}.bb-table-header-cell-toggle.asc{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 9 15\" width=\"9\" height=\"15\"%3E%3Cpath fill=\"black\" d=\"M4.5 0L0 7h9z\"%3E%3C/path%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 15L9 8H0z\"%3E%3C/path%3E%3C/svg%3E')}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, imports: [AsyncPipe], template: "<!-- The content. -->\n<ng-content></ng-content>\n\n<!-- The indicator for the sort direction. -->\n@if (valueChanges$ | async; as value) {\n    @if (!isDisabled) {\n        <button [class.asc]=\"value === 'asc'\"\n                [class.desc]=\"value === 'desc'\"\n                class=\"bb-table-header-cell-toggle\"\n                type=\"button\"></button>\n    }\n}\n", styles: [".bb-table-header-cell{height:3rem;color:#212529;cursor:pointer;font-size:1rem;font-weight:500;-webkit-user-select:none;user-select:none;position:relative;display:table-cell;vertical-align:middle;padding:.75rem 1.5rem;border-bottom:1px solid #d8d8d8}.bb-table-header-cell:active>.bb-table-header-cell-toggle{background-color:#00000014}.bb-table-header-cell:not(.disabled){padding-right:3.25rem}.bb-table-header-cell.fit{width:1%;white-space:nowrap}.bb-table-header-cell.left{text-align:left}.bb-table-header-cell.center{text-align:center}.bb-table-header-cell.right{text-align:right}.bb-table-header-cell.disabled{cursor:default;pointer-events:none}.bb-table-header-cell-toggle{top:50%;right:1rem;border:none;width:1.5rem;height:1.5rem;margin-left:auto;position:absolute;border-radius:.25rem;transform:translateY(-50%);background-position:center;background-repeat:no-repeat;background-color:transparent;transition:background-color .2s cubic-bezier(0,0,.2,1);background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 9 15\" width=\"9\" height=\"15\"%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 0L0 7h9z\"%3E%3C/path%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 15L9 8H0z\"%3E%3C/path%3E%3C/svg%3E')}.bb-table-header-cell-toggle.desc{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 9 15\" width=\"9\" height=\"15\"%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 0L0 7h9z\"%3E%3C/path%3E%3Cpath fill=\"black\" d=\"M4.5 15L9 8H0z\"%3E%3C/path%3E%3C/svg%3E')}.bb-table-header-cell-toggle.asc{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 9 15\" width=\"9\" height=\"15\"%3E%3Cpath fill=\"black\" d=\"M4.5 0L0 7h9z\"%3E%3C/path%3E%3Cpath fill=\"%23dcdcdc\" d=\"M4.5 15L9 8H0z\"%3E%3C/path%3E%3C/svg%3E')}\n"] }]
         }], ctorParameters: () => [{ type: BbTable, decorators: [{
                     type: Optional
                 }, {
@@ -575,8 +573,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
             }] } });
 
 class TableModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: TableModule, imports: [BbTable,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: TableModule, imports: [BbTable,
             BbTableColumnDef,
             BbTableRowDef,
             BbTableHeaderCell,
@@ -587,10 +585,10 @@ class TableModule {
             BbTableHeaderCell,
             BbTableCell,
             BbTablePager] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableModule, imports: [BbTable,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableModule, imports: [BbTable,
             BbTablePager] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: TableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [