@mmlogic/components 0.1.0 → 0.1.2

package/dist/components/mrd-table.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as r,createEvent as e,h as s,Host as a,transformTag as l}from"@stencil/core/internal/client";import{a as i,b as o,c as d,d as n,f as c,e as h}from"./format.js";class m{static render(t,r,e){var s,a;if("RELATION"===t.type){const e=null===(s=null==r?void 0:r._links)||void 0===s?void 0:s[t.name];return e?Array.isArray(e)?e.map((t=>{var r;return null!==(r=t.name)&&void 0!==r?r:""})).filter(Boolean).join(", "):null!==(a=e.name)&&void 0!==a?a:"":""}const l=null==r?void 0:r[t.name];return null==l||""===l?"":(Array.isArray(l)?l:[l]).map((r=>{var s;return m.renderValue(null!==(s=t.dataType)&&void 0!==s?s:"TEXT",r,t,e)})).filter((t=>""!==t)).join(", ")}static renderValue(t,r,e,s){var a,l;switch(t){case"INTEGER":return c(Number(r),s,{maximumFractionDigits:0});case"DECIMAL":return c(Number(r),s);case"PERCENTAGE":return h(Number(r),s);case"CURRENCY":{const{amount:t,currency:e}="object"==typeof r&&null!==r?r:{amount:r,currency:""};return e?n(Number(t),e,s):c(Number(t),s)}case"DATE":return d(r,s);case"DATETIME":return o(r,s);case"TIME":return i(r,s);case"BOOLEAN":return r?"✓":"";case"LIST":{const t=null===(a=e.listItems)||void 0===a?void 0:a.find((t=>t.key===r+""));return null!==(l=null==t?void 0:t.label)&&void 0!==l?l:r+""}case"TEXTBLOCK":return(r+"").replace(/<[^>]*>/g,"").trim();default:return r+""}}}const b=t(class extends r{constructor(t){super(),!1!==t&&this.__registerHost(),this.mrdLoadPage=e(this,"mrdLoadPage",7),this.pendingPages=new Set,this.debounceTimer=null,this.columns=[],this.rows=[],this.locale=navigator.language,this.totalElements=0,this.pageSize=20,this.rowHeight=36,this.tableHeight=500,this.defaultSort="",this.loadedPages=new Map,this.requestedPages=new Set,this.renderStart=0,this.renderEnd=0,this.colWidths=[],this.sortField="",this.sortDir="asc",this.handleScroll=t=>{const r=this.totalElements,e=Math.floor(t.currentTarget.scrollTop/this.rowHeight),s=Math.min(e+this.visibleCount(),r-1);this.renderStart=Math.max(0,e-10),this.renderEnd=Math.min(r-1,s+10),this.requestPagesForWindow(this.renderStart,this.renderEnd)}}async init(){var t;if(null!==this.debounceTimer&&(clearTimeout(this.debounceTimer),this.debounceTimer=null),this.pendingPages.clear(),this.loadedPages=new Map,this.requestedPages=new Set,this.colWidths=[],this.defaultSort){const r=this.defaultSort.split(",");this.sortField=r[0].trim(),this.sortDir="desc"===(null===(t=r[1])||void 0===t?void 0:t.trim())?"desc":"asc"}else this.sortField="",this.sortDir="asc";this.renderStart=0,this.renderEnd=Math.max(0,Math.min(this.visibleCount()+10,this.totalElements-1));const r=this.el.querySelector(".mrd-table__scroll");r&&(r.scrollTop=0)}async setPage(t,r){const e=new Map(this.loadedPages);e.set(t,r),this.loadedPages=e}visibleCount(){return Math.ceil(this.tableHeight/this.rowHeight)}sortParam(){return this.sortField?"desc"===this.sortDir?this.sortField+",desc":this.sortField:""}handleSortClick(t){this.sortField===t.name?this.sortDir="asc"===this.sortDir?"desc":"asc":(this.sortField=t.name,this.sortDir="asc"),null!==this.debounceTimer&&(clearTimeout(this.debounceTimer),this.debounceTimer=null),this.pendingPages.clear(),this.loadedPages=new Map,this.requestedPages=new Set,this.colWidths=[],this.renderStart=0,this.renderEnd=Math.max(0,Math.min(this.visibleCount()+10,this.totalElements-1));const r=this.el.querySelector(".mrd-table__scroll");r&&(r.scrollTop=0),this.emitPagesForWindow(this.renderStart,this.renderEnd)}emitPagesForWindow(t,r){const e=Math.floor(t/this.pageSize),s=Math.floor(r/this.pageSize),a=new Set(this.requestedPages);let l=!1;for(let t=e;t<=s;t++)this.loadedPages.has(t)||a.has(t)||(a.add(t),this.mrdLoadPage.emit({page:t,sort:this.sortParam()}),l=!0);l&&(this.requestedPages=a)}getRow(t){var r;const e=this.loadedPages.get(Math.floor(t/this.pageSize));return null!==(r=null==e?void 0:e[t%this.pageSize])&&void 0!==r?r:null}requestPagesForWindow(t,r){const e=Math.floor(t/this.pageSize),s=Math.floor(r/this.pageSize);let a=!1;for(let t=e;t<=s;t++)this.loadedPages.has(t)||this.requestedPages.has(t)||this.pendingPages.has(t)||(this.pendingPages.add(t),a=!0);a&&(null!==this.debounceTimer&&clearTimeout(this.debounceTimer),this.debounceTimer=setTimeout((()=>this.flushPendingPages()),150))}flushPendingPages(){if(this.debounceTimer=null,0===this.pendingPages.size)return;const t=new Set(this.requestedPages);let r=!1;for(const e of this.pendingPages){if(this.loadedPages.has(e)||t.has(e))continue;const s=e*this.pageSize;s+this.pageSize-1<this.renderStart||s>this.renderEnd||(t.add(e),this.mrdLoadPage.emit({page:e,sort:this.sortParam()}),r=!0)}this.pendingPages.clear(),r&&(this.requestedPages=t)}componentDidRender(){if(0===this.colWidths.length&&this.loadedPages.size>0&&this.totalElements>0){const t=this.el.querySelectorAll(".mrd-table__header");t.length>0&&(this.colWidths=Array.from(t).map((t=>t.offsetWidth)))}}render(){var t,r;if(!(null===(t=this.columns)||void 0===t?void 0:t.length))return null;const e=new Set(["INTEGER","DECIMAL","PERCENTAGE","CURRENCY"]);if(0===this.totalElements)return s(a,null,s("div",{class:"mrd-table"},s("table",{class:"mrd-table__table"},s("thead",null,s("tr",null,this.columns.map((t=>s("th",{class:"mrd-table__header"},t.label))))),s("tbody",null,null===(r=this.rows)||void 0===r?void 0:r.map(((t,r)=>s("tr",{class:"mrd-table__row",style:{background:r%2==0?"":"var(--mrd-color-neutral-100)"}},this.columns.map((r=>{var a;const l=m.render(r,t,this.locale),i="FIELD"===r.type&&e.has(null!==(a=r.dataType)&&void 0!==a?a:"");return s("td",{class:"mrd-table__cell"+(i?" mrd-table__cell--numeric":"")},l)}))))))),(!this.rows||0===this.rows.length)&&s("p",{class:"mrd-table__empty"},"Geen resultaten gevonden.")));const l=this.totalElements,i=this.columns.length,o=this.renderStart*this.rowHeight,d=Math.max(0,(l-1-this.renderEnd)*this.rowHeight),n=[];for(let t=this.renderStart;t<=this.renderEnd;t++){const r=this.getRow(t);n.push(null===r?s("tr",{class:"mrd-table__row mrd-table__row--loading"},s("td",{class:"mrd-table__cell--placeholder",colSpan:i},s("span",{class:"mrd-table__placeholder-bar"}))):s("tr",{class:"mrd-table__row",style:{background:t%2==0?"":"var(--mrd-color-neutral-100)"}},this.columns.map((t=>{var a;const l=m.render(t,r,this.locale),i="FIELD"===t.type&&e.has(null!==(a=t.dataType)&&void 0!==a?a:"");return s("td",{class:"mrd-table__cell"+(i?" mrd-table__cell--numeric":"")},l)}))))}return s(a,null,s("div",{class:"mrd-table__scroll",style:{height:this.tableHeight+"px"},onScroll:this.handleScroll},s("table",{class:"mrd-table__table",style:this.colWidths.length>0?{tableLayout:"fixed"}:void 0},s("thead",null,s("tr",null,this.columns.map(((t,r)=>{const e=this.sortField===t.name;return s("th",{class:"mrd-table__header mrd-table__header--sortable"+(e?" mrd-table__header--sorted-"+this.sortDir:""),style:this.colWidths[r]?{width:this.colWidths[r]+"px"}:void 0,onClick:()=>this.handleSortClick(t)},s("span",{class:"mrd-table__header-label"},t.label),s("span",{class:"mrd-table__sort-icon","aria-hidden":"true"},e?"asc"===this.sortDir?"▲":"▼":"⇅"))})))),s("tbody",null,o>0&&s("tr",{class:"mrd-table__spacer",style:{height:o+"px"}},s("td",{colSpan:i})),n,d>0&&s("tr",{class:"mrd-table__spacer",style:{height:d+"px"}},s("td",{colSpan:i}))))),0===l&&s("p",{class:"mrd-table__empty"},"Geen resultaten gevonden."))}get el(){return this}static get style(){return".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}"}},[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]}]),u=b,_=function(){"undefined"!=typeof customElements&&["mrd-table"].forEach((t=>{"mrd-table"===t&&(customElements.get(l(t))||customElements.define(l(t),b))}))};export{u as MrdTable,_ as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as r,createEvent as e,h as s,Host as l,transformTag as a}from"@stencil/core/internal/client";import{a as i,b as o,c as d,d as n,f as c,e as h}from"./format.js";import{a as m}from"./client-layout.js";class u{static render(t,r,e){var s,l,a,i;if(t.type===m.RELATION){const e=null!==(l=null===(s=t.relation)||void 0===s?void 0:s.name)&&void 0!==l?l:"",o=null===(a=null==r?void 0:r._links)||void 0===a?void 0:a[e];return o?Array.isArray(o)?o.map((t=>{var r;return null!==(r=t.name)&&void 0!==r?r:""})).filter(Boolean).join(", "):null!==(i=o.name)&&void 0!==i?i:"":""}if(t.type!==m.FIELD||!t.field)return"";const{name:o,dataType:d,listItems:n}=t.field,c=null==r?void 0:r[o];return null==c||""===c?"":(Array.isArray(c)?c:[c]).map((t=>u.renderValue(null!=d?d:"TEXT",t,null!=n?n:[],e))).filter((t=>""!==t)).join(", ")}static renderValue(t,r,e,s){var l;switch(t){case"INTEGER":return c(Number(r),s,{maximumFractionDigits:0});case"DECIMAL":return c(Number(r),s);case"PERCENTAGE":return h(Number(r),s);case"CURRENCY":{const{amount:t,currency:e}="object"==typeof r&&null!==r?r:{amount:r,currency:""};return e?n(Number(t),e,s):c(Number(t),s)}case"DATE":return d(r,s);case"DATETIME":return o(r,s);case"TIME":return i(r,s);case"BOOLEAN":return r?"✓":"";case"LIST":{const t=e.find((t=>t.key===r+""));return null!==(l=null==t?void 0:t.label)&&void 0!==l?l:r+""}case"TEXTBLOCK":return(r+"").replace(/<[^>]*>/g,"").trim();default:return r+""}}}const b=t(class extends r{constructor(t){super(),!1!==t&&this.__registerHost(),this.mrdLoadPage=e(this,"mrdLoadPage",7),this.mrdRowClick=e(this,"mrdRowClick",7),this.pendingPages=new Set,this.debounceTimer=null,this.columns=[],this.rows=[],this.locale=navigator.language,this.totalElements=0,this.pageSize=20,this.rowHeight=36,this.tableHeight=500,this.defaultSort="",this.loadedPages=new Map,this.requestedPages=new Set,this.renderStart=0,this.renderEnd=0,this.colWidths=[],this.sortField="",this.sortDir="asc",this.handleScroll=t=>{const r=this.totalElements,e=Math.floor(t.currentTarget.scrollTop/this.rowHeight),s=Math.min(e+this.visibleCount(),r-1);this.renderStart=Math.max(0,e-10),this.renderEnd=Math.min(r-1,s+10),this.requestPagesForWindow(this.renderStart,this.renderEnd)}}async init(){var t;if(null!==this.debounceTimer&&(clearTimeout(this.debounceTimer),this.debounceTimer=null),this.pendingPages.clear(),this.loadedPages=new Map,this.requestedPages=new Set,this.colWidths=[],this.defaultSort){const r=this.defaultSort.split(",");this.sortField=r[0].trim(),this.sortDir="desc"===(null===(t=r[1])||void 0===t?void 0:t.trim())?"desc":"asc"}else this.sortField="",this.sortDir="asc";this.renderStart=0,this.renderEnd=Math.max(0,Math.min(this.visibleCount()+10,this.totalElements-1));const r=this.el.querySelector(".mrd-table__scroll");r&&(r.scrollTop=0)}async setPage(t,r){const e=new Map(this.loadedPages);e.set(t,r),this.loadedPages=e}visibleCount(){return Math.ceil(this.tableHeight/this.rowHeight)}sortParam(){return this.sortField?"desc"===this.sortDir?this.sortField+",desc":this.sortField:""}colName(t){var r,e,s,l;return null!==(l=null!==(e=null===(r=t.field)||void 0===r?void 0:r.name)&&void 0!==e?e:null===(s=t.relation)||void 0===s?void 0:s.name)&&void 0!==l?l:""}handleSortClick(t){const r=this.colName(t);this.sortField===r?this.sortDir="asc"===this.sortDir?"desc":"asc":(this.sortField=r,this.sortDir="asc"),null!==this.debounceTimer&&(clearTimeout(this.debounceTimer),this.debounceTimer=null),this.pendingPages.clear(),this.loadedPages=new Map,this.requestedPages=new Set,this.colWidths=[],this.renderStart=0,this.renderEnd=Math.max(0,Math.min(this.visibleCount()+10,this.totalElements-1));const e=this.el.querySelector(".mrd-table__scroll");e&&(e.scrollTop=0),this.emitPagesForWindow(this.renderStart,this.renderEnd)}emitPagesForWindow(t,r){const e=Math.floor(t/this.pageSize),s=Math.floor(r/this.pageSize),l=new Set(this.requestedPages);let a=!1;for(let t=e;t<=s;t++)this.loadedPages.has(t)||l.has(t)||(l.add(t),this.mrdLoadPage.emit({page:t,sort:this.sortParam()}),a=!0);a&&(this.requestedPages=l)}getRow(t){var r;const e=this.loadedPages.get(Math.floor(t/this.pageSize));return null!==(r=null==e?void 0:e[t%this.pageSize])&&void 0!==r?r:null}requestPagesForWindow(t,r){const e=Math.floor(t/this.pageSize),s=Math.floor(r/this.pageSize);let l=!1;for(let t=e;t<=s;t++)this.loadedPages.has(t)||this.requestedPages.has(t)||this.pendingPages.has(t)||(this.pendingPages.add(t),l=!0);l&&(null!==this.debounceTimer&&clearTimeout(this.debounceTimer),this.debounceTimer=setTimeout((()=>this.flushPendingPages()),150))}flushPendingPages(){if(this.debounceTimer=null,0===this.pendingPages.size)return;const t=new Set(this.requestedPages);let r=!1;for(const e of this.pendingPages){if(this.loadedPages.has(e)||t.has(e))continue;const s=e*this.pageSize;s+this.pageSize-1<this.renderStart||s>this.renderEnd||(t.add(e),this.mrdLoadPage.emit({page:e,sort:this.sortParam()}),r=!0)}this.pendingPages.clear(),r&&(this.requestedPages=t)}componentDidRender(){if(0===this.colWidths.length&&this.loadedPages.size>0&&this.totalElements>0){const t=this.el.querySelectorAll(".mrd-table__header");t.length>0&&(this.colWidths=Array.from(t).map((t=>t.offsetWidth)))}}render(){var t,r;if(!(null===(t=this.columns)||void 0===t?void 0:t.length))return null;const e=new Set(["INTEGER","DECIMAL","PERCENTAGE","CURRENCY"]);if(0===this.totalElements)return s(l,null,s("div",{class:"mrd-table"},s("table",{class:"mrd-table__table"},s("thead",null,s("tr",null,this.columns.map((t=>{var r,e,l,a;return s("th",{class:"mrd-table__header"},null!==(a=null!==(e=null===(r=t.field)||void 0===r?void 0:r.label)&&void 0!==e?e:null===(l=t.relation)||void 0===l?void 0:l.label)&&void 0!==a?a:"")})))),s("tbody",null,null===(r=this.rows)||void 0===r?void 0:r.map(((t,r)=>s("tr",{class:"mrd-table__row mrd-table__row--clickable",style:{background:r%2==0?"":"var(--mrd-color-neutral-100)"},onClick:()=>this.mrdRowClick.emit(t)},this.columns.map((r=>{var l,a;const i=u.render(r,t,this.locale),o="FIELD"===r.type&&e.has(null!==(a=null===(l=r.field)||void 0===l?void 0:l.dataType)&&void 0!==a?a:"");return s("td",{class:"mrd-table__cell"+(o?" mrd-table__cell--numeric":"")},i)}))))))),(!this.rows||0===this.rows.length)&&s("p",{class:"mrd-table__empty"},"Geen resultaten gevonden.")));const a=this.totalElements,i=this.columns.length,o=this.renderStart*this.rowHeight,d=Math.max(0,(a-1-this.renderEnd)*this.rowHeight),n=[];for(let t=this.renderStart;t<=this.renderEnd;t++){const r=this.getRow(t);n.push(null===r?s("tr",{class:"mrd-table__row mrd-table__row--loading"},s("td",{class:"mrd-table__cell--placeholder",colSpan:i},s("span",{class:"mrd-table__placeholder-bar"}))):s("tr",{class:"mrd-table__row mrd-table__row--clickable",style:{background:t%2==0?"":"var(--mrd-color-neutral-100)"},onClick:()=>this.mrdRowClick.emit(r)},this.columns.map((t=>{var l,a;const i=u.render(t,r,this.locale),o="FIELD"===t.type&&e.has(null!==(a=null===(l=t.field)||void 0===l?void 0:l.dataType)&&void 0!==a?a:"");return s("td",{class:"mrd-table__cell"+(o?" mrd-table__cell--numeric":"")},i)}))))}return s(l,null,s("div",{class:"mrd-table__scroll",style:{height:this.tableHeight+"px"},onScroll:this.handleScroll},s("table",{class:"mrd-table__table",style:this.colWidths.length>0?{tableLayout:"fixed"}:void 0},s("thead",null,s("tr",null,this.columns.map(((t,r)=>{var e,l,a,i;const o=this.sortField===this.colName(t);return s("th",{class:"mrd-table__header mrd-table__header--sortable"+(o?" mrd-table__header--sorted-"+this.sortDir:""),style:this.colWidths[r]?{width:this.colWidths[r]+"px"}:void 0,onClick:()=>this.handleSortClick(t)},s("span",{class:"mrd-table__header-label"},null!==(i=null!==(l=null===(e=t.field)||void 0===e?void 0:e.label)&&void 0!==l?l:null===(a=t.relation)||void 0===a?void 0:a.label)&&void 0!==i?i:""),s("span",{class:"mrd-table__sort-icon","aria-hidden":"true"},o?"asc"===this.sortDir?"▲":"▼":"⇅"))})))),s("tbody",null,o>0&&s("tr",{class:"mrd-table__spacer",style:{height:o+"px"}},s("td",{colSpan:i})),n,d>0&&s("tr",{class:"mrd-table__spacer",style:{height:d+"px"}},s("td",{colSpan:i}))))),0===a&&s("p",{class:"mrd-table__empty"},"Geen resultaten gevonden."))}get el(){return this}static get style(){return".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}"}},[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]}]),_=b,v=function(){"undefined"!=typeof customElements&&["mrd-table"].forEach((t=>{"mrd-table"===t&&(customElements.get(a(t))||customElements.define(a(t),b))}))};export{_ as MrdTable,v as defineCustomElement}

package/dist/components/validation.js

@@ -1 +1 @@
-import{a as n}from"./client-layout.js";function r(n){return null!=n&&("string"==typeof n?n.trim().length>0:Array.isArray(n)?n.length>0:"object"!=typeof n||!("amount"in n)||null!=n.amount&&""!==n.amount)}function t(n){return!n||/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(n)}function u(n){if(!n)return!0;try{return new URL(n),!0}catch(n){return!1}}function e(r,t){if(null==r||""===r)return!0;const u=Number(r);return!isNaN(u)&&(t===n.INTEGER?Number.isInteger(u):t!==n.PERCENTAGE||u>=0&&u<=100)}export{t as a,u as b,e as c,r as v}
+import{b as n}from"./client-layout.js";function r(n){return null!=n&&("string"==typeof n?n.trim().length>0:Array.isArray(n)?n.length>0:"object"!=typeof n||!("amount"in n)||null!=n.amount&&""!==n.amount)}function t(n){return!n||/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(n)}function u(n){if(!n)return!0;try{return new URL(n),!0}catch(n){return!1}}function e(r,t){if(null==r||""===r)return!0;const u=Number(r);return!isNaN(u)&&(t===n.INTEGER?Number.isInteger(u):t!==n.PERCENTAGE||u>=0&&u<=100)}export{t as a,u as b,e as c,r as v}

package/dist/esm/{index-DQ_he8te.js → index-_tsCCkAi.js}

@@ -1,5 +1,5 @@
 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
@@ -1075,6 +1075,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$ ;
@@ -1085,6 +1086,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);
@@ -1104,6 +1126,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 */)) {
@@ -1265,6 +1298,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;
         }
@@ -1280,6 +1318,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         {
           hostRef.$flags$ &= -9 /* isConstructingInstance */;
         }
+        {
+          hostRef.$flags$ |= 128 /* isWatchReady */;
+        }
         endNewInstance();
         {
           fireConnectedCallback(hostRef.$lazyInstance$, elm);
@@ -1411,6 +1452,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],
@@ -1420,6 +1462,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/esm/index.js

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

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-DQ_he8te.js';
-export { s as setNonce } from './index-DQ_he8te.js';
+import { b as bootstrapLazy } from './index-_tsCCkAi.js';
+export { s as setNonce } from './index-_tsCCkAi.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["mrd-table",[[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",[[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 bootstrapLazy([["mrd-table",[[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",[[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);
 };
 
 export { defineCustomElements };

package/dist/esm/mosterdcomponents.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-DQ_he8te.js';
-export { s as setNonce } from './index-DQ_he8te.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-_tsCCkAi.js';
+export { s as setNonce } from './index-_tsCCkAi.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 /*
@@ -17,5 +17,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["mrd-table",[[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",[[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 bootstrapLazy([["mrd-table",[[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",[[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);
 });

package/dist/esm/mrd-boolean-field_16.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-DQ_he8te.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-_tsCCkAi.js';
 import { ClientLayoutItemFieldDataType, ClientLayoutItemType, ClientLayoutItemRelationDisplayType } from './index.js';
 import { p as parseLocalizedNumber, d as formatNumber } from './format-Dt-aHxkM.js';
 
@@ -392,7 +392,7 @@ const MrdField = class {
             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:
@@ -509,6 +509,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]) {
@@ -563,6 +570,11 @@ const MrdForm = class {
         const dir = this.locale.startsWith('ar') ? 'rtl' : 'ltr';
         return (h(Host, null, h("form", { class: "mrd-form", dir: dir, onSubmit: this.handleSubmit, noValidate: true }, this.layout.title && h("h2", { class: "mrd-form__title" }, this.layout.title), h("div", { class: "mrd-form__body" }, this.renderItems(this.layout.items)), h("div", { class: "mrd-form__footer" }, h("button", { type: "submit", class: "mrd-form__submit" }, t('submit', this.locale))))));
     }
+    static get watchers() { return {
+        "values": [{
+                "valuesChanged": 0
+            }]
+    }; }
 };
 MrdForm.style = mrdFormScss();
 
@@ -705,7 +717,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) => {
@@ -736,12 +749,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);
@@ -772,15 +785,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 (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))));
     }
 };
@@ -879,6 +893,7 @@ const MrdRelationField = class {
         this.displayType = 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 = [];
@@ -999,12 +1014,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 === 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));

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

@@ -1,28 +1,33 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-DQ_he8te.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-_tsCCkAi.js';
 import { f as formatTime, a as formatDateTime, b as formatDate, c as formatCurrency, d as formatNumber, e as formatPercentage } from './format-Dt-aHxkM.js';
+import { ClientLayoutItemType } from './index.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 === 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 !== 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 formatNumber(Number(value), locale, { maximumFractionDigits: 0 });
@@ -47,8 +52,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();
@@ -58,7 +63,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,6 +73,7 @@ const MrdTable = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.mrdLoadPage = createEvent(this, "mrdLoadPage");
+        this.mrdRowClick = createEvent(this, "mrdRowClick");
         // ── Debounce internals (geen @State — triggert geen re-render) ─────────────
         /** Pagina's die wachten op debounce-flush. */
         this.pendingPages = new Set();
@@ -169,12 +175,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.
@@ -277,10 +288,13 @@ const MrdTable = class {
         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", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' } }, 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.")))));
         }
@@ -296,10 +310,10 @@ const MrdTable = class {
                 renderedRows.push(h("tr", { class: "mrd-table__row mrd-table__row--loading" }, h("td", { class: "mrd-table__cell--placeholder", colSpan: colCount }, h("span", { class: "mrd-table__placeholder-bar" }))));
             }
             else {
-                renderedRows.push(h("tr", { class: "mrd-table__row", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' } }, this.columns.map(col => {
-                    var _a;
+                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, _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));
                 })));
             }
@@ -308,9 +322,10 @@ const MrdTable = class {
             ? { 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."))));
     }
     get el() { return getElement(this); }

package/dist/mosterdcomponents/index.esm.js

@@ -1 +1 @@
-var E,T,I;!function(E){E.FIELD="FIELD",E.RELATION="RELATION",E.SECTION="SECTION",E.GROUP="GROUP"}(E||(E={})),function(E){E.TEXT="TEXT",E.TEXTBLOCK="TEXTBLOCK",E.INTEGER="INTEGER",E.DECIMAL="DECIMAL",E.PERCENTAGE="PERCENTAGE",E.CURRENCY="CURRENCY",E.BOOLEAN="BOOLEAN",E.DATE="DATE",E.DATETIME="DATETIME",E.TIME="TIME",E.EMAIL="EMAIL",E.HYPERLINK="HYPERLINK",E.LIST="LIST",E.FILE="FILE",E.IMAGE="IMAGE"}(T||(T={})),function(E){E.SEARCH="SEARCH",E.DROPDOWN="DROPDOWN"}(I||(I={}));export{T as ClientLayoutItemFieldDataType,I as ClientLayoutItemRelationDisplayType,E as ClientLayoutItemType}
+var E,A,T,O,R;!function(E){E.OBJECT_FORM_DASHBOARD="OBJECT_FORM_DASHBOARD",E.CLASS_DASHBOARD="CLASS_DASHBOARD",E.GENERAL_DASHBOARD="GENERAL_DASHBOARD",E.NAVIGATION_PANE="NAVIGATION_PANE"}(E||(E={})),function(E){E.FIELD="FIELD",E.RELATION="RELATION",E.SECTION="SECTION",E.GROUP="GROUP",E.HEADER="HEADER",E.TEXT="TEXT",E.NAVIGATE="NAVIGATE",E.ACTION="ACTION",E.SEARCH="SEARCH",E.VIEW="VIEW",E.RELATED_VIEW="RELATED_VIEW",E.RELATED_OBJECT="RELATED_OBJECT"}(A||(A={})),function(E){E.TEXT="TEXT",E.TEXTBLOCK="TEXTBLOCK",E.INTEGER="INTEGER",E.DECIMAL="DECIMAL",E.PERCENTAGE="PERCENTAGE",E.CURRENCY="CURRENCY",E.BOOLEAN="BOOLEAN",E.DATE="DATE",E.DATETIME="DATETIME",E.TIME="TIME",E.EMAIL="EMAIL",E.HYPERLINK="HYPERLINK",E.LIST="LIST",E.FILE="FILE",E.IMAGE="IMAGE"}(T||(T={})),function(E){E.SEARCH="SEARCH",E.DROPDOWN="DROPDOWN",E.CHECKBOX="CHECKBOX"}(O||(O={})),function(E){E.SEARCH="SEARCH",E.DROPDOWN="DROPDOWN",E.CHECKBOX="CHECKBOX"}(R||(R={}));export{T as ClientLayoutItemFieldDataType,O as ClientLayoutItemRelationDisplayType,R as ClientLayoutItemRelationEditBehavior,A as ClientLayoutItemType,E as ClientLayoutType}

package/dist/mosterdcomponents/mosterdcomponents.esm.js

@@ -1 +1 @@
-import{p as e,b as l}from"./p-DQ_he8te.js";export{s as setNonce}from"./p-DQ_he8te.js";import{g as a}from"./p-DQuL1Twl.js";(()=>{const l=import.meta.url,a={};return""!==l&&(a.resourcesUrl=new URL(".",l).href),e(a)})().then((async e=>(await a(),l([["p-88cd0930",[[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]}]]],["p-926ed331",[[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]}]]]],e))));
+import{p as e,b as l}from"./p-_tsCCkAi.js";export{s as setNonce}from"./p-_tsCCkAi.js";import{g as a}from"./p-DQuL1Twl.js";(()=>{const l=import.meta.url,a={};return""!==l&&(a.resourcesUrl=new URL(".",l).href),e(a)})().then((async e=>(await a(),l([["p-baf08615",[[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]}]]],["p-09392901",[[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]}]]]],e))));