@xiriframework/xiri-ng 0.2.0 → 0.2.3

package/fesm2022/xiriframework-xiri-ng.mjs

@@ -3204,25 +3204,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 }]
         }] });
 
-class XiriSkeletonComponent {
-    constructor() {
-        this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
-        this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
-        this.height = input('1em', ...(ngDevMode ? [{ debugName: "height" }] : []));
-        this.lines = input(1, ...(ngDevMode ? [{ debugName: "lines" }] : []));
-        this.columns = input(4, ...(ngDevMode ? [{ debugName: "columns" }] : []));
-        this.animate = input(true, ...(ngDevMode ? [{ debugName: "animate" }] : []));
-        this.linesArray = computed(() => Array.from({ length: this.lines() }), ...(ngDevMode ? [{ debugName: "linesArray" }] : []));
-        this.columnsArray = computed(() => Array.from({ length: this.columns() }), ...(ngDevMode ? [{ debugName: "columnsArray" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: XiriSkeletonComponent, isStandalone: true, selector: "xiri-skeleton", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-label": "Laden..." } }, ngImport: i0, template: "@switch (type()) {\n\t@case ('text') {\n\t\t<div class=\"skeleton-text\">\n\t\t\t@for (_ of linesArray(); track $index) {\n\t\t\t\t<div class=\"skeleton-line\" [class.animate]=\"animate()\"\n\t\t\t\t     [style.width]=\"$last ? '60%' : width()\"\n\t\t\t\t     [style.height]=\"height()\"></div>\n\t\t\t}\n\t\t</div>\n\t}\n\t@case ('circle') {\n\t\t<div class=\"skeleton-circle\" [class.animate]=\"animate()\"\n\t\t     [style.width]=\"width()\"\n\t\t     [style.height]=\"width()\"></div>\n\t}\n\t@case ('rect') {\n\t\t<div class=\"skeleton-rect\" [class.animate]=\"animate()\"\n\t\t     [style.width]=\"width()\"\n\t\t     [style.height]=\"height()\"></div>\n\t}\n\t@case ('table-row') {\n\t\t<div class=\"skeleton-table\">\n\t\t\t@for (_ of linesArray(); track $index) {\n\t\t\t\t<div class=\"skeleton-table-row\">\n\t\t\t\t\t@for (_ of columnsArray(); track $index) {\n\t\t\t\t\t\t<div class=\"skeleton-table-cell\">\n\t\t\t\t\t\t\t<div class=\"skeleton-line\" [class.animate]=\"animate()\"></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t}\n}\n", styles: ["@keyframes shimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}:host{display:block}.skeleton-line,.skeleton-circle,.skeleton-rect{background-color:var(--color-gray-200, #E9ECEF);border-radius:4px}.skeleton-line.animate,.skeleton-circle.animate,.skeleton-rect.animate{background-image:linear-gradient(90deg,var(--color-gray-200, #E9ECEF) 0px,var(--color-gray-100, #F8F9FA) 40px,var(--color-gray-200, #E9ECEF) 80px);background-size:200px 100%;animation:shimmer 1.5s ease-in-out infinite}.skeleton-text{display:flex;flex-direction:column;gap:8px}.skeleton-text .skeleton-line{height:1em}.skeleton-circle{border-radius:50%}.skeleton-rect{border-radius:8px}.skeleton-table{display:flex;flex-direction:column;gap:12px}.skeleton-table-row{display:flex;gap:16px}.skeleton-table-cell{flex:1}.skeleton-table-cell .skeleton-line{height:1em;width:100%}@media(prefers-reduced-motion:reduce){.skeleton-line.animate,.skeleton-circle.animate,.skeleton-rect.animate{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriSkeletonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'xiri-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, host: { 'role': 'status', 'aria-label': 'Laden...' }, template: "@switch (type()) {\n\t@case ('text') {\n\t\t<div class=\"skeleton-text\">\n\t\t\t@for (_ of linesArray(); track $index) {\n\t\t\t\t<div class=\"skeleton-line\" [class.animate]=\"animate()\"\n\t\t\t\t     [style.width]=\"$last ? '60%' : width()\"\n\t\t\t\t     [style.height]=\"height()\"></div>\n\t\t\t}\n\t\t</div>\n\t}\n\t@case ('circle') {\n\t\t<div class=\"skeleton-circle\" [class.animate]=\"animate()\"\n\t\t     [style.width]=\"width()\"\n\t\t     [style.height]=\"width()\"></div>\n\t}\n\t@case ('rect') {\n\t\t<div class=\"skeleton-rect\" [class.animate]=\"animate()\"\n\t\t     [style.width]=\"width()\"\n\t\t     [style.height]=\"height()\"></div>\n\t}\n\t@case ('table-row') {\n\t\t<div class=\"skeleton-table\">\n\t\t\t@for (_ of linesArray(); track $index) {\n\t\t\t\t<div class=\"skeleton-table-row\">\n\t\t\t\t\t@for (_ of columnsArray(); track $index) {\n\t\t\t\t\t\t<div class=\"skeleton-table-cell\">\n\t\t\t\t\t\t\t<div class=\"skeleton-line\" [class.animate]=\"animate()\"></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t}\n}\n", styles: ["@keyframes shimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}:host{display:block}.skeleton-line,.skeleton-circle,.skeleton-rect{background-color:var(--color-gray-200, #E9ECEF);border-radius:4px}.skeleton-line.animate,.skeleton-circle.animate,.skeleton-rect.animate{background-image:linear-gradient(90deg,var(--color-gray-200, #E9ECEF) 0px,var(--color-gray-100, #F8F9FA) 40px,var(--color-gray-200, #E9ECEF) 80px);background-size:200px 100%;animation:shimmer 1.5s ease-in-out infinite}.skeleton-text{display:flex;flex-direction:column;gap:8px}.skeleton-text .skeleton-line{height:1em}.skeleton-circle{border-radius:50%}.skeleton-rect{border-radius:8px}.skeleton-table{display:flex;flex-direction:column;gap:12px}.skeleton-table-row{display:flex;gap:16px}.skeleton-table-cell{flex:1}.skeleton-table-cell .skeleton-line{height:1em;width:100%}@media(prefers-reduced-motion:reduce){.skeleton-line.animate,.skeleton-circle.animate,.skeleton-rect.animate{animation:none}}\n"] }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }] } });
-
 class XiriEmptyStateComponent {
     constructor() {
         this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
@@ -3735,7 +3716,7 @@ class XiriTableComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: XiriTableComponent, isStandalone: true, selector: "xiri-table", inputs: { dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickedRow: "clickedRow" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-card class=\"xiritablecard mat-mdc-elevation-specific mat-elevation-z3\">\n\t<div class=\"xiritable\" [class]=\"options.class\">\n\t\t<div class=\"table-full\">\n\t\t\t<div class=\"header\">\n\t\t\t\t@if (options.reload) {\n\t\t\t\t\t<div class=\"buttons\">\n\t\t\t\t\t\t<button mat-icon-button (click)=\"reload()\" color=\"primary\" aria-label=\"Tabelle neu laden\">\n\t\t\t\t\t\t\t<mat-icon>autorenew</mat-icon>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"middle\" [class.hasButtons]=\"options.buttons\">{{ options.title }}</div>\n\t\t\t\t@if (options.buttons) {\n\t\t\t\t\t<xiri-buttonline [settings]=\"options.buttons\" (result)=\"buttonReturn($event)\"\n\t\t\t\t\t                 [filterData]=\"_filterData()\"></xiri-buttonline>\n\t\t\t\t}\n\t\t\t\t@if (options.search) {\n\t\t\t\t\t<xiri-search (changed)=\"searchDo($event)\" [placeholder]=\"''\" [text]=\"searchText\"></xiri-search>\n\t\t\t\t}\n\t\t\t\t@if (options.saveInput) {\n\t\t\t\t\t<div class=\"buttons saveInput\">\n\t\t\t\t\t\t<button mat-raised-button (click)=\"saveInputData()\" color=\"primary\">\n\t\t\t\t\t\t\t{{ options.saveInput }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"tableout\" [style.max-height]=\"options.scrollHeight || null\">\n\t\t\t\t<table mat-table [dataSource]=\"dataSource\" matSort [style.min-width]=\"options.minWidth ?? '100%'\"\n\t\t\t\t       [class.borders]=\"options.borders\" [class.bordersHeader]=\"options.bordersHeader\">\n\n\t\t\t\t\t@for (column of displayedColumns; track column.id) {\n\t\t\t\t\t\t<ng-container [matColumnDef]=\"column.id\" [sticky]=\"column.sticky\">\n\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef mat-sort-header=\"{{ column.id }}\" [disabled]=\"!column.sort || !options.sort\" disableClear\n\t\t\t\t\t\t\t    [style.width]=\"column.width\" [style.min-width]=\"column.minWidth\"\n\t\t\t\t\t\t\t    [class]=\"column.display + ' ' + (column.header || '')\"> {{ column.name }}\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t@switch (column.format) {\n\t\t\t\t\t\t\t\t@case ('buttons') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@for (button of column.buttons; track button; let i = $index) {\n\t\t\t\t\t\t\t\t\t\t\t@if (row[column.id][i] != false) {\n\t\t\t\t\t\t\t\t\t\t\t\t@switch (button.action) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  (click)=\"openDialog( $event, button, column.id, i, row)\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  (click)=\"apiCall( $event, row[column.id][ i ] )\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('save') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" (click)=\"saveCall( $event, button, row, row[column.id][ i ] )\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  [disabled]=\"!saveCallCheck( button, row )\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"btnicon\" [class]=\"button.color || 'primary'\" [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!button.hint\">{{ button.icon }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('menu') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button mat-icon-button [matMenuTriggerFor]=\"menuRef\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [class]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        (click)=\"$event.stopPropagation()\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-menu #menuRef=\"matMenu\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@for (item of button.menuItems; track item; let j = $index) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (row[column.id][i][j] !== false) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@switch (item.action) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a mat-menu-item [routerLink]=\"row[column.id][i][j]\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a mat-menu-item [href]=\"row[column.id][i][j]\" target=\"_blank\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button mat-menu-item (click)=\"openMenuDialog($event, item, column.id, i, j, row)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-menu>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@if (column.icons[ row[ column.id ] ]) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"column.icons[ row[ column.id ] ][ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltip]=\"column.icons[ row[ column.id ] ][ 'hint' ] \"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!column.icons[ row[ column.id ] ][ 'hint' ]\">{{ column.icons[row[column.id]]['icon'] }}\n\t\t\t\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('html') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [innerHtml]=\"row[column.id] | safeHtml\" [class]=\"column.display\"></td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@if (row[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t\t\t\t<a [routerLink]=\"row[column.id + 'Link']\" class=\"tablelink\">{{ row[column.id] }}</a>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t<span>{{ row[column.id] }}</span>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('input') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t<mat-form-field subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t<input matInput\n\t\t\t\t\t\t\t\t\t\t\t       [type]=\"column.inputType\"\n\t\t\t\t\t\t\t\t\t\t\t       [(ngModel)]=\"row[ column.id ]\"\n\t\t\t\t\t\t\t\t\t\t\t       [lang]=\"column.inputLang || ''\"\n\t\t\t\t\t\t\t\t\t\t\t       [required]=\"column.inputRequired || true\"\n\t\t\t\t\t\t\t\t\t\t\t       (paste)=\"pasteInput( $event, row, column )\">\n\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('text2') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t<div>{{ row[column.id][0] }}</div>\n\t\t\t\t\t\t\t\t\t\t<div>{{ row[column.id][1] }}</div>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('number') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ row[column.id][0] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('chips') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t\t\t\t@for (chip of row[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@default {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ row[column.id] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t<td mat-footer-cell *matFooterCellDef [hidden]=\"!options.footer\"\n\t\t\t\t\t\t\t    [style.width]=\"column.width\" [style.min-width]=\"column.minWidth\" class=\"bottomrow\"\n\t\t\t\t\t\t\t    [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t@if ( footer[ column.id ] ) {\n\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ footer[ column.id ] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t\t@if (options.select) {\n\t\t\t\t\t\t<ng-container matColumnDef=\"select\" [sticky]=\"true\">\n\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef [style.width]=\"'65px'\">\n\t\t\t\t\t\t\t\t<mat-checkbox (change)=\"$event ? masterToggle() : null\"\n\t\t\t\t\t\t\t\t              [checked]=\"selection.hasValue() && isAllSelected()\"\n\t\t\t\t\t\t\t\t              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\">\n\t\t\t\t\t\t\t\t@if (row.select !== false) {\n\t\t\t\t\t\t\t\t\t<mat-checkbox\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t(change)=\"$event ? selection.toggle(row) : null\"\n\t\t\t\t\t\t\t\t\t\t\t[checked]=\"selection.isSelected(row)\">\n\t\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t<td mat-footer-cell *matFooterCellDef [style.width]=\"'65px'\" class=\"bottomrow\" [hidden]=\"!options.footer\">\n\t\t\t\t\t\t\t\t<mat-checkbox (change)=\"$event ? masterToggle() : null\"\n\t\t\t\t\t\t\t\t              [checked]=\"selection.hasValue() && isAllSelected()\"\n\t\t\t\t\t\t\t\t              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\n\t\t\t\t\t@if (extraHeaderFields.length > 0) {\n\t\t\t\t\t\t@for (column of extraHeaderFields; track column.id) {\n\t\t\t\t\t\t\t<ng-container matColumnDef=\"{{ column.id }}\" [sticky]=\"column.sticky\">\n\t\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef [attr.colspan]=\"column.headerSpan\">{{ column.name }}</th>\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<tr mat-header-row *matHeaderRowDef=\"extraHeaders; sticky: true\" [class.dense]=\"options.dense\"></tr>\n\t\t\t\t\t}\n\n\t\t\t\t\t<tr mat-header-row *matHeaderRowDef=\"columnsToDisplay; sticky: true\" [class.dense]=\"options.dense\"></tr>\n\t\t\t\t\t<tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\" (click)=\"clicked(row)\"></tr>\n\t\t\t\t\t<tr mat-footer-row *matFooterRowDef=\"columnsToDisplay; sticky: true\" [hidden]=\"!options.footer\"></tr>\n\t\t\t\t</table>\n\t\t\t</div>\n\n\t\t\t@if (!loading()) {\n\t\t\t\t@if (!errorMsg && dataSource.filteredData.length === 0) {\n\t\t\t\t\t@if (options.emptyState) {\n\t\t\t\t\t\t<xiri-empty-state [settings]=\"options.emptyState\"></xiri-empty-state>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<div class=\"nodata\">{{ options.textNoData }}</div>\n\t\t\t\t\t}\n\t\t\t\t} @else if (errorMsg) {\n\t\t\t\t\t<div class=\"alert alert-danger\">{{ errorMsg }}</div>\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t<div class=\"loader\" [hidden]=\"!loading()\">\n\t\t\t\t<xiri-skeleton type=\"table-row\" [lines]=\"5\" [columns]=\"columnsToDisplay.length || 4\"></xiri-skeleton>\n\t\t\t</div>\n\n\t\t\t<div class=\"xrow xsmall\" [class.bottomrow]=\"(options.select || options.pagination) && !options.footer\">\n\t\t\t\t@if (options.select) {\n\t\t\t\t\t<div class=\"xcol xcol-md-2 select-buttons\">\n\t\t\t\t\t\t@for (button of options.selectButtons; track button) {\n\t\t\t\t\t\t\t@switch (button.action) {\n\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"openDialogSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"apiCallSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"downloadSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"xcol xcol-right-md-10\">\n\t\t\t\t\t<mat-paginator [hidden]=\"!options.pagination\" [pageSizeOptions]=\"options.pageSizes\" showFirstLastButtons=\"true\"></mat-paginator>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</mat-card>\n\n@if (dynData.data) {\n\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: dynData }\"></ng-container>\n}\n", styles: ["mat-card.xiritablecard{padding:0;margin-bottom:2rem}.xiritable{width:100%;overflow:auto}.xiritable.canbreak{word-break:break-all}.xiritable .table-full{display:inline-block;width:100%}.xiritable .table-full .tableout{max-height:60vh;overflow-y:auto;width:100%;min-width:100%;max-width:100%}.xiritable .table-full .alert{padding:1rem}.xiritable .table-full mat-paginator{--mat-paginator-container-background-color: transparent;--mat-paginator-container-size: 51px;--mat-form-field-container-height: 32px;--mat-form-field-container-vertical-padding: 4px}.xiritable .table-full .bottomrow{border-top:1px solid var(--outline-variant, #C2C7CF)}.xiritable .table-full div.bottomrow{background-color:var(--surface-container, #F3F3F6);border-bottom-left-radius:var(--mat-card-elevated-container-shape, 12px);border-bottom-right-radius:var(--mat-card-elevated-container-shape, 12px)}.xiritable .header{background-color:var(--surface-container, #F3F3F6);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;min-height:51px;padding:0 16px;border-bottom:1px solid var(--outline-variant, #C2C7CF);border-top-left-radius:var(--mat-card-elevated-container-shape, 12px);border-top-right-radius:var(--mat-card-elevated-container-shape, 12px)}.xiritable .header .buttons{padding:0 7px 0 .5rem;margin-left:-16px}.xiritable .header .buttons button{z-index:200}.xiritable .header .buttons.saveInput{padding-left:21px}.xiritable .header .middle{flex-grow:1;font-size:var(--xiri-font-size-title);display:flex;padding:0}.xiritable .header xiri-buttonline{padding:0 0 0 16px}.xiritable table{width:100%;--mat-table-header-container-height: 42px;--mat-table-footer-container-height: 42px;--mat-table-row-item-container-height: 42px}.xiritable table th.mat-mdc-header-cell:not(:first-of-type),.xiritable table td.mat-mdc-cell:not(:first-of-type),.xiritable table td.mat-mdc-footer-cell:not(:first-of-type){padding-left:5px}.xiritable table th.mat-mdc-header-cell:not(:last-of-type),.xiritable table td.mat-mdc-cell:not(:last-of-type),.xiritable table td.mat-mdc-footer-cell:not(:last-of-type){padding-right:7px}.xiritable table tr.mat-mdc-header-row.dense{height:28px}.xiritable table tr.mat-mdc-row:hover{background:var(--surface-variant, #DEE3EB)}.xiritable table .tablelink{text-decoration:underline}.xiritable table td.buttons xiri-button,.xiritable table td.buttons xiri-buttonstyle,.xiritable table td.buttons .btnicon{margin-right:8px}.xiritable table td.buttons xiri-button:last-child,.xiritable table td.buttons xiri-buttonstyle:last-child,.xiritable table td.buttons .btnicon:last-child{margin-right:0}.xiritable table td.right,.xiritable table td.align-right,.xiritable table th.right,.xiritable table th.align-right{text-align:right}.xiritable table td.center,.xiritable table td.align-center,.xiritable table th.center,.xiritable table th.align-center{text-align:center}.xiritable table td.left,.xiritable table td.align-left,.xiritable table th.left,.xiritable table th.align-left{text-align:left}.xiritable table td.vertical,.xiritable table th.vertical{writing-mode:sideways-rl;text-orientation:sideways}.xiritable table td.vertical div,.xiritable table th.vertical div{max-height:6rem}.xiritable table td.sideways,.xiritable table th.sideways{writing-mode:sideways-lr;text-orientation:sideways}.xiritable table td.sideways div,.xiritable table th.sideways div{max-height:6rem}.xiritable table td.upright,.xiritable table th.upright{writing-mode:vertical-rl;text-orientation:upright}.xiritable table.borders td+td{border-left:1px solid var(--outline-variant, #C2C7CF)}.xiritable table.bordersHeader th+th{border-left:1px solid var(--outline-variant, #C2C7CF)}.xiritable table td.mat-mdc-cell mat-form-field{--mat-form-field-container-height: 40px;--mat-form-field-container-vertical-padding: 8px}.xiritable .mat-column-select{overflow:initial}.xiritable .select-buttons{padding:.3rem .8rem;display:flex;align-items:center}.xiritable .select-buttons button{margin-right:.5rem}.xiritable .nodata{padding:.5rem 1.5rem;font-size:var(--xiri-font-size-label);background-color:var(--surface, #FFFFFF);animation:fadeInUp .25s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.xiritable .loader{position:absolute;top:0;left:0;width:100%;bottom:0;padding:1rem;background-color:var(--ripple, rgba(206, 212, 218, .5));z-index:200;border-radius:var(--mat-card-elevated-container-shape, 12px)}xiri-dyncomponent{margin-bottom:2rem}[hidden]{display:none!important}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: XiriButtonlineComponent, selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "component", type: XiriSearchComponent, selector: "xiri-search", inputs: ["placeholder", "open", "reset", "escape", "focus", "text"], outputs: ["changed"] }, { kind: "component", type: 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: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: XiriButtonstyleComponent, selector: "xiri-buttonstyle", inputs: ["button", "disabled"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: XiriSkeletonComponent, selector: "xiri-skeleton", inputs: ["type", "width", "height", "lines", "columns", "animate"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XiriButtonComponent, selector: "xiri-button", inputs: ["button", "disabled", "filterData", "url"], outputs: ["result"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: XiriEmptyStateComponent, selector: "xiri-empty-state", inputs: ["settings"], outputs: ["buttonResult"] }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: XiriTableComponent, isStandalone: true, selector: "xiri-table", inputs: { dyncomponent: { classPropertyName: "dyncomponent", publicName: "dyncomponent", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, filterData: { classPropertyName: "filterData", publicName: "filterData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickedRow: "clickedRow" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-card class=\"xiritablecard mat-mdc-elevation-specific mat-elevation-z3\">\n\t<div class=\"xiritable\" [class]=\"options.class\">\n\t\t<div class=\"table-full\">\n\t\t\t<div class=\"header\">\n\t\t\t\t@if (options.reload) {\n\t\t\t\t\t<div class=\"buttons\">\n\t\t\t\t\t\t<button mat-icon-button (click)=\"reload()\" color=\"primary\" aria-label=\"Tabelle neu laden\">\n\t\t\t\t\t\t\t<mat-icon>autorenew</mat-icon>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"middle\" [class.hasButtons]=\"options.buttons\">{{ options.title }}</div>\n\t\t\t\t@if (options.buttons) {\n\t\t\t\t\t<xiri-buttonline [settings]=\"options.buttons\" (result)=\"buttonReturn($event)\"\n\t\t\t\t\t                 [filterData]=\"_filterData()\"></xiri-buttonline>\n\t\t\t\t}\n\t\t\t\t@if (options.search) {\n\t\t\t\t\t<xiri-search (changed)=\"searchDo($event)\" [placeholder]=\"''\" [text]=\"searchText\"></xiri-search>\n\t\t\t\t}\n\t\t\t\t@if (options.saveInput) {\n\t\t\t\t\t<div class=\"buttons saveInput\">\n\t\t\t\t\t\t<button mat-raised-button (click)=\"saveInputData()\" color=\"primary\">\n\t\t\t\t\t\t\t{{ options.saveInput }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"tableout-wrap\">\n\t\t\t<div class=\"tableout\" [class.is-loading]=\"loading()\" [style.max-height]=\"options.scrollHeight || null\">\n\t\t\t\t<table mat-table [dataSource]=\"dataSource\" matSort [style.min-width]=\"options.minWidth ?? '100%'\"\n\t\t\t\t       [class.borders]=\"options.borders\" [class.bordersHeader]=\"options.bordersHeader\">\n\n\t\t\t\t\t@for (column of displayedColumns; track column.id) {\n\t\t\t\t\t\t<ng-container [matColumnDef]=\"column.id\" [sticky]=\"column.sticky\">\n\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef mat-sort-header=\"{{ column.id }}\" [disabled]=\"!column.sort || !options.sort\" disableClear\n\t\t\t\t\t\t\t    [style.width]=\"column.width\" [style.min-width]=\"column.minWidth\"\n\t\t\t\t\t\t\t    [class]=\"column.display + ' ' + (column.header || '')\"> {{ column.name }}\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t@switch (column.format) {\n\t\t\t\t\t\t\t\t@case ('buttons') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@for (button of column.buttons; track button; let i = $index) {\n\t\t\t\t\t\t\t\t\t\t\t@if (row[column.id][i] != false) {\n\t\t\t\t\t\t\t\t\t\t\t\t@switch (button.action) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  (click)=\"openDialog( $event, button, column.id, i, row)\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  (click)=\"apiCall( $event, row[column.id][ i ] )\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('save') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" (click)=\"saveCall( $event, button, row, row[column.id][ i ] )\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  [disabled]=\"!saveCallCheck( button, row )\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"btnicon\" [class]=\"button.color || 'primary'\" [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!button.hint\">{{ button.icon }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('menu') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button mat-icon-button [matMenuTriggerFor]=\"menuRef\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [class]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        (click)=\"$event.stopPropagation()\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-menu #menuRef=\"matMenu\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@for (item of button.menuItems; track item; let j = $index) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (row[column.id][i][j] !== false) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@switch (item.action) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a mat-menu-item [routerLink]=\"row[column.id][i][j]\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a mat-menu-item [href]=\"row[column.id][i][j]\" target=\"_blank\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button mat-menu-item (click)=\"openMenuDialog($event, item, column.id, i, j, row)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-menu>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@if (column.icons[ row[ column.id ] ]) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"column.icons[ row[ column.id ] ][ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltip]=\"column.icons[ row[ column.id ] ][ 'hint' ] \"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!column.icons[ row[ column.id ] ][ 'hint' ]\">{{ column.icons[row[column.id]]['icon'] }}\n\t\t\t\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('html') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [innerHtml]=\"row[column.id] | safeHtml\" [class]=\"column.display\"></td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@if (row[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t\t\t\t<a [routerLink]=\"row[column.id + 'Link']\" class=\"tablelink\">{{ row[column.id] }}</a>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t<span>{{ row[column.id] }}</span>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('input') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t<mat-form-field subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t<input matInput\n\t\t\t\t\t\t\t\t\t\t\t       [type]=\"column.inputType\"\n\t\t\t\t\t\t\t\t\t\t\t       [(ngModel)]=\"row[ column.id ]\"\n\t\t\t\t\t\t\t\t\t\t\t       [lang]=\"column.inputLang || ''\"\n\t\t\t\t\t\t\t\t\t\t\t       [required]=\"column.inputRequired || true\"\n\t\t\t\t\t\t\t\t\t\t\t       (paste)=\"pasteInput( $event, row, column )\">\n\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('text2') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t<div>{{ row[column.id][0] }}</div>\n\t\t\t\t\t\t\t\t\t\t<div>{{ row[column.id][1] }}</div>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('number') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ row[column.id][0] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('chips') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t\t\t\t@for (chip of row[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@default {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ row[column.id] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t<td mat-footer-cell *matFooterCellDef [hidden]=\"!options.footer\"\n\t\t\t\t\t\t\t    [style.width]=\"column.width\" [style.min-width]=\"column.minWidth\" class=\"bottomrow\"\n\t\t\t\t\t\t\t    [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t@if ( footer[ column.id ] ) {\n\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ footer[ column.id ] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t\t@if (options.select) {\n\t\t\t\t\t\t<ng-container matColumnDef=\"select\" [sticky]=\"true\">\n\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef [style.width]=\"'65px'\">\n\t\t\t\t\t\t\t\t<mat-checkbox (change)=\"$event ? masterToggle() : null\"\n\t\t\t\t\t\t\t\t              [checked]=\"selection.hasValue() && isAllSelected()\"\n\t\t\t\t\t\t\t\t              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\">\n\t\t\t\t\t\t\t\t@if (row.select !== false) {\n\t\t\t\t\t\t\t\t\t<mat-checkbox\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t(change)=\"$event ? selection.toggle(row) : null\"\n\t\t\t\t\t\t\t\t\t\t\t[checked]=\"selection.isSelected(row)\">\n\t\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t<td mat-footer-cell *matFooterCellDef [style.width]=\"'65px'\" class=\"bottomrow\" [hidden]=\"!options.footer\">\n\t\t\t\t\t\t\t\t<mat-checkbox (change)=\"$event ? masterToggle() : null\"\n\t\t\t\t\t\t\t\t              [checked]=\"selection.hasValue() && isAllSelected()\"\n\t\t\t\t\t\t\t\t              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\n\t\t\t\t\t@if (extraHeaderFields.length > 0) {\n\t\t\t\t\t\t@for (column of extraHeaderFields; track column.id) {\n\t\t\t\t\t\t\t<ng-container matColumnDef=\"{{ column.id }}\" [sticky]=\"column.sticky\">\n\t\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef [attr.colspan]=\"column.headerSpan\">{{ column.name }}</th>\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<tr mat-header-row *matHeaderRowDef=\"extraHeaders; sticky: true\" [class.dense]=\"options.dense\"></tr>\n\t\t\t\t\t}\n\n\t\t\t\t\t<tr mat-header-row *matHeaderRowDef=\"columnsToDisplay; sticky: true\" [class.dense]=\"options.dense\"></tr>\n\t\t\t\t\t<tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\" (click)=\"clicked(row)\"></tr>\n\t\t\t\t\t<tr mat-footer-row *matFooterRowDef=\"columnsToDisplay; sticky: true\" [hidden]=\"!options.footer\"></tr>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t\t<div class=\"loader\" [hidden]=\"!loading()\">\n\t\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t@if (!loading()) {\n\t\t\t\t@if (!errorMsg && dataSource.filteredData.length === 0) {\n\t\t\t\t\t@if (options.emptyState) {\n\t\t\t\t\t\t<xiri-empty-state [settings]=\"options.emptyState\"></xiri-empty-state>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<div class=\"nodata\">{{ options.textNoData }}</div>\n\t\t\t\t\t}\n\t\t\t\t} @else if (errorMsg) {\n\t\t\t\t\t<div class=\"alert alert-danger\">{{ errorMsg }}</div>\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t<div class=\"xrow xsmall\" [class.bottomrow]=\"(options.select || options.pagination) && !options.footer\">\n\t\t\t\t@if (options.select) {\n\t\t\t\t\t<div class=\"xcol xcol-md-2 select-buttons\">\n\t\t\t\t\t\t@for (button of options.selectButtons; track button) {\n\t\t\t\t\t\t\t@switch (button.action) {\n\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"openDialogSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"apiCallSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"downloadSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"xcol xcol-right-md-10\">\n\t\t\t\t\t<mat-paginator [hidden]=\"!options.pagination\" [pageSizeOptions]=\"options.pageSizes\" showFirstLastButtons=\"true\"></mat-paginator>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</mat-card>\n\n@if (dynData.data) {\n\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: dynData }\"></ng-container>\n}\n", styles: ["mat-card.xiritablecard{padding:0;margin-bottom:2rem}.xiritable{width:100%;overflow:auto}.xiritable.canbreak{word-break:break-all}.xiritable .table-full{display:inline-block;width:100%}.xiritable .table-full .tableout-wrap{position:relative}.xiritable .table-full .tableout{max-height:60vh;overflow-y:auto;width:100%;min-width:100%;max-width:100%}.xiritable .table-full .tableout.is-loading{min-height:100px}.xiritable .table-full .alert{padding:1rem}.xiritable .table-full mat-paginator{--mat-paginator-container-background-color: transparent;--mat-paginator-container-size: 51px;--mat-form-field-container-height: 32px;--mat-form-field-container-vertical-padding: 4px}.xiritable .table-full .bottomrow{border-top:1px solid var(--outline-variant, #C2C7CF)}.xiritable .table-full div.bottomrow{background-color:var(--surface-container, #F3F3F6);border-bottom-left-radius:var(--mat-card-elevated-container-shape, 12px);border-bottom-right-radius:var(--mat-card-elevated-container-shape, 12px)}.xiritable .header{background-color:var(--surface-container, #F3F3F6);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;min-height:51px;padding:0 16px;border-bottom:1px solid var(--outline-variant, #C2C7CF);border-top-left-radius:var(--mat-card-elevated-container-shape, 12px);border-top-right-radius:var(--mat-card-elevated-container-shape, 12px)}.xiritable .header .buttons{padding:0 7px 0 .5rem;margin-left:-16px}.xiritable .header .buttons button{z-index:200}.xiritable .header .buttons.saveInput{padding-left:21px}.xiritable .header .middle{flex-grow:1;font-size:var(--xiri-font-size-title);display:flex;padding:0}.xiritable .header xiri-buttonline{padding:0 0 0 16px}.xiritable table{width:100%;--mat-table-header-container-height: 42px;--mat-table-footer-container-height: 42px;--mat-table-row-item-container-height: 42px}.xiritable table th.mat-mdc-header-cell:not(:first-of-type),.xiritable table td.mat-mdc-cell:not(:first-of-type),.xiritable table td.mat-mdc-footer-cell:not(:first-of-type){padding-left:5px}.xiritable table th.mat-mdc-header-cell:not(:last-of-type),.xiritable table td.mat-mdc-cell:not(:last-of-type),.xiritable table td.mat-mdc-footer-cell:not(:last-of-type){padding-right:7px}.xiritable table tr.mat-mdc-header-row.dense{height:28px}.xiritable table tr.mat-mdc-row:hover{background:var(--surface-variant, #DEE3EB)}.xiritable table .tablelink{text-decoration:underline}.xiritable table td.buttons xiri-button,.xiritable table td.buttons xiri-buttonstyle,.xiritable table td.buttons .btnicon{margin-right:8px}.xiritable table td.buttons xiri-button:last-child,.xiritable table td.buttons xiri-buttonstyle:last-child,.xiritable table td.buttons .btnicon:last-child{margin-right:0}.xiritable table td.right,.xiritable table td.align-right,.xiritable table th.right,.xiritable table th.align-right{text-align:right}.xiritable table td.center,.xiritable table td.align-center,.xiritable table th.center,.xiritable table th.align-center{text-align:center}.xiritable table td.left,.xiritable table td.align-left,.xiritable table th.left,.xiritable table th.align-left{text-align:left}.xiritable table td.vertical,.xiritable table th.vertical{writing-mode:sideways-rl;text-orientation:sideways}.xiritable table td.vertical div,.xiritable table th.vertical div{max-height:6rem}.xiritable table td.sideways,.xiritable table th.sideways{writing-mode:sideways-lr;text-orientation:sideways}.xiritable table td.sideways div,.xiritable table th.sideways div{max-height:6rem}.xiritable table td.upright,.xiritable table th.upright{writing-mode:vertical-rl;text-orientation:upright}.xiritable table.borders td+td{border-left:1px solid var(--outline-variant, #C2C7CF)}.xiritable table.bordersHeader th+th{border-left:1px solid var(--outline-variant, #C2C7CF)}.xiritable table td.mat-mdc-cell mat-form-field{--mat-form-field-container-height: 40px;--mat-form-field-container-vertical-padding: 8px}.xiritable .mat-column-select{overflow:initial}.xiritable .select-buttons{padding:.3rem .8rem;display:flex;align-items:center}.xiritable .select-buttons button{margin-right:.5rem}.xiritable .nodata{padding:.5rem 1.5rem;font-size:var(--xiri-font-size-label);background-color:var(--surface, #FFFFFF);animation:fadeInUp .25s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.xiritable .loader{position:absolute;top:0;left:0;width:100%;bottom:0;display:flex;justify-content:center;align-items:center;background-color:var(--ripple, rgba(206, 212, 218, .5));z-index:200;border-radius:var(--mat-card-elevated-container-shape, 12px)}xiri-dyncomponent{margin-bottom:2rem}[hidden]{display:none!important}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: XiriButtonlineComponent, selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "component", type: XiriSearchComponent, selector: "xiri-search", inputs: ["placeholder", "open", "reset", "escape", "focus", "text"], outputs: ["changed"] }, { kind: "component", type: 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: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: XiriButtonstyleComponent, selector: "xiri-buttonstyle", inputs: ["button", "disabled"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XiriButtonComponent, selector: "xiri-button", inputs: ["button", "disabled", "filterData", "url"], outputs: ["result"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: XiriEmptyStateComponent, selector: "xiri-empty-state", inputs: ["settings"], outputs: ["buttonResult"] }, { kind: "pipe", type: SafehtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriTableComponent, decorators: [{
             type: Component,
@@ -3760,13 +3741,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                         MatCheckbox,
                         MatHeaderRow,
                         MatRow,
-                        XiriSkeletonComponent,
+                        MatProgressSpinner,
                         MatPaginator,
                         NgTemplateOutlet,
                         SafehtmlPipe, XiriButtonComponent, MatHeaderCellDef, MatCellDef, MatHeaderRowDef, MatRowDef,
                         MatFooterRow, MatFooterRowDef, MatFooterCell, MatFooterCellDef,
                         MatMenu, MatMenuItem, MatMenuTrigger,
-                        XiriEmptyStateComponent], template: "<mat-card class=\"xiritablecard mat-mdc-elevation-specific mat-elevation-z3\">\n\t<div class=\"xiritable\" [class]=\"options.class\">\n\t\t<div class=\"table-full\">\n\t\t\t<div class=\"header\">\n\t\t\t\t@if (options.reload) {\n\t\t\t\t\t<div class=\"buttons\">\n\t\t\t\t\t\t<button mat-icon-button (click)=\"reload()\" color=\"primary\" aria-label=\"Tabelle neu laden\">\n\t\t\t\t\t\t\t<mat-icon>autorenew</mat-icon>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"middle\" [class.hasButtons]=\"options.buttons\">{{ options.title }}</div>\n\t\t\t\t@if (options.buttons) {\n\t\t\t\t\t<xiri-buttonline [settings]=\"options.buttons\" (result)=\"buttonReturn($event)\"\n\t\t\t\t\t                 [filterData]=\"_filterData()\"></xiri-buttonline>\n\t\t\t\t}\n\t\t\t\t@if (options.search) {\n\t\t\t\t\t<xiri-search (changed)=\"searchDo($event)\" [placeholder]=\"''\" [text]=\"searchText\"></xiri-search>\n\t\t\t\t}\n\t\t\t\t@if (options.saveInput) {\n\t\t\t\t\t<div class=\"buttons saveInput\">\n\t\t\t\t\t\t<button mat-raised-button (click)=\"saveInputData()\" color=\"primary\">\n\t\t\t\t\t\t\t{{ options.saveInput }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"tableout\" [style.max-height]=\"options.scrollHeight || null\">\n\t\t\t\t<table mat-table [dataSource]=\"dataSource\" matSort [style.min-width]=\"options.minWidth ?? '100%'\"\n\t\t\t\t       [class.borders]=\"options.borders\" [class.bordersHeader]=\"options.bordersHeader\">\n\n\t\t\t\t\t@for (column of displayedColumns; track column.id) {\n\t\t\t\t\t\t<ng-container [matColumnDef]=\"column.id\" [sticky]=\"column.sticky\">\n\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef mat-sort-header=\"{{ column.id }}\" [disabled]=\"!column.sort || !options.sort\" disableClear\n\t\t\t\t\t\t\t    [style.width]=\"column.width\" [style.min-width]=\"column.minWidth\"\n\t\t\t\t\t\t\t    [class]=\"column.display + ' ' + (column.header || '')\"> {{ column.name }}\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t@switch (column.format) {\n\t\t\t\t\t\t\t\t@case ('buttons') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@for (button of column.buttons; track button; let i = $index) {\n\t\t\t\t\t\t\t\t\t\t\t@if (row[column.id][i] != false) {\n\t\t\t\t\t\t\t\t\t\t\t\t@switch (button.action) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  (click)=\"openDialog( $event, button, column.id, i, row)\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  (click)=\"apiCall( $event, row[column.id][ i ] )\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('save') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" (click)=\"saveCall( $event, button, row, row[column.id][ i ] )\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  [disabled]=\"!saveCallCheck( button, row )\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"btnicon\" [class]=\"button.color || 'primary'\" [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!button.hint\">{{ button.icon }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('menu') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button mat-icon-button [matMenuTriggerFor]=\"menuRef\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [class]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        (click)=\"$event.stopPropagation()\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-menu #menuRef=\"matMenu\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@for (item of button.menuItems; track item; let j = $index) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (row[column.id][i][j] !== false) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@switch (item.action) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a mat-menu-item [routerLink]=\"row[column.id][i][j]\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a mat-menu-item [href]=\"row[column.id][i][j]\" target=\"_blank\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button mat-menu-item (click)=\"openMenuDialog($event, item, column.id, i, j, row)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-menu>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@if (column.icons[ row[ column.id ] ]) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"column.icons[ row[ column.id ] ][ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltip]=\"column.icons[ row[ column.id ] ][ 'hint' ] \"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!column.icons[ row[ column.id ] ][ 'hint' ]\">{{ column.icons[row[column.id]]['icon'] }}\n\t\t\t\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('html') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [innerHtml]=\"row[column.id] | safeHtml\" [class]=\"column.display\"></td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@if (row[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t\t\t\t<a [routerLink]=\"row[column.id + 'Link']\" class=\"tablelink\">{{ row[column.id] }}</a>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t<span>{{ row[column.id] }}</span>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('input') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t<mat-form-field subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t<input matInput\n\t\t\t\t\t\t\t\t\t\t\t       [type]=\"column.inputType\"\n\t\t\t\t\t\t\t\t\t\t\t       [(ngModel)]=\"row[ column.id ]\"\n\t\t\t\t\t\t\t\t\t\t\t       [lang]=\"column.inputLang || ''\"\n\t\t\t\t\t\t\t\t\t\t\t       [required]=\"column.inputRequired || true\"\n\t\t\t\t\t\t\t\t\t\t\t       (paste)=\"pasteInput( $event, row, column )\">\n\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('text2') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t<div>{{ row[column.id][0] }}</div>\n\t\t\t\t\t\t\t\t\t\t<div>{{ row[column.id][1] }}</div>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('number') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ row[column.id][0] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('chips') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t\t\t\t@for (chip of row[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@default {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ row[column.id] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t<td mat-footer-cell *matFooterCellDef [hidden]=\"!options.footer\"\n\t\t\t\t\t\t\t    [style.width]=\"column.width\" [style.min-width]=\"column.minWidth\" class=\"bottomrow\"\n\t\t\t\t\t\t\t    [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t@if ( footer[ column.id ] ) {\n\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ footer[ column.id ] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t\t@if (options.select) {\n\t\t\t\t\t\t<ng-container matColumnDef=\"select\" [sticky]=\"true\">\n\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef [style.width]=\"'65px'\">\n\t\t\t\t\t\t\t\t<mat-checkbox (change)=\"$event ? masterToggle() : null\"\n\t\t\t\t\t\t\t\t              [checked]=\"selection.hasValue() && isAllSelected()\"\n\t\t\t\t\t\t\t\t              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\">\n\t\t\t\t\t\t\t\t@if (row.select !== false) {\n\t\t\t\t\t\t\t\t\t<mat-checkbox\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t(change)=\"$event ? selection.toggle(row) : null\"\n\t\t\t\t\t\t\t\t\t\t\t[checked]=\"selection.isSelected(row)\">\n\t\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t<td mat-footer-cell *matFooterCellDef [style.width]=\"'65px'\" class=\"bottomrow\" [hidden]=\"!options.footer\">\n\t\t\t\t\t\t\t\t<mat-checkbox (change)=\"$event ? masterToggle() : null\"\n\t\t\t\t\t\t\t\t              [checked]=\"selection.hasValue() && isAllSelected()\"\n\t\t\t\t\t\t\t\t              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\n\t\t\t\t\t@if (extraHeaderFields.length > 0) {\n\t\t\t\t\t\t@for (column of extraHeaderFields; track column.id) {\n\t\t\t\t\t\t\t<ng-container matColumnDef=\"{{ column.id }}\" [sticky]=\"column.sticky\">\n\t\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef [attr.colspan]=\"column.headerSpan\">{{ column.name }}</th>\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<tr mat-header-row *matHeaderRowDef=\"extraHeaders; sticky: true\" [class.dense]=\"options.dense\"></tr>\n\t\t\t\t\t}\n\n\t\t\t\t\t<tr mat-header-row *matHeaderRowDef=\"columnsToDisplay; sticky: true\" [class.dense]=\"options.dense\"></tr>\n\t\t\t\t\t<tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\" (click)=\"clicked(row)\"></tr>\n\t\t\t\t\t<tr mat-footer-row *matFooterRowDef=\"columnsToDisplay; sticky: true\" [hidden]=\"!options.footer\"></tr>\n\t\t\t\t</table>\n\t\t\t</div>\n\n\t\t\t@if (!loading()) {\n\t\t\t\t@if (!errorMsg && dataSource.filteredData.length === 0) {\n\t\t\t\t\t@if (options.emptyState) {\n\t\t\t\t\t\t<xiri-empty-state [settings]=\"options.emptyState\"></xiri-empty-state>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<div class=\"nodata\">{{ options.textNoData }}</div>\n\t\t\t\t\t}\n\t\t\t\t} @else if (errorMsg) {\n\t\t\t\t\t<div class=\"alert alert-danger\">{{ errorMsg }}</div>\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t<div class=\"loader\" [hidden]=\"!loading()\">\n\t\t\t\t<xiri-skeleton type=\"table-row\" [lines]=\"5\" [columns]=\"columnsToDisplay.length || 4\"></xiri-skeleton>\n\t\t\t</div>\n\n\t\t\t<div class=\"xrow xsmall\" [class.bottomrow]=\"(options.select || options.pagination) && !options.footer\">\n\t\t\t\t@if (options.select) {\n\t\t\t\t\t<div class=\"xcol xcol-md-2 select-buttons\">\n\t\t\t\t\t\t@for (button of options.selectButtons; track button) {\n\t\t\t\t\t\t\t@switch (button.action) {\n\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"openDialogSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"apiCallSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"downloadSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"xcol xcol-right-md-10\">\n\t\t\t\t\t<mat-paginator [hidden]=\"!options.pagination\" [pageSizeOptions]=\"options.pageSizes\" showFirstLastButtons=\"true\"></mat-paginator>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</mat-card>\n\n@if (dynData.data) {\n\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: dynData }\"></ng-container>\n}\n", styles: ["mat-card.xiritablecard{padding:0;margin-bottom:2rem}.xiritable{width:100%;overflow:auto}.xiritable.canbreak{word-break:break-all}.xiritable .table-full{display:inline-block;width:100%}.xiritable .table-full .tableout{max-height:60vh;overflow-y:auto;width:100%;min-width:100%;max-width:100%}.xiritable .table-full .alert{padding:1rem}.xiritable .table-full mat-paginator{--mat-paginator-container-background-color: transparent;--mat-paginator-container-size: 51px;--mat-form-field-container-height: 32px;--mat-form-field-container-vertical-padding: 4px}.xiritable .table-full .bottomrow{border-top:1px solid var(--outline-variant, #C2C7CF)}.xiritable .table-full div.bottomrow{background-color:var(--surface-container, #F3F3F6);border-bottom-left-radius:var(--mat-card-elevated-container-shape, 12px);border-bottom-right-radius:var(--mat-card-elevated-container-shape, 12px)}.xiritable .header{background-color:var(--surface-container, #F3F3F6);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;min-height:51px;padding:0 16px;border-bottom:1px solid var(--outline-variant, #C2C7CF);border-top-left-radius:var(--mat-card-elevated-container-shape, 12px);border-top-right-radius:var(--mat-card-elevated-container-shape, 12px)}.xiritable .header .buttons{padding:0 7px 0 .5rem;margin-left:-16px}.xiritable .header .buttons button{z-index:200}.xiritable .header .buttons.saveInput{padding-left:21px}.xiritable .header .middle{flex-grow:1;font-size:var(--xiri-font-size-title);display:flex;padding:0}.xiritable .header xiri-buttonline{padding:0 0 0 16px}.xiritable table{width:100%;--mat-table-header-container-height: 42px;--mat-table-footer-container-height: 42px;--mat-table-row-item-container-height: 42px}.xiritable table th.mat-mdc-header-cell:not(:first-of-type),.xiritable table td.mat-mdc-cell:not(:first-of-type),.xiritable table td.mat-mdc-footer-cell:not(:first-of-type){padding-left:5px}.xiritable table th.mat-mdc-header-cell:not(:last-of-type),.xiritable table td.mat-mdc-cell:not(:last-of-type),.xiritable table td.mat-mdc-footer-cell:not(:last-of-type){padding-right:7px}.xiritable table tr.mat-mdc-header-row.dense{height:28px}.xiritable table tr.mat-mdc-row:hover{background:var(--surface-variant, #DEE3EB)}.xiritable table .tablelink{text-decoration:underline}.xiritable table td.buttons xiri-button,.xiritable table td.buttons xiri-buttonstyle,.xiritable table td.buttons .btnicon{margin-right:8px}.xiritable table td.buttons xiri-button:last-child,.xiritable table td.buttons xiri-buttonstyle:last-child,.xiritable table td.buttons .btnicon:last-child{margin-right:0}.xiritable table td.right,.xiritable table td.align-right,.xiritable table th.right,.xiritable table th.align-right{text-align:right}.xiritable table td.center,.xiritable table td.align-center,.xiritable table th.center,.xiritable table th.align-center{text-align:center}.xiritable table td.left,.xiritable table td.align-left,.xiritable table th.left,.xiritable table th.align-left{text-align:left}.xiritable table td.vertical,.xiritable table th.vertical{writing-mode:sideways-rl;text-orientation:sideways}.xiritable table td.vertical div,.xiritable table th.vertical div{max-height:6rem}.xiritable table td.sideways,.xiritable table th.sideways{writing-mode:sideways-lr;text-orientation:sideways}.xiritable table td.sideways div,.xiritable table th.sideways div{max-height:6rem}.xiritable table td.upright,.xiritable table th.upright{writing-mode:vertical-rl;text-orientation:upright}.xiritable table.borders td+td{border-left:1px solid var(--outline-variant, #C2C7CF)}.xiritable table.bordersHeader th+th{border-left:1px solid var(--outline-variant, #C2C7CF)}.xiritable table td.mat-mdc-cell mat-form-field{--mat-form-field-container-height: 40px;--mat-form-field-container-vertical-padding: 8px}.xiritable .mat-column-select{overflow:initial}.xiritable .select-buttons{padding:.3rem .8rem;display:flex;align-items:center}.xiritable .select-buttons button{margin-right:.5rem}.xiritable .nodata{padding:.5rem 1.5rem;font-size:var(--xiri-font-size-label);background-color:var(--surface, #FFFFFF);animation:fadeInUp .25s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.xiritable .loader{position:absolute;top:0;left:0;width:100%;bottom:0;padding:1rem;background-color:var(--ripple, rgba(206, 212, 218, .5));z-index:200;border-radius:var(--mat-card-elevated-container-shape, 12px)}xiri-dyncomponent{margin-bottom:2rem}[hidden]{display:none!important}\n"] }]
+                        XiriEmptyStateComponent], template: "<mat-card class=\"xiritablecard mat-mdc-elevation-specific mat-elevation-z3\">\n\t<div class=\"xiritable\" [class]=\"options.class\">\n\t\t<div class=\"table-full\">\n\t\t\t<div class=\"header\">\n\t\t\t\t@if (options.reload) {\n\t\t\t\t\t<div class=\"buttons\">\n\t\t\t\t\t\t<button mat-icon-button (click)=\"reload()\" color=\"primary\" aria-label=\"Tabelle neu laden\">\n\t\t\t\t\t\t\t<mat-icon>autorenew</mat-icon>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"middle\" [class.hasButtons]=\"options.buttons\">{{ options.title }}</div>\n\t\t\t\t@if (options.buttons) {\n\t\t\t\t\t<xiri-buttonline [settings]=\"options.buttons\" (result)=\"buttonReturn($event)\"\n\t\t\t\t\t                 [filterData]=\"_filterData()\"></xiri-buttonline>\n\t\t\t\t}\n\t\t\t\t@if (options.search) {\n\t\t\t\t\t<xiri-search (changed)=\"searchDo($event)\" [placeholder]=\"''\" [text]=\"searchText\"></xiri-search>\n\t\t\t\t}\n\t\t\t\t@if (options.saveInput) {\n\t\t\t\t\t<div class=\"buttons saveInput\">\n\t\t\t\t\t\t<button mat-raised-button (click)=\"saveInputData()\" color=\"primary\">\n\t\t\t\t\t\t\t{{ options.saveInput }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"tableout-wrap\">\n\t\t\t<div class=\"tableout\" [class.is-loading]=\"loading()\" [style.max-height]=\"options.scrollHeight || null\">\n\t\t\t\t<table mat-table [dataSource]=\"dataSource\" matSort [style.min-width]=\"options.minWidth ?? '100%'\"\n\t\t\t\t       [class.borders]=\"options.borders\" [class.bordersHeader]=\"options.bordersHeader\">\n\n\t\t\t\t\t@for (column of displayedColumns; track column.id) {\n\t\t\t\t\t\t<ng-container [matColumnDef]=\"column.id\" [sticky]=\"column.sticky\">\n\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef mat-sort-header=\"{{ column.id }}\" [disabled]=\"!column.sort || !options.sort\" disableClear\n\t\t\t\t\t\t\t    [style.width]=\"column.width\" [style.min-width]=\"column.minWidth\"\n\t\t\t\t\t\t\t    [class]=\"column.display + ' ' + (column.header || '')\"> {{ column.name }}\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t@switch (column.format) {\n\t\t\t\t\t\t\t\t@case ('buttons') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@for (button of column.buttons; track button; let i = $index) {\n\t\t\t\t\t\t\t\t\t\t\t@if (row[column.id][i] != false) {\n\t\t\t\t\t\t\t\t\t\t\t\t@switch (button.action) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-button [button]=\"button\" [disabled]=\"false\" [url]=\"row[column.id][ i ]\"></xiri-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  (click)=\"openDialog( $event, button, column.id, i, row)\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" [disabled]=\"false\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  (click)=\"apiCall( $event, row[column.id][ i ] )\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('save') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<xiri-buttonstyle [button]=\"button\" (click)=\"saveCall( $event, button, row, row[column.id][ i ] )\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t                  [disabled]=\"!saveCallCheck( button, row )\"></xiri-buttonstyle>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon class=\"btnicon\" [class]=\"button.color || 'primary'\" [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!button.hint\">{{ button.icon }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('menu') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button mat-icon-button [matMenuTriggerFor]=\"menuRef\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [class]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        (click)=\"$event.stopPropagation()\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-menu #menuRef=\"matMenu\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@for (item of button.menuItems; track item; let j = $index) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (row[column.id][i][j] !== false) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@switch (item.action) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a mat-menu-item [routerLink]=\"row[column.id][i][j]\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('href') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a mat-menu-item [href]=\"row[column.id][i][j]\" target=\"_blank\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button mat-menu-item (click)=\"openMenuDialog($event, item, column.id, i, j, row)\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"item.color || 'primary'\">{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ item.text }}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</mat-menu>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('icon') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@if (column.icons[ row[ column.id ] ]) {\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon [class]=\"column.icons[ row[ column.id ] ][ 'color' ] || 'primary'\"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltip]=\"column.icons[ row[ column.id ] ][ 'hint' ] \"\n\t\t\t\t\t\t\t\t\t\t\t          [matTooltipDisabled]=\"!column.icons[ row[ column.id ] ][ 'hint' ]\">{{ column.icons[row[column.id]]['icon'] }}\n\t\t\t\t\t\t\t\t\t\t\t</mat-icon>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('html') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [innerHtml]=\"row[column.id] | safeHtml\" [class]=\"column.display\"></td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('link') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t@if (row[column.id + 'Link']) {\n\t\t\t\t\t\t\t\t\t\t\t<a [routerLink]=\"row[column.id + 'Link']\" class=\"tablelink\">{{ row[column.id] }}</a>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t<span>{{ row[column.id] }}</span>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('input') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t<mat-form-field subscriptSizing=\"dynamic\">\n\t\t\t\t\t\t\t\t\t\t\t<input matInput\n\t\t\t\t\t\t\t\t\t\t\t       [type]=\"column.inputType\"\n\t\t\t\t\t\t\t\t\t\t\t       [(ngModel)]=\"row[ column.id ]\"\n\t\t\t\t\t\t\t\t\t\t\t       [lang]=\"column.inputLang || ''\"\n\t\t\t\t\t\t\t\t\t\t\t       [required]=\"column.inputRequired || true\"\n\t\t\t\t\t\t\t\t\t\t\t       (paste)=\"pasteInput( $event, row, column )\">\n\t\t\t\t\t\t\t\t\t\t</mat-form-field>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('text2') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t<div>{{ row[column.id][0] }}</div>\n\t\t\t\t\t\t\t\t\t\t<div>{{ row[column.id][1] }}</div>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('number') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ row[column.id][0] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('chips') {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"xiri-chips-display\">\n\t\t\t\t\t\t\t\t\t\t\t@for (chip of row[column.id]; track chip.label) {\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"xiri-chip-display\" [class]=\"chip.color || ''\">{{ chip.label }}</span>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@default {\n\t\t\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\" [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ row[column.id] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t<td mat-footer-cell *matFooterCellDef [hidden]=\"!options.footer\"\n\t\t\t\t\t\t\t    [style.width]=\"column.width\" [style.min-width]=\"column.minWidth\" class=\"bottomrow\"\n\t\t\t\t\t\t\t    [class]=\"column.display\">\n\t\t\t\t\t\t\t\t\t@if ( footer[ column.id ] ) {\n\t\t\t\t\t\t\t\t\t\t{{ column.textPrefix }}{{ footer[ column.id ] }}{{ column.textSuffix }}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\t\t\t\t\t@if (options.select) {\n\t\t\t\t\t\t<ng-container matColumnDef=\"select\" [sticky]=\"true\">\n\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef [style.width]=\"'65px'\">\n\t\t\t\t\t\t\t\t<mat-checkbox (change)=\"$event ? masterToggle() : null\"\n\t\t\t\t\t\t\t\t              [checked]=\"selection.hasValue() && isAllSelected()\"\n\t\t\t\t\t\t\t\t              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t<td mat-cell *matCellDef=\"let row\">\n\t\t\t\t\t\t\t\t@if (row.select !== false) {\n\t\t\t\t\t\t\t\t\t<mat-checkbox\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t(change)=\"$event ? selection.toggle(row) : null\"\n\t\t\t\t\t\t\t\t\t\t\t[checked]=\"selection.isSelected(row)\">\n\t\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t<td mat-footer-cell *matFooterCellDef [style.width]=\"'65px'\" class=\"bottomrow\" [hidden]=\"!options.footer\">\n\t\t\t\t\t\t\t\t<mat-checkbox (change)=\"$event ? masterToggle() : null\"\n\t\t\t\t\t\t\t\t              [checked]=\"selection.hasValue() && isAllSelected()\"\n\t\t\t\t\t\t\t\t              [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n\t\t\t\t\t\t\t\t</mat-checkbox>\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t}\n\n\t\t\t\t\t@if (extraHeaderFields.length > 0) {\n\t\t\t\t\t\t@for (column of extraHeaderFields; track column.id) {\n\t\t\t\t\t\t\t<ng-container matColumnDef=\"{{ column.id }}\" [sticky]=\"column.sticky\">\n\t\t\t\t\t\t\t\t<th mat-header-cell *matHeaderCellDef [attr.colspan]=\"column.headerSpan\">{{ column.name }}</th>\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<tr mat-header-row *matHeaderRowDef=\"extraHeaders; sticky: true\" [class.dense]=\"options.dense\"></tr>\n\t\t\t\t\t}\n\n\t\t\t\t\t<tr mat-header-row *matHeaderRowDef=\"columnsToDisplay; sticky: true\" [class.dense]=\"options.dense\"></tr>\n\t\t\t\t\t<tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\" (click)=\"clicked(row)\"></tr>\n\t\t\t\t\t<tr mat-footer-row *matFooterRowDef=\"columnsToDisplay; sticky: true\" [hidden]=\"!options.footer\"></tr>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t\t<div class=\"loader\" [hidden]=\"!loading()\">\n\t\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t@if (!loading()) {\n\t\t\t\t@if (!errorMsg && dataSource.filteredData.length === 0) {\n\t\t\t\t\t@if (options.emptyState) {\n\t\t\t\t\t\t<xiri-empty-state [settings]=\"options.emptyState\"></xiri-empty-state>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<div class=\"nodata\">{{ options.textNoData }}</div>\n\t\t\t\t\t}\n\t\t\t\t} @else if (errorMsg) {\n\t\t\t\t\t<div class=\"alert alert-danger\">{{ errorMsg }}</div>\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t<div class=\"xrow xsmall\" [class.bottomrow]=\"(options.select || options.pagination) && !options.footer\">\n\t\t\t\t@if (options.select) {\n\t\t\t\t\t<div class=\"xcol xcol-md-2 select-buttons\">\n\t\t\t\t\t\t@for (button of options.selectButtons; track button) {\n\t\t\t\t\t\t\t@switch (button.action) {\n\t\t\t\t\t\t\t\t@case ('dialog') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"openDialogSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('api') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"apiCallSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@case ('download') {\n\t\t\t\t\t\t\t\t\t<button mat-icon-button\n\t\t\t\t\t\t\t\t\t        (click)=\"downloadSelection( $event, button )\"\n\t\t\t\t\t\t\t\t\t        [disabled]=\"selection.isEmpty()\"\n\t\t\t\t\t\t\t\t\t        [color]=\"button.color || 'primary'\"\n\t\t\t\t\t\t\t\t\t        [matTooltip]=\"button.hint\"\n\t\t\t\t\t\t\t\t\t        [matTooltipDisabled]=\"!button.hint\">\n\t\t\t\t\t\t\t\t\t\t<mat-icon>{{ button.icon }}</mat-icon>\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"xcol xcol-right-md-10\">\n\t\t\t\t\t<mat-paginator [hidden]=\"!options.pagination\" [pageSizeOptions]=\"options.pageSizes\" showFirstLastButtons=\"true\"></mat-paginator>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</mat-card>\n\n@if (dynData.data) {\n\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: dynData }\"></ng-container>\n}\n", styles: ["mat-card.xiritablecard{padding:0;margin-bottom:2rem}.xiritable{width:100%;overflow:auto}.xiritable.canbreak{word-break:break-all}.xiritable .table-full{display:inline-block;width:100%}.xiritable .table-full .tableout-wrap{position:relative}.xiritable .table-full .tableout{max-height:60vh;overflow-y:auto;width:100%;min-width:100%;max-width:100%}.xiritable .table-full .tableout.is-loading{min-height:100px}.xiritable .table-full .alert{padding:1rem}.xiritable .table-full mat-paginator{--mat-paginator-container-background-color: transparent;--mat-paginator-container-size: 51px;--mat-form-field-container-height: 32px;--mat-form-field-container-vertical-padding: 4px}.xiritable .table-full .bottomrow{border-top:1px solid var(--outline-variant, #C2C7CF)}.xiritable .table-full div.bottomrow{background-color:var(--surface-container, #F3F3F6);border-bottom-left-radius:var(--mat-card-elevated-container-shape, 12px);border-bottom-right-radius:var(--mat-card-elevated-container-shape, 12px)}.xiritable .header{background-color:var(--surface-container, #F3F3F6);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;min-height:51px;padding:0 16px;border-bottom:1px solid var(--outline-variant, #C2C7CF);border-top-left-radius:var(--mat-card-elevated-container-shape, 12px);border-top-right-radius:var(--mat-card-elevated-container-shape, 12px)}.xiritable .header .buttons{padding:0 7px 0 .5rem;margin-left:-16px}.xiritable .header .buttons button{z-index:200}.xiritable .header .buttons.saveInput{padding-left:21px}.xiritable .header .middle{flex-grow:1;font-size:var(--xiri-font-size-title);display:flex;padding:0}.xiritable .header xiri-buttonline{padding:0 0 0 16px}.xiritable table{width:100%;--mat-table-header-container-height: 42px;--mat-table-footer-container-height: 42px;--mat-table-row-item-container-height: 42px}.xiritable table th.mat-mdc-header-cell:not(:first-of-type),.xiritable table td.mat-mdc-cell:not(:first-of-type),.xiritable table td.mat-mdc-footer-cell:not(:first-of-type){padding-left:5px}.xiritable table th.mat-mdc-header-cell:not(:last-of-type),.xiritable table td.mat-mdc-cell:not(:last-of-type),.xiritable table td.mat-mdc-footer-cell:not(:last-of-type){padding-right:7px}.xiritable table tr.mat-mdc-header-row.dense{height:28px}.xiritable table tr.mat-mdc-row:hover{background:var(--surface-variant, #DEE3EB)}.xiritable table .tablelink{text-decoration:underline}.xiritable table td.buttons xiri-button,.xiritable table td.buttons xiri-buttonstyle,.xiritable table td.buttons .btnicon{margin-right:8px}.xiritable table td.buttons xiri-button:last-child,.xiritable table td.buttons xiri-buttonstyle:last-child,.xiritable table td.buttons .btnicon:last-child{margin-right:0}.xiritable table td.right,.xiritable table td.align-right,.xiritable table th.right,.xiritable table th.align-right{text-align:right}.xiritable table td.center,.xiritable table td.align-center,.xiritable table th.center,.xiritable table th.align-center{text-align:center}.xiritable table td.left,.xiritable table td.align-left,.xiritable table th.left,.xiritable table th.align-left{text-align:left}.xiritable table td.vertical,.xiritable table th.vertical{writing-mode:sideways-rl;text-orientation:sideways}.xiritable table td.vertical div,.xiritable table th.vertical div{max-height:6rem}.xiritable table td.sideways,.xiritable table th.sideways{writing-mode:sideways-lr;text-orientation:sideways}.xiritable table td.sideways div,.xiritable table th.sideways div{max-height:6rem}.xiritable table td.upright,.xiritable table th.upright{writing-mode:vertical-rl;text-orientation:upright}.xiritable table.borders td+td{border-left:1px solid var(--outline-variant, #C2C7CF)}.xiritable table.bordersHeader th+th{border-left:1px solid var(--outline-variant, #C2C7CF)}.xiritable table td.mat-mdc-cell mat-form-field{--mat-form-field-container-height: 40px;--mat-form-field-container-vertical-padding: 8px}.xiritable .mat-column-select{overflow:initial}.xiritable .select-buttons{padding:.3rem .8rem;display:flex;align-items:center}.xiritable .select-buttons button{margin-right:.5rem}.xiritable .nodata{padding:.5rem 1.5rem;font-size:var(--xiri-font-size-label);background-color:var(--surface, #FFFFFF);animation:fadeInUp .25s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.xiritable .loader{position:absolute;top:0;left:0;width:100%;bottom:0;display:flex;justify-content:center;align-items:center;background-color:var(--ripple, rgba(206, 212, 218, .5));z-index:200;border-radius:var(--mat-card-elevated-container-shape, 12px)}xiri-dyncomponent{margin-bottom:2rem}[hidden]{display:none!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dyncomponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "dyncomponent", required: false }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }], filterData: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterData", required: false }] }], clickedRow: [{ type: i0.Output, args: ["clickedRow"] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }], table: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTable), { isSignal: true }] }] } });
 
 class XiriFormService {
@@ -4152,6 +4133,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             args: [{ selector: 'xiri-query', imports: [XiriFormFieldsComponent, NgTemplateOutlet, XiriButtonlineComponent, MatProgressSpinner], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"xrow\">\n\t<div class=\"xcol query\">\n\t\t<xiri-form-fields [form]=\"formFields()\" (formChange)=\"formChanged($event)\" display=\"line\"></xiri-form-fields>\n\t\t@if (error()) {\n\t\t\t<div class=\"error\">{{ error() }}</div>\n\t\t}\n\t</div>\n\t@if (settings().buttonline) {\n\t\t<div class=\"xcol formbtnline\" [class]=\"settings().buttonline.display\">\n\t\t\t<xiri-buttonline [settings]=\"settings().buttonline.data\" [filterData]=\"filterData()\" [disabled]=\"!formValid()\"\n\t\t\t                 (result)=\"clickedButton($event)\"></xiri-buttonline>\n\t\t</div>\n\t\t@if (loading()) {\n\t\t\t<div class=\"xcol\">\n\t\t\t\t<mat-spinner diameter=\"30\"></mat-spinner>\n\t\t\t</div>\n\t\t}\n\t}\n\t@if (dynData.data) {\n\t\t<div class=\"xcol\">\n\t\t\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: dynData }\"></ng-container>\n\t\t</div>\n\t}\n\t@if (data()) {\n\t\t<div class=\"xcol\">\n\t\t\t<ng-container *ngTemplateOutlet=\"dyncomponent(); context: { $implicit: data() }\"></ng-container>\n\t\t</div>\n\t}\n</div>\n", styles: [".query{padding-top:.5rem;padding-left:1rem;padding-right:1rem}\n"] }]
         }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }], dyncomponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "dyncomponent", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
 
+class XiriSkeletonComponent {
+    constructor() {
+        this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.height = input('1em', ...(ngDevMode ? [{ debugName: "height" }] : []));
+        this.lines = input(1, ...(ngDevMode ? [{ debugName: "lines" }] : []));
+        this.columns = input(4, ...(ngDevMode ? [{ debugName: "columns" }] : []));
+        this.animate = input(true, ...(ngDevMode ? [{ debugName: "animate" }] : []));
+        this.fill = input(false, ...(ngDevMode ? [{ debugName: "fill" }] : []));
+        this.linesArray = computed(() => Array.from({ length: this.lines() }), ...(ngDevMode ? [{ debugName: "linesArray" }] : []));
+        this.columnsArray = computed(() => Array.from({ length: this.columns() }), ...(ngDevMode ? [{ debugName: "columnsArray" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: XiriSkeletonComponent, isStandalone: true, selector: "xiri-skeleton", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-label": "Laden..." }, properties: { "class.fill": "fill()" } }, ngImport: i0, template: "@switch (type()) {\n\t@case ('text') {\n\t\t<div class=\"skeleton-text\">\n\t\t\t@for (_ of linesArray(); track $index) {\n\t\t\t\t<div class=\"skeleton-line\" [class.animate]=\"animate()\"\n\t\t\t\t     [style.width]=\"$last ? '60%' : width()\"\n\t\t\t\t     [style.height]=\"height()\"></div>\n\t\t\t}\n\t\t</div>\n\t}\n\t@case ('circle') {\n\t\t<div class=\"skeleton-circle\" [class.animate]=\"animate()\"\n\t\t     [style.width]=\"width()\"\n\t\t     [style.height]=\"width()\"></div>\n\t}\n\t@case ('rect') {\n\t\t<div class=\"skeleton-rect\" [class.animate]=\"animate()\"\n\t\t     [style.width]=\"width()\"\n\t\t     [style.height]=\"height()\"></div>\n\t}\n\t@case ('table-row') {\n\t\t<div class=\"skeleton-table\" [class.fill-height]=\"fill()\">\n\t\t\t@for (_ of linesArray(); track $index) {\n\t\t\t\t<div class=\"skeleton-table-row\">\n\t\t\t\t\t@for (_ of columnsArray(); track $index) {\n\t\t\t\t\t\t<div class=\"skeleton-table-cell\">\n\t\t\t\t\t\t\t<div class=\"skeleton-line\" [class.animate]=\"animate()\"></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t}\n}\n", styles: ["@keyframes shimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}:host{display:block}:host.fill{height:100%}.skeleton-line,.skeleton-circle,.skeleton-rect{background-color:var(--color-gray-200, #E9ECEF);border-radius:4px}.skeleton-line.animate,.skeleton-circle.animate,.skeleton-rect.animate{background-image:linear-gradient(90deg,var(--color-gray-200, #E9ECEF) 0px,var(--color-gray-100, #F8F9FA) 40px,var(--color-gray-200, #E9ECEF) 80px);background-size:200px 100%;animation:shimmer 1.5s ease-in-out infinite}.skeleton-text{display:flex;flex-direction:column;gap:8px}.skeleton-text .skeleton-line{height:1em}.skeleton-circle{border-radius:50%}.skeleton-rect{border-radius:8px}.skeleton-table{display:flex;flex-direction:column;gap:12px}.skeleton-table.fill-height{height:100%;overflow:hidden}.skeleton-table.fill-height .skeleton-table-row{flex:1;min-height:0}.skeleton-table-row{display:flex;gap:16px}.skeleton-table-cell{flex:1}.skeleton-table-cell .skeleton-line{height:1em;width:100%}@media(prefers-reduced-motion:reduce){.skeleton-line.animate,.skeleton-circle.animate,.skeleton-rect.animate{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'xiri-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, host: { 'role': 'status', 'aria-label': 'Laden...', '[class.fill]': 'fill()' }, template: "@switch (type()) {\n\t@case ('text') {\n\t\t<div class=\"skeleton-text\">\n\t\t\t@for (_ of linesArray(); track $index) {\n\t\t\t\t<div class=\"skeleton-line\" [class.animate]=\"animate()\"\n\t\t\t\t     [style.width]=\"$last ? '60%' : width()\"\n\t\t\t\t     [style.height]=\"height()\"></div>\n\t\t\t}\n\t\t</div>\n\t}\n\t@case ('circle') {\n\t\t<div class=\"skeleton-circle\" [class.animate]=\"animate()\"\n\t\t     [style.width]=\"width()\"\n\t\t     [style.height]=\"width()\"></div>\n\t}\n\t@case ('rect') {\n\t\t<div class=\"skeleton-rect\" [class.animate]=\"animate()\"\n\t\t     [style.width]=\"width()\"\n\t\t     [style.height]=\"height()\"></div>\n\t}\n\t@case ('table-row') {\n\t\t<div class=\"skeleton-table\" [class.fill-height]=\"fill()\">\n\t\t\t@for (_ of linesArray(); track $index) {\n\t\t\t\t<div class=\"skeleton-table-row\">\n\t\t\t\t\t@for (_ of columnsArray(); track $index) {\n\t\t\t\t\t\t<div class=\"skeleton-table-cell\">\n\t\t\t\t\t\t\t<div class=\"skeleton-line\" [class.animate]=\"animate()\"></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t}\n}\n", styles: ["@keyframes shimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}:host{display:block}:host.fill{height:100%}.skeleton-line,.skeleton-circle,.skeleton-rect{background-color:var(--color-gray-200, #E9ECEF);border-radius:4px}.skeleton-line.animate,.skeleton-circle.animate,.skeleton-rect.animate{background-image:linear-gradient(90deg,var(--color-gray-200, #E9ECEF) 0px,var(--color-gray-100, #F8F9FA) 40px,var(--color-gray-200, #E9ECEF) 80px);background-size:200px 100%;animation:shimmer 1.5s ease-in-out infinite}.skeleton-text{display:flex;flex-direction:column;gap:8px}.skeleton-text .skeleton-line{height:1em}.skeleton-circle{border-radius:50%}.skeleton-rect{border-radius:8px}.skeleton-table{display:flex;flex-direction:column;gap:12px}.skeleton-table.fill-height{height:100%;overflow:hidden}.skeleton-table.fill-height .skeleton-table-row{flex:1;min-height:0}.skeleton-table-row{display:flex;gap:16px}.skeleton-table-cell{flex:1}.skeleton-table-cell .skeleton-line{height:1em;width:100%}@media(prefers-reduced-motion:reduce){.skeleton-line.animate,.skeleton-circle.animate,.skeleton-rect.animate{animation:none}}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }] } });
+
 class XiriCardComponent {
     constructor() {
         this.dataService = inject(XiriDataService);
@@ -4252,7 +4253,7 @@ class XiriCardComponent {
         this.subs.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: XiriCardComponent, isStandalone: true, selector: "xiri-card", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-header>\n\t\t@if (settings().headerIcon) {\n\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t@if (settings().header) {\n\t\t\t<mat-card-title [class]=\"{hasHeaderSub: settings().headerSub}\">{{ settings().header }}</mat-card-title>\n\t\t}\n\t\t@if (settings().headerSub) {\n\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t}\n\t\t@if (settings().buttonsTop) {\n\t\t\t<xiri-buttonline [settings]=\"settings().buttonsTop\"></xiri-buttonline>\n\t\t}\n\t\t@if (settings().reload && settings().url) {\n\t\t\t<button mat-icon-button (click)=\"reload()\" [disabled]=\"loading()\" class=\"reload-btn\" aria-label=\"Neu laden\">\n\t\t\t\t<mat-icon [class.spinning]=\"loading()\">autorenew</mat-icon>\n\t\t\t</button>\n\t\t}\n\t</mat-card-header>\n\t@if (loading() && !cardData()) {\n\t\t<mat-card-content>\n\t\t\t<xiri-skeleton type=\"table-row\" [columns]=\"2\" [lines]=\"3\"></xiri-skeleton>\n\t\t</mat-card-content>\n\t} @else if (errorMsg()) {\n\t\t<mat-card-content>\n\t\t\t<div class=\"load-error\">{{ errorMsg() }}</div>\n\t\t</mat-card-content>\n\t} @else {\n\t\t<mat-card-content class=\"hasTable\">\n\t\t\t@if (rawTable()) {\n\t\t\t\t<xiri-raw-table [settings]=\"rawTable()!\"></xiri-raw-table>\n\t\t\t}\n\t\t</mat-card-content>\n\t}\n\t@if (settings().buttonsBottom) {\n\t\t<mat-card-actions align=\"end\">\n\t\t\t<xiri-buttonline [settings]=\"settings().buttonsBottom\"></xiri-buttonline>\n\t\t</mat-card-actions>\n\t}\n\t@else if (settings().buttons) {\n\t\t<mat-card-actions align=\"end\">\n\t\t\t<xiri-buttonline [settings]=\"{buttons: settings().buttons, class: '' }\"></xiri-buttonline>\n\t\t</mat-card-actions>\n\t}\n</mat-card>\n", styles: [":host{animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinning{animation:spin 1s linear infinite}.card{overflow:hidden}.card mat-card-header{margin:0 0 2px;box-shadow:0 3px 2px -2px var(--outline-variant, #C2C7CF);padding:4px 8px 4px 16px;align-items:center;min-height:32px}.card mat-card-header .header-image{margin-bottom:0;width:var(--xiri-icon-size-lg);height:var(--xiri-icon-size-lg);align-items:center;display:flex}.card mat-card-header .header-image mat-icon{font-size:var(--xiri-icon-size-lg);height:var(--xiri-icon-size-lg);width:var(--xiri-icon-size-lg);color:var(--primary)}.card mat-card-header mat-card-title.hasHeaderSub{padding-top:2px}.card mat-card-header mat-card-subtitle{padding-bottom:2px}.card mat-card-header xiri-buttonline{display:flex;justify-content:flex-end;flex:1}.card mat-card-header xiri-buttonline ::ng-deep button{width:32px;height:32px;padding:4px}.card mat-card-header xiri-buttonline ::ng-deep button mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}.card .reload-btn{margin-left:auto;width:32px;height:32px;padding:4px}.card .reload-btn mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}.card mat-card-content{padding:0}.card mat-card-content.hasTable{max-height:50vh;overflow-x:auto}.card mat-card-content xiri-skeleton{padding:16px}.card mat-card-content .load-error{padding:16px;color:var(--error, #B3261E)}.card mat-card-actions{padding:4px 8px;min-height:32px;border-top:1px solid var(--outline-variant, rgba(0, 0, 0, .12))}.card mat-card-actions xiri-buttonline ::ng-deep button{width:32px;height:32px;padding:4px}.card mat-card-actions xiri-buttonline ::ng-deep button mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: XiriButtonlineComponent, selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: XiriRawTableComponent, selector: "xiri-raw-table", inputs: ["settings"] }, { kind: "component", type: XiriSkeletonComponent, selector: "xiri-skeleton", inputs: ["type", "width", "height", "lines", "columns", "animate"] }, { kind: "directive", type: MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: XiriCardComponent, isStandalone: true, selector: "xiri-card", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-card class=\"card mat-mdc-elevation-specific mat-elevation-z2\">\n\t<mat-card-header>\n\t\t@if (settings().headerIcon) {\n\t\t\t<div mat-card-avatar class=\"header-image\">\n\t\t\t\t<mat-icon [class]=\"settings().headerIconColor || 'primary'\">{{ settings().headerIcon }}</mat-icon>\n\t\t\t</div>\n\t\t}\n\t\t@if (settings().header) {\n\t\t\t<mat-card-title [class]=\"{hasHeaderSub: settings().headerSub}\">{{ settings().header }}</mat-card-title>\n\t\t}\n\t\t@if (settings().headerSub) {\n\t\t\t<mat-card-subtitle>{{ settings().headerSub }}</mat-card-subtitle>\n\t\t}\n\t\t@if (settings().buttonsTop) {\n\t\t\t<xiri-buttonline [settings]=\"settings().buttonsTop\"></xiri-buttonline>\n\t\t}\n\t\t@if (settings().reload && settings().url) {\n\t\t\t<button mat-icon-button (click)=\"reload()\" [disabled]=\"loading()\" class=\"reload-btn\" aria-label=\"Neu laden\">\n\t\t\t\t<mat-icon [class.spinning]=\"loading()\">autorenew</mat-icon>\n\t\t\t</button>\n\t\t}\n\t</mat-card-header>\n\t@if (loading() && !cardData()) {\n\t\t<mat-card-content>\n\t\t\t<xiri-skeleton type=\"table-row\" [columns]=\"2\" [lines]=\"3\"></xiri-skeleton>\n\t\t</mat-card-content>\n\t} @else if (errorMsg()) {\n\t\t<mat-card-content>\n\t\t\t<div class=\"load-error\">{{ errorMsg() }}</div>\n\t\t</mat-card-content>\n\t} @else {\n\t\t<mat-card-content class=\"hasTable\">\n\t\t\t@if (rawTable()) {\n\t\t\t\t<xiri-raw-table [settings]=\"rawTable()!\"></xiri-raw-table>\n\t\t\t}\n\t\t</mat-card-content>\n\t}\n\t@if (settings().buttonsBottom) {\n\t\t<mat-card-actions align=\"end\">\n\t\t\t<xiri-buttonline [settings]=\"settings().buttonsBottom\"></xiri-buttonline>\n\t\t</mat-card-actions>\n\t}\n\t@else if (settings().buttons) {\n\t\t<mat-card-actions align=\"end\">\n\t\t\t<xiri-buttonline [settings]=\"{buttons: settings().buttons, class: '' }\"></xiri-buttonline>\n\t\t</mat-card-actions>\n\t}\n</mat-card>\n", styles: [":host{animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinning{animation:spin 1s linear infinite}.card{overflow:hidden}.card mat-card-header{margin:0 0 2px;box-shadow:0 3px 2px -2px var(--outline-variant, #C2C7CF);padding:4px 8px 4px 16px;align-items:center;min-height:32px}.card mat-card-header .header-image{margin-bottom:0;width:var(--xiri-icon-size-lg);height:var(--xiri-icon-size-lg);align-items:center;display:flex}.card mat-card-header .header-image mat-icon{font-size:var(--xiri-icon-size-lg);height:var(--xiri-icon-size-lg);width:var(--xiri-icon-size-lg);color:var(--primary)}.card mat-card-header mat-card-title.hasHeaderSub{padding-top:2px}.card mat-card-header mat-card-subtitle{padding-bottom:2px}.card mat-card-header xiri-buttonline{display:flex;justify-content:flex-end;flex:1}.card mat-card-header xiri-buttonline ::ng-deep button{width:32px;height:32px;padding:4px}.card mat-card-header xiri-buttonline ::ng-deep button mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}.card .reload-btn{margin-left:auto;width:32px;height:32px;padding:4px}.card .reload-btn mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}.card mat-card-content{padding:0}.card mat-card-content.hasTable{max-height:50vh;overflow-x:auto}.card mat-card-content xiri-skeleton{padding:16px}.card mat-card-content .load-error{padding:16px;color:var(--error, #B3261E)}.card mat-card-actions{padding:4px 8px;min-height:32px;border-top:1px solid var(--outline-variant, rgba(0, 0, 0, .12))}.card mat-card-actions xiri-buttonline ::ng-deep button{width:32px;height:32px;padding:4px}.card mat-card-actions xiri-buttonline ::ng-deep button mat-icon{font-size:var(--xiri-icon-size-md);width:var(--xiri-icon-size-md);height:var(--xiri-icon-size-md)}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: XiriButtonlineComponent, selector: "xiri-buttonline", inputs: ["settings", "disabled", "filterData"], outputs: ["result"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: XiriRawTableComponent, selector: "xiri-raw-table", inputs: ["settings"] }, { kind: "component", type: XiriSkeletonComponent, selector: "xiri-skeleton", inputs: ["type", "width", "height", "lines", "columns", "animate", "fill"] }, { kind: "directive", type: MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriCardComponent, decorators: [{
             type: Component,
@@ -5027,15 +5028,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
 class XiriBreadcrumbComponent {
     constructor() {
-        this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: XiriBreadcrumbComponent, isStandalone: true, selector: "xiri-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n\t<ol>\n\t\t@for (item of items(); track $index; let last = $last) {\n\t\t\t<li [class.active]=\"last\">\n\t\t\t\t@if (!last && item.link) {\n\t\t\t\t\t@if (item.extern) {\n\t\t\t\t\t\t<a [href]=\"item.link\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<a [routerLink]=\"item.link\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t}\n\t\t\t\t} @else {\n\t\t\t\t\t<span>\n\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t</span>\n\t\t\t\t}\n\t\t\t\t@if (!last) {\n\t\t\t\t\t<mat-icon class=\"separator\">chevron_right</mat-icon>\n\t\t\t\t}\n\t\t\t</li>\n\t\t}\n\t</ol>\n</nav>\n", styles: [".breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0;gap:.25rem}.breadcrumb li{display:flex;align-items:center;gap:.25rem;font-size:var(--xiri-font-size-body, .875rem);color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.breadcrumb li a{display:flex;align-items:center;gap:.25rem;color:var(--primary, #2892D9);text-decoration:none;border-radius:4px;padding:.125rem .25rem;margin:-.125rem -.25rem}.breadcrumb li a:hover{text-decoration:underline;background:color-mix(in srgb,var(--primary, #2892D9) 8%,transparent)}.breadcrumb li a mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.breadcrumb li span{display:flex;align-items:center;gap:.25rem}.breadcrumb li span mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.breadcrumb li.active{font-weight:500;color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87))}.breadcrumb li .separator{font-size:1.125rem;width:1.125rem;height:1.125rem;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: XiriBreadcrumbComponent, isStandalone: true, selector: "xiri-breadcrumb", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n\t<ol>\n\t\t@for (item of settings(); track $index; let last = $last) {\n\t\t\t<li [class.active]=\"last\">\n\t\t\t\t@if (item.link) {\n\t\t\t\t\t@if (item.extern) {\n\t\t\t\t\t\t<a [href]=\"item.link\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<a [routerLink]=\"item.link\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t}\n\t\t\t\t} @else {\n\t\t\t\t\t<span>\n\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t</span>\n\t\t\t\t}\n\t\t\t\t@if (!last) {\n\t\t\t\t\t<mat-icon class=\"separator\">chevron_right</mat-icon>\n\t\t\t\t}\n\t\t\t</li>\n\t\t}\n\t</ol>\n</nav>\n", styles: [".breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0;gap:.25rem}.breadcrumb li{display:flex;align-items:center;gap:.25rem;font-size:var(--xiri-font-size-body, .875rem);color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.breadcrumb li a{display:flex;align-items:center;gap:.25rem;color:var(--primary, #2892D9);text-decoration:none;border-radius:4px;padding:.125rem .25rem;margin:-.125rem -.25rem}.breadcrumb li a:hover{text-decoration:underline;background:color-mix(in srgb,var(--primary, #2892D9) 8%,transparent)}.breadcrumb li a mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.breadcrumb li span{display:flex;align-items:center;gap:.25rem}.breadcrumb li span mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.breadcrumb li.active{font-weight:500;color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87))}.breadcrumb li .separator{font-size:1.125rem;width:1.125rem;height:1.125rem;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: XiriBreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'xiri-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, RouterLink], template: "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n\t<ol>\n\t\t@for (item of items(); track $index; let last = $last) {\n\t\t\t<li [class.active]=\"last\">\n\t\t\t\t@if (!last && item.link) {\n\t\t\t\t\t@if (item.extern) {\n\t\t\t\t\t\t<a [href]=\"item.link\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<a [routerLink]=\"item.link\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t}\n\t\t\t\t} @else {\n\t\t\t\t\t<span>\n\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t</span>\n\t\t\t\t}\n\t\t\t\t@if (!last) {\n\t\t\t\t\t<mat-icon class=\"separator\">chevron_right</mat-icon>\n\t\t\t\t}\n\t\t\t</li>\n\t\t}\n\t</ol>\n</nav>\n", styles: [".breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0;gap:.25rem}.breadcrumb li{display:flex;align-items:center;gap:.25rem;font-size:var(--xiri-font-size-body, .875rem);color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.breadcrumb li a{display:flex;align-items:center;gap:.25rem;color:var(--primary, #2892D9);text-decoration:none;border-radius:4px;padding:.125rem .25rem;margin:-.125rem -.25rem}.breadcrumb li a:hover{text-decoration:underline;background:color-mix(in srgb,var(--primary, #2892D9) 8%,transparent)}.breadcrumb li a mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.breadcrumb li span{display:flex;align-items:center;gap:.25rem}.breadcrumb li span mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.breadcrumb li.active{font-weight:500;color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87))}.breadcrumb li .separator{font-size:1.125rem;width:1.125rem;height:1.125rem;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}\n"] }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }] } });
+            args: [{ selector: 'xiri-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, RouterLink], template: "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n\t<ol>\n\t\t@for (item of settings(); track $index; let last = $last) {\n\t\t\t<li [class.active]=\"last\">\n\t\t\t\t@if (item.link) {\n\t\t\t\t\t@if (item.extern) {\n\t\t\t\t\t\t<a [href]=\"item.link\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<a [routerLink]=\"item.link\">\n\t\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t}\n\t\t\t\t} @else {\n\t\t\t\t\t<span>\n\t\t\t\t\t\t@if (item.icon) {\n\t\t\t\t\t\t\t<mat-icon>{{ item.icon }}</mat-icon>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{{ item.label }}\n\t\t\t\t\t</span>\n\t\t\t\t}\n\t\t\t\t@if (!last) {\n\t\t\t\t\t<mat-icon class=\"separator\">chevron_right</mat-icon>\n\t\t\t\t}\n\t\t\t</li>\n\t\t}\n\t</ol>\n</nav>\n", styles: [".breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0;gap:.25rem}.breadcrumb li{display:flex;align-items:center;gap:.25rem;font-size:var(--xiri-font-size-body, .875rem);color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}.breadcrumb li a{display:flex;align-items:center;gap:.25rem;color:var(--primary, #2892D9);text-decoration:none;border-radius:4px;padding:.125rem .25rem;margin:-.125rem -.25rem}.breadcrumb li a:hover{text-decoration:underline;background:color-mix(in srgb,var(--primary, #2892D9) 8%,transparent)}.breadcrumb li a mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.breadcrumb li span{display:flex;align-items:center;gap:.25rem}.breadcrumb li span mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.breadcrumb li.active{font-weight:500;color:var(--mat-sys-on-surface, rgba(0, 0, 0, .87))}.breadcrumb li .separator{font-size:1.125rem;width:1.125rem;height:1.125rem;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6))}\n"] }]
+        }], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: true }] }] } });
 
 class XiriLocalStorageService {
     constructor() {