@openmfp/ngx 0.18.8 → 0.18.10
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
|
@@ -358,6 +358,12 @@ class ResourceField {
|
|
|
358
358
|
isBoolLike = computed(() => this.boolValue() !== undefined, ...(ngDevMode ? [{ debugName: "isBoolLike" }] : /* istanbul ignore next */ []));
|
|
359
359
|
isUrlValue = computed(() => this.checkValidUrl(this.stringValue()), ...(ngDevMode ? [{ debugName: "isUrlValue" }] : /* istanbul ignore next */ []));
|
|
360
360
|
testId = computed(() => `resource-field-${this.fieldDefinition().property}`, ...(ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []));
|
|
361
|
+
buttonDisabled = computed(() => this.resource()?.isAvailable === false, ...(ngDevMode ? [{ debugName: "buttonDisabled" }] : /* istanbul ignore next */ []));
|
|
362
|
+
buttonAccessibleName = computed(() => (this.buttonDisabled() ? this.resource()?.accessibleName : undefined) ??
|
|
363
|
+
this.uiSettings()?.buttonSettings?.text ??
|
|
364
|
+
this.uiSettings()?.buttonSettings?.tooltip ??
|
|
365
|
+
this.uiSettings()?.buttonSettings?.icon ??
|
|
366
|
+
'', ...(ngDevMode ? [{ debugName: "buttonAccessibleName" }] : /* istanbul ignore next */ []));
|
|
361
367
|
boolValue = computed(() => this.normalizeBoolean(this.value()), ...(ngDevMode ? [{ debugName: "boolValue" }] : /* istanbul ignore next */ []));
|
|
362
368
|
stringValue = computed(() => this.normalizeString(this.value()), ...(ngDevMode ? [{ debugName: "stringValue" }] : /* istanbul ignore next */ []));
|
|
363
369
|
tags = computed(() => this.normalizeTagsArray(this.value()), ...(ngDevMode ? [{ debugName: "tags" }] : /* istanbul ignore next */ []));
|
|
@@ -420,6 +426,9 @@ class ResourceField {
|
|
|
420
426
|
}
|
|
421
427
|
buttonClicked(event) {
|
|
422
428
|
event.stopPropagation();
|
|
429
|
+
if (this.buttonDisabled()) {
|
|
430
|
+
return;
|
|
431
|
+
}
|
|
423
432
|
this.buttonClick.emit({
|
|
424
433
|
event,
|
|
425
434
|
field: this.fieldDefinition(),
|
|
@@ -427,7 +436,7 @@ class ResourceField {
|
|
|
427
436
|
});
|
|
428
437
|
}
|
|
429
438
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ResourceField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
430
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ResourceField, isStandalone: true, selector: "mfp-resource-field", inputs: { fieldDefinition: { classPropertyName: "fieldDefinition", publicName: "fieldDefinition", isSignal: true, isRequired: true, transformFunction: null }, resource: { classPropertyName: "resource", publicName: "resource", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, host: { properties: { "class.resource-field--collection": "isCollection()" } }, ngImport: i0, template: "@if (isCollection()) {\n <mfp-resource-collection-field\n [fieldDefinition]=\"fieldDefinition()\"\n [resource]=\"resource()\"\n />\n} @else {\n @let displayType = displayAs();\n <span [attr.data-testid]=\"testId()\" [style]=\"cssStyles()\">\n @if (displayType === 'secret') {\n <span class=\"secret-value-container\">\n <mfp-secret-value [isVisible]=\"isVisible()\" [testId]=\"testId() + '-secret'\" [value]=\"value()\" />\n <ui5-icon\n class=\"toggle-icon\"\n mode=\"Interactive\"\n [accessibleName]=\"isVisible() ? 'Hide value' : 'Show value'\"\n [attr.data-testid]=\"testId() + '-secret-toggle'\"\n [name]=\"isVisible() ? 'hide' : 'show'\"\n (click)=\"toggleVisibility($event)\"\n />\n </span>\n } @else if (displayType === 'boolIcon' && isBoolLike()) {\n <mfp-boolean-value [boolValue]=\"boolValue()!\" [testId]=\"testId() + '-boolean'\" />\n } @else if (displayType === 'link' && isUrlValue()) {\n <mfp-link-value [testId]=\"testId() + '-link'\" [urlValue]=\"stringValue()!\" />\n } @else if (displayType === 'tooltip') {\n <ui5-icon\n [accessibleName]=\"stringValue()!\"\n [attr.data-testid]=\"testId() + '-tooltip'\"\n [name]=\"tooltipIcon() ?? 'hint'\"\n [showTooltip]=\"true\"\n />\n } @else if (displayType === 'alert') {\n @if (!value()) {\n <ui5-icon\n design=\"Critical\"\n name=\"alert\"\n [accessibleName]=\"resource()?.accessibleName ?? ''\"\n [attr.data-testid]=\"testId() + '-icon'\"\n [showTooltip]=\"true\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (displayType === 'img' && value()) {\n <img alt=\"Resource image\" class=\"image-cell\" [src]=\"value()\" />\n } @else if (displayType === 'button') {\n @let buttonSettings = uiSettings()?.buttonSettings;\n <ui5-button\n [attr.data-testid]=\"testId() + '-button'\"\n [
|
|
439
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ResourceField, isStandalone: true, selector: "mfp-resource-field", inputs: { fieldDefinition: { classPropertyName: "fieldDefinition", publicName: "fieldDefinition", isSignal: true, isRequired: true, transformFunction: null }, resource: { classPropertyName: "resource", publicName: "resource", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, host: { properties: { "class.resource-field--collection": "isCollection()" } }, ngImport: i0, template: "@if (isCollection()) {\n <mfp-resource-collection-field\n [fieldDefinition]=\"fieldDefinition()\"\n [resource]=\"resource()\"\n />\n} @else {\n @let displayType = displayAs();\n <span [attr.data-testid]=\"testId()\" [style]=\"cssStyles()\">\n @if (displayType === 'secret') {\n <span class=\"secret-value-container\">\n <mfp-secret-value [isVisible]=\"isVisible()\" [testId]=\"testId() + '-secret'\" [value]=\"value()\" />\n <ui5-icon\n class=\"toggle-icon\"\n mode=\"Interactive\"\n [accessibleName]=\"isVisible() ? 'Hide value' : 'Show value'\"\n [attr.data-testid]=\"testId() + '-secret-toggle'\"\n [name]=\"isVisible() ? 'hide' : 'show'\"\n (click)=\"toggleVisibility($event)\"\n />\n </span>\n } @else if (displayType === 'boolIcon' && isBoolLike()) {\n <mfp-boolean-value [boolValue]=\"boolValue()!\" [testId]=\"testId() + '-boolean'\" />\n } @else if (displayType === 'link' && isUrlValue()) {\n <mfp-link-value [testId]=\"testId() + '-link'\" [urlValue]=\"stringValue()!\" />\n } @else if (displayType === 'tooltip') {\n <ui5-icon\n [accessibleName]=\"stringValue()!\"\n [attr.data-testid]=\"testId() + '-tooltip'\"\n [name]=\"tooltipIcon() ?? 'hint'\"\n [showTooltip]=\"true\"\n />\n } @else if (displayType === 'alert') {\n @if (!value()) {\n <ui5-icon\n design=\"Critical\"\n name=\"alert\"\n [accessibleName]=\"resource()?.accessibleName ?? ''\"\n [attr.data-testid]=\"testId() + '-icon'\"\n [showTooltip]=\"true\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (displayType === 'img' && value()) {\n <img alt=\"Resource image\" class=\"image-cell\" [src]=\"value()\" />\n } @else if (displayType === 'button') {\n @let buttonSettings = uiSettings()?.buttonSettings;\n <ui5-button\n [accessibleName]=\"buttonAccessibleName()\"\n [attr.data-testid]=\"testId() + '-button'\"\n [design]=\"buttonSettings?.design\"\n [disabled]=\"buttonDisabled()\"\n [endIcon]=\"buttonSettings?.endIcon\"\n [icon]=\"buttonSettings?.icon\"\n [tooltip]=\"buttonSettings?.tooltip\"\n (click)=\"buttonClicked($event)\"\n >{{ buttonSettings?.text }}</ui5-button\n > \n } @else if (displayType === 'tag') {\n <mfp-tag-list-value\n [tagSettings]=\"uiSettings()?.tagSettings\"\n [tags]=\"tags()\"\n [testId]=\"testId() + '-tags'\"\n />\n } @else {\n {{ displayValue() }}\n }\n </span>\n\n @if (withCopyButton()) {\n <ui5-icon\n class=\"toggle-icon\"\n mode=\"Interactive\"\n [accessibleName]=\"copySuccess() ? 'Copied' : 'Copy value'\"\n [attr.data-testid]=\"testId() + '-copy'\"\n [design]=\"copySuccess() ? 'Positive' : 'Default'\"\n [name]=\"copySuccess() ? 'accept' : 'copy'\"\n (click)=\"copyValue($event)\"\n />\n }\n}\n", styles: [":host{display:inline-flex;align-items:center}:host(.resource-field--collection){display:block;width:100%}.secret-value-container{display:flex;align-items:center;gap:.25rem}.toggle-icon{cursor:pointer;transition:color .2s ease;padding:.25rem}.toggle-icon:hover{color:var(--sapButton_Hover_TextColor, #0854a0)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => Icon), selector: "ui5-icon, [ui5-icon]", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "component", type: i0.forwardRef(() => BooleanValue), selector: "mfp-boolean-value", inputs: ["boolValue", "testId"] }, { kind: "component", type: i0.forwardRef(() => LinkValue), selector: "mfp-link-value", inputs: ["urlValue", "testId"] }, { kind: "component", type: i0.forwardRef(() => SecretValue), selector: "mfp-secret-value", inputs: ["value", "isVisible", "testId"] }, { kind: "component", type: i0.forwardRef(() => 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: i0.forwardRef(() => TagListValue), selector: "mfp-tag-list-value", inputs: ["tags", "tagSettings", "testId"] }, { kind: "component", type: i0.forwardRef(() => ResourceCollectionField), selector: "mfp-resource-collection-field", inputs: ["fieldDefinition", "resource"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
431
440
|
}
|
|
432
441
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ResourceField, decorators: [{
|
|
433
442
|
type: Component,
|
|
@@ -443,9 +452,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
443
452
|
// a module-init cycle. `forwardRef` defers resolution until the template
|
|
444
453
|
// is instantiated, by which point both classes are defined.
|
|
445
454
|
forwardRef(() => ResourceCollectionField),
|
|
446
|
-
], host: {
|
|
455
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, host: {
|
|
447
456
|
'[class.resource-field--collection]': 'isCollection()',
|
|
448
|
-
},
|
|
457
|
+
}, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (isCollection()) {\n <mfp-resource-collection-field\n [fieldDefinition]=\"fieldDefinition()\"\n [resource]=\"resource()\"\n />\n} @else {\n @let displayType = displayAs();\n <span [attr.data-testid]=\"testId()\" [style]=\"cssStyles()\">\n @if (displayType === 'secret') {\n <span class=\"secret-value-container\">\n <mfp-secret-value [isVisible]=\"isVisible()\" [testId]=\"testId() + '-secret'\" [value]=\"value()\" />\n <ui5-icon\n class=\"toggle-icon\"\n mode=\"Interactive\"\n [accessibleName]=\"isVisible() ? 'Hide value' : 'Show value'\"\n [attr.data-testid]=\"testId() + '-secret-toggle'\"\n [name]=\"isVisible() ? 'hide' : 'show'\"\n (click)=\"toggleVisibility($event)\"\n />\n </span>\n } @else if (displayType === 'boolIcon' && isBoolLike()) {\n <mfp-boolean-value [boolValue]=\"boolValue()!\" [testId]=\"testId() + '-boolean'\" />\n } @else if (displayType === 'link' && isUrlValue()) {\n <mfp-link-value [testId]=\"testId() + '-link'\" [urlValue]=\"stringValue()!\" />\n } @else if (displayType === 'tooltip') {\n <ui5-icon\n [accessibleName]=\"stringValue()!\"\n [attr.data-testid]=\"testId() + '-tooltip'\"\n [name]=\"tooltipIcon() ?? 'hint'\"\n [showTooltip]=\"true\"\n />\n } @else if (displayType === 'alert') {\n @if (!value()) {\n <ui5-icon\n design=\"Critical\"\n name=\"alert\"\n [accessibleName]=\"resource()?.accessibleName ?? ''\"\n [attr.data-testid]=\"testId() + '-icon'\"\n [showTooltip]=\"true\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (displayType === 'img' && value()) {\n <img alt=\"Resource image\" class=\"image-cell\" [src]=\"value()\" />\n } @else if (displayType === 'button') {\n @let buttonSettings = uiSettings()?.buttonSettings;\n <ui5-button\n [accessibleName]=\"buttonAccessibleName()\"\n [attr.data-testid]=\"testId() + '-button'\"\n [design]=\"buttonSettings?.design\"\n [disabled]=\"buttonDisabled()\"\n [endIcon]=\"buttonSettings?.endIcon\"\n [icon]=\"buttonSettings?.icon\"\n [tooltip]=\"buttonSettings?.tooltip\"\n (click)=\"buttonClicked($event)\"\n >{{ buttonSettings?.text }}</ui5-button\n > \n } @else if (displayType === 'tag') {\n <mfp-tag-list-value\n [tagSettings]=\"uiSettings()?.tagSettings\"\n [tags]=\"tags()\"\n [testId]=\"testId() + '-tags'\"\n />\n } @else {\n {{ displayValue() }}\n }\n </span>\n\n @if (withCopyButton()) {\n <ui5-icon\n class=\"toggle-icon\"\n mode=\"Interactive\"\n [accessibleName]=\"copySuccess() ? 'Copied' : 'Copy value'\"\n [attr.data-testid]=\"testId() + '-copy'\"\n [design]=\"copySuccess() ? 'Positive' : 'Default'\"\n [name]=\"copySuccess() ? 'accept' : 'copy'\"\n (click)=\"copyValue($event)\"\n />\n }\n}\n", styles: [":host{display:inline-flex;align-items:center}:host(.resource-field--collection){display:block;width:100%}.secret-value-container{display:flex;align-items:center;gap:.25rem}.toggle-icon{cursor:pointer;transition:color .2s ease;padding:.25rem}.toggle-icon:hover{color:var(--sapButton_Hover_TextColor, #0854a0)}\n"] }]
|
|
449
458
|
}], propDecorators: { fieldDefinition: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldDefinition", required: true }] }], resource: [{ type: i0.Input, args: [{ isSignal: true, alias: "resource", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }] } });
|
|
450
459
|
|
|
451
460
|
const processGroupFields = (fields) => {
|
|
@@ -512,6 +521,11 @@ class DeclarativeTable {
|
|
|
512
521
|
rowTrackBy = (_index, item) => getResourceValueByJsonPath(item, { property: this.trackByPath() }) ??
|
|
513
522
|
_index;
|
|
514
523
|
viewColumns = computed(() => processGroupFields(this.columns()), ...(ngDevMode ? [{ debugName: "viewColumns" }] : /* istanbul ignore next */ []));
|
|
524
|
+
onRowClick(item) {
|
|
525
|
+
if (item.isAvailable !== false) {
|
|
526
|
+
this.tableRowClicked.emit(item);
|
|
527
|
+
}
|
|
528
|
+
}
|
|
515
529
|
isPagerMode = computed(() => this.loadMode() === 'pager', ...(ngDevMode ? [{ debugName: "isPagerMode" }] : /* istanbul ignore next */ []));
|
|
516
530
|
knowsTotal = computed(() => this.totalItemsCount() !== undefined, ...(ngDevMode ? [{ debugName: "knowsTotal" }] : /* istanbul ignore next */ []));
|
|
517
531
|
hasResults = computed(() => (this.totalItemsCount() ?? 0) > 0, ...(ngDevMode ? [{ debugName: "hasResults" }] : /* istanbul ignore next */ []));
|
|
@@ -540,7 +554,7 @@ class DeclarativeTable {
|
|
|
540
554
|
this.goToPage(this.totalPages());
|
|
541
555
|
};
|
|
542
556
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
543
|
-
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 });
|
|
557
|
+
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)=\"onRowClick(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 });
|
|
544
558
|
}
|
|
545
559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTable, decorators: [{
|
|
546
560
|
type: Component,
|
|
@@ -556,7 +570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
556
570
|
Option,
|
|
557
571
|
TableGrowing,
|
|
558
572
|
Button,
|
|
559
|
-
], 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)=\"
|
|
573
|
+
], 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)=\"onRowClick(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"] }]
|
|
560
574
|
}], 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"] }] } });
|
|
561
575
|
|
|
562
576
|
function setPropertyByPath(object, path, value) {
|