@mmlogic/components 0.1.1 → 0.1.2

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

@@ -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"],"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],"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

@@ -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]},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],"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

@@ -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:
@@ -719,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) => {
@@ -750,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);
@@ -786,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))));
     }
 };
@@ -1036,7 +1038,7 @@ const MrdRelationField = class {
         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-BPj2cBXs.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();
@@ -68,9 +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");
-        this.mrdRowClick = index.createEvent(this, "mrdRowClick");
+        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();
@@ -172,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.
@@ -280,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 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;
+            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;
@@ -296,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 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;
+                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-list-field/mrd-list-field.js

@@ -10,7 +10,8 @@ export class MrdListField {
         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) => {
@@ -41,12 +42,12 @@ export class MrdListField {
             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);
@@ -77,15 +78,16 @@ export class MrdListField {
         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 (h(Host, null, h("div", { class: "mrd-list-field" }, this.label && (h("label", { class: `mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}` }, this.label)), h("div", { class: `mrd-list-field__checkbox-list${hasError ? ' mrd-list-field__checkbox-list--error' : ''}` }, this.listValues.map(lv => (h("label", { key: lv.value, class: "mrd-list-field__checkbox-item" }, h("input", { type: "checkbox", checked: this.selected.includes(lv.value), disabled: this.disabled, onChange: () => this.toggleCheckbox(lv.value) }), lv.color && (h("span", { class: "mrd-list-field__color-dot", style: { backgroundColor: lv.color } })), h("span", null, lv.label))))), hasError && h("span", { class: "mrd-list-field__error" }, this.error))));
+            return (h(Host, null, h("div", { class: "mrd-list-field" }, this.label && (h("label", { class: `mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}` }, this.label)), h("div", { class: `mrd-list-field__checkbox-list${hasError ? ' mrd-list-field__checkbox-list--error' : ''}` }, this.listItems.map(lv => {
+                var _a, _b;
+                return (h("label", { key: lv.key, class: "mrd-list-field__checkbox-item" }, h("input", { type: "checkbox", checked: this.selected.includes(lv.key), disabled: this.disabled, onChange: () => this.toggleCheckbox(lv.key) }), (lv.color || lv.backgroundColor) && (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 : '' } })), h("span", null, lv.label)));
+            })), hasError && h("span", { class: "mrd-list-field__error" }, this.error))));
         }
-        // Single select dropdown
-        return (h(Host, null, h("div", { class: "mrd-list-field" }, this.label && (h("label", { class: `mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}` }, this.label)), 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 }, 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 (h("option", { key: lv.value, value: lv.value, selected: lv.value === currentValue, style: style }, lv.label));
+        return (h(Host, null, h("div", { class: "mrd-list-field" }, this.label && (h("label", { class: `mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}` }, this.label)), 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 }, 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 (h("option", { key: lv.key, value: lv.key, selected: lv.key === currentValue, style: style }, lv.label));
         })), hasError && h("span", { class: "mrd-list-field__error" }, this.error))));
     }
     static get is() { return "mrd-list-field"; }
@@ -242,7 +244,7 @@ export class MrdListField {
                 "attribute": "locale",
                 "defaultValue": "navigator.language"
             },
-            "listValues": {
+            "listItems": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
@@ -261,7 +263,7 @@ export class MrdListField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "List items from the API. Each item has a `key` (stored value) and `label`."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -156,7 +156,7 @@ export class MrdRelationField {
         const hasError = !!this.error;
         if (this.displayType === 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 (h(Host, null, h("div", { class: "mrd-relation-field" }, this.label && (h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), 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 }, h("option", { value: "" }, t('select_placeholder', this.locale)), this.dropdownValues.map(dv => (h("option", { key: dv.value, value: dv.value, selected: dv.value === currentValue }, dv.label)))), hasError && h("span", { class: "mrd-relation-field__error" }, this.error))));
+            return (h(Host, null, h("div", { class: "mrd-relation-field" }, this.label && (h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), 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 }, h("option", { value: "" }, t('select_placeholder', this.locale)), this.dropdownValues.map(dv => (h("option", { key: dv.key, value: dv.key, selected: dv.key === currentValue }, dv.label)))), hasError && h("span", { class: "mrd-relation-field__error" }, this.error))));
         }
         // SEARCH mode
         const labelEl = this.label && (h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label));
@@ -305,7 +305,7 @@ export class MrdRelationField {
                 "mutable": false,
                 "complexType": {
                     "original": "ClientLayoutItemRelationDisplayType",
-                    "resolved": "ClientLayoutItemRelationDisplayType.DROPDOWN | ClientLayoutItemRelationDisplayType.SEARCH",
+                    "resolved": "ClientLayoutItemRelationDisplayType.CHECKBOX | ClientLayoutItemRelationDisplayType.DROPDOWN | ClientLayoutItemRelationDisplayType.SEARCH",
                     "references": {
                         "ClientLayoutItemRelationDisplayType": {
                             "location": "import",

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

@@ -107,12 +107,17 @@ export class MrdTable {
         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.
@@ -215,10 +220,13 @@ export class MrdTable {
         const numericTypes = new Set(['INTEGER', 'DECIMAL', 'PERCENTAGE', 'CURRENCY']);
         // ── Non-paginated mode ──────────────────────────────────────────────────
         if (this.totalElements === 0) {
-            return (h(Host, null, h("div", { class: "mrd-table" }, h("table", { class: "mrd-table__table" }, h("thead", null, h("tr", null, this.columns.map(col => (h("th", { class: "mrd-table__header" }, col.label))))), h("tbody", null, (_b = this.rows) === null || _b === void 0 ? void 0 : _b.map((row, i) => (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;
+            return (h(Host, null, h("div", { class: "mrd-table" }, h("table", { class: "mrd-table__table" }, h("thead", null, h("tr", null, this.columns.map(col => {
+                var _a, _b, _c, _d;
+                return (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 : ''));
+            }))), h("tbody", null, (_b = this.rows) === null || _b === void 0 ? void 0 : _b.map((row, i) => (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 : '');
+                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 (h("td", { class: `mrd-table__cell${isNumeric ? ' mrd-table__cell--numeric' : ''}` }, value));
             })))))), (!this.rows || this.rows.length === 0) && (h("p", { class: "mrd-table__empty" }, "Geen resultaten gevonden.")))));
         }
@@ -235,9 +243,9 @@ export class MrdTable {
             }
             else {
                 renderedRows.push(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;
+                    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 : '');
+                    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 (h("td", { class: `mrd-table__cell${isNumeric ? ' mrd-table__cell--numeric' : ''}` }, value));
                 })));
             }
@@ -246,9 +254,10 @@ export class MrdTable {
             ? { tableLayout: 'fixed' }
             : undefined;
         return (h(Host, null, h("div", { class: "mrd-table__scroll", style: { height: `${this.tableHeight}px` }, onScroll: this.handleScroll }, h("table", { class: "mrd-table__table", style: tableStyle }, h("thead", null, h("tr", null, this.columns.map((col, idx) => {
-            const isActive = this.sortField === col.name;
+            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 (h("th", { class: cls, style: this.colWidths[idx] ? { width: `${this.colWidths[idx]}px` } : undefined, onClick: () => this.handleSortClick(col) }, h("span", { class: "mrd-table__header-label" }, col.label), h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, isActive ? (this.sortDir === 'asc' ? '▲' : '▼') : '⇅')));
+            return (h("th", { class: cls, style: this.colWidths[idx] ? { width: `${this.colWidths[idx]}px` } : undefined, onClick: () => this.handleSortClick(col) }, 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 : ''), h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, isActive ? (this.sortDir === 'asc' ? '▲' : '▼') : '⇅')));
         }))), h("tbody", null, topSpacerHeight > 0 && (h("tr", { class: "mrd-table__spacer", style: { height: `${topSpacerHeight}px` } }, h("td", { colSpan: colCount }))), renderedRows, bottomSpacerHeight > 0 && (h("tr", { class: "mrd-table__spacer", style: { height: `${bottomSpacerHeight}px` } }, h("td", { colSpan: colCount })))))), total === 0 && (h("p", { class: "mrd-table__empty" }, "Geen resultaten gevonden."))));
     }
     static get is() { return "mrd-table"; }
@@ -270,7 +279,7 @@ export class MrdTable {
                 "mutable": false,
                 "complexType": {
                     "original": "TableColumn[]",
-                    "resolved": "TableColumn[]",
+                    "resolved": "ClientLayoutItem[]",
                     "references": {
                         "TableColumn": {
                             "location": "import",

package/dist/collection/types/client-layout.js

@@ -1,10 +1,33 @@
+// ─── Layout type ──────────────────────────────────────────────────────────────
+export var ClientLayoutType;
+(function (ClientLayoutType) {
+    ClientLayoutType["OBJECT_FORM_DASHBOARD"] = "OBJECT_FORM_DASHBOARD";
+    ClientLayoutType["CLASS_DASHBOARD"] = "CLASS_DASHBOARD";
+    ClientLayoutType["GENERAL_DASHBOARD"] = "GENERAL_DASHBOARD";
+    ClientLayoutType["NAVIGATION_PANE"] = "NAVIGATION_PANE";
+})(ClientLayoutType || (ClientLayoutType = {}));
+// ─── Item types ───────────────────────────────────────────────────────────────
 export var ClientLayoutItemType;
 (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";
 })(ClientLayoutItemType || (ClientLayoutItemType = {}));
+// ─── Field data types ─────────────────────────────────────────────────────────
 export var ClientLayoutItemFieldDataType;
 (function (ClientLayoutItemFieldDataType) {
     ClientLayoutItemFieldDataType["TEXT"] = "TEXT";
@@ -23,8 +46,16 @@ export var ClientLayoutItemFieldDataType;
     ClientLayoutItemFieldDataType["FILE"] = "FILE";
     ClientLayoutItemFieldDataType["IMAGE"] = "IMAGE";
 })(ClientLayoutItemFieldDataType || (ClientLayoutItemFieldDataType = {}));
+// ─── Relation display / edit behaviour ───────────────────────────────────────
 export var ClientLayoutItemRelationDisplayType;
 (function (ClientLayoutItemRelationDisplayType) {
     ClientLayoutItemRelationDisplayType["SEARCH"] = "SEARCH";
     ClientLayoutItemRelationDisplayType["DROPDOWN"] = "DROPDOWN";
+    ClientLayoutItemRelationDisplayType["CHECKBOX"] = "CHECKBOX";
 })(ClientLayoutItemRelationDisplayType || (ClientLayoutItemRelationDisplayType = {}));
+export var ClientLayoutItemRelationEditBehavior;
+(function (ClientLayoutItemRelationEditBehavior) {
+    ClientLayoutItemRelationEditBehavior["SEARCH"] = "SEARCH";
+    ClientLayoutItemRelationEditBehavior["DROPDOWN"] = "DROPDOWN";
+    ClientLayoutItemRelationEditBehavior["CHECKBOX"] = "CHECKBOX";
+})(ClientLayoutItemRelationEditBehavior || (ClientLayoutItemRelationEditBehavior = {}));