@openmfp/ngx 0.6.1

package/fesm2022/openmfp-ngx.mjs

@@ -0,0 +1,1188 @@
+import jsonpath from 'jsonpath';
+import * as i0 from '@angular/core';
+import { input, computed, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, output, signal, ViewEncapsulation, inject, effect, viewChild, Injector, afterNextRender, reflectComponentType, isStandalone, isDevMode, ViewContainerRef, Renderer2, model, ElementRef, linkedSignal } from '@angular/core';
+import { Icon } from '@fundamental-ngx/ui5-webcomponents/icon';
+import { Link } from '@fundamental-ngx/ui5-webcomponents/link';
+import { Button } from '@fundamental-ngx/ui5-webcomponents/button';
+import '@ui5/webcomponents-icons/dist/AllIcons.js';
+import { IllustratedMessage } from '@fundamental-ngx/ui5-webcomponents-fiori';
+import { Option } from '@fundamental-ngx/ui5-webcomponents/option';
+import { Select } from '@fundamental-ngx/ui5-webcomponents/select';
+import { Table } from '@fundamental-ngx/ui5-webcomponents/table';
+import { TableCell } from '@fundamental-ngx/ui5-webcomponents/table-cell';
+import { TableGrowing } from '@fundamental-ngx/ui5-webcomponents/table-growing';
+import { TableHeaderCell } from '@fundamental-ngx/ui5-webcomponents/table-header-cell';
+import { TableHeaderRow } from '@fundamental-ngx/ui5-webcomponents/table-header-row';
+import { TableRow } from '@fundamental-ngx/ui5-webcomponents/table-row';
+import '@ui5/webcomponents-fiori/dist/illustrations/NoData.js';
+import * as i1 from '@angular/forms';
+import { FormBuilder, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { Input } from '@fundamental-ngx/ui5-webcomponents/input';
+import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Dialog } from '@fundamental-ngx/ui5-webcomponents/dialog';
+import { Title } from '@fundamental-ngx/ui5-webcomponents/title';
+import '@ui5/webcomponents-icons/dist/add.js';
+import '@ui5/webcomponents-icons/dist/search.js';
+import { debounceTime } from 'rxjs';
+import { CheckBox } from '@fundamental-ngx/ui5-webcomponents/check-box';
+import { Menu } from '@fundamental-ngx/ui5-webcomponents/menu';
+import { MenuItem } from '@fundamental-ngx/ui5-webcomponents/menu-item';
+import { MenuSeparator } from '@fundamental-ngx/ui5-webcomponents/menu-separator';
+import { Text } from '@fundamental-ngx/ui5-webcomponents/text';
+import '@ui5/webcomponents-icons/dist/action-settings.js';
+import '@ui5/webcomponents-icons/dist/menu2.js';
+import { GridstackComponent, GridstackItemComponent } from 'gridstack/dist/angular';
+import { Card } from '@fundamental-ngx/ui5-webcomponents/card';
+import { CardHeader } from '@fundamental-ngx/ui5-webcomponents/card-header';
+import { List } from '@fundamental-ngx/ui5-webcomponents/list';
+import { ListItemStandard } from '@fundamental-ngx/ui5-webcomponents/list-item-standard';
+
+const processGroupFields = (fields) => {
+    return combineGroupFields(fields);
+};
+const collectGroupFields = (fields) => {
+    return fields.reduce((acc, f) => {
+        if (!f.group?.name) {
+            return acc;
+        }
+        const key = f.group.name;
+        if (!acc[key]) {
+            acc[key] = [];
+        }
+        // Strip group information from the field when adding to the fields array
+        const { group, ...fieldWithoutGroup } = f;
+        acc[key].push(fieldWithoutGroup);
+        return acc;
+    }, {});
+};
+const combineGroupFields = (fields) => {
+    const seenGroup = new Set();
+    const groupFields = collectGroupFields(fields);
+    const result = [];
+    fields.forEach((f) => {
+        if (!f.group?.name) {
+            result.push(f);
+            return;
+        }
+        const key = f.group.name;
+        if (seenGroup.has(key)) {
+            return;
+        }
+        seenGroup.add(key);
+        const grouped = {
+            ...f,
+            group: {
+                ...f.group,
+                fields: groupFields[key],
+            },
+        };
+        result.push(grouped);
+    });
+    return result;
+};
+
+const getResourceValueByJsonPath = (resource, field) => {
+    const property = field.jsonPathExpression || field.property;
+    if (!property) {
+        return undefined;
+    }
+    if (property instanceof Array) {
+        console.error(`Property defined as an array: ${JSON.stringify(property)}, provide "jsonPathExpression" field to properly ready resource value`);
+        return undefined;
+    }
+    const prefix = property.startsWith('$.') ? '' : '$.';
+    const queryResult = jsonpath.query(resource, `${prefix}${property}`);
+    const value = queryResult.length ? queryResult[0] : undefined;
+    if (value && field.propertyField) {
+        return executeTransform(value[field.propertyField.key], field.propertyField.transform);
+    }
+    return value;
+};
+const executeTransform = (value, transform) => {
+    if (value == null || transform == null || !transform.length)
+        return value;
+    return transform.reduce((acc, t) => {
+        if (acc == null)
+            return acc;
+        switch (t) {
+            case 'uppercase':
+                return acc.toUpperCase();
+            case 'lowercase':
+                return acc.toLowerCase();
+            case 'capitalize': {
+                const str = String(acc);
+                return str.length ? str.charAt(0).toUpperCase() + str.slice(1) : str;
+            }
+            case 'decode': {
+                try {
+                    return decodeBase64(acc);
+                }
+                catch {
+                    return acc;
+                }
+            }
+            case 'encode': {
+                try {
+                    return encodeBase64(acc);
+                }
+                catch {
+                    return acc;
+                }
+            }
+            default:
+                return acc;
+        }
+    }, value);
+};
+const encodeBase64 = (str) => {
+    try {
+        const utf8Bytes = new TextEncoder().encode(str);
+        const binaryString = Array.from(utf8Bytes, (byte) => String.fromCharCode(byte)).join('');
+        return btoa(binaryString);
+    }
+    catch (error) {
+        console.error('Base64 encoding failed:', error);
+        throw new Error('Failed to encode string to Base64');
+    }
+};
+const decodeBase64 = (base64) => {
+    try {
+        const binaryString = atob(base64);
+        const bytes = Uint8Array.from(binaryString, (char) => char.charCodeAt(0));
+        return new TextDecoder().decode(bytes);
+    }
+    catch (error) {
+        console.error('Base64 decoding failed:', error);
+        throw new Error('Failed to decode Base64 string');
+    }
+};
+
+const parseStringValue = (value) => {
+    if (value === 'true') {
+        return true;
+    }
+    if (value === 'false') {
+        return false;
+    }
+    if (!isNaN(Number(value))) {
+        return Number(value);
+    }
+    return value;
+};
+const cssRuleResolver = (rule, resourceValue) => {
+    const parsedResouceValue = parseStringValue(resourceValue);
+    const parsedConditionValue = parseStringValue(rule.if.value);
+    switch (rule.if.condition) {
+        case 'equals':
+            return parsedResouceValue === parsedConditionValue;
+        case 'notEquals':
+            return parsedResouceValue !== parsedConditionValue;
+        case 'greaterThan':
+            return parsedResouceValue > parsedConditionValue;
+        case 'greaterThanOrEqual':
+            return parsedResouceValue >= parsedConditionValue;
+        case 'lessThan':
+            return parsedResouceValue < parsedConditionValue;
+        case 'lessThanOrEqual':
+            return parsedResouceValue <= parsedConditionValue;
+        case 'contains':
+            if (Array.isArray(parsedResouceValue)) {
+                return parsedResouceValue.includes(parsedConditionValue);
+            }
+            else if (typeof parsedResouceValue === 'string' &&
+                typeof parsedConditionValue === 'string') {
+                return parsedResouceValue.includes(parsedConditionValue);
+            }
+            return false;
+    }
+    return false;
+};
+const evaluateCssRules = (value, rules) => {
+    if (!rules) {
+        return {};
+    }
+    return rules.reduce((acc, rule) => {
+        const result = cssRuleResolver(rule, value);
+        if (result) {
+            return { ...acc, ...rule.styles };
+        }
+        return acc;
+    }, {});
+};
+
+function getFieldValue(field, resource) {
+    if (resource) {
+        return getResourceValueByJsonPath(resource, field) ?? field.value;
+    }
+    return field.value;
+}
+
+const ICON_DESIGN_POSITIVE = 'Positive';
+const ICON_DESIGN_NEGATIVE = 'Negative';
+const ICON_NAME_POSITIVE = 'accept';
+const ICON_NAME_NEGATIVE = 'decline';
+
+class BooleanValue {
+    boolValue = input.required(...(ngDevMode ? [{ debugName: "boolValue" }] : /* istanbul ignore next */ []));
+    testId = input('boolean-value-icon', ...(ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []));
+    iconDesign = computed(() => {
+        return this.boolValue() ? ICON_DESIGN_POSITIVE : ICON_DESIGN_NEGATIVE;
+    }, ...(ngDevMode ? [{ debugName: "iconDesign" }] : /* istanbul ignore next */ []));
+    iconName = computed(() => {
+        return this.boolValue() ? ICON_NAME_POSITIVE : ICON_NAME_NEGATIVE;
+    }, ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BooleanValue, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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.test-id]=\"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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BooleanValue, decorators: [{
+            type: Component,
+            args: [{ selector: 'mfp-boolean-value', imports: [Icon], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ui5-icon [attr.test-id]=\"testId()\" [design]=\"iconDesign()\" [name]=\"iconName()\" />\n" }]
+        }], propDecorators: { boolValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "boolValue", required: true }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }] } });
+
+class LinkValue {
+    urlValue = input.required(...(ngDevMode ? [{ debugName: "urlValue" }] : /* istanbul ignore next */ []));
+    testId = input('link-value-link', ...(ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []));
+    stopPropagation(event) {
+        event.stopPropagation();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: LinkValue, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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.test-id]=\"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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: LinkValue, decorators: [{
+            type: Component,
+            args: [{ selector: 'mfp-link-value', imports: [Link], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ui5-link\n  target=\"_blank\"\n  [attr.test-id]=\"testId()\"\n  [href]=\"urlValue()\"\n  [tooltip]=\"urlValue()\"\n  (click)=\"stopPropagation($event)\"\n>Link</ui5-link>\n" }]
+        }], propDecorators: { urlValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "urlValue", required: true }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }] } });
+
+class SecretValue {
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    isVisible = input(false, ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
+    testId = input('secret-value', ...(ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []));
+    maskedValue = computed(() => '*'.repeat(this.value().length || 8), ...(ngDevMode ? [{ debugName: "maskedValue" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: SecretValue, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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.test-id]=\"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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: SecretValue, decorators: [{
+            type: Component,
+            args: [{ selector: 'mfp-secret-value', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [], template: "<span class=\"secret-value\" [attr.test-id]=\"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"] }]
+        }], 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 }] }] } });
+
+class ValueCell {
+    fieldDefinition = input.required(...(ngDevMode ? [{ debugName: "fieldDefinition" }] : /* istanbul ignore next */ []));
+    resource = input(...(ngDevMode ? [undefined, { debugName: "resource" }] : /* istanbul ignore next */ []));
+    buttonClick = output();
+    value = computed(() => getFieldValue(this.fieldDefinition(), this.resource()), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    uiSettings = computed(() => this.fieldDefinition().uiSettings, ...(ngDevMode ? [{ debugName: "uiSettings" }] : /* istanbul ignore next */ []));
+    displayAs = computed(() => this.uiSettings()?.displayAs, ...(ngDevMode ? [{ debugName: "displayAs" }] : /* istanbul ignore next */ []));
+    withCopyButton = computed(() => this.uiSettings()?.withCopyButton, ...(ngDevMode ? [{ debugName: "withCopyButton" }] : /* istanbul ignore next */ []));
+    labelDisplay = computed(() => this.uiSettings()?.labelDisplay, ...(ngDevMode ? [{ debugName: "labelDisplay" }] : /* istanbul ignore next */ []));
+    cssCustomization = computed(() => this.uiSettings()?.cssCustomization, ...(ngDevMode ? [{ debugName: "cssCustomization" }] : /* istanbul ignore next */ []));
+    tooltipIcon = computed(() => this.uiSettings()?.tooltipIcon, ...(ngDevMode ? [{ debugName: "tooltipIcon" }] : /* istanbul ignore next */ []));
+    cssRules = computed(() => evaluateCssRules(this.value(), this.uiSettings()?.cssRules), ...(ngDevMode ? [{ debugName: "cssRules" }] : /* istanbul ignore next */ []));
+    cssStyles = computed(() => ({
+        ...this.cssCustomization(),
+        ...this.cssRules(),
+    }), ...(ngDevMode ? [{ debugName: "cssStyles" }] : /* istanbul ignore next */ []));
+    isBoolLike = computed(() => this.boolValue() !== undefined, ...(ngDevMode ? [{ debugName: "isBoolLike" }] : /* istanbul ignore next */ []));
+    isUrlValue = computed(() => this.checkValidUrl(this.stringValue()), ...(ngDevMode ? [{ debugName: "isUrlValue" }] : /* istanbul ignore next */ []));
+    testId = computed(() => `value-cell-${this.fieldDefinition().property}`, ...(ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []));
+    boolValue = computed(() => this.normalizeBoolean(this.value()), ...(ngDevMode ? [{ debugName: "boolValue" }] : /* istanbul ignore next */ []));
+    stringValue = computed(() => this.normalizeString(this.value()), ...(ngDevMode ? [{ debugName: "stringValue" }] : /* istanbul ignore next */ []));
+    isVisible = signal(false, ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
+    toggleVisibility(e) {
+        e.stopPropagation();
+        this.isVisible.set(!this.isVisible());
+    }
+    normalizeBoolean(value) {
+        const normalizedValue = value?.toString()?.toLowerCase();
+        if (normalizedValue === 'true') {
+            return true;
+        }
+        if (normalizedValue === 'false') {
+            return false;
+        }
+        return undefined;
+    }
+    normalizeString(value) {
+        if (typeof value !== 'string' || !value.trim()) {
+            return undefined;
+        }
+        return value;
+    }
+    checkValidUrl(value) {
+        if (!value) {
+            return false;
+        }
+        try {
+            new URL(value);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    copyValue(event) {
+        event.stopPropagation();
+        navigator.clipboard.writeText(this.value() || '');
+    }
+    buttonClicked(event) {
+        event.stopPropagation();
+        this.buttonClick.emit({
+            event,
+            field: this.fieldDefinition(),
+            resource: this.resource(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ValueCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ValueCell, isStandalone: true, selector: "mfp-value-cell", 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.test-id]=\"testId()\" [class.label-value]=\"labelDisplay()\" [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        [attr.test-id]=\"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.test-id]=\"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.test-id]=\"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      [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    >&nbsp;\n  } @else {\n    {{ value() }}\n  }\n</span>\n\n@if (withCopyButton()) {\n  <ui5-icon\n    class=\"toggle-icon\"\n    name=\"copy\"\n    [attr.test-id]=\"testId() + '-copy'\"\n    (click)=\"copyValue($event)\"\n  />\n}\n", styles: [":host{display:inline-flex;align-items:center}.label-value{background-color:#01b4ff;color:#fff;border-radius:1.4rem;padding-inline:.4375rem;letter-spacing:-.00875rem;display:inline-block;border:0;font-size:.875rem;line-height:1.4rem;margin:3px}.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ValueCell, decorators: [{
+            type: Component,
+            args: [{ selector: 'mfp-value-cell', imports: [Icon, BooleanValue, LinkValue, SecretValue, Button], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@let displayType = displayAs();\n<span [attr.test-id]=\"testId()\" [class.label-value]=\"labelDisplay()\" [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        [attr.test-id]=\"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.test-id]=\"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.test-id]=\"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      [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    >&nbsp;\n  } @else {\n    {{ value() }}\n  }\n</span>\n\n@if (withCopyButton()) {\n  <ui5-icon\n    class=\"toggle-icon\"\n    name=\"copy\"\n    [attr.test-id]=\"testId() + '-copy'\"\n    (click)=\"copyValue($event)\"\n  />\n}\n", styles: [":host{display:inline-flex;align-items:center}.label-value{background-color:#01b4ff;color:#fff;border-radius:1.4rem;padding-inline:.4375rem;letter-spacing:-.00875rem;display:inline-block;border:0;font-size:.875rem;line-height:1.4rem;margin:3px}.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"] }]
+        }], 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"] }] } });
+
+class DeclarativeTable {
+    columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    resources = input.required(...(ngDevMode ? [{ debugName: "resources" }] : /* istanbul ignore next */ []));
+    trackByPath = input('id', ...(ngDevMode ? [{ debugName: "trackByPath" }] : /* istanbul ignore next */ []));
+    totalItemsCount = input(...(ngDevMode ? [undefined, { debugName: "totalItemsCount" }] : /* istanbul ignore next */ []));
+    paginationLimit = input(5, ...(ngDevMode ? [{ debugName: "paginationLimit" }] : /* istanbul ignore next */ []));
+    hasMore = input(false, ...(ngDevMode ? [{ debugName: "hasMore" }] : /* istanbul ignore next */ []));
+    buttonClick = output();
+    tableRowClicked = output();
+    loadMoreResources = output();
+    paginationLimitChanged = output();
+    columnTrackBy = (column, index) => column.property ?? column.value ?? index;
+    rowTrackBy = (_index, item) => getResourceValueByJsonPath(item, { property: this.trackByPath() }) ?? _index;
+    viewColumns = computed(() => processGroupFields(this.columns()), ...(ngDevMode ? [{ debugName: "viewColumns" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DeclarativeTable, isStandalone: true, selector: "mfp-declarative-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: true, transformFunction: null }, trackByPath: { classPropertyName: "trackByPath", publicName: "trackByPath", isSignal: true, isRequired: false, transformFunction: null }, totalItemsCount: { classPropertyName: "totalItemsCount", publicName: "totalItemsCount", isSignal: true, isRequired: false, transformFunction: null }, paginationLimit: { classPropertyName: "paginationLimit", publicName: "paginationLimit", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", tableRowClicked: "tableRowClicked", loadMoreResources: "loadMoreResources", paginationLimitChanged: "paginationLimitChanged" }, ngImport: i0, template: "<ui5-table test-id=\"generic-table\">\n  <ui5-table-header-row slot=\"headerRow\">\n    @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n      @if (column.group) {\n        <ui5-table-header-cell\n          [attr.test-id]=\"'generic-table-header-' + column.property\"\n          >{{ column.group.label ?? column.group.name }}</ui5-table-header-cell\n        >\n      } @else {\n        <ui5-table-header-cell\n          [attr.test-id]=\"'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.test-id]=\"'generic-table-row-' + i\"\n      [class.disabled]=\"!(item.isAvailable ?? true)\"\n      [interactive]=\"item.isAvailable ?? true\"\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.test-id]=\"'generic-table-cell-' + i + '-' + column.property\"\n            [class.multiline]=\"column.group.multiline ?? true\"\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.test-id]=\"\n                  'generic-table-cell-' +\n                  i +\n                  '-' +\n                  column.property +\n                  '-' +\n                  field.property\n                \"\n              >\n                @if (field.label) {\n                  <span>{{ field.label }}: </span>\n                }\n                <mfp-value-cell\n                  [fieldDefinition]=\"field\"\n                  [resource]=\"item\"\n                  (buttonClick)=\"buttonClick.emit($event)\"\n                />\n              </span>\n              @if (!last && column.group.delimiter) {\n                <span>{{ column.group.delimiter }}</span>\n              }\n            }\n          </ui5-table-cell>\n        } @else {\n          <ui5-table-cell\n            [attr.test-id]=\"'generic-table-cell-' + i + '-' + column.property\"\n          >\n            <mfp-value-cell\n              [fieldDefinition]=\"column\"\n              [resource]=\"item\"\n              (buttonClick)=\"buttonClick.emit($event)\"\n            />\n          </ui5-table-cell>\n        }\n      }\n    </ui5-table-row>\n  } @empty {\n    <ui5-illustrated-message\n      name=\"NoData\"\n      slot=\"noData\"\n      test-id=\"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      mode=\"Button\"\n      slot=\"features\"\n      text=\"Load more\"\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        style=\"width: 5rem\"\n        (change)=\"paginationLimitChanged.emit(+$any($event)?.target?.value)\"\n        [value]=\"paginationLimit().toString()\"\n      >\n        <ui5-option value=\"5\">5</ui5-option>\n        <ui5-option value=\"10\">10</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}\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: ValueCell, selector: "mfp-value-cell", inputs: ["fieldDefinition", "resource"], outputs: ["buttonClick"] }, { kind: "component", type: Select, selector: "ui5-select, [ui5-select]", inputs: ["disabled", "name", "valueState", "required", "readonly", "accessibleName", "accessibleNameRef", "accessibleDescription", "accessibleDescriptionRef", "tooltip", "textSeparator", "value"], outputs: ["ui5Change", "ui5LiveChange", "ui5Open", "ui5Close"], exportAs: ["ui5Select"] }, { kind: "component", type: Option, selector: "ui5-option, [ui5-option]", inputs: ["value", "icon", "additionalText", "tooltip", "selected"], exportAs: ["ui5Option"] }, { kind: "component", type: TableGrowing, selector: "ui5-table-growing, [ui5-table-growing]", inputs: ["mode", "text", "subtext"], outputs: ["ui5LoadMore"], exportAs: ["ui5TableGrowing"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTable, decorators: [{
+            type: Component,
+            args: [{ selector: 'mfp-declarative-table', imports: [
+                        IllustratedMessage,
+                        Table,
+                        TableCell,
+                        TableHeaderCell,
+                        TableHeaderRow,
+                        TableRow,
+                        ValueCell,
+                        Select,
+                        Option,
+                        TableGrowing,
+                    ], encapsulation: ViewEncapsulation.ShadowDom, template: "<ui5-table test-id=\"generic-table\">\n  <ui5-table-header-row slot=\"headerRow\">\n    @for (column of viewColumns(); track columnTrackBy(column, $index)) {\n      @if (column.group) {\n        <ui5-table-header-cell\n          [attr.test-id]=\"'generic-table-header-' + column.property\"\n          >{{ column.group.label ?? column.group.name }}</ui5-table-header-cell\n        >\n      } @else {\n        <ui5-table-header-cell\n          [attr.test-id]=\"'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.test-id]=\"'generic-table-row-' + i\"\n      [class.disabled]=\"!(item.isAvailable ?? true)\"\n      [interactive]=\"item.isAvailable ?? true\"\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.test-id]=\"'generic-table-cell-' + i + '-' + column.property\"\n            [class.multiline]=\"column.group.multiline ?? true\"\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.test-id]=\"\n                  'generic-table-cell-' +\n                  i +\n                  '-' +\n                  column.property +\n                  '-' +\n                  field.property\n                \"\n              >\n                @if (field.label) {\n                  <span>{{ field.label }}: </span>\n                }\n                <mfp-value-cell\n                  [fieldDefinition]=\"field\"\n                  [resource]=\"item\"\n                  (buttonClick)=\"buttonClick.emit($event)\"\n                />\n              </span>\n              @if (!last && column.group.delimiter) {\n                <span>{{ column.group.delimiter }}</span>\n              }\n            }\n          </ui5-table-cell>\n        } @else {\n          <ui5-table-cell\n            [attr.test-id]=\"'generic-table-cell-' + i + '-' + column.property\"\n          >\n            <mfp-value-cell\n              [fieldDefinition]=\"column\"\n              [resource]=\"item\"\n              (buttonClick)=\"buttonClick.emit($event)\"\n            />\n          </ui5-table-cell>\n        }\n      }\n    </ui5-table-row>\n  } @empty {\n    <ui5-illustrated-message\n      name=\"NoData\"\n      slot=\"noData\"\n      test-id=\"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      mode=\"Button\"\n      slot=\"features\"\n      text=\"Load more\"\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        style=\"width: 5rem\"\n        (change)=\"paginationLimitChanged.emit(+$any($event)?.target?.value)\"\n        [value]=\"paginationLimit().toString()\"\n      >\n        <ui5-option value=\"5\">5</ui5-option>\n        <ui5-option value=\"10\">10</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}\n"] }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], resources: [{ type: i0.Input, args: [{ isSignal: true, alias: "resources", required: true }] }], trackByPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByPath", required: false }] }], totalItemsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItemsCount", required: false }] }], paginationLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationLimit", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }], tableRowClicked: [{ type: i0.Output, args: ["tableRowClicked"] }], loadMoreResources: [{ type: i0.Output, args: ["loadMoreResources"] }], paginationLimitChanged: [{ type: i0.Output, args: ["paginationLimitChanged"] }] } });
+
+function setPropertyByPath(object, path, value) {
+    const segments = path.split('.').filter(Boolean);
+    if (segments.length === 0) {
+        return object;
+    }
+    let current = object;
+    for (let i = 0; i < segments.length; i += 1) {
+        const key = segments[i];
+        if (i === segments.length - 1) {
+            current[key] = value;
+            break;
+        }
+        const existing = current[key];
+        if (existing === undefined || existing === null || typeof existing !== 'object') {
+            current[key] = {};
+        }
+        current = current[key];
+    }
+    return object;
+}
+
+class DeclarativeForm {
+    fields = input.required(...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+    initialValues = input({}, ...(ngDevMode ? [{ debugName: "initialValues" }] : /* istanbul ignore next */ []));
+    fieldErrors = input({}, ...(ngDevMode ? [{ debugName: "fieldErrors" }] : /* istanbul ignore next */ []));
+    fieldChange = output();
+    formSubmit = output();
+    form;
+    fb = inject(FormBuilder);
+    constructor() {
+        this.form = this.fb.group({});
+        effect(() => {
+            this.rebuildControls(this.fields());
+        });
+        effect(() => {
+            this.setInitialValues(this.initialValues());
+        });
+        effect(() => {
+            const fields = this.fields();
+            this.initialValues();
+            for (const field of fields) {
+                if (field.validation) {
+                    this.fieldChange.emit({
+                        fieldProperty: field.name,
+                        value: this.form.controls[field.name]?.value ?? '',
+                    });
+                }
+            }
+        });
+    }
+    setFormControlValue($event, field) {
+        const target = $event.target;
+        const control = this.form.controls[field.name];
+        control.setValue(target.value);
+        control.markAsTouched();
+        control.markAsDirty();
+        if (field.validation === 'onChange') {
+            this.fieldChange.emit({
+                fieldProperty: field.name,
+                value: control.value,
+            });
+        }
+    }
+    getError(name) {
+        const control = this.form.controls[name];
+        const error = this.fieldErrors()[name];
+        return error && (control.dirty || control.touched) ? error : null;
+    }
+    getValueState(name) {
+        return this.getError(name) ? 'Negative' : 'None';
+    }
+    onFieldBlur(field) {
+        this.form.controls[field.name]?.markAsTouched();
+        if (field.validation === 'onBlur') {
+            this.fieldChange.emit({
+                fieldProperty: field.name,
+                value: this.form.controls[field.name]?.value,
+            });
+        }
+    }
+    submit() {
+        this.formSubmit.emit(this.buildOutputValue());
+    }
+    clear() {
+        this.form.reset();
+    }
+    rebuildControls(fields) {
+        const existingControls = this.form.controls;
+        const nextFieldNames = new Set(fields.map((field) => field.name));
+        for (const field of fields) {
+            const existingControl = existingControls[field.name];
+            if (existingControl) {
+                existingControl.clearValidators();
+                existingControl.updateValueAndValidity({ emitEvent: false });
+                continue;
+            }
+            this.form.addControl(field.name, new FormControl(''));
+        }
+        for (const controlName of Object.keys(existingControls)) {
+            if (!nextFieldNames.has(controlName)) {
+                this.form.removeControl(controlName);
+            }
+        }
+        this.form.updateValueAndValidity({ emitEvent: false });
+    }
+    setInitialValues(initialValues) {
+        if (!initialValues) {
+            return;
+        }
+        this.form.patchValue(initialValues, { emitEvent: false });
+        this.form.markAsPristine({ emitEvent: false });
+        this.form.updateValueAndValidity({ emitEvent: false });
+    }
+    buildOutputValue() {
+        const result = {};
+        for (const key of Object.keys(this.form.controls)) {
+            setPropertyByPath(result, key, this.form.controls[key].value);
+        }
+        return result;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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 test-id=\"generic-form\" class=\"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.test-id]=\"'generic-form-field-container-' + field.name\"\n    >\n      <ui5-label\n        [attr.test-id]=\"'generic-form-field-label-' + field.name\"\n        show-colon\n        [required]=\"field.required\"\n        >{{ field.label }}</ui5-label\n      >\n      @if (field.values?.length) {\n        <ui5-select\n          class=\"input\"\n          [attr.test-id]=\"'generic-form-field-' + field.name\"\n          [value]=\"control.value\"\n          (input)=\"setFormControlValue($event, field)\"\n          (change)=\"setFormControlValue($event, field)\"\n          (blur)=\"onFieldBlur(field)\"\n          [required]=\"field.required\"\n          [valueState]=\"getValueState(field.name)\"\n          [disabled]=\"field.disabled\"\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.test-id]=\"\n                'generic-form-field-' +\n                field.name +\n                '-option-' +\n                (value || 'empty')\n              \"\n              [value]=\"value\"\n              [selected]=\"value === control.value\"\n              >{{ value }}</ui5-option\n            >\n          }\n        </ui5-select>\n      } @else {\n        <ui5-input\n          class=\"input\"\n          [attr.test-id]=\"'generic-form-field-' + field.name\"\n          [value]=\"control.value\"\n          (blur)=\"onFieldBlur(field)\"\n          (change)=\"setFormControlValue($event, field)\"\n          (input)=\"setFormControlValue($event, field)\"\n          [required]=\"field.required\"\n          [valueState]=\"getValueState(field.name)\"\n          [disabled]=\"field.disabled\"\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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'mfp-declarative-form', imports: [ReactiveFormsModule, Input, Label, Select, Option], encapsulation: ViewEncapsulation.ShadowDom, template: "<section test-id=\"generic-form\" class=\"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.test-id]=\"'generic-form-field-container-' + field.name\"\n    >\n      <ui5-label\n        [attr.test-id]=\"'generic-form-field-label-' + field.name\"\n        show-colon\n        [required]=\"field.required\"\n        >{{ field.label }}</ui5-label\n      >\n      @if (field.values?.length) {\n        <ui5-select\n          class=\"input\"\n          [attr.test-id]=\"'generic-form-field-' + field.name\"\n          [value]=\"control.value\"\n          (input)=\"setFormControlValue($event, field)\"\n          (change)=\"setFormControlValue($event, field)\"\n          (blur)=\"onFieldBlur(field)\"\n          [required]=\"field.required\"\n          [valueState]=\"getValueState(field.name)\"\n          [disabled]=\"field.disabled\"\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.test-id]=\"\n                'generic-form-field-' +\n                field.name +\n                '-option-' +\n                (value || 'empty')\n              \"\n              [value]=\"value\"\n              [selected]=\"value === control.value\"\n              >{{ value }}</ui5-option\n            >\n          }\n        </ui5-select>\n      } @else {\n        <ui5-input\n          class=\"input\"\n          [attr.test-id]=\"'generic-form-field-' + field.name\"\n          [value]=\"control.value\"\n          (blur)=\"onFieldBlur(field)\"\n          (change)=\"setFormControlValue($event, field)\"\n          (input)=\"setFormControlValue($event, field)\"\n          [required]=\"field.required\"\n          [valueState]=\"getValueState(field.name)\"\n          [disabled]=\"field.disabled\"\n        >\n          @if (getError(field.name); as error) {\n            <div slot=\"valueStateMessage\">{{ error }}</div>\n          }\n        </ui5-input>\n      }\n    </div>\n  }\n</section>\n", styles: [".form>div{display:flex;flex-direction:column;justify-content:space-evenly;align-items:flex-start;margin-bottom:.5rem;width:100%}.input{width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], initialValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValues", required: false }] }], fieldErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldErrors", required: false }] }], fieldChange: [{ type: i0.Output, args: ["fieldChange"] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }] } });
+
+class DeclarativeTableCard {
+    resources = input.required(...(ngDevMode ? [{ debugName: "resources" }] : /* istanbul ignore next */ []));
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    createFormState = input({}, ...(ngDevMode ? [{ debugName: "createFormState" }] : /* istanbul ignore next */ []));
+    editFormState = input({}, ...(ngDevMode ? [{ debugName: "editFormState" }] : /* istanbul ignore next */ []));
+    actionButtonClick = output();
+    tableRowClicked = output();
+    loadMoreResources = output();
+    paginationLimitChanged = output();
+    searchChanged = output();
+    createFieldChange = output();
+    editFieldChange = output();
+    createSubmit = output();
+    editSubmit = output();
+    deleteSubmit = output();
+    searchState = signal('collapsed', ...(ngDevMode ? [{ debugName: "searchState" }] : /* istanbul ignore next */ []));
+    searchExpanded = computed(() => this.searchState() !== 'collapsed', ...(ngDevMode ? [{ debugName: "searchExpanded" }] : /* istanbul ignore next */ []));
+    searchCollapsing = computed(() => this.searchState() === 'collapsing', ...(ngDevMode ? [{ debugName: "searchCollapsing" }] : /* istanbul ignore next */ []));
+    searchControl = new FormControl('');
+    searchInputRef = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInputRef" }] : /* istanbul ignore next */ []));
+    createDialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "createDialogOpen" }] : /* istanbul ignore next */ []));
+    editDialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "editDialogOpen" }] : /* istanbul ignore next */ []));
+    deleteDialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "deleteDialogOpen" }] : /* istanbul ignore next */ []));
+    pendingResource = signal(null, ...(ngDevMode ? [{ debugName: "pendingResource" }] : /* istanbul ignore next */ []));
+    tableConfig = computed(() => this.config().tableConfig, ...(ngDevMode ? [{ debugName: "tableConfig" }] : /* istanbul ignore next */ []));
+    header = computed(() => this.config().header, ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+    headerTooltip = computed(() => this.config().headerTooltip, ...(ngDevMode ? [{ debugName: "headerTooltip" }] : /* istanbul ignore next */ []));
+    createFormConfig = computed(() => this.config().createResourceFormConfig, ...(ngDevMode ? [{ debugName: "createFormConfig" }] : /* istanbul ignore next */ []));
+    editFormConfig = computed(() => this.config().editResourceFormConfig, ...(ngDevMode ? [{ debugName: "editFormConfig" }] : /* istanbul ignore next */ []));
+    deleteConfirmationConfig = computed(() => this.config().deleteResourceConfirmationConfig, ...(ngDevMode ? [{ debugName: "deleteConfirmationConfig" }] : /* istanbul ignore next */ []));
+    createButtonConfig = computed(() => this.config().buttonSettings?.createButton, ...(ngDevMode ? [{ debugName: "createButtonConfig" }] : /* istanbul ignore next */ []));
+    searchButtonConfig = computed(() => this.config().buttonSettings?.searchButton, ...(ngDevMode ? [{ debugName: "searchButtonConfig" }] : /* istanbul ignore next */ []));
+    effectiveColumns = computed(() => this.addActionsColumn(), ...(ngDevMode ? [{ debugName: "effectiveColumns" }] : /* istanbul ignore next */ []));
+    editInitialValue = computed(() => {
+        const pendingResource = this.pendingResource();
+        const editConfig = this.editFormConfig();
+        if (!pendingResource || !editConfig) {
+            return {};
+        }
+        return this.buildInitialValues(editConfig.fields, pendingResource);
+    }, ...(ngDevMode ? [{ debugName: "editInitialValue" }] : /* istanbul ignore next */ []));
+    injector = inject(Injector);
+    constructor() {
+        this.searchControl.valueChanges
+            .pipe(debounceTime(300), takeUntilDestroyed())
+            .subscribe((value) => {
+            this.searchChanged.emit(value ?? '');
+        });
+    }
+    toggleSearch() {
+        if (this.searchState() === 'expanded') {
+            this.collapseSearch();
+        }
+        else if (this.searchState() === 'collapsed') {
+            this.searchState.set('expanded');
+            afterNextRender(() => {
+                this.searchInputRef()?.elementRef.nativeElement.focus();
+            }, { injector: this.injector });
+        }
+    }
+    onSearchBlur() {
+        if (!this.searchControl.value) {
+            this.collapseSearch();
+        }
+    }
+    onSearchAnimationEnd() {
+        if (this.searchCollapsing()) {
+            this.searchState.set('collapsed');
+            this.searchControl.setValue('', { emitEvent: false });
+        }
+    }
+    collapseSearch() {
+        this.searchState.set('collapsing');
+    }
+    onButtonClick(event) {
+        const action = event.field.uiSettings?.buttonSettings?.action;
+        if (action === 'edit' && event.resource) {
+            this.pendingResource.set(event.resource);
+            this.editDialogOpen.set(true);
+            return;
+        }
+        if (action === 'delete' && event.resource) {
+            this.pendingResource.set(event.resource);
+            this.deleteDialogOpen.set(true);
+            return;
+        }
+        this.actionButtonClick.emit(event);
+    }
+    closeCreateDialog() {
+        this.createDialogOpen.set(false);
+    }
+    closeEditDialog() {
+        this.editDialogOpen.set(false);
+    }
+    closeDeleteDialog() {
+        this.deleteDialogOpen.set(false);
+    }
+    onCreateFieldChange(event) {
+        this.createFieldChange.emit(event);
+    }
+    onEditFieldChange(event) {
+        const resource = this.pendingResource();
+        if (resource) {
+            this.editFieldChange.emit({ resource, formChangeEvent: event });
+        }
+    }
+    onCreateSubmit(value) {
+        this.createSubmit.emit(value);
+    }
+    onEditSubmit(value) {
+        const resource = this.pendingResource();
+        if (resource) {
+            this.editSubmit.emit({ resource, value });
+        }
+    }
+    onDeleteSubmit() {
+        const resource = this.pendingResource();
+        if (resource)
+            this.deleteSubmit.emit(resource);
+    }
+    hasErrors(state) {
+        const errors = state.fieldErrors;
+        return !!errors && Object.values(errors).some((val) => !!val);
+    }
+    addActionsColumn() {
+        const cols = this.tableConfig().fields;
+        const buttonSettings = this.config().buttonSettings;
+        const editButton = this.editFormConfig();
+        const deleteButton = this.deleteConfirmationConfig();
+        const actions = [];
+        if (editButton) {
+            actions.push({
+                uiSettings: {
+                    displayAs: 'button',
+                    buttonSettings: {
+                        icon: 'edit',
+                        design: 'Transparent',
+                        action: 'edit',
+                        ...buttonSettings?.editButton,
+                    },
+                },
+                group: { name: 'actions', label: '', multiline: false },
+            });
+        }
+        if (deleteButton) {
+            actions.push({
+                uiSettings: {
+                    displayAs: 'button',
+                    buttonSettings: {
+                        icon: 'decline',
+                        design: 'Transparent',
+                        action: 'delete',
+                        ...buttonSettings?.deleteButton,
+                    },
+                },
+                group: { name: 'actions', label: '', multiline: false },
+            });
+        }
+        return cols.concat(actions);
+    }
+    buildInitialValues(fields, resource) {
+        if (!resource)
+            return {};
+        return fields.reduce((acc, field) => {
+            if (typeof field.name === 'string') {
+                acc[field.name] =
+                    getResourceValueByJsonPath(resource, { property: field.name }) ??
+                        '';
+            }
+            return acc;
+        }, {});
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTableCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DeclarativeTableCard, isStandalone: true, selector: "mfp-declarative-table-card", inputs: { resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, createFormState: { classPropertyName: "createFormState", publicName: "createFormState", isSignal: true, isRequired: false, transformFunction: null }, editFormState: { classPropertyName: "editFormState", publicName: "editFormState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionButtonClick: "actionButtonClick", tableRowClicked: "tableRowClicked", loadMoreResources: "loadMoreResources", paginationLimitChanged: "paginationLimitChanged", searchChanged: "searchChanged", createFieldChange: "createFieldChange", editFieldChange: "editFieldChange", createSubmit: "createSubmit", editSubmit: "editSubmit", deleteSubmit: "deleteSubmit" }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"card\">\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            [showTooltip]=\"true\"\n            [accessibleName]=\"tooltip\"\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            (blur)=\"onSearchBlur()\"\n            (animationend)=\"onSearchAnimationEnd()\"\n          />\n        }\n        <ui5-button\n          class=\"card__search-btn\"\n          design=\"Transparent\"\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          [icon]=\"createButtonConfig()?.icon ?? 'add'\"\n          [design]=\"createButtonConfig()?.design ?? 'Transparent'\"\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        [resources]=\"resources()\"\n        [totalItemsCount]=\"config.totalItemsCount\"\n        [paginationLimit]=\"config.paginationLimit ?? 5\"\n        [hasMore]=\"config.hasMore ?? false\"\n        (buttonClick)=\"onButtonClick($event)\"\n        (tableRowClicked)=\"tableRowClicked.emit($event)\"\n        (loadMoreResources)=\"loadMoreResources.emit()\"\n        (paginationLimitChanged)=\"paginationLimitChanged.emit($event)\"\n      />\n    }\n  </div>\n</div>\n\n@if (createFormConfig(); as config) {\n  <ui5-dialog\n    [open]=\"createDialogOpen()\"\n    (ui5BeforeClose)=\"createDialogOpen.set(false)\"\n  >\n    <div slot=\"header\" class=\"dialog__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        [fields]=\"config.fields\"\n        [fieldErrors]=\"createFormState().fieldErrors ?? {}\"\n        (fieldChange)=\"onCreateFieldChange($event)\"\n        (formSubmit)=\"onCreateSubmit($event)\"\n      />\n    </div>\n    <div slot=\"footer\" class=\"dialog__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    [open]=\"editDialogOpen()\"\n    (ui5BeforeClose)=\"editDialogOpen.set(false)\"\n  >\n    <div slot=\"header\" class=\"dialog__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        [fields]=\"config.fields\"\n        [initialValues]=\"editInitialValue()\"\n        [fieldErrors]=\"editFormState().fieldErrors ?? {}\"\n        (fieldChange)=\"onEditFieldChange($event)\"\n        (formSubmit)=\"onEditSubmit($event)\"\n      />\n    </div>\n    <div slot=\"footer\" class=\"dialog__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    [open]=\"deleteDialogOpen()\"\n    (ui5BeforeClose)=\"deleteDialogOpen.set(false)\"\n  >\n    <div slot=\"header\" class=\"dialog__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 slot=\"footer\" class=\"dialog__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"], 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DeclarativeTableCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'mfp-declarative-table-card', imports: [
+                        DeclarativeTable,
+                        DeclarativeForm,
+                        ReactiveFormsModule,
+                        Dialog,
+                        Title,
+                        Button,
+                        Icon,
+                        Input,
+                    ], 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            [showTooltip]=\"true\"\n            [accessibleName]=\"tooltip\"\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            (blur)=\"onSearchBlur()\"\n            (animationend)=\"onSearchAnimationEnd()\"\n          />\n        }\n        <ui5-button\n          class=\"card__search-btn\"\n          design=\"Transparent\"\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          [icon]=\"createButtonConfig()?.icon ?? 'add'\"\n          [design]=\"createButtonConfig()?.design ?? 'Transparent'\"\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        [resources]=\"resources()\"\n        [totalItemsCount]=\"config.totalItemsCount\"\n        [paginationLimit]=\"config.paginationLimit ?? 5\"\n        [hasMore]=\"config.hasMore ?? false\"\n        (buttonClick)=\"onButtonClick($event)\"\n        (tableRowClicked)=\"tableRowClicked.emit($event)\"\n        (loadMoreResources)=\"loadMoreResources.emit()\"\n        (paginationLimitChanged)=\"paginationLimitChanged.emit($event)\"\n      />\n    }\n  </div>\n</div>\n\n@if (createFormConfig(); as config) {\n  <ui5-dialog\n    [open]=\"createDialogOpen()\"\n    (ui5BeforeClose)=\"createDialogOpen.set(false)\"\n  >\n    <div slot=\"header\" class=\"dialog__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        [fields]=\"config.fields\"\n        [fieldErrors]=\"createFormState().fieldErrors ?? {}\"\n        (fieldChange)=\"onCreateFieldChange($event)\"\n        (formSubmit)=\"onCreateSubmit($event)\"\n      />\n    </div>\n    <div slot=\"footer\" class=\"dialog__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    [open]=\"editDialogOpen()\"\n    (ui5BeforeClose)=\"editDialogOpen.set(false)\"\n  >\n    <div slot=\"header\" class=\"dialog__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        [fields]=\"config.fields\"\n        [initialValues]=\"editInitialValue()\"\n        [fieldErrors]=\"editFormState().fieldErrors ?? {}\"\n        (fieldChange)=\"onEditFieldChange($event)\"\n        (formSubmit)=\"onEditSubmit($event)\"\n      />\n    </div>\n    <div slot=\"footer\" class=\"dialog__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    [open]=\"deleteDialogOpen()\"\n    (ui5BeforeClose)=\"deleteDialogOpen.set(false)\"\n  >\n    <div slot=\"header\" class=\"dialog__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 slot=\"footer\" class=\"dialog__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"] }]
+        }], 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 }] }] } });
+
+class AddCardDialog {
+    availableCards = input([], ...(ngDevMode ? [{ debugName: "availableCards" }] : /* istanbul ignore next */ []));
+    addedCardsIds = input(new Set(), ...(ngDevMode ? [{ debugName: "addedCardsIds" }] : /* istanbul ignore next */ []));
+    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    confirm = output();
+    cancel = output();
+    selectedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            if (this.open()) {
+                this.selectedIds.set(new Set());
+            }
+        });
+    }
+    toggle(id) {
+        this.selectedIds.update((set) => {
+            const next = new Set(set);
+            if (next.has(id)) {
+                next.delete(id);
+            }
+            else {
+                next.add(id);
+            }
+            return next;
+        });
+    }
+    confirmAdd() {
+        const toAdd = this.availableCards().filter((ac) => this.selectedIds().has(ac.id) && !this.addedCardsIds().has(ac.id));
+        this.confirm.emit(toAdd);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: AddCardDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: AddCardDialog, isStandalone: true, selector: "mfp-add-card-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", cancel: "cancel" }, ngImport: i0, template: "<ui5-dialog [open]=\"open()\" (ui5BeforeClose)=\"cancel.emit()\">\n  <div slot=\"header\" class=\"add-card-dialog__header\">\n    <ui5-title level=\"H5\">Add Card</ui5-title>\n  </div>\n  <div class=\"add-card-dialog\">\n    @if (availableCards().length === 0) {\n      <p class=\"add-card-dialog__empty\">No cards available.</p>\n    }\n    @for (ac of availableCards(); track ac.id) {\n      @let alreadyAdded = addedCardsIds().has(ac.id);\n      <div\n        class=\"add-card-dialog__item\"\n        [class.add-card-dialog__item--disabled]=\"alreadyAdded\"\n      >\n        <ui5-checkbox\n          [checked]=\"alreadyAdded || selectedIds().has(ac.id)\"\n          [disabled]=\"alreadyAdded\"\n          (ui5Change)=\"toggle(ac.id)\"\n          [text]=\"ac.label || ac.component\"\n        />\n      </div>\n    }\n  </div>\n  <div slot=\"footer\" class=\"add-card-dialog__footer\">\n    <ui5-button design=\"Emphasized\" (click)=\"confirmAdd()\">Add</ui5-button>\n    <ui5-button design=\"Transparent\" (click)=\"cancel.emit()\">Cancel</ui5-button>\n  </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.add-card-dialog{margin:-1rem;min-width:300px}.add-card-dialog__header{display:flex;align-items:flex-start;padding:.75rem 1rem}.add-card-dialog__item{display:flex;align-items:center;padding:.5rem 1rem;border-bottom:1px solid var(--sapList_BorderColor, #e5e5e5)}.add-card-dialog__item:last-child{border-bottom:none}.add-card-dialog__item--disabled{opacity:.8}.add-card-dialog__empty{padding:1rem;margin:0;color:var(--sapContent_LabelColor, #6a6d70);font-size:.875rem}.add-card-dialog__footer{display:flex;justify-content:flex-end;gap:.5rem;padding:.5rem 1rem;margin:0 -1rem}\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: CheckBox, selector: "ui5-checkbox, [ui5-checkbox]", inputs: ["accessibleNameRef", "accessibleName", "disabled", "readonly", "displayOnly", "required", "indeterminate", "checked", "text", "valueState", "wrappingType", "name", "value"], outputs: ["ui5Change"], exportAs: ["ui5CheckBox"] }, { 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: AddCardDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'mfp-add-card-dialog', encapsulation: ViewEncapsulation.ShadowDom, imports: [Button, CheckBox, Dialog, Title], template: "<ui5-dialog [open]=\"open()\" (ui5BeforeClose)=\"cancel.emit()\">\n  <div slot=\"header\" class=\"add-card-dialog__header\">\n    <ui5-title level=\"H5\">Add Card</ui5-title>\n  </div>\n  <div class=\"add-card-dialog\">\n    @if (availableCards().length === 0) {\n      <p class=\"add-card-dialog__empty\">No cards available.</p>\n    }\n    @for (ac of availableCards(); track ac.id) {\n      @let alreadyAdded = addedCardsIds().has(ac.id);\n      <div\n        class=\"add-card-dialog__item\"\n        [class.add-card-dialog__item--disabled]=\"alreadyAdded\"\n      >\n        <ui5-checkbox\n          [checked]=\"alreadyAdded || selectedIds().has(ac.id)\"\n          [disabled]=\"alreadyAdded\"\n          (ui5Change)=\"toggle(ac.id)\"\n          [text]=\"ac.label || ac.component\"\n        />\n      </div>\n    }\n  </div>\n  <div slot=\"footer\" class=\"add-card-dialog__footer\">\n    <ui5-button design=\"Emphasized\" (click)=\"confirmAdd()\">Add</ui5-button>\n    <ui5-button design=\"Transparent\" (click)=\"cancel.emit()\">Cancel</ui5-button>\n  </div>\n</ui5-dialog>\n", styles: [":host{display:contents}.add-card-dialog{margin:-1rem;min-width:300px}.add-card-dialog__header{display:flex;align-items:flex-start;padding:.75rem 1rem}.add-card-dialog__item{display:flex;align-items:center;padding:.5rem 1rem;border-bottom:1px solid var(--sapList_BorderColor, #e5e5e5)}.add-card-dialog__item:last-child{border-bottom:none}.add-card-dialog__item--disabled{opacity:.8}.add-card-dialog__empty{padding:1rem;margin:0;color:var(--sapContent_LabelColor, #6a6d70);font-size:.875rem}.add-card-dialog__footer{display:flex;justify-content:flex-end;gap:.5rem;padding:.5rem 1rem;margin:0 -1rem}\n"] }]
+        }], 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"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
+
+const ELEMENT_SELECTOR_PATTERN = /^[a-z](?:[a-z0-9-]*)$/;
+const dashboardCardRegistry = new Map();
+function addComponentToRegistry(componentTypes) {
+    for (const componentType of componentTypes) {
+        const mirror = reflectComponentType(componentType);
+        if (!mirror) {
+            throw new Error(`Dashboard card registration failed: "${getTypeName(componentType)}" is not an Angular component.`);
+        }
+        if (!isStandalone(componentType)) {
+            throw new Error(`Dashboard card registration failed: "${mirror.selector}" must be a standalone Angular component.`);
+        }
+        const selector = toElementSelector(mirror.selector, componentType);
+        const existing = dashboardCardRegistry.get(selector);
+        if (existing && existing.componentType !== componentType) {
+            throw new Error(`Dashboard card registration failed: selector "${selector}" is already registered.`);
+        }
+        dashboardCardRegistry.set(selector, {
+            componentType,
+            selector,
+            inputs: createInputMap(mirror.inputs),
+        });
+    }
+}
+function getRegisteredDashboardCardComponent(selector) {
+    return dashboardCardRegistry.get(selector);
+}
+function resetDashboardCardRegistry() {
+    dashboardCardRegistry.clear();
+}
+function warnForUnknownDashboardCardInput(selector, inputName) {
+    if (!isDevMode())
+        return;
+    console.warn(`Dashboard card "${selector}" ignores unknown Angular input "${inputName}".`);
+}
+function createInputMap(inputs) {
+    const bindings = new Map();
+    for (const input of inputs) {
+        bindings.set(input.templateName, input.templateName);
+        bindings.set(input.propName, input.templateName);
+    }
+    return bindings;
+}
+function toElementSelector(selector, componentType) {
+    const normalized = selector.trim();
+    if (!ELEMENT_SELECTOR_PATTERN.test(normalized)) {
+        throw new Error(`Dashboard card registration failed: "${getTypeName(componentType)}" must use a single element selector. Received "${selector}".`);
+    }
+    return normalized;
+}
+function getTypeName(componentType) {
+    return componentType.name.replace(/^_+/, '') || 'AnonymousComponent';
+}
+
+const CARD_TYPES = {
+    WC: 'wc',
+    ANGULAR: 'angular',
+    SAP_UI: 'sap-ui',
+};
+
+function mountAngularCard(cfg, angularHost, onCleanup) {
+    const registeredComponent = getRegisteredDashboardCardComponent(cfg.component);
+    if (!registeredComponent) {
+        console.warn(`[DashboardCard] Angular component "${cfg.component}" is not registered`);
+        return;
+    }
+    const componentRef = angularHost.createComponent(registeredComponent.componentType);
+    for (const [inputName, value] of Object.entries(cfg.componentInputs ?? {})) {
+        const templateName = registeredComponent.inputs.get(inputName);
+        if (!templateName) {
+            warnForUnknownDashboardCardInput(cfg.component, inputName);
+            continue;
+        }
+        componentRef.setInput(templateName, value);
+    }
+    componentRef.changeDetectorRef.detectChanges();
+    onCleanup(() => {
+        angularHost.clear();
+    });
+}
+
+function mountSapCard(cfg, container, onCleanup) {
+    const host = container.element.nativeElement;
+    let sapContainer = null;
+    let isDestroyed = false;
+    const sapRequire = window.sap?.ui?.require;
+    if (sapRequire) {
+        sapRequire(['sap/ui/core/ComponentContainer'], (ComponentContainer) => {
+            if (isDestroyed)
+                return;
+            const container = new ComponentContainer({
+                name: cfg.component,
+                manifest: true,
+                async: true,
+                settings: cfg.componentInputs ?? {},
+            });
+            container.placeAt(host);
+            sapContainer = container;
+        });
+    }
+    else {
+        console.error('[DashboardCard] SAP UI5 is not available on window.sap');
+    }
+    onCleanup(() => {
+        isDestroyed = true;
+        sapContainer?.destroy();
+        host.innerHTML = '';
+    });
+}
+
+function mountWcCard(cfg, container, onCleanup, renderer) {
+    const host = container.element.nativeElement;
+    const element = renderer.createElement(cfg.component);
+    for (const [key, value] of Object.entries(cfg.componentInputs ?? {})) {
+        renderer.setProperty(element, key, value);
+    }
+    renderer.appendChild(host, element);
+    onCleanup(() => {
+        host.innerHTML = '';
+    });
+}
+
+class DashboardCard {
+    card = input.required(...(ngDevMode ? [{ debugName: "card" }] : /* istanbul ignore next */ []));
+    editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
+    removeCard = output();
+    gridColumn = computed(() => {
+        const width = this.card().w ?? 12;
+        return this.createGridTrack(this.card().x, width);
+    }, ...(ngDevMode ? [{ debugName: "gridColumn" }] : /* istanbul ignore next */ []));
+    gridRow = computed(() => {
+        const height = this.card().h ?? 100;
+        return this.createGridTrack(this.card().y, height);
+    }, ...(ngDevMode ? [{ debugName: "gridRow" }] : /* istanbul ignore next */ []));
+    host = viewChild('elementHost', { ...(ngDevMode ? { debugName: "host" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+    renderer = inject(Renderer2);
+    constructor() {
+        effect((onCleanup) => {
+            const host = this.host();
+            const cfg = this.card();
+            if (!host || !cfg.component)
+                return;
+            host.clear();
+            host.element.nativeElement.innerHTML = '';
+            switch (cfg.type) {
+                case CARD_TYPES.SAP_UI:
+                    mountSapCard(cfg, host, onCleanup);
+                    break;
+                case CARD_TYPES.ANGULAR:
+                    mountAngularCard(cfg, host, onCleanup);
+                    break;
+                case CARD_TYPES.WC:
+                default:
+                    mountWcCard(cfg, host, onCleanup, this.renderer);
+                    break;
+            }
+        });
+    }
+    createGridTrack(start, span) {
+        if (start === undefined) {
+            return `span ${span}`;
+        }
+        return `${start + 1} / span ${span}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DashboardCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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\">\n    @if (editMode()) {\n      <div class=\"remove-wrapper\">\n        <ui5-button\n          class=\"card__remove\"\n          design=\"Default\"\n          icon=\"decline\"\n          (click)=\"removeCard.emit()\"\n        />\n      </div>\n    }\n    <div\n      [style.pointer-events]=\"editMode() ? 'none' : 'auto'\"\n      class=\"component-host\"\n    >\n      <div #elementHost></div>\n    </div>\n  </div>\n} @else {\n  <div class=\"card\">\n    <div\n      [style.pointer-events]=\"editMode() ? 'none' : 'auto'\"\n      class=\"card__body\"\n    >\n      <ng-content />\n    </div>\n  </div>\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:0 .5rem}.component-host{height:100%}.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DashboardCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'mfp-dashboard-card', imports: [Button], encapsulation: ViewEncapsulation.Emulated, host: {
+                        '[style.grid-column]': 'gridColumn()',
+                        '[style.grid-row]': 'gridRow()',
+                    }, template: "@if (card().component) {\n  <div class=\"component-card\">\n    @if (editMode()) {\n      <div class=\"remove-wrapper\">\n        <ui5-button\n          class=\"card__remove\"\n          design=\"Default\"\n          icon=\"decline\"\n          (click)=\"removeCard.emit()\"\n        />\n      </div>\n    }\n    <div\n      [style.pointer-events]=\"editMode() ? 'none' : 'auto'\"\n      class=\"component-host\"\n    >\n      <div #elementHost></div>\n    </div>\n  </div>\n} @else {\n  <div class=\"card\">\n    <div\n      [style.pointer-events]=\"editMode() ? 'none' : 'auto'\"\n      class=\"card__body\"\n    >\n      <ng-content />\n    </div>\n  </div>\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:0 .5rem}.component-host{height:100%}.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"] }]
+        }], 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 }] }] } });
+
+const COMPACT_BREAKPOINT = 726;
+const CELL_HEIGHT = 10;
+
+class DashboardSection {
+    section = input.required(...(ngDevMode ? [{ debugName: "section" }] : /* istanbul ignore next */ []));
+    cards = input([], ...(ngDevMode ? [{ debugName: "cards" }] : /* istanbul ignore next */ []));
+    columns = input(12, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
+    removeSection = output();
+    removeCard = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DashboardSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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": "\"span \" + (section().w ?? 12)" } }, 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      (click)=\"removeSection.emit()\"\n    >\n    </ui5-button>\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()\">\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:1.25rem .75rem .75rem}.section--edit{border-color:var(--sapGroup_ContentBorderColor, #d9d9d9)}.section__remove{position:absolute;top:-.75rem;right:-.75rem;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-template-columns:repeat(var(--cols, 12),1fr);grid-auto-rows:var(--row-height, 10px);gap:var(--row-gap, 0px)}@media(max-width:599px){.section__grid{grid-template-columns:1fr}}@media(min-width:600px)and (max-width:1023px){.section__grid{grid-template-columns:repeat(8,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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DashboardSection, decorators: [{
+            type: Component,
+            args: [{ selector: 'mfp-dashboard-section', imports: [DashboardCard, Button], encapsulation: ViewEncapsulation.Emulated, host: {
+                        '[style.grid-column]': '"span " + (section().w ?? 12)',
+                    }, 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      (click)=\"removeSection.emit()\"\n    >\n    </ui5-button>\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()\">\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:1.25rem .75rem .75rem}.section--edit{border-color:var(--sapGroup_ContentBorderColor, #d9d9d9)}.section__remove{position:absolute;top:-.75rem;right:-.75rem;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-template-columns:repeat(var(--cols, 12),1fr);grid-auto-rows:var(--row-height, 10px);gap:var(--row-gap, 0px)}@media(max-width:599px){.section__grid{grid-template-columns:1fr}}@media(min-width:600px)and (max-width:1023px){.section__grid{grid-template-columns:repeat(8,1fr)}}\n"] }]
+        }], 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"] }] } });
+
+document.body.classList.add('ui5-content-density-compact');
+class Dashboard {
+    static registerAngularComponents(componentTypes) {
+        addComponentToRegistry(componentTypes);
+    }
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    sections = model([], ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+    cards = model([], ...(ngDevMode ? [{ debugName: "cards" }] : /* istanbul ignore next */ []));
+    availableCards = input([], ...(ngDevMode ? [{ debugName: "availableCards" }] : /* istanbul ignore next */ []));
+    saved = output();
+    actionButtonClick = output();
+    editMode = signal(false, ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
+    compactToolbar = signal(false, ...(ngDevMode ? [{ debugName: "compactToolbar" }] : /* istanbul ignore next */ []));
+    toolbarMenuOpen = signal(false, ...(ngDevMode ? [{ debugName: "toolbarMenuOpen" }] : /* istanbul ignore next */ []));
+    sectionsSnapshot = [];
+    cardsSnapshot = [];
+    gridStackItems = viewChild.required('grid');
+    resizeObserver;
+    hostEl = inject((ElementRef));
+    gridOptions = computed(() => ({
+        cellHeight: CELL_HEIGHT,
+        disableResize: !this.editMode(),
+        disableDrag: !this.editMode(),
+        columnOpts: {
+            breakpointForWindow: true,
+            breakpoints: [
+                { w: 1440, c: 12, layout: 'none' },
+                { w: 1024, c: 8, layout: 'compact' },
+                { w: 600, c: 1, layout: 'list' },
+            ],
+        },
+    }), ...(ngDevMode ? [{ debugName: "gridOptions" }] : /* istanbul ignore next */ []));
+    cardDialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "cardDialogOpen" }] : /* istanbul ignore next */ []));
+    customActions = computed(() => this.config().customActions ?? [], ...(ngDevMode ? [{ debugName: "customActions" }] : /* istanbul ignore next */ []));
+    addedCardsIds = computed(() => new Set(this.cards().map((c) => c.id)), ...(ngDevMode ? [{ debugName: "addedCardsIds" }] : /* istanbul ignore next */ []));
+    editViewButton = computed(() => ({
+        icon: 'action-settings',
+        design: 'Transparent',
+        tooltip: 'Edit View',
+        text: '',
+        ...this.config().buttonsSettings?.editViewButton,
+    }), ...(ngDevMode ? [{ debugName: "editViewButton" }] : /* istanbul ignore next */ []));
+    addCardButton = computed(() => ({
+        icon: '',
+        design: 'Default',
+        tooltip: '',
+        text: '+ Add Card',
+        ...this.config().buttonsSettings?.addCardButton,
+    }), ...(ngDevMode ? [{ debugName: "addCardButton" }] : /* istanbul ignore next */ []));
+    sectionCards = computed(() => {
+        const all = this.cards();
+        return (sectionId) => all.filter((c) => c.sectionId === sectionId);
+    }, ...(ngDevMode ? [{ debugName: "sectionCards" }] : /* istanbul ignore next */ []));
+    cardsPosition = new Map();
+    looseCards = linkedSignal(() => this.cards().filter((c) => !c.sectionId), ...(ngDevMode ? [{ debugName: "looseCards" }] : /* istanbul ignore next */ []));
+    newGridStackNodes = [];
+    ngOnInit() {
+        this.resizeObserver = new ResizeObserver((entries) => {
+            const width = entries[0]?.contentRect.width ?? 0;
+            this.compactToolbar.set(width < COMPACT_BREAKPOINT);
+        });
+        this.resizeObserver.observe(this.hostEl.nativeElement);
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+    }
+    onMenuItemClick(actionId, event) {
+        if (actionId === 'edit-view') {
+            this.enterEditMode();
+            return;
+        }
+        const action = this.customActions().find((a) => a.action === actionId);
+        if (action) {
+            this.actionButtonClick.emit({ event: event, action });
+        }
+    }
+    enterEditMode() {
+        const gridStackNodes = this.gridStackItems()
+            .gridstackItems?.toArray()
+            .map((node) => node.options);
+        if (gridStackNodes) {
+            this.saveCardsPosition(gridStackNodes);
+        }
+        this.sectionsSnapshot = [...this.sections()];
+        this.cardsSnapshot = [...this.cards()];
+        this.editMode.set(true);
+    }
+    saveEdit() {
+        this.saveCardsPosition(this.newGridStackNodes);
+        this.saved.emit({
+            sections: this.sections(),
+            cards: this.cards().map((c) => {
+                const pos = this.cardsPosition.get(c.id);
+                return { ...c, x: pos?.x, y: pos?.y };
+            }),
+        });
+        this.editMode.set(false);
+    }
+    cancelEdit() {
+        this.sections.set(this.sectionsSnapshot);
+        this.cards.set(this.cardsSnapshot.map((c) => {
+            const pos = this.cardsPosition.get(c.id);
+            return { ...c, x: pos?.x, y: pos?.y };
+        }));
+        this.cardDialogOpen.set(false);
+        this.editMode.set(false);
+    }
+    removeSection(id) {
+        this.sections.update((list) => list.filter((s) => s.id !== id));
+        this.cards.update((list) => list.filter((c) => c.sectionId !== id));
+    }
+    removeCard(id) {
+        this.cardsPosition.delete(id);
+        this.cards.update((list) => list.filter((c) => c.id !== id));
+    }
+    openCardPanel() {
+        this.cardDialogOpen.set(true);
+    }
+    closeCardPanel() {
+        this.cardDialogOpen.set(false);
+    }
+    onCardsAdded(cards) {
+        if (cards.length > 0) {
+            this.cards.update((list) => [
+                ...list,
+                ...cards.map((ac) => ({
+                    ...ac,
+                })),
+            ]);
+        }
+        this.closeCardPanel();
+    }
+    onOrderChange(event) {
+        this.newGridStackNodes = event.nodes;
+    }
+    saveCardsPosition(items) {
+        items.forEach((node) => {
+            if (node.id) {
+                this.cardsPosition.set(node.id, { x: node.x, y: node.y });
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Dashboard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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 } }, outputs: { sections: "sectionsChange", cards: "cardsChange", saved: "saved", actionButtonClick: "actionButtonClick" }, host: { properties: { "style.background-image": "config().backgroundImageUrl ? \"url(\" + config().backgroundImageUrl + \")\" : null" } }, viewQueries: [{ propertyName: "gridStackItems", first: true, predicate: ["grid"], 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        @if (config().title) {\n          <ui5-title level=\"H2\" size=\"H2\" wrapping-type=\"Normal\">{{\n            config().title\n          }}</ui5-title>\n        }\n        @if (config().description) {\n          <ui5-text>{{ config().description }}</ui5-text>\n        }\n      </div>\n\n      <div class=\"mfp-dashboard__toolbar\">\n        @if (editMode()) {\n          <ui5-button\n            id=\"add-card-btn\"\n            [design]=\"addCardButton().design\"\n            [icon]=\"addCardButton().icon\"\n            [tooltip]=\"addCardButton().tooltip\"\n            (click)=\"openCardPanel()\"\n            >{{ addCardButton().text }}</ui5-button\n          >\n        } @else if (compactToolbar()) {\n          <ui5-button\n            #menuBtn\n            design=\"Transparent\"\n            icon=\"menu2\"\n            tooltip=\"Actions\"\n            (click)=\"toolbarMenuOpen.update((v) => !v)\"\n          ></ui5-button>\n          <ui5-menu\n            [open]=\"toolbarMenuOpen()\"\n            [opener]=\"menuBtn.element\"\n            (ui5Open)=\"toolbarMenuOpen.set(true)\"\n            (ui5Close)=\"toolbarMenuOpen.set(false)\"\n            (ui5ItemClick)=\"\n              onMenuItemClick(\n                $any($event).detail.item.dataset['action'],\n                $event\n              )\n            \"\n          >\n            @for (action of customActions(); track action.action) {\n              <ui5-menu-item\n                [icon]=\"action.icon ?? ''\"\n                [text]=\"action.text ?? ''\"\n                [attr.data-action]=\"action.action\"\n              ></ui5-menu-item>\n            }\n            @if (config().editable) {\n              <ui5-menu-separator></ui5-menu-separator>\n              <ui5-menu-item\n                [icon]=\"editViewButton().icon\"\n                [text]=\"editViewButton().text || 'Edit View'\"\n                data-action=\"edit-view\"\n              ></ui5-menu-item>\n            }\n          </ui5-menu>\n        } @else {\n          @for (action of customActions(); track action.action) {\n            <ui5-button\n              [design]=\"action.design ?? 'Default'\"\n              [icon]=\"action.icon ?? ''\"\n              [endIcon]=\"action?.endIcon\"\n              [tooltip]=\"action.tooltip ?? ''\"\n              (click)=\"\n                actionButtonClick.emit({ event: $event, action: action })\n              \"\n              >{{ action.text }}</ui5-button\n            >\n          }\n          @if (config().editable) {\n            <ui5-button\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      <slot name=\"dashboard-subheader\"></slot>\n    </div>\n  </div>\n  <div class=\"mfp-sections-container\">\n    @for (section of sections(); track section.id) {\n      <mfp-dashboard-section\n        [section]=\"section\"\n        [cards]=\"sectionCards()(section.id)\"\n        [columns]=\"12\"\n        [editMode]=\"editMode()\"\n        (removeSection)=\"removeSection(section.id)\"\n        (removeCard)=\"removeCard($event)\"\n      />\n    }\n  </div>\n  <gridstack #grid (changeCB)=\"onOrderChange($event)\" [options]=\"gridOptions()\">\n    @for (card of looseCards(); track card.id) {\n      <gridstack-item\n        [style.cursor]=\"editMode() ? 'pointer' : 'auto'\"\n        [options]=\"card\"\n      >\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()\">Save</ui5-button>\n      <ui5-button design=\"Transparent\" (click)=\"cancelEdit()\"\n        >Cancel</ui5-button\n      >\n    </div>\n  }\n</div>\n\n<mfp-add-card-dialog\n  [open]=\"cardDialogOpen()\"\n  [availableCards]=\"availableCards()\"\n  [addedCardsIds]=\"addedCardsIds()\"\n  (confirm)=\"onCardsAdded($event)\"\n  (cancel)=\"closeCardPanel()\"\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;margin:0;padding:0;min-height:100%;background:var(--sapShellColor, #354a5e);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:local}.mfp-dashboard{padding:2rem}.mfp-sections-container{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:auto;align-content:start;gap:1rem}@media(max-width:726px){.mfp-sections-container{grid-template-columns:1fr}}@media(min-width:727px)and (max-width:1200px){.mfp-sections-container{grid-template-columns:repeat(8,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}.mfp-dashboard__header{display:flex;flex-direction:column;gap:.25rem}.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:fixed;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}\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: AddCardDialog, selector: "mfp-add-card-dialog", inputs: ["availableCards", "addedCardsIds", "open"], outputs: ["confirm", "cancel"] }, { 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: 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"] }, { kind: "component", type: Text, selector: "ui5-text, [ui5-text]", inputs: ["maxLines", "emptyIndicatorMode"], exportAs: ["ui5Text"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Dashboard, decorators: [{
+            type: Component,
+            args: [{ selector: 'mfp-dashboard', imports: [
+                        GridstackComponent,
+                        GridstackItemComponent,
+                        AddCardDialog,
+                        DashboardSection,
+                        DashboardCard,
+                        Button,
+                        Menu,
+                        MenuItem,
+                        MenuSeparator,
+                        Title,
+                        Text,
+                    ], encapsulation: ViewEncapsulation.None, host: {
+                        '[style.background-image]': 'config().backgroundImageUrl ? "url(" + config().backgroundImageUrl + ")" : null',
+                    }, 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        @if (config().title) {\n          <ui5-title level=\"H2\" size=\"H2\" wrapping-type=\"Normal\">{{\n            config().title\n          }}</ui5-title>\n        }\n        @if (config().description) {\n          <ui5-text>{{ config().description }}</ui5-text>\n        }\n      </div>\n\n      <div class=\"mfp-dashboard__toolbar\">\n        @if (editMode()) {\n          <ui5-button\n            id=\"add-card-btn\"\n            [design]=\"addCardButton().design\"\n            [icon]=\"addCardButton().icon\"\n            [tooltip]=\"addCardButton().tooltip\"\n            (click)=\"openCardPanel()\"\n            >{{ addCardButton().text }}</ui5-button\n          >\n        } @else if (compactToolbar()) {\n          <ui5-button\n            #menuBtn\n            design=\"Transparent\"\n            icon=\"menu2\"\n            tooltip=\"Actions\"\n            (click)=\"toolbarMenuOpen.update((v) => !v)\"\n          ></ui5-button>\n          <ui5-menu\n            [open]=\"toolbarMenuOpen()\"\n            [opener]=\"menuBtn.element\"\n            (ui5Open)=\"toolbarMenuOpen.set(true)\"\n            (ui5Close)=\"toolbarMenuOpen.set(false)\"\n            (ui5ItemClick)=\"\n              onMenuItemClick(\n                $any($event).detail.item.dataset['action'],\n                $event\n              )\n            \"\n          >\n            @for (action of customActions(); track action.action) {\n              <ui5-menu-item\n                [icon]=\"action.icon ?? ''\"\n                [text]=\"action.text ?? ''\"\n                [attr.data-action]=\"action.action\"\n              ></ui5-menu-item>\n            }\n            @if (config().editable) {\n              <ui5-menu-separator></ui5-menu-separator>\n              <ui5-menu-item\n                [icon]=\"editViewButton().icon\"\n                [text]=\"editViewButton().text || 'Edit View'\"\n                data-action=\"edit-view\"\n              ></ui5-menu-item>\n            }\n          </ui5-menu>\n        } @else {\n          @for (action of customActions(); track action.action) {\n            <ui5-button\n              [design]=\"action.design ?? 'Default'\"\n              [icon]=\"action.icon ?? ''\"\n              [endIcon]=\"action?.endIcon\"\n              [tooltip]=\"action.tooltip ?? ''\"\n              (click)=\"\n                actionButtonClick.emit({ event: $event, action: action })\n              \"\n              >{{ action.text }}</ui5-button\n            >\n          }\n          @if (config().editable) {\n            <ui5-button\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      <slot name=\"dashboard-subheader\"></slot>\n    </div>\n  </div>\n  <div class=\"mfp-sections-container\">\n    @for (section of sections(); track section.id) {\n      <mfp-dashboard-section\n        [section]=\"section\"\n        [cards]=\"sectionCards()(section.id)\"\n        [columns]=\"12\"\n        [editMode]=\"editMode()\"\n        (removeSection)=\"removeSection(section.id)\"\n        (removeCard)=\"removeCard($event)\"\n      />\n    }\n  </div>\n  <gridstack #grid (changeCB)=\"onOrderChange($event)\" [options]=\"gridOptions()\">\n    @for (card of looseCards(); track card.id) {\n      <gridstack-item\n        [style.cursor]=\"editMode() ? 'pointer' : 'auto'\"\n        [options]=\"card\"\n      >\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()\">Save</ui5-button>\n      <ui5-button design=\"Transparent\" (click)=\"cancelEdit()\"\n        >Cancel</ui5-button\n      >\n    </div>\n  }\n</div>\n\n<mfp-add-card-dialog\n  [open]=\"cardDialogOpen()\"\n  [availableCards]=\"availableCards()\"\n  [addedCardsIds]=\"addedCardsIds()\"\n  (confirm)=\"onCardsAdded($event)\"\n  (cancel)=\"closeCardPanel()\"\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;margin:0;padding:0;min-height:100%;background:var(--sapShellColor, #354a5e);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:local}.mfp-dashboard{padding:2rem}.mfp-sections-container{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:auto;align-content:start;gap:1rem}@media(max-width:726px){.mfp-sections-container{grid-template-columns:1fr}}@media(min-width:727px)and (max-width:1200px){.mfp-sections-container{grid-template-columns:repeat(8,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}.mfp-dashboard__header{display:flex;flex-direction:column;gap:.25rem}.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:fixed;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}\n"] }]
+        }], 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 }] }], saved: [{ type: i0.Output, args: ["saved"] }], actionButtonClick: [{ type: i0.Output, args: ["actionButtonClick"] }], gridStackItems: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }] } });
+
+class VisitedServiceCard {
+    serviceType = input.required(...(ngDevMode ? [{ debugName: "serviceType" }] : /* istanbul ignore next */ []));
+    serviceName = input.required(...(ngDevMode ? [{ debugName: "serviceName" }] : /* istanbul ignore next */ []));
+    serviceDescription = input.required(...(ngDevMode ? [{ debugName: "serviceDescription" }] : /* istanbul ignore next */ []));
+    serviceIcon = input.required(...(ngDevMode ? [{ debugName: "serviceIcon" }] : /* istanbul ignore next */ []));
+    path = input.required(...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
+    click = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: VisitedServiceCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: VisitedServiceCard, isStandalone: true, selector: "mfp-visited-service-card", inputs: { serviceType: { classPropertyName: "serviceType", publicName: "serviceType", isSignal: true, isRequired: true, transformFunction: null }, serviceName: { classPropertyName: "serviceName", publicName: "serviceName", isSignal: true, isRequired: true, transformFunction: null }, serviceDescription: { classPropertyName: "serviceDescription", publicName: "serviceDescription", isSignal: true, isRequired: true, transformFunction: null }, serviceIcon: { classPropertyName: "serviceIcon", publicName: "serviceIcon", isSignal: true, isRequired: true, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<div class=\"visited-card-wrapper\" (click)=\"click.emit(path())\">\n  <span class=\"visited-card__type-badge\">{{ serviceType() }}</span>\n  <ui5-card class=\"visited-card\">\n    <ui5-card-header\n      slot=\"header\"\n      [titleText]=\"serviceName()\"\n      [subtitleText]=\"serviceDescription()\"\n      [interactive]=\"true\"\n    >\n      <ui5-icon\n        slot=\"avatar\"\n        [name]=\"serviceIcon()\"\n        class=\"visited-card__icon\"\n      ></ui5-icon>\n    </ui5-card-header>\n  </ui5-card>\n</div>\n", styles: [":host{display:block}.visited-card-wrapper{position:relative;padding-top:.625rem;cursor:pointer}.visited-card{width:100%}.visited-card__type-badge{position:absolute;top:0;right:.75rem;display:inline-block;padding:.125rem .625rem;border-radius:.75rem;background-color:#e8f3ff;color:#0070f2;font-size:var(--sapFontSmallSize, .75rem);font-weight:700;white-space:nowrap;z-index:1}.visited-card__icon{width:2.5rem;height:2.5rem;color:var(--sapHighlightColor, #0070f2)}\n"], dependencies: [{ kind: "component", type: Card, selector: "ui5-card, [ui5-card]", inputs: ["accessibleName", "accessibleNameRef", "loading", "loadingDelay"], exportAs: ["ui5Card"] }, { kind: "component", type: CardHeader, selector: "ui5-card-header, [ui5-card-header]", inputs: ["titleText", "subtitleText", "additionalText", "interactive"], outputs: ["ui5Click"], exportAs: ["ui5CardHeader"] }, { kind: "component", type: Icon, selector: "ui5-icon, [ui5-icon]", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: VisitedServiceCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'mfp-visited-service-card', encapsulation: ViewEncapsulation.ShadowDom, imports: [Card, CardHeader, Icon], template: "<div class=\"visited-card-wrapper\" (click)=\"click.emit(path())\">\n  <span class=\"visited-card__type-badge\">{{ serviceType() }}</span>\n  <ui5-card class=\"visited-card\">\n    <ui5-card-header\n      slot=\"header\"\n      [titleText]=\"serviceName()\"\n      [subtitleText]=\"serviceDescription()\"\n      [interactive]=\"true\"\n    >\n      <ui5-icon\n        slot=\"avatar\"\n        [name]=\"serviceIcon()\"\n        class=\"visited-card__icon\"\n      ></ui5-icon>\n    </ui5-card-header>\n  </ui5-card>\n</div>\n", styles: [":host{display:block}.visited-card-wrapper{position:relative;padding-top:.625rem;cursor:pointer}.visited-card{width:100%}.visited-card__type-badge{position:absolute;top:0;right:.75rem;display:inline-block;padding:.125rem .625rem;border-radius:.75rem;background-color:#e8f3ff;color:#0070f2;font-size:var(--sapFontSmallSize, .75rem);font-weight:700;white-space:nowrap;z-index:1}.visited-card__icon{width:2.5rem;height:2.5rem;color:var(--sapHighlightColor, #0070f2)}\n"] }]
+        }], propDecorators: { serviceType: [{ type: i0.Input, args: [{ isSignal: true, alias: "serviceType", required: true }] }], serviceName: [{ type: i0.Input, args: [{ isSignal: true, alias: "serviceName", required: true }] }], serviceDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "serviceDescription", required: true }] }], serviceIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "serviceIcon", required: true }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: true }] }], click: [{ type: i0.Output, args: ["click"] }] } });
+
+class Favorites {
+    items = [
+        { label: 'Create Account', icon: 'add', action: 'create-account' },
+        { label: 'Start Approval', icon: 'workflow-tasks', action: 'start-approval' },
+        { label: 'Add User to Account', icon: 'person-placeholder', action: 'add-user' },
+    ];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Favorites, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: Favorites, isStandalone: true, selector: "mfp-favorites", ngImport: i0, template: "<div class=\"favorites\">\n  <ui5-title level=\"H5\" class=\"favorites__title\">Favorites</ui5-title>\n  <div class=\"favorites__list\">\n    @for (item of items; track item.action) {\n      <div class=\"favorites__item\">\n        <ui5-icon name=\"{{ item.icon }}\" class=\"favorites__icon\"></ui5-icon>\n        <span class=\"favorites__label\">{{ item.label }}</span>\n        <ui5-button design=\"Transparent\" icon=\"{{ item.icon }}\">{{ item.label }}</ui5-button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.favorites{display:flex;flex-direction:column;height:100%;background:var(--sapTile_Background, #fff);border-radius:var(--_ui5_card_border-radius, .5rem);border:var(--_ui5_card_border, 1px solid var(--sapTile_BorderColor, #e5e5e5));box-shadow:var(--_ui5_card_box_shadow, var(--sapContent_Shadow0));overflow:hidden}.favorites__title{padding:1rem 1rem .5rem;flex-shrink:0}.favorites__list{display:flex;flex-direction:column;flex:1;overflow-y:auto}.favorites__item{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;border-bottom:1px solid var(--sapList_BorderColor, #e5e5e5)}.favorites__item:last-child{border-bottom:none}.favorites__icon{flex-shrink:0;color:var(--sapHighlightColor, #0070f2)}.favorites__label{flex:1;font-size:var(--sapFontSize, .875rem);color:var(--sapTextColor, #32363a)}\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"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: Favorites, decorators: [{
+            type: Component,
+            args: [{ selector: 'mfp-favorites', encapsulation: ViewEncapsulation.ShadowDom, imports: [Button, Icon, Title], template: "<div class=\"favorites\">\n  <ui5-title level=\"H5\" class=\"favorites__title\">Favorites</ui5-title>\n  <div class=\"favorites__list\">\n    @for (item of items; track item.action) {\n      <div class=\"favorites__item\">\n        <ui5-icon name=\"{{ item.icon }}\" class=\"favorites__icon\"></ui5-icon>\n        <span class=\"favorites__label\">{{ item.label }}</span>\n        <ui5-button design=\"Transparent\" icon=\"{{ item.icon }}\">{{ item.label }}</ui5-button>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.favorites{display:flex;flex-direction:column;height:100%;background:var(--sapTile_Background, #fff);border-radius:var(--_ui5_card_border-radius, .5rem);border:var(--_ui5_card_border, 1px solid var(--sapTile_BorderColor, #e5e5e5));box-shadow:var(--_ui5_card_box_shadow, var(--sapContent_Shadow0));overflow:hidden}.favorites__title{padding:1rem 1rem .5rem;flex-shrink:0}.favorites__list{display:flex;flex-direction:column;flex:1;overflow-y:auto}.favorites__item{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;border-bottom:1px solid var(--sapList_BorderColor, #e5e5e5)}.favorites__item:last-child{border-bottom:none}.favorites__icon{flex-shrink:0;color:var(--sapHighlightColor, #0070f2)}.favorites__label{flex:1;font-size:var(--sapFontSize, .875rem);color:var(--sapTextColor, #32363a)}\n"] }]
+        }] });
+
+class ServiceStatusCard {
+    services = [
+        { name: 'API Gateway', icon: 'connected', status: 'operational' },
+        { name: 'Identity Service', icon: 'customer', status: 'operational' },
+        { name: 'Database Cluster', icon: 'database', status: 'degraded' },
+        { name: 'Message Queue', icon: 'email', status: 'operational' },
+        { name: 'Object Storage', icon: 'storage', status: 'maintenance' },
+        { name: 'Audit Log', icon: 'log', status: 'outage' },
+    ];
+    statusConfig = {
+        operational: { label: 'Operational', icon: 'status-positive', colorClass: 'status--operational' },
+        degraded: { label: 'Degraded', icon: 'status-critical', colorClass: 'status--degraded' },
+        outage: { label: 'Outage', icon: 'status-negative', colorClass: 'status--outage' },
+        maintenance: { label: 'Maintenance', icon: 'status-inactive', colorClass: 'status--maintenance' },
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ServiceStatusCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ServiceStatusCard, isStandalone: true, selector: "mfp-service-status-card", ngImport: i0, template: "<div class=\"service-status\">\n  <ui5-title level=\"H5\" class=\"service-status__title\">Service Availability</ui5-title>\n  <div class=\"service-status__list\">\n    @for (service of services; track service.name) {\n      <div class=\"service-status__item\">\n        <ui5-icon name=\"{{ service.icon }}\" class=\"service-status__icon\"></ui5-icon>\n        <span class=\"service-status__name\">{{ service.name }}</span>\n        <div class=\"service-status__status {{ statusConfig[service.status].colorClass }}\">\n          <ui5-icon name=\"{{ statusConfig[service.status].icon }}\" class=\"service-status__status-icon\"></ui5-icon>\n          <span class=\"service-status__status-label\">{{ statusConfig[service.status].label }}</span>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.service-status{display:flex;flex-direction:column;height:100%;background:var(--sapTile_Background, #fff);border-radius:var(--_ui5_card_border-radius, .5rem);border:var(--_ui5_card_border, 1px solid var(--sapTile_BorderColor, #e5e5e5));box-shadow:var(--_ui5_card_box_shadow, var(--sapContent_Shadow0));overflow:hidden}.service-status__title{padding:1rem 1rem .5rem;flex-shrink:0}.service-status__list{display:flex;flex-direction:column;flex:1;overflow-y:auto}.service-status__item{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;border-bottom:1px solid var(--sapList_BorderColor, #e5e5e5)}.service-status__item:last-child{border-bottom:none}.service-status__icon{flex-shrink:0;color:var(--sapHighlightColor, #0070f2)}.service-status__name{flex:1;font-size:var(--sapFontSize, .875rem);color:var(--sapTextColor, #32363a)}.service-status__status{display:flex;align-items:center;gap:.25rem;flex-shrink:0;font-size:.75rem;font-weight:500;border-radius:.75rem;padding:.125rem .5rem}.service-status__status--operational{color:var(--sapPositiveColor, #256f3a);background:var(--sapPositiveBackground, #f1fdf6)}.service-status__status--degraded{color:var(--sapCriticalColor, #e76500);background:var(--sapCriticalBackground, #fef7f1)}.service-status__status--outage{color:var(--sapNegativeColor, #aa0808);background:var(--sapNegativeBackground, #fff1f1)}.service-status__status--maintenance{color:var(--sapNeutralColor, #5b738b);background:var(--sapNeutralBackground, #f5f6f7)}.service-status__status-icon{font-size:.75rem;width:.875rem;height:.875rem}\n"], dependencies: [{ kind: "component", type: Icon, selector: "ui5-icon, [ui5-icon]", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ServiceStatusCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'mfp-service-status-card', encapsulation: ViewEncapsulation.ShadowDom, imports: [Icon, Title], template: "<div class=\"service-status\">\n  <ui5-title level=\"H5\" class=\"service-status__title\">Service Availability</ui5-title>\n  <div class=\"service-status__list\">\n    @for (service of services; track service.name) {\n      <div class=\"service-status__item\">\n        <ui5-icon name=\"{{ service.icon }}\" class=\"service-status__icon\"></ui5-icon>\n        <span class=\"service-status__name\">{{ service.name }}</span>\n        <div class=\"service-status__status {{ statusConfig[service.status].colorClass }}\">\n          <ui5-icon name=\"{{ statusConfig[service.status].icon }}\" class=\"service-status__status-icon\"></ui5-icon>\n          <span class=\"service-status__status-label\">{{ statusConfig[service.status].label }}</span>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.service-status{display:flex;flex-direction:column;height:100%;background:var(--sapTile_Background, #fff);border-radius:var(--_ui5_card_border-radius, .5rem);border:var(--_ui5_card_border, 1px solid var(--sapTile_BorderColor, #e5e5e5));box-shadow:var(--_ui5_card_box_shadow, var(--sapContent_Shadow0));overflow:hidden}.service-status__title{padding:1rem 1rem .5rem;flex-shrink:0}.service-status__list{display:flex;flex-direction:column;flex:1;overflow-y:auto}.service-status__item{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;border-bottom:1px solid var(--sapList_BorderColor, #e5e5e5)}.service-status__item:last-child{border-bottom:none}.service-status__icon{flex-shrink:0;color:var(--sapHighlightColor, #0070f2)}.service-status__name{flex:1;font-size:var(--sapFontSize, .875rem);color:var(--sapTextColor, #32363a)}.service-status__status{display:flex;align-items:center;gap:.25rem;flex-shrink:0;font-size:.75rem;font-weight:500;border-radius:.75rem;padding:.125rem .5rem}.service-status__status--operational{color:var(--sapPositiveColor, #256f3a);background:var(--sapPositiveBackground, #f1fdf6)}.service-status__status--degraded{color:var(--sapCriticalColor, #e76500);background:var(--sapCriticalBackground, #fef7f1)}.service-status__status--outage{color:var(--sapNegativeColor, #aa0808);background:var(--sapNegativeBackground, #fff1f1)}.service-status__status--maintenance{color:var(--sapNeutralColor, #5b738b);background:var(--sapNeutralBackground, #f5f6f7)}.service-status__status-icon{font-size:.75rem;width:.875rem;height:.875rem}\n"] }]
+        }] });
+
+class WhatsNew {
+    headlines = [
+        {
+            title: 'Kubernetes 1.32 Released',
+            description: 'Improved scheduling, new APIs and graduated features.',
+            icon: 'cloud',
+        },
+        {
+            title: 'Angular 20 Signals Stable',
+            description: 'Signal-based reactivity is now production-ready.',
+            icon: 'developer-settings',
+        },
+        {
+            title: 'WebAssembly WASI 2.0 Preview',
+            description: 'System interface advances bring server-side WASM closer.',
+            icon: 'technical-object',
+        },
+        {
+            title: 'OpenTelemetry Hits 1.0',
+            description: 'Unified observability standard lands in enterprise stacks.',
+            icon: 'monitor-payments',
+        },
+        {
+            title: 'Rust Enters Linux Kernel Mainstream',
+            description: 'More subsystems accept Rust driver contributions.',
+            icon: 'settings',
+        },
+        {
+            title: 'TypeScript 5.8 Performance Boost',
+            description: 'Declaration emit is up to 10x faster in large projects.',
+            icon: 'accelerated',
+        },
+    ];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: WhatsNew, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: WhatsNew, isStandalone: true, selector: "mfp-whats-new", ngImport: i0, template: "<div class=\"whats-new\">\n  <ui5-title level=\"H5\" class=\"whats-new__title\">What's New</ui5-title>\n  <ui5-list separators=\"Inner\" class=\"whats-new__list\">\n    @for (item of headlines; track item.title) {\n      <ui5-li icon=\"{{ item.icon }}\" description=\"{{ item.description }}\">\n        {{ item.title }}\n      </ui5-li>\n    }\n  </ui5-list>\n</div>\n", styles: [":host{display:block;height:100%}.whats-new{display:flex;flex-direction:column;height:100%;background:var(--sapTile_Background, #fff);border-radius:var(--_ui5_card_border-radius, .5rem);border:var(--_ui5_card_border, 1px solid var(--sapTile_BorderColor, #e5e5e5));box-shadow:var(--_ui5_card_box_shadow, var(--sapContent_Shadow0));overflow:hidden}.whats-new__title{padding:1rem 1rem .5rem;flex-shrink:0}.whats-new__list{flex:1;overflow-y:auto}\n"], dependencies: [{ 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: ListItemStandard, selector: "ui5-li, [ui5-li]", inputs: ["text", "description", "icon", "iconEnd", "additionalText", "additionalTextState", "movable", "accessibleName", "wrappingType", "type", "accessibilityAttributes", "navigated", "tooltip", "highlight", "selected"], outputs: ["ui5DetailClick"], exportAs: ["ui5ListItemStandard"] }, { kind: "component", type: Title, selector: "ui5-title, [ui5-title]", inputs: ["wrappingType", "level", "size"], exportAs: ["ui5Title"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: WhatsNew, decorators: [{
+            type: Component,
+            args: [{ selector: 'mfp-whats-new', encapsulation: ViewEncapsulation.ShadowDom, imports: [List, ListItemStandard, Title], template: "<div class=\"whats-new\">\n  <ui5-title level=\"H5\" class=\"whats-new__title\">What's New</ui5-title>\n  <ui5-list separators=\"Inner\" class=\"whats-new__list\">\n    @for (item of headlines; track item.title) {\n      <ui5-li icon=\"{{ item.icon }}\" description=\"{{ item.description }}\">\n        {{ item.title }}\n      </ui5-li>\n    }\n  </ui5-list>\n</div>\n", styles: [":host{display:block;height:100%}.whats-new{display:flex;flex-direction:column;height:100%;background:var(--sapTile_Background, #fff);border-radius:var(--_ui5_card_border-radius, .5rem);border:var(--_ui5_card_border, 1px solid var(--sapTile_BorderColor, #e5e5e5));box-shadow:var(--_ui5_card_box_shadow, var(--sapContent_Shadow0));overflow:hidden}.whats-new__title{padding:1rem 1rem .5rem;flex-shrink:0}.whats-new__list{flex:1;overflow-y:auto}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AddCardDialog, CARD_TYPES, Dashboard, DashboardCard, DashboardSection, DeclarativeForm, DeclarativeTable, DeclarativeTableCard, Favorites, ServiceStatusCard, VisitedServiceCard, WhatsNew };
+//# sourceMappingURL=openmfp-ngx.mjs.map