@openmfp/ngx 0.14.1 → 0.14.2

package/fesm2022/openmfp-ngx.mjs

@@ -20,6 +20,8 @@ import * as i1 from '@angular/forms';
 import { FormBuilder, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { Input } from '@fundamental-ngx/ui5-webcomponents/input';
 import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
+import '@ui5/webcomponents-icons/dist/navigation-left-arrow.js';
+import '@ui5/webcomponents-icons/dist/navigation-right-arrow.js';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Dialog } from '@fundamental-ngx/ui5-webcomponents/dialog';
 import { Title } from '@fundamental-ngx/ui5-webcomponents/title';
@@ -414,7 +416,7 @@ class DeclarativeTable {
         _index;
     viewColumns = computed(() => processGroupFields(this.columns()), ...(ngDevMode ? [{ debugName: "viewColumns" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DeclarativeTable, isStandalone: true, selector: "mfp-declarative-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: true, transformFunction: null }, trackByPath: { classPropertyName: "trackByPath", publicName: "trackByPath", isSignal: true, isRequired: false, transformFunction: null }, totalItemsCount: { classPropertyName: "totalItemsCount", publicName: "totalItemsCount", isSignal: true, isRequired: false, transformFunction: null }, paginationLimit: { classPropertyName: "paginationLimit", publicName: "paginationLimit", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, growMode: { classPropertyName: "growMode", publicName: "growMode", isSignal: true, isRequired: false, transformFunction: null }, loadMoreButtonText: { classPropertyName: "loadMoreButtonText", publicName: "loadMoreButtonText", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", tableRowClicked: "tableRowClicked", loadMoreResources: "loadMoreResources", paginationLimitChanged: "paginationLimitChanged" }, ngImport: i0, template: "<ui5-table\n  data-testid=\"generic-table\"\n  [style.height]=\"height() ? height() + 'px' : null\"\n  [style.overflow-y]=\"'auto'\"\n>\n  <ui5-table-header-row\n    slot=\"headerRow\"\n    [sticky]=\"growMode() === 'Scroll' && !!height()\"\n  >\n    @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n      @if (column.group) {\n        <ui5-table-header-cell\n          [attr.data-testid]=\"'generic-table-header-' + column.group.name\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.group.label ?? column.group.name }}</ui5-table-header-cell\n        >\n      } @else {\n        <ui5-table-header-cell\n          [attr.data-testid]=\"'generic-table-header-' + column.property\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.label }}</ui5-table-header-cell\n        >\n      }\n    }\n  </ui5-table-header-row>\n\n  @for (item of resources(); let i = $index; track rowTrackBy($index, item)) {\n    <ui5-table-row\n      [attr.data-testid]=\"'generic-table-row-' + i\"\n      [class.disabled]=\"item.isAvailable === false\"\n      [interactive]=\"item.isAvailable !== false\"\n      (click)=\"tableRowClicked.emit(item)\"\n    >\n      @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n        @if (column.group) {\n          <ui5-table-cell\n            [attr.data-testid]=\"'generic-table-cell-' + i + '-' + column.group.name\"\n          >\n            @let isMultiline = column.group.multiline ?? true;\n            <div\n              class=\"flex\"\n              [style.alignItems]=\"isMultiline ? column.uiSettings?.align : null\"\n              [style.flexDirection]=\"isMultiline ? 'column' : 'row'\"\n              [style.justifyContent]=\"\n                isMultiline ? null : column.uiSettings?.align\n              \"\n            >\n              @for (\n                field of column.group.fields;\n                let last = $last;\n                track columnTrackBy(field, $index)\n              ) {\n                <span\n                  class=\"group-value\"\n                  [attr.data-testid]=\"\n                    'generic-table-cell-' +\n                    i +\n                    '-' +\n                    column.group.name +\n                    '-' +\n                    field.property\n                  \"\n                >\n                  @if (field.label) {\n                    <span>{{ field.label }}: </span>\n                  }\n                  <mfp-resource-field\n                    [fieldDefinition]=\"field\"\n                    [resource]=\"item\"\n                    (buttonClick)=\"buttonClick.emit($event)\"\n                  />\n                </span>\n                @if (!last && column.group.delimiter) {\n                  <span class=\"delimiter\">{{ column.group.delimiter }}</span>\n                }\n              }\n            </div>\n          </ui5-table-cell>\n        } @else {\n          <ui5-table-cell\n            [attr.data-testid]=\"'generic-table-cell-' + i + '-' + column.property\"\n          >\n            <div class=\"flex\" [style.justifyContent]=\"column.uiSettings?.align\">\n              <mfp-resource-field\n                [fieldDefinition]=\"column\"\n                [resource]=\"item\"\n                (buttonClick)=\"buttonClick.emit($event)\"\n              />\n            </div>\n          </ui5-table-cell>\n        }\n      }\n    </ui5-table-row>\n  } @empty {\n    <ui5-illustrated-message\n      name=\"NoData\"\n      slot=\"noData\"\n      data-testid=\"generic-table-view-nodata\"\n    >\n      <span slot=\"title\">No Resources</span>\n      <span slot=\"subtitle\">There are currently no items to show.</span>\n    </ui5-illustrated-message>\n  }\n\n  @if (hasMore()) {\n    <ui5-table-growing\n      id=\"growing\"\n      data-testid=\"generic-table-growing\"\n      slot=\"features\"\n      [mode]=\"growMode()\"\n      [text]=\"loadMoreButtonText()\"\n      (ui5LoadMore)=\"loadMoreResources.emit()\"\n    />\n  }\n</ui5-table>\n\n<!-- Pagination Control -->\n<div\n  class=\"pagination-footer\"\n  style=\"\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0rem 1rem;\n    min-height: 3rem;\n    border-top: 1px solid var(--sapList_BorderColor);\n  \"\n>\n  <div style=\"display: flex; align-items: center; gap: 1.5rem\">\n    <div style=\"display: flex; align-items: center; gap: 0.5rem\">\n      <span\n        style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n        >Items per load:</span\n      >\n      <ui5-select\n        data-testid=\"generic-table-pagination-select\"\n        style=\"width: 5rem\"\n        [value]=\"paginationLimit().toString()\"\n        (change)=\"paginationLimitChanged.emit(+$any($event)?.target?.value)\"\n      >\n        <ui5-option value=\"5\">5</ui5-option>\n        <ui5-option value=\"10\">10</ui5-option>\n        <ui5-option value=\"10\">20</ui5-option>\n        <ui5-option value=\"50\">50</ui5-option>\n        <ui5-option value=\"100\">100</ui5-option>\n      </ui5-select>\n    </div>\n\n    <span\n      style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n    >\n      Items loaded:\n      <b>{{\n        totalItemsCount() !== undefined\n          ? resources().length + ' / ' + totalItemsCount()\n          : resources().length\n      }}</b>\n    </span>\n  </div>\n</div>\n", styles: [".multiline{display:block}.disabled{filter:brightness(.92);pointer-events:none}.disabled ui5-table-cell:not(:first-child){color:var(--sapContent_DisabledTextColor, #6a6d70)}.disabled ui5-table-cell:not(:first-child) ui5-icon{color:var(--sapContent_DisabledTextColor, #6a6d70)}.group-value{display:flex;align-items:center}.flex{display:flex;width:100%}.delimiter{min-width:4px}\n"], dependencies: [{ kind: "component", type: IllustratedMessage, selector: "ui5-illustrated-message, [ui5-illustrated-message]", inputs: ["name", "design", "subtitleText", "titleText", "accessibleNameRef", "decorative"], exportAs: ["ui5IllustratedMessage"] }, { kind: "component", type: Table, selector: "ui5-table, [ui5-table]", inputs: ["accessibleName", "accessibleNameRef", "noDataText", "overflowMode", "loading", "loadingDelay", "rowActionCount", "alternateRowColors"], outputs: ["ui5RowClick", "ui5MoveOver", "ui5Move", "ui5RowActionClick"], exportAs: ["ui5Table"] }, { kind: "component", type: TableCell, selector: "ui5-table-cell, [ui5-table-cell]", inputs: ["horizontalAlign"], exportAs: ["ui5TableCell"] }, { kind: "component", type: TableHeaderCell, selector: "ui5-table-header-cell, [ui5-table-header-cell]", inputs: ["width", "minWidth", "importance", "popinText", "sortIndicator", "popinHidden", "horizontalAlign"], exportAs: ["ui5TableHeaderCell"] }, { kind: "component", type: TableHeaderRow, selector: "ui5-table-header-row, [ui5-table-header-row]", inputs: ["sticky"], exportAs: ["ui5TableHeaderRow"] }, { kind: "component", type: TableRow, selector: "ui5-table-row, [ui5-table-row]", inputs: ["rowKey", "position", "interactive", "navigated", "movable"], exportAs: ["ui5TableRow"] }, { kind: "component", type: ResourceField, selector: "mfp-resource-field", inputs: ["fieldDefinition", "resource"], outputs: ["buttonClick"] }, { kind: "component", type: Select, selector: "ui5-select, [ui5-select]", inputs: ["disabled", "name", "valueState", "required", "readonly", "accessibleName", "accessibleNameRef", "accessibleDescription", "accessibleDescriptionRef", "tooltip", "textSeparator", "value"], outputs: ["ui5Change", "ui5LiveChange", "ui5Open", "ui5Close"], exportAs: ["ui5Select"] }, { kind: "component", type: Option, selector: "ui5-option, [ui5-option]", inputs: ["value", "icon", "additionalText", "tooltip", "selected"], exportAs: ["ui5Option"] }, { kind: "component", type: TableGrowing, selector: "ui5-table-growing, [ui5-table-growing]", inputs: ["mode", "text", "subtext"], outputs: ["ui5LoadMore"], exportAs: ["ui5TableGrowing"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DeclarativeTable, isStandalone: true, selector: "mfp-declarative-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: true, transformFunction: null }, trackByPath: { classPropertyName: "trackByPath", publicName: "trackByPath", isSignal: true, isRequired: false, transformFunction: null }, totalItemsCount: { classPropertyName: "totalItemsCount", publicName: "totalItemsCount", isSignal: true, isRequired: false, transformFunction: null }, paginationLimit: { classPropertyName: "paginationLimit", publicName: "paginationLimit", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, growMode: { classPropertyName: "growMode", publicName: "growMode", isSignal: true, isRequired: false, transformFunction: null }, loadMoreButtonText: { classPropertyName: "loadMoreButtonText", publicName: "loadMoreButtonText", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", tableRowClicked: "tableRowClicked", loadMoreResources: "loadMoreResources", paginationLimitChanged: "paginationLimitChanged" }, ngImport: i0, template: "<ui5-table\n  data-testid=\"generic-table\"\n  [style.height]=\"height() ? height() + 'px' : null\"\n  [style.overflow-y]=\"'auto'\"\n>\n  <ui5-table-header-row\n    slot=\"headerRow\"\n    [sticky]=\"growMode() === 'Scroll' && !!height()\"\n  >\n    @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n      @if (column.group) {\n        <ui5-table-header-cell\n          [attr.data-testid]=\"'generic-table-header-' + column.group.name\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.group.label ?? column.group.name }}</ui5-table-header-cell\n        >\n      } @else {\n        <ui5-table-header-cell\n          [attr.data-testid]=\"'generic-table-header-' + column.property\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.label }}</ui5-table-header-cell\n        >\n      }\n    }\n  </ui5-table-header-row>\n\n  @for (item of resources(); let i = $index; track rowTrackBy($index, item)) {\n    <ui5-table-row\n      [attr.data-testid]=\"'generic-table-row-' + i\"\n      [class.disabled]=\"item.isAvailable === false\"\n      [interactive]=\"item.isAvailable !== false\"\n      (click)=\"tableRowClicked.emit(item)\"\n    >\n      @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n        @if (column.group) {\n          <ui5-table-cell\n            [attr.data-testid]=\"'generic-table-cell-' + i + '-' + column.group.name\"\n          >\n            @let isMultiline = column.group.multiline ?? true;\n            <div\n              class=\"flex\"\n              [style.alignItems]=\"isMultiline ? column.uiSettings?.align : null\"\n              [style.flexDirection]=\"isMultiline ? 'column' : 'row'\"\n              [style.justifyContent]=\"\n                isMultiline ? null : column.uiSettings?.align\n              \"\n            >\n              @for (\n                field of column.group.fields;\n                let last = $last;\n                track columnTrackBy(field, $index)\n              ) {\n                <span\n                  class=\"group-value\"\n                  [attr.data-testid]=\"\n                    'generic-table-cell-' +\n                    i +\n                    '-' +\n                    column.group.name +\n                    '-' +\n                    field.property\n                  \"\n                >\n                  @if (field.label) {\n                    <span>{{ field.label }}: </span>\n                  }\n                  <mfp-resource-field\n                    [fieldDefinition]=\"field\"\n                    [resource]=\"item\"\n                    (buttonClick)=\"buttonClick.emit($event)\"\n                  />\n                </span>\n                @if (!last && column.group.delimiter) {\n                  <span class=\"delimiter\">{{ column.group.delimiter }}</span>\n                }\n              }\n            </div>\n          </ui5-table-cell>\n        } @else {\n          <ui5-table-cell\n            [attr.data-testid]=\"'generic-table-cell-' + i + '-' + column.property\"\n          >\n            <div class=\"flex\" [style.justifyContent]=\"column.uiSettings?.align\">\n              <mfp-resource-field\n                [fieldDefinition]=\"column\"\n                [resource]=\"item\"\n                (buttonClick)=\"buttonClick.emit($event)\"\n              />\n            </div>\n          </ui5-table-cell>\n        }\n      }\n    </ui5-table-row>\n  } @empty {\n    <ui5-illustrated-message\n      name=\"NoData\"\n      slot=\"noData\"\n      data-testid=\"generic-table-view-nodata\"\n    >\n      <span slot=\"title\">No Resources</span>\n      <span slot=\"subtitle\">There are currently no items to show.</span>\n    </ui5-illustrated-message>\n  }\n\n  @if (hasMore()) {\n    <ui5-table-growing\n      id=\"growing\"\n      data-testid=\"generic-table-growing\"\n      slot=\"features\"\n      [mode]=\"growMode()\"\n      [text]=\"loadMoreButtonText()\"\n      (ui5LoadMore)=\"loadMoreResources.emit()\"\n    />\n  }\n</ui5-table>\n\n<!-- Pagination Control -->\n<div\n  class=\"pagination-footer\"\n  style=\"\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0rem 1rem;\n    min-height: 3rem;\n    border-top: 1px solid var(--sapList_BorderColor);\n  \"\n>\n  <div style=\"display: flex; align-items: center; gap: 1.5rem\">\n    <div style=\"display: flex; align-items: center; gap: 0.5rem\">\n      <span\n        style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n        >Items per load:</span\n      >\n      <ui5-select\n        data-testid=\"generic-table-pagination-select\"\n        style=\"width: 5rem\"\n        [value]=\"paginationLimit().toString()\"\n        (change)=\"paginationLimitChanged.emit(+$any($event)?.target?.value)\"\n      >\n        <ui5-option value=\"5\">5</ui5-option>\n        <ui5-option value=\"10\">10</ui5-option>\n        <ui5-option value=\"10\">20</ui5-option>\n        <ui5-option value=\"50\">50</ui5-option>\n        <ui5-option value=\"100\">100</ui5-option>\n      </ui5-select>\n    </div>\n\n    <span\n      style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n    >\n      Items loaded:\n      <b>{{\n        totalItemsCount() !== undefined\n          ? resources().length + ' / ' + totalItemsCount()\n          : resources().length\n      }}</b>\n    </span>\n  </div>\n</div>\n", styles: [".multiline{display:block}.disabled{filter:brightness(.92);pointer-events:none}.disabled ui5-table-cell:not(:first-child){color:var(--sapContent_DisabledTextColor, #6a6d70)}.disabled ui5-table-cell:not(:first-child) ui5-icon{color:var(--sapContent_DisabledTextColor, #6a6d70)}.group-value{display:flex;align-items:center}.flex{display:flex;width:100%}.delimiter{min-width:4px}ui5-table-header-row{padding-block-start:.75rem;padding-block-end:.25rem}\n"], dependencies: [{ kind: "component", type: IllustratedMessage, selector: "ui5-illustrated-message, [ui5-illustrated-message]", inputs: ["name", "design", "subtitleText", "titleText", "accessibleNameRef", "decorative"], exportAs: ["ui5IllustratedMessage"] }, { kind: "component", type: Table, selector: "ui5-table, [ui5-table]", inputs: ["accessibleName", "accessibleNameRef", "noDataText", "overflowMode", "loading", "loadingDelay", "rowActionCount", "alternateRowColors"], outputs: ["ui5RowClick", "ui5MoveOver", "ui5Move", "ui5RowActionClick"], exportAs: ["ui5Table"] }, { kind: "component", type: TableCell, selector: "ui5-table-cell, [ui5-table-cell]", inputs: ["horizontalAlign"], exportAs: ["ui5TableCell"] }, { kind: "component", type: TableHeaderCell, selector: "ui5-table-header-cell, [ui5-table-header-cell]", inputs: ["width", "minWidth", "importance", "popinText", "sortIndicator", "popinHidden", "horizontalAlign"], exportAs: ["ui5TableHeaderCell"] }, { kind: "component", type: TableHeaderRow, selector: "ui5-table-header-row, [ui5-table-header-row]", inputs: ["sticky"], exportAs: ["ui5TableHeaderRow"] }, { kind: "component", type: TableRow, selector: "ui5-table-row, [ui5-table-row]", inputs: ["rowKey", "position", "interactive", "navigated", "movable"], exportAs: ["ui5TableRow"] }, { kind: "component", type: ResourceField, selector: "mfp-resource-field", inputs: ["fieldDefinition", "resource"], outputs: ["buttonClick"] }, { kind: "component", type: Select, selector: "ui5-select, [ui5-select]", inputs: ["disabled", "name", "valueState", "required", "readonly", "accessibleName", "accessibleNameRef", "accessibleDescription", "accessibleDescriptionRef", "tooltip", "textSeparator", "value"], outputs: ["ui5Change", "ui5LiveChange", "ui5Open", "ui5Close"], exportAs: ["ui5Select"] }, { kind: "component", type: Option, selector: "ui5-option, [ui5-option]", inputs: ["value", "icon", "additionalText", "tooltip", "selected"], exportAs: ["ui5Option"] }, { kind: "component", type: TableGrowing, selector: "ui5-table-growing, [ui5-table-growing]", inputs: ["mode", "text", "subtext"], outputs: ["ui5LoadMore"], exportAs: ["ui5TableGrowing"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTable, decorators: [{
             type: Component,
@@ -429,7 +431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         Select,
                         Option,
                         TableGrowing,
-                    ], encapsulation: ViewEncapsulation.ShadowDom, template: "<ui5-table\n  data-testid=\"generic-table\"\n  [style.height]=\"height() ? height() + 'px' : null\"\n  [style.overflow-y]=\"'auto'\"\n>\n  <ui5-table-header-row\n    slot=\"headerRow\"\n    [sticky]=\"growMode() === 'Scroll' && !!height()\"\n  >\n    @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n      @if (column.group) {\n        <ui5-table-header-cell\n          [attr.data-testid]=\"'generic-table-header-' + column.group.name\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.group.label ?? column.group.name }}</ui5-table-header-cell\n        >\n      } @else {\n        <ui5-table-header-cell\n          [attr.data-testid]=\"'generic-table-header-' + column.property\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.label }}</ui5-table-header-cell\n        >\n      }\n    }\n  </ui5-table-header-row>\n\n  @for (item of resources(); let i = $index; track rowTrackBy($index, item)) {\n    <ui5-table-row\n      [attr.data-testid]=\"'generic-table-row-' + i\"\n      [class.disabled]=\"item.isAvailable === false\"\n      [interactive]=\"item.isAvailable !== false\"\n      (click)=\"tableRowClicked.emit(item)\"\n    >\n      @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n        @if (column.group) {\n          <ui5-table-cell\n            [attr.data-testid]=\"'generic-table-cell-' + i + '-' + column.group.name\"\n          >\n            @let isMultiline = column.group.multiline ?? true;\n            <div\n              class=\"flex\"\n              [style.alignItems]=\"isMultiline ? column.uiSettings?.align : null\"\n              [style.flexDirection]=\"isMultiline ? 'column' : 'row'\"\n              [style.justifyContent]=\"\n                isMultiline ? null : column.uiSettings?.align\n              \"\n            >\n              @for (\n                field of column.group.fields;\n                let last = $last;\n                track columnTrackBy(field, $index)\n              ) {\n                <span\n                  class=\"group-value\"\n                  [attr.data-testid]=\"\n                    'generic-table-cell-' +\n                    i +\n                    '-' +\n                    column.group.name +\n                    '-' +\n                    field.property\n                  \"\n                >\n                  @if (field.label) {\n                    <span>{{ field.label }}: </span>\n                  }\n                  <mfp-resource-field\n                    [fieldDefinition]=\"field\"\n                    [resource]=\"item\"\n                    (buttonClick)=\"buttonClick.emit($event)\"\n                  />\n                </span>\n                @if (!last && column.group.delimiter) {\n                  <span class=\"delimiter\">{{ column.group.delimiter }}</span>\n                }\n              }\n            </div>\n          </ui5-table-cell>\n        } @else {\n          <ui5-table-cell\n            [attr.data-testid]=\"'generic-table-cell-' + i + '-' + column.property\"\n          >\n            <div class=\"flex\" [style.justifyContent]=\"column.uiSettings?.align\">\n              <mfp-resource-field\n                [fieldDefinition]=\"column\"\n                [resource]=\"item\"\n                (buttonClick)=\"buttonClick.emit($event)\"\n              />\n            </div>\n          </ui5-table-cell>\n        }\n      }\n    </ui5-table-row>\n  } @empty {\n    <ui5-illustrated-message\n      name=\"NoData\"\n      slot=\"noData\"\n      data-testid=\"generic-table-view-nodata\"\n    >\n      <span slot=\"title\">No Resources</span>\n      <span slot=\"subtitle\">There are currently no items to show.</span>\n    </ui5-illustrated-message>\n  }\n\n  @if (hasMore()) {\n    <ui5-table-growing\n      id=\"growing\"\n      data-testid=\"generic-table-growing\"\n      slot=\"features\"\n      [mode]=\"growMode()\"\n      [text]=\"loadMoreButtonText()\"\n      (ui5LoadMore)=\"loadMoreResources.emit()\"\n    />\n  }\n</ui5-table>\n\n<!-- Pagination Control -->\n<div\n  class=\"pagination-footer\"\n  style=\"\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0rem 1rem;\n    min-height: 3rem;\n    border-top: 1px solid var(--sapList_BorderColor);\n  \"\n>\n  <div style=\"display: flex; align-items: center; gap: 1.5rem\">\n    <div style=\"display: flex; align-items: center; gap: 0.5rem\">\n      <span\n        style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n        >Items per load:</span\n      >\n      <ui5-select\n        data-testid=\"generic-table-pagination-select\"\n        style=\"width: 5rem\"\n        [value]=\"paginationLimit().toString()\"\n        (change)=\"paginationLimitChanged.emit(+$any($event)?.target?.value)\"\n      >\n        <ui5-option value=\"5\">5</ui5-option>\n        <ui5-option value=\"10\">10</ui5-option>\n        <ui5-option value=\"10\">20</ui5-option>\n        <ui5-option value=\"50\">50</ui5-option>\n        <ui5-option value=\"100\">100</ui5-option>\n      </ui5-select>\n    </div>\n\n    <span\n      style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n    >\n      Items loaded:\n      <b>{{\n        totalItemsCount() !== undefined\n          ? resources().length + ' / ' + totalItemsCount()\n          : resources().length\n      }}</b>\n    </span>\n  </div>\n</div>\n", styles: [".multiline{display:block}.disabled{filter:brightness(.92);pointer-events:none}.disabled ui5-table-cell:not(:first-child){color:var(--sapContent_DisabledTextColor, #6a6d70)}.disabled ui5-table-cell:not(:first-child) ui5-icon{color:var(--sapContent_DisabledTextColor, #6a6d70)}.group-value{display:flex;align-items:center}.flex{display:flex;width:100%}.delimiter{min-width:4px}\n"] }]
+                    ], encapsulation: ViewEncapsulation.ShadowDom, template: "<ui5-table\n  data-testid=\"generic-table\"\n  [style.height]=\"height() ? height() + 'px' : null\"\n  [style.overflow-y]=\"'auto'\"\n>\n  <ui5-table-header-row\n    slot=\"headerRow\"\n    [sticky]=\"growMode() === 'Scroll' && !!height()\"\n  >\n    @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n      @if (column.group) {\n        <ui5-table-header-cell\n          [attr.data-testid]=\"'generic-table-header-' + column.group.name\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.group.label ?? column.group.name }}</ui5-table-header-cell\n        >\n      } @else {\n        <ui5-table-header-cell\n          [attr.data-testid]=\"'generic-table-header-' + column.property\"\n          [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n          >{{ column.label }}</ui5-table-header-cell\n        >\n      }\n    }\n  </ui5-table-header-row>\n\n  @for (item of resources(); let i = $index; track rowTrackBy($index, item)) {\n    <ui5-table-row\n      [attr.data-testid]=\"'generic-table-row-' + i\"\n      [class.disabled]=\"item.isAvailable === false\"\n      [interactive]=\"item.isAvailable !== false\"\n      (click)=\"tableRowClicked.emit(item)\"\n    >\n      @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n        @if (column.group) {\n          <ui5-table-cell\n            [attr.data-testid]=\"'generic-table-cell-' + i + '-' + column.group.name\"\n          >\n            @let isMultiline = column.group.multiline ?? true;\n            <div\n              class=\"flex\"\n              [style.alignItems]=\"isMultiline ? column.uiSettings?.align : null\"\n              [style.flexDirection]=\"isMultiline ? 'column' : 'row'\"\n              [style.justifyContent]=\"\n                isMultiline ? null : column.uiSettings?.align\n              \"\n            >\n              @for (\n                field of column.group.fields;\n                let last = $last;\n                track columnTrackBy(field, $index)\n              ) {\n                <span\n                  class=\"group-value\"\n                  [attr.data-testid]=\"\n                    'generic-table-cell-' +\n                    i +\n                    '-' +\n                    column.group.name +\n                    '-' +\n                    field.property\n                  \"\n                >\n                  @if (field.label) {\n                    <span>{{ field.label }}: </span>\n                  }\n                  <mfp-resource-field\n                    [fieldDefinition]=\"field\"\n                    [resource]=\"item\"\n                    (buttonClick)=\"buttonClick.emit($event)\"\n                  />\n                </span>\n                @if (!last && column.group.delimiter) {\n                  <span class=\"delimiter\">{{ column.group.delimiter }}</span>\n                }\n              }\n            </div>\n          </ui5-table-cell>\n        } @else {\n          <ui5-table-cell\n            [attr.data-testid]=\"'generic-table-cell-' + i + '-' + column.property\"\n          >\n            <div class=\"flex\" [style.justifyContent]=\"column.uiSettings?.align\">\n              <mfp-resource-field\n                [fieldDefinition]=\"column\"\n                [resource]=\"item\"\n                (buttonClick)=\"buttonClick.emit($event)\"\n              />\n            </div>\n          </ui5-table-cell>\n        }\n      }\n    </ui5-table-row>\n  } @empty {\n    <ui5-illustrated-message\n      name=\"NoData\"\n      slot=\"noData\"\n      data-testid=\"generic-table-view-nodata\"\n    >\n      <span slot=\"title\">No Resources</span>\n      <span slot=\"subtitle\">There are currently no items to show.</span>\n    </ui5-illustrated-message>\n  }\n\n  @if (hasMore()) {\n    <ui5-table-growing\n      id=\"growing\"\n      data-testid=\"generic-table-growing\"\n      slot=\"features\"\n      [mode]=\"growMode()\"\n      [text]=\"loadMoreButtonText()\"\n      (ui5LoadMore)=\"loadMoreResources.emit()\"\n    />\n  }\n</ui5-table>\n\n<!-- Pagination Control -->\n<div\n  class=\"pagination-footer\"\n  style=\"\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0rem 1rem;\n    min-height: 3rem;\n    border-top: 1px solid var(--sapList_BorderColor);\n  \"\n>\n  <div style=\"display: flex; align-items: center; gap: 1.5rem\">\n    <div style=\"display: flex; align-items: center; gap: 0.5rem\">\n      <span\n        style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n        >Items per load:</span\n      >\n      <ui5-select\n        data-testid=\"generic-table-pagination-select\"\n        style=\"width: 5rem\"\n        [value]=\"paginationLimit().toString()\"\n        (change)=\"paginationLimitChanged.emit(+$any($event)?.target?.value)\"\n      >\n        <ui5-option value=\"5\">5</ui5-option>\n        <ui5-option value=\"10\">10</ui5-option>\n        <ui5-option value=\"10\">20</ui5-option>\n        <ui5-option value=\"50\">50</ui5-option>\n        <ui5-option value=\"100\">100</ui5-option>\n      </ui5-select>\n    </div>\n\n    <span\n      style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n    >\n      Items loaded:\n      <b>{{\n        totalItemsCount() !== undefined\n          ? resources().length + ' / ' + totalItemsCount()\n          : resources().length\n      }}</b>\n    </span>\n  </div>\n</div>\n", styles: [".multiline{display:block}.disabled{filter:brightness(.92);pointer-events:none}.disabled ui5-table-cell:not(:first-child){color:var(--sapContent_DisabledTextColor, #6a6d70)}.disabled ui5-table-cell:not(:first-child) ui5-icon{color:var(--sapContent_DisabledTextColor, #6a6d70)}.group-value{display:flex;align-items:center}.flex{display:flex;width:100%}.delimiter{min-width:4px}ui5-table-header-row{padding-block-start:.75rem;padding-block-end:.25rem}\n"] }]
         }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], resources: [{ type: i0.Input, args: [{ isSignal: true, alias: "resources", required: true }] }], trackByPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByPath", required: false }] }], totalItemsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItemsCount", required: false }] }], paginationLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationLimit", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], growMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "growMode", required: false }] }], loadMoreButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreButtonText", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }], tableRowClicked: [{ type: i0.Output, args: ["tableRowClicked"] }], loadMoreResources: [{ type: i0.Output, args: ["loadMoreResources"] }], paginationLimitChanged: [{ type: i0.Output, args: ["paginationLimitChanged"] }] } });
 
 function setPropertyByPath(object, path, value) {
@@ -560,6 +562,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             args: [{ selector: 'mfp-declarative-form', imports: [ReactiveFormsModule, Input, Label, Select, Option], encapsulation: ViewEncapsulation.ShadowDom, template: "<section class=\"form\" data-testid=\"generic-form\" [formGroup]=\"form\">\n  @for (field of fields(); track field.name) {\n    @let control = form.controls[field.name];\n    <div\n      class=\"inputs\"\n      [attr.data-testid]=\"'generic-form-field-container-' + field.name\"\n    >\n      <ui5-label\n        show-colon\n        [attr.data-testid]=\"'generic-form-field-label-' + field.name\"\n        [required]=\"field.required\"\n        >{{ field.label }}</ui5-label\n      >\n      @if (field.values?.length) {\n        <ui5-select\n          class=\"input\"\n          [attr.data-testid]=\"'generic-form-field-' + field.name\"\n          [disabled]=\"field.disabled\"\n          [required]=\"field.required\"\n          [value]=\"control.value\"\n          [valueState]=\"getValueState(field.name)\"\n          (blur)=\"onFieldBlur(field)\"\n          (change)=\"setFormControlValue($event, field)\"\n          (input)=\"setFormControlValue($event, field)\"\n        >\n          @if (getError(field.name); as error) {\n            <div slot=\"valueStateMessage\">{{ error }}</div>\n          }\n          @for (value of [''].concat(field.values ?? []); track value) {\n            <ui5-option\n              [attr.data-testid]=\"\n                'generic-form-field-' +\n                field.name +\n                '-option-' +\n                (value || 'empty')\n              \"\n              [selected]=\"value === control.value\"\n              [value]=\"value\"\n              >{{ value }}</ui5-option\n            >\n          }\n        </ui5-select>\n      } @else {\n        <ui5-input\n          class=\"input\"\n          [attr.data-testid]=\"'generic-form-field-' + field.name\"\n          [disabled]=\"field.disabled\"\n          [required]=\"field.required\"\n          [value]=\"control.value\"\n          [valueState]=\"getValueState(field.name)\"\n          (blur)=\"onFieldBlur(field)\"\n          (change)=\"setFormControlValue($event, field)\"\n          (input)=\"setFormControlValue($event, field)\"\n        >\n          @if (getError(field.name); as error) {\n            <div slot=\"valueStateMessage\">{{ error }}</div>\n          }\n        </ui5-input>\n      }\n    </div>\n  }\n</section>\n", styles: [".form>div{display:flex;flex-direction:column;justify-content:space-evenly;align-items:flex-start;margin-bottom:.5rem;width:100%}.input{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], initialValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValues", required: false }] }], fieldErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldErrors", required: false }] }], fieldChange: [{ type: i0.Output, args: ["fieldChange"] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }] } });
 
+/**
+ * Horizontal filter-tab strip rendered above the table by
+ * `<mfp-declarative-table-card>`. Internal to the table-card — not part of the
+ * package public API.
+ *
+ * Renders one tab per {@link FieldFilterDefinition}. When the combined width
+ * exceeds the host width, left/right chevron buttons appear and scroll the
+ * strip by ~70% of the visible width per click; the native scrollbar is hidden.
+ *
+ * Initial active tab:
+ * - The first `FieldFilterDefinition` with `default: true`, if any.
+ * - Otherwise the first tab in the array.
+ *
+ * The component owns the active-tab state; the host only needs to listen to
+ * `tabChanged` and apply the picked filter to its data layer. If the host
+ * wants an "All / no filter" option it must author it as a regular tab — the
+ * strip never auto-prepends one. The output type still allows `undefined` for
+ * forward compatibility with hosts that want to clear the selection.
+ */
+class FilterTabs {
+    tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    tabChanged = output();
+    activeTab = signal(undefined, ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    stripRef = viewChild('strip', ...(ngDevMode ? [{ debugName: "stripRef" }] : /* istanbul ignore next */ []));
+    canScrollLeft = signal(false, ...(ngDevMode ? [{ debugName: "canScrollLeft" }] : /* istanbul ignore next */ []));
+    canScrollRight = signal(false, ...(ngDevMode ? [{ debugName: "canScrollRight" }] : /* istanbul ignore next */ []));
+    injector = inject(Injector);
+    resizeObserver;
+    constructor() {
+        effect(() => {
+            const tabs = this.tabs();
+            const next = tabs.find((t) => t.default) ?? tabs[0];
+            this.activeTab.set(next);
+            afterNextRender(() => this.recomputeScrollState(), {
+                injector: this.injector,
+            });
+        });
+        afterNextRender(() => {
+            const el = this.stripRef()?.nativeElement;
+            if (!el)
+                return;
+            this.resizeObserver = new ResizeObserver(() => this.recomputeScrollState());
+            this.resizeObserver.observe(el);
+            this.recomputeScrollState();
+        }, { injector: this.injector });
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+    }
+    /**
+     * Reflects the carousel's current `scrollLeft` into signals that drive the
+     * chevron buttons' visibility. Called on init, on user scroll, and after
+     * any size change.
+     */
+    recomputeScrollState() {
+        const el = this.stripRef()?.nativeElement;
+        if (!el) {
+            this.canScrollLeft.set(false);
+            this.canScrollRight.set(false);
+            return;
+        }
+        const { scrollLeft, scrollWidth, clientWidth } = el;
+        // 1px tolerance — browsers occasionally report fractional pixel widths.
+        this.canScrollLeft.set(scrollLeft > 1);
+        this.canScrollRight.set(scrollLeft + clientWidth < scrollWidth - 1);
+    }
+    onScroll() {
+        this.recomputeScrollState();
+    }
+    /**
+     * Scrolls the strip by ~70% of its visible width so one filter overlaps
+     * the previous viewport — matches the carousel idiom in SAP and Material.
+     */
+    scroll(direction) {
+        const el = this.stripRef()?.nativeElement;
+        if (!el)
+            return;
+        const delta = el.clientWidth * 0.7 * (direction === 'right' ? 1 : -1);
+        el.scrollBy({ left: delta, behavior: 'smooth' });
+    }
+    select(tab) {
+        this.activeTab.set(tab);
+        this.tabChanged.emit(tab);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FilterTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: FilterTabs, isStandalone: true, selector: "mfp-filter-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { tabChanged: "tabChanged" }, viewQueries: [{ propertyName: "stripRef", first: true, predicate: ["strip"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"filter-tabs\">\n  @if (canScrollLeft()) {\n    <button\n      type=\"button\"\n      class=\"filter-tabs__chevron filter-tabs__chevron--left\"\n      aria-label=\"Scroll filters left\"\n      (click)=\"scroll('left')\"\n    >\n      <ui5-icon name=\"navigation-left-arrow\" />\n    </button>\n  }\n  <div\n    #strip\n    class=\"filter-tabs__strip\"\n    role=\"tablist\"\n    (scroll)=\"onScroll()\"\n  >\n    @for (tab of tabs(); track tab.property + ':' + tab.value) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        class=\"filter-tabs__tab\"\n        [class.filter-tabs__tab--active]=\"activeTab() === tab\"\n        [attr.aria-selected]=\"activeTab() === tab\"\n        (click)=\"select(tab)\"\n      >\n        {{ tab.label }}\n      </button>\n    }\n  </div>\n  @if (canScrollRight()) {\n    <button\n      type=\"button\"\n      class=\"filter-tabs__chevron filter-tabs__chevron--right\"\n      aria-label=\"Scroll filters right\"\n      (click)=\"scroll('right')\"\n    >\n      <ui5-icon name=\"navigation-right-arrow\" />\n    </button>\n  }\n</div>\n", styles: [":host{display:block}.filter-tabs{position:relative;display:flex;align-items:stretch;padding:0 1rem;min-height:2.5rem}.filter-tabs__strip{display:flex;flex:1;align-items:stretch;gap:2.25rem;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.filter-tabs__strip::-webkit-scrollbar{display:none}.filter-tabs__tab{appearance:none;background:transparent;border:0;padding:.75rem 0;cursor:pointer;white-space:nowrap;font-family:var(--Font-Family-sapFontFamily, 72);font-size:.875rem;font-weight:500;color:var(--sapTextColor, #1d2d3e);border-bottom:3px solid transparent;transition:color .15s ease,border-color .15s ease}.filter-tabs__tab:hover:not(.filter-tabs__tab--active){color:var(--sapLink_Hover_Color, var(--sapButton_Selected_TextColor, #0070f2))}.filter-tabs__tab:focus-visible{outline:1px solid var(--sapContent_FocusColor, #0070f2);outline-offset:2px}.filter-tabs__tab--active{color:var(--sapButton_Selected_TextColor, var(--sapButton_IconColor, #0070f2));border-bottom-color:var(--sapButton_Selected_BorderColor, var(--sapButton_IconColor, #0070f2))}.filter-tabs__chevron{appearance:none;background:transparent;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:2rem;color:var(--sapButton_IconColor, #0070f2);flex:0 0 auto}.filter-tabs__chevron--left{margin-right:.25rem}.filter-tabs__chevron--right{margin-left:.25rem}.filter-tabs__chevron:hover{background:var(--sapButton_Lite_Hover_Background, rgba(0, 0, 0, .04))}\n"], dependencies: [{ kind: "component", type: Icon, selector: "ui5-icon, [ui5-icon]", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FilterTabs, decorators: [{
+            type: Component,
+            args: [{ selector: 'mfp-filter-tabs', standalone: true, imports: [Icon], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, template: "<div class=\"filter-tabs\">\n  @if (canScrollLeft()) {\n    <button\n      type=\"button\"\n      class=\"filter-tabs__chevron filter-tabs__chevron--left\"\n      aria-label=\"Scroll filters left\"\n      (click)=\"scroll('left')\"\n    >\n      <ui5-icon name=\"navigation-left-arrow\" />\n    </button>\n  }\n  <div\n    #strip\n    class=\"filter-tabs__strip\"\n    role=\"tablist\"\n    (scroll)=\"onScroll()\"\n  >\n    @for (tab of tabs(); track tab.property + ':' + tab.value) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        class=\"filter-tabs__tab\"\n        [class.filter-tabs__tab--active]=\"activeTab() === tab\"\n        [attr.aria-selected]=\"activeTab() === tab\"\n        (click)=\"select(tab)\"\n      >\n        {{ tab.label }}\n      </button>\n    }\n  </div>\n  @if (canScrollRight()) {\n    <button\n      type=\"button\"\n      class=\"filter-tabs__chevron filter-tabs__chevron--right\"\n      aria-label=\"Scroll filters right\"\n      (click)=\"scroll('right')\"\n    >\n      <ui5-icon name=\"navigation-right-arrow\" />\n    </button>\n  }\n</div>\n", styles: [":host{display:block}.filter-tabs{position:relative;display:flex;align-items:stretch;padding:0 1rem;min-height:2.5rem}.filter-tabs__strip{display:flex;flex:1;align-items:stretch;gap:2.25rem;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.filter-tabs__strip::-webkit-scrollbar{display:none}.filter-tabs__tab{appearance:none;background:transparent;border:0;padding:.75rem 0;cursor:pointer;white-space:nowrap;font-family:var(--Font-Family-sapFontFamily, 72);font-size:.875rem;font-weight:500;color:var(--sapTextColor, #1d2d3e);border-bottom:3px solid transparent;transition:color .15s ease,border-color .15s ease}.filter-tabs__tab:hover:not(.filter-tabs__tab--active){color:var(--sapLink_Hover_Color, var(--sapButton_Selected_TextColor, #0070f2))}.filter-tabs__tab:focus-visible{outline:1px solid var(--sapContent_FocusColor, #0070f2);outline-offset:2px}.filter-tabs__tab--active{color:var(--sapButton_Selected_TextColor, var(--sapButton_IconColor, #0070f2));border-bottom-color:var(--sapButton_Selected_BorderColor, var(--sapButton_IconColor, #0070f2))}.filter-tabs__chevron{appearance:none;background:transparent;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:2rem;color:var(--sapButton_IconColor, #0070f2);flex:0 0 auto}.filter-tabs__chevron--left{margin-right:.25rem}.filter-tabs__chevron--right{margin-left:.25rem}.filter-tabs__chevron:hover{background:var(--sapButton_Lite_Hover_Background, rgba(0, 0, 0, .04))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], tabChanged: [{ type: i0.Output, args: ["tabChanged"] }], stripRef: [{ type: i0.ViewChild, args: ['strip', { isSignal: true }] }] } });
+
 class DeclarativeTableCard {
     resources = input.required(...(ngDevMode ? [{ debugName: "resources" }] : /* istanbul ignore next */ []));
     config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
@@ -575,6 +669,7 @@ class DeclarativeTableCard {
     createSubmit = output();
     editSubmit = output();
     deleteSubmit = output();
+    filterTabChanged = output();
     searchState = signal('collapsed', ...(ngDevMode ? [{ debugName: "searchState" }] : /* istanbul ignore next */ []));
     searchExpanded = computed(() => this.searchState() !== 'collapsed', ...(ngDevMode ? [{ debugName: "searchExpanded" }] : /* istanbul ignore next */ []));
     searchCollapsing = computed(() => this.searchState() === 'collapsing', ...(ngDevMode ? [{ debugName: "searchCollapsing" }] : /* istanbul ignore next */ []));
@@ -601,6 +696,10 @@ class DeclarativeTableCard {
         }
         return this.buildInitialValues(editConfig.fields, pendingResource);
     }, ...(ngDevMode ? [{ debugName: "editInitialValue" }] : /* istanbul ignore next */ []));
+    /** Filter-tab definitions for the strip rendered above the table. */
+    filterTabs = computed(() => this.config().filterTabs ?? [], ...(ngDevMode ? [{ debugName: "filterTabs" }] : /* istanbul ignore next */ []));
+    /** Whether the tab strip should render at all. */
+    hasFilterTabs = computed(() => this.filterTabs().length > 0, ...(ngDevMode ? [{ debugName: "hasFilterTabs" }] : /* istanbul ignore next */ []));
     injector = inject(Injector);
     constructor() {
         this.searchControl.valueChanges
@@ -609,6 +708,9 @@ class DeclarativeTableCard {
             this.searchChanged.emit(value ?? '');
         });
     }
+    onFilterTabChanged(tab) {
+        this.filterTabChanged.emit(tab);
+    }
     toggleSearch() {
         if (this.searchState() === 'expanded') {
             this.collapseSearch();
@@ -739,21 +841,22 @@ class DeclarativeTableCard {
         }, {});
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTableCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DeclarativeTableCard, isStandalone: true, selector: "mfp-declarative-table-card", inputs: { resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, createFormState: { classPropertyName: "createFormState", publicName: "createFormState", isSignal: true, isRequired: false, transformFunction: null }, editFormState: { classPropertyName: "editFormState", publicName: "editFormState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionButtonClick: "actionButtonClick", tableRowClicked: "tableRowClicked", loadMoreResources: "loadMoreResources", paginationLimitChanged: "paginationLimitChanged", searchChanged: "searchChanged", createFieldChange: "createFieldChange", editFieldChange: "editFieldChange", createSubmit: "createSubmit", editSubmit: "editSubmit", deleteSubmit: "deleteSubmit" }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"card\" data-testid=\"generic-table-card\">\n  <div class=\"card__header\">\n    <div class=\"card__title\">\n      @if (header(); as header) {\n        {{ header }}\n        @if (headerTooltip(); as tooltip) {\n          <ui5-icon\n            class=\"card__info-icon\"\n            name=\"hint\"\n            [accessibleName]=\"tooltip\"\n            [showTooltip]=\"true\"\n          />\n        }\n      }\n    </div>\n    <div class=\"card__actions\">\n      @if (config().resourcesSearchable) {\n        @if (searchExpanded()) {\n          <ui5-input\n            #searchInput\n            data-testid=\"generic-table-card-search-input\"\n            [class]=\"\n              'card__search-input card__search-input--' +\n              (searchCollapsing() ? 'leave' : 'enter')\n            \"\n            [formControl]=\"searchControl\"\n            (animationend)=\"onSearchAnimationEnd()\"\n            (blur)=\"onSearchBlur()\"\n          />\n        }\n        <ui5-button\n          class=\"card__search-btn\"\n          data-testid=\"generic-table-card-search-btn\"\n          design=\"Transparent\"\n          [accessibleName]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n          [icon]=\"searchButtonConfig()?.icon ?? 'search'\"\n          [tooltip]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n          (click)=\"toggleSearch()\"\n        />\n      }\n      @if (createFormConfig()) {\n        <ui5-button\n          class=\"card__create-btn\"\n          data-testid=\"generic-table-card-create-btn\"\n          [accessibleName]=\"createButtonConfig()?.text || createButtonConfig()?.tooltip || 'Create'\"\n          [design]=\"createButtonConfig()?.design ?? 'Transparent'\"\n          [icon]=\"createButtonConfig()?.icon ?? 'add'\"\n          [tooltip]=\"createButtonConfig()?.tooltip\"\n          (click)=\"createDialogOpen.set(true)\"\n        >\n          {{ createButtonConfig()?.text ?? '' }}\n        </ui5-button>\n      }\n    </div>\n  </div>\n\n  <div class=\"card__body\">\n    @if (tableConfig(); as config) {\n      <mfp-declarative-table\n        [columns]=\"effectiveColumns()\"\n        [growMode]=\"config.growMode ?? 'Button'\"\n        [hasMore]=\"config.hasMore ?? false\"\n        [height]=\"config.height\"\n        [loadMoreButtonText]=\"config.loadMoreButtonText ?? 'Load More'\"\n        [paginationLimit]=\"config.paginationLimit ?? 5\"\n        [resources]=\"resources()\"\n        [totalItemsCount]=\"config.totalItemsCount\"\n        (buttonClick)=\"onButtonClick($event)\"\n        (loadMoreResources)=\"loadMoreResources.emit()\"\n        (paginationLimitChanged)=\"paginationLimitChanged.emit($event)\"\n        (tableRowClicked)=\"tableRowClicked.emit($event)\"\n      />\n    }\n  </div>\n</div>\n\n@if (createFormConfig(); as config) {\n  <ui5-dialog\n    data-testid=\"generic-table-card-create-dialog\"\n    [accessibleName]=\"config.title ?? 'Create'\"\n    [open]=\"createDialogOpen()\"\n    (ui5BeforeClose)=\"createDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config.title ?? 'Create' }}</ui5-title>\n    </div>\n    <div class=\"dialog__body\">\n      <mfp-declarative-form\n        #createForm\n        [fieldErrors]=\"createFormState().fieldErrors ?? {}\"\n        [fields]=\"config.fields\"\n        (fieldChange)=\"onCreateFieldChange($event)\"\n        (formSubmit)=\"onCreateSubmit($event)\"\n      />\n    </div>\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button\n        data-testid=\"generic-table-card-create-confirm\"\n        design=\"Emphasized\"\n        [disabled]=\"hasErrors(createFormState())\"\n        (click)=\"createForm.submit()\"\n      >\n        {{ config.confirmLabel ?? 'Save' }}\n      </ui5-button>\n      <ui5-button data-testid=\"generic-table-card-create-cancel\" design=\"Transparent\" (click)=\"closeCreateDialog()\">\n        {{ config.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n\n@if (editFormConfig(); as config) {\n  <ui5-dialog\n    data-testid=\"generic-table-card-edit-dialog\"\n    [accessibleName]=\"config.title ?? 'Edit'\"\n    [open]=\"editDialogOpen()\"\n    (ui5BeforeClose)=\"editDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config.title ?? 'Edit' }}</ui5-title>\n    </div>\n    <div class=\"dialog__body\">\n      <mfp-declarative-form\n        #editForm\n        [fieldErrors]=\"editFormState().fieldErrors ?? {}\"\n        [fields]=\"config.fields\"\n        [initialValues]=\"editInitialValue()\"\n        (fieldChange)=\"onEditFieldChange($event)\"\n        (formSubmit)=\"onEditSubmit($event)\"\n      />\n    </div>\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button\n        data-testid=\"generic-table-card-edit-confirm\"\n        design=\"Emphasized\"\n        [disabled]=\"hasErrors(editFormState())\"\n        (click)=\"editForm.submit()\"\n      >\n        {{ config.confirmLabel ?? 'Edit' }}\n      </ui5-button>\n      <ui5-button data-testid=\"generic-table-card-edit-cancel\" design=\"Transparent\" (click)=\"closeEditDialog()\">\n        {{ config.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n\n@if (deleteConfirmationConfig(); as config) {\n  <ui5-dialog\n    data-testid=\"generic-table-card-delete-dialog\"\n    [accessibleName]=\"config.title ?? 'Confirm Delete'\"\n    [open]=\"deleteDialogOpen()\"\n    (ui5BeforeClose)=\"deleteDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config.title ?? 'Confirm Delete' }}</ui5-title>\n    </div>\n    @if (config.message) {\n      <div class=\"dialog__body\">\n        <p class=\"dialog__message\">{{ config.message }}</p>\n      </div>\n    }\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button data-testid=\"generic-table-card-delete-confirm\" design=\"Negative\" (click)=\"onDeleteSubmit()\">\n        {{ config.confirmLabel ?? 'Delete' }}\n      </ui5-button>\n      <ui5-button data-testid=\"generic-table-card-delete-cancel\" design=\"Transparent\" (click)=\"closeDeleteDialog()\">\n        {{ config.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n", styles: [":host{display:block}@keyframes slide-in{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}@keyframes slide-out{0%{opacity:1;transform:scaleX(1)}to{opacity:0;transform:scaleX(0)}}.card{display:flex;flex-direction:column;border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:16px;background:var(--sapGroup_TitleBackground, #fff)}.card__header{display:flex;align-items:center;justify-content:space-between;min-height:3rem;padding:0 1rem;border-bottom:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9)}.card__title{color:var(--sapTile_TitleTextColor);text-overflow:ellipsis;font-family:var(--Font-Family-sapFontFamily, 72);font-size:var(--Font-Size-sapFontHeader6Size, 16px);font-style:normal;font-weight:700;line-height:normal;display:flex;align-items:center}.card__actions{display:flex;align-items:center;gap:.5rem}.card__info-icon{color:var(--sapButton_IconColor, #0070f2);margin-left:.5rem}.card__search-input{transform-origin:right center}.card__search-input--enter{animation:slide-in .2s ease-out both}.card__search-input--leave{animation:slide-out .2s ease-in both}.card__create-btn,.card__search-btn{min-width:auto;color:var(--sapButton_IconColor, #0070f2)}.card__body{flex:1;overflow:auto}.dialog__header{display:flex;align-items:flex-start;padding:.75rem 1rem}.dialog__body{margin:-1rem;min-width:320px;padding:1rem}.dialog__message{padding:1rem;margin:0;font-size:.875rem;max-width:320px}.dialog__footer{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem 1rem;margin:0 -1rem;width:100%}\n"], dependencies: [{ kind: "component", type: DeclarativeTable, selector: "mfp-declarative-table", inputs: ["columns", "resources", "trackByPath", "totalItemsCount", "paginationLimit", "hasMore", "growMode", "loadMoreButtonText", "height"], outputs: ["buttonClick", "tableRowClicked", "loadMoreResources", "paginationLimitChanged"] }, { kind: "component", type: DeclarativeForm, selector: "mfp-declarative-form", inputs: ["fields", "initialValues", "fieldErrors"], outputs: ["fieldChange", "formSubmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Dialog, selector: "ui5-dialog, [ui5-dialog]", inputs: ["headerText", "stretch", "draggable", "resizable", "state", "initialFocus", "preventFocusRestore", "accessibleName", "accessibleNameRef", "accessibleRole", "accessibleDescription", "accessibleDescriptionRef", "preventInitialFocus", "open"], outputs: ["ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close"], exportAs: ["ui5Dialog"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }, { kind: "component", type: Button, selector: "ui5-button, [ui5-button]", inputs: ["design", "disabled", "icon", "endIcon", "submits", "tooltip", "accessibleName", "accessibleNameRef", "accessibilityAttributes", "accessibleDescription", "type", "accessibleRole", "loading", "loadingDelay"], outputs: ["ui5Click"], exportAs: ["ui5Button"] }, { kind: "component", type: Icon, selector: "ui5-icon, [ui5-icon]", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "component", type: Input, selector: "ui5-input, [ui5-input]", inputs: ["disabled", "placeholder", "readonly", "required", "noTypeahead", "type", "value", "valueState", "name", "showSuggestions", "maxlength", "accessibleName", "accessibleNameRef", "accessibleDescription", "accessibleDescriptionRef", "showClearIcon", "open", "filter"], outputs: ["ui5Change", "ui5Input", "ui5Select", "ui5SelectionChange", "ui5Open", "ui5Close"], exportAs: ["ui5Input"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DeclarativeTableCard, isStandalone: true, selector: "mfp-declarative-table-card", inputs: { resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, createFormState: { classPropertyName: "createFormState", publicName: "createFormState", isSignal: true, isRequired: false, transformFunction: null }, editFormState: { classPropertyName: "editFormState", publicName: "editFormState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionButtonClick: "actionButtonClick", tableRowClicked: "tableRowClicked", loadMoreResources: "loadMoreResources", paginationLimitChanged: "paginationLimitChanged", searchChanged: "searchChanged", createFieldChange: "createFieldChange", editFieldChange: "editFieldChange", createSubmit: "createSubmit", editSubmit: "editSubmit", deleteSubmit: "deleteSubmit", filterTabChanged: "filterTabChanged" }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"card\" data-testid=\"generic-table-card\">\n  <div class=\"card__header\">\n    <div class=\"card__title\">\n      @if (header(); as header) {\n        {{ header }}\n        @if (headerTooltip(); as tooltip) {\n          <ui5-icon\n            class=\"card__info-icon\"\n            name=\"hint\"\n            [accessibleName]=\"tooltip\"\n            [showTooltip]=\"true\"\n          />\n        }\n      }\n    </div>\n    <div class=\"card__actions\">\n      @if (config().resourcesSearchable) {\n        @if (searchExpanded()) {\n          <ui5-input\n            #searchInput\n            data-testid=\"generic-table-card-search-input\"\n            [class]=\"\n              'card__search-input card__search-input--' +\n              (searchCollapsing() ? 'leave' : 'enter')\n            \"\n            [formControl]=\"searchControl\"\n            (animationend)=\"onSearchAnimationEnd()\"\n            (blur)=\"onSearchBlur()\"\n          />\n        }\n        <ui5-button\n          class=\"card__search-btn\"\n          data-testid=\"generic-table-card-search-btn\"\n          design=\"Transparent\"\n          [accessibleName]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n          [icon]=\"searchButtonConfig()?.icon ?? 'search'\"\n          [tooltip]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n          (click)=\"toggleSearch()\"\n        />\n      }\n      @if (createFormConfig()) {\n        <ui5-button\n          class=\"card__create-btn\"\n          data-testid=\"generic-table-card-create-btn\"\n          [accessibleName]=\"createButtonConfig()?.text || createButtonConfig()?.tooltip || 'Create'\"\n          [design]=\"createButtonConfig()?.design ?? 'Transparent'\"\n          [icon]=\"createButtonConfig()?.icon ?? 'add'\"\n          [tooltip]=\"createButtonConfig()?.tooltip\"\n          (click)=\"createDialogOpen.set(true)\"\n        >\n          {{ createButtonConfig()?.text ?? '' }}\n        </ui5-button>\n      }\n    </div>\n  </div>\n\n  @if (hasFilterTabs()) {\n    <mfp-filter-tabs\n      [tabs]=\"filterTabs()\"\n      (tabChanged)=\"onFilterTabChanged($event)\"\n    />\n  }\n\n  <div class=\"card__body\">\n    @if (tableConfig(); as config) {\n      <mfp-declarative-table\n        [columns]=\"effectiveColumns()\"\n        [growMode]=\"config.growMode ?? 'Button'\"\n        [hasMore]=\"config.hasMore ?? false\"\n        [height]=\"config.height\"\n        [loadMoreButtonText]=\"config.loadMoreButtonText ?? 'Load More'\"\n        [paginationLimit]=\"config.paginationLimit ?? 5\"\n        [resources]=\"resources()\"\n        [totalItemsCount]=\"config.totalItemsCount\"\n        (buttonClick)=\"onButtonClick($event)\"\n        (loadMoreResources)=\"loadMoreResources.emit()\"\n        (paginationLimitChanged)=\"paginationLimitChanged.emit($event)\"\n        (tableRowClicked)=\"tableRowClicked.emit($event)\"\n      />\n    }\n  </div>\n</div>\n\n@if (createFormConfig(); as config) {\n  <ui5-dialog\n    data-testid=\"generic-table-card-create-dialog\"\n    [accessibleName]=\"config.title ?? 'Create'\"\n    [open]=\"createDialogOpen()\"\n    (ui5BeforeClose)=\"createDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config.title ?? 'Create' }}</ui5-title>\n    </div>\n    <div class=\"dialog__body\">\n      <mfp-declarative-form\n        #createForm\n        [fieldErrors]=\"createFormState().fieldErrors ?? {}\"\n        [fields]=\"config.fields\"\n        (fieldChange)=\"onCreateFieldChange($event)\"\n        (formSubmit)=\"onCreateSubmit($event)\"\n      />\n    </div>\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button\n        data-testid=\"generic-table-card-create-confirm\"\n        design=\"Emphasized\"\n        [disabled]=\"hasErrors(createFormState())\"\n        (click)=\"createForm.submit()\"\n      >\n        {{ config.confirmLabel ?? 'Save' }}\n      </ui5-button>\n      <ui5-button data-testid=\"generic-table-card-create-cancel\" design=\"Transparent\" (click)=\"closeCreateDialog()\">\n        {{ config.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n\n@if (editFormConfig(); as config) {\n  <ui5-dialog\n    data-testid=\"generic-table-card-edit-dialog\"\n    [accessibleName]=\"config.title ?? 'Edit'\"\n    [open]=\"editDialogOpen()\"\n    (ui5BeforeClose)=\"editDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config.title ?? 'Edit' }}</ui5-title>\n    </div>\n    <div class=\"dialog__body\">\n      <mfp-declarative-form\n        #editForm\n        [fieldErrors]=\"editFormState().fieldErrors ?? {}\"\n        [fields]=\"config.fields\"\n        [initialValues]=\"editInitialValue()\"\n        (fieldChange)=\"onEditFieldChange($event)\"\n        (formSubmit)=\"onEditSubmit($event)\"\n      />\n    </div>\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button\n        data-testid=\"generic-table-card-edit-confirm\"\n        design=\"Emphasized\"\n        [disabled]=\"hasErrors(editFormState())\"\n        (click)=\"editForm.submit()\"\n      >\n        {{ config.confirmLabel ?? 'Edit' }}\n      </ui5-button>\n      <ui5-button data-testid=\"generic-table-card-edit-cancel\" design=\"Transparent\" (click)=\"closeEditDialog()\">\n        {{ config.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n\n@if (deleteConfirmationConfig(); as config) {\n  <ui5-dialog\n    data-testid=\"generic-table-card-delete-dialog\"\n    [accessibleName]=\"config.title ?? 'Confirm Delete'\"\n    [open]=\"deleteDialogOpen()\"\n    (ui5BeforeClose)=\"deleteDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config.title ?? 'Confirm Delete' }}</ui5-title>\n    </div>\n    @if (config.message) {\n      <div class=\"dialog__body\">\n        <p class=\"dialog__message\">{{ config.message }}</p>\n      </div>\n    }\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button data-testid=\"generic-table-card-delete-confirm\" design=\"Negative\" (click)=\"onDeleteSubmit()\">\n        {{ config.confirmLabel ?? 'Delete' }}\n      </ui5-button>\n      <ui5-button data-testid=\"generic-table-card-delete-cancel\" design=\"Transparent\" (click)=\"closeDeleteDialog()\">\n        {{ config.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n", styles: [":host{display:block}@keyframes slide-in{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}@keyframes slide-out{0%{opacity:1;transform:scaleX(1)}to{opacity:0;transform:scaleX(0)}}.card{display:flex;flex-direction:column;border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:16px;background:var(--sapGroup_TitleBackground, #fff)}.card__header{display:flex;align-items:center;justify-content:space-between;min-height:3rem;padding:0 1rem}.card__title{color:var(--sapTile_TitleTextColor);text-overflow:ellipsis;font-family:var(--Font-Family-sapFontFamily, 72);font-size:var(--Font-Size-sapFontHeader6Size, 16px);font-style:normal;font-weight:700;line-height:normal;display:flex;align-items:center}.card__actions{display:flex;align-items:center;gap:.5rem}.card__info-icon{color:var(--sapButton_IconColor, #0070f2);margin-left:.5rem}.card__search-input{transform-origin:right center}.card__search-input--enter{animation:slide-in .2s ease-out both}.card__search-input--leave{animation:slide-out .2s ease-in both}.card__create-btn,.card__search-btn{min-width:auto;color:var(--sapButton_IconColor, #0070f2)}.card__body{flex:1;overflow:auto}.dialog__header{display:flex;align-items:flex-start;padding:.75rem 1rem}.dialog__body{margin:-1rem;min-width:320px;padding:1rem}.dialog__message{padding:1rem;margin:0;font-size:.875rem;max-width:320px}.dialog__footer{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem 1rem;margin:0 -1rem;width:100%}\n"], dependencies: [{ kind: "component", type: DeclarativeTable, selector: "mfp-declarative-table", inputs: ["columns", "resources", "trackByPath", "totalItemsCount", "paginationLimit", "hasMore", "growMode", "loadMoreButtonText", "height"], outputs: ["buttonClick", "tableRowClicked", "loadMoreResources", "paginationLimitChanged"] }, { kind: "component", type: DeclarativeForm, selector: "mfp-declarative-form", inputs: ["fields", "initialValues", "fieldErrors"], outputs: ["fieldChange", "formSubmit"] }, { kind: "component", type: FilterTabs, selector: "mfp-filter-tabs", inputs: ["tabs"], outputs: ["tabChanged"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Dialog, selector: "ui5-dialog, [ui5-dialog]", inputs: ["headerText", "stretch", "draggable", "resizable", "state", "initialFocus", "preventFocusRestore", "accessibleName", "accessibleNameRef", "accessibleRole", "accessibleDescription", "accessibleDescriptionRef", "preventInitialFocus", "open"], outputs: ["ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close"], exportAs: ["ui5Dialog"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }, { kind: "component", type: Button, selector: "ui5-button, [ui5-button]", inputs: ["design", "disabled", "icon", "endIcon", "submits", "tooltip", "accessibleName", "accessibleNameRef", "accessibilityAttributes", "accessibleDescription", "type", "accessibleRole", "loading", "loadingDelay"], outputs: ["ui5Click"], exportAs: ["ui5Button"] }, { kind: "component", type: Icon, selector: "ui5-icon, [ui5-icon]", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "component", type: Input, selector: "ui5-input, [ui5-input]", inputs: ["disabled", "placeholder", "readonly", "required", "noTypeahead", "type", "value", "valueState", "name", "showSuggestions", "maxlength", "accessibleName", "accessibleNameRef", "accessibleDescription", "accessibleDescriptionRef", "showClearIcon", "open", "filter"], outputs: ["ui5Change", "ui5Input", "ui5Select", "ui5SelectionChange", "ui5Open", "ui5Close"], exportAs: ["ui5Input"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTableCard, decorators: [{
             type: Component,
             args: [{ selector: 'mfp-declarative-table-card', imports: [
                         DeclarativeTable,
                         DeclarativeForm,
+                        FilterTabs,
                         ReactiveFormsModule,
                         Dialog,
                         Title,
                         Button,
                         Icon,
                         Input,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"card\" data-testid=\"generic-table-card\">\n  <div class=\"card__header\">\n    <div class=\"card__title\">\n      @if (header(); as header) {\n        {{ header }}\n        @if (headerTooltip(); as tooltip) {\n          <ui5-icon\n            class=\"card__info-icon\"\n            name=\"hint\"\n            [accessibleName]=\"tooltip\"\n            [showTooltip]=\"true\"\n          />\n        }\n      }\n    </div>\n    <div class=\"card__actions\">\n      @if (config().resourcesSearchable) {\n        @if (searchExpanded()) {\n          <ui5-input\n            #searchInput\n            data-testid=\"generic-table-card-search-input\"\n            [class]=\"\n              'card__search-input card__search-input--' +\n              (searchCollapsing() ? 'leave' : 'enter')\n            \"\n            [formControl]=\"searchControl\"\n            (animationend)=\"onSearchAnimationEnd()\"\n            (blur)=\"onSearchBlur()\"\n          />\n        }\n        <ui5-button\n          class=\"card__search-btn\"\n          data-testid=\"generic-table-card-search-btn\"\n          design=\"Transparent\"\n          [accessibleName]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n          [icon]=\"searchButtonConfig()?.icon ?? 'search'\"\n          [tooltip]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n          (click)=\"toggleSearch()\"\n        />\n      }\n      @if (createFormConfig()) {\n        <ui5-button\n          class=\"card__create-btn\"\n          data-testid=\"generic-table-card-create-btn\"\n          [accessibleName]=\"createButtonConfig()?.text || createButtonConfig()?.tooltip || 'Create'\"\n          [design]=\"createButtonConfig()?.design ?? 'Transparent'\"\n          [icon]=\"createButtonConfig()?.icon ?? 'add'\"\n          [tooltip]=\"createButtonConfig()?.tooltip\"\n          (click)=\"createDialogOpen.set(true)\"\n        >\n          {{ createButtonConfig()?.text ?? '' }}\n        </ui5-button>\n      }\n    </div>\n  </div>\n\n  <div class=\"card__body\">\n    @if (tableConfig(); as config) {\n      <mfp-declarative-table\n        [columns]=\"effectiveColumns()\"\n        [growMode]=\"config.growMode ?? 'Button'\"\n        [hasMore]=\"config.hasMore ?? false\"\n        [height]=\"config.height\"\n        [loadMoreButtonText]=\"config.loadMoreButtonText ?? 'Load More'\"\n        [paginationLimit]=\"config.paginationLimit ?? 5\"\n        [resources]=\"resources()\"\n        [totalItemsCount]=\"config.totalItemsCount\"\n        (buttonClick)=\"onButtonClick($event)\"\n        (loadMoreResources)=\"loadMoreResources.emit()\"\n        (paginationLimitChanged)=\"paginationLimitChanged.emit($event)\"\n        (tableRowClicked)=\"tableRowClicked.emit($event)\"\n      />\n    }\n  </div>\n</div>\n\n@if (createFormConfig(); as config) {\n  <ui5-dialog\n    data-testid=\"generic-table-card-create-dialog\"\n    [accessibleName]=\"config.title ?? 'Create'\"\n    [open]=\"createDialogOpen()\"\n    (ui5BeforeClose)=\"createDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config.title ?? 'Create' }}</ui5-title>\n    </div>\n    <div class=\"dialog__body\">\n      <mfp-declarative-form\n        #createForm\n        [fieldErrors]=\"createFormState().fieldErrors ?? {}\"\n        [fields]=\"config.fields\"\n        (fieldChange)=\"onCreateFieldChange($event)\"\n        (formSubmit)=\"onCreateSubmit($event)\"\n      />\n    </div>\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button\n        data-testid=\"generic-table-card-create-confirm\"\n        design=\"Emphasized\"\n        [disabled]=\"hasErrors(createFormState())\"\n        (click)=\"createForm.submit()\"\n      >\n        {{ config.confirmLabel ?? 'Save' }}\n      </ui5-button>\n      <ui5-button data-testid=\"generic-table-card-create-cancel\" design=\"Transparent\" (click)=\"closeCreateDialog()\">\n        {{ config.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n\n@if (editFormConfig(); as config) {\n  <ui5-dialog\n    data-testid=\"generic-table-card-edit-dialog\"\n    [accessibleName]=\"config.title ?? 'Edit'\"\n    [open]=\"editDialogOpen()\"\n    (ui5BeforeClose)=\"editDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config.title ?? 'Edit' }}</ui5-title>\n    </div>\n    <div class=\"dialog__body\">\n      <mfp-declarative-form\n        #editForm\n        [fieldErrors]=\"editFormState().fieldErrors ?? {}\"\n        [fields]=\"config.fields\"\n        [initialValues]=\"editInitialValue()\"\n        (fieldChange)=\"onEditFieldChange($event)\"\n        (formSubmit)=\"onEditSubmit($event)\"\n      />\n    </div>\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button\n        data-testid=\"generic-table-card-edit-confirm\"\n        design=\"Emphasized\"\n        [disabled]=\"hasErrors(editFormState())\"\n        (click)=\"editForm.submit()\"\n      >\n        {{ config.confirmLabel ?? 'Edit' }}\n      </ui5-button>\n      <ui5-button data-testid=\"generic-table-card-edit-cancel\" design=\"Transparent\" (click)=\"closeEditDialog()\">\n        {{ config.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n\n@if (deleteConfirmationConfig(); as config) {\n  <ui5-dialog\n    data-testid=\"generic-table-card-delete-dialog\"\n    [accessibleName]=\"config.title ?? 'Confirm Delete'\"\n    [open]=\"deleteDialogOpen()\"\n    (ui5BeforeClose)=\"deleteDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config.title ?? 'Confirm Delete' }}</ui5-title>\n    </div>\n    @if (config.message) {\n      <div class=\"dialog__body\">\n        <p class=\"dialog__message\">{{ config.message }}</p>\n      </div>\n    }\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button data-testid=\"generic-table-card-delete-confirm\" design=\"Negative\" (click)=\"onDeleteSubmit()\">\n        {{ config.confirmLabel ?? 'Delete' }}\n      </ui5-button>\n      <ui5-button data-testid=\"generic-table-card-delete-cancel\" design=\"Transparent\" (click)=\"closeDeleteDialog()\">\n        {{ config.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n", styles: [":host{display:block}@keyframes slide-in{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}@keyframes slide-out{0%{opacity:1;transform:scaleX(1)}to{opacity:0;transform:scaleX(0)}}.card{display:flex;flex-direction:column;border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:16px;background:var(--sapGroup_TitleBackground, #fff)}.card__header{display:flex;align-items:center;justify-content:space-between;min-height:3rem;padding:0 1rem;border-bottom:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9)}.card__title{color:var(--sapTile_TitleTextColor);text-overflow:ellipsis;font-family:var(--Font-Family-sapFontFamily, 72);font-size:var(--Font-Size-sapFontHeader6Size, 16px);font-style:normal;font-weight:700;line-height:normal;display:flex;align-items:center}.card__actions{display:flex;align-items:center;gap:.5rem}.card__info-icon{color:var(--sapButton_IconColor, #0070f2);margin-left:.5rem}.card__search-input{transform-origin:right center}.card__search-input--enter{animation:slide-in .2s ease-out both}.card__search-input--leave{animation:slide-out .2s ease-in both}.card__create-btn,.card__search-btn{min-width:auto;color:var(--sapButton_IconColor, #0070f2)}.card__body{flex:1;overflow:auto}.dialog__header{display:flex;align-items:flex-start;padding:.75rem 1rem}.dialog__body{margin:-1rem;min-width:320px;padding:1rem}.dialog__message{padding:1rem;margin:0;font-size:.875rem;max-width:320px}.dialog__footer{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem 1rem;margin:0 -1rem;width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { resources: [{ type: i0.Input, args: [{ isSignal: true, alias: "resources", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], createFormState: [{ type: i0.Input, args: [{ isSignal: true, alias: "createFormState", required: false }] }], editFormState: [{ type: i0.Input, args: [{ isSignal: true, alias: "editFormState", required: false }] }], actionButtonClick: [{ type: i0.Output, args: ["actionButtonClick"] }], tableRowClicked: [{ type: i0.Output, args: ["tableRowClicked"] }], loadMoreResources: [{ type: i0.Output, args: ["loadMoreResources"] }], paginationLimitChanged: [{ type: i0.Output, args: ["paginationLimitChanged"] }], searchChanged: [{ type: i0.Output, args: ["searchChanged"] }], createFieldChange: [{ type: i0.Output, args: ["createFieldChange"] }], editFieldChange: [{ type: i0.Output, args: ["editFieldChange"] }], createSubmit: [{ type: i0.Output, args: ["createSubmit"] }], editSubmit: [{ type: i0.Output, args: ["editSubmit"] }], deleteSubmit: [{ type: i0.Output, args: ["deleteSubmit"] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"card\" data-testid=\"generic-table-card\">\n  <div class=\"card__header\">\n    <div class=\"card__title\">\n      @if (header(); as header) {\n        {{ header }}\n        @if (headerTooltip(); as tooltip) {\n          <ui5-icon\n            class=\"card__info-icon\"\n            name=\"hint\"\n            [accessibleName]=\"tooltip\"\n            [showTooltip]=\"true\"\n          />\n        }\n      }\n    </div>\n    <div class=\"card__actions\">\n      @if (config().resourcesSearchable) {\n        @if (searchExpanded()) {\n          <ui5-input\n            #searchInput\n            data-testid=\"generic-table-card-search-input\"\n            [class]=\"\n              'card__search-input card__search-input--' +\n              (searchCollapsing() ? 'leave' : 'enter')\n            \"\n            [formControl]=\"searchControl\"\n            (animationend)=\"onSearchAnimationEnd()\"\n            (blur)=\"onSearchBlur()\"\n          />\n        }\n        <ui5-button\n          class=\"card__search-btn\"\n          data-testid=\"generic-table-card-search-btn\"\n          design=\"Transparent\"\n          [accessibleName]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n          [icon]=\"searchButtonConfig()?.icon ?? 'search'\"\n          [tooltip]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n          (click)=\"toggleSearch()\"\n        />\n      }\n      @if (createFormConfig()) {\n        <ui5-button\n          class=\"card__create-btn\"\n          data-testid=\"generic-table-card-create-btn\"\n          [accessibleName]=\"createButtonConfig()?.text || createButtonConfig()?.tooltip || 'Create'\"\n          [design]=\"createButtonConfig()?.design ?? 'Transparent'\"\n          [icon]=\"createButtonConfig()?.icon ?? 'add'\"\n          [tooltip]=\"createButtonConfig()?.tooltip\"\n          (click)=\"createDialogOpen.set(true)\"\n        >\n          {{ createButtonConfig()?.text ?? '' }}\n        </ui5-button>\n      }\n    </div>\n  </div>\n\n  @if (hasFilterTabs()) {\n    <mfp-filter-tabs\n      [tabs]=\"filterTabs()\"\n      (tabChanged)=\"onFilterTabChanged($event)\"\n    />\n  }\n\n  <div class=\"card__body\">\n    @if (tableConfig(); as config) {\n      <mfp-declarative-table\n        [columns]=\"effectiveColumns()\"\n        [growMode]=\"config.growMode ?? 'Button'\"\n        [hasMore]=\"config.hasMore ?? false\"\n        [height]=\"config.height\"\n        [loadMoreButtonText]=\"config.loadMoreButtonText ?? 'Load More'\"\n        [paginationLimit]=\"config.paginationLimit ?? 5\"\n        [resources]=\"resources()\"\n        [totalItemsCount]=\"config.totalItemsCount\"\n        (buttonClick)=\"onButtonClick($event)\"\n        (loadMoreResources)=\"loadMoreResources.emit()\"\n        (paginationLimitChanged)=\"paginationLimitChanged.emit($event)\"\n        (tableRowClicked)=\"tableRowClicked.emit($event)\"\n      />\n    }\n  </div>\n</div>\n\n@if (createFormConfig(); as config) {\n  <ui5-dialog\n    data-testid=\"generic-table-card-create-dialog\"\n    [accessibleName]=\"config.title ?? 'Create'\"\n    [open]=\"createDialogOpen()\"\n    (ui5BeforeClose)=\"createDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config.title ?? 'Create' }}</ui5-title>\n    </div>\n    <div class=\"dialog__body\">\n      <mfp-declarative-form\n        #createForm\n        [fieldErrors]=\"createFormState().fieldErrors ?? {}\"\n        [fields]=\"config.fields\"\n        (fieldChange)=\"onCreateFieldChange($event)\"\n        (formSubmit)=\"onCreateSubmit($event)\"\n      />\n    </div>\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button\n        data-testid=\"generic-table-card-create-confirm\"\n        design=\"Emphasized\"\n        [disabled]=\"hasErrors(createFormState())\"\n        (click)=\"createForm.submit()\"\n      >\n        {{ config.confirmLabel ?? 'Save' }}\n      </ui5-button>\n      <ui5-button data-testid=\"generic-table-card-create-cancel\" design=\"Transparent\" (click)=\"closeCreateDialog()\">\n        {{ config.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n\n@if (editFormConfig(); as config) {\n  <ui5-dialog\n    data-testid=\"generic-table-card-edit-dialog\"\n    [accessibleName]=\"config.title ?? 'Edit'\"\n    [open]=\"editDialogOpen()\"\n    (ui5BeforeClose)=\"editDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config.title ?? 'Edit' }}</ui5-title>\n    </div>\n    <div class=\"dialog__body\">\n      <mfp-declarative-form\n        #editForm\n        [fieldErrors]=\"editFormState().fieldErrors ?? {}\"\n        [fields]=\"config.fields\"\n        [initialValues]=\"editInitialValue()\"\n        (fieldChange)=\"onEditFieldChange($event)\"\n        (formSubmit)=\"onEditSubmit($event)\"\n      />\n    </div>\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button\n        data-testid=\"generic-table-card-edit-confirm\"\n        design=\"Emphasized\"\n        [disabled]=\"hasErrors(editFormState())\"\n        (click)=\"editForm.submit()\"\n      >\n        {{ config.confirmLabel ?? 'Edit' }}\n      </ui5-button>\n      <ui5-button data-testid=\"generic-table-card-edit-cancel\" design=\"Transparent\" (click)=\"closeEditDialog()\">\n        {{ config.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n\n@if (deleteConfirmationConfig(); as config) {\n  <ui5-dialog\n    data-testid=\"generic-table-card-delete-dialog\"\n    [accessibleName]=\"config.title ?? 'Confirm Delete'\"\n    [open]=\"deleteDialogOpen()\"\n    (ui5BeforeClose)=\"deleteDialogOpen.set(false)\"\n  >\n    <div class=\"dialog__header\" slot=\"header\">\n      <ui5-title level=\"H5\">{{ config.title ?? 'Confirm Delete' }}</ui5-title>\n    </div>\n    @if (config.message) {\n      <div class=\"dialog__body\">\n        <p class=\"dialog__message\">{{ config.message }}</p>\n      </div>\n    }\n    <div class=\"dialog__footer\" slot=\"footer\">\n      <ui5-button data-testid=\"generic-table-card-delete-confirm\" design=\"Negative\" (click)=\"onDeleteSubmit()\">\n        {{ config.confirmLabel ?? 'Delete' }}\n      </ui5-button>\n      <ui5-button data-testid=\"generic-table-card-delete-cancel\" design=\"Transparent\" (click)=\"closeDeleteDialog()\">\n        {{ config.cancelLabel ?? 'Cancel' }}\n      </ui5-button>\n    </div>\n  </ui5-dialog>\n}\n", styles: [":host{display:block}@keyframes slide-in{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}@keyframes slide-out{0%{opacity:1;transform:scaleX(1)}to{opacity:0;transform:scaleX(0)}}.card{display:flex;flex-direction:column;border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:16px;background:var(--sapGroup_TitleBackground, #fff)}.card__header{display:flex;align-items:center;justify-content:space-between;min-height:3rem;padding:0 1rem}.card__title{color:var(--sapTile_TitleTextColor);text-overflow:ellipsis;font-family:var(--Font-Family-sapFontFamily, 72);font-size:var(--Font-Size-sapFontHeader6Size, 16px);font-style:normal;font-weight:700;line-height:normal;display:flex;align-items:center}.card__actions{display:flex;align-items:center;gap:.5rem}.card__info-icon{color:var(--sapButton_IconColor, #0070f2);margin-left:.5rem}.card__search-input{transform-origin:right center}.card__search-input--enter{animation:slide-in .2s ease-out both}.card__search-input--leave{animation:slide-out .2s ease-in both}.card__create-btn,.card__search-btn{min-width:auto;color:var(--sapButton_IconColor, #0070f2)}.card__body{flex:1;overflow:auto}.dialog__header{display:flex;align-items:flex-start;padding:.75rem 1rem}.dialog__body{margin:-1rem;min-width:320px;padding:1rem}.dialog__message{padding:1rem;margin:0;font-size:.875rem;max-width:320px}.dialog__footer{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem 1rem;margin:0 -1rem;width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { resources: [{ type: i0.Input, args: [{ isSignal: true, alias: "resources", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], createFormState: [{ type: i0.Input, args: [{ isSignal: true, alias: "createFormState", required: false }] }], editFormState: [{ type: i0.Input, args: [{ isSignal: true, alias: "editFormState", required: false }] }], actionButtonClick: [{ type: i0.Output, args: ["actionButtonClick"] }], tableRowClicked: [{ type: i0.Output, args: ["tableRowClicked"] }], loadMoreResources: [{ type: i0.Output, args: ["loadMoreResources"] }], paginationLimitChanged: [{ type: i0.Output, args: ["paginationLimitChanged"] }], searchChanged: [{ type: i0.Output, args: ["searchChanged"] }], createFieldChange: [{ type: i0.Output, args: ["createFieldChange"] }], editFieldChange: [{ type: i0.Output, args: ["editFieldChange"] }], createSubmit: [{ type: i0.Output, args: ["createSubmit"] }], editSubmit: [{ type: i0.Output, args: ["editSubmit"] }], deleteSubmit: [{ type: i0.Output, args: ["deleteSubmit"] }], filterTabChanged: [{ type: i0.Output, args: ["filterTabChanged"] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
 
 const CARD_TYPES = {
     WC: 'wc',