@mmlogic/components 0.3.2 → 0.3.3

package/dist/collection/components/mrd-field/mrd-field.js

@@ -1,11 +1,25 @@
 import { Host, h } from "@stencil/core";
 import { ClientLayoutItemType, ClientLayoutItemFieldDataType, ClientLayoutItemRelationDisplayType, } from "../../types";
+import { t } from "../../utils/i18n";
 export class MrdField {
     constructor() {
         this.locale = navigator.language;
+        this.historyEntries = [];
+        this.currentValue = undefined;
         this.handleChange = (e) => {
+            var _a, _b, _c, _d;
             e.stopPropagation();
-            this.mrdChange.emit(e.detail);
+            const hist = (_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.historyEnabled) !== null && _b !== void 0 ? _b : (_d = (_c = this.item) === null || _c === void 0 ? void 0 : _c.field) === null || _d === void 0 ? void 0 : _d.historyEnabled;
+            if (hist) {
+                this.currentValue = e.detail.value;
+                this.mrdChange.emit({
+                    name: e.detail.name,
+                    value: { current: e.detail.value, history: this.historyEntries },
+                });
+            }
+            else {
+                this.mrdChange.emit(e.detail);
+            }
         };
         this.handleBlur = (e) => {
             e.stopPropagation();
@@ -24,63 +38,139 @@ export class MrdField {
             this.mrdUpload.emit(e.detail);
         };
     }
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
-        const { item, locale, value } = this;
-        if (item.type === ClientLayoutItemType.RELATION) {
-            return (h(Host, null, h("mrd-relation-field", { name: item.name, label: item.label, required: item.required, disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false, locale: locale, relatedClass: item.relatedClass, mostSignificantClass: (_b = item.mostSignificantClass) !== null && _b !== void 0 ? _b : '', displayType: (_c = item.displayType) !== null && _c !== void 0 ? _c : ClientLayoutItemRelationDisplayType.SEARCH, editBehavior: (_d = item.editBehavior) !== null && _d !== void 0 ? _d : null, commonRelation: item.commonRelation, multiple: (_e = item.multiple) !== null && _e !== void 0 ? _e : false, dropdownValues: (_f = item.dropdownValues) !== null && _f !== void 0 ? _f : [], value: value, onMrdChange: this.handleChange, onMrdBlur: this.handleBlur, onMrdSearch: this.handleSearch, onMrdFetchAll: this.handleFetchAll })));
+    componentWillLoad() {
+        this.initHistoryState();
+    }
+    valueChanged() {
+        this.initHistoryState();
+    }
+    initHistoryState() {
+        var _a, _b, _c, _d, _e;
+        const hist = (_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.historyEnabled) !== null && _b !== void 0 ? _b : (_d = (_c = this.item) === null || _c === void 0 ? void 0 : _c.field) === null || _d === void 0 ? void 0 : _d.historyEnabled;
+        if (!hist)
+            return;
+        const raw = this.value;
+        this.currentValue = (_e = raw === null || raw === void 0 ? void 0 : raw.current) !== null && _e !== void 0 ? _e : raw;
+        this.historyEntries = Array.isArray(raw === null || raw === void 0 ? void 0 : raw.history) ? [...raw.history] : [];
+    }
+    getDisplayValue() {
+        var _a, _b, _c, _d;
+        const hist = (_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.historyEnabled) !== null && _b !== void 0 ? _b : (_d = (_c = this.item) === null || _c === void 0 ? void 0 : _c.field) === null || _d === void 0 ? void 0 : _d.historyEnabled;
+        if (hist && this.value !== null && typeof this.value === 'object' && 'current' in this.value) {
+            return this.value.current;
         }
-        if (item.type !== ClientLayoutItemType.FIELD) {
-            return h(Host, null);
+        return this.value;
+    }
+    historyValueInputType() {
+        var _a;
+        switch ((_a = this.item) === null || _a === void 0 ? void 0 : _a.dataType) {
+            case ClientLayoutItemFieldDataType.DATE: return 'date';
+            case ClientLayoutItemFieldDataType.DATETIME: return 'datetime-local';
+            case ClientLayoutItemFieldDataType.TIME: return 'time';
+            case ClientLayoutItemFieldDataType.INTEGER:
+            case ClientLayoutItemFieldDataType.DECIMAL:
+            case ClientLayoutItemFieldDataType.PERCENTAGE: return 'number';
+            case ClientLayoutItemFieldDataType.EMAIL: return 'email';
+            default: return 'text';
         }
+    }
+    emitHistoryChange(entries) {
+        this.historyEntries = entries;
+        this.mrdChange.emit({
+            name: this.item.name,
+            value: { current: this.currentValue, history: entries },
+        });
+    }
+    renderHistoryEditor() {
+        var _a, _b, _c, _d;
+        const hist = (_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.historyEnabled) !== null && _b !== void 0 ? _b : (_d = (_c = this.item) === null || _c === void 0 ? void 0 : _c.field) === null || _d === void 0 ? void 0 : _d.historyEnabled;
+        if (!hist)
+            return null;
+        const { locale } = this;
+        const valueType = this.historyValueInputType();
+        const updateEntry = (i, field, val) => {
+            const updated = this.historyEntries.map((e, idx) => idx === i ? Object.assign(Object.assign({}, e), { [field]: val }) : e);
+            this.emitHistoryChange(updated);
+        };
+        const removeEntry = (i) => {
+            this.emitHistoryChange(this.historyEntries.filter((_, idx) => idx !== i));
+        };
+        const addEntry = () => {
+            this.emitHistoryChange([...this.historyEntries, { value: '', until: '' }]);
+        };
+        return (h("div", { class: "mrd-field__history-editor" }, this.historyEntries.length > 0 && (h("span", { class: "mrd-field__history-editor-label" }, t('history_badge_tooltip', locale))), this.historyEntries.map((entry, i) => (h("div", { key: String(i), class: "mrd-field__history-editor-row" }, h("input", { class: "mrd-field__history-editor-value", type: valueType, value: entry.value, onInput: (e) => updateEntry(i, 'value', e.target.value) }), h("span", { class: "mrd-field__history-editor-sep" }, t('history_until', locale)), h("input", { class: "mrd-field__history-editor-until", type: "date", value: entry.until, onInput: (e) => updateEntry(i, 'until', e.target.value) }), h("button", { type: "button", class: "mrd-field__history-editor-remove", onClick: () => removeEntry(i), "aria-label": t('remove', locale) }, h("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, h("path", { "fill-rule": "evenodd", d: "M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z", "clip-rule": "evenodd" })))))), h("button", { type: "button", class: "mrd-field__history-editor-add", onClick: addEntry }, "+ ", t('add', locale))));
+    }
+    renderLeafField(displayValue) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
+        const { item, locale } = this;
         const commonProps = {
             name: item.name,
             label: item.label,
             required: item.required,
-            disabled: (_g = item.disabled) !== null && _g !== void 0 ? _g : false,
+            disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false,
             locale,
             onMrdChange: this.handleChange,
             onMrdBlur: this.handleBlur,
         };
         switch (item.dataType) {
             case ClientLayoutItemFieldDataType.TEXT:
-                return (h(Host, null, h("mrd-text-field", Object.assign({}, commonProps, { value: (_h = value) !== null && _h !== void 0 ? _h : '', placeholder: (_j = item.placeholder) !== null && _j !== void 0 ? _j : '' }))));
+                return (h("mrd-text-field", Object.assign({}, commonProps, { value: (_b = displayValue) !== null && _b !== void 0 ? _b : '', placeholder: (_c = item.placeholder) !== null && _c !== void 0 ? _c : '' })));
             case ClientLayoutItemFieldDataType.TEXTBLOCK:
-                return (h(Host, null, h("mrd-textarea-field", Object.assign({}, commonProps, { value: (_k = value) !== null && _k !== void 0 ? _k : '', placeholder: (_l = item.placeholder) !== null && _l !== void 0 ? _l : '' }))));
+                return (h("mrd-textarea-field", Object.assign({}, commonProps, { value: (_d = displayValue) !== null && _d !== void 0 ? _d : '', placeholder: (_e = item.placeholder) !== null && _e !== void 0 ? _e : '' })));
             case ClientLayoutItemFieldDataType.INTEGER:
             case ClientLayoutItemFieldDataType.DECIMAL:
             case ClientLayoutItemFieldDataType.PERCENTAGE:
-                return (h(Host, null, h("mrd-number-field", Object.assign({}, commonProps, { value: (_m = value) !== null && _m !== void 0 ? _m : null, dataType: item.dataType, decimalPrecision: (_o = item.decimalPrecision) !== null && _o !== void 0 ? _o : 2, placeholder: (_p = item.placeholder) !== null && _p !== void 0 ? _p : '' }))));
+                return (h("mrd-number-field", Object.assign({}, commonProps, { value: (_f = displayValue) !== null && _f !== void 0 ? _f : null, dataType: item.dataType, decimalPrecision: (_g = item.decimalPrecision) !== null && _g !== void 0 ? _g : 2, placeholder: (_h = item.placeholder) !== null && _h !== void 0 ? _h : '' })));
             case ClientLayoutItemFieldDataType.CURRENCY:
-                return (h(Host, null, h("mrd-currency-field", Object.assign({}, commonProps, { value: (_q = value) !== null && _q !== void 0 ? _q : { amount: null, currency: (_r = item.currencyCode) !== null && _r !== void 0 ? _r : 'EUR' } }))));
+                return (h("mrd-currency-field", Object.assign({}, commonProps, { value: (_j = displayValue) !== null && _j !== void 0 ? _j : { amount: null, currency: (_k = item.currencyCode) !== null && _k !== void 0 ? _k : 'EUR' } })));
             case ClientLayoutItemFieldDataType.BOOLEAN:
-                return (h(Host, null, h("mrd-boolean-field", Object.assign({}, commonProps, { value: (_s = value) !== null && _s !== void 0 ? _s : false }))));
+                return (h("mrd-boolean-field", Object.assign({}, commonProps, { value: (_l = displayValue) !== null && _l !== void 0 ? _l : false })));
             case ClientLayoutItemFieldDataType.DATE:
-                return (h(Host, null, h("mrd-date-field", Object.assign({}, commonProps, { value: (_t = value) !== null && _t !== void 0 ? _t : '' }))));
+                return (h("mrd-date-field", Object.assign({}, commonProps, { value: (_m = displayValue) !== null && _m !== void 0 ? _m : '' })));
             case ClientLayoutItemFieldDataType.DATETIME:
-                return (h(Host, null, h("mrd-datetime-field", Object.assign({}, commonProps, { value: (_u = value) !== null && _u !== void 0 ? _u : '' }))));
+                return (h("mrd-datetime-field", Object.assign({}, commonProps, { value: (_o = displayValue) !== null && _o !== void 0 ? _o : '' })));
             case ClientLayoutItemFieldDataType.TIME:
-                return (h(Host, null, h("mrd-time-field", Object.assign({}, commonProps, { value: (_v = value) !== null && _v !== void 0 ? _v : '' }))));
+                return (h("mrd-time-field", Object.assign({}, commonProps, { value: (_p = displayValue) !== null && _p !== void 0 ? _p : '' })));
             case ClientLayoutItemFieldDataType.EMAIL:
-                return (h(Host, null, h("mrd-email-field", Object.assign({}, commonProps, { value: (_w = value) !== null && _w !== void 0 ? _w : '', placeholder: (_x = item.placeholder) !== null && _x !== void 0 ? _x : '' }))));
+                return (h("mrd-email-field", Object.assign({}, commonProps, { value: (_q = displayValue) !== null && _q !== void 0 ? _q : '', placeholder: (_r = item.placeholder) !== null && _r !== void 0 ? _r : '' })));
             case ClientLayoutItemFieldDataType.HYPERLINK:
-                return (h(Host, null, h("mrd-hyperlink-field", Object.assign({}, commonProps, { value: (_y = value) !== null && _y !== void 0 ? _y : '', placeholder: (_z = item.placeholder) !== null && _z !== void 0 ? _z : '' }))));
+                return (h("mrd-hyperlink-field", Object.assign({}, commonProps, { value: (_s = displayValue) !== null && _s !== void 0 ? _s : '', placeholder: (_t = item.placeholder) !== null && _t !== void 0 ? _t : '' })));
             case ClientLayoutItemFieldDataType.LIST:
-                return (h(Host, null, h("mrd-list-field", Object.assign({}, commonProps, { value: (_0 = value) !== null && _0 !== void 0 ? _0 : '', multiple: (_1 = item.multiple) !== null && _1 !== void 0 ? _1 : false, listItems: (_2 = item.listItems) !== null && _2 !== void 0 ? _2 : [] }))));
+                return (h("mrd-list-field", Object.assign({}, commonProps, { value: (_u = displayValue) !== null && _u !== void 0 ? _u : '', multiple: (_v = item.multiple) !== null && _v !== void 0 ? _v : false, listItems: (_w = item.listItems) !== null && _w !== void 0 ? _w : [] })));
             case ClientLayoutItemFieldDataType.FILE:
-                return (h(Host, null, h("mrd-file-field", Object.assign({}, commonProps, { value: value, accept: (_3 = item.accept) !== null && _3 !== void 0 ? _3 : '', maxSize: (_4 = item.maxSize) !== null && _4 !== void 0 ? _4 : 0, onMrdUpload: this.handleUpload }))));
+                return (h("mrd-file-field", Object.assign({}, commonProps, { value: displayValue, accept: (_x = item.accept) !== null && _x !== void 0 ? _x : '', maxSize: (_y = item.maxSize) !== null && _y !== void 0 ? _y : 0, onMrdUpload: this.handleUpload })));
             case ClientLayoutItemFieldDataType.IMAGE:
-                return (h(Host, null, h("mrd-image-field", Object.assign({}, commonProps, { value: value, accept: (_5 = item.accept) !== null && _5 !== void 0 ? _5 : 'image/*', maxSize: (_6 = item.maxSize) !== null && _6 !== void 0 ? _6 : 0, onMrdUpload: this.handleUpload }))));
+                return (h("mrd-image-field", Object.assign({}, commonProps, { value: displayValue, accept: (_z = item.accept) !== null && _z !== void 0 ? _z : 'image/*', maxSize: (_0 = item.maxSize) !== null && _0 !== void 0 ? _0 : 0, onMrdUpload: this.handleUpload })));
             case ClientLayoutItemFieldDataType.LONGTEXT:
-                return (h(Host, null, h("mrd-longtext-field", Object.assign({}, commonProps, { value: (_7 = value) !== null && _7 !== void 0 ? _7 : '', placeholder: (_8 = item.placeholder) !== null && _8 !== void 0 ? _8 : '' }))));
-            case ClientLayoutItemFieldDataType.JSON:
-                return h(Host, null);
+                return (h("mrd-longtext-field", Object.assign({}, commonProps, { value: (_1 = displayValue) !== null && _1 !== void 0 ? _1 : '', placeholder: (_2 = item.placeholder) !== null && _2 !== void 0 ? _2 : '' })));
             default:
-                return h(Host, null);
+                return null;
         }
     }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        const { item, locale, value } = this;
+        if (item.type === ClientLayoutItemType.RELATION) {
+            return (h(Host, null, h("mrd-relation-field", { name: item.name, label: item.label, required: item.required, disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false, locale: locale, relatedClass: item.relatedClass, mostSignificantClass: (_b = item.mostSignificantClass) !== null && _b !== void 0 ? _b : '', displayType: (_c = item.displayType) !== null && _c !== void 0 ? _c : ClientLayoutItemRelationDisplayType.SEARCH, editBehavior: (_d = item.editBehavior) !== null && _d !== void 0 ? _d : null, commonRelation: item.commonRelation, multiple: (_e = item.multiple) !== null && _e !== void 0 ? _e : false, dropdownValues: (_f = item.dropdownValues) !== null && _f !== void 0 ? _f : [], value: value, onMrdChange: this.handleChange, onMrdBlur: this.handleBlur, onMrdSearch: this.handleSearch, onMrdFetchAll: this.handleFetchAll })));
+        }
+        if (item.type !== ClientLayoutItemType.FIELD) {
+            return h(Host, null);
+        }
+        const displayValue = this.getDisplayValue();
+        return (h(Host, null, h("div", { class: "mrd-field__inner" }, this.renderLeafField(displayValue), this.renderHistoryEditor())));
+    }
     static get is() { return "mrd-field"; }
     static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-field.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-field.css"]
+        };
+    }
     static get properties() {
         return {
             "item": {
@@ -146,6 +236,12 @@ export class MrdField {
             }
         };
     }
+    static get states() {
+        return {
+            "historyEntries": {},
+            "currentValue": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "mrdChange",
@@ -229,4 +325,11 @@ export class MrdField {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
 }

package/dist/collection/components/mrd-field/mrd-field.scss

@@ -0,0 +1,118 @@
+:host {
+  display: block;
+}
+
+.mrd-field__inner {
+  display: block;
+  width: 100%;
+}
+
+.mrd-field__history-editor {
+  margin-top: var(--mrd-space-2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-1);
+}
+
+.mrd-field__history-editor-label {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-xs);
+  font-weight: var(--mrd-font-weight-medium);
+  color: var(--mrd-color-neutral-500);
+}
+
+.mrd-field__history-editor-row {
+  display: flex;
+  align-items: center;
+  gap: var(--mrd-space-2);
+}
+
+.mrd-field__history-editor-sep {
+  flex-shrink: 0;
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-xs);
+  color: var(--mrd-color-neutral-500);
+}
+
+.mrd-field__history-editor-value {
+  flex: 1 1 0;
+  min-width: 0;
+  height: var(--mrd-input-height);
+  padding: 0 var(--mrd-space-3);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-800);
+  background-color: var(--mrd-color-white);
+  border: var(--mrd-border-width) solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius-md);
+  outline: none;
+  transition: border-color var(--mrd-transition-fast), box-shadow var(--mrd-transition-fast);
+}
+
+.mrd-field__history-editor-value:focus {
+  border-color: var(--mrd-color-primary);
+  box-shadow: var(--mrd-shadow-focus);
+}
+
+.mrd-field__history-editor-until {
+  flex: 0 0 10rem;
+  height: var(--mrd-input-height);
+  padding: 0 var(--mrd-space-3);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-800);
+  background-color: var(--mrd-color-white);
+  border: var(--mrd-border-width) solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius-md);
+  outline: none;
+  transition: border-color var(--mrd-transition-fast), box-shadow var(--mrd-transition-fast);
+}
+
+.mrd-field__history-editor-until:focus {
+  border-color: var(--mrd-color-primary);
+  box-shadow: var(--mrd-shadow-focus);
+}
+
+.mrd-field__history-editor-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--mrd-border-radius-sm);
+  color: var(--mrd-color-neutral-400);
+  cursor: pointer;
+  transition: color var(--mrd-transition-fast), background-color var(--mrd-transition-fast);
+}
+
+.mrd-field__history-editor-remove:hover {
+  color: var(--mrd-color-danger);
+  background-color: var(--mrd-color-danger-light);
+}
+
+.mrd-field__history-editor-remove svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.mrd-field__history-editor-add {
+  align-self: flex-start;
+  padding: var(--mrd-space-1) var(--mrd-space-3);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-xs);
+  font-weight: var(--mrd-font-weight-medium);
+  color: var(--mrd-color-primary);
+  background: transparent;
+  border: var(--mrd-border-width) solid var(--mrd-color-primary);
+  border-radius: var(--mrd-border-radius-md);
+  cursor: pointer;
+  transition: background-color var(--mrd-transition-fast), color var(--mrd-transition-fast);
+}
+
+.mrd-field__history-editor-add:hover {
+  background-color: var(--mrd-color-primary-light);
+}

package/dist/collection/components/mrd-form/mrd-form.js

@@ -261,10 +261,10 @@ export class MrdForm {
                 continue;
             const name = item.name;
             if (item.type === ClientLayoutItemType.FIELD) {
-                const value = this.formValues[name];
-                if (value instanceof File)
+                const rawValue = this.formValues[name];
+                if (rawValue instanceof File)
                     continue;
-                const current = this.normalizeFieldValue(value);
+                const current = this.normalizeFieldValue(rawValue);
                 const initial = this.normalizeFieldValue(this.initialValues[name]);
                 if (this.deepEqual(current, initial))
                     continue;

package/dist/collection/components/mrd-layout-section/mrd-layout-section.js

@@ -2,6 +2,7 @@ import { Host, h } from "@stencil/core";
 import { ClientLayoutItemType, ClientLayoutItemFieldDataType, } from "../../types/client-layout";
 import { CellRenderer } from "../../utils/cell-renderer";
 import { t } from "../../utils/i18n";
+import { formatDate } from "../../utils/format";
 export class MrdLayoutSection {
     constructor() {
         /** Items from one layout entry in ClientDashboardMetadata.layouts[]. */
@@ -17,6 +18,8 @@ export class MrdLayoutSection {
         this.searchResultsMap = {};
         this.imagePreviewUrl = null;
         this.imagePreviews = {};
+        this.openHistoryField = null;
+        this.historyClickOutside = null;
         this.searchTimers = {};
         this.handleViewLoadPage = (e, name) => {
             e.stopPropagation();
@@ -40,6 +43,17 @@ export class MrdLayoutSection {
             this.initEmbeddedTables();
             this.emitLoadImages();
         }, 0);
+        this.historyClickOutside = (e) => {
+            if (!this.el.contains(e.target))
+                this.openHistoryField = null;
+        };
+        document.addEventListener('mousedown', this.historyClickOutside);
+    }
+    disconnectedCallback() {
+        if (this.historyClickOutside) {
+            document.removeEventListener('mousedown', this.historyClickOutside);
+            this.historyClickOutside = null;
+        }
     }
     dataChanged(newVal) {
         if (newVal && Object.keys(newVal).length > 0) {
@@ -188,10 +202,31 @@ export class MrdLayoutSection {
         }
         return this.renderSingleFieldValue(item, rawValue);
     }
+    renderHistoryBadge(item, raw) {
+        var _a, _b, _c;
+        const hist = (_a = item.historyEnabled) !== null && _a !== void 0 ? _a : (_b = item.field) === null || _b === void 0 ? void 0 : _b.historyEnabled;
+        if (!hist || !item.name)
+            return null;
+        const history = (_c = raw === null || raw === void 0 ? void 0 : raw.history) !== null && _c !== void 0 ? _c : [];
+        if (!history.length)
+            return null;
+        const sorted = [...history].sort((a, b) => b.until.localeCompare(a.until));
+        const isOpen = this.openHistoryField === item.name;
+        const { locale } = this;
+        return (h("span", { class: "mrd-layout-section__history-wrap" }, h("button", { type: "button", class: "mrd-layout-section__history-btn", title: t('history_badge_tooltip', locale), "aria-label": t('history_badge_tooltip', locale), onClick: (e) => {
+                e.stopPropagation();
+                this.openHistoryField = isOpen ? null : item.name;
+            } }, h("svg", { class: "mrd-layout-section__history-icon", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, h("path", { "fill-rule": "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .207.085.394.22.53l2.5 2.5a.75.75 0 101.06-1.06L10.75 9.69V5z", "clip-rule": "evenodd" }))), isOpen && (h("div", { class: "mrd-layout-section__history-popover", role: "listbox" }, sorted.map((entry, i) => (h("div", { key: String(i), class: "mrd-layout-section__history-entry" }, entry.value, " (", t('history_until', locale), " ", formatDate(entry.until, locale), ")")))))));
+    }
     renderField(item) {
+        var _a, _b;
         if (!item.name)
             return null;
-        const rawValue = this.data[item.name];
+        const raw = this.data[item.name];
+        const hist = (_a = item.historyEnabled) !== null && _a !== void 0 ? _a : (_b = item.field) === null || _b === void 0 ? void 0 : _b.historyEnabled;
+        const rawValue = hist && raw !== null && typeof raw === 'object' && 'current' in raw
+            ? raw.current
+            : raw;
         const renderedValue = this.renderFieldValue(item, rawValue);
         if (item.header) {
             return (h("h1", { class: "mrd-layout-section__field-header", key: item.name }, typeof renderedValue === 'string' ? renderedValue : rawValue != null ? String(rawValue) : item.label));
@@ -201,7 +236,7 @@ export class MrdLayoutSection {
         const isBlock = item.dataType === ClientLayoutItemFieldDataType.TEXTBLOCK
             || item.dataType === ClientLayoutItemFieldDataType.LONGTEXT
             || item.dataType === ClientLayoutItemFieldDataType.JSON;
-        return (h("div", { class: `mrd-layout-section__field${isBlock ? ' mrd-layout-section__field--block' : ''}`, key: item.name }, h("span", { class: "mrd-layout-section__field-label" }, item.label), h("span", { class: "mrd-layout-section__field-value" }, renderedValue)));
+        return (h("div", { class: `mrd-layout-section__field${isBlock ? ' mrd-layout-section__field--block' : ''}`, key: item.name }, h("span", { class: "mrd-layout-section__field-label" }, item.label), h("span", { class: "mrd-layout-section__field-value" }, renderedValue, this.renderHistoryBadge(item, raw))));
     }
     renderRelation(item) {
         var _a, _b, _c;
@@ -296,7 +331,7 @@ export class MrdLayoutSection {
         return (h("div", { class: "mrd-layout-section__modal-backdrop", onClick: () => { this.imagePreviewUrl = null; } }, h("div", { class: "mrd-layout-section__modal", onClick: (e) => e.stopPropagation() }, h("button", { class: "mrd-layout-section__modal-close", onClick: () => { this.imagePreviewUrl = null; } }, "\u2715"), h("img", { class: "mrd-layout-section__modal-image", src: this.imagePreviewUrl, alt: "" }))));
     }
     render() {
-        return (h(Host, { key: '0a3a58f5c80716bc0a7ba1b9468b721706d2ce4a' }, h("div", { key: '7cf63580c584811c1bb84b419e8d13026e432fba', class: "mrd-layout-section" }, this.items.map(item => this.renderItem(item))), this.renderImageModal()));
+        return (h(Host, { key: '39ba6fc1fc823864025ca6a8df4c97b0f4cb96e6' }, h("div", { key: 'b1af15adfec5c699e00546b03b535149b834b6e4', class: "mrd-layout-section" }, this.items.map(item => this.renderItem(item))), this.renderImageModal()));
     }
     static get is() { return "mrd-layout-section"; }
     static get encapsulation() { return "scoped"; }
@@ -439,7 +474,8 @@ export class MrdLayoutSection {
             "searchQueryMap": {},
             "searchResultsMap": {},
             "imagePreviewUrl": {},
-            "imagePreviews": {}
+            "imagePreviews": {},
+            "openHistoryField": {}
         };
     }
     static get events() {

package/dist/collection/components/mrd-layout-section/mrd-layout-section.scss

@@ -24,6 +24,73 @@
   font-weight: var(--mrd-font-weight-medium);
   color: var(--mrd-color-neutral-800);
   word-break: break-word;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mrd-space-1);
+}
+
+.mrd-layout-section__history-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.mrd-layout-section__history-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--mrd-border-radius-sm);
+  color: var(--mrd-color-neutral-400);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: color var(--mrd-transition-fast), background-color var(--mrd-transition-fast);
+}
+
+.mrd-layout-section__history-btn:hover {
+  color: var(--mrd-color-neutral-700);
+  background-color: var(--mrd-color-neutral-100);
+}
+
+.mrd-layout-section__history-btn:focus {
+  outline: none;
+  box-shadow: var(--mrd-shadow-focus);
+}
+
+.mrd-layout-section__history-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.mrd-layout-section__history-popover {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  min-width: 24rem;
+  max-width: 24rem;
+  background-color: var(--mrd-color-white);
+  border: var(--mrd-border-width) solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius-md);
+  box-shadow: var(--mrd-shadow-md);
+  padding: var(--mrd-space-1) 0;
+  z-index: var(--mrd-z-dropdown);
+}
+
+.mrd-layout-section__history-entry {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  font-weight: var(--mrd-font-weight-normal);
+  color: var(--mrd-color-neutral-700);
+  padding: var(--mrd-space-2) var(--mrd-space-3);
+  line-height: var(--mrd-line-height-normal);
+}
+
+.mrd-layout-section__history-entry:not(:last-child) {
+  border-bottom: var(--mrd-border-width) solid var(--mrd-color-neutral-100);
 }
 
 .mrd-layout-section__field-header {

package/dist/collection/dev/app.js

@@ -344,7 +344,7 @@ function renderSectionTabs(layouts) {
   });
 }
 
-function renderSection(index) {
+async function renderSection(index) {
   _activeLayoutIndex = index;
   const generation = ++_sectionGeneration; // snapshot for stale-fetch detection
 
@@ -357,6 +357,11 @@ function renderSection(index) {
   const container = document.getElementById('sections-container');
   container.innerHTML = '';
 
+  if (_dashboardType === 'form') {
+    await renderForm(layout, _dashboardRecord, _dashboardRecord?._links?.self?.href ?? null, container);
+    return;
+  }
+
   const section = document.createElement('mrd-layout-section');
   section.items  = layout.items;
   section.data   = _dashboardRecord ?? { _links: _dashboardData._links ?? {} };
@@ -581,7 +586,7 @@ async function loadForm() {
  * @param record   - existing record for edit mode (null = new record)
  * @param selfHref - absolute URL for PATCH; null = POST (new record)
  */
-async function renderForm(layout, record = null, selfHref = null) {
+async function renderForm(layout, record = null, selfHref = null, containerEl = null) {
   // Build relation metadata map keyed by both relatedClass and mostSignificantClass
   // so lookups work regardless of which value arrives in events (mrdSearch uses mostSignificantClass).
   _relationMeta = {};
@@ -623,10 +628,10 @@ async function renderForm(layout, record = null, selfHref = null) {
     }
   }
 
-  const formPanel = document.getElementById('panel-form');
+  const formPanel = containerEl ?? document.getElementById('panel-form');
   formPanel.innerHTML = `<mrd-form id="live-form" locale="${escHtml(_locale)}"></mrd-form>`;
 
-  const form = document.getElementById('live-form');
+  const form = formPanel.querySelector('#live-form') ?? document.getElementById('live-form');
   // Wait for Stencil to fully initialize this specific instance before setting props.
   // componentOnReady() resolves after componentDidLoad — more reliable than customElements.whenDefined.
   if (typeof form.componentOnReady === 'function') {