@mmlogic/components 0.1.0 → 0.1.2

package/dist/cjs/{index-OvnIRO4Y.js → index-BPj2cBXs.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const NAMESPACE = 'mosterdcomponents';
-const BUILD = /* mosterdcomponents */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: false, state: true, updatable: true};
+const BUILD = /* mosterdcomponents */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, state: true, updatable: true};
 
 /*
  Stencil Client Platform v4.43.2 | MIT Licensed | https://stenciljs.com
@@ -1077,6 +1077,7 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
       `Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/stenciljs/core/issues/5457).`
     );
   }
+  const elm = hostRef.$hostElement$ ;
   const oldVal = hostRef.$instanceValues$.get(propName);
   const flags = hostRef.$flags$;
   const instance = hostRef.$lazyInstance$ ;
@@ -1087,6 +1088,27 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
   const didValueChange = newVal !== oldVal && !areBothNaN;
   if ((!(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
     hostRef.$instanceValues$.set(propName, newVal);
+    if (cmpMeta.$watchers$) {
+      const watchMethods = cmpMeta.$watchers$[propName];
+      if (watchMethods) {
+        watchMethods.map((watcher) => {
+          try {
+            const [[watchMethodName, watcherFlags]] = Object.entries(watcher);
+            if (flags & 128 /* isWatchReady */ || watcherFlags & 1 /* Immediate */) {
+              if (!instance) {
+                hostRef.$fetchedCbList$.push(() => {
+                  hostRef.$lazyInstance$[watchMethodName](newVal, oldVal, propName);
+                });
+              } else {
+                instance[watchMethodName](newVal, oldVal, propName);
+              }
+            }
+          } catch (e) {
+            consoleError(e, elm);
+          }
+        });
+      }
+    }
     if (flags & 2 /* hasRendered */) {
       if (instance.componentShouldUpdate) {
         const shouldUpdate = instance.componentShouldUpdate(newVal, oldVal, propName);
@@ -1106,6 +1128,17 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
   if (cmpMeta.$members$ || BUILD.propChangeCallback) {
+    {
+      if (Cstr.watchers && !cmpMeta.$watchers$) {
+        cmpMeta.$watchers$ = Cstr.watchers;
+      }
+      if (Cstr.deserializers && !cmpMeta.$deserializers$) {
+        cmpMeta.$deserializers$ = Cstr.deserializers;
+      }
+      if (Cstr.serializers && !cmpMeta.$serializers$) {
+        cmpMeta.$serializers$ = Cstr.serializers;
+      }
+    }
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
       if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
@@ -1267,6 +1300,11 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
           throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
         }
         if (!Cstr.isProxied) {
+          {
+            cmpMeta.$watchers$ = Cstr.watchers;
+            cmpMeta.$serializers$ = Cstr.serializers;
+            cmpMeta.$deserializers$ = Cstr.deserializers;
+          }
           proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
           Cstr.isProxied = true;
         }
@@ -1282,6 +1320,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         {
           hostRef.$flags$ &= -9 /* isConstructingInstance */;
         }
+        {
+          hostRef.$flags$ |= 128 /* isWatchReady */;
+        }
         endNewInstance();
         {
           fireConnectedCallback(hostRef.$lazyInstance$, elm);
@@ -1413,6 +1454,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   plt.$resourcesUrl$ = new URL(options.resourcesUrl || "./", win.document.baseURI).href;
   lazyBundles.map((lazyBundle) => {
     lazyBundle[1].map((compactMeta) => {
+      var _a2, _b, _c;
       const cmpMeta = {
         $flags$: compactMeta[0],
         $tagName$: compactMeta[1],
@@ -1422,6 +1464,11 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$members$ = compactMeta[2];
       }
+      {
+        cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
+        cmpMeta.$serializers$ = (_b = compactMeta[5]) != null ? _b : {};
+        cmpMeta.$deserializers$ = (_c = compactMeta[6]) != null ? _c : {};
+      }
       const tagName = transformTag(cmpMeta.$tagName$);
       const HostElement = class extends HTMLElement {
         ["s-p"];

package/dist/cjs/index.cjs.js

@@ -1,12 +1,35 @@
 'use strict';
 
+// ─── Layout type ──────────────────────────────────────────────────────────────
+exports.ClientLayoutType = void 0;
+(function (ClientLayoutType) {
+    ClientLayoutType["OBJECT_FORM_DASHBOARD"] = "OBJECT_FORM_DASHBOARD";
+    ClientLayoutType["CLASS_DASHBOARD"] = "CLASS_DASHBOARD";
+    ClientLayoutType["GENERAL_DASHBOARD"] = "GENERAL_DASHBOARD";
+    ClientLayoutType["NAVIGATION_PANE"] = "NAVIGATION_PANE";
+})(exports.ClientLayoutType || (exports.ClientLayoutType = {}));
+// ─── Item types ───────────────────────────────────────────────────────────────
 exports.ClientLayoutItemType = void 0;
 (function (ClientLayoutItemType) {
+    // Form / data input
     ClientLayoutItemType["FIELD"] = "FIELD";
     ClientLayoutItemType["RELATION"] = "RELATION";
+    // Layout structure
     ClientLayoutItemType["SECTION"] = "SECTION";
     ClientLayoutItemType["GROUP"] = "GROUP";
+    // Read-only / display
+    ClientLayoutItemType["HEADER"] = "HEADER";
+    ClientLayoutItemType["TEXT"] = "TEXT";
+    // Navigation / actions
+    ClientLayoutItemType["NAVIGATE"] = "NAVIGATE";
+    ClientLayoutItemType["ACTION"] = "ACTION";
+    ClientLayoutItemType["SEARCH"] = "SEARCH";
+    // Dashboard views
+    ClientLayoutItemType["VIEW"] = "VIEW";
+    ClientLayoutItemType["RELATED_VIEW"] = "RELATED_VIEW";
+    ClientLayoutItemType["RELATED_OBJECT"] = "RELATED_OBJECT";
 })(exports.ClientLayoutItemType || (exports.ClientLayoutItemType = {}));
+// ─── Field data types ─────────────────────────────────────────────────────────
 exports.ClientLayoutItemFieldDataType = void 0;
 (function (ClientLayoutItemFieldDataType) {
     ClientLayoutItemFieldDataType["TEXT"] = "TEXT";
@@ -25,8 +48,16 @@ exports.ClientLayoutItemFieldDataType = void 0;
     ClientLayoutItemFieldDataType["FILE"] = "FILE";
     ClientLayoutItemFieldDataType["IMAGE"] = "IMAGE";
 })(exports.ClientLayoutItemFieldDataType || (exports.ClientLayoutItemFieldDataType = {}));
+// ─── Relation display / edit behaviour ───────────────────────────────────────
 exports.ClientLayoutItemRelationDisplayType = void 0;
 (function (ClientLayoutItemRelationDisplayType) {
     ClientLayoutItemRelationDisplayType["SEARCH"] = "SEARCH";
     ClientLayoutItemRelationDisplayType["DROPDOWN"] = "DROPDOWN";
+    ClientLayoutItemRelationDisplayType["CHECKBOX"] = "CHECKBOX";
 })(exports.ClientLayoutItemRelationDisplayType || (exports.ClientLayoutItemRelationDisplayType = {}));
+exports.ClientLayoutItemRelationEditBehavior = void 0;
+(function (ClientLayoutItemRelationEditBehavior) {
+    ClientLayoutItemRelationEditBehavior["SEARCH"] = "SEARCH";
+    ClientLayoutItemRelationEditBehavior["DROPDOWN"] = "DROPDOWN";
+    ClientLayoutItemRelationEditBehavior["CHECKBOX"] = "CHECKBOX";
+})(exports.ClientLayoutItemRelationEditBehavior || (exports.ClientLayoutItemRelationEditBehavior = {}));

package/dist/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-OvnIRO4Y.js');
+var index = require('./index-BPj2cBXs.js');
 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"],"loadedPages":[32],"requestedPages":[32],"renderStart":[32],"renderEnd":[32],"colWidths":[32],"sortField":[32],"sortDir":[32],"init":[64],"setPage":[64]}]]],["mrd-boolean-field_16.cjs",[[2,"mrd-form",{"layout":[16],"locale":[1],"values":[16],"formValues":[32],"errors":[32],"submitted":[32],"setFieldValue":[64]}],[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]}],[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],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"fileName":[32],"isDragging":[32],"error":[32]}],[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],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"previewUrl":[32],"fileName":[32],"isDragging":[32],"error":[32]}],[2,"mrd-list-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"multiple":[4],"locale":[1],"listValues":[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"],"displayType":[1,"display-type"],"multiple":[4],"dropdownValues":[16],"value":[1],"searchQuery":[32],"searchResults":[32],"isLoading":[32],"selectedItems":[32],"showResults":[32],"error":[32],"highlightedIndex":[32],"setSearchResults":[64],"setLoading":[64]}],[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"],"loadedPages":[32],"requestedPages":[32],"renderStart":[32],"renderEnd":[32],"colWidths":[32],"sortField":[32],"sortDir":[32],"init":[64],"setPage":[64]}]]],["mrd-boolean-field_16.cjs",[[2,"mrd-form",{"layout":[16],"locale":[1],"values":[16],"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]}],[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],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"fileName":[32],"isDragging":[32],"error":[32]}],[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],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"previewUrl":[32],"fileName":[32],"isDragging":[32],"error":[32]}],[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"],"displayType":[1,"display-type"],"multiple":[4],"dropdownValues":[16],"value":[1],"searchQuery":[32],"searchResults":[32],"isLoading":[32],"selectedItems":[32],"showResults":[32],"error":[32],"highlightedIndex":[32],"setSearchResults":[64],"setLoading":[64]}],[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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-OvnIRO4Y.js');
+var index = require('./index-BPj2cBXs.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -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"],"loadedPages":[32],"requestedPages":[32],"renderStart":[32],"renderEnd":[32],"colWidths":[32],"sortField":[32],"sortDir":[32],"init":[64],"setPage":[64]}]]],["mrd-boolean-field_16.cjs",[[2,"mrd-form",{"layout":[16],"locale":[1],"values":[16],"formValues":[32],"errors":[32],"submitted":[32],"setFieldValue":[64]}],[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]}],[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],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"fileName":[32],"isDragging":[32],"error":[32]}],[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],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"previewUrl":[32],"fileName":[32],"isDragging":[32],"error":[32]}],[2,"mrd-list-field",{"name":[1],"label":[1],"value":[1],"required":[4],"disabled":[4],"multiple":[4],"locale":[1],"listValues":[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"],"displayType":[1,"display-type"],"multiple":[4],"dropdownValues":[16],"value":[1],"searchQuery":[32],"searchResults":[32],"isLoading":[32],"selectedItems":[32],"showResults":[32],"error":[32],"highlightedIndex":[32],"setSearchResults":[64],"setLoading":[64]}],[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"],"loadedPages":[32],"requestedPages":[32],"renderStart":[32],"renderEnd":[32],"colWidths":[32],"sortField":[32],"sortDir":[32],"init":[64],"setPage":[64]}]]],["mrd-boolean-field_16.cjs",[[2,"mrd-form",{"layout":[16],"locale":[1],"values":[16],"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]}],[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],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"fileName":[32],"isDragging":[32],"error":[32]}],[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],"required":[4],"disabled":[4],"locale":[1],"accept":[1],"maxSize":[2,"max-size"],"previewUrl":[32],"fileName":[32],"isDragging":[32],"error":[32]}],[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"],"displayType":[1,"display-type"],"multiple":[4],"dropdownValues":[16],"value":[1],"searchQuery":[32],"searchResults":[32],"isLoading":[32],"selectedItems":[32],"showResults":[32],"error":[32],"highlightedIndex":[32],"setSearchResults":[64],"setLoading":[64]}],[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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-OvnIRO4Y.js');
+var index = require('./index-BPj2cBXs.js');
 var index$1 = require('./index.cjs.js');
 var format = require('./format-CDw-zie_.js');
 
@@ -394,7 +394,7 @@ const MrdField = class {
             case index$1.ClientLayoutItemFieldDataType.HYPERLINK:
                 return (index.h(index.Host, null, index.h("mrd-hyperlink-field", Object.assign({}, commonProps, { value: (_w = value) !== null && _w !== void 0 ? _w : '', placeholder: (_x = field.placeholder) !== null && _x !== void 0 ? _x : '' }))));
             case index$1.ClientLayoutItemFieldDataType.LIST:
-                return (index.h(index.Host, null, index.h("mrd-list-field", Object.assign({}, commonProps, { value: (_y = value) !== null && _y !== void 0 ? _y : '', multiple: (_z = field.multiple) !== null && _z !== void 0 ? _z : false, listValues: (_0 = field.listValues) !== null && _0 !== void 0 ? _0 : [] }))));
+                return (index.h(index.Host, null, index.h("mrd-list-field", Object.assign({}, commonProps, { value: (_y = value) !== null && _y !== void 0 ? _y : '', multiple: (_z = field.multiple) !== null && _z !== void 0 ? _z : false, listItems: (_0 = field.listItems) !== null && _0 !== void 0 ? _0 : [] }))));
             case index$1.ClientLayoutItemFieldDataType.FILE:
                 return (index.h(index.Host, null, index.h("mrd-file-field", Object.assign({}, commonProps, { accept: (_1 = field.accept) !== null && _1 !== void 0 ? _1 : '', maxSize: (_2 = field.maxSize) !== null && _2 !== void 0 ? _2 : 0 }))));
             case index$1.ClientLayoutItemFieldDataType.IMAGE:
@@ -511,6 +511,13 @@ const MrdForm = class {
         var _a;
         this.formValues = Object.assign({}, ((_a = this.values) !== null && _a !== void 0 ? _a : {}));
     }
+    /** Sync formValues when the values prop is set from outside after mount
+     *  (e.g. when pre-filling an existing record in edit mode). */
+    valuesChanged(newValues) {
+        this.formValues = Object.assign({}, (newValues !== null && newValues !== void 0 ? newValues : {}));
+        this.errors = {};
+        this.submitted = false;
+    }
     async setFieldValue(name, value) {
         this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: value });
         if (this.errors[name]) {
@@ -565,6 +572,11 @@ const MrdForm = class {
         const dir = this.locale.startsWith('ar') ? 'rtl' : 'ltr';
         return (index.h(index.Host, null, index.h("form", { class: "mrd-form", dir: dir, onSubmit: this.handleSubmit, noValidate: true }, this.layout.title && index.h("h2", { class: "mrd-form__title" }, this.layout.title), index.h("div", { class: "mrd-form__body" }, this.renderItems(this.layout.items)), index.h("div", { class: "mrd-form__footer" }, index.h("button", { type: "submit", class: "mrd-form__submit" }, t('submit', this.locale))))));
     }
+    static get watchers() { return {
+        "values": [{
+                "valuesChanged": 0
+            }]
+    }; }
 };
 MrdForm.style = mrdFormScss();
 
@@ -707,7 +719,8 @@ const MrdListField = class {
         this.disabled = false;
         this.multiple = false;
         this.locale = navigator.language;
-        this.listValues = [];
+        /** List items from the API. Each item has a `key` (stored value) and `label`. */
+        this.listItems = [];
         this.error = '';
         this.selected = [];
         this.handleSelectChange = (e) => {
@@ -738,12 +751,12 @@ const MrdListField = class {
             const val = this.multiple ? this.selected : this.value;
             this.mrdBlur.emit({ name: this.name, value: val });
         };
-        this.toggleCheckbox = (val) => {
-            if (this.selected.includes(val)) {
-                this.selected = this.selected.filter(v => v !== val);
+        this.toggleCheckbox = (key) => {
+            if (this.selected.includes(key)) {
+                this.selected = this.selected.filter(v => v !== key);
             }
             else {
-                this.selected = [...this.selected, val];
+                this.selected = [...this.selected, key];
             }
             if (this.required && !validateRequired(this.selected)) {
                 this.error = t('required', this.locale);
@@ -774,15 +787,16 @@ const MrdListField = class {
         const hasError = !!this.error;
         const currentValue = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
         if (this.multiple) {
-            // Render checkbox list for multi-select
-            return (index.h(index.Host, null, index.h("div", { class: "mrd-list-field" }, this.label && (index.h("label", { class: `mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}` }, this.label)), index.h("div", { class: `mrd-list-field__checkbox-list${hasError ? ' mrd-list-field__checkbox-list--error' : ''}` }, this.listValues.map(lv => (index.h("label", { key: lv.value, class: "mrd-list-field__checkbox-item" }, index.h("input", { type: "checkbox", checked: this.selected.includes(lv.value), disabled: this.disabled, onChange: () => this.toggleCheckbox(lv.value) }), lv.color && (index.h("span", { class: "mrd-list-field__color-dot", style: { backgroundColor: lv.color } })), index.h("span", null, lv.label))))), hasError && index.h("span", { class: "mrd-list-field__error" }, this.error))));
+            return (index.h(index.Host, null, index.h("div", { class: "mrd-list-field" }, this.label && (index.h("label", { class: `mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}` }, this.label)), index.h("div", { class: `mrd-list-field__checkbox-list${hasError ? ' mrd-list-field__checkbox-list--error' : ''}` }, this.listItems.map(lv => {
+                var _a, _b;
+                return (index.h("label", { key: lv.key, class: "mrd-list-field__checkbox-item" }, index.h("input", { type: "checkbox", checked: this.selected.includes(lv.key), disabled: this.disabled, onChange: () => this.toggleCheckbox(lv.key) }), (lv.color || lv.backgroundColor) && (index.h("span", { class: "mrd-list-field__color-dot", style: { backgroundColor: (_b = (_a = lv.backgroundColor) !== null && _a !== void 0 ? _a : lv.color) !== null && _b !== void 0 ? _b : '' } })), index.h("span", null, lv.label)));
+            })), hasError && index.h("span", { class: "mrd-list-field__error" }, this.error))));
         }
-        // Single select dropdown
-        return (index.h(index.Host, null, index.h("div", { class: "mrd-list-field" }, this.label && (index.h("label", { class: `mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}` }, this.label)), index.h("select", { class: `mrd-list-field__select${hasError ? ' mrd-list-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleSelectChange, onBlur: this.handleBlur }, index.h("option", { value: "" }, t('select_placeholder', this.locale)), this.listValues.map(lv => {
-            const style = lv.color
-                ? { backgroundColor: lv.color, color: this.getContrastColor(lv.color) }
-                : {};
-            return (index.h("option", { key: lv.value, value: lv.value, selected: lv.value === currentValue, style: style }, lv.label));
+        return (index.h(index.Host, null, index.h("div", { class: "mrd-list-field" }, this.label && (index.h("label", { class: `mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}` }, this.label)), index.h("select", { class: `mrd-list-field__select${hasError ? ' mrd-list-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleSelectChange, onBlur: this.handleBlur }, index.h("option", { value: "" }, t('select_placeholder', this.locale)), this.listItems.map(lv => {
+            var _a, _b;
+            const bg = (_b = (_a = lv.backgroundColor) !== null && _a !== void 0 ? _a : lv.color) !== null && _b !== void 0 ? _b : null;
+            const style = bg ? { backgroundColor: bg, color: this.getContrastColor(bg) } : {};
+            return (index.h("option", { key: lv.key, value: lv.key, selected: lv.key === currentValue, style: style }, lv.label));
         })), hasError && index.h("span", { class: "mrd-list-field__error" }, this.error))));
     }
 };
@@ -881,6 +895,7 @@ const MrdRelationField = class {
         this.displayType = index$1.ClientLayoutItemRelationDisplayType.SEARCH;
         this.multiple = false;
         this.dropdownValues = [];
+        /** Plain href string/array for normal use; pass { id, label } objects to pre-fill a loaded record. */
         this.value = null;
         this.searchQuery = '';
         this.searchResults = [];
@@ -1001,12 +1016,29 @@ const MrdRelationField = class {
     async setLoading(loading) {
         this.isLoading = loading;
     }
+    componentWillLoad() {
+        var _a;
+        // Pre-fill selectedItems when value is passed as { id, label } objects
+        // (e.g. when editing an existing record fetched from the API).
+        if (!this.value)
+            return;
+        if (Array.isArray(this.value)) {
+            if (this.value.length > 0 && typeof this.value[0] === 'object') {
+                this.selectedItems = this.value;
+                this.searchQuery = '';
+            }
+        }
+        else if (typeof this.value === 'object') {
+            this.selectedItems = [this.value];
+            this.searchQuery = (_a = this.value.label) !== null && _a !== void 0 ? _a : '';
+        }
+    }
     render() {
         var _a, _b;
         const hasError = !!this.error;
         if (this.displayType === index$1.ClientLayoutItemRelationDisplayType.DROPDOWN) {
             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: "" }, t('select_placeholder', this.locale)), this.dropdownValues.map(dv => (index.h("option", { key: dv.value, value: dv.value, selected: dv.value === currentValue }, dv.label)))), hasError && index.h("span", { class: "mrd-relation-field__error" }, this.error))));
+            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: "" }, 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
         const labelEl = this.label && (index.h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label));

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

@@ -1,30 +1,35 @@
 'use strict';
 
-var index = require('./index-OvnIRO4Y.js');
+var index$1 = require('./index-BPj2cBXs.js');
 var format = require('./format-CDw-zie_.js');
+var index = require('./index.cjs.js');
 
 class CellRenderer {
     static render(column, row, locale) {
-        var _a, _b;
-        if (column.type === 'RELATION') {
-            const link = (_a = row === null || row === void 0 ? void 0 : row._links) === null || _a === void 0 ? void 0 : _a[column.name];
+        var _a, _b, _c, _d;
+        if (column.type === index.ClientLayoutItemType.RELATION) {
+            const name = (_b = (_a = column.relation) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '';
+            const link = (_c = row === null || row === void 0 ? void 0 : row._links) === null || _c === void 0 ? void 0 : _c[name];
             if (!link)
                 return '';
             if (Array.isArray(link))
                 return link.map((l) => { var _a; return (_a = l.name) !== null && _a !== void 0 ? _a : ''; }).filter(Boolean).join(', ');
-            return (_b = link.name) !== null && _b !== void 0 ? _b : '';
+            return (_d = link.name) !== null && _d !== void 0 ? _d : '';
         }
-        const raw = row === null || row === void 0 ? void 0 : row[column.name];
+        if (column.type !== index.ClientLayoutItemType.FIELD || !column.field)
+            return '';
+        const { name, dataType, listItems } = column.field;
+        const raw = row === null || row === void 0 ? void 0 : row[name];
         if (raw == null || raw === '')
             return '';
         const values = Array.isArray(raw) ? raw : [raw];
         return values
-            .map(v => { var _a; return CellRenderer.renderValue((_a = column.dataType) !== null && _a !== void 0 ? _a : 'TEXT', v, column, locale); })
+            .map(v => CellRenderer.renderValue(dataType !== null && dataType !== void 0 ? dataType : 'TEXT', v, listItems !== null && listItems !== void 0 ? listItems : [], locale))
             .filter(s => s !== '')
             .join(', ');
     }
-    static renderValue(dataType, value, column, locale) {
-        var _a, _b;
+    static renderValue(dataType, value, listItems, locale) {
+        var _a;
         switch (dataType) {
             case 'INTEGER':
                 return format.formatNumber(Number(value), locale, { maximumFractionDigits: 0 });
@@ -49,8 +54,8 @@ class CellRenderer {
             case 'BOOLEAN':
                 return value ? '✓' : '';
             case 'LIST': {
-                const item = (_a = column.listItems) === null || _a === void 0 ? void 0 : _a.find(li => li.key === String(value));
-                return (_b = item === null || item === void 0 ? void 0 : item.label) !== null && _b !== void 0 ? _b : String(value);
+                const item = listItems.find(li => li.key === String(value));
+                return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : String(value);
             }
             case 'TEXTBLOCK':
                 return String(value).replace(/<[^>]*>/g, '').trim();
@@ -60,7 +65,7 @@ class CellRenderer {
     }
 }
 
-const mrdTableScss = () => `.sc-mrd-table-h{display:block;width:100%}.mrd-table__scroll.sc-mrd-table{overflow-y:auto;overflow-x:auto;border:1px solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);overflow-anchor:none}.mrd-table.sc-mrd-table{overflow-x:auto}.mrd-table__table.sc-mrd-table{width:auto;min-width:100%;border-collapse:collapse;font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-900)}.mrd-table__scroll.sc-mrd-table .mrd-table__table.sc-mrd-table{min-width:max-content}.mrd-table__header.sc-mrd-table{position:sticky;top:0;z-index:1;background:var(--mrd-color-white);text-align:left;padding:var(--mrd-space-2) var(--mrd-space-4);border-bottom:2px solid var(--mrd-border-color);color:var(--mrd-color-neutral-600);font-weight:var(--mrd-font-weight-medium);white-space:nowrap;font-size:var(--mrd-font-size-xs);text-transform:uppercase;letter-spacing:0.04em}.mrd-table__header--sortable.sc-mrd-table{cursor:pointer;user-select:none}.mrd-table__header--sortable.sc-mrd-table:hover{background:var(--mrd-color-neutral-50);color:var(--mrd-color-neutral-800)}.mrd-table__header--sorted-asc.sc-mrd-table,.mrd-table__header--sorted-desc.sc-mrd-table{color:var(--mrd-color-primary);border-bottom-color:var(--mrd-color-primary)}.mrd-table__header-label.sc-mrd-table{margin-right:var(--mrd-space-1)}.mrd-table__sort-icon.sc-mrd-table{font-size:0.65rem;opacity:0.4;vertical-align:middle}.mrd-table__header--sorted-asc.sc-mrd-table .mrd-table__sort-icon.sc-mrd-table,.mrd-table__header--sorted-desc.sc-mrd-table .mrd-table__sort-icon.sc-mrd-table{opacity:1;color:var(--mrd-color-primary)}.mrd-table__row.sc-mrd-table{border-bottom:1px solid var(--mrd-border-color)}.mrd-table__row.sc-mrd-table:hover{background:var(--mrd-color-neutral-200) !important}.mrd-table__spacer.sc-mrd-table{border:none}.mrd-table__spacer.sc-mrd-table td.sc-mrd-table{padding:0;border:none}.mrd-table__cell.sc-mrd-table{padding:var(--mrd-space-2) var(--mrd-space-4);vertical-align:top;white-space:nowrap}.mrd-table__cell--numeric.sc-mrd-table{text-align:right;font-variant-numeric:tabular-nums}.mrd-table__row--loading.sc-mrd-table{background:transparent}.mrd-table__cell--placeholder.sc-mrd-table{padding:var(--mrd-space-2) var(--mrd-space-4);border-bottom:1px solid var(--mrd-border-color)}.mrd-table__placeholder-bar.sc-mrd-table{display:block;height:0.75rem;width:55%;border-radius:var(--mrd-border-radius-sm);background:linear-gradient(     90deg,     var(--mrd-color-neutral-200) 25%,     var(--mrd-color-neutral-100) 50%,     var(--mrd-color-neutral-200) 75%   );background-size:200% 100%;animation:mrd-shimmer 1.4s ease infinite}@keyframes mrd-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.mrd-table__empty.sc-mrd-table{padding:var(--mrd-space-4) var(--mrd-space-3);color:var(--mrd-color-neutral-500);font-size:var(--mrd-font-size-sm);text-align:center;margin:0}`;
+const mrdTableScss = () => `.sc-mrd-table-h{display:block;width:100%}.mrd-table__scroll.sc-mrd-table{overflow-y:auto;overflow-x:auto;border:1px solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);overflow-anchor:none}.mrd-table.sc-mrd-table{overflow-x:auto}.mrd-table__table.sc-mrd-table{width:auto;min-width:100%;border-collapse:collapse;font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-900)}.mrd-table__scroll.sc-mrd-table .mrd-table__table.sc-mrd-table{min-width:max-content}.mrd-table__header.sc-mrd-table{position:sticky;top:0;z-index:1;background:var(--mrd-color-white);text-align:left;padding:var(--mrd-space-2) var(--mrd-space-4);border-bottom:2px solid var(--mrd-border-color);color:var(--mrd-color-neutral-600);font-weight:var(--mrd-font-weight-medium);white-space:nowrap;font-size:var(--mrd-font-size-xs);text-transform:uppercase;letter-spacing:0.04em}.mrd-table__header--sortable.sc-mrd-table{cursor:pointer;user-select:none}.mrd-table__header--sortable.sc-mrd-table:hover{background:var(--mrd-color-neutral-50);color:var(--mrd-color-neutral-800)}.mrd-table__header--sorted-asc.sc-mrd-table,.mrd-table__header--sorted-desc.sc-mrd-table{color:var(--mrd-color-primary);border-bottom-color:var(--mrd-color-primary)}.mrd-table__header-label.sc-mrd-table{margin-right:var(--mrd-space-1)}.mrd-table__sort-icon.sc-mrd-table{font-size:0.65rem;opacity:0.4;vertical-align:middle}.mrd-table__header--sorted-asc.sc-mrd-table .mrd-table__sort-icon.sc-mrd-table,.mrd-table__header--sorted-desc.sc-mrd-table .mrd-table__sort-icon.sc-mrd-table{opacity:1;color:var(--mrd-color-primary)}.mrd-table__row.sc-mrd-table{border-bottom:1px solid var(--mrd-border-color)}.mrd-table__row.sc-mrd-table:hover{background:var(--mrd-color-neutral-200) !important}.mrd-table__row--clickable.sc-mrd-table{cursor:pointer}.mrd-table__spacer.sc-mrd-table{border:none}.mrd-table__spacer.sc-mrd-table td.sc-mrd-table{padding:0;border:none}.mrd-table__cell.sc-mrd-table{padding:var(--mrd-space-2) var(--mrd-space-4);vertical-align:top;white-space:nowrap}.mrd-table__cell--numeric.sc-mrd-table{text-align:right;font-variant-numeric:tabular-nums}.mrd-table__row--loading.sc-mrd-table{background:transparent}.mrd-table__cell--placeholder.sc-mrd-table{padding:var(--mrd-space-2) var(--mrd-space-4);border-bottom:1px solid var(--mrd-border-color)}.mrd-table__placeholder-bar.sc-mrd-table{display:block;height:0.75rem;width:55%;border-radius:var(--mrd-border-radius-sm);background:linear-gradient(     90deg,     var(--mrd-color-neutral-200) 25%,     var(--mrd-color-neutral-100) 50%,     var(--mrd-color-neutral-200) 75%   );background-size:200% 100%;animation:mrd-shimmer 1.4s ease infinite}@keyframes mrd-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.mrd-table__empty.sc-mrd-table{padding:var(--mrd-space-4) var(--mrd-space-3);color:var(--mrd-color-neutral-500);font-size:var(--mrd-font-size-sm);text-align:center;margin:0}`;
 
 const BUFFER = 10;
 /** Wacht deze tijd (ms) na het laatste scroll-event voordat pagina's worden
@@ -68,8 +73,9 @@ const BUFFER = 10;
 const REQUEST_DEBOUNCE_MS = 150;
 const MrdTable = class {
     constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.mrdLoadPage = index.createEvent(this, "mrdLoadPage");
+        index$1.registerInstance(this, hostRef);
+        this.mrdLoadPage = index$1.createEvent(this, "mrdLoadPage");
+        this.mrdRowClick = index$1.createEvent(this, "mrdRowClick");
         // ── Debounce internals (geen @State — triggert geen re-render) ─────────────
         /** Pagina's die wachten op debounce-flush. */
         this.pendingPages = new Set();
@@ -171,12 +177,17 @@ const MrdTable = class {
         return this.sortDir === 'desc' ? `${this.sortField},desc` : this.sortField;
     }
     /** Called when a header cell is clicked. Toggles direction or sets a new column. */
+    colName(col) {
+        var _a, _b, _c, _d;
+        return (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : '';
+    }
     handleSortClick(col) {
-        if (this.sortField === col.name) {
+        const name = this.colName(col);
+        if (this.sortField === name) {
             this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
         }
         else {
-            this.sortField = col.name;
+            this.sortField = name;
             this.sortDir = 'asc';
         }
         // Cancel any pending scroll debounce.
@@ -279,12 +290,15 @@ const MrdTable = class {
         const numericTypes = new Set(['INTEGER', 'DECIMAL', 'PERCENTAGE', 'CURRENCY']);
         // ── Non-paginated mode ──────────────────────────────────────────────────
         if (this.totalElements === 0) {
-            return (index.h(index.Host, null, index.h("div", { class: "mrd-table" }, index.h("table", { class: "mrd-table__table" }, index.h("thead", null, index.h("tr", null, this.columns.map(col => (index.h("th", { class: "mrd-table__header" }, col.label))))), index.h("tbody", null, (_b = this.rows) === null || _b === void 0 ? void 0 : _b.map((row, i) => (index.h("tr", { class: "mrd-table__row", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' } }, this.columns.map(col => {
-                var _a;
+            return (index$1.h(index$1.Host, null, index$1.h("div", { class: "mrd-table" }, index$1.h("table", { class: "mrd-table__table" }, index$1.h("thead", null, index$1.h("tr", null, this.columns.map(col => {
+                var _a, _b, _c, _d;
+                return (index$1.h("th", { class: "mrd-table__header" }, (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ''));
+            }))), index$1.h("tbody", null, (_b = this.rows) === null || _b === void 0 ? void 0 : _b.map((row, i) => (index$1.h("tr", { class: "mrd-table__row mrd-table__row--clickable", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' }, onClick: () => this.mrdRowClick.emit(row) }, this.columns.map(col => {
+                var _a, _b;
                 const value = CellRenderer.render(col, row, this.locale);
-                const isNumeric = col.type === 'FIELD' && numericTypes.has((_a = col.dataType) !== null && _a !== void 0 ? _a : '');
-                return (index.h("td", { class: `mrd-table__cell${isNumeric ? ' mrd-table__cell--numeric' : ''}` }, value));
-            })))))), (!this.rows || this.rows.length === 0) && (index.h("p", { class: "mrd-table__empty" }, "Geen resultaten gevonden.")))));
+                const isNumeric = col.type === 'FIELD' && numericTypes.has((_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.dataType) !== null && _b !== void 0 ? _b : '');
+                return (index$1.h("td", { class: `mrd-table__cell${isNumeric ? ' mrd-table__cell--numeric' : ''}` }, value));
+            })))))), (!this.rows || this.rows.length === 0) && (index$1.h("p", { class: "mrd-table__empty" }, "Geen resultaten gevonden.")))));
         }
         // ── Paginated / virtual-scroll mode ────────────────────────────────────
         const total = this.totalElements;
@@ -295,27 +309,28 @@ const MrdTable = class {
         for (let i = this.renderStart; i <= this.renderEnd; i++) {
             const row = this.getRow(i);
             if (row === null) {
-                renderedRows.push(index.h("tr", { class: "mrd-table__row mrd-table__row--loading" }, index.h("td", { class: "mrd-table__cell--placeholder", colSpan: colCount }, index.h("span", { class: "mrd-table__placeholder-bar" }))));
+                renderedRows.push(index$1.h("tr", { class: "mrd-table__row mrd-table__row--loading" }, index$1.h("td", { class: "mrd-table__cell--placeholder", colSpan: colCount }, index$1.h("span", { class: "mrd-table__placeholder-bar" }))));
             }
             else {
-                renderedRows.push(index.h("tr", { class: "mrd-table__row", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' } }, this.columns.map(col => {
-                    var _a;
+                renderedRows.push(index$1.h("tr", { class: "mrd-table__row mrd-table__row--clickable", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' }, onClick: () => this.mrdRowClick.emit(row) }, this.columns.map(col => {
+                    var _a, _b;
                     const value = CellRenderer.render(col, row, this.locale);
-                    const isNumeric = col.type === 'FIELD' && numericTypes.has((_a = col.dataType) !== null && _a !== void 0 ? _a : '');
-                    return (index.h("td", { class: `mrd-table__cell${isNumeric ? ' mrd-table__cell--numeric' : ''}` }, value));
+                    const isNumeric = col.type === 'FIELD' && numericTypes.has((_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.dataType) !== null && _b !== void 0 ? _b : '');
+                    return (index$1.h("td", { class: `mrd-table__cell${isNumeric ? ' mrd-table__cell--numeric' : ''}` }, value));
                 })));
             }
         }
         const tableStyle = this.colWidths.length > 0
             ? { tableLayout: 'fixed' }
             : undefined;
-        return (index.h(index.Host, null, index.h("div", { class: "mrd-table__scroll", style: { height: `${this.tableHeight}px` }, onScroll: this.handleScroll }, index.h("table", { class: "mrd-table__table", style: tableStyle }, index.h("thead", null, index.h("tr", null, this.columns.map((col, idx) => {
-            const isActive = this.sortField === col.name;
+        return (index$1.h(index$1.Host, null, index$1.h("div", { class: "mrd-table__scroll", style: { height: `${this.tableHeight}px` }, onScroll: this.handleScroll }, index$1.h("table", { class: "mrd-table__table", style: tableStyle }, index$1.h("thead", null, index$1.h("tr", null, this.columns.map((col, idx) => {
+            var _a, _b, _c, _d;
+            const isActive = this.sortField === this.colName(col);
             const cls = `mrd-table__header mrd-table__header--sortable${isActive ? ` mrd-table__header--sorted-${this.sortDir}` : ''}`;
-            return (index.h("th", { class: cls, style: this.colWidths[idx] ? { width: `${this.colWidths[idx]}px` } : undefined, onClick: () => this.handleSortClick(col) }, index.h("span", { class: "mrd-table__header-label" }, col.label), index.h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, isActive ? (this.sortDir === 'asc' ? '▲' : '▼') : '⇅')));
-        }))), index.h("tbody", null, topSpacerHeight > 0 && (index.h("tr", { class: "mrd-table__spacer", style: { height: `${topSpacerHeight}px` } }, index.h("td", { colSpan: colCount }))), renderedRows, bottomSpacerHeight > 0 && (index.h("tr", { class: "mrd-table__spacer", style: { height: `${bottomSpacerHeight}px` } }, index.h("td", { colSpan: colCount })))))), total === 0 && (index.h("p", { class: "mrd-table__empty" }, "Geen resultaten gevonden."))));
+            return (index$1.h("th", { class: cls, style: this.colWidths[idx] ? { width: `${this.colWidths[idx]}px` } : undefined, onClick: () => this.handleSortClick(col) }, index$1.h("span", { class: "mrd-table__header-label" }, (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ''), index$1.h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, isActive ? (this.sortDir === 'asc' ? '▲' : '▼') : '⇅')));
+        }))), index$1.h("tbody", null, topSpacerHeight > 0 && (index$1.h("tr", { class: "mrd-table__spacer", style: { height: `${topSpacerHeight}px` } }, index$1.h("td", { colSpan: colCount }))), renderedRows, bottomSpacerHeight > 0 && (index$1.h("tr", { class: "mrd-table__spacer", style: { height: `${bottomSpacerHeight}px` } }, index$1.h("td", { colSpan: colCount })))))), total === 0 && (index$1.h("p", { class: "mrd-table__empty" }, "Geen resultaten gevonden."))));
     }
-    get el() { return index.getElement(this); }
+    get el() { return index$1.getElement(this); }
 };
 MrdTable.style = mrdTableScss();
 

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

@@ -60,7 +60,7 @@ export class MrdField {
             case ClientLayoutItemFieldDataType.HYPERLINK:
                 return (h(Host, null, h("mrd-hyperlink-field", Object.assign({}, commonProps, { value: (_w = value) !== null && _w !== void 0 ? _w : '', placeholder: (_x = field.placeholder) !== null && _x !== void 0 ? _x : '' }))));
             case ClientLayoutItemFieldDataType.LIST:
-                return (h(Host, null, h("mrd-list-field", Object.assign({}, commonProps, { value: (_y = value) !== null && _y !== void 0 ? _y : '', multiple: (_z = field.multiple) !== null && _z !== void 0 ? _z : false, listValues: (_0 = field.listValues) !== null && _0 !== void 0 ? _0 : [] }))));
+                return (h(Host, null, h("mrd-list-field", Object.assign({}, commonProps, { value: (_y = value) !== null && _y !== void 0 ? _y : '', multiple: (_z = field.multiple) !== null && _z !== void 0 ? _z : false, listItems: (_0 = field.listItems) !== null && _0 !== void 0 ? _0 : [] }))));
             case ClientLayoutItemFieldDataType.FILE:
                 return (h(Host, null, h("mrd-file-field", Object.assign({}, commonProps, { accept: (_1 = field.accept) !== null && _1 !== void 0 ? _1 : '', maxSize: (_2 = field.maxSize) !== null && _2 !== void 0 ? _2 : 0 }))));
             case ClientLayoutItemFieldDataType.IMAGE:

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

@@ -31,6 +31,13 @@ export class MrdForm {
         var _a;
         this.formValues = Object.assign({}, ((_a = this.values) !== null && _a !== void 0 ? _a : {}));
     }
+    /** Sync formValues when the values prop is set from outside after mount
+     *  (e.g. when pre-filling an existing record in edit mode). */
+    valuesChanged(newValues) {
+        this.formValues = Object.assign({}, (newValues !== null && newValues !== void 0 ? newValues : {}));
+        this.errors = {};
+        this.submitted = false;
+    }
     async setFieldValue(name, value) {
         this.formValues = Object.assign(Object.assign({}, this.formValues), { [name]: value });
         if (this.errors[name]) {
@@ -242,4 +249,10 @@ export class MrdForm {
             }
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "values",
+                "methodName": "valuesChanged"
+            }];
+    }
 }