@mmlogic/components 0.3.2 → 0.3.4

package/dist/collection/collection-manifest.json

@@ -15,6 +15,7 @@
     "components/mrd-longtext-field/mrd-longtext-field.js",
     "components/mrd-number-field/mrd-number-field.js",
     "components/mrd-relation-field/mrd-relation-field.js",
+    "components/mrd-secret-field/mrd-secret-field.js",
     "components/mrd-table/mrd-table.js",
     "components/mrd-text-field/mrd-text-field.js",
     "components/mrd-textarea-field/mrd-textarea-field.js",

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

@@ -1,15 +1,39 @@
 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) => {
+            var _a, _b, _c, _d;
             e.stopPropagation();
-            this.mrdBlur.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.mrdBlur.emit({
+                    name: e.detail.name,
+                    value: { current: this.currentValue, history: this.historyEntries },
+                });
+            }
+            else {
+                this.mrdBlur.emit(e.detail);
+            }
         };
         this.handleSearch = (e) => {
             e.stopPropagation();
@@ -24,63 +48,141 @@ 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, _3, _4;
+        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 : '' })));
+            case ClientLayoutItemFieldDataType.SECRET:
+                return (h("mrd-secret-field", Object.assign({}, commonProps, { value: (_3 = displayValue) !== null && _3 !== void 0 ? _3 : '', placeholder: (_4 = item.placeholder) !== null && _4 !== void 0 ? _4 : '' })));
             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 +248,12 @@ export class MrdField {
             }
         };
     }
+    static get states() {
+        return {
+            "historyEntries": {},
+            "currentValue": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "mrdChange",
@@ -229,4 +337,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-hyperlink-field/mrd-hyperlink-field.js

@@ -10,28 +10,60 @@ export class MrdHyperlinkField {
         this.required = false;
         this.disabled = false;
         this.locale = navigator.language;
+        this.internalHref = '';
+        this.internalName = '';
         this.error = '';
-        this.handleInput = (e) => {
-            const val = e.target.value;
-            this.mrdChange.emit({ name: this.name, value: val });
+        this.handleHrefInput = (e) => {
+            this.internalHref = e.target.value;
+            this.mrdChange.emit({ name: this.name, value: this.buildValue() });
         };
-        this.handleBlur = (e) => {
-            const val = e.target.value;
-            if (this.required && !validateRequired(val)) {
+        this.handleNameInput = (e) => {
+            this.internalName = e.target.value;
+            this.mrdChange.emit({ name: this.name, value: this.buildValue() });
+        };
+        this.handleBlur = () => {
+            if (this.required && !validateRequired(this.internalHref)) {
                 this.error = t('required', this.locale);
             }
-            else if (val && !validateUrl(val)) {
+            else if (this.internalHref && !validateUrl(this.internalHref)) {
                 this.error = t('invalid_url', this.locale);
             }
             else {
                 this.error = '';
             }
-            this.mrdBlur.emit({ name: this.name, value: val });
+            this.mrdBlur.emit({ name: this.name, value: this.buildValue() });
         };
     }
+    componentWillLoad() {
+        this.parseValue(this.value);
+    }
+    valueChanged(val) {
+        this.parseValue(val);
+    }
+    parseValue(val) {
+        var _a, _b, _c;
+        if (val !== null && val !== undefined && typeof val === 'object' && 'href' in val) {
+            this.internalHref = (_a = val.href) !== null && _a !== void 0 ? _a : '';
+            this.internalName = (_b = val.name) !== null && _b !== void 0 ? _b : '';
+        }
+        else {
+            this.internalHref = (_c = val) !== null && _c !== void 0 ? _c : '';
+            this.internalName = '';
+        }
+    }
+    buildValue() {
+        return this.internalName.trim()
+            ? { href: this.internalHref, name: this.internalName }
+            : { href: this.internalHref };
+    }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: '4f642cb037c6e25786593dbf0cbead71ce34580c' }, h("div", { key: 'c679d95924bc2d22089c435ec15a35132a4a062d', class: "mrd-hyperlink-field" }, this.label && (h("label", { key: 'b391dd2d152c68fe75517926c40779313a23b9d9', class: `mrd-hyperlink-field__label${this.required ? ' mrd-hyperlink-field__label--required' : ''}` }, this.label)), h("input", { key: 'ea0d2aba8520ecbde4df8e4507e0f16bd497baa9', class: `mrd-hyperlink-field__input${hasError ? ' mrd-hyperlink-field__input--error' : ''}`, type: "url", name: this.name, value: this.value, placeholder: this.placeholder || 'https://', required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && h("span", { key: 'fab1d90c726b69c6c43c7997fd1b7480678c2c78', class: "mrd-hyperlink-field__error" }, this.error))));
+        if (this.disabled) {
+            return (h(Host, null, h("div", { class: "mrd-hyperlink-field" }, this.label && h("span", { class: "mrd-hyperlink-field__label" }, this.label), this.internalHref
+                ? h("a", { class: "mrd-hyperlink-field__link", href: this.internalHref, target: "_blank", rel: "noopener noreferrer" }, this.internalName || this.internalHref)
+                : h("span", { class: "mrd-hyperlink-field__empty" }, "\u2014"))));
+        }
+        return (h(Host, null, h("div", { class: "mrd-hyperlink-field" }, this.label && (h("label", { class: `mrd-hyperlink-field__label${this.required ? ' mrd-hyperlink-field__label--required' : ''}` }, this.label)), h("input", { class: `mrd-hyperlink-field__input${hasError ? ' mrd-hyperlink-field__input--error' : ''}`, type: "url", name: this.name, value: this.internalHref, placeholder: this.placeholder || 'https://', required: this.required, onInput: this.handleHrefInput, onBlur: this.handleBlur }), h("input", { class: "mrd-hyperlink-field__input mrd-hyperlink-field__input--name", type: "text", value: this.internalName, placeholder: t('hyperlink_name', this.locale), onInput: this.handleNameInput, onBlur: this.handleBlur }), hasError && h("span", { class: "mrd-hyperlink-field__error" }, this.error))));
     }
     static get is() { return "mrd-hyperlink-field"; }
     static get encapsulation() { return "scoped"; }
@@ -91,9 +123,16 @@ export class MrdHyperlinkField {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "HyperlinkValue | string",
+                    "resolved": "HyperlinkValue | string",
+                    "references": {
+                        "HyperlinkValue": {
+                            "location": "import",
+                            "path": "../../types/client-layout",
+                            "id": "src/types/client-layout.ts::HyperlinkValue",
+                            "referenceLocation": "HyperlinkValue"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -191,6 +230,8 @@ export class MrdHyperlinkField {
     }
     static get states() {
         return {
+            "internalHref": {},
+            "internalName": {},
             "error": {}
         };
     }
@@ -206,9 +247,16 @@ export class MrdHyperlinkField {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ name: string; value: string }",
-                    "resolved": "{ name: string; value: string; }",
-                    "references": {}
+                    "original": "{ name: string; value: HyperlinkValue }",
+                    "resolved": "{ name: string; value: HyperlinkValue; }",
+                    "references": {
+                        "HyperlinkValue": {
+                            "location": "import",
+                            "path": "../../types/client-layout",
+                            "id": "src/types/client-layout.ts::HyperlinkValue",
+                            "referenceLocation": "HyperlinkValue"
+                        }
+                    }
                 }
             }, {
                 "method": "mrdBlur",
@@ -221,10 +269,23 @@ export class MrdHyperlinkField {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ name: string; value: string }",
-                    "resolved": "{ name: string; value: string; }",
-                    "references": {}
+                    "original": "{ name: string; value: HyperlinkValue }",
+                    "resolved": "{ name: string; value: HyperlinkValue; }",
+                    "references": {
+                        "HyperlinkValue": {
+                            "location": "import",
+                            "path": "../../types/client-layout",
+                            "id": "src/types/client-layout.ts::HyperlinkValue",
+                            "referenceLocation": "HyperlinkValue"
+                        }
+                    }
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
 }

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

@@ -62,6 +62,28 @@
   box-shadow: var(--mrd-shadow-focus-error);
 }
 
+.mrd-hyperlink-field__input--name {
+  margin-top: var(--mrd-space-1);
+}
+
+.mrd-hyperlink-field__link {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-base);
+  color: var(--mrd-color-primary);
+  text-decoration: underline;
+  word-break: break-all;
+}
+
+.mrd-hyperlink-field__link:hover {
+  opacity: 0.8;
+}
+
+.mrd-hyperlink-field__empty {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-base);
+  color: var(--mrd-color-neutral-400);
+}
+
 .mrd-hyperlink-field__error {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-error-font-size);

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

@@ -99,7 +99,7 @@ export class MrdImageField {
             hasError ? 'mrd-image-field__zone--error' : '',
             this.disabled || this.uploading ? 'mrd-image-field__zone--disabled' : '',
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '76b5a36a7f5a420ded3400c8a1481843363d1cbe' }, h("div", { key: '3544df84aaf427a25518bafe13d60cf89ed28537', class: "mrd-image-field" }, this.label && (h("label", { key: 'dca64c1600cb98526eb4b91a908106087f099ad1', class: `mrd-image-field__label${this.required ? ' mrd-image-field__label--required' : ''}` }, this.label)), h("div", { key: 'ce07f32126f0956e47ff6fc41ff231590e0503d3', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: '660fbae5f730834c465522a11dd674fc8e50a54e', ref: el => (this.fileInputRef = el), class: "mrd-image-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !this.previewUrl, onChange: this.handleInputChange }), this.previewUrl ? (h("div", { class: "mrd-image-field__preview-container" }, h("div", { class: "mrd-image-field__preview-thumb" }, h("img", { class: "mrd-image-field__preview", src: this.previewUrl, alt: this.fileName }), this.uploading && h("div", { class: "mrd-image-field__preview-overlay" }, h("span", { class: "mrd-image-field__spinner" }))), h("div", { class: "mrd-image-field__preview-info" }, h("span", { class: "mrd-image-field__preview-name" }, this.fileName), this.uploading && (h("span", { class: "mrd-image-field__upload-status" }, t('loading', this.locale)))), !this.uploading && (h("button", { class: "mrd-image-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, t('remove', this.locale))))) : (h("div", { class: "mrd-image-field__prompt" }, h("svg", { class: "mrd-image-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), h("polyline", { points: "21 15 16 10 5 21" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-image-field__browse" }, t('browse', this.locale)))))), hasError && h("span", { key: '9b8f9563fea63bd12c38f5c480e9cbd24106c3af', class: "mrd-image-field__error" }, this.error))));
+        return (h(Host, { key: '71be4c1df559cff87280cac30be58beab3149064' }, h("div", { key: '9d0811d87068ce258aca9b2c5223a5594af9f6a3', class: "mrd-image-field" }, this.label && (h("label", { key: '63e129db968a2edfcc04fcac466d908ba4715158', class: `mrd-image-field__label${this.required ? ' mrd-image-field__label--required' : ''}` }, this.label)), h("div", { key: 'c7e560ad4dda43499707a2d1771a8eb561653a1b', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: 'd325ee1aa3baccd689cc579e4cfa21abe977a575', ref: el => (this.fileInputRef = el), class: "mrd-image-field__input", type: "file", name: this.name, accept: this.accept, disabled: this.disabled || this.uploading, required: this.required && !this.previewUrl, onChange: this.handleInputChange }), this.previewUrl ? (h("div", { class: "mrd-image-field__preview-container" }, h("div", { class: "mrd-image-field__preview-thumb" }, h("img", { class: "mrd-image-field__preview", src: this.previewUrl, alt: this.fileName }), this.uploading && h("div", { class: "mrd-image-field__preview-overlay" }, h("span", { class: "mrd-image-field__spinner" }))), h("div", { class: "mrd-image-field__preview-info" }, h("span", { class: "mrd-image-field__preview-name" }, this.fileName), this.uploading && (h("span", { class: "mrd-image-field__upload-status" }, t('loading', this.locale)))), !this.uploading && (h("button", { class: "mrd-image-field__clear", type: "button", onClick: this.handleClear, "aria-label": t('clear', this.locale) }, t('remove', this.locale))))) : (h("div", { class: "mrd-image-field__prompt" }, h("svg", { class: "mrd-image-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), h("polyline", { points: "21 15 16 10 5 21" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-image-field__browse" }, t('browse', this.locale)))))), hasError && h("span", { key: 'b0442d6f5c07ef22443194b3f1a95d2dfc409c4e', class: "mrd-image-field__error" }, this.error))));
     }
     static get is() { return "mrd-image-field"; }
     static get encapsulation() { return "scoped"; }