@openmfp/ngx 0.14.0 → 0.14.2
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 +132 -29
- package/fesm2022/openmfp-ngx.mjs.map +1 -1
- package/package.json +1 -1
- package/types/openmfp-ngx.d.ts +34 -2
package/fesm2022/openmfp-ngx.mjs
CHANGED
|
@@ -20,6 +20,8 @@ import * as i1 from '@angular/forms';
|
|
|
20
20
|
import { FormBuilder, FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
21
21
|
import { Input } from '@fundamental-ngx/ui5-webcomponents/input';
|
|
22
22
|
import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
|
|
23
|
+
import '@ui5/webcomponents-icons/dist/navigation-left-arrow.js';
|
|
24
|
+
import '@ui5/webcomponents-icons/dist/navigation-right-arrow.js';
|
|
23
25
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
24
26
|
import { Dialog } from '@fundamental-ngx/ui5-webcomponents/dialog';
|
|
25
27
|
import { Title } from '@fundamental-ngx/ui5-webcomponents/title';
|
|
@@ -214,11 +216,11 @@ class BooleanValue {
|
|
|
214
216
|
return this.boolValue() ? ICON_NAME_POSITIVE : ICON_NAME_NEGATIVE;
|
|
215
217
|
}, ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
|
|
216
218
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BooleanValue, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
217
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: BooleanValue, isStandalone: true, selector: "mfp-boolean-value", inputs: { boolValue: { classPropertyName: "boolValue", publicName: "boolValue", isSignal: true, isRequired: true, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ui5-icon [attr.
|
|
219
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: BooleanValue, isStandalone: true, selector: "mfp-boolean-value", inputs: { boolValue: { classPropertyName: "boolValue", publicName: "boolValue", isSignal: true, isRequired: true, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ui5-icon [attr.data-testid]=\"testId()\" [design]=\"iconDesign()\" [name]=\"iconName()\" />\n", styles: [""], dependencies: [{ kind: "component", type: Icon, selector: "ui5-icon, [ui5-icon]", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
218
220
|
}
|
|
219
221
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BooleanValue, decorators: [{
|
|
220
222
|
type: Component,
|
|
221
|
-
args: [{ selector: 'mfp-boolean-value', imports: [Icon], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ui5-icon [attr.
|
|
223
|
+
args: [{ selector: 'mfp-boolean-value', imports: [Icon], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ui5-icon [attr.data-testid]=\"testId()\" [design]=\"iconDesign()\" [name]=\"iconName()\" />\n" }]
|
|
222
224
|
}], propDecorators: { boolValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "boolValue", required: true }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }] } });
|
|
223
225
|
|
|
224
226
|
class LinkValue {
|
|
@@ -228,11 +230,11 @@ class LinkValue {
|
|
|
228
230
|
event.stopPropagation();
|
|
229
231
|
}
|
|
230
232
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: LinkValue, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
231
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: LinkValue, isStandalone: true, selector: "mfp-link-value", inputs: { urlValue: { classPropertyName: "urlValue", publicName: "urlValue", isSignal: true, isRequired: true, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ui5-link\n target=\"_blank\"\n [attr.
|
|
233
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: LinkValue, isStandalone: true, selector: "mfp-link-value", inputs: { urlValue: { classPropertyName: "urlValue", publicName: "urlValue", isSignal: true, isRequired: true, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ui5-link\n target=\"_blank\"\n [attr.data-testid]=\"testId()\"\n [href]=\"urlValue()\"\n [tooltip]=\"urlValue()\"\n (click)=\"stopPropagation($event)\"\n>Link</ui5-link>\n", styles: [""], dependencies: [{ kind: "component", type: Link, selector: "ui5-link, [ui5-link]", inputs: ["disabled", "tooltip", "href", "target", "design", "interactiveAreaSize", "wrappingType", "accessibleName", "accessibleNameRef", "accessibleRole", "accessibilityAttributes", "accessibleDescription", "icon", "endIcon"], outputs: ["ui5Click"], exportAs: ["ui5Link"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
232
234
|
}
|
|
233
235
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: LinkValue, decorators: [{
|
|
234
236
|
type: Component,
|
|
235
|
-
args: [{ selector: 'mfp-link-value', imports: [Link], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ui5-link\n target=\"_blank\"\n [attr.
|
|
237
|
+
args: [{ selector: 'mfp-link-value', imports: [Link], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ui5-link\n target=\"_blank\"\n [attr.data-testid]=\"testId()\"\n [href]=\"urlValue()\"\n [tooltip]=\"urlValue()\"\n (click)=\"stopPropagation($event)\"\n>Link</ui5-link>\n" }]
|
|
236
238
|
}], propDecorators: { urlValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "urlValue", required: true }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }] } });
|
|
237
239
|
|
|
238
240
|
class SecretValue {
|
|
@@ -241,11 +243,11 @@ class SecretValue {
|
|
|
241
243
|
testId = input('secret-value', ...(ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []));
|
|
242
244
|
maskedValue = computed(() => '*'.repeat(this.value().length || 8), ...(ngDevMode ? [{ debugName: "maskedValue" }] : /* istanbul ignore next */ []));
|
|
243
245
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: SecretValue, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
244
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: SecretValue, isStandalone: true, selector: "mfp-secret-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"secret-value\" [attr.
|
|
246
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: SecretValue, isStandalone: true, selector: "mfp-secret-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"secret-value\" [attr.data-testid]=\"testId()\" [class.masked]=\"!isVisible()\">\n @if (isVisible()) {\n {{ value() }}\n } @else {\n {{ maskedValue() }}\n }\n</span>\n", styles: [".secret-value{display:inline-flex;align-items:center;gap:.25rem}.masked{transform:translateY(.2em);display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
245
247
|
}
|
|
246
248
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: SecretValue, decorators: [{
|
|
247
249
|
type: Component,
|
|
248
|
-
args: [{ selector: 'mfp-secret-value', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [], template: "<span class=\"secret-value\" [attr.
|
|
250
|
+
args: [{ selector: 'mfp-secret-value', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [], template: "<span class=\"secret-value\" [attr.data-testid]=\"testId()\" [class.masked]=\"!isVisible()\">\n @if (isVisible()) {\n {{ value() }}\n } @else {\n {{ maskedValue() }}\n }\n</span>\n", styles: [".secret-value{display:inline-flex;align-items:center;gap:.25rem}.masked{transform:translateY(.2em);display:flex}\n"] }]
|
|
249
251
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], isVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVisible", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }] } });
|
|
250
252
|
|
|
251
253
|
class TagListValue {
|
|
@@ -253,11 +255,11 @@ class TagListValue {
|
|
|
253
255
|
tagSettings = input(...(ngDevMode ? [undefined, { debugName: "tagSettings" }] : /* istanbul ignore next */ []));
|
|
254
256
|
testId = input('tag-list-value', ...(ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []));
|
|
255
257
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TagListValue, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
256
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TagListValue, isStandalone: true, selector: "mfp-tag-list-value", inputs: { tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: true, transformFunction: null }, tagSettings: { classPropertyName: "tagSettings", publicName: "tagSettings", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"tag-list\" [attr.
|
|
258
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TagListValue, isStandalone: true, selector: "mfp-tag-list-value", inputs: { tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: true, transformFunction: null }, tagSettings: { classPropertyName: "tagSettings", publicName: "tagSettings", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"tag-list\" [attr.data-testid]=\"testId()\">\n @for (tag of tags(); track $index) {\n <ui5-tag\n [colorScheme]=\"tagSettings()?.colorScheme\"\n [design]=\"tagSettings()?.design ?? 'Neutral'\"\n [hideStateIcon]=\"true\"\n >{{ tag }}</ui5-tag>\n }\n</span>\n", styles: [":host{display:inline-flex}.tag-list{display:flex;flex-wrap:wrap;gap:4px}\n"], dependencies: [{ kind: "component", type: Tag, selector: "ui5-tag, [ui5-tag]", inputs: ["design", "colorScheme", "hideStateIcon", "interactive", "wrappingType", "size"], outputs: ["ui5Click"], exportAs: ["ui5Tag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
257
259
|
}
|
|
258
260
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TagListValue, decorators: [{
|
|
259
261
|
type: Component,
|
|
260
|
-
args: [{ selector: 'mfp-tag-list-value', imports: [Tag], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"tag-list\" [attr.
|
|
262
|
+
args: [{ selector: 'mfp-tag-list-value', imports: [Tag], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"tag-list\" [attr.data-testid]=\"testId()\">\n @for (tag of tags(); track $index) {\n <ui5-tag\n [colorScheme]=\"tagSettings()?.colorScheme\"\n [design]=\"tagSettings()?.design ?? 'Neutral'\"\n [hideStateIcon]=\"true\"\n >{{ tag }}</ui5-tag>\n }\n</span>\n", styles: [":host{display:inline-flex}.tag-list{display:flex;flex-wrap:wrap;gap:4px}\n"] }]
|
|
261
263
|
}], propDecorators: { tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: true }] }], tagSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagSettings", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }] } });
|
|
262
264
|
|
|
263
265
|
class ResourceField {
|
|
@@ -344,11 +346,11 @@ class ResourceField {
|
|
|
344
346
|
});
|
|
345
347
|
}
|
|
346
348
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ResourceField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
347
|
-
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" }, ngImport: i0, template: "@let displayType = displayAs();\n<span [attr.
|
|
349
|
+
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" }, ngImport: i0, template: "@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 [accessibleName]=\"buttonSettings?.text || buttonSettings?.tooltip || buttonSettings?.icon || ''\"\n [design]=\"buttonSettings?.design\"\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", styles: [":host{display:inline-flex;align-items:center}.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: Icon, selector: "ui5-icon, [ui5-icon]", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "component", type: BooleanValue, selector: "mfp-boolean-value", inputs: ["boolValue", "testId"] }, { kind: "component", type: LinkValue, selector: "mfp-link-value", inputs: ["urlValue", "testId"] }, { kind: "component", type: SecretValue, selector: "mfp-secret-value", inputs: ["value", "isVisible", "testId"] }, { 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: TagListValue, selector: "mfp-tag-list-value", inputs: ["tags", "tagSettings", "testId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
348
350
|
}
|
|
349
351
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ResourceField, decorators: [{
|
|
350
352
|
type: Component,
|
|
351
|
-
args: [{ selector: 'mfp-resource-field', imports: [Icon, BooleanValue, LinkValue, SecretValue, Button, TagListValue], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@let displayType = displayAs();\n<span [attr.
|
|
353
|
+
args: [{ selector: 'mfp-resource-field', imports: [Icon, BooleanValue, LinkValue, SecretValue, Button, TagListValue], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@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 [accessibleName]=\"buttonSettings?.text || buttonSettings?.tooltip || buttonSettings?.icon || ''\"\n [design]=\"buttonSettings?.design\"\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", styles: [":host{display:inline-flex;align-items:center}.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"] }]
|
|
352
354
|
}], 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"] }] } });
|
|
353
355
|
|
|
354
356
|
const processGroupFields = (fields) => {
|
|
@@ -414,7 +416,7 @@ class DeclarativeTable {
|
|
|
414
416
|
_index;
|
|
415
417
|
viewColumns = computed(() => processGroupFields(this.columns()), ...(ngDevMode ? [{ debugName: "viewColumns" }] : /* istanbul ignore next */ []));
|
|
416
418
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
417
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DeclarativeTable, isStandalone: true, selector: "mfp-declarative-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: true, transformFunction: null }, trackByPath: { classPropertyName: "trackByPath", publicName: "trackByPath", isSignal: true, isRequired: false, transformFunction: null }, totalItemsCount: { classPropertyName: "totalItemsCount", publicName: "totalItemsCount", isSignal: true, isRequired: false, transformFunction: null }, paginationLimit: { classPropertyName: "paginationLimit", publicName: "paginationLimit", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, growMode: { classPropertyName: "growMode", publicName: "growMode", isSignal: true, isRequired: false, transformFunction: null }, loadMoreButtonText: { classPropertyName: "loadMoreButtonText", publicName: "loadMoreButtonText", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", tableRowClicked: "tableRowClicked", loadMoreResources: "loadMoreResources", paginationLimitChanged: "paginationLimitChanged" }, ngImport: i0, template: "<ui5-table\n
|
|
419
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DeclarativeTable, isStandalone: true, selector: "mfp-declarative-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: true, transformFunction: null }, trackByPath: { classPropertyName: "trackByPath", publicName: "trackByPath", isSignal: true, isRequired: false, transformFunction: null }, totalItemsCount: { classPropertyName: "totalItemsCount", publicName: "totalItemsCount", isSignal: true, isRequired: false, transformFunction: null }, paginationLimit: { classPropertyName: "paginationLimit", publicName: "paginationLimit", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, growMode: { classPropertyName: "growMode", publicName: "growMode", isSignal: true, isRequired: false, transformFunction: null }, loadMoreButtonText: { classPropertyName: "loadMoreButtonText", publicName: "loadMoreButtonText", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", tableRowClicked: "tableRowClicked", loadMoreResources: "loadMoreResources", paginationLimitChanged: "paginationLimitChanged" }, ngImport: i0, template: "<ui5-table\n data-testid=\"generic-table\"\n [style.height]=\"height() ? height() + 'px' : null\"\n [style.overflow-y]=\"'auto'\"\n>\n <ui5-table-header-row\n slot=\"headerRow\"\n [sticky]=\"growMode() === 'Scroll' && !!height()\"\n >\n @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n @if (column.group) {\n <ui5-table-header-cell\n [attr.data-testid]=\"'generic-table-header-' + column.group.name\"\n [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n >{{ column.group.label ?? column.group.name }}</ui5-table-header-cell\n >\n } @else {\n <ui5-table-header-cell\n [attr.data-testid]=\"'generic-table-header-' + column.property\"\n [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n >{{ column.label }}</ui5-table-header-cell\n >\n }\n }\n </ui5-table-header-row>\n\n @for (item of resources(); let i = $index; track rowTrackBy($index, item)) {\n <ui5-table-row\n [attr.data-testid]=\"'generic-table-row-' + i\"\n [class.disabled]=\"item.isAvailable === false\"\n [interactive]=\"item.isAvailable !== false\"\n (click)=\"tableRowClicked.emit(item)\"\n >\n @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n @if (column.group) {\n <ui5-table-cell\n [attr.data-testid]=\"'generic-table-cell-' + i + '-' + column.group.name\"\n >\n @let isMultiline = column.group.multiline ?? true;\n <div\n class=\"flex\"\n [style.alignItems]=\"isMultiline ? column.uiSettings?.align : null\"\n [style.flexDirection]=\"isMultiline ? 'column' : 'row'\"\n [style.justifyContent]=\"\n isMultiline ? null : column.uiSettings?.align\n \"\n >\n @for (\n field of column.group.fields;\n let last = $last;\n track columnTrackBy(field, $index)\n ) {\n <span\n class=\"group-value\"\n [attr.data-testid]=\"\n 'generic-table-cell-' +\n i +\n '-' +\n column.group.name +\n '-' +\n field.property\n \"\n >\n @if (field.label) {\n <span>{{ field.label }}: </span>\n }\n <mfp-resource-field\n [fieldDefinition]=\"field\"\n [resource]=\"item\"\n (buttonClick)=\"buttonClick.emit($event)\"\n />\n </span>\n @if (!last && column.group.delimiter) {\n <span class=\"delimiter\">{{ column.group.delimiter }}</span>\n }\n }\n </div>\n </ui5-table-cell>\n } @else {\n <ui5-table-cell\n [attr.data-testid]=\"'generic-table-cell-' + i + '-' + column.property\"\n >\n <div class=\"flex\" [style.justifyContent]=\"column.uiSettings?.align\">\n <mfp-resource-field\n [fieldDefinition]=\"column\"\n [resource]=\"item\"\n (buttonClick)=\"buttonClick.emit($event)\"\n />\n </div>\n </ui5-table-cell>\n }\n }\n </ui5-table-row>\n } @empty {\n <ui5-illustrated-message\n name=\"NoData\"\n slot=\"noData\"\n data-testid=\"generic-table-view-nodata\"\n >\n <span slot=\"title\">No Resources</span>\n <span slot=\"subtitle\">There are currently no items to show.</span>\n </ui5-illustrated-message>\n }\n\n @if (hasMore()) {\n <ui5-table-growing\n id=\"growing\"\n data-testid=\"generic-table-growing\"\n slot=\"features\"\n [mode]=\"growMode()\"\n [text]=\"loadMoreButtonText()\"\n (ui5LoadMore)=\"loadMoreResources.emit()\"\n />\n }\n</ui5-table>\n\n<!-- Pagination Control -->\n<div\n class=\"pagination-footer\"\n style=\"\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0rem 1rem;\n min-height: 3rem;\n border-top: 1px solid var(--sapList_BorderColor);\n \"\n>\n <div style=\"display: flex; align-items: center; gap: 1.5rem\">\n <div style=\"display: flex; align-items: center; gap: 0.5rem\">\n <span\n style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n >Items per load:</span\n >\n <ui5-select\n data-testid=\"generic-table-pagination-select\"\n style=\"width: 5rem\"\n [value]=\"paginationLimit().toString()\"\n (change)=\"paginationLimitChanged.emit(+$any($event)?.target?.value)\"\n >\n <ui5-option value=\"5\">5</ui5-option>\n <ui5-option value=\"10\">10</ui5-option>\n <ui5-option value=\"10\">20</ui5-option>\n <ui5-option value=\"50\">50</ui5-option>\n <ui5-option value=\"100\">100</ui5-option>\n </ui5-select>\n </div>\n\n <span\n style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n >\n Items loaded:\n <b>{{\n totalItemsCount() !== undefined\n ? resources().length + ' / ' + totalItemsCount()\n : resources().length\n }}</b>\n </span>\n </div>\n</div>\n", styles: [".multiline{display:block}.disabled{filter:brightness(.92);pointer-events:none}.disabled ui5-table-cell:not(:first-child){color:var(--sapContent_DisabledTextColor, #6a6d70)}.disabled ui5-table-cell:not(:first-child) ui5-icon{color:var(--sapContent_DisabledTextColor, #6a6d70)}.group-value{display:flex;align-items:center}.flex{display:flex;width:100%}.delimiter{min-width:4px}ui5-table-header-row{padding-block-start:.75rem;padding-block-end:.25rem}\n"], dependencies: [{ kind: "component", type: IllustratedMessage, selector: "ui5-illustrated-message, [ui5-illustrated-message]", inputs: ["name", "design", "subtitleText", "titleText", "accessibleNameRef", "decorative"], exportAs: ["ui5IllustratedMessage"] }, { kind: "component", type: Table, selector: "ui5-table, [ui5-table]", inputs: ["accessibleName", "accessibleNameRef", "noDataText", "overflowMode", "loading", "loadingDelay", "rowActionCount", "alternateRowColors"], outputs: ["ui5RowClick", "ui5MoveOver", "ui5Move", "ui5RowActionClick"], exportAs: ["ui5Table"] }, { kind: "component", type: TableCell, selector: "ui5-table-cell, [ui5-table-cell]", inputs: ["horizontalAlign"], exportAs: ["ui5TableCell"] }, { kind: "component", type: TableHeaderCell, selector: "ui5-table-header-cell, [ui5-table-header-cell]", inputs: ["width", "minWidth", "importance", "popinText", "sortIndicator", "popinHidden", "horizontalAlign"], exportAs: ["ui5TableHeaderCell"] }, { kind: "component", type: TableHeaderRow, selector: "ui5-table-header-row, [ui5-table-header-row]", inputs: ["sticky"], exportAs: ["ui5TableHeaderRow"] }, { kind: "component", type: TableRow, selector: "ui5-table-row, [ui5-table-row]", inputs: ["rowKey", "position", "interactive", "navigated", "movable"], exportAs: ["ui5TableRow"] }, { kind: "component", type: ResourceField, selector: "mfp-resource-field", inputs: ["fieldDefinition", "resource"], outputs: ["buttonClick"] }, { kind: "component", type: Select, selector: "ui5-select, [ui5-select]", inputs: ["disabled", "name", "valueState", "required", "readonly", "accessibleName", "accessibleNameRef", "accessibleDescription", "accessibleDescriptionRef", "tooltip", "textSeparator", "value"], outputs: ["ui5Change", "ui5LiveChange", "ui5Open", "ui5Close"], exportAs: ["ui5Select"] }, { kind: "component", type: Option, selector: "ui5-option, [ui5-option]", inputs: ["value", "icon", "additionalText", "tooltip", "selected"], exportAs: ["ui5Option"] }, { kind: "component", type: TableGrowing, selector: "ui5-table-growing, [ui5-table-growing]", inputs: ["mode", "text", "subtext"], outputs: ["ui5LoadMore"], exportAs: ["ui5TableGrowing"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
418
420
|
}
|
|
419
421
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTable, decorators: [{
|
|
420
422
|
type: Component,
|
|
@@ -429,7 +431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
429
431
|
Select,
|
|
430
432
|
Option,
|
|
431
433
|
TableGrowing,
|
|
432
|
-
], encapsulation: ViewEncapsulation.ShadowDom, template: "<ui5-table\n
|
|
434
|
+
], encapsulation: ViewEncapsulation.ShadowDom, template: "<ui5-table\n data-testid=\"generic-table\"\n [style.height]=\"height() ? height() + 'px' : null\"\n [style.overflow-y]=\"'auto'\"\n>\n <ui5-table-header-row\n slot=\"headerRow\"\n [sticky]=\"growMode() === 'Scroll' && !!height()\"\n >\n @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n @if (column.group) {\n <ui5-table-header-cell\n [attr.data-testid]=\"'generic-table-header-' + column.group.name\"\n [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n >{{ column.group.label ?? column.group.name }}</ui5-table-header-cell\n >\n } @else {\n <ui5-table-header-cell\n [attr.data-testid]=\"'generic-table-header-' + column.property\"\n [width]=\"column.uiSettings?.columnWidth ?? 'auto'\"\n >{{ column.label }}</ui5-table-header-cell\n >\n }\n }\n </ui5-table-header-row>\n\n @for (item of resources(); let i = $index; track rowTrackBy($index, item)) {\n <ui5-table-row\n [attr.data-testid]=\"'generic-table-row-' + i\"\n [class.disabled]=\"item.isAvailable === false\"\n [interactive]=\"item.isAvailable !== false\"\n (click)=\"tableRowClicked.emit(item)\"\n >\n @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n @if (column.group) {\n <ui5-table-cell\n [attr.data-testid]=\"'generic-table-cell-' + i + '-' + column.group.name\"\n >\n @let isMultiline = column.group.multiline ?? true;\n <div\n class=\"flex\"\n [style.alignItems]=\"isMultiline ? column.uiSettings?.align : null\"\n [style.flexDirection]=\"isMultiline ? 'column' : 'row'\"\n [style.justifyContent]=\"\n isMultiline ? null : column.uiSettings?.align\n \"\n >\n @for (\n field of column.group.fields;\n let last = $last;\n track columnTrackBy(field, $index)\n ) {\n <span\n class=\"group-value\"\n [attr.data-testid]=\"\n 'generic-table-cell-' +\n i +\n '-' +\n column.group.name +\n '-' +\n field.property\n \"\n >\n @if (field.label) {\n <span>{{ field.label }}: </span>\n }\n <mfp-resource-field\n [fieldDefinition]=\"field\"\n [resource]=\"item\"\n (buttonClick)=\"buttonClick.emit($event)\"\n />\n </span>\n @if (!last && column.group.delimiter) {\n <span class=\"delimiter\">{{ column.group.delimiter }}</span>\n }\n }\n </div>\n </ui5-table-cell>\n } @else {\n <ui5-table-cell\n [attr.data-testid]=\"'generic-table-cell-' + i + '-' + column.property\"\n >\n <div class=\"flex\" [style.justifyContent]=\"column.uiSettings?.align\">\n <mfp-resource-field\n [fieldDefinition]=\"column\"\n [resource]=\"item\"\n (buttonClick)=\"buttonClick.emit($event)\"\n />\n </div>\n </ui5-table-cell>\n }\n }\n </ui5-table-row>\n } @empty {\n <ui5-illustrated-message\n name=\"NoData\"\n slot=\"noData\"\n data-testid=\"generic-table-view-nodata\"\n >\n <span slot=\"title\">No Resources</span>\n <span slot=\"subtitle\">There are currently no items to show.</span>\n </ui5-illustrated-message>\n }\n\n @if (hasMore()) {\n <ui5-table-growing\n id=\"growing\"\n data-testid=\"generic-table-growing\"\n slot=\"features\"\n [mode]=\"growMode()\"\n [text]=\"loadMoreButtonText()\"\n (ui5LoadMore)=\"loadMoreResources.emit()\"\n />\n }\n</ui5-table>\n\n<!-- Pagination Control -->\n<div\n class=\"pagination-footer\"\n style=\"\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0rem 1rem;\n min-height: 3rem;\n border-top: 1px solid var(--sapList_BorderColor);\n \"\n>\n <div style=\"display: flex; align-items: center; gap: 1.5rem\">\n <div style=\"display: flex; align-items: center; gap: 0.5rem\">\n <span\n style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n >Items per load:</span\n >\n <ui5-select\n data-testid=\"generic-table-pagination-select\"\n style=\"width: 5rem\"\n [value]=\"paginationLimit().toString()\"\n (change)=\"paginationLimitChanged.emit(+$any($event)?.target?.value)\"\n >\n <ui5-option value=\"5\">5</ui5-option>\n <ui5-option value=\"10\">10</ui5-option>\n <ui5-option value=\"10\">20</ui5-option>\n <ui5-option value=\"50\">50</ui5-option>\n <ui5-option value=\"100\">100</ui5-option>\n </ui5-select>\n </div>\n\n <span\n style=\"color: var(--sapTextColor); font-size: var(--sapFontSmallSize)\"\n >\n Items loaded:\n <b>{{\n totalItemsCount() !== undefined\n ? resources().length + ' / ' + totalItemsCount()\n : resources().length\n }}</b>\n </span>\n </div>\n</div>\n", styles: [".multiline{display:block}.disabled{filter:brightness(.92);pointer-events:none}.disabled ui5-table-cell:not(:first-child){color:var(--sapContent_DisabledTextColor, #6a6d70)}.disabled ui5-table-cell:not(:first-child) ui5-icon{color:var(--sapContent_DisabledTextColor, #6a6d70)}.group-value{display:flex;align-items:center}.flex{display:flex;width:100%}.delimiter{min-width:4px}ui5-table-header-row{padding-block-start:.75rem;padding-block-end:.25rem}\n"] }]
|
|
433
435
|
}], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], resources: [{ type: i0.Input, args: [{ isSignal: true, alias: "resources", required: true }] }], trackByPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByPath", required: false }] }], totalItemsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItemsCount", required: false }] }], paginationLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationLimit", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], growMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "growMode", required: false }] }], loadMoreButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreButtonText", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }], tableRowClicked: [{ type: i0.Output, args: ["tableRowClicked"] }], loadMoreResources: [{ type: i0.Output, args: ["loadMoreResources"] }], paginationLimitChanged: [{ type: i0.Output, args: ["paginationLimitChanged"] }] } });
|
|
434
436
|
|
|
435
437
|
function setPropertyByPath(object, path, value) {
|
|
@@ -553,13 +555,105 @@ class DeclarativeForm {
|
|
|
553
555
|
return result;
|
|
554
556
|
}
|
|
555
557
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
556
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DeclarativeForm, isStandalone: true, selector: "mfp-declarative-form", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", isSignal: true, isRequired: false, transformFunction: null }, fieldErrors: { classPropertyName: "fieldErrors", publicName: "fieldErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange", formSubmit: "formSubmit" }, ngImport: i0, template: "<section class=\"form\"
|
|
558
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DeclarativeForm, isStandalone: true, selector: "mfp-declarative-form", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", isSignal: true, isRequired: false, transformFunction: null }, fieldErrors: { classPropertyName: "fieldErrors", publicName: "fieldErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange", formSubmit: "formSubmit" }, ngImport: i0, template: "<section class=\"form\" data-testid=\"generic-form\" [formGroup]=\"form\">\n @for (field of fields(); track field.name) {\n @let control = form.controls[field.name];\n <div\n class=\"inputs\"\n [attr.data-testid]=\"'generic-form-field-container-' + field.name\"\n >\n <ui5-label\n show-colon\n [attr.data-testid]=\"'generic-form-field-label-' + field.name\"\n [required]=\"field.required\"\n >{{ field.label }}</ui5-label\n >\n @if (field.values?.length) {\n <ui5-select\n class=\"input\"\n [attr.data-testid]=\"'generic-form-field-' + field.name\"\n [disabled]=\"field.disabled\"\n [required]=\"field.required\"\n [value]=\"control.value\"\n [valueState]=\"getValueState(field.name)\"\n (blur)=\"onFieldBlur(field)\"\n (change)=\"setFormControlValue($event, field)\"\n (input)=\"setFormControlValue($event, field)\"\n >\n @if (getError(field.name); as error) {\n <div slot=\"valueStateMessage\">{{ error }}</div>\n }\n @for (value of [''].concat(field.values ?? []); track value) {\n <ui5-option\n [attr.data-testid]=\"\n 'generic-form-field-' +\n field.name +\n '-option-' +\n (value || 'empty')\n \"\n [selected]=\"value === control.value\"\n [value]=\"value\"\n >{{ value }}</ui5-option\n >\n }\n </ui5-select>\n } @else {\n <ui5-input\n class=\"input\"\n [attr.data-testid]=\"'generic-form-field-' + field.name\"\n [disabled]=\"field.disabled\"\n [required]=\"field.required\"\n [value]=\"control.value\"\n [valueState]=\"getValueState(field.name)\"\n (blur)=\"onFieldBlur(field)\"\n (change)=\"setFormControlValue($event, field)\"\n (input)=\"setFormControlValue($event, field)\"\n >\n @if (getError(field.name); as error) {\n <div slot=\"valueStateMessage\">{{ error }}</div>\n }\n </ui5-input>\n }\n </div>\n }\n</section>\n", styles: [".form>div{display:flex;flex-direction:column;justify-content:space-evenly;align-items:flex-start;margin-bottom:.5rem;width:100%}.input{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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"] }, { kind: "component", type: Label, selector: "ui5-label, [ui5-label]", inputs: ["for", "showColon", "required", "wrappingType"], exportAs: ["ui5Label"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
557
559
|
}
|
|
558
560
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeForm, decorators: [{
|
|
559
561
|
type: Component,
|
|
560
|
-
args: [{ selector: 'mfp-declarative-form', imports: [ReactiveFormsModule, Input, Label, Select, Option], encapsulation: ViewEncapsulation.ShadowDom, template: "<section class=\"form\"
|
|
562
|
+
args: [{ selector: 'mfp-declarative-form', imports: [ReactiveFormsModule, Input, Label, Select, Option], encapsulation: ViewEncapsulation.ShadowDom, template: "<section class=\"form\" data-testid=\"generic-form\" [formGroup]=\"form\">\n @for (field of fields(); track field.name) {\n @let control = form.controls[field.name];\n <div\n class=\"inputs\"\n [attr.data-testid]=\"'generic-form-field-container-' + field.name\"\n >\n <ui5-label\n show-colon\n [attr.data-testid]=\"'generic-form-field-label-' + field.name\"\n [required]=\"field.required\"\n >{{ field.label }}</ui5-label\n >\n @if (field.values?.length) {\n <ui5-select\n class=\"input\"\n [attr.data-testid]=\"'generic-form-field-' + field.name\"\n [disabled]=\"field.disabled\"\n [required]=\"field.required\"\n [value]=\"control.value\"\n [valueState]=\"getValueState(field.name)\"\n (blur)=\"onFieldBlur(field)\"\n (change)=\"setFormControlValue($event, field)\"\n (input)=\"setFormControlValue($event, field)\"\n >\n @if (getError(field.name); as error) {\n <div slot=\"valueStateMessage\">{{ error }}</div>\n }\n @for (value of [''].concat(field.values ?? []); track value) {\n <ui5-option\n [attr.data-testid]=\"\n 'generic-form-field-' +\n field.name +\n '-option-' +\n (value || 'empty')\n \"\n [selected]=\"value === control.value\"\n [value]=\"value\"\n >{{ value }}</ui5-option\n >\n }\n </ui5-select>\n } @else {\n <ui5-input\n class=\"input\"\n [attr.data-testid]=\"'generic-form-field-' + field.name\"\n [disabled]=\"field.disabled\"\n [required]=\"field.required\"\n [value]=\"control.value\"\n [valueState]=\"getValueState(field.name)\"\n (blur)=\"onFieldBlur(field)\"\n (change)=\"setFormControlValue($event, field)\"\n (input)=\"setFormControlValue($event, field)\"\n >\n @if (getError(field.name); as error) {\n <div slot=\"valueStateMessage\">{{ error }}</div>\n }\n </ui5-input>\n }\n </div>\n }\n</section>\n", styles: [".form>div{display:flex;flex-direction:column;justify-content:space-evenly;align-items:flex-start;margin-bottom:.5rem;width:100%}.input{width:100%}\n"] }]
|
|
561
563
|
}], ctorParameters: () => [], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], initialValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValues", required: false }] }], fieldErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldErrors", required: false }] }], fieldChange: [{ type: i0.Output, args: ["fieldChange"] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }] } });
|
|
562
564
|
|
|
565
|
+
/**
|
|
566
|
+
* Horizontal filter-tab strip rendered above the table by
|
|
567
|
+
* `<mfp-declarative-table-card>`. Internal to the table-card — not part of the
|
|
568
|
+
* package public API.
|
|
569
|
+
*
|
|
570
|
+
* Renders one tab per {@link FieldFilterDefinition}. When the combined width
|
|
571
|
+
* exceeds the host width, left/right chevron buttons appear and scroll the
|
|
572
|
+
* strip by ~70% of the visible width per click; the native scrollbar is hidden.
|
|
573
|
+
*
|
|
574
|
+
* Initial active tab:
|
|
575
|
+
* - The first `FieldFilterDefinition` with `default: true`, if any.
|
|
576
|
+
* - Otherwise the first tab in the array.
|
|
577
|
+
*
|
|
578
|
+
* The component owns the active-tab state; the host only needs to listen to
|
|
579
|
+
* `tabChanged` and apply the picked filter to its data layer. If the host
|
|
580
|
+
* wants an "All / no filter" option it must author it as a regular tab — the
|
|
581
|
+
* strip never auto-prepends one. The output type still allows `undefined` for
|
|
582
|
+
* forward compatibility with hosts that want to clear the selection.
|
|
583
|
+
*/
|
|
584
|
+
class FilterTabs {
|
|
585
|
+
tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
|
|
586
|
+
tabChanged = output();
|
|
587
|
+
activeTab = signal(undefined, ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
|
|
588
|
+
stripRef = viewChild('strip', ...(ngDevMode ? [{ debugName: "stripRef" }] : /* istanbul ignore next */ []));
|
|
589
|
+
canScrollLeft = signal(false, ...(ngDevMode ? [{ debugName: "canScrollLeft" }] : /* istanbul ignore next */ []));
|
|
590
|
+
canScrollRight = signal(false, ...(ngDevMode ? [{ debugName: "canScrollRight" }] : /* istanbul ignore next */ []));
|
|
591
|
+
injector = inject(Injector);
|
|
592
|
+
resizeObserver;
|
|
593
|
+
constructor() {
|
|
594
|
+
effect(() => {
|
|
595
|
+
const tabs = this.tabs();
|
|
596
|
+
const next = tabs.find((t) => t.default) ?? tabs[0];
|
|
597
|
+
this.activeTab.set(next);
|
|
598
|
+
afterNextRender(() => this.recomputeScrollState(), {
|
|
599
|
+
injector: this.injector,
|
|
600
|
+
});
|
|
601
|
+
});
|
|
602
|
+
afterNextRender(() => {
|
|
603
|
+
const el = this.stripRef()?.nativeElement;
|
|
604
|
+
if (!el)
|
|
605
|
+
return;
|
|
606
|
+
this.resizeObserver = new ResizeObserver(() => this.recomputeScrollState());
|
|
607
|
+
this.resizeObserver.observe(el);
|
|
608
|
+
this.recomputeScrollState();
|
|
609
|
+
}, { injector: this.injector });
|
|
610
|
+
}
|
|
611
|
+
ngOnDestroy() {
|
|
612
|
+
this.resizeObserver?.disconnect();
|
|
613
|
+
}
|
|
614
|
+
/**
|
|
615
|
+
* Reflects the carousel's current `scrollLeft` into signals that drive the
|
|
616
|
+
* chevron buttons' visibility. Called on init, on user scroll, and after
|
|
617
|
+
* any size change.
|
|
618
|
+
*/
|
|
619
|
+
recomputeScrollState() {
|
|
620
|
+
const el = this.stripRef()?.nativeElement;
|
|
621
|
+
if (!el) {
|
|
622
|
+
this.canScrollLeft.set(false);
|
|
623
|
+
this.canScrollRight.set(false);
|
|
624
|
+
return;
|
|
625
|
+
}
|
|
626
|
+
const { scrollLeft, scrollWidth, clientWidth } = el;
|
|
627
|
+
// 1px tolerance — browsers occasionally report fractional pixel widths.
|
|
628
|
+
this.canScrollLeft.set(scrollLeft > 1);
|
|
629
|
+
this.canScrollRight.set(scrollLeft + clientWidth < scrollWidth - 1);
|
|
630
|
+
}
|
|
631
|
+
onScroll() {
|
|
632
|
+
this.recomputeScrollState();
|
|
633
|
+
}
|
|
634
|
+
/**
|
|
635
|
+
* Scrolls the strip by ~70% of its visible width so one filter overlaps
|
|
636
|
+
* the previous viewport — matches the carousel idiom in SAP and Material.
|
|
637
|
+
*/
|
|
638
|
+
scroll(direction) {
|
|
639
|
+
const el = this.stripRef()?.nativeElement;
|
|
640
|
+
if (!el)
|
|
641
|
+
return;
|
|
642
|
+
const delta = el.clientWidth * 0.7 * (direction === 'right' ? 1 : -1);
|
|
643
|
+
el.scrollBy({ left: delta, behavior: 'smooth' });
|
|
644
|
+
}
|
|
645
|
+
select(tab) {
|
|
646
|
+
this.activeTab.set(tab);
|
|
647
|
+
this.tabChanged.emit(tab);
|
|
648
|
+
}
|
|
649
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FilterTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
650
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: FilterTabs, isStandalone: true, selector: "mfp-filter-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { tabChanged: "tabChanged" }, viewQueries: [{ propertyName: "stripRef", first: true, predicate: ["strip"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"filter-tabs\">\n @if (canScrollLeft()) {\n <button\n type=\"button\"\n class=\"filter-tabs__chevron filter-tabs__chevron--left\"\n aria-label=\"Scroll filters left\"\n (click)=\"scroll('left')\"\n >\n <ui5-icon name=\"navigation-left-arrow\" />\n </button>\n }\n <div\n #strip\n class=\"filter-tabs__strip\"\n role=\"tablist\"\n (scroll)=\"onScroll()\"\n >\n @for (tab of tabs(); track tab.property + ':' + tab.value) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"filter-tabs__tab\"\n [class.filter-tabs__tab--active]=\"activeTab() === tab\"\n [attr.aria-selected]=\"activeTab() === tab\"\n (click)=\"select(tab)\"\n >\n {{ tab.label }}\n </button>\n }\n </div>\n @if (canScrollRight()) {\n <button\n type=\"button\"\n class=\"filter-tabs__chevron filter-tabs__chevron--right\"\n aria-label=\"Scroll filters right\"\n (click)=\"scroll('right')\"\n >\n <ui5-icon name=\"navigation-right-arrow\" />\n </button>\n }\n</div>\n", styles: [":host{display:block}.filter-tabs{position:relative;display:flex;align-items:stretch;padding:0 1rem;min-height:2.5rem}.filter-tabs__strip{display:flex;flex:1;align-items:stretch;gap:2.25rem;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.filter-tabs__strip::-webkit-scrollbar{display:none}.filter-tabs__tab{appearance:none;background:transparent;border:0;padding:.75rem 0;cursor:pointer;white-space:nowrap;font-family:var(--Font-Family-sapFontFamily, 72);font-size:.875rem;font-weight:500;color:var(--sapTextColor, #1d2d3e);border-bottom:3px solid transparent;transition:color .15s ease,border-color .15s ease}.filter-tabs__tab:hover:not(.filter-tabs__tab--active){color:var(--sapLink_Hover_Color, var(--sapButton_Selected_TextColor, #0070f2))}.filter-tabs__tab:focus-visible{outline:1px solid var(--sapContent_FocusColor, #0070f2);outline-offset:2px}.filter-tabs__tab--active{color:var(--sapButton_Selected_TextColor, var(--sapButton_IconColor, #0070f2));border-bottom-color:var(--sapButton_Selected_BorderColor, var(--sapButton_IconColor, #0070f2))}.filter-tabs__chevron{appearance:none;background:transparent;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:2rem;color:var(--sapButton_IconColor, #0070f2);flex:0 0 auto}.filter-tabs__chevron--left{margin-right:.25rem}.filter-tabs__chevron--right{margin-left:.25rem}.filter-tabs__chevron:hover{background:var(--sapButton_Lite_Hover_Background, rgba(0, 0, 0, .04))}\n"], dependencies: [{ kind: "component", type: Icon, selector: "ui5-icon, [ui5-icon]", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
651
|
+
}
|
|
652
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FilterTabs, decorators: [{
|
|
653
|
+
type: Component,
|
|
654
|
+
args: [{ selector: 'mfp-filter-tabs', standalone: true, imports: [Icon], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, template: "<div class=\"filter-tabs\">\n @if (canScrollLeft()) {\n <button\n type=\"button\"\n class=\"filter-tabs__chevron filter-tabs__chevron--left\"\n aria-label=\"Scroll filters left\"\n (click)=\"scroll('left')\"\n >\n <ui5-icon name=\"navigation-left-arrow\" />\n </button>\n }\n <div\n #strip\n class=\"filter-tabs__strip\"\n role=\"tablist\"\n (scroll)=\"onScroll()\"\n >\n @for (tab of tabs(); track tab.property + ':' + tab.value) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"filter-tabs__tab\"\n [class.filter-tabs__tab--active]=\"activeTab() === tab\"\n [attr.aria-selected]=\"activeTab() === tab\"\n (click)=\"select(tab)\"\n >\n {{ tab.label }}\n </button>\n }\n </div>\n @if (canScrollRight()) {\n <button\n type=\"button\"\n class=\"filter-tabs__chevron filter-tabs__chevron--right\"\n aria-label=\"Scroll filters right\"\n (click)=\"scroll('right')\"\n >\n <ui5-icon name=\"navigation-right-arrow\" />\n </button>\n }\n</div>\n", styles: [":host{display:block}.filter-tabs{position:relative;display:flex;align-items:stretch;padding:0 1rem;min-height:2.5rem}.filter-tabs__strip{display:flex;flex:1;align-items:stretch;gap:2.25rem;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.filter-tabs__strip::-webkit-scrollbar{display:none}.filter-tabs__tab{appearance:none;background:transparent;border:0;padding:.75rem 0;cursor:pointer;white-space:nowrap;font-family:var(--Font-Family-sapFontFamily, 72);font-size:.875rem;font-weight:500;color:var(--sapTextColor, #1d2d3e);border-bottom:3px solid transparent;transition:color .15s ease,border-color .15s ease}.filter-tabs__tab:hover:not(.filter-tabs__tab--active){color:var(--sapLink_Hover_Color, var(--sapButton_Selected_TextColor, #0070f2))}.filter-tabs__tab:focus-visible{outline:1px solid var(--sapContent_FocusColor, #0070f2);outline-offset:2px}.filter-tabs__tab--active{color:var(--sapButton_Selected_TextColor, var(--sapButton_IconColor, #0070f2));border-bottom-color:var(--sapButton_Selected_BorderColor, var(--sapButton_IconColor, #0070f2))}.filter-tabs__chevron{appearance:none;background:transparent;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:2rem;color:var(--sapButton_IconColor, #0070f2);flex:0 0 auto}.filter-tabs__chevron--left{margin-right:.25rem}.filter-tabs__chevron--right{margin-left:.25rem}.filter-tabs__chevron:hover{background:var(--sapButton_Lite_Hover_Background, rgba(0, 0, 0, .04))}\n"] }]
|
|
655
|
+
}], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], tabChanged: [{ type: i0.Output, args: ["tabChanged"] }], stripRef: [{ type: i0.ViewChild, args: ['strip', { isSignal: true }] }] } });
|
|
656
|
+
|
|
563
657
|
class DeclarativeTableCard {
|
|
564
658
|
resources = input.required(...(ngDevMode ? [{ debugName: "resources" }] : /* istanbul ignore next */ []));
|
|
565
659
|
config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
|
|
@@ -575,6 +669,7 @@ class DeclarativeTableCard {
|
|
|
575
669
|
createSubmit = output();
|
|
576
670
|
editSubmit = output();
|
|
577
671
|
deleteSubmit = output();
|
|
672
|
+
filterTabChanged = output();
|
|
578
673
|
searchState = signal('collapsed', ...(ngDevMode ? [{ debugName: "searchState" }] : /* istanbul ignore next */ []));
|
|
579
674
|
searchExpanded = computed(() => this.searchState() !== 'collapsed', ...(ngDevMode ? [{ debugName: "searchExpanded" }] : /* istanbul ignore next */ []));
|
|
580
675
|
searchCollapsing = computed(() => this.searchState() === 'collapsing', ...(ngDevMode ? [{ debugName: "searchCollapsing" }] : /* istanbul ignore next */ []));
|
|
@@ -601,6 +696,10 @@ class DeclarativeTableCard {
|
|
|
601
696
|
}
|
|
602
697
|
return this.buildInitialValues(editConfig.fields, pendingResource);
|
|
603
698
|
}, ...(ngDevMode ? [{ debugName: "editInitialValue" }] : /* istanbul ignore next */ []));
|
|
699
|
+
/** Filter-tab definitions for the strip rendered above the table. */
|
|
700
|
+
filterTabs = computed(() => this.config().filterTabs ?? [], ...(ngDevMode ? [{ debugName: "filterTabs" }] : /* istanbul ignore next */ []));
|
|
701
|
+
/** Whether the tab strip should render at all. */
|
|
702
|
+
hasFilterTabs = computed(() => this.filterTabs().length > 0, ...(ngDevMode ? [{ debugName: "hasFilterTabs" }] : /* istanbul ignore next */ []));
|
|
604
703
|
injector = inject(Injector);
|
|
605
704
|
constructor() {
|
|
606
705
|
this.searchControl.valueChanges
|
|
@@ -609,6 +708,9 @@ class DeclarativeTableCard {
|
|
|
609
708
|
this.searchChanged.emit(value ?? '');
|
|
610
709
|
});
|
|
611
710
|
}
|
|
711
|
+
onFilterTabChanged(tab) {
|
|
712
|
+
this.filterTabChanged.emit(tab);
|
|
713
|
+
}
|
|
612
714
|
toggleSearch() {
|
|
613
715
|
if (this.searchState() === 'expanded') {
|
|
614
716
|
this.collapseSearch();
|
|
@@ -739,21 +841,22 @@ class DeclarativeTableCard {
|
|
|
739
841
|
}, {});
|
|
740
842
|
}
|
|
741
843
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTableCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
742
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DeclarativeTableCard, isStandalone: true, selector: "mfp-declarative-table-card", inputs: { resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, createFormState: { classPropertyName: "createFormState", publicName: "createFormState", isSignal: true, isRequired: false, transformFunction: null }, editFormState: { classPropertyName: "editFormState", publicName: "editFormState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionButtonClick: "actionButtonClick", tableRowClicked: "tableRowClicked", loadMoreResources: "loadMoreResources", paginationLimitChanged: "paginationLimitChanged", searchChanged: "searchChanged", createFieldChange: "createFieldChange", editFieldChange: "editFieldChange", createSubmit: "createSubmit", editSubmit: "editSubmit", deleteSubmit: "deleteSubmit" }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"card\">\n <div class=\"card__header\">\n <div class=\"card__title\">\n @if (header(); as header) {\n {{ header }}\n @if (headerTooltip(); as tooltip) {\n <ui5-icon\n class=\"card__info-icon\"\n name=\"hint\"\n [accessibleName]=\"tooltip\"\n [showTooltip]=\"true\"\n />\n }\n }\n </div>\n <div class=\"card__actions\">\n @if (config().resourcesSearchable) {\n @if (searchExpanded()) {\n <ui5-input\n #searchInput\n [class]=\"\n 'card__search-input card__search-input--' +\n (searchCollapsing() ? 'leave' : 'enter')\n \"\n [formControl]=\"searchControl\"\n (animationend)=\"onSearchAnimationEnd()\"\n (blur)=\"onSearchBlur()\"\n />\n }\n <ui5-button\n class=\"card__search-btn\"\n design=\"Transparent\"\n [accessibleName]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n [icon]=\"searchButtonConfig()?.icon ?? 'search'\"\n [tooltip]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n (click)=\"toggleSearch()\"\n />\n }\n @if (createFormConfig()) {\n <ui5-button\n class=\"card__create-btn\"\n [accessibleName]=\"createButtonConfig()?.text || createButtonConfig()?.tooltip || 'Create'\"\n [design]=\"createButtonConfig()?.design ?? 'Transparent'\"\n [icon]=\"createButtonConfig()?.icon ?? 'add'\"\n [tooltip]=\"createButtonConfig()?.tooltip\"\n (click)=\"createDialogOpen.set(true)\"\n >\n {{ createButtonConfig()?.text ?? '' }}\n </ui5-button>\n }\n </div>\n </div>\n\n <div class=\"card__body\">\n @if (tableConfig(); as config) {\n <mfp-declarative-table\n [columns]=\"effectiveColumns()\"\n [growMode]=\"config.growMode ?? 'Button'\"\n [hasMore]=\"config.hasMore ?? false\"\n [height]=\"config.height\"\n [loadMoreButtonText]=\"config.loadMoreButtonText ?? 'Load More'\"\n [paginationLimit]=\"config.paginationLimit ?? 5\"\n [resources]=\"resources()\"\n [totalItemsCount]=\"config.totalItemsCount\"\n (buttonClick)=\"onButtonClick($event)\"\n (loadMoreResources)=\"loadMoreResources.emit()\"\n (paginationLimitChanged)=\"paginationLimitChanged.emit($event)\"\n (tableRowClicked)=\"tableRowClicked.emit($event)\"\n />\n }\n </div>\n</div>\n\n@if (createFormConfig(); as config) {\n <ui5-dialog\n [accessibleName]=\"config.title ?? 'Create'\"\n [open]=\"createDialogOpen()\"\n (ui5BeforeClose)=\"createDialogOpen.set(false)\"\n >\n <div class=\"dialog__header\" slot=\"header\">\n <ui5-title level=\"H5\">{{ config.title ?? 'Create' }}</ui5-title>\n </div>\n <div class=\"dialog__body\">\n <mfp-declarative-form\n #createForm\n [fieldErrors]=\"createFormState().fieldErrors ?? {}\"\n [fields]=\"config.fields\"\n (fieldChange)=\"onCreateFieldChange($event)\"\n (formSubmit)=\"onCreateSubmit($event)\"\n />\n </div>\n <div class=\"dialog__footer\" slot=\"footer\">\n <ui5-button\n design=\"Emphasized\"\n [disabled]=\"hasErrors(createFormState())\"\n (click)=\"createForm.submit()\"\n >\n {{ config.confirmLabel ?? 'Save' }}\n </ui5-button>\n <ui5-button design=\"Transparent\" (click)=\"closeCreateDialog()\">\n {{ config.cancelLabel ?? 'Cancel' }}\n </ui5-button>\n </div>\n </ui5-dialog>\n}\n\n@if (editFormConfig(); as config) {\n <ui5-dialog\n [accessibleName]=\"config.title ?? 'Edit'\"\n [open]=\"editDialogOpen()\"\n (ui5BeforeClose)=\"editDialogOpen.set(false)\"\n >\n <div class=\"dialog__header\" slot=\"header\">\n <ui5-title level=\"H5\">{{ config.title ?? 'Edit' }}</ui5-title>\n </div>\n <div class=\"dialog__body\">\n <mfp-declarative-form\n #editForm\n [fieldErrors]=\"editFormState().fieldErrors ?? {}\"\n [fields]=\"config.fields\"\n [initialValues]=\"editInitialValue()\"\n (fieldChange)=\"onEditFieldChange($event)\"\n (formSubmit)=\"onEditSubmit($event)\"\n />\n </div>\n <div class=\"dialog__footer\" slot=\"footer\">\n <ui5-button\n design=\"Emphasized\"\n [disabled]=\"hasErrors(editFormState())\"\n (click)=\"editForm.submit()\"\n >\n {{ config.confirmLabel ?? 'Edit' }}\n </ui5-button>\n <ui5-button design=\"Transparent\" (click)=\"closeEditDialog()\">\n {{ config.cancelLabel ?? 'Cancel' }}\n </ui5-button>\n </div>\n </ui5-dialog>\n}\n\n@if (deleteConfirmationConfig(); as config) {\n <ui5-dialog\n [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 design=\"Negative\" (click)=\"onDeleteSubmit()\">\n {{ config.confirmLabel ?? 'Delete' }}\n </ui5-button>\n <ui5-button design=\"Transparent\" (click)=\"closeDeleteDialog()\">\n {{ config.cancelLabel ?? 'Cancel' }}\n </ui5-button>\n </div>\n </ui5-dialog>\n}\n", styles: [":host{display:block}@keyframes slide-in{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}@keyframes slide-out{0%{opacity:1;transform:scaleX(1)}to{opacity:0;transform:scaleX(0)}}.card{display:flex;flex-direction:column;border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:16px;background:var(--sapGroup_TitleBackground, #fff)}.card__header{display:flex;align-items:center;justify-content:space-between;min-height:3rem;padding:0 1rem;border-bottom:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9)}.card__title{color:var(--sapTile_TitleTextColor);text-overflow:ellipsis;font-family:var(--Font-Family-sapFontFamily, 72);font-size:var(--Font-Size-sapFontHeader6Size, 16px);font-style:normal;font-weight:700;line-height:normal;display:flex;align-items:center}.card__actions{display:flex;align-items:center;gap:.5rem}.card__info-icon{color:var(--sapButton_IconColor, #0070f2);margin-left:.5rem}.card__search-input{transform-origin:right center}.card__search-input--enter{animation:slide-in .2s ease-out both}.card__search-input--leave{animation:slide-out .2s ease-in both}.card__create-btn,.card__search-btn{min-width:auto;color:var(--sapButton_IconColor, #0070f2)}.card__body{flex:1;overflow:auto}.dialog__header{display:flex;align-items:flex-start;padding:.75rem 1rem}.dialog__body{margin:-1rem;min-width:320px;padding:1rem}.dialog__message{padding:1rem;margin:0;font-size:.875rem;max-width:320px}.dialog__footer{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem 1rem;margin:0 -1rem;width:100%}\n"], dependencies: [{ kind: "component", type: DeclarativeTable, selector: "mfp-declarative-table", inputs: ["columns", "resources", "trackByPath", "totalItemsCount", "paginationLimit", "hasMore", "growMode", "loadMoreButtonText", "height"], outputs: ["buttonClick", "tableRowClicked", "loadMoreResources", "paginationLimitChanged"] }, { kind: "component", type: DeclarativeForm, selector: "mfp-declarative-form", inputs: ["fields", "initialValues", "fieldErrors"], outputs: ["fieldChange", "formSubmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Dialog, selector: "ui5-dialog, [ui5-dialog]", inputs: ["headerText", "stretch", "draggable", "resizable", "state", "initialFocus", "preventFocusRestore", "accessibleName", "accessibleNameRef", "accessibleRole", "accessibleDescription", "accessibleDescriptionRef", "preventInitialFocus", "open"], outputs: ["ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close"], exportAs: ["ui5Dialog"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }, { kind: "component", type: Button, selector: "ui5-button, [ui5-button]", inputs: ["design", "disabled", "icon", "endIcon", "submits", "tooltip", "accessibleName", "accessibleNameRef", "accessibilityAttributes", "accessibleDescription", "type", "accessibleRole", "loading", "loadingDelay"], outputs: ["ui5Click"], exportAs: ["ui5Button"] }, { kind: "component", type: Icon, selector: "ui5-icon, [ui5-icon]", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "component", type: Input, selector: "ui5-input, [ui5-input]", inputs: ["disabled", "placeholder", "readonly", "required", "noTypeahead", "type", "value", "valueState", "name", "showSuggestions", "maxlength", "accessibleName", "accessibleNameRef", "accessibleDescription", "accessibleDescriptionRef", "showClearIcon", "open", "filter"], outputs: ["ui5Change", "ui5Input", "ui5Select", "ui5SelectionChange", "ui5Open", "ui5Close"], exportAs: ["ui5Input"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
844
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DeclarativeTableCard, isStandalone: true, selector: "mfp-declarative-table-card", inputs: { resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, createFormState: { classPropertyName: "createFormState", publicName: "createFormState", isSignal: true, isRequired: false, transformFunction: null }, editFormState: { classPropertyName: "editFormState", publicName: "editFormState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionButtonClick: "actionButtonClick", tableRowClicked: "tableRowClicked", loadMoreResources: "loadMoreResources", paginationLimitChanged: "paginationLimitChanged", searchChanged: "searchChanged", createFieldChange: "createFieldChange", editFieldChange: "editFieldChange", createSubmit: "createSubmit", editSubmit: "editSubmit", deleteSubmit: "deleteSubmit", filterTabChanged: "filterTabChanged" }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"card\" data-testid=\"generic-table-card\">\n <div class=\"card__header\">\n <div class=\"card__title\">\n @if (header(); as header) {\n {{ header }}\n @if (headerTooltip(); as tooltip) {\n <ui5-icon\n class=\"card__info-icon\"\n name=\"hint\"\n [accessibleName]=\"tooltip\"\n [showTooltip]=\"true\"\n />\n }\n }\n </div>\n <div class=\"card__actions\">\n @if (config().resourcesSearchable) {\n @if (searchExpanded()) {\n <ui5-input\n #searchInput\n data-testid=\"generic-table-card-search-input\"\n [class]=\"\n 'card__search-input card__search-input--' +\n (searchCollapsing() ? 'leave' : 'enter')\n \"\n [formControl]=\"searchControl\"\n (animationend)=\"onSearchAnimationEnd()\"\n (blur)=\"onSearchBlur()\"\n />\n }\n <ui5-button\n class=\"card__search-btn\"\n data-testid=\"generic-table-card-search-btn\"\n design=\"Transparent\"\n [accessibleName]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n [icon]=\"searchButtonConfig()?.icon ?? 'search'\"\n [tooltip]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n (click)=\"toggleSearch()\"\n />\n }\n @if (createFormConfig()) {\n <ui5-button\n class=\"card__create-btn\"\n data-testid=\"generic-table-card-create-btn\"\n [accessibleName]=\"createButtonConfig()?.text || createButtonConfig()?.tooltip || 'Create'\"\n [design]=\"createButtonConfig()?.design ?? 'Transparent'\"\n [icon]=\"createButtonConfig()?.icon ?? 'add'\"\n [tooltip]=\"createButtonConfig()?.tooltip\"\n (click)=\"createDialogOpen.set(true)\"\n >\n {{ createButtonConfig()?.text ?? '' }}\n </ui5-button>\n }\n </div>\n </div>\n\n @if (hasFilterTabs()) {\n <mfp-filter-tabs\n [tabs]=\"filterTabs()\"\n (tabChanged)=\"onFilterTabChanged($event)\"\n />\n }\n\n <div class=\"card__body\">\n @if (tableConfig(); as config) {\n <mfp-declarative-table\n [columns]=\"effectiveColumns()\"\n [growMode]=\"config.growMode ?? 'Button'\"\n [hasMore]=\"config.hasMore ?? false\"\n [height]=\"config.height\"\n [loadMoreButtonText]=\"config.loadMoreButtonText ?? 'Load More'\"\n [paginationLimit]=\"config.paginationLimit ?? 5\"\n [resources]=\"resources()\"\n [totalItemsCount]=\"config.totalItemsCount\"\n (buttonClick)=\"onButtonClick($event)\"\n (loadMoreResources)=\"loadMoreResources.emit()\"\n (paginationLimitChanged)=\"paginationLimitChanged.emit($event)\"\n (tableRowClicked)=\"tableRowClicked.emit($event)\"\n />\n }\n </div>\n</div>\n\n@if (createFormConfig(); as config) {\n <ui5-dialog\n data-testid=\"generic-table-card-create-dialog\"\n [accessibleName]=\"config.title ?? 'Create'\"\n [open]=\"createDialogOpen()\"\n (ui5BeforeClose)=\"createDialogOpen.set(false)\"\n >\n <div class=\"dialog__header\" slot=\"header\">\n <ui5-title level=\"H5\">{{ config.title ?? 'Create' }}</ui5-title>\n </div>\n <div class=\"dialog__body\">\n <mfp-declarative-form\n #createForm\n [fieldErrors]=\"createFormState().fieldErrors ?? {}\"\n [fields]=\"config.fields\"\n (fieldChange)=\"onCreateFieldChange($event)\"\n (formSubmit)=\"onCreateSubmit($event)\"\n />\n </div>\n <div class=\"dialog__footer\" slot=\"footer\">\n <ui5-button\n data-testid=\"generic-table-card-create-confirm\"\n design=\"Emphasized\"\n [disabled]=\"hasErrors(createFormState())\"\n (click)=\"createForm.submit()\"\n >\n {{ config.confirmLabel ?? 'Save' }}\n </ui5-button>\n <ui5-button data-testid=\"generic-table-card-create-cancel\" design=\"Transparent\" (click)=\"closeCreateDialog()\">\n {{ config.cancelLabel ?? 'Cancel' }}\n </ui5-button>\n </div>\n </ui5-dialog>\n}\n\n@if (editFormConfig(); as config) {\n <ui5-dialog\n data-testid=\"generic-table-card-edit-dialog\"\n [accessibleName]=\"config.title ?? 'Edit'\"\n [open]=\"editDialogOpen()\"\n (ui5BeforeClose)=\"editDialogOpen.set(false)\"\n >\n <div class=\"dialog__header\" slot=\"header\">\n <ui5-title level=\"H5\">{{ config.title ?? 'Edit' }}</ui5-title>\n </div>\n <div class=\"dialog__body\">\n <mfp-declarative-form\n #editForm\n [fieldErrors]=\"editFormState().fieldErrors ?? {}\"\n [fields]=\"config.fields\"\n [initialValues]=\"editInitialValue()\"\n (fieldChange)=\"onEditFieldChange($event)\"\n (formSubmit)=\"onEditSubmit($event)\"\n />\n </div>\n <div class=\"dialog__footer\" slot=\"footer\">\n <ui5-button\n data-testid=\"generic-table-card-edit-confirm\"\n design=\"Emphasized\"\n [disabled]=\"hasErrors(editFormState())\"\n (click)=\"editForm.submit()\"\n >\n {{ config.confirmLabel ?? 'Edit' }}\n </ui5-button>\n <ui5-button data-testid=\"generic-table-card-edit-cancel\" design=\"Transparent\" (click)=\"closeEditDialog()\">\n {{ config.cancelLabel ?? 'Cancel' }}\n </ui5-button>\n </div>\n </ui5-dialog>\n}\n\n@if (deleteConfirmationConfig(); as config) {\n <ui5-dialog\n data-testid=\"generic-table-card-delete-dialog\"\n [accessibleName]=\"config.title ?? 'Confirm Delete'\"\n [open]=\"deleteDialogOpen()\"\n (ui5BeforeClose)=\"deleteDialogOpen.set(false)\"\n >\n <div class=\"dialog__header\" slot=\"header\">\n <ui5-title level=\"H5\">{{ config.title ?? 'Confirm Delete' }}</ui5-title>\n </div>\n @if (config.message) {\n <div class=\"dialog__body\">\n <p class=\"dialog__message\">{{ config.message }}</p>\n </div>\n }\n <div class=\"dialog__footer\" slot=\"footer\">\n <ui5-button data-testid=\"generic-table-card-delete-confirm\" design=\"Negative\" (click)=\"onDeleteSubmit()\">\n {{ config.confirmLabel ?? 'Delete' }}\n </ui5-button>\n <ui5-button data-testid=\"generic-table-card-delete-cancel\" design=\"Transparent\" (click)=\"closeDeleteDialog()\">\n {{ config.cancelLabel ?? 'Cancel' }}\n </ui5-button>\n </div>\n </ui5-dialog>\n}\n", styles: [":host{display:block}@keyframes slide-in{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}@keyframes slide-out{0%{opacity:1;transform:scaleX(1)}to{opacity:0;transform:scaleX(0)}}.card{display:flex;flex-direction:column;border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:16px;background:var(--sapGroup_TitleBackground, #fff)}.card__header{display:flex;align-items:center;justify-content:space-between;min-height:3rem;padding:0 1rem}.card__title{color:var(--sapTile_TitleTextColor);text-overflow:ellipsis;font-family:var(--Font-Family-sapFontFamily, 72);font-size:var(--Font-Size-sapFontHeader6Size, 16px);font-style:normal;font-weight:700;line-height:normal;display:flex;align-items:center}.card__actions{display:flex;align-items:center;gap:.5rem}.card__info-icon{color:var(--sapButton_IconColor, #0070f2);margin-left:.5rem}.card__search-input{transform-origin:right center}.card__search-input--enter{animation:slide-in .2s ease-out both}.card__search-input--leave{animation:slide-out .2s ease-in both}.card__create-btn,.card__search-btn{min-width:auto;color:var(--sapButton_IconColor, #0070f2)}.card__body{flex:1;overflow:auto}.dialog__header{display:flex;align-items:flex-start;padding:.75rem 1rem}.dialog__body{margin:-1rem;min-width:320px;padding:1rem}.dialog__message{padding:1rem;margin:0;font-size:.875rem;max-width:320px}.dialog__footer{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem 1rem;margin:0 -1rem;width:100%}\n"], dependencies: [{ kind: "component", type: DeclarativeTable, selector: "mfp-declarative-table", inputs: ["columns", "resources", "trackByPath", "totalItemsCount", "paginationLimit", "hasMore", "growMode", "loadMoreButtonText", "height"], outputs: ["buttonClick", "tableRowClicked", "loadMoreResources", "paginationLimitChanged"] }, { kind: "component", type: DeclarativeForm, selector: "mfp-declarative-form", inputs: ["fields", "initialValues", "fieldErrors"], outputs: ["fieldChange", "formSubmit"] }, { kind: "component", type: FilterTabs, selector: "mfp-filter-tabs", inputs: ["tabs"], outputs: ["tabChanged"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Dialog, selector: "ui5-dialog, [ui5-dialog]", inputs: ["headerText", "stretch", "draggable", "resizable", "state", "initialFocus", "preventFocusRestore", "accessibleName", "accessibleNameRef", "accessibleRole", "accessibleDescription", "accessibleDescriptionRef", "preventInitialFocus", "open"], outputs: ["ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close"], exportAs: ["ui5Dialog"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }, { kind: "component", type: Button, selector: "ui5-button, [ui5-button]", inputs: ["design", "disabled", "icon", "endIcon", "submits", "tooltip", "accessibleName", "accessibleNameRef", "accessibilityAttributes", "accessibleDescription", "type", "accessibleRole", "loading", "loadingDelay"], outputs: ["ui5Click"], exportAs: ["ui5Button"] }, { kind: "component", type: Icon, selector: "ui5-icon, [ui5-icon]", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "component", type: Input, selector: "ui5-input, [ui5-input]", inputs: ["disabled", "placeholder", "readonly", "required", "noTypeahead", "type", "value", "valueState", "name", "showSuggestions", "maxlength", "accessibleName", "accessibleNameRef", "accessibleDescription", "accessibleDescriptionRef", "showClearIcon", "open", "filter"], outputs: ["ui5Change", "ui5Input", "ui5Select", "ui5SelectionChange", "ui5Open", "ui5Close"], exportAs: ["ui5Input"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
743
845
|
}
|
|
744
846
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTableCard, decorators: [{
|
|
745
847
|
type: Component,
|
|
746
848
|
args: [{ selector: 'mfp-declarative-table-card', imports: [
|
|
747
849
|
DeclarativeTable,
|
|
748
850
|
DeclarativeForm,
|
|
851
|
+
FilterTabs,
|
|
749
852
|
ReactiveFormsModule,
|
|
750
853
|
Dialog,
|
|
751
854
|
Title,
|
|
752
855
|
Button,
|
|
753
856
|
Icon,
|
|
754
857
|
Input,
|
|
755
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"card\">\n <div class=\"card__header\">\n <div class=\"card__title\">\n @if (header(); as header) {\n {{ header }}\n @if (headerTooltip(); as tooltip) {\n <ui5-icon\n class=\"card__info-icon\"\n name=\"hint\"\n [accessibleName]=\"tooltip\"\n [showTooltip]=\"true\"\n />\n }\n }\n </div>\n <div class=\"card__actions\">\n @if (config().resourcesSearchable) {\n @if (searchExpanded()) {\n <ui5-input\n #searchInput\n [class]=\"\n 'card__search-input card__search-input--' +\n (searchCollapsing() ? 'leave' : 'enter')\n \"\n [formControl]=\"searchControl\"\n (animationend)=\"onSearchAnimationEnd()\"\n (blur)=\"onSearchBlur()\"\n />\n }\n <ui5-button\n class=\"card__search-btn\"\n design=\"Transparent\"\n [accessibleName]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n [icon]=\"searchButtonConfig()?.icon ?? 'search'\"\n [tooltip]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n (click)=\"toggleSearch()\"\n />\n }\n @if (createFormConfig()) {\n <ui5-button\n class=\"card__create-btn\"\n [accessibleName]=\"createButtonConfig()?.text || createButtonConfig()?.tooltip || 'Create'\"\n [design]=\"createButtonConfig()?.design ?? 'Transparent'\"\n [icon]=\"createButtonConfig()?.icon ?? 'add'\"\n [tooltip]=\"createButtonConfig()?.tooltip\"\n (click)=\"createDialogOpen.set(true)\"\n >\n {{ createButtonConfig()?.text ?? '' }}\n </ui5-button>\n }\n </div>\n </div>\n\n <div class=\"card__body\">\n @if (tableConfig(); as config) {\n <mfp-declarative-table\n [columns]=\"effectiveColumns()\"\n [growMode]=\"config.growMode ?? 'Button'\"\n [hasMore]=\"config.hasMore ?? false\"\n [height]=\"config.height\"\n [loadMoreButtonText]=\"config.loadMoreButtonText ?? 'Load More'\"\n [paginationLimit]=\"config.paginationLimit ?? 5\"\n [resources]=\"resources()\"\n [totalItemsCount]=\"config.totalItemsCount\"\n (buttonClick)=\"onButtonClick($event)\"\n (loadMoreResources)=\"loadMoreResources.emit()\"\n (paginationLimitChanged)=\"paginationLimitChanged.emit($event)\"\n (tableRowClicked)=\"tableRowClicked.emit($event)\"\n />\n }\n </div>\n</div>\n\n@if (createFormConfig(); as config) {\n <ui5-dialog\n [accessibleName]=\"config.title ?? 'Create'\"\n [open]=\"createDialogOpen()\"\n (ui5BeforeClose)=\"createDialogOpen.set(false)\"\n >\n <div class=\"dialog__header\" slot=\"header\">\n <ui5-title level=\"H5\">{{ config.title ?? 'Create' }}</ui5-title>\n </div>\n <div class=\"dialog__body\">\n <mfp-declarative-form\n #createForm\n [fieldErrors]=\"createFormState().fieldErrors ?? {}\"\n [fields]=\"config.fields\"\n (fieldChange)=\"onCreateFieldChange($event)\"\n (formSubmit)=\"onCreateSubmit($event)\"\n />\n </div>\n <div class=\"dialog__footer\" slot=\"footer\">\n <ui5-button\n design=\"Emphasized\"\n [disabled]=\"hasErrors(createFormState())\"\n (click)=\"createForm.submit()\"\n >\n {{ config.confirmLabel ?? 'Save' }}\n </ui5-button>\n <ui5-button design=\"Transparent\" (click)=\"closeCreateDialog()\">\n {{ config.cancelLabel ?? 'Cancel' }}\n </ui5-button>\n </div>\n </ui5-dialog>\n}\n\n@if (editFormConfig(); as config) {\n <ui5-dialog\n [accessibleName]=\"config.title ?? 'Edit'\"\n [open]=\"editDialogOpen()\"\n (ui5BeforeClose)=\"editDialogOpen.set(false)\"\n >\n <div class=\"dialog__header\" slot=\"header\">\n <ui5-title level=\"H5\">{{ config.title ?? 'Edit' }}</ui5-title>\n </div>\n <div class=\"dialog__body\">\n <mfp-declarative-form\n #editForm\n [fieldErrors]=\"editFormState().fieldErrors ?? {}\"\n [fields]=\"config.fields\"\n [initialValues]=\"editInitialValue()\"\n (fieldChange)=\"onEditFieldChange($event)\"\n (formSubmit)=\"onEditSubmit($event)\"\n />\n </div>\n <div class=\"dialog__footer\" slot=\"footer\">\n <ui5-button\n design=\"Emphasized\"\n [disabled]=\"hasErrors(editFormState())\"\n (click)=\"editForm.submit()\"\n >\n {{ config.confirmLabel ?? 'Edit' }}\n </ui5-button>\n <ui5-button design=\"Transparent\" (click)=\"closeEditDialog()\">\n {{ config.cancelLabel ?? 'Cancel' }}\n </ui5-button>\n </div>\n </ui5-dialog>\n}\n\n@if (deleteConfirmationConfig(); as config) {\n <ui5-dialog\n [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 design=\"Negative\" (click)=\"onDeleteSubmit()\">\n {{ config.confirmLabel ?? 'Delete' }}\n </ui5-button>\n <ui5-button design=\"Transparent\" (click)=\"closeDeleteDialog()\">\n {{ config.cancelLabel ?? 'Cancel' }}\n </ui5-button>\n </div>\n </ui5-dialog>\n}\n", styles: [":host{display:block}@keyframes slide-in{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}@keyframes slide-out{0%{opacity:1;transform:scaleX(1)}to{opacity:0;transform:scaleX(0)}}.card{display:flex;flex-direction:column;border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:16px;background:var(--sapGroup_TitleBackground, #fff)}.card__header{display:flex;align-items:center;justify-content:space-between;min-height:3rem;padding:0 1rem
|
|
756
|
-
}], ctorParameters: () => [], propDecorators: { resources: [{ type: i0.Input, args: [{ isSignal: true, alias: "resources", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], createFormState: [{ type: i0.Input, args: [{ isSignal: true, alias: "createFormState", required: false }] }], editFormState: [{ type: i0.Input, args: [{ isSignal: true, alias: "editFormState", required: false }] }], actionButtonClick: [{ type: i0.Output, args: ["actionButtonClick"] }], tableRowClicked: [{ type: i0.Output, args: ["tableRowClicked"] }], loadMoreResources: [{ type: i0.Output, args: ["loadMoreResources"] }], paginationLimitChanged: [{ type: i0.Output, args: ["paginationLimitChanged"] }], searchChanged: [{ type: i0.Output, args: ["searchChanged"] }], createFieldChange: [{ type: i0.Output, args: ["createFieldChange"] }], editFieldChange: [{ type: i0.Output, args: ["editFieldChange"] }], createSubmit: [{ type: i0.Output, args: ["createSubmit"] }], editSubmit: [{ type: i0.Output, args: ["editSubmit"] }], deleteSubmit: [{ type: i0.Output, args: ["deleteSubmit"] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
|
|
858
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"card\" data-testid=\"generic-table-card\">\n <div class=\"card__header\">\n <div class=\"card__title\">\n @if (header(); as header) {\n {{ header }}\n @if (headerTooltip(); as tooltip) {\n <ui5-icon\n class=\"card__info-icon\"\n name=\"hint\"\n [accessibleName]=\"tooltip\"\n [showTooltip]=\"true\"\n />\n }\n }\n </div>\n <div class=\"card__actions\">\n @if (config().resourcesSearchable) {\n @if (searchExpanded()) {\n <ui5-input\n #searchInput\n data-testid=\"generic-table-card-search-input\"\n [class]=\"\n 'card__search-input card__search-input--' +\n (searchCollapsing() ? 'leave' : 'enter')\n \"\n [formControl]=\"searchControl\"\n (animationend)=\"onSearchAnimationEnd()\"\n (blur)=\"onSearchBlur()\"\n />\n }\n <ui5-button\n class=\"card__search-btn\"\n data-testid=\"generic-table-card-search-btn\"\n design=\"Transparent\"\n [accessibleName]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n [icon]=\"searchButtonConfig()?.icon ?? 'search'\"\n [tooltip]=\"searchButtonConfig()?.tooltip ?? 'Search'\"\n (click)=\"toggleSearch()\"\n />\n }\n @if (createFormConfig()) {\n <ui5-button\n class=\"card__create-btn\"\n data-testid=\"generic-table-card-create-btn\"\n [accessibleName]=\"createButtonConfig()?.text || createButtonConfig()?.tooltip || 'Create'\"\n [design]=\"createButtonConfig()?.design ?? 'Transparent'\"\n [icon]=\"createButtonConfig()?.icon ?? 'add'\"\n [tooltip]=\"createButtonConfig()?.tooltip\"\n (click)=\"createDialogOpen.set(true)\"\n >\n {{ createButtonConfig()?.text ?? '' }}\n </ui5-button>\n }\n </div>\n </div>\n\n @if (hasFilterTabs()) {\n <mfp-filter-tabs\n [tabs]=\"filterTabs()\"\n (tabChanged)=\"onFilterTabChanged($event)\"\n />\n }\n\n <div class=\"card__body\">\n @if (tableConfig(); as config) {\n <mfp-declarative-table\n [columns]=\"effectiveColumns()\"\n [growMode]=\"config.growMode ?? 'Button'\"\n [hasMore]=\"config.hasMore ?? false\"\n [height]=\"config.height\"\n [loadMoreButtonText]=\"config.loadMoreButtonText ?? 'Load More'\"\n [paginationLimit]=\"config.paginationLimit ?? 5\"\n [resources]=\"resources()\"\n [totalItemsCount]=\"config.totalItemsCount\"\n (buttonClick)=\"onButtonClick($event)\"\n (loadMoreResources)=\"loadMoreResources.emit()\"\n (paginationLimitChanged)=\"paginationLimitChanged.emit($event)\"\n (tableRowClicked)=\"tableRowClicked.emit($event)\"\n />\n }\n </div>\n</div>\n\n@if (createFormConfig(); as config) {\n <ui5-dialog\n data-testid=\"generic-table-card-create-dialog\"\n [accessibleName]=\"config.title ?? 'Create'\"\n [open]=\"createDialogOpen()\"\n (ui5BeforeClose)=\"createDialogOpen.set(false)\"\n >\n <div class=\"dialog__header\" slot=\"header\">\n <ui5-title level=\"H5\">{{ config.title ?? 'Create' }}</ui5-title>\n </div>\n <div class=\"dialog__body\">\n <mfp-declarative-form\n #createForm\n [fieldErrors]=\"createFormState().fieldErrors ?? {}\"\n [fields]=\"config.fields\"\n (fieldChange)=\"onCreateFieldChange($event)\"\n (formSubmit)=\"onCreateSubmit($event)\"\n />\n </div>\n <div class=\"dialog__footer\" slot=\"footer\">\n <ui5-button\n data-testid=\"generic-table-card-create-confirm\"\n design=\"Emphasized\"\n [disabled]=\"hasErrors(createFormState())\"\n (click)=\"createForm.submit()\"\n >\n {{ config.confirmLabel ?? 'Save' }}\n </ui5-button>\n <ui5-button data-testid=\"generic-table-card-create-cancel\" design=\"Transparent\" (click)=\"closeCreateDialog()\">\n {{ config.cancelLabel ?? 'Cancel' }}\n </ui5-button>\n </div>\n </ui5-dialog>\n}\n\n@if (editFormConfig(); as config) {\n <ui5-dialog\n data-testid=\"generic-table-card-edit-dialog\"\n [accessibleName]=\"config.title ?? 'Edit'\"\n [open]=\"editDialogOpen()\"\n (ui5BeforeClose)=\"editDialogOpen.set(false)\"\n >\n <div class=\"dialog__header\" slot=\"header\">\n <ui5-title level=\"H5\">{{ config.title ?? 'Edit' }}</ui5-title>\n </div>\n <div class=\"dialog__body\">\n <mfp-declarative-form\n #editForm\n [fieldErrors]=\"editFormState().fieldErrors ?? {}\"\n [fields]=\"config.fields\"\n [initialValues]=\"editInitialValue()\"\n (fieldChange)=\"onEditFieldChange($event)\"\n (formSubmit)=\"onEditSubmit($event)\"\n />\n </div>\n <div class=\"dialog__footer\" slot=\"footer\">\n <ui5-button\n data-testid=\"generic-table-card-edit-confirm\"\n design=\"Emphasized\"\n [disabled]=\"hasErrors(editFormState())\"\n (click)=\"editForm.submit()\"\n >\n {{ config.confirmLabel ?? 'Edit' }}\n </ui5-button>\n <ui5-button data-testid=\"generic-table-card-edit-cancel\" design=\"Transparent\" (click)=\"closeEditDialog()\">\n {{ config.cancelLabel ?? 'Cancel' }}\n </ui5-button>\n </div>\n </ui5-dialog>\n}\n\n@if (deleteConfirmationConfig(); as config) {\n <ui5-dialog\n data-testid=\"generic-table-card-delete-dialog\"\n [accessibleName]=\"config.title ?? 'Confirm Delete'\"\n [open]=\"deleteDialogOpen()\"\n (ui5BeforeClose)=\"deleteDialogOpen.set(false)\"\n >\n <div class=\"dialog__header\" slot=\"header\">\n <ui5-title level=\"H5\">{{ config.title ?? 'Confirm Delete' }}</ui5-title>\n </div>\n @if (config.message) {\n <div class=\"dialog__body\">\n <p class=\"dialog__message\">{{ config.message }}</p>\n </div>\n }\n <div class=\"dialog__footer\" slot=\"footer\">\n <ui5-button data-testid=\"generic-table-card-delete-confirm\" design=\"Negative\" (click)=\"onDeleteSubmit()\">\n {{ config.confirmLabel ?? 'Delete' }}\n </ui5-button>\n <ui5-button data-testid=\"generic-table-card-delete-cancel\" design=\"Transparent\" (click)=\"closeDeleteDialog()\">\n {{ config.cancelLabel ?? 'Cancel' }}\n </ui5-button>\n </div>\n </ui5-dialog>\n}\n", styles: [":host{display:block}@keyframes slide-in{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}@keyframes slide-out{0%{opacity:1;transform:scaleX(1)}to{opacity:0;transform:scaleX(0)}}.card{display:flex;flex-direction:column;border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:16px;background:var(--sapGroup_TitleBackground, #fff)}.card__header{display:flex;align-items:center;justify-content:space-between;min-height:3rem;padding:0 1rem}.card__title{color:var(--sapTile_TitleTextColor);text-overflow:ellipsis;font-family:var(--Font-Family-sapFontFamily, 72);font-size:var(--Font-Size-sapFontHeader6Size, 16px);font-style:normal;font-weight:700;line-height:normal;display:flex;align-items:center}.card__actions{display:flex;align-items:center;gap:.5rem}.card__info-icon{color:var(--sapButton_IconColor, #0070f2);margin-left:.5rem}.card__search-input{transform-origin:right center}.card__search-input--enter{animation:slide-in .2s ease-out both}.card__search-input--leave{animation:slide-out .2s ease-in both}.card__create-btn,.card__search-btn{min-width:auto;color:var(--sapButton_IconColor, #0070f2)}.card__body{flex:1;overflow:auto}.dialog__header{display:flex;align-items:flex-start;padding:.75rem 1rem}.dialog__body{margin:-1rem;min-width:320px;padding:1rem}.dialog__message{padding:1rem;margin:0;font-size:.875rem;max-width:320px}.dialog__footer{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem 1rem;margin:0 -1rem;width:100%}\n"] }]
|
|
859
|
+
}], ctorParameters: () => [], propDecorators: { resources: [{ type: i0.Input, args: [{ isSignal: true, alias: "resources", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], createFormState: [{ type: i0.Input, args: [{ isSignal: true, alias: "createFormState", required: false }] }], editFormState: [{ type: i0.Input, args: [{ isSignal: true, alias: "editFormState", required: false }] }], actionButtonClick: [{ type: i0.Output, args: ["actionButtonClick"] }], tableRowClicked: [{ type: i0.Output, args: ["tableRowClicked"] }], loadMoreResources: [{ type: i0.Output, args: ["loadMoreResources"] }], paginationLimitChanged: [{ type: i0.Output, args: ["paginationLimitChanged"] }], searchChanged: [{ type: i0.Output, args: ["searchChanged"] }], createFieldChange: [{ type: i0.Output, args: ["createFieldChange"] }], editFieldChange: [{ type: i0.Output, args: ["editFieldChange"] }], createSubmit: [{ type: i0.Output, args: ["createSubmit"] }], editSubmit: [{ type: i0.Output, args: ["editSubmit"] }], deleteSubmit: [{ type: i0.Output, args: ["deleteSubmit"] }], filterTabChanged: [{ type: i0.Output, args: ["filterTabChanged"] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
|
|
757
860
|
|
|
758
861
|
const CARD_TYPES = {
|
|
759
862
|
WC: 'wc',
|
|
@@ -1024,14 +1127,14 @@ class DashboardCard {
|
|
|
1024
1127
|
return `${start + 1} / span ${span}`;
|
|
1025
1128
|
}
|
|
1026
1129
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DashboardCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1027
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DashboardCard, isStandalone: true, selector: "mfp-dashboard-card", inputs: { card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeCard: "removeCard" }, host: { properties: { "style.grid-column": "gridColumn()", "style.grid-row": "gridRow()" } }, viewQueries: [{ propertyName: "host", first: true, predicate: ["elementHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (card().component) {\n <div class=\"component-card\" [class.component-card--editing]=\"editMode()\">\n @if (editMode()) {\n <div class=\"remove-wrapper\">\n <ui5-button\n class=\"card__remove\"\n design=\"Default\"\n icon=\"decline\"\n [accessibleName]=\"\n i18n.getTranslation(i18nKeys.REMOVE_CARD) +\n ': ' +\n (card().label || card().component)\n \"\n (click)=\"removeCard.emit()\"\n />\n </div>\n <ui5-icon\n aria-hidden=\"true\"\n class=\"card__resize-indicator\"\n name=\"resize-corner\"\n [accessibleName]=\"i18n.getTranslation(i18nKeys.RESIZABLE)\"\n />\n }\n <div\n class=\"component-host\"\n [style.pointer-events]=\"editMode() ? 'none' : 'auto'\"\n >\n <div #elementHost></div>\n </div>\n </div>\n} @else {\n <div class=\"card\">\n <div\n class=\"card__body\"\n [style.pointer-events]=\"editMode() ? 'none' : 'auto'\"\n >\n <ng-content />\n </div>\n </div>\n}\n", styles: [":host{display:block;min-width:0;min-height:0;overflow:visible}.card__remove{position:absolute;top:0;right:-.5rem;z-index:10;border-radius:50%!important;width:1.25rem!important;height:1.25rem!important;min-width:unset!important;padding:0!important;font-size:.625rem!important}.remove-wrapper{position:sticky;height:.5rem;top:0;right:0;z-index:10}.component-card{position:relative;height:100%;overflow:visible;isolation:isolate;padding-inline-start:var(--mfp_cardContainerPadding, 10px);padding-inline-end:var(--mfp_cardContainerPadding, 10px)}.component-card--editing{cursor:grab}.component-card--editing:hover{--sapTile_BorderColor: var(--sapHighlightColor, #0070f2);--sapGroup_ContentBorderColor: var(--sapHighlightColor, #0070f2)}.component-card--editing:hover .card__resize-indicator{opacity:1}:host-context(.ui-draggable-dragging) .component-card--editing{cursor:grabbing!important}:host-context(.ui-draggable-dragging) .component-card--editing{--sapTile_BorderColor: var(--sapHighlightColor, #0070f2);--sapGroup_ContentBorderColor: var(--sapHighlightColor, #0070f2)}:host-context(.ui-draggable-dragging) .component-card--editing .card__resize-indicator{opacity:1}.component-host{position:relative;height:100%}.card__resize-indicator{position:absolute;right:calc(var(--mfp_cardContainerPadding, 10px) + 4px);bottom:4px;width:1rem;height:1rem;pointer-events:none;opacity:0;transition:opacity .12s ease-out;color:var(--sapHighlightColor, #0070f2);z-index:9}.card{position:relative;display:flex;flex-direction:column;height:100%;border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:.5rem;background:var(--sapBackgroundColor, #fff);overflow:visible}.card__header{padding:.75rem 1rem;font-weight:600;border-bottom:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);background:var(--sapGroup_TitleBackground, #f5f5f5)}.card__body{flex:1;padding:1rem;overflow:auto}\n"], dependencies: [{ 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"] }] });
|
|
1130
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DashboardCard, isStandalone: true, selector: "mfp-dashboard-card", inputs: { card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeCard: "removeCard" }, host: { properties: { "style.grid-column": "gridColumn()", "style.grid-row": "gridRow()" } }, viewQueries: [{ propertyName: "host", first: true, predicate: ["elementHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (card().component) {\n <div class=\"component-card\" [attr.data-testid]=\"'dashboard-card-' + card().id\" [class.component-card--editing]=\"editMode()\">\n @if (editMode()) {\n <div class=\"remove-wrapper\">\n <ui5-button\n class=\"card__remove\"\n design=\"Default\"\n icon=\"decline\"\n [attr.data-testid]=\"'dashboard-card-' + card().id + '-remove'\"\n [accessibleName]=\"\n i18n.getTranslation(i18nKeys.REMOVE_CARD) +\n ': ' +\n (card().label || card().component)\n \"\n (click)=\"removeCard.emit()\"\n />\n </div>\n <ui5-icon\n aria-hidden=\"true\"\n class=\"card__resize-indicator\"\n name=\"resize-corner\"\n [accessibleName]=\"i18n.getTranslation(i18nKeys.RESIZABLE)\"\n />\n }\n <div\n class=\"component-host\"\n [style.pointer-events]=\"editMode() ? 'none' : 'auto'\"\n >\n <div #elementHost></div>\n </div>\n </div>\n} @else {\n <div class=\"card\" [attr.data-testid]=\"'dashboard-card-' + card().id\">\n <div\n class=\"card__body\"\n [style.pointer-events]=\"editMode() ? 'none' : 'auto'\"\n >\n <ng-content />\n </div>\n </div>\n}\n", styles: [":host{display:block;min-width:0;min-height:0;overflow:visible}.card__remove{position:absolute;top:0;right:-.5rem;z-index:10;border-radius:50%!important;width:1.25rem!important;height:1.25rem!important;min-width:unset!important;padding:0!important;font-size:.625rem!important}.remove-wrapper{position:sticky;height:.5rem;top:0;right:0;z-index:10}.component-card{position:relative;height:100%;overflow:visible;isolation:isolate;padding-inline-start:var(--mfp_cardContainerPadding, 10px);padding-inline-end:var(--mfp_cardContainerPadding, 10px)}.component-card--editing{cursor:grab}.component-card--editing:hover{--sapTile_BorderColor: var(--sapHighlightColor, #0070f2);--sapGroup_ContentBorderColor: var(--sapHighlightColor, #0070f2)}.component-card--editing:hover .card__resize-indicator{opacity:1}:host-context(.ui-draggable-dragging) .component-card--editing{cursor:grabbing!important}:host-context(.ui-draggable-dragging) .component-card--editing{--sapTile_BorderColor: var(--sapHighlightColor, #0070f2);--sapGroup_ContentBorderColor: var(--sapHighlightColor, #0070f2)}:host-context(.ui-draggable-dragging) .component-card--editing .card__resize-indicator{opacity:1}.component-host{position:relative;height:100%}.card__resize-indicator{position:absolute;right:calc(var(--mfp_cardContainerPadding, 10px) + 4px);bottom:4px;width:1rem;height:1rem;pointer-events:none;opacity:0;transition:opacity .12s ease-out;color:var(--sapHighlightColor, #0070f2);z-index:9}.card{position:relative;display:flex;flex-direction:column;height:100%;border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:.5rem;background:var(--sapBackgroundColor, #fff);overflow:visible}.card__header{padding:.75rem 1rem;font-weight:600;border-bottom:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);background:var(--sapGroup_TitleBackground, #f5f5f5)}.card__body{flex:1;padding:1rem;overflow:auto}\n"], dependencies: [{ 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"] }] });
|
|
1028
1131
|
}
|
|
1029
1132
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DashboardCard, decorators: [{
|
|
1030
1133
|
type: Component,
|
|
1031
1134
|
args: [{ selector: 'mfp-dashboard-card', imports: [Button, Icon], encapsulation: ViewEncapsulation.Emulated, host: {
|
|
1032
1135
|
'[style.grid-column]': 'gridColumn()',
|
|
1033
1136
|
'[style.grid-row]': 'gridRow()',
|
|
1034
|
-
}, template: "@if (card().component) {\n <div class=\"component-card\" [class.component-card--editing]=\"editMode()\">\n @if (editMode()) {\n <div class=\"remove-wrapper\">\n <ui5-button\n class=\"card__remove\"\n design=\"Default\"\n icon=\"decline\"\n [accessibleName]=\"\n i18n.getTranslation(i18nKeys.REMOVE_CARD) +\n ': ' +\n (card().label || card().component)\n \"\n (click)=\"removeCard.emit()\"\n />\n </div>\n <ui5-icon\n aria-hidden=\"true\"\n class=\"card__resize-indicator\"\n name=\"resize-corner\"\n [accessibleName]=\"i18n.getTranslation(i18nKeys.RESIZABLE)\"\n />\n }\n <div\n class=\"component-host\"\n [style.pointer-events]=\"editMode() ? 'none' : 'auto'\"\n >\n <div #elementHost></div>\n </div>\n </div>\n} @else {\n <div class=\"card\">\n <div\n class=\"card__body\"\n [style.pointer-events]=\"editMode() ? 'none' : 'auto'\"\n >\n <ng-content />\n </div>\n </div>\n}\n", styles: [":host{display:block;min-width:0;min-height:0;overflow:visible}.card__remove{position:absolute;top:0;right:-.5rem;z-index:10;border-radius:50%!important;width:1.25rem!important;height:1.25rem!important;min-width:unset!important;padding:0!important;font-size:.625rem!important}.remove-wrapper{position:sticky;height:.5rem;top:0;right:0;z-index:10}.component-card{position:relative;height:100%;overflow:visible;isolation:isolate;padding-inline-start:var(--mfp_cardContainerPadding, 10px);padding-inline-end:var(--mfp_cardContainerPadding, 10px)}.component-card--editing{cursor:grab}.component-card--editing:hover{--sapTile_BorderColor: var(--sapHighlightColor, #0070f2);--sapGroup_ContentBorderColor: var(--sapHighlightColor, #0070f2)}.component-card--editing:hover .card__resize-indicator{opacity:1}:host-context(.ui-draggable-dragging) .component-card--editing{cursor:grabbing!important}:host-context(.ui-draggable-dragging) .component-card--editing{--sapTile_BorderColor: var(--sapHighlightColor, #0070f2);--sapGroup_ContentBorderColor: var(--sapHighlightColor, #0070f2)}:host-context(.ui-draggable-dragging) .component-card--editing .card__resize-indicator{opacity:1}.component-host{position:relative;height:100%}.card__resize-indicator{position:absolute;right:calc(var(--mfp_cardContainerPadding, 10px) + 4px);bottom:4px;width:1rem;height:1rem;pointer-events:none;opacity:0;transition:opacity .12s ease-out;color:var(--sapHighlightColor, #0070f2);z-index:9}.card{position:relative;display:flex;flex-direction:column;height:100%;border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:.5rem;background:var(--sapBackgroundColor, #fff);overflow:visible}.card__header{padding:.75rem 1rem;font-weight:600;border-bottom:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);background:var(--sapGroup_TitleBackground, #f5f5f5)}.card__body{flex:1;padding:1rem;overflow:auto}\n"] }]
|
|
1137
|
+
}, template: "@if (card().component) {\n <div class=\"component-card\" [attr.data-testid]=\"'dashboard-card-' + card().id\" [class.component-card--editing]=\"editMode()\">\n @if (editMode()) {\n <div class=\"remove-wrapper\">\n <ui5-button\n class=\"card__remove\"\n design=\"Default\"\n icon=\"decline\"\n [attr.data-testid]=\"'dashboard-card-' + card().id + '-remove'\"\n [accessibleName]=\"\n i18n.getTranslation(i18nKeys.REMOVE_CARD) +\n ': ' +\n (card().label || card().component)\n \"\n (click)=\"removeCard.emit()\"\n />\n </div>\n <ui5-icon\n aria-hidden=\"true\"\n class=\"card__resize-indicator\"\n name=\"resize-corner\"\n [accessibleName]=\"i18n.getTranslation(i18nKeys.RESIZABLE)\"\n />\n }\n <div\n class=\"component-host\"\n [style.pointer-events]=\"editMode() ? 'none' : 'auto'\"\n >\n <div #elementHost></div>\n </div>\n </div>\n} @else {\n <div class=\"card\" [attr.data-testid]=\"'dashboard-card-' + card().id\">\n <div\n class=\"card__body\"\n [style.pointer-events]=\"editMode() ? 'none' : 'auto'\"\n >\n <ng-content />\n </div>\n </div>\n}\n", styles: [":host{display:block;min-width:0;min-height:0;overflow:visible}.card__remove{position:absolute;top:0;right:-.5rem;z-index:10;border-radius:50%!important;width:1.25rem!important;height:1.25rem!important;min-width:unset!important;padding:0!important;font-size:.625rem!important}.remove-wrapper{position:sticky;height:.5rem;top:0;right:0;z-index:10}.component-card{position:relative;height:100%;overflow:visible;isolation:isolate;padding-inline-start:var(--mfp_cardContainerPadding, 10px);padding-inline-end:var(--mfp_cardContainerPadding, 10px)}.component-card--editing{cursor:grab}.component-card--editing:hover{--sapTile_BorderColor: var(--sapHighlightColor, #0070f2);--sapGroup_ContentBorderColor: var(--sapHighlightColor, #0070f2)}.component-card--editing:hover .card__resize-indicator{opacity:1}:host-context(.ui-draggable-dragging) .component-card--editing{cursor:grabbing!important}:host-context(.ui-draggable-dragging) .component-card--editing{--sapTile_BorderColor: var(--sapHighlightColor, #0070f2);--sapGroup_ContentBorderColor: var(--sapHighlightColor, #0070f2)}:host-context(.ui-draggable-dragging) .component-card--editing .card__resize-indicator{opacity:1}.component-host{position:relative;height:100%}.card__resize-indicator{position:absolute;right:calc(var(--mfp_cardContainerPadding, 10px) + 4px);bottom:4px;width:1rem;height:1rem;pointer-events:none;opacity:0;transition:opacity .12s ease-out;color:var(--sapHighlightColor, #0070f2);z-index:9}.card{position:relative;display:flex;flex-direction:column;height:100%;border:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);border-radius:.5rem;background:var(--sapBackgroundColor, #fff);overflow:visible}.card__header{padding:.75rem 1rem;font-weight:600;border-bottom:1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);background:var(--sapGroup_TitleBackground, #f5f5f5)}.card__body{flex:1;padding:1rem;overflow:auto}\n"] }]
|
|
1035
1138
|
}], ctorParameters: () => [], propDecorators: { card: [{ type: i0.Input, args: [{ isSignal: true, alias: "card", required: true }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], removeCard: [{ type: i0.Output, args: ["removeCard"] }], host: [{ type: i0.ViewChild, args: ['elementHost', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
|
|
1036
1139
|
|
|
1037
1140
|
/** Single source of truth for grid + section breakpoints (TypeScript half). */
|
|
@@ -1057,11 +1160,11 @@ class DiscardChangesDialog {
|
|
|
1057
1160
|
confirm = output();
|
|
1058
1161
|
cancelled = output();
|
|
1059
1162
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DiscardChangesDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1060
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: DiscardChangesDialog, isStandalone: true, selector: "mfp-discard-changes-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirm: "confirm", cancelled: "cancelled" }, ngImport: i0, template: "<ui5-dialog state=\"Critical\" [open]=\"open()\" (ui5BeforeClose)=\"cancelled.emit()\">\n <div class=\"discard-changes-dialog__header\" slot=\"header\">\n <ui5-title level=\"H5\">{{ i18n.getTranslation(i18nKeys.DISCARD_CHANGES) }}</ui5-title>\n </div>\n <div class=\"discard-changes-dialog__body\">\n {{ i18n.getTranslation(i18nKeys.DISCARD_CONFIRM_BODY) }}\n </div>\n <div class=\"discard-changes-dialog__footer\" slot=\"footer\">\n <ui5-button design=\"Emphasized\" (click)=\"confirm.emit()\">{{ i18n.getTranslation(i18nKeys.DISCARD) }}</ui5-button>\n <ui5-button design=\"Transparent\" (click)=\"cancelled.emit()\">{{ i18n.getTranslation(i18nKeys.CANCEL) }}</ui5-button>\n </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.discard-changes-dialog__header{display:flex;align-items:center;width:100%;padding:.75rem 0}.discard-changes-dialog__body{padding:0 0 1rem;min-width:320px}.discard-changes-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"], dependencies: [{ 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: 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"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
1163
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: DiscardChangesDialog, isStandalone: true, selector: "mfp-discard-changes-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirm: "confirm", cancelled: "cancelled" }, ngImport: i0, template: "<ui5-dialog data-testid=\"dashboard-discard-changes-dialog\" state=\"Critical\" [open]=\"open()\" (ui5BeforeClose)=\"cancelled.emit()\">\n <div class=\"discard-changes-dialog__header\" slot=\"header\">\n <ui5-title level=\"H5\">{{ i18n.getTranslation(i18nKeys.DISCARD_CHANGES) }}</ui5-title>\n </div>\n <div class=\"discard-changes-dialog__body\">\n {{ i18n.getTranslation(i18nKeys.DISCARD_CONFIRM_BODY) }}\n </div>\n <div class=\"discard-changes-dialog__footer\" slot=\"footer\">\n <ui5-button data-testid=\"dashboard-discard-changes-confirm-btn\" design=\"Emphasized\" (click)=\"confirm.emit()\">{{ i18n.getTranslation(i18nKeys.DISCARD) }}</ui5-button>\n <ui5-button data-testid=\"dashboard-discard-changes-cancel-btn\" design=\"Transparent\" (click)=\"cancelled.emit()\">{{ i18n.getTranslation(i18nKeys.CANCEL) }}</ui5-button>\n </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.discard-changes-dialog__header{display:flex;align-items:center;width:100%;padding:.75rem 0}.discard-changes-dialog__body{padding:0 0 1rem;min-width:320px}.discard-changes-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"], dependencies: [{ 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: 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"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
1061
1164
|
}
|
|
1062
1165
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DiscardChangesDialog, decorators: [{
|
|
1063
1166
|
type: Component,
|
|
1064
|
-
args: [{ selector: 'mfp-discard-changes-dialog', imports: [Button, Dialog, Title], encapsulation: ViewEncapsulation.ShadowDom, template: "<ui5-dialog state=\"Critical\" [open]=\"open()\" (ui5BeforeClose)=\"cancelled.emit()\">\n <div class=\"discard-changes-dialog__header\" slot=\"header\">\n <ui5-title level=\"H5\">{{ i18n.getTranslation(i18nKeys.DISCARD_CHANGES) }}</ui5-title>\n </div>\n <div class=\"discard-changes-dialog__body\">\n {{ i18n.getTranslation(i18nKeys.DISCARD_CONFIRM_BODY) }}\n </div>\n <div class=\"discard-changes-dialog__footer\" slot=\"footer\">\n <ui5-button design=\"Emphasized\" (click)=\"confirm.emit()\">{{ i18n.getTranslation(i18nKeys.DISCARD) }}</ui5-button>\n <ui5-button design=\"Transparent\" (click)=\"cancelled.emit()\">{{ i18n.getTranslation(i18nKeys.CANCEL) }}</ui5-button>\n </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.discard-changes-dialog__header{display:flex;align-items:center;width:100%;padding:.75rem 0}.discard-changes-dialog__body{padding:0 0 1rem;min-width:320px}.discard-changes-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"] }]
|
|
1167
|
+
args: [{ selector: 'mfp-discard-changes-dialog', imports: [Button, Dialog, Title], encapsulation: ViewEncapsulation.ShadowDom, template: "<ui5-dialog data-testid=\"dashboard-discard-changes-dialog\" state=\"Critical\" [open]=\"open()\" (ui5BeforeClose)=\"cancelled.emit()\">\n <div class=\"discard-changes-dialog__header\" slot=\"header\">\n <ui5-title level=\"H5\">{{ i18n.getTranslation(i18nKeys.DISCARD_CHANGES) }}</ui5-title>\n </div>\n <div class=\"discard-changes-dialog__body\">\n {{ i18n.getTranslation(i18nKeys.DISCARD_CONFIRM_BODY) }}\n </div>\n <div class=\"discard-changes-dialog__footer\" slot=\"footer\">\n <ui5-button data-testid=\"dashboard-discard-changes-confirm-btn\" design=\"Emphasized\" (click)=\"confirm.emit()\">{{ i18n.getTranslation(i18nKeys.DISCARD) }}</ui5-button>\n <ui5-button data-testid=\"dashboard-discard-changes-cancel-btn\" design=\"Transparent\" (click)=\"cancelled.emit()\">{{ i18n.getTranslation(i18nKeys.CANCEL) }}</ui5-button>\n </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.discard-changes-dialog__header{display:flex;align-items:center;width:100%;padding:.75rem 0}.discard-changes-dialog__body{padding:0 0 1rem;min-width:320px}.discard-changes-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"] }]
|
|
1065
1168
|
}], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], confirm: [{ type: i0.Output, args: ["confirm"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
|
|
1066
1169
|
|
|
1067
1170
|
class EditCardsDialog {
|
|
@@ -1142,11 +1245,11 @@ class EditCardsDialog {
|
|
|
1142
1245
|
this.confirm.emit({ added, removed });
|
|
1143
1246
|
}
|
|
1144
1247
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EditCardsDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1145
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: EditCardsDialog, isStandalone: true, selector: "mfp-edit-cards-dialog", inputs: { availableCards: { classPropertyName: "availableCards", publicName: "availableCards", isSignal: true, isRequired: false, transformFunction: null }, addedCardsIds: { classPropertyName: "addedCardsIds", publicName: "addedCardsIds", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirm: "confirm", cancelled: "cancelled" }, ngImport: i0, template: "<ui5-dialog [open]=\"open()\" (ui5BeforeClose)=\"cancelled.emit()\">\n <div class=\"edit-cards-dialog__header\" slot=\"header\">\n <ui5-title level=\"H5\">{{ i18n.getTranslation(i18nKeys.EDIT_CARDS) }}</ui5-title>\n </div>\n <div class=\"edit-cards-dialog\">\n <ui5-list\n selectionMode=\"None\"\n separators=\"Inner\"\n [noDataText]=\"i18n.getTranslation(i18nKeys.NO_CARDS_AVAILABLE)\"\n >\n @for (availableCard of availableCards(); track availableCard.id) {\n <ui5-li-custom\n [accessibleName]=\"availableCard.label || availableCard.component\"\n >\n <div class=\"edit-cards-dialog__list-item\">\n <span>{{ availableCard.label || availableCard.component }}</span>\n <ui5-switch\n [accessibleName]=\"availableCard.label || availableCard.component\"\n [checked]=\"selectedIds().has(availableCard.id)\"\n (keydown)=\"onSwitchKeydown($event, availableCard.id)\"\n (ui5Change)=\"toggle(availableCard.id)\"\n />\n </div>\n </ui5-li-custom>\n }\n </ui5-list>\n </div>\n <div class=\"edit-cards-dialog__footer\" slot=\"footer\">\n <ui5-button design=\"Emphasized\" (click)=\"confirmSave()\">{{ i18n.getTranslation(i18nKeys.SAVE) }}</ui5-button>\n <ui5-button design=\"Transparent\" (click)=\"cancelled.emit()\">{{ i18n.getTranslation(i18nKeys.CANCEL) }}</ui5-button>\n </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.edit-cards-dialog{padding:var(--Container-Spacing-Small, 16px) 0;margin:-1rem;min-width:300px}.edit-cards-dialog__header{display:flex;align-items:flex-start;justify-content:flex-start;width:100%;padding:.75rem 1rem}.edit-cards-dialog__list-item{display:flex;align-items:center;justify-content:space-between;width:100%}.edit-cards-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"], dependencies: [{ 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: 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: List, selector: "ui5-list, [ui5-list]", inputs: ["headerText", "footerText", "indent", "selectionMode", "noDataText", "separators", "growing", "growingButtonText", "loading", "loadingDelay", "stickyHeader", "accessibleName", "accessibilityAttributes", "accessibleNameRef", "accessibleDescription", "accessibleDescriptionRef", "accessibleRole"], outputs: ["ui5ItemClick", "ui5ItemClose", "ui5ItemToggle", "ui5ItemDelete", "ui5SelectionChange", "ui5LoadMore", "ui5MoveOver", "ui5Move"], exportAs: ["ui5List"] }, { kind: "component", type: ListItemCustom, selector: "ui5-li-custom, [ui5-li-custom]", inputs: ["movable", "accessibleName", "type", "accessibilityAttributes", "navigated", "tooltip", "highlight", "selected"], outputs: ["ui5DetailClick"], exportAs: ["ui5ListItemCustom"] }, { kind: "component", type: Switch, selector: "ui5-switch, [ui5-switch]", inputs: ["design", "checked", "disabled", "textOn", "textOff", "accessibleName", "accessibleNameRef", "tooltip", "required", "name", "value"], outputs: ["ui5Change"], exportAs: ["ui5Switch"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
1248
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: EditCardsDialog, isStandalone: true, selector: "mfp-edit-cards-dialog", inputs: { availableCards: { classPropertyName: "availableCards", publicName: "availableCards", isSignal: true, isRequired: false, transformFunction: null }, addedCardsIds: { classPropertyName: "addedCardsIds", publicName: "addedCardsIds", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirm: "confirm", cancelled: "cancelled" }, ngImport: i0, template: "<ui5-dialog data-testid=\"dashboard-edit-cards-dialog\" [open]=\"open()\" (ui5BeforeClose)=\"cancelled.emit()\">\n <div class=\"edit-cards-dialog__header\" slot=\"header\">\n <ui5-title level=\"H5\">{{ i18n.getTranslation(i18nKeys.EDIT_CARDS) }}</ui5-title>\n </div>\n <div class=\"edit-cards-dialog\">\n <ui5-list\n selectionMode=\"None\"\n separators=\"Inner\"\n [noDataText]=\"i18n.getTranslation(i18nKeys.NO_CARDS_AVAILABLE)\"\n >\n @for (availableCard of availableCards(); track availableCard.id) {\n <ui5-li-custom\n [attr.data-testid]=\"'dashboard-edit-cards-row-' + availableCard.id\"\n [accessibleName]=\"availableCard.label || availableCard.component\"\n >\n <div class=\"edit-cards-dialog__list-item\">\n <span>{{ availableCard.label || availableCard.component }}</span>\n <ui5-switch\n [attr.data-testid]=\"'dashboard-edit-cards-switch-' + availableCard.id\"\n [accessibleName]=\"availableCard.label || availableCard.component\"\n [checked]=\"selectedIds().has(availableCard.id)\"\n (keydown)=\"onSwitchKeydown($event, availableCard.id)\"\n (ui5Change)=\"toggle(availableCard.id)\"\n />\n </div>\n </ui5-li-custom>\n }\n </ui5-list>\n </div>\n <div class=\"edit-cards-dialog__footer\" slot=\"footer\">\n <ui5-button data-testid=\"dashboard-edit-cards-save-btn\" design=\"Emphasized\" (click)=\"confirmSave()\">{{ i18n.getTranslation(i18nKeys.SAVE) }}</ui5-button>\n <ui5-button data-testid=\"dashboard-edit-cards-cancel-btn\" design=\"Transparent\" (click)=\"cancelled.emit()\">{{ i18n.getTranslation(i18nKeys.CANCEL) }}</ui5-button>\n </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.edit-cards-dialog{padding:var(--Container-Spacing-Small, 16px) 0;margin:-1rem;min-width:300px}.edit-cards-dialog__header{display:flex;align-items:flex-start;justify-content:flex-start;width:100%;padding:.75rem 1rem}.edit-cards-dialog__list-item{display:flex;align-items:center;justify-content:space-between;width:100%}.edit-cards-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"], dependencies: [{ 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: 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: List, selector: "ui5-list, [ui5-list]", inputs: ["headerText", "footerText", "indent", "selectionMode", "noDataText", "separators", "growing", "growingButtonText", "loading", "loadingDelay", "stickyHeader", "accessibleName", "accessibilityAttributes", "accessibleNameRef", "accessibleDescription", "accessibleDescriptionRef", "accessibleRole"], outputs: ["ui5ItemClick", "ui5ItemClose", "ui5ItemToggle", "ui5ItemDelete", "ui5SelectionChange", "ui5LoadMore", "ui5MoveOver", "ui5Move"], exportAs: ["ui5List"] }, { kind: "component", type: ListItemCustom, selector: "ui5-li-custom, [ui5-li-custom]", inputs: ["movable", "accessibleName", "type", "accessibilityAttributes", "navigated", "tooltip", "highlight", "selected"], outputs: ["ui5DetailClick"], exportAs: ["ui5ListItemCustom"] }, { kind: "component", type: Switch, selector: "ui5-switch, [ui5-switch]", inputs: ["design", "checked", "disabled", "textOn", "textOff", "accessibleName", "accessibleNameRef", "tooltip", "required", "name", "value"], outputs: ["ui5Change"], exportAs: ["ui5Switch"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
1146
1249
|
}
|
|
1147
1250
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EditCardsDialog, decorators: [{
|
|
1148
1251
|
type: Component,
|
|
1149
|
-
args: [{ selector: 'mfp-edit-cards-dialog', imports: [Button, Dialog, List, ListItemCustom, Switch, Title], encapsulation: ViewEncapsulation.ShadowDom, template: "<ui5-dialog [open]=\"open()\" (ui5BeforeClose)=\"cancelled.emit()\">\n <div class=\"edit-cards-dialog__header\" slot=\"header\">\n <ui5-title level=\"H5\">{{ i18n.getTranslation(i18nKeys.EDIT_CARDS) }}</ui5-title>\n </div>\n <div class=\"edit-cards-dialog\">\n <ui5-list\n selectionMode=\"None\"\n separators=\"Inner\"\n [noDataText]=\"i18n.getTranslation(i18nKeys.NO_CARDS_AVAILABLE)\"\n >\n @for (availableCard of availableCards(); track availableCard.id) {\n <ui5-li-custom\n [accessibleName]=\"availableCard.label || availableCard.component\"\n >\n <div class=\"edit-cards-dialog__list-item\">\n <span>{{ availableCard.label || availableCard.component }}</span>\n <ui5-switch\n [accessibleName]=\"availableCard.label || availableCard.component\"\n [checked]=\"selectedIds().has(availableCard.id)\"\n (keydown)=\"onSwitchKeydown($event, availableCard.id)\"\n (ui5Change)=\"toggle(availableCard.id)\"\n />\n </div>\n </ui5-li-custom>\n }\n </ui5-list>\n </div>\n <div class=\"edit-cards-dialog__footer\" slot=\"footer\">\n <ui5-button design=\"Emphasized\" (click)=\"confirmSave()\">{{ i18n.getTranslation(i18nKeys.SAVE) }}</ui5-button>\n <ui5-button design=\"Transparent\" (click)=\"cancelled.emit()\">{{ i18n.getTranslation(i18nKeys.CANCEL) }}</ui5-button>\n </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.edit-cards-dialog{padding:var(--Container-Spacing-Small, 16px) 0;margin:-1rem;min-width:300px}.edit-cards-dialog__header{display:flex;align-items:flex-start;justify-content:flex-start;width:100%;padding:.75rem 1rem}.edit-cards-dialog__list-item{display:flex;align-items:center;justify-content:space-between;width:100%}.edit-cards-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"] }]
|
|
1252
|
+
args: [{ selector: 'mfp-edit-cards-dialog', imports: [Button, Dialog, List, ListItemCustom, Switch, Title], encapsulation: ViewEncapsulation.ShadowDom, template: "<ui5-dialog data-testid=\"dashboard-edit-cards-dialog\" [open]=\"open()\" (ui5BeforeClose)=\"cancelled.emit()\">\n <div class=\"edit-cards-dialog__header\" slot=\"header\">\n <ui5-title level=\"H5\">{{ i18n.getTranslation(i18nKeys.EDIT_CARDS) }}</ui5-title>\n </div>\n <div class=\"edit-cards-dialog\">\n <ui5-list\n selectionMode=\"None\"\n separators=\"Inner\"\n [noDataText]=\"i18n.getTranslation(i18nKeys.NO_CARDS_AVAILABLE)\"\n >\n @for (availableCard of availableCards(); track availableCard.id) {\n <ui5-li-custom\n [attr.data-testid]=\"'dashboard-edit-cards-row-' + availableCard.id\"\n [accessibleName]=\"availableCard.label || availableCard.component\"\n >\n <div class=\"edit-cards-dialog__list-item\">\n <span>{{ availableCard.label || availableCard.component }}</span>\n <ui5-switch\n [attr.data-testid]=\"'dashboard-edit-cards-switch-' + availableCard.id\"\n [accessibleName]=\"availableCard.label || availableCard.component\"\n [checked]=\"selectedIds().has(availableCard.id)\"\n (keydown)=\"onSwitchKeydown($event, availableCard.id)\"\n (ui5Change)=\"toggle(availableCard.id)\"\n />\n </div>\n </ui5-li-custom>\n }\n </ui5-list>\n </div>\n <div class=\"edit-cards-dialog__footer\" slot=\"footer\">\n <ui5-button data-testid=\"dashboard-edit-cards-save-btn\" design=\"Emphasized\" (click)=\"confirmSave()\">{{ i18n.getTranslation(i18nKeys.SAVE) }}</ui5-button>\n <ui5-button data-testid=\"dashboard-edit-cards-cancel-btn\" design=\"Transparent\" (click)=\"cancelled.emit()\">{{ i18n.getTranslation(i18nKeys.CANCEL) }}</ui5-button>\n </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.edit-cards-dialog{padding:var(--Container-Spacing-Small, 16px) 0;margin:-1rem;min-width:300px}.edit-cards-dialog__header{display:flex;align-items:flex-start;justify-content:flex-start;width:100%;padding:.75rem 1rem}.edit-cards-dialog__list-item{display:flex;align-items:center;justify-content:space-between;width:100%}.edit-cards-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"] }]
|
|
1150
1253
|
}], ctorParameters: () => [], propDecorators: { availableCards: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableCards", required: false }] }], addedCardsIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "addedCardsIds", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], confirm: [{ type: i0.Output, args: ["confirm"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
|
|
1151
1254
|
|
|
1152
1255
|
class DashboardSection {
|
|
@@ -1167,7 +1270,7 @@ class DashboardSection {
|
|
|
1167
1270
|
removeSection = output();
|
|
1168
1271
|
removeCard = output();
|
|
1169
1272
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DashboardSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1170
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DashboardSection, isStandalone: true, selector: "mfp-dashboard-section", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeSection: "removeSection", removeCard: "removeCard" }, host: { properties: { "style.grid-column": "section().w === undefined || section().w === 12 ? \"1 / -1\" : \"span \" + section().w" } }, ngImport: i0, template: "<div\n class=\"section\"\n [class.section--edit]=\"editMode() && section().editable !== false\"\n>\n @if (editMode() && section().editable !== false) {\n <ui5-button\n class=\"section__remove\"\n design=\"Default\"\n icon=\"decline\"\n [accessibleName]=\"\n i18n.getTranslation(i18nKeys.REMOVE_SECTION) +\n ': ' +\n (section().title || section().id)\n \"\n (click)=\"removeSection.emit()\"\n />\n }\n @if (section().title) {\n <div class=\"section__header\">\n <span class=\"section__title\">{{ section().title }}</span>\n </div>\n }\n <div class=\"section__grid\" [style.--cols]=\"columns() ?? null\">\n @for (card of cards(); track card.id) {\n <mfp-dashboard-card\n [card]=\"card\"\n [editMode]=\"editMode() && section().editable !== false\"\n (removeCard)=\"removeCard.emit($any(card.id))\"\n />\n }\n </div>\n</div>\n", styles: [":host{display:block;min-width:0}.section{position:relative;display:flex;flex-direction:column;border:1px solid transparent;border-top:none;border-radius:0 0 .5rem .5rem;padding-top:1.25rem}.section--edit{border-color:var(--sapGroup_ContentBorderColor, #d9d9d9)}.section__remove{position:absolute;top:-.75rem;right:-.75rem;z-index:10;border-radius:50%!important;width:1.25rem!important;height:1.25rem!important;min-width:unset!important;padding:0!important;font-size:.625rem!important}.section__header{position:absolute;top:0;left:0;right:0;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none}.section__header:before,.section__header:after{content:\"\";flex:1;height:1px;background:transparent}.section__header:before{max-width:.75rem;flex:0 0 .75rem}.section--edit .section__header:before,.section--edit .section__header:after{background:var(--sapGroup_ContentBorderColor, #d9d9d9)}.section__title{font-size:1rem;font-weight:600;color:var(--sapTextColor, #fff);padding:0 .5rem;white-space:nowrap;pointer-events:all}.section__grid{display:grid;grid-auto-rows:var(--row-height, 10px);column-gap:var(--column-gap, 0px);row-gap:var(--row-gap, 0px);grid-template-columns:repeat(var(--cols, 14),1fr)}@container mfp-dashboard (max-width: 599px){.section__grid{grid-template-columns:repeat(var(--cols, 1),1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.section__grid{grid-template-columns:repeat(var(--cols, 8),1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.section__grid{grid-template-columns:repeat(var(--cols, 12),1fr)}}\n"], dependencies: [{ kind: "component", type: DashboardCard, selector: "mfp-dashboard-card", inputs: ["card", "editMode"], outputs: ["removeCard"] }, { 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"] }] });
|
|
1273
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DashboardSection, isStandalone: true, selector: "mfp-dashboard-section", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeSection: "removeSection", removeCard: "removeCard" }, host: { properties: { "style.grid-column": "section().w === undefined || section().w === 12 ? \"1 / -1\" : \"span \" + section().w" } }, ngImport: i0, template: "<div\n class=\"section\"\n [attr.data-testid]=\"'dashboard-section-' + section().id\"\n [class.section--edit]=\"editMode() && section().editable !== false\"\n>\n @if (editMode() && section().editable !== false) {\n <ui5-button\n class=\"section__remove\"\n design=\"Default\"\n icon=\"decline\"\n [attr.data-testid]=\"'dashboard-section-' + section().id + '-remove'\"\n [accessibleName]=\"\n i18n.getTranslation(i18nKeys.REMOVE_SECTION) +\n ': ' +\n (section().title || section().id)\n \"\n (click)=\"removeSection.emit()\"\n />\n }\n @if (section().title) {\n <div class=\"section__header\">\n <span class=\"section__title\" [attr.data-testid]=\"'dashboard-section-' + section().id + '-title'\">{{ section().title }}</span>\n </div>\n }\n <div class=\"section__grid\" [style.--cols]=\"columns() ?? null\">\n @for (card of cards(); track card.id) {\n <mfp-dashboard-card\n [card]=\"card\"\n [editMode]=\"editMode() && section().editable !== false\"\n (removeCard)=\"removeCard.emit($any(card.id))\"\n />\n }\n </div>\n</div>\n", styles: [":host{display:block;min-width:0}.section{position:relative;display:flex;flex-direction:column;border:1px solid transparent;border-top:none;border-radius:0 0 .5rem .5rem;padding-top:1.25rem}.section--edit{border-color:var(--sapGroup_ContentBorderColor, #d9d9d9)}.section__remove{position:absolute;top:-.75rem;right:-.75rem;z-index:10;border-radius:50%!important;width:1.25rem!important;height:1.25rem!important;min-width:unset!important;padding:0!important;font-size:.625rem!important}.section__header{position:absolute;top:0;left:0;right:0;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none}.section__header:before,.section__header:after{content:\"\";flex:1;height:1px;background:transparent}.section__header:before{max-width:.75rem;flex:0 0 .75rem}.section--edit .section__header:before,.section--edit .section__header:after{background:var(--sapGroup_ContentBorderColor, #d9d9d9)}.section__title{font-size:1rem;font-weight:600;color:var(--sapTextColor, #fff);padding:0 .5rem;white-space:nowrap;pointer-events:all}.section__grid{display:grid;grid-auto-rows:var(--row-height, 10px);column-gap:var(--column-gap, 0px);row-gap:var(--row-gap, 0px);grid-template-columns:repeat(var(--cols, 14),1fr)}@container mfp-dashboard (max-width: 599px){.section__grid{grid-template-columns:repeat(var(--cols, 1),1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.section__grid{grid-template-columns:repeat(var(--cols, 8),1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.section__grid{grid-template-columns:repeat(var(--cols, 12),1fr)}}\n"], dependencies: [{ kind: "component", type: DashboardCard, selector: "mfp-dashboard-card", inputs: ["card", "editMode"], outputs: ["removeCard"] }, { 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"] }] });
|
|
1171
1274
|
}
|
|
1172
1275
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DashboardSection, decorators: [{
|
|
1173
1276
|
type: Component,
|
|
@@ -1183,7 +1286,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
1183
1286
|
// cover 12 of 14 columns, leaving a dead 2-col gutter on the right and
|
|
1184
1287
|
// squeezing the cards inside it relative to the outer grid's units.
|
|
1185
1288
|
'[style.grid-column]': 'section().w === undefined || section().w === 12 ? "1 / -1" : "span " + section().w',
|
|
1186
|
-
}, template: "<div\n class=\"section\"\n [class.section--edit]=\"editMode() && section().editable !== false\"\n>\n @if (editMode() && section().editable !== false) {\n <ui5-button\n class=\"section__remove\"\n design=\"Default\"\n icon=\"decline\"\n [accessibleName]=\"\n i18n.getTranslation(i18nKeys.REMOVE_SECTION) +\n ': ' +\n (section().title || section().id)\n \"\n (click)=\"removeSection.emit()\"\n />\n }\n @if (section().title) {\n <div class=\"section__header\">\n <span class=\"section__title\">{{ section().title }}</span>\n </div>\n }\n <div class=\"section__grid\" [style.--cols]=\"columns() ?? null\">\n @for (card of cards(); track card.id) {\n <mfp-dashboard-card\n [card]=\"card\"\n [editMode]=\"editMode() && section().editable !== false\"\n (removeCard)=\"removeCard.emit($any(card.id))\"\n />\n }\n </div>\n</div>\n", styles: [":host{display:block;min-width:0}.section{position:relative;display:flex;flex-direction:column;border:1px solid transparent;border-top:none;border-radius:0 0 .5rem .5rem;padding-top:1.25rem}.section--edit{border-color:var(--sapGroup_ContentBorderColor, #d9d9d9)}.section__remove{position:absolute;top:-.75rem;right:-.75rem;z-index:10;border-radius:50%!important;width:1.25rem!important;height:1.25rem!important;min-width:unset!important;padding:0!important;font-size:.625rem!important}.section__header{position:absolute;top:0;left:0;right:0;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none}.section__header:before,.section__header:after{content:\"\";flex:1;height:1px;background:transparent}.section__header:before{max-width:.75rem;flex:0 0 .75rem}.section--edit .section__header:before,.section--edit .section__header:after{background:var(--sapGroup_ContentBorderColor, #d9d9d9)}.section__title{font-size:1rem;font-weight:600;color:var(--sapTextColor, #fff);padding:0 .5rem;white-space:nowrap;pointer-events:all}.section__grid{display:grid;grid-auto-rows:var(--row-height, 10px);column-gap:var(--column-gap, 0px);row-gap:var(--row-gap, 0px);grid-template-columns:repeat(var(--cols, 14),1fr)}@container mfp-dashboard (max-width: 599px){.section__grid{grid-template-columns:repeat(var(--cols, 1),1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.section__grid{grid-template-columns:repeat(var(--cols, 8),1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.section__grid{grid-template-columns:repeat(var(--cols, 12),1fr)}}\n"] }]
|
|
1289
|
+
}, template: "<div\n class=\"section\"\n [attr.data-testid]=\"'dashboard-section-' + section().id\"\n [class.section--edit]=\"editMode() && section().editable !== false\"\n>\n @if (editMode() && section().editable !== false) {\n <ui5-button\n class=\"section__remove\"\n design=\"Default\"\n icon=\"decline\"\n [attr.data-testid]=\"'dashboard-section-' + section().id + '-remove'\"\n [accessibleName]=\"\n i18n.getTranslation(i18nKeys.REMOVE_SECTION) +\n ': ' +\n (section().title || section().id)\n \"\n (click)=\"removeSection.emit()\"\n />\n }\n @if (section().title) {\n <div class=\"section__header\">\n <span class=\"section__title\" [attr.data-testid]=\"'dashboard-section-' + section().id + '-title'\">{{ section().title }}</span>\n </div>\n }\n <div class=\"section__grid\" [style.--cols]=\"columns() ?? null\">\n @for (card of cards(); track card.id) {\n <mfp-dashboard-card\n [card]=\"card\"\n [editMode]=\"editMode() && section().editable !== false\"\n (removeCard)=\"removeCard.emit($any(card.id))\"\n />\n }\n </div>\n</div>\n", styles: [":host{display:block;min-width:0}.section{position:relative;display:flex;flex-direction:column;border:1px solid transparent;border-top:none;border-radius:0 0 .5rem .5rem;padding-top:1.25rem}.section--edit{border-color:var(--sapGroup_ContentBorderColor, #d9d9d9)}.section__remove{position:absolute;top:-.75rem;right:-.75rem;z-index:10;border-radius:50%!important;width:1.25rem!important;height:1.25rem!important;min-width:unset!important;padding:0!important;font-size:.625rem!important}.section__header{position:absolute;top:0;left:0;right:0;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none}.section__header:before,.section__header:after{content:\"\";flex:1;height:1px;background:transparent}.section__header:before{max-width:.75rem;flex:0 0 .75rem}.section--edit .section__header:before,.section--edit .section__header:after{background:var(--sapGroup_ContentBorderColor, #d9d9d9)}.section__title{font-size:1rem;font-weight:600;color:var(--sapTextColor, #fff);padding:0 .5rem;white-space:nowrap;pointer-events:all}.section__grid{display:grid;grid-auto-rows:var(--row-height, 10px);column-gap:var(--column-gap, 0px);row-gap:var(--row-gap, 0px);grid-template-columns:repeat(var(--cols, 14),1fr)}@container mfp-dashboard (max-width: 599px){.section__grid{grid-template-columns:repeat(var(--cols, 1),1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.section__grid{grid-template-columns:repeat(var(--cols, 8),1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.section__grid{grid-template-columns:repeat(var(--cols, 12),1fr)}}\n"] }]
|
|
1187
1290
|
}], propDecorators: { section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: true }] }], cards: [{ type: i0.Input, args: [{ isSignal: true, alias: "cards", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], removeSection: [{ type: i0.Output, args: ["removeSection"] }], removeCard: [{ type: i0.Output, args: ["removeCard"] }] } });
|
|
1188
1291
|
|
|
1189
1292
|
/**
|
|
@@ -1204,11 +1307,11 @@ class UnsavedChangesDialog {
|
|
|
1204
1307
|
discard = output();
|
|
1205
1308
|
cancelled = output();
|
|
1206
1309
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UnsavedChangesDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1207
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UnsavedChangesDialog, isStandalone: true, selector: "mfp-unsaved-changes-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", discard: "discard", cancelled: "cancelled" }, ngImport: i0, template: "<ui5-dialog state=\"Critical\" [open]=\"open()\" (ui5BeforeClose)=\"cancelled.emit()\">\n <div class=\"unsaved-changes-dialog__header\" slot=\"header\">\n <ui5-title level=\"H5\">{{ i18n.getTranslation(i18nKeys.UNSAVED_CHANGES) }}</ui5-title>\n </div>\n <div class=\"unsaved-changes-dialog__body\">\n {{ i18n.getTranslation(i18nKeys.UNSAVED_NAV_BODY) }}\n </div>\n <div class=\"unsaved-changes-dialog__footer\" slot=\"footer\">\n <ui5-button design=\"Emphasized\" (click)=\"save.emit()\">{{ i18n.getTranslation(i18nKeys.SAVE) }}</ui5-button>\n <ui5-button design=\"Transparent\" (click)=\"discard.emit()\">{{ i18n.getTranslation(i18nKeys.DISCARD) }}</ui5-button>\n <ui5-button design=\"Transparent\" (click)=\"cancelled.emit()\">{{ i18n.getTranslation(i18nKeys.CANCEL) }}</ui5-button>\n </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.unsaved-changes-dialog__header{display:flex;align-items:center;width:100%;padding:.75rem 0}.unsaved-changes-dialog__body{padding:0 0 1rem;min-width:360px;max-width:32rem}.unsaved-changes-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"], dependencies: [{ 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: 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"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
1310
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UnsavedChangesDialog, isStandalone: true, selector: "mfp-unsaved-changes-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", discard: "discard", cancelled: "cancelled" }, ngImport: i0, template: "<ui5-dialog data-testid=\"dashboard-unsaved-changes-dialog\" state=\"Critical\" [open]=\"open()\" (ui5BeforeClose)=\"cancelled.emit()\">\n <div class=\"unsaved-changes-dialog__header\" slot=\"header\">\n <ui5-title level=\"H5\">{{ i18n.getTranslation(i18nKeys.UNSAVED_CHANGES) }}</ui5-title>\n </div>\n <div class=\"unsaved-changes-dialog__body\">\n {{ i18n.getTranslation(i18nKeys.UNSAVED_NAV_BODY) }}\n </div>\n <div class=\"unsaved-changes-dialog__footer\" slot=\"footer\">\n <ui5-button data-testid=\"dashboard-unsaved-changes-save-btn\" design=\"Emphasized\" (click)=\"save.emit()\">{{ i18n.getTranslation(i18nKeys.SAVE) }}</ui5-button>\n <ui5-button data-testid=\"dashboard-unsaved-changes-discard-btn\" design=\"Transparent\" (click)=\"discard.emit()\">{{ i18n.getTranslation(i18nKeys.DISCARD) }}</ui5-button>\n <ui5-button data-testid=\"dashboard-unsaved-changes-cancel-btn\" design=\"Transparent\" (click)=\"cancelled.emit()\">{{ i18n.getTranslation(i18nKeys.CANCEL) }}</ui5-button>\n </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.unsaved-changes-dialog__header{display:flex;align-items:center;width:100%;padding:.75rem 0}.unsaved-changes-dialog__body{padding:0 0 1rem;min-width:360px;max-width:32rem}.unsaved-changes-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"], dependencies: [{ 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: 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"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
|
|
1208
1311
|
}
|
|
1209
1312
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UnsavedChangesDialog, decorators: [{
|
|
1210
1313
|
type: Component,
|
|
1211
|
-
args: [{ selector: 'mfp-unsaved-changes-dialog', imports: [Button, Dialog, Title], encapsulation: ViewEncapsulation.ShadowDom, template: "<ui5-dialog state=\"Critical\" [open]=\"open()\" (ui5BeforeClose)=\"cancelled.emit()\">\n <div class=\"unsaved-changes-dialog__header\" slot=\"header\">\n <ui5-title level=\"H5\">{{ i18n.getTranslation(i18nKeys.UNSAVED_CHANGES) }}</ui5-title>\n </div>\n <div class=\"unsaved-changes-dialog__body\">\n {{ i18n.getTranslation(i18nKeys.UNSAVED_NAV_BODY) }}\n </div>\n <div class=\"unsaved-changes-dialog__footer\" slot=\"footer\">\n <ui5-button design=\"Emphasized\" (click)=\"save.emit()\">{{ i18n.getTranslation(i18nKeys.SAVE) }}</ui5-button>\n <ui5-button design=\"Transparent\" (click)=\"discard.emit()\">{{ i18n.getTranslation(i18nKeys.DISCARD) }}</ui5-button>\n <ui5-button design=\"Transparent\" (click)=\"cancelled.emit()\">{{ i18n.getTranslation(i18nKeys.CANCEL) }}</ui5-button>\n </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.unsaved-changes-dialog__header{display:flex;align-items:center;width:100%;padding:.75rem 0}.unsaved-changes-dialog__body{padding:0 0 1rem;min-width:360px;max-width:32rem}.unsaved-changes-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"] }]
|
|
1314
|
+
args: [{ selector: 'mfp-unsaved-changes-dialog', imports: [Button, Dialog, Title], encapsulation: ViewEncapsulation.ShadowDom, template: "<ui5-dialog data-testid=\"dashboard-unsaved-changes-dialog\" state=\"Critical\" [open]=\"open()\" (ui5BeforeClose)=\"cancelled.emit()\">\n <div class=\"unsaved-changes-dialog__header\" slot=\"header\">\n <ui5-title level=\"H5\">{{ i18n.getTranslation(i18nKeys.UNSAVED_CHANGES) }}</ui5-title>\n </div>\n <div class=\"unsaved-changes-dialog__body\">\n {{ i18n.getTranslation(i18nKeys.UNSAVED_NAV_BODY) }}\n </div>\n <div class=\"unsaved-changes-dialog__footer\" slot=\"footer\">\n <ui5-button data-testid=\"dashboard-unsaved-changes-save-btn\" design=\"Emphasized\" (click)=\"save.emit()\">{{ i18n.getTranslation(i18nKeys.SAVE) }}</ui5-button>\n <ui5-button data-testid=\"dashboard-unsaved-changes-discard-btn\" design=\"Transparent\" (click)=\"discard.emit()\">{{ i18n.getTranslation(i18nKeys.DISCARD) }}</ui5-button>\n <ui5-button data-testid=\"dashboard-unsaved-changes-cancel-btn\" design=\"Transparent\" (click)=\"cancelled.emit()\">{{ i18n.getTranslation(i18nKeys.CANCEL) }}</ui5-button>\n </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.unsaved-changes-dialog__header{display:flex;align-items:center;width:100%;padding:.75rem 0}.unsaved-changes-dialog__body{padding:0 0 1rem;min-width:360px;max-width:32rem}.unsaved-changes-dialog__footer{display:flex;justify-content:flex-end;align-items:center;width:100%;gap:.5rem}\n"] }]
|
|
1212
1315
|
}], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], save: [{ type: i0.Output, args: ["save"] }], discard: [{ type: i0.Output, args: ["discard"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
|
|
1213
1316
|
|
|
1214
1317
|
document.body.classList.add('ui5-content-density-compact');
|
|
@@ -1508,7 +1611,7 @@ class Dashboard {
|
|
|
1508
1611
|
});
|
|
1509
1612
|
}
|
|
1510
1613
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Dashboard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1511
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Dashboard, isStandalone: true, selector: "mfp-dashboard", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, availableCards: { classPropertyName: "availableCards", publicName: "availableCards", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sections: "sectionsChange", cards: "cardsChange", saved: "saved", actionButtonClick: "actionButtonClick", unsavedChangesChange: "unsavedChangesChange" }, host: { properties: { "style.background-image": "config().backgroundImageUrl ? \"url(\" + config().backgroundImageUrl + \")\" : null" } }, providers: [DashboardI18nService], viewQueries: [{ propertyName: "gridStackItems", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "addCardBtn", first: true, predicate: ["editCardsBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mfp-dashboard\">\n <div class=\"mfp-dashboard__topbar\">\n <div class=\"mfp-dashboard__topbar-row\">\n <div class=\"mfp-dashboard__header\">\n <div class=\"mfp-dashboard__title-row\">\n @if (config().title) {\n <ui5-title level=\"H3\" size=\"H3\" wrapping-type=\"Normal\">\n <span [innerHTML]=\"safeTitle()\"></span>\n </ui5-title>\n }\n @if (hasUnsavedChanges()) {\n <div class=\"mfp-dashboard__unsaved-changes\" role=\"status\">\n <ui5-icon\n class=\"mfp-dashboard__unsaved-changes-icon\"\n name=\"user-edit\"\n [accessibleName]=\"i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\"\n />\n <span class=\"mfp-dashboard__unsaved-changes-text\">{{\n i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\n }}</span>\n </div>\n }\n </div>\n @if (config().description) {\n <ui5-title level=\"H5\" size=\"H5\" wrapping-type=\"Normal\">\n <span\n class=\"mfp-dashboard__description\"\n [innerHTML]=\"safeDescription()\"\n ></span>\n </ui5-title>\n }\n </div>\n\n <div class=\"mfp-dashboard__toolbar\">\n @if (editMode()) {\n <ui5-button\n #editCardsBtn\n id=\"edit-cards-btn\"\n [accessibleName]=\"\n editCardsButton().text ||\n editCardsButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_CARDS)\n \"\n [design]=\"editCardsButton().design\"\n [icon]=\"editCardsButton().icon\"\n [tooltip]=\"editCardsButton().tooltip\"\n (click)=\"openCardPanel()\"\n >{{ editCardsButton().text }}</ui5-button\n >\n } @else if (compactToolbar()) {\n <ui5-button\n #menuBtn\n design=\"Transparent\"\n icon=\"menu2\"\n [accessibleName]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n [tooltip]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n (click)=\"toolbarMenuOpen.update((v) => !v)\"\n />\n <ui5-menu\n [open]=\"toolbarMenuOpen()\"\n [opener]=\"menuBtn.element\"\n (ui5Close)=\"toolbarMenuOpen.set(false)\"\n (ui5ItemClick)=\"\n onMenuItemClick(\n $any($event).detail.item.dataset['action'],\n $event\n )\n \"\n (ui5Open)=\"toolbarMenuOpen.set(true)\"\n >\n @if (config().editButtonFirst && config().editable) {\n <ui5-menu-item\n data-action=\"edit-view\"\n [icon]=\"editViewButton().icon\"\n [text]=\"\n editViewButton().text ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n />\n @if (customActions().length) {\n <ui5-menu-separator />\n }\n }\n @for (action of customActions(); track action.action) {\n <ui5-menu-item\n [attr.data-action]=\"action.action\"\n [icon]=\"action.icon ?? ''\"\n [text]=\"action.text ?? ''\"\n />\n }\n @if (!config().editButtonFirst && config().editable) {\n <ui5-menu-separator />\n <ui5-menu-item\n data-action=\"edit-view\"\n [icon]=\"editViewButton().icon\"\n [text]=\"\n editViewButton().text ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n />\n }\n </ui5-menu>\n } @else {\n @if (config().editButtonFirst && config().editable) {\n <ui5-button\n [accessibleName]=\"\n editViewButton().text ||\n editViewButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n [design]=\"editViewButton().design\"\n [icon]=\"editViewButton().icon\"\n [tooltip]=\"editViewButton().tooltip\"\n (click)=\"enterEditMode()\"\n >{{ editViewButton().text }}</ui5-button\n >\n }\n @for (action of customActions(); track action.action) {\n <ui5-button\n [accessibleName]=\"action.text || action.tooltip || action.action\"\n [design]=\"action.design ?? 'Default'\"\n [endIcon]=\"action?.endIcon\"\n [icon]=\"action.icon ?? ''\"\n [tooltip]=\"action.tooltip ?? ''\"\n (click)=\"\n actionButtonClick.emit({ event: $event, action: action })\n \"\n >{{ action.text }}</ui5-button\n >\n }\n @if (!config().editButtonFirst && config().editable) {\n <ui5-button\n [accessibleName]=\"\n editViewButton().text ||\n editViewButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n [design]=\"editViewButton().design\"\n [icon]=\"editViewButton().icon\"\n [tooltip]=\"editViewButton().tooltip\"\n (click)=\"enterEditMode()\"\n >{{ editViewButton().text }}</ui5-button\n >\n }\n }\n </div>\n </div>\n\n <div class=\"mfp-dashboard__subheader\">\n <ng-content select=\"[slot=dashboard-subheader]\" />\n </div>\n </div>\n\n <div class=\"mfp-sections-container\">\n @for (section of sections(); track section.id) {\n <mfp-dashboard-section\n [cards]=\"sectionCards()(section.id)\"\n [editMode]=\"editMode()\"\n [section]=\"section\"\n (removeCard)=\"removeCard($event)\"\n (removeSection)=\"removeSection(section.id)\"\n />\n }\n </div>\n\n <gridstack\n #grid\n [options]=\"gridOptions()\"\n (addedCB)=\"onGridChange($event)\"\n (changeCB)=\"onGridChange($event)\"\n (removedCB)=\"onGridChange($event)\"\n >\n @for (card of looseCards(); track card.id) {\n <gridstack-item [options]=\"card\">\n <mfp-dashboard-card\n [card]=\"card\"\n [editMode]=\"editMode()\"\n (removeCard)=\"removeCard($any(card.id))\"\n />\n </gridstack-item>\n }\n </gridstack>\n\n @if (editMode()) {\n <div class=\"mfp-dashboard__edit-bar\">\n <ui5-button design=\"Emphasized\" (click)=\"saveEdit()\">{{\n i18n.getTranslation(i18nKeys.SAVE)\n }}</ui5-button>\n <ui5-button design=\"Transparent\" (click)=\"cancelEdit()\">{{\n i18n.getTranslation(i18nKeys.CANCEL)\n }}</ui5-button>\n </div>\n }\n</div>\n\n<mfp-edit-cards-dialog\n [addedCardsIds]=\"addedCardsIds()\"\n [availableCards]=\"availableCards()\"\n [open]=\"cardDialogOpen()\"\n (cancelled)=\"closeCardPanel()\"\n (confirm)=\"onCardsEdited($event)\"\n/>\n\n<mfp-discard-changes-dialog\n [open]=\"discardDialogOpen()\"\n (cancelled)=\"cancelDiscard()\"\n (confirm)=\"confirmDiscard()\"\n/>\n\n<mfp-unsaved-changes-dialog\n [open]=\"unsavedNavDialogOpen()\"\n (cancelled)=\"onUnsavedNavCancel()\"\n (discard)=\"onUnsavedNavDiscard()\"\n (save)=\"onUnsavedNavSave()\"\n/>\n", styles: [".grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item{right:0}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,right,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,right .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,right 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item[gs-x=\"0\"]{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item[gs-x=\"0\"]{right:0}mfp-dashboard,mfp-wc-dashboard{display:block;flex:1;margin:0;padding:0;min-height:100%;background:var(--sapShellColor, #354a5e);background-size:100% auto;background-position:top center;background-repeat:no-repeat;background-attachment:local}.mfp-dashboard{padding:calc(var(--sapShell_Space_XL, 3rem) - 10px);container-type:inline-size;container-name:mfp-dashboard}.mfp-sections-container{display:grid;grid-auto-rows:auto;align-content:start;gap:1rem;grid-template-columns:repeat(14,1fr)}@container mfp-dashboard (max-width: 599px){.mfp-sections-container{grid-template-columns:repeat(1,1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.mfp-sections-container{grid-template-columns:repeat(8,1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.mfp-sections-container{grid-template-columns:repeat(12,1fr)}}.mfp-dashboard__topbar{grid-column:1/-1;align-self:start;display:flex;flex-direction:column;gap:1rem;padding-bottom:3rem;width:100%;min-width:0}.mfp-dashboard__topbar-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:0 10px}.mfp-dashboard__header{display:flex;flex-direction:column;gap:.25rem}.mfp-dashboard__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.mfp-dashboard__unsaved-changes{display:inline-flex;align-items:center;gap:.375rem}.mfp-dashboard__unsaved-changes-icon{width:16px;height:16px;color:var(--sapContent_MarkerIconColor)}.mfp-dashboard__unsaved-changes-text{color:var(--sapContent_LabelColor);text-shadow:0 0 2px var(--sapContent_ContrastTextShadow, #fff);font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 14px);font-style:normal;font-weight:400;line-height:normal}.mfp-dashboard__description{font-weight:400;font-family:var(--sapFontFamily)}.mfp-dashboard__description b,.mfp-dashboard__description strong{font-family:var(--sapFontBoldFamily)}.mfp-dashboard__toolbar{flex-shrink:0;display:flex;gap:.5rem}.mfp-dashboard__subheader{display:flex;align-items:center;gap:1rem}.mfp-dashboard__edit-bar{position:sticky;bottom:20px;left:16px;right:16px;z-index:1000;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 16px;background:var(--sapPageFooter_Background, white);border-radius:var(--sapElement_BorderCornerRadius, 12px);box-shadow:0 0 0 1px #2235487a,0 2px 8px #2235484d;box-sizing:border-box;overflow:hidden}@media screen and (min-width:0px)and (max-width:599px){.mfp-dashboard{padding:calc(var(--sapShell_Space_S, 1rem) - 10px)}}@media screen and (min-width:600px)and (max-width:1023px){.mfp-dashboard{padding:calc(var(--sapShell_Space_M, 2rem) - 10px)}}@media screen and (min-width:1024px)and (max-width:1439px){.mfp-dashboard{padding:calc(var(--sapShell_Space_L, 2rem) - 10px)}}.grid-stack.grid-stack-dragging,.grid-stack.grid-stack-dragging *{cursor:grabbing!important}.grid-stack-item>.ui-resizable-handle{background-image:none!important}\n"], dependencies: [{ kind: "component", type: GridstackComponent, selector: "gridstack", inputs: ["options", "isEmpty"], outputs: ["addedCB", "changeCB", "disableCB", "dragCB", "dragStartCB", "dragStopCB", "droppedCB", "enableCB", "removedCB", "resizeCB", "resizeStartCB", "resizeStopCB"] }, { kind: "component", type: GridstackItemComponent, selector: "gridstack-item", inputs: ["options"] }, { kind: "component", type: DiscardChangesDialog, selector: "mfp-discard-changes-dialog", inputs: ["open"], outputs: ["confirm", "cancelled"] }, { kind: "component", type: EditCardsDialog, selector: "mfp-edit-cards-dialog", inputs: ["availableCards", "addedCardsIds", "open"], outputs: ["confirm", "cancelled"] }, { kind: "component", type: UnsavedChangesDialog, selector: "mfp-unsaved-changes-dialog", inputs: ["open"], outputs: ["save", "discard", "cancelled"] }, { kind: "component", type: DashboardSection, selector: "mfp-dashboard-section", inputs: ["section", "cards", "columns", "editMode"], outputs: ["removeSection", "removeCard"] }, { kind: "component", type: DashboardCard, selector: "mfp-dashboard-card", inputs: ["card", "editMode"], outputs: ["removeCard"] }, { 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: Menu, selector: "ui5-menu, [ui5-menu]", inputs: ["headerText", "open", "placement", "horizontalAlign", "loading", "loadingDelay", "opener"], outputs: ["ui5ItemClick", "ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close"], exportAs: ["ui5Menu"] }, { kind: "component", type: MenuItem, selector: "ui5-menu-item, [ui5-menu-item]", inputs: ["text", "additionalText", "icon", "disabled", "loading", "loadingDelay", "accessibleName", "tooltip", "checked", "accessibilityAttributes", "type", "navigated", "highlight", "selected"], outputs: ["ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close", "ui5Check", "ui5DetailClick"], exportAs: ["ui5MenuItem"] }, { kind: "component", type: MenuSeparator, selector: "ui5-menu-separator, [ui5-menu-separator]", exportAs: ["ui5MenuSeparator"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1614
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Dashboard, isStandalone: true, selector: "mfp-dashboard", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null }, availableCards: { classPropertyName: "availableCards", publicName: "availableCards", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sections: "sectionsChange", cards: "cardsChange", saved: "saved", actionButtonClick: "actionButtonClick", unsavedChangesChange: "unsavedChangesChange" }, host: { properties: { "style.background-image": "config().backgroundImageUrl ? \"url(\" + config().backgroundImageUrl + \")\" : null" } }, providers: [DashboardI18nService], viewQueries: [{ propertyName: "gridStackItems", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "addCardBtn", first: true, predicate: ["editCardsBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mfp-dashboard\" data-testid=\"dashboard\">\n <div class=\"mfp-dashboard__topbar\">\n <div class=\"mfp-dashboard__topbar-row\">\n <div class=\"mfp-dashboard__header\">\n <div class=\"mfp-dashboard__title-row\">\n @if (config().title) {\n <ui5-title level=\"H3\" size=\"H3\" wrapping-type=\"Normal\" data-testid=\"dashboard-title\">\n <span [innerHTML]=\"safeTitle()\"></span>\n </ui5-title>\n }\n @if (hasUnsavedChanges()) {\n <div class=\"mfp-dashboard__unsaved-changes\" role=\"status\">\n <ui5-icon\n class=\"mfp-dashboard__unsaved-changes-icon\"\n name=\"user-edit\"\n [accessibleName]=\"i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\"\n />\n <span class=\"mfp-dashboard__unsaved-changes-text\">{{\n i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\n }}</span>\n </div>\n }\n </div>\n @if (config().description) {\n <ui5-title level=\"H5\" size=\"H5\" wrapping-type=\"Normal\" data-testid=\"dashboard-description\">\n <span\n class=\"mfp-dashboard__description\"\n [innerHTML]=\"safeDescription()\"\n ></span>\n </ui5-title>\n }\n </div>\n\n <div class=\"mfp-dashboard__toolbar\">\n @if (editMode()) {\n <ui5-button\n #editCardsBtn\n id=\"edit-cards-btn\"\n data-testid=\"dashboard-edit-cards-btn\"\n [accessibleName]=\"\n editCardsButton().text ||\n editCardsButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_CARDS)\n \"\n [design]=\"editCardsButton().design\"\n [icon]=\"editCardsButton().icon\"\n [tooltip]=\"editCardsButton().tooltip\"\n (click)=\"openCardPanel()\"\n >{{ editCardsButton().text }}</ui5-button\n >\n } @else if (compactToolbar()) {\n <ui5-button\n #menuBtn\n data-testid=\"dashboard-toolbar-menu-btn\"\n design=\"Transparent\"\n icon=\"menu2\"\n [accessibleName]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n [tooltip]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n (click)=\"toolbarMenuOpen.update((v) => !v)\"\n />\n <ui5-menu\n data-testid=\"dashboard-toolbar-menu\"\n [open]=\"toolbarMenuOpen()\"\n [opener]=\"menuBtn.element\"\n (ui5Close)=\"toolbarMenuOpen.set(false)\"\n (ui5ItemClick)=\"\n onMenuItemClick(\n $any($event).detail.item.dataset['action'],\n $event\n )\n \"\n (ui5Open)=\"toolbarMenuOpen.set(true)\"\n >\n @if (config().editButtonFirst && config().editable) {\n <ui5-menu-item\n data-action=\"edit-view\"\n data-testid=\"dashboard-action-edit-view\"\n [icon]=\"editViewButton().icon\"\n [text]=\"\n editViewButton().text ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n />\n @if (customActions().length) {\n <ui5-menu-separator />\n }\n }\n @for (action of customActions(); track action.action) {\n <ui5-menu-item\n [attr.data-action]=\"action.action\"\n [attr.data-testid]=\"'dashboard-action-' + action.action\"\n [icon]=\"action.icon ?? ''\"\n [text]=\"action.text ?? ''\"\n />\n }\n @if (!config().editButtonFirst && config().editable) {\n <ui5-menu-separator />\n <ui5-menu-item\n data-action=\"edit-view\"\n data-testid=\"dashboard-action-edit-view\"\n [icon]=\"editViewButton().icon\"\n [text]=\"\n editViewButton().text ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n />\n }\n </ui5-menu>\n } @else {\n @if (config().editButtonFirst && config().editable) {\n <ui5-button\n data-testid=\"dashboard-edit-view-btn\"\n [accessibleName]=\"\n editViewButton().text ||\n editViewButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n [design]=\"editViewButton().design\"\n [icon]=\"editViewButton().icon\"\n [tooltip]=\"editViewButton().tooltip\"\n (click)=\"enterEditMode()\"\n >{{ editViewButton().text }}</ui5-button\n >\n }\n @for (action of customActions(); track action.action) {\n <ui5-button\n [attr.data-testid]=\"'dashboard-action-' + action.action\"\n [accessibleName]=\"action.text || action.tooltip || action.action\"\n [design]=\"action.design ?? 'Default'\"\n [endIcon]=\"action?.endIcon\"\n [icon]=\"action.icon ?? ''\"\n [tooltip]=\"action.tooltip ?? ''\"\n (click)=\"\n actionButtonClick.emit({ event: $event, action: action })\n \"\n >{{ action.text }}</ui5-button\n >\n }\n @if (!config().editButtonFirst && config().editable) {\n <ui5-button\n data-testid=\"dashboard-edit-view-btn\"\n [accessibleName]=\"\n editViewButton().text ||\n editViewButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n [design]=\"editViewButton().design\"\n [icon]=\"editViewButton().icon\"\n [tooltip]=\"editViewButton().tooltip\"\n (click)=\"enterEditMode()\"\n >{{ editViewButton().text }}</ui5-button\n >\n }\n }\n </div>\n </div>\n\n <div class=\"mfp-dashboard__subheader\">\n <ng-content select=\"[slot=dashboard-subheader]\" />\n </div>\n </div>\n\n <div class=\"mfp-sections-container\">\n @for (section of sections(); track section.id) {\n <mfp-dashboard-section\n [cards]=\"sectionCards()(section.id)\"\n [editMode]=\"editMode()\"\n [section]=\"section\"\n (removeCard)=\"removeCard($event)\"\n (removeSection)=\"removeSection(section.id)\"\n />\n }\n </div>\n\n <gridstack\n #grid\n data-testid=\"dashboard-grid\"\n [options]=\"gridOptions()\"\n (addedCB)=\"onGridChange($event)\"\n (changeCB)=\"onGridChange($event)\"\n (removedCB)=\"onGridChange($event)\"\n >\n @for (card of looseCards(); track card.id) {\n <gridstack-item [options]=\"card\">\n <mfp-dashboard-card\n [card]=\"card\"\n [editMode]=\"editMode()\"\n (removeCard)=\"removeCard($any(card.id))\"\n />\n </gridstack-item>\n }\n </gridstack>\n\n @if (editMode()) {\n <div class=\"mfp-dashboard__edit-bar\">\n <ui5-button data-testid=\"dashboard-save-btn\" design=\"Emphasized\" (click)=\"saveEdit()\">{{\n i18n.getTranslation(i18nKeys.SAVE)\n }}</ui5-button>\n <ui5-button data-testid=\"dashboard-cancel-btn\" design=\"Transparent\" (click)=\"cancelEdit()\">{{\n i18n.getTranslation(i18nKeys.CANCEL)\n }}</ui5-button>\n </div>\n }\n</div>\n\n<mfp-edit-cards-dialog\n [addedCardsIds]=\"addedCardsIds()\"\n [availableCards]=\"availableCards()\"\n [open]=\"cardDialogOpen()\"\n (cancelled)=\"closeCardPanel()\"\n (confirm)=\"onCardsEdited($event)\"\n/>\n\n<mfp-discard-changes-dialog\n [open]=\"discardDialogOpen()\"\n (cancelled)=\"cancelDiscard()\"\n (confirm)=\"confirmDiscard()\"\n/>\n\n<mfp-unsaved-changes-dialog\n [open]=\"unsavedNavDialogOpen()\"\n (cancelled)=\"onUnsavedNavCancel()\"\n (discard)=\"onUnsavedNavDiscard()\"\n (save)=\"onUnsavedNavSave()\"\n/>\n", styles: [".grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item{right:0}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,right,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,right .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,right 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item[gs-x=\"0\"]{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item[gs-x=\"0\"]{right:0}mfp-dashboard,mfp-wc-dashboard{display:block;flex:1;margin:0;padding:0;min-height:100%;background:var(--sapShellColor, #354a5e);background-size:100% auto;background-position:top center;background-repeat:no-repeat;background-attachment:local}.mfp-dashboard{padding:calc(var(--sapShell_Space_XL, 3rem) - 10px);container-type:inline-size;container-name:mfp-dashboard}.mfp-sections-container{display:grid;grid-auto-rows:auto;align-content:start;gap:1rem;grid-template-columns:repeat(14,1fr)}@container mfp-dashboard (max-width: 599px){.mfp-sections-container{grid-template-columns:repeat(1,1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.mfp-sections-container{grid-template-columns:repeat(8,1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.mfp-sections-container{grid-template-columns:repeat(12,1fr)}}.mfp-dashboard__topbar{grid-column:1/-1;align-self:start;display:flex;flex-direction:column;gap:1rem;padding-bottom:3rem;width:100%;min-width:0}.mfp-dashboard__topbar-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:0 10px}.mfp-dashboard__header{display:flex;flex-direction:column;gap:.25rem}.mfp-dashboard__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.mfp-dashboard__unsaved-changes{display:inline-flex;align-items:center;gap:.375rem}.mfp-dashboard__unsaved-changes-icon{width:16px;height:16px;color:var(--sapContent_MarkerIconColor)}.mfp-dashboard__unsaved-changes-text{color:var(--sapContent_LabelColor);text-shadow:0 0 2px var(--sapContent_ContrastTextShadow, #fff);font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 14px);font-style:normal;font-weight:400;line-height:normal}.mfp-dashboard__description{font-weight:400;font-family:var(--sapFontFamily)}.mfp-dashboard__description b,.mfp-dashboard__description strong{font-family:var(--sapFontBoldFamily)}.mfp-dashboard__toolbar{flex-shrink:0;display:flex;gap:.5rem}.mfp-dashboard__subheader{display:flex;align-items:center;gap:1rem}.mfp-dashboard__edit-bar{position:sticky;bottom:20px;left:16px;right:16px;z-index:1000;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 16px;background:var(--sapPageFooter_Background, white);border-radius:var(--sapElement_BorderCornerRadius, 12px);box-shadow:0 0 0 1px #2235487a,0 2px 8px #2235484d;box-sizing:border-box;overflow:hidden}@media screen and (min-width:0px)and (max-width:599px){.mfp-dashboard{padding:calc(var(--sapShell_Space_S, 1rem) - 10px)}}@media screen and (min-width:600px)and (max-width:1023px){.mfp-dashboard{padding:calc(var(--sapShell_Space_M, 2rem) - 10px)}}@media screen and (min-width:1024px)and (max-width:1439px){.mfp-dashboard{padding:calc(var(--sapShell_Space_L, 2rem) - 10px)}}.grid-stack.grid-stack-dragging,.grid-stack.grid-stack-dragging *{cursor:grabbing!important}.grid-stack-item>.ui-resizable-handle{background-image:none!important}\n"], dependencies: [{ kind: "component", type: GridstackComponent, selector: "gridstack", inputs: ["options", "isEmpty"], outputs: ["addedCB", "changeCB", "disableCB", "dragCB", "dragStartCB", "dragStopCB", "droppedCB", "enableCB", "removedCB", "resizeCB", "resizeStartCB", "resizeStopCB"] }, { kind: "component", type: GridstackItemComponent, selector: "gridstack-item", inputs: ["options"] }, { kind: "component", type: DiscardChangesDialog, selector: "mfp-discard-changes-dialog", inputs: ["open"], outputs: ["confirm", "cancelled"] }, { kind: "component", type: EditCardsDialog, selector: "mfp-edit-cards-dialog", inputs: ["availableCards", "addedCardsIds", "open"], outputs: ["confirm", "cancelled"] }, { kind: "component", type: UnsavedChangesDialog, selector: "mfp-unsaved-changes-dialog", inputs: ["open"], outputs: ["save", "discard", "cancelled"] }, { kind: "component", type: DashboardSection, selector: "mfp-dashboard-section", inputs: ["section", "cards", "columns", "editMode"], outputs: ["removeSection", "removeCard"] }, { kind: "component", type: DashboardCard, selector: "mfp-dashboard-card", inputs: ["card", "editMode"], outputs: ["removeCard"] }, { 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: Menu, selector: "ui5-menu, [ui5-menu]", inputs: ["headerText", "open", "placement", "horizontalAlign", "loading", "loadingDelay", "opener"], outputs: ["ui5ItemClick", "ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close"], exportAs: ["ui5Menu"] }, { kind: "component", type: MenuItem, selector: "ui5-menu-item, [ui5-menu-item]", inputs: ["text", "additionalText", "icon", "disabled", "loading", "loadingDelay", "accessibleName", "tooltip", "checked", "accessibilityAttributes", "type", "navigated", "highlight", "selected"], outputs: ["ui5BeforeOpen", "ui5Open", "ui5BeforeClose", "ui5Close", "ui5Check", "ui5DetailClick"], exportAs: ["ui5MenuItem"] }, { kind: "component", type: MenuSeparator, selector: "ui5-menu-separator, [ui5-menu-separator]", exportAs: ["ui5MenuSeparator"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1512
1615
|
}
|
|
1513
1616
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Dashboard, decorators: [{
|
|
1514
1617
|
type: Component,
|
|
@@ -1528,7 +1631,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
|
|
|
1528
1631
|
Title,
|
|
1529
1632
|
], providers: [DashboardI18nService], encapsulation: ViewEncapsulation.None, host: {
|
|
1530
1633
|
'[style.background-image]': 'config().backgroundImageUrl ? "url(" + config().backgroundImageUrl + ")" : null',
|
|
1531
|
-
}, template: "<div class=\"mfp-dashboard\">\n <div class=\"mfp-dashboard__topbar\">\n <div class=\"mfp-dashboard__topbar-row\">\n <div class=\"mfp-dashboard__header\">\n <div class=\"mfp-dashboard__title-row\">\n @if (config().title) {\n <ui5-title level=\"H3\" size=\"H3\" wrapping-type=\"Normal\">\n <span [innerHTML]=\"safeTitle()\"></span>\n </ui5-title>\n }\n @if (hasUnsavedChanges()) {\n <div class=\"mfp-dashboard__unsaved-changes\" role=\"status\">\n <ui5-icon\n class=\"mfp-dashboard__unsaved-changes-icon\"\n name=\"user-edit\"\n [accessibleName]=\"i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\"\n />\n <span class=\"mfp-dashboard__unsaved-changes-text\">{{\n i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\n }}</span>\n </div>\n }\n </div>\n @if (config().description) {\n <ui5-title level=\"H5\" size=\"H5\" wrapping-type=\"Normal\">\n <span\n class=\"mfp-dashboard__description\"\n [innerHTML]=\"safeDescription()\"\n ></span>\n </ui5-title>\n }\n </div>\n\n <div class=\"mfp-dashboard__toolbar\">\n @if (editMode()) {\n <ui5-button\n #editCardsBtn\n id=\"edit-cards-btn\"\n [accessibleName]=\"\n editCardsButton().text ||\n editCardsButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_CARDS)\n \"\n [design]=\"editCardsButton().design\"\n [icon]=\"editCardsButton().icon\"\n [tooltip]=\"editCardsButton().tooltip\"\n (click)=\"openCardPanel()\"\n >{{ editCardsButton().text }}</ui5-button\n >\n } @else if (compactToolbar()) {\n <ui5-button\n #menuBtn\n design=\"Transparent\"\n icon=\"menu2\"\n [accessibleName]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n [tooltip]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n (click)=\"toolbarMenuOpen.update((v) => !v)\"\n />\n <ui5-menu\n [open]=\"toolbarMenuOpen()\"\n [opener]=\"menuBtn.element\"\n (ui5Close)=\"toolbarMenuOpen.set(false)\"\n (ui5ItemClick)=\"\n onMenuItemClick(\n $any($event).detail.item.dataset['action'],\n $event\n )\n \"\n (ui5Open)=\"toolbarMenuOpen.set(true)\"\n >\n @if (config().editButtonFirst && config().editable) {\n <ui5-menu-item\n data-action=\"edit-view\"\n [icon]=\"editViewButton().icon\"\n [text]=\"\n editViewButton().text ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n />\n @if (customActions().length) {\n <ui5-menu-separator />\n }\n }\n @for (action of customActions(); track action.action) {\n <ui5-menu-item\n [attr.data-action]=\"action.action\"\n [icon]=\"action.icon ?? ''\"\n [text]=\"action.text ?? ''\"\n />\n }\n @if (!config().editButtonFirst && config().editable) {\n <ui5-menu-separator />\n <ui5-menu-item\n data-action=\"edit-view\"\n [icon]=\"editViewButton().icon\"\n [text]=\"\n editViewButton().text ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n />\n }\n </ui5-menu>\n } @else {\n @if (config().editButtonFirst && config().editable) {\n <ui5-button\n [accessibleName]=\"\n editViewButton().text ||\n editViewButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n [design]=\"editViewButton().design\"\n [icon]=\"editViewButton().icon\"\n [tooltip]=\"editViewButton().tooltip\"\n (click)=\"enterEditMode()\"\n >{{ editViewButton().text }}</ui5-button\n >\n }\n @for (action of customActions(); track action.action) {\n <ui5-button\n [accessibleName]=\"action.text || action.tooltip || action.action\"\n [design]=\"action.design ?? 'Default'\"\n [endIcon]=\"action?.endIcon\"\n [icon]=\"action.icon ?? ''\"\n [tooltip]=\"action.tooltip ?? ''\"\n (click)=\"\n actionButtonClick.emit({ event: $event, action: action })\n \"\n >{{ action.text }}</ui5-button\n >\n }\n @if (!config().editButtonFirst && config().editable) {\n <ui5-button\n [accessibleName]=\"\n editViewButton().text ||\n editViewButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n [design]=\"editViewButton().design\"\n [icon]=\"editViewButton().icon\"\n [tooltip]=\"editViewButton().tooltip\"\n (click)=\"enterEditMode()\"\n >{{ editViewButton().text }}</ui5-button\n >\n }\n }\n </div>\n </div>\n\n <div class=\"mfp-dashboard__subheader\">\n <ng-content select=\"[slot=dashboard-subheader]\" />\n </div>\n </div>\n\n <div class=\"mfp-sections-container\">\n @for (section of sections(); track section.id) {\n <mfp-dashboard-section\n [cards]=\"sectionCards()(section.id)\"\n [editMode]=\"editMode()\"\n [section]=\"section\"\n (removeCard)=\"removeCard($event)\"\n (removeSection)=\"removeSection(section.id)\"\n />\n }\n </div>\n\n <gridstack\n #grid\n [options]=\"gridOptions()\"\n (addedCB)=\"onGridChange($event)\"\n (changeCB)=\"onGridChange($event)\"\n (removedCB)=\"onGridChange($event)\"\n >\n @for (card of looseCards(); track card.id) {\n <gridstack-item [options]=\"card\">\n <mfp-dashboard-card\n [card]=\"card\"\n [editMode]=\"editMode()\"\n (removeCard)=\"removeCard($any(card.id))\"\n />\n </gridstack-item>\n }\n </gridstack>\n\n @if (editMode()) {\n <div class=\"mfp-dashboard__edit-bar\">\n <ui5-button design=\"Emphasized\" (click)=\"saveEdit()\">{{\n i18n.getTranslation(i18nKeys.SAVE)\n }}</ui5-button>\n <ui5-button design=\"Transparent\" (click)=\"cancelEdit()\">{{\n i18n.getTranslation(i18nKeys.CANCEL)\n }}</ui5-button>\n </div>\n }\n</div>\n\n<mfp-edit-cards-dialog\n [addedCardsIds]=\"addedCardsIds()\"\n [availableCards]=\"availableCards()\"\n [open]=\"cardDialogOpen()\"\n (cancelled)=\"closeCardPanel()\"\n (confirm)=\"onCardsEdited($event)\"\n/>\n\n<mfp-discard-changes-dialog\n [open]=\"discardDialogOpen()\"\n (cancelled)=\"cancelDiscard()\"\n (confirm)=\"confirmDiscard()\"\n/>\n\n<mfp-unsaved-changes-dialog\n [open]=\"unsavedNavDialogOpen()\"\n (cancelled)=\"onUnsavedNavCancel()\"\n (discard)=\"onUnsavedNavDiscard()\"\n (save)=\"onUnsavedNavSave()\"\n/>\n", styles: [".grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item{right:0}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,right,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,right .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,right 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item[gs-x=\"0\"]{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item[gs-x=\"0\"]{right:0}mfp-dashboard,mfp-wc-dashboard{display:block;flex:1;margin:0;padding:0;min-height:100%;background:var(--sapShellColor, #354a5e);background-size:100% auto;background-position:top center;background-repeat:no-repeat;background-attachment:local}.mfp-dashboard{padding:calc(var(--sapShell_Space_XL, 3rem) - 10px);container-type:inline-size;container-name:mfp-dashboard}.mfp-sections-container{display:grid;grid-auto-rows:auto;align-content:start;gap:1rem;grid-template-columns:repeat(14,1fr)}@container mfp-dashboard (max-width: 599px){.mfp-sections-container{grid-template-columns:repeat(1,1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.mfp-sections-container{grid-template-columns:repeat(8,1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.mfp-sections-container{grid-template-columns:repeat(12,1fr)}}.mfp-dashboard__topbar{grid-column:1/-1;align-self:start;display:flex;flex-direction:column;gap:1rem;padding-bottom:3rem;width:100%;min-width:0}.mfp-dashboard__topbar-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:0 10px}.mfp-dashboard__header{display:flex;flex-direction:column;gap:.25rem}.mfp-dashboard__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.mfp-dashboard__unsaved-changes{display:inline-flex;align-items:center;gap:.375rem}.mfp-dashboard__unsaved-changes-icon{width:16px;height:16px;color:var(--sapContent_MarkerIconColor)}.mfp-dashboard__unsaved-changes-text{color:var(--sapContent_LabelColor);text-shadow:0 0 2px var(--sapContent_ContrastTextShadow, #fff);font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 14px);font-style:normal;font-weight:400;line-height:normal}.mfp-dashboard__description{font-weight:400;font-family:var(--sapFontFamily)}.mfp-dashboard__description b,.mfp-dashboard__description strong{font-family:var(--sapFontBoldFamily)}.mfp-dashboard__toolbar{flex-shrink:0;display:flex;gap:.5rem}.mfp-dashboard__subheader{display:flex;align-items:center;gap:1rem}.mfp-dashboard__edit-bar{position:sticky;bottom:20px;left:16px;right:16px;z-index:1000;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 16px;background:var(--sapPageFooter_Background, white);border-radius:var(--sapElement_BorderCornerRadius, 12px);box-shadow:0 0 0 1px #2235487a,0 2px 8px #2235484d;box-sizing:border-box;overflow:hidden}@media screen and (min-width:0px)and (max-width:599px){.mfp-dashboard{padding:calc(var(--sapShell_Space_S, 1rem) - 10px)}}@media screen and (min-width:600px)and (max-width:1023px){.mfp-dashboard{padding:calc(var(--sapShell_Space_M, 2rem) - 10px)}}@media screen and (min-width:1024px)and (max-width:1439px){.mfp-dashboard{padding:calc(var(--sapShell_Space_L, 2rem) - 10px)}}.grid-stack.grid-stack-dragging,.grid-stack.grid-stack-dragging *{cursor:grabbing!important}.grid-stack-item>.ui-resizable-handle{background-image:none!important}\n"] }]
|
|
1634
|
+
}, template: "<div class=\"mfp-dashboard\" data-testid=\"dashboard\">\n <div class=\"mfp-dashboard__topbar\">\n <div class=\"mfp-dashboard__topbar-row\">\n <div class=\"mfp-dashboard__header\">\n <div class=\"mfp-dashboard__title-row\">\n @if (config().title) {\n <ui5-title level=\"H3\" size=\"H3\" wrapping-type=\"Normal\" data-testid=\"dashboard-title\">\n <span [innerHTML]=\"safeTitle()\"></span>\n </ui5-title>\n }\n @if (hasUnsavedChanges()) {\n <div class=\"mfp-dashboard__unsaved-changes\" role=\"status\">\n <ui5-icon\n class=\"mfp-dashboard__unsaved-changes-icon\"\n name=\"user-edit\"\n [accessibleName]=\"i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\"\n />\n <span class=\"mfp-dashboard__unsaved-changes-text\">{{\n i18n.getTranslation(i18nKeys.UNSAVED_CHANGES)\n }}</span>\n </div>\n }\n </div>\n @if (config().description) {\n <ui5-title level=\"H5\" size=\"H5\" wrapping-type=\"Normal\" data-testid=\"dashboard-description\">\n <span\n class=\"mfp-dashboard__description\"\n [innerHTML]=\"safeDescription()\"\n ></span>\n </ui5-title>\n }\n </div>\n\n <div class=\"mfp-dashboard__toolbar\">\n @if (editMode()) {\n <ui5-button\n #editCardsBtn\n id=\"edit-cards-btn\"\n data-testid=\"dashboard-edit-cards-btn\"\n [accessibleName]=\"\n editCardsButton().text ||\n editCardsButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_CARDS)\n \"\n [design]=\"editCardsButton().design\"\n [icon]=\"editCardsButton().icon\"\n [tooltip]=\"editCardsButton().tooltip\"\n (click)=\"openCardPanel()\"\n >{{ editCardsButton().text }}</ui5-button\n >\n } @else if (compactToolbar()) {\n <ui5-button\n #menuBtn\n data-testid=\"dashboard-toolbar-menu-btn\"\n design=\"Transparent\"\n icon=\"menu2\"\n [accessibleName]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n [tooltip]=\"i18n.getTranslation(i18nKeys.ACTIONS)\"\n (click)=\"toolbarMenuOpen.update((v) => !v)\"\n />\n <ui5-menu\n data-testid=\"dashboard-toolbar-menu\"\n [open]=\"toolbarMenuOpen()\"\n [opener]=\"menuBtn.element\"\n (ui5Close)=\"toolbarMenuOpen.set(false)\"\n (ui5ItemClick)=\"\n onMenuItemClick(\n $any($event).detail.item.dataset['action'],\n $event\n )\n \"\n (ui5Open)=\"toolbarMenuOpen.set(true)\"\n >\n @if (config().editButtonFirst && config().editable) {\n <ui5-menu-item\n data-action=\"edit-view\"\n data-testid=\"dashboard-action-edit-view\"\n [icon]=\"editViewButton().icon\"\n [text]=\"\n editViewButton().text ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n />\n @if (customActions().length) {\n <ui5-menu-separator />\n }\n }\n @for (action of customActions(); track action.action) {\n <ui5-menu-item\n [attr.data-action]=\"action.action\"\n [attr.data-testid]=\"'dashboard-action-' + action.action\"\n [icon]=\"action.icon ?? ''\"\n [text]=\"action.text ?? ''\"\n />\n }\n @if (!config().editButtonFirst && config().editable) {\n <ui5-menu-separator />\n <ui5-menu-item\n data-action=\"edit-view\"\n data-testid=\"dashboard-action-edit-view\"\n [icon]=\"editViewButton().icon\"\n [text]=\"\n editViewButton().text ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n />\n }\n </ui5-menu>\n } @else {\n @if (config().editButtonFirst && config().editable) {\n <ui5-button\n data-testid=\"dashboard-edit-view-btn\"\n [accessibleName]=\"\n editViewButton().text ||\n editViewButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n [design]=\"editViewButton().design\"\n [icon]=\"editViewButton().icon\"\n [tooltip]=\"editViewButton().tooltip\"\n (click)=\"enterEditMode()\"\n >{{ editViewButton().text }}</ui5-button\n >\n }\n @for (action of customActions(); track action.action) {\n <ui5-button\n [attr.data-testid]=\"'dashboard-action-' + action.action\"\n [accessibleName]=\"action.text || action.tooltip || action.action\"\n [design]=\"action.design ?? 'Default'\"\n [endIcon]=\"action?.endIcon\"\n [icon]=\"action.icon ?? ''\"\n [tooltip]=\"action.tooltip ?? ''\"\n (click)=\"\n actionButtonClick.emit({ event: $event, action: action })\n \"\n >{{ action.text }}</ui5-button\n >\n }\n @if (!config().editButtonFirst && config().editable) {\n <ui5-button\n data-testid=\"dashboard-edit-view-btn\"\n [accessibleName]=\"\n editViewButton().text ||\n editViewButton().tooltip ||\n i18n.getTranslation(i18nKeys.EDIT_VIEW)\n \"\n [design]=\"editViewButton().design\"\n [icon]=\"editViewButton().icon\"\n [tooltip]=\"editViewButton().tooltip\"\n (click)=\"enterEditMode()\"\n >{{ editViewButton().text }}</ui5-button\n >\n }\n }\n </div>\n </div>\n\n <div class=\"mfp-dashboard__subheader\">\n <ng-content select=\"[slot=dashboard-subheader]\" />\n </div>\n </div>\n\n <div class=\"mfp-sections-container\">\n @for (section of sections(); track section.id) {\n <mfp-dashboard-section\n [cards]=\"sectionCards()(section.id)\"\n [editMode]=\"editMode()\"\n [section]=\"section\"\n (removeCard)=\"removeCard($event)\"\n (removeSection)=\"removeSection(section.id)\"\n />\n }\n </div>\n\n <gridstack\n #grid\n data-testid=\"dashboard-grid\"\n [options]=\"gridOptions()\"\n (addedCB)=\"onGridChange($event)\"\n (changeCB)=\"onGridChange($event)\"\n (removedCB)=\"onGridChange($event)\"\n >\n @for (card of looseCards(); track card.id) {\n <gridstack-item [options]=\"card\">\n <mfp-dashboard-card\n [card]=\"card\"\n [editMode]=\"editMode()\"\n (removeCard)=\"removeCard($any(card.id))\"\n />\n </gridstack-item>\n }\n </gridstack>\n\n @if (editMode()) {\n <div class=\"mfp-dashboard__edit-bar\">\n <ui5-button data-testid=\"dashboard-save-btn\" design=\"Emphasized\" (click)=\"saveEdit()\">{{\n i18n.getTranslation(i18nKeys.SAVE)\n }}</ui5-button>\n <ui5-button data-testid=\"dashboard-cancel-btn\" design=\"Transparent\" (click)=\"cancelEdit()\">{{\n i18n.getTranslation(i18nKeys.CANCEL)\n }}</ui5-button>\n </div>\n }\n</div>\n\n<mfp-edit-cards-dialog\n [addedCardsIds]=\"addedCardsIds()\"\n [availableCards]=\"availableCards()\"\n [open]=\"cardDialogOpen()\"\n (cancelled)=\"closeCardPanel()\"\n (confirm)=\"onCardsEdited($event)\"\n/>\n\n<mfp-discard-changes-dialog\n [open]=\"discardDialogOpen()\"\n (cancelled)=\"cancelDiscard()\"\n (confirm)=\"confirmDiscard()\"\n/>\n\n<mfp-unsaved-changes-dialog\n [open]=\"unsavedNavDialogOpen()\"\n (cancelled)=\"onUnsavedNavCancel()\"\n (discard)=\"onUnsavedNavDiscard()\"\n (save)=\"onUnsavedNavSave()\"\n/>\n", styles: [".grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item{right:0}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,right,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,right .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,right 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item[gs-x=\"0\"]{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item[gs-x=\"0\"]{right:0}mfp-dashboard,mfp-wc-dashboard{display:block;flex:1;margin:0;padding:0;min-height:100%;background:var(--sapShellColor, #354a5e);background-size:100% auto;background-position:top center;background-repeat:no-repeat;background-attachment:local}.mfp-dashboard{padding:calc(var(--sapShell_Space_XL, 3rem) - 10px);container-type:inline-size;container-name:mfp-dashboard}.mfp-sections-container{display:grid;grid-auto-rows:auto;align-content:start;gap:1rem;grid-template-columns:repeat(14,1fr)}@container mfp-dashboard (max-width: 599px){.mfp-sections-container{grid-template-columns:repeat(1,1fr)}}@container mfp-dashboard (min-width: 600px) and (max-width: 1023px){.mfp-sections-container{grid-template-columns:repeat(8,1fr)}}@container mfp-dashboard (min-width: 1024px) and (max-width: 1439px){.mfp-sections-container{grid-template-columns:repeat(12,1fr)}}.mfp-dashboard__topbar{grid-column:1/-1;align-self:start;display:flex;flex-direction:column;gap:1rem;padding-bottom:3rem;width:100%;min-width:0}.mfp-dashboard__topbar-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:0 10px}.mfp-dashboard__header{display:flex;flex-direction:column;gap:.25rem}.mfp-dashboard__title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.mfp-dashboard__unsaved-changes{display:inline-flex;align-items:center;gap:.375rem}.mfp-dashboard__unsaved-changes-icon{width:16px;height:16px;color:var(--sapContent_MarkerIconColor)}.mfp-dashboard__unsaved-changes-text{color:var(--sapContent_LabelColor);text-shadow:0 0 2px var(--sapContent_ContrastTextShadow, #fff);font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 14px);font-style:normal;font-weight:400;line-height:normal}.mfp-dashboard__description{font-weight:400;font-family:var(--sapFontFamily)}.mfp-dashboard__description b,.mfp-dashboard__description strong{font-family:var(--sapFontBoldFamily)}.mfp-dashboard__toolbar{flex-shrink:0;display:flex;gap:.5rem}.mfp-dashboard__subheader{display:flex;align-items:center;gap:1rem}.mfp-dashboard__edit-bar{position:sticky;bottom:20px;left:16px;right:16px;z-index:1000;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:7px 16px;background:var(--sapPageFooter_Background, white);border-radius:var(--sapElement_BorderCornerRadius, 12px);box-shadow:0 0 0 1px #2235487a,0 2px 8px #2235484d;box-sizing:border-box;overflow:hidden}@media screen and (min-width:0px)and (max-width:599px){.mfp-dashboard{padding:calc(var(--sapShell_Space_S, 1rem) - 10px)}}@media screen and (min-width:600px)and (max-width:1023px){.mfp-dashboard{padding:calc(var(--sapShell_Space_M, 2rem) - 10px)}}@media screen and (min-width:1024px)and (max-width:1439px){.mfp-dashboard{padding:calc(var(--sapShell_Space_L, 2rem) - 10px)}}.grid-stack.grid-stack-dragging,.grid-stack.grid-stack-dragging *{cursor:grabbing!important}.grid-stack-item>.ui-resizable-handle{background-image:none!important}\n"] }]
|
|
1532
1635
|
}], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }, { type: i0.Output, args: ["sectionsChange"] }], cards: [{ type: i0.Input, args: [{ isSignal: true, alias: "cards", required: false }] }, { type: i0.Output, args: ["cardsChange"] }], availableCards: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableCards", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], saved: [{ type: i0.Output, args: ["saved"] }], actionButtonClick: [{ type: i0.Output, args: ["actionButtonClick"] }], unsavedChangesChange: [{ type: i0.Output, args: ["unsavedChangesChange"] }], gridStackItems: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }], addCardBtn: [{ type: i0.ViewChild, args: ['editCardsBtn', { isSignal: true }] }] } });
|
|
1533
1636
|
|
|
1534
1637
|
class VisitedServiceCard {
|