@openmfp/ngx 0.17.3 → 0.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/openmfp-ngx.mjs
CHANGED
|
@@ -511,12 +511,16 @@ class DeclarativeTable {
|
|
|
511
511
|
_index;
|
|
512
512
|
viewColumns = computed(() => processGroupFields(this.columns()), ...(ngDevMode ? [{ debugName: "viewColumns" }] : /* istanbul ignore next */ []));
|
|
513
513
|
isPagerMode = computed(() => this.loadMode() === 'pager', ...(ngDevMode ? [{ debugName: "isPagerMode" }] : /* istanbul ignore next */ []));
|
|
514
|
+
knowsTotal = computed(() => this.totalItemsCount() !== undefined, ...(ngDevMode ? [{ debugName: "knowsTotal" }] : /* istanbul ignore next */ []));
|
|
514
515
|
hasResults = computed(() => (this.totalItemsCount() ?? 0) > 0, ...(ngDevMode ? [{ debugName: "hasResults" }] : /* istanbul ignore next */ []));
|
|
515
516
|
totalPages = computed(() => Math.max(1, Math.ceil((this.totalItemsCount() ?? 0) / this.paginationLimit())), ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
|
|
516
|
-
canPrev = computed(() => this.
|
|
517
|
-
canNext = computed(() => this.
|
|
517
|
+
canPrev = computed(() => this.currentPage() > 1, ...(ngDevMode ? [{ debugName: "canPrev" }] : /* istanbul ignore next */ []));
|
|
518
|
+
canNext = computed(() => this.knowsTotal()
|
|
519
|
+
? this.hasResults() && this.currentPage() < this.totalPages()
|
|
520
|
+
: this.hasMore(), ...(ngDevMode ? [{ debugName: "canNext" }] : /* istanbul ignore next */ []));
|
|
518
521
|
goToPage(page) {
|
|
519
|
-
const
|
|
522
|
+
const maxPage = this.knowsTotal() ? this.totalPages() : Infinity;
|
|
523
|
+
const target = Math.min(Math.max(1, page), maxPage);
|
|
520
524
|
if (target !== this.currentPage()) {
|
|
521
525
|
this.pageChange.emit(target);
|
|
522
526
|
}
|
|
@@ -534,7 +538,7 @@ class DeclarativeTable {
|
|
|
534
538
|
this.goToPage(this.totalPages());
|
|
535
539
|
};
|
|
536
540
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
537
|
-
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 }, loadMode: { classPropertyName: "loadMode", publicName: "loadMode", 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 }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", tableRowClicked: "tableRowClicked", loadMoreResources: "loadMoreResources", paginationLimitChanged: "paginationLimitChanged", pageChange: "pageChange" }, 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]=\"loadMode() === '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 data-testid=\"generic-table-view-nodata\"\n name=\"NoData\"\n slot=\"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 (loadMode() !== 'pager' && hasMore()) {\n <ui5-table-growing\n data-testid=\"generic-table-growing\"\n id=\"growing\"\n slot=\"features\"\n [mode]=\"loadMode() === 'scroll' ? 'Scroll' : 'Button'\"\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 class=\"pagination-footer__side\" style=\"display: flex; align-items: center; gap: 0.5rem\">\n <span style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\">\n {{ isPagerMode() ? 'Items per page:' : 'Items per load:' }}\n </span>\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=\"20\">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 @if (isPagerMode()) {\n <div class=\"pager\" data-testid=\"generic-table-pager\">\n <ui5-button\n accessibleName=\"First page\"\n data-testid=\"generic-table-pager-first\"\n design=\"Transparent\"\n icon=\"close-command-field\"\n [disabled]=\"!canPrev()\"\n (click)=\"firstPage()\"\n />\n <ui5-button\n accessibleName=\"Previous page\"\n data-testid=\"generic-table-pager-prev\"\n design=\"Transparent\"\n icon=\"navigation-left-arrow\"\n [disabled]=\"!canPrev()\"\n (click)=\"prevPage()\"\n />\n <span\n class=\"pager__indicator\"\n data-testid=\"generic-table-pager-indicator\"\n >{{ hasResults() ? currentPage() + ' / ' + totalPages() : '\u2013' }}</span\n >\n <ui5-button\n accessibleName=\"Next page\"\n data-testid=\"generic-table-pager-next\"\n design=\"Transparent\"\n icon=\"navigation-right-arrow\"\n [disabled]=\"!canNext()\"\n (click)=\"nextPage()\"\n />\n <ui5-button\n accessibleName=\"Last page\"\n data-testid=\"generic-table-pager-last\"\n design=\"Transparent\"\n icon=\"open-command-field\"\n [disabled]=\"!canNext()\"\n (click)=\"lastPage()\"\n />\n </div>\n\n <div class=\"pagination-footer__side pagination-footer__side--end\">\n <span\n data-testid=\"generic-table-item-count\"\n style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n >\n <b style=\"font-size: var(--sapFontSize)\">{{ totalItemsCount() ?? 0 }}</b>\n Items\n </span>\n </div>\n } @else {\n <div class=\"pagination-footer__side pagination-footer__side--end\">\n <span\n style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n >\n Items loaded:\n <b style=\"font-size: var(--sapFontSize)\">{{\n totalItemsCount() !== undefined\n ? resources().length + ' / ' + totalItemsCount()\n : resources().length\n }}</b>\n </span>\n </div>\n }\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}.pagination-footer{gap:.5rem}.pagination-footer__side{flex:1 1 0;display:flex;align-items:center;gap:.5rem;min-width:0}.pagination-footer__side--end{justify-content:flex-end}.pager{flex:0 0 auto;display:flex;align-items:center;gap:.25rem;justify-content:center}.pager ui5-button{color:var(--sapContent_IconColor, #1d2d3e);--sapButton_IconColor: var(--sapContent_IconColor, #1d2d3e);--sapButton_Hover_IconColor: var(--sapContent_IconColor, #1d2d3e)}.pager ui5-button[disabled]{color:var(--sapContent_DisabledTextColor, #b3b3b3);--sapButton_IconColor: var(--sapContent_DisabledTextColor, #b3b3b3)}.pager__indicator{min-width:3rem;text-align:center;color:var(--sapTextColor);font-size:var(--sapFontSize);font-weight:700}\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"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
541
|
+
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 }, loadMode: { classPropertyName: "loadMode", publicName: "loadMode", 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 }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", tableRowClicked: "tableRowClicked", loadMoreResources: "loadMoreResources", paginationLimitChanged: "paginationLimitChanged", pageChange: "pageChange" }, 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]=\"loadMode() === '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 data-testid=\"generic-table-view-nodata\"\n name=\"NoData\"\n slot=\"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 (loadMode() !== 'pager' && hasMore()) {\n <ui5-table-growing\n data-testid=\"generic-table-growing\"\n id=\"growing\"\n slot=\"features\"\n [mode]=\"loadMode() === 'scroll' ? 'Scroll' : 'Button'\"\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 class=\"pagination-footer__side\" style=\"display: flex; align-items: center; gap: 0.5rem\">\n <span style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\">\n {{ isPagerMode() ? 'Items per page:' : 'Items per load:' }}\n </span>\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=\"20\">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 @if (isPagerMode()) {\n <div class=\"pager\" data-testid=\"generic-table-pager\">\n @if (knowsTotal()) {\n <ui5-button\n accessibleName=\"First page\"\n data-testid=\"generic-table-pager-first\"\n design=\"Transparent\"\n icon=\"close-command-field\"\n [disabled]=\"!canPrev()\"\n (click)=\"firstPage()\"\n />\n }\n <ui5-button\n accessibleName=\"Previous page\"\n data-testid=\"generic-table-pager-prev\"\n design=\"Transparent\"\n icon=\"navigation-left-arrow\"\n [disabled]=\"!canPrev()\"\n (click)=\"prevPage()\"\n />\n <span\n class=\"pager__indicator\"\n data-testid=\"generic-table-pager-indicator\"\n >{{\n knowsTotal()\n ? (hasResults() ? currentPage() + ' / ' + totalPages() : '\u2013')\n : currentPage()\n }}</span\n >\n <ui5-button\n accessibleName=\"Next page\"\n data-testid=\"generic-table-pager-next\"\n design=\"Transparent\"\n icon=\"navigation-right-arrow\"\n [disabled]=\"!canNext()\"\n (click)=\"nextPage()\"\n />\n @if (knowsTotal()) {\n <ui5-button\n accessibleName=\"Last page\"\n data-testid=\"generic-table-pager-last\"\n design=\"Transparent\"\n icon=\"open-command-field\"\n [disabled]=\"!canNext()\"\n (click)=\"lastPage()\"\n />\n }\n </div>\n <div class=\"pagination-footer__side pagination-footer__side--end\">\n @if (knowsTotal()) {\n <span\n data-testid=\"generic-table-item-count\"\n style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n >\n <b style=\"font-size: var(--sapFontSize)\">{{ totalItemsCount() }}</b>\n Items\n </span>\n }\n </div>\n } @else {\n <div class=\"pagination-footer__side pagination-footer__side--end\">\n <span\n style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n >\n Items loaded:\n <b style=\"font-size: var(--sapFontSize)\">{{\n totalItemsCount() !== undefined\n ? resources().length + ' / ' + totalItemsCount()\n : resources().length\n }}</b>\n </span>\n </div>\n }\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}.pagination-footer{gap:.5rem}.pagination-footer__side{flex:1 1 0;display:flex;align-items:center;gap:.5rem;min-width:0}.pagination-footer__side--end{justify-content:flex-end}.pager{flex:0 0 auto;display:flex;align-items:center;gap:.25rem;justify-content:center}.pager ui5-button{color:var(--sapContent_IconColor, #1d2d3e);--sapButton_IconColor: var(--sapContent_IconColor, #1d2d3e);--sapButton_Hover_IconColor: var(--sapContent_IconColor, #1d2d3e)}.pager ui5-button[disabled]{color:var(--sapContent_DisabledTextColor, #b3b3b3);--sapButton_IconColor: var(--sapContent_DisabledTextColor, #b3b3b3)}.pager__indicator{min-width:3rem;text-align:center;color:var(--sapTextColor);font-size:var(--sapFontSize);font-weight:700}\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"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
538
542
|
}
|
|
539
543
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTable, decorators: [{
|
|
540
544
|
type: Component,
|
|
@@ -550,7 +554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
550
554
|
Option,
|
|
551
555
|
TableGrowing,
|
|
552
556
|
Button,
|
|
553
|
-
], 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]=\"loadMode() === '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 data-testid=\"generic-table-view-nodata\"\n name=\"NoData\"\n slot=\"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 (loadMode() !== 'pager' && hasMore()) {\n <ui5-table-growing\n data-testid=\"generic-table-growing\"\n id=\"growing\"\n slot=\"features\"\n [mode]=\"loadMode() === 'scroll' ? 'Scroll' : 'Button'\"\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 class=\"pagination-footer__side\" style=\"display: flex; align-items: center; gap: 0.5rem\">\n <span style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\">\n {{ isPagerMode() ? 'Items per page:' : 'Items per load:' }}\n </span>\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=\"20\">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 @if (isPagerMode()) {\n <div class=\"pager\" data-testid=\"generic-table-pager\">\n <ui5-button\n
|
|
557
|
+
], 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]=\"loadMode() === '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 data-testid=\"generic-table-view-nodata\"\n name=\"NoData\"\n slot=\"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 (loadMode() !== 'pager' && hasMore()) {\n <ui5-table-growing\n data-testid=\"generic-table-growing\"\n id=\"growing\"\n slot=\"features\"\n [mode]=\"loadMode() === 'scroll' ? 'Scroll' : 'Button'\"\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 class=\"pagination-footer__side\" style=\"display: flex; align-items: center; gap: 0.5rem\">\n <span style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\">\n {{ isPagerMode() ? 'Items per page:' : 'Items per load:' }}\n </span>\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=\"20\">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 @if (isPagerMode()) {\n <div class=\"pager\" data-testid=\"generic-table-pager\">\n @if (knowsTotal()) {\n <ui5-button\n accessibleName=\"First page\"\n data-testid=\"generic-table-pager-first\"\n design=\"Transparent\"\n icon=\"close-command-field\"\n [disabled]=\"!canPrev()\"\n (click)=\"firstPage()\"\n />\n }\n <ui5-button\n accessibleName=\"Previous page\"\n data-testid=\"generic-table-pager-prev\"\n design=\"Transparent\"\n icon=\"navigation-left-arrow\"\n [disabled]=\"!canPrev()\"\n (click)=\"prevPage()\"\n />\n <span\n class=\"pager__indicator\"\n data-testid=\"generic-table-pager-indicator\"\n >{{\n knowsTotal()\n ? (hasResults() ? currentPage() + ' / ' + totalPages() : '\u2013')\n : currentPage()\n }}</span\n >\n <ui5-button\n accessibleName=\"Next page\"\n data-testid=\"generic-table-pager-next\"\n design=\"Transparent\"\n icon=\"navigation-right-arrow\"\n [disabled]=\"!canNext()\"\n (click)=\"nextPage()\"\n />\n @if (knowsTotal()) {\n <ui5-button\n accessibleName=\"Last page\"\n data-testid=\"generic-table-pager-last\"\n design=\"Transparent\"\n icon=\"open-command-field\"\n [disabled]=\"!canNext()\"\n (click)=\"lastPage()\"\n />\n }\n </div>\n <div class=\"pagination-footer__side pagination-footer__side--end\">\n @if (knowsTotal()) {\n <span\n data-testid=\"generic-table-item-count\"\n style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n >\n <b style=\"font-size: var(--sapFontSize)\">{{ totalItemsCount() }}</b>\n Items\n </span>\n }\n </div>\n } @else {\n <div class=\"pagination-footer__side pagination-footer__side--end\">\n <span\n style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n >\n Items loaded:\n <b style=\"font-size: var(--sapFontSize)\">{{\n totalItemsCount() !== undefined\n ? resources().length + ' / ' + totalItemsCount()\n : resources().length\n }}</b>\n </span>\n </div>\n }\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}.pagination-footer{gap:.5rem}.pagination-footer__side{flex:1 1 0;display:flex;align-items:center;gap:.5rem;min-width:0}.pagination-footer__side--end{justify-content:flex-end}.pager{flex:0 0 auto;display:flex;align-items:center;gap:.25rem;justify-content:center}.pager ui5-button{color:var(--sapContent_IconColor, #1d2d3e);--sapButton_IconColor: var(--sapContent_IconColor, #1d2d3e);--sapButton_Hover_IconColor: var(--sapContent_IconColor, #1d2d3e)}.pager ui5-button[disabled]{color:var(--sapContent_DisabledTextColor, #b3b3b3);--sapButton_IconColor: var(--sapContent_DisabledTextColor, #b3b3b3)}.pager__indicator{min-width:3rem;text-align:center;color:var(--sapTextColor);font-size:var(--sapFontSize);font-weight:700}\n"] }]
|
|
554
558
|
}], 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 }] }], loadMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMode", required: false }] }], loadMoreButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreButtonText", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", 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"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
|
|
555
559
|
|
|
556
560
|
function setPropertyByPath(object, path, value) {
|
|
@@ -930,6 +934,8 @@ class DeclarativeTableCard {
|
|
|
930
934
|
editDialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "editDialogOpen" }] : /* istanbul ignore next */ []));
|
|
931
935
|
deleteDialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "deleteDialogOpen" }] : /* istanbul ignore next */ []));
|
|
932
936
|
pendingResource = signal(null, ...(ngDevMode ? [{ debugName: "pendingResource" }] : /* istanbul ignore next */ []));
|
|
937
|
+
resolvedCreateFields = signal([], ...(ngDevMode ? [{ debugName: "resolvedCreateFields" }] : /* istanbul ignore next */ []));
|
|
938
|
+
resolvedEditFields = signal([], ...(ngDevMode ? [{ debugName: "resolvedEditFields" }] : /* istanbul ignore next */ []));
|
|
933
939
|
tableConfig = computed(() => this.config().tableConfig, ...(ngDevMode ? [{ debugName: "tableConfig" }] : /* istanbul ignore next */ []));
|
|
934
940
|
header = computed(() => this.config().header, ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
|
|
935
941
|
headerTooltip = computed(() => this.config().headerTooltip, ...(ngDevMode ? [{ debugName: "headerTooltip" }] : /* istanbul ignore next */ []));
|
|
@@ -945,7 +951,7 @@ class DeclarativeTableCard {
|
|
|
945
951
|
if (!pendingResource || !editConfig) {
|
|
946
952
|
return {};
|
|
947
953
|
}
|
|
948
|
-
return this.buildInitialValues(
|
|
954
|
+
return this.buildInitialValues(this.resolvedEditFields(), pendingResource);
|
|
949
955
|
}, ...(ngDevMode ? [{ debugName: "editInitialValue" }] : /* istanbul ignore next */ []));
|
|
950
956
|
searchConfig = computed(() => this.config().searchConfig, ...(ngDevMode ? [{ debugName: "searchConfig" }] : /* istanbul ignore next */ []));
|
|
951
957
|
resourcesSearchable = computed(() => !!this.searchConfig(), ...(ngDevMode ? [{ debugName: "resourcesSearchable" }] : /* istanbul ignore next */ []));
|
|
@@ -990,7 +996,7 @@ class DeclarativeTableCard {
|
|
|
990
996
|
const action = event.field.uiSettings?.buttonSettings?.action;
|
|
991
997
|
if (action === 'edit' && event.resource) {
|
|
992
998
|
this.pendingResource.set(event.resource);
|
|
993
|
-
this.
|
|
999
|
+
void this.openEditDialog();
|
|
994
1000
|
return;
|
|
995
1001
|
}
|
|
996
1002
|
if (action === 'delete' && event.resource) {
|
|
@@ -1000,6 +1006,19 @@ class DeclarativeTableCard {
|
|
|
1000
1006
|
}
|
|
1001
1007
|
this.actionButtonClick.emit(event);
|
|
1002
1008
|
}
|
|
1009
|
+
async openCreateDialog() {
|
|
1010
|
+
this.resolvedCreateFields.set(await this.resolveFormFields(this.createFormConfig()?.fields));
|
|
1011
|
+
this.createDialogOpen.set(true);
|
|
1012
|
+
}
|
|
1013
|
+
async openEditDialog() {
|
|
1014
|
+
this.resolvedEditFields.set(await this.resolveFormFields(this.editFormConfig()?.fields));
|
|
1015
|
+
this.editDialogOpen.set(true);
|
|
1016
|
+
}
|
|
1017
|
+
async resolveFormFields(fields) {
|
|
1018
|
+
if (!fields)
|
|
1019
|
+
return [];
|
|
1020
|
+
return typeof fields === 'function' ? await fields() : fields;
|
|
1021
|
+
}
|
|
1003
1022
|
closeCreateDialog() {
|
|
1004
1023
|
this.createDialogOpen.set(false);
|
|
1005
1024
|
}
|
|
@@ -1091,7 +1110,7 @@ class DeclarativeTableCard {
|
|
|
1091
1110
|
}, {});
|
|
1092
1111
|
}
|
|
1093
1112
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTableCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1094
|
-
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", pageChange: "pageChange", searchChanged: "searchChanged", createFieldChange: "createFieldChange", editFieldChange: "editFieldChange", createSubmit: "createSubmit", editSubmit: "editSubmit", deleteSubmit: "deleteSubmit", filterTabChanged: "filterTabChanged" }, 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 (resourcesSearchable()) {\n <ui5-input\n class=\"card__search-input\"\n data-testid=\"generic-table-card-search-input\"\n [formControl]=\"searchControl\"\n [placeholder]=\"searchPlaceholder()\"\n [showClearIcon]=\"true\"\n >\n <ui5-icon\n class=\"card__search-icon\"\n data-testid=\"generic-table-card-search-icon\"\n name=\"search\"\n slot=\"icon\"\n [accessibleName]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n [showTooltip]=\"true\"\n (click)=\"submitSearch()\"\n />\n </ui5-input>\n }\n @if (createFormConfig()) {\n <ui5-button\n class=\"card__create-btn\"\n data-testid=\"generic-table-card-create-btn\"\n [accessibleName]=\"\n createButtonConfig()?.text ||\n createButtonConfig()?.tooltip ||\n 'Create'\n \"\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 [currentPage]=\"config.currentPage ?? 1\"\n [hasMore]=\"config.hasMore ?? false\"\n [height]=\"config.height\"\n [loadMode]=\"config.loadMode ?? 'button'\"\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 (pageChange)=\"pageChange.emit($event)\"\n (paginationLimitChanged)=\"paginationLimitChanged.emit($event)\"\n (tableRowClicked)=\"tableRowClicked.emit($event)\"\n />\n }\n </div>\n</div>\n\n@if (createDialogOpen()) {\n @let config = createFormConfig();\n <ui5-dialog\n data-testid=\"generic-table-card-create-dialog\"\n [accessibleName]=\"config?.title ?? 'Create'\"\n [open]=\"true\"\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\n data-testid=\"generic-table-card-create-cancel\"\n design=\"Transparent\"\n (click)=\"closeCreateDialog()\"\n >\n {{ config?.cancelLabel ?? 'Cancel' }}\n </ui5-button>\n </div>\n </ui5-dialog>\n}\n\n@if (editDialogOpen()) {\n @let config = editFormConfig();\n <ui5-dialog\n data-testid=\"generic-table-card-edit-dialog\"\n [accessibleName]=\"config?.title ?? 'Edit'\"\n [open]=\"true\"\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\n data-testid=\"generic-table-card-edit-cancel\"\n design=\"Transparent\"\n (click)=\"closeEditDialog()\"\n >\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\n data-testid=\"generic-table-card-delete-confirm\"\n design=\"Negative\"\n (click)=\"onDeleteSubmit()\"\n >\n {{ config.confirmLabel ?? 'Delete' }}\n </ui5-button>\n <ui5-button\n data-testid=\"generic-table-card-delete-cancel\"\n design=\"Transparent\"\n (click)=\"closeDeleteDialog()\"\n >\n {{ config.cancelLabel ?? 'Cancel' }}\n </ui5-button>\n </div>\n </ui5-dialog>\n}\n", styles: [":host{display:block}.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-icon{cursor:pointer}.card__create-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", "loadMode", "loadMoreButtonText", "height", "currentPage"], outputs: ["buttonClick", "tableRowClicked", "loadMoreResources", "paginationLimitChanged", "pageChange"] }, { kind: "component", type: DeclarativeForm, selector: "mfp-declarative-form", inputs: ["fields", "initialValues", "fieldErrors"], outputs: ["fieldChange", "formSubmit", "formValueChange"] }, { 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 });
|
|
1113
|
+
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", pageChange: "pageChange", searchChanged: "searchChanged", createFieldChange: "createFieldChange", editFieldChange: "editFieldChange", createSubmit: "createSubmit", editSubmit: "editSubmit", deleteSubmit: "deleteSubmit", filterTabChanged: "filterTabChanged" }, 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 (resourcesSearchable()) {\n <ui5-input\n class=\"card__search-input\"\n data-testid=\"generic-table-card-search-input\"\n [formControl]=\"searchControl\"\n [placeholder]=\"searchPlaceholder()\"\n [showClearIcon]=\"true\"\n >\n <ui5-icon\n class=\"card__search-icon\"\n data-testid=\"generic-table-card-search-icon\"\n name=\"search\"\n slot=\"icon\"\n [accessibleName]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n [showTooltip]=\"true\"\n (click)=\"submitSearch()\"\n />\n </ui5-input>\n }\n @if (createFormConfig()) {\n <ui5-button\n class=\"card__create-btn\"\n data-testid=\"generic-table-card-create-btn\"\n [accessibleName]=\"\n createButtonConfig()?.text ||\n createButtonConfig()?.tooltip ||\n 'Create'\n \"\n [design]=\"createButtonConfig()?.design ?? 'Transparent'\"\n [icon]=\"createButtonConfig()?.icon ?? 'add'\"\n [tooltip]=\"createButtonConfig()?.tooltip\"\n (click)=\"openCreateDialog()\"\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 [currentPage]=\"config.currentPage ?? 1\"\n [hasMore]=\"config.hasMore ?? false\"\n [height]=\"config.height\"\n [loadMode]=\"config.loadMode ?? 'button'\"\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 (pageChange)=\"pageChange.emit($event)\"\n (paginationLimitChanged)=\"paginationLimitChanged.emit($event)\"\n (tableRowClicked)=\"tableRowClicked.emit($event)\"\n />\n }\n </div>\n</div>\n\n@if (createDialogOpen()) {\n @let config = createFormConfig();\n <ui5-dialog\n data-testid=\"generic-table-card-create-dialog\"\n [accessibleName]=\"config?.title ?? 'Create'\"\n [open]=\"true\"\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]=\"resolvedCreateFields()\"\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\n data-testid=\"generic-table-card-create-cancel\"\n design=\"Transparent\"\n (click)=\"closeCreateDialog()\"\n >\n {{ config?.cancelLabel ?? 'Cancel' }}\n </ui5-button>\n </div>\n </ui5-dialog>\n}\n\n@if (editDialogOpen()) {\n @let config = editFormConfig();\n <ui5-dialog\n data-testid=\"generic-table-card-edit-dialog\"\n [accessibleName]=\"config?.title ?? 'Edit'\"\n [open]=\"true\"\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]=\"resolvedEditFields()\"\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\n data-testid=\"generic-table-card-edit-cancel\"\n design=\"Transparent\"\n (click)=\"closeEditDialog()\"\n >\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\n data-testid=\"generic-table-card-delete-confirm\"\n design=\"Negative\"\n (click)=\"onDeleteSubmit()\"\n >\n {{ config.confirmLabel ?? 'Delete' }}\n </ui5-button>\n <ui5-button\n data-testid=\"generic-table-card-delete-cancel\"\n design=\"Transparent\"\n (click)=\"closeDeleteDialog()\"\n >\n {{ config.cancelLabel ?? 'Cancel' }}\n </ui5-button>\n </div>\n </ui5-dialog>\n}\n", styles: [":host{display:block}.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-icon{cursor:pointer}.card__create-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", "loadMode", "loadMoreButtonText", "height", "currentPage"], outputs: ["buttonClick", "tableRowClicked", "loadMoreResources", "paginationLimitChanged", "pageChange"] }, { kind: "component", type: DeclarativeForm, selector: "mfp-declarative-form", inputs: ["fields", "initialValues", "fieldErrors"], outputs: ["fieldChange", "formSubmit", "formValueChange"] }, { 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 });
|
|
1095
1114
|
}
|
|
1096
1115
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTableCard, decorators: [{
|
|
1097
1116
|
type: Component,
|
|
@@ -1105,7 +1124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
1105
1124
|
Button,
|
|
1106
1125
|
Icon,
|
|
1107
1126
|
Input,
|
|
1108
|
-
], 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 (resourcesSearchable()) {\n <ui5-input\n class=\"card__search-input\"\n data-testid=\"generic-table-card-search-input\"\n [formControl]=\"searchControl\"\n [placeholder]=\"searchPlaceholder()\"\n [showClearIcon]=\"true\"\n >\n <ui5-icon\n class=\"card__search-icon\"\n data-testid=\"generic-table-card-search-icon\"\n name=\"search\"\n slot=\"icon\"\n [accessibleName]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n [showTooltip]=\"true\"\n (click)=\"submitSearch()\"\n />\n </ui5-input>\n }\n @if (createFormConfig()) {\n <ui5-button\n class=\"card__create-btn\"\n data-testid=\"generic-table-card-create-btn\"\n [accessibleName]=\"\n createButtonConfig()?.text ||\n createButtonConfig()?.tooltip ||\n 'Create'\n \"\n [design]=\"createButtonConfig()?.design ?? 'Transparent'\"\n [icon]=\"createButtonConfig()?.icon ?? 'add'\"\n [tooltip]=\"createButtonConfig()?.tooltip\"\n (click)=\"
|
|
1127
|
+
], 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 (resourcesSearchable()) {\n <ui5-input\n class=\"card__search-input\"\n data-testid=\"generic-table-card-search-input\"\n [formControl]=\"searchControl\"\n [placeholder]=\"searchPlaceholder()\"\n [showClearIcon]=\"true\"\n >\n <ui5-icon\n class=\"card__search-icon\"\n data-testid=\"generic-table-card-search-icon\"\n name=\"search\"\n slot=\"icon\"\n [accessibleName]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n [showTooltip]=\"true\"\n (click)=\"submitSearch()\"\n />\n </ui5-input>\n }\n @if (createFormConfig()) {\n <ui5-button\n class=\"card__create-btn\"\n data-testid=\"generic-table-card-create-btn\"\n [accessibleName]=\"\n createButtonConfig()?.text ||\n createButtonConfig()?.tooltip ||\n 'Create'\n \"\n [design]=\"createButtonConfig()?.design ?? 'Transparent'\"\n [icon]=\"createButtonConfig()?.icon ?? 'add'\"\n [tooltip]=\"createButtonConfig()?.tooltip\"\n (click)=\"openCreateDialog()\"\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 [currentPage]=\"config.currentPage ?? 1\"\n [hasMore]=\"config.hasMore ?? false\"\n [height]=\"config.height\"\n [loadMode]=\"config.loadMode ?? 'button'\"\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 (pageChange)=\"pageChange.emit($event)\"\n (paginationLimitChanged)=\"paginationLimitChanged.emit($event)\"\n (tableRowClicked)=\"tableRowClicked.emit($event)\"\n />\n }\n </div>\n</div>\n\n@if (createDialogOpen()) {\n @let config = createFormConfig();\n <ui5-dialog\n data-testid=\"generic-table-card-create-dialog\"\n [accessibleName]=\"config?.title ?? 'Create'\"\n [open]=\"true\"\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]=\"resolvedCreateFields()\"\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\n data-testid=\"generic-table-card-create-cancel\"\n design=\"Transparent\"\n (click)=\"closeCreateDialog()\"\n >\n {{ config?.cancelLabel ?? 'Cancel' }}\n </ui5-button>\n </div>\n </ui5-dialog>\n}\n\n@if (editDialogOpen()) {\n @let config = editFormConfig();\n <ui5-dialog\n data-testid=\"generic-table-card-edit-dialog\"\n [accessibleName]=\"config?.title ?? 'Edit'\"\n [open]=\"true\"\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]=\"resolvedEditFields()\"\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\n data-testid=\"generic-table-card-edit-cancel\"\n design=\"Transparent\"\n (click)=\"closeEditDialog()\"\n >\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\n data-testid=\"generic-table-card-delete-confirm\"\n design=\"Negative\"\n (click)=\"onDeleteSubmit()\"\n >\n {{ config.confirmLabel ?? 'Delete' }}\n </ui5-button>\n <ui5-button\n data-testid=\"generic-table-card-delete-cancel\"\n design=\"Transparent\"\n (click)=\"closeDeleteDialog()\"\n >\n {{ config.cancelLabel ?? 'Cancel' }}\n </ui5-button>\n </div>\n </ui5-dialog>\n}\n", styles: [":host{display:block}.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-icon{cursor:pointer}.card__create-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"] }]
|
|
1109
1128
|
}], 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"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], 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"] }] } });
|
|
1110
1129
|
|
|
1111
1130
|
var unsavedChanges$1 = "Nicht gespeicherte Änderungen";
|