@mmlogic/components 0.1.22 → 0.1.24

package/dist/cjs/index.cjs.js

@@ -47,6 +47,8 @@ exports.ClientLayoutItemFieldDataType = void 0;
     ClientLayoutItemFieldDataType["LIST"] = "LIST";
     ClientLayoutItemFieldDataType["FILE"] = "FILE";
     ClientLayoutItemFieldDataType["IMAGE"] = "IMAGE";
+    ClientLayoutItemFieldDataType["LONGTEXT"] = "LONGTEXT";
+    ClientLayoutItemFieldDataType["JSON"] = "JSON";
 })(exports.ClientLayoutItemFieldDataType || (exports.ClientLayoutItemFieldDataType = {}));
 // ─── Relation display / edit behaviour ───────────────────────────────────────
 exports.ClientLayoutItemRelationDisplayType = void 0;

package/dist/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mrd-table.cjs",[[2,"mrd-table",{"columns":[16],"rows":[16],"locale":[1],"totalElements":[2,"total-elements"],"pageSize":[2,"page-size"],"rowHeight":[2,"row-height"],"tableHeight":[2,"table-height"],"defaultSort":[1,"default-sort"],"actions":[16],"viewLabel":[1,"view-label"],"alternativeViews":[16],"loadedPages":[32],"requestedPages":[32],"renderStart":[32],"renderEnd":[32],"colWidths":[32],"sortField":[32],"sortDir":[32],"filterMode":[32],"activeFilters":[32],"openFilterCol":[32],"pendingFilter":[32],"popupPos":[32],"scrollTop":[32],"textblockModal":[32],"aggregations":[32],"viewSwitcherOpen":[32],"init":[64],"setPage":[64],"setAggregations":[64]},null,{"totalElements":[{"totalElementsChanged":0}]}]]],["mrd-boolean-field_16.cjs",[[2,"mrd-form",{"layout":[16],"locale":[1],"values":[16],"referenceHref":[1,"reference-href"],"referenceClass":[1,"reference-class"],"showCancel":[4,"show-cancel"],"formValues":[32],"errors":[32],"submitted":[32],"setFieldValue":[64]},null,{"values":[{"valuesChanged":0}]}],[2,"mrd-field",{"item":[16],"locale":[1],"value":[16]}],[2,"mrd-boolean-field",{"name":[1],"label":[1],"value":[4],"required":[4],"disabled":[4],"locale":[1],"checked":[32]}],[2,"mrd-currency-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"amountDisplay":[32],"currency":[32],"error":[32]}],[2,"mrd-date-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-datetime-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32],"localValue":[32]},null,{"value":[{"valueChanged":0}]}],[2,"mrd-email-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-file-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"fileName":[32],"isDragging":[32],"uploading":[32],"error":[32]},null,{"value":[{"valueChanged":0}]}],[2,"mrd-hyperlink-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-image-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"previewUrl":[32],"fileName":[32],"isDragging":[32],"uploading":[32],"error":[32]},null,{"value":[{"valueChanged":0}]}],[2,"mrd-list-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"multiple":[4],"locale":[1],"listItems":[16],"error":[32],"selected":[32]}],[2,"mrd-number-field",{"name":[1],"label":[1],"value":[2],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"dataType":[1,"data-type"],"decimalPrecision":[2,"decimal-precision"],"displayValue":[32],"error":[32]}],[2,"mrd-relation-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"relatedClass":[1,"related-class"],"mostSignificantClass":[1,"most-significant-class"],"displayType":[1,"display-type"],"editBehavior":[1,"edit-behavior"],"commonRelation":[1,"common-relation"],"multiple":[4],"dropdownValues":[16],"value":[1],"searchQuery":[32],"searchResults":[32],"allRecords":[32],"isLoading":[32],"selectedItems":[32],"showResults":[32],"error":[32],"highlightedIndex":[32],"setAllRecords":[64],"setSearchResults":[64],"setLoading":[64]},null,{"allRecords":[{"allRecordsChanged":0}]}],[2,"mrd-text-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-textarea-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32],"editorReady":[32]}],[2,"mrd-time-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}]]]], options);
+  return index.bootstrapLazy([["mrd-table.cjs",[[2,"mrd-table",{"columns":[16],"rows":[16],"locale":[1],"totalElements":[2,"total-elements"],"pageSize":[2,"page-size"],"rowHeight":[2,"row-height"],"tableHeight":[2,"table-height"],"defaultSort":[1,"default-sort"],"actions":[16],"viewLabel":[1,"view-label"],"alternativeViews":[16],"loadedPages":[32],"requestedPages":[32],"renderStart":[32],"renderEnd":[32],"colWidths":[32],"sortField":[32],"sortDir":[32],"filterMode":[32],"activeFilters":[32],"openFilterCol":[32],"pendingFilter":[32],"popupPos":[32],"scrollTop":[32],"textblockModal":[32],"aggregations":[32],"viewSwitcherOpen":[32],"init":[64],"setPage":[64],"setAggregations":[64]},null,{"totalElements":[{"totalElementsChanged":0}]}]]],["mrd-boolean-field_17.cjs",[[2,"mrd-form",{"layout":[16],"locale":[1],"values":[16],"referenceHref":[1,"reference-href"],"referenceClass":[1,"reference-class"],"showCancel":[4,"show-cancel"],"formValues":[32],"errors":[32],"submitted":[32],"setFieldValue":[64]},null,{"values":[{"valuesChanged":0}]}],[2,"mrd-field",{"item":[16],"locale":[1],"value":[16]}],[2,"mrd-boolean-field",{"name":[1],"label":[1],"value":[4],"required":[4],"disabled":[4],"locale":[1],"checked":[32]}],[2,"mrd-currency-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"amountDisplay":[32],"currency":[32],"error":[32]}],[2,"mrd-date-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-datetime-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32],"localValue":[32]},null,{"value":[{"valueChanged":0}]}],[2,"mrd-email-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-file-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"fileName":[32],"isDragging":[32],"uploading":[32],"error":[32]},null,{"value":[{"valueChanged":0}]}],[2,"mrd-hyperlink-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-image-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"previewUrl":[32],"fileName":[32],"isDragging":[32],"uploading":[32],"error":[32]},null,{"value":[{"valueChanged":0}]}],[2,"mrd-list-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"multiple":[4],"locale":[1],"listItems":[16],"error":[32],"selected":[32]}],[2,"mrd-longtext-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-number-field",{"name":[1],"label":[1],"value":[2],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"dataType":[1,"data-type"],"decimalPrecision":[2,"decimal-precision"],"displayValue":[32],"error":[32]}],[2,"mrd-relation-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"relatedClass":[1,"related-class"],"mostSignificantClass":[1,"most-significant-class"],"displayType":[1,"display-type"],"editBehavior":[1,"edit-behavior"],"commonRelation":[1,"common-relation"],"multiple":[4],"dropdownValues":[16],"value":[1],"searchQuery":[32],"searchResults":[32],"allRecords":[32],"isLoading":[32],"selectedItems":[32],"showResults":[32],"error":[32],"highlightedIndex":[32],"setAllRecords":[64],"setSearchResults":[64],"setLoading":[64]},null,{"allRecords":[{"allRecordsChanged":0}]}],[2,"mrd-text-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-textarea-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32],"editorReady":[32]}],[2,"mrd-time-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/mosterdcomponents.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mrd-table.cjs",[[2,"mrd-table",{"columns":[16],"rows":[16],"locale":[1],"totalElements":[2,"total-elements"],"pageSize":[2,"page-size"],"rowHeight":[2,"row-height"],"tableHeight":[2,"table-height"],"defaultSort":[1,"default-sort"],"actions":[16],"viewLabel":[1,"view-label"],"alternativeViews":[16],"loadedPages":[32],"requestedPages":[32],"renderStart":[32],"renderEnd":[32],"colWidths":[32],"sortField":[32],"sortDir":[32],"filterMode":[32],"activeFilters":[32],"openFilterCol":[32],"pendingFilter":[32],"popupPos":[32],"scrollTop":[32],"textblockModal":[32],"aggregations":[32],"viewSwitcherOpen":[32],"init":[64],"setPage":[64],"setAggregations":[64]},null,{"totalElements":[{"totalElementsChanged":0}]}]]],["mrd-boolean-field_16.cjs",[[2,"mrd-form",{"layout":[16],"locale":[1],"values":[16],"referenceHref":[1,"reference-href"],"referenceClass":[1,"reference-class"],"showCancel":[4,"show-cancel"],"formValues":[32],"errors":[32],"submitted":[32],"setFieldValue":[64]},null,{"values":[{"valuesChanged":0}]}],[2,"mrd-field",{"item":[16],"locale":[1],"value":[16]}],[2,"mrd-boolean-field",{"name":[1],"label":[1],"value":[4],"required":[4],"disabled":[4],"locale":[1],"checked":[32]}],[2,"mrd-currency-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"amountDisplay":[32],"currency":[32],"error":[32]}],[2,"mrd-date-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-datetime-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32],"localValue":[32]},null,{"value":[{"valueChanged":0}]}],[2,"mrd-email-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-file-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"fileName":[32],"isDragging":[32],"uploading":[32],"error":[32]},null,{"value":[{"valueChanged":0}]}],[2,"mrd-hyperlink-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-image-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"previewUrl":[32],"fileName":[32],"isDragging":[32],"uploading":[32],"error":[32]},null,{"value":[{"valueChanged":0}]}],[2,"mrd-list-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"multiple":[4],"locale":[1],"listItems":[16],"error":[32],"selected":[32]}],[2,"mrd-number-field",{"name":[1],"label":[1],"value":[2],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"dataType":[1,"data-type"],"decimalPrecision":[2,"decimal-precision"],"displayValue":[32],"error":[32]}],[2,"mrd-relation-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"relatedClass":[1,"related-class"],"mostSignificantClass":[1,"most-significant-class"],"displayType":[1,"display-type"],"editBehavior":[1,"edit-behavior"],"commonRelation":[1,"common-relation"],"multiple":[4],"dropdownValues":[16],"value":[1],"searchQuery":[32],"searchResults":[32],"allRecords":[32],"isLoading":[32],"selectedItems":[32],"showResults":[32],"error":[32],"highlightedIndex":[32],"setAllRecords":[64],"setSearchResults":[64],"setLoading":[64]},null,{"allRecords":[{"allRecordsChanged":0}]}],[2,"mrd-text-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-textarea-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32],"editorReady":[32]}],[2,"mrd-time-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}]]]], options);
+  return index.bootstrapLazy([["mrd-table.cjs",[[2,"mrd-table",{"columns":[16],"rows":[16],"locale":[1],"totalElements":[2,"total-elements"],"pageSize":[2,"page-size"],"rowHeight":[2,"row-height"],"tableHeight":[2,"table-height"],"defaultSort":[1,"default-sort"],"actions":[16],"viewLabel":[1,"view-label"],"alternativeViews":[16],"loadedPages":[32],"requestedPages":[32],"renderStart":[32],"renderEnd":[32],"colWidths":[32],"sortField":[32],"sortDir":[32],"filterMode":[32],"activeFilters":[32],"openFilterCol":[32],"pendingFilter":[32],"popupPos":[32],"scrollTop":[32],"textblockModal":[32],"aggregations":[32],"viewSwitcherOpen":[32],"init":[64],"setPage":[64],"setAggregations":[64]},null,{"totalElements":[{"totalElementsChanged":0}]}]]],["mrd-boolean-field_17.cjs",[[2,"mrd-form",{"layout":[16],"locale":[1],"values":[16],"referenceHref":[1,"reference-href"],"referenceClass":[1,"reference-class"],"showCancel":[4,"show-cancel"],"formValues":[32],"errors":[32],"submitted":[32],"setFieldValue":[64]},null,{"values":[{"valuesChanged":0}]}],[2,"mrd-field",{"item":[16],"locale":[1],"value":[16]}],[2,"mrd-boolean-field",{"name":[1],"label":[1],"value":[4],"required":[4],"disabled":[4],"locale":[1],"checked":[32]}],[2,"mrd-currency-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"amountDisplay":[32],"currency":[32],"error":[32]}],[2,"mrd-date-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-datetime-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32],"localValue":[32]},null,{"value":[{"valueChanged":0}]}],[2,"mrd-email-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-file-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"fileName":[32],"isDragging":[32],"uploading":[32],"error":[32]},null,{"value":[{"valueChanged":0}]}],[2,"mrd-hyperlink-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-image-field",{"name":[1],"label":[1],"value":[16],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"previewUrl":[32],"fileName":[32],"isDragging":[32],"uploading":[32],"error":[32]},null,{"value":[{"valueChanged":0}]}],[2,"mrd-list-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"multiple":[4],"locale":[1],"listItems":[16],"error":[32],"selected":[32]}],[2,"mrd-longtext-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-number-field",{"name":[1],"label":[1],"value":[2],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"dataType":[1,"data-type"],"decimalPrecision":[2,"decimal-precision"],"displayValue":[32],"error":[32]}],[2,"mrd-relation-field",{"name":[1],"label":[1],"required":[4],"disabled":[4],"locale":[1],"relatedClass":[1,"related-class"],"mostSignificantClass":[1,"most-significant-class"],"displayType":[1,"display-type"],"editBehavior":[1,"edit-behavior"],"commonRelation":[1,"common-relation"],"multiple":[4],"dropdownValues":[16],"value":[1],"searchQuery":[32],"searchResults":[32],"allRecords":[32],"isLoading":[32],"selectedItems":[32],"showResults":[32],"error":[32],"highlightedIndex":[32],"setAllRecords":[64],"setSearchResults":[64],"setLoading":[64]},null,{"allRecords":[{"allRecordsChanged":0}]}],[2,"mrd-text-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}],[2,"mrd-textarea-field",{"name":[1],"label":[1],"value":[1],"placeholder":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32],"editorReady":[32]}],[2,"mrd-time-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"locale":[1],"error":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{mrd-boolean-field_16.cjs.entry.js → mrd-boolean-field_17.cjs.entry.js}

@@ -312,7 +312,7 @@ const MrdField = class {
         };
     }
     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;
+        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 === index$1.ClientLayoutItemType.RELATION && item.relation) {
             const rel = item.relation;
@@ -360,6 +360,10 @@ const MrdField = class {
                 return (index.h(index.Host, null, index.h("mrd-file-field", Object.assign({}, commonProps, { value: value, accept: (_3 = field.accept) !== null && _3 !== void 0 ? _3 : '', maxSize: (_4 = field.maxSize) !== null && _4 !== void 0 ? _4 : 0, onMrdUpload: this.handleUpload }))));
             case index$1.ClientLayoutItemFieldDataType.IMAGE:
                 return (index.h(index.Host, null, index.h("mrd-image-field", Object.assign({}, commonProps, { value: value, accept: (_5 = field.accept) !== null && _5 !== void 0 ? _5 : 'image/*', maxSize: (_6 = field.maxSize) !== null && _6 !== void 0 ? _6 : 0, onMrdUpload: this.handleUpload }))));
+            case index$1.ClientLayoutItemFieldDataType.LONGTEXT:
+                return (index.h(index.Host, null, index.h("mrd-longtext-field", Object.assign({}, commonProps, { value: (_7 = value) !== null && _7 !== void 0 ? _7 : '', placeholder: (_8 = field.placeholder) !== null && _8 !== void 0 ? _8 : '' }))));
+            case index$1.ClientLayoutItemFieldDataType.JSON:
+                return index.h(index.Host, null);
             default:
                 return index.h(index.Host, null);
         }
@@ -1042,6 +1046,43 @@ const MrdListField = class {
 };
 MrdListField.style = mrdListFieldScss();
 
+const mrdLongtextFieldScss = () => `.sc-mrd-longtext-field-h{display:block}.mrd-longtext-field.sc-mrd-longtext-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-longtext-field__label.sc-mrd-longtext-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-longtext-field__label--required.sc-mrd-longtext-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-longtext-field__input.sc-mrd-longtext-field{display:block;width:100%;min-height:calc(var(--mrd-input-height) * 5);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);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);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;resize:vertical;box-sizing:border-box;line-height:1.5}.mrd-longtext-field__input.sc-mrd-longtext-field::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-longtext-field__input.sc-mrd-longtext-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-longtext-field__input--error.sc-mrd-longtext-field{border-color:var(--mrd-border-color-error)}.mrd-longtext-field__input--error.sc-mrd-longtext-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-longtext-field__content.sc-mrd-longtext-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);white-space:pre-wrap;word-break:break-word;margin:0;padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);background-color:var(--mrd-input-bg-disabled);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);line-height:1.5}.mrd-longtext-field__error.sc-mrd-longtext-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
+
+const MrdLongtextField = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mrdChange = index.createEvent(this, "mrdChange");
+        this.mrdBlur = index.createEvent(this, "mrdBlur");
+        this.name = '';
+        this.label = '';
+        this.value = '';
+        this.placeholder = '';
+        this.required = false;
+        this.disabled = false;
+        this.locale = navigator.language;
+        this.error = '';
+        this.handleInput = (e) => {
+            const val = e.target.value;
+            this.mrdChange.emit({ name: this.name, value: val });
+        };
+        this.handleBlur = (e) => {
+            const val = e.target.value;
+            if (this.required && !validateRequired(val)) {
+                this.error = format.t('required', this.locale);
+            }
+            else {
+                this.error = '';
+            }
+            this.mrdBlur.emit({ name: this.name, value: val });
+        };
+    }
+    render() {
+        const hasError = !!this.error;
+        return (index.h(index.Host, { key: '0b1764adfb7ddce8c5e645a5d96c69c715652365' }, index.h("div", { key: '3c0c6bf77bfcd3f1bc97103baf9e5f6588f541f2', class: "mrd-longtext-field" }, this.label && (index.h("label", { key: 'f096b24c785a8c4b473fe0491a8cfdd7da4770bc', class: `mrd-longtext-field__label${this.required ? ' mrd-longtext-field__label--required' : ''}` }, this.label)), this.disabled ? (index.h("pre", { class: "mrd-longtext-field__content" }, this.value)) : (index.h("textarea", { class: `mrd-longtext-field__input${hasError ? ' mrd-longtext-field__input--error' : ''}`, name: this.name, placeholder: this.placeholder, required: this.required, rows: 10, onInput: this.handleInput, onBlur: this.handleBlur }, this.value)), hasError && index.h("span", { key: '74b6bcecf81ca86172015abd5e3512ad288ae88e', class: "mrd-longtext-field__error" }, this.error))));
+    }
+};
+MrdLongtextField.style = mrdLongtextFieldScss();
+
 const mrdNumberFieldScss = () => `.sc-mrd-number-field-h{display:block}.mrd-number-field.sc-mrd-number-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-number-field__label.sc-mrd-number-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-number-field__label--required.sc-mrd-number-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-number-field__input-wrapper.sc-mrd-number-field{position:relative;display:flex;align-items:center}.mrd-number-field__input.sc-mrd-number-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);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);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;box-sizing:border-box;text-align:right}.mrd-number-field__input.sc-mrd-number-field::placeholder{color:var(--mrd-input-placeholder-color);text-align:left}.mrd-number-field__input.sc-mrd-number-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-number-field__input.sc-mrd-number-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-number-field__input--error.sc-mrd-number-field{border-color:var(--mrd-border-color-error)}.mrd-number-field__input--error.sc-mrd-number-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-number-field__error.sc-mrd-number-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
 
 const MrdNumberField = class {
@@ -1113,7 +1154,7 @@ const MrdNumberField = class {
         const hasError = !!this.error;
         const suffix = this.dataType === index$1.ClientLayoutItemFieldDataType.PERCENTAGE ? '%' :
             this.dataType === index$1.ClientLayoutItemFieldDataType.DECIMAL ? '' : '';
-        return (index.h(index.Host, { key: '68d81012d9180dde4160a507121b83f04698834a' }, index.h("div", { key: 'b8e46f6d23527b2c95ad2738fc63a07adfce4fda', class: "mrd-number-field" }, this.label && (index.h("label", { key: 'c3271c7a8adfd8bcb3b4f51e580239f928a354a5', class: `mrd-number-field__label${this.required ? ' mrd-number-field__label--required' : ''}` }, this.label)), index.h("div", { key: 'c46b69affd1e22c539511f6743b6d23fe73fb079', class: "mrd-number-field__input-wrapper" }, index.h("input", { key: 'e68188829c2e03c947c5605332a2681de550a0d5', class: `mrd-number-field__input${hasError ? ' mrd-number-field__input--error' : ''}`, 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 })), hasError && index.h("span", { key: 'bdc2723e2547517765bd64ad70c5103c7a2b363c', class: "mrd-number-field__error" }, this.error))));
+        return (index.h(index.Host, { key: '676e773fd4cc22936e64626b16e58c76f74ad8a7' }, index.h("div", { key: 'c646eab29793326f439d9838ecdab68249c487f1', class: "mrd-number-field" }, this.label && (index.h("label", { key: 'fb4fdac8f71b513fed52262ed8f5b5a5258f8f0b', class: `mrd-number-field__label${this.required ? ' mrd-number-field__label--required' : ''}` }, this.label)), index.h("div", { key: '5f7540318761da01f9793430ca709ba014204a11', class: "mrd-number-field__input-wrapper" }, index.h("input", { key: 'a102a89f9b7d91b29cf65afd5772552002d4c4cc', class: `mrd-number-field__input${hasError ? ' mrd-number-field__input--error' : ''}`, 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 })), hasError && index.h("span", { key: 'eb00631f61d2c9ee6a94343a0c79847a21e8316c', class: "mrd-number-field__error" }, this.error))));
     }
 };
 MrdNumberField.style = mrdNumberFieldScss();
@@ -1254,18 +1295,30 @@ const MrdRelationField = class {
     async setAllRecords(records) {
         this.allRecords = records;
     }
-    allRecordsChanged() {
+    getValueHref() {
         var _a, _b, _c;
+        const v = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
+        if (!v)
+            return '';
+        if (typeof v === 'object')
+            return (_c = v.id) !== null && _c !== void 0 ? _c : '';
+        return v;
+    }
+    allRecordsChanged() {
         if (this.editBehavior !== index$1.ClientLayoutItemRelationEditBehavior.DROPDOWN)
             return;
-        // After async options load the browser may not update the select's displayed value
-        // from the `selected` attribute alone — set it imperatively.
-        const select = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector('select');
-        if (!select)
+        const current = this.getValueHref();
+        if (!current)
             return;
-        const current = Array.isArray(this.value) ? ((_b = this.value[0]) !== null && _b !== void 0 ? _b : '') : ((_c = this.value) !== null && _c !== void 0 ? _c : '');
-        if (current)
-            select.value = current;
+        // Defer past Stencil's async render cycle: options must exist in the DOM before
+        // select.value can be set. setAttribute('selected') alone is ignored by browsers
+        // when the select already has an established value.
+        setTimeout(() => {
+            var _a;
+            const select = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector('select');
+            if (select)
+                select.value = current;
+        }, 0);
     }
     async setSearchResults(results) {
         this.searchResults = results;
@@ -1307,14 +1360,14 @@ const MrdRelationField = class {
         }
     }
     render() {
-        var _a, _b, _c, _d;
+        var _a, _b;
         const hasError = !!this.error;
         if (this.editBehavior === index$1.ClientLayoutItemRelationEditBehavior.DROPDOWN) {
-            const currentValue = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
+            const currentValue = this.getValueHref();
             return (index.h(index.Host, null, index.h("div", { class: "mrd-relation-field" }, this.label && (index.h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), index.h("select", { class: `mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleDropdownChange }, index.h("option", { value: "" }, format.t('select_placeholder', this.locale)), this.allRecords.map(record => (index.h("option", { key: record.id, value: record.id, selected: record.id === currentValue }, record.label)))), hasError && index.h("span", { class: "mrd-relation-field__error" }, this.error))));
         }
         if (this.displayType === index$1.ClientLayoutItemRelationDisplayType.DROPDOWN) {
-            const currentValue = Array.isArray(this.value) ? ((_c = this.value[0]) !== null && _c !== void 0 ? _c : '') : ((_d = this.value) !== null && _d !== void 0 ? _d : '');
+            const currentValue = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
             return (index.h(index.Host, null, index.h("div", { class: "mrd-relation-field" }, this.label && (index.h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), index.h("select", { class: `mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleDropdownChange }, index.h("option", { value: "" }, format.t('select_placeholder', this.locale)), this.dropdownValues.map(dv => (index.h("option", { key: dv.key, value: dv.key, selected: dv.key === currentValue }, dv.label)))), hasError && index.h("span", { class: "mrd-relation-field__error" }, this.error))));
         }
         // SEARCH mode
@@ -1366,7 +1419,7 @@ const MrdTextField = class {
     }
     render() {
         const hasError = !!this.error;
-        return (index.h(index.Host, { key: '4ddbcb2f8915235631c6f66449b28e664c24c0a4' }, index.h("div", { key: '91dbb52ed715c92d4ef2bc0924fd378d0dc839a8', class: "mrd-text-field" }, this.label && (index.h("label", { key: 'cf3278503107d313c08034273916a4b84a16febd', class: `mrd-text-field__label${this.required ? ' mrd-text-field__label--required' : ''}` }, this.label)), index.h("input", { key: '9ab992213bfaa372e453331e1b1e12a853c3ae6e', class: `mrd-text-field__input${hasError ? ' mrd-text-field__input--error' : ''}`, type: "text", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && index.h("span", { key: 'a4ff2fdd2490f644eb97f66f15edc5af0b22e823', class: "mrd-text-field__error" }, this.error))));
+        return (index.h(index.Host, { key: '8909be24f6452fd4f485b209b226edd4a7718d6b' }, index.h("div", { key: '18680ffdd64384b8725c408360da8f0f288ee6fc', class: "mrd-text-field" }, this.label && (index.h("label", { key: 'c4d014056181d4a92ca74a505ae48cb2cb81236d', class: `mrd-text-field__label${this.required ? ' mrd-text-field__label--required' : ''}` }, this.label)), index.h("input", { key: '76f862523928100f1f1089fc747b2964312d77a2', class: `mrd-text-field__input${hasError ? ' mrd-text-field__input--error' : ''}`, type: "text", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && index.h("span", { key: 'd0a1e04caea7a2d5058bc753e0885f25db302575', class: "mrd-text-field__error" }, this.error))));
     }
 };
 MrdTextField.style = mrdTextFieldScss();
@@ -1440,7 +1493,7 @@ const MrdTextareaField = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '8f7544745341ea2eca4450296db53ed8b41af0e2' }, index.h("div", { key: '62937448dd685071e0500b8f7f53fe22b10ffa15', class: "mrd-textarea-field" }, this.label && (index.h("label", { key: '4a7d807d78c2a9abeaf3ff94ee5e71b167475e25', class: `mrd-textarea-field__label${this.required ? ' mrd-textarea-field__label--required' : ''}` }, this.label)), index.h("div", { key: '599e28a45b1c161d7cfec3de138e386bf997f9b9', class: `mrd-textarea-field__container${this.error ? ' mrd-textarea-field__container--error' : ''}` }, index.h("div", { key: '5824a225fa6ea29bf02dfd8e4b27a71e853f059e', class: "mrd-textarea-field__editor" })), this.error && index.h("span", { key: '1c7693269df8f3fe112a6df419e6cbace75bdaa9', class: "mrd-textarea-field__error" }, this.error))));
+        return (index.h(index.Host, { key: '41b9f19dc589c26545a11db883c00b7ffe5d1c04' }, index.h("div", { key: '62b01e407efe1d5b8885e769f62705938f931817', class: "mrd-textarea-field" }, this.label && (index.h("label", { key: '284e3355dfe15c0aedcb9bafdd829269a0eea93a', class: `mrd-textarea-field__label${this.required ? ' mrd-textarea-field__label--required' : ''}` }, this.label)), index.h("div", { key: '0dba936a6eba64457f5cc69164d0f0eaf4563698', class: `mrd-textarea-field__container${this.error ? ' mrd-textarea-field__container--error' : ''}` }, index.h("div", { key: '0c47c25bd86d5002575a1f19848b0b0af2e87982', class: "mrd-textarea-field__editor" })), this.error && index.h("span", { key: 'e678046a6c27544dd9007a6c66083cce089cb991', class: "mrd-textarea-field__error" }, this.error))));
     }
     get el() { return index.getElement(this); }
 };
@@ -1477,7 +1530,7 @@ const MrdTimeField = class {
     }
     render() {
         const hasError = !!this.error;
-        return (index.h(index.Host, { key: '0a6e3047eb409b50a7dfa46c724e0d9824bdbad9' }, index.h("div", { key: '1fdcaa9cc0e44edd514d3453df0cfb264989cbca', class: "mrd-time-field" }, this.label && (index.h("label", { key: 'ae53864761258ae56e29474c2da68c852fe8db57', class: `mrd-time-field__label${this.required ? ' mrd-time-field__label--required' : ''}` }, this.label)), index.h("input", { key: '60336f497545b61656756790cfb5ec096034ecf7', class: `mrd-time-field__input${hasError ? ' mrd-time-field__input--error' : ''}`, type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && index.h("span", { key: 'f8409b690c67873f6e4fe10f1d404b57005f0557', class: "mrd-time-field__error" }, this.error))));
+        return (index.h(index.Host, { key: 'f5325429315ff23757f2a575b8d317c76e23f579' }, index.h("div", { key: '2c2a4a49984d61cf62f94f1923d6a2a1e550fb1c', class: "mrd-time-field" }, this.label && (index.h("label", { key: '3ef4da8ecc8406eacf3e91e188a1ea20f8eb8779', class: `mrd-time-field__label${this.required ? ' mrd-time-field__label--required' : ''}` }, this.label)), index.h("input", { key: '284527457812d72f5341128d3ba7873f52d5694f', class: `mrd-time-field__input${hasError ? ' mrd-time-field__input--error' : ''}`, type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && index.h("span", { key: '7563dcb10e813c583a0fb29e07f6e7f2340609bf', class: "mrd-time-field__error" }, this.error))));
     }
 };
 MrdTimeField.style = mrdTimeFieldScss();
@@ -1493,6 +1546,7 @@ exports.mrd_form = MrdForm;
 exports.mrd_hyperlink_field = MrdHyperlinkField;
 exports.mrd_image_field = MrdImageField;
 exports.mrd_list_field = MrdListField;
+exports.mrd_longtext_field = MrdLongtextField;
 exports.mrd_number_field = MrdNumberField;
 exports.mrd_relation_field = MrdRelationField;
 exports.mrd_text_field = MrdTextField;

package/dist/cjs/mrd-table.cjs.entry.js

@@ -66,6 +66,12 @@ class CellRenderer {
                 txt.innerHTML = stripped;
                 return txt.value.trim();
             }
+            case 'LONGTEXT':
+                return String(value).replace(/[\r\n]+/g, ' ').trim();
+            case 'JSON': {
+                const str = typeof value === 'object' ? JSON.stringify(value) : String(value);
+                return str.replace(/[\r\n]+/g, ' ').trim();
+            }
             default:
                 return String(value);
         }

package/dist/collection/collection-manifest.json

@@ -11,6 +11,7 @@
     "components/mrd-hyperlink-field/mrd-hyperlink-field.js",
     "components/mrd-image-field/mrd-image-field.js",
     "components/mrd-list-field/mrd-list-field.js",
+    "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-table/mrd-table.js",

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

@@ -25,7 +25,7 @@ export class MrdField {
         };
     }
     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;
+        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 && item.relation) {
             const rel = item.relation;
@@ -73,6 +73,10 @@ export class MrdField {
                 return (h(Host, null, h("mrd-file-field", Object.assign({}, commonProps, { value: value, accept: (_3 = field.accept) !== null && _3 !== void 0 ? _3 : '', maxSize: (_4 = field.maxSize) !== null && _4 !== void 0 ? _4 : 0, onMrdUpload: this.handleUpload }))));
             case ClientLayoutItemFieldDataType.IMAGE:
                 return (h(Host, null, h("mrd-image-field", Object.assign({}, commonProps, { value: value, accept: (_5 = field.accept) !== null && _5 !== void 0 ? _5 : 'image/*', maxSize: (_6 = field.maxSize) !== null && _6 !== void 0 ? _6 : 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 = field.placeholder) !== null && _8 !== void 0 ? _8 : '' }))));
+            case ClientLayoutItemFieldDataType.JSON:
+                return h(Host, null);
             default:
                 return h(Host, null);
         }

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

@@ -0,0 +1,227 @@
+import { Host, h } from "@stencil/core";
+import { t } from "../../utils/i18n";
+import { validateRequired } from "../../utils/validation";
+export class MrdLongtextField {
+    constructor() {
+        this.name = '';
+        this.label = '';
+        this.value = '';
+        this.placeholder = '';
+        this.required = false;
+        this.disabled = false;
+        this.locale = navigator.language;
+        this.error = '';
+        this.handleInput = (e) => {
+            const val = e.target.value;
+            this.mrdChange.emit({ name: this.name, value: val });
+        };
+        this.handleBlur = (e) => {
+            const val = e.target.value;
+            if (this.required && !validateRequired(val)) {
+                this.error = t('required', this.locale);
+            }
+            else {
+                this.error = '';
+            }
+            this.mrdBlur.emit({ name: this.name, value: val });
+        };
+    }
+    render() {
+        const hasError = !!this.error;
+        return (h(Host, { key: '0b1764adfb7ddce8c5e645a5d96c69c715652365' }, h("div", { key: '3c0c6bf77bfcd3f1bc97103baf9e5f6588f541f2', class: "mrd-longtext-field" }, this.label && (h("label", { key: 'f096b24c785a8c4b473fe0491a8cfdd7da4770bc', class: `mrd-longtext-field__label${this.required ? ' mrd-longtext-field__label--required' : ''}` }, this.label)), this.disabled ? (h("pre", { class: "mrd-longtext-field__content" }, this.value)) : (h("textarea", { class: `mrd-longtext-field__input${hasError ? ' mrd-longtext-field__input--error' : ''}`, name: this.name, placeholder: this.placeholder, required: this.required, rows: 10, onInput: this.handleInput, onBlur: this.handleBlur }, this.value)), hasError && h("span", { key: '74b6bcecf81ca86172015abd5e3512ad288ae88e', class: "mrd-longtext-field__error" }, this.error))));
+    }
+    static get is() { return "mrd-longtext-field"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-longtext-field.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-longtext-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "navigator.language"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "error": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mrdChange",
+                "name": "mrdChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; value: string }",
+                    "resolved": "{ name: string; value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdBlur",
+                "name": "mrdBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; value: string }",
+                    "resolved": "{ name: string; value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,78 @@
+:host {
+  display: block;
+}
+
+.mrd-longtext-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-1);
+  width: 100%;
+}
+
+.mrd-longtext-field__label {
+  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-longtext-field__label--required::after {
+  content: ' *';
+  color: var(--mrd-color-danger);
+}
+
+.mrd-longtext-field__input {
+  display: block;
+  width: 100%;
+  min-height: calc(var(--mrd-input-height) * 5);
+  padding: var(--mrd-input-padding-y) var(--mrd-input-padding-x);
+  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);
+  transition: border-color var(--mrd-transition), box-shadow var(--mrd-transition);
+  outline: none;
+  resize: vertical;
+  box-sizing: border-box;
+  line-height: 1.5;
+}
+
+.mrd-longtext-field__input::placeholder {
+  color: var(--mrd-input-placeholder-color);
+}
+
+.mrd-longtext-field__input:focus {
+  border-color: var(--mrd-border-color-focus);
+  box-shadow: var(--mrd-shadow-focus);
+}
+
+.mrd-longtext-field__input--error {
+  border-color: var(--mrd-border-color-error);
+}
+
+.mrd-longtext-field__input--error:focus {
+  box-shadow: var(--mrd-shadow-focus-error);
+}
+
+.mrd-longtext-field__content {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-base);
+  color: var(--mrd-input-color);
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin: 0;
+  padding: var(--mrd-input-padding-y) var(--mrd-input-padding-x);
+  background-color: var(--mrd-input-bg-disabled);
+  border: var(--mrd-border-width) solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  line-height: 1.5;
+}
+
+.mrd-longtext-field__error {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-error-font-size);
+  color: var(--mrd-error-color);
+}

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

@@ -69,7 +69,7 @@ export class MrdNumberField {
         const hasError = !!this.error;
         const suffix = this.dataType === ClientLayoutItemFieldDataType.PERCENTAGE ? '%' :
             this.dataType === ClientLayoutItemFieldDataType.DECIMAL ? '' : '';
-        return (h(Host, { key: '68d81012d9180dde4160a507121b83f04698834a' }, h("div", { key: 'b8e46f6d23527b2c95ad2738fc63a07adfce4fda', class: "mrd-number-field" }, this.label && (h("label", { key: 'c3271c7a8adfd8bcb3b4f51e580239f928a354a5', class: `mrd-number-field__label${this.required ? ' mrd-number-field__label--required' : ''}` }, this.label)), h("div", { key: 'c46b69affd1e22c539511f6743b6d23fe73fb079', class: "mrd-number-field__input-wrapper" }, h("input", { key: 'e68188829c2e03c947c5605332a2681de550a0d5', class: `mrd-number-field__input${hasError ? ' mrd-number-field__input--error' : ''}`, 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 })), hasError && h("span", { key: 'bdc2723e2547517765bd64ad70c5103c7a2b363c', class: "mrd-number-field__error" }, this.error))));
+        return (h(Host, { key: '676e773fd4cc22936e64626b16e58c76f74ad8a7' }, h("div", { key: 'c646eab29793326f439d9838ecdab68249c487f1', class: "mrd-number-field" }, this.label && (h("label", { key: 'fb4fdac8f71b513fed52262ed8f5b5a5258f8f0b', class: `mrd-number-field__label${this.required ? ' mrd-number-field__label--required' : ''}` }, this.label)), h("div", { key: '5f7540318761da01f9793430ca709ba014204a11', class: "mrd-number-field__input-wrapper" }, h("input", { key: 'a102a89f9b7d91b29cf65afd5772552002d4c4cc', class: `mrd-number-field__input${hasError ? ' mrd-number-field__input--error' : ''}`, 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 })), hasError && h("span", { key: 'eb00631f61d2c9ee6a94343a0c79847a21e8316c', class: "mrd-number-field__error" }, this.error))));
     }
     static get is() { return "mrd-number-field"; }
     static get encapsulation() { return "scoped"; }
@@ -230,7 +230,7 @@ export class MrdNumberField {
                 "mutable": false,
                 "complexType": {
                     "original": "ClientLayoutItemFieldDataType",
-                    "resolved": "ClientLayoutItemFieldDataType.BOOLEAN | ClientLayoutItemFieldDataType.CURRENCY | ClientLayoutItemFieldDataType.DATE | ClientLayoutItemFieldDataType.DATETIME | ClientLayoutItemFieldDataType.DECIMAL | ClientLayoutItemFieldDataType.EMAIL | ClientLayoutItemFieldDataType.FILE | ClientLayoutItemFieldDataType.HYPERLINK | ClientLayoutItemFieldDataType.IMAGE | ClientLayoutItemFieldDataType.INTEGER | ClientLayoutItemFieldDataType.LIST | ClientLayoutItemFieldDataType.PERCENTAGE | ClientLayoutItemFieldDataType.TEXT | ClientLayoutItemFieldDataType.TEXTBLOCK | ClientLayoutItemFieldDataType.TIME",
+                    "resolved": "ClientLayoutItemFieldDataType.BOOLEAN | ClientLayoutItemFieldDataType.CURRENCY | ClientLayoutItemFieldDataType.DATE | ClientLayoutItemFieldDataType.DATETIME | ClientLayoutItemFieldDataType.DECIMAL | ClientLayoutItemFieldDataType.EMAIL | ClientLayoutItemFieldDataType.FILE | ClientLayoutItemFieldDataType.HYPERLINK | ClientLayoutItemFieldDataType.IMAGE | ClientLayoutItemFieldDataType.INTEGER | ClientLayoutItemFieldDataType.JSON | ClientLayoutItemFieldDataType.LIST | ClientLayoutItemFieldDataType.LONGTEXT | ClientLayoutItemFieldDataType.PERCENTAGE | ClientLayoutItemFieldDataType.TEXT | ClientLayoutItemFieldDataType.TEXTBLOCK | ClientLayoutItemFieldDataType.TIME",
                     "references": {
                         "ClientLayoutItemFieldDataType": {
                             "location": "import",