@inobeta/ui 20.0.0-build.1773656607 → 20.0.0-build.1773994645

package/fesm2022/inobeta-ui.mjs

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { Pipe, input, effect, Directive, Injectable, Inject, inject, ViewEncapsulation, Component, NgModule, Input, InjectionToken, TemplateRef, ViewChild, Optional, EventEmitter, Output, booleanAttribute, ContentChild, ChangeDetectionStrategy, contentChild, computed, ContentChildren, ViewChildren, signal, HostBinding } from '@angular/core';
+import { Pipe, input, effect, Directive, Injectable, Inject, inject, ViewEncapsulation, Component, NgModule, Input, InjectionToken, TemplateRef, ViewChild, Optional, EventEmitter, Output, booleanAttribute, ContentChild, ChangeDetectionStrategy, contentChild, computed, ContentChildren, ViewChildren, output, signal, contentChildren, HostBinding } from '@angular/core';
 import * as i7$1 from '@angular/material/progress-bar';
 import { MatProgressBar, MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { map, catchError, filter, withLatestFrom, mergeMap, delay, takeUntil, switchMap, take, finalize, distinctUntilChanged, tap, debounceTime, skipWhile } from 'rxjs/operators';
 import * as i1 from '@ngx-translate/core';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { TranslateModule, TranslateService, TranslatePipe } from '@ngx-translate/core';
 import * as i2 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import * as i1$4 from '@angular/common';
-import { CommonModule, NgTemplateOutlet, formatDate, LowerCasePipe } from '@angular/common';
+import { CommonModule, NgTemplateOutlet, formatDate, DecimalPipe, LowerCasePipe, JsonPipe } from '@angular/common';
 import * as i1$1 from '@angular/common/http';
 import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi, HttpClient } from '@angular/common/http';
 import * as i1$2 from '@ngrx/store';
@@ -72,6 +72,8 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i3$4 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { MatCard } from '@angular/material/card';
 import Papa from 'papaparse';
 import jsPDF from 'jspdf';
 import { applyPlugin } from 'jspdf-autotable';
@@ -1757,7 +1759,9 @@ const ibKaiTableTranslations = {
                 "all": "Tutti i dati",
                 "currentPage": "Pagina corrente",
                 "selectedRows": "Righe selezionate"
-            }
+            },
+            "showDetails": "Mostra dettagli",
+            "hideDetails": "Nascondi dettagli"
         }
     }
 };
@@ -1945,16 +1949,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: [TemplateRef]
             }] } });
 class IbKaiTableActionGroup {
+    templateRef;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IbKaiTableActionGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: IbKaiTableActionGroup, isStandalone: false, selector: "ib-table-action-group, [ib-table-action-group]", ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: IbKaiTableActionGroup, isStandalone: false, selector: "ib-table-action-group, [ib-table-action-group]", viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IbKaiTableActionGroup, decorators: [{
             type: Directive,
             args: [{
-                    selector: "ib-table-action-group, [ib-table-action-group]",
+                    selector: 'ib-table-action-group, [ib-table-action-group]',
                     standalone: false
                 }]
-        }] });
+        }], propDecorators: { templateRef: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
+            }] } });
 class IbTableActionModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IbTableActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: IbTableActionModule, declarations: [IbKaiTableAction, IbKaiTableActionGroup], exports: [IbKaiTableAction, IbKaiTableActionGroup] });
@@ -2295,6 +2303,7 @@ class IbColumn {
     headerCell;
     footerCell;
     aggregateCell;
+    isActionColumn = false;
     /** @ignore */
     get matSort() {
         return this._table.sort;
@@ -2358,8 +2367,14 @@ class IbColumn {
             this.columnDef.name = this.name;
         }
     }
+    mobileDataRenderer(data, name) {
+        const value = this.dataAccessor
+            ? this.dataAccessor(data, name)
+            : data?.[name];
+        return value == null ? '' : String(value);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IbColumn, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.0", type: IbColumn, isStandalone: true, selector: "ib-column", inputs: { name: "name", headerText: "headerText", dataAccessor: "dataAccessor", sortingDataAccessor: "sortingDataAccessor", filterDataAccessor: "filterDataAccessor", sort: ["sort", "sort", booleanAttribute], sticky: ["sticky", "sticky", booleanAttribute], stickyEnd: ["stickyEnd", "stickyEnd", booleanAttribute], aggregate: ["aggregate", "aggregate", booleanAttribute] }, queries: [{ propertyName: "ibCellDef", first: true, predicate: IbCellDef, descendants: true, static: true }], viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true, static: true }, { propertyName: "cell", first: true, predicate: MatCellDef, descendants: true, static: true }, { propertyName: "headerCell", first: true, predicate: MatHeaderCellDef, descendants: true, static: true }, { propertyName: "footerCell", first: true, predicate: MatFooterCellDef, descendants: true, static: true }, { propertyName: "aggregateCell", first: true, predicate: IbAggregateCell, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.0", type: IbColumn, isStandalone: true, selector: "ib-column", inputs: { name: "name", headerText: "headerText", dataAccessor: "dataAccessor", sortingDataAccessor: "sortingDataAccessor", filterDataAccessor: "filterDataAccessor", sort: ["sort", "sort", booleanAttribute], sticky: ["sticky", "sticky", booleanAttribute], stickyEnd: ["stickyEnd", "stickyEnd", booleanAttribute], aggregate: ["aggregate", "aggregate", booleanAttribute], isActionColumn: ["ib-action-column", "isActionColumn", booleanAttribute] }, queries: [{ propertyName: "ibCellDef", first: true, predicate: IbCellDef, descendants: true, static: true }], viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true, static: true }, { propertyName: "cell", first: true, predicate: MatCellDef, descendants: true, static: true }, { propertyName: "headerCell", first: true, predicate: MatHeaderCellDef, descendants: true, static: true }, { propertyName: "footerCell", first: true, predicate: MatFooterCellDef, descendants: true, static: true }, { propertyName: "aggregateCell", first: true, predicate: IbAggregateCell, descendants: true }], ngImport: i0, template: `
     <ng-container
       matColumnDef
       matSort
@@ -2471,6 +2486,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }], aggregateCell: [{
                 type: ViewChild,
                 args: [IbAggregateCell]
+            }], isActionColumn: [{
+                type: Input,
+                args: [{ alias: 'ib-action-column', transform: booleanAttribute }]
             }] } });
 
 class IbActionColumn {
@@ -2481,7 +2499,7 @@ class IbActionColumn {
     }
     ngOnInit() {
         this.ibColumn.headerText = "";
-        this.ibColumn._table.displayedColumns.push("ib-action");
+        this.ibColumn._table?.displayedColumns?.push("ib-action");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IbActionColumn, deps: [{ token: IbColumn }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: IbActionColumn, isStandalone: false, selector: "[ib-action-column]", ngImport: i0 });
@@ -2508,6 +2526,10 @@ class IbDateColumn extends IbColumn {
     filterDataAccessor = (data, name) => new Date(this.dataAccessor(data, name)).getTime();
     /** @ignore */
     transform = { pdf: (data) => formatDate(data, this.format, this.locale) };
+    mobileDataRenderer(data, name) {
+        const value = this.dataAccessor(data, name);
+        return formatDate(value, this.format, this.locale);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IbDateColumn, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: IbDateColumn, isStandalone: false, selector: "ib-date-column", inputs: { format: "format", locale: "locale" }, providers: [
             { provide: IbColumn, useExisting: IbDateColumn },
@@ -2592,6 +2614,14 @@ class IbNumberColumn extends IbColumn {
     locale = "it";
     um = input("", ...(ngDevMode ? [{ debugName: "um" }] : []));
     umPosition = input("right", ...(ngDevMode ? [{ debugName: "umPosition" }] : []));
+    mobileDataRenderer(data, name) {
+        const value = this.dataAccessor(data, name);
+        const formattedValue = DecimalPipe.prototype.transform(value, this.digitsInfo, this.locale) ?? "";
+        if (this.um()) {
+            return this.umPosition() === 'left' ? `${this.um()} ${formattedValue}` : `${formattedValue} ${this.um()}`;
+        }
+        return formattedValue;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IbNumberColumn, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: IbNumberColumn, isStandalone: false, selector: "ib-number-column", inputs: { digitsInfo: { classPropertyName: "digitsInfo", publicName: "digitsInfo", isSignal: false, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null }, um: { classPropertyName: "um", publicName: "um", isSignal: true, isRequired: false, transformFunction: null }, umPosition: { classPropertyName: "umPosition", publicName: "umPosition", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
@@ -2622,7 +2652,7 @@ class IbNumberColumn extends IbColumn {
           {{ um() }}&nbsp;
         }
         {{ dataAccessor(data, name) | number : digitsInfo : locale }}
-    
+
         @if(umPosition() === 'right') {
           {{ um() }}
         }
@@ -2666,7 +2696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
           {{ um() }}&nbsp;
         }
         {{ dataAccessor(data, name) | number : digitsInfo : locale }}
-    
+
         @if(umPosition() === 'right') {
           {{ um() }}
         }
@@ -3704,6 +3734,7 @@ class IbTableUrlService {
                 })
             },
             queryParamsHandling: 'merge',
+            replaceUrl: true,
         });
     }
     getActiveView(tableName) {
@@ -3719,6 +3750,7 @@ class IbTableUrlService {
                 })
             },
             queryParamsHandling: 'merge',
+            replaceUrl: true,
         });
     }
     getPaginator(tableName) {
@@ -3736,6 +3768,7 @@ class IbTableUrlService {
                 })
             },
             queryParamsHandling: 'merge',
+            replaceUrl: true,
         });
     }
     getAggregatedColumns(tableName) {
@@ -3751,6 +3784,7 @@ class IbTableUrlService {
                 })
             },
             queryParamsHandling: 'merge',
+            replaceUrl: true,
         });
     }
     getSort(tableName) {
@@ -3770,6 +3804,7 @@ class IbTableUrlService {
                 })
             },
             queryParamsHandling: 'merge',
+            replaceUrl: true,
         });
     }
     getViewState(tableName) {
@@ -3793,6 +3828,7 @@ class IbTableUrlService {
                 })
             },
             queryParamsHandling: 'merge',
+            replaceUrl: true,
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IbTableUrlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -4228,6 +4264,23 @@ class IbFilterBase {
     closeMenu() {
         this.button?.closeMenu();
     }
+    mobileLabel() {
+        return this.name;
+    }
+    mobileSummary() {
+        const raw = this.rawValue;
+        if (raw == null) {
+            return "";
+        }
+        if (typeof raw !== "object") {
+            return String(raw);
+        }
+        const values = Object.values(raw).filter(v => v != null && v !== "");
+        return values.length ? values.map(v => String(v)).join(" • ") : "";
+    }
+    mobileHasValue() {
+        return !!this.mobileSummary();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IbFilterBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: IbFilterBase, isStandalone: false, selector: "ib-filter-base", inputs: { name: "name" }, viewQueries: [{ propertyName: "button", first: true, predicate: IbFilterButton, descendants: true }], ngImport: i0 });
 }
@@ -4245,6 +4298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }] } });
 
 class IbFilter {
+    templateRef;
     /** @ignore */
     filters;
     /** @ignore */
@@ -4279,6 +4333,9 @@ class IbFilter {
     query = {};
     hideFilters = false;
     initialized = new ReplaySubject(1);
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
     ngOnInit() {
     }
     ngAfterViewInit() {
@@ -4316,7 +4373,7 @@ class IbFilter {
         this.initialized.next();
         this.initialized.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IbFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IbFilter, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: IbFilter, isStandalone: false, selector: "ib-filter", inputs: { value: "value" }, outputs: { ibFilterUpdated: "ibFilterUpdated", ibQueryUpdated: "ibQueryUpdated" }, providers: [{ provide: IB_FILTER, useExisting: IbFilter }], queries: [{ propertyName: "filters", predicate: IbFilterBase }], viewQueries: [{ propertyName: "hideFilterAction", first: true, predicate: IbKaiTableAction, descendants: true }], ngImport: i0, template: `
     <section
       class="ib-filter"
@@ -4331,7 +4388,7 @@ class IbFilter {
         <ng-content></ng-content>
       </section>
     </section>
-    
+
     <button
       *ibTableAction
       mat-icon-button
@@ -4359,7 +4416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
         <ng-content></ng-content>
       </section>
     </section>
-    
+
     <button
       *ibTableAction
       mat-icon-button
@@ -4370,7 +4427,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
       <mat-icon>{{ "filter_alt" }}</mat-icon>
     </button>
     `, encapsulation: ViewEncapsulation.None, providers: [{ provide: IB_FILTER, useExisting: IbFilter }], standalone: false, styles: [":host{display:block}section.ib-filter{opacity:1;overflow:hidden}section.ib-filter ib-search-bar{display:block}section.ib-filter__list{display:flex;max-height:56px;padding:12px 0 12px 12px;flex-wrap:wrap;align-items:center;gap:.4em;--mat-button-filled-container-height: 32px;--mat-button-filled-touch-target-display: block;--mat-button-outlined-container-height: 32px;--mat-button-outlined-touch-target-display: block;--mat-button-protected-container-height: 32px;--mat-button-protected-touch-target-display: block;--mat-button-text-container-height: 32px;--mat-button-text-touch-target-display: block;--mat-button-tonal-container-height: 32px;--mat-button-tonal-touch-target-display: block}section.ib-filter__list .ib-filter-button,section.ib-filter__list .ib-add-filter-button{font-size:12px;border-radius:20px}section.ib-filter__list .ib-add-column-filter-button .mdc-evolution-chip__cell--primary .mdc-evolution-chip__action{padding-left:0}section.ib-filter__list mat-icon:first-child{margin:0 12px}.cdk-overlay-container .mat-mdc-menu-panel{overflow-x:hidden;border-radius:8px;margin-top:8px}\n"] }]
-        }], propDecorators: { filters: [{
+        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { filters: [{
                 type: ContentChildren,
                 args: [IbFilterBase]
             }], hideFilterAction: [{
@@ -6831,6 +6890,12 @@ class IbTextFilter extends IbFilterBase {
         }
         return { regex, like, condition, text };
     }
+    mobileSummary() {
+        if (!this.displayValue) {
+            return "";
+        }
+        return `${this.displayCondition ?? ""} ${this.displayValue}`.trim();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IbTextFilter, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: IbTextFilter, isStandalone: false, selector: "ib-text-filter", providers: [{ provide: IbFilterBase, useExisting: IbTextFilter }], usesInheritance: true, ngImport: i0, template: "<ib-filter-button [attr.data-cy]=\"'ib-text-filter-' + name\">\n  <span ib-filter-name><ng-content></ng-content></span>\n  @if (isDirty) {\n    <span ib-filter-value>\n      {{ displayCondition | translate | lowercase }} \"{{ displayValue }}\"\n    </span>\n  }\n\n  <section [formGroup]=\"filter?.form\" style=\"padding: 0.5em 1em 0 1em\">\n    <section [formGroupName]=\"name\">\n      <mat-form-field style=\"width: 100%\">\n        <mat-label>{{ \"shared.ibFilter.condition\" | translate }}</mat-label>\n        <mat-select formControlName=\"operator\" [attr.data-cy]=\"'ib-text-filter-' + name + '-condition'\">\n          @for (operator of operators; track operator) {\n            <mat-option [value]=\"operator.value\">\n              {{ operator.displayValue | translate }}\n            </mat-option>\n          }\n        </mat-select>\n        <mat-error>{{ \"shared.ibFilter.condition\" | translate }}\n        {{ \"shared.ibKaiFilter.required\" | translate }}</mat-error>\n      </mat-form-field>\n      <mat-form-field style=\"width: 100%\">\n        <mat-label>{{ \"shared.ibFilter.value\" | translate }}</mat-label>\n        <input matInput formControlName=\"value\" [attr.data-cy]=\"'ib-text-filter-' + name + '-value'\" />\n        <mat-error>{{ \"shared.ibFilter.value\" | translate }}\n        {{ \"shared.ibKaiFilter.required\" | translate }}</mat-error>\n      </mat-form-field>\n    </section>\n  </section>\n\n  <ib-filter-action-group>\n    <button mat-button (click)=\"clear()\" [disabled]=\"!isDirty\" [attr.data-cy]=\"'ib-filter-clear'\">\n      {{ \"shared.ibFilter.clear\" | translate }}\n    </button>\n    <button mat-button color=\"primary\" (click)=\"applyFilter()\" [attr.data-cy]=\"'ib-filter-update'\">\n      {{ \"shared.ibFilter.update\" | translate }}\n    </button>\n  </ib-filter-action-group>\n</ib-filter-button>", dependencies: [{ kind: "directive", type: i1$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$6.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: IbFilterButton, selector: "ib-filter-button" }, { kind: "directive", type: IbFilterActionGroup, selector: "ib-filter-action-group" }, { kind: "directive", type: IbFilterValueDirective, selector: "[ib-filter-value]" }, { kind: "pipe", type: i1$4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
@@ -7632,6 +7697,564 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 }]
         }] });
 
+class IbKaiTableMobileInfiniteScrollComponent {
+    hasMoreRows = input(false, ...(ngDevMode ? [{ debugName: "hasMoreRows" }] : []));
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    visibleCountChanged = output();
+    scrollAnchor;
+    pageSize = input(20, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    observer;
+    visibleCount = signal(this.pageSize(), ...(ngDevMode ? [{ debugName: "visibleCount" }] : []));
+    constructor() {
+        effect(() => {
+            this.data();
+            this.pageSize();
+            this.visibleCount.set(this.pageSize());
+        });
+        effect(() => {
+            this.hasMoreRows();
+            queueMicrotask(() => this.watchAnchor());
+        });
+        effect(() => {
+            this.visibleCount();
+            this.visibleCountChanged.emit(this.visibleCount());
+        });
+    }
+    ngAfterViewInit() {
+        this.setupInfiniteScroll();
+    }
+    setupInfiniteScroll() {
+        this.observer?.disconnect();
+        this.observer = new IntersectionObserver(entries => {
+            for (const entry of entries) {
+                if (entry.isIntersecting && this.hasMoreRows()) {
+                    this.loadMore();
+                }
+            }
+        }, {
+            root: null,
+            rootMargin: '200px 0px',
+            threshold: 0,
+        });
+        this.watchAnchor();
+    }
+    watchAnchor = () => {
+        this.observer?.disconnect();
+        const anchor = this.scrollAnchor?.nativeElement;
+        if (anchor && this.hasMoreRows()) {
+            this.observer?.observe(anchor);
+        }
+    };
+    loadMore() {
+        const total = this.data()?.length ?? 0;
+        const next = Math.min(this.visibleCount() + this.pageSize(), total);
+        this.visibleCount.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IbKaiTableMobileInfiniteScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: IbKaiTableMobileInfiniteScrollComponent, isStandalone: true, selector: "ib-kai-table-mobile-infinitescroll", inputs: { hasMoreRows: { classPropertyName: "hasMoreRows", publicName: "hasMoreRows", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleCountChanged: "visibleCountChanged" }, viewQueries: [{ propertyName: "scrollAnchor", first: true, predicate: ["scrollAnchor"], descendants: true }], ngImport: i0, template: `
+    <div #scrollAnchor class="ib-kai-table-mobile__scroll-anchor"></div>
+  `, isInline: true, styles: [".ib-kai-table-mobile__scroll-anchor{width:100%;height:1px}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IbKaiTableMobileInfiniteScrollComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ib-kai-table-mobile-infinitescroll', standalone: true, imports: [], template: `
+    <div #scrollAnchor class="ib-kai-table-mobile__scroll-anchor"></div>
+  `, styles: [".ib-kai-table-mobile__scroll-anchor{width:100%;height:1px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { scrollAnchor: [{
+                type: ViewChild,
+                args: ['scrollAnchor']
+            }] } });
+
+class IbKaiTableMobileItemComponent {
+    row;
+    cardDataColumns = input([], ...(ngDevMode ? [{ debugName: "cardDataColumns" }] : []));
+    cardActionColumns = input([], ...(ngDevMode ? [{ debugName: "cardActionColumns" }] : []));
+    rowGroup = input(null, ...(ngDevMode ? [{ debugName: "rowGroup" }] : []));
+    isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
+    toggleRowGroup() {
+        this.isExpanded.update(current => !current);
+    }
+    isRowGroupExpanded() {
+        return this.isExpanded();
+    }
+    isOdd(value) {
+        return value % 2 !== 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IbKaiTableMobileItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: IbKaiTableMobileItemComponent, isStandalone: true, selector: "ib-kai-table-mobile-item", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: false, isRequired: false, transformFunction: null }, cardDataColumns: { classPropertyName: "cardDataColumns", publicName: "cardDataColumns", isSignal: true, isRequired: false, transformFunction: null }, cardActionColumns: { classPropertyName: "cardActionColumns", publicName: "cardActionColumns", isSignal: true, isRequired: false, transformFunction: null }, rowGroup: { classPropertyName: "rowGroup", publicName: "rowGroup", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+<mat-card>
+  <div class="ib-kai-table-mobile__grid">
+    @for (col of cardDataColumns(); track col.name; let last = $last; let even = $even) {
+      <section
+        class="ib-kai-table-mobile__item"
+        [class.ib-kai-table-mobile__item--right]="even && !(last && isOdd(cardDataColumns().length))"
+        [class.ib-kai-table-mobile__item--full]="last && isOdd(cardDataColumns().length)"
+      >
+        <div class="ib-kai-table-mobile__label">
+          {{ col.headerText || col.name }}
+        </div>
+
+        <div class="ib-kai-table-mobile__value">
+          @if (col.ibCellDef) {
+            <ng-container
+              *ngTemplateOutlet="
+                col.ibCellDef.templateRef;
+                context: { $implicit: row }
+              "
+            />
+          } @else {
+            {{ col.mobileDataRenderer(row, col.name) }}
+          }
+        </div>
+      </section>
+    }
+  </div>
+
+  @if (cardActionColumns().length) {
+    <div class="ib-kai-table-mobile__card-actions">
+      @for (col of cardActionColumns(); track col.name ?? $index) {
+        @if (col.ibCellDef?.templateRef) {
+          <ng-container
+            *ngTemplateOutlet="
+              col.ibCellDef.templateRef;
+              context: { $implicit: row }
+            "
+          />
+        }
+      }
+    </div>
+  }
+
+  @if (rowGroup()) {
+    <button
+      type="button"
+      class="ib-kai-table-mobile__details-toggle"
+      (click)="toggleRowGroup()"
+    >
+      <span>
+        {{ (isExpanded() ? 'shared.ibTable.hideDetails' : 'shared.ibTable.showDetails' )| translate }}
+      </span>
+      <span
+        class="ib-kai-table-mobile__chevron"
+        [class.ib-kai-table-mobile__chevron--expanded]="isExpanded()"
+      >
+        ▾
+      </span>
+    </button>
+
+    @if (isExpanded()) {
+      <div class="ib-kai-table-mobile__details">
+        <ng-container
+          *ngTemplateOutlet="
+            rowGroup()!.templateRef;
+            context: { $implicit: row }
+          "
+        />
+      </div>
+    }
+  }
+</mat-card>
+  `, isInline: true, styles: [".ib-kai-table-mobile__card{width:100%;min-width:0;box-sizing:border-box;background:var(--ib-mobile-card-bg);border:1px solid var(--ib-mobile-border);border-radius:var(--ib-mobile-radius);box-shadow:var(--ib-mobile-shadow);overflow:hidden}.ib-kai-table-mobile__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}.ib-kai-table-mobile__item{min-width:0;padding:12px 14px 10px;border-bottom:1px solid var(--ib-mobile-separator)}.ib-kai-table-mobile__item--right{border-right:1px solid color-mix(in srgb,var(--ib-mobile-separator) 70%,transparent)}.ib-kai-table-mobile__item--full{grid-column:1 / -1}.ib-kai-table-mobile__label{font-size:11px;line-height:1.2;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ib-mobile-text-muted);margin-bottom:4px}.ib-kai-table-mobile__value{min-width:0;color:var(--ib-mobile-text);font-size:15px;line-height:1.3;font-weight:600;word-break:break-word}.ib-kai-table-mobile__card-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--ib-mobile-separator)}.ib-kai-table-mobile__details-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:0;border-top:1px solid var(--ib-mobile-separator);background:transparent;color:var(--ib-mobile-text);font:inherit;font-weight:600;cursor:pointer}.ib-kai-table-mobile__chevron{display:inline-block;transition:transform .16s ease}.ib-kai-table-mobile__chevron--expanded{transform:rotate(180deg)}.ib-kai-table-mobile__details{padding:12px 14px 14px;border-top:1px solid var(--ib-mobile-separator);background:var(--mat-sys-surface-container)}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IbKaiTableMobileItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ib-kai-table-mobile-item', template: `
+<mat-card>
+  <div class="ib-kai-table-mobile__grid">
+    @for (col of cardDataColumns(); track col.name; let last = $last; let even = $even) {
+      <section
+        class="ib-kai-table-mobile__item"
+        [class.ib-kai-table-mobile__item--right]="even && !(last && isOdd(cardDataColumns().length))"
+        [class.ib-kai-table-mobile__item--full]="last && isOdd(cardDataColumns().length)"
+      >
+        <div class="ib-kai-table-mobile__label">
+          {{ col.headerText || col.name }}
+        </div>
+
+        <div class="ib-kai-table-mobile__value">
+          @if (col.ibCellDef) {
+            <ng-container
+              *ngTemplateOutlet="
+                col.ibCellDef.templateRef;
+                context: { $implicit: row }
+              "
+            />
+          } @else {
+            {{ col.mobileDataRenderer(row, col.name) }}
+          }
+        </div>
+      </section>
+    }
+  </div>
+
+  @if (cardActionColumns().length) {
+    <div class="ib-kai-table-mobile__card-actions">
+      @for (col of cardActionColumns(); track col.name ?? $index) {
+        @if (col.ibCellDef?.templateRef) {
+          <ng-container
+            *ngTemplateOutlet="
+              col.ibCellDef.templateRef;
+              context: { $implicit: row }
+            "
+          />
+        }
+      }
+    </div>
+  }
+
+  @if (rowGroup()) {
+    <button
+      type="button"
+      class="ib-kai-table-mobile__details-toggle"
+      (click)="toggleRowGroup()"
+    >
+      <span>
+        {{ (isExpanded() ? 'shared.ibTable.hideDetails' : 'shared.ibTable.showDetails' )| translate }}
+      </span>
+      <span
+        class="ib-kai-table-mobile__chevron"
+        [class.ib-kai-table-mobile__chevron--expanded]="isExpanded()"
+      >
+        ▾
+      </span>
+    </button>
+
+    @if (isExpanded()) {
+      <div class="ib-kai-table-mobile__details">
+        <ng-container
+          *ngTemplateOutlet="
+            rowGroup()!.templateRef;
+            context: { $implicit: row }
+          "
+        />
+      </div>
+    }
+  }
+</mat-card>
+  `, imports: [
+                        MatCard, NgTemplateOutlet, TranslatePipe
+                    ], styles: [".ib-kai-table-mobile__card{width:100%;min-width:0;box-sizing:border-box;background:var(--ib-mobile-card-bg);border:1px solid var(--ib-mobile-border);border-radius:var(--ib-mobile-radius);box-shadow:var(--ib-mobile-shadow);overflow:hidden}.ib-kai-table-mobile__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}.ib-kai-table-mobile__item{min-width:0;padding:12px 14px 10px;border-bottom:1px solid var(--ib-mobile-separator)}.ib-kai-table-mobile__item--right{border-right:1px solid color-mix(in srgb,var(--ib-mobile-separator) 70%,transparent)}.ib-kai-table-mobile__item--full{grid-column:1 / -1}.ib-kai-table-mobile__label{font-size:11px;line-height:1.2;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ib-mobile-text-muted);margin-bottom:4px}.ib-kai-table-mobile__value{min-width:0;color:var(--ib-mobile-text);font-size:15px;line-height:1.3;font-weight:600;word-break:break-word}.ib-kai-table-mobile__card-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--ib-mobile-separator)}.ib-kai-table-mobile__details-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:0;border-top:1px solid var(--ib-mobile-separator);background:transparent;color:var(--ib-mobile-text);font:inherit;font-weight:600;cursor:pointer}.ib-kai-table-mobile__chevron{display:inline-block;transition:transform .16s ease}.ib-kai-table-mobile__chevron--expanded{transform:rotate(180deg)}.ib-kai-table-mobile__details{padding:12px 14px 14px;border-top:1px solid var(--ib-mobile-separator);background:var(--mat-sys-surface-container)}\n"] }]
+        }], propDecorators: { row: [{
+                type: Input
+            }] } });
+
+class IbKaiTableMobileToolbarComponent {
+    headerActions = input([], ...(ngDevMode ? [{ debugName: "headerActions" }] : []));
+    filters = input([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
+    filtersOpen = signal(false, ...(ngDevMode ? [{ debugName: "filtersOpen" }] : []));
+    activeFiltersCount = computed(() => {
+        return this.filters().filter(f => f.mobileHasValue()).length;
+    }, ...(ngDevMode ? [{ debugName: "activeFiltersCount" }] : []));
+    toggleFilters() {
+        this.filtersOpen.update(v => !v);
+    }
+    closeFilters() {
+        this.filtersOpen.set(false);
+    }
+    clearAllFilters() {
+        this.filters().forEach(f => f.clear());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IbKaiTableMobileToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: IbKaiTableMobileToolbarComponent, isStandalone: true, selector: "ib-kai-table-mobile-toolbar", inputs: { headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+          <div class="ib-kai-table-mobile__toolbar">
+            <div class="ib-kai-table-mobile__toolbar-actions">
+              @for (action of headerActions(); track $index) {
+                @if (action.templateRef) {
+                  <ng-container
+                    *ngTemplateOutlet="action.templateRef">
+                  </ng-container>
+                }
+              }
+            </div>
+
+            @if (filters().length) {
+              <mat-card>
+                <button
+                  type="button"
+                  class="ib-kai-table-mobile__filter-button"
+                  (click)="toggleFilters()"
+                >
+                  Filtri
+                  @if (activeFiltersCount() > 0) {
+                    <span class="ib-kai-table-mobile__filter-badge">
+                      {{ activeFiltersCount() }}
+                    </span>
+                  }
+                </button>
+              </mat-card>
+            }
+          </div>
+
+          @if (filtersOpen()) {
+            <mat-card>
+              <div class="ib-kai-table-mobile__filters-panel-header">
+                <div class="ib-kai-table-mobile__filters-title">Filtri</div>
+
+                <div class="ib-kai-table-mobile__filters-panel-actions">
+                  <button
+                    type="button"
+                    class="ib-kai-table-mobile__filters-action"
+                    (click)="clearAllFilters()"
+                  >
+                    Reset
+                  </button>
+
+                  <button
+                    type="button"
+                    class="ib-kai-table-mobile__filters-action"
+                    (click)="closeFilters()"
+                  >
+                    Chiudi
+                  </button>
+                </div>
+              </div>
+
+              <div class="ib-kai-table-mobile__filters-content">
+                @for (f of filters(); track f.name) {
+                  <div class="ib-kai-table-mobile__filter-item">
+                    <div class="ib-kai-table-mobile__filter-item-main">
+                      <div class="ib-kai-table-mobile__filter-item-label">
+                        {{ f.mobileLabel() }}
+                      </div>
+
+                      <div class="ib-kai-table-mobile__filter-item-value">
+                        {{ f.mobileSummary() || 'Nessun filtro attivo' }}
+                      </div>
+                    </div>
+
+                    <div class="ib-kai-table-mobile__filter-item-actions">
+                      @if (f.mobileHasValue()) {
+                        <button
+                          type="button"
+                          class="ib-kai-table-mobile__filter-item-button"
+                          (click)="f.clear()"
+                        >
+                          Reset
+                        </button>
+                      }
+                    </div>
+                  </div>
+                }
+              </div>
+              </mat-card>
+          }
+
+
+  `, isInline: true, styles: [".ib-kai-table-mobile__toolbar{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:10px 12px;border:1px solid var(--ib-mobile-border);border-radius:16px;background:var(--ib-mobile-card-bg);box-shadow:var(--ib-mobile-shadow)}.ib-kai-table-mobile__toolbar-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}.ib-kai-table-mobile__filter-button,.ib-kai-table-mobile__filters-action,.ib-kai-table-mobile__filter-item-button{border:1px solid var(--ib-mobile-border);background:var(--mat-sys-surface-container-high);color:var(--ib-mobile-text);border-radius:999px;padding:8px 12px;font:inherit;font-weight:600;cursor:pointer}.ib-kai-table-mobile__filter-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:6px;padding:0 4px;border-radius:999px;background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);font-size:11px;line-height:1}.ib-kai-table-mobile__filters-panel{margin-top:10px;border:1px solid var(--ib-mobile-border);border-radius:16px;background:var(--ib-mobile-card-bg);box-shadow:var(--ib-mobile-shadow);overflow:hidden}.ib-kai-table-mobile__filters-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-bottom:1px solid var(--ib-mobile-separator)}.ib-kai-table-mobile__filters-title{font-weight:700;color:var(--ib-mobile-text)}.ib-kai-table-mobile__filters-panel-actions{display:flex;align-items:center;gap:8px}.ib-kai-table-mobile__filters-content{display:flex;flex-direction:column;gap:10px;padding:12px}.ib-kai-table-mobile__filter-item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--ib-mobile-separator);border-radius:12px;background:var(--mat-sys-surface-container)}.ib-kai-table-mobile__filter-item-main{min-width:0}.ib-kai-table-mobile__filter-item-label{font-size:12px;font-weight:700;color:var(--ib-mobile-text);margin-bottom:4px}.ib-kai-table-mobile__filter-item-value{font-size:13px;color:var(--ib-mobile-text-muted);word-break:break-word}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IbKaiTableMobileToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ib-kai-table-mobile-toolbar', standalone: true, imports: [NgTemplateOutlet, MatCard], template: `
+          <div class="ib-kai-table-mobile__toolbar">
+            <div class="ib-kai-table-mobile__toolbar-actions">
+              @for (action of headerActions(); track $index) {
+                @if (action.templateRef) {
+                  <ng-container
+                    *ngTemplateOutlet="action.templateRef">
+                  </ng-container>
+                }
+              }
+            </div>
+
+            @if (filters().length) {
+              <mat-card>
+                <button
+                  type="button"
+                  class="ib-kai-table-mobile__filter-button"
+                  (click)="toggleFilters()"
+                >
+                  Filtri
+                  @if (activeFiltersCount() > 0) {
+                    <span class="ib-kai-table-mobile__filter-badge">
+                      {{ activeFiltersCount() }}
+                    </span>
+                  }
+                </button>
+              </mat-card>
+            }
+          </div>
+
+          @if (filtersOpen()) {
+            <mat-card>
+              <div class="ib-kai-table-mobile__filters-panel-header">
+                <div class="ib-kai-table-mobile__filters-title">Filtri</div>
+
+                <div class="ib-kai-table-mobile__filters-panel-actions">
+                  <button
+                    type="button"
+                    class="ib-kai-table-mobile__filters-action"
+                    (click)="clearAllFilters()"
+                  >
+                    Reset
+                  </button>
+
+                  <button
+                    type="button"
+                    class="ib-kai-table-mobile__filters-action"
+                    (click)="closeFilters()"
+                  >
+                    Chiudi
+                  </button>
+                </div>
+              </div>
+
+              <div class="ib-kai-table-mobile__filters-content">
+                @for (f of filters(); track f.name) {
+                  <div class="ib-kai-table-mobile__filter-item">
+                    <div class="ib-kai-table-mobile__filter-item-main">
+                      <div class="ib-kai-table-mobile__filter-item-label">
+                        {{ f.mobileLabel() }}
+                      </div>
+
+                      <div class="ib-kai-table-mobile__filter-item-value">
+                        {{ f.mobileSummary() || 'Nessun filtro attivo' }}
+                      </div>
+                    </div>
+
+                    <div class="ib-kai-table-mobile__filter-item-actions">
+                      @if (f.mobileHasValue()) {
+                        <button
+                          type="button"
+                          class="ib-kai-table-mobile__filter-item-button"
+                          (click)="f.clear()"
+                        >
+                          Reset
+                        </button>
+                      }
+                    </div>
+                  </div>
+                }
+              </div>
+              </mat-card>
+          }
+
+
+  `, styles: [".ib-kai-table-mobile__toolbar{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:10px 12px;border:1px solid var(--ib-mobile-border);border-radius:16px;background:var(--ib-mobile-card-bg);box-shadow:var(--ib-mobile-shadow)}.ib-kai-table-mobile__toolbar-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}.ib-kai-table-mobile__filter-button,.ib-kai-table-mobile__filters-action,.ib-kai-table-mobile__filter-item-button{border:1px solid var(--ib-mobile-border);background:var(--mat-sys-surface-container-high);color:var(--ib-mobile-text);border-radius:999px;padding:8px 12px;font:inherit;font-weight:600;cursor:pointer}.ib-kai-table-mobile__filter-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:6px;padding:0 4px;border-radius:999px;background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);font-size:11px;line-height:1}.ib-kai-table-mobile__filters-panel{margin-top:10px;border:1px solid var(--ib-mobile-border);border-radius:16px;background:var(--ib-mobile-card-bg);box-shadow:var(--ib-mobile-shadow);overflow:hidden}.ib-kai-table-mobile__filters-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-bottom:1px solid var(--ib-mobile-separator)}.ib-kai-table-mobile__filters-title{font-weight:700;color:var(--ib-mobile-text)}.ib-kai-table-mobile__filters-panel-actions{display:flex;align-items:center;gap:8px}.ib-kai-table-mobile__filters-content{display:flex;flex-direction:column;gap:10px;padding:12px}.ib-kai-table-mobile__filter-item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--ib-mobile-separator);border-radius:12px;background:var(--mat-sys-surface-container)}.ib-kai-table-mobile__filter-item-main{min-width:0}.ib-kai-table-mobile__filter-item-label{font-size:12px;font-weight:700;color:var(--ib-mobile-text);margin-bottom:4px}.ib-kai-table-mobile__filter-item-value{font-size:13px;color:var(--ib-mobile-text-muted);word-break:break-word}\n"] }]
+        }] });
+
+class IbKaiTableMobileComponent {
+    state = input('idle', ...(ngDevMode ? [{ debugName: "state" }] : []));
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    dataSource = input(new IbTableDataSource([]), ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
+    tableName = input(btoa(window.location.pathname + window.location.hash), ...(ngDevMode ? [{ debugName: "tableName" }] : []));
+    tableDef = input({}, ...(ngDevMode ? [{ debugName: "tableDef" }] : []));
+    displayedColumns = input([], ...(ngDevMode ? [{ debugName: "displayedColumns" }] : []));
+    pageSize = input(20, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    columns = input(...(ngDevMode ? [undefined, { debugName: "columns" }] : []));
+    rowGroup = input(...(ngDevMode ? [undefined, { debugName: "rowGroup" }] : []));
+    filter = input(...(ngDevMode ? [undefined, { debugName: "filter" }] : []));
+    filters = input(...(ngDevMode ? [undefined, { debugName: "filters" }] : []));
+    headerActions = input(...(ngDevMode ? [undefined, { debugName: "headerActions" }] : []));
+    actionColumn = input(...(ngDevMode ? [undefined, { debugName: "actionColumn" }] : []));
+    scrollAnchor;
+    observer;
+    visibleCount = signal(this.pageSize(), ...(ngDevMode ? [{ debugName: "visibleCount" }] : []));
+    filtersOpen = signal(false, ...(ngDevMode ? [{ debugName: "filtersOpen" }] : []));
+    visibleColumns = computed(() => {
+        const cols = this.columns() ?? [];
+        const displayed = [...(this.displayedColumns() ?? [])];
+        if (!!this.actionColumn && !displayed.includes('ib-action')) {
+            displayed.push('ib-action');
+        }
+        if (!displayed.length) {
+            return cols;
+        }
+        const byName = new Map(cols.map(col => [col.name, col]));
+        return displayed
+            .map(name => byName.get(name))
+            .filter((col) => !!col);
+    }, ...(ngDevMode ? [{ debugName: "visibleColumns" }] : []));
+    cardDataColumns = computed(() => {
+        return this.visibleColumns().filter(col => !col.isActionColumn);
+    }, ...(ngDevMode ? [{ debugName: "cardDataColumns" }] : []));
+    cardActionColumns = computed(() => {
+        return this.visibleColumns().filter(col => col.isActionColumn);
+    }, ...(ngDevMode ? [{ debugName: "cardActionColumns" }] : []));
+    visibleRows = computed(() => {
+        return (this.data() ?? []).slice(0, this.visibleCount());
+    }, ...(ngDevMode ? [{ debugName: "visibleRows" }] : []));
+    hasMoreRows = computed(() => {
+        return this.visibleRows().length < (this.data()?.length ?? 0);
+    }, ...(ngDevMode ? [{ debugName: "hasMoreRows" }] : []));
+    trackRow(index, row) {
+        return this.getRowKey(row, index);
+    }
+    getRowKey(row, index) {
+        return row?.id ?? row?.uuid ?? row?.key ?? index;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IbKaiTableMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: IbKaiTableMobileComponent, isStandalone: true, selector: "ib-kai-table-mobile", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, tableName: { classPropertyName: "tableName", publicName: "tableName", isSignal: true, isRequired: false, transformFunction: null }, tableDef: { classPropertyName: "tableDef", publicName: "tableDef", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowGroup: { classPropertyName: "rowGroup", publicName: "rowGroup", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null }, actionColumn: { classPropertyName: "actionColumn", publicName: "actionColumn", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "scrollAnchor", first: true, predicate: ["scrollAnchor"], descendants: true }], ngImport: i0, template: `
+    <div class="ib-kai-table-mobile">
+      @if (headerActions().length || filters().length) {
+        <!-- TBD <div class="ib-kai-table-mobile__sticky-header">
+          <ib-kai-table-mobile-toolbar
+            [headerActions]="headerActions()"
+            [filters]="filters()"
+          ></ib-kai-table-mobile-toolbar>
+        </div>-->
+      }
+      @if (cardDataColumns().length || cardActionColumns().length) {
+        <div class="ib-kai-table-mobile__content">
+          @for (row of visibleRows(); track trackRow($index, row)) {
+            <ib-kai-table-mobile-item
+              [row]="row"
+              [cardDataColumns]="cardDataColumns()"
+              [cardActionColumns]="cardActionColumns()"
+              [rowGroup]="rowGroup()"
+              ></ib-kai-table-mobile-item>
+          }
+
+          @if (hasMoreRows()) {
+            <ib-kai-table-mobile-infinitescroll
+              [hasMoreRows]="hasMoreRows()"
+              [data]="data()"
+              (visibleCountChanged)="visibleCount.set($event)"
+            ></ib-kai-table-mobile-infinitescroll>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;min-width:0;--ib-mobile-bg: var(--mat-sys-surface);--ib-mobile-card-bg: var(--mat-sys-surface-container-low);--ib-mobile-border: var(--mat-sys-outline-variant);--ib-mobile-separator: var(--mat-sys-outline-variant);--ib-mobile-text: var(--mat-sys-on-surface);--ib-mobile-text-muted: var(--mat-sys-on-surface-variant);--ib-mobile-shadow: var(--mat-sys-level1);--ib-mobile-radius: 18px;--ib-mobile-sticky-top: 0px}.ib-kai-table-mobile{width:100%;min-width:0;box-sizing:border-box;background:var(--ib-mobile-bg)}.ib-kai-table-mobile__sticky-header{position:sticky;top:var(--ib-mobile-sticky-top);z-index:20;background:var(--ib-mobile-bg);padding:12px 12px 8px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.ib-kai-table-mobile__content{display:flex;flex-direction:column;gap:14px;padding:4px 12px 12px;width:100%;min-width:0;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: IbKaiTableMobileItemComponent, selector: "ib-kai-table-mobile-item", inputs: ["row", "cardDataColumns", "cardActionColumns", "rowGroup"] }, { kind: "component", type: IbKaiTableMobileInfiniteScrollComponent, selector: "ib-kai-table-mobile-infinitescroll", inputs: ["hasMoreRows", "data", "pageSize"], outputs: ["visibleCountChanged"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IbKaiTableMobileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ib-kai-table-mobile', standalone: true, imports: [IbKaiTableMobileToolbarComponent, IbKaiTableMobileItemComponent, IbKaiTableMobileInfiniteScrollComponent, JsonPipe], template: `
+    <div class="ib-kai-table-mobile">
+      @if (headerActions().length || filters().length) {
+        <!-- TBD <div class="ib-kai-table-mobile__sticky-header">
+          <ib-kai-table-mobile-toolbar
+            [headerActions]="headerActions()"
+            [filters]="filters()"
+          ></ib-kai-table-mobile-toolbar>
+        </div>-->
+      }
+      @if (cardDataColumns().length || cardActionColumns().length) {
+        <div class="ib-kai-table-mobile__content">
+          @for (row of visibleRows(); track trackRow($index, row)) {
+            <ib-kai-table-mobile-item
+              [row]="row"
+              [cardDataColumns]="cardDataColumns()"
+              [cardActionColumns]="cardActionColumns()"
+              [rowGroup]="rowGroup()"
+              ></ib-kai-table-mobile-item>
+          }
+
+          @if (hasMoreRows()) {
+            <ib-kai-table-mobile-infinitescroll
+              [hasMoreRows]="hasMoreRows()"
+              [data]="data()"
+              (visibleCountChanged)="visibleCount.set($event)"
+            ></ib-kai-table-mobile-infinitescroll>
+          }
+        </div>
+      }
+    </div>
+  `, styles: [":host{display:block;width:100%;min-width:0;--ib-mobile-bg: var(--mat-sys-surface);--ib-mobile-card-bg: var(--mat-sys-surface-container-low);--ib-mobile-border: var(--mat-sys-outline-variant);--ib-mobile-separator: var(--mat-sys-outline-variant);--ib-mobile-text: var(--mat-sys-on-surface);--ib-mobile-text-muted: var(--mat-sys-on-surface-variant);--ib-mobile-shadow: var(--mat-sys-level1);--ib-mobile-radius: 18px;--ib-mobile-sticky-top: 0px}.ib-kai-table-mobile{width:100%;min-width:0;box-sizing:border-box;background:var(--ib-mobile-bg)}.ib-kai-table-mobile__sticky-header{position:sticky;top:var(--ib-mobile-sticky-top);z-index:20;background:var(--ib-mobile-bg);padding:12px 12px 8px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.ib-kai-table-mobile__content{display:flex;flex-direction:column;gap:14px;padding:4px 12px 12px;width:100%;min-width:0;box-sizing:border-box}\n"] }]
+        }], propDecorators: { scrollAnchor: [{
+                type: ViewChild,
+                args: ['scrollAnchor']
+            }] } });
+
 const defaultTableDef = {
     paginator: {
         pageSizeOptions: [10, 20, 50, 100],
@@ -7641,6 +8264,22 @@ const defaultTableDef = {
 };
 class IbTable {
     _destroyed = new Subject();
+    /**
+     *
+     * MOBILE STUFF
+     */
+    mobileColumns = contentChildren(IbColumn, ...(ngDevMode ? [{ debugName: "mobileColumns" }] : []));
+    mobileRowGroup = contentChild(IbKaiRowGroupDirective, ...(ngDevMode ? [{ debugName: "mobileRowGroup" }] : []));
+    mobileFilter = contentChild(IbFilter, ...(ngDevMode ? [{ debugName: "mobileFilter" }] : []));
+    mobileFilters = contentChildren(IbFilterBase, ...(ngDevMode ? [{ debugName: "mobileFilters", descendants: true }] : [{ descendants: true }]));
+    mobileHeaderActions = contentChildren(IbKaiTableAction, ...(ngDevMode ? [{ debugName: "mobileHeaderActions", descendants: true }] : [{ descendants: true }]));
+    mobileActionColumn = contentChild(IbActionColumn, ...(ngDevMode ? [{ debugName: "mobileActionColumn" }] : []));
+    breakpointObserver = inject(BreakpointObserver);
+    isMobile = this.breakpointObserver.isMatched('(max-width: 767px)');
+    get hasTableContainerClass() {
+        return !this.isMobile;
+    }
+    /** END MOBILE STUFF */
     columns;
     selectionColumn;
     rowGroup;
@@ -7821,7 +8460,7 @@ class IbTable {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IbTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: IbTable, isStandalone: false, selector: "ib-kai-table", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null }, tableName: { classPropertyName: "tableName", publicName: "tableName", isSignal: false, isRequired: false, transformFunction: null }, tableDef: { classPropertyName: "tableDef", publicName: "tableDef", isSignal: false, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: false, isRequired: false, transformFunction: null }, stripedRows: { classPropertyName: "stripedRows", publicName: "stripedRows", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, activeRowParams: { classPropertyName: "activeRowParams", publicName: "activeRowParams", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ib-table-striped-rows": "this.stripedRows" }, classAttribute: "ib-table__container" }, providers: [{ provide: IB_TABLE, useExisting: IbTable }], queries: [{ propertyName: "selectionColumn", first: true, predicate: IbSelectionColumn, descendants: true }, { propertyName: "rowGroup", first: true, predicate: IbKaiRowGroupDirective, descendants: true }, { propertyName: "filter", first: true, predicate: IbFilter, descendants: true }, { propertyName: "view", first: true, predicate: IbTableViewGroup, descendants: true }, { propertyName: "exportAction", first: true, predicate: IbTableDataExportAction, descendants: true }, { propertyName: "columns", predicate: IbColumn }], viewQueries: [{ propertyName: "matTable", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], ngImport: i0, template: "<section class=\"ib-table__toolbar\">\n  <ng-content select=\"ib-table-view-group\" />\n  <section class=\"ib-table__toolbar__actions\">\n    <ng-content select=\"ib-table-action-group, [ib-table-action-group]\" />\n    @for (portal of actionPortals; track portal) {\n      <ng-template [cdkPortalOutlet]=\"portal\" />\n    }\n  </section>\n</section>\n\n<ng-content select=\"ib-filter\" />\n\n<section class=\"ib-table__content\" [class.ib-table__content--loading]=\"state === 'loading'\">\n  @if (state === 'loading') {\n    <div class=\"ib-table__content__progress-bar\">\n      <mat-progress-bar mode=\"indeterminate\" />\n    </div>\n  }\n\n  <table class=\"ib-table\" mat-table matSort multiTemplateDataRows [matSortActive]=\"this.dataSource.sortState.active\"\n    [matSortDirection]=\"this.dataSource.sortState.direction\" [dataSource]=\"dataSource\">\n    <ng-content select=\"ib-selection-column\" />\n    <ng-content />\n\n    @if (rowGroup) {\n      <ng-container matColumnDef=\"expandedDetail\">\n        <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\">\n          <div class=\"ib-table__cell-detail\" [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\">\n            <ng-container *ngTemplateOutlet=\"rowGroup.templateRef; context: {'$implicit': element, 'row': element}\" />\n          </div>\n        </td>\n      </ng-container>\n    }\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true;\"></tr>\n\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" class=\"ib-table__row\"\n      [class.ib-table__row--expanded]=\"expandedElement === row\"\n      [class.ib-table__row--selected]=\"activeRouteId() && row[activeRowParams()?.dataParamId]?.toString() === activeRouteId()\"\n    (click)=\"rowGroup && (expandedElement = expandedElement === row ? null : row)\"></tr>\n    @if (rowGroup) {\n      <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"ib-table__row-group\"\n      [class.ib-table__row-group--hidden]=\"expandedElement !== row\"></tr>\n    }\n\n    <tr *matNoDataRow>\n      <td [attr.colspan]=\"columns.length\">\n        <div>\n          @if (state === 'idle') {\n            <mat-icon style=\"color: #888\">inbox</mat-icon>\n            {{ \"common.noItems\" | translate }}\n          }\n\n          @if (state === 'http_error') {\n            <mat-icon style=\"color: #888\">error</mat-icon>\n            {{ \"common.httpError\" | translate }}\n          }\n        </div>\n      </td>\n    </tr>\n\n    @if (dataSource.shouldDisplayAggregationFooter) {\n      <tr class=\"ib-table__rollup-row\" mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n    }\n  </table>\n</section>\n<mat-paginator class=\"ib-table__paginator\"\n  [disabled]=\"state !== 'idle'\"\n  [style.display]=\"tableDef.paginator.hide ? 'none' : 'block'\"\n  [pageSize]=\"tableDef.paginator.pageSize\"\n  [showFirstLastButtons]=\"tableDef.paginator.showFirstLastButtons\"\n  [pageSizeOptions]=\"tableDef.paginator.pageSizeOptions\"\n  (page)=\"setPaginatorState({ pageIndex: $event.pageIndex, pageSize: $event.pageSize })\"\n  />\n", styles: [".ib-table__container{--ib-table-minimum-rows-private: var(--ib-table-minimum-rows, 10);--ib-table-has-footer-row: 0;--ib-table-filter-max-height: 112px;--ib-table-content-max-height-private: var( --ib-table-content-max-height, calc( var(--mat-table-header-container-height) + var(--mat-table-row-item-container-height) * (var(--ib-table-minimum-rows-private) + var(--ib-table-has-footer-row)) ) );--ib-table-outline-color-private: var( --ib-table-outline-color, var(--mat-table-row-item-outline-color) );--ib-table-column-outline-width-private: var( --ib-table-column-outline-width, 0 );--ib-table-border-width: 1px;display:block;border:var(--ib-table-border-width) solid var(--ib-table-outline-color-private);overflow:hidden}.ib-table__container:has(.ib-table__rollup-row){--ib-table-has-footer-row: 1}.ib-table__container .ib-table__toolbar{display:flex;align-items:center;justify-content:flex-end}.ib-table__container .ib-table__toolbar:has(ib-table-view-group),.ib-table__container .ib-table__toolbar:has(>section:not(:empty)){height:56px;border-bottom:1px solid var(--ib-table-outline-color-private)}.ib-table__container .ib-table__toolbar__actions{padding-right:8px}.ib-table__container .ib-table__toolbar__actions ib-table-action-group{display:inline-block}.ib-table__container .ib-filter--hidden{max-height:0;opacity:0}.ib-table__container ib-filter:not(:has(.ib-filter--hidden))~.ib-table__content{max-height:calc(var(--ib-table-content-max-height-private) - var(--ib-table-filter-max-height))}.ib-table__container ib-filter:has(.ib-filter--hidden)~.ib-table__content{max-height:calc(var(--ib-table-content-max-height-private))}.ib-table__container .ib-table__content{overflow-y:auto;position:relative;max-height:var(--ib-table-content-max-height-private)}.ib-table__container .ib-table__content--loading{pointer-events:none;overflow:hidden;filter:brightness(.95)}.ib-table__container .ib-table__content__progress-bar{position:sticky;height:0;top:var(--mat-table-header-container-height)}.ib-table__container .ib-table__content .mat-mdc-header-cell{border-right-color:var(--ib-table-outline-color-private);border-right-width:var(--ib-table-column-outline-width-private);border-right-style:solid}.ib-table__container .ib-table__content .mat-mdc-header-cell:last-child{border-right-style:none}.ib-table__container .ib-table__content .mat-mdc-cell{border-right-color:var(--ib-table-outline-color-private);border-right-width:var(--ib-table-column-outline-width-private);border-right-style:solid}.ib-table__container .ib-table__content .mat-mdc-cell:last-child{border-right-style:none}.ib-table__container .ib-table__content .ib-table__row--expanded .mat-mdc-cell{border-bottom-width:0}.ib-table__container .ib-table__content .ib-table__cell-detail{overflow:hidden;display:flex}.ib-table__container .ib-table__content .ib-table__row-group{height:0}.ib-table__container .ib-table__content .ib-table__row-group--hidden .mat-mdc-cell{border-bottom-width:0}.ib-table__container .ib-table__content .mat-mdc-no-data-row>td>div{display:flex;flex-direction:column;gap:4px;align-items:center;padding:12px 0}.ib-table__container ib-aggregate{display:flex;align-items:center;justify-content:flex-end;gap:2em}.ib-table__container ib-aggregate .ib-aggregate__function{display:flex;align-items:center;width:fit-content}.ib-table__container ib-aggregate .ib-aggregate__display-value{text-align:end;font-weight:500;white-space:nowrap}.ib-table__container .ib-table__rollup-row{box-shadow:0 -1px var(--ib-table-outline-color-private)}.ib-table__container .ib-table__paginator{border-top:1px solid var(--ib-table-outline-color-private)}td.cdk-column-ib-action>:first-child,td.mat-column-ib-action>:first-child{display:flex;gap:4px;justify-content:flex-end;align-content:center}\n"], dependencies: [{ kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i2$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$2.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i2$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i2$2.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i2$2.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "directive", type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: IbTable, isStandalone: false, selector: "ib-kai-table", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null }, tableName: { classPropertyName: "tableName", publicName: "tableName", isSignal: false, isRequired: false, transformFunction: null }, tableDef: { classPropertyName: "tableDef", publicName: "tableDef", isSignal: false, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: false, isRequired: false, transformFunction: null }, stripedRows: { classPropertyName: "stripedRows", publicName: "stripedRows", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, activeRowParams: { classPropertyName: "activeRowParams", publicName: "activeRowParams", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ib-table__container": "this.hasTableContainerClass", "class.ib-table-striped-rows": "this.stripedRows" } }, providers: [{ provide: IB_TABLE, useExisting: IbTable }], queries: [{ propertyName: "mobileColumns", predicate: IbColumn, isSignal: true }, { propertyName: "mobileRowGroup", first: true, predicate: IbKaiRowGroupDirective, descendants: true, isSignal: true }, { propertyName: "mobileFilter", first: true, predicate: IbFilter, descendants: true, isSignal: true }, { propertyName: "mobileFilters", predicate: IbFilterBase, descendants: true, isSignal: true }, { propertyName: "mobileHeaderActions", predicate: IbKaiTableAction, descendants: true, isSignal: true }, { propertyName: "mobileActionColumn", first: true, predicate: IbActionColumn, descendants: true, isSignal: true }, { propertyName: "selectionColumn", first: true, predicate: IbSelectionColumn, descendants: true }, { propertyName: "rowGroup", first: true, predicate: IbKaiRowGroupDirective, descendants: true }, { propertyName: "filter", first: true, predicate: IbFilter, descendants: true }, { propertyName: "view", first: true, predicate: IbTableViewGroup, descendants: true }, { propertyName: "exportAction", first: true, predicate: IbTableDataExportAction, descendants: true }, { propertyName: "columns", predicate: IbColumn }], viewQueries: [{ propertyName: "matTable", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], ngImport: i0, template: "<div class=\"ib-table-desktop\">\n  <section class=\"ib-table__toolbar\">\n    <ng-content select=\"ib-table-view-group\" />\n    <section class=\"ib-table__toolbar__actions\">\n      <ng-content select=\"ib-table-action-group, [ib-table-action-group]\" />\n      @for (portal of actionPortals; track portal) {\n        <ng-template [cdkPortalOutlet]=\"portal\" />\n      }\n    </section>\n  </section>\n\n  <ng-content select=\"ib-filter\" />\n\n  <section class=\"ib-table__content\" [class.ib-table__content--loading]=\"state === 'loading'\">\n    @if (state === 'loading') {\n      <div class=\"ib-table__content__progress-bar\">\n        <mat-progress-bar mode=\"indeterminate\" />\n      </div>\n    }\n\n    <table class=\"ib-table\" mat-table matSort multiTemplateDataRows [matSortActive]=\"this.dataSource.sortState.active\"\n      [matSortDirection]=\"this.dataSource.sortState.direction\" [dataSource]=\"dataSource\">\n      <ng-content select=\"ib-selection-column\" />\n      <ng-content />\n\n      @if (rowGroup) {\n        <ng-container matColumnDef=\"expandedDetail\">\n          <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\">\n            <div class=\"ib-table__cell-detail\" [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\">\n              <ng-container *ngTemplateOutlet=\"rowGroup.templateRef; context: {'$implicit': element, 'row': element}\" />\n            </div>\n          </td>\n        </ng-container>\n      }\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true;\"></tr>\n\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" class=\"ib-table__row\"\n        [class.ib-table__row--expanded]=\"expandedElement === row\"\n        [class.ib-table__row--selected]=\"activeRouteId() && row[activeRowParams()?.dataParamId]?.toString() === activeRouteId()\"\n      (click)=\"rowGroup && (expandedElement = expandedElement === row ? null : row)\"></tr>\n      @if (rowGroup) {\n        <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"ib-table__row-group\"\n        [class.ib-table__row-group--hidden]=\"expandedElement !== row\"></tr>\n      }\n\n      <tr *matNoDataRow>\n        <td [attr.colspan]=\"columns.length\">\n          <div>\n            @if (state === 'idle') {\n              <mat-icon style=\"color: #888\">inbox</mat-icon>\n              {{ \"common.noItems\" | translate }}\n            }\n\n            @if (state === 'http_error') {\n              <mat-icon style=\"color: #888\">error</mat-icon>\n              {{ \"common.httpError\" | translate }}\n            }\n          </div>\n        </td>\n      </tr>\n\n      @if (dataSource.shouldDisplayAggregationFooter) {\n        <tr class=\"ib-table__rollup-row\" mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n      }\n    </table>\n  </section>\n  <mat-paginator class=\"ib-table__paginator\"\n    [disabled]=\"state !== 'idle'\"\n    [style.display]=\"tableDef.paginator.hide ? 'none' : 'block'\"\n    [pageSize]=\"tableDef.paginator.pageSize\"\n    [showFirstLastButtons]=\"tableDef.paginator.showFirstLastButtons\"\n    [pageSizeOptions]=\"tableDef.paginator.pageSizeOptions\"\n    (page)=\"setPaginatorState({ pageIndex: $event.pageIndex, pageSize: $event.pageSize })\"\n    />\n</div>\n<div class=\"ib-table-mobile\">\n    <ib-kai-table-mobile\n      [tableName]=\"tableName\"\n      [displayedColumns]=\"displayedColumns\"\n      [data]=\"dataSource.data\"\n      [state]=\"state\"\n      [columns]=\"mobileColumns()\"\n      [rowGroup]=\"mobileRowGroup()\"\n      [filter]=\"mobileFilter()\"\n      [filters]=\"mobileFilters()\"\n      [headerActions]=\"mobileHeaderActions()\"\n      [actionColumn]=\"mobileActionColumn()\"\n      >\n    </ib-kai-table-mobile>\n</div>\n", styles: [".ib-table__container{--ib-table-minimum-rows-private: var(--ib-table-minimum-rows, 10);--ib-table-has-footer-row: 0;--ib-table-filter-max-height: 112px;--ib-table-content-max-height-private: var( --ib-table-content-max-height, calc( var(--mat-table-header-container-height) + var(--mat-table-row-item-container-height) * (var(--ib-table-minimum-rows-private) + var(--ib-table-has-footer-row)) ) );--ib-table-outline-color-private: var( --ib-table-outline-color, var(--mat-table-row-item-outline-color) );--ib-table-column-outline-width-private: var( --ib-table-column-outline-width, 0 );--ib-table-border-width: 1px;display:block;border:var(--ib-table-border-width) solid var(--ib-table-outline-color-private);overflow:hidden}.ib-table__container:has(.ib-table__rollup-row){--ib-table-has-footer-row: 1}.ib-table__container .ib-table__toolbar{display:flex;align-items:center;justify-content:flex-end}.ib-table__container .ib-table__toolbar:has(ib-table-view-group),.ib-table__container .ib-table__toolbar:has(>section:not(:empty)){height:56px;border-bottom:1px solid var(--ib-table-outline-color-private)}.ib-table__container .ib-table__toolbar__actions{padding-right:8px}.ib-table__container .ib-table__toolbar__actions ib-table-action-group{display:inline-block}.ib-table__container .ib-filter--hidden{max-height:0;opacity:0}.ib-table__container ib-filter:not(:has(.ib-filter--hidden))~.ib-table__content{max-height:calc(var(--ib-table-content-max-height-private) - var(--ib-table-filter-max-height))}.ib-table__container ib-filter:has(.ib-filter--hidden)~.ib-table__content{max-height:calc(var(--ib-table-content-max-height-private))}.ib-table__container .ib-table__content{overflow-y:auto;position:relative;max-height:var(--ib-table-content-max-height-private)}.ib-table__container .ib-table__content--loading{pointer-events:none;overflow:hidden;filter:brightness(.95)}.ib-table__container .ib-table__content__progress-bar{position:sticky;height:0;top:var(--mat-table-header-container-height)}.ib-table__container .ib-table__content .mat-mdc-header-cell{border-right-color:var(--ib-table-outline-color-private);border-right-width:var(--ib-table-column-outline-width-private);border-right-style:solid}.ib-table__container .ib-table__content .mat-mdc-header-cell:last-child{border-right-style:none}.ib-table__container .ib-table__content .mat-mdc-cell{border-right-color:var(--ib-table-outline-color-private);border-right-width:var(--ib-table-column-outline-width-private);border-right-style:solid}.ib-table__container .ib-table__content .mat-mdc-cell:last-child{border-right-style:none}.ib-table__container .ib-table__content .ib-table__row--expanded .mat-mdc-cell{border-bottom-width:0}.ib-table__container .ib-table__content .ib-table__cell-detail{overflow:hidden;display:flex}.ib-table__container .ib-table__content .ib-table__row-group{height:0}.ib-table__container .ib-table__content .ib-table__row-group--hidden .mat-mdc-cell{border-bottom-width:0}.ib-table__container .ib-table__content .mat-mdc-no-data-row>td>div{display:flex;flex-direction:column;gap:4px;align-items:center;padding:12px 0}.ib-table__container ib-aggregate{display:flex;align-items:center;justify-content:flex-end;gap:2em}.ib-table__container ib-aggregate .ib-aggregate__function{display:flex;align-items:center;width:fit-content}.ib-table__container ib-aggregate .ib-aggregate__display-value{text-align:end;font-weight:500;white-space:nowrap}.ib-table__container .ib-table__rollup-row{box-shadow:0 -1px var(--ib-table-outline-color-private)}.ib-table__container .ib-table__paginator{border-top:1px solid var(--ib-table-outline-color-private)}td.cdk-column-ib-action>:first-child,td.mat-column-ib-action>:first-child{display:flex;gap:4px;justify-content:flex-end;align-content:center}.ib-table-mobile{display:none!important}@media (max-width: 767px){.ib-table-desktop{display:none!important}.ib-table-mobile{display:block!important}}\n"], dependencies: [{ kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i2$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$2.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i2$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i2$2.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i2$2.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "directive", type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i7$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: IbKaiTableMobileComponent, selector: "ib-kai-table-mobile", inputs: ["state", "data", "dataSource", "tableName", "tableDef", "displayedColumns", "pageSize", "columns", "rowGroup", "filter", "filters", "headerActions", "actionColumn"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], animations: [
             trigger("detailExpand", [
                 state("collapsed", style({ height: "0px", minHeight: "0" })),
                 state("expanded", style({ height: "*" })),
@@ -7831,16 +8470,17 @@ class IbTable {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: IbTable, decorators: [{
             type: Component,
-            args: [{ selector: "ib-kai-table", host: {
-                        class: "ib-table__container",
-                    }, animations: [
+            args: [{ selector: "ib-kai-table", animations: [
                         trigger("detailExpand", [
                             state("collapsed", style({ height: "0px", minHeight: "0" })),
                             state("expanded", style({ height: "*" })),
                             transition("expanded <=> collapsed", animate("225ms cubic-bezier(0.4, 0.0, 0.2, 1)")),
                         ]),
-                    ], providers: [{ provide: IB_TABLE, useExisting: IbTable }], encapsulation: ViewEncapsulation.None, standalone: false, template: "<section class=\"ib-table__toolbar\">\n  <ng-content select=\"ib-table-view-group\" />\n  <section class=\"ib-table__toolbar__actions\">\n    <ng-content select=\"ib-table-action-group, [ib-table-action-group]\" />\n    @for (portal of actionPortals; track portal) {\n      <ng-template [cdkPortalOutlet]=\"portal\" />\n    }\n  </section>\n</section>\n\n<ng-content select=\"ib-filter\" />\n\n<section class=\"ib-table__content\" [class.ib-table__content--loading]=\"state === 'loading'\">\n  @if (state === 'loading') {\n    <div class=\"ib-table__content__progress-bar\">\n      <mat-progress-bar mode=\"indeterminate\" />\n    </div>\n  }\n\n  <table class=\"ib-table\" mat-table matSort multiTemplateDataRows [matSortActive]=\"this.dataSource.sortState.active\"\n    [matSortDirection]=\"this.dataSource.sortState.direction\" [dataSource]=\"dataSource\">\n    <ng-content select=\"ib-selection-column\" />\n    <ng-content />\n\n    @if (rowGroup) {\n      <ng-container matColumnDef=\"expandedDetail\">\n        <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\">\n          <div class=\"ib-table__cell-detail\" [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\">\n            <ng-container *ngTemplateOutlet=\"rowGroup.templateRef; context: {'$implicit': element, 'row': element}\" />\n          </div>\n        </td>\n      </ng-container>\n    }\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true;\"></tr>\n\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" class=\"ib-table__row\"\n      [class.ib-table__row--expanded]=\"expandedElement === row\"\n      [class.ib-table__row--selected]=\"activeRouteId() && row[activeRowParams()?.dataParamId]?.toString() === activeRouteId()\"\n    (click)=\"rowGroup && (expandedElement = expandedElement === row ? null : row)\"></tr>\n    @if (rowGroup) {\n      <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"ib-table__row-group\"\n      [class.ib-table__row-group--hidden]=\"expandedElement !== row\"></tr>\n    }\n\n    <tr *matNoDataRow>\n      <td [attr.colspan]=\"columns.length\">\n        <div>\n          @if (state === 'idle') {\n            <mat-icon style=\"color: #888\">inbox</mat-icon>\n            {{ \"common.noItems\" | translate }}\n          }\n\n          @if (state === 'http_error') {\n            <mat-icon style=\"color: #888\">error</mat-icon>\n            {{ \"common.httpError\" | translate }}\n          }\n        </div>\n      </td>\n    </tr>\n\n    @if (dataSource.shouldDisplayAggregationFooter) {\n      <tr class=\"ib-table__rollup-row\" mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n    }\n  </table>\n</section>\n<mat-paginator class=\"ib-table__paginator\"\n  [disabled]=\"state !== 'idle'\"\n  [style.display]=\"tableDef.paginator.hide ? 'none' : 'block'\"\n  [pageSize]=\"tableDef.paginator.pageSize\"\n  [showFirstLastButtons]=\"tableDef.paginator.showFirstLastButtons\"\n  [pageSizeOptions]=\"tableDef.paginator.pageSizeOptions\"\n  (page)=\"setPaginatorState({ pageIndex: $event.pageIndex, pageSize: $event.pageSize })\"\n  />\n", styles: [".ib-table__container{--ib-table-minimum-rows-private: var(--ib-table-minimum-rows, 10);--ib-table-has-footer-row: 0;--ib-table-filter-max-height: 112px;--ib-table-content-max-height-private: var( --ib-table-content-max-height, calc( var(--mat-table-header-container-height) + var(--mat-table-row-item-container-height) * (var(--ib-table-minimum-rows-private) + var(--ib-table-has-footer-row)) ) );--ib-table-outline-color-private: var( --ib-table-outline-color, var(--mat-table-row-item-outline-color) );--ib-table-column-outline-width-private: var( --ib-table-column-outline-width, 0 );--ib-table-border-width: 1px;display:block;border:var(--ib-table-border-width) solid var(--ib-table-outline-color-private);overflow:hidden}.ib-table__container:has(.ib-table__rollup-row){--ib-table-has-footer-row: 1}.ib-table__container .ib-table__toolbar{display:flex;align-items:center;justify-content:flex-end}.ib-table__container .ib-table__toolbar:has(ib-table-view-group),.ib-table__container .ib-table__toolbar:has(>section:not(:empty)){height:56px;border-bottom:1px solid var(--ib-table-outline-color-private)}.ib-table__container .ib-table__toolbar__actions{padding-right:8px}.ib-table__container .ib-table__toolbar__actions ib-table-action-group{display:inline-block}.ib-table__container .ib-filter--hidden{max-height:0;opacity:0}.ib-table__container ib-filter:not(:has(.ib-filter--hidden))~.ib-table__content{max-height:calc(var(--ib-table-content-max-height-private) - var(--ib-table-filter-max-height))}.ib-table__container ib-filter:has(.ib-filter--hidden)~.ib-table__content{max-height:calc(var(--ib-table-content-max-height-private))}.ib-table__container .ib-table__content{overflow-y:auto;position:relative;max-height:var(--ib-table-content-max-height-private)}.ib-table__container .ib-table__content--loading{pointer-events:none;overflow:hidden;filter:brightness(.95)}.ib-table__container .ib-table__content__progress-bar{position:sticky;height:0;top:var(--mat-table-header-container-height)}.ib-table__container .ib-table__content .mat-mdc-header-cell{border-right-color:var(--ib-table-outline-color-private);border-right-width:var(--ib-table-column-outline-width-private);border-right-style:solid}.ib-table__container .ib-table__content .mat-mdc-header-cell:last-child{border-right-style:none}.ib-table__container .ib-table__content .mat-mdc-cell{border-right-color:var(--ib-table-outline-color-private);border-right-width:var(--ib-table-column-outline-width-private);border-right-style:solid}.ib-table__container .ib-table__content .mat-mdc-cell:last-child{border-right-style:none}.ib-table__container .ib-table__content .ib-table__row--expanded .mat-mdc-cell{border-bottom-width:0}.ib-table__container .ib-table__content .ib-table__cell-detail{overflow:hidden;display:flex}.ib-table__container .ib-table__content .ib-table__row-group{height:0}.ib-table__container .ib-table__content .ib-table__row-group--hidden .mat-mdc-cell{border-bottom-width:0}.ib-table__container .ib-table__content .mat-mdc-no-data-row>td>div{display:flex;flex-direction:column;gap:4px;align-items:center;padding:12px 0}.ib-table__container ib-aggregate{display:flex;align-items:center;justify-content:flex-end;gap:2em}.ib-table__container ib-aggregate .ib-aggregate__function{display:flex;align-items:center;width:fit-content}.ib-table__container ib-aggregate .ib-aggregate__display-value{text-align:end;font-weight:500;white-space:nowrap}.ib-table__container .ib-table__rollup-row{box-shadow:0 -1px var(--ib-table-outline-color-private)}.ib-table__container .ib-table__paginator{border-top:1px solid var(--ib-table-outline-color-private)}td.cdk-column-ib-action>:first-child,td.mat-column-ib-action>:first-child{display:flex;gap:4px;justify-content:flex-end;align-content:center}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { columns: [{
+                    ], providers: [{ provide: IB_TABLE, useExisting: IbTable }], encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"ib-table-desktop\">\n  <section class=\"ib-table__toolbar\">\n    <ng-content select=\"ib-table-view-group\" />\n    <section class=\"ib-table__toolbar__actions\">\n      <ng-content select=\"ib-table-action-group, [ib-table-action-group]\" />\n      @for (portal of actionPortals; track portal) {\n        <ng-template [cdkPortalOutlet]=\"portal\" />\n      }\n    </section>\n  </section>\n\n  <ng-content select=\"ib-filter\" />\n\n  <section class=\"ib-table__content\" [class.ib-table__content--loading]=\"state === 'loading'\">\n    @if (state === 'loading') {\n      <div class=\"ib-table__content__progress-bar\">\n        <mat-progress-bar mode=\"indeterminate\" />\n      </div>\n    }\n\n    <table class=\"ib-table\" mat-table matSort multiTemplateDataRows [matSortActive]=\"this.dataSource.sortState.active\"\n      [matSortDirection]=\"this.dataSource.sortState.direction\" [dataSource]=\"dataSource\">\n      <ng-content select=\"ib-selection-column\" />\n      <ng-content />\n\n      @if (rowGroup) {\n        <ng-container matColumnDef=\"expandedDetail\">\n          <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\">\n            <div class=\"ib-table__cell-detail\" [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\">\n              <ng-container *ngTemplateOutlet=\"rowGroup.templateRef; context: {'$implicit': element, 'row': element}\" />\n            </div>\n          </td>\n        </ng-container>\n      }\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true;\"></tr>\n\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" class=\"ib-table__row\"\n        [class.ib-table__row--expanded]=\"expandedElement === row\"\n        [class.ib-table__row--selected]=\"activeRouteId() && row[activeRowParams()?.dataParamId]?.toString() === activeRouteId()\"\n      (click)=\"rowGroup && (expandedElement = expandedElement === row ? null : row)\"></tr>\n      @if (rowGroup) {\n        <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"ib-table__row-group\"\n        [class.ib-table__row-group--hidden]=\"expandedElement !== row\"></tr>\n      }\n\n      <tr *matNoDataRow>\n        <td [attr.colspan]=\"columns.length\">\n          <div>\n            @if (state === 'idle') {\n              <mat-icon style=\"color: #888\">inbox</mat-icon>\n              {{ \"common.noItems\" | translate }}\n            }\n\n            @if (state === 'http_error') {\n              <mat-icon style=\"color: #888\">error</mat-icon>\n              {{ \"common.httpError\" | translate }}\n            }\n          </div>\n        </td>\n      </tr>\n\n      @if (dataSource.shouldDisplayAggregationFooter) {\n        <tr class=\"ib-table__rollup-row\" mat-footer-row *matFooterRowDef=\"displayedColumns; sticky: true\"></tr>\n      }\n    </table>\n  </section>\n  <mat-paginator class=\"ib-table__paginator\"\n    [disabled]=\"state !== 'idle'\"\n    [style.display]=\"tableDef.paginator.hide ? 'none' : 'block'\"\n    [pageSize]=\"tableDef.paginator.pageSize\"\n    [showFirstLastButtons]=\"tableDef.paginator.showFirstLastButtons\"\n    [pageSizeOptions]=\"tableDef.paginator.pageSizeOptions\"\n    (page)=\"setPaginatorState({ pageIndex: $event.pageIndex, pageSize: $event.pageSize })\"\n    />\n</div>\n<div class=\"ib-table-mobile\">\n    <ib-kai-table-mobile\n      [tableName]=\"tableName\"\n      [displayedColumns]=\"displayedColumns\"\n      [data]=\"dataSource.data\"\n      [state]=\"state\"\n      [columns]=\"mobileColumns()\"\n      [rowGroup]=\"mobileRowGroup()\"\n      [filter]=\"mobileFilter()\"\n      [filters]=\"mobileFilters()\"\n      [headerActions]=\"mobileHeaderActions()\"\n      [actionColumn]=\"mobileActionColumn()\"\n      >\n    </ib-kai-table-mobile>\n</div>\n", styles: [".ib-table__container{--ib-table-minimum-rows-private: var(--ib-table-minimum-rows, 10);--ib-table-has-footer-row: 0;--ib-table-filter-max-height: 112px;--ib-table-content-max-height-private: var( --ib-table-content-max-height, calc( var(--mat-table-header-container-height) + var(--mat-table-row-item-container-height) * (var(--ib-table-minimum-rows-private) + var(--ib-table-has-footer-row)) ) );--ib-table-outline-color-private: var( --ib-table-outline-color, var(--mat-table-row-item-outline-color) );--ib-table-column-outline-width-private: var( --ib-table-column-outline-width, 0 );--ib-table-border-width: 1px;display:block;border:var(--ib-table-border-width) solid var(--ib-table-outline-color-private);overflow:hidden}.ib-table__container:has(.ib-table__rollup-row){--ib-table-has-footer-row: 1}.ib-table__container .ib-table__toolbar{display:flex;align-items:center;justify-content:flex-end}.ib-table__container .ib-table__toolbar:has(ib-table-view-group),.ib-table__container .ib-table__toolbar:has(>section:not(:empty)){height:56px;border-bottom:1px solid var(--ib-table-outline-color-private)}.ib-table__container .ib-table__toolbar__actions{padding-right:8px}.ib-table__container .ib-table__toolbar__actions ib-table-action-group{display:inline-block}.ib-table__container .ib-filter--hidden{max-height:0;opacity:0}.ib-table__container ib-filter:not(:has(.ib-filter--hidden))~.ib-table__content{max-height:calc(var(--ib-table-content-max-height-private) - var(--ib-table-filter-max-height))}.ib-table__container ib-filter:has(.ib-filter--hidden)~.ib-table__content{max-height:calc(var(--ib-table-content-max-height-private))}.ib-table__container .ib-table__content{overflow-y:auto;position:relative;max-height:var(--ib-table-content-max-height-private)}.ib-table__container .ib-table__content--loading{pointer-events:none;overflow:hidden;filter:brightness(.95)}.ib-table__container .ib-table__content__progress-bar{position:sticky;height:0;top:var(--mat-table-header-container-height)}.ib-table__container .ib-table__content .mat-mdc-header-cell{border-right-color:var(--ib-table-outline-color-private);border-right-width:var(--ib-table-column-outline-width-private);border-right-style:solid}.ib-table__container .ib-table__content .mat-mdc-header-cell:last-child{border-right-style:none}.ib-table__container .ib-table__content .mat-mdc-cell{border-right-color:var(--ib-table-outline-color-private);border-right-width:var(--ib-table-column-outline-width-private);border-right-style:solid}.ib-table__container .ib-table__content .mat-mdc-cell:last-child{border-right-style:none}.ib-table__container .ib-table__content .ib-table__row--expanded .mat-mdc-cell{border-bottom-width:0}.ib-table__container .ib-table__content .ib-table__cell-detail{overflow:hidden;display:flex}.ib-table__container .ib-table__content .ib-table__row-group{height:0}.ib-table__container .ib-table__content .ib-table__row-group--hidden .mat-mdc-cell{border-bottom-width:0}.ib-table__container .ib-table__content .mat-mdc-no-data-row>td>div{display:flex;flex-direction:column;gap:4px;align-items:center;padding:12px 0}.ib-table__container ib-aggregate{display:flex;align-items:center;justify-content:flex-end;gap:2em}.ib-table__container ib-aggregate .ib-aggregate__function{display:flex;align-items:center;width:fit-content}.ib-table__container ib-aggregate .ib-aggregate__display-value{text-align:end;font-weight:500;white-space:nowrap}.ib-table__container .ib-table__rollup-row{box-shadow:0 -1px var(--ib-table-outline-color-private)}.ib-table__container .ib-table__paginator{border-top:1px solid var(--ib-table-outline-color-private)}td.cdk-column-ib-action>:first-child,td.mat-column-ib-action>:first-child{display:flex;gap:4px;justify-content:flex-end;align-content:center}.ib-table-mobile{display:none!important}@media (max-width: 767px){.ib-table-desktop{display:none!important}.ib-table-mobile{display:block!important}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { hasTableContainerClass: [{
+                type: HostBinding,
+                args: ['class.ib-table__container']
+            }], columns: [{
                 type: ContentChildren,
                 args: [IbColumn]
             }], selectionColumn: [{
@@ -7957,7 +8597,8 @@ class IbKaiTableModule {
             MatTooltipModule,
             MatCheckboxModule,
             MatPaginatorModule,
-            MatProgressBarModule, i1.TranslateModule], exports: [IbTable,
+            MatProgressBarModule,
+            IbKaiTableMobileComponent, i1.TranslateModule], exports: [IbTable,
             IbKaiRowGroupDirective,
             IbCellDef,
             IbSelectionColumn,
@@ -7990,6 +8631,7 @@ class IbKaiTableModule {
             MatCheckboxModule,
             MatPaginatorModule,
             MatProgressBarModule,
+            IbKaiTableMobileComponent,
             TranslateModule.forChild({
                 extend: true,
             })] });
@@ -8035,6 +8677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         MatCheckboxModule,
                         MatPaginatorModule,
                         MatProgressBarModule,
+                        IbKaiTableMobileComponent,
                         TranslateModule.forChild({
                             extend: true,
                         }),
@@ -9946,5 +10589,5 @@ var SingleValueVariant;
  * Generated bundle index. Do not edit.
  */
 
-export { AppLoadingDirective, BarChartComponent, IB_DATA_JSPDF_AUTOTABLE_USER_OPTIONS, IB_DATA_JSPDF_OPTIONS, IB_TRANSLATE_ASSETS_PATH, IbActionColumn, IbAggregate, IbAggregateCell, IbAuthGuard, IbAuthTypes, IbAverageAggregateProvider, IbBooleanFilter, IbBreadcrumbComponent, IbBreadcrumbModule, IbCSVExportProvider, IbCSVExportService, IbCellDef, IbCheckbox, IbColumn, IbDataExportModule, IbDataExportProvider, IbDataExportService, IbDataTransformer, IbDateColumn, IbDateFilter, IbDateFilterCategory, IbDateFilterPeriod, IbDefaultTableView, IbDropdown, IbDynamicFormArrayComponent, IbDynamicFormComponent, IbDynamicFormControlComponent, IbDynamicFormsModule, IbFilter, IbFilterActionGroup, IbFilterBase, IbFilterButton, IbFilterModule, IbFilterOperator, IbFilterPipe, IbFormArray, IbFormControlBase, IbFormControlBaseComponent, IbFormControlDirective, IbFormControlErrors, IbFormControlService, IbHttpModule, IbHttpTestModule, IbKaiRowGroupDirective, IbKaiTableAction, IbKaiTableActionGroup, IbKaiTableModule, IbLoadingDirective, IbLoadingSkeletonContainerComponent, IbLoadingSkeletonRectComponent, IbLoadingStubDirective, IbLoginGuard, IbLoginService, IbMainMenuBarComponent, IbMainMenuBarStubComponent, IbMainMenuDialogComponent, IbMainMenuExpandedComponent, IbMainMenuHeaderFooterButtonsComponent, IbMainMenuModule, IbMainMenuTestModule, IbMatActionsPosition, IbMatAutocompleteComponent, IbMatAutocompleteControl, IbMatButtonComponent, IbMatButtonControl, IbMatCheckboxComponent, IbMatCheckboxControl, IbMatDatepickerComponent, IbMatDatepickerControl, IbMatDropdownComponent, IbMatDropdownControl, IbMatLabelComponent, IbMatLabelControl, IbMatPaddingComponent, IbMatPaddingControl, IbMatRadioComponent, IbMatRadioControl, IbMatSlideToggleComponent, IbMatSlideToggleControl, IbMatTextareaComponent, IbMatTextareaControl, IbMatTextboxComponent, IbMatTextboxControl, IbMaterialBreadcrumbComponent, IbMaterialFormArrayComponent, IbMaterialFormComponent, IbMaterialFormControlComponent, IbMaterialFormModule, IbMaterialFormStubComponent, IbMaterialFormTestModule, IbModalMessageComponent, IbModalMessageService, IbModalMessageServiceStub, IbModalModule, IbModalTestModule, IbNumberColumn, IbNumberFilter, IbPDFExportProvider, IbPDFExportService, IbPatchFormValue, IbRadio, IbRoleCheckDirective, IbRoleGuard, IbSearchBar, IbSelectionColumn, IbSession, IbSessionEffects, IbSortHeader, IbSpinnerLoadingComponent, IbStorageModule, IbStorageService, IbStorageTestModule, IbStorageTypes, IbSumAggregateProvider, IbTable, IbTableActionModule, IbTableDataExportAction, IbTableDataExportDialog, IbTableRemoteDataSource, IbTableUrlService, IbTableView, IbTableViewDialog, IbTableViewGroup, IbTagFilter, IbTextColumn, IbTextFilter, IbTextbox, IbToastModule, IbToastNotification, IbToastTestModule, IbTranslateModuleLoader, IbUploaderComponent, IbUploaderModule, IbUserLogin, IbView, IbViewList, IbViewModule, IbViewService, IbXLSXExportService, IbXLXSExportProvider, LineChartComponent, MapPipe, OVERRIDE_EXPORT_FORMATS, PieChartComponent, RingGaugeComponent, SingleValueComponent, SpinnerLoadingStubComponent, TableViewActions, and, applyFilter, contains, dateRequiredValidator, endsWith, eq, evalOperation, gt, gte, ibAuthActions, ibCrudToast, ibHttpEffects, ibHttpReducers, ibKaiTableExtraSelectors, ibLoaderActions, ibLoaderExtraSelectors, ibLoaderFeature, ibLoaderReducerMain, ibMatDatepickerTranslate, ibSelectAccessTokenExp, ibSelectActiveSession, ibSelectDecodedData, ibSelectIsHttpLoading, ibSelectIsHttpUrlLoading, ibSessionFeature, ibSessionReducerMain, ibSetupHydration, ibTableSelectLastQueryString, ibTableSelectLastQueryStringRaw, ibTableSelectUrlState, ibViewsFeature, initialState, lt, lte, ncontains, neq, none, or, reducers, selectTableViews, selectViews, startsWith, toastServiceStub, urlStateActions, viewsReducer };
+export { AppLoadingDirective, BarChartComponent, IB_DATA_JSPDF_AUTOTABLE_USER_OPTIONS, IB_DATA_JSPDF_OPTIONS, IB_TRANSLATE_ASSETS_PATH, IbActionColumn, IbAggregate, IbAggregateCell, IbAuthGuard, IbAuthTypes, IbAverageAggregateProvider, IbBooleanFilter, IbBreadcrumbComponent, IbBreadcrumbModule, IbCSVExportProvider, IbCSVExportService, IbCellDef, IbCheckbox, IbColumn, IbDataExportModule, IbDataExportProvider, IbDataExportService, IbDataTransformer, IbDateColumn, IbDateFilter, IbDateFilterCategory, IbDateFilterPeriod, IbDefaultTableView, IbDropdown, IbDynamicFormArrayComponent, IbDynamicFormComponent, IbDynamicFormControlComponent, IbDynamicFormsModule, IbFilter, IbFilterActionGroup, IbFilterBase, IbFilterButton, IbFilterModule, IbFilterOperator, IbFilterPipe, IbFormArray, IbFormControlBase, IbFormControlBaseComponent, IbFormControlDirective, IbFormControlErrors, IbFormControlService, IbHttpModule, IbHttpTestModule, IbKaiRowGroupDirective, IbKaiTableAction, IbKaiTableActionGroup, IbKaiTableMobileComponent, IbKaiTableMobileInfiniteScrollComponent, IbKaiTableMobileItemComponent, IbKaiTableMobileToolbarComponent, IbKaiTableModule, IbLoadingDirective, IbLoadingSkeletonContainerComponent, IbLoadingSkeletonRectComponent, IbLoadingStubDirective, IbLoginGuard, IbLoginService, IbMainMenuBarComponent, IbMainMenuBarStubComponent, IbMainMenuDialogComponent, IbMainMenuExpandedComponent, IbMainMenuHeaderFooterButtonsComponent, IbMainMenuModule, IbMainMenuTestModule, IbMatActionsPosition, IbMatAutocompleteComponent, IbMatAutocompleteControl, IbMatButtonComponent, IbMatButtonControl, IbMatCheckboxComponent, IbMatCheckboxControl, IbMatDatepickerComponent, IbMatDatepickerControl, IbMatDropdownComponent, IbMatDropdownControl, IbMatLabelComponent, IbMatLabelControl, IbMatPaddingComponent, IbMatPaddingControl, IbMatRadioComponent, IbMatRadioControl, IbMatSlideToggleComponent, IbMatSlideToggleControl, IbMatTextareaComponent, IbMatTextareaControl, IbMatTextboxComponent, IbMatTextboxControl, IbMaterialBreadcrumbComponent, IbMaterialFormArrayComponent, IbMaterialFormComponent, IbMaterialFormControlComponent, IbMaterialFormModule, IbMaterialFormStubComponent, IbMaterialFormTestModule, IbModalMessageComponent, IbModalMessageService, IbModalMessageServiceStub, IbModalModule, IbModalTestModule, IbNumberColumn, IbNumberFilter, IbPDFExportProvider, IbPDFExportService, IbPatchFormValue, IbRadio, IbRoleCheckDirective, IbRoleGuard, IbSearchBar, IbSelectionColumn, IbSession, IbSessionEffects, IbSortHeader, IbSpinnerLoadingComponent, IbStorageModule, IbStorageService, IbStorageTestModule, IbStorageTypes, IbSumAggregateProvider, IbTable, IbTableActionModule, IbTableDataExportAction, IbTableDataExportDialog, IbTableRemoteDataSource, IbTableUrlService, IbTableView, IbTableViewDialog, IbTableViewGroup, IbTagFilter, IbTextColumn, IbTextFilter, IbTextbox, IbToastModule, IbToastNotification, IbToastTestModule, IbTranslateModuleLoader, IbUploaderComponent, IbUploaderModule, IbUserLogin, IbView, IbViewList, IbViewModule, IbViewService, IbXLSXExportService, IbXLXSExportProvider, LineChartComponent, MapPipe, OVERRIDE_EXPORT_FORMATS, PieChartComponent, RingGaugeComponent, SingleValueComponent, SpinnerLoadingStubComponent, TableViewActions, and, applyFilter, contains, dateRequiredValidator, endsWith, eq, evalOperation, gt, gte, ibAuthActions, ibCrudToast, ibHttpEffects, ibHttpReducers, ibKaiTableExtraSelectors, ibLoaderActions, ibLoaderExtraSelectors, ibLoaderFeature, ibLoaderReducerMain, ibMatDatepickerTranslate, ibSelectAccessTokenExp, ibSelectActiveSession, ibSelectDecodedData, ibSelectIsHttpLoading, ibSelectIsHttpUrlLoading, ibSessionFeature, ibSessionReducerMain, ibSetupHydration, ibTableSelectLastQueryString, ibTableSelectLastQueryStringRaw, ibTableSelectUrlState, ibViewsFeature, initialState, lt, lte, ncontains, neq, none, or, reducers, selectTableViews, selectViews, startsWith, toastServiceStub, urlStateActions, viewsReducer };
 //# sourceMappingURL=inobeta-ui.mjs.map