@mmlogic/components 0.3.2 → 0.3.3

package/dist/esm/mrd-boolean-field_19.entry.js

@@ -91,6 +91,9 @@ const translations = {
         // mrd-table textblock
         textblock_show_more: 'Meer tonen',
         close: 'Sluiten',
+        // history badge
+        history_until: 'tot',
+        history_badge_tooltip: 'Vorige waarden',
     },
     en: {
         required: 'This field is required',
@@ -150,6 +153,9 @@ const translations = {
         // mrd-table textblock
         textblock_show_more: 'Show more',
         close: 'Close',
+        // history badge
+        history_until: 'until',
+        history_badge_tooltip: 'Previous values',
     },
     ar: {
         required: 'هذا الحقل مطلوب',
@@ -209,6 +215,9 @@ const translations = {
         // mrd-table textblock
         textblock_show_more: 'عرض المزيد',
         close: 'إغلاق',
+        // history badge
+        history_until: 'حتى',
+        history_badge_tooltip: 'القيم السابقة',
     },
     fr: {
         required: 'Ce champ est obligatoire',
@@ -268,11 +277,262 @@ const translations = {
         // mrd-table textblock
         textblock_show_more: 'Voir plus',
         close: 'Fermer',
+        // history badge
+        history_until: "jusqu'au",
+        history_badge_tooltip: 'Valeurs précédentes',
+    },
+    de: {
+        required: 'Dieses Feld ist erforderlich',
+        select_placeholder: 'Option auswählen',
+        search_placeholder: 'Suchen...',
+        upload_file: 'Datei hochladen',
+        choose_file: 'Datei auswählen',
+        clear: 'Löschen',
+        today: 'Heute',
+        invalid_email: 'Bitte geben Sie eine gültige E-Mail-Adresse ein',
+        invalid_url: 'Bitte geben Sie eine gültige URL ein',
+        invalid_number: 'Bitte geben Sie eine gültige Zahl ein',
+        drop_file_here: 'Datei hier ablegen oder',
+        browse: 'durchsuchen',
+        file_too_large: 'Datei ist zu groß',
+        search_results: 'Suchergebnisse',
+        no_results: 'Keine Ergebnisse gefunden',
+        loading: 'Laden...',
+        submit: 'Speichern',
+        cancel: 'Abbrechen',
+        remove: 'Entfernen',
+        add: 'Hinzufügen',
+        yes: 'Ja',
+        no: 'Nein',
+        // mrd-table footer
+        table_of: 'von',
+        download: 'Herunterladen',
+        // mrd-table toolbar
+        table_filter: 'Filtern',
+        table_filter_hide: 'Filter ausblenden',
+        table_filter_active: 'aktiv',
+        table_filter_clear_all: 'Alle Filter löschen',
+        table_new_record: 'Neuer Eintrag',
+        table_export_excel: 'Als Excel exportieren',
+        // mrd-table filter popup
+        filter_sorting: 'Sortierung',
+        filter_ascending: 'Aufsteigend',
+        filter_descending: 'Absteigend',
+        filter_section: 'Filter',
+        filter_apply: 'Anwenden',
+        filter_clear: 'Löschen',
+        filter_contains: 'Enthält',
+        filter_starts_with: 'Beginnt mit',
+        filter_equals: 'Gleich',
+        filter_has_value: 'Hat Wert',
+        filter_is_empty: 'Ist leer',
+        filter_is_not_empty: 'Ist nicht leer',
+        filter_exact: 'Genau',
+        filter_range: 'Bereich',
+        filter_from: 'Von',
+        filter_to: 'Bis',
+        filter_all: 'Alle',
+        filter_select_all: 'Alle',
+        filter_select_none: 'Keine',
+        filter_search_value: 'Suchwert...',
+        filter_no_support: 'Filterung ist für diesen Feldtyp nicht verfügbar.',
+        // mrd-table textblock
+        textblock_show_more: 'Mehr anzeigen',
+        close: 'Schließen',
+        // history badge
+        history_until: 'bis',
+        history_badge_tooltip: 'Vorherige Werte',
+    },
+    es: {
+        required: 'Este campo es obligatorio',
+        select_placeholder: 'Seleccionar una opción',
+        search_placeholder: 'Buscar...',
+        upload_file: 'Subir archivo',
+        choose_file: 'Elegir archivo',
+        clear: 'Borrar',
+        today: 'Hoy',
+        invalid_email: 'Por favor, introduzca una dirección de correo electrónico válida',
+        invalid_url: 'Por favor, introduzca una URL válida',
+        invalid_number: 'Por favor, introduzca un número válido',
+        drop_file_here: 'Suelte el archivo aquí o',
+        browse: 'explorar',
+        file_too_large: 'El archivo es demasiado grande',
+        search_results: 'Resultados de búsqueda',
+        no_results: 'No se encontraron resultados',
+        loading: 'Cargando...',
+        submit: 'Guardar',
+        cancel: 'Cancelar',
+        remove: 'Eliminar',
+        add: 'Añadir',
+        yes: 'Sí',
+        no: 'No',
+        // mrd-table footer
+        table_of: 'de',
+        download: 'Descargar',
+        // mrd-table toolbar
+        table_filter: 'Filtrar',
+        table_filter_hide: 'Ocultar filtro',
+        table_filter_active: 'activo',
+        table_filter_clear_all: 'Borrar todos los filtros',
+        table_new_record: 'Nuevo registro',
+        table_export_excel: 'Exportar a Excel',
+        // mrd-table filter popup
+        filter_sorting: 'Ordenación',
+        filter_ascending: 'Ascendente',
+        filter_descending: 'Descendente',
+        filter_section: 'Filtro',
+        filter_apply: 'Aplicar',
+        filter_clear: 'Borrar',
+        filter_contains: 'Contiene',
+        filter_starts_with: 'Empieza por',
+        filter_equals: 'Igual a',
+        filter_has_value: 'Tiene valor',
+        filter_is_empty: 'Está vacío',
+        filter_is_not_empty: 'No está vacío',
+        filter_exact: 'Exacto',
+        filter_range: 'Rango',
+        filter_from: 'Desde',
+        filter_to: 'Hasta',
+        filter_all: 'Todos',
+        filter_select_all: 'Todos',
+        filter_select_none: 'Ninguno',
+        filter_search_value: 'Valor de búsqueda...',
+        filter_no_support: 'El filtrado no está disponible para este tipo de campo.',
+        // mrd-table textblock
+        textblock_show_more: 'Mostrar más',
+        close: 'Cerrar',
+        // history badge
+        history_until: 'hasta',
+        history_badge_tooltip: 'Valores anteriores',
+    },
+    it: {
+        required: 'Questo campo è obbligatorio',
+        select_placeholder: "Seleziona un'opzione",
+        search_placeholder: 'Cerca...',
+        upload_file: 'Carica file',
+        choose_file: 'Scegli file',
+        clear: 'Cancella',
+        today: 'Oggi',
+        invalid_email: 'Inserisci un indirizzo email valido',
+        invalid_url: 'Inserisci un URL valido',
+        invalid_number: 'Inserisci un numero valido',
+        drop_file_here: 'Trascina il file qui o',
+        browse: 'sfoglia',
+        file_too_large: 'Il file è troppo grande',
+        search_results: 'Risultati della ricerca',
+        no_results: 'Nessun risultato trovato',
+        loading: 'Caricamento...',
+        submit: 'Salva',
+        cancel: 'Annulla',
+        remove: 'Rimuovi',
+        add: 'Aggiungi',
+        yes: 'Sì',
+        no: 'No',
+        // mrd-table footer
+        table_of: 'di',
+        download: 'Scarica',
+        // mrd-table toolbar
+        table_filter: 'Filtra',
+        table_filter_hide: 'Nascondi filtro',
+        table_filter_active: 'attivo',
+        table_filter_clear_all: 'Cancella tutti i filtri',
+        table_new_record: 'Nuovo record',
+        table_export_excel: 'Esporta in Excel',
+        // mrd-table filter popup
+        filter_sorting: 'Ordinamento',
+        filter_ascending: 'Crescente',
+        filter_descending: 'Decrescente',
+        filter_section: 'Filtro',
+        filter_apply: 'Applica',
+        filter_clear: 'Cancella',
+        filter_contains: 'Contiene',
+        filter_starts_with: 'Inizia con',
+        filter_equals: 'Uguale a',
+        filter_has_value: 'Ha valore',
+        filter_is_empty: 'È vuoto',
+        filter_is_not_empty: 'Non è vuoto',
+        filter_exact: 'Esatto',
+        filter_range: 'Intervallo',
+        filter_from: 'Da',
+        filter_to: 'A',
+        filter_all: 'Tutti',
+        filter_select_all: 'Tutti',
+        filter_select_none: 'Nessuno',
+        filter_search_value: 'Valore di ricerca...',
+        filter_no_support: 'Il filtro non è disponibile per questo tipo di campo.',
+        // mrd-table textblock
+        textblock_show_more: 'Mostra altro',
+        close: 'Chiudi',
+        // history badge
+        history_until: 'fino a',
+        history_badge_tooltip: 'Valori precedenti',
+    },
+    uk: {
+        required: "Це поле обов'язкове",
+        select_placeholder: 'Виберіть варіант',
+        search_placeholder: 'Пошук...',
+        upload_file: 'Завантажити файл',
+        choose_file: 'Вибрати файл',
+        clear: 'Очистити',
+        today: 'Сьогодні',
+        invalid_email: 'Будь ласка, введіть дійсну адресу електронної пошти',
+        invalid_url: 'Будь ласка, введіть дійсну URL-адресу',
+        invalid_number: 'Будь ласка, введіть дійсне число',
+        drop_file_here: 'Перетягніть файл сюди або',
+        browse: 'огляд',
+        file_too_large: 'Файл занадто великий',
+        search_results: 'Результати пошуку',
+        no_results: 'Результатів не знайдено',
+        loading: 'Завантаження...',
+        submit: 'Зберегти',
+        cancel: 'Скасувати',
+        remove: 'Видалити',
+        add: 'Додати',
+        yes: 'Так',
+        no: 'Ні',
+        // mrd-table footer
+        table_of: 'з',
+        download: 'Завантажити',
+        // mrd-table toolbar
+        table_filter: 'Фільтрувати',
+        table_filter_hide: 'Сховати фільтр',
+        table_filter_active: 'активний',
+        table_filter_clear_all: 'Очистити всі фільтри',
+        table_new_record: 'Новий запис',
+        table_export_excel: 'Експортувати до Excel',
+        // mrd-table filter popup
+        filter_sorting: 'Сортування',
+        filter_ascending: 'За зростанням',
+        filter_descending: 'За спаданням',
+        filter_section: 'Фільтр',
+        filter_apply: 'Застосувати',
+        filter_clear: 'Очистити',
+        filter_contains: 'Містить',
+        filter_starts_with: 'Починається з',
+        filter_equals: 'Дорівнює',
+        filter_has_value: 'Має значення',
+        filter_is_empty: 'Порожнє',
+        filter_is_not_empty: 'Не порожнє',
+        filter_exact: 'Точно',
+        filter_range: 'Діапазон',
+        filter_from: 'Від',
+        filter_to: 'До',
+        filter_all: 'Всі',
+        filter_select_all: 'Всі',
+        filter_select_none: 'Жодного',
+        filter_search_value: 'Значення для пошуку...',
+        filter_no_support: 'Фільтрування недоступне для цього типу поля.',
+        // mrd-table textblock
+        textblock_show_more: 'Показати більше',
+        close: 'Закрити',
+        // history badge
+        history_until: 'до',
+        history_badge_tooltip: 'Попередні значення',
     },
 };
 function t(key, locale) {
     var _a, _b, _c;
-    const lang = locale.split('-')[0].toLowerCase();
+    const lang = (locale !== null && locale !== void 0 ? locale : 'en').split('-')[0].toLowerCase();
     const dict = (_a = translations[lang]) !== null && _a !== void 0 ? _a : translations['en'];
     return (_c = (_b = dict[key]) !== null && _b !== void 0 ? _b : translations['en'][key]) !== null && _c !== void 0 ? _c : key;
 }
@@ -596,6 +856,8 @@ const MrdEmailField = class {
 };
 MrdEmailField.style = mrdEmailFieldScss();
 
+const mrdFieldScss = () => `.sc-mrd-field-h{display:block}.mrd-field__inner.sc-mrd-field{display:block;width:100%}.mrd-field__history-editor.sc-mrd-field{margin-top:var(--mrd-space-2);display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-field__history-editor-label.sc-mrd-field{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.sc-mrd-field{display:flex;align-items:center;gap:var(--mrd-space-2)}.mrd-field__history-editor-sep.sc-mrd-field{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.sc-mrd-field{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.sc-mrd-field:focus{border-color:var(--mrd-color-primary);box-shadow:var(--mrd-shadow-focus)}.mrd-field__history-editor-until.sc-mrd-field{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.sc-mrd-field:focus{border-color:var(--mrd-color-primary);box-shadow:var(--mrd-shadow-focus)}.mrd-field__history-editor-remove.sc-mrd-field{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.sc-mrd-field:hover{color:var(--mrd-color-danger);background-color:var(--mrd-color-danger-light)}.mrd-field__history-editor-remove.sc-mrd-field svg.sc-mrd-field{width:1rem;height:1rem}.mrd-field__history-editor-add.sc-mrd-field{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.sc-mrd-field:hover{background-color:var(--mrd-color-primary-light)}`;
+
 const MrdField = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -605,9 +867,22 @@ const MrdField = class {
         this.mrdFetchAll = createEvent(this, "mrdFetchAll");
         this.mrdUpload = createEvent(this, "mrdUpload");
         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();
@@ -626,62 +901,135 @@ const MrdField = class {
             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())));
     }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
 };
+MrdField.style = mrdFieldScss();
 
 const mrdFileFieldScss = () => `.sc-mrd-file-field-h{display:block}.mrd-file-field.sc-mrd-file-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-file-field__label.sc-mrd-file-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-file-field__label--required.sc-mrd-file-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-file-field__zone.sc-mrd-file-field{display:flex;align-items:center;justify-content:center;padding:var(--mrd-space-6);border:2px dashed var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);background-color:var(--mrd-color-neutral-50);cursor:pointer;transition:border-color var(--mrd-transition), background-color var(--mrd-transition);min-height:100px;position:relative}.mrd-file-field__zone.sc-mrd-file-field:hover{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-file-field__zone--dragging.sc-mrd-file-field{border-color:var(--mrd-color-primary);background-color:var(--mrd-color-primary-light)}.mrd-file-field__zone--error.sc-mrd-file-field{border-color:var(--mrd-border-color-error)}.mrd-file-field__zone--disabled.sc-mrd-file-field{opacity:0.6;cursor:not-allowed}.mrd-file-field__zone--disabled.sc-mrd-file-field:hover{border-color:var(--mrd-border-color);background-color:var(--mrd-color-neutral-50)}.mrd-file-field__input.sc-mrd-file-field{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;pointer-events:none}.mrd-file-field__prompt.sc-mrd-file-field{display:flex;flex-direction:column;align-items:center;gap:var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-file-field__upload-icon.sc-mrd-file-field{width:32px;height:32px;color:var(--mrd-color-neutral-400)}.mrd-file-field__browse.sc-mrd-file-field{color:var(--mrd-color-primary);font-weight:var(--mrd-font-weight-medium);text-decoration:underline}.mrd-file-field__selected.sc-mrd-file-field{display:flex;align-items:center;gap:var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-700)}.mrd-file-field__icon.sc-mrd-file-field{width:20px;height:20px;color:var(--mrd-color-primary);flex-shrink:0}.mrd-file-field__filename.sc-mrd-file-field{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}.mrd-file-field__clear.sc-mrd-file-field{background:none;border:none;cursor:pointer;color:var(--mrd-color-neutral-400);font-size:var(--mrd-font-size-sm);padding:var(--mrd-space-1);border-radius:var(--mrd-border-radius-sm);line-height:1}.mrd-file-field__clear.sc-mrd-file-field:hover{color:var(--mrd-color-danger);background-color:var(--mrd-color-danger-light)}.mrd-file-field__spinner.sc-mrd-file-field{display:inline-block;flex-shrink:0;width:18px;height:18px;border:2px solid var(--mrd-color-neutral-300);border-top-color:var(--mrd-color-primary);border-radius:50%;animation:mrd-file-spin 0.6s linear infinite}@keyframes mrd-file-spin{to{transform:rotate(360deg)}}.mrd-file-field__error.sc-mrd-file-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
 
@@ -1051,10 +1399,10 @@ const MrdForm = class {
                 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;
@@ -1356,7 +1704,7 @@ class CellRenderer {
     }
 }
 
-const mrdLayoutSectionScss = () => `.mrd-layout-section.sc-mrd-layout-section{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-800)}.mrd-layout-section__field.sc-mrd-layout-section{display:grid;grid-template-columns:200px 1fr;align-items:baseline;gap:0 var(--mrd-space-2);padding:var(--mrd-space-1) 0}.mrd-layout-section__field-label.sc-mrd-layout-section{font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-normal);color:var(--mrd-color-neutral-500);padding-top:1px}.mrd-layout-section__field-value.sc-mrd-layout-section{font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800);word-break:break-word}.mrd-layout-section__field-header.sc-mrd-layout-section{font-size:var(--mrd-font-size-2xl);font-weight:var(--mrd-font-weight-bold);color:var(--mrd-color-neutral-900);margin:0 0 var(--mrd-space-4) 0;padding:0}.mrd-layout-section__header.sc-mrd-layout-section{font-size:var(--mrd-font-size-xl);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-800);margin:var(--mrd-space-4) 0 var(--mrd-space-2) 0;padding:0}.mrd-layout-section__text.sc-mrd-layout-section{font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-700);line-height:var(--mrd-line-height-relaxed);margin:var(--mrd-space-2) 0}.mrd-layout-section__navigate.sc-mrd-layout-section{display:inline-flex;align-items:center;gap:var(--mrd-space-2);padding:var(--mrd-space-2) var(--mrd-space-3);background:none;border:1px solid var(--mrd-color-neutral-300);border-radius:var(--mrd-border-radius);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-primary);cursor:pointer;margin:var(--mrd-space-2) 0}.mrd-layout-section__navigate.sc-mrd-layout-section:hover{background-color:var(--mrd-color-primary-light);border-color:var(--mrd-color-primary)}.mrd-layout-section__link.sc-mrd-layout-section{color:var(--mrd-color-primary);text-decoration:none}.mrd-layout-section__link.sc-mrd-layout-section:hover{text-decoration:underline}.mrd-layout-section__relation-link.sc-mrd-layout-section{background:none;border:none;padding:0;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-primary);cursor:pointer;text-align:left}.mrd-layout-section__relation-link.sc-mrd-layout-section:hover{text-decoration:underline}.mrd-layout-section__download-link.sc-mrd-layout-section{display:inline-flex;align-items:center;gap:var(--mrd-space-1);background:none;border:none;padding:0;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-primary);cursor:pointer;text-align:left}.mrd-layout-section__download-link.sc-mrd-layout-section:hover{text-decoration:underline;color:var(--mrd-color-primary-dark)}.mrd-layout-section__file-icon.sc-mrd-layout-section{flex-shrink:0;width:1rem;height:1rem}.mrd-layout-section__boolean--true.sc-mrd-layout-section{color:var(--mrd-color-success);font-weight:var(--mrd-font-weight-semibold)}.mrd-layout-section__boolean--false.sc-mrd-layout-section{color:var(--mrd-color-neutral-400)}.mrd-layout-section__field--block.sc-mrd-layout-section{grid-template-columns:1fr}.mrd-layout-section__badge.sc-mrd-layout-section{display:inline-block;font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-medium);padding:2px var(--mrd-space-3);border-radius:10px}.mrd-layout-section__badge-dot-row.sc-mrd-layout-section{display:inline-flex;align-items:center;gap:var(--mrd-space-2)}.mrd-layout-section__badge-dot.sc-mrd-layout-section{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}.mrd-layout-section__pre.sc-mrd-layout-section{font-family:var(--mrd-font-family-mono);font-size:var(--mrd-font-size-xs);background-color:var(--mrd-color-neutral-50);border:1px solid var(--mrd-color-neutral-200);border-radius:var(--mrd-border-radius);padding:var(--mrd-space-3);margin:0;max-height:calc(10 * 1.5 * var(--mrd-font-size-xs));overflow-x:auto;overflow-y:auto;white-space:pre-wrap;word-break:break-word}.mrd-layout-section__group.sc-mrd-layout-section{margin:var(--mrd-space-4) 0}.mrd-layout-section__group-title.sc-mrd-layout-section{font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-500);margin:0 0 var(--mrd-space-2) 0;padding-bottom:0;text-transform:uppercase;letter-spacing:0.05em}.mrd-layout-section__related-view.sc-mrd-layout-section{margin:var(--mrd-space-4) 0}.mrd-layout-section__related-view-title.sc-mrd-layout-section{font-size:var(--mrd-font-size-lg);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-800);margin:0 0 var(--mrd-space-3) 0}.mrd-layout-section__search.sc-mrd-layout-section{position:relative;margin:var(--mrd-space-2) 0}.mrd-layout-section__search-wrap.sc-mrd-layout-section{position:relative}.mrd-layout-section__search-icon.sc-mrd-layout-section{position:absolute;left:var(--mrd-input-padding-x);top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:var(--mrd-color-neutral-400);pointer-events:none}.mrd-layout-section__search-input.sc-mrd-layout-section{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x) var(--mrd-input-padding-y) calc(var(--mrd-input-padding-x) + 1rem + var(--mrd-space-2));font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);outline:none;appearance:none;box-sizing:border-box}.mrd-layout-section__search-input.sc-mrd-layout-section:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-layout-section__search-input.sc-mrd-layout-section::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-layout-section__search-results.sc-mrd-layout-section{position:absolute;top:100%;left:0;right:0;background-color:var(--mrd-color-white);border:1px solid var(--mrd-color-neutral-300);border-top:none;border-radius:0 0 var(--mrd-border-radius) var(--mrd-border-radius);box-shadow:var(--mrd-shadow-sm);z-index:100;max-height:300px;overflow-y:auto;list-style:none;margin:0;padding:var(--mrd-space-1) 0}.mrd-layout-section__search-result.sc-mrd-layout-section{margin:0;padding:0}.mrd-layout-section__search-result-btn.sc-mrd-layout-section{display:flex;flex-direction:column;width:100%;padding:var(--mrd-space-2) var(--mrd-space-3);background:none;border:none;text-align:left;cursor:pointer;font-family:var(--mrd-font-family)}.mrd-layout-section__search-result-btn.sc-mrd-layout-section:hover{background-color:var(--mrd-color-primary-light)}.mrd-layout-section__search-result-label.sc-mrd-layout-section{font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800)}.mrd-layout-section__search-result-desc.sc-mrd-layout-section{font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500);margin-top:var(--mrd-space-1)}.mrd-layout-section__image-thumb-btn.sc-mrd-layout-section{background:none;border:none;padding:0;cursor:pointer;display:inline-block;border-radius:var(--mrd-border-radius);overflow:hidden;line-height:0}.mrd-layout-section__image-thumb-btn.sc-mrd-layout-section:hover .mrd-layout-section__image-thumb.sc-mrd-layout-section{opacity:0.85}.mrd-layout-section__image-thumb.sc-mrd-layout-section{display:block;max-width:160px;max-height:100px;border-radius:var(--mrd-border-radius);object-fit:cover;transition:opacity 0.15s}.mrd-layout-section__modal-backdrop.sc-mrd-layout-section{position:fixed;inset:0;background:rgba(0, 0, 0, 0.6);z-index:300;display:flex;align-items:center;justify-content:center}.mrd-layout-section__modal.sc-mrd-layout-section{position:relative;background:#fff;border-radius:var(--mrd-border-radius);padding:var(--mrd-space-3);max-width:min(90vw, 900px);max-height:90vh;display:flex;align-items:center;justify-content:center;box-shadow:var(--mrd-shadow-lg)}.mrd-layout-section__modal-close.sc-mrd-layout-section{position:absolute;top:var(--mrd-space-2);right:var(--mrd-space-2);background:rgba(0, 0, 0, 0.5);border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;font-size:var(--mrd-font-size-sm);line-height:1;z-index:1}.mrd-layout-section__modal-close.sc-mrd-layout-section:hover{background:rgba(0, 0, 0, 0.8)}.mrd-layout-section__modal-image.sc-mrd-layout-section{display:block;max-width:100%;max-height:calc(90vh - 2rem);border-radius:var(--mrd-border-radius);object-fit:contain}`;
+const mrdLayoutSectionScss = () => `.mrd-layout-section.sc-mrd-layout-section{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-800)}.mrd-layout-section__field.sc-mrd-layout-section{display:grid;grid-template-columns:200px 1fr;align-items:baseline;gap:0 var(--mrd-space-2);padding:var(--mrd-space-1) 0}.mrd-layout-section__field-label.sc-mrd-layout-section{font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-normal);color:var(--mrd-color-neutral-500);padding-top:1px}.mrd-layout-section__field-value.sc-mrd-layout-section{font-size:var(--mrd-font-size-sm);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.sc-mrd-layout-section{position:relative;display:inline-flex;align-items:center}.mrd-layout-section__history-btn.sc-mrd-layout-section{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.sc-mrd-layout-section:hover{color:var(--mrd-color-neutral-700);background-color:var(--mrd-color-neutral-100)}.mrd-layout-section__history-btn.sc-mrd-layout-section:focus{outline:none;box-shadow:var(--mrd-shadow-focus)}.mrd-layout-section__history-icon.sc-mrd-layout-section{width:0.875rem;height:0.875rem}.mrd-layout-section__history-popover.sc-mrd-layout-section{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.sc-mrd-layout-section{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.sc-mrd-layout-section:not(:last-child){border-bottom:var(--mrd-border-width) solid var(--mrd-color-neutral-100)}.mrd-layout-section__field-header.sc-mrd-layout-section{font-size:var(--mrd-font-size-2xl);font-weight:var(--mrd-font-weight-bold);color:var(--mrd-color-neutral-900);margin:0 0 var(--mrd-space-4) 0;padding:0}.mrd-layout-section__header.sc-mrd-layout-section{font-size:var(--mrd-font-size-xl);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-800);margin:var(--mrd-space-4) 0 var(--mrd-space-2) 0;padding:0}.mrd-layout-section__text.sc-mrd-layout-section{font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-700);line-height:var(--mrd-line-height-relaxed);margin:var(--mrd-space-2) 0}.mrd-layout-section__navigate.sc-mrd-layout-section{display:inline-flex;align-items:center;gap:var(--mrd-space-2);padding:var(--mrd-space-2) var(--mrd-space-3);background:none;border:1px solid var(--mrd-color-neutral-300);border-radius:var(--mrd-border-radius);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-primary);cursor:pointer;margin:var(--mrd-space-2) 0}.mrd-layout-section__navigate.sc-mrd-layout-section:hover{background-color:var(--mrd-color-primary-light);border-color:var(--mrd-color-primary)}.mrd-layout-section__link.sc-mrd-layout-section{color:var(--mrd-color-primary);text-decoration:none}.mrd-layout-section__link.sc-mrd-layout-section:hover{text-decoration:underline}.mrd-layout-section__relation-link.sc-mrd-layout-section{background:none;border:none;padding:0;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-primary);cursor:pointer;text-align:left}.mrd-layout-section__relation-link.sc-mrd-layout-section:hover{text-decoration:underline}.mrd-layout-section__download-link.sc-mrd-layout-section{display:inline-flex;align-items:center;gap:var(--mrd-space-1);background:none;border:none;padding:0;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-primary);cursor:pointer;text-align:left}.mrd-layout-section__download-link.sc-mrd-layout-section:hover{text-decoration:underline;color:var(--mrd-color-primary-dark)}.mrd-layout-section__file-icon.sc-mrd-layout-section{flex-shrink:0;width:1rem;height:1rem}.mrd-layout-section__boolean--true.sc-mrd-layout-section{color:var(--mrd-color-success);font-weight:var(--mrd-font-weight-semibold)}.mrd-layout-section__boolean--false.sc-mrd-layout-section{color:var(--mrd-color-neutral-400)}.mrd-layout-section__field--block.sc-mrd-layout-section{grid-template-columns:1fr}.mrd-layout-section__badge.sc-mrd-layout-section{display:inline-block;font-size:var(--mrd-font-size-xs);font-weight:var(--mrd-font-weight-medium);padding:2px var(--mrd-space-3);border-radius:10px}.mrd-layout-section__badge-dot-row.sc-mrd-layout-section{display:inline-flex;align-items:center;gap:var(--mrd-space-2)}.mrd-layout-section__badge-dot.sc-mrd-layout-section{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}.mrd-layout-section__pre.sc-mrd-layout-section{font-family:var(--mrd-font-family-mono);font-size:var(--mrd-font-size-xs);background-color:var(--mrd-color-neutral-50);border:1px solid var(--mrd-color-neutral-200);border-radius:var(--mrd-border-radius);padding:var(--mrd-space-3);margin:0;max-height:calc(10 * 1.5 * var(--mrd-font-size-xs));overflow-x:auto;overflow-y:auto;white-space:pre-wrap;word-break:break-word}.mrd-layout-section__group.sc-mrd-layout-section{margin:var(--mrd-space-4) 0}.mrd-layout-section__group-title.sc-mrd-layout-section{font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-500);margin:0 0 var(--mrd-space-2) 0;padding-bottom:0;text-transform:uppercase;letter-spacing:0.05em}.mrd-layout-section__related-view.sc-mrd-layout-section{margin:var(--mrd-space-4) 0}.mrd-layout-section__related-view-title.sc-mrd-layout-section{font-size:var(--mrd-font-size-lg);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-800);margin:0 0 var(--mrd-space-3) 0}.mrd-layout-section__search.sc-mrd-layout-section{position:relative;margin:var(--mrd-space-2) 0}.mrd-layout-section__search-wrap.sc-mrd-layout-section{position:relative}.mrd-layout-section__search-icon.sc-mrd-layout-section{position:absolute;left:var(--mrd-input-padding-x);top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:var(--mrd-color-neutral-400);pointer-events:none}.mrd-layout-section__search-input.sc-mrd-layout-section{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x) var(--mrd-input-padding-y) calc(var(--mrd-input-padding-x) + 1rem + var(--mrd-space-2));font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);outline:none;appearance:none;box-sizing:border-box}.mrd-layout-section__search-input.sc-mrd-layout-section:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-layout-section__search-input.sc-mrd-layout-section::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-layout-section__search-results.sc-mrd-layout-section{position:absolute;top:100%;left:0;right:0;background-color:var(--mrd-color-white);border:1px solid var(--mrd-color-neutral-300);border-top:none;border-radius:0 0 var(--mrd-border-radius) var(--mrd-border-radius);box-shadow:var(--mrd-shadow-sm);z-index:100;max-height:300px;overflow-y:auto;list-style:none;margin:0;padding:var(--mrd-space-1) 0}.mrd-layout-section__search-result.sc-mrd-layout-section{margin:0;padding:0}.mrd-layout-section__search-result-btn.sc-mrd-layout-section{display:flex;flex-direction:column;width:100%;padding:var(--mrd-space-2) var(--mrd-space-3);background:none;border:none;text-align:left;cursor:pointer;font-family:var(--mrd-font-family)}.mrd-layout-section__search-result-btn.sc-mrd-layout-section:hover{background-color:var(--mrd-color-primary-light)}.mrd-layout-section__search-result-label.sc-mrd-layout-section{font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-neutral-800)}.mrd-layout-section__search-result-desc.sc-mrd-layout-section{font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500);margin-top:var(--mrd-space-1)}.mrd-layout-section__image-thumb-btn.sc-mrd-layout-section{background:none;border:none;padding:0;cursor:pointer;display:inline-block;border-radius:var(--mrd-border-radius);overflow:hidden;line-height:0}.mrd-layout-section__image-thumb-btn.sc-mrd-layout-section:hover .mrd-layout-section__image-thumb.sc-mrd-layout-section{opacity:0.85}.mrd-layout-section__image-thumb.sc-mrd-layout-section{display:block;max-width:160px;max-height:100px;border-radius:var(--mrd-border-radius);object-fit:cover;transition:opacity 0.15s}.mrd-layout-section__modal-backdrop.sc-mrd-layout-section{position:fixed;inset:0;background:rgba(0, 0, 0, 0.6);z-index:300;display:flex;align-items:center;justify-content:center}.mrd-layout-section__modal.sc-mrd-layout-section{position:relative;background:#fff;border-radius:var(--mrd-border-radius);padding:var(--mrd-space-3);max-width:min(90vw, 900px);max-height:90vh;display:flex;align-items:center;justify-content:center;box-shadow:var(--mrd-shadow-lg)}.mrd-layout-section__modal-close.sc-mrd-layout-section{position:absolute;top:var(--mrd-space-2);right:var(--mrd-space-2);background:rgba(0, 0, 0, 0.5);border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;font-size:var(--mrd-font-size-sm);line-height:1;z-index:1}.mrd-layout-section__modal-close.sc-mrd-layout-section:hover{background:rgba(0, 0, 0, 0.8)}.mrd-layout-section__modal-image.sc-mrd-layout-section{display:block;max-width:100%;max-height:calc(90vh - 2rem);border-radius:var(--mrd-border-radius);object-fit:contain}`;
 
 const MrdLayoutSection = class {
     constructor(hostRef) {
@@ -1381,6 +1729,8 @@ const MrdLayoutSection = class {
         this.searchResultsMap = {};
         this.imagePreviewUrl = null;
         this.imagePreviews = {};
+        this.openHistoryField = null;
+        this.historyClickOutside = null;
         this.searchTimers = {};
         this.handleViewLoadPage = (e, name) => {
             e.stopPropagation();
@@ -1404,6 +1754,17 @@ const MrdLayoutSection = class {
             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) {
@@ -1552,10 +1913,31 @@ const MrdLayoutSection = class {
         }
         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));
@@ -1565,7 +1947,7 @@ const MrdLayoutSection = class {
         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;
@@ -1660,7 +2042,7 @@ const MrdLayoutSection = class {
         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()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {