@mmlogic/components 0.5.5 → 0.5.6

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

@@ -1,106 +1,26 @@
 import { Host, h } from "@stencil/core";
-import { t } from "../../../utils/i18n";
-import { formatIsoDate, localeDatePattern, parseLocalizedDate } from "../../../utils/format";
 import { FieldLabel, FieldError, controlClass, requiredError } from "../field-helpers";
 export class MrdDateField {
     constructor() {
         this.name = '';
         this.label = '';
-        /** ISO date, 'YYYY-MM-DD'. */
         this.value = '';
-        /** Overrides the locale-derived pattern placeholder (e.g. 'dd-mm-jjjj'). */
-        this.placeholder = '';
         this.required = false;
         this.disabled = false;
         this.locale = navigator.language;
-        /** What the user sees: the value formatted for `locale`, or their raw typing. */
-        this.displayValue = '';
         this.error = '';
-        /** While focused the user owns the text; prop updates must not overwrite it. */
-        this.focused = false;
-        this.handleFocus = () => {
-            this.focused = true;
-        };
-        this.handleInput = (e) => {
-            this.displayValue = e.target.value;
+        this.handleChange = (e) => {
+            const val = e.target.value;
+            this.error = requiredError(val, this.required, this.locale);
+            this.mrdChange.emit({ name: this.name, value: val });
         };
         this.handleBlur = (e) => {
-            this.focused = false;
-            const value = this.commit(e.target.value);
-            this.mrdChange.emit({ name: this.name, value });
-            this.mrdBlur.emit({ name: this.name, value });
-        };
-        this.handleKeyDown = (e) => {
-            // Submitting with Enter never fires blur, so commit the typed text here too.
-            if (e.key !== 'Enter')
-                return;
-            const value = this.commit(e.target.value);
-            this.mrdChange.emit({ name: this.name, value });
-        };
-        this.openPicker = () => {
-            const native = this.nativeInput;
-            if (!native || this.disabled)
-                return;
-            // The blur commit that precedes this click re-renders asynchronously, so sync by hand first.
-            native.value = this.currentIso();
-            try {
-                native.showPicker();
-            }
-            catch (_a) {
-                // Browsers without showPicker(): focusing at least surfaces the platform control.
-                native.focus();
-            }
+            const val = e.target.value;
+            this.mrdBlur.emit({ name: this.name, value: val });
         };
-        this.handlePickerChange = (e) => {
-            const iso = e.target.value; // native inputs always yield 'YYYY-MM-DD'
-            this.displayValue = formatIsoDate(iso, this.locale);
-            this.error = requiredError(iso, this.required, this.locale);
-            this.mrdChange.emit({ name: this.name, value: iso });
-            this.mrdBlur.emit({ name: this.name, value: iso });
-        };
-    }
-    componentWillLoad() {
-        this.displayValue = formatIsoDate(this.value, this.locale);
-    }
-    valueChanged(newValue) {
-        if (!this.focused)
-            this.displayValue = formatIsoDate(newValue, this.locale);
-    }
-    localeChanged() {
-        if (!this.focused)
-            this.displayValue = formatIsoDate(this.value, this.locale);
-    }
-    patternPlaceholder() {
-        if (this.placeholder)
-            return this.placeholder;
-        return localeDatePattern(this.locale, {
-            day: t('date_token_day', this.locale),
-            month: t('date_token_month', this.locale),
-            year: t('date_token_year', this.locale),
-        });
-    }
-    /** Parse the typed text, reformat it, and emit the ISO value. */
-    commit(raw) {
-        const trimmed = raw.trim();
-        const iso = trimmed ? parseLocalizedDate(trimmed, this.locale) : '';
-        if (trimmed && iso === null) {
-            // Keep the raw text so the user can correct it instead of retyping.
-            this.error = t('invalid_date', this.locale);
-            this.displayValue = trimmed;
-        }
-        else {
-            this.error = requiredError(iso, this.required, this.locale);
-            this.displayValue = iso ? formatIsoDate(iso, this.locale) : '';
-        }
-        return iso !== null && iso !== void 0 ? iso : '';
-    }
-    /** The ISO value currently shown, so the picker opens on the right date. */
-    currentIso() {
-        var _a;
-        return (_a = (this.displayValue ? parseLocalizedDate(this.displayValue, this.locale) : '')) !== null && _a !== void 0 ? _a : '';
     }
     render() {
-        return (h(Host, { key: '06ba48bd538ee4c8de4e071285535451f783c259' }, h("div", { key: '73ea6ea23c85fe3325bb151afb755cc11a13cf58', class: "mrd-date-field" }, h(FieldLabel, { key: '527848cf72323aef176fc7d5bcd47dcf2f7e46f6', base: "mrd-date-field", label: this.label, required: this.required }), h("div", { key: '2ff7586f4e6298d1f9b9b131106044533de82c6d', class: "mrd-date-field__control" }, h("input", { key: '68fdf2f1f7961ca049ab6493494c8c0707e6a4af', class: controlClass('mrd-date-field', !!this.error), type: "text", name: this.name, value: this.displayValue, placeholder: this.patternPlaceholder(), autocomplete: "off", required: this.required, disabled: this.disabled, onFocus: this.handleFocus, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), h("span", { key: '9557b7a3f6780b8a05030ab8e7c941c44df9f4a5', class: "mrd-date-field__picker" }, h("button", { key: '586973e0440ed0b74e1fa0affae9e462257024c3', type: "button", class: "mrd-date-field__picker-button", title: t('open_calendar', this.locale), "aria-label": t('open_calendar', this.locale), disabled: this.disabled, onClick: this.openPicker }, h("svg", { key: '144319d3a50d0d38c75c59dd3321d4b9097322a6', viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "aria-hidden": "true" }, h("rect", { key: 'aec01ca5c620bf3116705b7a28052eb3bc210cfd', x: "3", y: "4.5", width: "14", height: "12", rx: "2" }), h("path", { key: 'a0e13dd3a2005bfbee40f5a071b6760270d0d58d', d: "M3 8.5h14M7 2.5v3M13 2.5v3", "stroke-linecap": "round" }))), h("input", { key: 'be02df44f31a59a26ce166ab9a9eab9db2635d89', class: "mrd-date-field__picker-native", type: "date", ref: el => (this.nativeInput = el), value: this.currentIso(), disabled: this.disabled, tabIndex: -1, "aria-hidden": "true", onChange: this.handlePickerChange }))), h(FieldError, { key: '2f8b2072bee32170a35f98ec5c962018774c7e8c', base: "mrd-date-field", error: this.error }))));
+        return (h(Host, { key: 'd83beef11c2b9402e251a50885b92e7a057f02ee' }, h("div", { key: '6a26e4969e9bde8c5c87771d7b8c7b4d6c1dd942', class: "mrd-date-field" }, h(FieldLabel, { key: 'a7bc1b1c56e933a51f6b1b1feb794a4678d9d334', base: "mrd-date-field", label: this.label, required: this.required }), h("input", { key: '82e3855654f3b3c554f80d647e783234cca8dae1', class: controlClass('mrd-date-field', !!this.error), type: "date", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: '294b3cdc1004725267aa8265366f5009ab324203', base: "mrd-date-field", error: this.error }))));
     }
     static get is() { return "mrd-date-field"; }
     static get encapsulation() { return "scoped"; }
@@ -168,7 +88,7 @@ export class MrdDateField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "ISO date, 'YYYY-MM-DD'."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -176,26 +96,6 @@ export class MrdDateField {
                 "attribute": "value",
                 "defaultValue": "''"
             },
-            "placeholder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Overrides the locale-derived pattern placeholder (e.g. 'dd-mm-jjjj')."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "placeholder",
-                "defaultValue": "''"
-            },
             "required": {
                 "type": "boolean",
                 "mutable": false,
@@ -260,7 +160,6 @@ export class MrdDateField {
     }
     static get states() {
         return {
-            "displayValue": {},
             "error": {}
         };
     }
@@ -297,13 +196,4 @@ export class MrdDateField {
                 }
             }];
     }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "valueChanged"
-            }, {
-                "propName": "locale",
-                "methodName": "localeChanged"
-            }];
-    }
 }

package/dist/collection/components/fields/mrd-datetime-field/mrd-datetime-field.css

@@ -19,10 +19,6 @@
   content: " *";
   color: var(--mrd-color-danger);
 }
-.mrd-datetime-field__control {
-  position: relative;
-  display: block;
-}
 .mrd-datetime-field__input {
   display: block;
   width: 100%;
@@ -57,59 +53,12 @@
 .mrd-datetime-field__input--error:focus {
   box-shadow: var(--mrd-shadow-focus-error);
 }
-.mrd-datetime-field__input {
-  padding-inline-end: calc(var(--mrd-input-padding-x) + 1.75rem);
-}
-.mrd-datetime-field__picker {
-  position: absolute;
-  inset-inline-end: var(--mrd-space-1);
-  top: 50%;
-  transform: translateY(-50%);
-  width: 1.75rem;
-  height: 1.75rem;
-}
-.mrd-datetime-field__picker-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  border: 0;
-  border-radius: var(--mrd-border-radius-sm);
-  background: transparent;
-  color: var(--mrd-color-neutral-500);
-  cursor: pointer;
-  transition: color var(--mrd-transition), background-color var(--mrd-transition);
-}
-.mrd-datetime-field__picker-button svg {
-  width: 1.125rem;
-  height: 1.125rem;
-}
-.mrd-datetime-field__picker-button:hover:not(:disabled) {
-  color: var(--mrd-color-primary);
-  background-color: var(--mrd-color-neutral-100);
-}
-.mrd-datetime-field__picker-button:focus-visible {
-  outline: 2px solid var(--mrd-border-color-focus);
-  outline-offset: 1px;
-}
-.mrd-datetime-field__picker-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-.mrd-datetime-field__picker-native {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  border: 0;
-  opacity: 0;
-  pointer-events: none;
-}
 .mrd-datetime-field__error {
   font-family: var(--mrd-font-family);
   font-size: var(--mrd-error-font-size);
   color: var(--mrd-error-color);
+}
+
+.mrd-datetime-field__input {
+  cursor: pointer;
 }

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

@@ -1,77 +1,33 @@
 import { Host, h } from "@stencil/core";
-import { t } from "../../../utils/i18n";
-import { formatLocalDateTime, localeDatePattern, parseLocalizedDateTime } from "../../../utils/format";
 import { FieldLabel, FieldError, controlClass, requiredError } from "../field-helpers";
 export class MrdDatetimeField {
     constructor() {
         this.name = '';
         this.label = '';
-        /** UTC ISO string, e.g. '2026-07-06T12:30:00Z'. */
         this.value = '';
-        /** Overrides the locale-derived pattern placeholder (e.g. 'dd-mm-jjjj uu:mm'). */
-        this.placeholder = '';
         this.required = false;
         this.disabled = false;
         this.locale = navigator.language;
-        /** What the user sees: the value formatted for `locale`, or their raw typing. */
-        this.displayValue = '';
         this.error = '';
-        /** While focused the user owns the text; prop updates must not overwrite it. */
-        this.focused = false;
-        this.handleFocus = () => {
-            this.focused = true;
-        };
-        this.handleInput = (e) => {
-            this.displayValue = e.target.value;
+        this.localValue = '';
+        this.handleChange = (e) => {
+            const localVal = e.target.value;
+            this.localValue = localVal;
+            this.error = requiredError(localVal, this.required, this.locale);
+            this.mrdChange.emit({ name: this.name, value: this.localToUtc(localVal) });
         };
         this.handleBlur = (e) => {
-            this.focused = false;
-            const value = this.commit(e.target.value);
-            this.mrdChange.emit({ name: this.name, value });
-            this.mrdBlur.emit({ name: this.name, value });
-        };
-        this.handleKeyDown = (e) => {
-            // Submitting with Enter never fires blur, so commit the typed text here too.
-            if (e.key !== 'Enter')
-                return;
-            const value = this.commit(e.target.value);
-            this.mrdChange.emit({ name: this.name, value });
-        };
-        this.openPicker = () => {
-            const native = this.nativeInput;
-            if (!native || this.disabled)
-                return;
-            // The blur commit that precedes this click re-renders asynchronously, so sync by hand first.
-            native.value = this.currentLocal();
-            try {
-                native.showPicker();
-            }
-            catch (_a) {
-                // Browsers without showPicker(): focusing at least surfaces the platform control.
-                native.focus();
-            }
-        };
-        this.handlePickerChange = (e) => {
-            const local = e.target.value; // native inputs always yield 'YYYY-MM-DDTHH:mm'
-            this.displayValue = formatLocalDateTime(local, this.locale);
-            this.error = requiredError(local, this.required, this.locale);
-            const value = this.localToUtc(local);
-            this.mrdChange.emit({ name: this.name, value });
-            this.mrdBlur.emit({ name: this.name, value });
+            const localVal = e.target.value;
+            this.mrdBlur.emit({ name: this.name, value: this.localToUtc(localVal) });
         };
     }
     componentWillLoad() {
-        this.displayValue = this.toDisplay(this.value);
+        this.localValue = this.utcToLocal(this.value);
     }
     valueChanged(newVal) {
-        if (!this.focused)
-            this.displayValue = this.toDisplay(newVal);
+        this.localValue = this.utcToLocal(newVal);
     }
-    localeChanged() {
-        if (!this.focused)
-            this.displayValue = this.toDisplay(this.value);
-    }
-    // UTC ISO string → "YYYY-MM-DDTHH:mm" in local timezone
+    // UTC ISO string → "YYYY-MM-DDTHH:mm" in local timezone (for datetime-local input)
     utcToLocal(utcStr) {
         if (!utcStr)
             return '';
@@ -90,43 +46,8 @@ export class MrdDatetimeField {
             return '';
         return d.toISOString().replace(/\.\d{3}Z$/, 'Z');
     }
-    // UTC ISO string → locale-formatted text for the input
-    toDisplay(utcStr) {
-        return formatLocalDateTime(this.utcToLocal(utcStr), this.locale);
-    }
-    patternPlaceholder() {
-        if (this.placeholder)
-            return this.placeholder;
-        return localeDatePattern(this.locale, {
-            day: t('date_token_day', this.locale),
-            month: t('date_token_month', this.locale),
-            year: t('date_token_year', this.locale),
-            hour: t('time_token_hour', this.locale),
-            minute: t('time_token_minute', this.locale),
-        });
-    }
-    /** Parse the typed text, reformat it, and return the UTC value to emit. */
-    commit(raw) {
-        const trimmed = raw.trim();
-        const local = trimmed ? parseLocalizedDateTime(trimmed, this.locale) : '';
-        if (trimmed && local === null) {
-            // Keep the raw text so the user can correct it instead of retyping.
-            this.error = t('invalid_datetime', this.locale);
-            this.displayValue = trimmed;
-            return '';
-        }
-        const localValue = local !== null && local !== void 0 ? local : '';
-        this.error = requiredError(localValue, this.required, this.locale);
-        this.displayValue = localValue ? formatLocalDateTime(localValue, this.locale) : '';
-        return this.localToUtc(localValue);
-    }
-    /** The local 'YYYY-MM-DDTHH:mm' currently shown, so the picker opens on the right moment. */
-    currentLocal() {
-        var _a;
-        return (_a = (this.displayValue ? parseLocalizedDateTime(this.displayValue, this.locale) : '')) !== null && _a !== void 0 ? _a : '';
-    }
     render() {
-        return (h(Host, { key: 'e075e65c76a627a8f19db488c07704e2b1a7270b' }, h("div", { key: 'a6b5a5df3168272f1f775933dfc372e1b2ccbd95', class: "mrd-datetime-field" }, h(FieldLabel, { key: '39e232c066b8c354eeda7df9bcba4e3f95c18ee5', base: "mrd-datetime-field", label: this.label, required: this.required }), h("div", { key: '4ffac4089cbb9e5506aa0854c8b1f15862bc8456', class: "mrd-datetime-field__control" }, h("input", { key: 'd33400133173c7f3e8b045339f44fbeba7f0b35a', class: controlClass('mrd-datetime-field', !!this.error), type: "text", name: this.name, value: this.displayValue, placeholder: this.patternPlaceholder(), autocomplete: "off", required: this.required, disabled: this.disabled, onFocus: this.handleFocus, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), h("span", { key: '54d8d3b1f508d6226d1341d87c1fec19d5914a10', class: "mrd-datetime-field__picker" }, h("button", { key: '27cd3977984eedd9e3471dd039fc73798f1c7abc', type: "button", class: "mrd-datetime-field__picker-button", title: t('open_calendar', this.locale), "aria-label": t('open_calendar', this.locale), disabled: this.disabled, onClick: this.openPicker }, h("svg", { key: '634ca817fa001263933795e35e1a215a06da7a77', viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "aria-hidden": "true" }, h("rect", { key: '66eadf6b2cfee53376f6ea0f50dbd2ec04fc5663', x: "3", y: "4.5", width: "14", height: "12", rx: "2" }), h("path", { key: '4bb61793e0501bd18bb16c4e203b20f509692970', d: "M3 8.5h14M7 2.5v3M13 2.5v3", "stroke-linecap": "round" }))), h("input", { key: '8877da44e4dc527e7c05244359a0caf9d2e81fdd', class: "mrd-datetime-field__picker-native", type: "datetime-local", ref: el => (this.nativeInput = el), value: this.currentLocal(), disabled: this.disabled, tabIndex: -1, "aria-hidden": "true", onChange: this.handlePickerChange }))), h(FieldError, { key: '4ee97180614972c4dd334d68873a9fb7f91e48f5', base: "mrd-datetime-field", error: this.error }))));
+        return (h(Host, { key: '6f8020590ac879992058aa9547b90c11250fa303' }, h("div", { key: '76abff48cae58d156540181a6577729a449bb888', class: "mrd-datetime-field" }, h(FieldLabel, { key: 'a8c3688980347a27d6467987f11a3c4135ac5234', base: "mrd-datetime-field", label: this.label, required: this.required }), h("input", { key: '1bb1aa7536a6a82313f51240030c828028cafd76', class: controlClass('mrd-datetime-field', !!this.error), type: "datetime-local", name: this.name, value: this.localValue, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: 'c97301640980bf04311751124fc8e87023d59f87', base: "mrd-datetime-field", error: this.error }))));
     }
     static get is() { return "mrd-datetime-field"; }
     static get encapsulation() { return "scoped"; }
@@ -194,7 +115,7 @@ export class MrdDatetimeField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "UTC ISO string, e.g. '2026-07-06T12:30:00Z'."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -202,26 +123,6 @@ export class MrdDatetimeField {
                 "attribute": "value",
                 "defaultValue": "''"
             },
-            "placeholder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Overrides the locale-derived pattern placeholder (e.g. 'dd-mm-jjjj uu:mm')."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "placeholder",
-                "defaultValue": "''"
-            },
             "required": {
                 "type": "boolean",
                 "mutable": false,
@@ -286,8 +187,8 @@ export class MrdDatetimeField {
     }
     static get states() {
         return {
-            "displayValue": {},
-            "error": {}
+            "error": {},
+            "localValue": {}
         };
     }
     static get events() {
@@ -327,9 +228,6 @@ export class MrdDatetimeField {
         return [{
                 "propName": "value",
                 "methodName": "valueChanged"
-            }, {
-                "propName": "locale",
-                "methodName": "localeChanged"
             }];
     }
 }

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

@@ -24,7 +24,7 @@ export class MrdEmailField {
         };
     }
     render() {
-        return (h(Host, { key: 'e185145e628e3a23dd338d93dd8e42bf11569728' }, h("div", { key: '7d77dd982543a8add5fa1f47aa7985cc15079080', class: "mrd-email-field" }, h(FieldLabel, { key: '14eb00a535a052ebe3cb2793cc7dfc05168c402b', base: "mrd-email-field", label: this.label, required: this.required }), h("input", { key: '11fb9856144f7da30a054b4433350d80d316de64', class: controlClass('mrd-email-field', !!this.error), type: "email", name: this.name, value: this.value, placeholder: this.placeholder || 'name@example.com', required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), h(FieldError, { key: 'be33c0a43cd99a7152c1d10b7067ea5e52834742', base: "mrd-email-field", error: this.error }))));
+        return (h(Host, { key: '3253124dadc7f0b3f120c11f8c35604a2f671b0a' }, h("div", { key: 'db820652452145c30f21b41a65942c0a4c6f45f1', class: "mrd-email-field" }, h(FieldLabel, { key: '8b1c5a84afce9fd18c3f644e5c92f07363e116d4', base: "mrd-email-field", label: this.label, required: this.required }), h("input", { key: 'dc4bada3208aa6cb7585b1872f53605177371493', class: controlClass('mrd-email-field', !!this.error), type: "email", name: this.name, value: this.value, placeholder: this.placeholder || 'name@example.com', required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), h(FieldError, { key: 'c44377d1b6a4a4c468b080b23eecd4ba9ca326e1', base: "mrd-email-field", error: this.error }))));
     }
     static get is() { return "mrd-email-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -112,7 +112,7 @@ export class MrdFileField {
             error: hasError,
             disabled: this.disabled || this.zoneBusy,
         });
-        return (h(Host, { key: '36f9660fd297e7b2e7b2ac1816f4dcbc70d5cfcb' }, h("div", { key: 'a33534d3fedae04bad0eefc9d2d297ea148c5784', class: "mrd-file-field" }, h(FieldLabel, { key: '833f8ff178ec259c8066ddf542bdd1930bac486f', base: "mrd-file-field", label: this.label, required: this.required }), h("div", { key: 'd3bd00b25329b8cc716c5fcc526919d8f2c14bce', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.drag.onDragOver, onDragLeave: this.drag.onDragLeave, onDrop: this.drag.onDrop }, h("input", { key: '4b98ee338e8a5e4e6f94e5b5614ca88c90f802ee', ref: el => (this.fileInputRef = el), class: "mrd-file-field__input", type: "file", name: this.name, accept: this.accept, multiple: this.multiple, disabled: this.disabled || this.zoneBusy, required: this.required && !hasEntries, onChange: this.handleInputChange }), hasEntries && !this.multiple ? (h("div", { class: "mrd-file-field__selected" }, this.renderEntry(this.entries[0], 0))) : (h("div", { class: "mrd-file-field__prompt" }, h("svg", { class: "mrd-file-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { points: "16 16 12 12 8 16" }), h("line", { x1: "12", y1: "12", x2: "12", y2: "21" }), h("path", { d: "M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-file-field__browse" }, t('browse', this.locale)))))), this.multiple && hasEntries && (h("ul", { key: '6e6e1d62738d0a824eb86e0dbb01b63a0227580d', class: "mrd-file-field__list" }, this.entries.map((entry, index) => (h("li", { class: "mrd-file-field__item", key: `${index}-${entryLabel(entry)}` }, this.renderEntry(entry, index)))))), h(FieldError, { key: 'df6427015d3f813a72e8998f9fa6152f6caef90e', base: "mrd-file-field", error: this.error }))));
+        return (h(Host, { key: '2e740a0857b069740a6a13616d0a0dfee2b945be' }, h("div", { key: '069b25ced3b2f1ce547819086dadbd53ade2378c', class: "mrd-file-field" }, h(FieldLabel, { key: 'd13f3cb0af766d6328772dab865b2079c85ec075', base: "mrd-file-field", label: this.label, required: this.required }), h("div", { key: '9ffdbb508e3934854034c46e6f719a88d4175920', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.drag.onDragOver, onDragLeave: this.drag.onDragLeave, onDrop: this.drag.onDrop }, h("input", { key: 'c5d6954b8fa050889b5b65e15fde229dd64d7cc7', ref: el => (this.fileInputRef = el), class: "mrd-file-field__input", type: "file", name: this.name, accept: this.accept, multiple: this.multiple, disabled: this.disabled || this.zoneBusy, required: this.required && !hasEntries, onChange: this.handleInputChange }), hasEntries && !this.multiple ? (h("div", { class: "mrd-file-field__selected" }, this.renderEntry(this.entries[0], 0))) : (h("div", { class: "mrd-file-field__prompt" }, h("svg", { class: "mrd-file-field__upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { points: "16 16 12 12 8 16" }), h("line", { x1: "12", y1: "12", x2: "12", y2: "21" }), h("path", { d: "M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" })), h("span", null, t('drop_file_here', this.locale), ' ', h("span", { class: "mrd-file-field__browse" }, t('browse', this.locale)))))), this.multiple && hasEntries && (h("ul", { key: '910a3e89f74d93ab16fb9f677a4276d5ad88897d', class: "mrd-file-field__list" }, this.entries.map((entry, index) => (h("li", { class: "mrd-file-field__item", key: `${index}-${entryLabel(entry)}` }, this.renderEntry(entry, index)))))), h(FieldError, { key: '4f0f071b0a1460ea1d6067a8fa4f588ebc620f2a', base: "mrd-file-field", error: this.error }))));
     }
     static get is() { return "mrd-file-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -130,7 +130,7 @@ export class MrdImageField {
             error: hasError,
             disabled: this.disabled || this.zoneBusy,
         });
-        return (h(Host, { key: '5009b2db845c8f85f395c7230e2d5c464c56ea14' }, h("div", { key: 'fcae7821876ee3d71aac576cdea44c3c4f169890', class: "mrd-image-field" }, h(FieldLabel, { key: '834638e3f7b2073508d98b6dd5ecb437b0bb52ad', base: "mrd-image-field", label: this.label, required: this.required }), h("div", { key: '50e9bdaa1ebb3ec87f36e0d37dc6c2f8dc79848d', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.drag.onDragOver, onDragLeave: this.drag.onDragLeave, onDrop: this.drag.onDrop }, h("input", { key: '38e115fae5b3e2c3371857d284fbd54ea23812df', ref: el => (this.fileInputRef = el), class: "mrd-image-field__input", type: "file", name: this.name, accept: this.accept, multiple: this.multiple, disabled: this.disabled || this.zoneBusy, required: this.required && !hasEntries, onChange: this.handleInputChange }), hasEntries && !this.multiple ? (this.renderSingle(this.entries[0])) : (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)))))), this.multiple && hasEntries && (h("ul", { key: '67bad2f2142f78d7f25b8f35819b6adba48ea597', class: "mrd-image-field__grid" }, this.entries.map((entry, index) => this.renderGridItem(entry, index)))), h(FieldError, { key: 'ef07863946f0b4c94aa30b97d0ecb9616303e793', base: "mrd-image-field", error: this.error }))));
+        return (h(Host, { key: '51d39ea80195565a5dc780ff6a7923a976cfb0a7' }, h("div", { key: 'd76edb7ac9f1efea8c7c3d5b04e906ad4ab4c761', class: "mrd-image-field" }, h(FieldLabel, { key: 'b46a67a76188047677c40ce3f406daed7d8de141', base: "mrd-image-field", label: this.label, required: this.required }), h("div", { key: '0156a9722ea48d84e3ea1a829e4266425a594a6a', class: zoneClass, onClick: this.handleZoneClick, onDragOver: this.drag.onDragOver, onDragLeave: this.drag.onDragLeave, onDrop: this.drag.onDrop }, h("input", { key: '1b8e41da71bb57254bfd2e5527b05e1aeb32eb2f', ref: el => (this.fileInputRef = el), class: "mrd-image-field__input", type: "file", name: this.name, accept: this.accept, multiple: this.multiple, disabled: this.disabled || this.zoneBusy, required: this.required && !hasEntries, onChange: this.handleInputChange }), hasEntries && !this.multiple ? (this.renderSingle(this.entries[0])) : (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)))))), this.multiple && hasEntries && (h("ul", { key: '9211b5212eae0629f7c9b2b49d80e2b658a9ddd3', class: "mrd-image-field__grid" }, this.entries.map((entry, index) => this.renderGridItem(entry, index)))), h(FieldError, { key: '5f49c03156ed18e7c8307adff679b149658ca4a6', base: "mrd-image-field", error: this.error }))));
     }
     static get is() { return "mrd-image-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -21,7 +21,7 @@ export class MrdLongtextField {
         };
     }
     render() {
-        return (h(Host, { key: 'a43ce67cb05e96853193e56c175d99e51d07cbab' }, h("div", { key: 'eb7d09bcae010736dd17b5f17bcb1cb32a6b1c4e', class: "mrd-longtext-field" }, h(FieldLabel, { key: 'd3a47993cc977c06b845eda4575b93d238eaf15a', base: "mrd-longtext-field", label: this.label, required: this.required }), this.disabled ? (h("pre", { class: "mrd-longtext-field__content" }, this.value)) : (h("textarea", { class: controlClass('mrd-longtext-field', !!this.error), name: this.name, placeholder: this.placeholder, required: this.required, rows: 10, onInput: this.handleInput, onBlur: this.handleBlur }, this.value)), h(FieldError, { key: '89f801af61fc0b874db44dbfca6eb33ffe285a84', base: "mrd-longtext-field", error: this.error }))));
+        return (h(Host, { key: 'e53fec4d4eafbd68d9cffb1f064d8e0c4c37839c' }, h("div", { key: '8843a23e42b0545c269fc6c924e7ae295770064e', class: "mrd-longtext-field" }, h(FieldLabel, { key: '8767676dd35f25f9bf5ebdb26887edc0882582e0', base: "mrd-longtext-field", label: this.label, required: this.required }), this.disabled ? (h("pre", { class: "mrd-longtext-field__content" }, this.value)) : (h("textarea", { class: controlClass('mrd-longtext-field', !!this.error), name: this.name, placeholder: this.placeholder, required: this.required, rows: 10, onInput: this.handleInput, onBlur: this.handleBlur }, this.value)), h(FieldError, { key: '54dc790173575e8a02764e5b14040b900c2eb609', base: "mrd-longtext-field", error: this.error }))));
     }
     static get is() { return "mrd-longtext-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -86,7 +86,7 @@ export class MrdNumberField {
         const hasError = !!this.error;
         const suffix = this.dataType === ClientLayoutItemFieldDataType.PERCENTAGE ? '%' :
             this.dataType === ClientLayoutItemFieldDataType.DECIMAL ? '' : '';
-        return (h(Host, { key: 'bd5eb25cf7b97ef2ddb67a6bc6d6d96c9bff7510' }, h("div", { key: '68b15887a045f743a7f177e7a178146a9f4e0400', class: "mrd-number-field" }, h(FieldLabel, { key: '72e88a34a390e36ee11f5840d87dedd9d4d7fb12', base: "mrd-number-field", label: this.label, required: this.required }), h("div", { key: 'd97dae69eedf4c0ed1c872065754327dbffb5ba7', class: "mrd-number-field__input-wrapper" }, h("input", { key: '5767f6c34a08f503a1a157390c679382c857ff01', class: controlClass('mrd-number-field', hasError), type: "text", inputMode: "decimal", name: this.name, value: this.displayValue, placeholder: this.placeholder || (suffix ? `0${suffix}` : '0'), required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus })), h(FieldError, { key: '1d4f8ffd3fcdf2ae2e8eb1eb68c051619d66c954', base: "mrd-number-field", error: this.error }))));
+        return (h(Host, { key: '7343dbca882b5054f22de17672ac748a8e3eca11' }, h("div", { key: 'cef10b39515b48fc9c44e651910c6a0c2a847628', class: "mrd-number-field" }, h(FieldLabel, { key: '66f178cf20f1f2f0587bd9614db150d6ae63023e', base: "mrd-number-field", label: this.label, required: this.required }), h("div", { key: 'c57c22e663a570f6e5a70b07b817970f135e850c', class: "mrd-number-field__input-wrapper" }, h("input", { key: '388b20ac11fa4aaf78df124c858b579e12f53619', class: controlClass('mrd-number-field', hasError), type: "text", inputMode: "decimal", name: this.name, value: this.displayValue, placeholder: this.placeholder || (suffix ? `0${suffix}` : '0'), required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus })), h(FieldError, { key: 'f99bb85668b047a97162ffee2582eb45dc0589ae', base: "mrd-number-field", error: this.error }))));
     }
     static get is() { return "mrd-number-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -21,9 +21,9 @@ export class MrdSecretField {
         };
     }
     render() {
-        return (h(Host, { key: 'd3d204242898c1f258b088e7b5428421cde8d7a7' }, h("div", { key: '11d284625cdd1e0def58cc31eab9bbe59346649d', class: "mrd-secret-field" }, h(FieldLabel, { key: '333e5b23d2379125a393f555b936be7bc521fdb4', base: "mrd-secret-field", label: this.label, required: this.required }), this.disabled
+        return (h(Host, { key: 'e06d04fdae34b42441976e21605fe94ad935382e' }, h("div", { key: '2889e1eb1b6d0887ae531523a0b9b43c49ef6f99', class: "mrd-secret-field" }, h(FieldLabel, { key: 'c40907905292cdef8bb0b8b9b0c03e05650bef37', base: "mrd-secret-field", label: this.label, required: this.required }), this.disabled
             ? (h("span", { class: "mrd-secret-field__masked", "aria-label": this.label }, this.value ? '••••••••' : ''))
-            : (h("input", { class: controlClass('mrd-secret-field', !!this.error), type: "password", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, autocomplete: "new-password", onInput: this.handleInput, onBlur: this.handleBlur })), h(FieldError, { key: 'cc202197fdab62da7b5083e078e69efd86e673ca', base: "mrd-secret-field", error: this.error }))));
+            : (h("input", { class: controlClass('mrd-secret-field', !!this.error), type: "password", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, autocomplete: "new-password", onInput: this.handleInput, onBlur: this.handleBlur })), h(FieldError, { key: '6353e4b40566852dbc1994c7c9c409d0d0aa1b37', base: "mrd-secret-field", error: this.error }))));
     }
     static get is() { return "mrd-secret-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -21,7 +21,7 @@ export class MrdTextField {
         };
     }
     render() {
-        return (h(Host, { key: '145aa80d06459fe85650702ced893e102762afa8' }, h("div", { key: '8f08af9acff56e704d216dc185a5d344b5b9f671', class: "mrd-text-field" }, h(FieldLabel, { key: '4e0204ffe7e8460eaf9a4be1535252cc11d0bab7', base: "mrd-text-field", label: this.label, required: this.required }), h("input", { key: '4d519077ad96c121ede51e188a2151efe72811db', class: controlClass('mrd-text-field', !!this.error), type: "text", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), h(FieldError, { key: '3c5af47037f6d6851503d769429d6c0f786d389d', base: "mrd-text-field", error: this.error }))));
+        return (h(Host, { key: '3153f0c6f8ab4d9dae93306f7507399aeda75eaf' }, h("div", { key: '5d9c28023fdfb5472fc115c66bc3df509506e10f', class: "mrd-text-field" }, h(FieldLabel, { key: '1e21139aae0cc1ae95aa3297271b618a40043e77', base: "mrd-text-field", label: this.label, required: this.required }), h("input", { key: '46f98d5e39bb834075449fac7096b077a1ae7bb3', class: controlClass('mrd-text-field', !!this.error), type: "text", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), h(FieldError, { key: '10b6ddae9cd9f36dc9d7176167d79df8e4102c03', base: "mrd-text-field", error: this.error }))));
     }
     static get is() { return "mrd-text-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -64,7 +64,7 @@ export class MrdTextareaField {
         return DOMPurify.sanitize(html);
     }
     render() {
-        return (h(Host, { key: 'e7c53e9cf54bd4138b42ca3bc7bb5381aad3e4ac' }, h("div", { key: 'bf580a74d2233704852c7d3083ec91c9bbe868ad', class: "mrd-textarea-field" }, h(FieldLabel, { key: '7de50cb2865e83c7fe1ef9b6b099b639e165909c', base: "mrd-textarea-field", label: this.label, required: this.required }), h("div", { key: 'c78e914091cd70b52c1e9cd0046e7c97bcc7e799', class: controlClass('mrd-textarea-field', !!this.error, 'container') }, h("div", { key: '604a157e82ca8a4d98bbd1c928e9f8b41d031227', class: "mrd-textarea-field__editor" })), h(FieldError, { key: 'd0263a7285b928be6ed377e7e0fa3f53a555dadd', base: "mrd-textarea-field", error: this.error }))));
+        return (h(Host, { key: 'e132531881f68f373e700617aac8033c8ebccb47' }, h("div", { key: 'fec0cf56cd7868d3fcd5a4e8a382b2dcdb6e5c50', class: "mrd-textarea-field" }, h(FieldLabel, { key: '333aa2ff57cce9e3178f0c4be4a1df1077884248', base: "mrd-textarea-field", label: this.label, required: this.required }), h("div", { key: '40025207580eb5768981b85aaa0a8ff95fce7234', class: controlClass('mrd-textarea-field', !!this.error, 'container') }, h("div", { key: '621987b3b2b1d8b4836bff065075ba527a82db81', class: "mrd-textarea-field__editor" })), h(FieldError, { key: 'ac2d8de22f008cd1c91842137ccd0cd36eb9ce19', base: "mrd-textarea-field", error: this.error }))));
     }
     static get is() { return "mrd-textarea-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -20,7 +20,7 @@ export class MrdTimeField {
         };
     }
     render() {
-        return (h(Host, { key: 'ef3876dd5c1d72bdbdb65cba00ea0992ba2ab2b6' }, h("div", { key: '6b217f6c6ec0dbb8b3249dfab6443b8f6140891c', class: "mrd-time-field" }, h(FieldLabel, { key: '87adbcc4bf1ccad07d899a315cb14a00650af09c', base: "mrd-time-field", label: this.label, required: this.required }), h("input", { key: '870fcf7e0df2ee2804f95fdc79c890b3e27bba3f', class: controlClass('mrd-time-field', !!this.error), type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: '03c21d23fbc039ffd79856134d181dffcb9e3621', base: "mrd-time-field", error: this.error }))));
+        return (h(Host, { key: 'd521c654bc7beda71a31542a25198edaaf53b838' }, h("div", { key: '084ab16ac8aed952bd0ec50e0430591d4db5bd4b', class: "mrd-time-field" }, h(FieldLabel, { key: '43938ad7c5a9765353f6523d399d4b74cbb9ec6f', base: "mrd-time-field", label: this.label, required: this.required }), h("input", { key: 'e46eda620e7a5f1bb3b433a4c051e913675c33f9', class: controlClass('mrd-time-field', !!this.error), type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), h(FieldError, { key: '34bc1eaa1b969951dffaaacad73af532b6d290fb', base: "mrd-time-field", error: this.error }))));
     }
     static get is() { return "mrd-time-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -111,7 +111,7 @@ export class MrdField {
         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, _5, _6, _7, _8;
+        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;
         const { item, locale } = this;
         const commonProps = {
             name: item.name,
@@ -136,25 +136,25 @@ export class MrdField {
             case ClientLayoutItemFieldDataType.BOOLEAN:
                 return (h("mrd-boolean-field", Object.assign({}, commonProps, { value: (_l = displayValue) !== null && _l !== void 0 ? _l : false })));
             case ClientLayoutItemFieldDataType.DATE:
-                return (h("mrd-date-field", Object.assign({}, commonProps, { value: (_m = displayValue) !== null && _m !== void 0 ? _m : '', placeholder: (_o = item.placeholder) !== null && _o !== void 0 ? _o : '' })));
+                return (h("mrd-date-field", Object.assign({}, commonProps, { value: (_m = displayValue) !== null && _m !== void 0 ? _m : '' })));
             case ClientLayoutItemFieldDataType.DATETIME:
-                return (h("mrd-datetime-field", Object.assign({}, commonProps, { value: (_p = displayValue) !== null && _p !== void 0 ? _p : '', placeholder: (_q = item.placeholder) !== null && _q !== void 0 ? _q : '' })));
+                return (h("mrd-datetime-field", Object.assign({}, commonProps, { value: (_o = displayValue) !== null && _o !== void 0 ? _o : '' })));
             case ClientLayoutItemFieldDataType.TIME:
-                return (h("mrd-time-field", Object.assign({}, commonProps, { value: (_r = displayValue) !== null && _r !== void 0 ? _r : '' })));
+                return (h("mrd-time-field", Object.assign({}, commonProps, { value: (_p = displayValue) !== null && _p !== void 0 ? _p : '' })));
             case ClientLayoutItemFieldDataType.EMAIL:
-                return (h("mrd-email-field", Object.assign({}, commonProps, { value: (_s = displayValue) !== null && _s !== void 0 ? _s : '', placeholder: (_t = item.placeholder) !== null && _t !== void 0 ? _t : '' })));
+                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("mrd-hyperlink-field", Object.assign({}, commonProps, { value: (_u = displayValue) !== null && _u !== void 0 ? _u : '', placeholder: (_v = item.placeholder) !== null && _v !== void 0 ? _v : '' })));
+                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("mrd-list-field", Object.assign({}, commonProps, { value: (_w = displayValue) !== null && _w !== void 0 ? _w : '', multiple: (_x = item.multiple) !== null && _x !== void 0 ? _x : false, listItems: (_y = item.listItems) !== null && _y !== void 0 ? _y : [] })));
+                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("mrd-file-field", Object.assign({}, commonProps, { value: displayValue, accept: (_z = item.accept) !== null && _z !== void 0 ? _z : '', maxSize: (_0 = item.maxSize) !== null && _0 !== void 0 ? _0 : 0, multiple: (_1 = item.multiple) !== null && _1 !== void 0 ? _1 : false, 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, multiple: (_z = item.multiple) !== null && _z !== void 0 ? _z : false, onMrdUpload: this.handleUpload })));
             case ClientLayoutItemFieldDataType.IMAGE:
-                return (h("mrd-image-field", Object.assign({}, commonProps, { value: displayValue, accept: (_2 = item.accept) !== null && _2 !== void 0 ? _2 : 'image/*', maxSize: (_3 = item.maxSize) !== null && _3 !== void 0 ? _3 : 0, multiple: (_4 = item.multiple) !== null && _4 !== void 0 ? _4 : false, onMrdUpload: this.handleUpload })));
+                return (h("mrd-image-field", Object.assign({}, commonProps, { value: displayValue, accept: (_0 = item.accept) !== null && _0 !== void 0 ? _0 : 'image/*', maxSize: (_1 = item.maxSize) !== null && _1 !== void 0 ? _1 : 0, multiple: (_2 = item.multiple) !== null && _2 !== void 0 ? _2 : false, onMrdUpload: this.handleUpload })));
             case ClientLayoutItemFieldDataType.LONGTEXT:
-                return (h("mrd-longtext-field", Object.assign({}, commonProps, { value: (_5 = displayValue) !== null && _5 !== void 0 ? _5 : '', placeholder: (_6 = item.placeholder) !== null && _6 !== void 0 ? _6 : '' })));
+                return (h("mrd-longtext-field", Object.assign({}, commonProps, { value: (_3 = displayValue) !== null && _3 !== void 0 ? _3 : '', placeholder: (_4 = item.placeholder) !== null && _4 !== void 0 ? _4 : '' })));
             case ClientLayoutItemFieldDataType.SECRET:
-                return (h("mrd-secret-field", Object.assign({}, commonProps, { value: (_7 = displayValue) !== null && _7 !== void 0 ? _7 : '', placeholder: (_8 = item.placeholder) !== null && _8 !== void 0 ? _8 : '' })));
+                return (h("mrd-secret-field", Object.assign({}, commonProps, { value: (_5 = displayValue) !== null && _5 !== void 0 ? _5 : '', placeholder: (_6 = item.placeholder) !== null && _6 !== void 0 ? _6 : '' })));
             default:
                 return null;
         }